:root {
  color-scheme: dark;
  --bg: #0b0b10;
  --panel: #16161f;
  --card: rgba(255, 255, 255, 0.04);
  --stroke: rgba(255, 255, 255, 0.10);
  --stroke-2: rgba(255, 255, 255, 0.07);
  --text: #ececf2;
  --muted: #9a9aae;
  --cornflower: #6495ed;
  --violet: #8b7bff;
  --indigo: #6d5efc;
  --danger: #ff6b7d;
  --radius: 16px;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, sans-serif;
  color: var(--text);
  /* Dark base + soft gradient "light leaks" bleeding in from the edges */
  background:
    radial-gradient(80% 65% at 50% 116%, rgba(139, 123, 255, 0.34), rgba(139, 123, 255, 0.08) 46%, transparent 74%),
    radial-gradient(52% 50% at 8% 92%, rgba(255, 93, 214, 0.26), transparent 64%),
    radial-gradient(52% 52% at 92% 96%, rgba(100, 149, 237, 0.24), transparent 64%),
    radial-gradient(65% 45% at 50% -10%, rgba(139, 123, 255, 0.16), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

/* ---------- centered auth pages ---------- */
.auth-wrap { min-height: 100%; display: grid; place-items: center; padding: 24px; }
.card { width: 100%; max-width: 400px; background: var(--card); border: 1px solid var(--stroke);
  border-radius: var(--radius); padding: 36px 32px; backdrop-filter: blur(12px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); }
.card.wide { max-width: 560px; }
.brand { font-size: 34px; font-weight: 700; letter-spacing: 0.04em; margin: 0 0 4px;
  background: linear-gradient(90deg, var(--cornflower), var(--violet));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.sub { color: var(--muted); margin: 0 0 26px; font-size: 15px; }
label { display: block; font-size: 13px; color: var(--muted); margin: 16px 0 6px; }
input { width: 100%; padding: 12px 14px; font-size: 15px; color: var(--text);
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--stroke); border-radius: 10px;
  outline: none; transition: border-color 0.15s, box-shadow 0.15s; }
input:focus { border-color: var(--cornflower); box-shadow: 0 0 0 3px rgba(100, 149, 237, 0.25); }
button[type="submit"] { width: 100%; margin-top: 24px; padding: 13px; font-size: 15px; font-weight: 600;
  color: #fff; background: linear-gradient(90deg, var(--indigo), var(--violet)); border: 0; border-radius: 10px;
  cursor: pointer; transition: transform 0.08s, filter 0.15s; }
button[type="submit"]:hover { filter: brightness(1.08); }
button[type="submit"]:active { transform: translateY(1px); }
button[type="submit"]:disabled { opacity: 0.6; cursor: default; }
.error { display: none; margin-top: 18px; padding: 10px 12px; font-size: 14px; color: var(--danger);
  background: rgba(255, 107, 125, 0.10); border: 1px solid rgba(255, 107, 125, 0.30); border-radius: 10px; }
.notice { margin-top: 18px; padding: 12px 14px; font-size: 14px; color: var(--text); line-height: 1.5;
  background: rgba(139, 123, 255, 0.10); border: 1px solid rgba(139, 123, 255, 0.30); border-radius: 10px; }
.foot { margin-top: 22px; font-size: 14px; color: var(--muted); text-align: center; }
.foot a { color: var(--cornflower); text-decoration: none; }
.foot a:hover { text-decoration: underline; }

/* ---------- landing ---------- */
.nav { position: fixed; inset: 0 0 auto 0; display: flex; align-items: center; justify-content: space-between;
  padding: 18px 26px; z-index: 10; }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 17px; color: var(--text); text-decoration: none; }
.logo .mark { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font-size: 15px; color: #fff;
  background: linear-gradient(135deg, var(--indigo), var(--violet)); }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.btn { font-size: 14px; font-weight: 600; border-radius: 999px; padding: 9px 18px; cursor: pointer; text-decoration: none;
  display: inline-block; border: 1px solid transparent; transition: filter 0.15s, border-color 0.15s; }
.btn-ghost { color: var(--text); border-color: var(--stroke); }
.btn-ghost:hover { border-color: rgba(255, 255, 255, 0.28); }
.btn-primary { color: #fff; background: linear-gradient(90deg, var(--indigo), var(--violet)); }
.btn-primary:hover { filter: brightness(1.08); }

.hero { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 90px 20px 40px; }
.hero h1 { font-size: clamp(34px, 5vw, 52px); font-weight: 700; margin: 0 0 34px; text-align: center; letter-spacing: -0.01em; }

.prompt { width: 100%; max-width: 720px; position: relative; border-radius: 22px; }
.prompt-inner { position: relative; z-index: 0; background: #15151d;
  border-radius: 22px; padding: 20px 20px 14px; }
.prompt-text { width: 100%; min-height: 56px; max-height: 220px; background: transparent; border: 0;
  outline: none; resize: none; color: var(--text); font: inherit; font-size: 17px; line-height: 1.45; padding: 0; }
.prompt-text::placeholder { color: var(--muted); }
.prompt-row { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.prompt-left { display: flex; align-items: center; gap: 12px; }
.icon-btn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--stroke); background: rgba(255, 255, 255, 0.04);
  color: var(--text); font-size: 20px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.icon-btn:hover { border-color: rgba(255, 255, 255, 0.28); }
.chip { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted);
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--stroke); border-radius: 999px; padding: 7px 13px; cursor: pointer; }
.send { width: 40px; height: 40px; border-radius: 50%; border: 0; color: #fff; font-size: 18px; cursor: pointer;
  display: grid; place-items: center; background: linear-gradient(135deg, var(--indigo), var(--violet)); }
.send:hover { filter: brightness(1.1); }

/* ---- Border beam is vendored in beam.css (Jakub Antalik's border-beam · md/colorful). ---- */

.cards { width: 100%; max-width: 840px; margin-top: 30px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.ex-card { text-align: left; border: 1px solid var(--stroke-2); border-radius: 14px; overflow: hidden; background: var(--panel);
  cursor: pointer; padding: 0; transition: transform 0.12s, border-color 0.15s; }
.ex-card:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, 0.20); }
.ex-card .t { padding: 14px 14px 8px; font-size: 13.5px; color: var(--text); line-height: 1.35; }
.ex-card .preview { height: 92px; margin: 0 12px 12px; border-radius: 10px; }
@media (max-width: 760px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px) { .cards { grid-template-columns: 1fr; } }
.landing-foot { text-align: center; color: var(--muted); font-size: 13px; padding: 24px; }
.landing-foot a { color: var(--muted); text-decoration: underline; }

/* ---------- dashboard / admin ---------- */
.dash-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pill { font-size: 13px; color: var(--muted); background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--stroke); border-radius: 999px; padding: 6px 12px; }
.link-btn { background: none; border: 1px solid var(--stroke); color: var(--text); padding: 9px 16px;
  border-radius: 10px; cursor: pointer; font-size: 14px; }
.link-btn:hover { border-color: var(--cornflower); }
.sec { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 22px 0 10px; }
.list { display: flex; flex-direction: column; gap: 8px; }
.urow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px;
  border: 1px solid var(--stroke-2); border-radius: 10px; background: rgba(255, 255, 255, 0.02); }
.uemail { font-size: 14px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge { margin-left: 8px; font-size: 11px; color: var(--violet); border: 1px solid rgba(139, 123, 255, 0.4);
  border-radius: 999px; padding: 1px 7px; }
.actions { display: flex; gap: 8px; flex-shrink: 0; }
.btn-approve, .btn-reject { font-size: 13px; border-radius: 8px; padding: 6px 12px; cursor: pointer;
  border: 1px solid var(--stroke); background: transparent; color: var(--text); }
.btn-approve { background: linear-gradient(90deg, var(--indigo), var(--violet)); border: 0; color: #fff; }
.btn-reject:hover { border-color: var(--danger); color: var(--danger); }
.muted-row { color: var(--muted); font-size: 14px; padding: 6px 2px; }
.admin-msg { display: none; margin-top: 14px; }

/* ============================================================
   Dashboard app shell (sidebar + streaming chat) — ChatGPT-style
   ============================================================ */
body.app { height: 100vh; overflow: hidden; display: flex; }

/* ---------- sidebar ---------- */
.sidebar { flex: 0 0 268px; width: 268px; height: 100vh; display: flex; flex-direction: column;
  padding: 12px 10px; gap: 6px; background: rgba(12, 12, 18, 0.66); backdrop-filter: blur(20px);
  border-right: 1px solid var(--stroke-2); }
.side-head { display: flex; align-items: center; padding: 6px 8px 8px; }
.new-chat { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 2px 2px 4px;
  padding: 11px 12px; font-size: 14px; font-weight: 600; color: var(--text); cursor: pointer;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--stroke); border-radius: 12px; transition: border-color .15s, background .15s; }
.new-chat:hover { border-color: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.08); }
.side-search { display: flex; align-items: center; gap: 8px; margin: 2px; padding: 9px 12px;
  background: rgba(255, 255, 255, 0.03); border: 1px solid var(--stroke-2); border-radius: 10px; }
.side-search i { color: var(--muted); font-size: 13px; }
.side-search input { all: unset; flex: 1; font-size: 13.5px; color: var(--text); min-width: 0; }
.side-search input::placeholder { color: var(--muted); }
.convos { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; padding: 6px 2px; }
.convos-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 8px 10px 4px; }
.convo { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 9px;
  background: transparent; color: var(--muted); cursor: pointer; text-align: left; font-size: 13.5px; transition: background .12s, color .12s; }
.convo:hover { background: rgba(255, 255, 255, 0.05); color: var(--text); }
.convo.active { background: rgba(139, 123, 255, 0.16); color: var(--text); }
.convo > i { font-size: 12px; opacity: .6; flex: 0 0 auto; }
.convo-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.convo-del { opacity: 0; flex: 0 0 auto; font-size: 11px; padding: 3px 5px; border-radius: 6px; color: var(--muted); transition: opacity .12s, color .12s; }
.convo:hover .convo-del { opacity: .55; }
.convo-del:hover { opacity: 1; color: var(--danger); }
.convos-empty { color: var(--muted); font-size: 13px; padding: 10px; text-align: center; }

.side-foot { position: relative; border-top: 1px solid var(--stroke-2); padding-top: 6px; margin-top: 2px; }
.account { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border: 0; border-radius: 10px;
  background: transparent; cursor: pointer; }
.account:hover { background: rgba(255, 255, 255, 0.05); }
.avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto;
  font-size: 13px; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--indigo), var(--violet)); }
.user-email { flex: 1; min-width: 0; font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.account > i { color: var(--muted); font-size: 12px; }
.menu { position: absolute; left: 8px; right: 8px; bottom: 56px; background: #191921; border: 1px solid var(--stroke);
  border-radius: 12px; padding: 6px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5); }
.menu[hidden] { display: none; }
.menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: 8px;
  background: transparent; color: var(--text); cursor: pointer; font-size: 13.5px; text-align: left; }
.menu-item:hover { background: rgba(255, 255, 255, 0.06); }
.menu-item.danger:hover { color: var(--danger); }
.menu-sep { height: 1px; background: var(--stroke-2); margin: 4px 6px; }

/* ---------- chat surface ---------- */
.chat { flex: 1; min-width: 0; height: 100vh; display: flex; flex-direction: column; position: relative; }
.chat-top { display: flex; align-items: center; gap: 12px; padding: 14px 22px; border-bottom: 1px solid var(--stroke-2); }
.model-pill { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted);
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--stroke); border-radius: 999px; padding: 5px 11px; }
.model-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: #3fd07a; box-shadow: 0 0 8px #3fd07a; }
.chat-title { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat.dragover::after { content: "Drop a screenshot to attach"; position: absolute; inset: 12px; z-index: 6; display: grid; place-items: center;
  background: rgba(11, 11, 16, 0.72); color: var(--text); font-size: 16px; font-weight: 600; border: 2px dashed var(--violet);
  border-radius: 16px; pointer-events: none; }

.messages { flex: 1; overflow-y: auto; padding: 28px 0 8px; }
.msg { max-width: 768px; margin: 0 auto 26px; padding: 0 24px; display: flex; gap: 14px; animation: msg-in .25s ease both; }
@keyframes msg-in { from { opacity: 0; transform: translateY(6px); } }
.msg-av { width: 30px; height: 30px; border-radius: 8px; flex: 0 0 auto; display: grid; place-items: center; font-size: 13px; font-weight: 700; }
.msg.assistant .msg-av { background: linear-gradient(135deg, var(--indigo), var(--violet)); color: #fff; }
.msg.user .msg-av { background: rgba(255, 255, 255, 0.08); color: var(--text); border: 1px solid var(--stroke); }
.msg-body { flex: 1; min-width: 0; padding-top: 3px; line-height: 1.62; color: var(--text); font-size: 15px; }
.msg.user .msg-body .plain { white-space: pre-wrap; }
.stream-status { display: flex; align-items: center; gap: 8px; margin-top: 8px; color: var(--muted); font-size: 13px; }
.stream-status i { color: var(--violet); }
.stream-status .sm { opacity: .75; font-variant-numeric: tabular-nums; }
.msg-error { color: var(--danger); }

.md { margin: 0 0 12px; } .md:last-child { margin-bottom: 0; }
p.md { margin: 0 0 12px; }
.md h2 { font-size: 19px; margin: 18px 0 8px; } .md h3 { font-size: 16px; margin: 16px 0 8px; } .md h4 { font-size: 14px; margin: 14px 0 6px; }
.md ul, .md ol { margin: 0 0 12px; padding-left: 22px; } .md li { margin: 4px 0; }
.md code { background: rgba(255, 255, 255, 0.08); border: 1px solid var(--stroke-2); border-radius: 5px; padding: 1px 5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88em; }
.md a { color: var(--cornflower); }
.code { margin: 12px 0; border: 1px solid var(--stroke); border-radius: 12px; overflow: hidden; background: #0c0c12; }
.code-bar { display: flex; align-items: center; justify-content: space-between; padding: 7px 12px;
  background: rgba(255, 255, 255, 0.03); border-bottom: 1px solid var(--stroke-2); }
.code-lang { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.code-copy { background: transparent; border: 0; color: var(--muted); cursor: pointer; font-size: 12px; display: inline-flex; gap: 6px; align-items: center; }
.code-copy:hover { color: var(--text); }
.code pre { margin: 0; padding: 14px 16px; overflow-x: auto; }
.code code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; line-height: 1.55; color: #e6e6f0; white-space: pre; }

/* ---------- empty state ---------- */
.empty { max-width: 768px; margin: 0 auto; min-height: 56vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; padding: 0 24px; }
.empty-mark { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; font-size: 24px; color: #fff;
  background: linear-gradient(135deg, var(--indigo), var(--violet)); box-shadow: 0 12px 40px rgba(109, 94, 252, 0.4); margin-bottom: 16px; }
.empty h1 { font-size: 26px; font-weight: 700; margin: 0 0 4px; }
.empty p { color: var(--muted); margin: 0; font-size: 14px; }

/* ---------- composer (bottom pill) ---------- */
.composer-wrap { padding: 12px 24px 22px; }
.composer { max-width: 768px; margin: 0 auto; position: relative; border-radius: 24px; }
.composer-shell { position: relative; max-width: 768px; margin: 0 auto; }
.composer-shell .composer { max-width: none; margin: 0; }
.stat-badges { position: absolute; top: 0; right: 18px; transform: translateY(-50%); z-index: 4; display: flex; gap: 6px; }
.stat-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
  color: var(--text); background: #1b1b25; border: 1px solid var(--stroke); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45); white-space: nowrap; }
.stat-badge i { font-size: 11px; }
.stat-badge.gpu i { color: #3fd07a; }
.stat-badge.cpu i { color: #4cc9f0; }
.stat-badge.hdd i { color: #b388ff; }
:root[data-theme="light"] .stat-badge { background: #ffffff; }
.composer-inner { position: relative; z-index: 0; background: #15151d; border-radius: 24px; padding: 14px 16px 10px; }
.composer-text { width: 100%; min-height: 24px; max-height: 200px; background: transparent; border: 0; outline: none; resize: none;
  color: var(--text); font: inherit; font-size: 15.5px; line-height: 1.5; padding: 0; }
.composer-text::placeholder { color: var(--muted); }
.composer-row { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; gap: 10px; }
.composer-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.composer-right { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.composer-hint { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mic { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--stroke); background: rgba(255, 255, 255, 0.04);
  color: var(--text); font-size: 15px; cursor: pointer; display: grid; place-items: center; transition: border-color .15s, background .15s; }
.mic:hover { border-color: rgba(255, 255, 255, 0.28); }
.mic.rec { background: var(--danger); border-color: var(--danger); color: #fff; animation: mic-pulse 1.3s ease-in-out infinite; }
@keyframes mic-pulse { 50% { box-shadow: 0 0 0 6px rgba(255, 107, 125, 0.22); } }
.send:disabled { opacity: .45; cursor: default; filter: none; }
.attach { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--stroke); background: rgba(255, 255, 255, 0.04);
  color: var(--text); font-size: 16px; cursor: pointer; display: grid; place-items: center; flex: 0 0 auto; transition: border-color .15s, background .15s; }
.attach:hover { border-color: rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.07); }
.tool-toggle { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto;
  border: 1px solid var(--stroke); background: rgba(255, 255, 255, 0.04); color: var(--muted); font-size: 15px;
  cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.tool-toggle:hover { border-color: rgba(255, 255, 255, 0.28); color: var(--text); }
.tool-toggle.on { background: rgba(139, 123, 255, 0.22); border-color: rgba(139, 123, 255, 0.6); color: var(--violet); }
.attachment { display: flex; gap: 8px; margin-bottom: 10px; }
.attachment[hidden] { display: none; }
.attach-thumb { height: 64px; width: auto; max-width: 140px; object-fit: cover; border-radius: 10px; border: 1px solid var(--stroke); }
.attach-rm { align-self: flex-start; margin-left: -13px; margin-top: -6px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--stroke);
  background: #0c0c12; color: #fff; cursor: pointer; font-size: 11px; display: grid; place-items: center; }
.attach-rm:hover { color: var(--danger); }
.msg-img { display: block; margin-top: 10px; max-width: 320px; max-height: 240px; border-radius: 12px; border: 1px solid var(--stroke); }
.md.status { color: var(--muted); font-style: italic; }

/* ---------- admin modal ---------- */
.modal { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(4px); display: grid; place-items: center; padding: 24px; }
.modal[hidden] { display: none; }
.modal-card { width: 100%; max-width: 520px; max-height: 80vh; overflow-y: auto; background: var(--panel); border: 1px solid var(--stroke);
  border-radius: 18px; padding: 24px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); }
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.modal-head h2 { font-size: 18px; margin: 0; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 2px;
  border-bottom: 1px solid var(--stroke-2); font-size: 14px; }
.set-row:last-child { border-bottom: 0; }
.set-row span { color: var(--muted); }
.set-row strong { color: var(--text); font-weight: 600; }

/* ---------- header doc links ---------- */
.chat-title { flex: 0 1 auto; min-width: 0; }
.doc-links { display: flex; gap: 6px; align-items: center; margin-left: auto; flex: 0 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none;
  padding-right: 2px; -webkit-mask-image: linear-gradient(to right, #000 92%, transparent); mask-image: linear-gradient(to right, #000 92%, transparent); }
.doc-links::-webkit-scrollbar { height: 0; }
.doc-link { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; padding: 6px 11px; border-radius: 999px;
  border: 1px solid var(--stroke-2); background: rgba(255, 255, 255, 0.03); color: var(--muted); font-size: 12.5px;
  text-decoration: none; white-space: nowrap; transition: color .15s, border-color .15s; }
.doc-link:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.25); }
.doc-link i { font-size: 13px; }
.doc-edit { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--stroke-2);
  background: transparent; color: var(--muted); cursor: pointer; }
.doc-edit:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.25); }
.link-row { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--stroke-2); }
.link-row i { color: var(--muted); width: 18px; text-align: center; flex: 0 0 auto; }
.link-meta { flex: 1; min-width: 0; }
.link-lab { font-size: 14px; color: var(--text); }
.link-url { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.links-add { display: flex; gap: 8px; margin-top: 16px; }
.links-add input { flex: 1; min-width: 0; padding: 9px 11px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--stroke);
  border-radius: 8px; color: var(--text); font: inherit; font-size: 13px; outline: none; }
.links-add input:focus { border-color: var(--cornflower); }
.links-add #link-label { max-width: 130px; }
.links-add button { padding: 9px 16px; border-radius: 8px; border: 0; background: linear-gradient(90deg, var(--indigo), var(--violet));
  color: #fff; font-weight: 600; cursor: pointer; }
@media (max-width: 860px) { .doc-link span { display: none; } }

/* ============================================================
   Light theme — dashboard only, toggled via [data-theme="light"]
   ============================================================ */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #eceef3;
  --panel: #ffffff;
  --card: rgba(0, 0, 0, 0.03);
  --stroke: rgba(0, 0, 0, 0.12);
  --stroke-2: rgba(0, 0, 0, 0.07);
  --text: #1a1c24;
  --muted: #5b6172;
}
:root[data-theme="light"] body {
  background:
    radial-gradient(80% 65% at 50% 116%, rgba(139, 123, 255, 0.12), transparent 60%),
    radial-gradient(52% 50% at 8% 92%, rgba(255, 93, 214, 0.08), transparent 64%),
    radial-gradient(52% 52% at 92% 96%, rgba(100, 149, 237, 0.10), transparent 64%),
    var(--bg);
}
:root[data-theme="light"] .sidebar { background: rgba(255, 255, 255, 0.72); }
:root[data-theme="light"] .composer-inner { background: #ffffff; }
:root[data-theme="light"] .menu,
:root[data-theme="light"] .modal-card,
:root[data-theme="light"] .gpu-badge { background: #ffffff; }
:root[data-theme="light"] .code { background: #f3f4f8; }
:root[data-theme="light"] .code code { color: #1a1c24; }
:root[data-theme="light"] .code-bar { background: rgba(0, 0, 0, 0.03); }
:root[data-theme="light"] .md code { background: rgba(0, 0, 0, 0.06); }
:root[data-theme="light"] input,
:root[data-theme="light"] .side-search,
:root[data-theme="light"] .tool-toggle,
:root[data-theme="light"] .mic,
:root[data-theme="light"] .attach { background: rgba(0, 0, 0, 0.04); }
:root[data-theme="light"] .msg.user .msg-av { background: rgba(0, 0, 0, 0.06); }
:root[data-theme="light"] .convo:hover,
:root[data-theme="light"] .new-chat { background: rgba(0, 0, 0, 0.05); }
:root[data-theme="light"] .convo.active { background: rgba(109, 94, 252, 0.14); }

/* ---------- settings: avatar + change password ---------- */
.set-avatar { display: flex; align-items: center; gap: 16px; padding: 6px 0 16px; }
.set-avatar .avatar.lg { width: 56px; height: 56px; font-size: 20px; background-size: cover; background-position: center; }
.set-avatar-actions { display: flex; gap: 8px; }
.set-section { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 18px 0 10px; }
.set-input { width: 100%; padding: 11px 13px; margin-bottom: 10px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--stroke);
  border-radius: 10px; color: var(--text); font: inherit; font-size: 14px; outline: none; }
.set-input:focus { border-color: var(--cornflower); }
.set-wide { width: 100%; padding: 11px; border: 0; border-radius: 10px; background: linear-gradient(90deg, var(--indigo), var(--violet)); color: #fff; font-weight: 600; cursor: pointer; }
:root[data-theme="light"] .set-input { background: rgba(0, 0, 0, 0.04); }
.set-hint { color: var(--muted); font-size: 13px; margin: 4px 0 8px; }
.cli-box { background: #0c0c12; border: 1px solid var(--stroke); border-radius: 10px; padding: 11px 13px; margin-bottom: 10px; overflow-x: auto; }
.cli-box code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; color: #cfe3ff; white-space: nowrap; }
:root[data-theme="light"] .cli-box { background: #f3f4f8; }
:root[data-theme="light"] .cli-box code { color: #1a4e8a; }

/* ---------- auto web-search inline highlight (blue pill on the matched phrase, no border) ---------- */
.ta-wrap { position: relative; }
.ta-backdrop { position: absolute; inset: 0; z-index: 0; margin: 0; padding: 0; border: 0; font: inherit; font-size: 15.5px; line-height: 1.5;
  white-space: pre-wrap; overflow-wrap: break-word; word-break: break-word; color: var(--text); pointer-events: none; overflow: hidden; }
.ta-backdrop .kw { background: rgba(100, 149, 237, 0.32); color: #dce8ff; border-radius: 6px; }
.composer-text { position: relative; z-index: 1; color: transparent; background: transparent; caret-color: var(--text); }

/* ---------- admin user rows: avatar + email ---------- */
.uleft { display: flex; align-items: center; gap: 10px; min-width: 0; }
.avatar.sm { width: 28px; height: 28px; font-size: 12px; flex: 0 0 auto; background-size: cover; background-position: center; }

/* ---------- per-chat ... menu ---------- */
.convo-dots { opacity: 0; flex: 0 0 auto; font-size: 13px; padding: 3px 6px; border-radius: 6px; color: var(--muted); transition: opacity .12s, color .12s; }
.convo:hover .convo-dots, .convo.active .convo-dots { opacity: .6; }
.convo-dots:hover { opacity: 1; color: var(--text); }
.convo-menu { position: fixed; z-index: 70; min-width: 178px; background: #191921; border: 1px solid var(--stroke); border-radius: 12px;
  padding: 6px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5); }
.convo-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: 0; border-radius: 8px;
  background: transparent; color: var(--text); cursor: pointer; font-size: 13.5px; text-align: left; }
.convo-menu-item i { width: 16px; text-align: center; color: var(--muted); }
.convo-menu-item:hover { background: rgba(255, 255, 255, 0.06); }
.convo-menu-item.danger { color: var(--danger); } .convo-menu-item.danger i { color: var(--danger); }
:root[data-theme="light"] .convo-menu { background: #ffffff; }
:root[data-theme="light"] .convo-menu-item:hover { background: rgba(0, 0, 0, 0.05); }

/* ---------- mobile ---------- */
.nav-toggle { display: none; }
.scrim { display: none; }
@media (max-width: 860px) {
  .sidebar { position: fixed; left: 0; top: 0; bottom: 0; z-index: 50; transform: translateX(-100%); transition: transform .22s ease; }
  .sidebar.open { transform: none; }
  .scrim { position: fixed; inset: 0; z-index: 45; background: rgba(0, 0, 0, 0.5); }
  .scrim.show { display: block; }
  .nav-toggle { display: grid; place-items: center; position: fixed; top: 12px; left: 12px; z-index: 20; width: 40px; height: 40px;
    border-radius: 10px; border: 1px solid var(--stroke); background: rgba(12, 12, 18, 0.85); color: var(--text); cursor: pointer; }
  .chat-top { padding-left: 64px; }
  .msg, .composer-wrap { padding-left: 14px; padding-right: 14px; }
}

/* ---------- landing tagline under the prompt ---------- */
.hero-info { max-width: 780px; margin: 30px auto 0; text-align: center; }
.hero-info p { color: var(--muted); font-size: 15px; line-height: 1.65; margin: 0 0 10px; }
.hero-info p:last-child { margin-bottom: 0; }
.hero-info strong { color: var(--text); font-weight: 600; }
.install { max-width: 720px; margin: 30px auto 0; }
.install-label { font-size: 14px; font-weight: 700; color: var(--text); margin: 0 0 10px; }
.install-box { display: flex; align-items: center; gap: 12px; background: #0c0c12; border: 1px solid var(--stroke); border-radius: 12px; padding: 14px 16px; }
.install-cmd { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; text-align: left; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; }
.install-cmd::-webkit-scrollbar { height: 0; }
.install-cmd .t-cmd { color: #e6e6f0; }
.install-cmd .t-flag { color: #6cb6ff; }
.install-cmd .t-url { color: #ffa657; }
.install-cmd .t-pipe { color: var(--muted); }
.install-copy { flex: 0 0 auto; background: transparent; border: 0; color: var(--muted); cursor: pointer; font-size: 15px; padding: 4px 6px; border-radius: 6px; }
.install-copy:hover { color: var(--text); }