/* Your own AI (byok.js): the Settings group, its sheet, and the invite
   prompt's second way in. Tokens only, so dark and light both follow. */

/* ── The group (Settings and the sheet) ─────────────────── */
.own-group { display: flex; flex-direction: column; gap: 12px; }
.own-lead { margin: 0; color: var(--text-dim); font-size: 0.86rem; line-height: 1.5; }
.own-now { display: flex; align-items: center; gap: 8px; margin: 0; padding: 9px 12px; border: 1px solid var(--border); border-radius: 11px; color: var(--text-dim); font-size: 0.84rem; line-height: 1.4; overflow-wrap: anywhere; }
.own-now.is-on { border-color: color-mix(in srgb, var(--teal) 45%, var(--border)); background: color-mix(in srgb, var(--teal) 8%, transparent); color: var(--text); }
.own-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); }

.own-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 3px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }
.own-tab { position: relative; flex: 1 1 auto; min-height: 36px; padding: 0 14px; border: 0; border-radius: 9px; background: none; color: var(--text-dim); font: 600 0.8rem/1 var(--font-heading); cursor: pointer; white-space: nowrap; }
.own-tab[aria-selected="true"] { background: var(--bg-card); color: var(--text); box-shadow: 0 0 0 1px var(--border-hover); }
.own-tab.is-saved::after { content: ''; position: absolute; top: 6px; right: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--text3); }
.own-tab.is-active::after { background: var(--teal); }
.own-tab:focus-visible { outline: 2px solid color-mix(in srgb, var(--purple) 60%, transparent); outline-offset: 1px; }

.own-panel { display: flex; flex-direction: column; gap: 10px; }
.own-p-d { margin: 0; color: var(--text); font-size: 0.86rem; line-height: 1.5; }
.own-p-d a { color: var(--purple); white-space: nowrap; }
.own-key-row { display: flex; gap: 8px; min-width: 0; }
.own-key { -webkit-text-security: disc; flex: 1; min-width: 0; min-height: 40px; padding: 0 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--text); font: 400 0.86rem/1 var(--font-mono); }
.own-key:placeholder-shown { -webkit-text-security: none; }
.own-key::placeholder { color: var(--text3); font-family: var(--font-body); font-size: 0.82rem; }
.own-key:focus { outline: none; border-color: var(--teal); }
.own-key-row .nb-btn-ghost { flex: none; min-height: 40px; padding: 0 14px; font-size: 0.84rem; }
.own-model-row { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--text-dim); font-size: 0.82rem; }
.own-model-row > span { flex: none; }
.own-model { flex: 1; min-width: 0; min-height: 38px; padding: 0 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--text); font: 400 0.84rem/1 var(--font-mono); }
.own-hears { margin: 0; color: var(--text3); font-size: 0.78rem; line-height: 1.45; }
.own-msg { margin: 0; min-height: 0; font-size: 0.84rem; line-height: 1.45; color: var(--text-dim); }
.own-msg:empty { display: none; }
.own-msg.ok { color: var(--teal); }
.own-msg.err { color: var(--red); }
.own-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.own-btns:empty { display: none; }
.own-btns .nb-btn-ghost { min-height: 40px; padding: 0 14px; font-size: 0.84rem; }
.own-primary { min-height: 40px; padding: 0 16px; border: 1px solid var(--warm); border-radius: 10px; background: var(--warm); color: #1d140c; font: 700 0.86rem/1 var(--font-heading); cursor: pointer; }
.own-primary:hover { filter: brightness(1.05); }
.own-primary:disabled, .own-key-row .nb-btn-ghost:disabled { opacity: 0.6; cursor: default; }
.own-paste summary, .own-more summary { cursor: pointer; color: var(--text-dim); font-size: 0.82rem; }
.own-paste[open] summary { margin-bottom: 8px; }
.own-more { padding: 10px 12px; border: 1px solid var(--border); border-radius: 11px; }
.own-more p { margin: 8px 0 0; color: var(--text-dim); font-size: 0.82rem; line-height: 1.5; }
.own-prefer { margin: 0; }
@media (pointer: coarse) {
  .own-key, .own-key-row .nb-btn-ghost, .own-model, .own-primary, .own-btns .nb-btn-ghost { min-height: 44px; }
  .own-tab { min-height: 40px; }
}
@media (max-width: 480px) {
  .own-tab { flex-basis: calc(50% - 2px); }
}

/* ── The sheet ──────────────────────────────────────────── */
html.own-lock { overflow: hidden; }
.own-ov { position: fixed; inset: 0; z-index: 9600; display: flex; align-items: center; justify-content: center; padding: 72px 16px 16px; opacity: 0; transition: opacity 0.2s ease; background: color-mix(in srgb, var(--bg) 62%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.own-ov.show { opacity: 1; }
.own-sheet { position: relative; display: flex; flex-direction: column; width: min(540px, 100%); max-height: calc(100dvh - 96px); box-sizing: border-box; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); box-shadow: 0 28px 70px rgba(0, 0, 0, 0.35); }
.own-body { flex: 1; min-height: 0; overflow: auto; padding: 22px 20px 8px; overscroll-behavior: contain; }
.own-body .own-group .nb-set-group-t { margin: 0 44px 0 0; font: 400 1.4rem/1.15 var(--font-display); color: var(--text); text-transform: none; letter-spacing: 0; }
.own-why { margin: 0; padding: 22px 64px 0 20px; color: var(--text); font-size: 0.92rem; line-height: 1.5; }
.own-why + .own-body { padding-top: 12px; }
.own-x { position: absolute; top: 14px; right: 14px; z-index: 1; width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text-dim); font-size: 0.95rem; cursor: pointer; }
.own-x:hover { color: var(--text); }
.own-foot { display: flex; justify-content: flex-end; padding: 10px 20px 16px; }
.own-foot:has(.own-done[hidden]) { display: none; }
@media (max-width: 560px) {
  .own-ov { align-items: flex-end; padding: 0; }
  .own-sheet { width: 100%; max-height: calc(100dvh - 48px); border-radius: 18px 18px 0 0; border-bottom: 0; }
  .own-body { padding: 20px 16px 8px; }
  .own-why { padding: 20px 60px 0 16px; }
  .own-foot { padding: 10px 16px calc(14px + env(safe-area-inset-bottom, 0px)); }
  .own-foot .own-primary { flex: 1; }
}

/* ── The invite prompt's second way in ──────────────────── */
.nb-invite .nb-invite-own { display: flex; flex-direction: column; align-items: stretch; gap: 0.5rem; margin: 1.1rem 0 0; }
.nb-invite .nb-invite-own.first { margin: 0 0 1.1rem; }
.nb-invite .nb-invite-own-b { width: 100%; box-sizing: border-box; padding: 0.8rem 1rem; border: 1px solid var(--teal); border-radius: 11px; background: color-mix(in srgb, var(--teal) 14%, var(--bg2)); color: var(--text); font: 600 0.95rem/1.2 var(--font-heading); cursor: pointer; }
.nb-invite .nb-invite-own-b:hover { background: color-mix(in srgb, var(--teal) 22%, var(--bg2)); }
.nb-invite .nb-invite-own-h { margin: 0 auto; max-width: 40ch; color: var(--text3); font-size: 0.78rem; line-height: 1.45; }
.nb-invite .nb-invite-or { display: block; color: var(--text3); font: 400 0.7rem/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.nb-invite .nb-invite-own.first .nb-invite-or { margin-top: 0.6rem; }
/* In the sheet the group stands alone: no divider above it. */
.own-body .own-group { margin-top: 0; padding-top: 0; border-top: 0; border-bottom: 0; }