/* =========================================================================
   Zallixor AI — Design System
   Palette: deep indigo-navy ground, blue→violet neural gradient accent.
   Type: Space Grotesk (display) / Inter (body) / JetBrains Mono (utility)
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root,
[data-theme="dark"] {
  --bg: #0a0d16;
  --bg-elevated: #10131f;
  --panel: #141827;
  --panel-2: #1a1f31;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --text-primary: #edeff7;
  --text-secondary: #9aa1b8;
  --text-muted: #656c82;
  --accent-1: #4c7fff;
  --accent-2: #9b6bff;
  --accent-gradient: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  --warn: #ff6b4a;
  --success: #34d399;
  --shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
  --glass-bg: rgba(20, 24, 39, 0.72);
}

[data-theme="light"] {
  --bg: #f4f5fa;
  --bg-elevated: #ffffff;
  --panel: #ffffff;
  --panel-2: #f0f1f8;
  --border: rgba(16, 19, 31, 0.09);
  --border-strong: rgba(16, 19, 31, 0.16);
  --text-primary: #10131f;
  --text-secondary: #4a5170;
  --text-muted: #868da3;
  --accent-1: #3a68e0;
  --accent-2: #8354e6;
  --accent-gradient: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  --warn: #d9502f;
  --success: #16a374;
  --shadow: 0 8px 30px rgba(30, 34, 60, 0.1);
  --glass-bg: rgba(255, 255, 255, 0.78);
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-primary);
  font-family: "Inter", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  transition: background 0.25s ease, color 0.25s ease;
}

h1, h2, h3, .display {
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}

code, pre, .mono { font-family: "JetBrains Mono", monospace; }

a { color: var(--accent-1); text-decoration: none; }

::selection { background: var(--accent-2); color: #fff; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

button { font-family: inherit; cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---------- primitives ---------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text-primary);
  padding: 10px 18px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.btn:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--accent-gradient);
  border: none;
  color: #fff;
  box-shadow: 0 4px 18px rgba(76, 127, 255, 0.35);
}
.btn-primary:hover { filter: brightness(1.06); }

.btn-ghost { background: transparent; border-color: transparent; color: var(--text-secondary); }
.btn-ghost:hover { background: var(--panel-2); color: var(--text-primary); }

.btn-block { width: 100%; }
.btn-sm { padding: 7px 12px; font-size: 13px; border-radius: 9px; }

.input {
  width: 100%;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.15s ease;
}
.input:focus { border-color: var(--accent-1); }
.input:focus-visible { outline: 2px solid var(--accent-1); outline-offset: 1px; }

label.field-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
  display: block;
}

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
}

.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--border);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text-secondary);
}
.pill.accent { background: rgba(76, 127, 255, 0.12); color: var(--accent-1); border-color: rgba(76, 127, 255, 0.3); }
.pill.warn { background: rgba(255, 107, 74, 0.12); color: var(--warn); border-color: rgba(255, 107, 74, 0.3); }
.pill.success { background: rgba(52, 211, 153, 0.12); color: var(--success); border-color: rgba(52, 211, 153, 0.3); }

.spinner {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  border-top-color: var(--accent-1);
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.toast-stack {
  position: fixed; bottom: 20px; right: 20px; z-index: 500;
  display: flex; flex-direction: column; gap: 10px;
}
.toast {
  padding: 12px 16px; border-radius: 12px; font-size: 13px; font-weight: 500;
  max-width: 320px; animation: toast-in 0.25s ease;
}
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- brand mark ------------------------------------------------ */

.brand {
  display: flex; align-items: center; gap: 10px;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 17px;
}
.brand img { width: 26px; height: 26px; filter: drop-shadow(0 0 8px rgba(76,127,255,0.5)); }
.brand .brand-pulse { animation: pulse-glow 2.4s ease-in-out infinite; }
@keyframes pulse-glow {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(76,127,255,0.4)); }
  50% { filter: drop-shadow(0 0 14px rgba(155,107,255,0.75)); }
}

/* =========================================================================
   Auth page (index.html)
   ========================================================================= */

.auth-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
}
.auth-hero {
  position: relative;
  display: flex; flex-direction: column; justify-content: center;
  padding: 64px;
  background:
    radial-gradient(circle at 20% 20%, rgba(76,127,255,0.16), transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(155,107,255,0.14), transparent 45%),
    var(--bg-elevated);
  border-right: 1px solid var(--border);
  overflow: hidden;
}
.auth-hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(circle at 30% 40%, black, transparent 70%);
  opacity: 0.5;
}
.auth-hero .content { position: relative; max-width: 460px; }
.auth-hero h1 { font-size: 40px; line-height: 1.15; margin: 20px 0 14px; }
.auth-hero p { color: var(--text-secondary); font-size: 15px; line-height: 1.6; }
.auth-hero .hero-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }

.auth-panel {
  display: flex; align-items: center; justify-content: center;
  padding: 40px 24px;
}
.auth-box { width: 100%; max-width: 380px; }
.auth-box h2 { font-size: 24px; margin-bottom: 4px; }
.auth-box .sub { color: var(--text-secondary); font-size: 14px; margin-bottom: 26px; }
.auth-tabs { display: flex; gap: 4px; background: var(--panel-2); padding: 4px; border-radius: 12px; margin-bottom: 24px; }
.auth-tabs button {
  flex: 1; border: none; background: transparent; color: var(--text-secondary);
  padding: 9px; border-radius: 9px; font-weight: 600; font-size: 13px;
  transition: all 0.15s ease;
}
.auth-tabs button.active { background: var(--panel); color: var(--text-primary); box-shadow: var(--shadow); }
.field { margin-bottom: 16px; }
.auth-error {
  display: none;
  background: rgba(255,107,74,0.1); border: 1px solid rgba(255,107,74,0.3);
  color: var(--warn); padding: 10px 12px; border-radius: 10px; font-size: 13px; margin-bottom: 16px;
}
.auth-foot { text-align: center; margin-top: 18px; font-size: 13px; color: var(--text-muted); }

@media (max-width: 860px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-hero { display: none; }
}

/* =========================================================================
   App shell (chat.html / admin.html)
   ========================================================================= */

.app-shell { display: flex; height: 100vh; height: 100dvh; overflow: hidden; }

.sidebar {
  width: 272px;
  flex-shrink: 0;
  background: var(--bg-elevated);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  transition: transform 0.25s ease;
}
.sidebar-header { padding: 18px 16px 12px; }
.sidebar-search { padding: 0 12px 10px; }
.sidebar-newchat {
  margin: 4px 12px 14px;
}
.sidebar-section {
  padding: 4px 16px 6px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-muted);
  margin-top: 10px;
}
.sidebar-scroll { flex: 1; overflow-y: auto; padding-bottom: 10px; }

.chat-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; margin: 2px 8px;
  border-radius: 10px; font-size: 13.5px; color: var(--text-secondary);
  cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background 0.15s ease, color 0.15s ease;
}
.chat-item:hover { background: var(--panel-2); color: var(--text-primary); }
.chat-item.active { background: var(--panel-2); color: var(--text-primary); }
.chat-item .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-1); flex-shrink: 0; opacity: 0; }
.chat-item.pending .dot { opacity: 1; }

.tool-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; margin: 2px 8px;
  border-radius: 10px; font-size: 13.5px; color: var(--text-secondary);
  cursor: pointer;
}
.tool-item:hover { background: var(--panel-2); color: var(--text-primary); }
.tool-item .badge-soon {
  margin-left: auto; font-size: 10px; padding: 2px 6px; border-radius: 6px;
  background: var(--panel-2); color: var(--text-muted); border: 1px solid var(--border);
}

.sidebar-footer {
  border-top: 1px solid var(--border);
  padding: 12px;
  display: flex; align-items: center; gap: 10px;
}
.avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--accent-gradient);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 13px; flex-shrink: 0;
}
.sidebar-footer .who { flex: 1; min-width: 0; }
.sidebar-footer .who .name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-footer .who .plan { font-size: 11.5px; color: var(--text-muted); }

/* main column */
.main-col { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.topbar {
  height: 60px; flex-shrink: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.topbar .sidebar-toggle { display: none; }
/* On any touch device (phones, even in "Desktop site" mode where the reported
   width is wide), always show the hamburger so the sidebar can be opened. This
   fixes the case where "Desktop mode" on a phone hides the toggle but the
   sidebar isn't shown as a fixed column either. */
@media (hover: none), (pointer: coarse) {
  .topbar .sidebar-toggle { display: flex !important; }
  .sidebar { position: fixed; z-index: 80; height: 100%; height: 100dvh; transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); box-shadow: var(--shadow); }
  .scrim { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 70; }
  .scrim.open { display: block; }
}
.topbar-spacer { flex: 1; }
.topbar-center { display: flex; align-items: center; gap: 8px; margin: 0 auto; }

.selector {
  position: relative;
}
.selector-btn {
  display: flex; align-items: center; gap: 8px;
  background: var(--panel); border: 1px solid var(--border);
  padding: 8px 12px; border-radius: 11px; font-size: 13px; font-weight: 600;
  color: var(--text-primary);
}
.selector-btn:hover { border-color: var(--border-strong); }
.selector-btn .chev { color: var(--text-muted); font-size: 10px; }

.selector-menu {
  position: absolute; top: calc(100% + 8px); left: 0;
  width: 300px; z-index: 60;
  border-radius: 14px; padding: 8px;
  display: none;
  box-shadow: var(--shadow);
}
.selector-menu.open { display: block; animation: pop-in 0.15s ease; }
@keyframes pop-in { from { opacity: 0; transform: translateY(-6px) scale(0.98); } to { opacity: 1; transform: none; } }

.selector-option {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 10px; border-radius: 10px;
  cursor: pointer;
}
.selector-option:hover { background: var(--panel-2); }
.selector-option.locked { opacity: 0.45; cursor: not-allowed; }
.selector-option .icon { font-size: 17px; line-height: 1.3; }
.selector-option .txt .t1 { font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.selector-option .txt .t2 { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.selector-option .check { margin-left: auto; color: var(--accent-1); font-size: 14px; }

/* messages */
.chat-scroll { flex: 1; overflow-y: auto; }
.chat-inner { max-width: 780px; margin: 0 auto; padding: 32px 20px 12px; }

.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; height: 100%; min-height: 60vh; padding: 20px;
}
.empty-state img { width: 46px; height: 46px; margin-bottom: 18px; }
.empty-state h2 { font-size: 22px; margin-bottom: 8px; }
.empty-state p { color: var(--text-secondary); font-size: 14px; max-width: 420px; }
.suggestion-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 22px; }
.suggestion-chip {
  background: var(--panel); border: 1px solid var(--border);
  padding: 9px 14px; border-radius: 12px; font-size: 13px; color: var(--text-secondary);
}
.suggestion-chip:hover { border-color: var(--border-strong); color: var(--text-primary); }

.msg-row { display: flex; gap: 12px; margin-bottom: 28px; animation: msg-in 0.25s ease; align-items: flex-start; }
@keyframes msg-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.msg-row.user { flex-direction: row-reverse; margin-bottom: 20px; }

/* Assistant rows: a small quiet mark instead of a bold avatar chip — the
   reply reads as plain text on the page, not "content inside a box". */
.msg-avatar {
  width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff;
  margin-top: 2px;
}
.msg-avatar.ai { background: var(--panel); border: 1px solid var(--border); color: var(--accent-1); }
.msg-avatar.user { display: none; } /* user's own messages don't need a repeated avatar */

.msg-col { max-width: 82%; display: flex; flex-direction: column; }
.msg-row.ai .msg-col { max-width: 100%; flex: 1; min-width: 0; }
.msg-row.user .msg-col { align-items: flex-end; }

.msg-bubble { font-size: 15px; line-height: 1.7; }

/* Assistant: no bubble chrome at all — full-width plain text, like the
   reading pane of a document rather than a chat "box". */
.msg-row.ai .msg-bubble { padding: 2px 0 0; background: none; border: none; }

/* User: a soft, tinted pill — present but quiet, not a loud gradient block. */
.msg-row.user .msg-bubble {
  padding: 11px 16px; border-radius: 18px; border-top-right-radius: 6px;
  background: rgba(76, 127, 255, 0.1); border: 1px solid rgba(76, 127, 255, 0.22);
  color: var(--text-primary); font-size: 14.5px;
}
.msg-bubble p { margin: 0 0 10px; }
.msg-bubble p:last-child { margin-bottom: 0; }
.msg-bubble ul { margin: 0 0 10px 18px; padding: 0; }
.msg-bubble .inline-code {
  background: rgba(120,130,160,0.16); padding: 1px 6px; border-radius: 5px; font-size: 13px;
}
.code-block {
  background: #0d1018; border: 1px solid var(--border); border-radius: 10px;
  overflow: hidden; margin: 10px 0; font-size: 13px;
}
.code-block-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 12px; background: rgba(255,255,255,0.03); color: var(--text-muted); font-size: 11.5px;
}
.copy-code-btn { background: none; border: none; color: var(--text-muted); font-size: 11.5px; }
.copy-code-btn:hover { color: var(--text-primary); }
.code-block pre { margin: 0; padding: 12px; overflow-x: auto; color: #d9e2ff; }

.msg-meta { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.msg-time { font-size: 11px; color: var(--text-muted); }
.msg-actions { display: flex; gap: 2px; opacity: 0; transition: opacity 0.15s ease; }
.msg-row:hover .msg-actions { opacity: 1; }
.msg-icon-btn {
  width: 26px; height: 26px; border: none; background: transparent; border-radius: 7px;
  display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 13px;
}
.msg-icon-btn:hover { background: var(--panel-2); color: var(--text-primary); }
.msg-icon-btn.active { color: var(--accent-1); }

.typing-row { display: flex; gap: 12px; margin-bottom: 22px; align-items: flex-start; }
.typing-dots { display: flex; gap: 5px; padding: 4px 0; }
.typing-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-1); animation: bounce 1.1s infinite ease-in-out; }
.typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.typing-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes bounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-4px); opacity: 1; } }
.typing-label { font-size: 12px; color: var(--text-muted); margin-top: 6px; }

/* input bar — a floating rounded composer, centered and detached from the
   edge of the viewport, the way most modern assistants anchor input. */
.input-bar-wrap { padding: 12px 20px 20px; }
.input-bar {
  max-width: 780px; margin: 0 auto;
  border-radius: 26px; padding: 12px 12px 12px 20px;
  display: flex; align-items: flex-end; gap: 8px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border-strong);
}
.input-bar textarea {
  flex: 1; resize: none; border: none; outline: none; background: transparent;
  color: var(--text-primary); font-family: inherit; font-size: 14.5px; line-height: 1.5;
  max-height: 160px; padding: 10px 0;
}
.input-bar textarea::placeholder { color: var(--text-muted); }
.input-tools { display: flex; align-items: center; gap: 2px; }
.tool-btn {
  width: 34px; height: 34px; border-radius: 10px; border: none; background: transparent;
  display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 15px;
}
.tool-btn:hover { background: var(--panel-2); color: var(--text-primary); }
.send-btn {
  width: 36px; height: 36px; border-radius: 11px; border: none;
  background: var(--accent-gradient); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 15px;
  transition: opacity 0.15s ease, transform 0.1s ease;
}
.send-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.send-btn:not(:disabled):active { transform: scale(0.94); }
.input-foot {
  display: flex; justify-content: space-between; align-items: center;
  max-width: 760px; margin: 8px auto 0; font-size: 11.5px; color: var(--text-muted); padding: 0 4px;
}
.usage-bar-track { width: 120px; height: 4px; border-radius: 4px; background: var(--panel-2); overflow: hidden; }
.usage-bar-fill { height: 100%; background: var(--accent-gradient); }

.limit-banner {
  max-width: 760px; margin: 0 auto 10px; padding: 12px 16px; border-radius: 12px;
  background: rgba(255,107,74,0.1); border: 1px solid rgba(255,107,74,0.3);
  color: var(--warn); font-size: 13px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
}

/* mobile */
@media (max-width: 860px) {
  .sidebar { position: fixed; z-index: 80; height: 100%; height: 100dvh; transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); box-shadow: var(--shadow); }
  .topbar .sidebar-toggle { display: flex; }
  .msg-col { max-width: 88%; }
  .scrim { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 70; }
  .scrim.open { display: block; }
}

/* =========================================================================
   Settings modal
   ========================================================================= */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(6,8,14,0.55); z-index: 200;
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.modal-backdrop.open { display: flex; animation: fade-in 0.15s ease; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.modal {
  width: 100%; max-width: 460px; border-radius: 18px; padding: 22px;
  animation: pop-in 0.18s ease;
}
.modal-head { display: flex; align-items: center; justify-content: between; margin-bottom: 18px; }
.modal-head h3 { flex: 1; font-size: 18px; }
.modal-close { background: none; border: none; color: var(--text-muted); font-size: 18px; }
.settings-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0; border-bottom: 1px solid var(--border);
}
.settings-row:last-child { border-bottom: none; }
.settings-row .lbl { font-size: 14px; font-weight: 500; }
.settings-row .sub-lbl { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

.theme-toggle {
  width: 46px; height: 26px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--border);
  position: relative; padding: 2px;
}
.theme-toggle .knob {
  width: 20px; height: 20px; border-radius: 50%; background: var(--accent-gradient);
  transition: transform 0.2s ease;
}
[data-theme="dark"] .theme-toggle .knob { transform: translateX(0); }
[data-theme="light"] .theme-toggle .knob { transform: translateX(20px); }

/* =========================================================================
   Pricing page
   ========================================================================= */
.pricing-shell { max-width: 1080px; margin: 0 auto; padding: 60px 24px 100px; }
.pricing-head { text-align: center; margin-bottom: 44px; }
.pricing-head h1 { font-size: 34px; margin-bottom: 10px; }
.pricing-head p { color: var(--text-secondary); font-size: 15px; }
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.plan-card { padding: 26px; display: flex; flex-direction: column; position: relative; }
.plan-card.featured { border: 1px solid var(--accent-1); box-shadow: 0 0 0 1px var(--accent-1), var(--shadow); }
.plan-card .tag { position: absolute; top: -11px; right: 22px; background: var(--accent-gradient); color: #fff; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.plan-card h3 { font-size: 19px; margin-bottom: 4px; }
.plan-card .price { font-family: "Space Grotesk", sans-serif; font-size: 34px; font-weight: 700; margin: 10px 0 2px; }
.plan-card .price span { font-size: 14px; color: var(--text-muted); font-weight: 500; }
.plan-card .desc { color: var(--text-secondary); font-size: 13px; margin-bottom: 18px; }
.plan-feats { list-style: none; padding: 0; margin: 0 0 22px; flex: 1; }
.plan-feats li { display: flex; gap: 8px; font-size: 13.5px; padding: 7px 0; color: var(--text-secondary); }
.plan-feats li b { color: var(--text-primary); font-weight: 600; }
.plan-feats li .ico { color: var(--success); flex-shrink: 0; }

.compare-table-wrap { margin-top: 60px; overflow-x: auto; }
.compare-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.compare-table th, .compare-table td { padding: 12px 16px; text-align: left; font-size: 13.5px; border-bottom: 1px solid var(--border); }
.compare-table th { color: var(--text-muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
.compare-table td.center, .compare-table th.center { text-align: center; }

@media (max-width: 780px) {
  .pricing-grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   Admin page
   ========================================================================= */
.admin-tabs { display: flex; gap: 6px; padding: 14px 20px 0; border-bottom: 1px solid var(--border); }
.admin-tab { padding: 10px 14px; border-radius: 10px 10px 0 0; font-size: 13.5px; font-weight: 600; color: var(--text-secondary); border: none; background: none; }
.admin-tab.active { color: var(--text-primary); background: var(--panel); box-shadow: inset 0 -2px 0 var(--accent-1); }
.admin-body { padding: 20px; overflow-y: auto; flex: 1; }
.admin-grid { display: grid; grid-template-columns: 340px 1fr; gap: 16px; height: 100%; }
.queue-list { overflow-y: auto; padding-right: 4px; }
.queue-item { padding: 12px 14px; border-radius: 12px; margin-bottom: 8px; cursor: pointer; }
.queue-item:hover { border-color: var(--border-strong); }
.queue-item.active { border-color: var(--accent-1); }
.queue-item .who { font-size: 12.5px; font-weight: 700; margin-bottom: 3px; }
.queue-item .prev { font-size: 12.5px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.queue-item .meta { display: flex; gap: 6px; margin-top: 6px; }

.reply-panel { display: flex; flex-direction: column; padding: 16px; }
.reply-thread { flex: 1; overflow-y: auto; margin-bottom: 12px; }
.reply-box { display: flex; gap: 8px; align-items: flex-end; }
.reply-box textarea { flex: 1; min-height: 70px; }

.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: 13px; text-align: left; }
.data-table th { color: var(--text-muted); font-weight: 600; font-size: 11.5px; text-transform: uppercase; }

.empty-mini { text-align: center; padding: 40px 20px; color: var(--text-muted); font-size: 13.5px; }

.gate-shell { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px; }

/* ---- SVG icon system (replaces emoji icons) ---- */
svg.icon{flex:none;vertical-align:-2px;display:inline-block}
svg.icon.fill{fill:currentColor}
.selector-btn svg.icon, .tool-item svg.icon{vertical-align:-2px}
.send-btn svg.icon{vertical-align:middle}
.selector-option .icon svg.icon{vertical-align:middle}


/* =========================================================================
   Responsive fixes — desktop + Android without cut-off screens
   ========================================================================= */

/* Keep the input bar clear of curved edges / gesture bars */
.input-bar-wrap { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
.sidebar-footer { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
.topbar { padding-top: calc(10px + env(safe-area-inset-top, 0px)); }
.sidebar-header { padding-top: calc(14px + env(safe-area-inset-top, 0px)); }

/* Model / thinking selectors must never push the topbar wider than the phone */
.topbar-center { min-width: 0; display: flex; gap: 8px; flex-wrap: nowrap; justify-content: center; flex: 1; }
.selector { min-width: 0; }
.selector-btn { max-width: 100%; }
.selector-btn > span:first-child {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
  display: inline-flex; align-items: center; gap: 5px;
}

@media (max-width: 480px) {
  .selector-btn { padding: 7px 9px; font-size: 12px; gap: 4px; }
  .selector-btn > span:first-child { max-width: 33vw; }
  .topbar { gap: 6px; padding-left: 10px; padding-right: 10px; }
  .chat-inner { padding-left: 12px; padding-right: 12px; }
  .input-bar-wrap { padding-left: 10px; padding-right: 10px; }
  .msg-col { max-width: 92%; }
  .suggestion-row { flex-direction: column; align-items: stretch; }
  .empty-state h2 { font-size: 20px; }
  .modal { max-height: calc(100dvh - 32px); overflow-y: auto; }
}

/* Very short screens (landscape phones) — let the chat still scroll fine */
@media (max-height: 480px) {
  .empty-state img { display: none; }
}

/* Chat list items: rename / delete / save actions */
.chat-item { position: relative; }
.chat-item .chat-actions { display: flex; gap: 2px; opacity: 0; transition: opacity 0.12s ease; }
.chat-item:hover .chat-actions, .chat-item.active .chat-actions { opacity: 0.85; }
@media (hover: none) { .chat-item .chat-actions { opacity: 0.6; } }
.chat-item .rename-input {
  flex: 1; min-width: 0; background: var(--panel-2); border: 1px solid var(--accent-1);
  border-radius: 8px; color: var(--text-primary); font-size: 13px; padding: 4px 8px; outline: none;
}

/* Date group labels inside Recent chats */
.sidebar-subsection {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-muted); padding: 10px 14px 4px; opacity: 0.8;
}

/* Pricing comparison table scrolls sideways on phones instead of clipping */
.compare-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare-table { min-width: 560px; }

/* ---- Typewriter caret for streaming AI replies ---- */
.type-caret {
  display: inline-block; width: 8px; height: 1em; margin-left: 2px;
  background: var(--accent-1, #4c7fff); border-radius: 2px;
  vertical-align: text-bottom; animation: caret-blink 0.85s steps(1) infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .type-caret { animation: none; } }

/* =========================================================================
   DESIGN REFRESH — "Zallixor Aurora"
   One signature idea: a living aurora field behind the whole app — the same
   nebula the constellation logo lives in. Everything else stays quiet:
   glass panels, soft depth, one gradient used with restraint.
   ========================================================================= */

[data-theme="dark"] {
  --bg: #05070f;
  --bg-elevated: #0a0e1a;
  --panel: rgba(148, 163, 216, 0.055);
  --panel-2: rgba(148, 163, 216, 0.10);
  --border: rgba(164, 180, 234, 0.10);
  --border-strong: rgba(164, 180, 234, 0.20);
  --text-primary: #eef1fb;
  --text-secondary: #a3abc6;
  --text-muted: #6b7390;
  --accent-1: #5b8cff;
  --accent-2: #a06bff;
  --accent-3: #33d6e8;
  --accent-gradient: linear-gradient(135deg, #5b8cff, #a06bff 60%, #d16bff);
  --shadow: 0 12px 40px rgba(2, 4, 12, 0.55);
  --glass-bg: rgba(9, 13, 26, 0.66);
  --aurora-a: rgba(91, 140, 255, 0.16);
  --aurora-b: rgba(160, 107, 255, 0.13);
  --aurora-c: rgba(51, 214, 232, 0.07);
}

[data-theme="light"] {
  --bg: #f3f4fb;
  --bg-elevated: #fbfcff;
  --panel: rgba(255, 255, 255, 0.85);
  --panel-2: rgba(96, 110, 180, 0.08);
  --border: rgba(28, 34, 68, 0.10);
  --border-strong: rgba(28, 34, 68, 0.18);
  --text-primary: #171b2e;
  --text-secondary: #4b5273;
  --text-muted: #828aa6;
  --accent-1: #3d6bec;
  --accent-2: #8250e8;
  --accent-3: #0aa8bd;
  --accent-gradient: linear-gradient(135deg, #3d6bec, #8250e8 60%, #b14fe0);
  --shadow: 0 12px 36px rgba(38, 46, 90, 0.12);
  --glass-bg: rgba(251, 252, 255, 0.78);
  --aurora-a: rgba(61, 107, 236, 0.10);
  --aurora-b: rgba(130, 80, 232, 0.08);
  --aurora-c: rgba(10, 168, 189, 0.06);
}

/* ---- The aurora field (signature) ---- */
body::before {
  content: "";
  position: fixed;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(38% 32% at 18% 12%, var(--aurora-a), transparent 70%),
    radial-gradient(34% 30% at 85% 20%, var(--aurora-b), transparent 70%),
    radial-gradient(30% 26% at 70% 88%, var(--aurora-c), transparent 70%);
  animation: aurora-drift 26s ease-in-out infinite alternate;
}
@keyframes aurora-drift {
  from { transform: translate3d(-1.5%, -1%, 0) scale(1); }
  to   { transform: translate3d(1.5%, 1.5%, 0) scale(1.06); }
}
.app-shell, .auth-shell, .gate-shell, .pricing-shell, body > .topbar { position: relative; z-index: 1; }

/* ---- Glass surfaces ---- */
.sidebar {
  background: var(--glass-bg);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border-right: 1px solid var(--border);
}
.topbar {
  background: var(--glass-bg);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border-bottom: 1px solid var(--border);
}
.modal, .toast {
  background: var(--glass-bg);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
}

/* ---- Brand ---- */
.brand span {
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* ---- Buttons ---- */
.btn-primary {
  background: var(--accent-gradient);
  border: none;
  box-shadow: 0 4px 18px rgba(91, 140, 255, 0.28);
  transition: box-shadow 0.2s ease, transform 0.15s ease, filter 0.2s ease;
}
.btn-primary:hover { box-shadow: 0 6px 24px rgba(122, 116, 255, 0.42); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0) scale(0.99); }

/* ---- Selector pills in the topbar ---- */
.selector-btn {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 999px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.selector-btn:hover { border-color: var(--border-strong); background: var(--panel-2); }
.selector-menu {
  border-radius: 16px;
  box-shadow: var(--shadow), 0 0 0 1px var(--border);
  overflow: hidden;
}
.selector-option.locked { opacity: 0.55; }
.selector-option .check { color: var(--accent-1); }

/* ---- Messages ---- */
.msg-avatar.ai {
  background:
    linear-gradient(var(--bg-elevated), var(--bg-elevated)) padding-box,
    var(--accent-gradient) border-box;
  border: 1.5px solid transparent;
  color: var(--text-primary);
  font-weight: 700;
  box-shadow: 0 0 14px rgba(122, 116, 255, 0.20);
}
.msg-row { animation: msg-in 0.28s ease both; }
@keyframes msg-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.msg-row.user .msg-bubble {
  background: linear-gradient(135deg, rgba(91, 140, 255, 0.16), rgba(160, 107, 255, 0.14));
  border: 1px solid rgba(122, 116, 255, 0.22);
  border-radius: 18px 18px 4px 18px;
  padding: 11px 15px;
}
[data-theme="light"] .msg-row.user .msg-bubble {
  background: linear-gradient(135deg, rgba(61, 107, 236, 0.10), rgba(130, 80, 232, 0.09));
  border-color: rgba(61, 107, 236, 0.20);
}
.msg-row.ai .msg-bubble {
  border-left: 2px solid transparent;
  border-image: linear-gradient(180deg, var(--accent-1), transparent 85%) 1;
  padding-left: 14px;
}
.msg-bubble .code-block { border-radius: 14px; overflow: hidden; border: 1px solid var(--border); }

/* ---- Input bar ---- */
.input-bar {
  background: var(--glass-bg);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid var(--border);
  border-radius: 22px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.input-bar:focus-within {
  border-color: rgba(122, 116, 255, 0.45);
  box-shadow: 0 0 0 3px rgba(122, 116, 255, 0.12), 0 10px 34px rgba(2, 4, 12, 0.35);
}
.send-btn {
  background: var(--accent-gradient);
  border-radius: 999px;
  box-shadow: 0 3px 14px rgba(122, 116, 255, 0.35);
  transition: transform 0.12s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.send-btn:not(:disabled):hover { box-shadow: 0 5px 20px rgba(122, 116, 255, 0.5); }

/* ---- Empty state ---- */
.empty-state img {
  width: 60px; height: 60px;
  filter: drop-shadow(0 0 22px rgba(122, 116, 255, 0.55));
  animation: logo-float 5s ease-in-out infinite;
}
@keyframes logo-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
.empty-state h2 { font-size: 26px; letter-spacing: -0.02em; }
.suggestion-chip {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 999px;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.suggestion-chip:hover {
  transform: translateY(-2px);
  border-color: rgba(122, 116, 255, 0.45);
  background: var(--panel-2);
}

/* ---- Sidebar items ---- */
.chat-item { border-radius: 12px; transition: background 0.12s ease; }
.chat-item.active {
  background: linear-gradient(90deg, rgba(91, 140, 255, 0.14), transparent);
  box-shadow: inset 2px 0 0 var(--accent-1);
}
.tool-item { border-radius: 12px; }
.tool-item:hover { background: var(--panel-2); }
.sidebar-section { letter-spacing: 0.09em; }

/* ---- Usage bar ---- */
.usage-bar-fill { background: var(--accent-gradient); box-shadow: 0 0 8px rgba(122, 116, 255, 0.5); }

/* ---- Pricing ---- */
.plan-card { border-radius: 20px; transition: transform 0.18s ease, box-shadow 0.18s ease; }
.plan-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.plan-card.featured {
  background:
    linear-gradient(var(--bg-elevated), var(--bg-elevated)) padding-box,
    var(--accent-gradient) border-box;
  border: 1.5px solid transparent;
  box-shadow: 0 14px 44px rgba(122, 116, 255, 0.22);
}
.plan-card .price { font-family: "Space Grotesk", sans-serif; }

/* ---- Auth hero ---- */
.auth-hero h1 { font-size: 42px; letter-spacing: -0.025em; }
.hero-tags .pill.accent { background: var(--accent-gradient); color: #fff; border: none; }

/* ---- Scrollbar / caret / toast polish ---- */
::-webkit-scrollbar { width: 6px; height: 6px; }
.type-caret { background: var(--accent-gradient); }
.toast { border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); }

/* Aurora sits behind everything; never animate for reduced-motion users */
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
  .empty-state img { animation: none; }
}