/* ═══════════════════════════════════════════════════════════════════════
   KIMBA'S ACADEMY — DESIGN TOKENS
   ─────────────────────────────────────────────────────────────────────
   Source of truth: component-kit.html v1.0 (2026-03-10)
   
   This file defines the global brand token layer for MentorshipOS.
   It is purely additive — no existing styles are overridden.
   
   Tokens are available globally but NOT consumed by app code yet.
   Later phases will replace hardcoded values with these tokens.
   
   Token groups:
     1. Backgrounds  (--ka-bg-*)
     2. Text         (--ka-text-*)
     3. Accent       (--ka-accent-*)
     4. Semantic     (--ka-success, --ka-error, --ka-warning)
     5. Typography   (--ka-font-*, --ka-weight-*, --ka-tracking-*)
     6. Spacing      (--ka-space-*)
     7. Radius       (--ka-radius-*)
     8. Transitions  (--ka-ease, --ka-duration-*)
     9. Derived      (--ka-border-*, --ka-on-accent, --ka-on-volt-fill)
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Backgrounds ── */
  --ka-bg-void:        #000000;
  --ka-bg-shadow:      rgba(255, 255, 255, 0.08);
  --ka-bg-charcoal:    #323232;

  /* ── Text ── */
  --ka-text-primary:   #EEEEEE;
  --ka-text-secondary: #CDCDCD;
  --ka-text-muted:     #7D7D7D;

  /* ── Accent ── */
  --ka-accent-volt:        #FFF313;
  --ka-accent-volt-hover:  #C0B400;
  --ka-accent-volt-muted:  rgba(255, 243, 19, 0.12);
  --ka-accent-volt-fill:   #FFF313;   /* always volt yellow — for CTA button fills */
  --ka-on-volt-fill:       #000000;   /* text/icons on yellow CTA fills (both themes) */

  /* ── Semantic ── */
  --ka-success:        #4ADE80;
  --ka-success-muted:  rgba(74, 222, 128, 0.10);
  --ka-error:          #F14D3D;
  --ka-error-muted:    rgba(241, 77, 61, 0.10);
  --ka-warning:        #FFF313;

  /* ── Typography ── */
  --ka-font-body:    'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
  --ka-font-mono:    'Geist Mono', 'Fira Code', monospace;

  /* ── Weights ── */
  --ka-weight-light:      300;
  --ka-weight-regular:    400;
  --ka-weight-medium:     500;
  --ka-weight-semibold:   600;
  --ka-weight-bold:       700;
  --ka-weight-extrabold:  800;

  /* ── Tracking ── */
  --ka-tracking-tight:   -0.02em;
  --ka-tracking-snug:    -0.01em;
  --ka-tracking-normal:   0em;
  --ka-tracking-label:    0.10em;
  --ka-tracking-micro:    0.12em;

  /* ── Spacing ── */
  --ka-space-2xs: 0.125rem;
  --ka-space-xs:  0.25rem;
  --ka-space-sm:  0.5rem;
  --ka-space-md:  1rem;
  --ka-space-lg:  1.5rem;
  --ka-space-xl:  2rem;
  --ka-space-2xl: 3rem;
  --ka-space-3xl: 4rem;

  /* ── Radius ── */
  --ka-radius-sm:   4px;
  --ka-radius-md:   8px;
  --ka-radius-lg:   12px;
  --ka-radius-xl:   16px;
  --ka-radius-full: 9999px;

  /* ── Transitions ── */
  --ka-ease:            cubic-bezier(0.4, 0, 0.2, 1);
  --ka-duration-fast:   150ms;
  --ka-duration-default: 250ms;

  /* ── Shadows ── */
  --ka-shadow-none:     none;
  --ka-shadow-subtle:   0 1px 2px rgba(0,0,0,0.3);
  --ka-shadow-elevated: 0 8px 24px rgba(0,0,0,0.4);
  --ka-focus-ring:      0 0 0 2px var(--ka-bg-void), 0 0 0 4px rgba(255,255,255,0.15);

  /* ── Component-level derived tokens ── */
  --ka-border:          #1e1e1e;
  --ka-border-subtle:   #141414;
  --ka-on-accent:       #000000;   /* text on --ka-accent-volt (yellow in dark, slate in light) */
  --ka-on-volt-fill:    #000000;   /* text on --ka-accent-volt-fill (always yellow) */
}

/* ═══════════════════════════════════════════════════════════════════════
   LIGHT MODE OVERRIDES
   ─────────────────────────────────────────────────────────────────────
   Applied when [data-theme="light"] is set on any ancestor element.
   Only tokens that change between modes are overridden here.
   Accent, semantic, weights, tracking, spacing, radius, and
   transitions remain unchanged across modes.
   ═══════════════════════════════════════════════════════════════════════ */

[data-theme="light"],
html.light-mode {
  --ka-bg-void:        #FFFFFF;
  --ka-bg-shadow:      #F2F2F2;
  --ka-bg-charcoal:    #E4E4E4;
  --ka-text-primary:   #111111;
  --ka-text-secondary: #444444;
  --ka-text-muted:     #999999;
  --ka-border:         #E0E0E0;
  --ka-border-subtle:  #EBEBEB;

  /* Accent: swap volt yellow → dark slate for text/icon readability */
  --ka-accent-volt:        #0f172a;
  --ka-accent-volt-hover:  #334155;
  --ka-accent-volt-muted:  rgba(15, 23, 42, 0.06);
  --ka-accent-volt-fill:   #FFF313;   /* CTA buttons stay yellow */
  --ka-on-volt-fill:       #000000;   /* black on yellow CTAs (readable in light mode) */
  --ka-on-accent:          #ffffff;   /* text on --ka-accent-volt (slate in light mode) */

  --ka-success-muted:  rgba(74, 222, 128, 0.15);
  --ka-error-muted:    rgba(241, 77, 61, 0.12);
  --ka-shadow-subtle:   0 1px 2px rgba(0,0,0,0.06);
  --ka-shadow-elevated: 0 8px 24px rgba(0,0,0,0.08);
  --ka-focus-ring:      0 0 0 2px var(--ka-bg-void), 0 0 0 4px rgba(0,0,0,0.12);
}

/* ═══════════════════════════════════════════════════════════════════════
   AUTOFILL — keep brand input surfaces readable
   Chrome / Safari / Password Manager paint a light-blue fill (#e8f0fe)
   and restyle the value. That makes login, forgot-password, and reset
   fields near-invisible on dark inputs. Browsers ignore background-color
   on autofill; an opaque inset box-shadow plus -webkit-text-fill-color
   is the reliable override. Tokens swap in light mode automatically.
   ═══════════════════════════════════════════════════════════════════════ */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
select:-webkit-autofill:active,
input:autofill,
input:autofill:hover,
input:autofill:focus,
input:autofill:active,
textarea:autofill,
textarea:autofill:hover,
textarea:autofill:focus,
textarea:autofill:active,
select:autofill,
select:autofill:hover,
select:autofill:focus,
select:autofill:active {
  -webkit-text-fill-color: var(--ka-text-primary) !important;
  caret-color: var(--ka-text-primary);
  color: var(--ka-text-primary);
  box-shadow: 0 0 0 1000px var(--ka-bg-void) inset !important;
  -webkit-box-shadow: 0 0 0 1000px var(--ka-bg-void) inset !important;
  transition: background-color 99999s ease-in-out 0s;
}

html.light-mode input:-webkit-autofill,
html.light-mode input:-webkit-autofill:hover,
html.light-mode input:-webkit-autofill:focus,
html.light-mode input:-webkit-autofill:active,
html.light-mode textarea:-webkit-autofill,
html.light-mode textarea:-webkit-autofill:hover,
html.light-mode textarea:-webkit-autofill:focus,
html.light-mode textarea:-webkit-autofill:active,
html.light-mode select:-webkit-autofill,
html.light-mode select:-webkit-autofill:hover,
html.light-mode select:-webkit-autofill:focus,
html.light-mode select:-webkit-autofill:active,
html.light-mode input:autofill,
html.light-mode input:autofill:hover,
html.light-mode input:autofill:focus,
html.light-mode input:autofill:active,
html.light-mode textarea:autofill,
html.light-mode textarea:autofill:hover,
html.light-mode textarea:autofill:focus,
html.light-mode textarea:autofill:active,
html.light-mode select:autofill,
html.light-mode select:autofill:hover,
html.light-mode select:autofill:focus,
html.light-mode select:autofill:active,
[data-theme="light"] input:-webkit-autofill,
[data-theme="light"] input:-webkit-autofill:hover,
[data-theme="light"] input:-webkit-autofill:focus,
[data-theme="light"] input:-webkit-autofill:active,
[data-theme="light"] textarea:-webkit-autofill,
[data-theme="light"] textarea:-webkit-autofill:hover,
[data-theme="light"] textarea:-webkit-autofill:focus,
[data-theme="light"] textarea:-webkit-autofill:active,
[data-theme="light"] select:-webkit-autofill,
[data-theme="light"] select:-webkit-autofill:hover,
[data-theme="light"] select:-webkit-autofill:focus,
[data-theme="light"] select:-webkit-autofill:active,
[data-theme="light"] input:autofill,
[data-theme="light"] input:autofill:hover,
[data-theme="light"] input:autofill:focus,
[data-theme="light"] input:autofill:active,
[data-theme="light"] textarea:autofill,
[data-theme="light"] textarea:autofill:hover,
[data-theme="light"] textarea:autofill:focus,
[data-theme="light"] textarea:autofill:active,
[data-theme="light"] select:autofill,
[data-theme="light"] select:autofill:hover,
[data-theme="light"] select:autofill:focus,
[data-theme="light"] select:autofill:active {
  -webkit-text-fill-color: var(--ka-text-primary) !important;
  caret-color: var(--ka-text-primary);
  color: var(--ka-text-primary);
  box-shadow: 0 0 0 1000px var(--ka-bg-shadow) inset !important;
  -webkit-box-shadow: 0 0 0 1000px var(--ka-bg-shadow) inset !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   PREMIUM GLASS AESTHETIC CLASSES
   ─────────────────────────────────────────────────────────────────────
   Brand-specific gradients, borders, and shadows for dashboard components.
   ═══════════════════════════════════════════════════════════════════════ */

/* Main Dashboard Containers ("Do Now", "Momentum", "Your Journey", etc.) */
.glass-panel {
  position: relative; 
  overflow: hidden;
  border-radius: var(--ka-radius-xl);
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: linear-gradient(180deg, #2a2a2a 0%, #151515 100%);
  box-shadow: 
    0 24px 64px rgba(0, 0, 0, 0.6), 
    inset 0 1px 0 rgba(255, 255, 255, 0.15); /* Top inner glow */
  color: var(--ka-text-primary);
}

html.light-mode .glass-panel,
[data-theme="light"] .glass-panel {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  color: #0f172a !important;
}

/* Smaller inner cards (like "Session Notes", "Homework Received") */
.glass-item {
  border-radius: var(--ka-radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(42,42,42,0.6) 0%, rgba(21,21,21,0.6) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.glass-item:hover {
  background: linear-gradient(180deg, rgba(50,50,50,0.8) 0%, rgba(30,30,30,0.8) 100%);
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.2);
}

html.light-mode .glass-item,
[data-theme="light"] .glass-item {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

html.light-mode .glass-item:hover,
[data-theme="light"] .glass-item:hover {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  transform: translateY(-2px);
}

/* Optional ambient background glow for the most important cards (e.g. "Do Now" banner) */
.glass-glow-volt {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 80% 80% at 50% -20%,
    rgba(255, 243, 19, 0.15) 0%,
    transparent 60%
  );
  z-index: 0;
  pointer-events: none; 
}

html.light-mode .glass-glow-volt,
[data-theme="light"] .glass-glow-volt {
  background: none;
}

/* Ensure inner content sits above the glow */
.glass-card-content {
  position: relative;
  z-index: 10;
}

/* ═══════════════════════════════════════════════════════════════════════
   DARK-MODE NAVY / SLATE REMAP
   Leftover Tailwind slate-900 / navy surfaces (#0f172a, #1e293b, #1a1a2e)
   read as "dark blue" against Void. Remap them to brand charcoal so every
   page matches Command Center. Light-mode attribute overrides stay intact.
   ═══════════════════════════════════════════════════════════════════════ */
html:not(.light-mode):not([data-theme="light"]) [style*="background:rgba(15,23,42"],
html:not(.light-mode):not([data-theme="light"]) [style*="background: rgba(15,23,42"],
html:not(.light-mode):not([data-theme="light"]) [style*="background:rgba(15, 23, 42"],
html:not(.light-mode):not([data-theme="light"]) [style*="background: rgba(15, 23, 42"],
html:not(.light-mode):not([data-theme="light"]) [style*="background-color:rgba(15,23,42"],
html:not(.light-mode):not([data-theme="light"]) [style*="background-color: rgba(15,23,42"],
html:not(.light-mode):not([data-theme="light"]) [style*="background:#1e293b"],
html:not(.light-mode):not([data-theme="light"]) [style*="background: #1e293b"],
html:not(.light-mode):not([data-theme="light"]) [style*="background:#1a1a2e"],
html:not(.light-mode):not([data-theme="light"]) [style*="background: #1a1a2e"],
html:not(.light-mode):not([data-theme="light"]) [style*="background:#0f172a"],
html:not(.light-mode):not([data-theme="light"]) [style*="background: #0f172a"],
html:not(.light-mode):not([data-theme="light"]) [style*="background:#0a0f1a"],
html:not(.light-mode):not([data-theme="light"]) [style*="background: #0a0f1a"] {
  background: var(--ka-bg-charcoal) !important;
}

html:not(.light-mode):not([data-theme="light"]) .bg-\[\#0B0D10\],
html:not(.light-mode):not([data-theme="light"]) .bg-\[\#0F1216\] {
  background-color: var(--ka-bg-void) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   SOLID PRIMARY / VOLT FILLS
   --ka-accent-volt is the text/icon accent (yellow in dark, slate in light).
   Solid chips, selected calendar days, and CTA fills must use
   --ka-accent-volt-fill so they stay Volt yellow and never become
   unreadable navy (#0f172a) in light mode.
   ═══════════════════════════════════════════════════════════════════════ */
.bg-primary:not([class*="bg-primary/"]):not(.btn-primary) {
  background-color: var(--ka-accent-volt-fill) !important;
  color: var(--ka-on-volt-fill) !important;
}

html.light-mode [style*="background:var(--ka-accent-volt)"]:not([style*="accent-volt-fill"]):not([style*="accent-volt-muted"]):not([style*="accent-volt-hover"]),
html.light-mode [style*="background: var(--ka-accent-volt)"]:not([style*="accent-volt-fill"]):not([style*="accent-volt-muted"]):not([style*="accent-volt-hover"]),
html.light-mode [style*="background-color:var(--ka-accent-volt)"]:not([style*="accent-volt-fill"]):not([style*="accent-volt-muted"]):not([style*="accent-volt-hover"]),
html.light-mode [style*="background-color: var(--ka-accent-volt)"]:not([style*="accent-volt-fill"]):not([style*="accent-volt-muted"]):not([style*="accent-volt-hover"]),
[data-theme="light"] [style*="background:var(--ka-accent-volt)"]:not([style*="accent-volt-fill"]):not([style*="accent-volt-muted"]):not([style*="accent-volt-hover"]),
[data-theme="light"] [style*="background: var(--ka-accent-volt)"]:not([style*="accent-volt-fill"]):not([style*="accent-volt-muted"]):not([style*="accent-volt-hover"]),
[data-theme="light"] [style*="background-color:var(--ka-accent-volt)"]:not([style*="accent-volt-fill"]):not([style*="accent-volt-muted"]):not([style*="accent-volt-hover"]),
[data-theme="light"] [style*="background-color: var(--ka-accent-volt)"]:not([style*="accent-volt-fill"]):not([style*="accent-volt-muted"]):not([style*="accent-volt-hover"]) {
  background: var(--ka-accent-volt-fill) !important;
  color: var(--ka-on-volt-fill) !important;
}

html.light-mode .bg-primary:not([class*="bg-primary/"]):not(.btn-primary),
html.light-mode .bg-primary:not([class*="bg-primary/"]):not(.btn-primary).text-white,
html.light-mode .bg-primary:not([class*="bg-primary/"]):not(.btn-primary) .text-white,
html.light-mode .bg-primary:not([class*="bg-primary/"]):not(.btn-primary) *,
html.light-mode [style*="background:var(--ka-accent-volt-fill)"],
html.light-mode [style*="background:var(--ka-accent-volt-fill)"] *,
html.light-mode [style*="background: var(--ka-accent-volt-fill)"],
html.light-mode [style*="background: var(--ka-accent-volt-fill)"] *,
[data-theme="light"] .bg-primary:not([class*="bg-primary/"]):not(.btn-primary),
[data-theme="light"] .bg-primary:not([class*="bg-primary/"]):not(.btn-primary).text-white,
[data-theme="light"] .bg-primary:not([class*="bg-primary/"]):not(.btn-primary) .text-white,
[data-theme="light"] .bg-primary:not([class*="bg-primary/"]):not(.btn-primary) *,
[data-theme="light"] [style*="background:var(--ka-accent-volt-fill)"],
[data-theme="light"] [style*="background:var(--ka-accent-volt-fill)"] *,
[data-theme="light"] [style*="background: var(--ka-accent-volt-fill)"],
[data-theme="light"] [style*="background: var(--ka-accent-volt-fill)"] * {
  color: var(--ka-on-volt-fill) !important;
}

/* Booking calendar: selected day must stay Volt-on-black in both themes */
#booking-calendar button[style*="--ka-accent-volt-fill"] {
  background: var(--ka-accent-volt-fill) !important;
  color: var(--ka-on-volt-fill) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   CHAT AUDIO PLAY / PAUSE
   Own (yellow) bubbles used a black disc + --ka-accent-volt icon. In light
   mode that token is slate, so the glyph vanished. Material Symbols at
   FILL 0 / wght 300 is a hairline triangle that also reads as a blank disc.
   SVG glyphs + always-yellow --ka-accent-volt-fill / always-black
   --ka-on-volt-fill keep play and pause readable in both themes.
   !important beats html.light-mode [style*="volt-fill"] * { color: black }.
   ═══════════════════════════════════════════════════════════════════════ */
.chat-audio-play-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  line-height: 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  transition: transform 0.15s ease;
}
.chat-audio-play-btn:hover:not(:disabled) {
  transform: scale(1.08);
}
.chat-audio-play-btn:disabled {
  cursor: default;
  opacity: 0.6;
}
.chat-audio-play-btn .chat-audio-glyph {
  width: 54%;
  height: 54%;
  display: block;
  flex-shrink: 0;
  overflow: visible;
}
.chat-audio-play-btn .chat-audio-glyph-play {
  margin-left: 8%;
}
.chat-audio-play-btn .chat-audio-glyph-pause {
  display: none;
  margin-left: 0;
}
.chat-audio-play-btn.is-playing .chat-audio-glyph-play {
  display: none;
}
.chat-audio-play-btn.is-playing .chat-audio-glyph-pause {
  display: block;
}
.chat-audio-play-btn .chat-audio-glyph path {
  fill: currentColor;
}

/* Own / yellow bubble: black disc, volt-yellow filled icon (both themes) */
.chat-audio-play-btn--on-volt {
  background: var(--ka-on-volt-fill) !important;
  color: var(--ka-accent-volt-fill) !important;
  border-color: var(--ka-accent-volt-fill) !important;
}
.chat-audio-play-btn--on-volt .chat-audio-glyph path {
  fill: var(--ka-accent-volt-fill) !important;
}

/* Other-party bubble: volt-yellow disc, black filled icon (both themes) */
.chat-audio-play-btn--on-surface {
  background: var(--ka-accent-volt-fill) !important;
  color: var(--ka-on-volt-fill) !important;
  border-color: var(--ka-on-volt-fill) !important;
}
.chat-audio-play-btn--on-surface .chat-audio-glyph path {
  fill: var(--ka-on-volt-fill) !important;
}

html.light-mode .chat-audio-play-btn--on-volt,
html.light-mode .chat-audio-play-btn--on-volt *,
html.light-mode .chat-audio-play-btn--on-volt .chat-audio-glyph path,
[data-theme="light"] .chat-audio-play-btn--on-volt,
[data-theme="light"] .chat-audio-play-btn--on-volt *,
[data-theme="light"] .chat-audio-play-btn--on-volt .chat-audio-glyph path {
  color: var(--ka-accent-volt-fill) !important;
  fill: var(--ka-accent-volt-fill) !important;
}
html.light-mode .chat-audio-play-btn--on-surface,
html.light-mode .chat-audio-play-btn--on-surface *,
html.light-mode .chat-audio-play-btn--on-surface .chat-audio-glyph path,
[data-theme="light"] .chat-audio-play-btn--on-surface,
[data-theme="light"] .chat-audio-play-btn--on-surface *,
[data-theme="light"] .chat-audio-play-btn--on-surface .chat-audio-glyph path {
  color: var(--ka-on-volt-fill) !important;
  fill: var(--ka-on-volt-fill) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   CHAT COMPOSER SEND
   Enabled Send stays Volt yellow with black text in both themes.
   --ka-accent-volt is slate in light mode, so it must not be the fill.
   Disabled Send is brand grey, not faded yellow or navy.
   ═══════════════════════════════════════════════════════════════════════ */
#chat-send-btn:not(:disabled),
#chat-send-btn:not(:disabled):hover,
#chat-send-btn:not(:disabled):focus {
  background: var(--ka-accent-volt-fill) !important;
  background-color: var(--ka-accent-volt-fill) !important;
  color: var(--ka-on-volt-fill) !important;
  cursor: pointer;
  opacity: 1 !important;
  filter: none;
}
#chat-send-btn:not(:disabled) *,
#chat-send-btn:not(:disabled):hover *,
#chat-send-btn:not(:disabled):focus * {
  color: var(--ka-on-volt-fill) !important;
}
#chat-send-btn:not(:disabled):hover {
  filter: brightness(0.92);
}
#chat-send-btn:disabled,
#chat-send-btn[disabled],
#chat-send-btn:disabled:hover,
#chat-send-btn[disabled]:hover {
  background: var(--ka-bg-charcoal) !important;
  background-color: var(--ka-bg-charcoal) !important;
  color: var(--ka-text-muted) !important;
  cursor: not-allowed;
  opacity: 1 !important;
  filter: none !important;
}
#chat-send-btn:disabled *,
#chat-send-btn[disabled] * {
  color: var(--ka-text-muted) !important;
}

/* Pending voice / file chip — shared so admin matches client */
.chat-pending-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--ka-bg-shadow);
  border: 1px solid var(--ka-border);
  border-left: 3px solid var(--ka-accent-volt-fill);
  border-radius: var(--ka-radius-md, 10px);
}
.chat-pending-chip.is-voice .chat-pending-icon {
  border-radius: 50%;
  background: var(--ka-accent-volt-muted);
  color: var(--ka-accent-volt);
}
.chat-pending-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--ka-accent-volt-muted);
  color: var(--ka-accent-volt);
}
.chat-pending-meta {
  min-width: 0;
  flex: 1;
}
.chat-pending-name {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--ka-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-pending-sub {
  margin: 2px 0 0;
  font-size: 11px;
  color: var(--ka-text-muted);
}
.chat-pending-remove {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--ka-text-muted);
  cursor: pointer;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.chat-pending-remove:hover {
  color: var(--ka-text-primary);
  background: var(--ka-bg-charcoal);
}
#chat-voice-bar:has(.chat-pending-chip) {
  padding: 8px 16px;
  background: transparent;
  border-bottom: 1px solid var(--ka-border);
}

/* ═══════════════════════════════════════════════════════════════════════
   HYBRID DESK TOKENS (Joel-approved Command Center system)
   Additive. Existing --ka-bg-void / glass-panel stay for other pages.
   Dark: Signal-clean zinc surfaces. Light: near-white warm page, white cards.
   Spacing: After Hours. Type, radius, hairlines: Signal.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --ka-page: #08080a;
  --ka-surface: #111113;
  --ka-surface-2: #18181b;
  --ka-hairline: rgba(255, 255, 255, 0.07);
  --ka-hairline-strong: rgba(255, 255, 255, 0.12);
  --ka-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --ka-shadow-card: none;
  --ka-accent-bar: var(--ka-accent-volt-fill);
  --ka-pad-page: 36px 40px 56px;
  --ka-pad-card: 22px 24px;
  --ka-row-py: 13px;
  --ka-gap-desk: 20px;
  --ka-title-size: 22px;
  --ka-time-size: 36px;
  --ka-type-title: 22px;
  --ka-type-body: 14px;
  --ka-type-meta: 12px;
  --ka-type-label: 10px;
  --ka-type-kicker: 11px;
  --ka-rail-w: 332px;
  --ka-duration-desk: 140ms;
  --ka-ease-desk: cubic-bezier(0.2, 0.8, 0.2, 1);
}

html.light-mode,
[data-theme="light"] {
  --ka-page: #f2f1ee;
  --ka-surface: #ffffff;
  --ka-surface-2: #fafafa;
  --ka-hairline: #e8e6e3;
  --ka-hairline-strong: #d9d7d3;
  --ka-inset: none;
  --ka-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.ka-card {
  background: var(--ka-surface);
  border: 1px solid var(--ka-hairline);
  border-radius: var(--ka-radius-md);
  box-shadow: var(--ka-shadow-card), var(--ka-inset);
  color: var(--ka-text-primary);
}
.ka-card--pad { padding: var(--ka-pad-card); }
.ka-card--accent {
  position: relative;
  overflow: hidden;
  padding: var(--ka-pad-card);
  padding-left: 22px;
}
.ka-card--accent::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--ka-accent-bar);
}

.ka-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: var(--ka-row-py) 6px;
  margin: 0 -6px;
  border-radius: var(--ka-radius-sm);
  color: var(--ka-text-primary);
  transition: background var(--ka-duration-desk) var(--ka-ease-desk);
}
.ka-row:hover { background: var(--ka-surface-2); }
.ka-row.is-clickable { cursor: pointer; }
.ka-row-main { min-width: 0; flex: 1; }
.ka-row-name {
  font-size: var(--ka-type-body);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.ka-row-meta {
  margin-top: 2px;
  font-size: var(--ka-type-meta);
  color: var(--ka-text-muted);
}
.ka-row-wait {
  font-family: var(--ka-font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--ka-text-secondary);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.ka-money {
  font-family: var(--ka-font-mono);
  font-size: 12px;
  color: var(--ka-text-secondary);
  font-variant-numeric: tabular-nums;
}

.ka-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--ka-radius-full);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ka-pill--ok { background: var(--ka-success-muted); color: var(--ka-success); }
.ka-pill--bad { background: var(--ka-error-muted); color: var(--ka-error); }
.ka-pill--warn { background: var(--ka-accent-volt-muted); color: var(--ka-text-primary); }
.ka-pill--muted { background: var(--ka-surface-2); color: var(--ka-text-muted); }
html.light-mode .ka-pill--warn,
[data-theme="light"] .ka-pill--warn { color: var(--ka-text-primary); }

.ka-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--ka-radius-sm);
  font-family: var(--ka-font-body);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background var(--ka-duration-desk) var(--ka-ease-desk),
              border-color var(--ka-duration-desk) var(--ka-ease-desk);
}
.ka-btn--ghost {
  background: transparent;
  border-color: var(--ka-hairline);
  color: var(--ka-text-secondary);
}
.ka-btn--ghost:hover { border-color: var(--ka-hairline-strong); color: var(--ka-text-primary); }
.ka-btn--volt {
  background: var(--ka-accent-volt-fill);
  color: var(--ka-on-volt-fill);
  border-color: var(--ka-accent-volt-fill);
}
.ka-btn--icon {
  width: 32px;
  height: 32px;
  padding: 0;
  background: var(--ka-surface);
  border: 1px solid var(--ka-hairline);
  color: var(--ka-text-secondary);
  border-radius: var(--ka-radius-sm);
}
.ka-btn--icon svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.6; }

.ka-empty {
  padding: 12px 0 8px;
  font-size: 13px;
  color: var(--ka-text-muted);
  line-height: 1.5;
  margin: 0;
}
.ka-kicker {
  margin: 0 0 6px;
  font-size: var(--ka-type-kicker);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ka-text-muted);
}
.ka-page-title {
  margin: 0;
  font-size: var(--ka-type-title);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--ka-text-primary);
}
.ka-briefing {
  margin: 8px 0 0;
  font-size: var(--ka-type-body);
  color: var(--ka-text-secondary);
  line-height: 1.45;
}
.ka-briefing strong { color: var(--ka-text-primary); font-weight: 600; }
.ka-label {
  font-size: var(--ka-type-label);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ka-text-muted);
}
.ka-caption {
  margin: 8px 0 0;
  font-size: var(--ka-type-meta);
  color: var(--ka-text-muted);
  line-height: 1.45;
}
.ka-time {
  margin: 0;
  font-family: var(--ka-font-mono);
  font-size: var(--ka-time-size);
  font-weight: 500;
  letter-spacing: -0.05em;
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
  color: var(--ka-text-primary);
}
.ka-open-link {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ka-text-muted);
  text-decoration: none;
}
.ka-open-link:hover { color: var(--ka-text-primary); }
.ka-block {
  padding-top: 10px;
  margin-top: 8px;
  border-top: 1px solid var(--ka-hairline);
}
.ka-block:first-of-type { border-top: none; margin-top: 6px; }
.ka-block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 2px;
}
.ka-block-count {
  font-family: var(--ka-font-mono);
  font-size: 12px;
  color: var(--ka-text-secondary);
}
.ka-who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ka-ava {
  width: 22px; height: 22px; border-radius: 999px;
  background: var(--ka-surface-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 8px; font-weight: 700;
  flex-shrink: 0;
  color: var(--ka-text-secondary);
}