/* ==========================================================================
   [BLK:AI] Home teaser dell'Assistente AI guidato
   Stili SOLO per il blocco home. Namespacing .ai-* per evitare collisioni
   con le classi del monolite (.card, .btn, ecc.) e con enhance.css.
   Riusa l'accento firma cyan->viola del design system.
   ========================================================================== */

.ai-home{position:relative;overflow:hidden}
.ai-home::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(520px 260px at 12% 0%,rgba(34,211,238,.10),transparent 70%),
    radial-gradient(560px 300px at 92% 10%,rgba(124,58,237,.12),transparent 72%);
}
.ai-home > .container{position:relative;z-index:1}

.ai-eyebrow{
  display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:#22d3ee;border:1px solid rgba(34,211,238,.28);
  border-radius:999px;padding:5px 12px;background:rgba(34,211,238,.05);margin-bottom:12px;
}
.ai-eyebrow::after{
  content:"";display:inline-block;width:7px;height:13px;background:#22d3ee;border-radius:1px;
  animation:ai-blink 1.1s steps(1) infinite;
}
@keyframes ai-blink{0%,49%{opacity:1}50%,100%{opacity:0}}

.ai-grad{background:linear-gradient(135deg,#22d3ee 0%,#7c3aed 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}

.ai-lead{max-width:60ch;color:#cbd5e1;line-height:1.6;margin:6px 0 0}
.ai-badge{display:inline-flex;align-items:center;gap:7px;margin-top:10px;font-size:12px;
  color:#d1d5db;border:1px dashed rgba(124,58,237,.45);border-radius:10px;padding:5px 10px;
  background:rgba(124,58,237,.06)}
.ai-badge b{color:#fff}

.ai-wrap{display:grid;gap:18px;margin-top:20px}
@media(min-width:900px){.ai-wrap{grid-template-columns:1.1fr .9fr;align-items:center}}

/* colonna sinistra: spunti cliccabili (mini-assistente inline) */
.ai-examples{display:grid;gap:10px}
.ai-q{
  display:flex;align-items:center;gap:10px;text-align:left;width:100%;cursor:pointer;
  border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:12px 14px;
  background:rgba(255,255,255,.02);color:var(--fg,#e5e7eb);font-size:14.5px;line-height:1.4;
  transition:transform .15s ease,border-color .2s ease,box-shadow .2s ease;
}
.ai-q:hover{transform:translateY(-2px);border-color:rgba(34,211,238,.45);
  box-shadow:0 0 0 1px rgba(34,211,238,.25),0 8px 30px -14px rgba(124,58,237,.45)}
.ai-q:focus-visible{outline:2px solid #22d3ee;outline-offset:2px}
.ai-q .ai-qi{flex:0 0 auto;width:24px;height:24px;border-radius:7px;display:grid;place-items:center;
  font-size:12px;color:#22d3ee;background:rgba(34,211,238,.08);border:1px solid rgba(34,211,238,.3)}
.ai-q .ai-arrow{margin-left:auto;color:#7c3aed;opacity:.7;transition:transform .2s ease}
.ai-q:hover .ai-arrow{transform:translateX(3px);opacity:1}

/* colonna destra: mini "schermo" anteprima risposta */
.ai-preview{border:1px solid rgba(255,255,255,.08);border-radius:16px;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,0))}
.ai-preview__bar{display:flex;align-items:center;gap:8px;padding:11px 14px;
  border-bottom:1px solid rgba(255,255,255,.08);font-size:12.5px;color:#9ca3af}
.ai-preview__dot{width:9px;height:9px;border-radius:999px;
  background:linear-gradient(135deg,#22d3ee,#7c3aed);box-shadow:0 0 0 3px rgba(34,211,238,.12)}
.ai-preview__body{padding:16px;min-height:150px}
.ai-pmsg{font-size:14.5px;line-height:1.55;color:#e5e7eb}
.ai-pmsg .ai-pq{color:#c4b5fd;font-size:13px;margin:0 0 8px}
.ai-pmsg .ai-pa{margin:0}
.ai-pmsg strong{color:#fff}
.ai-psrc{margin-top:12px;padding-top:9px;border-top:1px dashed rgba(255,255,255,.08);
  font-size:11.5px;color:#9ca3af}
.ai-typing{display:inline-flex;gap:4px;align-items:center}
.ai-typing span{width:6px;height:6px;border-radius:999px;background:#22d3ee;opacity:.4;
  animation:ai-bounce 1.2s infinite}
.ai-typing span:nth-child(2){animation-delay:.18s}
.ai-typing span:nth-child(3){animation-delay:.36s}
@keyframes ai-bounce{0%,60%,100%{transform:translateY(0);opacity:.35}30%{transform:translateY(-4px);opacity:1}}

.ai-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:20px}
.ai-actions .ai-hint{font-size:12.5px;color:#9ca3af}

/* il bottone usa la classe .btn .btn--primary del sito; aggiungiamo solo l'icona */
.ai-cta-ico{display:inline-block;margin-left:6px;transition:transform .2s ease}
.btn:hover .ai-cta-ico{transform:translateX(3px)}

@media (prefers-reduced-motion: reduce){
  .ai-eyebrow::after{animation:none;opacity:1}
  .ai-typing span{animation:none;opacity:.7}
  .ai-q{transition:none}
  .ai-q:hover{transform:none}
  .ai-q:hover .ai-arrow,.btn:hover .ai-cta-ico{transform:none}
}