/* ==========================================================================
   LA BARRA IN BASSO DEL TELEFONO (2026-09-16). Quattro voci con icona ed etichetta, quella
   della pagina in blu. Visibile sotto i 48rem e fino a 64rem sui dispositivi touch,
   per mantenere i comandi anche quando il telefono viene girato in orizzontale.
   Su PC la navigazione resta il menu a sinistra.
   ========================================================================== */

.barra-mobile {
  display: none;
}

:root {
  --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
  --mobile-nav-height: calc(61px + max(8px, var(--mobile-safe-bottom)));
}

@media (max-width: 48rem), (max-width: 64rem) and (pointer: coarse) {
  .barra-mobile {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    /* Sopra l'header sticky (20), sotto il pannello di Marina (30) e il menu (40). */
    z-index: 25;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    /* La riga di sistema dell'iPhone si mangia il fondo dello schermo: la barra si alza da sé. */
    padding: 0 max(8px, env(safe-area-inset-right, 0px)) max(8px, var(--mobile-safe-bottom)) max(8px, env(safe-area-inset-left, 0px));
    border-top: 1px solid var(--border);
    background: var(--surface);
    box-shadow: 0 -2px 12px rgba(16, 24, 40, 0.08);
    /* Una barra di comandi non si seleziona col dito tenuto premuto. */
    user-select: none;
    -webkit-user-select: none;
  }

  .barra-voce {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.15rem;
    align-items: center;
    justify-content: center;
    /* 60px di altezza: il dito ci arriva senza mirare. */
    min-height: 60px;
    padding: 0.4rem 0.2rem;
    color: var(--gray-text);
    text-decoration: none;
    /* Niente lampo grigio e niente attesa del doppio tocco. */
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  .barra-voce:hover {
    color: var(--navy);
  }

  .barra-icona {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .barra-icona .icon {
    width: 1.4rem;
    height: 1.4rem;
  }

  .barra-nome {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.25;
    white-space: nowrap;
  }

  /* La pagina in cui si è: icona e nome in blu, come nelle app. */
  .barra-voce.is-attiva {
    color: var(--navy);
    background: var(--azure-soft);
    border-radius: var(--radius-small);
  }

  .barra-voce.is-attiva .barra-nome {
    font-weight: 700;
  }

  /* Il lavoro che aspetta, sul bordo dell'icona: stessa pastiglia della barra dei passi. */
  .barra-badge {
    position: absolute;
    top: -0.35rem;
    right: -0.55rem;
    min-width: 1.05rem;
    padding: 0 0.25rem;
    border-radius: 999px;
    background: var(--corallo);
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1.05rem;
    text-align: center;
    color: #ffffff;
  }

  /* Il contenuto della pagina non finisce sotto la barra. */
  .app-main {
    padding-bottom: calc(var(--mobile-nav-height) + 1.25rem);
  }

  /* La barra dei cinque passi in cima diventa un doppione della barra in basso. */
  .funnel-nav {
    display: none;
  }

  /* Sul telefono il menu mostra solo le pagine dei commerciali: gli acquisti e
     l'amministrazione restano su tablet e PC (shared/_sidebar.html.erb). */
  .app-sidebar-section.is-solo-grande {
    display: none;
  }
}

/* ==========================================================================
   L'AGENDA SUL TELEFONO: si apre e si vede la GIORNATA, non i comandi.
   ========================================================================== */

@media (max-width: 48rem) {
  /* «Nuovo evento» sta già nella barra in basso, al centro: in testa è lo stesso tasto due volte. */
  .agenda-nuovo {
    display: none;
  }

  /* La mappa va DOPO la giornata, non prima: aprendo l'agenda si deve vedere COSA si fa, e solo
     scorrendo DOVE. In cima (scelta del 13/09) la prima visita finiva sotto la piega. */
  .agenda-mappa-blocco {
    order: 1;
  }

  .agenda-mappa {
    height: 34vh;
    min-height: 200px;
  }

  /* La riga di spiegazione sotto il titolo su un telefono ruba solo spazio. */
  .agenda-lead,
  .visite-lead {
    display: none;
  }
}

/* ==========================================================================
   IL GUSCIO SUL TELEFONO (2026-09-16): «deve sembrare una app nativa».
   Testata compatta con navigazione esplicita, anche nella PWA senza comandi del browser.
   ========================================================================== */

@media (max-width: 48rem) {
  /* La PWA non ha i comandi del browser: le frecce restano sempre disponibili. */
  .header-history {
    display: inline-flex;
    gap: 0.15rem;
  }

  .header-left {
    gap: 0.15rem;
  }

  .app-brand {
    flex: 1 1 auto;
    justify-content: center;
  }

  .app-logo {
    width: 100%;
    max-width: 72px;
    height: auto;
  }

  .app-header {
    padding: 0 0.6rem;
    gap: 0.4rem;
  }

  .header-actions {
    gap: 0.25rem;
  }

  /* Le azioni in alto a destra sono due tondi: notifiche e Marina. */
  .btn-assistant span {
    display: none;
  }

  /* Solo i tondi DELLA TESTATA: la stessa classe la usano i tasti dentro le schede
     («Prepara il listino», «Scheda»), e a 40 px si accartocciavano (16/09). */
  .app-header .btn-header {
    width: 40px;
    min-width: 40px;
    padding: 0;
    justify-content: center;
  }

  .btn-campanella .icon,
  .btn-assistant .icon {
    width: 1.25rem;
    height: 1.25rem;
  }

  /* Un titolo per pagina, non tre righe: via l'occhiello e la frase di spiegazione. */
  .app-main .eyebrow,
  .page-head .eyebrow {
    display: none;
  }

  .agenda-testa h2,
  .visite-testa h2,
  .page-head h2 {
    margin: 0 0 0.6rem;
    font-size: 1.35rem;
    line-height: 1.2;
  }

  .page-lead {
    display: none;
  }
}

/* Questi tre pezzi ESISTONO SOLO sul telefono: spenti di base e accesi dalla media query qui
   sotto, come fa .barra-mobile. Spegnerli con una seconda media query «da 48.0625rem in su»
   lasciava un buco: a 768,5 px non valeva nessuna delle due e si vedevano griglia ED elenco. */
.agenda-lista,
.agenda-mese-punti,
.agenda-mese-tocco {
  display: none;
}

/* ==========================================================================
   IL CALENDARIO SUL TELEFONO: «deve essere più come Google Calendar».
   Una riga di comandi sola, la settimana come elenco, il mese coi puntini.
   ========================================================================== */

@media (max-width: 48rem) {
  /* I tre segmenti a tutta larghezza, come il selettore di un'app. */
  .agenda-controlli .grid-chart-presets {
    display: flex;
    width: 100%;
    padding: 0.25rem;
  }

  .agenda-controlli .grid-chart-preset {
    flex: 1 1 0;
    text-align: center;
  }

  /* Le pastiglie dei colleghi diventano una riga che scorre, senza andare a capo: occupavano
     due righe intere prima di arrivare al calendario. */
  .agenda-consulenti {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 0.2rem;
  }

  .agenda-consulenti .crm-chip {
    flex: none;
  }

  /* LA SETTIMANA: elenco, non griglia (la griglia a sette colonne su 390 px è illeggibile). */
  .agenda-sett {
    display: none;
  }

  .agenda-lista {
    display: grid;
    gap: 0.5rem;
    margin-top: 0.8rem;
  }

  .agenda-lista-giorno {
    display: grid;
    grid-template-columns: 3.2rem minmax(0, 1fr);
    gap: 0.6rem;
    align-items: start;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
  }

  .agenda-lista-giorno.is-vuoto {
    background: transparent;
    border-style: dashed;
  }

  .agenda-lista-testa {
    display: grid;
    justify-items: center;
    gap: 0.1rem;
  }

  .agenda-lista-nome {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--gray-text);
  }

  .agenda-lista-n {
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1;
    color: var(--ink);
  }

  .agenda-lista-giorno.is-oggi .agenda-lista-n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--navy);
    color: #ffffff;
  }

  .agenda-lista-corpo {
    display: grid;
    gap: 0.35rem;
    min-width: 0;
  }

  .agenda-lista-riga {
    display: grid;
    grid-template-columns: 3.2rem minmax(0, 1fr) auto;
    gap: 0.5rem;
    align-items: baseline;
    padding: 0.45rem 0.6rem;
    border-left: 3px solid var(--navy);
    border-radius: var(--radius-small);
    background: var(--azure-soft);
    color: var(--ink);
    text-decoration: none;
  }

  .agenda-lista-riga.is-fatto {
    border-left-color: var(--semaforo-verde);
  }

  .agenda-lista-ora {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--navy);
  }

  .agenda-lista-nome-evento {
    overflow: hidden;
    font-size: 0.95rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .agenda-lista-chi {
    font-size: 0.75rem;
    color: var(--gray-text);
  }

  /* Un giorno vuoto resta toccabile per aggiungere, ma non urla: niente sottolineatura, il
     grigio della riga. Sette «Nuovo evento» blu in colonna erano tutto quello che si vedeva. */
  .agenda-lista-vuoto {
    font-size: 0.85rem;
    color: var(--gray-logo);
    text-decoration: none;
  }

  /* La nota su Google e' roba da scrivania: sul telefono ruba mezzo schermo. */
  .agenda-nota {
    display: none;
  }

  /* IL MESE: numeri e puntini, come il calendario del telefono. Niente testo negli eventi,
     niente «+» su ogni cella: tutta la cella porta alla giornata. */
  .agenda-mese-evento,
  .agenda-mese-altre,
  .agenda-mese-aggiungi {
    display: none;
  }

  .agenda-mese-cella {
    min-height: 3.2rem;
    padding: 0.3rem 0.1rem;
    align-content: start;
    justify-items: center;
  }

  .agenda-mese-numero {
    font-size: 0.95rem;
  }

  .agenda-mese-tocco {
    position: absolute;
    inset: 0;
    z-index: 2;
  }

  .agenda-mese-punti {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 2px;
    justify-content: center;
    margin-top: 0.2rem;
  }

  .agenda-mese-punto {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--navy);
  }
}

/* ==========================================================================
   MARINA SUL TELEFONO (2026-09-16: «la chat di Marina è inguardabile dal telefono»).
   Il pannello era un cassetto largo 380 px pensato per il PC: sullo schermo del telefono
   restava bianco, senza testata visibile e con la riga di scrittura in mezzo al vuoto.
   Qui diventa una schermata intera con la sua testata in alto e la riga di scrittura
   ancorata in basso, che si alza da sé quando esce la tastiera (dvh).
   ========================================================================== */

@media (max-width: 48rem) {
  .assistant-panel {
    width: 100vw;
    max-width: 100%;
    /* L'altezza la scrive assistant_panel_controller dalla finestra VISIBILE: con la tastiera
       alzata 100dvh non si restringe su iOS e la riga di scrittura finiva sotto la tastiera. */
    height: var(--marina-altezza, 100dvh);
    border-left: 0;
  }

  /* MENTRE MARINA E' APERTA LA PAGINA SOTTO E' FERMA. Senza, un dito che scivolava oltre i
     messaggi scorreva la pagina, e su iOS trascinava anche il pannello: «quando la apro scorre
     in basso» (Mattias 2026-09-17). `top` lo mette il controller con lo scroll di prima, cosi'
     alla chiusura si torna esattamente dov'era. */
  body.is-marina-aperta {
    position: fixed;
    inset: 0;
    width: 100%;
    overflow: hidden;
    overscroll-behavior: none;
  }

  .assistant-panel-header {
    position: sticky;
    top: 0;
    z-index: 2;
    flex: none;
    padding: 0 0.8rem;
    padding-top: env(safe-area-inset-top, 0px);
    background: var(--surface);
  }

  /* I messaggi prendono tutto lo spazio che resta e scorrono solo loro. */
  .assistant-panel-messages {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0.9rem 0.8rem;
    overscroll-behavior: contain;
  }

  /* La riga di scrittura resta attaccata in fondo, sopra la riga di sistema, e i tasti della
     voce stanno SULLA riga: su 390 px una riga sola per due tondi era schermo buttato. */
  .assistant-panel-form {
    flex: none;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 0.8rem;
    padding-bottom: calc(0.7rem + env(safe-area-inset-bottom, 0px));
  }

  .assistant-panel-input-row {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* La testata e' una barra d'app: alta come quella del guscio, il tondo per chiudere grande
     quanto un pollice. */
  .assistant-panel-header {
    min-height: 3.25rem;
    height: auto;
    padding-bottom: 0.4rem;
    border-bottom-width: 1px;
  }

  .assistant-panel-iconbtn {
    width: 40px;
    height: 40px;
  }

  /* Tondi e tasto d'invio piu' stretti: la casella deve restare la cosa piu' larga della riga. */
  .assistant-panel-mic {
    width: 36px;
    height: 36px;
    flex: none;
  }

  .assistant-panel-form .btn-primary {
    padding: 0.55rem 1rem;
  }

  .assistant-panel-input {
    font-size: 1rem;
  }

  /* Il messaggio occupa quasi tutta la larghezza: le bolle strette sprecano schermo. */
  .assistant-message {
    max-width: 92%;
  }
}

/* ==========================================================================
   LA GIORNATA SUL TELEFONO (2026-09-16: «questo formato degli appuntamenti del giorno su
   telefonino nn mi fa impazzire, mi sembra poco chiaro e nn è facile da navigare»).
   Prima dell'appuntamento c'erano SEI blocchi: titolo, le tre viste, i colleghi, la striscia
   dei giorni a schede grandi, la scheda con la data e «Oggi», la scheda dei numeri del giro.
   Su 390 px sono settecento pixel di intestazione prima di leggere un'ora. Qui la striscia
   diventa la riga di numeri dei calendari del telefono e i numeri del giro una riga di testo:
   l'appuntamento sale sopra la piega.
   ========================================================================== */

@media (max-width: 48rem) {
  .agenda-navigazione {
    gap: 0.45rem;
    margin-bottom: 0.7rem;
  }

  /* LA RIGA DEI GIORNI: lettera e numero, come sul calendario del telefono. Il mese è lo stesso
     per tutti e il conteggio a parole non ci sta: al loro posto un puntino sui giorni pieni. */
  .agenda-giorno-chip-mese,
  .agenda-giorno-chip-n {
    display: none;
  }

  .agenda-giorno-chip {
    min-width: 2.85rem;
    padding: 0.4rem 0.3rem 0.45rem;
    border-radius: 999px;
  }

  .agenda-giorno-chip-nome {
    font-size: 0.62rem;
    letter-spacing: 0.02em;
  }

  .agenda-giorno-chip-data {
    font-size: 1.05rem;
  }

  /* Il puntino dice «qui c'è qualcosa» senza scriverlo: sul giorno scelto è bianco, sugli altri
     è il blu del marchio. Un giorno vuoto non ha puntino e resta sbiadito. */
  .agenda-giorno-chip:not(.is-vuoto)::after {
    content: "";
    width: 5px;
    height: 5px;
    margin-top: 0.15rem;
    border-radius: 50%;
    background: var(--navy);
  }

  .agenda-giorno-chip.is-attivo::after {
    background: #ffffff;
  }

  /* Piu' piccole per lasciare la riga ai giorni, ma non sotto i 36 px: il pollice le deve
     prendere al primo colpo. */
  .agenda-freccia {
    width: 36px;
    height: 36px;
  }

  .agenda-freccia .icon {
    width: 0.9rem;
    height: 0.9rem;
  }

  .agenda-scorri {
    gap: 0.3rem;
  }

  /* IL SALTO LUNGO resta, ma non è una scheda a tutta riga: sta accanto a «Oggi». */
  .agenda-salti {
    gap: 0.4rem;
  }

  .agenda-salti .calendario-bottone {
    min-height: 2.25rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.85rem;
  }

  .agenda-oggi-btn {
    min-height: 2.25rem;
    padding: 0.3rem 0.8rem;
  }

  /* I NUMERI DEL GIRO sono una riga, non una scheda: quanti appuntamenti, quanti km, quanto
     valgono. La scheda bianca con i numeri grandi spingeva giù il primo appuntamento. */
  .agenda-sommario {
    gap: 0.9rem;
    padding: 0;
    margin-bottom: 0.7rem;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .agenda-sommario-numeri {
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
  }

  .agenda-sommario-n {
    font-size: 1rem;
  }

  .agenda-sommario-label {
    font-size: 0.75rem;
  }

  .agenda-maps {
    min-height: 2.25rem;
    padding: 0.35rem 0.8rem;
    font-size: 0.85rem;
  }
}