/* Oscar Panel Manager v2 — docks + panels */

/* ---------- root container ---------- */
.fvcms-dock-root {
  position: fixed;
  inset: 0;
  pointer-events: none;  /* most things inside re-enable */
  z-index: 2147483646;
}

/* ---------- dock strip (transparent — pills are the only visible part) ---------- */
.fvcms-dock {
  position: fixed;
  background: transparent;
  display: flex;
  /* Pills start below the panel header (which is ~46px tall) so they
     don't overlap the panel's green header bar. */
  align-items: flex-start;
  justify-content: flex-start;
  gap: 6px;
  padding: 56px 4px 6px 4px;
  pointer-events: auto;
  box-shadow: none;
  border: none;
}
/* Pills sit flush against the dock edge — no inner padding
   between pill and viewport boundary. */
.fvcms-dock-left {
  padding-left: 0 !important;
}
.fvcms-dock-right {
  padding-right: 0 !important;
}
.fvcms-dock-top {
  padding-top: 0 !important;
}
.fvcms-dock-bottom {
  padding-bottom: 0 !important;
}
/* On mobile: hide the dock background, only pills show */
@media (max-width: 600px) {
  .fvcms-dock {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    /* Allow taps to pass through the empty space between pills */
    pointer-events: none;
  }
  .fvcms-dock-pill {
    pointer-events: auto;
  }
  /* On mobile: don't hide the pill label — keep it visible
     (label opacity stays at 1 instead of being hidden by the
     default parked state). Pills stay slim vertical tabs as
     on desktop. */
  .fvcms-dock-left .fvcms-dock-pill .fvcms-dock-pill-label,
  .fvcms-dock-right .fvcms-dock-pill .fvcms-dock-pill-label {
    opacity: 1 !important;
  }
  /* Mobile: pills have no border-radius (they sit flush against
     the viewport edge — there's no screen to "round into"). */
  .fvcms-dock-left .fvcms-dock-pill,
  .fvcms-dock-right .fvcms-dock-pill,
  .fvcms-dock-top .fvcms-dock-pill,
  .fvcms-dock-bottom .fvcms-dock-pill,
  .fvcms-dock-left .fvcms-dock-pill.focused,
  .fvcms-dock-left .fvcms-dock-pill.in-play,
  .fvcms-dock-right .fvcms-dock-pill.focused,
  .fvcms-dock-right .fvcms-dock-pill.in-play,
  .fvcms-dock-top .fvcms-dock-pill.focused,
  .fvcms-dock-top .fvcms-dock-pill.in-play,
  .fvcms-dock-bottom .fvcms-dock-pill.focused,
  .fvcms-dock-bottom .fvcms-dock-pill.in-play {
    border-radius: 0 !important;
  }
}
/* Mobile: floating panel is <50% wide, fits content height.
   Per operator 2026-07-27 02:24: 'on mobile make the panel width less
   than 50% the height to fit content'. */
@media (max-width: 600px) {
  .fvcms-pm-panel.fvcms-pm-floating {
    /* REFLEX-2026-08-10: was max-width: min(70vw, 100%) = 287px on
       412px phone — still too narrow for the world-class v2 inspector
       Source/Display/Extras tabs to fit horizontally. Bumped to
       85vw (332px on 390px). Keep in sync with
       MOBILE_PANEL_W_RATIO in panel-manager.js — both are the
       single source of truth for the mobile panel width. */
    max-width: min(85vw, 100%);
    /* Height: fit-content by default. When the user has
       manually resized (fvcms-resized class), let the inline
       height take effect so the resize actually works. */
    min-height: 0 !important;
  }
  /* Default (not user-resized): fit-content height. */
  .fvcms-pm-panel.fvcms-pm-floating:not(.fvcms-resized) {
    height: auto !important;
  }
  /* Allow the user to drag wider than 85vw by lifting the cap
     when the panel has been manually resized. */
  .fvcms-pm-panel.fvcms-pm-floating.fvcms-resized {
    max-width: 95vw;
  }
  .fvcms-pm-panel.fvcms-pm-floating .fvcms-pm-body {
    /* Default: shrink to content. The body is a flex item
       with flex-basis: auto, so it grows to fit the content
       and the panel sizes to wrap. */
    flex: 1 1 auto;
    overflow-y: auto;
  }
  /* When the panel is user-resized (drag-bar grew the panel
     past its content height), the body should FILL the new
     space, not just be its content height. Otherwise the
     bottom half of the panel is empty and the dock bar floats
     in the middle with a big gap below. */
  .fvcms-pm-panel.fvcms-pm-floating.fvcms-resized .fvcms-pm-body {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
  }
  /* Resize handle stays visible on mobile (operator complaint
     2026-07-27 18:00 'I can't resize the panel'). Per Bug AL
     v4 (operator 2026-08-08 01:03 BST): shrunk 32→24px. Still
     bigger than the 14px desktop indicator for finger-tap
     targets. Bottom-right corner. When the panel is at 45vw,
     the handle is the only way to widen it back to 50vw+ for
     content that needs more room. */
  .fvcms-pm-panel.fvcms-pm-floating .fvcms-pm-resize {
    display: block;
    width: 24px;
    height: 24px;
  }
}
.fvcms-dock-left {
  left: 0;
  top: 0;
  bottom: 0;
  width: 16px;  /* matches unslimmed pill width */
  flex-direction: column;
}
.fvcms-dock-right {
  right: 0;
  top: 0;
  bottom: 0;
  width: 16px;  /* matches unslimmed pill width */
  flex-direction: column;
}
.fvcms-dock-top {
  top: 0;
  left: 0;
  right: 0;
  height: 44px;
}
.fvcms-dock-bottom {
  bottom: 0;
  left: 0;
  right: 0;
  height: 44px;
}
@media (max-width: 600px) {
  /* Mobile: dock has no visible body, pills sit flush against the
     viewport edge (no inset) */
  .fvcms-dock-left { left: 0; width: auto; border-right: none; }
  .fvcms-dock-right { right: 0; width: auto; border-left: none; }
  .fvcms-dock-top { top: 0; height: auto; border-bottom: none; }
  .fvcms-dock-bottom { bottom: 0; height: auto; border-top: none; }
  /* Bigger touch target for all 4 corner handles on mobile.
     Per Bug AL v4 (operator 2026-08-08 01:03 BST): 32→24px.
     Still bigger than 14px desktop for finger-friendly
     tapping. */
  .fvcms-pm-panel[data-state="floating"] .fvcms-pm-resize {
    width: 24px !important;
    height: 24px !important;
  }
  /* Pills get a subtle drop shadow since they float now */
  .fvcms-dock-pill {
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.6);
  }
}

/* ---------- pills (parked off-screen by default, slide into view on hover) ---------- */
.fvcms-dock-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: rgba(60, 60, 68, 0.95);
  color: #fff;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.3px;
  padding: 8px 4px;
  border-radius: 6px;
  cursor: grab;
  user-select: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  transition: transform 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 0.12s ease,
              background 0.18s ease,
              filter 0.12s ease;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
  will-change: transform;
}

/* Panel-type-specific default colours so operators can tell at a
   glance which dock slot belongs to which kind of panel. */
.fvcms-dock-pill[data-pm-panel-id="fvcms-cms-panel"] {
  background: rgba(46, 60, 50, 0.95);     /* CMS — deep forest */
  border: 1px solid rgba(140, 180, 140, 0.5);
}
.fvcms-dock-pill[data-pm-panel-id^="fvcms-region-"] {
  background: rgba(118, 96, 158, 0.95);   /* Region — soft purple */
  border: 1px solid rgba(180, 160, 220, 0.55);
}
.fvcms-dock-pill[data-pm-panel-id^="fvcms-edit-"] {
  background: rgba(170, 132, 60, 0.95);   /* Editor — muted amber */
  border: 1px solid rgba(220, 180, 110, 0.55);
}

.fvcms-dock-pill:hover,
.fvcms-dock-pill:focus-visible,
.fvcms-dock-pill:active {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
  filter: brightness(1.18);
}
.fvcms-dock-pill.focused {
  background: rgba(255, 220, 100, 1) !important;
  color: #1a1a1a;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
  /* Subtle inner ring only. No outer drop shadow — that was making
     the pill's visual extent much wider than its 45px layout
     width, making it look ~77px wide and confusing the operator. */
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
}
/* In-play but not focused: softer amber. The panel is still shown
   full, but it's a sibling — the operator's typing focus is
   elsewhere. */
.fvcms-dock-pill.in-play {
  background: rgba(200, 150, 70, 0.9) !important;
  color: #fff8e8;
  font-weight: 600;
  border: 1px solid rgba(220, 180, 110, 0.55) !important;
  /* No outer drop shadow — keeps the pill's visual extent close
     to its 45px layout width. */
  box-shadow: none;
}
/* When a pill is in-play, it sits flush against the viewport edge.
   Remove the border-radius on the side that meets the edge so the
   pill looks like it grows out of the page boundary, not stuck on
   top of it. (Same applies for both .focused and .in-play.) */
.fvcms-dock-left .fvcms-dock-pill.focused,
.fvcms-dock-left .fvcms-dock-pill.in-play {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: none;
  padding-left: 5px;
}
.fvcms-dock-right .fvcms-dock-pill.focused,
.fvcms-dock-right .fvcms-dock-pill.in-play {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: none;
  padding-right: 5px;
}
.fvcms-dock-top .fvcms-dock-pill.focused,
.fvcms-dock-top .fvcms-dock-pill.in-play {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-top: none;
  padding-top: 5px;
}
.fvcms-dock-bottom .fvcms-dock-pill.focused,
.fvcms-dock-bottom .fvcms-dock-pill.in-play {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: none;
  padding-bottom: 5px;
}

/* Vertical pills on left/right docks — full size, but parked
   off-screen by default. On hover, focus, or active state, the
   pill slides back into the dock so the operator can see what
   it is. The dock itself stays 44px wide so neighbouring pills
   don't shift around. */
.fvcms-dock-left .fvcms-dock-pill,
.fvcms-dock-right .fvcms-dock-pill {
  /* Slimmed (default / parked) state: 12px wide. The label
     is hidden via opacity (see below). The pill expands to
     16px when the panel is in-play or focused. */
  width: 12px;
  height: auto;
  min-height: 80px;
  max-height: 200px;
  writing-mode: vertical-rl;  /* rotated text */
  text-orientation: mixed;
  padding: 12px 1px;
  transition: width 0.18s ease, padding 0.18s ease;
}
/* Unslimmed: in-play or focused panels get a wider pill so the
   label is comfortably visible. */
.fvcms-dock-left .fvcms-dock-pill.focused,
.fvcms-dock-left .fvcms-dock-pill.in-play,
.fvcms-dock-right .fvcms-dock-pill.focused,
.fvcms-dock-right .fvcms-dock-pill.in-play {
  width: 16px;
  padding: 12px 2px;
}
.fvcms-dock-left .fvcms-dock-pill {
  transform: translateX(0);  /* Always visible — minimised panels still
                                 keep their pill in the dock so the
                                 operator knows they're "in the system" */
}
.fvcms-dock-right .fvcms-dock-pill {
  transform: translateX(0);  /* Same: always visible */
}
.fvcms-dock-left .fvcms-dock-pill:hover,
.fvcms-dock-right .fvcms-dock-pill:hover,
.fvcms-dock-left .fvcms-dock-pill:focus-visible,
.fvcms-dock-right .fvcms-dock-pill:focus-visible,
.fvcms-dock-left .fvcms-dock-pill.active,
.fvcms-dock-right .fvcms-dock-pill.active,
.fvcms-dock-left .fvcms-dock-pill.focused,
.fvcms-dock-right .fvcms-dock-pill.focused,
.fvcms-dock-left .fvcms-dock-pill.in-play,
.fvcms-dock-right .fvcms-dock-pill.in-play {
  transform: translateX(0);      /* slide into view */
}
.fvcms-dock-left .fvcms-dock-pill .fvcms-dock-pill-label,
.fvcms-dock-right .fvcms-dock-pill .fvcms-dock-pill-label {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  display: inline-block;
  max-height: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 1;                 /* Per operator 2026-07-27 23:03: 'pills on
                                 the doc only show text on hover it
                                 should always show what it is'.
                                 The label is always visible now. */
  transition: opacity 0.18s ease;
}
.fvcms-dock-left .fvcms-dock-pill:hover .fvcms-dock-pill-label,
.fvcms-dock-right .fvcms-dock-pill:hover .fvcms-dock-pill-label,
.fvcms-dock-left .fvcms-dock-pill:focus-visible .fvcms-dock-pill-label,
.fvcms-dock-right .fvcms-dock-pill:focus-visible .fvcms-dock-pill-label,
.fvcms-dock-left .fvcms-dock-pill.focused .fvcms-dock-pill-label,
.fvcms-dock-right .fvcms-dock-pill.focused .fvcms-dock-pill-label,
.fvcms-dock-left .fvcms-dock-pill.in-play .fvcms-dock-pill-label,
.fvcms-dock-right .fvcms-dock-pill.in-play .fvcms-dock-pill-label {
  opacity: 1;
}
.fvcms-dock-left .fvcms-dock-pill .fvcms-dock-pill-grip,
.fvcms-dock-right .fvcms-dock-pill .fvcms-dock-pill-grip {
  /* Grip shown horizontally at the top of vertical pill */
  writing-mode: horizontal-tb;
  font-size: 11px;
  opacity: 0.85;
  margin-bottom: 4px;
  /* Tighten the gap between the two ⋮ columns so they read as
     one cohesive grip icon, not two columns of dots miles apart. */
  letter-spacing: -3px;
  text-indent: -1px;
  display: inline-block;
  transform: scaleX(0.85);
  transform-origin: center;
}

/* Horizontal pills on top/bottom docks — full size, parked
   off-screen by default. On hover, focus, or active, the pill
   slides into the dock. */
.fvcms-dock-top .fvcms-dock-pill,
.fvcms-dock-bottom .fvcms-dock-pill {
  height: 30px;
  padding: 4px 10px;
}
.fvcms-dock-top .fvcms-dock-pill {
  transform: translateY(-22px);   /* park upward, ~8px visible */
}
.fvcms-dock-bottom .fvcms-dock-pill {
  transform: translateY(22px);    /* park downward, ~8px visible */
}
.fvcms-dock-top .fvcms-dock-pill:hover,
.fvcms-dock-bottom .fvcms-dock-pill:hover,
.fvcms-dock-top .fvcms-dock-pill:focus-visible,
.fvcms-dock-bottom .fvcms-dock-pill:focus-visible,
.fvcms-dock-top .fvcms-dock-pill.active,
.fvcms-dock-bottom .fvcms-dock-pill.active,
.fvcms-dock-top .fvcms-dock-pill.focused,
.fvcms-dock-bottom .fvcms-dock-pill.focused,
.fvcms-dock-top .fvcms-dock-pill.in-play,
.fvcms-dock-bottom .fvcms-dock-pill.in-play {
  transform: translate(0, 0);
}
.fvcms-dock-top .fvcms-dock-pill .fvcms-dock-pill-label,
.fvcms-dock-bottom .fvcms-dock-pill .fvcms-dock-pill-label {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 1;                 /* Always show the label - per operator
                                 2026-07-27 23:03 'pills on the doc
                                 only show text on hover it should
                                 always show what it is' */
  transition: opacity 0.18s ease;
}
.fvcms-dock-top .fvcms-dock-pill:hover .fvcms-dock-pill-label,
.fvcms-dock-bottom .fvcms-dock-pill:hover .fvcms-dock-pill-label,
.fvcms-dock-top .fvcms-dock-pill:focus-visible .fvcms-dock-pill-label,
.fvcms-dock-bottom .fvcms-dock-pill:focus-visible .fvcms-dock-pill-label,
.fvcms-dock-top .fvcms-dock-pill.active .fvcms-dock-pill-label,
.fvcms-dock-bottom .fvcms-dock-pill.active .fvcms-dock-pill-label,
.fvcms-dock-top .fvcms-dock-pill.focused .fvcms-dock-pill-label,
.fvcms-dock-bottom .fvcms-dock-pill.focused .fvcms-dock-pill-label,
.fvcms-dock-top .fvcms-dock-pill.in-play .fvcms-dock-pill-label,
.fvcms-dock-bottom .fvcms-dock-pill.in-play .fvcms-dock-pill-label {
  opacity: 1;
}

/* ---------- panel DOM ---------- */
.fvcms-pm-panel {
  position: fixed;
  background: rgba(20, 28, 20, 0.97);
  color: #e8e8e0;
  font: 12px ui-monospace, Menlo, monospace;
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(120, 160, 120, 0.3);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* Above region tags and the dev button, below the dock itself. */
  z-index: 2147483647;
  pointer-events: auto;
}

/* Docked panels: full height, no border radius (snaps cleanly to viewport edge) */
.fvcms-pm-panel[data-state="docked-active"] {
  border-radius: 0;
  height: 100vh !important;
  max-height: 100vh !important;
}
.fvcms-pm-panel[data-state="docked-active"] .fvcms-pm-header {
  border-radius: 0;
}
/* Header — single row with title (left, flex:1) + controls (right).
   Per operator 2026-08-09 09:50 'it looks odd' — the previous
   two-row design (titlebar + controls row) was visually heavy.
   This single-row design is closer to native window chrome:
   clean line, controls right-aligned, title gets whatever space
   is left with ellipsis fallback. */
.fvcms-pm-header {
  padding: 6px 8px;
  background: rgba(45, 79, 45, 0.92);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-weight: 600;
  letter-spacing: 0.3px;
  user-select: none;
  cursor: grab;
  flex-shrink: 0;
  gap: 6px;
  min-height: 32px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  /* Header sits above the corner resize handles (z-index 2) so
     the close (×) button can be tapped when the panel is dragged
     over content. Bug AL v3+ regression: the TR resize handle
     was 24x24 at top-right, same as the close button, and its
     higher z-index absorbed the tap. Per operator 2026-08-10
     22:08 BST: 'the X is being covered by the grab handle still
     I can't click on it'. */
  position: relative;
  z-index: 10;
}
.fvcms-pm-title {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  font-size: 12px;
  margin-right: auto;
}
/* Tag chip prefix: the first word in the title is the operator's tag
   (e.g. 'S-6', 'W-5'). Make it look like a chip. The title is the
   full text "S-6 · Section"; we use ::first-letter to nudge the
   tag visually, but the actual wrapping is in panel-manager.js
   (see the .fvcms-pm-title-tag span around the tag prefix). */
.fvcms-pm-title-tag {
  display: inline-block;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  padding: 1px 6px;
  margin-right: 8px;
  font-weight: 600;
  font-size: 12px;
  color: #fff;
  font-family: ui-monospace, Menlo, monospace;
}
.fvcms-pm-title-label {
  opacity: 0.85;
}
.fvcms-pm-controls {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.fvcms-pm-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 5px;
  font-size: 14px;
  min-width: 26px;
  min-height: 26px;
  line-height: 1;
}
/* Dock-left and dock-right buttons REMOVED per Bug AL v4
   (operator 2026-08-08 01:03 BST). The CSS workaround to hide
   them on non-floating panels is no longer needed because the
   buttons are not in the markup at all. Drag-to-edge replaces
   them. */
.fvcms-pm-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* 6-dot grip icon (2 columns × 3 rows) used for the detach button */
.fvcms-pm-grip {
  display: inline-block;
  width: 7px;
  height: 11px;
  background-image:
    radial-gradient(circle, currentColor 1.1px, transparent 1.4px),
    radial-gradient(circle, currentColor 1.1px, transparent 1.4px);
  background-size: 3.5px 3.66px;
  background-position: 0 0, 3.5px 0;
  background-repeat: repeat;
  vertical-align: middle;
}
.fvcms-pm-close:hover {
  background: rgba(220, 60, 60, 0.9);
  border-color: rgba(255, 80, 80, 1);
}
.fvcms-pm-body {
  flex: 1 1 auto;
  overflow: auto;
  padding: 12px;
  min-height: 0;
  /* Kill ugly native scrollbars — scroll still works, just no chrome */
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* IE/old Edge */
  -webkit-overflow-scrolling: touch;
}
.fvcms-pm-body::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;                  /* WebKit / Blink */
}

/* Apply same scrollbar hiding to all descendants of a panel
   (checkboxes, list views, anything inside that might scroll) */
.fvcms-pm-panel * {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.fvcms-pm-panel *::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* ---------- mobile bottom dock bar (Bug AL v4 + 2026-08-08 fix) ---------- */
/* Hidden by default. The mobile @media block below turns it on
   ONLY on screens ≤600px AND only when the panel is in
   state="floating" (the docked state already has its own
   pill system; no bar needed). The bar is part of the panel's
   flex column so it sits at the bottom naturally — no absolute
   positioning, no overlap with page content.

   v4 (operator 2026-08-08 16:15 BST, mockup artifact 519 = O4-A):
   small oval track (160×30) with a draggable thumb (50×22) inside.
   "━━ DOCK ━━" label sits below the oval in tiny 9px text. The
   thumb starts centered. Drag the thumb to the left end → dock
   left. Drag right → dock right. Release mid-oval → thumb springs
   back to center. The end arrow (◀ or ▶) lights up green as the
   thumb approaches it (the "would dock here on release" affordance).
   The oval itself is dashed (visual), the thumb is the only solid
   element — small, blue, easy to grab. */
.fvcms-pm-dock-bar {
  display: none;                  /* hidden by default (desktop) */
  flex: 0 0 auto;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 0 6px;           /* top space + bottom space for label */
  background: rgba(20, 28, 20, 0.95);
  /* The bar is a vertical drag handle on mobile (per operator
     2026-08-10 20:53 BST). `touch-action: none` stops the
     browser from hijacking the touch and scrolling the page
     when the user presses on the bar. Without this, the page
     scrolls under the panel and the dock bar appears to "drift"
     (it's actually the page moving under the fixed-position
     panel). */
  touch-action: none;
  user-select: none;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  align-self: stretch;
  /* Stack oval + label 
     vertically, both 
     centered */
  flex-direction: column;
  align-items: center;
  gap: 4px;
  position: relative;
}
.fvcms-pm-dock-oval {
  /* The track. Smaller than 
     v3: 160×30 instead of 
     full-width 2-button bar.*/
  position: relative;
  width: 160px;
  height: 30px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed rgba(255, 255, 255, 0.2);
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  box-sizing: border-box;
  /* touch-action: none lets 
     pointermove work 
     smoothly without the 
     browser hijacking 
     scrolls */
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
.fvcms-pm-dock-end {
  /* The ◀ and ▶ end 
     markers. Static, just 
     visual hints (and they
     light up when the thumb
     approaches). */
  font-size: 11px;
  color: rgba(255, 255, 255, 0.3);
  line-height: 1;
  transition: color 0.15s, text-shadow 0.15s;
  user-select: none;
  pointer-events: none;
  flex: 0 0 auto;
}
.fvcms-pm-dock-end.lit {
  /* Lit up by JS when the 
     thumb approaches this 
     end. */
  color: rgba(120, 255, 200, 1);
  text-shadow: 0 0 6px rgba(120, 255, 200, 0.6);
}
.fvcms-pm-dock-thumb {
  /* The draggable. Starts 
     centered via 
     left: 50%. JS sets 
     left: NNpx during 
     drag, and translate 
     keeps it centered on 
     that point. */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 22px;
  background: rgba(120, 200, 255, 0.15);
  border: 1px solid rgba(120, 200, 255, 0.5);
  border-radius: 11px;
  cursor: grab;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Larger touch area via 
     transparent inset 
     padding — keeps the 
     visible thumb small 
     but tappable. */
  padding: 0;
  box-sizing: border-box;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.fvcms-pm-dock-thumb:active {
  cursor: grabbing;
  background: rgba(120, 200, 255, 0.25);
  border-color: rgba(120, 200, 255, 0.8);
  box-shadow: 0 0 8px rgba(120, 200, 255, 0.3);
}
.fvcms-pm-dock-thumb:focus-visible {
  outline: 2px solid rgba(120, 255, 200, 0.6);
  outline-offset: 2px;
}
.fvcms-pm-dock-thumb-grip {
  /* The 3 tiny vertical 
     lines inside the thumb 
     — universal "draggable"
     symbol. */
  width: 12px;
  height: 8px;
  background-image: radial-gradient(circle, rgba(200, 232, 248, 0.7) 0.8px, transparent 1.2px);
  background-size: 4px 4px;
  background-position: 0 0;
  opacity: 0.7;
}
.fvcms-pm-dock-label {
  /* "━━ DOCK ━━" below the 
     oval. Tiny, low 
     contrast, just a 
     reminder of what the 
     bar does. Visually 
     identical to before — 
     the drag-to-resize 
     behavior is wired but 
     not advertised. */
  font: 600 9px system-ui, -apple-system, sans-serif;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, 0.35);
  user-select: none;
  pointer-events: none;
}

/* Hide the bar on docked-active and hidden states regardless of
   viewport. The bar is a FLOATING-only affordance — when docked
   the operator uses the dock pill system, when hidden there's
   no panel to dock. */
.fvcms-pm-panel[data-state="docked-active"] .fvcms-pm-dock-bar,
.fvcms-pm-panel[data-state="hidden"] .fvcms-pm-dock-bar,
.fvcms-pm-panel[data-state="docked-collapsed"] .fvcms-pm-dock-bar {
  display: none !important;
}

/* On desktop, the dock bar stays hidden (drag-to-edge works
   on desktop via the snap-hint overlay in _startDrag). On
   mobile, it shows when the panel is floating. */
@media (min-width: 601px) {
  .fvcms-pm-dock-bar {
    display: none !important;
  }
}
@media (max-width: 600px) {
  .fvcms-pm-panel[data-state="floating"] .fvcms-pm-dock-bar {
    display: flex;
  }
  /* When the dock bar is showing on mobile, shrink the body
     padding so the bar + body fit nicely. */
  .fvcms-pm-panel[data-state="floating"] .fvcms-pm-body {
    padding: 10px;
  }
}

/* ---------- snap hint (when dragging panel near edge) ---------- */
.fvcms-snap-hint {
  position: fixed;
  background: rgba(180, 140, 80, 0.85);
  pointer-events: none;
  z-index: 2147483644;
  display: none;
  box-shadow: 0 0 20px rgba(180, 140, 80, 0.6);
}
.fvcms-snap-hint-left {
  left: 0; top: 0; bottom: 0; width: 50px;
  border-right: 2px solid rgba(255, 220, 100, 1);
}
.fvcms-snap-hint-right {
  right: 0; top: 0; bottom: 0; width: 50px;
  border-left: 2px solid rgba(255, 220, 100, 1);
}
.fvcms-snap-hint-top {
  top: 0; left: 0; right: 0; height: 50px;
  border-bottom: 2px solid rgba(255, 220, 100, 1);
}
.fvcms-snap-hint-bottom {
  bottom: 0; left: 0; right: 0; height: 50px;
  border-top: 2px solid rgba(255, 220, 100, 1);
}
/* ---------- squeeze body padding when docked panel is in squeeze mode ---------- */
/* data-overlay-mode="1" means SQUEEZE mode is active (panel pushes page). */
/* Default (no attribute) = overlay mode (panel sits on top of page, no padding). */
body:has(.fvcms-pm-panel[data-state="docked-active"][data-dock-edge="left"][data-overlay-mode="1"]) {
  padding-left: var(--fvcms-pm-pinned-w, 0px) !important;
  transition: padding-left 0.2s ease;
}
body:has(.fvcms-pm-panel[data-state="docked-active"][data-dock-edge="right"][data-overlay-mode="1"]) {
  padding-right: var(--fvcms-pm-pinned-w, 0px) !important;
  transition: padding-right 0.2s ease;
}
body:has(.fvcms-pm-panel[data-state="docked-active"][data-dock-edge="top"][data-overlay-mode="1"]) {
  padding-top: var(--fvcms-pm-pinned-h, 0px) !important;
  transition: padding-top 0.2s ease;
}
body:has(.fvcms-pm-panel[data-state="docked-active"][data-dock-edge="bottom"][data-overlay-mode="1"]) {
  padding-bottom: var(--fvcms-pm-pinned-h, 0px) !important;
  transition: padding-bottom 0.2s ease;
}

/* Squeeze button visual feedback: highlighted when in squeeze mode */
.fvcms-pm-squeeze[data-active="1"] {
  background: rgba(180, 140, 80, 0.6) !important;
  color: #fff !important;
}

/* On floating panels, only the close button + collapse button make sense.
   Squeeze and detach are dock-only operations.
   Collapse IS shown on floating — clicking it docks to the nearest edge. */
.fvcms-pm-panel.fvcms-pm-floating .fvcms-pm-squeeze,
.fvcms-pm-panel.fvcms-pm-floating .fvcms-pm-detach {
  display: none;
}

/* ---------- maximize state (operator clicked the ▣ button) ----------
   Per operator 2026-07-27 23:05: 'turn the 6 dot icon into a maximise
   button'. When data-maximized='1', the panel fills the viewport
   with a 16px margin on all sides. Per operator 2026-08-08 11:51 BST:
   'the gap should be same width as the active pills so they don't look
   out of place beside' — pill strip is 16px wide (DOCK_WIDTH constant).
   Body gets flex:1 + max-height:none + height:auto so it grows to fill
   the panel (not shrink to content + 70vh cap which would leave a
   big empty area at the bottom). */
.fvcms-pm-panel[data-maximized="1"] {
  width: calc(100vw - 32px) !important;
  height: calc(100vh - 32px) !important;
  max-width: none !important;
  max-height: none !important;
  z-index: 100000 !important;
  left: 16px !important;
  top: 16px !important;
  right: auto !important;
  bottom: auto !important;
}
.fvcms-pm-panel[data-maximized="1"] .fvcms-pm-body {
  flex: 1 1 auto !important;
  max-height: none !important;
  height: auto !important;
}

/* ---------- resize handle (on inner edge of docked panel) ---------- */
.fvcms-pm-resize {
  position: absolute;
  z-index: 2;
  /* Default hidden; positioned by dock edge */
  display: none;
  background: transparent;
  transition: background 0.15s ease;
}
/* Show only when panel is docked-active OR floating */
.fvcms-pm-panel[data-state="docked-active"] .fvcms-pm-resize,
.fvcms-pm-panel[data-state="floating"] .fvcms-pm-resize {
  display: block;
}
/* Floating: 4 corner resize handles. Per operator 2026-07-27
   22:55 'I can't resize because the bottom-right corner is
   off-screen'. With 4 handles, the operator can grab whichever
   corner is visible. Each handle has its own data-corner attr.
   Per Bug AL v4 (operator 2026-08-08 01:03 BST): shrunk
   18→14px desktop, 32→24px mobile, 0.4→0.25 opacity. Keep all
   4 corners — the smaller indicator solves the original
   'handles cover X button' (Bug AH) because 14x14 is well
   below the close button area. */
.fvcms-pm-panel[data-state="floating"] .fvcms-pm-resize {
  position: absolute;
  width: 14px;
  height: 14px;
  display: block;
  background: transparent;
  z-index: 3;
}
/* BR (bottom-right) - default corner */
.fvcms-pm-panel[data-state="floating"] .fvcms-pm-resize-br {
  right: 0;
  bottom: 0;
  cursor: nwse-resize;
  background-image:
    linear-gradient(135deg, transparent 0%, transparent 50%,
      rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0.25) 60%,
      transparent 60%, transparent 70%,
      rgba(255, 255, 255, 0.25) 70%, rgba(255, 255, 255, 0.25) 80%,
      transparent 80%);
}
/* BL (bottom-left) */
.fvcms-pm-panel[data-state="floating"] .fvcms-pm-resize-bl {
  left: 0;
  bottom: 0;
  cursor: nesw-resize;
  background-image:
    linear-gradient(225deg, transparent 0%, transparent 50%,
      rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0.25) 60%,
      transparent 60%, transparent 70%,
      rgba(255, 255, 255, 0.25) 70%, rgba(255, 255, 255, 0.25) 80%,
      transparent 80%);
}
/* TR (top-right) */
.fvcms-pm-panel[data-state="floating"] .fvcms-pm-resize-tr {
  right: 0;
  top: 0;
  cursor: nesw-resize;
  background-image:
    linear-gradient(45deg, transparent 0%, transparent 50%,
      rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0.25) 60%,
      transparent 60%, transparent 70%,
      rgba(255, 255, 255, 0.25) 70%, rgba(255, 255, 255, 0.25) 80%,
      transparent 80%);
}
/* TL (top-left) */
.fvcms-pm-panel[data-state="floating"] .fvcms-pm-resize-tl {
  left: 0;
  top: 0;
  cursor: nwse-resize;
  background-image:
    linear-gradient(315deg, transparent 0%, transparent 50%,
      rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0.25) 60%,
      transparent 60%, transparent 70%,
      rgba(255, 255, 255, 0.25) 70%, rgba(255, 255, 255, 0.25) 80%,
      transparent 80%);
}
/* Left dock: handle on RIGHT (inner) edge of panel */
.fvcms-pm-panel[data-state="docked-active"][data-dock-edge="left"] .fvcms-pm-resize {
  right: -6px;
  top: 0;
  bottom: 0;
  width: 12px;
  cursor: ew-resize;
}
/* Right dock: handle on LEFT (inner) edge */
.fvcms-pm-panel[data-state="docked-active"][data-dock-edge="right"] .fvcms-pm-resize {
  left: -6px;
  top: 0;
  bottom: 0;
  width: 12px;
  cursor: ew-resize;
}
/* Top dock: handle on BOTTOM (inner) edge */
.fvcms-pm-panel[data-state="docked-active"][data-dock-edge="top"] .fvcms-pm-resize {
  left: 0;
  right: 0;
  bottom: -6px;
  height: 12px;
  cursor: ns-resize;
}
/* Bottom dock: handle on TOP (inner) edge */
.fvcms-pm-panel[data-state="docked-active"][data-dock-edge="bottom"] .fvcms-pm-resize {
  left: 0;
  right: 0;
  top: -6px;
  height: 12px;
  cursor: ns-resize;
}
/* Gold tint on hover */
.fvcms-pm-panel[data-state="docked-active"] .fvcms-pm-resize:hover,
.fvcms-pm-panel[data-state="floating"] .fvcms-pm-resize:hover {
  background-color: rgba(180, 140, 80, 0.7);
  box-shadow: 0 0 8px rgba(180, 140, 80, 0.5);
}

/* Prevent horizontal page scroll when dock has docked panel that pushes
   page (squeeze) — elementor swiper duplicates overflow otherwise. */
html:has(.fvcms-pm-panel[data-state="docked-active"]),
body:has(.fvcms-pm-panel[data-state="docked-active"]) {
  overflow-x: hidden !important;
}

/* When multiple docks exist on perpendicular edges, offset them so
   pills on different edges don't visually overlap. */
body:has(.fvcms-dock-left) .fvcms-dock-top,
body:has(.fvcms-dock-left) .fvcms-dock-bottom {
  left: 50px;  /* clear the left dock area */
}
body:has(.fvcms-dock-right) .fvcms-dock-top,
body:has(.fvcms-dock-right) .fvcms-dock-bottom {
  right: 50px;
}
body:has(.fvcms-dock-top) .fvcms-dock-left,
body:has(.fvcms-dock-top) .fvcms-dock-right {
  top: 50px;
}
body:has(.fvcms-dock-bottom) .fvcms-dock-left,
body:has(.fvcms-dock-bottom) .fvcms-dock-right {
  bottom: 50px;
}


/* On mobile, docked panel is narrower so the operator can still
   see the webpage behind. The dock takes 44px on the panel edge;
   we want the panel to occupy about 78% of the viewport width
   (e.g. ~300px on a 390px phone), leaving a slice of the page
   visible on the opposite side. */
@media (max-width: 600px) {
  /* Mobile: panels are always floating (state=floating, not
     docked-active). The default opening size is 50vw × 50vh so
     the operator can always see the page behind — but the
     operator can resize freely via the bottom-right handle.
     Inline style set by JS during resize overrides these
     defaults (no !important). */
  .fvcms-pm-panel[data-state="floating"] {
    width: 50vw;
    /* Per operator 2026-07-27 12:24 'make the panel width less than
       50%'. min-width 0 (no floor) so the 45vw max-width on
       .fvcms-pm-panel.fvcms-pm-floating wins, otherwise the panel
       would be clamped to 240px on a 390px-wide phone. */
    min-width: 0;
    border-radius: 10px;
  }
  /* Fade in animation only on the FIRST time a panel becomes
     floating on mobile. We use a JS-added class so the animation
     only runs once per panel per session, not every drag. */
  .fvcms-pm-panel.fvcms-mobile-fadein-once {
    animation: fvcms-mobile-fadein 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  }
  @keyframes fvcms-mobile-fadein {
    from { opacity: 0; transform: translateY(32px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  /* Mobile: only the currently-focused panel shows its body.
     Pills stay visible (the operator needs them to switch panels)
     but the panel bodies are stacked in a single visible slot. */
  .fvcms-pm-panel[data-state="docked-active"]:not([data-focused="1"]),
  .fvcms-pm-panel[data-state="floating"]:not([data-focused="1"]) {
    display: none !important;
  }
  /* Background preset swatch row: wrap on narrow panels. */
  .fvcms-region-field > div[style*="display: flex"] {
    flex-wrap: wrap !important;
  }
  .fvcms-region-field button.fvcms-bg-preset {
    flex: 0 0 auto !important;
    min-width: 50px !important;
    font-size: 8px !important;
    padding: 3px 5px !important;
  }
  /* Mobile: hide the squeeze button (squeeze is a desktop-only
     affordance — on touch there's no hover state and the
     overlay/squeeze modes are confusing on small screens). Per
     Bug AL v4 (operator 2026-08-08 01:03 BST): mobile header
     reduces to 3 buttons (collapse, maximize, close). The
     dock-left/dock-right buttons are already removed from the
     markup so we don't need to hide them here. */
  .fvcms-pm-squeeze {
    display: none !important;
  }
  /* Mobile: compact header. Smaller min-height + padding so
     the 3 buttons + title fit on a 390px-wide phone without
     truncation. */
  .fvcms-pm-header {
    min-height: 32px;
    padding: 6px 8px;
  }
  .fvcms-pm-title {
    font-size: 12px;
  }
}

/* Region editor UI (inside region panels) */
.fvcms-region-editor {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fvcms-region-editor-section {
  border-left: 2px solid rgba(180, 140, 80, 0.5);
  padding-left: 8px;
  padding-top: 4px;
  padding-bottom: 4px;
}
.fvcms-region-editor-head {
  font-size: 11px;
  color: #c0e0c0;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 4px;
}
.fvcms-region-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 10px;
  color: #b0c0b0;
}
.fvcms-region-field label {
  font-weight: 600;
  font-size: 10px;
}

/* Editor panel body — Fields / Variants / Raw JSON tabs */
.fvcms-editor-body {
  display: flex;
  flex-direction: column;
  gap: 0;
  font: 12px ui-monospace, monospace;
  color: #e8e8e0;
}
.fvcms-editor-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #b0c0b0;
  margin-bottom: 10px;
}
/* REFLEX-2026-08-10: world-class horizontal tabs. v2-inspector renders
   Source/Display/Extras (or Fields/Style/Advanced) as div.fvcms-tab
   inside div.fvcms-editor-tabs. Without display:flex on the parent,
   the divs fall back to default-block — they render as a vertical
   list, which made the operator think they were "old panels" when
   actually the v2 was firing correctly. Fix: flex row, hover/active
   states, icon support. */
.fvcms-editor-tabs {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  border-bottom: 1px solid rgba(120, 160, 120, 0.25);
  margin-bottom: 8px;
  gap: 2px;
}
.fvcms-tab {
  padding: 8px 10px;
  font-size: 11px;
  color: #8a9a8a;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  flex: 0 0 auto;
  transition: color 0.12s, border-color 0.12s;
}
.fvcms-tab:hover { color: #d0e0d0; }
.fvcms-tab-active {
  color: #c0e0c0 !important;
  border-bottom-color: rgba(120, 180, 120, 0.7) !important;
}
.fvcms-editor-tab-content {
  display: block;
}
.fvcms-tab-active {
  color: #c0e0c0 !important;
  border-bottom-color: rgba(120, 180, 120, 0.7) !important;
}

/* Mobile: docked panels are edge-aligned + full viewport height
   (no border-radius, no centring). The 2026-07-30 'look like floating
   box' workaround has been reverted per operator 2026-08-08 11:56:
   'it should be aligned with either edge and full height'. Now docked
   panels on mobile use the same layout as desktop (touches the edge,
   fills the screen edge-to-edge). The pill dock is the only visible
   indication of dock membership — the panel body itself snaps to the
   edge with full height. */
@media (max-width: 600px) {
  .fvcms-pm-panel[data-state="docked-active"] {
    /* Inherit the desktop docked-active layout: full height,
       border-radius 0, edge-aligned. The default `height: 100vh
       !important; max-height: 100vh !important; border-radius: 0`
       from the desktop rule already applies. We do NOT override
       position/top/left/right here — the JS (_renderPanelState
       for 'docked-active') already sets them to the edge. */
    width: auto;
    min-width: 0;
  }
}