/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

:root {
  /* ── Canonical app theme ─────────────────────────────────────────────────
     briora rebrand: every value derives from the --br-* brand tokens defined
     in briora-theme.css, which also bridges them into Bootstrap's variables
     and defines the dark theme ([data-bs-theme="dark"]). The color-mix()
     washes below mix against --br-paper, so they flip with the theme
     automatically. Never hardcode colors here or in per-page stylesheets. */
  --nv-bg: var(--br-paper);
  --nv-panel: var(--br-tint-plum);
  --nv-border: var(--br-hairline);
  --nv-border-soft: color-mix(in srgb, var(--br-hairline) 55%, var(--br-paper));
  --nv-accent: var(--br-bluegray);
  --nv-text: var(--br-ink);
  --nv-muted: var(--br-muted);
  --nv-header-h: 48px;
  --nv-footer-h: 28px;
  --nv-gap: 5px;          /* default inner breathing room */
  --nv-chat-gutter: 20px; /* chat content left gutter */
  --nv-mono: var(--bs-font-monospace);

  /* Message tones — chat stream lines + briora agent bubbles (bg / text / border).
     Washes are derived from the four brand accents per the briora color
     discipline: Türkis = CLI/success, Blaugrau = debug/info, Himbeere =
     error/warning, ink = program, Pflaume wash = user. */
  --nv-program-bg: color-mix(in srgb, var(--br-ink) 6%, var(--br-paper));
  --nv-program-fg: var(--br-ink);
  --nv-program-border: color-mix(in srgb, var(--br-ink) 18%, var(--br-paper));
  --nv-cli-bg: color-mix(in srgb, var(--br-turquoise) 12%, var(--br-paper));
  --nv-cli-fg: var(--br-agent);
  --nv-cli-border: color-mix(in srgb, var(--br-turquoise) 35%, var(--br-paper));
  --nv-debug-bg: color-mix(in srgb, var(--br-bluegray) 10%, var(--br-paper));
  --nv-debug-fg: var(--br-bluegray);
  --nv-debug-border: color-mix(in srgb, var(--br-bluegray) 30%, var(--br-paper));
  --nv-error-bg: color-mix(in srgb, var(--br-raspberry) 9%, var(--br-paper));
  --nv-error-fg: var(--br-raspberry);
  --nv-error-border: color-mix(in srgb, var(--br-raspberry) 30%, var(--br-paper));
  --nv-warning-bg: color-mix(in srgb, var(--br-raspberry) 5%, var(--br-paper));
  --nv-warning-fg: var(--br-raspberry);
  --nv-warning-border: color-mix(in srgb, var(--br-raspberry) 22%, var(--br-paper));
  --nv-success-bg: color-mix(in srgb, var(--br-turquoise) 12%, var(--br-paper));
  --nv-success-fg: var(--br-agent);
  --nv-success-border: color-mix(in srgb, var(--br-turquoise) 35%, var(--br-paper));
  --nv-info-bg: color-mix(in srgb, var(--br-bluegray) 10%, var(--br-paper));
  --nv-info-fg: var(--br-bluegray);
  --nv-info-border: color-mix(in srgb, var(--br-bluegray) 30%, var(--br-paper));
  --nv-user-bg: var(--br-tint-plum);
  --nv-user-fg: var(--br-ink);
  --nv-user-border: color-mix(in srgb, var(--br-plum) 18%, var(--br-paper));

  /* CodeMirror syntax — the briora editor palette */
  --nv-syntax-fg: var(--br-ink);
  --nv-syntax-comment: var(--br-faint);
  --nv-syntax-keyword: var(--br-plum-ink);
  --nv-syntax-type: var(--br-bluegray);
  --nv-syntax-string: var(--br-agent);
  --nv-syntax-def: var(--br-plum-ink); /* function / def / attribute names */

  /* Briora agent output block */
  --nv-output-bg: color-mix(in srgb, var(--br-turquoise) 10%, var(--br-paper));
  --nv-output-border: color-mix(in srgb, var(--br-turquoise) 32%, var(--br-paper));
  --nv-output-accent: var(--br-agent);
  --nv-output-fg: var(--br-ink);
  --nv-recap-fg: var(--br-agent);
  --nv-label-fg: var(--br-muted);
  --nv-detail-fg: var(--br-ink);

  /* Chrome accents */
  --nv-file-main: var(--br-bluegray);   /* main-file tab icon */
  --nv-file-header: var(--br-agent);    /* header-file tab icon */
  --nv-writer-user: var(--br-agent);    /* version writer (user) */
  --nv-writer-llm: var(--br-plum-ink);  /* version writer (llm) */
  --nv-writer-tutorial: var(--br-turquoise); /* version writer (tutorial) */
  --nv-platform: var(--br-agent);       /* device platform label */
  --nv-connect-border: color-mix(in srgb, var(--br-turquoise) 45%, var(--br-paper));
  --nv-gold: #b8860b;                   /* warning gutter — pending tone decision */
  --nv-ink-info: var(--br-ink);         /* text on info button */
  --nv-ink-warning: var(--br-ink);      /* text on warning button */
  --nv-ink-cli: var(--br-agent);        /* chip hover text */

  /* Hardware (runner LEDs) — physical device colors, theme-invariant */
  --nv-led-on: #00ff00;
  --nv-led-on-border: #00cc00;
  --nv-led-off: var(--br-hairline);

  /* The Bootstrap bridge (--bs-*) lives in briora-theme.css. */
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================================
   Page archetypes — every page's <body> carries one of these two classes.
   The whole stylesheet bundle loads on every page (Propshaft :app), so the
   body class is the only thing that scopes layout per page.
   ========================================================================= */
html {
  height: 100%;
}

/* App shell (editor, runner): fills the viewport, never scrolls the body. */
.app-shell {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--nv-bg);
  color: var(--nv-text);
}

/* Centered chrome (home, auth): gradient ground, content centered, scrolls. */
.centered {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  color: var(--nv-text);
  background:
    radial-gradient(1200px 600px at 50% -10%, var(--nv-panel), transparent 60%),
    var(--nv-bg);
}

/* ============================================================================
   Shared shell chrome — the editor's app-shell surface + top toolbar, reused
   by the runner (and any future app-shell page). Page files own only widgets
   unique to them.
   ========================================================================= */
.nv-panel {
  background: var(--nv-bg);
  border: 1px solid var(--nv-border);
  border-radius: 8px;
}

.nv-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 0.75rem;
  background: var(--nv-bg);
  border-bottom: 1px solid var(--nv-text);
  min-width: 0;
}

.nv-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}

.nv-brand-mark {
  width: 86px;
  display: block;
}

.nv-brand .bi {
  color: var(--nv-accent);
}

.nv-header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}