/* =====================================================================
   LA CONSOLE SU UN TELEFONO
   =====================================================================
   Dal telefono non si fa dispatching: si parla. Mappa, elenco flotta ed
   eventi sono strumenti da scrivania, e su uno schermo da sei pollici
   riducono il pulsante a un francobollo — proprio la cosa che serve.

   Quindi qui resta solo cio' che serve per parlare: chi sei, su che canale,
   chi sta parlando adesso, e un pulsante grande.

   Non si tocca il DOM: l'intestazione contiene gia' tutti quei pezzi, e si
   limita a ridisporli. Cosi' il funzionamento — audio, WebSocket, floor
   control — resta esattamente lo stesso, e non ci sono due schermate da
   mantenere allineate.

   Chi vuole comunque la vista completa (per esempio da tablet) preme
   "mostra tutto": la scelta resta memorizzata. */

@media (max-width: 820px) {
  body:not(.vista-completa) main,
  body:not(.vista-completa) footer {
    display: none;
  }

  body:not(.vista-completa) #console {
    height: 100dvh;
    display: flex;
    flex-direction: column;
  }

  body:not(.vista-completa) header {
    flex: 1;
    display: grid;
    grid-template-rows: auto auto auto 1fr auto auto;
    /* La scritta PARLA sporge sotto il cerchio: senza questo margine
       finirebbe sopra la riga di chi parla. */
    row-gap: 34px;
    gap: 14px;
    padding: 14px 16px calc(16px + env(safe-area-inset-bottom));
    align-items: center;
    justify-items: center;
    text-align: center;
  }

  /* Marchio e identita' in cima, in una riga sola. */
  body:not(.vista-completa) .marchio {
    display: flex; align-items: center; gap: 10px;
  }
  body:not(.vista-completa) .marchio-img { height: 30px; width: auto; }

  body:not(.vista-completa) .stato-conn {
    font-size: .82rem; color: var(--testo-tenue);
  }

  /* Il canale: si deve poter cambiare, ed e' l'unica cosa da decidere. */
  body:not(.vista-completa) .canale-sel {
    display: flex; flex-direction: column; gap: 5px; width: 100%;
    max-width: 340px;
  }
  body:not(.vista-completa) .canale-sel label {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
    color: var(--testo-tenue);
  }
  body:not(.vista-completa) #sel-canale {
    width: 100%; padding: 11px 12px; font-size: 1rem;
    min-height: 48px;                /* si preme con il pollice */
  }

  /* ---- Il pulsante ----
     Rotondo e grande come sull'app della radio: si trova al tatto, non ha un
     verso giusto, e il pollice ci arriva senza guardare. Il diametro segue
     la larghezza dello schermo ma non supera l'altezza disponibile. */
  /* Stesso pulsante della radio: cerchio bianco, anello colorato, marchio
     a colori al centro. Su bianco il logo si legge come e' stato disegnato,
     e non serve una seconda immagine per il telefono.
     La scritta PARLA sta sotto e non dentro, altrimenti su fondo bianco
     sparirebbe — sulla radio la stessa scelta era gia' stata fatta. */
  body:not(.vista-completa) #btn-ptt {
    position: relative;
    overflow: visible;
    width: min(72vw, 46vh, 340px);
    height: min(72vw, 46vh, 340px);
    border-radius: 50%;
    padding: 0;
    display: flex; align-items: center; justify-content: center;
    background: #fff;
    border: 9px solid var(--primario);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
    -webkit-user-select: none; user-select: none;
    -webkit-touch-callout: none;
    touch-action: manipulation;
  }

  /* Mentre si parla l'anello diventa verde: il marchio resta leggibile,
     cosa che non succederebbe colorando tutto il cerchio. */
  body:not(.vista-completa) #btn-ptt:active,
  body:not(.vista-completa) #btn-ptt.attivo {
    background: #fff;
    border-color: var(--ok);
    filter: none;
    box-shadow: 0 0 26px var(--ok);
  }


  /* Il simbolo dell'azienda dentro il pulsante, reso bianco.
     Il filtro toglie il colore e lascia la sagoma: si legge sul verde a
     riposo e continua a leggersi quando il pulsante cambia stato. Funziona
     perche' il simbolo ha il fondo trasparente — su un logo rettangolare
     pieno diventerebbe un blocco bianco, ed e' per questo che il marchio.js
     lo mette solo quando un vero simbolo c'e'.
     Sulle radio la scelta e' opposta: li' il cerchio e' bianco e il marchio
     resta a colori, perche' quello schermo non ha una testata dove
     mostrarlo. */
  body:not(.vista-completa) .ptt-marchio {
    display: block;
    width: 62%; height: auto;
    /* Niente filtro: il cerchio e' bianco, il marchio va nei suoi colori. */
    pointer-events: none;
  }


  /* La parola sul pulsante si legge di sfuggita, con il telefono a mezz'aria
     e il pollice gia' sopra: va vista, non letta. */
  body:not(.vista-completa) .ptt-testo {
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    color: var(--testo);
    font-size: 1.65rem; letter-spacing: 1px;
  }


  /* Sul telefono non esiste la barra spaziatrice. */
  body:not(.vista-completa) .ptt-hint { display: none; }

  body:not(.vista-completa) #chi-parla {
    flex: none; font-size: 1.05rem; min-height: 1.4em;
  }

  body:not(.vista-completa) .utente {
    display: flex; gap: 14px; font-size: .8rem; flex-wrap: wrap;
    justify-content: center;
  }

  /* Il pannello di amministrazione resta raggiungibile, ma a schermo pieno. */
  body:not(.vista-completa) .amm-corpo {
    grid-template-columns: 1fr;
    padding: 14px 12px 40px;
  }
  body:not(.vista-completa) .amm-testa {
    flex-wrap: wrap; gap: 8px; padding: 12px 14px;
  }
  body:not(.vista-completa) .amm-testa h2 { width: 100%; }
}

/* Il marchio dentro il pulsante non c'entra nulla sulla scrivania: li' il
   pulsante e' una barra stretta accanto al selettore del canale. */
.ptt-marchio { display: none; }

/* Il collegamento per passare da una vista all'altra: piccolo e sempre
   presente, perche' una scelta che non si puo' disfare non e' una scelta. */
#btn-vista { display: none; }
@media (max-width: 820px) {
  #btn-vista { display: inline; }
}