/* Kesva — Assistente dell'area clienti (v5.134.1)
   Prefisso .asi-.

   Palette del marchio: navy come inchiostro, lime SOLO come accento e mai come
   testo (--dm-lime-ink e' il verde scuro che sopra il lime si legge). Ogni
   variabile --dm-* ha il suo ripiego: se frontend.css non arriva, il pannello
   resta leggibile.

   Le animazioni d'ingresso NON sono dichiarate qui sullo stato di partenza: gli
   elementi nascono visibili e la classe che li anima la mette il JS. Un keyframe
   con fill-mode backwards lascerebbe il riquadro invisibile dove la timeline non
   avanza — scheda in secondo piano, stampa, export PDF. E' la stessa regola della
   Panoramica. Tutto si spegne con prefers-reduced-motion. */

.asi{
    position:fixed;right:20px;bottom:20px;z-index:99990;
    font-family:Manrope,system-ui,-apple-system,"Segoe UI",sans-serif;
    --asi-navy:var(--dm-dark,#0f2244);
    --asi-navy-2:var(--dm-dark-2,#0a1730);
    --asi-lime:var(--dm-lime,#c3ec2e);
    --asi-lime-ink:var(--dm-lime-ink,#41541a);
    --asi-bordo:var(--dm-border,#dde4f2);
    --asi-testo:var(--dm-text,#3c4760);
    --asi-muto:var(--dm-text-muted,#66708a);
}
.asi.asi-alto{bottom:74px} /* sopra il pulsante "Personalizza" dell'amministratore */

/* ================================================================
   LANCIATORE
   ================================================================ */

.asi-fab{
    position:relative;display:inline-flex;align-items:center;gap:9px;
    padding:12px 20px 12px 16px;border:none;border-radius:30px;cursor:pointer;
    background:linear-gradient(135deg,#1b3a69 0%,var(--asi-navy) 45%,var(--asi-navy-2) 100%);
    color:#fff;font:700 13.5px/1 inherit;letter-spacing:.01em;
    box-shadow:0 10px 26px rgba(15,34,68,.34), inset 0 1px 0 rgba(255,255,255,.14);
    transition:transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease, filter .22s ease;
    overflow:hidden;isolation:isolate;
}
.asi-fab:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 16px 34px rgba(15,34,68,.4)}
.asi-fab:active{transform:translateY(-1px) scale(.99)}
.asi-fab:focus-visible{outline:3px solid var(--asi-lime);outline-offset:3px}

/* alone lime che respira: dice "sono qui" senza muovere il pulsante */
.asi-fab::before{
    content:"";position:absolute;inset:-3px;border-radius:34px;z-index:-1;
    background:radial-gradient(closest-side,rgba(195,236,46,.55),rgba(195,236,46,0));
    opacity:0;
}
.asi-pronto .asi-fab::before{animation:asi-respira 3.4s ease-in-out infinite 1.2s}

/* passaggio di luce al mouse */
.asi-fab::after{
    content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;
    background:linear-gradient(100deg,transparent,rgba(195,236,46,.28),transparent);
    transform:skewX(-18deg);pointer-events:none;
}
.asi-fab:hover::after{animation:asi-luce .75s ease-out}

.asi-fab .asi-ico{
    display:grid;place-items:center;width:26px;height:26px;flex-shrink:0;
    border-radius:50%;background:var(--asi-lime);color:var(--asi-navy);
}
.asi-pronto .asi-fab .asi-ico{animation:asi-dondola 4s ease-in-out infinite 2s}
.asi-fab:hover .asi-ico{animation:asi-scatta .5s cubic-bezier(.34,1.56,.64,1)}

/* pallino di stato: piccolo, lime, con un'onda che si allarga */
.asi-fab .asi-punto{
    position:absolute;top:9px;right:12px;width:7px;height:7px;border-radius:50%;
    background:var(--asi-lime);box-shadow:0 0 0 2px rgba(15,34,68,.9);
}
.asi-pronto .asi-fab .asi-punto::after{
    content:"";position:absolute;inset:0;border-radius:50%;background:var(--asi-lime);
    animation:asi-onda 2.6s ease-out infinite;
}

/* ingresso: la classe la mette il JS dopo il primo paint */
.asi-pronto .asi-fab{animation:asi-entra .58s cubic-bezier(.34,1.56,.64,1)}
.asi[data-asi-aperto] .asi-fab{display:none}

/* ================================================================
   PANNELLO
   ================================================================ */

.asi-pannello{
    width:372px;max-width:calc(100vw - 32px);
    height:560px;max-height:calc(100vh - 110px);
    display:flex;flex-direction:column;overflow:hidden;
    background:var(--dm-surface,#fff);
    border:1px solid var(--asi-bordo);border-radius:22px;
    box-shadow:0 28px 70px rgba(15,34,68,.3), 0 2px 8px rgba(15,34,68,.1);
    transform-origin:bottom right;
}
.asi-pannello[hidden]{display:none}
.asi-pannello.asi-apre{animation:asi-sboccia .42s cubic-bezier(.34,1.4,.64,1)}

/* --- testata --- */
.asi-hd{
    position:relative;display:flex;align-items:center;gap:11px;padding:14px 14px 15px;
    background:linear-gradient(135deg,#1b3a69 0%,var(--asi-navy) 55%,var(--asi-navy-2) 100%);
    color:#fff;
}
/* filo lime in fondo alla testata: il segno del marchio, in movimento lento */
.asi-hd::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
    background:linear-gradient(90deg,var(--asi-lime),#8db600,var(--asi-lime),#8db600);
    background-size:300% 100%;
}
.asi-pronto .asi-hd::after{animation:asi-filo 9s linear infinite}

.asi-av{
    display:grid;place-items:center;width:36px;height:36px;flex-shrink:0;border-radius:50%;
    background:var(--asi-lime);color:var(--asi-navy);
    box-shadow:0 3px 10px rgba(195,236,46,.4);
}
.asi-hd-txt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.asi-tit{font:800 14px/1.15 inherit;letter-spacing:.01em}
.asi-sub{display:inline-flex;align-items:center;gap:6px;font:500 11px/1.2 inherit;color:rgba(255,255,255,.72)}
.asi-sub i{width:6px;height:6px;border-radius:50%;background:var(--asi-lime);flex-shrink:0}
.asi-pronto .asi-sub i{animation:asi-pulsa 2.2s ease-in-out infinite}

.asi-x{
    background:rgba(255,255,255,.1);border:none;color:#fff;width:28px;height:28px;
    border-radius:50%;font-size:19px;line-height:1;cursor:pointer;flex-shrink:0;
    transition:background .18s,transform .18s;
}
.asi-x:hover{background:rgba(255,255,255,.22);transform:rotate(90deg)}

/* --- corpo --- */
.asi-corpo{
    flex:1;overflow-y:auto;padding:16px 14px 18px;display:flex;flex-direction:column;gap:11px;
    background:
        radial-gradient(circle at 1px 1px, rgba(15,34,68,.055) 1px, transparent 0) 0 0/16px 16px,
        var(--dm-surface-2,#faf9f5);
    scrollbar-width:thin;scrollbar-color:#cfd6e6 transparent;
}
.asi-corpo::-webkit-scrollbar{width:8px}
.asi-corpo::-webkit-scrollbar-thumb{background:#cfd6e6;border-radius:8px;border:2px solid transparent;background-clip:content-box}
.asi-corpo::-webkit-scrollbar-thumb:hover{background:#b6c0d6;background-clip:content-box}

.asi-msg{
    max-width:86%;padding:10px 14px;border-radius:16px;
    font:400 13.5px/1.55 inherit;white-space:pre-wrap;overflow-wrap:anywhere;
}
.asi-msg.asi-in{animation:asi-bolla .34s cubic-bezier(.34,1.5,.64,1)}

/* v5.134.1 — Il pre-wrap serve alle risposte del modello, che vanno a capo dove
   vuole lui. Sul saluto scritto nel sorgente PHP stampava anche l'indentazione del
   file: erano quei buchi in mezzo alle righe. */
.asi-intro{white-space:normal}
/* L'entrata del saluto e' legata all'APERTURA, non al caricamento: agganciata a
   .asi-pronto sarebbe gia' finita mentre il pannello e' ancora chiuso. */
.asi-pannello.asi-apre .asi-intro{animation:asi-bolla .5s cubic-bezier(.34,1.5,.64,1) .16s both}

/* v5.134.1 — La risposta merita piu' di un'entrata discreta: e' il momento per cui
   il cliente ha aperto il riquadro. Scatto piu' ampio e un lampo lime che sfuma. */
.asi-bot.asi-pop{animation:asi-scoppia .52s cubic-bezier(.34,1.62,.64,1)}

.asi-bot{
    align-self:flex-start;background:var(--dm-surface,#fff);color:var(--asi-testo);
    border:1px solid var(--asi-bordo);border-bottom-left-radius:5px;
    box-shadow:0 2px 10px rgba(15,34,68,.06);
}
.asi-io{
    align-self:flex-end;color:#fff;border-bottom-right-radius:5px;
    background:linear-gradient(135deg,#1b3a69,var(--asi-navy));
    box-shadow:0 4px 14px rgba(15,34,68,.24);
}
.asi-err{
    align-self:flex-start;background:#fff1f0;color:#96231f;border:1px solid #f3c9c7;
    border-bottom-left-radius:5px;
}

/* tre puntini lime: sta leggendo i dati */
.asi-attesa{
    align-self:flex-start;display:inline-flex;gap:5px;padding:13px 16px;border-radius:16px;
    border-bottom-left-radius:5px;background:var(--dm-surface,#fff);border:1px solid var(--asi-bordo);
    box-shadow:0 2px 10px rgba(15,34,68,.06);
}
.asi-attesa i{width:7px;height:7px;border-radius:50%;background:var(--asi-lime);
    box-shadow:0 0 0 1px rgba(65,84,26,.25) inset;animation:asi-salta 1.1s infinite ease-in-out}
.asi-attesa i:nth-child(2){animation-delay:.16s}
.asi-attesa i:nth-child(3){animation-delay:.32s}

/* --- barra di scrittura --- */
/* v5.134.1 — La barra era schiacciata contro l'ultima bolla e contro il piede.
   Piu' aria sopra e sotto, campo piu' alto, e un'ombra corta che la stacca dal
   corpo invece della linea secca. */
.asi-form{
    display:flex;align-items:center;gap:10px;padding:14px 14px 12px;
    border-top:1px solid var(--dm-border-light,#eef1f8);
    background:var(--dm-surface,#fff);
    box-shadow:0 -6px 16px rgba(15,34,68,.05);
}
.asi-form input{
    flex:1;min-width:0;height:46px;padding:0 18px;border:1.5px solid var(--asi-bordo);border-radius:23px;
    font:400 13.5px/1.3 inherit;color:var(--asi-testo);background:var(--dm-surface-2,#faf9f5);
    transition:border-color .2s,background .2s,box-shadow .2s;
}
.asi-form input::placeholder{color:var(--asi-muto)}
.asi-form input:focus{
    outline:none;background:#fff;border-color:var(--asi-lime);
    box-shadow:0 0 0 4px rgba(195,236,46,.28);
}
.asi-form button{
    flex-shrink:0;width:46px;height:46px;border:none;border-radius:50%;cursor:pointer;
    display:inline-flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,#1b3a69,var(--asi-navy));color:#fff;
    box-shadow:0 5px 16px rgba(15,34,68,.3);
    transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s,background .2s;
}
.asi-form button:hover:not(:disabled){
    transform:translateY(-2px) scale(1.06);background:linear-gradient(135deg,var(--asi-lime),#a8d422);
    color:var(--asi-lime-ink);box-shadow:0 8px 22px rgba(141,182,0,.42);
}
.asi-form button:active:not(:disabled){transform:translateY(0) scale(.96)}
.asi-form button:disabled{opacity:.4;cursor:default;box-shadow:none}
.asi-form button svg{transition:transform .2s}
.asi-form button:hover:not(:disabled) svg{transform:translateX(1px) rotate(-8deg)}

.asi-pie{
    margin:0;padding:2px 14px 14px;text-align:center;
    font:500 10.5px/1.4 inherit;color:var(--asi-muto);letter-spacing:.02em;
    background:var(--dm-surface,#fff);
}

/* ================================================================
   MOVIMENTI
   ================================================================ */

@keyframes asi-entra{
    0%{transform:scale(.5) translateY(24px);opacity:0}
    60%{transform:scale(1.08) translateY(-4px);opacity:1}
    100%{transform:scale(1) translateY(0);opacity:1}
}
@keyframes asi-sboccia{
    0%{transform:scale(.9) translateY(18px);opacity:0}
    65%{transform:scale(1.015) translateY(-3px);opacity:1}
    100%{transform:scale(1) translateY(0);opacity:1}
}
@keyframes asi-bolla{
    0%{transform:translateY(8px) scale(.94);opacity:0}
    100%{transform:translateY(0) scale(1);opacity:1}
}
@keyframes asi-scoppia{
    0%{transform:translateY(10px) scale(.86);opacity:0;box-shadow:0 0 0 0 rgba(195,236,46,.55)}
    55%{transform:translateY(0) scale(1.045);opacity:1;box-shadow:0 0 0 9px rgba(195,236,46,0)}
    75%{transform:scale(.985)}
    100%{transform:scale(1);box-shadow:0 2px 10px rgba(15,34,68,.06)}
}
@keyframes asi-respira{
    0%,100%{opacity:0;transform:scale(.9)}
    50%{opacity:.85;transform:scale(1.14)}
}
@keyframes asi-onda{
    0%{transform:scale(1);opacity:.75}
    70%,100%{transform:scale(3.2);opacity:0}
}
@keyframes asi-pulsa{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes asi-luce{0%{left:-60%}100%{left:120%}}
@keyframes asi-dondola{
    0%,88%,100%{transform:rotate(0)}
    91%{transform:rotate(-11deg)}94%{transform:rotate(9deg)}97%{transform:rotate(-4deg)}
}
@keyframes asi-scatta{
    0%{transform:scale(1)}45%{transform:scale(1.22) rotate(-8deg)}100%{transform:scale(1) rotate(0)}
}
@keyframes asi-filo{0%{background-position:0 0}100%{background-position:300% 0}}
@keyframes asi-salta{
    0%,80%,100%{transform:translateY(0);opacity:.45}
    40%{transform:translateY(-5px);opacity:1}
}

/* ================================================================
   SCHERMI PICCOLI E MOVIMENTO RIDOTTO
   ================================================================ */

@media (max-width:480px){
    .asi{right:12px;bottom:12px;left:12px}
    .asi-fab{width:100%;justify-content:center;padding:13px 18px}
    .asi-pannello{width:100%;height:72vh;border-radius:20px}
}

@media (prefers-reduced-motion:reduce){
    .asi-fab,.asi-x,.asi-form input,.asi-form button,.asi-form button svg{transition:none}
    .asi-fab::before,.asi-fab::after,.asi-punto::after,.asi-hd::after,.asi-sub i,
    .asi-fab .asi-ico,.asi-pannello.asi-apre,.asi-msg.asi-in,.asi-pronto .asi-fab,
    .asi-bot.asi-pop,.asi-pannello.asi-apre .asi-intro{animation:none}
    .asi-attesa i{animation:none;opacity:.65}
    .asi-fab:hover{transform:none}
    .asi-fab::before{opacity:.35}
}