*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #0a0a0a;
  --bg-card: #111111;
  --bg-hover: #161616;
  --bg-input: #0d0d0d;
  --border: #3d3d3d;
  --text: #f0f0f0;
  --text-muted: #c0c0c0;
  --text-dim: #666666;
  --white: #ffffff;
  --black: #000000;
  --red: #e05555;
  --font: 'Inter', system-ui, -apple-system, sans-serif;
  --mono: 'Fira Code', ui-monospace, monospace;
  --radius: 8px;
  --sidebar-w: 240px;
  /* Custom accent — only active when html.custom-accent is set */
  --accent: #ffffff;
  --accent-contrast: #000000;
  /* Semantic status colors */
  --color-success: #22c55e;
  --color-danger:  #ef4444;
  --color-warn:    #f59e0b;
}


/* ── CUSTOM ACCENT — selective elements only ───────────────────────────────── */
/* Chat input icons (color only, no borders) */
html.custom-accent #send-btn:not(.stop) { color: var(--accent); }
html.custom-accent .input-inner-row #attach-btn { color: var(--accent); }
html.custom-accent #tools-btn { color: var(--accent); }
html.custom-accent .input-inner-row #mic-btn { color: var(--accent); }
html.custom-accent #web-search-btn { color: var(--accent); }
html.custom-accent #info-btn { color: var(--accent); }
/* Chat box outer border (unified-input, not inner textarea) */
html.custom-accent .unified-input { border-color: color-mix(in srgb, var(--accent) 60%, var(--bg-input)); }
html.custom-accent .unified-input:focus-within { border-color: var(--accent); }
/* User message bubble */
html.custom-accent .msg-row.user .msg { background: var(--accent); color: var(--accent-contrast); }
/* Topbar: AM button border + right icons color */
html.custom-accent #sidebar-toggle { border-color: var(--accent); }
html.custom-accent #export-btn { color: var(--accent); }
/* Empty state text: accent rim (stroke behind fill, doesn't affect color) */
html.custom-accent .empty-logo { -webkit-text-stroke: 10px var(--accent); paint-order: stroke fill; }
html.custom-accent .empty-sub { -webkit-text-stroke: 1.5px var(--accent); paint-order: stroke fill; }
/* Active conversation left bar */
html.custom-accent .conv-item.active { border-left-color: var(--accent); }

/* ── System Prompt (Advanced settings) ────────────────────────────────────── */
.sysprompt-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 0.75rem; }
.sysprompt-row-info { display: flex; flex-direction: column; gap: 0.2rem; }
.sysprompt-title { font-size: 0.875rem; color: var(--text); font-weight: 500; }
.sysprompt-desc  { font-size: 0.75rem; color: var(--text-dim); line-height: 1.4; }
.sysprompt-area  { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 0.75rem; overflow: hidden; transition: max-height 0.2s ease, opacity 0.2s ease; max-height: 300px; opacity: 1; }
.sysprompt-area.hidden { max-height: 0; opacity: 0; margin-bottom: 0; pointer-events: none; }
.sysprompt-area textarea { width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-size: 0.82rem; padding: 0.6rem 0.75rem; resize: vertical; min-height: 100px; font-family: var(--mono); line-height: 1.5; outline: none; box-sizing: border-box; }
.sysprompt-area textarea:focus { border-color: var(--accent); }
.sysprompt-counter { font-size: 0.7rem; color: var(--text-dim); text-align: right; font-family: var(--mono); }


/* ── COMPACT VIEW (html.compact) ────────────────────────────────────────── */
html.compact .msg-row { padding: 0.2rem 1rem; max-width: 920px; width: 100%; margin-left: auto; margin-right: auto; }
html.compact .msg { padding: 0.65rem 1rem; font-size: 0.94rem; line-height: 1.55; }
html.compact #messages { padding: 1rem 0 0.5rem; }
html.compact .think-bubble { padding: 0.4rem 0.7rem; font-size: 0.78rem; }


/* ══════════════════════════════════════════════════════════════════════════
   LIGHT THEME  (html.light class added by JS)
   ══════════════════════════════════════════════════════════════════════════ */
html.light {
  --bg:         #ffffff;
  --bg-card:    #f3f3f3;
  --bg-hover:   #eaeaea;
  --bg-input:   #f8f8f8;
  --border:     #dedede;
  --text:       #1a1a1a;
  --text-muted: #5a5a5a;
  --text-dim:   #9a9a9a;
  --white:      #111111;   /* "primary emphasis" → dark in light mode */
  --black:      #f0f0f0;   /* "contrast"         → near-white in light mode */
}

/* ── Code blocks ─────────────────────────────────────────────────────────── */
html.light .msg-row.assistant .msg code {
  background: #e4e4e4; color: #1a1a1a;
}
html.light .msg-row.assistant .msg pre {
  background: #ebebeb; border-color: #d8d8d8;
}
html.light .msg-row.assistant .msg pre code {
  background: none; color: #1a1a1a;
}
html.light .code-copy-btn {
  border-color: #bbb; color: #555;
}
html.light .msg-row.assistant .msg pre .code-lang-label {
  border-bottom-color: #d4d4d4; color: #777;
}

/* ── Think / reasoning block ─────────────────────────────────────────────── */
html.light .think-block { border-left-color: #aaaacc; background: #f0f0f8; }
html.light .think-bubble { background: #f0f0f8; color: #3a3a6a; }
html.light .think-label   { color: #7070aa; }

/* ── Inline text ─────────────────────────────────────────────────────────── */
html.light .msg-row.assistant .msg em { color: #444; }
html.light .msg-row.assistant .msg strong { color: #111; }
html.light .msg-row.assistant .msg h1,
html.light .msg-row.assistant .msg h2,
html.light .msg-row.assistant .msg h3 { color: #111; }
html.light .msg-row.assistant .msg blockquote {
  border-left-color: #bbb; color: #555;
}

/* ── Table ───────────────────────────────────────────────────────────────── */
html.light .msg-row.assistant .msg table { border-color: #d8d8d8; }
html.light .msg-row.assistant .msg th { background: #e4e4e4; color: #111; }
html.light .msg-row.assistant .msg td { border-color: #d8d8d8; }
html.light .msg-row.assistant .msg tr:nth-child(even) td { background: #ebebeb; }

/* ── Toggle ──────────────────────────────────────────────────────────────── */
html.light .toggle-track { background: #c8c8c8; }
html.light .toggle-switch input:checked + .toggle-track { background: #5b9cf6; }

/* ── Inputs & focus ──────────────────────────────────────────────────────── */
html.light input[type="email"],
html.light input[type="password"],
html.light input[type="text"],
html.light textarea {
  background: var(--bg-input); border-color: var(--border); color: var(--text);
}
html.light input:focus,
html.light #chat-input:focus { border-color: transparent; box-shadow: none; }

/* ── Progress bars ───────────────────────────────────────────────────────── */
html.light .ip-bar-track,
html.light .usage-bar-track { background: #e0e0e0; }

/* ── Row dividers ────────────────────────────────────────────────────────── */
html.light .cookie-row { border-bottom-color: #e4e4e4; }
html.light .usage-conv-row { border-bottom-color: #e4e4e4; }
html.light .ip-row + .ip-row { border-top-color: #e4e4e4; }
html.light .usage-conv-date { color: #aaa; }

/* ── Sidebar nav dashes ──────────────────────────────────────────────────── */
html.light .nav-dash { background: #bbb; }
html.light .nav-item:hover .nav-dash { background: #333; width: 60px; }

/* ── File attach preview ─────────────────────────────────────────────────── */
html.light #attach-preview-row { background: #eef2ff; border-color: #c8d4f0; }
html.light #attach-remove { color: #4477cc; }
html.light #attach-btn.has-file { border-color: #c8d4f0; color: #4477cc; }

/* ── Web search / img mode active ───────────────────────────────────────── */
html.light #web-search-btn.active,
html.light #img-mode-btn.active {
  border-color: #c8d4f0; color: #4477cc; background: rgba(100,140,220,0.10);
}
html.light #web-search-btn.active .ws-badge { color: #4477cc; }

/* ── Model dropdown ──────────────────────────────────────────────────────── */
html.light #model-dropdown { background: var(--bg-card); border-color: var(--border); }
html.light .model-option:hover { background: var(--bg-hover); }

/* ── Command palette ─────────────────────────────────────────────────────── */
html.light .cmd-palette { background: var(--bg-card); border-color: var(--border); }
html.light .cmd-item:hover,
html.light .cmd-item.active { background: var(--bg-hover); }

/* ── Scrollbars ──────────────────────────────────────────────────────────── */
html.light ::-webkit-scrollbar-track { background: transparent; }
html.light ::-webkit-scrollbar-thumb { background: #ccc; }
html.light ::-webkit-scrollbar-thumb:hover { background: #aaa; }

/* ── Settings modal ──────────────────────────────────────────────────────── */
html.light .settings-box { background: var(--bg); border-color: var(--border); }
html.light .settings-nav { border-right-color: var(--border); }
html.light .settings-nav-item:hover { background: var(--bg-hover); }
html.light .settings-nav-item.active { background: var(--bg-hover); }
html.light .spage-divider { border-top-color: var(--border); }

/* ── Auth card ───────────────────────────────────────────────────────────── */
html.light .auth-card { background: var(--bg); }
html.light .tab:hover:not(.active) { color: #555; }

/* ── Gen status / system messages ───────────────────────────────────────── */
html.light .msg-row.system .msg { color: #777; }

/* ── Empty state ─────────────────────────────────────────────────────────── */
html.light .empty-logo { color: var(--white); }
html.light .empty-sub   { color: var(--text-muted); }

html, body { height: 100%; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }

.view { height: 100%; }
.hidden { display: none !important; }

/* ── AUTH ─────────────────────────────────────── */
#auth-view { display: flex; align-items: center; justify-content: center; min-height: 100%; padding: 2rem; }

.auth-card { width: 100%; max-width: 360px; }

.auth-logo { font-size: 1.5rem; font-weight: 900; letter-spacing: -0.03em; color: var(--white); margin-bottom: 0.35rem; }

.auth-sub { font-size: 0.82rem; color: var(--text-muted); margin-bottom: 2rem; font-family: var(--mono); }

.tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 1.75rem; }

.tab { background: none; border: none; color: var(--text-muted); font-family: var(--font); font-size: 0.9rem; font-weight: 500; padding: 0.55rem 0; margin-right: 1.5rem; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color 0.15s, border-color 0.15s; }
.tab.active { color: var(--white); border-bottom-color: var(--white); }
.tab:hover:not(.active) { color: #aaa; }

.field { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; }
.field label { font-size: 0.8rem; font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }

input[type="email"], input[type="password"], input[type="text"] {
  background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text); padding: 0.65rem 0.8rem; font-family: var(--font); font-size: 1rem;
  width: 100%; outline: none; transition: border-color 0.15s;
}
input:focus { border-color: #444; }
input::placeholder { color: var(--text-dim); }

#auth-submit { width: 100%; margin-top: 0.5rem; background: var(--white); color: var(--black); border: none; border-radius: var(--radius); padding: 0.7rem; font-family: var(--font); font-size: 1rem; font-weight: 700; cursor: pointer; transition: opacity 0.15s; }
#auth-submit:hover { opacity: 0.88; }

.error { color: var(--red); font-size: 0.82rem; font-family: var(--mono); min-height: 1.2rem; margin-top: 0.75rem; text-align: center; }
#auth-error:empty { min-height: 0; margin-top: 0; }

.verify-notice { margin-top: 1rem; text-align: center; }
.verify-notice-text { font-size: 0.82rem; color: var(--text-muted); line-height: 1.55; margin-bottom: 0.9rem; }
.verify-notice-text strong { color: var(--white); font-weight: 600; }
.verify-notice-msg { font-size: 0.76rem; color: var(--text-dim); font-family: var(--mono); margin-top: 0.6rem; min-height: 1rem; }

.admin-mode-link { display: none; width: 100%; margin-top: 0.75rem; background: none; border: none; color: var(--text-dim, #55565c); font-family: var(--mono); font-size: 0.72rem; cursor: pointer; text-align: center; padding: 0.4rem; transition: color 0.15s; } .admin-mode-link:hover { color: var(--text-muted); }

.auth-hint { font-size: 0.76rem; color: var(--text-dim); font-family: var(--mono); text-align: center; margin: -1rem 0 0.75rem; }
.auth-divider { display: flex; align-items: center; gap: 0.75rem; margin: 0.5rem 0; color: var(--text-dim); font-size: 0.75rem; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,0.1); }
.btn-google { display: flex; align-items: center; justify-content: center; gap: 0.6rem; width: 100%; padding: 0.7rem 1rem; background: #fff; color: #3c4043; border: 1.5px solid #dadce0; border-radius: var(--radius); font-family: var(--font); font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: background 0.15s, box-shadow 0.15s; letter-spacing: 0.01em; }
.btn-google:hover { background: #f1f3f4; box-shadow: 0 1px 6px rgba(0,0,0,0.18); }
.btn-google svg { flex-shrink: 0; }

/* ── CHAT LAYOUT ──────────────────────────────── */
#chat-view { display: flex; height: 100%; position: relative; }

#sidebar-resize-handle {
  position: absolute; top: 0; bottom: 0;
  left: var(--sidebar-w);
  width: 7px; margin-left: -3.5px;
  cursor: col-resize; z-index: 20;
}
#sidebar-resize-handle::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 3px; width: 1px;
  background: transparent; transition: background 0.15s;
}
#sidebar-resize-handle:hover::after, #sidebar-resize-handle.dragging::after { background: var(--text-dim); }
#sidebar.collapsed + #sidebar-resize-handle { display: none; }
body.sidebar-resizing { cursor: col-resize; user-select: none; }
body.sidebar-resizing #sidebar { transition: none; }

/* ── SIDEBAR ──────────────────────────────────── */
#sidebar {
  width: var(--sidebar-w); flex-shrink: 0;
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  height: 100%; overflow: hidden;
  transition: width 0.22s ease, border-color 0.22s ease;
}
#sidebar.collapsed { width: 0; border-right-color: transparent; }

.sidebar-top { padding: 0.35rem 1.75rem 1.1rem 2.25rem; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 0.75rem; }

.logo-small { font-size: 1.9rem; font-weight: 900; letter-spacing: -0.02em; color: var(--white); }

#new-chat-btn {
  background: none; border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text-muted); font-family: var(--font); font-size: 0.82rem;
  padding: 0.45rem 0.75rem; cursor: pointer; text-align: left;
  transition: border-color 0.15s, color 0.15s;
}
#new-chat-btn:hover { border-color: #444; color: var(--text); }

#conv-list { flex: 1; overflow-y: auto; padding: 0.5rem 0; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
#conv-list::-webkit-scrollbar { width: 3px; }
#conv-list::-webkit-scrollbar-thumb { background: var(--border); }

.conv-item {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.75rem 1.75rem 0.75rem 2.25rem; cursor: pointer;
  border-left: 2px solid transparent;
  transition: background 0.1s;
  position: relative;
}
.conv-item:hover { background: var(--bg-hover); }
.conv-item.active { background: var(--bg-hover); border-left-color: var(--white); }

.conv-title {
  flex: 1; font-size: 0.857rem; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  user-select: none;
}
.conv-item.active .conv-title { color: var(--text); }

.conv-actions { display: none; gap: 4px; flex-shrink: 0; }
.conv-item:hover .conv-actions,
.conv-item.active .conv-actions { display: flex; }

.conv-btn {
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  font-size: 0.75rem; font-family: var(--mono); padding: 2px 5px;
  border-radius: 4px; transition: background 0.1s, color 0.1s;
  display: inline-flex; align-items: center; justify-content: center;
}
.conv-btn:hover { background: var(--border); color: var(--text); }
.conv-btn.del:hover { color: var(--red); }

.sidebar-footer { padding: 1.1rem 1.5rem 1.1rem 2.4rem; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 0.6rem; }
.user-email { font-size: 0.78rem; color: var(--text-muted); font-family: var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-footer-row { display: flex; align-items: center; justify-content: space-between; gap: 0.35rem; flex-wrap: wrap; }
#settings-btn { display: flex; align-items: center; gap: 0.6rem; width: 100%; background: none; border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-muted); font-family: var(--font); font-size: 0.82rem; padding: 0.6rem 0.9rem; cursor: pointer; transition: border-color 0.15s, color 0.15s; }
#settings-btn:hover { border-color: #555; color: var(--white); }

.quota-badge { font-family: var(--mono); font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); background: var(--bg-card); border: 1px solid var(--border); border-radius: 4px; padding: 0.3rem 0.5rem; white-space: nowrap; }

#logout-btn { background: none; border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-muted); font-family: var(--font); font-size: 0.78rem; padding: 0.4rem 0.65rem; cursor: pointer; transition: border-color 0.15s, color 0.15s; white-space: nowrap; }
#logout-btn:hover { border-color: #444; color: var(--text); }

/* ── MAIN PANEL ───────────────────────────────── */
#main { flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; }

/* Keep the controls, but remove the topbar's visual overlay and all blur layers. */
/* Controls float above messages without reserving or intercepting a full-width topbar layer. */
/* Keep only the two control groups; this row has no background, blur, layout height, or empty hitbox. */
.main-topbar { display: flex; align-items: center; padding: 0.5rem 1rem; position: absolute; inset: 0 0 auto 0; z-index: 20; pointer-events: none; background: transparent; }
.main-topbar > * { pointer-events: auto; }

#sidebar-toggle { background: none; border: 1px solid var(--border); border-radius: 6px; color: var(--text-muted); padding: 0.3rem 0.45rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color 0.15s, color 0.15s; position: relative; width: 32px; height: 30px; }
#sidebar-toggle:hover { border-color: #555; color: var(--white); }
.toggle-am-label { font-size: 0.78rem; font-weight: 900; letter-spacing: -0.02em; color: var(--white); line-height: 1; position: absolute; transition: opacity 0.15s; opacity: 1; }
.toggle-icon { position: absolute; transition: opacity 0.15s; opacity: 0; }
#sidebar-toggle:hover .toggle-am-label { opacity: 0; }
html.light .toggle-am-label { color: #0a0a0a; }
#sidebar-toggle:hover .toggle-icon { opacity: 1; }
#sidebar-toggle.empty-chat { color: var(--white); }
#sidebar-toggle.empty-chat .toggle-am-label { opacity: 0; }
#sidebar-toggle.empty-chat .toggle-icon { opacity: 1; }
html.light #sidebar-toggle:hover { border-color: #bbb; }

#messages { flex: 1; overflow-y: auto; padding: 2rem 0 1rem; display: flex; flex-direction: column; gap: 0; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
#messages::-webkit-scrollbar { width: 4px; }
#messages::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.empty-state { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; gap: 0.75rem; transform: translateY(-10px); }
.empty-logo { font-size: 12.5rem; font-weight: 900; letter-spacing: -0.05em; color: var(--white); }
.empty-sub { font-size: 1.4rem; color: var(--text-muted); font-family: "Courier New", Courier, monospace; min-height: 1.4em; }

.msg-row { display: flex; padding: 0.4rem 1rem; max-width: 920px; width: 100%; margin-left: auto; margin-right: auto; }
.msg-row.user { flex-direction: column; align-items: flex-end; }
.msg-row.assistant { flex-direction: column; align-items: flex-start; max-width: 920px; padding-left: 0.25rem; padding-right: 0.25rem; }
.msg-row.system { justify-content: center; }

.msg { max-width: 72%; padding: 0.7rem 1rem; border-radius: 10px; font-size: 1.07rem; line-height: 1.6; overflow-wrap: break-word; word-break: break-word; }

.msg-row.user .msg { background: var(--white); color: var(--black); font-weight: 500; border-radius: 10px 10px 2px 10px; }

.msg-row.assistant .msg { background: none; border: none; color: var(--text); border-radius: 0; max-width: 100%; padding: 0.2rem 0; }

.msg-row.system .msg { background: none; border: none; color: var(--text-muted); font-family: var(--mono); font-size: 0.75rem; }
.msg-row.system .msg .icon-inline { display: inline-flex; align-items: center; vertical-align: -1px; margin-right: 1px; }
.ctx-compress-text { background: linear-gradient(90deg, var(--text-muted) 0%, var(--text-muted) 40%, var(--white) 50%, var(--text-muted) 60%, var(--text-muted) 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: ctx-compress-sweep 1.6s linear infinite; }
@keyframes ctx-compress-sweep { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ── MARKDOWN ─────────────────────────────────── */
.msg-row.assistant .msg h1,
.msg-row.assistant .msg h2,
.msg-row.assistant .msg h3 { font-weight: 700; margin: 0.9rem 0 0.4rem; color: var(--white); letter-spacing: -0.01em; }
.msg-row.assistant .msg h1 { font-size: 1.2rem; }
.msg-row.assistant .msg h2 { font-size: 1.05rem; }
.msg-row.assistant .msg h3 { font-size: 0.95rem; }

.msg-row.assistant .msg p { margin: 0.4rem 0; }
.msg-row.assistant .msg p:first-child { margin-top: 0; }
.msg-row.assistant .msg p:last-child { margin-bottom: 0; }

.msg-row.assistant .msg ul,
.msg-row.assistant .msg ol { padding-left: 1.4rem; margin: 0.4rem 0; }
.msg-row.assistant .msg li { margin: 0.2rem 0; }

.msg-row.assistant .msg code {
  font-family: var(--mono); font-size: 0.85em;
  background: #0a0a0a; border: 1px solid var(--border);
  border-radius: 4px; padding: 0.1em 0.35em; color: #e0e0e0;
  overflow-wrap: break-word; word-break: break-word;
}

.msg-row.assistant .msg pre {
  background: #080808; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1rem; margin: 0.6rem 0;
  overflow-x: auto; position: relative;
}
.msg-row.assistant .msg pre code {
  background: none; border: none; padding: 0; font-size: 0.95rem;
  color: #ccc; line-height: 1.6;
  overflow-wrap: normal; word-break: normal; white-space: pre;
}

.code-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 0.6rem; padding-bottom: 0.5rem;
  border-bottom: 1px solid #3d3d3d;
}
.code-lang {
  font-family: var(--mono); font-size: 0.78rem; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text-muted);
}
.code-btns { display: flex; gap: 0.35rem; }
.code-copy-btn, .code-dl-btn {
  background: none; border: 1px solid #2a2a2a; border-radius: 4px;
  color: var(--text-dim); cursor: pointer; font-family: var(--mono);
  font-size: 0.78rem; padding: 0.18rem 0.55rem;
  transition: color 0.15s, border-color 0.15s;
  display: inline-flex; align-items: center; justify-content: center;
}
.code-copy-btn:hover, .code-dl-btn:hover { color: var(--white); border-color: #555; }
.code-copy-btn.copied { color: #7ecba1; border-color: #7ecba1; }

.msg-row.assistant .msg strong { font-weight: 700; color: var(--white); }
.msg-row.assistant .msg em { font-style: italic; color: #ccc; }

.msg-row.assistant .msg table { border-collapse: collapse; width: 100%; margin: 0.65rem 0; font-size: 0.85rem; }
.msg-row.assistant .msg th { background: #0d0d0d; color: var(--white); font-family: var(--mono); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.45rem 0.75rem; border: 1px solid var(--border); text-align: left; }
.msg-row.assistant .msg td { padding: 0.4rem 0.75rem; border: 1px solid var(--border); color: var(--text-muted); line-height: 1.5; }
.msg-row.assistant .msg tr:nth-child(even) td { background: #0d0d0d; }

/* ── THINKING DOTS ────────────────────────────── */
.thinking-dots { display: inline-flex; gap: 10px; align-items: center; height: 1.2em; }
.gen-status { font-family: var(--mono); font-size: 0.87rem; color: rgba(255,255,255,0.82); }
.gen-status .gen-thinking-sweep,
.think-anim .gen-thinking-sweep,
.think-waiting .gen-thinking-sweep {
  display: inline-block;
  position: relative;
  color: rgba(255,255,255,0.78);
  isolation: isolate;
}
.gen-status .gen-thinking-sweep::after,
.think-anim .gen-thinking-sweep::after,
.think-waiting .gen-thinking-sweep::after {
  content: attr(data-sweep);
  position: absolute;
  inset: 0;
  color: rgba(255,255,255,1.0);
  clip-path: inset(0 100% 0 0);
  will-change: clip-path;
  animation: thinking-sweep 1.45s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes thinking-sweep {
  0%, 8% { clip-path: inset(0 100% 0 0); }
  28% { clip-path: inset(0 72% 0 0); }
  55% { clip-path: inset(0 31% 0 42%); }
  80% { clip-path: inset(0 0 0 73%); }
  100% { clip-path: inset(0 0 0 100%); }
}
.thinking-dots span { width: 5px; height: 5px; background: var(--text-muted); border-radius: 50%; animation: dot-pulse 1.4s ease-in-out infinite; }
.thinking-dots span:nth-child(2) { animation-delay: 0.2s; }
.thinking-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes dot-pulse { 0%, 80%, 100% { opacity: 0.2; transform: scale(0.85); } 40% { opacity: 1; transform: scale(1); } }

/* ── INFO PANEL ───────────────────────────────── */
.info-panel {
  flex-shrink: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  padding: 0.85rem 1rem 0.7rem;
  margin: 0 auto;
  max-width: 800px;
  width: 100%;
}

.ip-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 0.55rem; }
.ip-title { font-family: var(--mono); font-size: 0.72rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.ip-summary { font-family: var(--mono); font-size: 0.72rem; color: var(--text-muted); }

.ip-bar-track { height: 3px; background: #1e1e1e; border-radius: 2px; margin-bottom: 0.65rem; overflow: hidden; }
.ip-bar-fill { height: 100%; background: #5b9cf6; border-radius: 2px; transition: width 0.4s ease; width: 0%; }

.ip-rows { display: flex; flex-direction: column; gap: 0; }

.ip-row {
  display: grid;
  grid-template-columns: 10px 1fr auto auto;
  align-items: center;
  gap: 0 0.6rem;
  padding: 0.28rem 0;
}
.ip-row + .ip-row { border-top: 1px solid #181818; }
.ip-row-dim .ip-label, .ip-row-dim .ip-val { color: var(--text-dim); }

.ip-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }

.ip-label { font-family: var(--mono); font-size: 0.76rem; color: var(--text-muted); white-space: nowrap; }

.ip-val { font-family: var(--mono); font-size: 0.76rem; color: var(--white); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; }
.ip-mono { font-size: 0.68rem; color: var(--text-dim); }

.ip-pct { font-family: var(--mono); font-size: 0.72rem; color: var(--text-dim); text-align: right; white-space: nowrap; min-width: 38px; }

/* ── INPUT BAR ────────────────────────────────── */
.input-bar {
  position: relative;
  padding: 13px 2rem 1rem;
  flex-shrink: 0;
}
#chat-form { display: flex; flex-direction: column; gap: 0.6rem; max-width: 920px; margin: 0 auto; position: relative; }

#chat-input { width: 100%; }

.input-bottom-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.input-left { display: flex; align-items: center; gap: 0.4rem; }
.input-right { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }

#info-btn { background: none; border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-muted); padding: 0.5rem 0.55rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color 0.15s, color 0.15s; flex-shrink: 0; }
#info-btn:hover, #info-btn.active { border-color: #555; color: var(--white); }

.model-selector { position: relative; }
.model-btn { display: flex; align-items: center; gap: 0.4rem; background: none; border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-muted); padding: 0.45rem 0.7rem; cursor: pointer; font-family: var(--mono); font-size: 0.75rem; white-space: nowrap; transition: border-color 0.15s, color 0.15s; max-width: 260px; }
.model-btn:hover { border-color: #555; color: var(--white); }
.model-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.model-dropdown::-webkit-scrollbar { width: 0; }
.model-list::-webkit-scrollbar { width: 4px; }
.model-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; }
.model-list::-webkit-scrollbar-track { background: transparent; }
html.light .model-list::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); }
.model-dropdown { position: absolute; bottom: calc(100% + 6px); left: 0; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; min-width: 300px; z-index: 50; overflow: hidden; max-height: 70vh; display: flex; flex-direction: column; box-shadow: 0 -8px 28px rgba(0,0,0,0.5); }
/* Search bar */
.model-search-wrap { padding: 0.55rem 0.55rem 0.4rem; flex-shrink: 0; }
.model-search { width: 100%; background: var(--bg-hover); border: 1px solid var(--border); border-radius: 8px; color: var(--text); padding: 0.38rem 0.65rem; font-size: 0.8rem; outline: none; box-sizing: border-box; }
.model-search::placeholder { color: var(--text-dim); }
.model-search:focus { border-color: #555; }
/* Category tabs */
.model-tabs { display: flex; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--border); flex-shrink: 0; padding: 0 0.45rem; }
.model-tabs::-webkit-scrollbar { display: none; }
.model-tab { flex-shrink: 0; padding: 0.35rem 0.65rem; font-size: 0.72rem; cursor: pointer; color: var(--text-dim); border-bottom: 2px solid transparent; white-space: nowrap; transition: color 0.15s, border-color 0.15s; }
.model-tab.active { color: var(--white); border-bottom-color: var(--white); }
.model-tab:hover:not(.active) { color: var(--text-muted); }
/* Model list scroll area */
.model-list { overflow-y: auto; flex: 1; }
/* Model item */
.model-option { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.75rem; cursor: pointer; transition: background 0.1s; }
.model-option:hover { background: var(--bg-hover); }
.model-option.selected { background: var(--bg-hover); }
.model-option.unverified { opacity: 0.45; cursor: not-allowed; }
.model-option.unverified:hover { background: transparent; }
.model-option.locked { opacity: 0.5; cursor: pointer; }
.model-option.locked:hover { background: rgba(99,102,241,0.08); }
/* Provider icon circle */
.model-icon { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 700; flex-shrink: 0; color: white; letter-spacing: 0; }
.model-icon-img { background: #1a1a2e !important; }
html.light .model-icon-img { background: #e8eaf6 !important; }

.model-option-name { flex: 1; font-size: 0.82rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.model-option.selected .model-option-name { color: var(--white); }
/* Badges */
.model-badges { display: flex; gap: 0.3rem; flex-shrink: 0; align-items: center; }
.model-badge { font-size: 0.62rem; padding: 0.2rem 0.6rem; border-radius: 100px; white-space: nowrap; font-weight: 700; flex-shrink: 0; overflow: visible; box-sizing: border-box; }
.model-badge-unlimited { background: #134e4a; color: #2dd4bf; border: 1.5px solid #14b8a6; }
.model-badge-vision { background: #4a1d96; color: #e9d5ff; border: 1.5px solid #a855f7; }
.model-badge-image { background: #1a3a2a; color: #4ade80; border: 1.5px solid #22c55e; }
.model-badge-unavailable { background: transparent; color: #64748b; border: 1.5px solid #475569; font-style: italic; }
.model-badge-tier { background: #422006; color: #fde047; border: 1.5px solid #eab308; font-family: var(--mono); font-size: 0.6rem; }
.model-badge-plan-lock-pro  { background: #1a1040; color: #a5b4fc; border: 1.5px solid #4f46e5; letter-spacing: 0.04em; }
.model-badge-plan-lock-max  { background: #221400; color: #fcd34d; border: 1.5px solid #b45309; letter-spacing: 0.04em; }
/* Light theme */
html.light .model-search { background: #f0f0f0; }
html.light .model-search:focus { border-color: #aaa; }
html.light .model-option-name { color: var(--text); }
html.light .model-badge-unlimited { background: #99f6e4; color: #134e4a; border-color: #0d9488; }
html.light .model-badge-vision { background: #ede9fe; color: #4c1d95; border-color: #7c3aed; }
html.light .model-badge-image { background: #dcfce7; color: #14532d; border-color: #16a34a; }
html.light .model-badge-unavailable { background: transparent; color: #94a3b8; border-color: #cbd5e1; }
html.light .model-badge-tier { background: #fef9c3; color: #713f12; border-color: #ca8a04; }
html.light .model-badge-plan-lock-pro { background: #eef2ff; color: #312e81; border-color: #4f46e5; letter-spacing: 0.04em; }
html.light .model-badge-plan-lock-max { background: #fffbeb; color: #78350f; border-color: #b45309; letter-spacing: 0.04em; }

/* ── ATTACH CHIP ──────────────────────────────── */
.attach-chip {
  display: flex; align-items: center; gap: 0.45rem;
  background: #161a20; border: 1px solid #2a3a55;
  border-radius: 6px; padding: 0.3rem 0.55rem;
  font-family: var(--mono); font-size: 0.75rem; color: #7ab3f5;
  max-width: 100%; align-self: flex-start;
}
.attach-chip svg { flex-shrink: 0; opacity: 0.7; }
#attach-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
#attach-remove { background: none; border: none; color: #7ab3f5; cursor: pointer; padding: 0 0 0 0.2rem; font-size: 0.75rem; opacity: 0.6; transition: opacity 0.15s; display: inline-flex; align-items: center; justify-content: center; }
#attach-remove:hover { opacity: 1; }

#attach-btn { background: none; border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-muted); padding: 0.5rem 0.55rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color 0.15s, color 0.15s; flex-shrink: 0; }
#attach-btn:hover { border-color: #555; color: var(--white); }
#attach-btn.has-file { border-color: #2a3a55; color: #7ab3f5; }

#chat-input { width: 100%; background: transparent; border: none; border-radius: 15px 15px 0 0; color: var(--text); padding: 0.55rem 1rem 0.3rem; font-family: var(--font); font-size: 1rem; resize: none; outline: none; min-height: 50px; max-height: 200px; overflow-y: auto; line-height: 1.6; scrollbar-width: none; }
#chat-input::-webkit-scrollbar { display: none; }
.unified-input:focus-within { border-color: color-mix(in srgb, var(--white) 40%, var(--bg-input)); }
#chat-input::placeholder { color: var(--text-muted); }

#mic-btn { background: none; border: 1px solid var(--border); border-radius: var(--radius); color: #ffffff; padding: 0.65rem 0.75rem; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: border-color 0.15s, color 0.15s, background 0.15s; }
#mic-btn:hover { border-color: #555; color: var(--white); }
#mic-btn.recording { border-color: var(--red); color: var(--red); background: rgba(224,85,85,0.1); animation: mic-pulse 1.4s ease-in-out infinite; }
@keyframes mic-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(224,85,85,0.35); } 50% { box-shadow: 0 0 0 6px rgba(224,85,85,0); } }

#send-btn { background: #000000; color: #ffffff; border: none; border-radius: var(--radius); padding: 0.44rem 0.6rem; cursor: pointer; transition: opacity 0.15s, background 0.15s, color 0.15s; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
#send-btn:hover { opacity: 0.85; }
#send-btn:disabled { opacity: 0.35; cursor: not-allowed; }
#send-btn.stop { background: var(--red); color: var(--white); opacity: 1; }
#send-btn.stop:hover { opacity: 0.85; }

/* ── MODAL ────────────────────────────────────── */
#modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 100; }
.modal { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 101; pointer-events: none; }
.modal-box { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 1.5rem; width: 340px; pointer-events: all; display: flex; flex-direction: column; gap: 1rem; }
.modal-title { font-size: 0.95rem; font-weight: 700; color: var(--white); }
.modal-actions { display: flex; gap: 0.5rem; justify-content: flex-end; }

.btn-ghost { background: none; border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-muted); font-family: var(--font); font-size: 0.85rem; padding: 0.45rem 0.9rem; cursor: pointer; transition: border-color 0.15s, color 0.15s; }
.btn-ghost:hover { border-color: #444; color: var(--text); }
.btn-white { background: var(--white); color: var(--black); border: none; border-radius: var(--radius); font-family: var(--font); font-size: 0.85rem; font-weight: 700; padding: 0.45rem 0.9rem; cursor: pointer; transition: opacity 0.15s; }
.btn-white:hover { opacity: 0.85; }

.icon-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 0.2rem 0.4rem; border-radius: 4px; font-size: 0.9rem; transition: color 0.15s; }
.icon-btn:hover { color: var(--white); }

/* ── SETTINGS PANEL ───────────────────────────── */
.settings-box {
  width: min(800px, 96vw);
  max-height: min(580px, 90vh);
  padding: 0; gap: 0;
  display: flex; flex-direction: row;
  overflow: hidden;
}

.settings-nav {
  width: 168px; flex-shrink: 0;
  border-right: 1px solid var(--border);
  padding: 1.4rem 0;
  display: flex; flex-direction: column; gap: 2px;
}

.settings-nav-item {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.55rem 1.1rem;
  font-size: 0.85rem; color: var(--text-muted);
  cursor: pointer; border-radius: 0;
  transition: background 0.12s, color 0.12s;
  border-left: 2px solid transparent;
  user-select: none;
}
.settings-nav-item svg { flex-shrink: 0; opacity: 0.6; }
.settings-nav-item:hover { background: var(--bg-hover); color: var(--text); }
.settings-nav-item.active { color: var(--white); border-left-color: var(--white); background: var(--bg-hover); }
.settings-nav-item.active svg { opacity: 1; }

.settings-content {
  flex: 1; display: flex; flex-direction: column;
  position: relative; overflow: hidden;
  min-width: 0;
}

.settings-close-btn {
  position: absolute; top: 1rem; right: 1rem;
  background: none; border: none; color: var(--text-dim);
  cursor: pointer; font-size: 1rem; padding: 0.2rem 0.4rem;
  border-radius: 4px; transition: color 0.15s; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
}
.settings-close-btn:hover { color: var(--white); }

/* Each settings page */
.spage { display: none; flex-direction: column; height: 100%; overflow: hidden; padding: 1.6rem 1.8rem; }
.spage.active { display: flex; }

.spage-title { font-size: 1rem; font-weight: 700; color: var(--white); margin-bottom: 1.4rem; padding-right: 2rem; }

.spage-scroll { flex: 1; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border) transparent; display: flex; flex-direction: column; gap: 0; }
.spage-scroll::-webkit-scrollbar { width: 3px; }
.spage-scroll::-webkit-scrollbar-thumb { background: var(--border); }

.spage-section { display: flex; flex-direction: column; gap: 0.6rem; }
.spage-section-label { font-family: var(--mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-dim); margin-bottom: 0.1rem; }
.spage-divider { border: none; border-top: 1px solid var(--border); margin: 1.4rem 0; }

.sform-row { display: flex; gap: 0.5rem; }
.sform-row input { flex: 1; }

.spage-section input[type="text"],
.spage-section input[type="password"] { width: 100%; }

.s-btn { background: var(--white); color: var(--black); border: none; border-radius: var(--radius); padding: 0.55rem 1rem; font-family: var(--font); font-size: 0.85rem; font-weight: 700; cursor: pointer; white-space: nowrap; transition: opacity 0.15s; }
.s-btn:hover { opacity: 0.85; }
.s-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.s-btn-secondary { background: transparent; border: 1px solid rgba(255,255,255,0.15); color: var(--text-dim); }
.s-btn-secondary:hover { background: rgba(255,255,255,0.06); color: var(--fg); opacity: 1; }
.s-danger-label { color: #e05c5c !important; }
.s-btn-danger { background: rgba(224,92,92,0.12); border: 1px solid rgba(224,92,92,0.3); color: #e05c5c; }
.s-btn-danger:hover:not(:disabled) { background: rgba(224,92,92,0.22); border-color: rgba(224,92,92,0.55); opacity: 1; }
.s-btn-danger:disabled { opacity: 0.35; cursor: not-allowed; }
.delete-slider-wrap { margin: 0.65rem 0 0.75rem; }
.delete-slider-hint { font-size: 0.72rem; color: var(--text-dim); font-family: var(--mono); margin-bottom: 0.4rem; transition: color 0.2s; }
.delete-slider-hint.unlocked { color: #e05c5c; }
.delete-slider-track { position: relative; height: 40px; background: rgba(255,255,255,0.05); border-radius: 20px; border: 1px solid rgba(255,255,255,0.1); overflow: hidden; cursor: pointer; user-select: none; }
.delete-slider-track.unlocked { border-color: rgba(224,92,92,0.5); background: rgba(224,92,92,0.08); }
.delete-slider-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: linear-gradient(to right, rgba(224,92,92,0.1), rgba(224,92,92,0.35)); transition: width 0.04s; pointer-events: none; border-radius: 20px; }
.delete-slider-label-text { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); font-size: 0.75rem; color: var(--text-dim); font-family: var(--mono); pointer-events: none; transition: opacity 0.2s; white-space: nowrap; }
.delete-slider-track.unlocked .delete-slider-label-text { opacity: 0; }
.delete-slider-thumb { position: absolute; top: 4px; left: 4px; width: 32px; height: 32px; background: var(--surface, #1e1e1e); border: 1px solid rgba(255,255,255,0.18); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-dim); transition: border-color 0.2s, color 0.2s, background 0.2s; pointer-events: none; }
.delete-slider-track.unlocked .delete-slider-thumb { border-color: rgba(224,92,92,0.6); color: #e05c5c; background: rgba(224,92,92,0.12); }

.s-msg { font-family: var(--mono); font-size: 0.75rem; min-height: 1rem; }
.s-msg.ok { color: #7ecba1; }
.s-msg.err { color: var(--red); }

/* Privacy */
.privacy-text { font-size: 0.82rem; color: var(--text-muted); line-height: 1.7; display: flex; flex-direction: column; gap: 0.75rem; }
.privacy-text p { margin: 0; }
.privacy-text strong { color: var(--text); }

.cookie-row { display: flex; align-items: center; justify-content: space-between; padding: 0.7rem 0; border-bottom: 1px solid var(--border); gap: 1rem; }
.cookie-row:last-child { border-bottom: none; }
.cookie-info { display: flex; flex-direction: column; gap: 0.2rem; }
.cookie-name { font-size: 0.85rem; color: var(--text); }
.cookie-desc { font-size: 0.75rem; color: var(--text-dim); }
.cookie-toggle.always-on { font-family: var(--mono); font-size: 0.7rem; color: var(--text-dim); background: #181818; border: 1px solid var(--border); border-radius: 20px; padding: 0.2rem 0.6rem; white-space: nowrap; }

.toggle-switch { position: relative; display: inline-block; width: 36px; height: 20px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-track { position: absolute; inset: 0; background: #333; border-radius: 20px; cursor: pointer; transition: background 0.2s; }
.toggle-track::after { content: ""; position: absolute; width: 14px; height: 14px; left: 3px; top: 3px; background: white; border-radius: 50%; transition: transform 0.2s; }
.toggle-switch input:checked + .toggle-track { background: #5b9cf6; }
.toggle-switch input:checked + .toggle-track::after { transform: translateX(16px); }

/* Billing */
.billing-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; color: var(--text-dim); font-size: 0.85rem; text-align: center; }
.billing-empty strong { color: var(--text-muted); }
#spage-billing .spage-scroll { padding: 1rem 0; }
.billing-status-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.1rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--border); font-size: 0.8rem; }
.billing-status-left { display: flex; align-items: center; gap: 0.6rem; }
.billing-plan-label { color: var(--text-dim); }
.billing-plan-badge { font-weight: 700; font-size: 0.68rem; padding: 2px 9px; border-radius: 99px; background: rgba(255,255,255,0.07); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.07em; }
.billing-plan-badge.plan-pro { background: #5b9cf6; color: #fff; }
.billing-plan-badge.plan-max { background: #a78bfa; color: #fff; }
.billing-plan-expires { font-size: 0.72rem; color: var(--text-dim); }
.billing-manage-btn { background: none; border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-muted); font-family: var(--font); font-size: 0.72rem; padding: 0.3rem 0.65rem; cursor: pointer; transition: border-color 0.15s, color 0.15s; white-space: nowrap; }
.billing-manage-btn:hover { border-color: #555; color: var(--white); }
.billing-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.billing-plan-card { border: 1px solid var(--border); border-radius: 12px; padding: 1.1rem 0.95rem 0.9rem; position: relative; background: var(--bg-card); display: flex; flex-direction: column; }
.billing-plan-card-pro { border-color: rgba(91,156,246,0.5); background: rgba(91,156,246,0.03); }
.billing-plan-card-max { border-color: rgba(167,139,250,0.4); background: rgba(167,139,250,0.03); }
.bpc-tag { position: absolute; top: -8px; left: 0.8rem; font-size: 0.58rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; background: #5b9cf6; color: #fff; padding: 2px 8px; border-radius: 99px; }
.bpc-tier { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-dim); margin-bottom: 0.45rem; }
.bpc-tier-pro { color: #5b9cf6; }
.bpc-tier-max { color: #a78bfa; }
.bpc-price-row { display: flex; align-items: baseline; gap: 1px; margin-bottom: 0.9rem; }
.bpc-price { font-size: 1.85rem; font-weight: 800; color: var(--white); line-height: 1; }
.bpc-per { font-size: 0.67rem; font-weight: 400; color: var(--text-dim); margin-left: 3px; }
.bpc-features { list-style: none; padding: 0; margin: 0 0 0.9rem; display: flex; flex-direction: column; gap: 0.32rem; flex: 1; }
.bpc-features li { font-size: 0.7rem; color: var(--text-dim); padding-left: 1rem; position: relative; line-height: 1.3; }
.bpc-features li::before { content: "✓"; position: absolute; left: 0; color: #7ecba1; font-size: 0.63rem; top: 1px; }
.bpc-btn { width: 100%; padding: 0.42rem; border-radius: 7px; border: none; cursor: pointer; font-size: 0.72rem; font-weight: 700; transition: opacity 0.15s; margin-top: auto; }
.bpc-btn:disabled { opacity: 0.38; cursor: default; }
.bpc-btn-current { background: rgba(255,255,255,0.06); color: var(--text-dim); }
.bpc-btn-pro { background: #5b9cf6; color: #fff; }
.bpc-btn-max { background: #a78bfa; color: #fff; }
.bpc-btn-pro:hover:not(:disabled), .bpc-btn-max:hover:not(:disabled) { opacity: 0.85; }
.billing-msg { margin-top: 0.9rem; font-size: 0.75rem; color: var(--text-dim); min-height: 1.2rem; }

/* ── CUSTOM SETTINGS PAGE ───────────────────────────────────────────────── */
.custom-option-row {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; padding: 0.9rem 0;
}
.custom-option-info { display: flex; flex-direction: column; gap: 0.25rem; flex: 1; min-width: 0; }
.custom-option-label { font-size: 0.9rem; font-weight: 600; color: var(--text); }
.custom-option-desc  { font-size: 0.78rem; color: var(--text-dim); line-height: 1.45; }

.color-picker-area {
  margin-top: 0.9rem; padding: 1rem;
  background: var(--bg-hover); border: 1px solid var(--border);
  border-radius: var(--radius); display: flex; flex-direction: column; gap: 0.75rem;
  animation: fadeIn 0.15s ease;
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.color-picker-label { font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--text-dim); }

.swatch-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px;
}
.swatch {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid transparent; cursor: pointer;
  transition: transform 0.12s, border-color 0.12s;
  position: relative;
}
.swatch:hover { transform: scale(1.18); }
.swatch.active {
  border-color: var(--white);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.15);
}
.swatch.custom-swatch {
  background: conic-gradient(#ef4444, #f97316, #eab308, #22c55e, #3b82f6, #8b5cf6, #ec4899, #ef4444);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.6);
  overflow: hidden;
}
.swatch.custom-swatch input[type="color"] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;
  border: none; padding: 0;
}

.color-preview-row { display: flex; align-items: center; gap: 0.75rem; }
.color-preview-chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.35rem 0.75rem; border-radius: 6px;
  background: var(--accent); color: var(--accent-contrast);
  font-family: var(--font); font-size: 0.82rem; font-weight: 700;
  border: none; transition: background 0.2s, color 0.2s;
  min-width: 80px; justify-content: center;
}
.color-hex-label { font-family: var(--mono); font-size: 0.75rem; color: var(--text-dim); }

/* Usage */
.usage-loading { color: var(--text-dim); font-family: var(--mono); font-size: 0.8rem; padding: 2rem 0; text-align: center; }

.usage-block { margin-bottom: 1.4rem; }
.usage-block-title { font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-dim); margin-bottom: 0.7rem; }

.usage-bar-row { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.9rem; }
.usage-bar-label { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 0.75rem; }
.usage-bar-label span:first-child { color: var(--text-muted); }
.usage-bar-label span:last-child { color: var(--white); }
.usage-bar-track { height: 4px; background: var(--bg-card); border-radius: 2px; overflow: hidden; }
.usage-bar-fill { height: 100%; border-radius: 2px; transition: width 0.5s ease; }

.usage-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 1rem; }
.usage-stat { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.6rem 0.75rem; background: var(--bg-input); border: 1px solid var(--border); border-radius: 6px; }
.usage-stat-label { font-family: var(--mono); font-size: 0.63rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-dim); }
.usage-stat-value { font-size: 1.05rem; font-weight: 700; color: var(--white); }
.usage-stat-sub { font-family: var(--mono); font-size: 0.68rem; color: var(--text-dim); }

.usage-conv-list { display: flex; flex-direction: column; gap: 0; }
.usage-conv-row { display: grid; grid-template-columns: 1fr auto auto; gap: 0 1rem; align-items: center; padding: 0.45rem 0; border-bottom: 1px solid #181818; }
.usage-conv-row:last-child { border-bottom: none; }
.usage-conv-title { font-size: 0.8rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.usage-conv-count { font-family: var(--mono); font-size: 0.72rem; color: var(--text-dim); white-space: nowrap; }
.usage-conv-date { font-family: var(--mono); font-size: 0.68rem; color: #444; white-space: nowrap; }

/* ── THINK BLOCK ─────────────────────────────────────────────── */
.think-block { border-left: 2px solid #5050aa; margin-bottom: 0.9rem; border-radius: 0 6px 6px 0; background: #0d0d18; overflow: hidden; }
.think-hdr { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: none; padding: 0.55rem 0.85rem; cursor: pointer; font-family: var(--mono); font-size: 0.72rem; color: var(--text-dim); text-align: left; gap: 0.5rem; }
.think-hdr:hover { color: var(--text-muted); }
.think-label { flex: 1; }
.think-chevron { flex-shrink: 0; transition: transform 0.2s; transform: rotate(-90deg); }
.think-open .think-chevron { transform: rotate(0deg); }
.think-body { display: none; padding: 0 0.85rem 0.7rem; font-size: 0.82rem; color: var(--text-dim); line-height: 1.65; white-space: pre-wrap; word-break: break-word; }
.think-open .think-body { display: block; }
.think-anim { display: inline; }
@keyframes think-pulse { 0%,100%{opacity:0.5} 50%{opacity:1} }
.think-waiting { font-family: var(--mono); font-size: 0.8rem; color: var(--text-dim); }
.answer-body { }

/* ── MESSAGE NAVIGATOR ───────────────────────────────────────── */
#main { position: relative; }
#msg-nav { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; z-index: 20; pointer-events: none; }
#msg-nav:empty { display: none; }
.nav-item { position: relative; display: flex; align-items: center; pointer-events: all; cursor: pointer; }
.nav-dash { width: 20px; height: 3px; background: rgba(255,255,255,0.35); border-radius: 2px; transition: background 0.15s, width 0.15s; }
.nav-item:hover .nav-dash { background: rgba(255,255,255,0.75); width: 60px; }
html.custom-accent .nav-dash { background: color-mix(in srgb, var(--accent) 55%, transparent); }
html.custom-accent .nav-item:hover .nav-dash { background: var(--accent); }
.nav-tip { position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); background: var(--bg-card); border: 1px solid var(--border); border-radius: 5px; padding: 0.22rem 0.5rem; font-family: var(--mono); font-size: 0.68rem; color: var(--white); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.12s; }
.nav-item:hover .nav-tip { opacity: 1; }

/* ── MESSAGE ACTION BUTTONS ──────────────────────────────────── */
.msg-actions { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0 0.1rem 0; }
.msg-timestamp { font-family: var(--mono); font-size: 0.68rem; color: var(--text-dim); white-space: nowrap; }
.msg-row.assistant .msg-actions { padding-left: 0; }
.msg-action-btn { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; background: none; border: 1px solid transparent; border-radius: 5px; color: var(--text-dim); cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s; flex-shrink: 0; }
.msg-action-btn:hover { border-color: var(--border); color: var(--text-muted); }
.msg-action-btn.act-copied { color: #7ecba1; border-color: #7ecba1; }
.msg-action-btn.act-speaking { color: #5b9cf6; border-color: #5b9cf6; animation: speak-pulse 1.2s ease-in-out infinite; }
@keyframes speak-pulse { 0%,100%{opacity:0.7} 50%{opacity:1} }

/* ── WEB SEARCH BUTTON ───────────────────────────────────────── */
#web-search-btn { background: none; border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-muted); padding: 0.5rem 0.55rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color 0.15s, color 0.15s; flex-shrink: 0; }
#img-mode-btn { background: none; border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-muted); padding: 0.5rem 0.55rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color 0.15s, color 0.15s; flex-shrink: 0; }
#img-mode-btn:hover { border-color: #555; color: var(--white); }
#img-mode-btn.active { border-color: #2a3a55; color: #7ab3f5; background: rgba(122,179,245,0.06); }
#web-search-btn:hover { border-color: #555; color: var(--white); }
#web-search-btn.active { border-color: #2a3a55; color: #7ab3f5; background: rgba(122,179,245,0.06); }

/* ── WEB SEARCH BADGE ───────────────────────────── */
.ws-badge { font-family: var(--mono); font-size: 0.62rem; margin-left: 3px; color: var(--text-dim); transition: color 0.15s; }
#web-search-btn.active .ws-badge { color: #7ab3f5; }
#web-search-btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* ── Think hint (>7s) ── */
.msg-model-badge {
  font-size: 0.68rem;
  font-family: var(--mono);
  color: var(--text-muted);
  opacity: 0.55;
  padding: 0 0.1rem 0.25rem 0.1rem;
  letter-spacing: 0.02em;
  user-select: none;
  line-height: 1;
}

/* ── Theme picker (Appearance settings) ──────────────────────────────────── */
.theme-picker {
  display: flex; gap: 0.6rem; margin-top: 0.9rem;
}
.theme-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
  padding: 0.65rem 0.5rem;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-card); color: var(--text-muted);
  font-family: var(--font); font-size: 0.8rem; cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.theme-btn:hover { border-color: var(--text-muted); color: var(--text); }
.theme-btn.active {
  border-color: var(--white); color: var(--white);
  background: var(--bg-hover);
}
.theme-btn-icon { font-size: 0.9rem; letter-spacing: -0.1em; }
.spage-section-desc { font-size: 0.77rem; color: var(--text-dim); margin-top: 0.25rem; line-height: 1.5; }

/* ── Inline message edit ───────────────────────────────────────────────────── */
.edit-textarea {
  width: 100%; min-height: 80px; padding: 0.6rem 0.7rem;
  background: var(--bg-input); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  font-family: var(--font); font-size: 0.93rem; line-height: 1.5;
  resize: vertical; box-sizing: border-box;
}
.edit-textarea:focus { outline: none; border-color: var(--text-muted); }
.edit-btn-row { display: flex; gap: 0.5rem; margin-top: 0.5rem; justify-content: flex-end; }
.edit-save-btn, .edit-cancel-btn {
  padding: 0.3rem 0.85rem; border-radius: 6px;
  font-size: 0.8rem; font-family: var(--font); cursor: pointer;
  border: 1px solid var(--border);
}
.edit-save-btn { background: var(--white); color: var(--black); }
.edit-save-btn:hover { opacity: 0.85; }
.edit-cancel-btn { background: transparent; color: var(--text-muted); }
.edit-cancel-btn:hover { color: var(--text); }

.think-hint {
  font-size: 0.7rem;
  color: var(--text-dim, #555);
  font-family: var(--mono);
  padding: 0.15rem 0.5rem;
  opacity: 0;
  animation: fadeInHint 0.6s ease 0s forwards;
  letter-spacing: 0.01em;
}
@keyframes fadeInHint {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 0.65; }
}

/* ── Admin panel ─────────────────────────────────────────────────────────── */
#admin-view { display: flex; flex-direction: column; background: var(--bg); }
#admin-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.75rem; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
#admin-topbar .logo-small { font-weight: 700; letter-spacing: 0.02em; }
#admin-logout-btn {
  background: none; border: 1px solid var(--border); color: var(--text-muted);
  border-radius: var(--radius); padding: 0.45rem 0.9rem; font-family: var(--mono);
  font-size: 0.78rem; cursor: pointer; transition: border-color 0.15s, color 0.15s;
}
#admin-logout-btn:hover { border-color: #444; color: var(--text); }

#admin-body { flex: 1; overflow-y: auto; padding: 1.5rem 1.75rem 3rem; }
.admin-section { margin-bottom: 2.25rem; }
.admin-section h2 {
  font-size: 0.95rem; font-weight: 600; color: var(--text); margin: 0 0 0.9rem;
  font-family: var(--mono);
}

.admin-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.75rem; }
.admin-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 0.9rem 1rem;
}
.admin-card-val { font-size: 1.4rem; font-weight: 700; color: var(--text); font-family: var(--mono); }
.admin-card-label { font-size: 0.72rem; color: var(--text-muted); margin-top: 0.2rem; }

.admin-table-wrap {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  overflow-x: auto;
}
.admin-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.admin-table th {
  text-align: left; padding: 0.65rem 0.9rem; color: var(--text-dim); font-weight: 500;
  border-bottom: 1px solid var(--border); font-family: var(--mono); font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap;
}
.admin-table td {
  padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--border); color: var(--text-muted);
  white-space: nowrap;
}
.admin-table tbody tr:last-child td { border-bottom: none; }
.admin-table tbody tr:hover { background: var(--bg-hover); }

.admin-bar-cell { width: 220px; }
.admin-bar { height: 12px; background: var(--white); border-radius: 4px; opacity: 0.85; min-width: 3px; }
.admin-provider-domain { color: var(--text-dim); font-family: var(--mono); font-size: 0.74rem; }
.admin-provider-domain a { color: var(--text-muted); text-decoration: none; border-bottom: 1px dotted var(--text-dim); transition: color 0.15s, border-color 0.15s; }
.admin-provider-domain a:hover { color: var(--white); border-bottom-color: var(--white); }
.admin-provider-reset { color: var(--text-dim); font-size: 0.74rem; white-space: normal; max-width: 220px; }
.admin-provider-table th, .admin-provider-table td { white-space: nowrap; }
.admin-provider-table td.admin-provider-reset { white-space: normal; }

.admin-badge {
  display: inline-block; font-size: 0.65rem; padding: 0.1rem 0.4rem; border-radius: 4px;
  background: var(--white); color: var(--black); font-family: var(--mono); margin-left: 0.3rem;
  vertical-align: middle;
}
.admin-status-ok { color: #6cc07a; }
.admin-status-banned { color: var(--red); }

.admin-actions-cell { display: flex; gap: 0.4rem; white-space: nowrap; }
.admin-btn {
  background: none; border: 1px solid var(--border); color: var(--text-muted);
  border-radius: 6px; padding: 0.3rem 0.6rem; font-family: var(--mono); font-size: 0.72rem;
  cursor: pointer; transition: border-color 0.15s, color 0.15s;
}
.admin-btn:hover { border-color: #444; color: var(--text); }
.admin-btn-ban:hover { border-color: var(--red); color: var(--red); }
.admin-btn-unban:hover { border-color: #6cc07a; color: #6cc07a; }
.admin-btn-danger:hover { border-color: var(--red); color: var(--red); }

.admin-inline-form { display: flex; gap: 0.6rem; margin-bottom: 0.9rem; }
.admin-inline-form input {
  background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text); padding: 0.5rem 0.75rem; font-family: var(--mono); font-size: 0.8rem;
}
.admin-inline-form input#admin-ipban-ip { width: 180px; }
.admin-inline-form input#admin-ipban-reason { flex: 1; }
.admin-inline-form button {
  background: var(--white); color: var(--black); border: none; border-radius: var(--radius);
  padding: 0.5rem 1rem; font-family: var(--mono); font-size: 0.8rem; cursor: pointer;
  font-weight: 600;
}
.admin-empty { color: var(--text-dim); font-size: 0.82rem; padding: 1rem; font-family: var(--mono); }

/* ── Admin panel additions (round 2) ────────────────────────────────────── */
#go-admin-btn {
  background: none; border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text-muted); font-family: var(--mono); font-size: 0.75rem;
  padding: 0.6rem 0.9rem; cursor: pointer; transition: border-color 0.15s, color 0.15s;
  width: 100%;
}
#go-admin-btn:hover { border-color: #444; color: var(--text); }

.admin-topbar-actions { display: flex; gap: 0.6rem; }
#admin-open-chat-btn {
  background: var(--white); color: var(--black); border: none; border-radius: var(--radius);
  padding: 0.45rem 0.9rem; font-family: var(--mono); font-size: 0.78rem; cursor: pointer;
  font-weight: 600;
}

.admin-th-sub { font-weight: 400; text-transform: none; color: var(--text-dim); letter-spacing: 0; }

.admin-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  margin-right: 0.4rem; vertical-align: middle;
}
.admin-dot-on { background: #6cc07a; box-shadow: 0 0 4px #6cc07a; }
.admin-dot-off { background: var(--text-dim); }

.admin-hint { font-size: 0.72rem; color: var(--text-dim); margin: 0 0 0.7rem; font-family: var(--mono); }

.admin-legal-textarea {
  width: 100%; background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--text); font-family: var(--mono);
  font-size: 0.78rem; padding: 0.75rem; resize: vertical; margin-bottom: 0.6rem;
}
.admin-legal-save-btn {
  background: var(--white); color: var(--black); border: none; border-radius: var(--radius);
  padding: 0.5rem 1.1rem; font-family: var(--mono); font-size: 0.8rem; cursor: pointer;
  font-weight: 600;
}
.admin-conv-modal-box { width: 1200px; max-width: 96vw; max-height: 94vh; }
.admin-conv-modal-box .admin-table-wrap { max-height: 78vh; overflow-y: auto; }
.admin-conv-modal-box .admin-msg-thread { max-height: 78vh; overflow-y: auto; padding: 0.5rem 0; }
.admin-conv-modal-box .msg-row { padding: 0.5rem 1rem; }
.admin-conv-modal-box .admin-msg-time {
  font-family: var(--mono); font-size: 0.66rem; color: var(--text-dim);
  padding: 0 1rem; margin-top: -0.2rem;
}
.admin-conv-modal-box .msg-row.user + .admin-msg-time { text-align: right; }

/* ── Admin: conversation drill-down ──────────────────────────────────────── */
.admin-table-clickable tbody tr { cursor: pointer; }
.admin-table-clickable tbody tr:hover { background: var(--bg-hover); }

.admin-conv-back { margin-bottom: 0.75rem; }

.admin-msg-thread { display: flex; flex-direction: column; gap: 0.6rem; padding: 0.75rem; }
.admin-msg {
  border: 1px solid var(--border); border-radius: var(--radius); padding: 0.6rem 0.8rem;
  background: var(--bg-card);
}
.admin-msg-user { border-left: 3px solid var(--white); }
.admin-msg-assistant { border-left: 3px solid var(--text-dim); }
.admin-msg-role {
  font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--text-dim); margin-bottom: 0.3rem;
}
.admin-msg-content { font-size: 0.82rem; color: var(--text); white-space: pre-wrap; word-break: break-word; }
.admin-msg-time { font-family: var(--mono); font-size: 0.68rem; color: var(--text-dim); margin-top: 0.35rem; }

/* ── Admin: unify scrollbars to the app's thin-dark style ─────────────────── */
#admin-body { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
#admin-body::-webkit-scrollbar { width: 4px; }
#admin-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.admin-legal-textarea { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.admin-legal-textarea::-webkit-scrollbar { width: 4px; }
.admin-legal-textarea::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.admin-table-wrap { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.admin-table-wrap::-webkit-scrollbar { height: 4px; width: 4px; }
.admin-table-wrap::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.admin-conv-modal-box .admin-table-wrap { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }

/* ── Admin: catalog update banner ────────────────────────────────────────── */
.catalog-update-banner {
  background: #2a2210; border: 1px solid #6b5a1f; border-radius: var(--radius);
  padding: 1rem 1.25rem; margin-bottom: 1.5rem;
}
.catalog-update-banner-header {
  display: flex; align-items: baseline; gap: 0.6rem; color: #e8c85a;
  font-family: var(--mono); font-size: 0.88rem; margin-bottom: 0.4rem;
}
.catalog-update-versions { color: var(--text-muted); font-size: 0.75rem; }
.catalog-update-banner-desc { font-size: 0.8rem; color: var(--text-muted); margin: 0 0 0.75rem; }
.catalog-update-banner-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.catalog-update-banner-actions .admin-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Image attach preview in chip ─────────────────────────────────────────── */
.attach-img-thumb {
  width: 28px;
  height: 28px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.08);
}

/* ── Image in user message bubble ────────────────────────────────────────── */
.msg-img-wrap {
  margin-bottom: 0.35rem;
}
.msg-img {
  max-width: 100%;
  max-height: 300px;
  border-radius: 8px;
  display: block;
  object-fit: contain;
  border: 1px solid rgba(255,255,255,0.08);
}
.msg-img-caption {
  margin-top: 0.3rem;
  font-size: 0.92rem;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── Generated image in assistant bubble ─────────────────────────────────── */
.msg-img-gen-wrap {
  margin-bottom: 0.4rem;
}
.msg-img-gen {
  max-width: 100%;
  max-height: 480px;
  border-radius: 10px;
  display: block;
  object-fit: contain;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.msg-img-gen-caption {
  font-size: 0.8rem;
  color: var(--text-dim);
  margin-top: 0.4rem;
  font-style: italic;
}
.model-tag-vision { background: rgba(160,100,255,0.15); color: #b080ff; }

/* ── KaTeX / LaTeX rendering ──────────────────────────────────────────────── */
.math-display-block {
  overflow-x: auto;
  padding: 0.6rem 0;
  text-align: center;
}
.katex-display {
  margin: 0.5rem 0;
  overflow-x: auto;
  overflow-y: hidden;
}
.katex { font-size: 1.05em; }

/* ── Generated image fallback link ────────────────────────────────────────── */
.gen-img-fallback {
  display: inline-block;
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  background: rgba(255,255,255,0.06);
  color: var(--accent);
  font-size: 0.85rem;
  text-decoration: none;
}
.gen-img-fallback:hover { background: rgba(255,255,255,0.1); }

/* ── Generated image open link ────────────────────────────────────────────── */
.gen-img-link {
  display: inline-block;
  margin: 0.4rem 0 0.15rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
  opacity: 0.9;
}
.gen-img-link:hover { opacity: 1; text-decoration: underline; }

/* ── Command palette (/commands) ─────────────────────────────────────────── */
.cmd-palette {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0; right: 0;
  background: var(--bg-secondary, #1a1a1a);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  z-index: 200;
  max-height: 320px;
  overflow-y: auto;
}
.cmd-palette.hidden { display: none; }
.cmd-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 1rem;
  cursor: pointer;
  user-select: none;
  transition: background 0.1s;
}
.cmd-item:hover, .cmd-item.active {
  background: rgba(255,255,255,0.07);
}
.cmd-item.active { background: rgba(255,255,255,0.1); }
.cmd-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-primary, #e8e8e8);
  font-family: 'Fira Code', monospace;
  min-width: 90px;
}
.cmd-name mark {
  background: transparent;
  color: var(--accent, #7c6aff);
  font-weight: 700;
}
.cmd-hint {
  font-size: 0.78rem;
  color: var(--text-dim, #777);
  font-family: 'Fira Code', monospace;
}
.cmd-desc {
  font-size: 0.8rem;
  color: var(--text-dim, #777);
  margin-left: auto;
}
.cmd-palette-hint {
  padding: 0.35rem 1rem;
  font-size: 0.72rem;
  color: var(--text-dim, #666);
  border-top: 1px solid rgba(255,255,255,0.06);
}

/* ── Markdown extras ──────────────────────────────────────────────────────── */
.msg blockquote {
  border-left: 3px solid #505050;
  margin: 0.4rem 0;
  padding: 0.2rem 0.8rem;
  color: var(--text-dim);
  font-style: italic;
}
.msg blockquote p { margin: 0; }
.msg hr {
  border: none;
  border-top: 1px solid rgba(255,255,255,0.1);
  margin: 0.8rem 0;
}
.msg del { opacity: 0.55; text-decoration: line-through; }
.msg a { color: var(--accent); text-decoration: none; }
.msg a:hover { text-decoration: underline; }
.msg .cb-item { list-style: none; display: flex; align-items: baseline; gap: 0.4rem; }
.msg .cb-item input[type=checkbox] { accent-color: var(--accent); cursor: default; flex-shrink: 0; }

/* ── Scroll to bottom button ─────────────────────────────────────────────── */
.scroll-bottom-btn {
  position: absolute;
  bottom: 120px;
  right: 2rem;
  left: auto;
  transform: none;
  z-index: 100;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.12);
  background: var(--bg-secondary, #1c1c1c);
  color: var(--text-muted);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 12px rgba(0,0,0,0.4);
  transition: opacity 0.2s, transform 0.2s;
  opacity: 0.85;
}
.scroll-bottom-btn:hover { opacity: 1; color: var(--white); border-color: rgba(255,255,255,0.25); }
.scroll-bottom-btn.hidden { display: none; }

/* ── TOPBAR EXPORT ─────────────────────────────────────────────────────────── */
.topbar-spacer { flex: 1; }

.export-wrap { position: relative; }
.export-btn {
  display: flex; align-items: center; gap: 0.38rem;
  background: none; border: 1px solid var(--border); border-radius: 6px;
  color: var(--text-muted); padding: 0.28rem 0.65rem;
  font-size: 0.78rem; font-family: var(--font); cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  white-space: nowrap;
}
.export-btn:hover { border-color: rgba(255,255,255,0.3); color: var(--white); background: rgba(255,255,255,0.04); }
.export-btn svg { flex-shrink: 0; opacity: 0.75; }

.export-menu {
  position: absolute; right: 0; top: calc(100% + 6px);
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 8px; padding: 0.3rem;
  min-width: 140px; z-index: 200;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  display: flex; flex-direction: column; gap: 1px;
}
.export-opt {
  display: flex; align-items: center; gap: 0.5rem;
  width: 100%; background: none; border: none;
  color: var(--text-muted); padding: 0.48rem 0.7rem;
  font-size: 0.82rem; font-family: var(--font);
  border-radius: 5px; cursor: pointer; text-align: left;
  transition: background 0.1s, color 0.1s;
}
.export-opt:hover { background: rgba(255,255,255,0.06); color: var(--white); }
.export-opt svg { opacity: 0.6; flex-shrink: 0; }

/* ── IMAGE GENERATION PANEL ────────────────────────────────────────────────── */
.img-gen-panel {
  margin: 0 auto 0.5rem;
  max-width: 800px; width: calc(100% - 2rem);
  background: linear-gradient(135deg, rgba(30,20,50,0.95) 0%, rgba(18,18,30,0.98) 100%);
  border: 1px solid rgba(130,90,220,0.3);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(100,60,200,0.12), inset 0 1px 0 rgba(255,255,255,0.05);
  overflow: hidden;
  transition: opacity 0.2s;
}
.img-gen-panel.hidden { display: none; }

.igp-header {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.65rem 0.9rem 0.55rem;
  background: rgba(120,80,220,0.08);
  border-bottom: 1px solid rgba(130,90,220,0.15);
  font-size: 0.8rem; font-weight: 600; color: #c4a8ff;
  letter-spacing: 0.03em;
}
.igp-header svg { opacity: 0.8; color: #9b6fff; }
.igp-header span { flex: 1; }

.igp-close {
  background: none; border: none; color: var(--text-dim);
  cursor: pointer; padding: 0.15rem; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  transition: color 0.15s, background 0.15s;
}
.igp-close:hover { color: var(--white); background: rgba(255,255,255,0.08); }

.igp-body {
  display: flex; align-items: center; gap: 1.2rem;
  padding: 0.6rem 0.9rem;
  flex-wrap: wrap;
}

.igp-field { display: flex; align-items: center; gap: 0.5rem; }
.igp-label {
  font-size: 0.72rem; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.06em;
  white-space: nowrap;
}

.igp-select {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px; color: var(--text); padding: 0.28rem 1.4rem 0.28rem 0.6rem;
  font-size: 0.8rem; font-family: var(--font); cursor: pointer;
  outline: none; transition: border-color 0.15s;
}
.igp-select:focus { border-color: rgba(130,90,220,0.6); }

.igp-ratio-group { display: flex; gap: 0.3rem; }
.igp-ratio {
  display: flex; align-items: center; gap: 0.35rem;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px; color: var(--text-dim); padding: 0.28rem 0.55rem;
  font-size: 0.75rem; font-family: var(--font); cursor: pointer;
  transition: all 0.15s; white-space: nowrap;
}
.igp-ratio:hover { border-color: rgba(130,90,220,0.4); color: var(--text); }
.igp-ratio.active {
  border-color: rgba(130,90,220,0.7); color: #c4a8ff;
  background: rgba(100,60,200,0.12);
}
.igp-ratio-icon {
  display: inline-block; border: 1.5px solid currentColor;
  border-radius: 2px; opacity: 0.7; flex-shrink: 0;
}

.igp-hint {
  padding: 0.3rem 0.9rem 0.5rem;
  font-size: 0.72rem; color: var(--text-dim);
  font-style: italic;
}

/* Enhanced generated image display */
.gen-img-card {
  border-radius: 12px; overflow: hidden;
  border: 1px solid rgba(130,90,220,0.2);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.03);
  display: inline-block; max-width: 100%;
}
.gen-img-card img {
  display: block; max-width: 100%; max-height: 520px;
  object-fit: contain;
}
.gen-img-card-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.55rem 0.8rem;
  background: rgba(255,255,255,0.03);
  border-top: 1px solid rgba(255,255,255,0.06);
}
.gen-img-card-caption {
  font-size: 0.78rem; color: var(--text-dim); font-style: italic;
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: 0.5rem;
}
.gen-img-card-actions { display: flex; gap: 0.4rem; flex-shrink: 0; }
.gen-img-action {
  display: flex; align-items: center; gap: 0.3rem;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 5px; color: var(--text-muted);
  padding: 0.22rem 0.5rem; font-size: 0.73rem; font-family: var(--font);
  cursor: pointer; text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.gen-img-action:hover { background: rgba(255,255,255,0.1); color: var(--white); }
.field-hint { color: var(--muted); font-size: 0.78rem; margin-top: 0.3rem; line-height: 1.4; }

/* ── UNIFIED INPUT CONTAINER ─────────────────────────────────────────────── */
.unified-input { background: var(--bg-input); border: 1px solid color-mix(in srgb, var(--white) 40%, var(--bg-input)); border-radius: 15px; display: flex; flex-direction: column; transition: border-color 0.15s; }

.input-inner-row { display: flex; align-items: center; justify-content: space-between; padding: 0.3rem 0.75rem 0.3rem; border-top: none; gap: 0.5rem; }
.input-inner-row .input-left { display: flex; align-items: center; gap: 0.65rem; }
.input-inner-row .input-right { display: flex; align-items: center; gap: 0.35rem; flex-shrink: 0; }

/* Restyle inner buttons to be smaller/tighter */
.input-inner-row #attach-btn,
#tools-btn { background: none; border: none; border-radius: 6px; color: #ffffff; padding: 0.3rem 0.35rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: color 0.15s, background 0.15s; flex-shrink: 0; }
.input-inner-row #attach-btn:hover,
#tools-btn:hover { color: var(--text-muted); background: rgba(255,255,255,0.05); }
.input-inner-row #attach-btn.has-file { color: #7ab3f5; }
#tools-btn.active { color: var(--white); background: rgba(255,255,255,0.07); }

/* ── TOOLS WRAP + PANEL ──────────────────────────────────────────────────── */
.tools-wrap { position: relative; }
.tools-panel { position: absolute; bottom: calc(100% + 8px); left: 0; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; min-width: 230px; z-index: 60; box-shadow: 0 -8px 28px rgba(0,0,0,0.55); padding: 0.35rem 0; }
.tools-item { display: flex; align-items: center; gap: 0.65rem; padding: 0.55rem 0.85rem; cursor: pointer; transition: background 0.1s; }
.tools-item:hover { background: var(--bg-hover); }
.tools-item-icon { display: flex; align-items: center; color: var(--text-dim); flex-shrink: 0; }
.tools-item-label { flex: 1; font-size: 0.82rem; color: var(--text-muted); }
.tools-item-desc { font-size: 0.72rem; color: var(--text-dim); margin-top: 0.1rem; }
.tools-item-right { color: var(--text-dim); font-size: 0.75rem; }
.tools-sep { height: 1px; background: var(--border); margin: 0.25rem 0; }

/* Toggle switch */
.tool-toggle { width: 32px; height: 18px; border-radius: 9px; background: #2a2a2a; border: 1px solid var(--border); position: relative; transition: background 0.2s, border-color 0.2s; flex-shrink: 0; cursor: pointer; }
.tool-toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #555; transition: transform 0.2s, background 0.2s; }
.tool-toggle.on { background: rgba(122,179,245,0.2); border-color: #7ab3f5; }
.tool-toggle.on::after { transform: translateX(14px); background: #7ab3f5; }
html.light .tool-toggle { background: #e2e2e2; border-color: #ccc; }
html.light .tool-toggle::after { background: #aaa; }
html.light .tool-toggle.on { background: rgba(80,130,230,.12); border-color: #5b9cf6; }
html.light .tool-toggle.on::after { background: #5b9cf6; }
.tp-img-ratio { padding: 8px 14px 12px 42px; border-bottom: 1px solid var(--border); background: rgba(0,0,0,.15); }
html.light .tp-img-ratio { background: rgba(0,0,0,.04); }
.tp-ratio-label { font-size: 0.7rem; color: var(--text-dim); letter-spacing: .04em; margin-bottom: 7px; }
.tp-ratio-group { display: flex; gap: 5px; }
.tp-ratio { display: flex; align-items: center; gap: 5px; background: none; border: 1px solid var(--border); border-radius: 5px; color: var(--text-muted); font-family: var(--mono); font-size: 0.72rem; padding: 4px 8px; cursor: pointer; transition: border-color .15s, color .15s; }
.tp-ratio:hover { border-color: #555; color: var(--text); }
.tp-ratio.active { border-color: rgba(130,90,220,.55); color: #a87ef5; background: rgba(130,90,220,.08); }
.tp-ratio-icon { display: inline-block; border: 1px solid currentColor; border-radius: 1px; opacity: .7; flex-shrink: 0; }

/* Mic btn inside inner row */
.input-inner-row #mic-btn { background: none; border: none; border-radius: 6px; color: #ffffff; padding: 0.3rem 0.35rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: color 0.15s, background 0.15s; }
.input-inner-row #mic-btn:hover { color: #ffffff; background: rgba(255,255,255,0.08); }
.input-inner-row #mic-btn.recording { color: var(--red); background: rgba(224,85,85,0.1); animation: mic-pulse 1.4s ease-in-out infinite; }

/* ── Light-theme input area fixes ─────────────────────────────────────────── */


/* Fix 3: send button → white bg + black arrow in light mode */
html.light #send-btn { background: #ffffff; color: #000000; border: 1.5px solid #c8c8c8; }
html.light #send-btn:hover { background: #f2f2f2; opacity: 1; }

/* Fix 2+4: inner icons visible (dark) + lighter shadows in light mode */
html.light .input-inner-row #attach-btn,
html.light #tools-btn { color: #1a1a1a; }
html.light .input-inner-row #attach-btn:hover,
html.light #tools-btn:hover { color: #000000; background: rgba(0,0,0,0.06); }
html.light #tools-btn.active { color: #000000; background: rgba(0,0,0,0.08); }
html.light .input-inner-row #mic-btn { color: #1a1a1a; }
html.light .input-inner-row #mic-btn:hover { color: #000000; background: rgba(0,0,0,0.06); }
html.light .tools-panel { box-shadow: 0 -8px 28px rgba(0,0,0,0.12); }
html.light .model-dropdown { box-shadow: 0 -8px 24px rgba(0,0,0,0.10); }
html.light .tool-toggle { background: #d8d8d8; border-color: #bbb; }
html.light .tool-toggle::after { background: #888; }


/* Light mode: white icons -> invert to black so visible on light bg */
html.light .model-icon-img img[src*="openai"],
html.light .model-icon-img img[src*="liquid"],
html.light .model-icon-img img[src*="ollama"] { filter: invert(1); }

/* Agnes + Llama: black logo on transparent bg - invert in dark mode */
.model-icon-img img[src*="/agnes."],
.model-icon-img img[src*="/llama."] { filter: invert(1); }
html.light .model-icon-img img[src*="/agnes."],
html.light .model-icon-img img[src*="/llama."] { filter: none; }

/* ── CHAT COMPOSER: 1.1× CONTROL SCALE ──────────────────────────────── */
/* Exactly the five composer controls: attach, tools, model, mic, and send. */
#chat-form .input-inner-row #attach-btn,
#chat-form #tools-btn {
  padding: 0.33rem 0.385rem;
}
#chat-form .input-inner-row #attach-btn svg,
#chat-form #tools-btn svg {
  width: 16.5px;
  height: 16.5px;
}
#chat-form #model-btn {
  gap: 0.44rem;
  padding: 0.495rem 0.77rem;
  font-size: 0.825rem;
}
#chat-form #model-btn > svg {
  width: 11px;
  height: 6.6px;
}
#chat-form .input-inner-row #mic-btn {
  padding: 0.33rem 0.385rem;
}
#chat-form .input-inner-row #mic-btn svg {
  width: 15.4px;
  height: 16.5px;
}
#chat-form #send-btn {
  padding: 0.484rem 0.66rem;
}
#chat-form #send-btn svg {
  width: 15.4px;
  height: 15.4px;
}


/* ══ Admin redesign — tabs / stat-cards / drawer / badges / quota bars ══════ */

/* Override topbar to accommodate tab nav */
#admin-topbar { align-items: stretch; justify-content: flex-start; padding: 0; }
#admin-topbar .logo-small {
  padding: 0 1.4rem; display: flex; align-items: center; flex-shrink: 0; font-size: 0.85rem;
}
.admin-topbar-actions {
  display: flex; align-items: center; gap: 0.6rem; padding: 0 1.5rem; flex-shrink: 0;
}

/* Tabs */
.admin-tabs { flex: 1; display: flex; align-items: stretch; padding: 0; gap: 0; }
.admin-tab {
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--text-dim); font-size: 0.72rem; font-weight: 500; font-family: var(--font);
  padding: 0 1rem; cursor: pointer; display: flex; align-items: center;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap; text-transform: uppercase; letter-spacing: 0.05em;
}
.admin-tab:hover { color: var(--text-muted); }
.admin-tab.active { color: var(--text); border-bottom-color: var(--white); }

/* Tab panes */
.admin-tab-pane { display: none; }
.admin-tab-pane.active { display: block; }

/* Stat grid (overview) */
.admin-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
  gap: 0.6rem;
}
.admin-stat-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 0.85rem 1rem 0.75rem;
}
.admin-stat-card-title {
  font-size: 0.68rem; font-weight: 500; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.05em; font-family: var(--font);
  margin-bottom: 0.35rem;
}
.admin-stat-card-val {
  font-size: 1.5rem; font-weight: 700; color: var(--text);
  font-family: var(--mono); line-height: 1.1;
}
.admin-stat-card-desc { font-size: 0.67rem; color: var(--text-dim); margin-top: 0.2rem; }

/* Large hero stat cards */
.admin-stat-card.large { padding: 1.1rem 1.2rem 0.95rem; }
.admin-stat-card.large .admin-stat-card-val { font-size: 2.2rem; line-height: 1; }
.admin-stat-card.large .admin-stat-card-desc { font-size: 0.72rem; margin-top: 0.4rem; }

/* Plan badge pills */
.admin-plan-badge {
  display: inline-flex; align-items: center;
  padding: 1px 6px; border-radius: 999px;
  font-size: 0.65rem; font-weight: 600; letter-spacing: 0.02em;
  font-family: var(--mono); vertical-align: middle;
}
.admin-plan-badge.free       { background: #181818; color: var(--text-muted); border: 1px solid #2e2e2e; }
.admin-plan-badge.pro        { background: #0f1e3a; color: #7eb3ff; border: 1px solid #1e3f7a; }
.admin-plan-badge.max        { background: #1e1500; color: #f5c842; border: 1px solid #3a2d00; }
.admin-plan-badge.plan-admin { background: #1a0a0a; color: var(--red); border: 1px solid #4a1a1a; }
.admin-plan-badge.banned     { background: #2a0808; color: #ff6b6b; border: 1px solid #5a1010; }
.admin-user-email            { color: var(--text); font-size: 0.82rem; margin-right: 0.35rem; }

/* Quota progress bar */
.admin-qb-wrap  { display: flex; align-items: center; gap: 0.4rem; }
.admin-qb-track { flex: 1; height: 4px; background: var(--border); border-radius: 2px; min-width: 45px; }
.admin-qb-fill  { height: 100%; border-radius: 2px; background: var(--white); transition: width 0.3s; }
.admin-qb-fill.warn { background: #f5c842; }
.admin-qb-fill.crit { background: var(--red); }
.admin-qb-label { font-size: 0.67rem; color: var(--text-muted); font-family: var(--mono); white-space: nowrap; }

/* Table toolbar */
.admin-table-toolbar { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.6rem; }
.admin-search-input {
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--text); font-size: 0.8rem;
  padding: 0.38rem 0.7rem; width: 225px; font-family: var(--mono);
  transition: border-color 0.15s;
}
.admin-search-input:focus { outline: none; border-color: #555; }
.admin-search-input::placeholder { color: var(--text-dim); }
.admin-count-label { font-size: 0.7rem; color: var(--text-dim); margin-left: auto; font-family: var(--mono); }

/* Pagination */
.admin-pagination {
  display: flex; align-items: center; gap: 0.35rem;
  padding: 0.6rem 0 0; justify-content: flex-end; flex-wrap: wrap;
}
.admin-pagination-info {
  font-size: 0.68rem; color: var(--text-dim); font-family: var(--mono); margin-right: auto;
}
.admin-page-btn {
  background: none; border: 1px solid var(--border); border-radius: 5px;
  color: var(--text-muted); font-size: 0.7rem; padding: 0.18rem 0.5rem;
  cursor: pointer; font-family: var(--mono); transition: border-color 0.15s, color 0.15s;
}
.admin-page-btn:hover:not(:disabled) { border-color: #444; color: var(--text); }
.admin-page-btn:disabled { opacity: 0.3; cursor: default; }
.admin-page-btn.active { border-color: var(--white); color: var(--white); }

/* Settings tab */
.admin-settings-title {
  font-size: 0.9rem; font-weight: 600; color: var(--text); margin: 0 0 0.5rem;
  font-family: var(--mono);
}

/* User drawer */
.admin-drawer { position: fixed; inset: 0; z-index: 200; pointer-events: none; }
.admin-drawer.open { pointer-events: auto; }
.admin-drawer-backdrop {
  position: absolute; inset: 0; background: rgba(0,0,0,0.5);
  opacity: 0; transition: opacity 0.22s;
}
.admin-drawer.open .admin-drawer-backdrop { opacity: 1; }
.admin-drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 385px; max-width: 95vw;
  background: var(--bg-card); border-left: 1px solid var(--border);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform 0.24s cubic-bezier(.4,0,.2,1);
}
.admin-drawer.open .admin-drawer-panel { transform: translateX(0); }
.admin-drawer-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 1rem 1.25rem 0.8rem; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.admin-drawer-header-info { flex: 1; min-width: 0; }
.admin-drawer-email {
  display: block; font-weight: 600; font-size: 0.88rem; color: var(--text);
  word-break: break-all; margin-bottom: 0.3rem;
}
.admin-drawer-badges { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.admin-drawer-close {
  background: none; border: none; color: var(--text-dim); cursor: pointer;
  font-size: 1rem; padding: 0.1rem 0.3rem; flex-shrink: 0; margin-left: 0.5rem;
  transition: color 0.15s;
}
.admin-drawer-close:hover { color: var(--text); }
.admin-drawer-body { flex: 1; overflow-y: auto; padding: 1rem 1.25rem 1.5rem; }
.admin-drawer-stats-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 1.15rem;
}
.admin-drawer-stat {
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
  padding: 0.5rem 0.65rem;
}
.admin-drawer-stat-label {
  font-size: 0.63rem; color: var(--text-dim); text-transform: uppercase;
  letter-spacing: 0.05em; font-family: var(--mono);
}
.admin-drawer-stat-val {
  font-size: 0.9rem; font-weight: 700; font-family: var(--mono);
  color: var(--text); margin-top: 0.1rem;
}
.admin-drawer-section { margin-top: 1rem; }
.admin-drawer-section-title {
  font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--text-dim); font-weight: 600; margin-bottom: 0.55rem; font-family: var(--mono);
}
.admin-quota-form { display: flex; flex-direction: column; gap: 0.4rem; }
.admin-quota-row { display: flex; align-items: center; gap: 0.6rem; }
.admin-quota-row label {
  font-size: 0.77rem; color: var(--text-muted); width: 105px;
  flex-shrink: 0; font-family: var(--mono);
}
.admin-quota-input {
  flex: 1; background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--text); font-size: 0.8rem;
  padding: 0.3rem 0.55rem; font-family: var(--mono); transition: border-color 0.15s;
}
.admin-quota-input:focus { outline: none; border-color: #555; }
.admin-drawer-action-btns { display: flex; gap: 0.4rem; flex-wrap: wrap; }

/* ── Dashboard divider (stat cards → users table) ── */
.admin-dashboard-divider {
  display: flex; align-items: center; gap: 0.75rem;
  margin: 1.25rem 0 0.6rem;
}
.admin-dashboard-divider::before,
.admin-dashboard-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}
.admin-dashboard-divider-label {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-dim); font-family: var(--mono); font-weight: 600;
  white-space: nowrap;
}

/* Stat card accent bars removed — uniform border only */

/* ══ Analytics inner tabs + chart grid ══════════════════════════════════════ */

.admin-dtab-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 0.9rem; border-bottom: 1px solid var(--border);
  padding-bottom: 0.55rem;
}
.admin-dtab-tabs { display: flex; gap: 0.25rem; }
.admin-dtab-tab {
  background: none; border: 1px solid transparent;
  border-radius: 6px; color: var(--text-dim);
  font-size: 0.75rem; font-weight: 500; font-family: var(--mono);
  padding: 0.3rem 0.85rem; cursor: pointer; transition: all 0.15s;
}
.admin-dtab-tab:hover { color: var(--text-muted); }
.admin-dtab-tab.active { background: var(--bg); border-color: var(--border); color: var(--text); }
.admin-dtab-pane { display: none; }
.admin-dtab-pane.active { display: block; }

.admin-period-sel { display: flex; gap: 0.2rem; }
.admin-period-sel.hidden { display: none; }
.admin-period-btn {
  background: none; border: 1px solid transparent; border-radius: 5px;
  color: var(--text-dim); font-size: 0.7rem; font-weight: 500; font-family: var(--mono);
  padding: 0.22rem 0.55rem; cursor: pointer; transition: all 0.15s;
}
.admin-period-btn:hover { color: var(--text-muted); }
.admin-period-btn.active { background: var(--bg); border-color: var(--border); color: var(--text); }

.admin-chart-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem;
}
@media (max-width: 860px) { .admin-chart-grid { grid-template-columns: 1fr; } }
.admin-chart-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 0.85rem 0.9rem 0.65rem;
}
.admin-chart-title {
  font-size: 0.67rem; font-weight: 500; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.06em; font-family: var(--mono);
  margin-bottom: 0.55rem;
}
.admin-chart-body { width: 100%; }
.admin-chart-empty {
  font-size: 0.75rem; color: var(--text-dim); text-align: center;
  padding: 1.5rem 0; font-family: var(--mono);
}

/* ══ Pentagi-style override: inner tabs, period selector, chart cards ══════ */

/* Stat cards spacing in analytics pane */
.admin-analytics-cards { margin-bottom: 1.25rem; }

/* Inner tab row */
.admin-dtab-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 1.5rem !important;
  border-bottom: 1px solid var(--border) !important;
  padding-bottom: 0 !important;
}

/* Inner tabs — plain text, no pill/border */
.admin-dtab-tabs { display: flex; gap: 0; }
.admin-dtab-tab {
  background: none !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  color: var(--text-dim) !important;
  font-size: 0.82rem !important;
  font-weight: 400 !important;
  font-family: var(--font) !important;
  padding: 0 0 0.65rem !important;
  margin-right: 1.5rem !important;
  cursor: pointer !important;
  transition: color 0.15s, border-color 0.18s !important;
}
.admin-dtab-tab:hover { color: var(--text-muted) !important; }
.admin-dtab-tab.active {
  color: var(--text) !important;
  font-weight: 600 !important;
  border-bottom-color: var(--text) !important;
}

/* Period selector — plain text, no pill */
.admin-period-sel { display: flex; gap: 0; }
.admin-period-sel.hidden { display: none !important; }
.admin-period-btn {
  background: none !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  color: var(--text-dim) !important;
  font-size: 0.82rem !important;
  font-weight: 400 !important;
  font-family: var(--font) !important;
  padding: 0 0 0.65rem !important;
  margin-left: 1.25rem !important;
  cursor: pointer !important;
  transition: color 0.15s, border-color 0.18s !important;
}
.admin-period-btn:hover { color: var(--text-muted) !important; }
.admin-period-btn.active {
  color: var(--text) !important;
  font-weight: 600 !important;
  border-bottom-color: var(--text-dim) !important;
}

/* Chart grid: 2-col, generous gap */
.admin-chart-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 1rem !important;
}
@media (max-width: 860px) { .admin-chart-grid { grid-template-columns: 1fr !important; } }

/* Chart cards: bigger, prominent title */
.admin-chart-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 1.25rem 1.5rem 1rem !important;
}
.admin-chart-title {
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-family: var(--font) !important;
  margin-bottom: 0.2rem !important;
}
.admin-chart-subtitle {
  font-size: 0.72rem;
  color: var(--text-dim);
  font-family: var(--mono);
  margin-bottom: 0.75rem;
}
.admin-chart-body {
  width: 100% !important;
  min-height: 0 !important;
}

/* ── Server Status chips (Analytics tab) ────────────────────────────── */
.admin-server-status-row {
  display: flex;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}
.asv-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.65rem 0.28rem 0.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.73rem;
  font-family: var(--mono);
  transition: border-color 0.15s;
}
.asv-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.asv-chip.online  .asv-dot   { background: var(--color-success); }
.asv-chip.offline .asv-dot   { background: var(--color-danger); }
.asv-chip.online              { border-color: rgba(34,197,94,0.3); }
.asv-chip.offline             { border-color: rgba(239,68,68,0.3); }
.asv-label  { color: var(--text); font-weight: 500; }
.asv-status { color: var(--text-dim); }
.asv-latency { color: var(--text-dim); margin-left: 0.1rem; }
.asv-chip.offline .asv-status { color: var(--color-danger); }

/* ── Chart hover tooltip ──────────────────────────────────────────────────── */
.chart-tooltip {
  position: fixed; pointer-events: none; z-index: 1000;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 6px; padding: 0.28rem 0.65rem;
  font-size: 0.72rem; color: var(--text);
  box-shadow: 0 4px 14px rgba(0,0,0,0.45);
  white-space: nowrap; line-height: 1.5;
}
.chart-tooltip[hidden] { display: none; }