/* =========================================================================
   Assistente in chat + area riservata.
   Usa le stesse variabili di sito.css: nessun colore nuovo.
   ========================================================================= */

.visivamente-nascosto {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- bolla ---------- */

.chat-bolla {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 50;
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .8rem 1.25rem; border: 0; border-radius: 999px;
  background: var(--accento); color: #fff;
  font: inherit; font-weight: 650; font-size: .95rem; line-height: 1;
  box-shadow: var(--ombra-m); cursor: pointer;
  transition: transform .16s ease, background-color .16s ease;
}
.chat-bolla:hover { background: var(--accento-scuro); transform: translateY(-2px); }
.chat-bolla[aria-expanded="true"] { display: none; }

@media (max-width: 520px) {
  .chat-bolla span { display: none; }
  .chat-bolla { padding: .95rem; right: 1rem; bottom: 1rem; }
}

/* ---------- riquadro ---------- */

/* Senza questa riga il display:flex qui sotto vince sull attributo hidden
   e la chat resta sempre aperta. */
.chat-riquadro[hidden] { display: none; }

.chat-riquadro {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 51;
  width: min(calc(100vw - 2rem), 400px);
  max-height: min(calc(100vh - 2.5rem), 640px);
  display: flex; flex-direction: column;
  background: var(--carta); color: var(--testo);
  border: 1px solid var(--bordo); border-radius: var(--raggio);
  box-shadow: var(--ombra-l); overflow: hidden;
}

.chat-testa {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .95rem 1.1rem; background: var(--fondo-forte); color: var(--su-scuro);
}
.chat-testa strong { display: block; font-size: .98rem; }
.chat-nota { font-size: .76rem; opacity: .72; }

.chat-chiudi {
  display: grid; place-items: center; width: 32px; height: 32px; flex: none;
  border: 0; border-radius: 999px; background: rgba(255,255,255,.14);
  color: inherit; cursor: pointer;
}
.chat-chiudi:hover { background: rgba(255,255,255,.26); }

.chat-corpo {
  flex: 1; min-height: 220px; overflow-y: auto;
  padding: 1.1rem; display: flex; flex-direction: column; gap: .6rem;
  background: var(--sfondo);
}

.chat-msg {
  max-width: 86%; padding: .7rem .9rem; border-radius: var(--raggio);
  font-size: .93rem; line-height: 1.5; white-space: normal;
}
.chat-assistente {
  align-self: flex-start; background: var(--carta);
  border: 1px solid var(--bordo); border-bottom-left-radius: 4px;
}
.chat-persona {
  align-self: flex-end; background: var(--accento); color: #fff;
  border-bottom-right-radius: 4px;
}

.chat-puntini { display: flex; gap: 5px; align-items: center; padding: .85rem .9rem; }
.chat-puntini span {
  width: 6px; height: 6px; border-radius: 999px; background: var(--testo-tenue);
  animation: chat-salta 1.1s infinite ease-in-out;
}
.chat-puntini span:nth-child(2) { animation-delay: .16s; }
.chat-puntini span:nth-child(3) { animation-delay: .32s; }
@keyframes chat-salta {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

.chat-piede {
  display: flex; align-items: flex-end; gap: .5rem;
  padding: .7rem .8rem; border-top: 1px solid var(--bordo); background: var(--carta);
}
.chat-piede textarea {
  flex: 1; resize: none; max-height: 120px;
  padding: .6rem .75rem; font: inherit; font-size: .93rem; line-height: 1.45;
  color: var(--testo); background: var(--sfondo);
  border: 1.5px solid var(--bordo); border-radius: var(--raggio-s);
}
.chat-piede textarea:focus { outline: none; border-color: var(--accento); }
.chat-piede button[type="submit"] {
  display: grid; place-items: center; width: 40px; height: 40px; flex: none;
  border: 0; border-radius: 999px; background: var(--accento); color: #fff; cursor: pointer;
}
.chat-piede button[type="submit"]:hover { background: var(--accento-scuro); }
#chat-esca { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.chat-avvertenza {
  margin: 0; padding: .55rem .9rem .75rem;
  font-size: .74rem; line-height: 1.4; color: var(--testo-tenue);
  background: var(--carta); border-top: 1px solid var(--bordo);
}

/* ---------- area riservata ---------- */

.area-menu { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.2rem; }
.area-menu a {
  padding: .5rem .95rem; border-radius: 999px; text-decoration: none;
  font-size: .92rem; font-weight: 600; color: var(--testo-medio);
  border: 1.5px solid var(--bordo);
}
.area-menu a:hover { border-color: var(--bordo-forte); color: var(--testo); }
.area-menu a[aria-current="page"] { background: var(--accento); border-color: var(--accento); color: #fff; }

.area-riquadri { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.riquadro {
  display: block; padding: 1.4rem 1.5rem; text-decoration: none; color: inherit;
  background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio);
  box-shadow: var(--ombra-s); transition: transform .16s ease, box-shadow .16s ease;
}
.riquadro:hover { transform: translateY(-2px); box-shadow: var(--ombra-m); }
.riquadro-acceso { border-color: var(--accento); background: var(--accento-tenue); }
.riquadro-numero {
  display: block; font-size: 2.2rem; font-weight: 800; letter-spacing: -.03em;
  line-height: 1; color: var(--indaco);
}
.riquadro-acceso .riquadro-numero { color: var(--accento-scuro); }
.riquadro-testo { display: block; margin-top: .45rem; font-size: .92rem; color: var(--testo-medio); }

.tabella { display: grid; gap: .5rem; }
.riga {
  display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem; align-items: center;
  padding: .9rem 1.1rem; text-decoration: none; color: inherit;
  background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio-s);
}
.riga:hover { border-color: var(--bordo-forte); }
.riga-principale { font-weight: 650; }
.riga-nota { grid-column: 1; font-size: .84rem; color: var(--testo-tenue); }
.riga .pillola { grid-column: 2; grid-row: 1 / span 2; }

.filtri { display: flex; flex-wrap: wrap; gap: .4rem; }
.filtro {
  padding: .4rem .85rem; border-radius: 999px; text-decoration: none;
  font-size: .86rem; font-weight: 600; color: var(--testo-medio);
  border: 1.5px solid var(--bordo);
}
.filtro.acceso { background: var(--indaco-tenue); border-color: var(--indaco); color: var(--indaco); }

.aiuto { font-size: .82rem; color: var(--testo-tenue); line-height: 1.45; }
.campo-spunta { align-self: end; }

.guida-passi { margin: 0; padding-left: 1.2rem; display: grid; gap: .6rem; font-size: .92rem; color: var(--testo-medio); }
.guida-passi strong { color: var(--testo); }

.foto-elenco { display: grid; gap: .8rem; }
.foto-voce { display: grid; grid-template-columns: 84px 1fr; gap: .8rem; align-items: center; }
.foto-voce img { width: 84px; height: 62px; object-fit: cover; border-radius: var(--raggio-s); border: 1px solid var(--bordo); }
.collegamento-pericolo {
  margin-top: .3rem; padding: 0; border: 0; background: none;
  color: var(--accento-scuro); font: inherit; font-size: .84rem; font-weight: 600;
  text-decoration: underline; cursor: pointer;
}

/* ---------- foto nel retro del sito ---------- */

.copertina-attuale { display: grid; grid-template-columns: 150px 1fr; gap: 1rem; align-items: start; }
.copertina-attuale img {
  width: 150px; aspect-ratio: 16 / 10; object-fit: cover;
  border-radius: var(--raggio-s); border: 1px solid var(--bordo);
}
.copertina-attuale p { margin: 0 0 .5rem; color: var(--testo-medio); }
@media (max-width: 520px) { .copertina-attuale { grid-template-columns: 1fr; } }

.foto-voce img { transition: transform .15s ease; }
.foto-voce a:hover img { transform: scale(1.04); }

.riga-con-foto { grid-template-columns: 64px 1fr auto; }
.riga-con-foto .riga-principale { grid-column: 2; }
.riga-con-foto .riga-nota { grid-column: 2; }
.riga-con-foto .pillola { grid-column: 3; }
.riga-miniatura {
  grid-column: 1; grid-row: 1 / span 2;
  width: 64px; height: 46px; object-fit: cover;
  border-radius: 6px; border: 1px solid var(--bordo);
}
.riga-senza-foto {
  display: grid; place-items: center; background: var(--sfondo-alt);
  color: var(--testo-tenue); font-size: .62rem; letter-spacing: .06em; text-transform: uppercase;
}