/* ============================================================
   Galaxy Dock — "בועות" UI layer for the galaxy view (index.html)
   ------------------------------------------------------------
   Everything here is scoped under html.dock-ui so the whole layer
   is reversible: remove the class (?classicui=1 or
   localStorage['imagine.dockUI']='off') and the classic UI returns.

   Pieces:
   - Bottom-center draggable dock of liquid-glass bubbles
   - The smiling galaxy chat orb (copied 1:1 from css/chat-orb.css,
     re-scoped to #galaxy-orb, with a rainbow/translucent skin)
   - Galaxy chat panel with iMessage-style bubbles + smart chips
   - Tray (…) panel, My Stars panel, points mini panel
   - Buy-world popup ("אין עולם פנוי")
   - Big top-center galaxy title, edge nav arrows,
     VR button bottom-left, minimap top-right
   - #gd-corner: fixed top-left avatar (adopted #user-button) +
     pin slots for bubbles (section 25)
   ============================================================ */

/* ---------- tokens ---------- */
html.dock-ui {
    --gd-size: 76px;             /* bubble base (desktop) — hover grows gently */
    --gd-orb: 113px;             /* orb base */
    --gd-gap: 10px;
    --gd-radius: 999px;
    --gd-z: 10013;               /* above home-feed sheet peek (10012) */

    /* "בועות": white fill + soft glow (dark mode values) */
    --gd-bubble-bg: rgba(255, 255, 255, 0.16);
    --gd-bubble-bg-hover: rgba(255, 255, 255, 0.26);
    --gd-bubble-border: rgba(255, 255, 255, 0.28);
    --gd-bubble-ink: #ffffff;
    --gd-bubble-glow: 0 0 16px rgba(255, 255, 255, 0.22), 0 4px 18px rgba(0, 0, 0, 0.35);
    --gd-panel-bg: rgba(10, 13, 24, 0.66);
    --gd-panel-border: rgba(255, 255, 255, 0.14);
    --gd-panel-ink: rgba(255, 255, 255, 0.94);
    --gd-panel-muted: rgba(255, 255, 255, 0.6);
}

html.dock-ui[data-theme="light"] {
    --gd-bubble-bg: rgba(255, 255, 255, 0.72);
    --gd-bubble-bg-hover: rgba(255, 255, 255, 0.92);
    --gd-bubble-border: rgba(10, 14, 22, 0.1);
    --gd-bubble-ink: rgba(10, 14, 22, 0.88);
    --gd-bubble-glow: 0 0 14px rgba(255, 255, 255, 0.65), 0 6px 18px rgba(20, 30, 60, 0.16);
    --gd-panel-bg: rgba(250, 251, 255, 0.82);
    --gd-panel-border: rgba(10, 14, 22, 0.1);
    --gd-panel-ink: rgba(12, 16, 24, 0.92);
    --gd-panel-muted: rgba(12, 16, 24, 0.55);
}

/* ============================================================
   1. Hide the classic chrome this layer replaces
   ============================================================ */
html.dock-ui #solar-system-nav,
html.dock-ui #nav-hover-tooltip,
html.dock-ui #mobile-top-actions-toggle,
html.dock-ui .social-capture-btn.social-feed-floating-capture {
    display: none !important;
}

/* ============================================================
   2. Relocated stock chrome: VR bottom-left, minimap top-right
   (top-left belongs to the #gd-corner avatar row — section 21)
   ============================================================ */
html.dock-ui #VRButton {
    top: auto !important;
    bottom: max(18px, calc(env(safe-area-inset-bottom) + 12px)) !important;
    left: 20px !important;
    right: auto !important;
    transform: none !important;
    border-radius: 12px !important;
    z-index: 10005 !important;
}

/* the home-feed peek sheet pushes the VR button up with the dock */
html.dock-ui body.home-feed-peek #VRButton {
    bottom: calc(var(--hf-peek-height, 118px) + 16px) !important;
}

/* the social drawer translates the legacy online-counter pill; once the pill
   is adopted into the dock that translate tears it out of the hive — pin it */
html.dock-ui body.social-feed-open #galaxy-dock .online-counter-pill:not(.embedded) {
    translate: 0 0 !important;
}

/* the dock rises above everything only while one of its menus is open */
html.dock-ui #galaxy-dock:has(#user-menu:not(.hidden)),
html.dock-ui #galaxy-dock:has(#creation-dropdown.visible),
html.dock-ui #galaxy-dock:has(.main-help-dropdown.show),
html.dock-ui #galaxy-dock:has(#points-wallet-popover.open) {
    z-index: 100100 !important;
}
html.dock-ui .gd-item:has(#user-menu:not(.hidden)),
html.dock-ui .gd-item:has(#creation-dropdown.visible),
html.dock-ui .gd-item:has(.main-help-dropdown.show) {
    z-index: 300;
}
html.dock-ui .gd-panel,
html.dock-ui #gd-context-menu {
    z-index: 100100 !important;
}
/* above even a menu-raised dock (100100) — they tie otherwise and the dock,
   being later in the DOM, paints on top of the volume slider */
html.dock-ui #music-volume-popup.open {
    z-index: 100120 !important;
}

/* ghost bubble while dragging a button out of the tray */
html.dock-ui .gd-drag-ghost {
    position: fixed;
    z-index: 100200;
    width: var(--gd-size);
    height: var(--gd-size);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--gd-bubble-bg);
    border: 1px solid var(--gd-bubble-border);
    box-shadow: var(--gd-bubble-glow);
    color: var(--gd-bubble-ink);
    pointer-events: none;
    opacity: 0.9;
}
html.dock-ui .gd-drag-ghost svg { width: 52%; height: 52%; }
html.dock-ui .gd-drag-ghost.gd-ghost-ok {
    transform: translate(-50%, -50%) scale(1.15);
    box-shadow: var(--gd-bubble-glow), 0 0 22px rgba(120, 220, 160, 0.65);
}
html.dock-ui .gd-tray-cell.gd-tray-armed { animation: gdJiggle 0.28s ease-in-out infinite alternate; }

/* collapsed minimap: smaller, pinned top-right (expanded state untouched) */
html.dock-ui #galaxy-minimap:not(.expanded) {
    top: 20px !important;
    right: 20px !important;
    bottom: auto !important;
    width: 88px !important;
    height: 88px !important;
    border-radius: 16px !important;
}

/* expanded map stays anchored to the TOP-right, growing downward */
html.dock-ui #galaxy-minimap.expanded {
    top: 20px !important;
    bottom: auto !important;
    right: 20px !important;
}

@media (max-width: 768px) {
    html.dock-ui #galaxy-minimap:not(.expanded) {
        top: max(14px, env(safe-area-inset-top)) !important;
        right: 10px !important;
        bottom: auto !important;
        width: 68px !important;
        height: 68px !important;
    }
}

/* no WebXR support → no VR chrome at all (data-attribute set by JS) */
html.dock-ui[data-gd-no-vr] #VRButton { display: none !important; }
html.dock-ui[data-gd-no-vr] .gd-item[data-key="vr"],
html.dock-ui[data-gd-no-vr] .gd-tray-cell[data-key="vr"] { display: none !important; }

/* loading screen: the whole dock layer stays hidden until the app is ready */
html.dock-ui:not([data-gd-ready]) #galaxy-dock,
html.dock-ui:not([data-gd-ready]) #gd-corner,
html.dock-ui:not([data-gd-ready]) #galaxy-main-title,
html.dock-ui:not([data-gd-ready]) .gd-edge-nav,
html.dock-ui:not([data-gd-ready]) #galaxy-chat-panel,
html.dock-ui:not([data-gd-ready]) #galaxy-minimap,
html.dock-ui:not([data-gd-ready]) #VRButton {
    opacity: 0 !important;
    pointer-events: none !important;
}
html.dock-ui #galaxy-main-title { transition: opacity 0.5s ease; }

/* ============================================================
   3. Big galaxy title, top-center
   ============================================================ */
html.dock-ui #galaxy-main-title {
    position: fixed;
    top: max(38px, calc(env(safe-area-inset-top) + 22px));
    left: 50%;
    transform: translateX(-50%);
    /* below #ui-overlay (z 10) so the minimap, which lives inside that
       stacking context, covers the title when expanded */
    z-index: 5;
    max-width: min(60vw, 640px);
    text-align: center;
    font-family: 'Open Sans', 'Inter', 'Segoe UI', sans-serif;
    font-size: clamp(20px, 3.4vw, 38px);
    font-weight: 800;
    letter-spacing: 0.5px;
    color: #fff;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.55),
        0 4px 22px rgba(0, 0, 0, 0.45),
        0 0 30px rgba(140, 160, 255, 0.25);
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    direction: ltr;
    unicode-bidi: plaintext;
}

html.dock-ui[data-theme="light"] #galaxy-main-title {
    color: rgba(12, 16, 24, 0.92);
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7), 0 4px 20px rgba(255, 255, 255, 0.6);
}

/* ============================================================
   4. Edge navigation arrows (back / forward between galaxies)
   ============================================================ */
html.dock-ui .gd-edge-nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 54px;
    height: 84px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--gd-bubble-border);
    border-radius: 18px;
    background: var(--gd-bubble-bg);
    color: var(--gd-bubble-ink);
    backdrop-filter: blur(10px) saturate(150%);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    box-shadow: var(--gd-bubble-glow);
    cursor: pointer;
    z-index: 10004;
    transition: transform 0.2s ease, background 0.2s ease, opacity 0.5s ease;
    -webkit-tap-highlight-color: transparent;
}

html.dock-ui .gd-edge-nav:hover {
    background: var(--gd-bubble-bg-hover);
    transform: translateY(-50%) scale(1.07);
}

html.dock-ui .gd-edge-nav:active { transform: translateY(-50%) scale(0.94); }
/* pulled inward so they clear the social-feed handle on the left edge */
html.dock-ui #gd-nav-prev { left: 56px; }
html.dock-ui #gd-nav-next { right: 56px; }
html.dock-ui .gd-edge-nav svg { width: 26px; height: 26px; }

@media (max-width: 768px) {
    html.dock-ui .gd-edge-nav { width: 40px; height: 64px; border-radius: 14px; }
    html.dock-ui #gd-nav-prev { left: 30px; }
    html.dock-ui #gd-nav-next { right: 30px; }
}

/* ============================================================
   5. The dock container
   ============================================================ */
html.dock-ui #galaxy-dock {
    position: fixed;
    left: 50%;
    bottom: max(18px, env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: var(--gd-z);
    pointer-events: none;              /* children opt back in */
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    transition: bottom 300ms cubic-bezier(0.22, 0.9, 0.26, 1),
                opacity 240ms ease;
}

html.dock-ui #galaxy-dock.gd-repositioning { transition: none; }

/* the cluster — a honeycomb (כוורת) laid out in JS around the orb */
html.dock-ui #gd-cluster {
    position: relative;
    pointer-events: auto;
    border-radius: 32px;
}

/* side-edge docking */
html.dock-ui #galaxy-dock[data-edge="left"],
html.dock-ui #galaxy-dock[data-edge="right"] {
    left: auto;
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
}
html.dock-ui #galaxy-dock[data-edge="left"]  { left: 10px; }
html.dock-ui #galaxy-dock[data-edge="right"] { right: 10px; }

/* corner docking: top-left, nudged in so no bubble clips the page edges
   (starts below the fixed #gd-corner avatar row) */
html.dock-ui #galaxy-dock[data-edge="topleft"] {
    left: 24px;
    right: auto;
    top: 100px;
    bottom: auto;
    transform: none;
}

/* whole-dock drag feedback + rejected-drop bounce */
html.dock-ui #galaxy-dock.gd-moving #gd-cluster { cursor: grabbing; }
html.dock-ui #galaxy-dock.gd-bounce-home {
    animation: gdBounceHome 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes gdBounceHome {
    0%   { transform: translateX(-50%) translateY(-26px); }
    60%  { transform: translateX(-50%) translateY(6px); }
    100% { transform: translateX(-50%) translateY(0); }
}

/* ============================================================
   6. Bubbles (items)
   ============================================================ */
html.dock-ui .gd-item {
    position: absolute;                     /* honeycomb slots, positioned by JS */
    transform: translate(-50%, -50%);
    width: calc(var(--gd-size) * var(--gd-scale, 1));
    height: calc(var(--gd-size) * var(--gd-scale, 1));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: width 0.16s cubic-bezier(0.2, 0.8, 0.3, 1.05),
                height 0.16s cubic-bezier(0.2, 0.8, 0.3, 1.05),
                left 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.08),
                top 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.08),
                opacity 0.25s ease,
                transform 0.25s ease;
    pointer-events: auto;
}

html.dock-ui .gd-item.gd-dragging {
    transition: none;
    z-index: 40;
    opacity: 0.92;
}

/* the bubble surface — "בועה": white-filled liquid glass with soft glow */
html.dock-ui .gd-bubble,
html.dock-ui :is(#galaxy-dock, #gd-corner) .gd-adopted {
    position: relative;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    inset: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    color: var(--gd-bubble-ink) !important;
    cursor: pointer;
    isolation: isolate;
    overflow: visible;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* neutralize the fixed top-bar positioning of adopted stock buttons */
html.dock-ui :is(#galaxy-dock, #gd-corner) .gd-adopted {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    z-index: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
}

html.dock-ui .gd-bubble::before,
html.dock-ui :is(#galaxy-dock, #gd-corner) .gd-adopted::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--gd-bubble-bg) !important;
    border: 1px solid var(--gd-bubble-border) !important;
    backdrop-filter: blur(10px) saturate(160%);
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.12),
        inset 1.8px 3px 0 -2px rgba(255, 255, 255, 0.9),
        inset -2px -2px 0 -2px rgba(255, 255, 255, 0.6),
        inset 0 3px 4px -2px rgba(0, 0, 0, 0.18),
        var(--gd-bubble-glow) !important;
    pointer-events: none;
    z-index: -1;
    transition: background 0.2s ease, box-shadow 0.25s ease;
}

html.dock-ui .gd-bubble:hover::before,
html.dock-ui :is(#galaxy-dock, #gd-corner) .gd-adopted:hover::before {
    background: var(--gd-bubble-bg-hover) !important;
}

/* white svg icons, scaled with the bubble */
html.dock-ui .gd-bubble svg,
html.dock-ui :is(#galaxy-dock, #gd-corner) .gd-adopted > svg,
html.dock-ui :is(#galaxy-dock, #gd-corner) .gd-adopted .mic-icon,
html.dock-ui :is(#galaxy-dock, #gd-corner) .gd-adopted .music-icon {
    width: 52%;
    height: 52%;
    position: relative;
    z-index: 1;
    color: var(--gd-bubble-ink);
    fill: currentColor;
    pointer-events: none;
}
html.dock-ui .gd-bubble svg[fill="none"] { fill: none; }

/* per-bubble hover label (tooltip) */
html.dock-ui .gd-item::after {
    content: attr(data-label);
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--gd-panel-bg);
    border: 1px solid var(--gd-panel-border);
    color: var(--gd-panel-ink);
    font: 600 11px/1.4 'Inter', 'Segoe UI', sans-serif;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 60;
}
html.dock-ui .gd-item:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
html.dock-ui #galaxy-dock.gd-edit .gd-item::after,
html.dock-ui .gd-item.gd-dragging::after,
html.dock-ui .gd-item[data-label=""]::after { opacity: 0 !important; }

/* --- mic bubble: explicit red (muted) / green (live) fill --- */
html.dock-ui :is(#galaxy-dock, #gd-corner) #mic-toggle-button::before {
    background: linear-gradient(160deg, rgba(255, 82, 82, 0.85), rgba(196, 32, 46, 0.82)) !important;
    border-color: rgba(255, 140, 140, 0.55) !important;
}
html.dock-ui :is(#galaxy-dock, #gd-corner) #mic-toggle-button.active::before {
    background: linear-gradient(160deg, rgba(64, 220, 120, 0.9), rgba(24, 160, 78, 0.85)) !important;
    border-color: rgba(150, 255, 190, 0.55) !important;
}
html.dock-ui :is(#galaxy-dock, #gd-corner) #mic-toggle-button .mic-icon { color: #fff; }

/* --- online counter adopted as the "connected now" bubble --- */
html.dock-ui :is(#galaxy-dock, #gd-corner) .online-counter-pill:not(.embedded) {
    font: 800 15px/1 'Inter', 'Segoe UI', sans-serif !important;
    gap: 0 !important;
    flex-direction: column !important;
}
html.dock-ui :is(#galaxy-dock, #gd-corner) .online-counter-pill .online-counter-icon { display: none !important; }
html.dock-ui :is(#galaxy-dock, #gd-corner) .online-counter-pill .online-counter-text {
    position: relative;
    z-index: 1;
    color: var(--gd-bubble-ink) !important;
    font-size: 15px !important;
    font-weight: 800 !important;
}
html.dock-ui :is(#galaxy-dock, #gd-corner) .online-counter-pill .online-counter-dot {
    position: absolute;
    top: 6px;
    right: 7px;
    z-index: 1;
}

/* --- profile bubble: round avatar fills the bubble --- */
html.dock-ui :is(#galaxy-dock, #gd-corner) #user-button #user-avatar {
    width: 84%;
    height: 84%;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    pointer-events: none;
}
/* the logged-in avatar thumbnail fills the whole profile bubble */
html.dock-ui :is(#galaxy-dock, #gd-corner) #user-button #user-avatar {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50%;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
html.dock-ui :is(#galaxy-dock, #gd-corner) #user-button #user-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    border-radius: 50%;
}

/* --- plus bubble container (adopted #add-creation-container wraps the button) --- */
html.dock-ui :is(#galaxy-dock, #gd-corner) #add-creation-container {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
}
html.dock-ui :is(#galaxy-dock, #gd-corner) #add-star-button {
    /* the legacy top-bar rules force min-width:60px → renders as a pill;
       zero the minimums so the + is a perfect circle like every bubble */
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    border-radius: 50% !important;
}

/* ============================================================
   7. Tray bubble (…) — the only stroke-only bubble
   ============================================================ */
html.dock-ui .gd-item[data-key="tray"] .gd-bubble::before {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1.6px solid var(--gd-bubble-border) !important;
    box-shadow:
        inset 1.8px 3px 0 -2px rgba(255, 255, 255, 0.75),
        inset -2px -2px 0 -2px rgba(255, 255, 255, 0.4),
        0 2px 12px rgba(0, 0, 0, 0.25) !important;
}
html.dock-ui .gd-item[data-key="tray"].gd-drop-target .gd-bubble::before {
    background: rgba(255, 255, 255, 0.22) !important;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.25), 0 0 22px rgba(255, 255, 255, 0.45) !important;
}

/* ============================================================
   8. Edit mode — gentle jiggle + free-seat ghosts
   ============================================================ */
/* dashed ghost circles marking the FREE hive seats — very faint,
   visible only in edit mode (positions kept fresh by layoutHive) */
html.dock-ui .gd-seat-ghost {
    position: absolute;
    transform: translate(-50%, -50%);
    width: calc(var(--gd-size) * 0.92);
    height: calc(var(--gd-size) * 0.92);
    border-radius: 50%;
    border: 1.6px dashed var(--gd-bubble-border);
    background: rgba(255, 255, 255, 0.03);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
}
html.dock-ui #galaxy-dock.gd-edit .gd-seat-ghost.gd-free { opacity: 0.3; }
html.dock-ui #galaxy-dock.gd-chat-open .gd-seat-ghost { opacity: 0 !important; }

html.dock-ui #galaxy-dock.gd-edit .gd-item:not(.gd-orb-item):not([data-key="tray"]) {
    animation: gdJiggle 0.32s ease-in-out infinite alternate;
}
html.dock-ui #galaxy-dock.gd-edit .gd-item:nth-child(2n) { animation-delay: 0.08s; }
html.dock-ui #galaxy-dock.gd-edit .gd-item:nth-child(3n) { animation-delay: 0.16s; }
@keyframes gdJiggle {
    from { rotate: -2.2deg; }
    to   { rotate: 2.2deg; }
}

/* context menu (long press / right click) */
html.dock-ui #gd-context-menu {
    position: fixed;
    z-index: 10060;
    display: none;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    border-radius: 18px;
    background: var(--gd-panel-bg);
    border: 1px solid var(--gd-panel-border);
    backdrop-filter: blur(24px) saturate(150%);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}
html.dock-ui #gd-context-menu.visible { display: flex; }
html.dock-ui #gd-context-menu button {
    min-width: 130px;
    padding: 9px 14px;
    border: 1px solid var(--gd-panel-border);
    border-radius: 999px;
    background: var(--gd-bubble-bg);
    color: var(--gd-panel-ink);
    font: 600 13px/1.3 'Inter', 'Segoe UI', sans-serif;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
html.dock-ui #gd-context-menu button:hover { background: var(--gd-bubble-bg-hover); }

/* ============================================================
   9. Panels (tray grid / my stars / points) — floating menus
   ============================================================ */
html.dock-ui .gd-panel {
    position: fixed;
    z-index: 10055;
    display: none;
    flex-direction: column;
    gap: 10px;
    width: min(340px, calc(100vw - 28px));
    max-height: min(58vh, 460px);
    padding: 14px;
    border-radius: 26px;
    background: var(--gd-panel-bg);
    border: 1px solid var(--gd-panel-border);
    color: var(--gd-panel-ink);
    backdrop-filter: blur(24px) saturate(155%);
    -webkit-backdrop-filter: blur(24px) saturate(155%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.07),
        inset 2px 3px 0 -2px rgba(255, 255, 255, 0.55),
        0 22px 64px rgba(0, 0, 0, 0.45);
    overflow: hidden;
}
html.dock-ui .gd-panel.visible {
    display: flex;
    animation: gdPanelIn 0.24s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}
@keyframes gdPanelIn {
    from { opacity: 0; transform: translateY(12px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
html.dock-ui .gd-panel-title {
    font: 800 14px/1.3 'Inter', 'Segoe UI', sans-serif;
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
html.dock-ui .gd-panel-title .gd-panel-close {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid var(--gd-panel-border);
    background: var(--gd-bubble-bg);
    color: var(--gd-panel-ink);
    font-size: 13px;
    cursor: pointer;
    line-height: 1;
}
html.dock-ui .gd-panel-scroll {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
    padding: 2px;
}

/* tray grid of circles */
html.dock-ui #gd-tray-panel .gd-tray-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
html.dock-ui .gd-tray-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    position: relative;
}
html.dock-ui .gd-tray-cell > button.gd-tray-bubble {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1px solid var(--gd-bubble-border);
    background: var(--gd-bubble-bg);
    color: var(--gd-bubble-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(8px) saturate(150%);
    -webkit-backdrop-filter: blur(8px) saturate(150%);
    box-shadow: var(--gd-bubble-glow);
    transition: transform 0.15s ease;
}
html.dock-ui .gd-tray-cell > button.gd-tray-bubble:hover { transform: scale(1.1); }
html.dock-ui .gd-tray-cell > button.gd-tray-bubble svg { width: 24px; height: 24px; }
html.dock-ui .gd-tray-cell .gd-tray-label {
    font: 600 10.5px/1.2 'Inter', 'Segoe UI', sans-serif;
    color: var(--gd-panel-muted);
    text-align: center;
    max-width: 68px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
html.dock-ui .gd-tray-cell .gd-pin-btn {
    position: absolute;
    top: -4px;
    right: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid var(--gd-panel-border);
    background: var(--gd-panel-bg);
    color: var(--gd-panel-ink);
    font-size: 10px;
    line-height: 1;
    cursor: pointer;
    display: none;
}
html.dock-ui .gd-tray-cell:hover .gd-pin-btn { display: block; }

/* my stars rows */
html.dock-ui #gd-mystars-panel .gd-star-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px;
    border-radius: 16px;
    cursor: pointer;
    transition: background 0.15s ease;
}
html.dock-ui #gd-mystars-panel .gd-star-row:hover { background: rgba(255, 255, 255, 0.08); }
html.dock-ui .gd-star-thumb {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1.5px solid var(--gd-bubble-border);
    background-size: cover;
    background-position: center;
    background-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 14px rgba(255, 255, 255, 0.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}
html.dock-ui .gd-star-name {
    flex: 1 1 auto;
    min-width: 0;
    font: 650 13px/1.3 'Inter', 'Segoe UI', sans-serif;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    unicode-bidi: plaintext;
    text-align: start;
}
html.dock-ui .gd-star-sub {
    font: 500 10.5px/1.3 'Inter', 'Segoe UI', sans-serif;
    color: var(--gd-panel-muted);
}
html.dock-ui .gd-star-pin {
    flex: 0 0 auto;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid var(--gd-panel-border);
    background: var(--gd-bubble-bg);
    color: var(--gd-panel-ink);
    font: 600 10.5px/1 'Inter', 'Segoe UI', sans-serif;
    cursor: pointer;
}
html.dock-ui .gd-star-pin:hover { background: var(--gd-bubble-bg-hover); }
html.dock-ui .gd-panel-empty {
    padding: 18px 8px;
    text-align: center;
    color: var(--gd-panel-muted);
    font: 500 13px/1.5 'Inter', 'Segoe UI', sans-serif;
}

/* star bubble pinned on the dock (screenshot inside) */
html.dock-ui .gd-item.gd-star-item .gd-bubble {
    overflow: hidden !important;
    border-radius: 50% !important;
}
html.dock-ui .gd-item.gd-star-item .gd-bubble .gd-star-face {
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    z-index: 1;
}

/* points mini panel rows */
html.dock-ui #gd-points-panel .gd-points-balance {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font: 800 26px/1.1 'Inter', 'Segoe UI', sans-serif;
}
html.dock-ui #gd-points-panel .gd-points-balance span { font-size: 13px; color: var(--gd-panel-muted); }
html.dock-ui #gd-points-panel .gd-panel-actions { display: flex; gap: 8px; flex-wrap: wrap; }
html.dock-ui .gd-glass-btn {
    padding: 10px 16px;
    border-radius: 999px;
    border: 1px solid var(--gd-panel-border);
    background: var(--gd-bubble-bg);
    color: var(--gd-panel-ink);
    font: 650 13px/1.2 'Inter', 'Segoe UI', sans-serif;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background 0.15s ease, transform 0.15s ease;
}
html.dock-ui .gd-glass-btn:hover { background: var(--gd-bubble-bg-hover); transform: translateY(-1px); }
html.dock-ui .gd-glass-btn.gd-primary {
    background: linear-gradient(135deg, rgba(10, 132, 255, 0.75), rgba(0, 96, 223, 0.6));
    border-color: rgba(140, 190, 255, 0.4);
    color: #fff;
}
html.dock-ui .gd-glass-btn.gd-danger {
    background: linear-gradient(135deg, rgba(255, 82, 82, 0.65), rgba(180, 24, 40, 0.55));
    border-color: rgba(255, 140, 140, 0.4);
    color: #fff;
}

/* ============================================================
   10. Buy-world popup ("אין עולם פנוי")
   ============================================================ */
html.dock-ui #gd-buyworld-overlay {
    position: fixed;
    inset: 0;
    z-index: 10070;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(4, 6, 14, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
html.dock-ui #gd-buyworld-overlay.visible { display: flex; }
html.dock-ui #gd-buyworld-card {
    width: min(400px, calc(100vw - 36px));
    padding: 26px 24px 22px;
    border-radius: 30px;
    background: var(--gd-panel-bg);
    border: 1px solid var(--gd-panel-border);
    color: var(--gd-panel-ink);
    text-align: center;
    direction: rtl;
    backdrop-filter: blur(28px) saturate(160%);
    -webkit-backdrop-filter: blur(28px) saturate(160%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.08),
        inset 2px 3px 0 -2px rgba(255, 255, 255, 0.6),
        0 30px 80px rgba(0, 0, 0, 0.55);
    animation: gdPanelIn 0.26s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}
html.dock-ui #gd-buyworld-card .gd-bw-emoji { font-size: 42px; margin-bottom: 6px; }
html.dock-ui #gd-buyworld-card h3 {
    margin: 0 0 8px;
    font: 800 20px/1.3 'Inter', 'Segoe UI', 'Heebo', sans-serif;
}
html.dock-ui #gd-buyworld-card p {
    margin: 0 0 6px;
    font: 500 13.5px/1.55 'Inter', 'Segoe UI', 'Heebo', sans-serif;
    color: var(--gd-panel-muted);
}
html.dock-ui #gd-buyworld-card .gd-bw-points {
    margin: 12px auto 16px;
    padding: 10px 18px;
    width: fit-content;
    border-radius: 999px;
    background: var(--gd-bubble-bg);
    border: 1px solid var(--gd-panel-border);
    font: 700 14px/1.2 'Inter', 'Segoe UI', sans-serif;
}
html.dock-ui #gd-buyworld-card .gd-panel-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ============================================================
   11. Galaxy chat orb — copied 1:1 from css/chat-orb.css,
       re-scoped: #chat-orb → #galaxy-orb, tokens on #galaxy-dock.
       Skin: rainbow gradient that slowly shifts + translucent ball.
   ============================================================ */
html.dock-ui #galaxy-dock {
    /* default: purple-pink (imagent concept) — rainbow shift layered on top */
    --orb-a: #9147ff;
    --orb-b: #ff7ad9;
    --orb-c: #4dd6ff;
    --orb-core: #ffd9ec;
    --orb-ink: #1d1128;
    --orb-glow: rgba(145, 71, 255, 0.45);
}

html.dock-ui .gd-orb-item {
    width: calc(var(--gd-orb) * var(--gd-scale, 1));
    height: calc(var(--gd-orb) * var(--gd-scale, 1));
}

html.dock-ui #galaxy-orb {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform: translateZ(0);
    pointer-events: auto;
}

html.dock-ui #galaxy-orb:hover { transform: scale(1.08); }
html.dock-ui #galaxy-orb:active { transform: scale(0.92); }
html.dock-ui #galaxy-orb:focus-visible { outline: none; }
html.dock-ui #galaxy-orb:focus-visible .orb-ball { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.55); }

/* rainbow hue drift lives on a wrapper so the ball keeps its own filters */
html.dock-ui #galaxy-orb .orb-hue {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    animation: gdHueShift 14s linear infinite;
}
@keyframes gdHueShift {
    from { filter: hue-rotate(0deg); }
    to   { filter: hue-rotate(360deg); }
}

/* the glowing gradient sphere (translucent like the tray bubble) */
html.dock-ui #galaxy-orb .orb-ball {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    overflow: hidden;
    opacity: 0.94;
    background:
        radial-gradient(circle at 32% 30%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0) 26%),
        radial-gradient(circle at 50% 58%, var(--orb-core) 0%, rgba(255, 255, 255, 0) 52%),
        radial-gradient(circle at 78% 22%, var(--orb-c) 0%, rgba(255, 255, 255, 0) 46%),
        radial-gradient(circle at 22% 80%, var(--orb-b) 0%, rgba(255, 255, 255, 0) 60%),
        radial-gradient(circle at 70% 78%, var(--orb-a) 0%, rgba(255, 255, 255, 0) 66%),
        linear-gradient(135deg, var(--orb-b), var(--orb-a));
    box-shadow:
        inset 0 0 14px rgba(255, 255, 255, 0.35),
        inset 0 -8px 18px color-mix(in srgb, var(--orb-a) 45%, transparent);
    filter:
        drop-shadow(0 0 6px rgba(255, 255, 255, 0.65))
        drop-shadow(0 0 18px var(--orb-glow))
        drop-shadow(0 6px 24px color-mix(in srgb, var(--orb-b) 40%, transparent));
    transition: background 600ms ease, filter 600ms ease;
    animation: orbBreath 4.2s ease-in-out infinite;
}

@keyframes orbBreath {
    0%, 100% { transform: scale(1); }
    30%      { transform: scale(1.035); }
    60%      { transform: scale(0.985); }
}

html.dock-ui #galaxy-orb .orb-swirl {
    position: absolute;
    width: 130%;
    height: 130%;
    top: -15%;
    left: -15%;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 35%,
        color-mix(in srgb, var(--orb-b) 78%, white) 0%,
        rgba(255, 255, 255, 0) 42%);
    mix-blend-mode: screen;
    opacity: 0.85;
    animation: orbSwirl 9s linear infinite;
    pointer-events: none;
}

html.dock-ui #galaxy-orb .orb-swirl-2 {
    background: radial-gradient(circle at 68% 62%,
        color-mix(in srgb, var(--orb-c) 82%, white) 0%,
        rgba(255, 255, 255, 0) 38%);
    animation-duration: 13s;
    animation-direction: reverse;
    opacity: 0.7;
}

@keyframes orbSwirl {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

html.dock-ui #galaxy-orb .orb-shine {
    position: absolute;
    top: 7%;
    left: 16%;
    width: 44%;
    height: 30%;
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0));
    filter: blur(2px);
    opacity: 0.75;
    pointer-events: none;
}

/* ---------- the face ---------- */
html.dock-ui #galaxy-orb .orb-face {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    pointer-events: none;
    transform: translate(calc(var(--gaze-x, 0) * 1px), calc(var(--gaze-y, 0) * 1px));
    transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 3;
}

/* The face is expressed as fractions of --gd-orb (ratios taken from the
   original chat-orb design) so the eyes and smile grow with the ball —
   hardcoded px left the face stuck at its old size when the orb grew. */
html.dock-ui #galaxy-orb .orb-features {
    position: relative;
    width: calc(var(--gd-orb) * 0.606);
    height: calc(var(--gd-orb) * 0.455);
    margin-top: calc(var(--gd-orb) * -0.045);
    transform-origin: center;
}

html.dock-ui #galaxy-orb .orb-eye {
    position: absolute;
    top: 0;
    width: calc(var(--gd-orb) * 0.076);
    height: calc(var(--gd-orb) * 0.197);
    border-radius: 999px;
    background: var(--orb-ink);
    transform-origin: center;
    transition: transform 0.09s ease, height 0.25s ease;
}

html.dock-ui #galaxy-orb .orb-eye-l { left: calc(var(--gd-orb) * 0.106); }
html.dock-ui #galaxy-orb .orb-eye-r { right: calc(var(--gd-orb) * 0.106); }
html.dock-ui #galaxy-orb.is-blinking .orb-eye { transform: scaleY(0.12); }
html.dock-ui #galaxy-orb.is-watching .orb-eye { height: calc(var(--gd-orb) * 0.212); }

html.dock-ui #galaxy-orb .orb-mouth {
    position: absolute;
    left: 50%;
    bottom: calc(var(--gd-orb) * -0.045);
    transform: translateX(-50%);
    width: calc(var(--gd-orb) * 0.455);
    height: calc(var(--gd-orb) * 0.273);
    overflow: visible;
    color: var(--orb-ink);
}

html.dock-ui #galaxy-orb.is-thinking .orb-face { --gaze-y: -4; }
html.dock-ui #galaxy-orb.is-thinking .orb-ball { animation: orbBreath 2.1s ease-in-out infinite; }

/* ============================================================
   12. Chat open state: bubbles fold away, back button appears
   ============================================================ */
html.dock-ui #galaxy-dock.gd-chat-open .gd-item:not(.gd-orb-item):not(.gd-back-item) {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.1);
    pointer-events: none;
}
html.dock-ui .gd-back-item {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.1);
    pointer-events: none;
}
html.dock-ui #galaxy-dock.gd-chat-open .gd-back-item {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: auto;
}

/* ============================================================
   13. Galaxy chat panel
   ============================================================ */
html.dock-ui #galaxy-chat-panel {
    position: fixed;
    z-index: calc(var(--gd-z) + 1);
    left: 50%;
    bottom: calc(max(18px, env(safe-area-inset-bottom)) + var(--gd-orb) + 42px);
    transform: translateX(-50%) translateY(14px);
    width: min(480px, calc(100vw - 24px));
    height: min(56vh, 520px);
    display: flex;
    flex-direction: column;
    border-radius: 24px;
    background: var(--gd-panel-bg);
    border: 1px solid var(--gd-panel-border);
    backdrop-filter: blur(26px) saturate(155%);
    -webkit-backdrop-filter: blur(26px) saturate(155%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.07),
        inset 2px 3px 0 -2px rgba(255, 255, 255, 0.5),
        0 24px 70px rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0s linear 0.3s;   /* no transform anim — JS positions the panel */
}
html.dock-ui #galaxy-chat-panel.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
    transition: opacity 0.25s ease, visibility 0s;
}

/* dock at top-left → the chat panel drops DOWN from the corner */
html.dock-ui[data-gd-edge="topleft"] #galaxy-chat-panel {
    left: 24px;
    right: auto;
    bottom: auto;
    top: calc(72px + var(--gd-orb) + 96px);
    height: min(52vh, 480px);
    transform: translateY(-14px);
}
html.dock-ui[data-gd-edge="topleft"] #galaxy-chat-panel.open {
    transform: translateY(0);
}

html.dock-ui #gc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 16px 8px;
    color: var(--gd-panel-ink);
    font: 800 14px/1.2 'Inter', 'Segoe UI', 'Heebo', sans-serif;
}
html.dock-ui #gc-header .gc-sub {
    font: 500 10.5px/1.3 'Inter', 'Segoe UI', sans-serif;
    color: var(--gd-panel-muted);
}
html.dock-ui #gc-close-btn {
    border: 1px solid var(--gd-panel-border);
    background: var(--gd-bubble-bg);
    color: var(--gd-panel-muted);
    border-radius: 999px;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: 600 12px/1 'Inter', sans-serif;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
html.dock-ui #gc-close-btn:hover {
    background: var(--gd-bubble-bg-hover, rgba(255, 255, 255, 0.14));
    color: var(--gd-panel-ink);
}

html.dock-ui #gc-messages {
    flex: 1 1 auto;
    min-height: 0;
    padding: 8px 14px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) rgba(255, 255, 255, 0.06);
    scroll-behavior: smooth;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
}

/* === iMessage-style glass bubbles — copied from planet-world.html === */
html.dock-ui #gc-messages .chat-message {
    position: relative;
    margin-bottom: 10px;
    padding: 9px 14px 8px;
    border-radius: 18px;
    max-width: 78%;
    width: fit-content;
    word-wrap: break-word;
    overflow-wrap: break-word;
    animation: gcMessageSlide 0.3s ease-out;
    font-family: 'Inter', 'Segoe UI', 'Heebo', sans-serif;
    font-size: 13.5px;
    line-height: 1.45;
    backdrop-filter: blur(16px) saturate(1.5);
    -webkit-backdrop-filter: blur(16px) saturate(1.5);
}
@keyframes gcMessageSlide {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
html.dock-ui #gc-messages .chat-message.user {
    margin-left: auto;
    margin-right: 0;
    background: linear-gradient(135deg, rgba(10, 132, 255, 0.55), rgba(0, 96, 223, 0.42));
    border: 1px solid rgba(140, 190, 255, 0.35);
    border-bottom-right-radius: 6px;
    color: #fff;
    text-align: right;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 6px 20px rgba(6, 40, 90, 0.35);
}
html.dock-ui #gc-messages .chat-message.assistant {
    margin-right: auto;
    margin-left: 0;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.07));
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-bottom-left-radius: 6px;
    color: rgba(255, 255, 255, 0.94);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 8px 24px rgba(0, 0, 0, 0.28);
}
html.dock-ui[data-theme="light"] #gc-messages .chat-message.assistant {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.9), rgba(244, 246, 252, 0.8));
    border-color: rgba(10, 14, 22, 0.1);
    color: rgba(12, 16, 24, 0.9);
    box-shadow: 0 8px 24px rgba(20, 30, 60, 0.12);
}
html.dock-ui #gc-messages .chat-message .message-content { unicode-bidi: plaintext; }
html.dock-ui #gc-messages .chat-message.system {
    margin: 2px auto 10px;
    padding: 5px 14px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    text-align: center;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.75);
    box-shadow: none;
}
html.dock-ui[data-theme="light"] #gc-messages .chat-message.system {
    background: rgba(10, 14, 22, 0.06);
    border-color: rgba(10, 14, 22, 0.08);
    color: rgba(12, 16, 24, 0.6);
}
html.dock-ui #gc-messages .message-time {
    font-size: 9.5px;
    opacity: 0.55;
    margin-top: 4px;
    font-style: normal;
    direction: ltr;
}

/* action button rendered inside assistant bubbles (e.g. קח אותי לשם) */
html.dock-ui #gc-messages .gc-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid rgba(140, 190, 255, 0.45);
    background: linear-gradient(135deg, rgba(10, 132, 255, 0.6), rgba(0, 96, 223, 0.45));
    color: #fff;
    font: 650 12px/1.2 'Inter', 'Segoe UI', 'Heebo', sans-serif;
    cursor: pointer;
}
html.dock-ui #gc-messages .gc-action-btn:hover { filter: brightness(1.12); }

/* search results inside the chat (last-resort fallback) */
html.dock-ui .gc-results { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
html.dock-ui .gc-result-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 14px;
    border: 1px solid var(--gd-panel-border);
    background: rgba(255, 255, 255, 0.06);
    cursor: pointer;
    transition: background 0.15s ease;
}
html.dock-ui .gc-result-row:hover { background: rgba(255, 255, 255, 0.13); }
html.dock-ui .gc-result-dot {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
}
html.dock-ui .gc-result-text { flex: 1; min-width: 0; }
html.dock-ui .gc-result-title {
    font: 650 12.5px/1.3 'Inter', 'Segoe UI', sans-serif;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    unicode-bidi: plaintext;
}
html.dock-ui .gc-result-sub { font: 500 10px/1.3 'Inter', sans-serif; color: var(--gd-panel-muted); }

/* typing indicator */
html.dock-ui #gc-typing {
    display: none;
    align-items: center;
    gap: 8px;
    margin: 0 14px 8px;
    padding: 8px 14px;
    width: fit-content;
    border-radius: 18px;
    border-bottom-left-radius: 6px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.16);
}
html.dock-ui #gc-typing.visible { display: inline-flex; }
html.dock-ui #gc-typing .gc-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.75);
    animation: gcDot 1.2s ease-in-out infinite;
}
html.dock-ui #gc-typing .gc-dot:nth-child(2) { animation-delay: 0.15s; }
html.dock-ui #gc-typing .gc-dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes gcDot {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
    30% { transform: translateY(-4px); opacity: 1; }
}

/* chips row (smart suggestions) */
html.dock-ui #gc-chips {
    display: flex;
    gap: 8px;
    padding: 4px 14px 8px;
    overflow-x: auto;
    scrollbar-width: none;
}
html.dock-ui #gc-chips::-webkit-scrollbar { display: none; }
html.dock-ui .gc-chip {
    flex: 0 0 auto;
    padding: 7px 13px;
    border-radius: 999px;
    border: 1px solid var(--gd-panel-border);
    background: var(--gd-bubble-bg);
    color: var(--gd-panel-ink);
    font: 600 12px/1.2 'Inter', 'Segoe UI', 'Heebo', sans-serif;
    cursor: pointer;
    white-space: nowrap;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background 0.15s ease, transform 0.15s ease;
}
html.dock-ui .gc-chip:hover { background: var(--gd-bubble-bg-hover); transform: translateY(-1px); }

/* input row */
html.dock-ui #gc-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 12px 12px;
    padding: 6px 6px 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--gd-panel-border);
    background: rgba(255, 255, 255, 0.09);
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    position: relative;
}
html.dock-ui[data-theme="light"] #gc-input-row { background: rgba(255, 255, 255, 0.75); }

/* the live command chip that appears while typing create/take-me */
html.dock-ui #gc-cmd-chip {
    display: none;
    flex: 0 0 auto;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border-radius: 999px;
    font: 700 11.5px/1.2 'Inter', 'Segoe UI', 'Heebo', sans-serif;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: linear-gradient(135deg, #9147ff, #ff7ad9);
    box-shadow: 0 0 14px rgba(145, 71, 255, 0.5);
    cursor: pointer;
    animation: gdPanelIn 0.18s ease-out;
    white-space: nowrap;
}
html.dock-ui #gc-cmd-chip.visible { display: inline-flex; }
html.dock-ui #gc-cmd-chip[data-cmd="goto"] {
    background: linear-gradient(135deg, #0a84ff, #4dd6ff);
    box-shadow: 0 0 14px rgba(10, 132, 255, 0.5);
}
html.dock-ui #gc-cmd-chip .gc-chip-x { opacity: 0.8; font-weight: 800; }

html.dock-ui #gc-input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--gd-panel-ink);
    font: 500 14px/1.4 'Inter', 'Segoe UI', 'Heebo', sans-serif;
    unicode-bidi: plaintext;
}
html.dock-ui #gc-input::placeholder { color: var(--gd-panel-muted); }

html.dock-ui #gc-send {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 0;
    background: linear-gradient(135deg, #0a84ff, #0060df);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.15s ease, filter 0.15s ease;
}
html.dock-ui #gc-send:hover { filter: brightness(1.15); transform: scale(1.06); }
html.dock-ui #gc-send:disabled { opacity: 0.45; cursor: default; }
html.dock-ui #gc-send svg { width: 17px; height: 17px; }

/* ============================================================
   14. Adopted dropdowns open UPWARD above the dock
   ============================================================ */
html.dock-ui #galaxy-dock #user-menu {
    top: auto !important;
    bottom: calc(100% + 16px) !important;
    left: 50% !important;
    transform: translateX(-50%);
}
html.dock-ui #galaxy-dock #creation-dropdown {
    top: auto !important;
    bottom: calc(100% + 16px) !important;
    left: 50% !important;
    transform: translateX(-50%);
}
html.dock-ui #galaxy-dock #main-help-button { overflow: visible; }
html.dock-ui #galaxy-dock .main-help-dropdown {
    top: auto !important;
    bottom: calc(100% + 16px) !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
}
/* mobile joystick → bottom-right corner, clear of the hive */
@media (max-width: 768px) {
    html.dock-ui #mobile-joystick {
        left: auto !important;
        right: 14px !important;
        bottom: 150px !important;
        transform: none !important;
    }
}

/* takeover modals (Settings / My Stars) get the stage to themselves — hide
   the dock chrome. They live inside #ui-overlay (z 10), so they can never
   out-z the dock; hiding it is the reliable route. */
html.dock-ui body:has(#settings-modal:not(.hidden)) #galaxy-dock,
html.dock-ui body:has(#settings-modal:not(.hidden)) .gd-edge-nav,
html.dock-ui body:has(#settings-modal:not(.hidden)) #galaxy-chat-panel,
html.dock-ui body:has(#settings-modal:not(.hidden)) .gd-panel,
html.dock-ui body:has(#user-stars-modal:not(.hidden)) #galaxy-dock,
html.dock-ui body:has(#user-stars-modal:not(.hidden)) .gd-edge-nav,
html.dock-ui body:has(#user-stars-modal:not(.hidden)) #galaxy-chat-panel,
html.dock-ui body:has(#user-stars-modal:not(.hidden)) .gd-panel {
    opacity: 0 !important;
    /* visibility (not just pointer-events): adopted widgets inside the dock
       carry their own `pointer-events: auto`, which pierces a parent's
       pointer-events:none and steals clicks from the modal behind them */
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.2s ease, visibility 0.2s;
}

/* ...and the descendants explicitly: .gd-adopted sets its own
   `visibility: visible !important` (and widgets their own pointer-events),
   which would pierce the parent-level hide above. The :has() + id prefix
   out-specifies those rules, so the whole subtree really goes inert. */
html.dock-ui body:has(#settings-modal:not(.hidden)) #galaxy-dock *,
html.dock-ui body:has(#settings-modal:not(.hidden)) .gd-panel *,
html.dock-ui body:has(#user-stars-modal:not(.hidden)) #galaxy-dock *,
html.dock-ui body:has(#user-stars-modal:not(.hidden)) .gd-panel * {
    visibility: hidden !important;
    pointer-events: none !important;
}

/* dragging a bubble over the open tray panel — swallow target glow */
html.dock-ui .gd-panel.gd-drop-target {
    border-color: rgba(140, 235, 175, 0.75) !important;
    box-shadow:
        inset 0 0 0 1px rgba(140, 235, 175, 0.35),
        0 0 26px rgba(120, 220, 160, 0.45),
        0 24px 70px rgba(0, 0, 0, 0.5) !important;
}

/* help opened from the tray as a free-floating panel with an ✕ */
html.dock-ui .main-help-dropdown.gd-free {
    position: fixed !important;
    display: block !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    z-index: 100150 !important;
}
html.dock-ui .gd-help-close {
    position: sticky;
    top: 0;
    float: left;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    border: 1px solid var(--gd-panel-border);
    background: var(--gd-bubble-bg);
    color: var(--gd-panel-ink);
    font: 600 12px/1 'Inter', sans-serif;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
}

/* help: narrow panel + stroke-only bubble (like the tray) */
html.dock-ui .main-help-dropdown {
    min-width: 0 !important;
    width: 272px !important;
    max-width: min(272px, calc(100vw - 32px)) !important;
    padding: 14px !important;
    max-height: min(58vh, 480px) !important;
}
html.dock-ui #galaxy-dock #main-help-button::before {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1.6px solid var(--gd-bubble-border) !important;
    box-shadow:
        inset 1.8px 3px 0 -2px rgba(255, 255, 255, 0.75),
        inset -2px -2px 0 -2px rgba(255, 255, 255, 0.4),
        0 2px 12px rgba(0, 0, 0, 0.25) !important;
}

/* dock at top-left → dropdowns flip DOWNWARD (and hug the left edge) */
html.dock-ui #galaxy-dock[data-edge="topleft"] #user-menu,
html.dock-ui #galaxy-dock[data-edge="topleft"] #creation-dropdown,
html.dock-ui #galaxy-dock[data-edge="topleft"] .main-help-dropdown {
    bottom: auto !important;
    top: calc(100% + 16px) !important;
    left: 0 !important;
    transform: none;
}

/* music volume popup is fixed-positioned by JS just outside the hive */
html.dock-ui #music-volume-popup.gd-fixed {
    position: fixed !important;
    margin: 0 !important;
    transform: none !important;
    border-radius: 18px;
}

/* an open dropdown freezes hover magnification on its bubble */
html.dock-ui .gd-item.gd-locked { --gd-scale: 1.18 !important; }

/* ============================================================
   15. Coexistence with home-feed sheet + social drawer
   ============================================================ */
html.dock-ui body.home-feed-peek #galaxy-dock[data-edge="bottom"] {
    bottom: calc(var(--hf-peek-height, 118px) + 16px);
}
html.dock-ui body.home-feed-peek #galaxy-chat-panel {
    bottom: calc(var(--hf-peek-height, 118px) + 16px + var(--gd-orb) + 42px);
}
html.dock-ui body.home-feed-expanded #galaxy-dock,
html.dock-ui body.home-feed-expanded #galaxy-chat-panel {
    opacity: 0 !important;
    pointer-events: none !important;
}
html.dock-ui body.social-feed-open #galaxy-dock[data-edge="bottom"] {
    transform: translateX(calc(-50% + var(--social-feed-center-inset, 0px)));
}
html.dock-ui body.social-feed-open #galaxy-chat-panel {
    transform: translateX(calc(-50% + var(--social-feed-center-inset, 0px)));
}
html.dock-ui body.social-feed-open #galaxy-chat-panel.open {
    transform: translateX(calc(-50% + var(--social-feed-center-inset, 0px)));
}

/* ============================================================
   16. Mobile
   ============================================================ */
@media (max-width: 768px) {
    html.dock-ui {
        --gd-size: 43px;
        --gd-orb: 60px;
        --gd-gap: 8px;
    }

    /* compact (mini) resting state — one tap wakes it up */
    html.dock-ui #galaxy-dock.gd-mini #gd-cluster {
        transform: scale(0.72);
        transform-origin: bottom center;
        opacity: 0.82;
    }
    html.dock-ui #galaxy-dock.gd-mini .gd-item::after { display: none; }

    html.dock-ui #galaxy-chat-panel {
        width: calc(100vw - 12px);
        height: min(62vh, 520px);
        bottom: calc(max(14px, env(safe-area-inset-bottom)) + var(--gd-orb) + 26px);
    }

    html.dock-ui #galaxy-main-title { font-size: clamp(17px, 5.4vw, 24px); max-width: 62vw; }
    html.dock-ui .gd-panel { width: min(320px, calc(100vw - 20px)); }
}

/* desktop: bubbles idle slightly smaller, grown by proximity magnification */
@media (min-width: 769px) {
    html.dock-ui #galaxy-dock:not(.gd-chat-open) .gd-item:not(.gd-orb-item) { --gd-scale: 0.92; }
}

/* ============================================================
   17. Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    html.dock-ui #galaxy-orb .orb-ball,
    html.dock-ui #galaxy-orb .orb-swirl,
    html.dock-ui #galaxy-orb .orb-hue,
    html.dock-ui #galaxy-dock.gd-edit .gd-item { animation: none !important; }
}

/* ============================================================
   19. Star info panel on mobile — a centred card, like desktop
   ------------------------------------------------------------
   The legacy mobile rules (index.html ~1526) stretch #info-panel
   edge-to-edge, bottom-anchored, and re-skin it as a pale glass
   sheet. They use !important, which also beats the per-frame inline
   left/top written by positionInfoPanelAtObject (galaxy.js ~3204).
   These rules are more specific (html.dock-ui #info-panel), so the
   panel keeps its desktop card look and simply sits centred.
   ============================================================ */
@media (max-width: 768px) {
    html.dock-ui #info-panel {
        left: 50% !important;
        top: 50% !important;
        right: auto !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) !important;
        width: min(340px, calc(100vw - 36px)) !important;
        min-width: 0 !important;
        max-width: none !important;
        max-height: min(76vh, 560px) !important;
        padding: 0 !important;
        border-radius: 22px !important;
        overflow: hidden !important;
        background: rgb(var(--panel-accent-rgb, 10, 14, 24)) !important;
        border: 1px solid rgba(255, 255, 255, 0.16) !important;
        box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        z-index: 100120 !important;
    }

    /* the name is sized for a 410px desktop card — ease it down */
    html.dock-ui #info-panel .object-name-text,
    html.dock-ui #info-panel .object-name-input {
        font-size: 23px !important;
    }

    html.dock-ui #info-panel .star-popup-content { padding: 14px 16px 16px !important; }
    html.dock-ui #info-panel #star-screenshot-container { max-height: 40vh !important; }
}

/* While the star card is open on mobile it must sit ABOVE the galaxy
   navigation arrows. It cannot win on z-index alone: #info-panel lives
   inside #ui-overlay (z-index: 10), which is its own stacking context, so
   its 100120 is only meaningful in there — while .gd-edge-nav sits at body
   level with z-index 10004 and always paints on top. So drop the arrows
   below the overlay instead (still above the canvas at z-index 1). */
@media (max-width: 768px) {
    html.dock-ui body:has(#info-panel[style*="display: block"]) .gd-edge-nav {
        z-index: 5 !important;
    }
}

/* ============================================================
   20. Hive size modes (S/M/L/XL) — picked in Settings, applied
   live via html[data-gd-hive]. Everything derives from the two
   variables (face = calc of --gd-orb, icons = % of bubble, gaps =
   ratio in JS), so switching is a clean vector zoom, no reload.
   ============================================================ */
html.dock-ui[data-gd-hive="s"]  { --gd-size: 46px; --gd-orb: 68px; }
html.dock-ui[data-gd-hive="m"]  { --gd-size: 60px; --gd-orb: 89px; }
html.dock-ui[data-gd-hive="l"]  { --gd-size: 76px; --gd-orb: 113px; }
html.dock-ui[data-gd-hive="xl"] { --gd-size: 90px; --gd-orb: 134px; }
@media (max-width: 768px) {
    html.dock-ui[data-gd-hive="s"]  { --gd-size: 34px; --gd-orb: 48px; }
    html.dock-ui[data-gd-hive="m"]  { --gd-size: 38px; --gd-orb: 54px; }
    html.dock-ui[data-gd-hive="l"]  { --gd-size: 43px; --gd-orb: 60px; }
    html.dock-ui[data-gd-hive="xl"] { --gd-size: 50px; --gd-orb: 70px; }
}

/* Hive View presets (Settings → Hive) — one choice scales the hive (via the
   data-gd-hive size it applies) AND the fixed top-left corner row together.
   #gd-corner hard-overrides --gd-size with --gdc-size, so it needs its own
   values per view. */
html.dock-ui[data-gd-view="compact"] #gd-corner { --gdc-size: 46px; --gdc-gap: 8px; }
html.dock-ui[data-gd-view="classic"] #gd-corner { --gdc-size: 60px; --gdc-gap: 10px; }
html.dock-ui[data-gd-view="grand"]   #gd-corner { --gdc-size: 74px; --gdc-gap: 12px; }
@media (max-width: 768px) {
    html.dock-ui[data-gd-view="compact"] #gd-corner { --gdc-size: 38px; --gdc-gap: 7px; }
    html.dock-ui[data-gd-view="classic"] #gd-corner { --gdc-size: 46px; --gdc-gap: 8px; }
    html.dock-ui[data-gd-view="grand"]   #gd-corner { --gdc-size: 54px; --gdc-gap: 10px; }
}

/* the segmented size picker injected into the Settings modal */
.gd-size-picker { display: inline-flex; gap: 6px; }
.gd-size-picker button {
    min-width: 40px;
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.82);
    font: 600 12px/1 'Inter', sans-serif;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.gd-size-picker button:hover { background: rgba(255, 255, 255, 0.14); }
.gd-size-picker button.active {
    background: rgba(120, 170, 255, 0.28);
    border-color: rgba(140, 190, 255, 0.6);
    color: #fff;
}

/* ============================================================
   21. Per-icon accent colors
   ============================================================ */
html.dock-ui [data-key="mystars"] svg { color: #ffd43b !important; }
html.dock-ui [data-key="account"] svg { color: #ff6161 !important; }
html.dock-ui [data-key="report"] svg { color: #ffa94d !important; }
html.dock-ui [data-key="points"] svg { color: #8fe3ff !important; }

/* ============================================================
   22. Plus bubble: same size as everyone, icon scaled with it
   (the legacy svg carries width/height="24" attributes)
   ============================================================ */
html.dock-ui :is(#galaxy-dock, #gd-corner) #add-star-button {
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    transform: none !important;
}
html.dock-ui :is(#galaxy-dock, #gd-corner) #add-star-button svg {
    width: 46% !important;
    height: 46% !important;
}
/* the legacy top-bar rules add their own :hover scale — inside the hive the
   proximity magnification owns sizing, so the extra transform just made the
   plus look permanently bigger and "unresponsive" to hover */
html.dock-ui :is(#galaxy-dock, #gd-corner) #add-star-button:hover { transform: none !important; }
html.dock-ui :is(#galaxy-dock, #gd-corner) #add-star-button.menu-open { transform: rotate(45deg) !important; }

/* ============================================================
   23. Online counter: number + green presence dot as one centred
   group INSIDE the circle
   ============================================================ */
html.dock-ui :is(#galaxy-dock, #gd-corner) .online-counter-pill:not(.embedded) {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    padding: 0 !important;
}
html.dock-ui :is(#galaxy-dock, #gd-corner) .online-counter-pill .online-counter-text {
    font-size: calc(var(--gd-size) * 0.34) !important;
    line-height: 1 !important;
}
html.dock-ui :is(#galaxy-dock, #gd-corner) .online-counter-pill .online-counter-dot {
    position: static !important;
    margin: 0 !important;
    width: calc(var(--gd-size) * 0.13) !important;
    height: calc(var(--gd-size) * 0.13) !important;
    border: none !important;
}
html.dock-ui :is(#galaxy-dock, #gd-corner) .online-counter-pill .online-counter-icon { display: none !important; }

/* ============================================================
   24. Daily credits panel — Apple-Fitness-style dynamic ring
   ============================================================ */
#gd-credits-ring-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 14px 8px 10px;
}
#gd-credits-ring-wrap svg { display: block; }
#gd-credits-ring-track { stroke: rgba(255, 255, 255, 0.12); }
#gd-credits-ring-fill {
    stroke-linecap: round;
    transform: rotate(-90deg);
    transform-origin: center;
    transition: stroke-dashoffset 0.9s cubic-bezier(0.25, 0.8, 0.3, 1);
}
.gd-credits-center {
    font: 800 34px/1 'Inter', sans-serif;
    fill: #fff;
    text-anchor: middle;
    dominant-baseline: central;
}
.gd-credits-sub {
    color: var(--gd-panel-muted);
    font: 600 12.5px/1.5 'Inter', 'Heebo', sans-serif;
    text-align: center;
}

/* size-mode switch: transitions off for one frame so the resize is crisp */
html.dock-ui #galaxy-dock.gd-resizing .gd-item,
html.dock-ui #galaxy-dock.gd-resizing #galaxy-orb,
html.dock-ui #galaxy-dock.gd-resizing #gd-cluster {
    transition: none !important;
}

/* dropdowns positioned by placeMenuOutside: fade only — a transform
   transition made the clamp measure a mid-flight rect */
html.dock-ui #galaxy-dock #user-menu,
html.dock-ui #galaxy-dock #creation-dropdown,
html.dock-ui #galaxy-dock .main-help-dropdown {
    transition: opacity 0.18s ease !important;
    animation: none !important;
}

/* ============================================================
   25. #gd-corner — fixed top-left row: the avatar (#user-button,
   carrying the whole profile/admin/login menu) + CORNER_SLOTS pin
   seats. Empty seats are invisible in normal use and fade in as
   translucent drop targets in edit mode (.gd-edit) or while a
   bubble/tray drag is live (.gd-drag-live).
   ============================================================ */
html.dock-ui #gd-corner {
    --gdc-size: 60px;
    --gdc-gap: 10px;
    --gd-size: var(--gdc-size);   /* children's calc()s follow the corner size */
    position: fixed;
    top: max(16px, calc(env(safe-area-inset-top) + 12px));
    left: max(16px, calc(env(safe-area-inset-left) + 16px));
    display: flex;
    flex-direction: row;
    direction: ltr;
    align-items: center;
    z-index: calc(var(--gd-z) + 1);
    pointer-events: none;              /* children opt back in */
    user-select: none;
    -webkit-user-select: none;
    transition: opacity 240ms ease;
}
/* spacing via margins (not gap) so a collapsed empty slot swallows its own
   breathing room and pinned bubbles pack tight against the avatar */
html.dock-ui #gd-corner > * + * { margin-left: var(--gdc-gap); }

/* fullscreen home feed hides the corner along with the dock */
html.dock-ui body.home-feed-expanded #gd-corner {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* raised above everything while one of its menus is open */
html.dock-ui #gd-corner:has(#user-menu:not(.hidden)),
html.dock-ui #gd-corner:has(#creation-dropdown.visible),
html.dock-ui #gd-corner:has(.main-help-dropdown.show),
html.dock-ui #gd-corner:has(#points-wallet-popover.open) {
    z-index: 100100 !important;
}

/* --- the avatar anchor --- */
html.dock-ui #gd-corner .gd-corner-home {
    position: relative;
    width: var(--gdc-size);
    height: var(--gdc-size);
    flex: 0 0 auto;
    pointer-events: auto;
}
/* the adopted #user-button fills its wrapper (classic fixed-position rules
   are neutralized by .gd-adopted); the avatar thumb fills the circle via
   the re-scoped rules of section 6 */
html.dock-ui #gd-corner #user-button {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    cursor: pointer;
}

/* menus hanging off the corner open BELOW the row, left-aligned */
html.dock-ui #gd-corner #user-menu {
    top: calc(100% + 12px) !important;
    bottom: auto !important;
    left: 0 !important;
    right: auto !important;
    transform: none !important;
    transition: opacity 0.18s ease !important;
    animation: none !important;
}
html.dock-ui #gd-corner #creation-dropdown,
html.dock-ui #gd-corner .main-help-dropdown {
    top: calc(100% + 12px) !important;
    bottom: auto !important;
    left: 0 !important;
    right: auto !important;
    transform: none !important;
    transition: opacity 0.18s ease !important;
    animation: none !important;
}

/* --- pin slots --- */
html.dock-ui #gd-corner .gd-corner-slot {
    position: relative;
    width: var(--gdc-size);
    height: var(--gdc-size);
    border-radius: 50%;
    flex: 0 0 auto;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.22s ease, width 0.22s ease, margin-left 0.22s ease;
}
/* an EMPTY slot collapses to zero width outside edit/drag — pinned bubbles
   sit right next to the avatar and nothing floats under the page title */
html.dock-ui #gd-corner .gd-corner-slot:not(.gd-filled) {
    width: 0;
    margin-left: 0;
}
html.dock-ui #gd-corner.gd-edit .gd-corner-slot:not(.gd-filled),
html.dock-ui #gd-corner.gd-drag-live .gd-corner-slot:not(.gd-filled) {
    width: var(--gdc-size);
    margin-left: var(--gdc-gap);
}
/* empty-seat skeleton — a very faint dashed circle (matches .gd-seat-ghost) */
html.dock-ui #gd-corner .gd-corner-slot::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.6px dashed var(--gd-bubble-border);
    background: rgba(255, 255, 255, 0.03);
    opacity: 0.3;
    pointer-events: none;
    transition: opacity 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
html.dock-ui #gd-corner .gd-corner-slot.gd-filled {
    opacity: 1;
    pointer-events: auto;
}
html.dock-ui #gd-corner .gd-corner-slot.gd-filled::before { display: none; }
/* edit mode / live drag: the empty seats fade in as translucent targets */
html.dock-ui #gd-corner.gd-edit .gd-corner-slot,
html.dock-ui #gd-corner.gd-drag-live .gd-corner-slot {
    opacity: 1;
    pointer-events: auto;
}
html.dock-ui #gd-corner .gd-corner-slot.gd-drop-target::before {
    opacity: 1;
    border-style: solid;
    background: rgba(255, 255, 255, 0.22);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.25), 0 0 22px rgba(255, 255, 255, 0.45);
}

/* --- pinned bubbles: flex children, not hive coordinates --- */
html.dock-ui #gd-corner .gd-item {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100%;
    height: 100%;
    transition: opacity 0.2s ease;
}
/* tooltip opens BELOW (the row hugs the top edge of the screen) */
html.dock-ui #gd-corner .gd-item::after {
    bottom: auto;
    top: calc(100% + 10px);
    transform: translateX(-50%) translateY(-4px);
}
html.dock-ui #gd-corner .gd-item:hover::after {
    transform: translateX(-50%) translateY(0);
}
/* the original dims while its ghost is dragged out */
html.dock-ui #gd-corner .gd-item.gd-corner-dragging { opacity: 0.35; }
/* edit-mode jiggle, same language as the hive */
html.dock-ui #gd-corner.gd-edit .gd-item {
    animation: gdJiggle 0.32s ease-in-out infinite alternate;
}
html.dock-ui #gd-corner.gd-edit .gd-corner-slot:nth-child(2n) .gd-item { animation-delay: 0.08s; }
html.dock-ui #gd-corner.gd-edit .gd-corner-slot:nth-child(3n) .gd-item { animation-delay: 0.16s; }

@media (max-width: 768px) {
    html.dock-ui #gd-corner {
        --gdc-size: 46px;
        --gdc-gap: 8px;
        top: max(14px, calc(env(safe-area-inset-top) + 10px));
        left: max(12px, calc(env(safe-area-inset-left) + 12px));
    }
}

@media (prefers-reduced-motion: reduce) {
    html.dock-ui #gd-corner.gd-edit .gd-item { animation: none !important; }
}