/* Calm, modern UI: cool sea-and-sky neutrals, Inter for text, Plus Jakarta Sans for headings, one ocean-blue accent. */
:root {
  --bg: #f3f8fb; --sidebar: #e7f1f6; --surface: #ffffff; --surface-2: #f5fafc;
  --text: #13303d; --muted: #51697a; --border: #d5e5ed; --border-strong: #b9d2de;
  --accent: #0a7399; --accent-hover: #085f80; --accent-text: #ffffff; --accent-soft: #dbf0f8;
  --accent-2: #1462a8; /* deeper ocean blue, for gradients */
  --user: #e0f0f8; --shadow: 0 1px 2px rgb(10 60 90 / .06), 0 6px 24px rgb(10 60 90 / .08);
  --glow: rgb(56 189 248 / .14);
  --load-a: #2ec4c4; --load-b: #87ceeb; /* light sea blue, sky blue */
  /* --serif is the display face (headings); the name stays so existing rules keep working. */
  --serif: "Plus Jakarta Sans", "Noto Sans Khmer", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sans: "Inter", "Noto Sans Khmer", system-ui, -apple-system, "Segoe UI", "Khmer OS", sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e1b23; --sidebar: #0a151c; --surface: #152630; --surface-2: #12212a;
    --text: #e2f1f7; --muted: #8eaebd; --border: #213845; --border-strong: #2d4a59;
    --accent: #4cc2e6; --accent-hover: #72d0ee; --accent-text: #05202b; --accent-soft: #123747;
    --accent-2: #6fa8f2;
    --user: #1a3240; --shadow: 0 1px 2px rgb(0 0 0 / .35), 0 8px 28px rgb(0 10 20 / .35);
    --glow: rgb(76 194 230 / .10);
    --load-a: #4fd8d8; --load-b: #9ad8f5;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0e1b23; --sidebar: #0a151c; --surface: #152630; --surface-2: #12212a;
    --text: #e2f1f7; --muted: #8eaebd; --border: #213845; --border-strong: #2d4a59;
    --accent: #4cc2e6; --accent-hover: #72d0ee; --accent-text: #05202b; --accent-soft: #123747;
    --accent-2: #6fa8f2;
    --user: #1a3240; --shadow: 0 1px 2px rgb(0 0 0 / .35), 0 8px 28px rgb(0 10 20 / .35);
    --glow: rgb(76 194 230 / .10);
    --load-a: #4fd8d8; --load-b: #9ad8f5;
  color-scheme: dark;
}

* { box-sizing: border-box; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--border-strong) 70%, transparent) transparent; }
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--border-strong) 70%, transparent); border-radius: 99px; }
*::-webkit-scrollbar-thumb:hover { background: var(--muted); }
html, body { height: 100%; min-height: 100dvh; }
body { margin: 0; background: radial-gradient(1200px 500px at 70% -10%, var(--glow), transparent 70%) fixed, var(--bg); color: var(--text); font: 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
.icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; }
button, select, input, textarea { font: inherit; color: inherit; touch-action: manipulation; }
button, a, summary, [role="button"] { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Shell ---------- */
.shell { display: grid; grid-template-columns: 264px minmax(0, 1fr); min-height: 100%; }
#sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 12px;
  padding: 16px 12px; background: var(--sidebar); border-right: 1px solid var(--border); overflow-y: auto; }
.brand { display: flex; align-items: center; gap: 10px; padding: 6px 10px 10px; font: 600 1.2rem var(--serif); }
.brand small { font: 500 .72rem var(--sans); color: var(--muted); letter-spacing: .02em; }
.brand-mark { width: 26px; height: 26px; flex: none; }
.new-chat { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--border-strong);
  border-radius: 10px; background: var(--surface); font-weight: 500; box-shadow: var(--shadow); }
.new-chat:hover { border-color: var(--accent); }
nav { display: flex; flex-direction: column; gap: 2px; }
.nav-label { margin: 14px 12px 4px; font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
nav button { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border: 0; border-radius: 8px;
  background: none; text-align: left; color: var(--text); }
nav button .icon { color: var(--muted); }
nav button:hover { background: rgb(0 0 0 / .045); }
nav button[aria-current="page"] { background: var(--surface); box-shadow: var(--shadow); font-weight: 600; }
nav button[aria-current="page"] .icon { color: var(--accent); }
.sidebar-foot { margin-top: auto; padding: 12px; font-size: .8rem; color: var(--muted); }
.sidebar-foot p { margin: 0 0 6px; }
.badge { display: inline-block; padding: 2px 10px; border-radius: 99px; border: 1px solid var(--border-strong); }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar { display: none; }
main { flex: 1; padding: 48px 24px 64px; }

/* ---------- Panels ---------- */
.panel { max-width: 740px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.panel-head { margin-bottom: 10px; }
.panel-head h2, .greeting h2 { margin: 0 0 4px; font: 400 2.1rem/1.2 var(--serif); letter-spacing: -.01em; }
.panel-head p { margin: 0; color: var(--muted); }
.status { margin: 0 4px; min-height: 1.4em; font-size: .88rem; color: var(--muted); }

/* ---------- Composer ---------- */
.composer { display: flex; flex-direction: column; gap: 6px; padding: 14px 14px 10px; background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: 20px; box-shadow: var(--shadow); transition: border-color .15s; }
.composer:focus-within { border-color: var(--muted); }
.composer textarea { width: 100%; min-height: 1.6em; max-height: 40vh; overflow-y: hidden; padding: 2px 4px; border: 0; outline: 0;
  resize: none; background: transparent; font-size: 1.02rem; line-height: 1.55; }
.composer textarea::placeholder { color: var(--muted); }
.composer-bar { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; }
.composer-bar > button { flex-shrink: 0; }
.spacer { flex: 1; }
.hint { font-size: .78rem; color: var(--muted); padding-left: 4px; }
.composer-bar .hint { flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.composer-bar select.pill { min-width: 0; flex-shrink: 1; }

button.primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 16px;
  border: 0; border-radius: 10px; background: var(--accent); color: var(--accent-text); font-weight: 600; }
button.primary:not(.stop) { background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
button.primary:hover { background: var(--accent-hover); }
:where(body:not(.coder-page)) button:not(.primary):not(.new-chat):not([data-tab]):not(.icon-button):not(.open):not(.delete) { padding: 7px 14px; border: 1px solid var(--border-strong);
  border-radius: 10px; background: var(--surface); }
button:disabled { opacity: .5; cursor: progress; }
button.send { width: 36px; height: 36px; padding: 0; border-radius: 10px; }
button.stop { width: 36px; height: 36px; padding: 0; border-radius: 50%; display: grid; place-items: center; animation: stop-pulse 1.6s ease-in-out infinite; }
button.stop[hidden] { display: none; }
button.stop .stop-square { width: 12px; height: 12px; border-radius: 3px; background: currentColor; }
#chat-form.generating button.send { display: none; }
@keyframes stop-pulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 30%, transparent); } }

.pill { padding: 6px 30px 6px 12px; border: 1px solid var(--border); border-radius: 99px; background: var(--surface-2);
  appearance: none; font-size: .9rem; max-width: 100%;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 15px) 55%, calc(100% - 10px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
label.inline { display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--muted); }
input[type="range"] { accent-color: var(--accent); width: 110px; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--border);
  border-radius: 99px; background: var(--surface-2); font-size: .9rem; cursor: pointer; max-width: 100%; }
.chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip:hover { border-color: var(--border-strong); }
.chip.subtle { align-self: flex-start; background: transparent; }

/* ---------- Results ---------- */
.result { display: block; padding: 16px 20px; white-space: pre-wrap; font: 1.1rem/1.6 var(--serif);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 16px; }
output:empty { display: none; }
.media { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
#img-output, #vid-output { width: 100%; max-width: 512px; aspect-ratio: 1; border-radius: 16px; border: 1px solid var(--border); box-shadow: var(--shadow); }
#vid-output { background: #000; }
#mus-output { width: 100%; }
.save { color: var(--accent); font-weight: 600; text-decoration: none; }
.save:hover { text-decoration: underline; }
#m3d-view { display: block; width: 100%; max-width: 640px; height: auto; aspect-ratio: 1; border-radius: 16px;
  border: 1px solid var(--border); background: var(--surface-2); box-shadow: var(--shadow); }
#m3d-ar { position: absolute; right: 14px; bottom: 14px; }

/* ---------- Speech to text ---------- */
.record-card { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 36px 20px;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 20px; box-shadow: var(--shadow); }
button.record { padding: 14px 26px; border-radius: 99px; font-size: 1.05rem; }
button.record .icon { width: 22px; height: 22px; }

/* ---------- Chat ---------- */
.chat-panel { min-height: calc(100vh - 112px); }
.greeting { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 10vh 0 4vh; }
.greeting .brand-mark { width: 64px; height: 64px; }
#chat-log { display: flex; flex-direction: column; gap: 22px; flex: 1; }
#chat-log:empty { display: none; }
.msg { white-space: pre-wrap; line-height: 1.65; }
.msg.user { align-self: flex-end; max-width: 80%; padding: 10px 16px; border-radius: 18px; background: var(--user); }
.msg.assistant { font: 1.06rem/1.7 var(--serif); padding: 0 4px; }
.chat-dock { position: sticky; bottom: 0; padding: 12px 0 16px; background: linear-gradient(transparent, var(--bg) 24px); }
.chat-dock .status { margin-top: 8px; text-align: center; }

/* ---------- Phones and small tablets: sidebar becomes a drawer ---------- */
@media (max-width: 899px) {
  .shell { display: block; }
  #sidebar { position: fixed; inset: 0 auto 0 0; z-index: 20; width: min(300px, 84vw); transform: translateX(-100%);
    transition: transform .2s ease; box-shadow: var(--shadow); }
  body.menu-open #sidebar { transform: none; }
  #scrim { position: fixed; inset: 0; z-index: 10; background: rgb(0 0 0 / .3); }
  .topbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 10px 12px;
    background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(14px) saturate(1.4);
    -webkit-backdrop-filter: blur(14px) saturate(1.4); border-bottom: 1px solid var(--border); font: 600 1.05rem var(--serif); }
  .icon-button { display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 10px; background: none; }
  .icon-button:hover { background: rgb(0 0 0 / .05); }
  main { padding: 24px 16px 40px; }
  .panel-head h2, .greeting h2 { font-size: 1.7rem; }
  .chat-panel { min-height: calc(100vh - 124px); }
  .hint { display: none; }
}


/* ---------- Motion ---------- */
:root { --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1); }

@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes pop { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes shimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); }
  100% { box-shadow: 0 0 0 18px transparent; } }
@keyframes breathe { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-4px) scale(1.05); } }
@keyframes glow { 0%, 100% { opacity: .55; } 50% { opacity: .9; } }

/* Panels and their parts rise in, lightly staggered, whenever a tool opens. */
.panel:not([hidden]) > * { animation: rise .45s var(--ease-out) both; }
.panel:not([hidden]) > :nth-child(2) { animation-delay: .04s; }
.panel:not([hidden]) > :nth-child(3) { animation-delay: .08s; }
.panel:not([hidden]) > :nth-child(n + 4) { animation-delay: .12s; }
::view-transition-old(root) { animation: .18s ease both fade-out; }
::view-transition-new(root) { animation: .3s var(--ease-out) both fade-in; }
@keyframes fade-out { to { opacity: 0; } }
@keyframes fade-in { from { opacity: 0; transform: translateY(6px); } }

/* Results appear with a soft pop when they first show. */
.result, .media > :not(canvas) { animation: pop .4s var(--ease-out) both; }

/* Sidebar: smooth hover/active states and a sliding accent bar. */
nav button { position: relative; transition: background-color .2s, box-shadow .2s, transform .2s var(--ease-out); }
nav button::before { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 0; border-radius: 3px;
  background: var(--accent); transform: translateY(-50%); transition: height .3s var(--ease-spring); }
nav button[aria-current="page"]::before { height: 60%; }
nav button:hover .icon { transform: scale(1.12); }
nav button .icon { transition: transform .25s var(--ease-spring), color .2s; }
nav button:active { transform: scale(.98); }
.new-chat { transition: border-color .2s, transform .2s var(--ease-out), box-shadow .2s; }
.new-chat:hover { transform: translateY(-1px); }
.new-chat:hover .icon { transform: rotate(90deg); }
.new-chat .icon { transition: transform .35s var(--ease-spring); }

/* Buttons: springy press, lift on hover. */
button.primary, button.record, .chip, button:not([data-tab]) { transition: background-color .2s, border-color .2s,
  transform .25s var(--ease-spring), box-shadow .25s; }
button.primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 30%, transparent); }
button:active:not(:disabled), .chip:active { transform: scale(.96); }
.chip:hover { transform: translateY(-1px); }
button.send .icon { transition: transform .3s var(--ease-spring); }
button.send:hover:not(:disabled) .icon { transform: translateY(-2px); }

/* Busy button: gradient ring spinner in sea blue → sky blue. */
button.loading { cursor: progress; }
button.loading:disabled { opacity: 1; }
button.loading::before { content: ""; width: 16px; height: 16px; border-radius: 50%; flex: none;
  background: conic-gradient(from 0deg, transparent 0 18%, var(--load-a) 55%, var(--load-b));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
  animation: spin .75s linear infinite; }
button.primary.loading { background: color-mix(in srgb, var(--accent) 88%, var(--load-a)); }
button.send.loading .icon { display: none; }

/* Composer: animated focus glow. */
.composer { transition: border-color .2s, box-shadow .3s var(--ease-out), transform .3s var(--ease-out); }
.composer:focus-within { box-shadow: var(--shadow), 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent); }
.composer textarea { transition: height .15s ease; }

/* Status line: sea-to-sky shimmer across the text while a task runs. */
.panel.busy .status:not(:empty) { color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(90deg, var(--muted) 15%, var(--load-a) 38%, var(--load-b) 50%, var(--load-a) 62%, var(--muted) 85%);
  background-size: 250% 100%; animation: shimmer 2s linear infinite; }

/* Composer: animated gradient border while its task runs. */
@property --spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes border-spin { to { --spin: 360deg; } }
.panel.busy .composer { border-color: transparent;
  background: linear-gradient(var(--surface), var(--surface)) padding-box,
    conic-gradient(from var(--spin), var(--load-a), var(--load-b), transparent 40%, transparent 60%, var(--load-b), var(--load-a)) border-box;
  box-shadow: var(--shadow), 0 0 22px color-mix(in srgb, var(--load-a) 22%, transparent);
  animation: border-spin 2.4s linear infinite; }

/* Thin indeterminate progress bar across the top of the page. */
@keyframes bar { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }
body:has(.panel.busy)::after { content: ""; position: fixed; top: 0; left: 0; z-index: 50; width: 40%; height: 3px;
  border-radius: 0 3px 3px 0; background: linear-gradient(90deg, transparent, var(--load-a), var(--load-b), transparent);
  box-shadow: 0 0 10px var(--load-a); animation: bar 1.3s var(--ease-out) infinite; }

/* Skeleton placeholder where an image, video, music or 3D model will appear: soft sea/sky aurora. */
@keyframes aurora { 0% { background-position: 0% 50%, 100% 50%, 0 0; } 50% { background-position: 100% 50%, 0% 50%, 0 0; }
  100% { background-position: 0% 50%, 100% 50%, 0 0; } }
.panel.busy .media::before { content: ""; width: 100%; max-width: 512px; aspect-ratio: 1; border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--load-a) 35%, var(--border));
  background:
    radial-gradient(60% 60% at 30% 40%, color-mix(in srgb, var(--load-a) 30%, transparent), transparent 70%),
    radial-gradient(55% 55% at 70% 65%, color-mix(in srgb, var(--load-b) 38%, transparent), transparent 70%),
    linear-gradient(110deg, var(--surface-2) 30%, color-mix(in srgb, var(--load-b) 14%, var(--surface)) 50%, var(--surface-2) 70%);
  background-size: 200% 200%, 200% 200%, 100% 100%;
  animation: aurora 5s ease-in-out infinite, pop .4s var(--ease-out) both;
  box-shadow: 0 0 30px color-mix(in srgb, var(--load-b) 18%, transparent); }
#music.busy .media::before { aspect-ratio: auto; height: 54px; border-radius: 99px; }
.panel.busy .media > :not([hidden]) { display: none; }

/* Chat: messages glide in; empty assistant reply shows typing dots. */
.msg { animation: rise .35s var(--ease-out) both; }
.msg.user { transform-origin: right bottom; animation-name: pop; }
/* Typing indicator: three gradient dots bouncing in sequence. */
.msg.assistant:empty { display: flex; align-items: center; gap: 6px; height: 1.7em; }
.msg.assistant:empty::before { content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: linear-gradient(135deg, var(--load-a), var(--load-b)); animation: typing 1.2s ease-in-out infinite;
  box-shadow: 14px 0 0 var(--load-a), 28px 0 0 var(--load-b); }
@keyframes typing {
  0%, 100% { transform: translateY(0); box-shadow: 14px 0 0 var(--load-a), 28px 0 0 var(--load-b); }
  20% { transform: translateY(-5px); box-shadow: 14px 5px 0 var(--load-a), 28px 5px 0 var(--load-b); }
  40% { transform: translateY(0); box-shadow: 14px -5px 0 var(--load-a), 28px 0 0 var(--load-b); }
  60% { transform: translateY(0); box-shadow: 14px 0 0 var(--load-a), 28px -5px 0 var(--load-b); }
}
.greeting { position: relative; }
.greeting::before { content: ""; position: absolute; top: 50%; left: 50%; width: 320px; height: 220px; z-index: -1;
  transform: translate(-50%, -60%); border-radius: 50%; filter: blur(60px);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 22%, transparent), transparent); animation: glow 6s ease-in-out infinite; }
.greeting .brand-mark { animation: breathe 5s ease-in-out infinite; }
.greeting h2 { animation: rise .6s var(--ease-out) .1s both; }
.brand-mark { transition: transform .6s var(--ease-spring); }
.brand:hover .brand-mark { transform: scale(1.12) rotate(-6deg); }

/* Recording: pulsing ring. */
button.record.recording { animation: pulse-ring 1.4s ease-out infinite; }

/* Drawer and scrim fade. */
#scrim:not([hidden]) { animation: fade-in .2s ease both; }
@media (max-width: 899px) { #sidebar { transition: transform .35s var(--ease-out); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ---------- Account & chat history ---------- */
.recent { display: flex; flex-direction: column; flex: 1; min-height: 80px; }
.recent-empty { margin: 4px 12px; font-size: .85rem; color: var(--muted); }
#recent-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; overflow-y: auto; }
.recent-item { display: flex; align-items: center; border-radius: 8px; transition: background-color .2s; }
.recent-item:hover, .recent-item.active { background: rgb(0 0 0 / .045); }
.recent-item.active { box-shadow: inset 2px 0 0 var(--accent); }
.recent-item button.open { flex: 1; min-width: 0; padding: 7px 12px; border: 0; background: none; text-align: left;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .92rem; color: var(--text); }
.recent-item button.delete { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; margin-right: 4px;
  border: 0; border-radius: 6px; background: none; color: var(--muted); opacity: 0; transition: opacity .2s, color .2s; }
.recent-item:hover button.delete, .recent-item button.delete:focus-visible { opacity: 1; }
.recent-item button.delete:hover { color: var(--accent); }
.recent-item button.delete .icon { width: 15px; height: 15px; }
@media (hover: none) { .recent-item button.delete { opacity: .6; } }

.account { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.account img { width: 32px; height: 32px; border-radius: 50%; flex: none; }
.account .who { min-width: 0; flex: 1; line-height: 1.3; }
.account .who strong { display: block; color: var(--text); font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account .who span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account .sign-out { padding: 4px 10px; font-size: .8rem; }
.google-button { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 9px 14px;
  border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface); color: var(--text);
  font-weight: 500; text-decoration: none; box-shadow: var(--shadow); transition: border-color .2s, transform .25s var(--ease-spring); }
.google-button:hover { border-color: var(--muted); transform: translateY(-1px); }
.google-button svg { width: 18px; height: 18px; flex: none; }

/* Reasoning models: collapsible thinking above the answer. */
details.thinking { margin-bottom: 10px; padding: 8px 12px; border-left: 2px solid var(--border-strong); border-radius: 0 8px 8px 0;
  background: var(--surface-2); font: .9rem/1.55 var(--sans); color: var(--muted); }
details.thinking summary { cursor: pointer; font-weight: 600; list-style-position: inside; }
details.thinking.active summary { color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(90deg, var(--muted) 15%, var(--load-a) 40%, var(--load-b) 55%, var(--muted) 85%);
  background-size: 250% 100%; animation: shimmer 2s linear infinite; }
details.thinking .thinking-text { margin-top: 6px; white-space: pre-wrap; max-height: 40vh; overflow-y: auto; }

/* Formatted replies */
.msg.assistant { white-space: normal; }
.msg.assistant p { margin: 0 0 .7em; }
.msg.assistant p:last-child, .msg.assistant ul:last-child, .msg.assistant ol:last-child { margin-bottom: 0; }
.msg.assistant ul, .msg.assistant ol { margin: 0 0 .7em; padding-left: 1.4em; }
.msg.assistant li { margin: .2em 0; }
.msg.assistant .md-heading { font-weight: 600; margin-top: .9em; }
.msg.assistant code { font: .88em ui-monospace, SFMono-Regular, Menlo, monospace; padding: .1em .35em; border-radius: 5px; background: var(--user); }
.msg.assistant pre { margin: 0 0 .8em; padding: 12px 14px; overflow-x: auto; border-radius: 10px; background: var(--user); }
.msg.assistant pre code { padding: 0; background: none; }
#chat-model { min-width: 0; max-width: 100%; text-overflow: ellipsis; }

/* Sidebar: Tools submenu (collapsible) and Explore page */
#sidebar { overflow: hidden; }
.sidebar-foot { margin-top: 0; }
.tools-menu summary { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 8px; cursor: pointer;
  list-style: none; color: var(--text); transition: background-color .2s; }
.tools-menu summary::-webkit-details-marker { display: none; }
.tools-menu summary:hover { background: rgb(0 0 0 / .045); }
.tools-menu summary .icon { color: var(--muted); }
.tools-menu summary span { flex: 1; }
.tools-menu .chevron { width: 15px; height: 15px; transition: transform .25s var(--ease-spring); }
.tools-menu[open] .chevron { transform: rotate(90deg); }
.tools-list { display: flex; flex-direction: column; gap: 2px; padding: 2px 0 4px 14px; margin-left: 12px; border-left: 1px solid var(--border); }
.tools-menu[open] .tools-list { animation: rise .25s var(--ease-out) both; }
.tools-list button { padding: 6px 10px; font-size: .94rem; }

.explore-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.explore-card { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 18px; text-align: left;
  border: 1px solid var(--border-strong); border-radius: 16px; background: var(--surface); color: var(--text); box-shadow: var(--shadow);
  cursor: pointer; transition: transform .25s var(--ease-spring), border-color .2s, box-shadow .25s; }
.explore-card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: var(--shadow), 0 10px 28px color-mix(in srgb, var(--accent) 14%, transparent); }
.explore-card strong { font: 600 1.05rem var(--serif); }
.explore-card > span:last-child { font-size: .88rem; color: var(--muted); line-height: 1.45; }
.explore-icon { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 4px; border-radius: 12px;
  background: var(--accent-soft); color: var(--accent); }
.explore-icon .icon { width: 20px; height: 20px; }

/* Dialogs */
.dialog { width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; box-sizing: border-box; padding: 24px; border: 1px solid var(--border-strong); border-radius: 20px;
  background: var(--surface); color: var(--text); box-shadow: var(--shadow), 0 24px 60px rgb(0 0 0 / .25); }
.dialog::backdrop { background: rgb(0 0 0 / .35); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.dialog[open] { animation: pop .3s var(--ease-out) both; }
.dialog h2 { margin: 0 0 6px; font: 400 1.6rem var(--serif); }
.dialog p { margin: 0 0 12px; color: var(--muted); }
.dialog a { color: var(--accent); }
.dialog .steps { margin: 0 0 16px; padding-left: 1.2em; display: flex; flex-direction: column; gap: 8px; font-size: .92rem; }
.dialog .steps ul { margin: 6px 0 0; padding-left: 1.1em; color: var(--muted); }
.dialog code { font: .85em ui-monospace, SFMono-Regular, Menlo, monospace; padding: .1em .35em; border-radius: 5px; background: var(--user); word-break: break-all; }
.dialog label { display: flex; flex-direction: column; gap: 6px; font-size: .88rem; color: var(--muted); }
.dialog input { padding: 9px 12px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface-2); color: var(--text); }
.dialog .status { margin: 8px 0 0; }
.dialog-actions { display: flex; gap: 8px; margin-top: 12px; }

/* Khmer: script-appropriate fonts and roomier lines (stacked vowels and subscripts need the space). */
:lang(km) body { line-height: 1.85; }
:lang(km) .panel-head h2, :lang(km) .greeting h2 { line-height: 1.5; }
.msg:lang(km), .msg.assistant:lang(km) { line-height: 1.9; }
.language { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: .8rem; color: var(--muted); }
.language select { padding-top: 3px; padding-bottom: 3px; font-size: .82rem; }

.recent-search { margin: 2px 0 6px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); font-size: .88rem; }
.recent-search:focus { outline: none; border-color: var(--muted); }
.recent-item input.rename { flex: 1; min-width: 0; margin: 2px 4px; padding: 5px 8px; border: 1px solid var(--accent); border-radius: 7px;
  background: var(--surface); font-size: .92rem; }
.recent-item button.delete + button.delete { margin-left: -6px; }

/* ---------- Voice mode ---------- */
.voice-button { display: grid; place-items: center; width: 36px; height: 36px; padding: 0 !important; border-radius: 10px !important; }
.voice-button .icon { color: var(--accent); }
.voice-dialog { width: min(520px, calc(100vw - 24px)); max-height: calc(100vh - 24px); padding: 28px 24px 22px; border: 1px solid var(--border-strong);
  border-radius: 28px; background: var(--surface); color: var(--text); text-align: center;
  box-shadow: var(--shadow), 0 30px 80px rgb(0 0 0 / .3); overflow-y: auto; }
.voice-dialog::backdrop { background: color-mix(in srgb, var(--bg) 70%, transparent); backdrop-filter: blur(8px); }
.voice-dialog[open] { display: flex; flex-direction: column; align-items: center; gap: 10px; animation: pop .35s var(--ease-out) both; }
.voice-title { margin: 0; font: 400 1.4rem var(--serif); }
#voice-orb { --level: 0; position: relative; width: 150px; height: 150px; margin: 14px 0 6px; padding: 0 !important; border: 0 !important;
  border-radius: 50% !important; cursor: pointer;
  background: radial-gradient(circle at 35% 30%, #fff 0 8%, var(--load-b) 35%, var(--load-a) 70%, color-mix(in srgb, var(--load-a) 70%, #0a3d4a));
  box-shadow: 0 0 calc(30px + var(--level) * 60px) color-mix(in srgb, var(--load-a) 55%, transparent);
  transform: scale(calc(1 + var(--level) * .25)); transition: transform .08s linear, box-shadow .08s linear; }
#voice-orb span { position: absolute; inset: -10px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--load-b) 60%, transparent); opacity: 0; }
#voice-orb[data-state="listening"] span { animation: pulse-ring 1.6s ease-out infinite; opacity: 1; }
#voice-orb[data-state="thinking"] { animation: orb-think 2.4s linear infinite; }
#voice-orb[data-state="speaking"] { animation: orb-speak .9s ease-in-out infinite alternate; }
#voice-orb[data-state="paused"], #voice-orb[data-state="idle"] { filter: saturate(.4); opacity: .75; }
@keyframes orb-think { to { filter: hue-rotate(40deg); transform: rotate(360deg); } }
@keyframes orb-speak { from { transform: scale(1); } to { transform: scale(1.12); } }
.voice-status { margin: 0; font-weight: 600; min-height: 1.5em; }
.voice-heard { margin: 0; font-size: 1.05rem; min-height: 1.5em; }
.voice-reply { margin: 0; color: var(--muted); font: 1rem/1.6 var(--serif); max-height: 22vh; overflow-y: auto; }
.voice-hint { margin: 0; font-size: .85rem; color: var(--muted); min-height: 1.3em; }
.voice-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 16px; margin-top: 4px; }
.voice-controls label { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--muted); }
.voice-note { margin: 0; font-size: .75rem; color: var(--muted); max-width: 40ch; }
#voice-end { margin-top: 6px; }

/* ---------- Attachments ---------- */
.attach-tray { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.attach-chip { display: inline-flex; align-items: center; gap: 8px; max-width: 260px; padding: 5px 6px 5px 8px; border: 1px solid var(--border);
  border-radius: 12px; background: var(--surface-2); font-size: .85rem; animation: pop .25s var(--ease-out) both; }
.attach-chip img { width: 30px; height: 30px; border-radius: 7px; object-fit: cover; flex: none; }
.attach-chip .kind { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 7px; flex: none;
  background: var(--accent-soft); color: var(--accent); font: 700 .62rem var(--sans); text-transform: uppercase; }
.attach-chip .meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.attach-chip .meta strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.attach-chip .meta span { font-size: .75rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attach-chip.reading .meta span { color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(90deg, var(--muted) 15%, var(--load-a) 40%, var(--load-b) 55%, var(--muted) 85%); background-size: 250% 100%; animation: shimmer 2s linear infinite; }
.attach-chip.error { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); }
.attach-chip.error .meta span { color: var(--accent); }
.attach-chip button.remove { display: grid; place-items: center; width: 22px; height: 22px; padding: 0 !important; border: 0 !important;
  border-radius: 50% !important; background: transparent !important; color: var(--muted); font-size: 1rem; line-height: 1; }
.attach-chip button.remove:hover { color: var(--text); background: var(--user) !important; }
.msg-attachments { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.msg.user .msg-attachments .attach-chip { background: color-mix(in srgb, var(--surface) 55%, transparent); }
.composer.dragging { border-color: var(--load-a); box-shadow: var(--shadow), 0 0 0 4px color-mix(in srgb, var(--load-a) 20%, transparent); }
.composer.dragging::after { content: attr(data-drop); position: absolute; inset: 0; display: grid; place-items: center; border-radius: inherit;
  background: color-mix(in srgb, var(--surface) 85%, transparent); color: var(--load-a); font-weight: 600; pointer-events: none; }
.composer { position: relative; }
.msg .stopped-note { display: block; margin-top: 6px; font-size: 12px; color: var(--muted, #888); font-style: italic; }
/* Model picker sits just under the message box. */
.composer-below { display: flex; justify-content: flex-start; margin: 8px 2px 0; }
.composer-below .model-pick { max-width: min(100%, 340px); font-size: .82rem; }

/* Live sound line under the orb: follows your voice while listening and Virgo's while speaking. */
.voice-wave { width: min(100%, 360px); height: 64px; margin: -4px 0 2px; }
.voice-controls input[type="checkbox"] { accent-color: var(--accent); width: 16px; height: 16px; }

/* Photos in sent messages */
.msg-photos { display: grid; gap: 6px; margin-top: 8px; max-width: min(360px, 100%); }
.msg-photos.count-2, .msg-photos.count-4 { grid-template-columns: 1fr 1fr; }
.msg-photos.count-3 { grid-template-columns: 1fr 1fr 1fr; }
.msg-photo { padding: 0 !important; border: 0 !important; border-radius: 12px !important; overflow: hidden; background: var(--surface-2); cursor: zoom-in; aspect-ratio: 4 / 3; }
.msg-photos.count-1 .msg-photo { aspect-ratio: auto; max-height: 320px; }
.msg-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s var(--ease-out); }
.msg-photo:hover img { transform: scale(1.03); }
.image-viewer { max-width: min(96vw, 1100px); max-height: 94vh; padding: 0; border: 0; border-radius: 16px; background: var(--surface); overflow: hidden; }
.image-viewer::backdrop { background: rgb(0 0 0 / .75); backdrop-filter: blur(4px); }
.image-viewer img { display: block; min-width: min(280px, 90vw); max-width: 100%; max-height: calc(94vh - 56px); margin: 0 auto; object-fit: contain; }
.image-viewer-bar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; }
.image-viewer-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .85rem; color: var(--muted); }
.viewer-btn { padding: 6px 14px; border: 1px solid var(--border); border-radius: 99px; background: var(--surface-2); color: inherit; font-size: .85rem; text-decoration: none; cursor: pointer; }

/* ---------- Richer replies ---------- */
.msg.assistant .md-heading.h1 { font-size: 1.3em; }
.msg.assistant .md-heading.h2 { font-size: 1.15em; }
.msg.assistant a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; word-break: break-word; }
.msg.assistant blockquote { margin: 0 0 .7em; padding: 2px 0 2px 14px; border-left: 3px solid var(--accent); color: var(--muted); }
.msg.assistant hr { border: 0; border-top: 1px solid var(--border); margin: 1em 0; }
.msg.assistant .table-wrap { overflow-x: auto; margin: 0 0 .8em; border: 1px solid var(--border); border-radius: 10px; }
.msg.assistant table { border-collapse: collapse; width: 100%; font: .92em/1.5 var(--sans); }
.msg.assistant th, .msg.assistant td { padding: 8px 12px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.msg.assistant th { background: var(--surface-2); font-weight: 600; }
.msg.assistant tr:last-child td { border-bottom: 0; }
.code-block { margin: 0 0 .8em; border-radius: 10px; overflow: hidden; background: var(--user); border: 1px solid var(--border); }
.code-block .code-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 4px 12px; font: .75rem var(--sans); color: var(--muted); border-bottom: 1px solid var(--border); }
.code-block pre { margin: 0 !important; border-radius: 0 !important; }
/* Math in replies (web/math.js): clean symbols, real fractions, the final answer in a highlight. */
.math { white-space: nowrap; font-variant-numeric: tabular-nums; }
.math-block { margin: .3em 0 .9em; padding: 12px 16px; overflow-x: auto; white-space: nowrap; text-align: center;
  font-size: 1.12em; font-variant-numeric: tabular-nums; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; }
.math sup, .math-block sup { font-size: .7em; }
.frac { display: inline-flex; flex-direction: column; vertical-align: middle; text-align: center; margin: 0 .15em; font-size: .9em; line-height: 1.15; }
.frac > span:first-child { padding: 0 .2em .05em; border-bottom: 1.5px solid currentColor; }
.frac > span:last-child { padding: .05em .2em 0; }
.sqrt { border-top: 1.5px solid currentColor; padding: 0 .1em; }
.math-answer { display: inline-block; padding: .05em .55em; margin-left: .1em; border-radius: 8px; font-weight: 700;
  color: var(--accent); background: var(--accent-soft); border: 1.5px solid var(--accent); }
.copy-code { padding: 3px 10px !important; border: 0 !important; border-radius: 6px !important; background: none !important; color: var(--muted); font: 500 .75rem var(--sans); cursor: pointer; }
.copy-code:hover, .copy-code.done { color: var(--accent); background: var(--accent-soft) !important; }

/* ---------- Message actions ---------- */
.msg-actions { display: flex; gap: 2px; margin: -8px 0 4px; padding-left: 0; opacity: .75; transition: opacity .2s; }
.msg-actions:hover, .msg-actions:focus-within { opacity: 1; }
.msg-action { display: grid; place-items: center; width: 32px; height: 32px; padding: 0 !important; border: 0 !important; border-radius: 8px !important;
  background: none !important; color: var(--muted); cursor: pointer; }
.msg-action .icon { width: 17px; height: 17px; }
.msg-action:hover { color: var(--accent); background: var(--accent-soft) !important; }
.msg-action.done { color: var(--accent); }
.msg.user { position: relative; }
.msg.user .msg-edit { position: absolute; left: -38px; top: 50%; transform: translateY(-50%); opacity: 0; transition: opacity .2s; }
.msg.user:hover .msg-edit, .msg.user .msg-edit:focus-visible { opacity: 1; }
@media (hover: none) { .msg.user .msg-edit { opacity: .7; } }

/* ---------- Jump to latest ---------- */
.jump-latest { position: absolute; top: -40px; left: 50%; translate: -50% 0; z-index: 3; display: grid; place-items: center;
  width: 38px; height: 38px; padding: 0 !important; border: 1px solid var(--border-strong) !important; border-radius: 50% !important;
  background: var(--surface) !important; color: var(--accent); box-shadow: var(--shadow); cursor: pointer; animation: rise .25s var(--ease-out) both; }
.jump-latest[hidden] { display: none; }
.jump-latest:hover { color: var(--accent-text); background: var(--accent) !important; }

/* ---------- Starter suggestions ---------- */
.suggestions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 620px; margin-top: 10px; animation: rise .6s var(--ease-out) .2s both; }
.suggestion { padding: 8px 14px !important; border: 1px solid var(--border-strong) !important; border-radius: 99px !important; background: var(--surface) !important;
  color: var(--text); font: 500 .88rem var(--sans); cursor: pointer; field-sizing: content; box-shadow: var(--shadow); transition: border-color .2s, color .2s, transform .2s; }
.suggestion:hover { border-color: var(--accent) !important; color: var(--accent); transform: translateY(-1px); }

/* ---------- Your AI accounts ---------- */
.accounts-open { display: flex; align-items: center; gap: 12px; width: calc(100% - 0px); margin: 6px 0 0; padding: 8px 12px !important; border: 0 !important;
  border-radius: 8px !important; background: none !important; color: var(--text); text-align: left; cursor: pointer; }
.accounts-open .icon { color: var(--accent); }
.accounts-open:hover { background: var(--surface) !important; }
.accounts-dialog { width: min(560px, calc(100vw - 24px)); }
.accounts-list { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.account-row { padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.account-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.account-head span { font-size: .8rem; color: var(--muted); }
.account-form { display: flex; gap: 8px; }
.account-form input { flex: 1; min-width: 0; padding: 8px 12px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface); color: var(--text); font: .9rem ui-monospace, Menlo, monospace; }
.account-form input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.account-links { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; font-size: .82rem; }
.account-links a { color: var(--accent); }
.account-status { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.account-status .connected { color: var(--accent); font-weight: 600; font-size: .9rem; }
.account-error { margin: 8px 0 0; color: var(--danger); font-size: .85rem; }

/* ---------- Web search ---------- */
.web-toggle[hidden] { display: none !important; }  /* its display: inline-flex below would otherwise win over [hidden] */
.web-toggle { width: auto !important; display: inline-flex !important; gap: 6px; padding: 0 10px !important; font: 500 .82rem var(--sans); color: var(--muted); }
.web-toggle.on { color: var(--accent-text); background: var(--accent) !important; border-color: var(--accent) !important; }
.web-toggle.on .icon { color: inherit; }
@media (max-width: 480px) { .web-toggle span { display: none; } .web-toggle { width: 36px !important; padding: 0 !important; } }
.msg.assistant a.cite { display: inline-grid; place-items: center; min-width: 1.35em; height: 1.35em; margin: 0 1px; padding: 0 4px; border-radius: 99px;
  background: var(--accent-soft); color: var(--accent); font: 600 .7em var(--sans); text-decoration: none; vertical-align: .25em; }
.msg.assistant a.cite:hover { background: var(--accent); color: var(--accent-text); }
.sources { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.sources-label { font: 600 .75rem var(--sans); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-right: 2px; }
.msg.assistant a.source { display: inline-flex; align-items: center; gap: 6px; max-width: 220px; padding: 4px 10px 4px 4px; border: 1px solid var(--border);
  border-radius: 99px; background: var(--surface); color: var(--text); font: .78rem var(--sans); text-decoration: none; }
.source b { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: .7rem; }
.source span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg.assistant a.source:hover { border-color: var(--accent); }

/* ---------- Customize Virgo ---------- */
.customize-dialog { width: min(560px, calc(100vw - 24px)); }
.customize-dialog .field { display: flex; flex-direction: column; gap: 6px; margin: 12px 0 4px; font-weight: 600; font-size: .9rem; }
.customize-dialog textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: 10px;
  background: var(--surface); color: var(--text); font: 400 .92rem/1.5 var(--sans); resize: vertical; }
.customize-dialog textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.customize-dialog .counter { align-self: flex-end; font-weight: 400; font-size: .75rem; color: var(--muted); }
.custom-ideas { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.custom-ideas button { padding: 5px 12px !important; border: 1px solid var(--border-strong) !important; border-radius: 99px !important; background: var(--surface-2) !important;
  color: var(--text); font: 500 .8rem var(--sans); cursor: pointer; }
.custom-ideas button:hover { border-color: var(--accent) !important; color: var(--accent); }
.customize-dialog .toggle { display: flex; align-items: center; gap: 8px; font-size: .88rem; }
.customize-dialog .toggle input { accent-color: var(--accent); width: 16px; height: 16px; }
.accounts-open.active .icon { color: var(--accent); }
.accounts-open.active span::after { content: " ●"; color: var(--accent); font-size: .7em; vertical-align: .2em; }
.customize-dialog label.toggle { flex-direction: row; justify-content: flex-start; text-align: left; margin: 4px 0; color: var(--text); }

/* ---------- Share and export ---------- */
.chat-toolbar { position: sticky; top: 8px; z-index: 4; display: flex; justify-content: flex-end; gap: 6px; margin: -8px 0 8px; pointer-events: none; }
.chat-toolbar > * { pointer-events: auto; }
.tool-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px !important; border: 1px solid var(--border) !important; border-radius: 99px !important;
  background: color-mix(in srgb, var(--surface) 92%, transparent) !important; backdrop-filter: blur(6px); color: var(--text); font: 500 .82rem var(--sans); cursor: pointer; box-shadow: var(--shadow); list-style: none; }
.tool-btn::-webkit-details-marker { display: none; }
.tool-btn .icon { width: 16px; height: 16px; color: var(--accent); }
.tool-btn:hover { border-color: var(--accent) !important; }
.export-menu { position: relative; }
.export-list { position: absolute; right: 0; top: calc(100% + 6px); display: flex; flex-direction: column; min-width: 180px; padding: 6px; border: 1px solid var(--border);
  border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); }
.export-list button { padding: 8px 10px !important; border: 0 !important; border-radius: 8px !important; background: none !important; color: var(--text); text-align: left; font: .88rem var(--sans); cursor: pointer; }
.export-list button:hover { background: var(--accent-soft) !important; color: var(--accent); }
.share-dialog { width: min(520px, calc(100vw - 24px)); }
.share-row { display: flex; gap: 8px; margin: 12px 0 8px; }
.share-link { flex: 1; min-width: 0; padding: 8px 12px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface-2); color: var(--text); font: .85rem ui-monospace, Menlo, monospace; }
.share-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.share-actions a.viewer-btn { display: inline-block; }
.share-actions .danger { margin-left: auto; color: var(--danger); }
@media (max-width: 480px) { .tool-btn span { display: none; } }

/* Shared chat page */
.share-page { max-width: 820px; margin: 0 auto; padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(48px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
.share-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--border); }
.share-head .brand { display: flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; font: 600 1.15rem var(--serif); }
.share-head .brand small { font: 500 .72rem var(--sans); color: var(--muted); }
.share-cta { padding: 8px 14px; border-radius: 10px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--accent-text); font: 600 .85rem var(--sans); text-decoration: none; }
.share-main h1 { font: 400 1.8rem/1.25 var(--serif); margin: 28px 0 4px; }
.share-meta { color: var(--muted); font-size: .88rem; margin: 0 0 20px; }
.share-log { display: flex; flex-direction: column; gap: 18px; }
.share-attach { display: block; margin-top: 6px; color: var(--muted); font-size: .8rem; }
.share-note { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--border); color: var(--muted); font-size: .82rem; }

/* PDF export: print only the conversation */
@media print {
  body.printing #sidebar, body.printing .topbar, body.printing .chat-dock, body.printing .chat-toolbar, body.printing .msg-actions,
  body.printing .msg-edit, body.printing #chat-greeting, body.printing .jump-latest, body.printing .copy-code { display: none !important; }
  body.printing { background: #fff !important; color: #111 !important; }
  body.printing .shell, body.printing .main, body.printing main { display: block !important; padding: 0 !important; }
  body.printing .msg { break-inside: avoid; animation: none !important; }
  body.printing .msg.user { background: #eef6fb !important; }
}

/* ---------- Memory ---------- */
.memory-section { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.memory-head { display: flex; align-items: baseline; justify-content: space-between; }
.memory-head h3 { margin: 0; font: 600 1rem var(--sans); }
.memory-head span { font-size: .78rem; color: var(--muted); }
.memory-section > p { margin: 6px 0 8px; font-size: .85rem; color: var(--muted); }
.memory-list { list-style: none; margin: 8px 0; padding: 0; max-height: 200px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.memory-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 6px 6px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); font-size: .88rem; }
.memory-remove { width: 26px; height: 26px; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: none !important; color: var(--muted); font-size: 1.1rem; cursor: pointer; }
.memory-remove:hover { color: var(--danger); background: var(--accent-soft) !important; }
.memory-empty { font-size: .85rem; color: var(--muted); padding: 6px 2px; }
.memory-add-row { display: flex; gap: 8px; }
.memory-add-row input { flex: 1; min-width: 0; padding: 8px 12px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface); color: var(--text); font: .9rem var(--sans); }
.link-danger { margin-top: 8px; padding: 0 !important; border: 0 !important; background: none !important; color: var(--danger); font: .82rem var(--sans); text-decoration: underline; cursor: pointer; }
.memory-note { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; padding: 6px 10px; border-radius: 10px; background: var(--accent-soft);
  color: var(--accent); font: .8rem var(--sans); width: fit-content; max-width: 100%; }
.memory-note::before { content: "✦"; }
.memory-note button { padding: 0 !important; border: 0 !important; background: none !important; color: inherit; font: 600 .8rem var(--sans); text-decoration: underline; cursor: pointer; }

/* ---------- Owner dashboard ---------- */
:root { --bar: #0b7ea6; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bar: #1f95c2; } }
:root[data-theme="dark"] { --bar: #1f95c2; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.admin-page { max-width: 1040px; margin: 0 auto; padding: 0 16px 48px; }
.admin-main { padding-top: 16px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 8px 0 20px; }
.tile { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); }
.tile span { font-size: .78rem; color: var(--muted); font-weight: 600; }
.tile strong { font: 600 1.7rem/1.2 var(--sans); font-variant-numeric: tabular-nums; color: var(--text); }
.tile small { font-size: .75rem; color: var(--muted); }
.panel-card { margin-bottom: 18px; padding: 16px 18px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); }
.card-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.card-head h2 { margin: 0; font: 600 1rem var(--sans); }
.card-head .share-meta { margin: 0; }
.bar-chart { position: relative; }
.bar-chart svg { display: block; width: 100%; height: auto; }
.bar-chart .bar { fill: var(--bar); }
.bar-chart .hit { fill: transparent; cursor: default; outline: none; }
.bar-chart .hit:hover, .bar-chart .hit:focus-visible { fill: color-mix(in srgb, var(--bar) 10%, transparent); }
.bar-chart .grid { stroke: var(--border); stroke-width: 1; }
.bar-chart .axis { fill: var(--muted); font: 11px var(--sans); }
.chart-tip { position: absolute; top: 0; transform: translateX(-50%); padding: 4px 8px; border-radius: 8px; background: var(--text); color: var(--bg); font: 500 .75rem var(--sans); white-space: nowrap; pointer-events: none; }
.table-view summary { margin-top: 8px; font-size: .82rem; color: var(--accent); cursor: pointer; }
.panel-card table { width: 100%; border-collapse: collapse; font: .88rem/1.5 var(--sans); }
.panel-card th, .panel-card td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; font-variant-numeric: tabular-nums; }
.panel-card th { color: var(--muted); font-weight: 600; font-size: .78rem; }
.panel-card td.warn { font-weight: 600; }
.panel-card .note { margin: 10px 0 0; }
.setup-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px; }
.setup-list li { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; font-size: .85rem; }
.setup-list .state { font-weight: 600; }
.setup-list li.on .state { color: var(--accent); }
.setup-list li.off .state { color: var(--muted); }
.setup-list small { grid-column: 2; color: var(--muted); }
/* Sidebar items that are only sometimes shown (Install app, Owner dashboard): respect [hidden]. */
.accounts-open[hidden] { display: none !important; }
a.accounts-open { text-decoration: none; box-sizing: border-box; }

/* ---------- Accessibility ---------- */
.skip-link { position: absolute; left: 12px; top: -48px; z-index: 100; padding: 8px 14px; border-radius: 10px; background: var(--accent); color: var(--accent-text); font-weight: 600; text-decoration: none; transition: top .15s; }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Red for destructive actions and errors, readable on both themes. */
:root { --danger: #b3261e; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --danger: #ff9a8f; } }
:root[data-theme="dark"] { --danger: #ff9a8f; }

/* Model pickers on the tools. */
.tool-model { max-width: min(100%, 300px); font-size: .82rem; text-overflow: ellipsis; }
.model-row { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; flex-wrap: wrap; }
.composer-bar:has(.tool-model, .tts-field) { flex-wrap: wrap; }
.tts-pick { max-width: min(100%, 300px); font-size: .82rem; text-overflow: ellipsis; }
.tts-field { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
@media (max-width: 520px) { .composer-bar .tts-field { flex: 1 1 100%; } .tts-field .tts-pick { flex: 1; max-width: none; } }
@media (max-width: 520px) { .composer-bar .tool-model { flex: 1 1 100%; max-width: 100%; } }
td.bad { color: var(--danger); }
.card-head #check-models { margin-left: auto; }

/* Images and videos made in the chat. */
.msg.assistant:empty[data-status]::after { content: attr(data-status); font: .85rem/1.4 var(--sans); color: var(--muted); margin-left: 34px; }
.msg.created > p { margin: 0 0 4px; }
.created-photos { max-width: min(420px, 100%); }
.created-photos.count-1 .msg-photo { max-height: none; aspect-ratio: auto; }
.created-photos.count-1 .msg-photo img { height: auto; }
.created-video { display: block; width: 100%; max-width: min(420px, 100%); margin-top: 8px; border-radius: 12px; background: var(--surface-2); }
.created-meta { margin-top: 8px; font-size: .8rem; color: var(--muted); max-width: min(420px, 100%); }
.created-meta summary { cursor: pointer; }
.created-meta p { margin: 4px 0 0; }
.msg.created .msg-actions { margin-top: 6px; }
.composer-below { display: flex; flex-wrap: wrap; gap: 8px; }
/* Live voice: the AI model picker takes the full width on phones. */
.voice-controls label:has(#voice-live) { flex: 1 1 100%; flex-direction: column; gap: 4px; min-width: 0; }
#voice-live { width: 100%; max-width: 320px; min-width: 0; text-overflow: ellipsis; }

/* ======================================================================================
   Modern refresh: softer depth, glass surfaces, clearer hierarchy, calmer motion.
   ====================================================================================== */
:root {
  --radius-sm: 10px; --radius: 14px; --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgb(10 60 90 / .05), 0 2px 8px rgb(10 60 90 / .05);
  --shadow: 0 1px 2px rgb(10 60 90 / .05), 0 8px 28px rgb(10 60 90 / .08);
  --shadow-lg: 0 2px 6px rgb(10 60 90 / .06), 0 24px 60px rgb(10 60 90 / .14);
  --glass: color-mix(in srgb, var(--surface) 78%, transparent);
  --ring: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
  --grad: linear-gradient(135deg, var(--accent), var(--accent-2));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --shadow-sm: 0 1px 2px rgb(0 0 0 / .3), 0 2px 8px rgb(0 0 0 / .25);
    --shadow-lg: 0 2px 6px rgb(0 0 0 / .35), 0 24px 60px rgb(0 0 0 / .45);
  }
}
:root[data-theme="dark"] {
  --shadow-sm: 0 1px 2px rgb(0 0 0 / .3), 0 2px 8px rgb(0 0 0 / .25);
  --shadow-lg: 0 2px 6px rgb(0 0 0 / .35), 0 24px 60px rgb(0 0 0 / .45);
}
body { font-feature-settings: "cv11", "ss01"; letter-spacing: -.005em; }
h1, h2, h3, .brand, .panel-head h2, .greeting h2 { font-family: var(--serif); letter-spacing: -.02em; }

/* Sidebar: quieter, with a clear active item and a tidy footer. */
#sidebar { gap: 10px; padding: 14px 10px; background: color-mix(in srgb, var(--sidebar) 88%, transparent); backdrop-filter: blur(14px); }
.brand { font-weight: 700; font-size: 1.15rem; }
.new-chat { border-radius: var(--radius); border-color: var(--border); box-shadow: var(--shadow-sm); font-weight: 600; }
.new-chat:hover { border-color: var(--accent); box-shadow: var(--shadow-sm), var(--ring); transform: translateY(-1px); }
nav button { border-radius: var(--radius-sm); padding: 9px 12px; font-weight: 500; }
nav button:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
nav button[aria-current="page"] { background: var(--surface); box-shadow: var(--shadow-sm); color: var(--text); }
nav button[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 3px; background: var(--grad); }
.sidebar-foot { display: flex; flex-direction: column; gap: 8px; margin: auto 4px 0; padding: 12px; border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 55%, transparent); border: 1px solid var(--border); font-size: .76rem; }
.sidebar-foot p { margin: 0; line-height: 1.45; }
.badge { font-size: .72rem; padding: 2px 9px; background: var(--surface); }

/* Mobile top bar and the composer: frosted glass. */
.topbar { backdrop-filter: blur(16px) saturate(1.4); background: var(--glass); border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.composer { border-radius: var(--radius-lg); border-color: var(--border); background: var(--glass); backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: var(--shadow-lg); padding: 14px 14px 10px; }
.composer:focus-within { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); box-shadow: var(--shadow-lg), var(--ring); }
.composer-bar .hint { opacity: .75; }
button.send { border-radius: 12px; box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 35%, transparent); }
button.primary { border-radius: 12px; transition: transform .15s var(--ease-out), box-shadow .2s, filter .2s; }
button.primary:hover { filter: brightness(1.06); box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 30%, transparent); }
button:active:not(:disabled) { transform: scale(.97); }
:where(body:not(.coder-page)) button:not(.primary):not(.new-chat):not([data-tab]):not(.icon-button):not(.open):not(.delete) { border-color: var(--border); border-radius: 12px; transition: border-color .15s, background-color .15s, transform .15s; }
:where(body:not(.coder-page)) button:not(.primary):not(.new-chat):not([data-tab]):not(.icon-button):not(.open):not(.delete):hover { border-color: var(--border-strong); background: var(--surface-2); }
.voice-button { border-radius: 12px !important; }
.web-toggle.on { background: var(--accent-soft) !important; border-color: color-mix(in srgb, var(--accent) 40%, var(--border)) !important; color: var(--accent); }

/* The chat model picker: a clear pill with a chip icon. */
.composer-below { margin: 10px 4px 0; }
.composer-below .model-pick { padding-left: 34px; border-radius: 99px; background-color: var(--glass); border-color: var(--border); box-shadow: var(--shadow-sm);
  font-weight: 500; color: var(--text);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a7399' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9z'/%3E%3C/svg%3E"),
    linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: 12px 50%, calc(100% - 15px) 55%, calc(100% - 10px) 55%; background-size: 15px 15px, 5px 5px, 5px 5px; }
.composer-below .model-pick:hover { border-color: var(--border-strong); }

/* Greeting: a gradient headline and starter cards. */
.greeting h2 { font-weight: 700; font-size: clamp(1.8rem, 3.4vw, 2.5rem);
  background: linear-gradient(120deg, var(--text) 30%, var(--accent) 70%, var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.suggestions { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; width: min(640px, 100%); margin-top: 10px; }
.suggestion { display: flex; align-items: center; gap: 10px; padding: 12px 14px !important; border-radius: var(--radius) !important; text-align: left;
  background: var(--glass) !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow-sm); font-size: .92rem; font-weight: 500;
  transition: transform .2s var(--ease-out), box-shadow .2s, border-color .2s !important; }
.suggestion::before { content: ""; flex: none; width: 28px; height: 28px; border-radius: 9px; background: var(--accent-soft)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a7399' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9z'/%3E%3C/svg%3E") center / 16px no-repeat; }
.suggestion:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)) !important; }
@media (max-width: 520px) { .suggestions { grid-template-columns: 1fr 1fr; } .suggestion { font-size: .84rem; padding: 10px !important; } .suggestion::before { display: none; } }

/* Messages: readable sans replies, a soft gradient on your own. */
.msg.assistant { font: 1.02rem/1.72 var(--sans); }
.msg.user { background: linear-gradient(135deg, var(--user), color-mix(in srgb, var(--user) 70%, var(--accent-soft))); border: 1px solid color-mix(in srgb, var(--accent) 12%, transparent);
  border-radius: 20px 20px 6px 20px; box-shadow: var(--shadow-sm); }
.msg.assistant h1, .msg.assistant h2, .msg.assistant h3 { font-family: var(--serif); letter-spacing: -.015em; }
.msg.assistant pre, .code-block { border-radius: var(--radius) !important; }
.msg-actions .msg-action { border-radius: 9px !important; }
.result { font-family: var(--sans); border-radius: var(--radius-lg); }

/* Explore: lifted cards with colored icon tiles. */
.explore-card { position: relative; border-radius: var(--radius-lg) !important; border-color: var(--border) !important; box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease-out), box-shadow .25s, border-color .25s !important; overflow: hidden; }
.explore-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)) !important; }
.explore-card::after { content: "→"; position: absolute; top: 18px; right: 18px; color: var(--muted); opacity: 0; transform: translateX(-4px); transition: .25s var(--ease-out); }
.explore-card:hover::after { opacity: 1; transform: none; color: var(--accent); }
.explore-card strong { font-family: var(--serif); font-size: 1.02rem; }
.explore-icon { border-radius: 12px !important; background: var(--grad) !important; color: #fff !important; box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 30%, transparent); }
.explore-card[data-open="stt"] .explore-icon, .explore-card[data-open="tts"] .explore-icon { background: linear-gradient(135deg, #14b8a6, #0ea5e9) !important; }
.explore-card[data-open="image"] .explore-icon, .explore-card[data-open="video"] .explore-icon { background: linear-gradient(135deg, #8b5cf6, #ec4899) !important; }
.explore-card[data-open="music"] .explore-icon { background: linear-gradient(135deg, #f59e0b, #ef4444) !important; }
.explore-card[data-open="model3d"] .explore-icon { background: linear-gradient(135deg, #10b981, #3b82f6) !important; }
.panel-head h2 { font-weight: 700; }
.record-card { border-radius: var(--radius-lg); border-color: var(--border); box-shadow: var(--shadow-lg); }
.pill { border-radius: 99px; transition: border-color .15s; }
.pill:hover { border-color: var(--border-strong); }

@media (prefers-reduced-motion: reduce) {
  .suggestion, .explore-card, .new-chat, button { transition: none !important; }
  .suggestion:hover, .explore-card:hover, .new-chat:hover { transform: none; }
}

/* ======================================================================================
   Live voice: full screen, over a living galaxy (galaxy.js).
   ====================================================================================== */
.voice-dialog { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: max(18px, env(safe-area-inset-top)) 20px max(22px, env(safe-area-inset-bottom));
  border: 0; border-radius: 0; background: #02030a; color: #eef4ff; overflow: hidden; box-shadow: none; }
.voice-dialog::backdrop { background: #02030a; }
.voice-dialog[open] { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 12px; animation: galaxy-in .6s var(--ease-out) both; }
@keyframes galaxy-in { from { opacity: 0; transform: scale(1.04); } }
.voice-galaxy { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.voice-dialog > :not(.voice-galaxy) { position: relative; z-index: 1; }
.voice-top { position: absolute !important; top: max(14px, env(safe-area-inset-top)); left: 18px; right: 18px; display: flex; align-items: center; justify-content: space-between; }
.voice-title { font: 600 1.05rem var(--serif); letter-spacing: .01em; color: rgb(238 244 255 / .85); }
.voice-close { display: grid; place-items: center; width: 42px; height: 42px; padding: 0 !important; border-radius: 50% !important;
  border: 1px solid rgb(255 255 255 / .16) !important; background: rgb(255 255 255 / .08) !important; color: #fff; backdrop-filter: blur(10px); }
.voice-close:hover { background: rgb(255 255 255 / .16) !important; }
/* The orb becomes an invisible hit area over the galaxy's core (tap to interrupt or continue). */
#voice-orb { position: absolute !important; top: 34%; left: 50%; width: min(46vw, 240px); height: min(46vw, 240px); margin: 0;
  transform: translate(-50%, -50%) !important; background: transparent !important; box-shadow: none !important; animation: none !important; filter: none !important; opacity: 1 !important; }
#voice-orb span { display: none; }
#voice-orb:focus-visible { outline: 2px solid rgb(255 255 255 / .6); outline-offset: 6px; }
/* The galaxy shows the voice now; the old sound line and the static note aren't needed. */
.voice-dialog .voice-wave, .voice-dialog .voice-note { display: none; }
.voice-status { font: 600 1.15rem var(--serif); color: #fff; text-shadow: 0 2px 20px rgb(0 0 0 / .6); }
.voice-heard { font-size: 1.1rem; color: rgb(238 244 255 / .92); max-width: 60ch; text-shadow: 0 2px 16px rgb(0 0 0 / .7); }
.voice-reply { font: 1.02rem/1.6 var(--sans); color: rgb(220 232 255 / .78); max-width: 60ch; max-height: 18vh; text-shadow: 0 2px 16px rgb(0 0 0 / .7); }
.voice-hint { color: rgb(200 215 245 / .7); }
.voice-controls { padding: 10px 14px; border-radius: 20px; background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .1); backdrop-filter: blur(14px);
  width: min(420px, 100%); }
.voice-controls label { color: rgb(220 232 255 / .75); }
.voice-dialog .pill { background-color: rgb(255 255 255 / .08); border-color: rgb(255 255 255 / .18); color: #fff; }
.voice-dialog .pill option { color: #111; }
.voice-note { color: rgb(200 215 245 / .6); }
#voice-end { background: rgb(255 255 255 / .1) !important; border: 1px solid rgb(255 255 255 / .2) !important; color: #fff !important; backdrop-filter: blur(10px);
  padding: 12px 26px; border-radius: 99px; }
#voice-end:hover { background: rgb(255 80 100 / .3) !important; border-color: rgb(255 120 140 / .5) !important; }

/* Live voice: the model is chosen by tapping a card (the dropdown stays for screen readers). */
.voice-model-title { margin: 0; font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: rgb(220 232 255 / .7); }
.voice-model-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; width: 100%; max-height: 30vh; overflow-y: auto; padding: 2px; }
.voice-model-card { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 10px 12px !important; text-align: left;
  border-radius: 14px !important; border: 1px solid rgb(255 255 255 / .14) !important; background: rgb(255 255 255 / .05) !important; color: #eef4ff;
  transition: background-color .2s, border-color .2s, transform .15s; }
.voice-model-card strong { font-size: .88rem; font-weight: 600; }
.voice-model-card span { font-size: .74rem; line-height: 1.35; color: rgb(210 225 250 / .7); }
.voice-model-card:hover { background: rgb(255 255 255 / .1) !important; }
.voice-model-card[aria-checked="true"] { border-color: rgb(125 211 252 / .8) !important; background: rgb(56 189 248 / .18) !important;
  box-shadow: 0 0 0 3px rgb(56 189 248 / .18), 0 0 24px rgb(56 189 248 / .25); }
.voice-model-select { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.voice-controls { width: min(560px, 100%) !important; }
@media (max-width: 520px) { .voice-model-cards { grid-template-columns: 1fr 1fr; max-height: 26vh; } .voice-model-card span { display: none; } }
.voice-engine-label { font: 500 .78rem var(--sans); color: rgb(160 215 255 / .8); margin-left: 4px; }
.voice-dialog .voice-controls { width: auto !important; padding: 8px 16px; }

/* Pasted / attached photos in the composer: a thumbnail, a quiet spinner while it gets ready. */
.attach-thumb { position: relative; width: 64px; height: 64px; border-radius: 12px; overflow: hidden; flex: none;
  border: 1px solid var(--border); background: var(--surface-2); animation: pop .25s var(--ease-out) both; }
.attach-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .2s, filter .2s; }
.attach-thumb.reading img { opacity: .7; filter: brightness(.7) saturate(.8); }
.attach-thumb.error { border-color: color-mix(in srgb, var(--accent) 60%, var(--border)); }
/* A dark disc behind the spinner so it shows on any photo, light or dark, and any theme. */
.attach-thumb .spinner { position: absolute; inset: 0; margin: auto; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(0,0,0,.55); box-shadow: 0 0 0 3px rgba(0,0,0,.25);
  border: 3px solid rgba(255,255,255,.3); border-top-color: var(--load-a, #7c9cff); border-right-color: var(--load-a, #7c9cff);
  animation: thumb-spin .8s linear infinite; }
.attach-thumb button.remove { position: absolute; top: 3px; right: 3px; display: grid; place-items: center; width: 20px; height: 20px;
  padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: rgba(0,0,0,.6) !important;
  color: #fff; font-size: .9rem; line-height: 1; opacity: 0; transition: opacity .15s; }
.attach-thumb:hover button.remove, .attach-thumb:focus-within button.remove { opacity: 1; }
@media (hover: none) { .attach-thumb button.remove { opacity: 1; } }
@keyframes thumb-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .attach-thumb .spinner { animation-duration: 2.4s; } }

/* Chat background: Virgo's galaxy with Angkor Wat in stars. Dark theme: faint space behind the chat;
   light theme: the same scene inverted, so it reads as a soft shadow on the light page. */
.chat-galaxy { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none;
  opacity: .26; filter: invert(1) hue-rotate(180deg) saturate(.9) contrast(1.25); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .chat-galaxy { opacity: .8; filter: brightness(1.35) contrast(1.1); } }
:root[data-theme="dark"] .chat-galaxy { opacity: .8; filter: brightness(1.35) contrast(1.1); }
/* Stars fade behind the reading column (greeting, messages) so text stays clear; bright at the sides. */
.chat-galaxy { -webkit-mask-image: radial-gradient(ellipse min(46vw, 440px) 62% at 50% 40%, rgb(0 0 0 / .2), rgb(0 0 0 / .5) 60%, #000 100%);
  mask-image: radial-gradient(ellipse min(46vw, 440px) 62% at 50% 40%, rgb(0 0 0 / .2), rgb(0 0 0 / .5) 60%, #000 100%); }
@media (max-width: 700px) { .chat-galaxy { -webkit-mask-image: radial-gradient(ellipse 85% 45% at 50% 40%, rgb(0 0 0 / .18), rgb(0 0 0 / .5) 70%, #000 100%);
  mask-image: radial-gradient(ellipse 85% 45% at 50% 40%, rgb(0 0 0 / .18), rgb(0 0 0 / .5) 70%, #000 100%); } }

/* Claude-style composer: one rounded box; quiet icon buttons; the model name inline beside send. */
.chat-dock { background: none; isolation: isolate; }
.composer { border-radius: 22px; padding: 12px 12px 10px 14px; gap: 10px; }
.composer textarea { font-size: 1rem; padding: 4px 4px 2px; }
.composer-bar { gap: 4px; }
.composer-bar .voice-button, .composer-bar .web-toggle { border: 1px solid transparent !important; background: transparent !important; color: var(--muted); }
.composer-bar .voice-button:hover, .composer-bar .web-toggle:hover { background: var(--user) !important; color: var(--text); }
.composer-bar .voice-button .icon { color: currentColor; }
.composer-bar .web-toggle { width: auto; gap: 6px; padding: 0 10px !important; font-size: .88rem; font-weight: 500; display: inline-flex; }
.composer-bar .web-toggle.on { color: var(--accent); background: var(--accent-soft) !important; border-color: transparent !important; }
.composer-bar #attach { width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 10px; }
.model-inline { appearance: none; -webkit-appearance: none; flex: 0 1 auto; min-width: 0; max-width: 220px; height: 34px;
  padding: 0 24px 0 10px; border: 0; border-radius: 10px; background: transparent; color: var(--muted);
  font: 500 .88rem var(--sans); cursor: pointer; field-sizing: content; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 13px) 54%, calc(100% - 8px) 54%; background-size: 5px 5px; background-repeat: no-repeat; }
.model-inline:hover, .model-inline:focus-visible { color: var(--text); background-color: var(--user); outline: 0; }
.model-inline option { color: var(--text); background: var(--surface); }
.composer-bar button.send, .composer-bar button.stop { width: 34px; height: 34px; padding: 0 !important; border-radius: 10px !important; display: grid; place-items: center; box-shadow: none; }
.composer-below:not(:has(select:not([hidden]))) { display: none; }
@media (max-width: 520px) {
  .composer-bar .web-toggle span { display: none; }
  .composer-bar .web-toggle { width: 34px; padding: 0 !important; justify-content: center; }
  .model-inline { max-width: 130px; }
}

/* Claude-style messages: your turn is a soft, plain bubble on the right; Virgo's answer is open text
   (no bubble) in a readable serif, with quiet action icons beneath that brighten on hover. */
#chat-log { gap: 26px; }
.msg.user { max-width: min(75%, 560px); padding: 10px 16px; border: 0; border-radius: 18px;
  background: color-mix(in srgb, var(--user) 88%, transparent); backdrop-filter: blur(10px);
  font: .98rem/1.6 var(--sans); }
.msg.assistant { font: 1.08rem/1.72 "Source Serif 4", Georgia, "Noto Sans Khmer", serif; padding: 0 2px; }
.msg.assistant h1, .msg.assistant h2, .msg.assistant h3, .msg.assistant .md-heading { font-family: "Source Serif 4", Georgia, serif; font-weight: 600; }
.msg.assistant:lang(km) { font-family: var(--sans); line-height: 1.95; }
.msg.assistant strong { font-weight: 650; }
.msg.assistant ol, .msg.assistant ul { padding-left: 1.5em; }
.msg.assistant li { margin: .35em 0; padding-left: .2em; }
.msg.assistant li::marker { color: var(--muted); }
.msg.assistant code, .msg.assistant pre, .msg.assistant table { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.msg.assistant table { font-family: var(--sans); }
.msg-actions { margin: -14px 0 0; opacity: 0; transition: opacity .2s; }
#chat-log > .msg-actions:last-child, #chat-log .msg-actions:hover, .msg.assistant:hover + .msg-actions, .msg-actions:focus-within { opacity: 1; }
@media (hover: none) { .msg-actions { opacity: .8; } }
.msg-action { color: var(--muted); }
.msg-action:hover { color: var(--text) !important; background: var(--user) !important; }
/* Dark theme: a faint halo keeps the answer crisp over the stars. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .msg.assistant { text-shadow: 0 0 12px rgb(2 3 10 / .9); } }
:root[data-theme="dark"] .msg.assistant { text-shadow: 0 0 12px rgb(2 3 10 / .9); }

/* Claude-style sidebar: flat and quiet. "New chat" is a row with a round accent +, items are plain
   rows with a soft fill when active, "Recents" is a small muted label, and the footer has no box. */
#sidebar { gap: 2px; padding: 12px 8px; background: color-mix(in srgb, var(--sidebar) 92%, transparent); border-right: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.brand { padding: 4px 10px 14px; font-size: 1.08rem; }
.new-chat { gap: 10px; margin-bottom: 6px; padding: 7px 10px; border: 0; border-radius: 10px; background: transparent;
  box-shadow: none !important; font-weight: 500; color: var(--text); transform: none !important; }
.new-chat .icon { width: 24px; height: 24px; padding: 4px; border-radius: 50%; background: var(--accent); color: var(--accent-text); }
.new-chat:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
.new-chat:hover .icon { transform: rotate(90deg) scale(1.05); }
nav { gap: 1px; }
nav button, .tools-menu summary, #sidebar .accounts-open { padding: 7px 10px !important; border: 0 !important; border-radius: 10px !important;
  font-size: .92rem; font-weight: 450; background: transparent !important; box-shadow: none !important; color: var(--text); }
nav button .icon, .tools-menu summary .icon, #sidebar .accounts-open .icon { width: 18px; height: 18px; color: var(--muted); }
nav button:hover, .tools-menu summary:hover, #sidebar .accounts-open:hover { background: color-mix(in srgb, var(--text) 6%, transparent) !important; }
nav button[aria-current="page"] { background: color-mix(in srgb, var(--text) 9%, transparent) !important; font-weight: 550; }
nav button[aria-current="page"] .icon { color: var(--text); }
nav button::before, nav button[aria-current="page"]::before { display: none; }
nav button:hover .icon { transform: none; }
.nav-label { margin: 18px 10px 6px; font-size: .74rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); }
.recent-item { border-radius: 10px; }
.recent-item:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
.recent-item.active { background: color-mix(in srgb, var(--text) 9%, transparent); box-shadow: none; }
.recent-item button.open { padding: 6px 10px; font-size: .88rem; }
.recent-search { margin: 0 2px 6px; border-radius: 10px; }
.sidebar-foot { gap: 6px; margin: auto 0 0; padding: 10px 10px 4px; border: 0; border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  border-radius: 0; background: transparent; font-size: .74rem; }
.sidebar-foot .badge { align-self: flex-start; border: 0; background: color-mix(in srgb, var(--text) 6%, transparent); }
#privacy-note { opacity: .8; }

/* Sidebar footer: language and theme on one row. */
.prefs-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.prefs-row .language { margin: 0; gap: 6px; min-width: 0; }
.prefs-row .language .icon { width: 16px; height: 16px; flex: none; }
.prefs-row .language select { max-width: 120px; }
.theme-toggle { display: inline-flex; padding: 2px; gap: 2px; border-radius: 99px; background: color-mix(in srgb, var(--text) 7%, transparent); flex: none; }
.theme-toggle button { display: grid; place-items: center; width: 28px; height: 26px; padding: 0; border: 0; border-radius: 99px;
  background: transparent !important; color: var(--muted); box-shadow: none !important; }
.theme-toggle button .icon { width: 15px; height: 15px; }
.theme-toggle button:hover { color: var(--text); }
.theme-toggle button[aria-checked="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }

/* Long user messages: wrap long words/paths, and fold after ~12 lines with "Show more". */
.msg.user { overflow-wrap: anywhere; word-break: break-word; }
.msg.user .msg-text.collapsed { max-height: 12.5em; overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 65%, transparent); mask-image: linear-gradient(#000 65%, transparent); }
.msg.user .msg-more { display: block; margin: 4px 0 0 auto; padding: 2px 10px !important; border: 0 !important; border-radius: 99px !important;
  background: color-mix(in srgb, var(--text) 8%, transparent) !important; color: var(--muted); font: 500 .8rem var(--sans); cursor: pointer; }
.msg.user .msg-more:hover { color: var(--text); }

/* ---------- Reading comfort in a conversation ---------- */
/* Once a chat has messages, the galaxy steps back so the text is easy to read (it stays bright on the
   welcome screen). */
.chat-galaxy { transition: opacity .6s var(--ease-out, ease); }
body:has(#chat-greeting[hidden]) .chat-galaxy { opacity: .12; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body:has(#chat-greeting[hidden]) .chat-galaxy { opacity: .22; } }
:root[data-theme="dark"] body:has(#chat-greeting[hidden]) .chat-galaxy { opacity: .22; }
/* Messages fade and blur away under the message box instead of showing through it. */
.chat-dock { z-index: 3; }
.chat-dock::before { content: ""; position: absolute; inset: -28px 0 -80px; z-index: -1; pointer-events: none;
  background: linear-gradient(transparent, color-mix(in srgb, var(--bg) 85%, transparent) 28px, var(--bg));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  -webkit-mask-image: linear-gradient(transparent, #000 28px), linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(transparent, #000 28px), linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent);
  mask-composite: intersect; }
.composer { background: var(--surface); }
/* Share / Export: scrolled text blurs out behind them. */
.chat-toolbar { top: 0; margin: -16px 0 0; padding: 10px 0 18px; isolation: isolate; }
.chat-toolbar::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
@media (max-width: 899px) {
  .topbar { background: color-mix(in srgb, var(--bg) 92%, transparent) !important; }
  .chat-toolbar { top: 59px; }
}

/* Sidebar footer: no technical notes (GPU/CPU, where chat runs); account notes stay. */
#device, #privacy-note:empty { display: none; }

/* Answer actions: a small label above each icon on hover or keyboard focus. */
.msg-action { position: relative; }
.msg-action[data-tip]::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; translate: -50% 4px;
  padding: 4px 8px; border-radius: 6px; background: var(--text); color: var(--bg); font: 500 .75rem/1.2 var(--sans); white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .15s, translate .15s; z-index: 5; }
.msg-action[data-tip]:hover::after, .msg-action[data-tip]:focus-visible::after { opacity: 1; translate: -50% 0; }
@media (hover: none) { .msg-action[data-tip]::after { display: none; } }

/* A failed answer: a clear notice under the message box (the message is back in the box to resend). */
.status.error:not(:empty) { display: flex; align-items: center; justify-content: center; gap: 8px; width: fit-content; max-width: 100%;
  margin: 10px auto 0; padding: 8px 14px; border-radius: 12px; font-size: .88rem; line-height: 1.45; text-align: left;
  color: #9a2a1f; background: #fdecea; border: 1px solid #f5c2bc; }
.status.error:not(:empty)::before { content: "!"; flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  background: #d9483b; color: #fff; font: 700 .72rem/1 var(--sans); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .status.error:not(:empty) { color: #ffb4ab; background: #3a1a17; border-color: #6b2b25; } }
:root[data-theme="dark"] .status.error:not(:empty) { color: #ffb4ab; background: #3a1a17; border-color: #6b2b25; }
/* Sub-points (nested lists) sit close under their item. */
.msg.assistant li > ul, .msg.assistant li > ol { margin: .2em 0 .3em; }
.status.error .retry { margin-left: 4px; padding: 3px 12px !important; border: 1px solid currentColor !important; border-radius: 99px !important;
  background: transparent !important; color: inherit; font: 600 .82rem var(--sans); cursor: pointer; white-space: nowrap; }
.status.error .retry:hover { background: color-mix(in srgb, currentColor 12%, transparent) !important; }
/* Task lists from answers: a box instead of a bullet. */
.msg.assistant li.task { list-style: none; margin-left: -1.2em; }
.msg.assistant li.task .task-box { color: var(--accent); }
.msg.assistant li.task.done { color: var(--muted); }
/* "Good morning, Soknang KHNA" on its own line, then the question. */
.greeting h2 .greet-ask { display: inline-block; }
.greeting h2:has(.greet-name) .greet-ask { margin-top: .25em; font-size: .62em; font-weight: 600; }

/* Editing a message in place. */
.msg.user.editing { width: min(640px, 100%); max-width: 100%; padding: 10px 12px; }
.msg.user.editing .edit-input { display: block; width: 100%; min-height: 2.6em; max-height: 50vh; resize: none; border: 0; outline: 0; padding: 2px 4px;
  background: transparent; color: inherit; font: inherit; line-height: 1.6; }
.msg.user.editing .edit-bar { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.msg.user.editing .edit-note { margin-right: auto; font-size: .78rem; color: var(--muted); }
.msg.user.editing .edit-bar button { padding: 6px 14px !important; border-radius: 99px !important; font: 600 .85rem var(--sans); cursor: pointer; }
.msg.user.editing .edit-cancel { background: transparent !important; border: 1px solid var(--border) !important; color: var(--text); }
.msg.user.editing .edit-send { background: var(--accent) !important; border: 1px solid var(--accent) !important; color: var(--accent-text, #fff); }

/* ---------- Easy-to-read answers ----------
   One clean sans face for every answer (English and Khmer look the same, no serif/sans mix), a little
   more space between paragraphs, and colour that guides the eye: headings in deep ocean blue, bold in
   the strongest ink, list numbers and bullets in the accent, inline code tinted. */
:root {
  --read-heading: #0b4f6c; --read-strong: #0a2330; --read-code: #0a5f80; --read-code-bg: #e6f3f9; --read-marker: #0a7399;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --read-heading: #8fd6f0; --read-strong: #ffffff; --read-code: #9adcf3; --read-code-bg: #16323f; --read-marker: #4cc2e6; }
}
:root[data-theme="dark"] { --read-heading: #8fd6f0; --read-strong: #ffffff; --read-code: #9adcf3; --read-code-bg: #16323f; --read-marker: #4cc2e6; }

.msg.assistant { font: 1.04rem/1.75 var(--sans); letter-spacing: 0; color: var(--text); }
.msg.assistant:lang(km), .msg.assistant:has(:lang(km)) { line-height: 1.95; }
.msg.assistant p { margin: 0 0 .85em; }
.msg.assistant strong { color: var(--read-strong); font-weight: 650; }
.msg.assistant .md-heading, .msg.assistant h1, .msg.assistant h2, .msg.assistant h3 { font-family: var(--sans); color: var(--read-heading); font-weight: 700; margin: 1.1em 0 .45em; line-height: 1.4; }
.msg.assistant > .md-heading:first-child { margin-top: 0; }
.msg.assistant .md-heading.h1 { font-size: 1.28em; }
.msg.assistant .md-heading.h2 { font-size: 1.14em; padding-bottom: .25em; border-bottom: 1px solid var(--border); }
.msg.assistant .md-heading.h3, .msg.assistant .md-heading.h4 { font-size: 1.04em; }
.msg.assistant li::marker { color: var(--read-marker); font-weight: 600; }
.msg.assistant ul ul > li::marker { color: color-mix(in srgb, var(--read-marker) 60%, var(--muted)); }
.msg.assistant :not(pre) > code { color: var(--read-code); background: var(--read-code-bg); border-radius: 6px; padding: .12em .4em; font-size: .9em; }
.msg.assistant blockquote { color: var(--text); background: color-mix(in srgb, var(--accent-soft) 55%, transparent); border-left-color: var(--read-marker);
  border-radius: 0 10px 10px 0; padding: 8px 14px; }
.msg.assistant th { color: var(--read-heading); }
.msg.assistant a { color: var(--accent); }
/* Dark theme reading: brighter text with no glow (a glow blurs letters), and the galaxy almost gone
   behind a conversation, so answers read like a clean dark page. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .msg.assistant { color: #eef7fb; text-shadow: none; }
  :root:not([data-theme="light"]) body:has(#chat-greeting[hidden]) .chat-galaxy { opacity: .08; }
  :root:not([data-theme="light"]) .msg.user { color: #eef7fb; background: #1d3644; }
}
:root[data-theme="dark"] .msg.assistant { color: #eef7fb; text-shadow: none; }
:root[data-theme="dark"] body:has(#chat-greeting[hidden]) .chat-galaxy { opacity: .08; }
:root[data-theme="dark"] .msg.user { color: #eef7fb; background: #1d3644; }
/* Recent chats grouped by day. */
.recent-group { margin: 12px 12px 2px; font-size: .72rem; font-weight: 600; letter-spacing: .03em; color: var(--muted); list-style: none; }
.recent-group:first-child { margin-top: 2px; }
/* Search chats: always there once there's a chat, with a magnifier. */
.recent-search { width: calc(100% - 4px); padding-left: 32px !important;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2351697a' 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") no-repeat 10px center / 15px; }

/* ============================ Virgo Coder (owner page) ============================ */
.coder-page { height: 100dvh; overflow: hidden; background: var(--bg); color: var(--text); }
.coder-shell { display: flex; height: 100dvh; }

/* Sidebar: new chat, Chat/Code switch, recent chats. */
.coder-sidebar { width: 264px; flex: none; display: flex; flex-direction: column; gap: 4px; padding: 14px 10px;
  background: color-mix(in srgb, var(--sidebar) 92%, transparent); border-right: 1px solid var(--border); }
.coder-sidebar .brand { display: flex; align-items: center; gap: 8px; padding: 4px 8px 10px; font: 700 1.05rem var(--serif); color: var(--text); text-decoration: none; }
.coder-sidebar .brand small { font: 500 .7rem var(--sans); color: var(--muted); }
.coder-newchat { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--text); font: 500 .92rem var(--sans); cursor: pointer; text-align: left; }
.coder-newchat:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.coder-newchat .icon { width: 22px; height: 22px; padding: 3px; border-radius: 50%; background: var(--accent); color: var(--accent-text); }
.coder-switch { display: flex; flex-direction: row; margin: 4px 6px 8px; padding: 3px; gap: 2px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); }
.coder-switch a, .coder-switch span { flex: 1; text-align: center; padding: 5px 0; border-radius: 8px; font: 600 .84rem var(--sans); color: var(--muted); text-decoration: none; cursor: pointer; }
.coder-switch a:hover { color: var(--text); }
.coder-switch .active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.coder-recent-label { margin: 10px 10px 4px; font: 600 .72rem var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.coder-recent { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 1px; scrollbar-width: thin; }
.coder-recent-item { display: flex; align-items: center; border-radius: 8px; }
.coder-recent-item:hover, .coder-recent-item.active { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.coder-recent-item.active { box-shadow: inset 2px 0 0 var(--accent); }
.coder-recent-item .open { flex: 1; min-width: 0; padding: 7px 10px; border: 0; background: none; text-align: left; color: var(--text); font: 500 .88rem var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.coder-recent-item .del { width: 28px; flex: none; border: 0; background: none; color: var(--muted); font-size: 1.1rem; cursor: pointer; opacity: 0; }
.coder-recent-item:hover .del { opacity: 1; }
.coder-recent-item .del:hover { color: var(--accent); }
.coder-recent-empty { margin: 2px 10px; font-size: .82rem; color: var(--muted); }
.coder-connections { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border); }
.coder-connections ul { list-style: none; margin: 0; padding: 0 0 2px; display: flex; flex-direction: column; gap: 2px; }
.coder-connections li { display: flex; align-items: center; gap: 8px; padding: 5px 10px; font-size: .82rem; color: var(--muted); min-width: 0; }
.coder-connections li b { font-weight: 600; color: var(--text); flex: none; }
.coder-connections li span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coder-connections .dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: #2ea043; box-shadow: 0 0 0 3px color-mix(in srgb, #2ea043 22%, transparent); }
.coder-account { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 10px 10px 2px; border-top: 1px solid var(--border); font: 500 .84rem var(--sans); color: var(--muted); }
.coder-account .icon { width: 16px; height: 16px; flex: none; }
.coder-title { margin: 0; min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 .92rem var(--sans); color: var(--text); }
.coder-head-right { flex: none; }
#coder-body { position: relative; }
.coder-jump { position: absolute; left: 50%; bottom: 128px; z-index: 5; transform: translateX(-50%); display: grid; place-items: center; width: 36px; height: 36px; padding: 0 !important; border-radius: 50% !important; border: 1px solid var(--border) !important; background: var(--surface) !important; color: var(--text); box-shadow: var(--shadow); animation: rise .2s var(--ease-out) both; }
.coder-jump[hidden] { display: none; }
.coder-jump .icon { width: 18px; height: 18px; }
.coder-jump:hover { border-color: var(--accent) !important; color: var(--accent); }

.coder-main-wrap { flex: 1; display: flex; flex-direction: column; min-width: 0; background: radial-gradient(900px 400px at 70% -10%, var(--glow), transparent 70%), var(--bg); }
.coder-head { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); backdrop-filter: blur(8px); }
.coder-head-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.coder-field { display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; height: 36px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.coder-field:focus-within { border-color: var(--accent); box-shadow: var(--ring); }
.coder-field .icon { width: 16px; height: 16px; color: var(--muted); flex: none; }
.coder-field select { border: 0; background: none; color: var(--text); font: 500 .85rem var(--sans); max-width: 30vw; cursor: pointer; outline: none; }
.coder-icon-btn { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); cursor: pointer; }
.coder-icon-btn .icon { width: 18px; height: 18px; }
.coder-icon-btn:hover { border-color: var(--accent); }
/* Desktop: the menu button folds the sidebar away for a full-width workspace (like Claude). */
body.coder-collapsed .coder-sidebar { display: none; }

.coder-main { flex: 1; display: flex; flex-direction: column; align-items: center; min-height: 0; }
.coder-connect { margin: auto; color: var(--muted); }
.coder-connect.error { color: #c23b2b; max-width: 440px; text-align: center; padding: 0 20px; }
/* Like Chat: the conversation scrolls across the full width (scrollbar at the screen edge), while the
   text sits in a centered, readable column whose side padding grows with the screen. */
#coder-body { flex: 1; width: 100%; display: flex; flex-direction: column; min-height: 0; --col: 800px;
  --gutter: max(16px, calc((100% - var(--col)) / 2)); }
.coder-log > * { flex-shrink: 0; } /* or overflowing items (the task panel) collapse to a line */
.coder-log { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 22px; padding: 28px var(--gutter) 28px; scrollbar-width: thin; scroll-behavior: smooth; }
.coder-composer { margin: 0 var(--gutter) 16px; }
@media (max-width: 600px) {
  #coder-body { --gutter: 12px; }
  .coder-suggestions { grid-template-columns: 1fr; }
  .coder-msg.assistant { padding-left: 0; }
  .coder-msg.assistant::before { display: none; }
  .coder-msg.user { max-width: 88%; }
  .coder-task, .coder-changes { margin-left: 0; width: 100%; }
  .coder-actions.assistant { margin-left: -6px; }
  .coder-act span { display: none; }
}

.coder-intro { margin: auto; max-width: 520px; text-align: center; }
.coder-intro-mark { width: 64px; height: 64px; margin: 0 auto 18px; display: grid; place-items: center; border-radius: 18px; background: var(--accent-soft); box-shadow: var(--shadow-sm); }
.coder-intro h2 { margin: 0 0 8px; font: 600 1.6rem/1.2 var(--serif); letter-spacing: -.01em; }
.coder-intro p { margin: 0 auto; max-width: 440px; color: var(--muted); line-height: 1.6; }
.coder-suggestions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 24px; text-align: left; }
.coder-chip { padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); font: 500 .9rem var(--sans); cursor: pointer; transition: border-color .15s, transform .15s, box-shadow .15s; }
.coder-chip:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); transform: translateY(-1px); }

.coder-msg { line-height: 1.7; animation: rise .35s var(--ease-out) both; overflow-wrap: anywhere; }
.coder-msg.user { align-self: flex-end; max-width: 80%; padding: 10px 16px; border-radius: 18px; background: var(--user); white-space: pre-wrap; }
.coder-msg.assistant { position: relative; font: 1.02rem/1.75 var(--sans); }
.coder-msg.assistant::before { display: none !important; }
.coder-msg.assistant p { margin: 0 0 .75em; }
.coder-msg.assistant > :last-child { margin-bottom: 0; }
.coder-msg.assistant li { margin: .25em 0; }
.coder-msg.assistant hr { border: 0; border-top: 1px solid var(--border); margin: 1.1em 0; }
.coder-msg.assistant table { border-collapse: collapse; margin: .6em 0; font-size: .92em; display: block; overflow-x: auto; }
.coder-msg.assistant th, .coder-msg.assistant td { border: 1px solid var(--border); padding: 6px 10px; text-align: left; }
.coder-msg.assistant::before { content: ""; position: absolute; left: 0; top: 2px; width: 28px; height: 28px; border-radius: 8px; background: var(--grad);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.2 6.8H21l-5.5 4 2.1 6.8L12 15.6 6.4 19.6l2.1-6.8L3 8.8h6.8z'/%3E%3C/svg%3E") center/18px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.2 6.8H21l-5.5 4 2.1 6.8L12 15.6 6.4 19.6l2.1-6.8L3 8.8h6.8z'/%3E%3C/svg%3E") center/18px no-repeat; }
.coder-msg.assistant .md-heading { color: var(--read-heading, var(--accent)); font-weight: 700; margin: 1em 0 .4em; }
.coder-msg.assistant strong { color: var(--read-strong, var(--text)); font-weight: 650; }
.coder-msg.assistant :not(pre) > code { color: var(--read-code, var(--accent)); background: var(--read-code-bg, var(--surface-2)); border-radius: 6px; padding: .12em .4em; font-size: .9em; }
.coder-msg.assistant pre { padding: 13px 15px; border-radius: 12px; overflow-x: auto; background: var(--surface-2); border: 1px solid var(--border); font-size: .88em; }
.coder-msg.assistant ul, .coder-msg.assistant ol { padding-left: 1.4em; }

/* Message actions (copy, edit, retry): quiet under each message, clearer on hover — like Chat. */
.coder-actions { display: flex; gap: 2px; margin-top: -14px; opacity: .55; transition: opacity .15s; }
.coder-actions.user { align-self: flex-end; }
.coder-actions.assistant { align-self: flex-start; margin-left: -8px; }
.coder-actions:hover, .coder-msg:hover + .coder-actions, .coder-actions:focus-within { opacity: 1; }
.coder-act { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px !important; border: 0 !important; border-radius: 8px !important; background: none !important; box-shadow: none !important; color: var(--muted); font: 500 .76rem var(--sans); cursor: pointer; }
.coder-act:hover { background: var(--surface-2) !important; color: var(--text); }
.coder-act.done { color: var(--accent); }
.coder-act .icon { width: 14px; height: 14px; }
.coder-msg.user.editing { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: none) { .coder-actions { opacity: .85; } }

/* The agent's work as a timeline (like Claude Code): live header, one row per step, open a row for its result. */
.coder-trace { align-self: stretch; animation: rise .3s var(--ease-out) both; }
.coder-trace-head { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 4px 8px 4px 2px !important; border: 0 !important; border-radius: 8px !important; background: none !important; color: var(--muted); font: 500 .88rem var(--sans); cursor: pointer; }
.coder-trace-head:hover { color: var(--text); }
.coder-trace.working .coder-trace-head { color: var(--text); }
.coder-trace-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coder-trace-meta { flex: none; color: var(--muted); font-variant-numeric: tabular-nums; }
.coder-trace-meta:not(:empty)::before { content: "· "; }
.coder-trace.working .coder-trace-label { background: linear-gradient(90deg, var(--text) 0%, var(--muted) 50%, var(--text) 100%) 0 0 / 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: coder-shimmer 2s linear infinite; }
@keyframes coder-shimmer { to { background-position: -200% 0; } }
.coder-trace .coder-task-chevron { width: 15px; height: 15px; flex: none; transition: transform .2s; }
.coder-trace.open .coder-task-chevron { transform: rotate(180deg); }
.coder-trace-steps { display: none; margin: 4px 0 0 9px; padding-left: 14px; border-left: 2px solid var(--border); }
.coder-trace.open .coder-trace-steps { display: block; }
.coder-trace .coder-step { display: block; padding: 0; }
.coder-step-line { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 4px 6px; margin-left: -6px; border-radius: 7px; list-style: none; cursor: default; }
.coder-step-line::-webkit-details-marker { display: none; }
.coder-step.has-out > .coder-step-line { cursor: pointer; }
.coder-step.has-out > .coder-step-line:hover { background: var(--surface-2); }
.coder-step.has-out > .coder-step-line::after { content: ""; margin-left: auto; flex: none; width: 7px; height: 7px; border: solid var(--muted); border-width: 0 1.6px 1.6px 0; transform: rotate(-45deg); transition: transform .15s; }
.coder-step.has-out[open] > .coder-step-line::after { transform: rotate(45deg); }
.coder-step-out { margin: 2px 0 8px; padding: 9px 12px; max-height: 260px; overflow: auto; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2); color: var(--muted); font: .76rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Task panel (like Claude): a header with a spinner while working, steps inside, collapses when done. */
.coder-task { align-self: flex-start; margin-left: 40px; width: min(560px, calc(100% - 40px)); animation: rise .3s var(--ease-out) both; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); overflow: hidden; }
.coder-task-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px !important; border: 0 !important; border-radius: 0 !important; background: var(--surface-2); color: var(--text); font: 600 .86rem var(--sans); cursor: pointer; text-align: left; }
.coder-task-label { flex: 1; }
.coder-task-chevron { width: 16px; height: 16px; color: var(--muted); transition: transform .2s; }
.coder-task.open .coder-task-chevron { transform: rotate(180deg); }
.coder-task-spin { width: 14px; height: 14px; flex: none; border: 2px solid color-mix(in srgb, var(--accent) 30%, transparent); border-top-color: var(--accent); border-radius: 50%; animation: coder-spin .7s linear infinite; }
@keyframes coder-spin { to { transform: rotate(360deg); } }
.coder-task-steps { display: none; flex-direction: column; gap: 3px; padding: 10px 14px; }
.coder-task.open .coder-task-steps { display: flex; }
.coder-step { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 3px 0; font: .84rem/1.45 var(--sans); color: var(--muted); }
.coder-step .icon { width: 15px; height: 15px; flex: none; color: var(--accent); opacity: .8; }
.coder-step span { flex: none; }
.coder-step code { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: .8rem ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text); background: var(--surface-2); padding: 1px 6px; border-radius: 5px; }
.coder-step.now { color: var(--text); }
.coder-step.now .icon { animation: coder-pulse 1.1s ease-in-out infinite; }
@keyframes coder-pulse { 50% { opacity: .3; } }
.coder-task-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.coder-error { color: #c23b2b; }
.coder-stopped { color: var(--muted); font-style: italic; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .coder-error, :root:not([data-theme="light"]) .coder-connect.error { color: #ffb4ab; } }
:root[data-theme="dark"] .coder-error, :root[data-theme="dark"] .coder-connect.error { color: #ffb4ab; }
.coder-dots { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: typing 1.2s ease-in-out infinite; }

.coder-composer { position: relative; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); transition: border-color .15s, box-shadow .15s; }
.coder-composer:focus-within { border-color: var(--accent); box-shadow: var(--ring); }
#coder-input { display: block; width: 100%; resize: none; border: 0; outline: 0; padding: 14px 16px 6px; background: none; color: var(--text); font: 1rem/1.6 var(--sans); }
.coder-composer-bar { display: flex; align-items: center; gap: 8px; padding: 4px 10px 10px 10px; min-width: 0; }
.coder-pickers { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 0 1 auto; }
.coder-pickers .coder-field { height: 30px; padding: 0 8px; gap: 5px; border: 1px solid transparent; border-radius: 8px; background: var(--surface-2); min-width: 0; }
.coder-pickers .coder-field:hover { border-color: var(--border); }
.coder-pickers .coder-field .icon { width: 14px; height: 14px; }
.coder-pickers .coder-field select { max-width: 220px; min-width: 0; font-size: .8rem; text-overflow: ellipsis; }
.coder-new-top { margin-left: auto; }
.coder-hint { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .76rem; color: var(--muted); }
.coder-composer-bar .coder-send, .coder-composer-bar .coder-stop { margin-left: auto; display: grid; place-items: center; width: 36px; height: 36px; padding: 0 !important; border-radius: 12px !important; cursor: pointer; transition: background .15s, color .15s, transform .15s; }
.coder-composer-bar .coder-send { border: 0 !important; background: var(--surface-2) !important; color: var(--muted) !important; }
.coder-composer-bar .coder-send.ready { background: var(--accent) !important; color: var(--accent-text) !important; }
.coder-composer-bar .coder-send.ready:hover { background: var(--accent-hover) !important; transform: translateY(-1px); }
.coder-composer-bar .coder-send[hidden], .coder-composer-bar .coder-stop[hidden] { display: none; }
.coder-composer-bar .coder-stop { border: 1px solid var(--border) !important; background: var(--surface-2) !important; color: var(--text) !important; }
.coder-composer-bar .coder-stop:hover { border-color: var(--accent) !important; color: var(--accent) !important; }
.coder-send .icon, .coder-stop .icon { width: 18px; height: 18px; }

/* Proposed changes and diff. */
.coder-changes { align-self: stretch; margin-left: 0; min-width: 0; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--surface); box-shadow: var(--shadow-sm); }
.coder-changes-head { padding: 11px 15px; font: 600 .9rem var(--sans); background: var(--surface-2); border-bottom: 1px solid var(--border); }
.coder-file { border-bottom: 1px solid var(--border); }
.coder-file:last-of-type { border-bottom: 0; }
.coder-file > summary { padding: 9px 15px; cursor: pointer; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.coder-file > summary::-webkit-details-marker { display: none; }
.coder-file > summary code { font: .85rem ui-monospace, Menlo, monospace; color: var(--accent); }
.coder-file > summary span { color: var(--muted); font-size: .85rem; }
.coder-diff { margin: 0; padding: 8px 0; overflow-x: auto; font: .8rem/1.55 ui-monospace, Menlo, monospace; background: var(--surface-2); }
.coder-diff > div { padding: 0 15px; white-space: pre; }
.coder-diff .add { background: color-mix(in srgb, #2ea043 20%, transparent); }
.coder-diff .del { background: color-mix(in srgb, #d1242f 18%, transparent); }
.coder-change-actions { display: flex; align-items: center; gap: 12px; padding: 12px 15px; background: var(--surface-2); border-top: 1px solid var(--border); flex-wrap: wrap; }
.coder-change-actions .coder-pr-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px !important; border: 0 !important; border-radius: 10px !important; background: var(--accent) !important; color: var(--accent-text) !important; font: 600 .88rem var(--sans); cursor: pointer; box-shadow: var(--shadow-sm); }
.coder-change-actions .coder-pr-btn:hover { background: var(--accent-hover) !important; }
.coder-pr-btn:disabled { opacity: .55; cursor: default; }
.coder-pr-status { font-size: .88rem; }
.coder-pr-status a { color: var(--accent); }

/* Phones: the sidebar slides in. */
.coder-scrim { display: none; }
@media (max-width: 820px) {
  .coder-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 30; transform: translateX(-100%); transition: transform .2s; box-shadow: var(--shadow-lg); }
  body.coder-menu-open .coder-sidebar { transform: none; }
  body.coder-menu-open .coder-scrim { display: block; position: fixed; inset: 0; z-index: 20; background: rgb(0 0 0 / .35); }
  body.coder-collapsed .coder-sidebar { display: flex; }
  .coder-head { padding: 8px 10px; gap: 6px; }
  .coder-jump { bottom: 116px; }
  .coder-pickers { flex: 1 1 auto; }
  .coder-pickers .coder-field { flex: 0 1 auto; }
  .coder-pickers .coder-field select { max-width: 34vw; }
}

/* Reasoning models: a collapsed "Thinking" section before the answer. */
.coder-think { margin: 0 0 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); overflow: hidden; }
.coder-think > summary { padding: 8px 13px; cursor: pointer; font: 600 .82rem var(--sans); color: var(--muted); list-style: none; }
.coder-think > summary::-webkit-details-marker { display: none; }
.coder-think > summary::before { content: "💭 "; }
.coder-think-text { padding: 2px 13px 11px; white-space: pre-wrap; font: .85rem/1.6 var(--sans); color: var(--muted); max-height: 260px; overflow-y: auto; }

/* Pull/merge request: title field, Open and Merge buttons in the chat; the composer's auto toggle. */
.coder-pr-title { flex: 1 1 220px; min-width: 0; height: 36px; padding: 0 11px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--text); font: 500 .88rem var(--sans); }
.coder-pr-title:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.coder-change-actions .coder-merge-btn { background: #2ea043 !important; color: #fff !important; }
.coder-change-actions .coder-merge-btn:hover { background: #2c974b !important; }
.coder-pr-status code { font-size: .85em; }
.coder-auto { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 9px; border: 1px solid transparent; border-radius: 8px; background: var(--surface-2); color: var(--muted); font: 500 .78rem var(--sans); white-space: nowrap; cursor: pointer; flex: none; }
.coder-auto input { width: 14px; height: 14px; margin: 0; accent-color: #2ea043; cursor: pointer; }
.coder-auto.on { color: var(--text); border-color: color-mix(in srgb, #2ea043 55%, transparent); background: color-mix(in srgb, #2ea043 12%, var(--surface-2)); }
@media (max-width: 600px) { .coder-auto span { display: none; } .coder-auto { padding: 0 8px; } }

/* Virgo Coder workspace refresh: restrained surfaces, clear hierarchy, and a focused editor-like chat. */
.coder-page { background: var(--bg); }
.coder-sidebar { width: 272px; gap: 6px; padding: 18px 12px 12px; background: var(--sidebar); }
.coder-sidebar .brand { padding: 4px 10px 14px; font-family: var(--sans); letter-spacing: -.025em; }
.coder-sidebar .brand img { width: 27px; height: 27px; }
.coder-newchat { border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-sm); }
.coder-newchat:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: var(--surface); }
.coder-switch { margin-top: 8px; }
.coder-recent-label { margin: 16px 10px 7px; }
.coder-recent-item { margin: 1px 2px; }
.coder-recent-item .open { padding: 9px 10px; }
.coder-main-wrap { background: radial-gradient(760px 360px at 50% -16%, color-mix(in srgb, var(--glow) 75%, transparent), transparent 75%), var(--bg); }
.coder-head { min-height: 58px; padding: 10px 20px; background: color-mix(in srgb, var(--bg) 82%, transparent); }
.coder-title { font-size: .9rem; letter-spacing: -.01em; }
.coder-icon-btn { border-color: transparent; background: transparent; }
.coder-icon-btn:hover { border-color: var(--border); background: var(--surface); }
#coder-body { --col: 860px; }
.coder-log { gap: 26px; padding-top: clamp(34px, 8vh, 88px); padding-bottom: 32px; }
.coder-intro { max-width: 620px; }
.coder-intro-mark { width: 54px; height: 54px; margin-bottom: 21px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.coder-intro-mark img { width: 32px; height: 32px; }
.coder-intro h2 { font: 600 clamp(1.75rem, 4vw, 2.35rem)/1.16 var(--sans); letter-spacing: -.045em; }
.coder-intro p { max-width: 510px; font-size: .96rem; }
.coder-suggestions { gap: 9px; margin: 27px auto 0; max-width: 560px; }
.coder-chip { min-height: 54px; border-radius: 13px; background: color-mix(in srgb, var(--surface) 82%, transparent); font-size: .86rem; }
.coder-chip:hover { transform: translateY(-2px); }
.coder-msg.user { max-width: 86%; padding: 11px 16px; border: 1px solid color-mix(in srgb, var(--border) 78%, transparent); border-radius: 18px 18px 5px 18px; background: var(--surface-2); }
.coder-msg.assistant { font-size: 1rem; line-height: 1.78; }
.coder-trace-head { padding: 6px 9px 6px 3px !important; }
.coder-trace-steps { border-color: color-mix(in srgb, var(--accent) 26%, var(--border)); }
.coder-step-out { background: color-mix(in srgb, var(--surface-2) 78%, var(--bg)); }
.coder-composer { margin-bottom: max(18px, env(safe-area-inset-bottom)); border-radius: 20px; box-shadow: 0 14px 40px color-mix(in srgb, #000 9%, transparent); }
#coder-input { padding: 17px 18px 8px; }
.coder-composer-bar { padding: 6px 10px 10px 12px; }
.coder-pickers .coder-field { background: transparent; border-color: var(--border); }
.coder-pickers .coder-field:hover { background: var(--surface-2); }
.coder-composer-bar .coder-send { border-radius: 12px !important; }
.coder-changes { border-radius: 16px; }
@media (max-width: 820px) {
  .coder-sidebar { width: min(292px, 86vw); }
  .coder-head { min-height: 52px; padding: 8px 12px; }
  .coder-log { padding-top: 34px; }
}
@media (max-width: 600px) {
  .coder-log { gap: 20px; padding-bottom: 22px; }
  .coder-composer { margin-left: 10px; margin-right: 10px; border-radius: 17px; }
  #coder-input { padding: 14px 14px 6px; }
  .coder-pickers { gap: 4px; }
  .coder-pickers .coder-field { padding: 0 6px; }
  .coder-pickers .coder-field select { max-width: 30vw; }
  .coder-suggestions { grid-template-columns: 1fr 1fr; }
  .coder-chip { padding: 10px; min-height: 48px; }
}
.coder-recent-item .open { display: flex; align-items: center; gap: 8px; }
.coder-recent-running { flex: none; padding: 2px 6px; border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border)); border-radius: 999px; color: var(--accent); font: 600 .62rem var(--sans); letter-spacing: .01em; }
.coder-live-status { display: inline-flex; align-items: center; gap: 7px; flex: none; color: var(--muted); font: 500 .72rem var(--sans); }
.coder-live-status i { width: 7px; height: 7px; border-radius: 50%; background: #2ea043; box-shadow: 0 0 0 3px color-mix(in srgb, #2ea043 15%, transparent); }
.coder-schedules { margin-top: 8px; }
.coder-schedule-open { flex: none; padding: 6px 9px !important; border: 1px solid var(--border) !important; border-radius: 9px !important; background: transparent !important; color: var(--muted); font: 600 .76rem var(--sans); transition: color .18s, border-color .18s, background .18s; }
.coder-schedule-open:hover { color: var(--accent); border-color: var(--accent) !important; background: var(--accent-soft) !important; }
.coder-schedule-editor { display: flex; flex-wrap: wrap; align-items: end; gap: 9px; margin: 0 12px 12px; padding: 12px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface-2); animation: rise .25s var(--ease-out) both; }
.coder-schedule-editor[hidden] { display: none; }
.coder-schedule-editor label { display: flex; flex-direction: column; gap: 4px; color: var(--muted); font: 600 .72rem var(--sans); }
.coder-schedule-editor input, .coder-schedule-editor select { min-height: 34px; max-width: 100%; padding: 5px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font: 500 .8rem var(--sans); }
.coder-schedule-zone { align-self: center; color: var(--muted); font: .7rem var(--sans); }
.coder-schedule-save { padding: 7px 11px !important; border: 0 !important; border-radius: 9px !important; background: var(--accent) !important; color: var(--accent-text) !important; font: 600 .78rem var(--sans); }
.coder-schedule-close { padding: 6px 9px !important; border: 0 !important; background: transparent !important; color: var(--muted); font: 500 .78rem var(--sans); }
#coder-schedule-list { display: flex; flex-direction: column; gap: 5px; margin: 0; padding: 0; list-style: none; }
.coder-schedule-item { padding: 9px 10px; border: 1px solid var(--border); border-radius: 10px; background: color-mix(in srgb, var(--surface) 78%, transparent); animation: rise .25s var(--ease-out) both; }
.coder-schedule-title { display: block; overflow: hidden; color: var(--text); font: 500 .78rem/1.4 var(--sans); text-overflow: ellipsis; }
.coder-schedule-meta { display: block; margin-top: 4px; color: var(--muted); font: .68rem/1.4 var(--sans); }
.coder-schedule-actions { display: flex; gap: 6px; margin-top: 6px; }
.coder-schedule-actions button { padding: 3px 7px !important; border: 0 !important; background: transparent !important; color: var(--accent); font: 600 .68rem var(--sans); }
.coder-schedule-actions button:hover { text-decoration: underline; }
.coder-schedule-item.error .coder-schedule-meta { color: #c23b2b; }
.coder-schedule-open[hidden] { display: none; }
@media (max-width: 600px) { .coder-schedule-editor { margin: 0 8px 10px; } .coder-schedule-zone { display: none; } .coder-schedule-editor input { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .coder-schedule-item, .coder-schedule-editor { animation: none; } }
.coder-trace-head { gap: 10px; }
.coder-trace-model { flex: none; max-width: min(36vw, 220px); overflow: hidden; padding: 3px 8px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--muted); font: 600 .68rem/1.3 var(--sans); text-overflow: ellipsis; white-space: nowrap; transition: color .2s, border-color .2s, background .2s; }
.coder-trace-model:not(:empty) { animation: pop .28s var(--ease-out) both; }
.coder-trace-model.switched { border-color: color-mix(in srgb, #2ea043 38%, var(--border)); background: color-mix(in srgb, #2ea043 9%, var(--surface)); color: color-mix(in srgb, #2ea043 80%, var(--text)); }
.coder-trace.working .coder-trace-model { color: var(--accent); }
@media (max-width: 600px) { .coder-trace-model { max-width: 30vw; font-size: .62rem; } }
@media (max-width: 600px) { .coder-live-status { font-size: 0; gap: 0; } .coder-live-status i { width: 8px; height: 8px; } }
.coder-sidebar { background: color-mix(in srgb, var(--sidebar) 94%, var(--accent) 6%); }
.coder-head { position: relative; z-index: 2; }
.coder-title:empty::after { content: "New coding session"; color: var(--muted); font-weight: 500; }
.coder-suggestions .coder-chip { display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; }
.coder-suggestions .coder-chip::after { content: "↗"; flex: none; color: var(--muted); font-size: 1rem; transition: transform .15s, color .15s; }
.coder-suggestions .coder-chip:hover::after { transform: translate(2px, -2px); color: var(--accent); }
.coder-newchat:focus-visible, .coder-icon-btn:focus-visible, .coder-chip:focus-visible, .coder-recent-item button:focus-visible, .coder-composer button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .coder-chip, .coder-suggestions .coder-chip::after, .coder-task-spin { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* ---------- Claude Code-style polish: session list, diff card, compact pickers ---------- */
/* Recent chats: day groups, title + "repo · 2h ago", proper ellipsis (the button is a flex box, so the
   text lives in its own block that can truncate). */
.coder-recent-group { margin: 14px 10px 4px; font: 600 .7rem var(--sans); letter-spacing: .03em; color: var(--muted); list-style: none; }
.coder-recent-group:first-child { margin-top: 2px; }
.coder-recent-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.coder-recent-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font: 500 .86rem/1.3 var(--sans); }
.coder-recent-meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font: 400 .72rem/1.3 var(--sans); }
.coder-recent-item .open { padding: 7px 10px; }
.coder-recent-item.active .coder-recent-title { font-weight: 600; }

/* Diff card: one-line header with totals, files with +/− counts, numbered lines. */
.coder-changes-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; font: 600 .88rem var(--sans); }
.coder-changes-note { margin-left: auto; color: var(--muted); font: 500 .78rem var(--sans); }
.coder-stat { font: 600 .78rem ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; }
.coder-stat .plus { color: #2ea043; }
.coder-stat .minus { color: #d1242f; }
:root[data-theme="dark"] .coder-stat .plus { color: #56d364; }
:root[data-theme="dark"] .coder-stat .minus { color: #ff7b72; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .coder-stat .plus { color: #56d364; } :root:not([data-theme="light"]) .coder-stat .minus { color: #ff7b72; } }
.coder-file > summary { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; min-width: 0; padding: 8px 14px; list-style: none; }
.coder-file > summary:hover { background: var(--surface-2); }
.coder-file-chevron { width: 14px; height: 14px; flex: none; color: var(--muted); transition: transform .15s; }
.coder-file[open] .coder-file-chevron { transform: rotate(90deg); }
.coder-file > summary code { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 .82rem ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text); }
.coder-file-new { flex: none; padding: 1px 6px; border-radius: 999px; background: color-mix(in srgb, #2ea043 16%, transparent); color: #2ea043; font: 600 .66rem var(--sans); }
.coder-file-sum { min-width: 0; margin-left: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font: 400 .8rem var(--sans); }
.coder-diff { padding: 4px 0; font: .78rem/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
.coder-diff > div { display: flex; padding: 0; white-space: pre; min-width: max-content; }
.coder-diff .ln { flex: none; width: 3.2em; padding-right: .6em; text-align: right; color: var(--muted); opacity: .7; user-select: none; }
.coder-diff .sg { flex: none; width: 1.4em; text-align: center; user-select: none; }
.coder-diff .tx { padding-right: 14px; }
.coder-diff .add .sg { color: #2ea043; }
.coder-diff .del .sg { color: #d1242f; }

/* Pickers size to their text instead of a fixed wide chip. */
.coder-pickers .coder-field select { field-sizing: content; max-width: 220px; }

/* A calmer empty state. */
.coder-intro h2 { font: 600 clamp(1.4rem, 3vw, 1.85rem)/1.2 var(--sans); letter-spacing: -.03em; }

@media (max-width: 600px) {
  .coder-file-sum, .coder-changes-note { display: none; }
  .coder-diff .ln { width: 2.6em; }
}

/* Chat uses the exact segmented switch component used by the Coder workspace. */
.chat-workspace-switch{margin:4px 6px 8px}
.chat-workspace-switch a.is-locked{opacity:.48;cursor:not-allowed;pointer-events:none}
.mobile-workspace-switch{display:none}
@media(max-width:899px){
  .sidebar-workspace-switch{display:none}
  .mobile-workspace-switch{display:flex;margin:0 0 0 auto;flex:0 0 auto}
}



/* Phone composer: keep the action row reachable and give the model picker its own full-width row.
   This prevents the model selector/send button from being squeezed off-screen at 320–375px. */
@media (max-width: 520px) {
  .chat-panel { min-height: calc(100dvh - 124px); }
  .chat-dock { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .chat-dock .composer { padding: 10px; border-radius: 15px; }
  .chat-dock .composer-bar { flex-wrap: wrap; align-items: center; gap: 6px; }
  .chat-dock .composer-bar .spacer { display: none; }
  .chat-dock .composer-bar #attach { order: 1; }
  .chat-dock .composer-bar #web-toggle { order: 2; }
  .chat-dock .composer-bar #create-toggle { order: 3; }
  .chat-dock .composer-bar #voice-start { order: 4; margin-left: auto; }
  .chat-dock .composer-bar #chat-form button.send,
  .chat-dock .composer-bar button.send { order: 5; }
  .chat-dock .composer-bar #chat-stop { order: 5; }
  .chat-dock .composer-bar #chat-model {
    order: 6;
    display: block;
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: 34px;
    margin: 2px 0 0;
    padding: 6px 30px 6px 11px;
    border-radius: 9px;
    font-size: .78rem;
  }
  .chat-dock .composer-bar #attach,
  .chat-dock .composer-bar #web-toggle,
  .chat-dock .composer-bar #create-toggle,
  .chat-dock .composer-bar #voice-start,
  .chat-dock .composer-bar button.send,
  .chat-dock .composer-bar button.stop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 34px;
    min-width: 34px;
    height: 34px;
    padding: 0 !important;
  }
  .chat-dock .composer-bar .web-toggle span { display: none; }
  .chat-dock .composer-bar .web-toggle { width: 34px !important; }
}
@media (max-width: 380px) {
  .chat-dock .composer { padding-left: 8px; padding-right: 8px; }
  .chat-dock .composer-bar { gap: 5px; }
  .chat-dock .composer-bar #attach,
  .chat-dock .composer-bar #web-toggle,
  .chat-dock .composer-bar #create-toggle,
  .chat-dock .composer-bar #voice-start,
  .chat-dock .composer-bar button.send,
  .chat-dock .composer-bar button.stop { width: 32px; min-width: 32px; height: 32px; }
  .chat-dock .composer-bar #chat-model { height: 33px; }
}

/* Devices with display cutouts/home indicators: keep navigation and the composer inside safe areas. */
@media (max-width: 899px) {
  #sidebar {
    padding-top: max(16px, env(safe-area-inset-top));
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    padding-left: max(12px, env(safe-area-inset-left));
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .topbar {
    padding-top: max(10px, env(safe-area-inset-top));
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
  .chat-dock {
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
  .recent-search { font-size: 16px; }
}


/* Owner-only Admin entry uses the same calm sidebar action style as Customize. */
a.accounts-open { text-decoration: none; }
a.accounts-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }


/* The active Chat tab already names the workspace; reclaim that title space on phones. */
@media (max-width: 480px) {
  .topbar { gap: 8px; padding-left: 10px; padding-right: 10px; }
  .topbar > #topbar-title { display: none; }
  .topbar .mobile-workspace-switch {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    margin: 0;
    gap: 3px;
  }
  .topbar .mobile-workspace-switch a,
  .topbar .mobile-workspace-switch span {
    min-width: 0;
    padding: 7px 3px;
    font-size: .76rem;
    line-height: 1.2;
    white-space: nowrap;
  }
}

@media (max-width: 600px) {
  .dialog { width: min(560px, calc(100vw - 16px)); padding: 18px 14px; border-radius: 16px; max-height: calc(100dvh - 20px); }
  .dialog-actions { flex-wrap: wrap; gap: 8px; }
  .dialog-actions button { min-height: 44px; }
  .account-form { flex-wrap: wrap; }
  .account-form button { width: 100%; min-height: 44px; }
  .memory-item { padding: 8px 10px; }
  .memory-remove { min-width: 36px; min-height: 36px; display: grid; place-items: center; }
  .panel .composer-bar { flex-wrap: wrap; gap: 8px; }
  .panel .composer-bar select.pill { max-width: 100%; }
}