/* ══════════════════════════════════════════════════════════════
   MODE 4 – FAB BUTTON (C)
══════════════════════════════════════════════════════════════ */
.stoc-fab-panel {
  position:fixed; bottom:calc(28px + var(--stoc-safe-bottom,0px));
  z-index:99999;
  display:flex; flex-direction:column; align-items:flex-end; gap:10px;
  background:transparent; border:none;
  box-shadow:none; border-radius:0; padding:0;
  will-change:transform; /* FIX L1 */
}

/* Viewport position controls. */
.stoc-fab-right { right:24px; left:auto; align-items:flex-end; }
.stoc-fab-left { left:24px; right:auto; align-items:flex-start; }
.stoc-fab-center { left:50%; right:auto; transform:translateX(-50%); align-items:center; }
.stoc-fab-left .stoc-fab-popup { transform-origin:bottom left; }
.stoc-fab-center .stoc-fab-popup { transform-origin:bottom center; }
.stoc-fab-right .stoc-fab-popup { transform-origin:bottom right; }
@media (max-width:600px) {
  .stoc-fab-right { right:14px; }
  .stoc-fab-left { left:14px; }
}
.stoc-fab-panel,
.stoc-scheme-light.stoc-fab-panel,
.stoc-scheme-dark.stoc-fab-panel,
.stoc-scheme-auto.stoc-fab-panel,
.stoc-scheme-custom.stoc-fab-panel {
  background:transparent; border:none; box-shadow:none;
}
.stoc-fab-btn {
  pointer-events:all;
  width:52px; height:52px; border-radius:50%;
  background:var(--stoc-fab-bg); color:var(--stoc-fab-color);
  border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--stoc-shadow);
  transition:transform .2s, box-shadow .2s;
  font-size:20px;
}
/* BUG-1 FIX: explicit background on all states prevents any theme or focus
   pseudo-class from resetting the button color */
.stoc-fab-btn:hover  { background:var(--stoc-fab-bg); transform:scale(1.08); box-shadow:var(--stoc-shadow-strong); }
.stoc-fab-btn:active { background:var(--stoc-fab-bg); transform:scale(.95); }
/* :focus-visible — outline only for keyboard Tab navigation, not mouse clicks */
.stoc-fab-btn:focus         { background:var(--stoc-fab-bg); outline:none; }
.stoc-fab-btn:focus-visible { background:var(--stoc-fab-bg); outline:3px solid var(--stoc-accent); outline-offset:3px; }
.stoc-fab-icon::before { content:'≡'; line-height:1; }
.stoc-fab-panel.is-open .stoc-fab-icon::before { content:'✕'; }

/* FIX: max-height animation (not height:0→auto which can't transition).
   display:flex+column so panel-content fills space and panel-footer sticks bottom. */
.stoc-fab-popup {
  pointer-events:none;
  background:var(--stoc-bg);
  border:1px solid var(--stoc-border);
  border-radius:var(--stoc-radius);
  box-shadow:var(--stoc-shadow-strong);
  width:min(280px,calc(100vw - 28px));
  max-height:0; overflow:hidden;
  display:flex; flex-direction:column;
  opacity:0; visibility:hidden;
  transform:scale(.95) translateY(10px);
  transform-origin:bottom right;
  transition:max-height .3s cubic-bezier(.4,0,.2,1),
             opacity .25s ease, transform .25s ease, visibility .25s;
}
.stoc-fab-panel.is-open .stoc-fab-popup {
  pointer-events:all; opacity:1; visibility:visible;
  max-height:60vh; transform:scale(1) translateY(0);
}
/* FIX: After animation (JS adds stoc-anim-done), keep overflow:hidden on popup
   itself — scroll is handled by .stoc-panel-content inside, not the popup wrapper */
.stoc-fab-panel.is-open .stoc-fab-popup.stoc-anim-done {
  overflow:hidden;
  max-height:60vh;
}
/* panel-content inside fab: flex:1 fills popup height */
.stoc-fab-popup .stoc-panel-content {
  flex:1; min-height:0; overflow-y:auto;
  background:var(--stoc-bg);
}