/* Loading uses the shared shell viewport, independent of each workspace's
   palette, content padding, document height and retained scroll position. */
:root {
  --workspace-loading-canvas: #eef2f3;
  --workspace-loading-chrome-height: 60px;
  --workspace-loading-sidebar: 136px;
  --workspace-loading-frame-gap: 12px;
  --workspace-loading-shell-radius: 10px;
}
/* First HTML paint and React startup share the same frame as the ready shell. */
.workspace-loading-bootstrap {
  position: fixed; inset: 0; z-index: 1100; isolation: isolate;
  background: #91bffb;
}
.workspace-loading-bootstrap::before {
  content: ''; position: absolute;
  inset: var(--workspace-loading-frame-gap) auto var(--workspace-loading-frame-gap) var(--workspace-loading-frame-gap);
  width: var(--workspace-loading-sidebar); background: #1945ad;
  border-radius: var(--workspace-loading-shell-radius) 0 0 var(--workspace-loading-shell-radius);
}
.workspace-loading-canvas {
  position: absolute;
  inset: var(--workspace-loading-frame-gap) var(--workspace-loading-frame-gap) var(--workspace-loading-frame-gap) calc(var(--workspace-loading-frame-gap) + var(--workspace-loading-sidebar));
  background: var(--workspace-loading-canvas);
  border-radius: 0 var(--workspace-loading-shell-radius) var(--workspace-loading-shell-radius) 0;
}
.workspace-loading-region {
  position: absolute;
  top: max(var(--workspace-loading-frame-gap), min(calc(var(--workspace-loading-frame-gap) + var(--workspace-loading-chrome-height)), calc(100dvh - var(--workspace-loading-frame-gap) - 90px)));
  right: var(--workspace-loading-frame-gap); bottom: var(--workspace-loading-frame-gap);
  left: calc(var(--workspace-loading-frame-gap) + var(--workspace-loading-sidebar));
  overflow: clip; border-radius: 0 0 var(--workspace-loading-shell-radius) 0;
}
body.workspace-fold-shell[data-workspace-loading] .workspace-shell-backdrop,
body.workspace-fold-shell[data-workspace-loading] #shared-workbench-chrome > .utility {
  background: var(--workspace-loading-canvas) !important;
  backdrop-filter: none;
}
body.workspace-fold-shell[data-workspace-loading] #shared-workbench-chrome > .frozen-layer { visibility: hidden; }
/* The outer canvas belongs to the shell, never to the folding visual copies. */
.workspace-shell-backdrop {
  position: fixed; z-index: 0; pointer-events: none;
  top: calc(var(--notice-height, 0px) + var(--ui4-frame-gap, 12px));
  left: calc(var(--ui4-frame-gap, 12px) + var(--sidebar-width, 136px));
  right: var(--ui4-frame-gap, 12px); bottom: var(--ui4-frame-gap, 12px);
  border-radius: 0 var(--ui4-shell-radius, 14px) var(--ui4-shell-radius, 14px) 0;
  background: var(--ui4-canvas, #eef2f3);
  transition: none !important; animation: none !important; transform: none !important;
}
body.workspace-fold-shell .app { position: relative; z-index: 1; background: transparent !important; }
body.workspace-fold-shell .main { background: transparent !important; }
@media (max-width: 1279px) {
  :root { --workspace-loading-sidebar: 72px; }
}
@media (max-width: 767px) {
  :root {
    --workspace-loading-chrome-height: 114px;
    --workspace-loading-sidebar: 0px;
    --workspace-loading-frame-gap: 9px;
    --workspace-loading-shell-radius: 8px;
  }
  .workspace-loading-canvas { border-radius: var(--workspace-loading-shell-radius); }
  .workspace-loading-region { border-bottom-left-radius: var(--workspace-loading-shell-radius); }
  .workspace-shell-backdrop { left: var(--ui4-frame-gap, 12px); border-radius: var(--ui4-shell-radius, 14px); }
}
.workspace-fold-stage {
  position: fixed; z-index: 48; overflow: clip; isolation: isolate;
  perspective: 1500px; background: transparent;
  border: 0; border-radius: 0 0 var(--ui4-shell-radius, 10px) 0; contain: layout paint;
}
.workspace-fold-stage[hidden] { display: none !important; }
.workspace-fold-wing {
  position: absolute; top: 0; bottom: 0; width: 50%; overflow: clip;
  transform-style: preserve-3d; backface-visibility: hidden;
  background: transparent; will-change: transform, opacity;
}
.workspace-fold-wing:first-child { left: 0; transform-origin: 100% 50%; }
.workspace-fold-wing:nth-child(2) { left: 50%; transform-origin: 0 50%; }
.workspace-fold-copy { position: absolute !important; margin: 0 !important; animation: none !important; pointer-events: none !important; }
.workspace-fold-copy *, .workspace-fold-copy *::before, .workspace-fold-copy *::after { animation: none !important; transition: none !important; caret-color: transparent !important; }
.workspace-fold-status { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px; align-items: center; justify-content: center; color: #1945ad; background: var(--workspace-loading-canvas, #eef2f3); font: 400 13px/1.5 var(--nova-font-ui, sans-serif); text-align: center; padding: 24px; }
.workspace-fold-status[hidden] { display: none; }
.workspace-fold-status:focus { outline: none; }
.workspace-fold-spine { position: relative; height: min(22vh, 150px); width: 2px; background: #a8c5f5; margin-bottom: 12px; }
.workspace-fold-spine::after { content: '✦'; position: absolute; top: 40%; left: calc(50% - .5em); width: 1em; font-size: 26px; font-style: normal; line-height: 1; text-align: center; color: #2463e7; animation: workspace-fold-read 1.2s ease-in-out infinite alternate; }
.workspace-fold-status h2 { font: 700 18px/1.4 var(--nova-font-ui, sans-serif); margin: 0; }
.workspace-fold-status p { font: inherit; margin: 0; max-width: 34em; }
.workspace-loading-progress { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.workspace-fold-actions { display: flex; gap: 10px; }
.workspace-fold-actions[hidden], .workspace-fold-actions button[hidden] { display: none !important; }
.workspace-fold-actions button { border: 1px solid #9abced; background: #fff; color: #1945ad; border-radius: 7px; padding: 9px 16px; font: inherit; cursor: pointer; }
.workspace-fold-actions button:focus-visible { outline: 2px solid #2463e7; outline-offset: 3px; }
.workspace-fold-stage.is-error .workspace-fold-spine::after,
.workspace-loading-bootstrap.is-error .workspace-fold-spine::after { animation: none; }
.workspace-fold-stage.is-reduced .workspace-fold-spine::after,
.workspace-loading-bootstrap.is-reduced .workspace-fold-spine::after { animation: none; }
/* Keep layout and the live React/static instances while the visual leaves turn. */
.main[data-workspace-phase] { transition: none !important; }
.main[data-workspace-busy] { pointer-events: none; visibility: hidden !important; }
@keyframes workspace-fold-read { from { transform: translateY(-22px); } to { transform: translateY(22px); } }
@media (max-height: 520px) {
  .workspace-fold-status { gap: 6px; padding: 10px; }
  .workspace-fold-spine { height: 36px; margin-bottom: 2px; }
  .workspace-fold-status h2 { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .workspace-fold-spine::after { animation: none; } }
@media (max-width: 767px) { .workspace-fold-stage { border-bottom-left-radius: var(--ui4-shell-radius, 8px); } }