/* ═══ LEX DESIGN — glass.css : la matière Liquid Glass ═══
   .lg = surface en verre. lex-glass.js remplace le flou par la
   vraie réfraction (carte de lentille) sur Chrome/Edge/Electron ;
   ce fichier fournit le rendu de base + fallback Safari/Firefox. */
.lg{
  position:relative;isolation:isolate;
  background:var(--glass-bg);
  border-radius:var(--radius);
  -webkit-backdrop-filter:blur(var(--fallback-blur)) saturate(170%);
  backdrop-filter:blur(var(--fallback-blur)) saturate(170%);
  box-shadow:var(--glass-shadow);
}
/* rim lumineux : double liseré façon verre épais */
.lg::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;
  box-shadow:
    inset 0 1.5px 1px -0.5px var(--hl-top),
    inset 1px 0 1px -0.5px var(--hl-low),
    inset -1px 0 1px -0.5px var(--hl-low),
    inset 0 -1.5px 1px -0.5px var(--hl-low),
    inset 0 0 0 1px rgba(255,255,255,.06);
  border:1px solid var(--glass-border);
}
/* reflet spéculaire qui suit le pointeur (--mx/--my via lex-glass.js) */
.lg::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;
  background:radial-gradient(200px circle at var(--mx,25%) var(--my,-30%),rgba(255,255,255,.14),transparent 65%);
  opacity:0;transition:opacity .35s;
}
.lg:hover::after{opacity:1}
.lg>*{position:relative;z-index:3}
.lg-strong{background:var(--glass-bg-strong)}
.lg-pill{border-radius:999px}
/* verre plein sans réfraction (surfaces très denses : tableaux, modales longues) */
.lg-flat{-webkit-backdrop-filter:blur(var(--fallback-blur)) saturate(160%);backdrop-filter:blur(var(--fallback-blur)) saturate(160%)}

/* ── LA BULLE D'EAU (sélection flottante, gérée par lex-glass.js) ── */
.has-bubble{position:relative}
.nav-bubble{position:absolute;left:0;top:0;z-index:0;pointer-events:none;
  transition:transform .6s cubic-bezier(.32,1.55,.35,1),width .35s ease,height .35s ease}
.nav-bubble-skin{position:absolute;inset:0;border-radius:999px;
  background:color-mix(in srgb,var(--accent-app) 22%,rgba(255,255,255,.06));
  -webkit-backdrop-filter:blur(6px) saturate(180%) brightness(1.08);
  backdrop-filter:blur(6px) saturate(180%) brightness(1.08);
  box-shadow:
    0 6px 20px color-mix(in srgb,var(--accent-app) 35%,rgba(0,0,0,.25)),
    inset 0 1.5px 1.5px -0.5px rgba(255,255,255,.75),
    inset 0 -2px 3px -1px color-mix(in srgb,var(--accent-app) 40%,rgba(255,255,255,.18)),
    inset -1px 0 2px -1px rgba(255,255,255,.3),
    inset 0 0 0 1px color-mix(in srgb,var(--accent-app) 35%,rgba(255,255,255,.25));
  animation:bubble-float 3.4s ease-in-out infinite alternate}
.nav-bubble-skin::after{content:"";position:absolute;top:12%;left:9%;width:32%;height:36%;
  border-radius:50%;background:radial-gradient(ellipse at 40% 35%,rgba(255,255,255,.55),transparent 70%);
  filter:blur(1px);transform:rotate(-18deg)}
@keyframes bubble-float{from{transform:translateY(-.8px) scale(1.005,.995)}to{transform:translateY(.8px) scale(.995,1.005)}}
@media (prefers-reduced-motion: reduce){.nav-bubble-skin{animation:none}.nav-bubble{transition:none}}

/* ══ LA BULLE — une seule implémentation pour TOUTES les barres de TOUTES
   les apps : le conteneur (barre, volet, onglets) porte .bubble-on et pilote
   son ::before via --bx/--by/--bw/--bh (posés par lex-glass.js).
   La bulle vit SOUS le contenu des boutons (z0 < z1) : toujours lisible. ══ */
.bubble-on{transition:scale .28s cubic-bezier(.22,1,.36,1)}
/* ÉCRANS TACTILES : la barre ne se soulève pas (scale 1.03 sur un élément à
   backdrop-filter = re-calcul du flou à CHAQUE frame sur iOS → saccades dès
   que la page derrière est chargée, ex. Inventaire/Panel). La capsule ×1.4
   (sans filtre) garde tout l'effet visuel, parfaitement fluide. */
@media (hover:none) and (pointer:coarse){
  .bubble-engaged{scale:none!important}
}
.bubble-on::before{
  content:"";position:absolute;left:0;top:0;width:var(--bw,0px);height:var(--bh,0px);
  transform:translate(var(--bx,0px),var(--by,0px)) translateZ(0);
  /* COUCHE PROPRE : sans ça, chaque frame d'animation de la capsule repeint
     la barre floutée entière (re-calcul du backdrop-filter → saccades quand
     la page derrière est chargée, ex. Inventaire/Panel). Avec sa propre
     couche, l'animation est purement GPU. */
  will-change:transform,scale;
  border-radius:999px;pointer-events:none;z-index:0;
  /* l'origine du grossissement = le CENTRE de la capsule (sinon le scale
     multiplie aussi sa position → la bulle "avance plus vite que le doigt") */
  transform-origin:calc(var(--bx,0px) + var(--bw,0px)/2) calc(var(--by,0px) + var(--bh,0px)/2);
  transition:transform .24s cubic-bezier(.2,.9,.22,1),width .24s cubic-bezier(.2,.9,.22,1),
    height .24s cubic-bezier(.2,.9,.22,1),transform-origin .24s cubic-bezier(.2,.9,.22,1),
    background .25s ease,box-shadow .25s ease,scale .25s ease;
  /* repos : capsule translucide SANS filtre (fidèle au demo de Maxime) */
  background:color-mix(in srgb,var(--text) 12%,transparent);
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--text) 30%,transparent),
    0 6px 18px rgba(0,0,0,.18),
    inset 0 0 0 1px color-mix(in srgb,var(--text) 6%,transparent)}
/* halo qui suit le doigt (nav-glow du demo), teinté couleur mère */
.bubble-on::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:radial-gradient(260px 160px at var(--gx,50%) var(--gy,50%),
    color-mix(in srgb,var(--accent-app) 16%,transparent) 0%,transparent 74%);
  opacity:var(--ga,0);transition:opacity .18s ease;will-change:opacity}
.bubble-instant::before{transition:none!important}
/* le contenu des boutons passe TOUJOURS au-dessus de la bulle */
.bottombar button,.pbottom button,.sb-nav button,.pnav button,.nav > button,.thread-chip,.conv{position:relative;z-index:1}
/* barres d'onglets non défilantes (posé par lex-glass.js) : geste entièrement
   verrouillé, BOUTONS COMPRIS — le !important bat le touch-action:manipulation
   de base.css sur les boutons, sinon Safari vole le glisser pour défiler la
   page dès que le doigt dérive verticalement et la bulle lâche */
.bubble-lock,.bubble-lock *{touch-action:none!important}
.bubble-lock{-webkit-user-select:none;user-select:none}
/* appui / interaction : la capsule SE SOULÈVE (×1.4) et devient une lentille
   (réfraction réelle via --lens posé par lex-glass.js sur Chrome ;
    Safari : capsule translucide agrandie — même rendu que le demo) */
.bubble-engaged{scale:1.03}
.bubble-engaged::before{
  scale:1.4;
  background:color-mix(in srgb,var(--text) 8%,transparent);
  -webkit-backdrop-filter:var(--lens,none);
  backdrop-filter:var(--lens,none);
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--text) 36%,transparent),
    0 14px 34px rgba(0,0,0,.30),
    inset 0 0 0 1px color-mix(in srgb,var(--text) 8%,transparent)}
/* fondu au changement de page : un VOILE couleur de fond se dissout une seule
   fois — totalement insensible aux re-rendus multiples de l'app (zéro
   clignotement). Les barres restent au-dessus (z-index supérieur). */
.lex-veil{position:fixed;inset:0;z-index:25;pointer-events:none;background:var(--bg);opacity:0}
@keyframes lex-veil{from{opacity:.92}to{opacity:0}}
body.lex-fading .lex-veil{animation:lex-veil .42s ease both}
@media (prefers-reduced-motion: reduce){body.lex-fading .lex-veil{animation:none}}

/* pendant le suivi du doigt : déplacement strictement 1:1 (aucune transition
   de position — comme le demo en mode dragging) */
.bubble-drag.bubble-on::before{
  transition:background .2s ease,box-shadow .2s ease,scale .2s ease}
@media (prefers-reduced-motion: reduce){.bubble-on::before{transition:none;animation:none!important}}