/* ============================================================
   TMT Truckie — Design System
   Theme: TWO MEN AND A TRUCK® official brand palette
   Primary:   Black #000000 · White #FFFFFF · Gold (PMS 130) #F2A900 · Blue (PMS 661) #294A93
   Secondary: Gray scale (tints of black) #4D4D4D #464646 #6E6E6E #848484 #D2D2D2 #EBEBEB #F5F5F5
   Type:      Arial/Helvetica — the brand guide's own HTML substitute for Futura PT
   ============================================================ */

/* ============================================================
   1. RESET & BASE
   ============================================================ */

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

html, body {
  height: 100%;
  font-family: Arial, Helvetica, 'Segoe UI', sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background: var(--bg-main);
  color: var(--text-primary);
  overflow: hidden;
}

button { cursor: pointer; font-family: inherit; }
input, textarea { font-family: inherit; }
a { text-decoration: none; color: inherit; }

/* ============================================================
   2. DESIGN TOKENS
   ============================================================ */

:root {
  /* ── Brand primary palette (exact) ── */
  --brand-black: #000000;
  --brand-white: #ffffff;
  --brand-gold:  #f2a900; /* PMS 130 */
  --brand-blue:  #294a93; /* PMS 661 */

  /* ── Brand secondary gray scale (tints of black, per style guide) ── */
  --gray-85: #4d4d4d;
  --gray-80: #464646;
  --gray-70: #6e6e6e;
  --gray-50: #848484;
  --gray-20: #d2d2d2;
  --gray-10: #ebebeb;
  --gray-5:  #f5f5f5;

  /* ── Sidebar (brand black, per "Our Look" black-panel treatment) ── */
  --sidebar-bg:           var(--brand-black);
  --sidebar-hover:        rgba(255,255,255,0.06);
  --sidebar-active:       rgba(242,169,0,0.16);
  --sidebar-active-border:rgba(242,169,0,0.55);
  --sidebar-border:       rgba(255,255,255,0.08);
  --sidebar-text:         var(--brand-white);
  --sidebar-text-muted:   rgba(255,255,255,0.6);
  --sidebar-icon:         rgba(255,255,255,0.65);
  --sidebar-elevated:     #141414; /* slight lift off brand black for the always-dark sidebar's native <option> list, which can't use alpha overlays; part of the documented dark-elevation extension (see [data-theme="dark"] block) */
  --sidebar-width:        300px;

  /* ── Main area (white surfaces on the brand gray scale) ── */
  --bg-main:    var(--gray-5);
  --bg-card:    var(--brand-white);
  --bg-hover:   var(--gray-10);
  --bg-input:   var(--brand-white);

  /* ── Brand blue (secondary accent - links, send button, focus) ── */
  --accent:         var(--brand-blue);
  --accent-dark:    #1c3468;
  --accent-hover:   #23407e;
  --accent-light:   rgba(41,74,147,0.08);
  --accent-border:  rgba(41,74,147,0.3);
  --accent-glow:    rgba(41,74,147,0.18);
  --accent-glow2:   rgba(41,74,147,0.35);

  /* ── Brand gold (primary accent - CTAs, tags, highlights) ── */
  --gold:         var(--brand-gold);
  --gold-dark:    #cf9000;
  --gold-hover:   #dd9a00;
  --gold-light:   rgba(242,169,0,0.1);
  --gold-border:  rgba(242,169,0,0.45);
  --gold-glow:    rgba(242,169,0,0.24);
  --gold-text:    var(--brand-black); /* black text on gold, per logo/tagline usage */

  /* ── Text (black primary, brand gray scale for hierarchy) ── */
  --text-primary:   var(--brand-black);
  --text-secondary: var(--gray-80);
  --text-muted:     var(--gray-50);

  /* ── Borders & shadows ── */
  --border:      var(--gray-20);
  --border-hover:var(--gray-50);
  --shadow-xs:   0 1px 2px rgba(0,0,0,0.06);
  --shadow-sm:   0 2px 8px rgba(0,0,0,0.08);
  --shadow-md:   0 4px 20px rgba(0,0,0,0.1);
  --shadow-lg:   0 8px 40px rgba(0,0,0,0.14);
  --shadow-blue: 0 4px 20px rgba(41,74,147,0.28);
  --shadow-blue2:0 8px 32px rgba(41,74,147,0.38);

  /* ── Radius ── */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-full: 9999px;

  /* ── Transitions ── */
  --t-fast: 140ms ease;
  --t-base: 220ms ease;
  --t-slow: 360ms ease;
}

/* ── Light mode (default) — already set above in :root ── */

/* ────────────────────────────────────────────────────────────────
   DARK MODE — toggled via [data-theme="dark"] on <html>
   Built on true brand black. --bg-card/--bg-hover/--bg-input/--bg-active
   form an intentional dark-mode elevation scale (#141414/#1c1c1c/#292929)
   that sits BELOW the brand guide's secondary gray scale (lightest-to-
   darkest documented tint is --gray-80 #464646). The guide's 7 tints were
   designed as light-surface colors, so they can't provide legible
   near-black elevation steps on a true-black base — this scale is a
   documented, deliberate extension of the palette for dark-mode chrome
   only (same status as the green/red/amber semantic-state exception),
   not an off-brand deviation. Always reference these tokens rather than
   hardcoding #141414/#1c1c1c/#292929 elsewhere in this file.
──────────────────────────────────────────────────────────────── */
[data-theme="dark"] {
  --bg-main:    #000000;
  --bg-card:    #141414;
  --bg-hover:   #1c1c1c;
  --bg-input:   #141414;
  --bg-active:  #292929;
  --text-primary:   var(--brand-white);
  --text-secondary: var(--gray-20);
  --text-muted:     var(--gray-50);
  --border:         rgba(255,255,255,0.1);
  --border-hover:   rgba(255,255,255,0.2);
  --sidebar-bg:     var(--brand-black);
  --sidebar-border: rgba(255,255,255,0.08);
  --accent-light:   rgba(41,74,147,0.16);
  --accent-border:  rgba(41,74,147,0.45);
  --accent-tint:    color-mix(in srgb, var(--brand-blue) 45%, white); /* derived blue tint for dark-mode text/icons */
  --gold-light:     rgba(242,169,0,0.16);
}

[data-theme="dark"] .input-area {
  background: var(--bg-card);
  border-color: var(--border);
}

[data-theme="dark"] .ai-explanation {
  background: var(--bg-card);
  border-color: var(--border);
  color: var(--text-primary);
}

[data-theme="dark"] .result-table-wrap {
  background: var(--bg-card);
  border-color: var(--border);
}

[data-theme="dark"] .result-table-header {
  background: var(--bg-hover);
  border-color: var(--border);
}

[data-theme="dark"] .result-table th {
  background: var(--bg-hover);
  color: var(--text-secondary);
  border-color: rgba(41,74,147,0.35);
}

[data-theme="dark"] .result-table td { color: var(--text-primary); border-color: var(--border); }
[data-theme="dark"] .row-even td    { background: var(--bg-card); }
[data-theme="dark"] .row-odd  td    { background: var(--bg-hover); }
[data-theme="dark"] .result-table tr:hover td { background: rgba(41,74,147,0.15) !important; }

[data-theme="dark"] .example-prompt {
  background: var(--bg-card);
  border-color: var(--border);
}
[data-theme="dark"] .example-prompt:hover {
  border-color: var(--gold-border);
  background: rgba(242,169,0,0.12);
  box-shadow: var(--shadow-sm), 0 0 0 3px rgba(242,169,0,0.12);
}

[data-theme="dark"] .input-container {
  background: var(--bg-card);
  border-color: var(--border);
}
[data-theme="dark"] .input-container textarea {
  color: var(--text-primary);
}

[data-theme="dark"] .input-wrap input {
  background: var(--bg-main);
  color: var(--text-primary);
  border-color: var(--border);
}

[data-theme="dark"] .login-card {
  background: var(--bg-hover);
  box-shadow: 0 28px 80px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.04);
}
[data-theme="dark"] .login-content { background: var(--bg-hover); }
[data-theme="dark"] .login-title   { color: var(--text-primary); }
[data-theme="dark"] .login-subtitle{ color: var(--text-secondary); }
[data-theme="dark"] .form-group label { color: var(--text-primary); }

[data-theme="dark"] .suggested-query-label { color: var(--gold); }

[data-theme="dark"] .message-meta     { color: var(--text-muted); }
[data-theme="dark"] .result-label      { color: var(--text-secondary); }
[data-theme="dark"] .row-count        { color: var(--text-muted); }

[data-theme="dark"] .input-hint { color: var(--text-muted); }
[data-theme="dark"] .input-hint kbd {
  background: var(--bg-hover);
  border-color: var(--border);
  color: var(--text-secondary);
}


::-webkit-scrollbar           { width: 5px; height: 5px; }
::-webkit-scrollbar-track     { background: transparent; }
::-webkit-scrollbar-thumb     { background: rgba(132,132,132,0.35); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover{ background: rgba(132,132,132,0.65); }

/* ============================================================
   4. BOOT SCREEN
   ============================================================ */

.boot-screen {
  width: 100vw;
  height: 100vh;
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

/* Wrapper carries the loading-affinity glow behind the mark; the logo
   asset itself (.boot-wordmark) stays fully static per brand guidelines -
   never recolored, filtered, or animated on the artwork directly. */
.boot-logo-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.boot-logo-wrap::before {
  content: '';
  position: absolute;
  inset: -22px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(242,169,0,0.35), rgba(242,169,0,0));
  animation: boot-glow-pulse 1.6s ease-in-out infinite;
  z-index: 0;
}

.boot-wordmark {
  position: relative;
  z-index: 1;
  width: min(240px, 60vw);
  height: auto;
}

.boot-spinner {
  width: 28px;
  height: 28px;
  border: 2.5px solid rgba(242,169,0,0.25);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes boot-glow-pulse {
  0%,100% { opacity: 0; }
  50%      { opacity: 1; }
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   5. LAYOUT
   ============================================================ */

#app { width: 100vw; height: 100vh; overflow: hidden; }

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

/* ── Unified top bar (spans sidebar + main content) ── */
.app-topbar {
  display: flex;
  align-items: center;
  height: 58px;
  min-height: 58px;
  background: var(--sidebar-bg);
  border-bottom: 1px solid var(--sidebar-border);
  flex-shrink: 0;
}

.topbar-brand {
  position: relative;
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 0 14px;
  border-right: 1px solid var(--sidebar-border);
  transition: width var(--t-base), min-width var(--t-base), padding var(--t-base), gap var(--t-base);
  flex-shrink: 0;
}
.topbar-brand.collapsed {
  width: 72px;
  min-width: 72px;
  padding: 0 4px;
  gap: 4px;
  justify-content: center;
}
/* Paint over the top bar's bottom border under the collapsed rail so the
   logo and the icon column below it read as one continuous panel. */
.topbar-brand.collapsed::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--sidebar-bg);
}

/* ── TWO MEN AND A TRUCK one-line wordmark - the sole brand mark, sits at
   the left edge of topbar-right, outside the collapsible brand column
   entirely. A plain link out to twomenandatruck.com, never a toggle, and
   never affected by collapse/expand. ── */
.topbar-wordmark {
  display: flex;
  align-items: center;
  min-width: 0;
  flex-shrink: 1;
  overflow: hidden;
  transition: opacity var(--t-fast);
}
.topbar-wordmark:hover { opacity: 0.85; }
.topbar-wordmark img { height: 28px; width: auto; }

/* ── Right side of the top bar - the wordmark sits at its left edge, an
   optional badge (e.g. the admin role pill) at its right edge ── */
.topbar-right {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: space-between;
  padding: 0 22px;
}

/* ── Optional role badge, top-right corner of the header ── */
.topbar-role-badge {
  font-size     : 10px;
  font-weight   : 700;
  padding       : 3px 10px;
  border-radius : 99px;
  background    : var(--sidebar-active);
  color         : var(--gold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space   : nowrap;
  flex-shrink   : 0;
}

.app-layout {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ============================================================
   6. SIDEBAR
   ============================================================ */

.sidebar {
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-right: 1px solid var(--sidebar-border);
  position: relative;
  z-index: 10;
  transition: width var(--t-base), min-width var(--t-base), transform var(--t-slow);
}

/* ── Collapsed State ── */
.sidebar.collapsed {
  width: 72px;
  min-width: 72px;
}
.sidebar.collapsed .session-title,
.sidebar.collapsed .session-group-label,
.sidebar.collapsed .user-details,
.sidebar.collapsed .sidebar-footer-actions {
  display: none;
}
.sidebar.collapsed .new-chat-row { padding: 16px 8px 12px; justify-content: center; }
.sidebar.collapsed .new-chat-btn { width: 36px; height: 36px; padding: 0; justify-content: center; }
.sidebar.collapsed .new-chat-label { display: none; }
.sidebar.collapsed .sessions-list { display: none; }
.sidebar.collapsed .session-item { justify-content: center; padding: 12px 0; }
.sidebar.collapsed .session-actions { display: none !important; }
.sidebar.collapsed .sidebar-footer {
  flex-direction: column;
  padding: 16px 0;
  gap: 16px;
  margin-top: auto;
}
.sidebar.collapsed .user-info { justify-content: center; }

.collapse-btn {
  width: 32px;
  height: 32px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--r-md);
  color: rgba(255,255,255,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--t-fast);
  flex-shrink: 0;
}
.collapse-btn:hover {
  color: #ffffff;
  background: rgba(255,255,255,0.1);
}

/* ── New Chat (full-width brand-gold CTA) ── */
.new-chat-row {
  padding: 16px 14px 12px;
  flex-shrink: 0;
}

.new-chat-btn {
  width: 100%;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 12px;
  gap: 8px;
  background: var(--gold);
  border: none;
  border-radius: var(--r-md);
  color: var(--gold-text);
  font-size: 14px;
  font-weight: 700;
  transition: all var(--t-fast);
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(242,169,0,0.35);
}
.new-chat-btn:hover {
  background: var(--gold-hover);
  box-shadow: 0 4px 16px rgba(242,169,0,0.45);
  transform: translateY(-1px);
}
.new-chat-btn:active { transform: translateY(0); }

.new-chat-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Sessions list ── */
.sessions-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px 8px;
}

.session-group { margin-bottom: 2px; }

.session-group-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--sidebar-text);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 10px 8px 8px;
  opacity: 0.6;
}

.session-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 9px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all var(--t-fast);
  position: relative;
  margin-bottom: 1px;
  border: 1px solid transparent;
  overflow: hidden;
}
.session-item:hover {
  background: var(--sidebar-hover);
  transform: translateX(2px);
}
.session-item.active {
  background: var(--sidebar-active);
  border-color: var(--sidebar-active-border);
}
.session-item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: 3px;
  background: var(--gold);
  border-radius: 0 2px 2px 0;
}

.session-title {
  flex: 1;
  font-size: 14px;
  font-weight: 400;
  color: var(--sidebar-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}
.session-item.active .session-title { font-weight: 500; }

.session-actions {
  display: none;
  align-items: center;
  gap: 1px;
  flex-shrink: 0;
}
.session-item:hover .session-actions { display: flex; }

.session-action-btn {
  width: 22px;
  height: 22px;
  background: transparent;
  border: none;
  border-radius: var(--r-xs);
  color: var(--sidebar-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--t-fast);
}
.session-action-btn:hover {
  background: rgba(255,255,255,0.1);
  color: var(--sidebar-text);
}
.delete-btn:hover {
  background: rgba(239,68,68,0.2) !important;
  color: #f87171 !important;
}

.no-sessions {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 56px 16px;
  text-align: center;
  gap: 8px;
  color: var(--sidebar-text-muted);
}
.no-sessions p  { font-size: 13px; font-weight: 500; }
.no-sessions span { font-size: 12px; color: var(--sidebar-icon); }

/* ── Footer ── */
.sidebar-footer {
  padding: 11px 13px;
  border-top: 1px solid var(--sidebar-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-shrink: 0;
  background: rgba(0,0,0,0.15);
}

.user-info {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  flex: 1;
}

.user-avatar {
  width: 36px;
  height: 36px;
  background: var(--gold);
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 900;
  color: var(--gold-text);
  flex-shrink: 0;
}

.user-details { min-width: 0; flex: 1; }
.user-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--sidebar-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-email { font-size: 11px; color: rgba(255,255,255,0.7); }

.sidebar-footer-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.footer-btn {
  width: 26px;
  height: 26px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--r-xs);
  color: var(--sidebar-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--t-fast);
}
.footer-btn:hover {
  background: rgba(255,255,255,0.07);
  color: var(--sidebar-text);
}
.logout-btn:hover {
  background: rgba(239,68,68,0.14) !important;
  border-color: rgba(239,68,68,0.28) !important;
  color: #f87171 !important;
}

/* ============================================================
   7. MAIN AREA
   ============================================================ */

.main-area {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--bg-main);
}

.chat-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.mobile-sidebar-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--sidebar-text);
  padding: 5px;
  border-radius: var(--r-sm);
  margin-right: 8px;
  transition: all var(--t-fast);
}
.mobile-sidebar-toggle:hover { background: rgba(255,255,255,0.08); }

.practice-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--gold-dark);
  background: color-mix(in srgb, var(--gold) 12%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--gold) 45%, transparent);
  border-radius: 20px;
  padding: 5px 14px;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0.1px;
}
.practice-badge::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 25%, transparent);
}
.practice-badge strong {
  font-weight: 700;
}

.status-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  background: #f0fdf4;
  color: #166534;
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--r-full);
  border: 1px solid #bbf7d0;
  flex-shrink: 0;
  letter-spacing: 0.01em;
}

.status-dot {
  width: 6px;
  height: 6px;
  background: #22c55e;
  border-radius: var(--r-full);
  animation: pulse-green 2.2s ease-in-out infinite;
}

@keyframes pulse-green {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.6; transform: scale(0.82); }
}

/* ============================================================
   8. MESSAGES AREA
   ============================================================ */

.messages-area {
  flex: 1;
  overflow-y: auto;
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  scroll-behavior: smooth;
}

/* ── Empty state ── */
.empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px 16px;
  max-width: 780px;
  margin: 0 auto;
  width: 100%;
  animation: fadeSlideIn var(--t-slow) ease both;
}

.empty-state-avatar {
  width: 72px;
  height: 72px;
  border-radius: var(--r-full);
  background: linear-gradient(135deg, var(--accent) 0%, var(--gold) 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
}

.empty-state-greeting {
  font-size: 19px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.empty-state h2 {
  font-size: 44px;
  font-weight: 900;
  letter-spacing: -0.75px;
  margin-bottom: 14px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Hand-drawn accent underline, echoing the brand's headline emphasis marks */
.empty-state h2 .brand-underline {
  position: relative;
  display: inline-block;
  color: var(--gold);
}
.empty-state h2 .brand-underline::after {
  content: '';
  position: absolute;
  left: -4%;
  right: -4%;
  bottom: -8px;
  height: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20'%3E%3Cpath d='M2 10 C 40 18, 80 2, 120 10 S 180 18 198 9' stroke='%23F2A900' stroke-width='6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}

.suggested-query-label {
  font-size: 11px;
  font-weight: 900;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 12px;
}

.example-prompts {
  --cols: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  width: 100%;
  max-width: 760px;
}

.example-prompt {
  display: flex;
  align-items: flex-start;
  flex: 0 0 calc((100% - (var(--cols) - 1) * 14px) / var(--cols));
  box-sizing: border-box;
  padding: 16px;
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  text-align: left;
  transition: all var(--t-base);
  box-shadow: var(--shadow-xs);
}
.example-prompt:hover {
  box-shadow: var(--shadow-sm);
}

.example-category {
  font-size: 11px;
  font-weight: 900;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 4px;
}

.example-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.375;
}

/* ============================================================
   9. MESSAGES
   ============================================================ */

.message {
  display: flex;
  gap: 12px;
  max-width: 100%;
  animation: fadeSlideIn 0.28s ease both;
}

@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── User bubble ── */
.user-message {
  flex-direction: column;
  align-items: flex-end;
}

.message-bubble {
  max-width: 70%;
  padding: 11px 16px;
  font-size: 14px;
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Long unbroken tokens (a raw URL especially) must wrap inside these
   containers instead of overflowing past the panel edge. overflow-wrap
   is primary (participates correctly in flex/grid min-content sizing);
   word-break is an older-browser fallback. .ai-explanation is the parent
   of chat.js's rendered .md-p/.md-list/.md-table output - both properties
   inherit down to those automatically. */
.ai-explanation,
.follow-up-question,
.example-text,
.meta-stat {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* A markdown link rendered inside an assistant answer needs to actually
   look like a link - the global `a { text-decoration: none; color: inherit; }`
   reset (see top of file) makes every anchor tag look like plain text
   otherwise, which is fine for nav-style links but wrong here since this
   text is meant to be read as clickable. */
.ai-explanation a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ai-explanation a:hover {
  color: var(--accent-hover);
}

.user-bubble {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
  color: white;
  border-radius: var(--r-lg) var(--r-sm) var(--r-lg) var(--r-lg);
  box-shadow: var(--shadow-sm), 0 2px 14px rgba(41,74,147,0.32);
}

/* ── AI message ── */
.ai-message { align-items: flex-start; }

.ai-avatar {
  width: 30px;
  height: 30px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
  margin-top: 2px;
  overflow: hidden;
}
.ai-avatar img { width: 100%; height: 100%; object-fit: cover; }

.message-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ai-explanation {
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1.72;
  background: white;
  padding: 14px 18px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
}

/* Cosmetic typewriter cursor shown while a fresh answer is being "typed"
   out client-side - the text already fully exists, this just paces its reveal. */
.typing-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 1px;
  vertical-align: text-bottom;
  background: var(--accent);
  animation: typingBlink 0.9s steps(1) infinite;
}
@keyframes typingBlink {
  0%, 50%   { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

.ai-explanation .md-table {
  border-collapse: collapse;
  margin: 10px 0;
  width: 100%;
  font-size: 13px;
}

.ai-explanation .md-table th,
.ai-explanation .md-table td {
  border: 1px solid var(--border);
  padding: 6px 10px;
  text-align: left;
}

.ai-explanation .md-table th {
  background: var(--bg-hover, #ebebeb);
  font-weight: 600;
}

[data-theme="dark"] .ai-explanation .md-table th {
  background: var(--bg-hover, rgba(255, 255, 255, 0.06));
}

.ai-explanation .md-p {
  margin: 0 0 10px 0;
}

.ai-explanation .md-p:last-child {
  margin-bottom: 0;
}

.ai-explanation .md-list {
  margin: 0 0 12px 0;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ai-explanation .md-list:last-child {
  margin-bottom: 0;
}

.ai-explanation .md-list li {
  line-height: 1.55;
}

.ai-explanation ul.md-list {
  list-style: disc;
}

.ai-explanation ol.md-list {
  list-style: decimal;
}

.message-meta {
  font-size: 11px;
  color: var(--text-muted);
  padding: 0 2px;
}

/* ============================================================
   FOLLOW-UP QUESTIONS
   ============================================================ */

.follow-up-questions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.follow-up-question {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 14px;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: all var(--t-fast);
}
.follow-up-question:hover {
  border-color: var(--accent-border);
  background: var(--accent-light);
  color: var(--accent);
}

.follow-up-arrow {
  color: var(--text-muted);
  font-weight: 600;
  flex-shrink: 0;
}
.follow-up-question:hover .follow-up-arrow {
  color: var(--accent);
}

/* ============================================================
   10. SQL BLOCK
   ============================================================ */

.sql-block {
  background: #000000;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
}

.sql-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 14px;
  background: #000000;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.sql-label, .result-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.result-label { color: var(--text-secondary); }

.copy-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--r-sm);
  color: var(--text-muted);
  font-size: 11.5px;
  transition: all var(--t-fast);
}
.copy-btn:hover { background: rgba(255,255,255,0.12); color: white; }
.copy-btn.copied {
  background: rgba(34,197,94,0.14);
  border-color: rgba(34,197,94,0.3);
  color: #4ade80;
}

.sql-code {
  padding: 14px 16px;
  margin: 0;
  overflow-x: auto;
  font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
  font-size: 12.5px;
  line-height: 1.75;
  background: transparent !important;
}
.sql-code code {
  background: transparent !important;
  color: #f5f5f5;
  font-family: inherit;
}

/* highlight.js overrides for sql */
.hljs { background: transparent !important; }

/* ============================================================
   11. RESULT TABLE
   ============================================================ */

.result-table-wrap {
  background: white;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}

.result-table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 14px;
  background: var(--bg-hover);
  border-bottom: 1px solid var(--border);
}

.row-count {
  font-size: 10.5px;
  font-weight: 400;
  color: var(--text-muted);
  margin-left: 6px;
  text-transform: none;
  letter-spacing: 0;
}

.table-scroll {
  overflow-x: auto;
  max-height: 300px;
  overflow-y: auto;
}

.result-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.result-table thead { position: sticky; top: 0; z-index: 1; }

.result-table th {
  background: var(--bg-hover);
  padding: 9px 14px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 2px solid var(--accent-border);
  white-space: nowrap;
  user-select: none;
}

.result-table td {
  padding: 9px 14px;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  white-space: nowrap;
}
.result-table tr:last-child td { border-bottom: none; }
.row-even td { background: var(--gray-5); }
.row-odd  td { background: white; }
.result-table tr:hover td { background: var(--accent-light) !important; transition: background var(--t-fast); }

.table-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 14px;
  border-top: 1px solid var(--border);
  background: var(--bg-hover);
  transition: opacity var(--t-fast);
}

.page-info {
  font-size: 11.5px;
  color: var(--text-muted);
}

.page-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Base button - shared by nav arrows and number buttons */
.page-btn {
  min-width: 30px;
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: white;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  line-height: 1;
  transition: all var(--t-fast);
}

.page-btn:hover:not(:disabled) {
  background: var(--accent-light);
  border-color: var(--accent-border);
  color: var(--accent);
}

.page-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Nav arrows - slightly narrower */
.page-btn-nav {
  min-width: 28px;
  padding: 0 6px;
  font-size: 14px;
}

/* Active (current) page number */
.page-btn.page-active {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
  cursor: default;
}

/* Ellipsis - not a button */
.page-ellipsis {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 4px;
  font-size: 12px;
  color: var(--text-muted);
  user-select: none;
}

[data-theme="dark"] .table-pagination {
  background: var(--bg-hover);
  border-color: var(--border);
}
[data-theme="dark"] .page-btn {
  background: var(--bg-card);
  color: var(--text-secondary);
  border-color: var(--border);
}
[data-theme="dark"] .page-btn:hover:not(:disabled) {
  background: rgba(41,74,147,0.15);
  border-color: rgba(41,74,147,0.4);
  color: #ffffff;
}
[data-theme="dark"] .page-btn.page-active {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

/* ============================================================
   12. TYPING INDICATOR
   ============================================================ */

.typing-message { align-items: center !important; }

.typing-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 13px 18px;
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-xs);
}

.typing-indicator span {
  width: 7px;
  height: 7px;
  background: var(--accent);
  border-radius: 50%;
  animation: typing-bounce 1.4s infinite ease-in-out;
  opacity: 0.55;
}
.typing-indicator span:nth-child(1) { animation-delay: 0s; }
.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typing-bounce {
  0%,60%,100% { transform: translateY(0); opacity: 0.45; }
  30%          { transform: translateY(-8px); opacity: 1; }
}

/* ============================================================
   14. INPUT AREA
   ============================================================ */

.input-area {
  padding: 12px 22px 12px;
  background: white;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.input-container {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 720px;
  margin: 0 auto;
  background: var(--bg-main);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 8px 12px;
  transition: all var(--t-base);
}
.input-container:focus-within {
  border-color: var(--accent);
  box-shadow: var(--shadow-sm), 0 0 0 3px var(--accent-glow);
}

.input-container textarea {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  color: var(--text-primary);
  resize: none;
  line-height: 1.5;
  max-height: 90px; /* ~4 lines at 14px/1.5 line-height, keep in sync with _MAX_INPUT_HEIGHT in chat.js */
  overflow-y: hidden; /* toggled to auto by _autoResizeInput only once content exceeds max-height */
  min-height: 21px;
  padding: 8px 0;
}
.input-container textarea::placeholder { color: var(--text-muted); }

.send-btn {
  width: 40px;
  height: 40px;
  background: var(--accent);
  border: none;
  border-radius: var(--r-full);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--t-fast);
  flex-shrink: 0;
}
.send-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}
.send-btn:hover:not(:disabled) {
  background: var(--accent-hover);
}
.send-btn:active { transform: translateY(0); }

.input-hint { display: none; }

/* ============================================================
   15. APP FOOTER
   ============================================================ */

.input-hint-text { display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 11px; color: var(--text-muted); opacity: 0.5; padding-bottom: 4px; }
.input-hint-text kbd {
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  padding: 1px 5px;
  font-size: 10px;
  font-family: inherit;
  color: var(--text-secondary);
}

/* ============================================================
   16. LOGIN PAGE
   ============================================================ */

.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000000;
  position: relative;
  overflow: hidden;
}

/* Background orbs - soft brand-gold ambient glow (no off-brand hues) */
.login-bg { position: absolute; inset: 0; pointer-events: none; }

.login-bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
}

.orb-1 {
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(242,169,0,0.16), transparent 70%);
  top: -120px; left: -100px;
  animation: orb-float 9s ease-in-out infinite;
}
.orb-2 {
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(41,74,147,0.22), transparent 70%);
  bottom: -100px; right: -80px;
  animation: orb-float 11s ease-in-out infinite reverse;
}
.orb-3 {
  width: 260px; height: 260px;
  background: radial-gradient(circle, rgba(242,169,0,0.12), transparent 70%);
  top: 55%; left: 62%;
  animation: orb-float 7s ease-in-out infinite;
}

@keyframes orb-float {
  0%,100% { transform: translate(0,0) scale(1); }
  33%      { transform: translate(18px,-18px) scale(1.06); }
  66%      { transform: translate(-14px,14px) scale(0.94); }
}

/* Login grid dots - graph-paper texture, echoes the brand's hand-drawn-element sheets */
.login-page::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}

.login-card {
  width: 420px;
  background: white;
  border-radius: 22px;
  box-shadow: 0 28px 80px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.04);
  overflow: hidden;
  position: relative;
  z-index: 1;
  animation: card-enter 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes card-enter {
  from { opacity: 0; transform: scale(0.9) translateY(24px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes shake {
  0%,100% { transform: translateX(0); }
  15%     { transform: translateX(-7px); }
  30%     { transform: translateX(7px); }
  45%     { transform: translateX(-4px); }
  60%     { transform: translateX(4px); }
  75%     { transform: translateX(-2px); }
  90%     { transform: translateX(2px); }
}
.login-card.shake { animation: shake 0.48s ease both; }

/* ── Card header band ── */
.login-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 30px 30px 24px;
  background: var(--brand-black);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  position: relative;
  overflow: hidden;
}
.login-logo::before {
  content: '';
  position: absolute;
  right: -40px; top: -40px;
  width: 160px; height: 160px;
  background: radial-gradient(circle, rgba(242,169,0,0.2), transparent 70%);
}

.login-logo-img {
  width: min(260px, 70%);
  height: auto;
  position: relative;
  z-index: 1;
}

.login-brand-tagline {
  font-size: 11.5px;
  font-weight: 700;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
}

/* ── Card body ── */
.login-content { padding: 30px 30px 28px; }

.login-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 5px;
  letter-spacing: -0.4px;
}
.login-subtitle {
  font-size: 13.5px;
  color: var(--text-secondary);
  margin-bottom: 26px;
}

.form-group { margin-bottom: 16px; }
.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.input-wrap { position: relative; display: flex; align-items: center; }
.input-icon {
  position: absolute;
  left: 12px;
  color: var(--text-muted);
  pointer-events: none;
}

.input-wrap input {
  width: 100%;
  padding: 10px 40px 10px 38px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  font-size: 14px;
  color: var(--text-primary);
  background: white;
  outline: none;
  transition: all var(--t-fast);
}
.input-wrap input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.input-wrap input::placeholder { color: var(--text-muted); }

.toggle-password {
  position: absolute;
  right: 10px;
  background: none;
  border: none;
  color: var(--text-muted);
  padding: 4px;
  border-radius: var(--r-xs);
  display: flex;
  align-items: center;
  transition: color var(--t-fast);
}
.toggle-password:hover { color: var(--text-secondary); }

.form-error {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--r-sm);
  color: #dc2626;
  font-size: 13px;
  margin-bottom: 14px;
}

.login-btn {
  width: 100%;
  padding: 11px 24px;
  background: var(--gold);
  border: none;
  border-radius: var(--r-md);
  color: var(--gold-text);
  font-size: 14.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all var(--t-base);
  box-shadow: 0 4px 16px rgba(242,169,0,0.35);
  margin-top: 4px;
}
.login-btn:hover:not(:disabled) {
  background: var(--gold-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(242,169,0,0.45);
}
.login-btn:active { transform: translateY(0); }
.login-btn:disabled { opacity: 0.68; cursor: not-allowed; transform: none; }
.login-btn.success {
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
  box-shadow: 0 4px 16px rgba(22,163,74,0.42);
}

.login-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 18px;
  padding: 9px 13px;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  flex-wrap: wrap;
}
.login-hint strong { color: var(--accent); font-weight: 600; }

/* ============================================================
   16. ERROR / SPECIAL MESSAGES
   ============================================================ */

.error-avatar { background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important; }

.error-text {
  font-size: 14px;
  color: #dc2626;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--r-md);
  padding: 12px 16px;
}

.error-retry-btn {
  margin-top: 8px;
  padding: 7px 14px;
  background: transparent;
  border: 1px solid #fecaca;
  border-radius: var(--r-sm);
  color: #dc2626;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--t-fast);
}
.error-retry-btn:hover {
  background: #fef2f2;
}

[data-theme="dark"] .error-text {
  background: rgba(220,38,38,0.12);
  border-color: rgba(220,38,38,0.35);
  color: #f87171;
}
[data-theme="dark"] .error-retry-btn {
  border-color: rgba(220,38,38,0.35);
  color: #f87171;
}
[data-theme="dark"] .error-retry-btn:hover {
  background: rgba(220,38,38,0.12);
}

/* ============================================================
   17. MOBILE RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    left: 0; top: 0;
    height: 100vh;
    transform: translateX(-100%);
    z-index: 100;
    box-shadow: var(--shadow-lg);
  }
  .sidebar.mobile-open { transform: translateX(0); }
  /* The overlay sidebar always opens full-width on mobile, regardless of
     whatever collapse preference was set on desktop - so the icon-only rail
     styling below never applies here. */
  .sidebar.collapsed { width: var(--sidebar-width); min-width: var(--sidebar-width); }
  .sidebar.collapsed .session-title,
  .sidebar.collapsed .session-group-label,
  .sidebar.collapsed .user-details,
  .sidebar.collapsed .sidebar-footer-actions,
  .sidebar.collapsed .new-chat-label,
  .sidebar.collapsed .sessions-list,
  .sidebar.collapsed .admin-nav-label { display: revert; }
  /* The unconditional .admin-nav rules further down the sheet (icons-only
     rail) tie on specificity and lose the cascade to whichever is later in
     source order - they sit after this block, so they'd otherwise win even
     inside this media query. Force the mobile override with !important. */
  .sidebar.collapsed .admin-nav-label { display: block !important; }
  .sidebar.collapsed .admin-nav-item  { justify-content: flex-start !important; padding: 9px 10px !important; }
  .sidebar.collapsed .session-actions { display: none; }
  .sidebar.collapsed .session-item:hover .session-actions { display: flex; }
  .sidebar.collapsed .new-chat-row { padding: 16px 14px 12px; justify-content: flex-start; }
  .sidebar.collapsed .new-chat-btn { width: 100%; height: 38px; padding-left: 12px; justify-content: flex-start; }
  .sidebar.collapsed .session-item { justify-content: flex-start; padding: 8px 9px; }
  .sidebar.collapsed .sidebar-footer { flex-direction: row; padding: 11px 13px; gap: 8px; justify-content: space-between; }
  .sidebar.collapsed .user-info { justify-content: flex-start; }

  /* The icon-only rail is a desktop-only affordance - on mobile the brand
     column just keeps its normal (uncollapsed) width. */
  .topbar-brand.collapsed { width: auto; min-width: 0; justify-content: flex-start; }

  /* Flex order puts the hamburger after the (flex:1) right-side slot, so it
     lands flush in the top-right corner instead of hugging the logo. */
  .mobile-sidebar-toggle { display: flex; order: 3; margin-left: 4px; margin-right: 4px; }
  .main-area { width: 100%; }

  /* The collapse rail only makes sense for the desktop inline sidebar - the
     hamburger menu is the only toggle needed on mobile. */
  .collapse-btn { display: none; }
  .topbar-brand {
    order: 1;
    width: auto;
    min-width: 0;
    border-right: none;
    padding: 0 10px;
  }
  .topbar-right { order: 2; padding: 0 10px; }

  /* Feedback bar: the optional comment box drops to its own line instead of
     cramming next to the thumb/copy buttons and overflowing. (Extra
     specificity here since the base .fb-comment-wrap rule sits later in
     this file and would otherwise win the cascade tie over this media rule.) */
  .feedback-bar .fb-comment-wrap { flex: 1 1 100%; margin-left: 0; margin-top: 6px; }

  .messages-area { padding: 16px; }
  .input-area { padding: 10px 14px 14px; }

  .example-prompts { --cols: 2 !important; }

  .login-card { width: 90%; max-width: 420px; }
}

@media (max-width: 480px) {
  .example-prompts { --cols: 1 !important; }
  .message-bubble { max-width: 90%; }
  .messages-area { padding: 12px; gap: 14px; }
}

/* ── Mic button ── */
.mic-btn {
  display         : flex;
  align-items     : center;
  justify-content : center;
  width           : 40px;
  height          : 40px;
  border-radius   : var(--r-full);
  border          : 1px solid var(--border);
  background      : transparent;
  color           : var(--text-primary);
  cursor          : pointer;
  flex-shrink     : 0;
  transition      : all 0.2s;
}
.mic-btn:hover { border-color: var(--accent); color: var(--accent); }
.mic-btn.mic-active {
  background   : #ef4444;
  border-color : #ef4444;
  color        : white;
  animation    : mic-pulse 1.2s ease-in-out infinite;
}
@keyframes mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.4); }
  50%       { box-shadow: 0 0 0 6px rgba(239,68,68,0); }
}

/* ── Message meta stats ── */
.meta-dot  { margin: 0 4px; opacity: 0.4; }
.meta-stat { font-size: 11px; color: var(--text-muted); opacity: 0.8; }
.source-link { text-decoration: none; cursor: pointer; transition: color var(--t-fast), opacity var(--t-fast); }
.source-link:hover { color: var(--accent); opacity: 1; text-decoration: underline; }

/* ── Footer always at bottom ── */
.messages-area {
  display        : flex;
  flex-direction : column;
}


/* ══════════════════════════════════════════════════════════
   ADMIN PANEL
══════════════════════════════════════════════════════════ */

/* Overlay container */
#admin-overlay {
  position        : fixed;
  inset           : 0;
  z-index         : 1000;
  display         : flex;
  align-items     : stretch;
  justify-content : flex-end;
}
#admin-overlay.closing .admin-panel   { transform: translateX(100%); opacity: 0; }
#admin-overlay.closing .admin-backdrop{ opacity: 0; transition: opacity 0.28s ease; }

/* Backdrop */
.admin-backdrop {
  position        : absolute;
  inset           : 0;
  background      : rgba(0, 0, 0, 0.35);
  backdrop-filter : blur(2px);
  animation       : fadeIn 0.22s ease;
}

/* ── Drawer ── */
.admin-panel {
  position       : relative;
  width          : min(500px, 92vw);
  height         : 100%;
  background     : var(--bg-card);          /* white in light, #141414 in dark */
  border-left    : 1px solid var(--border);
  display        : flex;
  flex-direction : column;
  overflow       : hidden;
  animation      : slideInRight 0.25s ease;
  transition     : transform 0.28s ease, opacity 0.28s ease;
  box-shadow     : -6px 0 28px rgba(0,0,0,0.12);
}
[data-theme="dark"] .admin-panel {
  background : var(--bg-card);
  box-shadow : -6px 0 28px rgba(0,0,0,0.4);
}

@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* ── Header ── */
.admin-panel-header {
  display         : flex;
  align-items     : center;
  justify-content : space-between;
  padding         : 16px 20px;
  border-bottom   : 1px solid var(--border);
  flex-shrink     : 0;
  background      : var(--bg-card);
}
[data-theme="dark"] .admin-panel-header { background: var(--bg-card); border-color: var(--border); }

.admin-panel-title {
  display     : flex;
  align-items : center;
  gap         : 8px;
  font-size   : 15px;
  font-weight : 600;
  color       : var(--text-primary);
}

.admin-close-btn {
  background    : transparent;
  border        : none;
  cursor        : pointer;
  color         : var(--text-muted);
  padding       : 5px;
  border-radius : 6px;
  display       : flex;
  transition    : color 0.15s, background 0.15s;
}
.admin-close-btn:hover {
  color      : var(--text-primary);
  background : var(--bg-hover);
}

/* ── Body ── */
.admin-panel-body {
  flex           : 1;
  overflow-y     : auto;
  padding        : 20px;
  display        : flex;
  flex-direction : column;
  gap            : 24px;
  background     : var(--bg-main);
}
[data-theme="dark"] .admin-panel-body { background: #000000; }

.admin-loading { color: var(--text-muted); font-size: 14px; padding: 20px 0; }
.admin-error   { color: #e85555; font-size: 14px; }

/* ── Section ── */
.admin-section {
  background     : var(--bg-card);
  border         : 1px solid var(--border);
  border-radius  : 10px;
  padding        : 16px;
  display        : flex;
  flex-direction : column;
  gap            : 12px;
}
[data-theme="dark"] .admin-section { background: var(--bg-card); border-color: var(--border); }

.admin-section-title {
  font-size       : 11px;
  font-weight     : 700;
  text-transform  : uppercase;
  letter-spacing  : 0.07em;
  color           : var(--text-muted);
  margin          : 0;
  padding-bottom  : 10px;
  border-bottom   : 1px solid var(--border);
}

/* ── Form grid ── */
.admin-form-grid {
  display              : grid;
  grid-template-columns: 1fr 1fr;
  gap                  : 10px;
}

.admin-field {
  display        : flex;
  flex-direction : column;
  gap            : 4px;
}
.admin-field.admin-field-sm { max-width: 120px; }

.admin-field label {
  font-size      : 11px;
  font-weight    : 600;
  color          : var(--text-secondary);
  text-transform : uppercase;
  letter-spacing : 0.04em;
}

.admin-field input {
  width         : 100%;
  background    : var(--bg-input);
  border        : 1px solid var(--border);
  border-radius : 7px;
  padding       : 8px 11px;
  font-size     : 13px;
  color         : var(--text-primary);
  outline       : none;
  font-family   : inherit;
  transition    : border-color 0.15s, box-shadow 0.15s;
}
.admin-field input:focus {
  border-color : var(--accent);
  box-shadow   : 0 0 0 3px rgba(41,74,147,0.12);
}
[data-theme="dark"] .admin-field input {
  background   : var(--bg-hover);
  color        : var(--text-primary);
  border-color : var(--border);
}

/* ── Derived DB row ── */
.admin-derived-dbs {
  display       : flex;
  flex-wrap     : wrap;
  align-items   : center;
  gap           : 6px 12px;
  padding       : 8px 10px;
  background    : var(--bg-hover);
  border        : 1px solid var(--border);
  border-radius : 7px;
  font-size     : 12px;
}
[data-theme="dark"] .admin-derived-dbs { background: var(--bg-hover); border-color: var(--border); }

.admin-derived-label { color: var(--text-muted); }
.admin-derived-dbs code {
  font-family   : 'JetBrains Mono', monospace;
  font-size     : 11px;
  background    : var(--bg-card);
  padding       : 2px 7px;
  border-radius : 4px;
  color         : var(--accent);
  border        : 1px solid var(--border);
}
[data-theme="dark"] .admin-derived-dbs code { background: var(--bg-card); }

/* ── Actions row ── */
.admin-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── Buttons ── */
.admin-btn {
  padding       : 7px 16px;
  border-radius : 7px;
  font-size     : 13px;
  font-weight   : 500;
  cursor        : pointer;
  border        : 1px solid transparent;
  font-family   : inherit;
  transition    : background 0.15s, filter 0.15s;
}
.admin-btn:disabled { opacity: 0.5; cursor: default; }

.admin-btn-primary   { background: var(--gold); color: var(--gold-text); border-color: var(--gold); font-weight: 700; box-shadow: 0 2px 10px rgba(242,169,0,0.35); }
.admin-btn-primary:hover:not(:disabled) { background: var(--gold-hover); border-color: var(--gold-hover); }

.admin-btn-secondary { background: transparent; color: var(--accent); border-color: var(--accent); }
.admin-btn-secondary:hover:not(:disabled) { background: rgba(41,74,147,0.08); }

.admin-btn-danger    { background: transparent; color: #e85555; border-color: #e85555; }
.admin-btn-danger:hover:not(:disabled) { background: rgba(232,85,85,0.08); }

/* ── Feedback ── */
.admin-feedback {
  font-size  : 12px;
  min-height : 18px;
  display    : flex;
  align-items: center;
  gap        : 5px;
  opacity    : 0;
  transition : opacity 0.2s;
}
.admin-feedback.visible  { opacity: 1; }
.admin-feedback-success  { opacity: 1; color: #16a34a; font-weight: 600; }
.admin-feedback-error    { opacity: 1; color: #e85555; font-weight: 600; }
.admin-feedback-saving   { opacity: 1; color: var(--text-muted); }
[data-theme="dark"] .admin-feedback-success { color: #4ade80; }
[data-theme="dark"] .admin-feedback-error   { color: #f28b8b; }

/* ── Admin forms (Add/Edit User, Upload/Edit Document, Suggested Question) ──
   Dedicated to the admin CRUD cards - unlike .tele-filter-bar (a single-line
   filter row) these need to wrap cleanly at any width without the submit
   button or checkbox visually colliding with the last field.             */
.admin-form { display: flex; flex-direction: column; gap: 0; }

/* Prefixed admin-crud- (not admin-form-/admin-field-) to avoid colliding
   with the pre-existing .admin-form-grid/.admin-field pair used by the DB
   Connection form above, which has different column/input rules. */
.admin-crud-grid {
  display              : grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap                  : 14px 16px;
  margin-top           : 10px;
}
.admin-crud-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.admin-crud-field-wide     { grid-column: 1 / -1; }
.admin-crud-field-span2    { grid-column: span 2; }
.admin-crud-field-checkbox { justify-content: flex-end; }

/* Suggested-question forms: a fixed 3-track row (Category | Question text |
   Order) instead of auto-fit, so the question box always fills the
   remaining width and its right edge lines up with the row above/below it
   regardless of card width. */
.admin-crud-grid-questions {
  grid-template-columns: minmax(140px, 1fr) minmax(220px, 2.4fr) 90px;
}

/* Sits in an .admin-form-actions row alongside the submit/cancel buttons -
   margin-right:auto pins it to the left edge while flex-end (below) still
   pushes everything after it to the right. */
.admin-form-actions-spacer { margin-right: auto; }

.admin-input {
  height       : 36px;
  padding      : 0 12px;
  font-size    : 13px;
  border       : 1px solid var(--border, #d2d2d2);
  border-radius: 7px;
  background   : #ffffff;
  color        : #1a1a1a;
  outline      : none;
  width        : 100%;
  font-family  : inherit;
  box-sizing   : border-box;
}
.admin-input:focus {
  border-color: var(--accent);
  box-shadow  : 0 0 0 2px color-mix(in srgb, var(--accent) 15%, transparent);
}
.admin-input[type="file"]   { padding: 6px 8px; height: auto; cursor: pointer; }
select.admin-input          { cursor: pointer; }

.admin-password-field { position: relative; }
.admin-password-field .admin-input { padding-right: 40px; }
.admin-password-toggle {
  position       : absolute;
  right          : 4px;
  top            : 50%;
  transform      : translateY(-50%);
  width          : 28px;
  height         : 28px;
  display        : flex;
  align-items    : center;
  justify-content: center;
  background     : transparent;
  border         : none;
  border-radius  : 6px;
  color          : var(--text-muted);
  cursor         : pointer;
  padding        : 0;
}
.admin-password-toggle:hover { background: var(--bg-hover); color: var(--text-primary); }
.admin-password-toggle svg   { width: 16px; height: 16px; }

.admin-checkbox-label {
  display     : flex;
  align-items : center;
  gap         : 7px;
  height      : 36px;
  font-size   : 13px;
  font-weight : 500;
  color       : var(--text-primary);
  cursor      : pointer;
  white-space : nowrap;
}
.admin-checkbox-label input[type="checkbox"] {
  width       : 16px;
  height      : 16px;
  cursor      : pointer;
  accent-color: var(--accent);
  flex-shrink : 0;
}

.admin-form-actions {
  display        : flex;
  align-items    : center;
  justify-content: flex-end;
  gap            : 12px;
  margin-top     : 18px;
  flex-wrap      : wrap;
}
.admin-form-actions .admin-feedback { min-height: 0; }

.admin-btn-primary-outline {
  background: transparent;
  color     : #16a34a;
  border-color: #16a34a;
}
.admin-btn-primary-outline:hover:not(:disabled) { background: rgba(22,163,74,0.08); }

/* Bigger CTA for form submit/cancel buttons (Add/Save/Create/Upload &
   Ingest) - kept separate from the compact default .admin-btn used by
   in-table row actions (Edit/Delete/Activate), which should stay small. */
.admin-btn-lg { padding: 11px 26px; font-size: 14.5px; border-radius: 8px; }

[data-theme="dark"] .admin-input {
  background  : var(--bg-input);
  color       : #ffffff;
  border-color: rgba(255,255,255,0.12);
}
[data-theme="dark"] .admin-btn-primary-outline { color: #4ade80; border-color: #4ade80; }
[data-theme="dark"] .admin-btn-primary-outline:hover:not(:disabled) { background: rgba(74,222,128,0.1); }

/* Admin forms on small screens - stack every field to one column, and
   let the actions row wrap to its own lines (checkbox above the buttons)
   instead of squeezing everything onto one cramped row. */
@media (max-width: 640px) {
  .admin-section { padding: 28px 16px 40px; }
  .admin-crud-grid,
  .admin-crud-grid-questions { grid-template-columns: 1fr; }
  /* On a 1-column grid, span:2 would otherwise force a phantom implicit
     2nd column into existence (sized by content, not the track list) -
     collapsing every other row in the grid to match it. */
  .admin-crud-field-wide,
  .admin-crud-field-span2 { grid-column: 1 / -1; }
  .admin-form-actions { justify-content: flex-start; }
  .admin-form-actions-spacer { margin-right: 0; flex: 1 1 100%; }
  .admin-btn-lg { width: 100%; text-align: center; }
  .admin-table-actions { flex-wrap: wrap; justify-content: flex-start; }
}

/* ── Pipeline cards ── */
.admin-pipeline-cards { display: flex; flex-direction: column; gap: 10px; }

.admin-pipeline-card {
  display       : flex;
  align-items   : center;
  gap           : 14px;
  padding       : 13px 14px;
  background    : var(--bg-hover);
  border        : 1px solid var(--border);
  border-radius : 9px;
}
[data-theme="dark"] .admin-pipeline-card { background: var(--bg-hover); border-color: var(--border); }

.pipeline-card-icon {
  flex-shrink   : 0;
  width         : 36px;
  height        : 36px;
  border-radius : 8px;
  display       : flex;
  align-items   : center;
  justify-content: center;
}
.pipeline-icon-rebuild { background: rgba(232,85,85,0.12);  color: #e85555; }
.pipeline-icon-sync    { background: rgba(41,74,147,0.12);  color: var(--accent); }

.pipeline-card-content { flex: 1; min-width: 0; }
.pipeline-card-title   { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 2px; }
.pipeline-card-desc    { font-size: 11px; color: var(--text-muted); line-height: 1.4; }

/* ── Admin full page ── */
.admin-page {
  display        : flex;
  flex-direction : column;
  height         : 100vh;
  overflow       : hidden;
  background     : var(--bg-main);
}

/* Top bar */
.admin-topbar {
  display         : flex;
  align-items     : center;
  justify-content : space-between;
  padding         : 0 28px;
  height          : 56px;
  background      : var(--sidebar-bg);
  border-bottom   : 1px solid var(--sidebar-border);
  flex-shrink     : 0;
}
.admin-topbar-brand {
  display    : flex;
  align-items: center;
  gap        : 10px;
}
.admin-topbar-icon {
  width          : 32px;
  height         : 32px;
  border-radius  : 8px;
  background     : var(--accent);
  display        : flex;
  align-items    : center;
  justify-content: center;
  flex-shrink    : 0;
}
.admin-topbar-title {
  font-size  : 14px;
  font-weight: 600;
  color      : var(--sidebar-text);
}
.admin-topbar-badge {
  font-size    : 10px;
  font-weight  : 600;
  padding      : 2px 7px;
  border-radius: 99px;
  background   : rgba(41,74,147,0.25);
  color        : #ffffff;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.admin-topbar-actions {
  display    : flex;
  align-items: center;
  gap        : 8px;
}
.admin-topbar-theme {
  background   : transparent;
  border       : 1px solid var(--sidebar-border);
  border-radius: 6px;
  color        : var(--sidebar-text-muted);
  width        : 32px;
  height       : 32px;
  display      : flex;
  align-items  : center;
  justify-content: center;
  cursor       : pointer;
  transition   : color 0.15s, background 0.15s;
}
.admin-topbar-theme:hover { color: var(--sidebar-text); background: var(--sidebar-hover); }
.admin-topbar-logout {
  display      : flex;
  align-items  : center;
  gap          : 6px;
  padding      : 6px 12px;
  background   : transparent;
  border       : 1px solid var(--sidebar-border);
  border-radius: 6px;
  color        : var(--sidebar-text-muted);
  font-size    : 12px;
  font-weight  : 500;
  font-family  : inherit;
  cursor       : pointer;
  transition   : color 0.15s, background 0.15s, border-color 0.15s;
}
.admin-topbar-logout:hover {
  color        : #f87171;
  border-color : rgba(239,68,68,0.4);
  background   : rgba(239,68,68,0.08);
}

/* Page body */
.admin-page-body {
  flex       : 1;
  overflow-y : auto;
  padding    : 32px 28px;
}
.admin-page-content {
  max-width : 900px;
  width     : 100%;
  margin    : 0 auto;
}
.admin-page-heading {
  margin-bottom: 24px;
}
.admin-page-heading h1 {
  font-size  : 22px;
  font-weight: 700;
  color      : var(--text-primary);
  margin     : 0 0 4px;
}
.admin-page-heading p {
  font-size: 13px;
  color    : var(--text-muted);
  margin   : 0;
}

/* Grid layout */
.admin-grid {
  display              : grid;
  grid-template-columns: 1fr 1fr;
  gap                  : 16px;
}
.admin-card-full { grid-column: 1 / -1; }

/* Card */
.admin-card {
  background    : var(--bg-card);
  border        : 1px solid var(--border);
  border-radius : 12px;
  overflow      : hidden;
  display       : flex;
  flex-direction: column;
}
[data-theme="dark"] .admin-card { background: var(--bg-card); }

.admin-card-header {
  display      : flex;
  align-items  : center;
  gap          : 8px;
  padding      : 14px 18px;
  font-size    : 13px;
  font-weight  : 600;
  color        : var(--text-primary);
  border-bottom: 1px solid var(--border);
  background   : var(--bg-hover);
}
[data-theme="dark"] .admin-card-header { background: var(--bg-hover); }

.admin-card-body   { padding: 16px 18px; flex: 1; display: flex; flex-direction: column; gap: 12px; }
.admin-card-footer {
  padding     : 12px 18px;
  border-top  : 1px solid var(--border);
  display     : flex;
  align-items : center;
  gap         : 10px;
  background  : var(--bg-hover);
}
[data-theme="dark"] .admin-card-footer { background: var(--bg-hover); }

/* DB connection grid — row 1: Host | Port | Username  row 2: Password | Database */
.admin-db-grid {
  grid-template-columns : 3fr 1fr 2fr;
  grid-template-areas   :
    "host port user"
    "pass pass db";
}
.admin-field-host { grid-area: host; }
.admin-field-port { grid-area: port; }
.admin-field-user { grid-area: user; }
.admin-field-pass { grid-area: pass; }
.admin-field-db   { grid-area: db;   }

.admin-load-error {
  text-align: center;
  padding   : 40px 20px;
  color     : var(--text-muted);
  display   : flex;
  flex-direction: column;
  gap       : 10px;
  align-items: center;
}

/* Admin Settings button — top-right of chat header */
.chat-admin-btn {
  display      : flex;
  align-items  : center;
  gap          : 6px;
  padding      : 6px 12px;
  background   : rgba(41, 74, 147, 0.08);
  border       : 1px solid rgba(41, 74, 147, 0.3);
  border-radius: 7px;
  color        : var(--accent);
  font-size    : 12px;
  font-weight  : 600;
  font-family  : inherit;
  cursor       : pointer;
  white-space  : nowrap;
  transition   : background 0.15s, border-color 0.15s;
}
.chat-admin-btn:hover {
  background  : rgba(41, 74, 147, 0.16);
  border-color: rgba(41, 74, 147, 0.55);
}
[data-theme="dark"] .chat-admin-btn {
  background  : rgba(41, 74, 147, 0.12);
  border-color: rgba(41, 74, 147, 0.35);
}

/* ============================================================
   ADMIN NAV
   Sits inline in the regular chat sidebar (between New Chat and the
   conversation search box) for admin users - not a separate page/sidebar,
   so the whole app stays one consistent shell.
   ============================================================ */

.admin-nav {
  flex-shrink : 0;
  padding     : 4px 8px 10px;
  border-bottom: 1px solid var(--sidebar-border);
  margin-bottom: 8px;
  display : flex;
  flex-direction: column;
  gap     : 2px;
}
.admin-nav-item {
  display      : flex;
  align-items  : center;
  gap          : 10px;
  width        : 100%;
  padding      : 9px 10px;
  border-radius: var(--r-sm);
  background   : transparent;
  border       : none;
  color        : var(--sidebar-text-muted);
  font-size    : 13px;
  font-weight  : 500;
  font-family  : inherit;
  cursor       : pointer;
  text-align   : left;
  transition   : background var(--t-fast), color var(--t-fast);
}
.admin-nav-item:hover {
  background: var(--sidebar-hover);
  color     : var(--sidebar-text);
}
.admin-nav-item.active {
  background  : var(--sidebar-active);
  color       : var(--sidebar-text);
  box-shadow  : inset 2px 0 0 var(--gold);
}
.admin-nav-icon {
  flex-shrink: 0;
  opacity    : 0.7;
}
.admin-nav-item.active .admin-nav-icon { opacity: 1; }

/* ── Collapsed sidebar: icons only, matches .sidebar.collapsed .session-item ── */
.sidebar.collapsed .admin-nav-label { display: none; }
.sidebar.collapsed .admin-nav-item  { justify-content: center; padding: 12px 0; }

/* ── Main content area ── */
.admin-main {
  flex           : 1;
  overflow-y     : auto;
  background     : var(--bg-main);
  min-width      : 0;
  display        : flex;
  flex-direction : column;
  align-items    : center;
}

/* ── Section wrapper ── */
/* margin:auto in a flex column centers short pages (Pipeline/DB) vertically;
   when content is taller than the viewport it simply scrolls from the top.   */
.admin-section {
  max-width : 860px;
  width     : 100%;
  margin    : auto;
  padding   : 48px 32px 56px;
}
.admin-section-heading {
  margin-bottom: 20px;
}
.admin-section-heading h2 {
  font-size  : 20px;
  font-weight: 700;
  color      : var(--text-primary);
  margin     : 0 0 4px;
}
.admin-section-heading p {
  font-size: 13px;
  color    : var(--text-muted);
  margin   : 0;
}
.admin-section-sub {
  font-size : 13px;
  color     : var(--text-muted);
  margin    : -12px 0 20px;
}

/* Standalone card (no grid needed in sidebar layout) */
.admin-card-standalone {
  grid-column: unset;
  width      : 100%;
}

/* Secondary block stacked within an .admin-section (e.g. Schema Sync under DB Connection) */
.admin-subsection {
  margin-top   : 40px;
  padding-top  : 32px;
  border-top   : 1px solid var(--border);
}

/* ── Tables search bar ── */
.admin-tables-search {
  display      : flex;
  align-items  : center;
  gap          : 8px;
  background   : var(--bg-card);
  border       : 1px solid var(--border);
  border-radius: var(--r-md);
  padding      : 8px 12px;
  margin-bottom: 12px;
  color        : var(--text-muted);
}
.admin-tables-search input {
  flex      : 1;
  border    : none;
  outline   : none;
  background: transparent;
  font-size : 13px;
  color     : var(--text-primary);
}
.admin-tables-search input::placeholder { color: var(--text-muted); }
[data-theme="dark"] .admin-tables-search { background: var(--bg-card); border-color: rgba(255,255,255,0.08); }

.admin-search-scope {
  display      : flex;
  align-items  : center;
  gap          : 2px;
  background   : var(--bg-hover, #ebebeb);
  border-radius: 6px;
  padding      : 2px;
  flex-shrink  : 0;
}
.admin-scope-btn {
  border       : none;
  background   : transparent;
  color        : var(--text-muted);
  font-size    : 11px;
  font-weight  : 500;
  padding      : 3px 9px;
  border-radius: 4px;
  cursor       : pointer;
  transition   : background 0.15s, color 0.15s;
  white-space  : nowrap;
}
.admin-scope-btn:hover  { color: var(--text-primary); }
.admin-scope-btn.active {
  background: var(--bg-card);
  color     : var(--text-primary);
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
[data-theme="dark"] .admin-search-scope { background: rgba(255,255,255,0.06); }
[data-theme="dark"] .admin-scope-btn.active { background: var(--bg-active); box-shadow: 0 1px 3px rgba(0,0,0,0.4); }

/* ── Toolbar (filter chips + sort) ── */
.admin-tables-toolbar {
  display    : flex;
  align-items: center;
  gap        : 10px;
  margin-bottom: 12px;
  flex-wrap  : wrap;
}
.admin-filter-chips {
  display    : flex;
  align-items: center;
  gap        : 6px;
  flex-wrap  : wrap;
}

/* ── Sort select ── */
.admin-sort-wrap {
  display    : flex;
  align-items: center;
  gap        : 5px;
  margin-left: auto;
  color      : var(--text-muted);
  flex-shrink: 0;
}
.admin-sort-select {
  padding      : 4px 28px 4px 9px;
  border       : 1px solid var(--border);
  border-radius: var(--r-sm);
  background   : var(--bg-card);
  color        : var(--text-primary);
  font-size    : 12px;
  font-family  : inherit;
  cursor       : pointer;
  appearance   : auto;
  outline      : none;
  transition   : border-color var(--t-fast);
}
.admin-sort-select:focus { border-color: var(--accent); }
[data-theme="dark"] .admin-sort-select { background: var(--bg-card); border-color: rgba(255,255,255,0.1); color: var(--sidebar-text); }

/* ── Filter chips ── */
.admin-tables-filters {
  display    : flex;
  align-items: center;
  gap        : 6px;
  margin-bottom: 12px;
  flex-wrap  : wrap;
}
.admin-filter-chip {
  padding      : 4px 12px;
  border-radius: 99px;
  border       : 1px solid var(--border);
  background   : var(--bg-card);
  color        : var(--text-secondary);
  font-size    : 12px;
  font-weight  : 500;
  font-family  : inherit;
  cursor       : pointer;
  transition   : background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
  white-space  : nowrap;
}
.admin-filter-chip:hover { background: var(--bg-hover); color: var(--text-primary); }
.admin-filter-chip.active {
  background  : var(--accent);
  color       : #fff;
  border-color: var(--accent);
}
[data-theme="dark"] .admin-filter-chip { background: var(--bg-card); border-color: rgba(255,255,255,0.1); }
[data-theme="dark"] .admin-filter-chip.active { background: var(--accent); border-color: var(--accent); }

.admin-filter-count {
  font-size    : 11px;
  color        : var(--text-muted);
  margin-left  : auto;
  white-space  : nowrap;
}

/* ── Tables list ── */
.admin-tables-list {
  display       : flex;
  flex-direction: column;
  gap           : 6px;
}
.admin-tables-empty {
  text-align: center;
  padding   : 40px;
  color     : var(--text-muted);
  font-size : 13px;
}

/* ── Table row (accordion) ── */
.admin-table-row {
  background    : var(--bg-card);
  border        : 1px solid var(--border);
  border-radius : var(--r-md);
  overflow      : hidden;
  transition    : box-shadow var(--t-fast);
}
.admin-table-row:hover { box-shadow: var(--shadow-sm); }
.admin-table-row.expanded { box-shadow: var(--shadow-md); border-color: var(--accent-border); }
[data-theme="dark"] .admin-table-row { background: var(--bg-card); border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .admin-table-row.expanded { border-color: rgba(41,74,147,0.4); }

/* Row header (collapsed face) */
.admin-table-row-header {
  display    : flex;
  align-items: center;
  gap        : 12px;
  padding    : 12px 16px;
  cursor     : pointer;
  user-select: none;
  transition : background var(--t-fast);
}
.admin-table-row-header:hover { background: var(--bg-hover); }
[data-theme="dark"] .admin-table-row-header:hover { background: var(--bg-hover); }

.admin-table-row-info {
  flex     : 1;
  min-width: 0;
  display  : flex;
  flex-direction: column;
  gap      : 2px;
}
.admin-table-name {
  font-size  : 13px;
  font-weight: 600;
  color      : var(--text-primary);
}
.admin-table-desc-prev {
  font-size    : 11px;
  color        : var(--text-muted);
  white-space  : nowrap;
  overflow     : hidden;
  text-overflow: ellipsis;
}

.admin-table-row-meta {
  display    : flex;
  align-items: center;
  gap        : 10px;
  flex-shrink: 0;
}
.admin-table-col-count {
  font-size    : 10px;
  font-weight  : 600;
  padding      : 2px 7px;
  border-radius: 99px;
  background   : var(--accent-light);
  color        : var(--accent);
}
[data-theme="dark"] .admin-table-col-count { background: rgba(41,74,147,0.15); color: #ffffff; }

.admin-table-sync-time {
  font-size: 11px;
  color    : var(--text-muted);
  white-space: nowrap;
}
.admin-table-chevron {
  color     : var(--text-muted);
  transition: transform var(--t-fast);
  flex-shrink: 0;
}
.admin-table-row.expanded .admin-table-chevron { transform: rotate(180deg); }

/* Row body (expanded content) */
.admin-table-body {
  border-top: 1px solid var(--border);
  padding   : 16px;
  display   : flex;
  flex-direction: column;
  gap       : 14px;
}
[data-theme="dark"] .admin-table-body { border-color: rgba(255,255,255,0.07); }

.admin-table-edit-section { display: flex; flex-direction: column; gap: 6px; }
.admin-field-label {
  font-size  : 11px;
  font-weight: 600;
  color      : var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.admin-table-desc-input {
  width        : 100%;
  padding      : 9px 11px;
  border       : 1px solid var(--border);
  border-radius: var(--r-sm);
  background   : var(--bg-input);
  color        : var(--text-primary);
  font-size    : 13px;
  line-height  : 1.5;
  resize       : vertical;
  min-height   : 70px;
  transition   : border-color var(--t-fast);
}
.admin-table-desc-input:focus { outline: none; border-color: var(--accent); }
[data-theme="dark"] .admin-table-desc-input { background: var(--bg-hover); border-color: rgba(255,255,255,0.1); }

/* Column list */
.admin-col-list {
  display       : flex;
  flex-direction: column;
  gap           : 4px;
  max-height    : 300px;
  overflow-y    : auto;
}
.admin-col-row {
  display    : flex;
  align-items: center;
  gap        : 10px;
}
.admin-col-name {
  font-size  : 11px;
  font-weight: 500;
  color      : var(--text-secondary);
  font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
  min-width  : 140px;
  flex-shrink: 0;
}
.admin-col-desc {
  flex         : 1;
  padding      : 5px 9px;
  border       : 1px solid var(--border);
  border-radius: var(--r-xs);
  background   : var(--bg-input);
  color        : var(--text-primary);
  font-size    : 12px;
  transition   : border-color var(--t-fast);
}
.admin-col-desc:focus { outline: none; border-color: var(--accent); }
[data-theme="dark"] .admin-col-desc { background: var(--bg-hover); border-color: rgba(255,255,255,0.1); }

/* Access + sync row */
.admin-access-row {
  flex-direction: row !important;
  align-items   : center;
  justify-content: space-between;
}
.admin-access-toggle {
  display    : flex;
  align-items: center;
  gap        : 7px;
  font-size  : 12px;
  color      : var(--text-secondary);
  cursor     : pointer;
  user-select: none;
}
.admin-access-toggle input[type="checkbox"] { cursor: pointer; accent-color: var(--accent); }
.admin-sync-badge {
  font-size: 11px;
  color    : var(--text-muted);
}

/* Table actions row */
.admin-table-actions {
  display    : flex;
  align-items: center;
  gap        : 8px;
  justify-content: flex-end;
}

/* Small button variant */
.admin-btn-sm {
  padding  : 6px 12px !important;
  font-size: 12px !important;
}

/* ── Sync status bar (Tables heading) ── */
.admin-sync-status-bar {
  display      : flex;
  align-items  : center;
  justify-content: space-between;
  gap          : 12px;
  padding      : 10px 14px;
  border-radius: 8px;
  background   : var(--bg-hover);
  border       : 1px solid var(--border);
  margin-bottom: 16px;
}
.admin-sync-status-bar.has-missing {
  border-color : #f59e0b;
  background   : rgba(245, 158, 11, 0.06);
}
[data-theme="dark"] .admin-sync-status-bar.has-missing {
  background   : rgba(245, 158, 11, 0.08);
}
.admin-sync-status-text {
  font-size  : 13px;
  color      : var(--text-secondary);
}
.admin-sync-status-bar.has-missing .admin-sync-status-text {
  color : #b45309;
}
[data-theme="dark"] .admin-sync-status-bar.has-missing .admin-sync-status-text {
  color : #fbbf24;
}

/* ── Time badges (updated + synced) ── */
.admin-time-badges {
  display    : flex;
  align-items: center;
  gap        : 10px;
  flex-wrap  : wrap;
}
.admin-sync-badge {
  font-size: 11px;
  color    : var(--text-muted);
  white-space: nowrap;
}

/* ── Scroll-to-top floating button ── */
.admin-scroll-top {
  position     : fixed;
  bottom       : 28px;
  right        : 28px; /* bottom-right of viewport, clear of table content */
  width        : 36px;
  height       : 36px;
  border-radius: 50%;
  background   : var(--accent);
  color        : #fff;
  border       : none;
  cursor       : pointer;
  display      : flex;
  align-items  : center;
  justify-content: center;
  box-shadow   : 0 3px 10px rgba(41,74,147,0.35);
  opacity      : 0;
  transform    : translateY(10px);
  pointer-events: none;
  transition   : opacity var(--t-base), transform var(--t-base), background var(--t-fast);
  z-index      : 50;
}
.admin-scroll-top.visible {
  opacity       : 1;
  transform     : translateY(0);
  pointer-events: auto;
}
.admin-scroll-top:hover {
  background: var(--accent-hover);
  box-shadow: 0 5px 14px rgba(41,74,147,0.5);
}

/* ============================================================
   FEEDBACK BAR
   ============================================================ */

.feedback-bar {
  display      : flex;
  align-items  : center;
  gap          : 4px;
  margin-top   : 14px;
  padding      : 12px 2px 0;
  border-top   : 1px solid var(--border);
  flex-wrap    : wrap;
}

.fb-divider {
  width      : 1px;
  height     : 16px;
  background : var(--border);
  margin     : 0 6px;
}

/* "‹ 1/3 ›" attempt browser - same visual weight as the feedback icons it
   sits beside, so it reads as one toolbar rather than a bolted-on control. */
.attempt-nav {
  display      : flex;
  align-items  : center;
  gap          : 2px;
  margin-right : 4px;
}
.attempt-nav-btn {
  display        : flex;
  align-items    : center;
  justify-content: center;
  width          : 22px;
  height         : 22px;
  border         : none;
  border-radius  : var(--r-sm);
  background     : transparent;
  color          : var(--text-muted);
  transition     : color var(--t-fast), background var(--t-fast);
}
.attempt-nav-btn:hover:not(:disabled) {
  color      : var(--accent);
  background : var(--accent-light);
}
.attempt-nav-btn:disabled {
  opacity: 0.35;
}
.attempt-nav-count {
  font-size    : 11px;
  color        : var(--text-muted);
  min-width    : 26px;
  text-align   : center;
  font-variant-numeric: tabular-nums;
}

.fb-btn {
  display        : flex;
  align-items    : center;
  justify-content: center;
  width          : 28px;
  height         : 28px;
  border         : none;
  border-radius  : var(--r-sm);
  background     : transparent;
  color          : var(--text-muted);
  transition     : color var(--t-fast), background var(--t-fast);
}
.fb-btn:hover {
  color        : var(--accent);
  background   : var(--accent-light);
}
.fb-btn.fb-active.fb-up {
  color        : #16a34a;
  background   : #f0fdf4;
}
.fb-btn.fb-active.fb-down {
  color        : #dc2626;
  background   : #fef2f2;
}

.fb-copy.fb-copied {
  color        : #16a34a;
  border-color : #86efac;
  background   : #f0fdf4;
}

.fb-comment-wrap {
  display    : flex;
  align-items: center;
  gap        : 6px;
  margin-left: 4px;
  flex       : 1;
  min-width  : 0;
}
.fb-comment-input {
  flex         : 1;
  min-width    : 120px;
  max-width    : 340px;
  height       : 28px;
  padding      : 0 8px;
  font-size    : 12px;
  border       : 1px solid var(--border);
  border-radius: var(--r-sm);
  background   : var(--bg-input);
  color        : var(--text-primary);
  outline      : none;
  transition   : border-color var(--t-fast);
}
.fb-comment-input:focus {
  border-color: var(--accent);
}
.fb-submit-btn {
  height        : 28px;
  padding       : 0 10px;
  font-size     : 12px;
  font-weight   : 500;
  border        : none;
  border-radius : var(--r-sm);
  background    : var(--accent);
  color         : #fff;
  transition    : background var(--t-fast);
  white-space   : nowrap;
}
.fb-submit-btn:hover {
  background: var(--accent-dark);
}

.fb-thanks {
  font-size  : 11px;
  color      : #16a34a;
  margin-left: 6px;
}

[data-theme="dark"] .fb-btn {
  color: var(--text-muted);
}
[data-theme="dark"] .fb-btn:hover {
  color      : #ffffff;
  background : rgba(41,74,147,0.16);
}
[data-theme="dark"] .attempt-nav-btn:hover:not(:disabled) {
  color      : #ffffff;
  background : rgba(41,74,147,0.16);
}
[data-theme="dark"] .fb-divider {
  background: var(--border);
}
[data-theme="dark"] .fb-comment-input {
  background  : var(--bg-input);
  border-color: rgba(255,255,255,0.1);
  color       : #ffffff;
}
[data-theme="dark"] .fb-comment-input:focus {
  border-color: var(--accent);
}

/* ── Sessions loading state ── */
.sessions-loading {
  display        : flex;
  justify-content: center;
  padding        : 2rem;
  color          : var(--text-muted);
}
/* Same spinner as .sessions-loading, but sized for "loading the next page"
   at the bottom of an already-populated list rather than the initial fetch. */
.sessions-loading-more {
  display        : flex;
  justify-content: center;
  padding        : 0.75rem;
  color          : var(--text-muted);
}
.spin-icon {
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Messages loading dots (shown when switching sessions) ── */
.messages-loading {
  display        : flex;
  justify-content: center;
  align-items    : center;
  gap            : 6px;
  padding        : 3rem;
}
.messages-loading span {
  width        : 8px;
  height       : 8px;
  border-radius: 50%;
  background   : var(--accent);
  animation    : bounce 1.2s ease-in-out infinite;
}
.messages-loading span:nth-child(1) { animation-delay: 0s; }
.messages-loading span:nth-child(2) { animation-delay: .15s; }
.messages-loading span:nth-child(3) { animation-delay: .3s; }
@keyframes bounce {
  0%,80%,100% { transform: scale(.8); opacity: .4; }
  40%         { transform: scale(1.1); opacity: 1;  }
}

/* Auto-load-older spinner: same dots, a fraction of the full-page padding
   so pulling in another page doesn't visibly shove content down. */
.top-loading-indicator { padding: 0.85rem; }

/* Suggested-questions loading: same dots, lighter padding so it sits
   naturally in place of the tiles rather than pushing the empty state
   around while the (now-uncached, always-refetched) list loads. */
.suggested-questions-loading { padding: 0.5rem; }

/* ── Admin — Practice selector ── */
.admin-practice-wrap {
  padding      : 0.75rem 1rem 0.75rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.admin-practice-label {
  display       : block;
  font-size     : 10px;
  font-weight   : 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color         : rgba(255,255,255,0.4);
  margin-bottom : 6px;
}
.admin-practice-select-wrap {
  display    : flex;
  align-items: center;
  gap        : 6px;
  color      : rgba(255,255,255,0.35);
}
.admin-practice-select {
  flex         : 1;
  background   : rgba(255,255,255,0.06);
  border       : 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  color        : #ffffff;
  font-size    : 13px;
  padding      : 5px 8px;
  cursor       : pointer;
  appearance   : none;
}
.admin-practice-select:focus {
  outline     : none;
  border-color: rgba(242,169,0,0.6);
}
.admin-practice-select option {
  background: var(--sidebar-elevated);
  color     : #ffffff;
}

/* Locked practice display for practice_admin (no dropdown) */
.admin-practice-locked {
  padding      : 0.75rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display      : flex;
  flex-direction: column;
  gap          : 4px;
}
.admin-practice-locked-label {
  font-size     : 10px;
  font-weight   : 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color         : rgba(255,255,255,0.4);
}
.admin-practice-locked-value {
  font-size    : 13px;
  font-weight  : 600;
  color        : #ffffff;
  background   : rgba(255,255,255,0.06);
  border       : 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  padding      : 5px 10px;
}

/* ── Admin — Refresh backend button ── */
.admin-refresh-wrap {
  padding    : 0.75rem 1rem 0.5rem;
  border-top : 1px solid rgba(255,255,255,0.07);
  margin-top : auto;
}
.admin-refresh-btn {
  display        : flex;
  align-items    : center;
  gap            : 0.5rem;
  width          : 100%;
  padding        : 0.5rem 0.75rem;
  border         : 1px solid rgba(255,255,255,0.12);
  border-radius  : 6px;
  background     : rgba(255,255,255,0.05);
  color          : var(--text-muted);
  font-size      : 0.78rem;
  cursor         : pointer;
  transition     : background 0.15s, color 0.15s;
}
.admin-refresh-btn:hover:not(:disabled) {
  background : rgba(242,169,0,0.18);
  color      : #ffffff;
  border-color: rgba(242,169,0,0.4);
}
.admin-refresh-btn:disabled {
  opacity: 0.5;
  cursor : not-allowed;
}
.admin-refresh-btn.refreshing svg {
  animation: spin 1s linear infinite;
}
.admin-refresh-status {
  display    : block;
  font-size  : 0.7rem;
  margin-top : 0.35rem;
  min-height : 1em;
  transition : color 0.2s;
}
.admin-refresh-status.saving  { color: var(--text-muted); }
.admin-refresh-status.success { color: #34d399; }
.admin-refresh-status.error   { color: #f87171; }

/* ── Admin — Telemetry section ── */
.tele-summary-grid {
  display              : grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap                  : 1rem;
  margin-top           : 1rem;
}
.tele-card {
  background   : var(--bg-secondary, #f5f5f5);
  border       : 1px solid var(--border, #d2d2d2);
  border-radius: 10px;
  padding      : 1.2rem 1.4rem;
  text-align   : center;
  transition   : box-shadow .15s;
}
.tele-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
}
.tele-card-label {
  font-size     : 11px;
  font-weight   : 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color         : var(--text-muted);
  margin-bottom : 8px;
}
.tele-card-value {
  font-size  : 1.75rem;
  font-weight: 700;
  color      : #294a93;
  line-height: 1;
}
.tele-table {
  width          : 100%;
  border-collapse: collapse;
  font-size      : 13px;
}
.tele-table th {
  background    : var(--bg-secondary, #f5f5f5);
  color         : var(--text-muted);
  font-size     : 11px;
  font-weight   : 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding       : 10px 16px;
  text-align    : left;
  border-bottom : 2px solid var(--border, #d2d2d2);
}
.tele-table td {
  padding      : 10px 16px;
  border-bottom: 1px solid var(--border, #d2d2d2);
  color        : #464646;
  vertical-align: top;
}
.tele-table tr:last-child td { border-bottom: none; }
.tele-table tr:hover td      { background: #f5f5f5; }
.tele-provider-badge {
  background   : var(--accent-light);
  color        : var(--accent-dark);
  font-size    : 11px;
  font-weight  : 600;
  padding      : 2px 10px;
  border-radius: 20px;
}
.tele-model-badge {
  background   : #f0fdf4;
  color        : #166534;
  font-size    : 11px;
  font-weight  : 600;
  padding      : 2px 10px;
  border-radius: 20px;
}
.tele-cost {
  font-weight: 600;
  color      : #cf9000;
}
.tele-card-cost .tele-card-value { color: #cf9000; }
.tele-card-sub {
  font-size  : 10px;
  color      : var(--text-muted);
  margin-top : 4px;
}
.tele-op-badge {
  font-size    : 11px;
  font-weight  : 600;
  padding      : 2px 10px;
  border-radius: 20px;
  background   : #ebebeb;
  color        : var(--text-secondary);
}
.tele-op-group {
  font-size    : 10px;
  font-weight  : 500;
  color        : var(--text-muted);
  margin-left  : 6px;
  letter-spacing: .03em;
}

/* Filter bar */
.tele-filter-bar {
  display    : flex;
  flex-wrap  : wrap;
  align-items: flex-end;
  gap        : 12px;
  margin-top : 1rem;
  padding    : 14px 16px;
  background : var(--bg-secondary, #f5f5f5);
  border     : 1px solid var(--border, #d2d2d2);
  border-radius: 10px;
}
.tele-filter-group {
  display       : flex;
  flex-direction: column;
  gap           : 4px;
}
.tele-filter-label {
  font-size     : 10px;
  font-weight   : 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color         : var(--text-muted);
}
.tele-filter-select,
.tele-filter-input {
  height       : 32px;
  padding      : 0 10px;
  font-size    : 12.5px;
  border       : 1px solid var(--border, #d2d2d2);
  border-radius: 6px;
  background   : white;
  color        : #000000;
  outline      : none;
  min-width    : 140px;
}
.tele-filter-select:focus,
.tele-filter-input:focus {
  border-color: var(--accent);
  box-shadow  : 0 0 0 2px color-mix(in srgb, var(--accent) 15%, transparent);
}
.tele-filter-reset { align-self: flex-end; }

.tele-table-section  { margin-top: 1.5rem; overflow-x: auto; }
.tele-truncate {
  display      : inline-block;
  max-width    : 220px;
  overflow     : hidden;
  text-overflow: ellipsis;
  white-space  : nowrap;
  vertical-align: bottom;
}
.tele-table-heading  {
  font-size    : 12px;
  font-weight  : 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color        : var(--text-muted);
  margin-bottom: 8px;
}
.tele-empty {
  padding  : 1.5rem;
  color    : var(--text-muted);
  font-size: 13px;
  text-align: center;
}

/* Dark mode tweaks for telemetry */
[data-theme="dark"] .tele-card {
  background: var(--bg-hover);
  border-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .tele-card-label { color: var(--text-muted); }
[data-theme="dark"] .tele-card-value { color: var(--accent-tint); }
[data-theme="dark"] .tele-card-cost .tele-card-value { color: #f2a900; }
[data-theme="dark"] .tele-cost       { color: #f2a900; }
[data-theme="dark"] .tele-table th   { background: var(--bg-hover); color: var(--text-muted); border-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .tele-table td   { color: var(--text-secondary); border-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .tele-table tr:hover td { background: rgba(255,255,255,0.03); }
[data-theme="dark"] .tele-provider-badge    { background: rgba(41,74,147,0.2); color: var(--accent-tint); }
[data-theme="dark"] .tele-model-badge       { background: rgba(22,101,52,0.2); color: #86efac; }
[data-theme="dark"] .tele-filter-bar        { background: var(--bg-hover); border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .tele-filter-select,
[data-theme="dark"] .tele-filter-input      { background: var(--bg-input); color: #ffffff; border-color: rgba(255,255,255,0.1); }

/* ============================================================
   PERFORMANCE SECTION
   ============================================================ */

/* Provider badge (overview table + detail header) */
.perf-provider-badge {
  display      : inline-block;
  background   : var(--accent-light);
  color        : var(--accent-dark);
  font-size    : 12px;
  font-weight  : 600;
  padding      : 3px 12px;
  border-radius: 20px;
  white-space  : nowrap;
}
.perf-provider-badge--lg {
  font-size  : 15px;
  padding    : 5px 18px;
}
[data-theme="dark"] .perf-provider-badge {
  background: rgba(41,74,147,0.2);
  color     : var(--accent-tint);
}

/* Table tweaks for perf table */
.perf-table .perf-num    { text-align: right; font-variant-numeric: tabular-nums; }
.perf-table .perf-cost   { font-weight: 600; color: var(--gold-dark); }
.perf-table .perf-muted  { color: var(--text-muted); font-size: 12px; }
[data-theme="dark"] .perf-table .perf-cost  { color: var(--gold); }
[data-theme="dark"] .perf-table .perf-muted { color: var(--text-muted); }

/* Clickable provider row */
.perf-provider-row { cursor: pointer; transition: background 0.12s; }
.perf-provider-row:hover td { background: var(--accent-light) !important; }
[data-theme="dark"] .perf-provider-row:hover td { background: rgba(41,74,147,0.07) !important; }

/* Session title cell */
.perf-session-title {
  max-width    : 260px;
  overflow     : hidden;
  text-overflow: ellipsis;
  white-space  : nowrap;
  font-weight  : 500;
  color        : var(--text-primary);
}

/* Detail page header: back button + provider badge */
.perf-detail-header {
  display    : flex;
  align-items: center;
  gap        : 16px;
  margin-bottom: 20px;
}
.perf-back-btn {
  display      : flex;
  align-items  : center;
  gap          : 6px;
  padding      : 6px 14px;
  border       : 1px solid var(--border);
  border-radius: 7px;
  background   : var(--bg-card);
  color        : var(--text-secondary);
  font-size    : 13px;
  font-weight  : 500;
  font-family  : inherit;
  cursor       : pointer;
  transition   : background 0.12s, color 0.12s, border-color 0.12s;
  flex-shrink  : 0;
}
.perf-back-btn:hover {
  background  : var(--bg-hover);
  color       : var(--text-primary);
  border-color: var(--accent-border);
}
[data-theme="dark"] .perf-back-btn {
  background  : var(--bg-card);
  border-color: rgba(255,255,255,0.1);
}
[data-theme="dark"] .perf-back-btn:hover {
  background  : var(--bg-hover);
  border-color: rgba(41,74,147,0.4);
}
.perf-detail-title {
  font-size  : 16px;
  font-weight: 700;
  color      : var(--text-primary);
}

/* Summary stat cards (detail view) */
.perf-detail-stats {
  display              : grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap                  : 12px;
  margin-bottom        : 24px;
}
.perf-stat-card {
  background   : var(--bg-secondary, #f5f5f5);
  border       : 1px solid var(--border);
  border-radius: 10px;
  padding      : 16px 18px;
  text-align   : center;
}
.perf-stat-card--cost { border-color: var(--gold-border); }
.perf-stat-label {
  font-size     : 11px;
  font-weight   : 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color         : var(--text-muted);
  margin-bottom : 8px;
}
.perf-stat-value {
  font-size  : 1.6rem;
  font-weight: 700;
  color      : #294a93;
  line-height: 1;
}
.perf-stat-card--cost .perf-stat-value { color: var(--gold-dark); }
.perf-stat-sub {
  font-size : 10px;
  color     : var(--text-muted);
  margin-top: 4px;
}

/* Dark mode for detail stats */
[data-theme="dark"] .perf-stat-card {
  background  : var(--bg-hover);
  border-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .perf-stat-card--cost { border-color: rgba(242,169,0,0.35); }
[data-theme="dark"] .perf-stat-label  { color: var(--text-muted); }
[data-theme="dark"] .perf-stat-value  { color: var(--accent-tint); }
[data-theme="dark"] .perf-stat-card--cost .perf-stat-value { color: var(--gold); }


/* ═══════════════════════════════════════════════════════════════════
   PRACTICE ADMIN - Telemetry UI  (pa-*)
═══════════════════════════════════════════════════════════════════ */
.pa-tele-page{padding:1.75rem 2rem;display:flex;flex-direction:column;gap:1.5rem;min-height:100%}
.pa-tele-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.pa-tele-title{font-size:1.5rem;font-weight:700;color:var(--text-primary,#000000);margin:0 0 .25rem;letter-spacing:-.02em}
.pa-tele-subtitle{font-size:.875rem;color:var(--text-muted);margin:0}
.pa-refresh-btn{display:flex;align-items:center;gap:.4rem;padding:.45rem 1rem;background:var(--surface-2,#ebebeb);border:1px solid var(--border,#d2d2d2);border-radius:8px;font-size:.8125rem;font-weight:500;color:var(--text-secondary);cursor:pointer;white-space:nowrap;flex-shrink:0;transition:background .15s}
.pa-refresh-btn:hover{background:var(--surface-3,#d2d2d2)}
.pa-filter-bar{display:flex;align-items:flex-end;gap:.875rem;padding:1rem 1.25rem;background:var(--surface-2,#f5f5f5);border:1px solid var(--border,#d2d2d2);border-radius:12px;flex-wrap:wrap}
.pa-filter-group{display:flex;flex-direction:column;gap:.35rem;flex:1;min-width:140px}
.pa-filter-label{display:flex;align-items:center;gap:.35rem;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted)}
.pa-filter-select,.pa-filter-input{padding:.45rem .75rem;border:1px solid var(--border,#d2d2d2);border-radius:8px;font-size:.8125rem;background:var(--surface,#fff);color:var(--text-primary,#000000);cursor:pointer;outline:none;transition:border-color .15s}
.pa-filter-select:focus,.pa-filter-input:focus{border-color:var(--accent)}
.pa-filter-clear{padding:.45rem 1rem;background:transparent;border:1px solid var(--border,#d2d2d2);border-radius:8px;font-size:.8125rem;font-weight:500;color:var(--text-muted);cursor:pointer;align-self:flex-end;transition:all .15s}
.pa-filter-clear:hover{background:var(--surface-3,#d2d2d2);color:var(--text-primary,#000000)}
.pa-kpi-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem}
.pa-kpi-card{display:flex;align-items:center;gap:.875rem;padding:1.1rem 1.25rem;background:var(--surface,#fff);border:1px solid var(--border,#d2d2d2);border-radius:12px;box-shadow:0 1px 4px rgba(0,0,0,.04);transition:box-shadow .2s}
.pa-kpi-card:hover{box-shadow:0 4px 12px rgba(0,0,0,.08)}
.pa-kpi-card--cost{background:linear-gradient(135deg,var(--gold-light),rgba(242,169,0,0.18));border-color:var(--gold-border)}
.pa-kpi-icon{flex-shrink:0;color:var(--accent);opacity:.75}
.pa-kpi-card--cost .pa-kpi-icon{color:var(--gold-dark);opacity:.9}
.pa-kpi-body{display:flex;flex-direction:column;gap:.2rem}
.pa-kpi-value{font-size:1.375rem;font-weight:700;color:var(--text-primary,#000000);line-height:1;letter-spacing:-.02em}
.pa-kpi-card--cost .pa-kpi-value{color:#cf9000}
.pa-kpi-label{font-size:.75rem;font-weight:500;color:var(--text-muted)}
.pa-kpi-currency{font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--gold-dark);opacity:.7}
.pa-table-section{background:var(--surface,#fff);border:1px solid var(--border,#d2d2d2);border-radius:12px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.04)}
.pa-table-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem .875rem;border-bottom:1px solid var(--border,#d2d2d2)}
.pa-table-title{display:flex;align-items:center;gap:.5rem;font-size:.9rem;font-weight:600;color:var(--text-primary,#000000)}
.pa-table-title svg{color:var(--accent);opacity:.8;flex-shrink:0}
.pa-table-count{font-size:.75rem;font-weight:500;color:var(--text-muted);background:var(--surface-2,#ebebeb);padding:.2rem .6rem;border-radius:20px;border:1px solid var(--border,#d2d2d2)}
.pa-table-wrap{overflow-x:auto}
.pa-tele-table{width:100%;border-collapse:collapse;font-size:.825rem}
.pa-tele-table thead tr{background:var(--surface-2,#f5f5f5)}
.pa-tele-table th{padding:.7rem 1rem;text-align:left;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);white-space:nowrap;border-bottom:1px solid var(--border,#d2d2d2)}
.pa-th-rank{width:36px;text-align:center}
.pa-tele-row td{padding:.75rem 1rem;border-bottom:1px solid var(--border,#d2d2d2);vertical-align:middle;color:var(--text-primary,#464646)}
.pa-tele-row:last-child td{border-bottom:none}
.pa-tele-row:hover td{background:var(--surface-2,#f5f5f5)}
.pa-tele-rank{text-align:center;font-size:.75rem;font-weight:600;color:var(--text-muted)}
.pa-provider-cell{display:flex;align-items:center;gap:.6rem}
.pa-provider-avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-dark));color:#fff;font-size:.75rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pa-provider-name{font-weight:500;color:var(--text-primary,#000000)}
.pa-model-tag{display:inline-block;padding:.2rem .6rem;background:rgba(41,74,147,.08);border:1px solid rgba(41,74,147,.18);border-radius:6px;font-size:.72rem;font-weight:500;color:var(--accent-dark);white-space:nowrap}
.pa-num{text-align:right;font-variant-numeric:tabular-nums}
.pa-cost-cell{color:#cf9000;font-weight:600}
.pa-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem 2rem;gap:.75rem;color:var(--text-muted);text-align:center}
.pa-empty-state p{font-size:.875rem;margin:0}
[data-theme="dark"] .pa-tele-title{color:#ffffff}
[data-theme="dark"] .pa-tele-subtitle{color:var(--text-muted)}
[data-theme="dark"] .pa-refresh-btn{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1);color:var(--text-muted)}
[data-theme="dark"] .pa-filter-bar{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.08)}
[data-theme="dark"] .pa-filter-label{color:var(--text-muted)}
[data-theme="dark"] .pa-filter-select,[data-theme="dark"] .pa-filter-input{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1);color:#ffffff}
[data-theme="dark"] .pa-filter-select option{background:var(--bg-hover)}
[data-theme="dark"] .pa-filter-clear{border-color:rgba(255,255,255,.1);color:var(--text-muted)}
[data-theme="dark"] .pa-kpi-card{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08)}
[data-theme="dark"] .pa-kpi-card--cost{background:rgba(242,169,0,0.14);border-color:rgba(242,169,0,0.3)}
[data-theme="dark"] .pa-kpi-value{color:#ffffff}
[data-theme="dark"] .pa-kpi-card--cost .pa-kpi-value{color:var(--gold)}
[data-theme="dark"] .pa-kpi-label{color:var(--text-muted)}
[data-theme="dark"] .pa-kpi-icon{color:var(--accent-tint)}
[data-theme="dark"] .pa-table-section{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08)}
[data-theme="dark"] .pa-table-header{border-color:rgba(255,255,255,.08)}
[data-theme="dark"] .pa-table-title{color:#ffffff}
[data-theme="dark"] .pa-table-title svg{color:var(--accent-tint)}
[data-theme="dark"] .pa-table-count{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1);color:var(--text-muted)}
[data-theme="dark"] .pa-tele-table thead tr{background:rgba(255,255,255,.04)}
[data-theme="dark"] .pa-tele-table th{color:var(--text-muted);border-color:rgba(255,255,255,.08)}
[data-theme="dark"] .pa-tele-row td{border-color:rgba(255,255,255,.05);color:#ffffff}
[data-theme="dark"] .pa-tele-row:hover td{background:rgba(255,255,255,.04)}
[data-theme="dark"] .pa-provider-name{color:#ffffff}
[data-theme="dark"] .pa-model-tag{background:rgba(41,74,147,.15);border-color:rgba(41,74,147,.3);color:var(--accent-tint)}
[data-theme="dark"] .pa-cost-cell{color:var(--gold)}
[data-theme="dark"] .pa-empty-state{color:var(--text-muted)}