/* ================================================================
   NervalFrost — Palefò platform chrome
   ================================================================
   Token values adopted verbatim from mesaj.palefo.dev, as used in
   anvayise/static/css/styles.css and kikotemapvote/css/style.css
   (verified identical across both, 2026-08-24).

   2026-08-28: re-aligned against app.palefo.dev. The palette already
   matched exactly — --nf-blue IS --color-primary, --nf-grad IS
   --gradient-primary — so only the SHAPE tokens differed. Radii, card
   treatment, button shape and the page wash below are read from that
   app's computed styles, not eyeballed from a screenshot.

   Aesthetic: periwinkle backdrop, frost panel, white cards on soft
   lavender strokes, brand purple + bubble blue. Inter throughout.

   This file is the SHARED shell for AloKandida's operator surfaces
   (IVR simulator, prompt library). Do not fork the token values —
   change them here or in the upstream canon, never per page.
   ================================================================ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }

:root {
  /* ── NervalFrost canon ─────────────────────────────────────── */
  --nf-backdrop: #e3e5fa;              /* periwinkle */
  --nf-frost: #f5f6fb;                 /* Nerval Frost — panel */
  --nf-card: #ffffff;
  --nf-blue: rgb(49, 86, 142);         /* primary text blue */
  --nf-purple: rgba(86, 44, 195, 0.85);/* brand purple */
  --nf-purple-solid: #542CC2;
  --mp-tip-blue: #3f34e6;
  --nf-disc: rgba(84, 44, 194, 0.08);  /* pale lavender disc */
  --nf-stroke-50: rgba(86, 44, 195, 0.5);
  --nf-frame-stroke: rgba(160, 140, 225, 0.5);
  --nf-hairline-25: rgba(160, 140, 225, 0.25);
  --nf-hairline-50: rgba(160, 140, 225, 0.5);
  --nf-sep-20: rgba(86, 44, 195, 0.2);
  --bubble-blue: #6D8AFF;              /* Palefò result bubble */
  --nf-grad: linear-gradient(96deg, rgb(95, 165, 250) 0%, rgb(167, 78, 222) 104%);
  --breather: 14px;

  --ok-green: #2fb47c;
  --warn: #e07a1f;
  --danger: #e04f1f;
  --shadow-color: rgba(84, 44, 194, 0.32);

  /* Read off mesaj.palefo.dev, which is the canon this file was derived from.
     app.palefo.dev serves a flatter 90deg variant of the same periwinkle; the
     diagonal is what sits behind content on both. */
  --page-wash: linear-gradient(135deg,
    #ccd4f4 0%, #e3e5fa 45%, #ece2f6 75%, #f2e4f2 100%);

  --nf-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --nf-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Radii — app.palefo.dev: --radius-lg 24, --radius-md 12, --radius-full 999. */
  --nf-radius: 24px;
  --nf-radius-md: 12px;
  --nf-radius-sm: 12px;
  --nf-radius-full: 999px;

  /* Card treatment, verbatim from that app's --color-card-* tokens. */
  --nf-card-bg: rgba(255, 255, 255, 0.96);
  --nf-card-border: rgba(187, 213, 246, 0.6);
  --nf-card-shadow: rgba(53, 56, 67, 0.12);
  --nf-btn-shadow: rgba(155, 91, 248, 0.45);

  --nf-shadow: 0 18px 44px -26px var(--nf-card-shadow), 0 2px 8px -4px var(--nf-card-shadow);
  --nf-shadow-soft: 0 6px 12px 0 rgba(49, 86, 142, 0.12);
  --nf-shadow-glow: 0 8px 18px -6px var(--nf-btn-shadow);
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--nf-sans);
  color: var(--nf-blue);
  background: var(--page-wash);
  background-attachment: fixed;
  min-height: 100vh;
  min-height: 100dvh;
}

/* ── Brand bar ─────────────────────────────────────────────────
   Frost panel, hairline base, sticky. Holds the product name on the
   left and status chips on the right.                            */
.nf-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 20px;
  background: rgba(245, 246, 251, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--nf-hairline-25);
}

.nf-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding-right: 14px;
  margin-right: 3px;
  border-right: 1px solid var(--nf-hairline-25);
}
.nf-brand img {
  height: 46px;
  width: auto;
  /* techtralabs-logo.png carries a real alpha channel (generated from the
     supplied JPG). Do NOT go back to mix-blend-mode: the brand bar uses
     backdrop-filter, which creates an isolation context and silently kills
     blending against the page beneath - that produced a white box. */
}

.nf-bar h1 {
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--nf-purple-solid);
}
.nf-bar h1 span { color: var(--nf-blue); font-weight: 500; }
.nf-bar .nf-spacer { flex: 1 }

/* ── Chips ─────────────────────────────────────────────────────── */
.nf-chip {
  font-family: var(--nf-mono);
  font-size: 11px;
  line-height: 1;
  padding: 6px 9px;
  border-radius: 999px;
  background: var(--nf-disc);
  color: var(--nf-purple-solid);
  border: 1px solid var(--nf-hairline-25);
  white-space: nowrap;
}
.nf-chip.is-good { color: #1d7d57; background: rgba(47, 180, 124, 0.10);
                   border-color: rgba(47, 180, 124, 0.35); }
.nf-chip.is-warn { color: #9a5410; background: rgba(224, 122, 31, 0.10);
                   border-color: rgba(224, 122, 31, 0.35); }
.nf-chip.is-bad  { color: #a5330f; background: rgba(224, 79, 31, 0.10);
                   border-color: rgba(224, 79, 31, 0.35); }

/* ── Link button ───────────────────────────────────────────────── */
.nf-link {
  font-size: 12px;
  text-decoration: none;
  color: var(--nf-purple-solid);
  border: 1px solid var(--nf-hairline-25);
  background: var(--nf-card);
  padding: 6px 11px;
  border-radius: 999px;
  transition: 0.15s;
}
.nf-link:hover { background: var(--nf-disc); border-color: var(--nf-stroke-50); }

/* ── Prominent nav action ──────────────────────────────────────
   The gradient pill, used for the primary cross-page jump so it is
   the most visible control in the bar after the brandmark.       */
.nf-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  color: #fff;
  background: var(--nf-grad);
  padding: 10px 16px;
  border-radius: var(--nf-radius-full);
  box-shadow: var(--nf-shadow-glow);
  transition: 0.14s;
}
.nf-cta:hover { filter: brightness(1.06); transform: translateY(-1px); }
.nf-cta .nf-cta-icon { font-size: 15px; line-height: 1 }

/* ── Surfaces ──────────────────────────────────────────────────── */
.nf-panel {
  background: var(--nf-card-bg);
  border: 1px solid var(--nf-card-border);
  border-radius: var(--nf-radius);
  box-shadow: var(--nf-shadow);
}
.nf-card {
  background: var(--nf-card-bg);
  border: 1px solid var(--nf-card-border);
  border-radius: var(--nf-radius-md);
  box-shadow: var(--nf-shadow-soft);
}

.nf-section-title {
  font-family: var(--nf-mono);
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--nf-purple);
  margin-bottom: 10px;
}

/* ── Buttons ───────────────────────────────────────────────────── */
.nf-btn {
  font-family: var(--nf-sans);
  font-size: 14px;
  font-weight: 550;
  color: var(--nf-blue);
  background: var(--nf-card);
  border: 1px solid var(--nf-card-border);
  border-radius: var(--nf-radius-full);
  padding: 10px 16px;
  cursor: pointer;
  box-shadow: var(--nf-shadow-soft);
  transition: 0.12s;
}
.nf-btn:hover:not(:disabled) {
  border-color: var(--nf-stroke-50);
  background: var(--nf-disc);
  transform: translateY(-1px);
}
.nf-btn:active:not(:disabled) { transform: translateY(1px); }
.nf-btn:disabled { opacity: 0.38; cursor: default; }

.nf-btn--primary {
  background: var(--nf-grad);
  color: #fff;
  border: 0;
  box-shadow: var(--nf-shadow-glow);
}
.nf-btn--primary:hover:not(:disabled) { filter: brightness(1.05); background: var(--nf-grad); }

.nf-btn--danger {
  background: var(--danger);
  color: #fff;
  border: 0;
}
.nf-btn--danger:hover:not(:disabled) { filter: brightness(1.06); background: var(--danger); }

/* ── Form controls ─────────────────────────────────────────────── */
.nf-label {
  display: block;
  font-size: 12px;
  color: var(--nf-purple);
  margin: 10px 0 4px;
}
.nf-input, .nf-select {
  width: 100%;
  font-family: var(--nf-mono);
  font-size: 13px;
  color: var(--nf-blue);
  /* app.palefo.dev inputs: white, --radius-md, no shadow. */
  background: #fff;
  border: 1px solid var(--nf-card-border);
  border-radius: var(--nf-radius-sm);
  padding: 9px 11px;
}
.nf-input:focus, .nf-select:focus {
  outline: none;
  border-color: var(--nf-purple-solid);
  box-shadow: 0 0 0 3px var(--nf-disc);
}

/* ── Techtra Labs footer lockup ────────────────────────────────
   Follows the Palefò logo-footer pattern (canon rule 7): centered,
   fixed height, muted until hover.

   `mix-blend-mode: multiply` is load-bearing — the supplied asset is
   a black-on-WHITE JPG with no alpha channel. On the light frost
   background multiply drops the white to transparent, so the mark
   reads as if it had been supplied as a transparent PNG. Do not move
   this lockup onto a dark surface without a real alpha asset.        */
.nf-brandmark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 40px 0 48px;
  margin-top: 12px;
  border-top: 1px solid var(--nf-hairline-25);
}
.nf-brandmark img {
  height: 88px;
  width: auto;
  transition: transform 0.18s;
}
.nf-brandmark:hover img { transform: scale(1.03); }
.nf-brandmark span {
  font-family: var(--nf-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--nf-purple-solid);
}

/* ── Scrollbars ────────────────────────────────────────────────── */
.nf-scroll::-webkit-scrollbar { width: 10px; }
.nf-scroll::-webkit-scrollbar-track { background: transparent; }
.nf-scroll::-webkit-scrollbar-thumb {
  background: var(--nf-hairline-25);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}
.nf-scroll::-webkit-scrollbar-thumb:hover { background: var(--nf-stroke-50); background-clip: content-box; }

/* Language dropdown — app, Studio and Admin. Sized for "flag + name" rather
   than a bare code, and the emoji font is named first so the flag renders as a
   flag on Linux/Chrome instead of falling back to the letter pair (HT, FR). */
.nf-langsw { width: auto; min-width: 132px; font-size: 12px; padding: 5px 26px 5px 9px;
             font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji",
                          var(--nf-sans); }