/* NueroNova — UI finishing & navigation polish
 *
 * Loaded on every authenticated page (after components.css). Three concerns:
 *   1. Smooth, fast page jumps  — cross-document View Transitions + a top
 *      navigation progress bar (see core/nav-progress.js).
 *   2. Consistent keyboard focus — global `button { all: unset }` strips the
 *      default focus ring, so we add a single, tasteful :focus-visible ring.
 *   3. Enterprise finishing      — snappier interaction feedback, refined
 *      surfaces, dividers, and scrollbars.
 * All motion respects prefers-reduced-motion and the .reduce-motion body class.
 */

/* ─────────────────────────────────────────────────────────────────────────
   1. Cross-document View Transitions
   Chromium morphs the persistent shell (nav / header / rail) in place and
   cross-fades only the main content, so navigating between pages reads as
   "just the content changed" instead of a full white flash + reflow.
   Browsers without support fall back to an ordinary navigation.
   ───────────────────────────────────────────────────────────────────────── */
@view-transition { navigation: auto; }

/* Keep the shell visually stable across the navigation (same name => morph,
   not cross-fade). Each name must map to a single element per document. */
.app-nav    { view-transition-name: app-nav; }
.main-header{ view-transition-name: app-header; }
.app-rail   { view-transition-name: app-rail; }

/* Snappy content cross-fade. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 180ms;
  animation-timing-function: var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}
/* The shell should not fade at all — it stays put. */
::view-transition-old(app-nav),
::view-transition-new(app-nav),
::view-transition-old(app-header),
::view-transition-new(app-header),
::view-transition-old(app-rail),
::view-transition-new(app-rail) {
  animation: none;
  mix-blend-mode: normal;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}
body.reduce-motion::view-transition-group(*) { animation: none !important; }

/* ─────────────────────────────────────────────────────────────────────────
   2. Top navigation progress bar (driven by core/nav-progress.js)
   Gives instant "your click registered" feedback while the next document is
   still loading — the single biggest perceived-speed win for an MPA.
   ───────────────────────────────────────────────────────────────────────── */
#nav-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  z-index: 13000;
  background: linear-gradient(90deg, var(--brand-strong, #6366f1), var(--brand, #818cf8));
  box-shadow: 0 0 8px var(--brand, #818cf8);
  opacity: 0;
  transition: width .2s var(--ease-out, ease), opacity .2s ease;
  pointer-events: none;
}
#nav-progress.active { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  #nav-progress { transition: opacity .2s ease; }
}

/* ─────────────────────────────────────────────────────────────────────────
   3. Consistent keyboard focus ring
   `button { all: unset }` in variables.css removes the UA focus outline, so
   keyboard users get no visible focus. Restore one, only for keyboard focus.
   ───────────────────────────────────────────────────────────────────────── */
a:focus-visible,
button:focus-visible,
[role="tab"]:focus-visible,
[role="button"]:focus-visible,
[role="menuitem"]:focus-visible,
.nav-item:focus-visible,
.rail-btn:focus-visible,
.input:focus-visible,
.select:focus-visible,
.textarea:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--brand-strong, #6366f1);
  outline-offset: 2px;
  border-radius: var(--radius-sm, 6px);
}
/* Mouse users never see the ring (only :focus-visible triggers it). */
:focus:not(:focus-visible) { outline: none; }

/* Skip-to-content link for keyboard/screen-reader users. */
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 14000;
  padding: 8px 14px;
  background: var(--bg-surface-2, #18181c);
  color: var(--fg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md, 8px);
  transform: translateY(-150%);
  transition: transform .15s var(--ease-out, ease);
}
.skip-link:focus { transform: translateY(0); }

/* ─────────────────────────────────────────────────────────────────────────
   4. Interaction finishing — small, consistent feedback
   ───────────────────────────────────────────────────────────────────────── */
/* A tactile "press" on primary controls (skipped under reduce-motion). */
.btn:active,
.rail-btn:active,
.nav-item:active,
.section-tab:active,
.section-tab-primary:active,
.runs-tab:active { transform: translateY(0.5px); }

.btn, .rail-btn, .nav-item, .section-tab, .section-tab-primary, .runs-tab, .settings-nav-item {
  transition: background var(--dur-fast, 120ms) var(--ease-out, ease),
              color var(--dur-fast, 120ms) var(--ease-out, ease),
              border-color var(--dur-fast, 120ms) var(--ease-out, ease),
              transform var(--dur-fast, 120ms) var(--ease-out, ease);
}

/* The active nav item gets a crisp accent marker — a common enterprise cue
   that reads more "product" than a plain background swap. */
.app-nav .nav-item.active {
  position: relative;
}
.app-nav .nav-item.active::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 16px;
  border-radius: 0 3px 3px 0;
  background: var(--brand, #818cf8);
}
.sidebar-collapsed .app-nav .nav-item.active::before { left: -4px; height: 14px; }

/* Cards / surfaces: a hairline top-light for depth in dark mode. */
.settings-card,
.kn-card,
.dir-conn-card,
.usage-card { transition: border-color var(--dur-base, 200ms) var(--ease-out, ease); }

/* Content stage eases in on first paint so a fresh page settles rather than
   snapping in. Opacity-only on purpose: a `transform` here (even translateY(0)
   at rest with a fill mode) would establish a containing block and break any
   position:fixed descendant such as the chat compose bar. No fill mode, so no
   state lingers after the 220ms play. */
@media (prefers-reduced-motion: no-preference) {
  .main-stage > * { animation: nn-stage-in .22s var(--ease-out, ease); }
}
@keyframes nn-stage-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
body.reduce-motion .main-stage > * { animation: none; }

/* ─────────────────────────────────────────────────────────────────────────
   5. Scrollbars — slightly more refined, theme-aware (base rules live in
   variables.css; this just adds hover affordance + Firefox thin scrollbars).
   ───────────────────────────────────────────────────────────────────────── */
* { scrollbar-width: thin; scrollbar-color: var(--border-color) transparent; }