/* ============================================================
   COOLASER Quoter UI — layout mobile dedicato (body.mobile)
   Toolbar in basso, pannelli a bottom-sheet, prezzo sempre visibile.
   ============================================================ */

/* Altezza ADATTIVA al viewport dinamico (dvh): quando la barra URL del
   browser collassa/riappare l'app segue senza bande né gap. */
@supports (height: 100dvh) {
  body.mobile, body.mobile .app { height: 100dvh; }
}

/* Header: UNA riga compatta — logo a sx, azioni essenziali a dx.
   Le tab 2D/3D diventano una pillola flottante sulla tela (via JS). */
body.mobile .topbar { padding: 5px 10px; flex-wrap: nowrap; gap: 8px; min-height: 46px; }
body.mobile .brand { flex: 1 1 auto; min-width: 0; overflow: hidden; }
body.mobile .brand-name { font-size: var(--fs-l); letter-spacing: .06em; white-space: nowrap; }
body.mobile .brand-sub { display: none; }
body.mobile .topbar-actions { gap: 5px; flex: 0 0 auto; flex-wrap: nowrap; }
/* (le misure dei comandi sono quelle della barra larga, style.css «Topbar»:
   34 px qui come là. Prima qui c'erano regole a parte, una per pulsante.) */
/* Header essenziale: freccia · annulla · ripeti · carrello · aggiungi · altro.
   La lingua arriva dal sito host (?lang= / postMessage), lo zoom è pinch,
   adatta = doppio uso del fit da tastiera/gesto. Niente icone sul logo.
   Guida e area personale stanno nel menù «altro» (main.js, 03/10/2026). */
body.mobile #lang-select,
body.mobile #btn-help,
body.mobile #btn-zoom-fit,
body.mobile .topbar-actions .sep,
body.mobile #btn-zoom-in, body.mobile #btn-zoom-out { display: none; }
/* Sui telefoni più stretti (360 px) i cinque comandi e il marchio intero ci
   stanno solo con gli spazi più corti: li stringe adattaBarra (main.js). */
body.mobile .topbar.stretta-tel { padding: 5px 6px; gap: 6px; }
body.mobile .topbar.stretta-tel .brand { gap: 4px; }
body.mobile .topbar.stretta-tel .topbar-actions { gap: 3px; }

/* Tab 2D/3D: pillola flottante in alto al centro della tela */
body.mobile .stage .topbar-center {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  z-index: 30; display: flex; gap: 2px;
  background: rgba(13,13,13,.88); backdrop-filter: blur(4px);
  border: var(--bw) solid var(--border); border-radius: 22px; padding: 3px;
}
body.mobile .viewtab { white-space: nowrap; padding: 6px 14px; font-size: var(--fs-s); border-radius: 18px; }

/* Ribbon: barra azioni scorrevole con la STESSA organizzazione del desktop
   (sottosezioni etichettate, separatori, spaziatura uniforme) */
body.mobile .ribbon {
  overflow-x: auto; flex-wrap: nowrap; gap: 0; padding: 4px 4px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
body.mobile .ribbon::-webkit-scrollbar { display: none; }
body.mobile .ribbon-group {
  flex: 0 0 auto; gap: 6px; padding: 3px 12px;
  border-right: 1px solid var(--border-soft);
}
body.mobile .ribbon-group:last-child { border-right: none; }
body.mobile .ribbon-group > label {
  display: block; font-size: var(--fs-xs); margin-right: 5px; white-space: nowrap;
}
body.mobile .ribbon .btn { min-height: 38px; min-width: 38px; }

/* Corpo: stage a tutta pagina, niente colonne */
body.mobile .body { flex-direction: column; position: relative; }
body.mobile .stage { order: 1; min-height: 0; flex: 1; }

/* Toolbar strumenti: dock a fondo schermo, touch-first */
body.mobile .toolbar {
  order: 3;
  flex-direction: row;
  justify-content: space-around;
  border-right: none;
  border-top: 1px solid var(--border);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  overflow-x: auto;
  scrollbar-width: none;
}
body.mobile .toolbar::-webkit-scrollbar { display: none; }
body.mobile .tool { width: 46px; height: 46px; flex: 0 0 auto; }
body.mobile .tool svg { width: 22px; height: 22px; }
/* dock strumenti del personalizzatore: visibile SOLO su mobile */
body.mobile .toolbar.pz-toolbar { display: flex; }

/* Sidebar → bottom sheet SOPRA la toolbar.
   Sheet ad ALTEZZA variabile (niente translateY: il corpo traslato
   finiva sopra i selettori coprendoli). Da chiuso è alto solo 96px. */
body.mobile .sidebar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 60;
  width: 100%; min-width: 0;
  max-height: calc(100% - var(--dock-h, 0px) - 46px); /* mai sopra topbar+dock */
  height: 96px;
  overflow: hidden;
  border-left: none; border-top: 1px solid var(--accent);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -10px 40px rgba(0,0,0,.5);
  transition: height .28s cubic-bezier(.4,0,.2,1);
  touch-action: none;
}
body.mobile .sidebar.dragging { transition: none; }
/* §7.12: con «riduci il movimento» il pannello cambia altezza senza animazione */
@media (prefers-reduced-motion: reduce) { body.mobile .sidebar { transition: none; } }
body.mobile .sidebar.peek { height: 116px; }
/* half/full: sottraggono l'altezza del dock (--dock-h, impostata da mobile.js) e
   la topbar (~46px) — in landscape lo sheet usciva sopra il bordo del viewport */
body.mobile .sidebar.half { height: min(55%, calc(100% - var(--dock-h, 0px) - 46px)); }
body.mobile .sidebar.full { height: min(88%, calc(100% - var(--dock-h, 0px) - 46px)); }
/* da chiuso: solo maniglia + prezzo + tab, mai contenuti tagliati */
body.mobile .sidebar.peek .side-panels { visibility: hidden; }
/* Grip reale (creato da mobile.js): zona di presa alta 22px, trascinabile */
body.mobile .sheet-grip {
  flex: 0 0 auto; height: 22px;
  display: flex; align-items: center; justify-content: center;
  touch-action: none; cursor: grab;
}
body.mobile .sheet-grip::before {
  content: ''; width: 48px; height: 4.5px; border-radius: 3px;
  background: var(--accent); opacity: .55;
}
body.mobile .side-panels { -webkit-overflow-scrolling: touch; }
/* Il pannello si chiude anche qui (11/10/2026). Aperto, il pulsante sta in
   fondo alle schede del foglio, con la freccia in giù. Chiuso, il foglio
   sparisce e resta una pillola «Mostra il pannello» in basso a destra, sopra
   la barra degli strumenti; la tela si vede tutta, con la legenda delle
   lavorazioni. Il pulsante non trascina il foglio (main.js, montaPannello). */
body.mobile .btn-pannello .ic { transform: rotate(90deg); }
body.mobile.pannello-chiuso .sidebar {
  height: 0; overflow: visible; border-top: 0; box-shadow: none; background: none;
}
body.mobile.pannello-chiuso .sheet-grip, body.mobile.pannello-chiuso .mini-price { display: none; }
body.mobile.pannello-chiuso .side-tabs { position: absolute; right: 10px; bottom: 10px; border: 0; }
body.mobile.pannello-chiuso .btn-pannello {
  flex-direction: row; gap: 6px; min-height: 40px; padding: 0 14px 0 10px;
  border: var(--bw) solid var(--accent); border-radius: 20px;
  background: rgba(13, 13, 13, .92); color: var(--accent);
  text-transform: none; letter-spacing: 0; font-size: var(--fs-m);
}
body.mobile.pannello-chiuso .btn-pannello .ic { transform: rotate(-90deg); }
body.mobile.pannello-chiuso .btn-pannello-txt { writing-mode: horizontal-tb; }
/* senza il foglio la barra della 3D scende accanto alla pillola */
body.mobile.pannello-chiuso .stage-3dbar { bottom: 40px; }

/* Barra prezzo: DENTRO la testata dello sheet (sempre visibile,
   sia chiuso che aperto — niente doppia linguetta dietro il foglio) */
body.mobile .mini-price {
  display: flex; align-items: center; justify-content: space-between;
  margin: 2px 12px 4px;
  background: linear-gradient(140deg, var(--bg-3), #241f18);
  border: var(--bw) solid var(--accent); border-radius: 10px;
  padding: 7px 14px; cursor: pointer;
  flex: 0 0 auto;
}
.mini-price { display: none; } /* solo mobile */
body.mobile .mini-price .lbl { font-size: var(--fs-s); letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); }
body.mobile .mini-price .val { font: 600 var(--fs-l) var(--mono); color: var(--accent); }
/* «Preventivo manuale» è un'informazione, non un errore: resta nell'accento (con --danger rosso sarebbe un allarme) */
body.mobile .mini-price .rfq-flag { color: var(--accent); font-size: var(--fs-s); font-weight: 600; }

/* HUD più discreto */
body.mobile .stage-hud { left: 8px; bottom: 8px; font-size: var(--fs-s); gap: 8px; }
/* Dati finitura 3D: in BASSO, sopra lo sheet chiuso (in alto c'è la pillola 2D/3D) */
body.mobile .stage-3dbar {
  top: auto; bottom: 124px; left: 8px; right: auto;
  padding: 6px 10px; z-index: 40;
}

/* Modali a schermo quasi pieno */
body.mobile .modal { width: min(94vw, 480px); }

/* Touch target generosi SOLO nei pannelli (non nell'header, che resta compatto) */
body.mobile .sidebar .btn, body.mobile .sidebar .inp, body.mobile .sidebar select.inp,
body.mobile .modal .btn, body.mobile .modal .inp { min-height: 40px; }
body.mobile .inp.xs { min-height: 34px; }
body.mobile .job-ctrls button { padding: 6px 8px; font-size: var(--fs-l); }
body.mobile .layer-row { padding: 11px 10px; }
body.mobile .sidetab { padding: 13px 4px; }

/* ---------- Assegnazione lavorazioni su mobile ---------- */
/* La pillola 2D/3D occupa il top-center della tela: banner e hint scendono */
body.mobile .assign-banner, body.mobile .assign-hint,
body.mobile.mode-rapido .assign-banner, body.mobile.mode-rapido .assign-hint {
  top: 56px; flex-wrap: wrap; justify-content: center;
  max-width: 94%; font-size: var(--fs-s);
}
body.mobile .assign-banner .btn { min-height: 36px; }
/* Legenda compatta. C'è solo a pannello chiuso (style.css): in basso a
   sinistra, sopra le coordinate, perché a destra c'è il pulsante che riapre il
   pannello. Prima stava in basso a destra, sotto il foglio, e non si vedeva mai. */
body.mobile .job-legend {
  right: auto; left: 8px; bottom: 40px; max-width: 46vw; font-size: var(--fs-s);
  padding: 5px 7px; max-height: 30%;
}
/* Striscia selezione: touch target adeguati (già coperti da .sidebar .inp) */
body.mobile .sel-assign { padding: 8px 10px 6px; }

/* Carrello: pannello a tutta larghezza sotto la topbar */
body.mobile .cart-drawer { top: 48px; right: 4px; left: 4px; width: auto; }
/* "Aggiungi al carrello" (e, nel gestionale, "Salva come prodotto"): sul
   telefono SOLO l'icona, il nome resta nel title. */
body.mobile .topbar .btn-icotesto span { display: none; }
body.mobile .topbar .btn-icotesto { width: var(--ctl-h); padding: 0; justify-content: center; }

/* ---------- Badge Assistenza: linguetta a scomparsa (centro bordo destro) ---------- */
/* Collassata: solo freccia ← + icona, occupa pochissimo e non copre i comandi.
   Aperta (tap/swipe ←): pulsante "Assistenza" completo. Tap fuori/→ richiude. */
body.mobile #help-wa {
  left: auto; right: 0; bottom: auto; top: 50%;
  transform: translateY(-50%);
  border-radius: 14px 0 0 14px;
  padding: 12px 8px 12px 9px; gap: 6px;
  box-shadow: -2px 2px 10px rgba(0, 0, 0, .35);
  transition: padding .15s ease;
}
body.mobile #help-wa .wa-arrow {
  display: inline; font-size: var(--fs-l); line-height: 1; font-weight: 700;
  transition: transform .15s ease;
}
body.mobile #help-wa .wa-label { display: none; }
body.mobile #help-wa.open { padding: 12px 16px 12px 6px; }
body.mobile #help-wa.open .wa-label { display: inline; }
/* aperta: la freccia è la ZONA DI CHIUSURA (tap target generoso, con separatore) */
body.mobile #help-wa.open .wa-arrow {
  transform: rotate(180deg);
  padding: 10px 9px; margin: -10px 2px -10px -2px;
  border-left: 1px solid rgba(255, 255, 255, .35); /* ruotato 180°: appare a destra */
}

/* Righelli: su schermi piccoli rubano spazio alla tela → nascosti */
body.mobile .ruler, body.mobile .ruler-corner { display: none !important; }

/* Pannellino trasformazione: su mobile nell'editor c'è già il pannello
   Proprietà. Quello del rapido (la barra della selezione) resta: sotto. */
body.mobile .xform-panel:not(.xp-rapido) { display: none !important; }
body.mobile .stage.has-rulers .stage-hud { left: 8px; }
body.mobile .stage.has-rulers .rp-tools { top: 12px !important; left: 12px !important; }
body.mobile .stage.has-rulers #btn-newfile { top: 12px !important; }
body.mobile .vcube { top: 10px; }

/* ---------- Rapido sul telefono: strumenti e barra della selezione (11/10/2026) ---------- */
/* Gli strumenti stavano in alto a sinistra sotto la pillola 2D/3D, che ne
   copriva due e lasciava fuori schermo gli ultimi: ora una striscia a tutta
   larghezza sotto la pillola, che scorre di lato. */
body.mobile .rp-tools, body.mobile .stage.has-rulers .rp-tools {
  /* sotto la pillola (che finisce a 53 px), e a destra si ferma prima del
     cubo delle viste e del suo angolo */
  top: 58px !important; left: 0 !important; right: 62px; padding: 0 10px;
  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
body.mobile .rp-tools::-webkit-scrollbar { display: none; }
body.mobile .rp-tools .btn { flex: 0 0 auto; min-height: 36px; }
/* gli avvisi sulla tela scendono sotto la striscia degli strumenti */
body.mobile.mode-rapido .assign-banner, body.mobile.mode-rapido .assign-hint { top: 102px; }
/* La barra della selezione: in basso, sopra il foglio del prezzo chiuso, una
   riga sola che scorre di lato (il dito non sta in un pannellino accanto al
   pezzo, e il pezzo resta libero da toccare) */
body.mobile .xform-panel.xp-rapido {
  /* 124 px: sopra il foglio del prezzo chiuso (116 px), come la barra della 3D */
  left: 8px !important; right: 8px; top: auto !important; bottom: 124px;
  flex-direction: row; align-items: center; gap: 8px;
  overflow-x: auto; scrollbar-width: none; padding: 7px 9px;
}
body.mobile .xform-panel.xp-rapido::-webkit-scrollbar { display: none; }
body.mobile .xform-panel.xp-rapido .xp-row { display: contents; }
body.mobile .xform-panel.xp-rapido .xp-row > *, body.mobile .xform-panel.xp-rapido .xp-slot > * { flex: 0 0 auto; }
body.mobile .xform-panel.xp-rapido .xp-bt, body.mobile .xform-panel.xp-rapido .btn { min-height: 34px; }
/* A pannello chiuso la legenda delle lavorazioni sta in basso a sinistra,
   dove c'è anche la barra della selezione: da tre righe in su le due si
   coprivano (misurato il 12/10/2026: con quattro righe, 39 px; ogni riga ne
   vale circa 22). Mentre c'è una selezione la legenda si fa da parte (la barra
   dice già a quale lavorazione va), e torna quando si deseleziona. La barra
   nasce con l'editor, prima della legenda: per questo basta «~». */
body.mobile .xform-panel.xp-rapido:not(.hidden) ~ .job-legend { display: none; }
body.mobile .copertura-banner { flex-wrap: wrap; justify-content: center; max-width: 94%; font-size: var(--fs-s); }
body.mobile .copertura-banner .btn { min-height: 36px; }

/* ============================================================
   Telefono: il foglio degli OGGETTI dietro alla barra in fondo.
   Un tasto del dock = una categoria: quanti oggetti ci sono, quali,
   e i parametri di quello scelto. Sostituisce la card «Elementi»
   dentro il foglio del prezzo, che sul telefono costringeva a
   scorrere per arrivare al pulsante che serviva (16/09/2026).
   ============================================================ */
body.mobile .pz-scrim {
  position: absolute; inset: 0; z-index: 68;
  background: rgba(8, 8, 12, .45);
  opacity: 0; pointer-events: none;
  transition: opacity .22s ease;
}
body.mobile .pz-scrim.aperto { opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { body.mobile .pz-scrim { transition: none; } }

body.mobile .pz-foglio {
  position: absolute; left: 0; right: 0; bottom: var(--dock-h, 0px); z-index: 70;
  display: flex; flex-direction: column;
  max-height: min(52%, calc(100% - var(--dock-h, 0px) - 46px));
  background: var(--panel, #16161c);
  border-top: 1px solid var(--accent);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, .55);
  transform: translateY(101%);
  transition: transform .26s cubic-bezier(.4, 0, .2, 1);
  overscroll-behavior: contain;
}
body.mobile .pz-foglio.aperto { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { body.mobile .pz-foglio { transition: none; } }
/* al computer non esiste proprio */
.pz-foglio, .pz-scrim { display: none; }
body.mobile .pz-foglio, body.mobile .pz-scrim { display: flex; }

body.mobile .pz-foglio-testa {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px calc(10px - 2px);
  border-bottom: 1px solid var(--border);
}
body.mobile .pz-foglio-titolo {
  flex: 1 1 auto; min-width: 0;
  font: 600 var(--fs-m)/1.2 var(--font);
  letter-spacing: .06em; text-transform: uppercase; color: var(--accent);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.mobile .pz-foglio-icona {
  flex: 0 0 auto;
  width: 34px; height: 34px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-l); line-height: 1;
  background: transparent; border: 1px solid var(--border); border-radius: 9px;
  color: var(--text, #e9e9ee); cursor: pointer;
}
body.mobile .pz-foglio-icona:active { background: rgba(220, 192, 160, .16); }
body.mobile .pz-foglio-corpo {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 10px 12px calc(12px + env(safe-area-inset-bottom));
}
/* la scheda proprietà dentro al foglio non ripete cornice e margini */
body.mobile .pz-foglio-corpo .card { margin: 0; border: none; background: transparent; padding: 0; }
/* il titolo della scheda ripeterebbe quello della testata del foglio */
body.mobile .pz-foglio-corpo .card > h4 { display: none; }
body.mobile .pz-foglio-corpo .el-row { min-height: 44px; margin-bottom: 8px; }
/* il ✕ di una riga è un bersaglio da dito, non da mouse */
body.mobile .pz-foglio-corpo .el-row .del {
  width: 38px; height: 38px; margin-left: auto;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-l); border-radius: 9px;
}
body.mobile .pz-foglio-corpo .el-row .del:active { background: rgba(255, 255, 255, .08); }

/* Numerino sul tasto del dock: dice che gli oggetti sono tre, non uno */
body.mobile .pz-toolbar .tool { position: relative; }
body.mobile .pz-toolbar .pz-conto {
  position: absolute; top: 2px; right: 2px;
  min-width: 16px; height: 16px; padding: 0 3px;
  display: none;
  align-items: center; justify-content: center;
  font: 700 var(--fs-xs)/1 var(--font);
  color: #14140f; background: var(--accent); border-radius: 9px;
}
body.mobile .pz-toolbar .tool.ha-oggetti .pz-conto { display: flex; }
body.mobile .pz-toolbar .tool.attivo {
  background: rgba(220, 192, 160, .18);
  box-shadow: inset 0 0 0 1px var(--accent);
}