/* Shared workspace surfaces. Keep terminal/ANSI colors independent of UI themes. */
:root {
  color-scheme: light;
  --workspace-bar-height: 57px;
  --sidebar-bg: #edf0f4;
  --hover-bg: #f0f4f8;
  --selected-bg: #eaf1fb;
  --selected-line: #7798bf;
  --subtle-bg: #e9edf2;
  --unread-bg: #fff7eb;
  --unread-line: #bb7b2e;
  --success-line: #88b89d;
  --danger-line: #c58d8d;
  --button-bg: #1d4f91;
  --button-text: #ffffff;
  --focus: #1d4f91;
  --radius: 8px;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #14171c;
  --panel: #1c2128;
  --panel-muted: #20262e;
  --sidebar-bg: #181d23;
  --line: #363e49;
  --line-strong: #677383;
  --text: #e7ebf0;
  --text-muted: #aeb8c6;
  --primary: #9bc4ff;
  --primary-soft: #23364d;
  --success: #9bd8b5;
  --success-soft: #203a2d;
  --warning: #ecc58c;
  --warning-soft: #3c3020;
  --danger: #ffb2b2;
  --danger-soft: #40272c;
  --hover-bg: #262d36;
  --selected-bg: #23364d;
  --selected-line: #709ac8;
  --subtle-bg: #2c333e;
  --unread-bg: #30291f;
  --unread-line: #c59a59;
  --success-line: #528064;
  --danger-line: #9e686e;
  --button-bg: #9bc4ff;
  --button-text: #15253b;
  --focus: #a6ceff;
  --shadow: 0 1px 2px rgb(0 0 0 / 18%);
}
html { scroll-padding-top: calc(var(--workspace-bar-height) + 16px); }
[hidden] { display: none !important; }
body { line-height: 1.45; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
input::placeholder, textarea::placeholder { color: var(--text-muted); opacity: 1; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--primary); }
button { background: var(--button-bg); border-color: var(--button-bg); color: var(--button-text); }
.secondary-button { background: var(--panel); border-color: var(--line-strong); color: var(--text); }
.danger-button { background: #b43a3a; border-color: #b43a3a; color: #fff; }
.workspace-bar {
  position: sticky; top: 0; z-index: 50;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 16px; padding: 8px 16px;
  background: var(--panel); border-bottom: 1px solid var(--line);
}
.workspace-start, .workspace-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; }
.workspace-brand { color: var(--text); font-weight: 600; text-decoration: none; white-space: nowrap; }
.workspace-bar button, .workspace-bar select { font-size: 0.82rem; min-height: 36px; padding: 6px 10px; }
.workspace-theme { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--text-muted); }
.workspace-theme select { width: auto; }
.workspace-bar button[aria-pressed="true"] { background: var(--selected-bg); border-color: var(--selected-line); }
.workspace-skip {
  position: fixed; top: 8px; left: 8px; z-index: 100; transform: translateY(-200%);
  padding: 10px 16px; border-radius: 6px; background: var(--panel); color: var(--text);
}
.workspace-skip:focus { transform: none; }
.workspace-hint, .field .workspace-hint { color: var(--text-muted); font-size: 0.75rem; font-weight: 400; }
.app-shell { min-height: calc(100vh - var(--workspace-bar-height)); }
.sidebar {
  background: var(--sidebar-bg); top: var(--workspace-bar-height);
  height: calc(100vh - var(--workspace-bar-height));
  height: calc(100dvh - var(--workspace-bar-height));
  overflow-y: auto; scrollbar-width: thin;
}
.sidebar-head { flex-wrap: wrap; }
.sidebar-head > div { flex: 1 1 160px; }
.sidebar-head form { margin: 0; }
.main, .toolbar-main, .toolbar-title, .panel, .content-grid > *, .run-history-columns > * { min-width: 0; }
.toolbar-title, .panel-title-row { flex-wrap: wrap; }
.toolbar-meta > span, .session-toolbar-summary > span { overflow-wrap: anywhere; min-width: 0; }
.session-toolbar .toolbar-title h2 { white-space: normal; overflow-wrap: anywhere; }
.content-grid, .runs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.subnav { flex-wrap: wrap; }
.nav-link:hover, .subnav-link:hover { background: var(--hover-bg); }
.nav-link.is-active, .subnav-link.is-active, .session-row.is-active, .page-chip-active,
.source-tab:hover, .source-tab.is-active, .action-menu[open] > summary {
  background: var(--selected-bg); border-color: var(--selected-line);
}
.is-selected-row td { background: var(--selected-bg); }
.count, .badge-subtle, .summary-chip { background: var(--subtle-bg); color: var(--text-muted); }
.count-attention, .summary-chip-attention { background: var(--warning-soft); color: var(--warning); }
.summary-chip-attention strong { color: inherit; }
.badge-source { background: var(--primary-soft); border-color: var(--selected-line); color: var(--primary); }
.notice-success { border-color: var(--success-line); }
.notice-error { border-color: var(--danger-line); }
.session-stat, .session-summary-block, .run-history-item, .conversation-file-item { background: var(--panel-muted); }
.run-history-content { background: var(--panel); }
.session-row-unread, .session-card-unread, .reply-box-fresh { border-color: var(--unread-line); }
.session-list-row:hover, .session-list-row:focus-within { background: var(--hover-bg); }
.session-list-row.session-card-unread { background: var(--unread-bg); box-shadow: inset 3px 0 0 var(--unread-line); }
.session-list-row:has(.action-menu[open]) { z-index: 25; }
.action-menu > summary::-webkit-details-marker { display: none; }
.action-menu-popover { max-width: min(260px, calc(100vw - 40px)); }
.dropzone { border-color: var(--line-strong); background: var(--panel-muted); }
.dropzone.is-dragging { background: var(--primary-soft); border-color: var(--primary); }
.log-box:not(.rich-output-terminal) { background: var(--panel-muted); color: var(--text); }
.conversation-box-user { background: var(--primary-soft); border-color: var(--selected-line); }
.rich-output blockquote { border-color: var(--selected-line); color: var(--text-muted); }
.rich-output code { background: var(--subtle-bg); }
.rich-output pre code { background: transparent; color: inherit; }
.rich-output-terminal { color-scheme: dark; }
.rich-output-terminal a { color: #9bc4ff; }
.rich-output-terminal blockquote { color: #b9c8db; }
.rich-output-terminal code { background: transparent; }
.rich-output-terminal .ansi-fg-0 { color: #aeb8c6; }
.session-card, .session-stat, .session-summary-block, .run-history-item, .conversation-box { border-radius: var(--radius); }
.session-filter-bar { grid-template-columns: minmax(180px, 1fr) repeat(2, minmax(110px, 150px)) auto auto; }
.session-list-header, .session-list-row {
  grid-template-columns: minmax(180px, 1fr) minmax(90px, 130px) 72px 100px 150px 36px;
  gap: 10px;
}
.session-list-title-row { flex-wrap: wrap; }
.session-list-title { max-width: 100%; }
.session-list-updated, .session-list-counts { font-variant-numeric: tabular-nums; }
.table-wrap { max-width: 100%; scrollbar-width: thin; }
.data-table th { position: sticky; top: 0; z-index: 1; background: var(--panel-muted); }
.login-shell { min-height: calc(100vh - var(--workspace-bar-height)); }
:root[data-density="compact"] .session-list-row { min-height: 60px; padding-top: 7px; padding-bottom: 7px; }
:root[data-density="compact"] .data-table :is(th, td) { padding-top: 6px; padding-bottom: 6px; }
:root[data-density="compact"] .run-history-item { padding: 10px; }
:root[data-density="compact"] .main { gap: 10px; }
@media (min-width: 1101px) {
  :root[data-workspace-ready="true"][data-navigation-open="false"] .app-shell { grid-template-columns: minmax(0, 1fr); }
  :root[data-workspace-ready="true"][data-navigation-open="false"] .sidebar { display: none; }
}
@media (max-width: 1100px) {
  .sidebar { position: static; height: auto; max-height: none; border-right: 0; border-bottom: 1px solid var(--line); }
  :root[data-workspace-ready="true"][data-navigation-open="false"] .sidebar { display: none; }
  .content-grid, .runs-grid { grid-template-columns: minmax(0, 1fr); }
  .session-filter-bar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto auto; }
  .session-filter-bar > .grow { grid-column: 1 / -1; }
  .session-list-row { grid-template-columns: minmax(0, 1fr) auto auto; }
  .session-list-title { white-space: normal; overflow-wrap: anywhere; }
  .session-list-counts { grid-column: 1; grid-row: 3; }
  .session-list-updated { grid-column: 2 / 4; grid-row: 3; text-align: right; }
  .session-list-snippet { white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .session-toolbar .toolbar-title h2 { max-width: 100%; }
}
@media (max-width: 600px) {
  .workspace-bar { padding: 8px 12px; gap: 8px; }
  .workspace-start, .workspace-controls { width: 100%; }
  .workspace-start { justify-content: space-between; }
  [data-workspace-density] { display: none; }
  .workspace-controls { justify-content: flex-end; }
  .workspace-bar button, .workspace-bar select, .row-action-menu > summary { min-height: 44px; }
  .session-filter-bar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .session-filter-bar > button, .session-filter-bar > a { width: 100%; }
  .session-list-row { padding: 12px; gap: 8px; }
  :root[data-density="compact"] .session-list-row { padding-top: 10px; padding-bottom: 10px; }
  .session-list-title { font-size: 0.95rem; }
  .session-list-title-row .count, .session-list-title-row .badge { font-size: 0.7rem; }
  .conversation-box { padding: 10px; }
  .conversation-meta .badge { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
  .conversation-time { overflow-wrap: anywhere; }
  .panel-title-row > *, .file-actions > *, .pagination-actions { max-width: 100%; }
  .pagination-actions { gap: 6px; }
  .page-chip { min-width: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  .workspace-bar, .sidebar, .workspace-skip { display: none !important; }
  .app-shell { display: block; }
}