/* ═══════════════════════════════════════════════════════════
   HOLMES · ORBIT — stylesheet
   Temi gestiti dal sistema unificato [data-theme] in tokens.css
   (4 opzioni: auto | light | dark | gold).
   Questo file definisce solo i default di fallback (font + fallback
   colori usati quando data-theme non è ancora applicato dal bootstrap).
═══════════════════════════════════════════════════════════ */

:root{
  /* ─── fallback: usati solo se tokens.css non ha ancora matchato ─── */
  --faint:#4f4c45;
  --font-sans:"Space Grotesk", system-ui, sans-serif;
  --font-mono:"JetBrains Mono", ui-monospace, monospace;
  --font-display:"Instrument Serif", serif;
  --display-style:italic;
  --screen-bg:rgba(11,11,12,0.78);
}

/* ═══ base ═══ */
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--ink);font-family:var(--font-sans);min-height:100vh;overflow:hidden;font-size:13px;user-select:none;transition:background 0.4s ease, color 0.4s ease}
.mono{font-family:var(--font-mono);font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:var(--mute)}

.bg{position:fixed;inset:0;z-index:0;overflow:hidden;
  background:
    radial-gradient(ellipse 100% 80% at 50% 45%, rgba(244,217,160,0.035) 0%, transparent 100%),
    radial-gradient(ellipse 120% 80% at 50% 50%, var(--bg) 0%, var(--bg-2) 72%, #050709 100%);
}

/* ═══ TOPBAR + BANNER ═══ */
.topbar{position:fixed;top:0;left:0;right:0;z-index:30;padding:14px 22px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);background:rgba(11,11,12,0.6);backdrop-filter:blur(14px)}
.brand{display:flex;gap:10px;align-items:center;font-weight:500;color:var(--ink)}
.brand svg{width:18px;height:18px;color:var(--glow)}
.brand .t{font-family:var(--font-mono);font-size:10px;letter-spacing:0.22em;text-transform:uppercase;color:var(--mute);margin-left:4px;padding-left:10px;border-left:1px solid var(--line-2)}
.top-right{display:flex;gap:14px;align-items:center;font-family:var(--font-mono);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--mute)}
.top-right .dot{width:6px;height:6px;border-radius:50%;background:var(--glow);box-shadow:0 0 8px var(--glow)}
.top-right .av{width:26px;height:26px;border-radius:50%;background:var(--glow);color:var(--bg-2);display:grid;place-items:center;font-weight:600;font-size:12px;font-family:var(--font-sans);box-shadow:0 0 16px var(--glow-soft)}

/* ticker banner (decorativo, tenuto per scelta utente) */
.ticker{position:fixed;top:52px;left:0;right:0;z-index:16;height:22px;overflow:hidden;border-bottom:1px solid var(--line);background:rgba(11,11,12,0.55);backdrop-filter:blur(6px);font-family:var(--font-mono);font-size:10px;letter-spacing:0.2em;color:var(--mute);text-transform:uppercase;display:flex;align-items:center}
.ticker .run{display:inline-flex;gap:46px;white-space:nowrap;padding-left:100%;animation:tickerRun 68s linear infinite}
.ticker .run span{display:inline-flex;gap:10px;align-items:center}
.ticker .run span::before{content:"";width:4px;height:4px;background:var(--glow);border-radius:50%;box-shadow:0 0 4px var(--glow)}
.ticker .run b{color:var(--glow)}
@keyframes tickerRun{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* shape-bar */
.shape-bar{position:fixed;top:124px;left:50%;transform:translateX(-50%);z-index:25;display:flex;gap:2px;padding:4px;border:1px solid var(--line);background:rgba(11,11,12,0.7);backdrop-filter:blur(10px);border-radius:10px}
.shape-bar button{font-family:var(--font-mono);font-size:9.5px;letter-spacing:0.18em;text-transform:uppercase;color:var(--mute);padding:6px 12px;background:transparent;border:1px solid transparent;cursor:pointer;transition:all .15s;border-radius:6px}
.shape-bar button:hover{color:var(--ink)}
.shape-bar button.active{background:var(--glow-dim);color:var(--glow);border-color:var(--glow-line-strong)}
/* toggle shape visibility via attributo body */
body:not([data-shape="octa"]) .shape-octa{display:none}
body[data-shape="octa"] .shape-sphere{display:none}
/* Card coerenti con le facce ottaedro: tinta basata sul --glow del tema. */
body[data-shape="octa"] .screen{
  background:linear-gradient(160deg,
    color-mix(in srgb, var(--glow) 14%, #0a0a0a 86%),
    color-mix(in srgb, var(--glow) 6%, #050505 94%));
  border-color:var(--glow-line-strong);
  box-shadow:0 0 28px var(--glow-dim), 0 20px 40px rgba(0,0,0,0.6),
             inset 0 1px 0 color-mix(in srgb, var(--glow) 20%, transparent)
}
body[data-shape="octa"] .screen::before{border-color:var(--glow-line)}
body[data-shape="octa"] .screen .hd{border-bottom-color:var(--glow-line)}
body[data-shape="octa"] .screen .list{border-top-color:var(--glow-line)}

/* ═══ Holmes card: prompt input + bottoni ═══
   La card resta pointer-events:none (come le altre, per il drag sfera),
   ma i controlli interni riattivano pointer-events:auto per essere
   cliccabili e il pointerdown al loro interno non propaga alla sfera
   (evita di scatenare drag mentre l'utente clicca sull'input). */
#s-holmes .hd{display:flex;justify-content:space-between;align-items:center}
.holmes-expand{background:transparent;border:1px solid var(--glow-line);color:var(--glow);width:22px;height:18px;display:grid;place-items:center;font-size:11px;cursor:pointer;pointer-events:auto;padding:0;line-height:1;transition:all .15s}
.holmes-expand:hover{background:var(--glow-dim);border-color:var(--glow-line-strong)}
.holmes-prompt-wrap{display:flex;gap:6px;align-items:stretch;margin-top:10px;flex:1;min-height:0}
.holmes-prompt{flex:1;background:rgba(0,0,0,0.4);border:1px solid var(--glow-line);color:var(--ink);padding:6px 8px;font-family:var(--font-sans);font-size:11px;line-height:1.35;resize:none;pointer-events:auto;outline:none;min-width:0}
.holmes-prompt:focus{border-color:var(--glow-line-strong);background:rgba(0,0,0,0.55)}
.holmes-prompt::placeholder{color:var(--mute);opacity:0.7}
.holmes-send{background:var(--glow-dim);border:1px solid var(--glow-line-strong);color:var(--glow);width:28px;font-size:15px;cursor:pointer;pointer-events:auto;display:grid;place-items:center;padding:0;transition:all .15s;font-family:var(--font-sans)}
.holmes-send:hover{background:var(--glow-line);color:var(--bg)}
.holmes-send:active{transform:scale(0.95)}
/* ottaedro: vertici glowing stile sphere-core ridotto, spigoli sottili gold */
.shape-octa{position:absolute;inset:0;pointer-events:none}
.shape-octa svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 10px var(--glow-dim))}
/* Polygons: solo fill. Il contrasto tra facce crea già il segno dell'edge. */
.octa-faces polygon{stroke:none}
/* Edges: neutri e sottili. Segnano la silhouette ma non "contornano" i fronti. */
.octa-edges line{stroke:var(--line);stroke-width:0.8;stroke-linecap:round}

/* ═══ LEFT + RIGHT PANELS (sidebar chrome) ═══ */
.left-panel{position:fixed;top:90px;left:30px;width:272px;z-index:20;display:flex;flex-direction:column;gap:12px;bottom:130px;transition:bottom .55s cubic-bezier(.25,.8,.25,1)}
/* In split-mode la stage scala 0.42 e si sposta verso basso-sinistra in modo
   da centrarsi orizzontalmente con questo pannello (calc(166px - 50vw) =
   center del .left-panel: left:30px + width:272px/2). La sfera/ottaedro
   ridotta finisce dietro al pannello conversazioni → comprimo verticalmente
   il pannello per liberare lo spazio. Stessa easing/durata di animateStageSplit. */
body.split-mode .left-panel{bottom:340px}
/* La card "Conversazioni" (non la user-card) prende tutto lo spazio rimanente
   nel left-panel; #sess-list scrolla internamente quando le sessioni superano
   l'altezza disponibile. Fade-mask in basso per smooth visivo. */
.left-panel > .card:not(.user-card){flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.left-panel > .card:not(.user-card) #sess-list{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--glow-line) transparent;padding-right:4px;-webkit-mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 28px),transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 28px),transparent 100%)}
.left-panel > .card:not(.user-card) #sess-list::-webkit-scrollbar{width:6px}
.left-panel > .card:not(.user-card) #sess-list::-webkit-scrollbar-thumb{background:var(--glow-line);border-radius:3px}
.left-panel > .card:not(.user-card) #sess-list::-webkit-scrollbar-track{background:transparent}
.right-panel{position:fixed;top:90px;right:30px;width:240px;z-index:20;display:flex;flex-direction:column;gap:12px}
.card{position:relative;padding:16px;border:1px solid var(--line);background:rgba(11,11,12,0.68);backdrop-filter:blur(14px);box-shadow:0 20px 40px rgba(0,0,0,0.5)}
.card::before,.card::after{content:"";position:absolute;width:14px;height:14px;opacity:0.7}
.card::before{top:-1px;left:-1px;border-top:1px solid var(--glow);border-left:1px solid var(--glow)}
.card::after{bottom:-1px;right:-1px;border-bottom:1px solid var(--glow);border-right:1px solid var(--glow)}
.card h4{font-family:var(--font-mono);font-size:9.5px;letter-spacing:0.24em;text-transform:uppercase;color:var(--mute);margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between}
.card h4 .n{color:var(--glow);background:var(--glow-dim);border:1px solid var(--glow-line);padding:1px 6px;font-size:9px}

/* quick nav (mappa sulle 4 app) */
.flat-nav{display:flex;flex-direction:column;gap:2px}
.flat-nav button{background:transparent;border:1px solid transparent;color:var(--mute);padding:9px 10px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.1em;text-transform:uppercase;cursor:pointer;text-align:left;display:flex;justify-content:space-between;align-items:center;transition:all .15s}
.flat-nav button:hover{color:var(--ink);background:var(--glow-dim)}
.flat-nav button.active{color:var(--glow);background:var(--glow-dim);border-color:var(--glow-line)}
.flat-nav button .k{background:var(--glow-dim);border:1px solid var(--glow-line);padding:1px 6px;font-size:9px;color:var(--glow)}

.user-card{display:flex;gap:10px;align-items:center;padding:12px 14px;border:1px solid var(--line);background:rgba(11,11,12,0.68);backdrop-filter:blur(14px)}
.user-card .av{width:34px;height:34px;border-radius:50%;background:var(--glow);color:var(--bg-2);display:grid;place-items:center;font-family:var(--font-display);font-style:var(--display-style);font-size:18px;box-shadow:0 0 12px var(--glow-soft)}
.user-card .n{font-size:12.5px;font-weight:500;color:var(--ink)}
.user-card .e{font-family:var(--font-mono);font-size:9.5px;color:var(--mute)}

.dossier h2{font-family:var(--font-display);font-style:var(--display-style);font-size:30px;line-height:0.98;letter-spacing:-0.01em;margin-bottom:12px;color:var(--ink)}
.dossier h2 em{color:var(--glow)}
.dossier .row{display:flex;justify-content:space-between;padding:6px 0;border-top:1px solid var(--line);font-size:11.5px}
.dossier .row:first-of-type{border:none}
.dossier .row b{font-family:var(--font-mono);font-weight:500;color:var(--ink)}
.dossier .row b.live{color:var(--glow)}

.hint{font-family:var(--font-mono);font-size:9px;letter-spacing:0.18em;text-transform:uppercase;color:var(--mute);line-height:1.7}
.hint kbd{border:1px solid var(--line-2);padding:1px 5px;color:var(--glow);font-size:8.5px;background:var(--glow-dim)}

/* ═══ SPHERE STAGE ═══ */
.stage{position:fixed;inset:0;z-index:5;display:grid;place-items:center;perspective:1800px;perspective-origin:50% 45%}
.sphere{position:relative;width:520px;height:520px;transform-style:preserve-3d;cursor:grab;touch-action:none}
.sphere.drag{cursor:grabbing}
.sphere-core{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--glow-soft) 0%, var(--glow-dim) 20%, rgba(0,0,0,0.15) 50%, rgba(0,0,0,0.45) 100%);
  border:1px solid var(--glow-line);
  box-shadow:inset 0 0 140px var(--glow-dim), inset -30px -40px 120px rgba(0,0,0,0.5), 0 0 120px var(--glow-dim), 0 0 220px var(--glow-dim);
  pointer-events:none}
.wireframe{position:absolute;inset:0;pointer-events:none}
.wireframe svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 8px var(--glow-dim))}

/* mini-schermi sulla sfera: sempre inerti al pointer, l'apertura del pannello
   è gestita da orb.js via hit-test manuale al click sulla sfera. Evita
   conflitti del browser (hover/cursor/drag nativo) durante la rotazione. */
.screen{position:absolute;top:50%;left:50%;width:240px;height:170px;margin-left:-120px;margin-top:-85px;background:var(--screen-bg);border:1px solid var(--glow-line-strong);color:var(--ink);font-size:11px;pointer-events:none;transform-style:preserve-3d;box-shadow:0 0 24px var(--glow-dim),0 20px 40px rgba(0,0,0,0.6)}
.screen::before{content:"";position:absolute;inset:5px;border:1px solid var(--glow-dim);pointer-events:none}
.screen-inner{padding:14px 16px;height:100%;display:flex;flex-direction:column}
.screen .hd{display:flex;justify-content:space-between;align-items:center;padding-bottom:7px;border-bottom:1px solid var(--glow-line);margin-bottom:8px}
.screen .hd .t{font-family:var(--font-mono);font-size:9px;letter-spacing:0.24em;text-transform:uppercase;color:var(--glow)}
.screen .title{font-family:var(--font-display);font-style:var(--display-style);font-size:24px;line-height:1;color:var(--ink);margin-bottom:6px}
.screen .title em{color:var(--glow)}
.screen .sub{font-size:10.5px;color:var(--mute);line-height:1.4}
.screen .list{margin-top:auto;display:flex;flex-direction:column;gap:3px;padding-top:8px;border-top:1px dashed var(--glow-line)}
.screen .list .r{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:9.5px;color:var(--mute)}
.screen .list .r b{color:var(--ink);font-weight:500}
.screen .corner{position:absolute;width:10px;height:10px;border:1px solid var(--glow);box-shadow:0 0 4px var(--glow-soft)}
.screen .corner.tl{top:-1px;left:-1px;border-right:none;border-bottom:none}
.screen .corner.tr{top:-1px;right:-1px;border-left:none;border-bottom:none}
.screen .corner.bl{bottom:-1px;left:-1px;border-right:none;border-top:none}
.screen .corner.br{bottom:-1px;right:-1px;border-left:none;border-top:none}

/* ═══ bottom HUD + compass ═══ */
.hud{position:fixed;bottom:60px;left:50%;transform:translateX(-50%);z-index:25;display:flex;gap:14px;align-items:center;padding:10px 16px;background:rgba(11,11,12,0.72);border:1px solid var(--glow-line);backdrop-filter:blur(14px);font-family:var(--font-mono);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--mute)}
.hud .rot{color:var(--glow)}
.hud .dv{width:1px;height:14px;background:var(--line-2)}
.hud button{background:transparent;border:1px solid var(--glow-line);color:var(--glow);width:28px;height:28px;cursor:pointer;font-size:14px;display:grid;place-items:center}
.hud button:hover{background:var(--glow-dim);border-color:var(--glow)}

/* ── HUD come chatbox (Orbit) ── */
.hud-chat{
  gap:10px;
  padding:0;
  width:min(640px, calc(100vw - 260px));
  text-transform:none;
  letter-spacing:0;
  /* Niente outline esterna: lo stile è solo sulla pillola interna .hud-chatbox.
     Le frecce ‹/› vivono "scollate" come pulsanti satellite. */
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
.hud-chat .hud-arrow{
  flex:0 0 auto;
  width:34px;height:34px;
  background:transparent;
  border:1px solid var(--glow-line);
  color:var(--glow);
  cursor:pointer;
  font-size:18px;
  line-height:1;
  display:grid;place-items:center;
  border-radius:8px;
  transition:background .15s, border-color .15s;
}
.hud-chat .hud-arrow:hover{background:var(--glow-dim);border-color:var(--glow)}
.hud-chatbox{
  flex:1 1 auto;
  display:flex;
  align-items:flex-end;
  gap:8px;
  background:rgba(0,0,0,0.35);
  border:1px solid var(--glow-line);
  border-radius:20px;
  padding:4px 10px 4px 14px;
  transition:border-color .15s, box-shadow .15s;
}
.hud-chatbox:focus-within{
  border-color:var(--glow);
  box-shadow:0 0 0 2px var(--glow-dim);
}
.hud-textarea{
  flex:1;
  border:none;
  outline:none;
  background:transparent;
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:13px;
  letter-spacing:0;
  text-transform:none;
  resize:none;
  line-height:1.4;
  max-height:120px;
  min-height:20px;
  padding:7px 2px;
}
.hud-textarea::placeholder{color:var(--mute);opacity:.7}
.hud-mic{
  width:32px;height:32px;
  border-radius:50%;
  background:transparent;
  border:1px solid var(--glow-line);
  color:var(--glow);
  cursor:pointer;
  display:grid;place-items:center;
  flex:0 0 auto;
  transition:background .15s, border-color .15s, color .15s, transform .12s;
}
.hud-mic:hover{
  background:var(--glow-dim);
  border-color:var(--glow);
  color:var(--ink);
}
.hud-mic.recording{
  background:#c14b4b;
  border-color:#c14b4b;
  color:#fff;
  animation:hud-mic-pulse 1.4s ease-in-out infinite;
}
@keyframes hud-mic-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(193,75,75,0.5)}
  50%    {box-shadow:0 0 0 6px rgba(193,75,75,0)}
}
.hud-send{
  width:32px;height:32px;
  border-radius:50%;
  background:var(--glow);
  color:#0d0d0e;
  border:none;
  cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  flex-shrink:0;
  transition:background .15s, opacity .15s, transform .12s;
}
.hud-send:hover{background:#e8c77a;transform:scale(1.05)}
.hud-send:disabled{opacity:.4;cursor:not-allowed}

/* Stato "sending" (orbSending=true): blocco invio + icona orologio/spinner.
   Manteniamo opacity piena (non come :disabled normale) perché l'icona è
   informativa e deve restare leggibile. Il cursore comunica "non cliccabile". */
.hud-send.sending{opacity:1;cursor:default}
.hud-send.sending:hover{background:var(--glow);transform:none}

/* Spinner rotante: appare DOPO che l'orologio si è riempito (5s di cooldown
   finito) ma il done dall'iframe non è ancora arrivato → AI sta ancora
   rispondendo. transform-origin centrato sul viewBox 22×22. */
.hud-spinner-arc{
  transform-origin:11px 11px;
  animation:hud-spin .9s linear infinite;
}
@keyframes hud-spin{ to { transform:rotate(360deg) } }

.compass{position:fixed;bottom:22px;right:30px;width:92px;height:92px;z-index:25}
.compass svg{width:100%;height:100%}
.compass .mark{position:absolute;font-family:var(--font-mono);font-size:8.5px;color:var(--mute)}
.compass .mark.n{top:2px;left:50%;transform:translateX(-50%)}
.compass .mark.e{right:2px;top:50%;transform:translateY(-50%)}
.compass .mark.s{bottom:2px;left:50%;transform:translateX(-50%)}
.compass .mark.w{left:2px;top:50%;transform:translateY(-50%)}
.compass .mark.active{color:var(--glow)}
.compass .pointer-wrap{position:absolute;inset:0;transition:transform .3s ease-out}
.compass .pointer{position:absolute;top:50%;left:50%;width:2px;height:40px;background:linear-gradient(180deg, var(--glow), transparent);transform-origin:top center;transform:translate(-50%,0);box-shadow:0 0 6px var(--glow)}

/* ═══ PANEL OVERLAY ═══ */
.panel{position:fixed;inset:0;z-index:50;display:none}
.panel.open{display:block}
.panel-bg{position:absolute;inset:0;background:rgba(6,6,7,0.75);backdrop-filter:blur(18px);opacity:0;transition:opacity .35s}
.panel.open .panel-bg{opacity:1}
.panel-box{position:absolute;top:50%;left:50%;width:min(880px,90vw);max-height:84vh;background:rgba(17,17,18,0.97);border:1px solid var(--glow-line-strong);box-shadow:0 40px 100px rgba(0,0,0,0.7),0 0 60px var(--glow-dim);overflow:hidden;opacity:0;transform:translate(-50%,-50%) scale(0.94);transition:all .4s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column}
.panel.open .panel-box{opacity:1;transform:translate(-50%,-50%) scale(1)}
.panel-head{padding:20px 24px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;background:linear-gradient(180deg, var(--glow-dim) 0%, transparent 100%)}
.panel-head .ic{width:38px;height:38px;border:1px solid var(--glow-line-strong);display:grid;place-items:center;color:var(--glow);background:var(--glow-dim);border-radius:50%}
.panel-head .ic svg{width:18px;height:18px}
.panel-head h2{font-family:var(--font-display);font-style:var(--display-style);font-size:30px;color:var(--ink)}
.panel-head h2 em{color:var(--glow)}
.panel-head .sub{font-family:var(--font-mono);font-size:10px;color:var(--mute);letter-spacing:0.18em;text-transform:uppercase;margin-top:3px}
.panel-head .close{margin-left:auto;background:none;border:1px solid var(--glow-line-strong);color:var(--glow);width:32px;height:32px;cursor:pointer;font-size:14px;border-radius:50%;display:grid;place-items:center;transition:background .15s, border-color .15s}
.panel-head .close:hover{background:var(--glow-dim);border-color:var(--glow)}
.panel-body{padding:20px 24px;overflow-y:auto;min-height:300px}

/* responsive: nasconde pannelli laterali sotto 1024px */
@media (max-width: 1023px){
  .left-panel,.right-panel{display:none}
}

/* iframe embed dentro il pannello */
.panel-body { padding: 0 !important; position: relative; }

/* Wrap = contenitore dell'iframe + loading pulse. L'iframe parte nascosto
   (opacity 0) per non mostrare il flash legacy di simple.html durante il
   caricamento. Viene rivelato quando simple.html invia 'orb:embed-ready'
   via postMessage (CSS applicato, niente UI legacy visibile). Il pulse
   discreto copre il gap. */
.orb-panel-wrap {
  position: relative;
  width: 100%;
  height: 70vh;
  min-height: 420px;
  max-height: calc(84vh - 88px);
}
.orb-panel-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  display: block;
  opacity: 0;
  transition: opacity .35s ease;
}
.orb-panel-iframe.ready { opacity: 1; }

.orb-panel-loading {
  position: absolute;
  inset: 0;
  display: none;
  pointer-events: none;
}

/* avatar foto Google (img dentro .av circle) */
.av .avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* bottone sessione cliccabile nella left-panel */
.orb-session-btn {
  display: block;
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line);
  color: var(--mute);
  padding: 8px 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: color .15s, background .15s;
}
.orb-session-btn:hover { color: var(--glow); background: var(--glow-dim); }

/* link alla versione semplice nella topbar */
.orb-switch-link {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--glow);
  text-decoration: none;
  padding: 3px 8px;
  border: 1px solid var(--glow-line);
  transition: background .15s, color .15s;
}
.orb-switch-link:hover { background: var(--glow-dim); color: var(--glow-2); }

/* ═══════════════════════════════════════════════════════════
   TOPBAR — selettore lingua + popup account
   ═══════════════════════════════════════════════════════════ */
.orb-lang { position: relative; }
.orb-lang-btn {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
  width: 28px; height: 28px;
  display: grid; place-items: center;
  cursor: pointer;
  padding: 0;
  transition: border-color .15s, background .15s;
}
.orb-lang-btn:hover { border-color: var(--glow); background: var(--glow-dim); }
.orb-lang-btn .fi { width: 16px; height: 12px; display: block; }
.orb-lang-popup {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  background: rgba(11,11,12,0.92);
  border: 1px solid var(--glow-line);
  backdrop-filter: blur(14px);
  z-index: 40;
}
.orb-lang-popup.hidden { display: none; }
.orb-lang-popup button {
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink);
  padding: 6px 10px;
  cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  transition: background .15s, border-color .15s;
}
.orb-lang-popup button:hover { background: var(--glow-dim); border-color: var(--glow-line); }
.orb-lang-popup button .fi { width: 18px; height: 14px; }

/* popup account */
.orb-account { position: relative; }
.orb-account > .av { cursor: pointer; transition: box-shadow .15s; }
.orb-account > .av:hover { box-shadow: 0 0 16px var(--glow-soft); }
.orb-account-popup {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 240px;
  padding: 12px;
  background: rgba(11,11,12,0.94);
  border: 1px solid var(--glow-line-strong);
  backdrop-filter: blur(16px);
  z-index: 40;
  box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}
.orb-account-popup.hidden { display: none; }
.orb-account-header {
  display: flex;
  gap: 10px;
  align-items: center;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.orb-account-av {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--glow);
  color: var(--bg-2);
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-style: var(--display-style);
  font-size: 18px;
  box-shadow: 0 0 12px var(--glow-soft);
  flex-shrink: 0;
  overflow: hidden;
}
.orb-account-av .avatar-img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block;
}
.orb-account-info { min-width: 0; overflow: hidden; }
.orb-account-name { font-size: 13px; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.orb-account-email { font-family: var(--font-mono); font-size: 10px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.orb-account-btn {
  width: 100%;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 8px 10px;
  margin-top: 4px;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-sans);
  font-size: 12.5px;
  transition: background .15s, border-color .15s, color .15s;
}
.orb-account-btn:hover { background: var(--glow-dim); border-color: var(--glow); color: var(--glow); }
.orb-account-btn--danger:hover { color: #ff9090; border-color: #ff9090; background: rgba(255,120,120,0.08); }

/* ═══════════════════════════════════════════════════════════
   AUTH OVERLAY — schermata login per utenti non autenticati
   ═══════════════════════════════════════════════════════════ */
.orb-auth-overlay {
  position: fixed; inset: 0;
  z-index: 60;
  display: grid; place-items: center;
  background: rgba(6,6,7,0.85);
  backdrop-filter: blur(20px);
}
.orb-auth-overlay.hidden { display: none; }
.orb-auth-box {
  min-width: 320px;
  max-width: 440px;
  padding: 36px 40px;
  text-align: center;
  background: rgba(17,17,18,0.96);
  border: 1px solid var(--glow-line-strong);
  box-shadow: 0 40px 100px rgba(0,0,0,0.7), 0 0 60px var(--glow-dim);
  position: relative;
}
.orb-auth-box::before,
.orb-auth-box::after {
  content: ""; position: absolute; width: 14px; height: 14px; opacity: 0.8;
}
.orb-auth-box::before { top: -1px; left: -1px; border-top: 1px solid var(--glow); border-left: 1px solid var(--glow); }
.orb-auth-box::after { bottom: -1px; right: -1px; border-bottom: 1px solid var(--glow); border-right: 1px solid var(--glow); }
.orb-auth-logo {
  width: 44px; height: 44px; color: var(--glow);
  margin: 0 auto 18px;
}
.orb-auth-box h2 {
  font-family: var(--font-display);
  font-style: var(--display-style);
  font-size: 30px;
  line-height: 1;
  color: var(--ink);
  margin-bottom: 10px;
}
.orb-auth-box h2 em { color: var(--glow); }
.orb-auth-box p {
  font-size: 13px;
  color: var(--mute);
  margin-bottom: 24px;
  line-height: 1.5;
}
.orb-auth-google {
  width: 100%;
  padding: 12px 18px;
  background: var(--glow);
  color: var(--bg-2);
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  transition: box-shadow .15s, transform .1s;
}
.orb-auth-google:hover { box-shadow: 0 0 24px var(--glow-soft); }
.orb-auth-google:active { transform: scale(0.98); }
.orb-auth-google svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════
   PERFORMANCE — rimuove backdrop-filter da elementi sempre
   visibili (GPU killer #1) e semplifica ombre sfera/wireframe.
   Mantiene backdrop-filter solo su overlay on-demand (pannello,
   popup tema/lingua/account, auth overlay).
   ═══════════════════════════════════════════════════════════ */
.topbar,
.ticker,
.card,
.user-card,
.hud {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(11,11,12,0.88) !important;
}
.sphere-core { box-shadow: inset 0 0 80px var(--glow-dim), 0 0 60px var(--glow-dim) !important; }
.wireframe svg { filter: none !important; }

/* Performance panel: backdrop-filter fullscreen + shadow grossi = GPU stall
   quando pannello aperto. Sostituisco con opacity pura + shadow ridotta. */
.panel-bg {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(6,6,7,0.93) !important;
}
.panel-box {
  box-shadow: 0 30px 60px rgba(0,0,0,0.5) !important;
  transition: opacity .35s, transform .35s !important;
  will-change: opacity, transform;
}
.orb-panel-iframe { will-change: auto; }

/* ═══════════════════════════════════════════════════════════
   GLASS PASS — angoli stondati + tono "vetro molato". Override
   in coda: facile da ritoccare o revertire. NESSUN backdrop-filter
   nuovo (la sezione performance sopra li ha rimossi di proposito).
   L'effetto vetro qui viene da:
    - gradient doppio (highlight sopra + ombra sotto)
    - inner highlight 1px in cima = "rim light"
    - bordi stondati uniformi
    - rimozione delle "corner decorations" cyberpunk
   Se dopo sembra poco vetrato, riattivo blur SOLO sui 4 mini-schermi
   (con disable on-drag per non collassare la GPU in rotazione).
   ═══════════════════════════════════════════════════════════ */

/* Mini-schermi — sfera (ottaedro ha override suo più in alto) */
.screen{
  border-radius:14px;
  overflow:hidden;
  background:linear-gradient(160deg,
    rgba(30,30,32,0.82) 0%,
    rgba(16,16,18,0.76) 55%,
    rgba(10,10,11,0.82) 100%);
  box-shadow:
    0 0 24px var(--glow-dim),
    0 20px 40px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.07);
}
.screen::before{inset:6px;border-radius:9px;opacity:0.4}
.screen .corner{display:none}

/* Ottaedro: rim light tematizzato sul --glow */
body[data-shape="octa"] .screen{
  border-radius:14px;
  box-shadow:
    0 0 28px var(--glow-dim),
    0 20px 40px rgba(0,0,0,0.6),
    inset 0 1px 0 color-mix(in srgb, var(--glow) 24%, transparent);
}

/* Sidebar cards + user card */
.card,.user-card{
  border-radius:16px;
  background:linear-gradient(180deg,
    rgba(18,18,20,0.9) 0%,
    rgba(11,11,12,0.92) 100%) !important;
  box-shadow:
    0 20px 40px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.05) !important;
}
.card::before,.card::after{display:none}

/* Pannello overlay grande */
.panel-box{
  border-radius:18px;
  box-shadow:
    0 30px 60px rgba(0,0,0,0.55),
    0 0 60px var(--glow-dim),
    inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

/* Auth overlay box */
.orb-auth-box{
  border-radius:18px;
  background:linear-gradient(180deg,
    rgba(20,20,22,0.96),
    rgba(13,13,14,0.97));
  box-shadow:
    0 40px 100px rgba(0,0,0,0.7),
    0 0 60px var(--glow-dim),
    inset 0 1px 0 rgba(255,255,255,0.07);
}
.orb-auth-box::before,.orb-auth-box::after{display:none}

/* HUD + bar orizzontali */
.hud,.shape-bar{
  border-radius:12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.05);
}
.shape-bar button,.hud button,
.orb-lang-btn,
.orb-switch-link,.holmes-expand,.holmes-send{
  border-radius:8px;
}

/* Popup lingua / account */
.orb-lang-popup,.orb-account-popup{
  border-radius:12px;
  box-shadow:
    0 20px 40px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.05);
}
.orb-account-btn{border-radius:10px}

/* Auth google button */
.orb-auth-google{border-radius:10px}

/* Input Holmes card */
.holmes-prompt{border-radius:8px}

/* Topbar + ticker: piatte (bordo pieno schermo), niente radius,
   ma tocco di inner highlight per coerenza */
.topbar,.ticker{
  box-shadow:inset 0 -1px 0 rgba(255,255,255,0.03);
}

/* Sessione btn in left-panel: pill morbida */
.orb-session-btn{border-radius:6px;padding:8px 10px}

/* ═══════════════════════════════════════════════════════════
   LIFE PASS — transizioni morbide su cambi tema/forma, popup,
   entrata in pagina, feedback click. Tutto opt-in e compositor-
   friendly (opacity/transform). Nessun backdrop-filter nuovo.
   ═══════════════════════════════════════════════════════════ */

/* Cambio tema: durante la classe .theme-transitioning (aggiunta
   dal JS per ~450ms al click sul theme-btn) abilita transition su
   tutte le proprietà colorate. Fuori da questa classe valgono le
   transizioni locali (.15s hover) — niente sluggish feel. */
body.theme-transitioning,
body.theme-transitioning *,
body.theme-transitioning *::before,
body.theme-transitioning *::after{
  transition:background-color .4s ease,
             border-color .4s ease,
             color .4s ease,
             box-shadow .4s ease,
             fill .4s ease,
             stroke .4s ease !important;
}

/* Crossfade fra sfera e ottaedro: il JS setta opacity 0→1 attorno
   al cambio di data-shape. 0.25s per lato, totale ~0.5s percepiti. */
.sphere{transition:opacity .25s ease}

/* Popup: fade-in ogni volta che diventano visibili.
   Il .hidden/.open toggle resta come prima — l'animazione parte
   al rimontaggio visuale del box. */
.orb-lang-popup:not(.hidden),
.orb-account-popup:not(.hidden){
  animation:orb-fade-down .2s ease;
}
@keyframes orb-fade-down{
  from{opacity:0;transform:translateY(-4px)}
  to{opacity:1;transform:translateY(0)}
}

/* Entrata in pagina: stagger leggero. `both` = applica il primo keyframe
   PRIMA dell'avvio (niente flash di elementi a opacity 1) E mantiene
   l'ultimo keyframe DOPO la fine. Importante: con solo `backwards`, in
   alcuni contesti (iframe in background, tab non focalizzata, browser
   che mette in pausa requestAnimationFrame) le animazioni non partono
   mai e l'intera UI resta a opacity 0. `both` mette al sicuro lo stato
   finale anche se l'animazione viene saltata. */
@keyframes orb-enter-fade{from{opacity:0}to{opacity:1}}
@keyframes orb-enter-drop{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}
@keyframes orb-enter-right{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:translateX(0)}}
@keyframes orb-enter-left{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:translateX(0)}}
@keyframes orb-enter-scale{from{opacity:0;transform:scale(0.96)}to{opacity:1;transform:scale(1)}}

/* Animazioni di entrata: usano `both` per mantenere lo stato finale.
   IMPORTANTE: ogni selettore ha anche `opacity: 1` esplicito come default,
   così se l'animazione non parte (iframe in background con rAF sospeso,
   prefers-reduced-motion, browser legacy) l'UI resta visibile invece di
   schermo nero. L'animazione fa solo il polish opzionale. */
.topbar      { opacity:1; animation:orb-enter-drop  .45s ease .05s forwards }
.ticker      { opacity:1; animation:orb-enter-fade  .4s  ease .2s  forwards }
.left-panel  { opacity:1; animation:orb-enter-right .5s  ease .25s forwards }
.right-panel { opacity:1; animation:orb-enter-left  .5s  ease .3s  forwards }
.stage       { opacity:1; animation:orb-enter-scale .7s  cubic-bezier(.2,.8,.2,1) .1s forwards }
.shape-bar,.hud,.compass{
  opacity:1;
  animation:orb-enter-fade .5s ease .35s forwards;
}

/* Rispetta prefers-reduced-motion: niente animazioni di entrata. */
@media (prefers-reduced-motion: reduce){
  .topbar,.ticker,.left-panel,.right-panel,.stage,
  .shape-bar,.hud,.compass{ animation:none }
}

/* Feedback click uniforme su tutti i bottoni Orbit chrome.
   Durata breve (0.08s) così non interferisce con hover. */
.shape-bar button:active,
.hud button:active,
.flat-nav button:active,
.orb-lang-btn:active,
.orb-switch-link:active,
.holmes-expand:active,
.holmes-send:active,
.orb-lang-popup button:active,
.orb-account-btn:active,
.orb-session-btn:active,
.panel-head .close:active{
  transform:scale(0.94);
  transition-duration:.08s;
}

/* Hover: soft lift su card/user-card per sensazione "tattile". */
.card,.user-card{
  transition:transform .25s ease, box-shadow .25s ease,
             background-color .35s ease, border-color .35s ease !important;
}
.card:hover,.user-card:hover{
  transform:translateY(-1px);
  box-shadow:0 24px 48px rgba(0,0,0,0.5),
             inset 0 1px 0 rgba(255,255,255,0.07) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SPLIT MODE — quando l'utente invia dalla chatbox HUD, la stage si
   rimpicciolisce e si sposta a sinistra; il pannello Holmes occupa la metà
   destra del viewport. Tutto via CSS transitions.
   Attivato da body.split-mode (set in index.html → send()), rimosso da
   'orb:close'. Compatibile col vecchio overlay: se body NON ha split-mode,
   il pannello resta in modalità overlay centrato come prima.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Transitions per la transizione split-mode. Applicate solo ai contenitori
   che cambiano stato (NON sulla .stage globale: la sfera ruota di continuo
   e una transition su transform causerebbe layout thrash). */
.shape-bar,
.hud-chat,
.compass,
.left-panel,
.right-panel,
.topbar,
.ticker {
  transition:
    transform .55s cubic-bezier(.2,.8,.2,1),
    opacity   .35s ease,
    width     .55s cubic-bezier(.2,.8,.2,1),
    left      .55s cubic-bezier(.2,.8,.2,1),
    right     .55s cubic-bezier(.2,.8,.2,1),
    top       .55s cubic-bezier(.2,.8,.2,1),
    bottom    .55s cubic-bezier(.2,.8,.2,1);
}
/* Stage: transition pulita solo per opacity in stato base.
   Per la transform di split-mode usiamo la Web Animations API in JS
   (vedi orb-integration.js — animateStageSplit) perché le CSS transition
   in iframe sospesi/inattivi possono restare bloccate a currentTime:0. */
.stage{
  transition: opacity .35s ease;
}

/* Stage in split-mode: lo stato finale è applicato dalla WAAPI (animateStageSplit
   in index.html) con fill:forwards. Il transform qui sotto è un fallback CSS-only
   per browser che non supportano WAAPI o se la animation viene cancellata —
   serve solo come safety net, non come primary source of truth.
   NIENTE !important: WAAPI deve vincere durante la sua durata, altrimenti
   l'animazione di entrata scatta direttamente al frame finale. */
body.split-mode .stage{
  transform: translate(calc(166px - 50vw), 28%) scale(0.42);
  transform-origin: 50% 50%;
  animation: none !important;
}

/* I pannelli laterali (Conversazioni / Buongiorno) RESTANO visibili in
   split-mode — l'utente preferisce mantenere la dashboard accessibile.
   Il ticker (top status bar) si nasconde perché copre l'header del pannello. */
body.split-mode .ticker{
  opacity: 0;
  pointer-events: none;
}

/* Shape-bar (toggle SFERA/OTTAEDRO): in split-mode si sposta vicino alla
   sfera ridotta in basso a sinistra, così resta cliccabile per cambiare
   forma anche mentre la chat è aperta. Compatibile con la transition base. */
body.split-mode .shape-bar{
  top: auto !important;
  bottom: 36px !important;
  left: 100px !important;
  transform: none !important;
}

/* La chatbox HUD resta dov'era ma piccola in fondo (l'utente continua a usarla
   per nuovi messaggi se vuole, o usa la textarea dentro al pannello). */
body.split-mode .hud-chat{
  /* invariata: bottom 60px, left 50% */
}

/* La compass si nasconde (la sfera è troppo piccola, non serve più). */
body.split-mode .compass{
  opacity: 0;
  pointer-events: none;
}

/* PANEL: in split-mode diventa il focus centrale, simile a una "modale chat"
   senza backdrop, in modo che la sfera in basso a sinistra resti visibile. */
body.split-mode .panel{
  /* il contenitore .panel resta full-screen ma non blocca i click sulla stage */
  pointer-events: none;
}
body.split-mode .panel-bg{
  display: none !important;
}
/* Stato iniziale del panel-box appena apre in split-mode: leggermente più
   in basso e trasparente. Il transition lo porta alla posizione finale. */
body.split-mode .panel-box{
  pointer-events: auto;
  top: 110px !important;
  left: 50% !important;
  right: auto !important;
  bottom: 130px !important;
  /* Stato iniziale: opacity 0 + leggero offset verso il basso. .panel.open
     lo riporta a opacity 1 e nessun offset (vedi regola sotto). */
  opacity: 0;
  transform: translateX(-50%) translateY(24px) !important;
  width: min(720px, 64vw) !important;
  /* Forza l'altezza calcolata: top+bottom ancorati non bastano con flex,
     usiamo calc esplicito sul viewport. */
  height: calc(100vh - 240px) !important;
  max-height: none !important;
  /* Si fonde con lo sfondo: nessun box, nessun bordo, nessuna ombra. */
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  transition:
    top    .55s cubic-bezier(.2,.8,.2,1),
    bottom .55s cubic-bezier(.2,.8,.2,1),
    left   .55s cubic-bezier(.2,.8,.2,1),
    right  .55s cubic-bezier(.2,.8,.2,1),
    width  .55s cubic-bezier(.2,.8,.2,1),
    height .55s cubic-bezier(.2,.8,.2,1),
    opacity .55s ease,
    transform .55s cubic-bezier(.2,.8,.2,1) !important;
}
body.split-mode .panel.open .panel-box{
  opacity: 1 !important;
  transform: translateX(-50%) translateY(0) !important;
}

/* Anche l'header del pannello (riga con icona + titolo + close) si fonde:
   niente bordo inferiore, niente background gradient. */
body.split-mode .panel-head{
  background: transparent !important;
  border-bottom: none !important;
}

/* Iframe wrap: prende tutta l'altezza disponibile del panel in split-mode.
   Override sui limiti del panel-wrap di base (70vh / max 84vh-88px). */
body.split-mode .orb-panel-wrap{
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  flex: 1 1 auto !important;
}
/* In split-mode bypassiamo il fade-in dell'iframe (.ready trigger): la
   transizione orchestrata dal panel-box copre già il fade. Mantenere il
   fade-in sull'iframe lo lascia visibile a opacity:0 indefinitamente in
   alcune condizioni (animazione transition stallata su t=0). */
body.split-mode .orb-panel-iframe{
  opacity: 1 !important;
  transition: none !important;
}
/* Panel-body in split-mode: flexbox per far crescere l'iframe wrap. */
body.split-mode .panel-body{
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

/* Reduced-motion: niente transizioni, solo cambio istantaneo. */
@media (prefers-reduced-motion: reduce){
  .stage,.shape-bar,.hud,.compass,.left-panel,.right-panel,.topbar,.ticker{
    transition: none;
  }
  body.split-mode .panel-box{ animation: none; }
}

/* Mobile/tablet: sotto i 900px lo split non ha senso → fallback overlay. */
@media (max-width: 900px){
  body.split-mode .stage{ transform: none !important; }
  body.split-mode .panel-box{
    inset: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
    border-radius: 0;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE LAYOUT (≤768px) — Orbit con opt-in ?orbit=1.
   Tutto il sacrificabile (ticker, compass, lang, clock, "SIMPLE" link,
   prompt sulla card Holmes) viene nascosto. La sfera + 4 screens orbitanti
   restano ma scalate al 55% per stare dentro al viewport mobile.
   La HUD chatbox in basso è il punto d'invio principale. La logica JS
   (orb.js, RADIUS=234, openPanel, rotateTo, drag) NON cambia: usiamo
   transform:scale sul `.sphere` così screens e sfera scalano insieme
   mantenendo le proporzioni 3D.
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px){
  /* Topbar essenziale: solo logo + avatar account. Nascondo lang/clock/SIMPLE
     per lasciare spazio. L'avatar resta cliccabile per logout/memoria/account. */
  .topbar{ padding: 10px 14px; }
  .top-right .orb-lang,
  .top-right .dot,
  .top-right #clock-time,
  .top-right .orb-switch-link{ display: none; }

  /* Ticker decorativo → via */
  .ticker{ display: none; }

  /* Shape switcher: più compatto, posizionato sotto la topbar (no ticker) */
  .shape-bar{ top: 60px; padding: 3px; gap: 0; }
  .shape-bar button{ font-size: 9px; padding: 5px 10px; letter-spacing: 0.14em; }

  /* Sfera + screens scalate insieme: scale 0.55 ≈ 286px effettivi.
     transform-origin center così resta perfettamente al centro stage. */
  .stage{ perspective: 1200px; }
  .sphere{
    transform: scale(0.55);
    transform-origin: 50% 50%;
  }
  /* Lo stato split-mode su mobile non scala (regola @900px sopra fa transform:none),
     ma noi vogliamo comunque la sfera piccola anche in split. Override mirato. */
  body.split-mode .sphere{ transform: scale(0.55); }

  /* Card Holmes: il prompt-wrap è ridondante su mobile (la HUD chatbox in
     basso fa lo stesso lavoro ed è sempre visibile). Mostro solo header. */
  .screen.holmes-card .holmes-prompt-wrap{ display: none; }

  /* Compass via: le 2 frecce HUD coprono già la navigazione. */
  .compass{ display: none; }

  /* HUD chatbox: full-width centrata in basso, sopra la home bar iPhone.
     Le frecce restano a sx e dx della box. */
  .hud-chat{
    bottom: calc(12px + env(safe-area-inset-bottom));
    left: 12px;
    right: 12px;
    transform: none;
    width: auto;
    max-width: none;
    gap: 8px;
    padding: 8px 10px;
  }
  .hud-chat .hud-arrow{ flex-shrink: 0; }
  .hud-chatbox{ flex: 1; min-width: 0; }
  /* Textarea HUD: 16px per disabilitare l'auto-zoom iOS (stesso fix di simple) */
  .hud-textarea{ font-size: 16px; }
}