/* Geist Sans */
@font-face {
  font-family: 'Geist Sans';
  src: url('/fonts/Geist-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Sans';
  src: url('/fonts/Geist-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Sans';
  src: url('/fonts/Geist-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Geist Mono */
@font-face {
  font-family: 'Geist Mono';
  src: url('/fonts/GeistMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('/fonts/GeistMono-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@import "tailwindcss";

/* Build-time fallback palette. Mirrors the `default` builtin theme
   (themes/builtin/default.toml) so the cold-load paint, before
   useResolvedTheme has fetched and applied the user's selection,
   matches the resolved palette for default. Keep these values in
   sync with that TOML file. */
@theme {
  /* Brand -- Amber/Copper (used sparingly) */
  --color-brand-400: #fbbf24;
  --color-brand-500: #f59e0b;
  --color-brand-600: #d97706;
  --color-brand-700: #b45309;

  /* Accent -- Muted Teal (used sparingly) */
  --color-accent-500: #14b8a6;
  --color-accent-600: #0d9488;
  --color-accent-700: #0f766e;

  /* Surfaces -- neutral zinc */
  --color-surface-700: #3f3f46;
  --color-surface-800: #2c2c30;
  --color-surface-850: #262629;
  --color-surface-900: #1c1c1f;
  --color-surface-950: #141416;

  /* Semantic Text */
  --color-text-primary: #e4e4e7;
  --color-text-secondary: #a1a1aa;
  --color-text-muted: #71717a;
  /* Body text using the dim slot must clear WCAG AA against
     surface-900 (#1c1c1f) and surface-800 (#2c2c30); the previous
     value (#52525b ≈ 2.6:1 vs surface-900) failed both AA body and
     AA large. Bumped to ~5.0:1 vs surface-900 / ~4.2:1 vs surface-800
     so per-setting descriptions and similar tertiary copy stay
     legible. Decorative uses (separator hairlines, etc.) that need
     to read as quieter can drop to surface-700 directly. See #1105. */
  --color-text-dim: #8b8b94;
  --color-text-bright: #fafafa;

  /* Semantic Status */
  --color-status-running: #22c55e;
  /* Waiting (blocked on user input) is the brightest amber in the brand
     ramp so it wins on luminance against fresh-idle. Saturation alone
     reads as DIMMER on dark backgrounds, so we lean on luminance. */
  --color-status-waiting: #fbbf24;
  /* Color of an Idle session whose Stop fired within the decay window.
     Held constant for the full window (then snaps to `--color-status-idle`)
     so the breathe rattle's pulse stays visually consistent. One rung
     dimmer than waiting so the hierarchy reads bright > amber > slate. */
  --color-status-fresh-idle: #f59e0b;
  --color-status-idle: #71717a;
  --color-status-error: #ef4444;
  --color-status-starting: #f59e0b;
  --color-status-stopped: #52525b;

  /* Extended semantic tokens populated by the resolved theme
     projection (see src/tui/styles/resolved.rs). These build-time
     defaults match the `default` builtin theme so cold-load paint
     matches the post-fetch paint when no localStorage cache exists. */
  --color-selection: #3f3f46;
  --color-session-selection: #52525b;
  --color-terminal-active: #0d9488;
  --color-branch: #0d9488;
  --color-sandbox: #94a3b8;
  --color-diff-add: #22c55e;
  --color-diff-delete: #ef4444;
  --color-diff-modified: #fbbf24;
  --color-diff-header: #0d9488;

  /* Embedded terminal cold-load defaults. useResolvedTheme refetches
     and overrides these once the resolved palette lands; the terminal
     hook reads them on construction and on `aoe:theme-changed` to
     build xterm.js's ITheme. These match the `default` builtin
     projected by src/tui/styles/resolved.rs::terminal_projection so
     the pre-fetch paint matches the post-fetch paint for the default
     theme. */
  --term-bg: #1c1c1f;
  --term-fg: #e4e4e7;
  --term-cursor: #f59e0b;
  --term-color-0: #1c1c1f;
  --term-color-1: #ef4444;
  --term-color-2: #22c55e;
  --term-color-3: #fbbf24;
  --term-color-4: #0d9488;
  --term-color-5: #f59e0b;
  --term-color-6: #0d9488;
  --term-color-7: #e4e4e7;
  --term-color-8: #8b8b94;
  --term-color-9: #f26969;
  --term-color-10: #4ed17e;
  --term-color-11: #fccc50;
  --term-color-12: #3da9a0;
  --term-color-13: #f7b13c;
  --term-color-14: #3da9a0;
  --term-color-15: #fbbf24;

  /* Typography */
  --font-sans: 'Geist Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* Layout widths */
  --width-sidebar: 280px;
  --width-sidebar-sm: 220px;
  --min-width-sidebar: 280px;
  --min-width-sidebar-sm: 220px;
  --width-dialog: 400px;
  --width-panel: 420px;
  --width-content-max: 600px;
}

html {
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  /* safe-area insets are handled by the App root, not html, to avoid
     making the document taller than the viewport (which lets iOS scroll
     the page when the keyboard opens, breaking keyboard-height math). */
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
}

body {
  height: 100%;
  overflow: hidden;
  font-family: var(--font-sans);
  background: var(--color-surface-900);
  color: var(--color-text-primary);
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Cockpit markdown — assistant-ui's MarkdownTextPrimitive renders
   raw <p>/<ul>/<ol>/<h*>/<blockquote>/<code> elements (no class
   names). Style them via descendant selectors so the prose looks
   right inside the cockpit conversation. */
.cockpit-markdown p {
  margin: 0.5rem 0;
}
.cockpit-markdown p:first-child { margin-top: 0; }
.cockpit-markdown p:last-child { margin-bottom: 0; }
.cockpit-markdown h1 { font-size: 1.25rem; font-weight: 600; margin: 1rem 0 0.5rem; }
.cockpit-markdown h2 { font-size: 1.125rem; font-weight: 600; margin: 0.875rem 0 0.5rem; }
.cockpit-markdown h3 { font-size: 1rem; font-weight: 600; margin: 0.75rem 0 0.375rem; }
.cockpit-markdown ul, .cockpit-markdown ol { margin: 0.5rem 0; padding-left: 1.5rem; }
.cockpit-markdown ul { list-style: disc; }
.cockpit-markdown ol { list-style: decimal; }
.cockpit-markdown li { margin: 0.125rem 0; }
.cockpit-markdown blockquote {
  border-left: 2px solid var(--color-surface-700);
  padding-left: 0.75rem;
  color: var(--color-text-secondary);
  font-style: italic;
  margin: 0.5rem 0;
}
.cockpit-markdown blockquote.cockpit-callout-warn {
  border-left: 3px solid var(--color-status-waiting);
  background: color-mix(in srgb, var(--color-status-waiting) 8%, transparent);
  color: var(--color-status-waiting);
  font-style: normal;
  padding: 0.5rem 0.75rem;
  border-radius: 0.25rem;
}
.cockpit-markdown blockquote.cockpit-callout-warn p { margin: 0; }
.cockpit-markdown blockquote.cockpit-callout-warn strong { color: var(--color-text-bright); }
.cockpit-markdown :where(p, li) > code {
  background: var(--color-surface-800);
  padding: 0 0.25rem;
  border-radius: 0.25rem;
  font-family: var(--font-mono);
  font-size: 0.85em;
}
.cockpit-markdown a {
  color: var(--color-brand-500);
  text-decoration: underline;
}
.cockpit-markdown a:hover { color: var(--color-brand-400); }
.cockpit-markdown pre {
  margin: 0.5rem 0;
  border-radius: 0.375rem;
  overflow: hidden;
  border: 1px solid var(--color-surface-700);
  background: var(--color-surface-950);
}
.cockpit-markdown hr {
  border: none;
  border-top: 1px solid var(--color-surface-800);
  margin: 0.75rem 0;
}
.cockpit-markdown .cockpit-table-wrap {
  margin: 0.75rem 0;
  border: 1px solid var(--color-surface-800);
  border-radius: 0.375rem;
  overflow: auto;
  max-height: 24rem;
}
.cockpit-markdown table {
  width: 100%;
  border-collapse: collapse;
}
.cockpit-markdown thead {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--color-surface-900);
}
.cockpit-markdown th {
  text-align: left;
  padding: 0.375rem 0.625rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  border-bottom: 1px solid var(--color-surface-700);
  white-space: nowrap;
}
.cockpit-markdown td {
  padding: 0.3125rem 0.625rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  vertical-align: top;
  white-space: nowrap;
  color: var(--color-text-secondary);
  border-bottom: 1px solid
    color-mix(in srgb, var(--color-surface-900) 50%, transparent);
}
.cockpit-markdown tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--color-surface-900) 30%, transparent);
}
.cockpit-markdown tbody tr:hover {
  background: var(--color-surface-800);
}
.cockpit-markdown tbody tr:last-child td {
  border-bottom: none;
}

/* Subtle scrollbar styling */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--color-surface-700);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-dim);
}

/* Dialog/panel entrance animation */
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes slide-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes slide-in-right {
  from { opacity: 0; transform: translateX(16px); }
  to { opacity: 1; transform: translateX(0); }
}

.animate-fade-in {
  animation: fade-in 0.15s ease-out;
}
.animate-slide-up {
  animation: slide-up 0.2s ease-out;
}
.animate-slide-in-right {
  animation: slide-in-right 0.2s ease-out;
}

/* Focus indicators for keyboard navigation */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--color-brand-600);
  outline-offset: 2px;
}

/* xterm.js overrides: strip default chrome for embedded use.
   `overflow: hidden` (not auto): xterm.js manages its own viewport
   scroll, and `auto` gives iOS Safari a target for native rubber-band
   on small touches that haven't yet crossed our gesture-lock
   threshold. */
.xterm {
  padding: 4px 8px;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
}

.xterm ::selection {
  background: rgba(161, 161, 170, 0.2);
}

/* Subtle focus ring for terminal panels (desktop only).
   Uses a pseudo-element overlay so it paints above xterm's background. */
@media (pointer: fine) {
  .term-panel::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid rgba(217, 119, 6, 0.45);
    border-radius: inherit;
    pointer-events: none;
    z-index: 20;
    opacity: 0;
    transition: opacity 0.15s ease-out;
  }
  .term-panel.term-focused::after {
    opacity: 1;
  }
}

.safe-area-inset {
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
    env(safe-area-inset-bottom) env(safe-area-inset-left);
}

