/* ===== MOVABLE-FABS-20261024 =====
   Drag-to-move styling for the three floating action buttons
   (#tdFab, #walkieFab, #chatFab) + the Team Chat entries this build adds
   inside Shop Management (topbar button + dashboard card, mgmt-shell.js).
   Behaviour lives in movable-fabs.js / mgmt-shell.js; this file is purely
   additive — no base rule is edited, so light theme is untouched and the
   dark theme (token-driven) picks everything up from the same variables. */

/* While movable, the buttons take pointer dragging on both mouse and
   touch; the drag engine (movable-fabs.js) distinguishes tap from drag
   by movement, so their normal tap actions are unaffected. */
#tdFab, #walkieFab, #chatFab { touch-action: none; }
#tdFab.fab-dragging, #walkieFab.fab-dragging, #chatFab.fab-dragging {
  cursor: grabbing;
  transform: scale(1.06);
  opacity: 0.92;
  transition: none;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.6), 0 0 0 3px rgba(201, 165, 63, 0.45);
  z-index: 400; /* above its siblings while held; states/classes untouched */
}

/* ── Shop Management topbar: 💬 Team Chat next to the shop name ────────── */
.mgmt-chatbtn {
  display: inline-flex; align-items: center; gap: 7px;
  margin-left: 10px; padding: 7px 13px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff; font-weight: 700; font-size: 13px; cursor: pointer;
  white-space: nowrap; position: relative;
  -webkit-tap-highlight-color: transparent;
}
.mgmt-chatbtn:hover { background: rgba(255, 255, 255, 0.16); }
.mgmt-chatbtn:active { transform: scale(0.96); }
.mgmt-chat-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  background: var(--red, #d33); color: #fff; font-weight: 800; font-size: 11px;
  border: 2px solid rgba(0, 0, 0, 0.35);
}
@media (max-width: 860px) {
  /* Phone topbar is crowded (brand + search + user + Done): the chat
     button goes icon-only so it never clips under the Done button. */
  .mgmt-chatbtn { padding: 7px 10px; margin-left: 6px; }
  .mgmt-chatbtn .mgmt-chatbtn-label { display: none; }
}

/* The desktop global sidebar (z-index 120, 232px expanded) sits exactly
   over the FABs' shipped bottom-left corner — expanded, the buttons
   can't even be grabbed, which defeats the point of making them movable.
   While it is expanded, lift the three buttons just above it (still
   below the chat toast at 155, the mobile drawer at 400 and the
   emergency takeovers at 99999). Collapsed/phone layering is untouched. */
@media (min-width: 861px) {
  body.gs-has-sidebar:not(.gs-sidebar-collapsed) #chatFab,
  body.gs-has-sidebar:not(.gs-sidebar-collapsed) #walkieFab,
  body.gs-has-sidebar:not(.gs-sidebar-collapsed) #tdFab { z-index: 130; }
}

/* Team Chat opened FROM Shop Management must paint above it: both are
   .overlay (z-index 100) and #serviceOverlay sits later in the DOM. */
body:has(#serviceOverlay.open) #teamChatOverlay { z-index: 300; }

/* ── Shop Management dashboard: Team Chat card ─────────────────────────── */
.mgmt-chatcard { display: flex; align-items: center; gap: 12px; }
.mgmt-chatcard .mgmt-chatcard-ico { font-size: 26px; line-height: 1; }
.mgmt-chatcard .mgmt-chatcard-body { flex: 1 1 auto; min-width: 0; }
.mgmt-chatcard .mgmt-chatcard-title { font-weight: 800; }
.mgmt-chatcard .mgmt-chatcard-sub { color: var(--muted); font-size: 13px; }
/* ===== END MOVABLE-FABS-20261024 ===== */