/* ============================================================================
 * Zed UX2 v4 - SKIN-ADAPTIVE floating layout + solid header (CT-320-HEADER)
 * Gated: html.zed-ux (default OFF => ZERO regression).
 *
 * v3 (CT-319): floating frames use skin's OWN tokens (light skins float light,
 * dark skins float dark) - no more black+white mix.
 * v4 (CT-320): (1) HEADER = solid full-width bar flush at top (no gap above),
 * taller + polished per user ("header chikon hoye gese, mota koro, uporer space
 * bad dau"); (2) REMOVE the preview backdrop "card" (.stageWrap::before) on
 * non-lumen light skins (glacier/velvet) - user keeps lumen's card.
 * ==========================================================================*/

/* Thicker top bar height (skin default was 56-58px) */
html.zed-ux .editorApp[data-skin][data-theme] {
  --topbar-height: 66px !important;
}

/* Base canvas gutter = skin bg */
html.zed-ux .editorApp[data-skin] {
  background: var(--bg) !important;
}

/* Middle containers transparent so the base shows AROUND the preview */
html.zed-ux .editorApp[data-skin] .workspace,
html.zed-ux .editorApp[data-skin] .stageWrap {
  background: transparent !important;
}

/* Remove the preview backdrop "card" on non-lumen light skins (keep lumen) */
html.zed-ux .editorApp[data-theme]:not([data-skin="lumen"]) .stageWrap::before {
  display: none !important;
}

/* ---------- HEADER = solid full-width bar, flush to top (no top gap) ------- */
html.zed-ux .editorApp[data-skin][data-theme] .topBar {
  background: var(--panel) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
  margin: 0 !important;
  padding: 0 26px !important;
}

/* ---------- Floating surfaces (each = detached card on the base) ---------- */
html.zed-ux .editorApp[data-skin] .rail {
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--zed-radius-lg) !important;
  box-shadow: var(--zed-shadow-md) !important;
  margin: var(--zed-space-2) 0 var(--zed-space-2) var(--zed-space-2) !important;
}
html.zed-ux .editorApp[data-skin] .sidePanel {
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--zed-radius-lg) !important;
  box-shadow: var(--zed-shadow-md) !important;
  margin: var(--zed-space-2) !important;
  overflow: hidden !important;
}
html.zed-ux .editorApp[data-skin] .previewFrame {
  border: 1px solid var(--line) !important;
  border-radius: var(--zed-radius-lg) !important;
  box-shadow: var(--zed-shadow-lg) !important;
}
html.zed-ux .editorApp[data-skin] .inspectorPanel {
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--zed-radius-lg) !important;
  box-shadow: var(--zed-shadow-md) !important;
  top: calc(var(--topbar-height) + var(--zed-space-2)) !important;
  right: var(--zed-space-2) !important;
  bottom: calc(var(--timeline-height) + var(--zed-space-2)) !important;
  overflow: hidden !important;
}
html.zed-ux .editorApp[data-skin] .timelineDock {
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--zed-radius-lg) !important;
  box-shadow: var(--zed-shadow-md) !important;
  margin: 0 var(--zed-space-2) var(--zed-space-2) var(--zed-space-2) !important;
}
html.zed-ux .editorApp[data-skin] .sidePanel,
html.zed-ux .editorApp[data-skin] .inspectorPanel {
  color: var(--text);
}