/*
 * floating-panel-widget.css
 *
 * Side drawer container with 10 hamburger-style toggle icon variants.
 * Core state uses a hidden checkbox + label sibling. A tiny JS companion
 * hardens trigger clicks and handles optional outside-click, Escape, and
 * link-click close behavior.
 *
 * Structure expected from the renderer:
 *   <div class="floating-panel-widget mode-public panel-side-left variant-N">
 *     <input type="checkbox" id="..." class="floating-panel-toggle-state">
 *     <label for="..." class="floating-panel-toggle"> <svg.fp-icon>…</svg></label>
 *     <div class="floating-panel-body">…children…</div>
 *   </div>
 *
 * Design-mode rendering uses class `mode-design` — drops the fixed
 * positioning so the editor can interact with the body inline.
 *
 * State flow:
 *   - `.floating-panel-widget` is `position: fixed` in public and design mode
 *   - `.floating-panel-body` starts off-screen (translateX) when checkbox unchecked
 *   - `.floating-panel-toggle-state:checked ~ .floating-panel-body` slides into view
 *   - `.starts-expanded` adds `checked` to the input so default-open works without JS
 */

/* ── Root container ──────────────────────────────────────────────── */

:root {
    --floating-panel-z-index: 1040;
    --floating-panel-design-z-index: 2400;
}

.floating-panel-widget {
    --floating-panel-expanded-width: 280px;
    --floating-panel-toggle-size: 44px;
    --floating-panel-bg: #ffffff;
    --floating-panel-fg: #172033;
    --floating-panel-toggle-fg: #172033;
    --floating-panel-toggle-bg: #ffffff;
    --floating-panel-line: #d9e2ec;
    --floating-panel-soft: #f7fafc;
    --floating-panel-offset-top: 0px;
    --floating-panel-offset-bottom: 0px;
    --floating-panel-backdrop-opacity: 0.35;
    --floating-panel-backdrop-blur: 4px;
    --floating-panel-rail-width: 48px;
    --floating-panel-anim: 240ms cubic-bezier(0.4, 0, 0.2, 1);
    --floating-panel-icon-anim: 320ms cubic-bezier(0.65, 0, 0.35, 1);
    z-index: var(--floating-panel-z-index);
    font: inherit;
}

/* The root IS the floating wrapper — position:fixed in both modes so
 * the author sees the panel exactly where it'll appear publicly. The
 * `entity-list-item` class on the root tells the framework's pen
 * positioning JS to anchor the edit pen here (closest() returns the
 * root itself); per-row CSS in mc-designer-extensions.css hides the
 * pen until the panel is hovered and positions it at the top-right
 * corner of the panel.
 *
 * Specificity: `entity-list-item` carries a default `position:relative`
 * from the framework CSS — compound selector `.floating-panel-widget`
 * + the side modifier wins because cascade order favours later sheets
 * AND .floating-panel-widget.entity-list-item is more specific than a
 * bare .entity-list-item rule. */
.floating-panel-widget {
    position: fixed !important;
    top: max(var(--floating-panel-offset-top), var(--design-top-chrome-height, 0px));
    bottom: var(--floating-panel-offset-bottom);
    z-index: var(--floating-panel-z-index);
    isolation: isolate;
    pointer-events: none;  /* page clicks pass through; children re-enable */
    width: var(--floating-panel-expanded-width);
    max-width: 90vw;
    height: auto;
}
.floating-panel-widget.panel-side-left  { left: 0; }
.floating-panel-widget.panel-side-right { right: 0; }

/* Keep floating panels below renderer chrome so the toggle/body do not
 * vanish behind the yellow/orange bars. */
.floating-panel-widget.mode-design {
    top: max(var(--floating-panel-offset-top), var(--design-top-chrome-height, 0px));
    z-index: var(--floating-panel-design-z-index);
}

/* Parent frames can create stacking contexts via opacity/z-index, so
 * promote the frame/slot that owns the fixed panel as well. */
.layout-item:has(> .floating-panel-widget),
.allpage-widget-frame:has(> .floating-panel-widget),
.allpage-slot:has(.floating-panel-widget) {
    z-index: var(--floating-panel-z-index);
    overflow: visible;
}

body[data-design-on="true"] .layout-item:has(> .floating-panel-widget),
body[data-design-on="true"] .allpage-widget-frame:has(> .floating-panel-widget),
body[data-design-on="true"] .allpage-slot:has(.floating-panel-widget) {
    z-index: var(--floating-panel-design-z-index);
}

/* Empty-state authoring needs a bit more breathing room than the runtime
 * drawer width so the helper CTA matches the regular canvas utility view. */
.floating-panel-widget.mode-design:has(.floating-panel-body > .drop-zone) {
    width: max(var(--floating-panel-expanded-width), 344px);
}

/* ── Checkbox state driver ──────────────────────────────────────── */

.floating-panel-toggle-state {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

/* ── Toggle button ──────────────────────────────────────────────── */

.floating-panel-toggle {
    position: absolute;
    top: 12px;
    z-index: 3;            /* above the body — always visible */
    display: flex;
    align-items: center;
    justify-content: center;
    width:  var(--floating-panel-toggle-size);
    height: var(--floating-panel-toggle-size);
    background: var(--floating-panel-toggle-bg);
    color: var(--floating-panel-toggle-fg);
    cursor: pointer;
    pointer-events: auto;
    user-select: none;
    border-radius: 8px;
    border: 1px solid var(--floating-panel-line);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
    transition: background var(--floating-panel-anim),
                border-color var(--floating-panel-anim),
                box-shadow var(--floating-panel-anim);
}
.floating-panel-widget.panel-side-left  .floating-panel-toggle { left: 12px; }
.floating-panel-widget.panel-side-right .floating-panel-toggle { right: 12px; }
.floating-panel-toggle:hover {
    background: var(--floating-panel-soft);
    border-color: #bfd1e3;
}

/* ── Backdrop ──────────────────────────────────────────────────── */

.floating-panel-backdrop {
    position: fixed;
    top: max(var(--floating-panel-offset-top), var(--design-top-chrome-height, 0px));
    right: 0;
    bottom: var(--floating-panel-offset-bottom);
    left: 0;
    z-index: 1;
    display: block;
    opacity: 0;
    pointer-events: none;
    background: transparent;
    transition: opacity var(--floating-panel-anim),
                background var(--floating-panel-anim),
                backdrop-filter var(--floating-panel-anim);
}

.floating-panel-widget.mode-design .floating-panel-backdrop {
    display: none;
}

.floating-panel-widget.backdrop-mode-dim .floating-panel-backdrop {
    background: rgba(15, 23, 42, var(--floating-panel-backdrop-opacity));
}

.floating-panel-widget.backdrop-mode-blur .floating-panel-backdrop {
    background: rgba(15, 23, 42, var(--floating-panel-backdrop-opacity));
    backdrop-filter: blur(var(--floating-panel-backdrop-blur));
    -webkit-backdrop-filter: blur(var(--floating-panel-backdrop-blur));
}

.floating-panel-widget .floating-panel-toggle-state:checked ~ .floating-panel-backdrop {
    opacity: 1;
}

.floating-panel-widget.backdrop-mode-none .floating-panel-toggle-state:checked ~ .floating-panel-backdrop {
    opacity: 0;
}

.floating-panel-widget[data-close-on-outside-click="true"] .floating-panel-toggle-state:checked ~ .floating-panel-backdrop {
    pointer-events: auto;
}

/* ── Compact rail ──────────────────────────────────────────────── */

.floating-panel-rail {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: none;
    align-items: center;
    justify-content: center;
    width: var(--floating-panel-rail-width);
    min-height: 128px;
    padding: 14px 8px;
    box-sizing: border-box;
    pointer-events: auto;
    cursor: pointer;
    color: var(--floating-panel-toggle-fg);
    background: var(--floating-panel-toggle-bg);
    border: 1px solid var(--floating-panel-line);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
    transform: translateY(-50%);
    transition: opacity var(--floating-panel-anim),
                transform var(--floating-panel-anim),
                background var(--floating-panel-anim),
                border-color var(--floating-panel-anim);
}

.floating-panel-rail:hover {
    background: var(--floating-panel-soft);
    border-color: #bfd1e3;
}

.floating-panel-rail span {
    display: inline-block;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
}

.floating-panel-widget.closed-mode-rail.panel-side-left .floating-panel-rail {
    left: 0;
    border-radius: 0 14px 14px 0;
    border-left: 0;
}

.floating-panel-widget.closed-mode-rail.panel-side-right .floating-panel-rail {
    right: 0;
    border-radius: 14px 0 0 14px;
    border-right: 0;
}

.floating-panel-widget.closed-mode-rail .floating-panel-toggle-state:not(:checked) + .floating-panel-toggle {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.92);
}

.floating-panel-widget.closed-mode-rail .floating-panel-toggle-state:not(:checked) ~ .floating-panel-rail {
    display: flex;
}

.floating-panel-widget.closed-mode-rail .floating-panel-toggle-state:checked ~ .floating-panel-rail {
    opacity: 0;
    pointer-events: none;
}

.floating-panel-toggle--design {
    box-shadow: 0 12px 28px rgba(21, 101, 192, 0.14);
}

.fp-icon {
    width:  24px;
    height: 24px;
    overflow: visible;
    pointer-events: none;
}
.fp-icon line,
.fp-icon path,
.fp-icon circle,
.fp-icon rect,
.fp-icon polyline {
    pointer-events: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    transform-origin: 16px 16px;
    transition: transform var(--floating-panel-icon-anim),
                opacity   var(--floating-panel-icon-anim);
}
.fp-icon circle,
.fp-icon rect { fill: currentColor; stroke-width: 0; }

/* ── Body (the panel content) ───────────────────────────────────── */

.floating-panel-body {
    position: absolute;
    inset: 0;              /* fill the fixed root */
    z-index: 2;            /* above backdrop, below toggle button */
    background: var(--floating-panel-bg);
    color: var(--floating-panel-fg);
    overflow-y: auto;
    pointer-events: auto;
    /* Top padding clears the absolute-positioned toggle button (44px height
     * + 12px top + 12px gap). Side padding is symmetric. */
    padding: 68px 16px 16px;
    border: 1px solid var(--floating-panel-line);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16);
    transition: transform var(--floating-panel-anim);
    box-sizing: border-box;
}

/* Both modes use the same open/close mechanics. The renderer emits `checked`
 * only when the saved default state is open, including in design mode. */
.floating-panel-widget.panel-side-left  .floating-panel-body {
    transform: translateX(-100%);
}
.floating-panel-widget.panel-side-right .floating-panel-body {
    transform: translateX(100%);
}
.floating-panel-widget .floating-panel-toggle-state:checked ~ .floating-panel-body {
    transform: translateX(0);
}

/* `.starts-expanded` is a render-time hint that mirrors a checked initial
 * state. The checkbox remains the real open/close driver. */

.floating-panel-widget.mode-design .floating-panel-body {
    background: #ffffff;
}

.floating-panel-widget.mode-design .floating-panel-body .container-child > .layout-item {
    background: #ffffff;
}

.floating-panel-widget.mode-design .floating-panel-body > .drop-zone:hover,
.floating-panel-widget.mode-design .floating-panel-body > .drop-zone.drop-hover {
    background: #eef6ff;
    border-color: #8bb9ef;
    color: #155e9f;
}

/* Persistent utility surface — the final add/drop target stays inside the
 * floating panel even after widgets have been added. */
.floating-panel-widget.mode-design .floating-panel-body > .drop-zone {
    flex: 0 0 auto;
    min-height: 132px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    border: 1px solid #e3ebf3;
    border-radius: 16px;
    background: #fbfcfe;
    padding: 22px 18px;
    margin-top: auto;
}

.floating-panel-widget.mode-design .floating-panel-body > .drop-zone:only-child {
    flex: 1 1 auto;
    min-height: 200px;
    gap: 16px;
    padding: 24px 18px;
}

.floating-panel-widget.mode-design .floating-panel-body > .drop-zone .drop-zone-label {
    opacity: 1;
    color: #bfccd8;
    font-size: 15px;
    font-weight: 500;
}

.floating-panel-widget.mode-design .floating-panel-body > .drop-zone .drop-zone-hover-menu {
    display: block;
    margin-top: 0;
}

.floating-panel-widget.mode-design .floating-panel-body > .drop-zone .drop-zone-add-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: min(100%, 290px);
    min-height: 52px;
    padding: 12px 20px;
    border-radius: 10px;
    box-sizing: border-box;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: 0 10px 24px rgba(21, 101, 192, 0.18);
}

/* ── Sidebar adaptation for horizontal dropdown menus ──────────── */

/* `menu_widget_horizontal_dropdown` is still a top-nav widget by default,
 * but inside the floating panel we want sidebar behavior: stacked rows,
 * full-width hit targets, and submenus that expand in-flow instead of
 * overlaying absolutely under a horizontal bar. */
.floating-panel-body .menu-widget-horizontal-dropdown-list {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
}

.floating-panel-body .menu-widget-horizontal-dropdown--sticky {
    background: transparent;
    border-bottom: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.floating-panel-body .menu-widget-horizontal-dropdown--sticky .menu-widget-horizontal-dropdown-list {
    min-height: 0;
    padding: 0;
}

.floating-panel-body .container-child > .layout-item:has(> .menu-widget-horizontal-dropdown--sticky) {
    position: relative;
    top: auto;
    z-index: auto;
    overflow: hidden;
}

.floating-panel-body .container-child > .layout-item:has(> .menu-widget-horizontal-dropdown--sticky) > .menu-widget-horizontal-dropdown--sticky {
    position: sticky;
}

.floating-panel-body .menu-widget-horizontal-dropdown-list > li {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.floating-panel-body .menu-widget-horizontal-dropdown-link,
.floating-panel-body .menu-widget-horizontal-dropdown-list > li > .menuitem-link-widget {
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}

/* In the narrow drawer, reveal children as nested rows below the parent
 * instead of as an absolute overlay. */
.floating-panel-body .menu-widget-horizontal-dropdown-submenu {
    position: static;
    min-width: 0;
    margin: 0;
    padding: 0 0 0 14px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    opacity: 1;
    visibility: visible;
    transform: none;
    overflow: hidden;
    max-height: 0;
    transition: max-height var(--floating-panel-anim), padding-top var(--floating-panel-anim);
}

.floating-panel-body .menu-widget-horizontal-dropdown-list > li:hover > .menu-widget-horizontal-dropdown-submenu,
.floating-panel-body .menu-widget-horizontal-dropdown-list > li:focus-within > .menu-widget-horizontal-dropdown-submenu,
.floating-panel-body .menu-widget-horizontal-dropdown-list > li.is-edit-locked > .menu-widget-horizontal-dropdown-submenu {
    max-height: 480px;
    padding-top: 4px;
}

.floating-panel-body .menu-widget-horizontal-dropdown-child-link,
.floating-panel-body .menu-widget-horizontal-dropdown-submenu .menuitem-dropdown-child-widget {
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    white-space: normal;
}

/* ── Toggle icon visual feedback (root state class) ─────────────── */
/*
 * The renderer doesn't add `.is-expanded` (we use the checkbox), so
 * the icon animations need to read the checkbox state from the root.
 * `:has()` lets us hoist the checked state up to the root for the
 * variant rules. Falls back to no animation on browsers without :has,
 * which is OK — the panel still toggles, just without the icon morph.
 */

.floating-panel-widget:has(.floating-panel-toggle-state:checked),
.floating-panel-widget.starts-expanded {
    /* Reserved hook — variant rules below target .is-expanded indirectly
     * via :has(). The class itself can be used in future for non-:has fallbacks. */
}

/* ── Variant 1: hamburger ↔ X ───────────────────────────────────── */

.variant-1:has(.floating-panel-toggle-state:checked) .fp-bar-middle { transform: scaleX(0); }
.variant-1:has(.floating-panel-toggle-state:checked) .fp-bar-top    { transform: translateY(6px)  rotate(45deg); }
.variant-1:has(.floating-panel-toggle-state:checked) .fp-bar-bottom { transform: translateY(-6px) rotate(-45deg); }

/* ── Variant 2: dots ↔ horizontal lines ─────────────────────────── */

.variant-2 .fp-dot { transition: transform var(--floating-panel-icon-anim), r var(--floating-panel-icon-anim); }
.variant-2:has(.floating-panel-toggle-state:checked) .fp-dot-1 { transform: translate(-8px, -2px) scaleX(4); }
.variant-2:has(.floating-panel-toggle-state:checked) .fp-dot-2 { transform: scaleX(4); }
.variant-2:has(.floating-panel-toggle-state:checked) .fp-dot-3 { transform: translate(-8px,  2px) scaleX(4); }

/* ── Variant 3: whole-icon rotate 90° ───────────────────────────── */

.variant-3 .fp-rotate-group { transition: transform var(--floating-panel-icon-anim); transform-origin: 16px 16px; transform-box: fill-box; }
.variant-3:has(.floating-panel-toggle-state:checked) .fp-rotate-group { transform: rotate(90deg); }

/* ── Variant 4: plus ↔ minus ────────────────────────────────────── */

.variant-4:has(.floating-panel-toggle-state:checked) .fp-pm-vert { transform: scaleY(0); }

/* ── Variant 5: chevron flip ▶ ↔ ◀ ──────────────────────────────── */

.variant-5 .fp-arrow { transition: transform var(--floating-panel-icon-anim); }
.variant-5:has(.floating-panel-toggle-state:checked) .fp-arrow { transform: rotateY(180deg); }

/* ── Variant 6: grid ↔ X ────────────────────────────────────────── */

.variant-6 .fp-grid {
    transition: transform var(--floating-panel-icon-anim);
    transform-box: fill-box;
}
.variant-6:has(.floating-panel-toggle-state:checked) .fp-grid-tl { transform: translate( 4px,  4px) rotate(45deg)  scaleY(0.4); }
.variant-6:has(.floating-panel-toggle-state:checked) .fp-grid-tr { transform: translate(-4px,  4px) rotate(-45deg) scaleY(0.4); }
.variant-6:has(.floating-panel-toggle-state:checked) .fp-grid-bl { transform: translate( 4px, -4px) rotate(-45deg) scaleY(0.4); }
.variant-6:has(.floating-panel-toggle-state:checked) .fp-grid-br { transform: translate(-4px, -4px) rotate(45deg)  scaleY(0.4); }

/* ── Variant 7: tilde ↔ straight line ───────────────────────────── */

.variant-7 .fp-wave { transition: transform var(--floating-panel-icon-anim); }
.variant-7:has(.floating-panel-toggle-state:checked) .fp-wave { transform: scaleY(0.05); }

/* ── Variant 8: bars fan out ────────────────────────────────────── */

.variant-8:has(.floating-panel-toggle-state:checked) .fp-fan-top    { transform: rotate(-25deg); }
.variant-8:has(.floating-panel-toggle-state:checked) .fp-fan-middle { transform: scaleX(0.6); }
.variant-8:has(.floating-panel-toggle-state:checked) .fp-fan-bottom { transform: rotate(25deg); }

/* ── Variant 9: equals ↔ X ──────────────────────────────────────── */

.variant-9:has(.floating-panel-toggle-state:checked) .fp-eq-top    { transform: translateY(4px) rotate(45deg); }
.variant-9:has(.floating-panel-toggle-state:checked) .fp-eq-bottom { transform: translateY(-4px) rotate(-45deg); }

/* ── Variant 10: cross-fade hamburger ↔ X ───────────────────────── */

.variant-10 .fp-fade-burger,
.variant-10 .fp-fade-x {
    transition: opacity var(--floating-panel-icon-anim);
}
.variant-10 .fp-fade-x { opacity: 0; }
.variant-10:has(.floating-panel-toggle-state:checked) .fp-fade-burger { opacity: 0; }
.variant-10:has(.floating-panel-toggle-state:checked) .fp-fade-x      { opacity: 1; }

/* ── `starts-expanded` non-:has fallbacks (older browsers) ──────── */

.floating-panel-widget.starts-expanded.variant-1 .fp-bar-middle { transform: scaleX(0); }
.floating-panel-widget.starts-expanded.variant-1 .fp-bar-top    { transform: translateY(6px)  rotate(45deg); }
.floating-panel-widget.starts-expanded.variant-1 .fp-bar-bottom { transform: translateY(-6px) rotate(-45deg); }
/* (variants 2-10 follow the same pattern — left lean if you target legacy
 * browsers; modern Chromium/Safari/Firefox all ship :has() now.) */