/* OmniLLM web client. Phone first; tablets get a wider column. Colors are
   tokens; dark mode redefines them. */
:root {
  /* NEXA "Aurora" (pgclient web/static/app.css, docs/32): purple = what you
     can press, green/amber/red = state, neutrals carry a trace of purple. */
  --bg: #F6F6FB; --surface: #FFFFFF; --surface-2: #EEF0F7; --surface-3: #E1E2EB;
  --line: #DCDDE6; --line-2: #C8CAD5;
  --ink: #131524; --ink-2: #3E4155; --muted: #5F6275;
  --accent: #724DE7; --accent-2: #7F66E9; --accent-ink: #FFFFFF; --accent-text: #6851C3; --accent-soft: rgba(114,77,231,.10);
  --user: rgba(114,77,231,.10);
  --ok: #0A8F47; --ok-soft: rgba(10,143,71,.18); --ok-ink: #097E40; --warn: #8C5E08; --warn-hi: #AB740A; --warn-soft: rgba(171,116,10,.11); --warn-line: rgba(171,116,10,.26);
  --danger: #B3260E; --bad-soft: rgba(208,47,20,.11);
  --glow: 0 0 0 1px rgba(114,77,231,.25), 0 6px 24px -8px rgba(114,77,231,.35);
  --shadow-1: 0 1px 2px rgba(14,20,32,.06);
  --shadow-2: 0 1px 2px rgba(14,20,32,.05), 0 12px 32px -12px rgba(14,20,32,.22);
  --focus: 0 0 0 1px var(--accent), 0 0 0 4px rgba(114,77,231,.24);
  --r-xs: 4px; --r-s: 6px; --r: 10px; --r-l: 12px; --radius: 14px;
  --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --icon-ink: %235F6275; --send-ink: white;
  color-scheme: light;
}
:root[data-theme="dark"] {
    --bg: #080912; --surface: #10121C; --surface-2: #181A25; --surface-3: #21232F;
    --line: #292A36; --line-2: #3A3C4A;
    --ink: #EDEEF5; --ink-2: #C1C3D1; --muted: #9497A8;
    --accent: #9B8AFF; --accent-2: #BAB3FD; --accent-ink: #0B0820; --accent-text: #BAB3FD; --accent-soft: rgba(155,138,255,.15);
    --user: rgba(155,138,255,.15);
    --ok: #4BDE81; --ok-soft: rgba(75,222,129,.20); --ok-ink: #8CEAA6; --warn: #FEC675; --warn-hi: #FEBD5B; --warn-soft: rgba(254,189,91,.13); --warn-line: rgba(254,189,91,.30);
    --danger: #FF9E84; --bad-soft: rgba(253,104,68,.13);
    --glow: 0 0 0 1px rgba(155,138,255,.35), 0 8px 30px -10px rgba(155,138,255,.55);
    --shadow-1: 0 0 0 1px rgba(255,255,255,.04);
    --shadow-2: 0 1px 0 rgba(255,255,255,.03) inset, 0 14px 36px -14px rgba(0,0,0,.75);
    --focus: 0 0 0 1px var(--accent), 0 0 0 4px rgba(155,138,255,.30);
    color-scheme: dark;
  }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--ink); font: 16px/1.6 var(--font); -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; overscroll-behavior: none; }
button, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
#app { height: 100dvh; display: flex; flex-direction: column; }
.screen { flex: 1; min-height: 0; }
.center { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 14px;
  padding: max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom)); max-width: 480px; margin: 0 auto; width: 100%; }
h1 { font-size: 21px; font-weight: 600; letter-spacing: -.02em; line-height: 1.35; margin: 0; text-wrap: balance; } h2 { font-size: 16px; font-weight: 600; margin: 0 0 8px; }
:focus-visible { outline: 0; box-shadow: var(--focus); }
.muted { color: var(--muted); } .small { font-size: 14px; }
.err { color: var(--danger); min-height: 1.5em; margin: 0; }
.primary, .secondary { border-radius: var(--r); padding: 12px 20px; min-height: 48px; border: 1px solid var(--line-2); cursor: pointer; width: 100%; max-width: 320px; font-weight: 500; transition: background .15s, border-color .15s, box-shadow .15s, color .15s; }
.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; box-shadow: var(--glow); }
.primary:active { background: var(--accent-2); border-color: var(--accent-2); }
.secondary { background: var(--surface); color: var(--ink); }
.secondary:active { background: var(--surface-2); }
.primary:disabled, .secondary:disabled { opacity: .45; cursor: default; box-shadow: none; }
.link { background: none; border: 0; color: var(--accent-text); padding: 6px 0; cursor: pointer; text-align: left; font-weight: 500; }
.danger { color: var(--danger); }
.spinner { width: 28px; height: 28px; border: 3px solid var(--accent-soft); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }
/* State notices: NEXA's chip (a warn hairline all round) with a warn icon;
   the text is ink, as in the console. */
.warn { background: var(--warn-soft); color: var(--ink); border: 1px solid var(--warn-line); border-radius: var(--r); padding: 10px 12px 10px 36px; margin: 0; text-align: left; position: relative; }
/* The icon sits left of the text (text may hold nowrap names, so no flex). */
.warn::before, .warn-note::before, .msg .note::before { position: absolute; left: 12px; top: 13px; margin-top: 0 !important; }
.warn::before, .warn-note::before, .banner::before, .msg .note::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: 3px; background: var(--warn-hi);
  -webkit-mask: var(--warn-icon) center / contain no-repeat; mask: var(--warn-icon) center / contain no-repeat; }
/* The console's and NEXA's warn triangle. */
:root { --warn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.8 14.8 13.9H1.2Z' fill='none' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M8 6.2v3.6' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='11.8' r='.95'/%3E%3C/svg%3E"); }
/* Quoted UI names (“添加设备”) never break inside. */
.q { white-space: nowrap; }

/* ---------- chat ----------
   Wide screens (≥1024 px): the chat list is a sidebar, the talk and the
   composer share one centred column (704 px of text). Narrower: the list
   is a drawer and a bar names the chat. */
:root { --ink-3: var(--muted); --rail: #FFFFFF; --bad: #D02F14; --bad-line: rgba(208,47,20,.26);
  --shadow-pop: 0 2px 6px rgba(14,20,32,.06), 0 18px 44px -12px rgba(14,20,32,.30); --scrim: rgba(8,9,18,.45); --col: 704px; }
:root[data-theme="dark"] { --rail: #0C0E17; --bad: #FD6844; --bad-line: rgba(253,104,68,.32);
  --shadow-pop: 0 0 0 1px rgba(255,255,255,.05), 0 20px 48px -12px rgba(0,0,0,.8); --scrim: rgba(0,0,0,.6); }

/* Line icons as masks, coloured by the text colour. */
.ic { display: inline-block; width: 18px; height: 18px; flex: none; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.ic.s14 { width: 14px; height: 14px; } .ic.s16 { width: 16px; height: 16px; } .ic.s20 { width: 20px; height: 20px; }
.i-compose { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E"); }
.i-search { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E"); }
.i-side { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='3'/%3E%3Cpath d='M9 4v16'/%3E%3C/svg%3E"); }
.i-menu { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h10'/%3E%3C/svg%3E"); }
.i-copy { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='8' width='12' height='12' rx='2'/%3E%3Cpath d='M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2'/%3E%3C/svg%3E"); }
.i-again { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.34-5.66'/%3E%3Cpath d='M20 4v5h-5'/%3E%3C/svg%3E"); }
.i-image { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='3'/%3E%3Ccircle cx='9' cy='10' r='2'/%3E%3Cpath d='m21 16-5-5-9 9'/%3E%3C/svg%3E"); }
.i-up { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E"); }
.i-down { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12l7 7 7-7'/%3E%3C/svg%3E"); }
.i-chev { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
.i-updown { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 9 5-5 5 5M7 15l5 5 5-5'/%3E%3C/svg%3E"); }
.i-check { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E"); }
.i-warn { --i: var(--warn-icon); }
.i-bad { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5'/%3E%3Ccircle cx='12' cy='16.5' r='.6' fill='black'/%3E%3C/svg%3E"); }
.i-mac { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='12' rx='2'/%3E%3Cpath d='M2 20h20'/%3E%3C/svg%3E"); }
.i-x { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E"); }
.i-sun { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E"); }
.i-moon { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z'/%3E%3C/svg%3E"); }
.i-lang { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18'/%3E%3C/svg%3E"); }
.i-more { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Ccircle cx='5' cy='12' r='1.8'/%3E%3Ccircle cx='12' cy='12' r='1.8'/%3E%3Ccircle cx='19' cy='12' r='1.8'/%3E%3C/svg%3E"); }
.i-pen { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16v4zM14 6l4 4'/%3E%3C/svg%3E"); }
.i-trash { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6M6 7l1 12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-12M9 7V4h6v3'/%3E%3C/svg%3E"); }
.i-key { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='6' width='20' height='12' rx='2'/%3E%3Cpath d='M6 10h.01M10 10h.01M14 10h.01M18 10h.01M7 14h10'/%3E%3C/svg%3E"); }
.i-home { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12M7 8l5-5 5 5'/%3E%3Cpath d='M5 13v6a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6'/%3E%3C/svg%3E"); }

.chat { display: flex; min-height: 0; background: var(--bg); }
.main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; position: relative; }
.ibtn { width: 40px; height: 40px; border: 0; border-radius: 10px; background: transparent; color: var(--ink-3); display: inline-grid; place-items: center; cursor: pointer; flex: none; padding: 0; position: relative; }
.ibtn:active { background: var(--surface-2); color: var(--ink); }
.ibtn:disabled { opacity: .45; cursor: default; background: transparent; }
@media (hover: hover) { .ibtn:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); } }

/* phone and tablet: a bar with the list, the chat's title and a new chat */
.bar { display: flex; align-items: center; gap: 4px; padding: max(6px, env(safe-area-inset-top)) 6px 6px; border-bottom: 1px solid var(--line); background: var(--bg); }
.bar .ibtn { width: 44px; height: 44px; color: var(--ink-2); }
/* The chat's name: centred in the phone bar, at the top left of the talk
   on wide screens. Click: its menu (Rename, Delete); double click: rename. */
.bar { position: relative; }
.bar-t, .head-t { display: inline-flex; align-items: center; gap: 4px; min-width: 0; border: 0; background: none; color: var(--ink); font: 600 15px/1.4 var(--font); padding: 6px 8px; border-radius: 8px; cursor: pointer; }
.bar-t { flex: 1; justify-content: center; }
.head-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.head-chev { color: var(--ink-3); flex: none; }
.head-t[aria-expanded="true"] .head-chev, .bar-t[aria-expanded="true"] .head-chev { transform: rotate(180deg); }
.chat-head { display: none; }
.head-t { max-width: min(56ch, 72%); font-weight: 500; }
@media (hover: hover) { .head-t:hover, .bar-t[title]:not([title=""]):hover, .head-t[aria-expanded="true"] { background: var(--surface-2); } }
.chat-head .row-menu { top: calc(100% - 4px); left: 12px; min-width: 160px; }
.bar .row-menu { top: calc(100% - 2px); left: 50%; transform: translateX(-50%); min-width: 160px; }
.rename-in { width: 100%; min-width: 12ch; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--accent); border-radius: var(--r-s); padding: 3px 8px; outline: 0; box-shadow: var(--focus); text-align: left; }
#chat-list li.row { position: relative; }
#chat-list .row-menu { top: calc(100% - 2px); right: 4px; min-width: 150px; }
#chat-list .row.menu-open .chat-del { visibility: visible !important; background: var(--surface-2); }
.side-btns { display: none; }

/* the talk */
.log { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 16px 16px; display: flex; flex-direction: column; gap: 24px; -webkit-overflow-scrolling: touch; }
.log > * { max-width: var(--col); width: 100%; margin-left: auto; margin-right: auto; flex: none; }
.msg { overflow-wrap: anywhere; position: relative; }
.msg.user { align-self: flex-end; width: fit-content; max-width: min(86%, calc(var(--col) * .82)); margin-right: max(0px, calc((100% - var(--col)) / 2)); margin-left: auto; background: var(--user); padding: 10px 16px; border-radius: 18px 18px 6px 18px; }
.msg p { margin: 0 0 14px; white-space: pre-wrap; }
.msg.user p { margin-bottom: 8px; }
.msg .body > :last-child { margin-bottom: 0; }
.msg ul, .msg ol { margin: 0 0 14px; padding-left: 1.3em; }
.msg li { white-space: pre-wrap; }
.msg li + li { margin-top: 4px; }
.msg li > ul, .msg li > ol { margin: 4px 0 0; }
.msg .loose > li + li { margin-top: 12px; }
.msg li > p { margin: 8px 0 0; }
.msg li > .code { margin: 8px 0; white-space: normal; }
.msg li.task { list-style: none; }
.msg li.task .box { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin: 0 8px 0 -1.3em; vertical-align: -2px; border: 1.5px solid var(--line-2); border-radius: 4px; font-size: 11px; font-weight: 700; line-height: 1; color: var(--accent-ink); }
.msg li.task .box.on { background: var(--accent); border-color: var(--accent); }
.msg :not(pre) > code { font-family: var(--mono); font-size: .88em; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-xs); padding: 1px 5px; }
/* Headings, rules, quotes, links and tables in a reply. */
.msg h1, .msg h2, .msg h3, .msg h4 { margin: 22px 0 10px; font-weight: 600; line-height: 1.45; letter-spacing: 0; color: var(--ink); white-space: pre-wrap; }
.msg h1 { font-size: 1.3em; } .msg h2 { font-size: 1.18em; } .msg h3 { font-size: 1.06em; } .msg h4 { font-size: 1em; }
.msg .body > :first-child { margin-top: 0; }
.msg hr { border: 0; border-top: 1px solid var(--line); margin: 22px 0; }
.msg blockquote { margin: 0 0 14px; padding: 2px 0 2px 14px; border-left: 3px solid var(--line-2); color: var(--ink-2); }
.msg blockquote > :last-child { margin-bottom: 0; }
.msg a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
.msg del, .msg s { color: var(--muted); }
.msg mark { background: var(--warn-soft); color: inherit; border-radius: 3px; padding: 0 2px; }
.msg kbd { font: .85em var(--mono); border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; }
.msg .table { overflow-x: auto; margin: 0 0 14px; -webkit-overflow-scrolling: touch; }
.msg table { border-collapse: collapse; min-width: 100%; font-size: 14px; line-height: 1.6; overflow-wrap: normal; }
.msg th, .msg td { padding: 9px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); white-space: pre-wrap; min-width: 8em; max-width: 26em; }
.msg th { font-weight: 600; color: var(--ink); border-bottom-color: var(--line-2); }
.msg th:first-child, .msg td:first-child { padding-left: 0; }
.msg tbody tr:last-child td { border-bottom: 0; }
/* Math (MathML from Temml): a touch larger than the text around it, as
   math fonts run small next to PingFang; a wide formula scrolls in its box. */
.msg math { font-size: 1.12em; }
.msg .math.block { display: block; margin: 0 0 14px; padding: 6px 0; overflow-x: auto; overflow-y: hidden; text-align: center; }
.msg .math.raw { font-family: var(--mono); font-size: .88em; color: var(--ink-2); white-space: pre-wrap; }
.msg .math.block.raw { text-align: left; }
.msg th.al-center, .msg td.al-center { text-align: center; } .msg th.al-right, .msg td.al-right { text-align: right; }
.msg .pics { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.msg .pics img { max-width: 160px; max-height: 160px; border-radius: 10px; display: block; }
/* Code: a small head with the language and Copy. */
.code { border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; margin: 0 0 14px; background: var(--surface); }
.code-h { display: flex; align-items: center; justify-content: space-between; min-height: 36px; padding: 0 4px 0 14px; font-size: 12px; color: var(--ink-3); border-bottom: 1px solid var(--line); background: var(--surface-2); }
.code-h button { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 8px; border: 0; border-radius: var(--r-s); background: transparent; color: var(--ink-3); font-size: 12px; cursor: pointer; }
.code-h button:active { background: var(--surface-3); color: var(--ink); }
@media (hover: hover) { .code-h button:hover { background: var(--surface-3); color: var(--ink); } }
.code pre { margin: 0; padding: 12px 14px; overflow-x: auto; font: 13px/1.6 var(--mono); }
.code code { font: 13px/1.6 var(--mono); color: var(--ink); white-space: pre; }
/* Code colors (GitHub's light and dark palettes, which read well on both). */
:root { --tk-c: #6E7781; --tk-s: #0A3069; --tk-n: #0550AE; --tk-k: #CF222E; --tk-f: #8250DF; --tk-t: #953800; --tk-p: #0550AE; --tk-v: #953800;
  --dl-add: rgba(26,127,55,.12); --dl-add-ink: #116329; --dl-del: rgba(207,34,46,.10); --dl-del-ink: #82071E; }
:root[data-theme="dark"] { --tk-c: #8B949E; --tk-s: #A5D6FF; --tk-n: #79C0FF; --tk-k: #FF7B72; --tk-f: #D2A8FF; --tk-t: #FFA657; --tk-p: #79C0FF; --tk-v: #FFA657;
  --dl-add: rgba(46,160,67,.18); --dl-add-ink: #7EE787; --dl-del: rgba(248,81,73,.18); --dl-del-ink: #FFA198; }
.tk-c { color: var(--tk-c); font-style: italic; } .tk-s { color: var(--tk-s); } .tk-n { color: var(--tk-n); }
.tk-k { color: var(--tk-k); } .tk-f { color: var(--tk-f); } .tk-t { color: var(--tk-t); } .tk-p { color: var(--tk-p); } .tk-v { color: var(--tk-v); }
/* A diff: one row per line, the rows as wide as the widest line. */
.code code.diff { display: inline-block; min-width: 100%; }
.dl { display: block; min-height: 1.6em; margin: 0 -14px; padding: 0 14px; }
.dl-add { background: var(--dl-add); color: var(--dl-add-ink); }
.dl-del { background: var(--dl-del); color: var(--dl-del-ink); }
.dl-hunk { color: var(--tk-f); } .dl-meta { color: var(--muted); font-weight: 600; }
/* A long block, folded: its first lines fade out above "Show all N lines". */
.code.folded pre { max-height: 22.4em; overflow-y: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.code-f { display: block; width: 100%; min-height: 36px; border: 0; border-top: 1px solid var(--line); background: var(--surface-2); color: var(--accent-text); font-size: 13px; font-weight: 500; cursor: pointer; }
@media (hover: hover) { .code-f:hover { background: var(--surface-3); } }
/* Copy table: above the table's right edge; on a mouse, when it's pointed at. */
.msg .tbl { position: relative; margin: 0 0 14px; }
.msg .tbl .table { margin: 0; }
.tbl-copy { display: flex; align-items: center; gap: 6px; margin: -4px 0 2px auto; min-height: 28px; padding: 0 8px; border: 0; border-radius: var(--r-s); background: transparent; color: var(--ink-3); font-size: 12px; cursor: pointer; }
@media (hover: hover) { .tbl-copy { opacity: 0; transition: opacity .12s; } .tbl:hover .tbl-copy, .tbl-copy:focus-visible { opacity: 1; } .tbl-copy:hover { background: var(--surface-2); color: var(--ink); } }
/* An image from elsewhere: a link to it. */
.msg a.img-link { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); color: var(--accent-text); text-decoration: none; font-size: .92em; vertical-align: 1px; }
/* Footnotes: the number cited, the notes after a thin line at the end. */
.msg sup.fn { line-height: 0; }
.msg sup.fn button { min-width: 1.5em; padding: 0 3px; border: 0; border-radius: 4px; background: var(--accent-soft); color: var(--accent-text); font: 600 .78em var(--font); cursor: pointer; }
.msg ol.notes { margin: 18px 0 0; padding: 12px 0 0 1.5em; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }
.msg ol.notes li { border-radius: 4px; transition: background .3s; }
.msg ol.notes li.lit { background: var(--accent-soft); }
/* Who is answering: named on the first reply and where the model changes. */
.who { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.who .by { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.switch-line { display: flex; align-items: center; gap: 12px; color: var(--ink-3); font-size: 12px; margin: -6px auto; text-align: center; }
.switch-line::before, .switch-line::after { content: ""; flex: 1; min-width: 24px; height: 1px; background: var(--line); }
/* Thinking: the logo's core with a turning orbit, a shimmer and three dots. */
.orb { position: relative; width: 22px; height: 22px; flex: none; }
.orb::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #E4DEFF, #8C7BFF 45%, #5B48F0); box-shadow: 0 0 12px rgba(140,123,255,.65); animation: orb-pulse 1.6s ease-in-out infinite; }
.orb::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid transparent; border-top-color: #8C7BFF; border-right-color: var(--cyan); animation: orb-turn 1.1s linear infinite; }
.who .orb { width: 18px; height: 18px; }
.who .orb::before { inset: 5px; box-shadow: 0 0 8px rgba(140,123,255,.55); animation: none; }
.who .orb::after { border-width: 1.5px; transform: rotate(-30deg); animation: none; }
.thinking { display: flex; align-items: center; gap: 10px; min-height: 28px; color: var(--ink-3); font-size: 15px; }
.think-text { background: linear-gradient(90deg, var(--muted) 0%, var(--muted) 35%, var(--accent-text) 50%, var(--muted) 65%, var(--muted) 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 2.2s linear infinite; }
.dots { display: inline-flex; gap: 3px; margin-left: -6px; }
.dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--accent-text); opacity: .3; animation: dot 1.2s ease-in-out infinite; }
.dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }
.waited { font-size: 13px; font-variant-numeric: tabular-nums; }
.thinking-box .slow { margin: 6px 0 0; color: var(--ink-3); font-size: 14px; }
/* A model's reasoning above its answer: a quiet line that opens to it. */
.thoughts { margin: 0 0 12px; }
.th-head { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 8px 0 4px; margin-left: -4px; border: 0; border-radius: var(--r-s); background: transparent; color: var(--muted); font-size: 14px; cursor: pointer; }
.th-head:disabled { cursor: default; }
.th-head .ic { transition: transform .15s; transform: rotate(-90deg); }
.thoughts.open .th-head .ic, .thoughts.live .th-head .ic { transform: none; }
@media (hover: hover) { .th-head:not(:disabled):hover { background: var(--surface-2); color: var(--ink-2); } }
.thoughts.live .th-label { background: linear-gradient(90deg, var(--muted) 0%, var(--muted) 35%, var(--accent-text) 50%, var(--muted) 65%, var(--muted) 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 2.2s linear infinite; }
.th-tail, .th-all { margin: 4px 0 0 4px; padding: 2px 0 2px 14px; border-left: 2px solid var(--line); color: var(--muted); font-size: 14px; line-height: 1.7; }
.th-tail { max-height: 5.1em; overflow: hidden; white-space: pre-wrap; display: flex; flex-direction: column; justify-content: flex-end; -webkit-mask-image: linear-gradient(transparent, #000 45%); mask-image: linear-gradient(transparent, #000 45%); }
.th-all p, .th-all li { color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .thoughts.live .th-label { animation: none; color: var(--muted); background: none; } }
.caret { display: inline-block; width: 8px; height: 1.05em; margin-left: 2px; vertical-align: -2px; border-radius: 2px; background: var(--accent); animation: blink 1s steps(2, start) infinite; }
@keyframes orb-turn { to { transform: rotate(360deg); } }
@keyframes orb-pulse { 50% { transform: scale(.82); opacity: .8; } }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -150% 0; } }
@keyframes dot { 40% { opacity: 1; transform: translateY(-3px); } }
@keyframes blink { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .orb::before, .orb::after, .think-text, .dots i, .caret { animation: none; } .think-text { color: var(--muted); background: none; } }

/* Under a reply: Copy (and on the last, Answer again), then who answered.
   The last reply's row always shows; others show on hover or focus, or
   after a tap on a touch screen. */
.acts { display: flex; align-items: center; gap: 2px; min-height: 32px; margin-top: -16px; margin-left: max(-6px, calc((100% - var(--col)) / 2 - 6px)); }
.msg .acts { margin: 6px 0 0 -6px; }
.acts .ibtn { width: 32px; height: 32px; border-radius: var(--r-s); }
.acts .by { margin-left: 8px; font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.acts .ibtn.done { color: var(--ok-ink); }
.msg.assistant > .acts { visibility: hidden; }
.msg.assistant:hover > .acts, .msg.assistant:focus-within > .acts, .msg.assistant.tapped > .acts { visibility: visible; }
/* A message's time: shown on hover or after a tap, under a question and at
   the end of a reply's row (the last reply's row sits after it in the log).
   The row wraps it to a line of its own when it doesn't fit. */
.acts { flex-wrap: wrap; }
.acts .by { max-width: 100%; }
.when { display: none; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; margin-left: 8px; }
.msg.user { margin-bottom: 10px; }
.msg.user > .uacts { position: absolute; top: calc(100% + 2px); right: -4px; margin: 0; min-height: 32px; width: max-content; flex-wrap: nowrap; visibility: hidden; }
.msg.user > .uacts .ibtn { width: 32px; height: 32px; }
.msg.user > .uacts .when { margin: 0 4px 0 0; }
.msg.user:hover > .uacts, .msg.user:focus-within > .uacts, .msg.user.tapped > .uacts { visibility: visible; }
.msg.user.editing { width: calc(var(--col) * .82); padding: 12px 14px; }
.msg.editing textarea { display: block; width: 100%; border: 0; padding: 0; background: transparent; color: var(--ink); font: inherit; line-height: 1.6; resize: none; outline: none; }
.msg.editing textarea:focus-visible { outline: none; box-shadow: none; }
.edit-hint { margin: 8px 0 0; font-size: 12px; color: var(--ink-3); }
.edit-btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.edit-btns button { min-height: 32px; padding: 0 14px; border-radius: var(--r-s); border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font-size: 14px; font-weight: 500; cursor: pointer; }
.edit-btns .edit-send { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.edit-btns .edit-send:disabled { opacity: .5; cursor: default; }
@media (pointer: coarse) { .edit-btns button { min-height: 40px; } }
.msg:hover .when, .msg:focus-within .when, .msg.tapped .when, .acts:hover .when, .acts:focus-within .when,
.msg.last:hover ~ .acts .when, .msg.last.tapped ~ .acts .when { display: inline; }
.retry { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: var(--r-s); border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font-size: 14px; font-weight: 500; cursor: pointer; }
.retry:disabled { opacity: .5; cursor: default; }
@media (hover: hover) { .retry:hover:not(:disabled) { background: var(--surface-2); } }
@media (pointer: coarse) { .acts .ibtn { width: 44px; height: 44px; } .retry { min-height: 44px; } }
/* Notes on a reply: stopped or cut is a quiet line; a broken one is red. */
.msg .note { display: flex; align-items: flex-start; gap: 8px; width: fit-content; max-width: 100%; margin: 10px 0 0; padding: 8px 12px; border-radius: var(--r); font-size: 14px; line-height: 1.5; color: var(--ink); background: var(--bad-soft); border: 1px solid var(--bad-line); white-space: normal; }
.msg .note::before, p.note.err::before { content: ""; position: static; flex: none; width: 16px; height: 16px; margin-top: 2px; background: var(--bad); -webkit-mask: var(--i-bad) center / contain no-repeat; mask: var(--i-bad) center / contain no-repeat; }
.msg .note.quiet { background: none; border: 0; padding: 0; color: var(--ink-3); font-size: 13px; }
.msg .note.quiet::before { display: none; }
p.note.err { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r); background: var(--bad-soft); border: 1px solid var(--bad-line); color: var(--ink); font-size: 14px; text-align: left; margin: 0 auto; }
:root { --i-bad: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5'/%3E%3Ccircle cx='12' cy='16.5' r='.6' fill='black'/%3E%3C/svg%3E"); }
.warn-note { position: relative; background: var(--warn-soft); color: var(--ink); border: 1px solid var(--warn-line); border-radius: var(--r); padding: 8px 12px 8px 36px; font-size: 14px; margin: 0 auto; }
.warn-note::before { position: absolute; left: 12px; top: 11px; margin-top: 0; }
/* An answer replaced by "answer again", folded to one quiet line. */
.earlier { margin-top: -10px; margin-bottom: -10px; }
.earlier-toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 8px; margin-left: -8px; border: 0; border-radius: var(--r-s); background: transparent; color: var(--ink-3); font-size: 13px; cursor: pointer; text-align: left; }
.earlier-toggle .ic { transform: rotate(-90deg); transition: transform .15s; }
.earlier-toggle[aria-expanded="true"] .ic { transform: none; }
@media (hover: hover) { .earlier-toggle:hover { background: var(--surface-2); color: var(--ink-2); } }
.earlier .msg { opacity: .85; margin-top: 8px; }

/* A new chat: the mark and one line; on a wide screen the composer sits
   right under them, in the middle of the page. */
.hero { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; padding-bottom: 6vh; }
.hero img { width: 48px; height: 48px; filter: drop-shadow(0 10px 24px rgba(114,77,231,.30)); }
.hero h1 { font-size: 24px; line-height: 1.3; }
.hero .hello { margin: -6px 0 0; color: var(--ink-3); font-size: 14px; }

/* the composer */
.dock { padding: 0 12px max(12px, env(safe-area-inset-bottom)); }
.dock-in { max-width: var(--col); margin: 0 auto; display: flex; flex-direction: column; gap: 10px; position: relative; }
.jump-wrap { position: relative; height: 0; }
.jump { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); z-index: 2; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2); border-radius: 999px; padding: 4px 12px; font-size: 13px; box-shadow: var(--shadow-2); cursor: pointer; white-space: nowrap; }
.banner { position: relative; background: var(--warn-soft); color: var(--ink); border: 1px solid var(--warn-line); border-radius: var(--r); padding: 9px 12px 9px 36px; font-size: 14px; line-height: 1.5; display: flex; gap: 10px; align-items: flex-start; }
.banner::before { position: absolute; left: 12px; top: 12px; }
.banner > span { flex: 1; min-width: 0; }
.banner .link { flex: none; white-space: nowrap; padding: 0; font-size: 14px; font-weight: 600; }
.composer { background: var(--surface); border: 1px solid var(--line-2); border-radius: 18px; box-shadow: var(--shadow-1); padding: 10px 8px 6px 14px; display: flex; flex-direction: column; gap: 4px; transition: border-color .15s, box-shadow .15s; }
.composer:focus-within { border-color: var(--accent); box-shadow: var(--focus); }
.composer textarea { width: 100%; resize: none; border: 0; outline: 0; background: transparent; padding: 4px 6px 4px 0; font-size: 16px; line-height: 1.6; color: var(--ink); max-height: 40vh; box-shadow: none !important; }
.composer textarea::placeholder { color: var(--ink-3); }
.comp-row { display: flex; align-items: center; gap: 2px; margin-left: -8px; }
.comp-row .sp { flex: 1; }
.comp-row .attach { width: 40px; height: 40px; }
.pending { display: flex; gap: 10px; padding: 4px 0 6px; overflow-x: auto; }
.pending figure { position: relative; margin: 6px 0 0; flex: none; }
.pending img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--r); border: 1px solid var(--line); display: block; }
.pending button { position: absolute; top: -6px; right: -6px; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--surface); background: var(--ink); color: var(--bg); font-size: 14px; line-height: 20px; cursor: pointer; padding: 0; }
@media (pointer: coarse) { .pending button { width: 32px; height: 32px; top: -10px; right: -10px; line-height: 28px; } }
/* Voice input: the mic turns into a moving sound wave while it listens. */
.i-mic { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='3' width='6' height='11' rx='3'/%3E%3Cpath d='M5 11a7 7 0 0 0 14 0M12 18v3'/%3E%3C/svg%3E"); }
/* The pages before pairing (welcome, pairing). */
:root { --i-camera: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h3l2-3h6l2 3h3a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z'/%3E%3Ccircle cx='12' cy='13.5' r='3.5'/%3E%3C/svg%3E"); } .i-camera { --i: var(--i-camera); }
:root { --i-paste: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3.5h6v3H9z'/%3E%3Cpath d='M15 5h2a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h2'/%3E%3C/svg%3E"); } .i-paste { --i: var(--i-paste); }
:root { --i-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a4 4 0 0 0 5.66 0l3-3a4 4 0 0 0-5.66-5.66l-1 1'/%3E%3Cpath d='M14 10a4 4 0 0 0-5.66 0l-3 3a4 4 0 0 0 5.66 5.66l1-1'/%3E%3C/svg%3E"); } .i-link { --i: var(--i-link); }
:root { --i-back: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E"); } .i-back { --i: var(--i-back); }
:root { --i-share: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12M8 7l4-4 4 4'/%3E%3Cpath d='M6 11H5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-1'/%3E%3C/svg%3E"); } .i-share { --i: var(--i-share); }
:root { --i-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); } .i-plus { --i: var(--i-plus); }
:root { --i-addsq: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='4'/%3E%3Cpath d='M12 8v8M8 12h8'/%3E%3C/svg%3E"); } .i-addsq { --i: var(--i-addsq); }
:root { --i-scan: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8V5a1 1 0 0 1 1-1h3M16 4h3a1 1 0 0 1 1 1v3M20 16v3a1 1 0 0 1-1 1h-3M8 20H5a1 1 0 0 1-1-1v-3'/%3E%3Cpath d='M9 9h2v2H9zM13 13h2v2h-2zM13 9h2M9 15h2'/%3E%3C/svg%3E"); } .i-scan { --i: var(--i-scan); }
:root { --i-compass: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M15.5 8.5l-2 5-5 2 2-5z'/%3E%3C/svg%3E"); } .i-compass { --i: var(--i-compass); }
:root { --i-out: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9'/%3E%3Cpath d='M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E"); } .i-out { --i: var(--i-out); }
:root { --i-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); } .i-arrow { --i: var(--i-arrow); }
:root { --i-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E"); } .i-lock { --i: var(--i-lock); }
:root { --i-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='2.5' width='10' height='19' rx='2.5'/%3E%3Cpath d='M11 18.5h2'/%3E%3C/svg%3E"); } .i-phone { --i: var(--i-phone); }
:root { --i-tablet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3' width='14' height='18' rx='2'/%3E%3Cpath d='M11 18h2'/%3E%3C/svg%3E"); } .i-tablet { --i: var(--i-tablet); }
:root { --i-laptop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='11' rx='1.5'/%3E%3Cpath d='M2 19h20'/%3E%3C/svg%3E"); } .i-laptop { --i: var(--i-laptop); }
:root { --i-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 4.5-3 8.5-7 10-4-1.5-7-5.5-7-10V6z'/%3E%3C/svg%3E"); } .i-shield { --i: var(--i-shield); }
:root { --i-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); } .i-tick { --i: var(--i-tick); }
:root { --i-cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); } .i-cross { --i: var(--i-cross); }
:root { --i-monitor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='12' rx='2'/%3E%3Cpath d='M9 20h6M12 16v4'/%3E%3C/svg%3E"); } .i-monitor { --i: var(--i-monitor); }
.ic.s18 { width: 18px; height: 18px; } .ic.s28 { width: 28px; height: 28px; } .ic.s30 { width: 30px; height: 30px; }
.comp-row .mic { width: 40px; height: 40px; margin-right: 4px; border-radius: 50%; }
.mic .wave { display: none; align-items: center; gap: 3px; height: 18px; }
.mic .wave i { width: 3px; height: 100%; border-radius: 2px; background: currentColor; transform: scaleY(.3); animation: wave 1s ease-in-out infinite; }
.mic .wave i:nth-child(2) { animation-delay: -.8s; } .mic .wave i:nth-child(3) { animation-delay: -.6s; }
.mic .wave i:nth-child(4) { animation-delay: -.4s; } .mic .wave i:nth-child(5) { animation-delay: -.2s; }
@keyframes wave { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
.mic.on, .mic.on:hover { background: var(--accent-soft) !important; color: var(--accent-text) !important; }
.mic.on .ic { display: none; }
.mic.on .wave { display: inline-flex; }
.mic.on::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 var(--accent-soft); animation: ring 1.6s ease-out infinite; }
@keyframes ring { 0% { box-shadow: 0 0 0 0 var(--accent-soft); } 100% { box-shadow: 0 0 0 10px transparent; } }
.composer.listening { border-color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .mic .wave i { animation: none; transform: scaleY(.7); } .mic.on::after { animation: none; } }
@media (pointer: coarse) { .comp-row .mic { width: 44px; height: 44px; } }
.send { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--accent); color: var(--accent-ink); cursor: pointer; flex: none; display: inline-grid; place-items: center; padding: 0; }
.send::before { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E") center / contain no-repeat; }
.send.idle { background: var(--surface-3); color: var(--ink-3); cursor: default; }
.send.stop { background: var(--accent); color: var(--accent-ink); cursor: pointer; }
.send.stop::before { width: 12px; height: 12px; border-radius: 2px; -webkit-mask: none; mask: none; }
.send:disabled { cursor: default; }
@media (pointer: coarse) { .send { width: 40px; height: 40px; } .comp-row .attach { width: 44px; height: 44px; } }

/* The model picker: a button in the composer and a list above it. */
.mwrap { position: relative; min-width: 0; }
.mpick { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; max-width: 100%; padding: 0 8px 0 10px; border: 0; border-radius: var(--r-s); background: transparent; color: var(--ink-2); font-size: 14px; font-weight: 500; cursor: pointer; }
.mpick .nmx { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mpick .ic { color: var(--ink-3); transition: transform .15s; }
.mpick[aria-expanded="true"] { background: var(--surface-2); color: var(--ink); }
.mpick[aria-expanded="true"] .pick-chev { transform: rotate(180deg); }
.mpick:disabled { opacity: .6; cursor: default; }
@media (hover: hover) { .mpick:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); } }
@media (pointer: coarse) { .mpick { min-height: 44px; } }
@media (max-width: 400px) { .mpick .nmx { max-width: 150px; } }
.live-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--muted); opacity: .55; }
.live-dot.on { background: var(--ok); opacity: 1; box-shadow: 0 0 0 3px var(--ok-soft); }
.live-dot.prob { background: var(--warn-hi); opacity: 1; box-shadow: 0 0 0 3px var(--warn-soft); }
.live-dot.paused { background: var(--warn-hi); opacity: 1; box-shadow: 0 0 0 3px var(--warn-soft); }
.live-dot.wait { animation: dot-wait 1.2s ease-in-out infinite; }
@keyframes dot-wait { 50% { opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .live-dot.wait { animation: none; } }
.pop { position: absolute; z-index: 20; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius); box-shadow: var(--shadow-pop); padding: 6px; }
.pop hr { border: 0; border-top: 1px solid var(--line); margin: 6px 4px; }
.mmenu { left: 0; bottom: calc(100% + 8px); width: 320px; max-height: min(60vh, 480px); overflow-y: auto; outline: 0; }
.mmenu .mh { font-size: 12px; font-weight: 500; color: var(--ink-3); padding: 10px 10px 4px; }
.mmenu .mi, .pop-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 0 10px; border: 0; border-radius: var(--r-s); background: transparent; color: var(--ink); font-size: 14px; text-align: left; cursor: pointer; }
.mmenu .mi .nm, .pop-item .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mmenu .mi[aria-selected="true"] { font-weight: 500; }
.mmenu .mi.has-prob { min-height: 52px; }
.mmenu .mi .nm .nmx { display: block; overflow: hidden; text-overflow: ellipsis; }
.mmenu .mi .mprob { display: block; font-size: 12px; font-weight: 400; color: var(--warn); margin-top: 1px; }
.mmenu .mi .ic { color: var(--accent-text); }
.mmenu .mi.act, .pop-item:focus-visible { background: var(--surface-2); }
@media (hover: hover) { .mmenu .mi:hover, .pop-item:hover { background: var(--surface-2); } }
.mmenu .none { padding: 10px; color: var(--ink-3); font-size: 14px; }
@media (pointer: coarse) { .mmenu .mi, .pop-item { min-height: 44px; } }
/* A phone: the list rises from the bottom. */
@media (max-width: 767px) { .mmenu { position: fixed; left: 8px; right: 8px; bottom: max(8px, env(safe-area-inset-bottom)); width: auto; max-height: 70vh; } }

/* the chat list (drawer on phones, sidebar on wide screens) */
.drawer { position: fixed; inset: 0; background: var(--scrim); z-index: 10; }
.drawer-panel { position: absolute; top: 0; bottom: 0; left: 0; width: min(304px, 86vw); background: var(--rail); border-right: 1px solid var(--line); padding: max(14px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 12px; }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 2px 0 2px 4px; }
.brand-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.brand-name { font-size: 17px; font-weight: 500; line-height: 20px; letter-spacing: -.01em; color: var(--ink); }
.brand-sub { font-size: 11px; line-height: 14px; letter-spacing: .03em; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-mark { width: 32px; height: 32px; flex: none; display: block; }
.boot-mark { width: 56px; height: 56px; filter: drop-shadow(0 10px 24px rgba(114,77,231,.35)); }
.brand .ibtn { width: 36px; height: 36px; }
.side-hide { display: none !important; }
.newchat { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); color: var(--ink); font-weight: 500; font-size: 15px; cursor: pointer; }
.newchat .ic { color: var(--accent-text); }
.newchat:active { background: var(--surface-2); }
@media (hover: hover) { .newchat:hover { background: var(--surface-2); } }
.search { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 10px; border-radius: var(--r-s); background: var(--surface-2); color: var(--ink-3); }
.search:focus-within { box-shadow: var(--focus); }
.search input { flex: 1; min-width: 0; border: 0; background: transparent; outline: 0; box-shadow: none; /* the ring is on .search */ font: 16px var(--font); color: var(--ink); -webkit-appearance: none; appearance: none; padding: 6px 0; }
.search input::placeholder { color: var(--ink-3); }
#chat-list { list-style: none; margin: 0 -4px; padding: 0 4px; overflow-y: auto; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 1px; }
#chat-list .grp { font-size: 12px; font-weight: 500; color: var(--ink-3); padding: 12px 8px 4px; letter-spacing: .02em; }
#chat-list .grp:first-child { padding-top: 2px; }
#chat-list li.row { display: flex; align-items: center; gap: 2px; border-radius: var(--r-s); }
#chat-list .row > button:first-child { flex: 1; min-width: 0; min-height: 40px; text-align: left; border: 0; background: none; padding: 0 8px 0 10px; border-radius: var(--r-s); cursor: pointer; color: var(--ink-2); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#chat-list .row.cur { background: var(--accent-soft); }
#chat-list .row.cur > button:first-child { color: var(--ink); font-weight: 500; }
#chat-list .chat-del { width: 32px; height: 32px; margin-right: 2px; border-radius: var(--r-s); }
#chat-list .no-match { padding: 8px; }
@media (hover: hover) { #chat-list .row:not(.cur):hover { background: var(--surface-2); } #chat-list .row:hover > button:first-child { color: var(--ink); } }
@media (pointer: coarse) { #chat-list .row > button:first-child { min-height: 44px; } #chat-list .chat-del { width: 44px; height: 44px; } }
.drawer-foot { position: relative; border-top: 1px solid var(--line); padding-top: 8px; }
.mac { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 0 8px 0 10px; border: 0; border-radius: var(--r); background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.mac .ic { color: var(--ink-3); }
.mac[aria-expanded="true"] { background: var(--surface-2); }
@media (hover: hover) { .mac:hover { background: var(--surface-2); } }
.mac-t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.mac-t b { font-weight: 500; font-size: 14px; }
.mac-t small { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mac-menu { left: 0; right: 0; bottom: calc(100% + 6px); max-height: 70vh; overflow-y: auto; }
.pop-head { display: flex; align-items: center; gap: 10px; padding: 8px 10px; }
.pop-head .ic { color: var(--ink-3); }
.pop-head-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.pop-head-t b { font-weight: 600; font-size: 14px; }
.pop-head-t small { font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pop-item > .ic { color: var(--ink-3); }
.pop-item small { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.pop-item.danger, .pop-item.danger > .ic { color: var(--danger); }
.pop-item[aria-expanded="true"] .lang-chev { transform: rotate(180deg); }
.lang-list { padding-left: 26px; }
.lang-list .tick { color: var(--accent-text); visibility: hidden; }
.lang-list [aria-checked="true"] .tick { visibility: visible; }
.lang-list [aria-checked="true"] { font-weight: 500; }
/* Switching light and dark by hand fades across (theme.js adds .theming). */
:root.theming, :root.theming * { transition: background-color .3s ease, color .3s ease, border-color .3s ease !important; }
/* The top-right corner: appearance and language. */
.tools { display: flex; align-items: center; gap: 2px; position: relative; flex: none; }
.tools .ibtn { width: 40px; height: 40px; color: var(--ink-2); }
.tools-lang { min-width: 40px; height: 40px; padding: 0 8px; border: 0; border-radius: 10px; background: transparent; color: var(--ink-2); font: 600 14px/1 var(--font); cursor: pointer; }
.tools-lang:active { background: var(--surface-2); color: var(--ink); }
@media (hover: hover) { .tools-lang:hover { background: var(--surface-2); color: var(--ink); } }
.tools-pop { top: calc(100% + 6px); right: 0; min-width: 220px; }
.tools-pop .tick { color: var(--accent-text); visibility: hidden; margin-left: auto; }
.tools-pop [aria-checked="true"] .tick { visibility: visible; }
.tools-pop [aria-checked="true"] { font-weight: 500; }
.wide-tools { display: none; }
.wl-right { display: flex; align-items: center; gap: 8px; }
.theme-sub { display: block; font-size: 12px; font-weight: 400; color: var(--ink-3); }
.pop-note { margin: 6px 10px 8px; font-size: 12px; line-height: 1.5; color: var(--ink-3); }
.keys-item { display: none; }
@media (pointer: fine) { .keys-item { display: flex; } }

/* keyboard shortcuts */
.keys { width: min(420px, calc(100vw - 32px)); }
.keys h2 { font-size: 17px; margin: 0 0 12px; }
.keys table { width: 100%; border-collapse: collapse; font-size: 14px; margin-bottom: 18px; }
.keys td { padding: 7px 0; border-bottom: 1px solid var(--line); }
.keys td:last-child { text-align: right; white-space: nowrap; }
.keys kbd { font: 500 12px var(--mono); border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 5px; padding: 1px 6px; background: var(--surface-2); margin-left: 4px; }

/* Dropping pictures onto the page. */
.drop { position: absolute; inset: 12px; z-index: 15; border: 2px dashed var(--accent); border-radius: 18px; background: color-mix(in srgb, var(--accent) 8%, var(--bg)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--accent-text); font-weight: 600; font-size: 18px; pointer-events: none; }

.toast { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 30; max-width: min(90vw, 420px); background: var(--ink); color: var(--bg); border-radius: var(--r); padding: 8px 14px; font-size: 14px; text-align: center; box-shadow: var(--shadow-2); }
/* Another tab took over: this one rests under a full-screen notice. */
:root { --cyan: #0B8FAE; }
:root[data-theme="dark"] { --cyan: #22D3EE; }

/* Tablets: the column, wider gutters. */
@media (min-width: 768px) {
  .log { padding: 32px 32px 20px; gap: 28px; }
  .dock { padding: 0 32px 20px; }
  .composer { padding: 12px 10px 8px 18px; box-shadow: var(--shadow-2); }
  /* A new chat: the composer right under the greeting, mid-page. */
  .chat.fresh .main { justify-content: center; }
  .chat.fresh .log { flex: 0 0 auto; overflow: visible; padding-bottom: 28px; }
  .chat.fresh .hero { padding-bottom: 0; }
  .chat.fresh .dock { padding-bottom: 14vh; }
  .hero h1 { font-size: 30px; }
}
/* Wide screens: the list is a sidebar that stays; no bar. */
@media (min-width: 1024px) {
  #drawer, #drawer[hidden] { display: flex !important; position: static; inset: auto; background: none; z-index: auto; width: 272px; flex: none; }
  .chat.side-off #drawer { display: none !important; }
  .drawer-panel { position: static; width: 100%; padding: 14px 12px 12px; }
  .side-hide { display: inline-grid !important; }
  .drawer-x { display: none !important; }
  .bar { display: none; }
  .chat-head:not([hidden]) { display: flex; align-items: center; flex: none; position: relative; z-index: 2; height: 56px; padding: 0 12px; background: var(--bg); border-bottom: 1px solid transparent; transition: border-color .15s; }
  .chat-head.lifted { border-bottom-color: var(--line); }
  .chat.side-off .chat-head { padding-left: 100px; }
  .chat.side-off .chat-head .row-menu { left: 100px; }
  .chat-head:not([hidden]) + .log { padding-top: 12px; }
  .wide-tools { display: flex; position: absolute; top: 8px; right: 12px; z-index: 4; }
  .chat-head:not([hidden]) { padding-right: 110px; }
  .chat.side-off .side-btns { display: flex; gap: 4px; position: absolute; left: 12px; top: 12px; z-index: 3; }
  #chat-list .row .chat-del { visibility: hidden; }
  #chat-list .row:hover .chat-del, #chat-list .row:focus-within .chat-del, #chat-list .row.cur .chat-del { visibility: visible; }
}

/* Disclosure: a chevron instead of the browser's triangle. */
summary { list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: translateY(-2px) rotate(-45deg); transition: transform .15s; }
details[open] > summary::before { transform: translateY(-3px) rotate(45deg); }
/* In-page dialog: a card over a dimmed page; Cancel left, the action right
   (red when it deletes). */
.ask { width: min(340px, calc(100vw - 32px)); margin: auto; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-2); }
.ask::backdrop { background: rgba(8,9,18,.45); }
[data-theme="dark"] .ask::backdrop { background: rgba(0,0,0,.6); }
.ask p { margin: 0 0 18px; text-wrap: pretty; }
.ask-btns { display: flex; gap: 10px; }
.ask-btns button { flex: 1; min-width: 0; max-width: none; }
.ask-btns .primary.bad { background: var(--danger); border-color: var(--danger); color: var(--surface); }
.ask-btns .primary.bad:active { background: var(--danger); opacity: .85; }

/* ---------- the screens before pairing: welcome, loading, pairing ----------
   One backdrop for all three: a faint dot grid fading down and one aurora
   band across the top (cyan → purple → magenta, NEXA's spectrum). The chat
   keeps its plain background. */
:root { --cyan: #0092B0; --magenta: #C348A7; --aur-a: rgba(0,146,176,.13); --aur-b: rgba(114,77,231,.16); --aur-c: rgba(195,72,167,.10); --dot: rgba(19,21,36,.07); }
:root[data-theme="dark"] { --cyan: #00CFE8; --magenta: #FB7BDA; --aur-a: rgba(0,207,232,.12); --aur-b: rgba(155,138,255,.18); --aur-c: rgba(251,123,218,.09); --dot: rgba(237,238,245,.06); }
body { background:
  radial-gradient(38% 260px at 18% 0%, var(--aur-a), transparent 75%),
  radial-gradient(40% 300px at 52% 0%, var(--aur-b), transparent 75%),
  radial-gradient(36% 260px at 85% 0%, var(--aur-c), transparent 75%),
  var(--bg); background-attachment: fixed; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(var(--dot) 1px, transparent 1.2px); background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 65%); mask-image: linear-gradient(180deg, #000, transparent 65%); }
#app { position: relative; z-index: 1; }
.chat { background: var(--bg); }

.welcome { overflow-y: auto; display: flex; }
.wl { width: 100%; max-width: 1240px; margin: 0 auto; display: flex; flex-direction: column; min-height: 100%;
  padding: max(10px, env(safe-area-inset-top)) 20px max(18px, env(safe-area-inset-bottom)); }
.wl-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; }
.wl-brand { display: flex; align-items: center; gap: 10px; font-weight: 650; font-size: 17px; letter-spacing: -.01em; }
.wl-brand img { display: block; border-radius: 7px; }
/* The language switch: both names always in their own language. */
.seg { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--surface) 70%, transparent); }
.seg button { border: 0; background: none; border-radius: 999px; min-width: 48px; height: 34px; padding: 0 12px; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1), 0 0 0 1px var(--line); }
[data-theme="dark"] .seg button[aria-pressed="true"] { background: var(--surface-3); }
.welcome-note { margin: 4px 0 0; }

.wl-main { flex: 1; display: flex; flex-direction: column; padding: 22px 0 6px; }
.wl-copy { width: 100%; max-width: 440px; margin: 0 auto; display: flex; flex-direction: column; flex: 1; }
.wv { display: flex; flex-direction: column; flex: 1; align-items: flex-start; }
.wl-title { font-size: 30px; line-height: 1.15; letter-spacing: -.028em; font-weight: 680; margin: 0; text-wrap: balance; }
.wl-sub { color: var(--muted); font-size: 15.5px; line-height: 1.55; margin: 10px 0 0; text-wrap: pretty; }
.wl-wide { width: 100%; max-width: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.wv .err:empty { min-height: 0; }
.wv .err { margin-top: 10px; font-size: 15px; }
.link.quiet { color: var(--muted); font-weight: 500; }
.wv .link, .wl-foot .link { min-height: 44px; }
.wv-end { margin-top: auto; padding-top: 16px; align-self: center; }
.wv-acts { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px; }
/* A gate's two ways on: use it here (first), or take it elsewhere. */
.gate-acts { margin-top: 26px; gap: 10px; }
.gate-how { margin: 14px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.home-open { margin-top: 14px; align-self: center; font-size: 14px; }

/* Phones and tablets: the viewfinder is the one button. */
.vf { position: relative; display: block; width: 100%; max-width: 46vh; aspect-ratio: 1 / 1; align-self: center; margin-top: 24px; padding: 0; border: 0; border-radius: 28px; cursor: pointer; overflow: hidden; color: #EDEEF5;
  background: radial-gradient(120% 90% at 50% 0%, #1E1A3F 0%, #0C0D18 60%, #08090F 100%); box-shadow: var(--shadow-2), 0 0 0 1px rgba(155,138,255,.18); }
.vf:focus-visible { box-shadow: var(--focus); }
.vf-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(186,179,253,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(186,179,253,.06) 1px, transparent 1px); background-size: 28px 28px; }
.vf-c { position: absolute; width: 44px; height: 44px; border: 3px solid #BAB3FD; }
.vf-c1 { left: 24px; top: 24px; border-right: 0; border-bottom: 0; border-radius: 14px 0 0 0; }
.vf-c2 { right: 24px; top: 24px; border-left: 0; border-bottom: 0; border-radius: 0 14px 0 0; }
.vf-c3 { left: 24px; bottom: 24px; border-right: 0; border-top: 0; border-radius: 0 0 0 14px; }
.vf-c4 { right: 24px; bottom: 24px; border-left: 0; border-top: 0; border-radius: 0 0 14px 0; }
.vf-sweep { position: absolute; left: 30px; right: 30px; height: 2px; top: 30%; background: linear-gradient(90deg, transparent, #00CFE8, #9B8AFF, #FB7BDA, transparent); box-shadow: 0 0 18px #9B8AFF; animation: vf-sweep 2.4s ease-in-out infinite alternate; }
@keyframes vf-sweep { from { top: 18%; } to { top: 80%; } }
.vf-mid { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; font-weight: 600; font-size: 16.5px; }
.vf-cam { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: #9B8AFF; color: #0B0820; box-shadow: 0 0 0 8px rgba(155,138,255,.18), 0 0 40px rgba(155,138,255,.55); }
#paste-open { margin-top: 14px; }

/* The paste bar: computers first, phones after "Paste a link". */
.pastebar { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 14px; padding: 6px 6px 6px 16px; min-height: 60px; background: var(--surface); border: 1px solid var(--line-2); border-radius: 16px; box-shadow: var(--shadow-2); }
.pastebar:focus-within { border-color: var(--accent); box-shadow: var(--focus), var(--shadow-2); }
.pastebar input { flex: 1; min-width: 0; border: 0; background: none; outline: 0; font-size: 16px; color: var(--ink); padding: 10px 0; }
.pastebar input::placeholder { color: var(--muted); }
.pastebar input:focus-visible { box-shadow: none; }
.pastebar .primary { width: auto; max-width: none; min-height: 48px; padding: 0 22px; border-radius: 11px; }
.pb-ic { color: var(--muted); }
.kbd { font: 600 12px var(--mono); color: var(--muted); border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 6px; padding: 2px 6px; background: var(--surface-2); white-space: nowrap; }

/* Set up OmniLLM first */
.back { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); margin: -6px 0 10px; }
.cmd { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 22px; padding: 8px 8px 8px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.wl-cmd { flex: 1; min-width: 0; display: block; font: 13px/1.6 var(--mono); color: var(--ink); white-space: nowrap; overflow-x: auto; scrollbar-width: none; user-select: all; -webkit-user-select: all;
  -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
.wl-cmd::-webkit-scrollbar { display: none; }
.cmd-copy { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font-weight: 600; font-size: 14px; cursor: pointer; }
#get-share { margin-top: 14px; }
.wl-guide { display: inline-flex; align-items: center; text-decoration: none; margin-top: 6px; }

/* Home Screen first / open in your browser / can't keep the pairing */
.appicon { position: relative; width: 76px; height: 76px; border-radius: 20px; display: grid; place-items: center; margin-bottom: 24px;
  background: linear-gradient(150deg, #241B52, #0B0820); box-shadow: 0 10px 30px -8px rgba(114,77,231,.6), 0 0 0 1px rgba(155,138,255,.25); }
.appicon img { display: block; border-radius: 12px; }
.appicon-plus { position: absolute; right: -8px; bottom: -8px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); border: 3px solid var(--bg); }
.tile { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; margin-bottom: 24px; background: var(--accent-soft); color: var(--accent-text); }
.warn-tile { background: var(--warn-soft); color: var(--warn-hi); }
.steps { list-style: none; margin: 22px 0 0; padding: 0; width: 100%; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-2); overflow: hidden; }
.steps li { display: flex; align-items: center; gap: 14px; padding: 14px 16px; font-size: 15.5px; line-height: 1.4; color: var(--ink); }
.steps li + li { border-top: 1px solid var(--line); }
.step-ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; flex: none; background: var(--surface-2); color: var(--accent-text); }
#home-cant { margin-top: 6px; font-size: 14.5px; }

.wl-foot { display: flex; flex-direction: column; align-items: center; gap: 0; padding-top: 14px; }
.e2e { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 13.5px; }
.welcome:not([data-view="start"]) .wl-foot { display: none; }

/* Computers on a wide screen: words left, the other computer's
   "Add device" right. */
.wl-art { display: none; }
/* Computers: steps numbered as on the picture, the install link near the box, and three lines of why it is safe. */
.dsteps { list-style: none; margin: 22px 0 18px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.dsteps li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.45; color: var(--ink-2, var(--ink)); }
.dsteps b, .badge { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font: 650 12px/1 var(--font); font-style: normal; }
.badge { position: absolute; box-shadow: 0 0 0 3px var(--surface); }
.mock-bar { position: relative; }
.mock-bar .b1 { right: 14px; top: 9px; }
.mock-tog { position: relative; }
.mock-tog .b2 { right: -9px; top: -9px; }
.mock-btn .b3 { right: -9px; top: -9px; }
.accent-line { color: var(--accent); }
.no-hub-near { margin-top: 10px; align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; font-size: 14.5px; }
.trust { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 28px; color: var(--muted); font-size: 13.5px; }
.trust li { display: inline-flex; align-items: center; gap: 8px; }
.computer .wl-foot #no-hub, .computer .wl-foot .e2e { display: none; }
.mock { width: 500px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-2); overflow: hidden; }
.mock-bar { height: 40px; display: flex; align-items: center; gap: 7px; padding: 0 16px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.mock-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); }
.mock-bar span { margin-left: 10px; font-size: 12.5px; color: var(--muted); font-weight: 550; }
.mock-body { padding: 26px 28px 28px; }
.mock-h { margin: 0; font-size: 19px; font-weight: 650; letter-spacing: -.01em; }
.mock-tog { display: flex; padding: 3px; margin: 16px 0 20px; border-radius: 11px; background: var(--surface-2); border: 1px solid var(--line); }
.mock-tog span { flex: 1; text-align: center; font-size: 13.5px; font-weight: 550; color: var(--muted); padding: 8px 0; border-radius: 8px; }
.mock-tog .on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1), 0 0 0 1px var(--line); }
[data-theme="dark"] .mock-tog .on { background: var(--surface-3); }
.mock-field { height: 46px; display: flex; align-items: center; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); font: 13px var(--mono); color: var(--muted); overflow: hidden; white-space: nowrap; }
.mock-btn { position: relative; display: flex; align-items: center; justify-content: center; height: 46px; margin-top: 12px; border-radius: 10px; background: var(--accent); color: var(--accent-ink); font-weight: 600; font-size: 14.5px; animation: mock-pulse 1.8s ease-out infinite; }
.mock-sas { margin: 22px 0; padding: 22px 0; text-align: center; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); font: 650 44px var(--mono); letter-spacing: .12em; }
.mock-cursor { position: absolute; right: 34%; bottom: -14px; width: 22px; height: 22px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.3));
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3l14 8-6 1.5L10 19z' fill='white' stroke='%23111' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.mock-note { margin: 24px 0 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
@keyframes mock-pulse { 0% { box-shadow: 0 0 0 0 rgba(114,77,231,.5); } 70% { box-shadow: 0 0 0 14px rgba(114,77,231,0); } 100% { box-shadow: 0 0 0 0 rgba(114,77,231,0); } }

/* ---------- pairing ---------- */
.pr-copy { align-items: center; text-align: center; }
.pr-copy > * { max-width: 100%; }
.pr-art { display: flex; justify-content: center; order: -1; margin: 18px 0 30px; }
#pair-ask { display: flex; flex-direction: column; flex: 1; width: 100%; }
.host { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 24px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); text-align: left; }
.host-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--surface-2); color: var(--ink-2); }
.host-t { font-size: 14px; color: var(--ink); line-height: 1.5; min-width: 0; overflow-wrap: anywhere; }
.host-t b { font: 600 15px var(--mono); }
.host-t small { display: block; font-size: 13px; color: var(--muted); }
.host.warn { padding: 14px 16px; background: var(--warn-soft); border-color: var(--warn-line); align-items: flex-start; }
.host.warn::before { content: none; }
.host.warn .host-ic { background: none; color: var(--warn-hi); }
#pair-replace { margin-top: 12px; }
.pr-btns { display: flex; flex-direction: column; gap: 10px; width: 100%; margin-top: auto; padding-top: 24px; }
.pr-btns .primary, .pr-btns .secondary { max-width: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
/* The six digits: plain and neutral; the decision is made on the computer. */
.sas { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 28px; }
.sas b { display: grid; place-items: center; width: 46px; height: 60px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-2); font: 650 30px var(--mono); color: var(--ink); }
.sas i { width: 8px; }
.pair-wait { display: flex; align-items: center; gap: 10px; margin: 24px 0 0; color: var(--muted); font-size: 15px; }
.spinner.sm { width: 18px; height: 18px; border-width: 2.5px; }
#pair-mismatch, #pair-stop, #pair-retry { margin-top: auto; padding-top: 16px; min-height: 44px; align-self: center; }
.host-tag { margin-left: auto; padding-left: 8px; font-size: 13px; color: var(--muted); white-space: nowrap; }
#pair-again { margin-top: auto; }
/* This device —— your computer: dashed (not yet), flowing (connecting),
   green (connected), broken red (didn't work). */
.lv { display: flex; align-items: center; }
.lv-node { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 96px; font-size: 12.5px; color: var(--muted); font-weight: 550; text-align: center; }
.lv-dev { width: 68px; height: 68px; border-radius: 20px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-2); color: var(--ink-2); }
.lv-dev.me { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.lv-line { position: relative; width: 110px; height: 2px; margin-bottom: 30px; }
.lv-track { position: absolute; inset: 0; background-image: linear-gradient(90deg, var(--line-2) 50%, transparent 0); background-size: 10px 2px; }
.lv-mid { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); border: 1px solid var(--line-2); color: var(--muted); }
.lv-mid .ic { --i: var(--i-lock); }
[data-state="busy"] .lv-track, [data-state="sas"] .lv-track { background-image: linear-gradient(90deg, var(--cyan), var(--accent), var(--magenta));
  -webkit-mask: linear-gradient(90deg, #000 50%, transparent 0) 0 0 / 12px 2px; mask: linear-gradient(90deg, #000 50%, transparent 0) 0 0 / 12px 2px; animation: lv-flow .8s linear infinite; }
[data-state="busy"] .lv-mid, [data-state="sas"] .lv-mid { border-color: var(--accent); color: var(--accent-text); }
[data-state="ok"] .lv-track { background: var(--ok); }
[data-state="ok"] .lv-mid { background: var(--ok); border-color: var(--ok); color: var(--surface); }
[data-state="ok"] .lv-mid .ic { --i: var(--i-tick); }
[data-state="bad"] .lv-track { background-image: linear-gradient(90deg, var(--bad) 40%, transparent 40% 60%, var(--bad) 60%); background-size: auto; }
[data-state="bad"] .lv-mid { background: var(--bad-soft); border-color: var(--bad); color: var(--bad); }
[data-state="bad"] .lv-mid .ic { --i: var(--i-cross); }
@keyframes lv-flow { to { -webkit-mask-position: 12px 0; mask-position: 12px 0; } }
.pr-art .mock { display: none; }

/* scanner: the camera behind a square window */
#scanner { position: relative; background: #000; overflow: hidden; }
#cam { width: 100%; height: 100%; object-fit: cover; }
.cam-frame { position: absolute; left: 50%; top: 44%; width: min(64vw, 260px); aspect-ratio: 1 / 1; transform: translate(-50%, -50%); border-radius: 20px; box-shadow: 0 0 0 200vmax rgba(0,0,0,.5); }
.cam-frame .vf-c { border-color: #fff; border-width: 4px; width: 40px; height: 40px; }
.cam-frame .vf-c1 { left: 0; top: 0; border-radius: 16px 0 0 0; } .cam-frame .vf-c2 { right: 0; top: 0; border-radius: 0 16px 0 0; }
.cam-frame .vf-c3 { left: 0; bottom: 0; border-radius: 0 0 0 16px; } .cam-frame .vf-c4 { right: 0; bottom: 0; border-radius: 0 0 16px 0; }
.cam-frame .vf-sweep { left: 14px; right: 14px; }
.scan-hint { position: absolute; left: 24px; right: 24px; top: calc(44% + min(32vw, 130px) + 22px); text-align: center; color: #fff; font-weight: 600; text-shadow: 0 1px 8px rgba(0,0,0,.6); margin: 0; }
.glass { background: rgba(20,20,30,.55); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: #fff; border: 1px solid rgba(255,255,255,.16); }
.cam-x { position: absolute; left: 16px; top: max(14px, env(safe-area-inset-top)); width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; padding: 0; }
.cam-paste { position: absolute; left: 20px; right: 20px; bottom: max(28px, env(safe-area-inset-bottom)); width: auto; max-width: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.cam-paste:active { background: rgba(20,20,30,.75); }

@media (prefers-reduced-motion: reduce) { .vf-sweep, .mock-btn, [data-state] .lv-track { animation: none; } }

/* Wide screens (computers and big tablets): words left, picture right. */
@media (min-width: 1024px) {
  .wl { padding: 24px 64px 28px; }
  .wl-main { flex-direction: row; align-items: center; justify-content: space-between; gap: 64px; padding: 0; }
  .wl-copy { margin: 0; max-width: 560px; flex: none; }
  .wv { flex: none; }
  .wl-title { font-size: 52px; line-height: 1.1; }
  .wl-sub { font-size: 18px; margin-top: 16px; max-width: 520px; }
  .pastebar { margin-top: 36px; min-height: 64px; padding: 7px 7px 7px 18px; }
  .pastebar .primary { min-height: 50px; padding: 0 26px; }
  .wv-end { margin-top: 28px; align-self: flex-start; }
  .wv-acts { flex-direction: row; gap: 20px; }
  .wv-acts .wl-wide { width: auto; padding: 0 24px; }
  .wl-foot { flex-direction: row; justify-content: space-between; }
  .computer .welcome[data-view="start"] .wl-art { display: flex; justify-content: center; flex: 1; }
  .welcome:not([data-view="start"]) .wl-main, .welcome[data-view="start"]:not(.computer *) .wl-main { justify-content: center; }
  .steps, .host { max-width: 520px; }
  .pr-main { justify-content: space-between; }
  .pr-copy { align-items: flex-start; text-align: left; }
  .pr-art { order: 0; flex: 1; margin: 0; }
  .pr-art .lv { transform: scale(1.35); }
  .lv-line { width: 180px; }
  .lv-node { width: 120px; font-size: 13.5px; }
  .lv-dev { width: 84px; height: 84px; border-radius: 24px; }
  .sas { justify-content: flex-start; gap: 10px; margin-top: 36px; }
  .sas b { width: 64px; height: 80px; font-size: 42px; border-radius: 14px; }
  .sas i { width: 14px; }
  .pr-btns { flex-direction: row; margin-top: 30px; padding-top: 0; }
  .pr-btns .primary { min-width: 160px; width: auto; }
  .pr-btns .secondary { min-width: 120px; width: auto; }
  #pair-mismatch, #pair-stop, #pair-retry { margin-top: 8px; padding-top: 0; align-self: flex-start; }
  .pair-wait { margin-top: 30px; }
  #pair-again { margin-top: 30px; }
  .computer [data-state="sas"] .pr-art .lv { display: none; }
  .computer [data-state="sas"] .pr-art .mock { display: block; }
}
@media (max-width: 359px) { .wl-brand span { display: none; } .wl-title { font-size: 26px; } }
.primary:disabled, .secondary:disabled { opacity: .5; cursor: default; box-shadow: none; }
.primary:focus-visible, .secondary:focus-visible { box-shadow: var(--focus); }
/* Disabled buttons read as "not yet", not broken (as in the console). */
.primary:disabled, .secondary:disabled { opacity: 1; background: var(--surface-3); border-color: var(--line-2); color: var(--muted); }
.mock-note-top { margin-top: 8px; }