:root{--notte:#0E1220;--notte2:#171C30;--linea:#2A3150;--testo:#F2F4FF;--tenue:#A6AECD;--viola:#7B5CFF;--ciano:#3FD0E0;--verde:#5EE0A0;--rosso:#FF7A8A;color-scheme:dark}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--notte);color:var(--testo);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;overflow:hidden}
[hidden]{display:none!important}
#sfondo{position:fixed;inset:0;background:radial-gradient(ellipse at 50% 30%,#2B2466 0%,transparent 60%),radial-gradient(ellipse at 80% 90%,#0E4B59 0%,transparent 55%),var(--notte);z-index:0}
.schermo{position:fixed;inset:0;z-index:1;display:flex;flex-direction:column;padding:env(safe-area-inset-top) max(14px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(14px,env(safe-area-inset-left))}
.btn{border:0;border-radius:14px;background:linear-gradient(120deg,var(--viola),#9B6CFF);color:#fff;font:inherit;font-weight:700;font-size:16px;padding:13px 18px;cursor:pointer}
.btn.grande{width:100%;padding:16px;font-size:17px}
.btn.secondario{background:var(--notte2);border:1px solid var(--linea);width:100%;margin-top:10px}
.btn.pericolo{background:transparent;border:1px solid var(--rosso);color:var(--rosso);width:100%;margin-top:10px}
input[type=text],input[type=password]{flex:1;min-width:0;background:var(--notte2);border:1px solid var(--linea);border-radius:14px;color:var(--testo);font:inherit;font-size:16px;padding:13px 14px;outline:none}
input:focus{border-color:var(--viola)}
.riga{display:flex;gap:8px;margin-top:10px}
.esito{min-height:1.4em;font-size:14px;color:var(--tenue);margin:10px 0 0}
.esito.ok{color:var(--verde)}.esito.err{color:var(--rosso)}
.tenue{color:var(--tenue)}.piccolo{font-size:12px;text-align:center;margin-top:18px}
/* primo avvio */
#setup{overflow-y:auto;gap:16px;padding-top:calc(env(safe-area-inset-top) + 18px)}
.setup-testa{display:flex;align-items:flex-end;gap:12px}
.setup-vera{height:190px;width:auto;filter:drop-shadow(0 10px 20px #0008);animation:respiro 4.6s ease-in-out infinite;transform-origin:50% 100%}
.setup-testa h1{margin:0 0 6px;font-size:26px}
.setup-testa p{margin:0;color:var(--tenue);line-height:1.45}
.controlli{list-style:none;margin:0;padding:0;border:1px solid var(--linea);border-radius:16px;background:#171C30CC}
.controlli li{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-bottom:1px solid var(--linea);font-size:15px;line-height:1.35}
.controlli li:last-child{border-bottom:0}
.controlli i{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:13px;font-weight:800;background:var(--linea);color:var(--tenue)}
.controlli li.ok i{background:#1E4D3A;color:var(--verde)}
.controlli li.no i{background:#4D1E28;color:var(--rosso)}
.controlli li.va i{border:2px solid var(--ciano);border-top-color:transparent;background:none;animation:gira 1s linear infinite}
.controlli small{display:block;color:var(--tenue);font-size:13px}
.passo{border:1px solid var(--linea);border-radius:18px;background:#171C30E6;padding:16px}
.passo h2{margin:0 0 8px;font-size:19px}
.passo p{margin:0 0 14px;color:var(--tenue);line-height:1.5}
.manuale{margin-top:12px;color:var(--tenue);font-size:14px}
/* VERA */
.testa{display:flex;align-items:center;justify-content:space-between;padding:10px 2px}
.titolo{display:flex;align-items:center;gap:8px}
.titolo b{font-size:18px;letter-spacing:.06em}
.titolo small{color:var(--tenue);font-size:13px}
.punto{width:9px;height:9px;border-radius:50%;background:#9AA4C6}
body.ascolta .punto{background:var(--verde);animation:brilla .7s ease-in-out infinite}
body.parla .punto{background:var(--viola)}
body.pensa .punto{background:var(--ciano);animation:brilla 1s ease-in-out infinite}
.icona{border:0;background:var(--notte2);color:var(--testo);width:42px;height:42px;border-radius:50%;display:grid;place-items:center}
.scena{flex:1;position:relative;min-height:0;display:flex;flex-direction:column}
#vera{position:absolute;left:50%;bottom:0;transform:translateX(-50%);height:min(68%,560px);pointer-events:none;z-index:0}
#vera img{height:100%;width:auto;display:block;filter:drop-shadow(0 12px 24px #000a);animation:respiro 4.6s ease-in-out infinite;transform-origin:50% 100%}
#vera .aura{position:absolute;left:5%;right:5%;top:0;height:45%;border-radius:50%;background:radial-gradient(closest-side,#3FD0E055,transparent);opacity:0;transition:opacity .4s}
body.ascolta #vera .aura{opacity:1;animation:brilla 1.2s ease-in-out infinite}
body.parla #vera img{animation:respiro 4.6s ease-in-out infinite,parla .38s ease-in-out infinite alternate}
#vera[data-emo=felice] img,#vera[data-emo=ride] img{filter:drop-shadow(0 12px 24px #000a) brightness(1.06)}
.chat{position:relative;z-index:1;flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:6px 0 12px;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 24px)}
.msg{max-width:84%;padding:10px 13px;border-radius:16px;font-size:15.5px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}
.msg.lei{align-self:flex-start;background:#171C30F0;border:1px solid var(--linea);border-bottom-left-radius:5px}
.msg.io{align-self:flex-end;background:var(--viola);border-bottom-right-radius:5px}
.msg.info{align-self:center;background:transparent;color:var(--tenue);font-size:13px;padding:2px 8px}
.msg.lei .codice{white-space:normal;margin:8px 0;border-radius:12px;overflow:hidden;border:1px solid var(--linea);background:#05040C}
.codice-top{display:flex;justify-content:space-between;align-items:center;padding:6px 8px 6px 12px;background:rgba(255,255,255,.06);font-size:12px;font-weight:600;color:var(--tenue)}
.codice-top button{background:#1E2540;border:1px solid var(--linea);color:#EEF1FA;border-radius:8px;padding:5px 10px;font:600 12px inherit}
.codice pre{margin:0;padding:12px;overflow-x:auto;font:12.5px/1.5 ui-monospace,Consolas,monospace;color:#E0E7FF;white-space:pre}
.msg.lei{max-width:94%}
.msg .azione{display:inline-block;margin-top:8px;color:var(--ciano);font-weight:700;text-decoration:none}
.chat .vuoto{flex:1}
.piede{display:flex;gap:10px;align-items:center;padding:10px 0 12px}
.scrivi{flex:1;display:flex;gap:6px;background:var(--notte2);border:1px solid var(--linea);border-radius:20px;padding:4px}
.scrivi input{border:0;background:transparent}
.invia{border:0;background:transparent;color:var(--tenue);width:42px;display:grid;place-items:center}
.mic{flex:none;width:64px;height:64px;border-radius:50%;border:0;color:#fff;background:linear-gradient(135deg,var(--viola),var(--ciano));display:grid;place-items:center;box-shadow:0 8px 24px -6px #7B5CFFaa}
body.ascolta .mic{background:linear-gradient(135deg,#1FA971,var(--verde));animation:pulsa 1.2s ease-in-out infinite}
/* impostazioni */
.foglio{position:fixed;inset:0;z-index:5;background:#05070EB3;display:flex;align-items:flex-end}
.foglio-dentro{width:100%;max-height:92%;overflow-y:auto;background:var(--notte);border-top:1px solid var(--linea);border-radius:22px 22px 0 0;padding:18px max(16px,env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
.foglio h2{margin:0 0 12px}.foglio h3{margin:18px 0 6px;font-size:15px;color:var(--tenue)}
.voce{display:flex;gap:10px;align-items:center;padding:10px 0;font-size:15.5px}
.voce input{width:20px;height:20px;accent-color:var(--viola)}
.campo{display:flex;flex-direction:column;gap:6px;margin-top:6px}.campo span{color:var(--tenue);font-size:14px}
.lista{list-style:none;margin:0;padding:0}
.lista li{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:9px 0;border-bottom:1px solid var(--linea);font-size:14.5px}
.lista li span{min-width:0;overflow-wrap:anywhere}
.lista button{flex:none;border:0;background:none;color:var(--rosso);font:inherit;font-size:13px}
.foglio .btn:last-of-type{width:100%;margin-top:14px}
@keyframes respiro{0%,100%{transform:scale(1)}50%{transform:scale(1.012,1.006)}}
@keyframes parla{from{transform:translateY(0)}to{transform:translateY(-2px) scale(1.004)}}
@keyframes brilla{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes gira{to{transform:rotate(360deg)}}
@keyframes pulsa{0%,100%{box-shadow:0 0 0 0 #5EE0A088}50%{box-shadow:0 0 0 14px #5EE0A000}}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}
.prova{margin-top:8px;padding:8px 12px;border-radius:12px;background:#7B5CFF26;border:1px solid #7B5CFF66;font-size:13.5px;text-align:center;line-height:1.4}.prova a{color:#fff;font-weight:700}
.scrivi{min-width:0}.scrivi input{width:100%}.mic{width:58px;height:58px}
@media (min-width:700px){#setup.schermo{left:50%;right:auto;width:480px;transform:translateX(-50%)}}
@media (min-width:900px){
#app.schermo{padding-left:5vw;padding-right:5vw}
#app .testa,#app .prova,#app .scena,#app .piede{width:min(500px,44vw);margin-left:auto}
#vera{position:fixed;left:30%;bottom:0;height:94vh;transform:translateX(-50%)}
#vera .aura{top:2%}
.chat{-webkit-mask-image:none}
}
@media (max-width:899px){#vera{height:min(78%,640px)}}
#vera video{position:absolute;left:50%;bottom:0;height:100%;width:auto;transform:translateX(-50%);visibility:hidden;filter:drop-shadow(0 12px 24px #000a)}