/* ==========================================================================
   Orcheum · Chat Empty State (New Chat)
   Source of truth: Figma nodes 408:4861 (composition), 408:4865 (AI Chatbox),
   The centered greeting and canonical prompt box.
   ========================================================================== */

.ws-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 100%;
  max-width: 760px;
}

/* ---- Greeting ----
   Editorial masthead, the same voice as the Studios introduction: a quiet
   uppercase label, then the question set in the canonical serif. Landing →
   Home → Studios → Research now open in one typeface. */
.ws-empty__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.ws-empty__title {
  margin: 0;
  font-family: var(--font-editorial);
  font-weight: var(--font-weight-normal);
  font-size: clamp(30px, 4.4vw, 40px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--color-foreground);
}
.ws-empty__title em {
  font-style: italic;
  color: var(--color-text-secondary);
}

/* The welcome, stepped down to an eyebrow. Figma sets it at the question's own
   36px, but the two lines are both greetings and at equal weight they read as
   a proclamation — fine once, wearing on the twentieth visit of the day. Small
   and quiet, it does what it is actually for: says your name, then gets out of
   the way of the question. Sans, not serif, so it reads as a label rather than
   competing with the display line under it. */
.ws-empty__eyebrow {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: var(--font-weight-medium, 500);
  line-height: 1.3;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.ws-empty__eyebrow em {
  font-style: normal;
  color: var(--color-foreground);
}
.ws-empty__eyebrow[hidden] { display: none; }

/* The Sun, set as punctuation — Figma 576:1868 / 615:2635. The same mark as
   the brand (Amendment 006), reused at text scale rather than redrawn: the
   canonical asset carries its own inner and drop shadow, so it reads as the
   logo, not a bullet. 0.5em box → a 0.46em disc (≈16.6px against the 36px
   question), and it scales with the line at every breakpoint. Sits on the
   baseline the way the "?" does. */
.ws-empty__sun {
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  margin-left: 0.01em;
  vertical-align: -0.1em;
}

/* ---- Universal Composer — Figma 652:4165 ------------------------------- */
.ws-composer-host {
  width: 100%;
  max-width: 720px;
  margin-bottom: 0;
  /* The rails are absolutely positioned inside the composer and open downward
     over whatever follows. Source order alone would let the openings — a later
     sibling — paint over them. This settles it explicitly, so the discs are on
     top for the whole of the fade rather than tangled with the cards halfway
     through it. */
  position: relative;
  z-index: 2;
}

.ws-composer-host .oc-composer {
  min-height: 144px;
}

@media (max-width: 560px) {
  .ws-empty__title { font-size: 28px; }
}

/* ---- Entrance reveal -------------------------------------------------
   The composition arrives top-down in the order you read it: the greeting,
   then the composer it invites you into. Same
   curve and shape as the auth page's reveal (auth-layout.css) so the two
   entrances feel like one product.

   Pure CSS on first paint, matching auth's reasoning: no JS to fire, and
   nothing can be left stuck invisible if a script fails. `both` holds the
   from-state through the delay so nothing flashes in at full opacity first.

   These two are the empty state's own elements. The composer is mounted into
   its host, and its internals belong to composer.css. The host is in the DOM at
   parse time and the component mounts in the
   same synchronous pass, so the reveal never plays against an empty box. */
@keyframes ws-empty-in {
  from { opacity: 0; transform: translate3d(0, 12px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

.ws-empty__heading {
  animation: ws-empty-in 700ms cubic-bezier(0.215, 0.61, 0.355, 1) 90ms both;
}
.ws-composer-host {
  animation: ws-empty-in 700ms cubic-bezier(0.215, 0.61, 0.355, 1) 190ms both;
}
/* tokens.css already collapses every animation under this setting; these are
   explicit for the same reason auth-layout.css is — the reveal must not depend
   on a token file to stay accessible. */
@media (prefers-reduced-motion: reduce) {
  .ws-empty__heading,
  .ws-composer-host {
    animation: none !important;
  }
}

/* ══ The openings ══════════════════════════════════════════════════════════
   Four ways in, under the composer. They live in this sheet rather than a
   sheet of their own because they are beat three of the entrance cascade at
   the foot of this file — the greeting, the composer it invites you into, and
   then the four things you could say in it.

   NOT a bento, deliberately. A bento's varied tile sizes create hierarchy —
   "this one matters more" — and on a blank slate nothing does yet; it would be
   inventing importance the page does not have. Four equal cards, one row of
   two by two, sharing the composer's 720px column so the whole composition
   reads as one object rather than a page with a widget under it. The composer
   stays the hero: these are quieter than it in size, weight and colour, and
   they feed it rather than compete with it.
   ========================================================================== */

.ws-openings {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  max-width: 720px;
  /* Plus the 14px column gap above = 26px. Close enough to read as attached to
     the composer, far enough not to look like part of it. */
  margin-top: 12px;
}

.ws-opening {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  padding: 14px 16px;
  /* The same warm hairline and paper the Studios bento cells use, so the four
     ways-in read as the same family of surface as a Studio door — quieter,
     because they sit under the composer, not beside it. */
  border: 1px solid rgba(36, 37, 45, 0.1);
  border-radius: 14px;
  background: #fdfaf3;
  font-family: var(--font-sans);
  text-align: left;
  cursor: pointer;
  transition:
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Each Studio's own light, as a single dot. A glyph here would be a second
   icon system competing with the pockets in the Studios room; one disc says
   the same thing more quietly, and four different lights read as range at a
   glance — which is the entire argument this row is making.

   These five values are the `--se-glow-*` set from
   components/studio/studios-entry.css. Duplicated on purpose rather than
   promoted to the token layer in passing: where the Studio colours live is a
   decision that deserves its own pass, not a ride-along. Logged as TD-017. */
.ws-opening__dot {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--ws-opening-tint, #fc9b4c);
}
/* The Studios bento hues (studios-entry.js ROOMS). One product, one palette. */
.ws-opening[data-tint="research"]     { --ws-opening-tint: #3d5a74; }
.ws-opening[data-tint="design"]       { --ws-opening-tint: #9a6634; }
.ws-opening[data-tint="architecture"] { --ws-opening-tint: #a1584a; }
.ws-opening[data-tint="code"]         { --ws-opening-tint: #6f6d3f; }
.ws-opening[data-tint="motion"]       { --ws-opening-tint: #586066; }

.ws-opening__studio {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.02em;
  color: var(--color-text-secondary);
}

.ws-opening__text {
  font-size: 13.5px;
  font-weight: var(--font-weight-normal);
  line-height: 1.35;
  color: var(--color-foreground);
}

@media (hover: hover) {
  .ws-opening:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--ws-opening-tint) 34%, rgba(36, 37, 45, 0.1));
    background: #ffffff;
    box-shadow: 0 1px 0 rgba(36, 37, 45, 0.03), 0 14px 30px -24px rgba(36, 37, 45, 0.4);
  }
  .ws-opening:hover .ws-opening__text { color: var(--color-foreground); }
}
.ws-opening:active { transform: translateY(0); }
.ws-opening:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--ws-opening-tint) 55%, transparent);
  box-shadow: 0 0 0 2px var(--color-background, #fbf7ef),
    0 0 0 4px color-mix(in srgb, var(--ws-opening-tint) 55%, transparent);
}

/* Beat three of the cascade above. */
/* Beat three of the cascade — on the SLOT, not on the row itself. The row has
   to stay free to animate its own opacity when a composer rail opens over it,
   and `animation-fill-mode: both` holds its end values forever, which would
   outrank any transition on the same properties. One element per job. */
.ws-openings-slot {
  width: 100%;
  animation: ws-empty-in 700ms cubic-bezier(0.215, 0.61, 0.355, 1) 290ms both;
}

/* ---- Yielding to the composer's rails ------------------------------------
   The attach and tools rails open on hover and drop *downward*, absolutely
   positioned, so the bar itself never jumps. That was free while an engraving
   was the only thing underneath. It is not free now: the discs land exactly
   where the openings are, and two stacks of round buttons over four cards is
   the mess in the screenshot.

   So the openings step back while a rail is open. This is the right way round
   rather than a compromise — reaching for attachments or tools means you have
   already chosen to use the composer, and at that moment a list of things you
   *could* have asked is no longer helping. The rail needs precisely that
   space, and it gets it. */
.ws-openings {
  transition:
    opacity 0.2s var(--ease-standard, ease),
    transform 0.2s var(--ease-standard, ease);
}

.ws-empty:has(.oc-composer__rail.is-open) .ws-openings {
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
}

@media (max-width: 560px) {
  .ws-openings { grid-template-columns: 1fr; }
  /* One column would otherwise run to eight rows of reading on a phone. */
  .ws-opening:nth-child(n + 3) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ws-openings-slot { animation: none !important; }
  .ws-opening { transition: none; }
  .ws-opening:hover { transform: none; }
  /* The yield still happens — it has to, or the rail lands on the cards. It
     just happens without travel. */
  .ws-openings { transition: opacity 0.2s linear; }
  .ws-empty:has(.oc-composer__rail.is-open) .ws-openings { transform: none; }
}