/* ════════════════════════════════════════════════════════════
   KRoSAI — refined dark UI (monochrome, no accent colors)
   ════════════════════════════════════════════════════════════ */
:root {
  font-family: Inter, "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #ededf0;
  background: #0a0a0b;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;

  --bg: #0a0a0b;
  --panel: #0e0e10;
  --panel-2: #18181c;
  --composer: #141416;
  --card: #141416;

  --border: rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.16);

  --text: #ededf0;
  --muted: #9b9ba4;
  --muted-2: #6b6b74;

  --accent: #f3f3f5;          /* monochrome "accent" = near-white */
  --accent-ink: #0a0a0b;      /* text/icon on accent surfaces */
  --accent-soft: rgba(255,255,255,0.08);
  --accent-soft-2: rgba(255,255,255,0.16);

  --danger: #e5605f;
  --ok: #46c771;

  --shadow-soft: 0 2px 10px rgba(0,0,0,0.4);
  --shadow-card: 0 10px 34px rgba(0,0,0,0.5);
  --shadow-menu: 0 22px 70px rgba(0,0,0,0.62);
}
*, *::before, *::after { box-sizing: border-box; }
html, body { width:100%; min-width:320px; height:100%; margin:0; padding:0; overflow:hidden; background:var(--bg); }
button, input, textarea, select { font: inherit; }
button { border:0; }
button:focus-visible, input:focus-visible { outline:2px solid var(--accent-soft-2); outline-offset:2px; }
textarea:focus-visible { outline:none; }
::selection { background: rgba(255,255,255,0.18); }

/* ── Icons: unify to a consistent Lucide outline look ───────*/
svg { stroke-linecap: round; stroke-linejoin: round; }
svg[fill="none"] { stroke-width: 2; }

/* ── Shell ──────────────────────────────────────────────────*/
.app-shell {
  width:100vw; height:100vh; overflow:hidden; color:var(--text);
  background:
    radial-gradient(1100px 560px at 72% -12%, rgba(255,255,255,0.05), transparent 60%),
    linear-gradient(180deg, #0c0c0e 0%, #060607 100%);
}
.chat-surface { width:100%; height:100%; display:grid; grid-template-columns: 288px minmax(0,1fr); background:transparent; }
.chat-main { position:relative; min-width:0; height:100%; overflow:hidden; display:grid; grid-template-rows: auto 1fr auto; }
.page-view { grid-row:1 / -1; min-height:0; overflow:hidden; display:flex; flex-direction:column; padding:34px 42px 42px; }
.page-view-header { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:22px; }
.page-view-header h2 { margin:0; color:#fff; font-size:28px; line-height:1.1; font-weight:800; }
.page-view-header p { margin:6px 0 0; color:var(--muted); font-size:13px; font-weight:600; }
.page-view-content { min-height:0; flex:1; overflow:auto; }
.clear-creations-btn {
  display:inline-flex; align-items:center; gap:7px; padding:9px 14px; border-radius:12px;
  border:1px solid var(--border); background:var(--panel-2); color:var(--muted);
  font-size:13px; font-weight:600; cursor:pointer; flex:0 0 auto;
  transition:border-color 140ms, background 140ms, color 140ms;
}
.clear-creations-btn:hover { border-color:rgba(229,96,95,0.5); background:rgba(229,96,95,0.10); color:var(--danger); }

/* ── Model topbar ───────────────────────────────────────────*/
.model-topbar { padding:14px 36px 0; display:flex; align-items:center; flex-shrink:0; }
.mobile-history-btn, .mobile-new-chat-btn { display:none; }
.model-picker-wrap { position:relative; }
.model-pick-btn {
  display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:12px; cursor:pointer;
  border:1px solid var(--border); background:var(--panel-2); color:var(--text); font-size:13px; font-weight:700;
  transition:border-color 140ms, background 140ms, transform 140ms;
}
.model-pick-btn:hover { border-color:var(--border-strong); background:#202026; transform:translateY(-1px); }
.model-pick-btn svg { opacity:.5; flex-shrink:0; }
.model-dropdown {
  position:absolute; top:calc(100% + 8px); left:0; z-index:30; width:250px; padding:8px;
  border:1px solid var(--border-strong); border-radius:18px; background:#161619; box-shadow:var(--shadow-menu);
  animation:popIn .18s cubic-bezier(.34,1.4,.5,1);
}
.model-option {
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 11px;
  border-radius:12px; border:0; background:transparent; cursor:pointer; color:var(--text); font-size:13px; font-weight:700; text-align:left; transition:background 120ms;
}
.model-option:hover  { background:var(--accent-soft); color:#fff; }
.model-option.active { background:var(--accent-soft); color:#fff; }
.model-option-check { width:18px; height:18px; display:grid; place-items:center; color:#fff; flex-shrink:0; }
.model-option-sub { font-size:11px; font-weight:600; color:var(--muted-2); margin-top:1px; }

/* ── Mode dropdown button ───────────────────────────────────*/
.mode-pick-wrap { position:relative; flex-shrink:0; }
.mode-pick-btn {
  display:flex; align-items:center; gap:6px; padding:8px 13px; border-radius:999px; cursor:pointer;
  border:1px solid var(--border); background:var(--panel-2); color:var(--muted); font-size:12px; font-weight:700; white-space:nowrap;
  transition:border-color 140ms, background 140ms, color 140ms;
}
.mode-pick-btn:hover { border-color:var(--border-strong); color:#fff; background:#202026; }
.mode-pick-btn svg { opacity:.55; flex-shrink:0; transition:transform 200ms; }
.mode-pick-btn.open svg { transform:rotate(180deg); }
.mode-dropdown {
  position:absolute; bottom:calc(100% + 10px); right:0; z-index:40; width:max-content; min-width:168px; max-width:230px; padding:6px;
  border:1px solid rgba(255,255,255,0.12); border-radius:14px;
  background:rgba(18,18,20,0.96); backdrop-filter:blur(20px); box-shadow:0 18px 50px rgba(0,0,0,.55);
  animation:popIn .16s cubic-bezier(.34,1.4,.5,1);
}
.mode-option {
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 11px;
  border-radius:10px; border:0; background:transparent; cursor:pointer; color:#b8b8c0; font-size:12px; font-weight:700; text-align:left; white-space:nowrap; transition:background 130ms, color 130ms;
}
.mode-option:hover  { background:rgba(255,255,255,0.07); color:#fff; }
.mode-option.active { background:rgba(255,255,255,0.1); color:#fff; }
.mode-option-check { width:15px; height:15px; display:grid; place-items:center; color:#fff; flex-shrink:0; opacity:.8; }

/* ── Conversation ───────────────────────────────────────────*/
.conversation { min-height:0; overflow-y:auto; scrollbar-width:thin; scrollbar-color: rgba(255,255,255,0.16) transparent; }
.conversation-empty { display:grid; place-items:center; padding:60px 24px 140px; height:100%; }
.welcome-lockup { position:relative; display:flex; flex-direction:column; align-items:center; gap:0; will-change:transform,opacity; animation:welcomeIn .55s cubic-bezier(.22,.9,.3,1) both; }
.welcome-glow {
  position:absolute; top:-70px; left:50%; margin-left:-190px;
  width:380px; height:380px; border-radius:50%; z-index:0; pointer-events:none;
  background:radial-gradient(circle, rgba(255,255,255,0.09), transparent 62%);
  filter:blur(10px); animation:glowPulse 7s ease-in-out infinite;
}
h1 {
  position:relative; z-index:1; margin:0; font-size:clamp(46px,6vw,78px); line-height:1; font-weight:800; letter-spacing:-.035em;
  background:linear-gradient(180deg, #ffffff 28%, #8f8f99); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.welcome-sub { position:relative; z-index:1; margin:18px 0 0; color:var(--muted); font-size:15px; font-weight:500; text-align:center; max-width:460px; }
.welcome-suggestions { position:relative; z-index:1; display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:32px; max-width:580px; }
.suggest-chip {
  display:inline-flex; align-items:center; gap:9px; padding:11px 17px; border-radius:14px;
  border:1px solid var(--border); background:rgba(22,22,26,0.7); color:var(--text);
  font-size:13px; font-weight:500; cursor:pointer; box-shadow:var(--shadow-soft); backdrop-filter:blur(10px);
  transition:border-color 180ms, background 180ms, transform 180ms, box-shadow 180ms;
}
.suggest-chip svg { color:var(--muted); opacity:.85; flex:0 0 auto; transition:color 180ms, transform 180ms; }
.suggest-chip:hover { border-color:var(--border-strong); background:#1d1d22; transform:translateY(-2px); box-shadow:var(--shadow-card); }
.suggest-chip:hover svg { color:#fff; transform:scale(1.08); }
.conversation-active { width:min(820px, calc(100% - 72px)); margin:0 auto; padding:28px 0 34px; }

/* ── Messages ───────────────────────────────────────────────*/
.message { display:grid; gap:8px; margin-bottom:26px; animation:riseIn .3s cubic-bezier(.22,.8,.3,1); }
.message-user { justify-items:end; }
.message-meta { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:12px; font-weight:700; }
.message-user .message-meta { justify-content:flex-end; }
.message-assistant .message-meta > span:first-child { color:#fff; font-weight:800; }
.message-time { color:var(--muted-2); font-weight:700; font-variant-numeric:tabular-nums; }
.message-bubble {
  max-width:min(720px, 88%); white-space:pre-wrap; overflow-wrap:anywhere;
  border:1px solid var(--border); border-radius:18px; padding:15px 17px; font-size:15px; line-height:1.65;
  color:#ececef; background:var(--card); box-shadow:var(--shadow-soft);
}
.message-user .message-bubble { color:#f4f4f6; border-color:var(--border-strong); background:linear-gradient(180deg,#222227,#19191d); }
.message-bubble p { margin:0 0 8px; }
.message-bubble p:last-child { margin-bottom:0; }
.message-bubble ul, .message-bubble ol { padding-left:20px; margin:8px 0; }
.message-bubble li { margin:3px 0; }
.message-bubble strong { color:#fff; }
.message-bubble h1, .message-bubble h2, .message-bubble h3 { margin:10px 0 5px; -webkit-text-fill-color:currentColor; color:#fff; background:none; }

/* ── Markdown link pill ─────────────────────────────────────*/
.md-link {
  display:inline-flex; align-items:center; gap:5px; vertical-align:baseline;
  padding:1px 9px 2px; margin:0 1px; border-radius:999px;
  background:var(--accent-soft); border:1px solid var(--border);
  color:#dfe7ff; text-decoration:none; font-weight:700; font-size:13px;
  transition:background 130ms, border-color 130ms, color 130ms, transform 130ms;
}
.md-link svg { opacity:.7; flex:0 0 auto; }
.md-link:hover { background:var(--accent-soft-2); border-color:var(--border-strong); color:#fff; transform:translateY(-1px); }
.md-link span { text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px; text-decoration-color:rgba(255,255,255,0.3); }

/* ── Code blocks ────────────────────────────────────────────*/
.code-block-wrap { position:relative; margin:8px 0; }
.code-block-wrap pre {
  background:#0c0c0e; color:#e7e7f0; border:1px solid var(--border);
  border-radius:12px; padding:14px; overflow-x:auto; font-size:13px; font-family:'JetBrains Mono','Courier New',monospace; margin:0; line-height:1.55;
}
.code-copy-btn {
  position:absolute; top:8px; right:8px; display:none; align-items:center; gap:5px; padding:4px 10px;
  border-radius:8px; border:1px solid var(--border); background:#1c1c20; color:var(--muted); font-size:11px; font-weight:700; cursor:pointer;
  transition:color 120ms, border-color 120ms, background 120ms;
}
.code-copy-btn:hover { color:#fff; border-color:var(--border-strong); background:#26262b; }
.code-copy-btn.copied { color:#46c771; border-color:rgba(70,199,113,0.5); }
.code-block-wrap:hover .code-copy-btn { display:flex; }
.message-bubble code { background:var(--accent-soft); color:#fff; padding:1px 6px; border-radius:6px; font-size:13px; font-family:'JetBrains Mono','Courier New',monospace; }
.code-block-wrap pre code { background:none; color:inherit; padding:0; border-radius:0; }
.md-table-wrap { width:100%; max-height:min(56vh,520px); overflow:auto; margin:10px 0; border:1px solid var(--border); border-radius:12px; background:#111113; }
.md-table { width:max-content; min-width:100%; border-collapse:collapse; font-size:13px; line-height:1.45; }
.md-table th, .md-table td { padding:10px 12px; border-bottom:1px solid rgba(255,255,255,.08); text-align:left; vertical-align:top; white-space:nowrap; }
.md-table th { position:sticky; top:0; z-index:1; background:#18181b; color:#fff; font-weight:800; }
.md-table tr:last-child td { border-bottom:0; }
.md-table td { color:var(--text); }

/* ── Attached image/file in bubble ──────────────────────────*/
.bubble-image { display:block; max-width:260px; max-height:200px; object-fit:cover; border-radius:14px; margin-bottom:8px; cursor:zoom-in; }
.bubble-file-tag { display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:10px; font-size:12px; color:var(--muted); border:1px solid var(--border); background:var(--panel-2); margin-bottom:8px; }

/* ── Gen result (image/video inside message) ─────────────────*/
.gen-result-img { display:block; max-width:100%; max-height:340px; object-fit:contain; border-radius:16px; cursor:zoom-in; margin-bottom:8px; }
.gen-result-video { display:block; max-width:100%; max-height:340px; border-radius:16px; margin-bottom:8px; }
.gen-result-actions { display:flex; gap:8px; margin-top:6px; }
.gen-result-btn {
  display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:11px;
  border:1px solid var(--border); background:var(--panel-2); color:var(--muted); font-size:12px; font-weight:700; cursor:pointer; text-decoration:none;
  transition:color 120ms, border-color 120ms, background 120ms, transform 120ms;
}
.gen-result-btn:hover { border-color:var(--border-strong); color:#fff; background:#222227; transform:translateY(-1px); }

/* ── Thinking card ───────────────────────────────────────────*/
.thinking-card { position:relative; width:fit-content; padding:6px 2px; background:none; border:0; box-shadow:none; }
/* Nothing-Phone style dot-matrix: a bare 3×3 square of small dots pulsing in a wave */
.thinking-dotgrid {
  display:grid; width:fit-content;
  grid-template-columns:repeat(3, 4px); grid-template-rows:repeat(3, 4px);
  gap:4px;
}
.thinking-dotgrid i {
  width:4px; height:4px; border-radius:50%; background:#fff;
  opacity:.16; transform:scale(.7);
  animation:dotPulse 1.25s ease-in-out infinite;
}
.thinking-dotgrid i:nth-child(1){ animation-delay:0s }
.thinking-dotgrid i:nth-child(2){ animation-delay:.1s }
.thinking-dotgrid i:nth-child(3){ animation-delay:.2s }
.thinking-dotgrid i:nth-child(4){ animation-delay:.1s }
.thinking-dotgrid i:nth-child(5){ animation-delay:.2s }
.thinking-dotgrid i:nth-child(6){ animation-delay:.3s }
.thinking-dotgrid i:nth-child(7){ animation-delay:.2s }
.thinking-dotgrid i:nth-child(8){ animation-delay:.3s }
.thinking-dotgrid i:nth-child(9){ animation-delay:.4s }
.thinking-copy { display:grid; gap:2px; position:relative; z-index:1; }
.thinking-copy strong { color:#fff; font-size:14px; font-weight:800; }
.thinking-copy span { color:var(--muted); font-size:12px; font-weight:700; font-variant-numeric:tabular-nums; }
.thinking-slow { font-size:11px; color:#e0b063; font-weight:600; padding-left:2px; animation:fadeIn .4s ease; position:relative; z-index:1; }
.typing-cursor { display:inline-block; width:3px; height:1.05em; margin-left:2px; border-radius:999px; background:#fff; vertical-align:-0.16em; animation:caretBlink .9s steps(1,end) infinite; }

/* ── Task progress ───────────────────────────────────────────*/
.task-progress { display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:14px; border:1px solid var(--border); background:var(--panel-2); font-size:13px; color:var(--muted); font-weight:700; margin-top:6px; }
.task-spinner { width:18px; height:18px; flex:0 0 auto; border:2px solid var(--accent-soft-2); border-top-color:#fff; border-radius:50%; animation:spin .8s linear infinite; }

/* ── Composer ────────────────────────────────────────────────*/
.composer { width:min(860px, calc(100% - 72px)); margin:0 auto 28px; }
.attached-chips { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:10px; }
.attach-chip { display:inline-flex; align-items:center; gap:7px; padding:5px 10px; border-radius:11px; border:1px solid var(--border); background:var(--panel-2); font-size:12px; font-weight:700; color:var(--muted); box-shadow:var(--shadow-soft); animation:popIn .2s cubic-bezier(.34,1.4,.5,1); }
.attach-chip img { width:28px; height:28px; object-fit:cover; border-radius:7px; }
.attach-chip-icon { display:inline-flex; align-items:center; color:var(--muted); }
.chip-remove { display:grid; place-items:center; cursor:pointer; color:var(--muted-2); background:transparent; border-radius:6px; padding:1px; transition:color 120ms; }
.chip-remove:hover { color:var(--danger); }

.composer-input-wrap {
  position:relative; min-height:72px; display:grid;
  grid-template-columns: auto auto minmax(80px,1fr) auto auto auto;
  grid-template-rows: minmax(28px, auto) auto; align-items:center; gap:8px;
  border:1px solid var(--border); border-radius:22px; padding:8px 10px; background:var(--composer);
  box-shadow:var(--shadow-card); transition:border-color 160ms, box-shadow 160ms;
}
.composer-input-wrap:focus-within { border-color:var(--border-strong); box-shadow:var(--shadow-card), 0 0 0 4px var(--accent-soft); }
textarea { grid-column:1 / -1; grid-row:1; justify-self:stretch; width:100%; min-height:26px; max-height:120px; resize:none; border:0; padding:7px 6px; color:var(--text); background:transparent; line-height:1.45; text-align:left; }
textarea::placeholder { color:var(--muted-2); }

/* ── Buttons ─────────────────────────────────────────────────*/
.round-tool-button, .send-button, .side-nav-item, .history-item, .attach-menu button {
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text);
  transition:background 150ms ease, color 150ms ease, border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}
.round-tool-button { width:40px; height:40px; border-radius:14px; color:var(--muted); background:var(--panel-2); }
.round-tool-button:hover { background:#26262b; color:#fff; }
.send-button {
  width:42px; height:42px; border-radius:15px; color:var(--accent-ink);
  background:linear-gradient(160deg,#ffffff,#cfcfd4); box-shadow:0 8px 20px rgba(0,0,0,0.45);
}
.send-button:hover:not(:disabled) { transform:translateY(-1px); background:#fff; box-shadow:0 10px 26px rgba(0,0,0,0.55); }
.send-button:disabled { cursor:not-allowed; color:#5e5e66; background:#222227; box-shadow:none; }
.voice-call-button { width:34px; height:34px; border-radius:12px; color:var(--muted); background:transparent; box-shadow:none; }
.voice-call-button:hover { background:var(--accent-soft); color:#fff; transform:none; }
.voice-call-button.active { color:#0a0a0b; background:linear-gradient(160deg,#ffffff,#cfcfd4); border:0; animation:micPulse 1.3s ease-in-out infinite; }
.stop-button { color:#fff !important; background:var(--danger) !important; box-shadow:0 8px 20px rgba(229,96,95,0.28) !important; }

/* ── Attach menu ─────────────────────────────────────────────*/
.attach-menu-wrap { position:relative; }
.attach-menu { position:absolute; left:-2px; bottom:calc(100% + 14px); z-index:20; width:252px; padding:8px; border:1px solid var(--border-strong); border-radius:20px; background:#161619; box-shadow:var(--shadow-menu); animation:popIn .18s cubic-bezier(.34,1.4,.5,1); }
.attach-menu button { width:100%; justify-content:flex-start; gap:12px; height:44px; border-radius:13px; padding:0 11px; background:transparent; color:var(--text); font-size:14px; font-weight:700; }
.attach-menu button svg { color:#cdcdd4; opacity:.9; }
.attach-menu button:hover { background:var(--accent-soft); }

/* ── History panel ───────────────────────────────────────────*/
.history-panel { width:288px; min-width:0; max-width:288px; height:100vh; display:grid; grid-template-rows:auto auto auto auto minmax(0,1fr) auto; border-right:1px solid var(--border); background:var(--panel); overflow:hidden; }
.history-top { padding:20px 18px 12px; }
.side-brand { display:flex; align-items:center; gap:9px; }
.side-brand::before { content:""; width:22px; height:22px; border-radius:7px; background:linear-gradient(150deg,#fff,#9a9aa6); flex:0 0 auto; box-shadow:0 2px 8px rgba(0,0,0,0.4); }
.side-brand strong { font-size:19px; font-weight:800; letter-spacing:-.02em; background:linear-gradient(180deg,#fff,#b7b7c0); -webkit-background-clip:text; background-clip:text; color:transparent; }
.side-nav { display:grid; gap:5px; padding:0 14px 12px; }
.side-nav-item { width:100%; justify-content:flex-start; gap:10px; height:44px; border-radius:13px; padding:0 13px; background:rgba(255,255,255,0.055); border:1px solid var(--border); color:#fff; font-size:14px; font-weight:600; }
.side-nav-item:hover { background:rgba(255,255,255,0.1); border-color:var(--border-strong); }
.side-nav-item svg { color:#fff; }
.history-section { min-height:0; display:grid; grid-template-rows:minmax(0,1fr); padding:2px 14px 14px; }
.history-heading { display:flex; align-items:center; gap:6px; padding:10px 6px 8px; color:var(--muted); font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.history-list { min-height:0; overflow-y:auto; padding-right:3px; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,0.16) transparent; }
.history-group-label { padding:14px 10px 6px; color:var(--muted-2); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.history-list > .history-group-label:first-child { padding-top:4px; }
.history-item { width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px; height:38px; border-radius:11px; padding:0 8px 0 10px; background:transparent; color:var(--muted); text-align:left; font-size:13px; font-weight:500; cursor:pointer; border:0; }
.history-item > span:first-child { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
.history-item:hover { background:var(--panel-2); color:#fff; }
.history-item.selected { background:var(--accent-soft-2); color:#fff; }
.unread-dot { width:8px; height:8px; flex:0 0 auto; border-radius:50%; background:#fff; box-shadow:0 0 0 3px rgba(255,255,255,0.12); animation:pulseDot 1.8s ease-in-out infinite; }
.history-empty, .creations-empty, .gallery-empty { padding:10px 8px; color:var(--muted-2); font-size:12px; font-weight:700; }
.delete-chat { width:26px; height:26px; display:grid; place-items:center; flex:0 0 auto; border-radius:8px; color:var(--muted-2); opacity:0; background:transparent; cursor:pointer; border:0; transition:opacity 120ms, color 120ms, background 120ms; }
.history-item:hover .delete-chat, .history-item.selected .delete-chat { opacity:1; }
.delete-chat:hover { color:var(--danger); background:rgba(229,96,95,0.12); }
.history-settings { display:grid; gap:9px; padding:14px 16px; border-top:1px solid var(--border); background:var(--panel-2); }
.settings-title { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12px; font-weight:800; }
.status-row { display:flex; align-items:center; gap:8px; }
.status-dot { width:8px; height:8px; border-radius:50%; background:var(--muted-2); animation:pulseDot 2s ease-in-out infinite; }
.status-dot.online  { background:var(--ok); }
.status-dot.offline { background:var(--danger); animation:none; }
.status-text { font-size:12px; font-weight:700; color:var(--muted); }

/* ── Gen overlay ─────────────────────────────────────────────*/
.gen-overlay { position:fixed; inset:0; z-index:50; background:rgba(0,0,0,0.62); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; animation:fadeIn .15s ease; }
.gen-card { width:348px; padding:22px; border-radius:22px; border:1px solid var(--border-strong); background:#161619; box-shadow:var(--shadow-menu); animation:popIn .22s cubic-bezier(.34,1.5,.5,1); }
.gen-card-title { font-size:16px; font-weight:800; margin-bottom:14px; }
.gen-prompt-wrap { margin-bottom:14px; }
.gen-prompt-input { width:100%; min-height:70px; max-height:140px; resize:none; padding:11px 13px; border-radius:14px; border:1px solid var(--border); background:#0e0e10; color:var(--text); font-size:13px; font-weight:500; line-height:1.45; transition:border-color 140ms; }
.gen-prompt-input:focus { border-color:var(--border-strong); outline:none; }
.gen-prompt-input::placeholder { color:var(--muted-2); }
.gen-ratio-label { font-size:12px; font-weight:700; color:var(--muted); margin-bottom:8px; }
.gen-ratio-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.gen-ratio-btn { padding:10px; border-radius:12px; border:1px solid var(--border); background:var(--panel-2); color:var(--muted); font-size:13px; font-weight:700; cursor:pointer; transition:border-color 120ms, background 120ms, color 120ms; }
.gen-ratio-btn:hover { border-color:var(--border-strong); color:#fff; }
.gen-ratio-btn.active { border-color:#fff; background:var(--accent-soft-2); color:#fff; }
.gen-actions { display:flex; gap:8px; margin-top:18px; }
.gen-cancel-btn { flex:1; padding:11px; border-radius:13px; border:1px solid var(--border); background:transparent; color:var(--muted); font-size:13px; font-weight:700; cursor:pointer; transition:background 120ms; }
.gen-cancel-btn:hover { background:var(--panel-2); color:#fff; }
.gen-go-btn { flex:1; padding:11px; border-radius:13px; border:0; background:linear-gradient(160deg,#ffffff,#d3d3d8); color:#0a0a0b; font-size:13px; font-weight:800; cursor:pointer; box-shadow:0 8px 20px rgba(0,0,0,0.4); transition:transform 120ms, box-shadow 120ms; }
.gen-go-btn:hover { transform:translateY(-1px); background:#fff; box-shadow:0 11px 26px rgba(0,0,0,0.5); }

/* ── Toggle ──────────────────────────────────────────────────*/
.toggle-row { display:flex; align-items:center; gap:10px; cursor:pointer; }
.toggle-row input { display:none; }
.toggle-track { position:relative; width:38px; height:22px; border-radius:11px; background:#33333a; transition:background 200ms; flex:0 0 auto; }
.toggle-row input:checked + .toggle-track { background:#fff; }
.toggle-thumb { position:absolute; width:16px; height:16px; border-radius:50%; background:#86868e; top:3px; left:3px; transition:left 200ms, background 200ms; }
.toggle-row input:checked + .toggle-track .toggle-thumb { left:19px; background:#0a0a0b; }
.toggle-lbl { font-size:13px; font-weight:700; color:var(--muted); }

/* ── Modal ───────────────────────────────────────────────────*/
.modal-backdrop { position:fixed; inset:0; z-index:100; background:rgba(0,0,0,0.84); backdrop-filter:blur(10px); display:flex; align-items:center; justify-content:center; animation:fadeIn .15s ease; }
.modal-media img, .modal-media video { max-width:88vw; max-height:88vh; border-radius:16px; display:block; animation:popIn .24s cubic-bezier(.34,1.5,.5,1); }
.modal-close-btn { position:absolute; top:18px; right:18px; width:38px; height:38px; border-radius:50%; cursor:pointer; background:rgba(255,255,255,0.12); color:#fff; display:grid; place-items:center; border:0; transition:background 120ms; }
.modal-close-btn:hover { background:rgba(255,255,255,0.24); }

/* ── Reasoning block ────────────────────────────────────────*/
.reasoning-block { margin-bottom:10px; display:block; }
.reasoning-block[open] { margin-bottom:12px; }
summary { list-style:none; outline:none; }
summary::-webkit-details-marker { display:none; }
.reasoning-summary { display:inline-block; cursor:pointer; user-select:none; outline:none; }
.reasoning-pill { display:inline-flex; align-items:center; gap:6px; padding:6px 13px; border-radius:99px; background:var(--accent-soft); border:1px solid var(--border); color:var(--muted); font-size:12px; font-weight:700; transition:background 140ms, color 140ms, border-color 140ms; }
.reasoning-pill:hover { background:var(--accent-soft-2); color:#fff; }
.reasoning-pill-icon { opacity:.75; }
.reasoning-pill-arrow { opacity:.65; transition:transform 200ms ease; }
.reasoning-block[open] .reasoning-pill-arrow { transform:rotate(180deg); }
.reasoning-content { margin-top:8px; padding:11px 14px; border-left:2px solid var(--border-strong); font-size:13px; line-height:1.55; color:var(--muted); font-family:inherit; white-space:pre-wrap; background:var(--panel-2); border-radius:0 10px 10px 0; }

/* ── Context Compactor UI ────────────────────────────────────*/
.context-compactor-wrap { position:absolute; bottom:84px; left:50%; transform:translateX(-50%); z-index:40; pointer-events:none; width:min(440px,90%); }
.context-compactor { pointer-events:auto; display:flex; flex-direction:column; gap:8px; padding:13px 16px; border-radius:18px; border:1px solid var(--border-strong); background:rgba(20,20,22,0.9); backdrop-filter:blur(16px); box-shadow:var(--shadow-menu); animation:riseIn .24s cubic-bezier(.34,1.4,.5,1); }
.context-compactor-info { display:flex; align-items:center; justify-content:space-between; font-size:12px; font-weight:700; color:#fff; }
.context-compactor-title { display:flex; align-items:center; gap:6px; }
.context-compactor-title svg { color:var(--muted); }
.context-compactor-pct { color:var(--muted); font-variant-numeric:tabular-nums; }
.context-compactor-progress-track { width:100%; height:6px; border-radius:3px; background:var(--accent-soft); overflow:hidden; position:relative; }
.context-compactor-progress-bar { height:100%; width:0%; border-radius:3px; background:linear-gradient(90deg,#fff,#9a9aa3); transition:width .1s linear; }
.context-compactor-status { font-size:11px; font-weight:600; color:var(--muted-2); margin-top:-2px; }

@keyframes compressFlash { 0%{box-shadow:0 0 0 0 transparent;} 35%{box-shadow:0 0 0 2px var(--accent-soft-2);} 100%{box-shadow:0 0 0 0 transparent; opacity:.85;} }
.compress-flash { animation:compressFlash 1.5s cubic-bezier(.25,1,.5,1) forwards; }
.message-bubble.compacted { opacity:.78; transition:opacity .3s ease; }

/* ── Responsive ──────────────────────────────────────────────*/
@media (max-width:920px) {
  body { overflow:auto; }
  .app-shell { min-height:100vh; height:auto; overflow:auto; }
  .chat-surface { min-height:100vh; grid-template-columns:1fr; }
  .history-panel {
    display:grid; position:fixed; left:0; top:0; bottom:0; z-index:220;
    width:min(86vw,320px); max-width:min(86vw,320px);
    transform:translateX(-104%); transition:transform 180ms ease;
    box-shadow:18px 0 46px rgba(0,0,0,.48);
  }
  .history-panel.mobile-open { transform:translateX(0); }
  .conversation-active { width:min(760px,calc(100% - 28px)); padding-top:34px; }
  .composer { width:min(760px,calc(100% - 28px)); margin-bottom:14px; }
  .model-topbar { padding:10px 14px 0; }
  .context-compactor-wrap { bottom:76px; }
}
@media (max-width:560px) { h1 { font-size:34px; } .composer-input-wrap { min-height:56px; border-radius:20px; } .attach-menu { width:224px; } }

/* ── Sidebar search ─────────────────────────────────────────*/
.sidebar-search-wrap { padding:8px 14px; min-width:0; }
.search-input-container { position:relative; display:flex; align-items:center; width:100%; min-width:0; background:var(--panel-2); border:1px solid var(--border); border-radius:12px; padding:2px 10px; transition:border-color 150ms, background-color 150ms; }
.search-input-container:focus-within { border-color:var(--border-strong); background:#1d1d22; }
.search-icon { color:var(--muted-2); margin-right:8px; flex-shrink:0; }
#chatSearchInput { background:transparent; border:none; color:var(--text); font-size:13px; font-weight:500; padding:7px 0; width:100%; min-width:0; outline:none; }
#chatSearchInput::placeholder { color:var(--muted-2); }

/* ── Creations drawer ───────────────────────────────────────*/
.creations-drawer { border-bottom:1px solid var(--border); padding:10px 14px; min-width:0; overflow:hidden; }
.creations-header-btn { width:100%; display:flex; align-items:center; justify-content:space-between; background:transparent; color:var(--text); cursor:pointer; padding:7px 6px; font-weight:600; font-size:13px; border-radius:9px; }
.creations-header-btn:hover { background:var(--panel-2); }
.creations-title { display:flex; align-items:center; gap:8px; min-width:0; }
.creations-title svg { color:#cdcdd4; }
.chevron-icon { color:var(--muted-2); transition:transform 150ms; }
.creations-header-btn:hover .chevron-icon { transform:translateX(2px); color:#fff; }
.creations-row-strip { display:flex; gap:8px; margin-top:8px; width:100%; max-width:100%; min-width:0; overflow-x:auto; overflow-y:hidden; padding-bottom:4px; scrollbar-width:none; }
.creations-row-strip::-webkit-scrollbar { display:none; }
.creation-thumb-card { position:relative; width:78px; height:54px; border-radius:10px; overflow:hidden; background:var(--panel-2); border:1px solid var(--border); flex-shrink:0; cursor:pointer; transition:border-color 150ms, transform 150ms; }
.creation-thumb-card:hover { border-color:var(--border-strong); transform:scale(1.04); }
.creation-thumb-card img { width:100%; height:100%; object-fit:cover; display:block; }
.media-fallback, .creation-thumb-card .media-fallback, .gallery-card .media-fallback { position:absolute; inset:0; display:grid; place-items:center; color:#cdcdd4; background:var(--panel-2); font-size:18px; font-weight:800; }
.creation-thumb-card .thumb-play { position:absolute; inset:0; display:grid; place-items:center; background:rgba(0,0,0,0.32); color:#fff; }
.creation-thumb-card .thumb-play svg { fill:currentColor; }
.creation-thumb-card .thumb-icon-only { position:absolute; inset:0; display:grid; place-items:center; color:#cdcdd4; font-size:20px; }

/* ── Composer "more" submenu ────────────────────────────────*/
.menu-more-wrap { position:relative; width:100%; }
.menu-more-btn { display:flex; align-items:center; justify-content:space-between; width:100%; }
.chevron-right { color:var(--muted-2); margin-left:auto; }
.attach-submenu { position:absolute; left:calc(100% - 2px); bottom:0; z-index:60; width:166px; padding:6px; border:1px solid var(--border-strong); border-radius:16px; background:#161619; box-shadow:var(--shadow-menu); margin-left:0; display:none; flex-direction:column; gap:4px; }
.attach-submenu::before { content:""; position:absolute; left:-12px; top:0; width:12px; height:100%; }
.menu-more-wrap:hover .attach-submenu { display:flex; }
.attach-submenu button { width:100%; justify-content:flex-start; height:38px; border-radius:11px; padding:0 11px; background:transparent; color:var(--text); font-size:13px; font-weight:700; }
.attach-submenu button svg { color:#cdcdd4; }
.attach-submenu button:hover { background:var(--accent-soft); }

/* ── Active badges ──────────────────────────────────────────*/
#activeBadgeContainer { grid-column:2; grid-row:2; display:flex; flex-wrap:wrap; gap:6px; padding:4px 6px; align-items:center; }
.attach-menu-wrap { grid-column:1; grid-row:2; }
.mode-pick-wrap { grid-column:4; grid-row:2; }
.send-button { grid-column:6; grid-row:2; }
.voice-call-button { grid-column:5; grid-row:2; }
.credit-cost-hint {
  grid-column:3; grid-row:2; justify-self:start; align-self:center;
  display:inline-flex; align-items:center; height:28px; padding:0 10px;
  border-radius:999px; border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.045); color:#d7d7de;
  font-size:12px; font-weight:850; white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.provider-hidden { display:none !important; }
.stop-button { grid-column:6; grid-row:2; }
.active-badge { display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:999px; background:var(--accent-soft); border:0; color:#fff; font-size:12px; font-weight:700; animation:popIn .18s cubic-bezier(.34,1.4,.5,1); }
.active-badge svg { color:#fff; flex:0 0 auto; }
.badge-close { background:transparent; border:none; color:var(--muted); opacity:.8; font-size:14px; font-weight:800; cursor:pointer; padding:0 2px; display:flex; align-items:center; line-height:1; transition:color 120ms, opacity 120ms; }
.badge-close:hover { color:var(--danger); opacity:1; }

/* ── Side panel ─────────────────────────────────────────────*/
.chat-surface.has-side-panel { grid-template-columns:288px 1fr 1fr; }
.side-panel { height:100vh; background:var(--panel); border-left:1px solid var(--border); display:flex; flex-direction:column; overflow:hidden; animation:slideLeftFade .26s cubic-bezier(.25,1,.5,1); }
.side-panel-header { padding:14px 18px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; background:var(--panel-2); }
.side-panel-title-wrap { display:flex; align-items:center; gap:10px; }
.side-panel-title-wrap strong { font-size:14px; font-weight:800; color:#fff; }
.side-panel-icon { font-size:16px; color:#cdcdd4; }
.side-panel-actions { display:flex; align-items:center; gap:8px; }
.panel-action-btn { display:inline-flex; align-items:center; gap:6px; padding:7px 13px; border-radius:10px; background:linear-gradient(160deg,#ffffff,#d3d3d8); color:#0a0a0b; font-size:12px; font-weight:700; cursor:pointer; border:0; box-shadow:0 6px 16px rgba(0,0,0,0.4); transition:transform 120ms; }
.panel-action-btn:hover { transform:translateY(-1px); background:#fff; }
.panel-close-btn { width:32px; height:32px; border-radius:50%; display:grid; place-items:center; background:var(--panel-2); color:var(--muted); cursor:pointer; border:0; transition:background 120ms, color 120ms; }
.panel-close-btn:hover { background:#26262b; color:#fff; }
.side-panel-content { flex:1; overflow-y:auto; display:flex; flex-direction:column; padding:16px; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,0.16) transparent; }

/* ── Creations gallery ──────────────────────────────────────*/
.creations-gallery { display:flex; flex-direction:column; gap:16px; height:100%; }
.gallery-filters { display:flex; gap:6px; overflow-x:auto; padding-bottom:6px; scrollbar-width:none; flex-shrink:0; }
.gallery-filters::-webkit-scrollbar { display:none; }
.filter-pill { padding:7px 13px; border-radius:99px; background:var(--panel-2); border:1px solid var(--border); color:var(--muted); font-size:12px; font-weight:700; cursor:pointer; white-space:nowrap; transition:background 120ms, color 120ms, border-color 120ms; }
.filter-pill:hover { background:var(--accent-soft); color:#fff; }
.filter-pill.active { background:#fff; color:#0a0a0b; border-color:#fff; }
.gallery-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); gap:12px; overflow-y:auto; flex:1; }
.page-gallery-grid { grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); align-content:start; }
.creations-gallery-page { height:100%; }
.gallery-card { position:relative; border-radius:14px; overflow:hidden; background:var(--card); border:1px solid var(--border); cursor:pointer; transition:border-color 150ms, transform 150ms, box-shadow 150ms; aspect-ratio:4/3; display:flex; flex-direction:column; }
.gallery-card:hover { border-color:var(--border-strong); transform:translateY(-2px); box-shadow:var(--shadow-card); }
.gallery-card img { width:100%; height:100%; object-fit:cover; flex:1; }
.gallery-card-icon { position:absolute; inset:0; display:grid; place-items:center; color:#cdcdd4; font-size:28px; background:var(--accent-soft); }
.gallery-card-play { position:absolute; inset:0; display:grid; place-items:center; background:rgba(0,0,0,0.3); color:#fff; }
.gallery-card-play svg { fill:currentColor; filter:drop-shadow(0 2px 4px rgba(0,0,0,0.5)); }
.gallery-card-info { padding:8px 10px; background:var(--panel-2); border-top:1px solid var(--border); font-size:11px; font-weight:700; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ── Website preview ────────────────────────────────────────*/
.web-preview-container { display:flex; flex-direction:column; gap:12px; height:100%; }
.web-preview-iframe-wrap { flex:1; border-radius:14px; overflow:hidden; background:#fff; border:1px solid var(--border); position:relative; }
.web-preview-iframe { width:100%; height:100%; border:0; background:#fff; }
.web-console-drawer { height:140px; background:#0c0c0e; border:1px solid var(--border); border-radius:14px; display:flex; flex-direction:column; font-family:'JetBrains Mono','Courier New', monospace; flex-shrink:0; }
.web-console-header { background:#161619; padding:7px 13px; font-size:11px; font-weight:700; color:#b9b9c2; display:flex; justify-content:space-between; border-radius:13px 13px 0 0; }
.console-clear-btn { background:transparent; color:#b9b9c2; cursor:pointer; font-size:11px; font-weight:700; }
.console-clear-btn:hover { color:#fff; }
.web-console-logs { flex:1; overflow-y:auto; padding:8px 13px; font-size:11px; display:flex; flex-direction:column; gap:4px; color:#dcdce4; scrollbar-width:thin; }
.console-log-line { word-break:break-all; }
.console-log-line.error { color:#f08a8a; }
.console-log-line.warn { color:#e8c45e; }
.console-log-line.info { color:#8fc5f0; }
.console-log-line.success { color:#6fd99a; }

/* ── PDF reader ─────────────────────────────────────────────*/
.pdf-reader-container { display:flex; flex-direction:column; gap:16px; padding:8px; color:var(--text); font-size:14px; line-height:1.6; }
.pdf-reader-title { font-size:18px; font-weight:800; color:#fff; border-bottom:1px solid var(--border); padding-bottom:8px; }
.pdf-reader-body { white-space:pre-wrap; color:var(--muted); }

/* ── Media generation card + LOG ────────────────────────────*/
.media-gen-bubble,
.message-assistant .message-bubble.media-gen-bubble,
.media-result-bubble,
.message-assistant .message-bubble.media-result-bubble { padding:0; background:none; border:0; box-shadow:none; width:fit-content; max-width:100%; }
/* result image/video sized like ChatGPT: just the media, rounded, buttons under it */
.media-result-bubble .gen-result-img,
.media-result-bubble .gen-result-video { max-width:min(100%,420px); max-height:460px; border-radius:16px; }
.media-gen-card-wrap { display:flex; flex-direction:column; gap:10px; width:fit-content; max-width:100%; }
.media-gen-animation-card {
  position:relative; border-radius:16px; overflow:hidden;
  background:#1f2422; border:1px solid rgba(255,255,255,0.03);
  display:flex; justify-content:center; align-items:center; margin:0; max-width:100%;
}
.media-gen-animation-card.ratio-16-9 { width:min(100%,420px); aspect-ratio:16/9; }
.media-gen-animation-card.ratio-9-16 { width:min(72vw,236px); aspect-ratio:9/16; }
.media-gen-animation-card.ratio-1-1 { width:min(72vw,320px); aspect-ratio:1/1; }
.media-gen-animation-card.ratio-4-3 { width:min(72vw,360px); aspect-ratio:4/3; }
.media-gen-animation-card.is-error { background:#201d1d; border-color:rgba(229,96,95,0.18); }
.media-gen-dotfield {
  position:absolute; inset:18px 22px; display:grid;
  grid-template-columns:repeat(12, 1fr); grid-auto-rows:1fr;
  gap:15px 22px; opacity:.92;
}
.media-gen-dotfield i {
  width:3px; height:3px; border-radius:50%; background:#c8cfcb;
  justify-self:center; align-self:center;
  opacity:calc(.06 + (var(--i) % 7) * .035);
  transform:scale(calc(.55 + (var(--i) % 5) * .11));
  animation:dotFieldPulse 2.6s ease-in-out infinite;
  animation-delay:calc((var(--i) % 19) * -0.09s);
}
.media-gen-progress { position:absolute; right:18px; bottom:14px; z-index:1; }
.media-gen-percentage { font-size:12px; font-weight:800; color:rgba(255,255,255,.55); font-variant-numeric:tabular-nums; }
.media-gen-error {
  position:relative; z-index:2; width:min(78%,320px); display:flex; flex-direction:column; gap:7px;
  padding:13px 15px; border-radius:14px; background:rgba(0,0,0,.34);
  border:1px solid rgba(255,255,255,.08); color:#fff; text-align:left;
}
.media-gen-error strong { font-size:13px; font-weight:900; }
.media-gen-error span { color:rgba(255,255,255,.68); font-size:12px; font-weight:650; line-height:1.4; overflow-wrap:anywhere; }

/* generation log feed */
.media-gen-log { display:none !important; }
.media-gen-log-head { display:flex; align-items:center; gap:7px; color:#fff; font-weight:800; font-size:11px; text-transform:uppercase; letter-spacing:.05em; margin-bottom:2px; }
.media-gen-log-head .dot { width:7px; height:7px; border-radius:50%; background:#fff; animation:pulseDot 1.4s ease-in-out infinite; }
.media-gen-log-head.done .dot { background:var(--ok); animation:none; }
.media-gen-log-head.err .dot { background:var(--danger); animation:none; }
.media-gen-log-line { display:flex; gap:9px; color:var(--muted); font-weight:600; line-height:1.4; animation:logIn .26s ease; }
.media-gen-log-line .t { color:var(--muted-2); font-variant-numeric:tabular-nums; flex:0 0 auto; }
.media-gen-log-line.done { color:var(--ok); }
.media-gen-log-line.err { color:var(--danger); }

/* ════════════════════════════════════════════════════════════
   Animations
   ════════════════════════════════════════════════════════════ */
@keyframes popIn   { from{opacity:0; transform:scale(.96) translateY(4px)} to{opacity:1; transform:scale(1) translateY(0)} }
@keyframes riseIn  { from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:translateY(0)} }
@keyframes fadeIn  { from{opacity:0} to{opacity:1} }
@keyframes logIn   { from{opacity:0; transform:translateX(-6px)} to{opacity:1; transform:translateX(0)} }
@keyframes slideLeftFade { from{opacity:0; transform:translateX(20px)} to{opacity:1; transform:translateX(0)} }
@keyframes caretBlink { 0%,55%{opacity:1} 56%,100%{opacity:0} }
@keyframes sheen { 0%{background-position:200% 0} 100%{background-position:-100% 0} }
@keyframes dotFieldPulse { 0%,100%{ opacity:.05; transform:scale(.55); } 45%{ opacity:.48; transform:scale(1.15); } }
@keyframes morphSpin { 0%{border-radius:8px; transform:rotate(0deg) scale(.85)} 50%{border-radius:50%; transform:rotate(180deg) scale(1.05)} 100%{border-radius:8px; transform:rotate(360deg) scale(.85)} }
@keyframes softPing { 0%,100%{transform:scale(.92); opacity:.25} 50%{transform:scale(1.12); opacity:.5} }
@keyframes dotPulse { 0%,100%{opacity:.16; transform:scale(.7)} 45%{opacity:1; transform:scale(1)} }
@keyframes pulseDot { 0%,100%{transform:scale(.8); opacity:.5} 50%{transform:scale(1.1); opacity:1} }
@keyframes micPulse { 0%,100%{box-shadow:0 0 0 0 var(--accent-soft-2)} 50%{box-shadow:0 0 0 6px transparent} }
@keyframes spin { to{transform:rotate(360deg)} }
@keyframes mediaDotSpin { to{transform:rotate(360deg)} }
@keyframes glowPulse { 0%,100%{opacity:.55; transform:scale(.95)} 50%{opacity:1; transform:scale(1.08)} }
@keyframes welcomeIn { from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:translateY(0)} }

/* ── Custom scrollbars (webkit) ─────────────────────────────*/
*::-webkit-scrollbar { width:10px; height:10px; }
*::-webkit-scrollbar-track { background:transparent; }
*::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.12); border-radius:999px; border:2px solid transparent; background-clip:padding-box; }
*::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,0.22); background-clip:padding-box; }

/* ── Glass surfaces & finishing touches ─────────────────────*/
.history-panel { background:linear-gradient(180deg, rgba(18,18,21,0.92), rgba(12,12,14,0.92)); backdrop-filter:blur(20px); }
.composer-input-wrap { background:rgba(20,20,23,0.82); backdrop-filter:blur(20px); }
.model-pick-btn, .attach-menu, .mode-dropdown, .model-dropdown { backdrop-filter:blur(20px); }
/* cleaner assistant messages — let them breathe instead of a boxed card */
.message-assistant .message-bubble { background:rgba(20,20,23,0.55); border-color:rgba(255,255,255,0.06); }
.message-assistant .message-bubble:hover { border-color:rgba(255,255,255,0.10); }

.auth-overlay, .admin-overlay { position:fixed; inset:0; z-index:500; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.74); backdrop-filter:blur(18px); padding:18px; }
.auth-card, .admin-card { width:min(380px,100%); border:1px solid var(--border-strong); border-radius:20px; background:#141416; box-shadow:var(--shadow-menu); padding:20px; display:flex; flex-direction:column; gap:12px; }
.auth-title, .admin-title { color:#fff; font-size:18px; font-weight:900; }
.auth-subtitle, .admin-subtitle { color:var(--muted); font-size:12px; font-weight:600; line-height:1.45; }
.auth-input { width:100%; height:42px; border-radius:12px; border:1px solid var(--border); background:#0d0d0f; color:#fff; padding:0 12px; font-size:13px; font-weight:700; outline:none; }
.auth-input:focus { border-color:var(--border-strong); }
.auth-submit { height:42px; border-radius:12px; background:#fff; color:#050506; font-size:13px; font-weight:900; cursor:pointer; }
.auth-submit:hover { background:#e8e8ec; }
.auth-error { min-height:16px; color:var(--danger); font-size:12px; font-weight:700; }
.user-box { border-bottom:1px solid var(--border); padding:0 0 10px; margin-bottom:10px; }
.user-row { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.user-main { display:flex; flex-direction:column; min-width:0; }
.user-main strong { color:#fff; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.user-main span { color:var(--muted); font-size:12px; font-weight:700; }
.user-logout, .admin-open-btn, .admin-close { border:1px solid var(--border); background:var(--panel-2); color:var(--text); border-radius:10px; cursor:pointer; font-size:12px; font-weight:800; }
.user-logout { padding:7px 9px; flex-shrink:0; }
.admin-open-btn { margin-top:8px; width:100%; height:34px; }
.user-logout:hover, .admin-open-btn:hover, .admin-close:hover { border-color:var(--border-strong); color:#fff; }
.admin-card { width:min(720px,100%); max-height:min(720px,90vh); }
.admin-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.admin-close { width:34px; height:34px; display:grid; place-items:center; font-size:20px; }
.admin-grant { display:grid; grid-template-columns:1fr 130px 110px; gap:8px; }
.admin-users { overflow:auto; display:flex; flex-direction:column; gap:8px; padding-right:2px; }
.admin-user-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 12px; border:1px solid var(--border); border-radius:13px; background:#101012; }
.admin-user-row strong { color:#fff; font-size:13px; }
.admin-user-row span, .admin-user-meta small { display:block; color:var(--muted); font-size:11px; font-weight:700; margin-top:3px; }
.admin-user-meta { text-align:right; flex-shrink:0; }
.admin-user-meta b { color:#fff; font-size:15px; }
.admin-empty { color:var(--muted); font-size:13px; font-weight:700; padding:12px; text-align:center; }
@media (max-width:560px) { .admin-grant { grid-template-columns:1fr; } }

@media (max-width:1024px) {
  .chat-surface.has-side-panel { grid-template-columns:288px 1fr; }
  .side-panel { position:fixed; right:0; top:0; bottom:0; width:60%; z-index:100; box-shadow:-10px 0 30px rgba(0,0,0,0.5); }
}

@media (max-width:640px) {
  body { overflow:hidden; }
  .app-shell { height:100dvh; min-height:100dvh; overflow:hidden; }
  .chat-surface { height:100dvh; min-height:100dvh; grid-template-columns:1fr; }
  .chat-main { height:100dvh; grid-template-rows:auto minmax(0,1fr) auto; }
  .model-topbar { padding:8px 10px 0; }
  .mobile-history-btn, .mobile-new-chat-btn {
    display:inline-grid; place-items:center; width:34px; height:34px; flex:0 0 auto;
    border-radius:12px; background:var(--panel-2); border:1px solid var(--border);
    color:#fff; cursor:pointer;
  }
  .mobile-history-btn:active, .mobile-new-chat-btn:active { transform:scale(.97); }
  .model-topbar { gap:7px; }
  .model-picker-wrap { min-width:0; }
  .model-pick-btn { height:34px; max-width:calc(100vw - 20px); padding:0 12px; font-size:12px; }
  .model-dropdown { width:min(260px, calc(100vw - 20px)); }
  .conversation { min-height:0; }
  .conversation-empty { padding:34px 14px 112px; align-items:start; }
  .welcome-lockup { padding-top:34px; }
  .welcome-sub { font-size:13px; max-width:300px; margin-top:12px; }
  .welcome-suggestions { gap:7px; margin-top:20px; max-width:320px; }
  .suggest-chip { max-width:100%; height:auto; min-height:34px; padding:8px 10px; font-size:12px; }
  .conversation-active { width:calc(100% - 16px); padding:18px 0 18px; }
  .message { margin-bottom:18px; }
  .message-meta { padding:0 4px; font-size:11px; }
  .message-bubble { max-width:94%; border-radius:14px; padding:11px 13px; font-size:14px; }
  .message-user .message-bubble { max-width:84%; }
  .bubble-image { max-width:min(78vw,260px); max-height:220px; }
  .media-result-bubble .gen-result-img,
  .media-result-bubble .gen-result-video { max-width:calc(100vw - 28px); max-height:58vh; border-radius:14px; }
  .media-gen-animation-card.ratio-16-9 { width:calc(100vw - 28px); }
  .media-gen-animation-card.ratio-9-16 { width:min(62vw,230px); }
  .media-gen-animation-card.ratio-1-1 { width:min(82vw,320px); }
  .media-gen-animation-card.ratio-4-3 { width:min(86vw,340px); }
  .composer { width:calc(100% - 12px); margin:0 auto max(8px, env(safe-area-inset-bottom)); }
  .composer-input-wrap {
    min-height:62px; border-radius:20px; padding:7px;
    grid-template-columns:auto auto minmax(0,1fr) auto auto auto;
    gap:6px;
  }
  textarea { min-height:24px; max-height:96px; padding:6px 5px; font-size:15px; }
  .round-tool-button { width:36px; height:36px; border-radius:12px; }
  .send-button { width:38px; height:38px; border-radius:13px; }
  .voice-call-button { width:34px; height:34px; }
  .mode-pick-btn { height:32px; padding:0 10px; font-size:12px; max-width:110px; }
  .credit-cost-hint { height:26px; padding:0 9px; font-size:11px; }
  #activeBadgeContainer { max-width:100%; overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none; }
  .active-badge { max-width:calc(100vw - 120px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .attach-menu { left:0; width:min(252px, calc(100vw - 18px)); bottom:calc(100% + 10px); border-radius:18px; }
  .attach-submenu { left:0; bottom:calc(100% + 6px); width:100%; }
  .page-view-header { padding:14px; gap:10px; }
  .page-view-header h2 { font-size:20px; }
  .page-view-content { padding:12px; }
  .gallery-grid, .page-gallery-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
  .side-panel { width:100% !important; left:0; right:0; }
  .side-panel-content { padding:12px; }
  .auth-card, .admin-card { width:calc(100vw - 24px); border-radius:18px; padding:16px; }
  .admin-card { max-height:88dvh; }
  .admin-user-row { align-items:flex-start; }
}