/* ============================================================
   VETRINA — stile delle quattro aggiunte

   Sta in un file suo, non dentro style.css, per un motivo pratico:
   queste quattro cose (palette dei comandi, assistente, preventivatore,
   anteprime dal vivo) si tolgono levando due righe da index.html, e il
   sito resta esattamente quello di prima. Un file separato rende la
   cosa vera anche per lo stile.

   I colori non sono mai fissati a mano: si usano le stesse variabili
   di style.css, così il tema chiaro funziona da solo.
   ============================================================ */

/* ---------------- Pulsante cerca nella testata ----------------
   Apre la palette anche a chi è sul telefono e non ha una tastiera.
   La scorciatoia scritta accanto compare solo dove c'è spazio. */
.cerca-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--card); border: 1px solid var(--bordo); color: var(--testo-2);
  border-radius: 999px; padding: 7px 12px; cursor: pointer;
  font: inherit; font-size: .85rem; line-height: 1;
  transition: border-color .18s ease, color .18s ease;
}
.cerca-btn:hover { color: var(--testo); border-color: color-mix(in srgb, var(--accento) 50%, var(--bordo)); }
.cerca-btn kbd {
  font: inherit; font-size: .74rem; letter-spacing: .02em;
  border: 1px solid var(--bordo); border-radius: 6px; padding: 2px 6px;
  background: var(--sfondo-2); color: var(--testo-2);
}
@media (max-width: 900px) { .cerca-btn kbd { display: none; } }

/* ---------------- Palette dei comandi ----------------
   Si apre con Ctrl+K (o Cmd+K sul Mac) e sta sopra tutto, anche sopra
   la finestra di dettaglio: da lì si deve poter saltare altrove. */
.palette {
  position: fixed; inset: 0; z-index: 70;
  display: flex; justify-content: center; align-items: flex-start;
  padding: 12vh 18px 18px;
}
.palette-sfondo { position: absolute; inset: 0; background: rgba(3,5,10,.72); backdrop-filter: blur(3px); }
.palette-corpo {
  position: relative; width: min(640px, 100%);
  background: var(--sfondo-2); border: 1px solid var(--bordo); border-radius: 16px;
  box-shadow: var(--ombra); overflow: hidden;
  animation: palette-entra .16s ease-out;
}
@keyframes palette-entra { from { opacity: 0; transform: translateY(-8px); } }

.palette-riga { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--bordo); }
.palette-riga input {
  flex: 1; min-width: 0; background: transparent; border: 0; outline: none;
  color: var(--testo); font: inherit; font-size: 1.02rem;
}
.palette-riga input::placeholder { color: var(--testo-2); }
.palette-esc {
  background: transparent; border: 1px solid var(--bordo); border-radius: 8px;
  color: var(--testo-2); font: inherit; font-size: .74rem; padding: 3px 8px; cursor: pointer;
}

.palette-lista { max-height: min(52vh, 420px); overflow-y: auto; padding: 8px; }
.palette-gruppo {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--testo-2); padding: 10px 10px 4px;
}
.palette-voce {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: transparent; border: 0; border-radius: 10px; padding: 9px 10px;
  color: var(--testo); font: inherit; cursor: pointer;
}
/* Il segno di "sei qui" è di sfondo e non un contorno: scorrendo con le
   frecce un bordo che salta da una riga all'altra stanca gli occhi. */
.palette-voce[aria-selected="true"] { background: var(--card-hover); }
.palette-voce:hover { background: var(--card); }
.palette-segno {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px;
  display: grid; place-items: center; font-size: 1.05rem;
}
.palette-testo { min-width: 0; flex: 1; }
.palette-testo strong { display: block; font-size: .95rem; font-weight: 600; }
.palette-testo span {
  display: block; color: var(--testo-2); font-size: .82rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.palette-invio { color: var(--testo-2); font-size: .78rem; }
.palette-vuoto { color: var(--testo-2); font-size: .9rem; padding: 22px 12px; text-align: center; }
.palette-pie {
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: center;
  border-top: 1px solid var(--bordo); padding: 9px 14px;
  color: var(--testo-2); font-size: .76rem;
}

/* ---------------- Assistente ----------------
   Bolla in basso a destra. Sta sopra il pulsante "torna in cima", che
   infatti si sposta di lato quando l'assistente è in pagina. */
.chat-bolla {
  position: fixed; right: 18px; bottom: 18px; z-index: 55;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 18px; border-radius: 999px; border: 0; cursor: pointer;
  font: inherit; font-weight: 600; font-size: .92rem; color: var(--su-accento);
  background: linear-gradient(120deg, var(--accento), var(--accento-2));
  box-shadow: 0 16px 34px -14px var(--accento);
  transition: transform .18s ease;
}
.chat-bolla:hover { transform: translateY(-2px); }
.chat-bolla[hidden] { display: none; }

.chat {
  position: fixed; right: 18px; bottom: 18px; z-index: 56;
  width: min(390px, calc(100vw - 36px));
  max-height: min(620px, calc(100vh - 36px));
  display: flex; flex-direction: column;
  background: var(--sfondo-2); border: 1px solid var(--bordo); border-radius: 18px;
  box-shadow: var(--ombra); overflow: hidden;
  animation: chat-entra .18s ease-out;
}
@keyframes chat-entra { from { opacity: 0; transform: translateY(14px); } }

.chat-testa {
  display: flex; align-items: center; gap: 10px; padding: 13px 14px;
  border-bottom: 1px solid var(--bordo); background: var(--card);
}
.chat-avatar {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(120deg, var(--accento), var(--accento-2)); color: var(--su-accento);
  font-weight: 700; font-size: .82rem;
}
.chat-titolo { flex: 1; min-width: 0; }
.chat-titolo strong { display: block; font-size: .95rem; }
.chat-titolo span { display: block; color: var(--testo-2); font-size: .78rem; }
.chat-x {
  background: transparent; border: 1px solid var(--bordo); border-radius: 9px;
  width: 30px; height: 30px; color: var(--testo-2); cursor: pointer; font-size: .9rem;
}
.chat-x:hover { color: var(--testo); }

.chat-corpo { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.chat-msg { max-width: 86%; padding: 10px 13px; border-radius: 14px; font-size: .92rem; line-height: 1.55; }
.chat-msg p + p { margin-top: 8px; }
.chat-msg-io {
  align-self: flex-end; background: var(--accento); color: var(--su-accento);
  border-bottom-right-radius: 4px;
}
.chat-msg-lui {
  align-self: flex-start; background: var(--card); border: 1px solid var(--bordo);
  border-bottom-left-radius: 4px;
}
.chat-msg-lui a { color: var(--accento-2); text-decoration: underline; }

/* I tre puntini mentre pensa: senza, una risposta che tarda sembra un
   messaggio perso e la gente riscrive la stessa domanda. */
.chat-attesa { display: inline-flex; gap: 4px; align-items: center; }
.chat-attesa i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--testo-2);
  animation: chat-punto 1s infinite ease-in-out;
}
.chat-attesa i:nth-child(2) { animation-delay: .15s; }
.chat-attesa i:nth-child(3) { animation-delay: .3s; }
@keyframes chat-punto { 0%, 60%, 100% { opacity: .35; } 30% { opacity: 1; } }

.chat-schede { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; }
.chat-scheda {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: var(--sfondo-2); border: 1px solid var(--bordo); border-radius: 11px;
  padding: 8px 10px; color: var(--testo); font: inherit; font-size: .85rem; cursor: pointer;
}
.chat-scheda:hover { border-color: color-mix(in srgb, var(--accento) 55%, var(--bordo)); }
.chat-scheda-segno { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; }
.chat-scheda-testo { flex: 1; min-width: 0; }
.chat-scheda-testo strong { display: block; font-weight: 600; }
.chat-scheda-testo span { display: block; color: var(--testo-2); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.chat-suggerimenti { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 14px 10px; }
.chat-chip {
  background: var(--card); border: 1px solid var(--bordo); border-radius: 999px;
  padding: 6px 12px; font: inherit; font-size: .8rem; color: var(--testo-2); cursor: pointer;
}
.chat-chip:hover { color: var(--testo); border-color: color-mix(in srgb, var(--accento) 50%, var(--bordo)); }

.chat-riga { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--bordo); }
.chat-riga input {
  flex: 1; min-width: 0; background: var(--card); border: 1px solid var(--bordo);
  border-radius: 11px; padding: 10px 12px; color: var(--testo); font: inherit; font-size: .92rem;
}
.chat-riga input:focus { outline: none; border-color: var(--accento); }
.chat-invia {
  border: 0; border-radius: 11px; padding: 0 15px; cursor: pointer;
  background: var(--accento); color: var(--su-accento); font: inherit; font-weight: 600;
}
.chat-invia:disabled { opacity: .5; cursor: default; }
.chat-nota { padding: 0 14px 11px; color: var(--testo-2); font-size: .73rem; text-align: center; }

/* Sul telefono la finestra prende tutto: 390 px di larghezza fissa
   uscivano dallo schermo dei modelli piccoli. */
@media (max-width: 560px) {
  .chat { right: 10px; left: 10px; bottom: 10px; width: auto; max-height: calc(100vh - 20px); }
  .chat-bolla { right: 12px; bottom: 12px; padding: 11px 15px; }
}

/* ---------------- Preventivatore ---------------- */
.preventivo {
  margin-top: 26px; background: var(--card); border: 1px solid var(--bordo);
  border-radius: var(--raggio); padding: 26px;
}
.preventivo-testa { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.preventivo-testa h3 { font-size: 1.25rem; }
.preventivo-passo-num { color: var(--testo-2); font-size: .84rem; white-space: nowrap; }
.preventivo-sotto { color: var(--testo-2); font-size: .92rem; }

/* La barra di avanzamento: quattro domande sembrano poche solo se si
   vede quante ne restano. */
.preventivo-barra { height: 4px; border-radius: 999px; background: var(--bordo); margin: 18px 0 22px; overflow: hidden; }
.preventivo-barra i { display: block; height: 100%; background: linear-gradient(90deg, var(--accento), var(--accento-2)); transition: width .25s ease; }

.preventivo-domanda { font-size: 1.05rem; font-weight: 600; margin-bottom: 4px; }
.preventivo-aiuto { color: var(--testo-2); font-size: .87rem; margin-bottom: 14px; }
.preventivo-scelte { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
.preventivo-scelta {
  display: flex; align-items: flex-start; gap: 11px; text-align: left;
  background: var(--sfondo-2); border: 1px solid var(--bordo); border-radius: 13px;
  padding: 13px 14px; color: var(--testo); font: inherit; cursor: pointer;
  transition: border-color .18s ease, transform .18s ease;
}
.preventivo-scelta:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accento) 55%, var(--bordo)); }
.preventivo-scelta[aria-pressed="true"] {
  border-color: var(--accento);
  background: color-mix(in srgb, var(--accento) 12%, var(--sfondo-2));
}
.preventivo-scelta-emoji { font-size: 1.3rem; line-height: 1.2; }
.preventivo-scelta-testo strong { display: block; font-size: .95rem; font-weight: 600; }
.preventivo-scelta-testo span { display: block; color: var(--testo-2); font-size: .82rem; }

.preventivo-azioni { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 18px; }
.preventivo-azioni .mini-indietro { margin-right: auto; }
/* Finché non si è scelto niente, "Avanti" non porta da nessuna parte: si
   vede spento, altrimenti sembra un pulsante rotto. */
.preventivo-azioni .btn[disabled] { opacity: .45; cursor: default; box-shadow: none; }
.preventivo-azioni .btn[disabled]:hover { transform: none; }

/* Il risultato */
.preventivo-cifra { font-size: 2rem; font-weight: 700; letter-spacing: -.02em; }
.preventivo-cifra span { font-size: 1rem; font-weight: 500; color: var(--testo-2); }
.preventivo-dati { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 12px 0 16px; }
.preventivo-dato { font-size: .92rem; }
.preventivo-dato strong { display: block; font-size: 1.05rem; }
.preventivo-dato span { color: var(--testo-2); font-size: .8rem; }
.preventivo-elenco { list-style: none; padding: 0; display: grid; gap: 6px; margin: 0 0 16px; }
.preventivo-elenco li { color: var(--testo-2); font-size: .9rem; display: flex; gap: 8px; }
.preventivo-elenco li::before { content: "✓"; color: var(--accento-2); }
.preventivo-avviso {
  background: var(--sfondo-2); border: 1px solid var(--bordo); border-radius: 12px;
  padding: 11px 13px; color: var(--testo-2); font-size: .84rem; margin-bottom: 16px;
}

/* Il modulo che manda davvero la richiesta */
.preventivo-invio { border-top: 1px solid var(--bordo); padding-top: 18px; }
.preventivo-invio-titolo { font-size: 1.05rem; font-weight: 600; margin-bottom: 12px; }
.preventivo-campi { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.preventivo-invio label,
.preventivo-campo-lungo {
  display: block; color: var(--testo-2); font-size: .84rem; margin-bottom: 12px;
}
.preventivo-campo-lungo span { opacity: .75; }
.preventivo-invio input,
.preventivo-invio textarea {
  display: block; width: 100%; margin-top: 6px;
  background: var(--sfondo-2); border: 1px solid var(--bordo); border-radius: 11px;
  padding: 11px 13px; color: var(--testo); font: inherit; font-size: .93rem;
  resize: vertical;
}
.preventivo-invio input:focus,
.preventivo-invio textarea:focus { outline: none; border-color: var(--accento); }

.preventivo-esito { font-size: .88rem; margin-top: 12px; color: var(--testo-2); }
.preventivo-esito-no { color: #f87171; }
.preventivo-esito a { color: var(--accento-2); text-decoration: underline; }

.preventivo-privacy { color: var(--testo-2); font-size: .78rem; margin-top: 12px; }
.preventivo-privacy a { color: var(--accento-2); text-decoration: underline; }

/* Quando la richiesta è partita davvero */
.preventivo-fatto {
  display: flex; gap: 9px; align-items: center;
  background: color-mix(in srgb, #22c55e 14%, transparent);
  border: 1px solid color-mix(in srgb, #22c55e 45%, transparent);
  border-radius: 12px; padding: 13px 15px; font-size: .95rem; font-weight: 600;
}

/* ---------------- Anteprime dal vivo ----------------
   Il sito vero, dentro la copertina, rimpicciolito. Si carica solo
   quando serve: vedi i commenti in extra.js. */
.anteprima-live {
  position: absolute; inset: 0; overflow: hidden; border: 0;
  opacity: 0; transition: opacity .45s ease; background: #fff;
}
.anteprima-live.dentro { opacity: 1; }
/* L'iframe è grande come un desktop e poi rimpicciolito: caricare il
   sito a 300 px di larghezza vorrebbe dire vedere la versione telefono,
   che in una copertina larga si riconosce molto meno. */
.anteprima-live iframe {
  width: 1280px; height: 800px; border: 0;
  transform-origin: top left; pointer-events: none;
}
.anteprima-etichetta {
  position: absolute; left: 10px; bottom: 10px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(8,10,16,.72); color: #fff; border-radius: 999px;
  padding: 4px 10px; font-size: .72rem; font-weight: 600;
  backdrop-filter: blur(4px);
}
.anteprima-etichetta i {
  width: 6px; height: 6px; border-radius: 50%; background: #4ade80;
  animation: anteprima-pulsa 1.8s infinite ease-in-out;
}
@keyframes anteprima-pulsa { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* Nella scheda di dettaglio l'anteprima è grande e si può usare davvero:
   lì i clic passano, perché è a tutti gli effetti il sito aperto dentro
   la finestra. */
.anteprima-scheda { position: relative; margin-top: 4px; }
.anteprima-riquadro {
  position: relative; aspect-ratio: 16/10; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--bordo); background: var(--card);
}
.anteprima-riquadro .anteprima-live iframe { pointer-events: auto; }
.anteprima-carica {
  position: absolute; inset: 0; display: grid; place-items: center; gap: 8px;
  background: var(--card); border: 0; color: var(--testo); font: inherit; cursor: pointer;
  text-align: center; padding: 20px;
}
.anteprima-carica small { display: block; color: var(--testo-2); font-size: .8rem; }

/* Chi ha chiesto meno animazioni non vuole nemmeno un sito che si muove
   dentro una copertina. E con "risparmio dati" attivo l'anteprima non si
   carica affatto: la decisione sta in extra.js, qui si spegne l'effetto. */
@media (prefers-reduced-motion: reduce) {
  .anteprima-live { transition: none; }
  .anteprima-etichetta i { animation: none; }
  .palette-corpo, .chat { animation: none; }
}