/* ═══════════════════════════════════════════════════════════════════════════
   ui-next.css — "immersive" editor shell (prototype, toggle-able)
   Scoped entirely to body.ui-next so the classic layout is untouched when off.
   Idea: edge-to-edge canvas with floating translucent (glass) chrome layered
   over it — top bar, panel, bottom tool dock — instead of stacked solid bars.

   Layout:
     • width-safe bits (tokens, accent, canvas) apply at all widths
     • ≥769px → floating desktop shell (left panel + right inspector)
     • ≤768px → mobile shell (drawer panel, bottom dock, bottom-sheet inspector)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Width-safe foundation (all viewports) ──────────────────────────────── */
body.ui-next {
  /* High opacity on purpose: these dark panels sit over a LIGHT canvas, so a
     low alpha lets the bright field bleed up through the blur and the panels
     read as a milky/white-washed grey. Keep just a hint of translucency. */
  --glass-bg:     rgba(17, 21, 32, 0.93);
  --glass-bg-2:   rgba(22, 27, 40, 0.95);
  --glass-border: rgba(255, 255, 255, 0.10);
  --glass-shadow: 0 10px 34px rgba(0, 0, 0, 0.46), inset 0 1px 0 rgba(255,255,255,0.06);
  --glass-blur:   blur(14px) saturate(120%);
  --float-gap:    14px;

  /* ── Accent: canonical brand blue ─────────────────────────────────────────
     The immersive shell uses the same blue accent as the rest of the app so
     the product reads as one coherent brand. Duct semantic colours
     (--supply blue, --return-color orange, --fresh green …) are left alone so
     the canvas content keeps its meaning. */
  --accent:       #3b82f6;
  --accent-hover: #2563eb;
  --accent-light: rgba(59, 130, 246, 0.12);
  --accent-glow:  rgba(59, 130, 246, 0.25);
  --accent-soft:  rgba(59, 130, 246, 0.12);
  --accent-edge:  rgba(59, 130, 246, 0.45);
  --accent-line:  linear-gradient(90deg, #3b82f6, #60a5fa);
  --border-focus: rgba(59, 130, 246, 0.50);
  --brand-primary: #3b82f6;
}

/* Prominent active states inherit the unified accent tokens above. */
body.ui-next .layer-row.layer-active { background: var(--accent-light); border-color: var(--accent-edge); }
body.ui-next .duct-item.selected     { background: var(--accent-light); border-color: var(--accent-edge); }
body.ui-next .sidebar-tab.active     { color: var(--accent); }

/* Canvas fills the whole viewport; chrome floats over it. */
body.ui-next .main { position: relative; }
body.ui-next .canvas-area {
  position: absolute; inset: 0;
  /* Refined canvas: a soft, slightly warm off-white with a DOTTED grid (reads
     more premium/CAD than a line grid) and a faint blue vignette at top so
     the floating glass chrome reads as lifted off it. Kept light so white
     floor-plan scans stay legible. */
  background-color: var(--canvas-bg, #eceef4);
  background-image:
    radial-gradient(130% 90% at 50% -15%, rgba(59,130,246,0.06), transparent 62%),
    radial-gradient(circle, rgba(90,100,130,0.18) 1px, transparent 1.4px);
  background-size: 100% 100%, 22px 22px;
  background-position: 0 0, 11px 11px;
}

/* The "Search ⌘K" pill only shows in immersive mode (centred, desktop only). */
.cmd-pill { display: none; }
/* Trailing spacer is only meaningful when the in-flow pill is visible; hide it
   everywhere else so classic + mobile top-bar layouts are unchanged. */
.topbar-spacer-trailing { display: none; }

@keyframes uin-drop       { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes uin-rise       { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes uin-rise-plain { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes uin-slide-left { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: translateX(0); } }
@keyframes uin-fade        { from { opacity: 0; } to { opacity: 1; } }
@keyframes uin-pop         { from { opacity: 0; transform: translateY(-10px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes uin-slide-right { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: translateX(0); } }
@keyframes uin-sheet-up    { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }

/* ═══════════════════════════════════════════════════════════════════════════
   DESKTOP / TABLET shell (≥769px)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {

  /* ── Floating glass top bar ───────────────────────────────────────────── */
  body.ui-next .topbar {
    position: fixed;
    top: var(--float-gap); left: var(--float-gap); right: var(--float-gap);
    height: 50px; padding: 0 var(--sp-3_5);
    border-radius: 16px;
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    z-index: 60;
    animation: uin-drop 0.42s cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* ── Floating left panel (sidebar) ────────────────────────────────────── */
  body.ui-next .sidebar {
    position: fixed;
    top: calc(var(--float-gap) + 50px + 10px);
    left: var(--float-gap);
    /* End above the bottom tool dock (≈90px tall, sitting at float-gap+42), not
       just above the status bar — otherwise the full-width centred dock's left
       end slides under the sidebar's lower-left corner on narrower screens. */
    bottom: calc(var(--float-gap) + 42px + 90px + 10px);
    width: 290px;
    border: 1px solid var(--glass-border);
    border-right: 1px solid var(--glass-border);
    border-radius: 16px;
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-shadow);
    z-index: 50;
    overflow: hidden;
    animation: uin-slide-left 0.42s cubic-bezier(0.22, 1, 0.36, 1);
  }
  /* Collapsed sidebar becomes a tidy floating icon-rail */
  body.ui-next .sidebar.collapsed { width: 54px; bottom: auto; max-height: 320px; }
  body.ui-next .sidebar-tabs { background: transparent; }
  body.ui-next .sidebar-hint { background: rgba(255,255,255,0.03); }

  /* ── Floating bottom tool dock ────────────────────────────────────────── */
  body.ui-next .toolbar {
    position: fixed;
    bottom: calc(var(--float-gap) + 42px); /* clear the floating status bar */
    left: 50%; transform: translateX(-50%);
    width: max-content; max-width: calc(100vw - 2 * var(--float-gap));
    flex-direction: column;
    border-radius: 16px;
    background: var(--glass-bg-2);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    overflow: hidden;
    z-index: 55;
    animation: uin-rise 0.42s cubic-bezier(0.22, 1, 0.36, 1);
  }
  body.ui-next .toolbar-row { height: 44px; padding: 0 var(--sp-3_5); }
  body.ui-next .toolbar-row:first-child { border-bottom: 1px solid rgba(255,255,255,0.06); }
  body.ui-next .toolbar .toolbar-spacer { flex: 0 0 8px; }

  body.ui-next .toast-container { bottom: calc(var(--float-gap) + 44px); right: var(--float-gap); }

  /* ── Floating glass status bar ────────────────────────────────────────── */
  body.ui-next .status-bar {
    position: fixed;
    left: var(--float-gap); right: var(--float-gap); bottom: var(--float-gap);
    height: 34px; padding: 0 var(--sp-4);
    border: 1px solid var(--glass-border);
    border-radius: 13px;
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-shadow);
    z-index: 52;
    animation: uin-rise-plain 0.42s cubic-bezier(0.22, 1, 0.36, 1);
  }
  body.ui-next .status-item { border-right-color: rgba(255,255,255,0.08); }

  /* Floating "current tool" pill is redundant — the dock highlights the active
     tool — so hide it and free the top-centre for the search pill. */
  body.ui-next .canvas-tool-pill { display: none; }
  body.ui-next .canvas-hint { top: 124px; left: calc(var(--float-gap) + 290px + 14px); }

  /* Guest-mode banner — a tidy centred glass pill below the top bar.
     Scope to `.app > #guestBanner`: the banner's inline style ends in
     `display:flex` (always shown); in normal flow as a body child it sits below
     the 100vh app (off-screen) when logged in, and the guest JS only moves it
     INTO .app for actual guests. Floating it unconditionally would surface it
     for logged-in users. Colour/padding need !important to beat the inline. */
  body.ui-next .app > #guestBanner {
    position: fixed;
    top: calc(var(--float-gap) + 50px + 12px);
    left: 50%; transform: translateX(-50%);
    right: auto; width: max-content;
    max-width: min(620px, calc(100vw - 2 * (var(--float-gap) + 300px)));
    padding: var(--sp-2) var(--sp-4) !important;
    border: 1px solid rgba(245,158,11,0.32) !important;
    border-radius: 999px;
    background: rgba(30, 24, 14, 0.94) !important;
    color: #fcd34d !important;
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-shadow);
    z-index: 58;
  }

  /* Side panels float so the top/bottom bars never cover their headers. */
  body.ui-next .chat-panel,
  body.ui-next .team-chat-panel {
    top: calc(var(--float-gap) + 50px + 10px);
    right: var(--float-gap);
    bottom: calc(var(--float-gap) + 42px);
    border-radius: 16px;
    border: 1px solid var(--glass-border);
    overflow: hidden;
    box-shadow: var(--glass-shadow);
  }

  /* Buttons softened to suit the glass surfaces. */
  body.ui-next .topbar .btn,
  body.ui-next .toolbar .btn {
    border-color: rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.02);
    transition: background var(--transition), color var(--transition),
                border-color var(--transition), transform 0.12s ease;
  }
  body.ui-next .topbar .btn:hover,
  body.ui-next .toolbar .btn:hover { background: rgba(255,255,255,0.08); }
  body.ui-next .toolbar .btn:hover:not(:disabled),
  body.ui-next .topbar .btn:hover:not(:disabled) { transform: translateY(-1px); }
  body.ui-next .toolbar .btn:active:not(:disabled),
  body.ui-next .topbar .btn:active:not(:disabled) { transform: translateY(0) scale(0.96); }

  /* ── Right-hand contextual inspector ──────────────────────────────────── */
  body.ui-next .floating-props-panel {
    top: calc(var(--float-gap) + 50px + 10px);
    right: var(--float-gap);
    width: 274px;
    max-height: calc(100vh - (var(--float-gap) + 60px) - (var(--float-gap) + 52px));
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    background: var(--glass-bg-2);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-shadow);
    animation: uin-slide-right 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  }
  body.ui-next .floating-props-handle { background: rgba(255,255,255,0.04); }
  body.ui-next.team-chat-open .floating-props-panel {
    right: calc(var(--float-gap) + 320px + 10px);
  }

  /* ── Icon-rail polish ─────────────────────────────────────────────────── */
  body.ui-next .sidebar.collapsed .sidebar-collapse-btn { display: none; }
  body.ui-next .sidebar.collapsed .sidebar-tab {
    border-radius: 12px;
    color: var(--text-secondary);
    transition: background var(--transition), color var(--transition);
  }
  body.ui-next .sidebar.collapsed .sidebar-tab:hover { color: var(--text-primary); }
  body.ui-next .sidebar.collapsed .sidebar-tab i { font-size: 20px; }

  /* ── Command palette: centred "Search" pill + glass restyle ───────────── */
  body.ui-next .cmd-pill {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    /* In normal flow (not absolutely centred) so flexbox reserves space for it —
       this guarantees it can never slide on top of the right-hand action
       cluster. The leading + trailing .topbar-spacer keep it roughly centred. */
    flex-shrink: 0;
    width: 190px; height: 32px; padding: 0 var(--sp-2_5) 0 var(--sp-3);
    font-size: 12px; font-weight: 500;
    color: var(--text-muted);
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 999px; cursor: pointer; white-space: nowrap;
    /* width/padding are in the list so the ≤1200px collapse to an icon-only
       square animates smoothly instead of snapping at the breakpoint. */
    transition: background var(--transition), color var(--transition),
                border-color var(--transition), width var(--transition),
                padding var(--transition);
  }
  body.ui-next .cmd-pill:hover {
    background: rgba(255,255,255,0.08);
    color: var(--text-secondary);
    border-color: rgba(255,255,255,0.16);
  }
  body.ui-next .cmd-pill i { font-size: 14px; }
  body.ui-next .cmd-pill span { flex: 1; text-align: left; }
  body.ui-next .cmd-pill kbd {
    font-family: var(--font-mono, monospace); font-size: 10px; line-height: 1;
    padding: 3px 5px; border-radius: 5px;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10);
    color: var(--text-secondary);
  }

  body.ui-next .cmd-palette-bg.open { animation: uin-fade 0.16s ease; }
  body.ui-next .cmd-palette-bg.open .cmd-palette { animation: uin-pop 0.26s cubic-bezier(0.22, 1, 0.36, 1); }
  body.ui-next .cmd-palette {
    background: var(--glass-bg-2);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
  }
}

/* ── Immersive top bar: graceful degradation ──────────────────────────────────
   The action cluster was consolidated to four anchors (AI · Project · Share +
   account), so the bar now compacts instead of hitting hard cut-offs. Buttons
   shed their text labels before the search pill shrinks to an icon — nothing
   ever vanishes outright (the old ≤1319px rule simply hid the search pill). */

/* Pill is always present at desktop widths now, so its balancing trailing
   spacer is active across the board (not only ≥1320px). */
@media (min-width: 769px) {
  body.ui-next .topbar-spacer-trailing { display: block; }
}

/* Tight laptops (≤1200px): collapse the right-cluster button text to icons and
   shrink the search pill to an icon-only square. */
@media (min-width: 769px) and (max-width: 1200px) {
  body.ui-next .topbar-actions .btn .btn-label,
  body.ui-next .topbar-actions .btn .btn-chevron { display: none; }
  body.ui-next .topbar-actions .btn { padding-left: var(--sp-2_5); padding-right: var(--sp-2_5); gap: 0; }
  body.ui-next .cmd-pill { width: 34px; padding: 0; justify-content: center; gap: 0; }
  body.ui-next .cmd-pill span,
  body.ui-next .cmd-pill kbd { display: none; }
}

/* Narrow laptops (≤1000px): drop the brand word + project chip so the floor
   tabs and action icons keep breathing room. The project name is still one tap
   away via Project ▸ Project Info, and the chip returns at wider widths. */
@media (min-width: 769px) and (max-width: 1000px) {
  body.ui-next .logo-word { display: none; }
  body.ui-next .topbar-project-chip { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE shell (≤768px)
   Builds on the classic mobile rules (drawer sidebar + hamburger, slimmed
   topbar) — we only add the floating-glass identity and collapse the toolbar
   into a "Tools" trigger pill that opens a dropdown sheet. The sidebar stays
   the classic off-canvas drawer.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Floating glass top bar (full width, slim). The action buttons collapse
     behind a kebab trigger (see below), so the bar itself no longer scrolls —
     overflow:visible lets the dropdown menu escape below it. */
  body.ui-next .topbar {
    position: fixed;
    top: 8px; left: 8px; right: 8px;
    height: 46px;
    border-radius: 14px;
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    overflow: visible;
    z-index: 60;
    animation: uin-drop 0.36s ease;
  }

  /* Kebab trigger + the actions menu it opens. The menu sits over the live
     canvas, so it stays solid (not glass) to keep the text legible. */
  body.ui-next #btnMobileMenu[aria-expanded="true"] { color: var(--accent); }
  body.ui-next .topbar-actions {
    border-radius: 14px;
    background: var(--bg-modal);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    animation: uin-sheet-up 0.22s cubic-bezier(0.22, 1, 0.36, 1);
  }
  body.ui-next .topbar-actions .export-dropdown,
  body.ui-next .topbar-actions .user-dropdown {
    background: var(--bg-card);
    border: 1px solid var(--glass-border);
  }

  /* Bottom dock collapses to a single floating "Tools" trigger pill — tapping
     it opens #toolbarRows above it as a glass dropdown sheet (see below)
     instead of forcing every tool row to scroll horizontally. Sits above the
     slim status bar. */
  body.ui-next .toolbar {
    position: fixed;
    left: 8px; right: 8px; bottom: 46px;
    flex-direction: column;
    z-index: 55;
    /* The container is just a positioning shell here — the trigger pill and the
       dropdown sheet carry their own glass surfaces. Clear the classic dark
       square .toolbar background/border, which otherwise showed through the
       rounded trigger's corners. */
    background: transparent;
    border: none;
  }
  body.ui-next .toolbar-mobile-trigger {
    border-radius: 14px;
    background: var(--glass-bg-2);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    animation: uin-rise-plain 0.36s ease;
    overflow: hidden; /* clip the inner button's fill to the rounded corners */
  }
  /* Reset native UA button chrome — on iOS Safari a <button> without this
     ignores border-radius and renders square, so the pill looked unrounded
     on mobile despite the rounded wrapper. */
  body.ui-next #btnMobileTools {
    border: none; background: none; width: 100%; height: 100%;
    justify-content: center; border-radius: inherit;
    -webkit-appearance: none; appearance: none;
    -webkit-tap-highlight-color: transparent;
  }
  body.ui-next #btnMobileTools[aria-expanded="true"] { color: var(--accent); }

  /* Dropdown sheet — floats above the trigger pill, glass-matched, scrolls
     vertically if the tool list is taller than the available space. */
  body.ui-next .toolbar-rows {
    position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); top: auto;
    margin-top: 0; max-height: 50vh;
    border-radius: 14px;
    background: var(--glass-bg-2);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    animation: uin-sheet-up 0.22s cubic-bezier(0.22, 1, 0.36, 1);
    padding: var(--sp-1) var(--sp-2_5) var(--sp-2_5);
  }
  body.ui-next .toolbar-rows .toolbar-row:nth-child(2) { border-top-color: rgba(255,255,255,0.08); }

  /* Slim floating glass status bar pinned to the very bottom. */
  body.ui-next .status-bar {
    position: fixed;
    left: 8px; right: 8px; bottom: 8px;
    height: 30px; padding: 0 var(--sp-3);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-shadow);
    z-index: 52;
    /* The status segments are wider than a phone — let them scroll *inside* the
       rounded box (clipped to the corners) instead of spilling off the right
       edge, which made the bar look cut-off / unrounded. */
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* Hidden scrollbar hides the fact that the zoom/balance controls scroll off
       the right edge. A right-edge fade mask hints "there's more →" without
       adding visible chrome. (Left edge is also softened once scrolled.) */
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 22px), transparent 100%);
            mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 22px), transparent 100%);
  }
  body.ui-next .status-bar::-webkit-scrollbar { display: none; }

  /* iOS focus-zoom guard for the immersive shell (mirrors style.css). Any
     text-entry field under 16px makes iOS Safari zoom on focus — pin to 16px on
     touch widths. Desktop sizes are untouched (this is inside the ≤768px block). */
  body.ui-next input, body.ui-next select, body.ui-next textarea,
  body.ui-next .prop-input, body.ui-next .unit-search, body.ui-next .chat-input,
  body.ui-next .api-key-input, body.ui-next .duct-width-select, body.ui-next .cmd-input {
    font-size: 16px !important;
  }

  /* Drawer panel: keep classic off-canvas behaviour, just glass-tint + round
     the leading edge so it matches the family when open. */
  body.ui-next .sidebar {
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border-right: 1px solid var(--glass-border);
    border-radius: 0 16px 16px 0;
  }

  /* Canvas overlays clear the floating top bar. Toasts + hint drop from the top
     so they never collide with the bottom dock. */
  body.ui-next .canvas-tool-pill { top: 62px; }
  body.ui-next .canvas-hint { top: 62px; left: 8px; right: 8px; }
  body.ui-next .toast-container { top: 62px; bottom: auto; left: 8px; right: 8px; }

  /* Side panels span the screen below the top bar, above the dock. */
  body.ui-next .chat-panel,
  body.ui-next .team-chat-panel {
    top: 62px; left: 8px; right: 8px; bottom: 8px;
    width: auto;
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--glass-shadow);
  }

  /* Inspector becomes a bottom sheet that overlays the dock while you edit
     (close it to get the tools back). */
  body.ui-next .floating-props-panel {
    top: auto; left: 8px; right: 8px; bottom: 8px;
    width: auto; max-height: 46vh;
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    background: var(--glass-bg-2);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-shadow);
    z-index: 57; /* above dock (55) + status (52) */
    animation: uin-sheet-up 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  }
  body.ui-next .floating-props-handle { background: rgba(255,255,255,0.04); }

  /* Guest banner: full-width glass pill below the top bar (only for guests). */
  body.ui-next .app > #guestBanner {
    position: fixed;
    top: 60px; left: 8px; right: 8px;
    justify-content: center; flex-wrap: wrap;
    padding: 7px var(--sp-3) !important;
    border: 1px solid rgba(245,158,11,0.32) !important;
    border-radius: 12px;
    background: rgba(30, 24, 14, 0.94) !important;
    color: #fcd34d !important;
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-shadow);
    z-index: 58;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.ui-next .topbar,
  body.ui-next .toolbar,
  body.ui-next .sidebar,
  body.ui-next .status-bar,
  body.ui-next .floating-props-panel,
  body.ui-next .cmd-palette-bg.open .cmd-palette { animation: none; }
  body.ui-next .toolbar .btn:hover,
  body.ui-next .topbar .btn:hover { transform: none; }
  body.ui-next .cmd-pill { transition: none; }
}