/* Direction: Jarvis — late-night control room. Deep navy, a warm amber signal, rounded and calm. */
/* Completed by the platform from the short form: both modes, every
   palette token, each text-on-ground pair at its floor. To restyle, write the
   short form again (the decisions in one :root) and it is completed again. */

:root {
  color-scheme: dark;
  --canvas: #0f1620;
  --surface: #161f2c;
  --surface-2: #1e2a3a;
  --border: #2b3a4d;
  --border-strong: #575c63;
  --ink: #eaf0f7;
  --muted: #9fb0c3;
  --accent: #f2b441;
  --accent-hover: #f4bf5e;
  --accent-ink: #0f1620;
  --accent-text: #f5c35f;
  --accent-strong: #f2b441;
  --accent-soft: #2a2a22;
  --accent-border: #755d2f;
  --success: #3fae80;
  --success-ink: #ffffff;
  --success-soft: #1a3735;
  --success-strong: #3fae80;
  --warning: #f2b441;
  --warning-ink: #ffffff;
  --warning-soft: #413927;
  --warning-strong: #f2b441;
  --danger: #ff8a7a;
  --danger-ink: #ffffff;
  --danger-soft: #443034;
  --danger-strong: #ff8a7a;
  --chart-1: #f2b441;
  --chart-2: #8bd477;
  --chart-3: #0abec4;
  --chart-4: #99bffc;
  --chart-5: #cb84dd;
  --chart-6: #fea0a1;

  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --radius-card: 18px;
  --radius-btn: 12px;
  --radius-input: 14px;
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sans: "Inter", system-ui, sans-serif;
  --display-weight: 700;
  --display-tracking: -0.02em;
  --eyebrow-tracking: 0.08em;
}

html[data-theme="light"] {
  color-scheme: light;
  --canvas: #ffffff;
  --surface: #ffffff;
  --surface-2: #f3f3f4;
  --border: #dddee0;
  --border-strong: #b7b9bc;
  --ink: #0f1620;
  --muted: #666a6f;
  --accent: #f2b441;
  --accent-hover: #ce9937;
  --accent-ink: #0f1620;
  --accent-text: #876525;
  --accent-strong: #876525;
  --accent-soft: #fdf5e4;
  --accent-border: #f9ddaa;
  --success: #3fae80;
  --success-ink: #0f1620;
  --success-soft: #e8f5f0;
  --success-strong: #2d7c5c;
  --warning: #f2b441;
  --warning-ink: #0f1620;
  --warning-soft: #fdf6e8;
  --warning-strong: #876525;
  --danger: #ff8a7a;
  --danger-ink: #0f1620;
  --danger-soft: #fff1ef;
  --danger-strong: #9b544a;
  --chart-1: #c08916;
  --chart-2: #5f9f4c;
  --chart-3: #168d92;
  --chart-4: #5e92e3;
  --chart-5: #9b5dab;
  --chart-6: #de7377;
}

.view-btn { @apply rounded-full px-4 py-1 text-sm font-medium text-muted transition; }
.view-btn[aria-pressed="true"] { @apply bg-accent text-accent-ink; }

#shell, #shell > div, #chatPane, #tasksPane { min-width: 0; max-width: 100%; }
#shell > div { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { #shell > div { grid-template-columns: minmax(0, 1fr) 26rem; } }
#chatPane > div { min-width: 0; }

@media (max-width: 767px) {
  #shell[data-view="chat"] #tasksPane { display: none; }
  #shell[data-view="tasks"] #chatPane { display: none; }
}

.htmx-indicator { opacity: 0; height: 0; overflow: hidden; transition: opacity 0.2s; }
.htmx-request.htmx-indicator, .htmx-request .htmx-indicator { opacity: 1; height: auto; }

.bar-fill { transition: width 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }

@keyframes bubble-in { from { transform: translateY(8px) scale(0.98); } to { transform: none; } }
#thread > div { animation: bubble-in 0.25s ease-out; }
html.reduced-motion #thread > div { animation: none; }

#composer textarea { max-height: 9rem; }
code { font-family: var(--font-mono); font-size: 0.85em; }