.designer-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    z-index: 1300;
    background-color: var(--mud-palette-background);
    margin: 0;
    padding: 0;
}

.designer-layout {
    width: 100%;
    height: 100%;
    /* Shell frame: app bar on top, then a single flex row holding palette,
       canvas and inspector. The display:contents wrappers in the markup promote
       the inner components to flex children, so no fixed positioning is needed. */
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Disable text selection in the top menu/appbar */
.designer-layout .mud-appbar,
.designer-layout .mud-appbar * {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Allow text selection in input fields and text areas within inspector and palette */
.designer-inspector input,
.designer-inspector textarea,
.designer-inspector [contenteditable="true"],
.designer-palette input,
.designer-palette textarea,
.designer-palette [contenteditable="true"] {
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
}

/* Allow text selection in editable content within preview canvas */
.preview-canvas .paragraph-editable,
.preview-canvas .rich-text-editable,
.preview-canvas [contenteditable="true"],
.zone-canvas .paragraph-editable,
.zone-canvas .rich-text-editable,
.zone-canvas [contenteditable="true"] {
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
}

.designer-appbar {
    flex-shrink: 0;
    position: relative;
    /* Above the palette/inspector resize handles (z-index: 2001). The app bar's anchored
       Tag/Audience scenario popovers (.bm-sp-* at z-index 2100/2101) are descendants of this
       element, so they're trapped in this stacking context — keeping it below the handles let
       the handles' green hover line paint over an open popover. The app bar is a flex row above
       the content (no overlap), so only its popovers are affected; it stays below the canvas
       editor overlays (z-index 9999+) and root-level MudDialog/MudSnackbar. */
    z-index: 2002;
    height: 60px;
    display: flex;
    align-items: center;
    padding: 0 var(--bm-spacing-lg);
    background-color: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    box-sizing: border-box;
}

.designer-content {
    flex: 1;
    display: flex;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
}

/* Preview mode: collapse the authoring rails so the canvas takes the full width.
   The Tag/Audience pills stay live in the app bar (rendered outside .designer-content). */
.designer-fullscreen.designer-preview .designer-palette,
.designer-fullscreen.designer-preview .designer-inspector {
    display: none;
}

/* Preview mode mounts ExperienceRendererPreview inside the shared phone, which paints
   position:fixed chrome (utility dock/FAB, cart drawer, chat sheet, action-sheet overlays).
   Make the phone's non-scrolling content area the position:fixed containing block so the
   chrome anchors to the usable content (status bar stays visible) and the FAB stays put while
   content scrolls — mirroring the product-tab preview (ProductExperienceComponent.razor.css).
   Scoped to preview only: in design mode .bm-phone__content stays a plain passthrough so the
   slash-command popup's viewport-relative fixed positioning is unaffected. */
.designer-fullscreen.designer-preview .bm-phone__content {
    contain: layout;
}

.designer-main-content {
    flex: 1;
    min-width: 0;
    min-height: 0;
    /* Column: full-width chrome strip on top, scrollable phone stage below.
       MudMainContent ships a built-in padding-top (≈64px) to clear a MudAppBar
       that the designer doesn't use — zero it so the chrome strip sits flush at
       the top of the canvas instead of floating. */
    padding-top: 0 !important;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Scrollable region holding the phone, centered both axes. `safe center` keeps
   the phone vertically centered when it fits, but degrades to top-aligned (rather
   than clipping the top unreachably) when the phone is taller than the viewport —
   avoiding the flex-centering + overflow trap while still centering normally. */
.designer-canvas-stage {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: var(--bm-spacing-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: safe center;
}

.designer-palette {
    position: relative;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--mud-palette-surface);
    border-right: 1px solid var(--mud-palette-lines-default);
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.palette-resize-handle {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    cursor: col-resize;
    background-color: transparent;
    z-index: 2001;
    transition: background-color 0.2s;
}

.palette-resize-handle:hover {
    background-color: var(--mud-palette-primary);
}

.palette-resize-handle:active {
    background-color: var(--mud-palette-primary-darken);
}

.designer-palette .mud-drawer-content {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.designer-palette-container {
    display: flex;
    flex-direction: column;
    height: 100%;              /* Make it fill the MudDrawer */
}

.designer-pages-section {
    flex-shrink: 0;
    flex-grow: 0;
    display: flex;
    flex-direction: column;
}

.designer-components-section {
    flex: 1 1 0;           /* Grow to fill remaining space, can shrink */
    min-height: 20%;      /* Ensure minimum visibility */
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.components-scroll-container {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

/* Mono uppercase micro-label used for section headers in the rail. */
.designer-overline {
    font-family: var(--bm-mono);
    font-size: 10.5px;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

/* Outline / Components tab strip — sits below the Pages list. */
.designer-rail-tabs {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* Grouped component palette (one labelled section per ComponentCategory). */
.designer-palette-group {
    margin-bottom: 14px;
}

.designer-palette-group__items {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 8px;
}

/* Leading drag-handle grip on each palette chip. */
.block-editor-block-types-list__item-grip {
    display: flex;
    align-items: center;
    color: var(--mud-palette-text-disabled);
    flex-shrink: 0;
}

/* Pages as a list of rows (replaces the old dropdown). */
.designer-page-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.designer-page-row {
    display: flex;
    align-items: flex-start;
    /* MudBlazor's global `button {}` reset sets justify-content: center; without
       this the icon+label group is centered in the row instead of left-aligned. */
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    padding: 7px 8px;
    border-radius: 7px;
    border: 1px solid transparent;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.12s;
}

.designer-page-row:hover {
    background-color: var(--mud-palette-action-hover);
}

.designer-page-row--active {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.08);
    border-color: rgba(var(--mud-palette-primary-rgb), 0.30);
}

.designer-page-row__icon {
    margin-top: 1px;
    color: var(--mud-palette-text-secondary);
}

.designer-page-row--active .designer-page-row__icon {
    color: var(--mud-palette-primary);
}

.designer-page-row__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.designer-page-row__name {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.designer-page-row--active .designer-page-row__name {
    font-weight: 600;
    color: var(--mud-palette-primary-darken);
}

.designer-page-row__sub {
    font-family: var(--bm-mono);
    font-size: 10.5px;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.designer-page-row--active .designer-page-row__sub {
    color: var(--mud-palette-primary);
}

.designer-inspector {
    position: relative;
    flex-shrink: 0;
    min-width: 280px;
    max-width: 800px;
    height: 100%;
    background-color: var(--mud-palette-surface);
    overflow-y: auto;
    border-left: 1px solid var(--mud-palette-lines-default);
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.inspector-resize-handle {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    cursor: col-resize;
    background-color: transparent;
    z-index: 2001;
    transition: background-color 0.2s;
}

.inspector-resize-handle:hover {
    background-color: var(--mud-palette-primary);
}

.inspector-resize-handle:active {
    background-color: var(--mud-palette-primary-darken);
}

/* ===========================================
   Inspector chrome (Experience Designer v2)
   The right-hand property panel. Mirrors the v2 design: a quiet titled panel
   with underline Properties/JSON tabs, a component header carrying a
   primary-tinted icon chip + version badge, and a dark JSON block. All colour
   comes from MudTheme vars so tenant re-theming flows through exactly like the
   rest of the designer chrome.
   =========================================== */

/* Panel title — matches the v2 "Inspector" heading (15px / 700). */
.inspector-title {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--mud-palette-text-primary);
}

/* Properties / JSON tabs now use the shared CustomTabsComponent, which carries
   its own scoped tab styling — no inspector-specific MudTabs overrides needed. */

/* Component header — icon chip + name + version badge + delete. */
.inspector-component-header {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 4px 0 12px;
}

.inspector-icon-chip {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--mud-palette-primary-rgb), 0.10);
    color: var(--mud-palette-primary);
}

.inspector-component-name {
    flex: 1;
    min-width: 0;
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inspector-version-badge {
    flex-shrink: 0;
    font-family: var(--bm-mono);
    font-size: 9.5px;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-action-hover);
    padding: 2px 6px;
    border-radius: 5px;
}

/* Dark JSON / layout block — mirrors the v2 code surface (warm-slate n950 ink).
   Rendered as a read-only MudTextField (textarea) so it stays copy-/select-able
   and keeps the existing automation hooks; the dark code styling is applied to
   the textarea slot. */
.inspector-json-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.inspector-json-field .mud-input {
    background: #1a1a20;
    border-radius: 9px;
    padding: 10px 12px;
}

/* Kill the underline/notch lines so it reads as a flat code surface. */
.inspector-json-field .mud-input::before,
.inspector-json-field .mud-input::after,
.inspector-json-field .mud-input-outline {
    display: none !important;
}

.inspector-json-field textarea.mud-input-slot {
    color: #e6e6ea;
    font-family: var(--bm-mono);
    font-size: 11px;
    line-height: 1.7;
}

/* Live Show-When evaluation badge — "always rendered" (neutral) vs the live
   pass/not-met state against the current Tag x Audience scenario. */
.showwhen-status {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
    padding: 9px 11px;
    border-radius: 9px;
    font-size: 12px;
    line-height: 1.4;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
}

.showwhen-status--pass {
    border-color: rgba(var(--mud-palette-success-rgb), 0.30);
    background: rgba(var(--mud-palette-success-rgb), 0.10);
    color: var(--mud-palette-success-darken);
}

.showwhen-status__label {
    font-weight: 600;
}

/* Expansion panels inside the inspector (Advanced, Version History) — drop
   MudBlazor's default 24px horizontal gutters so the panel header and body
   align flush with the field content above (the pa-4 inset), and so the two
   panels line up with each other. !important + both base and gutter classes
   so it wins regardless of MudBlazor's stylesheet cascade order. */
.designer-inspector .mud-expand-panel-header,
.designer-inspector .mud-expand-panel-header-gutters,
.designer-inspector .mud-expand-panel-content,
.designer-inspector .mud-expand-panel-gutters {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Unify EVERY inspector expansion panel to the v2 design: a flat, hairline-
   separated stack — no boxy MudBlazor surface / outer frame / elevation, no
   expand-jump — with a leading category icon left of the title and the single
   default rotating chevron on the right (every panel shares one expand icon,
   set by InspectorExpansionPanel). Vars-based MudBlazor overrides: the blessed
   "align the component to the true design system" case. */
.designer-inspector .mud-expansion-panels {
    background: transparent;
    border-radius: 0;
}

.designer-inspector .mud-expand-panel {
    background: transparent;
    border-top: 1px solid var(--mud-palette-lines-default);
    /* Top-borders are the single separator — kill MudBlazor's per-panel bottom
       border (incl. the .mud-expansion-panels-borders variant) so panels don't
       double up. */
    border-bottom: none !important;
}

/* MudBlazor injects a 16px margin around an expanded panel; drop it so the
   stack stays flush and doesn't jump on expand/collapse. */
.designer-inspector .mud-expand-panel.mud-panel-expanded {
    margin: 0;
}

/* Leading category icon + title — rendered via InspectorExpansionPanel's
   TitleContent (and the inline TitleContent in DesignerVersionHistoryPanel). */
.designer-inspector .inspector-panel-title {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.designer-inspector .inspector-panel-icon {
    display: inline-flex;
    color: var(--mud-palette-text-secondary);
}

/* The expand chevron — quiet and identical across every panel. */
.designer-inspector .mud-expand-panel-icon {
    color: var(--mud-palette-text-secondary);
}

/* Spacing control (InspectorSpacingControl) — padding/margin sliders in the
   Advanced panel. Sits with the inspector layout above because its slider-wrap
   gutter compensates for the Advanced panel's zeroed content gutters (see the
   .mud-expand-panel-content rule above). */
.spacing-control .spacing-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

.spacing-control .spacing-head-label {
    flex: 1;
    min-width: 0;
}

.spacing-control .spacing-head-controls {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

/* Compact value stepper on the label row (matches the v2 spec — the px value
   lives here, not as a label stacked above the slider). */
.spacing-control .spacing-num {
    width: 88px;
}

/* Horizontal breathing room so the slider thumb isn't clipped at 0% / 100%.
   The Advanced panel zeroes its content gutters (above), leaving a full-width
   slider flush against the panel's overflow:hidden edge, which cropped the
   left half of the thumb. */
.spacing-control .spacing-slider-wrap {
    padding: 0 8px;
}

.spacing-control .individual-spacing {
    padding-left: 8px;
    border-left: 2px solid var(--mud-palette-lines-default);
}

.spacing-control .spacing-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.spacing-control .spacing-label {
    width: 45px;
    flex-shrink: 0;
}

.spacing-control .spacing-slider {
    flex: 1;
}

.spacing-control .spacing-value {
    width: 40px;
    text-align: right;
    flex-shrink: 0;
}

/* Canvas chrome strip — device label + live scenario summary above the phone.
   Full-width row pinned to the top-left of the canvas (device info left,
   "N hidden" right) — matches the v2 design; not centered over the phone. */
.designer-canvas-chrome {
    flex-shrink: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 11px 18px;
    font-size: 11.5px;
    color: var(--mud-palette-text-secondary);
}

.designer-canvas-chrome__info {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.designer-canvas-chrome__device {
    font-family: var(--bm-mono);
    white-space: nowrap;
}

.designer-canvas-chrome__sep {
    color: var(--mud-palette-lines-default);
}

.designer-canvas-chrome__info strong {
    color: var(--mud-palette-text-primary);
    font-weight: 600;
}

.designer-canvas-chrome__muted {
    color: var(--mud-palette-text-disabled);
}

.designer-canvas-chrome__hidden {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 2px 9px;
    border-radius: 999px;
    background: rgba(var(--mud-palette-primary-rgb), 0.08);
    color: var(--mud-palette-primary-darken);
    font-weight: 600;
}

.preview-canvas-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 100%;
}

/* The phone illustration (bezel + notch + status bar + 393×852 screen) now lives in
   the shared Shared/PhoneFrame.razor component (.bm-phone*). The canvas renders it via
   <PhoneFrame> and passes "preview-canvas" as the viewport class, so the rules below
   still apply to the scrollable editing surface inside the shared frame. */
.preview-canvas {
    flex: 1;
    width: 100%;
    background-color: var(--canvas-bg, var(--mud-palette-background, #ffffff));
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.zone-canvas {
    min-height: 100%;
    width: 100%;
    /* Match the runtime's experience container inset (ExperienceRenderer.ContainerStyle uses
       padding: 8px) so the design canvas and the Preview tab inset content identically. */
    padding: 8px;
    padding-bottom: var(--bm-spacing-lg); /* Extra bottom spacing for comfortable scrolling */
    position: relative;
    overflow: visible;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    /* Flex layout to push BottomMenu/ActionSheet to bottom when content is short */
    display: flex;
    flex-direction: column;
    /* Page canvas background (override .drop-zone background): the current page's
       BackgroundColor when set, else the active theme background — see .bm-phone__screen
       in Shared/PhoneFrame.razor.css. */
    background-color: var(--canvas-bg, var(--mud-palette-background, #ffffff)) !important;
}

/* The canvas + live preview render the experience on its own palette, independent of the
   surrounding designer chrome's dark mode. That "island" is produced by a scoped
   MudThemeProvider (see ExperienceLightThemeScope.razor + DesignerCanvasThemeScope.razor +
   MudThemeExtension.ExperienceLightIslandScope) whose light/dark is driven by the current
   page's IsDarkMode, NOT by re-declaring palette variables here — so tenant theme
   customisations flow through unchanged.

   MudBlazor sets `body { color: var(--mud-palette-text-primary) }`, which is
   computed at <body> against the (dark) chrome variable and then inherited DOWN
   as a concrete colour. The light island only swaps the variable on these
   containers, so plain text that just inherits `color` (e.g. a Hero's MudText,
   which sits outside any MudPaper that re-reads the variable) would keep body's
   dark-mode white. Re-assert `color` from the island variable here so it
   recomputes light and inherits correctly. Still variable-based — no hardcoding. */
.zone-canvas,
.preview-canvas {
    color: var(--mud-palette-text-primary);
}

/* BottomMenu and ActionSheet positioning in designer mode */
/* Use sticky positioning so it stays at the bottom of the visible viewport */
/* even when content extends beyond the preview-canvas height */
/* Use !important on all properties to override inline styles */
.preview-canvas .preview-item-wrapper[data-component-type="BottomMenu"],
.preview-canvas .preview-item-wrapper[data-component-type="ActionSheet"] {
    position: sticky !important; /* Sticky keeps it at bottom of visible viewport */
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important; /* Prevent top from being set */
    width: 100% !important; /* Fill the zone-canvas width */
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: auto !important; /* Push to bottom when content is short */
    margin-bottom: 0 !important;
    z-index: 10 !important; /* Above other canvas items */
    background-color: inherit; /* Ensure background covers content underneath */
}

.preview-item-wrapper {
    position: relative;
}

.preview-item-wrapper[draggable="true"] {
    cursor: move;
}

.preview-item-wrapper[draggable="true"]:active {
    opacity: 0.5;
}

.drop-indicator {
    position: absolute;
    left: 0;
    right: 0;
    height: 3px;
    background-color: var(--mud-palette-primary);
    z-index: 1000;
    pointer-events: none;
    box-shadow: 0 0 6px var(--mud-palette-primary);
    border-radius: 2px;
    opacity: 0.9;
}

/* ===========================================
   Animated Drop Target Indicator
   Line expands from center when dragging over canvas
   =========================================== */
.canvas-drop-indicator {
    position: absolute;
    left: 50%;
    height: 3px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        var(--mud-palette-primary) 20%, 
        var(--mud-palette-primary) 80%, 
        transparent 100%);
    z-index: 1000;
    pointer-events: none;
    border-radius: 2px;
    transform: translateX(-50%);
    width: 0;
    opacity: 0;
    transition: none;
}

/* When active, animate the line expanding from center */
.canvas-drop-indicator.active {
    animation: dropIndicatorExpand 0.25s ease-out forwards;
}

/* When hiding, animate the line contracting to center */
.canvas-drop-indicator.hiding {
    animation: dropIndicatorContract 0.15s ease-in forwards;
}

@keyframes dropIndicatorExpand {
    0% {
        width: 0;
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        width: 80%;
        opacity: 1;
    }
}

@keyframes dropIndicatorContract {
    0% {
        width: 80%;
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        width: 0;
        opacity: 0;
    }
}

/* Add a subtle glow effect */
.canvas-drop-indicator.active::before {
    content: '';
    position: absolute;
    left: -10px;
    right: -10px;
    top: -4px;
    bottom: -4px;
    background: radial-gradient(ellipse at center, 
        rgba(var(--mud-palette-primary-rgb), 0.3) 0%, 
        transparent 70%);
    border-radius: 50%;
    z-index: -1;
}

/* Small dots at the ends of the line */
.canvas-drop-indicator.active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 7px;
    background: 
        radial-gradient(circle at 0% 50%, var(--mud-palette-primary) 3px, transparent 3px),
        radial-gradient(circle at 100% 50%, var(--mud-palette-primary) 3px, transparent 3px);
}

.drop-zone {
    height: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    background-color: rgba(96, 125, 139, 0.05);
}

/* ActionSheet and container nested drop zones */
.actionsheet-component .drop-zone,
.actionsheet-nested-items.drop-zone {
    height: auto !important;
    min-height: 50px;
    background-color: rgba(96, 125, 139, 0.1);
    border: 2px dashed rgba(96, 125, 139, 0.3);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.actionsheet-nested-items.drop-zone:hover,
.actionsheet-nested-items.drop-zone.drag-over {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.1);
    border-color: var(--mud-palette-primary);
}

/* Column layout drop zones must grow with their content. The base .drop-zone
   pins height:56px (sized for the empty placeholder), which otherwise clips
   taller children like images and leaves the column box the wrong height.
   Stretch children to the column width too, instead of centering them. */
.column-drop-zone {
    height: auto !important;
    align-items: stretch;
}

/* Blocked nested drop target: page-level chrome (ActionSheet, BottomMenu) can't be
   nested. The native no-drop cursor comes from dropEffect='none' / not preventing
   default in the dragover handler; this gives the matching visual restriction. The
   .drag-no-drop class overrides any hover/drag-over highlight while it's present. */
.drop-zone.drag-no-drop,
.actionsheet-nested-items.drop-zone.drag-no-drop {
    cursor: not-allowed !important;
    border: 2px dashed var(--mud-palette-error) !important;
    background-color: rgba(244, 67, 54, 0.08) !important;
}


.block-editor-block-types-list__list-item {
    position: relative;
}

.block-editor-block-types-list__item {
    width: 100%;
    padding: 7px 8px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    cursor: grab;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;
    transition: background-color 0.12s, border-color 0.12s;
    text-align: left;
}

.block-editor-block-types-list__item:hover {
    border-color: var(--mud-palette-lines-default);
    background-color: var(--mud-palette-action-hover);
}

.block-editor-block-types-list__item:active {
    cursor: grabbing;
}

.block-editor-block-types-list__item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.block-editor-block-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.block-editor-block-icon.has-colors svg {
    fill: currentColor;
    color: var(--mud-palette-primary);
}

.block-editor-block-types-list__item-title {
    font-size: 12.5px;
    font-weight: 400;
    color: var(--mud-palette-text-primary);
    line-height: 1.4;
}

.components-truncate {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.components-button {
    border: none;
    background: transparent;
    font-family: inherit;
}

.components-button:focus {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* ===========================================
   CSS-only Hover Preview for Palette Items
   No Blazor state changes = no re-renders = no scroll jumps
   =========================================== */

/* Ensure list items have relative positioning */
.block-editor-block-types-list__list-item {
    position: relative;
}

/* Custom drag ghost — the preview card that follows the cursor during a palette
   drag. A real fixed-position DOM element (NOT dataTransfer.setDragImage, which is
   an unreliable one-shot OS snapshot). Repositioned on every dragover in JS. Built
   fresh from the preview content, so it carries the card chrome here and does NOT
   inherit the .palette-item-preview hover/hide gating styles. */
.palette-drag-ghost {
    position: fixed;
    z-index: 100000;
    width: 280px;
    pointer-events: none;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    box-shadow: 0 8px 28px rgba(16, 17, 28, 0.22);
    overflow: hidden;
    opacity: 0.97;
}

/* The preview panel - use fixed positioning to escape scroll container clipping */
.palette-item-preview {
    position: fixed;
    left: calc(var(--palette-width, 280px) + 8px);
    top: 200px; /* Default - will be overridden by JS on hover */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 9999;
    transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out;
    width: 280px;
    background: var(--mud-palette-surface);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    border: 1px solid var(--mud-palette-lines-default);
}

/* Show preview on hover */
.block-editor-block-types-list__list-item:hover .palette-item-preview {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Add a small delay before showing to prevent flicker during fast scrolling */
.block-editor-block-types-list__list-item .palette-item-preview {
    transition-delay: 0.15s;
}

/* Remove delay when hiding */
.block-editor-block-types-list__list-item:not(:hover) .palette-item-preview {
    transition-delay: 0s;
}

/* Preview content styling */
.palette-item-preview-content {
    overflow: hidden;
    border-radius: 8px;
}

.palette-item-preview-visual {
    padding: 16px;
    background: var(--mud-palette-background);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.palette-item-preview-visual img {
    width: 100%;
    max-height: 200px;
    border-radius: 4px;
    border: 1px solid var(--mud-palette-divider);
    object-fit: cover;
}

.palette-item-preview-visual .preview-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
    background: var(--mud-palette-background-gray);
    border-radius: 4px;
}

.palette-item-preview-info {
    padding: 16px;
}

.palette-item-preview-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    margin-bottom: 8px;
}

.palette-item-preview-description {
    font-size: 13px;
    color: var(--mud-palette-text-secondary);
    line-height: 1.4;
}

.section {
    cursor: pointer;
    user-select: none;
    position: relative;
}

/* Hover dim rendered as an overlay, NOT `opacity:` on the section itself.
   Opacity < 1 creates a stacking context that traps the fixed-position editor
   toolbars (paragraph/image/HTML, z-index 10000) inside the section: the moment
   the pointer enters the toolbar or its AI dropdown, the section gains :hover,
   the context appears, and the popup drops behind later siblings and designer
   chrome — flickering in and out of view and swallowing every click. The
   overlay fades the section toward the canvas background exactly like
   `opacity: 0.9` did, but only the pseudo-element carries the opacity. */
.section:hover::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--canvas-bg, var(--mud-palette-background));
    opacity: 0.1;
    pointer-events: none;
}

.preview-item-wrapper {
    position: relative;
    width: 100%;
}

.carousel-wrapper {
    width: 100%;
    position: relative;
    min-height: 400px;
    height: auto;
    touch-action: pan-y pinch-zoom; /* Allow vertical scrolling and pinch zoom, but enable horizontal swipe */
}

/* Ensure MudCarousel can handle touch events */
.carousel-wrapper .mud-carousel {
    touch-action: pan-x pan-y pinch-zoom;
    -webkit-overflow-scrolling: touch;
}

/* Override MudCarousel default background to be transparent */
.carousel-wrapper .mud-carousel,
.carousel-wrapper .mud-carousel-item,
.carousel-wrapper .mud-carousel-swipe {
    background-color: transparent !important;
    background: transparent !important;
}

.carousel-scroll-container {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

.carousel-scroll-container::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.carousel-item {
    flex: 0 0 100%;
    scroll-snap-align: start;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.carousel-caption {
    padding: 16px;
    text-align: center;
    overflow: hidden;
}

.carousel-caption-text {
    margin: 0;
    font-size: 18px;
    font-weight: 500;
}

@keyframes slideInFromLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInFromRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.carousel-media-container {
    margin: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px;
    pointer-events: none; /* Allow touch events to pass through to carousel */
}

.carousel-media-container video,
.carousel-media-container img {
    pointer-events: auto; /* Re-enable pointer events for media controls */
}

.carousel-item-content {
    min-height: 400px;
    height: auto;
    pointer-events: auto; /* Ensure items don't block touch events */
}

.carousel-scroll-container {
    cursor: grab;
}

.carousel-scroll-container:active {
    cursor: grabbing;
}

.carousel-controls-bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.8) 100%);
    backdrop-filter: blur(8px);
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
    z-index: 10;
}

.dotnav {
    display: flex;
    gap: 8px;
}

.dotnav-items {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 8px;
    align-items: center;
}

.dotnav-item {
    display: flex;
    align-items: center;
}

.dotnav-link {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    cursor: pointer;
    text-decoration: none;
    position: relative;
}

.dotnav-link:hover {
    background-color: rgba(0, 0, 0, 0.5);
}

.dotnav-link.current {
    width: 24px;
    background-color: var(--mud-palette-primary);
}

.dotnav-link.current:hover {
    background-color: var(--mud-palette-primary-darken);
}

.visuallyhidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.play-pause-button-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}

.play-pause-button {
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    padding: 0;
}

.play-pause-button:hover {
    background-color: rgba(0, 0, 0, 0.8);
    transform: scale(1.05);
}

.play-pause-button:active {
    transform: scale(0.95);
}

.play-pause-button .icons {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    height: 100%;
}

.play-pause-button .svg-icon {
    width: 20px;
    height: 20px;
    fill: currentColor;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.rich-text-editor-wrapper {
    position: relative;
    width: 100%;
    min-height: 100px;
}

.rich-text-editable {
    min-height: 100px;
    padding: 12px;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 4px;
    outline: none;
    cursor: text;
    /* Ensure inline styles from Blazor take precedence over CSS defaults */
    /* This prevents flash where CSS padding/background is visible before inline styles apply */
    transition: none; /* Disable transitions during initial load to prevent flash */
}

/* Hide element until it's initialized to prevent flash of unstyled content */
.rich-text-editable:not([data-initialized="true"]) {
    opacity: 0;
    visibility: hidden;
}

.rich-text-editable[data-initialized="true"] {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.1s ease-in;
}

.rich-text-editable:empty:not(:focus):before {
    content: attr(data-placeholder);
    color: var(--mud-palette-text-disabled);
    font-style: italic;
    pointer-events: none;
}

.rich-text-editable:focus {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 2px rgba(var(--mud-palette-primary-rgb), 0.2);
}

.rich-text-editable:focus:empty:before {
    content: '';
}

.rich-text-toolbar-floating {
    position: fixed;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 10000;
    padding: 4px;
}

.rich-text-toolbar-content {
    display: flex;
    gap: 4px;
}

.rich-text-toolbar-content button {
    padding: 6px 12px;
    border: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-surface);
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    min-width: 32px;
}

.rich-text-toolbar-content button:hover {
    background: var(--mud-palette-action-hover);
}

.rich-text-toolbar-content button:active {
    background: var(--mud-palette-action-selected);
}

.play-pause-button .svg-icon.hidden {
    display: none;
}

/* Paragraph Editor Styles */
.paragraph-toolbar-floating {
    display: none;
    position: fixed;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    padding: 4px;
    z-index: 10000;
}

.paragraph-toolbar-content {
    display: flex;
    gap: 4px;
}

.paragraph-toolbar-button {
    padding: 6px 12px;
    border: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-surface);
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    min-width: 32px;
}

.paragraph-toolbar-button:hover {
    background: var(--mud-palette-action-hover);
}

.paragraph-editor-wrapper {
    width: 100%;
}

.paragraph-editable {
    min-height: 24px;
    outline: none;
}

.paragraph-editable:empty:focus:before {
    content: attr(data-placeholder);
    color: var(--mud-palette-text-secondary);
    pointer-events: none;
}

.empty-block-placeholder {
    min-height: 48px;
    padding: 12px;
    border: 1px dashed var(--mud-palette-divider);
    border-radius: 4px;
    cursor: text;
    outline: none;
}

.empty-block-placeholder:focus {
    border-color: var(--mud-palette-primary);
    border-style: solid;
}

/* Image Block Toolbar Styles */
.image-block-toolbar {
    position: absolute;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    padding: 4px;
    display: none;
    z-index: 1000;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.15s ease-out;
    pointer-events: none;
}

/* Show toolbar on hover over the image block wrapper */
.image-block-wrapper:hover .image-block-toolbar[data-visible="true"] {
    display: flex;
    opacity: 1;
    pointer-events: auto;
}

.image-block-toolbar .toolbar-buttons {
    display: flex;
    align-items: center;
    gap: 2px;
}

.image-block-toolbar .toolbar-group {
    display: flex;
    align-items: center;
    gap: 2px;
    position: relative;
}

.image-block-toolbar .toolbar-divider {
    width: 1px;
    height: 24px;
    background: var(--mud-palette-lines-default);
    margin: 0 4px;
}

.image-block-toolbar .toolbar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 8px;
    border: none;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--mud-palette-text-primary);
    font-size: 14px;
    min-width: 32px;
    height: 32px;
}

.image-block-toolbar .toolbar-btn:hover {
    background: var(--mud-palette-background-gray);
}

.image-block-toolbar .toolbar-btn.active {
    background: var(--mud-palette-primary-hover);
    color: var(--mud-palette-primary);
}

/* HTML Block Toolbar Styles */
.html-block-toolbar {
    position: absolute;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    padding: 4px;
    display: none;
    z-index: 1100;
    top: -44px;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.15s ease-out;
    pointer-events: none;
}

/* Show toolbar on hover over the HTML block wrapper */
.html-block-wrapper:hover .html-block-toolbar[data-visible="true"] {
    display: flex;
    opacity: 1;
    pointer-events: auto;
}

.html-block-toolbar .toolbar-buttons {
    display: flex;
    align-items: center;
    gap: 2px;
}

.html-block-toolbar .toolbar-group {
    display: flex;
    align-items: center;
    gap: 2px;
    position: relative;
}

.html-block-toolbar .toolbar-divider {
    width: 1px;
    height: 24px;
    background: var(--mud-palette-lines-default);
    margin: 0 4px;
}

.html-block-toolbar .toolbar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 8px;
    border: none;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--mud-palette-text-primary);
    font-size: 14px;
    min-width: 32px;
    height: 32px;
}

.html-block-toolbar .toolbar-btn:hover {
    background: var(--mud-palette-background-gray);
}

.html-block-toolbar .toolbar-btn.active {
    background: var(--mud-palette-primary-hover);
    color: var(--mud-palette-primary);
}

.html-block-toolbar .toolbar-btn.ai-btn {
    color: #7c3aed;
}

.html-block-toolbar .toolbar-btn.ai-btn:hover {
    background: #f3e8ff;
}

/* Fix MudBlazor button icon alignment */
.mud-button-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}