/*
 * 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 (light) ─────────────────────────────────────────
     Promoted from the editor — the most considered surface — so every page
     consumes one token set. Values align with Bootstrap 5.3 defaults, so the
     framework's own components match without per-component overrides. */
  --nv-bg: #ffffff;
  --nv-panel: #f1f3f5;
  --nv-border: #ced4da;
  --nv-border-soft: #e9ecef;
  --nv-accent: #0d6efd;
  --nv-text: #212529;
  --nv-muted: #6c757d;
  --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: "Fira Code", "Source Code Pro", "Consolas", monospace;

  /* Brand gradient — wordmark, auth title, .btn-accent CTA, signet. */
  --nv-brand-1: #4f9dff;
  --nv-brand-2: #7c5cff;
  --nv-brand-1-rgb: 79, 157, 255; /* brand-1 for signet glow alpha */

  /* ── Custom palette ──────────────────────────────────────────────────────
     Hand-picked colors with no Bootstrap equivalent, named + centralized here
     so usage sites reference tokens, not literals. INTERIM: pending a decision
     to fold these onto Bootstrap's semantic palette. To migrate, repoint a
     token's value here (e.g. --nv-error-bg: var(--bs-danger-bg-subtle)) —
     usage sites don't change. Two already coincide with BS and point at it. */

  /* Message tones — chat stream lines + copilot bubbles (bg / text / border) */
  --nv-program-bg: #eef1f5;  --nv-program-fg: #1f2d3d;  --nv-program-border: #dbe2ea;
  --nv-cli-bg: #e3f7f1;      --nv-cli-fg: #0a7d63;      --nv-cli-border: #b7e6da;
  --nv-debug-bg: #efe9fb;    --nv-debug-fg: #5b3fa0;    --nv-debug-border: #d9cdf2;
  --nv-error-bg: #fde8e8;    --nv-error-fg: #b42318;    --nv-error-border: #f6c4c0;
  --nv-warning-bg: #fef3d6;  --nv-warning-fg: #8a6d1a;  --nv-warning-border: #f4dd9a;
  --nv-success-bg: #e6f6ec;  --nv-success-fg: #1a7a3c;  --nv-success-border: #bfe6cc;
  --nv-info-bg: #e7f1ff;     --nv-info-fg: #1356b8;     --nv-info-border: #bcd6f7;
  --nv-user-bg: #d6ebff;     --nv-user-fg: #0b3a5e;     --nv-user-border: #b6d9f7;

  /* CodeMirror syntax (GitHub-light) */
  --nv-syntax-fg: #24292e;
  --nv-syntax-comment: #6a737d;
  --nv-syntax-keyword: #d73a49;
  --nv-syntax-type: #005cc5;
  --nv-syntax-string: #032f62;

  /* Copilot output block */
  --nv-output-bg: #eef7f0;   --nv-output-border: #cce7d4; --nv-output-accent: #2da44e;
  --nv-output-fg: #1a4d2e;
  --nv-recap-fg: #0b5d78;
  --nv-label-fg: #5a7d8c;
  --nv-cost-fg: #5a6a2a;
  --nv-detail-fg: var(--bs-gray-800); /* #343a40 */

  /* Chrome accents */
  --nv-file-main: #d39e00;     /* main-file tab icon */
  --nv-file-header: #0a93a8;   /* header-file tab icon */
  --nv-writer-user: #0a7d33;   /* version writer (user) */
  --nv-platform: #0a8f6a;      /* device platform label */
  --nv-connect-border: #a3d9b8;/* disconnected connect button */
  --nv-gold: #b8860b;          /* warning gutter / status warnings */
  --nv-ink-info: #06323a;      /* text on info button */
  --nv-ink-warning: #3a2e00;   /* text on warning button */
  --nv-ink-cli: #095c4a;       /* chip hover text */

  /* Hardware (runner LEDs) */
  --nv-led-on: #00ff00;
  --nv-led-on-border: #00cc00;
  --nv-led-off: var(--bs-gray-300); /* #dee2e6 */

  /* Keep Bootstrap components in step with the tokens above. Loaded after
     bootstrap.min.css, so these win. (Currently equal to BS defaults; change
     a token here and the framework follows.) */
  --bs-primary: var(--nv-accent);
  --bs-body-bg: var(--nv-bg);
  --bs-body-color: var(--nv-text);
  --bs-border-color: var(--nv-border);
}

@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-panel);
  border-bottom: 1px solid var(--nv-border);
  min-width: 0;
}

.nv-brand {
  font-weight: 600;
  white-space: nowrap;
}

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

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

/* ============================================================================
   Brand identity — gradient wordmark + the gradient CTA button. Used by home,
   auth and anywhere the brand mark appears.
   ========================================================================= */
.nano {
  background: linear-gradient(135deg, var(--nv-brand-1), var(--nv-brand-2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.btn-accent {
  background: linear-gradient(135deg, var(--nv-brand-1), var(--nv-brand-2));
  border: none;
  color: white;
  font-weight: 600;
}

.btn-accent:hover,
.btn-accent:focus {
  color: white;
  filter: brightness(1.08);
}