/* mobile-bar.css — Barra strumenti INFERIORE per mobile (<768px).
   B4. NON duplica la toolbar: RILOCA la riga contestuale esistente
   (.toolbar__row--contextual) in fondo allo schermo, così i controlli (tool
   annotazioni, colore, spessore, opacità, operazioni Moduli/Pagine) restano gli
   STESSI nodi DOM con gli handler già cablati in main.js. La visibilità è già
   pilotata da setMode() via [hidden]{display:none!important}: in Vista la barra
   sparisce, negli altri modi mostra i tool della modalità. Tutto è confinato
   alla media query mobile → desktop totalmente invariato.

   Z-INDEX (contesto viewport, root ha overflow:hidden ma nessun transform → il
   position:fixed è relativo al viewport, non clippato):
     viewer/contenuto ....... auto
     .toolbar ............... 30
     BOTTOM-BAR (questa) .... 33   ← sopra toolbar/viewer
     .sidebar-backdrop ...... 35   ← il backdrop del drawer COPRE la bottom-bar
     .sidebar (drawer) ...... 40   ← il drawer aperto COPRE la bottom-bar (ok: a
                                    drawer aperto non servono i tool)
     .overlay (loading) ..... 50
     .toast-stack ........... 60
     .fsign-bar (Fill&Sign).. 4001 — pill flottante: sta sopra, ma la alziamo
                                    (bottom offset) per non coprire la bottom-bar. */

@media (max-width: 767px) {
  :root { --mobile-bar-h: 60px; }

  /* Riloca la riga contestuale come bottom-bar fissa.
     NB: NON impostiamo `display` qui — resta governato da setMode():
     visibile = .toolbar__row{display:flex}; nascosta = [hidden]{display:none!important}.
     Lo scroll orizzontale (flex-wrap:nowrap; overflow-x:auto) arriva già dalla
     regola .toolbar__row della media query mobile in app.css. */
  .toolbar__row--contextual {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 33;
    margin: 0;
    padding: 6px 10px calc(6px + env(safe-area-inset-bottom, 0px));
    min-height: 56px;
    gap: 6px;
    background: var(--toolbar-bg);
    color: var(--toolbar-fg);
    border-top: 1px solid var(--toolbar-border);
    border-bottom: none;
    box-shadow: 0 -6px 16px -8px rgba(0, 0, 0, .35);
  }

  /* Target touch ampi (≥44px) per i controlli della bottom-bar (più specifici
     del min-height:40px della regola pointer:coarse). Stessi nodi → nessun
     ricablaggio. */
  .toolbar__row--contextual .btn,
  .toolbar__row--contextual .icon-btn,
  .toolbar__row--contextual .annot-tool {
    min-height: 44px;
    min-width: 44px;
  }

  /* Divisori tra gruppi più compatti nello spazio verticale ridotto della barra. */
  .toolbar__row--contextual .toolbar__mode > .toolbar__group + .toolbar__group {
    margin-left: 8px;
    padding-left: 8px;
  }

  /* Riserva spazio in fondo al documento SOLO quando la bottom-bar è mostrata
     (body.mb-tools, impostata da mobile-bar.js sull'hook di setMode): l'ultima
     porzione di pagina non finisce sotto la barra. Specificità (0,2,1) > .pages. */
  body.mb-tools .viewer { scroll-padding-bottom: var(--mobile-bar-h); }
  body.mb-tools .pages {
    padding-bottom: calc(var(--mobile-bar-h) + env(safe-area-inset-bottom, 0px) + 12px);
  }

  /* La pill Fill&Sign (bottom:22px) si sovrapporrebbe alla bottom-bar: alziamola
     sopra la barra quando quest'ultima è presente. */
  body.mb-tools .fsign-bar.is-open {
    bottom: calc(var(--mobile-bar-h) + env(safe-area-inset-bottom, 0px) + 14px);
  }

  /* mustFix review: stessa cosa per le altre barre flottanti in basso, che
     altrimenti coprirebbero la bottom-bar quando è mostrata su mobile.
     .ra-bar = Read Out Loud (attivabile in qualsiasi modalità); .toast-stack =
     notifiche. Specificità (0,2,1) > .ra-bar/.toast-stack di partenza. */
  body.mb-tools .ra-bar {
    bottom: calc(var(--mobile-bar-h) + env(safe-area-inset-bottom, 0px) + 14px);
  }
  body.mb-tools .toast-stack {
    bottom: calc(var(--mobile-bar-h) + env(safe-area-inset-bottom, 0px) + 12px);
  }
}