/* ════════════════════════════════════════════════════════════════════
   Full-bleed layout (2026-05-29 — DESIGN.md §6.4/§8.4/§9.1)
   ────────────────────────────────────────────────────────────────────
   Was a CSS grid (topbar / library|res-l|viewport / statusbar). To give
   the dock + topbar real liquid glass, the Canvas (#viewport) now spans
   the whole window at z:0 and the resident chrome floats over it as fixed
   overlays — so their backdrop-filter blurs the 3D scene behind them.
   renderer / raycaster / CSS2D all key off viewportEl/canvas rect, which
   simply becomes the full window — no JS change needed.
   ════════════════════════════════════════════════════════════════════ */
body { display: block; }

#topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--topbar-h);
  /* 1400 (was 10): #topbar is position:fixed → a stacking context, so its
     word-menu dropdowns are trapped at the topbar's plane. At z:10 they were
     occluded by the dock (10, later in DOM) and floating panels (1000-1099).
     Raise the whole bar above the panel tier so dropdowns clear both; still
     below toast (1500) / modals (2000) (DESIGN.md §8.4.A z-table). */
  z-index: 1400;
}
/* v2.7.04: library spans full height under the topbar — the canvas-tab strip
   sits to its RIGHT (left:--left-w), not above it, so the library reclaims the
   strip band (user req: tabs must not squeeze the component library). */
#library {
  position: fixed;
  top: var(--topbar-h);
  bottom: 0;
  left: 0;
  width: var(--left-w);
  z-index: 10;
}
#res-l {
  position: fixed;
  top: var(--topbar-h);
  bottom: 0;
  left: var(--left-w);
  width: var(--resizer-w);
  z-index: 9;   /* over canvas, under dock-edge handle (11) */
}
/* #viewport is positioned in its own rule below (fixed inset:0, z:0). */

/* Collapsed state (shrink library to a 32px strip).
   v1: right panel removed — no --right-w / data-right-collapsed. */
body[data-left-collapsed="true"]  { --left-w:  var(--collapsed-w); }

/* ════════════════════════════════════════════════════════════════════
   Resizers  (vertical between panels, horizontal in inspector)
   ════════════════════════════════════════════════════════════════════ */

.resizer {
  position: relative;
  background: transparent;
  z-index: 6;
  transition: background 0.12s;
}
.resizer-v { cursor: col-resize; }
.resizer-h { cursor: row-resize; flex: 0 0 var(--resizer-w); }

.resizer::after {
  content: '';
  position: absolute;
  background: var(--line);
  transition: background 0.12s;
}
.resizer-v::after {
  top: 0; bottom: 0;
  left: 50%; width: 1px; transform: translateX(-50%);
}
.resizer-h::after {
  left: 0; right: 0;
  top: 50%; height: 1px; transform: translateY(-50%);
}

.resizer:hover, .resizer.active {
  background: var(--surface-3);
}
.resizer:hover::after, .resizer.active::after {
  background: var(--ink-1);
}

/* Hide resizers when adjacent panel collapsed (no point dragging) */
body[data-left-collapsed="true"]  #res-l { pointer-events: none; opacity: 0.35; }
body[data-right-collapsed="true"] #res-r { pointer-events: none; opacity: 0.35; }

/* ════════════════════════════════════════════════════════════════════
   Dock edge collapse handle + vertical strips (when collapsed)
   ────────────────────────────────────────────────────────────────────
   2026-05-29 (DESIGN.md §8.4 边缘折叠把手): the old in-header `.collapse-btn`
   moved out to a protruding rounded tab centered on the dock's right edge.
   Fixed at left:var(--left-w) so it tracks dock width / resize / collapse;
   solid (not glass) so the ‹ reads against the Canvas behind it.
   ════════════════════════════════════════════════════════════════════ */

.dock-edge-toggle {
  position: fixed;
  left: var(--left-w);
  /* vertically centered in the dock band (below topbar, down to the window
     edge). v2.7.04: library back to --topbar-h (tab strip moved to its right). */
  top: calc(var(--topbar-h) + (100vh - var(--topbar-h)) / 2);
  transform: translate(-50%, -50%);   /* straddle the 1px edge line */
  z-index: 11;                          /* above dock/resizer chrome (10), below panels */
  width: 20px;
  height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: var(--surface-2);
  border: 1px solid var(--line-1);
  border-radius: 999px;                 /* rounded pill */
  color: var(--ink-2-v1);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  /* colors transition; NOT `left` (would lag the cursor during resize drag) */
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}
.dock-edge-toggle-arrow {
  display: block;
  margin-top: -2px;   /* optical centering of the chevron glyph */
}
.dock-edge-toggle:hover {
  background: var(--surface-3);
  border-color: var(--ink-3-v1);
  color: var(--ink-1);
}
.dock-edge-toggle:active {
  background: var(--overlay-2);
}
.dock-edge-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--overlay-2);
}
/* Collapsed → hide the handle; the panel-strip is the expand affordance. */
body[data-left-collapsed="true"] .dock-edge-toggle { display: none; }

.panel-strip {
  display: none;
  width: 100%;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 14px 0;
  gap: 12px;
  background: var(--surface-2);
  border: none;
  border-right: 1px solid var(--line);
  cursor: pointer;
  font-family: var(--font-ui);
  color: var(--ink-2);
  transition: background 0.12s;
}

.panel-strip.strip-right {
  border-right: none;
  border-left: 1px solid var(--line);
}

.panel-strip:hover {
  background: var(--surface-2);
  color: var(--ink-1);
}

.strip-icon {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-1);
}

.strip-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.panel-strip:hover .strip-label { color: var(--ink-1); }

/* Show strip + hide everything else when collapsed */
body[data-left-collapsed="true"]  #library > *:not(.panel-strip),
body[data-right-collapsed="true"] #inspector > *:not(.panel-strip) {
  display: none !important;
}

body[data-left-collapsed="true"]  #library .panel-strip.strip-left,
body[data-right-collapsed="true"] #inspector .panel-strip.strip-right {
  display: flex;
}