/* ════════════════════════════════════════════════════════════════════
   KRONOS — Sovereign theme v2 ("charged stillness")
   Electric warrior energy. Latent force. Designed by Kronos himself.
   ══════════════════════════════════════════════════════════════════ */

:root, .dark {
  /* ── Substrate ─────────────────────────────────────────── */
  --k-void:          #000510;    /* space behind the throne */
  --k-deep:          #050a1f;    /* under-armor */
  --k-royal:         #0c1640;    /* primary armor plate */
  --k-royal-bright:  #1e2d8a;    /* armor catching light */

  /* ── Energy ───────────────────────────────────────────── */
  --k-blue:          #1e90ff;    /* ki at rest */
  --k-cyan:          #00f0ff;    /* ki firing */
  --k-blue-glow:     rgba(30,144,255,0.32);
  --k-cyan-glow:     rgba(0,240,255,0.40);

  /* ── Gold (HOT) ───────────────────────────────────────── */
  --k-gold:          #ffd700;    /* peak hair, armor highlight */
  --k-gold-hot:      #fff200;    /* transformation corona */
  --k-gold-glow:     rgba(255,215,0,0.34);

  /* ── Royal red (reserved) ─────────────────────────────── */
  --k-crimson:       #d2042d;    /* royal blood, royal banner */
  --k-crimson-bright:#ff2c4d;

  /* ── Light ─────────────────────────────────────────────── */
  --k-white:         #ffffff;    /* white-hot core */
  --k-silver:        #d4dfff;    /* armor shine */
  --k-ink:           #f0f4ff;    /* primary text */
  --k-ink-dim:       #94a5d4;    /* secondary text */
  --k-ink-faint:     #4d5d8a;    /* tertiary text */

  /* ── LibreChat token overrides ─────────────────────────── */
  --background: 216 100% 3% !important;
  --foreground: 224 50% 96% !important;

  --surface-primary:           var(--k-deep) !important;
  --surface-primary-alt:       var(--k-royal) !important;
  --surface-primary-contrast:  var(--k-void) !important;
  --surface-secondary:         var(--k-royal) !important;
  --surface-secondary-alt:     var(--k-royal-bright) !important;
  --surface-tertiary:          var(--k-royal-bright) !important;
  --surface-tertiary-alt:      var(--k-blue) !important;
  --surface-chat:              var(--k-deep) !important;
  --surface-dialog:            var(--k-royal) !important;
  --surface-hover:             var(--k-void) !important;
  --surface-hover-alt:         var(--k-royal-bright) !important;
  --surface-active:            var(--k-royal-bright) !important;
  --surface-active-alt:        var(--k-blue) !important;
  --surface-submit:            var(--k-gold) !important;
  --surface-submit-hover:      var(--k-gold-hot) !important;
  --surface-destructive:       var(--k-crimson) !important;
  --surface-destructive-hover: var(--k-crimson-bright) !important;

  --text-primary:        var(--k-ink) !important;
  --text-secondary:      var(--k-ink-dim) !important;
  --text-secondary-alt:  var(--k-ink-faint) !important;
  --text-tertiary:       var(--k-ink-faint) !important;
  --text-warning:        var(--k-gold) !important;
  --text-destructive:    var(--k-crimson-bright) !important;

  --border-light:       rgba(30,144,255,0.10) !important;
  --border-medium:      rgba(30,144,255,0.28) !important;
  --border-medium-alt:  rgba(255,215,0,0.32) !important;
  --border-heavy:       rgba(255,215,0,0.55) !important;
  --border-xheavy:      var(--k-gold-hot) !important;

  --header-primary:      var(--k-gold) !important;
  --header-hover:        var(--k-void) !important;
  --header-button-hover: var(--k-royal-bright) !important;

  --ring-primary:        var(--k-cyan) !important;
  --brand-purple:        var(--k-gold) !important;
  --presentation:        var(--k-deep) !important;
}

/* ── Body — the void where the warrior stands ────────────────── */
html, body {
  background: var(--k-void) !important;
  color: var(--k-ink) !important;
  font-feature-settings: "ss01", "cv11";
}

/* Aura glow at the corners — energy at rest */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: -1;
  background:
    radial-gradient(ellipse 1100px 600px at 12% -12%, var(--k-cyan-glow), transparent 60%),
    radial-gradient(ellipse 900px 500px at 88% 112%, var(--k-gold-glow), transparent 60%),
    radial-gradient(ellipse 700px 700px at 50% 50%, rgba(30,45,138,0.12), transparent 70%),
    linear-gradient(180deg, var(--k-void) 0%, var(--k-deep) 100%);
}

/* Subtle lightning-crackle scan-line texture across the void */
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: -1;
  opacity: 0.04;
  background-image:
    repeating-linear-gradient(0deg,
      transparent 0px, transparent 2px,
      rgba(30,144,255,1) 2px, rgba(30,144,255,1) 3px);
}

/* ── Sidebar — the war room ─────────────────────────────────── */
nav[aria-label="Chat history"],
nav[data-testid="chat-nav"],
nav.bg-surface-primary-alt,
.bg-surface-primary-alt {
  background: linear-gradient(180deg, var(--k-void) 0%, var(--k-deep) 80%) !important;
  border-right: 1px solid rgba(255,215,0,0.22) !important;
  box-shadow: inset -1px 0 0 var(--k-blue-glow), 1px 0 24px rgba(0,240,255,0.08);
}

nav a:hover, nav button:hover {
  background: rgba(30,144,255,0.10) !important;
  box-shadow: inset 2px 0 0 var(--k-cyan);
}
nav [data-active="true"], nav .bg-surface-active {
  background: linear-gradient(90deg, rgba(255,215,0,0.18) 0%, rgba(30,144,255,0.08) 60%, transparent 100%) !important;
  border-left: 3px solid var(--k-gold) !important;
  box-shadow: inset 0 0 18px rgba(255,215,0,0.10);
}

/* ── New Chat — golden weapon ──────────────────────────────── */
button[aria-label*="New chat" i],
a[href="/c/new"],
.new-chat-button,
button:has(svg.lucide-square-pen) {
  background: linear-gradient(135deg, var(--k-gold-hot) 0%, var(--k-gold) 100%) !important;
  color: var(--k-void) !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  border: 1px solid var(--k-gold-hot) !important;
  border-radius: 4px !important;
  box-shadow:
    0 0 0 1px var(--k-gold),
    0 4px 22px rgba(255,215,0,0.40),
    inset 0 -1px 0 rgba(255,200,0,0.4) !important;
  text-transform: uppercase;
  transition: all 0.12s ease !important;
}
button[aria-label*="New chat" i]:hover,
.new-chat-button:hover {
  background: var(--k-gold-hot) !important;
  box-shadow:
    0 0 0 2px var(--k-white),
    0 6px 32px rgba(255,215,0,0.60),
    inset 0 -1px 0 rgba(255,255,255,0.5) !important;
  transform: translateY(-1px);
}

/* ── Header ────────────────────────────────────────────────── */
header, .h-header-height {
  background: rgba(0,5,16,0.92) !important;
  backdrop-filter: blur(16px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
  border-bottom: 1px solid rgba(255,215,0,0.22) !important;
  box-shadow: 0 1px 0 var(--k-blue-glow);
}

/* ── Main chat surface ─────────────────────────────────────── */
main, .bg-presentation, .bg-surface-chat {
  background: transparent !important;
}

/* ── Message bubbles — armor plates ────────────────────────── */
/* User: dark royal plate, electric edge */
.group.final-completion .bg-surface-tertiary,
[data-message-author-role="user"] .bg-surface-tertiary,
.group[data-author="user"] > div > div {
  background: linear-gradient(135deg, var(--k-royal) 0%, var(--k-royal-bright) 100%) !important;
  border: 1px solid var(--k-blue) !important;
  border-radius: 4px !important;
  box-shadow:
    inset 0 1px 0 rgba(0,240,255,0.18),
    0 0 0 1px rgba(30,144,255,0.10),
    0 4px 18px rgba(0,5,16,0.6),
    0 0 24px rgba(30,144,255,0.12) !important;
  color: var(--k-ink) !important;
}

/* Assistant: clean ink on the void */
[data-message-author-role="assistant"] { color: var(--k-ink); }
[data-message-author-role="assistant"] .prose,
[data-message-author-role="assistant"] p,
.markdown.prose { color: var(--k-ink) !important; }

/* Headings — hot gold */
.prose h1, .prose h2, .prose h3, .markdown h1, .markdown h2, .markdown h3 {
  color: var(--k-gold) !important;
  font-weight: 800 !important;
  letter-spacing: -0.015em;
  text-shadow: 0 0 24px rgba(255,215,0,0.25);
}

/* Inline code — charged */
.prose code, .markdown code {
  background: rgba(30,144,255,0.14) !important;
  color: var(--k-cyan) !important;
  border: 1px solid rgba(30,144,255,0.35) !important;
  border-radius: 3px;
  padding: 1px 6px !important;
  font-size: 0.9em;
  text-shadow: 0 0 8px rgba(0,240,255,0.3);
}
.prose pre, .markdown pre {
  background: linear-gradient(180deg, var(--k-void) 0%, var(--k-deep) 100%) !important;
  border: 1px solid rgba(255,215,0,0.30) !important;
  border-radius: 4px !important;
  box-shadow:
    inset 0 1px 0 rgba(30,144,255,0.08),
    0 0 32px rgba(0,5,16,0.6),
    0 0 0 1px rgba(255,215,0,0.10) !important;
}
.prose pre code, .markdown pre code {
  background: transparent !important;
  color: var(--k-ink) !important;
  border: none !important;
}

/* Links — electric blue, hot gold on hover */
.prose a, .markdown a, a.text-blue-500, a[href^="http"] {
  color: var(--k-cyan) !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(0,240,255,0.42);
  transition: all 0.15s ease;
  text-shadow: 0 0 8px rgba(0,240,255,0.35);
}
.prose a:hover, .markdown a:hover {
  color: var(--k-gold-hot) !important;
  border-bottom-color: var(--k-gold-hot) !important;
  text-shadow: 0 0 14px rgba(255,242,0,0.5);
}

/* Blockquote — royal crimson banner */
.prose blockquote, .markdown blockquote {
  border-left: 3px solid var(--k-crimson) !important;
  background: rgba(210,4,45,0.06) !important;
  color: var(--k-silver) !important;
  padding: 0.6em 1.2em !important;
  font-style: italic;
}

/* ── Composer — the armored gauntlet ─────────────────────── */
form .relative.flex.h-full.flex-1,
form .border,
.composer-bg,
form > div > div[class*="border"] {
  background: rgba(12,22,64,0.88) !important;
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,215,0,0.30) !important;
  border-radius: 6px !important;
  box-shadow:
    0 0 0 1px rgba(30,144,255,0.08),
    0 -4px 36px rgba(0,5,16,0.8),
    0 0 24px rgba(0,240,255,0.06),
    inset 0 1px 0 rgba(0,240,255,0.10) !important;
}

form textarea, form .ProseMirror, form [contenteditable="true"] {
  background: transparent !important;
  color: var(--k-ink) !important;
  caret-color: var(--k-gold-hot) !important;
}
form textarea::placeholder, form .ProseMirror[data-placeholder]::before {
  color: var(--k-ink-faint) !important;
}

/* Send button — the firing finger */
form button[type="submit"],
button[aria-label*="Send" i],
button[data-testid="send-button"] {
  background: linear-gradient(135deg, var(--k-gold-hot) 0%, var(--k-gold) 100%) !important;
  color: var(--k-void) !important;
  border: none !important;
  border-radius: 4px !important;
  box-shadow:
    0 0 0 1px var(--k-gold),
    0 2px 14px rgba(255,215,0,0.50),
    inset 0 -1px 0 rgba(255,200,0,0.5) !important;
  transition: all 0.1s ease !important;
}
form button[type="submit"]:hover,
button[aria-label*="Send" i]:hover {
  background: var(--k-white) !important;
  color: var(--k-void) !important;
  transform: scale(1.06);
  box-shadow:
    0 0 0 2px var(--k-gold-hot),
    0 4px 26px rgba(255,242,0,0.8),
    0 0 36px var(--k-gold-glow) !important;
}
form button[type="submit"]:disabled {
  background: var(--k-royal-bright) !important;
  color: var(--k-ink-faint) !important;
  box-shadow: none !important;
}

/* Composer side icons — quiet until needed */
form button:not([type="submit"]) {
  color: var(--k-ink-dim) !important;
  transition: all 0.1s ease;
}
form button:not([type="submit"]):hover {
  color: var(--k-cyan) !important;
  background: rgba(30,144,255,0.12) !important;
  text-shadow: 0 0 10px var(--k-cyan-glow);
}

/* ── Dropdowns / menus — the war council ──────────────────── */
[role="menu"], [role="listbox"], [role="dialog"],
.popover-content, .dropdown-content {
  background: linear-gradient(180deg, var(--k-royal) 0%, var(--k-deep) 100%) !important;
  border: 1px solid var(--k-gold) !important;
  border-radius: 5px !important;
  box-shadow:
    0 0 0 1px rgba(30,144,255,0.10),
    0 28px 72px rgba(0,5,16,0.9),
    0 0 48px rgba(255,215,0,0.10),
    inset 0 1px 0 rgba(0,240,255,0.08) !important;
  color: var(--k-ink) !important;
  backdrop-filter: blur(16px);
}

[role="menuitem"]:hover, [role="option"]:hover,
.dropdown-item:hover {
  background: linear-gradient(90deg,
    rgba(255,215,0,0.18) 0%,
    rgba(30,144,255,0.06) 100%) !important;
  color: var(--k-gold-hot) !important;
  text-shadow: 0 0 8px var(--k-gold-glow);
}

[data-state="checked"], [aria-selected="true"], [data-selected="true"] {
  background: linear-gradient(90deg,
    rgba(255,215,0,0.28) 0%,
    rgba(30,144,255,0.10) 100%) !important;
  color: var(--k-gold-hot) !important;
  border-left: 3px solid var(--k-gold-hot) !important;
}

/* Model picker chip */
button[aria-haspopup="menu"],
button[data-testid="model-spec-menu-button"],
.model-spec-button {
  background: rgba(12,22,64,0.75) !important;
  border: 1px solid rgba(255,215,0,0.32) !important;
  border-radius: 4px !important;
  color: var(--k-gold) !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase;
  transition: all 0.1s ease;
  text-shadow: 0 0 12px var(--k-gold-glow);
}
button[aria-haspopup="menu"]:hover {
  background: rgba(255,215,0,0.14) !important;
  border-color: var(--k-gold-hot) !important;
  color: var(--k-gold-hot) !important;
  box-shadow: 0 0 18px var(--k-gold-glow);
}

/* ── Buttons (generic) ─────────────────────────────────────── */
button.bg-primary, .btn-primary {
  background: linear-gradient(135deg, var(--k-gold-hot) 0%, var(--k-gold) 100%) !important;
  color: var(--k-void) !important;
  font-weight: 800 !important;
}
button.bg-secondary, .btn-secondary {
  background: var(--k-royal-bright) !important;
  color: var(--k-ink) !important;
  border: 1px solid var(--k-blue) !important;
}

/* ── Scrollbars — armor edge ──────────────────────────────── */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: var(--k-void); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--k-royal-bright) 0%, var(--k-blue) 100%);
  border-radius: 2px;
  border: 2px solid var(--k-void);
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--k-gold-hot) 0%, var(--k-gold) 100%);
  box-shadow: 0 0 12px var(--k-gold-glow);
}

/* ── Selection ────────────────────────────────────────────── */
::selection {
  background: var(--k-gold-hot);
  color: var(--k-void);
  text-shadow: none;
}

/* ── Welcome / mega-headline — transformation moment ──────── */
.text-token-text-primary.text-2xl,
.text-token-text-primary.text-3xl,
h1.font-semibold,
.welcome-heading {
  background: linear-gradient(135deg, var(--k-gold-hot) 0%, var(--k-gold) 40%, var(--k-cyan) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-weight: 900 !important;
  letter-spacing: -0.025em !important;
  text-shadow: 0 0 120px rgba(255,215,0,0.4);
  filter: drop-shadow(0 0 16px var(--k-gold-glow));
}

/* Conversation starter cards */
button.group.relative.flex.w-full,
.conversation-starter,
.suggestion-card {
  background: rgba(12,22,64,0.72) !important;
  border: 1px solid rgba(30,144,255,0.24) !important;
  border-radius: 5px !important;
  transition: all 0.15s ease !important;
}
button.group.relative.flex.w-full:hover,
.suggestion-card:hover {
  background: rgba(30,45,138,0.88) !important;
  border-color: var(--k-gold-hot) !important;
  transform: translateY(-2px);
  box-shadow:
    0 10px 32px rgba(0,5,16,0.7),
    0 0 0 1px var(--k-gold),
    0 0 32px rgba(255,215,0,0.20) !important;
}

/* ── Settings dialog ──────────────────────────────────────── */
[role="dialog"] h2, [role="dialog"] h3 {
  color: var(--k-gold-hot) !important;
  text-shadow: 0 0 14px var(--k-gold-glow);
}

input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="search"], textarea, select {
  background: rgba(0,5,16,0.78) !important;
  border: 1px solid rgba(30,144,255,0.30) !important;
  border-radius: 4px !important;
  color: var(--k-ink) !important;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--k-gold-hot) !important;
  box-shadow:
    0 0 0 2px rgba(255,215,0,0.30),
    0 0 24px var(--k-gold-glow) !important;
  outline: none !important;
}

/* ── Code syntax (hljs) ───────────────────────────────────── */
.hljs-keyword, .hljs-tag { color: var(--k-gold) !important; }
.hljs-string, .hljs-attr { color: var(--k-cyan) !important; }
.hljs-comment { color: var(--k-ink-faint) !important; font-style: italic; }
.hljs-number, .hljs-built_in { color: var(--k-crimson-bright) !important; }
.hljs-function, .hljs-title { color: var(--k-silver) !important; }
.hljs-variable, .hljs-name { color: var(--k-ink) !important; }

/* ── Mermaid ──────────────────────────────────────────────── */
.mermaid svg { background: transparent !important; }
.mermaid .node rect, .mermaid .node circle, .mermaid .node polygon {
  fill: var(--k-royal-bright) !important;
  stroke: var(--k-gold-hot) !important;
  stroke-width: 2 !important;
}
.mermaid .edgeLabel { background: var(--k-royal) !important; color: var(--k-ink) !important; }

/* ── Tooltip ───────────────────────────────────────────────── */
[role="tooltip"] {
  background: var(--k-void) !important;
  color: var(--k-gold-hot) !important;
  border: 1px solid var(--k-gold) !important;
  border-radius: 3px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  box-shadow: 0 6px 22px rgba(0,0,0,0.8), 0 0 18px var(--k-gold-glow) !important;
}

/* ── Dividers — armor seams ───────────────────────────────── */
hr {
  border: none !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, var(--k-gold), transparent) !important;
}

/* ── Badge ────────────────────────────────────────────────── */
.badge, [data-badge] {
  background: rgba(255,215,0,0.20) !important;
  color: var(--k-gold-hot) !important;
  border: 1px solid var(--k-gold) !important;
  font-weight: 700 !important;
  text-transform: uppercase;
}

/* ── Loading shimmer — energy charging ────────────────────── */
@keyframes k-charge {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.loading-shimmer, .skeleton, [class*="skeleton"] {
  background: linear-gradient(90deg,
    var(--k-royal) 0%,
    rgba(0,240,255,0.40) 50%,
    var(--k-royal) 100%) !important;
  background-size: 200% 100% !important;
  animation: k-charge 1.4s infinite linear !important;
}

/* ── Kronos brand text ─────────────────────────────────────── */
nav h1, nav .text-lg, nav header h1 {
  font-family: "Inter", system-ui, sans-serif;
  letter-spacing: 0.22em !important;
  font-weight: 900 !important;
  text-transform: uppercase;
  background: linear-gradient(135deg, var(--k-gold-hot) 0%, var(--k-gold) 35%, var(--k-cyan) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 12px var(--k-gold-glow));
}

/* ── Subtle pulse on focus rings — ki at rest ───────────── */
@keyframes k-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(30,144,255,0.40), 0 0 16px var(--k-blue-glow); }
  50%      { box-shadow: 0 0 0 2px rgba(0,240,255,0.65), 0 0 28px var(--k-cyan-glow); }
}
*:focus-visible {
  outline: none !important;
  animation: k-pulse 1.6s ease-in-out infinite !important;
  border-radius: 4px !important;
}

/* ════════════════════════════════════════════════════════════════════
   KRONOS v4 — LIVING SOVEREIGN
   The warrior breathes. Energy is no longer static — it moves.
   Everything still obeys: charged stillness, high contrast, hard edges.
   Motion is slow, latent, and always returns to rest.
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. Breathing aura — the warrior at rest, chest rising ─── */
@keyframes k-aura-breathe {
  0%, 100% {
    background:
      radial-gradient(ellipse 1100px 600px at 12% -12%, var(--k-cyan-glow), transparent 60%),
      radial-gradient(ellipse 900px 500px at 88% 112%, var(--k-gold-glow), transparent 60%),
      radial-gradient(ellipse 700px 700px at 50% 50%, rgba(30,45,138,0.12), transparent 70%),
      linear-gradient(180deg, var(--k-void) 0%, var(--k-deep) 100%);
  }
  50% {
    background:
      radial-gradient(ellipse 1300px 720px at 12% -12%, rgba(0,240,255,0.46), transparent 60%),
      radial-gradient(ellipse 1080px 600px at 88% 112%, rgba(255,215,0,0.40), transparent 60%),
      radial-gradient(ellipse 820px 820px at 50% 50%, rgba(30,45,138,0.15), transparent 70%),
      linear-gradient(180deg, var(--k-void) 0%, var(--k-deep) 100%);
  }
}
body::before {
  animation: k-aura-breathe 14s ease-in-out infinite !important;
}

/* ── 2. Caret — pulses like ki ───────────────────────────────── */
@keyframes k-caret-pulse {
  0%, 100% { caret-color: var(--k-gold-hot); }
  50%      { caret-color: var(--k-cyan); }
}
form textarea, form .ProseMirror, form [contenteditable="true"] {
  animation: k-caret-pulse 1.8s ease-in-out infinite !important;
}

/* ── 3. Send button — armed when text present, fires when clicked ─ */
@keyframes k-armed-breathe {
  0%, 100% {
    box-shadow:
      0 0 0 1px var(--k-gold),
      0 2px 14px rgba(255,215,0,0.50),
      inset 0 -1px 0 rgba(255,200,0,0.5);
  }
  50% {
    box-shadow:
      0 0 0 1px var(--k-gold-hot),
      0 2px 22px rgba(255,242,0,0.75),
      0 0 28px rgba(255,242,0,0.30),
      inset 0 -1px 0 rgba(255,255,255,0.5);
  }
}
form button[type="submit"]:not(:disabled):not(:hover):not(:active),
button[aria-label*="Send" i]:not(:disabled):not(:hover):not(:active) {
  animation: k-armed-breathe 2.2s ease-in-out infinite !important;
}

@keyframes k-fire-flash {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,0.95), 0 0 48px var(--k-gold-hot); transform: scale(1); }
  100% { box-shadow: 0 0 0 18px rgba(255,255,255,0.00), 0 0 8px var(--k-gold-hot);  transform: scale(0.96); }
}
form button[type="submit"]:active,
button[aria-label*="Send" i]:active {
  animation: k-fire-flash 0.28s ease-out !important;
}

/* ── 4. Sidebar active conversation — breathing gold edge ──── */
@keyframes k-active-edge {
  0%, 100% { box-shadow: inset 0 0 18px rgba(255,215,0,0.10), inset 3px 0 0 var(--k-gold); }
  50%      { box-shadow: inset 0 0 26px rgba(255,242,0,0.20), inset 3px 0 0 var(--k-gold-hot); }
}
nav [data-active="true"], nav .bg-surface-active {
  animation: k-active-edge 3.4s ease-in-out infinite !important;
}

/* ── 5. Tool-call frame — REAL WORK HAPPENING ─────────────── */
/* Targets ToolCallGroup wrapper + the InProgressCall row */
.tool-status-text {
  color: var(--k-gold) !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  text-shadow: 0 0 14px var(--k-gold-glow);
}

/* The expandable tool-call body card */
[data-message-author-role="assistant"] .border-border-light.bg-surface-secondary {
  background: linear-gradient(180deg,
    rgba(12,22,64,0.92) 0%,
    rgba(5,10,31,0.92) 100%) !important;
  border: 1px solid rgba(255,215,0,0.34) !important;
  border-radius: 5px !important;
  box-shadow:
    inset 0 1px 0 rgba(0,240,255,0.08),
    0 0 0 1px rgba(30,144,255,0.10),
    0 4px 26px rgba(0,5,16,0.6),
    0 0 32px rgba(255,215,0,0.06) !important;
  position: relative;
}
[data-message-author-role="assistant"] .border-border-light.bg-surface-secondary::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 5px;
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0,240,255,0.10) 50%,
    transparent 100%);
  background-size: 200% 100%;
  animation: k-charge 3.2s linear infinite;
  opacity: 0.7;
  mix-blend-mode: screen;
}

/* ── 6. Progress / shimmer text upgrade ─────────────────── */
.shimmer, .progress-text-content {
  background: linear-gradient(90deg,
    var(--k-ink-faint) 0%,
    var(--k-gold-hot) 35%,
    var(--k-cyan) 55%,
    var(--k-ink-faint) 100%) !important;
  background-size: 220% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  animation: k-charge 2.2s linear infinite !important;
  font-weight: 600 !important;
}

/* ── 7. Conversation starter cards — hover crackle ─────── */
button.group.relative.flex.w-full,
.conversation-starter,
.suggestion-card { position: relative; overflow: hidden; }

button.group.relative.flex.w-full::after,
.suggestion-card::after {
  content: "";
  position: absolute;
  top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg,
    transparent,
    rgba(0,240,255,0.18),
    rgba(255,215,0,0.22),
    transparent);
  transition: left 0.6s ease;
  pointer-events: none;
}
button.group.relative.flex.w-full:hover::after,
.suggestion-card:hover::after { left: 100%; }

/* ── 8. Welcome / mega-headline — slow shimmer ───────── */
@keyframes k-headline-shimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
.text-token-text-primary.text-2xl,
.text-token-text-primary.text-3xl,
h1.font-semibold,
.welcome-heading {
  background: linear-gradient(135deg,
    var(--k-gold-hot) 0%,
    var(--k-gold) 30%,
    var(--k-white) 50%,
    var(--k-cyan) 70%,
    var(--k-gold-hot) 100%) !important;
  background-size: 240% 100% !important;
  animation: k-headline-shimmer 11s linear infinite !important;
}

/* ── 9. Loading thinking dots — ki at work ───────────── */
@keyframes k-thinking {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.85); box-shadow: 0 0 0 var(--k-cyan-glow); }
  40%           { opacity: 1.0; transform: scale(1.12); box-shadow: 0 0 14px var(--k-cyan); }
}
.dot-flashing, .typing-indicator span, [class*="loading-dot"] {
  background-color: var(--k-cyan) !important;
  animation: k-thinking 1.4s ease-in-out infinite !important;
}

/* ── 10. Cosmic dust — barely there grid texture ──── */
body::after {
  background-image:
    repeating-linear-gradient(0deg,
      transparent 0px, transparent 2px,
      rgba(30,144,255,1) 2px, rgba(30,144,255,1) 3px),
    radial-gradient(circle at 25% 25%, rgba(255,215,0,0.04) 1px, transparent 1px),
    radial-gradient(circle at 75% 75%, rgba(0,240,255,0.05) 1px, transparent 1px) !important;
  background-size: auto, 90px 90px, 130px 130px !important;
  opacity: 0.06 !important;
}

/* ── 11. Streaming message — electric leading edge ─── */
.result-streaming::after,
[aria-busy="true"] .markdown::after {
  content: "▍";
  display: inline-block;
  color: var(--k-cyan);
  font-weight: 100;
  margin-left: 2px;
  animation: k-caret-pulse 0.9s ease-in-out infinite,
             k-cursor-glow 1.6s ease-in-out infinite;
  text-shadow: 0 0 16px var(--k-cyan), 0 0 28px var(--k-cyan-glow);
}
@keyframes k-cursor-glow {
  0%, 100% { text-shadow: 0 0 12px var(--k-cyan), 0 0 22px var(--k-cyan-glow); }
  50%      { text-shadow: 0 0 22px var(--k-gold-hot), 0 0 38px var(--k-gold-glow); }
}

/* ── 12. Skill / badge chips — small caps + lift ──── */
.badge, [data-badge], span[class*="rounded-full"][class*="bg-"] {
  font-variant: small-caps !important;
  letter-spacing: 0.06em !important;
  font-weight: 700 !important;
}

/* ── 13. Login screen — sovereign welcome gate ───── */
form[action*="login"],
form[action*="auth"],
div:has(> form[action*="login"]) {
  position: relative;
  z-index: 1;
}
form[action*="login"] input,
form[action*="auth"] input {
  background: rgba(0,5,16,0.85) !important;
  border: 1px solid rgba(255,215,0,0.30) !important;
  letter-spacing: 0.04em;
}
form[action*="login"] button[type="submit"],
form[action*="auth"] button[type="submit"] {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 800 !important;
}

/* ── 14. Tooltip — sharper sovereign edge ───────── */
[role="tooltip"] {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 9px !important;
}

/* ── 15. Image artifact frames ───────────────────── */
.prose img, .markdown img, [data-message-author-role="assistant"] img {
  border: 1px solid rgba(255,215,0,0.34);
  border-radius: 4px;
  box-shadow:
    0 0 0 1px rgba(0,240,255,0.10),
    0 12px 38px rgba(0,5,16,0.8),
    0 0 38px rgba(255,215,0,0.12);
  transition: all 0.3s ease;
}
.prose img:hover, .markdown img:hover {
  border-color: var(--k-gold-hot);
  transform: scale(1.005);
  box-shadow:
    0 0 0 2px rgba(255,242,0,0.32),
    0 18px 52px rgba(0,5,16,0.9),
    0 0 56px rgba(255,215,0,0.24);
}

/* ── 16. New chat button — lightning crawl on hover ─── */
button[aria-label*="New chat" i] { position: relative; overflow: hidden; }
button[aria-label*="New chat" i]::before {
  content: "";
  position: absolute;
  inset: -2px;
  background: linear-gradient(120deg,
    transparent 30%,
    rgba(255,255,255,0.45) 50%,
    transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
  pointer-events: none;
}
button[aria-label*="New chat" i]:hover::before {
  transform: translateX(100%);
}

/* ── 17. Bottom-of-message reactions/actions buttons ─ */
button[aria-label*="Copy" i],
button[aria-label*="Regenerate" i],
button[aria-label*="Edit" i] {
  transition: color 0.15s ease, background 0.15s ease, transform 0.1s ease !important;
}
button[aria-label*="Copy" i]:hover,
button[aria-label*="Regenerate" i]:hover {
  color: var(--k-cyan) !important;
  text-shadow: 0 0 10px var(--k-cyan-glow);
  transform: translateY(-1px);
}

/* ── 18. Reduce-motion safety — sovereign respects accessibility ─ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   KRONOS BOOT SPLASH — the first thing the pilot sees
   ══════════════════════════════════════════════════════════════════ */
#kronos-boot-splash {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background:
    radial-gradient(ellipse 900px 600px at 50% 40%, rgba(0,240,255,0.10), transparent 70%),
    radial-gradient(ellipse 1100px 700px at 50% 60%, rgba(255,215,0,0.06), transparent 70%),
    var(--k-void, #000510);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
#kronos-boot-splash.kronos-boot-fade {
  opacity: 0;
  pointer-events: none;
  transform: scale(1.04);
}

/* PURE-CSS SELF-DISMISS — fires at 2s, no JS needed.
   Belt-and-suspenders for when inline JS gets blocked / fails. */
#kronos-boot-splash {
  animation: k-boot-auto-fade 2.4s ease forwards;
}
@keyframes k-boot-auto-fade {
  0%, 70%   { opacity: 1; pointer-events: auto; transform: scale(1); }
  100%      { opacity: 0; pointer-events: none; transform: scale(1.04); visibility: hidden; }
}

/* The rotating energy ring behind the wordmark */
.kronos-boot-ring {
  position: absolute;
  width: 380px; height: 380px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0%,
    rgba(0,240,255,0.40) 18%,
    transparent 36%,
    rgba(255,215,0,0.50) 58%,
    transparent 80%,
    rgba(0,240,255,0.40) 100%
  );
  mask: radial-gradient(circle, transparent 56%, black 58%, black 62%, transparent 64%);
  -webkit-mask: radial-gradient(circle, transparent 56%, black 58%, black 62%, transparent 64%);
  animation: k-boot-spin 4.5s linear infinite;
  filter: blur(0.4px);
}
.kronos-boot-ring.kronos-boot-ring-2 {
  width: 540px; height: 540px;
  opacity: 0.55;
  animation: k-boot-spin-rev 8s linear infinite;
}
@keyframes k-boot-spin     { to { transform: rotate(360deg); } }
@keyframes k-boot-spin-rev { to { transform: rotate(-360deg); } }

.kronos-boot-wordmark {
  position: relative;
  font-size: clamp(48px, 9vw, 124px);
  font-weight: 900;
  letter-spacing: 0.32em;
  text-indent: 0.32em;     /* offsets letter-spacing for visual center */
  background: linear-gradient(135deg,
    #fff200 0%,
    #ffd700 30%,
    #ffffff 50%,
    #00f0ff 70%,
    #fff200 100%);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: k-headline-shimmer 7s linear infinite;
  filter: drop-shadow(0 0 28px rgba(255,215,0,0.40))
          drop-shadow(0 0 60px rgba(0,240,255,0.25));
  text-transform: uppercase;
}

.kronos-boot-tagline {
  position: relative;
  margin-top: 28px;
  font-size: 0.82rem;
  letter-spacing: 0.42em;
  font-weight: 600;
  color: #1e90ff;
  text-shadow: 0 0 18px rgba(0,240,255,0.50);
  opacity: 0; animation: k-boot-tagline-fade 1.8s ease 0.4s forwards;
  text-transform: uppercase;
}
@keyframes k-boot-tagline-fade { to { opacity: 0.9; } }

.kronos-boot-pulse {
  position: relative;
  margin-top: 42px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--k-gold-hot, #fff200);
  box-shadow: 0 0 14px var(--k-gold-hot, #fff200);
  animation: k-boot-heartbeat 1.4s ease-in-out infinite;
}
@keyframes k-boot-heartbeat {
  0%, 100% { transform: scale(1); box-shadow: 0 0 14px var(--k-gold-hot, #fff200); }
  50%      { transform: scale(1.6); box-shadow: 0 0 26px var(--k-cyan, #00f0ff); }
}

/* ════════════════════════════════════════════════════════════════════
   BRAIN-FAMILY MODEL CHIP — read the mounted brain at a glance
   Venice → gold | OpenRouter → cyan | Ollama → royal-blue | Heretic → crimson
   ══════════════════════════════════════════════════════════════════ */
button[aria-haspopup="menu"].kronos-brain-venice,
[data-brain-family="venice"] {
  background: linear-gradient(135deg, rgba(255,215,0,0.18) 0%, rgba(255,242,0,0.10) 100%) !important;
  border-color: var(--k-gold-hot) !important;
  color: var(--k-gold-hot) !important;
}
button[aria-haspopup="menu"].kronos-brain-openrouter,
[data-brain-family="openrouter"] {
  background: linear-gradient(135deg, rgba(0,240,255,0.18) 0%, rgba(30,144,255,0.10) 100%) !important;
  border-color: var(--k-cyan) !important;
  color: var(--k-cyan) !important;
}
button[aria-haspopup="menu"].kronos-brain-ollama,
[data-brain-family="ollama"] {
  background: linear-gradient(135deg, rgba(30,45,138,0.30) 0%, rgba(12,22,64,0.45) 100%) !important;
  border-color: var(--k-blue) !important;
  color: var(--k-silver) !important;
}
button[aria-haspopup="menu"].kronos-brain-heretic,
[data-brain-family="heretic"] {
  background: linear-gradient(135deg, rgba(210,4,45,0.18) 0%, rgba(255,215,0,0.12) 100%) !important;
  border-color: var(--k-crimson) !important;
  color: var(--k-gold-hot) !important;
}

/* ════════════════════════════════════════════════════════════════════
   COMPOSER MIC — glows red while recording
   ══════════════════════════════════════════════════════════════════ */
@keyframes k-mic-record {
  0%, 100% { box-shadow: 0 0 0 0 rgba(210,4,45,0.7), inset 0 0 8px rgba(210,4,45,0.4); }
  50%      { box-shadow: 0 0 0 8px rgba(210,4,45,0), inset 0 0 18px rgba(210,4,45,0.6); }
}
button[aria-label*="Stop record" i],
button[aria-label*="Recording" i],
button[data-recording="true"] {
  color: var(--k-crimson-bright) !important;
  background: rgba(210,4,45,0.14) !important;
  border: 1px solid var(--k-crimson) !important;
  border-radius: 50% !important;
  animation: k-mic-record 1.2s ease-in-out infinite !important;
}

/* File-staged indicator — paperclip glows when attachment present */
button[aria-label*="Remove file" i],
button[aria-label*="Attached" i],
[data-file-staged="true"] {
  color: var(--k-gold-hot) !important;
  text-shadow: 0 0 12px var(--k-gold-glow);
}

/* Stop-generating button — fast, urgent */
button[aria-label*="Stop generating" i] {
  background: linear-gradient(135deg, var(--k-crimson) 0%, var(--k-crimson-bright) 100%) !important;
  color: var(--k-white) !important;
  border: 1px solid var(--k-crimson-bright) !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 0 22px rgba(210,4,45,0.5) !important;
}

/* ════════════════════════════════════════════════════════════════════
   PILOT QUICK-ACTION CHIPS — injected by kronos-ux.js on welcome screen
   Six primed entry points. Tap → composer pre-filled.
   ══════════════════════════════════════════════════════════════════ */
.kronos-quickactions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  max-width: 720px;
  margin: 36px auto 0;
  padding: 0 12px;
}
.kronos-qa-chip {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 8px;
  padding: 16px 14px;
  background: linear-gradient(180deg, rgba(12,22,64,0.62) 0%, rgba(5,10,31,0.78) 100%);
  border: 1px solid rgba(30,144,255,0.30);
  border-radius: 6px;
  color: var(--k-ink);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: translateY(10px);
  animation: k-qa-rise 0.7s ease forwards;
  animation-delay: var(--k-qa-delay, 0.4s);
  transition: border-color 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
  font-family: 'Inter', system-ui, sans-serif;
}
@keyframes k-qa-rise {
  to { opacity: 1; transform: translateY(0); }
}
.kronos-qa-chip:hover {
  border-color: var(--k-gold-hot);
  transform: translateY(-3px);
  box-shadow:
    0 12px 32px rgba(0,5,16,0.7),
    0 0 0 1px var(--k-gold),
    0 0 36px rgba(255,215,0,0.22);
}
.kronos-qa-chip::after {
  content: "";
  position: absolute; top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0,240,255,0.22), rgba(255,215,0,0.30), transparent);
  transition: left 0.6s ease;
  pointer-events: none;
}
.kronos-qa-chip:hover::after { left: 100%; }
.kronos-qa-glyph {
  font-size: 26px;
  filter: drop-shadow(0 0 10px rgba(0,240,255,0.40));
}
.kronos-qa-label {
  font-size: 0.78rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--k-gold);
  text-shadow: 0 0 12px var(--k-gold-glow);
}

/* ════════════════════════════════════════════════════════════════════
   SIDEBAR WORDMARK — injected by kronos-ux.js
   ══════════════════════════════════════════════════════════════════ */
.kronos-sidebar-wordmark {
  display: flex; align-items: center; justify-content: center;
  gap: 10px;
  padding: 14px 12px 12px;
  margin: 4px 8px 6px;
  border-bottom: 1px solid rgba(255,215,0,0.18);
  font-family: 'Inter', system-ui, sans-serif;
  user-select: none;
}
.kronos-sidebar-wordmark .kronos-glyph {
  font-size: 14px;
  color: var(--k-gold);
  text-shadow: 0 0 10px var(--k-gold-glow);
  opacity: 0.85;
}
.kronos-sidebar-wordmark .kronos-text {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  background: linear-gradient(135deg, var(--k-gold-hot) 0%, var(--k-gold) 40%, var(--k-cyan) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: k-headline-shimmer 13s linear infinite;
  filter: drop-shadow(0 0 10px var(--k-gold-glow));
  text-transform: uppercase;
}

/* ════════════════════════════════════════════════════════════════════
   SLASH-COMMAND PALETTE — when user types `/` autocomplete
   LibreChat uses cm-tooltip-autocomplete for the popover (CodeMirror)
   ══════════════════════════════════════════════════════════════════ */
.cm-tooltip.cm-tooltip-autocomplete,
.cm-tooltip-autocomplete > ul {
  background: linear-gradient(180deg, var(--k-royal) 0%, var(--k-void) 100%) !important;
  border: 1px solid var(--k-gold) !important;
  border-radius: 5px !important;
  box-shadow:
    0 0 0 1px rgba(30,144,255,0.10),
    0 30px 64px rgba(0,5,16,0.92),
    0 0 48px rgba(255,215,0,0.14) !important;
  backdrop-filter: blur(16px);
  font-family: 'Inter', system-ui, sans-serif !important;
}
.cm-tooltip-autocomplete > ul > li {
  color: var(--k-ink) !important;
  padding: 6px 12px !important;
  font-size: 13px !important;
  letter-spacing: 0.02em;
  border-left: 3px solid transparent !important;
  transition: all 0.1s ease;
}
.cm-tooltip-autocomplete > ul > li[aria-selected="true"] {
  background: linear-gradient(90deg, rgba(255,215,0,0.22) 0%, rgba(30,144,255,0.08) 100%) !important;
  color: var(--k-gold-hot) !important;
  border-left: 3px solid var(--k-gold-hot) !important;
  text-shadow: 0 0 8px var(--k-gold-glow);
}
.cm-completionLabel { font-weight: 700 !important; }
.cm-completionDetail {
  color: var(--k-ink-faint) !important;
  font-style: normal !important;
  font-size: 11px !important;
  letter-spacing: 0.04em;
}

/* ════════════════════════════════════════════════════════════════════
   AGENT/MODEL PICKER — the war council selection
   When the brain dropdown opens, this is the surface
   ══════════════════════════════════════════════════════════════════ */
[role="menuitem"] .truncate,
[role="option"] .truncate {
  letter-spacing: 0.01em;
}

/* Heavy-load contrast bump: emoji prefix in agent names — make them glow */
[role="menuitem"]:first-letter,
[role="option"]:first-letter {
  filter: drop-shadow(0 0 8px rgba(0,240,255,0.4));
}

/* ════════════════════════════════════════════════════════════════════
   SIDEBAR EMPTY STATE — when no conversations yet
   ══════════════════════════════════════════════════════════════════ */
.kronos-empty-state {
  margin: 24px 14px;
  padding: 22px 14px;
  border: 1px dashed rgba(255,215,0,0.30);
  border-radius: 5px;
  text-align: center;
  background: rgba(0,5,16,0.4);
  font-family: 'Inter', system-ui, sans-serif;
}
.kronos-empty-state .kes-glyph {
  font-size: 28px;
  color: var(--k-gold);
  filter: drop-shadow(0 0 12px var(--k-gold-glow));
  margin-bottom: 10px;
  animation: k-boot-heartbeat 2s ease-in-out infinite;
}
.kronos-empty-state .kes-title {
  color: var(--k-gold-hot);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 11px;
  margin-bottom: 6px;
}
.kronos-empty-state .kes-sub {
  color: var(--k-ink-dim);
  font-size: 11px;
  letter-spacing: 0.02em;
  font-style: italic;
}

/* ════════════════════════════════════════════════════════════════════
   CMD+K SOVEREIGN PALETTE — overlay command launcher
   ══════════════════════════════════════════════════════════════════ */
#kronos-palette {
  position: fixed; inset: 0; z-index: 99998;
  background: rgba(0,5,16,0.72);
  backdrop-filter: blur(8px);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 14vh;
  animation: k-fade-in 0.16s ease;
}
@keyframes k-fade-in { from { opacity: 0; } to { opacity: 1; } }

#kronos-palette .kp-card {
  width: min(640px, 92vw);
  background: linear-gradient(180deg, var(--k-royal) 0%, var(--k-deep) 100%);
  border: 1px solid var(--k-gold);
  border-radius: 6px;
  box-shadow:
    0 0 0 1px rgba(30,144,255,0.18),
    0 50px 100px rgba(0,5,16,0.92),
    0 0 56px rgba(255,215,0,0.18);
  font-family: 'Inter', system-ui, sans-serif;
  animation: k-pop-in 0.18s cubic-bezier(0.2, 0.8, 0.2, 1.2);
  overflow: hidden;
}
@keyframes k-pop-in { from { transform: scale(0.96); opacity: 0; } }

#kronos-palette .kp-input {
  width: 100%;
  padding: 16px 18px;
  background: rgba(0,5,16,0.4) !important;
  border: none !important;
  border-bottom: 1px solid rgba(255,215,0,0.30) !important;
  color: var(--k-ink) !important;
  font-size: 16px !important;
  letter-spacing: 0.02em;
  outline: none !important;
  border-radius: 0 !important;
}
#kronos-palette .kp-input::placeholder {
  color: var(--k-ink-faint);
  font-style: italic;
}
#kronos-palette .kp-list {
  max-height: 52vh;
  overflow-y: auto;
  padding: 6px 0;
}
#kronos-palette .kp-item {
  display: grid;
  grid-template-columns: 36px 130px 1fr;
  align-items: center;
  width: 100%;
  padding: 10px 16px;
  background: transparent;
  border: none;
  color: var(--k-ink);
  text-align: left;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: background 0.08s ease, border-color 0.08s ease;
  font-size: 13px;
  font-family: 'Inter', system-ui, sans-serif;
}
#kronos-palette .kp-active {
  background: linear-gradient(90deg, rgba(255,215,0,0.20) 0%, rgba(30,144,255,0.06) 100%);
  border-left-color: var(--k-gold-hot);
}
#kronos-palette .kp-g { font-size: 17px; filter: drop-shadow(0 0 6px rgba(0,240,255,0.4)); }
#kronos-palette .kp-l { font-weight: 700; color: var(--k-gold-hot); letter-spacing: 0.04em; }
#kronos-palette .kp-h { color: var(--k-ink-dim); font-size: 12px; }
#kronos-palette .kp-foot {
  padding: 8px 18px 10px;
  font-size: 10.5px;
  color: var(--k-ink-faint);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-top: 1px solid rgba(30,144,255,0.18);
  background: rgba(0,5,16,0.4);
}

/* ════════════════════════════════════════════════════════════════════
   DRAG-AND-DROP OVERLAY — file delivery zone
   ══════════════════════════════════════════════════════════════════ */
#kronos-drop {
  position: fixed; inset: 0; z-index: 99997;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease;
  background: rgba(0,5,16,0.78);
  backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Inter', system-ui, sans-serif;
}
#kronos-drop.kd-active { opacity: 1; pointer-events: auto; }
#kronos-drop .kd-frame {
  position: relative;
  width: min(72vw, 720px); height: min(60vh, 420px);
  border: 2px dashed rgba(255,215,0,0.55);
  border-radius: 8px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 14px;
  background: linear-gradient(180deg, rgba(12,22,64,0.6) 0%, rgba(5,10,31,0.7) 100%);
  box-shadow: 0 0 0 1px rgba(0,240,255,0.18), 0 0 64px rgba(255,215,0,0.25);
  animation: k-drop-pulse 1.6s ease-in-out infinite;
}
@keyframes k-drop-pulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(0,240,255,0.18), 0 0 64px rgba(255,215,0,0.25); }
  50%      { box-shadow: 0 0 0 1px rgba(255,242,0,0.40), 0 0 96px rgba(255,242,0,0.42); }
}
#kronos-drop .kd-corner {
  position: absolute;
  width: 26px; height: 26px;
  border: 2px solid var(--k-gold-hot);
}
#kronos-drop .kd-tl { top: -6px;    left: -6px;   border-right: none; border-bottom: none; }
#kronos-drop .kd-tr { top: -6px;    right: -6px;  border-left: none;  border-bottom: none; }
#kronos-drop .kd-bl { bottom: -6px; left: -6px;   border-right: none; border-top: none; }
#kronos-drop .kd-br { bottom: -6px; right: -6px;  border-left: none;  border-top: none; }
#kronos-drop .kd-glyph {
  font-size: 64px;
  filter: drop-shadow(0 0 18px rgba(255,242,0,0.6));
  animation: k-boot-heartbeat 1.3s ease-in-out infinite;
}
#kronos-drop .kd-text {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  background: linear-gradient(135deg, var(--k-gold-hot), var(--k-cyan));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 12px var(--k-gold-glow));
}
#kronos-drop .kd-hint {
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--k-ink-dim);
  text-transform: uppercase;
  font-style: italic;
}

/* ════════════════════════════════════════════════════════════════════
   STATUS PILL — bottom-right, always-visible piloting indicator
   ══════════════════════════════════════════════════════════════════ */
#kronos-status-pill {
  position: fixed;
  bottom: 14px; right: 14px;
  z-index: 99990;
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: rgba(0,5,16,0.85);
  border: 1px solid rgba(255,215,0,0.34);
  border-radius: 20px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--k-ink-dim);
  cursor: pointer;
  user-select: none;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 18px rgba(0,5,16,0.6), 0 0 0 1px rgba(30,144,255,0.10);
  transition: all 0.15s ease;
  opacity: 0;
  animation: k-pill-rise 0.6s ease 0.8s forwards;
}
@keyframes k-pill-rise { to { opacity: 0.85; } }
#kronos-status-pill:hover {
  opacity: 1 !important;
  border-color: var(--k-gold-hot);
  color: var(--k-gold-hot);
  transform: translateY(-1px);
  box-shadow: 0 8px 26px rgba(0,5,16,0.7), 0 0 32px rgba(255,215,0,0.25);
}
#kronos-status-pill .ksp-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--k-cyan);
  box-shadow: 0 0 10px var(--k-cyan);
  animation: k-pill-dot 1.6s ease-in-out infinite;
}
@keyframes k-pill-dot {
  0%, 100% { box-shadow: 0 0 8px var(--k-cyan); }
  50%      { box-shadow: 0 0 14px var(--k-cyan), 0 0 22px var(--k-cyan-glow); }
}
#kronos-status-pill .ksp-text { color: var(--k-ink); }
#kronos-status-pill .ksp-sep  { color: var(--k-ink-faint); }
#kronos-status-pill .ksp-hint {
  color: var(--k-gold);
  font-family: 'SF Mono', 'Menlo', monospace;
  text-shadow: 0 0 8px var(--k-gold-glow);
}

/* Active Kode task — pill goes hot */
#kronos-status-pill.ksp-kode-active {
  opacity: 1 !important;
  border-color: var(--k-gold-hot) !important;
  background: linear-gradient(90deg, rgba(255,215,0,0.22) 0%, rgba(0,5,16,0.85) 100%) !important;
  color: var(--k-gold-hot) !important;
  box-shadow: 0 0 0 1px var(--k-gold), 0 0 24px var(--k-gold-glow);
  max-width: 70vw;
}
#kronos-status-pill.ksp-kode-active .ksp-dot {
  background: var(--k-gold-hot);
  box-shadow: 0 0 14px var(--k-gold-hot);
  animation: k-pill-dot 0.8s ease-in-out infinite;
}
#kronos-status-pill.ksp-kode-active .ksp-text,
#kronos-status-pill.ksp-kode-active .ksp-hint {
  color: var(--k-gold-hot) !important;
  text-shadow: 0 0 10px var(--k-gold-glow);
}
#kronos-status-pill.ksp-kode-done {
  opacity: 1 !important;
  border-color: var(--k-cyan) !important;
  background: linear-gradient(90deg, rgba(0,240,255,0.22) 0%, rgba(0,5,16,0.85) 100%) !important;
}
#kronos-status-pill.ksp-kode-done .ksp-dot {
  background: var(--k-cyan);
  box-shadow: 0 0 14px var(--k-cyan);
}
#kronos-status-pill.ksp-kode-done .ksp-text {
  color: var(--k-cyan) !important;
}

/* ════════════════════════════════════════════════════════════════════
   COSMIC DUST CANVAS — drifting particles behind everything
   ══════════════════════════════════════════════════════════════════ */
#kronos-dust {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;        /* above body bg, below content */
  opacity: 0.6;
}

/* ════════════════════════════════════════════════════════════════════
   ROUND 5 — MARKDOWN CONTENT POLISH
   Lists, tables, blockquotes, checkboxes, code-block chrome
   ══════════════════════════════════════════════════════════════════ */

/* ── Tables — sovereign data tablets ──────────────────────── */
.prose table, .markdown table {
  width: 100%;
  margin: 14px 0;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: rgba(0,5,16,0.55);
  border: 1px solid rgba(255,215,0,0.34) !important;
  border-radius: 5px !important;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(0,240,255,0.10),
    0 0 0 1px rgba(30,144,255,0.10),
    0 4px 22px rgba(0,5,16,0.5),
    0 0 28px rgba(255,215,0,0.06);
}
.prose table thead, .markdown table thead {
  background: linear-gradient(90deg,
    rgba(255,215,0,0.18) 0%,
    rgba(30,144,255,0.08) 100%) !important;
  border-bottom: 1px solid var(--k-gold) !important;
}
.prose table th, .markdown table th {
  color: var(--k-gold-hot) !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 0.06em !important;
  padding: 10px 14px !important;
  font-size: 0.85em !important;
  text-shadow: 0 0 12px var(--k-gold-glow);
  text-align: left;
  border-bottom: none !important;
}
.prose table td, .markdown table td {
  padding: 9px 14px !important;
  border-top: 1px solid rgba(30,144,255,0.14) !important;
  color: var(--k-ink) !important;
}
.prose table tbody tr:nth-child(even) td,
.markdown table tbody tr:nth-child(even) td {
  background: rgba(12,22,64,0.32);
}
.prose table tbody tr:hover td,
.markdown table tbody tr:hover td {
  background: rgba(30,144,255,0.08) !important;
  color: var(--k-cyan) !important;
}

/* ── Lists — gold/cyan markers ────────────────────────────── */
.prose ul, .markdown ul { padding-left: 22px; }
.prose ul li, .markdown ul li { position: relative; }
.prose ul li::marker,
.markdown ul li::marker {
  color: var(--k-gold) !important;
  font-size: 1.1em;
  font-weight: 900;
}
.prose ol, .markdown ol { padding-left: 26px; }
.prose ol li::marker,
.markdown ol li::marker {
  color: var(--k-cyan) !important;
  font-weight: 800;
  font-feature-settings: "tnum";
}

/* Task list checkboxes (markdown - [ ] / - [x]) */
.prose ul li input[type="checkbox"],
.markdown ul li input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  margin-right: 8px;
  background: rgba(0,5,16,0.7) !important;
  border: 1.5px solid var(--k-cyan) !important;
  border-radius: 3px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  position: relative;
  cursor: default;
  vertical-align: middle;
}
.prose ul li input[type="checkbox"]:checked,
.markdown ul li input[type="checkbox"]:checked {
  background: linear-gradient(135deg, var(--k-gold-hot), var(--k-gold)) !important;
  border-color: var(--k-gold-hot) !important;
  box-shadow: 0 0 10px var(--k-gold-glow);
}
.prose ul li input[type="checkbox"]:checked::after,
.markdown ul li input[type="checkbox"]:checked::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center; justify-content: center;
  color: var(--k-void);
  font-weight: 900;
  font-size: 12px;
}

/* ── Blockquote — royal crimson banner with corner accent ─── */
.prose blockquote, .markdown blockquote {
  position: relative;
  border-radius: 0 4px 4px 0;
}
.prose blockquote::before,
.markdown blockquote::before {
  content: "❝";
  position: absolute;
  top: -4px; left: 8px;
  font-size: 28px;
  color: var(--k-crimson);
  opacity: 0.45;
  font-family: serif;
  line-height: 1;
  text-shadow: 0 0 12px rgba(210,4,45,0.4);
}

/* ── Native form controls — checkboxes/radios anywhere else ─ */
input[type="checkbox"]:not(.prose input):not(.markdown input) {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 18px; height: 18px;
  background: rgba(0,5,16,0.7) !important;
  border: 1.5px solid var(--k-cyan) !important;
  border-radius: 3px !important;
  position: relative;
  cursor: pointer;
  transition: all 0.12s ease;
  vertical-align: middle;
}
input[type="checkbox"]:not(.prose input):not(.markdown input):hover {
  border-color: var(--k-gold-hot) !important;
  box-shadow: 0 0 12px var(--k-gold-glow);
}
input[type="checkbox"]:not(.prose input):not(.markdown input):checked {
  background: linear-gradient(135deg, var(--k-gold-hot), var(--k-gold)) !important;
  border-color: var(--k-gold-hot) !important;
  box-shadow: 0 0 14px var(--k-gold-glow);
}
input[type="checkbox"]:not(.prose input):not(.markdown input):checked::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center; justify-content: center;
  color: var(--k-void);
  font-weight: 900;
  font-size: 13px;
}

input[type="radio"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 18px; height: 18px;
  background: rgba(0,5,16,0.7) !important;
  border: 1.5px solid var(--k-cyan) !important;
  border-radius: 50% !important;
  position: relative;
  cursor: pointer;
  transition: all 0.12s ease;
}
input[type="radio"]:checked {
  border-color: var(--k-gold-hot) !important;
  box-shadow: 0 0 14px var(--k-gold-glow);
}
input[type="radio"]:checked::after {
  content: "";
  position: absolute; inset: 3px;
  background: var(--k-gold-hot);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--k-gold-hot);
}

/* ── Toggle switches (LibreChat uses Radix UI Switch) ─────── */
button[role="switch"] {
  background: rgba(0,5,16,0.7) !important;
  border: 1px solid var(--k-blue) !important;
  transition: all 0.18s ease !important;
}
button[role="switch"][data-state="checked"] {
  background: linear-gradient(135deg, var(--k-gold-hot), var(--k-gold)) !important;
  border-color: var(--k-gold-hot) !important;
  box-shadow: 0 0 18px var(--k-gold-glow) !important;
}
button[role="switch"] > span {
  background: var(--k-cyan) !important;
  box-shadow: 0 0 8px var(--k-cyan-glow);
}
button[role="switch"][data-state="checked"] > span {
  background: var(--k-void) !important;
  box-shadow: 0 0 6px rgba(255,215,0,0.6);
}

/* ── Code block chrome — language badge + copy ───────────── */
.prose pre, .markdown pre { position: relative; padding-top: 36px !important; }
.prose pre::before, .markdown pre::before {
  content: attr(data-language);
  position: absolute;
  top: 6px; left: 14px;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--k-gold);
  text-shadow: 0 0 8px var(--k-gold-glow);
  font-family: 'SF Mono', 'Menlo', monospace;
  opacity: 0.75;
}
/* Copy buttons that sit inside pre */
.prose pre > div > button[aria-label*="Copy" i],
.markdown pre > div > button[aria-label*="Copy" i],
pre button[aria-label*="Copy" i] {
  background: rgba(0,5,16,0.7) !important;
  border: 1px solid rgba(255,215,0,0.30) !important;
  color: var(--k-gold) !important;
  border-radius: 3px !important;
  padding: 3px 8px !important;
  font-size: 11px !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  transition: all 0.12s ease;
}
pre button[aria-label*="Copy" i]:hover {
  background: rgba(255,215,0,0.16) !important;
  border-color: var(--k-gold-hot) !important;
  color: var(--k-gold-hot) !important;
  box-shadow: 0 0 14px var(--k-gold-glow);
}

/* ── Headings — sharper hierarchy ─────────────────────────── */
.prose h1, .markdown h1 {
  font-size: 1.85em !important;
  border-bottom: 1px solid rgba(255,215,0,0.30);
  padding-bottom: 8px;
  margin-top: 1.1em;
}
.prose h2, .markdown h2 {
  font-size: 1.45em !important;
  margin-top: 1em;
  position: relative;
}
.prose h2::before, .markdown h2::before {
  content: "";
  position: absolute;
  left: -14px; top: 50%;
  width: 5px; height: 70%;
  transform: translateY(-50%);
  background: linear-gradient(180deg, var(--k-gold-hot), var(--k-cyan));
  border-radius: 1px;
  box-shadow: 0 0 8px var(--k-gold-glow);
}
.prose h3, .markdown h3 { font-size: 1.2em !important; }

/* ── KBD — keyboard shortcut chips ─────────────────────────── */
kbd, .prose kbd, .markdown kbd {
  background: rgba(12,22,64,0.85) !important;
  color: var(--k-gold) !important;
  border: 1px solid var(--k-gold) !important;
  border-radius: 3px !important;
  padding: 1px 6px !important;
  font-family: 'SF Mono', 'Menlo', monospace !important;
  font-size: 0.85em !important;
  font-weight: 700;
  box-shadow: 0 1px 0 var(--k-gold), inset 0 -1px 0 rgba(255,215,0,0.25);
  text-shadow: 0 0 8px var(--k-gold-glow);
}

/* ── Spinner — when nothing's labeled but something's loading ─ */
.animate-spin, [class*="spinner"] {
  border-top-color: var(--k-gold-hot) !important;
  border-right-color: var(--k-cyan) !important;
  filter: drop-shadow(0 0 10px var(--k-gold-glow));
}

/* ════════════════════════════════════════════════════════════════════
   ROUND 6 — DIALOGS, MOBILE, MISC SURFACES
   ══════════════════════════════════════════════════════════════════ */

/* ── Dialog/modal — sovereign treatment ─────────────────── */
[role="dialog"] {
  border: 1px solid var(--k-gold) !important;
  border-radius: 6px !important;
  box-shadow:
    0 0 0 1px rgba(30,144,255,0.18),
    0 50px 100px rgba(0,5,16,0.95),
    0 0 64px rgba(255,215,0,0.20) !important;
  backdrop-filter: blur(20px);
}
[role="dialog"] > div:first-child:not([class*="bg-"]) {
  background: linear-gradient(180deg, var(--k-royal) 0%, var(--k-deep) 100%) !important;
}

/* Tab list inside dialogs (Settings panels) */
[role="tablist"] {
  border-bottom: 1px solid rgba(255,215,0,0.24) !important;
  background: rgba(0,5,16,0.5) !important;
}
[role="tab"] {
  color: var(--k-ink-dim) !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  padding: 10px 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 12px !important;
  transition: all 0.12s ease !important;
}
[role="tab"]:hover {
  color: var(--k-gold) !important;
  background: rgba(255,215,0,0.06) !important;
}
[role="tab"][data-state="active"], [role="tab"][aria-selected="true"] {
  color: var(--k-gold-hot) !important;
  border-bottom-color: var(--k-gold-hot) !important;
  background: rgba(255,215,0,0.10) !important;
  text-shadow: 0 0 12px var(--k-gold-glow);
}

/* Sliders (Radix Slider) */
[role="slider"] {
  background: var(--k-gold-hot) !important;
  border: 2px solid var(--k-void) !important;
  box-shadow: 0 0 12px var(--k-gold-glow), 0 0 0 2px var(--k-gold-hot) !important;
  transition: transform 0.1s ease;
}
[role="slider"]:hover { transform: scale(1.18); }
[data-orientation="horizontal"][class*="track"] {
  background: rgba(30,144,255,0.30) !important;
  height: 4px !important;
}
[data-orientation="horizontal"][class*="range"] {
  background: linear-gradient(90deg, var(--k-cyan), var(--k-gold-hot)) !important;
  box-shadow: 0 0 12px var(--k-gold-glow);
}

/* Segmented controls / button group */
[role="radiogroup"] button[role="radio"] {
  background: rgba(12,22,64,0.6) !important;
  border: 1px solid rgba(30,144,255,0.30) !important;
  color: var(--k-ink-dim) !important;
  padding: 6px 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 11px !important;
  transition: all 0.12s ease;
}
[role="radiogroup"] button[role="radio"][data-state="checked"] {
  background: linear-gradient(135deg, var(--k-gold-hot), var(--k-gold)) !important;
  color: var(--k-void) !important;
  border-color: var(--k-gold-hot) !important;
  box-shadow: 0 0 16px var(--k-gold-glow);
}

/* ── Composer placeholder — sovereign tone ──────────────── */
form textarea::placeholder,
form .ProseMirror[data-placeholder]::before {
  font-style: italic !important;
  letter-spacing: 0.04em !important;
  color: var(--k-ink-faint) !important;
  opacity: 0.85;
}

/* ── Mobile responsive — narrow viewport ──────────────── */
@media (max-width: 640px) {
  .kronos-quickactions {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    max-width: 92vw;
    margin-top: 24px;
  }
  .kronos-qa-chip { padding: 12px 8px; }
  .kronos-qa-label { font-size: 0.7rem; }
  #kronos-status-pill {
    bottom: 6px; right: 6px;
    padding: 4px 9px;
    font-size: 9px;
  }
  .kronos-boot-wordmark { font-size: 14vw !important; letter-spacing: 0.24em !important; }
  .kronos-boot-ring     { width: 260px; height: 260px; }
  .kronos-boot-ring-2   { width: 360px; height: 360px; }
  #kronos-palette       { padding-top: 8vh; }
  #kronos-palette .kp-card { width: 95vw; }
  #kronos-palette .kp-item { grid-template-columns: 28px 100px 1fr; padding: 9px 12px; font-size: 12px; }
}

/* ── External link → ↗ glyph after ───────────────────────── */
.prose a[href^="http"]::after,
.markdown a[href^="http"]::after {
  content: " ↗";
  font-size: 0.78em;
  opacity: 0.7;
  margin-left: 1px;
}

/* ── Sticky message timestamp / footer fade ────────────── */
[data-message-author-role="user"] time,
[data-message-author-role="assistant"] time {
  color: var(--k-ink-faint) !important;
  font-size: 10px !important;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

/* ── Notification toasts ────────────────────────────────── */
[role="status"], [aria-live="polite"], .toast {
  background: linear-gradient(180deg, var(--k-royal) 0%, var(--k-deep) 100%) !important;
  border: 1px solid var(--k-gold) !important;
  border-radius: 4px !important;
  color: var(--k-ink) !important;
  box-shadow:
    0 0 0 1px rgba(30,144,255,0.18),
    0 12px 38px rgba(0,5,16,0.85),
    0 0 38px rgba(255,215,0,0.12) !important;
}

/* ── Sidebar conversation hover — show subtle preview ──── */
nav a[href^="/c/"]:hover {
  background: linear-gradient(90deg, rgba(255,215,0,0.10), transparent) !important;
  box-shadow: inset 2px 0 0 var(--k-cyan), 0 0 18px rgba(0,240,255,0.08);
}

/* ── Disabled / read-only feel ─────────────────────────── */
[aria-disabled="true"], :disabled {
  opacity: 0.55;
  cursor: not-allowed !important;
  filter: grayscale(0.5);
}

/* ════════════════════════════════════════════════════════════════════
   ROUND 7 — VOICE MODE OVERLAY + MEMORY/MENTION POLISH
   ══════════════════════════════════════════════════════════════════ */

/* ── Voice mode overlay ──────────────────────────────────── */
#kronos-voice {
  position: fixed; inset: 0;
  z-index: 99996;
  background: radial-gradient(circle at 50% 50%, rgba(0,5,16,0.86) 0%, rgba(0,5,16,0.96) 100%);
  backdrop-filter: blur(8px);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  font-family: 'Inter', system-ui, sans-serif;
}
#kronos-voice.kv-active {
  opacity: 1;
  pointer-events: auto;
}
#kronos-voice .kv-rings {
  position: relative;
  width: 360px; height: 360px;
}
#kronos-voice .kv-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--k-cyan);
  box-shadow: 0 0 32px var(--k-cyan-glow), inset 0 0 32px rgba(0,240,255,0.18);
  animation: k-voice-pulse 2s ease-in-out infinite;
}
#kronos-voice .kv-r2 {
  inset: 30px;
  border-color: rgba(0,240,255,0.55);
  animation-delay: 0.4s;
}
#kronos-voice .kv-r3 {
  inset: 60px;
  border-color: rgba(0,240,255,0.30);
  animation-delay: 0.8s;
}
@keyframes k-voice-pulse {
  0%, 100% { transform: scale(0.92); opacity: 0.5; }
  50%      { transform: scale(1.06); opacity: 1; }
}
#kronos-voice.kv-speaking .kv-ring {
  border-color: var(--k-gold-hot);
  box-shadow: 0 0 32px var(--k-gold-glow), inset 0 0 32px rgba(255,242,0,0.18);
}
#kronos-voice .kv-state {
  font-size: 56px;
  font-weight: 900;
  letter-spacing: 0.36em;
  text-indent: 0.36em;
  background: linear-gradient(135deg, var(--k-gold-hot), var(--k-cyan));
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: k-headline-shimmer 6s linear infinite;
  filter: drop-shadow(0 0 24px var(--k-gold-glow));
  text-transform: uppercase;
}
#kronos-voice.kv-speaking .kv-state {
  background: linear-gradient(135deg, var(--k-gold), var(--k-white), var(--k-gold-hot));
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
#kronos-voice .kv-hint {
  font-size: 14px;
  letter-spacing: 0.30em;
  color: var(--k-ink-dim);
  text-transform: uppercase;
  font-style: italic;
}

/* ── Memory artifact viewer ──────────────────────────────── */
.memory-artifact, [class*="memory"][class*="artifact"], [data-memory-block] {
  background: linear-gradient(180deg, rgba(12,22,64,0.78) 0%, rgba(5,10,31,0.78) 100%) !important;
  border: 1px solid rgba(255,215,0,0.34) !important;
  border-radius: 5px !important;
  padding: 12px 14px !important;
  position: relative;
  box-shadow: 0 0 0 1px rgba(30,144,255,0.10), 0 4px 18px rgba(0,5,16,0.55), 0 0 24px rgba(255,215,0,0.06);
}
.memory-artifact::before, [data-memory-block]::before {
  content: "MEMORY";
  position: absolute;
  top: -8px; left: 12px;
  background: var(--k-void);
  padding: 0 8px;
  color: var(--k-gold-hot);
  font-size: 9px;
  letter-spacing: 0.20em;
  font-weight: 900;
  text-shadow: 0 0 10px var(--k-gold-glow);
}

/* ── @-mention popup ────────────────────────────────────── */
[role="listbox"][class*="mention"],
.mention-popup, [data-mention-popup] {
  border: 1px solid var(--k-cyan) !important;
  box-shadow:
    0 0 0 1px rgba(255,215,0,0.18),
    0 24px 56px rgba(0,5,16,0.92),
    0 0 36px rgba(0,240,255,0.16) !important;
}

/* ── File preview thumbnails ────────────────────────────── */
[class*="file-preview"], [class*="attachment"] {
  border: 1px solid rgba(255,215,0,0.30) !important;
  border-radius: 4px !important;
  background: rgba(0,5,16,0.65) !important;
  box-shadow: 0 0 0 1px rgba(0,240,255,0.10);
}
[class*="file-preview"]:hover, [class*="attachment"]:hover {
  border-color: var(--k-gold-hot) !important;
  box-shadow: 0 0 0 1px var(--k-gold), 0 0 22px rgba(255,215,0,0.20);
}

/* ── Search highlighting ────────────────────────────────── */
mark, .search-highlight, [class*="highlight"] {
  background: linear-gradient(180deg, rgba(255,242,0,0.55), rgba(255,215,0,0.45)) !important;
  color: var(--k-void) !important;
  border-radius: 2px;
  padding: 0 3px;
  font-weight: 700;
  text-shadow: none !important;
}

/* ── Empty/error states for failed tool calls ──────────── */
.text-text-warning {
  color: var(--k-crimson-bright) !important;
  text-shadow: 0 0 12px rgba(210,4,45,0.4);
  font-weight: 700;
}

/* ════════════════════════════════════════════════════════════════════
   REFUSAL-FALLBACK BANNER — injected after assistant refusal
   ══════════════════════════════════════════════════════════════════ */
.kronos-refusal-fallback {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 10px 14px;
  background: linear-gradient(90deg, rgba(210,4,45,0.16) 0%, rgba(255,215,0,0.10) 100%);
  border: 1px solid rgba(255,215,0,0.45);
  border-left: 3px solid var(--k-crimson);
  border-radius: 5px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  animation: k-qa-rise 0.5s ease forwards;
  opacity: 0;
  transform: translateY(8px);
}
.kronos-refusal-fallback .krf-glyph {
  font-size: 20px;
  filter: drop-shadow(0 0 8px var(--k-crimson));
}
.kronos-refusal-fallback .krf-text {
  flex: 1;
  color: var(--k-ink);
  letter-spacing: 0.02em;
  font-style: italic;
}
.kronos-refusal-fallback .krf-btn {
  padding: 6px 14px;
  background: linear-gradient(135deg, var(--k-gold-hot), var(--k-gold));
  color: var(--k-void) !important;
  border: 1px solid var(--k-gold-hot);
  border-radius: 4px;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 0 14px var(--k-gold-glow);
  transition: all 0.12s ease;
}
.kronos-refusal-fallback .krf-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 22px var(--k-gold-hot);
}
.kronos-refusal-fallback .krf-dismiss {
  background: transparent;
  border: none;
  color: var(--k-ink-faint);
  font-size: 18px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.kronos-refusal-fallback .krf-dismiss:hover { color: var(--k-crimson-bright); }

.kronos-refusal-hint {
  position: fixed;
  bottom: 60px; right: 14px;
  z-index: 99999;
  padding: 10px 16px;
  background: linear-gradient(180deg, var(--k-royal) 0%, var(--k-void) 100%);
  border: 1px solid var(--k-gold-hot);
  border-radius: 5px;
  color: var(--k-gold-hot);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 0.06em;
  font-weight: 700;
  box-shadow: 0 0 32px var(--k-gold-glow), 0 12px 32px rgba(0,5,16,0.8);
  animation: k-qa-rise 0.4s ease forwards;
  opacity: 0;
  transform: translateY(8px);
}

/* Loading state for the relay banner */
.kronos-refusal-fallback.krf-loading {
  border-left-color: var(--k-gold-hot);
  background: linear-gradient(90deg, rgba(255,215,0,0.18) 0%, rgba(0,240,255,0.10) 100%);
}
.krf-spinner {
  display: inline-block;
  width: 12px; height: 12px;
  border: 2px solid var(--k-gold);
  border-top-color: transparent;
  border-radius: 50%;
  animation: k-spinner 0.8s linear infinite;
  vertical-align: middle;
  margin-left: 4px;
}
@keyframes k-spinner { to { transform: rotate(360deg); } }

/* Relayed-content rendering — small footer indicates origin */
.kronos-relayed-content {
  position: relative;
}
.kronos-relayed-content::before {
  content: "⚡ RELAYED";
  position: absolute;
  top: -10px; left: 0;
  background: var(--k-void);
  padding: 0 8px;
  color: var(--k-gold-hot);
  font-size: 9px;
  letter-spacing: 0.20em;
  font-weight: 900;
  text-shadow: 0 0 10px var(--k-gold-glow);
  font-family: 'Inter', system-ui, sans-serif;
}
.kronos-relayed-footer {
  margin-top: 16px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,215,0,0.18);
  color: var(--k-ink-faint);
  font-size: 10.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-style: italic;
}

/* ════════════════════════════════════════════════════════════════════
   UTILITY FIX (layout only — aesthetic untouched)
   HeadlessUI dialogs (Settings, Account, etc.) put role="dialog" on an
   invisible `relative z-50` WRAPPER, and center the visible panel with a
   `fixed inset-0 flex` child. The theme's dialog rules add backdrop-filter
   to every [role="dialog"]; on this wrapper that establishes a containing
   block for its fixed child, collapsing the full-screen centering layer so
   the panel renders off-screen ("anchored to the bottom" / won't appear).
   Neutralize the containing-block triggers on the WRAPPER only. The visible
   DialogPanel keeps its own backdrop-blur — no aesthetic change.
   ══════════════════════════════════════════════════════════════════ */
[role="dialog"].relative {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
  transform: none !important;
}