/* Page never scrolls — only #view-lobby (contains the monochrome bar) */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background-color: #0a0a12;
  scrollbar-width: none;
}

/* Never show browser spell/grammar squiggles in any editor */
::spelling-error,
::grammar-error {
  text-decoration: none !important;
  background-color: transparent !important;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* Lobby-only scrollbar — monochrome, stable gutter, inside the fixed shell */
#view-lobby::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
#view-lobby::-webkit-scrollbar-track {
  background: #0a0a12;
  border-left: none;
}
#view-lobby::-webkit-scrollbar-thumb {
  background: #3a3a42;
  border-radius: 999px;
  border: 2px solid #0a0a12;
  background-clip: padding-box;
  min-height: 40px;
}
#view-lobby::-webkit-scrollbar-thumb:hover {
  background: #4e4e58;
  border: 2px solid #0a0a12;
  background-clip: padding-box;
}
#view-lobby::-webkit-scrollbar-corner {
  background: #0a0a12;
}

body {
            margin: 0;
            padding: 0;
            font-family: 'Arial', sans-serif;
            background-color: #0a0a12;
            color: #fff;
            overflow: hidden;
            box-sizing: border-box;
            position: relative;
            height: 100%;
        }
        body.view-canvas {
            overflow: hidden;
        }
        body.rainbow-screen::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            border: 4px solid;
            animation: subtle-rainbow-border 5s linear infinite;
            pointer-events: none;
            z-index: 999;
            box-sizing: border-box;
        }
        #controls {
            position: fixed;
            top: 10px;
            left: 10px;
            z-index: 1000;
            user-select: none;
        }
        .control-element {
            padding: 8px 12px;
            margin-right: 5px;
            background-color: #444;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.2s;
            position: relative;
        }
        .control-element:hover {
            background-color: #555;
        }
        .separator {
            margin: 0 5px;
            color: #888;
        }
        #clear-button.shaking {
            animation: shake-button 0.3s ease-in-out;
        }
        #clear-button span {
            transition: opacity 0.2s ease-in-out;
        }
        #clear-button.shaking span {
            opacity: 0;
        }
        @keyframes shake-button {
            0% { transform: translateX(0); }
            25% { transform: translateX(-3px); }
            50% { transform: translateX(3px); }
            75% { transform: translateX(-3px); }
            100% { transform: translateX(0); }
        }
        @keyframes pulse-button {
            0% { transform: scale(1); }
            50% { transform: scale(1.1); }
            100% { transform: scale(1); }
        }
        .control-element.pulse {
            animation: pulse-button 0.3s ease-in-out;
        }
        /* Empty map — note-first prompt (screen space over the board) */
        .canvas-empty-capture {
          position: absolute;
          inset: 0;
          z-index: 30;
          display: flex;
          align-items: center;
          justify-content: center;
          pointer-events: none;
          padding: 1.5rem;
          box-sizing: border-box;
        }
        .canvas-empty-capture[hidden] {
          display: none !important;
        }
        .canvas-empty-capture-card {
          pointer-events: auto;
          width: min(28rem, 100%);
          padding: 1.15rem 1.25rem 1rem;
          border-radius: 16px;
          background: linear-gradient(
            165deg,
            rgba(22, 18, 40, 0.94) 0%,
            rgba(10, 8, 18, 0.96) 100%
          );
          border: 1px solid rgba(155, 92, 240, 0.4);
          box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45),
            0 0 0 1px rgba(0, 0, 0, 0.3);
        }
        .canvas-empty-capture-label {
          display: block;
          font-size: 0.95rem;
          font-weight: 650;
          color: #e8e4ff;
          margin: 0 0 0.55rem;
        }
        .canvas-empty-input {
          width: 100%;
          box-sizing: border-box;
          resize: vertical;
          min-height: 4.5rem;
          max-height: 12rem;
          padding: 0.65rem 0.75rem;
          border-radius: 10px;
          border: 1px solid rgba(255, 255, 255, 0.12);
          background: rgba(0, 0, 0, 0.35);
          color: #f5f2ff;
          font: inherit;
          font-size: 0.95rem;
          line-height: 1.4;
          outline: none;
        }
        .canvas-empty-input:focus {
          border-color: rgba(62, 232, 208, 0.5);
        }
        .canvas-empty-capture-hint {
          margin: 0.45rem 0 0;
          font-size: 0.75rem;
          color: rgba(160, 150, 190, 0.8);
        }
        .delve-item-empty {
          pointer-events: none;
          opacity: 0.75;
          font-size: 0.82rem;
          white-space: normal;
          line-height: 1.35;
          padding: 0.55rem 0.75rem;
        }
        /* Empty map — note-first prompt (screen space over the board) */
        .canvas-empty-capture {
            position: absolute;
            inset: 0;
            z-index: 30;
            display: flex;
            align-items: center;
            justify-content: center;
            pointer-events: none;
            padding: 1.5rem;
            box-sizing: border-box;
        }
        .canvas-empty-capture[hidden] {
            display: none !important;
        }
        .canvas-empty-capture-card {
            pointer-events: auto;
            width: min(28rem, 100%);
            padding: 1.15rem 1.25rem 1rem;
            border-radius: 16px;
            background: linear-gradient(
                165deg,
                rgba(22, 18, 40, 0.94) 0%,
                rgba(10, 8, 18, 0.96) 100%
            );
            border: 1px solid rgba(155, 92, 240, 0.4);
            box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45),
                0 0 0 1px rgba(0, 0, 0, 0.3);
        }
        .canvas-empty-capture-label {
            display: block;
            font-size: 0.95rem;
            font-weight: 650;
            color: #e8e4ff;
            margin: 0 0 0.55rem;
        }
        .canvas-empty-input {
            width: 100%;
            box-sizing: border-box;
            resize: vertical;
            min-height: 4.5rem;
            max-height: 12rem;
            padding: 0.65rem 0.75rem;
            border-radius: 10px;
            border: 1px solid rgba(255, 255, 255, 0.12);
            background: rgba(0, 0, 0, 0.35);
            color: #f5f2ff;
            font: inherit;
            font-size: 0.95rem;
            line-height: 1.4;
            outline: none;
        }
        .canvas-empty-input:focus {
            border-color: rgba(62, 232, 208, 0.5);
        }
        .canvas-empty-capture-hint {
            margin: 0.45rem 0 0;
            font-size: 0.75rem;
            color: rgba(160, 150, 190, 0.8);
        }
        .delve-item-empty {
            pointer-events: none;
            opacity: 0.75;
            font-size: 0.82rem;
            white-space: normal;
            line-height: 1.35;
            padding: 0.55rem 0.75rem;
        }
        #canvas-wrapper {
            position: relative;
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            background-color: #2a2a2a;
            /* Hover: normal arrow; hand only while actively clicking/dragging */
            cursor: default;
            user-select: none;
            -webkit-user-drag: none;
        }
        #canvas-wrapper.dragging {
            cursor: grabbing;
        }
        #canvas {
            position: absolute;
            width: 100000px;
            height: 100000px;
            transform-origin: 0 0;
            top: 0;
            left: 0;
            user-select: none;
            -webkit-user-drag: none;
        }

        #dot-layer {
            position: absolute;
            width: 100000px;
            height: 100000px;
            top: 0;
            left: 0;
            transform-origin: 0 0;
            pointer-events: none;
            z-index: 0;
            /* Static grid is on ::after so we can hole-punch without masking particles */
            background: none;
            user-select: none;
            -webkit-user-drag: none;
        }
        /* Static light dots (masked locally during click disturb).
           z-index above particles so movers only show through the hole. */
        #dot-layer::after {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 3;
            background-image: radial-gradient(
                circle at 1.2px 1.2px,
                rgba(210, 210, 210, var(--dot-opacity, 0)) 1.3px,
                transparent 0
            );
            background-size: 20px 20px;
            background-position: 0 0;
        }
        /*
         * Punch ONLY mover home cells via --dot-hole-mask (data-URI SVG).
         * White = keep static dots, black circles = hide homes (no dimming, no black blotches).
         */
        #dot-layer.is-disturbed::after {
            -webkit-mask-image: var(--dot-hole-mask);
            mask-image: var(--dot-hole-mask);
            -webkit-mask-mode: luminance;
            mask-mode: luminance;
            -webkit-mask-size: 100000px 100000px;
            mask-size: 100000px 100000px;
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            -webkit-mask-position: 0 0;
            mask-position: 0 0;
        }
        .dot-disturb-host {
            position: absolute;
            inset: 0;
            z-index: 4; /* above static grid */
            pointer-events: none;
            overflow: visible;
        }
        /* Field movers: same size/color as CSS lattice dots */
        .dot-particle {
            position: absolute;
            width: 2.6px;
            height: 2.6px;
            margin: -1.3px 0 0 -1.3px;
            border-radius: 50%;
            background: rgba(210, 210, 210, var(--op, 0.5));
            pointer-events: none;
            will-change: transform;
            z-index: 2;
        }
        .dot-particle.is-field {
            /* --op set per particle */
        }
        /*
         * Board-card tension: high-frequency micro-shake around FIXED position.
         * Amplitude ≤0.5px — taut vibration, not free-floating drift.
         */
        #canvas.is-dot-field .node:not([data-live-drag="1"]),
        #canvas.is-dot-field .board-image-wrap:not([data-live-drag="1"]) {
          animation: node-field-tension 0.06s steps(2, end) infinite;
        }
        @keyframes node-field-tension {
          0% {
            transform: translate3d(0, 0, 0);
          }
          50% {
            transform: translate3d(0.4px, -0.3px, 0);
          }
          100% {
            transform: translate3d(-0.3px, 0.35px, 0);
          }
        }

        /* local darker dots near cursor, using mask so ONLY dots are affected (no blanket dark on bg or content) */
        #dot-layer::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1;
            background-image: radial-gradient(
                circle at 1.2px 1.2px,
                rgba(80, 80, 80, var(--dot-dark-opacity, 0)) 1.3px,
                transparent 0
            );
            background-size: 20px 20px;
            background-position: 0 0;
            /* mask reveals the darker dots only near cursor */
            mask-image: radial-gradient(
                circle at var(--mouse-x, 0px) var(--mouse-y, 0px),
                black 0px,
                transparent var(--vignette-radius, 60px)
            );
            -webkit-mask-image: radial-gradient(
                circle at var(--mouse-x, 0px) var(--mouse-y, 0px),
                black 0px,
                transparent var(--vignette-radius, 60px)
            );
        }

        .node {
            position: absolute;
            width: 200px;
            height: 120px;
            min-width: 140px;
            min-height: 120px;
            max-width: 360px;
            max-height: 320px;
            box-sizing: border-box;
            background-color: #333;
            border-radius: 15px;
            padding: 10px 12px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
            cursor: move;
            user-select: none;
            display: flex;
            justify-content: center;
            align-items: center; /* vertical middle for the content block */
            z-index: 10;
            border: 2px solid #444;
            transition: border-color 0.5s ease-in-out;
            /* Clip text to the node box — never spill a wall of text onto the board */
            overflow: hidden !important;
            /* Isolate layout invalidation when many peers move entities */
            contain: layout style;
        }
        /* Freeform text — box is only as big as the glyphs (no empty frame) */
        .node.node-text {
            min-width: 0;
            min-height: 0;
            max-width: 720px;
            max-height: 480px;
            width: auto;
            height: auto;
            background: transparent !important;
            background-color: transparent !important;
            border: none !important;
            border-radius: 2px;
            box-shadow: none !important;
            padding: 1px 2px;
            justify-content: flex-start;
            align-items: flex-start;
            overflow: visible !important;
        }
        .node.node-text .node-content {
            text-align: left;
            color: #f2f0f7;
            text-shadow:
              0 1px 2px rgba(0, 0, 0, 0.75),
              0 0 6px rgba(0, 0, 0, 0.35);
            min-height: 0;
            width: 100%;
            /* pre: explicit newlines only — no soft-wrap of last glyph */
            white-space: pre;
            overflow-wrap: normal;
            word-break: normal;
            box-sizing: border-box;
        }
        /* Ghost placeholder when empty — still tight to the word */
        .node.node-text .node-content[data-empty="1"]:not(:focus)::before {
            content: attr(data-placeholder);
            color: rgba(255, 255, 255, 0.28);
            text-shadow: none;
            pointer-events: none;
        }
        /* Selection outline hugs the text, no fill slab */
        .node.node-text.selected {
            outline: 1px dashed rgba(186, 140, 255, 0.65);
            outline-offset: 1px;
            background: transparent !important;
        }
        .node.node-text.focused {
            outline: 1px solid rgba(102, 179, 255, 0.7);
            outline-offset: 1px;
            background: transparent !important;
        }
        .node.node-text .node-handle {
            width: 8px;
            height: 8px;
            background: rgba(167, 139, 250, 0.9);
            border-width: 1px;
        }
        /* Resize handles (selected nodes only) — outside overflow clip via child layer */
        .node.selected {
          overflow: visible !important;
        }
        .node .node-handles {
          position: absolute;
          inset: 0;
          pointer-events: none;
          z-index: 50;
        }
        .node .node-handle {
          position: absolute;
          width: 14px;
          height: 14px;
          background: #a78bfa;
          border: 2px solid #fff;
          border-radius: 4px;
          box-sizing: border-box;
          pointer-events: auto !important;
          touch-action: none;
          box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
          z-index: 60;
        }
        .node .node-handle::before {
          content: "";
          position: absolute;
          inset: -10px;
        }
        .node-handle-nw { left: -7px; top: -7px; cursor: nwse-resize; }
        .node-handle-ne { right: -7px; top: -7px; cursor: nesw-resize; }
        .node-handle-se { right: -7px; bottom: -7px; cursor: nwse-resize; }
        .node-handle-sw { left: -7px; bottom: -7px; cursor: nesw-resize; }

        /* Hover-only remove — top-right, fully inside the rounded plate */
        .node-remove {
            position: absolute;
            top: 3px;
            right: 3px;
            z-index: 80;
            width: 20px;
            height: 20px;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            border: 1px solid rgba(210, 190, 255, 0.28);
            border-radius: 999px;
            background:
              linear-gradient(
                165deg,
                rgba(36, 28, 58, 0.82) 0%,
                rgba(12, 10, 22, 0.88) 100%
              );
            color: rgba(240, 232, 255, 0.92);
            box-shadow:
              0 2px 10px rgba(0, 0, 0, 0.42),
              0 0 0 1px rgba(123, 63, 228, 0.14),
              inset 0 1px 0 rgba(255, 255, 255, 0.14);
            backdrop-filter: blur(10px) saturate(1.15);
            -webkit-backdrop-filter: blur(10px) saturate(1.15);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            opacity: 0;
            transform: scale(0.78);
            pointer-events: none;
            appearance: none;
            -webkit-appearance: none;
            user-select: none;
            -webkit-user-select: none;
            touch-action: manipulation;
            line-height: 0;
            transition:
              opacity 0.16s ease,
              transform 0.16s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.16s ease,
              border-color 0.16s ease,
              color 0.16s ease,
              box-shadow 0.16s ease;
        }
        .node-remove svg {
            display: block;
            pointer-events: none;
        }
        .node:not(.node-text):hover .node-remove,
        .node:not(.node-text).selected .node-remove,
        .node:not(.node-text):focus-within .node-remove {
            opacity: 1;
            transform: scale(1);
            pointer-events: auto;
        }
        .node:not(.node-text):hover .node-remove:hover,
        .node:not(.node-text).selected .node-remove:hover,
        .node:not(.node-text):focus-within .node-remove:hover,
        .node-remove:hover {
            color: #fff;
            border-color: rgba(255, 170, 190, 0.62);
            background:
              linear-gradient(
                165deg,
                rgba(190, 52, 86, 0.88) 0%,
                rgba(92, 18, 40, 0.92) 100%
              );
            box-shadow:
              0 2px 8px rgba(0, 0, 0, 0.4),
              0 0 0 1px rgba(232, 72, 112, 0.25),
              inset 0 1px 0 rgba(255, 255, 255, 0.2);
            transform: scale(1.06);
        }
        .node:not(.node-text):hover .node-remove:active,
        .node:not(.node-text).selected .node-remove:active,
        .node-remove:active {
            transform: scale(0.94);
        }
        .node-remove:focus-visible {
            outline: 2px solid rgba(186, 140, 255, 0.8);
            outline-offset: 2px;
            opacity: 1;
            pointer-events: auto;
        }
        .node.is-dragging .node-remove,
        .node[data-live-drag="1"] .node-remove,
        body.paint-mode .node-remove,
        body.ping-mode .node-remove,
        #canvas-wrapper.is-paint-mode .node-remove,
        #canvas-wrapper.is-ping-mode .node-remove {
            opacity: 0 !important;
            pointer-events: none !important;
            transform: scale(0.78);
        }
        .node-content {
            /* Sized by the node; text stays centered; no scrollbar */
            width: 100%;
            height: auto;
            min-height: 0;
            max-height: 100%;
            box-sizing: border-box;
            color: #fff;
            font-size: 20px;
            font-family: 'Arial', sans-serif;
            line-height: 1.25;
            text-align: center;
            display: block;
            overflow: hidden !important;
            scrollbar-width: none;
            -ms-overflow-style: none;
            white-space: pre-wrap;
            overflow-wrap: anywhere;
            word-break: break-word;
            outline: none;
            user-select: text;
            cursor: text;
            padding: 0;
            margin: 0 auto;
        }
        .node-content::-webkit-scrollbar {
            width: 0 !important;
            height: 0 !important;
            display: none !important;
        }
        .node-content img {
    display: block; /* Ensure images stack vertically */
    margin: 0 auto; /* Center images horizontally */
    pointer-events: none; /* Prevent mouse interactions */
}
        .node.focused {
            outline: 2px solid #66b3ff;
            outline-offset: 2px;
        }
        .rainbow-border {
            animation: rainbow-border 5s linear infinite;
            border: 2px solid;
        }
        /*
          Noted node redesign: plain darker plate + OUTSIDE delved fire only.
          Fire lives in a frame around the node (bottom bed, sides, top crown).
          Interior has no fire under the label.
        */
        .node.is-delved:not(.node-text) {
            /* Softer chrome — fire carries the signal, not a heavy double rim */
            border: 1px solid rgba(155, 92, 240, 0.42);
            background-color: #262626;
            background-image: none;
            box-shadow:
              0 0 0 1px rgba(123, 63, 228, 0.16),
              0 4px 12px rgba(0, 0, 0, 0.36),
              0 0 10px rgba(123, 63, 228, 0.18),
              0 0 20px rgba(123, 63, 228, 0.08),
              inset 0 1px 0 rgba(255, 255, 255, 0.05);
            transition:
              border-color 0.18s ease,
              box-shadow 0.18s ease;
            isolation: isolate;
            overflow: visible !important;
        }
        .node.is-delved:not(.node-text):hover {
            border-color: rgba(186, 140, 255, 0.58);
            box-shadow:
              0 0 0 1px rgba(155, 92, 240, 0.22),
              0 6px 14px rgba(0, 0, 0, 0.4),
              0 0 12px rgba(123, 63, 228, 0.26),
              0 0 22px rgba(123, 63, 228, 0.12),
              inset 0 1px 0 rgba(255, 255, 255, 0.07);
        }
        .node.is-delved.is-delve-open:not(.node-text) {
            border-color: rgba(46, 211, 198, 0.48);
            box-shadow:
              0 0 0 1px rgba(46, 211, 198, 0.22),
              0 6px 16px rgba(0, 0, 0, 0.4),
              0 0 12px rgba(123, 63, 228, 0.18),
              0 0 20px rgba(46, 211, 198, 0.1),
              inset 0 1px 0 rgba(255, 255, 255, 0.07);
        }
        .node.is-delved.selected:not(.node-text) {
            outline: 2px solid rgba(125, 211, 252, 0.85);
            outline-offset: 2px;
        }
        /*
          Merged crown fire host — preferably a #canvas sibling (.is-canvas-layer)
          so .node overflow cannot clip the crown above the plate.
          Pads match FIRE_PAD / PAD { L/R 14, T 44, B 4 }.
        */
        .node-delve-fire {
            position: absolute;
            border-radius: 0;
            overflow: visible !important;
            pointer-events: none;
            isolation: isolate;
        }
        /* Legacy in-node host (fallback) */
        .node > .node-delve-fire:not(.is-canvas-layer) {
            left: -14px;
            right: -14px;
            top: -44px;
            bottom: -4px;
            z-index: 1;
        }
        .node-delve-fire.is-canvas-layer {
            z-index: 9; /* under .node (10+); crown paints in empty space above plate */
        }
        .node-delve-fire canvas,
        .node-delve-fire .node-crown-fire {
            position: absolute;
            inset: 0;
            width: 100% !important;
            height: 100% !important;
            display: block;
            pointer-events: none;
            opacity: 1;
            mix-blend-mode: normal;
            border-radius: 0;
            z-index: 0;
        }
        /* Force delved plates not to clip any chrome */
        #view-canvas .node.is-delved:not(.node-text),
        #canvas .node.is-delved:not(.node-text),
        .node.is-delved:not(.node-text) {
            overflow: visible !important;
        }
        .node.is-delved .node-content {
            position: relative;
            z-index: 2;
            font-weight: 700;
            overflow: hidden !important;
            border-radius: inherit;
        }
        .node.is-delved .node-handles {
            z-index: 3;
        }
        /* Floating movable notes popup (not a side sheet) */
        #delve-page.delve-popup,
        #delve-page {
            display: none;
            position: fixed;
            top: 72px;
            left: auto;
            right: 24px;
            width: min(380px, calc(100vw - 24px));
            height: min(520px, calc(100vh - 96px));
            min-width: 280px;
            min-height: 220px;
            max-width: calc(100vw - 16px);
            /* Stay below canvas topbar (~54–72px) */
            max-height: calc(100vh - 80px);
            margin: 0;
            padding: 0;
            background: transparent;
            z-index: 1400;
            pointer-events: none;
            transition: opacity 0.16s ease, transform 0.16s ease;
            opacity: 0;
            transform: translateY(6px) scale(0.98);
            box-sizing: border-box;
        }
        #delve-page.delve-popup.active,
        #delve-page.active {
            display: flex;
            flex-direction: column;
            pointer-events: auto;
            opacity: 1;
            transform: none;
        }
        #delve-page.delve-popup[hidden] {
            display: none !important;
        }
        #delve-page .delve-content,
        .delve-content {
            /* Fill the resizable shell — no empty outer band when stretched wide */
            flex: 1 1 auto;
            width: 100%;
            height: 100%;
            min-width: 0;
            min-height: 0;
            margin: 0;
            padding: 0;
            position: relative;
            pointer-events: auto;
            display: flex;
            flex-direction: column;
            box-sizing: border-box;
            border-radius: 16px;
            /* Idle: dark translucent only — no white wash; blur mostly off so board stays sharp */
            border: 1px solid rgba(140, 110, 200, 0.22);
            background:
              linear-gradient(
                160deg,
                rgba(18, 14, 32, 0.42) 0%,
                rgba(10, 8, 18, 0.38) 100%
              );
            backdrop-filter: blur(5px) saturate(1.05);
            -webkit-backdrop-filter: blur(5px) saturate(1.05);
            box-shadow:
              0 10px 32px rgba(0, 0, 0, 0.32),
              0 0 0 1px rgba(0, 0, 0, 0.25);
            overflow: hidden;
            transition:
              background 0.22s ease,
              border-color 0.22s ease,
              box-shadow 0.22s ease,
              backdrop-filter 0.22s ease;
        }
        /* Hover (not typing): slightly denser dark glass, still light blur */
        #delve-page:hover:not(:focus-within) .delve-content {
            border-color: rgba(155, 120, 220, 0.32);
            background:
              linear-gradient(
                160deg,
                rgba(22, 16, 40, 0.52) 0%,
                rgba(12, 10, 22, 0.48) 100%
              );
            backdrop-filter: blur(8px) saturate(1.1);
            -webkit-backdrop-filter: blur(8px) saturate(1.1);
            box-shadow:
              0 14px 40px rgba(0, 0, 0, 0.4),
              0 0 0 1px rgba(0, 0, 0, 0.3);
        }
        /* Focused / typing: darker + stronger blur for readability */
        #delve-page:focus-within .delve-content {
            border-color: rgba(186, 140, 255, 0.4);
            background:
              linear-gradient(
                160deg,
                rgba(28, 22, 48, 0.78) 0%,
                rgba(12, 10, 22, 0.82) 100%
              );
            backdrop-filter: blur(18px) saturate(1.25);
            -webkit-backdrop-filter: blur(18px) saturate(1.25);
            box-shadow:
              0 18px 52px rgba(0, 0, 0, 0.5),
              0 0 0 1px rgba(123, 63, 228, 0.18);
        }
        .delve-popup-header {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            flex-shrink: 0;
            padding: 0.65rem 0.65rem 0.65rem 0.9rem;
            border-bottom: 1px solid rgba(120, 90, 180, 0.16);
            background: rgba(0, 0, 0, 0.12);
            cursor: grab;
            user-select: none;
            -webkit-user-select: none;
            touch-action: none;
            transition: background 0.22s ease, border-color 0.22s ease;
        }
        #delve-page:hover:not(:focus-within) .delve-popup-header {
            border-bottom-color: rgba(140, 110, 200, 0.22);
            background: rgba(0, 0, 0, 0.16);
        }
        #delve-page:focus-within .delve-popup-header {
            border-bottom-color: rgba(186, 140, 255, 0.22);
            background: rgba(0, 0, 0, 0.22);
        }
        .delve-popup-header:active,
        #delve-page.is-dragging .delve-popup-header {
            cursor: grabbing;
        }
        #delve-page.is-dragging,
        #delve-page.is-resizing {
            transition: none;
            user-select: none;
        }
        /* Resize grips on floating notes popup */
        #delve-page .delve-resize {
            position: absolute;
            z-index: 5;
            pointer-events: auto;
            touch-action: none;
            background: transparent;
        }
        #delve-page .delve-resize-n,
        #delve-page .delve-resize-s {
            left: 12px;
            right: 12px;
            height: 8px;
            cursor: ns-resize;
        }
        #delve-page .delve-resize-n { top: -2px; }
        #delve-page .delve-resize-s { bottom: -2px; }
        #delve-page .delve-resize-e,
        #delve-page .delve-resize-w {
            top: 12px;
            bottom: 12px;
            width: 8px;
            cursor: ew-resize;
        }
        #delve-page .delve-resize-e { right: -2px; }
        #delve-page .delve-resize-w { left: -2px; }
        #delve-page .delve-resize-ne,
        #delve-page .delve-resize-nw,
        #delve-page .delve-resize-se,
        #delve-page .delve-resize-sw {
            width: 14px;
            height: 14px;
        }
        #delve-page .delve-resize-ne {
            top: -3px;
            right: -3px;
            cursor: nesw-resize;
        }
        #delve-page .delve-resize-nw {
            top: -3px;
            left: -3px;
            cursor: nwse-resize;
        }
        #delve-page .delve-resize-se {
            bottom: -3px;
            right: -3px;
            cursor: nwse-resize;
            /* Subtle corner affordance */
            border-radius: 0 0 12px 0;
            background:
              linear-gradient(
                135deg,
                transparent 45%,
                rgba(186, 140, 255, 0.35) 45%,
                rgba(186, 140, 255, 0.35) 55%,
                transparent 55%
              ),
              linear-gradient(
                135deg,
                transparent 60%,
                rgba(186, 140, 255, 0.55) 60%,
                rgba(186, 140, 255, 0.55) 70%,
                transparent 70%
              );
        }
        #delve-page .delve-resize-sw {
            bottom: -3px;
            left: -3px;
            cursor: nesw-resize;
        }
        #delve-page.active .delve-resize {
            /* grips only interactive when open */
            pointer-events: auto;
        }
        .delve-headline {
            flex: 1 1 auto;
            min-width: 0;
            margin: 0;
            padding: 0;
            border: none;
            color: rgba(240, 234, 255, 0.88);
            font-size: 0.95rem;
            font-weight: 700;
            font-family: inherit;
            text-align: left;
            letter-spacing: 0.01em;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            user-select: none;
            pointer-events: none;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
            transition: color 0.22s ease;
        }
        #delve-page:focus-within .delve-headline {
            color: #f0eaff;
        }
        .delve-tool-btn {
            position: static;
            flex-shrink: 0;
            width: 30px;
            height: 30px;
            margin: 0;
            padding: 0;
            border: 1px solid rgba(200, 170, 255, 0.22);
            background: rgba(123, 63, 228, 0.18);
            border-radius: 999px;
            cursor: pointer;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            color: rgba(245, 240, 255, 0.9);
            user-select: none;
            -webkit-user-select: none;
            appearance: none;
            -webkit-appearance: none;
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
        }
        .delve-tool-btn svg {
            display: block;
            pointer-events: none;
        }
        .delve-tool-btn:hover {
            background: rgba(155, 92, 240, 0.42);
            border-color: rgba(186, 140, 255, 0.5);
            color: #fff;
        }
        .delve-tool-btn:focus-visible {
            outline: 2px solid rgba(186, 140, 255, 0.75);
            outline-offset: 2px;
        }
        .delve-popup-body {
            flex: 1 1 auto;
            min-height: 0;
            display: flex;
            flex-direction: column;
            padding: 0.75rem 0.9rem 0.9rem;
            box-sizing: border-box;
        }
        #delve-first-paragraph {
            display: none; /* unused legacy slot */
            margin: 0;
            color: #fff;
            font-size: 16px;
            line-height: 1.5;
        }
        .delve-textarea {
            flex: 1 1 auto;
            min-height: 0;
            /* Idle: transparent dark edge only — no white wash */
            background: transparent;
            border: 1px solid rgba(120, 90, 180, 0.14);
            border-radius: 12px;
            color: #f4f0ff;
            font-size: 0.95rem;
            font-family: inherit;
            line-height: 1.5;
            outline: none;
            overflow-y: auto;
            tab-size: 4;
            padding: 0.7rem 0.8rem;
            box-sizing: border-box;
            cursor: text;
            user-select: text;
            -webkit-user-select: text;
            transition: background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
        }
        #delve-page:hover:not(:focus-within) .delve-textarea {
            background: rgba(0, 0, 0, 0.1);
            border-color: rgba(140, 110, 200, 0.2);
        }
        .delve-textarea:focus {
            border-color: rgba(186, 140, 255, 0.4);
            background: rgba(0, 0, 0, 0.28);
            box-shadow: 0 0 0 2px rgba(123, 63, 228, 0.12);
            text-shadow: none;
        }
        .delve-textarea::-webkit-scrollbar {
            width: 8px;
        }
        .delve-textarea::-webkit-scrollbar-track {
            background: transparent;
        }
        .delve-textarea::-webkit-scrollbar-thumb {
            background: rgba(155, 92, 240, 0.35);
            border-radius: 999px;
        }
        .delve-textarea::-webkit-scrollbar-thumb:hover {
            background: rgba(186, 140, 255, 0.5);
        }
        .delve-textarea {
            scrollbar-width: thin;
            scrollbar-color: rgba(155, 92, 240, 0.4) transparent;
        }
        .delve-textarea hr,
        .delve-textarea .delve-hr {
            height: 0;
            margin: 0.65rem 0;
            border: none;
            border-top: 1px solid rgba(186, 140, 255, 0.38);
            width: 100%;
            display: block;
        }
        .delve-textarea blockquote {
            margin: 0 0 0 1.35em;
            padding: 0;
            border: none;
        }
        .delve-close {
            position: static;
            flex-shrink: 0;
            width: 30px;
            height: 30px;
            margin: 0;
            padding: 0;
            border: 1px solid rgba(200, 170, 255, 0.22);
            background: rgba(123, 63, 228, 0.18);
            border-radius: 999px;
            cursor: pointer;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            font-size: 16px;
            line-height: 0;
            color: rgba(245, 240, 255, 0.9);
            user-select: none;
            -webkit-user-select: none;
            appearance: none;
            -webkit-appearance: none;
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
        }
        .delve-close:hover {
            background: rgba(155, 92, 240, 0.42);
            border-color: rgba(186, 140, 255, 0.5);
            color: #fff;
        }
        .delve-close:focus-visible {
            outline: 2px solid rgba(186, 140, 255, 0.75);
            outline-offset: 2px;
        }
        .delve-close span {
            color: inherit;
            font-size: 1.15rem;
            font-weight: 600;
            position: static;
            line-height: 1;
            pointer-events: none;
        }
        body.view-lobby #delve-page {
            display: none !important;
        }
        /* Bottom-right Delve logo removed */
        #logo {
            display: none !important;
        }
        #help-button {
            display: none !important;
            position: fixed;
            bottom: 12px;
            right: 58px;
            z-index: 1000;
            font-size: 14px;
            color: #888;
            font-family: 'Arial', sans-serif;
            background-color: rgba(0, 0, 0, 0.5);
            padding: 5px 10px;
            border-radius: 5px;
            border: 2px solid transparent;
            cursor: pointer;
            user-select: none;
            display: none;
        }
        #help-button:hover {
            background-color: rgba(0, 0, 0, 0.7);
        }
        #zoom-indicator {
            position: fixed;
            bottom: 12px;
            right: 12px;
            z-index: 2000;
            font-size: 11px;
            font-family: 'Arial', sans-serif;
            color: #ccc;
            background-color: rgba(0, 0, 0, 0.65);
            padding: 3px 8px;
            border-radius: 3px;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.15s ease-out;
            white-space: nowrap;
        }
        /* Canvas search — round glass control + polished panel (matches shell-nav quality) */
        #search-icon.canvas-search-btn {
            position: relative;
            top: auto;
            right: auto;
            z-index: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            margin: 0;
            padding: 0;
            border-radius: 999px;
            border: 1px solid rgba(155, 92, 240, 0.4);
            background:
              linear-gradient(165deg, rgba(36, 30, 58, 0.72) 0%, rgba(10, 9, 18, 0.78) 100%);
            color: rgba(230, 220, 255, 0.95);
            cursor: pointer;
            box-sizing: border-box;
            box-shadow:
              0 2px 10px rgba(0, 0, 0, 0.28),
              0 0 0 1px rgba(123, 63, 228, 0.08),
              inset 0 1px 0 rgba(255, 255, 255, 0.06);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            transition:
              background 0.18s ease,
              border-color 0.18s ease,
              color 0.18s ease,
              box-shadow 0.18s ease,
              transform 0.14s ease;
            user-select: none;
            -webkit-user-select: none;
            touch-action: manipulation;
            -webkit-tap-highlight-color: transparent;
            appearance: none;
            -webkit-appearance: none;
            font: inherit;
            line-height: 0;
            flex-shrink: 0;
        }
        #search-icon.canvas-search-btn .canvas-search-icon {
            display: block;
            flex-shrink: 0;
            width: 18px;
            height: 18px;
            pointer-events: none;
        }
        #search-icon.canvas-search-btn:hover {
            border-color: rgba(186, 140, 255, 0.55);
            color: #f5f0ff;
            box-shadow:
              0 4px 18px rgba(0, 0, 0, 0.45),
              0 0 0 1px rgba(155, 92, 240, 0.2),
              0 0 20px rgba(123, 63, 228, 0.18),
              inset 0 1px 0 rgba(255, 255, 255, 0.1);
            transform: translateY(-1px);
        }
        #search-icon.canvas-search-btn:active {
            transform: scale(0.95) translateY(0);
        }
        #search-icon.canvas-search-btn.active,
        #search-icon.canvas-search-btn[aria-expanded="true"] {
            border-color: rgba(186, 140, 255, 0.65);
            color: #fff;
            background:
              linear-gradient(165deg, rgba(88, 48, 170, 0.55) 0%, rgba(16, 12, 28, 0.95) 100%);
            box-shadow:
              0 4px 20px rgba(0, 0, 0, 0.5),
              0 0 0 1px rgba(155, 92, 240, 0.28),
              0 0 24px rgba(123, 63, 228, 0.28),
              inset 0 1px 0 rgba(255, 255, 255, 0.12);
        }
        #search-icon.canvas-search-btn:focus-visible {
            outline: 2px solid rgba(186, 140, 255, 0.75);
            outline-offset: 2px;
        }
        #search-panel.canvas-search-panel {
            display: none;
            position: absolute;
            top: calc(100% + 8px);
            right: 0;
            width: min(320px, calc(100vw - 24px));
            padding: 0.6rem;
            border-radius: 16px;
            border: 1px solid rgba(155, 92, 240, 0.38);
            background:
              linear-gradient(165deg, rgba(28, 24, 46, 0.92) 0%, rgba(10, 9, 18, 0.95) 100%);
            backdrop-filter: blur(16px) saturate(1.2);
            -webkit-backdrop-filter: blur(16px) saturate(1.2);
            z-index: 1300;
            box-shadow:
              0 12px 36px rgba(0, 0, 0, 0.55),
              0 0 0 1px rgba(123, 63, 228, 0.1),
              inset 0 1px 0 rgba(255, 255, 255, 0.05);
            box-sizing: border-box;
            user-select: text;
            transform-origin: top right;
            animation: canvas-search-in 0.16s ease-out;
            pointer-events: auto;
        }
        @keyframes canvas-search-in {
            from {
                opacity: 0;
                transform: translateY(-4px) scale(0.97);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }
        #search-panel.canvas-search-panel.is-open,
        #search-panel.canvas-search-panel[style*="block"] {
            display: block;
        }
        #search-panel.canvas-search-panel[hidden] {
            display: none !important;
            animation: none;
        }
        .canvas-search-field {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.48rem 0.75rem;
            border-radius: 999px;
            border: 1px solid rgba(155, 92, 240, 0.32);
            background: rgba(0, 0, 0, 0.42);
            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
            transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
        }
        .canvas-search-field:focus-within {
            border-color: rgba(186, 140, 255, 0.6);
            background: rgba(0, 0, 0, 0.52);
            box-shadow:
              0 0 0 3px rgba(123, 63, 228, 0.16),
              inset 0 1px 2px rgba(0, 0, 0, 0.35);
        }
        .canvas-search-field-icon {
            flex-shrink: 0;
            width: 16px;
            height: 16px;
            color: rgba(186, 170, 230, 0.85);
            pointer-events: none;
        }
        .canvas-search-field:focus-within .canvas-search-field-icon {
            color: rgba(220, 200, 255, 0.98);
        }
        #search-input {
            flex: 1 1 auto;
            min-width: 0;
            width: 100%;
            margin: 0;
            padding: 0.12rem 0;
            background: transparent;
            color: #f4f0ff;
            border: none;
            border-radius: 0;
            outline: none;
            box-sizing: border-box;
            font-family: inherit;
            font-size: 0.9rem;
            font-weight: 500;
            letter-spacing: 0.01em;
            line-height: 1.35;
            user-select: text;
            -webkit-user-select: text;
        }
        #search-input::placeholder {
            color: rgba(170, 155, 210, 0.72);
            font-weight: 500;
        }
        #search-input::-webkit-search-decoration,
        #search-input::-webkit-search-cancel-button,
        #search-input::-webkit-search-results-button {
            -webkit-appearance: none;
            appearance: none;
            display: none;
        }
        #search-results.canvas-search-results {
            max-height: 260px;
            overflow-y: auto;
            margin-top: 0.45rem;
            display: flex;
            flex-direction: column;
            gap: 0.2rem;
            scrollbar-width: thin;
            scrollbar-color: rgba(155, 92, 240, 0.4) transparent;
        }
        #search-results.canvas-search-results:empty {
            display: none;
            margin-top: 0;
        }
        #search-results.canvas-search-results .search-result,
        .canvas-search-panel .search-result {
            display: block;
            width: 100%;
            text-align: left;
            margin: 0;
            padding: 0.5rem 0.7rem;
            border-radius: 10px;
            border: 1px solid transparent;
            border-bottom: 1px solid transparent;
            background: transparent;
            color: rgba(236, 230, 255, 0.95);
            font-family: inherit;
            font-size: 0.84rem;
            font-weight: 600;
            line-height: 1.3;
            cursor: pointer;
            transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            box-sizing: border-box;
            appearance: none;
            -webkit-appearance: none;
        }
        #search-results.canvas-search-results .search-result:hover,
        #search-results.canvas-search-results .search-result:focus-visible,
        .canvas-search-panel .search-result:hover,
        .canvas-search-panel .search-result:focus-visible {
            background: rgba(123, 63, 228, 0.22);
            border-color: rgba(186, 140, 255, 0.32);
            color: #fff;
            outline: none;
        }
        .canvas-search-empty {
            margin-top: 0.45rem;
            padding: 0.4rem 0.55rem;
            font-size: 0.78rem;
            font-weight: 600;
            letter-spacing: 0.02em;
            color: rgba(170, 155, 210, 0.8);
            text-align: center;
        }
        .canvas-search-empty[hidden] {
            display: none !important;
        }
        .highlight-overlay {
            position: absolute;
            background-color: rgba(102, 179, 255, 0.5);
            pointer-events: none;
            transition: background-color 0.5s ease-in-out;
            z-index: 1;
            border-radius: 3px;
        }
        /* Color wheel removed (was middle-click / scroll-click) */
        #customize-menu,
        #customize-menu .color-container,
        #customize-menu .color-option {
            display: none !important;
            visibility: hidden !important;
            pointer-events: none !important;
        }
        #explosion {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100px;
            height: 100px;
            background: radial-gradient(circle, yellow, orange, red, transparent);
            transform: translate(-50%, -50%) scale(0);
            opacity: 0;
            transition: transform 0.5s ease-out, opacity 0.5s ease-out;
            pointer-events: none;
        }
        .explode {
            transform: translate(-50%, -50%) scale(10);
            opacity: 1;
        }
        .particle {
            position: absolute;
            width: 5px;
            height: 5px;
            background-color: white;
            border-radius: 50%;
            pointer-events: none;
        }
        @keyframes particle {
            0% { transform: translate(0, 0); opacity: 1; }
            100% { transform: translate(var(--dx), var(--dy)); opacity: 0; }
        }
        @keyframes rainbow-border {
            0% { border-color: red; }
            14% { border-color: orange; }
            28% { border-color: yellow; }
            42% { border-color: green; }
            57% { border-color: blue; }
            71% { border-color: indigo; }
            85% { border-color: violet; }
            100% { border-color: red; }
        }
        /* Rainbow effect for connection lines */
#jsplumb-svg.rainbow-active #stop1 {
    animation: rainbow-stop1 5s linear infinite;
}
#jsplumb-svg.rainbow-active #stop2 {
    animation: rainbow-stop2 5s linear infinite;
}
#jsplumb-svg.rainbow-active #stop3 {
    animation: rainbow-stop3 5s linear infinite;
}

@keyframes rainbow-stop1 {
    0%   { stop-color: #ff0000; } /* Red */
    14%  { stop-color: #ffa500; } /* Orange */
    28%  { stop-color: #ffff00; } /* Yellow */
    42%  { stop-color: #008000; } /* Green */
    57%  { stop-color: #0000ff; } /* Blue */
    71%  { stop-color: #4b0082; } /* Indigo */
    85%  { stop-color: #ee82ee; } /* Violet */
    100% { stop-color: #ff0000; } /* Red */
}

@keyframes rainbow-stop2 {
    0%   { stop-color: #ffa500; } /* Orange */
    14%  { stop-color: #ffff00; } /* Yellow */
    28%  { stop-color: #008000; } /* Green */
    42%  { stop-color: #0000ff; } /* Blue */
    57%  { stop-color: #4b0082; } /* Indigo */
    71%  { stop-color: #ee82ee; } /* Violet */
    85%  { stop-color: #ff0000; } /* Red */
    100% { stop-color: #ffa500; } /* Orange */
}

@keyframes rainbow-stop3 {
    0%   { stop-color: #ffff00; } /* Yellow */
    14%  { stop-color: #008000; } /* Green */
    28%  { stop-color: #0000ff; } /* Blue */
    42%  { stop-color: #4b0082; } /* Indigo */
    57%  { stop-color: #ee82ee; } /* Violet */
    71%  { stop-color: #ff0000; } /* Red */
    85%  { stop-color: #ffa500; } /* Orange */
    100% { stop-color: #ffff00; } /* Yellow */
}
        @keyframes subtle-rainbow-border {
            0% { border-color: rgba(255, 0, 0, 0.3); }
            14% { border-color: rgba(255, 165, 0, 0.3); }
            28% { border-color: rgba(255, 255, 0, 0.3); }
            42% { border-color: rgba(0, 255, 0, 0.3); }
            57% { border-color: rgba(0, 0, 255, 0.3); }
            71% { border-color: rgba(75, 0, 130, 0.3); }
            85% { border-color: rgba(238, 130, 238, 0.3); }
            100% { border-color: rgba(255, 0, 0, 0.3); }
        }
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.3);
            z-index: 1001;
        }
        .modal-content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #333;
            padding: 20px;
            border-radius: 10px;
            text-align: center;
            max-height: 80vh;
            overflow-y: auto;
            width: 50%;
        }
        #helpModal .modal-content::-webkit-scrollbar {
            width: 10px;
        }
        #helpModal .modal-content::-webkit-scrollbar-track {
            background: #222;
        }
        #helpModal .modal-content::-webkit-scrollbar-thumb {
            background: #444;
            border-radius: 5px;
        }
        #helpModal .modal-content::-webkit-scrollbar-thumb:hover {
            background: #555;
        }
        #helpModal .modal-content {
            scrollbar-width: thin;
            scrollbar-color: #444 #222;
        }
        .modal-content p {
            margin-bottom: 20px;
        }
        .modal-content button {
            margin: 0 10px;
            padding: 8px 12px;
            background-color: #444;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        .modal-content button:hover {
            background-color: #555;
        }
        .jsplumb-connector {
            pointer-events: auto;
            z-index: 1;
            filter: url(#plasma-glow);
        }
        .jsplumb-endpoint {
            width: 1px !important;
            height: 1px !important;
            background: transparent;
        }
        /* Notes control lives in the canvas topbar (see .canvas-notes-btn) */
        #delves-button.canvas-notes-btn {
            display: none;
        }
        @keyframes blueshift {
            0% { transform: scale(0.5); opacity: 0; background-color: #66f; }
            100% { transform: scale(1); opacity: 1; background-color: #444; }
        }
        @keyframes redshift {
            0% { transform: scale(1); opacity: 1; background-color: #444; }
            100% { transform: scale(0.5); opacity: 0; background-color: #f66; }
        }
        .blueshift-in {
            animation: blueshift 0.5s ease-in-out forwards;
        }
        .redshift-out {
            animation: redshift 0.5s ease-in-out forwards;
        }
        /* Notes dropdown styles are under #view-canvas .canvas-notes-list */
        .highlight-node {
            border: 2px solid #66b3ff !important;
        }
        @keyframes delve-feedback {
            0% {
              transform: scale(1);
              box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
              filter: brightness(1);
            }
            40% {
              transform: scale(1.12);
              box-shadow:
                0 0 0 3px rgba(56, 189, 248, 0.65),
                0 8px 28px rgba(56, 189, 248, 0.35);
              filter: brightness(1.25);
            }
            100% {
              transform: scale(1);
              box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
              filter: brightness(1);
            }
        }
        /* High specificity so this wins over #canvas.is-dot-field field-tension */
        #canvas .node.delve-feedback,
        #canvas.is-dot-field .node.delve-feedback,
        .node.delve-feedback {
            animation: delve-feedback 0.55s cubic-bezier(0.34, 1.4, 0.64, 1) !important;
            z-index: 50 !important;
            will-change: transform, box-shadow, filter;
        }
        .delve-feedback.rainbow-border {
            animation:
              delve-feedback 0.55s cubic-bezier(0.34, 1.4, 0.64, 1),
              rainbow-border 5s linear infinite !important;
        }
        .disco-button {
            background-color: #007bff;
            color: #fff;
            border: 2px solid #00b7eb;
            border-radius: 5px;
            padding: 5px 10px;
            font-size: 18px;
            cursor: pointer;
            animation: pulse 2s infinite;
            pointer-events: auto;
        }
        @keyframes pulse {
            0% { box-shadow: 0 0 5px #00b7eb; }
            50% { box-shadow: 0 0 20px #00b7eb; }
            100% { box-shadow: 0 0 5px #00b7eb; }
        }
        .highlight {
    background-color: rgba(102, 179, 255, 0.5);
    transition: background-color 0.5s ease-in-out;
}
/* Intro disabled for shell product (was full-screen black covering lobby) */
#intro-screen {
    display: none !important;
}

#intro-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #003366, #40E0D0, #003366);  /* Dark blue to turquoise */
    background-size: 400% 400%;
    animation: bg-shift 10s linear infinite;
}

@keyframes bg-shift {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

#delve-text {
    font-family: 'Roboto', sans-serif;  /* New modern font */
    font-size: 60px;
    color: #fff;  /* White text for contrast */
    white-space: pre;
    position: relative;
    text-transform: none;
}

#delve-text span {
    display: inline-block;
    animation: letter-pop 0.4s ease-in-out forwards;
    opacity: 0;
}

@keyframes letter-pop {
    0% { 
        opacity: 0; 
        transform: scale(0.5) translateY(20px); 
        text-shadow: 0 0 0 transparent; 
    }
    50% { 
        opacity: 1; 
        transform: scale(1.3) translateY(-5px); 
        text-shadow: 0 0 15px #40E0D0, 0 0 30px #003366;  /* Turquoise and dark blue glow */
    }
    100% { 
        opacity: 1; 
        transform: scale(1) translateY(0); 
        text-shadow: 0 0 5px #40E0D0;  /* Subtle turquoise glow */
    }
}
#node-left, #node-right {
    position: absolute;
    width: 24px;
    height: 24px;
    background-color: #40E0D0;  /* Turquoise */
    border-radius: 50%;
    transform: scale(0);
    opacity: 0;
    animation: node-burst 0.4s ease-out forwards;
}

@keyframes node-burst {
    0% { 
        transform: scale(0); 
        opacity: 0; 
        box-shadow: 0 0 0 0 rgba(64, 224, 208, 0.7);  /* Turquoise shadow */
    }
    50% { 
        transform: scale(1.5); 
        opacity: 1; 
        box-shadow: 0 0 20px 10px rgba(64, 224, 208, 0.5);
    }
    100% { 
        transform: scale(1); 
        opacity: 1; 
        box-shadow: 0 0 10px #40E0D0;  /* Turquoise glow */
    }
}

#connection-line {
    position: absolute;
    height: 4px;
    background: linear-gradient(to right, #003366, #40E0D0, #003366);  /* Dark blue to turquoise */
    background-size: 300% 100%;
    width: 0;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    animation: line-surge 0.8s linear infinite;
}

@keyframes line-surge {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}
#node-container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform-origin: center center;
}

.intro-node {
    position: absolute;
    width: 200px;
    height: 120px;
    background: #333;
    border: 2px solid #444;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.5s;
    overflow: hidden;
}

#central-node {
    z-index: 10;
}

.rainbow-border {
    animation: rainbow-border 5s linear infinite;
}

@keyframes rainbow-border {
    0% { border-color: red; }
    14% { border-color: orange; }
    28% { border-color: yellow; }
    42% { border-color: green; }
    57% { border-color: blue; }
    71% { border-color: indigo; }
    85% { border-color: violet; }
    100% { border-color: red; }
}

#delve-text {
    font-family: 'Orbitron', sans-serif;
    font-size: 48px;
    color: #fff;
}

.node-text {
    font-family: 'Arial', sans-serif;
    font-size: 28px;
    color: #aaa;
    width: 180px;
    text-align: center;
    overflow-wrap: break-word;
}
.resize-handle {
    position: absolute;
    width: 10px;
    height: 10px;
    opacity: 0;
    display: none;
    z-index: 3;
}
/* Legacy crop/tool imgs only — do NOT apply to board media (broke free-resize fill). */
img.crop-tool,
.crop-overlay img {
    z-index: 2;
    position: absolute;
    user-select: none;
}
.crop-overlay {
    position: absolute;
    border: 2px dashed #000;
    background-color: rgba(255, 255, 255, 0.3);
    z-index: 2;
}
#confirmMessage {
    user-select: none; /* Prevents selection of the confirmation text */
}
.notification {
    position: fixed;
    top: 50px; /* Places it below elements like a search icon or menu */
    left: 10px;
    color: rgb(138, 138, 138);
    font-size: 16px;
    animation: fadeOut 3s ease-in-out forwards;
    pointer-events: none; /* Prevents it from blocking clicks */
    z-index: 1003; /* Ensures it’s above most elements */
}

@keyframes fadeOut {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

/* --- App shell extras (auth, dirty, images, search) --- */
#auth-bar {
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1100;
  font-size: 12px;
  font-family: Arial, sans-serif;
  color: #ccc;
  background: rgba(0,0,0,0.55);
  padding: 6px 12px;
  border-radius: 8px;
  display: flex;
  gap: 8px;
  align-items: center;
  max-width: 90vw;
}
#auth-bar a { color: #6cf; }
#auth-bar.is-user { opacity: 0.85; }

#save-button.is-dirty {
  box-shadow: 0 0 0 2px #f0c040;
  background-color: #5a4a20;
}
.board-image-wrap {
  /* Outer shell: size + handles. No painted border here (empty frame bug). */
  border: none;
  border-radius: 6px;
  overflow: visible !important;
  background: transparent;
  /* Establish containing block for absolute media */
  position: absolute;
  contain: layout style;
}
/* Media frame fills the wrap; clips letterbox / placeholder to the true box */
.board-image-wrap .board-image-frame {
  position: absolute;
  inset: 0;
  border-radius: 6px;
  overflow: hidden;
  box-sizing: border-box;
  border: 2px solid transparent;
  background: transparent;
  z-index: 1;
  pointer-events: none; /* drag/select via wrap + media */
}
.board-image-wrap.is-selected .board-image-frame {
  border-color: #66b3ff;
  box-shadow: 0 0 0 1px rgba(102, 179, 255, 0.4);
}
.board-image-wrap .board-image,
.board-image-wrap img.board-image,
.board-image-wrap video.board-image {
  /* Pin to frame — defeats global img rules + intrinsic sizing leaving empty border */
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  display: block !important;
  box-sizing: border-box !important;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  z-index: 1;
  /* Fill the resized box; corner resize locks aspect so this is not squashed */
  object-fit: fill !important;
  pointer-events: auto;
}
.board-image-wrap.is-video .board-image.board-video {
  background: #0a0a12;
  pointer-events: auto;
  /* Fill the box — matches images so Shift free-aspect + Ctrl crop work */
  object-fit: fill !important;
}
.board-image-wrap.is-video.is-selected .board-video {
  outline: none;
}
/* Hide native controls entirely — custom chrome below */
.board-image-wrap.is-video .board-video::-webkit-media-controls,
.board-image-wrap.is-video .board-video::-webkit-media-controls-enclosure {
  display: none !important;
}
/* Gif-like MP4 (Tenor/etc.): no chrome — plays like a GIF */
.board-image-wrap.is-gif-video .board-video,
.board-image-wrap .board-gif-video {
  background: transparent;
  pointer-events: auto;
  cursor: move;
  object-fit: fill !important;
}
.board-image-wrap.is-gif-video .board-video::-webkit-media-controls,
.board-image-wrap.is-gif-video .board-video::-webkit-media-controls-enclosure {
  display: none !important;
}

/* ===== YouTube embed card (official iframe) ===== */
/* Do NOT set overflow:hidden on the wrap — corner .img-handles sit outside
   the box (-9px) and get clipped (same as why video uses overflow:visible). */
.board-image-wrap.is-embed {
  overflow: visible !important;
  scrollbar-width: none !important;
}
.board-image-wrap.is-embed .board-image-frame {
  overflow: hidden !important;
  border-radius: 10px;
  background: #0a0a12;
  border: 1px solid rgba(248, 113, 113, 0.28);
}
.board-image-wrap.is-embed.is-selected .board-image-frame {
  border-color: rgba(248, 113, 113, 0.55);
  box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.22);
}
/* Embed selected: force handles above iframe/play-gate */
.board-image-wrap.is-embed.is-selected .img-handle {
  display: block !important;
  pointer-events: auto !important;
  z-index: 200 !important;
}
.board-embed-shell {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-height: 0;
  height: 100%;
  overflow: hidden !important;
}
.board-embed-chrome {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.22rem 0.4rem;
  background: linear-gradient(
    180deg,
    rgba(8, 10, 16, 0.92) 0%,
    rgba(8, 10, 16, 0.5) 70%,
    transparent 100%
  );
  cursor: grab;
  user-select: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.14s ease;
}
.board-image-wrap.is-embed:hover .board-embed-chrome,
.board-image-wrap.is-embed.is-selected .board-embed-chrome {
  opacity: 1;
  pointer-events: auto;
}
.board-embed-chrome:active {
  cursor: grabbing;
}
.board-embed-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.15rem;
  height: 1.05rem;
  padding: 0 0.22rem;
  border-radius: 4px;
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #fff;
  background: #ff0033;
}
.board-embed-label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.62rem;
  font-weight: 600;
  color: #e2e8f0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
}
.board-embed-open {
  flex: 0 0 auto;
  font-size: 0.58rem;
  font-weight: 700;
  color: #fca5a5;
  text-decoration: none;
  padding: 0.1rem 0.32rem;
  border-radius: 999px;
  border: 1px solid rgba(248, 113, 113, 0.4);
  background: rgba(40, 10, 14, 0.72);
}
.board-embed-open:hover {
  background: rgba(60, 14, 20, 0.9);
}
.board-embed-body,
.board-yt-embed-host {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  height: 100%;
  overflow: hidden !important;
  background: #0a0a12;
  position: relative;
}
.board-embed-iframe,
.board-yt-embed-iframe {
  display: block;
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0;
  background: #0a0a12;
}
.board-embed-play-gate {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(
    ellipse 70% 55% at 50% 50%,
    rgba(12, 16, 28, 0.12) 0%,
    rgba(6, 8, 14, 0.52) 100%
  );
  cursor: pointer;
  pointer-events: auto;
}
.board-embed-shell.is-embed-unlocked .board-embed-play-gate,
.board-image-wrap.is-embed-unlocked .board-embed-play-gate {
  display: none !important;
}
.board-embed-shell:not(.is-embed-unlocked) .board-yt-embed-iframe {
  pointer-events: none !important;
}
.board-embed-play-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--embed-play, 56px);
  height: var(--embed-play, 56px);
  padding: 0;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  color: #f8fafc;
  background: rgba(12, 14, 22, 0.78);
  box-shadow:
    0 0 0 1.5px rgba(255, 255, 255, 0.2),
    0 8px 28px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}
.board-embed-play-btn:hover {
  transform: scale(1.06);
  background: rgba(20, 24, 40, 0.9);
  box-shadow:
    0 0 0 2px rgba(248, 113, 113, 0.5),
    0 10px 32px rgba(0, 0, 0, 0.5);
}
.board-embed-play-btn:active {
  transform: scale(0.98);
}
.board-embed-play-btn .ico-play {
  width: 46%;
  height: 46%;
  margin-left: 6%;
  display: block;
  pointer-events: none;
}

/* ===== Board audio clip card (Delve fire theme) =====
   Palette tracks lobby/portal fire: purple roots → blue body → cyan tips,
   with warm ember accents on the play/seek chrome. */
/* Audio chrome needs hits (frame is pointer-events:none by default).
   Box always matches wrap size — no zoom counter-scale (that blew past resize bounds). */
.board-image-wrap.is-audio .board-image-frame {
  pointer-events: auto;
  overflow: hidden;
  transform: none;
  background:
    radial-gradient(
      ellipse 100% 80% at 15% 115%,
      rgba(255, 90, 40, 0.18) 0%,
      transparent 55%
    ),
    radial-gradient(
      ellipse 80% 70% at 90% -10%,
      rgba(123, 63, 228, 0.28) 0%,
      transparent 52%
    ),
    radial-gradient(
      ellipse 50% 40% at 50% 60%,
      rgba(58, 123, 255, 0.08) 0%,
      transparent 70%
    ),
    linear-gradient(
      165deg,
      rgba(36, 28, 58, 0.97) 0%,
      rgba(14, 11, 26, 0.98) 52%,
      rgba(8, 6, 16, 0.99) 100%
    );
  border: 1px solid rgba(186, 140, 255, 0.36);
  box-shadow:
    0 10px 32px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 100, 50, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -18px 28px rgba(255, 70, 30, 0.04);
}
.board-image-wrap.is-audio.is-selected .board-image-frame {
  border-color: rgba(255, 150, 90, 0.7);
  box-shadow:
    0 12px 36px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 120, 60, 0.22),
    0 0 28px rgba(255, 80, 30, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.board-image-wrap.is-audio.is-audio-playing .board-image-frame {
  border-color: rgba(255, 140, 80, 0.6);
  box-shadow:
    0 12px 42px rgba(0, 0, 0, 0.58),
    0 0 32px rgba(255, 70, 20, 0.22),
    0 0 0 1px rgba(255, 100, 40, 0.18),
    inset 0 1px 0 rgba(255, 210, 160, 0.1),
    inset 0 -20px 30px rgba(255, 80, 30, 0.08);
}
.board-audio-card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.32rem;
  padding: 0.4rem 0.65rem 0.42rem;
  box-sizing: border-box;
  pointer-events: auto;
  cursor: move;
  z-index: 1;
  user-select: none;
}
.board-audio-head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}
.board-audio-icon {
  flex: 0 0 auto;
  display: inline-flex;
  color: rgba(255, 175, 120, 0.95);
  filter: drop-shadow(0 0 8px rgba(255, 90, 40, 0.55));
}
.board-audio-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.8rem;
  font-weight: 700;
  color: rgba(250, 245, 255, 0.96);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.015em;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.55),
    0 0 14px rgba(255, 100, 50, 0.18);
  pointer-events: none;
  transition: opacity 0.12s ease;
}
/* Volume bar sits in the title slot; revealed on hover / while scrubbing */
.board-audio-vol {
  flex: 1 1 auto;
  min-width: 0;
  display: none;
  align-items: center;
  gap: 0.35rem;
  pointer-events: auto;
  cursor: default;
}
.board-audio-card.is-vol-open .board-audio-title,
.board-audio-card:hover .board-audio-title {
  display: none;
}
.board-audio-card.is-vol-open .board-audio-vol,
.board-audio-card:hover .board-audio-vol {
  display: flex;
}
.board-audio-vol-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 190, 140, 0.95);
  filter: drop-shadow(0 0 6px rgba(255, 90, 40, 0.45));
  cursor: pointer;
  padding: 1px;
  border-radius: 4px;
}
.board-audio-vol-icon:hover {
  color: #fff4e8;
  filter: drop-shadow(0 0 8px rgba(255, 120, 50, 0.65));
}
.board-audio-vol-track {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 150, 90, 0.22);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  touch-action: none;
  overflow: visible;
}
.board-audio-vol-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    #7b3fe4 0%,
    #ff5a28 55%,
    #ffb14a 100%
  );
  box-shadow:
    0 0 8px rgba(255, 90, 30, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  pointer-events: none;
}
.board-audio-vol-thumb {
  position: absolute;
  top: 50%;
  left: 100%;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 35% 28%,
      #fffdf0 0%,
      #ffb14a 45%,
      #ff4a18 80%,
      #7b3fe4 100%
    );
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  box-shadow:
    0 0 8px rgba(255, 100, 40, 0.85),
    0 1px 2px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  z-index: 2;
}
.board-audio-card.is-vol-scrubbing .board-audio-vol-thumb {
  transform: scale(1.12);
  box-shadow:
    0 0 12px rgba(255, 140, 60, 1),
    0 0 18px rgba(255, 70, 25, 0.55),
    0 1px 2px rgba(0, 0, 0, 0.45);
}
.board-audio-vol-pct {
  flex: 0 0 auto;
  font-size: 0.62rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 215, 185, 0.88);
  letter-spacing: 0.02em;
  min-width: 2.1rem;
  text-align: right;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
.board-audio-vol.is-muted .board-audio-vol-icon {
  color: rgba(255, 160, 140, 0.55);
  filter: none;
}
.board-audio-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}
.board-audio-play {
  flex: 0 0 auto;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 160, 100, 0.5);
  background:
    radial-gradient(
      circle at 32% 28%,
      rgba(255, 230, 160, 0.45) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 70% 80%,
      rgba(123, 63, 228, 0.55) 0%,
      transparent 55%
    ),
    linear-gradient(
      145deg,
      rgba(255, 120, 50, 0.72) 0%,
      rgba(255, 70, 30, 0.55) 45%,
      rgba(123, 63, 228, 0.65) 100%
    );
  box-shadow:
    0 2px 12px rgba(255, 60, 20, 0.4),
    0 0 16px rgba(123, 63, 228, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  appearance: none;
  transition: filter 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
}
.board-audio-play:hover {
  filter: brightness(1.12);
  box-shadow:
    0 3px 16px rgba(255, 70, 25, 0.55),
    0 0 20px rgba(123, 63, 228, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.32);
}
.board-audio-play:active {
  transform: scale(0.96);
}
/* Frame already carries --media-ui-scale; keep inner chrome unscaled */
.board-audio-card.is-playing .board-audio-play {
  box-shadow:
    0 2px 14px rgba(255, 80, 30, 0.55),
    0 0 22px rgba(255, 100, 40, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.board-audio-play-icon {
  display: block;
  width: 0;
  height: 0;
  margin-left: 2px;
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent #fff8f0;
  filter: drop-shadow(0 0 5px rgba(255, 190, 120, 0.75));
}
.board-audio-play.is-playing .board-audio-play-icon {
  width: 9px;
  height: 11px;
  margin-left: 0;
  border: none;
  background:
    linear-gradient(#fff8f0, #fff8f0) 0 0 / 3px 100% no-repeat,
    linear-gradient(#fff8f0, #fff8f0) 6px 0 / 3px 100% no-repeat;
  filter: drop-shadow(0 0 5px rgba(255, 190, 120, 0.75));
}

/* Track trough — a little headroom for flame tongues, keep card short */
.board-audio-track {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 18px;
  border-radius: 999px;
  background: transparent;
  border: none;
  box-shadow: none;
  cursor: pointer;
  touch-action: none;
  overflow: visible;
}
/* Dark trough sits mid/bottom; flames rise into the free headroom */
.board-audio-track::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3px;
  height: 11px;
  border-radius: 999px;
  background:
    linear-gradient(
      180deg,
      rgba(20, 14, 36, 0.75) 0%,
      rgba(6, 4, 14, 0.92) 100%
    );
  border: 1px solid rgba(160, 110, 255, 0.2);
  box-shadow:
    inset 0 1px 4px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(255, 90, 40, 0.05);
  pointer-events: none;
}
/* Completed region — flaming fill (width driven by JS) */
.board-audio-fire {
  position: absolute;
  left: 0;
  bottom: 3px;
  height: 11px;
  width: 0%;
  border-radius: 999px;
  overflow: visible; /* tongues + tip may rise above the trough */
  pointer-events: none;
  z-index: 1;
  filter: drop-shadow(0 0 6px rgba(255, 90, 30, 0.55))
    drop-shadow(0 0 14px rgba(255, 60, 20, 0.35));
  transition: filter 0.2s ease;
}
.board-audio-card.is-playing .board-audio-fire {
  filter: drop-shadow(0 0 8px rgba(255, 100, 40, 0.75))
    drop-shadow(0 0 18px rgba(255, 70, 25, 0.5))
    drop-shadow(0 0 28px rgba(123, 63, 228, 0.25));
}
/* Clipped plasma body (Delve: purple → blue → cyan, warm tip) */
.board-audio-fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  background: linear-gradient(
    90deg,
    #5a28b8 0%,
    #7b3fe4 14%,
    #3a7bff 36%,
    #2ed3c6 52%,
    #ff6a28 72%,
    #ffb14a 88%,
    #ffe08a 100%
  );
  background-size: 220% 100%;
  animation: board-audio-heat-shift 2.4s linear infinite;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.board-audio-heat {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.12) 35%,
    rgba(255, 230, 160, 0.35) 55%,
    rgba(255, 120, 50, 0.2) 75%,
    transparent 100%
  );
  background-size: 180% 100%;
  animation: board-audio-heat-shift 1.6s linear infinite reverse;
  mix-blend-mode: soft-light;
  pointer-events: none;
}
.board-audio-core {
  position: absolute;
  left: 6%;
  right: 10%;
  top: 28%;
  height: 38%;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(200, 160, 255, 0.15) 0%,
    rgba(180, 230, 255, 0.55) 40%,
    rgba(255, 245, 200, 0.85) 78%,
    rgba(255, 255, 255, 0.95) 100%
  );
  filter: blur(1.2px);
  opacity: 0.85;
  pointer-events: none;
}
/* Flame tongues — live above the fill, not clipped */
.board-audio-flames {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 220%;
  pointer-events: none;
  overflow: visible;
}
.board-audio-flame {
  position: absolute;
  left: -4%;
  right: -4%;
  bottom: 0;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
  transform-origin: 50% 100%;
}
.board-audio-flame-a {
  opacity: 0.95;
  background:
    radial-gradient(
      ellipse 14% 70% at 12% 100%,
      rgba(255, 240, 160, 0.95) 0%,
      rgba(255, 100, 40, 0.65) 38%,
      transparent 72%
    ),
    radial-gradient(
      ellipse 12% 62% at 28% 100%,
      rgba(255, 180, 80, 0.9) 0%,
      rgba(255, 60, 30, 0.45) 42%,
      transparent 70%
    ),
    radial-gradient(
      ellipse 16% 78% at 48% 100%,
      rgba(255, 250, 200, 1) 0%,
      rgba(255, 120, 40, 0.7) 36%,
      rgba(123, 63, 228, 0.35) 58%,
      transparent 74%
    ),
    radial-gradient(
      ellipse 13% 66% at 68% 100%,
      rgba(255, 200, 100, 0.95) 0%,
      rgba(255, 70, 30, 0.5) 40%,
      transparent 70%
    ),
    radial-gradient(
      ellipse 12% 58% at 86% 100%,
      rgba(255, 230, 140, 0.9) 0%,
      rgba(255, 90, 40, 0.45) 42%,
      transparent 68%
    );
  animation: board-audio-flame-rise 0.48s ease-in-out infinite alternate;
}
.board-audio-flame-b {
  opacity: 0.8;
  background:
    radial-gradient(
      ellipse 10% 55% at 20% 100%,
      rgba(255, 255, 220, 0.95) 0%,
      transparent 62%
    ),
    radial-gradient(
      ellipse 14% 68% at 40% 100%,
      rgba(255, 130, 50, 0.85) 0%,
      transparent 65%
    ),
    radial-gradient(
      ellipse 11% 50% at 58% 100%,
      rgba(255, 240, 180, 0.9) 0%,
      transparent 58%
    ),
    radial-gradient(
      ellipse 15% 72% at 76% 100%,
      rgba(255, 90, 40, 0.8) 0%,
      transparent 66%
    ),
    radial-gradient(
      ellipse 10% 48% at 92% 100%,
      rgba(46, 211, 198, 0.55) 0%,
      transparent 60%
    );
  animation: board-audio-flame-rise 0.36s ease-in-out infinite alternate-reverse;
  animation-delay: -0.1s;
}
.board-audio-flame-c {
  opacity: 0.65;
  background:
    radial-gradient(
      ellipse 28% 45% at 35% 110%,
      rgba(123, 63, 228, 0.65) 0%,
      transparent 70%
    ),
    radial-gradient(
      ellipse 22% 50% at 62% 105%,
      rgba(58, 123, 255, 0.5) 0%,
      transparent 68%
    ),
    radial-gradient(
      ellipse 18% 40% at 82% 100%,
      rgba(46, 211, 198, 0.4) 0%,
      transparent 65%
    );
  animation: board-audio-flame-rise 0.62s ease-in-out infinite alternate;
  animation-delay: -0.22s;
}
.board-audio-ember {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 40%;
  height: 90%;
  opacity: 0.55;
  background-image:
    radial-gradient(circle, rgba(255, 245, 190, 0.95) 0 0.7px, transparent 1.2px),
    radial-gradient(circle, rgba(255, 160, 80, 0.75) 0 0.5px, transparent 1px),
    radial-gradient(circle, rgba(180, 140, 255, 0.7) 0 0.5px, transparent 1px);
  background-size: 9px 11px, 7px 13px, 11px 9px;
  background-position: 0 0, 3px 4px, 5px 1px;
  animation: board-audio-ember-drift 0.85s steps(2) infinite;
  mix-blend-mode: screen;
  pointer-events: none;
  mask-image: linear-gradient(to top, transparent 0%, #000 40%, #000 100%);
  -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 40%, #000 100%);
}
/* Hot leading edge — white-hot tip of the burn front */
.board-audio-tip {
  position: absolute;
  right: -2px;
  bottom: -1px;
  width: 14px;
  height: 200%;
  transform: translateX(30%);
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 70% 55% at 50% 85%,
      rgba(255, 255, 240, 0.95) 0%,
      rgba(255, 200, 100, 0.75) 28%,
      rgba(255, 90, 40, 0.45) 52%,
      transparent 72%
    ),
    radial-gradient(
      ellipse 45% 70% at 50% 50%,
      rgba(255, 160, 60, 0.55) 0%,
      transparent 70%
    );
  filter: blur(0.4px);
  animation: board-audio-tip-flicker 0.4s ease-in-out infinite alternate;
  mix-blend-mode: screen;
  opacity: 0;
}
.board-audio-fire.has-progress .board-audio-tip {
  opacity: 1;
}

.board-audio-thumb {
  position: absolute;
  top: auto;
  bottom: 2px;
  left: 0%;
  width: 14px;
  height: 14px;
  margin: 0 0 0 -7px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 35% 28%,
      #fffdf0 0%,
      #ffe08a 28%,
      #ff9a3c 52%,
      #ff4a18 78%,
      #7b3fe4 100%
    );
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  box-shadow:
    0 0 12px rgba(255, 120, 50, 0.95),
    0 0 22px rgba(255, 70, 25, 0.55),
    0 0 8px rgba(123, 63, 228, 0.35),
    0 1px 3px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  z-index: 3;
}
.board-audio-track.is-scrubbing .board-audio-thumb,
.board-audio-card.is-playing .board-audio-thumb {
  box-shadow:
    0 0 14px rgba(255, 160, 70, 1),
    0 0 26px rgba(255, 80, 30, 0.75),
    0 0 12px rgba(123, 63, 228, 0.45),
    0 1px 3px rgba(0, 0, 0, 0.5);
  transform: scale(1.08);
  transform-origin: center bottom;
}
.board-audio-time {
  flex: 0 0 auto;
  font-size: 0.68rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 215, 185, 0.88);
  letter-spacing: 0.02em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  pointer-events: none;
  min-width: 4.6rem;
  text-align: right;
}
/* Hidden engine */
.board-image-wrap .board-audio {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  left: -9999px !important;
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

@keyframes board-audio-heat-shift {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}
@keyframes board-audio-flame-rise {
  0% {
    transform: translateY(10%) scaleY(0.88) scaleX(1.04);
    opacity: 0.72;
  }
  100% {
    transform: translateY(-22%) scaleY(1.18) scaleX(0.94);
    opacity: 1;
  }
}
@keyframes board-audio-ember-drift {
  0% {
    background-position: 0 0, 3px 4px, 5px 1px;
    opacity: 0.4;
  }
  50% {
    opacity: 0.7;
  }
  100% {
    background-position: 2px -8px, 5px -4px, 7px -6px;
    opacity: 0.45;
  }
}
@keyframes board-audio-tip-flicker {
  0% {
    transform: translateX(30%) scaleY(0.9) scaleX(1.05);
    opacity: 0.75;
  }
  100% {
    transform: translateX(30%) scaleY(1.15) scaleX(0.92);
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .board-audio-fill,
  .board-audio-heat,
  .board-audio-flame,
  .board-audio-ember,
  .board-audio-tip {
    animation: none !important;
  }
  .board-audio-tip {
    opacity: 0.9;
  }
}

/* ===== Custom video player chrome (Delve glass) =====
   Shell is always pointer-events:none so resize handles / drag still work.
   Only bigplay + bottom bar receive clicks. */
.board-image-wrap .board-video-chrome {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none !important;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.15s ease;
  background: linear-gradient(
    180deg,
    rgba(8, 6, 18, 0.08) 0%,
    transparent 28%,
    transparent 55%,
    rgba(6, 4, 14, 0.72) 100%
  );
}
/* Show chrome only while selected or hovered — not forever when paused */
.board-image-wrap.is-video.is-selected .board-video-chrome,
.board-image-wrap.is-video.is-video-hover .board-video-chrome {
  opacity: 1;
}
/* Idle (no hover, not selected): fully hide — no lingering bar/play */
.board-image-wrap.is-video:not(.is-selected):not(.is-video-hover)
  .board-video-chrome {
  opacity: 0 !important;
  pointer-events: none !important;
}
/* Video frame is a size container so play btn tracks board size + zoom */
.board-image-wrap.is-video {
  container-type: size;
  container-name: delve-video;
  /* Zoom-out boost, but never larger than this box can hold (--v-ui-max from JS) */
  --v-ui: min(var(--media-ui-scale, 1), var(--v-ui-max, 4));
}
.board-video-bigplay {
  position: absolute;
  left: 50%;
  top: 50%;
  /* Size from video box: ~22% of shorter side (world px).
     --v-play is set in JS; --v-ui counters zoom-out but stays fit-capped. */
  --v-play-size: clamp(
    22px,
    var(--v-play, 22cqmin),
    96px
  );
  width: var(--v-play-size);
  height: var(--v-play-size);
  min-width: 22px;
  min-height: 22px;
  max-width: 42%;
  max-height: 42%;
  border-radius: 999px;
  border: 1px solid rgba(186, 140, 255, 0.45);
  background: linear-gradient(
    165deg,
    rgba(40, 32, 64, 0.88) 0%,
    rgba(12, 10, 22, 0.92) 100%
  );
  color: #f0eaff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  /* Only interactive while chrome is visible (hover/selected) */
  pointer-events: none;
  padding: 0;
  transform: translate(-50%, -50%) scale(var(--v-ui, 1));
  transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease, opacity 0.12s ease, width 0.08s ease, height 0.08s ease;
}
.board-video-bigplay svg {
  width: 48%;
  height: 48%;
  display: block;
  flex-shrink: 0;
}
.board-image-wrap.is-video.is-selected .board-video-bigplay,
.board-image-wrap.is-video.is-video-hover .board-video-bigplay {
  pointer-events: auto;
}
.board-video-bigplay:hover {
  border-color: rgba(125, 211, 252, 0.55);
  transform: translate(-50%, -50%) scale(calc(var(--v-ui, 1) * 1.06));
  color: #fff;
}
.board-video-chrome.is-playing .board-video-bigplay {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(calc(var(--v-ui, 1) * 0.9));
}
.board-video-chrome.is-playing:hover .board-video-bigplay,
.board-image-wrap.is-video-hover .board-video-chrome.is-playing .board-video-bigplay {
  opacity: 0.92;
  pointer-events: auto;
}
.board-video-bigplay .ico-pause,
.board-video-btn .ico-pause,
.board-video-chrome.is-playing .board-video-bigplay .ico-play,
.board-video-chrome.is-playing .board-video-pp .ico-play {
  display: none;
}
.board-video-chrome.is-playing .board-video-bigplay .ico-pause,
.board-video-chrome.is-playing .board-video-pp .ico-pause {
  display: block;
}
.board-video-chrome.is-paused .board-video-bigplay .ico-play,
.board-video-chrome.is-paused .board-video-pp .ico-play {
  display: block;
}
/*
  Control bar: always visually fits the video width.
  Pre-shrink width by 1/--v-ui, then scale up → net width = full inset.
  --v-ui is capped by box size so height won't overflow short clips.
*/
.board-video-bar {
  position: absolute;
  left: 50%;
  right: auto;
  bottom: 0.35rem;
  width: calc((100% - 1.1rem) / max(var(--v-ui, 1), 0.01));
  max-width: calc((100% - 1.1rem) / max(var(--v-ui, 1), 0.01));
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.45rem;
  border-radius: 0.65rem;
  border: 1px solid rgba(155, 92, 240, 0.32);
  background: linear-gradient(
    165deg,
    rgba(28, 24, 46, 0.88) 0%,
    rgba(10, 8, 18, 0.92) 100%
  );
  backdrop-filter: blur(12px) saturate(1.15);
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  margin: 0;
  pointer-events: none;
  transform: translateX(-50%) scale(var(--v-ui, 1));
  transform-origin: bottom center;
}
.board-image-wrap.is-video.is-selected .board-video-bar,
.board-image-wrap.is-video.is-video-hover .board-video-bar {
  pointer-events: auto;
}
.board-video-btn {
  flex: 0 0 auto;
  width: 1.7rem;
  height: 1.7rem;
  padding: 0;
  border-radius: 0.4rem;
  border: 1px solid rgba(155, 92, 240, 0.28);
  background: rgba(0, 0, 0, 0.28);
  color: #e8e4ff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.board-video-btn:hover {
  border-color: rgba(125, 211, 252, 0.45);
  color: #fff;
}
.board-video-time {
  flex: 0 0 auto;
  font-size: 0.65rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: rgba(226, 232, 240, 0.85);
  min-width: 2rem;
  text-align: center;
}
.board-video-seek {
  flex: 1 1 auto;
  min-width: 0;
  height: 0.35rem;
  margin: 0;
  accent-color: #a78bfa;
  cursor: pointer;
}
/* Very short/narrow videos: drop time labels so the seek still fits */
@container delve-video (max-width: 200px), delve-video (max-height: 120px) {
  .board-video-time {
    display: none;
  }
  .board-video-btn {
    width: 1.45rem;
    height: 1.45rem;
  }
  .board-video-bar {
    gap: 0.25rem;
    padding: 0.28rem 0.35rem;
  }
}
.board-video-chrome.is-muted .ico-vol {
  display: none;
}
.board-video-chrome:not(.is-muted) .ico-mute {
  display: none;
}
/* Tiny board videos: collapse bar to essentials */
.board-image-wrap.is-video {
  min-width: 0;
}
@media (max-width: 0) {
  /* placeholder — size handled by container queries where supported */
}
.board-image-wrap.is-video .board-image-frame {
  background: #0a0a12;
}
/* Cropped media: frame clips; media can sit larger/offset inside */
.board-image-wrap.is-cropped .board-image-frame {
  overflow: hidden !important;
}
.board-image-wrap.is-cropped .board-image {
  /* Layout set inline by applyMediaLayout */
  max-width: none !important;
  max-height: none !important;
}
.board-image-wrap.is-panning-media {
  cursor: grab !important;
}
.board-image-wrap.is-panning-media.is-dragging {
  cursor: grabbing !important;
}
/* Instant paste: frosted glass only inside the frame (not a free-floating border) */
.board-image-placeholder {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: 4px;
  overflow: hidden;
  background: rgba(16, 14, 24, 0.28);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
}
.board-image-wrap.is-pending .board-image-frame {
  border-color: rgba(210, 210, 220, 0.42);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
  background: rgba(12, 10, 18, 0.2);
}
.board-image-wrap.is-pending .board-image {
  opacity: 1;
  /* No scale() — scale + overflow:visible painted a soft halo ("weird border") */
  filter: blur(10px) saturate(1.05);
  transform: none;
}
.board-image-wrap.is-loaded:not(.is-pending) .board-image-placeholder {
  display: none !important;
}
.board-image-wrap.is-loaded:not(.is-pending) .board-image {
  opacity: 1;
  filter: none;
  transform: none;
}
.board-image-wrap.is-pending.is-selected .board-image-frame {
  border-color: rgba(125, 211, 252, 0.75);
}
/* File drag-over affordance — only below the glass topbar, never over chrome */
#canvas-wrapper.is-file-drop {
  cursor: copy;
}
#canvas-wrapper.is-file-drop::after {
  content: "";
  position: absolute;
  /* JS sets --file-drop-inset-top from topbar bottom; 72px matches delve-panel fallback */
  top: var(--file-drop-inset-top, 72px);
  left: 10px;
  right: 10px;
  bottom: 10px;
  border: 2px dashed rgba(186, 140, 255, 0.55);
  border-radius: 10px;
  background: rgba(12, 8, 24, 0.18);
  box-sizing: border-box;
  pointer-events: none;
  z-index: 100;
}
.img-handle {
  position: absolute;
  width: 18px;
  height: 18px;
  background: #66b3ff;
  border: 2px solid #fff;
  border-radius: 4px;
  /* Above video chrome (z:4) so corners always grab */
  z-index: 200 !important;
  display: none;
  box-sizing: border-box;
  pointer-events: auto !important;
  touch-action: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}
.img-handle::before {
  content: "";
  position: absolute;
  inset: -12px;
  /* Invisible pad around handle for easier grabs */
}
.board-image-wrap.is-selected .img-handle { display: block; }
/* Video selected: keep handles reachable even over chrome */
.board-image-wrap.is-video.is-selected .img-handle {
  display: block !important;
  pointer-events: auto !important;
  z-index: 200 !important;
}
.img-handle-nw { left: -9px; top: -9px; cursor: nwse-resize; }
.img-handle-ne { right: -9px; top: -9px; cursor: nesw-resize; }
.img-handle-sw { left: -9px; bottom: -9px; cursor: nesw-resize; }
.img-handle-se { right: -9px; bottom: -9px; cursor: nwse-resize; }
/* (board-image rules live under .board-image-wrap above) */
.node.selected:not(.node-text) { outline: 2px solid #66b3ff; outline-offset: 2px; }
/* Held / selected / remote-live nodes stack above delve-tagged peers */
#view-canvas .node {
  z-index: 10;
}
#view-canvas .node.selected {
  z-index: 40;
}
#view-canvas .node.node-text {
  z-index: 11;
}
#view-canvas .node.is-dragging,
#view-canvas .node[data-live-drag="1"] {
  z-index: 60;
}
#view-canvas .board-image-wrap.is-selected {
  z-index: 40;
}
#view-canvas .board-image-wrap.is-dragging,
#view-canvas .board-image-wrap[data-live-drag="1"] {
  z-index: 60;
}
/* Legacy corner badge removed — notes use live-fire underlay */
#view-canvas .delve-icon,
.delve-icon {
  display: none !important;
}
/* Legacy #delves-list fixed corner styles removed — see #view-canvas .canvas-notes-list */
.delve-item {
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid transparent;
}
.delve-item:hover { background: rgba(123, 63, 228, 0.18); }

/* Legacy .search-result base — canvas panel uses more specific rules above */
.search-result {
  padding: 8px 10px;
  cursor: pointer;
  border-bottom: 1px solid transparent;
  background: transparent;
  color: inherit;
  font: inherit;
}
.search-result:hover { background: rgba(123, 63, 228, 0.18); }

/* ===== Shell: lobby + canvas navigation ===== */
.shell-nav {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 1200;
  font-family: Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #e4e0ff;
  background:
    linear-gradient(165deg, rgba(36, 30, 58, 0.92) 0%, rgba(10, 9, 18, 0.96) 100%);
  border: 1px solid rgba(155, 92, 240, 0.38);
  border-radius: 999px;
  padding: 8px 16px;
  text-decoration: none;
  cursor: pointer;
  display: none;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.35),
    0 8px 20px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    color 0.15s ease,
    transform 0.15s ease,
    background 0.2s ease;
}
.shell-nav:hover {
  color: #fff;
  border-color: rgba(62, 232, 208, 0.48);
  background:
    linear-gradient(165deg, rgba(42, 36, 72, 0.95) 0%, rgba(14, 12, 28, 0.98) 100%);
  box-shadow:
    0 0 0 1px rgba(62, 232, 208, 0.1),
    0 12px 26px rgba(58, 123, 255, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transform: translateY(-1px);
}
.shell-nav:focus-visible {
  outline: 2px solid rgba(158, 120, 255, 0.75);
  outline-offset: 3px;
}
.shell-nav:active {
  transform: translateY(0);
}
body.view-lobby #btn-home { display: inline-block !important; }
body.view-canvas #btn-back { display: inline-block !important; }
/* flex — not block — so short lobbies pin .lobby-contact to the page bottom */
body.view-lobby #view-lobby { display: flex !important; }
/* Boot hide must win over any later “visible” rules (first-visit CSS race) */
body.view-lobby.lobby-boot #view-lobby { visibility: hidden !important; }
body.view-lobby.lobby-ready #view-lobby { visibility: visible !important; }
body.view-canvas #view-lobby { display: none !important; }
body.view-lobby #view-canvas { display: none !important; }
body.view-canvas #view-canvas { display: block !important; }

/* Never leave intro over the lobby after boot */
#intro-screen[aria-hidden="true"],
#intro-screen[style*="display: none"] {
  pointer-events: none !important;
}

#view-lobby.view-lobby-root {
  --delve-purple: #7b3fe4;
  --delve-violet: #9b5cf0;
  --delve-blue: #3a7bff;
  --delve-sky: #4a9bff;
  --delve-cyan: #2ed3c6;
  --delve-mint: #3ee8d0;
  --delve-void: #07060f;
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background:
    radial-gradient(ellipse 90% 55% at 50% -10%, rgba(123, 63, 228, 0.22) 0%, transparent 55%),
    radial-gradient(ellipse 70% 40% at 80% 10%, rgba(46, 211, 198, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 20%, #14122a 0%, var(--delve-void) 55%, #000 100%);
  color: #eee;
  font-family: Arial, sans-serif;
  scrollbar-width: auto;
  scrollbar-color: #3a3a42 #0a0a12;
  scrollbar-gutter: stable;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
/* Lobby: only the contact email is selectable (plus form fields for rename/folder) */
#view-lobby .lobby-contact .addr,
#view-lobby #lobby-contact-btn {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}
#view-lobby input,
#view-lobby textarea {
  -webkit-user-select: text;
  user-select: text;
}

/* Full-viewport fire layer — flames at bottom; plasma may rise into the sky */
.lobby-fire {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  /* Own compositor layer — scroll content without repainting fire every frame */
  transform: translateZ(0);
  contain: strict;
  /* Visible as soon as canvas paints — no fade-in delay on refresh */
  opacity: 1;
  filter: none;
  mix-blend-mode: normal;
}
.lobby-fire:not(.is-active) {
  opacity: 0;
}
body.view-canvas .lobby-fire {
  opacity: 0 !important;
}
.lobby-fire-canvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  /* Keep canvas off the main scroll paint path */
  transform: translateZ(0);
  /* Hits go through to #view-lobby; neurons are picked in JS */
  pointer-events: none;
}
/* While dragging a neuron, avoid text selection / touch scroll fighting */
body.view-lobby.lobby-neuron-drag {
  cursor: grabbing !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}
body.view-lobby.lobby-neuron-drag #view-lobby {
  touch-action: none;
}
/* Soft lift so content doesn’t sit in the flames */
#view-lobby .lobby-body {
  position: relative;
  z-index: 2;
  /* Fire is a fixed overlay — do not reserve a huge bottom pad (that forced
     scroll even with one card). Modest clearance only. */
}

@media (prefers-reduced-motion: reduce) {
  .lobby-fire {
    transition: none;
  }
}
#view-canvas.view-canvas-root {
  position: fixed;
  inset: 0;
  z-index: 40;
}
.shell-nav {
  z-index: 200 !important;
}
.lobby-body {
  /* Natural document height — footer is a sibling after this block. */
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  width: 100%;
  max-width: 720px;
  min-height: 0;
  margin: 6.5rem auto 0;
  padding: 0 20px 2rem;
  box-sizing: border-box;
}
/* Short signed-in lobby: body fills the viewport so Privacy/Help/email sit at the bottom.
   Long lobby: body grows with cards; footer follows after scroll (no mid-page overlap). */
body.view-lobby:not(.lobby-guest) #view-lobby .lobby-body {
  min-height: calc(100dvh - 6.5rem - 4.75rem);
}
@media (max-width: 600px) {
  .lobby-body {
    margin-top: 5.75rem;
    padding-bottom: 1.5rem;
  }
  body.view-lobby:not(.lobby-guest) #view-lobby .lobby-body {
    min-height: calc(100dvh - 5.75rem - 4.75rem);
  }
}
.lobby-title {
  font-family: Orbitron, Arial, sans-serif;
  font-size: 2.53rem; /* ~15% larger than 2.2rem */
  margin: 0;
  letter-spacing: 0.06em;
  line-height: 1.1;
  color: #fff;
  background: none;
  -webkit-text-fill-color: #fff;
}
.lobby-sub { color: #9aa3b8; margin: 0 0 20px; min-height: 1.35em; line-height: 1.45; }
.lobby-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 0.55rem;
  min-height: 2.5rem;
}
/* Grey rounded identity: name left, avatar right — top-right of title row */
.lobby-id-chip {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  max-width: min(15rem, 100%);
  margin: 0;
  flex-shrink: 0;
  padding: 0.3rem 0.35rem 0.3rem 0.8rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background:
    linear-gradient(165deg, rgba(51, 65, 85, 0.55) 0%, rgba(30, 41, 59, 0.72) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 8px 20px rgba(0, 0, 0, 0.28);
  box-sizing: border-box;
}
.lobby-id-chip.is-ghost {
  opacity: 0.42;
}
.lobby-id-name {
  min-width: 0;
  flex: 1 1 auto;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(226, 232, 240, 0.94);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#view-lobby .lobby-id-chip .lobby-user {
  flex-shrink: 0;
  box-sizing: border-box;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  max-width: 36px !important;
  max-height: 36px !important;
  border-radius: 50%;
  padding: 0 !important;
  margin: 0;
  overflow: hidden;
  display: inline-grid !important;
  place-items: center;
  font-size: 11px !important;
  font-weight: 750;
  letter-spacing: 0.02em;
  line-height: 1;
  color: #e8edff;
  background: linear-gradient(160deg, #3b465c 0%, #1e293b 100%);
  border: 1px solid rgba(226, 232, 240, 0.16);
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.55);
}
#view-lobby .lobby-id-chip .lobby-user.has-avatar {
  background: #0b1020;
}
#view-lobby .lobby-id-chip .lobby-user-av,
#view-lobby .lobby-id-chip .lobby-user img {
  width: 36px !important;
  height: 36px !important;
  max-width: 36px !important;
  max-height: 36px !important;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 50%;
  pointer-events: none;
}
#view-lobby .lobby-id-chip .lobby-user-initials {
  line-height: 1;
  font-size: 11px !important;
  user-select: none;
}
#view-lobby .lobby-id-chip .lobby-user.is-ghost {
  opacity: 0.5;
  color: transparent;
}
/* Admin avatar opens /admin — no special border/ring */
#view-lobby .lobby-id-chip .lobby-user.is-admin-link {
  cursor: pointer;
}
#view-lobby .lobby-id-chip .lobby-user.is-admin-link:hover {
  filter: brightness(1.08);
}
.lobby-locked {
  text-align: center;
  padding: 48px 16px;
  max-width: 480px;
  margin: 0 auto;
}
.lobby-locked-title {
  font-size: 1.05rem;
  font-weight: 650;
  color: rgba(226, 232, 255, 0.92);
  letter-spacing: 0.02em;
  margin: 0 0 10px;
}
.lobby-locked-body {
  color: rgba(180, 190, 210, 0.82);
  line-height: 1.55;
  margin: 0 0 22px;
  font-size: 0.95rem;
}

/* Hide shell until /api/me paints correct chrome (see also body.view-lobby.lobby-boot) */
body.lobby-boot #view-lobby {
  visibility: hidden !important;
}
body.lobby-ready #view-lobby {
  visibility: visible !important;
}

/* ── Guest / not signed in: soft focus background + centered hero ── */
body.lobby-guest .lobby-fire {
  /* Slight soft-focus only — not a heavy frosted veil */
  filter: blur(1.5px);
  opacity: 0.9;
  transition: filter 0.35s ease, opacity 0.35s ease;
}
body.lobby-guest #view-lobby.view-lobby-root::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Light dim only — no extra backdrop blur (that stacked too hard) */
  background:
    radial-gradient(ellipse 70% 55% at 50% 42%, rgba(12, 14, 28, 0.08) 0%, transparent 65%),
    rgba(4, 5, 12, 0.14);
}
body.lobby-guest .lobby-locked-wrap {
  width: 100%;
  max-width: 26rem;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: none;
}
body.lobby-guest .lobby-locked-wrap .lobby-title {
  /* signed-in 2.53rem × ~1.3 */
  font-size: 3.29rem;
  line-height: 1.1;
  margin: 0 0 0.85rem;
  text-align: center;
  color: #fff;
  -webkit-text-fill-color: #fff;
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.45);
}
body.lobby-guest .lobby-locked-wrap .lobby-sub {
  text-align: center;
  max-width: 20rem;
  margin: 0 auto 1.75rem;
  font-size: 1.08rem;
  line-height: 1.45;
  color: rgba(220, 226, 240, 0.78);
  font-weight: 450;
}
body.lobby-guest .lobby-locked-panel {
  width: 100%;
  padding: 1.35rem 1.4rem 1.5rem;
  border-radius: 18px;
  text-align: center;
  background:
    linear-gradient(165deg, rgba(22, 20, 38, 0.72) 0%, rgba(8, 8, 16, 0.78) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.35),
    0 18px 48px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
body.lobby-guest .lobby-locked-wrap .lobby-cta {
  margin-top: 0.15rem;
  width: 100%;
  max-width: 18rem;
}
@media (max-width: 600px) {
  body.lobby-guest .lobby-locked-wrap .lobby-title {
    font-size: 2.76rem;
  }
}
/* Shared dark-glass control language */
.lobby-cta,
.lobby-new,
.lobby-edit-save,
.lobby-edit-cancel,
.lobby-card-action {
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Primary CTA — Hub login / Retry (glass + soft accent edge, not solid blue slab) */
.lobby-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 11px 22px;
  background:
    linear-gradient(165deg, rgba(40, 32, 68, 0.95) 0%, rgba(12, 10, 24, 0.98) 100%);
  color: #f0ecff !important;
  border: 1px solid rgba(155, 92, 240, 0.5);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-decoration: none;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.35),
    0 10px 28px rgba(80, 40, 180, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.15s ease,
    color 0.15s ease,
    background 0.2s ease;
}
.lobby-cta:hover {
  color: #fff !important;
  border-color: rgba(62, 232, 208, 0.55);
  background:
    linear-gradient(165deg, rgba(52, 40, 90, 0.98) 0%, rgba(16, 14, 32, 0.99) 100%);
  box-shadow:
    0 0 0 1px rgba(62, 232, 208, 0.12),
    0 14px 32px rgba(58, 123, 255, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
}
.lobby-cta:focus-visible {
  outline: 2px solid rgba(158, 120, 255, 0.75);
  outline-offset: 3px;
}
.lobby-cta:active {
  transform: translateY(0);
}
.lobby-cta:disabled {
  opacity: 0.5;
  cursor: wait;
  transform: none;
}
.lobby-cta-secondary {
  margin-left: 8px;
  border-color: rgba(100, 120, 180, 0.4);
  background:
    linear-gradient(165deg, rgba(28, 34, 52, 0.95) 0%, rgba(12, 14, 22, 0.98) 100%);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.3),
    0 8px 20px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.lobby-cta-secondary:hover {
  border-color: rgba(120, 150, 220, 0.55);
  background:
    linear-gradient(165deg, rgba(36, 44, 68, 0.98) 0%, rgba(16, 18, 30, 0.99) 100%);
}
.lobby-cta-ghost {
  margin-left: 8px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #c8c4d8 !important;
  box-shadow: none;
}
.lobby-cta-ghost:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(155, 92, 240, 0.4);
  box-shadow: none;
}

/* New delve — pill with icon badge */
.lobby-new {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 8px 18px 8px 8px;
  background:
    linear-gradient(165deg, rgba(36, 30, 58, 0.92) 0%, rgba(10, 9, 18, 0.96) 100%);
  color: #e4e0ff;
  border: 1px solid rgba(155, 92, 240, 0.42);
  border-radius: 999px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.4),
    0 10px 28px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.15s ease,
    color 0.15s ease,
    background 0.2s ease;
}
.lobby-new-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex-shrink: 0;
  background: linear-gradient(145deg, var(--delve-violet, #9b5cf0) 0%, var(--delve-blue, #3a7bff) 100%);
  color: #fff;
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  box-shadow: 0 2px 12px rgba(123, 63, 228, 0.5);
}
.lobby-new-label {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding-right: 4px;
}
.lobby-new:hover:not(:disabled) {
  color: #fff;
  border-color: rgba(62, 232, 208, 0.5);
  background:
    linear-gradient(165deg, rgba(42, 36, 72, 0.95) 0%, rgba(14, 12, 28, 0.98) 100%);
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(62, 232, 208, 0.12),
    0 14px 32px rgba(58, 123, 255, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
}
.lobby-new:hover:not(:disabled) .lobby-new-icon {
  background: linear-gradient(145deg, var(--delve-mint, #3ee8d0) 0%, var(--delve-sky, #4a9bff) 100%);
  box-shadow: 0 2px 14px rgba(46, 211, 198, 0.45);
}
.lobby-new:focus-visible {
  outline: 2px solid rgba(158, 120, 255, 0.75);
  outline-offset: 3px;
}
.lobby-new:active:not(:disabled) {
  transform: translateY(0);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.4),
    0 4px 14px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.lobby-new:disabled {
  opacity: 0.55;
  cursor: wait;
  transform: none;
}

.lobby-actions {
  margin-bottom: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.lobby-actions .lobby-cta,
.lobby-actions .lobby-new { margin-top: 0; margin-left: 0; }
.lobby-section { margin-bottom: 32px; }
.lobby-section-title {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #b8a0ff;
  margin: 0 0 12px;
  border-bottom: 1px solid rgba(123, 63, 228, 0.28);
  padding-bottom: 8px;
}
/* iOS-style home stream: free cards + folder tiles */
.lobby-home {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-left: 1.15rem;
  padding-right: 1.15rem;
  margin-left: -0.15rem;
  margin-right: -0.15rem;
  box-sizing: border-box;
}
.lobby-folder-tile {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: stretch;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid #333;
  border-radius: 12px;
  overflow: visible;
  position: relative;
  z-index: 1;
  touch-action: pan-y;
  cursor: grab;
}
.lobby-folder-tile.is-dragging {
  z-index: 10050 !important;
  opacity: 0.96;
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(155, 92, 240, 0.55),
    0 0 28px rgba(123, 63, 228, 0.2);
  cursor: grabbing !important;
  touch-action: none;
  user-select: none;
  transition: none !important;
}
.lobby-folder-open {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  background: transparent;
  border: none;
  color: #eee;
  padding: 12px 14px;
  cursor: grab;
  font-family: inherit;
  min-width: 0;
  width: 100%;
}
.lobby-folder-tile:hover .lobby-folder-open,
.lobby-folder-tile.is-editing .lobby-folder-open {
  background: rgba(255, 255, 255, 0.04);
}
.lobby-folder-mini {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 3px;
  width: 48px;
  height: 48px;
  padding: 4px;
  border-radius: 12px;
  background: linear-gradient(
    160deg,
    rgba(80, 60, 140, 0.45) 0%,
    rgba(30, 24, 50, 0.85) 100%
  );
  border: 1px solid rgba(155, 92, 240, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.lobby-folder-cell {
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: rgba(20, 16, 32, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-family: Orbitron, Arial, sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #c4b5fd;
  line-height: 1;
  overflow: hidden;
}
.lobby-folder-cell.is-empty {
  background: rgba(255, 255, 255, 0.03);
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.06);
}
.lobby-folder-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.lobby-folder-name {
  font-family: Orbitron, Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #eee;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lobby-folder-count {
  font-size: 11px;
  font-weight: 600;
  color: #888;
}
.lobby-folder-tile .lobby-card-actions {
  grid-column: 2;
  grid-row: 1;
}
.lobby-folder-tile:hover .lobby-card-actions,
.lobby-folder-tile.is-editing .lobby-card-actions,
.lobby-folder-tile.is-menu-open .lobby-card-actions {
  opacity: 1;
  pointer-events: auto;
  min-width: 44px;
  width: 44px;
  padding: 8px 8px 8px 4px;
  border-left-color: rgba(155, 92, 240, 0.16);
}
.lobby-folder-tile.is-editing,
.lobby-folder-tile.is-menu-open {
  z-index: 5;
  overflow: visible;
}
/* Drop-to-stack highlight (iOS folder aim) */
.lobby-card.is-stack-target,
.lobby-folder-tile.is-stack-target {
  border-color: rgba(62, 232, 208, 0.65) !important;
  box-shadow:
    0 0 0 1px rgba(62, 232, 208, 0.35),
    0 0 22px rgba(62, 232, 208, 0.18);
  transform: scale(1.01);
}
.lobby-card.is-stack-target::after,
.lobby-folder-tile.is-stack-target::after {
  content: "Release to stack";
  position: absolute;
  right: 12px;
  top: 8px;
  z-index: 4;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #3ee8d0;
  pointer-events: none;
}
/* Folder open overlay — no scrollbars; menus float on body to the right of cog */
.lobby-folder-sheet.lobby-sheet {
  width: min(26rem, calc(100vw - 2rem));
  max-width: min(26rem, calc(100vw - 2rem));
  max-height: min(78vh, 36rem);
  overflow: hidden; /* never show sheet scrollbars */
  box-sizing: border-box;
}
#lobby-folder-sheet-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: min(58vh, 420px);
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  /* Allow many delves without a visible scrollbar */
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* old Edge */
}
#lobby-folder-sheet-body::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}
#lobby-folder-sheet-body .lobby-card {
  margin: 0;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
}
#lobby-folder-sheet-body .lobby-card.is-dragging {
  overflow: visible;
  cursor: grabbing !important;
}
#lobby-folder-sheet-body .lobby-card-placeholder {
  flex-shrink: 0;
}
#lobby-folder-sheet-body .lobby-card.is-editing {
  overflow: visible;
  z-index: 6;
}
#lobby-folder-sheet-body .lobby-card-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#lobby-folder-sheet-body .lobby-card-open {
  min-width: 0;
}
/* Floating menu (pinned to body, right of cog) */
.lobby-card-menu-floating {
  position: fixed !important;
  z-index: 10060 !important;
  min-width: 7.5rem;
  /* bridge not needed when floating — pointer is free */
}
.lobby-card-menu-floating::before {
  display: none;
}
.lobby-grid {
  display: flex;
  flex-direction: column;
  gap: 7px;
  /* Room for the outside-left ">" hover marker; match inset on the right */
  padding-left: 1.15rem;
  padding-right: 1.15rem;
  margin-left: -0.15rem;
  margin-right: -0.15rem;
  box-sizing: border-box;
}
.lobby-card {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto;
  align-items: stretch;
  background: rgba(255,255,255,0.04);
  border: 1px solid #333;
  border-radius: 9px;
  overflow: visible;
  position: relative;
  z-index: 1;
  min-height: 0;
}
/* Live co-presence pill — avatar + name + dithered fire when someone is in the delve */
.lobby-card-live,
.lobby-folder-tile .lobby-card-live {
  position: absolute;
  right: 0.55rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 36px;
  max-width: min(64%, 16rem);
  padding: 4px 10px 4px 5px;
  border-radius: 999px;
  border: 1px solid rgba(155, 92, 240, 0.48);
  background:
    linear-gradient(165deg, rgba(20, 16, 36, 0.92) 0%, rgba(8, 8, 16, 0.96) 100%);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.35),
    0 4px 16px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  overflow: hidden;
  /* Keep fire blend from tinting avatars / page chrome */
  isolation: isolate;
  pointer-events: auto; /* click → open delve + follow that person */
  cursor: pointer;
  box-sizing: border-box;
  transition: right 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
}
.lobby-card-live:hover,
.lobby-folder-tile .lobby-card-live:hover {
  border-color: rgba(186, 140, 255, 0.65);
  box-shadow:
    0 0 0 1px rgba(155, 92, 240, 0.25),
    0 6px 18px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.lobby-card-live:focus-visible {
  outline: 2px solid rgba(186, 140, 255, 0.75);
  outline-offset: 2px;
}
.lobby-card-live[hidden],
.lobby-folder-tile .lobby-card-live[hidden] {
  display: none !important;
}
/* Room for av+name pill at rest */
.lobby-card.has-live-presence .lobby-card-open,
.lobby-folder-tile.has-live-presence .lobby-folder-open {
  padding-right: 8.5rem;
}
/* Cog column is 36px wide — clear it fully when it expands on hover/menu */
.lobby-card:hover.has-live-presence .lobby-card-live,
.lobby-card.is-menu-open.has-live-presence .lobby-card-live,
.lobby-card.is-editing.has-live-presence .lobby-card-live,
.lobby-folder-tile:hover.has-live-presence .lobby-card-live,
.lobby-folder-tile.is-menu-open.has-live-presence .lobby-card-live,
.lobby-folder-tile.is-editing.has-live-presence .lobby-card-live {
  right: 3.35rem; /* ~54px — past 36px cog + padding */
}
.lobby-card:hover.has-live-presence .lobby-card-open,
.lobby-card.is-menu-open.has-live-presence .lobby-card-open,
.lobby-card.is-editing.has-live-presence .lobby-card-open,
.lobby-folder-tile:hover.has-live-presence .lobby-folder-open,
.lobby-folder-tile.is-menu-open.has-live-presence .lobby-folder-open,
.lobby-folder-tile.is-editing.has-live-presence .lobby-folder-open {
  padding-right: 11.5rem;
}
.lobby-card-live-fire {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  /* Under content only — no screen blend (that turned reds orange/cyan) */
  opacity: 0.72;
  mix-blend-mode: normal;
  border-radius: inherit;
  z-index: 0;
}
.lobby-card-live-body {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  max-width: 100%;
}
.lobby-card-live-avs {
  display: inline-flex;
  align-items: center;
  flex-direction: row-reverse;
  flex-shrink: 0;
  padding-left: 0.1rem;
  /* Stack above fire so embers never composite into faces */
  position: relative;
  z-index: 2;
  isolation: isolate;
}
.lobby-card-live-av {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Smaller face + strong outline (helps translucent Discord avatars) */
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  margin-left: -0.32rem;
  border-radius: 999px;
  overflow: hidden;
  isolation: isolate;
  /* True accent ring — mixing with white washed reds into orange/salmon */
  border: 2px solid var(--live-accent, #c4b5fd);
  background: #0f0c18;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.75),
    0 0 0 2px color-mix(in srgb, var(--live-accent, #7b3fe4) 40%, #0a0812),
    0 0 8px color-mix(in srgb, var(--live-accent, #7b3fe4) 28%, transparent);
  box-sizing: border-box;
}
.lobby-card-live-av:last-child {
  margin-left: 0;
}
.lobby-card-live-av img {
  position: static !important;
  width: 22px !important;
  height: 22px !important;
  max-width: 22px !important;
  max-height: 22px !important;
  object-fit: cover;
  display: block;
  border-radius: 999px;
  /* Fill chip behind translucent PNGs — solid so fire can't show through */
  background: #12101c;
  /* Keep face colors honest (no browser color-management surprises) */
  filter: none !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
}
.lobby-card-live-av.is-fallback {
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--live-accent, #9b5cf0) 45%, #1e1b2e) 0%,
    #12101c 100%
  );
}
.lobby-card-live-ini {
  font-size: 0.58rem;
  font-weight: 750;
  letter-spacing: 0.02em;
  color: #f0eaff;
  line-height: 1;
}
.lobby-card-live-name {
  min-width: 0;
  max-width: 7.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: rgba(244, 240, 255, 0.95);
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.75),
    0 0 10px rgba(123, 63, 228, 0.35);
  line-height: 1.15;
}
/* Terminal prompt arrow — subtle left/right sway on hover */
@keyframes lobby-console-sway {
  0%,
  100% {
    transform: translateY(-50%) translateX(0);
  }
  50% {
    transform: translateY(-50%) translateX(3px);
  }
}
#view-lobby .lobby-card::before {
  content: ">";
  position: absolute;
  left: -1.15rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  color: rgba(158, 120, 255, 0.85);
  text-shadow: 0 0 12px rgba(123, 63, 228, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.14s ease, color 0.14s ease;
}
#view-lobby .lobby-card:hover::before,
#view-lobby .lobby-card:focus-within::before,
#view-lobby .lobby-card.is-editing::before,
#view-lobby .lobby-card.is-menu-open::before {
  opacity: 1;
  color: #c4b5fd;
  animation: lobby-console-sway 2.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  #view-lobby .lobby-card:hover::before,
  #view-lobby .lobby-card:focus-within::before,
  #view-lobby .lobby-card.is-editing::before,
  #view-lobby .lobby-card.is-menu-open::before {
    animation: none;
    opacity: 1;
    transform: translateY(-50%) translateX(1px);
  }
}
.lobby-card.is-editing {
  z-index: 5;
  overflow: visible;
}
.lobby-card.is-dragging {
  z-index: 10050 !important;
  opacity: 0.96;
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(155, 92, 240, 0.55),
    0 0 28px rgba(123, 63, 228, 0.2);
  cursor: grabbing !important;
  touch-action: none;
  user-select: none;
  transition: none !important;
}
.lobby-card.is-dragging::before {
  opacity: 0 !important;
}
.lobby-card-placeholder {
  box-sizing: border-box;
  border-radius: 10px;
  border: 1px dashed rgba(155, 92, 240, 0.45);
  background: rgba(123, 63, 228, 0.08);
  margin: 0;
  pointer-events: none;
}
.lobby-card {
  touch-action: pan-y;
  cursor: grab;
}
.lobby-card .lobby-card-open {
  cursor: grab;
}
.lobby-card.is-dragging .lobby-card-open {
  cursor: grabbing;
}
body.lobby-is-reordering {
  cursor: grabbing !important;
  user-select: none !important;
}
body.lobby-is-reordering .lobby-card:not(.is-dragging),
body.lobby-is-reordering .lobby-folder-tile:not(.is-dragging) {
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}
.lobby-card-open {
  grid-column: 1;
  grid-row: 1;
  text-align: left;
  background: transparent;
  border: none;
  color: #eee;
  /* A bit taller than the original 8px vertical pad */
  padding: 12px 14px;
  cursor: pointer;
  font-family: inherit;
  min-width: 0;
  width: 100%;
  min-height: 0;
  line-height: 1.25;
}
.lobby-card:hover .lobby-card-open,
.lobby-card.is-editing .lobby-card-open {
  background: rgba(255,255,255,0.04);
}
.lobby-card-open:hover { background: rgba(255,255,255,0.06); }
/* [Avatar] | Name
           | Time / meta  */
.lobby-card-main {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  width: 100%;
  min-height: 3.15rem;
}
.lobby-card-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.18rem;
  min-width: 0;
  flex: 1 1 auto;
  text-align: left;
}
/* Discord-style delve avatar: square with rounded corners (~15% larger than 2.45rem) */
.lobby-delve-av {
  flex: 0 0 auto;
  width: 2.82rem;
  height: 2.82rem;
  border-radius: 0.55rem;
  display: grid;
  place-items: center;
  overflow: hidden;
  position: relative;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.35),
    0 2px 6px rgba(0, 0, 0, 0.28);
  user-select: none;
}
.lobby-delve-av.is-sm {
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 0.4rem;
}
.lobby-delve-av-ini {
  font-size: 0.83rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  line-height: 1;
}
.lobby-delve-av.is-sm .lobby-delve-av-ini {
  font-size: 0.63rem;
}
/* Lucide SVG on colored tile — larger relative to bubble */
.lobby-delve-av.has-svg {
  color: #fff;
}
.lobby-delve-av-svg {
  width: 72%;
  height: 72%;
  display: block;
  position: relative;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}
.lobby-delve-av.is-sm .lobby-delve-av-svg {
  width: 74%;
  height: 74%;
}
.lobby-delve-av.has-svg .lobby-delve-av-ini.is-fallback {
  display: none;
}
.lobby-delve-av.has-img .lobby-delve-av-fallback {
  display: none;
}
.lobby-delve-av-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover;
  border-radius: inherit;
  display: block;
  z-index: 1;
}
.lobby-delve-av-fallback {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-size: 0.83rem;
  font-weight: 800;
  color: #fff;
}
.lobby-card-title {
  display: block;
  width: 100%;
  font-family: Orbitron, Arial, sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin: 0 !important;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  line-height: 1.2;
}
.lobby-folder-cell.has-avatar {
  padding: 0;
  display: grid;
  place-items: center;
  background: transparent;
  border: none;
}
.lobby-folder-cell.has-avatar .lobby-delve-av {
  width: 100%;
  height: 100%;
  max-width: 2.59rem;
  max-height: 2.59rem;
  border-radius: 0.45rem;
}
.lobby-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 11px;
  color: #888;
  align-items: center;
  width: 100%;
  margin: 0;
  line-height: 1.15;
}
/* Back-compat if any cached HTML still uses title-row */
.lobby-card-title-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
  width: 100%;
}
.lobby-card-folder {
  background: rgba(100,80,200,0.25);
  color: #c8b8ff;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
}
.lobby-card-people {
  color: #8cf;
}
.lobby-card-role {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #c4b5fd;
  background: rgba(100, 80, 200, 0.22);
  border: 1px solid rgba(155, 92, 240, 0.28);
  border-radius: 999px;
  padding: 1px 8px;
  line-height: 1.35;
}
/* Lobby search / filter */
.lobby-filter-wrap {
  margin: 0 0 1.15rem;
}
.lobby-filter-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.lobby-filter-input {
  width: 100%;
  box-sizing: border-box;
  height: 2.5rem;
  padding: 0 0.85rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(15, 23, 42, 0.45);
  color: #e2e8f0;
  font: inherit;
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.lobby-filter-input::placeholder {
  color: rgba(148, 163, 184, 0.65);
}
.lobby-filter-input:focus {
  border-color: rgba(129, 140, 248, 0.55);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
.lobby-folder-sheet-title-btn {
  cursor: pointer;
  border-radius: 0.35rem;
  padding: 0.1rem 0.25rem;
  margin: -0.1rem -0.25rem;
  transition: background 0.12s ease;
}
.lobby-folder-sheet-title-btn:hover,
.lobby-folder-sheet-title-btn:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  outline: none;
}
/* Card settings — SVG cog on hover; menu opens on click */
.lobby-card-actions {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 4px 4px 4px 0;
  border-left: 1px solid transparent;
  min-width: 0;
  width: 0;
  opacity: 0;
  overflow: visible;
  pointer-events: none;
  transition: opacity 0.14s ease, width 0.14s ease, min-width 0.14s ease, padding 0.14s ease;
  z-index: 3;
}
/* Hover or explicit menu/edit — not bare :focus-within (stuck after click) */
.lobby-card:hover .lobby-card-actions,
.lobby-card.is-editing .lobby-card-actions,
.lobby-card.is-menu-open .lobby-card-actions {
  opacity: 1;
  pointer-events: auto;
  min-width: 36px;
  width: 36px;
  padding: 4px 6px 4px 2px;
  border-left-color: rgba(155, 92, 240, 0.16);
}
/* Keyboard: show cog when cog itself is focused */
.lobby-card-actions:focus-within {
  opacity: 1;
  pointer-events: auto;
  min-width: 36px;
  width: 36px;
  padding: 4px 6px 4px 2px;
  border-left-color: rgba(155, 92, 240, 0.16);
}
.lobby-card-cog {
  flex: 0 0 auto;
  width: 1.85rem;
  height: 1.85rem;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background:
    linear-gradient(165deg, rgba(40, 36, 58, 0.95) 0%, rgba(16, 14, 26, 0.98) 100%);
  color: rgba(226, 232, 240, 0.88);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 4px 12px rgba(0, 0, 0, 0.25);
  transition:
    color 0.15s ease,
    border-color 0.15s ease,
    background 0.15s ease,
    transform 0.15s ease;
  touch-action: manipulation;
}
.lobby-card-cog:hover,
.lobby-card-cog[aria-expanded="true"] {
  color: #fff;
  border-color: rgba(155, 92, 240, 0.5);
  background:
    linear-gradient(165deg, rgba(56, 46, 90, 0.98) 0%, rgba(22, 18, 40, 0.99) 100%);
  transform: rotate(28deg);
}
.lobby-card-cog:focus-visible {
  outline: 2px solid rgba(158, 120, 255, 0.65);
  outline-offset: 2px;
}
.lobby-card-cog-icon {
  display: block;
  width: 18px;
  height: 18px;
}
.lobby-card-menu {
  position: absolute;
  top: 50%;
  left: calc(100% + 6px);
  right: auto;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 6.5rem;
  padding: 0.4rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background:
    linear-gradient(165deg, rgba(28, 26, 42, 0.98) 0%, rgba(12, 11, 20, 0.99) 100%);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  z-index: 8;
}
/* Invisible bridge over the gap so the pointer never "falls through" between cog and menu */
.lobby-card-menu::before {
  content: "";
  position: absolute;
  right: 100%;
  top: -12px;
  bottom: -12px;
  width: 14px; /* covers the 6px gap + a little slack */
  background: transparent;
  pointer-events: auto;
}
.lobby-card-menu[hidden] {
  display: none !important;
}
/* Keep actions hit-area open while the menu is up (including the bridge) */
.lobby-card.is-menu-open .lobby-card-actions {
  overflow: visible;
}
.lobby-card-action {
  flex: 0 0 auto;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0.45rem;
  color: #c8c4d8;
  padding: 0.45rem 0.6rem;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  cursor: pointer;
  transition:
    color 0.15s ease,
    border-color 0.15s ease,
    background 0.15s ease;
}
.lobby-card-action:hover {
  color: #fff;
  border-color: rgba(155, 92, 240, 0.35);
  background: rgba(123, 63, 228, 0.18);
}
.lobby-card-action:focus-visible {
  outline: 2px solid rgba(158, 120, 255, 0.65);
  outline-offset: 1px;
}
.lobby-card-danger {
  border-color: rgba(255, 80, 80, 0.12);
}
.lobby-card-danger:hover {
  color: #ffb0b0;
  border-color: rgba(255, 90, 90, 0.45);
  background:
    linear-gradient(165deg, rgba(72, 24, 28, 0.95) 0%, rgba(28, 10, 12, 0.98) 100%);
  box-shadow:
    0 4px 12px rgba(160, 30, 40, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* Overlay edit panel — does not expand card height (no list jitter) */
.lobby-card-edit {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% - 2px);
  z-index: 20;
  padding: 12px 14px 14px;
  border: 1px solid rgba(155, 92, 240, 0.28);
  border-radius: 0 0 12px 12px;
  background:
    linear-gradient(180deg, rgba(18, 16, 30, 0.98) 0%, rgba(10, 9, 18, 0.99) 100%);
  box-shadow:
    0 14px 32px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.lobby-card-edit[hidden] { display: none !important; }
.lobby-create-panel {
  margin: 0 0 20px;
  padding: 14px 16px;
  background:
    linear-gradient(165deg, rgba(36, 30, 58, 0.55) 0%, rgba(12, 14, 28, 0.75) 100%);
  border: 1px solid rgba(155, 92, 240, 0.32);
  border-radius: 14px;
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.lobby-edit-label {
  display: block;
  font-size: 12px;
  color: #a8a0c0;
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}
.lobby-edit-input {
  width: 100%;
  box-sizing: border-box;
  background: rgba(8, 8, 14, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: #eee;
  font-size: 15px;
  padding: 10px 12px;
  font-family: inherit;
  margin-bottom: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.lobby-edit-input:focus {
  outline: none;
  border-color: rgba(155, 92, 240, 0.55);
  box-shadow:
    0 0 0 3px rgba(123, 63, 228, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.lobby-edit-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.lobby-edit-save {
  background:
    linear-gradient(145deg, rgba(123, 63, 228, 0.95) 0%, rgba(58, 123, 255, 0.95) 100%);
  color: #fff;
  border: 1px solid rgba(180, 150, 255, 0.35);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow:
    0 6px 16px rgba(80, 50, 180, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transition:
    filter 0.15s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease;
}
.lobby-edit-save:hover {
  filter: brightness(1.08);
  box-shadow:
    0 8px 20px rgba(58, 123, 255, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transform: translateY(-1px);
}
.lobby-edit-save:focus-visible {
  outline: 2px solid rgba(158, 120, 255, 0.75);
  outline-offset: 2px;
}
.lobby-edit-save:active { transform: translateY(0); }
.lobby-edit-save:disabled {
  opacity: 0.5;
  cursor: wait;
  transform: none;
  filter: none;
}
.lobby-edit-cancel {
  background:
    linear-gradient(165deg, rgba(28, 26, 40, 0.9) 0%, rgba(12, 11, 18, 0.95) 100%);
  color: #c8c4d8;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition:
    color 0.15s ease,
    border-color 0.15s ease,
    background 0.15s ease,
    transform 0.15s ease;
}
.lobby-edit-cancel:hover {
  color: #fff;
  border-color: rgba(155, 92, 240, 0.4);
  background:
    linear-gradient(165deg, rgba(40, 36, 58, 0.95) 0%, rgba(16, 14, 26, 0.98) 100%);
  transform: translateY(-1px);
}
.lobby-edit-cancel:focus-visible {
  outline: 2px solid rgba(158, 120, 255, 0.65);
  outline-offset: 2px;
}
.lobby-edit-cancel:active { transform: translateY(0); }
.lobby-edit-status {
  margin: 8px 0 0;
  font-size: 12px;
  color: #8cf;
}
.lobby-edit-status.is-err { color: #f88; }
.lobby-card-menu {
  background:
    linear-gradient(165deg, rgba(32, 28, 48, 0.9) 0%, rgba(14, 12, 22, 0.95) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  color: #888;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 13px;
}
.lobby-card-menu:hover {
  color: #ffb0b0;
  border-color: rgba(255, 90, 90, 0.4);
  background:
    linear-gradient(165deg, rgba(72, 24, 28, 0.9) 0%, rgba(28, 10, 12, 0.95) 100%);
}
.lobby-empty, .lobby-loading, .lobby-error {
  color: #999;
  padding: 12px 0 24px;
}
#view-lobby .lobby-id-chip .lobby-user.is-ghost {
  opacity: 0.5;
  color: transparent !important;
  user-select: none;
  min-width: 36px !important;
}
.lobby-skel-line {
  height: 14px;
  border-radius: 6px;
  margin: 10px 0;
  background: rgba(255, 255, 255, 0.06);
}
.lobby-skel-card {
  height: 64px;
  border-radius: 10px;
  margin-bottom: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid #2a2a3a;
}
.lobby-locked-wrap .lobby-cta {
  margin-top: 4px;
}
.lobby-error-detail {
  font-size: 12px;
  color: #666;
  margin: 8px 0 16px;
}
.lobby-link {
  display: inline-flex;
  align-items: center;
  margin-left: 10px;
  padding: 10px 16px;
  color: #c8c4d8;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background:
    linear-gradient(165deg, rgba(28, 26, 40, 0.75) 0%, rgba(12, 11, 18, 0.85) 100%);
  transition:
    color 0.15s ease,
    border-color 0.15s ease,
    background 0.15s ease,
    transform 0.15s ease;
}
.lobby-link:hover {
  color: #fff;
  border-color: rgba(74, 155, 255, 0.45);
  background:
    linear-gradient(165deg, rgba(36, 40, 64, 0.9) 0%, rgba(14, 16, 28, 0.95) 100%);
  transform: translateY(-1px);
}

/* Page footer — always after .lobby-body in document order (not mid-list). */
.lobby-contact {
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  margin-top: 0;
  width: 100%;
  padding:
    0.75rem 1rem
    max(1.25rem, env(safe-area-inset-bottom));
  text-align: center;
  pointer-events: none;
  background: none;
  box-shadow: none;
  border: none;
}
.lobby-contact-row {
  pointer-events: auto;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.15rem 0.2rem;
}
.lobby-contact-sep {
  color: rgba(148, 163, 184, 0.35);
  font-size: 0.7rem;
  user-select: none;
  padding: 0 0.1rem;
}
.lobby-contact button {
  pointer-events: auto;
  appearance: none;
  margin: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.55rem;
  border-radius: 999px;
  font: inherit;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(148, 163, 184, 0.55);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.85);
  transition: color 0.15s ease, background 0.15s ease;
  touch-action: manipulation;
}
.lobby-contact button:hover,
.lobby-contact button:focus-visible {
  color: rgba(186, 230, 253, 0.72);
  background: rgba(0, 0, 0, 0.28);
  outline: none;
}
.lobby-contact .label {
  color: inherit;
  opacity: 0.85;
}
.lobby-contact .addr {
  color: inherit;
  font-variant-numeric: tabular-nums;
}
.lobby-contact-toast {
  position: fixed;
  z-index: 250;
  left: 50%;
  bottom: max(2.75rem, calc(env(safe-area-inset-bottom) + 2.25rem));
  transform: translateX(-50%) translateY(0.4rem);
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 650;
  color: #e0f2fe;
  background: rgba(15, 23, 42, 0.88);
  border: 1px solid rgba(186, 230, 253, 0.28);
  box-shadow: 0 8px 28px rgba(2, 6, 23, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.lobby-contact-toast.is-on {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
body.view-canvas .lobby-contact-toast {
  display: none !important;
}

/* Top-center toast when auto-resuming last delve */
.delve-resume-toast {
  position: fixed;
  z-index: 3200;
  left: 50%;
  top: max(0.85rem, env(safe-area-inset-top, 0px) + 0.65rem);
  transform: translateX(-50%) translateY(-0.35rem);
  max-width: min(22rem, calc(100vw - 2rem));
  padding: 0.55rem 1rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  text-align: center;
  color: #f0ecff;
  background: rgba(18, 14, 32, 0.92);
  border: 1px solid rgba(155, 92, 240, 0.4);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.35),
    0 10px 32px rgba(40, 20, 90, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.delve-resume-toast.is-on {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ===== Global toast stack (paste errors, brief status) ===== */
.delve-toasts {
  position: fixed;
  z-index: 3600;
  left: 50%;
  bottom: max(1.25rem, calc(env(safe-area-inset-bottom, 0px) + 1rem));
  transform: translateX(-50%);
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 0.45rem;
  max-width: min(26rem, calc(100vw - 1.5rem));
  pointer-events: none;
}
.delve-toast {
  width: max-content;
  max-width: 100%;
  padding: 0.55rem 0.95rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  line-height: 1.3;
  text-align: center;
  color: #f0ecff;
  background: rgba(18, 14, 32, 0.94);
  border: 1px solid rgba(155, 92, 240, 0.38);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.35),
    0 12px 36px rgba(20, 10, 50, 0.5);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  transform: translateY(0.45rem) scale(0.98);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.delve-toast.is-on {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.delve-toast--error {
  color: #ffe4e6;
  border-color: rgba(251, 113, 133, 0.48);
  background: rgba(40, 12, 22, 0.94);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.35),
    0 12px 36px rgba(80, 10, 30, 0.45);
}
.delve-toast--success {
  color: #d1fae5;
  border-color: rgba(52, 211, 153, 0.42);
  background: rgba(10, 28, 22, 0.94);
}
.delve-toast--info {
  color: #f0ecff;
}
.delve-toast-text {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Privacy / Help sheets (lobby only) */
.lobby-sheet-scrim {
  position: fixed;
  inset: 0;
  z-index: 240;
  background: rgba(4, 5, 12, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
.lobby-sheet-scrim.is-on {
  opacity: 1;
  pointer-events: auto;
}
.lobby-sheet {
  position: fixed;
  z-index: 245;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -46%) scale(0.98);
  width: min(22.5rem, calc(100vw - 2rem));
  max-height: min(78vh, 32rem);
  overflow: auto;
  padding: 1.15rem 1.2rem 1.1rem;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background:
    linear-gradient(165deg, rgba(36, 40, 64, 0.94) 0%, rgba(12, 14, 26, 0.96) 100%);
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: #e2e8f0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.lobby-sheet.is-on {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}
.lobby-sheet[hidden],
.lobby-sheet-scrim[hidden] {
  display: none !important;
}
.lobby-sheet-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.lobby-sheet-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #f8fafc;
}
.lobby-sheet-close {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: #e2e8f0;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}
.lobby-sheet-close:hover {
  background: rgba(255, 255, 255, 0.12);
}
.lobby-sheet-body {
  font-size: 0.88rem;
  line-height: 1.55;
  color: rgba(203, 213, 225, 0.9);
}
.lobby-sheet-body p {
  margin: 0 0 0.7rem;
}
.lobby-sheet-body p:last-child {
  margin-bottom: 0;
}
.lobby-sheet-body strong {
  color: #f1f5f9;
  font-weight: 650;
}
/* Privacy/Help + folder overlay stay lobby-only; access/confirm work on canvas */
body.view-canvas #lobby-sheet,
body.view-canvas #lobby-sheet-scrim,
body.view-canvas #lobby-folder-sheet,
body.view-canvas #lobby-folder-scrim {
  display: none !important;
}

/* Confirm sheet actions (Delete, etc.) — same glass dialog family */
.lobby-confirm-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.lobby-confirm-btn {
  appearance: none;
  border-radius: 0.65rem;
  padding: 0.55rem 0.95rem;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 650;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.12);
  touch-action: manipulation;
  transition: background 0.15s ease, border-color 0.15s ease, filter 0.15s ease;
}
.lobby-confirm-cancel {
  background: rgba(255, 255, 255, 0.06);
  color: #e2e8f0;
}
.lobby-confirm-cancel:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(186, 230, 253, 0.25);
}
.lobby-confirm-danger {
  background: linear-gradient(
    165deg,
    rgba(180, 40, 50, 0.95) 0%,
    rgba(100, 20, 30, 0.98) 100%
  );
  border-color: rgba(248, 113, 113, 0.45);
  color: #fff;
  box-shadow: 0 4px 16px rgba(127, 29, 29, 0.35);
}
.lobby-confirm-danger:hover {
  filter: brightness(1.08);
}
.lobby-confirm-danger:disabled,
.lobby-confirm-cancel:disabled {
  opacity: 0.5;
  cursor: wait;
}

/* Access / invite sheet */
.lobby-access-sheet.lobby-sheet {
  width: min(26rem, calc(100vw - 2rem));
  max-width: min(26rem, calc(100vw - 2rem));
  max-height: min(86vh, 40rem);
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  /* Above canvas chrome (title chip z 1200) */
  z-index: 2100;
}
/*
 * Invite/access bubble: NO vertical transform dance (that jumped on open).
 * JS pins `top` in px before fade-in; only opacity animates.
 * Growth after open expands downward from the pinned top.
 */
#lobby-invite-sheet.lobby-sheet {
  left: 50%;
  top: 50%;
  /* provisional until pinSheetTop(); no translateY — avoids re-center jump */
  transform: translateX(-50%);
  transition: opacity 0.18s ease;
}
#lobby-invite-sheet.lobby-sheet.is-on {
  transform: translateX(-50%);
  /* opacity from base .lobby-sheet.is-on */
}
#lobby-invite-scrim {
  z-index: 2090;
}
/* IDs required: critical index.html .lobby-sheet { z-index:245 } would
   otherwise win over a single class and put the blurred scrim ABOVE the dialog. */
#lobby-confirm-scrim {
  z-index: 2110;
}
#lobby-confirm-sheet,
.lobby-confirm-sheet {
  z-index: 2120;
}
.lobby-access-rename-row {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}
.lobby-access-sheet.lobby-sheet::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}
.lobby-access-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.lobby-access-sec {
  margin: 0;
}
.lobby-access-h {
  margin: 0 0 0.45rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(196, 181, 253, 0.85);
}
.lobby-access-hint {
  margin: 0 0 0.45rem;
  font-size: 0.78rem;
  color: rgba(148, 163, 184, 0.85);
  line-height: 1.4;
}
.lobby-access-members {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-height: 11rem;
  overflow-y: auto;
  scrollbar-width: none;
}
.lobby-access-members::-webkit-scrollbar {
  display: none;
  width: 0;
}
.lobby-access-member {
  padding: 0.4rem 0.5rem;
  border-radius: 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(15, 23, 42, 0.4);
}
.lobby-access-member,
.lobby-access-cand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  position: relative;
}
/* Canvas shell sets global img { position:absolute } — force static layout here */
.lobby-access-sheet img.lobby-access-av,
.lobby-access-av,
.lobby-access-av-ph {
  flex: 0 0 32px;
  width: 32px !important;
  height: 32px !important;
  max-width: 32px;
  max-height: 32px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  position: static !important;
  inset: auto !important;
  z-index: auto !important;
  background: rgba(20, 16, 32, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.lobby-access-av-ph {
  display: grid;
  place-items: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: #c4b5fd;
  background: rgba(80, 60, 140, 0.45);
  border: 1px solid rgba(155, 92, 240, 0.28);
}
.lobby-access-meta,
.lobby-access-cand-meta {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  position: relative;
  z-index: 1;
}
.lobby-access-name {
  font-size: 0.88rem;
  font-weight: 650;
  color: #f1f5f9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lobby-access-role {
  font-size: 0.7rem;
  color: rgba(148, 163, 184, 0.9);
  text-transform: capitalize;
}
.lobby-access-revoke {
  flex: 0 0 auto;
  appearance: none;
  border: 1px solid rgba(248, 113, 113, 0.35);
  background: rgba(80, 20, 28, 0.45);
  color: #fecaca;
  border-radius: 0.5rem;
  padding: 0.3rem 0.55rem;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 650;
  cursor: pointer;
}
.lobby-access-revoke:hover {
  background: rgba(120, 30, 40, 0.55);
}
.lobby-access-revoke:disabled {
  opacity: 0.5;
  cursor: wait;
}
.lobby-access-add-row,
.lobby-access-link-row {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}
/* Match Copy height/width to Add (shared control height) */
.lobby-access-action-btn,
#lobby-invite-copy,
#lobby-access-add {
  flex: 0 0 3.75rem;
  width: 3.75rem;
  min-width: 3.75rem;
  max-width: 3.75rem;
  height: 2.5rem;
  min-height: 2.5rem;
  max-height: 2.5rem;
  padding: 0 0.35rem;
  box-sizing: border-box;
  text-align: center;
  white-space: nowrap;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.lobby-access-user,
.lobby-invite-link {
  flex: 1 1 auto;
  min-width: 0;
  height: 2.5rem;
  box-sizing: border-box;
  margin: 0;
  padding: 0 0.7rem;
  border-radius: 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(15, 23, 42, 0.55);
  color: #e2e8f0;
  font: inherit;
  font-size: 0.85rem;
  line-height: 2.5rem;
}
.lobby-access-user:focus,
.lobby-invite-link:focus {
  outline: none;
  border-color: rgba(129, 140, 248, 0.55);
}
.lobby-invite-link {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.01em;
  -webkit-user-select: text;
  user-select: text;
}

.lobby-access-candidates {
  margin-top: 0.35rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 12rem;
  overflow-y: auto;
  border-radius: 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(12, 11, 20, 0.96);
  padding: 0.3rem;
  scrollbar-width: none;
}
.lobby-access-candidates[hidden] {
  display: none !important;
}
.lobby-access-candidates::-webkit-scrollbar {
  display: none;
}
.lobby-access-cand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  text-align: left;
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: #e2e8f0;
  border-radius: 0.5rem;
  padding: 0.4rem 0.45rem;
  font: inherit;
  cursor: pointer;
}
.lobby-access-cand:hover,
.lobby-access-cand.is-active {
  background: rgba(88, 101, 242, 0.18);
  border-color: rgba(129, 140, 248, 0.25);
}
.lobby-access-cand.is-selected {
  background: rgba(62, 232, 208, 0.12);
  border-color: rgba(62, 232, 208, 0.35);
}
.lobby-access-cand-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.lobby-access-cand-name {
  font-size: 0.85rem;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lobby-access-cand-sub {
  font-size: 0.7rem;
  color: rgba(148, 163, 184, 0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lobby-access-actions {
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-top: 1rem;
}
/* Collapse footer when Make private is not shown — sheet top is pinned so
   height growth expands the bubble downward only (no internal reflow feel). */
.lobby-access-actions:not(:has(button:not([hidden]))) {
  display: none;
}
/* Owner: allow members to invite */
.lobby-access-toggle {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0;
  padding: 0.55rem 0.65rem;
  border-radius: 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(15, 23, 42, 0.4);
  cursor: pointer;
  user-select: none;
}
.lobby-access-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.lobby-access-toggle-ui {
  flex: 0 0 auto;
  width: 2.4rem;
  height: 1.35rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.14);
  position: relative;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.lobby-access-toggle-ui::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #e2e8f0;
  transition: transform 0.15s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.lobby-access-toggle input:checked + .lobby-access-toggle-ui {
  background: rgba(88, 101, 242, 0.55);
  border-color: rgba(129, 140, 248, 0.55);
}
.lobby-access-toggle input:checked + .lobby-access-toggle-ui::after {
  transform: translateX(1.05rem);
}
.lobby-access-toggle-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #e2e8f0;
  line-height: 1.3;
}
.lobby-access-sec.is-locked {
  opacity: 0.55;
  pointer-events: none;
}

.lobby-invite-status {
  margin: 0.35rem 0 0;
  font-size: 0.78rem;
  line-height: 1.3;
  color: rgba(167, 243, 208, 0.9);
}
.lobby-invite-status.is-err {
  color: rgba(252, 165, 165, 0.95);
}
.lobby-invite-copy,
.lobby-invite-done {
  background: linear-gradient(
    165deg,
    rgba(88, 101, 242, 0.92) 0%,
    rgba(71, 82, 196, 0.95) 100%
  );
  border-color: rgba(129, 140, 248, 0.5);
  color: #fff;
}
.lobby-invite-copy:hover,
.lobby-invite-done:hover {
  filter: brightness(1.06);
}
/* Delve properties sheet (title chip / settings) */
.lobby-props-sheet.lobby-sheet {
  width: min(26rem, calc(100vw - 2rem));
  max-width: min(26rem, calc(100vw - 2rem));
  max-height: min(86vh, 40rem);
  overflow-x: hidden;
  overflow-y: auto;
  /* Visible scrollbar when content overflows (was fully hidden) */
  scrollbar-width: auto;
  scrollbar-color: rgba(167, 139, 250, 0.75) rgba(12, 10, 22, 0.95);
  scrollbar-gutter: stable;
  z-index: 2100;
}
.lobby-props-top {
  align-items: center;
}
.lobby-props-top-actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-shrink: 0;
}
.lobby-props-save {
  min-width: 4.25rem;
  height: 2rem;
  padding: 0 0.85rem;
  font-size: 0.82rem;
  border-radius: 999px;
}
.lobby-props-name-input {
  width: 100%;
  box-sizing: border-box;
}
#lobby-props-scrim {
  z-index: 2090;
}
/* WebKit: thick, high-contrast thumb so overflow is obvious */
.lobby-props-sheet.lobby-sheet::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
.lobby-props-sheet.lobby-sheet::-webkit-scrollbar-track {
  background: rgba(8, 6, 18, 0.95);
  border-left: 1px solid rgba(155, 92, 240, 0.22);
  border-radius: 0 12px 12px 0;
}
.lobby-props-sheet.lobby-sheet::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    rgba(186, 140, 255, 0.85) 0%,
    rgba(123, 63, 228, 0.9) 100%
  );
  border-radius: 999px;
  border: 2px solid rgba(8, 6, 18, 0.95);
  background-clip: padding-box;
  min-height: 48px;
  box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.25);
}
.lobby-props-sheet.lobby-sheet::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    180deg,
    rgba(210, 180, 255, 0.95) 0%,
    rgba(155, 92, 240, 0.98) 100%
  );
  border: 2px solid rgba(8, 6, 18, 0.95);
  background-clip: padding-box;
}
.lobby-props-sheet.lobby-sheet::-webkit-scrollbar-corner {
  background: rgba(8, 6, 18, 0.95);
}
.lobby-props-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.lobby-props-avatar-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 0.35rem;
}
.lobby-props-icon-preview {
  flex: 0 0 auto;
  width: 4rem;
  height: 4rem;
  border-radius: 0.7rem;
  display: grid;
  place-items: center;
  overflow: hidden;
  position: relative;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.08),
    0 6px 16px rgba(0, 0, 0, 0.35);
}
.lobby-props-preview-ini {
  font-size: 1.15rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.03em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.lobby-props-icon-preview.has-svg .lobby-props-preview-ini.is-fallback {
  display: none;
}
.lobby-props-preview-svg {
  width: 1.75rem;
  height: 1.75rem;
  color: #fff;
  display: block;
  position: relative;
  z-index: 1;
}
.lobby-props-icon-preview {
  color: #fff;
}
.lobby-props-preview-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  border-radius: inherit;
  display: block;
  z-index: 2;
}
.lobby-props-avatar-actions {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-items: stretch;
  min-width: 0;
  flex: 1 1 auto;
}
/* Full-width labels — do NOT use .lobby-access-action-btn (fixed 3.75rem for Copy/Add) */
.lobby-props-avatar-btn {
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: auto;
  min-height: 2.25rem;
  max-height: none;
  padding: 0.45rem 0.7rem;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
}
.lobby-props-avatar-btn[hidden] {
  display: none !important;
}
.lobby-props-icon-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}
.lobby-props-color-btn {
  appearance: none;
  margin: 0;
  padding: 0;
  width: 1.45rem;
  height: 1.45rem;
  min-height: 0;
  flex: 0 0 auto;
  border-radius: 0.35rem;
  border: 1.5px solid rgba(255, 255, 255, 0.14);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition:
    border-color 0.15s ease,
    transform 0.12s ease,
    box-shadow 0.15s ease;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
}
.lobby-props-color-btn:hover:not(:disabled) {
  transform: translateY(-1px) scale(1.08);
  border-color: rgba(255, 255, 255, 0.4);
}
.lobby-props-color-btn.is-selected {
  border-color: #fff;
  box-shadow:
    0 0 0 1.5px rgba(62, 232, 208, 0.65),
    0 2px 6px rgba(0, 0, 0, 0.35);
}
.lobby-props-color-ini {
  font-size: 0.72rem;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}
.lobby-props-color-btn:disabled {
  opacity: 0.55;
  cursor: default;
}
.lobby-props-dl {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.lobby-props-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.35rem 0.5rem;
  border-radius: 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(15, 23, 42, 0.35);
}
.lobby-props-row dt {
  margin: 0;
  font-size: 0.75rem;
  color: rgba(148, 163, 184, 0.9);
  font-weight: 600;
}
.lobby-props-row dd {
  margin: 0;
  font-size: 0.82rem;
  color: #e2e8f0;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.lobby-access-sec.is-readonly .lobby-access-hint {
  opacity: 0.75;
}

.lobby-invite-copy:disabled,
#lobby-invite-copy.is-copied,
#lobby-invite-copy.is-copied:hover,
#lobby-access-add:disabled,
#lobby-access-add:disabled:hover {
  /* Clearly grey until a typeahead pick is selected (not faded blue) */
  opacity: 1;
  cursor: not-allowed;
  filter: none;
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: rgba(148, 163, 184, 0.55) !important;
  box-shadow: none !important;
  pointer-events: none;
}
/* Room for Generate / Copied / Copy */
#lobby-invite-copy {
  flex: 0 0 5rem;
  width: 5rem;
  min-width: 5rem;
  max-width: 5rem;
  font-size: 0.78rem;
}
#lobby-access-add:not(:disabled) {
  background: linear-gradient(
    165deg,
    rgba(88, 101, 242, 0.92) 0%,
    rgba(71, 82, 196, 0.95) 100%
  );
  border-color: rgba(129, 140, 248, 0.5);
  color: #fff;
  cursor: pointer;
  pointer-events: auto;
}
.lobby-sheet,
.lobby-sheet-scrim {
  -webkit-user-select: none;
  user-select: none;
}
/* ===== Canvas top bar (transparent glass strip) ===== */
#view-canvas .canvas-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1200;
  pointer-events: none;
  overflow: visible;
  /* Titles, presence, save status — never selectable */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  /* Pretty transparent — fades into canvas */
  background: linear-gradient(
    180deg,
    rgba(8, 6, 16, 0.38) 0%,
    rgba(8, 6, 16, 0.18) 55%,
    rgba(8, 6, 16, 0) 100%
  );
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid rgba(155, 92, 240, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 8px 24px rgba(0, 0, 0, 0.12);
}
#view-canvas .canvas-topbar *,
#view-canvas .canvas-topbar *::before,
#view-canvas .canvas-topbar *::after {
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none;
}
/* Search field still needs selection while typing */
#view-canvas .canvas-topbar input,
#view-canvas .canvas-topbar textarea {
  -webkit-user-select: text !important;
  user-select: text !important;
}
#view-canvas .canvas-topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  min-height: 54px;
  padding: 0.45rem 0.7rem;
  box-sizing: border-box;
  max-width: 100%;
  pointer-events: none;
  overflow: visible;
}
#view-canvas .canvas-topbar-left,
#view-canvas .canvas-topbar-right {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  pointer-events: auto;
}
#view-canvas .canvas-topbar-left {
  flex: 1 1 auto;
  overflow: visible;
}
#view-canvas .canvas-topbar-right {
  flex: 0 0 auto;
  justify-content: flex-end;
}
#view-canvas .canvas-topbar-search {
  position: relative;
  flex-shrink: 0;
  z-index: 2;
}
#view-canvas .canvas-tool-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.15rem;
  height: 2.15rem;
  padding: 0;
  margin: 0;
  border-radius: 0.55rem;
  border: 1px solid rgba(155, 92, 240, 0.32);
  background: linear-gradient(
    165deg,
    rgba(36, 30, 58, 0.62) 0%,
    rgba(10, 9, 18, 0.7) 100%
  );
  color: rgba(226, 232, 240, 0.92);
  cursor: pointer;
  flex-shrink: 0;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.22),
    0 4px 12px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
#view-canvas .canvas-tool-btn:hover {
  border-color: rgba(62, 232, 208, 0.42);
  color: #fff;
}
#view-canvas .canvas-tool-btn.is-on {
  border-color: rgba(250, 204, 21, 0.55);
  color: #fef08a;
  background: linear-gradient(
    165deg,
    rgba(120, 90, 20, 0.55) 0%,
    rgba(60, 40, 10, 0.65) 100%
  );
  box-shadow:
    0 0 0 1px rgba(250, 204, 21, 0.2),
    0 0 14px rgba(250, 204, 21, 0.15);
}

/* —— Portals —— */
#view-canvas .canvas-topbar-right[data-topbar-mode="portal"] {
  display: none;
  align-items: center;
  gap: 0.45rem;
  flex-shrink: 0;
}
body.portal-interior-open #view-canvas .canvas-topbar-right[data-topbar-mode="board"] {
  display: none !important;
}
body.portal-interior-open #view-canvas .canvas-topbar-right[data-topbar-mode="portal"] {
  display: flex !important;
}
#view-canvas .portal-return-btn {
  width: auto;
  min-width: 2.15rem;
  padding: 0 0.75rem;
  gap: 0.3rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(226, 232, 240, 0.95);
}
#view-canvas .portal-return-btn:hover {
  border-color: rgba(62, 232, 208, 0.5);
  color: #fff;
}
#view-canvas .portal-tool-slot {
  min-width: 0;
  min-height: 2.15rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

/* Portal gate — square; quiet purple border, no selection flash */
#canvas .board-portal {
  position: absolute;
  box-sizing: border-box;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  z-index: 12;
  border: 2px solid rgba(123, 63, 228, 0.85);
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
  background: #0c0818;
  touch-action: none;
  user-select: none;
  -webkit-user-drag: none;
  contain: layout style;
}
#canvas .board-portal.selected,
#canvas .board-portal.selected:focus,
#canvas .board-portal:focus {
  border: 2px solid rgba(123, 63, 228, 0.85);
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
}
#canvas .board-portal.is-dragging,
#canvas .board-portal[data-live-drag="1"] {
  z-index: 60;
}
#canvas .board-portal-frame {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  overflow: hidden;
  background: #05030a;
  pointer-events: none;
}
/* Dithered swirl canvas (shared rAF pool — see portal-swirl.js) */
#canvas .board-portal-fire {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  pointer-events: none;
}
#canvas .board-portal-ring {
  position: absolute;
  inset: 20%;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  pointer-events: none;
  box-shadow: inset 0 0 14px rgba(5, 3, 10, 0.35);
}

.board-portal-ghost {
  position: fixed;
  z-index: 5000;
  pointer-events: none;
  box-sizing: border-box;
  border-radius: 14px;
  border: 2px dashed rgba(155, 92, 240, 0.75);
  background: rgba(20, 12, 40, 0.85);
  opacity: 0.95;
}
.board-portal-ghost.is-valid {
  border-style: solid;
  border-color: rgba(62, 232, 208, 0.8);
}
body.is-placing-portal,
body.is-placing-portal * {
  cursor: grabbing !important;
}

/* Interior: solid dark fill only — no blur, no animation, no canvas */
#portal-interior.portal-interior,
.portal-interior {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: none;
  background: #08060f;
  pointer-events: auto;
  overflow: hidden;
}
.portal-interior.is-open {
  display: block;
  opacity: 1;
}
.portal-interior-fire {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 40% at 50% 100%, rgba(80, 40, 140, 0.35), transparent 70%),
    #08060f;
}
.portal-interior-fire.is-static {
  background:
    radial-gradient(ellipse 70% 40% at 50% 100%, rgba(80, 40, 140, 0.35), transparent 70%),
    #08060f;
}
.portal-interior-veil {
  display: none;
}
/* Hide board while inside — no continuous board paint thrash */
body.portal-interior-open #canvas-wrapper {
  visibility: hidden !important;
  pointer-events: none !important;
}
body.portal-interior-open #canvas-topbar {
  z-index: 1300;
  pointer-events: none;
}
body.portal-interior-open #canvas-topbar .canvas-topbar-inner {
  pointer-events: none;
}
body.portal-interior-open #canvas-topbar .canvas-topbar-left,
body.portal-interior-open #canvas-topbar .canvas-topbar-right {
  pointer-events: auto;
}
#view-canvas #ping-tool-btn.is-on {
  border-color: rgba(56, 189, 248, 0.6);
  color: #7dd3fc;
  background: linear-gradient(
    165deg,
    rgba(14, 116, 144, 0.5) 0%,
    rgba(12, 40, 60, 0.65) 100%
  );
  box-shadow:
    0 0 0 1px rgba(56, 189, 248, 0.25),
    0 0 16px rgba(56, 189, 248, 0.2);
}
#view-canvas #text-tool-btn.is-on {
  border-color: rgba(196, 181, 253, 0.65);
  color: #e9d5ff;
  background: linear-gradient(
    165deg,
    rgba(109, 40, 217, 0.45) 0%,
    rgba(40, 20, 70, 0.7) 100%
  );
  box-shadow:
    0 0 0 1px rgba(167, 139, 250, 0.3),
    0 0 16px rgba(123, 63, 228, 0.22);
}
#view-canvas #canvas-wrapper.is-paint-mode {
  cursor: crosshair;
}
/* Brush/eraser: hide OS cursor — size ring is the tip indicator */
#view-canvas #canvas-wrapper.is-paint-mode:not(.is-paint-fill) {
  cursor: none;
}
#view-canvas #canvas-wrapper.is-ping-mode {
  cursor: crosshair !important;
}

/* Paint tip diameter indicator (fixed to viewport, follows cursor) */
.paint-size-cursor {
  position: fixed;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  z-index: 6200;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease;
  will-change: transform;
}
.paint-size-cursor.is-visible {
  opacity: 1;
  visibility: visible;
}
.paint-size-cursor-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  margin: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.92);
  background: rgba(125, 211, 252, 0.1);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.55),
    0 0 10px rgba(125, 211, 252, 0.28);
  transform: translate(-50%, -50%);
  box-sizing: border-box;
}
.paint-size-cursor.is-eraser .paint-size-cursor-ring {
  border-color: rgba(252, 165, 165, 0.95);
  background: rgba(248, 113, 113, 0.1);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.55),
    0 0 10px rgba(248, 113, 113, 0.28);
}
.paint-size-cursor-cross {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 9px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.paint-size-cursor-cross::before,
.paint-size-cursor-cross::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
}
.paint-size-cursor-cross::before {
  width: 9px;
  height: 1px;
  transform: translate(-50%, -50%);
}
.paint-size-cursor-cross::after {
  width: 1px;
  height: 9px;
  transform: translate(-50%, -50%);
}
.paint-size-cursor-label {
  position: absolute;
  left: 50%;
  top: 50%;
  /* JS sets translate(-50%, halfRing + gap) so label sits under the tip */
  transform: translate(-50%, 18px);
  padding: 0.12rem 0.35rem;
  border-radius: 0.35rem;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.4);
  color: #e2e8f0;
  font: 700 0.68rem/1.2 system-ui, sans-serif;
  letter-spacing: 0.02em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
}
/* Label visible while resizing (Ctrl+scroll) */
.paint-size-cursor.is-resizing .paint-size-cursor-label {
  opacity: 1;
}
.paint-size-cursor.is-resizing .paint-size-cursor-ring {
  border-width: 2px;
}
.paint-size-cursor.is-pulse .paint-size-cursor-ring {
  animation: paint-size-pulse 0.35s ease-out;
}
@keyframes paint-size-pulse {
  0% {
    transform: translate(-50%, -50%) scale(0.86);
    opacity: 0.7;
  }
  60% {
    transform: translate(-50%, -50%) scale(1.06);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}
#view-canvas #canvas-wrapper.is-text-mode {
  cursor: text !important;
}
/* Children with pointer-events:auto (images/video) still receive hits unless
   we force the whole entity tree transparent to clicks while pinging. */
#view-canvas #canvas-wrapper.is-ping-mode .node,
#view-canvas #canvas-wrapper.is-ping-mode .node *,
#view-canvas #canvas-wrapper.is-ping-mode .board-image-wrap,
#view-canvas #canvas-wrapper.is-ping-mode .board-image-wrap *,
#view-canvas #canvas-wrapper.is-ping-mode .jsplumb-connector,
#view-canvas #canvas-wrapper.is-ping-mode .jsplumb-endpoint {
  pointer-events: none !important;
}
/* Text place: click empty board only — still allow selecting existing nodes later if needed */
#view-canvas #canvas-wrapper.is-text-mode .board-image-wrap,
#view-canvas #canvas-wrapper.is-text-mode .board-image-wrap * {
  pointer-events: none !important;
}
/* Paint mode: same — draw over media without chrome stealing strokes */
#view-canvas #canvas-wrapper.is-paint-mode .node,
#view-canvas #canvas-wrapper.is-paint-mode .node *,
#view-canvas #canvas-wrapper.is-paint-mode .board-image-wrap,
#view-canvas #canvas-wrapper.is-paint-mode .board-image-wrap * {
  pointer-events: none !important;
}
/* Freehand paint above images/nodes (z≈1–10); under pings (≈80) */
#canvas .board-paint-layer {
  z-index: 25 !important;
  pointer-events: none !important;
}

/* ===== Attention pings (world-space on #canvas) =====
   Anchor: .board-ping left/top = exact click in world px (0×0 box).
   Every ring/core keeps translate(-50%,-50%) in EVERY keyframe so scale
   expands around the click — never from a corner. */
.board-ping-layer {
  pointer-events: none !important;
  z-index: 80 !important;
}
/* Off-screen ping cue — screen-space on #canvas-wrapper */
#view-canvas .board-ping-edge-host {
  position: absolute;
  inset: 0;
  /* visible so pills near the edge aren't clipped mid-label */
  overflow: visible;
  pointer-events: none;
  z-index: 90;
}
/* Round expanding rings at the off-screen cue (same idea as map pings) */
#view-canvas .board-ping-edge-wave {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 89;
  opacity: 0;
  transition: opacity 0.2s ease;
  --ping-color: #7dd3fc;
}
#view-canvas .board-ping-edge-wave.is-on {
  opacity: 1;
}
#view-canvas .board-ping-edge-wave.is-out {
  opacity: 0 !important;
}
/* Core sits off-screen; keep it subtle so only the arc is the main read */
#view-canvas .board-ping-edge-wave-core {
  position: absolute;
  left: 0;
  top: 0;
  width: 14px;
  height: 14px;
  margin: 0;
  border-radius: 50%;
  background: var(--ping-color);
  box-shadow:
    0 0 0 2px rgba(0, 0, 0, 0.4),
    0 0 16px color-mix(in srgb, var(--ping-color) 75%, transparent);
  transform: translate(-50%, -50%);
  opacity: 0.55;
}
/* Larger rings so they still read well with origin ~64px past the edge */
#view-canvas .board-ping-edge-wave-ring {
  position: absolute;
  left: 0;
  top: 0;
  width: 72px;
  height: 72px;
  margin: 0;
  border-radius: 50%;
  box-sizing: border-box;
  border: 2.5px solid var(--ping-color);
  background: transparent;
  transform: translate(-50%, -50%) scale(0.45);
  transform-origin: center center;
  animation: board-ping-edge-ring 1.85s cubic-bezier(0.12, 0.7, 0.25, 1) infinite;
  opacity: 0.95;
}
#view-canvas .board-ping-edge-wave-ring-b {
  animation-delay: 0.6s;
  border-width: 2px;
  opacity: 0.75;
}
#view-canvas .board-ping-edge-wave-ring-c {
  animation-delay: 1.2s;
  border-width: 1.5px;
  opacity: 0.55;
}
@keyframes board-ping-edge-ring {
  0% {
    transform: translate(-50%, -50%) scale(0.4);
    opacity: 0.95;
  }
  65% {
    opacity: 0.3;
  }
  100% {
    /* ~72 * 3.6 ≈ 260px diameter — covers from off-edge origin onto the board */
    transform: translate(-50%, -50%) scale(3.6);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  #view-canvas .board-ping-edge-wave-ring {
    animation: none;
    transform: translate(-50%, -50%) scale(1.8);
    opacity: 0.55;
  }
}
#view-canvas .board-ping-edge-btn {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%) scale(0.92);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  padding: 0.38rem 0.75rem 0.38rem 0.45rem;
  border-radius: 999px;
  border: 1.5px solid
    color-mix(in srgb, var(--ping-color, #7dd3fc) 70%, transparent);
  background: color-mix(
    in srgb,
    var(--ping-color, #7dd3fc) 22%,
    rgba(8, 10, 18, 0.92)
  );
  color: #f0f9ff;
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.01em;
  white-space: nowrap;
  width: max-content;
  max-width: none;
  flex-shrink: 0;
  cursor: pointer;
  pointer-events: auto;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.35),
    0 6px 18px rgba(0, 0, 0, 0.4),
    0 0 14px color-mix(in srgb, var(--ping-color, #7dd3fc) 35%, transparent);
  opacity: 0;
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    background 0.15s ease;
  z-index: 91;
}
#view-canvas .board-ping-edge-btn.is-on {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
#view-canvas .board-ping-edge-btn.is-out {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.9);
  pointer-events: none;
}
#view-canvas .board-ping-edge-btn:hover {
  background: color-mix(
    in srgb,
    var(--ping-color, #7dd3fc) 38%,
    rgba(8, 10, 18, 0.92)
  );
}
#view-canvas .board-ping-edge-btn:active {
  transform: translate(-50%, -50%) scale(0.97);
}
#view-canvas .board-ping-edge-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--ping-color, #7dd3fc);
  box-shadow:
    0 0 0 2px rgba(0, 0, 0, 0.35),
    0 0 10px color-mix(in srgb, var(--ping-color, #7dd3fc) 70%, transparent);
}
#view-canvas .board-ping-edge-text {
  flex: 0 0 auto;
  white-space: nowrap;
}
.board-ping {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  overflow: visible;
  pointer-events: none;
  z-index: 80;
  --ping-color: #7dd3fc;
  /* Counter canvas zoom so rings stay fixed screen size */
  --ping-inv-zoom: 1;
  transform: scale(var(--ping-inv-zoom, 1));
  transform-origin: 0 0;
}
/* Core: centered on click */
.board-ping-core {
  position: absolute;
  left: 0;
  top: 0;
  width: 14px;
  height: 14px;
  margin: 0;
  border-radius: 50%;
  box-sizing: border-box;
  background: var(--ping-color);
  box-shadow:
    0 0 0 2px rgba(0, 0, 0, 0.45),
    0 0 16px color-mix(in srgb, var(--ping-color) 80%, transparent),
    0 0 28px color-mix(in srgb, var(--ping-color) 40%, transparent);
  transform: translate(-50%, -50%) scale(1);
  transform-origin: center center;
  animation: board-ping-core 2s ease-out forwards;
}
/* Rings: same anchor; scale + center in one transform */
.board-ping-ring {
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  margin: 0;
  border-radius: 50%;
  box-sizing: border-box;
  border: 2.5px solid var(--ping-color);
  background: transparent;
  opacity: 0.95;
  transform: translate(-50%, -50%) scale(0.25);
  transform-origin: center center;
  animation: board-ping-ring 1.65s cubic-bezier(0.12, 0.7, 0.25, 1) forwards;
}
.board-ping-ring-2 {
  animation-delay: 0.22s;
  opacity: 0.7;
  border-width: 2px;
}
.board-ping-ring-3 {
  animation-delay: 0.44s;
  opacity: 0.5;
  border-width: 1.5px;
}
.board-ping-label {
  position: absolute;
  left: 0;
  top: 0;
  /* below the core, still centered horizontally on click */
  transform: translate(-50%, 14px);
  white-space: nowrap;
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.02em;
  color: #f0f9ff;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  background: rgba(8, 12, 24, 0.82);
  border: 1px solid color-mix(in srgb, var(--ping-color) 55%, transparent);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  animation: board-ping-label 2s ease-out forwards;
  pointer-events: none;
}
.board-ping.is-out {
  opacity: 0;
  transition: opacity 0.28s ease;
}
/* Keep translate(-50%,-50%) in every keyframe — this is what keeps waves centered */
@keyframes board-ping-ring {
  0% {
    transform: translate(-50%, -50%) scale(0.2);
    opacity: 0.95;
  }
  55% {
    opacity: 0.4;
  }
  100% {
    transform: translate(-50%, -50%) scale(4.8);
    opacity: 0;
  }
}
@keyframes board-ping-core {
  0% {
    transform: translate(-50%, -50%) scale(0.35);
    opacity: 0;
  }
  12% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 1;
  }
  35% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(0.85);
    opacity: 0;
  }
}
@keyframes board-ping-label {
  0% {
    opacity: 0;
    transform: translate(-50%, 18px);
  }
  12% {
    opacity: 1;
    transform: translate(-50%, 14px);
  }
  75% {
    opacity: 1;
    transform: translate(-50%, 14px);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, 10px);
  }
}
#view-canvas #canvas-wrapper.is-paint-mode.is-paint-eraser {
  cursor: cell;
}
#view-canvas #canvas-wrapper.is-paint-mode.is-paint-fill {
  cursor: cell;
}
.board-paint-layer {
  pointer-events: none !important;
}

/* ===== Paint tools panel (right side) =====
   Lives on document.body (reparented by paint-panel.js) so #view-canvas
   stacking / [hidden] never traps it. Open uses ID-level !important. */
#paint-panel.paint-panel,
#view-canvas .paint-panel,
.paint-panel {
  position: fixed !important;
  top: 64px;
  right: 12px;
  bottom: 16px;
  left: auto;
  /* Above topbar (1200), notes, modals that aren't modal */
  z-index: 5000 !important;
  width: min(17.5rem, calc(100vw - 24px));
  max-height: calc(100vh - 80px);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateX(14px);
  transition: opacity 0.16s ease, transform 0.18s ease, visibility 0s linear 0.16s;
  /* When closed via [hidden], stay out of layout */
  display: none;
}
/* Open state — beat UA [hidden] and every generic [hidden] rule in this file.
   Include [hidden] so a race that leaves the attribute still shows the panel. */
#paint-panel.is-open,
#paint-panel.is-open[hidden],
#paint-panel.paint-panel.is-open,
#paint-panel.paint-panel.is-open[hidden],
#view-canvas .paint-panel.is-open,
#view-canvas .paint-panel.is-open[hidden],
.paint-panel.is-open,
.paint-panel.is-open[hidden],
body.paint-mode #paint-panel,
body.paint-mode #paint-panel[hidden],
body.paint-mode #view-canvas .paint-panel,
body.paint-mode .paint-panel {
  display: block !important;
  visibility: visible !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  transform: none !important;
  transition: opacity 0.16s ease, transform 0.18s ease;
  z-index: 5000 !important;
}
/* Closed only when neither is-open nor body.paint-mode */
#paint-panel[hidden]:not(.is-open),
#view-canvas .paint-panel[hidden]:not(.is-open),
.paint-panel[hidden]:not(.is-open) {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
body:not(.paint-mode) #paint-panel[hidden]:not(.is-open) {
  display: none !important;
}
/* Inner chrome works whether panel is under #view-canvas or on document.body */
#paint-panel .paint-panel-inner,
.paint-panel-inner {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  height: 100%;
  max-height: inherit;
  overflow: auto;
  padding: 0.85rem 0.9rem 1rem;
  box-sizing: border-box;
  border-radius: 16px;
  border: 1px solid rgba(155, 92, 240, 0.38);
  background:
    linear-gradient(165deg, rgba(28, 24, 46, 0.94) 0%, rgba(12, 10, 20, 0.97) 100%);
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(123, 63, 228, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  color: #f0eaff;
  scrollbar-width: thin;
  scrollbar-color: rgba(155, 92, 240, 0.4) transparent;
}
#paint-panel .paint-panel-head,
.paint-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
#paint-panel .paint-panel-title,
.paint-panel-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 750;
  letter-spacing: 0.02em;
}
#paint-panel .paint-panel-close,
.paint-panel-close {
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 999px;
  border: 1px solid rgba(155, 92, 240, 0.35);
  background: rgba(123, 63, 228, 0.28);
  color: #f0eaff;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
#paint-panel .paint-panel-close:hover,
.paint-panel-close:hover {
  border-color: rgba(62, 232, 208, 0.45);
  background: rgba(62, 232, 208, 0.12);
}
#paint-panel .paint-panel-section,
.paint-panel-section {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
#paint-panel .paint-panel-label,
.paint-panel-label {
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(186, 180, 220, 0.75);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem;
}
#paint-panel .paint-size-val,
.paint-size-val {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  text-transform: none;
  color: #e0f2fe;
  font-weight: 700;
}
#paint-panel .paint-tool-row,
.paint-tool-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.35rem;
}
#paint-panel .paint-tool-btn,
.paint-tool-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.5rem 0.45rem;
  border-radius: 0.6rem;
  border: 1px solid rgba(155, 92, 240, 0.3);
  background: rgba(0, 0, 0, 0.28);
  color: rgba(226, 232, 240, 0.9);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}
#paint-panel .paint-tool-btn:hover,
.paint-tool-btn:hover {
  border-color: rgba(125, 211, 252, 0.4);
}
#paint-panel .paint-tool-btn.is-on,
.paint-tool-btn.is-on {
  border-color: rgba(250, 204, 21, 0.55);
  color: #fef08a;
  background: linear-gradient(
    165deg,
    rgba(120, 90, 20, 0.45) 0%,
    rgba(60, 40, 10, 0.55) 100%
  );
  box-shadow: 0 0 0 1px rgba(250, 204, 21, 0.15);
}
#paint-panel .paint-kbd,
.paint-kbd {
  display: inline-block;
  margin-left: 0.15rem;
  padding: 0.05rem 0.28rem;
  border-radius: 0.28rem;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(15, 23, 42, 0.55);
  color: rgba(226, 232, 240, 0.85);
  font: inherit;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
  vertical-align: 0.05em;
}
#paint-panel .paint-tool-btn.is-on .paint-kbd,
.paint-tool-btn.is-on .paint-kbd {
  border-color: rgba(250, 204, 21, 0.4);
  color: #fef08a;
  background: rgba(60, 40, 10, 0.55);
}
#paint-panel .paint-swatches,
.paint-swatches {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.35rem;
}
#paint-panel .paint-swatch,
.paint-swatch {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 0.45rem;
  border: 2px solid rgba(255, 255, 255, 0.12);
  background: var(--sw, #888);
  cursor: pointer;
  padding: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}
#paint-panel .paint-swatch:hover,
.paint-swatch:hover {
  border-color: rgba(255, 255, 255, 0.45);
  transform: scale(1.06);
}
#paint-panel .paint-swatch.is-on,
.paint-swatch.is-on {
  border-color: #7dd3fc;
  box-shadow:
    0 0 0 2px rgba(125, 211, 252, 0.45),
    inset 0 0 0 1px rgba(0, 0, 0, 0.3);
}
#paint-panel .paint-size-chips,
.paint-size-chips {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.35rem;
}
#paint-panel .paint-size-chip,
.paint-size-chip {
  padding: 0.35rem 0.2rem;
  border-radius: 0.45rem;
  border: 1px solid rgba(155, 92, 240, 0.28);
  background: rgba(0, 0, 0, 0.25);
  color: rgba(226, 232, 240, 0.88);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 750;
  cursor: pointer;
}
#paint-panel .paint-size-chip.is-on,
.paint-size-chip.is-on {
  border-color: rgba(125, 211, 252, 0.5);
  color: #e0f2fe;
  background: rgba(14, 116, 144, 0.28);
}
#paint-panel .paint-size-range,
.paint-size-range {
  width: 100%;
  accent-color: #a78bfa;
  cursor: pointer;
}
#paint-panel .paint-panel-actions,
.paint-panel-actions {
  margin-top: 0.15rem;
}
#paint-panel .paint-action-btn,
.paint-action-btn {
  width: 100%;
  padding: 0.5rem 0.65rem;
  border-radius: 0.55rem;
  border: 1px solid rgba(248, 113, 113, 0.35);
  background: rgba(127, 29, 29, 0.35);
  color: #fecaca;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}
#paint-panel .paint-action-btn:hover,
.paint-action-btn:hover {
  border-color: rgba(248, 113, 113, 0.55);
  background: rgba(153, 27, 27, 0.45);
}
#paint-panel .paint-panel-hint,
.paint-panel-hint {
  margin: 0;
  font-size: 0.68rem;
  line-height: 1.35;
  color: rgba(148, 163, 184, 0.75);
}
/* Controls live inside the bar — drop fixed corner positioning */
#view-canvas .canvas-topbar #btn-back.shell-nav,
#view-canvas .canvas-topbar .shell-nav.shell-back {
  position: static !important;
  top: auto !important;
  left: auto !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin: 0;
  background:
    linear-gradient(165deg, rgba(36, 30, 58, 0.62) 0%, rgba(10, 9, 18, 0.7) 100%);
  border-color: rgba(155, 92, 240, 0.32);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.22),
    0 4px 12px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
#view-canvas .canvas-topbar #btn-back.shell-nav:hover {
  border-color: rgba(62, 232, 208, 0.42);
}
/* Title + co-presence: one row right of Back */
#view-canvas .board-chrome-left {
  position: static;
  top: auto;
  left: auto;
  z-index: auto;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  max-width: min(62vw, 520px);
  overflow: visible !important;
  min-width: 0;
  /* Parent none so empty chrome doesn't steal canvas clicks; children re-enable */
  pointer-events: none;
}
#view-canvas .board-chrome-left > * {
  pointer-events: auto;
}
#view-canvas .board-title-chip {
  position: static;
  /* Do not shrink when presence grows (follow / LIVE) — avoids title shift */
  flex: 0 0 auto;
  max-width: min(36vw, 240px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: rgba(12, 10, 22, 0.42);
  border: 1px solid rgba(155, 92, 240, 0.28);
  border-radius: 999px;
  color: #eee;
  font-weight: 700;
  font-size: 13px;
  padding: 8px 14px;
  cursor: pointer;
  font-family: inherit;
  pointer-events: auto;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: background 0.15s ease, border-color 0.15s ease;
}
#view-canvas .board-title-chip:hover {
  background: rgba(28, 22, 48, 0.62);
  border-color: rgba(186, 140, 255, 0.42);
}
/* Undo / redo — immediately right of the title chip */
#view-canvas .board-history-btns {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  flex: 0 0 auto;
  pointer-events: auto;
}
#view-canvas .board-history-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border-radius: 0.55rem;
  border: 1px solid rgba(155, 92, 240, 0.28);
  background: rgba(12, 10, 22, 0.42);
  color: rgba(226, 232, 240, 0.92);
  cursor: pointer;
  font: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}
#view-canvas .board-history-btn:hover:not(:disabled) {
  background: rgba(28, 22, 48, 0.62);
  border-color: rgba(186, 140, 255, 0.42);
  color: #fff;
}
#view-canvas .board-history-btn:disabled {
  opacity: 0.38;
  cursor: default;
  filter: grayscale(0.25);
}
/* Invite chip removed — settings live on the title chip popup */
#view-canvas .board-people-btn {
  display: none !important;
}
/* Multiplayer remote cursors + selection rings */
#view-canvas #canvas-wrapper {
  position: relative;
}
#view-canvas .remote-cursors {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 40;
}
#view-canvas .remote-cursor {
  position: absolute;
  left: 0;
  top: 0;
  /* transform-only layer: filter on THIS node forced main-thread paint every move */
  will-change: transform;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  pointer-events: none;
  z-index: 42;
  opacity: 1;
  /* opacity only — never transition transform (slideshow look) */
  transition: opacity 0.28s ease;
  /* no filter here — see .remote-cursor-ptr */
}
/*
 * Peer tabbed out / idle: only the pointer breathes.
 * Label stays solid and is centered under the cursor tip.
 */
#view-canvas .remote-cursor.is-away {
  opacity: 1;
}
#view-canvas .remote-cursor.is-away .remote-cursor-ptr {
  animation: remote-cursor-away-breathe 2.6s ease-in-out infinite;
}
@keyframes remote-cursor-away-breathe {
  0%,
  100% {
    opacity: 0.6;
  }
  50% {
    opacity: 0.9;
  }
}
@media (prefers-reduced-motion: reduce) {
  #view-canvas .remote-cursor.is-away .remote-cursor-ptr {
    animation: none;
    opacity: 0.75;
  }
}
/* Peer holding canvas press — full strength + glow so they don't "vanish" */
#view-canvas .remote-cursor.is-pressing {
  opacity: 1 !important;
  z-index: 50;
}
#view-canvas .remote-cursor.is-pressing .remote-cursor-ptr {
  transform: scale(1.12);
  animation: none;
  opacity: 1;
  filter: drop-shadow(0 0 6px var(--rc-color, #7dd3fc))
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}
#view-canvas .remote-cursor-ptr {
  display: block;
  width: 29px; /* 18 * 1.6 */
  height: 29px;
  /* Shadow on the glyph, not the moving wrapper (keeps translate on compositor) */
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
  transition: none;
}
#view-canvas .remote-cursor-label {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.08rem;
  margin: -2px 0 0 12px;
  padding: 0.14rem 0.42rem 0.16rem;
  border-radius: 6px;
  background: var(--rc-color, #7dd3fc);
  color: #0b1220;
  font-size: 0.65rem;
  font-weight: 750;
  letter-spacing: 0.01em;
  white-space: nowrap;
  max-width: 12.5rem;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  opacity: 1;
  transition: opacity 0.22s ease, transform 0.22s ease;
}
#view-canvas .remote-cursor.is-label-hidden .remote-cursor-label {
  opacity: 0;
  transform: translateY(3px);
  pointer-events: none;
}
#view-canvas .remote-cursor.is-name-only-hidden .remote-cursor-name {
  display: none;
}
#view-canvas .remote-cursor-name {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 11.5rem;
  line-height: 1.15;
}
#view-canvas .remote-cursor-action {
  font-weight: 650;
  opacity: 0.85;
  font-size: 0.58rem;
  text-transform: lowercase;
  line-height: 1.15;
}
#view-canvas .remote-cursor-action:not([hidden])::before {
  content: "·";
  margin-right: 0.2rem;
  opacity: 0.7;
}
/* Status chip while dimmed — only "where", solid, centered under tip */
#view-canvas .remote-cursor-where {
  display: block;
  max-width: 11.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.55rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  line-height: 1.2;
  opacity: 0.9;
  color: #0b1220;
}
#view-canvas .remote-cursor-where[hidden] {
  display: none !important;
}
#view-canvas .remote-cursor.is-away-status .remote-cursor-name,
#view-canvas .remote-cursor.is-away-status .remote-cursor-action {
  display: none !important;
}
#view-canvas .remote-cursor.is-away-status .remote-cursor-label {
  position: absolute;
  left: 14px; /* ~center of 29px pointer */
  top: 36px; /* a few px lower under the tip */
  margin: 0;
  transform: translateX(-50%);
  align-items: center;
  text-align: center;
  opacity: 1 !important;
  animation: none !important;
  filter: none;
  max-width: 10.5rem;
  padding: 0.16rem 0.45rem;
}
#view-canvas .remote-cursor.is-away-status.is-label-hidden .remote-cursor-label {
  opacity: 1 !important;
  transform: translateX(-50%);
  pointer-events: none;
}
#view-canvas .remote-cursor.is-away-status .remote-cursor-where {
  font-size: 0.58rem;
  font-weight: 700;
  opacity: 1;
  text-align: center;
}
#view-canvas .remote-cursor.is-editing .remote-cursor-label {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35), 0 1px 4px rgba(0, 0, 0, 0.4);
}
/* Peer selection / editing ring — world-space on #canvas (same transform as nodes) */
#view-canvas #canvas .remote-sel-ring,
#view-canvas .remote-sel-ring {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border: 2.5px solid var(--rc-color, #7dd3fc);
  /* Match .node border-radius (15px) so the outline tracks the card */
  border-radius: 15px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.35),
    0 0 12px color-mix(in srgb, var(--rc-color, #7dd3fc) 45%, transparent);
  pointer-events: none;
  z-index: 25;
  transform: none;
  opacity: 1;
  transition: opacity 0.28s ease;
}
#view-canvas #canvas .remote-sel-ring.is-away,
#view-canvas .remote-sel-ring.is-away {
  opacity: 0.5;
}
#view-canvas #canvas .remote-sel-ring.is-editing,
#view-canvas .remote-sel-ring.is-editing {
  border-width: 3px;
  animation: remote-sel-pulse 1.4s ease-in-out infinite;
}
#view-canvas #canvas .remote-sel-tag,
#view-canvas .remote-sel-tag {
  position: absolute;
  left: 0;
  top: -1.4rem;
  max-width: 12rem;
  padding: 0.1rem 0.4rem;
  border-radius: 6px;
  background: var(--rc-color, #7dd3fc);
  color: #0b1220;
  font-size: 0.62rem;
  font-weight: 750;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  /* Counter-scale so label stays readable when zoomed */
  transform-origin: left bottom;
}
@keyframes remote-sel-pulse {
  0%,
  100% {
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.35),
      0 0 10px color-mix(in srgb, var(--rc-color, #7dd3fc) 40%, transparent);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.35),
      0 0 18px color-mix(in srgb, var(--rc-color, #7dd3fc) 70%, transparent);
  }
}

/* Co-presence strip: one separate pill button per person (never stacked) */
#view-canvas .board-presence,
#view-canvas .board-presence.board-presence-strip {
  position: relative;
  flex: 0 1 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
  max-width: min(62vw, 420px);
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  overflow: visible !important;
  z-index: 40;
  pointer-events: none;
}
#view-canvas .board-presence[hidden] {
  display: none !important;
}

/* Individual person button — avatar stays fixed left; only right side grows */
#view-canvas .board-presence-pill {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.32rem;
  min-height: 1.85rem;
  max-width: min(42vw, 220px);
  /* Same left padding always so avatar never shifts on expand/shrink */
  padding: 0.16rem 0.22rem 0.16rem 0.22rem;
  border-radius: 999px;
  background: rgba(12, 10, 22, 0.4);
  border: 1px solid rgba(155, 92, 240, 0.26);
  box-sizing: border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  overflow: visible;
  pointer-events: none;
  will-change: width;
  transition:
    background 0.12s ease,
    border-color 0.12s ease,
    box-shadow 0.12s ease;
}
/* Multi idle: avatar-only — keep left padding; only trim right a hair */
#view-canvas .board-presence-pill.is-avatar-only {
  padding-right: 0.22rem;
  min-width: 0;
}
/* Extra right pad when label is visible */
#view-canvas .board-presence-pill:not(.is-avatar-only) {
  padding-right: 0.45rem;
}
/* During expand/shrink: clip label only via width; avatar stays painted */
#view-canvas .board-presence-pill.is-pill-animating {
  overflow: hidden !important;
  flex-shrink: 0;
}
/* Hidden hint must not take layout space */
#view-canvas .board-presence-hint[hidden] {
  display: none !important;
}
#view-canvas .board-presence-ring[hidden],
#view-canvas .board-presence-live-tag[hidden] {
  display: none !important;
}
#view-canvas .board-presence-pill.is-followable {
  pointer-events: auto !important;
  cursor: pointer;
}
#view-canvas .board-presence-pill.is-followable:hover {
  border-color: color-mix(
    in srgb,
    var(--peer-color, rgba(125, 211, 252, 0.55)) 70%,
    transparent
  );
  background: rgba(10, 16, 28, 0.72);
}
#view-canvas .board-presence-pill.is-followable:focus-visible {
  outline: 2px solid var(--peer-color, rgba(125, 211, 252, 0.7));
  outline-offset: 2px;
}
#view-canvas .board-presence-pill.has-peer-color {
  border-color: color-mix(in srgb, var(--peer-color) 65%, rgba(100, 110, 140, 0.45));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--peer-color) 35%, transparent);
}

#view-canvas .board-presence-av {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  max-width: 22px;
  max-height: 22px;
  margin: 0;
  border-radius: 999px;
  overflow: hidden;
  border: 1.5px solid
    color-mix(in srgb, var(--peer-color, rgba(125, 211, 252, 0.85)) 85%, #0f172a);
  background: #334;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--peer-color, #7dd3fc) 40%, transparent),
    0 0 8px color-mix(in srgb, var(--peer-color, #7dd3fc) 25%, transparent);
  flex-shrink: 0;
  box-sizing: border-box;
  z-index: 2;
}
#view-canvas .board-presence-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 999px;
}

/* Live-follow chrome on that person's pill only */
#view-canvas .board-presence-pill.is-live-following {
  overflow: visible !important;
  z-index: 50 !important;
  pointer-events: auto !important;
  border-width: 1px !important;
  border-color: color-mix(
    in srgb,
    var(--live-follow-color, #7dd3fc) 70%,
    rgba(100, 110, 140, 0.35)
  ) !important;
  background: color-mix(
    in srgb,
    var(--live-follow-color, #7dd3fc) 10%,
    rgba(12, 10, 22, 0.72)
  ) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 0 10px color-mix(in srgb, var(--live-follow-color, #7dd3fc) 22%, transparent) !important;
}
#view-canvas .board-presence-ring {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: calc(100% + 10px) !important;
  height: calc(100% + 10px) !important;
  margin: 0 !important;
  border-radius: 999px !important;
  border: 1.5px solid var(--live-follow-color, #7dd3fc) !important;
  box-sizing: border-box !important;
  pointer-events: none !important;
  z-index: 0 !important;
  transform: translate(-50%, -50%) scale(1);
  opacity: 0;
  animation: presence-soft-ring 3.2s ease-out infinite;
}
#view-canvas .board-presence-ring-b {
  animation-delay: 1.6s;
}
#view-canvas .board-presence-pill.is-live-following .board-presence-av,
#view-canvas .board-presence-pill.is-live-following .board-presence-hint {
  position: relative;
  z-index: 2;
}
#view-canvas .board-presence-pill > .board-presence-live-tag,
#view-canvas .board-presence-pill.is-live-following > .board-presence-live-tag {
  position: absolute !important;
  top: -3px !important;
  right: 3px !important;
  left: auto !important;
  bottom: auto !important;
  display: block !important;
  width: max-content !important;
  padding: 0 3px !important;
  border-radius: 2px;
  font-size: 7px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
  color: color-mix(in srgb, var(--live-follow-color, #7dd3fc) 88%, #cbd5e1) !important;
  background: rgba(6, 10, 18, 0.92) !important;
  border: 1px solid color-mix(in srgb, var(--live-follow-color, #7dd3fc) 40%, transparent) !important;
  pointer-events: none !important;
  z-index: 8 !important;
  white-space: nowrap !important;
  opacity: 0.88 !important;
}
#view-canvas .board-presence-pill:not(.is-live-following) > .board-presence-live-tag {
  display: none !important;
}
#view-canvas .board-presence-live-tag::before,
#view-canvas .board-presence-live-tag::after {
  content: none !important;
  display: none !important;
}
#view-canvas .board-presence-av.is-live-follow {
  overflow: visible !important;
  z-index: 3;
  border-color: var(--live-follow-color, var(--peer-color, #7dd3fc)) !important;
  box-shadow:
    0 0 0 1px
      color-mix(
        in srgb,
        var(--live-follow-color, var(--peer-color, #7dd3fc)) 55%,
        transparent
      ),
    0 0 6px
      color-mix(
        in srgb,
        var(--live-follow-color, var(--peer-color, #7dd3fc)) 30%,
        transparent
      );
}
#view-canvas .board-presence-av.is-live-follow > img,
#view-canvas .board-presence-av.is-live-follow > .board-presence-initials {
  position: relative !important;
  z-index: 2 !important;
}
#view-canvas .board-presence-hint {
  display: block !important;
  box-sizing: border-box !important;
  width: auto !important;
  max-width: min(36vw, 14rem) !important;
  min-width: 0 !important;
  flex: 0 1 auto !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  color: #e2e8f0;
  position: relative;
  z-index: 2;
}
#view-canvas .board-presence-hint.is-following {
  color: color-mix(in srgb, var(--live-follow-color, #7dd3fc) 85%, #e2e8f0) !important;
  opacity: 1 !important;
}
#view-canvas .board-presence-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 0.58rem;
  font-weight: 700;
  color: #def;
  letter-spacing: 0.02em;
  line-height: 1;
  position: relative;
  z-index: 2;
}
@keyframes presence-soft-ring {
  0% {
    transform: translate(-50%, -50%) scale(0.92);
    opacity: 0.55;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.45);
    opacity: 0;
  }
}
@keyframes presence-live-dot {
  0%,
  100% {
    opacity: 0.95;
  }
  50% {
    opacity: 0.4;
  }
}
@media (prefers-reduced-motion: reduce) {
  #view-canvas .board-presence-ring {
    animation: none !important;
    opacity: 0.4 !important;
    transform: translate(-50%, -50%) scale(1.12) !important;
  }
  #view-canvas .board-presence-pill.is-pill-animating {
    transition: none !important;
  }
}
/* Global canvas rule is `img { position:absolute }` — force a real 22px chip */
#view-canvas .board-presence-av img {
  position: static !important;
  width: 22px !important;
  height: 22px !important;
  max-width: 22px !important;
  max-height: 22px !important;
  object-fit: cover;
  display: block;
  z-index: auto;
  user-select: none;
}
#view-canvas .board-presence-av-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 0.58rem;
  font-weight: 700;
  color: #def;
  letter-spacing: 0.02em;
  line-height: 1;
}
#view-canvas .board-presence-more {
  font-size: 0.7rem;
  font-weight: 650;
  color: rgba(186, 230, 253, 0.85);
  margin-left: 0.25rem;
}
#view-canvas .board-presence-hint {
  font-size: 0.68rem;
  font-weight: 600;
  color: rgba(186, 230, 253, 0.88);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  max-width: 11rem;
}
#view-canvas .board-presence-hint.is-remote {
  color: #bae6fd;
}
#view-canvas .board-presence-hint.is-following {
  color: color-mix(
    in srgb,
    var(--live-follow-color, var(--peer-color, #bae6fd)) 85%,
    #fff
  );
  font-weight: 700;
}
/* Notes button — topbar right, left of search (no fixed corner overlap) */
#view-canvas .canvas-topbar-notes {
  position: relative;
  flex-shrink: 0;
  z-index: 2;
  display: flex;
  align-items: center;
}
#view-canvas #delves-button.canvas-notes-btn,
#view-canvas .canvas-notes-btn {
  position: static !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  z-index: 1;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  height: 40px;
  min-height: 40px;
  margin: 0;
  padding: 0 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(155, 92, 240, 0.36);
  background:
    linear-gradient(165deg, rgba(36, 30, 58, 0.72) 0%, rgba(10, 9, 18, 0.78) 100%);
  color: rgba(230, 220, 255, 0.95);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  line-height: 1;
  cursor: pointer;
  box-sizing: border-box;
  box-shadow:
    0 2px 10px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(123, 63, 228, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.14s ease;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  white-space: nowrap;
}
#view-canvas #delves-button.canvas-notes-btn:not([hidden]),
#view-canvas .canvas-notes-btn:not([hidden]) {
  display: inline-flex;
}
#view-canvas #delves-button.canvas-notes-btn:hover,
#view-canvas .canvas-notes-btn:hover {
  border-color: rgba(186, 140, 255, 0.55);
  color: #f5f0ff;
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(155, 92, 240, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
}
#view-canvas #delves-button.canvas-notes-btn:active,
#view-canvas .canvas-notes-btn:active {
  transform: scale(0.97);
}
#view-canvas #delves-button.canvas-notes-btn.active,
#view-canvas #delves-button.canvas-notes-btn[aria-expanded="true"],
#view-canvas .canvas-notes-btn.active,
#view-canvas .canvas-notes-btn[aria-expanded="true"] {
  border-color: rgba(186, 140, 255, 0.65);
  color: #fff;
  background:
    linear-gradient(165deg, rgba(88, 48, 170, 0.5) 0%, rgba(16, 12, 28, 0.9) 100%);
}
#view-canvas #delves-button.canvas-notes-btn:focus-visible,
#view-canvas .canvas-notes-btn:focus-visible {
  outline: 2px solid rgba(186, 140, 255, 0.75);
  outline-offset: 2px;
}
#view-canvas #delves-button.canvas-notes-btn[hidden],
#view-canvas .canvas-notes-btn[hidden] {
  display: none !important;
}

/* Notes dropdown — anchors under Notes button, not under Back */
#view-canvas #delves-list.canvas-notes-list,
#view-canvas .canvas-notes-list {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: auto;
  width: min(240px, calc(100vw - 24px));
  max-height: min(320px, 50vh);
  overflow-x: hidden;
  overflow-y: auto;
  margin: 0;
  padding: 0.4rem;
  border-radius: 14px;
  border: 1px solid rgba(155, 92, 240, 0.38);
  background:
    linear-gradient(165deg, rgba(28, 24, 46, 0.94) 0%, rgba(10, 9, 18, 0.97) 100%);
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  z-index: 1300;
  box-shadow:
    0 12px 36px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(123, 63, 228, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  box-sizing: border-box;
  pointer-events: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(155, 92, 240, 0.4) transparent;
}
#view-canvas #delves-list.canvas-notes-list.is-open,
#view-canvas #delves-list.canvas-notes-list[style*="block"],
#view-canvas .canvas-notes-list.is-open {
  display: block;
}
#view-canvas #delves-list.canvas-notes-list[hidden],
#view-canvas .canvas-notes-list[hidden] {
  display: none !important;
}
#view-canvas #delves-list .delve-item,
#view-canvas .canvas-notes-list .delve-item {
  display: block;
  width: 100%;
  text-align: left;
  margin: 0.12rem 0 0;
  padding: 0.5rem 0.7rem;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: rgba(236, 230, 255, 0.95);
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  appearance: none;
  -webkit-appearance: none;
  transition: background 0.12s ease, border-color 0.12s ease;
}
#view-canvas #delves-list .delve-item:first-child,
#view-canvas .canvas-notes-list .delve-item:first-child {
  margin-top: 0;
}
#view-canvas #delves-list .delve-item:hover,
#view-canvas #delves-list .delve-item:focus-visible,
#view-canvas .canvas-notes-list .delve-item:hover,
#view-canvas .canvas-notes-list .delve-item:focus-visible {
  background: rgba(123, 63, 228, 0.22);
  border-color: rgba(186, 140, 255, 0.32);
  color: #fff;
  outline: none;
}
/* Terminal prompt only inside canvas notes list — never on lobby cards */
#view-canvas #delves-list .delve-item:hover::before {
  content: none;
}

#view-canvas .canvas-overflow-btn {
  position: static;
  z-index: auto;
  display: none !important; /* clear via keyboard/help only for now */
}
body.view-lobby #canvas-topbar {
  display: none !important;
}
body.view-lobby #delves-button,
body.view-lobby #delves-list {
  display: none !important;
}

/* Keep topbar right cluster from colliding on narrow viewports */
@media (max-width: 520px) {
  #view-canvas .canvas-topbar-right {
    gap: 0.35rem;
  }
  #view-canvas #delves-button.canvas-notes-btn,
  #view-canvas .canvas-notes-btn {
    padding: 0 0.7rem;
    font-size: 0.78rem;
  }
  #view-canvas .board-title-chip {
    max-width: min(28vw, 140px);
  }
}
/* Hide any leftover desktop toolbar if present */
#controls { display: none !important; }
body.view-lobby #help-button,
body.view-lobby #logo,
body.view-lobby #search-icon,
body.view-lobby #search-panel,
body.view-lobby #zoom-indicator { display: none !important; }

/* 2026-10-12 phone/guest fixes: locked card + sheets fit the viewport, readable footer */
body.lobby-guest .lobby-locked-panel,
.lobby-locked-wrap,
.lobby-sheet {
  box-sizing: border-box;
  max-width: 100%;
}
.lobby-sheet {
  max-width: calc(100vw - 2rem);
}
.lobby-contact button {
  color: rgba(203, 213, 225, 0.82);
}

/* ---- 2026-10-14: safe-area insets (viewport-fit=cover) ----
 * Each value = the rule's current offset, so nothing moves when the insets are 0
 * (desktop, Android, iPhone without notch). Edge-anchored controls take max(current, inset);
 * elements placed *below the canvas top bar* (which grows by the top inset) take current + inset. */
.shell-nav { top: max(12px, env(safe-area-inset-top, 0px)); left: max(12px, env(safe-area-inset-left, 0px)); }          /* :3179 */
#controls { top: max(10px, env(safe-area-inset-top, 0px)); left: max(10px, env(safe-area-inset-left, 0px)); }          /* :76 */
#auth-bar { top: max(10px, env(safe-area-inset-top, 0px)); }                                                           /* :1864 */
#help-button { bottom: max(12px, env(safe-area-inset-bottom, 0px)); right: max(58px, calc(env(safe-area-inset-right, 0px) + 46px)); } /* :1148; keeps the 46px lane for #zoom-indicator */
#zoom-indicator { bottom: max(12px, env(safe-area-inset-bottom, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); }  /* :1168 */
.notification { top: calc(50px + env(safe-area-inset-top, 0px)); left: max(10px, env(safe-area-inset-left, 0px)); }   /* :1847 */
#view-canvas .canvas-topbar {                                                                                          /* :5901 (padding 0 today) */
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}
#delve-page.delve-popup,
#delve-page { top: calc(72px + env(safe-area-inset-top, 0px)); right: max(24px, env(safe-area-inset-right, 0px)); }   /* :756, same selector list so specificity matches */
#paint-panel.paint-panel,
#view-canvas .paint-panel,
.paint-panel {                                                                                                         /* :6665 */
  top: calc(64px + env(safe-area-inset-top, 0px));
  right: max(12px, env(safe-area-inset-right, 0px));
  bottom: max(16px, env(safe-area-inset-bottom, 0px));
}