/* ==========================================================================
   Orcheum · Workspace Shell
   Source of truth: Figma node 576:1781 ("New Chat - Default").
   The overall frame is a single row: sidebar (fixed) + main content (fluid),
   both full height. There is no navbar — the Share/account pair floats over
   main's top-right corner. Reusable — namespaced .ws-*.

   Figma draws this frame at 0.845 scale (sidebar 250 = our 296; the artboard
   is a 1512px MacBook), so every measurement below is the design value ÷ 0.845.
   ========================================================================== */

.ws {
  position: relative;              /* anchors .ws-topbar */
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  min-height: 0;
  overflow: hidden;
  /* The page is no longer flat cream. It warms downward into the peach the
     brand's sun sits in. The sidebar is translucent over this
     (workspace-sidebar.css), so the same light runs behind the whole frame
     rather than stopping at a panel edge.

     The stops are Figma 576:1781's own and neither is at an edge: cream holds
     flat to 11.71%, and #ffe2ca is placed at 186.31% — almost a full frame
     BELOW the fold. So the page never actually reaches that peach; at the
     bottom edge it is only ~51% of the way there, landing near #fdecdc. That
     is the point — the warmth is the start of a longer gradient the frame
     crops, which is why it reads as light rather than as a colour wash.
     Keep the stops verbatim; "tidying" them to 0%/100% doubles the tint. */
  background: linear-gradient(180deg, #fbf7ef 11.71%, #ffe2ca 186.31%);
  color: var(--color-foreground);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  /* Composer surface — Figma 615:2476. On a warm page the old cool card fill
     read as a grey patch, so the chatbox is now the page's own cream. Scoped
     to .ws so the landing and auth composers keep their own surfaces.

     The stroke stays: this cut of the design puts a 0.845px card/border back
     on the chatbox, which is already the shared component's idle colour — so
     the override is only the fill, and hover/focus/error keep working off the
     default. */
  --oc-composer-cream: #fbf7ef;
}

/* The card composer owns its own geometry (Figma 652:4165). Host only places
   it — the previous rule here stripped padding, radius, fill and lift, which
   was correct when the composer was a bare pill whose only surface was the
   field inside it. The card IS the surface now, so stripping those would erase
   the component. Placement only from here on. */

/* ---- Floating actions — Figma 576:1800 --------------------------------
   Share + account, 20/10.5 from the main column's top-right corner. Anchored
   to .ws rather than .ws-main because main's right edge *is* the page's right
   edge, and .ws-main has `overflow: hidden`. */
.ws-topbar {
  position: absolute;
  top: 24px;
  right: 12px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* These float over main instead of sitting in a bar that reserves height, so
   nothing below them is pushed down. The empty state clears them on its own,
   but the reading column does not: past ~1100px wide it passes beside the
   controls, and under that it runs straight into them — a conversation would
   open its first turn beneath the Share button. Scrolled content still travels
   under them (that is what a floating control is for); only the resting top of
   the thread needs the clearance. */
.ws-main.is-conversation .ws-thread { padding-top: 64px; }

.ws *,
.ws *::before,
.ws *::after { box-sizing: border-box; }

/* Body row: sidebar + main */
.ws__body {
  display: flex;
  flex: 1 0 0;
  min-height: 0;
  width: 100%;
}

/* Main content region — hosts the centered empty state + Spectre backdrop */
.ws-main {
  position: relative;
  flex: 1 0 0;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.ws-main__scroll {
  position: relative;
  z-index: 1;
  flex: 1 0 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: visible;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Figma put the composition's top edge at 29.8% of the frame height rather
     than at the optical centre, and this bottom padding is what held it there.
     That asymmetry was in service of the engraving: the composition sat high
     so the artwork had the lower half to itself.

     The engraving is gone and the openings occupy that half now — as content,
     inside the composition, not behind it. So the block is taller and the
     reserve below it is no longer doing a job. Relaxed rather than removed:
     the composition still sits a little above centre, because optical centring
     always does, but it no longer floats over a void. Composer rails overlay
     downward (absolute), so centering is safe and the bar does not jump. */
  padding: 48px 24px clamp(48px, 10vh, 112px);
}

/* The Spectre glow that used to sit here is gone. In Figma 576:1782 the
   "Spectre" frame is five fully transparent Glass panels — it paints nothing,
   because the warmth is now the page gradient's job (see .ws above), top to
   bottom, instead of a blob behind the composer.

   Keeping it was actively wrong once the page stopped being flat cream: the
   asset's baked-in cream matched a flat #fbf7ef but not a gradient, so its
   rectangle became visible as a seam across the lower third — the exact
   failure its own comment described. One warm light, one source. */

/* ---- The lower half — Figma 622:1955, retired ------------------------
   This column used to carry an engraving of two hands reaching for each
   other, watermarked across the lower half. It is gone, and its rules with
   it. Two reasons, and the second is the real one:

     1. The plate read as a Creation-of-Adam quote and pulled the page into a
        religious register — the same objection that already retired it from
        the landing (assets/landing/engravings/ASSET_PROVENANCE.md).
     2. It filled the space rather than using it. A new reader arriving at an
        empty workspace needs a way in, not a watermark; atmosphere is not an
        answer to "what can I do here?".

   What stands there now is `.ws-openings` — four real prompts, one per kind
   of work — and it lives with the empty state it belongs to, in
   components/chat/chat-empty-state.css. */

/* The composer surface override lives on .ws at the top of this file — the
   workspace's composer is cream on a warm page, which the shared default
   (card/background) is not. Page-glow rules above are workspace-specific. */

@media (max-width: 820px) {
  .ws-main__scroll { padding: 40px 18px 56px; }
}

/* ---- View switching ------------------------------------------------------
   Which surface is visible is decided here, in CSS, not by inline styles:
   `.is-conversation` (orchestration.css) already owns thread/dock/empty-state,
   and inline display would override it — and can never be undone by a class.
   `.is-projects` puts the whole chat surface to sleep and shows the
   Projects Directory instead. */
.ws-projects-index-container,
.ws-artifacts-index-container,
.ws-settings-container,
.ws-studios-container,
.ws-project-content-container {
  display: none;
  width: 100%;
  height: 100%;
  overflow-y: auto;
}

.ws-main.is-projects .ws-projects-index-container { display: block; }
.ws-main.is-artifacts .ws-artifacts-index-container { display: block; }
.ws-main.is-settings .ws-settings-container { display: block; }
.ws-main.is-studios .ws-studios-container { display: block; }

/* Design Studio outcome fills the Studios surface edge-to-edge. */
.ws-main.is-studios:has(.se.is-research-outcome),
.ws-main.is-studios:has(.se.is-design-outcome) {
  background: #fbf7ef;
}
.ws-main.is-studios:has(.se.is-research-outcome),
.ws-main.is-studios:has(.se.is-research-outcome) .ws-studios-container,
.ws-main.is-studios:has(.se.is-research-outcome) .se {
  background: #faf9f6;
}
.ws-main.is-studios:has(.se.is-research-outcome) .ws-studios-container,
.ws-main.is-studios:has(.se.is-design-outcome) .ws-studios-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  z-index: 2;
  background: #fbf7ef;
}
.ws-main.is-studios:has(.se.is-research-outcome) .se,
.ws-main.is-studios:has(.se.is-research-outcome) .se.is-research-outcome,
.ws-main.is-studios:has(.se.is-design-outcome) .se,
.ws-main.is-studios:has(.se.is-design-outcome) .se.is-design-outcome {
  width: 100%;
  max-width: none;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #fbf7ef;
}
/* Global Share/avatar float over main; hide for Design outcome so nothing
   protrudes into or outside the full-page Studio layout. */
.ws:has(.se.is-research-outcome) .ws-topbar,
.ws:has(.se.is-design-outcome) .ws-topbar {
  display: none !important;
}
.ws-main.is-project-content .ws-project-content-container { display: block; }

/* `is-projects` is a top-level view; `is-conversation` / `is-workspace` are the
   chat surface's own state and stay on .ws-main so returning to chat restores
   the open conversation. Both therefore apply at once, and orchestration.css /
   project-workspace.css load later at equal specificity — without !important
   they win and the conversation renders above the directory. The mode has to
   outrank the state it suspends, so these are deliberate. */
.ws-main.is-projects .ws-main__scroll,
.ws-main.is-projects .ws-conversation,
.ws-main.is-projects .ws-thread,
.ws-main.is-projects .ws-composer-dock,
.ws-main.is-projects .ws-project,
.ws-main.is-artifacts .ws-main__scroll,
.ws-main.is-artifacts .ws-conversation,
.ws-main.is-artifacts .ws-thread,
.ws-main.is-artifacts .ws-composer-dock,
.ws-main.is-artifacts .ws-project,
.ws-main.is-settings .ws-main__scroll,
.ws-main.is-settings .ws-conversation,
.ws-main.is-settings .ws-thread,
.ws-main.is-settings .ws-composer-dock,
.ws-main.is-settings .ws-project,
.ws-main.is-studios .ws-main__scroll,
.ws-main.is-studios .ws-conversation,
.ws-main.is-studios .ws-thread,
.ws-main.is-studios .ws-composer-dock,
.ws-main.is-studios .ws-project,
.ws-main.is-project-content .ws-main__scroll,
.ws-main.is-project-content .ws-conversation,
.ws-main.is-project-content .ws-thread,
.ws-main.is-project-content .ws-composer-dock,
.ws-main.is-project-content .ws-project { display: none !important; }

.ws-settings {
  width: min(100% - calc(var(--space-6) * 2), calc(var(--space-10) * 18));
  margin: 0 auto;
  padding: var(--space-10) 0;
  font-family: var(--font-sans);
}
.ws-settings h1 { margin: 0; font-family: var(--font-serif); font-size: var(--text-4xl); font-weight: var(--font-weight-normal); }
.ws-settings p { margin: var(--space-3) 0 0; color: var(--color-text-secondary); font-size: var(--text-sm); line-height: var(--leading-normal); }