/* ============================================================
   app.css — application styles, extracted from index.html.
   Loads after ui-theme.css (tokens + .ui-* system).
   ============================================================ */

/* ===== section 1 (index.html extraction order preserved) ===== */
        :root {
            --toolbar-height: 36px;
            /* Canonical accent = #64C8FF (rgba(var(--ui-accent-rgb))) — the --ui-*
               tokens from Themes.js are the source of truth; these mirrors
               exist only for pre-theme-boot paint and match it exactly. */
        }
        
        /* overscroll-behavior: none blocks pull-to-refresh AND the Chrome
           Android edge-swipe back-navigation — a pan near the screen edge must
           move the canvas, not leave the app. */
        html { overscroll-behavior: none; }
        body { margin: 0; overflow: hidden; background: #0a0f14; color: white; cursor: default; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; touch-action: none; font-weight: 400; overscroll-behavior: none; }
        
        /* Unified sub-toolbar button styles */
        .subtoolbar-btn {
            background: rgba(var(--ui-primary-rgb), 0.5);
            color: rgba(var(--ui-text-rgb), 0.85);
            border: 2px solid var(--ui-border);
            border-radius: 5px;
            padding: 6px 12px;
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.15s ease;
            font-family: 'Inter', sans-serif;
        }
        .subtoolbar-btn:hover {
            filter: brightness(1.2);
            border-color: var(--ui-border-accent);
            color: var(--ui-text-bright);
            box-shadow: 0 0 12px rgba(var(--ui-accent-rgb), 0.45);
            transform: scale(1.05);
        }
        .subtoolbar-btn:active {
            background: rgba(var(--ui-primary-rgb), 0.55);
            transform: scale(0.97);
        }
        .subtoolbar-btn.active, .subtoolbar-btn.selected {
            /* Selection = amber (one selection colour app-wide) */
            background: rgba(255, 169, 77, 0.25);
            border-color: var(--ui-selected-bright, #FFC078);
            color: var(--ui-selected-bright, #FFC078);
            box-shadow: 0 0 10px rgba(255, 169, 77, 0.3);
        }
        .subtoolbar-btn-danger {
            background: rgba(80, 30, 30, 0.5);
            color: #ff8080;
            border: 1px solid rgba(255, 100, 100, 0.25);
            border-radius: 5px;
            padding: 6px 12px;
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.15s ease;
            font-family: 'Inter', sans-serif;
        }
        .subtoolbar-btn-danger:hover {
            background: rgba(100, 30, 30, 0.6);
            border-color: rgba(255, 100, 100, 0.4);
        }
        .subtoolbar-divider {
            width: 1px;
            height: 18px;
            background: rgba(var(--ui-accent-rgb), 0.2);
            margin: 0 2px;
        }
        
        /* Draw toolbar compact icon buttons */
        .draw-tool-btn {
            background: rgba(var(--ui-primary-rgb), 0.4);
            color: rgba(255, 255, 255, 0.75);
            border: 2px solid var(--ui-border);
            border-radius: 5px;
            padding: 5px 7px;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.15s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
        }
        .draw-tool-btn:hover {
            background: rgba(40, 80, 100, 0.6);
            border-color: var(--ui-border-accent);
            color: #fff;
        }
        .draw-tool-btn:active {
            transform: scale(0.97);
        }
        .draw-tool-btn.active {
            background: rgba(255, 120, 0, 0.35);
            border-color: rgba(255, 160, 0, 0.8);
            color: #ff9500;
            box-shadow: 0 0 10px rgba(255, 120, 0, 0.3);
        }
        .draw-tool-btn-danger {
            color: rgba(255, 120, 120, 0.8);
        }
        .draw-tool-btn-danger:hover {
            background: rgba(100, 30, 30, 0.5);
            border-color: rgba(255, 100, 100, 0.3);
        }
        
        /* Draw mode active indicator — orange screen border */
        #drawModeOverlay {
            display: none;
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 99;
            border: 2px solid rgba(255, 140, 30, 0.6);
            box-shadow: inset 0 0 30px rgba(255, 140, 30, 0.08);
            border-radius: 0;
        }
        #drawModeOverlay.active {
            display: block;
        }
        
        /* Modal animation keyframes */
        @keyframes modalFadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        @keyframes modalFadeOut {
            from { opacity: 1; }
            to { opacity: 0; }
        }
        @keyframes modalContentIn {
            from { opacity: 0; transform: scale(0.95) translateY(10px); }
            to { opacity: 1; transform: scale(1) translateY(0); }
        }
        @keyframes modalContentOut {
            from { opacity: 1; transform: scale(1) translateY(0); }
            to { opacity: 0; transform: scale(0.95) translateY(10px); }
        }
        @keyframes slideInRight {
            from { opacity: 0; transform: translateX(30px); }
            to { opacity: 1; transform: translateX(0); }
        }
        @keyframes slideOutRight {
            from { opacity: 1; transform: translateX(0); }
            to { opacity: 0; transform: translateX(30px); }
        }
        @keyframes slideInLeft {
            from { opacity: 0; transform: translateX(-30px); }
            to { opacity: 1; transform: translateX(0); }
        }
        @keyframes slideOutLeft {
            from { opacity: 1; transform: translateX(0); }
            to { opacity: 0; transform: translateX(-30px); }
        }


        /* ── Scrollbar, app-wide ────────────────────────────────────────────
           ONE definition. This used to be re-declared per panel (#nodeComments
           Panel, #aiChatPanel, #orgSettingsModal — three byte-identical
           copies), which meant every new scrolling surface had to remember to
           opt in, and anything that didn't got the raw OS scrollbar: the chat
           node's DOM overlay showed a white Windows bar inside a dark card.
           Theming the baseline removes the whole class of bug — a new surface
           is themed because it exists, not because someone remembered. */
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: rgba(var(--ui-surface-rgb), 0.4); border-radius: 3px; }
        ::-webkit-scrollbar-thumb { background: rgba(var(--ui-accent-rgb), 0.3); border-radius: 3px; }
        ::-webkit-scrollbar-thumb:hover { background: rgba(var(--ui-accent-rgb), 0.5); }
        ::-webkit-scrollbar-corner { background: transparent; }
        /* Firefox has no pseudo-elements for this — two properties, inherited. */
        * { scrollbar-width: thin; scrollbar-color: rgba(var(--ui-accent-rgb), 0.3) rgba(var(--ui-surface-rgb), 0.4); }

        /* AI Assistant button glow when API key is configured */
        #aiAssistantBtn img { opacity: 0.85; vertical-align: middle; }
        #aiAssistantBtn.ai-active img {
            opacity: 1;
            filter: drop-shadow(0 0 6px rgba(212,165,116,0.6));
            animation: ai-pulse 3s ease-in-out infinite;
        }
        @keyframes ai-pulse {
            0%, 100% { filter: drop-shadow(0 0 6px rgba(212,165,116,0.6)); }
            50% { filter: drop-shadow(0 0 10px rgba(212,165,116,0.8)) drop-shadow(0 0 20px rgba(212,165,116,0.3)); }
        }

        /* AI Assistant panel — custom scrollbar */
        #aiAssistantPanel ::-webkit-scrollbar { width: 6px; }
        #aiAssistantPanel ::-webkit-scrollbar-track { background: rgba(var(--ui-surface-rgb), 0.4); border-radius: 3px; }
        #aiAssistantPanel ::-webkit-scrollbar-thumb { background: rgba(var(--ui-accent-rgb), 0.3); border-radius: 3px; }
        #aiAssistantPanel ::-webkit-scrollbar-thumb:hover { background: rgba(var(--ui-accent-rgb), 0.5); }
        #aiAssistantPanel * { scrollbar-width: thin; scrollbar-color: rgba(var(--ui-accent-rgb), 0.3) rgba(var(--ui-surface-rgb), 0.4); }

        /* Custom scrollbar for search panel */
        #searchResults::-webkit-scrollbar {
            width: 6px;
        }
        #searchResults::-webkit-scrollbar-track {
            background: rgba(var(--ui-surface-rgb), 0.4);
            border-radius: 3px;
        }
        #searchResults::-webkit-scrollbar-thumb {
            background: rgba(var(--ui-accent-rgb), 0.3);
            border-radius: 3px;
        }
        #searchResults::-webkit-scrollbar-thumb:hover {
            background: rgba(var(--ui-accent-rgb), 0.5);
        }
        /* Firefox scrollbar for search */
        #searchResults {
            scrollbar-width: thin;
            scrollbar-color: rgba(var(--ui-accent-rgb), 0.3) rgba(var(--ui-surface-rgb), 0.4);
        }

        /* Emoji picker (chat input, reactions, comments): the category LIST scrolls (so
           the search bar above it stays fixed) with a neutral, Discord-like thin scrollbar. */
        .emoji-categories-container { max-height: 240px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.14) transparent; }
        .emoji-categories-container::-webkit-scrollbar { width: 8px; }
        .emoji-categories-container::-webkit-scrollbar-track { background: transparent; }
        .emoji-categories-container::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.14); border-radius: 4px; border: 2px solid transparent; background-clip: padding-box; }
        .emoji-categories-container::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.26); background-clip: padding-box; }

        /* Chat: subtle full-row highlight on hover (Discord-style) */
        .chat-msg { border-radius: 6px; transition: background 0.1s ease; }
        .chat-msg:hover { background: rgba(255, 255, 255, 0.035); }
        /* Grouped follow-up messages: the time hides in the avatar gutter and
           surfaces on row hover (Discord-style). Right-aligned + small so it
           tucks under where the avatar would be. */
        .plain-gutter-time {
            font-size: 9px;
            color: var(--ui-text-dim);
            opacity: 0;
            transition: opacity 0.1s ease;
            white-space: nowrap;
            align-self: flex-start;
            padding-top: 5px;
            user-select: none;
        }
        .chat-msg:hover .plain-gutter-time { opacity: 1; }

        /* Custom scrollbar for activity panel */
        #notifList::-webkit-scrollbar { width: 6px; }
        #notifList::-webkit-scrollbar-track { background: rgba(var(--ui-surface-rgb), 0.4); border-radius: 3px; }
        #notifList::-webkit-scrollbar-thumb { background: rgba(var(--ui-accent-rgb), 0.3); border-radius: 3px; }
        #notifList::-webkit-scrollbar-thumb:hover { background: rgba(var(--ui-accent-rgb), 0.5); }
        /* Item chip for node types with no media embed (timer, poll, text…).
           Sized as a real chip, not a footnote: it's a link to a THING in the
           world, and at 12px/1px padding it read as incidental text and was a
           poor tap target on touch. */
        .chat-node-link { display: inline-flex; align-items: center; gap: 5px; vertical-align: middle; cursor: pointer; color: #D26B3F; background: rgba(210,107,63,0.12); border: 1px solid rgba(210,107,63,0.3); border-radius: 8px; padding: 5px 10px; font-size: 13px; font-weight: 500; line-height: 1.3; min-height: 28px; box-sizing: border-box; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; transition: background 0.15s, border-color 0.15s; }
        .chat-node-link:hover { background: rgba(210,107,63,0.28); border-color: rgba(210,107,63,0.55); }
        /* The item this link points at was deleted (it's in the trash, so this
           is recoverable — clicking offers to restore). Drained of colour so
           it reads as a tombstone rather than a live link, but still legible:
           the message it sits in is history and must stay readable. */
        .chat-node-deleted { opacity: 0.55; filter: grayscale(1); }
        .chat-node-deleted:hover { opacity: 0.8; }
        .chat-node-deleted.chat-node-link { text-decoration: line-through; }
        /* Inline image-node block: no tinted background, no padding — let the
           image breathe at its natural size against the bubble. */
        .chat-node-image-block { background: none; padding: 0; }
        /* Chat panel header buttons — share a single style for tabs, lock, close. */
        .kk-tab-btn {
            width: 40px; height: 40px; padding: 0;
            background: rgba(var(--ui-surface-rgb),0.6);
            border: 2px solid var(--ui-border);
            border-radius: 8px;
            color: var(--ui-text-muted);
            cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0;
            position: relative;
            transition: color 0.15s, background 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.1s;
        }
        .kk-tab-btn:hover {
            color: var(--ui-text-bright);
            background: var(--ui-surface-hover);
            border-color: var(--ui-border-accent);
            box-shadow: 0 0 12px rgba(var(--ui-accent-rgb), 0.45);
            transform: scale(1.05);
        }
        .kk-tab-btn.msg-tab-active {
            background: rgba(var(--ui-accent-rgb),0.22);
            color: #fff;
            border-color: var(--ui-border-accent);
        }
        .space-dropdown-list { width: 100%; max-height: 192px; overflow-y: auto; background: rgba(var(--ui-surface-rgb),0.6); border: 2px solid var(--ui-border); border-radius: 6px; margin-bottom: 16px; font-size: 14px; }
        .space-dropdown-list::-webkit-scrollbar { width: 6px; }
        .space-dropdown-list::-webkit-scrollbar-track { background: rgba(var(--ui-surface-rgb),0.4); border-radius: 3px; }
        .space-dropdown-list::-webkit-scrollbar-thumb { background: rgba(var(--ui-accent-rgb),0.3); border-radius: 3px; }
        .space-dropdown-list::-webkit-scrollbar-thumb:hover { background: rgba(var(--ui-accent-rgb),0.5); }
        .space-dropdown-placeholder { padding: 10px 12px; color: #555; font-style: italic; }
        .space-dropdown-item { padding: 8px 12px; color: var(--ui-text); cursor: pointer; transition: background 0.1s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .space-dropdown-item:hover { background: rgba(var(--ui-accent-rgb),0.1); color: var(--ui-text-bright); }
        .space-dropdown-divider { padding: 5px 12px; color: var(--ui-text-muted); font-size: 11px; pointer-events: none; border-top: 1px solid var(--ui-border-faint); margin-top: 2px; }
        /* (#spaceActivityList / #myActivityList / .custom-scrollbar each
           re-declared the same scrollbar; the app-wide rule at the top of this
           file now covers them. The .custom-scrollbar class in the markup is
           harmless and left in place.) */
        
        /* Modern minimal toolbar - teal theme, light weight */
        #ui {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            background: rgba(var(--ui-surface-rgb), 0.88);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-bottom: 2px solid var(--ui-border);
            padding: 7px 16px;
            pointer-events: none;
            /* Above the location HUD widget (1200) so toolbar dropdowns (burger,
               universe menu) render over it. #ui is a stacking context — a
               dropdown's own z-index only competes INSIDE it, so this root-level
               value is what actually beats the widget. Still below modals (5000+). */
            z-index: calc(var(--z-hud) + 100);
        }
        
        .toolbar-container {
            display: flex;
            gap: 5px;
            align-items: center;
            pointer-events: auto;
            flex-wrap: wrap;
        }

        /* Comfort scale — the UI chrome reads better ~10% larger (found via an
           accidental 125% browser-zoom A/B test; 110% was the pick). Applies
           to DOM FRAMES only, desktop only: the canvas and canvas-anchored
           overlays must keep 1:1 CSS px ↔ client px or every screen-space
           hit test skews. Browser page zoom stacks on top as before. */
        @media (min-width: 769px) {
            .toolbar-container,
            #usersInSpace,
            #locationContainer,
            #discoverKuukanPanel {
                zoom: 1.1;
            }
        }
        
        .toolbar-divider {
            width: 1px;
            height: 18px;
            background: rgba(var(--ui-accent-rgb), 0.2);
            margin: 0 8px;
        }
        
        .toolbar-logo {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            margin-right: 12px;
        }

        .toolbar-logo img {
            height: 26px;
            width: auto;
            display: block;
        }
        
        /* Toolbar button style - clean, light */
        .toolbar-btn {
            pointer-events: auto;
            height: 30px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            background: var(--ui-toolbar-btn-bg, rgba(var(--ui-primary-rgb), 0.5));
            color: var(--ui-btn-text);
            border: 2px solid var(--ui-border);
            border-radius: 5px;
            padding: 5px 11px;
            font-size: 12px;
            font-weight: 400;
            transition: all 0.15s ease;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            cursor: pointer;
        }
        .toolbar-btn:hover {
            filter: brightness(1.2);
            border-color: var(--ui-border-accent);
            color: var(--ui-text-bright);
            box-shadow: 0 0 12px rgba(var(--ui-accent-rgb), 0.45);
            transform: scale(1.05);
        }
        .toolbar-btn:active {
            background: var(--ui-toolbar-btn-bg, rgba(var(--ui-primary-rgb), 0.55));
            transform: scale(0.97);
        }
        .toolbar-btn.active {
            background: rgba(255, 120, 0, 0.35);
            border-color: rgba(255, 160, 0, 0.8);
            color: #ff9500;
            box-shadow: 0 0 10px rgba(255, 120, 0, 0.3);
        }
        
        /* Tooltip system */
        /* The tooltip is a ::after of its trigger — trapped inside the
           trigger's stacking context, so a later sibling (e.g. the search
           row under the chat tabs) could paint OVER it. Raising the
           hovered trigger itself lifts the bubble above its neighbours. */
        [data-tooltip]:hover {
            z-index: var(--z-top);
        }
        [data-tooltip] {
            position: relative;
        }
        [data-tooltip]::after {
            content: attr(data-tooltip);
            position: absolute;
            bottom: calc(100% + 8px);
            left: 50%;
            transform: translateX(-50%) translateY(4px);
            background: rgba(var(--ui-surface-rgb), 0.95);
            color: var(--ui-text);
            font-size: 11px;
            font-weight: 400;
            font-family: 'Inter', sans-serif;
            padding: 5px 10px;
            border-radius: 6px;
            white-space: nowrap;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.15s ease, transform 0.15s ease;
            z-index: var(--z-top);
            border: 2px solid var(--ui-border);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        }
        [data-tooltip]:hover::after {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
            transition-delay: 0.15s;
        }
        /* Long-copy tooltips wrap instead of stretching across the screen.
           Anchored to the label's LEFT edge rather than centred on it: these
           live in dialogs that scroll, and a scroll container clips whatever
           leaves it — a 240px box centred on a left-hand label hung outside
           the panel and got cut in half. Growing rightward keeps it inside. */
        [data-tooltip-wrap]::after {
            white-space: normal;
            width: 240px;
            line-height: 1.45;
            text-align: left;
            left: 0;
            transform: translateY(4px);
        }
        [data-tooltip-wrap]:hover::after {
            transform: translateY(0);
        }
        /* Bottom tooltips for special cases */
        [data-tooltip-pos="bottom"]::after {
            bottom: auto;
            top: calc(100% + 8px);
            transform: translateX(-50%) translateY(-4px);
        }
        [data-tooltip-pos="bottom"]:hover::after {
            transform: translateX(-50%) translateY(0);
            transition-delay: 0.15s;
        }
        /* Message-action tooltips sit at the right edge of a chat/comment message —
           right-align them so the rightmost button's tooltip extends LEFT instead of
           overflowing the panel's right edge (where overflow:auto would clip it). */
        .message-actions [data-tooltip]::after {
            left: auto; right: 0;
            transform: translateX(0) translateY(-4px);
        }
        .message-actions [data-tooltip]:hover::after {
            transform: translateX(0) translateY(0);
        }
        /* The location widget hugs the right screen edge — same treatment:
           right-align so the tooltip grows LEFT instead of off-screen. */
        #locationContainer [data-tooltip]::after {
            left: auto; right: 0;
            transform: translateX(0) translateY(-4px);
        }
        #locationContainer [data-tooltip]:hover::after {
            transform: translateX(0) translateY(0);
        }
        /* Toolbar tooltips: show below (toolbar is at top of viewport) */
        .toolbar-container [data-tooltip]::after {
            bottom: auto;
            top: calc(100% + 8px);
            transform: translateX(-50%) translateY(-4px);
        }
        .toolbar-container [data-tooltip]:hover::after {
            transform: translateX(-50%) translateY(0);
            transition-delay: 0.15s;
        }
        /* Right tooltips for floating buttons */
        [data-tooltip-pos="right"]::after {
            bottom: auto;
            left: calc(100% + 10px);
            top: 50%;
            transform: translateY(-50%) translateX(-4px);
        }
        [data-tooltip-pos="right"]:hover::after {
            transform: translateY(-50%) translateX(0);
            transition-delay: 0.15s;
        }
        /* Left tooltips for burger menu / right-aligned dropdowns */
        [data-tooltip-pos="left"]::after {
            bottom: auto;
            left: auto;
            right: calc(100% + 10px);
            top: 50%;
            transform: translateY(-50%) translateX(4px);
        }
        [data-tooltip-pos="left"]:hover::after {
            transform: translateY(-50%) translateX(0);
            transition-delay: 0.15s;
        }

        /* People-panel row buttons sit close to the right edge — the
           default centred tooltip pushed long destination names off-
           screen ("Teleport to user · LongSpaceName"). Anchor the
           tooltip's RIGHT edge to the button instead so it grows to
           the left, and allow wrapping so very long names stack
           rather than overflow the panel. */
        #friendsList [data-tooltip]::after,
        #orgMembersList [data-tooltip]::after,
        #friendRequestsList [data-tooltip]::after,
        #dmFriendPicker [data-tooltip]::after {
            left: auto;
            right: 0;
            transform: translateY(4px);
            max-width: 220px;
            white-space: normal;
            text-align: left;
            line-height: 1.35;
        }
        #friendsList [data-tooltip]:hover::after,
        #orgMembersList [data-tooltip]:hover::after,
        #friendRequestsList [data-tooltip]:hover::after,
        #dmFriendPicker [data-tooltip]:hover::after {
            transform: translateY(0);
        }
        
        /* Icon-only buttons */
        .toolbar-btn-icon {
            padding: 5px 9px;
            font-size: 14px;
        }

        /* AI-group tint: pairs AI Assistant button and credit badge visually */
        /* AI group (assistant button + credit badge) looks like every other
           toolbar button — the Claude mark and ✨ carry the identity.
           .toolbar-btn-ai kept in markup only as a grouping hook. */

        /* Thin vertical divider to group related toolbar items */
        .toolbar-divider {
            display: inline-block;
            width: 1px;
            height: 18px;
            background: rgba(var(--ui-accent-rgb), 0.15);
            margin: 0 4px;
            vertical-align: middle;
        }

        /* Select dropdown styling */
        select.toolbar-btn {
            appearance: none;
            -webkit-appearance: none;
            padding-right: 24px;
            background: rgba(var(--ui-primary-rgb), 0.5) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 10 10'%3E%3Cpath fill='rgba(255,255,255,0.6)' d='M5 7L1 3h8z'/%3E%3C/svg%3E") no-repeat right 9px center;
        }
        select.toolbar-btn:hover {
            background: rgba(40, 80, 100, 0.6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 10 10'%3E%3Cpath fill='rgba(255,255,255,0.9)' d='M5 7L1 3h8z'/%3E%3C/svg%3E") no-repeat right 9px center;
        }
        select.toolbar-btn option {
            background: var(--ui-surface);
            color: var(--ui-text);
        }
        
        /* Dropdown menu items */
        .dropdown-item:hover {
            background: rgba(94, 234, 212, 0.1);
        }

        /* ── My Spaces dropdown (Kuukan style) ── */
        .my-spaces-trigger {
            display: inline-flex;
            align-items: center;
            gap: 7px;
        }
        .my-spaces-trigger-chevron {
            opacity: 0.55;
            transition: transform 0.15s ease;
        }
        .my-spaces-trigger.is-open .my-spaces-trigger-chevron {
            transform: rotate(180deg);
        }
        .my-spaces-panel {
            position: fixed;
            z-index: calc(var(--z-top) - 1);
            min-width: 240px;
            max-width: 360px;
            max-height: 70vh;
            overflow-y: auto;
            overflow-x: hidden;
            padding: 6px 0;
            background: rgba(var(--ui-surface-rgb), 0.97);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 2px solid var(--ui-border);
            border-radius: 10px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
            color: rgba(var(--ui-text-rgb), 0.9);
            font-size: 13px;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            user-select: none;
        }

        /* ── Kuukan Discover rail — persistent docked "lobby" panel ── */
        #discoverKuukanPanel.discover-rail {
            left: 12px;
            top: 56px;
            bottom: 14px;
            width: 294px;
            max-width: 294px;
            max-height: none;
            border-radius: 14px;
            padding: 0;
            display: flex;
            flex-direction: column;
            transition: transform 0.28s cubic-bezier(.4,0,.2,1), opacity 0.22s;
            transform: translateX(0);
        }
        #discoverKuukanPanel.discover-rail.collapsed {
            transform: translateX(-115%);
            opacity: 0;
            pointer-events: none;
        }
        .discover-rail-header {
            display: flex; align-items: center; justify-content: space-between;
            padding: 12px 14px 10px; flex: none;
            border-bottom: 1px solid var(--ui-border-faint);
        }
        .discover-rail-title { font-size: 13px; font-weight: 700; letter-spacing: 0.4px; color: rgba(185,228,255,0.96); }
        .discover-rail-collapse {
            background: none; border: none; color: rgba(150,200,235,0.6); cursor: pointer;
            font-size: 17px; padding: 2px 7px; border-radius: 6px; line-height: 1;
        }
        .discover-rail-collapse:hover { background: rgba(var(--ui-accent-rgb),0.12); color: #fff; }
        .discover-rail-body { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 6px 0 8px; }
        /* Thin reopen tab when the rail is collapsed */
        #discoverRailReopen {
            position: fixed; left: 0; top: 90px; z-index: calc(var(--z-top) - 2); display: none;
            background: rgba(var(--ui-surface-rgb),0.97); backdrop-filter: blur(16px);
            border: 2px solid var(--ui-border-accent); border-left: none;
            border-radius: 0 12px 12px 0; padding: 11px 9px; cursor: pointer;
            color: rgba(185,228,255,0.96); font-size: 17px;
            box-shadow: 0 6px 24px rgba(0,0,0,0.5); transition: background 0.15s;
        }
        #discoverRailReopen:hover { background: rgba(30,46,62,0.98); }
        .my-spaces-panel::-webkit-scrollbar {
            width: 6px;
        }
        .my-spaces-panel::-webkit-scrollbar-track {
            background: rgba(var(--ui-surface-rgb), 0.4);
            border-radius: 3px;
        }
        .my-spaces-panel::-webkit-scrollbar-thumb {
            background: rgba(var(--ui-accent-rgb), 0.3);
            border-radius: 3px;
        }
        .my-spaces-panel::-webkit-scrollbar-thumb:hover {
            background: rgba(var(--ui-accent-rgb), 0.5);
        }
        .my-spaces-panel-header {
            color: rgba(var(--ui-text-rgb), 0.7);
            font-size: 10px;
            text-transform: uppercase;
            letter-spacing: 0.7px;
            padding: 9px 14px 4px;
            pointer-events: none;
        }
        .my-spaces-panel-divider {
            height: 1px;
            background: rgba(var(--ui-accent-rgb), 0.1);
            margin: 4px 8px;
        }
        .my-spaces-panel-item {
            display: flex;
            align-items: center;
            gap: 9px;
            padding: 6px 14px;
            cursor: pointer;
            line-height: 1.3;
            transition: background 0.12s, color 0.12s;
        }
        .my-spaces-panel-item:hover {
            background: rgba(var(--ui-accent-rgb), 0.13);
            color: #fff;
        }
        .my-spaces-panel-item-icon {
            flex-shrink: 0;
            font-size: 13px;
            width: 18px;
            /* SVG + PNG marks sit in one consistent box — centred both ways
               so the lock png and stroke icons align on the same baseline */
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        .my-spaces-panel-item-label {
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .my-spaces-panel-item-meta {
            color: rgba(var(--ui-text-rgb), 0.6);
            font-size: 11px;
            flex-shrink: 0;
            margin-left: 6px;
        }
        .my-spaces-panel-item.is-action {
            color: #4ecdc4;
        }
        .my-spaces-panel-item.is-action:hover {
            background: rgba(var(--ui-teal-rgb), 0.15);
            color: #5fdfdf;
        }
        .my-spaces-panel-empty {
            padding: 8px 14px;
            color: rgba(var(--ui-text-rgb), 0.5);
            font-size: 12px;
            font-style: italic;
        }

        /* ── GIF reaction picker (Kuukan style) ── */
        .gif-reaction-picker {
            position: fixed;
            z-index: calc(var(--z-top) - 1);
            width: 340px;
            height: 480px;
            /* Plain block layout — children use absolute positioning so the
               scroll area is reliably constrained between header and footer.
               Flex column with display:grid child kept fighting Chrome's
               height resolution and either over- or under-shot. */
            background: rgba(var(--ui-surface-rgb), 0.97);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(180, 140, 255, 0.25);
            border-radius: 12px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
            color: rgba(var(--ui-text-rgb), 0.9);
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            user-select: none;
            overflow: hidden;
        }
        .gif-reaction-close {
            position: absolute;
            top: 6px;
            right: 6px;
            width: 26px;
            height: 26px;
            padding: 0;
            border: none;
            border-radius: 5px;
            background: transparent;
            color: rgba(var(--ui-text-rgb), 0.55);
            font-size: 14px;
            line-height: 1;
            cursor: pointer;
            transition: background 0.12s, color 0.12s;
            z-index: 1;
        }
        .gif-reaction-close:hover {
            background: rgba(180, 140, 255, 0.2);
            color: #fff;
        }
        /* Source tabs — GIFs / Stickers */
        .gif-reaction-source-tabs {
            position: absolute;
            top: 0;
            left: 0;
            right: 36px;                       /* leave space for close button */
            height: 32px;
            display: flex;
            gap: 4px;
            padding: 4px 8px;
            box-sizing: border-box;
            border-bottom: 1px solid rgba(180, 140, 255, 0.08);
        }
        .gif-reaction-source-tab {
            flex: 1;
            padding: 0 10px;
            background: transparent;
            border: 1px solid transparent;
            border-radius: 6px;
            color: rgba(180, 180, 200, 0.55);
            font-size: 11px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.12s;
            font-family: inherit;
        }
        .gif-reaction-source-tab:hover {
            color: rgba(var(--ui-text-rgb), 0.95);
            background: rgba(180, 140, 255, 0.08);
        }
        .gif-reaction-source-tab.active {
            color: var(--ui-text-bright);
            background: rgba(180, 140, 255, 0.16);
            border-color: rgba(180, 140, 255, 0.3);
        }
        .gif-reaction-search-row {
            position: absolute;
            top: 32px;                          /* below source tabs */
            left: 0;
            right: 0;
            height: 48px;
            box-sizing: border-box;
            padding: 10px 12px 8px 12px;
            border-bottom: 1px solid rgba(180, 140, 255, 0.12);
        }
        .gif-reaction-search {
            width: 100%;
            padding: 8px 10px;
            background: rgba(var(--ui-surface-rgb), 0.7);
            border: 1px solid rgba(180, 140, 255, 0.2);
            border-radius: 6px;
            color: var(--ui-text-bright);
            font-size: 13px;
            outline: none;
            box-sizing: border-box;
            transition: border-color 0.12s;
        }
        .gif-reaction-search:focus {
            border-color: rgba(180, 140, 255, 0.5);
        }
        /* Scroll container — flex child that owns the overflow/scrollbar.
           Kept separate from the inner grid so display:grid doesn't fight
           the flex height allocation (a known Chrome quirk). */
        .gif-reaction-grid-scroll {
            position: absolute;
            top: 116px;                /* tabs (32) + search-row (48) + mode-row (36) */
            bottom: 28px;              /* attribution height */
            left: 0;
            right: 0;
            overflow-y: scroll;
            overflow-x: hidden;
            scrollbar-width: thin;     /* Firefox */
            scrollbar-color: rgba(180, 140, 255, 0.6) rgba(var(--ui-surface-rgb), 0.5);
        }
        .gif-reaction-grid-scroll::-webkit-scrollbar {
            width: 12px;
        }
        .gif-reaction-grid-scroll::-webkit-scrollbar-track {
            background: rgba(40, 50, 65, 0.7);
            border-radius: 6px;
            margin: 4px 0;
        }
        .gif-reaction-grid-scroll::-webkit-scrollbar-thumb {
            background: rgba(180, 140, 255, 0.7);
            border-radius: 6px;
            border: 2px solid rgba(var(--ui-surface-rgb), 0.97);
        }
        .gif-reaction-grid-scroll::-webkit-scrollbar-thumb:hover {
            background: rgba(200, 160, 255, 0.9);
        }
        /* Inner grid — grows to content height; the scroll container above clips it. */
        .gif-reaction-grid {
            padding: 8px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 6px;
            align-content: start;
        }
        .gif-reaction-tile {
            position: relative;
            padding: 0;
            background: rgba(var(--ui-surface-rgb), 0.4);
            border: 1px solid rgba(180, 140, 255, 0.08);
            border-radius: 6px;
            cursor: pointer;
            overflow: hidden;
            transition: border-color 0.12s, transform 0.12s;
        }
        .gif-reaction-tile:hover {
            border-color: rgba(180, 140, 255, 0.5);
            transform: scale(1.03);
        }
        /* Sent-confirmation flash — applied briefly after a tile click so
           the user sees their pick was registered, even though the picker
           stays open for follow-up reactions. */
        .gif-reaction-tile.gif-reaction-tile-sent {
            border-color: #5fdfdf;
            box-shadow: 0 0 0 2px rgba(95, 223, 223, 0.6);
            animation: gifReactionSentFlash 0.45s ease;
        }
        @keyframes gifReactionSentFlash {
            0%   { box-shadow: 0 0 0 0 rgba(95, 223, 223, 0.9); }
            100% { box-shadow: 0 0 0 8px rgba(95, 223, 223, 0); }
        }
        .gif-reaction-tile img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            pointer-events: none;
        }
        /* Pin-mode toggle row */
        .gif-reaction-mode-row {
            position: absolute;
            top: 80px;                          /* tabs (32) + search-row (48) */
            left: 0;
            right: 0;
            height: 36px;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 6px 12px 8px;
            gap: 8px;
            border-bottom: 1px solid rgba(180, 140, 255, 0.08);
        }
        .gif-reaction-pin-toggle {
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            user-select: none;
        }
        .gif-reaction-pin-checkbox {
            position: absolute;
            opacity: 0;
            pointer-events: none;
        }
        .gif-reaction-pin-thumb {
            position: relative;
            width: 30px;
            height: 16px;
            background: rgba(60, 70, 85, 0.7);
            border-radius: 8px;
            transition: background 0.15s;
        }
        .gif-reaction-pin-thumb::after {
            content: '';
            position: absolute;
            top: 2px;
            left: 2px;
            width: 12px;
            height: 12px;
            background: rgba(var(--ui-text-rgb), 0.9);
            border-radius: 50%;
            transition: transform 0.15s;
        }
        .gif-reaction-pin-checkbox:checked + .gif-reaction-pin-thumb {
            background: rgba(180, 140, 255, 0.55);
        }
        .gif-reaction-pin-checkbox:checked + .gif-reaction-pin-thumb::after {
            transform: translateX(14px);
        }
        .gif-reaction-pin-label {
            color: rgba(var(--ui-text-rgb), 0.8);
            font-size: 12px;
        }
        .gif-reaction-mode-hint {
            color: rgba(var(--ui-text-rgb), 0.6);
            font-size: 11px;
            font-style: italic;
        }
        /* Slight visual cue when in pin mode — lavender accent */
        .gif-reaction-picker.gif-reaction-pin-mode {
            border-color: rgba(180, 140, 255, 0.55);
            box-shadow: 0 8px 32px rgba(120, 80, 200, 0.35), 0 0 0 1px rgba(180, 140, 255, 0.15);
        }
        .gif-reaction-empty {
            grid-column: 1 / -1;
            padding: 20px;
            text-align: center;
            color: rgba(var(--ui-text-rgb), 0.5);
            font-size: 12px;
            font-style: italic;
        }
        /* Footer that tells the user whether more results are coming or
           we've hit the end. Sits as a full-width row in the grid. */
        .gif-reaction-sentinel {
            grid-column: 1 / -1;
            padding: 10px 14px 14px;
            text-align: center;
            color: rgba(180, 200, 220, 0.7);
            font-size: 11px;
            letter-spacing: 0.4px;
        }
        /* When there's more to load, surface it more prominently — a
           subtle lavender pill so the user can't miss the cue. */
        .gif-reaction-sentinel.gif-reaction-sentinel-more {
            color: rgba(220, 200, 255, 0.85);
            background: rgba(180, 140, 255, 0.1);
            border-radius: 6px;
            margin: 8px;
            padding: 8px 14px;
        }
        .gif-reaction-attribution {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 28px;
            box-sizing: border-box;
            padding: 6px 12px;
            font-size: 10px;
            text-align: center;
            color: rgba(var(--ui-text-rgb), 0.5);
            border-top: 1px solid rgba(180, 140, 255, 0.1);
            letter-spacing: 0.5px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        /* Official GIPHY "Powered By" mark — transparent PNG, shown as-is
           on the dark footer. */
        .gif-reaction-giphy-logo {
            height: 16px;
            width: auto;
            display: block;
        }
        
        
        /* Canvas context menu (right-click to create) */
        .canvas-context-menu {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        }
        .canvas-ctx-item {
            display: flex;
            align-items: center;
            padding: 8px 14px;
            cursor: pointer;
            color: var(--ui-text, #e0e0e0);
            font-size: 13px;
            transition: background 0.15s;
            gap: 10px;
        }
        .canvas-ctx-item:hover {
            background: var(--ui-surface-hover, rgba(var(--ui-accent-rgb), 0.1));
        }
        .canvas-ctx-separator {
            height: 1px;
            background: var(--ui-border, #3a3a5a);
            margin: 4px 8px;
        }
        .canvas-ctx-header {
            padding: 6px 14px 4px;
            color: var(--ui-accent, rgba(var(--ui-accent-rgb), 0.5));
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            opacity: 0.85;
        }
        
        
        /* Lock button styles */
        .toolbar-btn-locked {
            background: rgba(248, 113, 113, 0.1);
            border-color: rgba(248, 113, 113, 0.15);
            color: rgba(248, 113, 113, 0.8);
        }
        .toolbar-btn-locked:hover {
            background: rgba(248, 113, 113, 0.18);
            border-color: rgba(248, 113, 113, 0.25);
        }
        
        .toolbar-btn-unlocked {
            background: rgba(74, 222, 128, 0.1);
            border-color: rgba(74, 222, 128, 0.15);
            color: rgba(74, 222, 128, 0.8);
        }
        .toolbar-btn-unlocked:hover {
            background: rgba(74, 222, 128, 0.18);
            border-color: rgba(74, 222, 128, 0.25);
        }
        
        .toolbar-btn-gray {
            pointer-events: auto;
            background: rgba(255, 255, 255, 0.03);
            color: rgba(255, 255, 255, 0.4);
            border: 1px solid rgba(255, 255, 255, 0.06);
            border-radius: 5px;
            padding: 5px 11px;
            font-size: 12px;
            font-weight: 400;
            transition: all 0.15s ease;
            cursor: pointer;
        }
        .toolbar-btn-gray:hover {
            background: rgba(255, 255, 255, 0.08);
            color: rgba(255, 255, 255, 0.6);
        }
        
        /* Settings/modal button styles - matches BTN_STYLE from Renderer.js */
        /* Must override .authContainer button with higher specificity */

        .settings-section {
            margin-top: 14px;
            padding: 12px;
            background: rgba(0,0,0,0.16);
            border: 1px solid var(--ui-border-faint);
            border-radius: 8px;
        }
        .settings-section-title {
            color: rgba(var(--ui-accent-rgb),0.85);
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            margin-bottom: 10px;
        }
        .settings-tabs {
            display: flex;
            gap: 4px;
            margin-bottom: 4px;
            border-bottom: 1px solid var(--ui-border-faint);
            padding-bottom: 0;
        }
        /* Space Settings tabs use the shared .ui-tab-underline recipe
           (ui-theme.css); this only compacts the geometry — six tabs share
           a narrow modal, so they flex-fill at a smaller size. */
        .settings-tabs .ui-tab-underline {
            flex: 1;
            padding: 8px 4px;
            font-size: 12px;
            margin: 0 0 -1px 0;
        }
        .settings-tab-panel { display: none; }
        .settings-tab-panel.active { display: block; }
        .settings-hint {
            color: var(--ui-text-muted);
            font-size: 11px;
            margin: 4px 0 0 0;
            line-height: 1.4;
        }

        .place-hint {
            color: rgba(255, 255, 255, 0.35);
            font-size: 10px;
            font-weight: 400;
            margin-left: 4px;
        }
        
        .toolbar-right {
            margin-left: auto;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        /* Hamburger menu - mobile only */
        #hamburgerBtn {
            display: none;
            pointer-events: auto;
            background: var(--ui-toolbar-btn-bg, rgba(var(--ui-primary-rgb), 0.5));
            color: var(--ui-btn-text);
            border: 2px solid var(--ui-border);
            border-radius: 5px;
            padding: 5px 8px;
            font-size: 16px;
            cursor: pointer;
            margin-left: auto;
            line-height: 1;
            transition: all 0.15s ease;
        }

        /* Desktop burger menu - hide old individual buttons, show burger */
        .burger-menu-item { display: none; }
        #desktopBurgerWrap { display: inline-block; }

        .desktop-burger-item {
            display: flex;
            align-items: center;
            gap: 10px;
            width: 100%;
            padding: 10px 16px;
            background: none;
            border: none;
            color: rgba(var(--ui-text-rgb), 0.85);
            font-size: 13px;
            cursor: pointer;
            transition: background 0.12s;
            text-align: left;
            white-space: nowrap;
        }
        .desktop-burger-item:hover { background: rgba(var(--ui-accent-rgb), 0.1); }
        .desktop-burger-item:active { transform: scale(0.98); }
        .desktop-burger-item svg { flex-shrink: 0; opacity: 0.7; }
        .desktop-burger-danger { color: rgba(255, 120, 120, 0.85); }
        .desktop-burger-danger:hover { background: rgba(255, 80, 80, 0.15); }
        /* Burger dropdown tooltips: left of dropdown, override toolbar rule */
        #desktopBurgerDropdown .desktop-burger-item[data-tooltip]::after {
            bottom: auto;
            left: auto;
            right: calc(100% + 8px);
            top: 50%;
            transform: translateY(-50%) translateX(4px);
        }
        #desktopBurgerDropdown .desktop-burger-item[data-tooltip]:hover::after {
            transform: translateY(-50%) translateX(0);
            transition-delay: 0.15s;
        }
        #hamburgerBtn:hover { filter: brightness(1.2); border-color: var(--ui-border-accent); box-shadow: 0 0 12px rgba(var(--ui-accent-rgb), 0.45); transform: scale(1.05); }
        #hamburgerBtn.open .hamburger-icon { display: none; }
        #hamburgerBtn.open .close-icon { display: inline; }
        #hamburgerBtn:not(.open) .close-icon { display: none; }
        
        #mobileMenu {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(8, 12, 18, 0.96);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            /* Above the floating canvas UI (FAB, minimap, badges, carousel —
               z-index up to ~1000) so they can't render over the menu and steal
               taps; still below modals (3000+) so menu items can open them.
               The toolbar (#ui) is bumped to 2001 on mobile so the hamburger
               close button stays tappable above the open menu. */
            z-index: var(--z-nav);
            overflow-y: auto;
            padding: 60px 16px 24px;
            animation: mobileMenuIn 0.2s ease;
        }
        #mobileMenu.open { display: block; }
        
        @keyframes mobileMenuIn {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .mobile-menu-section {
            margin-bottom: 16px;
        }
        .mobile-menu-section-title {
            font-size: 10px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: rgba(var(--ui-accent-rgb), 0.4);
            padding: 0 4px 6px;
        }
        .mobile-menu-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 6px;
        }
        .mobile-menu-btn {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 12px;
            background: rgba(var(--ui-surface-rgb), 0.4);
            border: 2px solid var(--ui-border);
            border-radius: 8px;
            color: var(--ui-text);
            font-size: 13px;
            font-family: 'Inter', sans-serif;
            cursor: pointer;
            transition: all 0.15s;
            text-align: left;
        }
        .mobile-menu-btn:hover {
            background: rgba(40, 70, 90, 0.5);
            border-color: var(--ui-border-accent);
        }
        .mobile-menu-btn:active {
            transform: scale(0.97);
        }
        .mobile-menu-btn svg {
            flex-shrink: 0;
            width: 16px;
            height: 16px;
        }
        .mobile-menu-btn.accent {
            background: rgba(20, 80, 60, 0.4);
            border-color: rgba(45, 212, 191, 0.25);
            color: rgba(125, 211, 200, 0.9);
        }
        .mobile-menu-btn.danger {
            background: rgba(60, 30, 30, 0.3);
            border-color: rgba(239, 68, 68, 0.2);
            color: rgba(248, 113, 113, 0.8);
        }
        .mobile-menu-user {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px;
            background: rgba(20, 40, 60, 0.5);
            border: 2px solid var(--ui-border);
            border-radius: 10px;
            margin-bottom: 16px;
        }
        .mobile-menu-user-name {
            color: var(--ui-text-bright);
            font-size: 14px;
            font-weight: 500;
        }
        .mobile-menu-user-space {
            color: var(--ui-text-muted);
            font-size: 11px;
            margin-top: 2px;
        }
        
        .toolbar-user {
            color: var(--ui-btn-text);
            font-size: 11px;
            padding: 4px 10px;
            border-radius: 5px;
            background: var(--ui-toolbar-btn-bg, rgba(var(--ui-primary-rgb), 0.5));
            border: 2px solid var(--ui-border);
            transition: all 0.15s;
            font-weight: 400;
        }
        .toolbar-user:hover {
            filter: brightness(1.2);
            color: var(--ui-text-bright);
            box-shadow: 0 0 12px rgba(var(--ui-accent-rgb), 0.45);
            transform: scale(1.05);
        }
        input { pointer-events: auto; }
        textarea { pointer-events: auto; }
        #nodeInputWrapper {
            position: fixed;
            z-index: var(--z-panel);
            pointer-events: none;
        }
        #nodeInput { 
            background: rgba(30,35,48,0.97);
            border: 2px solid var(--ui-border-accent);
            color: var(--ui-text);
            padding: 9px 8px;
            font-family: 'Inter', sans-serif;
            font-size: 13px;
            line-height: 16px;
            border-radius: 8px;
            display: block;
            resize: none;
            overflow: hidden;
            word-break: break-word;
            white-space: pre-wrap;
            box-sizing: border-box;
            outline: none;
            pointer-events: auto;
            box-shadow: 0 0 0 3px rgba(var(--ui-accent-rgb),0.1), 0 4px 20px rgba(0,0,0,0.4);
        }
        #nodeCheckboxBtn {
            position: absolute;
            bottom: 100%;
            right: 32px;
            margin-bottom: 4px;
            background: rgba(50,60,75,0.8);
            border: 2px solid var(--ui-border-accent);
            border-radius: 4px;
            font-size: 15px;
            cursor: pointer;
            padding: 2px 5px;
            transition: background 0.2s;
            pointer-events: auto;
            z-index: 1;
            color: var(--ui-text);
        }
        #nodeCheckboxBtn:hover {
            background: rgba(60,80,100,0.9);
        }
        #nodeEmojiBtn {
            position: absolute;
            bottom: 100%;
            right: 0;
            margin-bottom: 4px;
            background: rgba(50,60,75,0.8);
            border: 2px solid var(--ui-border-accent);
            border-radius: 4px;
            font-size: 16px;
            cursor: pointer;
            padding: 2px 5px;
            transition: background 0.2s;
            pointer-events: auto;
            z-index: 1;
            /* The smiley is an SVG on currentColor — without an explicit bright
               color it inherits a dim default and reads as disabled. */
            color: #e8eef4;
        }
        #nodeEmojiBtn:hover {
            background: rgba(60,80,100,0.9);
        }
        #nodeEmojiPicker {
            position: absolute;
            top: 100%;
            right: 0;
            background: rgba(var(--ui-surface-rgb),0.98);
            border: 2px solid var(--ui-border-accent);
            border-radius: 12px;
            padding: 12px;
            max-width: 320px;
            width: 320px;
            max-height: 350px;
            overflow-y: auto;
            box-shadow: 0 4px 20px rgba(0,0,0,0.5);
            pointer-events: auto;
            z-index: calc(var(--z-panel) + 1);
            backdrop-filter: blur(12px);
        }
        #nodeEmojiPicker::-webkit-scrollbar,
        .kuukan-emoji-popup::-webkit-scrollbar,
        .ui-autocomplete-dropdown::-webkit-scrollbar { width: 8px; }
        #nodeEmojiPicker::-webkit-scrollbar-track,
        .kuukan-emoji-popup::-webkit-scrollbar-track,
        .ui-autocomplete-dropdown::-webkit-scrollbar-track { background: transparent; }
        #nodeEmojiPicker::-webkit-scrollbar-thumb,
        .kuukan-emoji-popup::-webkit-scrollbar-thumb,
        .ui-autocomplete-dropdown::-webkit-scrollbar-thumb {
            background: rgba(var(--ui-accent-rgb),0.2);
            border-radius: 4px;
        }
        #nodeEmojiPicker::-webkit-scrollbar-thumb:hover,
        .kuukan-emoji-popup::-webkit-scrollbar-thumb:hover,
        .ui-autocomplete-dropdown::-webkit-scrollbar-thumb:hover {
            background: rgba(var(--ui-accent-rgb),0.35);
        }
        .kuukan-emoji-popup .sticker-emoji-pick:hover {
            background: rgba(var(--ui-accent-rgb),0.15);
        }
        #nodeEmojiPicker .emoji-item:hover {
            background: rgba(var(--ui-accent-rgb),0.15);
        }
        /* Chat emoji picker - same style as nodeEmojiPicker */
        #chatEmojiPicker .chat-emoji-category {
            margin-bottom: 8px;
        }
        #chatEmojiPicker .chat-emoji-category-title {
            color: var(--ui-text-muted);
            font-size: 11px;
            margin-bottom: 4px;
            text-transform: uppercase;
        }
        #chatEmojiPicker .chat-emoji-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 2px;
        }
        #chatEmojiPicker .chat-emoji-item {
            font-size: 20px;
            padding: 4px;
            cursor: pointer;
            border-radius: 4px;
            transition: background 0.15s;
        }
        #chatEmojiPicker .chat-emoji-item:hover {
            background: #444;
        }
        /* Chat teleport links */
        .chat-teleport {
            display: inline-block;
            background: rgba(100, 60, 200, 0.3);
            border: 1px solid rgba(140, 100, 255, 0.4);
            color: #c0a0ff;
            padding: 2px 8px;
            border-radius: 12px;
            cursor: pointer;
            font-size: 11px;
            font-weight: 500;
            transition: background 0.15s, border-color 0.15s;
        }
        .chat-teleport:hover {
            background: rgba(130, 80, 255, 0.5);
            border-color: rgba(180, 140, 255, 0.6);
            color: #e0d0ff;
        }
        /* CommentBox emoji picker - same style as TextNode */
        .cb-emoji-picker {
            position: absolute;
            bottom: 100%;
            right: 0;
            background: var(--ui-surface-alt);
            border: 2px solid #555;
            border-radius: 8px;
            padding: 8px;
            max-width: 320px;
            max-height: 280px;
            overflow-y: auto;
            box-shadow: 0 4px 20px rgba(0,0,0,0.5);
        }
        .cb-emoji-category {
            margin-bottom: 8px;
        }
        .cb-emoji-category-title {
            color: var(--ui-text-muted);
            font-size: 11px;
            margin-bottom: 4px;
            text-transform: uppercase;
        }
        .cb-emoji-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 2px;
        }
        .cb-emoji-item {
            font-size: 20px;
            padding: 4px;
            cursor: pointer;
            border-radius: 4px;
            transition: background 0.15s;
        }
        .cb-emoji-item:hover {
            background: #444;
        }

        /* ========== FLOATING ACTION BUTTONS (CSS hover replaces inline JS) ========== */
        .floating-action-btn {
            position: fixed;
            border-radius: 50%;
            color: #fff;
            cursor: pointer;
            z-index: 999;
            box-shadow: 0 4px 20px rgba(0,0,0,0.4);
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px solid transparent;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        .floating-action-btn:hover {
            transform: scale(1.1);
        }
        .floating-action-btn:active {
            transform: scale(0.95);
        }
        .floating-action-btn--gold {
            bottom: 84px; left: 20px; width: 46px; height: 46px; font-size: 20px;
            background: linear-gradient(135deg, #8a6a2a, #aa8a3a);
            border-color: rgba(249,202,36,0.4);
        }
        .floating-action-btn--gold:hover {
            box-shadow: 0 6px 25px rgba(138,106,42,0.5);
        }
        .floating-action-btn--blue {
            bottom: 24px; left: 20px; width: 56px; height: 56px; font-size: 24px;
            background: linear-gradient(135deg, #2a6a8a, #3a8aaa);
            border-color: var(--ui-border-accent);
        }
        .floating-action-btn--blue:hover {
            box-shadow: 0 6px 25px rgba(var(--ui-primary-rgb),0.5);
        }

        /* ========== FLOATING ACTION CAROUSEL ========== */
        /* Single ball + side arrows that cycles communication modes
           (Messages / Shout / future). Replaces two separate floating
           buttons; modes are configured in modules/ActionCarousel.js. */
        .fac {
            position: fixed;
            bottom: 24px;
            left: 20px;
            z-index: 999;
            display: flex;
            align-items: center;
            gap: 8px;
            user-select: none;
        }
        .fac-main {
            width: 56px; height: 56px;
            border-radius: 50%;
            color: #fff;
            font-size: 24px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px solid transparent;
            background: linear-gradient(135deg, #2a6a8a, #3a8aaa);
            box-shadow: 0 4px 20px rgba(0,0,0,0.4);
            transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.3s ease;
            overflow: hidden;
            padding: 0;
        }
        .fac-main:hover { transform: scale(1.08); }
        .fac-main:active { transform: scale(0.94); }
        .fac-icon {
            display: inline-block;
            line-height: 1;
        }
        /* Ghost balls — small, faded previews of the prev/next mode.
           Doubles as click target so the user discovers the carousel
           passively (icon visible) and can switch modes by tapping. */
        .fac-ghost {
            width: 32px; height: 32px;
            border-radius: 50%;
            border: 1px solid transparent;
            background: linear-gradient(135deg, #2a6a8a, #3a8aaa);
            color: #fff;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            opacity: 0.45;
            box-shadow: 0 2px 8px rgba(0,0,0,0.25);
            transition: opacity 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
        }
        .fac-ghost:hover {
            opacity: 0.95;
            transform: scale(1.12);
            box-shadow: 0 3px 12px rgba(0,0,0,0.4);
        }
        .fac-ghost:active { transform: scale(0.92); }
        .fac-ghost-icon {
            font-size: 14px;
            line-height: 1;
            display: inline-block;
            filter: saturate(0.8);
        }
        /* Touch: ghost balls grow to the 44px target size (32px needs a stylus) */
        @media (pointer: coarse) {
            .fac-ghost { width: 44px; height: 44px; }
            .fac-ghost-icon { font-size: 18px; }
        }
        .fac-dots {
            position: absolute;
            bottom: -10px;
            left: 0;
            right: 0;
            display: flex;
            justify-content: center;
            gap: 4px;
            pointer-events: none;
        }
        .fac-dot {
            width: 4px; height: 4px;
            border-radius: 50%;
            background: rgba(255,255,255,0.25);
            transition: background 0.2s ease, transform 0.2s ease;
        }
        .fac-dot-active {
            background: rgba(255,255,255,0.85);
            transform: scale(1.3);
        }
        .fac-tooltip {
            position: absolute;
            left: calc(100% + 12px);
            top: 50%;
            transform: translateY(-50%) translateX(-4px);
            background: rgba(var(--ui-surface-rgb),0.92);
            color: #cfd8e0;
            font-size: 11px;
            padding: 4px 8px;
            border-radius: 4px;
            white-space: nowrap;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.15s ease, transform 0.15s ease;
            border: 2px solid var(--ui-border);
        }
        .fac:hover .fac-tooltip {
            opacity: 1;
            transform: translateY(-50%) translateX(0);
        }
        /* Unread state — pulse the ball when there are pending requests/messages */
        .fac.fac-unread .fac-main {
            animation: facUnreadPulse 1.4s ease-in-out infinite;
            border-color: #ff4757;
        }
        @keyframes facUnreadPulse {
            0%, 100% { box-shadow: 0 4px 20px rgba(255,71,87,0.45); }
            50%      { box-shadow: 0 4px 26px rgba(255,71,87,0.85); }
        }

        /* Voice-active indicator — small mic dot pinned to the main ball when
           the user is in voice chat. Visible no matter which carousel mode is
           shown so you can tell the mic is hot even with the chat panel closed.
           Anchored to .fac (not .fac-main which has overflow:hidden) and
           absolutely positioned to overlap the main ball's bottom-right. */
        /* Unread-notification count — pinned top-right of the main ball so
           "there is something new" is readable at map level with every panel
           closed (the pulse alone read as 'active', not 'news'). */
        .fac-unread-count {
            position: absolute;
            left: 44px; top: -4px;
            min-width: 20px; height: 20px;
            padding: 0 5px;
            border-radius: 10px;
            background: #ff6b35;
            color: #fff;
            border: 2px solid rgba(10, 16, 24, 0.9);
            display: none;
            align-items: center; justify-content: center;
            font-size: 11px; font-weight: 700;
            z-index: 2;
            pointer-events: auto;
            cursor: pointer;
            box-sizing: border-box;
        }
        .fac-unread-count:hover { transform: scale(1.12); }

        .fac-voice-indicator {
            position: absolute;
            left: 42px; bottom: -2px;
            width: 22px; height: 22px;
            border-radius: 50%;
            background: #2a8a4a;
            border: 2px solid #0f1320;
            display: none;
            align-items: center; justify-content: center;
            font-size: 12px;
            z-index: 2;
            pointer-events: none;
            box-shadow: 0 0 0 0 rgba(64,200,120,0.7);
        }
        .fac[data-voice-active="true"] .fac-voice-indicator {
            display: flex;
            animation: facVoicePulse 1.6s ease-in-out infinite;
        }
        @keyframes facVoicePulse {
            0%, 100% { box-shadow: 0 0 0 0 rgba(64,200,120,0.65); }
            50%      { box-shadow: 0 0 0 7px rgba(64,200,120,0); }
        }

        /* ========== CREATE FAB (mobile) ========== */
        #createFAB {
            position: fixed;
            bottom: calc(24px + env(safe-area-inset-bottom, 0px)); right: 20px;
            width: 56px; height: 56px;
            border-radius: 50%;
            background: linear-gradient(135deg, #1a5a6a, #2a8a9a);
            border: 2px solid var(--ui-border-accent);
            color: #fff;
            font-size: 28px;
            display: none;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: calc(var(--z-panel) + 1);
            box-shadow: 0 4px 24px rgba(0,0,0,0.5), 0 0 0 0 rgba(var(--ui-accent-rgb),0);
            transition: transform 0.25s ease, box-shadow 0.2s ease, background 0.2s ease;
            user-select: none;
            -webkit-tap-highlight-color: transparent;
        }
        #createFAB:active { transform: scale(0.92); }
        #createFAB.open {
            transform: rotate(45deg);
            background: linear-gradient(135deg, #6a2a2a, #9a3a3a);
            border-color: rgba(255, 120, 100, 0.35);
        }
        #createFAB .fab-plus { pointer-events: none; line-height: 1; }

        #fabBackdrop {
            position: fixed; inset: 0; z-index: var(--z-panel);
            background: rgba(0,0,0,0.3);
            opacity: 0; pointer-events: none;
            transition: opacity 0.2s ease;
        }
        #fabBackdrop.show { opacity: 1; pointer-events: auto; }

        #fabItemsRing {
            position: fixed;
            bottom: 90px; right: 20px;
            display: flex; flex-direction: column-reverse;
            gap: 10px;
            z-index: calc(var(--z-panel) + 1);
            opacity: 0;
            transform: translateY(16px);
            pointer-events: none;
            transition: opacity 0.2s ease, transform 0.2s ease;
        }
        #fabItemsRing.show {
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
        }
        .fab-item {
            display: flex; align-items: center; gap: 10px;
            background: rgba(var(--ui-surface-rgb), 0.95);
            backdrop-filter: blur(12px);
            border: 2px solid var(--ui-border-accent);
            border-radius: 28px;
            padding: 10px 16px 10px 12px;
            min-height: 44px; box-sizing: border-box;
            color: var(--ui-text-bright);
            font-size: 13px; font-weight: 600;
            font-family: 'Inter', sans-serif;
            cursor: pointer;
            box-shadow: 0 4px 16px rgba(0,0,0,0.4);
            transition: transform 0.15s ease, background 0.15s ease;
            white-space: nowrap;
            -webkit-tap-highlight-color: transparent;
        }
        .fab-item:active { transform: scale(0.95); background: rgba(var(--ui-primary-rgb), 0.95); }
        .fab-item-icon { font-size: 20px; width: 24px; text-align: center; }

        /* ========== DESKTOP QUICK-CREATE BAR (hidden — use right-click to create) ========== */
        #quickCreateBar {
            display: none;
            align-items: center;
            gap: 2px;
            margin-left: 2px;
        }
        #quickCreateBar .qc-btn {
            background: rgba(20, 40, 55, 0.6);
            border: 2px solid var(--ui-border);
            border-radius: 6px;
            padding: 4px 7px;
            font-size: 15px;
            cursor: pointer;
            transition: all 0.15s ease;
            line-height: 1;
            -webkit-tap-highlight-color: transparent;
        }
        #quickCreateBar .qc-btn:hover {
            background: rgba(var(--ui-primary-rgb), 0.7);
            border-color: var(--ui-border-accent);
            box-shadow: 0 2px 10px rgba(var(--ui-accent-rgb), 0.1);
        }
        #quickCreateBar .qc-btn:active { transform: scale(0.93); }
        #quickCreateBar .qc-more-toggle {
            font-size: 16px;
            font-weight: bold;
            color: rgba(var(--ui-text-rgb), 0.7);
            min-width: 28px;
            text-align: center;
        }
        #quickCreateBar .qc-overflow {
            display: none;
            gap: 2px;
            align-items: center;
            animation: qcSlideIn 0.15s ease;
        }
        #quickCreateBar .qc-overflow.show {
            display: flex;
        }
        @keyframes qcSlideIn {
            from { opacity: 0; transform: translateX(-6px); }
            to { opacity: 1; transform: translateX(0); }
        }

        /* ========== CLOSE BUTTON HOVER (subtle × buttons) ========== */
        .close-btn-subtle {
            position: absolute; top: 2px; right: 4px;
            background: none; border: none;
            color: rgba(var(--ui-text-rgb),0.35);
            font-size: 14px; cursor: pointer;
            padding: 2px 4px; line-height: 1;
            transition: color 0.15s, transform 0.15s;
        }
        .close-btn-subtle:hover {
            color: rgba(var(--ui-text-rgb),0.8);
            transform: scale(1.2);
        }

        /* Panel close buttons (messages, activity, etc.) */
        .panel-close-btn {
            background: none; border: none;
            color: var(--ui-text-muted); font-size: 16px;
            cursor: pointer; padding: 2px 6px;
            border-radius: 4px;
            transition: color 0.15s, background 0.15s;
        }
        .panel-close-btn:hover {
            color: #b2dcf0;
            background: rgba(var(--ui-accent-rgb), 0.12);
        }
        .panel-close-btn:active {
            transform: scale(0.9);
        }

        /* ========== BREADCRUMB NAVIGATION (replaces exit subspace button) ========== */
        .breadcrumb-nav {
            position: fixed; top: calc(var(--toolbar-height) + 8px); left: 18px;
            display: flex; align-items: center; gap: 0;
            background: rgba(12, 20, 30, 0.85);
            backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
            border: 2px solid var(--ui-border);
            border-radius: 8px;
            padding: 5px 10px;
            z-index: 100;
            box-shadow: 0 4px 16px rgba(0,0,0,0.3);
            font-family: 'Inter', sans-serif;
            font-size: 12px;
            max-width: calc(100vw - 36px);
            overflow-x: auto;
            scrollbar-width: none;
        }
        .breadcrumb-nav::-webkit-scrollbar { display: none; }
        .bc-item {
            color: rgba(var(--ui-text-rgb), 0.5);
            padding: 3px 6px;
            border-radius: 4px;
            cursor: pointer;
            white-space: nowrap;
            transition: color 0.15s, background 0.15s;
            text-decoration: none;
            border: none; background: none;
            font: inherit;
        }
        .bc-item:hover {
            color: rgba(var(--ui-text-rgb), 0.9);
            background: rgba(var(--ui-accent-rgb), 0.1);
        }
        .bc-item.bc-current {
            color: rgba(var(--ui-text-rgb), 0.85);
            font-weight: 600;
            cursor: default;
        }
        .bc-item.bc-current:hover { background: none; }
        .bc-sep {
            color: rgba(var(--ui-accent-rgb), 0.2);
            font-size: 10px;
            padding: 0 2px;
            user-select: none;
        }
        @media (max-width: 768px) {
            .breadcrumb-nav { top: calc(var(--toolbar-height) + 4px); left: 8px; max-width: calc(100vw - 16px); font-size: 11px; }
        }

        /* ========== DM BACK BUTTON ========== */
        .dm-back-btn {
            width: 32px; height: 32px;
            padding: 0;
            background: rgba(var(--ui-teal-rgb),0.10);
            border: 1px solid rgba(var(--ui-teal-rgb),0.25);
            border-radius: 50%;
            color: var(--ui-text-bright);
            font-size: 16px;
            font-weight: 600;
            line-height: 1;
            cursor: pointer;
            display: inline-flex; align-items: center; justify-content: center;
            transition: background 0.15s, transform 0.15s, border-color 0.15s;
        }
        .dm-back-btn:hover {
            background: rgba(var(--ui-teal-rgb),0.22);
            border-color: rgba(var(--ui-teal-rgb),0.5);
            transform: translateX(-1px);
        }
        .dm-back-btn:active { transform: translateX(-1px) scale(0.95); }

        /* ========== BOOKMARK ADD BUTTON ========== */

        /* ========== 3D CAPTURE BUTTON ========== */
        .capture-3d-btn {
            background: rgba(var(--ui-primary-rgb), 0.4);
            color: rgba(255, 255, 255, 0.75);
            border: 2px solid var(--ui-border);
            border-radius: 6px;
            padding: 5px 12px; font-size: 13px;
            cursor: pointer; white-space: nowrap;
            transition: all 0.15s ease;
        }
        .capture-3d-btn:hover {
            background: rgba(40, 80, 100, 0.6);
            border-color: var(--ui-border-accent);
            color: #fff;
        }
        .capture-3d-btn:active { transform: scale(0.97); }
        /* The amber Render button sets its background INLINE (resting amber / active
           Stop-red), which overrides the generic :hover background. A brightness filter
           brightens whatever colour it currently is, so the hover reads in BOTH states. */
        #pt-sidebar-render:hover { filter: brightness(1.4); }

        /* PT Tool Panel (amber variant of kuukan-panel--edit) */
        .kuukan-panel--pt {
            background: linear-gradient(135deg, #1a1408, #2a1e10);
            border-color: rgba(224,160,64,0.25);
            box-shadow: 0 8px 32px rgba(120,80,20,0.4);
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
            width: 240px;
            padding: 16px;
            z-index: calc(var(--z-lightbox) + 1);
            overflow-y: auto;
            max-height: 80vh;
        }
        #ptPropertiesPanel::-webkit-scrollbar { width: 4px; }
        #ptPropertiesPanel::-webkit-scrollbar-track { background: transparent; }
        #ptPropertiesPanel::-webkit-scrollbar-thumb { background: rgba(224,160,64,0.2); border-radius: 2px; }
        #ptPropertiesPanel::-webkit-scrollbar-thumb:hover { background: rgba(224,160,64,0.4); }
        #ptPropertiesPanel { scrollbar-width: thin; scrollbar-color: rgba(224,160,64,0.2) transparent; }
        #ptPropertiesPanel input[type="range"] { height: 4px; }

        /* 3D viewer bottom toolbar + advanced (rt) panel — geometry lives
           here; the rt panel's display stays inline because RenderLoop reads
           style.display to know whether the panel is open. */
        #3d-bottom-toolbar {
            position: absolute;
            bottom: 12px;
            left: 50%;
            transform: translateX(-50%);
            z-index: calc(var(--z-lightbox) + 1);
            overflow: visible;
        }
        #3d-bottom-toolbar > div:first-child {
            background: rgba(0,0,0,0.6);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            padding: 8px 16px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        #object-rotation-slider { width: 200px; cursor: pointer; }
        #rt-settings-panel {
            position: absolute;
            top: calc(100% + 4px);
            left: 0;
            right: 0;
            background: rgba(0,0,0,0.6);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            padding: 10px 16px;
            border-radius: 8px;
            font-size: 11px;
        }
        #rt-settings-panel input[type="range"] { width: 70px; cursor: pointer; }
        #rt-settings-panel input[type="color"] {
            width: 22px;
            height: 18px;
            padding: 0;
            border: 1px solid rgba(255,255,255,0.2);
            border-radius: 3px;
            background: none;
            cursor: pointer;
        }
        #fullscreen-video {
            display: block;
            max-width: 90vw;
            max-height: 80vh;
            border-radius: 4px;
        }

        /* Tool-panel identity accents — these fullscreen overlays keep their
           own hue regardless of theme (grade panel purple, path-tracer amber,
           r128-viewer blue). Everything else inherits the theme accent from
           the global accent-color rule (ui-theme.css). */
        #imageEditPanel input { accent-color: #9a8ac0; }
        #ptPropertiesPanel input { accent-color: #e0a040; }
        #rt-settings-panel input { accent-color: #4ea8de; }

        /* ========== BURGER DROPDOWN ========== */
        #desktopBurgerDropdown {
            display: none;
            position: absolute;
            right: 0;
            top: calc(100% + 4px);
            min-width: 200px;
            background: rgba(var(--ui-surface-rgb), 0.97);
            border: 2px solid var(--ui-border);
            border-radius: 10px;
            padding: 6px 0;
            z-index: var(--z-nav);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(12px);
            transform-origin: top right;
        }
        #desktopBurgerDropdown.open {
            display: block;
            animation: burgerDropdownIn 0.15s ease-out forwards;
        }
        #desktopBurgerDropdown.closing {
            animation: burgerDropdownOut 0.12s ease-in forwards;
        }

        /* ========== KUUKAN UNIFIED MODAL SYSTEM ========== */
        
        /* Fullscreen overlay base */
        .kuukan-overlay {
            display: none;
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background: rgba(0,0,0,0.7);
            justify-content: center;
            align-items: center;
            /* Above the GameZone stack (diorama 2100 / game bar 2200 / rules
               panel 2300) — a modal prompt must never sink behind a game. */
            z-index: var(--z-modal);
        }
        /* Overlay backdrop blur variant (utility dialogs) */
        .kuukan-overlay--blur {
            background: rgba(0,0,0,0.5);
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
        }

        /* Centered dialog content box */
        /* ONE surface recipe for every modal/panel shell — dialogs,
           floating panels and the auth container previously each carried a
           private copy (and .kuukan-dialog's background was a hardcoded
           navy that ignored themes). Each class below adds geometry only. */
        .kuukan-dialog, .kuukan-panel, .authContainer {
            background: rgba(var(--ui-surface-rgb), 0.95);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 2px solid var(--ui-border);
            border-radius: 12px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.5);
        }
        .kuukan-dialog {
            padding: 24px;
            width: 90%;
            max-width: 400px;
            animation: modalContentIn 0.25s ease;
        }
        /* Dialog size variants */
        .kuukan-dialog--sm  { max-width: 380px; }
        .kuukan-dialog--md  { max-width: 450px; }
        .kuukan-dialog--lg  { max-width: 520px; }
        .kuukan-dialog--xl  { max-width: 600px; }
        /* Scrollable dialog */
        .kuukan-dialog--scroll {
            max-height: 80vh;
            overflow-y: auto;
        }
        /* Theme: Purple (admin) */
        .kuukan-dialog--purple {
            background: rgba(22,14,32,0.92);
            border-color: rgba(200,100,255,0.15);
        }
        /* Theme: Green (confirm/prompt) */
        .kuukan-dialog--green {
            background: linear-gradient(135deg, #0a1210, #121e18);
            border-color: rgba(160,201,8,0.3);
            box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 40px rgba(160,201,8,0.1);
        }
        /* Theme: Cyan (AI) */
        .kuukan-dialog--cyan {
            background: linear-gradient(135deg, #0a1220, #142030);
            border-color: var(--ui-border-accent);
            box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 40px rgba(var(--ui-accent-rgb),0.1);
        }

        /* Fullscreen media viewer */
        .kuukan-viewer {
            display: none;
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background: rgba(0,0,0,0.95);
            justify-content: center;
            align-items: center;
        }
        .kuukan-viewer.active {
            display: flex;
            animation: modalFadeIn 0.2s ease;
        }
        .kuukan-viewer.show {
            display: flex;
            animation: modalFadeIn 0.2s ease;
        }

        /* Floating panel */
        .kuukan-panel {
            display: none;
            position: fixed;
            z-index: calc(var(--z-panel) + 1);
            font-family: 'Inter', sans-serif;
        }
        /* Panel theme: Gold (shout) */
        .kuukan-panel--gold {
            background: rgba(25,22,15,0.95);
            border-color: rgba(249,202,36,0.3);
            z-index: 999;
        }
        /* Panel theme: Purple (bookmarks) */
        /* Panel variant: Edit panel (grade/image effects) */
        .kuukan-panel--edit {
            background: linear-gradient(135deg, #1a1a2a, #2a2a4a);
            border-color: #5a4a8a;
            box-shadow: 0 8px 32px rgba(80,40,120,0.4);
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
            width: 240px;
            padding: 16px;
        }

        /* ========== END KUUKAN MODAL SYSTEM ========== */

        #imageViewer {
            z-index: var(--z-nav);
        }
        #imageViewer.active {
            display: flex;
            animation: modalFadeIn 0.2s ease;
        }
        #imageViewer img {
            max-width: 90%;
            max-height: 90%;
            border-radius: 8px;
            user-select: none;
            -webkit-user-select: none;
            pointer-events: none;
        }
        #imageViewer .close {
            position: absolute;
            top: 20px;
            right: 20px;
            color: var(--ui-text);
            font-size: 32px;
            cursor: pointer;
            user-select: none;
            pointer-events: auto;
        }
        #imageViewer .close:hover {
            color: #ffff00;
        }
        #object3dViewer {
            z-index: var(--z-org-modal);
        }
        #object3dViewer.active {
            display: flex;
            animation: modalFadeIn 0.2s ease;
        }
        #object3dViewer .close {
            position: absolute;
            top: 20px;
            right: 20px;
            color: var(--ui-text);
            font-size: 32px;
            cursor: pointer;
            user-select: none;
            pointer-events: auto;
        }
        #object3dViewer .close:hover {
            color: #ffff00;
        }
        #threeContainer {
            width: 80vw;
            height: 80vh;
            background: #222;
            border-radius: 12px;
            box-shadow: 0 0 32px #000;
        }
        /* 3D Object Viewer Modal */
        #modal-3d {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 690px;
            height: 690px;
            background: linear-gradient(180deg, #3b3b3b 0%, #0d0d0d 100%);
            z-index: var(--z-lightbox);
            overflow: visible;
            border-radius: 12px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
            border: 2px solid var(--ui-border);
        }
        #modal-3d.show {
            display: block;
            animation: modalContentIn 0.25s ease;
        }
        #modal-3d-content {
            width: 100%;
            height: 100%;
            background: transparent;
            overflow: hidden;
            display: block;
            position: relative;
            top: 0;
            left: 0;
        }
        
        /* Mobile responsive styles */
        /* Empty-state hint pair: desktop text by default, swapped on mobile
           by the media block below. */
        .mobile-hint { display: none; }

        @media (max-width: 768px) {
            /* Show hamburger, hide most toolbar items. Plain overrides win by
               source order over the base rules earlier in this file. */
            #hamburgerBtn { display: flex; align-items: center; }

            /* Toolbar: only show logo, essential buttons, hamburger.
               Toolbar stays above the open mobile menu (hamburger close). */
            #ui { padding: 6px 10px; z-index: calc(var(--z-nav) + 1); }
            .toolbar-container {
                flex-wrap: nowrap;
                gap: 4px;
            }
            .toolbar-logo { margin-right: 6px; }
            .toolbar-logo img { height: 26px; }
            .toolbar-divider { display: none; }

            /* Hide most toolbar buttons - they go in hamburger menu.
               !important is doing real work here: admin-mode JS reveals some
               of these with element.style.display = 'inline-block', and
               mobile must win over that app state. */
            #searchBtn, #shareToggleBtn, #snapGridBtn, #helpBtn,
            #itemsBtn, #toggle3DBtn, #adminModeBtn, #adminPanelBtn,
            #downloadBtn, .toolbar-right, #quickCreateBar { display: none !important; }

            /* Show mobile create FAB (no !important — JS may still hide it
               with display:none in read-only spaces, and that must win) */
            #createFAB { display: flex; }

            /* Desktop burger hidden on mobile (mobile menu takes over) */
            #desktopBurgerWrap { display: none; }

            /* Keep: globalSpaceBtn visible */
            #globalSpaceBtn {
                padding: 6px 8px;
            }

            #placeHint { display: none; }

            /* Toggle mobile/desktop hints in empty state */
            .desktop-hint { display: none; }
            .mobile-hint { display: inline-block; }

            #nodeInput {
                width: 200px;
                font-size: 14px;
            }

            /* 3D Modal - full screen on mobile */
            #modal-3d {
                width: 95vw;
                height: 80vh;
                max-width: none;
                border-radius: 8px;
            }
            /* 3D toolbar - compact for tablet */
            #3d-bottom-toolbar {
                max-width: 95%;
            }
            #3d-bottom-toolbar > div:first-child {
                padding: 6px 10px;
                gap: 6px;
            }
            #object-rotation-slider {
                width: 120px;
            }
            #rt-settings-panel {
                padding: 8px 10px;
            }

            /* Video modal - better sizing */
            #fullscreen-video {
                max-width: 95vw;
                max-height: 70vh;
            }
            #video-close-btn {
                font-size: 12px;
                padding: 4px 8px;
            }
        }
        
        /* Extra small screens (phones) */
        @media (max-width: 480px) {
            #modal-3d {
                width: 100vw;
                height: 70vh;
                border-radius: 0;
                top: auto;
                bottom: 0;
                transform: translate(-50%, 0);
            }
            /* Toolbar: compact single row */
            #3d-bottom-toolbar {
                width: calc(100% - 16px);
                max-width: none;
                bottom: 6px;
                left: 8px;
                transform: none;
            }
            #3d-bottom-toolbar > div:first-child {
                padding: 5px 8px;
                gap: 4px;
                flex-wrap: wrap;
                justify-content: center;
            }
            #object-rotation-slider {
                width: 80px;
            }
            #3d-bottom-toolbar .capture-3d-btn {
                padding: 3px 6px;
                font-size: 10px;
            }
            #3d-bottom-toolbar span[style*="color:var(--ui-text-muted)"] {
                display: none;
            }
            #3d-bottom-toolbar span[style*="color:#444"] {
                display: none;
            }
            #rotation-value {
                display: none;
            }
            /* Flip advanced panel to open ABOVE toolbar on phones */
            #rt-settings-panel {
                top: auto;
                bottom: calc(100% + 4px);
                padding: 8px 10px;
                max-height: 40vh;
                overflow-y: auto;
            }
            #rt-settings-panel input[type="range"] {
                width: 65px;
            }
            #rt-settings-panel input[type="color"] {
                width: 20px;
                height: 16px;
            }
            .capture-3d-btn {
                padding: 4px 8px;
                font-size: 11px;
            }

            #fullscreen-video {
                max-height: 60vh;
            }
        }
        
        /* Messages panel — CSS is the single owner of the geometry; JS only
           flips display + the .open class (revealNodeCommentsPanel /
           hideNodeCommentsPanel). Desktop: left drawer that slides in,
           anchored below the toolbar with room at the bottom for the
           action carousel + its badges. Mobile: bottom sheet, half screen. */
        #nodeCommentsPanel {
            top: 130px;
            bottom: 140px;
            left: -460px;
            width: 440px;
            max-width: calc(100vw - 40px);
            border-radius: 12px;
            z-index: calc(var(--z-panel) - 1);
            transition: left 0.3s ease;
        }
        #nodeCommentsPanel.open { left: 20px; }
        @media (max-width: 768px) {
            #nodeCommentsPanel {
                top: auto;
                bottom: 0;
                left: -100vw;
                width: 100%;
                max-width: 100%;
                height: 50vh;
                max-height: 50vh;
                border-radius: 12px 12px 0 0;
                padding-bottom: env(safe-area-inset-bottom, 0px); /* clear iOS home indicator */
            }
            #nodeCommentsPanel.open { left: 0; }
        }

        /* Floating overlays — geometry lives here; the display state stays
           inline because JS toggles (and for the notifications panel, reads)
           element.style.display. */
        #usersInSpace {
            position: absolute;
            top: 60px;
            right: 18px;
            z-index: 100; /* under every floating panel, above the canvas */
            background: rgba(var(--ui-surface-rgb), 0.88);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            border: 2px solid var(--ui-border);
            border-radius: 10px;
            padding: 10px 12px;
            font-family: 'Inter', sans-serif;
            max-height: 320px;
            overflow-y: auto;
            min-width: 200px;
            max-width: 260px;
            box-shadow: 0 6px 28px rgba(0, 0, 0, 0.38);
        }
        #floatingChatBadge {
            position: fixed;
            bottom: 66px;
            left: 96px;
            min-width: 20px;
            height: 20px;
            background: #ff4757;
            border-radius: 10px;
            color: #fff;
            font-size: 10px;
            font-weight: bold;
            align-items: center;
            justify-content: center;
            padding: 0 5px;
            z-index: var(--z-panel);
            border: 2px solid rgba(var(--ui-surface-rgb), 0.9);
            pointer-events: none;
            animation: badgePulse 2s ease-in-out infinite;
        }
        #notificationsPanel {
            position: fixed;
            bottom: 96px;
            left: 20px;
            width: 320px;
            max-height: 420px;
            background: rgba(var(--ui-surface-rgb), 0.97);
            border: 2px solid var(--ui-border);
            border-radius: 12px;
            z-index: calc(var(--z-panel) - 2);
            overflow: hidden;
            flex-direction: column;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
        }

        /* Mobile only - floating overlay positions */
        @media (max-width: 768px) {
            #usersInSpace {
                top: 60px;
                right: 10px;
                max-height: 120px;
            }

            #floatingActionCarousel {
                /* Lift clear of the Android gesture/nav strip + iOS home indicator,
                   otherwise the bottom of the ball sits in the OS-intercepted zone
                   and is very hard to tap. */
                bottom: calc(16px + env(safe-area-inset-bottom, 0px));
                left: 10px;
            }
            /* Mobile: chat panel covers bottom half — hide carousel + FAB so
               nothing overlaps the Send button. */
            body.chat-panel-open #floatingActionCarousel,
            body.chat-panel-open #createFAB {
                display: none;
            }

            #floatingChatBadge {
                bottom: 56px;
                left: 86px;
            }
            #notificationsPanel {
                left: 10px;
                width: calc(100vw - 20px);
            }
        }
        
        /* Image and Video Viewer Modals */
        #modal-image.show,
        #modal-video.show {
            display: flex;
            animation: modalFadeIn 0.2s ease;
        }
        
        /* Hide Chrome's picture-in-picture and other overlay buttons on video */
        video::-webkit-media-controls-overlay-enclosure,
        video::-webkit-media-controls-enclosure {
            overflow: hidden;
        }
        video::-webkit-media-controls-panel {
            width: calc(100% + 30px); /* Hides overflow buttons */
        }
        /* Firefox */
        video::-moz-media-controls {
            overflow: hidden;
        }
        
        /* Avatar Picker Modal */
        #avatarPickerModal {
            z-index: calc(var(--z-lightbox) - 1);
            background: rgba(0, 0, 0, 0.8);
        }
        #avatarPickerModal.active {
            display: flex;
            animation: modalFadeIn 0.2s ease;
        }
        #avatarPickerModal.active > div {
            animation: modalContentIn 0.25s ease;
        }
        #avatarPickerModal ::-webkit-scrollbar { width: 6px; }
        #avatarPickerModal ::-webkit-scrollbar-track { background: rgba(var(--ui-surface-rgb), 0.4); border-radius: 3px; }
        #avatarPickerModal ::-webkit-scrollbar-thumb { background: rgba(var(--ui-accent-rgb), 0.3); border-radius: 3px; }
        #avatarPickerModal ::-webkit-scrollbar-thumb:hover { background: rgba(var(--ui-accent-rgb), 0.5); }
        #avatarPickerModal * { scrollbar-width: thin; scrollbar-color: rgba(var(--ui-accent-rgb), 0.3) rgba(var(--ui-surface-rgb), 0.4); }

        /* Match the rest of Kuukan: buttons inside User Settings brighten on hover.
           Inline styles dominate, so we go via filter (which always wins for contrast). */
        #avatarPickerModal button { transition: filter 0.15s ease, transform 0.1s ease; }
        #avatarPickerModal button:not(:disabled):hover { filter: brightness(1.2); }
        #avatarPickerModal button:not(:disabled):active { transform: scale(0.97); }

        /* Plan cards on Plans page — make the whole card feel interactive when there's an Upgrade button.
           Inline styles always win over CSS rules, so we hover via `filter` which is independent. */
        .plan-card { transition: filter 0.15s ease, transform 0.15s ease; }
        .plan-card:has([data-plan-action]) { cursor: pointer; }
        .plan-card:has([data-plan-action]):hover { filter: brightness(1.3); transform: translateY(-1px); }

        /* Credit packs */
        .credit-pack { transition: filter 0.15s ease, transform 0.15s ease; }
        .credit-pack:hover { filter: brightness(1.3); transform: translateY(-1px); }

        /* Login/Register Modal */
        #authModal {
            z-index: var(--z-modal);
            background: rgba(0, 0, 0, 0.8);
        }
        #authModal.active,
        #forgotPasswordModal.active,
        #resetPasswordModal.active {
            display: flex;
            animation: modalFadeIn 0.2s ease;
        }
        /* ═══ Landing Page ═══ */
        #landingPage {
            position: fixed; inset: 0; z-index: var(--z-modal-2);
            background: linear-gradient(180deg, #0e2a2c 0%, #050505 100%);
            font-family: 'Inter', sans-serif;
            overflow-y: auto;
            overflow-x: hidden; /* tilted quips hang outside the hero wrapper */
            scroll-behavior: smooth;
            /* Offset anchor jumps so the target doesn't slide under the sticky nav */
            scroll-padding-top: 80px;
            /* Custom scrollbar — teal-tinted, thin, matches Kuukan theme */
            scrollbar-width: thin;
            scrollbar-color: rgba(var(--ui-teal-rgb),0.35) rgba(15,25,32,0.4);
            /* Mobile-friendly snap: swipes settle at section starts. Desktop
               wheel uses a JS handler that jumps section-by-section. */
            /* scroll-snap removed — JS section-snap handler manages wheel/swipe
               and CSS snap was tugging against programmatic scrollTo */
        }
        #landingPage::-webkit-scrollbar { width: 10px; }
        #landingPage::-webkit-scrollbar-track {
            background: rgba(15,25,32,0.4);
        }
        #landingPage::-webkit-scrollbar-thumb {
            background: rgba(var(--ui-teal-rgb),0.3);
            border-radius: 6px;
            border: 2px solid rgba(15,25,32,0.5);
        }
        #landingPage::-webkit-scrollbar-thumb:hover {
            background: rgba(var(--ui-teal-rgb),0.55);
        }
        /* Ambient portal canvas — same shader as Kuukan, a few orbs drifting
           in the background. Constrained to the hero viewport so they feel
           like accents rather than wallpaper. */
        .lp-portals-canvas {
            position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
            pointer-events: none;
            opacity: 0.45;
            z-index: 0;
        }
        /* Grid overlay — rounded squares like the canvas grid */
        .lp-grid {
            position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Crect x='0' y='0' width='60' height='60' rx='16' ry='16' fill='none' stroke='rgba(22,110,110,0.55)' stroke-width='1'/%3E%3C/svg%3E");
            background-size: 60px 60px;
            mask-image: radial-gradient(ellipse at 50% 40%, rgba(0,0,0,0.8) 0%, transparent 60%);
            -webkit-mask-image: radial-gradient(ellipse at 50% 40%, rgba(0,0,0,0.8) 0%, transparent 60%);
            pointer-events: none;
            z-index: 0;
        }
        /* Sticky top nav */
        .lp-nav {
            position: sticky; top: 0;
            display: flex; align-items: center; justify-content: space-between;
            padding: 12px 28px;
            background: rgba(10,22,28,0.7);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border-bottom: 1px solid var(--ui-border-faint);
            z-index: 10;
        }
        .lp-nav-brand {
            display: flex; align-items: center; gap: 10px;
            color: var(--ui-text); font-weight: 600; font-size: 16px;
            cursor: pointer; text-decoration: none;
        }
        .lp-nav-brand img { height: 28px; width: auto; }
        .lp-nav-anchors { display: flex; gap: 28px; }
        .lp-nav-anchors a {
            color: rgba(var(--ui-text-rgb),0.65);
            text-decoration: none;
            font-size: 13px;
            font-weight: 500;
            transition: color 0.15s;
        }
        .lp-nav-anchors a:hover { color: var(--ui-text-bright); }
        .lp-nav-cta { display: flex; gap: 10px; align-items: center; }
        .lp-nav-btn {
            padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 600;
            cursor: pointer; font-family: 'Inter', sans-serif;
            transition: filter 0.15s ease, background 0.15s ease, border-color 0.15s ease;
        }
        .lp-nav-btn-ghost {
            background: transparent;
            color: rgba(var(--ui-text-rgb),0.85);
            border: 2px solid var(--ui-border-accent);
        }
        .lp-nav-btn-ghost:hover { background: rgba(var(--ui-accent-rgb),0.06); color: var(--ui-text-bright); }
        .lp-nav-btn-primary {
            background: linear-gradient(135deg, rgba(var(--ui-primary-rgb),0.9), rgba(20,70,90,1));
            color: var(--ui-text-bright);
            border: 2px solid var(--ui-border-accent);
        }
        .lp-nav-btn-primary:hover { filter: brightness(1.2); }
        @media (max-width: 768px) {
            /* Nav fixed so it doesn't scroll away */
            .lp-nav {
                position: fixed; top: 0; left: 0; right: 0;
                padding: 10px 16px;
            }
            .lp-nav-anchors { display: none; }
            .lp-nav-btn { padding: 7px 12px; font-size: 12px; }
            .lp-nav-brand span { display: none; }

            /* Vertical snap — sections scroll downward one at a time */
            #landingPage {
                scroll-snap-type: y mandatory;
                scroll-behavior: auto;
                scroll-padding-top: 0;
                scrollbar-width: none;
            }
            #landingPage::-webkit-scrollbar { display: none; }

            /* border-box so padding doesn't add to width — fixes horizontal overflow */
            .lp-content { padding: 0 20px; box-sizing: border-box; }

            /* Each section fills the screen and snaps into place */
            .lp-section {
                scroll-snap-align: start;
                min-height: 100vh; min-height: 100dvh;
                padding: 58px 0 16px;
                box-sizing: border-box;
                display: flex; flex-direction: column; justify-content: center;
                scroll-margin-top: 0;
            }
            .lp-section:first-of-type { padding-top: 58px; }

            /* Section dots — right-side progress indicator */
            .lp-dots { display: flex; }

            /* Compact sizing for portrait */
            .lp-logo { max-width: 220px; }
            .lp-tagline { font-size: 18px; }
            .lp-subtagline { font-size: 14px; }
            .lp-hero { margin-bottom: 12px; }
            .lp-hero-card { padding: 28px 20px 24px; border-radius: 18px; }

            .lp-section h2 { font-size: 19px; margin-bottom: 8px; }
            .lp-section-label { font-size: 10px; margin-bottom: 8px; }
            .lp-section-body { font-size: 13px; margin-bottom: 12px; }

            .lp-actions { margin-bottom: 10px; gap: 8px; }
            .lp-btn { padding: 11px 20px; font-size: 13px; }

            .lp-features { gap: 8px; margin-bottom: 12px; }
            .lp-feature { padding: 12px 10px; }

            .lp-usecases-split { gap: 10px; }
            .lp-uc-card { padding: 18px 16px; }
            .lp-uc-icon { width: 50px; height: 50px; margin-bottom: 10px; }
            .lp-uc-label { font-size: 10.5px; margin-bottom: 12px; letter-spacing: 1.6px; }
            .lp-uc-badges { gap: 6px; margin-bottom: 14px; }
            .lp-uc-badge { padding: 5px 10px; font-size: 11.5px; }
            .lp-uc-tagline { font-size: 12.5px; margin-bottom: 12px; }

            .lp-teams-checklist { margin: 10px 0 14px; }
            .lp-teams-checklist li { font-size: 13px; padding: 4px 0; }
            .lp-teams-mockup { padding: 14px; }
        }

        /* Dots — hidden on desktop, shown on mobile via media query above */
        .lp-dots {
            display: none;
            position: fixed; right: 10px; top: 50%; transform: translateY(-50%);
            flex-direction: column; gap: 7px; z-index: 15;
            pointer-events: none;
        }
        .lp-dot {
            width: 6px; height: 6px; border-radius: 50%;
            background: rgba(var(--ui-text-rgb),0.25);
            transition: background 0.25s, transform 0.25s;
        }
        .lp-dot.active {
            background: rgba(var(--ui-teal-rgb),0.9);
            transform: scale(1.4);
        }
        .lp-content {
            position: relative; z-index: 1;
            max-width: 720px; width: 100%; margin: 0 auto;
            padding: 0 24px 32px;
            text-align: center;
        }
        /* Section rhythm — generous breathing room between sections gives
           the page the "scroll-y modern landing" feel instead of crammed.
           scroll-margin-top ensures anchor jumps don't land under the nav. */
        .lp-section {
            padding: 60px 0 40px;
            scroll-margin-top: 80px;
        }
        .lp-section:first-of-type { padding-top: 80px; }
        .lp-scroll-hint {
            position: relative; z-index: 1;
            margin-top: 32px;
            display: flex; justify-content: center;
            color: rgba(255,255,255,0.28);
            cursor: pointer;
            animation: lpScrollBounce 2.2s ease-in-out infinite;
        }
        .lp-scroll-hint:hover { color: rgba(255,255,255,0.55); }
        @keyframes lpScrollBounce {
            0%, 100% { transform: translateY(0); opacity: 0.28; }
            50%       { transform: translateY(9px); opacity: 0.55; }
        }
        .lp-section-label {
            color: rgba(var(--ui-teal-rgb),0.85);
            font-size: 11px; font-weight: 600;
            letter-spacing: 2px; text-transform: uppercase;
            margin-bottom: 12px;
        }
        .lp-section h2 {
            color: var(--ui-text); font-size: 26px; font-weight: 600;
            margin: 0 0 14px; line-height: 1.25;
        }
        .lp-section-body {
            color: rgba(var(--ui-text-rgb),0.7);
            font-size: 15px; line-height: 1.6;
            max-width: 540px; margin: 0 auto 24px;
        }
        .lp-hero { margin-bottom: 28px; }
        /* Shared wrapper — guarantees hero card and preview are identical width */
        .lp-hero-wrapper {
            width: 100%;
            max-width: 620px;
            margin: 0 auto;
        }
        /* Frosted hero card — wraps logo + taglines + action buttons. Same
           glass treatment as the other landing cards but with extra padding
           and a soft outer teal halo to feel "premium" rather than boxed in. */
        .lp-hero-card {
            position: relative;
            width: 100%;
            max-width: 620px;
            margin-left: auto;
            margin-right: auto;
            box-sizing: border-box;
            padding: 48px 40px 36px;
            border-radius: 24px;
            background: rgba(15,25,32,0.5);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            border: 2px solid var(--ui-border);
            box-shadow:
                0 24px 80px rgba(0, 0, 0, 0.45),
                0 0 80px rgba(var(--ui-teal-rgb), 0.12);
        }
        .lp-logo {
            display: block;
            max-width: 360px;
            width: 100%;
            height: auto;
            margin: 0 auto 12px;
        }
        .lp-tagline {
            font-size: 19px; color: rgba(220,240,255,0.9);
            margin: 0; font-weight: 500; letter-spacing: 0.2px;
        }
        .lp-subtagline {
            /* This line IS the promise now — it carries the pitch, so it
               reads as a statement, not a caption. */
            font-size: 17px; color: rgba(205,235,250,0.88);
            margin: 10px 0 0; font-weight: 500; line-height: 1.45;
        }
        /* Rotating self-ironic one-liner — a tilted handwritten "quote"
           pinned to the viewport edges, so it rides along as you scroll and
           nobody mistakes it for the pitch. JS swaps text + slot class on a
           fade cycle. Mobile: no side margins to haunt → a small tilted
           stamp at the bottom of the screen instead. */
        .lp-quip {
            position: fixed;
            left: 50%;
            bottom: 14px;
            transform: translateX(-50%) rotate(-4deg);
            z-index: 5; /* over section content, under the sticky nav (10) */
            font-family: 'Klee One', 'Comic Sans MS', cursive;
            font-size: 19px;
            line-height: 1.35;
            color: rgba(150, 210, 235, 0.55);
            text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
            pointer-events: none;
            user-select: none;
            opacity: 0;
            transition: opacity 0.9s ease;
            text-align: center;
            max-width: 80vw;
        }
        /* Guest ambience on the map — the same handwriting as the landing
           quips, pinned to viewport edges (the map has no content column to
           hug). Shown by modules/GuestQuips.js, slowly, guests only. */
        .guest-quip {
            position: fixed;
            z-index: 900; /* under every floating panel and HUD element */
            font-family: 'Klee One', 'Comic Sans MS', cursive;
            font-size: 19px;
            line-height: 1.35;
            color: rgba(150, 210, 235, 0.5);
            text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
            pointer-events: none;
            user-select: none;
            opacity: 0;
            transition: opacity 1.2s ease;
            max-width: 220px;
        }
        .guest-quip.guest-quip-a { top: 18vh; left: 26px;  text-align: left;  transform: rotate(-7deg); }
        .guest-quip.guest-quip-b { top: 22vh; right: 26px; text-align: right; transform: rotate(6deg); }
        .guest-quip.guest-quip-c { top: 64vh; left: 30px;  text-align: left;  transform: rotate(5deg); }
        .guest-quip.guest-quip-d { top: 60vh; right: 30px; text-align: right; transform: rotate(-6deg); }

        /* The avatar delivering the line — upright and a notch bigger than
           the handwriting, like a sticker next to a scribble. Shared by the
           landing quips and the guest-map quips. */
        .lp-quip-speaker {
            font-style: normal;
            font-size: 26px;
            vertical-align: -5px;
            margin-right: 2px;
        }

        /* Screens without true side margins fit only the bottom stamp */
        @media (max-width: 1179px) {
            .lp-quip-extra { display: none; }
        }
        @media (min-width: 1180px) {
            .lp-quip {
                left: auto;
                bottom: auto;
                max-width: 200px;
            }
            /* Horizontal anchor is the CONTENT column, not the viewport
               edge: left slots pin their right edge outside the widest
               landing column (.lp-content 720px → half 360px + gap), right
               slots mirror. Vertical stays in vh so the quotes ride along
               with scrolling — and never reach over the content. */
            .lp-quip.lp-quip-a { top: 16vh; right: calc(50% + 390px); left: auto; text-align: right; transform: rotate(-8deg); }
            .lp-quip.lp-quip-b { top: 44vh; right: calc(50% + 415px); left: auto; text-align: right; transform: rotate(5deg); }
            .lp-quip.lp-quip-c { top: 18vh; left: calc(50% + 390px); right: auto; text-align: left; transform: rotate(7deg); }
            .lp-quip.lp-quip-d { top: 46vh; left: calc(50% + 415px); right: auto; text-align: left; transform: rotate(-6deg); }
            .lp-quip.lp-quip-e { top: 72vh; right: calc(50% + 395px); left: auto; text-align: right; transform: rotate(-5deg); }
            .lp-quip.lp-quip-f { top: 74vh; left: calc(50% + 395px); right: auto; text-align: left; transform: rotate(8deg); }
        }
        .lp-features {
            display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
            margin-bottom: 32px;
        }
        /* Preview card — rotating screenshots with subtle pan (Ken Burns).
           Five images crossfade every ~5.5s. Hover pauses both fade and pan
           so the user can pause to look. Pure decoration: no click action. */
        .lp-preview {
            position: relative;
            width: 100%;
            max-width: 620px;
            margin: 12px auto 0;
            box-sizing: border-box;
            aspect-ratio: 16 / 8;
            border-radius: 14px;
            overflow: hidden;
            border: 2px solid var(--ui-border);
            box-shadow: 0 24px 60px rgba(0,0,0,0.5);
            background: rgba(15,25,32,0.5);
            transition: border-color 0.25s ease, box-shadow 0.25s ease;
        }
        .lp-preview:hover {
            border-color: rgba(var(--ui-teal-rgb),0.55);
            box-shadow: 0 14px 40px rgba(var(--ui-teal-rgb),0.32);
        }
        .lp-preview-img {
            position: absolute;
            inset: 0;
            background-size: 160%;
            background-repeat: no-repeat;
            background-position-x: 0%;
            background-position-y: 35%;
            opacity: 0;
            transition: opacity 2.8s ease-in-out;
            animation: lpPan 20s linear infinite alternate;
        }
        .lp-preview-img.active { opacity: 1; }
        .lp-preview:hover .lp-preview-img { animation-play-state: paused; }
        @keyframes lpPan {
            from { background-position-x: 0%; }
            to   { background-position-x: 100%; }
        }
        /* Two-card split: Professional / Casual. Each card lists its use cases
           as pill badges. Pro card uses brand teal accent, Casual uses warm
           tan/amber for visual contrast. Whole card is a single link to an
           example space. */
        .lp-usecases-split {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
            margin-bottom: 8px;
        }
        @media (max-width: 720px) {
            .lp-usecases-split { grid-template-columns: 1fr; }
        }
        .lp-uc-card {
            background: rgba(25,35,50,0.42);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            border: 2px solid var(--ui-border-faint);
            border-radius: 16px;
            padding: 24px 22px;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-decoration: none;
            color: inherit;
            font-family: inherit;
            transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
        }
        .lp-uc-card:hover { transform: translateY(-3px); background: rgba(35,50,70,0.55); }
        .lp-uc-pro:hover {
            border-color: rgba(var(--ui-teal-rgb),0.55);
            box-shadow: 0 14px 40px rgba(var(--ui-teal-rgb),0.32);
        }
        .lp-uc-casual:hover {
            border-color: rgba(245,170,100,0.55);
            box-shadow: 0 14px 40px rgba(245,170,100,0.32);
        }
        .lp-uc-card:focus-visible {
            outline: 2px solid rgba(var(--ui-teal-rgb),0.5);
            outline-offset: 2px;
        }
        .lp-uc-icon {
            width: 50px; height: 50px;
            display: flex; align-items: center; justify-content: center;
            margin-bottom: 14px;
        }
        .lp-uc-icon img {
            width: 100%; height: 100%;
            object-fit: contain;
            display: block;
        }
        .lp-uc-label {
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 2px;
            text-transform: uppercase;
            margin-bottom: 16px;
        }
        .lp-uc-pro    .lp-uc-label { color: rgba(var(--ui-teal-rgb),0.9); }
        .lp-uc-casual .lp-uc-label { color: rgba(245,170,100,0.9); }
        .lp-uc-badges {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 7px;
            margin-bottom: 18px;
        }
        .lp-uc-badge {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 6px 11px;
            border-radius: 999px;
            font-size: 12.5px;
            font-weight: 500;
            background: rgba(15,25,32,0.55);
            border: 2px solid var(--ui-border);
            color: rgba(200,225,240,0.88);
            line-height: 1.2;
            white-space: nowrap;
        }
        .lp-uc-pro    .lp-uc-badge { border-color: rgba(var(--ui-teal-rgb),0.22); }
        .lp-uc-casual .lp-uc-badge { border-color: rgba(245,170,100,0.22); }
        .lp-uc-tagline {
            color: rgba(var(--ui-text-rgb),0.6);
            font-size: 13px;
            line-height: 1.5;
            margin: 0 0 14px;
        }
        .lp-uc-cta {
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 1.2px;
            text-transform: uppercase;
            margin-top: auto;
        }
        .lp-uc-pro    .lp-uc-cta { color: rgba(var(--ui-teal-rgb),0.85); }
        .lp-uc-casual .lp-uc-cta { color: rgba(245,170,100,0.85); }
        .lp-uc-pro:hover    .lp-uc-cta { color: #7dd3c8; }
        .lp-uc-casual:hover .lp-uc-cta { color: #ffba70; }

        /* For-teams section — two-column layout with text on the left and
           a mocked-up org dashboard on the right. Stacks on mobile. */
        .lp-teams {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
            align-items: center;
            text-align: left;
        }
        @media (max-width: 768px) {
            .lp-teams { grid-template-columns: 1fr; gap: 28px; }
        }
        .lp-teams-text h2 { text-align: left; }
        .lp-teams-text .lp-section-body { margin-left: 0; max-width: none; }
        .lp-teams-checklist {
            list-style: none; padding: 0; margin: 18px 0 24px;
        }
        .lp-teams-checklist li {
            display: flex; align-items: flex-start; gap: 12px;
            color: rgba(var(--ui-text-rgb),0.85);
            font-size: 14px;
            line-height: 1.5;
            padding: 6px 0;
        }
        .lp-teams-checklist .lp-check {
            color: #D26B3F;
            flex-shrink: 0;
            font-weight: 700;
            font-size: 15px;
            margin-top: 1px;
        }
        .lp-teams-mockup {
            background: rgba(15,25,32,0.65);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            border: 2px solid rgba(210,107,63,0.18);
            border-radius: 18px;
            padding: 22px;
            box-shadow: 0 12px 40px rgba(0,0,0,0.35), 0 0 40px rgba(210,107,63,0.06);
        }
        .lp-org-header {
            display: flex; align-items: center; justify-content: space-between;
            margin-bottom: 18px;
        }
        .lp-org-name {
            display: flex; align-items: center; gap: 12px;
        }
        .lp-org-logo {
            width: 38px; height: 38px;
            border-radius: 10px;
            background: rgba(210,107,63,0.12);
            border: 1px solid rgba(210,107,63,0.3);
            display: flex; align-items: center; justify-content: center;
        }
        .lp-org-name-title { color: var(--ui-text); font-weight: 600; font-size: 13px; line-height: 1.2; }
        .lp-org-name-meta  { color: rgba(var(--ui-text-rgb),0.55); font-size: 11px; margin-top: 2px; }
        .lp-org-online {
            display: inline-flex; align-items: center; gap: 5px;
            color: rgba(var(--ui-teal-rgb),0.9);
            font-size: 11px;
            background: rgba(var(--ui-teal-rgb),0.1);
            padding: 4px 9px;
            border-radius: 10px;
        }
        .lp-org-online::before {
            content: ''; width: 6px; height: 6px; border-radius: 50%;
            background: #4ecdc4; box-shadow: 0 0 6px #4ecdc4;
        }
        .lp-org-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 8px;
        }
        .lp-org-member {
            aspect-ratio: 1;
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-size: 30px;
            line-height: 1;
            position: relative;
        }
        .lp-org-member.online {
            box-shadow: 0 0 0 2px rgba(var(--ui-teal-rgb),0.55), 0 0 14px rgba(var(--ui-teal-rgb),0.25);
        }
        .lp-org-member-hat {
            position: absolute;
            top: -6px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 16px;
            line-height: 1;
        }
        @keyframes lpEmoteFloat {
            0%   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
            100% { opacity: 0; transform: translateX(-50%) translateY(-44px) scale(1.3); }
        }
        .lp-emote-float {
            position: absolute;
            top: -4px; left: 50%;
            transform: translateX(-50%);
            font-size: 18px;
            pointer-events: none;
            animation: lpEmoteFloat 1.1s ease-out forwards;
            z-index: 5;
        }
        @keyframes lpMemberBounce {
            0%, 100% { transform: translateY(0); }
            35%      { transform: translateY(-10px); }
            65%      { transform: translateY(-4px); }
        }
        .lp-emote-bounce { animation: lpMemberBounce 0.65s ease-out; }
        .lp-org-stats {
            margin-top: 14px;
            padding: 12px 14px;
            border-radius: 10px;
            background: rgba(25,40,55,0.5);
            border: 1px solid var(--ui-border-faint);
            display: flex; justify-content: space-between; align-items: center;
            font-size: 11px;
            color: rgba(var(--ui-text-rgb),0.6);
            gap: 8px;
        }
        .lp-org-stats strong {
            color: rgba(var(--ui-text-rgb),0.4);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            font-size: 10px;
            margin-right: 6px;
        }
        .lp-org-stats-bar {
            flex: 1; max-width: 80px;
            height: 4px;
            background: rgba(var(--ui-accent-rgb),0.1);
            border-radius: 2px;
            overflow: hidden;
        }
        .lp-org-stats-bar > div {
            height: 100%;
            background: linear-gradient(90deg, #D26B3F, #e8956a);
            width: 50%;
        }
        .lp-feature:last-child {
            grid-column: 1 / -1;
        }
        .lp-feature {
            background: rgba(25,35,50,0.42);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            border: 2px solid var(--ui-border-faint);
            border-radius: 12px; padding: 18px 14px;
            transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
        }
        .lp-feature:hover {
            transform: translateY(-3px);
            background: rgba(35,50,70,0.55);
        }
        /* Per-card accent on hover — each icon implies a color family. */
        .lp-feature:nth-child(1):hover { border-color: rgba(var(--ui-teal-rgb),0.55); box-shadow: 0 14px 40px rgba(var(--ui-teal-rgb),0.32); }
        .lp-feature:nth-child(2):hover { border-color: var(--ui-border-accent); box-shadow: 0 14px 40px rgba(var(--ui-accent-rgb),0.32); }
        .lp-feature:nth-child(3):hover { border-color: rgba(180,130,255,0.55); box-shadow: 0 14px 40px rgba(180,130,255,0.32); }
        .lp-feature:nth-child(4):hover { border-color: rgba(130,220,150,0.55); box-shadow: 0 14px 40px rgba(130,220,150,0.32); }
        .lp-feature:nth-child(5):hover { border-color: rgba(255,170,80,0.55); box-shadow: 0 14px 40px rgba(255,170,80,0.32); }
        .lp-feature-icon {
            display: block;
            margin: 0 auto 12px;
            width: 50px; height: 50px;
            object-fit: contain;
        }
        .lp-feature h3 {
            color: var(--ui-text-bright); font-size: 15px; font-weight: 600;
            margin: 0 0 8px;
        }
        .lp-feature p {
            color: rgba(var(--ui-text-rgb),0.55); font-size: 13px; line-height: 1.5;
            margin: 0;
        }
.lp-actions { display: flex; gap: 12px; justify-content: center; margin-bottom: 16px; }
        .lp-btn {
            padding: 14px 32px; border-radius: 8px; font-size: 15px; font-weight: 600;
            cursor: pointer; transition: all 0.2s; border: none; font-family: 'Inter', sans-serif;
        }
        .lp-btn-primary {
            background: linear-gradient(135deg, rgba(var(--ui-primary-rgb),0.8), rgba(20,70,90,0.9));
            color: var(--ui-text-bright);
            border: 2px solid var(--ui-border-accent);
        }
        .lp-btn-primary:hover {
            background: linear-gradient(135deg, rgba(40,110,126,0.9), rgba(25,85,105,1));
            border-color: var(--ui-border-accent);
            box-shadow: 0 4px 20px rgba(30,90,120,0.3);
        }
        .lp-btn-ghost {
            background: transparent; color: rgba(var(--ui-text-rgb),0.7);
            border: 2px solid var(--ui-border);
        }
        .lp-btn-ghost:hover {
            background: rgba(var(--ui-accent-rgb),0.06); color: var(--ui-text-bright);
            border-color: var(--ui-border-accent);
        }
        .lp-footer {
            color: rgba(120,150,170,0.5); font-size: 12px; margin: 0; display: none;
        }
        /* ── Full feature list ── */
        .lp-all-features {
            margin-top: 24px;
            padding-top: 8px; text-align: center;
        }
        .lp-features-toggle {
            background: none; border: none; color: rgba(var(--ui-text-rgb),0.5);
            font-size: 13px; cursor: pointer; padding: 8px 0;
            text-align: center; font-family: 'Inter', sans-serif; transition: color 0.2s;
        }
        .lp-features-toggle:hover { color: var(--ui-text-bright); }
        .lp-features-toggle .lp-chevron {
            display: inline-block; transition: transform 0.25s; margin-left: 4px;
        }
        .lp-features-toggle.open .lp-chevron { transform: rotate(180deg); }
        /* Feature list overlay */
        .lp-fg-overlay {
            display: none; position: fixed; inset: 0; z-index: calc(var(--z-modal-2) + 100);
            background: rgba(5,5,5,0.85); backdrop-filter: blur(8px);
            align-items: center; justify-content: center;
            animation: lpFgFadeIn 0.2s ease;
        }
        .lp-fg-overlay.active { display: flex; }
        @keyframes lpFgFadeIn { from { opacity: 0; } to { opacity: 1; } }
        .lp-fg-panel {
            background: linear-gradient(180deg, #0e2a2c, #0a1a1c);
            border: 2px solid var(--ui-border);
            border-radius: 16px; padding: 32px 28px;
            max-width: 560px; width: 90%; max-height: 80vh;
            overflow-y: auto; position: relative;
        }
        .lp-fg-close {
            position: absolute; top: 12px; right: 16px;
            background: none; border: none; color: rgba(var(--ui-text-rgb),0.5);
            font-size: 20px; cursor: pointer; padding: 4px 8px;
            transition: color 0.2s;
        }
        .lp-fg-close:hover { color: var(--ui-text-bright); }
        .lp-fg-panel h3 {
            color: var(--ui-text-bright); font-size: 16px; font-weight: 600;
            margin: 0 0 20px; text-align: center;
        }
        .lp-feature-grid {
            display: grid; grid-template-columns: 1fr 1fr; gap: 0;
        }
        .lp-fg-category {
            grid-column: 1 / -1;
            color: rgba(var(--ui-text-rgb),0.4); font-size: 11px; font-weight: 600;
            text-transform: uppercase; letter-spacing: 1px;
            padding: 16px 0 6px; border-bottom: 1px solid var(--ui-border-faint);
        }
        .lp-fg-category:first-child { padding-top: 0; }
        .lp-fg-item {
            padding: 6px 0; font-size: 13px; color: rgba(var(--ui-text-rgb),0.6);
        }
        .lp-fg-item span { margin-right: 6px; }
        @media (max-width: 600px) {
            .lp-title { font-size: 36px; }
            .lp-tagline { font-size: 18px; }
            .lp-subtagline { font-size: 14px; }
            .lp-features { grid-template-columns: 1fr; gap: 8px; }
            .lp-features { margin-bottom: 12px; }
            .lp-actions { flex-direction: column; align-items: center; }
            .lp-btn { width: 100%; max-width: 280px; }
            .lp-feature-grid { grid-template-columns: 1fr; }
        }

        #authModal.active .authContainer {
            animation: modalContentIn 0.25s ease;
        }
        .authContainer {
            padding: 40px;
            width: 100%;
            max-width: 400px;
            max-height: calc(100vh - 32px);
            overflow-y: auto;
            overscroll-behavior: contain;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
            scrollbar-width: thin;
            scrollbar-color: rgba(var(--ui-accent-rgb),0.3) rgba(var(--ui-surface-rgb),0.4);
        }
        .authContainer::-webkit-scrollbar { width: 8px; }
        .authContainer::-webkit-scrollbar-track { background: rgba(var(--ui-surface-rgb),0.4); border-radius: 4px; }
        .authContainer::-webkit-scrollbar-thumb { background: rgba(var(--ui-accent-rgb),0.3); border-radius: 4px; }
        .authContainer::-webkit-scrollbar-thumb:hover { background: rgba(var(--ui-accent-rgb),0.5); }
        .authContainer h2 {
            color: var(--ui-text-bright);
            margin-bottom: 24px;
            text-align: center;
        }
        .authContainer label.auth-label {
            display: block;
            color: rgba(var(--ui-text-rgb),0.7);
            font-size: 12px;
            font-weight: 500;
            margin-bottom: 4px;
        }
        .authContainer input {
            width: 100%;
            padding: 12px;
            margin-bottom: 16px;
            background: rgba(var(--ui-surface-rgb),0.6);
            border: 2px solid var(--ui-border);
            border-radius: 6px;
            color: var(--ui-text);
            font-size: 14px;
            box-sizing: border-box;
        }
        .authContainer input:focus {
            outline: none;
            border-color: var(--ui-border-accent);
        }
        /* Classless form buttons exist only in the login/signup modal —
           everything else uses the .ui-btn system (ui-theme.css). */
        #authModal .authContainer button {
            width: 100%;
            padding: 12px;
            background: rgba(20,55,65,0.5);
            border: 2px solid var(--ui-border);
            border-radius: 6px;
            color: rgba(var(--ui-text-rgb),0.85);
            font-weight: 600;
            cursor: pointer;
            margin-bottom: 12px;
            transition: all 0.2s;
        }
        #authModal .authContainer button:hover {
            background: rgba(30,70,85,0.6);
            border-color: var(--ui-border-accent);
            color: var(--ui-text-bright);
        }
        .authToggle {
            text-align: center;
            color: var(--ui-text-muted);
            font-size: 12px;
            margin-top: 16px;
        }
        .authToggle a {
            color: var(--ui-text-bright);
            cursor: pointer;
            text-decoration: underline;
        }
        .authError {
            color: #ff6b6b;
            font-size: 12px;
            margin-bottom: 16px;
            text-align: center;
        }
        #userDisplay {
            position: absolute;
            top: 60px;
            right: 18px;
            background: rgba(var(--ui-surface-rgb), 0.85);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            padding: 8px 12px;
            border-radius: 8px;
            border: 2px solid var(--ui-border);
            font-size: 12px;
            color: var(--ui-text);
            pointer-events: auto;
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
            max-width: calc(100vw - 200px);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
        }
        #logoutBtn {
            background: rgba(50, 50, 60, 0.6);
            border: 1px solid rgba(100, 100, 120, 0.3);
            color: #aaa;
            padding: 4px 10px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 11px;
            white-space: nowrap;
            transition: all 0.2s;
        }
        #logoutBtn:hover {
            background: rgba(70, 70, 80, 0.7);
            color: var(--ui-text);
            border-color: rgba(150, 150, 170, 0.4);
        }
        #adminToggleBtn {
            background: #1a3a1a;
            border: 1px solid #4a8a4a;
            color: #7aff7a;
            padding: 4px 12px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 11px;
            font-weight: 600;
            transition: all 0.2s ease;
            white-space: nowrap;
        }
        #adminToggleBtn:hover {
            background: #2a4a2a;
            border-color: #7aff7a;
            box-shadow: 0 0 8px rgba(122, 255, 122, 0.3);
        }
        #adminToggleBtn.active {
            background: #2a7a2a;
            border-color: #00ff00;
            color: #00ff00;
            box-shadow: 0 0 12px rgba(0, 255, 0, 0.5);
        }
        #locationContainer {
            position: absolute;
            top: 60px;
            right: 18px;
            display: flex;
            align-items: center;
            gap: 6px;
            pointer-events: auto;
            z-index: var(--z-hud); /* own layer — an invisible HUD sibling above it ate the clicks */
            background: rgba(var(--ui-surface-rgb), 0.85);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            padding: 6px 10px;
            border-radius: 8px;
            border: 2px solid var(--ui-border);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
        }
        #locationDisplay {
            background: rgba(20, 40, 60, 0.6);
            border: 2px solid var(--ui-border-accent);
            color: var(--ui-text);
            padding: 5px 8px;
            border-radius: 6px;
            font-size: 11px;
            font-family: 'Consolas', 'Monaco', monospace;
            outline: none;
            width: 100px;
            cursor: text;
        }
        #locationDisplay:hover {
            border-color: var(--ui-border-accent);
            background: rgba(var(--ui-surface-rgb), 0.7);
        }
        #locationDisplay:focus {
            border-color: #7adc7a;
            box-shadow: 0 0 8px rgba(122, 220, 122, 0.3);
        }
        #locationDisplay::placeholder {
            color: #5a8a5a;
        }
        .location-btn {
            background: rgba(var(--ui-primary-rgb), 0.6);
            border: 2px solid var(--ui-border-accent);
            color: var(--ui-text);
            padding: 4px 8px;
            border-radius: 6px;
            font-size: 11px;
            cursor: pointer;
            transition: all 0.2s;
        }
        .location-btn:hover {
            background: rgba(40, 80, 110, 0.8);
            border-color: var(--ui-border-accent);
        }
        /* Compact location HUD on mobile — lives here, after the base rules,
           so plain source-order overrides work. */
        @media (max-width: 768px) {
            #locationContainer {
                top: 50px;
                right: 8px;
            }
            #locationDisplay {
                width: 80px;
                font-size: 10px;
                padding: 4px 6px;
            }
            .location-btn {
                padding: 4px 6px;
                font-size: 10px;
            }
        }
        .location-btn:active {
            background: rgba(50, 100, 130, 0.8);
        }
        #codeEditorModal {
            z-index: var(--z-nav);
            background: rgba(0, 0, 0, 0.9);
            flex-direction: column;
        }
        #codeEditorModal.active {
            display: flex;
            animation: modalFadeIn 0.2s ease;
        }
        #codeEditorModal.active #codeEditorContainer {
            animation: modalContentIn 0.25s ease;
        }
        #codeEditorContainer {
            width: 90%;
            height: 90%;
            background: #1a1a1a;
            border: 2px solid #666;
            border-radius: 8px;
            display: flex;
            flex-direction: column;
            padding: 0;
            overflow: hidden;
        }
        #codeEditorToolbar {
            background: var(--ui-surface-alt);
            border-bottom: 1px solid #666;
            padding: 12px 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: var(--ui-text);
            font-size: 12px;
        }
        #codeEditorToolbar button {
            background: var(--ui-btn-bg);
            border: 1px solid #666;
            color: var(--ui-text);
            padding: 6px 12px;
            border-radius: 4px;
            cursor: pointer;
            margin-left: 8px;
            font-size: 12px;
        }
        #codeEditorToolbar button:hover {
            background: #444;
            border-color: var(--ui-text-muted);
        }
        #codeEditorTextarea {
            flex: 1;
            background: #1a1a1a;
            border: none;
            color: var(--ui-text);
            padding: 16px;
            font-family: 'Courier New', monospace;
            font-size: 14px;
            resize: none;
            outline: none;
            overflow: auto;
            word-break: break-word;
            white-space: pre-wrap;
        }
        
        /* ── Unified info widget ────────────────────────────────────────
           Single top-left element showing contextual hints (from
           updateTutorial) OR transient toast notifications (from showToast).
           Click the body to open the history panel; × dismisses the current
           message back to the hint, or hides the widget if the hint itself
           was already dismissed. */
        .info-widget {
            position: fixed;
            top: 60px; /* JS overrides via positionUIElements */
            left: 18px;
            z-index: 100;
            display: flex;
            align-items: flex-start;
            gap: 10px;
            padding: 8px 12px;
            border-radius: 8px;
            background: rgba(var(--ui-surface-rgb), 0.85);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 2px solid var(--ui-border);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
            color: rgba(var(--ui-text-rgb), 0.7);
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            font-size: 11px;
            line-height: 1.5;
            max-width: 420px;
            cursor: pointer;
            transition: opacity 0.3s ease, background 0.18s, border-color 0.18s, transform 0.18s;
        }
        .info-widget .info-icon {
            flex-shrink: 0;
            font-size: 16px;
            line-height: 1.2;
            color: #64c8ff;
            display: none; /* shown only when a toast supplies an icon */
        }
        .info-widget.has-icon .info-icon { display: inline; }
        .info-widget .info-body {
            flex: 1;
            min-width: 0;
        }
        .info-widget .info-main {
            color: var(--ui-text);
            font-weight: 600;
            font-size: 12px;
            word-break: break-word;
        }
        .info-widget .info-sub {
            font-size: 10px;
            opacity: 0.7;
            margin-top: 4px;
            word-break: break-word;
        }
        .info-widget .info-sub:empty { display: none; }
        .info-widget .info-close {
            flex-shrink: 0;
            background: none;
            border: none;
            color: rgba(var(--ui-text-rgb), 0.4);
            font-size: 14px;
            line-height: 1;
            cursor: pointer;
            padding: 2px 4px;
            border-radius: 4px;
            transition: opacity 0.15s, color 0.15s, background 0.15s;
        }
        .info-widget .info-close:hover {
            color: var(--ui-text-bright);
            background: rgba(255, 255, 255, 0.08);
        }
        .info-widget .info-unread {
            flex-shrink: 0;
            color: #f87171;
            font-weight: 700;
            font-size: 11px;
            padding: 0 2px;
        }
        /* Toast states — widget temporarily takes on the toast's coloring */
        .info-widget.toast-active {
            border-color: var(--ui-border-accent);
            background: rgba(var(--ui-surface-rgb), 0.92);
        }
        .info-widget.toast-success { border-color: rgba(74, 222, 128, 0.4); }
        .info-widget.toast-success .info-icon { color: var(--ui-success-text, #4ade80); }
        .info-widget.toast-error { border-color: rgba(248, 113, 113, 0.45); }
        .info-widget.toast-error .info-icon { color: var(--ui-error-text, #f87171); }
        .info-widget.toast-warning { border-color: rgba(251, 191, 36, 0.4); }
        .info-widget.toast-warning .info-icon { color: var(--ui-warn-text, #fbbf24); }
        .info-widget.toast-info { border-color: var(--ui-border-accent); }
        .info-widget.toast-info .info-icon { color: var(--ui-info-text, #64c8ff); }
        .info-widget.toast-achievement {
            border-color: rgba(255, 215, 0, 0.4);
            background: linear-gradient(135deg, rgba(20, 30, 50, 0.95), rgba(30, 50, 80, 0.95));
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 215, 0, 0.15);
        }
        .info-widget.toast-achievement .info-icon { color: #ffd700; font-size: 22px; }
        .info-widget.toast-achievement .toast-eyebrow {
            color: rgba(255, 215, 0, 0.9);
            font-size: 10px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 2px;
        }
        .info-widget.toast-achievement .toast-title {
            font-size: 14px;
            font-weight: 600;
        }
        .info-widget.has-unread .info-icon { color: #f87171; }
        /* Collapsed: shrunk to just the clock icon. Always reachable so the
           user can open history at any time, but unobtrusive — full widget
           re-expands on hover, new toast, or contextual hint. */
        .info-widget.collapsed {
            padding: 4px 8px;
            opacity: 0.55;
        }
        .info-widget.collapsed .info-body,
        .info-widget.collapsed .info-close {
            display: none;
        }
        .info-widget.collapsed .info-icon {
            display: inline;
            color: var(--ui-text-muted);
            font-size: 13px;
        }
        .info-widget.collapsed.has-unread {
            opacity: 1;
        }
        .info-widget.collapsed.has-unread .info-icon { color: #f87171; }
        .info-widget.collapsed:hover { opacity: 1; }
        @media (max-width: 768px) {
            .info-widget {
                left: 12px;
                right: 12px;
                max-width: none;
            }
        }

        #toastHistoryPanel {
            position: fixed;
            top: calc(var(--toolbar-height, 48px) + 8px);
            left: 24px;
            z-index: var(--z-top);
            width: 340px;
            max-width: calc(100vw - 48px);
            max-height: 60vh;
            overflow-y: auto;
            background: rgba(var(--ui-surface-rgb), 0.95);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 10px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
            display: none;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
        }
        #toastHistoryPanel.open { display: block; }
        .toast-history-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 14px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.06);
            font-size: 12px;
            color: var(--ui-text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .toast-history-clear {
            background: none;
            border: none;
            color: var(--ui-text-muted);
            font-size: 11px;
            cursor: pointer;
            padding: 2px 6px;
            border-radius: 4px;
        }
        .toast-history-clear:hover { background: rgba(255,255,255,0.06); color: #fff; }
        #toastHistoryList {
            padding: 4px 0;
        }
        .toast-history-empty {
            padding: 24px 14px;
            text-align: center;
            color: #6b7b86;
            font-size: 12px;
        }
        .toast-history-item {
            display: flex;
            gap: 10px;
            padding: 10px 14px;
            border-bottom: 1px solid rgba(255,255,255,0.04);
            color: #e0e6eb;
            font-size: 12.5px;
            line-height: 1.4;
        }
        .toast-history-item:last-child { border-bottom: none; }
        .toast-history-icon { flex-shrink: 0; font-size: 14px; margin-top: 1px; }
        .toast-history-body { flex: 1; min-width: 0; }
        .toast-history-msg { word-break: break-word; }
        .toast-history-time { margin-top: 3px; font-size: 10.5px; color: #6b7b86; }
        .toast-history-success .toast-history-icon { color: #4ade80; }
        .toast-history-error   .toast-history-icon { color: #f87171; }
        .toast-history-warning .toast-history-icon { color: #fbbf24; }
        .toast-history-info    .toast-history-icon { color: #64c8ff; }
        .toast-history-achievement .toast-history-icon { color: #ffd700; }
        @media (max-width: 768px) {
            #toastHistoryPanel { left: 12px; right: 12px; width: auto; }
        }
        
        /* Drag & drop overlay */
        #dropOverlay {
            display: none;
            position: fixed;
            inset: 0;
            z-index: var(--z-max);
            background: rgba(var(--ui-surface-rgb), 0.35);
            pointer-events: none;
        }
        #dropOverlay.active {
            display: block;
        }
        .drop-zone {
            position: fixed;
            border: 2px dashed var(--ui-border-accent);
            border-radius: 14px;
            padding: 14px 22px;
            text-align: center;
            animation: dropPulse 1.5s ease-in-out infinite;
            background: rgba(var(--ui-surface-rgb), 0.85);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            pointer-events: none;
            /* Above the cursor, clear of the OS drag image (Windows paints the
               dragged file's icon right under the pointer and hid a closer
               hint). JS sets the final offset and flips it below near the top
               of the screen; this is just the resting value. */
            transform: translate(-50%, calc(-100% - 120px));
            white-space: nowrap;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
        }
        .drop-zone-icon {
            font-size: 20px;
            display: inline;
            margin-right: 8px;
            vertical-align: middle;
        }
        .drop-zone-text {
            font-family: 'Inter', sans-serif;
            font-size: 14px;
            font-weight: 600;
            color: rgba(255, 255, 255, 0.9);
            display: inline;
            vertical-align: middle;
        }
        .drop-zone-hint {
            font-family: 'Inter', sans-serif;
            font-size: 11px;
            color: rgba(var(--ui-accent-rgb), 0.6);
            margin-top: 4px;
        }
        @keyframes dropPulse {
            0%, 100% { border-color: var(--ui-border-accent); }
            50% { border-color: var(--ui-border-accent); }
        }
        
        /* Upload progress toast */
        .toast-progress-bar {
            width: 100%;
            height: 3px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 2px;
            margin-top: 6px;
            overflow: hidden;
        }
        .toast-progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #64c8ff, #4ade80);
            border-radius: 2px;
            transition: width 0.2s ease;
            width: 0%;
        }
    

/* ===== section 2 (index.html extraction order preserved) ===== */
        @keyframes kuukanSpin { to { transform: rotate(360deg); } }
        @keyframes vfCornerTL {
            0%   { transform:translate(0,0);          opacity:.72; animation-timing-function:cubic-bezier(.1,0,0,1); }
            13%  { transform:translate(-12px,-12px);  opacity:1;   animation-timing-function:cubic-bezier(.5,0,.85,.9); }
            35%  { transform:translate(0,0);          opacity:.72; }
            100% { transform:translate(0,0);          opacity:.72; }
        }
        @keyframes vfCornerTR {
            0%   { transform:translate(0,0);          opacity:.72; animation-timing-function:cubic-bezier(.1,0,0,1); }
            13%  { transform:translate( 12px,-12px);  opacity:1;   animation-timing-function:cubic-bezier(.5,0,.85,.9); }
            35%  { transform:translate(0,0);          opacity:.72; }
            100% { transform:translate(0,0);          opacity:.72; }
        }
        @keyframes vfCornerBR {
            0%   { transform:translate(0,0);          opacity:.72; animation-timing-function:cubic-bezier(.1,0,0,1); }
            13%  { transform:translate( 12px, 12px);  opacity:1;   animation-timing-function:cubic-bezier(.5,0,.85,.9); }
            35%  { transform:translate(0,0);          opacity:.72; }
            100% { transform:translate(0,0);          opacity:.72; }
        }
        @keyframes vfCornerBL {
            0%   { transform:translate(0,0);          opacity:.72; animation-timing-function:cubic-bezier(.1,0,0,1); }
            13%  { transform:translate(-12px, 12px);  opacity:1;   animation-timing-function:cubic-bezier(.5,0,.85,.9); }
            35%  { transform:translate(0,0);          opacity:.72; }
            100% { transform:translate(0,0);          opacity:.72; }
        }
        @keyframes vfDotPulse {
            0%, 100% { transform: scale(1);    opacity: 0.72; }
            50%      { transform: scale(1.28); opacity: 1; }
        }
        .vf-c-tl { animation: vfCornerTL 2.2s linear infinite; animation-delay:    0s; }
        .vf-c-tr { animation: vfCornerTR 2.2s linear infinite; animation-delay: -1.9s; }
        .vf-c-br { animation: vfCornerBR 2.2s linear infinite; animation-delay: -1.6s; }
        .vf-c-bl { animation: vfCornerBL 2.2s linear infinite; animation-delay: -1.3s; }
        .vf-dot1 {
            transform-box: fill-box;
            transform-origin: center;
            animation: vfDotPulse 1.6s ease-in-out infinite;
        }
        .vf-dot2 {
            transform-box: fill-box;
            transform-origin: center;
            animation: vfDotPulse 1.6s ease-in-out 0.55s infinite;
        }
        @keyframes chatBubbleIn {
            from { opacity: 0; transform: translateY(8px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .chat-bubble-new { animation: chatBubbleIn 220ms cubic-bezier(.2,.7,.2,1) both; }
        @keyframes reactionPop {
            0%   { transform: scale(0.4); opacity: 0; }
            60%  { transform: scale(1.18); opacity: 1; }
            100% { transform: scale(1); }
        }
        /* Reaction pills — neutral surface at rest; YOUR reaction stands out
           with the primary fill + accent border (Discord anatomy). Look
           lives here; ReactionsRow.js only fills content. */
        .reaction-badge {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            background: rgba(var(--ui-surface-rgb), 0.55);
            border: 1px solid var(--ui-border-faint);
            border-radius: 999px;
            padding: 2px 8px;
            cursor: pointer;
            user-select: none;
            transition: border-color 0.12s, background 0.12s, transform 0.1s;
        }
        .reaction-badge:hover { border-color: var(--ui-border-accent); transform: scale(1.06); }
        .reaction-badge.reacted {
            background: rgba(var(--ui-primary-rgb), 0.35);
            border-color: var(--ui-border-accent);
        }
        .reaction-badge .reaction-count { color: var(--ui-text-muted); }
        .reaction-badge.reacted .reaction-count { color: var(--ui-text-bright); }
        .reaction-badge-new { animation: reactionPop 280ms cubic-bezier(.3,1.5,.5,1) both; }
        /* Someone joined a reaction that already existed — a nudge, not an
           entrance. Softer than reactionPop so the two read differently. */
        .reaction-badge-bump { animation: reactionBump 260ms cubic-bezier(.3,1.4,.5,1) both; }
        @keyframes reactionBump {
            0%   { transform: scale(1); }
            45%  { transform: scale(1.15); }
            100% { transform: scale(1); }
        }
        @keyframes chatBubbleFlash {
            0%, 100% { box-shadow: 0 0 0 0 rgba(var(--ui-accent-rgb),0); }
            30%      { box-shadow: 0 0 0 3px rgba(var(--ui-accent-rgb),0.6); }
        }
        .chat-bubble-jump-flash { animation: chatBubbleFlash 1.1s ease-out both; border-radius: 8px; }
        @keyframes typingDotBounce {
            0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
            40%           { transform: translateY(-3px); opacity: 1; }
        }
        .typing-dot {
            display: inline-block;
            width: 4px; height: 4px;
            margin: 0 1px;
            background: currentColor;
            border-radius: 50%;
            animation: typingDotBounce 1.2s ease-in-out infinite;
        }
        .typing-dot:nth-child(2) { animation-delay: 0.15s; }
        .typing-dot:nth-child(3) { animation-delay: 0.30s; }
        @keyframes chatAvatarSpeaking {
            0%, 100% { filter: drop-shadow(0 0 1px rgba(var(--ui-teal-rgb),0)); transform: scale(1); }
            50%      { filter: drop-shadow(0 0 4px rgba(var(--ui-teal-rgb),0.8)); transform: scale(1.14); }
        }
        .chat-avatar-speaking { animation: chatAvatarSpeaking 0.9s ease-in-out infinite; }
        /* Chat input row utility buttons (emoji, / commands) — calm grey at
           rest, Kuukan orange on hover: the same convention as the message
           action icons. The send button stays primary and the shout button
           keeps its gold identity. */
        .chat-input-btn {
            padding: 6px 8px;
            background: transparent;
            border: 1px solid transparent;
            border-radius: 8px;
            color: #92a2b0;
            cursor: pointer;
            height: 32px;
            /* Never squash in the input row — the textarea beside these is the
               flexible one (flex:1 + min-width:0). Without this the buttons
               shrank instead and the row looked broken in a narrow panel. */
            flex-shrink: 0;
            transition: color 0.12s, background 0.12s;
        }
        .chat-input-btn:hover {
            color: #ff7a1a;
            background: rgba(255, 122, 26, 0.12);
        }

        /* Send buttons (space chat / comments / DM) — base recipe here,
           enabled/disabled is a class flip from ChatSystem/NodeComments. */
        .chat-send-btn {
            padding: 8px 12px;
            background: rgba(var(--ui-accent-rgb), 0.2);
            border: 2px solid var(--ui-border-accent);
            border-radius: 8px;
            color: var(--ui-accent);
            font-weight: 600;
            font-size: 12px;
            cursor: pointer;
            height: 32px;
            flex-shrink: 0;      /* same reason as .chat-input-btn */
            white-space: nowrap; /* "Send" must never wrap to two lines */
            transition: background 0.15s, color 0.15s, border-color 0.15s;
        }
        .chat-send-btn.send-disabled {
            background: rgba(var(--ui-accent-rgb),0.06);
            border-color: var(--ui-border-faint);
            color: rgba(var(--ui-accent-rgb),0.35);
            cursor: default;
        }
        @keyframes ctxMenuIn {
            from { opacity:0; transform:scale(0.92); }
            to { opacity:1; transform:scale(1); }
        }
        @keyframes ctxMenuOut {
            from { opacity:1; transform:scale(1); }
            to { opacity:0; transform:scale(0.92); }
        }
        @keyframes burgerDropdownIn {
            from { opacity:0; transform:translateY(-6px); }
            to { opacity:1; transform:translateY(0); }
        }
        @keyframes burgerDropdownOut {
            from { opacity:1; transform:translateY(0); }
            to { opacity:0; transform:translateY(-6px); }
        }
    

/* ===== section 3 (index.html extraction order preserved) ===== */
        @keyframes badgePulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.15); }
        }
        /* Notification badge: pulse via expanding shadow ring instead of
           scale, so it doesn't fight with the translateX(-50%) used to
           center the badge above the carousel ball. */
        @keyframes badgeShadowPulse {
            0%, 100% { box-shadow: 0 0 0 0 rgba(255, 107, 53, 0.55); }
            50%      { box-shadow: 0 0 0 7px rgba(255, 107, 53, 0); }
        }
        @keyframes badgeBounce {
            0% { transform: scale(0); }
            50% { transform: scale(1.3); }
            100% { transform: scale(1); }
        }
        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            20% { transform: translateX(-8px); }
            40% { transform: translateX(8px); }
            60% { transform: translateX(-5px); }
            80% { transform: translateX(5px); }
        }
    

/* ===== section 4 (index.html extraction order preserved) ===== */
#avatarPickerModal .profile-tab { border-radius: 6px; }

/* ===== section 5 (index.html extraction order preserved) ===== */
        .help-row { display:flex; justify-content:space-between; align-items:center; padding:5px 0; border-bottom:1px solid var(--ui-border-faint); }
        .help-row:last-child { border-bottom:none; }
        .help-keys { color:rgba(var(--ui-text-rgb),0.7); font-size:12px; min-width:140px; }
        .help-keys kbd { background:rgba(var(--ui-accent-rgb),0.08); border:2px solid var(--ui-border); border-radius:4px; padding:2px 6px; font-size:11px; font-family:'Inter',sans-serif; color:rgba(var(--ui-text-rgb),0.8); }
        .help-desc { color:rgba(var(--ui-text-rgb),0.45); font-size:12px; text-align:right; }
        #helpModal ::-webkit-scrollbar { width: 6px; }
        #helpModal ::-webkit-scrollbar-track { background: rgba(var(--ui-surface-rgb), 0.4); border-radius: 3px; }
        #helpModal ::-webkit-scrollbar-thumb { background: rgba(var(--ui-accent-rgb), 0.3); border-radius: 3px; }
        #helpModal ::-webkit-scrollbar-thumb:hover { background: rgba(var(--ui-accent-rgb), 0.5); }
    

/* ===== section 6 (index.html extraction order preserved) ===== */
        #onboardingWalkthrough {
            position: fixed;
            bottom: 32px;
            left: 50%;
            transform: translateX(-50%) translateY(10px);
            z-index: var(--z-system);
            opacity: 0;
            transition: opacity 0.35s ease, transform 0.35s ease;
            pointer-events: auto;
        }
        .ob-card {
            position: relative;
            background: rgba(12, 20, 30, 0.95);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 2px solid var(--ui-border-accent);
            border-radius: 16px;
            padding: 24px 28px 18px;
            min-width: 320px;
            max-width: 400px;
            box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(var(--ui-accent-rgb), 0.08);
            text-align: center;
            font-family: 'Inter', sans-serif;
            overflow: hidden;
            transition: opacity 0.15s ease, transform 0.15s ease;
        }
        .ob-progress {
            position: absolute;
            top: 0; left: 0;
            height: 3px;
            background: linear-gradient(90deg, rgba(var(--ui-accent-rgb), 0.6), rgba(60, 230, 160, 0.6));
            border-radius: 0 3px 3px 0;
            transition: width 0.4s ease;
            width: 0%;
        }
        .ob-icon {
            font-size: 36px;
            margin-bottom: 8px;
            user-select: none;
        }
        .ob-message {
            color: var(--ui-text-bright);
            font-size: 16px;
            font-weight: 700;
            margin-bottom: 4px;
            letter-spacing: 0.2px;
        }
        .ob-sub {
            color: rgba(var(--ui-text-rgb), 0.55);
            font-size: 13px;
            line-height: 1.5;
            margin-bottom: 16px;
        }
        .ob-actions {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 12px;
            margin-bottom: 12px;
        }
        .ob-skip {
            background: none;
            border: none;
            color: rgba(var(--ui-text-rgb), 0.35);
            font-size: 12px;
            cursor: pointer;
            padding: 4px 8px;
            font-family: 'Inter', sans-serif;
            transition: color 0.15s;
        }
        .ob-skip:hover { color: rgba(var(--ui-text-rgb), 0.65); }
        .ob-next {
            background: rgba(var(--ui-primary-rgb), 0.6);
            border: 2px solid var(--ui-border-accent);
            border-radius: 8px;
            color: var(--ui-text-bright);
            font-size: 13px;
            font-weight: 600;
            padding: 8px 20px;
            cursor: pointer;
            font-family: 'Inter', sans-serif;
            transition: all 0.15s;
        }
        .ob-next:hover {
            background: rgba(var(--ui-primary-rgb), 0.8);
            border-color: var(--ui-border-accent);
            box-shadow: 0 0 16px rgba(var(--ui-accent-rgb), 0.15);
        }
        .ob-dots {
            display: flex;
            justify-content: center;
            gap: 6px;
        }
        .ob-dot {
            width: 7px; height: 7px;
            border-radius: 50%;
            background: rgba(var(--ui-accent-rgb), 0.15);
            transition: all 0.3s ease;
        }
        .ob-dot.active {
            background: rgba(var(--ui-accent-rgb), 0.7);
            box-shadow: 0 0 6px rgba(var(--ui-accent-rgb), 0.4);
            transform: scale(1.2);
        }
        .ob-dot.done {
            background: rgba(60, 230, 160, 0.5);
        }
        .ob-canvas-highlight {
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: calc(var(--z-system) - 1);
            border: 2px dashed var(--ui-border-accent);
            animation: obPulse 2s ease-in-out infinite;
        }
        @keyframes obPulse {
            0%, 100% { border-color: var(--ui-border); }
            50% { border-color: var(--ui-border-accent); }
        }
        @media (max-width: 500px) {
            #onboardingWalkthrough { bottom: 16px; }
            .ob-card { min-width: 280px; max-width: calc(100vw - 32px); padding: 20px 18px 14px; }
        }
    

/* ===== section 7 (index.html extraction order preserved) ===== */
        .tools-float-btn {
            background: rgba(60,100,80,0.6);
            border: 1px solid rgba(100,200,150,0.2);
            border-radius: 6px;
            padding: 6px 10px;
            font-size: 12px;
            color: #a0d0b0;
            cursor: pointer;
            transition: all 0.2s ease;
            text-align: left;
        }
        .tools-float-btn:hover {
            background: rgba(80,130,100,0.8);
            border-color: rgba(100,200,150,0.5);
            color: #c0f0d0;
        }
    

        /* ── Search: the timeline ────────────────────────────────────────────
           The main control, not one filter among many: its own block at the top
           of the panel, above the chips. Dragging it keeps only the newest
           items in the space — the thing wanted almost every time. The chips
           below refine that result, and are the rarer case. */
        /* Full bleed. A timeline has to look like the whole span of the space —
           inset by a margin it reads as just another slider. Only the label is
           indented; the track itself runs edge to edge across the panel. */
        .search-timeline {
            /* #searchFilters is a wrapping FLEX row, so this is a flex ITEM and
               was sizing to its content — which is why the track stopped short
               however wide the input was told to be. Claim the whole line, plus
               the 12px the panel pads on each side. */
            flex: 0 0 calc(100% + 24px);
            box-sizing: border-box;
            margin: 2px -12px 8px;
            padding: 0 0 10px;
            border-bottom: 1px solid var(--ui-border-faint);
        }
        .search-timeline .search-time-head { padding: 0 12px 2px; }

        /* Arrivals sit directly above the timeline and share its full-bleed
           geometry: they answer the same question ("what's new here?") by a
           different route — a set you pick rather than a range you drag. */
        .search-arrivals {
            flex: 0 0 calc(100% + 24px);
            box-sizing: border-box;
            margin: 2px -12px 6px;
            padding: 0 0 8px;
            border-bottom: 1px solid var(--ui-border-faint);
        }
        .search-arrivals .search-time-head { padding: 0 12px 4px; }
        /* Scrolls sideways rather than wrapping: a space with a long import
           history must not push the timeline off the panel. */
        .search-arrival-chips {
            display: flex; gap: 6px; overflow-x: auto;
            padding: 0 12px 2px;
            scrollbar-width: none;
        }
        .search-arrival-chips::-webkit-scrollbar { display: none; }
        .search-arrival {
            flex: 0 0 auto;
            min-height: 30px;               /* touch target — no hover-only affordances */
            padding: 5px 10px;
            border-radius: 14px;
            border: 1px solid rgba(var(--ui-accent-rgb), 0.25);
            background: rgba(var(--ui-surface-rgb), 0.5);
            color: var(--ui-text);
            font-size: 11px;
            white-space: nowrap;
            cursor: pointer;
            transition: background 0.15s, border-color 0.15s;
        }
        .search-arrival:hover { background: rgba(var(--ui-accent-rgb), 0.15); }
        .search-arrival.active {
            background: rgba(var(--ui-accent-rgb), 0.28);
            border-color: rgba(var(--ui-accent-rgb), 0.7);
        }
        /* The track holds both handles, the kept span, and any marks. */
        .search-timeline-track { position: relative; height: 18px; }
        /* The two ranges sit on top of each other; only their thumbs take
           pointer events, so each handle stays grabbable and neither blocks
           the other's half of the track. */
        .search-timeline-track .tl-range {
            position: absolute; left: 0; right: 0; top: 0;
            width: 100%; margin: 0; background: none; pointer-events: none;
            -webkit-appearance: none; appearance: none;
        }
        .search-timeline-track .tl-range::-webkit-slider-thumb { pointer-events: auto; }
        .search-timeline-track .tl-range::-moz-range-thumb { pointer-events: auto; }
        .search-timeline-track .tl-range::-webkit-slider-runnable-track { background: transparent; }
        .search-timeline-track .tl-range::-moz-range-track { background: transparent; }
        /* The span that survives, painted under the handles. */
        .search-timeline-track::before {
            content: '';
            position: absolute; left: 0; right: 0; top: 7px; height: 4px;
            border-radius: 2px;
            background: linear-gradient(to right,
                var(--ui-border-faint) 0, var(--ui-border-faint) var(--tl-lo, 0%),
                var(--ui-accent) var(--tl-lo, 0%), var(--ui-accent) var(--tl-hi, 100%),
                var(--ui-border-faint) var(--tl-hi, 100%), var(--ui-border-faint) 100%);
        }
        /* Where you were the last time you opened this space. The same instant
           the green NEW glow uses, so the timeline agrees with the rest of the
           app about what counts as new. */
        .search-visit-mark {
            position: absolute;
            top: -2px;
            width: 2px;
            height: 18px;
            padding: 0;
            border: none;
            border-radius: 1px;
            background: rgba(60, 230, 110, 0.9);
            box-shadow: 0 0 6px rgba(60, 230, 110, 0.6);
            cursor: pointer;
            transform: translateX(-1px);
        }
        .search-visit-mark::after { left: 50%; }   /* centre its tooltip on the line */
        .search-visit-mark:hover { background: rgb(60, 230, 110); height: 22px; top: -4px; }
        .search-timeline #searchTimeRange {
            display: block;
            width: 100%;
            margin: 0;
        }
        .search-time-head {
            display: flex; justify-content: space-between; align-items: baseline;
            font-size: 11px; color: var(--ui-text-muted); margin-bottom: 6px;
        }
        .search-time-value { color: var(--ui-accent); font-size: 12px; font-weight: 600; }
        #searchTimeRange { width: 100%; cursor: pointer; }
        #searchTimeRange:disabled { opacity: 0.4; cursor: default; }