/* ===== OFF Grid UI — Fase 7 redesign ===== */

/* ----- CSS variables per tema ----- */
:root {
  /* body: #383836 — header/footer: #2b2a29 */
  --bg:          #383836;
  --bg2:         #2b2a29;
  --bg3:         #5c5c5b;
  --surface:     #383836;
  --border:      #5c5c5b;
  --text:        #e6e6e6;
  --text-muted:  #8b98b6;
  --accent:      #c8c6c7;
  --accent2:     #fbbe5e;
  --accent3:     #fdd185;
  --danger:      #e30613;
  --violet1:     #6561a9;
  --violet2:     #8f8fe3;
  --violet3:     #a5add8;
  --green:       #667690;
  --header-bg:   #232120;
  --header-line: rgba(255,255,255,0.18);
  --menu-sel:    #7f7e7e;
  --bubble-mine: #4a4947;
  --bubble-peer: #4a4947;
  --bubble-mine-border: #e6e6e6;
  --bubble-peer-border: #e6e6e6;
  --bubble-draft: #4a4947;
  --bubble-draft-border: #e6e6e6;
  --nav-bg:      #2b2a29;
  --nav-border:  rgba(255,255,255,0.18);
  --panic-bg:    #2b2a29;
  --wizard-line: #5c5c5b;
  --wizard-dot:  #8b98b6;
  --wizard-dot-active: #e6e6e6;
  --chrome-height: 70px; /* altezza condivisa di header e footer, ovunque */
}

body[data-theme="1"] {
  /* body: #c8c6c7 — header/footer: #383636 */
  --bg:          #c8c6c7;
  --bg2:         #e6e6e6;
  --bg3:         #ffffff;
  --surface:     #e6e6e6;
  --border:      #c8c6c7;
  --text:        #2b2a29;
  --text-muted:  #667690;
  --header-bg:   #383836;
  --header-line: rgba(255,255,255,0.25);
  --accent:      #8f8fe3;
  --menu-sel:    #8f8fe3;
  --bubble-mine: #e6e6e6;
  --bubble-peer: #adacac;
  --bubble-mine-border: #8f8fe3;
  --bubble-peer-border: #e6e6e6;
  --bubble-draft: #e6e6e6;
  --bubble-draft-border: #8f8fe3;
  --nav-bg:      #383636;
  --nav-border:  rgba(255,255,255,0.25);
  --panic-bg:    #c8c6c7;
  --wizard-line: #c8c6c7;
  --wizard-dot:  #c8c6c7;
  --wizard-dot-active: #2b2a29;
}

body[data-theme="2"] {
  --bg:          #545d43;
  --bg2:         #3d4530;
  --bg3:         #6b7555;
  --surface:     #545d43;
  --border:      #707a5c;
  --text:        #e6e6e6;
  /* Non #38695b (teal scuro): contrasto ~1.1:1 su --bg/--bubble-peer,
     praticamente invisibile — è il testo degli orari in chat segnalato da
     Enrico (2026-07-05) e la stessa scritta muted ovunque nell'app. Chiaro
     e caldo, ~4.6:1 su questo sfondo. */
  --text-muted:  #d9d3b0;
  --header-bg:   #2b2d0c;
  --header-line: rgba(255,255,255,0.2);
  --accent:      #f39200;
  --menu-sel:    #fbbe5e;
  --bubble-mine: #fbbe5e;
  --bubble-peer: #545d43;
  --bubble-mine-border: #e6e6e6;
  --bubble-peer-border: #e6e6e6;
  --bubble-draft: #fbbe5e;
  --bubble-draft-border: #e6e6e6;
  --nav-bg:      #2b2d0c;
  --nav-border:  rgba(255,255,255,0.2);
  --panic-bg:    #545d43;
  --wizard-line: #707a5c;
  --wizard-dot:  #d9d3b0;
  --wizard-dot-active: #f39200;
}
/* Tema 2: il testo resta chiaro ovunque tranne nella bolla "mine", che ha
   sfondo giallo/arancio — testo chiaro su giallo non si legge. Vale anche
   per l'orario del messaggio (.msg-time, fuori da .msg-text-box quindi non
   coperto dalla regola sopra): senza questa, --text-muted chiaro spariva
   altrettanto sul giallo quanto il teal scuro spariva altrove. */
body[data-theme="2"] .message-bubble.mine .msg-text-box {
  color: #000;
}
body[data-theme="2"] .message-bubble.mine .msg-time {
  color: #2b2d0c;
}
/* .msg-cipher ha un color proprio (--text-muted, chiaro) che altrimenti
   vince su quello nero impostato sopra per .msg-text-box: stessa illeggibilità
   della bolla in chiaro, ma nella vista cifrata (icona "mostra cifrato"). */
body[data-theme="2"] .message-bubble.mine .msg-cipher {
  color: #2b2d0c;
}

body[data-theme="3"] {
  /* body: #a5add8 — header/footer: #6e74b6 */
  --bg:          #a5add8;
  --bg2:         #8f8fe3;
  --bg3:         #6561a9;
  --surface:     #a5add8;
  --border:      #8f8fe3;
  --text:        #2b2a29;
  --text-muted:  #6561a9;
  --header-bg:   #6e74b6;
  --header-line: rgba(255,255,255,0.22);
  --accent:      #ac68ef;
  --menu-sel:    #ac68ef;
  --nav-bg:      #6e74b6;
  --nav-border:  rgba(255,255,255,0.22);
  --bubble-mine: #ac98f1;
  --bubble-peer: #8f96c0;
  --bubble-mine-border: #e6e6e6;
  --bubble-peer-border: #e6e6e6;
  --bubble-draft: #ac68ef;
  --bubble-draft-border: #e6e6e6;
  --panic-bg:    #a5add8;
  --wizard-line: #8f8fe3;
  --wizard-dot:  #6e74b6;
  --wizard-dot-active: #ffffff;
}

/* ----- Base ----- */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* Su iPad (viewport > 480px, .screen centrato con max-width) resta uno
   spazio ai lati/sopra-sotto fuori da .screen — colorato qui invece di
   restare bianco/non definito. Fisso, non legato al tema (stesso per
   tutti e 4 i temi, come richiesto). */
html {
  background: #e6e6e6;
  height: 100%;
}

body {
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
  background: var(--bg);
  color: var(--text);
  display: flex;
  justify-content: center;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
}

.screen {
  width: 100%;
  max-width: 480px;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  position: relative;
  overflow: hidden;
}

.hidden { display: none !important; }

/* ----- Splash ----- */
.screen-splash {
  align-items: center;
  justify-content: center;
  background: var(--bg);
}
.splash-logo-wrap { display: flex; align-items: center; justify-content: center; }
.splash-logo-icon { width: 180px; height: 180px; object-fit: contain; }
/* /installa (installa.html) soltanto — non lo splash screen dell'app,
   che riusa .splash-logo-icon alla dimensione piena. */
.install-page .splash-logo-icon { width: 90px; height: 90px; }
.install-title {
  margin: 32px 0 4px;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text);
  text-align: center;
}
.install-fallback-text {
  max-width: 320px;
  margin: 16px auto 0;
  padding: 0 24px;
  text-align: left;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.install-fallback-text p { margin: 0 0 6px; }
.install-fallback-text p:last-child { margin-bottom: 0; }
.install-steps {
  margin: 0;
  padding-left: 1.1em;
}
.install-steps li { margin-bottom: 6px; }
.install-steps li:last-child { margin-bottom: 0; }

/* ----- Carousel ----- */
.screen-carousel {
  background: var(--bg);
  display: flex;
  flex-direction: column;
  position: relative;
}
.carousel-viewport {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 40px 28px 20px 68px;
  display: flex;
  flex-direction: column;
}
.carousel-slide {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
}
.carousel-logo {
  width: 180px;
  object-fit: contain;
  margin-bottom: 8px;
}
.carousel-headline {
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.5;
}
.carousel-body {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--text);
  font-weight: 400;
}
.carousel-dice-wrap {
  display: flex;
  justify-content: center;
  padding: 8px 0;
}
.carousel-dice-img { width: 144px; }
.carousel-first-title {
  font-size: 1.3rem;
  font-weight: 400;
  margin-bottom: 12px;
}
.carousel-steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-left: 0;
}
.carousel-steps li { display: flex; flex-direction: column; gap: 4px; }
.carousel-steps li strong { font-size: 0.95rem; font-weight: 700; }
.carousel-steps li p { font-size: 0.85rem; line-height: 1.6; color: var(--text); font-weight: 400; }
.carousel-slide7-footer {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-top: auto;
  padding-top: 16px;
}
.carousel-slide7-footer img { width: 36px; opacity: 0.6; }
.carousel-counter {
  font-size: 0.9rem;
  color: var(--text-muted);
  font-weight: 400;
  text-align: center;
  padding-top: 8px;
}
/* Frecce fluttuanti a metà dell'intera schermata (non del solo corpo) */
.carousel-nav-btns {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  padding: 0 8px;
  pointer-events: none;
}
.carousel-arrow {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  width: auto;
  opacity: 0.8;
  pointer-events: auto;
}
.carousel-arrow img { width: 40px; }
/* La freccia "prev" su slide 1 resta nel layout ma invisibile, cosi'
   "next" non trasla a sinistra per mancanza dell'altro flex item */
.carousel-nav-btns .carousel-arrow.hidden {
  display: inline-block !important;
  visibility: hidden;
  pointer-events: none;
}
.carousel-arrow:disabled { opacity: 0.2; }

/* ----- Shared screen header ----- */
.screen-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  background: var(--header-bg);
  height: var(--chrome-height);
  flex-shrink: 0;
  position: relative;
}
/* Filetto separatore rientrato leggermente e simmetricamente sui due lati
   (come il padding orizzontale dell'header stesso), non a tutta larghezza. */
.screen-header::after {
  content: '';
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 0;
  height: 3px;
  background: #e6e6e6;
}
/* Il testo dell'header è sempre bianco, indipendentemente dal tema: a
   differenza del corpo, --header-bg resta scuro/saturo in tutti e 4 i
   temi (vedi :root e body[data-theme="N"]), mentre --text/--text-muted
   sono tarati per il contrasto sul BODY, che in alcuni temi è chiaro —
   dark-on-dark altrimenti illeggibile (es. tema 1: --text:#2b2a29 su
   --header-bg:#383636). */
.screen-title {
  flex: 1;
  font-size: 1.15rem;
  font-weight: 400;
  color: #fff;
}
.header-multiline {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.screen-subtitle {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.75);
  font-weight: 400;
}
.btn-back {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  width: auto;
  flex-shrink: 0;
}
.btn-back img { width: 36px; display: block; }
.btn-panic-header {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  width: auto;
  flex-shrink: 0;
}
.btn-panic-header img { width: 36px; display: block; }
/* Posizione 2 dell'header (icona tag, es. chat-channel-icon): riservata
   e vuota quando la schermata non ha un'icona di contesto, per allineare
   comunque il titolo alla stessa posizione delle altre schermate. */
.header-tag-spacer { width: 36px; height: 36px; flex-shrink: 0; }
/* Template header a 4 posizioni, applicato ovunque: 1 nav, 2 tag, 3 titolo,
   4 panic/carica. Dove la posizione non serve, resta riservata e vuota
   (stessa dimensione del bottone reale) cosi' il titolo e il corpo sotto
   si allineano sempre alla stessa x su ogni schermata. */
.header-nav-spacer { width: 44px; height: 44px; flex-shrink: 0; }
.header-action-spacer { width: 36px; height: 36px; flex-shrink: 0; }

/* ----- Lock / Register / Form screens ----- */
.screen-lock, .screen-register, .screen-form {
  padding: 40px 28px 32px;
  gap: 16px;
  align-items: stretch;
  overflow-y: auto;
}
/* .screen-header e' pensato per essere a tutta larghezza (gestisce da solo
   il proprio padding interno di 16px) — su .screen-form annulliamo il
   padding del contenitore solo per l'header, altrimenti si somma e rompe
   l'allineamento a 4 posizioni condiviso con le altre schermate. */
.screen-form .screen-header {
  margin: -40px -28px 0;
}
.form-logo { width: 140px; align-self: center; margin-bottom: 16px; }

/* ----- Inputs / Buttons base ----- */
input[type="text"], input[type="password"], input[type="number"], select {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 0.95rem;
  font-family: inherit;
  width: 100%;
  outline: none;
}
input::placeholder { color: var(--text-muted); }
input:focus, select:focus { border-color: var(--accent); }

button {
  background: var(--accent);
  color: #000;
  border: none;
  border-radius: 8px;
  padding: 13px 18px;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  width: 100%;
  transition: opacity 0.12s;
}
button:active { opacity: 0.75; }
button.secondary {
  background: var(--surface);
  color: var(--text);
  font-weight: 400;
  border: 1px solid var(--border);
}
button.small { padding: 9px 14px; font-size: 0.85rem; }
button:disabled { opacity: 0.4; cursor: not-allowed; }
.link-btn {
  background: none;
  color: var(--text-muted);
  border: none;
  font-size: 0.85rem;
  font-weight: 400;
  text-decoration: underline;
  cursor: pointer;
  padding: 6px 0;
}
.btn-danger {
  background: var(--danger);
  color: #fff;
}
/* Icona panic al posto del testo: stessa icona (ICN_panic) usata ovunque
   nell'app per "cancella subito", per abituare l'utente a riconoscerla. */
.btn-panic-icon {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  width: auto;
  display: flex;
  align-items: center;
  align-self: center;
}
.btn-panic-icon img { width: 88px; display: block; }
.danger-zone-title {
  text-align: center;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
}
.danger-zone-desc {
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.danger-zone-warning {
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  color: var(--danger);
}
.danger-zone-note {
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 6px;
}

.error { color: var(--danger); font-size: 0.85rem; }
.warning-text { color: var(--accent); font-size: 0.85rem; }
.success-msg { color: #4caf50; font-size: 0.85rem; }
.section-label { font-size: 0.85rem; color: var(--text-muted); }

/* ----- Home menu ----- */
.screen-home {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.home-inner {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 32px 16px 24px 68px;
  gap: 0;
}
.home-logo {
  width: 180px;
  object-fit: contain;
  align-self: flex-start;
  margin-bottom: 28px;
}
.home-nudge {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--menu-sel);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 20px;
  font-size: 0.85rem;
  color: var(--text);
}
.home-nudge .link-btn { color: var(--accent); padding: 0; }
.home-nudge-dismiss {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  margin-left: auto;
}
.home-menu { display: flex; flex-direction: column; }
.home-menu-item {
  background: none;
  border: none;
  color: var(--text);
  font-weight: 700;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 18px 0;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background 0.1s;
}
.home-menu-item.selected { background: var(--menu-sel); border-radius: 8px; padding-left: 12px; padding-right: 12px; }
/* Solo pointer reale (trackpad/mouse, es. iPad+Magic Keyboard): su touch puro
   niente mouseleave affidabile, l'hover resterebbe "incollato" dopo il tap.
   any-hover/any-pointer (non hover/pointer "primario"): su iPad con trackpad
   il touchscreen resta SEMPRE disponibile insieme al trackpad, e Safari
   riporta come dispositivo "primario" il touch (coarse/none) anche quando si
   sta usando il trackpad in quel momento — hover/pointer da soli restano
   sempre false lì, band mai visibile nonostante un puntatore vero. any-hover/
   any-pointer guardano invece "esiste ALMENO un dispositivo con questa
   capacità", vero per iPad+trackpad, falso per touch puro senza alcun mouse/
   trackpad mai collegato (telefono, iPad senza Magic Keyboard) — stessa
   protezione di prima per quei casi. */
@media (any-hover: hover) and (any-pointer: fine) {
  .home-menu-item:hover { background: var(--menu-sel); border-radius: 8px; padding-left: 12px; padding-right: 12px; }
}
.home-menu-item img { width: 36px; height: 36px; object-fit: contain; flex-shrink: 0; }
.home-menu-item span { display: flex; align-items: center; gap: 8px; }
/* Allargato per corrispondere all'inset del filetto header (16px), non al
   padding rientrato (60px) del contenuto testo/icone del menu. */
.menu-divider { height: 1px; background: #e6e6e6; margin-left: -52px; }
.menu-badge {
  background: var(--accent);
  color: #000;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 10px;
  padding: 1px 7px;
}

/* ----- Inner screens (contacts, channels, teams) ----- */
.screen-inner {
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
}
.list-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 0;
}
.info-section { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 16px 20px 68px; }
.info-section p { font-size: 0.9rem; line-height: 1.6; margin-bottom: 14px; color: var(--text); }
.info-section code { font-family: 'Courier New', monospace; font-size: 0.85rem; }
.info-section h2 { font-size: 1.05rem; font-weight: 700; margin: 0 0 12px; }
.info-section h2:not(:first-child) { margin-top: 4px; }
.info-section h3 { font-size: 0.95rem; font-weight: 700; margin: 0 0 8px; display: flex; align-items: center; gap: 6px; }
.info-h3-icon { width: 18px; height: 18px; flex-shrink: 0; }
.info-section ul { padding-left: 18px; margin-bottom: 14px; }
.info-section ul li { font-size: 0.9rem; line-height: 1.6; margin-bottom: 6px; color: var(--text); }
.info-section hr { border: none; height: 1px; background: #e6e6e6; margin: 4px 0 20px -52px; }
.list-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  cursor: pointer;
  position: relative;
  user-select: none;
}
.list-item:active { background: var(--surface); }
/* Filetto della stessa larghezza di quelli in S-HOME (inset 16px/16px),
   non a tutta larghezza schermo come il border-bottom di default. */
.list-item::after {
  content: '';
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 0;
  height: 1px;
  background: #e6e6e6;
}
/* Icone allineate al titolo dell'header (che parte dopo il back-button, x≈68px) */
#contacts-list .list-item,
#teams-list .list-item {
  padding-left: 68px;
}
/* Icone allineate alla colonna posizione-2 (x=68, dopo nav+gap), non al
   titolo (posizione 3) che su Canali e' piu' rientrato per via del tag-spacer. */
#channel-list .list-item {
  padding-left: 68px;
}
.list-item-icon {
  width: 36px;
  height: 36px;
  object-fit: contain;
  flex-shrink: 0;
}
.list-item-co {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
  flex-shrink: 0;
}
.list-item-main { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.list-item-name { font-size: 0.95rem; font-weight: 400; }
.list-item-meta { font-size: 0.75rem; color: var(--text-muted); font-weight: 400; }
.list-item-preview { font-size: 0.8rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact-detail-section-header { padding: 10px 16px 4px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: var(--text-muted); }
.list-item-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.list-item-time { font-size: 0.75rem; color: var(--text-muted); }
.list-item-info-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 0.75rem;
  font-weight: 400;
  padding: 3px 10px;
  border-radius: 4px;
  width: auto;
  cursor: pointer;
}
.unread-badge {
  background: var(--accent);
  color: #000;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 10px;
  padding: 1px 7px;
  min-width: 20px;
  text-align: center;
}
.channel-status-pending {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-style: italic;
}
.list-add-row {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  position: relative;
}
.list-add-row::before {
  content: '';
  position: absolute;
  left: 16px;
  right: 16px;
  top: 0;
  height: 1px;
  background: #e6e6e6;
}
.list-add-row.selected { background: var(--menu-sel); }
.list-add-row-stack { flex-direction: column; align-items: stretch; gap: 8px; }
.btn-add-row {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  width: auto;
  display: flex;
  align-items: center;
}
.btn-add-row img { width: 36px; }

/* swipe panic reveal */
.list-item-panic-reveal {
  background: var(--danger);
  width: 56px;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
}
.list-item-panic-reveal img { width: 32px; }

/* ----- Bottom nav ----- */
.bottom-nav {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: var(--nav-bg);
  height: calc(var(--chrome-height) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  flex-shrink: 0;
  position: relative;
}
/* Filetto della stessa larghezza (rientro 16px/16px) di quello dell'header,
   non un bordo a tutta larghezza. */
.bottom-nav::before {
  content: '';
  position: absolute;
  left: 16px;
  right: 16px;
  top: 0;
  height: 3px;
  background: #e6e6e6;
}

/* ----- Tablet split layout (master+detail): Canali/Teams a sinistra,
   Chat aperta a destra, invece di sostituirsi a vicenda come su mobile ----- */
@media (min-width: 768px) {
  body.split-active { justify-content: flex-start; }

  body.split-active #screen-channels:not(.hidden),
  body.split-active #screen-teams:not(.hidden) {
    flex: none;
    width: 320px;
    max-width: 320px;
    border-right: 1px solid var(--border);
  }

  body.split-active #screen-chat:not(.hidden) {
    flex: 1 1 auto;
    max-width: none;
  }

  /* la bottom-nav del pannello destro è ridondante: il master la mostra già */
  body.split-active #screen-chat .bottom-nav {
    display: none;
  }

  /* nessun bisogno di "tornare indietro" dalla chat: il master è già
     visibile a sinistra, il pulsante non ha una destinazione sensata */
  body.split-active #screen-chat .btn-back {
    display: none;
  }
}

.chat-empty-state {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  color: var(--text-muted);
  font-size: 0.9rem;
}
.bottom-nav-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 12px;
  width: auto;
  opacity: 0.45;
  transition: opacity 0.12s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bottom-nav-btn.active { opacity: 1; }
.bottom-nav-btn.bottom-nav-home { opacity: 1; }
.bottom-nav-btn img { width: 30px; display: block; }

/* ----- Wizard screens ----- */
.screen-wizard {
  display: flex;
  flex-direction: column;
  padding: 0;
}
.wizard-steps {
  list-style: none;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
/* Tutti i passi del wizard restano nel DOM insieme (solo sfumati via
   opacity quando non attivi, mai display:none — serve per mostrare la
   linea temporale verticale) — un gesto di selezione sul codice del
   passo attivo può quindi "sconfinare" nel contenuto del passo vicino
   (es. la griglia icone del passo 2) semplicemente perché è vicino nello
   stesso flusso di pagina. user-select:none qui isola ogni passo,
   .btn-code-copy lo riattiva puntualmente più sotto nel foglio di stile
   (stessa specificità, vince per ordine — l'unico punto selezionabile
   resta il codice, non l'intero wizard).
   Scoperto da Enrico su iPad reale: selezionando il codice si
   evidenziavano le icone canale del passo "Scegli un'icona". */
.wizard-step {
  display: flex;
  gap: 14px;
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  padding-bottom: 24px;
  opacity: 0.4;
  pointer-events: none;
  transition: opacity 0.2s;
}
.wizard-step:last-child { padding-bottom: 0; }
.wizard-step.active { opacity: 1; pointer-events: auto; }
.wizard-step.done { opacity: 0.7; pointer-events: none; }

/* vertical line between steps */
.wizard-step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 10px;
  top: 24px;
  bottom: 0;
  width: 2px;
  background: var(--wizard-line);
}
.wstep-bullet {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--wizard-dot);
  flex-shrink: 0;
  margin-top: 1px;
  border: 2px solid var(--wizard-dot);
  transition: background 0.2s, border-color 0.2s;
}
.wizard-step.active .wstep-bullet {
  background: var(--accent);
  border-color: var(--accent);
}
.wizard-step.done .wstep-bullet {
  background: var(--wizard-dot-active);
  border-color: var(--wizard-dot-active);
}
.wstep-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.wstep-body p { font-size: 0.9rem; line-height: 1.6; }
.wstep-body p strong { font-weight: 700; }
.wstep-img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  flex-shrink: 0;
  opacity: 0.7;
}
.btn-wizard {
  background: var(--accent);
  color: #000;
  font-weight: 700;
  padding: 11px 18px;
  border-radius: 20px;
  width: auto;
  font-size: 0.9rem;
  align-self: flex-start;
}
.btn-wizard:disabled {
  background: var(--border);
  color: var(--text-muted);
  cursor: not-allowed;
}
.wizard-input {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 0.9rem;
  font-family: inherit;
}
/* Solo testo selezionabile, MAI un'azione al tap: su iOS Safari un
   elemento che è insieme selezionabile (user-select:all) e cliccabile
   (onclick) crea un'ambiguità di gesture che il motore risolve a favore
   di NESSUNO dei due — né il tap apre nulla, né il long-press seleziona
   (scoperto da Enrico su iPad dopo due fix falliti che assumevano fosse
   un problema di clipboard/API, non di gesture in conflitto sullo stesso
   elemento). L'azione (Condividi) vive ora in un bottone separato
   accanto, mai sovrapposto a questo. */
.btn-code-copy {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 12px 20px;
  font-size: 0.95rem;
  font-weight: 400;
  font-family: 'Courier New', monospace;
  letter-spacing: 0.04em;
  width: auto;
  text-align: center;
  transition: background 0.1s;
  -webkit-user-select: all;
  user-select: all;
  margin-bottom: 8px;
}
.btn-code-copy.active { background: var(--accent); color: #000; border-color: var(--accent); }
.wizard-status {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-style: italic;
}
.wizard-join-sep {
  position: relative;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wizard-join-sep::before {
  content: '';
  position: absolute;
  left: 16px;
  right: 16px;
  top: 0;
  height: 1px;
  background: #e6e6e6;
}
.wizard-join-btns { display: flex; gap: 8px; }
.wizard-join-btns button { flex: 1; }
.wizard-num-label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.wizard-num-input {
  width: 64px !important;
  padding: 8px !important;
  text-align: center;
}

/* icon grid in wizard */
.icon-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.icon-grid-btn {
  background: none;
  border: 2px solid transparent;
  border-radius: 50%;
  cursor: pointer;
  padding: 2px;
  width: auto;
  transition: border-color 0.12s;
}
.icon-grid-btn.selected { border-color: var(--accent); border-radius: 50%; }
.icon-grid-btn img { width: 100%; display: block; }
.icon-grid.icon-grid-4 { grid-template-columns: repeat(4, 1fr); }
/* Le icone tema sono swatch di colore rettangolari (4 fasce), non
   ritratti da ritagliare in tondo come canale/team — un bordo di
   selezione circolare lascia un anello vuoto attorno all'immagine. */
.icon-grid-4 .icon-grid-btn,
.icon-grid-4 .icon-grid-btn.selected {
  border-radius: 10px;
}

/* ----- Throws screen ----- */
.screen-throws {
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 24px;
  background: var(--bg);
}
.throws-back {
  position: absolute;
  top: 16px;
  left: 12px;
}
.throws-instruction {
  font-size: 0.95rem;
  text-align: center;
  line-height: 1.6;
  color: var(--text);
}
.throw-progress-display {
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--text-muted);
  letter-spacing: 0.05em;
}
.dice-cross {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.dice-row { display: flex; gap: 6px; justify-content: center; }
.throw-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  width: auto;
  border-radius: 12px;
  transition: transform 0.08s;
}
.throw-btn:active { transform: scale(0.93); }
.dice-face {
  width: 80px;
  height: 80px;
  display: block;
  border-radius: 14px;
}

/* ----- Chat screen ----- */
.screen-chat {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
}
.chat-header {
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--chrome-height);
  padding: 0 12px;
  background: var(--header-bg);
  border-bottom: 1px solid #e6e6e6;
  flex-shrink: 0;
}
.chat-channel-icon {
  width: 36px;
  height: 36px;
  object-fit: contain;
  flex-shrink: 0;
}
.chat-header-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.chat-contact-name {
  font-size: 0.9rem;
  font-weight: 400;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Senza questo, il long-press su mobile (soprattutto iOS Safari)
     apre prima il callout nativo di selezione testo/copia, che
     intercetta il gesto prima che scatti il menu di rinomina. */
  user-select: none;
  -webkit-touch-callout: none;
}
.chat-channel-label {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.75);
  font-weight: 400;
}
.chat-header-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.chat-recharge-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  width: auto;
}
/* Grafico a torta: pieno bianco = carica al massimo, si "scarica"
   gradualmente (spicchio bianco che si riduce) man mano che i numeri
   della sequenza vengono consumati. --pie-pct aggiornato da
   UI.updateLaneIndicator(). */
.lane-pie {
  display: block;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: conic-gradient(#fff var(--pie-pct, 100%), transparent var(--pie-pct, 100%));
}
/* Coordinamento ricarica: ho richiesto io (aspetto l'altro) vs l'altro
   ha richiesto (tocca a me) — visibile subito sull'icona stessa, non
   solo in un banner temporaneo. */
.lane-pie.mine-pending { border-style: dashed; }
.lane-pie.theirs-pending { border-color: var(--danger); }
.lane-warning {
  background: var(--accent);
  color: #000;
  font-size: 0.8rem;
  padding: 8px 14px;
  font-weight: 400;
  flex-shrink: 0;
}
.lane-warning.warning-rekey { background: var(--accent2); }
.lane-warning-actions { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.message-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.msg-date-sep {
  text-align: center;
  font-size: 0.72rem;
  color: var(--text-muted);
  background: var(--surface);
  border-radius: 10px;
  padding: 2px 12px;
  align-self: center;
  margin: 8px 0;
}
.message-bubble {
  max-width: 82%;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-self: flex-start;
}
.message-bubble.mine { align-self: flex-end; }
.msg-text-box {
  background: var(--bubble-peer);
  border: 1px solid var(--bubble-peer-border);
  border-radius: 14px 14px 14px 4px;
  padding: 10px 14px;
  font-size: 0.92rem;
  font-weight: 400;
  line-height: 1.5;
  position: relative;
  /* Stesso motivo del titolo header: senza questo il long-press apre
     prima il callout nativo di selezione testo, invece del menu
     cancella-messaggio. */
  user-select: none;
  -webkit-touch-callout: none;
}
.message-bubble.mine .msg-text-box {
  background: var(--bubble-mine);
  border-color: var(--bubble-mine-border);
  border-radius: 14px 14px 4px 14px;
}
.message-bubble.draft .msg-text-box {
  background: var(--bubble-draft);
  border-color: var(--bubble-draft-border);
}
.msg-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  padding: 0 4px;
}
.msg-time { font-size: 0.68rem; color: var(--text-muted); }
.msg-status-dot {
  width: 10px;
  height: 10px;
  object-fit: contain;
}
/* Read receipt reali (Team): "letto solo da alcuni" ha opacità ridotta,
   il badge N/Y è cliccabile per il dettaglio per-membro. */
.msg-status-partial { opacity: 0.55; }
.msg-read-count {
  font-size: 0.68rem;
  color: var(--text-muted);
  cursor: pointer;
}
/* Menu contestuale messaggio (cancella / dettaglio lettura) — popover
   leggero appeso a document.body, non un overlay fullscreen. */
.msg-menu {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 220px;
  max-width: 90vw;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.msg-menu-btn {
  background: var(--accent);
  color: #000;
  font-weight: 700;
  padding: 10px 14px;
  border-radius: 10px;
  width: auto;
  font-size: 0.85rem;
}
.msg-menu-btn.danger { background: var(--danger); color: #fff; }
.msg-menu-btn.secondary { background: var(--border); color: var(--text); }
.read-detail-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
  font-size: 0.85rem;
  color: var(--text);
}
/* L'icona cancella-messaggio è un fratello del box in una riga flex, non
   un elemento assoluto sovrapposto: sta affiancata, filetto contro
   filetto, mai a cavallo del bordo. L'ordine (sx per inviati, dx per
   ricevuti) è dato dal markup, non dal CSS — vedi renderMessages. */
.msg-row {
  display: flex;
  align-items: center;
  gap: 0;
}
.message-bubble.mine .msg-row { justify-content: flex-end; }
.msg-panic-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  width: auto;
  flex-shrink: 0;
  opacity: 1;
  display: flex;
  align-items: center;
}
.msg-panic-btn img { width: 24px; }
/* Senza pre-wrap il browser collassa i Maiusc+Invio in uno spazio: il
   vai a capo veniva inserito nel testo cifrato/decifrato correttamente
   ma non si vedeva mai in bolla. */
.msg-sender {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 2px;
}
/* Citazione del messaggio a cui si risponde — stesso slot logico di
   .msg-sender (sopra il testo), tap per saltare all'originale se ancora
   visibile nella lista corrente (vedi renderMessages). */
.msg-quote {
  border-left: 3px solid var(--accent);
  background: rgba(0, 0, 0, 0.08);
  border-radius: 6px;
  padding: 4px 8px;
  margin-bottom: 4px;
  cursor: pointer;
  font-size: 0.82rem;
}
.msg-quote.unavailable {
  color: var(--text-muted);
  font-style: italic;
  cursor: default;
  border-left-color: var(--border);
}
.msg-quote-sender { font-weight: 700; color: var(--accent); font-size: 0.72rem; }
.msg-quote-text {
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.msg-highlight { animation: msg-flash 1.2s ease; }
@keyframes msg-flash {
  0%, 100% { background: transparent; }
  30% { background: rgba(255, 200, 0, 0.25); }
}
.msg-plain { white-space: pre-wrap; word-break: break-word; }
.msg-plain strong { font-weight: 700; }
.msg-plain em { font-style: italic; }
/* Alternanza esclusiva: o chiaro o cifrato, mai insieme — l'icona in
   footer commuta la vista, non aggiunge informazione. */
.msg-cipher {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-family: 'Courier New', monospace;
  display: none;
  word-break: break-all;
}
.message-bubble.show-cipher .msg-plain { display: none; }
.message-bubble.show-cipher .msg-cipher { display: block; }

/* Fase Attachments — card allegato al posto del testo in .msg-plain,
   stesso principio di .msg-plain/.msg-cipher: alternanza esclusiva col
   ciphertext grezzo, mai un terzo stato. */
.msg-attachment-card {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.msg-attachment-name { font-weight: 600; word-break: break-word; }
.msg-attachment-size { font-size: 0.8rem; color: var(--text-muted); }
.msg-attachment-download {
  width: auto;
  padding: 4px 12px;
  border-radius: 14px;
  background: var(--accent);
  color: #fff;
  font-size: 0.8rem;
  border: none;
}

/* Fase Attachments — badge testuale, MAI l'icona ICN_ricevuto/ICN_attesa
   della spunta di lettura testo: semantiche diverse (scaricato vs. solo
   scorso in chat), deve restare inequivocabile a colpo d'occhio. */
.msg-attachment-open-status {
  font-size: 0.7rem;
  padding: 1px 8px;
  border-radius: 10px;
  border: 1px solid var(--text-muted);
  color: var(--text-muted);
}
.msg-attachment-open-status.opened {
  border-color: var(--accent);
  color: var(--accent);
}
/* Sigillo consumato — distinto sia dal badge "Aperto" (colore/bordo accent)
   sia dal pending (muted): usa --danger, coerente con altre azioni
   irreversibili dell'app (danger-zone Impostazioni). */
.msg-attachment-open-status.seal-consumed {
  border-color: var(--danger);
  color: var(--danger);
}
/* Placeholder Sigillo autocancellato — testo muted, nessuna azione
   possibile (niente bottone download/play), niente wrap dell'allegato
   normale. */
.msg-seal-consumed .msg-attachment-name {
  font-weight: 400;
  font-style: italic;
  color: var(--text-muted);
}

/* Anteprima immagine/player audio — sostituiscono la card generica solo
   per i mimetype riconosciuti (renderAttachmentPlainHtml), la card resta
   invariata per tutto il resto. */
.msg-attachment-media { display: flex; flex-direction: column; gap: 6px; }
.msg-attachment-preview {
  max-width: 100%;
  max-height: 260px;
  border-radius: 10px;
  display: block;
  object-fit: contain;
  background: var(--border);
  min-height: 80px;
  min-width: 120px;
}
.msg-attachment-preview.loading { opacity: 0.4; }
.msg-attachment-preview.preview-error { opacity: 0.4; }
.msg-attachment-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.msg-attachment-audio-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Enrico, 2026-07-12: icona play "grande quanto le icone del footer".
   Deviazione voluta dalla lettura letterale: ICN_play_bnc.png è un glifo
   BIANCO pieno (verificato via pixel), leggibile sul footer solo perché
   .bottom-nav ha sempre uno sfondo scuro fisso (--nav-bg) — la bolla
   invece no (tema 1: bolla mia #e6e6e6, quasi bianca, icona sparirebbe).
   Tenuto quindi un cerchio di sfondo --accent (garantisce contrasto in
   ogni tema, stessa variabile del bottone originale) ma ingrandito
   sensibilmente (32->40px, 16->22px) per lo stesso effetto "più grande"
   richiesto, senza reintrodurre un bug di leggibilità nei temi chiari. */
.msg-attachment-play {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.msg-attachment-play img { width: 22px; display: block; }
.msg-attachment-audio-el { max-width: 100%; height: 36px; min-width: 0; flex-shrink: 1; }
/* "Sigillo" è una sola parola breve: non deve mai spezzarsi su due righe
   (visto in verifica: lo scrubber nativo <audio controls> comprimeva la
   label costringendola a wrappare a metà). Si restringe il player nativo,
   non l'etichetta. */
.msg-sigillo-label { white-space: nowrap; flex-shrink: 0; }
/* Onda: compare solo mentre l'audio (anteprima vocale o messaggio ricevuto)
   sta effettivamente suonando, accanto al bottone play/pause. */
.msg-audio-wave { width: 22px; height: 22px; flex-shrink: 0; }
/* Eco (P14) — intestazione testuale rivelata a fine ascolto, sotto la riga
   play/nome/dimensione. Muted+corsivo: è un'anteprima accessoria, non un
   messaggio vero (stesso registro visivo di .msg-seal-consumed sopra).
   Tappabile per modificare (Enrico: il destinatario deve poter correggere/
   personalizzare il testo, vedi makeEcoTextEditable in app.js). */
.msg-eco-text {
  font-size: 0.85rem;
  font-style: italic;
  color: var(--text-muted);
  padding-left: 48px;
  cursor: pointer;
}
.msg-eco-text-input {
  width: 100%;
  min-height: 44px;
  font-size: 0.85rem;
  font-style: italic;
  font-family: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 8px;
  resize: vertical;
}

/* Toggle vista-codice: spostato fuori dalla riga di input, sovrapposto in
   basso a destra sul corpo dei messaggi, appena sopra il footer — non è
   un'azione di invio come le altre icone della riga, è una vista alternativa
   sui messaggi stessi. Ancorato al bordo SUPERIORE di .chat-input-wrap
   (bottom: 100% del proprio contenitore), non al fondo di .screen-chat:
   quest'ultimo include anche .bottom-nav sotto al footer, quindi un calc
   basato su --chrome-height da solo finiva a metà della riga di input
   invece che sopra di essa (sovrapposizione con Ferma/Invia, bug osservato
   in verifica). Così resta corretto indipendentemente da quale riga del
   footer è visibile (normale/registrazione/anteprima) e da quanto è alta. */
.chat-cipher-toggle {
  position: absolute;
  right: 12px;
  bottom: 100%;
  margin-bottom: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  z-index: 5;
}
.chat-cipher-toggle img { width: 26px; display: block; }

/* chat input */
.chat-input-wrap {
  position: relative;
  background: var(--header-bg);
  border-top: 1px solid #e6e6e6;
  /* Stessa logica di .bottom-nav: altezza base + safe-area in fondo,
     altrimenti su dispositivi con home indicator (niente tasto fisico)
     questo footer risulta più basso di .bottom-nav — visibile soprattutto
     in split-view tablet, dove i due footer stanno affiancati. */
  min-height: calc(var(--chrome-height) + env(safe-area-inset-bottom));
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.chat-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Barra di anteprima "sto rispondendo a..." — sopra la riga di input,
   stesso pattern hidden/visible di #lane-warning/#team-rejoin-banner. */
.reply-preview-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 6px 10px;
  margin-bottom: 6px;
}
.reply-preview-body { flex: 1; min-width: 0; }
.reply-preview-sender { font-size: 0.72rem; font-weight: 700; color: var(--accent); }
.reply-preview-text {
  font-size: 0.82rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.reply-preview-cancel {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  width: auto;
  color: var(--text-muted);
  font-size: 1rem;
  flex-shrink: 0;
}
.chat-circle-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  width: auto;
  flex-shrink: 0;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
.chat-circle-btn img { width: 32px; display: block; }
.emoji-picker-toggle { font-size: 1.5rem; line-height: 1; }
.emoji-picker {
  position: fixed;
  left: 50%;
  bottom: calc(var(--chrome-height) + env(safe-area-inset-bottom) + 16px);
  transform: translateX(-50%);
  width: min(340px, 92vw);
  max-height: 300px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
  z-index: 998;
}
.emoji-picker-btn {
  background: none;
  border: none;
  border-radius: 8px;
  font-size: 1.3rem;
  line-height: 1;
  padding: 8px 0;
  width: auto;
  cursor: pointer;
}
.emoji-picker-btn:active { background: var(--bg2); }
.chat-text-input {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 20px;
  padding: 10px 16px;
  font-size: 0.92rem;
  font-family: inherit;
  outline: none;
  width: auto;
  /* textarea che cresce col testo (vedi autoResizeInput in app.js) invece
     del vecchio input a riga singola, scomodo per messaggi più lunghi.
     max-height ~5 righe, poi scrolla internamente. */
  resize: none;
  overflow-y: auto;
  max-height: 110px;
  line-height: 1.4;
}
.chat-text-input:focus { border-color: var(--accent); }
.chat-send-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  width: auto;
  flex-shrink: 0;
}
.chat-send-btn img { width: 36px; display: block; }
/* Vocale — "consolle": un unico pannello (stesso trattamento visivo della
   pillola di testo/allegati) raggruppa indicatore/timer e TUTTE le icone di
   azione, invio compreso — nessun bottone isolato a parte. Riempie la riga
   (flex:1, come la textarea nella riga normale); al suo interno il timer si
   espande (flex:1) spingendo le icone in un unico blocco ravvicinato a
   destra. */
/* --surface può essere chiaro (tema chiaro: #e6e6e6) mentre le icone sono
   bianche ("bnc") — contrasto pessimo. --header-bg resta scuro/saturo in
   tutti e 4 i temi (stesso motivo per cui lo usa .chat-input-wrap), quindi
   qui coincide col colore del footer stesso invece di spiccare come pillola
   chiara sopra. */
/* Sigillo — selettore modalità (Residente/Autocancellazione), sopra la
   consolle di anteprima. .voice-preview-row porta anche .chat-input-row
   (flex row di default): qui la ribaltiamo in colonna per impilare
   selettore + consolle, invece di affiancarli. */
.voice-preview-row {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}
.seal-mode-row {
  display: flex;
  gap: 6px;
}
.seal-mode-btn {
  flex: 1;
  background: var(--header-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 6px 8px;
  font-size: 0.72rem;
  color: var(--text-muted);
  cursor: pointer;
  text-align: center;
}
.seal-mode-btn.active {
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 700;
}
.voice-console {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  background: var(--header-bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 6px 8px 6px 14px;
  min-width: 0;
}
.voice-console .chat-circle-btn img { width: 26px; }
.voice-rec-wave {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  animation: voice-rec-pulse 1.2s ease-in-out infinite;
}
@keyframes voice-rec-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
/* Colore fisso, non var(--text): stesso motivo di .screen-title (vedi
   commento lì) — --text è tarato per il contrasto sul BODY, che in alcuni
   temi è chiaro, mentre la consolle usa --header-bg (scuro/saturo in tutti
   i temi). dark-on-dark altrimenti illeggibile in quei temi. */
.voice-rec-label {
  flex: 1;
  font-size: 0.85rem;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ----- Settings ----- */
.screen-inner .settings-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.settings-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.9rem;
  font-weight: 400;
}
.settings-row select { width: auto; min-width: 140px; }
.account-username { font-size: 1.3rem; font-weight: 700; }
.settings-section {
  position: relative;
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.settings-section::before {
  /* .settings-body ha gia' 16px di padding: qui basta 0/0 per ottenere
     lo stesso inset assoluto (16px) degli altri filetti */
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: #e6e6e6;
}
.settings-section h3 { font-size: 0.9rem; font-weight: 400; }
/* Margine maggiorato rispetto alle altre sezioni: separazione netta da
   "Aggiorna app" appena sopra, per non confondere le due azioni — una
   aggiorna l'app, l'altra cancella tutti i dati (Enrico, 2026-07-06). */
.danger-zone { margin-top: 32px; }

/* ----- Panic overlay ----- */
.overlay-panic {
  position: fixed;
  inset: 0;
  background: var(--panic-bg);
  z-index: 999;
}
/* #overlay-panic va sempre sopra qualunque altro overlay (es. il pannello
   ricarica Team, che apre una conferma di espulsione con showPanic): a
   parità di z-index vincerebbe l'ultimo nel DOM, nascondendo la conferma. */
#overlay-panic {
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 480px;
  margin: 0 auto;
}
.panic-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 40px 28px;
  gap: 20px;
  width: 100%;
}
.panic-back { align-self: flex-start; margin-bottom: -4px; }
.panic-title {
  font-size: 1.4rem;
  font-weight: 400;
  align-self: flex-start;
}
.panic-desc {
  font-size: 0.9rem;
  line-height: 1.6;
  align-self: flex-start;
}
.btn-panic-target {
  background: var(--danger);
  color: #fff;
  font-weight: 700;
  border-radius: 8px;
  padding: 14px 24px;
  font-size: 1rem;
  width: 100%;
}
.panic-ring {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  border: 36px solid var(--danger);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 16px;
}
.panic-ring span {
  font-size: 1rem;
  font-weight: 400;
  color: var(--text);
}
.panic-nav { width: 100%; }

/* ----- Pannello stato ricarica Team ----- */
.team-recharge-body {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding: 16px;
  overflow-y: auto;
}
#team-recharge-member-list .list-item { justify-content: space-between; }
/* Badge di stato reale (tracciato lato server, non un'approssimazione):
   pronto/in attesa/espulso — vedi memoria recharge_architecture. */
.recharge-badge {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 10px;
  flex-shrink: 0;
}
.recharge-badge-ready { background: #2e7d32; color: #fff; }
.recharge-badge-waiting { background: var(--danger); color: #fff; }
.recharge-badge-removed { background: var(--border); color: var(--text-muted); }
.btn-expel-member {
  background: none;
  border: 1px solid var(--danger);
  color: var(--danger);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 10px;
  width: auto;
  margin-left: 8px;
  flex-shrink: 0;
}

/* ----- QR / video ----- */
#qr-display, #team-qr-display {
  background: white;
  padding: 10px;
  border-radius: 8px;
  align-self: flex-start;
}
#qr-display img, #team-qr-display img { display: block; width: 160px; height: 160px; }
#qr-scan-video { width: 100%; border-radius: 8px; background: black; }
#qr-countdown, #qr-countdown-team {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.list-item-pending { opacity: 0.6; cursor: default; }
/* Canale/team attualmente aperto in chat: banda grigia nella lista
   (rilevante soprattutto nel layout a due pannelli su tablet). */
.list-item.active-channel { background: rgba(128, 128, 128, 0.25); }
.list-item.active-channel .list-item-name { font-weight: 700; }

/* ----- Toast (avvisi in-app cross-schermata) ----- */
/* Sfondo/testo fissi, non legati a --nav-bg/--text: quelle due variabili
   si invertono insieme per tema (sfondo scuro+testo chiaro in alcuni temi,
   il contrario in altri), ma non sono state pensate per essere abbinate
   fra loro — nei temi chiari risultavano entrambe scure, testo quasi
   invisibile sul suo stesso sfondo (Enrico, 2026-07-05). Un toast è un
   overlay transitorio sopra qualunque schermata: deve restare leggibile
   a prescindere dal tema attivo, non seguirlo.
*/
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 20px);
  background: #232120;
  color: #e6e6e6;
  padding: 12px 20px;
  border-radius: 10px;
  font-size: 0.9rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  z-index: 9998;
  opacity: 0;
  transition: opacity 0.25s, transform 0.25s;
  max-width: 90vw;
  text-align: center;
}
.toast.toast-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}
/* anchorEl: left/bottom sono già in px inline (vedi UI.showToast), qui
   serve solo il centraggio orizzontale sul punto passato. */
.toast.toast-anchored {
  transform: translateX(-50%) translateY(6px);
}
.toast.toast-anchored.toast-visible {
  transform: translateX(-50%) translateY(0);
}
.toast-action-row {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
}
.toast-action-btn {
  background: var(--accent2, #fbbe5e);
  color: #000;
  border: none;
  border-radius: 16px;
  padding: 6px 14px;
  font-size: 0.85rem;
  font-weight: 700;
  width: auto;
  flex-shrink: 0;
  white-space: nowrap;
}

/* ----- Badge sigla schermata (riferimento dev) ----- */
#sigla-badge {
  position: fixed;
  top: 62px;
  right: 6px;
  z-index: 9999;
  font-family: monospace;
  font-size: 0.7rem;
  color: #0f0;
  background: rgba(0, 0, 0, 0.6);
  padding: 2px 6px;
  border-radius: 4px;
  pointer-events: none;
  user-select: none;
}