/* 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;
}

*, *::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: left; }
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 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; }

/* 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;
}

/* 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); }
}

/* 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;
    left: -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 {
    left: 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;
    left: 0 !important;
    top: auto !important;
    margin: 0 !important;
    padding: 18px 14px !important;
  }

  /* Admin panel */
  .admin-layout .admin-sidebar {
    position: fixed !important;
    left: -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 {
    left: 0 !important;
  }

  .admin-layout .admin-content {
    padding: 14px !important;
    margin-left: 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-left: 12px !important;
    padding-right: 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;
  right: 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-left: 4px solid var(--success); }
.toast-error { border-left: 4px solid var(--error); }
.toast-info { border-left: 4px solid var(--accent); }