/* Chat screen. Requires base.css. */

/* The chat's palette (17.10.2026, after Claude's): warm neutrals instead of grey. Light is warm
   paper with a slightly deeper sidebar and a near-white message box; dark is warm charcoal, the
   sidebar a step darker, the message box a step lighter. Colour is reserved for the brand mark,
   the accent on the user's side, and the Research / Audio icons. Same theme selectors as
   base.css, which this file overrides for the chat only. Contrast: text and muted keep 4.5:1. */
:root {
  --bg: #f1efe8;
  --sidebar-bg: #e8e5dc;
  --composer-bg: #fbfaf7;
  --text: #1d1c1a;
  --muted: #65625b;
  --border: rgba(29, 28, 26, 0.09);
  --border-strong: rgba(29, 28, 26, 0.16);
  --input-bg: #fbfaf7;
  --code-bg: #e7e4db;
  --accent: #6d28d9;
  --accent-hover: #5b21b6;
  --error: #b42318;
  --success: #067647;
  --c-research: #0f766e;
  --c-audio: #be185d;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #272624;
    --sidebar-bg: #1f1e1c;
    --composer-bg: #31302d;
    --text: #ecebe6;
    --muted: #a5a199;
    --border: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.15);
    --input-bg: #1f1e1c;
    --code-bg: #1e1d1b;
    --c-research: #5eead4;
    --c-audio: #f9a8d4;
  }
}
:root[data-theme="dark"] {
  --bg: #272624;
  --sidebar-bg: #1f1e1c;
  --composer-bg: #31302d;
  --text: #ecebe6;
  --muted: #a5a199;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.15);
  --input-bg: #1f1e1c;
  --code-bg: #1e1d1b;
  --c-research: #5eead4;
  --c-audio: #f9a8d4;
}

:root {
  /* The user's side (bubbles, attached files, editing, avatar) carries a hint of the accent. */
  --bubble-user: color-mix(in srgb, var(--accent) 9%, var(--composer-bg));
  --font-mono: "Geist Mono", ui-monospace, Consolas, monospace;
  --thread-width: 760px;
  --chat-text: 16px;
}

/* Settings → Text size and Conversation width (js/prefs.js sets these attributes). */
:root[data-width="narrow"] { --thread-width: 660px; }
:root[data-width="wide"] { --thread-width: 940px; }
:root[data-text-size="small"] { --chat-text: 14.5px; }
:root[data-text-size="large"] { --chat-text: 17.5px; }

/* Settings → Chat font. */
:root { --chat-font: var(--font-sans); }
:root[data-chat-font="system"] { --chat-font: system-ui, -apple-system, "Segoe UI", sans-serif; }
:root[data-chat-font="mono"] { --chat-font: var(--font-mono); }

html, body { height: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.app {
  display: grid;
  grid-template-columns: 272px minmax(0, 1fr);
  height: 100dvh;
}

svg { flex: none; }

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.icon-btn:hover { background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text); }
.icon-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Sidebar */

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
  padding: 14px 12px;
  border-right: 1px solid var(--border);
  background: var(--sidebar-bg);
}

/* Top of the sidebar: the logo and name on the left, the hide button on the right (on phones the
   close button takes its place). Under it the search, then "New chat". */
.sidebar-top {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 0 10px;
}
.sidebar-top .brand { flex: 1; min-width: 0; padding-left: 4px; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
}
.brand-mark { display: block; width: 24px; height: 24px; }
.brand-name { font-weight: 600; letter-spacing: -0.02em; }

.sidebar-close { display: none; }

.new-chat {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 6px;
  padding: 6px 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s;
}
.new-chat:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
.new-chat-icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--text) 10%, transparent);
  transition: background-color 0.15s;
}
.new-chat:hover .new-chat-icon { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.new-chat svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.side-nav { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }

.side-link {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.92rem;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s;
}
.side-link:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
.side-link[aria-current] { background: color-mix(in srgb, var(--text) 9%, transparent); font-weight: 500; }
.side-link svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Research is teal, Audio is rose: a little colour in the sidebar, like app icons. */
#research-btn svg, .history-icon { stroke: var(--c-research); }
#audio-btn svg { stroke: var(--c-audio); }

.sidebar-section {
  margin: 22px 12px 6px;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sidebar-empty {
  margin: 0 12px;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.5;
}

.sidebar-foot {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.model-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 6px 12px;
  color: var(--muted);
  font-size: 0.8rem;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
}
.model-status[data-state="online"] .status-dot { background: var(--success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 22%, transparent); }
.model-status[data-state="offline"] .status-dot { background: var(--error); }

#about-branches { white-space: pre-line; }

.build-info {
  margin: -6px 0 0;
  padding: 0 12px 0 28px;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0.8;
}

/* The account button, and next to it "Get apps" (downloads.html). */
.account-row { position: relative; display: flex; align-items: center; gap: 4px; }
.account-row .account { flex: 1; min-width: 0; }
.get-apps { flex-shrink: 0; }

.account {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
}
/* Name over plan, like Claude. A long name or email is cut with "…" instead of spilling out of the sidebar. */
.account-text { display: flex; flex: 1; flex-direction: column; min-width: 0; line-height: 1.3; }
.account-name,
.account-plan { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-name { font-weight: 500; }
.account-plan { color: var(--muted); font-size: 0.78rem; }
.account-chevron {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.15s;
}
.account:hover .account-chevron, .account[aria-expanded="true"] .account-chevron { stroke: var(--text); }
.account[aria-expanded="true"] .account-chevron { transform: rotate(180deg); }
.account:hover, .account[aria-expanded="true"] { background: color-mix(in srgb, var(--text) 6%, transparent); }

/* Account menu, like Claude: over the account row, as wide as the sidebar. Submenus (Language,
   Learn more) open to the right on wide screens and above their item on phones. */
.menu.account-menu { right: 0; left: 0; z-index: 60; min-width: 0; }
.account-menu .menu-item { gap: 10px; padding: 7px 10px; text-decoration: none; }
.account-menu .menu-item-title { font-weight: 400; }
.account-menu-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.submenu-wrap { position: relative; display: flex; flex-direction: column; }
.menu.submenu { top: -6px; bottom: auto; left: calc(100% + 10px); min-width: 200px; }
.submenu-arrow { width: 15px !important; height: 15px !important; margin-left: auto; color: var(--muted); }
.menu-item[aria-expanded="true"] { background: color-mix(in srgb, var(--text) 7%, transparent); }
@media (max-width: 860px) {
  .menu.submenu { top: auto; bottom: calc(100% + 4px); left: auto; right: 0; }
}

.account-avatar {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--bubble-user);
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 600;
}

.scrim { display: none; }

/* Settings dialog */

.settings {
  width: min(900px, calc(100vw - 32px));
  height: min(640px, calc(100dvh - 48px));
  max-width: none;
  max-height: none;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--bg);
  color: var(--text);
  box-shadow: 0 40px 120px -20px rgba(0, 0, 0, 0.55);
}
.settings::backdrop { background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(2px); }
.settings[open] { animation: settings-in 0.22s cubic-bezier(0.2, 0.7, 0.2, 1); }

@keyframes settings-in {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

.settings-shell {
  position: relative;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  height: 100%;
}

.settings-nav {
  padding: 18px 12px;
  border-right: 1px solid var(--border);
  background: var(--sidebar-bg);
}

.settings-title {
  margin: 4px 10px 14px;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.settings-tabs { display: flex; flex-direction: column; gap: 2px; }

.settings-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}
.settings-tab svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.settings-tab:hover { color: var(--text); background: color-mix(in srgb, var(--text) 5%, transparent); }
.settings-tab[aria-selected="true"] { color: var(--text); background: color-mix(in srgb, var(--text) 9%, transparent); }

.settings-body {
  position: relative;
  overflow-y: auto;
  padding: 22px 28px 32px;
}

.settings-close { position: absolute; top: 14px; right: 14px; }

.settings-panel h3 {
  margin: 8px 0 6px;
  font-size: 1rem;
  font-weight: 600;
}
.settings-panel h3 ~ h3 { margin-top: 30px; }

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}

.setting-text { min-width: 0; }
.setting-label { margin: 0; font-size: 0.95rem; font-weight: 500; }
.setting-desc { margin: 3px 0 0; color: var(--muted); font-size: 0.85rem; line-height: 1.45; }

.segmented {
  display: inline-flex;
  flex: none;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--text) 3%, var(--bg));
}

.segmented button {
  display: inline-grid;
  place-items: center;
  min-width: 40px;
  min-height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
}
.segmented button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.segmented button:hover { color: var(--text); }
.segmented button[aria-checked="true"] {
  background: var(--bg);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 0 0 1px var(--border);
}

.switch {
  position: relative;
  flex: none;
  width: 44px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 18%, transparent);
  cursor: pointer;
  transition: background-color 0.2s;
}
.switch[aria-checked="true"] { background: var(--accent); }
.switch:disabled { opacity: 0.45; cursor: not-allowed; }
.switch-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s;
}
.switch[aria-checked="true"] .switch-thumb { transform: translateX(18px); }

.settings-card {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
}
.settings-card .setting-text { flex: 1; }

.account-avatar-lg { width: 44px; height: 44px; font-size: 1.05rem; }

.plan-name-lg { margin: 2px 0 0; font-size: 1.3rem; font-weight: 600; letter-spacing: -0.02em; }

.settings-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.btn-pill:hover { border-color: var(--muted); }
.btn-pill.is-danger { color: var(--error); border-color: color-mix(in srgb, var(--error) 45%, transparent); }
.btn-pill.is-danger:hover { border-color: var(--error); }
.btn-pill:disabled { opacity: 0.45; cursor: not-allowed; }

.swatches button { min-width: 38px; padding: 0 9px; }
.swatch { display: block; width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15); }
.swatch-violet { background: linear-gradient(135deg, #a78bfa, #f472b6); }
.swatch-blue { background: linear-gradient(135deg, #2f5bff, #06b6d4); }
.swatch-amber { background: linear-gradient(135deg, #ffb23f, #ea580c); }
.swatch-platinum { background: linear-gradient(135deg, #ffffff, #8a8d94); }

.setting-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}
.setting-field textarea {
  width: 100%;
  min-height: 96px;
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: color-mix(in srgb, var(--text) 2%, var(--bg));
  color: var(--text);
  font: inherit;
  font-size: 0.92rem;
  line-height: 1.5;
  resize: vertical;
}
.setting-field textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.setting-field textarea:disabled { opacity: 0.5; }
.field-counter { margin: 4px 0 0; color: var(--muted); font-size: 0.78rem; text-align: right; font-variant-numeric: tabular-nums; }

.settings-note { margin: 14px 0 0; color: var(--muted); font-size: 0.82rem; line-height: 1.5; }

.setting-value {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  text-align: right;
  overflow-wrap: anywhere;
}

.shortcut { display: inline-flex; flex: none; gap: 4px; }
kbd {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  padding: 0 7px;
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--text) 3%, var(--bg));
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.78rem;
}

.plan-list { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.plan-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
}
.plan-item.is-current { border-color: var(--accent); }
.plan-item-name { flex: 1; font-weight: 600; }
.plan-item-price { color: var(--muted); font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.plan-item-tag {
  padding: 2px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 7%, transparent);
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 500;
}
.plan-item.is-current .plan-item-tag { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }

.btn-pill.is-primary { border-color: transparent; background: var(--text); color: var(--bg); }

/* Main column */

.chat {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.chat-top {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  padding: 10px 16px;
}

.menu-btn { display: none; }

.chat-title {
  flex: 1;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.thread {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
}

/* Welcome */

.welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 16px 28px;
  text-align: center;
}

.welcome-mark {
  view-transition-name: kayts-mark; /* arrives from the home page's hero (base.css, "Page transitions") */
  width: 64px;
  height: 64px;
  margin-bottom: 20px;
  filter: drop-shadow(0 8px 22px var(--aurora-1)) drop-shadow(0 0 12px var(--aurora-2));
  transition: filter 0.4s ease;
}

/* Private chat: the eye icon (the "Odpowiedź" mark, drawn in the current colour), the switch in the
   header, the label once the chat has started, and a grey welcome with what private means. */
.eye-icon .eye-lid { fill: currentColor; stroke: none; }
.eye-icon .eye-line { fill: none; stroke: currentColor; stroke-width: 7; }
.eye-icon .eye-lash { fill: none; stroke: currentColor; stroke-width: 6; opacity: 0.55; }
.eye-icon .eye-iris { fill: color-mix(in srgb, currentColor 40%, var(--bg)); stroke: none; }
.icon-btn .eye-icon { width: 22px; height: 22px; }
.private-toggle[aria-pressed="true"] { background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--text); }

.private-badge {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 8px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 500;
  white-space: nowrap;
}
.private-badge[hidden] { display: none; }
.private-badge .eye-icon { width: 16px; height: 16px; }

/* Private chat: a vignette, the edges of the chat column darkening like in a game. It sits under
   the text (the column's own background), and --vignette (registered, so it can be animated)
   eases it in and out. Stronger in dark; in light a soft warm shade, so the paper doesn't look
   dirty. */
@property --vignette { syntax: "<number>"; inherits: false; initial-value: 0; }
.chat {
  --vignette-color: 30 24 14;
  --vignette-max: 0.2;
  background-image: radial-gradient(ellipse 75% 70% at 50% 45%, transparent 35%, rgb(var(--vignette-color) / calc(var(--vignette) * var(--vignette-max))) 100%);
  transition: --vignette 0.8s ease;
}
.chat.is-private { --vignette: 1; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .chat { --vignette-color: 0 0 0; --vignette-max: 0.62; }
}
:root[data-theme="dark"] .chat { --vignette-color: 0 0 0; --vignette-max: 0.62; }

.welcome.is-private .welcome-mark { filter: drop-shadow(0 8px 22px transparent) drop-shadow(0 0 12px transparent); }
.welcome.is-private .welcome-title em { --title-a: var(--muted); --title-b: var(--muted); --title-c: var(--muted); }

.welcome-title {
  margin: 0;
  font-size: clamp(1.9rem, 4.6vw, 2.8rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.04em;
}

/* The gradient's colours are registered properties, so switching Private chat on and off fades
   them (a gradient itself can't be transitioned). */
@property --title-a { syntax: "<color>"; inherits: false; initial-value: transparent; }
@property --title-b { syntax: "<color>"; inherits: false; initial-value: transparent; }
@property --title-c { syntax: "<color>"; inherits: false; initial-value: transparent; }

.welcome-title em {
  --title-a: var(--grad-a);
  --title-b: var(--grad-b);
  --title-c: var(--grad-c);
  padding: 0 0.06em;
  background: linear-gradient(100deg, var(--title-a), var(--title-b) 60%, var(--title-c));
  transition: --title-a 0.4s ease, --title-b 0.4s ease, --title-c 0.4s ease;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: var(--font-serif);
  font-size: 1.08em;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.suggestions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  max-width: 620px;
}

.suggestion {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}
.suggestion:hover { border-color: var(--border-strong); background: color-mix(in srgb, var(--text) 3%, transparent); }
.suggestion-title { font-size: 0.92rem; font-weight: 500; }
.suggestion-text { color: var(--muted); font-size: 0.86rem; }

/* Messages */

.messages {
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: var(--thread-width);
  font-family: var(--chat-font);
  font-size: var(--chat-text);
  margin: 0 auto;
  padding: 8px 16px 32px;
  list-style: none;
}
.messages:empty { display: none; }

.msg { display: flex; gap: 14px; min-width: 0; }

.msg-user { justify-content: flex-end; }

.msg-user-body { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; max-width: 85%; min-width: 0; }
.msg-files { align-items: flex-start; justify-content: flex-end; margin: 0; }

.msg-user .msg-content {
  max-width: 100%;
  padding: 10px 16px;
  border-radius: 18px 18px 6px 18px;
  background: var(--bubble-user);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.msg-user .msg-content a { color: var(--accent); text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); text-underline-offset: 0.15em; }
.msg-user .msg-content a:hover { text-decoration-color: currentColor; }

.msg-avatar { flex: none; width: 28px; height: 28px; margin-top: 2px; }
.msg-mark, .msg-avatar img { display: block; width: 28px; height: 28px; }

.msg-body { flex: 1; min-width: 0; }

.msg-actions { display: flex; gap: 2px; margin-top: 6px; margin-left: -8px; }
.msg-actions .icon-btn { width: 32px; height: 32px; }
.msg-actions .icon-btn svg { width: 17px; height: 17px; }
.copy-btn[data-copied] { color: var(--success); }

.msg-error {
  padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--error) 40%, transparent);
  border-radius: 12px;
  color: var(--error);
  font-size: 0.92rem;
}

/* "Working" indicator: star in the accent colour, a verb with a light sweeping across it, seconds. */
.working { display: inline-flex; align-items: baseline; gap: 8px; font-size: 0.92rem; }
.working-glyph { display: inline-block; width: 1.1em; color: var(--accent); text-align: center; }
.working-verb {
  background: linear-gradient(90deg, var(--accent) 0 40%, color-mix(in srgb, var(--accent) 35%, var(--text)) 50%, var(--accent) 60% 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: working-shimmer 2.2s linear infinite;
}
.working-time { color: var(--muted); font-size: 0.85em; font-variant-numeric: tabular-nums; }
@keyframes working-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

.thinking-status { margin: 0 0 10px; color: var(--muted); font-size: 0.88rem; }

/* Tool rows: what the model checked while answering (the searches it ran). A row spins while its
   call runs, then settles: outcome glyph, label, and (as <details>) the expandable results. */
.msg-tools { display: flex; flex-direction: column; gap: 6px; margin: 0 0 12px; }
.tool-row { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); font-size: 0.88rem; }
.tool-summary { display: flex; align-items: baseline; gap: 8px; padding: 8px 12px; list-style: none; }
details.tool-row > .tool-summary { cursor: pointer; }
.tool-summary::-webkit-details-marker { display: none; }
.tool-glyph { flex: none; width: 1.1em; color: var(--accent); text-align: center; }
.tool-glyph.is-failed { color: var(--muted); }
.tool-label { min-width: 0; color: var(--muted); overflow-wrap: anywhere; }
.tool-chevron { flex: none; margin-left: auto; color: var(--muted); transition: transform 0.15s; }
.tool-row[open] .tool-chevron { transform: rotate(90deg); }
.tool-detail { padding: 2px 12px 10px; }
.tool-papers { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tool-papers li { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tool-paper-title { color: var(--text); font-weight: 500; text-decoration: none; overflow-wrap: anywhere; }
a.tool-paper-title:hover { color: var(--accent); text-decoration: underline; }
.tool-paper-meta { color: var(--muted); font-size: 0.82rem; overflow-wrap: anywhere; }
.tool-error { margin: 0; color: var(--muted); overflow-wrap: anywhere; }

/* Markdown answers */

.markdown { overflow-wrap: anywhere; }
.markdown > :first-child { margin-top: 0; }
.markdown > :last-child { margin-bottom: 0; }
.markdown p, .markdown ul, .markdown ol, .markdown pre, .markdown blockquote, .markdown .table-wrap, .markdown .math-display { margin: 0 0 14px; }
.markdown ul, .markdown ol { padding-left: 1.4em; }
.markdown li + li { margin-top: 4px; }
/* A list inside a list item, and the paragraphs of a "loose" list, sit close to their item. */
.markdown li > ul, .markdown li > ol { margin: 4px 0 0; }
.markdown li > p { margin: 0 0 6px; }
.markdown li > p:last-child { margin-bottom: 0; }
.markdown ol ol, .markdown ul ol { list-style: lower-alpha; }
.markdown ul ul { list-style: circle; }
.markdown li::marker { color: var(--muted); }
.markdown h1, .markdown h2, .markdown h3, .markdown h4 { margin: 24px 0 10px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.markdown h1 { font-size: 1.35rem; }
.markdown h2 { font-size: 1.2rem; }
.markdown h3, .markdown h4 { font-size: 1.05rem; }
.markdown a { color: var(--accent); text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); text-underline-offset: 0.15em; }
.markdown a:hover { text-decoration-color: currentColor; }
.markdown strong { font-weight: 600; }
.markdown hr { margin: 20px 0; border: 0; border-top: 1px solid var(--border); }
.markdown kbd {
  padding: 0.08em 0.4em;
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: 5px;
  font-family: var(--font-mono);
  font-size: 0.85em;
}
.markdown sup, .markdown sub { font-size: 0.75em; line-height: 0; }

/* Task lists ("- [ ] …"): a box instead of the <input> the sanitizer removes (js/markdown-ext.js). */
.markdown li:has(> .task-box), .markdown li:has(> p > .task-box) { list-style: none; margin-left: -1.4em; }
.task-box {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 0.3em;
  border: 1.5px solid var(--border-strong);
  border-radius: 4px;
  vertical-align: -0.15em;
}
.task-box.is-checked {
  border-color: var(--accent);
  background: var(--accent) center / 70% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E");
}

/* Math (KaTeX, js/markdown-ext.js). A wide formula scrolls sideways instead of widening the answer;
   before KaTeX renders it (or when the CDN did not answer) the raw TeX shows as code. */
.math:not(.is-rendered) { font-family: var(--font-mono); font-size: 0.9em; color: var(--muted); }
.math-display:not(.is-rendered) { display: block; white-space: pre-wrap; }
.markdown .katex { font-size: 1.06em; }
.markdown .katex-display { margin: 0; overflow-x: auto; overflow-y: hidden; padding: 4px 2px; }
.markdown .katex-display > .katex { white-space: normal; }
.markdown .katex-error { color: var(--error); }

/* While the answer streams in: a caret at the end of the text being written (js/chat.js adds
   "is-streaming" to the message), like a typewriter's. */
.msg.is-streaming .msg-content > :is(p, h1, h2, h3, h4, blockquote):last-child::after,
.msg.is-streaming .msg-content > :is(ul, ol):last-child > li:last-child::after {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 1em;
  margin-left: 0.15em;
  border-radius: 2px;
  background: var(--accent);
  vertical-align: -0.15em;
  animation: caret-blink 1s steps(2, start) infinite;
}
@keyframes caret-blink { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
  .msg.is-streaming .msg-content ::after { animation: none; }
}

.markdown code {
  padding: 0.12em 0.4em;
  border-radius: 6px;
  background: var(--code-bg);
  font-family: var(--font-mono);
  font-size: 0.88em;
}

.markdown pre {
  overflow-x: auto;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--code-bg);
  line-height: 1.5;
}
.markdown pre code { padding: 0; background: none; font-size: 0.86rem; }

.markdown blockquote {
  padding-left: 14px;
  border-left: 3px solid var(--border-strong);
  color: var(--muted);
}

/* Tables sit in a frame of their own (js/markdown-ext.js) that scrolls sideways when the table is
   wider than the answer; the header stays put while the body scrolls down. */
.markdown .table-wrap { overflow: auto; max-height: 70vh; border: 1px solid var(--border); border-radius: 12px; }
.markdown table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.92rem; line-height: 1.45; }
.markdown th, .markdown td { padding: 9px 14px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.markdown th { position: sticky; top: 0; background: var(--code-bg); font-weight: 600; }
.markdown tbody tr:last-child td { border-bottom: 0; }
.markdown tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--text) 2.5%, transparent); }

/* Composer */

.composer {
  width: 100%;
  max-width: calc(var(--thread-width) + 32px);
  margin: 0 auto;
  padding: 0 16px 12px;
}

.composer-box {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 10px 10px 16px;
  border: 1px solid var(--border-strong);
  border-radius: 22px;
  background: var(--composer-bg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 10px 32px -14px rgba(0, 0, 0, 0.18);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.composer-box:focus-within {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border-strong));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 36px -14px rgba(0, 0, 0, 0.24);
}

.composer.is-dropping .composer-box { border-color: var(--accent); border-style: dashed; }

.composer textarea {
  width: 100%;
  min-height: 28px;
  max-height: 220px;
  padding: 2px 0;
  border: 0;
  outline: 0;
  resize: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-family: var(--chat-font);
  font-size: var(--chat-text);
  line-height: 1.5;
}
.composer textarea::placeholder { color: var(--muted); }

/* Send and Stop: a rounded square, larger than the other buttons in the row. The negative margin
   keeps the row (and so the whole box) as tall as before. */
.send-btn {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  margin-block: -3px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, var(--grad-b)));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 4px 12px -4px color-mix(in srgb, var(--accent) 60%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  color: var(--accent-text);
  cursor: pointer;
  transition: opacity 0.15s, transform 0.15s, box-shadow 0.15s;
}
.send-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 8px 18px -6px color-mix(in srgb, var(--accent) 70%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.send-btn:active:not(:disabled) { transform: scale(0.96); }
.send-btn:disabled { opacity: 0.25; box-shadow: none; cursor: default; }
.send-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.stop-btn svg { fill: currentColor; stroke: none; }

/* The row inside the box, under the message: "+" on the left; model, dictation and send on the right. */
.composer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-left: -6px;
}
.composer-tools, .composer-actions { display: flex; align-items: center; gap: 2px; }
.composer-bar[hidden] { display: none; }

/* Dictating: the recording bar in the tool row's place (chat.js). A pulsing red dot, the time,
   the live wave, then cancel (round, outlined) and done (the send button's rounded square). */
.rec-bar { display: flex; align-items: center; gap: 10px; min-height: 34px; margin-left: -2px; }
.rec-bar[hidden] { display: none; }
.rec-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: #e5484d; animation: rec-pulse 1.4s ease-in-out infinite; }
@keyframes rec-pulse { 50% { opacity: 0.35; transform: scale(0.8); } }
.rec-time { flex: none; min-width: 34px; color: var(--text); font-size: 0.88rem; font-variant-numeric: tabular-nums; }
.rec-wave { flex: 1; min-width: 0; height: 26px; }
.rec-cancel,
.rec-done { display: grid; place-items: center; flex: none; cursor: pointer; transition: transform 0.15s, background-color 0.15s; }
.rec-cancel { width: 34px; height: 34px; border: 1px solid var(--border-strong); border-radius: 50%; background: transparent; color: var(--text); }
.rec-cancel:hover { background: color-mix(in srgb, var(--text) 7%, transparent); }
.rec-done {
  width: 40px;
  height: 40px;
  margin-block: -3px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, var(--grad-b)));
  box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--accent) 60%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  color: var(--accent-text);
}
.rec-done:hover { transform: translateY(-1px); }
.rec-cancel svg,
.rec-done svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) { .rec-dot { animation: none; } }

.composer-actions { min-width: 0; }
.composer-actions .send-btn { margin-left: 4px; }

.plus-btn { border: 1px solid var(--border-strong); border-radius: 10px; color: var(--text); }
.plus-btn[aria-expanded="true"] { background: color-mix(in srgb, var(--text) 7%, transparent); }
.plus-menu { min-width: 280px; }
.plus-menu .menu-item-title { white-space: nowrap; }
.menu-shortcut { display: inline-flex; align-items: center; margin-left: auto; padding-left: 16px; color: var(--muted); font-size: 0.78rem; white-space: nowrap; }
.menu-shortcut kbd { min-width: 0; padding: 0; border: 0; background: none; box-shadow: none; color: inherit; font: inherit; }
.plus-menu .menu-check { margin-left: auto; }

.composer-note {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.75rem;
  text-align: center;
}

/* New chat, like Claude: the greeting, the message box and the suggestions sit together in the
   middle of the screen. The first message hides the greeting and the box moves to the bottom. */
.chat:has(#welcome:not([hidden])) .thread { flex: none; margin-top: auto; }
.chat:has(#welcome:not([hidden])) .composer { margin-bottom: auto; padding-bottom: 48px; }
.chat:has(#welcome:not([hidden])) .composer-note { display: none; }
.chat:has(#welcome[hidden]) .composer > .suggestions { display: none; }
.composer > .suggestions { margin: 16px auto 0; }
/* Copies of the greeting and the suggestions on their way out (sendMotionStart in chat.js). */
.send-ghost { position: fixed; z-index: 1; margin: 0; pointer-events: none; }

.tool-group { position: relative; display: flex; align-items: center; }
.tool-group[hidden] { display: none; }

.tool-btn { width: 32px; height: 32px; border-radius: 8px; }
.tool-btn svg { width: 18px; height: 18px; }
.chevron-btn { width: 22px; }
.chevron-btn svg { width: 15px; height: 15px; }

.mic-btn.is-listening { background: color-mix(in srgb, var(--error) 16%, transparent); color: var(--error); }
.mic-btn.is-listening svg { animation: listening 1.2s ease-in-out infinite; }
@keyframes listening { 50% { opacity: 0.45; } }

.mode-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 8px 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.mode-btn:hover, .mode-btn[aria-expanded="true"] { background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text); }
.mode-model { color: var(--text); font-weight: 600; }
.mode-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* The Effort row ("Effort        High ›") and its flyout, like Claude: a second panel beside the
   menu, placed by chat.js (setupMenu) in viewport coordinates so a scrolling menu can't clip it. */
.menu-value { margin-left: auto; color: var(--muted); font-size: 0.82rem; }
#effort-row .submenu-arrow { margin-left: 4px; }
.menu.flyout { position: fixed; bottom: auto; right: auto; z-index: 7; width: 280px; }
.menu-hint { margin: 2px 8px 8px; color: var(--muted); font-size: 0.75rem; line-height: 1.4; }
.menu-item-compact { padding-top: 6px; padding-bottom: 6px; }

/* Pop-up menus open upwards, above the bar. */
.menu {
  position: absolute;
  bottom: calc(100% + 6px);
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 220px;
  padding: 6px;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  background: var(--composer-bg);
  box-shadow: 0 18px 50px -12px rgba(0, 0, 0, 0.35);
}
.menu[hidden] { display: none; }
/* Menus above the message bar (chat.js, setupMenu): taller than the room above the bar, they scroll
   (max-height set when opened) or open downwards when there is more room below. Not the account
   menu, whose submenus open to the side and must not be clipped. */
.menu.menu-fit { overflow-y: auto; overscroll-behavior: contain; }
.menu.menu-down { top: calc(100% + 6px); bottom: auto; box-shadow: 0 -18px 50px -12px rgba(0, 0, 0, 0.45); }
.menu-left { left: 0; }
/* "/" commands, above the message box. The active one follows the arrow keys. */
.slash-menu { left: 0; width: min(100%, 360px); }
.slash-menu .menu-item[aria-selected="true"] { background: color-mix(in srgb, var(--text) 7%, transparent); }
.slash-name { font-family: var(--font-mono); font-size: 0.85rem; }
.menu-right { right: 0; width: 280px; }

.menu-heading { margin: 4px 8px 6px; color: var(--muted); font-size: 0.75rem; }
.menu-group { display: flex; flex-direction: column; gap: 2px; }
.menu-sep { margin: 4px 2px; border: 0; border-top: 1px solid var(--border); }
.menu-badge {
  margin-left: 4px;
  padding: 1px 6px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 999px;
  color: var(--accent);
  font-size: 0.68rem;
  font-weight: 500;
  vertical-align: 1px;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.88rem;
  text-align: left;
  cursor: pointer;
}
.menu-item:hover:not(:disabled), .menu-item:focus-visible { background: color-mix(in srgb, var(--text) 7%, transparent); }
.menu-item:focus-visible { outline-offset: -2px; }
.menu-item:disabled { opacity: 0.5; cursor: default; }
.menu-item-text { display: flex; flex: 1; flex-direction: column; gap: 1px; }
.menu-item-title { flex: 1; font-weight: 500; }
.menu-item-desc { color: var(--muted); font-size: 0.78rem; line-height: 1.4; }
.menu-check { width: 16px; height: 16px; fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; visibility: hidden; }
.menu-item[aria-checked="true"] .menu-check { visibility: visible; }

/* Attached files: chips inside the box, and above the message once sent. */
.attachments { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; }
.attachments[hidden] { display: none; }

.file-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 240px;
  padding: 5px 6px 5px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bubble-user);
  font-size: 0.82rem;
}
.file-open {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.file-open:hover .file-name { text-decoration: underline; }
.file-open > svg { width: 15px; height: 15px; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-chip.is-image img { width: 22px; height: 22px; border-radius: 5px; object-fit: cover; }

/* Sent images show as previews, without the file name. */
.msg-files .file-chip.is-image { padding: 0; border-radius: 12px; overflow: hidden; }
.msg-files .file-chip.is-image .file-open { cursor: zoom-in; }
.msg-files .file-chip.is-image img { display: block; width: auto; height: auto; max-width: min(240px, 100%); max-height: 200px; border-radius: 0; transition: opacity 0.15s; }
.msg-files .file-chip.is-image .file-open:hover img { opacity: 0.85; }
.msg-files .file-chip.is-image .file-name { display: none; }
.msg-files .file-chip.is-image .file-open:focus-visible { outline-offset: -2px; }

/* Viewer: an attached image at full size, or a text file's contents. */
.viewer {
  width: min(900px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 48px);
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg);
  color: var(--text);
  box-shadow: 0 40px 120px -20px rgba(0, 0, 0, 0.55);
}
.viewer[open] { display: flex; flex-direction: column; }
.viewer.is-image { width: fit-content; min-width: min(320px, calc(100vw - 32px)); max-width: calc(100vw - 32px); }
.viewer::backdrop { background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(2px); }
.viewer-head { display: flex; align-items: center; gap: 2px; padding: 6px 6px 6px 16px; border-bottom: 1px solid var(--border); }
.viewer-title { flex: 1; min-width: 0; margin: 0; overflow: hidden; font-size: 0.9rem; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.viewer-body { min-height: 0; overflow: auto; }
.viewer-body img { display: block; max-width: 100%; max-height: calc(100dvh - 110px); margin: 0 auto; }
.viewer-body pre {
  margin: 0;
  padding: 16px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.msg-files .file-chip { padding-right: 10px; }

.file-remove {
  display: grid;
  place-items: center;
  flex: none;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.file-remove:hover { background: color-mix(in srgb, var(--text) 9%, transparent); color: var(--text); }
.file-remove svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* Queued messages: a tray tucked behind the top of the box, sent one by one as answers finish. */
.queue {
  position: relative;
  margin: 0 18px -14px;
  padding: 8px 8px 22px;
  border: 1px solid var(--border);
  border-radius: 18px 18px 0 0;
  background: color-mix(in srgb, var(--text) 4%, var(--bg));
  animation: queue-in 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.queue-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  padding: 0 2px 4px 6px;
  font-size: 0.78rem;
}
.queue-icon { flex: none; width: 15px; height: 15px; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.queue-title { flex: none; font-weight: 600; }
.queue-hint { flex: 1; min-width: 0; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.queue-head-btn {
  flex: none;
  padding: 3px 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.queue-head-btn:hover { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); }
.queue-resume { background: var(--accent); color: var(--accent-text); }
.queue-resume:hover { background: var(--accent-hover); color: var(--accent-text); }
.queue.is-paused .queue-icon { stroke: var(--muted); }

.queue-list { display: flex; flex-direction: column; gap: 2px; max-height: 168px; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.queue-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 4px 4px 4px 8px;
  border-radius: 11px;
  font-size: 0.88rem;
  transition: background 0.15s;
}
.queue-item:hover, .queue-item:focus-within { background: color-mix(in srgb, var(--text) 5%, transparent); }
.queue-item.is-new { animation: queue-item-in 0.22s cubic-bezier(0.2, 0.8, 0.2, 1); }
.queue-num {
  display: grid;
  place-items: center;
  flex: none;
  width: 20px;
  height: 20px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  color: var(--muted);
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
}
.queue-item:first-child .queue-num { border-color: transparent; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.queue.is-paused .queue-item:first-child .queue-num { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--muted); }
.queue-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.queue-files {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 6%, transparent);
  color: var(--muted);
  font-size: 0.75rem;
}
.queue-files svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.queue-next { flex: none; color: var(--accent); font-size: 0.72rem; font-weight: 600; }
.queue.is-paused .queue-next { display: none; }
.queue-actions { display: flex; flex: none; gap: 2px; opacity: 0; transition: opacity 0.15s; }
.queue-item:hover .queue-actions, .queue-item:focus-within .queue-actions { opacity: 1; }
@media (hover: none) { .queue-actions { opacity: 1; } }
.queue-actions .file-remove { width: 28px; height: 28px; border-radius: 8px; }
.queue-actions .file-remove svg { width: 15px; height: 15px; }

@keyframes queue-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes queue-item-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) {
  .queue, .queue-item.is-new { animation: none; }
}
@media (max-width: 640px) {
  .queue { margin-inline: 10px; }
  .queue-hint { display: none; }
}

/* Above the tray. */
.queue:not([hidden]) + .composer-box { z-index: 1; }

.composer-alert {
  margin: 0 0 8px;
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--error) 40%, transparent);
  border-radius: 12px;
  color: var(--error);
  font-size: 0.85rem;
}
.composer-alert[data-tone="info"] { border-color: var(--border-strong); color: var(--muted); }

/* Research: chat about papers and files. */

.research {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  min-height: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 16px;
}
.research[hidden] { display: none; }
.research-head { text-align: center; }
.research-title {
  margin: 0 0 10px;
  font-size: clamp(1.9rem, 4.6vw, 2.6rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.04em;
}
.research-title em {
  padding: 0 0.06em;
  background: linear-gradient(100deg, var(--view-a, var(--grad-a)), var(--grad-b) 60%, var(--view-c, var(--grad-c)));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: var(--font-serif);
  font-size: 1.08em;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.research-lead { max-width: 520px; margin: 0 auto; color: var(--muted); font-size: 0.95rem; line-height: 1.55; }
.research-suggestions { max-width: none; }

/* Works search (chat.js, "Works search"): a compact panel like openalex.org/works. The search
   bar, a row of filter chips (each opens its panel under the row), then a page of works: the
   title as a link, year · authors · venue · citations, a PDF / OA badge and "Add". */
.works {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: color-mix(in srgb, var(--composer-bg) 70%, transparent);
  box-shadow: var(--shade-sm, none), var(--edge-light, none);
  overflow: hidden;
}
.works-search { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 16px; border-bottom: 1px solid var(--border); }
.works-search svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.works-search input { flex: 1; min-width: 0; border: 0; background: none; color: var(--text); font: inherit; font-size: 0.98rem; outline: none; }
.works-search input::-webkit-search-cancel-button { display: none; }
.works-filters { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
.works-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  padding: 0 8px 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}
.works-chip svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; transition: transform 0.2s; }
.works-chip:hover { background: color-mix(in srgb, var(--text) 5%, transparent); }
.works-chip[aria-expanded="true"] svg { transform: rotate(180deg); }
.works-chip.is-on { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.works-sort { margin-left: auto; }
.works-pop { padding: 4px 16px 14px; border-bottom: 1px solid var(--border); animation: works-pop-in 0.2s cubic-bezier(0.2, 0.8, 0.2, 1); }
.works-pop[hidden] { display: none; }
@keyframes works-pop-in { from { opacity: 0; transform: translateY(-4px); } }
.works-pop-inner { display: flex; flex-direction: column; gap: 2px; }
.works-pop-empty { margin: 4px 0; color: var(--muted); font-size: 0.85rem; }
.works-check { display: flex; align-items: center; gap: 10px; padding: 5px 2px; font-size: 0.88rem; cursor: pointer; }
.works-check input { flex: none; accent-color: var(--accent); }
.works-check span:first-of-type { flex: 1; }
.works-n { color: var(--muted); font-family: var(--font-mono); font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.works-years { display: flex; align-items: flex-end; gap: 2px; height: 64px; padding: 4px 0 8px; }
.works-bar { flex: 1; min-width: 3px; padding: 0; border: 0; border-radius: 2px 2px 0 0; background: color-mix(in srgb, var(--text) 18%, transparent); cursor: pointer; transition: background-color 0.15s; }
.works-bar.is-in { background: color-mix(in srgb, var(--accent) 55%, transparent); }
.works-bar:hover { background: var(--accent); }
.works-range { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.works-range label { display: flex; flex-direction: column; gap: 2px; color: var(--muted); font-size: 0.75rem; }
.works-range input { width: 92px; height: 30px; padding: 0 8px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--input-bg); color: var(--text); font: inherit; font-size: 0.85rem; }
.works-results { border-top: 1px solid var(--border); transition: opacity 0.2s; }
.works-results.is-loading .works-list { opacity: 0.45; }
.works-head { display: flex; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--border); }
.works-count { margin: 0; color: var(--muted); font-size: 0.82rem; }
.works-list { margin: 0; padding: 0; list-style: none; transition: opacity 0.2s; }
.work { display: flex; align-items: flex-start; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.work:last-child { border-bottom: 0; }
.work-main { flex: 1; min-width: 0; }
.work-title { color: color-mix(in srgb, var(--accent) 80%, var(--text)); font-size: 0.95rem; font-weight: 500; line-height: 1.35; text-decoration: none; }
.work-title:hover { text-decoration: underline; }
.work-meta { margin: 4px 0 0; color: var(--muted); font-size: 0.8rem; line-height: 1.45; }
.work-meta em { font-style: italic; }
.work-cites { display: inline-flex; align-items: center; gap: 3px; font-variant-numeric: tabular-nums; }
.work-cites svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.work-side { display: flex; flex: none; align-items: center; gap: 8px; }
.work-badge { padding: 2px 7px; border: 1px solid var(--border-strong); border-radius: 6px; color: var(--muted); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.02em; }
.work-add {
  height: 28px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border-strong));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--text);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s;
}
.work-add:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.work-add:disabled { border-color: var(--border); background: none; color: var(--muted); cursor: default; }
.works-pager { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--border); }
.works-pager button:disabled { opacity: 0.4; cursor: default; }
@media (max-width: 640px) {
  .work { flex-direction: column; gap: 8px; }
  .works-sort { margin-left: 0; }
}

.sources-panel { display: flex; flex-direction: column; gap: 12px; width: 100%; }

.source-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 6px 6px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 2%, var(--bg));
  transition: border-color 0.15s, box-shadow 0.15s;
}
.source-link:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent); }
.source-link > svg { width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.source-link input {
  flex: 1;
  min-width: 0;
  padding: 6px 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.95rem;
}
.source-link input::placeholder { color: var(--muted); }

.btn-small { gap: 6px; min-height: 32px; padding: 0 14px; font-size: 0.85rem; }
.btn-small svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 22px 16px;
  border: 1.5px dashed var(--border-strong);
  border-radius: 18px;
  text-align: center;
  transition: border-color 0.15s, background-color 0.15s;
}
.dropzone.is-dropping { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent); }
.dropzone > svg { width: 24px; height: 24px; margin-bottom: 4px; fill: none; stroke: var(--muted); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.dropzone-text { margin: 0; font-size: 0.92rem; }
.dropzone-hint { margin: 0; color: var(--muted); font-size: 0.8rem; }
.link-btn { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }

.sources { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sources:empty { display: none; }

.source-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 10px 12px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--text) 2%, var(--bg));
  text-align: left;
}
.source-card[data-status="error"] { border-color: color-mix(in srgb, var(--error) 35%, transparent); }
.source-icon svg { display: block; width: 20px; height: 20px; margin-top: 1px; fill: none; stroke: var(--muted); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.source-card[data-status="loading"] .source-icon svg { animation: listening 1.2s ease-in-out infinite; }
.source-body { flex: 1; min-width: 0; }
.source-title {
  display: block;
  max-width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
button.source-title { cursor: pointer; }
button.source-title:hover { text-decoration: underline; }
.source-meta, .source-note { margin: 2px 0 0; color: var(--muted); font-size: 0.8rem; line-height: 1.45; overflow-wrap: anywhere; }
.source-meta a { color: var(--accent); }
.source-note[data-tone="warn"] { color: color-mix(in srgb, var(--grad-c) 70%, var(--text)); }
.source-note[data-tone="error"] { color: var(--error); }

.sources-meter { display: flex; align-items: center; gap: 12px; }
.sources-meter[hidden] { display: none; }
.meter-track { flex: 1; height: 4px; overflow: hidden; border-radius: 999px; background: var(--border); }
.meter-fill { height: 100%; border-radius: inherit; background: var(--accent); transition: width 0.3s; }
.meter-text { margin: 0; color: var(--muted); font-size: 0.78rem; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Above the conversation: the sources it is about. */
.sources-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: calc(var(--thread-width) + 32px);
  margin: 0 auto;
  padding: 0 16px 8px;
}
.sources-bar[hidden] { display: none; }
.sources-chips { flex: 1; min-width: 0; flex-wrap: nowrap; margin: 0; overflow-x: auto; scrollbar-width: none; }
.sources-chips .file-chip { flex: none; padding-right: 10px; }

.sources-dialog { width: min(680px, calc(100vw - 32px)); }
.sources-dialog-body { padding: 16px; }

/* Audio: sound files to play (the Research layout, with a player in each card). */

.audio-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.5;
}
.audio-notice svg { flex: none; width: 18px; height: 18px; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
#audio .dropzone { width: 100%; }
/* Each view has its colour (the sidebar icon's): the highlighted word of the title leans on it, the
   drop area's icon and the file input's frame take it. Research teal, Audio rose. */
#research { --view-a: var(--c-research); --view-c: #a78bfa; }
#audio { --view-a: var(--c-audio); --view-c: #fdba74; }
#research .dropzone > svg { stroke: var(--c-research); }
#audio .dropzone > svg { stroke: var(--c-audio); }
#research .dropzone.is-dropping { border-color: var(--c-research); }
#audio .dropzone.is-dropping { border-color: var(--c-audio); }
#audio .sources { width: 100%; }

.audio-wave { position: relative; height: 40px; margin-top: 10px; cursor: pointer; }
.audio-wave svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--border-strong); }
.audio-wave svg.is-played { fill: var(--accent); }
.audio-player { display: block; width: 100%; height: 36px; margin-top: 8px; }

@media (prefers-reduced-motion: reduce) {
  .source-card[data-status="loading"] .source-icon svg { animation: none; }
}

@media (max-width: 600px) {
  .research { padding: 24px 12px; gap: 18px; }
  .research-suggestions .suggestion:nth-child(n + 3) { display: none; }
  .sources-bar { padding: 0 10px 6px; }
  .sources-dialog { width: 100vw; max-width: 100vw; max-height: 100dvh; border: 0; border-radius: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .thread { scroll-behavior: auto; }
  .send-btn, .icon-btn, .suggestion, .new-chat, .mode-btn { transition: none; }
  .mic-btn.is-listening svg, .working-verb { animation: none; }
  .tool-chevron { transition: none; }
}

/* Mobile: the sidebar slides in over the chat. */

@media (max-width: 860px) {
  .app { grid-template-columns: minmax(0, 1fr); }

  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 20;
    width: min(300px, 86vw);
    transform: translateX(-100%);
    transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .sidebar.is-open { transform: none; box-shadow: 0 0 60px rgba(0, 0, 0, 0.35); }
  .sidebar-close { display: inline-grid; }

  .scrim {
    position: fixed;
    inset: 0;
    z-index: 10;
    display: block;
    background: rgba(0, 0, 0, 0.4);
  }
  .scrim[hidden] { display: none; }

  .menu-btn { display: inline-grid; }
  .chat-top { padding: 8px 10px; }
  .chat-title { text-align: center; }
}

@media (max-width: 700px) {
  .settings { width: 100vw; height: 100dvh; border: 0; border-radius: 0; }
  .settings-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .settings-nav { padding: 14px 12px 8px; border-right: 0; border-bottom: 1px solid var(--border); }
  .settings-tabs { flex-direction: row; overflow-x: auto; }
  .settings-tab { flex: none; }
  .settings-tab svg { display: none; }
  .settings-body { position: static; padding: 8px 16px 28px; }
  .settings-close { top: 10px; right: 8px; }
  .setting-row { flex-direction: column; align-items: flex-start; gap: 12px; }
  .setting-value { text-align: left; }
}

@media (max-width: 600px) {
  .suggestions { grid-template-columns: minmax(0, 1fr); }
  .suggestion:nth-child(n + 3) { display: none; }
  .composer { padding: 0 10px 10px; }
  .viewer, .viewer.is-image { width: 100vw; max-width: 100vw; max-height: 100dvh; border: 0; border-radius: 0; }
  .viewer-body img { max-height: calc(100dvh - 60px); }
  .composer-note { margin-top: 6px; }
  /* Narrow screens: the model name is enough; the effort is in the menu. */
  .mode-name { display: none; }
  .menu.flyout { width: min(280px, calc(100vw - 16px)); }
  .messages { gap: 24px; }
  .msg { gap: 10px; }
  .msg-avatar, .msg-mark, .msg-avatar img { width: 24px; height: 24px; }
}

/* ---- Saved conversations in the sidebar ---- */

.history {
  flex: 1;
  min-height: 0;
  margin: 14px -4px 0;
  padding: 0 4px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.history .sidebar-empty { margin-top: 10px; }
.history-group + .history-group { margin-top: 14px; }
.history-label {
  margin: 0 12px 4px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.history ul { margin: 0; padding: 0; list-style: none; }

.history-item {
  position: relative;
  display: flex;
  align-items: center;
  border-radius: 10px;
}
.history-item:hover,
.history-item:focus-within { background: color-mix(in srgb, var(--text) 6%, transparent); }
.history-item:has(.history-link[aria-current]) { background: color-mix(in srgb, var(--accent) 15%, transparent); }

.history-link {
  flex: 1;
  min-width: 0;
  padding: 7px 12px;
  overflow: hidden;
  color: var(--text);
  font-size: 0.88rem;
  text-decoration: none;
  white-space: nowrap;
  text-overflow: ellipsis;
  border-radius: inherit;
}
.history-link[aria-current] { font-weight: 500; }
.history-link:focus-visible { outline-offset: -2px; }

/* Shown on hover, on the open chat, while its menu is open, and always on touch screens. */
.history-more {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  margin-right: 4px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  opacity: 0;
}
.history-item:hover .history-more,
.history-item:focus-within .history-more,
.history-link[aria-current] + .history-more,
.history-more[aria-expanded="true"] { opacity: 1; }
.history-more:hover { color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); }
.history-more svg { width: 18px; height: 18px; fill: currentColor; }
@media (hover: none) { .history-more { opacity: 1; } }

.history-rename {
  flex: 1;
  min-width: 0;
  margin: 2px;
  padding: 5px 10px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  outline: 0;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 0.88rem;
}

.history-menu {
  position: fixed;
  bottom: auto;
  z-index: 60;
  min-width: 180px;
}
.menu-item > svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.menu-item.is-danger { color: var(--error); }

/* ---- Answer and message actions ---- */

/* Older answers show their actions on hover; the newest one always does. */
.msg-assistant .msg-actions { opacity: 0; transition: opacity 0.15s; }
.msg-assistant:hover .msg-actions,
.msg-assistant:focus-within .msg-actions,
.messages > .msg-assistant:last-child .msg-actions { opacity: 1; }
.messages > .msg-assistant:not(:last-child) .regen-btn { display: none; }
/* Changes after Regenerate: the button under the answer opens the compare panel. */
.diff-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  margin-left: 4px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.diff-btn[hidden] { display: none; }
.diff-btn:hover { background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text); }
.diff-btn[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--text);
}
.diff-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
/* +added in green, −removed in red, each in its own small tinted pill (the colours of the diff). */
.diff-count { display: inline-flex; gap: 3px; font-variant-numeric: tabular-nums; font-weight: 500; }
.diff-added,
.diff-removed { padding: 1px 6px; border-radius: 999px; line-height: 1.4; }
.diff-added {
  background: color-mix(in srgb, var(--success) 14%, transparent);
  color: color-mix(in srgb, var(--success) 85%, var(--text));
}
.diff-removed {
  background: color-mix(in srgb, var(--error) 12%, transparent);
  color: color-mix(in srgb, var(--error) 85%, var(--text));
}
/* The answer in the panel: a quiet accent line between the logo and the text. */
.msg-assistant.is-comparing .msg-body { position: relative; }
.msg-assistant.is-comparing .msg-body::before {
  content: "";
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: -8px;
  width: 2px;
  border-radius: 2px;
  background: var(--accent);
}
.diff-ins {
  border-radius: 3px;
  background: color-mix(in srgb, var(--success) 22%, transparent);
  color: inherit;
  text-decoration: none;
}
.diff-del {
  border-radius: 3px;
  background: color-mix(in srgb, var(--error) 12%, transparent);
  color: color-mix(in srgb, var(--error) 75%, var(--text));
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--error) 60%, transparent);
}
.rate-btn[aria-pressed="true"] { color: var(--accent); }
.rate-btn[aria-pressed="true"] svg { fill: color-mix(in srgb, var(--accent) 22%, transparent); }

.msg-user-actions { margin: 0 -6px 0 0; opacity: 0; transition: opacity 0.15s; }
.msg-user:hover .msg-user-actions,
.msg-user:focus-within .msg-user-actions { opacity: 1; }
.msg-user:not([data-id]) .edit-btn { display: none; }
@media (hover: none) {
  .msg-actions, .msg-user-actions { opacity: 1; }
}

.msg-edit {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(100%, 640px);
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  background: var(--bubble-user);
}
.msg-edit textarea {
  min-height: 48px;
  padding: 4px;
  border: 0;
  outline: 0;
  resize: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-family: var(--chat-font);
  font-size: var(--chat-text);
}
.msg-edit-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* Dropdown in Settings (interface language): the browser's own list, with our chevron. */
.select-wrap { position: relative; display: inline-flex; flex: none; }
.select-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 13px;
  width: 7px;
  height: 7px;
  border-right: 1.6px solid var(--muted);
  border-bottom: 1.6px solid var(--muted);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.select {
  min-width: 140px;
  padding: 8px 36px 8px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.select:hover { border-color: var(--muted); }
.select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Comment under a thumbs-down answer: the edit box, on the page background. */
.feedback-form { margin-top: 8px; background: transparent; }
.feedback-label { display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 0.9rem; }
.msg-edit .feedback-label textarea { min-height: 56px; }

/* ---- Scroll to the newest message ---- */

.scroll-down {
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin: -46px auto 10px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--bg);
  color: var(--text);
  box-shadow: 0 6px 20px -6px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}
.scroll-down[hidden] { display: none; }
.scroll-down svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Markdown details ---- */

.markdown ul { list-style: disc; }
.markdown ul ul { list-style: circle; }
.markdown li::marker { color: var(--muted); }
.markdown ol > li::marker { font-variant-numeric: tabular-nums; }
.markdown blockquote { margin-left: 0; font-style: italic; }
.markdown tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--text) 2.5%, transparent); }

/* ---- Code blocks: header with the language and Copy, colours from Prism ---- */

.code-block {
  margin: 0 0 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--code-bg);
  overflow: hidden;
}
.code-block:last-child { margin-bottom: 0; }
.code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 8px 6px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.76rem;
}
.code-copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  cursor: pointer;
}
.code-copy:hover { color: var(--text); background: color-mix(in srgb, var(--text) 7%, transparent); }
.code-copy[data-copied] { color: var(--success); }
.code-copy svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.markdown .code-block pre { margin: 0; border: 0; border-radius: 0; background: transparent; }

:root {
  --tok-comment: #6a737d;
  --tok-keyword: #cf222e;
  --tok-string: #0a3069;
  --tok-number: #0550ae;
  --tok-function: #8250df;
  --tok-class: #953800;
  --tok-property: #0550ae;
  --tok-tag: #116329;
  --tok-operator: #57606a;
  --tok-inserted: #116329;
  --tok-deleted: #82071e;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tok-comment: #7f848e;
    --tok-keyword: #c678dd;
    --tok-string: #98c379;
    --tok-number: #d19a66;
    --tok-function: #61afef;
    --tok-class: #e5c07b;
    --tok-property: #e06c75;
    --tok-tag: #e06c75;
    --tok-operator: #56b6c2;
    --tok-inserted: #98c379;
    --tok-deleted: #e06c75;
  }
}
:root[data-theme="dark"] {
  --tok-comment: #7f848e;
  --tok-keyword: #c678dd;
  --tok-string: #98c379;
  --tok-number: #d19a66;
  --tok-function: #61afef;
  --tok-class: #e5c07b;
  --tok-property: #e06c75;
  --tok-tag: #e06c75;
  --tok-operator: #56b6c2;
  --tok-inserted: #98c379;
  --tok-deleted: #e06c75;
}

.token.comment, .token.prolog, .token.doctype, .token.cdata { color: var(--tok-comment); font-style: italic; }
.token.keyword, .token.atrule, .token.important, .token.rule { color: var(--tok-keyword); }
.token.string, .token.char, .token.attr-value, .token.regex, .token.url, .token.template-string { color: var(--tok-string); }
.token.number, .token.boolean, .token.constant, .token.symbol { color: var(--tok-number); }
.token.function, .token.function-name { color: var(--tok-function); }
.token.class-name, .token.builtin, .token.namespace { color: var(--tok-class); }
.token.property, .token.attr-name, .token.variable, .token.key { color: var(--tok-property); }
.token.tag, .token.selector { color: var(--tok-tag); }
.token.operator, .token.punctuation, .token.entity { color: var(--tok-operator); }
.token.inserted { color: var(--tok-inserted); }
.token.deleted { color: var(--tok-deleted); }
.token.bold { font-weight: 600; }
.token.italic { font-style: italic; }

/* ---- Settings → Plan & usage ---- */

.usage-list { display: flex; flex-direction: column; gap: 14px; margin: 8px 0 18px; padding: 0; list-style: none; }
.usage-head { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 6px; font-size: 0.9rem; }
.usage-head span:last-child { color: var(--muted); font-variant-numeric: tabular-nums; }
.usage-head.usage-model { font-weight: 600; }
.usage-head.usage-model span:first-child { color: var(--text); }
.usage-head:not(.usage-model) span:first-child { color: var(--muted); }
.usage-bar + .usage-head { margin-top: 10px; }
.usage-bar { height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--text) 9%, transparent); overflow: hidden; }
.usage-bar span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }

/* Hiding the sidebar on wide screens (Prefs "sidebarHidden" sets data-sidebar on <html>): the
   chat takes the whole width and the menu button in the top bar brings the sidebar back. The
   column closes while the sidebar slides out to the left with it, at the same pace, so the two
   never overlap; the sidebar keeps its width meanwhile, so nothing inside it wraps. */
@media (min-width: 861px) {
  .app { transition: grid-template-columns 0.34s cubic-bezier(0.22, 1, 0.36, 1); }
  .sidebar {
    width: 272px;
    transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.34s ease, visibility 0s;
  }
  :root[data-sidebar="hidden"] .app { grid-template-columns: 0px minmax(0, 1fr); }
  :root[data-sidebar="hidden"] .sidebar {
    transform: translateX(-100%);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.34s ease, visibility 0s 0.34s;
  }
  :root[data-sidebar="hidden"] .menu-btn { display: inline-grid; animation: menu-btn-in 0.34s ease both; }
}
@keyframes menu-btn-in { from { opacity: 0; transform: translateX(-8px); } }
@media (min-width: 861px) and (prefers-reduced-motion: reduce) {
  .app, .sidebar, :root[data-sidebar="hidden"] .sidebar { transition: none; }
  :root[data-sidebar="hidden"] .menu-btn { animation: none; }
}
@media (max-width: 860px) { .sidebar-hide { display: none; } }

/* Search chats (sidebar). */
.history-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  transition: border-color 0.15s;
}
.history-search:focus-within { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.history-search svg { width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; }
.history-search input {
  flex: 1;
  min-width: 0;
  padding: 8px 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.88rem;
}
.history-search input::placeholder { color: var(--muted); }
.history-search input::-webkit-search-cancel-button { cursor: pointer; }

.history-title { display: block; overflow: hidden; text-overflow: ellipsis; }
.history-icon { width: 13px; height: 13px; margin-right: 6px; vertical-align: -1px; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.history-snippet {
  display: -webkit-box;
  margin-top: 2px;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.4;
  white-space: normal;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Settings → Memory. */
.memory-list { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.memory-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bubble-user);
  font-size: 0.9rem;
}
.memory-item span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.memory-item .file-remove { width: 28px; height: 28px; }
.memory-item .file-remove svg { width: 15px; height: 15px; }
#memory-add { margin-top: 12px; }

/* Settings → Account → Name: a text box with its button. */
.inline-field { display: flex; gap: 8px; margin-top: 8px; }
.inline-field input {
  flex: 1;
  min-width: 0;
  padding: 8px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: color-mix(in srgb, var(--text) 2%, var(--bg));
  color: var(--text);
  font: inherit;
  font-size: 0.92rem;
}
.inline-field input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Share a chat. */
.share-dialog { width: min(560px, calc(100vw - 32px)); }

/* Choose your language: a window with search and two grids of languages, "Available" and
   "Coming soon" (greyed out), three columns on wide screens. */
.lang-dialog { width: min(720px, calc(100vw - 32px)); height: min(560px, calc(100dvh - 48px)); }
.lang-dialog .viewer-head { padding: 14px 10px 6px 20px; border-bottom: 0; }
.lang-dialog .viewer-title { font-size: 1.35rem; font-weight: 600; letter-spacing: -0.01em; }
.lang-body { display: flex; flex: 1; flex-direction: column; min-height: 0; padding: 8px 20px 0; }
.lang-count { margin: 10px 2px 0; color: var(--muted); font-size: 0.78rem; }
.lang-count:empty { display: none; }
.lang-list { flex: 1; min-height: 0; margin: 4px -8px 0; padding: 0 8px 16px; overflow-y: auto; }
.lang-group { margin: 14px 2px 6px; color: var(--muted); font-size: 0.75rem; font-weight: 500; }
.lang-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 0; list-style: none; }
@media (max-width: 640px) { .lang-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 400px) { .lang-grid { grid-template-columns: minmax(0, 1fr); } }
.lang-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.lang-option:hover:not(:disabled), .lang-option:focus-visible { background: color-mix(in srgb, var(--text) 7%, transparent); }
.lang-option[aria-current="true"] { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.lang-option:focus-visible { outline-offset: -2px; }
.lang-option:disabled { cursor: default; }
.lang-option:disabled .lang-names { opacity: 0.45; }
.lang-names { display: flex; flex: 1; flex-direction: column; min-width: 0; line-height: 1.35; }
.lang-native, .lang-english { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lang-native { font-size: 0.92rem; font-weight: 600; }
.lang-english { color: var(--muted); font-size: 0.8rem; }
.lang-option .menu-check { flex-shrink: 0; visibility: hidden; }
.lang-option[aria-current="true"] .menu-check { visibility: visible; }
.share-body { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px 18px; }
.share-body .settings-actions { margin-top: 0; }
.share-link { display: flex; gap: 8px; }
.share-link[hidden] { display: none; }
.share-link input {
  flex: 1;
  min-width: 0;
  padding: 8px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 2%, var(--bg));
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
}
.share-body .settings-note { margin: 0; }
.share-body .settings-note:empty { display: none; }

/* ---- Compare panel: versions of a regenerated answer (chat.js, "Changes after Regenerate") ---- */

.compare {
  --compare-pad: 18px;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border-left: 1px solid var(--border);
  background: var(--bg);
  container-type: inline-size;
}
.compare[hidden] { display: none; }

/* Beside the chat when there is room for both; the chat keeps at least 420px. */
@media (min-width: 1181px) {
  .app.has-compare { grid-template-columns: 272px minmax(420px, 1fr) min(var(--compare-width, 480px), calc(100vw - 692px)); }
  :root[data-sidebar="hidden"] .app.has-compare { grid-template-columns: 0px minmax(420px, 1fr) min(var(--compare-width, 480px), calc(100vw - 420px)); }
}
/* Narrower: over the chat, from the right edge. */
@media (max-width: 1180px) {
  .compare {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 30;
    width: min(var(--compare-width, 480px), 100vw);
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.3);
  }
}
@media (max-width: 600px) {
  .compare { width: 100vw; border-left: 0; }
  .compare-resize { display: none; }
}

.compare-resize {
  position: absolute;
  inset: 0 auto 0 -4px;
  z-index: 1;
  width: 8px;
  cursor: col-resize;
  touch-action: none;
}
.compare-resize::after {
  content: "";
  position: absolute;
  inset: 0 3px;
  background: transparent;
  transition: background-color 0.15s;
}
.compare-resize:hover::after,
.compare-resize:focus-visible::after,
.compare.is-resizing .compare-resize::after { background: var(--accent); }
.compare-resize:focus-visible { outline: 0; }
.compare.is-resizing { user-select: none; }

.compare-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 10px 10px 6px var(--compare-pad);
}
.compare-title { flex: 1; margin: 0; font-size: 1rem; font-weight: 600; }
.compare-view button { min-width: 36px; min-height: 30px; padding: 0 8px; }

.compare-versions {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 4px var(--compare-pad) 10px;
}
.compare-select { display: flex; flex: 1; flex-direction: column; gap: 4px; min-width: 0; color: var(--muted); font-size: 0.78rem; }
.compare-select .select-wrap { display: flex; }
.compare-select .select { width: 100%; min-width: 0; padding-block: 7px; font-size: 0.86rem; }
.compare-arrow { width: 18px; height: 18px; margin-bottom: 9px; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.compare-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 var(--compare-pad) 10px;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}
.compare-added { color: var(--success); font-weight: 600; }
.compare-removed { color: var(--error); font-weight: 600; }
.compare-meter {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(to right, color-mix(in srgb, var(--text) 30%, transparent) var(--same, 0%), color-mix(in srgb, var(--accent) 30%, transparent) 0);
}
.compare-same { color: var(--muted); white-space: nowrap; }

.compare-tools {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px 10px var(--compare-pad);
  border-bottom: 1px solid var(--border);
}
.compare-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 11px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}
.compare-chip[hidden] { display: none; }
.compare-chip:hover { color: var(--text); }
.compare-chip[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--text);
}
.compare-chip svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.compare-nav { display: flex; flex: 1; align-items: center; justify-content: flex-end; gap: 2px; }
.compare-position { min-width: 64px; color: var(--muted); font-size: 0.82rem; text-align: center; font-variant-numeric: tabular-nums; }
.compare-tools .icon-btn { width: 32px; height: 32px; }
.compare-tools .icon-btn svg { width: 17px; height: 17px; }
.compare-tools .icon-btn:disabled { opacity: 0.4; cursor: default; background: transparent; }
#compare-copy[data-copied] { color: var(--success); }

.compare-body {
  flex: 1;
  min-height: 0;
  padding: 16px var(--compare-pad) 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
  font-family: var(--chat-font);
  font-size: calc(var(--chat-text) * 0.94);
  line-height: 1.6;
}
.compare-body:focus { outline: 0; }
.compare-body .is-folded { display: none; }
.compare-body [data-change] { cursor: pointer; scroll-margin: 80px; }
.compare-body .is-current { outline: 2px solid var(--accent); outline-offset: 1px; }

.compare-fold {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0 0 14px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}
.compare-fold::before,
.compare-fold::after { content: ""; flex: 1; border-top: 1px dashed var(--border-strong); }
.compare-fold:hover { color: var(--text); }

.compare-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.compare-column + .compare-column { padding-left: 20px; border-left: 1px solid var(--border); }
.compare-column-head {
  position: sticky;
  top: -16px;
  z-index: 1;
  margin: -16px 0 12px;
  padding: 16px 0 8px;
  background: var(--bg);
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
/* Too narrow for two columns: the older version above the newer one. */
@container (max-width: 560px) {
  .compare-split { grid-template-columns: minmax(0, 1fr); }
  .compare-column + .compare-column { padding: 16px 0 0; border-top: 1px solid var(--border); border-left: 0; }
  .compare-column-head { position: static; margin-top: 0; padding-top: 0; }
}

/* A paragraph, list item or heading the newer version doesn't have anymore. */
.compare-body .diff-del-block { opacity: 0.9; }
.compare-body pre.diff-del-block { padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--error) 6%, transparent); white-space: pre-wrap; }
.compare-body pre.diff-del-block .diff-del { background: transparent; }

.compare-empty { margin: 24px 0; color: var(--muted); text-align: center; }
.compare-note {
  margin: 0;
  padding: 8px var(--compare-pad);
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.75rem;
}

/* ---- Depth (17.10.2026) ----
   Soft shading so the layers read apart: the sidebar casts a faint shadow onto the chat, raised
   things (the message box, bubbles, cards, code) get a soft drop and a thin highlight on their
   top edge, and the thread fades out under the top bar and above the message box. Warm shadows
   in light (a brown tint, so they don't look dirty on the paper), plain black in dark. */
:root {
  --shade-rgb: 54, 46, 30;
  --shade-sm: 0 1px 2px rgba(var(--shade-rgb), 0.07);
  --shade-md: 0 1px 2px rgba(var(--shade-rgb), 0.05), 0 8px 22px -10px rgba(var(--shade-rgb), 0.2);
  --shade-lg: 0 2px 4px rgba(var(--shade-rgb), 0.04), 0 20px 48px -20px rgba(var(--shade-rgb), 0.3);
  --edge-light: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --shade-rgb: 0, 0, 0;
    --shade-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
    --shade-md: 0 1px 2px rgba(0, 0, 0, 0.2), 0 8px 22px -10px rgba(0, 0, 0, 0.5);
    --shade-lg: 0 2px 4px rgba(0, 0, 0, 0.18), 0 22px 52px -20px rgba(0, 0, 0, 0.65);
    --edge-light: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  }
}
:root[data-theme="dark"] {
  --shade-rgb: 0, 0, 0;
  --shade-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
  --shade-md: 0 1px 2px rgba(0, 0, 0, 0.2), 0 8px 22px -10px rgba(0, 0, 0, 0.5);
  --shade-lg: 0 2px 4px rgba(0, 0, 0, 0.18), 0 22px 52px -20px rgba(0, 0, 0, 0.65);
  --edge-light: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Sidebar: a little light from above, and a soft shadow cast onto the chat beside it. */
.sidebar {
  background:
    linear-gradient(180deg, color-mix(in srgb, #fff 4%, transparent), transparent 220px),
    var(--sidebar-bg);
}
@media (min-width: 861px) {
  .sidebar { position: relative; z-index: 1; box-shadow: 8px 0 28px -18px rgba(var(--shade-rgb), 0.35); }
}
.new-chat-icon { box-shadow: var(--shade-sm); }
.history-item:has(.history-link[aria-current]) { box-shadow: var(--shade-sm), var(--edge-light); }

/* The thread fades out under the top bar and just above the message box. */
.thread {
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 20px, #000 calc(100% - 16px), transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 20px, #000 calc(100% - 16px), transparent);
}

/* Raised things: the message box, the user's bubbles, the suggestion cards, code. */
.composer-box { box-shadow: var(--shade-lg), var(--edge-light); }
.composer-box:focus-within { box-shadow: var(--shade-lg), var(--edge-light); }

/* The message box's glow: three blurred lights in the brand colours behind it, spilling past its
   edges into the background; faint at rest, brighter while typing. Near the pointer each light
   leans a little toward it, each by a different amount (--glow-x/--glow-y, -1…1, eased in
   chat.js). Behind everything (z-index -1); hidden while the box moves or sits over the queue,
   when it would show through the box itself. */
.composer-box::before {
  content: "";
  position: absolute;
  inset: -30px -44px;
  z-index: -1;
  border-radius: 60px;
  background:
    radial-gradient(38% 70% at calc(20% + var(--glow-x, 0) * 18px) calc(45% + var(--glow-y, 0) * 12px), var(--glow-1), transparent 75%),
    radial-gradient(36% 70% at calc(52% + var(--glow-x, 0) * 10px) calc(55% + var(--glow-y, 0) * 16px), var(--glow-2), transparent 75%),
    radial-gradient(34% 64% at calc(82% + var(--glow-x, 0) * 14px) calc(45% + var(--glow-y, 0) * 10px), var(--glow-3), transparent 75%);
  filter: blur(30px);
  opacity: 0.4;
  pointer-events: none;
  transition: opacity 0.45s ease;
}
.composer-box:focus-within::before { opacity: 0.85; }
@property --glow-1 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --glow-2 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --glow-3 { syntax: "<color>"; inherits: true; initial-value: transparent; }
.composer-box {
  --glow-1: color-mix(in srgb, var(--grad-a) 85%, transparent);
  --glow-2: color-mix(in srgb, var(--grad-b) 75%, transparent);
  --glow-3: color-mix(in srgb, var(--grad-c) 65%, transparent);
  transition: border-color 0.15s, box-shadow 0.15s, --glow-1 0.8s ease, --glow-2 0.8s ease, --glow-3 0.8s ease;
}
/* Private chat: the glow goes dark, graphite and shadow instead of the brand colours, to match
   the vignette. */
.chat.is-private .composer-box {
  --glow-1: rgb(40 38 48 / 0.5);
  --glow-2: rgb(20 19 24 / 0.55);
  --glow-3: rgb(40 38 48 / 0.5);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .chat.is-private .composer-box { --glow-1: rgb(0 0 0 / 0.9); --glow-2: rgb(90 88 104 / 0.35); --glow-3: rgb(0 0 0 / 0.9); }
}
:root[data-theme="dark"] .chat.is-private .composer-box { --glow-1: rgb(0 0 0 / 0.9); --glow-2: rgb(90 88 104 / 0.35); --glow-3: rgb(0 0 0 / 0.9); }
.composer-box.is-moving::before,
.queue:not([hidden]) + .composer-box::before { opacity: 0; transition: none; }
.msg-user .msg-content {
  background:
    linear-gradient(180deg, color-mix(in srgb, #fff 5%, transparent), transparent),
    var(--bubble-user);
  box-shadow: var(--shade-sm), var(--edge-light);
}
.suggestion {
  background: color-mix(in srgb, var(--composer-bg) 45%, transparent);
  box-shadow: var(--shade-sm), var(--edge-light);
  transition: border-color 0.15s, background-color 0.15s, box-shadow 0.2s, transform 0.2s;
}
.suggestion:hover { transform: translateY(-1px); box-shadow: var(--shade-md), var(--edge-light); }
.code-block { box-shadow: var(--shade-sm); }
@media (prefers-reduced-motion: reduce) {
  .suggestion:hover { transform: none; }
}

/* ---- Voice mode (chat.js, "Voice mode") ----
   A bar in the message box's place while talking, so the chat above stays in view: the mark with
   a halo that follows --level (the microphone while listening, the words while speaking; set in
   chat.js), the status and what is being said, then mute and end. Thinking turns the halo. */
.voice-btn svg { stroke-width: 2; }
.composer-box[hidden] { display: none; }
.voice-mode {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 76px;
  padding: 10px 12px 10px 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border-strong));
  border-radius: 22px;
  background: var(--composer-bg);
  box-shadow: var(--shade-lg), var(--edge-light), 0 0 32px -8px color-mix(in srgb, var(--accent) 35%, transparent);
  animation: voice-in 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.voice-mode[hidden] { display: none; }
@keyframes voice-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } }

.voice-orb {
  --level: 0;
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}
.voice-mode[data-state="listening"] .voice-orb,
.voice-mode[data-state="muted"] .voice-orb { cursor: default; }
.voice-halo {
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--grad-a), var(--grad-b), var(--grad-c), var(--grad-a));
  filter: blur(9px);
  opacity: calc(0.35 + var(--level) * 0.55);
  transform: scale(calc(0.8 + var(--level) * 0.55));
  transition: opacity 0.3s ease;
}
.voice-mode[data-state="thinking"] .voice-halo { animation: voice-turn 2.4s linear infinite; opacity: 0.5; }
.voice-mode[data-state="muted"] .voice-halo { opacity: 0.12; }
@keyframes voice-turn { to { transform: scale(0.9) rotate(1turn); } }
.voice-mark {
  position: relative;
  width: 30px;
  height: 30px;
  transform: scale(calc(1 + var(--level) * 0.15));
}
.voice-text { flex: 1; min-width: 0; }
.voice-status { margin: 0; color: var(--muted); font-size: 0.78rem; }
.voice-caption {
  display: -webkit-box;
  margin: 2px 0 0;
  overflow: hidden;
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.4;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.voice-caption:empty { display: none; }
.voice-control {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: transform 0.15s, background-color 0.15s;
}
.voice-control:hover { background: color-mix(in srgb, var(--text) 7%, transparent); }
.voice-control svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.voice-control .icon-mic-off,
.voice-control[aria-pressed="true"] .icon-mic { display: none; }
.voice-control[aria-pressed="true"] .icon-mic-off { display: block; }
.voice-control[aria-pressed="true"] { background: color-mix(in srgb, var(--text) 10%, transparent); }
.voice-end { border-color: transparent; background: #e5484d; color: #fff; }
.voice-end:hover { background: #d93d42; }
@media (prefers-reduced-motion: reduce) {
  .voice-mode, .voice-mode[data-state="thinking"] .voice-halo { animation: none; }
}