:root {
  /* --skylex-nav-* sono calcolate da skylex-nav-inset.js (inset reali Android). */
  --skylex-nav-inset: 0px;
  --skylex-nav-inset-top: 0px;
  --skylex-nav-bottom: max(env(safe-area-inset-bottom, 0px), var(--skylex-nav-inset));
  --skylex-nav-top: max(env(safe-area-inset-top, 0px), var(--skylex-nav-inset-top));
}
/* ============================================================
   SKYLEX MENU — barra in alto + cassetto laterale
   Una sola navigazione per TUTTO (app, reception, sito).
   Stile Originkit: vetro smerigliato, luce, accenti gradient.

   USO: <script src="skylex-menu.js"></script>   (prima di </body>)
   Il JS carica da solo questo CSS e costruisce il menu.
   Spegnere: <body data-menu="off">
   ============================================================ */

html body{ --skx-top:58px; }

/* spazio per non finire sotto la barra fissa */
html body .skx-navspace{
  height:var(--skx-top);display:block;pointer-events:none;
}

/* ---------- barra in alto ---------- */
html body .skx-top{
  position:fixed;top:0;left:0;right:0;z-index:9000;
  height:var(--skx-top);
  display:flex;align-items:center;gap:11px;
  padding:0 13px;
  padding-top:env(safe-area-inset-top,0);
  background:linear-gradient(180deg,rgba(9,14,21,.92),rgba(9,14,21,.74));
  backdrop-filter:blur(18px) saturate(170%);
  -webkit-backdrop-filter:blur(18px) saturate(170%);
  border-bottom:1px solid rgba(255,255,255,.09);
  box-shadow:0 14px 34px -22px rgba(0,0,0,.95);
  box-sizing:border-box;
}
html body .skx-top::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(74,222,128,.55),rgba(56,189,248,.55),rgba(167,139,250,.5),transparent);
  opacity:.75;
}

html body .skx-mark{
  width:34px;height:34px;flex:0 0 34px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.06);overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
}
html body .skx-mark img{width:100%;height:100%;display:block;object-fit:contain}
@keyframes skx-glow{0%,100%{filter:brightness(1)}50%{filter:brightness(1.28)}}

html body .skx-brand{line-height:1.05;min-width:0;flex:1}
html body .skx-brand b{
  display:block;font-size:.94rem;font-weight:800;letter-spacing:.08em;
  background:linear-gradient(96deg,#ffffff 10%,#bfe9ff 55%,#8ef0c0 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
html body .skx-brand span{
  display:block;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  color:#8ea0b0;font-weight:700;margin-top:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

html body .skx-dot{
  width:8px;height:8px;border-radius:50%;flex:0 0 8px;
  background:#4ade80;box-shadow:0 0 10px rgba(74,222,128,.9);
  animation:skx-blink 2.2s ease-in-out infinite;
}
@keyframes skx-blink{0%,100%{opacity:1}50%{opacity:.35}}

/* ---------- bottone hamburger ---------- */
html body .skx-burger{
  width:42px;height:42px;flex:0 0 42px;
  border:1px solid rgba(255,255,255,.13);border-radius:13px;
  background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.03));
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;cursor:pointer;padding:0;
  -webkit-tap-highlight-color:transparent;
  transition:border-color .25s,background .25s,transform .18s;
}
html body .skx-burger:active{transform:scale(.94)}
html body .skx-burger:hover{border-color:rgba(56,189,248,.5)}
html body .skx-burger i{
  display:block;width:17px;height:2px;border-radius:2px;
  background:#dbe7f2;transition:transform .3s,opacity .2s,width .3s;
}
html body.skx-open .skx-burger i:nth-child(1){transform:translateY(6px) rotate(45deg)}
html body.skx-open .skx-burger i:nth-child(2){opacity:0;width:0}
html body.skx-open .skx-burger i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------- velo scuro ---------- */
html body .skx-veil{
  position:fixed;inset:0;z-index:9001;
  background:rgba(2,5,9,.62);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;
}
html body.skx-open .skx-veil{opacity:1;visibility:visible}

/* ---------- cassetto ---------- */
html body .skx-drawer{
  position:fixed;top:0;right:0;z-index:9002;
  width:min(88vw,392px);height:100%;
  display:flex;flex-direction:column;
  background:linear-gradient(200deg,rgba(14,20,29,.97),rgba(7,11,17,.98));
  backdrop-filter:blur(24px) saturate(160%);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  border-left:1px solid rgba(255,255,255,.10);
  box-shadow:-30px 0 70px -30px rgba(0,0,0,.95);
  transform:translateX(102%);
  transition:transform .38s cubic-bezier(.2,.85,.2,1);
  padding-top:env(safe-area-inset-top,0);
  padding-bottom:env(safe-area-inset-bottom,0);
  box-sizing:border-box;
}
html body.skx-open .skx-drawer{transform:none}
html body .skx-drawer::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(420px 300px at 100% 0%,rgba(56,189,248,.13),transparent 65%),
    radial-gradient(380px 320px at 0% 100%,rgba(74,222,128,.10),transparent 62%);
}

html body .skx-dhead{
  position:relative;display:flex;align-items:center;gap:10px;
  padding:15px 15px 12px;border-bottom:1px solid rgba(255,255,255,.08);
}
html body .skx-dhead .skx-brand{flex:1}
html body .skx-close{
  width:36px;height:36px;flex:0 0 36px;border-radius:11px;cursor:pointer;
  border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.05);
  color:#dbe7f2;font-size:1.05rem;line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:border-color .25s,background .25s;
}
html body .skx-close:hover{border-color:rgba(248,113,113,.5);background:rgba(248,113,113,.10)}

/* ---------- ricerca ---------- */
html body .skx-search{position:relative;padding:12px 15px 6px}
html body .skx-search input{
  width:100%;box-sizing:border-box;
  padding:11px 12px 11px 36px;border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.045);
  color:#eaf2f8;font-size:.86rem;font-family:inherit;outline:none;
  transition:border-color .25s,background .25s;
}
html body .skx-search input:focus{
  border-color:rgba(56,189,248,.55);background:rgba(56,189,248,.07);
}
html body .skx-search::before{
  content:'\1F50D';position:absolute;left:26px;top:50%;transform:translateY(-40%);
  font-size:.82rem;opacity:.6;pointer-events:none;
}

/* ---------- elenco voci ---------- */
html body .skx-scroll{
  position:relative;flex:1;overflow-y:auto;overscroll-behavior:contain;
  padding:6px 12px 22px;-webkit-overflow-scrolling:touch;
}
html body .skx-group{margin-top:14px}
html body .skx-group.hide{display:none}
html body .skx-glabel{
  display:flex;align-items:center;gap:9px;
  font-size:.6rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:#8ea0b0;margin:0 6px 7px;
}
html body .skx-glabel::after{
  content:'';flex:1;height:1px;
  background:linear-gradient(90deg,rgba(255,255,255,.20),transparent);
}
html body .skx-item{
  display:flex;align-items:center;gap:11px;
  padding:10px 11px;margin-bottom:5px;border-radius:13px;
  text-decoration:none;color:#eaf2f8;
  border:1px solid transparent;background:transparent;
  transition:background .22s,border-color .22s,transform .16s;
  -webkit-tap-highlight-color:transparent;
}
html body .skx-item.hide{display:none}
html body .skx-item:hover{
  background:linear-gradient(150deg,rgba(56,189,248,.11),rgba(255,255,255,.02));
  border-color:rgba(56,189,248,.30);
}
html body .skx-item:active{transform:scale(.985)}
html body .skx-item.on{
  background:linear-gradient(150deg,rgba(74,222,128,.13),rgba(255,255,255,.02));
  border-color:rgba(74,222,128,.36);
}
html body .skx-ic{
  width:34px;height:34px;flex:0 0 34px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;font-size:1rem;
  background:linear-gradient(150deg,rgba(56,189,248,.18),rgba(74,222,128,.12));
  border:1px solid rgba(255,255,255,.11);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
}
html body .skx-txt{min-width:0;flex:1;line-height:1.22}
html body .skx-txt b{display:block;font-size:.9rem;font-weight:700}
html body .skx-txt span{
  display:block;font-size:.72rem;color:#8ea0b0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
html body .skx-ext{font-size:.7rem;color:#8ea0b0;flex:0 0 auto}
html body .skx-empty{
  text-align:center;color:#8ea0b0;font-size:.82rem;padding:26px 10px;
}

/* ---------- piede ---------- */
html body .skx-dfoot{
  position:relative;padding:11px 16px calc(11px + var(--skylex-nav-bottom));
  border-top:1px solid rgba(255,255,255,.08);
  font-size:.68rem;color:#7c8b99;text-align:center;letter-spacing:.04em;
}

@media (prefers-reduced-motion: reduce){
  html body .skx-drawer,html body .skx-veil,html body .skx-burger i{transition:none}
  html body .skx-mark{animation:none}
}

/* ---------- convivenza con le pagine ----------
   13/10/2026 — il Capo: «non riesco piu' ad aprire nuove chat perche' il tasto e' coperto».
   Le pagine MUSE hanno una tendina "sessioni" a tutto schermo (position:fixed; top:0) con il
   tasto «+ Nuova» in cima: la barra SKYLEX (fissa, 58px) ci finiva sopra. Qui la tendina parte
   SOTTO la barra. La regola e' innocua dove questi elementi sono statici (senza position, "top"
   non ha effetto) e agisce solo dove sono davvero ancorati in alto. */
html body #sidebar,
html body .sidebar,
html body #session-drawer,
html body .session-drawer{ top:var(--skx-top); }

/* il contenitore a tutta altezza non deve finire sotto la barra */
html body #app.ready,html body #layout{ max-height:calc(100dvh - var(--skx-top)); }

/* ---------- RESPONSIVE (Z Fold 7 e tablet) ----------
   13/10/2026 — il Capo usa lo Z Fold 7 aperto e chiuso: chiuso è un telefono
   stretto (344-420 px), aperto è quasi un tablet (673-904 px). Qui la barra si
   stringe sui telefoni stretti e il cassetto non copre più tutta la pagina larga. */
@media (max-width:420px){
  html body{ --skx-top:50px; }
  html body .skx-mark{ width:30px;height:30px;flex:0 0 30px;border-radius:9px; }
  html body .skx-brand b{ font-size:.86rem;letter-spacing:.06em; }
  html body .skx-brand span{ display:none; }
  html body .skx-burger{ width:38px;height:38px;flex:0 0 38px; }
  html body .skx-drawer{ width:min(94vw,340px); }
  html body .skx-item{ padding:9px 10px; }
  html body .skx-search{ padding:10px 12px 6px; }
}

/* fascia intermedia: Z Fold 7 APERTO (673-904 px CSS) e tablet piccoli.
   Qui la barra non e' ne' telefono ne' desktop: cassetto piu' stretto e
   testata con un filo d'aria in piu', cosi' non copre meta' schermo. */
@media (min-width:421px) and (max-width:759px){
  html body .skx-top{ padding:0 16px; }
  html body .skx-drawer{ width:min(64vw,360px); }
  html body .skx-scroll{ padding:6px 14px 22px; }
  html body .skx-txt b{ font-size:.92rem; }
}

@media (min-width:760px){
  html body .skx-top{ padding:0 20px; }
  html body .skx-brand b{ font-size:1rem; }
  html body .skx-drawer{ width:min(52vw,392px); }
  html body .skx-scroll{ padding:8px 16px 24px; }
  html body .skx-item{ padding:11px 13px; }
}

@media (min-width:1100px){
  html body .skx-drawer{ width:392px; }
}