/* =========================================================================
   rebus-mobile-panel.css — UX mobile: pannello bottom-sheet + densità.
   Additivo, scoped a <768px. Non tocca il pannello desktop (#comp-panel-desktop).

   D1 — Pannello modale parziale (bottom-sheet): max 60vh, ancorato in basso,
   canvas visibile nel 40% superiore. Scroll interno se il contenuto eccede.
   P6 — Riduzione zone vuote (empty-state e pannello).
   ========================================================================= */
/* ---- FIX2 v23.6: nascondi il popover/badge "Modifica" runtime (tutti i viewport) ----
   Il badge flottante sul modulo selezionato (testo "Modulo attivo"/"Modifica") è
   ridondante: il pannello MODIFICA (bottom-sheet su mobile) è l'unico punto di
   interazione. La selezione del modulo e l'apertura del pannello restano intatte. */
.rebus-selection-badge { display: none !important; }

/* ---- FIX3: pulsante RUOTA senza contatore "×N" (tutti i viewport) ----
   La barra preview espone <span class="rpb-count">×N</span> accanto a RUOTA.
   Lo nascondiamo: resta solo l'icona ⟳ + label "RUOTA"/"ROTATE". Globale. */
#rebus-preview-bar .rpb-rotate .rpb-count { display: none !important; }

@media (max-width: 767px) {
  /* ---- FIX1: payoff header non essenziale su mobile (mobile-first) ----
     "REBUS · CONFIGURATORE/CONFIGURATOR" nascosto <768; resta su ≥768.
     Vale su configuratore (.comp-header-tag) ed export/guida
     (.export-header-tag). Il logo DESALTO resta. */
  .comp-header-tag,
  .export-header-tag { display: none !important; }

  /* ---- FIX2: canvas pulito in preview/rotazione ----
     quando la barra azione (#contextMenu con RUOTA/Conferma/Annulla) è attiva,
     il drawer FORMA si nasconde: canvas massimo + sola barra azione.
     La classe è gestita da rebus-mobile-rotate-clean.js. */
  body.rebus-preview-active #panel-drawer,
  body.rebus-preview-active #panel-overlay { display: none !important; }

  /* ---- D1: bottom-sheet ---- */
  #panel-drawer {
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: auto !important;
    max-height: 60vh !important;
    bottom: 0 !important;
    border-radius: 18px 18px 0 0 !important;
    box-shadow: 0 -12px 34px rgba(0, 0, 0, .18) !important;
    overflow: hidden !important;            /* il body interno scrolla */
    display: flex;
    flex-direction: column;
  }
  /* corpo scrollabile se il contenuto supera l'altezza del foglio */
  #panel-drawer .comp-panel-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1 1 auto;
    min-height: 0;
  }
  /* header del pannello sempre visibile in cima al foglio */
  #panel-drawer .comp-panel-header {
    flex: 0 0 auto;
  }
  /* overlay trasparente: il canvas resta VISIBILE nel 40% superiore,
     il tap fuori dal foglio continua a chiudere (handler invariato). */
  #panel-overlay {
    background: transparent !important;
  }

  /* ---- P6: densità pannello (meno vuoto tra griglia forme e fondo) ---- */
  #panel-drawer .comp-panel-section--shape { margin-bottom: 10px; }
  #panel-drawer .shape-grid { gap: 8px; }
  #panel-drawer .comp-panel-body { padding-top: 8px; padding-bottom: 12px; }
  /* NB: l'area sopra l'empty-state NON è vuoto sprecato: è il workspace 3D
     (griglia di posa). Nessun override: penalizzarla degraderebbe la UX. */
}