/* =========================================================================
   rebus-bottom-bar.css — Variant C · FLOATING DOCK (pillola dark macOS-dock).
   Tema dark, in-linea, divider sottili. Colori/dimensioni da spec v23.14.
   ========================================================================= */
:root{
  --rebus-bar-bg:#1A1A1A;
  --rebus-bar-surface:#2A2A2A;
  --rebus-bar-border:rgba(255,255,255,0.08);
  --rebus-bar-text:#F4ECDE;          /* crema, non bianco */
  --rebus-bar-text-dim:#9A9A9A;
  --rebus-bar-muted:#666666;
  --rebus-bar-success:#4ADE80;
  --rebus-bar-cta-bg:#FFFFFF;
  --rebus-bar-cta-text:#0A0A0A;
  --rebus-bar-ghost:rgba(255,255,255,0.06);
}

/* vecchia barra del motore: invisibile ma nel DOM */
#rebus-preview-bar{display:none !important;}

#rebus-bottom-bar{
  position:fixed; z-index:10050; display:none; box-sizing:border-box;
  bottom:24px; left:50%; transform:translateX(-50%);
  height:56px; border-radius:36px; padding:0 28px;
  background:var(--rebus-bar-bg);
  box-shadow:0 8px 32px rgba(0,0,0,0.18);
  align-items:center; gap:20px;                 /* gap fra gruppi */
  font-family:inherit; color:var(--rebus-bar-text);
  max-width:92vw; white-space:nowrap;
}
#rebus-bottom-bar.is-visible{display:flex;}

/* ── status ── */
#rebus-bottom-bar .rbb-head{display:flex; flex-direction:column; justify-content:center; min-width:0;}
#rebus-bottom-bar .rbb-kicker{display:none; font-size:10px; letter-spacing:.14em; font-weight:700;
  color:var(--rebus-bar-text-dim); text-transform:uppercase; line-height:1.2;}
#rebus-bottom-bar .rbb-status{display:flex; align-items:center; gap:8px; min-width:0;}
#rebus-bottom-bar .rbb-dot{width:5px; height:5px; border-radius:50%; background:var(--rebus-bar-muted); flex:none;}
#rebus-bottom-bar .rbb-status.ok .rbb-dot{background:var(--rebus-bar-success);}
#rebus-bottom-bar .rbb-status.ko .rbb-dot{background:#F87171;}
#rebus-bottom-bar .rbb-status-text{font-size:13.5px; color:var(--rebus-bar-text); overflow:hidden; text-overflow:ellipsis;}

/* ── divider verticali ── */
#rebus-bottom-bar .rbb-divider{width:1px; height:32px; background:rgba(255,255,255,0.1); flex:none;}

/* ── gruppi controlli ── */
#rebus-bottom-bar .rbb-group{display:flex; align-items:center; gap:6px;}

/* tondo 32×32 */
#rebus-bottom-bar .rbb-round{width:32px; height:32px; border-radius:50%; padding:0;
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  background:var(--rebus-bar-surface); border:1px solid var(--rebus-bar-border);
  color:var(--rebus-bar-text); cursor:pointer;}
#rebus-bottom-bar .rbb-ghost{background:var(--rebus-bar-ghost);}
#rebus-bottom-bar .rbb-round:hover{background:#333;}

/* pill RUOTA 100×32 r16 */
#rebus-bottom-bar .rbb-rotate{height:32px; min-width:100px; border-radius:16px; padding:0 14px;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  background:var(--rebus-bar-surface); border:1px solid var(--rebus-bar-border);
  color:var(--rebus-bar-text); font:inherit; font-size:13px; font-weight:700; letter-spacing:.04em; cursor:pointer;}
#rebus-bottom-bar .rbb-rotate:hover{background:#333;}

/* pill Conferma 110×32 r16 — bianca */
#rebus-bottom-bar .rbb-confirm{height:32px; min-width:110px; border-radius:16px; padding:0 16px;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  background:var(--rebus-bar-cta-bg); border:none;
  color:var(--rebus-bar-cta-text); font:inherit; font-size:13px; font-weight:700; cursor:pointer;}
#rebus-bottom-bar .rbb-confirm:disabled{opacity:.5; cursor:not-allowed;}

#rebus-bottom-bar svg{display:block; width:18px; height:18px;}

/* ── MOBILE < 768: full-width attaccata al bottom, radius 18px SOLO top ──
   A larghezza telefono i controlli + CTA non entrano come sul desktop: lo
   STATUS (head) si comprime con ellipsi, i controlli restano interi e la CTA
   NON viene MAI tagliata. */
@media (max-width:767px){
  #rebus-bottom-bar{
    left:0; right:0; bottom:0; transform:none; width:100%; max-width:none;
    height:64px; border-radius:18px 18px 0 0; padding:0 12px; gap:10px;
  }
  #rebus-bottom-bar .rbb-head{flex:1 1 auto; min-width:0; overflow:hidden;}
  #rebus-bottom-bar .rbb-group{flex:none; gap:8px;}
  #rebus-bottom-bar .rbb-kicker{display:block;}            /* kicker breve "NUOVO"/"NEW" (≥380px) */
  #rebus-bottom-bar .rbb-round{width:36px; height:36px;}   /* touch target ≥36 */
  #rebus-bottom-bar .rbb-rotate{min-width:0; padding:0 12px; height:36px;}
  #rebus-bottom-bar .rbb-confirm{min-width:0; padding:0 14px; height:36px;}
}
/* telefoni ≤430px (SE 375 / 13 390 / 14PM 430): RUOTA solo icona per far stare la CTA */
@media (max-width:430px){
  #rebus-bottom-bar{gap:8px; padding:0 10px;}
  #rebus-bottom-bar .rbb-group{gap:6px;}
  #rebus-bottom-bar .rbb-rotate .rbb-rot-label{display:none;}
  #rebus-bottom-bar .rbb-rotate{width:36px; min-width:36px; padding:0;}
}
@media (max-width:379px){
  /* schermi minuscoli (es. SE 375): niente kicker; lo status collassa al solo
     pallino (validità per colore) → nessun testo da troncare, CTA intera. */
  #rebus-bottom-bar .rbb-kicker{display:none;}
  #rebus-bottom-bar .rbb-status-text{display:none;}
}

/* ── toast reset ── */
#rebus-bottom-toast{position:fixed; z-index:10060; left:50%; transform:translateX(-50%); bottom:96px;
  background:var(--rebus-bar-bg); color:var(--rebus-bar-text); padding:10px 18px; border-radius:999px;
  font-size:14px; box-shadow:0 8px 32px rgba(0,0,0,0.28); opacity:0; transition:opacity .2s; pointer-events:none;}
#rebus-bottom-toast.show{opacity:1;}