/* Command Center sul telefono e sul tablet (2026-10-03, richiesta dell'utente: «ottimizzata in TUTTE le pagine»).
   Si carica dopo app.css. Ogni regola sta dentro una media query:
   - fino a 820 px, e col dito senza mouse (pointer: coarse, hover: none) a ogni larghezza: telefono (barra di pagine
     in basso che scorre, cassetti, finestre a schermo pieno). 2026-10-05 (l'utente: «uguale al mio S24 Ultra anche sugli
     altri dispositivi»): prima il tablet fra 821 e 1100 px teneva la colonna degli agenti fissa e la lavagna più stretta;
   - col dito anche con un mouse (tablet ibridi): solo bersagli più grandi e niente hover.
   Sopra 820 px con il mouse non cambia niente: il desktop resta identico.
   Gli elementi nuovi (.m-*) li crea mobile.js; quelli del ponte (.ponte-*) ponte.js. */

/* fuori dal telefono gli elementi nuovi non si vedono mai */
.m-schede, .m-foglio, .m-foglio-velo, .m-marca { display: none; }

/* ======================================================================= DITO: telefono e tablet
   Bersagli da 44 px, campi a 16 px (niente zoom di iOS), niente azioni nascoste fino al passaggio del mouse.
   Fino a 820 px sempre; sopra, se il puntatore è un dito (pointer: coarse). */
@media (max-width: 820px), (pointer: coarse) {
  :root { --m-tocco: 44px; }
  body { font-size: 14px; }
  .gruppo-testa { min-height: var(--m-tocco); font-size: 12px; }
  .gruppo-testa .azione-g { opacity: 1; }
  /* nella colonna degli agenti restano «scheda del gruppo» e «apri in lavagna»: nuovo agente, rinomina e togli stanno nella scheda */
  .gruppo-testa .azione-g ~ .azione-g ~ .azione-g { display: none; }
  .motore-voce { min-height: var(--m-tocco); font-size: 14px; }
  .piede { font-size: 12px; }
  select { min-width: var(--m-tocco); }
  .repo-nome { display: flex; align-items: center; min-height: var(--m-tocco); }
  .repo-riga { grid-template-columns: minmax(0, 1fr) auto; }
  .repo-tipo, .repo-push { display: none; }
  button, .icona, select, summary, .schede a, .nuova-chat { min-height: var(--m-tocco); }
  button, .icona { min-width: var(--m-tocco); }
  button.piccolo { padding: 8px 12px; font-size: 13px; }
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), select, textarea {
    font-size: 16px; min-height: var(--m-tocco);
  }
  .cerca input, .cerca-piccola input { font-size: 16px; padding: 10px 0; }
  input[type=range] { min-height: var(--m-tocco); }
  input[type=color] { min-width: var(--m-tocco); min-height: var(--m-tocco); }
  summary { display: flex; align-items: center; gap: 6px; }
  details:not(.spazio-catena) > summary::before { content: "▸"; color: var(--tenue); font-size: 11px; transition: transform .2s var(--dolce); }
  details:not(.spazio-catena)[open] > summary::before { transform: rotate(90deg); }
  summary::-webkit-details-marker { display: none; }
  label:has(> input[type=checkbox]), label:has(> input[type=radio]) { min-height: var(--m-tocco); display: inline-flex; align-items: center; gap: 8px; }
  label:has(input[type=checkbox]), label:has(input[type=radio]) { min-height: var(--m-tocco); align-content: center; }
  /* caselle e pallini da 44 px: il segno resta piccolo, la zona da toccare no */
  input[type=checkbox], input[type=radio] {
    -webkit-appearance: none; appearance: none; width: var(--m-tocco); height: var(--m-tocco); margin: -10px -8px; flex: none;
    border: 0; padding: 0; cursor: pointer; background: center / 22px 22px no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Crect x='1' y='1' width='20' height='20' rx='5' fill='%23141414' stroke='%23888' stroke-width='1.5'/%3E%3C/svg%3E");
  }
  input[type=checkbox]:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Crect x='1' y='1' width='20' height='20' rx='5' fill='%23599ce7' stroke='%23599ce7' stroke-width='1.5'/%3E%3Cpath d='M6 11.5l3.4 3.4L16.5 7.5' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
  input[type=radio] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='11' r='9.5' fill='%23141414' stroke='%23888' stroke-width='1.5'/%3E%3C/svg%3E");
  }
  input[type=radio]:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='11' r='9.5' fill='%23141414' stroke='%23599ce7' stroke-width='1.5'/%3E%3Ccircle cx='11' cy='11' r='5' fill='%23599ce7'/%3E%3C/svg%3E");
  }
  input[type=checkbox]:focus-visible, input[type=radio]:focus-visible { outline: 2px solid var(--accento); outline-offset: -8px; }
  .scad-riga input[type="checkbox"] { margin: -10px -6px; }
  /* interruttori: stessa forma, più grandi */
  .switch { width: 54px; height: var(--m-tocco); min-width: 54px; border: 0; background: transparent; box-shadow: none; flex: none; }
  .switch::before {
    content: ""; position: absolute; left: 3px; right: 3px; top: 8px; bottom: 8px; border-radius: var(--r-pill);
    background: #101010; border: 1px solid var(--linea-2); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .5); transition: background .3s, box-shadow .3s;
  }
  .switch::after { top: 11px; left: 6px; width: 22px; height: 22px; }
  .switch:hover { background: transparent; }
  .switch.on { background: transparent; box-shadow: none; }
  .switch.on::before { background: rgb(var(--luce)); border-color: rgb(var(--luce)); box-shadow: 0 0 0 1px rgba(var(--luce), .35), 0 0 14px rgba(var(--luce), .55); }
  .switch.on::after { transform: translateX(20px); }
  .switch.on:active::after { transform: translateX(17px); }

  /* ---------------------------------------------------- niente che dipenda dal passaggio del mouse */
  .riga-azioni, .spazio-lavagna, .gruppo-testa .azione-g { opacity: 1; }
  .riga-azioni .icona { padding: 4px; }
  .nodo .link-nodo { opacity: 1; width: 30px; height: 30px; top: -14px; }
  .nodo .link-nodo + .link-nodo { right: 40px; }
  .lav-x-filo { min-width: 34px; min-height: 34px; width: 34px; height: 34px; margin: -17px 0 0 -17px; font-size: 14px; }
  .sinapsi-bolla .bolla-comandi button { min-width: 30px; min-height: 30px; line-height: 28px; font-size: 14px; }
  .sinapsi-bolla { padding-top: 32px; }
  .maniglia-box { opacity: .7; min-width: var(--m-tocco); min-height: var(--m-tocco); display: inline-grid; place-items: center; padding: 0; }
  .msg .chi .azioni-msg { display: none; opacity: 1; }
  .msg.m-azioni .chi .azioni-msg { display: inline-flex; }
  .msg .chi .azioni-msg button { min-width: var(--m-tocco); min-height: 36px; font-size: 15px; }

  /* ---------------------------------------------------- testo leggibile */
  .nota, .riga-int small, .lista-lavori small, .agente .testo small, .scad-testo small, .salute-lista .sal-testo small,
  .chiavi-note li, .sent-anomalie, .lista-eventi li, .lista-eventi time, .spazio-titolo small, .riga-testo small,
  .card-testa small, .catena li small, .interlocutore small, .msg .chi, .numeri small, .barre, .elenco-pulsanti small,
  .lavoro-badge small, .card-piede, .sinapsi-lista, .sa-att-barra, #sa-att, .assist-registro, .vps-testo, .term-testo,
  .lav-stato, .repo-riga, details summary, .sa-riga, .sa-campi label, .scad-riga-comandi { font-size: 13px; }
  .badge, .etichetta, .modello, .conta { font-size: 12px; }
  small, time, .sent-pulizia, .riga-sent, .sincro-riga, .durata, .lav-catena-conta, .card-piede, .lavoro-badge small,
  .chiavi-note .cn-tipo, .chiavi-note .cn-pid, .chiavi-note .cn-cmd, .chiavi-note .cn-cwd, .sent-anomalie .cn-tipo,
  .motore-voce small, .gruppo-testa .al-lavoro-n, .agente .mod, .agente .sinapsi-riga, .nodo small, .nodo b,
  .sug-gruppo, .sug-etichetta, .filtri button[data-n]::after, .repo-badge, .lav-demo-badge, .lav-mod-badge { font-size: 12px !important; }
  .cuore small { font-size: 10px !important; }
  .lista-task li.gruppo, .segmenti-scad button, .mod-titolo, .motore-titolo, .flusso { font-size: 12px; }
  .uscita.alta { max-height: 70vh; max-height: 70dvh; }
  .gruppo-testa .freccia { font-size: 12px; width: 14px; }
  .segmenti-scad button { min-height: var(--m-tocco); padding: 4px 14px; }
  /* «hidden» vale sempre (in app.css .sa-riga { display: grid } lo scavalcava) */
  [hidden] { display: none !important; }
  .sincro-riga { display: flex; align-items: center; min-height: var(--m-tocco); }
  .lista-eventi li, .scad-testo, .riga-testo b, .elenco div { font-size: 14px; }

}

/* ======================================================================= TELEFONO
   fino a 820 px, oppure col dito e senza mouse a ogni larghezza (telefono girato, tablet): stessa impaginazione.
   La stessa query sta in mobile.js («telefono»): si cambiano insieme. */
@media (max-width: 820px), (pointer: coarse) and (hover: none) {
  :root {
    --m-tocco: 44px;
    --m-sotto: calc(58px + env(safe-area-inset-bottom));
    --m-alto: env(safe-area-inset-top);
  }
  html, body { height: var(--app-h, 100dvh); overscroll-behavior: none; }
  body { font-size: 14px; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(89, 156, 231, .18); }
  h2 { font-size: 15px; }
  h3 { font-size: 13.5px; }

  /* ---------------------------------------------------- impalcatura: una colonna, schede in basso */
  .app, .app.senza-destra, .app.con-terminale, .app.destra-intera {
    grid-template-columns: minmax(0, 1fr);
    height: var(--app-h, 100dvh);
    padding-bottom: var(--m-sotto);
    transform: translateY(var(--vv-top, 0px));
  }
  /* la colonna destra (lavagna, VPS, terminale) fuori dalla pagina intera non deve prendere una riga della griglia */
  .app, .app.senza-destra, .app.con-terminale, .app.destra-intera { grid-template-rows: minmax(0, 1fr); grid-auto-rows: 0; }
  body.tastiera .app { padding-bottom: 0; }
  .centro { min-height: 0; }

  /* la colonna degli agenti diventa un cassetto da sinistra (☰), anche fra 761 e 820 px */
  .lato {
    position: fixed; top: 0; left: 0; bottom: 0; width: min(340px, 88vw); z-index: 40;
    transform: translateX(-104%); transition: transform .28s var(--dolce); box-shadow: 20px 0 50px rgba(0, 0, 0, .55);
    padding: calc(10px + var(--m-alto)) 10px calc(10px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
    background: #141414;
  }
  .app.destra-intera .lato { position: fixed; z-index: 40; }
  .app.lato-aperto .lato { transform: none; }
  .app.lato-aperto .velo { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 39; }
  .solo-stretto { display: inline-flex; }
  .agente { padding: 6px 8px; min-height: 52px; }
  .agente .testo small { font-size: 12px; }

  /* ---------------------------------------------------- barra in alto: Jarvis, stato, avatar */
  .barra {
    gap: 8px; min-height: calc(52px + var(--m-alto)); padding: calc(4px + var(--m-alto)) max(8px, env(safe-area-inset-right)) 4px max(8px, env(safe-area-inset-left));
  }
  .barra .schede.menu { display: none; }
  .m-marca { display: flex; align-items: baseline; gap: 8px; flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; }
  .m-marca b { font-size: 16px; letter-spacing: .02em; }
  .m-marca b::first-letter { color: #8fa8f0; }
  .m-marca small { color: var(--tenue); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .orologio, .flusso, .stato-generale #testo-generale { display: none; }
  .stato-generale { flex: none; max-width: none; }
  .avatar-jarvis small { display: none; }
  .avatar-jarvis { padding: 3px; }
  #apri-lato { font-size: 20px; }
  #btn-ripristina-box { display: none; }
  .avviso, .assist-banner { margin: 8px 10px 0; }

  /* ---------------------------------------------------- pagine a schede: una colonna */
  main { overscroll-behavior: contain; }
  .vista.attiva { padding: 10px max(10px, env(safe-area-inset-left)) 16px; gap: 10px; grid-template-columns: minmax(0, 1fr); }
  .vista[data-vista="agenti"].attiva, .griglia-stato, .assist-griglia { grid-template-columns: minmax(0, 1fr); }
  .blocco-lavori, .blocco-lavori.con-scelto { grid-template-columns: minmax(0, 1fr); }
  .pannello { padding: 12px; border-radius: var(--r-lg); }
  .testa-pannello { gap: 8px; }
  .testa-pannello h2 { flex: 1 1 100%; }
  .cerca-piccola { min-width: 0; flex: 1 1 100%; }
  .elenco-pulsanti { grid-template-columns: minmax(0, 1fr); }
  .elenco-pulsanti button { padding: 10px 12px; }
  .comandi-diretti button { min-height: var(--m-tocco); padding: 6px 14px; font-size: 13px; }
  .sezione-chiedi { margin: 0 0 10px; }
  .sezione-chiedi button { text-align: left; white-space: normal; }
  .riga-int { padding: 6px 0; column-gap: 12px; align-items: center; }
  .riga-int.telegram .riaggancia { padding: 4px 10px; }
  .filtri button { min-height: var(--m-tocco); }
  .lista-lavori { max-height: none; }
  .lista-lavori-grande { max-height: 60vh; max-height: 60dvh; }
  .lista-lavori li { padding: 10px; }
  .ferma-lavoro { min-height: var(--m-tocco); padding: 6px 14px; font-size: 13px; }
  .risultato { position: static; min-height: 0; }
  .ris-vuoto { min-height: 0; padding: 24px 16px; }
  .ris-uscita, .blocco-lavori.ris-intero .ris-uscita { max-height: 70vh; max-height: 70dvh; min-height: 160px; }
  .ris-azioni button { min-height: var(--m-tocco); }
  .riquadro { height: 360px; }

  /* Stato */
  .nucleo .sfera { width: 140px; }
  .chat-voce-form { flex-wrap: wrap; }
  .chat-voce-form input { flex: 1 1 180px; }
  .chat-voce-box { max-height: 50vh; max-height: 50dvh; }
  .repo-riga { grid-template-columns: minmax(0, 1fr) auto; }
  .repo-tipo, .repo-push { display: none; }
  .repo-nome { display: flex; align-items: center; min-height: var(--m-tocco); }
  .sent-anomalie li { grid-template-columns: minmax(0, 1fr) auto; }
  .sent-anomalie li > :first-child { grid-column: 1 / -1; }
  .tec-due { grid-template-columns: minmax(0, 1fr); }
  .assist-ssh { flex-wrap: wrap; }

  /* Squadra */
  .catena li { margin-left: calc(var(--liv, 0) * 12px); }
  .catena li .avatar { width: 40px; height: 40px; font-size: 17px; }
  .riga-catena { grid-template-columns: 32px minmax(0, 1fr) auto; gap: 8px; }
  .riga-catena > .modello { display: none; }
  .progetti-griglia { padding: 2px 8px 10px; grid-template-columns: minmax(0, 1fr); }
  .spazio-catena > summary { padding: 10px 12px; gap: 10px; flex-wrap: wrap; }
  .spazio-modelli { display: none; }
  .chiavi-note li { grid-template-columns: 70px minmax(0, 1fr); }
  .chiavi-note .cn-azioni button { min-height: var(--m-tocco); font-size: 13px; }
  .agente-form select, .agente-form input { width: 100%; }

  /* Missioni */
  .nuova-missione .riga-campi { gap: 10px; }
  .nuova-missione .primario { margin-left: 0; flex: 1 1 100%; }
  .nuova-missione label { flex-wrap: wrap; }
  details.missione > summary { flex-wrap: wrap; }
  details.missione > summary .titolo { flex: 1 1 100%; white-space: normal; }
  .albero .nome, .albero-box .orch .nome { min-width: 0; }
  .albero .st { min-width: 0; }
  .albero .cosa { display: none; }
  .conferma .si, .conferma .no { min-height: var(--m-tocco); }

  /* Scadenze */
  .scad-riga { grid-template-columns: 36px 64px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
  .scad-riga .scad-fatto { padding: 4px 10px; }
  .scad-aggiungi input[name="testo"] { flex: 1 1 100%; }
  .scad-aggiungi input[type=date] { flex: 1 1 auto; }
  .scad-riga-comandi { gap: 6px 10px; }
  .scad-annulla { bottom: calc(var(--m-sotto) + 12px); }

  /* Memoria: la tabella scorre dentro il suo riquadro */
  table.progetti { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
  table.progetti td { padding: 8px 8px; }

  /* Telefono */
  .istruzioni input { width: 100%; }
  .istruzioni li { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
  #form-chiamata .azioni-riga input { flex: 1 1 100%; }

  /* ---------------------------------------------------- chat */
  .vista-chat.attiva { padding: 0; }
  .chat-testa { padding: 6px max(10px, env(safe-area-inset-right)) 6px max(10px, env(safe-area-inset-left)); gap: 8px; }
  .chat-testa .avatar { width: 36px; height: 36px; font-size: 16px; }
  .interlocutore { gap: 8px; }
  .interlocutore b { font-size: 15px; }
  .chat-strumenti { gap: 6px; flex: none; }
  .modo-chat button { min-height: 36px; padding: 4px 10px; font-size: 13px; }
  .modo-chat { align-items: center; }
  /* «Ricomincia» e «Terminale» diventano icone: lo spazio va ai messaggi */
  #btn-svuota-chat, #btn-term-accanto { font-size: 0; padding: 0; width: var(--m-tocco); gap: 0; justify-content: center; }
  #btn-svuota-chat::before { content: "↺"; font-size: 19px; }
  #btn-term-accanto .icona-term { font-size: 13px; }
  .messaggi { padding: 12px max(12px, env(safe-area-inset-right)) 10px max(12px, env(safe-area-inset-left)); gap: 14px; }
  .msg .testo { font-size: 15px; }
  .msg.mio .corpo { max-width: 88%; }
  .msg .testo pre { font-size: 12.5px; }
  .benvenuto { padding: 0 6px; margin: auto 0; width: 100%; min-width: 0; max-width: none; }
  .benvenuto .spunti > * { max-width: 100%; }
  .benvenuto b { font-size: 19px; }
  .benvenuto .spunti { flex-direction: column; align-items: stretch; }
  .benvenuto .spunti button { min-height: var(--m-tocco); font-size: 14px; text-align: left; }
  .benvenuto .spunto-freq { display: flex; min-width: 0; }
  .benvenuto .spunto-freq > button:first-child { flex: 1; min-width: 0; }
  .benvenuto .spunto-freq > button.togli { flex: none; width: var(--m-tocco); }
  .pillola textarea::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .compositore { padding: 6px max(10px, env(safe-area-inset-right)) 8px max(10px, env(safe-area-inset-left)); }
  .compositore .comandi-diretti { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -10px 6px; padding: 0 10px; }
  .compositore .comandi-diretti::-webkit-scrollbar { display: none; }
  .compositore .comandi-diretti button { flex: none; }
  body.tastiera .compositore .comandi-diretti { display: none; }
  .pillola { padding: 5px 5px 5px 14px; gap: 6px; align-items: flex-end; border-radius: 24px; }
  .pillola textarea { font-size: 16px; padding: 10px 0; max-height: 30vh; max-height: 30dvh; min-height: var(--m-tocco); }
  .invia { width: var(--m-tocco); height: var(--m-tocco); font-size: 18px; }
  .nota-compositore { display: none; }
  .suggerimenti { left: 10px; right: 10px; max-height: 45vh; max-height: 45dvh; }
  .suggerimenti button { min-height: var(--m-tocco); align-items: center; }
  .suggerimenti button b { min-width: 0; }

  /* ---------------------------------------------------- lavagna, VPS, terminale: pagine intere sopra le schede */
  .app.destra-intera .destra { left: 0; right: 0; bottom: var(--m-sotto); border-left: 0; }
  body.tastiera .app.destra-intera .destra { bottom: 0; }
  .pannello-destra { padding: 6px max(6px, env(safe-area-inset-right)) 6px max(6px, env(safe-area-inset-left)); gap: 6px; }
  .lavagna-barra, .term-barra, .vps-barra { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -6px; padding: 0 6px 2px; }
  .lavagna-barra::-webkit-scrollbar, .term-barra::-webkit-scrollbar, .vps-barra::-webkit-scrollbar { display: none; }
  .lavagna-barra > *, .term-barra > *, .vps-barra > * { flex: none; }
  .lav-stato { margin-left: 4px; white-space: nowrap; }
  .lav-titolo:not(:empty) { white-space: nowrap; }
  .term-testo, .vps-testo { min-width: 160px; }
  .segmenti button { min-height: var(--m-tocco); padding: 4px 14px; font-size: 13px; }
  .lav-sinapsi summary { min-height: var(--m-tocco); }
  .sinapsi-lista { max-height: 30vh; max-height: 30dvh; }
  .sinapsi-lista li { grid-template-columns: 52px minmax(0, 1fr) auto; }
  .sinapsi-lista li > span { grid-column: 1 / -1; }
  .lav-vuota { font-size: 14px; }
  /* il pallino che tira i fili: piccolo da vedere, grande da prendere col dito */
  .porta { width: 18px; height: 18px; margin-top: -9px; right: -10px; }
  .porta::after { content: ""; position: absolute; inset: -14px; border-radius: 50%; }
  .vps-vuoto, .term-vuoto { font-size: 14px; }

  /* ---------------------------------------------------- finestre: a schermo pieno */
  dialog.scheda-agente, #guida-lavagna {
    width: 100vw; max-width: 100vw; height: 100%; max-height: 100%; margin: 0; border: 0; border-radius: 0;
    overflow-y: auto; overscroll-behavior: contain;
  }
  dialog.scheda-agente[open] { animation: m-sale .22s var(--dolce); }
  .scheda-agente form {
    min-height: 100%; padding: calc(12px + var(--m-alto)) max(14px, env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
    align-content: start;
  }
  .scheda-agente header { position: sticky; top: calc(-12px - var(--m-alto)); z-index: 2; background: var(--rialzo);
    margin: calc(-12px - var(--m-alto)) -14px 0; padding: calc(10px + var(--m-alto)) 14px 10px; border-bottom: 1px solid var(--linea); }
  .scheda-agente header .avatar.grande { width: 48px; height: 48px; font-size: 22px; }
  .chiudi-dialog { font-size: 18px; }
  .sa-campi { gap: 8px 12px; }
  .sa-campi label { flex: 1 1 100%; flex-wrap: wrap; }
  .sa-campi select, .sa-campi input:not([type=range]):not([type=color]) { flex: 1 1 160px; max-width: none; }
  .sa-umorismo input[type="range"] { flex: 1 1 140px; }
  .sa-attivo { margin-left: 0; }
  .scheda-agente footer { justify-content: stretch; }
  .scheda-agente footer button { flex: 1 1 calc(50% - 8px); }
  .sg-squadra { max-height: none; }
  .sa-att-tabella { max-height: 50vh; max-height: 50dvh; overflow: auto; -webkit-overflow-scrolling: touch; }
  #sa-att { min-width: 520px; }
  #gl-corpo { max-height: none; }
  #gl-corpo dl { grid-template-columns: minmax(0, 1fr); }

  /* ---------------------------------------------------- avvisi in basso: sopra la barra di schede */
  .toast { bottom: calc(var(--m-sotto) + 12px); max-width: calc(100vw - 24px); }
  body.tastiera .toast { bottom: 12px; }

  /* ---------------------------------------------------- barra di pagine in basso (2026-10-05, l'utente)
     Tutte le pagine nell'ordine del desktop e in fondo «Impostazioni»; scorre col dito, la voce attiva si porta in
     vista da sola (mobile.js). Le sfumature ai lati dicono che continua. */
  .m-schede {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    height: var(--m-sotto); padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    background: rgba(18, 18, 18, .96); border-top: 1px solid var(--linea-2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  }
  .m-schede-scorre {
    display: flex; height: 100%; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; touch-action: pan-x;
  }
  .m-schede-scorre::-webkit-scrollbar { display: none; }
  .m-schede.m-continua-dx .m-schede-scorre { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); }
  .m-schede.m-continua-sx .m-schede-scorre { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent); }
  .m-schede.m-continua-sx.m-continua-dx .m-schede-scorre {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent);
  }
  body.tastiera .m-schede { display: none; }
  .m-schede a, .m-schede button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; position: relative;
    flex: 1 0 auto; min-width: 72px; min-height: 58px; height: 58px; padding: 4px 8px; border: 0; border-radius: 0; background: transparent;
    scroll-snap-align: center; white-space: nowrap;
    color: var(--tenue); font: 500 12px/1.1 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif; text-decoration: none;
  }
  .m-schede svg { width: 24px; height: 24px; display: block; flex: none; }
  .m-schede .attiva { color: var(--testo); }
  .m-schede .attiva::before { content: ""; position: absolute; top: 0; left: 22%; right: 22%; height: 2px; border-radius: 0 0 2px 2px; background: var(--accento); }
  .m-schede .spia { position: absolute; top: 9px; left: calc(50% + 10px); width: 8px; height: 8px; border-radius: 50%; }
  .m-schede .spia.grigia { display: none; }
  .m-schede .conta { position: absolute; top: 4px; left: calc(50% + 6px); }
  .m-schede .conta:empty { display: none; }
  .m-schede a:has(.conta:not(:empty)) .spia { display: none; }   /* il numero dice già che c'è qualcosa */
  .m-schede [data-m="impostazioni"] { border-left: 1px solid var(--linea); }

  /* il foglio «Impostazioni» (era «Altro»): tema, avatar, agenti e motore; nell'app anche voce e telefono.
     Le voci di pagina che registro.js, connessioni.js, piani.js e incarichi.js ci aggiungono stanno nella barra in basso. */
  .m-foglio-griglia > a[data-vista] { display: none; }
  .m-foglio-velo { display: block; position: fixed; inset: 0; z-index: 44; background: rgba(0, 0, 0, .5); opacity: 0; pointer-events: none; transition: opacity .2s; }
  .m-foglio-velo.aperto { opacity: 1; pointer-events: auto; }
  .m-foglio {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; max-height: 85vh; max-height: 85dvh; overflow-y: auto;
    padding: 8px max(12px, env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    background: var(--rialzo); border-top: 1px solid var(--linea-2); border-radius: 16px 16px 0 0; box-shadow: 0 -20px 50px rgba(0, 0, 0, .55);
    transform: translateY(105%); transition: transform .26s var(--dolce); visibility: hidden;
  }
  .m-foglio.aperto { transform: none; visibility: visible; }
  .m-foglio-maniglia { width: 40px; height: 4px; border-radius: 2px; background: var(--linea-3); margin: 2px auto 10px; }
  .m-foglio-testa { display: flex; align-items: center; justify-content: space-between; margin: 0 2px 8px; }
  .m-foglio-testa b { font-size: 16px; }
  .m-foglio-griglia { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .m-foglio-griglia a, .m-foglio-griglia button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 76px; padding: 8px 4px;
    border: 1px solid var(--linea); border-radius: var(--r-xl); background: var(--fondo); color: var(--testo); text-decoration: none;
    font-size: 13.5px; text-align: center; position: relative;
  }
  .m-foglio-griglia .m-ico { font-size: 20px; line-height: 1; color: var(--testo-2); }
  .m-foglio-griglia .attiva { border-color: var(--accento-linea); background: var(--accento-fondo); }
  .m-foglio-griglia .spia { position: absolute; top: 9px; right: 9px; width: 8px; height: 8px; border-radius: 50%; }
  .m-foglio-griglia .conta { position: absolute; top: 6px; left: 8px; }
  .m-foglio-griglia a.tecnico { color: var(--arancio); }
  .m-foglio-griglia small { color: var(--tenue); font-size: 11.5px; line-height: 1.2; }
  .m-foglio-largo { grid-column: 1 / -1; flex-direction: row !important; min-height: 52px !important; }
  .m-solo-mac { display: none; }

  /* ---------------------------------------------------- rifiniture del 2026-10-05 (verifica sul telefono)
     bersagli da almeno 40 px anche dove i fogli delle pagine li fanno più bassi (si caricano dopo questo: serve un
     selettore più preciso) */
  .vista .modo-chat button { min-height: 40px; }
  .vista .cn-tre .cn-pos { min-height: var(--m-tocco); }
  .vista .in-modulo select, .vista .in-modulo textarea, .vista .in-btn { min-height: var(--m-tocco); font-size: 16px; }
  .vista .in-btn { font-size: 14px; }
  /* i collegamenti dentro una frase (es. «vai a Stato · Chat» in Squadra): zona da toccare alta 40 px, testo dov'era */
  .vista p a[href^="#"], .vuoto-lavori a { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; min-width: 40px;
    padding: 0 4px; margin: -11px 0; vertical-align: middle; }
  /* il toast nascosto non scende sulla barra in basso nemmeno durante l'animazione */
  .toast { transform: translateX(-50%) translateY(6px); max-height: 40vh; max-height: 40dvh; overflow: hidden; }
  .toast.visibile { transform: translateX(-50%); }
  /* dentro il ponte terminale, VPS e banco tecnico non ci sono proprio: vedi «dentro-ponte» più sotto */
}

@keyframes m-sale { from { opacity: 0; transform: translateY(24px); } }

/* chat stretta (fino a 640 px): prima l'interlocutore e i pulsanti a icona, sotto il modo della chat a tutta larghezza.
   Prima stavano su una riga sola e Ricomincia e Terminale finivano oltre il bordo (x=454 su 360 px) */
@media (max-width: 640px) {
  .chat-testa { flex-wrap: wrap; row-gap: 6px; }
  .chat-testa .chat-strumenti { display: contents; }
  .chat-testa .interlocutore { flex: 1 1 0; min-width: 0; order: 1; }
  .chat-testa .interlocutore b, .chat-testa .interlocutore small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
  .chat-testa .chat-strumenti > * { order: 2; flex: none; }
  .chat-testa .modo-chat { order: 3; flex: 1 1 100%; display: flex; }
  .chat-testa .modo-chat button { flex: 1 1 0; min-height: var(--m-tocco); padding: 4px 6px; font-size: 13px; }
  .dentro-ponte .chat-testa .modo-chat button { min-height: var(--m-tocco); }
}

/* telefono girato (basso, col dito): la lavagna prende tutta l'altezza. La barra in alto si abbassa, Sinapsi (che sta
   anche nella pagina in verticale) sparisce e i pulsanti della lavagna restano su una riga che scorre */
@media (max-height: 500px) and (pointer: coarse) {
  .barra { min-height: calc(44px + var(--m-alto)); padding-top: calc(2px + var(--m-alto)); padding-bottom: 2px; }
  .barra .avatar-jarvis .aj-cerchio { width: 34px; height: 34px; }
  .pannello-destra { padding-top: 4px; padding-bottom: 4px; gap: 4px; }
  .lav-sinapsi { display: none; }
  .lavagna-barra button, .lavagna-barra .segmenti button { min-height: 40px; padding-top: 2px; padding-bottom: 2px; }
}

/* telefono girato: la barra in basso più bassa */
@media (max-height: 500px) and (pointer: coarse) and (orientation: landscape) {
  :root { --m-sotto: calc(46px + env(safe-area-inset-bottom)); }
  .m-schede a, .m-schede button { min-height: 46px; height: 46px; flex-direction: row; gap: 6px; }
  .m-schede .spia { top: 7px; }
  .m-schede svg { width: 20px; height: 20px; }
  .chat-testa .avatar { width: 30px; height: 30px; }
}

/* ======================================================================= TABLET IBRIDO (821-1100 px, dito e mouse)
   Bersagli e campi stanno nel blocco «DITO» qui sopra; qui solo le barre che scorrono di lato. Dal 2026-10-05 il tablet
   senza mouse (hover: none) usa il blocco «TELEFONO»: qui resta solo chi ha anche un puntatore che passa sopra. */
@media (min-width: 821px) and (max-width: 1100px) and (pointer: coarse) and (hover: hover) {
  /* la colonna destra fuori dalla pagina intera non prende una riga della griglia (sotto i 1100 px andava a capo
     e la pagina restava alta metà schermo: col mouse succede ancora, ma quella finestra non si tocca) */
  .app, .app.senza-destra, .app.con-terminale, .app.destra-intera { grid-template-rows: minmax(0, 1fr); grid-auto-rows: 0; }
  .lavagna-barra, .term-barra, .vps-barra { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .lavagna-barra > *, .term-barra > *, .vps-barra > * { flex: none; }
  .porta::after { content: ""; position: absolute; inset: -12px; border-radius: 50%; }
  table.progetti { display: block; overflow-x: auto; }
  .pillola textarea { font-size: 16px; }
  .invia { width: var(--m-tocco); height: var(--m-tocco); }
  dialog.scheda-agente { max-height: calc(100dvh - 32px); overflow-y: auto; }
  .sa-umorismo input[type="range"] { width: 160px; }
}

/* ======================================================================= PONTE (ponte.js, solo dentro jarvis.srv…) */
.ponte-badge { display: inline-flex; align-items: center; gap: 6px; flex: none; font-size: 12px; color: var(--testo-2);
  padding: 4px 10px; border: 1px solid var(--linea-2); border-radius: var(--r-pill); white-space: nowrap; }
.ponte-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--grigio); }
.ponte-badge.acceso::before { background: var(--verde); box-shadow: 0 0 0 3px rgba(63, 162, 102, .2); }
.ponte-badge.spento { color: #f3a3b9; border-color: rgba(227, 70, 113, .45); }
.ponte-badge.spento::before { background: var(--rosso); }
.ponte-badge.rete::before { background: var(--giallo); }
.ponte-modo { font: 12px var(--mono); color: var(--testo-2); padding: 3px 10px; border: 1px solid var(--linea-2); border-radius: var(--r-pill); white-space: nowrap; }
.ponte-modo.lavoro { color: #bff0d0; border-color: rgba(63, 162, 102, .45); background: rgba(63, 162, 102, .12); }
.ponte-modo.approvazione { color: #f5d9a8; border-color: rgba(230, 160, 60, .45); background: rgba(230, 160, 60, .1); }
/* 2026-10-03, coerenza del sito: <html class="dentro-ponte"> lo mette ponte.js solo quando /_ponte/stato
   risponde 200. Le pagine che il proxy blocca (terminale, desktop VPS, banco tecnico) spariscono da tutti i
   menu, sul telefono e sul desktop; i pulsanti con un'azione che il ponte non passa restano, spenti (ponte.js). */
/* 2026-10-05 (l'utente: dal sito passa tutto): quando /_ponte/stato dice azioni.tutto, ponte.js mette anche «ponte-tutto»
   e queste pagine tornano in tutti i menu (barra, «Altro», Modifica, foglio del telefono) senza «solo sul computer». */
.dentro-ponte:not(.ponte-tutto) .menu a[data-vista="terminale"], .dentro-ponte:not(.ponte-tutto) .menu a[data-vista="vps"],
.dentro-ponte:not(.ponte-tutto) .menu a[data-vista="tecnico"], .dentro-ponte:not(.ponte-tutto) .m-foglio-griglia [data-vista="terminale"],
.dentro-ponte:not(.ponte-tutto) .m-foglio-griglia [data-vista="vps"], .dentro-ponte:not(.ponte-tutto) .m-foglio-griglia [data-vista="tecnico"],
.dentro-ponte:not(.ponte-tutto) [data-term-vai], .ponte-tutto .m-solo-mac { display: none !important; }
.dentro-ponte .solo-mac:disabled, .dentro-ponte .solo-mac[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.dentro-ponte .switch.solo-mac:disabled { filter: grayscale(1); }
/* #modo-chat dentro il ponte: lo mostra o lo nasconde ponte.js (si vede se il ponte passa «modo_chat») */
/* sul telefono, dentro il ponte, l'interruttore del modo sta accanto ad altoparlante e Ricomincia: più stretto,
   e il nome dell'interlocutore si accorcia coi puntini invece di finire sotto i pulsanti */
@media (max-width: 820px), (pointer: coarse) and (hover: none) {
  .dentro-ponte .modo-chat { padding: 1px; gap: 0; }
  .dentro-ponte .modo-chat button { padding: 4px 7px; font-size: 12px; min-height: 40px; }   /* bersaglio col dito ≥ 40 px */
  .dentro-ponte .chat-strumenti { gap: 4px; }
  .dentro-ponte .interlocutore b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
/* col dito anche in orizzontale (telefono girato, tablet): bersagli dell'interruttore del modo da 40 px */
@media (pointer: coarse) { .dentro-ponte .modo-chat button { min-height: 40px; } }
body.ponte #btn-term-accanto { display: none; }   /* il terminale resta sul computer; i comandi con «/» passano (comando_diretto) */
.ponte-voce-btn { font-size: 17px; background: transparent; }
.ponte-voce-btn[aria-pressed="true"] { color: var(--accento); border-color: var(--accento-linea); background: var(--accento-fondo); }
.ponte-mic { width: 48px; height: 48px; min-width: 48px; border-radius: 50%; padding: 0; flex: none; display: grid; place-items: center;
  background: var(--rialzo-2); border: 1px solid var(--linea-3); color: var(--testo); }
.ponte-mic svg { width: 22px; height: 22px; }
.ponte-mic.ascolta { background: var(--rosso); border-color: var(--rosso); color: #fff; box-shadow: 0 0 0 4px rgba(227, 70, 113, .25); }
@media (prefers-reduced-motion: no-preference) { .ponte-mic.ascolta { animation: ponte-pulsa 1.2s ease-in-out infinite; } }
@keyframes ponte-pulsa { 50% { box-shadow: 0 0 0 9px rgba(227, 70, 113, .12); } }
.pillola .ponte-mic { align-self: flex-end; }
.ponte-stop { flex: none; min-height: 44px; padding: 0 16px; border-radius: 22px; font-weight: 700; font-size: 15px; letter-spacing: .02em;
  background: var(--rosso); border-color: var(--rosso); color: #fff; }
.ponte-stop:hover { filter: brightness(1.1); background: var(--rosso); }
.ponte-nota { display: block; margin: 6px 4px 0; font-size: 12.5px; color: var(--tenue); }
.ponte-nota.errore { color: #f3a3b9; }
.ponte-avviso { margin: 8px 12px 0; padding: 9px 12px; border-radius: var(--r-lg); font-size: 13.5px;
  border: 1px solid rgba(227, 70, 113, .55); background: rgba(227, 70, 113, .1); color: #f6c0cf; }
.ponte-velo-voce { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; padding: calc(24px + env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom)); text-align: center;
  background: rgba(14, 14, 14, .97); }
.ponte-velo-voce b { font-size: 20px; }
.ponte-velo-voce p { margin: 0; color: var(--testo-2); font-size: 15px; max-width: 320px; line-height: 1.5; }
.ponte-velo-voce .ponte-mic-grande { width: 168px; height: 168px; border-radius: 50%; display: grid; place-items: center; padding: 0;
  background: radial-gradient(circle at 50% 35%, #2c3440, #111418); border: 2px solid var(--accento-linea); color: var(--testo);
  box-shadow: 0 0 40px rgba(89, 156, 231, .35); }
.ponte-velo-voce .ponte-mic-grande svg { width: 64px; height: 64px; }
.ponte-velo-voce .ponte-scrivi { background: transparent; min-height: 44px; padding: 0 20px; font-size: 15px; }