/* Quiet surfaces: typography and spacing carry the identity, emerald marks state. */
body { background: var(--mineral-1000); }
body::before, body::after { content: none; }
.app-shell { position: relative; }
.wordmark strong { font-family: var(--font-display); line-height: 1.5; }
.brand-latin { color: var(--mineral-300); }
.brand-mark, .welcome-seal { background: none; box-shadow: none; }
.welcome-seal::after { content: none; }
.composer { background: var(--mineral-950); border-color: var(--border-strong); box-shadow: none; }
.composer:focus-within { border-color: var(--emerald-600); box-shadow: none; }
.send-button { box-shadow: none; }
.send-button:active { transform: scale(.96); }
.sessions-panel, .modal-card, .inspector, .model-picker { background: var(--mineral-900); backdrop-filter: none; box-shadow: none; }
.status-dot.active, .status-orb { animation: none; box-shadow: none; }
.global-header .menu-button { display: inline-flex; }
.global-header .brand { margin-inline-end: auto; }
.workspace-header > .project-pill { min-inline-size: 0; max-inline-size: 45%; padding-inline: var(--space-2); }
.workspace-header .project-pill + .thread-heading { flex: 1; }

.composer-toolbar { display: grid; grid-template-columns: var(--touch-target) minmax(0, 1fr); gap: var(--space-2); }
.composer-toolbar > .send-button { grid-column: 1; grid-row: 1; }
.composer-toolbar > .toolbar-group { grid-column: 2; grid-row: 1; justify-content: flex-end; gap: var(--space-2); }
.composer-toolbar > .runtime-controls { grid-column: 1 / -1; grid-row: 2; display: flex; gap: var(--space-2); }
.runtime-controls .model-control { flex: 1; margin: 0; }
#modelPickerButton { inline-size: 100%; justify-content: space-between; border-radius: var(--radius-md); }
#modelLabel { max-inline-size: none; min-inline-size: 0; }
.effort-control { min-inline-size: 0; max-inline-size: 45%; }
.effort-control select { font: inherit; font-size: var(--text-sm); color: var(--limestone-100); background: var(--mineral-950); border: 1px solid var(--border-mid); border-radius: var(--radius-md); min-block-size: var(--touch-target); inline-size: 100%; padding-inline: var(--space-2); }
.effort-control select:focus-visible { outline: 2px solid var(--emerald-300); }
.sr-only { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#activityDialog { max-block-size: max(var(--touch-target), calc(var(--viewport-height, 100dvh) - 14rem)); }
#activityDialog .agent-progress { display: block; }
#activityDialog .agent-progress ol { display: grid; overflow: visible; }
#activityDialog .agent-progress li { font-size: var(--text-sm); }
#activityDialog .live-work { max-block-size: none; overflow: visible; padding-inline: 0; }
#activityDialog .live-work pre { direction: ltr; text-align: start; }
.panel-backdrop { background: var(--mask-ink); }
@media (max-width: 900px) {
  .app-shell { position: fixed; }
  .workspace-header .thread-heading { display: none; }
  .workspace-header > .project-pill { flex: 1; max-inline-size: none; }
  .workspace-header .header-actions [data-action="toggle-inspector"] { display: none; }
  .model-picker:not(#activityDialog, #modelPicker, #limitsDialog, #conversationDialog, #queueDialog), .nav-rail, .sessions-panel, .inspector, .modal-card {
    inset-inline: 0; inset-block: var(--viewport-top, 0px) auto; inline-size: 100%;
    block-size: var(--viewport-height, 100dvh); max-block-size: var(--viewport-height, 100dvh);
    border-radius: 0; border: 0; margin: 0;
    padding-block-start: max(var(--space-3), env(safe-area-inset-top));
    padding-block-end: max(var(--space-3), env(safe-area-inset-bottom));
  }
  .modal-card { inset-block-start: 0; }
  .nav-rail, .sessions-panel, .inspector { z-index: var(--z-panel); }
  #activityDialog { inset-block-start: calc(var(--viewport-top, 0px) + max(var(--space-3), env(safe-area-inset-top))); }
  .compact-viewport .composer textarea { max-block-size: var(--touch-target); }
  .compact-viewport #modelLabel { max-inline-size: none; }
}