/* Virgo Chat on the shared workspace style: the same quiet neutrals, light sidebar, slim header and calm
   composer as Coder and Pentest (coder-app.css). Loaded last on index.html; ids and doubled :root keep
   these rules ahead of the older chat layers without !important. */

html:root body.chat-page {
  --c-bg: #fafaf9; --c-side: #f4f4f2; --c-surface: #ffffff; --c-sunken: #f4f4f2; --c-hover: #ececea;
  --c-text: #1c1c1a; --c-muted: #6b6a66; --c-faint: #9a9994; --c-line: #e6e5e1; --c-line-strong: #d6d4cf;
  --c-accent: #0a7399; --c-accent-soft: #e3f1f7; --c-on-accent: #ffffff;
  --c-shadow: 0 1px 2px rgb(0 0 0 / .04), 0 4px 16px rgb(0 0 0 / .05);
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --bg: var(--c-bg); --surface: var(--c-surface); --surface-2: var(--c-sunken); --sidebar: var(--c-side);
  --text: var(--c-text); --muted: var(--c-muted); --border: var(--c-line); --border-strong: var(--c-line-strong);
  --accent: var(--c-accent); --accent-soft: var(--c-accent-soft); --accent-text: var(--c-on-accent); --user: var(--c-sunken);
  --glow: transparent;
  background: var(--c-bg); color: var(--c-text); font-size: 14px; letter-spacing: -.003em;
}
@media (prefers-color-scheme: dark) {
  html:root:not([data-theme="light"]) body.chat-page {
    --c-bg: #1b1b1a; --c-side: #161615; --c-surface: #232321; --c-sunken: #1f1f1d; --c-hover: #2c2c2a;
    --c-text: #ecebe7; --c-muted: #a3a29c; --c-faint: #77766f; --c-line: #2f2f2c; --c-line-strong: #3d3d39;
    --c-accent: #5cc4e8; --c-accent-soft: #163543; --c-on-accent: #06202b;
    --c-shadow: 0 1px 2px rgb(0 0 0 / .3), 0 6px 20px rgb(0 0 0 / .25);
  }
}
html:root[data-theme="dark"] body.chat-page {
  --c-bg: #1b1b1a; --c-side: #161615; --c-surface: #232321; --c-sunken: #1f1f1d; --c-hover: #2c2c2a;
  --c-text: #ecebe7; --c-muted: #a3a29c; --c-faint: #77766f; --c-line: #2f2f2c; --c-line-strong: #3d3d39;
  --c-accent: #5cc4e8; --c-accent-soft: #163543; --c-on-accent: #06202b;
  --c-shadow: 0 1px 2px rgb(0 0 0 / .3), 0 6px 20px rgb(0 0 0 / .25);
}

/* ── Sidebar ────────────────────────────────────────────────────────────────────────────────────── */
body.chat-page #sidebar {
  gap: 4px; padding: 12px 10px; background: var(--c-side); background-image: none; color: var(--c-text);
  border-right: 1px solid var(--c-line); box-shadow: none; backdrop-filter: none;
}
body.chat-page #sidebar .brand { gap: 8px; padding: 4px 8px 10px; color: var(--c-text); font: 600 .95rem var(--sans); }
body.chat-page #sidebar .brand .brand-mark { width: 20px; height: 20px; }
body.chat-page #sidebar .brand small { color: var(--c-faint); font: 500 .7rem var(--sans); }
body.chat-page #sidebar .coder-switch { display: flex; gap: 2px; margin: 0 0 8px; padding: 2px; border: 1px solid var(--c-line); border-radius: 9px; background: var(--c-sunken); box-shadow: none; }
body.chat-page #sidebar .coder-switch :is(a, span) { flex: 1; padding: 4px 0; border: 0; border-radius: 7px; background: none; color: var(--c-muted); font: 500 .76rem var(--sans); text-align: center; text-decoration: none; box-shadow: none; }
body.chat-page #sidebar .coder-switch a:hover { background: var(--c-hover); color: var(--c-text); }
body.chat-page #sidebar .coder-switch a[aria-disabled="true"] { opacity: .45; pointer-events: none; }
body.chat-page #sidebar .coder-switch .active { background: var(--c-surface); color: var(--c-text); box-shadow: 0 1px 2px rgb(0 0 0 / .06); }
body.chat-page #sidebar .new-chat {
  display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 6px 10px; border: 1px solid var(--c-line-strong); border-radius: 9px;
  background: var(--c-surface); background-image: none; color: var(--c-text); font: 500 .82rem var(--sans); box-shadow: none;
}
body.chat-page #sidebar .new-chat:hover { background: var(--c-hover); transform: none; }
body.chat-page #sidebar .new-chat .icon { width: 15px; height: 15px; padding: 0; border-radius: 0; background: none; color: var(--c-text); stroke: currentColor; }
body.chat-page #sidebar nav[aria-label="Virgo AI"] > button, body.chat-page #sidebar .tools-menu > summary, body.chat-page #sidebar .tools-list button, body.chat-page #sidebar .accounts-open {
  display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 6px 10px; border: 0; border-radius: 7px;
  background: none; background-image: none; color: var(--c-muted); font: 500 .8rem var(--sans); box-shadow: none; text-decoration: none;
}
body.chat-page #sidebar nav[aria-label="Virgo AI"] > button:hover, body.chat-page #sidebar .tools-menu > summary:hover, body.chat-page #sidebar .tools-list button:hover, body.chat-page #sidebar .accounts-open:hover { background: var(--c-hover); color: var(--c-text); }
body.chat-page #sidebar nav[aria-label="Virgo AI"] > button[aria-current="page"] { background: var(--c-hover); color: var(--c-text); box-shadow: none; }
body.chat-page #sidebar :is(nav, .accounts-open) .icon { width: 15px; height: 15px; color: currentColor; }
body.chat-page #sidebar .nav-label { margin: 10px 8px 4px; color: var(--c-faint); font: 600 .66rem var(--sans); letter-spacing: .04em; text-transform: none; }
body.chat-page #sidebar .recent-search { width: 100%; margin: 0 0 6px; padding: 6px 10px; border: 1px solid var(--c-line); border-radius: 8px; background: var(--c-surface); color: var(--c-text); font-size: .8rem; }
body.chat-page #sidebar #recent-list { gap: 1px; }
body.chat-page #sidebar #recent-list :is(li, button, a) { border-radius: 7px; color: var(--c-text); font-size: .8rem; background-image: none; box-shadow: none; }
body.chat-page #sidebar #recent-list :is(button, a):hover { background: var(--c-hover); }
body.chat-page #sidebar .recent-empty { margin: 2px 8px; color: var(--c-faint); font-size: .76rem; }
body.chat-page #sidebar .sidebar-foot { gap: 6px; padding-top: 10px; border-top: 1px solid var(--c-line); color: var(--c-faint); }
body.chat-page #sidebar .language select { border: 1px solid var(--c-line); border-radius: 7px; background: var(--c-surface); color: var(--c-text); font-size: .74rem; }
body.chat-page #sidebar .language .icon { color: var(--c-muted); }
body.chat-page #sidebar .theme-toggle { padding: 2px; border: 1px solid var(--c-line); border-radius: 8px; background: var(--c-sunken); box-shadow: none; }
body.chat-page #sidebar .theme-toggle button { border: 0; border-radius: 6px; background: none; color: var(--c-muted); box-shadow: none; }
body.chat-page #sidebar .theme-toggle button[aria-checked="true"] { background: var(--c-surface); color: var(--c-text); box-shadow: 0 1px 2px rgb(0 0 0 / .06); }
body.chat-page #sidebar :is(.badge, #privacy-note) { color: var(--c-faint); font-size: .68rem; }

/* ── Header ─────────────────────────────────────────────────────────────────────────────────────── */
body.chat-page .main { background: var(--c-bg); background-image: none; }
body.chat-page .main > .topbar {
  min-height: 48px; padding: 6px 14px; border-bottom: 1px solid var(--c-line); background: var(--c-bg); background-image: none; box-shadow: none; backdrop-filter: none;
}
body.chat-page #topbar-title { color: var(--c-text); font: 550 .86rem var(--sans); }
body.chat-page .main > .topbar .workspace-header-note { display: none; }
body.chat-page .main > .topbar .icon-button { width: 30px; height: 30px; border: 0; border-radius: 8px; background: none; color: var(--c-muted); box-shadow: none; }
body.chat-page .main > .topbar .icon-button:hover { background: var(--c-hover); color: var(--c-text); }

/* ── Conversation ───────────────────────────────────────────────────────────────────────────────── */
body.chat-page #chat-flow { display: none; }
body.chat-page #chat .chat-toolbar :is(.tool-btn, summary) { border: 0; border-radius: 8px; background: none; color: var(--c-muted); box-shadow: none; }
body.chat-page #chat .chat-toolbar :is(.tool-btn, summary):hover { background: var(--c-hover); color: var(--c-text); }
body.chat-page #chat-greeting { max-width: 600px; }
body.chat-page #chat-greeting .brand-mark { width: 32px; height: 32px; margin-bottom: 12px; filter: none; }
body.chat-page #chat-greeting .workspace-kicker { display: none; }
body.chat-page #chat-greeting #greeting-title, body.chat-page #chat-greeting h2 { margin: 0 0 6px; color: var(--c-text); font: 600 1.6rem/1.25 var(--sans); letter-spacing: -.02em; background: none; -webkit-text-fill-color: currentColor; }
body.chat-page #chat-greeting .workspace-intro-copy { color: var(--c-muted); font-size: .88rem; }
body.chat-page #suggestions { gap: 8px; margin-top: 22px; }
body.chat-page #suggestions :is(button, .chip, a) {
  min-height: 0; padding: 11px 14px; border: 1px solid var(--c-line); border-radius: 10px; background: var(--c-surface); background-image: none;
  color: var(--c-text); font: 500 .82rem/1.35 var(--sans); text-align: left; box-shadow: none; transform: none;
}
body.chat-page #suggestions :is(button, .chip, a):hover { border-color: var(--c-line-strong); background: var(--c-sunken); }
body.chat-page #chat-log .msg.user { padding: 8px 14px; border: 0; border-radius: 14px; background: var(--c-sunken); color: var(--c-text); font-size: .92rem; line-height: 1.55; }
body.chat-page #chat-log .msg.assistant { color: var(--c-text); font: 400 .92rem/1.7 var(--sans); }
body.chat-page #chat-log .msg.assistant :not(pre) > code { padding: .08em .35em; border-radius: 4px; background: var(--c-sunken); font: .86em var(--mono); }
body.chat-page #chat-log .msg.assistant pre { border: 1px solid var(--c-line); border-radius: 9px; background: var(--c-sunken); }
body.chat-page #chat-log .msg.assistant :is(pre, pre code) { font: .8rem/1.6 var(--mono); }
body.chat-page #chat-log .msg-actions .msg-action { border: 0; border-radius: 6px; background: none; color: var(--c-faint); box-shadow: none; }
body.chat-page #chat-log .msg-actions .msg-action:hover { background: var(--c-hover); color: var(--c-text); }

/* ── Composer ───────────────────────────────────────────────────────────────────────────────────── */
body.chat-page #chat-form.composer {
  border: 1px solid var(--c-line-strong); border-radius: 16px; background: var(--c-surface); background-image: none; box-shadow: var(--c-shadow);
}
body.chat-page #chat-form.composer:focus-within { border-color: color-mix(in srgb, var(--c-accent) 55%, var(--c-line-strong)); box-shadow: var(--c-shadow); }
body.chat-page #chat-input { color: var(--c-text); font: .92rem/1.55 var(--sans); }
body.chat-page #chat-input::placeholder { color: var(--c-faint); }
body.chat-page #chat-form .voice-button { width: 30px; height: 30px; border: 0; border-radius: 8px; background: none; color: var(--c-muted); box-shadow: none; }
body.chat-page #chat-form .voice-button:hover { background: var(--c-hover); color: var(--c-text); }
body.chat-page #chat-form .web-toggle[aria-pressed="true"] { background: var(--c-accent-soft); color: var(--c-accent); }
body.chat-page #chat-form .model-pick { height: 30px; border: 0; border-radius: 8px; background-color: transparent; color: var(--c-muted); font-size: .78rem; box-shadow: none; }
body.chat-page #chat-form .model-pick:hover { background-color: var(--c-hover); color: var(--c-text); }
body.chat-page #chat-form .primary.send, body.chat-page #chat-form .primary.stop {
  width: 30px; height: 30px; padding: 0; border: 0; border-radius: 9px; background: var(--c-text); background-image: none; color: var(--c-bg); box-shadow: none;
}
body.chat-page #chat-form .primary.send:disabled { background: var(--c-line-strong); color: var(--c-surface); }
body.chat-page #chat-status { color: var(--c-muted); font-size: .74rem; }

@media (max-width: 600px) {
  body.chat-page #chat-greeting #greeting-title, body.chat-page #chat-greeting h2 { font-size: 1.3rem; }
  body.chat-page #chat-input { font-size: 16px; } /* no iOS zoom on focus */
  body.chat-page .main > .topbar { padding: 4px 8px; }
}

/* Older layers style these by id (and with !important): anchor to the same ids. */
body.chat-page #sidebar #new-chat { border: 1px solid var(--c-line-strong); background: var(--c-surface); color: var(--c-text); }
body.chat-page #sidebar #new-chat:hover { background: var(--c-hover); }
body.chat-page #sidebar #theme button { background: none; color: var(--c-muted); box-shadow: none; }
body.chat-page #sidebar #theme button[aria-checked="true"] { background: var(--c-surface); color: var(--c-text); box-shadow: 0 1px 2px rgb(0 0 0 / .08); }
/* The workspace switch is a compact three-way control, as on Coder and Pentest. */
body.chat-page #sidebar .sidebar-workspace-switch { flex-direction: row; height: auto; }
body.chat-page #sidebar .sidebar-workspace-switch :is(a, span) { display: block; min-height: 0; height: auto; padding: 4px 0; }
body.chat-page #sidebar .sidebar-workspace-switch :is(a, span)::before { content: none; display: none; }
/* platform.css redefines the colour tokens on the sidebar itself (dark navy rail): point them back. */
body.chat-page #sidebar {
  --surface: var(--c-surface); --surface-2: var(--c-sunken); --text: var(--c-text); --muted: var(--c-muted);
  --border: var(--c-line); --border-strong: var(--c-line-strong); --accent: var(--c-accent); --accent-soft: var(--c-accent-soft); --accent-text: var(--c-on-accent);
}
html:root body.chat-page .main > .topbar { background: var(--c-bg); background-image: none; }
html:root body.chat-page .main > .topbar::before, html:root body.chat-page .main > .topbar::after { content: none; }
body.chat-page #chat-form #attach.voice-button { border: 0; background: none; }

/* ── iPhone Home Screen app (standalone, status bar overlays the page): keep the header, sidebar and
   composer clear of the status bar, the notch and the home indicator. ─────────────────────────── */
body.chat-page .main > .topbar {
  padding-top: max(6px, env(safe-area-inset-top));
  padding-left: max(14px, env(safe-area-inset-left));
  padding-right: max(14px, env(safe-area-inset-right));
  min-height: calc(48px + env(safe-area-inset-top));
}
body.chat-page #sidebar { padding-top: max(12px, env(safe-area-inset-top)); padding-bottom: max(12px, env(safe-area-inset-bottom)); }
@media (max-width: 600px) {
  body.chat-page .main > .topbar { padding-top: max(4px, env(safe-area-inset-top)); padding-left: max(8px, env(safe-area-inset-left)); padding-right: max(8px, env(safe-area-inset-right)); min-height: calc(46px + env(safe-area-inset-top)); }
}

/* Greeting: "Good evening, Name" as one quiet line, the question as the heading. */
body.chat-page #greeting-title { line-height: 1.25; }
body.chat-page #greeting-title :is(.greet-hello, .greet-name) { display: inline; color: var(--c-muted); font: 450 .9rem/1.5 var(--sans); letter-spacing: 0; }
body.chat-page #greeting-title br { display: block; content: ""; margin-bottom: 6px; }
body.chat-page #greeting-title .greet-ask { display: block; margin-top: 4px; color: var(--c-text); font: 600 1.6rem/1.25 var(--sans); letter-spacing: -.02em; }
body.chat-page #chat-greeting > p:not(.workspace-intro-copy), body.chat-page #chat-greeting .greeting-time { display: none; }
@media (max-width: 600px) { body.chat-page #greeting-title .greet-ask { font-size: 1.3rem; } }

/* Composer icons stay plain on phones too. */
body.chat-page #chat-form #attach, body.chat-page #chat-form #web-toggle:not([aria-pressed="true"]) { border: 0; background: none; box-shadow: none; }

/* Header: full-contrast title and icons (the phone workspace menu inherited muted text). */
body.chat-page .main > .topbar :is(#topbar-title, .mobile-workspace-menu summary span) { color: var(--c-text); font: 600 .95rem var(--sans); opacity: 1; }
body.chat-page .main > .topbar :is(.icon-button, .mobile-workspace-menu summary) { color: var(--c-text); opacity: 1; }
body.chat-page .main > .topbar .mobile-workspace-menu summary > .icon { color: var(--c-muted); }
html:root body.chat-page .main > .topbar { backdrop-filter: none; -webkit-backdrop-filter: none; }