apps/desktop/src/renderer/reference-shell.css

/* target-layout shell rebuild.
   Hand-authored from a historical reference implementation extract; do not paste
   reference implementation compiled CSS or brand assets here. */

:root {
  /* Agents layout-shell locals only. The color-system tokens this shell once
     referenced (--color-bg-container / --color-border-tertiary /
     --color-text-quaternary) were consolidated into maka-tokens.css alongside
     the --background family they alias; the dead --color-* / --color-fill-* /
     settings-nav strata were removed (Round C, zero consumers). See the token
     README at the top of maka-tokens.css. */

  /* Flat neutral shell/backplate. This must never be a gradient; the
     white content surface reads through radius + shadow on top. */
  --agents-layout-bg: var(--surface-canvas);
  --agents-content-area-bg: var(--color-bg-container);
  /* reference layout-derived values (2026-06-20 WAWQAQ ef6b2852).
     The original 8px/12px we shipped at 7013f0f read too loose vs the
     real bundle's 4px gap + 6px radius.
     PR-CHAT-CHROME-FIX-1 (WAWQAQ msg `4a1b8c13`): bumped radius
     6 → 12 so the floating surface's bottom corners actually read.
     6px was geometrically present but optically invisible against a
     same-color shell. */
  --agents-content-area-gap: 4px;
}

[data-agents-page] {
  --sidebar-width: 240px;
  position: relative;
}

.agents-layout-root {
  height: 100dvh;
  background: var(--agents-layout-bg);
}

.agents-layout-body {
  min-height: 0;
}

/* Justified: the Agents shell reuses shared sidebar/session-panel primitives,
   but this surface must read as a transparent rail. Keep these `!important`
   resets until the primitive chrome is split from layout. */
.agents-sidebar {
  background: transparent !important;
  contain: layout paint style;
  flex-shrink: 0;
}

.agents-sidebar[data-resizing="true"] {
  box-shadow: none !important;
}

.agents-layout-root aside[data-settings-nav-column].agents-sidebar > div {
  background: transparent;
}

.maka-session-panel.agents-sidebar {
  background: transparent !important;
  contain: layout paint style;
}

.agents-content-area {
  flex: 1 1 auto;
  /* PR-CHAT-CHROME-FIX-0 (WAWQAQ msg `486b5611`): zero left
     margin made the content card butt up against the sidebar;
     gradient-meets-flat seam read as a visible border line. The
     panel is a floating card — give it a left gap too. */
  margin: var(--agents-content-area-gap);
  border-radius: var(--radius-modal);
  background: var(--agents-content-area-bg);
  transition: margin-left var(--duration-base) var(--ease-out-strong);
}

/* PR-SETTINGS-RESTORE-SURFACE-0 (WAWQAQ msg `c8dc03e4`): main chat
   pane was rendering with a 1px border that read as a seam between
   sidebar and content. Drop the border on the floating panel
   variant; keep the surface plate (bg + radius + margin) so content
   still reads as its own canvas. */
.maka-panel-detail.maka-floating-panel.agents-content-area {
  position: relative;
  /* PR-CHAT-CHROME-FIX-0 (WAWQAQ msg `486b5611`): symmetric margin
     so the floating card has a left gap too — see the matching
     change in `styles.css` `.maka-panel-detail.maka-floating-panel`. */
  margin: var(--agents-content-area-gap);
  border: 0;
  border-radius: var(--radius-modal);
  background: var(--agents-content-area-bg);
  box-shadow: none;
}

/* Designer audit P1-6: in dark mode the canvas (l≈0.14) and the content
   card (l≈0.24) sit close enough that the floating-card edge disappears —
   the light theme's whole surface hierarchy collapsed to one murk. A 1px
   inner top-light hairline gives the eye a physical edge without pushing
   the canvas darker. Light mode keeps box-shadow: none (the lightness gap
   already reads there). */
.dark .maka-panel-detail.maka-floating-panel.agents-content-area {
  box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.07);
}

/* `.agents-parchment-paper-surface` is reused by the composer body. The bare
   class drops its border so the content area doesn't double up with the
   floating-panel rule above; the composer re-establishes its own card chrome
   on top (see `.composer .maka-composer-inner` in styles/composer.css). */
.agents-parchment-paper-surface {
  border: 0;
  background-color: var(--agents-content-area-bg);
  box-shadow: none;
}

.agents-chat-panel {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

.agents-chat-view-root {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

.agents-inner-view-clamp {
  width: min(100%, 1024px);
  margin-inline: auto;
}