/* By D.S. — generatore siti
   Conversazione a sinistra, palco a destra. Il sito generato è l'opera:
   la cornice deve essere bella e stare zitta. Un solo colore che agisce. */

:root {
  --inchiostro:    #14161a;
  --carta:         #ffffff;
  --carta-sotto:   #f5f4f1;
  --grafite:       #16181c;
  --grafite-alta:  #1e2126;
  --grigio:        #6a6d75;
  --grigio-chiaro: #9a9da4;
  --linea:         #e5e3de;
  --linea-scura:   #2b2f35;
  --segno:         #2a3ec7;
  --segno-cupo:    #1f30ab;
  --segno-tinta:   #eceffc;
  --allarme:       #a8321f;

  --serif: "Fraunces", Georgia, serif;
  --sans:  "Karla", ui-sans-serif, system-ui, sans-serif;

  --gutter: 1.75rem;
  --curva: 4px;
  --molla: cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; }
html { height: 100%; }

body {
  height: 100%;
  margin: 0;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--inchiostro);
  background: var(--grafite);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--segno); color: #fff; }

:focus-visible { outline: 2px solid var(--segno); outline-offset: 2px; border-radius: 1px; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ─── comandi ────────────────────────────────────────────────────────────── */

button {
  font: inherit;
  font-size: .845rem;
  cursor: pointer;
  color: var(--inchiostro);
  background: transparent;
  border: 1px solid var(--linea);
  padding: .48rem .85rem;
  border-radius: var(--curva);
  transition: border-color .2s var(--molla), background-color .2s var(--molla),
              color .2s var(--molla), transform .12s var(--molla);
}
button:hover:not(:disabled) { border-color: var(--inchiostro); }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: .3; cursor: default; }

button.agisce {
  background: var(--segno); border-color: var(--segno);
  color: #fff; font-weight: 500;
  box-shadow: 0 1px 2px rgba(42,62,199,.25);
}
button.agisce:hover:not(:disabled) { background: var(--segno-cupo); border-color: var(--segno-cupo); }

.strumenti button { color: var(--grigio-chiaro); border-color: var(--linea-scura); }
.strumenti button:hover:not(:disabled) { color: #fff; border-color: #4a5058; }
.strumenti button.agisce { color: #fff; }
.strumenti .vista.attiva { color: var(--inchiostro); background: #fff; border-color: #fff; }

/* ─── impianto ───────────────────────────────────────────────────────────── */

.colonne { display: grid; grid-template-columns: minmax(21rem, 30rem) 1fr; height: 100%; }
.chat { display: flex; flex-direction: column; min-width: 0; background: var(--carta); }

/* ─── testata ────────────────────────────────────────────────────────────── */

.testata {
  display: flex; align-items: baseline; gap: .7rem;
  padding: 1.5rem var(--gutter) 1.15rem;
  border-bottom: 1px solid var(--linea);
}
.testata h1 {
  font-family: var(--serif);
  font-size: 1.72rem; font-weight: 400;
  font-variation-settings: "SOFT" 0, "WONK" 1, "opsz" 40;
  letter-spacing: -.015em; margin: 0; line-height: 1;
}
.firma { margin: 0; font-size: .78rem; color: var(--grigio); font-style: italic; }

/* ─── conversazione ──────────────────────────────────────────────────────── */

.flusso {
  flex: 1; overflow-y: auto; overscroll-behavior: contain;
  padding: 1.5rem var(--gutter) 2rem;
  display: flex; flex-direction: column; gap: 1.5rem;
  scrollbar-width: thin; scrollbar-color: var(--linea) transparent;
  scroll-behavior: smooth;
}
.flusso::-webkit-scrollbar { width: 9px; }
.flusso::-webkit-scrollbar-thumb { background: var(--linea); border-radius: 9px; border: 3px solid #fff; }

/* ogni turno entra una volta sola, con un ritardo minimo */
@keyframes entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.turno, .direzione, .vuoto { animation: entra .42s var(--molla) backwards; }

.vuoto { font-size: .93rem; line-height: 1.68; color: var(--grigio); max-width: 36ch; }
.vuoto p { margin: 0 0 .85rem; }
.vuoto strong { color: var(--inchiostro); font-weight: 500; }

.scorciatoie {
  display: flex; flex-direction: column; align-items: flex-start; gap: .3rem;
  margin-top: 1.5rem; padding-top: 1.3rem; border-top: 1px solid var(--linea);
}
.scorciatoia {
  border-color: transparent; padding: .34rem .6rem;
  margin-left: -.6rem; color: var(--segno); text-align: left;
}
.scorciatoia:hover { border-color: transparent; background: var(--segno-tinta); }

/* chi scrive */
.turno.utente {
  align-self: flex-end;
  max-width: 88%;
  background: var(--carta-sotto);
  padding: .8rem .95rem;
  border-radius: var(--curva) var(--curva) 1px var(--curva);
  font-size: .91rem; line-height: 1.6;
  white-space: pre-wrap;
}

/* lo studio: filo verticale, come il margine di una bozza */
.turno.studio {
  border-left: 1px solid var(--linea);
  padding-left: 1.1rem;
  font-size: .91rem; line-height: 1.72;
}
.turno.studio p { margin: 0 0 .78rem; }
.turno.studio p:last-child { margin-bottom: 0; }
.turno.studio strong { font-weight: 600; }

/* il cursore che lampeggia mentre il testo arriva */
.turno.studio.scrive p:last-of-type::after {
  content: "";
  display: inline-block;
  width: .5em; height: 1.05em;
  margin-left: .12em;
  vertical-align: text-bottom;
  background: var(--segno);
  animation: cursore 1s steps(2, start) infinite;
}
@keyframes cursore { 0%, 50% { opacity: 1 } 50.01%, 100% { opacity: 0 } }

.turno.errore { border-left-color: var(--allarme); color: var(--allarme); font-size: .86rem; }
.turno.errore code { display: block; margin-top: .4rem; font-size: .78rem; opacity: .7; word-break: break-word; }

/* ─── scheda della direzione ─────────────────────────────────────────────── */

.direzione {
  border: 1px solid var(--linea);
  border-left: 2px solid var(--segno);
  padding: .95rem 1.05rem;
  border-radius: var(--curva);
  background: linear-gradient(180deg, var(--segno-tinta) 0%, #fff 62%);
}
.direzione h2 {
  font-family: var(--serif);
  font-variation-settings: "WONK" 1, "opsz" 20;
  font-size: 1.08rem; font-weight: 400; margin: 0 0 .32rem;
  letter-spacing: -.01em;
}
.direzione .cosa { margin: 0; font-size: .82rem; line-height: 1.6; color: var(--grigio); }
.direzione dl {
  margin: .75rem 0 0; display: grid; grid-template-columns: auto 1fr;
  gap: .2rem .8rem; font-size: .78rem;
}
.direzione dt { color: var(--grigio-chiaro); }
.direzione dd { margin: 0; color: var(--grigio); }
.direzione .rilancia { margin-top: .85rem; font-size: .79rem; padding: .32rem .65rem; background: #fff; }

/* ─── stato: il battito diventa un'onda mentre pensa ─────────────────────── */

.stato { display: flex; align-items: center; gap: .55rem; font-size: .84rem; color: var(--grigio); margin-top: .7rem; }
.stato .battito { display: flex; gap: 3px; }
.stato .battito i {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--segno);
  animation: onda 1.25s ease-in-out infinite;
}
.stato .battito i:nth-child(2) { animation-delay: .16s; }
.stato .battito i:nth-child(3) { animation-delay: .32s; }
@keyframes onda {
  0%, 60%, 100% { opacity: .22; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}
.stato.finito .battito i { animation: none; opacity: 1; background: #2f9e63; }

/* ─── composizione ───────────────────────────────────────────────────────── */

.composizione { border-top: 1px solid var(--linea); padding: 1rem var(--gutter) 1.25rem; }

#input {
  width: 100%; font: inherit; font-size: .91rem; line-height: 1.6;
  padding: .75rem .9rem; color: inherit;
  background: var(--carta-sotto);
  border: 1px solid transparent; border-radius: var(--curva);
  resize: vertical; min-height: 5.2rem;
  transition: background-color .2s var(--molla), border-color .2s var(--molla), box-shadow .2s var(--molla);
}
#input::placeholder { color: var(--grigio-chiaro); }
#input:focus {
  outline: none; background: var(--carta);
  border-color: var(--segno);
  box-shadow: 0 0 0 3px var(--segno-tinta);
}

.barra { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: .7rem; }
.conteggio { margin: .55rem 0 0; font-size: .75rem; color: var(--grigio-chiaro); font-variant-numeric: tabular-nums; }

.spunte { display: flex; flex-direction: column; gap: .25rem; }
.spunta {
  display: flex; align-items: center; gap: .45rem;
  font-size: .79rem; color: var(--grigio);
  cursor: pointer; user-select: none;
}
.spunta input { accent-color: var(--segno); margin: 0; }
.spunta:hover { color: var(--inchiostro); }

/* ─── foto del cliente ────────────────────────────────────────────────── */

.foto-riga { display: flex; align-items: center; gap: .7rem; margin-top: .7rem; flex-wrap: wrap; }

.carica {
  font-size: .79rem; color: var(--segno);
  border: 1px dashed var(--linea); border-radius: var(--curva);
  padding: .38rem .7rem; cursor: pointer;
  transition: border-color .2s var(--molla), background-color .2s var(--molla);
}
.carica:hover { border-color: var(--segno); background: var(--segno-tinta); }
.carica:focus-within { outline: 2px solid var(--segno); outline-offset: 2px; }

.aperto {
  font-size: .78rem; color: var(--segno);
  background: var(--segno-tinta);
  padding: .3rem .6rem; border-radius: var(--curva);
}

.provini { display: flex; gap: .35rem; flex-wrap: wrap; }
.provino {
  position: relative; width: 40px; height: 40px;
  border-radius: 3px; overflow: hidden;
  border: 1px solid var(--linea);
  animation: entra .3s var(--molla) backwards;
}
.provino img { width: 100%; height: 100%; object-fit: cover; display: block; }
.provino button {
  position: absolute; inset: 0;
  border: 0; border-radius: 0; padding: 0;
  background: rgba(20,22,26,.72); color: #fff;
  font-size: .95rem; line-height: 1;
  opacity: 0; transition: opacity .16s var(--molla);
}
.provino:hover button, .provino button:focus-visible { opacity: 1; }

/* ─── palco ──────────────────────────────────────────────────────────────── */

.anteprima { display: flex; flex-direction: column; min-width: 0; background: var(--grafite); }

.strumenti {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; flex-wrap: wrap;
  padding: .85rem 1.3rem;
  border-bottom: 1px solid var(--linea-scura);
}
.viste, .azioni { display: flex; gap: .35rem; }

.palco {
  flex: 1; display: flex; align-items: stretch; justify-content: center;
  padding: 1.6rem; overflow: hidden; position: relative;
}

/* alone appena percettibile dietro l'anteprima */
.palco::before {
  content: "";
  position: absolute; inset: 12% 18%;
  background: radial-gradient(ellipse at center, rgba(42,62,199,.14), transparent 68%);
  filter: blur(42px);
  pointer-events: none;
}

#telaio {
  position: relative;
  width: 100%; height: 100%;
  border: 0; background: #fff; border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0,0,0,.45), 0 22px 60px -14px rgba(0,0,0,.6);
  display: none;
  transition: width .45s var(--molla);
}
#telaio.visibile { display: block; }
#telaio.arriva { animation: monta .7s var(--molla); }
@keyframes monta {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

.attesa {
  align-self: center; position: relative;
  max-width: 26ch; text-align: center;
  color: #62676f; font-size: .87rem; line-height: 1.6;
}

@media (max-width: 940px) {
  :root { --gutter: 1.15rem; }
  .colonne { grid-template-columns: 1fr; grid-template-rows: minmax(0,1fr) minmax(0,1fr); }
  .chat { border-bottom: 1px solid var(--linea-scura); }
  .palco { padding: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .flusso { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}