:root {
  --notte: #082231;
  --notte-2: #0e2e40;
  --notte-3: #163b50;
  --rame: #be8a68;
  --rame-scuro: #a5734f;
  --rosa: #ebbaa5;
  --crema: #fff8f2;
  --testo-tenue: rgba(255, 248, 242, .72);
  --bordo: rgba(235, 186, 165, .22);
  --ombra: 0 10px 30px rgba(0, 0, 0, .28);
  --raggio: 18px;
  --titoli: "Cormorant Garamond", Georgia, serif;
  --testo: "Outfit", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--notte);
  color: var(--crema);
  font-family: var(--testo);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--rosa); }
button { font-family: inherit; cursor: pointer; }

.app { max-width: 640px; margin: 0 auto; min-height: 100%; display: flex; flex-direction: column; }

/* Testata */
.testata {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px;
  background: rgba(8, 34, 49, .92);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--bordo);
}
.testata img { height: 62px; width: auto; display: block; }
.testata .marchio { font-family: var(--titoli); font-size: 22px; letter-spacing: .5px; }
.icona-btn {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: transparent; color: var(--crema);
  border: 1px solid var(--bordo);
}
.icona-btn[aria-pressed="true"] { background: var(--rame); border-color: var(--rame); color: var(--notte); }
.icona-btn svg { width: 20px; height: 20px; }

/* Benvenuto */
.benvenuto {
  position: relative; overflow: hidden;
  margin: 16px; border-radius: 22px;
  padding: 26px 20px 20px;
  background: var(--notte-2);
  border: 1px solid var(--bordo);
}
.benvenuto .sopratitolo { color: var(--rosa); font-size: 13px; letter-spacing: 2px; text-transform: uppercase; }
.benvenuto h1 { font-family: var(--titoli); font-weight: 600; font-size: 38px; line-height: 1.05; margin: 6px 0 10px; }
.benvenuto p { margin: 0 0 16px; color: var(--testo-tenue); }
.orari { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.pillola {
  font-size: 13px; padding: 5px 11px; border-radius: 999px;
  background: rgba(255,248,242,.1); border: 1px solid var(--bordo);
}

.wifi {
  display: flex; align-items: center; gap: 14px;
  padding: 14px; border-radius: 14px;
  background: rgba(8,34,49,.75); border: 1px solid var(--rame);
}
.wifi .simbolo { width: 42px; height: 42px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--rame); color: var(--notte); }
.wifi .dati { flex: 1; min-width: 0; }
.wifi .etichetta { font-size: 12px; color: var(--rosa); text-transform: uppercase; letter-spacing: 1.5px; }
.wifi #wifi-rete { font-size: 14px; white-space: nowrap; }
.wifi .password { font-family: ui-monospace, Menlo, monospace; font-size: 15px; word-break: break-all; }
.wifi button {
  flex: none; padding: 9px 14px; border-radius: 10px; border: 0;
  background: var(--crema); color: var(--notte); font-weight: 600; font-size: 14px;
}

/* Pulsanti rapidi */
.rapidi {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  padding: 0 16px 6px;
}
.rapido {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 92px; padding: 10px 4px; border-radius: 16px;
  background: transparent; color: var(--crema);
  border: 1px solid var(--bordo); font-size: 12.5px; font-weight: 400; letter-spacing: .2px; text-align: center; line-height: 1.2;
  transition: transform .15s, border-color .15s;
}
.rapido:active { transform: scale(.97); }
.rapido:hover { border-color: var(--rame); }
.rapido .icona { width: 38px; height: 38px; color: var(--rame); display: block; }
.rapido .icona svg { width: 100%; height: 100%; }
.rapido.evidenza { border-color: var(--rame); background: rgba(190,138,104,.1); }

/* Chat */
.chat { flex: 1; padding: 14px 16px 8px; display: flex; flex-direction: column; gap: 12px; }
.msg { display: flex; gap: 10px; align-items: flex-end; max-width: 100%; }
.msg .bolla {
  padding: 11px 14px; border-radius: 18px; max-width: 86%;
  overflow-wrap: anywhere;
}
.msg.sole .bolla { background: var(--notte-2); border: 1px solid var(--bordo); border-bottom-left-radius: 6px; }
.msg.ospite { justify-content: flex-end; }
.msg.ospite .bolla { background: var(--rosa); color: var(--notte); border-bottom-right-radius: 6px; }
.avatar { width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--rame); display: grid; place-items: center; }
.avatar svg { width: 20px; height: 20px; color: var(--notte); }
.bolla p { margin: 0 0 8px; } .bolla p:last-child { margin: 0; }
.bolla ul { margin: 4px 0 8px; padding-left: 20px; }
.bolla strong { color: var(--rosa); }
.msg.ospite .bolla strong { color: var(--notte); }
.bolla em { color: var(--testo-tenue); }
.sta-scrivendo span { display: inline-block; width: 7px; height: 7px; margin: 0 2px; border-radius: 50%; background: var(--rosa); animation: salta 1.2s infinite; }
.sta-scrivendo span:nth-child(2) { animation-delay: .15s; } .sta-scrivendo span:nth-child(3) { animation-delay: .3s; }
@keyframes salta { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-4px); } }

.azioni-msg { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 0 42px; }

/* Schede luoghi */
.schede { display: flex; flex-direction: column; gap: 12px; }
.chat .schede { margin-left: 42px; }
.scheda {
  background: var(--notte-2); border: 1px solid var(--bordo); border-radius: var(--raggio);
  padding: 14px 16px;
}
.scheda .riga-titolo { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.scheda h3 { font-family: var(--titoli); font-size: 22px; font-weight: 600; margin: 0; line-height: 1.15; }
.scheda .tipo { font-size: 13px; color: var(--rosa); margin: 2px 0 6px; }
.scheda .descr { margin: 0 0 8px; color: var(--testo-tenue); font-size: 15px; }
.scheda .indirizzo { font-size: 13px; color: var(--testo-tenue); display: flex; gap: 6px; margin-bottom: 10px; }
.scheda .prezzo { font-weight: 600; color: var(--crema); margin: 0 0 4px; }
.etichetta-nota { display: inline-block; margin-bottom: 6px; font-size: 11px; padding: 3px 8px; border-radius: 999px; background: rgba(190,138,104,.18); color: var(--rosa); border: 1px solid rgba(190,138,104,.45); white-space: nowrap; }
.bottoni { display: flex; flex-wrap: wrap; gap: 8px; }
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px; border-radius: 999px; font-size: 14px; font-weight: 500;
  text-decoration: none; border: 1px solid var(--rame); color: var(--crema); background: transparent;
}
.btn.pieno { background: var(--rame); color: var(--notte); }
.btn.wa { background: #25d366; border-color: #25d366; color: #06301a; }
.btn svg { width: 16px; height: 16px; }

/* Barra di scrittura */
.scrivi {
  position: sticky; bottom: 0; z-index: 15;
  display: flex; gap: 8px; align-items: flex-end;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(8, 34, 49, .96);
  border-top: 1px solid var(--bordo);
}
.scrivi textarea {
  flex: 1; resize: none; min-height: 44px; max-height: 130px;
  padding: 11px 14px; border-radius: 22px;
  border: 1px solid var(--bordo); background: var(--notte-2); color: var(--crema);
  font: inherit; outline: none;
}
.scrivi textarea:focus { border-color: var(--rame); }
.scrivi textarea::placeholder { color: rgba(255,248,242,.45); }
.tondo { width: 44px; height: 44px; flex: none; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--rame); color: var(--notte); }
.tondo.secondario { background: var(--notte-2); color: var(--crema); border: 1px solid var(--bordo); }
.tondo.ascolta { background: var(--rosa); color: var(--notte); animation: pulsa 1.2s infinite; }
@keyframes pulsa { 50% { box-shadow: 0 0 0 8px rgba(235,186,165,.2); } }
.tondo svg { width: 20px; height: 20px; }
.tondo:disabled { opacity: .5; }

.avviso-privacy { font-size: 12px; color: rgba(255,248,242,.5); text-align: center; padding: 4px 16px 10px; }

/* Pannello a scomparsa */
.velo { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 40; opacity: 0; pointer-events: none; transition: opacity .2s; }
.velo.aperto { opacity: 1; pointer-events: auto; }
.pannello {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  max-width: 640px; margin: 0 auto; max-height: 88vh;
  display: flex; flex-direction: column;
  background: var(--notte); border-radius: 24px 24px 0 0; border-top: 1px solid var(--rame);
  transform: translateY(100%); transition: transform .25s ease;
  box-shadow: 0 -10px 40px rgba(0,0,0,.4);
}
.pannello.aperto { transform: translateY(0); }
.pannello header { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 10px; }
.pannello header h2 { font-family: var(--titoli); font-size: 30px; font-weight: 600; margin: 0; }
.pannello .contenuto { overflow-y: auto; padding: 0 16px calc(24px + env(safe-area-inset-bottom)); }
.pannello .gruppo { font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--rosa); margin: 14px 0 8px; }

/* Modulo extra */
.modulo { display: grid; gap: 10px; margin-top: 12px; }
.modulo label { font-size: 13px; color: var(--testo-tenue); display: grid; gap: 4px; }
.modulo input, .modulo textarea {
  font: inherit; color: var(--crema); background: var(--notte-2);
  border: 1px solid var(--bordo); border-radius: 12px; padding: 10px 12px; width: 100%;
}
.modulo .due { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.modulo input:focus, .modulo textarea:focus { outline: none; border-color: var(--rame); }
.esito { padding: 12px 14px; border-radius: 14px; background: rgba(190,138,104,.15); border: 1px solid var(--rame); }

.calendario { width: 100%; border-collapse: collapse; font-size: 14px; }
.calendario td { padding: 7px 4px; border-bottom: 1px solid var(--bordo); vertical-align: top; }
.calendario td:first-child { color: var(--rosa); width: 46px; font-weight: 600; }
.domande-pronte { display: flex; flex-wrap: wrap; gap: 8px; }

.toast { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); background: var(--crema); color: var(--notte); padding: 10px 16px; border-radius: 999px; font-size: 14px; z-index: 60; opacity: 0; transition: opacity .2s; pointer-events: none; }
.toast.visibile { opacity: 1; }

@media (min-width: 560px) {
  .rapidi { grid-template-columns: repeat(8, 1fr); }
  .benvenuto { padding: 40px 28px 24px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* Raccolta differenziata */
.nota-raccolta { margin: 0 0 10px; color: var(--testo-tenue); font-size: 14px; }
.orari-raccolta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.orari-raccolta div { border: 1px solid var(--bordo); border-radius: 12px; padding: 8px 10px; display: grid; font-size: 13px; }
.orari-raccolta b { color: var(--rosa); font-weight: 500; }
.orari-raccolta span { font-size: 16px; }
.calendario th { text-align: left; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; color: var(--rosa); padding: 6px 4px; border-bottom: 1px solid var(--rame); }
.calendario td.piccolo { font-size: 12.5px; color: var(--testo-tenue); }
.pallino { display: inline-block; width: 14px; height: 14px; border-radius: 50%; margin-right: 4px; vertical-align: -2px; border: 1px solid rgba(255,248,242,.35); }
.bidone { border: 1px solid var(--bordo); border-radius: 12px; padding: 8px 12px; margin-top: 8px; font-size: 14px; }
.bidone summary { cursor: pointer; }
.bidone p { margin: 6px 0 0; color: var(--testo-tenue); }
.bidone b { color: var(--crema); font-weight: 500; }
.pannello .etichetta-nota { display: none; } /* nel pannello c'è già il titolo del gruppo */

/* Partner */
.etichetta-partner { display: inline-block; margin: 0 0 6px 6px; font-size: 11px; padding: 3px 9px; border-radius: 999px; background: var(--rame); color: var(--notte); font-weight: 500; }
.pannello .etichetta-partner { margin-left: 0; }
.vantaggio { margin: 0 0 10px; padding: 9px 12px; border-radius: 12px; border: 1px dashed var(--rame); background: rgba(190,138,104,.1); font-size: 14px; display: grid; gap: 2px; }
.vantaggio b { color: var(--rosa); letter-spacing: 1px; }