/* Zulfiera AI, styled to match the ZulfiTech brand (zulfi-tech.com):
   graphite surfaces, bronze accents, cream text, Georgia for display type. */
:root {
  /* Light theme: cream paper + graphite ink */
  --bg: #F7F7F8;
  --panel: #ffffff;
  --side: #EFEFF2;
  --text: #1E1E24;
  --muted: #6b6f77;
  --border: #e0dcd3;
  --accent: #7C3AED;        /* bronze */
  --accent-strong: #a86a2a;
  --accent-text: #FFFFFF;
  --accent-soft: rgba(130,130,145, 0.12);
  --user-bubble: #EFEFF2;
  --code-bg: #131316;
  --shadow: 0 20px 60px rgba(19,19,22, 0.18);
  --serif: Georgia, "Times New Roman", serif;
  --sans: "Google Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "Google Sans Code", ui-monospace, "Cascadia Mono", Consolas, monospace;
}
/* Dark theme: the zulfi-tech.com palette. Applies when chosen in Settings,
   or when the device is dark and the user hasn't forced Light. */
:root[data-theme="dark"] {
  --bg: #131316; --panel: #1C1C21; --side: #17171B; --text: #EFEFF2; --muted: #8E8E99;
  --border: rgba(255, 255, 255, 0.08); --accent: #7C3AED; --accent-strong: #B4B4C0;
  --accent-soft: rgba(130,130,145, 0.14); --user-bubble: #232329; --shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #131316;           /* graphite */
    --panel: #1C1C21;        /* graphite-soft */
    --side: #17171B;
    --text: #EFEFF2;
    --muted: #8E8E99;
    --border: rgba(255, 255, 255, 0.08);
    --accent: #7C3AED;
    --accent-strong: #B4B4C0; /* bronze-bright */
    --accent-soft: rgba(130,130,145, 0.14);
    --user-bubble: #232329;  /* graphite-card */
    --shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; } /* class display rules must never un-hide elements */
html, body { height: 100%; margin: 0; }
body {
  display: flex;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; cursor: pointer; }
a { color: var(--accent); }
.accent { color: var(--accent); }
::selection { background: var(--accent-soft); }

/* ---------- Logo (two images; the one for the current theme shows) ---------- */
.logo-pair { display: block; }
.logo-pair img { display: block; width: 100%; height: 100%; }
.logo-pair .on-dark { display: none; }
:root[data-theme="dark"] .logo-pair .on-dark { display: block; }
:root[data-theme="dark"] .logo-pair .on-light { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-pair .on-dark { display: block; }
  :root:not([data-theme="light"]) .logo-pair .on-light { display: none; }
}
.logo { width: 56px; height: 56px; margin: 0 auto 14px; }
.logo.hero {
  width: 76px; height: 76px; margin-bottom: 18px; animation: settle 0.9s ease-out;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.35s; cursor: default;
}
/* A little life on hover: tilt, lift and a bronze glow (like the zulfi-tech.com brand mark). */
.logo.hero:hover { transform: rotate(18deg) translateY(-4px) scale(1.06); filter: drop-shadow(0 8px 18px rgba(130,130,145, 0.45)); }
@keyframes settle { from { transform: rotate(-24deg) scale(0.9); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- Sidebar ---------- */
#sidebar {
  width: 268px; flex-shrink: 0; display: flex; flex-direction: column; gap: 10px;
  padding: 14px 12px; background: var(--side); border-right: 1px solid var(--border);
}
#history { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.conv {
  display: flex; align-items: center; gap: 4px; padding: 8px 10px; border-radius: 8px;
  color: var(--text); background: none; border: 0; text-align: left; font-size: 14px;
  border-left: 2px solid transparent; cursor: pointer;
}
.conv:hover { background: var(--accent-soft); }
.conv.active { background: var(--panel); border-left-color: var(--accent); }
.conv span { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.conv .del { visibility: hidden; border: 0; background: none; color: var(--muted); }
.conv:hover .del { visibility: visible; }
.side-head { display: flex; gap: 8px; }
.side-head #new-chat { flex: 1; }
#close-sidebar { display: none; }
.side-foot { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; border-top: 1px solid var(--border); }
.profile {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border: 0; border-radius: 10px;
  background: none; color: var(--text); text-align: left;
}
.profile:hover { background: var(--accent-soft); }
.avatar {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: var(--accent-text); font-weight: 700; font-size: 14px; font-family: var(--serif);
}
.who { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.who strong { font-size: 14px; font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.who small { font-size: 12px; color: var(--muted); }
.brand { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--muted); padding: 0 8px; }
.brand a { color: var(--muted); text-decoration: none; }
.brand a:hover { color: var(--accent); }
.brand .link { font-size: 11px; }
.icon { border: 0; background: none; color: var(--text); font-size: 20px; line-height: 1; padding: 6px 8px; border-radius: 8px; }
.icon:hover { background: var(--accent-soft); }

/* ---------- Buttons (mirror zulfi-tech.com .btn-primary) ---------- */
.primary {
  background: var(--accent); color: var(--accent-text); border: 0; border-radius: 8px; padding: 10px 16px;
  font-weight: 700; transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.primary:hover:not(:disabled) { background: var(--accent-strong); box-shadow: 0 8px 24px rgba(130,130,145, 0.3); }
.primary:active:not(:disabled) { transform: translateY(1px); }
.primary:disabled { opacity: 0.6; cursor: default; }
.primary.wide { width: 100%; padding: 12px 16px; }
.link { border: 0; background: none; padding: 0; color: var(--accent); font-size: 13px; }
.link:hover { text-decoration: underline; }
.link:disabled { color: var(--muted); text-decoration: none; cursor: default; }
.premium-btn {
  width: 100%; padding: 9px 12px; border-radius: 8px; border: 1px solid var(--accent);
  background: none; color: var(--accent); font-weight: 700;
}
.premium-btn:hover { background: var(--accent-soft); }

/* ---------- Main ---------- */
main { flex: 1; min-width: 0; display: flex; flex-direction: column; height: 100%; height: 100dvh; }
.topbar {
  display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(8px);
}
.wordmark {
  display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text);
  font-family: var(--serif); font-weight: 700; font-size: 20px; letter-spacing: 0.01em;
}
.wordmark .mark { width: 38px; height: 38px; transition: transform 0.35s ease; }
.wordmark:hover .mark { transform: rotate(-8deg) scale(1.06); }
.mode {
  margin-left: auto; display: flex; padding: 3px; gap: 2px; border-radius: 10px;
  background: var(--panel); border: 1px solid var(--border);
}
.mode[hidden] { display: none; }
.mode button {
  border: 0; background: none; color: var(--muted); padding: 5px 10px; border-radius: 7px; font-size: 13px; white-space: nowrap;
}
.mode button[aria-checked="true"] { background: var(--accent); color: var(--accent-text); font-weight: 600; }

#chat {
  flex: 1; overflow-y: auto; padding: 28px 16px;
  /* a faint bronze glow, echoing the zulfi-tech.com hero */
  background: radial-gradient(900px 420px at 85% -10%, var(--accent-soft), transparent 70%);
}
#messages, #welcome { max-width: 800px; margin: 0 auto; }
#welcome { text-align: center; padding-top: 9vh; }
#welcome .eyebrow {
  /* "ZulfiEra Ai": Zulfi in the text colour, Era AI in bronze (no uppercase, so the capital E shows) */
  margin: 0 0 10px; font-family: var(--serif); font-size: 17px; font-weight: 700; letter-spacing: 0.06em; color: var(--text);
}
#welcome h2 { margin: 0 0 10px; font-family: var(--serif); font-size: 34px; font-weight: 700; letter-spacing: -0.01em; }
#welcome p#welcome-sub { color: var(--muted); margin: 0 auto; max-width: 520px; }

/* ---------- Messages ---------- */
.msg { margin: 0 0 22px; animation: rise 0.3s ease-out both; }
.msg.user { display: flex; justify-content: flex-end; }
.msg.user .body {
  background: var(--user-bubble); padding: 10px 14px; border-radius: 16px 16px 4px 16px; max-width: 85%;
  white-space: pre-wrap; border: 1px solid var(--border);
}
.msg.assistant { display: flex; gap: 12px; align-items: flex-start; }
.msg.assistant .bot { flex-shrink: 0; width: 32px; height: 32px; margin-top: 0; }
.msg.assistant .body { flex: 1; min-width: 0; overflow-wrap: break-word; }
.msg .body > :first-child, .msg .body > div > :first-child { margin-top: 0; }
.msg .body > :last-child, .msg .body > div > :last-child { margin-bottom: 0; }
.msg.error .body { color: #dc2626; }
.status { color: var(--muted); font-style: italic; }
.status::before {
  content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%;
  background: var(--accent); vertical-align: middle; animation: pulse 1s ease-in-out infinite alternate;
}
@keyframes pulse { from { opacity: 0.3; transform: scale(0.8); } to { opacity: 1; transform: scale(1.1); } }

.body h1, .body h2, .body h3 { font-family: var(--serif); line-height: 1.3; }
.body a { color: var(--accent); }
.body blockquote { margin: 0; padding-left: 12px; border-left: 3px solid var(--accent); color: var(--muted); }
.body pre {
  position: relative; background: var(--code-bg); border-radius: 10px; padding: 14px; overflow-x: auto;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.body pre code { background: none; padding: 0; color: #EFEFF2; }
/* Drafts (emails, tickets, messages) wrap like normal text; real code keeps its lines. */
.body pre code.language-text, .body pre code.language-plaintext {
  white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--sans); font-size: 14px; line-height: 1.6;
}
.body code { background: var(--accent-soft); padding: 1px 5px; border-radius: 5px; font-size: 0.92em; }
.copy {
  position: absolute; top: 6px; right: 6px; font-size: 12px; padding: 2px 9px;
  border: 1px solid #3A3A42; border-radius: 6px; background: #232329; color: #DEDEE3;
}
.copy:hover { border-color: var(--accent); color: #B4B4C0; }
.body table { border-collapse: collapse; display: block; overflow-x: auto; }
.body th, .body td { border: 1px solid var(--border); padding: 6px 10px; min-width: 120px; vertical-align: top; }
.body th { background: var(--accent-soft); }

figure.gen { margin: 0 0 10px; width: fit-content; max-width: 100%; }
figure.gen img {
  display: block; max-width: min(100%, 512px); max-height: 512px; border-radius: 14px; border: 1px solid var(--border);
}
figure.gen a {
  display: inline-block; margin-top: 8px; padding: 6px 12px; border-radius: 8px; font-size: 13px;
  border: 1px solid var(--border); color: var(--text); text-decoration: none; background: var(--panel);
}
figure.gen a:hover { border-color: var(--accent); color: var(--accent); }
.msg.user .body .thumb { display: block; max-width: 240px; max-height: 240px; border-radius: 10px; margin-bottom: 6px; }
.msg.user .body .thumbs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.msg.user .body .thumbs .thumb { max-width: 140px; max-height: 140px; margin: 0; object-fit: cover; }

/* ---------- Composer ---------- */
#composer {
  display: flex; gap: 8px; align-items: flex-end; width: calc(100% - 32px); max-width: 800px; margin: 10px auto 0;
  padding: 6px; border: 1px solid var(--border); border-radius: 22px;
  /* frosted glass, iOS-style */
  background: color-mix(in srgb, var(--panel) 78%, transparent);
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: border-color 0.2s, box-shadow 0.2s;
}
#composer:focus-within { border-color: var(--accent); box-shadow: 0 6px 28px rgba(130,130,145, 0.18); }
#input {
  flex: 1; min-width: 0; resize: none; max-height: 220px; padding: 10px 6px; border: 0; outline: none;
  background: none; color: var(--text); font: inherit;
  font-size: 16px; /* below 16px, iOS Safari zooms the page on focus */
}
#input::placeholder { color: var(--muted); }
#input { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
#input::-webkit-scrollbar { width: 6px; }
#input::-webkit-scrollbar-button { display: none; } /* no little arrows */
#input::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
/* + menu, tool chip, Think pill, mic */
.plus-wrap { position: relative; flex-shrink: 0; }
.menu {
  position: absolute; bottom: calc(100% + 10px); left: 0; z-index: 20; width: 300px; padding: 6px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow);
}
.menu button {
  display: flex; gap: 12px; align-items: center; width: 100%; padding: 9px 10px; border: 0; border-radius: 9px;
  background: none; color: var(--text); text-align: left;
}
.menu button:hover:not(:disabled) { background: var(--accent-soft); }
.menu button:disabled { opacity: 0.5; cursor: default; }
.menu .mi { font-size: 18px; width: 22px; text-align: center; }
.menu strong { display: block; font-size: 14px; font-weight: 600; }
.menu em { font-style: normal; font-size: 10px; font-weight: 700; margin-left: 6px; padding: 1px 6px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
.menu small { display: block; font-size: 12px; color: var(--muted); }
.input-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tool-chip {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 0 4px; padding: 3px 6px 3px 10px;
  border-radius: 999px; font-size: 13px; background: var(--accent-soft); color: var(--accent); font-weight: 600;
}
.tool-chip button { border: 0; background: none; color: inherit; padding: 0 4px; font-size: 12px; }
#mic.recording { color: #fff; background: #dc2626; animation: pulse 0.9s ease-in-out infinite alternate; }
.file-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; font-size: 13px;
  background: var(--panel); border: 1px solid var(--border); max-width: 320px;
}
.file-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-chip small { color: var(--muted); }
.file-chip .file-chip-hidden { color: var(--accent, #2563eb); font-weight: 600; white-space: nowrap; }
.answer-img-link { display: inline-block; padding: 2px 8px; border: 1px dashed var(--border); border-radius: 6px; font-size: .9em; color: var(--muted); text-decoration: none; overflow-wrap: anywhere; }
a.answer-img-link:hover { color: var(--accent); }
.msg.user .file-chip { margin-bottom: 6px; background: var(--bg); }
.toast {
  position: fixed; left: 50%; bottom: 110px; transform: translateX(-50%); z-index: 40; max-width: calc(100% - 32px);
  padding: 9px 14px; border-radius: 10px; font-size: 14px; background: var(--text); color: var(--bg); box-shadow: var(--shadow);
}

/* Sketch pad */
.sketch-card { max-width: 760px !important; }
.sk-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; justify-content: center; margin: 4px 0 12px; }
.sk-colors { display: flex; gap: 6px; }
.sk-colors button {
  width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--border); background: var(--c); padding: 0;
}
.sk-colors button.on { outline: 2px solid var(--accent); outline-offset: 2px; }
.sk-size { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
#sk-canvas {
  display: block; width: 100%; aspect-ratio: 3 / 2; margin-bottom: 14px; border-radius: 12px; background: #fff;
  border: 1px solid var(--border); touch-action: none; cursor: crosshair;
}

.send { flex-shrink: 0; width: 42px; height: 42px; padding: 0; display: grid; place-items: center; border-radius: 50%; }
.send.stop { border: 1px solid var(--border); background: var(--bg); color: var(--text); }
#attach-preview {
  position: relative; width: fit-content; max-width: 800px; margin: 8px auto 0; padding: 0 16px; align-self: center;
}
#attach-preview[hidden] { display: none; }
#attach-preview img { display: block; height: 72px; border-radius: 10px; border: 1px solid var(--border); }
#attach-preview button {
  position: absolute; top: -8px; right: 8px; width: 22px; height: 22px; border-radius: 50%; border: 0;
  background: var(--text); color: var(--bg); font-size: 11px; line-height: 22px; padding: 0;
}
.quota {
  align-self: center; margin: 8px 16px 0; padding: 5px 12px; border-radius: 999px; font-size: 13px;
  background: var(--accent-soft); color: var(--text); border: 1px solid var(--border);
}
.quota[hidden] { display: none; }
.quota button { margin-left: 6px; }
.disclaimer { text-align: center; font-size: 12px; color: var(--muted); margin: 8px 16px 12px; }
.disclaimer a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.disclaimer a:hover { color: var(--accent); }

/* ---------- Admin dashboard ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.stat { padding: 12px; border-radius: 12px; background: var(--bg); border: 1px solid var(--border); }
.stat b { display: block; font-size: 24px; font-weight: 800; color: var(--accent); }
.stat span { font-size: 12px; color: var(--muted); }
.ad-head { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }
.ad-table-wrap { max-height: 320px; overflow: auto; border: 1px solid var(--border); border-radius: 12px; }
.ad-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ad-table th { position: sticky; top: 0; background: var(--panel); text-align: left; padding: 8px 10px; color: var(--muted); font-weight: 600; }
.ad-table td { padding: 8px 10px; border-top: 1px solid var(--border); white-space: nowrap; }
.ad-table td small { display: block; color: var(--muted); }
.tag { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--accent-soft); color: var(--accent); }
@media (max-width: 760px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Dialogs ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 16px;
  background: rgba(10, 12, 16, 0.6); backdrop-filter: blur(6px);
}
.overlay[hidden] { display: none; }
.overlay .card {
  position: relative; width: 100%; max-width: 520px; max-height: 100%; overflow-y: auto; text-align: center;
  background: var(--panel); border: 1px solid var(--border); border-top: 3px solid var(--accent);
  border-radius: 16px; padding: 30px 24px 26px; box-shadow: var(--shadow);
}
.overlay h2 { margin: 0 0 6px; font-family: var(--serif); font-size: 24px; }
.overlay p { margin: 0 0 20px; color: var(--muted); }
.card-close { position: absolute; top: 12px; right: 12px; font-size: 16px; color: var(--muted); }
#signin input {
  width: 100%; padding: 12px 14px; margin-bottom: 12px; border-radius: 10px; font-size: 16px;
  border: 1px solid var(--border); background: var(--bg); color: var(--text);
}
#signin input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
#signin input.code { text-align: center; font-size: 26px; letter-spacing: 10px; font-weight: 600; font-family: var(--serif); }
.si-reason {
  background: var(--accent-soft); color: var(--text) !important; border-radius: 10px; padding: 10px 12px; font-size: 14px;
  border: 1px solid var(--border);
}
/* Sign in: Google first, email as a quiet alternative */
.signin-card { max-width: 440px !important; }
.overlay .si-sub { margin: 0 0 22px; }
.google-btn {
  display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; padding: 12px 16px;
  border-radius: 10px; border: 1px solid #dadce0; background: #fff; color: #1f1f1f; text-decoration: none;
  font: 600 15px/1.2 "Segoe UI", Roboto, Arial, sans-serif; transition: box-shadow 0.2s, background 0.2s;
}
.google-btn:hover { background: #f8f9fa; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18); }
.google-btn:active { background: #eef0f2; }
.si-or { display: flex; align-items: center; gap: 12px; margin: 18px 0 10px; color: var(--muted); font-size: 12px; }
.si-or::before, .si-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.si-use-email { font-size: 14px; }
.overlay .si-legal { margin: 18px 0 0; font-size: 12px; }
.si-legal a { color: var(--muted); }
.si-legal a:hover { color: var(--accent); }
.avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }

.si-links { display: flex; justify-content: center; gap: 8px; margin-top: 14px; color: var(--muted); font-size: 13px; }
.si-msg { margin: 14px 0 0 !important; font-size: 14px; color: #dc2626 !important; }
.si-msg.ok { color: #16a34a !important; }
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; text-align: left; }
.plan { position: relative; border: 1px solid var(--border); border-radius: 12px; padding: 14px; background: var(--bg); }
.plan.highlight { border-color: var(--accent); background: var(--accent-soft); }
.plan h3 { margin: 0 0 2px; font-size: 17px; font-family: var(--serif); }
.overlay .plan-credits { margin: 0 0 8px; font-size: 13px; color: var(--muted); }
.plan-credits strong { font-family: var(--serif); font-size: 22px; color: var(--accent); }
.overlay .plan-note { margin: -4px 0 16px; font-size: 12px; }
.credits { font-size: 12px; color: var(--muted); padding: 0 8px; }
.plan ul { margin: 0; padding-left: 18px; font-size: 13px; color: var(--muted); }
.plan.highlight ul { color: var(--text); }
.badge {
  position: absolute; top: -10px; right: 10px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700;
  background: var(--accent); color: var(--accent-text);
}
.roles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.roles button {
  padding: 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg); color: var(--text); text-align: left;
  transition: border-color 0.15s, background 0.15s;
}
.roles button:hover, .roles button.selected { border-color: var(--accent); background: var(--accent-soft); }
.skip { display: block; margin: 16px auto 0; color: var(--muted); }
.skip:hover { color: var(--accent); }

#backdrop { position: fixed; inset: 0; z-index: 9; background: rgba(0, 0, 0, 0.45); }

/* iPhone install sheet */
.ios-icon { width: 64px; height: 64px; border-radius: 15px; margin: 0 auto 14px; display: block; }
.ios-steps { text-align: left; margin: 0 0 20px; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; }
.ios-share { display: inline-flex; vertical-align: -3px; color: #0a84ff; }

/* Installed app on iPhone: keep clear of the notch/Dynamic Island and the home bar. */
@supports (padding: env(safe-area-inset-top)) {
  .topbar { padding-top: max(10px, env(safe-area-inset-top)); }
  .disclaimer { margin-bottom: max(12px, env(safe-area-inset-bottom)); }
  #sidebar { padding-top: max(14px, env(safe-area-inset-top)); padding-bottom: max(14px, env(safe-area-inset-bottom)); }
}

/* ---------- Sidebar sections: Projects / Chats ---------- */
.side-section {
  display: flex; align-items: center; justify-content: space-between; padding: 12px 10px 4px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.icon.small { font-size: 15px; padding: 2px 7px; color: var(--muted); }
.icon.small:hover { color: var(--accent); }
.project > .conv { font-weight: 600; }
.project .pj-chats { margin-left: 14px; padding-left: 6px; border-left: 1px solid var(--border); }
.project.open > .conv .twisty { transform: rotate(90deg); }
.twisty { display: inline-block; width: 10px; color: var(--muted); font-size: 10px; transition: transform 0.15s; }
.conv .more { visibility: hidden; border: 0; background: none; color: var(--muted); padding: 0 4px; font-size: 16px; line-height: 1; }
.conv:hover .more, .conv.active .more { visibility: visible; }
.empty-hint { padding: 4px 12px 8px; font-size: 12px; color: var(--muted); }
.chat-menu { position: fixed; width: 220px; z-index: 50; }
.chat-menu .label { padding: 6px 10px 2px; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.chat-menu .danger-item strong { color: #dc2626; }
.pj-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; }
.pj-actions #pj-save { margin-left: auto; }
.project-card { max-width: 560px !important; }
.project-card .st-field { margin-bottom: 14px; }
.chat-project {
  display: inline-flex; gap: 6px; align-items: center; margin-left: 4px; padding: 3px 10px; border-radius: 999px;
  font-size: 12px; color: var(--accent); background: var(--accent-soft); font-family: var(--sans); font-weight: 600;
}

.ghost {
  padding: 11px 16px; border-radius: 8px; border: 1px solid var(--border); background: none; color: var(--muted); font-weight: 600;
}
.ghost.wide { width: 100%; }

/* ---------- Profile button + menu (ChatGPT-style) ---------- */
.profile-wrap { position: relative; }
.profile .chev { margin-left: auto; color: var(--muted); font-size: 18px; }
.profile-menu { bottom: calc(100% + 8px); left: 0; width: 100%; min-width: 240px; }
.profile-menu hr { border: 0; border-top: 1px solid var(--border); margin: 6px 4px; }
.pm-head { display: flex; align-items: center; gap: 10px; padding: 8px 10px; }
.profile-menu .mi { font-size: 16px; }

/* ---------- Settings dialog ---------- */
.settings-card { max-width: 780px !important; text-align: left !important; }
.settings-card h2 { text-align: left; margin-bottom: 16px !important; }
.st-body { display: grid; grid-template-columns: 180px 1fr; gap: 18px; min-height: 340px; }
.st-tabs { display: flex; flex-direction: column; gap: 2px; }
.st-tabs button {
  border: 0; background: none; color: var(--text); text-align: left; padding: 9px 10px; border-radius: 8px; font-size: 14px;
}
.st-tabs button:hover { background: var(--accent-soft); }
.st-tabs button[aria-selected="true"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.st-panels section { display: flex; flex-direction: column; gap: 14px; }
.st-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding-bottom: 12px; border-bottom: 1px solid var(--border);
}
.st-row > span { display: flex; flex-direction: column; min-width: 0; }
.st-row strong, .st-field strong { font-size: 14px; font-weight: 600; }
.st-row small, .st-field small { font-size: 12px; color: var(--muted); }
.st-field { display: flex; flex-direction: column; gap: 6px; }
.st-field input, .st-field textarea, .st-field select, .st-row select {
  width: 100%; padding: 10px 12px; border-radius: 10px; font: inherit; font-size: 15px;
  border: 1px solid var(--border); background: var(--bg); color: var(--text);
}
.st-row select { width: auto; }
.st-field textarea { resize: vertical; min-height: 90px; }
.st-field input:focus, .st-field textarea:focus, .st-field select:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
#st-save { align-self: flex-start; }
.st-saved { color: #16a34a; font-size: 14px; }
.primary.small, .premium-btn.small, .danger.small { width: auto; padding: 7px 14px; font-size: 13px; text-decoration: none; white-space: nowrap; }
.danger { border: 1px solid #dc2626; background: none; color: #dc2626; border-radius: 8px; font-weight: 600; }
.danger:hover { background: rgba(220, 38, 38, 0.1); }
.switch {
  appearance: none; flex-shrink: 0; width: 42px; height: 24px; border-radius: 999px; background: var(--border);
  position: relative; cursor: pointer; transition: background 0.2s;
}
.switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; transition: transform 0.2s;
}
.switch:checked { background: var(--accent); }
.switch:checked::after { transform: translateX(18px); }

/* ---------- Left-edge peek (desktop, sidebar collapsed) ---------- */
#edge { display: none; }
@media (min-width: 761px) {
  body.sidebar-closed #edge { display: block; position: fixed; inset: 0 auto 0 0; width: 14px; z-index: 24; }
  body.sidebar-closed.sidebar-peek #sidebar {
    display: flex; position: fixed; inset: 0 auto 0 0; z-index: 25; box-shadow: var(--shadow);
    animation: peek 0.18s ease-out;
  }
}
@keyframes peek { from { transform: translateX(-30px); opacity: 0; } to { transform: none; opacity: 1; } }

@media (max-width: 760px) {
  #sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 10; width: min(300px, 85vw);
    transform: translateX(-100%); transition: transform 0.2s;
  }
  body.sidebar-open #sidebar { transform: none; }
  #close-sidebar { display: block; }
  .roles, .plans { grid-template-columns: 1fr; }
  #welcome { padding-top: 9vh; }
  #welcome h2 { font-size: 27px; }
  .msg.assistant .bot { width: 24px; height: 24px; }
  .st-body { grid-template-columns: 1fr; min-height: 0; }
  .price-grid { grid-template-columns: 1fr; }
  .pricing-card h2 { font-size: 22px !important; }
  .st-tabs { flex-direction: row; overflow-x: auto; }
  .st-tabs button { white-space: nowrap; }
  .menu { width: min(300px, calc(100vw - 40px)); }
}
@media (min-width: 761px) {
  body.sidebar-closed #sidebar { display: none; }
}

/* ---------- Settings / Admin: keep everything inside the card ---------- */
.settings-card { max-width: 920px !important; width: calc(100vw - 32px); overflow-x: hidden; }
.st-body { grid-template-columns: 180px minmax(0, 1fr); }
.st-panels, .st-panels section { min-width: 0; }
.stat-grid { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.stat b { font-size: 22px; }
.stat span { display: block; line-height: 1.3; }
.ad-table-wrap { max-width: 100%; max-height: 380px; }
.ad-table { min-width: 620px; }
.ad-table td:first-child { white-space: normal; word-break: break-all; min-width: 190px; }
.ad-table th { white-space: nowrap; }
@media (max-width: 760px) {
  .st-body { grid-template-columns: minmax(0, 1fr); }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.settings-card { box-sizing: border-box; max-width: min(920px, calc(100vw - 24px)) !important; }
@media (max-width: 760px) { .settings-card { width: calc(100vw - 24px); padding-left: 16px !important; padding-right: 16px !important; } .ad-table td:first-child { min-width: 160px; } }
.overlay { grid-template-columns: minmax(0, 1fr); }
.overlay .card { justify-self: center; min-width: 0; }
.st-tabs { min-width: 0; }

/* Suggestion cards: keep the text inside the card (iPhone Safari let the one-line subtitle spill out). */
.sg { overflow: hidden; min-width: 0; }
.sg-tx { flex: 1; align-items: stretch; }
.sg-tx strong, .sg-tx small { max-width: 100%; }
@media (max-width: 760px) {
  .sg { align-items: flex-start; }
  .sg-tx strong { font-size: 13.5px; }
  .sg-tx small { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 11.5px; }
}

/* Offline mode (local server): hide what needs the internet - sign-in, plans, image creation, voice. */
body.offline #side-signin, body.offline #go-premium, body.offline #pm-upgrade,
body.offline .sg[data-tool="image"], body.offline #plus-menu [data-action="image"], body.offline #plus-menu [data-action="web"], body.offline #mic { display: none !important; }

/* ---------- Offline & satellite edition dialog ---------- */
.offline-card { max-width: 640px !important; text-align: left !important; }
.off-eyebrow { font-size: 12px !important; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent) !important; margin-bottom: 8px !important; }
.offline-card h2 { text-align: left; }
.off-flow { display: flex; align-items: center; gap: 6px; margin: 4px 0 18px; padding: 14px 10px; border-radius: 14px; background: var(--bg); border: 1px solid var(--border); }
.off-node { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; }
.off-node span { font-size: 22px; }
.off-node strong { font-size: 12.5px; }
.off-node small { font-size: 11px; color: var(--muted); }
.off-node.main strong { color: var(--accent); }
.off-link { flex: 0 0 18px; height: 2px; border-radius: 2px; background: var(--accent); position: relative; overflow: hidden; }
.off-link.sat { background: repeating-linear-gradient(90deg, var(--accent) 0 4px, transparent 4px 7px); animation: offDash 1s linear infinite; background-size: 14px 2px; }
@keyframes offDash { to { background-position: 14px 0; } }
.off-points { margin: 0 0 18px; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 1.45; }
.off-points strong { color: var(--text); }
.off-actions { display: flex; flex-direction: column; gap: 8px; }
.off-actions a.primary { text-align: center; text-decoration: none; display: block; box-sizing: border-box; }
@media (max-width: 520px) {
  .off-flow { flex-wrap: wrap; row-gap: 12px; }
  .off-node { flex: 0 0 40%; }
  .off-link { display: none; }
}
@media (prefers-reduced-motion: reduce) { .off-link.sat { animation: none; } }

/* ---------- Sidebar v2: dark panel, slim New chat, collapsible Quick start ---------- */
#sidebar {
  --text: #E8E8EC; --muted: #9C9CA7; --border: rgba(255, 255, 255, 0.08); --panel: #1C1C21;
  --accent-soft: rgba(130,130,145, 0.16); --bg: #131316;
  background: linear-gradient(180deg, #18181C, #101216); color: var(--text); border-right: 1px solid rgba(255, 255, 255, 0.06);
}
#sidebar .conv.active { background: #232329; }
.new-chat { flex: 1; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; cursor: pointer;
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.10); color: #F7F7F8; font: 600 14.5px var(--sans); text-align: left;
  transition: background 0.15s, border-color 0.15s; }
.new-chat svg { color: #B4B4C0; }
.new-chat:hover { background: rgba(130,130,145, 0.14); border-color: rgba(150,150,165, 0.45); }
.side-section span { color: var(--muted); }
/* Desktop auto-hide: a thin gold handle hints that the sidebar is on the left edge */
@media (min-width: 761px) {
  body.sidebar-closed #edge::after { content: ""; position: absolute; top: 50%; left: 3px; width: 4px; height: 56px; transform: translateY(-50%);
    border-radius: 4px; background: var(--tint); opacity: 0.35; transition: opacity 0.2s; }
  body.sidebar-closed #edge:hover::after { opacity: 0.9; }
  body.sidebar-closed.sidebar-peek #sidebar { box-shadow: 0 0 60px rgba(0, 0, 0, 0.45); }
}
/* Top bar: no ☰; the logo and name sit at the far left (on phones the logo opens the menu) */
#toggle-sidebar { display: none !important; }
.topbar { padding-left: 20px; }
@media (max-width: 760px) { .topbar .wordmark { cursor: pointer; } .topbar { padding-left: 14px; } }

/* ---------- Chat readability: deeper text colour ---------- */
.msg.assistant .body { color: #131316; }
:root[data-theme="dark"] .msg.assistant .body { color: #F2F2F4; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .msg.assistant .body { color: #F2F2F4; } }

/* ---------- Code boxes with a header and an animated Copy button ---------- */
.body pre.has-head { padding: 0 0 14px; }
.body pre.has-head > code { display: block; padding: 0 14px; }
.code-head { position: sticky; left: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 8px 7px 14px; margin-bottom: 12px; background: rgba(255, 255, 255, 0.04); border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px 10px 0 0; }
.code-lang { font: 600 11.5px var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: #9C9CA7; }
.body pre .copy { position: static; display: inline-flex; align-items: center; gap: 6px; font: 600 12px var(--sans); padding: 5px 11px; cursor: pointer;
  border: 1px solid #3A3A42; border-radius: 8px; background: #232329; color: #DEDEE3; transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s; }
.body pre .copy:hover { border-color: var(--accent); color: #B4B4C0; transform: translateY(-1px); }
.body pre .copy.done { background: rgba(34, 197, 94, 0.16); border-color: rgba(74, 222, 128, 0.6); color: #4ade80; animation: copyPop 0.45s ease; }
@keyframes copyPop { 0% { transform: scale(1); } 35% { transform: scale(1.12); } 70% { transform: scale(0.96); } 100% { transform: scale(1); } }

/* Inline code (commands, IPs, paths): click to copy, with a "Copied!" bubble */
.body code.tap-copy { position: relative; cursor: pointer; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; color: #8A4F1E;
  border: 1px solid rgba(130,130,145, 0.25); transition: background 0.15s, border-color 0.15s; }
:root[data-theme="dark"] .body code.tap-copy { color: #DADAE2; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .body code.tap-copy { color: #DADAE2; } }
.body code.tap-copy:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 22%, transparent); }
.body code.tap-copy.copied::after { content: "✓ Copied!"; position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%);
  padding: 3px 9px; border-radius: 6px; background: #16a34a; color: #fff; font: 600 11.5px var(--sans); white-space: nowrap; pointer-events: none;
  animation: copyBubble 1.4s ease forwards; }
@keyframes copyBubble { 0% { opacity: 0; transform: translate(-50%, 4px); } 15% { opacity: 1; transform: translate(-50%, 0); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -4px); } }
@media (prefers-reduced-motion: reduce) { .body pre .copy.done, .body code.tap-copy.copied::after { animation: none; } }

/* ---------- Gemini-style type: Google Sans everywhere, Google Sans Code for code ---------- */
body, button, input, textarea, select { font-family: var(--sans); }
.msg .body { font-size: 16px; line-height: 1.75; letter-spacing: 0.005em; }
.msg.assistant .body strong { font-weight: 600; }
.body code, .body pre code, .body code.tap-copy, .code-lang { font-family: var(--mono); }


.body h1, .body h2, .body h3, .body h4 { font-family: var(--sans); font-weight: 600; letter-spacing: -0.01em; }

/* Start-screen launch offer pill */
.promo {
  display: inline-flex; align-items: center; gap: 10px; max-width: 100%; margin: 0 0 18px; padding: 6px 8px 6px 6px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(130,130,145, 0.45); background: linear-gradient(90deg, rgba(130,130,145, 0.14), rgba(150,150,165, 0.06));
  color: var(--text); font: 500 13.5px var(--sans); transition: transform 0.15s, box-shadow 0.15s;
}
.promo:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(130,130,145, 0.22); }
.promo-tag { padding: 3px 10px; border-radius: 999px; background: linear-gradient(90deg, #7C3AED, #B4B4C0); color: #131316;
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.promo s { color: var(--muted); }
.promo b { color: var(--accent); font-weight: 700; }
.promo-go { color: var(--accent); font-weight: 600; white-space: nowrap; padding-right: 6px; }
@media (max-width: 520px) { .promo-go { display: none; } .promo { font-size: 12.5px; } }

/* ---------- Pricing dialog: Free / Plus / Pro, ₹ or $, add-ons ---------- */
/* One comparison, not floating cards: plans share hairline dividers; the recommended plan is marked by a blue
   rule and label. Prices, limits and wording come from index.html and app.js unchanged. */
.pricing-card { max-width: 1000px !important; padding-top: 0 !important; overflow-x: hidden; }
.pricing-card h2 { font-size: 26px !important; font-weight: 600; letter-spacing: -0.01em; }
.offer-ribbon {
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 0 -24px 22px; padding: 10px 44px;
  border-bottom: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 13px;
}
.offer-tag { padding: 1px 7px; border-radius: 4px; border: 1px solid color-mix(in srgb, var(--tint) 45%, transparent); color: var(--tint);
  font: 500 10.5px var(--mono); letter-spacing: 0.08em; }
.pr-controls { display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 22px; }
.billing, .currency { display: inline-flex; gap: 2px; padding: 2px; margin: 0; border-radius: 7px; border: 1px solid var(--border); background: var(--bg); }
.billing button, .currency button { border: 0; background: none; color: var(--muted); padding: 6px 12px; border-radius: 5px; font: 500 13px var(--sans); cursor: pointer; }
.billing button:hover, .currency button:hover { color: var(--text); }
.billing button[aria-checked="true"], .currency button[aria-checked="true"] { background: var(--accent); color: var(--accent-text); }
.billing .save { margin-left: 6px; padding: 0 5px; border-radius: 3px; font: 500 10.5px var(--mono); color: var(--tint); background: var(--tint-soft); }
.billing button[aria-checked="true"] .save { color: var(--accent-text); background: color-mix(in srgb, var(--accent-text) 20%, transparent); }
.price-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-bottom: 18px; text-align: left;
  background: var(--border); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.price-card { position: relative; display: flex; flex-direction: column; padding: 22px 20px; background: var(--panel); }
.price-card.featured { box-shadow: inset 0 3px 0 var(--tint); }
.price-card h3 { margin: 0 0 4px; font: 600 18px var(--sans); }
.price-card .tagline { margin: 0 0 14px; font-size: 13px; color: var(--muted); }
.price-card .badge { top: 21px; right: 18px; padding: 1px 7px; border-radius: 4px; font: 500 10.5px var(--mono); letter-spacing: 0.06em;
  text-transform: uppercase; background: var(--tint); color: var(--panel); }
.price-card .badge.alt { background: none; color: var(--muted); border: 1px solid var(--border); }
.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.price .amount { font: 600 34px/1.1 var(--sans); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.price .per { color: var(--muted); font-size: 13px; }
.price .was { color: var(--faint); font-size: 16px; font-weight: 400; text-decoration-thickness: 1.5px; }
.price .was:empty { display: none; }
.overlay .billed { margin: 4px 0 16px; min-height: 18px; font: 400 12px var(--mono); color: var(--muted); }
.price-card .primary.wide, .price-card .ghost.wide { padding: 10px 16px; }
.primary.outline { background: none; color: var(--text); border: 1px solid var(--rule-strong); }
.primary.outline:hover:not(:disabled) { background: var(--hover); }
.price-card .ghost:disabled { cursor: default; color: var(--muted); }
.feats { list-style: none; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; }
.feats li { position: relative; padding-left: 20px; }
.feats li::before { content: ""; position: absolute; left: 2px; top: 0.5em; width: 9px; height: 5px;
  border-left: 1.5px solid var(--tint); border-bottom: 1.5px solid var(--tint); transform: rotate(-45deg); }
.feats b { font-weight: 600; }
.soon { display: inline-block; margin-left: 6px; padding: 0 5px; border-radius: 3px; vertical-align: 1px;
  font: 500 10px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; background: var(--tint-soft); color: var(--tint); }
.soon.biz { background: none; color: var(--muted); border: 1px solid var(--border); }
.addon-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin: 0 0 14px; text-align: left; }
.addon { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; align-items: start; padding: 18px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--bg); }
.addon-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 8px; background: var(--tint-soft); color: var(--tint); }
.addon h3 { margin: 2px 0 6px; font: 600 16px var(--sans); }
.overlay .addon p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.addon-points { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.addon-points li { padding: 2px 8px; border-radius: 4px; font-size: 12px; border: 1px solid var(--border); color: var(--text); }
.addon > button { grid-column: 1 / -1; margin-top: 12px; width: 100%; }
.overlay .plan-note { margin: 0 0 4px; font: 400 12px var(--mono); color: var(--muted); }
@media (max-width: 860px) {
  .price-grid { grid-template-columns: minmax(0, 1fr); }
  .price-card.featured { order: -1; } /* recommended plan first on narrow screens */
  .offer-ribbon { padding: 10px 40px; font-size: 12.5px; }
  .addon-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Brand name: modern sans, sparkle in place of the dot on the i of "Zulfi" ---------- */
.zw { font-family: "Plus Jakarta Sans", var(--sans); font-weight: 800; letter-spacing: -0.02em; }
.zi { position: relative; }
.zi::after { content: ""; position: absolute; left: 50%; top: -0.40em; width: 0.58em; height: 0.58em; transform: translateX(-50%); pointer-events: none;
  background: var(--zi-spark, #B4B4C0); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 2 2'%3E%3Cpath d='M0-1C.07-.34.28-.1.6 0 .28.1.07.34 0 1-.07.34-.28.1-.6 0-.28-.1-.07-.34 0-1Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 2 2'%3E%3Cpath d='M0-1C.07-.34.28-.1.6 0 .28.1.07.34 0 1-.07.34-.28.1-.6 0-.28-.1-.07-.34 0-1Z'/%3E%3C/svg%3E") center / contain no-repeat; }
.wordmark { font-size: 21px; }
.wordmark .mark { border-radius: 10px; overflow: hidden; }
.wordmark:hover .mark { transform: scale(1.06); }
.msg.assistant .bot img { border-radius: 8px; }
:root { --zi-spark: #7C3AED; }
:root[data-theme="dark"] { --zi-spark: #F2B233; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --zi-spark: #F2B233; } }
.wordmark .mark { box-shadow: 0 2px 8px rgba(19,19,22,.18); }
:root[data-theme="dark"] .wordmark .mark { box-shadow: 0 0 0 1px rgba(255,255,255,.14); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wordmark .mark { box-shadow: 0 0 0 1px rgba(255,255,255,.14); } }

/* Blade Z as the first letter of the name (no tile). Bars are gold; blade and glint follow the theme. */
.bz { display: inline-block; width: 1.044em; height: 1.223em; position: relative; top: 0.228em; margin-right: 0.01em; vertical-align: baseline; overflow: visible; }
.bz-solo { display: block; width: 60px; height: 70px; margin: 0 auto 12px; overflow: visible; }
:root { --bz-blade: #5F5F6B; --bz-spark: #8B5CF6; }
:root[data-theme="dark"] { --bz-blade: #E3E6EB; --bz-spark: #F2B233; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bz-blade: #E3E6EB; --bz-spark: #F2B233; } }
.msg.assistant .bot { display: grid; place-items: center; }
.msg.assistant .bot .bz-solo { width: 26px; height: 28px; margin: 0; }
@media (max-width: 760px) { .msg.assistant .bot .bz-solo { width: 20px; height: 22px; } }
.wordmark .zw { font-size: 24px; }

/* ---------- Slimmer chat box ---------- */
#composer, body:has(#welcome:not([hidden])) #composer { padding: 4px 5px 4px 8px; border-radius: 24px; gap: 6px; align-items: center;
  box-shadow: 0 4px 16px rgba(19,19,22, 0.07); }
#composer:focus-within { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); box-shadow: 0 4px 18px rgba(130,130,145, 0.12); }
#input { padding: 7px 6px; line-height: 1.45; }
.send { width: 36px; height: 36px; }
.send svg { width: 17px; height: 17px; }
body:has(#welcome:not([hidden])) #composer { max-width: 720px; }

/* ---------- Sidebar v3: brand row + toggle; collapsed = slim rail with only the blade Z ---------- */
#sidebar { --bz-blade: #E3E6EB; --bz-spark: #F2B233; transition: width .2s ease, padding .2s ease; overflow: hidden; }
.side-brand { display: flex; align-items: center; min-height: 42px; padding: 0 2px 0 8px; margin-bottom: 12px; }
.rail-z { flex: none; display: inline-flex; align-items: flex-end; height: 34px; padding: 0; border: 0; background: none; cursor: pointer; font-size: 25px; line-height: 1; transition: transform .15s; }
.rail-z .bz { top: 0; }
.rail-z:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }
.side-wordmark { font-size: 25px; line-height: 1; height: 34px; display: inline-flex; align-items: flex-end; padding-bottom: 1px; color: #F7F7F8; white-space: nowrap; }
.side-wordmark .accent { color: #B4B4C0; }
.side-collapse { margin-left: auto; color: #9C9CA7; border-radius: 8px; padding: 6px; }
.side-collapse:hover { color: #F7F7F8; background: rgba(255, 255, 255, .06); }
.side-head { margin-bottom: 4px; }
@media (min-width: 761px) {
  .topbar .wordmark { display: none; }                 /* the brand lives in the sidebar on desktop */
  body.rail #sidebar { width: 64px; padding: 16px 8px; }
  body.rail #sidebar > :not(.side-brand):not(.rail-nav):not(.side-foot) { display: none !important; }
  body.rail .side-wordmark, body.rail .side-collapse { display: none; }
  body.rail .side-brand { justify-content: center; padding: 0; }
  body.rail .rail-z:hover { transform: scale(1.1); }
}

/* Bug fix: the chat "⋯" menu inherited the composer menus' bottom anchor and collapsed to a thin bar. */
.chat-menu { bottom: auto; }
/* Bug fix: the ▶ arrow on a project stretched across the row and pushed the name to the middle. */
.conv .twisty { flex: none; }

/* Footer links */
.disclaimer a { font-weight: 700; color: var(--text); }

/* ---------- Sidebar follows the theme (light in light mode, dark in dark mode); no black rail ---------- */
:root {
  --sb-bg: #F4F4F6; --sb-text: #1A1A1F; --sb-muted: #66666F; --sb-border: rgba(19,19,22, 0.08); --sb-hover: rgba(19,19,22, 0.05);
  --sb-active: #FFFFFF; --sb-word: #1E1E24; --sb-accent: #7C3AED; --sb-blade: #5F5F6B; --sb-spark: #8B5CF6;
  --sb-btn: #FFFFFF; --sb-btn-border: rgba(19,19,22, 0.10);
}
:root[data-theme="dark"] {
  --sb-bg: #18181C; --sb-text: #E8E8EC; --sb-muted: #9C9CA7; --sb-border: rgba(255, 255, 255, 0.08); --sb-hover: rgba(255, 255, 255, 0.05);
  --sb-active: #232329; --sb-word: #F7F7F8; --sb-accent: #B4B4C0; --sb-blade: #E3E6EB; --sb-spark: #F2B233;
  --sb-btn: rgba(255, 255, 255, 0.04); --sb-btn-border: rgba(255, 255, 255, 0.10);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sb-bg: #18181C; --sb-text: #E8E8EC; --sb-muted: #9C9CA7; --sb-border: rgba(255, 255, 255, 0.08); --sb-hover: rgba(255, 255, 255, 0.05);
    --sb-active: #232329; --sb-word: #F7F7F8; --sb-accent: #B4B4C0; --sb-blade: #E3E6EB; --sb-spark: #F2B233;
    --sb-btn: rgba(255, 255, 255, 0.04); --sb-btn-border: rgba(255, 255, 255, 0.10);
  }
}
#sidebar {
  --text: var(--sb-text); --muted: var(--sb-muted); --border: var(--sb-border); --panel: var(--sb-active); --bg: var(--sb-bg);
  --bz-blade: var(--sb-blade); --bz-spark: var(--sb-spark);
  background: var(--sb-bg); color: var(--sb-text); border-right: 1px solid var(--sb-border);
}
#sidebar .conv.active { background: var(--sb-active); box-shadow: 0 1px 3px rgba(19,19,22, 0.06); }
#sidebar .conv:hover:not(.active) { background: var(--sb-hover); }
.new-chat { background: var(--sb-btn); border-color: var(--sb-btn-border); color: var(--sb-text); }
.new-chat svg { color: var(--sb-accent); }
.side-wordmark { color: var(--sb-word); }
.side-wordmark .accent { color: var(--sb-accent); }
.side-collapse { color: var(--sb-muted); }
.side-collapse:hover { color: var(--sb-text); background: var(--sb-hover); }
@media (min-width: 761px) {
  body.rail #sidebar { background: transparent; border-right-color: transparent; }   /* collapsed: just the Z on the page */
}

/* ---------- Top-right actions: language, AI Agents, Offline AI ---------- */
.lang-wrap { position: relative; }
.lang-menu { top: calc(100% + 8px); bottom: auto; left: auto; right: 0; width: 290px; max-height: min(62vh, 470px); overflow-y: auto; padding: 8px; z-index: 40; }
.lang-menu input { width: 100%; padding: 9px 12px; margin-bottom: 6px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font: inherit; font-size: 14px; }
.lang-menu input:focus { outline: none; border-color: var(--accent); }
.lang-group { padding: 10px 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.lang-menu [role=option] { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; width: 100%; padding: 8px 10px; }
.lang-menu [role=option] strong { font-size: 14.5px; font-weight: 500; }
.lang-menu [role=option] small { font-size: 12px; text-align: right; }
.lang-menu [role=option][aria-selected="true"] { background: var(--accent-soft); }
.lang-menu [role=option][aria-selected="true"] strong { color: var(--accent); font-weight: 700; }
.rail-z .bz { top: 0.228em; }
.rail-z { overflow: visible; }

/* ---------- Sidebar v4 (Gemini-style): links under New chat, icon rail when collapsed ---------- */
#sidebar { padding-top: 8px; }                                   /* brand row lines up with the top-right buttons */
.side-brand { min-height: 40px; margin-bottom: 10px; }
.side-links { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 4px; }
.side-link { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border: 0; border-radius: 10px; background: none; color: var(--text);
  font: 500 14.5px var(--sans); text-align: left; cursor: pointer; }
.side-link svg { color: var(--muted); flex: none; }
.side-link:hover { background: var(--sb-hover); }
.side-link:hover svg { color: var(--accent); }
.rail-nav, .rail-settings { display: none; }
.rail-btn { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 12px; background: none; color: var(--sb-muted); cursor: pointer;
  transition: background .15s, color .15s; }
.rail-btn:hover { background: var(--sb-hover); color: var(--sb-text); }
.rail-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (min-width: 761px) {
  body.rail #sidebar { padding: 8px 10px 14px; overflow: visible; align-items: center; }
  body.rail .rail-nav { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 8px; }
  body.rail .side-foot { margin-top: auto; border-top: 0; padding-top: 0; align-items: center; gap: 6px; }
  body.rail .side-foot > :not(.profile-wrap):not(.rail-settings) { display: none !important; }
  body.rail .rail-settings { display: grid; }
  body.rail .profile { padding: 4px; width: 44px; justify-content: center; background: none; border: 0; }
  body.rail .profile .who, body.rail .profile > :not(.avatar) { display: none; }
  body.rail .profile-menu { left: 0; width: 280px; z-index: 60; }
}

/* ---------- Search chats view ---------- */
body.searching #chat, body.searching #composer, body.searching .disclaimer, body.searching #quota, body.searching #attach-preview { display: none !important; }
#search-view { flex: 1; overflow-y: auto; padding: 56px 16px 40px; }
.sv-inner { max-width: 840px; margin: 0 auto; }
.sv-box { display: flex; align-items: center; gap: 14px; padding: 16px 24px; border-radius: 999px; background: var(--panel); border: 1px solid var(--border);
  box-shadow: 0 6px 24px rgba(19,19,22, .06); color: var(--muted); cursor: text; }
.sv-box:focus-within { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.sv-box input { flex: 1; min-width: 0; border: 0; outline: none; background: none; color: var(--text); font: inherit; font-size: 17px; }
#sv-heading { margin: 34px 0 10px; padding: 0 8px; font: 500 15px var(--sans); color: var(--muted); }
.sv-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; width: 100%; padding: 14px 8px; border: 0; border-radius: 12px;
  background: none; color: var(--text); font: 400 16.5px var(--sans); text-align: left; cursor: pointer; }
.sv-row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-row small { flex: none; font-size: 14px; color: var(--muted); }
.sv-row:hover { background: color-mix(in srgb, var(--panel) 70%, transparent); }
.sv-empty { padding: 8px; color: var(--muted); }
@media (max-width: 760px) { #search-view { padding-top: 20px; } .sv-box { padding: 13px 18px; } }
#sidebar .rail-settings { display: none; }
@media (min-width: 761px) { body.rail #sidebar .rail-settings { display: grid; } }

/* ---------- Drafts (emails, messages): letter card instead of the dark code box ---------- */
.draft { margin: 12px 0; background: var(--panel); border: 1px solid var(--border); border-radius: 16px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(19,19,22, 0.04), 0 12px 30px -16px rgba(120, 80, 30, 0.30); }
.draft header { display: flex; align-items: center; gap: 10px; padding: 11px 12px 11px 14px; border-bottom: 1px solid var(--border); }
.draft-ic { width: 30px; height: 30px; flex: none; border-radius: 9px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.draft-ttl { display: grid; line-height: 1.25; margin-right: auto; min-width: 0; }
.draft-ttl b { font: 700 14px var(--sans); }
.draft-ttl small { font-size: 12px; color: var(--muted); }
.draft-copy { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--accent); color: var(--accent-text); font: 600 13px var(--sans); transition: transform .12s, background .15s; }
.draft-copy:hover { background: var(--accent-strong); transform: translateY(-1px); }
:root[data-theme="dark"] .draft-copy:hover { color: #FFFFFF; }
.draft-copy.done { background: #16A34A; color: #FFFFFF; animation: copyPop 0.45s ease; }
.draft-body { padding: 16px 18px 6px; white-space: pre-wrap; overflow-wrap: anywhere; font: 400 15.5px/1.72 var(--sans); }
.draft footer { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 16px 14px; }
.draft-tweak { padding: 6px 13px; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: inherit; cursor: pointer; font: 500 13px var(--sans); }
.draft-tweak:hover { border-color: var(--accent); color: var(--accent); }
.draft-copy:focus-visible, .draft-tweak:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .draft-copy.done { animation: none; } }

/* ---------- Lists and data: exact-copy box with Copy all + Download ---------- */
.draft.data .draft-body { max-height: 420px; overflow: auto; padding: 14px 18px 16px; font: 400 14px/1.7 var(--mono); }
.draft-dl { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border);
  background: transparent; color: inherit; cursor: pointer; font: 600 13px var(--sans); }
.draft-dl:hover { border-color: var(--accent); color: var(--accent); }
.draft-dl:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 520px) { .draft-dl span { display: none; } .draft-dl { padding: 7px 9px; } }

/* ---------- Big pastes: a "Pasted text" document card in the user's message ---------- */
.paste-card { margin: 0 0 8px; min-width: min(320px, 70vw); max-width: 100%; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); overflow: hidden; text-align: left; }
.paste-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; background: none; color: inherit; cursor: pointer; text-align: left; font: inherit; }
.paste-ic { width: 34px; height: 34px; flex: none; border-radius: 9px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.paste-ttl { display: grid; line-height: 1.25; margin-right: auto; min-width: 0; }
.paste-ttl b { font: 700 14px var(--sans); }
.paste-ttl small { font-size: 12px; color: var(--muted); }
.paste-toggle { font: 600 12.5px var(--sans); color: var(--accent); }
.paste-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.paste-body { margin: 0; max-height: 320px; overflow: auto; padding: 12px 14px; border-top: 1px solid var(--border);
  white-space: pre-wrap; overflow-wrap: anywhere; font: 400 13px/1.6 var(--mono); }
.msg.user .body:has(.paste-card) { max-width: min(560px, 85%); }

/* ---------- "Continue" when a long answer hit the length limit ---------- */
.continue-btn { display: inline-flex; align-items: baseline; gap: 10px; margin-top: 12px; padding: 9px 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--accent); background: var(--accent-soft); color: inherit; font: 600 14px var(--sans); }
.continue-btn small { font-weight: 400; font-size: 12.5px; color: var(--muted); }
.continue-btn:hover { background: var(--accent); color: var(--accent-text); }
.continue-btn:hover small { color: #FFFFFF; }
.continue-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.body pre.paste-body { background: var(--panel); color: var(--text); border: 0; border-top: 1px solid var(--border); border-radius: 0; padding: 12px 14px; }

/* Visually hidden, still read by screen readers and search engines (the page's main heading). */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Several attachments at once (photo + file + pasted text), each with its own remove button */
#attach-preview { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
#attach-preview .att-item { position: relative; padding-top: 6px; }
#attach-preview .att-item button { top: -2px; right: -8px; }
#attach-preview .att-item .file-chip { margin: 0; }

/* ---------- Brand v6: swirl mark beside the name; "Era Ai" in a purple fade (Royal Purple & Gold) ---------- */
.bz { width: 1.12em; height: 1.12em; top: 0.18em; margin-right: 0.26em; }
.bz-solo { width: 60px; height: 60px; }
.msg.assistant .bot .bz-solo { width: 26px; height: 26px; }
@media (max-width: 760px) { .msg.assistant .bot .bz-solo { width: 22px; height: 22px; } }
.zw .accent, .side-wordmark .accent, .zw > span:last-child {
  background: linear-gradient(90deg, #E4E4EA, #A855F7 50%, #7C3AED); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root[data-theme="dark"] .zw .accent, :root[data-theme="dark"] .zw > span:last-child { background-image: linear-gradient(90deg, #F3E8FF, #C084FC 45%, #8B5CF6); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .zw .accent, :root:not([data-theme="light"]) .zw > span:last-child { background-image: linear-gradient(90deg, #F3E8FF, #C084FC 45%, #8B5CF6); } }
.side-wordmark .accent { background-image: linear-gradient(90deg, #F3E8FF, #C084FC 45%, #8B5CF6); }
/* Light mode: deeper purple fade so "Era Ai" reads on white/lavender; dark mode keeps the bright fade */
.zw .accent, .zw > span:last-child, .side-wordmark .accent { background-image: linear-gradient(90deg, #A855F7, #7C3AED 50%, #5B21B6); }
:root[data-theme="dark"] :is(.zw .accent, .zw > span:last-child, .side-wordmark .accent) { background-image: linear-gradient(90deg, #F3E8FF, #C084FC 45%, #8B5CF6); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(.zw .accent, .zw > span:last-child, .side-wordmark .accent) { background-image: linear-gradient(90deg, #F3E8FF, #C084FC 45%, #8B5CF6); } }

/* ---------- Colour v7: neutral app, purple only as a brand touch ---------- */
/* Primary actions use neutral ink: dark on light, light on dark (like Gemini / ChatGPT). */
:root { --accent: #1A1A1F; --accent-strong: #3A3A42; --accent-text: #FFFFFF; --brand: #7C3AED; }
:root[data-theme="dark"] { --accent: #ECECF1; --accent-strong: #FFFFFF; --accent-text: #131316; --brand: #A78BFA; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --accent: #ECECF1; --accent-strong: #FFFFFF; --accent-text: #131316; --brand: #A78BFA; } }
.draft-copy:hover { background: var(--accent-strong); }
.draft-copy.done { color: #FFFFFF; }


/* ---------- Logo v2: deeper, richer petals so the swirl reads on white and on charcoal ---------- */
#zmv stop:nth-child(1) { stop-color: #3B0F8C; } #zmv stop:nth-child(2) { stop-color: #6D28D9; } #zmv stop:nth-child(3) { stop-color: #8B5CF6; }
#zmb stop:nth-child(1) { stop-color: #1E3A8A; } #zmb stop:nth-child(2) { stop-color: #1D4ED8; } #zmb stop:nth-child(3) { stop-color: #3B82F6; }
#zmg stop:nth-child(1) { stop-color: #78350F; } #zmg stop:nth-child(2) { stop-color: #B45309; } #zmg stop:nth-child(3) { stop-color: #E59E0B; }
:root[data-theme="dark"] #zmv stop:nth-child(1) { stop-color: #5B21B6; } :root[data-theme="dark"] #zmv stop:nth-child(2) { stop-color: #9333EA; } :root[data-theme="dark"] #zmv stop:nth-child(3) { stop-color: #C084FC; }
:root[data-theme="dark"] #zmb stop:nth-child(1) { stop-color: #1D4ED8; } :root[data-theme="dark"] #zmb stop:nth-child(2) { stop-color: #3B82F6; } :root[data-theme="dark"] #zmb stop:nth-child(3) { stop-color: #93C5FD; }
:root[data-theme="dark"] #zmg stop:nth-child(1) { stop-color: #92400E; } :root[data-theme="dark"] #zmg stop:nth-child(2) { stop-color: #F59E0B; } :root[data-theme="dark"] #zmg stop:nth-child(3) { stop-color: #FCD34D; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #zmv stop:nth-child(1) { stop-color: #5B21B6; } :root:not([data-theme="light"]) #zmv stop:nth-child(2) { stop-color: #9333EA; } :root:not([data-theme="light"]) #zmv stop:nth-child(3) { stop-color: #C084FC; }
  :root:not([data-theme="light"]) #zmb stop:nth-child(1) { stop-color: #1D4ED8; } :root:not([data-theme="light"]) #zmb stop:nth-child(2) { stop-color: #3B82F6; } :root:not([data-theme="light"]) #zmb stop:nth-child(3) { stop-color: #93C5FD; }
  :root:not([data-theme="light"]) #zmg stop:nth-child(1) { stop-color: #92400E; } :root:not([data-theme="light"]) #zmg stop:nth-child(2) { stop-color: #F59E0B; } :root:not([data-theme="light"]) #zmg stop:nth-child(3) { stop-color: #FCD34D; } }

/* ---------- Pro chat (8 Oct 2026) ---------- */
/* Collapsed rail: no settings gear (Settings lives in the profile menu) */
#sidebar .rail-settings, body.rail #sidebar .rail-settings { display: none !important; }

/* Bolder, easier-to-read answers */
.msg .body { font-weight: 450; }
.msg.assistant .body { color: #0E0E11; }
:root[data-theme="dark"] .msg.assistant .body { color: #F4F4F6; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .msg.assistant .body { color: #F4F4F6; } }
.msg.assistant .body :is(strong, b) { font-weight: 700; }
.msg.assistant .body :is(h1, h2, h3) { font-family: var(--sans); font-weight: 700; letter-spacing: -.01em; }

/* Pro email card */
.draft { border-radius: 18px; box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 14px 34px -18px rgba(0,0,0,.35); }
.draft header { padding: 13px 14px 13px 16px; }
.draft-ttl b { font-size: 14.5px; }
.draft-subject { display: flex; align-items: baseline; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--border); }
.draft-subject span { flex: none; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.draft-subject b { font-size: 15.5px; font-weight: 700; }
.draft-body { font-weight: 450; padding: 18px 20px 10px; }
.draft footer { align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--border); padding: 12px 16px; margin-top: 8px; }
.draft-tweaks { display: flex; flex-wrap: wrap; gap: 8px; }
.draft-gmail { font: 600 13px var(--sans); color: var(--text); text-decoration: none; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border); white-space: nowrap; }
.draft-gmail:hover { border-color: var(--text); }
.draft-gmail:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ---------- Code files: file cards, project box, side viewer ---------- */
.file-card, .project-box { margin: 12px 0; border: 1px solid var(--border); border-radius: 16px; background: var(--panel); overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 12px 30px -20px rgba(0,0,0,.35); }
.file-card header, .project-box header { display: flex; align-items: center; gap: 10px; padding: 11px 12px 11px 14px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.fc-ic { width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center; background: #FFF4DB; color: #B45309; }
:root[data-theme="dark"] .fc-ic { background: rgba(242,178,51,.14); color: #F2B233; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fc-ic { background: rgba(242,178,51,.14); color: #F2B233; } }
.fc-ttl { display: grid; line-height: 1.25; margin-right: auto; min-width: 0; }
.fc-ttl b { font: 600 14.5px var(--mono); overflow-wrap: anywhere; }
.fc-ttl small { font-size: 12px; color: var(--muted); }
.fc-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.fc-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: transparent;
  color: var(--text); font: 600 12.5px var(--sans); cursor: pointer; }
.fc-btn:hover { border-color: var(--text); }
.fc-btn.done { color: #16A34A; border-color: #16A34A; }
.fc-btn:focus-visible, .fc-more:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.fc-code { margin: 0; border-radius: 0 !important; border: 0 !important; max-height: none; overflow: auto; position: relative; }
.file-card.collapsed .fc-code { max-height: 330px; overflow: hidden; }
.file-card.collapsed .fc-code::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 70px; background: linear-gradient(transparent, var(--code-bg)); }
.fc-code code { display: block; padding: 14px 16px !important; }
.fc-more { display: block; width: 100%; padding: 9px; border: 0; border-top: 1px solid var(--border); background: transparent; color: var(--text); font: 600 13px var(--sans); cursor: pointer; }
.fc-foot { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 10px 14px; border-top: 1px solid var(--border); font-size: 13px; color: var(--muted); }
.fc-hint { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fc-hint b { color: var(--text); font-weight: 600; }
.fc-hint svg { flex: none; }
.pb-tree { margin: 0; padding: 14px 18px; background: transparent !important; border: 0 !important; font: 500 13.5px/1.7 var(--mono); color: var(--text); overflow-x: auto; }
.pb-note { margin: 0; padding: 0 18px 14px; font-size: 13px; color: var(--muted); }

.file-viewer { position: fixed; top: 0; right: 0; bottom: 0; width: min(760px, 100vw); z-index: 80; display: flex; flex-direction: column;
  background: var(--panel); border-left: 1px solid var(--border); box-shadow: -24px 0 60px rgba(0,0,0,.25); transform: translateX(105%); transition: transform .28s ease; }
.file-viewer.open { transform: none; }
.file-viewer header { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.fv-ttl { display: grid; margin-right: auto; min-width: 0; } .fv-ttl b { font: 600 15px var(--mono); overflow-wrap: anywhere; } .fv-ttl small { font-size: 12px; color: var(--muted); }
.file-viewer header button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--text); font: 600 12.5px var(--sans); cursor: pointer; }
.file-viewer .fv-x { padding: 7px 10px; }
.fv-body { flex: 1; display: flex; overflow: auto; background: var(--code-bg); }
.fv-gutter, .fv-code { margin: 0; padding: 14px 0; font: 13.5px/1.65 var(--mono); border: 0 !important; border-radius: 0 !important; background: transparent !important; }
.fv-gutter { flex: none; padding: 14px 10px 14px 14px; text-align: right; color: #6B6B76; user-select: none; position: sticky; left: 0; background: var(--code-bg) !important; }
.fv-code { flex: 1; overflow: visible; } .fv-code code { padding: 0 18px 0 6px !important; white-space: pre; }
@media (max-width: 640px) { .fc-btn span { display: none; } .fc-btn { padding: 7px 9px; } }
.body pre.fc-code { padding: 0 !important; }
.project-box .fc-ttl b { font-family: var(--sans); font-size: 15px; }
.fv-code code.hljs, .fv-code code { background: transparent !important; } .fv-body { align-items: flex-start; }

/* ---------- Files v2: compact clickable cards, project map, side panel beside the chat ---------- */
.file-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.file-card .fc-main { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 14px; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; font: inherit; border-radius: 16px 0 0 0; }
.file-card .fc-main:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
.file-card .fc-main:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.fc-role { flex: none; font: 600 11.5px var(--sans); padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--muted); white-space: nowrap; }
.kind-entry .fc-role { background: #DCFCE7; color: #166534; }
:root[data-theme="dark"] .kind-entry .fc-role { background: rgba(34,197,94,.16); color: #86EFAC; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kind-entry .fc-role { background: rgba(34,197,94,.16); color: #86EFAC; } }
.fc-open { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; font: 600 12.5px var(--sans); color: var(--muted); white-space: nowrap; }
.file-card .fc-main:hover .fc-open { color: var(--text); }
.file-card .fc-actions { padding-right: 12px; }
.file-card .fc-foot { grid-column: 1 / -1; }
@media (max-width: 640px) { .fc-role, .fc-open { display: none; } }

.pb-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 0; }
.pb-grid:has(.pb-flow) .pb-tree { border-right: 1px solid var(--border); }
@media (max-width: 760px) { .pb-grid { grid-template-columns: 1fr; } .pb-grid:has(.pb-flow) .pb-tree { border-right: 0; border-bottom: 1px solid var(--border); } }
.project-box .pb-tree { display: flex; flex-direction: column; padding: 10px 8px; font: 500 13.5px var(--mono); }
.pb-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px calc(8px + var(--d) * 20px); border-radius: 9px; color: var(--text); min-width: 0; }
.pb-row.dir { color: var(--muted); } .pb-row.dir b { font-weight: 600; color: var(--text); }
.pb-row.file { border: 0; background: transparent; font: inherit; cursor: pointer; text-align: left; }
.pb-row.file:hover { background: color-mix(in srgb, var(--text) 5%, transparent); }
.pb-row.file:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.pb-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-role { margin-left: auto; font: 500 11.5px var(--sans); color: var(--muted); white-space: nowrap; }
.pb-dot { width: 9px; height: 9px; border-radius: 3px; flex: none; background: #94A3B8; }
.pb-dot.kind-entry { background: #22C55E; } .pb-dot.kind-deps { background: #F59E0B; } .pb-dot.kind-config, .pb-dot.kind-secret { background: #8B5CF6; }
.pb-dot.kind-style { background: #EC4899; } .pb-dot.kind-page { background: #3B82F6; } .pb-dot.kind-data { background: #0EA5E9; }
.pb-flow { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.pb-flow-h { font: 600 12px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pb-link { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pb-chip { font: 600 12.5px var(--mono); padding: 5px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel); color: var(--text); cursor: pointer; white-space: nowrap; }
.pb-chip:hover { border-color: var(--text); }
.pb-arrow { position: relative; flex: 1; min-width: 46px; height: 18px; display: grid; place-items: center; }
.pb-arrow i { position: absolute; left: 0; right: 6px; top: 50%; height: 0; border-top: 1.5px dashed var(--muted); }
.pb-arrow::after { content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); border: 5px solid transparent; border-left: 7px solid var(--muted); border-right: 0; }
.pb-arrow em { position: relative; font: 600 11px var(--sans); font-style: normal; color: var(--muted); background: var(--panel); padding: 0 6px; }

.fv-tabs { display: flex; gap: 4px; padding: 8px 12px 0; border-bottom: 1px solid var(--border); overflow-x: auto; }
.fv-tabs button { flex: none; font: 600 12.5px var(--mono); padding: 7px 12px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); cursor: pointer; }
.fv-tabs button[aria-current="true"] { color: var(--text); border-bottom-color: var(--brand); }
.fv-hint { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 9px 14px; font-size: 13px; color: var(--muted); border-bottom: 1px solid var(--border); }
.fv-hint code, .fv-cmd { font: 500 12.5px var(--mono); color: var(--text); }
.fv-hint b { color: var(--text); } .fv-sep { opacity: .5; }
/* Desktop: the panel sits beside the chat in the same tab (the chat narrows), like Claude */
@media (min-width: 1100px) {
  body.fv-open main { margin-right: min(760px, 52vw); transition: margin-right .28s ease; }
  .file-viewer { width: min(760px, 52vw); }
}
/* Side-by-side only when there's room for both; otherwise the panel slides over the chat */
@media (min-width: 1100px) { body.fv-open main { margin-right: 0; } .file-viewer { width: min(760px, 100vw); } }
@media (min-width: 1500px) { body.fv-open main { margin-right: min(720px, 44vw); } .file-viewer { width: min(720px, 44vw); } }
/* Cards and the project map adapt to the width they actually get */
.file-card, .project-box { container-type: inline-size; }
@container (max-width: 640px) {
  .pb-grid { grid-template-columns: 1fr; }
  .pb-grid:has(.pb-flow) .pb-tree { border-right: 0; border-bottom: 1px solid var(--border); }
  .fc-role, .fc-open { display: none; }
  .fc-btn span { display: none; } .fc-btn { padding: 7px 9px; }
}
.fv-cmd { font-family: var(--sans) !important; }
/* ---------- Split screen: chat on the left, file on the right, both in the same window ---------- */
@media (min-width: 761px) {
  .file-viewer { width: clamp(380px, 50vw, 900px); box-shadow: none; border-left: 1px solid var(--border); }
  body.fv-open main { margin-right: clamp(380px, 50vw, 900px); transition: margin-right .28s ease; }
  body.fv-open #composer, body.fv-open .disclaimer { max-width: 100%; }
  /* a draggable-looking divider between the two halves */
  .file-viewer::before { content: ""; position: absolute; left: -3px; top: 50%; width: 5px; height: 44px; margin-top: -22px; border-radius: 3px; background: var(--border); }
}
@media (min-width: 1100px) { body.fv-open main { margin-right: clamp(380px, 50vw, 900px); } }
@media (min-width: 1500px) { body.fv-open main { margin-right: clamp(380px, 50vw, 900px); } .file-viewer { width: clamp(380px, 50vw, 900px); } }

/* =====================================================================
   Settings v2: full-page settings like ChatGPT (left menu with Back + search, sections on the right)
   ===================================================================== */
#settings.overlay { padding: 0; background: var(--bg); backdrop-filter: none; align-items: stretch; justify-content: stretch; }
#settings .settings-card { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; display: flex; flex-direction: column; background: var(--bg); overflow: hidden; }
#settings .settings-card > .card-close, #settings #st-title { display: none; }
#settings .st-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 0; }
#settings .st-tabs { display: flex; flex-direction: column; gap: 2px; padding: 16px 12px; border-right: 1px solid var(--border); overflow-y: auto; background: var(--side); }
.st-back { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 6px; border: 0; background: none; color: var(--text); font: 600 15px var(--sans); cursor: pointer; border-radius: 10px; text-align: left; }
.st-back:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
.st-search { display: flex; align-items: center; gap: 8px; margin: 2px 2px 10px; padding: 9px 12px; border-radius: 999px; background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--muted); }
.st-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: 14.5px var(--sans); }
.st-search:focus-within { box-shadow: 0 0 0 2px var(--brand); }
#settings .st-tabs [data-tab] { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border: 0; border-radius: 10px; background: none; color: var(--text); font: 500 14.5px var(--sans); text-align: left; cursor: pointer; }
#settings .st-tabs [data-tab]:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
#settings .st-tabs [data-tab][aria-selected="true"] { background: color-mix(in srgb, var(--text) 9%, transparent); font-weight: 600; }
#settings .st-tabs [data-tab]:focus-visible, .st-back:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
#settings .st-tabs [data-tab].st-filtered, #settings .st-tabs [data-tab][hidden] { display: none; }
.st-ic { width: 19px; height: 19px; flex: none; }
.st-group { margin: 14px 12px 4px; font: 600 12.5px var(--sans); color: var(--muted); }
.st-nores { margin: 8px 12px; font-size: 13px; color: var(--muted); }
#settings .st-panels { overflow-y: auto; padding: 36px clamp(20px, 5vw, 64px) 60px; }
#settings .st-panels > section { max-width: 720px; }
.st-h { margin: 0 0 18px; font: 700 24px var(--sans); letter-spacing: -.01em; }
#settings .st-row { padding: 16px 0; border-bottom: 1px solid var(--border); gap: 20px; }
#settings .st-row small { line-height: 1.5; }
.st-btn { flex: none; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--border); background: var(--panel); color: var(--text); font: 600 13.5px var(--sans); cursor: pointer; white-space: nowrap; }
.st-btn:hover:not(:disabled) { border-color: var(--text); }
.st-btn:disabled { opacity: .45; cursor: not-allowed; }
.st-btn.danger-text { color: #DC2626; }
.st-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
#st-rate { width: 180px; accent-color: var(--brand); }
#st-voice { max-width: 260px; }
.st-list { display: flex; flex-direction: column; margin-top: 8px; }
.st-list-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.st-list-row > span:first-child { display: grid; min-width: 0; } .st-list-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.st-list-row small { color: var(--muted); font-size: 12.5px; }
.st-list-act { display: flex; gap: 8px; flex: none; }
.st-empty { color: var(--muted); padding: 16px 0; margin: 0; }
.st-meter { padding: 6px 0 18px; border-bottom: 1px solid var(--border); }
.st-meter-bar { height: 10px; border-radius: 999px; background: color-mix(in srgb, var(--text) 8%, transparent); overflow: hidden; margin-bottom: 8px; }
.st-meter-bar i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #7C3AED, #3B82F6); transition: width .5s ease; }
.st-meter-bar i.warn { background: linear-gradient(90deg, #F59E0B, #DC2626); }
.st-meter small, .st-usage small { color: var(--muted); font-size: 13px; }
.st-usage { padding: 4px 0 18px; border-bottom: 1px solid var(--border); }
.st-usage-big { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.st-usage-big b { font: 700 40px/1 var(--sans); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.st-keys { display: flex; flex-direction: column; }
.st-key-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--border); font-size: 14.5px; }
.st-kbd { display: flex; gap: 6px; flex: none; }
.st-kbd kbd { min-width: 28px; padding: 4px 8px; border-radius: 7px; border: 1px solid var(--border); border-bottom-width: 2px; background: var(--panel); font: 600 12.5px var(--mono); text-align: center; }
/* Listen button under answers */
.msg-listen { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--muted); font: 600 12.5px var(--sans); cursor: pointer; }
.msg-listen:hover, .msg-listen.on { color: var(--text); border-color: var(--text); }
.msg-listen.on { background: color-mix(in srgb, var(--brand) 12%, transparent); }
.msg.thinking-now .msg-listen, .body:has(.gen-status) .msg-listen, .msg.error .msg-listen { display: none; }
/* Phones: menu on top as a scrollable strip, section below */
@media (max-width: 760px) {
  #settings .st-body { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  #settings .st-tabs { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--border); padding: 10px; padding-top: calc(10px + env(safe-area-inset-top, 0px)); gap: 4px; align-items: center; }
  .st-back span, .st-group, .st-nores { display: none; }
  .st-back { margin: 0; flex: none; }
  .st-search { flex: none; width: 150px; margin: 0; }
  #settings .st-tabs [data-tab] { flex: none; white-space: nowrap; padding: 8px 12px; }
  #settings .st-panels { padding: 22px 16px 48px; }
  #settings .st-row { flex-wrap: wrap; }
}
/* full-page settings: beat the older width/padding rules for the settings card */
#settings .settings-card { width: 100vw !important; max-width: none !important; height: 100% !important; padding: 0 !important; }
@media (max-width: 760px) {
  #settings .st-tabs { flex-wrap: wrap; overflow-x: visible; }
  .st-search { width: auto; flex: 1 1 140px; }
  #settings .st-tabs [data-tab] { padding: 7px 11px; font-size: 13.5px; background: color-mix(in srgb, var(--text) 5%, transparent); }
  #settings .st-tabs [data-tab] .st-ic { width: 16px; height: 16px; }
}

/* ---------- Softer reading type + calm code chips (9 Oct 2026) ---------- */
/* Answers were too heavy: normal weight, a soft ink colour, semi-bold only for emphasis and headings. */
.msg .body { font-weight: 400; }
.msg.assistant .body { color: #2A2B31; }
:root[data-theme="dark"] .msg.assistant .body { color: #E3E3E8; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .msg.assistant .body { color: #E3E3E8; } }
.msg.assistant .body :is(strong, b) { font-weight: 600; }
.msg.assistant .body :is(h1, h2, h3) { font-weight: 600; }
.draft-body { font-weight: 400; }
/* Inline code, file names and commands: cool slate chips instead of golden brown */
.body code.tap-copy { color: #34405A; background: #F1F3F7; border-color: #DCE1EA; }
:root[data-theme="dark"] .body code.tap-copy { color: #CBD5E8; background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .body code.tap-copy { color: #CBD5E8; background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); } }
/* "On a server: nano file.py" hint on file cards */
.fc-server .fc-keys { color: var(--muted); font-size: 0.92em; }
.fc-server kbd { font: 600 11px var(--mono); padding: 1px 5px; border-radius: 4px; border: 1px solid var(--border); border-bottom-width: 2px; background: var(--panel); color: var(--text); }

/* Profile menu: clean line icons (like ChatGPT / Meta AI) instead of emoji */
.profile-menu .mi { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; color: var(--text); opacity: 0.82; }
.profile-menu .mi svg { width: 18px; height: 18px; display: block; }
.profile-menu button:hover .mi { opacity: 1; }

/* Account chat history: a chat still loading from the account, or a load/sync problem with a Retry button. */
.chat-load-state { max-width: 760px; margin: 24px auto; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; color: var(--muted); }
.chat-load-state.error { color: var(--text); border-color: color-mix(in srgb, #d92d20 45%, var(--border)); }
.chat-load-retry { margin-left: 6px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--panel); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.chat-load-retry:hover { border-color: var(--text); }
.sync-error { color: var(--text); }

/* =====================================================================
   ZulfiEra Workbench (14 Oct 2026)
   One deliberate layer over the older ones: clean white / charcoal with one blue accent taken from the logo (see theme.css),
   IBM Plex Sans for reading, IBM Plex Mono for labels and metadata, hairline rules instead of cards and glows,
   and almost no motion. The swirl logo and the wordmark are unchanged.
   ===================================================================== */
/* Colour and font tokens live in /theme.css (shared with /code/), loaded right after this file. */
body { background: var(--bg); font: 15px/1.6 var(--sans); }
::selection { background: var(--tint-soft); }

/* ---------- Sidebar: one list of tools, then projects and chats ---------- */
#sidebar { width: 264px; gap: 6px; padding: 10px 10px 12px; background: var(--sb-bg); border-right: 1px solid var(--sb-border); }
.side-brand { min-height: 40px; margin-bottom: 6px; }
.side-wordmark { font-size: 22px; }
.new-chat { padding: 8px 10px; border-radius: 6px; font: 500 14px var(--sans); background: var(--sb-btn); border: 1px solid var(--sb-btn-border); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03); }
.new-chat svg { color: var(--sb-accent); }
.new-chat:hover { background: var(--sb-btn); border-color: var(--rule-strong); }
.side-links { gap: 0; margin: 6px 0 2px; }
.side-link { gap: 10px; padding: 7px 10px; border-radius: 6px; font: 400 14px var(--sans); color: var(--sb-text); }
.side-link[hidden] { display: none; }
.side-link svg { color: var(--sb-muted); }
.side-link:hover { background: var(--sb-hover); }
.side-link:hover svg { color: var(--sb-text); }
.side-tag, .side-kbd { margin-left: auto; font: 400 10.5px var(--mono); color: var(--faint); letter-spacing: 0.02em; }
.side-kbd { padding: 0 4px; border: 1px solid var(--sb-border); border-radius: 3px; }
.side-section { padding: 16px 10px 4px; font: 500 10.5px var(--mono); letter-spacing: 0.1em; color: var(--faint); }
.side-section span { color: var(--faint); }
#history { margin-top: 2px; }
.conv { gap: 8px; padding: 6px 10px; border-radius: 6px; border-left: 0; font-size: 13.5px; color: var(--sb-text); }
.conv time { flex: none; font: 400 10.5px var(--mono); color: var(--faint); }
.conv .more { display: none; visibility: visible; }
.conv:hover time, .conv.active time { display: none; }
.conv:hover .more, .conv.active .more { display: inline-block; }
#sidebar .conv.active { background: var(--sb-active); box-shadow: inset 2px 0 0 var(--tint), 0 0 0 1px var(--sb-border); }
.pj-ic { flex: none; color: var(--sb-muted); }
.project > .conv { font-weight: 500; }
.empty-hint { font-size: 12.5px; color: var(--faint); }
.side-foot { gap: 6px; border-top: 1px solid var(--sb-border); }
.credits { font: 400 11px var(--mono); color: var(--faint); letter-spacing: 0.02em; }
.premium-btn { border-radius: 6px; border-color: var(--rule-strong); color: var(--text); font-weight: 500; font-size: 13.5px; padding: 7px 12px; }
.premium-btn:hover { background: var(--hover); }
.profile { border-radius: 6px; }
.avatar { background: var(--text); color: var(--bg); font-family: var(--sans); font-weight: 600; width: 30px; height: 30px; font-size: 13px; }
.menu, .profile-menu, .chat-menu { border-radius: 8px; padding: 4px; box-shadow: var(--shadow); }
.menu button { border-radius: 5px; padding: 8px 10px; gap: 10px; }
.menu .mi { display: inline-grid; place-items: center; width: 20px; color: var(--muted); }
.menu strong { font-weight: 500; }
.chat-menu .danger-item strong { color: #B42318; }

/* ---------- Top bar: names what is open ---------- */
.topbar { min-height: 52px; padding: 8px 20px; gap: 10px; background: var(--bg); border-bottom: 1px solid var(--border); backdrop-filter: none; -webkit-backdrop-filter: none; }
.top-context { flex: 1; min-width: 0; margin: 0; font-size: 14px; font-weight: 500; color: var(--text); }
#chat-title { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
body:has(#welcome:not([hidden])) #chat-title { color: var(--faint); font-weight: 400; }
.chat-project { order: 2; border-radius: 4px; padding: 2px 8px; font: 500 12px var(--mono); color: var(--tint); background: var(--tint-soft); }
.menu-btn { display: none; color: var(--text); }

/* ---------- Conversation: a transcript, not chat bubbles ---------- */
#chat { padding: 28px 24px 12px; background: none; }
#messages, #welcome { max-width: 760px; }
.msg, .msg.user, .msg.assistant { display: block; margin: 0 0 30px; animation: none; }
.msg.user + .msg.assistant { margin-top: -6px; }
.msg-head { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; font: 500 11px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.msg.assistant .msg-head { text-transform: none; letter-spacing: 0; font: 600 13px var(--sans); color: var(--text); }
.msg-head .bot { display: inline-grid; place-items: center; width: 18px; height: 18px; margin: 0; }
.msg.assistant .msg-head .bot .bz-solo { width: 18px; height: 18px; margin: 0; }
.msg-mode { display: none; } /* one answer mode for everyone: no mode label */
.msg.user .body { max-width: none; padding: 2px 0 2px 14px; background: none; border: 0; border-left: 2px solid var(--rule-strong); border-radius: 0; white-space: pre-wrap; color: var(--text); }
.msg .body { font-size: 15.5px; line-height: 1.7; letter-spacing: 0; font-weight: 400; }
.msg.assistant .body { color: var(--text); }
.msg.error .body { color: #B42318; }
.body h1, .body h2, .body h3, .body h4 { font-family: var(--sans); font-weight: 600; letter-spacing: -0.005em; }
.body h1 { font-size: 1.35em; } .body h2 { font-size: 1.2em; } .body h3 { font-size: 1.05em; }
.body blockquote { border-left-color: var(--tint); }
.body code { font-family: var(--mono); background: var(--accent-soft); border-radius: 3px; }
.body pre { border-radius: 8px; border: 1px solid var(--border); }
/* Tables read like a professional document: no cell boxes, hairlines between rows, a clear header, full width */
.body .table-wrap { margin: 14px 0; overflow-x: auto; }
.body table { display: table; width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.55; }
.body th, .body td { border: 0; border-bottom: 1px solid var(--border); padding: 9px 16px 9px 0; min-width: 110px; text-align: left; vertical-align: top; background: none; }
.body th { border-bottom: 1.5px solid var(--rule-strong); color: var(--text); font-weight: 600; font-size: 13.5px; white-space: nowrap; }
.body tr:last-child td { border-bottom: 0; }
.body th:last-child, .body td:last-child { padding-right: 0; }
.body td code { white-space: nowrap; }
:root .body code.tap-copy, :root[data-theme] .body code.tap-copy { color: var(--text); background: var(--accent-soft); border-color: var(--border); border-radius: 3px; }

/* Copy / Listen / Retry under each answer */
.msg-actions { display: flex; flex-wrap: wrap; gap: 2px; margin: 8px 0 0 -8px; }
.msg-act, .msg-actions .msg-listen { display: inline-flex; align-items: center; gap: 6px; height: 28px; margin: 0; padding: 0 8px; border: 0; border-radius: 5px; background: none; color: var(--muted); font: 500 12px var(--sans); cursor: pointer; }
.msg-act:hover, .msg-actions .msg-listen:hover { background: var(--hover); color: var(--text); border: 0; }
.msg-actions .msg-listen.on { color: var(--tint); background: var(--tint-soft); }
.msg.thinking-now .msg-actions, .msg.error .msg-actions, .msg-actions:empty { display: none; }
@media (hover: hover) and (min-width: 761px) {
  .msg-actions { opacity: 0.6; transition: opacity 0.15s; }
  .msg:hover .msg-actions, .msg-actions:focus-within, .msg:last-child .msg-actions { opacity: 1; }
}

/* Waiting for an answer: elapsed seconds, and "Reasoning" only when the model really reasons */
.thinking { display: inline-flex; align-items: center; gap: 8px; min-height: 26px; font: 400 12.5px var(--mono); color: var(--muted); }
.thinking i { width: 7px; height: 7px; border-radius: 1px; background: var(--tint); animation: wb-blink 1.4s ease-in-out infinite; }
.thinking .secs { color: var(--faint); font-variant-numeric: tabular-nums; }
.gen-status { display: flex; align-items: center; gap: 8px; margin-top: 10px; font: 400 12px var(--mono); color: var(--faint); }
.gen-status i { width: 6px; height: 6px; border-radius: 1px; background: var(--tint); animation: wb-blink 1.4s ease-in-out infinite; }
.gen-status span::after { content: "…"; }
@keyframes wb-blink { 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .thinking i, .gen-status i { animation: none; } }
.status::before { background: var(--tint); }

/* ---------- Composer: the message on top, the tools in a row underneath ---------- */
#composer, body:has(#welcome:not([hidden])) #composer { position: relative; flex-direction: column; align-items: stretch; gap: 4px; width: calc(100% - 48px); max-width: 760px; margin: 6px auto 0;
  padding: 10px 10px 8px 14px; border: 1px solid var(--rule-strong); border-radius: 10px; background: var(--panel);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03), 0 8px 24px -18px rgba(17, 24, 39, 0.30); backdrop-filter: none; -webkit-backdrop-filter: none; transition: border-color 0.15s; }
#composer:focus-within { border-color: color-mix(in srgb, var(--tint) 55%, var(--rule-strong)); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03), 0 8px 24px -18px rgba(17, 24, 39, 0.30); }
#input { padding: 4px 0 6px; min-height: 30px; line-height: 1.5; font-size: 16px; }
.input-col { flex: none; }
.composer-bar { display: flex; align-items: center; gap: 4px; min-width: 0; }
.cb-gap { flex: 1; }
.cb-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; min-width: 32px; padding: 0 7px;
  border: 1px solid transparent; border-radius: 6px; background: none; color: var(--muted); font: 500 12.5px var(--sans); cursor: pointer; }
.cb-btn:hover:not(:disabled) { background: var(--hover); color: var(--text); }
.cb-btn:disabled { opacity: 0.45; cursor: default; }
.cb-btn[aria-expanded="true"] { background: var(--hover); color: var(--text); }
.cb-lang span { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 12px var(--mono); }
.plus-wrap, .depth-wrap, .lang-wrap { position: relative; flex: none; }
.depth-seg { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg); }
.depth-seg button { height: 26px; padding: 0 10px; border: 0; border-radius: 5px; background: none; color: var(--muted); font: 500 12.5px var(--sans); cursor: pointer; }
.depth-seg button:hover { color: var(--text); }
.depth-seg button[aria-checked="true"] { background: var(--accent); color: var(--accent-text); }
.send { width: 32px; height: 32px; border: 0; border-radius: 6px; background: var(--accent); color: var(--accent-text); box-shadow: none; }
.send:hover { background: var(--accent-strong); }
.send svg { width: 17px; height: 17px; }
.send.stop { background: none; color: var(--text); border: 1px solid var(--rule-strong); }
#mic.recording { color: #fff; background: #B42318; animation: none; }
#plus-menu { left: -4px; bottom: calc(100% + 10px); width: 290px; }
.lang-menu { top: auto; bottom: calc(100% + 10px); left: -4px; right: auto; width: 290px; max-height: min(52vh, 440px); border-radius: 8px; }
.lang-menu input { border-radius: 6px; }
.lang-menu [role=option] { border-radius: 5px; }
.lang-menu [role=option][aria-selected="true"] { background: var(--tint-soft); }
.lang-menu [role=option][aria-selected="true"] strong { color: var(--text); font-weight: 600; }
.tool-chip { gap: 6px; margin: 0 0 6px; padding: 2px 4px 2px 8px; border-radius: 4px; font: 500 12px var(--mono); color: var(--tint); background: var(--tint-soft); border: 1px solid color-mix(in srgb, var(--tint) 35%, transparent); }
.quota { border-radius: 6px; font-size: 13px; background: var(--tint-soft); border-color: color-mix(in srgb, var(--tint) 35%, transparent); }
#attach-preview { max-width: 760px; }
.file-chip { border-radius: 6px; }
.file-chip svg { flex: none; color: var(--muted); }
.disclaimer { margin: 8px 16px 12px; font-size: 11.5px; color: var(--faint); }
.disclaimer a { color: var(--muted); font-weight: 400; text-decoration: none; }
.disclaimer a:hover { color: var(--text); text-decoration: underline; }

/* ---------- Start screen: a plain sheet, the box, and real starting points ---------- */
#welcome { text-align: left; padding-top: 0; }
#welcome .greet { margin: 0 0 6px; font: 400 12px var(--mono); letter-spacing: 0.04em; color: var(--faint); background: none; -webkit-text-fill-color: currentColor; }
#welcome h2.greet-sub { display: block; margin: 0 0 18px; font: 500 30px/1.2 var(--sans); letter-spacing: -0.015em; color: var(--text); opacity: 1; }
body:has(#welcome:not([hidden])) #chat { flex: 0 0 auto; overflow: visible; padding-top: 16vh; padding-bottom: 4px; }
body:has(#welcome:not([hidden])) .disclaimer { margin-top: auto; }
.starts { display: none; }
body:has(#welcome:not([hidden])) .starts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; width: calc(100% - 48px); max-width: 760px; margin: 22px auto 0; border-top: 1px solid var(--border); }
body.searching .starts { display: none !important; }
.starts .sg { display: flex; align-items: baseline; gap: 12px; min-width: 0; padding: 11px 4px; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: none; color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.starts .sg:hover strong { text-decoration: underline; text-decoration-color: var(--tint); text-underline-offset: 3px; }
.sg-k { flex: none; width: 46px; font: 500 10.5px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tint); }
.sg-tx { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.sg-tx strong { font-size: 13.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-tx small { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.offline .starts .sg[data-tool="image"] { display: none !important; }
.promo { margin: 0 0 16px; padding: 4px 10px 4px 4px; border-radius: 6px; border: 1px solid var(--border); background: var(--panel); font: 400 13px var(--sans); }
.promo:hover { transform: none; box-shadow: none; border-color: var(--rule-strong); }
.promo-tag { border-radius: 4px; background: var(--tint-soft); color: var(--tint); font: 500 10.5px var(--mono); letter-spacing: 0.06em; }
.promo-go, .promo b { color: var(--text); }

/* ---------- Dialogs and settings: same paper, rules and radii ---------- */
.overlay { background: rgba(15, 17, 21, 0.45); backdrop-filter: none; }
.overlay .card { border-radius: 10px; border-top: 1px solid var(--border); }
.overlay h2 { font-family: var(--sans); font-weight: 600; }
.primary { border-radius: 6px; font-weight: 600; }
.primary:hover:not(:disabled) { box-shadow: none; }
.st-btn, .chat-load-retry { border-radius: 6px; }
.switch:checked { background: var(--tint); }
.st-meter-bar i { background: var(--tint); }
.st-search { border-radius: 6px; }
#settings .st-tabs [data-tab], .st-back { border-radius: 6px; }
.sv-box { border-radius: 8px; box-shadow: none; padding: 12px 16px; }
.sv-row small { font: 400 12px var(--mono); color: var(--faint); }
.toast { border-radius: 6px; font-size: 13.5px; }
.draft, .file-card, .project-box { border-radius: 8px; box-shadow: none; }
.draft-copy, .draft-tweak, .draft-gmail, .draft-dl, .fc-btn, .continue-btn { border-radius: 6px; }
.draft-ic, .paste-ic, .fc-ic { border-radius: 6px; background: var(--tint-soft); color: var(--tint); }
.paste-card { border-radius: 8px; }
.code-head { border-radius: 8px 8px 0 0; }
.code-lang { font-family: var(--mono); text-transform: none; letter-spacing: 0; }
.body pre .copy { border-radius: 5px; }
.body pre .copy:hover { transform: none; }
.continue-btn { border-color: var(--rule-strong); background: var(--panel); }
.continue-btn:hover { background: var(--hover); color: var(--text); }
.continue-btn:hover small { color: var(--muted); }

/* ---------- Review fixes (14 Oct 2026) ---------- */
/* The self-hosted offline edition has no use for its own advert. */
body.offline #top-offline { display: none; }
/* Start screen: the box sits high on the page, so the language list opens downward (upward it ran off the top). */
body:has(#welcome:not([hidden])) .lang-menu { top: calc(100% + 10px); bottom: auto; }
/* Visible keyboard focus everywhere (the message box shows focus with its border instead). */
:is(button, a, select, summary, [tabindex]):focus-visible { outline: 2px solid var(--tint); outline-offset: 2px; }
.depth-seg button:focus-visible { outline-offset: 1px; }
/* Copy / Retry stay hidden for the whole time an answer is being made (also during image creation). */
.msg.busy .msg-actions { display: none; }
/* Text that is visually hidden on small screens but still names the button for screen readers */
.seg-more { white-space: pre; }

/* File icon: the theme colour in both themes (an older dark-mode rule made it gold) */
.file-card .fc-ic { background: var(--tint-soft) !important; color: var(--tint) !important; }
/* File cards show their code right away (long files: the first 20 lines, then "Show all") */
.file-card .fc-code, .file-card .fc-more { grid-column: 1 / -1; }
.file-card .fc-code { border-top: 1px solid var(--border) !important; }
.file-card .fc-code code { font: 13px/1.6 var(--mono); white-space: pre; overflow-x: auto; }
.file-card.collapsed .fc-code { max-height: calc(20 * 13px * 1.6 + 28px); overflow: hidden; }
.file-card .fc-more { padding: 8px; border: 0; border-top: 1px solid var(--border); background: var(--panel); color: var(--tint); font: 500 12.5px var(--sans); cursor: pointer; }
.file-card .fc-more:hover { background: var(--hover); }

/* Listen in your language: Listen + a small language button; the menu; the translation shown when there is no voice */
.msg-listen-wrap { display: inline-flex; align-items: center; }
.msg-actions .msg-listen-lang { gap: 3px; padding: 0 6px; margin-left: -4px; font: 500 11.5px var(--sans); color: var(--muted); }
.msg-actions .msg-listen-lang:hover { color: var(--text); }
.msg-actions .msg-listen:disabled { opacity: 0.7; cursor: progress; }
.listen-menu { position: fixed; z-index: 60; width: 260px; max-height: 60vh; overflow-y: auto; bottom: auto; right: auto; } /* the shared .menu rule pins bottom: undo it, or the menu collapses to a thin bar */
.listen-menu .label { padding: 6px 10px 4px; font: 500 10.5px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.listen-menu button { padding: 7px 10px; }
.listen-menu button strong { font-size: 14px; }
.listen-menu button small { font-size: 11.5px; color: var(--muted); }
.listen-menu [aria-checked="true"] { background: var(--tint-soft); }
.listen-menu [aria-checked="true"] strong { color: var(--tint); }
.listen-text { margin: 8px 0 0; padding: 10px 12px; border: 1px solid var(--border); border-left: 2px solid var(--tint); border-radius: 6px; background: var(--panel); }
.listen-text .listen-note { margin: 0 0 6px; font-size: 12px; color: var(--muted); }
.listen-help { line-height: 1.6; }
.listen-help .listen-edge { display: inline-flex; align-items: center; margin: 4px 0 2px; padding: 4px 10px; border-radius: 6px; background: var(--accent); color: var(--accent-text); font: 500 12.5px var(--sans); text-decoration: none; }
.listen-help .listen-edge:hover { background: var(--accent-strong); }
.listen-text .listen-body { margin: 0; font-size: 15px; line-height: 1.7; white-space: pre-wrap; }

/* 👍 / 👎 under answers, and the "What went wrong?" form */
.msg-act.msg-fb.on { color: var(--tint); background: var(--tint-soft); opacity: 1; }
.msg-act.msg-fb:disabled { cursor: default; }
.msg-act.msg-fb:disabled:not(.on) { opacity: 0.45; }
.fb-form { margin: 8px 0 0; padding: 12px 14px; border: 1px solid var(--border); border-left: 2px solid var(--tint); border-radius: 6px; background: var(--panel); max-width: 560px; }
.fb-form .fb-title { margin: 0 0 8px; font: 600 13px var(--sans); }
.fb-reasons { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.fb-reason { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; font: 500 12.5px var(--sans); cursor: pointer; }
.fb-reason input { margin: 0; accent-color: var(--tint); }
.fb-reason:has(input:checked) { border-color: var(--tint); background: var(--tint-soft); color: var(--tint); }
.fb-form textarea { box-sizing: border-box; width: 100%; min-height: 56px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); font: 14px/1.5 var(--sans); resize: vertical; }
.fb-share { display: flex; align-items: flex-start; gap: 8px; margin: 8px 0 2px; font-size: 13px; cursor: pointer; }
.fb-share input { margin: 3px 0 0; accent-color: var(--tint); }
.fb-note { margin: 0 0 10px 22px; font-size: 12px; color: var(--muted); }
.fb-buttons { display: flex; gap: 8px; }
.fb-buttons button { height: 30px; padding: 0 14px; border-radius: 6px; font: 500 13px var(--sans); cursor: pointer; }
.fb-send { border: 0; background: var(--accent); color: var(--accent-text); }
.fb-send:hover { background: var(--accent-strong); }
.fb-send:disabled { opacity: 0.6; cursor: progress; }
.fb-cancel { border: 1px solid var(--border); background: none; color: var(--text); }

/* ---------- Phones ---------- */
@media (max-width: 760px) {
  .msg-act span, .cb-lang span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; display: inline !important; }
  .lang-menu, body:has(#welcome:not([hidden])) .lang-menu { position: absolute; }
  #toggle-sidebar.menu-btn { display: inline-grid !important; place-items: center; width: 36px; height: 36px; padding: 0; margin-left: -6px; }
  .topbar { padding: 6px 12px; min-height: 48px; }
  .topbar .wordmark .zw { font-size: 20px; }
  body:has(#welcome:not([hidden])) .top-context { display: none; }
  body:not(:has(#welcome:not([hidden]))) .topbar .wordmark { display: none; }
  #chat { padding: 18px 16px 8px; }
  .msg .body { font-size: 15px; }
  .msg.user .body { padding-left: 12px; }
  #composer, body:has(#welcome:not([hidden])) #composer { width: calc(100% - 20px); padding: 8px 6px 6px 12px; }
  .depth-seg button { padding: 0 8px; }
  #welcome h2.greet-sub { font-size: 24px; margin-bottom: 14px; }
  body:has(#welcome:not([hidden])) #chat { padding-top: 9vh; }
  body:has(#welcome:not([hidden])) .starts { grid-template-columns: minmax(0, 1fr); width: calc(100% - 20px); margin-top: 14px; }
  .starts .sg { padding: 10px 2px; }
  .sg-tx small { display: none; }
  /* menus open over the whole message box, so they never run off a narrow screen */
  .plus-wrap, .lang-wrap { position: static; }
  #plus-menu, .lang-menu { left: 0; right: 0; width: auto; bottom: calc(100% + 8px); }
  .msg-act, .msg-actions .msg-listen { padding: 0 9px; height: 32px; }
}
@media (max-width: 400px) { .seg-more { display: none; } }
@media (max-width: 380px) {
  .depth-seg button { padding: 0 6px; font-size: 12px; }
  .cb-btn { min-width: 30px; padding: 0 5px; }
}
@media (max-width: 760px) {
  /* the language name next to Listen stays visible on phones (it is the only label that button has) */
  .msg-actions .msg-listen-lang span { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; }
}
@media (max-width: 760px) {
  /* phones: wider columns and slightly smaller text, so a wide table scrolls sideways instead of squeezing words */
  .body table { font-size: 13.5px; }
  .body th, .body td { min-width: 150px; padding-right: 14px; }
}

/* ---------- Pricing: four plans from the server (GET /api/plans) ---------- */
.price-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .price-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .price-grid.four { grid-template-columns: 1fr; } }
.price-card.current { box-shadow: inset 0 0 0 1px var(--tint); }
.plan-note .link { margin-left: 4px; }

/* ---------- "Coming soon" tag in the + menu (from GET /api/features), Knowledge base panel, task agent steps ----------
   Built from the existing tokens and the sidebar tag style; no new colours beyond the error red the app already uses. */
.soon-tag { display: inline-block; margin-left: 6px; padding: 0 4px; border: 1px solid var(--sb-border); border-radius: 3px;
  font: 400 10.5px var(--mono); color: var(--faint); letter-spacing: 0.02em; vertical-align: 1px; }
.overlay .kb-card { width: min(560px, 100%); text-align: left; }
.overlay .kb-note { margin: 0 0 4px; color: var(--text); }
.kb-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 10px; }
.kb-count { font: 400 12px var(--mono); color: var(--muted); }
.overlay .kb-status { margin: 0 0 10px; font-size: 13.5px; color: var(--muted); }
.overlay .kb-status.ok { color: var(--text); }
.overlay .kb-status.error { color: #B42318; }
.kb-list { list-style: none; margin: 0 0 12px; padding: 0; border-top: 1px solid var(--border); max-height: 320px; overflow-y: auto; }
.kb-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--border); }
.kb-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kb-info strong { font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.kb-info small { font: 400 12px var(--mono); color: var(--muted); }
.kb-empty { color: var(--muted); font-size: 13.5px; }
.kb-del { color: #B42318; }
.kb-confirm { display: inline-flex; align-items: center; gap: 10px; flex: none; font-size: 13px; color: var(--muted); }
.agent-run { margin: 0 0 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); }
.agent-head { font: 500 12px var(--mono); color: var(--muted); margin-bottom: 6px; }
.agent-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.agent-step { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; color: var(--text); }
.agent-what { min-width: 0; overflow-wrap: anywhere; }
.agent-st { flex: none; font: 400 12px var(--mono); color: var(--muted); }
.agent-step.running .agent-st { color: var(--tint); }
.agent-step.failed .agent-st { color: #B42318; }

/* ---------- Workspace sections (public/app.js showView): Chat Assistance, AI Agent, Knowledge Base, ZulfiEra Watch ----------
   Same tokens and components as the rest of the app; the chat is only hidden while another section shows. */
body.in-view #chat, body.in-view #composer, body.in-view .disclaimer, body.in-view #quota, body.in-view #attach-preview, body.in-view .starts { display: none !important; }
.ws-nav { padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px solid var(--sb-border); }

/* ---------- Sidebar layout: brand + New chat at the top, the profile at the bottom, and everything between them
   (workspace sections, tools, projects, chats) in one area that scrolls when it doesn't fit, so on a short screen
   nothing is squeezed or overlaps and the profile stays visible. A scrollbar only appears when there is overflow. ---------- */
#sidebar > .side-brand, #sidebar > .side-head, #sidebar > .rail-nav, #sidebar > .side-foot { flex: none; }
.side-scroll {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 6px;
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
}
.side-scroll #history { flex: 0 0 auto; overflow: visible; }   /* no inner scrollbar: the whole area scrolls */
.side-link.on { background: var(--sb-active); box-shadow: inset 2px 0 0 var(--tint), 0 0 0 1px var(--sb-border); font-weight: 500; }
.side-link.on svg { color: var(--tint); }
.ws-view { flex: 1; min-height: 0; overflow-y: auto; padding: 36px 20px 56px; }
.ws-view[hidden] { display: none; }
.ws-inner { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.ws-head h1 { margin: 0; font: 600 26px/1.25 var(--sans); letter-spacing: -0.01em; color: var(--text); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ws-head p { margin: 8px 0 0; max-width: 680px; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.ws-badge { font: 500 11px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--faint); border: 1px solid var(--rule-strong); border-radius: 4px; padding: 2px 6px; }
.ws-card { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.ws-card[hidden] { display: none; }
.ws-label { font: 500 13px var(--sans); color: var(--text); }
.ws-card textarea { width: 100%; resize: vertical; min-height: 84px; padding: 10px 12px; border: 1px solid var(--rule-strong); border-radius: 8px; background: var(--bg); color: var(--text); font: 400 14.5px/1.5 var(--sans); }
.ws-card textarea:focus { outline: none; border-color: var(--tint); box-shadow: 0 0 0 3px var(--tint-soft); }
.ws-card textarea:disabled { opacity: .6; cursor: not-allowed; }
.ws-row { display: flex; align-items: center; gap: 10px; }
.ws-row .ws-meta { margin-right: auto; }
.ws-row-top { align-items: baseline; }
.ws-meta { font: 400 12px var(--mono); color: var(--faint); }
.ws-run-task { font: 600 15px/1.4 var(--sans); color: var(--text); margin-right: auto; overflow-wrap: anywhere; }
.ws-report:empty { display: none; }
.ws-note { margin: 0; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--tint-soft); color: var(--text); font-size: 14px; line-height: 1.5; }
.ws-note[hidden] { display: none; }
.ws-sub { margin: 10px 0 0; font: 600 15px var(--sans); color: var(--text); display: flex; align-items: baseline; gap: 8px; }
.ws-sub small { font: 400 12px var(--mono); color: var(--faint); }
.ws-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ws-hist { width: 100%; display: flex; align-items: baseline; gap: 12px; text-align: left; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); color: var(--text); font: 400 14px var(--sans); cursor: pointer; }
.ws-hist:hover { border-color: var(--rule-strong); }
.ws-hist span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-hist small { flex: none; font: 400 12px var(--mono); color: var(--faint); }
.ws-empty { color: var(--muted); font-size: 13.5px; padding: 4px 2px; }
.ws-aside { flex-direction: row; align-items: center; gap: 16px; }
.ws-aside > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ws-aside b { font: 600 14px var(--sans); color: var(--text); }
.ws-aside span { font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.ws-plan { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.ws-plan b { color: var(--text); font-weight: 600; }
.ghost-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; padding: 7px 12px; border: 1px solid var(--rule-strong); border-radius: 8px; background: var(--panel); color: var(--text); font: 500 13px var(--sans); text-decoration: none; cursor: pointer; }
.ghost-btn:hover { border-color: var(--tint); color: var(--tint); }
.ghost-btn[hidden] { display: none; }
.ws-view .kb-note { margin: 0; }
.ws-view .kb-status { margin: 0; font-size: 13.5px; color: var(--muted); }
.ws-view .kb-status.ok { color: var(--text); }
.ws-view .kb-status.error { color: #B42318; }
.ws-view .kb-list { max-height: none; margin: 0; }
.kb-acts { display: inline-flex; align-items: center; gap: 14px; flex: none; }
@media (max-width: 760px) {
  .ws-view { padding: 20px 14px 40px; }
  .ws-aside { flex-direction: column; align-items: stretch; }
  .ws-head h1 { font-size: 22px; }
}

/* ---------- ZulfiEra Watch (public/servers.js): overview, Add server wizard, server page, setup guide ----------
   Same tokens and components as the other workspace sections. Status colours mark states only. */
.sm-main { display: flex; flex-direction: column; gap: 16px; }
.sm-main:empty, .sm-soon[hidden] { display: none; }
.sm-soon { display: flex; flex-direction: column; gap: 16px; }
.sm-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); }
.sm-tabs[hidden] { display: none; }
.sm-tabs a { padding: 8px 12px; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--muted); font: 500 14px var(--sans); text-decoration: none; }
.sm-tabs a:hover { color: var(--text); }
.sm-tabs a.on { color: var(--text); border-bottom-color: var(--tint); }
.sm-h { margin: 0; font: 600 15px var(--sans); color: var(--text); }
.sm-h.big { font-size: 20px; overflow-wrap: anywhere; }
.sm-h3 { margin: 6px 0 0; font: 600 13.5px var(--sans); color: var(--text); }
.sm-muted { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.sm-hint { margin: 0; color: var(--faint); font-size: 12.5px; line-height: 1.5; }
.sm-row, .sm-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sm-title-row { justify-content: flex-start; }
.sm-back { align-self: flex-start; }
.sm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.sm-stat { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); }
.sm-stat-label { font-size: 12.5px; color: var(--muted); }
.sm-stat b { font: 600 24px var(--sans); color: var(--text); }
.sm-stat small { font: 400 11.5px var(--mono); color: var(--faint); }
.sm-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sm-item { width: 100%; display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); font: 400 14px var(--sans); cursor: pointer; }
.sm-item:hover { border-color: var(--rule-strong); }
.sm-item-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sm-item-top b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.sm-item small { font: 400 12px var(--mono); color: var(--faint); overflow-wrap: anywhere; }
.sm-pill { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px; font: 500 12px var(--sans); border: 1px solid var(--rule-strong); color: var(--muted); background: var(--panel); white-space: nowrap; }
.sm-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sm-pill.waiting { color: var(--tint); border-color: color-mix(in srgb, var(--tint) 40%, transparent); background: var(--tint-soft); }
.sm-pill.attention { color: #B54708; border-color: rgba(181, 71, 8, .35); background: rgba(181, 71, 8, .08); }
.sm-pill.revoked { color: #B42318; border-color: rgba(180, 35, 24, .3); background: rgba(180, 35, 24, .06); }
.sm-pill.online { color: #067647; border-color: rgba(6, 118, 71, .35); background: rgba(6, 118, 71, .08); }
.sm-pill.offline { color: #B42318; border-color: rgba(180, 35, 24, .3); background: rgba(180, 35, 24, .06); }
.sm-item-live { font: 400 12.5px var(--sans); color: var(--muted); }
/* key fingerprint check */
.sm-fp-check { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--rule-strong); border-radius: 8px; background: var(--bg); }
.sm-fp { display: block; padding: 8px 10px; border-radius: 6px; border: 1px solid var(--border); background: var(--panel); font: 500 13px var(--mono); color: var(--text); overflow-wrap: anywhere; user-select: all; }
.sm-fp-input { width: 100%; padding: 9px 11px; border-radius: 8px; border: 1px solid var(--rule-strong); background: var(--panel); color: var(--text); font: 400 13px var(--mono); }
.sm-fp-input:focus { outline: none; border-color: var(--tint); box-shadow: 0 0 0 3px var(--tint-soft); }
.sm-fp-verdict { margin: 0; font-size: 13.5px; color: var(--muted); }
.sm-fp-verdict:empty { display: none; }
.sm-fp-verdict.ok { color: #067647; font-weight: 600; }
.sm-fp-verdict.bad { color: #B42318; font-weight: 600; }
/* metrics charts: series a = blue (theme tint), series b = orange + dashed, so identity is never colour alone */
.sm-metrics { --sa: var(--tint); --sb: #C2410C; }
:root[data-theme="dark"] .sm-metrics { --sb: #F08A4B; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sm-metrics { --sb: #F08A4B; } }
.sm-range { display: inline-flex; border: 1px solid var(--rule-strong); border-radius: 8px; overflow: hidden; }
.sm-range-btn { padding: 6px 12px; border: 0; border-right: 1px solid var(--rule-strong); background: var(--panel); color: var(--muted); font: 500 13px var(--sans); cursor: pointer; }
.sm-range-btn:last-child { border-right: 0; }
.sm-range-btn[aria-pressed="true"] { background: var(--tint-soft); color: var(--text); }
.sm-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.sm-fs { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.sm-fs > .sm-h3, .sm-fs > .sm-chart-empty { grid-column: 1 / -1; }
.sm-chart { margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); }
.sm-chart-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; font-size: 13.5px; color: var(--text); overflow-wrap: anywhere; }
.sm-chart-legend { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; font: 400 12px var(--sans); color: var(--muted); }
.sm-key::before { content: ""; display: inline-block; width: 14px; height: 0; margin-right: 5px; vertical-align: middle; border-top: 2px solid var(--sa); }
.sm-key.b::before { border-top: 2px dashed var(--sb); }
.sm-plot { width: 100%; height: 110px; display: block; touch-action: pan-y; }
.sm-grid { stroke: var(--border); stroke-width: 1; }
.sm-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.sm-line.a { stroke: var(--sa); }
.sm-line.b { stroke: var(--sb); stroke-dasharray: 5 3; }
.sm-dot.a { fill: var(--sa); }
.sm-dot.b { fill: var(--sb); }
.sm-chart-axis { display: flex; justify-content: space-between; gap: 8px; font: 400 11px var(--mono); color: var(--faint); }
.sm-chart-read { margin: 0; min-height: 1.4em; font: 400 12px var(--mono); color: var(--muted); }
.sm-chart-empty { margin: 0; padding: 14px 0; color: var(--faint); font-size: 13px; }
.sm-chart-table summary { cursor: pointer; font-size: 12px; color: var(--muted); }
.sm-chart-table table { width: 100%; margin-top: 6px; border-collapse: collapse; font: 400 12px var(--mono); color: var(--text); }
.sm-chart-table th, .sm-chart-table td { padding: 3px 6px; text-align: right; border-bottom: 1px solid var(--border); }
.sm-chart-table th:first-child, .sm-chart-table td:first-child { text-align: left; }
.sm-chart-table[open] { max-height: 240px; overflow: auto; }
.sm-steps { list-style: none; display: flex; gap: 6px; margin: 0; padding: 0; counter-reset: sm-step; }
.sm-steps li { counter-increment: sm-step; flex: 1; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border); font: 500 13px var(--sans); color: var(--faint); }
.sm-steps li::before { content: counter(sm-step) ". "; }
.sm-steps li.on { color: var(--text); border-color: var(--tint); background: var(--tint-soft); }
.sm-steps li.done { color: var(--muted); }
.sm-form { display: flex; flex-direction: column; gap: 8px; }
.sm-form label, .sm-choices legend { font: 600 13px var(--sans); color: var(--text); margin-top: 4px; }
.sm-form label small { font-weight: 400; color: var(--muted); }
.sm-form input:not([type="radio"]), .sm-edit input { width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--rule-strong); background: var(--bg); color: var(--text); font: 400 14.5px var(--sans); }
.sm-form input:focus, .sm-edit input:focus, .sm-token:focus { outline: none; border-color: var(--tint); box-shadow: 0 0 0 3px var(--tint-soft); }
.sm-choices { border: 0; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sm-choices legend { grid-column: 1 / -1; padding: 0; margin-bottom: 4px; }
.sm-choice { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); font: 400 14px var(--sans) !important; cursor: pointer; margin: 0 !important; }
.sm-choice:has(input:checked) { border-color: var(--tint); background: var(--tint-soft); }
.sm-choice input { accent-color: var(--tint); margin: 0; }
.sm-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.sm-grow { flex: 1; }
.sm-edit input { width: auto; flex: 1 1 160px; }
.sm-error { margin: 0; color: #B42318; font-size: 13.5px; }
.sm-error[hidden] { display: none; }
.sm-warn { margin: 0; padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(181, 71, 8, .3); background: rgba(181, 71, 8, .07); color: var(--text); font-size: 13.5px; line-height: 1.5; }
.sm-confirm { font-size: 13.5px; color: var(--text); }
.sm-facts { display: grid; grid-template-columns: minmax(140px, max-content) 1fr; gap: 6px 16px; margin: 0; font-size: 14px; }
.sm-facts dt { color: var(--muted); }
.sm-facts dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.sm-keys, .sm-activity, .sm-bullets { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.sm-keys li { font: 400 12.5px var(--mono); color: var(--text); overflow-wrap: anywhere; }
.sm-keys li.revoked { color: var(--faint); text-decoration: line-through; }
.sm-activity li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.sm-activity li:last-child { border-bottom: 0; }
.sm-activity small { font: 400 12px var(--mono); color: var(--faint); }
.sm-activity .sm-detail { flex-basis: 100%; overflow-wrap: anywhere; }
.sm-bullets { padding-left: 18px; list-style: disc; gap: 4px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.sm-token-row { display: flex; gap: 8px; }
.sm-token { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--rule-strong); background: var(--bg); color: var(--text); font: 500 13.5px var(--mono); }
.sm-live { margin: 0; font-size: 13.5px; color: var(--muted); }
.sm-live::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--tint); vertical-align: 1px; animation: sm-pulse 1.6s ease-in-out infinite; }
@keyframes sm-pulse { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .sm-live::before { animation: none; } }
.sm-cmd { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); }
.sm-cmd code { flex: 1; min-width: 0; font: 400 13px var(--mono); color: var(--text); overflow-x: auto; white-space: pre; }
.sm-cmd.preview { border-style: dashed; }
.sm-cmd.preview code { color: var(--muted); }
.sm-tag { flex: none; font: 500 11px var(--mono); letter-spacing: .02em; color: var(--faint); border: 1px solid var(--rule-strong); border-radius: 4px; padding: 2px 6px; white-space: nowrap; }
.sm-copy { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 6px; border: 1px solid var(--border); background: var(--panel); color: var(--muted); cursor: pointer; }
.sm-copy:hover { color: var(--text); border-color: var(--rule-strong); }
.sm-waiting { align-items: flex-start; }
.sm-waiting-title { font: 600 18px var(--sans); color: var(--text); }
.sm-docs { display: flex; flex-direction: column; gap: 14px; }
.ws-card > .primary.small, .ws-card > .link { align-self: flex-start; }
@media (max-width: 760px) {
  .sm-choices { grid-template-columns: 1fr; }
  .sm-facts { grid-template-columns: 1fr; gap: 2px; }
  .sm-facts dd { margin-bottom: 6px; }
  .sm-token-row { flex-direction: column; }
  .sm-steps li { font-size: 12px; padding: 6px 8px; }
  .sm-tabs a { padding: 8px 9px; font-size: 13.5px; }
  .sm-cmd .sm-tag { white-space: normal; }
}

/* ---------- Sources, Perplexity style (public/app.js decorateSources) ---------- */
.src-head { margin: 0 0 6px; font: 600 12.5px var(--sans); color: var(--muted); }
.src-strip { display: flex; gap: 8px; overflow-x: auto; padding: 0 0 6px; margin: 0 0 12px; scrollbar-width: thin; }
.src-card { flex: 0 0 172px; display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); color: var(--text); text-decoration: none; min-width: 0; }
.src-card:hover { border-color: var(--tint); text-decoration: none; }
.src-site { display: flex; align-items: center; gap: 6px; min-width: 0; font: 500 11.5px var(--sans); color: var(--muted); }
.src-icon { flex: 0 0 16px; width: 16px; height: 16px; display: inline-grid; place-items: center; border-radius: 4px; background: var(--tint-soft); color: var(--tint); font: 700 10px var(--sans); overflow: hidden; }
.src-icon img { width: 16px; height: 16px; display: block; }
.src-host { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.src-n { flex: 0 0 auto; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--hover); color: var(--muted); font-size: 10.5px; line-height: 16px; text-align: center; }
.src-title { color: var(--text); font: 500 12.5px/1.35 var(--sans); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.src-date { font-size: 11px; color: var(--muted); }
a.src-cite { display: inline-block; min-width: 17px; height: 17px; margin: 0 1px; padding: 0 4px; border-radius: 9px; background: var(--tint-soft); color: var(--tint); font: 600 10.5px/17px var(--sans); text-align: center; text-decoration: none; vertical-align: 2px; }
a.src-cite:hover { background: var(--tint); color: #fff; text-decoration: none; }

/* Knowledge Base: add a web page */
.kb-web label { display: flex; flex-direction: column; gap: 2px; }
.kb-web label span { font-size: 13px; color: var(--muted); }
.kb-web-row { display: flex; gap: 8px; }
.kb-web-row input { flex: 1; min-width: 0; height: 34px; padding: 0 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); font: 14px var(--sans); }
.kb-web-row input:focus { outline: 2px solid var(--tint); outline-offset: -1px; }
.kb-src { font-size: 12px; overflow-wrap: anywhere; }