/* ===========================================================
   Luna Chem Lab — Dock + Menubar + 5-theme system
   Additive layer on top of tokens.css + tone.css.
   Themes: dark (default) · amber · night · light · glass
   =========================================================== */

/* ────────────── Theme surface tokens (applied via data-lab-theme) ────────────── */
:root {
    /* surface/text tokens (Deep Lab defaults — brightened from original) */
    --c-surface:          #1E2240;
    --c-surface-elevated: #262B4D;
    --c-border-subtle:    #2F355C;
    --c-border-strong:    #444B7A;
    --c-text-body:        #E8EAF3;
    --c-text-soft:        #AEB4CC;
    --c-text-faint:       #7C8299;
    --c-primary-soft:     #4FE3D0;
    --c-primary-soft-dim: #2AAEA0;
    --c-warn-soft:        #F2B949;
    --c-danger-soft:      #FF6B6B;
    --c-success-soft:     #5AE08E;
    --c-bg-page:          #14172A;
    /* canvas gradient (applied via canvas-area::before) */
    --canvas-grad-top:    #1A1E38;
    --canvas-grad-bot:    #0E1126;
}

/* Daylight Lab — bright mode */
:root[data-lab-theme="light"] {
    --c-bg-page:          #F7F8FA;
    --c-surface:          #FFFFFF;
    --c-surface-elevated: #FCFCFD;
    --c-border-subtle:    #E4E7EC;
    --c-border-strong:    #CBD1D9;
    --c-text-body:        #1A1F2E;
    --c-text-soft:        #4A5366;
    --c-text-faint:       #7A8296;
    --c-primary-soft:     #0E8A8A;
    --c-primary-soft-dim: #4BB3B3;
    --c-warn-soft:        #C2700A;
    --c-danger-soft:      #C4352E;
    --c-success-soft:     #157A42;
    --canvas-grad-top:    #EDF2F7;
    --canvas-grad-bot:    #D9E2EC;
}

/* Amber — warm day */
:root[data-lab-theme="amber"] {
    --c-bg-page:          #2d1a08;
    --c-surface:          #3d2608;
    --c-surface-elevated: #4a3010;
    --c-border-subtle:    rgba(245,158,11,0.25);
    --c-border-strong:    rgba(245,158,11,0.5);
    --c-text-body:        #FFE8B5;
    --c-text-soft:        #D4B078;
    --c-text-faint:       #8A7248;
    --c-primary-soft:     #FBBF24;
    --c-primary-soft-dim: #D97706;
    --canvas-grad-top:    #2a1a0a;
    --canvas-grad-bot:    #1a1005;
}

/* Night — dark cinematic */
:root[data-lab-theme="night"] {
    --c-bg-page:          #05050a;
    --c-surface:          #0a0a14;
    --c-surface-elevated: #12142a;
    --c-border-subtle:    rgba(34,211,238,0.12);
    --c-border-strong:    rgba(34,211,238,0.28);
    --c-text-body:        #C8CEDA;
    --c-text-soft:        #7C8399;
    --c-text-faint:       #4A5066;
    --c-primary-soft:     #22d3ee;
    --c-primary-soft-dim: #0891b2;
    --canvas-grad-top:    #020208;
    --canvas-grad-bot:    #080812;
}

/* Liquid Glass — iOS 26 */
:root[data-lab-theme="glass"] {
    --c-bg-page:          #F4EEFF;
    --c-surface:          rgba(255,255,255,0.55);
    --c-surface-elevated: rgba(255,255,255,0.72);
    --c-border-subtle:    rgba(255,255,255,0.45);
    --c-border-strong:    rgba(180,170,220,0.55);
    --c-text-body:        #1C1B2E;
    --c-text-soft:        #4D4A6B;
    --c-text-faint:       #7D7A96;
    --c-primary-soft:     #6C5CE7;
    --c-primary-soft-dim: #A59BF0;
    --c-warn-soft:        #D98620;
    --c-danger-soft:      #D63A5C;
    --c-success-soft:     #1F9D6A;
    --canvas-grad-top:    #EDE6FF;
    --canvas-grad-bot:    #FFE2EE;
}

/* Mesh backdrop visible only on glass theme */
:root[data-lab-theme="glass"] body {
    background:
        radial-gradient(at 20% 20%, #FFD4E5 0%, transparent 50%),
        radial-gradient(at 80% 10%, #C7E4FF 0%, transparent 50%),
        radial-gradient(at 70% 85%, #D8D0FF 0%, transparent 55%),
        radial-gradient(at 15% 80%, #FFE8C4 0%, transparent 50%),
        #F4EEFF;
    background-attachment: fixed;
}

/* Dim the tone.css overlay on light/glass (film grain is distracting on bright themes) */
:root[data-lab-theme="light"] body::before,
:root[data-lab-theme="glass"] body::before { opacity: 0.25; }
:root[data-lab-theme="light"] body::after,
:root[data-lab-theme="glass"] body::after { opacity: 0.15; }

/* ────────────── Premiere-style thin top menu bar ────────────── */
:root {
    --mb-bar-h: 28px;
    --mb-row-h: 26px;
    --mb-bg:    rgba(26,26,36,0.92);
    --mb-bg-dd: rgba(19,19,27,0.96);
}
:root[data-lab-theme="light"] {
    --mb-bg:    rgba(244,246,250,0.95);
    --mb-bg-dd: rgba(255,255,255,0.98);
}
:root[data-lab-theme="glass"] {
    --mb-bg:    rgba(255,255,255,0.18);
    --mb-bg-dd: rgba(255,255,255,0.32);
}

.top-menubar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--mb-bar-h);
    display: flex;
    align-items: stretch;
    background: var(--mb-bg);
    border-bottom: 1px solid var(--c-border-subtle);
    font-family: 'Jua', 'Malgun Gothic', sans-serif;
    font-size: 12px;
    color: var(--c-text-body);
    z-index: 9000;
    user-select: none;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.mb-brand {
    display: flex; align-items: center; gap: 6px;
    padding: 0 12px 0 10px;
    border-right: 1px solid var(--c-border-subtle);
    color: var(--c-primary-soft);
}
.mb-logo { font-size: 14px; }
.mb-title { font-size: 11px; letter-spacing: 0.3px; color: var(--c-text-body); }

.mb-menu { position: relative; }
.mb-label {
    height: var(--mb-bar-h);
    padding: 0 10px;
    background: transparent;
    border: 0; cursor: pointer;
    color: var(--c-text-body);
    font: inherit;
    display: flex; align-items: center;
    transition: background 0.12s ease;
}
.mb-label:hover,
.mb-menu.open > .mb-label {
    background: rgba(34,211,238,0.15);
    color: #fff;
}
:root[data-lab-theme="light"] .mb-label:hover,
:root[data-lab-theme="light"] .mb-menu.open > .mb-label {
    background: rgba(14,138,138,0.12);
    color: var(--c-text-body);
}
:root[data-lab-theme="glass"] .mb-label:hover,
:root[data-lab-theme="glass"] .mb-menu.open > .mb-label {
    background: rgba(108,92,231,0.15);
    color: var(--c-text-body);
}
.mb-menu.open > .mb-label {
    box-shadow: inset 0 -2px 0 var(--c-primary-soft);
}

.mb-dropdown {
    position: absolute;
    top: 100%; left: 0;
    min-width: 240px;
    background: var(--mb-bg-dd);
    border: 1px solid var(--c-border-strong);
    border-top: 0;
    box-shadow: 0 10px 28px rgba(0,0,0,0.55), 0 0 0 1px rgba(0,0,0,0.25);
    padding: 4px 0;
    display: none;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-radius: 0 0 6px 6px;
}
.mb-menu.open > .mb-dropdown { display: block; }

.mb-item {
    width: 100%;
    height: var(--mb-row-h);
    padding: 0 12px 0 10px;
    display: grid;
    grid-template-columns: 20px 1fr auto;
    align-items: center;
    gap: 8px;
    background: transparent; border: 0; cursor: pointer;
    color: var(--c-text-body);
    font: 12px 'Jua', 'Malgun Gothic', sans-serif;
    text-align: left;
    transition: background 0.1s ease;
}
.mb-item:hover {
    background: rgba(34,211,238,0.15);
    color: #fff;
}
:root[data-lab-theme="light"] .mb-item:hover {
    background: rgba(14,138,138,0.12);
    color: var(--c-text-body);
}
:root[data-lab-theme="glass"] .mb-item:hover {
    background: rgba(108,92,231,0.15);
    color: var(--c-text-body);
}
.mb-ico {
    font-size: 12px;
    color: var(--c-primary-soft);
    opacity: 0.85;
    text-align: center;
    line-height: 1;
}
.mb-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mb-key {
    font: 10px 'JetBrains Mono', ui-monospace, monospace;
    color: var(--c-text-faint);
    letter-spacing: 0.3px;
    padding-left: 16px;
}
.mb-item:hover .mb-key { color: var(--c-text-soft); }

.mb-sep {
    height: 1px;
    margin: 4px 10px;
    background: var(--c-border-subtle);
}

/* Right-side slots (merged from old topbar) */
.mb-spacer { flex: 1; }
.mb-status {
    display: flex; align-items: center;
    padding: 0 10px;
    font: 11px 'Jua', 'Malgun Gothic', sans-serif;
    color: var(--c-text-soft);
    border-left: 1px solid var(--c-border-subtle);
    max-width: 340px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: default;
}
.mb-status.clickable { cursor: pointer; }
.mb-status.clickable:hover { background: rgba(34,211,238,0.08); color: var(--c-text-body); }
.mb-score {
    color: var(--c-primary-soft);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
}
.mb-mini {
    height: var(--mb-bar-h);
    min-width: 40px;
    padding: 0 10px;
    background: transparent;
    border: 0;
    border-left: 1px solid var(--c-border-subtle);
    color: var(--c-text-body);
    cursor: pointer;
    font: 11px 'Jua', 'Malgun Gothic', sans-serif;
}
.mb-mini:hover {
    background: rgba(34,211,238,0.15);
    color: #fff;
}
:root[data-lab-theme="light"] .mb-mini:hover {
    background: rgba(14,138,138,0.12);
    color: var(--c-text-body);
}

/* Active theme indicator dot */
.mb-item[data-theme-active="true"] .mb-ico {
    color: var(--c-primary-soft);
    text-shadow: 0 0 8px var(--c-primary-soft);
}
.mb-item[data-theme-active="true"]::before {
    content: '✓';
    position: absolute;
    left: 2px;
    color: var(--c-primary-soft);
    font-size: 10px;
}
.mb-item { position: relative; }

/* Body padding when menubar is present */
body.has-top-menubar { padding-top: var(--mb-bar-h); }

/* ────────────── Light theme panel adjustments ────────────── */
:root[data-lab-theme="light"] .side-panel {
    background: var(--c-surface) !important;
    color: var(--c-text-body) !important;
    border: 1px solid var(--c-border-subtle) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
}
:root[data-lab-theme="light"] .panel-title { color: var(--c-primary-soft) !important; }
:root[data-lab-theme="light"] .panel-group { color: var(--c-text-soft) !important; }
:root[data-lab-theme="light"] .equip-btn,
:root[data-lab-theme="light"] .chem-btn,
:root[data-lab-theme="light"] .tb-btn {
    background: var(--c-surface-elevated) !important;
    color: var(--c-text-body) !important;
    border: 1px solid var(--c-border-subtle) !important;
}
:root[data-lab-theme="light"] .equip-btn:hover,
:root[data-lab-theme="light"] .chem-btn:hover {
    background: rgba(14,138,138,0.08) !important;
    border-color: var(--c-primary-soft) !important;
}
:root[data-lab-theme="light"] .cyber-bg,
:root[data-lab-theme="light"] .scanlines { display: none !important; }
:root[data-lab-theme="light"] body { background: var(--c-bg-page) !important; }

/* ────────────── Liquid Glass panel adjustments ────────────── */
:root[data-lab-theme="glass"] .side-panel {
    background: var(--c-surface) !important;
    color: var(--c-text-body) !important;
    border: 1px solid var(--c-border-subtle) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    box-shadow:
        0 8px 32px rgba(0,0,0,0.12),
        inset 0 1px 1px rgba(255,255,255,0.6),
        inset 0 -1px 1px rgba(0,0,0,0.06) !important;
    border-radius: 18px !important;
}
:root[data-lab-theme="glass"] .panel-title,
:root[data-lab-theme="glass"] .panel-group { color: var(--c-text-body) !important; }
:root[data-lab-theme="glass"] .equip-btn,
:root[data-lab-theme="glass"] .chem-btn,
:root[data-lab-theme="glass"] .tb-btn {
    background: rgba(255,255,255,0.4) !important;
    color: var(--c-text-body) !important;
    border: 1px solid rgba(255,255,255,0.35) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: 12px !important;
}
:root[data-lab-theme="glass"] .cyber-bg,
:root[data-lab-theme="glass"] .scanlines { display: none !important; }

/* Accessibility — honor reduced transparency */
@media (prefers-reduced-transparency: reduce) {
    :root[data-lab-theme="glass"] .side-panel {
        background: rgba(255,255,255,0.92) !important;
        backdrop-filter: none !important;
    }
    :root[data-lab-theme="glass"] .mb-dropdown {
        background: rgba(255,255,255,0.96) !important;
        backdrop-filter: none !important;
    }
}

/* ────────────── Deep Lab (improved dark) — brighter panels ────────────── */
:root:not([data-lab-theme]) .side-panel,
:root[data-lab-theme=""] .side-panel {
    /* Soften panel bg from near-black to deep indigo */
    background: #1E2240 !important;
    border-color: rgba(79,227,208,0.22) !important;
}

/* Canvas wrap gradient tint (applies to all themes via var) */
.canvas-wrap {
    background: linear-gradient(180deg, var(--canvas-grad-top) 0%, var(--canvas-grad-bot) 100%) !important;
}

/* Hide redundant buttons that moved into menubar */
body.has-top-menubar .lang-toggle,
body.has-top-menubar .theme-toggle,
body.has-top-menubar #cinemaBtn,
body.has-top-menubar #replayBtn,
body.has-top-menubar #muteBtn,
body.has-top-menubar .audio-ctrl,
body.has-top-menubar .back-btn,
body.has-top-menubar .page-title { display: none !important; }

/* Shrink top bar to just slim mission/score strip, since menubar owns most */
body.has-top-menubar .top-bar {
    display: none !important;
}

/* ============================================================
   DOCK SYSTEM v1 — Photoshop/Premiere-style drag snap
   ============================================================ */

/* Drag handle — common style (overrides legacy .panel-drag-handle) */
.dock-panel .panel-drag-handle {
    display: flex !important;
    align-items: center;
    gap: 6px;
    height: 28px !important;
    padding: 0 8px !important;
    background: linear-gradient(90deg, rgba(34,211,238,0.25), rgba(34,211,238,0.08)) !important;
    border-bottom: 1px solid var(--c-border-strong) !important;
    cursor: grab !important;
    font-family: 'Jua', 'Malgun Gothic', sans-serif !important;
    font-size: 11px !important;
    color: var(--c-text-body) !important;
    letter-spacing: 0.3px;
    user-select: none;
    position: relative;
    z-index: 5;
}
.dock-panel .panel-drag-handle:active { cursor: grabbing !important; }
.dock-panel .panel-drag-handle .pdh-grip {
    font-size: 12px;
    color: var(--c-primary-soft);
    opacity: 0.7;
    margin-right: 2px;
}
.dock-panel .panel-drag-handle .pdh-title {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dock-panel .panel-drag-handle .pdh-actions {
    display: flex;
    gap: 4px;
}
.dock-panel .panel-drag-handle .pdh-btn {
    width: 22px; height: 20px;
    background: rgba(0,0,0,0.25);
    border: 1px solid var(--c-border-subtle);
    border-radius: 4px;
    color: var(--c-text-soft);
    cursor: pointer;
    font-size: 10px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s ease, color 0.12s ease;
}
.dock-panel .panel-drag-handle .pdh-btn:hover {
    background: rgba(34,211,238,0.22);
    color: #fff;
}

/* Dragging states */
.dock-panel.is-dragging { cursor: grabbing !important; }
.dock-panel.is-floating-ghost {
    box-shadow: 0 24px 64px rgba(0,0,0,0.6), 0 0 0 1px var(--c-primary-soft);
    filter: saturate(1.15);
    transition: none !important;
}

/* Docked zones — panels snap-fit when .dock-in-* is applied */
.dock-panel.dock-in-left,
.dock-panel.dock-in-right,
.dock-panel.dock-in-bottom {
    overflow: auto;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.dock-panel.dock-in-left   { border-right: 1px solid var(--c-border-strong) !important; }
.dock-panel.dock-in-right  { border-left:  1px solid var(--c-border-strong) !important; }
.dock-panel.dock-in-bottom { border-top:   1px solid var(--c-border-strong) !important; padding-top: 0 !important; }

/* Floating panels — stand out with shadow + rounded */
.dock-panel.dock-in-floating {
    border-radius: 10px !important;
    border: 1px solid var(--c-border-strong) !important;
    box-shadow: 0 18px 48px rgba(0,0,0,0.45), 0 0 0 1px rgba(0,0,0,0.2) !important;
    resize: both;
    overflow: auto;
    min-width: 220px;
    min-height: 180px;
    max-width: 80vw;
    max-height: 85vh;
}

/* Drop preview overlay — the blue rectangle that shows where the panel will land */
.dock-drop-preview {
    position: fixed;
    background: rgba(34,211,238,0.22);
    border: 2px solid var(--c-primary-soft);
    box-shadow: 0 0 24px rgba(34,211,238,0.5), inset 0 0 24px rgba(34,211,238,0.2);
    pointer-events: none;
    z-index: 9998;
    transition: left 120ms var(--ease-out-quart, ease-out),
                top  120ms var(--ease-out-quart, ease-out),
                width 120ms var(--ease-out-quart, ease-out),
                height 120ms var(--ease-out-quart, ease-out);
    border-radius: 6px;
}
:root[data-lab-theme="light"] .dock-drop-preview {
    background: rgba(14,138,138,0.15);
    border-color: #0E8A8A;
    box-shadow: 0 0 24px rgba(14,138,138,0.4);
}
:root[data-lab-theme="glass"] .dock-drop-preview {
    background: rgba(108,92,231,0.18);
    border-color: #6C5CE7;
    box-shadow: 0 0 24px rgba(108,92,231,0.45);
}

/* Game layout adjustments — since panels are now fixed-positioned via DockManager,
   push the canvas area to respect dock sizes */
:root { --dock-left-w: 0px; --dock-right-w: 0px; --dock-bottom-h: 0px; }
body.has-top-menubar .game-layout {
    padding-left: var(--dock-left-w);
    padding-right: var(--dock-right-w);
    padding-bottom: var(--dock-bottom-h);
    transition: padding 200ms ease;
}
body.has-top-menubar .game-layout > .side-panel {
    /* Panels are now positioned by DockManager — hide their natural flow placement */
    flex: 0 !important;
}

/* Keep the canvas centered and sized based on available area */
body.has-top-menubar .canvas-area {
    flex: 1 !important;
    max-width: 100%;
}

/* Liquid Glass theme — floating panels look like iOS 26 bubbles */
:root[data-lab-theme="glass"] .dock-panel.dock-in-floating {
    background: rgba(255,255,255,0.55) !important;
    backdrop-filter: blur(28px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
    border-radius: 22px !important;
    border: 1px solid rgba(255,255,255,0.55) !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.14),
                inset 0 1px 1px rgba(255,255,255,0.7),
                inset 0 -1px 1px rgba(0,0,0,0.06) !important;
}

/* Hide legacy float controls that DockManager replaces */
.dock-panel .panel-float-toggle,
.dock-panel .panel-reset-btn,
.dock-panel .panel-dock-btn:not(.pdh-btn) { display: none !important; }
/* Hide any legacy .panel-drag-handle that doesn't have the .dock-managed marker */
.dock-panel > .panel-drag-handle:not(.dock-managed) { display: none !important; }

/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce) {
    .dock-drop-preview { transition: none; }
    body.has-top-menubar .game-layout { transition: none; }
}

/* ============================================================
   DOCK SYSTEM v2 — Tab stacking
   ============================================================ */

/* Tab bar container — sits at top of each dock zone */
.dock-tab-bar {
    display: flex;
    align-items: stretch;
    gap: 2px;
    padding: 4px 4px 0 4px;
    background: linear-gradient(180deg,
        var(--c-surface) 0%,
        var(--c-surface-elevated) 100%);
    border-bottom: 1px solid var(--c-border-strong);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    user-select: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.dock-tab-bar::-webkit-scrollbar { height: 4px; }
.dock-tab-bar::-webkit-scrollbar-thumb { background: var(--c-border-strong); border-radius: 2px; }

/* Individual tab button */
.dock-tab {
    height: 100%;
    padding: 0 10px;
    background: rgba(0,0,0,0.25);
    border: 1px solid var(--c-border-subtle);
    border-bottom: 0;
    border-radius: 6px 6px 0 0;
    color: var(--c-text-soft);
    font-family: 'Jua', 'Malgun Gothic', sans-serif;
    font-size: 11px;
    letter-spacing: 0.3px;
    cursor: pointer;
    white-space: nowrap;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    position: relative;
    transition: background 0.12s ease, color 0.12s ease, transform 0.12s ease;
    margin-bottom: -1px; /* Overlap with border-bottom of bar for continuity */
}
.dock-tab:hover {
    background: rgba(34,211,238,0.15);
    color: var(--c-text-body);
}
.dock-tab.active {
    background: var(--c-surface);
    border-color: var(--c-border-strong);
    color: var(--c-primary-soft);
    box-shadow: inset 0 2px 0 var(--c-primary-soft);
    font-weight: 700;
}
.dock-tab.active::after {
    /* Hide bottom border illusion — gives "tab fused into panel" feel */
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    background: var(--c-surface);
}
.dock-tab:active {
    transform: translateY(1px);
}

/* Light theme override */
:root[data-lab-theme="light"] .dock-tab {
    background: rgba(14,138,138,0.06);
    color: var(--c-text-soft);
    border-color: var(--c-border-subtle);
}
:root[data-lab-theme="light"] .dock-tab:hover {
    background: rgba(14,138,138,0.12);
    color: var(--c-text-body);
}
:root[data-lab-theme="light"] .dock-tab.active {
    background: var(--c-surface);
    color: var(--c-primary-soft);
    box-shadow: inset 0 2px 0 var(--c-primary-soft);
}

/* Glass theme override */
:root[data-lab-theme="glass"] .dock-tab-bar {
    background: rgba(255,255,255,0.35);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
}
:root[data-lab-theme="glass"] .dock-tab {
    background: rgba(255,255,255,0.28);
    border-color: rgba(255,255,255,0.35);
    color: var(--c-text-body);
}
:root[data-lab-theme="glass"] .dock-tab.active {
    background: rgba(255,255,255,0.72);
    color: var(--c-primary-soft);
}

/* When a panel is in a tabbed zone, its internal drag handle is redundant — dim it */
.dock-panel.dock-in-left .panel-drag-handle.dock-managed,
.dock-panel.dock-in-right .panel-drag-handle.dock-managed,
.dock-panel.dock-in-bottom .panel-drag-handle.dock-managed {
    background: rgba(0,0,0,0.15) !important;
    height: 18px !important;
    padding: 0 8px !important;
    font-size: 9px !important;
    opacity: 0.55;
    transition: opacity 0.15s ease;
}
.dock-panel.dock-in-left:hover .panel-drag-handle.dock-managed,
.dock-panel.dock-in-right:hover .panel-drag-handle.dock-managed,
.dock-panel.dock-in-bottom:hover .panel-drag-handle.dock-managed {
    opacity: 1;
}
/* Floating panels keep full handle */
.dock-panel.dock-in-floating .panel-drag-handle.dock-managed {
    background: linear-gradient(90deg, rgba(34,211,238,0.3), rgba(34,211,238,0.1)) !important;
    opacity: 1 !important;
    height: 28px !important;
}