:root {
  color-scheme: dark;
  --j-bg: #03050a;
  --j-bg-deep: #020308;
  --j-bg-raised: rgba(17, 23, 36, .72);
  --j-surface: rgba(16, 22, 34, .56);
  --j-surface-strong: rgba(19, 27, 42, .78);
  --j-surface-soft: rgba(255, 255, 255, .035);
  --j-glass: linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.035) 34%, rgba(8,14,25,.22) 72%);
  --j-glass-strong: linear-gradient(145deg, rgba(255,255,255,.15), rgba(255,255,255,.055) 32%, rgba(8,14,25,.36) 76%);
  --j-border: rgba(220, 237, 255, .13);
  --j-border-strong: rgba(215, 242, 255, .25);
  --j-border-highlight: rgba(255, 255, 255, .34);
  --j-text: #f5f7fb;
  --j-text-soft: #d6deea;
  --j-muted: #9ba9bc;
  --j-faint: #66758a;
  --j-cyan: #89dcff;
  --j-cyan-bright: #d8f5ff;
  --j-cyan-wash: rgba(99, 201, 245, .12);
  --j-blue: #83a7ff;
  --j-violet: #b49aff;
  --j-green: #76dfb5;
  --j-amber: #f3c878;
  --j-red: #ff969e;
  --j-radius-xs: 10px;
  --j-radius-sm: 14px;
  --j-radius: 20px;
  --j-radius-lg: 28px;
  --j-radius-xl: 36px;
  --j-shadow-sm: 0 8px 24px rgba(0, 0, 0, .22);
  --j-shadow: 0 24px 80px rgba(0, 0, 0, .36);
  --j-shadow-float: 0 32px 100px rgba(0, 0, 0, .48);
  --j-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, "Segoe UI", system-ui, sans-serif;
  --j-mono: "SFMono-Regular", "Cascadia Code", Consolas, monospace;
  --j-ease: cubic-bezier(.2, .8, .2, 1);
  --j-fast: 160ms;
  --j-medium: 260ms;
  /* Readable aliases shared by the page-level styles. */
  --text-primary: var(--j-text);
  --text-secondary: var(--j-text-soft);
  --text-tertiary: var(--j-muted);
  --accent-cyan: var(--j-cyan);
  --accent-green: var(--j-green);
  --accent-amber: var(--j-amber);
  --accent-red: var(--j-red);
  --glass-edge: var(--j-border);
  --glass-edge-strong: var(--j-border-strong);
  --radius-pill: 999px;
  --radius-xl: var(--j-radius);
  --radius-2xl: var(--j-radius-lg);
  --font-mono: var(--j-mono);
  --motion-fast: var(--j-fast) var(--j-ease);
}

*, *::before, *::after { box-sizing: border-box; }
html { min-height: 100%; background: var(--j-bg-deep); scroll-behavior: smooth; }
body { margin: 0; min-height: 100%; color: var(--j-text); background: var(--j-bg); font-family: var(--j-font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
button, input, textarea, select { font: inherit; }
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; }
::selection { color: #041019; background: var(--j-cyan); }

body::before,
body::after {
  content: "";
  position: fixed;
  z-index: -3;
  inset: 0;
  pointer-events: none;
}

body::before {
  background:
    radial-gradient(circle at 14% 18%, rgba(83, 126, 255, .17), transparent 28%),
    radial-gradient(circle at 82% 4%, rgba(120, 74, 255, .14), transparent 30%),
    radial-gradient(circle at 68% 78%, rgba(53, 183, 228, .11), transparent 31%),
    radial-gradient(circle at 28% 100%, rgba(35, 87, 155, .12), transparent 34%),
    linear-gradient(155deg, #050914 0%, #03050a 52%, #060712 100%);
}

body::after {
  z-index: -2;
  opacity: .58;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.72) 0 1px, transparent 1.25px),
    radial-gradient(circle, rgba(168,210,255,.5) 0 .7px, transparent 1px),
    radial-gradient(circle, rgba(255,255,255,.28) 0 .6px, transparent .9px);
  background-position: 0 0, 41px 67px, 19px 27px;
  background-size: 173px 173px, 233px 233px, 97px 97px;
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.75) 60%, transparent 100%);
}

.space-scene { position: fixed; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; }
.space-scene::before,
.space-scene::after { content: ""; position: absolute; border-radius: 50%; filter: blur(2px); opacity: .66; }
.space-scene::before { width: 42vw; height: 42vw; top: -25vw; right: 8vw; background: radial-gradient(circle, rgba(111,178,255,.19), rgba(114,91,255,.07) 43%, transparent 70%); animation: nebulaDrift 22s var(--j-ease) infinite alternate; }
.space-scene::after { width: 36vw; height: 36vw; bottom: -25vw; left: 4vw; background: radial-gradient(circle, rgba(63,218,233,.12), transparent 69%); animation: nebulaDrift 28s var(--j-ease) -8s infinite alternate-reverse; }

.glass,
.glass-panel {
  position: relative;
  border: 1px solid var(--j-border);
  background: var(--j-glass), rgba(9, 15, 25, .58);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), var(--j-shadow-sm);
  -webkit-backdrop-filter: blur(24px) saturate(145%);
  backdrop-filter: blur(24px) saturate(145%);
}

.glass::before,
.glass-panel::before {
  content: "";
  position: absolute;
  pointer-events: none;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,.13), transparent 26%, transparent 72%, rgba(137,220,255,.035));
  mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  mask-composite: exclude;
  padding: 1px;
}

.jarvis-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  border: 1px solid var(--j-border);
  border-radius: 15px;
  background: rgba(14, 20, 31, .54);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 8px 24px rgba(0,0,0,.18);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
}

.jarvis-nav a {
  min-height: 38px;
  padding: 0 15px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--j-muted);
  font: 600 13px/1 var(--j-font);
  text-decoration: none;
  transition: color var(--j-fast) ease, background var(--j-fast) ease, transform var(--j-fast) var(--j-ease);
}

.jarvis-nav svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.jarvis-nav a:hover { color: var(--j-text); background: rgba(255,255,255,.055); }
.jarvis-nav a:active { transform: scale(.98); }
.jarvis-nav a[aria-current="page"] { color: var(--j-text); background: linear-gradient(145deg, rgba(255,255,255,.14), rgba(119,198,238,.08)); box-shadow: inset 0 1px 0 rgba(255,255,255,.11), 0 3px 10px rgba(0,0,0,.18); }

.j-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--j-green); box-shadow: 0 0 13px color-mix(in srgb, var(--j-green) 64%, transparent); }
.overline, .eyebrow { margin: 0; color: var(--j-cyan); font: 650 11px/1.2 var(--j-font); letter-spacing: .14em; text-transform: uppercase; }
.sr-only, .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }

:where(button, a, input, textarea, select):focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(5,8,14,.92), 0 0 0 5px rgba(137,220,255,.72) !important; }
:where(button, input, textarea, select):disabled { cursor: not-allowed; opacity: .5; }

.glass-button,
.secondary-button,
.quiet-button,
.new-chat-button,
.control-room-link {
  min-height: 40px;
  border: 1px solid var(--j-border);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(255,255,255,.085), rgba(255,255,255,.025));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
  color: var(--j-text-soft);
  cursor: pointer;
  transition: transform var(--j-fast) var(--j-ease), border-color var(--j-fast), background var(--j-fast), color var(--j-fast);
}
.glass-button:hover, .secondary-button:hover, .quiet-button:hover, .new-chat-button:hover, .control-room-link:hover { color: var(--j-text); border-color: var(--j-border-strong); background: rgba(255,255,255,.085); }
.glass-button:active, .secondary-button:active, .quiet-button:active, .new-chat-button:active, .control-room-link:active { transform: scale(.975); }

.primary-button,
.send-button {
  border: 1px solid rgba(220,247,255,.5);
  background: linear-gradient(145deg, #d9f7ff, #83d8f9 58%, #6ebfea);
  box-shadow: inset 0 1px 0 #fff, 0 8px 24px rgba(72,180,231,.19);
  color: #06111a;
}

.status-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 0 10px; border: 1px solid var(--j-border); border-radius: 999px; color: var(--j-muted); background: rgba(7,12,21,.32); font-size: 12px; }

dialog { color: var(--j-text); }
dialog::backdrop { background: rgba(1,3,8,.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

@keyframes nebulaDrift { from { transform: translate3d(-2%, -1%, 0) scale(.96); } to { transform: translate3d(4%, 3%, 0) scale(1.05); } }
@keyframes gentlePulse { 50% { opacity: .68; transform: scale(.975); } }

@media (max-width: 720px) {
  .jarvis-nav {
    position: fixed;
    z-index: 80;
    left: max(10px, env(safe-area-inset-left));
    right: max(10px, env(safe-area-inset-right));
    bottom: max(10px, env(safe-area-inset-bottom));
    justify-content: stretch;
    border-color: var(--j-border-strong);
    border-radius: 18px;
    background: rgba(11, 16, 26, .76);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1), var(--j-shadow-float);
    -webkit-backdrop-filter: blur(28px) saturate(170%);
    backdrop-filter: blur(28px) saturate(170%);
  }
  .jarvis-nav a { flex: 1; min-height: 50px; padding: 0 7px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, .glass-panel, .jarvis-nav { background: rgba(15, 22, 34, .96); }
}