/* shared/report-theme-toggle.css — floating dark/light toggle button, styled to
   match the #rn-fab / #abr-fab site-wide widget pattern (shared/report-notes.css /
   shared/report-bugreport.css). Stacked above those two so all three floating
   buttons are visible at once rather than overlapping:
     #abr-fab (Feedback)   bottom: 22px
     #rn-fab  (Notes)      bottom: 78px
     #rt-fab  (Theme)      bottom: 134px  ← this file
*/

#rt-fab {
  position: fixed !important;
  bottom: 134px !important;
  right: 22px !important;
  z-index: 999999 !important;
  height: 46px;
  width: 46px;
  border-radius: 50%;
  background: var(--bg-surface, #fff);
  color: var(--text-secondary, #666666);
  border: 1px solid var(--border, #D1D5DB);
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  line-height: 1;
  padding: 0;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
#rt-fab.rt-visible { display: flex; }
#rt-fab:hover { transform: scale(1.08); box-shadow: 0 6px 22px rgba(0,0,0,.24); }
#rt-fab:active { transform: scale(0.96); }

@media (max-width: 480px) {
  #rt-fab { bottom: 122px !important; right: 16px !important; height: 42px; width: 42px; font-size: 17px; }
}

/* ── Fab dock: parked off to the side until the cursor is in the bottom-
   right corner ────────────────────────────────────────────────────────────
   Coordinated with the matching blocks in shared/report-notes.css (#rn-fab) and
   shared/report-bugreport.css (#abr-fab) via the shared ".fab-dock-open" class —
   shared/report-theme-toggle.js owns the single mousemove listener that toggles it
   on all three fabs. Scoped to fine-pointer/hover devices only: on touch
   hardware there's no hover to trigger the reveal, so the fabs stay at
   their normal always-visible resting state (the un-scoped rules above). */
@media (hover: hover) and (pointer: fine) {
  #rt-fab {
    transform: translateX(40px);
    opacity: 0;
    pointer-events: none;
    transition: transform .2s ease, opacity .2s ease, box-shadow .15s ease, background .15s ease;
  }
  #rt-fab.fab-dock-open { transform: translateX(0); opacity: 1; pointer-events: auto; }

  /* Persistent little "grip" tab at the very edge, centered on the fab
     stack (22–180px) — the only always-visible sign that hovering the
     corner reveals the three docked fabs. Sits at right:0 while the fabs
     themselves start at right:22px, so it never overlaps them even when
     they're open. Created/removed by shared/report-theme-toggle.js alongside the
     dock listener; purely decorative except for its own small hover state
     (the actual reveal is driven by cursor position, not this element). */
  #fab-dock-handle {
    position: fixed !important;
    bottom: 71px !important;
    right: 0 !important;
    z-index: 999998 !important;
    width: 14px;
    height: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border-radius: 8px 0 0 8px;
    background: var(--bg-surface, #fff);
    border: 1px solid var(--border, #D1D5DB);
    border-right: none;
    box-shadow: -2px 0 8px rgba(0,0,0,.12);
    opacity: 0.55;
    cursor: pointer;
    transition: opacity .2s ease, width .2s ease;
    animation: fab-dock-hint-nudge 1.6s ease-in-out 1s 2;
  }
  #fab-dock-handle span {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--text-muted, #9ca3af);
  }
  #fab-dock-handle:hover,
  #fab-dock-handle.fab-dock-open { opacity: 0.95; width: 18px; }

  @keyframes fab-dock-hint-nudge {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-4px); }
  }
}