/* Plus Jakarta Sans (SIL OFL 1.1, fonts/OFL.txt): servito dal nostro dominio, nessun font da CDN esterne. */
@font-face {
  font-family: "Plus Jakarta Sans"; src: url("fonts/plus-jakarta-sans.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
}
:root {
  --bg: #ffffff; --fg: #1d2330; --muted: #667085; --line: #e3e6ec; --accent: #e5484d; --on-accent: #fff;
  --thread: #0f8b8d; --on-thread: #fff; --unread: #d97706; --map-area: #64748b; --map-precision: #334155; --me: #2563eb; --danger: #b42318; --panel-w: 380px; --room: #7c3aed; --new: #fff4d6; --new-line: #f59e0b;
  /* Margini sicuri per notch, isola dinamica e barra home (iPhone) o barre di sistema (Android). */
  --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px);
  --gap: 8px; --touch: 36px; --badge: #dc2626; --brand: #e5484d;
  /* Il pannello parte sotto la barra superiore, che occupa tutta la larghezza. */
  --bar-bottom: calc(2 * var(--gap) + var(--safe-top) + var(--touch) + 14px);
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color-scheme: light dark;
  -webkit-text-size-adjust: 100%;
}
/* Tema scuro: data-theme lo mette theme.js (automatico dal dispositivo o scelto nel menu utente). */
:root[data-theme=light] { color-scheme: light; }
:root[data-theme=dark] { color-scheme: dark; }
:root[data-theme=dark] {
  --brand: #ff7a72; --bg: #161a22; --fg: #e6e9ef; --muted: #98a2b3; --line: #2a303c; --accent: #ff7a72; --on-accent: #2a0d0c; --thread: #2dd4bf; --on-thread: #062a2b; --unread: #fbbf24; --map-area: #94a3b8; --map-precision: #cbd5e1; --me: #60a5fa; --new: #3a2e12; --new-line: #fbbf24; --room: #a78bfa;
}
/* Sui dispositivi touch i bersagli sono almeno 44 px (linee guida Apple e Android). */
@media (pointer: coarse) { :root { --touch: 44px; } }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { font-weight: 500; margin: 0; height: 100%; background: var(--bg); color: var(--fg); overscroll-behavior: none; }
#map { position: fixed; inset: 0; }
button, .button, input, select, textarea { font: inherit; color: inherit; }
button, .button {
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; cursor: pointer;
  text-decoration: none; text-align: center; min-height: var(--touch); touch-action: manipulation;
  display: inline-flex; align-items: center; justify-content: center;
}
button[type=submit], .button.primary, button.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
button.toggle.on { background: var(--accent); color: var(--on-accent); }
/* 16 px negli input: sotto questa soglia Safari iOS fa zoom sulla pagina al tocco. */
input, select, textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); font-size: 16px; }
input:not([type=checkbox]):not([type=radio]), select { min-height: var(--touch); }
input[type=checkbox], input[type=radio] { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); }
.muted { color: var(--muted); font-size: 0.9em; }
.error { color: var(--danger); margin: 0; }
.error:empty { display: none; }

/* ---------- Barra superiore */
#topbar {
  position: fixed; top: calc(var(--gap) + var(--safe-top)); left: calc(var(--gap) + var(--safe-left)); right: calc(var(--gap) + var(--safe-right));
  display: flex; gap: 8px; align-items: center; z-index: 5;
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px;
}
/* Logo: indicatore corallo + nome, "Chat" nel colore del logo. */
.brand { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-weight: 800; letter-spacing: -0.02em; }
.brand img { display: block; flex: none; }
.brand-name span { color: var(--brand); }
#topbar .brand { font-size: 1.1em; margin-right: auto; }
h1.brand { gap: 10px; font-size: 1.9em; }
/* Stato della posizione: solo un'icona. Mirino blu (come il punto sulla mappa) se la posizione arriva, grigio che pulsa mentre la cerca,
   triangolo di avviso se è negata o non disponibile (toccandolo si apre come attivarla). */
#pos-status {
  flex: none; width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; border-radius: 50%; display: grid; place-items: center;
  --c: var(--muted); color: var(--c); border: 1.5px solid currentColor; background: var(--bg);
}
#pos-status svg { width: 24px; height: 24px; display: block; }
#pos-status .icon-warn { display: none; }
#pos-status[data-state=on] { --c: var(--me); }
#pos-status[data-state=off], #pos-status[data-state=error] { --c: #d97706; border-color: currentColor; background: color-mix(in srgb, #f59e0b 18%, var(--bg)); }
#pos-status[data-state=off] .icon-on, #pos-status[data-state=error] .icon-on { display: none; }
#pos-status[data-state=off] .icon-warn, #pos-status[data-state=error] .icon-warn { display: block; }
#pos-status[data-state=wait] svg { animation: pulse 1s ease-in-out infinite alternate; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@keyframes pulse { to { opacity: 0.2; } }

/* Come riattivare la posizione: riquadro sotto la barra superiore. */
.popover {
  position: fixed; z-index: 7; top: calc(64px + var(--safe-top)); left: calc(var(--gap) + var(--safe-left));
  width: min(420px, calc(100vw - 2 * var(--gap) - var(--safe-left) - var(--safe-right)));
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; box-shadow: 0 6px 20px rgb(0 0 0 / 20%);
}
.popover ol { margin: 8px 0 12px; padding-left: 20px; display: grid; gap: 6px; font-size: 0.92em; }
/* Si apre sopra i pulsanti in basso, dove sta l'icona della posizione. */
#gps-help { top: auto; bottom: calc(92px + var(--safe-bottom)); left: calc((100vw - var(--panel-w) - 16px - var(--safe-right)) / 2); transform: translateX(-50%); }
[data-theme=dark] #pos-status[data-state=off], [data-theme=dark] #pos-status[data-state=error] { --c: #fbbf24; }
#topbar button { white-space: nowrap; }

/* ---------- Profilo: pulsante fisso in alto a destra, con il numero di notifiche da leggere */
#btn-profile {
  position: relative; flex: none; width: var(--touch); height: var(--touch); padding: 0; border-radius: 50%;
  background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 700;
}
.count {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
  background: var(--badge); color: #fff; font-size: 12px; font-weight: 700; line-height: 1;
}
#profile-badge { position: absolute; top: -7px; right: -9px; min-width: 18px; height: 18px; padding: 0 4px; font-size: 11px; border: 2px solid var(--bg); box-sizing: content-box; }
#profile-menu {
  left: auto; right: calc(var(--gap) + var(--safe-right)); top: calc(var(--bar-bottom) - var(--gap) + 4px);
  width: min(300px, calc(100vw - 2 * var(--gap) - var(--safe-left) - var(--safe-right))); padding: 6px; z-index: 9;
  display: flex; flex-direction: column;
}
#profile-menu .who { display: flex; gap: 10px; align-items: center; padding: 8px 8px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
#profile-menu .who .muted { font-size: 0.8em; }
.avatar {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: 1.1em;
}
#profile-menu [role=menuitem] { justify-content: space-between; border: 0; background: transparent; text-align: left; padding: 8px 10px; }
#profile-menu [role=menuitem]:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
#profile-menu .danger { color: var(--danger); border-top: 1px solid var(--line); border-radius: 0 0 6px 6px; margin-top: 4px; }

/* ---------- Pulsanti sulla mappa: Messaggi, + (nuovo messaggio) e stato della posizione */
#map-actions {
  position: fixed; z-index: 5; bottom: calc(24px + var(--safe-bottom)); display: flex; gap: 10px; align-items: center;
  left: calc((100vw - var(--panel-w) - 16px - var(--safe-right)) / 2); transform: translateX(-50%);
}
#map-actions button { border-radius: 999px; box-shadow: 0 2px 10px rgb(0 0 0 / 25%); font-weight: 600; }
#map-actions > button { flex: none; white-space: nowrap; }
#sheet-open { display: inline-flex; padding: 8px 18px; background: var(--bg); }
#sheet-open span { white-space: pre; }
#btn-new {
  /* Il + è disegnato (SVG): un carattere di testo non sta mai esattamente al centro. */
  width: 52px; height: 52px; padding: 0;
  background: var(--accent); color: var(--on-accent); border-color: var(--accent);
}
/* Intestazione delle viste aperte a parte (nuovo messaggio, notifiche): titolo e chiusura al posto delle schede. */
#view-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-shrink: 0;
  padding: 4px 4px 4px 14px; border-bottom: 1px solid var(--line); min-height: 48px;
}
#view-close { border: 0; background: transparent; color: var(--muted); font-size: 1.1em; width: 44px; }
.list li.notice.new { background: var(--new); box-shadow: inset 3px 0 0 var(--new-line); }
.badge.area { color: var(--thread); }
.badge.author { color: var(--accent); }
.badge.reply { color: #7c3aed; }
[data-theme=dark] .badge.reply { color: #a78bfa; }
#inbox-summary:empty { display: none; }
.inbox-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.inbox-head p { margin: 8px 0; }
#inbox-settings { margin: 4px auto 0; display: flex; }
#topbar button span { white-space: pre; }
#topbar #btn-profile span { white-space: normal; }
/* Zoom di OpenLayers sotto la barra superiore (solo dove è visibile: desktop e tablet). */
.ol-zoom.ol-zoom { top: calc(70px + var(--safe-top)); left: calc(8px + var(--safe-left)); }

/* ---------- Banner area affollata */
/* Posizione simulata (solo admin): una pillola viola nella barra in alto, finché è attiva. */
#sim-banner {
  margin-left: auto; display: flex; align-items: center; gap: 2px; white-space: nowrap; min-width: 0;
  padding: 2px 4px 2px 10px; border-radius: 999px; background: #7c3aed; color: #fff; font-size: 0.8em; font-weight: 600;
}
#sim-banner[hidden] { display: none; }
#sim-banner button.link { color: #fff; text-decoration: underline; min-height: 30px; padding: 0 6px; font-weight: 700; }
#sim-banner + #btn-profile { margin-left: 8px; }
@media (max-width: 420px) { body[data-sim] #topbar .brand-name { display: none; } }
#crowd-banner {
  position: fixed; top: calc(var(--bar-bottom) + 6px); left: calc((100vw - var(--panel-w) - 16px) / 2); transform: translateX(-50%); z-index: 5; max-width: calc(100vw - var(--panel-w) - 48px);
  background: var(--thread); color: var(--on-thread); padding: 8px 14px; border-radius: 999px; cursor: pointer; font-size: 0.9em;
  border: 0; min-height: var(--touch); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;
  box-shadow: 0 2px 8px rgb(0 0 0 / 20%);
}

@media (max-width: 380px) { #crowd-banner .more { display: none; } }
@media (max-width: 359px) { #topbar .brand-name { display: none; } }

/* ---------- Pannello laterale (desktop e tablet) */
#panel {
  position: fixed; top: var(--bar-bottom); right: calc(var(--gap) + var(--safe-right)); bottom: calc(var(--gap) + var(--safe-bottom));
  width: var(--panel-w); z-index: 5; display: flex; flex-direction: column;
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
}
#sheet-handle, #tabs #sheet-close { display: none; }
/* Pannello di controllo su computer: la tabella degli utenti ha bisogno di spazio, il pannello si allarga quasi a tutto schermo. */
@media (min-width: 761px) and (min-height: 501px) {
  body[data-view=admin] #panel { width: min(1180px, calc(100vw - 2 * var(--gap) - var(--safe-left) - var(--safe-right))); }
}
#tabs { display: flex; border-bottom: 1px solid var(--line); flex-shrink: 0; }
#tabs button { flex: 1; display: block; border: 0; border-radius: 0; padding: 10px 4px; background: transparent; min-height: 44px; white-space: nowrap; }
#tabs button.active { box-shadow: inset 0 -2px var(--accent); font-weight: 600; }
.tab { padding: 12px; overflow-y: auto; flex: 1; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
/* Barra di scorrimento sottile e discreta; lo spazio è riservato, così aprire la "i" non sposta il contenuto. */
.tab { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--muted) 45%, transparent) transparent; scrollbar-gutter: stable; }
.tab h3 { margin: 16px 0 8px; font-size: 1em; }

.list { list-style: none; margin: 0; padding: 0; }
.list li { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; overflow-wrap: anywhere; }
.list li.clickable { cursor: pointer; }
.list li.clickable:hover { border-color: var(--accent); }
.list li button { margin-left: auto; }
/* Messaggio aperto sul posto in "Qui": l'anteprima lascia il posto al testo intero, risposte e risposta sotto. */
#here-list li { position: relative; }
#here-list li > .preview { padding-right: 20px; }
#here-list li::after { content: ""; position: absolute; top: 15px; right: 12px; width: 7px; height: 7px; border: solid var(--muted); border-width: 0 2px 2px 0; transform: rotate(45deg); }
#here-list li.open::after { transform: rotate(-135deg); top: 18px; }
#here-list li.open { cursor: default; border-color: var(--accent); }
#here-list li.open > .preview { display: none; }
#here-list li.open > .meta { cursor: pointer; margin-top: 0; padding-right: 20px; }
#here-list li #thread { cursor: auto; }
#here-list li #thread button { margin-left: 0; }
#here-list li #thread .body { margin: 6px 0 4px; }
/* Pulsanti alti quanto un dito, centrati sulla prima riga del testo (21 px) invece che sotto. */
#here-list li #thread .message-actions { float: right; margin: calc((21px - var(--touch)) / 2) -8px 0 6px; }
#here-list li #thread h3 { clear: both; }
#here-list li #thread h3 { margin: 10px 0 4px; font-size: 0.9em; }
#here-list li #thread form { margin-top: 8px; }
.meta { color: var(--muted); font-size: 0.8em; display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
/* Nelle notifiche la riga è una sola (tipo · quando · azione): l'etichetta resta grande quanto il suo testo. */
.list li.notice .meta { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.meta-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-height: 20px; }
.meta-facts { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 0; }
.meta-facts > span + span::before { content: "·"; margin: 0 6px; }
.meta-facts .author { color: var(--fg); font-weight: 600; overflow-wrap: anywhere; }
.badge { display: inline-block; font-size: 0.75em; padding: 1px 6px; border-radius: 999px; border: 1px solid currentColor; }
.badge.thread { color: var(--thread); }
.badge.message { color: var(--accent); }
#selection-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.account { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }

form { display: flex; flex-direction: column; gap: 12px; }
form label { display: flex; flex-direction: column; gap: 4px; font-size: 0.9em; }
form label:has(input[type=checkbox]), fieldset label { flex-direction: row; align-items: center; gap: 8px; min-height: var(--touch); }
fieldset { border: 1px solid var(--line); border-radius: 8px; display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; }
form.inline { flex-direction: row; margin-top: 6px; }
form.inline input { flex: 1; min-width: 0; }

#thread .body { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 1.05em; margin: 10px 0; }
/* Risposte annidate come su Reddit: ogni livello rientra di poco, con la linea a sinistra. */
/* Linee come su Reddit: dal genitore scende una linea, ogni risposta ci si aggancia con una curva. */
#thread, #room-thread { --wire: color-mix(in srgb, var(--muted) 45%, transparent); }
:is(#thread, #room-thread) .replies.root { margin-top: 4px; }
:is(#thread, #room-thread) .replies:not(.flat) { margin-left: 10px; padding-left: 14px; }
:is(#thread, #room-thread) .replies:not(.flat) > .reply-node { position: relative; }
:is(#thread, #room-thread) .replies:not(.flat) > .reply-node::before {
  content: ""; position: absolute; left: -14px; top: 0; width: 12px; height: 20px;
  border-left: 2px solid var(--wire); border-bottom: 2px solid var(--wire); border-bottom-left-radius: 10px;
}
:is(#thread, #room-thread) .replies:not(.flat) > .reply-node:not(:last-child)::after {
  content: ""; position: absolute; left: -14px; top: 0; bottom: 0; border-left: 2px solid var(--wire);
}
:is(#thread, #room-thread) .reply { padding: 6px 8px; margin: 4px 0; border-radius: 8px; overflow-wrap: anywhere; }
:is(#thread, #room-thread) .reply > .reply-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 0.9em; }
:is(#thread, #room-thread) .reply.mine > .reply-head strong { color: var(--accent); }
:is(#thread, #room-thread) .reply > .reply-body { white-space: pre-wrap; margin: 2px 0; }
:is(#thread, #room-thread) .reply.new { background: var(--new); box-shadow: inset 3px 0 0 var(--new-line); }
:is(#thread, #room-thread) .reply-actions { display: flex; gap: 4px; margin-left: -6px; }
#thread form { margin-top: 12px; }
#thread form.reply-form.nested { margin-top: 4px; }
button.link { border: 0; background: none; color: var(--muted); padding: 2px 6px; white-space: nowrap; flex-shrink: 0; min-height: var(--touch); font-size: 0.85em; }
button.link:hover { color: var(--accent); }
.badge.new { color: var(--new-line); font-weight: 600; }

.overlay {
  position: fixed; inset: 0; display: grid; place-items: center; background: rgb(0 0 0 / 45%); z-index: 10;
  overflow-y: auto; padding: calc(16px + var(--safe-top)) 16px calc(16px + var(--safe-bottom));
}
.card { background: var(--bg); border-radius: 12px; padding: 24px; width: min(380px, 100%); }
.card h1 { margin: 0; }
.card form { gap: 10px; }
.row { display: flex; gap: 8px; }
.row > * { flex: 1; }

.short { display: none; }

/* ---------- Telefoni e schermi stretti: comandi compatti */
@media (max-width: 760px), (max-height: 500px) {
  .long { display: none; }
  .short { display: inline; }
  #topbar { padding: 4px 6px 4px 12px; gap: 6px; }
  /* Su touch lo zoom si fa con due dita: i pulsanti +/- occuperebbero spazio prezioso. */
  .ol-zoom { display: none; }
  .ol-attribution { font-size: 10px; }

  /* Pannello a scomparsa: chiuso resta solo un pulsante sulla mappa. */
  #tabs #sheet-close { display: block; flex: 0 0 44px; font-size: 1.1em; color: var(--muted); }
  body[data-sheet=closed] #panel { display: none; }
  #map-actions { left: 50%; bottom: calc(16px + var(--safe-bottom)); }
  #gps-help { left: 50%; bottom: calc(84px + var(--safe-bottom)); }
  body:not([data-sheet=closed]) #map-actions { display: none; }
  body[data-sheet=closed] #crowd-banner { top: auto; bottom: calc(84px + var(--safe-bottom)); left: 50%; max-width: calc(100vw - 32px); }
}

/* ---------- Telefono in verticale: il pannello diventa un foglio dal basso a tre altezze */
@media (max-width: 760px) and (min-height: 501px) {
  body { --sheet-h: 46dvh; }
  body[data-sheet=full] { --sheet-h: calc(100dvh - 70px - var(--safe-top)); }

  #panel {
    top: auto; left: 0; right: 0; bottom: 0; width: auto; height: var(--sheet-h);
    border-radius: 16px 16px 0 0; border-bottom: 0; padding-bottom: var(--safe-bottom);
    box-shadow: 0 -4px 16px rgb(0 0 0 / 15%); transition: height 0.2s ease;
  }
  body.kb-open #panel { bottom: var(--kb); height: min(var(--sheet-h), calc(100dvh - var(--kb) - 56px - var(--safe-top))); padding-bottom: 0; transition: none; }
  #sheet-handle {
    display: flex; width: 100%; min-height: 40px; border: 0; border-radius: 0; background: transparent; padding: 0;
    touch-action: none;
  }
  #sheet-handle::before { content: ""; width: 40px; height: 5px; border-radius: 3px; background: var(--line); }
  #tabs button { padding: 6px 2px; font-size: 0.95em; }
  #crowd-banner { top: auto; left: 50%; bottom: calc(var(--sheet-h) + 10px); max-width: calc(100vw - 32px); transition: bottom 0.2s ease; }
  body[data-sheet=full] #crowd-banner { display: none; }
  /* Attribuzione OSM sotto la barra, lontana dal foglio e dal banner (selettore doppio: batte .ol-uncollapsible). */
  /* In alto a destra c'è il filtro: l'attribuzione OSM ("i") va a sinistra. */
  .ol-attribution.ol-attribution { top: calc(68px + var(--safe-top)); bottom: auto; right: auto; left: calc(8px + var(--safe-left)); }
}

/* ---------- Telefono in orizzontale: pannello laterale stretto */
@media (max-height: 500px) {
  :root { --panel-w: min(340px, 46vw); --gap: 6px; }
  #topbar { top: calc(var(--gap) + var(--safe-top)); }
  #crowd-banner { top: auto; bottom: calc(10px + var(--safe-bottom)); left: calc((100vw - var(--panel-w)) / 2); max-width: calc(100vw - var(--panel-w) - 40px); }
  #tabs button { padding: 4px 2px; min-height: 40px; }
  .tab { padding: 10px; }
  .ol-attribution.ol-attribution { right: auto; bottom: auto; left: calc(8px + var(--safe-left)); top: calc(62px + var(--safe-top)); }
}
#compose-area:empty { display: none; }

/* ---------- Scrittura a passi */
.steps-head { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; }
.steps-bar { height: 4px; border-radius: 2px; background: var(--line); margin-top: -6px; overflow: hidden; }
#step-progress { display: block; height: 100%; background: var(--accent); transition: width 0.2s ease; }
.step { display: flex; flex-direction: column; gap: 12px; }
.steps-nav { display: flex; gap: 8px; }
.steps-nav > button { flex: 1; }
#compose-msg:empty { display: none; }
#radius-label { font-weight: 600; color: #7c3aed; }
[data-theme=dark] #radius-label { color: #a78bfa; }
input[type=range] { padding: 0; border: 0; accent-color: #7c3aed; min-height: var(--touch); }
.range-ends { display: flex; justify-content: space-between; margin-top: -6px; font-size: 0.85em; }
#compose { gap: 10px; }
#compose .step { gap: 10px; }
#compose .step > label:has(select) { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
#compose .step > label:has(select) select { width: auto; flex: 0 1 60%; }
/* Avanti e Indietro sempre in vista, anche se il passo scorre. */
.steps-nav { position: sticky; bottom: 0; background: var(--bg); padding: 8px 0 12px; margin-bottom: -12px; }
@media (max-width: 760px) and (min-height: 501px) {
  #sheet-handle { min-height: 22px; }
  #compose textarea { min-height: 72px; }
}
.steps-head { font-size: 0.95em; }
.steps-bar { height: 3px; }
#compose label.range { gap: 0; }
.range-ends { margin-top: -4px; font-size: 0.8em; }
#compose-area { margin: 0; }
/* Precisione: tre pulsanti affiancati invece di una lista. */
fieldset.segmented { border: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
fieldset.segmented legend { padding: 0; margin-bottom: 4px; font-size: 0.9em; }
fieldset.segmented label { justify-content: center; border: 1px solid var(--line); border-radius: 8px; gap: 0; cursor: pointer; }
fieldset.segmented input { position: absolute; opacity: 0; pointer-events: none; }
fieldset.segmented label:has(input:checked) { border-color: var(--accent); background: var(--accent); color: var(--on-accent); font-weight: 600; }
button.help { width: 22px; height: 22px; min-height: 0; padding: 0; margin-left: 4px; border-radius: 50%; font-size: 0.8em; line-height: 1; vertical-align: middle; }
.help-text { grid-column: 1 / -1; margin: 0; font-size: 0.85em; color: var(--muted); }
/* I miei messaggi che da qui non si raggiungono (o scaduti): in grigio, con il perché dietro al "?". */
.list li.readonly { background: color-mix(in srgb, var(--muted) 10%, var(--bg)); color: var(--muted); }
.list li.readonly .badge { filter: grayscale(1); }
.lock-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 2px 4px; margin-top: 6px; }
.lock-note > button.help { flex: none; margin: 0 0 0 4px; }
.lock-note .help-text { flex-basis: 100%; margin-top: 4px; }
.badge.readonly { color: var(--muted); }
.list li .preview.hidden-text { font-style: italic; }
fieldset.segmented label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 760px) and (min-height: 501px) {
  /* Scrivendo, il foglio occupa metà schermo esatta: l'altra metà resta alla mappa con l'anteprima. */
  body[data-sheet=half]:has(#tab-compose:not([hidden])) { --sheet-h: 50dvh; }
}

/* ---------- Notifiche */
#toast {
  position: fixed; z-index: 8; left: 50%; transform: translateX(-50%); top: calc(64px + var(--safe-top));
  max-width: calc(100vw - 32px); padding: 10px 16px; border-radius: 999px; border: 0; font-weight: 600;
  background: var(--fg); color: var(--bg); box-shadow: 0 4px 16px rgb(0 0 0 / 25%); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;
}
#tab-notify .row { margin: 8px 0; }
#tab-notify .row > [hidden] { display: none !important; }
#notify-prefs .limit { display: flex; align-items: center; gap: 8px; font-size: 0.9em; }
#notify-prefs .limit input { width: 72px; flex: none; }
#notify-prefs .limit select { width: auto; flex: 1; }
#notify-msg:empty { display: none; }
.list li.row-item { display: flex; align-items: center; gap: 8px; }
.list li.empty { border-style: dashed; }

/* ---------- Segnalazioni, moderazione e pannello di controllo */
#thread .message-actions { display: flex; justify-content: flex-end; margin: -6px -6px 0 0; }
button.link.report { font-size: 1em; color: var(--muted); }
button.link.report:hover { color: var(--danger); }
#thread form.report-form { gap: 8px; margin: 6px 0 10px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; }
.badge.moderation { color: var(--danger); }
#profile-menu .legal-links { padding: 8px 10px 4px; font-size: 0.8em; color: var(--muted); }
#profile-menu .legal-links a, .legal a { color: inherit; }
.card .legal { font-size: 0.8em; margin: 0; }

/* Primo accesso: come aggiungere l'app alla Home (iPhone) e permesso per le notifiche. */
.overlay.intro { z-index: 12; }
.intro .card { display: grid; gap: 10px; text-align: left; }
.intro h2 { margin: 0; font-size: 1.25em; }
.intro p { margin: 0; }
.intro-logo { display: block; }
.intro-steps { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.share-icon { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; vertical-align: middle;
  color: #0a84ff; background: color-mix(in srgb, #0a84ff 12%, transparent); }
.share-icon svg { width: 18px; height: 18px; }
.share-arrow { position: fixed; left: 50%; bottom: calc(6px + var(--safe-bottom)); transform: translateX(-50%); font-size: 44px; line-height: 1;
  color: #fff; text-shadow: 0 2px 8px rgb(0 0 0 / 50%); animation: nudge 0.9s ease-in-out infinite alternate; pointer-events: none; }
.share-arrow.top { left: auto; right: 70px; bottom: auto; top: calc(4px + var(--safe-top)); transform: none; animation-name: nudge-up; }
@keyframes nudge { to { transform: translate(-50%, 10px); } }
@keyframes nudge-up { to { transform: translateY(-10px); } }
.mod-item .mod-body { white-space: pre-wrap; margin: 4px 0; font-size: 1.02em; }
.mod-notes { margin: 6px 0 0; padding-left: 18px; font-size: 0.85em; color: var(--muted); }
.mod-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.list li .mod-actions button { margin-left: 0; }
.mod-actions button { font-size: 0.9em; padding: 4px 10px; }
button.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 50%, var(--line)); }
button.danger-fill { background: var(--danger); border-color: var(--danger); color: #fff; }
.mod-extra form { gap: 8px; margin-top: 8px; }
#mod-summary:empty, #admin-summary:empty { display: none; }
#admin-search select { width: auto; flex: none; }
.badge.status.active { color: #16a34a; }
.badge.status.disabled { color: var(--muted); }
.badge.status.banned { color: var(--danger); }
/* Pannello di controllo: tabella degli utenti con una sola fila di azioni per i selezionati. */
.admin-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 8px 0; position: sticky; top: 0; z-index: 1;
  background: var(--bg); padding: 6px 0; }
.admin-bulk-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.admin-bulk-buttons button, .admin-bulk-buttons select { font-size: 0.9em; padding: 4px 10px; width: auto; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
#admin-table { width: 100%; border-collapse: collapse; font-size: 0.9em; }
#admin-table th, #admin-table td { padding: 7px 8px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
#admin-table th { font-weight: 600; color: var(--muted); font-size: 0.85em; }
#admin-table tbody tr:last-child td { border-bottom: 0; }
#admin-table .check { width: 28px; }
#admin-table .check input { width: auto; margin: 0; }
#admin-table td.ip { font-variant-numeric: tabular-nums; }
#admin-table td.ip.banned { color: var(--danger); text-decoration: line-through; }
#admin-table tr.selected td { background: color-mix(in srgb, var(--accent) 10%, transparent); }
#admin-table tr.status-banned td, #admin-table tr.status-disabled td { opacity: 0.8; }
#admin-table td.empty { text-align: center; padding: 14px; }
.list li .mod-notes li { border: 0; padding: 0; margin: 2px 0; border-radius: 0; }

/* Scelta della lingua: nel profilo e sotto il login. */
.lang-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; }
.lang-switch, .theme-switch { display: flex; }
.theme-switch select { width: auto; min-height: 36px; padding: 4px 8px; font-size: 0.9em; }
.lang-switch select { width: auto; min-height: 36px; padding: 4px 8px; font-size: 0.9em; }
#login .lang-switch { justify-content: center; }

/* Chat private */
.chat-new { display: grid; gap: 8px; }
.chat-radius-row, form label.chat-radius-row { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; font-size: 1em; }
.chat-radius-row select { width: auto; }
.chat-line { display: flex; align-items: center; gap: 8px; }
.chat-line .count { position: static; }
.badge.chat-on { color: #15803d; }
.badge.chat-incoming { color: var(--unread); }
[data-theme=dark] .badge.chat-on { color: #4ade80; }
#chat-head { display: grid; gap: 8px; margin-bottom: 10px; }
#chat-head .muted { margin: 0; }
.chat-request { display: grid; gap: 10px; }
.chat-request p { margin: 0; }
.chat-locked { color: var(--muted); font-style: italic; }
.bubbles { display: flex; flex-direction: column; gap: 6px; padding: 4px 0 8px; }
.bubble { max-width: 82%; align-self: flex-start; padding: 8px 12px; border-radius: 16px 16px 16px 4px; background: color-mix(in srgb, var(--muted) 14%, var(--bg)); overflow-wrap: anywhere; white-space: pre-wrap; }
.bubble.mine { align-self: flex-end; border-radius: 16px 16px 4px 16px; background: var(--accent); color: var(--on-accent); }
.bubble-time { font-size: 0.75em; opacity: 0.75; margin-top: 2px; }
#chat-form { position: sticky; bottom: 0; display: flex; flex-direction: row; gap: 8px; align-items: flex-end; padding: 8px 0; background: var(--bg); }
#chat-form textarea { resize: none; flex: 1; min-width: 0; }
#chat-foot { margin-top: 8px; }
button.link.danger { color: var(--danger); }
#tabs .count { margin-left: 4px; min-width: 18px; height: 18px; }

/* ---------- Etichette dei messaggi e filtro della mappa */
#btn-filter {
  position: fixed; z-index: 6; top: calc(var(--bar-bottom) + 2px); right: calc(var(--panel-w) + 3 * var(--gap) + var(--safe-right));
  width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 50%; display: grid; place-items: center;
  background: var(--bg); color: var(--fg); box-shadow: 0 2px 8px rgb(0 0 0 / 20%);
}
#btn-filter.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
#filter-dot { position: absolute; top: 2px; right: 2px; width: 10px; height: 10px; border-radius: 50%; background: var(--unread); border: 2px solid var(--bg); }
#filter-menu { left: auto; right: calc(var(--panel-w) + 3 * var(--gap) + var(--safe-right)); top: calc(var(--bar-bottom) + 52px); width: min(260px, calc(100vw - 2 * var(--gap))); display: grid; gap: 8px; z-index: 8; }
/* Telefono in verticale: il pannello è un foglio in basso, la mappa è tutta libera in alto. */
@media (max-width: 760px) and (min-height: 501px) {
  #btn-filter, #filter-menu { right: calc(var(--gap) + var(--safe-right)); }
  body[data-sheet=full] #btn-filter { display: none; }
}
#filter-all { justify-self: start; }
.filter-labels { display: grid; gap: 2px; }
.filter-labels label { display: flex; flex-direction: row; align-items: center; gap: 10px; min-height: var(--touch); font-size: 1em; cursor: pointer; }
fieldset.notify-labels { border: 0; padding: 0; margin: 0; }
fieldset.notify-labels legend { padding: 0; margin-bottom: 4px; font-size: 0.9em; }
fieldset.segmented.labels label { font-size: 0.9em; padding: 0 4px; }
/* Colori delle etichette: piccoli, solo nel testo del badge (i pallini sulla mappa restano quelli della palette). */
:root { --l-notice: #b45309; --l-freestyle: #475467; --l-ad: #7c3aed; --l-question: #0369a1; --l-survey: #047857; }
:root[data-theme=dark] { --l-notice: #fbbf24; --l-freestyle: #98a2b3; --l-ad: #c4b5fd; --l-question: #7dd3fc; --l-survey: #6ee7b7; }
.badge.label-notice, .label-check.label-notice input { color: var(--l-notice); accent-color: var(--l-notice); }
.badge.label-freestyle, .label-check.label-freestyle input { color: var(--l-freestyle); accent-color: var(--l-freestyle); }
.badge.label-ad, .label-check.label-ad input { color: var(--l-ad); accent-color: var(--l-ad); }
.badge.label-question, .label-check.label-question input { color: var(--l-question); accent-color: var(--l-question); }
.badge.label-survey, .label-check.label-survey input { color: var(--l-survey); accent-color: var(--l-survey); }
.badge.label { font-weight: 700; }
.filter-head { font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin-top: 4px; }
#filter-menu { max-height: calc(100dvh - var(--bar-bottom) - 80px); overflow-y: auto; }
.source-pick { margin: 0 0 4px 30px; display: grid; gap: 4px; }
.source-pick .muted { margin: 0; }
.segmented.mini { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; width: max-content; }
.segmented.mini label { min-height: 32px; padding: 0 12px; gap: 0; font-size: 0.85em; cursor: pointer; }
.segmented.mini input { position: absolute; opacity: 0; pointer-events: none; }
.segmented.mini label:has(input:checked) { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.pick-list { display: grid; gap: 0; }
.pick-list label { min-height: 36px; font-size: 0.95em; }
.item-actions { display: flex; gap: 4px; justify-content: flex-end; margin-top: 4px; }
.list li .item-actions button { margin-left: 0; }
.editors { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.editors form { flex-basis: 100%; margin-top: 2px; }
.chip { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--line); border-radius: 999px; padding: 0 0 0 10px; font-size: 0.9em; }
.chip button.link { min-height: 28px; padding: 0 8px; margin: 0; }

/* Dettagli del messaggio dietro la "i": in vista restano tipo, autore, distanza e scadenza. La "i" sta subito dopo le
   etichette, lontana dalla freccia in alto a destra che apre il messaggio (a destra si premeva per sbaglio). */
.meta button.link.info {
  min-height: 0; width: 18px; height: 18px; padding: 0; border: 1px solid currentColor; border-radius: 50%;
  font: italic 700 11px/16px Georgia, serif; text-align: center; margin: 0 0 0 4px; position: relative; flex: 0 0 18px;
}
/* Area di tocco più grande del cerchio disegnato. */
.meta button.link.info::before { content: ""; position: absolute; inset: -13px; }
.meta button.link.info[aria-expanded=true] { color: var(--accent); }
.meta .meta-more { display: flex; flex-wrap: wrap; gap: 2px 0; padding-top: 4px; border-top: 1px dashed var(--line); }
.meta .meta-more > span + span::before { content: "·"; margin: 0 6px; }
.meta .meta-more[hidden] { display: none; }

/* Barra di risposta fissa in fondo al messaggio aperto. */
:is(#thread, #room-thread) form.reply-bar {
  position: sticky; bottom: -12px; z-index: 2; gap: 6px; margin: 12px -12px -12px; padding: 8px 12px 12px;
  background: var(--bg); border-top: 1px solid var(--line); box-shadow: 0 -6px 12px -10px rgba(0, 0, 0, 0.35);
}
#here-list li #thread form.reply-bar { margin: 10px -12px -10px; padding-bottom: 10px; border-radius: 0 0 8px 8px; }
:is(#thread, #room-thread) .reply-bar .reply-row { display: flex; gap: 8px; align-items: flex-end; }
:is(#thread, #room-thread) .reply-bar textarea { flex: 1; min-width: 0; resize: none; max-height: 30vh; min-height: var(--touch); line-height: 1.35; }
:is(#thread, #room-thread) .reply-bar button[type=submit] { flex: 0 0 var(--touch); min-height: var(--touch); padding: 0; font-size: 1.1em; }
:is(#thread, #room-thread) .reply-bar .reply-to { display: flex; align-items: center; justify-content: space-between; font-size: 0.85em; color: var(--muted); }
:is(#thread, #room-thread) .reply-bar .reply-to button.link { min-height: 32px; font-size: 1em; }
:is(#thread, #room-thread) .reply-bar .jump-new {
  position: absolute; top: -44px; right: 12px; min-height: 34px; padding: 4px 12px; border-radius: 999px;
  background: var(--new-line); color: #1d2330; border: 0; font-weight: 600; font-size: 0.85em; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* ---------- Icone, errori e avvisi */
svg.icon { width: 1.15em; height: 1.15em; flex: none; display: block; }
:root {
  --err-bg: #fef3f2; --err-line: #fda29b; --err-fg: #912018; --err-icon: #d92d20;
  --warn-bg: #fffaeb; --warn-line: #fedf89; --warn-fg: #7a2e0e; --warn-icon: #dc6803;
  --ok-bg: #ecfdf3; --ok-line: #abefc6; --ok-fg: #085d3a; --ok-icon: #079455;
}
:root[data-theme=dark] {
  --err-bg: #3a1513; --err-line: #7a271a; --err-fg: #fecdca; --err-icon: #f97066;
  --warn-bg: #3a2a0c; --warn-line: #93370d; --warn-fg: #fedf89; --warn-icon: #fdb022;
  --ok-bg: #0f2e1f; --ok-line: #085d3a; --ok-fg: #abefc6; --ok-icon: #47cd89;
}
.note { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 8px 10px; border: 1px solid; border-radius: 8px; font-size: 0.9em; line-height: 1.35; text-align: left; }
.note:empty { display: none; }
.note > svg.icon { margin-top: 0.1em; --note-on: var(--bg); }
.note-error { background: var(--err-bg); border-color: var(--err-line); color: var(--err-fg); }
.note-error > svg.icon { color: var(--err-icon); }
.note-warn { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn-fg); }
.note-warn > svg.icon { color: var(--warn-icon); }
.note-ok { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok-fg); }
.note-ok > svg.icon { color: var(--ok-icon); }
#alert-toast {
  position: fixed; z-index: 9; left: 50%; transform: translateX(-50%); top: calc(64px + var(--safe-top));
  width: max-content; max-width: min(480px, calc(100vw - 32px)); min-height: 0; font-weight: 600;
  box-shadow: 0 4px 16px rgb(0 0 0 / 20%); cursor: pointer;
}

/* ---------- Chat privata: solo l'icona, accanto alla bandierina */
#thread .message-actions { gap: 2px; align-items: center; }
button.link.chat-btn { display: inline-flex; align-items: center; justify-content: center; min-width: var(--touch); padding: 0 6px; font-size: 1.15em; }
button.link.chat-btn:hover { color: var(--thread); }
.reply-actions button.link.chat-btn { min-width: 0; }

/* ---------- Barra di risposta: campo e invio sulla stessa linea e della stessa altezza */
:is(#thread, #room-thread) .reply-bar .reply-row { align-items: flex-end; }
:is(#thread, #room-thread) .reply-bar textarea { margin: 0; display: block; height: var(--touch); padding: 0 12px; padding-block: calc((var(--touch) - 1.35em - 2px) / 2); }
:is(#thread, #room-thread) .reply-bar button[type=submit] { height: var(--touch); width: var(--touch); margin: 0; display: inline-flex; align-items: center; justify-content: center; line-height: 1; }

/* ---------- Nuovo messaggio: precisione a slider, pallini dei passi */
#compose .range { display: flex; flex-direction: column; gap: 0; }
#compose .range-head { display: flex; align-items: center; gap: 6px; font-size: 0.9em; min-height: 24px; }
#compose .range-head button.help { margin: 0; flex: none; }
#compose .range-head output { margin-left: auto; font-weight: 600; color: #7c3aed; }
[data-theme=dark] #compose .range-head output { color: #a78bfa; }
#compose .range .help-text { margin: 4px 0 2px; }
.steps-dots { display: none; align-items: center; gap: 8px; align-self: center; }
.steps-dots > span { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--muted); }
.steps-dots > span.on { background: var(--accent); border-color: var(--accent); }
@media (max-width: 760px), (pointer: coarse) { .steps-dots { display: flex; } .steps-bar, #step-count { display: none; } }
/* Il messaggio di errore o di conferma sta sopra Avanti/Pubblica, sempre in vista. */
.steps-nav { flex-wrap: wrap; }
.steps-nav > #compose-msg { flex: 1 0 100%; }
/* Indietro / Avanti: freccia disegnata e centrata sul testo (il carattere ← → stava più in basso). */
.steps-nav > #step-back, .steps-nav > #step-next { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.steps-nav svg.icon { width: 1.05em; height: 1.05em; }
/* Telefono: i passi si cambiano con le frecce accanto a "Nuovo messaggio" (o con lo swipe), niente Avanti/Indietro in basso. */
#view-steps { display: none; margin-left: auto; gap: 4px; }
#view-steps button { width: var(--touch); height: var(--touch); min-height: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--fg); }
#view-steps button:disabled { opacity: 0.3; }
#view-steps svg.icon { width: 20px; height: 20px; }
#tab-compose { touch-action: pan-y; }
@media (max-width: 760px), (pointer: coarse) {
  body[data-view=compose] #view-steps { display: inline-flex; }
  body[data-view=compose] #view-steps + #view-close { margin-left: 4px; }
  .steps-nav > #step-back, .steps-nav > #step-next { display: none; }
}

/* ---------- Messaggio aperto: legenda dei due cerchi sulla mappa (e negli stessi segni nei dettagli "i") */
#map-legend {
  position: fixed; z-index: 3; left: calc(40px + var(--safe-left)); top: calc(70px + var(--safe-top)); /* a destra dei pulsanti dello zoom, alla stessa altezza */
  display: flex; flex-direction: column; gap: 4px; padding: 6px 10px; border-radius: 10px;
  background: color-mix(in srgb, var(--bg) 90%, transparent); box-shadow: 0 2px 8px rgb(0 0 0 / 15%);
  font-size: 0.78em; pointer-events: none;
}
#map-legend > span { display: flex; align-items: center; gap: 6px; }
/* Su telefono lo zoom non c'è: la legenda sta a destra della "i" dell'attribuzione OSM, alla stessa altezza. */
@media (max-width: 760px), (max-height: 500px) { #map-legend { left: calc(40px + var(--safe-left)); top: calc(68px + var(--safe-top)); } }
@media (max-height: 500px) { #map-legend { top: calc(62px + var(--safe-top)); } }
i.swatch { display: inline-block; width: 14px; height: 14px; border-radius: 50%; flex: none; vertical-align: -2px; margin-right: 5px; }
#map-legend i.swatch { margin-right: 0; }
i.swatch.range { border: 2.5px solid var(--map-area); background: color-mix(in srgb, var(--map-area) 10%, transparent); }
i.swatch.cell { border: 2px dotted var(--map-precision); background: color-mix(in srgb, var(--map-precision) 12%, transparent); }

/* ---------- Testi lunghi: prime righe con "…", poi "Mostra tutto" apre un riquadro che scorre */
#thread .body.clamp { -webkit-line-clamp: 6; }
:is(#thread, #room-thread) .reply-body.clamp { -webkit-line-clamp: 5; }
#thread .clamp { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
#thread .expanded {
  max-height: min(9em, 30vh); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  padding-right: 6px; border-right: 2px solid color-mix(in srgb, var(--muted) 30%, transparent);
}
button.show-all {
  display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 2px 10px; margin: 0 0 6px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 8%, var(--bg)); color: var(--accent); font-size: 0.85em; font-weight: 600;
}
button.show-all[hidden] { display: none; }
button.show-all .chev { font-size: 1.1em; line-height: 1; }

/* ---------- Gesti su telefono */
/* Lo swipe orizzontale è nostro: niente "indietro" del browser trascinando la pagina (Chrome Android). */
html, body { overscroll-behavior-x: none; }
.touch-only { display: none; }
@media (pointer: coarse) { .touch-only { display: flex; } }
@media (pointer: coarse) {
  /* La pressione lunga apre il nostro menu (con "Copia testo") invece della selezione del sistema. */
  #thread .body, #thread .reply { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
}
#ptr {
  height: 0; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; gap: 6px;
  color: var(--muted); font-size: 0.85em; font-weight: 600; transition: height 0.15s ease;
}
#ptr .ptr-icon { display: inline-block; font-size: 1.2em; transition: transform 0.2s ease; padding-bottom: 6px; }
#ptr .ptr-text { padding-bottom: 8px; }
#ptr.ready { color: var(--accent); }
#ptr.ready .ptr-icon { transform: rotate(180deg); }
#ptr.loading { height: 36px; }
#ptr.loading .ptr-icon { animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* Swipe su una risposta: dietro compare la freccia ↩ */
#thread .reply { position: relative; }
#thread .reply.swiping::after {
  content: "↩"; position: absolute; right: -40px; top: 50%; transform: translateY(-50%);
  font-size: 1.3em; color: var(--accent); font-weight: 700;
}
#gesture-menu { position: fixed; inset: 0; z-index: 30; background: rgb(0 0 0 / 35%); display: flex; align-items: flex-end; justify-content: center; }
#gesture-menu .sheet {
  width: min(480px, 100%); background: var(--bg); border-radius: 16px 16px 0 0; padding: 12px 12px calc(12px + var(--safe-bottom));
  display: flex; flex-direction: column; gap: 4px; box-shadow: 0 -4px 20px rgb(0 0 0 / 25%); animation: sheet-up 0.18s ease-out;
}
#gesture-menu .quote { color: var(--muted); font-size: 0.9em; padding: 4px 6px 8px; border-bottom: 1px solid var(--line); margin-bottom: 4px; overflow-wrap: anywhere; }
#gesture-menu button { justify-content: flex-start; text-align: left; border: 0; background: transparent; min-height: var(--touch); font-weight: 600; padding: 0 10px; border-radius: 10px; }
#gesture-menu button:active { background: color-mix(in srgb, var(--accent) 10%, transparent); }
#gesture-menu button:last-child { color: var(--muted); }
@keyframes sheet-up { from { transform: translateY(100%); } }
#gesture-hint {
  position: fixed; z-index: 20; left: 50%; transform: translateX(-50%); bottom: calc(var(--sheet-h, 46dvh) + 12px);
  display: flex; align-items: center; gap: 8px; width: max-content; max-width: calc(100vw - 32px); padding: 8px 14px;
  border: 0; border-radius: 999px; background: var(--fg); color: var(--bg); font-size: 0.85em; font-weight: 600; text-align: left;
  box-shadow: 0 4px 16px rgb(0 0 0 / 25%); animation: hint-in 0.25s ease-out;
}
#gesture-hint .hand { display: inline-block; animation: hand 1.2s ease-in-out infinite; }
@keyframes hint-in { from { opacity: 0; transform: translate(-50%, 8px); } }
@keyframes hand { 50% { transform: translateX(-6px) rotate(-8deg); } }
/* Animazioni "fantasma" che mostrano il gesto */
.nudge-x { animation: nudge-x 1.4s ease-in-out; }
@keyframes nudge-x { 25% { transform: translateX(-36px); } 50% { transform: translateX(0); } 75% { transform: translateX(24px); } }
.nudge-right { animation: nudge-right 1.2s ease-in-out; }
@keyframes nudge-right { 40% { transform: translateX(40px); } }
.nudge-down { animation: nudge-down 1.2s ease-in-out; }
@keyframes nudge-down { 40% { transform: translateY(28px); } }
.nudge-y { animation: nudge-y 1.2s ease-in-out; }
@keyframes nudge-y { 30% { transform: translateY(-10px); } 60% { transform: translateY(6px); } }
.peek-reply { animation: peek-reply 1.4s ease-in-out; }
@keyframes peek-reply { 40%, 60% { transform: translateX(-56px); } }
.peek-reply::after { content: "↩"; position: absolute; right: -40px; top: 50%; transform: translateY(-50%); font-size: 1.3em; color: var(--accent); font-weight: 700; }
.nudge-press { animation: nudge-press 1.2s ease-in-out; }
@keyframes nudge-press { 40% { transform: scale(0.97); background: color-mix(in srgb, var(--accent) 10%, transparent); } }
.gesture-list { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 12px; }
.gesture-list li { display: flex; gap: 12px; align-items: flex-start; }
.gesture-list .g-icon { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 12%, var(--bg)); color: var(--accent); font-weight: 700; }
.gesture-list p { margin: 2px 0 0; }
@media (prefers-reduced-motion: reduce) { .nudge-x, .nudge-right, .nudge-down, .nudge-y, .peek-reply, .nudge-press, #gesture-hint .hand { animation: none; } }

/* ---------- Piede del messaggio: "Rispondi" a sinistra, icone a destra; menu "⋯" con le azioni meno frequenti */
#thread .message-foot { display: flex; align-items: center; gap: 4px; margin: 0 -6px 2px; }
#thread .message-foot > .message-actions { margin: 0 0 0 auto; }
.more-wrap { position: relative; display: inline-flex; }
#thread button.link.more { color: var(--muted); min-width: var(--touch); font-size: 1.3em; line-height: 1; letter-spacing: 1px; }
.more-menu {
  position: absolute; right: 0; top: calc(100% - 4px); z-index: 30; min-width: 150px; padding: 4px;
  display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 6px 20px rgb(0 0 0 / 18%);
}
#thread .more-menu button { border: 0; background: none; text-align: left; padding: 10px 12px; border-radius: 6px; min-height: var(--touch); font: inherit; color: var(--fg); margin: 0; }
#thread .more-menu button:hover, #thread .more-menu button:focus-visible { background: var(--line); }
#thread .more-menu button.danger { color: var(--danger); }
[data-theme=dark] #thread .more-menu button.danger { color: #ff7a72; }
@media (pointer: coarse) { #thread .body, #thread .reply { -webkit-touch-callout: none; } }

/* ---------- Room: la mappa lascia il posto a una nube di messaggi; i pulsanti in basso restano gli stessi. */
body[data-room="1"] #map, body[data-room="1"] #map-legend, body[data-room="1"] .ol-attribution { visibility: hidden; }
body[data-room="1"] #panel, body[data-room="1"] #btn-filter, body[data-room="1"] #filter-menu, body[data-room="1"] #crowd-banner { display: none !important; }
/* Dal menu profilo (notifiche, gestione notifiche, le mie room…) il pannello si apre sopra la room; chiudendolo si torna lì. */
body[data-room="1"][data-view]:not([data-view=""]) #panel { display: flex !important; z-index: 6; }
body[data-room="1"] #map-actions { display: flex !important; left: 50%; }
body[data-room="1"] #pos-status { display: none; }
#room-view {
  position: fixed; inset: 0; z-index: 4; display: flex; flex-direction: column; gap: 10px;
  padding: calc(var(--bar-bottom) + 6px) calc(16px + var(--safe-right)) calc(96px + var(--safe-bottom)) calc(16px + var(--safe-left));
  background:
    radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--room) 14%, transparent), transparent 70%),
    radial-gradient(90% 60% at 100% 100%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%),
    var(--bg);
}
#room-view[hidden] { display: none; }
.room-bar { display: flex; align-items: center; gap: 8px; max-width: 760px; width: 100%; margin: 0 auto; }
.room-title { display: flex; flex-direction: column; min-width: 0; }
.room-title strong { font-size: 1.25em; font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.room-title strong::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--room); margin-right: 8px; vertical-align: 1px; }
.room-title .muted { font-size: 0.85em; }
#room-outside { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 6px 10px; min-height: 36px; color: var(--unread); border-color: color-mix(in srgb, var(--unread) 45%, var(--line)); font-weight: 700; }
#room-outside[hidden] { display: none; }
/* Uscita: un'icona accanto al nome, per lasciare spazio alla board. */
#room-exit { flex: none; margin-right: auto; width: 40px; height: 40px; min-height: 0; padding: 0; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); }
#room-feed {
  display: flex; align-items: center; gap: 8px; max-width: 760px; width: 100%; margin: 0 auto; text-align: left;
  border-radius: 12px; padding: 10px 12px; border-color: color-mix(in srgb, var(--room) 35%, var(--line));
  background: color-mix(in srgb, var(--room) 7%, var(--bg));
}
#room-feed[hidden] { display: none; }
.room-feed-badge { flex: none; font-size: 0.72em; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--room); }
.room-feed-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.room-feed-more { flex: none; font-size: 0.8em; color: var(--muted); }
/* La nube è una tela senza bordi: si trascina e si ingrandisce; i messaggi hanno un posto fisso attorno al centro. */
#room-cloud { flex: 1; min-height: 0; position: relative; overflow: hidden; touch-action: none; overscroll-behavior: contain; margin: 0 calc(-16px - var(--safe-right)) 0 calc(-16px - var(--safe-left)); cursor: grab; user-select: none; -webkit-user-select: none; }
#room-cloud:active { cursor: grabbing; }
.cloud { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-origin: 0 0; }
#room-recenter { position: fixed; z-index: 5; right: calc(16px + var(--safe-right)); bottom: calc(96px + var(--safe-bottom)); width: 40px; height: 40px; min-height: 40px; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgb(0 0 0 / 15%); }
#room-recenter[hidden] { display: none; }
.room-empty { text-align: center; margin: 18vh auto 0; max-width: 300px; }
/* Ogni messaggio galleggia piano, con ritmo e scarto suoi (dall'id): niente 3D, solo un leggero respiro. */
.cloud-msg {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  position: absolute; white-space: nowrap; padding: 9px 14px; border-radius: 18px; text-align: left; font-weight: 500; line-height: 1.3;
  background: var(--bg); border: 1px solid var(--line); box-shadow: 0 4px 14px rgb(0 0 0 / 8%);
  opacity: var(--o, 1); translate: -50% -50%;
  animation: cloud-float var(--dur, 7s) ease-in-out var(--delay, 0s) infinite alternate;
}
/* Grandezza (--s, da 1 a 0.6, solo con la board affollata): tutto il messaggio scala con il carattere. Colori come sulla mappa. */
.cloud-msg { font-size: calc(var(--s, 1) * 1em); transition: opacity 0.6s ease, left 1.1s cubic-bezier(.3, .7, .3, 1), top 1.1s cubic-bezier(.3, .7, .3, 1); --st: var(--accent); border-color: color-mix(in srgb, var(--st) 40%, var(--line)); }
.cloud-msg.st-new { --st: var(--unread); border-color: color-mix(in srgb, var(--st) 70%, var(--line)); box-shadow: 0 6px 18px color-mix(in srgb, var(--st) 22%, transparent); }
.cloud-msg.st-thread { --st: var(--thread); }
.cloud-msg.mine { background: color-mix(in srgb, var(--fg) 4%, var(--bg)); }
.cloud-msg.active { font-size: 1em; opacity: 1; border-color: var(--st); animation-play-state: paused; box-shadow: 0 0 0 3px color-mix(in srgb, var(--st) 25%, transparent); }
.cloud-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 0.72em; color: var(--muted); font-weight: 500; }
.cloud-foot .unseen, body[data-room="1"] #sheet-open-count, .room-feed-new { color: var(--unread); font-weight: 700; }
/* Spia di presenza: verde pieno se l'autore è nella room, cerchio vuoto se è uscito. */
.presence { display: inline-block; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--muted); flex: none; box-sizing: border-box; }
.presence.on { border-color: #16a34a; background: #16a34a; box-shadow: 0 0 0 2px color-mix(in srgb, #16a34a 25%, transparent); }
[data-theme=dark] .presence.on { border-color: #4ade80; background: #4ade80; }
.reply-head .presence { align-self: center; }
/* Messaggio aperto nella room: pannello dal basso con le risposte e la barra per rispondere. */
#room-thread {
  position: fixed; z-index: 12; left: 0; right: 0; margin: 0 auto; bottom: 0; width: min(560px, 100vw); max-height: 72vh; box-sizing: border-box;
  overflow-y: auto; overscroll-behavior: contain; padding: 12px 12px calc(12px + var(--safe-bottom)); border-radius: 16px 16px 0 0;
  background: var(--bg); border: 1px solid var(--line); border-bottom: 0; box-shadow: 0 -10px 30px rgb(0 0 0 / 22%); animation: sheet-up 0.18s ease-out;
}
#room-thread[hidden] { display: none; }
/* Con la tastiera aperta i pannelli in basso salgono sopra i tasti (--kb, calcolato in app.js). */
body.kb-open #room-thread { bottom: var(--kb); max-height: calc(100dvh - var(--kb) - 56px - var(--safe-top)); padding-bottom: 12px; }
body.kb-open #room-thread form.reply-bar { bottom: -12px; padding-bottom: 12px; margin-bottom: -12px; }
body.kb-open #room-compose { bottom: calc(var(--kb) + 8px); }
#room-thread form.reply-bar { bottom: calc(-12px - var(--safe-bottom)); padding-bottom: calc(12px + var(--safe-bottom)); margin-bottom: calc(-12px - var(--safe-bottom)); }
.room-thread-head { display: flex; align-items: center; gap: 8px; font-size: 0.85em; }
.room-thread-head .close { margin-left: auto; min-height: 32px; font-size: 1.1em; }
.room-thread-body { font-size: 1.12em; font-weight: 500; white-space: pre-wrap; overflow-wrap: anywhere; margin: 6px 0 2px; }
.room-thread-actions { align-items: center; }
body:has(#room-thread:not([hidden])) #map-actions { display: none !important; }
/* "Qui": cerca e ordina dietro una piccola icona accanto al riassunto; il pallino dice che un filtro è attivo. */
.here-head { display: flex; align-items: flex-start; gap: 8px; }
.here-head #here-summary { flex: 1; margin-top: 0; }
#btn-here-tools { position: relative; flex: none; width: 32px; height: 32px; min-height: 32px; padding: 0; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--line); background: var(--bg); color: var(--muted); }
#btn-here-tools[aria-expanded="true"] { color: var(--fg); border-color: var(--fg); }
#btn-here-tools.on::after { content: ''; position: absolute; top: 1px; right: 1px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--bg); }
#here-order .seg.on { background: var(--accent); border-color: var(--accent); }
.room-filter { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.room-filter .seg { border-radius: 999px; min-height: 32px; padding: 4px 12px; font-size: 0.85em; }
.room-filter .seg.on { background: var(--room); border-color: var(--room); color: #fff; }
.room-li { cursor: pointer; --st: var(--accent); border-left: 3px solid var(--st) !important; }
.room-more-li { list-style: none; border: 0 !important; background: none !important; text-align: center; padding: 8px 0 !important; }
.room-more { padding: 8px 18px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); font: inherit; cursor: pointer; }
.room-more:disabled { opacity: .6; cursor: default; }
.room-search { width: 100%; box-sizing: border-box; margin: 0 0 10px; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); font: inherit; }
.room-li.st-new { --st: var(--unread); }
.room-li.st-thread { --st: var(--thread); }
.room-feed-items li.pinned { background: color-mix(in srgb, var(--room) 7%, var(--bg)); border-color: color-mix(in srgb, var(--room) 35%, var(--line)); }
.room-feed-items p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.room-feed-items li.pinned p { display: block; }
.room-hello-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 1.05em; }
.room-item-welcome { font-size: 0.85em; white-space: pre-wrap; overflow-wrap: anywhere; }
.cloud-msg.hidden-msg { border-style: dashed; }
.cloud-msg.fresh { animation: cloud-pop 0.45s cubic-bezier(.2, 1.4, .4, 1) both, cloud-float var(--dur, 7s) ease-in-out 0.45s infinite alternate; }
.cloud-text { white-space: nowrap; }
@keyframes cloud-float { from { transform: translateY(-3px); } to { transform: translateY(3px); } }
@keyframes cloud-pop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: var(--o, 1); } }
@media (prefers-reduced-motion: reduce) { .cloud-msg, .cloud-msg.fresh { animation: none; } }
#room-compose {
  position: fixed; z-index: 11; left: 50%; transform: translateX(-50%); bottom: calc(12px + var(--safe-bottom));
  width: min(520px, calc(100vw - 24px)); gap: 8px; padding: 12px; border-radius: 14px;
  background: var(--bg); border: 1px solid var(--line); box-shadow: 0 10px 30px rgb(0 0 0 / 25%);
}
#room-compose[hidden] { display: none; }
.room-compose-head { display: flex; align-items: center; justify-content: space-between; }
.room-feed-items { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 10px; max-height: 50vh; overflow-y: auto; text-align: left; }
.room-feed-items li { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.room-feed-items p { margin: 0 0 4px; white-space: pre-wrap; overflow-wrap: anywhere; }
/* Le mie room */
.room-item-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.room-item p { margin: 4px 0; }
.room-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 8px; font-size: 0.8em; }
canvas.room-qr { display: block; width: min(240px, 60vw); height: auto; margin: 4px auto 10px; border-radius: 8px; image-rendering: pixelated; }
#room-share .card { display: flex; flex-direction: column; gap: 10px; }
#room-share input { font-size: 0.85em; }
/* Ospiti: invito a creare un account accanto al profilo, e la procedura a passi */
#btn-upgrade { border-radius: 999px; font-size: 0.85em; font-weight: 700; padding: 6px 12px; color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); animation: cloud-pop 0.4s ease both; }
#btn-upgrade[hidden] { display: none; }
#profile-menu .accent { color: var(--accent); font-weight: 700; }
.wizard-dots { display: flex; gap: 6px; justify-content: center; margin-bottom: 10px; }
.wizard-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.wizard-dots i.on { background: var(--accent); }
#room-welcome .legal { font-size: 0.78em; }
.automod { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; margin-bottom: 12px; }
.automod label { display: flex; align-items: center; gap: 8px; min-height: var(--touch); font-weight: 600; }
.automod p { margin: 0 0 4px; font-size: 0.85em; }
@media (max-width: 760px) {
  #topbar #btn-upgrade { font-size: 0.78em; padding: 5px 10px; }
}
/* Mentre si scrive nella room i pulsanti in basso lasciano il posto al riquadro (e alla tastiera). */
body:has(#room-compose:not([hidden])) #map-actions { display: none !important; }
/* Board con tanti messaggi: i nuovi in arrivo a raffica aspettano dietro a questo bottone. */
#room-pending { position: absolute; z-index: 3; top: 8px; left: 50%; translate: -50% 0; padding: 7px 16px; min-height: 0; border-radius: 999px; border: 0; background: var(--unread); color: #fff; font: inherit; font-weight: 600; box-shadow: 0 4px 14px rgb(0 0 0 / 18%); cursor: pointer; animation: hint-in 0.3s ease both; }
/* "I tuoi thread": una riga che scorre di lato, sopra la board. */
.room-mine { display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-16px - var(--safe-right)) 6px calc(-16px - var(--safe-left)); padding: 2px 16px; flex-shrink: 0; }
.room-mine[hidden] { display: none; }
.room-mine::-webkit-scrollbar { display: none; }
.room-mine-label { font-size: 0.8em; color: var(--muted); white-space: nowrap; }
.mine-chip { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; min-height: 0; padding: 5px 11px; border-radius: 999px; font: inherit; font-size: 0.85em; background: var(--bg); color: var(--fg); border: 1px solid color-mix(in srgb, var(--st, var(--accent)) 45%, var(--line)); --st: var(--accent); cursor: pointer; }
.mine-chip.st-new { --st: var(--unread); }
.mine-chip.st-thread { --st: var(--thread); }
.mine-chip.on { box-shadow: 0 0 0 2px color-mix(in srgb, var(--st) 35%, transparent); }
.mine-chip .unseen { color: var(--unread); font-weight: 700; }
/* Sfondo della room (scelto da chi la gestisce): pieno in alto, sfuma nel colore neutro del tema dove inizia
   la board, così i messaggi restano leggibili con qualunque immagine. */
#room-view[data-bg] { background: var(--bg); }
#room-bg {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; background-size: cover; background-position: center top;
}
/* Sulla board lo sfondo diventa una tinta unita intonata (--tint, per preset o media della foto), che sfuma di nuovo
   nello sfondo in alto e in fondo: la board resta leggibile e lo sfondo avvolge tutta la room. */
#room-bg::after {
  content: ""; position: absolute; inset: 0; background: var(--tint, var(--bg));
  --fade-in: calc(var(--board-top, 40vh) - 90px); --solid: calc(var(--board-top, 40vh) + 40px);
  --solid-end: calc(100% - var(--board-bottom, 96px) - 40px); --fade-out: calc(100% - var(--board-bottom, 96px) + 60px);
  -webkit-mask-image: linear-gradient(to bottom, transparent var(--fade-in), #000 var(--solid), #000 var(--solid-end), transparent var(--fade-out));
  mask-image: linear-gradient(to bottom, transparent var(--fade-in), #000 var(--solid), #000 var(--solid-end), transparent var(--fade-out));
}
#room-view[data-bg] .room-empty { padding: 14px 16px; border-radius: 14px; background: color-mix(in srgb, var(--bg) 88%, transparent); }
#room-bg[hidden] { display: none; }
#room-view[data-bg] .room-title, #room-view[data-bg] .room-mine-label {
  background: color-mix(in srgb, var(--bg) 80%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
#room-view[data-bg] .room-title { padding: 6px 12px; border-radius: 14px; }
#room-view[data-bg] .room-mine-label { padding: 4px 8px; border-radius: 999px; color: var(--fg); }
#room-view[data-bg] :is(#room-feed, #room-exit, #room-outside) { background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.preset-tramonto { --tint: #fbe1e4; background: linear-gradient(160deg, #ffb88c 0%, #ff6a88 50%, #c86dd7 100%); }
.preset-notte { --tint: #151a42; background: radial-gradient(circle at 75% 20%, #6d7cff55 0, transparent 40%), linear-gradient(160deg, #0b1026 0%, #1e1b4b 60%, #312e81 100%); }
.preset-mare { --tint: #dcf2fa; background: linear-gradient(160deg, #a1f0ff 0%, #2bb3e6 45%, #0b5fa5 100%); }
.preset-bosco { --tint: #e5f0da; background: linear-gradient(160deg, #c6ea8d 0%, #5fa55a 50%, #24543a 100%); }
.preset-neon { --tint: #2b0f47; background: linear-gradient(135deg, #f72585 0%, #7209b7 50%, #4cc9f0 100%); }
.preset-vino { --tint: #3b0e20; background: linear-gradient(160deg, #d0505e 0%, #8e1b3a 50%, #4a0d24 100%); }
.preset-sabbia { --tint: #fcf2dc; background: linear-gradient(160deg, #fff1cf 0%, #f6d28b 50%, #d9a441 100%); }
.preset-aurora { --tint: #dff6f1; background: linear-gradient(160deg, #3ce3a1 0%, #2bc7d9 40%, #7f5af0 100%); }
/* Festa techno: tutto disegnato con i gradienti, niente immagini da scaricare. */
.preset-laser { --tint: #03140b;
  background: radial-gradient(ellipse at 50% 0%, #00ffa366 0, transparent 55%),
    repeating-conic-gradient(from 120deg at 50% -6%, #39ff14d0 0deg 0.45deg, transparent 0.45deg 5deg, #00e5ffa0 5deg 5.4deg, transparent 5.4deg 11deg),
    linear-gradient(180deg, #000 0%, #031208 100%);
}
.preset-strobo { --tint: #16061f;
  background: radial-gradient(circle at 28% 18%, #fff 0, #ffffffb0 4%, transparent 20%), radial-gradient(circle at 76% 34%, #ff00e6c0 0, transparent 28%),
    radial-gradient(circle at 55% 75%, #6a00ff90 0, transparent 35%), repeating-linear-gradient(100deg, #ffffff14 0 2px, transparent 2px 24px),
    linear-gradient(160deg, #07000d 0%, #2a0035 100%);
}
.preset-acido { --tint: #121b03;
  background: radial-gradient(circle at 70% 28%, #e4ff00 0, #9dff00b0 14%, transparent 42%),
    repeating-radial-gradient(circle at 70% 28%, transparent 0 16px, #000000a0 16px 21px), linear-gradient(160deg, #0d0d0d 0%, #1c2b00 100%);
}
.preset-capannone { --tint: #160404;
  background: linear-gradient(104deg, transparent 38%, #ff1e1e55 44%, transparent 50%), linear-gradient(76deg, transparent 50%, #ff3b3b45 56%, transparent 62%),
    radial-gradient(ellipse at 50% 100%, #ff1e1e70 0, transparent 60%), repeating-linear-gradient(90deg, #ffffff0a 0 1px, transparent 1px 42px),
    linear-gradient(180deg, #040000 0%, #1c0303 100%);
}
.preset-hardcore { --tint: #0c0414;
  background: radial-gradient(ellipse at 50% 40%, transparent 0, #000000c0 75%),
    repeating-linear-gradient(0deg, #ff00a070 0 3px, transparent 3px 10px, #00f0ff60 10px 12px, transparent 12px 34px),
    repeating-linear-gradient(90deg, #ffffff10 0 1px, transparent 1px 7px), linear-gradient(160deg, #000 0%, #14001f 100%);
}
/* Scelta dello sfondo: tessere con l'anteprima, consigli per la foto e rimozione. */
.bg-remove { display: block; margin: -2px 0 6px; }
.bg-remove[hidden] { display: none; }
.bg-tips { margin: 4px 0 8px; font-size: 0.88em; }
.bg-tips summary { cursor: pointer; font-weight: 600; color: var(--accent); min-height: 32px; display: flex; align-items: center; }
.bg-tips ul { margin: 4px 0 0; padding-left: 18px; color: var(--muted); }
.bg-tips li + li { margin-top: 4px; }
.bg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; margin: 10px 0; }
.bg-tile { position: relative; height: 72px; min-height: 0; padding: 0; border-radius: 12px; border: 2px solid var(--line); background-size: cover; background-position: center; overflow: hidden; display: flex; align-items: flex-end; cursor: pointer; }
.bg-tile span { width: 100%; padding: 3px 6px; font-size: 0.78em; font-weight: 600; text-align: left; background: color-mix(in srgb, var(--bg) 82%, transparent); color: var(--fg); }
.bg-tile.on { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); }
.bg-tile.none { background: var(--bg); }
.bg-tile.upload { border-style: dashed; background: color-mix(in srgb, var(--fg) 4%, var(--bg)); align-items: center; }
.bg-tile.upload span { background: none; text-align: center; }

/* Moderazione: viste, filtri, categorie dell'automod e precedenti dell'autore. */
.mod-views { margin-bottom: 8px; }
.mod-views .seg.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.mod-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.mod-filters select { width: auto; flex: 1 1 140px; font-size: 0.9em; }
.mod-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mod-top .mod-check { width: 20px; height: 20px; margin: 0; }
.badge.room { color: var(--room); }
.badge.automod { color: #b45309; }
[data-theme=dark] .badge.automod { color: #fbbf24; }
.badge.hidden-state { color: var(--muted); }
.badge.shown-state { color: var(--thread); }
.mod-cats { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 2px; }
.mod-cat { font-size: 0.8em; padding: 2px 8px; border-radius: 6px; background: color-mix(in srgb, #d97706 14%, transparent); }
.mod-cat.high { background: color-mix(in srgb, var(--danger, #dc2626) 20%, transparent); font-weight: 600; }
.mod-warn { color: #b45309; font-weight: 600; }
[data-theme=dark] .mod-warn { color: #fbbf24; }
.mod-remove select { width: auto; }
.list li.mod-log { font-size: 0.9em; padding: 8px 10px; }
#mod-bulk .check { display: flex; align-items: center; gap: 6px; }

/* Metriche: schede piccole in griglia, numero grande e andamento di 30 giorni. */
.metrics-section h3 { margin: 16px 0 8px; font-size: 0.95em; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.metrics-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.metric { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.metric-value { font-size: 1.5em; font-weight: 700; line-height: 1.1; }
.metric-label { font-size: 0.85em; }
.metric-hint { font-size: 0.75em; }
.metric .spark { width: 100%; height: 28px; margin-top: 4px; color: var(--accent); }
.metric.warn { border-color: #d97706; }
.metric.warn .metric-value { color: #b45309; }
.metric.bad { border-color: var(--danger, #dc2626); }
.metric.bad .metric-value { color: var(--danger, #dc2626); }
[data-theme=dark] .metric.warn .metric-value { color: #fbbf24; }
#metrics-summary:empty { display: none; }