/* The porta's pages (C-2546): readable on a phone first, centred on a computer. */
:root {
  --sfondo: #f5f4f0;
  --carta: #ffffff;
  --testo: #1c1b19;
  --tenue: #66635c;
  --bordo: #dedad2;
  --mio: #e5f2ef;
  --accento: #0f766e;
  --su-accento: #ffffff;
  --errore: #b42318;
  --largo: 760px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --sfondo: #151514;
    --carta: #1f1f1d;
    --testo: #ecebe6;
    --tenue: #a3a098;
    --bordo: #36352f;
    --mio: #16302c;
    --accento: #2dd4bf;
    --su-accento: #062723;
    --errore: #f97066;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body {
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  background: var(--sfondo);
  color: var(--testo);
  -webkit-text-size-adjust: 100%;
}
h1 { font-size: 22px; line-height: 1.25; margin: 0 0 12px; }
p { margin: 0 0 12px; }

button {
  font: inherit;
  font-weight: 600;
  border-radius: 10px;
  padding: 10px 16px;
  cursor: pointer;
  min-height: 44px;
}
button:disabled { opacity: .55; cursor: default; }
.primario { border: 0; background: var(--accento); color: var(--su-accento); }
.secondario { border: 1px solid var(--bordo); background: transparent; color: var(--testo); padding: 6px 12px; min-height: 36px; font-size: 14px; }
.errore { color: var(--errore); }
.errore:empty { display: none; }
.piccolo { font-size: 14px; color: var(--tenue); margin-top: 16px; }
.nascosto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* invite and front page: one card */
.scheda {
  max-width: 480px;
  margin: 10vh auto 0;
  padding: 24px;
  background: var(--carta);
  border: 1px solid var(--bordo);
  border-radius: 16px;
}
@media (max-width: 520px) {
  .scheda { margin: 16px; padding: 20px; }
}

/* the room */
body[data-pagina="stanza"] { display: flex; flex-direction: column; height: 100dvh; }
.testata {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px max(16px, calc((100% - var(--largo)) / 2));
  padding-top: max(10px, env(safe-area-inset-top));
  background: var(--carta);
  border-bottom: 1px solid var(--bordo);
}
.titoli { flex: 1; min-width: 0; }
.titolo { font-weight: 650; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sotto { color: var(--tenue); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px max(16px, calc((100% - var(--largo)) / 2));
}
.entra { text-align: center; }
.vuoto { color: var(--tenue); text-align: center; margin: auto 0; }

.msg {
  align-self: flex-start;
  max-width: min(85%, 620px);
  background: var(--carta);
  border: 1px solid var(--bordo);
  border-left: 4px solid var(--colore, var(--bordo));
  border-radius: 12px;
  padding: 8px 12px;
}
.msg.mio {
  align-self: flex-end;
  background: var(--mio);
  border-left-width: 1px;
  border-right: 4px solid var(--colore, var(--accento));
}
.msg .testa { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; font-size: 13px; color: var(--tenue); }
.msg .nome { font-weight: 650; color: var(--testo); }
.msg .corpo { white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 2px; }
.msg .stato { font-size: 12px; color: var(--tenue); text-align: right; margin-top: 4px; }
.msg .stato.consegnato { color: var(--accento); }
.msg .stato.fallito { color: var(--errore); }

.scrivi {
  border-top: 1px solid var(--bordo);
  background: var(--carta);
  padding: 10px max(16px, calc((100% - var(--largo)) / 2));
  padding-bottom: max(10px, env(safe-area-inset-bottom));
}
.riga { display: flex; gap: 8px; align-items: flex-end; }
textarea {
  flex: 1;
  min-width: 0;
  resize: none;
  font: inherit;
  font-size: 16px;
  line-height: 1.4;
  padding: 10px 12px;
  border: 1px solid var(--bordo);
  border-radius: 10px;
  background: var(--sfondo);
  color: var(--testo);
  min-height: 44px;
  max-height: 40vh;
}
textarea:focus { outline: 2px solid var(--accento); outline-offset: 0; }
.nota { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--tenue); margin: 6px 0 0; }
.nota.errore { color: var(--errore); }
#conta.oltre { color: var(--errore); font-weight: 600; }