/* Conversation presentation. Keep account, model and generation behavior in gateway.js. */
:root {
  --conversation: var(--zoo-panel);
  --conversation-ink: var(--zoo-ink);
  --conversation-muted: var(--zoo-muted);
  --conversation-bubble: var(--zoo-lavender);
  --conversation-border: var(--zoo-line);
}
.main { background: var(--conversation); }
.main > .top, .model-nav, .compose { background: var(--conversation); }
.main > .top:first-child { border-bottom: 0; min-height: 64px; padding-block: 10px; }
.top-label { font-size: 12px; font-weight: 500; }
.early { border: 0; background: var(--conversation-bubble); color: var(--conversation-muted); }
.explore-btn { background: transparent; border-color: var(--conversation-border); border-radius: 10px; }
.theme-toggle { background: transparent; border-color: transparent; }
.model-nav { padding-top: 0; }
.model-nav .seg { gap: 5px; }
.model-nav .seg button { color: var(--conversation-muted); border-radius: 9px; font-weight: 500; }
.model-nav .seg button.on { background: var(--conversation-bubble); color: var(--conversation-ink); box-shadow: none; }
.model-nav .seg button small { opacity: .65; }
.main > .pickrow { min-height: 82px; border-color: var(--conversation-border); gap: 24px; }
.pick { border-color: var(--conversation-border); border-radius: 12px; box-shadow: none; background: transparent; padding: 9px 12px; }
.pick:hover { background: var(--conversation-bubble); }
.pick-name { font-size: 14px; font-weight: 600; letter-spacing: -.2px; }
.pick-sub { color: var(--conversation-muted); font-size: 11px; }
.privacy { color: var(--conversation-muted); line-height: 1.65; }
.thread { padding: 38px 32px 28px; scrollbar-color: var(--conversation-border) transparent; scrollbar-width: thin; }
.msgs { width: 100%; max-width: 760px; gap: 32px; padding-bottom: 12px; color: var(--conversation-ink); }
.msg { display: block; position: relative; min-width: 0; }
/* Roles remain available to assistive technology without avatar clutter. */
.msg .who { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.msg > div:last-child { min-width: 0; }
.msg.user { align-self: flex-end; max-width: min(85%, 640px); }
.msg.user .body { background: var(--conversation-bubble); border-radius: 22px; padding: 12px 19px; font-size: 15px; line-height: 1.65; overflow-wrap: anywhere; }
.msg.assistant { width: 100%; padding: 0 2px; }
.msg.assistant .body { font-size: 16px; line-height: 1.8; letter-spacing: -.1px; overflow-wrap: anywhere; }
.msg.assistant .body > :first-child { margin-top: 0; }
.msg.assistant .body > :last-child { margin-bottom: 0; }
.msg .body p { margin: 0 0 1.1em; }
.msg .body h1, .msg .body h2, .msg .body h3 { letter-spacing: -.5px; line-height: 1.35; margin: 1.5em 0 .7em; font-weight: 600; }
.msg .body h1 { font-size: 26px; }
.msg .body h2 { font-size: 22px; }
.msg .body h3 { font-size: 18px; }
.msg .body li { margin-block: .35em; padding-left: 3px; }
.msg .body ul, .msg .body ol { padding-left: 24px; margin-block: 1em; }
.msg .body blockquote { margin: 1.25em 0; padding: 3px 20px; border-left: 3px solid var(--conversation-border); color: var(--conversation-muted); }
.msg .body :not(pre) > code { background: var(--conversation-bubble); border-radius: 5px; padding: 2px 5px; font-size: .85em; }
.msg .code-block { margin: 22px 0; border-color: var(--conversation-border); border-radius: 14px; overflow: hidden; background: var(--conversation-bubble); }
.msg .code-block pre { padding: 20px; font-size: 13px; line-height: 1.7; }
.msg .body table { font-size: 14px; line-height: 1.6; }
.msg .body th, .msg .body td { padding: 12px 16px; border-color: var(--conversation-border); }
.msg .meta { margin-top: 14px; font-size: 11px; line-height: 1.5; color: var(--conversation-muted); font-variant-numeric: tabular-nums; }
.msg.err .body { border-left: 2px solid var(--accent-edge); padding-left: 16px; }
.compose { border-top: 0; padding: 12px 30px 14px; }
.compose .box { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; max-width: 800px; padding: 16px 12px 10px 18px; border: 1px solid var(--conversation-border); border-radius: 26px; background: var(--panel); box-shadow: 0 3px 16px #00000006; }
.compose .box:focus-within { border-color: var(--line2); box-shadow: 0 3px 18px #00000009; }
.compose .box textarea { grid-column: 1 / -1; width: 100%; min-height: 38px; max-height: 180px; padding: 2px 5px; font-size: 16px; line-height: 1.6; color: var(--conversation-ink); }
.compose textarea::placeholder { color: var(--conversation-muted); opacity: 1; }
.compose .webtog { grid-column: 1; grid-row: 2; justify-self: start; min-height: 36px; height: 36px; border: 1px solid transparent; border-radius: 18px; padding: 0 11px; color: var(--conversation-muted); background: transparent; font-size: 12px; font-weight: 500; }
.compose .webtog:hover { background: var(--conversation-bubble); }
.compose .webtog[aria-pressed="true"] { background: var(--accent-wash); border-color: transparent; color: var(--accent-ink); }
.compose .send, .compose .send.gen { grid-column: 2; grid-row: 2; justify-content: center; align-items: center; gap: 0; width: 40px; height: 40px; min-height: 40px; padding: 0; border-radius: 50%; border: 0; background: var(--zoo-gold); color: var(--zoo-on-gold); box-shadow: none; }
.compose .send:hover { opacity: .8; }
.compose .send.ready { background: var(--zoo-gold); color: var(--zoo-on-gold); box-shadow: none; }
.compose .send:disabled { background: var(--conversation-bubble); color: var(--conversation-muted); opacity: 1; }
.compose .send svg { width: 20px; height: 20px; transform: rotate(-90deg); }
.compose .send .send-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.compose .hint, .compose .composer-notice { max-width: 800px; color: var(--conversation-muted); font-size: 10px; line-height: 1.5; margin-top: 8px; }
.compose .hint:empty { display: none; }
.compose .composer-notice a { color: inherit; text-underline-offset: 3px; }
.studio-tools { max-width: 800px; }
.side { background: var(--header); border-color: var(--conversation-border); }
.credit-summary { background: transparent; border-color: var(--conversation-border); box-shadow: none; border-radius: 14px; }
.credit-balance strong { font-size: 32px; letter-spacing: -1px; font-weight: 500; }
.credit-add { border-radius: 10px; }
.conv { border-radius: 9px; }
.conv.on { background: var(--conversation-bubble); border-color: transparent; }
.conversation-heading h2 { font-weight: 500; color: var(--conversation-muted); }
.sidebar-utilities { border-color: var(--conversation-border); }
[data-theme="dark"] .compose .box { background: var(--zoo-bg); }
@media (max-width: 1100px) and (min-width: 761px) {
  .main > .pickrow { gap: 12px; }
}
@media (max-width: 760px) {
  .main > .top:first-child { min-height: 58px; padding: 8px 16px; }
  .model-nav .seg button { min-height: 40px; }
  .main > .pickrow { padding: 8px 16px 11px; min-height: 0; }
  .pick { min-height: 48px; padding: 7px 10px; }
  .privacy { font-size: 9px; margin-top: 7px; }
  .thread { padding: 26px 20px 20px; }
  .msgs { gap: 28px; }
  .msg.user { max-width: 90%; }
  .msg.user .body { padding: 10px 16px; font-size: 15px; border-radius: 20px; }
  .msg.assistant .body { font-size: 15px; line-height: 1.8; }
  .msg .body h2 { font-size: 21px; }
  .msg .meta { font-size: 10px; margin-top: 12px; }
  .compose { padding: 8px 12px max(10px, env(safe-area-inset-bottom)); }
  .compose .box { padding: 13px 10px 8px 14px; border-radius: 23px; gap: 4px; }
  .compose .box textarea { min-height: 36px; }
  .compose .webtog { width: auto; min-height: 44px; height: 44px; }
  .compose .webtog span { display: inline; }
  .compose .send, .compose .send.gen { width: 44px; height: 44px; min-height: 44px; }
  .compose .composer-notice { font-size: 9px; padding-inline: 5px; }
}

.msg .code-label { background: var(--conversation-bubble); border-color: var(--conversation-border); }
.msg .body th { background: var(--conversation-bubble); }

/* Phones: labels of 12px or more and tap targets of at least 44px (zooko.ai audit). The notice under the
   composer says the model host sees the prompt, so it must be readable. */
@media (max-width:640px){
.ex-head h2 .n,.seg button .n,.future-note,.pick-sub,.eyebrow,.step-label,.intro>p,.art-eyebrow,.hero-sub,.art-cta,.thought-card span,.launch-row p,.task-heading span,.task-card p,.task-card small,.mtag,.privacy,.privacy b,.privacy-details summary,.privacy-details p{font-size:12px}
.compose .hint,.compose .composer-notice,.hint,.composer-notice{font-size:12px}
.ex-head .link{min-height:44px;padding:0 4px}
.future-note a,.composer-notice a{display:inline-flex;align-items:center;min-height:44px}
}

/* Signed out: one way in, no empty money card (audit D5); the Suite line in the account area (D6) */
.credit-summary.guest .credit-balance,.credit-summary.guest .credit-activity,.credit-summary.guest .credit-add,.credit-summary.guest .credit-payment-note,.credit-summary.guest #keyLinks,.credit-summary.guest .credit-status:empty{display:none}
.credit-summary.guest #accountControls{display:none}
.guest-cta .btn{display:flex;align-items:center;justify-content:center;min-height:44px;text-align:center;text-decoration:none;white-space:nowrap}
.guest-cta p{margin:10px 0 0;font-size:13px;line-height:1.5;color:var(--mute)}
.suite-line{margin:8px 0 0;font-size:13px;line-height:1.5;color:var(--mute)}
.suite-line a{font-weight:650;color:var(--ink)}
/* The hero label stays readable on the bright image (audit D7) */
.product-art .art-eyebrow{background:rgba(12,14,16,.55);color:#fff;padding:3px 8px;border-radius:999px;backdrop-filter:blur(2px)}
/* Phones: the header keeps to one line (audit D11) */
@media (max-width:420px){.video-link .arrow{display:none}.video-link{white-space:nowrap}.top-label{white-space:nowrap}.top-label .early{display:none}}
/* Light theme: muted text at least 4.5:1 (audit D10: "Live Beta", "Conversations", category counts) */
:root:not([data-theme=dark]){--conversation-muted:var(--zoo-muted);--mute2:var(--zoo-muted)}

/* Keep every header control in view on narrow phones. */
@media (max-width: 420px) {
  .main > .top:first-child { display: grid; grid-template-columns: 44px 44px minmax(0,1fr) 44px; gap: 6px 8px; }
  .main > .top:first-child > .top-label { grid-column: 1 / 4; grid-row: 1; white-space: normal; min-width: 0; }
  .main > .top:first-child > .theme-toggle { grid-column: 4; grid-row: 1; margin: 0; }
  .main > .top:first-child > .menu-btn { grid-column: 1; grid-row: 2; }
  .main > .top:first-child > .explore-btn { grid-column: 2; grid-row: 2; }
  .main > .top:first-child > .video-link { grid-column: 3 / 5; grid-row: 2; justify-content: center; }
  .main > .top:first-child > div:empty { display: none; }
  .main > .top:first-child > .wallet:not([hidden]) { grid-column: 1 / -1; }
}