apps/desktop/src/renderer/styles/shell-layout.css

/* Shell layout — app frame, 2-col shell, panels, topbar rail, resize handle, main column, workspace top actions. Relocated from sidebar.css — issue #546 PR3. */
.appFrame {
  height: 100dvh;
  width: 100%;
  padding: 0;
  /* PR-APPFRAME-FILL-0: `#root` (index.html) is `display:flex;
     align-items:center; justify-content:center` so the preload
     skeleton (`.maka-preload`, rendered before React mounts) sits
     centered. Once React mounts, `.appFrame` is that flex container's
     only child, and without an explicit main-axis size a flex item
     shrinks to its content width and gets centered — so on the
     first-run hero (onboarding content max-content ~680px) the whole
     app frame floated mid-window with large left/right gutters, while
     long-message sessions filled the width. Pin `width:100%` so the
     frame always spans the window regardless of inner content's
     max-content. The preload centering is unaffected (it's the only
     child at that point and still centers). */
  /* PR-CHAT-CHROME-FIX-1 (WAWQAQ msg `4a1b8c13`): the appFrame root
     was the LAST place still painting the 172deg "上面灰下面白"
     gradient — round-0 only killed the gradient on
     `.maka-shell-2col`, and the macOS rule put `shell` to
     `transparent`, so the appFrame gradient bled through and
     revived the visual WAWQAQ explicitly rejected. Keep this flat:
     the shell/backplate is neutral, while `.maka-panel-detail`
     paints the white content surface. */
  background: var(--surface-canvas);
  color: var(--foreground);
  font-size: var(--font-size-base);
  box-sizing: border-box;
}

.app {
  height: 100%;
}

.maka-shell-2col {
  --maka-sidebar-topbar-button-size: var(--h-control-sm);
  --maka-sidebar-topbar-gap: 8px;
  --maka-sidebar-exit-offset: calc(var(--space-2) * -1);
  /* Alignment governance, PIXEL-MEASURED (screencapture + centroid): the
     macOS traffic lights draw ~13.5pt tall with their optical center at
     y=20.75 — NOT the theoretical 20 (position 14 + 12/2). Icon glyphs
     centered at 19.8 read visibly high. top = safe-top - 16 puts the
     rail's compact buttons at center 21 (0.25px inside the lights'
     center — imperceptible, integer-safe). Keep in lockstep with
     --maka-workspace-top-actions-top. */
  --maka-sidebar-topbar-offset-y: calc(var(--maka-titlebar-control-safe-top) - 16px);
  --maka-sidebar-topbar-offset-x: calc(var(--maka-titlebar-control-safe-left) - 10px);
  --maka-sidebar-collapsed-topbar-inset: calc(
    var(--maka-sidebar-topbar-offset-x) + var(--maka-sidebar-topbar-button-size) +
      var(--maka-sidebar-topbar-button-size) + var(--maka-sidebar-topbar-button-size) +
      var(--maka-sidebar-topbar-gap) + var(--maka-sidebar-topbar-gap) + 8px
  );
  position: relative;
  display: grid;
  align-items: stretch;
  gap: 0;
  overflow: hidden;
  transition: grid-template-columns var(--duration-large) var(--ease-drawer);
  /* PR-CHAT-CHROME-FIX-0 (WAWQAQ msg `1e693dee` + `486b5611`):
     the shell used to carry a 172deg gradient from `--foreground-3`
     to `--background`. The session sidebar is transparent and
     showed the gradient through, so users saw "gray top, white
     bottom" on the sidebar — distracting, and also produced a
     visible seam where the gradient met the flat-white floating
     detail panel. Keep the shell flat neutral; no gradient or
     divider line. */
  background: var(--surface-canvas);
}

.app.maka-shell-2col {
  grid-template-columns:
    var(--maka-session-list-expanded-width)
    var(--maka-resize-handle-width, 0px)
    minmax(0, 1fr);
}

.app.maka-shell-2col[data-sidebar-state="collapsed"] {
  grid-template-columns:
    0px
    var(--maka-resize-handle-width, 0px)
    minmax(0, 1fr);
}

.maka-panel {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.maka-floating-panel {
  border: 0;
  border-radius: 0;
  background: var(--background);
  box-shadow: none;
}

.maka-panel-list.maka-floating-panel {
  border-right: 0;
  background: transparent;
  opacity: 1;
  transform: translateX(0);
  transition:
    opacity var(--duration-quick) var(--ease-out-strong),
    transform var(--duration-large) var(--ease-drawer);
}

.maka-shell-2col .maka-panel-list > .maka-session-panel {
  width: var(--maka-session-list-expanded-width);
}

.maka-panel-detail.maka-floating-panel {
  /* Right column = the workspace content surface (chat / module /
     artifact panes share it). Border and box-shadow already null'd by
     the base `.maka-floating-panel` rule above; only the geometry and
     layout-mode bits live here.
     PR-CHAT-CHROME-FIX-0 (WAWQAQ msg `486b5611`): symmetric `margin:
     4px` so all four sides have a gap and the radius reads as a real
     floating-card edge — was `4px 4px 4px 0` before.
     PR-CHAT-CHROME-FIX-1 (WAWQAQ msg `4a1b8c13`): "圆盘感觉不对劲，
     很不明显，尤其是下面的看都看不到" — 6px radius + 4px margin on
     a same-color surface had no visual handle for the eye. Bumped
     radius to 12px (matches reference's surface plate), added a soft
     drop-shadow so the curved edge actually reads against the sidebar
     translucent backdrop and the bottom corners are visible. The
     window's outer rounded chrome on macOS is ~10–12px; matching that
     reads as "card inside chrome" rather than "rectangle bleeding off
     the bottom". */
  margin: var(--space-1);
  border-radius: var(--radius-modal);
  background: var(--background);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  box-shadow:
    0 1px 3px oklch(from var(--foreground) l c h / 0.06),
    0 8px 24px oklch(from var(--foreground) l c h / 0.08);
}

.maka-shell-2col[data-sidebar-state="collapsed"] .maka-panel-list.maka-floating-panel {
  border-right: 0;
  opacity: 0;
  transform: translateX(var(--maka-sidebar-exit-offset));
}

.maka-shell-topbar-rail {
  position: absolute;
  z-index: var(--z-panel-action);
  top: var(--maka-sidebar-topbar-offset-y);
  left: var(--maka-sidebar-topbar-offset-x);
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: var(--maka-sidebar-topbar-gap);
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
  transition:
    opacity var(--duration-quick) var(--ease-out-strong),
    transform var(--duration-base) var(--ease-out-strong);
  -webkit-app-region: no-drag;
}

.maka-resize-handle {
  position: relative;
  width: var(--maka-resize-handle-width, 0px);
  box-sizing: content-box;
  padding-inline: var(--space-1);
  margin-inline: calc(var(--space-1) * -1);
  outline: none;
  cursor: col-resize;
  user-select: none;
  touch-action: none;
  background: transparent;
}

.maka-shell-2col[data-sidebar-state="collapsed"] .maka-resize-handle {
  pointer-events: none;
  cursor: default;
}

.maka-shell-2col[data-sidebar-state="collapsed"] .maka-resize-handle::after {
  display: none;
}

.maka-resize-handle::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 14px;
  bottom: 14px;
  width: 1px;
  border-radius: var(--radius-pill);
  background: transparent;
  transition: background var(--duration-quick) var(--ease-out-strong);
}

.maka-resize-handle:hover::after,
.isResizingColumns .maka-resize-handle::after {
  background: color-mix(in oklch, var(--foreground) 20%, var(--background));
}

/* Keyboard-focused separator: replace the suppressed native outline with a
   visible accent ring on the pseudo-element. Hover styling intentionally
   overrides via cascade order. */
.maka-resize-handle:focus-visible::after {
  background: var(--ring);
  width: 1px;
  left: 4px;
}

.isResizingColumns {
  cursor: col-resize;
  user-select: none;
}

.isResizingColumns .maka-shell-2col {
  transition: none;
}

.maka-shell-2col:has(> .maka-resize-handle:focus) {
  transition: none;
}

.mainColumn {
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
  background: transparent;
}

.mainColumn[data-home-surface="true"] {
  grid-template-rows: minmax(0, 1fr) auto;
  align-content: stretch;
  padding-bottom: 0;
}

.mainColumn[data-home-surface="true"] .maka-main,
.mainColumn[data-home-surface="true"] .maka-chat-shell,
.mainColumn[data-home-surface="true"] .messages {
  flex: 1 1 auto;
  min-height: 0;
}

.mainColumn[data-home-surface="true"] .maka-chatViewport {
  height: 100%;
}

.mainColumn[data-home-surface="true"] .maka-chatContent {
  min-height: 100%;
  box-sizing: border-box;
  padding: clamp(var(--space-16), 10vh, 116px) 0 clamp(var(--space-5), 4vh, var(--space-10));
  display: grid;
  gap: 0;
  align-content: center;
}

.maka-workspace-top-actions {
  -webkit-app-region: no-drag;
  position: absolute;
  /* PR-FE-BUG-HUNT-9 (kenji audit reminder 9, finding #4):
     was bare `z-index: 4`. Tokenized to `--z-panel-action`.
     Identical visual stacking, but referenceable + contract-locked. */
  z-index: var(--z-panel-action);
  /* Same baseline; 17px correction = 12px half-icon + 5px detail-panel
     inset. Tokenized in maka-tokens.css so the chat status row can
     share the toolbar's right edge without duplicating the value. */
  top: var(--maka-workspace-top-actions-top);
  right: var(--maka-workspace-top-actions-right);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  color: var(--foreground-secondary);
}

.maka-panel-detail[data-agents-view="skills"] .maka-workspace-top-actions,
.maka-panel-detail[data-agents-view="cron"] .maka-workspace-top-actions,
.maka-panel-detail[data-agents-view="daily-review"] .maka-workspace-top-actions {
  display: none;
}

.maka-titlebar-action,
.maka-titlebar-action * {
  -webkit-app-region: no-drag;
}