/* Enhanced Whiteboard Styles with Depth and Shadow System */
/* Following UI/UX Design Principles from design.txt */
/* Implementing layered backgrounds and elevation-based shadows */
/* UPDATED: Hover-only chrome for image components */

/* CSS Variables for Theme-Aware Design */
:root {
    /* Light Mode Colors - Layered backgrounds */
    --bg-darkest: #E8EBF0;     /* Page background - darkest layer */
    --bg-dark: #EDF0F5;        /* Container background */
    --bg: #F5F7FA;             /* Panel background */
    --bg-light: #FFFFFF;       /* Card background - lightest/elevated */

    /* Text colors */
    --text-primary: #1A1D29;
    --text-secondary: #4A5568;
    --text-muted: #718096;

    /* Shadow system - combining inset highlights and drop shadows */
    --shadow-xs: inset 0 1px 2px rgba(255, 255, 255, 0.3),
                 0 1px 2px rgba(0, 0, 0, 0.3),
                 0 2px 4px rgba(0, 0, 0, 0.08);

    --shadow-sm: inset 0 1px 2px rgba(255, 255, 255, 0.5),
                 0 2px 4px rgba(0, 0, 0, 0.3),
                 0 4px 8px rgba(0, 0, 0, 0.08);

    --shadow-md: inset 0 1px 2px rgba(255, 255, 255, 0.7),
                 0 4px 6px rgba(0, 0, 0, 0.3),
                 0 6px 10px rgba(0, 0, 0, 0.08);

    --shadow-lg: inset 0 1px 2px rgba(255, 255, 255, 0.8),
                 0 8px 12px rgba(0, 0, 0, 0.3),
                 0 10px 16px rgba(0, 0, 0, 0.10);

    --shadow-xl: inset 0 1px 2px rgba(255, 255, 255, 0.9),
                 0 12px 24px rgba(0, 0, 0, 0.3),
                 0 16px 32px rgba(0, 0, 0, 0.12);

    /* Inset shadow for depressed elements */
    --shadow-inset: inset 0 2px 4px rgba(0, 0, 0, 0.1),
                    inset 0 1px 2px rgba(0, 0, 0, 0.06);

    /* Border colors */
    --border-light: rgba(0, 0, 0, 0.08);
    --border-medium: rgba(0, 0, 0, 0.12);
}

[data-mantine-color-scheme="dark"] {
    /* Dark Mode Colors - Layered backgrounds */
    --bg-darkest: #0A0E17;     /* Page background - darkest layer */
    --bg-dark: #0F1419;        /* Container background */
    --bg: #141922;             /* Panel background */
    --bg-light: #1E2533;       /* Card background - lightest/elevated */

    /* Text colors */
    --text-primary: #F7FAFC;
    --text-secondary: #CBD5E0;
    --text-muted: #A0AEC0;

    /* Shadow system - darker shadows in dark mode */
    --shadow-xs: inset 0 1px 2px rgba(255, 255, 255, 0.05),
                 0 1px 2px rgba(0, 0, 0, 0.5),
                 0 2px 4px rgba(0, 0, 0, 0.3);

    --shadow-sm: inset 0 1px 2px rgba(255, 255, 255, 0.08),
                 0 2px 4px rgba(0, 0, 0, 0.5),
                 0 4px 8px rgba(0, 0, 0, 0.3);

    --shadow-md: inset 0 1px 2px rgba(255, 255, 255, 0.1),
                 0 4px 6px rgba(0, 0, 0, 0.5),
                 0 6px 10px rgba(0, 0, 0, 0.3);

    --shadow-lg: inset 0 1px 2px rgba(255, 255, 255, 0.12),
                 0 8px 12px rgba(0, 0, 0, 0.5),
                 0 10px 16px rgba(0, 0, 0, 0.4);

    --shadow-xl: inset 0 1px 2px rgba(255, 255, 255, 0.15),
                 0 12px 24px rgba(0, 0, 0, 0.6),
                 0 16px 32px rgba(0, 0, 0, 0.5);

    --shadow-inset: inset 0 2px 4px rgba(0, 0, 0, 0.3),
                    inset 0 1px 2px rgba(0, 0, 0, 0.2);

    /* Border colors */
    --border-light: rgba(255, 255, 255, 0.08);
    --border-medium: rgba(255, 255, 255, 0.12);
}

/* Global Styles */
body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg-darkest);
}

/* Elevation Classes - Apply shadows based on component importance */
.elevation-0 {
    box-shadow: none;
}

.elevation-1 {
    box-shadow: var(--shadow-xs);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.elevation-1:hover {
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.elevation-2 {
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.elevation-2:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.elevation-3 {
    box-shadow: var(--shadow-md);
    transition: box-shadow 0.2s ease;
}

.elevation-3:hover {
    box-shadow: var(--shadow-lg);
}

.elevation-4 {
    box-shadow: var(--shadow-lg);
}

.elevation-5 {
    box-shadow: var(--shadow-xl);
}

.elevation-inset {
    box-shadow: var(--shadow-inset);
    background: var(--bg-dark);
}

/* Whiteboard Container - Base layer */
#whiteboard-container {
    position: relative;
    width: 100vw;
    height: calc(100vh - 60px);
    overflow: hidden;
    background: var(--bg-dark);
    cursor: grab;
    touch-action: none;
}

#whiteboard-container.grabbing {
    cursor: grabbing;
}

@media (max-width: 62em) {
    #whiteboard-container {
        height: calc(100vh - 120px);
    }
}

/* Canvas Grid - Subtle grid with theme-aware colors */
#whiteboard-canvas {
    position: absolute;
    width: 10000px;
    height: 10000px;
    background-color: var(--bg);
    background-image:
        linear-gradient(var(--border-light) 1px, transparent 1px),
        linear-gradient(90deg, var(--border-light) 1px, transparent 1px);
    background-size: 50px 50px;
    background-position: 0 0;
    transform-origin: 0 0;
    transition: background-image 0.3s ease;
    transform-style: preserve-3d;
}

/* Hide grid when toggled */
#whiteboard-canvas.grid-hidden {
    background-image: none !important;
}

/* ============================================================================
   IMAGE COMPONENT HOVER-ONLY CHROME
   Clean canvas appearance with controls only on hover
   ============================================================================ */

/* Hide chrome by default for image components */
.image-component-hover-chrome {
    /* Remove card styling */
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* Hide header and resize handle by default */
.image-component-hover-chrome .component-header,
.image-component-hover-chrome .resize-handle {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

/* Show chrome on hover */
.image-component-hover-chrome:hover {
    background: var(--bg-light) !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 12px !important;
    box-shadow: var(--shadow-md) !important;
}

.image-component-hover-chrome:hover .component-header,
.image-component-hover-chrome:hover .resize-handle {
    opacity: 1;
    pointer-events: all;
}

/* When dragging or resizing, always show chrome */
.image-component-hover-chrome.dragging,
.image-component-hover-chrome.resizing {
    background: var(--bg-light) !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 12px !important;
    box-shadow: var(--shadow-xl) !important;
}

.image-component-hover-chrome.dragging .component-header,
.image-component-hover-chrome.dragging .resize-handle,
.image-component-hover-chrome.resizing .component-header,
.image-component-hover-chrome.resizing .resize-handle {
    opacity: 1;
    pointer-events: all;
}

/* Ensure image itself is always visible and fills space */
.image-component-hover-chrome .mantine-Image-root {
    border-radius: 0;
    transition: border-radius 0.2s ease;
}

.image-component-hover-chrome:hover .mantine-Image-root {
    border-radius: 8px;
}

/* ============================================================================
   END IMAGE COMPONENT HOVER-ONLY CHROME
   ============================================================================ */

/* ============================================================================
   CHART / WIDGET HOVER-ONLY CHROME (all chart tiles + time_clock)
   Flush tiles: no card styling at rest — the component sits directly on the
   canvas with zero border/padding. Unlike the image variant (whose hidden
   header keeps its 35px layout slot), the header here OVERLAYS the content on
   hover, so the chart fills the tile's full allotted rect at all times.
   Applied by the builders in lib/ai/handler/chart_analysis.py.
   ============================================================================ */

.chart-component-hover-chrome {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* Header overlays the top edge (bottom edge for top-anchored .chrome-bottom tiles) */
.chart-component-hover-chrome > .component-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 5;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
.chart-component-hover-chrome.chrome-bottom > .component-header {
    top: auto;
    bottom: 0;
    border-radius: 0 0 11px 11px;
}

.chart-component-hover-chrome > .resize-handle {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

/* Content fills the whole tile — the header overlays instead of consuming 35px */
.chart-component-hover-chrome > div:not(.component-header):not(.resize-handle) {
    height: 100% !important;
    overflow: hidden;
}

/* Hover (or an in-flight drag/resize) reveals the window chrome */
.chart-component-hover-chrome:hover,
.chart-component-hover-chrome.dragging,
.chart-component-hover-chrome.resizing {
    background: var(--bg-light) !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 12px !important;
    box-shadow: var(--shadow-md) !important;
}
.chart-component-hover-chrome:hover > .component-header,
.chart-component-hover-chrome:hover > .resize-handle,
.chart-component-hover-chrome.dragging > .component-header,
.chart-component-hover-chrome.dragging > .resize-handle,
.chart-component-hover-chrome.resizing > .component-header,
.chart-component-hover-chrome.resizing > .resize-handle {
    opacity: 1;
    pointer-events: all;
}

/* ============================================================================
   END CHART / WIDGET HOVER-ONLY CHROME
   ============================================================================ */

/* Draggable Components - Elevated cards with proper shadows */
.draggable-component {
    user-select: none;
    cursor: default;
    touch-action: none;
    background: var(--bg-light);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    position: absolute;
    isolation: isolate;
}

.draggable-component:hover {
    box-shadow: var(--shadow-md) !important;
    transform: translateY(-2px);
}

/* Per-tile controls that live INSIDE the blue window header (right of the title):
   z-index up/down + per-type tools + remove. Sits in a subtle translucent pill so the
   white glyphs read against the blue gradient. Always visible while the window is mounted. */
.tile-header-controls {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
    padding: 2px 4px;
    margin-left: 8px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.18);
}
.tile-header-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: rgba(255, 255, 255, 0.92);
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}
.tile-header-btn:hover {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}
.tile-header-danger:hover {
    background: rgba(244, 63, 63, 0.9);
    color: #fff;
}
.tile-header-sep {
    width: 1px;
    height: 16px;
    background: rgba(255, 255, 255, 0.3);
    margin: 0 3px;
}

/* Anchor header-flip: a TOP-anchored tile (data-anchor top-*) moves its header chrome to
   the BOTTOM so the chrome never sits on the pinned anchor edge. Scoped to .chrome-bottom
   so normal (block-flow) tiles are unchanged. The resize-handle is position:absolute, so
   it's unaffected; the content child flex-grows to fill above the bottom header. */
.draggable-component.chrome-bottom {
    display: flex;
    flex-direction: column-reverse;
}
.draggable-component.chrome-bottom > .component-header {
    border-radius: 0 0 11px 11px;
}
.draggable-component.chrome-bottom > :not(.component-header):not(.resize-handle) {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

/* Component Header - Gradient with depth */
.component-header {
    background: linear-gradient(135deg, var(--mantine-color-blue-6) 0%, var(--mantine-color-blue-7) 100%);
    color: white;
    padding: 8px 12px;
    cursor: move !important;
    border-radius: 11px 11px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 500;
    font-size: 14px;
    touch-action: none;
    height: 35px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),
                0 1px 3px rgba(0, 0, 0, 0.2);
}

[data-mantine-color-scheme="dark"] .component-header {
    background: linear-gradient(135deg, var(--mantine-color-blue-8) 0%, var(--mantine-color-blue-9) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1),
                0 1px 3px rgba(0, 0, 0, 0.4);
}

.component-title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Button Styles with Depth */
.remove-button {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: white;
    cursor: pointer;
    font-size: 18px;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    padding: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),
                0 1px 2px rgba(0, 0, 0, 0.2);
}

.remove-button:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3),
                0 2px 4px rgba(0, 0, 0, 0.3);
}

.remove-button:active {
    transform: translateY(0);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Z-Index Control Buttons */
.z-control-button {
    background: rgba(255, 255, 255, 0.12);
    border: none;
    color: white;
    cursor: pointer;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    padding: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15),
                0 1px 2px rgba(0, 0, 0, 0.2);
}

.z-control-button:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25),
                0 2px 4px rgba(0, 0, 0, 0.3);
}

.z-control-button:active {
    transform: translateY(0);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Resize Handle */
.resize-handle {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 20px;
    height: 20px;
    cursor: nwse-resize !important;
    background: linear-gradient(135deg, transparent 50%, var(--mantine-color-blue-6) 50%);
    border-radius: 0 0 11px 0;
    touch-action: none;
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

[data-mantine-color-scheme="dark"] .resize-handle {
    background: linear-gradient(135deg, transparent 50%, var(--mantine-color-blue-7) 50%);
}

.draggable-component:hover .resize-handle {
    opacity: 1;
}

/* Touch devices have no hover to reveal the resize handle, and fingers need a bigger target —
   keep it always visible and enlarge it. */
@media (pointer: coarse) {
    .resize-handle { width: 32px; height: 32px; opacity: 0.9; }
}

/* Dragging States */
.draggable-component.dragging {
    opacity: 0.9;
    z-index: 1000 !important;
    cursor: move !important;
    box-shadow: var(--shadow-xl) !important;
    transform: scale(1.02);
}

.draggable-component.resizing {
    opacity: 0.95;
    box-shadow: var(--shadow-lg) !important;
}

/* App Header - Maximum elevation */
.app-header {
    background: linear-gradient(to right, var(--mantine-color-blue-6), var(--mantine-color-blue-7)) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

[data-mantine-color-scheme="dark"] .app-header {
    background: linear-gradient(to right, var(--mantine-color-blue-8), var(--mantine-color-blue-9)) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* ---------------------------------------------------------------------------
   Canvas control bar position + responsive flip.
   The canvas dock fills the area below the control bar; positioning lives here
   (not inline) so the xs-sm media query can move BOTH pieces in sync.
   - md-xl (>=62em): blue control bar at the TOP (Mantine AppShellHeader default),
     dock starts at top:63px.
   - xs-sm (<62em): blue control bar flips to the BOTTOM (full width), dock fills
     from the top down to just above it.
   --------------------------------------------------------------------------- */
#canvas-dock-box {
    position: absolute;
    top: 63px;
    left: 0;
    right: 0;
    bottom: 0;
}

@media (max-width: 62em) {
    /* Flip the canvas control bar to the bottom of the screen on phones/tablets. */
    #canvas-app-header {
        top: auto !important;
        bottom: 0 !important;
    }
    /* Dock now fills the top, ending just above the 60px bottom control bar. */
    #canvas-dock-box {
        top: 0;
        bottom: 60px;
    }
    /* Keep the control bar on ONE row — the burger + tools cluster left and the bar
       scrolls horizontally if they overflow a narrow screen, instead of wrapping into a
       second (clipped) row. */
    #canvas-app-header .app-header {
        overflow-x: auto;
        overflow-y: hidden;
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 4px;
    }
    #canvas-app-header .app-header > div {
        flex-wrap: nowrap;
        flex-shrink: 0;
    }
    #canvas-app-header .app-header::-webkit-scrollbar {
        display: none;
    }
}

/* ── Mobile canvas: top-right speed-dial cluster ─────────────────────────────────────────────
   The Clerk avatar (in #global-top-right-overlay) is the anchor; the nav burger, light/dark
   toggle and Layers button orbit it as satellites. Mobile only (<62em) + canvas route only
   (body.on-canvas). The burger is lifted out of the bottom control bar into the cluster, and
   the 'Create Content' button (open-chat-btn) takes its old bottom-bar slot. */
@media (max-width: 62em) {
    /* Anchor row: [theme toggle, avatar]. */
    body.on-canvas #global-top-right-overlay {
        top: 10px !important;
        right: 12px !important;
        gap: 8px;
    }
    /* Burger satellite — out of the bottom bar, to the lower-left of the avatar. */
    body.on-canvas #canvas-mobile-menu-button.canvas-cluster-burger {
        position: fixed;
        top: 58px;
        right: 56px;
        z-index: 1302;
    }
    /* Layers satellite sits directly below the avatar (panel still opens downward). */
    body.on-canvas #layers-panel-container {
        top: 56px !important;
        right: 12px !important;
        z-index: 1301;
    }
}

/* ── Embed mode (canvas iframed into another page — e.g. the gallery inspector — with ?embed=1) ──
   Hide the canvas's OWN chrome that the host page already provides: the theme toggle + Clerk avatar
   (#global-top-right-overlay) and the mobile drawer burger (#canvas-mobile-menu-button). In the
   inspector the gallery page renders those already, so the embed should show just the board — not a
   duplicate set of controls. Toggled by the appshell clientside (body.canvas-embed). */
body.canvas-embed #global-top-right-overlay,
body.canvas-embed #canvas-mobile-menu-button {
    display: none !important;
}

/* ── AI Whiteboard Builder → top sheet on xs-sm ──────────────────────────────────────────────
   On phones/tablets the builder modal becomes a dmc.Drawer-style panel: it drops from the TOP,
   spans the full width, and reaches ~85vh — landing just above the bottom control bar (Console /
   Export / action icons). Desktop keeps the centered modal. */
@media (max-width: 62em) {
    .ai-builder-inner {
        align-items: flex-start !important;   /* anchor to the top instead of vertical-centering */
        padding: 0 !important;
    }
    .ai-builder-content {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 88vh !important;
        max-height: 88vh !important;
        margin: 0 !important;
        border-radius: 0 0 16px 16px !important;   /* rounded only at the bottom, like a top drawer */
        display: flex !important;
        flex-direction: column !important;
    }
    /* Let the body + the fixed-600px PanelGroup inside shrink to fill the 88vh sheet. */
    .ai-builder-content .mantine-Modal-body {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .ai-builder-content .ai-builder-panels-wrap,
    .ai-builder-content #chat-panel-group {
        height: 100% !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
    }
}

/* Builder content sits flush with its panel wrapper — drop the Modal body's default padding so
   the chat panels fill edge-to-edge (the input card + message Stack keep their own inner padding). */
.ai-builder-content .mantine-Modal-body {
    padding: 0 !important;
}
.ai-builder-panels-wrap { width: 100%; }

/* Layers tree per-row controls: keep the ⋮ kebab (Edit/Delete), hide the bundled MUI slider. */
#layers-tree .MuiSlider-root { display: none !important; }

/* ── Text note (canvas comment / dl2-TextMarker-style) ───────────────────────────────────────
   A chrome-light editable text element living in canvas-space. Handles + selection ring appear
   only while selected; the floating toolbar is theme-aware (dark glass in dark mode, clear glass
   in light). Driven by assets/js/text-note.js. */
.text-note {
    border-radius: 6px;
    transition: outline-color 0.12s ease;
    outline: 1.5px solid transparent;
    cursor: grab;
    max-width: 520px;
    /* Claim touch: the note drives its own select/drag/rotate/resize via pointer events, so the
       browser must NOT treat a touch on the note as a scroll/zoom gesture. Without this, a tap on a
       note on mobile gets eaten by the page/canvas pan instead of selecting the note. */
    touch-action: none;
}
.text-note.selected { outline-color: var(--mantine-color-blue-5); }
.text-note.editing { cursor: text; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35); }
/* While editing, hand touch back to the browser so caret placement / text selection work natively. */
.text-note.editing .text-note-body { touch-action: auto; }
.text-note-body {
    line-height: 1.3;
    word-break: break-word;
    min-height: 1em;
}
.text-note-body:focus { cursor: text; }
.tn-gesturing, .tn-gesturing * { user-select: none !important; }

/* Rotate handle: a blue dot above the note + the connecting axis line (dl2-style). */
.text-note-rotate, .text-note-resize { display: none; }
.text-note.selected .text-note-rotate {
    display: block; position: absolute; left: 50%; top: -30px;
    width: 12px; height: 12px; margin-left: -6px; border-radius: 50%;
    background: var(--mantine-color-blue-5); border: 2px solid #fff;
    cursor: grab; z-index: 2;
}
.text-note.selected .text-note-rotate::before {
    content: ""; position: absolute; left: 50%; top: 12px; width: 1.5px; height: 18px;
    margin-left: -0.75px; background: var(--mantine-color-blue-5);
}
/* Resize handle: bottom-right corner, scales fontSize. */
.text-note.selected .text-note-resize {
    display: block; position: absolute; right: -7px; bottom: -7px;
    width: 12px; height: 12px; border-radius: 50%;
    background: #fff; border: 2px solid var(--mantine-color-blue-5);
    cursor: nwse-resize; z-index: 2;
}
/* Touch devices (coarse pointer): enlarge the rotate/resize handles so they're actually hittable
   with a fingertip (the 12px desktop dots are far too small for touch). */
@media (pointer: coarse) {
    .text-note.selected .text-note-rotate {
        width: 22px; height: 22px; margin-left: -11px; top: -40px;
    }
    .text-note.selected .text-note-rotate::before { top: 22px; height: 22px; }
    .text-note.selected .text-note-resize {
        width: 22px; height: 22px; right: -12px; bottom: -12px;
    }
}
/* View-only: hide the note's edit affordances entirely. */
body.canvas-readonly .text-note.selected .text-note-rotate,
body.canvas-readonly .text-note.selected .text-note-resize,
body.canvas-readonly #text-note-toolbar { display: none !important; }

/* Floating toolbar — sits at the top-centre of the canvas dock while a note is selected.
   z-index 1250 is intentionally BELOW the fixed mobile burger (1302) + layers panel (1301): the
   toolbar is position:absolute inside #canvas-dock-box (which has no z-index), so it always renders
   behind that fixed chrome regardless — keeping the chrome reachable. Don't add a z-index to
   #canvas-dock-box without revisiting this. */
.text-note-toolbar {
    position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
    z-index: 1250; display: flex; align-items: center; gap: 6px;
    padding: 6px 10px; border-radius: 12px;
    font: 500 13px system-ui, -apple-system, sans-serif;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
}
/* Dark mode → dark glass; light mode → clear/light glass. */
[data-mantine-color-scheme="dark"] .text-note-toolbar {
    background: rgba(17, 19, 26, 0.86); border: 1px solid rgba(255, 255, 255, 0.12); color: #fff;
}
[data-mantine-color-scheme="light"] .text-note-toolbar {
    background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(0, 0, 0, 0.08); color: #1a1b1e;
}
.text-note-toolbar button, .text-note-toolbar select {
    background: transparent; border: none; color: inherit; cursor: pointer;
    font: inherit; padding: 3px 6px; border-radius: 6px; line-height: 1;
}
.text-note-toolbar button:hover, .text-note-toolbar select:hover { background: rgba(127, 127, 127, 0.18); }
.text-note-toolbar button.on { background: var(--mantine-color-blue-5); color: #fff; }
.text-note-toolbar .tn-size { min-width: 22px; text-align: center; opacity: 0.85; }
.text-note-toolbar .tn-sep { width: 1px; height: 18px; background: rgba(127, 127, 127, 0.3); }
.text-note-toolbar .tn-color {
    display: inline-flex; align-items: center; gap: 3px; cursor: pointer; position: relative;
}
.text-note-toolbar .tn-color input[type="color"] {
    width: 20px; height: 20px; padding: 0; border: none; background: none; cursor: pointer;
}
.text-note-toolbar .tn-rot-wrap { display: inline-flex; align-items: center; gap: 3px; opacity: 0.9; }
.text-note-toolbar .tn-rot-wrap input {
    width: 44px; background: rgba(127, 127, 127, 0.15); border: none; color: inherit;
    border-radius: 5px; padding: 2px 4px; font: inherit;
}
.text-note-toolbar .tn-del:hover { background: var(--mantine-color-red-6); color: #fff; }
/* Forced flex line-break — inert on desktop (single row), turned into a full-width break on mobile
   so the toolbar splits into exactly two rows (row 1: font + size, row 2: style + actions). */
.text-note-toolbar .tn-break { display: none; }

/* xs-sm: the toolbar has too many controls for a phone's width — let it wrap to a compact,
   centred 2-row cluster that always stays within the screen (drop the separators to save room). */
@media (max-width: 62em) {
    .text-note-toolbar {
        top: 45px;                       /* 35px lower → clears the top-right speed-dial / avatar */
        /* Left-anchored + width/height capped to the viewport so it can't run off-screen (right edge
           bounded by max-width, scrolls within max-height on a short landscape viewport). */
        left: 50px;
        right: auto;
        transform: none;                 /* override the base translateX(-50%) centring */
        max-width: calc(-160px + 100vw);
        max-height: calc(-90px + 100vh);
        overflow-y: auto;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 4px 6px;
        padding: 5px 8px;
        font-size: 12px;
    }
    .text-note-toolbar .tn-sep { display: none; }
    .text-note-toolbar select[data-tn="font"] { max-width: 116px; }
    .text-note-toolbar .tn-rot-wrap input { width: 40px; }
    /* Force exactly TWO rows: this full-width break pushes everything after it (B / I / colors /
       rotation / delete) onto row 2, leaving font + size controls on row 1. */
    .text-note-toolbar .tn-break { display: block; flex-basis: 100%; width: 100%; height: 0; margin: 0; }
    /* Roomier tap targets for touch (still compact). */
    .text-note-toolbar button, .text-note-toolbar select {
        padding: 7px 9px; min-height: 36px; display: inline-flex; align-items: center; justify-content: center;
    }
    .text-note-toolbar .tn-color, .text-note-toolbar .tn-rot-wrap { min-height: 36px; }
    .text-note-toolbar .tn-color input[type="color"] { width: 24px; height: 24px; }
}


/* ── Rich-text note: read-only tile (the canvas window) + the editor overlay ──────────────── */
/* The tile is always the READ-ONLY render (dcc.Markdown of the saved MARKDOWN) with a corner Edit pencil
   on hover. Authoring happens in the markdown-editor overlay (below), never in a cell. */
.note-view-wrap { width: 100%; }
.note-md-wrap { padding: 8px 12px; }
.note-md > :first-child { margin-top: 0; }
.note-md > :last-child { margin-bottom: 0; }
.note-md p, .note-md ul, .note-md ol { margin: 0.35em 0; }
.note-md h1, .note-md h2, .note-md h3 { margin: 0.5em 0 0.3em; line-height: 1.2; }
.note-md blockquote {
    margin: 0.5em 0; padding: 2px 0 2px 12px; border-left: 3px solid var(--mantine-color-blue-4);
    color: var(--mantine-color-dimmed);
}
.note-md pre { padding: 8px 10px; border-radius: 8px; overflow: auto; }
/* Embedded images/gifs/video must never overflow the tile (the user pastes full-res forum media). */
.note-md img, .note-md video { max-width: 100%; height: auto; border-radius: 6px; }
.note-md table { border-collapse: collapse; }
.note-md th, .note-md td { border: 1px solid var(--mantine-color-default-border); padding: 3px 7px; }
/* Sticky note: the inline background colour is set in factory; keep the text dark for contrast. */
.note-view-wrap.note-sticky, .note-view-wrap.note-sticky .note-md { color: #1a1a1a; }
.note-edit-btn {
    position: absolute; top: 4px; right: 4px; z-index: 4;
    width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
    border: none; border-radius: 6px; cursor: pointer; opacity: 0;
    background: rgba(127, 127, 127, 0.15); color: var(--mantine-color-blue-6);
    transition: opacity 0.12s ease;
}
.note-view-wrap:hover .note-edit-btn { opacity: 1; }
.note-edit-btn:hover { background: var(--mantine-color-blue-5); color: #fff; }
/* Read-only canvas viewers can't edit notes — hide the pencil. */
body.canvas-readonly .note-edit-btn { display: none !important; }

/* Markdown-editor overlay — title + token toolbar + a split (source | live preview) + pinned actions. */
.note-editor-body-wrap { display: flex; flex-direction: column; height: 100%; min-height: 0; gap: 8px; }
.note-editor-title { flex: 0 0 auto; }
.note-md-toolbar { flex: 0 0 auto; flex-wrap: wrap; }
.note-md-editor {
    flex: 1 1 auto; min-height: 0; display: flex; gap: 10px; height: 52vh;
}
.note-pane { flex: 1 1 0; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 4px; }
.note-pane-label { flex: 0 0 auto; text-transform: uppercase; letter-spacing: 0.04em; }
.note-editor-src { flex: 1 1 auto; min-height: 0; display: flex; }
.note-editor-src .mantine-Textarea-root,
.note-editor-src .mantine-Textarea-wrapper { flex: 1 1 auto; min-height: 0; display: flex; width: 100%; }
.note-editor-src .mantine-Textarea-input, .note-editor-src textarea {
    flex: 1 1 auto; height: 100% !important; min-height: 0; resize: none;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 13px; line-height: 1.5; tab-size: 2;
}
.note-editor-preview-scroll {
    flex: 1 1 auto; min-height: 0;
    border: 1px solid var(--mantine-color-default-border); border-radius: 8px; padding: 8px 10px;
}
.note-editor-actions { flex: 0 0 auto; }
/* On xs-sm the editor modal becomes a top full-width ~88vh sheet (mirrors .ai-builder-*); the split
   stacks (source over preview) so each pane is usable on a phone. */
@media (max-width: 62em) {
    .note-editor-inner { align-items: flex-start !important; padding: 0 !important; }
    .note-editor-content {
        width: 100vw !important; max-width: 100vw !important;
        height: 88vh !important; max-height: 88vh !important; margin: 0 !important;
        border-radius: 0 0 16px 16px !important;   /* rounded only at the bottom, like a top drawer */
        display: flex !important; flex-direction: column !important;
    }
    .note-editor-content .mantine-Modal-body {
        flex: 1 1 auto !important; min-height: 0 !important; overflow: hidden !important;
        display: flex !important; flex-direction: column !important;
    }
    .note-editor-content .note-editor-body-wrap { flex: 1 1 auto; min-height: 0; }
    .note-md-editor { flex-direction: column; height: auto; }   /* stack source over preview */
    .note-pane { flex: 1 1 50%; }
}


/* ── Code tile: in-tile editor (Textarea) + read-only (CodeHighlightTabs) ─────────────────── */
/* A plain Textarea/CodeHighlight serialises fine in a cell, so code edits IN PLACE (no overlay). */
.code-edit-wrap { width: 100%; }
.code-editor-bar { flex: 0 0 auto; }
.code-editor-area { flex: 1 1 auto; min-height: 0; display: flex; }
.code-editor-area .mantine-Textarea-wrapper,
.code-editor-area .mantine-Textarea-root { flex: 1 1 auto; min-height: 0; display: flex; width: 100%; }
.code-editor-area .mantine-Textarea-input,
.code-editor-area textarea {
    flex: 1 1 auto; height: 100% !important; min-height: 0; resize: none;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 13px; line-height: 1.5; tab-size: 4;
}
.code-view-wrap .code-view-inner { padding: 6px; }
.code-view-wrap .mantine-CodeHighlightTabs-root,
.code-view-wrap .mantine-CodeHighlight-root { font-size: 12.5px; }


/* ── Ask AI (view-only) chat ─────────────────────────────────────────────────────────────── */
.ask-ai-container { display: flex; flex-direction: column; height: 100%; }
.ask-md, .ask-md p { color: #fff; font-size: 14px; margin: 0; line-height: 1.45; }
.ask-md p + p { margin-top: 6px; }
.ask-md ul, .ask-md ol { margin: 4px 0 4px 18px; }
.ask-md code {
    background: rgba(255, 255, 255, 0.12); padding: 1px 5px; border-radius: 4px;
    font-size: 12.5px;
}
.ask-md pre {
    background: rgba(0, 0, 0, 0.35); padding: 8px 10px; border-radius: 6px;
    overflow: auto; margin: 6px 0;
}
.ask-md pre code { background: transparent; padding: 0; }
.ask-md a { color: var(--mantine-color-cyan-4); }
.ask-live-text { color: #fff; font-size: 14px; line-height: 1.45; white-space: pre-wrap; }

/* Header Controls with Depth */
.header-control {
    background: rgba(255, 255, 255, 0.15) !important;
    border-radius: 8px;
    transition: all 0.2s ease;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),
                0 1px 3px rgba(0, 0, 0, 0.2);
}

.header-control:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3),
                0 2px 6px rgba(0, 0, 0, 0.25);
}

.header-control:active {
    transform: translateY(0);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Zoom Display with Depth */
.zoom-display {
    background: rgba(255, 255, 255, 0.2) !important;
    color: white !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3),
                0 2px 4px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

/* Chat Messages Container - Inset appearance */
.chat-messages-container {
    background: var(--bg);
    border-radius: 12px;
    box-shadow: var(--shadow-inset);
    border: 1px solid var(--border-light);
}

/* Chat Message Cards - Elevated */
.user-message-card {
    background: var(--bg-light);
    border-color: var(--mantine-color-blue-2);
    box-shadow: var(--shadow-xs);
    transition: box-shadow 0.2s ease;
}

.user-message-card:hover {
    box-shadow: var(--shadow-sm);
}

[data-mantine-color-scheme="dark"] .user-message-card {
    background: var(--bg-light);
    border-color: var(--mantine-color-blue-9);
}

.assistant-message-card {
    background: var(--bg-light);
    border-color: var(--mantine-color-cyan-2);
    box-shadow: var(--shadow-xs);
    transition: box-shadow 0.2s ease;
}

.assistant-message-card:hover {
    box-shadow: var(--shadow-sm);
}

[data-mantine-color-scheme="dark"] .assistant-message-card {
    background: var(--bg-light);
    border-color: var(--mantine-color-cyan-9);
}

/* Chat Input Card - Higher elevation */
.chat-input-card {
    background: var(--bg-light);
    box-shadow: var(--shadow-md);
    border-color: var(--border-medium);
}

/* Note Section - Slightly inset */
.note-section {
    background: var(--bg);
    border-radius: 8px;
    box-shadow: var(--shadow-inset);
    border: 1px solid var(--border-light);
}

/* Component Cards in Explorer */
.component-card {
    background: var(--bg-light);
    border-color: var(--border-light);
    transition: all 0.2s ease;
}

.component-card:hover {
    background: var(--bg-light);
    transform: translateX(2px);
}

/* Scrollbars */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: var(--border-medium);
    border-radius: 4px;
    transition: background 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* ============================================================================
   APPLE-STYLE GLASS SCROLLBAR DESIGN FOR DMC SCROLLAREA
   Modern, translucent scrollbars with glass morphism

   Add this to your existing style.css file in the /assets folder
   ============================================================================ */

/* ScrollArea Container - Enhanced spacing for larger scrollbars */
.mantine-ScrollArea-root {
    --scrollarea-scrollbar-size: 14px;
}

/* Scrollbar Track - Glass background */
.mantine-ScrollArea-scrollbar {
    /* Glass morphism background */
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px) saturate(150%);
    -webkit-backdrop-filter: blur(10px) saturate(150%);

    /* Rounded corners */
    border-radius: 10px;

    /* Subtle border */
    border: 1px solid rgba(255, 255, 255, 0.1);

    /* Padding for thumb */
    padding: 2px;

    /* Size */
    width: var(--scrollarea-scrollbar-size) !important;

    /* Smooth transitions */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* Subtle shadow */
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.1),
        0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Vertical scrollbar positioning */
.mantine-ScrollArea-scrollbar[data-orientation="vertical"] {
    width: var(--scrollarea-scrollbar-size) !important;
    right: 2px;
    top: 2px;
    bottom: 2px;
}

/* Horizontal scrollbar positioning */
.mantine-ScrollArea-scrollbar[data-orientation="horizontal"] {
    height: var(--scrollarea-scrollbar-size) !important;
    left: 2px;
    right: 2px;
    bottom: 2px;
}

/* Scrollbar Thumb - Apple-style design */
.mantine-ScrollArea-thumb {
    /* Gradient background */
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.25) 0%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.1) 100%
    );

    /* Glass effect */
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);

    /* Rounded */
    border-radius: 8px !important;

    /* Subtle border */
    border: 1px solid rgba(255, 255, 255, 0.2);

    /* Inner highlight */
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.3),
        inset 0 -1px 2px rgba(0, 0, 0, 0.1),
        0 2px 8px rgba(0, 0, 0, 0.15);

    /* Smooth transitions */
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

    /* Minimum size */
    min-height: 40px !important;
    min-width: 40px !important;
}

/* Thumb hover state */
.mantine-ScrollArea-thumb:hover {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.35) 0%,
        rgba(255, 255, 255, 0.25) 50%,
        rgba(255, 255, 255, 0.18) 100%
    );

    border-color: rgba(255, 255, 255, 0.3);

    box-shadow:
        inset 0 1px 3px rgba(255, 255, 255, 0.4),
        inset 0 -1px 2px rgba(0, 0, 0, 0.15),
        0 4px 12px rgba(0, 0, 0, 0.2);

    transform: scale(1.05);
}

/* Thumb active/dragging state */
.mantine-ScrollArea-thumb:active {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.4) 0%,
        rgba(255, 255, 255, 0.3) 50%,
        rgba(255, 255, 255, 0.22) 100%
    );

    border-color: rgba(255, 255, 255, 0.35);

    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.15),
        0 2px 6px rgba(0, 0, 0, 0.25);

    transform: scale(0.98);
}

/* Scrollbar Corner (where horizontal and vertical meet) */
.mantine-ScrollArea-corner {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    border-radius: 0 0 10px 0;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ============================================================================
   DARK MODE SCROLLBAR ADJUSTMENTS
   ============================================================================ */

[data-mantine-color-scheme="dark"] .mantine-ScrollArea-scrollbar {
    background: rgba(0, 0, 0, 0.15);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.05),
        0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-mantine-color-scheme="dark"] .mantine-ScrollArea-thumb {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.18) 0%,
        rgba(255, 255, 255, 0.12) 50%,
        rgba(255, 255, 255, 0.08) 100%
    );

    border-color: rgba(255, 255, 255, 0.15);

    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.2),
        inset 0 -1px 2px rgba(0, 0, 0, 0.2),
        0 2px 8px rgba(0, 0, 0, 0.4);
}

[data-mantine-color-scheme="dark"] .mantine-ScrollArea-thumb:hover {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.25) 0%,
        rgba(255, 255, 255, 0.18) 50%,
        rgba(255, 255, 255, 0.12) 100%
    );

    border-color: rgba(255, 255, 255, 0.2);

    box-shadow:
        inset 0 1px 3px rgba(255, 255, 255, 0.25),
        inset 0 -1px 2px rgba(0, 0, 0, 0.25),
        0 4px 12px rgba(0, 0, 0, 0.5);
}

[data-mantine-color-scheme="dark"] .mantine-ScrollArea-thumb:active {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.3) 0%,
        rgba(255, 255, 255, 0.22) 50%,
        rgba(255, 255, 255, 0.15) 100%
    );

    border-color: rgba(255, 255, 255, 0.25);

    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.3),
        0 2px 6px rgba(0, 0, 0, 0.6);
}

[data-mantine-color-scheme="dark"] .mantine-ScrollArea-corner {
    background: rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.05);
}

/* ============================================================================
   ENHANCED SCROLLBAR VARIANTS
   Add className to ScrollArea component to use these variants
   ============================================================================ */

/* Accent variant - Blue tinted for primary areas
   Usage: dmc.ScrollArea(className="scrollarea-accent", ...) */
.scrollarea-accent .mantine-ScrollArea-thumb {
    background: linear-gradient(
        135deg,
        rgba(34, 139, 230, 0.35) 0%,
        rgba(34, 139, 230, 0.25) 50%,
        rgba(34, 139, 230, 0.18) 100%
    );
    border-color: rgba(34, 139, 230, 0.3);
}

.scrollarea-accent .mantine-ScrollArea-thumb:hover {
    background: linear-gradient(
        135deg,
        rgba(34, 139, 230, 0.45) 0%,
        rgba(34, 139, 230, 0.35) 50%,
        rgba(34, 139, 230, 0.25) 100%
    );
    border-color: rgba(34, 139, 230, 0.4);
}

/* Minimal variant - Ultra-subtle for clean interfaces
   Usage: dmc.ScrollArea(className="scrollarea-minimal", ...) */
.scrollarea-minimal .mantine-ScrollArea-scrollbar {
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
}

.scrollarea-minimal .mantine-ScrollArea-thumb {
    background: rgba(0, 0, 0, 0.15);
    border: none;
    box-shadow: none;
}

.scrollarea-minimal .mantine-ScrollArea-thumb:hover {
    background: rgba(0, 0, 0, 0.25);
}

[data-mantine-color-scheme="dark"] .scrollarea-minimal .mantine-ScrollArea-thumb {
    background: rgba(255, 255, 255, 0.15);
}

[data-mantine-color-scheme="dark"] .scrollarea-minimal .mantine-ScrollArea-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* Vibrant variant - More visible, colored scrollbars
   Usage: dmc.ScrollArea(className="scrollarea-vibrant", ...) */
.scrollarea-vibrant .mantine-ScrollArea-thumb {
    background: linear-gradient(
        135deg,
        rgba(124, 58, 237, 0.4) 0%,
        rgba(139, 92, 246, 0.3) 50%,
        rgba(167, 139, 250, 0.2) 100%
    );
    border-color: rgba(124, 58, 237, 0.35);
}

.scrollarea-vibrant .mantine-ScrollArea-thumb:hover {
    background: linear-gradient(
        135deg,
        rgba(124, 58, 237, 0.5) 0%,
        rgba(139, 92, 246, 0.4) 50%,
        rgba(167, 139, 250, 0.3) 100%
    );
    border-color: rgba(124, 58, 237, 0.45);
}

/* ============================================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================================ */

/* Slightly smaller on mobile for more screen space */
@media (max-width: 48em) {
    .mantine-ScrollArea-root {
        --scrollarea-scrollbar-size: 12px;
    }

    .mantine-ScrollArea-thumb {
        min-height: 30px !important;
        min-width: 30px !important;
    }
}

/* ============================================================================
   ACCESSIBILITY ENHANCEMENTS
   ============================================================================ */

/* High contrast mode */
@media (prefers-contrast: high) {
    .mantine-ScrollArea-scrollbar {
        background: rgba(0, 0, 0, 0.2);
        border-width: 2px;
        border-color: rgba(0, 0, 0, 0.4);
    }

    .mantine-ScrollArea-thumb {
        background: rgba(0, 0, 0, 0.5) !important;
        border-width: 2px;
        border-color: rgba(0, 0, 0, 0.7);
    }

    [data-mantine-color-scheme="dark"] .mantine-ScrollArea-scrollbar {
        background: rgba(255, 255, 255, 0.2);
        border-color: rgba(255, 255, 255, 0.4);
    }

    [data-mantine-color-scheme="dark"] .mantine-ScrollArea-thumb {
        background: rgba(255, 255, 255, 0.5) !important;
        border-color: rgba(255, 255, 255, 0.7);
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .mantine-ScrollArea-scrollbar,
    .mantine-ScrollArea-thumb {
        transition: none !important;
    }
}

/* ============================================================================
   FOCUS STATES FOR KEYBOARD NAVIGATION
   ============================================================================ */

.mantine-ScrollArea-viewport:focus-within .mantine-ScrollArea-scrollbar {
    background: rgba(34, 139, 230, 0.08);
    border-color: rgba(34, 139, 230, 0.15);
}

.mantine-ScrollArea-viewport:focus-within .mantine-ScrollArea-thumb {
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.3),
        0 0 0 2px rgba(34, 139, 230, 0.2),
        0 2px 8px rgba(0, 0, 0, 0.15);
}

/* ============================================================================
   END APPLE-STYLE GLASS SCROLLBAR DESIGN
   ============================================================================ */

/* Loading States */
.loading-overlay {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(4px);
}

[data-mantine-color-scheme="dark"] .loading-overlay {
    background: rgba(0, 0, 0, 0.8);
}

/* Accessibility - Focus rings with depth */
*:focus-visible {
    outline: 2px solid var(--mantine-color-blue-6);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(66, 153, 225, 0.2);
}

[data-mantine-color-scheme="dark"] *:focus-visible {
    outline-color: var(--mantine-color-blue-4);
    box-shadow: 0 0 0 4px rgba(144, 205, 244, 0.2);
}

/* Mobile Optimizations */
@media (max-width: 48em) {
    .component-header {
        font-size: 13px;
        padding: 6px 10px;
    }

    .remove-button,
    .z-control-button {
        width: 24px;
        height: 24px;
        font-size: 16px;
    }

    .resize-handle {
        width: 24px;
        height: 24px;
    }

    /* Reduce shadows on mobile for performance */
    .elevation-1,
    .elevation-2,
    .elevation-3,
    .elevation-4,
    .elevation-5 {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }
}

/* Print Styles */
@media print {
    #whiteboard-container {
        background: white !important;
    }

    .component-header {
        background: #228be6 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .elevation-1,
    .elevation-2,
    .elevation-3,
    .elevation-4,
    .elevation-5 {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .draggable-component {
        border-width: 2px;
    }

    .component-header {
        font-weight: 600;
    }

    :root {
        --border-light: rgba(0, 0, 0, 0.3);
        --border-medium: rgba(0, 0, 0, 0.5);
    }

    [data-mantine-color-scheme="dark"] {
        --border-light: rgba(255, 255, 255, 0.3);
        --border-medium: rgba(255, 255, 255, 0.5);
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }

    .elevation-1:hover,
    .elevation-2:hover,
    .elevation-3:hover {
        transform: none !important;
    }
}

/* Selection colors - Theme aware */
::selection {
    background: var(--mantine-color-blue-2);
    color: var(--mantine-color-dark-9);
}

[data-mantine-color-scheme="dark"] ::selection {
    background: var(--mantine-color-blue-8);
    color: var(--mantine-color-gray-0);
}

/* DashFlexLayout Panel Enhancements */
.flexlayout__border_inner {
    background: var(--bg) !important;
    box-shadow: var(--shadow-sm);
}

.flexlayout__tab {
    background: var(--bg-light) !important;
    border-color: var(--border-light) !important;
}

.flexlayout__tab:hover {
    background: var(--bg-light) !important;
    box-shadow: var(--shadow-xs);
}

.flexlayout__tab_button--selected {
    background: var(--bg-light) !important;
    box-shadow: var(--shadow-sm);
}

.flexlayout__tabset_header {
    background: var(--bg-dark) !important;
    border-color: var(--border-light) !important;
}

.flexlayout__splitter {
    background: var(--bg-dark) !important;
}

/* AppShell Layout - Position main content below fixed header.
   The canvas ('/') is full-bleed, so main is stripped of padding + scroll. */
.mantine-AppShell-main {
    padding: 0 !important;
    overflow: hidden;
}

/* Documentation pages ('/docs/*', tagged `docs-main` by
   toggle_header_footer_visibility): undo the full-bleed override above and
   restore Mantine's header + navbar offsets so content clears the fixed header
   and the pulled-out docs navbar, and scrolls normally for long pages. */
.mantine-AppShell-main.docs-main {
    padding-top: var(--app-shell-header-offset, 70px) !important;
    padding-inline-start: var(--app-shell-navbar-offset, 0px) !important;
    padding-inline-end: var(--mantine-spacing-md, 16px) !important;
    padding-bottom: var(--app-shell-footer-offset, 60px) !important;
    overflow: visible !important;
}

/* DashFlexLayout container fills its absolutely positioned parent */
.mantine-AppShell-main .flexlayout__layout {
    width: 100% !important;
    height: 100% !important;
}

/* Enhance Mantine Components */
.mantine-Button-root {
    transition: all 0.2s ease;
}

.mantine-Button-root:hover {
    transform: translateY(-1px);
}

.mantine-Button-root:active {
    transform: translateY(0);
}

.mantine-Card-root {
    background: var(--bg-light);
    border-color: var(--border-light);
}

.mantine-Badge-root {
    box-shadow: var(--shadow-xs);
    transition: box-shadow 0.2s ease;
}

.mantine-Badge-root:hover {
    box-shadow: var(--shadow-sm);
}

.mantine-Avatar-root {
    box-shadow: var(--shadow-xs);
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.draggable-component {
    animation: fadeIn 0.3s ease;
}

/* Lasso Tool Styles */
.lasso-control.active {
    background: rgba(255, 255, 255, 0.35) !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2),
                0 0 0 2px rgba(255, 255, 255, 0.3) !important;
}

#whiteboard-container.lasso-mode-active {
    cursor: crosshair !important;
}

#whiteboard-container.lasso-mode-active .draggable-component {
    cursor: default !important;
}

#whiteboard-container.lasso-mode-active .component-header {
    cursor: default !important;
}

/* Lasso SVG path visualization */
#lasso-svg {
    pointer-events: none;
}

#lasso-path {
    animation: dash 1s linear infinite;
}

@keyframes dash {
    to {
        stroke-dashoffset: -10;
    }
}

/* Selected components highlight */
.draggable-component.lasso-selected {
    box-shadow: 0 0 0 3px var(--mantine-color-blue-5) !important;
    outline: 2px dashed var(--mantine-color-blue-6);
    outline-offset: 2px;
}

[data-mantine-color-scheme="dark"] .draggable-component.lasso-selected {
    box-shadow: 0 0 0 3px var(--mantine-color-blue-7) !important;
    outline-color: var(--mantine-color-blue-5);
}

/* Selection box for group manipulation */
.selection-box {
    border: 2px dashed var(--mantine-color-blue-6);
    background: rgba(34, 139, 230, 0.1);
    pointer-events: all;
    cursor: move;
    z-index: 9998;
    box-shadow: 0 0 0 1px rgba(34, 139, 230, 0.3),
                0 4px 12px rgba(34, 139, 230, 0.2);
    transition: box-shadow 0.2s ease;
}

[data-mantine-color-scheme="dark"] .selection-box {
    border-color: var(--mantine-color-blue-5);
    background: rgba(66, 153, 225, 0.15);
    box-shadow: 0 0 0 1px rgba(66, 153, 225, 0.4),
                0 4px 12px rgba(66, 153, 225, 0.3);
}

.selection-box:hover {
    background: rgba(34, 139, 230, 0.15);
    box-shadow: 0 0 0 2px rgba(34, 139, 230, 0.4),
                0 6px 16px rgba(34, 139, 230, 0.3);
}

[data-mantine-color-scheme="dark"] .selection-box:hover {
    background: rgba(66, 153, 225, 0.2);
}

.selection-box.dragging {
    background: rgba(34, 139, 230, 0.2);
    box-shadow: 0 0 0 3px rgba(34, 139, 230, 0.5),
                0 8px 24px rgba(34, 139, 230, 0.4);
}

/* Selection box resize handle */
.selection-resize-handle {
    position: absolute;
    bottom: -6px;
    right: -6px;
    width: 16px;
    height: 16px;
    background: var(--mantine-color-blue-6);
    border: 2px solid white;
    border-radius: 50%;
    cursor: nwse-resize;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
    z-index: 10000;
}

[data-mantine-color-scheme="dark"] .selection-resize-handle {
    background: var(--mantine-color-blue-5);
    border-color: var(--bg-dark);
}

.selection-resize-handle:hover {
    transform: scale(1.3);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
}

/* Lasso mode indicator badge */
.lasso-mode-indicator {
    position: fixed;
    top: 80px;
    right: 20px;
    background: var(--mantine-color-blue-6);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: var(--shadow-md);
    z-index: 10000;
    animation: fadeIn 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Highlight tree items that are lasso-selected */
.mantine-Tree-node[data-checked="true"] {
    background: rgba(34, 139, 230, 0.1);
    border-left: 3px solid var(--mantine-color-blue-6);
    transition: all 0.2s ease;
}

[data-mantine-color-scheme="dark"] .mantine-Tree-node[data-checked="true"] {
    background: rgba(66, 153, 225, 0.15);
    border-left-color: var(--mantine-color-blue-5);
}

[data-mantine-color-scheme="dark"] .lasso-mode-indicator {
    background: var(--mantine-color-blue-7);
}

/* Resize divider enhancements */
.resize-divider {
    position: relative;
    transition: background-color 0.2s ease;
}

.resize-divider:hover {
    background-color: var(--mantine-color-blue-5) !important;
}

.resize-divider::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 3px;
    background: var(--mantine-color-gray-6);
    border-radius: 2px;
    transition: all 0.2s ease;
}

.resize-divider:hover::before {
    background: white;
    width: 60px;
}

[data-mantine-color-scheme="dark"] .resize-divider::before {
    background: var(--mantine-color-gray-5);
}

[data-mantine-color-scheme="dark"] .resize-divider:hover::before {
    background: var(--mantine-color-gray-2);
}

/* Panel styling */
.flexlayout__layout > div > div {
    overflow: hidden !important;
}

/* ── View-only canvas (a viewer of a public / shared canvas) ─────────────────────────────
   whiteboard.js gates the gestures; this hides the edit affordances + flags the page. The
   owner-only Share panel is hidden by default and revealed only for body.canvas-owner. */
body.canvas-readonly #save-canvas-btn,
body.canvas-readonly #open-chat-btn,
body.canvas-readonly .ctx-edit-item,
body.canvas-readonly #draw-tool-btn,
body.canvas-readonly #lasso-tool-btn,
body.canvas-readonly #add-comment-btn,
body.canvas-readonly #canvas-title-input,
body.canvas-readonly #canvas-description-input,
body.canvas-readonly #canvas-visibility,
body.canvas-readonly .tile-header-controls,
body.canvas-readonly .resize-handle,
body.canvas-readonly .rotation-handle {
    display: none !important;
}
/* The owner-only Share/collaborators panel: hidden unless the viewer owns the canvas. */
#canvas-share-panel { display: none; }
body.canvas-owner #canvas-share-panel { display: block; }
/* Persistent "View only" badge so the viewer knows the canvas isn't editable. */
body.canvas-readonly::after {
    content: "\1F441  View only";
    position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 12000;
    padding: 6px 14px; border-radius: 999px;
    font: 600 13px system-ui, -apple-system, sans-serif; color: #cfe3ff;
    background: rgba(13, 20, 29, 0.85); border: 1px solid rgba(120, 170, 255, 0.35);
    backdrop-filter: blur(8px); pointer-events: none;
}

/* Eased canvas reflow on a PROGRAMMATIC dock open/close (Console/Export). Scoped to the
   transient .dock-animating class (toggled by the bottom-border-open clientside callback) so a
   MANUAL splitter-drag stays instant/1:1. FlexLayout positions tabs + the border panel with inline
   top/left/width/height; transitioning those eases the resize, and the canvas ResizeObserver
   re-applies the camera every frame so content tracks the easing container — the same
   ResizeObserver-sizing smoothness dash-leaflet2 gets for free. */
#canvas-dock-box.dock-animating .flexlayout__tab,
#canvas-dock-box.dock-animating .flexlayout__border_tab_contents {
    transition: top 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                left 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                width 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                height 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Log Entry Animations */
.log-entry {
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.log-entry:hover {
    transform: translateX(2px);
    box-shadow: var(--shadow-sm) !important;
}

/* Color-coded log entries */
.log-entry-red {
    background: rgba(255, 0, 0, 0.02);
}

.log-entry-green {
    background: rgba(0, 255, 0, 0.02);
}

.log-entry-blue {
    background: rgba(0, 0, 255, 0.02);
}

[data-mantine-color-scheme="dark"] .log-entry-red {
    background: rgba(255, 0, 0, 0.05);
}

[data-mantine-color-scheme="dark"] .log-entry-green {
    background: rgba(0, 255, 0, 0.05);
}

[data-mantine-color-scheme="dark"] .log-entry-blue {
    background: rgba(0, 0, 255, 0.05);
}

/* Animation for new selections */
@keyframes selectPulse {
    0%, 100% {
        box-shadow: 0 0 0 3px var(--mantine-color-blue-5);
    }
    50% {
        box-shadow: 0 0 0 6px var(--mantine-color-blue-5);
    }
}

.draggable-component.lasso-selected {
    animation: selectPulse 0.6s ease-out;
}

/* Smooth color transitions for theme switching */
body,
#whiteboard-container,
#whiteboard-canvas,
.draggable-component,
.component-header,
.chat-messages-container,
.user-message-card,
.assistant-message-card,
.chat-input-card,
.note-section,
.component-card {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

/* ============================================================================
   DRAG AND DROP FILE UPLOAD STYLES
   ============================================================================ */

/* Canvas drag-over state - visual feedback */
#whiteboard-canvas.drag-over {
    background-color: rgba(34, 139, 230, 0.05) !important;
    outline: 3px dashed var(--mantine-color-blue-6);
    outline-offset: -10px;
    transition: all 0.2s ease;
}

[data-mantine-color-scheme="dark"] #whiteboard-canvas.drag-over {
    background-color: rgba(66, 153, 225, 0.1) !important;
    outline-color: var(--mantine-color-blue-5);
}

/* Drag-over indicator overlay */
#whiteboard-canvas.drag-over::before {
    content: 'Drop files here to add to canvas';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--mantine-color-blue-6);
    color: white;
    padding: 20px 40px;
    border-radius: 12px;
    font-size: 18px;
    font-weight: 600;
    box-shadow: var(--shadow-xl);
    pointer-events: none;
    z-index: 10000;
    animation: dropPulse 0.6s ease-in-out infinite;
}

[data-mantine-color-scheme="dark"] #whiteboard-canvas.drag-over::before {
    background: var(--mantine-color-blue-7);
}

@keyframes dropPulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.05);
        opacity: 0.9;
    }
}

/* Prevent drag image ghosting on components */
.draggable-component {
    -webkit-user-drag: none;
    user-drag: none;
}

.draggable-component * {
    -webkit-user-drag: none;
    user-drag: none;
}

/* ============================================================================
   PDF COMPONENT STYLES
   ============================================================================ */

/* Move PDF controls footer up by 45px to avoid overlap with resize handle */
.pdf-footer-container {
    transform: translateY(-75px);
    position: relative;
    z-index: 10;
}

/* Ensure PDF container has proper spacing */
.pdf-footer-container button {
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    padding: 6px 12px;
    transition: all 0.2s ease;
}

.pdf-footer-container button:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

[data-mantine-color-scheme="dark"] .pdf-footer-container button:hover {
    background: rgba(255, 255, 255, 0.2) !important;
}

/* PDF page navigation styling */
.pdf-footer-container label {
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
}

/* Ensure controls don't interfere with component interactions */
.draggable-component .pdf-footer-container {
    pointer-events: auto;
}

[data-mantine-color-scheme="dark"] .pdf-footer-container button {
    background: rgb(25 108 184) !important;
    color: var(--text-primary);
}

[data-mantine-color-scheme="dark"] .pdf-footer-container button:hover {
    background: rgb(116 192 252) !important;
}
/* ============================================================================
   CURSOR RULES - FINAL FIX
   ============================================================================ */

/* Base canvas cursors */
#whiteboard-canvas {
    cursor: grab !important;
}

#whiteboard-canvas.grabbing {
    cursor: grabbing !important;
}

#whiteboard-container.lasso-mode-active {
    cursor: crosshair !important;
}

/* CRITICAL: Button wrapper div must also be pointer to cover gaps */
.component-header > div:last-child {
    cursor: pointer !important;
}

/* All buttons and their descendants */
button:not(:disabled),
button:not(:disabled) *,
.z-control-button,
.z-control-button *,
.remove-button,
.remove-button * {
    cursor: pointer !important;
}

/* Disabled elements */
button:disabled,
button:disabled * {
    cursor: not-allowed !important;
}

/* Text inputs */
input:not(:disabled),
textarea:not(:disabled),
select:not(:disabled) {
    cursor: text !important;
}

/* Component header can move */
.component-header {
    cursor: move !important;
}

/* Resize handle */
.resize-handle {
    cursor: nwse-resize !important;
}
/* ============================================================================
   CRITICAL FIX: Mantine Button internal wrappers
   These classes are generated by Mantine and cause the flickering
   ============================================================================ */

/* Target the specific Mantine wrapper class causing the issue */
.m_6d731127,
.m_4081bf90,
.m_8d3afb97 {
    cursor: pointer !important;
}

/* Ensure ALL Mantine Button wrapper divs inherit pointer cursor */
.mantine-Button-root div,
.mantine-Button-root span,
.mantine-ActionIcon-root div,
.mantine-ActionIcon-root span {
    cursor: pointer !important;
}

/* Interactive elements - highest priority */
button:not(:disabled),
.mantine-Button-root:not(:disabled),
.mantine-ActionIcon-root:not(:disabled) {
    cursor: pointer !important;
}

/* ALL children of buttons must be pointer */
button:not(:disabled) *,
.mantine-Button-root:not(:disabled) *,
.mantine-ActionIcon-root:not(:disabled) * {
    cursor: pointer !important;
}

/* Disabled elements */
button:disabled,
button:disabled *,
.mantine-Button-root:disabled,
.mantine-Button-root:disabled *,
.mantine-ActionIcon-root:disabled,
.mantine-ActionIcon-root:disabled * {
    cursor: not-allowed !important;
}

/* Links */
a:not([disabled]),
.mantine-Anchor-root:not([disabled]) {
    cursor: pointer !important;
}

/* Inputs */
input:not(:disabled),
textarea:not(:disabled),
select:not(:disabled),
.mantine-Input-input:not(:disabled),
.mantine-Textarea-input:not(:disabled) {
    cursor: text !important;
}

/* Ensure DashIconify icons inherit from parent */
.iconify {
    cursor: inherit !important;
}

/* Markdown Component Styling */
.markdown-content {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: var(--text-primary);
}

.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4,
.markdown-content h5,
.markdown-content h6 {
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    font-weight: 600;
    line-height: 1.25;
}

.markdown-content h1 { font-size: 2em; border-bottom: 1px solid var(--border-light); padding-bottom: 0.3em; }
.markdown-content h2 { font-size: 1.5em; border-bottom: 1px solid var(--border-light); padding-bottom: 0.3em; }
.markdown-content h3 { font-size: 1.25em; }
.markdown-content h4 { font-size: 1em; }

.markdown-content p {
    margin-bottom: 1em;
}

.markdown-content code {
    background: var(--bg);
    padding: 0.2em 0.4em;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
}

.markdown-content pre {
    background: var(--bg);
    padding: 1em;
    border-radius: 8px;
    overflow-x: auto;
    border: 1px solid var(--border-light);
}

.markdown-content pre code {
    background: none;
    padding: 0;
}

.markdown-content blockquote {
    border-left: 4px solid var(--mantine-color-blue-6);
    margin: 1em 0;
    padding-left: 1em;
    color: var(--text-secondary);
}

.markdown-content ul,
.markdown-content ol {
    padding-left: 2em;
    margin-bottom: 1em;
}

.markdown-content li {
    margin-bottom: 0.25em;
}

.markdown-content a {
    color: var(--mantine-color-blue-6);
    text-decoration: none;
}

.markdown-content a:hover {
    text-decoration: underline;
}

.markdown-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 1em 0;
}

.markdown-content table {
    border-collapse: collapse;
    width: 100%;
    margin: 1em 0;
}

.markdown-content th,
.markdown-content td {
    border: 1px solid var(--border-light);
    padding: 0.5em;
    text-align: left;
}

.markdown-content th {
    background: var(--bg);
    font-weight: 600;
}

.hljs {
    color: #ffffff;
    background: #131313;
}

.hljs-regexp, .hljs-string, .hljs-meta .hljs-string {
    color: #00f12d;
}

/* ============================================================================
   AG GRID STYLES
   Data grid component styling with theme support
   ============================================================================ */

/* AG Grid Alpine Theme - Light Mode */
@import url('https://cdn.jsdelivr.net/npm/ag-grid-community@31.0.0/styles/ag-grid.css');
@import url('https://cdn.jsdelivr.net/npm/ag-grid-community@31.0.0/styles/ag-theme-alpine.css');

/* Grid container styling */
.ag-theme-alpine {
    --ag-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --ag-font-size: 14px;
    --ag-header-height: 40px;
    --ag-row-height: 40px;
    --ag-border-radius: 8px;
}

/* Light mode grid colors */
:root .ag-theme-alpine {
    --ag-background-color: var(--bg-light);
    --ag-header-background-color: var(--bg);
    --ag-odd-row-background-color: var(--bg-light);
    --ag-row-hover-color: var(--bg);
    --ag-border-color: var(--border-light);
    --ag-header-foreground-color: var(--text-primary);
    --ag-foreground-color: var(--text-primary);
    --ag-secondary-foreground-color: var(--text-secondary);
}

/* Dark mode grid colors */
[data-mantine-color-scheme="dark"] .ag-theme-alpine {
    --ag-background-color: var(--bg-light);
    --ag-header-background-color: var(--bg-dark);
    --ag-odd-row-background-color: rgba(255, 255, 255, 0.02);
    --ag-row-hover-color: rgba(255, 255, 255, 0.05);
    --ag-border-color: var(--border-light);
    --ag-header-foreground-color: var(--text-primary);
    --ag-foreground-color: var(--text-primary);
    --ag-secondary-foreground-color: var(--text-secondary);
}

/* Grid header styling */
.ag-theme-alpine .ag-header {
    border-bottom: 2px solid var(--border-medium);
    font-weight: 600;
}

.ag-theme-alpine .ag-header-cell {
    padding: 0 12px;
}

/* Grid cell styling */
.ag-theme-alpine .ag-cell {
    padding: 0 12px;
    line-height: 40px;
}

/* Pagination styling */
.ag-theme-alpine .ag-paging-panel {
    border-top: 1px solid var(--border-light);
    padding: 12px;
    background: var(--bg);
}

/* Filter styling */
.ag-theme-alpine .ag-filter {
    background: var(--bg-light);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-md);
}

/* Selection highlight */
.ag-theme-alpine .ag-row-selected {
    background-color: rgba(34, 139, 230, 0.1) !important;
}

[data-mantine-color-scheme="dark"] .ag-theme-alpine .ag-row-selected {
    background-color: rgba(66, 153, 225, 0.15) !important;
}

/* Smooth transitions */
.ag-theme-alpine .ag-row {
    transition: background-color 0.2s ease;
}

/* Scrollbar styling for grid */
.ag-theme-alpine ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.ag-theme-alpine ::-webkit-scrollbar-track {
    background: var(--bg);
}

.ag-theme-alpine ::-webkit-scrollbar-thumb {
    background: var(--border-medium);
    border-radius: 4px;
}

.ag-theme-alpine ::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* Ensure charts resize smoothly */
.recharts-wrapper {
    width: 100% !important;
    height: 100% !important;
}

.recharts-surface {
    width: 100% !important;
    height: 100% !important;
}

/* Donut chart centering */
.mantine-DonutChart-root {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* Animated conversation demo styles */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(0.8);
    }
}

#demo-avatar-user,
#demo-avatar-ai {
    transition: all 0.3s ease;
}

#demo-chat-message {
    animation: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Smooth transitions for demo scene */
.demo-scene * {
    transition: all 0.3s ease;
}
/* Glass Navigation Menu */
.glass-nav-planet {
    position: fixed;
    bottom: 50px;
    right: 50px;
    z-index: 9999;
}

/* Glass Button Satellites */
.glass-satellite {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 16px;
    cursor: pointer;
    overflow: hidden;
    background: transparent;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.glass-satellite:hover {
    transform: scale(1.1) translateY(-2px);
    border-color: rgba(255, 255, 255, 0.4);
}

.glass-satellite:active {
    transform: scale(0.95);
}

.glass-filter,
.glass-overlay,
.glass-specular {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
}

.glass-filter {
    z-index: 1;
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    background: rgba(255, 255, 255, 0.1);
}

.glass-overlay {
    z-index: 2;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.3) 0%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0.05) 100%
    );
}

.glass-specular {
    z-index: 3;
    box-shadow:
        inset 2px 2px 4px rgba(255, 255, 255, 0.4),
        inset -2px -2px 4px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.glass-satellite:hover .glass-specular {
    opacity: 1;
}

.glass-icon {
    position: relative;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* Center content glass effect */
.glass-center-planet {
    position: relative;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    background: transparent;
    transition: all 0.3s ease;
    border: 2px solid rgba(59, 130, 246, 0.3);
}

.glass-center-planet:hover {
    transform: scale(1.08) rotate(5deg);
    border-color: rgba(59, 130, 246, 0.6);
}

.glass-center-planet:active {
    transform: scale(0.95);
}

/* Pulse animation for center */
@keyframes pulse-glow {
    0%, 100% {
        box-shadow:
            0 0 20px rgba(59, 130, 246, 0.4),
            0 0 40px rgba(59, 130, 246, 0.2);
    }
    50% {
        box-shadow:
            0 0 30px rgba(59, 130, 246, 0.6),
            0 0 60px rgba(59, 130, 246, 0.3);
    }
}

.glass-center-planet::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: linear-gradient(
        45deg,
        rgba(59, 130, 246, 0.3),
        rgba(147, 51, 234, 0.3),
        rgba(59, 130, 246, 0.3)
    );
    animation: pulse-glow 3s ease-in-out infinite;
    z-index: 0;
}

/* Dark mode adjustments */
[data-mantine-color-scheme="dark"] .glass-overlay {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.15) 0%,
        rgba(255, 255, 255, 0.05) 50%,
        rgba(255, 255, 255, 0.02) 100%
    );
}

[data-mantine-color-scheme="dark"] .glass-filter {
    background: rgba(0, 0, 0, 0.3);
}

[data-mantine-color-scheme="dark"] .glass-specular {
    box-shadow:
        inset 1px 1px 2px rgba(255, 255, 255, 0.2),
        inset -1px -1px 2px rgba(0, 0, 0, 0.3);
}

[data-mantine-color-scheme="dark"] .glass-satellite {
    border-color: rgba(255, 255, 255, 0.1);
}

[data-mantine-color-scheme="dark"] .glass-satellite:hover {
    border-color: rgba(255, 255, 255, 0.3);
}

/* Smooth entrance animation */
@keyframes satellite-entrance {
    from {
        opacity: 0;
        transform: scale(0.5);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.glass-satellite {
    animation: satellite-entrance 0.3s ease-out;
}

/*
 * Batch Response Styling - v13
 * Improved rendering for code and markdown in batch responses
 */

/* ============================================================================
   MARKDOWN CONTENT STYLING
   ============================================================================ */

.batch-markdown-content {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.7;
    color: var(--mantine-color-gray-8);
}

.batch-markdown-content h1,
.batch-markdown-content h2,
.batch-markdown-content h3 {
    margin-top: 1.5em;
    margin-bottom: 0.75em;
    font-weight: 600;
    line-height: 1.3;
}

.batch-markdown-content h1 {
    font-size: 1.8em;
    border-bottom: 2px solid var(--mantine-color-blue-3);
    padding-bottom: 0.3em;
}

.batch-markdown-content h2 {
    font-size: 1.5em;
    border-bottom: 1px solid var(--mantine-color-gray-3);
    padding-bottom: 0.3em;
}

.batch-markdown-content h3 {
    font-size: 1.25em;
}

.batch-markdown-content ul,
.batch-markdown-content ol {
    margin: 1em 0;
    padding-left: 2em;
}

.batch-markdown-content li {
    margin: 0.5em 0;
}

.batch-markdown-content p {
    margin: 1em 0;
}

.batch-markdown-content code {
    background-color: var(--mantine-color-gray-1);
    padding: 0.2em 0.4em;
    border-radius: 3px;
    font-family: 'Monaco', 'Courier New', monospace;
    font-size: 0.9em;
}

.batch-markdown-content pre {
    background-color: var(--mantine-color-gray-1);
    padding: 1em;
    border-radius: 6px;
    overflow-x: auto;
    margin: 1em 0;
}

.batch-markdown-content pre code {
    background: none;
    padding: 0;
}

.batch-markdown-content blockquote {
    border-left: 4px solid var(--mantine-color-blue-5);
    margin: 1em 0;
    padding: 0.5em 1em;
    background-color: var(--mantine-color-blue-0);
}

.batch-markdown-content table {
    border-collapse: collapse;
    width: 100%;
    margin: 1em 0;
}

.batch-markdown-content th,
.batch-markdown-content td {
    border: 1px solid var(--mantine-color-gray-3);
    padding: 0.75em;
    text-align: left;
}

.batch-markdown-content th {
    background-color: var(--mantine-color-gray-1);
    font-weight: 600;
}

.batch-markdown-content a {
    color: var(--mantine-color-blue-6);
    text-decoration: none;
}

.batch-markdown-content a:hover {
    text-decoration: underline;
}

.batch-markdown-content img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    margin: 1em 0;
}

/* ============================================================================
   CODE HIGHLIGHT TABS STYLING
   ============================================================================ */

/* Ensure proper spacing for code tabs */
.mantine-CodeHighlightTabs-root {
    margin-bottom: 0;
}

/* File tab styling */
.mantine-CodeHighlightTabs-control {
    padding: 0.5rem 1rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 0.875rem;
}

/* Code container */
.mantine-CodeHighlightTabs-code {
    font-family: 'Monaco', 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.6;
}

/* Ensure code is properly formatted */
.mantine-CodeHighlightTabs-code pre {
    white-space: pre;
    word-wrap: normal;
    overflow-x: auto;
}

/* Copy button styling */
.mantine-CodeHighlightTabs-copy {
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.mantine-CodeHighlightTabs-copy:hover {
    opacity: 1;
}

/* Expand button */
.mantine-CodeHighlightTabs-expand {
    font-size: 0.875rem;
    margin-top: 0.5rem;
}

/* ============================================================================
   BATCH RESPONSE CONTAINERS
   ============================================================================ */

/* Instructions section */
.batch-instructions-section {
    background-color: var(--mantine-color-blue-0);
    border-left: 4px solid var(--mantine-color-blue-6);
}

/* Code section */
.batch-code-section {
    background-color: var(--mantine-color-violet-0);
    border-left: 4px solid var(--mantine-color-violet-6);
}

/* SVG section */
.batch-svg-section {
    background-color: var(--mantine-color-teal-0);
    border-left: 4px solid var(--mantine-color-teal-6);
}

/* Excel section */
.batch-excel-section {
    background-color: var(--mantine-color-green-0);
    border-left: 4px solid var(--mantine-color-green-6);
}

/* ============================================================================
   FILE BADGES
   ============================================================================ */

.batch-file-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

/* ============================================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================================ */

@media (max-width: 768px) {
    .batch-markdown-content h1 {
        font-size: 1.5em;
    }

    .batch-markdown-content h2 {
        font-size: 1.3em;
    }

    .batch-markdown-content h3 {
        font-size: 1.1em;
    }

    .batch-markdown-content ul,
    .batch-markdown-content ol {
        padding-left: 1.5em;
    }

    .mantine-CodeHighlightTabs-code {
        font-size: 12px;
    }
}

/* ============================================================================
   DARK MODE SUPPORT
   ============================================================================ */

[data-mantine-color-scheme="dark"] .batch-markdown-content h1,
[data-mantine-color-scheme="dark"] .batch-markdown-content h2 {
    border-bottom-color: var(--mantine-color-dark-4);
}

[data-mantine-color-scheme="dark"] .batch-markdown-content code {
    background-color: var(--mantine-color-dark-6);
    color: var(--mantine-color-gray-3);
}

[data-mantine-color-scheme="dark"] .batch-markdown-content pre {
    background-color: var(--mantine-color-dark-7);
}

[data-mantine-color-scheme="dark"] .batch-markdown-content blockquote {
    background-color: var(--mantine-color-dark-6);
    border-left-color: var(--mantine-color-blue-4);
}

[data-mantine-color-scheme="dark"] .batch-markdown-content th,
[data-mantine-color-scheme="dark"] .batch-markdown-content td {
    border-color: var(--mantine-color-dark-4);
}

[data-mantine-color-scheme="dark"] .batch-markdown-content th {
    background-color: var(--mantine-color-dark-6);
}

[data-mantine-color-scheme="dark"] .batch-instructions-section {
    background-color: rgba(34, 139, 230, 0.1);
}

[data-mantine-color-scheme="dark"] .batch-code-section {
    background-color: rgba(124, 58, 237, 0.1);
}

[data-mantine-color-scheme="dark"] .batch-svg-section {
    background-color: rgba(20, 184, 166, 0.1);
}

[data-mantine-color-scheme="dark"] .batch-excel-section {
    background-color: rgba(34, 197, 94, 0.1);
}

/* ============================================================================
   PRINT STYLES
   ============================================================================ */

@media print {
    .batch-markdown-content {
        color: black;
    }

    .batch-markdown-content a {
        color: blue;
        text-decoration: underline;
    }

    .mantine-CodeHighlightTabs-copy,
    .mantine-CodeHighlightTabs-expand {
        display: none;
    }
}


/* PDF Viewer Styling */
.pdf-button {
    background-color: var(--mantine-color-red-6) !important;
    color: white !important;
    border: none !important;
    padding: 8px 16px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    margin: 4px !important;
}

.pdf-button:hover {
    background-color: var(--mantine-color-red-7) !important;
}

.pdf-label {
    color: white !important;
    font-size: 14px !important;
    margin: 0 8px !important;
}

.pdf-controls {
    background-color: #3a3d40 !important;
    padding: 12px !important;
    border-radius: 8px 8px 0 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
}

[data-mantine-color-scheme="dark"] .batch-markdown-content {
    color: #000000;
}

/* ============================================================================
   ROTATION HANDLE STYLES
   Add these to your assets/style.css file
   ============================================================================ */

/* Rotation Handle - Main knob above selection box */
.rotation-handle {
    position: absolute;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #228be6 0%, #1c7ed6 100%);
    border: 3px solid white;
    border-radius: 50%;
    cursor: grab;
    box-shadow: 0 4px 12px rgba(34, 139, 230, 0.4),
                inset 0 1px 2px rgba(255, 255, 255, 0.3);
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s ease, box-shadow 0.2s ease;
}

.rotation-handle:hover {
    background: linear-gradient(135deg, #1c7ed6 0%, #1864ab 100%);
    box-shadow: 0 6px 16px rgba(34, 139, 230, 0.5),
                inset 0 1px 2px rgba(255, 255, 255, 0.3);
    transform: translateX(-50%) scale(1.1);
}

.rotation-handle:active,
.rotation-handle.rotating {
    cursor: grabbing;
    box-shadow: 0 2px 8px rgba(34, 139, 230, 0.6),
                inset 0 1px 2px rgba(255, 255, 255, 0.3);
    transform: translateX(-50%) scale(0.95);
}

/* Rotation indicator line inside the knob */
.rotation-handle::before {
    content: '';
    position: absolute;
    width: 2px;
    height: 14px;
    background: white;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 2px;
}

/* Rotation angle display - shows degrees above knob */
.rotation-angle-display {
    position: absolute;
    top: -85px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(34, 139, 230, 0.95);
    color: white;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    pointer-events: none;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.rotation-angle-display.visible {
    opacity: 1;
}

/* Rotation guide circle - shows during active rotation */
.rotation-guide {
    position: absolute;
    border: 2px dashed rgba(34, 139, 230, 0.4);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.rotation-guide.visible {
    opacity: 1;
}

/* Connection line from center to rotation handle */
.rotation-guide::before {
    content: '';
    position: absolute;
    width: 2px;
    height: 50%;
    background: rgba(34, 139, 230, 0.4);
    top: 50%;
    left: 50%;
    transform-origin: top center;
    border-radius: 2px;
}

/* Selected component rotation effect - smooth transitions */
.lasso-selected {
    transition: transform 0.1s ease !important;
    transform-origin: center center !important;
}

/* Rotation snap indicators (every 15 degrees) */
.rotation-snap-indicator {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(34, 139, 230, 0.6);
    border-radius: 50%;
    pointer-events: none;
}

/* Selection box with rotation */
.selection-box.rotating {
    border-color: rgba(34, 139, 230, 0.8);
    box-shadow: 0 0 0 2px rgba(34, 139, 230, 0.2);
}

/* ============================================================================
   APPLE GLASS BACKGROUND FOR CONSOLE TAB - TRANSPARENT VERSION
   ============================================================================ */

.console-glass-background {
    position: relative;
    background: rgba(10, 14, 23, 0.3);  /* Much more transparent */
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    overflow: hidden;
}

/* Glass overlay gradient - very subtle */
.console-glass-background::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.03) 0%,
        rgba(255, 255, 255, 0.01) 50%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 0;
}

/* Specular highlight - subtle */
.console-glass-background::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow:
        inset 1px 1px 2px rgba(255, 255, 255, 0.1),
        inset -1px -1px 2px rgba(0, 0, 0, 0.05);
    pointer-events: none;
    z-index: 0;
    opacity: 0.4;
}

/* Ensure content stays above glass effects */
.console-glass-background > * {
    position: relative;
    z-index: 1;
}

/* Make log entries slightly transparent too */
.console-glass-background .log-entry {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

/* Keep text readable with subtle text shadow */
.console-glass-background .mantine-Text-root,
.console-glass-background .mantine-Title-root {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Dark mode adjustments */
[data-mantine-color-scheme="dark"] .console-glass-background {
    background: rgba(10, 14, 23, 0.35);  /* Slightly more opaque in dark mode */
    border-color: rgba(255, 255, 255, 0.1);
}

[data-mantine-color-scheme="dark"] .console-glass-background::before {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.04) 0%,
        rgba(255, 255, 255, 0.02) 50%,
        transparent 100%
    );
}

[data-mantine-color-scheme="dark"] .console-glass-background::after {
    box-shadow:
        inset 1px 1px 2px rgba(255, 255, 255, 0.08),
        inset -1px -1px 2px rgba(0, 0, 0, 0.2);
}

[data-mantine-color-scheme="dark"] .console-glass-background .log-entry {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Light mode adjustments */
[data-mantine-color-scheme="light"] .console-glass-background {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(0, 0, 0, 0.1);
}

[data-mantine-color-scheme="light"] .console-glass-background .log-entry {
    background: rgba(255, 255, 255, 0.3) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

[data-mantine-color-scheme="light"] .console-glass-background .mantine-Text-root,
[data-mantine-color-scheme="light"] .console-glass-background .mantine-Title-root {
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
}

/* Optional: Subtle animation on hover */
.console-glass-background {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.console-glass-background:hover {
    background: rgba(10, 14, 23, 0.4);
    border-color: rgba(255, 255, 255, 0.12);
}

[data-mantine-color-scheme="dark"] .console-glass-background:hover {
    background: rgba(10, 14, 23, 0.45);
}

[data-mantine-color-scheme="light"] .console-glass-background:hover {
    background: rgba(255, 255, 255, 0.35);
    border-color: rgba(0, 0, 0, 0.15);
}

/* ============================================================================
   CURSOR FLICKERING FIX - Add after line 1150 in style.css
   Ensure all canvas children inherit proper cursor unless overridden
   ============================================================================ */

/* All direct children and descendants of canvas should inherit cursor */
#whiteboard-canvas *:not(button):not(.component-header):not(.resize-handle):not(.remove-button):not(.z-control-button):not(input):not(textarea):not(select):not(.selection-box):not(.rotation-handle):not(.text-note):not(.text-note-body):not(.text-note-rotate):not(.text-note-resize) {
    cursor: inherit !important;
}

/* Specifically target wrapper divs that cause flickering. Text notes are interactive canvas
   elements (click/drag/edit), so they must KEEP pointer events — exclude them here. (.paint-layer
   stays click-through; it sets pointer-events:none on itself intentionally.) */
#whiteboard-canvas > div:not(.draggable-component):not(.selection-box):not(#lasso-svg):not(.text-note):not(.canvas-cell) {
    cursor: inherit !important;
    pointer-events: none; /* Allow click-through for wrapper divs */
}

/* The cell pool: each tile mounts into its own stable cell so add/remove never rewrites the whole
   canvas children (which would remount + reload every iframe). display:contents makes the cell add
   NO box / stacking context / layout — the tile inside still positions + stacks against
   #whiteboard-canvas exactly as a direct child would. See pages/canvas/cell_pool.py. */
#whiteboard-canvas > .canvas-cell { display: contents; }

/* Ensure draggable component wrappers don't interfere */
.draggable-component > div:not(.component-header):not(.resize-handle) {
    cursor: inherit !important;
}

/* Force canvas background to always show grab cursor */
#whiteboard-canvas::before {
    content: '';
    position: absolute;
    inset: 0;
    cursor: grab !important;
    pointer-events: none;
    z-index: -1;
}

/* Lasso mode should override everything on canvas */
#whiteboard-container.lasso-mode-active #whiteboard-canvas *:not(.draggable-component):not(.component-header):not(button) {
    cursor: crosshair !important;
}

/* ============================================================================
   Drawing on Canvas
   ============================================================================ */

#drawing-canvas {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: all;
    z-index: 9998;
    cursor: crosshair;
}

#drawing-color-container {
    position: fixed;
    bottom: 120px;
    left: 20px;
    z-index: 10000;
    animation: slideInLeft 0.3s ease-out;
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.glass-sat-btn[data-index="draw-sat"].active {
    background: rgba(34, 139, 230, 0.3) !important;
    box-shadow: 0 0 20px rgba(34, 139, 230, 0.5) !important;
}

/* Draw tool button styling */
.draw-control.active {
    background-color: rgba(250, 176, 5, 0.2) !important;
    color: #fab005 !important;
}

.header-control:hover {
    background-color: rgba(255, 255, 255, 0.1);
    transition: background-color 0.2s ease;
}

.header-control:active {
    transform: scale(0.95);
}

.drawing-mode-active .flexlayout__layout {
    background-color: #424955 !important;
    transition: background-color 0.3s ease;
}

/* ============================================================================
   Mobile touch .css
   ============================================================================ */

@media (max-width: 768px) {
    /* Larger touch targets for mobile */
    .component-header {
        min-height: 44px;
        touch-action: none;
        -webkit-tap-highlight-color: transparent;
    }

    .resize-handle {
        width: 32px !important;
        height: 32px !important;
        touch-action: none;
    }

    .remove-button,
    .z-control-button {
        min-width: 44px;
        min-height: 44px;
        touch-action: manipulation;
    }

    /* Prevent accidental selections during drag */
    .draggable-component.dragging,
    .draggable-component.resizing {
        -webkit-user-select: none;
        user-select: none;
        pointer-events: auto;
    }

    /* Smooth canvas movement */
    #whiteboard-canvas {
        touch-action: none;
        -webkit-overflow-scrolling: touch;
    }

    /* Better visual feedback on touch */
    .draggable-component:active {
        opacity: 0.95;
    }
}

/* Touch-specific enhancements for all devices */
.component-header {
    cursor: grab;
    touch-action: none;
}

.component-header:active {
    cursor: grabbing;
}

.resize-handle {
    cursor: nwse-resize;
    touch-action: none;
}


/*
 * AI Whiteboard - Enhanced Home Page Styles
 * Bee-themed color palette with professional styling
 */

/* ==================== HERO SECTION ==================== */

/* Ensure Vanta canvas doesn't interfere with content */
#vanta-hero canvas {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Keep content above Vanta effect */
#vanta-hero > * {
    position: relative;
    z-index: 2;
}

/* Enhance hero section on dark mode */
[data-mantine-color-scheme='dark'] #vanta-hero {
    background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255, 193, 7, 0.08), transparent 70%);
}

/* Enhance hero section on light mode */
[data-mantine-color-scheme='light'] #vanta-hero {
    background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255, 193, 7, 0.12), transparent 70%);
}

/* ==================== GRADIENT TEXT ==================== */

/* Smooth gradient text animation */
.gradient-text {
    background: linear-gradient(45deg, var(--mantine-color-yellow-6), var(--mantine-color-orange-6));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 3s ease infinite;
}

@keyframes gradientShift {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

/* ==================== CARDS ==================== */

/* Enhanced card hover effect */
.mantine-Card-root {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mantine-Card-root:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(255, 193, 7, 0.1),
                0 10px 10px -5px rgba(255, 152, 0, 0.04);
}

/* ==================== BUTTONS ==================== */

/* Enhanced button hover states */
.mantine-Button-root {
    transition: all 0.2s ease;
}

.mantine-Button-root:hover:not(:disabled) {
    transform: translateY(-2px);
}

.mantine-Button-root[data-variant="gradient"] {
    transform: translateZ(0) !important;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    transition: all 0.2s ease-in-out;
}

.mantine-Button-root[data-variant="gradient"]:hover {
    transform: translateZ(0) !important;
    box-shadow: 0 6px 20px rgba(255, 193, 7, 0.35),
                0 3px 10px rgba(255, 152, 0, 0.25) !important;
}

.mantine-Button-root[data-variant="gradient"]:active {
    transform: translateZ(0) translateY(1px) !important;
    box-shadow: 0 2px 8px rgba(255, 193, 7, 0.25) !important;
}

/* Fix outline button hover */
.mantine-Button-root[data-variant="outline"]:hover {
    transform: translateZ(0) !important;
    box-shadow: 0 4px 12px rgba(255, 152, 0, 0.2) !important;
}

.mantine-Button-root[data-variant="outline"]:active {
    transform: translateZ(0) translateY(1px) !important;
}

/* ==================== BADGES ==================== */

/* Enhanced badge styling */
.mantine-Badge-root {
    transition: all 0.2s ease;
}

/* Badge hover effect for interactive badges */
a .mantine-Badge-root:hover {
    transform: scale(1.05);
}

/* ==================== THEME ICONS ==================== */

/* Smooth icon rotation on hover */
.mantine-ThemeIcon-root {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mantine-Card-root:hover .mantine-ThemeIcon-root {
    transform: scale(1.1) rotate(5deg);
}

/* ==================== ANIMATIONS ==================== */

/* Fade in animation for page load */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.6s ease-out;
}

/* Stagger animation for cards */
.mantine-Card-root:nth-child(1) { animation-delay: 0.1s; }
.mantine-Card-root:nth-child(2) { animation-delay: 0.2s; }
.mantine-Card-root:nth-child(3) { animation-delay: 0.3s; }
.mantine-Card-root:nth-child(4) { animation-delay: 0.4s; }
.mantine-Card-root:nth-child(5) { animation-delay: 0.5s; }
.mantine-Card-root:nth-child(6) { animation-delay: 0.6s; }

/* ==================== SCROLL BEHAVIOR ==================== */

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

html, body {
    overflow-x: hidden;      /* Prevent horizontal scroll */
    overflow-y: auto;        /* Allow vertical scroll */
    scroll-behavior: smooth; /* Smooth scrolling */
}

/* ==================== RESPONSIVE ADJUSTMENTS ==================== */

/* Mobile optimizations */
@media (max-width: 768px) {
    /* Reduce hero section padding on mobile */
    #vanta-hero {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }

    /* Adjust main headline size on mobile */
    #vanta-hero h1 {
        font-size: 2.5rem !important;
    }

    /* Reduce button size on mobile */
    .mantine-Button-root[data-size="xl"] {
        height: 50px !important;
        font-size: 1rem !important;
        padding: 0 1.5rem !important;
    }
}

/* Tablet adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
    #vanta-hero h1 {
        font-size: 3rem !important;
    }
}

/* ==================== ACCESSIBILITY ==================== */

/* Focus visible for keyboard navigation */
.mantine-Button-root:focus-visible,
.mantine-ActionIcon-root:focus-visible,
.mantine-Anchor-root:focus-visible {
    outline: 2px solid var(--mantine-color-yellow-6);
    outline-offset: 2px;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    #vanta-hero canvas {
        display: none;
    }
}

/* ==================== DARK MODE SPECIFIC ==================== */

[data-mantine-color-scheme='dark'] {
    /* Enhance card backgrounds in dark mode */
    .mantine-Card-root {
        background: linear-gradient(135deg,
            rgba(255, 193, 7, 0.02) 0%,
            rgba(26, 27, 30, 0.8) 100%);
    }

    /* Dimmed text has better contrast in dark mode */
    .mantine-Text-root[data-c="dimmed"] {
        color: rgba(255, 255, 255, 0.65) !important;
    }
}

/* ==================== LIGHT MODE SPECIFIC ==================== */

[data-mantine-color-scheme='light'] {
    /* Enhance card backgrounds in light mode */
    .mantine-Card-root {
        background: linear-gradient(135deg,
            rgba(255, 193, 7, 0.02) 0%,
            rgba(255, 255, 255, 0.9) 100%);
    }

    /* Ensure good contrast for dimmed text */
    .mantine-Text-root[data-c="dimmed"] {
        color: rgba(0, 0, 0, 0.6) !important;
    }
}

/* ==================== CUSTOM UTILITIES ==================== */

/* Glass morphism effect for cards */
.glass-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 193, 7, 0.1);
}

[data-mantine-color-scheme='light'] .glass-card {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 193, 7, 0.2);
}

/* Subtle shine effect on hover */
.shine-effect {
    position: relative;
    overflow: hidden;
}

.shine-effect::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        to bottom right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: rotate(45deg);
    transition: all 0.5s;
    opacity: 0;
}

.shine-effect:hover::after {
    opacity: 1;
    left: 100%;
}

/* ==================== LIST STYLING ==================== */

/* Enhanced list items */
.mantine-List-item {
    padding: 0.25rem 0;
}

.mantine-List-itemWrapper {
    align-items: flex-start;
}

/* ==================== PERFORMANCE ==================== */

/* GPU acceleration for transforms */
.mantine-Card-root,
.mantine-Button-root,
.mantine-ThemeIcon-root {
    will-change: transform;
    transform: translateZ(0);
}

/* ==================== PRINT STYLES ==================== */

@media print {
    /* Hide animated elements when printing */
    #vanta-hero canvas,
    .mantine-Button-root,
    .mantine-ActionIcon-root {
        display: none !important;
    }

    /* Expand content for printing */
    .mantine-Card-root {
        page-break-inside: avoid;
    }
}

/* ========================================
   ULTRA-TRANSPARENT GLASS MORPHISM
   Maximum transparency to show canvas animation
   ======================================== */

.glass-morphism {
    /* Minimal blur for maximum animation visibility */
    backdrop-filter: blur(4px) saturate(110%);
    -webkit-backdrop-filter: blur(4px) saturate(110%);

    /* Nearly transparent - just a hint of frosted glass */
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.01) 0%,
        rgba(255, 255, 255, 0.005) 100%
    ) !important;

    /* Very subtle border */
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    box-shadow:
        0 4px 16px 0 rgba(31, 38, 135, 0.04),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.08),
        inset 0 -1px 0 0 rgba(255, 255, 255, 0.03) !important;

    /* Smooth transitions */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;

    /* Ensure interaction */
    pointer-events: auto;

    /* Make sure it doesn't block the canvas */
    isolation: isolate;
}

/* Dark mode adjustments - ultra subtle */
[data-mantine-color-scheme="dark"] .glass-morphism {
    backdrop-filter: blur(4px) saturate(110%);
    -webkit-backdrop-filter: blur(4px) saturate(110%);

    background: linear-gradient(
        135deg,
        rgba(26, 27, 30, 0.08) 0%,
        rgba(26, 27, 30, 0.05) 100%
    ) !important;

    border: 1px solid rgba(255, 255, 255, 0.03) !important;
    box-shadow:
        0 4px 16px 0 rgba(0, 0, 0, 0.1),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.03),
        inset 0 -1px 0 0 rgba(255, 255, 255, 0.015) !important;
}

/* Hover effect - slightly more visible but still very transparent */
.glass-morphism:hover {
    backdrop-filter: blur(6px) saturate(115%);
    -webkit-backdrop-filter: blur(6px) saturate(115%);

    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.03) 0%,
        rgba(255, 255, 255, 0.015) 100%
    ) !important;

    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow:
        0 8px 24px 0 rgba(31, 38, 135, 0.08),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.12),
        inset 0 -1px 0 0 rgba(255, 255, 255, 0.05) !important;

    transform: translateY(-2px);
}

[data-mantine-color-scheme="dark"] .glass-morphism:hover {
    backdrop-filter: blur(6px) saturate(115%);
    -webkit-backdrop-filter: blur(6px) saturate(115%);

    background: linear-gradient(
        135deg,
        rgba(26, 27, 30, 0.15) 0%,
        rgba(26, 27, 30, 0.08) 100%
    ) !important;

    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    box-shadow:
        0 8px 24px 0 rgba(0, 0, 0, 0.2),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.05),
        inset 0 -1px 0 0 rgba(255, 255, 255, 0.02) !important;
}

/* Animated gradient border effect - very subtle */
@keyframes liquidBorder {
    0%, 100% {
        border-color: rgba(79, 195, 247, 0.1);
    }
    25% {
        border-color: rgba(156, 39, 176, 0.1);
    }
    50% {
        border-color: rgba(255, 193, 7, 0.1);
    }
    75% {
        border-color: rgba(33, 150, 243, 0.1);
    }
}

.glass-morphism::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(
        45deg,
        rgba(79, 195, 247, 0.15),
        rgba(156, 39, 176, 0.15),
        rgba(255, 193, 7, 0.15),
        rgba(33, 150, 243, 0.15)
    );
    background-size: 400% 400%;
    border-radius: inherit;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
    animation: liquidGradient 8s ease infinite;
}

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

.glass-morphism:hover::before {
    opacity: 0.3;
}

/* Remove the frosted glass overlay that was blocking visibility */
/* This pseudo-element is now REMOVED to show animation clearly */

/* Ensure content is above the glass effects but doesn't block canvas */
.glass-morphism > * {
    position: relative;
    z-index: 2;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .glass-morphism {
        backdrop-filter: blur(3px) saturate(105%);
        -webkit-backdrop-filter: blur(3px) saturate(105%);
    }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .glass-morphism,
    .glass-morphism::before {
        animation: none;
        transition: none;
    }
}

/* Text readability enhancements - use on individual text elements */
.text-with-subtle-bg {
    background: rgba(255, 255, 255, 0.4) !important;
    padding: 8px 20px !important;
    border-radius: 8px !important;
    backdrop-filter: blur(1px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
}

[data-mantine-color-scheme="dark"] .text-with-subtle-bg {
    background: rgba(26, 27, 30, 0.5) !important;
}

/* Ensure canvas container is properly positioned */
#vault-cta {
    /* Ensure proper layering */
    isolation: isolate;
}

#vault-cta canvas {
    /* Make sure the canvas is positioned correctly */
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

/* Performance optimizations */
.glass-morphism,
#vault-cta {
    will-change: transform;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Ensure parent card doesn't block canvas */
.canvas-animation-wrapper {
    position: relative;
    isolation: isolate;
}

.canvas-animation-wrapper > .mantine-Card-root {
    background: transparent !important;
}

.anchor-no-outline {
    outline: none !important;
}

.anchor-no-outline:focus {
    outline: none !important;
    box-shadow: none !important;
}


/* ============================================================================
   LIQUID GLASS DRAWER STYLES
   Matching the Apple-inspired liquid glass design from private_canvas.py
   ============================================================================ */

/* Light mode liquid glass drawer */
.liquid-glass-drawer [data-mantine-color-scheme="light"] {
    --drawer-backdrop-blur: blur(20px) saturate(180%);
    --drawer-background: linear-gradient(135deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.75));
    --drawer-border: 1px solid rgba(255, 255, 255, 0.5);
    --drawer-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* Dark mode liquid glass drawer */
[data-mantine-color-scheme="dark"] .liquid-glass-drawer .mantine-Drawer-content,
.liquid-glass-drawer [data-mantine-color-scheme="dark"] .mantine-Drawer-content {
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    background: linear-gradient(135deg, rgba(30, 37, 51, 0.95), rgba(20, 25, 34, 0.90)) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
}

/* Drawer navigation buttons hover effect */
.liquid-glass-drawer .mantine-Button-root:hover {
    transform: translateX(4px);
    transition: all 0.2s ease;
}

/* Enhanced button styling for drawer navigation */
.liquid-glass-drawer .mantine-Button-root {
    transition: all 0.2s ease;
}

/* Header border styling for dark mode */
[data-mantine-color-scheme="dark"] .liquid-glass-drawer .mantine-Box-root {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Smooth overlay transition */
.liquid-glass-drawer .mantine-Drawer-overlay {
    backdrop-filter: blur(4px);
    transition: opacity 0.3s ease;
}

/* Enhanced focus states for accessibility */
.liquid-glass-drawer .mantine-Button-root:focus-visible {
    outline: 2px solid var(--mantine-color-blue-6);
    outline-offset: 2px;
}

/* Light-mode drawer glass (dark mode handled by the .mantine-Drawer-content rule above) */
[data-mantine-color-scheme="light"] .liquid-glass-drawer .mantine-Drawer-content {
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.88)) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
}

/* Mobile drawer nav items — clean, rounded, with hover + active highlight */
.drawer-navlink {
    border-radius: 10px;
    margin: 1px 0;
    transition: background 0.15s ease, transform 0.15s ease;
}
.drawer-navlink:hover {
    background: var(--mantine-color-blue-light) !important;
    transform: translateX(2px);
}
.drawer-navlink[data-active] {
    background: var(--mantine-color-blue-light) !important;
}
.drawer-navlink[data-active] .mantine-NavLink-label {
    color: var(--mantine-color-blue-filled);
    font-weight: 600;
}

/* Documentation side-nav links — rounded to match the rest of the chrome */
.docs-nav-link {
    border-radius: 8px;
}

/* Docs overview ('/docs') cards */
.docs-home-card {
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    cursor: pointer;
    height: 100%;
}
.docs-home-card:hover {
    transform: translateY(-2px);
    border-color: var(--mantine-color-blue-5);
    box-shadow: var(--shadow-md);
}

/* Gallery / My-Canvases cards (components/canvas_cards) — hover lift + thumbnail zoom */
.canvas-card {
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    overflow: hidden;
}
.canvas-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-color: var(--mantine-color-blue-5);
}
.canvas-card .canvas-card-thumb {
    transition: transform 0.25s ease;
}
.canvas-card:hover .canvas-card-thumb {
    transform: scale(1.04);
}