/* Interfaccia pensata per il telefono: tema scuro fisso, aree di tocco grandi,
   rispetto del notch e della barra gesti dell'iPhone. */

:root {
  --sfondo: #0c0a1e;
  --sfondo-alto: #16123099;
  --superficie: #191534;
  --superficie-alta: #221d44;
  --bordo: #2e2857;
  --testo: #eceaf6;
  --testo-tenue: #9a95bd;
  --accento: #7de2d1;
  --accento-scuro: #46b8a6;
  --viola: #6b8af5;
  --pericolo: #ff6b7d;
  --verde: #4ade80;

  --raggio: 16px;
  --sicura-top: env(safe-area-inset-top, 0px);
  --sicura-bottom: env(safe-area-inset-bottom, 0px);

  color-scheme: dark;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

/* Diverse regole qui sotto impostano `display`, e cosi' facendo battono la
   regola del browser per l'attributo `hidden`. Senza questa riga gli elementi
   nascosti resterebbero visibili e intercetterebbero i tocchi. */
[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  height: 100%;
  overscroll-behavior: none;
}

body {
  background: var(--sfondo);
  color: var(--testo);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  /* Evita che iOS ingrandisca il testo ruotando il telefono. */
  -webkit-text-size-adjust: 100%;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 650;
  letter-spacing: -0.01em;
}
h1 {
  font-size: 2rem;
}
h2 {
  font-size: 1.15rem;
}
h3 {
  font-size: 1rem;
}

/* ------------------------------------------------------------ schermate */

.screen {
  display: none;
  flex-direction: column;
  position: fixed;
  inset: 0;
  padding-top: var(--sicura-top);
  padding-bottom: var(--sicura-bottom);
  /* Rete di sicurezza. Le schermate fatte di .hero + .stack (codice di sblocco,
     scelta del nome) non hanno un'area che scorre: se il contenuto non ci sta
     sfora e viene tagliato dal bordo, e il pulsante principale diventa
     irraggiungibile. Succedeva davvero sul telefono, dove la barra degli
     indirizzi del browser si mangia un pezzo di schermo e la schermata di
     creazione mostra due campi invece di uno. Dove invece c'e' gia' un .content
     che scorre, questa riga non cambia niente. */
  overflow-y: auto;
  overscroll-behavior: contain;
}

.screen[data-attiva] {
  display: flex;
}

.content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 20px;
}

.center-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 16px;
}

/* ------------------------------------------------------------ benvenuto */

.hero {
  /* Cresce per riempire lo spazio libero ma non si comprime sotto la propria
     altezza naturale. Lasciarlo comprimere all'infinito sembrava la soluzione
     furba — il modulo sotto restava sempre dentro lo schermo — ma con
     `justify-content: flex-end` il contenuto trabocca verso l'alto: misurato su
     uno schermo da 450px, l'icona finiva a -169px, cioe' tagliata via. Meglio
     che sia la schermata a scorrere (vedi `overflow-y` su .screen). */
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 32px 24px 8px;
}

.hero-icon {
  border-radius: 22px;
  box-shadow: 0 12px 40px #6b8af53d;
}

.lede {
  margin: 0;
  color: var(--testo-tenue);
  max-width: 34ch;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* Il margine per la barra gesti dell'iPhone lo mette gia' .screen: sommarlo
     di nuovo qui lasciava un vuoto doppio in fondo, ed era una delle ragioni
     per cui il pulsante finiva oltre il bordo. */
  padding: 24px 20px;
}

/* ------------------------------------------------------------ barra alta */

.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--bordo);
  background: var(--sfondo-alto);
  backdrop-filter: blur(12px);
}

.topbar h2 {
  flex: 1;
}

.identity {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}

.identity strong {
  font-size: 1.05rem;
}

.identity small {
  color: var(--testo-tenue);
  font-size: 0.8rem;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--testo-tenue);
  flex: none;
}
.dot[data-stato='online'] {
  background: var(--verde);
  box-shadow: 0 0 8px var(--verde);
}
.dot[data-stato='connessione'] {
  background: #f5c26b;
}

/* ------------------------------------------------------------ controlli */

.btn {
  appearance: none;
  border: 0;
  border-radius: var(--raggio);
  padding: 15px 20px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.12s ease, opacity 0.12s ease;
}
.btn:active {
  transform: scale(0.98);
}
.btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.btn-primary {
  background: linear-gradient(140deg, var(--accento), var(--accento-scuro));
  color: #06231e;
}

.btn-ghost {
  background: transparent;
  color: var(--testo-tenue);
  border: 1px solid var(--bordo);
}

.btn-danger {
  background: transparent;
  color: var(--pericolo);
  border: 1px solid #5a2a38;
}

.row {
  display: flex;
  gap: 10px;
  width: 100%;
  max-width: 380px;
}
.row > .btn {
  flex: 1;
}

.icon-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--testo);
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  cursor: pointer;
}
.icon-btn:active {
  background: #ffffff14;
}
.icon-btn.accent {
  color: var(--accento);
}

.icon-btn svg,
.round-btn svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.field span {
  font-size: 0.9rem;
  color: var(--testo-tenue);
}

input {
  appearance: none;
  width: 100%;
  padding: 15px 16px;
  border-radius: var(--raggio);
  border: 1px solid var(--bordo);
  background: var(--superficie);
  color: var(--testo);
  /* Sotto i 16px Safari fa lo zoom automatico sul campo. */
  font: inherit;
  font-size: 16px;
}
input:focus {
  outline: 2px solid var(--accento);
  outline-offset: 1px;
}

.hint {
  margin: 0;
  color: var(--testo-tenue);
  font-size: 0.85rem;
}
.hint.center {
  text-align: center;
}

/* ------------------------------------------------------------ contatti */

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 48px 16px;
}

.empty-glyph {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px dashed var(--bordo);
  color: var(--testo-tenue);
}
.empty-glyph svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.empty .btn {
  margin-top: 8px;
}

.contatti {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contatto {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: var(--raggio);
  background: var(--superficie);
  border: 1px solid var(--bordo);
  cursor: pointer;
}
.contatto:active {
  background: var(--superficie-alta);
}

.contatto-nome {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.contatto-nome strong {
  font-weight: 600;
}
.contatto-nome small {
  color: var(--testo-tenue);
  font-size: 0.82rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pallino {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 650;
  background: linear-gradient(140deg, var(--viola), #4c2f8f);
  color: #fff;
}

.badge {
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: var(--accento);
  color: #06231e;
  font-size: 0.75rem;
  font-weight: 700;
  display: grid;
  place-items: center;
}

/* ------------------------------------------------------------ accoppiamento */

.tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: var(--raggio);
  background: var(--superficie);
  margin-bottom: 20px;
}

.tab {
  flex: 1;
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--testo-tenue);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 10px;
  border-radius: 12px;
  cursor: pointer;
}
.tab.is-active {
  background: var(--superficie-alta);
  color: var(--testo);
}

.tabpanel {
  display: none;
  flex-direction: column;
  gap: 16px;
}
.tabpanel.is-active {
  display: flex;
}

.qr-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.qr {
  width: min(62vw, 240px);
  aspect-ratio: 1;
  padding: 12px;
  border-radius: var(--raggio);
  background: #fff;
  display: grid;
  place-items: center;
}
.qr svg {
  width: 100%;
  height: 100%;
  display: block;
  shape-rendering: crispEdges;
}

.codice {
  font-size: 2.1rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  font-variant-numeric: tabular-nums;
  color: var(--accento);
}

.codice-input {
  text-align: center;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Il codice di sblocco puo' essere una frase di piu' parole: niente maiuscole
   forzate, niente spaziatura da codice a sei cifre. */
.codice-input.frase {
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  text-transform: none;
}

.forza {
  margin: -4px 0 0;
  font-size: 0.9rem;
  color: var(--testo-tenue);
  text-align: center;
}
.forza[data-livello='debole'] {
  color: var(--pericolo);
}
.forza[data-livello='medio'] {
  color: var(--accento);
}
.forza[data-livello='buono'] {
  color: var(--verde);
}

.scanner {
  width: 100%;
  border-radius: var(--raggio);
  background: #000;
  aspect-ratio: 1;
  object-fit: cover;
}

/* ------------------------------------------------------------ impronta */

.impronta {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.9;
  color: var(--accento);
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 16px 20px;
  max-width: 340px;
  word-spacing: 0.4em;
}
.impronta.piccola {
  font-size: 0.95rem;
  color: var(--testo-tenue);
}

/* ------------------------------------------------------------ chat */

.messaggi {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bolla {
  max-width: 78%;
  padding: 10px 14px;
  border-radius: 18px;
  background: var(--superficie-alta);
  word-wrap: break-word;
  overflow-wrap: anywhere;
  align-self: flex-start;
  border-bottom-left-radius: 6px;
  animation: entra 0.18s ease;
}

.bolla.mio {
  align-self: flex-end;
  background: linear-gradient(140deg, var(--accento-scuro), #2f8f80);
  color: #04211c;
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 6px;
}

.bolla.effimero {
  border: 1px dashed #ffffff3d;
}

.bolla-meta {
  display: block;
  margin-top: 4px;
  font-size: 0.68rem;
  opacity: 0.65;
}

.bolla.svanisce {
  animation: svanisci 0.5s ease forwards;
}

/* ------------------------------------------------------------ allegati */

.nascosto {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  overflow: hidden;
}

.bolla.con-file {
  max-width: 84%;
}

.allegato {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 190px;
}

.allegato-icona {
  width: 40px;
  height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #ffffff26;
}
.allegato-icona svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.allegato-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.allegato-nome {
  font-weight: 600;
  font-size: 0.92rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.allegato-stato {
  font-size: 0.75rem;
  opacity: 0.75;
}

/* Anteprima delle immagini direttamente nella conversazione: sul telefono
   e' molto piu' comodo che scaricarle per guardarle. */
.allegato-anteprima {
  display: block;
  width: 100%;
  max-height: 320px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 6px;
  background: #00000033;
}

.avanzamento {
  height: 4px;
  border-radius: 2px;
  background: #ffffff2e;
  overflow: hidden;
  margin-top: 6px;
}
.avanzamento span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 2px;
  background: currentColor;
  transition: width 0.15s linear;
}

.bolla[data-stato='fallito'] .allegato-stato {
  color: var(--pericolo);
  opacity: 1;
}
.bolla.mio[data-stato='fallito'] .allegato-stato {
  color: #5c0a16;
}

.allegato-azione {
  appearance: none;
  border: 0;
  background: #ffffff26;
  color: inherit;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: 10px;
  cursor: pointer;
  flex: none;
}
.allegato-azione:active {
  transform: scale(0.96);
}

.sistema {
  align-self: center;
  color: var(--testo-tenue);
  font-size: 0.8rem;
  text-align: center;
  padding: 4px 12px;
}

@keyframes entra {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

@keyframes svanisci {
  to {
    opacity: 0;
    transform: scale(0.9);
    filter: blur(3px);
  }
}

.composer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--bordo);
  background: var(--sfondo-alto);
}

.composer-input {
  flex: 1;
  border-radius: 22px;
  padding: 12px 16px;
}

.composer .icon-btn[data-modo='effimero'] [data-icon='permanente'],
.composer .icon-btn[data-modo='permanente'] [data-icon='effimero'] {
  display: none;
}
.composer .icon-btn[data-modo='effimero'] {
  color: var(--accento);
}

.modo-nota {
  margin: 0;
  padding: 0 16px 10px;
  font-size: 0.75rem;
  color: var(--testo-tenue);
  text-align: center;
}

/* ------------------------------------------------------------ chiamata */

.screen-chiamata {
  background: radial-gradient(circle at 50% 22%, #2a1c64, var(--sfondo) 62%);
  justify-content: space-between;
  text-align: center;
}

.chiamata-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
}

.avatar {
  width: 116px;
  height: 116px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 2.8rem;
  font-weight: 650;
  background: linear-gradient(140deg, var(--viola), #4c2f8f);
  color: #fff;
}

.screen-chiamata[data-fase='in-arrivo'] .avatar,
.screen-chiamata[data-fase='uscente'] .avatar {
  animation: pulsa 1.8s ease-in-out infinite;
}

@keyframes pulsa {
  0%,
  100% {
    box-shadow: 0 0 0 0 #7de2d140;
  }
  50% {
    box-shadow: 0 0 0 22px #7de2d100;
  }
}

.chiamata-stato {
  margin: 0;
  color: var(--testo-tenue);
  font-variant-numeric: tabular-nums;
}

/* Indicatore della qualita' della linea durante la chiamata. */

.qualita {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  font-size: 0.82rem;
  color: var(--testo-tenue);
  min-height: 1.4em;
}

.tacche {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
}
.tacche i {
  width: 3px;
  border-radius: 1px;
  background: var(--bordo);
}
.tacche i:nth-child(1) {
  height: 5px;
}
.tacche i:nth-child(2) {
  height: 8px;
}
.tacche i:nth-child(3) {
  height: 12px;
}

.screen-chiamata[data-linea='buona'] .tacche i {
  background: var(--verde);
}
.screen-chiamata[data-linea='incerta'] .tacche i:nth-child(-n + 2) {
  background: #f5c26b;
}
.screen-chiamata[data-linea='pessima'] .tacche i:nth-child(1) {
  background: var(--pericolo);
}
.screen-chiamata[data-linea='ripresa'] .tacche i {
  background: var(--pericolo);
  animation: lampeggia 1s ease-in-out infinite;
}
.screen-chiamata[data-linea='ripresa'] .chiamata-stato {
  color: var(--pericolo);
}

@keyframes lampeggia {
  50% {
    opacity: 0.25;
  }
}

/* Il menu a tendina nelle impostazioni. */
.scelta {
  appearance: none;
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--raggio);
  border: 1px solid var(--bordo);
  background: var(--superficie-alta);
  color: var(--testo);
  font: inherit;
  font-size: 16px;
}

.chiamata-azioni {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 28px;
  padding: 24px 24px calc(48px + var(--sicura-bottom));
}

.round-btn {
  appearance: none;
  border: 0;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #ffffff1f;
  color: var(--testo);
  cursor: pointer;
  transition: transform 0.12s ease;
}
.round-btn:active {
  transform: scale(0.93);
}
.round-btn svg {
  width: 26px;
  height: 26px;
}

.round-btn-answer {
  background: var(--verde);
  color: #052e16;
}
.round-btn-hangup {
  background: var(--pericolo);
  color: #3d0a13;
}
.round-btn-hangup svg {
  transform: rotate(135deg);
}

/* Il pulsante "rispondi" esiste solo mentre squilla. */
.screen-chiamata:not([data-fase='in-arrivo']) [data-action='rispondi'] {
  display: none;
}
.screen-chiamata[data-fase='in-arrivo'] [data-action='muto'] {
  visibility: hidden;
}

.round-btn[data-attivo='si'] {
  background: var(--testo);
  color: var(--sfondo);
}
.round-btn[data-attivo='si'] [data-icon='mic'],
.round-btn:not([data-attivo='si']) [data-icon='mic-off'] {
  display: none;
}

/* ------------------------------------------------------------ vari */

.card {
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 18px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}
.card .btn {
  align-self: stretch;
}
.card-danger {
  border-color: #5a2a38;
}

.version {
  text-align: center;
  color: var(--testo-tenue);
  font-size: 0.75rem;
}

.installa {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(12px + var(--sicura-bottom));
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 8px 12px 16px;
  border-radius: var(--raggio);
  background: var(--superficie-alta);
  border: 1px solid var(--bordo);
  box-shadow: 0 12px 36px #00000066;
}
.installa p {
  margin: 0;
  flex: 1;
  font-size: 0.85rem;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(28px + var(--sicura-bottom));
  transform: translateX(-50%);
  z-index: 30;
  max-width: min(90vw, 400px);
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--superficie-alta);
  border: 1px solid var(--bordo);
  box-shadow: 0 12px 36px #00000066;
  font-size: 0.88rem;
  text-align: center;
  animation: entra 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==================================================== schermi non-telefono

   Tutto quello che sta sopra e' disegnato per un telefono in verticale, che
   resta il modo in cui l'app viene usata. Da qui in giu' ci sono solo le
   correzioni per gli altri casi: tablet, telefono coricato, schermo grande.

   L'idea di fondo e' una sola: su uno schermo largo l'app non si spalma, resta
   una colonna centrata. Una conversazione a due non guadagna niente a essere
   larga mezzo metro — le righe diventano illeggibili, i pulsanti finiscono
   lontani dai pollici e le bolle dei messaggi si sfilacciano. */

/* ------------------------------------------- tablet e schermi larghi */

@media (min-width: 640px) {
  /* Fuori dalla colonna si vede lo sfondo, un po' piu' cupo: fa leggere
     l'app come un oggetto appoggiato sopra, non come una pagina slavata. */
  body {
    background: radial-gradient(circle at 50% 0%, #141033, #07061a 70%);
  }

  /* La schermata e' `position: fixed; inset: 0`: con un tetto alla larghezza
     e i margini automatici si centra da sola, e tutto quello che contiene —
     barra in alto, contenuto, campo di scrittura — si allinea di conseguenza.
     Una modifica sola invece di una per ogni pezzo. */
  .screen {
    max-width: 560px;
    margin-inline: auto;
    border-inline: 1px solid var(--bordo);
    box-shadow: 0 0 80px #00000080;
  }

  /* Con piu' spazio intorno il contenuto puo' respirare. */
  .content {
    padding: 24px 28px;
  }

  .messaggi {
    padding: 20px 22px;
  }

  /* Su un tablet il codice QR viene inquadrato da un telefono tenuto a mezzo
     metro: piccolo com'era diventava difficile da leggere. */
  .qr {
    width: 300px;
  }

  .impronta {
    font-size: 1.35rem;
    max-width: 380px;
  }
}

@media (min-width: 1024px) {
  .screen {
    max-width: 600px;
  }

  /* Un tablet si tiene piu' lontano di un telefono: il testo va un filo piu'
     grande, non perche' lo schermo sia grande ma perche' l'occhio e' distante. */
  body {
    font-size: 17px;
  }

  .qr {
    width: 340px;
  }
}

/* ------------------------------------------- schermi bassi in verticale

   Non e' un caso raro: e' il telefono normale dentro il browser, dove la barra
   degli indirizzi si mangia una fetta di schermo. Sommata al campo "Ripetilo"
   che compare solo in fase di creazione, bastava a spingere il pulsante Crea
   oltre il bordo. Lo scorrimento su .screen fa da rete, ma e' meglio che il
   pulsante si veda senza doverlo cercare: qui si stringe la parte decorativa,
   che e' quella che non porta informazione. */

@media (max-height: 820px) and (orientation: portrait) {
  .hero {
    padding: 16px 24px 4px;
    gap: 8px;
  }

  .hero-icon {
    width: 68px;
    height: 68px;
  }

  h1 {
    font-size: 1.7rem;
  }

  .stack {
    padding: 16px 20px;
    gap: 12px;
  }
}

/* --------------------------------------------- telefono coricato

   Poca altezza e molta larghezza: e' il caso che rompe di piu', perche' tutto
   qui e' impaginato in colonna. Si stringe in verticale e si rimpicciolisce
   quello che occupa altezza senza dare informazione. */

@media (max-height: 500px) and (orientation: landscape) {
  .hero {
    padding: 12px 24px 4px;
    gap: 6px;
  }

  .hero-icon {
    width: 64px;
    height: 64px;
  }

  h1 {
    font-size: 1.5rem;
  }

  .stack {
    padding: 12px 20px calc(12px + var(--sicura-bottom));
    gap: 10px;
  }

  .content {
    padding: 12px 20px;
  }

  /* Nella schermata di chiamata l'avatar e' decorativo: e' la prima cosa che
     puo' rimpicciolirsi per far stare i pulsanti dentro lo schermo. */
  .chiamata-body {
    gap: 8px;
    padding: 10px 24px;
  }

  .avatar {
    width: 72px;
    height: 72px;
    font-size: 1.7rem;
  }

  .qr {
    width: min(38vh, 200px);
  }

  .codice {
    font-size: 1.6rem;
  }
}

/* ------------------------------------------- dita invece del mouse

   Su uno schermo tattile i bersagli piccoli si sbagliano, e qui si sbagliano
   mentre squilla il telefono. 48px e' il minimo consigliato da tutte le linee
   guida di accessibilita'. */

@media (pointer: coarse) {
  .btn {
    min-height: 50px;
  }

  .tab {
    min-height: 44px;
  }

  .contatto {
    min-height: 64px;
  }
}