/* HYSAD - Assistente del sito (solo index). Stile discreto, coerente coi token
   di style.css. Caricato a fine body: il widget parte chiuso, niente FOUC. */

.hyChat{position:fixed;right:18px;bottom:18px;z-index:90;font-family:inherit}

/* Bottone di apertura: pill piccola, vetro scuro; dentro, H ogni tanto
   si muove (micro-gesti pilotati dal JS con le classi hyBtnFx-*) */
.hyChatBtn{display:inline-flex;align-items:center;gap:9px;padding:9px 17px 9px 12px;border-radius:999px;border:1px solid var(--line);background:rgba(6,17,16,.88);color:var(--text);font:800 13.5px/1 inherit;letter-spacing:.02em;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.35);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:border-color .25s,box-shadow .25s,transform .25s}
.hyChatBtn:hover{border-color:rgba(148,255,209,.5);box-shadow:0 14px 36px rgba(0,0,0,.4),0 0 22px rgba(148,255,209,.08);transform:translateY(-1px)}
.hyChatBtn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.hyChat.isOpen .hyChatBtn{opacity:0;pointer-events:none}

/* Il bottone "abitato": micro-gesti casuali di H dentro la pill, come se
   là dentro ci fosse qualcosa di vivo. Una classe alla volta (hyBtnFx-*),
   applicata e tolta dal JS a intervalli irregolari; gesto breve, poi quiete */
.hyChatBtn .hyMascot{transform-origin:50% 82%}
.hyChat.hyBtnFx-wiggle .hyChatBtn .hyMascot{animation:hyBtnWiggle .9s ease-in-out both}
@keyframes hyBtnWiggle{0%,100%{transform:rotate(0)}22%{transform:rotate(-8deg)}48%{transform:rotate(6.5deg)}74%{transform:rotate(-3deg)}}
.hyChat.hyBtnFx-hop .hyChatBtn .hyMascot{animation:hyBtnHop .75s cubic-bezier(.3,1.5,.45,1) both}
@keyframes hyBtnHop{0%,100%{transform:translateY(0) scale(1,1)}30%{transform:translateY(-3.5px) scale(1.05,.95)}60%{transform:translateY(.5px) scale(.97,1.04)}80%{transform:translateY(0) scale(1.01,.99)}}
.hyChat.hyBtnFx-look .hyChatBtn .hyMascotEyes{animation:hyBtnLook 1.7s ease-in-out both}
@keyframes hyBtnLook{0%,100%{transform:translate(0,0)}18%,38%{transform:translate(-1.5px,0)}56%,76%{transform:translate(1.6px,0)}90%{transform:translate(0,0)}}
.hyChat.hyBtnFx-happy .hyChatBtn .hyMascotEyes{animation:hyBtnEyesOff 1.5s ease-in-out both}
.hyChat.hyBtnFx-happy .hyChatBtn .hyEyesHappy{animation:hyBtnEyesOn 1.5s ease-in-out both}
@keyframes hyBtnEyesOff{0%,14%{opacity:1}22%,78%{opacity:0}88%,100%{opacity:1}}
@keyframes hyBtnEyesOn{0%,14%{opacity:0}22%,78%{opacity:1}88%,100%{opacity:0}}
.hyChat.hyBtnFx-pulse .hyChatBtn{animation:hyBtnPulse 1.3s ease-in-out both}
@keyframes hyBtnPulse{0%,100%{border-color:var(--line);box-shadow:0 10px 30px rgba(0,0,0,.35)}45%{border-color:rgba(148,255,209,.55);box-shadow:0 12px 34px rgba(0,0,0,.42),0 0 24px rgba(148,255,209,.22)}}

/* H: il glifo del wordmark con gli occhi. Ombra morbida per staccarlo
   dal fondo; sul palco respira piano (con un filo di rollio), a riposo
   sbatte le ciglia */
.hyMascot{display:block;flex:none;filter:drop-shadow(0 3px 9px rgba(0,0,0,.4))}
.hyChatBtn .hyMascot{width:26px;height:26px}
.hyChatStage .hyMascot{width:76px;height:76px;animation:hyIdle 4.6s ease-in-out infinite}
/* Entrata sul palco SOLO all'apertura (classe temporanea isEntering dal JS,
   non isOpen: altrimenti riparte a ogni fine risposta): discesa con squash
   & stretch leggero e doppio assestamento, poi respiro; la faccia si accende
   con flicker mentre una riga di boot scorre lungo lo schermo */
.hyChat.isEntering .hyChatStage .hyMascot{animation:hyEnter .8s cubic-bezier(.25,.8,.3,1) both,hyIdle 4.6s ease-in-out .8s infinite}
@keyframes hyEnter{0%{transform:translateY(-26px) scale(.88);opacity:0}55%{transform:translateY(3px) scale(1.05,.93);opacity:1}74%{transform:translateY(-2.5px) scale(.98,1.02)}88%{transform:translateY(1px) scale(1.01,.99)}100%{transform:translateY(0) scale(1)}}
.hyFace{transform-box:fill-box;transform-origin:center}
.hyChat.isEntering .hyChatStage .hyFace{animation:hyBootFace .6s ease-out .35s both}
@keyframes hyBootFace{0%{opacity:0}55%{opacity:.7}70%{opacity:.45}100%{opacity:1}}
.hyBootLine{transform-box:fill-box}
.hyChat.isEntering .hyChatStage .hyBootLine{animation:hyBootScan .55s ease-out .35s both}
@keyframes hyBootScan{0%{opacity:.9;transform:translateY(0)}100%{opacity:0;transform:translateY(9.2px)}}
/* riflesso che attraversa il vetro ogni tanto (solo sul palco: negli avatar
   piccoli sarebbe rumore e costo inutile) */
.hyGlassSheen{opacity:0;transform-box:fill-box}
.hyChatStage .hyMascot .hyGlassSheen{animation:hySheenSweep 7.5s ease-in-out 2.4s infinite}
@keyframes hySheenSweep{0%,86%{opacity:0;transform:translateX(-16px)}90%{opacity:.7}100%{opacity:0;transform:translateX(28px)}}
.hyMascotEyes{transform-box:fill-box;transform-origin:center;animation:hyBlink 5.4s ease-in-out 2s infinite}
/* sul palco gli occhi sono piu' vivi: sbattono, si guardano intorno e ogni
   tanto lasciano il posto agli occhi "happy" ad arco del reference */
.hyChatStage .hyMascotEyes{animation:hyEyesIdle 9s ease-in-out infinite}
.hyEyesHappy{opacity:0}
.hyChatStage .hyEyesHappy{animation:hyHappyIdle 9s ease-in-out infinite}
/* occhiolino: ogni tanto, solo l'occhio destro, solo sul palco */
.hyEyeL,.hyEyeR{transform-box:fill-box;transform-origin:center}
.hyChatStage .hyEyeR{animation:hyWink 13s ease-in-out 5.2s infinite}
@keyframes hyWink{0%,95.5%,98.5%,100%{transform:scaleY(1)}97%{transform:scaleY(.12)}}
/* guance: spente di default, si accendono nello stato felice */
.hyBlush{opacity:0;transition:opacity .35s}
@keyframes hyBlink{0%,90%,100%{transform:scaleY(1)}94%{transform:scaleY(.12)}}
@keyframes hyIdle{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-2.4px) rotate(.4deg)}}
@keyframes hyEyesIdle{0%,6%{opacity:1;transform:translate(0,0) scaleY(1)}8%{transform:translate(0,0) scaleY(.1)}10%{transform:translate(0,0) scaleY(1)}26%{transform:translate(0,0) scaleY(1)}31%{transform:translate(-1.4px,0) scaleY(1)}41%{transform:translate(-1.4px,0) scaleY(1)}46%{transform:translate(1.5px,0) scaleY(1)}55%{transform:translate(1.5px,0) scaleY(1)}60%{opacity:1;transform:translate(0,0) scaleY(1)}63%,75%{opacity:0;transform:translate(0,0) scaleY(1)}78%{opacity:1}88%{transform:translate(0,0) scaleY(1)}91%{transform:translate(0,0) scaleY(.1)}94%,100%{opacity:1;transform:translate(0,0) scaleY(1)}}
@keyframes hyHappyIdle{0%,61%{opacity:0}65%,73%{opacity:1}77%,100%{opacity:0}}

/* Faccina: occhi e sorriso cyan #7AE0D1 con un lieve bagliore (ovunque compare H) */
.hyMascotEyes rect,.hyEyesHappy path,.hyMouth,.hyMouthTalk{filter:drop-shadow(0 0 1px rgba(122,224,209,.45))}
/* bocca "talking" del reference: nascosta a riposo, appare mentre H risponde */
.hyMouthTalk{opacity:0}
/* sul palco la faccia pulsa di luce, come uno schermo acceso */
.hyChatStage .hyMascotEyes rect,.hyChatStage .hyEyesHappy path,.hyChatStage .hyMouth{animation:hyEyeGlow 3.4s ease-in-out infinite}
@keyframes hyEyeGlow{0%,100%{filter:drop-shadow(0 0 .8px rgba(122,224,209,.35))}50%{filter:drop-shadow(0 0 2px rgba(122,224,209,.7))}}

/* H accanto a ogni sua risposta */
.hyBotRow{display:flex;align-items:flex-end;gap:8px;max-width:100%}
.hyBotRow .hyMascot{width:24px;height:24px;margin-bottom:3px}
.hyBotRow .hyMsg{max-width:calc(86% - 32px)}
.hyChips{margin-left:32px}

/* Mentre H risponde (.isThinking): sul palco "parla" (dondolio con
   rotazione), l'aura pulsa, l'anello tecnico gira, gli occhi cercano in
   alto (pensano) e ogni tanto sbattono; l'avatar nella bolla typing fa
   il bob */
.hyChat.isThinking .hyChatStage .hyMascot{animation:hyTalk .9s ease-in-out infinite}
.hyChat.isThinking .hyChatStage:before{opacity:1;animation:hyAura 1.8s ease-in-out infinite}
.hyChat.isThinking .hyTypingRow .hyMascot{animation:hyBob 1.05s ease-in-out infinite}
.hyChat.isThinking .hyMascotEyes{animation:hyLook 1.9s ease-in-out infinite}
.hyChat.isThinking .hyEyesHappy{animation:none;opacity:0}
.hyChat.isThinking .hyChatStage .hyMascotEyes rect,.hyChat.isThinking .hyChatStage .hyMouthTalk{animation:hyEyeGlowStrong 1.3s ease-in-out infinite}
@keyframes hyEyeGlowStrong{0%,100%{filter:drop-shadow(0 0 1.4px rgba(122,224,209,.55))}50%{filter:drop-shadow(0 0 3px rgba(150,255,236,.85))}}
/* espressione "talking" sul palco: sorriso via, al suo posto un piccolo
   equalizer a tre barre che segue la "voce" (delay a cascata) */
.hyMouthTalk rect{transform-box:fill-box;transform-origin:50% 100%}
.hyChat.isThinking .hyChatStage .hyMouth{opacity:0}
.hyChat.isThinking .hyChatStage .hyMouthTalk{opacity:1}
.hyChat.isThinking .hyChatStage .hyMouthTalk rect{animation:hyEq .48s ease-in-out infinite alternate}
.hyChat.isThinking .hyChatStage .hyMouthTalk rect:nth-child(2){animation-delay:.13s}
.hyChat.isThinking .hyChatStage .hyMouthTalk rect:nth-child(3){animation-delay:.26s}
@keyframes hyEq{from{transform:scaleY(.3)}to{transform:scaleY(1.05)}}
@keyframes hyTalk{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-1.6px) rotate(-1.2deg)}50%{transform:translateY(-.4px) rotate(.3deg)}75%{transform:translateY(-1.6px) rotate(1.2deg)}}
@keyframes hyAura{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes hyBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.6px)}}
@keyframes hyLook{0%,100%{transform:translate(0,0) scaleY(1)}18%{transform:translate(-1.5px,-.7px) scaleY(.92)}40%{transform:translate(-1.5px,-.7px) scaleY(.92)}55%{transform:translate(1.6px,-.5px) scaleY(.92)}72%{transform:translate(1.6px,-.5px) scaleY(.92)}80%{transform:translate(0,0) scaleY(.15)}86%,100%{transform:translate(0,0) scaleY(1)}}

/* Reazioni: perk quando l'utente invia (saltello + occhi che si allargano),
   gioia su ringraziamenti e inoltro al form (occhi ad arco + guance +
   doppio hop). Regole DOPO quelle di isThinking: durante la
   sovrapposizione delle classi vincono loro. */
.hyChat.isReacting .hyChatStage .hyMascot{animation:hyPerk .55s cubic-bezier(.3,1.5,.4,1) both}
@keyframes hyPerk{0%{transform:translateY(0) scale(1)}35%{transform:translateY(-4px) scale(1.05) rotate(-1.5deg)}70%{transform:translateY(.5px) scale(.99)}100%{transform:translateY(0) scale(1)}}
.hyChat.isReacting .hyChatStage .hyMascotEyes{animation:hyEyesWide .55s ease-out both}
@keyframes hyEyesWide{0%{transform:scaleY(1)}40%{transform:scale(1.12,1.25)}100%{transform:scale(1,1)}}
.hyChat.isHappy .hyChatStage .hyMascot{animation:hyJoy .95s cubic-bezier(.3,1.4,.4,1) both}
@keyframes hyJoy{0%{transform:translateY(0)}22%{transform:translateY(-5px) rotate(-2deg) scale(1.04,.97)}45%{transform:translateY(0) scale(.98,1.02)}62%{transform:translateY(-2.5px) rotate(1.4deg)}80%,100%{transform:translateY(0)}}
.hyChat.isHappy .hyChatStage .hyMascotEyes{animation:none;opacity:0}
.hyChat.isHappy .hyChatStage .hyEyesHappy{animation:none;opacity:1}
.hyChat.isHappy .hyChatStage .hyBlush{opacity:.4}

/* Pannello */
.hyChatPanel{position:absolute;right:0;bottom:0;width:min(370px,calc(100vw - 28px));max-height:min(660px,calc(100svh - 96px));display:flex;flex-direction:column;border-radius:22px;border:1px solid var(--line);background:rgba(6,17,16,.94);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 30px 80px rgba(0,0,0,.5);overflow:hidden;opacity:0;translate:0 14px;visibility:hidden;transition:opacity .3s cubic-bezier(.2,.8,.2,1),translate .3s cubic-bezier(.2,.8,.2,1),visibility 0s .3s}
.hyChat.isOpen .hyChatPanel{opacity:1;translate:0 0;visibility:visible;transition-delay:0s}
/* A pannello chiuso visibility:hidden NON ferma le animazioni CSS (palco,
   particelle, aura, occhi...): le mettiamo in pausa per non consumare
   CPU/batteria per tutta la vita della pagina. Il bottone flottante resta
   fuori dal pannello e continua i suoi micro-gesti. */
.hyChat:not(.isOpen) .hyChatPanel *{animation-play-state:paused!important}

/* Il palcoscenico di H: lui al centro, aura discreta dietro, stato sotto */
.hyChatStage{position:relative;display:flex;flex-direction:column;align-items:center;padding:18px 16px 16px;border-bottom:1px solid var(--line);background:radial-gradient(circle at 50% 40%,rgba(148,255,209,.12),transparent 62%)}
.hyChatStage:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 40%,rgba(148,255,209,.2),transparent 58%);opacity:0;transition:opacity .4s;pointer-events:none;z-index:0}
/* Sfondo "informatico" del palco: griglia di punti tenue dietro H, con un
   pulviscolo di particelle che sale piano (le <i> dentro hyStageFx) */
.hyStageFx{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;background:radial-gradient(rgba(148,255,209,.09) .8px,transparent .8px);background-size:14px 14px}
.hyStageFx i{position:absolute;bottom:6px;width:3px;height:3px;border-radius:50%;background:rgba(148,255,209,.55);opacity:0;animation:hyFloat 8s linear infinite}
.hyStageFx i:nth-child(1){left:20%}
.hyStageFx i:nth-child(2){left:37%;width:2px;height:2px;animation-duration:10.5s;animation-delay:2.6s}
.hyStageFx i:nth-child(3){left:63%;animation-delay:1.3s}
.hyStageFx i:nth-child(4){left:79%;width:2px;height:2px;animation-duration:11.5s;animation-delay:4.2s}
@keyframes hyFloat{0%{transform:translateY(0);opacity:0}12%{opacity:.7}70%{opacity:.25}100%{transform:translateY(-86px);opacity:0}}
/* pedana olografica sotto H: respira in controfase col suo bob (stessa
   durata di hyIdle: quando lui sale, lei si stringe e si attenua) */
.hyStagePad{position:absolute;left:50%;bottom:9px;width:96px;height:18px;margin-left:-48px;border-radius:50%;background:radial-gradient(ellipse at center,rgba(148,255,209,.3),rgba(148,255,209,.09) 55%,transparent 72%);pointer-events:none;z-index:0;animation:hyPadPulse 4.6s ease-in-out infinite}
@keyframes hyPadPulse{0%,100%{opacity:.9;transform:scaleX(1)}50%{opacity:.55;transform:scaleX(.9)}}
/* anello tecnico dietro H: invisibile a riposo, compare e ruota mentre pensa */
.hyStageRing{position:absolute;left:50%;top:56px;width:92px;height:92px;margin:-46px 0 0 -46px;border:1px dashed rgba(148,255,209,.4);border-radius:50%;opacity:0;pointer-events:none;z-index:0;transition:opacity .35s}
.hyStageRing:after{content:"";position:absolute;inset:7px;border:1px dotted rgba(148,255,209,.28);border-radius:50%}
.hyChat.isThinking .hyStageRing{opacity:.55;animation:hySpin 8s linear infinite}
@keyframes hySpin{to{transform:rotate(360deg)}}
.hyChatStage .hyMascot{position:relative;z-index:1}
.hyChatClose{position:absolute;top:10px;right:10px;width:30px;height:30px;border-radius:10px;border:1px solid transparent;background:transparent;color:var(--muted);font-size:15px;line-height:1;cursor:pointer;transition:color .2s,border-color .2s}
.hyChatClose:hover{color:var(--text);border-color:var(--line)}
.hyChatClose:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Messaggi */
.hyChatLog{flex:1;overflow-y:auto;padding:16px 15px;display:flex;flex-direction:column;gap:10px;scrollbar-width:thin;scrollbar-color:rgba(148,255,209,.25) transparent}
.hyMsg{max-width:86%;padding:10px 13px;border-radius:16px;font-size:13.5px;line-height:1.55;white-space:pre-line;overflow-wrap:break-word}
.hyMsg.bot{align-self:flex-start;background:rgba(255,255,255,.05);border:1px solid rgba(184,255,236,.12);border-bottom-left-radius:6px;color:var(--text)}
.hyMsg.user{align-self:flex-end;background:rgba(148,255,209,.1);border:1px solid rgba(148,255,209,.22);border-bottom-right-radius:6px;color:#dffff2}
/* Risposte leggibili: righe come blocchi, elenchi puntati compatti */
.hyMsg .hyLine{display:block}
.hyMsg .hyLine + .hyLine{margin-top:6px}
.hyMsg .hyList{list-style:none;margin:8px 0 2px;padding:0;display:flex;flex-direction:column;gap:6px}
.hyMsg .hyLine + .hyList{margin-top:8px}
.hyMsg .hyList + .hyLine{margin-top:8px}
.hyMsg .hyList li{position:relative;padding-left:16px;line-height:1.5}
.hyMsg .hyList li:before{content:"";position:absolute;left:1px;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--accent);opacity:.85}
.hyMsg a{color:var(--accent);font-weight:800;text-decoration:none}
.hyMsg a:hover{text-decoration:underline}

/* Indicatore "H sta scrivendo" */
.hyTyping{display:inline-flex;gap:5px;align-items:center;padding:13px 15px}
.hyTyping i{width:6px;height:6px;border-radius:50%;background:rgba(148,255,209,.7);animation:hyTypeDot 1.1s ease-in-out infinite}
.hyTyping i:nth-child(2){animation-delay:.18s}
.hyTyping i:nth-child(3){animation-delay:.36s}
@keyframes hyTypeDot{0%,100%{opacity:.3;translate:0 0}50%{opacity:1;translate:0 -3px}}

/* Chip di risposta rapida */
.hyChips{display:flex;flex-wrap:wrap;gap:7px;align-self:flex-start;max-width:96%}
.hyChip{padding:7px 13px;border-radius:999px;border:1px solid rgba(148,255,209,.28);background:transparent;color:#cfeee2;font:700 12px/1 inherit;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.hyChip:hover{background:rgba(148,255,209,.1);border-color:rgba(148,255,209,.5);color:var(--text)}
.hyChip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Input */
.hyChatForm{display:flex;gap:8px;padding:13px 15px;border-top:1px solid var(--line)}
.hyChatInput{flex:1;min-width:0;padding:10px 14px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--text);font:600 13.5px/1.3 inherit}
.hyChatInput::placeholder{color:rgba(168,194,189,.7)}
.hyChatInput:focus-visible{outline:2px solid rgba(148,255,209,.55);outline-offset:1px;border-color:transparent}
.hyChatSend{flex:none;width:40px;height:40px;border-radius:50%;border:1px solid rgba(148,255,209,.35);background:rgba(148,255,209,.12);color:var(--accent);cursor:pointer;display:grid;place-items:center;transition:background .2s,border-color .2s}
.hyChatSend:hover{background:rgba(148,255,209,.2);border-color:rgba(148,255,209,.6)}
.hyChatSend:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hyChatSend svg{width:16px;height:16px}

@media(max-width:480px){
  .hyChat{right:12px;bottom:12px}
  .hyChatPanel{max-height:min(600px,calc(100svh - 84px))}
}

@media(prefers-reduced-motion:reduce){
  .hyChatBtn,.hyChatPanel,.hyChip,.hyChatClose,.hyChatSend,.hyBlush{transition:none}
  .hyChatBtn,.hyMascot,.hyFace,.hyMascotEyes,.hyEyeL,.hyEyeR,.hyMascotEyes rect,.hyEyesHappy,.hyEyesHappy path,.hyMouth,.hyMouthTalk,.hyMouthTalk rect,.hyTyping i,.hyChatStage:before,.hyStagePad,.hyStageRing,.hyStageFx i,.hyGlassSheen,.hyBootLine{animation:none!important}
  .hyChatStage:before{opacity:0!important}
  .hyStageRing,.hyStageFx i,.hyGlassSheen,.hyBootLine{opacity:0!important}
}