/*
  CSS d'overlay NUI partagé entre Panel.astro et Centered.astro. Extrait des
  <style is:inline> qui étaient dupliqués dans chacune des 254 pages générées
  (gain ~1 MB sur le bundle dist NUI).

  Toutes les règles sont scopées via `html[data-vibe-nui-active]` — l'attribut
  n'est posé qu'en NUI (Lua resource), donc en mode web ces règles ne matchent
  rien et le fichier no-op.

  Les selectors `> .vibe-page-shell ...` (Panel) et `> main` (Centered) sont
  mutuellement exclusifs au niveau structurel — chaque layout ne déclenche que
  la branche qui le concerne.
*/

html[data-vibe-nui-active] {
  background: transparent !important;
  color-scheme: normal !important;
  width: 100% !important;
  height: 100% !important;
}
html[data-vibe-nui-active] body {
  background: transparent !important;
  width: 100vw !important;
  height: 100vh !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
/* Tablette : la frame = corps de l'appareil (bezel sombre + bord
   brillant), .vibe-page-shell / main = écran. Padding 14px tout autour
   simule l'épaisseur du bezel. ::before = pinhole camera centrée en
   haut. */
html[data-vibe-nui-active] .vibe-nui-frame {
  position: fixed !important;
  top: 12vh !important;
  left: 8vw !important;
  width: 84vw !important;
  height: 76vh !important;
  padding: 14px !important;
  background:
    radial-gradient(ellipse at top, rgba(80, 110, 180, 0.06), transparent 60%),
    linear-gradient(155deg, #2a2a2f 0%, #161619 45%, #0a0a0c 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  /* CEF Chromium 103 rend les box-shadow à grand blur (80px+) sur élément
     border-radius comme des blocs ~carrés noirs au lieu d'un flou doux —
     d'où les "petits coins full black" visibles autour de la tablette.
     On garde uniquement les inset highlights (très petits, pas affectés
     par le bug). Le bezel garde son contraste grâce au gradient + border. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5) !important;
  z-index: 1 !important;
  /* Fade smooth à l'open/close + atténue le flash MPA à la nav. */
  transition: opacity 150ms ease !important;
}
html[data-vibe-nui-active] .vibe-nui-frame::before {
  content: '' !important;
  position: absolute !important;
  top: 5px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: rgba(20, 30, 50, 0.95) !important;
  box-shadow:
    inset 0 0 0 1px rgba(140, 160, 200, 0.35),
    0 0 6px rgba(80, 130, 255, 0.2) !important;
  z-index: 2 !important;
}

/* === Layout Panel.astro : .vibe-nui-frame > .vibe-page-shell > main === */
/* Shell = écran de la tablette (cadre intérieur arrondi, contient sidebar +
   main). Pas de transition ici : la sidebar est persistée via transition:persist
   et NE doit PAS fader entre les pages — sinon flicker visible. C'est le <main>
   à l'intérieur qui porte le fade nav. */
html[data-vibe-nui-active] .vibe-nui-frame > .vibe-page-shell {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow: hidden !important;
  background: var(--color-panel-bg, #0a0a0a) !important;
  border-radius: 12px !important;
  /* Pas de box-shadow extérieur 0px-blur — CEF Chromium 103 rend
     parfois ce type de spread en carré dur autour de l'élément
     arrondi (artefact rendering). */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04) !important;
}
html[data-vibe-nui-active] .vibe-nui-frame .vibe-page-shell > main {
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  /* Transition nav (ClientRouter SPA). CEF Chromium 103 n'a pas l'API
     View Transitions → fade + slide manuel hooké sur les events Astro. */
  transition: opacity 220ms cubic-bezier(0.4, 0, 0.2, 1),
              transform 220ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}
html[data-vibe-nui-active] .vibe-nui-frame .vibe-page-shell > main[data-vibe-nav-out] {
  opacity: 0 !important;
  transform: translateY(8px) !important;
}
/* Sidebar : reposition relative à la frame (au lieu de viewport).
   Scope à enfant direct de .vibe-page-shell uniquement — sinon on
   écraserait les <aside> custom des dashboards. */
html[data-vibe-nui-active] .vibe-nui-frame > .vibe-page-shell > aside {
  position: absolute !important;
  height: 100% !important;
}
/* Header mobile sidebar : enfant direct seulement. */
html[data-vibe-nui-active] .vibe-nui-frame > .vibe-page-shell > header {
  position: absolute !important;
  width: 100% !important;
}

/* === Layout Centered.astro : .vibe-nui-frame > main directement === */
html[data-vibe-nui-active] .vibe-nui-frame > main {
  min-height: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  background: var(--color-panel-bg, #0a0a0a) !important;
  border-radius: 12px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04) !important;
  transition: opacity 220ms cubic-bezier(0.4, 0, 0.2, 1),
              transform 220ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}
html[data-vibe-nui-active] .vibe-nui-frame > main[data-vibe-nav-out] {
  opacity: 0 !important;
  transform: translateY(8px) !important;
}

/* === Bouton close NUI === */
.vibe-nui-close { display: none; }
html[data-vibe-nui-active] .vibe-nui-close {
  display: flex;
  position: absolute;
  top: 26px;
  right: 26px;
  z-index: 100;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(20, 20, 20, 0.6);
  color: rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  backdrop-filter: blur(8px);
  transition: background 120ms, color 120ms, transform 120ms;
}
html[data-vibe-nui-active] .vibe-nui-close:hover {
  background: rgba(40, 40, 40, 0.95);
  color: #fff;
  transform: scale(1.05);
}
html[data-vibe-nui-active] .vibe-nui-close:active {
  transform: scale(0.95);
}

/* Caché : opacity:0 (au lieu de display:none) pour permettre le fade. */
html[data-vibe-nui-hidden] .vibe-nui-frame {
  opacity: 0 !important;
  pointer-events: none !important;
}