/* 27-desktop-shell.css — Desktop Studio · Rounds 1–2 · shell frame
   ─────────────────────────────────────────────────────────────────────
   Desktop revamp (founder, 2026-06-16). Inherit the design-handoff SHELL
   geometry without touching any component skin — cards, chips, chat
   background, and bubbles stay FROZEN (only their WIDTH / PLACEMENT moves).
     R1 — gold tapering panel seams + proportions (§1–2 below).
     R2 — composer row + chip strip share the 770 reading lane (§3).

   This file carries the GOLD TAPERING SEAMS only. The proportion changes are
   token re-values at their source, NOT overrides here:
     · --dt-left-w  260 → 320   (01-tokens.css, >=1440 base)
     · --dt-chat-max 680 → 770  (01-tokens.css)
     · 1280–1439 band 240/320 → 288/340 (13-responsive-home-overlays.css)
   (right rail --dt-right-w 360 already matches the handoff.)

   SEAMS — replace the flat cream 1px panel borders with the handoff's candle-
   gold edge-light that fades off at both ends (top bar bottom · left rail
   right · Song-Brain left). Implemented as ::after pseudo-edges; the existing
   borders are only colour-killed to transparent, so the 1px gap stays and the
   layout never shifts. The three panels are already positioned (each carries
   other absolute pseudos), so the seams anchor without adding position.

   Scope: desktop session only (>=1024px + body.session-active). Mobile and
   non-session desktop are untouched. Linked LAST in index.html so it wins the
   cascade at equal specificity — no !important.

   Plain static CSS — no prompts, schemas, or model-facing content
   (CLAUDE.md client-side rule). */

@media (min-width: 1024px) {

  /* Seam tokens — candle-gold edge-light, fades to nothing at the ends.
     New tokens (not overriding existing) so the token source stays clean.
     Mirrors the handoff's --tw-seam (rgba(200,160,80,0.28), 1px). */
  body.session-active {
    --dt-seam:   rgba(var(--gold-rgb),0.28);
    --dt-seam-w: 1px;
  }

  /* Kill the flat cream borders to transparent — keeps the 1px gap (no
     layout shift); the gold ::after seam paints over it. Each rule matches
     the 24-desktop-studio selector at equal specificity and loads later. */
  body.session-active #dtTopBar    { border-bottom-color: transparent; }
  body.session-active .tabbar      { border-right-color:  transparent; }
  body.session-active #v9SongBrain { border-left-color:   transparent; }

  /* Top bar — bottom seam, fades off left & right (90deg, 14% → 86%). */
  body.session-active #dtTopBar::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0;
    height: var(--dt-seam-w);
    background: linear-gradient(90deg, transparent 0%, var(--dt-seam) 14%, var(--dt-seam) 86%, transparent 100%);
    pointer-events: none; z-index: 2;
  }
  /* Left rail — right seam, fades off top & bottom (180deg, 22% → 78%). */
  body.session-active .tabbar::after {
    content: ""; position: absolute; top: 0; bottom: 0; right: 0;
    width: var(--dt-seam-w);
    background: linear-gradient(180deg, transparent 0%, var(--dt-seam) 22%, var(--dt-seam) 78%, transparent 100%);
    pointer-events: none; z-index: 2;
  }
  /* Song Brain — left seam, same vertical taper. */
  body.session-active #v9SongBrain::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: 0;
    width: var(--dt-seam-w);
    background: linear-gradient(180deg, transparent 0%, var(--dt-seam) 22%, var(--dt-seam) 78%, transparent 100%);
    pointer-events: none; z-index: 2;
  }

  /* ── 3 · READING LANE — composer + chips share the thread's width ──────
     R2 (founder, 2026-06-16). .v9-thread already centers at --dt-chat-max
     (13-responsive). Match the composer inner row + the chip strip to it so
     thread · chips · composer read as ONE centered lane (handoff
     .composer-inner = 760 centered). The full-width .v9-input-area shelf /
     blur is untouched — only its inner row + chips are constrained, so the
     bottom bar still spans the well like the handoff's composer-shell. */
  body.session-active .v9-input-row {
    max-width: var(--dt-chat-max);
    margin-left: auto; margin-right: auto;
  }
  /* Chips — on desktop they WRAP + CENTER under the composer instead of the
     mobile horizontal-scroll strip. Drop the right-edge scroll fade mask
     (09-chat-concepts) so a centered, wrapped row reads clean. Mobile keeps
     its scroll strip (this is session-desktop scoped). */
  body.session-active .v9-chip-strip {
    max-width: var(--dt-chat-max);
    margin-left: auto; margin-right: auto;
    flex-wrap: wrap;
    justify-content: center;
    overflow-x: visible;
    -webkit-mask-image: none; mask-image: none;
  }
}