/* ============================================================
   97-assistente.css — Andrea, assistente virtuale
   Costruzioni Ferrara SRL · brand del cliente (antracite, arancio
   cantiere, giallo rischio), nessun token CLEG.
   ------------------------------------------------------------
   Posizioni, per non toccare ciò che è già fisso in basso a destra:
   · desktop (>1080px): pulsante a bottom 64px, sopra la firma CLEG
     (bottom 16px); il pannello sopra il pulsante
   · ≤1080px: pulsante tondo a bottom 92px, sopra il «Chiama ora»
     (.float-cta, bottom 24px, 54px); il pannello è a tutto schermo
     fino a 760px (o su schermi touch fino a 1024px)
   · z-index 70: sotto il menu mobile (75) e l'header (80), sopra il
     «Chiama ora» (69); aperto sale a 110, sotto lightbox (120),
     schede immobile (130/140), loader (200) e banner cookie (9999)
   I token hanno un ripiego: le pagine legali non caricano tutti i CSS.
   ============================================================ */

.cfa{
  --cfa-ink:var(--ink,#0E0F11);
  --cfa-bg:var(--surface,#1C1F23);
  --cfa-bg2:var(--surface-2,#23272C);
  --cfa-bg3:var(--surface-3,#2B3036);
  --cfa-line:var(--line,rgba(255,255,255,.10));
  --cfa-line2:var(--line-strong,rgba(255,255,255,.18));
  --cfa-fg:var(--white,#F3F5F6);
  --cfa-fog:var(--fog,#9AA1A8);
  --cfa-orange:var(--orange,#FF6A1A);
  --cfa-orange-deep:var(--orange-deep,#E2540B);
  --cfa-orange-soft:var(--orange-soft,rgba(255,106,26,.14));
  --cfa-yellow:var(--yellow,#FFC400);
  --cfa-display:var(--font-display,'Anton',Impact,sans-serif);
  --cfa-sans:var(--font-sans,'Archivo',system-ui,sans-serif);
  --cfa-mono:var(--font-mono,'Space Mono',ui-monospace,monospace);
  --cfa-ease:var(--ease-out,cubic-bezier(.16,1,.3,1));
  position:fixed;right:20px;bottom:64px;z-index:70;
  font-family:var(--cfa-sans);color:var(--cfa-fg);font-size:15px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.cfa.cfa-open{z-index:110}
.cfa *,.cfa *::before,.cfa *::after{box-sizing:border-box}
.cfa-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- il pulsante ---------- */
.cfa-launch{
  position:relative;display:flex;align-items:center;gap:10px;
  height:48px;padding:0 20px 0 15px;border:0;border-radius:2px;
  background:var(--cfa-orange);color:#fff;cursor:pointer;
  font-family:var(--cfa-mono);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  box-shadow:0 10px 28px -10px rgba(255,106,26,.65),0 2px 8px rgba(0,0,0,.25);
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .5s var(--cfa-ease),transform .5s var(--cfa-ease),background .25s,box-shadow .25s;
  -webkit-tap-highlight-color:transparent;
}
.cfa.cfa-ready .cfa-launch{opacity:1;transform:none;pointer-events:auto}
.cfa-launch:hover{background:var(--cfa-orange-deep);box-shadow:0 14px 32px -10px rgba(255,106,26,.75),0 2px 8px rgba(0,0,0,.25)}
.cfa-launch:focus-visible{outline:2px solid var(--cfa-yellow);outline-offset:3px}
.cfa-launch-ic{display:grid;place-items:center;width:22px;height:22px}
.cfa-launch-ic svg{width:22px;height:22px}
.cfa-dot{position:absolute;top:-4px;right:-4px;width:11px;height:11px;border-radius:50%;background:var(--cfa-yellow);border:2px solid var(--cfa-ink)}
.cfa.cfa-open .cfa-dot{display:none}
/* aperto: il pulsante chiude */
.cfa.cfa-open .cfa-launch-ic{position:relative}
.cfa.cfa-open .cfa-launch-ic svg{opacity:0}
.cfa.cfa-open .cfa-launch-ic::before,.cfa.cfa-open .cfa-launch-ic::after{content:"";position:absolute;left:3px;right:3px;top:50%;height:2px;margin-top:-1px;background:currentColor;border-radius:1px;transform:rotate(45deg)}
.cfa.cfa-open .cfa-launch-ic::after{transform:rotate(-45deg)}

/* ---------- il pannello ---------- */
.cfa-panel{
  position:absolute;right:0;bottom:60px;
  width:min(392px,calc(100vw - 40px));
  height:min(620px,calc(100vh - 230px));min-height:360px;
  display:flex;flex-direction:column;
  background:var(--cfa-bg);border:1px solid var(--cfa-line2);border-radius:4px;overflow:hidden;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.65),0 0 0 1px rgba(0,0,0,.2);
  transform-origin:100% 100%;
  animation:cfa-in .38s var(--cfa-ease);
}
.cfa-panel[hidden]{display:none}
@keyframes cfa-in{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}

.cfa-head{
  position:relative;display:flex;align-items:center;gap:12px;
  padding:18px 12px 14px 18px;background:var(--cfa-ink);border-bottom:1px solid var(--cfa-line);
}
.cfa-head::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:repeating-linear-gradient(135deg,var(--cfa-yellow) 0 12px,var(--cfa-ink) 12px 24px)}
.cfa-avatar{
  flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:2px;
  background:var(--cfa-orange);color:#fff;font-family:var(--cfa-display);font-size:22px;line-height:1;
}
.cfa-who{flex:1;min-width:0}
.cfa-title{margin:0;font-family:var(--cfa-display);font-weight:400;font-size:22px;line-height:1;letter-spacing:.02em;text-transform:uppercase;color:var(--cfa-fg)}
.cfa-sub{margin:5px 0 0;font-family:var(--cfa-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--cfa-fog);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cfa-icon{
  flex:none;display:grid;place-items:center;width:38px;height:38px;border:0;border-radius:2px;
  background:transparent;color:var(--cfa-fog);cursor:pointer;transition:background .2s,color .2s;
}
.cfa-icon svg{width:20px;height:20px}
.cfa-icon:hover{background:var(--cfa-bg3);color:var(--cfa-fg)}
.cfa-icon:focus-visible{outline:2px solid var(--cfa-orange);outline-offset:-2px}

/* ---------- la conversazione ---------- */
.cfa-log{
  flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding:18px 16px 8px;display:flex;flex-direction:column;gap:12px;
  scrollbar-width:thin;scrollbar-color:var(--cfa-bg3) transparent;
}
.cfa-msg{max-width:88%;animation:cfa-msg .3s var(--cfa-ease)}
@keyframes cfa-msg{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.cfa-text{margin:0;white-space:pre-line;overflow-wrap:anywhere}
.cfa-bot{align-self:flex-start}
.cfa-bot>.cfa-text{background:var(--cfa-bg2);border:1px solid var(--cfa-line);border-left:3px solid var(--cfa-orange);border-radius:2px 4px 4px 2px;padding:11px 14px;color:var(--cfa-fg)}
.cfa-me{align-self:flex-end}
.cfa-me .cfa-text{background:var(--cfa-orange);color:#fff;border-radius:4px 2px 2px 4px;padding:10px 14px}
.cfa-writing>.cfa-text::after{content:"";display:inline-block;width:7px;height:1em;margin-left:2px;vertical-align:-2px;background:var(--cfa-orange);animation:cfa-caret 1s steps(2) infinite}
@keyframes cfa-caret{50%{opacity:0}}
.cfa-after{margin-top:10px}
.cfa-bot>.cfa-after{background:transparent;border:0;padding:2px 2px 0;color:var(--cfa-fog);font-size:14px}

.cfa-typing{display:flex;align-items:center;gap:10px;color:var(--cfa-fog);font-family:var(--cfa-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:4px 2px}
.cfa-dots{display:inline-flex;gap:4px}
.cfa-dots i{width:6px;height:6px;border-radius:50%;background:var(--cfa-orange);animation:cfa-dot 1.1s infinite ease-in-out}
.cfa-dots i:nth-child(2){animation-delay:.15s}
.cfa-dots i:nth-child(3){animation-delay:.3s}
@keyframes cfa-dot{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}

.cfa-in{animation:cfa-msg .35s var(--cfa-ease) both}

/* schede immobile */
.cfa-cards{display:grid;gap:8px;margin-top:10px}
.cfa-card{
  display:flex;flex-direction:column;gap:3px;padding:12px 14px;border-radius:2px;
  background:var(--cfa-ink);border:1px solid var(--cfa-line2);color:var(--cfa-fg);text-decoration:none;
  transition:border-color .2s,transform .2s;
}
.cfa-card:hover{border-color:var(--cfa-orange);transform:translateY(-1px)}
.cfa-card:focus-visible{outline:2px solid var(--cfa-orange);outline-offset:2px}
.cfa-card-top{display:flex;justify-content:space-between;gap:8px;align-items:center}
.cfa-card-where{font-family:var(--cfa-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--cfa-orange)}
.cfa-card-badge{font-family:var(--cfa-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--cfa-ink);background:var(--cfa-yellow);padding:2px 6px;border-radius:2px}
.cfa-card-title{font-weight:700;font-size:15px}
.cfa-card-facts{font-size:13px;color:var(--cfa-fog)}
.cfa-card-extra{font-size:12px;color:var(--cfa-fog);opacity:.85}

/* collegamenti */
.cfa-links{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.cfa-link{
  display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:2px;
  border:1px solid var(--cfa-line2);color:var(--cfa-fg);text-decoration:none;font-size:13px;font-weight:600;
  transition:border-color .2s,color .2s;
}
.cfa-link svg{width:15px;height:15px;color:var(--cfa-orange)}
.cfa-link:hover{border-color:var(--cfa-orange);color:var(--cfa-orange)}
.cfa-link:focus-visible{outline:2px solid var(--cfa-orange);outline-offset:2px}

/* contatti */
.cfa-contact{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.cfa-btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:8px 12px;border-radius:2px;
  border:1px solid var(--cfa-line2);background:transparent;color:var(--cfa-fg);text-decoration:none;cursor:pointer;
  font-family:var(--cfa-mono);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  transition:background .2s,border-color .2s,color .2s;
}
.cfa-btn:hover{border-color:var(--cfa-orange);color:var(--cfa-orange)}
.cfa-btn:focus-visible{outline:2px solid var(--cfa-yellow);outline-offset:2px}
.cfa-btn.cfa-primary{flex:1 1 100%;background:var(--cfa-orange);border-color:var(--cfa-orange);color:#fff;min-height:44px}
.cfa-btn.cfa-primary:hover{background:var(--cfa-orange-deep);border-color:var(--cfa-orange-deep);color:#fff}

/* suggerimenti */
.cfa-chips{display:flex;gap:6px;padding:4px 16px 10px;overflow-x:auto;scrollbar-width:none;flex:none}
.cfa-chips:empty{display:none}
.cfa-chips::-webkit-scrollbar{display:none}
.cfa-chip{
  flex:none;padding:7px 12px;border-radius:999px;border:1px solid var(--cfa-line2);background:var(--cfa-bg2);
  color:var(--cfa-fg);font-family:var(--cfa-sans);font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;
  transition:border-color .2s,color .2s,background .2s;
}
.cfa-chip:hover{border-color:var(--cfa-orange);color:var(--cfa-orange);background:var(--cfa-orange-soft)}
.cfa-chip:focus-visible{outline:2px solid var(--cfa-orange);outline-offset:2px}

/* scrivere */
.cfa-form{display:flex;align-items:flex-end;gap:8px;padding:10px 12px 8px;border-top:1px solid var(--cfa-line);background:var(--cfa-bg);flex:none}
.cfa-input{
  flex:1;min-height:44px;max-height:120px;resize:none;margin:0;padding:11px 13px;border-radius:2px;
  border:1px solid var(--cfa-line2);background:var(--cfa-ink);color:var(--cfa-fg);
  font-family:var(--cfa-sans);font-size:16px;line-height:1.35;outline:none;transition:border-color .2s,box-shadow .2s;
}
.cfa-input::placeholder{color:var(--cfa-fog);opacity:.8}
.cfa-input:focus{border-color:var(--cfa-orange);box-shadow:0 0 0 3px var(--cfa-orange-soft)}
.cfa-send{
  flex:none;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:2px;
  background:var(--cfa-orange);color:#fff;cursor:pointer;transition:background .2s;
}
.cfa-send svg{width:20px;height:20px}
.cfa-send:hover{background:var(--cfa-orange-deep)}
.cfa-send:focus-visible{outline:2px solid var(--cfa-yellow);outline-offset:2px}
.cfa-note{margin:0;padding:0 14px 12px;font-size:11px;line-height:1.4;color:var(--cfa-fog);flex:none}
.cfa-note-a{color:var(--cfa-fog);text-decoration:underline;text-underline-offset:2px}
.cfa-note-a:hover{color:var(--cfa-orange)}

/* il modulo appena riempito dall'assistente */
.quote.cfa-filled{animation:cfa-filled 2.4s var(--cfa-ease,ease)}
@keyframes cfa-filled{0%,100%{box-shadow:0 0 0 0 rgba(255,106,26,0)}20%{box-shadow:0 0 0 4px rgba(255,106,26,.55)}}

/* ---------- tema chiaro (html.light, dove la pagina lo carica) ---------- */
html.light .cfa-panel{box-shadow:0 30px 70px -24px rgba(13,17,23,.35),0 0 0 1px rgba(0,0,0,.04)}
html.light .cfa-head{background:var(--cfa-bg2)}
html.light .cfa-head::before{background:repeating-linear-gradient(135deg,var(--cfa-yellow) 0 12px,#16181B 12px 24px)}
html.light .cfa-dot{border-color:#fff}
html.light .cfa-card,html.light .cfa-input{background:#fff}

/* ---------- ≤1080px: pulsante tondo sopra «Chiama ora» ---------- */
@media (max-width:1080px){
  .cfa{bottom:92px}
  .cfa-launch{width:54px;height:54px;padding:0;justify-content:center;border-radius:50%}
  .cfa-launch-t{display:none}
  .cfa-dot{top:1px;right:1px}
  .cfa-panel{bottom:66px;height:min(600px,calc(100vh - 240px))}
}

/* ---------- telefono: il pannello copre la pagina e segue la tastiera ---------- */
@media (max-width:760px),(pointer:coarse) and (max-width:1024px){
  .cfa.cfa-open .cfa-launch{display:none}
  .cfa-panel{
    position:fixed;left:0;right:0;top:var(--cfa-top,0px);bottom:auto;
    width:100%;height:var(--cfa-vh,100dvh);min-height:0;border-radius:0;border:0;
    animation:cfa-up .32s var(--cfa-ease);
  }
  .cfa-head{padding-top:calc(18px + env(safe-area-inset-top,0px))}
  .cfa-note{padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
  .cfa-msg{max-width:92%}
  html.cfa-lock,html.cfa-lock body{overflow:hidden!important}
}
@keyframes cfa-up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .cfa-launch,.cfa-panel,.cfa-msg,.cfa-in,.cfa-card,.quote.cfa-filled{animation:none!important;transition:none!important}
  .cfa-dots i,.cfa-writing>.cfa-text::after{animation:none}
}
@media print{.cfa{display:none!important}}