/* ══ ASSISTENTE A-KUBE — il widget (24 set 2026) ══════════════════════
   Dal 12 ott 2026 il volto è quello di KAY (al posto del cubo 3D della
   demo), con l'anello nel viola di KAY #9196f9.
   Tutto dentro `.ak-*`: nessuna regola
   tocca il tema del sito, e il tema non tocca il widget (i valori sono
   fissati dove serve, il carattere si eredita se così è impostato).

   Le misure del telefono non si contrattano: aree toccabili ≥44px,
   campi ≥16px (sotto, iOS ingrandisce e la finestra scappa), pannello a
   tutto schermo sotto i 640px, niente scorrimento laterale.

   La posizione (destra/sinistra, distanza dal basso e dal lato) arriva
   dalle impostazioni del plugin come variabili CSS su :root. */
:root{
  --ak:#5b5bd6;--ak-chiaro:#8b8df5;--ak-scuro:#3d3fb8;
  --ak-lato:18px;--ak-basso:18px;--ak-font:inherit;--ak-z:999990;
  --ak-pannello:#070a14;--ak-testa:#0a0f1c;--ak-bolla:#121829;--ak-testo:#e8eef4;--ak-fumo:#9fb0c8;
  --ak-riga:rgba(255,255,255,.12);--ak-campo:#0e1424;--ak-bianco:#fff;--ak-vignetta:#0e1526;
}
.ak-chiaro{
  --ak-pannello:#ffffff;--ak-testa:#f6f7fb;--ak-bolla:#eef0f7;--ak-testo:#141821;--ak-fumo:#5f6b80;
  --ak-riga:rgba(20,24,33,.12);--ak-campo:#f3f4f9;--ak-bianco:#141821;--ak-vignetta:#ffffff;
}
[data-ak],[data-ak] *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[data-ak] button,[data-ak] input{font-family:var(--ak-font)}

/* ── il bottone: una pillola, e dentro il volto di KAY ── */
.ak-lancia{position:fixed;right:var(--ak-lato);left:auto;bottom:var(--ak-basso);z-index:var(--ak-z);display:flex;align-items:center;gap:12px;
  min-height:60px;min-width:60px;margin:0;padding:6px;border-radius:999px;border:1px solid rgba(255,255,255,.12);
  background:rgba(11,18,32,.94);color:#fff;cursor:pointer;font-family:var(--ak-font);line-height:1.2;text-transform:none;letter-spacing:0;
  box-shadow:0 14px 44px rgba(91,91,214,.45),0 0 0 1px rgba(91,91,214,.12);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:border-color .25s,transform .25s}
.ak-sinistra .ak-lancia{right:auto;left:var(--ak-lato)}
.ak-lancia:hover{border-color:rgba(139,141,245,.7);transform:translateY(-2px)}
.ak-lancia:focus-visible{outline:2px solid var(--ak-chiaro);outline-offset:3px}
.ak-scritta{display:none;text-align:left;padding-right:14px}
.ak-scritta b{display:block;font-weight:700;font-size:17px;line-height:1.1;letter-spacing:-.01em;color:#fff}
.ak-scritta span{display:block;margin-top:4px;font-size:12px;color:#9fb0c8}
/* ⚠️ LA SCRITTA SOLO DA 900px — misurato il 25 set 2026.
   Con la scritta la pillola è larga 248px. Fra 640 e 899px il banner dei
   cookie del sito non è ancora quello del telefono (che prende tutto il
   fondo) ma la scatola da 472px in basso a SINISTRA: a 768px la pillola
   arrivava a 502px e la scatola a 512px, cioè si toccavano. Sotto i 900px
   resta quindi il solo cerchio (62px), che a 768 parte da 688px. */
@media (min-width:900px){.ak-scritta{display:block}}

/* il volto di KAY: tondo, con l'anello nel suo viola (#9196f9, il
   dettaglio che porta sempre nei video) e un bagliore che respira piano */
.ak-volto{position:relative;width:48px;height:48px;flex:none;border-radius:50%;padding:2px;
  background:conic-gradient(from 210deg,#9196f9,var(--ak),#c7c9ff,#9196f9);
  box-shadow:0 0 0 1px rgba(145,150,249,.22),0 0 16px rgba(145,150,249,.32);animation:ak-respira 4.2s ease-in-out infinite}
.ak-volto.grande{width:52px;height:52px}
.ak-volto img{display:block;width:100%;height:100%;margin:0;border:0;border-radius:50%;object-fit:cover;background:#0b1220;box-shadow:none}
@keyframes ak-respira{0%,100%{box-shadow:0 0 0 1px rgba(145,150,249,.22),0 0 12px rgba(145,150,249,.24)}50%{box-shadow:0 0 0 1px rgba(145,150,249,.34),0 0 22px rgba(145,150,249,.46)}}
.ak-online{position:absolute;right:-1px;bottom:-1px;width:14px;height:14px}
.ak-online::before,.ak-online::after{content:"";position:absolute;inset:0;border-radius:50%;background:#34d399}
.ak-online::before{animation:ak-ping 1.8s cubic-bezier(0,0,.2,1) infinite;opacity:.6}
.ak-online::after{border:2px solid #0b1220}
@keyframes ak-ping{75%,100%{transform:scale(2.1);opacity:0}}
/* con una persona in linea il pallino diventa viola */
.ak-persona-online .ak-online::before,.ak-persona-online .ak-online::after{background:var(--ak-chiaro)}

/* ── la vignetta: «Ciao! Come possiamo aiutarti?» ── */
.ak-vignetta{position:fixed;right:var(--ak-lato);left:auto;bottom:calc(var(--ak-basso) + 74px);z-index:calc(var(--ak-z) - 1);
  width:min(290px,calc(100vw - 2 * var(--ak-lato)));display:none;align-items:flex-start;gap:10px;padding:14px 12px 14px 16px;border-radius:20px;
  background:var(--ak-vignetta);border:1px solid var(--ak-riga);color:var(--ak-testo);cursor:pointer;font-family:var(--ak-font);
  box-shadow:0 18px 50px rgba(0,0,0,.35),0 0 0 1px rgba(91,91,214,.14)}
.ak-sinistra .ak-vignetta{right:auto;left:var(--ak-lato)}
.ak-vignetta.su{display:flex;animation:ak-su .45s cubic-bezier(.22,.61,.36,1)}
.ak-vignetta::after{content:"";position:absolute;right:26px;bottom:-8px;width:14px;height:14px;transform:rotate(45deg);
  background:var(--ak-vignetta);border-right:1px solid var(--ak-riga);border-bottom:1px solid var(--ak-riga)}
.ak-sinistra .ak-vignetta::after{right:auto;left:26px}
.ak-vignetta p{flex:1;margin:0;font-size:15px;line-height:1.45}
.ak-vignetta p b{display:block;font-size:17px;line-height:1.25;color:var(--ak-bianco);margin-bottom:3px;font-weight:700}
.ak-vignetta p span{color:var(--ak-fumo)}
.ak-vx{flex:none;width:44px;height:44px;margin:-8px -4px -8px 0;border:0;border-radius:50%;background:none;color:var(--ak-fumo);
  display:grid;place-items:center;cursor:pointer;padding:0}
.ak-vx:hover{color:var(--ak-bianco);background:rgba(128,128,128,.12)}
body.ak-su .ak-vignetta{display:none}
/* ⚠️ NIENTE VIGNETTA SUL TABLET (640-899px) — misurato il 25 set 2026.
   La vignetta è larga 290px e si appoggia a destra: a 768px partiva da
   460px e copriva l'angolo in alto a destra della scatola dei cookie
   (larga 472px, a sinistra). Coprire il testo di un consenso non si fa,
   e la vignetta è un invito, non una funzione: sotto i 900px si toglie e
   resta il volto. Sul telefono (<640px) la scatola prende tutto il fondo,
   il visitatore la chiude e il problema non c'è. */
@media (min-width:640px) and (max-width:899px){.ak-vignetta,.ak-vignetta.su{display:none}}

/* ── il pannello ──
   Sopra a tutto (anche al selettore della lingua, che su a-kube.it sta a
   z-index 999999): sul telefono la finestra è a tutto schermo e un
   selettore che galleggiasse sopra la riga di scrittura la coprirebbe.
   Il bottone invece resta SOTTO al banner dei cookie: prima il consenso. */
.ak-pannello{position:fixed;z-index:2147483000;display:none;flex-direction:column;overflow:hidden;
  inset:0;background:var(--ak-pannello);color:var(--ak-testo);margin:0;
  font-family:var(--ak-font);font-size:16px;line-height:1.5;font-weight:400;text-align:left}
.ak-pannello.su{display:flex;animation:ak-apri .24s ease-out}
@keyframes ak-apri{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@media (min-width:640px){
  .ak-pannello{inset:auto;right:var(--ak-lato);left:auto;bottom:calc(var(--ak-basso) + 74px);width:420px;
    height:min(680px,calc(100vh - var(--ak-basso) - 100px));
    border-radius:28px;border:1px solid var(--ak-riga);
    box-shadow:0 30px 90px rgba(0,0,0,.45),0 0 0 1px rgba(91,91,214,.14)}
  .ak-sinistra .ak-pannello{right:auto;left:var(--ak-lato)}
}
.ak-testa{position:relative;flex:none;overflow:hidden;padding:max(14px,env(safe-area-inset-top)) 16px 0;
  border-bottom:1px solid var(--ak-riga);background:var(--ak-testa)}
.ak-testa::before{content:"";position:absolute;right:-70px;top:-100px;width:230px;height:230px;border-radius:50%;
  background:rgba(91,91,214,.22);filter:blur(48px);pointer-events:none}
.ak-riga{position:relative;display:flex;align-items:center;gap:12px}
.ak-chi{min-width:0;flex:1}
.ak-chi small{display:block;font-size:10.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--ak-chiaro);line-height:1.4}
.ak-chi b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:22px;line-height:1.15;font-weight:700;letter-spacing:-.01em;color:var(--ak-bianco)}
.ak-chi span{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--ak-fumo)}
.ak-chi span::before{content:"";width:7px;height:7px;border-radius:50%;background:#34d399;flex:none}
.ak-chi span.ak-op::before{background:var(--ak-chiaro)}
.ak-x{flex:none;width:44px;height:44px;padding:0;border-radius:50%;border:1px solid var(--ak-riga);
  background:rgba(128,128,128,.06);color:var(--ak-bianco);display:grid;place-items:center;cursor:pointer}
.ak-x:hover{border-color:rgba(139,141,245,.6)}
.ak-schede{position:relative;display:flex;gap:4px;margin-top:12px}
.ak-scheda{position:relative;flex:1;min-height:48px;border:0;border-radius:0;background:none;color:var(--ak-fumo);cursor:pointer;
  font-size:15px;font-weight:600;line-height:1;padding:0;margin:0;text-transform:none;letter-spacing:0}
.ak-scheda[aria-selected=true]{color:var(--ak-bianco)}
.ak-scheda::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:2px;border-radius:2px;background:transparent}
.ak-scheda[aria-selected=true]::after{background:var(--ak)}

.ak-corpo{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:18px 16px 12px;-webkit-overflow-scrolling:touch}
.ak-vista{display:none}.ak-vista.su{display:block}
.ak-msg{max-width:88%;margin:0 0 12px;padding:12px 15px;border-radius:18px;font-size:15.5px;line-height:1.55;
  white-space:pre-line;word-break:break-word;animation:ak-su .25s ease-out}
.ak-msg.bot{background:var(--ak-bolla);color:var(--ak-testo);border-top-left-radius:6px}
.ak-msg.io{margin-left:auto;background:var(--ak);color:#fff;border-top-right-radius:6px}
.ak-msg.op{background:#1f8a5b;color:#fff;border-top-left-radius:6px}
.ak-msg small{display:block;font-size:12px;opacity:.8;margin-bottom:2px;font-weight:600}
.ak-nota{text-align:center;font-size:13px;color:var(--ak-fumo);margin:0 0 12px;line-height:1.4}
@keyframes ak-su{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.ak-scrive{display:inline-flex;gap:5px;padding:14px 16px;border-radius:18px;background:var(--ak-bolla);margin-bottom:12px}
.ak-scrive i{width:7px;height:7px;border-radius:50%;background:var(--ak-chiaro);animation:ak-salta 1s infinite}
.ak-scrive i:nth-child(2){animation-delay:.15s}.ak-scrive i:nth-child(3){animation-delay:.3s}
@keyframes ak-salta{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-5px);opacity:1}}
.ak-chips{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 16px}
.ak-chip{min-height:44px;padding:9px 16px;border-radius:999px;border:1px solid var(--ak-riga);margin:0;
  background:transparent;color:var(--ak-testo);font-size:15px;font-weight:500;line-height:1.25;cursor:pointer;text-align:left;
  text-decoration:none;display:inline-flex;align-items:center;gap:8px;text-transform:none;letter-spacing:0;box-shadow:none}
.ak-chip:hover{border-color:var(--ak-chiaro);background:rgba(91,91,214,.1);color:var(--ak-testo)}
.ak-chip.pieno{background:var(--ak);border-color:var(--ak);color:#fff;font-weight:700}
.ak-chip.pieno:hover{background:var(--ak-chiaro);color:#fff}
.ak-chip.scelta{background:rgba(91,91,214,.18);border-color:var(--ak-chiaro)}

.ak-piede{flex:none;display:flex;gap:10px;margin:0;padding:12px 14px max(12px,env(safe-area-inset-bottom));
  border-top:1px solid var(--ak-riga);background:var(--ak-testa)}
.ak-piede input{flex:1;min-width:0;min-height:48px;padding:0 16px;margin:0;border-radius:14px;
  border:1px solid var(--ak-riga);background:var(--ak-campo);color:var(--ak-testo);font-size:16px;line-height:1.3;box-shadow:none}
.ak-piede input::placeholder{color:var(--ak-fumo)}
.ak-piede input:focus{outline:none;border-color:var(--ak-chiaro)}
.ak-invia{flex:none;width:52px;min-height:48px;padding:0;margin:0;border-radius:14px;border:0;background:var(--ak);color:#fff;
  display:grid;place-items:center;cursor:pointer}
.ak-invia:hover{background:var(--ak-chiaro)}
.ak-invia:disabled{opacity:.5;cursor:default}

/* ── il modulo «lasciami un recapito» e i passi della prenotazione ── */
.ak-scheda-box{border-radius:18px;border:1px solid rgba(91,91,214,.45);background:var(--ak-bolla);padding:14px 16px;margin:0 0 14px}
.ak-scheda-box p{margin:0 0 8px;font-size:15px;line-height:1.5;color:var(--ak-testo)}
.ak-scheda-box p.ak-t{font-weight:700;font-size:16px;color:var(--ak-bianco)}
.ak-campo{display:block;margin:0 0 12px}
.ak-campo span{display:block;font-size:14px;color:var(--ak-fumo);margin-bottom:6px}
.ak-campo input{width:100%;min-height:48px;padding:0 14px;margin:0;border-radius:14px;border:1px solid var(--ak-riga);
  background:var(--ak-campo);color:var(--ak-testo);font-size:16px;line-height:1.3;box-shadow:none}
.ak-campo input:focus{outline:none;border-color:var(--ak-chiaro)}
.ak-esca{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.ak-grosso{width:100%;min-height:52px;margin:4px 0 0;padding:0 16px;border-radius:16px;border:0;background:var(--ak);color:#fff;
  font-size:16px;font-weight:700;line-height:1.2;cursor:pointer;text-transform:none;letter-spacing:0}
.ak-grosso:hover{background:var(--ak-chiaro)}
.ak-grosso:disabled{opacity:.4;cursor:default}
.ak-piccola{font-size:13px;color:var(--ak-fumo);margin:10px 0 0;line-height:1.45}
.ak-passi{display:flex;gap:6px;margin-bottom:16px}
.ak-passi i{flex:1;height:4px;border-radius:4px;background:rgba(128,128,128,.25)}
.ak-passi i.fatto{background:var(--ak)}
.ak-dom{font-size:20px;line-height:1.25;font-weight:700;color:var(--ak-bianco);margin:0 0 4px}
.ak-sotto{color:var(--ak-fumo);font-size:15px;margin:0 0 14px;line-height:1.45}
.ak-opz{display:block;width:100%;text-align:left;min-height:56px;padding:10px 14px;margin:0 0 8px;border-radius:16px;border:1px solid var(--ak-riga);
  background:transparent;color:var(--ak-testo);cursor:pointer;font-size:15px;line-height:1.3;text-transform:none;letter-spacing:0;box-shadow:none}
.ak-opz b{display:block;font-weight:700;color:var(--ak-bianco)}
.ak-opz small{display:block;font-size:13.5px;color:var(--ak-fumo);margin-top:2px}
.ak-opz:hover,.ak-opz.scelta{border-color:var(--ak-chiaro);background:rgba(91,91,214,.12)}
.ak-griglia{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:14px}
.ak-griglia .ak-chip{justify-content:center;text-align:center;min-height:48px}
.ak-cal{border-radius:18px;border:1px solid var(--ak-riga);padding:10px;margin-bottom:14px}
.ak-cal-testa{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:6px}
.ak-cal-testa b{font-size:15px;color:var(--ak-bianco);text-transform:capitalize}
.ak-cal-testa button{width:44px;height:44px;padding:0;margin:0;border-radius:12px;border:1px solid var(--ak-riga);background:transparent;color:var(--ak-testo);font-size:20px;cursor:pointer}
.ak-cal-testa button:disabled{opacity:.3;cursor:default}
.ak-cal-g{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.ak-cal-g span{text-align:center;font-size:12px;color:var(--ak-fumo);padding:2px 0}
.ak-cal-g button{min-height:44px;padding:0;margin:0;border-radius:12px;border:1px solid transparent;background:transparent;color:var(--ak-testo);font-size:15px;cursor:pointer}
.ak-cal-g button:disabled{opacity:.28;cursor:default}
.ak-cal-g button:not(:disabled):hover,.ak-cal-g button.scelta{border-color:var(--ak-chiaro);background:rgba(91,91,214,.15)}
.ak-indietro{min-height:44px;padding:0 4px;margin:8px 8px 0 0;border:0;background:none;color:var(--ak-fumo);font-size:15px;font-weight:500;cursor:pointer;text-transform:none;letter-spacing:0;box-shadow:none}
.ak-indietro:hover{color:var(--ak-testo)}
.ak-fatto{text-align:center;padding:10px 4px}
.ak-fatto .ok{width:64px;height:64px;margin:6px auto 14px;border-radius:50%;display:grid;place-items:center;
  background:rgba(52,211,153,.14);border:1px solid rgba(52,211,153,.45);color:#34d399;font-size:30px}
.ak-riepilogo{text-align:left;margin:16px 0;padding:14px 16px;border-radius:16px;background:var(--ak-bolla);font-size:15.5px}
.ak-riepilogo div{display:flex;justify-content:space-between;gap:12px;padding:5px 0}
.ak-riepilogo div span{color:var(--ak-fumo)}
.ak-riepilogo div b{color:var(--ak-bianco);text-align:right;word-break:break-word}
@media (max-width:639px){
  .ak-chi small{display:none}
  .ak-chi span,.ak-campo span{font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  .ak-volto,.ak-online::before{animation:none}
}
@media print{.ak-lancia,.ak-vignetta,.ak-pannello{display:none!important}}
