/* SUNy terminal theme */

:root {
  --bg: #020504;
  --bg-elevated: #07100b;
  --surface: #07110c;
  --surface-2: #0b1610;
  --border: #173224;
  --border-strong: #21573b;
  --accent: #29ff7a;
  --accent-hover: #18d964;
  --success: #29ff7a;
  --warning: #d4ff4f;
  --error: #ff6b6b;
  --text-primary: #d9ffe7;
  --text-secondary: #89b59d;
  --text-muted: #50715f;
  --shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
  --radius: 6px;
  --radius-sm: 4px;
  --font-ui: 'IBM Plex Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji';
  
  /* RGB primitives for rgba() opacities */
  --error-rgb: 255, 107, 107;
  --success-rgb: 41, 255, 122;
  --accent-rgb: 41, 255, 122;
  --warning-rgb: 212, 255, 79;
  --brand-rgb: 108, 99, 255;
  --info-rgb: 59, 130, 246;
  --black-rgb: 0, 0, 0;
}

body.theme-matrix {
  --font-ui: 'IBM Plex Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji';
}

/* SUNY mode: matrix DNA with warm yellow/orange "sun" accents. */
body.theme-suny,
html.theme-suny {
  --bg: #120c04;
  --bg-elevated: #1a1207;
  --surface: #201608;
  --surface-2: #271b0a;
  --border: #4a3214;
  --border-strong: #7a4e1b;
  --accent: #ffb833;
  --accent-hover: #ffd15f;
  --success: #ffb833;
  --warning: #ffd666;
  --error: #ff7a59;
  --text-primary: #ffe8b8;
  --text-secondary: #d5b173;
  --text-muted: #a57f4a;
  --shadow: 0 18px 60px rgba(0, 0, 0, 0.52);
  --font-ui: 'IBM Plex Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji';

  /* RGB primitives for rgba() opacities */
  --error-rgb: 255, 122, 89;
  --success-rgb: 255, 184, 51;
  --accent-rgb: 255, 184, 51;
  --warning-rgb: 255, 214, 102;
  --brand-rgb: 255, 150, 50;
  --info-rgb: 59, 130, 246;
  --black-rgb: 0, 0, 0;
}

/* Pro mode: clean and modern with cool blue accents. */
body.theme-pro,
html.theme-pro {
  color-scheme: light;
  --bg: #eef3ff;
  --bg-elevated: #ffffff;
  --surface: #fbfcff;
  --surface-2: #f3f7ff;
  --border: #d1dbf0;
  --border-strong: #8ea8e3;
  --accent: #245dff;
  --accent-hover: #1f4fd0;
  --success: #0a8d67;
  --warning: #946b00;
  --error: #b42318;
  --text-primary: #0d1730;
  --text-secondary: #304779;
  --text-muted: #5d7198;
  --shadow: 0 18px 42px rgba(28, 44, 92, 0.10);
  --font-ui: 'Manrope', 'Plus Jakarta Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

  /* RGB primitives for rgba() opacities */
  --error-rgb: 180, 35, 24;
  --success-rgb: 10, 141, 103;
  --accent-rgb: 36, 93, 255;
  --warning-rgb: 148, 107, 0;
  --brand-rgb: 36, 93, 255;
  --info-rgb: 36, 93, 255;
  --black-rgb: 13, 23, 48;
}

/* ──────────────────────────────────────────────────────────────────────────
   LEGACY TOKEN ALIASES

   A sweep of every `var(--x)` in the renderer against every `--x:` declared
   here found 38 variable names in use that are defined NOWHERE — 86 bare
   references with no fallback. An undefined custom property resolves to
   nothing, so each one silently rendered as transparent, as unstyled, or as
   the inherited value.

   That is not cosmetic. The Project Guardian and Reen Review switches drew
   their off-state track with `background: var(--bg-modifier-hover)`, which
   does not exist, so an off switch was an invisible pill on the panel
   background — no border, no track, nothing to click.

   These names came from different eras of the codebase (--text vs
   --text-primary, --danger vs --error, --bg-secondary vs --surface). Rather
   than rewrite 86 call sites, map the old names onto the real tokens.

   Declared on every selector that declares the base tokens, NOT once on
   :root. Themes are applied as body.theme-X / html.theme-X, so an alias
   declared only on :root would resolve against :root's values and every
   themed element would get the default theme's colours.
   ────────────────────────────────────────────────────────────────────────── */
:root,
body.theme-matrix,
body.theme-suny, html.theme-suny,
body.theme-pro, html.theme-pro {
  /* surfaces */
  --bg-primary: var(--bg);
  --bg-secondary: var(--surface);
  --bg-tertiary: var(--surface-2);
  --bg-card: var(--surface);
  --card-bg: var(--surface);
  --bg-surface: var(--surface);
  --bg-layer1: var(--surface-2);
  --bg-input: var(--surface-2);
  --input-bg: var(--surface-2);
  --surface-elevated: var(--bg-elevated);
  --surface-sunken: var(--surface-2);
  --surface-hover: var(--surface-2);
  --hover: var(--surface-2);
  --bg-modifier-hover: var(--surface-2);

  /* text */
  --text: var(--text-primary);
  --text-color: var(--text-primary);
  --text-soft: var(--text-secondary);
  --text-warning: var(--warning);

  /* borders */
  --border-color: var(--border);
  --border-light: var(--border);

  /* accent / status */
  --brand: var(--accent);
  --primary: var(--accent);
  --primary-rgb: var(--accent-rgb);
  --accent-dim: color-mix(in srgb, var(--accent) 55%, transparent 45%);
  --accent-bg: rgba(var(--accent-rgb), 0.12);
  --danger: var(--error);
  --danger-bg: rgba(var(--error-rgb), 0.12);
  --color-error: var(--error);
  --info: rgb(var(--info-rgb));
  --info-bg: rgba(var(--info-rgb), 0.12);
  --success-bg: rgba(var(--success-rgb), 0.12);
  --success-alpha: rgba(var(--success-rgb), 0.18);
  --warning-bg: rgba(var(--warning-rgb), 0.12);

  /* misc */
  --radius-md: var(--radius);
  --font-sans: var(--font-ui);
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}

/* The rgb triplets cannot be derived from a hex custom property in CSS, so
   they are spelled out once per theme. */
:root, body.theme-matrix { --bg-card-rgb: 7, 17, 12;   --border-rgb: 23, 50, 36; }
body.theme-suny, html.theme-suny { --bg-card-rgb: 32, 22, 8;  --border-rgb: 74, 50, 20; }
body.theme-pro,  html.theme-pro  { --bg-card-rgb: 251, 252, 255; --border-rgb: 209, 219, 240; }



*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: text !important;
  -webkit-user-select: text !important;
}

html, body, #root {
  height: 100%;
  width: 100%;
  user-select: text !important;
  -webkit-user-select: text !important;
}

body {
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  position: relative;
  overflow-x: hidden;
  user-select: text;
  -webkit-user-select: text;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at top, rgba(41, 255, 122, 0.10), transparent 35%),
    radial-gradient(circle at bottom right, rgba(41, 255, 122, 0.05), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.18));
  z-index: 0;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 100% 4px;
  opacity: 0.12;
  mix-blend-mode: screen;
  z-index: 0;
}

body.theme-pro::before,
html.theme-pro body::before {
  background:
    radial-gradient(circle at top left, rgba(47, 109, 255, 0.12), transparent 40%),
    radial-gradient(circle at bottom right, rgba(20, 189, 165, 0.10), transparent 38%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.08));
}

body.theme-suny::before,
html.theme-suny body::before {
  background:
    radial-gradient(circle at top, rgba(255, 184, 51, 0.16), transparent 35%),
    radial-gradient(circle at bottom right, rgba(255, 121, 58, 0.11), transparent 33%),
    linear-gradient(180deg, rgba(255, 210, 120, 0.03), transparent 20%, transparent 80%, rgba(0, 0, 0, 0.22));
}

body.theme-pro::after,
html.theme-pro body::after {
  display: none;
}

body.theme-suny::after,
html.theme-suny body::after {
  background-image: linear-gradient(rgba(255, 184, 51, 0.05) 1px, transparent 1px);
  background-size: 100% 6px;
  opacity: 0.18;
  mix-blend-mode: screen;
}

body.theme-pro .card,
html.theme-pro .card,
body.theme-pro .modal,
html.theme-pro .modal {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 248, 255, 0.98)) !important;
  border-color: var(--border) !important;
  box-shadow: 0 18px 42px rgba(28, 44, 92, 0.10) !important;
  color: var(--text-primary);
}

body.theme-pro .btn-primary,
html.theme-pro .btn-primary {
  background: linear-gradient(180deg, rgba(40, 96, 255, 0.98), rgba(24, 72, 214, 0.98)) !important;
  color: #ffffff !important;
  border-color: rgba(36, 93, 255, 0.95) !important;
  box-shadow: 0 10px 24px rgba(36, 93, 255, 0.18) !important;
}

body.theme-pro .btn-secondary,
html.theme-pro .btn-secondary,
body.theme-pro .btn-icon,
html.theme-pro .btn-icon {
  background: rgba(255, 255, 255, 0.92);
  color: var(--text-primary);
  border-color: var(--border);
}

body.theme-pro .btn-secondary:hover,
html.theme-pro .btn-secondary:hover,
body.theme-pro .btn-icon:hover,
html.theme-pro .btn-icon:hover {
  background: rgba(245, 248, 255, 0.98) !important;
  border-color: var(--border-strong) !important;
}

body.theme-pro .btn-danger,
html.theme-pro .btn-danger {
  background: rgba(255, 255, 255, 0.94) !important;
  color: var(--error) !important;
  border-color: rgba(180, 35, 24, 0.45) !important;
}

body.theme-pro input,
html.theme-pro input,
body.theme-pro textarea,
html.theme-pro textarea,
body.theme-pro select,
html.theme-pro select {
  background: rgba(255, 255, 255, 0.98) !important;
  color: var(--text-primary) !important;
  border-color: var(--border) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

body.theme-pro input::placeholder,
html.theme-pro input::placeholder,
body.theme-pro textarea::placeholder,
html.theme-pro textarea::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

body.theme-pro .badge-green,
html.theme-pro .badge-green {
  background: rgba(10, 141, 103, 0.12) !important;
  color: #0a6a52 !important;
  border-color: rgba(10, 141, 103, 0.22) !important;
}

body.theme-pro .badge-amber,
html.theme-pro .badge-amber {
  background: rgba(148, 107, 0, 0.12) !important;
  color: #8a6300 !important;
  border-color: rgba(148, 107, 0, 0.22) !important;
}

body.theme-pro .badge-red,
html.theme-pro .badge-red {
  background: rgba(180, 35, 24, 0.12) !important;
  color: #a61e14 !important;
  border-color: rgba(180, 35, 24, 0.22) !important;
}

body.theme-pro .badge-purple,
html.theme-pro .badge-purple {
  background: rgba(36, 93, 255, 0.12) !important;
  color: #245dff !important;
  border-color: rgba(36, 93, 255, 0.22) !important;
}

body.theme-pro .modal-overlay,
html.theme-pro .modal-overlay {
  background: rgba(10, 18, 34, 0.14);
}

body.theme-pro code,
html.theme-pro code,
body.theme-pro pre,
html.theme-pro pre {
  color: var(--text-primary);
}

body.theme-pro a,
html.theme-pro a {
  color: var(--accent);
}

#root {
  position: relative;
  z-index: 1;
}

/* Scrollbars */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* Focus ring */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

::selection {
  background: rgba(41, 255, 122, 0.22);
  color: var(--text-primary);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s, transform 0.12s, opacity 0.15s;
  font-family: inherit;
}
.btn-primary { background: linear-gradient(180deg, rgba(41,255,122,0.95), rgba(18,173,78,0.95)); color: #041008; border-color: rgba(41,255,122,0.8); box-shadow: 0 0 0 1px rgba(41,255,122,0.12), 0 8px 24px rgba(8, 35, 20, 0.28); }
.btn-primary:hover { background: linear-gradient(180deg, rgba(70,255,146,0.98), rgba(24,217,100,0.98)); transform: translateY(-1px); }

body.theme-suny .btn-primary,
html.theme-suny .btn-primary {
  background: linear-gradient(180deg, rgba(255, 188, 71, 0.98), rgba(255, 138, 48, 0.98));
  color: #2f1402;
  border-color: rgba(255, 188, 71, 0.9);
  box-shadow: 0 0 0 1px rgba(255, 190, 76, 0.20), 0 10px 24px rgba(52, 24, 6, 0.38);
}

body.theme-suny .btn-primary:hover,
html.theme-suny .btn-primary:hover {
  background: linear-gradient(180deg, rgba(255, 208, 108, 0.99), rgba(255, 158, 66, 0.99));
}

body.theme-suny .badge-purple,
html.theme-suny .badge-purple {
  background: rgba(255, 184, 51, 0.12) !important;
  color: #ffcf78 !important;
  border-color: rgba(255, 184, 51, 0.25) !important;
}

body.theme-suny ::selection,
html.theme-suny ::selection {
  background: rgba(255, 184, 51, 0.26);
  color: #fff2d2;
}
.btn-secondary { background: rgba(8, 17, 12, 0.92); color: var(--text-primary); border-color: var(--border); box-shadow: inset 0 1px 0 rgba(255,255,255,0.02); }
.btn-secondary:hover { background: rgba(13, 28, 20, 0.96); border-color: var(--border-strong); transform: translateY(-1px); }
.btn-danger { background: transparent; color: var(--error); border: 1px solid var(--error); }
.btn-danger:hover { background: var(--error); color: #fff; transform: translateY(-1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-sm { padding: 4px 10px; font-size: 12px; }
.btn-icon { padding: 8px; }

/* Inputs */
input, textarea, select {
  background: rgba(8, 17, 12, 0.88);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 14px;
  padding: 8px 12px;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  width: 100%;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(41, 255, 122, 0.12);
  background: rgba(9, 22, 15, 0.96);
}
input::placeholder, textarea::placeholder { color: var(--text-muted); opacity: 0.95; }

/* Cards */
.card {
  background: linear-gradient(180deg, rgba(10, 21, 15, 0.96), rgba(6, 13, 9, 0.98));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
}

/* Tables */
table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px 14px; text-align: start; }
th { font-weight: 600; color: var(--text-secondary); font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em; border-bottom: 1px solid var(--border); }
td { border-bottom: 1px solid var(--border); color: var(--text-primary); }
tr:last-child td { border-bottom: none; }
tr:hover td { background: rgba(41,255,122,0.04); }

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.badge-green { background: rgba(41,255,122,0.12); color: var(--success); border: 1px solid rgba(41,255,122,0.18); }
.badge-amber { background: rgba(212,255,79,0.12); color: var(--warning); border: 1px solid rgba(212,255,79,0.18); }
.badge-red { background: rgba(255,107,107,0.12); color: var(--error); border: 1px solid rgba(255,107,107,0.18); }
.badge-purple { background: rgba(41,255,122,0.12); color: var(--accent); border: 1px solid rgba(41,255,122,0.18); }

/* Modal overlay */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
}
.modal {
  background: linear-gradient(180deg, rgba(8, 17, 12, 0.98), rgba(5, 12, 8, 0.98));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow);
}
.modal-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 20px;
}

/* Toggle switch */
.toggle {
  appearance: none;
  width: 40px;
  height: 22px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--border) 72%, white 28%);
  border: 1px solid var(--border-strong);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  cursor: pointer;
  position: relative;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
  flex-shrink: 0;
}
.toggle:checked {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent 78%);
}
.toggle::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  transition: left 0.2s, background 0.2s;
}
.toggle:checked::after {
  left: 21px;
  background: #ffffff;
}

/* Balance pulse animation (low balance) */
@keyframes micPulse { 0% { box-shadow: 0 0 0 0 rgba(var(--error-rgb), 0.6); } 70% { box-shadow: 0 0 0 12px rgba(var(--error-rgb), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--error-rgb), 0); } }
@keyframes pulseAmber {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}
.balance-low { animation: pulseAmber 2s ease-in-out infinite; color: var(--warning) !important; }
.balance-zero { color: var(--error) !important; }

/* Terminal surfaces */
.card, .modal, .btn, input, textarea, select {
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.modal {
  backdrop-filter: blur(10px);
}

.card, .modal {
  position: relative;
  overflow: hidden;
}

.card::before, .modal::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(120deg, rgba(41,255,122,0.04), transparent 28%, transparent 72%, rgba(41,255,122,0.03));
}

/* Neutralize overly playful colors in some headings */
h1, h2, h3, h4, h5, h6 {
  letter-spacing: -0.02em;
}

/* Chat message animations */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.message-appear { animation: fadeInUp 0.2s ease forwards; }

/* Per-bubble "Summarize" mini window — soft backdrop fade + bouncy pop-in */
@keyframes summaryBackdropFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes summaryPopIn {
  0% { opacity: 0; transform: scale(0.85) translateY(10px); }
  60% { opacity: 1; transform: scale(1.03) translateY(-2px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.summary-modal-backdrop { animation: summaryBackdropFade 0.15s ease forwards; }
.summary-modal-card { animation: summaryPopIn 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }

/* Active SUNy bubble — pulsing content glow (inner) */
@keyframes bubbleGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(41,255,122,0.0); }
  50% { box-shadow: 0 0 10px 3px rgba(41,255,122,0.22), 0 0 20px 6px rgba(41,255,122,0.08); }
}
.suny-bubble-active {
  animation: bubbleGlow 1.6s ease-in-out infinite;
}

/* LED running strip — animated border that travels around the bubble */
@keyframes ledRun {
  0% {
    border-color: var(--accent) transparent transparent transparent;
    box-shadow:
       0 -2px 8px -2px rgba(41,255,122,0.45),
       2px 0  8px -2px transparent,
       0  2px 8px -2px transparent,
      -2px 0  8px -2px transparent;
  }
  25% {
    border-color: transparent var(--accent) transparent transparent;
    box-shadow:
       0 -2px 8px -2px transparent,
       2px 0  8px -2px rgba(41,255,122,0.45),
       0  2px 8px -2px transparent,
      -2px 0  8px -2px transparent;
  }
  50% {
    border-color: transparent transparent var(--accent) transparent;
    box-shadow:
       0 -2px 8px -2px transparent,
       2px 0  8px -2px transparent,
       0  2px 8px -2px rgba(41,255,122,0.45),
      -2px 0  8px -2px transparent;
  }
  75% {
    border-color: transparent transparent transparent var(--accent);
    box-shadow:
       0 -2px 8px -2px transparent,
       2px 0  8px -2px transparent,
       0  2px 8px -2px transparent,
      -2px 0  8px -2px rgba(41,255,122,0.45);
  }
  100% {
    border-color: var(--accent) transparent transparent transparent;
    box-shadow:
       0 -2px 8px -2px rgba(41,255,122,0.45),
       2px 0  8px -2px transparent,
       0  2px 8px -2px transparent,
      -2px 0  8px -2px transparent;
  }
}
.suny-bubble-led {
  border: 2px solid transparent;
  border-radius: 4px 16px 16px 16px;
  animation: ledRun 1.8s linear infinite;
}

/* Activity pulse: same LED border, faster/brighter while a tool call is
   actually running (vs. the slower idle "thinking" pace above) - real,
   granular feedback instead of one generic loading glow. */
.suny-bubble-led-tool-active {
  border: 2px solid transparent;
  border-radius: 4px 16px 16px 16px;
  animation: ledRun 0.9s linear infinite;
}

/* Success celebration badge - only ever rendered when NarratedMessage.tsx has
   confirmed a VERIFIABLE completion signal (proofRun.status, not the model's
   own text); see that file for the full gating logic. Two tiers: a small
   quiet checkmark for "real work finished cleanly", and a slightly bigger
   one with a few radiating sparks for "an automated test/lint check came
   back green". Deliberately understated, not a full-screen celebration -
   a false positive here should never feel like SUNy is throwing a parade
   over a result the user isn't happy with. */
@keyframes celebrationPop {
  0% { opacity: 0; transform: scale(0.4) rotate(-15deg); }
  55% { opacity: 1; transform: scale(1.15) rotate(4deg); }
  75% { transform: scale(0.95) rotate(-2deg); }
  100% { opacity: 0; transform: scale(1) rotate(0deg); }
}
.celebration-badge {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #10b981, #34d399);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18), 0 4px 10px rgba(16, 185, 129, 0.35);
  animation: celebrationPop 1.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.celebration-badge-verified {
  width: 26px;
  height: 26px;
  animation-duration: 1.8s;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.22), 0 4px 14px rgba(16, 185, 129, 0.45);
}
.celebration-check {
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
}
.celebration-badge-verified .celebration-check { font-size: 15px; }

@keyframes celebrationSpark {
  0% { opacity: 1; transform: rotate(calc(var(--i) * 60deg)) translateY(0) scale(1); }
  100% { opacity: 0; transform: rotate(calc(var(--i) * 60deg)) translateY(-18px) scale(0.4); }
}
.celebration-sparks { position: absolute; inset: 0; }
.celebration-spark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #34d399;
  margin: -2px 0 0 -2px;
  animation: celebrationSpark 0.9s ease-out forwards;
}

/* Landing page card glow */
@keyframes cardGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(41,255,122,0.0); }
  50% { box-shadow: 0 0 16px 4px rgba(41,255,122,0.15), 0 0 32px 8px rgba(41,255,122,0.06); }
}
.card-glow { animation: cardGlow 3s ease-in-out infinite; }

/* Floating orb pulse */
@keyframes orbFloat {
  0%, 100% { transform: translate(0,0) scale(1); opacity: 0.25; }
  33% { transform: translate(20px,-30px) scale(1.1); opacity: 0.35; }
  66% { transform: translate(-15px,15px) scale(0.95); opacity: 0.2; }
}
.orb { animation: orbFloat 8s ease-in-out infinite; }

/* Pulse glow for RATE REPLY text */
@keyframes pulse-glow {
  0%, 100% { opacity: 0.7; text-shadow: 0 0 4px #fbbf24, 0 0 8px #fbbf2480; }
  50% { opacity: 1; text-shadow: 0 0 8px #fbbf24, 0 0 16px #fbbf24, 0 0 24px #fbbf2480; }
}

/* Status dot pulse (used in thinking status indicator) */
@keyframes statusDotPulse {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
}
.dot-pulse { animation: statusDotPulse 1.2s ease-in-out infinite; }

/* Spin (used by terminal button loader) */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.suny-spin { animation: spin 1.6s linear infinite; }

/* Thinking dots */
@keyframes dotPulse {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1); }
}
.dot-1 { animation: dotPulse 1.2s ease-in-out infinite 0s; }
.dot-2 { animation: dotPulse 1.2s ease-in-out infinite 0.2s; }
.dot-3 { animation: dotPulse 1.2s ease-in-out infinite 0.4s; }

/* Page transitions */
.page-enter { animation: fadeInUp 0.15s ease forwards; }

/* RTL support */
[dir="rtl"] { font-family: 'Noto Sans Arabic', 'Inter', sans-serif; }

/* ── Responsive layout ────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .modal {
    max-width: calc(100vw - 24px);
  }

  .btn {
    text-transform: none;
  }
}

@media (max-width: 768px) {
  /* General */
  body {
    font-size: 13.5px;
  }

  .card {
    padding: 12px !important;
  }

  .btn {
    min-height: 38px;
  }

  /* Sidebar collapses to overlay drawer */
  .sidebar {
    position: fixed !important;
    insetInlineStart: -100% !important;
    top: 0;
    height: 100dvh;
    width: 80vw !important;
    max-width: 300px;
    z-index: 200;
    transition: left 0.25s ease;
    box-shadow: 4px 0 24px rgba(0,0,0,0.4);
    background: var(--bg) !important;
  }

  .sidebar.sidebar-open {
    insetInlineStart: 0 !important;
  }

  .sidebar-overlay {
    display: block !important;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 199;
  }

  .sidebar-toggle-btn {
    display: inline-flex !important;
  }

  /* Chat shell */
  .chat-root {
    height: 100dvh !important;
  }

  .chat-main {
    min-width: 0 !important;
  }

  .chat-messages-area {
    padding: 10px 10px 8px !important;
  }

  .chat-input-area {
    padding: 8px !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    align-items: center !important;
  }

  .chat-input-area textarea {
    min-height: 78px;
    font-size: 16px !important;
    min-width: 100% !important;
    flex-basis: 100% !important;
  }

  /* Top bar */
  .topbar {
    min-height: 48px !important;
    height: auto !important;
    padding: 6px 8px !important;
    gap: 6px !important;
    flex-wrap: wrap;
    align-items: center !important;
  }

  .topbar > div:nth-child(1) {
    min-width: 0;
    flex: 1 1 auto !important;
  }

  /* Balances — now child 2, push below mode switcher on mobile */
  .topbar > div:nth-child(2) {
    order: 3;
    width: 100%;
    justify-content: center;
    padding-bottom: 4px;
  }

  /* Mode switcher — now child 3, scrollable on mobile */
  .topbar > div:nth-child(3) {
    flex: 0 0 auto !important;
    max-width: 56%;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: thin;
  }

  /* Balance pills more compact on mobile */
  .topbar-balances {
    gap: 4px !important;
  }
  .topbar-balances > div {
    padding: 3px 8px !important;
    font-size: 11px !important;
  }

  .topbar > div:nth-child(3) > * {
    flex-shrink: 0;
  }

  .topbar .suny-logo {
    font-size: 14px !important;
  }

  .topbar .topbar-tagline,
  .topbar .topbar-username {
    display: none !important;
  }

  /* Modals as bottom sheets */
  .modal-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  .modal-overlay .modal {
    width: 100vw !important;
    max-width: 100vw !important;
    min-height: 46dvh;
    border-radius: 14px 14px 0 0 !important;
    position: fixed !important;
    bottom: 0 !important;
    insetInlineStart: 0 !important;
    top: auto !important;
    margin: 0 !important;
    padding: 18px 14px !important;
  }

  /* Admin panel */
  .admin-layout .admin-sidebar {
    position: fixed !important;
    insetInlineStart: -100% !important;
    top: 0;
    height: 100dvh;
    width: 75vw !important;
    max-width: 280px;
    z-index: 200;
    transition: left 0.25s ease;
    background: var(--bg);
  }

  .admin-layout .admin-sidebar.admin-sidebar-open {
    insetInlineStart: 0 !important;
  }

  .admin-layout .admin-content {
    padding: 14px !important;
    margin-insetInlineStart: 0 !important;
  }

  .admin-layout .admin-hamburger {
    display: inline-flex !important;
  }

  /* Tables */
  .table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .table-responsive table {
    min-width: 560px;
  }

  /* Login and plans helpers */
  .login-hero-logo {
    width: 196px !important;
    height: 196px !important;
  }

  .pricing-hero h1 {
    font-size: 30px !important;
  }

  .pricing-plan-card {
    min-width: 0 !important;
    max-width: none !important;
  }

  .balance-badge-text {
    display: none !important;
  }

  /* Page-level content padding reduction */
  .chat-main > div:first-child {
    padding-insetInlineStart: 12px !important;
    padding-insetInlineEnd: 12px !important;
  }

  /* Mode cards: 4-column → 2-column on mobile */
  .mode-cards-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Topbar right icons: prevent overflow */
  .topbar-actions {
    gap: 4px !important;
  }
  .topbar-actions .btn {
    padding: 6px 8px !important;
    font-size: 11px !important;
  }
}

@keyframes skeleton-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--border) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite linear;
  border-radius: var(--radius-sm);
}

.toast {
  position: fixed;
  bottom: 24px;
  insetInlineEnd: 24px;
  padding: 12px 20px;
  background: var(--surface-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 9999;
  animation: fadeInUp 0.3s ease-out;
}
.toast-success { border-insetInlineStart: 4px solid var(--success); }
.toast-error { border-insetInlineStart: 4px solid var(--error); }
.toast-info { border-insetInlineStart: 4px solid var(--accent); }

/* ── Modern Sidebar UI Enhancements ── */
.sidebar {
  background: var(--bg-elevated) !important;
  border-insetInlineEnd: 1px solid var(--border);
  transition: width 0.2s ease, background-color 0.2s ease;
  font-family: var(--font-ui);
}

.sidebar-section-header {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}
.sidebar-section-header:hover {
  opacity: 1;
}

/* Round 96: was a 6px-radius card with an accent-tinted fill AND an accent
   border, which made every project look like a product tile. A list row should
   be a row: no border, barely any radius, one neutral selection colour. */
.sidebar-project-item {
  margin: 1px 6px;
  border-radius: 4px;
  transition: background 0.12s ease;
  border: none;
  position: relative;
}
.sidebar-project-item:hover {
  background: rgba(127, 127, 127, 0.09);
}
.sidebar-project-item.active {
  background: rgba(127, 127, 127, 0.16) !important;
}
.sidebar-project-item.active .project-title-container {
  font-weight: 600;
}

.sidebar-project-item .action-buttons {
  opacity: 0;
  transition: opacity 0.2s ease;
  position: absolute;
  right: 8px;
  background: var(--surface);
  box-shadow: -8px 0 8px var(--surface);
  padding-left: 4px;
}
.sidebar-project-item:hover .action-buttons {
  opacity: 1;
}

.sidebar-project-item .project-title-container {
  transition: padding-right 0.2s ease;
}
.sidebar-project-item:hover .project-title-container {
  padding-right: 96px;
}

.sidebar-btn {
  padding: 6px 12px;
  border-radius: 4px;
  border: 1px dashed var(--border);
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s ease;
  margin: 4px 8px;
}
.sidebar-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.04);
}

.message-rating-row {
  opacity: 0;
  pointer-events: none;
}
.message-container:hover .message-rating-row, .message-rating-row.has-rating {
  opacity: 1;
  pointer-events: auto;
}
.message-rating-row.has-rating {
  opacity: 0.5;
}
/* Touch screens have no hover and keyboard users need focus: always reachable there. */
.message-container:focus-within .message-rating-row { opacity: 1; pointer-events: auto; }
@media (hover: none) {
  .message-rating-row { opacity: 0.6; pointer-events: auto; }
}