/* h-flock design system: literal colours live only in token blocks. */
:root {
  color-scheme: light dark;
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --text-xs: .72rem; --text-sm: .82rem; --text-md: .94rem; --text-lg: 1.12rem; --text-xl: 1.42rem; --text-2xl: 1.8rem;
  --space-0: 0; --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem;
  --radius-sm: .35rem; --radius-md: .6rem; --radius-lg: .9rem; --radius-pill: 999px;
  --line-tight: 1.2; --line-body: 1.5;
  --surface-canvas: #eef2f7; --surface-panel: #ffffff; --surface-raised: #ffffff; --surface-subtle: #f5f7fa; --surface-sunken: #e7ecf2; --surface-overlay: rgba(15, 23, 42, .62);
  --text-primary: #162033; --text-secondary: #526077; --text-tertiary: #718096; --text-inverse: #ffffff;
  --border-subtle: #d6dde7; --border-strong: #aeb9c8;
  --accent: #1859b7; --accent-hover: #104894; --accent-soft: #e8f0ff; --focus: #1769d2;
  --success: #147a46; --success-soft: #e9f8ef; --warning: #9a5b00; --warning-soft: #fff5d9; --danger: #b4232e; --danger-hover: #941b25; --danger-soft: #ffebed; --info: #2368a2; --info-soft: #e8f4fc;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .08); --shadow-md: 0 8px 24px rgba(15, 23, 42, .12); --shadow-lg: 0 20px 56px rgba(15, 23, 42, .24);
  --panel-border: 1px solid var(--border-subtle); --office-column: 42%;
  --control-height: 2.35rem; --row-height: 3.6rem; --panel-padding: var(--space-4); --grid-gap: var(--space-4);
  font: 14px/var(--line-body) var(--font-sans); background: var(--surface-canvas); color: var(--text-primary);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface-canvas: #090e17; --surface-panel: #111827; --surface-raised: #182235; --surface-subtle: #141d2c; --surface-sunken: #080d15; --surface-overlay: rgba(0, 0, 0, .74);
    --text-primary: #eef4fb; --text-secondary: #aab7c8; --text-tertiary: #7f8da0; --text-inverse: #07101e;
    --border-subtle: #29364a; --border-strong: #44536a;
    --accent: #67a6ff; --accent-hover: #8bbcff; --accent-soft: #142d50; --focus: #83b8ff;
    --success: #58d68d; --success-soft: #123423; --warning: #f4bd57; --warning-soft: #392b0e; --danger: #ff7c88; --danger-hover: #ff9aa3; --danger-soft: #421a21; --info: #72b7eb; --info-soft: #133149;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3); --shadow-md: 0 8px 24px rgba(0, 0, 0, .38); --shadow-lg: 0 20px 56px rgba(0, 0, 0, .58);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark; --surface-canvas: #090e17; --surface-panel: #111827; --surface-raised: #182235; --surface-subtle: #141d2c; --surface-sunken: #080d15; --surface-overlay: rgba(0, 0, 0, .74);
  --text-primary: #eef4fb; --text-secondary: #aab7c8; --text-tertiary: #7f8da0; --text-inverse: #07101e; --border-subtle: #29364a; --border-strong: #44536a;
  --accent: #67a6ff; --accent-hover: #8bbcff; --accent-soft: #142d50; --focus: #83b8ff; --success: #58d68d; --success-soft: #123423; --warning: #f4bd57; --warning-soft: #392b0e; --danger: #ff7c88; --danger-hover: #ff9aa3; --danger-soft: #421a21; --info: #72b7eb; --info-soft: #133149;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3); --shadow-md: 0 8px 24px rgba(0, 0, 0, .38); --shadow-lg: 0 20px 56px rgba(0, 0, 0, .58);
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-density="compact"] { --control-height: 1.9rem; --row-height: 2.65rem; --panel-padding: var(--space-3); --grid-gap: var(--space-2); }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-width: 320px; min-height: 100%; background: var(--surface-canvas); }
body { min-width: 320px; min-height: 100vh; margin: var(--space-0); background: radial-gradient(circle at top left, var(--accent-soft), transparent 32rem), var(--surface-canvas); color: var(--text-primary); }
button, input, textarea, select { font: inherit; }
button, summary { cursor: pointer; }
button, input, textarea, select { color: var(--text-primary); }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible, a:focus-visible, [tabindex="-1"]:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
h1, h2, h3, p { margin: var(--space-0); }
h1 { font-size: var(--text-lg); line-height: var(--line-tight); letter-spacing: -.02em; }
h2 { font-size: var(--text-md); line-height: var(--line-tight); }
h3 { font-size: var(--text-xs); line-height: var(--line-tight); text-transform: uppercase; letter-spacing: .08em; }
kbd { min-width: 1.65rem; padding: .08rem .38rem; border: var(--panel-border); border-bottom-color: var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-sunken); color: var(--text-secondary); font: var(--text-xs)/1.5 var(--font-mono); text-align: center; box-shadow: var(--shadow-sm); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: var(--space-0); margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 100; top: -4rem; left: var(--space-4); padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); background: var(--surface-raised); color: var(--text-primary); box-shadow: var(--shadow-lg); }
.skip-link:focus { top: var(--space-3); }

.topbar { position: sticky; z-index: 20; top: 0; min-height: 4.5rem; padding: var(--space-3) var(--space-5); display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); border-bottom: var(--panel-border); background: color-mix(in srgb, var(--surface-panel) 92%, transparent); backdrop-filter: blur(16px); box-shadow: var(--shadow-sm); }
.brand, .topbar-actions, .panel-actions, .workbench-bar, .workbench-meta, .search-results-summary { display: flex; align-items: center; }
.brand { min-width: 15rem; gap: var(--space-3); }.brand-mark { width: 2.35rem; height: 2.35rem; display: grid; place-items: center; border-radius: var(--radius-md); background: linear-gradient(135deg, var(--accent), var(--info)); color: var(--text-inverse); font-weight: 850; letter-spacing: -.04em; box-shadow: var(--shadow-sm); }
.brand p, .panel-header p, .composer-field p, .field-help { color: var(--text-secondary); font-size: var(--text-xs); }.topbar-actions { width: 29rem; flex: 0 0 29rem; flex-wrap: nowrap; justify-content: flex-end; gap: var(--space-2); }
.summary-attention { color: var(--danger) !important; font-weight: 750; }.summary-calm { color: var(--success) !important; }
.quiet-button, .icon-button, .panel-actions > button, dialog button, .tabs button, #send { min-height: var(--control-height); padding: var(--space-1) var(--space-3); border: var(--panel-border); border-radius: var(--radius-md); background: var(--surface-raised); color: var(--text-primary); box-shadow: var(--shadow-sm); }
.quiet-button { display: inline-flex; align-items: center; gap: var(--space-2); }.icon-button { width: var(--control-height); padding: var(--space-1); font-weight: 800; }.quiet-button:hover, .icon-button:hover, .panel-actions > button:hover, dialog button:hover { border-color: var(--accent); background: var(--accent-soft); }
.badge, .panel-state { min-height: 1.8rem; display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-2); border: var(--panel-border); border-radius: var(--radius-pill); background: var(--surface-subtle); font-size: var(--text-xs); font-weight: 700; }.topbar-actions .badge { width: 4.6rem; justify-content: center; }
.panel-state button { border: 0; padding: var(--space-0); color: inherit; background: transparent; text-decoration: underline; box-shadow: none; }.state-loading::before { content: "…"; }.state-ready::before { content: "●"; color: var(--success); }.state-empty::before { content: "○"; }.state-error::before { content: "!"; color: var(--danger); }.state-stale::before { content: "◷"; color: var(--warning); }.state-disconnected::before { content: "×"; color: var(--danger); }

.workbench-bar { min-height: 3.75rem; padding: var(--space-2) var(--space-5); justify-content: space-between; gap: var(--space-4); border-bottom: var(--panel-border); background: var(--surface-subtle); }
.global-search, .command-input { min-height: var(--control-height); display: flex; align-items: center; gap: var(--space-2); border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface-raised); box-shadow: var(--shadow-sm); }.global-search { width: min(42rem, 70vw); padding-inline: var(--space-3); }.global-search:focus-within, .command-input:focus-within { border-color: var(--focus); box-shadow: 0 0 0 3px var(--accent-soft); }.global-search input, .command-input input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: var(--text-primary); }.search-results-summary { min-height: 1.8rem; color: var(--text-secondary); font-size: var(--text-sm); }
.workbench-meta { gap: var(--space-3); }.demo-slot { position: relative; width: 6.8rem; min-height: var(--control-height); }.demo-controls { position: absolute; z-index: 80; top: 0; right: 0; width: max-content; max-width: calc(100vw - 2rem); border: 1px solid var(--warning); border-radius: var(--radius-md); background: var(--warning-soft); box-shadow: var(--shadow-md); }.demo-controls summary { min-height: var(--control-height); padding: var(--space-2) var(--space-3); font-weight: 750; white-space: nowrap; }.demo-controls > div { padding: var(--space-0) var(--space-3) var(--space-3); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }.demo-controls button { border: var(--panel-border); border-radius: var(--radius-sm); background: var(--surface-raised); }

.empty-office { margin: var(--space-4) var(--space-4) var(--space-0); min-height: 9rem; padding: var(--space-6) var(--space-8); display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); border: 1px solid var(--accent); border-radius: var(--radius-lg); background: linear-gradient(120deg, var(--surface-panel), var(--accent-soft)); box-shadow: var(--shadow-md); }.empty-office div { max-width: 48rem; }.empty-office h2 { margin-block: var(--space-1) var(--space-2); font-size: var(--text-xl); }.empty-office p { color: var(--text-secondary); }.eyebrow { color: var(--accent); font-size: var(--text-xs); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }.empty-office button { flex: none; min-height: var(--control-height); padding-inline: var(--space-4); border: 1px solid var(--accent); border-radius: var(--radius-md); background: var(--accent); color: var(--text-inverse); font-weight: 750; }

.console-grid { min-height: calc(100vh - 8.25rem); padding: var(--grid-gap); display: grid; grid-template-columns: minmax(22rem, var(--office-column)) minmax(0, 1fr); grid-template-rows: minmax(20rem, 54vh) minmax(17rem, auto); grid-template-areas: "agents detail" "alerts boards"; gap: var(--grid-gap); }
.panel { min-width: 0; min-height: 0; contain: layout paint; border: var(--panel-border); border-radius: var(--radius-lg); background: var(--surface-panel); overflow: hidden; box-shadow: var(--shadow-sm); }.panel:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }.panel-header { min-height: 4rem; padding: var(--space-3) var(--panel-padding); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); border-bottom: var(--panel-border); background: linear-gradient(180deg, var(--surface-raised), var(--surface-panel)); }.panel-actions { flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
.agents-panel { grid-area: agents; container-type: inline-size; display: grid; grid-template-rows: auto 1fr; }.detail-panel { grid-area: detail; display: grid; grid-template-rows: auto auto 1fr; }.alerts-panel { grid-area: alerts; display: grid; grid-template-rows: auto 1fr; }.boards-panel { grid-area: boards; display: grid; grid-template-rows: auto 1fr; }
.panel-header > :first-child { min-width: 0; }.panel-header > .panel-actions, .panel-header > [role="status"] { width: 10.5rem; flex: 0 0 10.5rem; }.agents-panel .panel-header > .panel-actions { width: 17rem; flex-basis: 17rem; }.detail-panel .panel-header > .panel-actions { width: 26rem; flex-basis: 26rem; }.panel-header .panel-state { width: 10.5rem; justify-content: center; }
.agent-list { min-height: 15rem; overflow: auto; scrollbar-gutter: stable; padding: var(--space-2); }.agent-group-heading { position: sticky; z-index: 1; top: 0; min-height: 2rem; padding: var(--space-2) var(--space-3); border-bottom: var(--panel-border); background: var(--surface-subtle); color: var(--text-secondary); }.agent-group-heading.state-blocked { color: var(--danger); background: var(--danger-soft); font-weight: 850; }.agent-group + .agent-group { margin-top: var(--space-1); }
.agent-row { width: 100%; min-height: var(--row-height); display: grid; grid-template-columns: 1.6rem minmax(5.5rem, .8fr) 5.8rem 5rem minmax(8rem, 1.4fr) 4rem 6rem; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border: 1px solid transparent; border-bottom-color: var(--border-subtle); border-radius: var(--radius-sm); color: var(--text-primary); background: transparent; text-align: left; }.agent-row:hover, .agent-row.selected { border-color: var(--accent); background: var(--accent-soft); }.agent-row time, .agent-row .port_type, .agent-row .age { color: var(--text-secondary); font-size: var(--text-xs); }.agent-row .ticket { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.state-icon { font-size: var(--text-lg); text-align: center; }.agent-row.state-working .state-icon { color: var(--success); }.agent-row.state-unknown .state-icon { color: var(--warning); }.agent-row.state-unknown { border-left: 3px dashed var(--warning); }.agent-row.state-blocked { border: 3px solid var(--danger); background: var(--danger-soft); }.agent-row.state-blocked .presence-label { font-weight: 800; text-decoration: underline; }.agent-row.state-pending { border-left: 3px solid var(--accent); }.agent-row.state-pending .state-icon { animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .25; } }

.tabs { display: flex; gap: var(--space-1); padding: var(--space-2) var(--space-3); border-bottom: var(--panel-border); background: var(--surface-subtle); }.tabs button { box-shadow: none; }.tabs button[aria-selected="true"] { color: var(--text-inverse); background: var(--accent); border-color: var(--accent); font-weight: 750; }.tab-view { min-height: 14rem; overflow: auto; }.tab-view > .panel-state { margin: var(--space-2) var(--space-3) var(--space-0); }
.event-list, .message-list, .alert-list { margin: var(--space-0); padding: var(--space-2) var(--space-3); list-style: none; }.event-list li { min-height: 2.5rem; display: grid; grid-template-columns: 6rem 5rem 1fr; align-items: center; gap: var(--space-2); border-bottom: var(--panel-border); }.event-list time, .message-list time { color: var(--text-secondary); font-size: var(--text-xs); }.activity-tool strong { color: var(--accent); }
.messages-view { display: grid; grid-template-rows: auto 1fr auto; }.message-list { overflow: auto; }.message-list li { display: grid; grid-template-columns: 6rem 1fr auto; gap: var(--space-2); padding: var(--space-2); border-bottom: var(--panel-border); }.message-list span { white-space: pre-wrap; overflow-wrap: anywhere; }
#composer { display: flex; align-items: flex-end; gap: var(--space-3); padding: var(--space-3); border-top: var(--panel-border); background: var(--surface-subtle); }.composer-field { min-width: 0; flex: 1; }.composer-field textarea { width: 100%; }.composer-field p { margin-top: var(--space-1); } textarea, dialog input, dialog select { min-height: var(--control-height); padding: var(--space-2) var(--space-3); color: var(--text-primary); background: var(--surface-raised); border: var(--panel-border); border-radius: var(--radius-md); } textarea { resize: vertical; } button:disabled { cursor: not-allowed; opacity: .48; }
.danger-button { border-color: var(--danger) !important; color: var(--danger) !important; font-weight: 750; }.danger-button:hover { color: var(--text-inverse) !important; background: var(--danger) !important; }

.alert-list { min-height: 11rem; max-height: 24rem; overflow-y: auto; scrollbar-gutter: stable; }.alert { min-height: 3rem; content-visibility: auto; contain-intrinsic-size: 3rem; display: grid; grid-template-columns: 1.7rem 6rem 6rem minmax(7rem, 1fr) 3rem 5rem; align-items: center; gap: var(--space-2); padding: var(--space-2); border-bottom: var(--panel-border); }.alert:hover { background: var(--surface-subtle); }.alert-icon { width: 1.55rem; height: 1.55rem; display: grid; place-items: center; border-radius: var(--radius-pill); color: var(--text-inverse); background: var(--info); font-weight: 900; }.severity-critical { border-left: 4px solid var(--danger); background: var(--danger-soft); }.severity-critical .alert-icon { background: var(--danger); }.severity-warning { border-left: 4px solid var(--warning); background: var(--warning-soft); }.severity-warning .alert-icon { background: var(--warning); }.repeat-count { color: var(--text-secondary); font-weight: 800; font-variant-numeric: tabular-nums; }.alert time { color: var(--text-secondary); font-size: var(--text-xs); }
#boards { min-height: 11rem; max-height: 26rem; overflow: auto; scrollbar-gutter: stable; padding: var(--space-2) var(--space-3); }.agent-board { border-bottom: var(--panel-border); }.agent-board summary { min-height: 2.7rem; display: grid; grid-template-columns: minmax(6rem, 1fr) repeat(5, auto); gap: var(--space-3); align-items: center; padding: var(--space-2); border-radius: var(--radius-sm); }.agent-board summary:hover { background: var(--surface-subtle); }.agent-board summary span { color: var(--text-secondary); font-size: var(--text-xs); }.board-columns { display: grid; grid-template-columns: repeat(4, minmax(8rem, 1fr)); gap: var(--space-2); padding: var(--space-0) var(--space-2) var(--space-3); }.board-columns section { min-width: 0; border: var(--panel-border); border-radius: var(--radius-md); background: var(--surface-subtle); }.board-columns h3 { display: flex; justify-content: space-between; padding: var(--space-2); border-bottom: var(--panel-border); }.board-columns ol { max-height: 15rem; overflow: auto; scrollbar-gutter: stable; margin: var(--space-0); padding: var(--space-1); list-style: none; }.board-columns li { display: flex; justify-content: space-between; gap: var(--space-1); margin: var(--space-1); padding: var(--space-2); border: var(--panel-border); border-radius: var(--radius-sm); background: var(--surface-raised); box-shadow: var(--shadow-sm); overflow-wrap: anywhere; }.board-columns small { color: var(--warning); }.filtered-empty { padding: var(--space-6); color: var(--text-secondary); text-align: center; }

dialog { width: min(34rem, calc(100vw - 2rem)); max-height: min(44rem, calc(100vh - 2rem)); padding: var(--space-0); overflow: auto; color: var(--text-primary); background: var(--surface-raised); border: var(--panel-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }dialog::backdrop { background: var(--surface-overlay); backdrop-filter: blur(4px); }.dialog-shell, dialog form { display: grid; gap: var(--space-4); padding: var(--space-5); }.dialog-shell > header, dialog form > header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); padding-bottom: var(--space-3); border-bottom: var(--panel-border); }.dialog-shell > footer, dialog form > footer { display: flex; justify-content: flex-end; align-items: center; gap: var(--space-3); padding-top: var(--space-3); border-top: var(--panel-border); color: var(--text-secondary); font-size: var(--text-xs); }.dialog-shell label, dialog form label { display: grid; gap: var(--space-1); }.form-error { min-height: 1.4em; color: var(--danger); }
.command-dialog { width: min(44rem, calc(100vw - 2rem)); align-self: start; margin-top: min(12vh, 7rem); }.command-input { padding: var(--space-2) var(--space-3); }.command-input input { font-size: var(--text-lg); }.command-results { max-height: 24rem; overflow: auto; margin: var(--space-0); padding: var(--space-0); list-style: none; }.command-results button { width: 100%; display: flex; justify-content: space-between; gap: var(--space-4); border-color: transparent; background: transparent; box-shadow: none; text-align: left; }.command-results button:hover, .command-results button.active { border-color: var(--accent); background: var(--accent-soft); }.command-results small { color: var(--text-secondary); }.shortcuts-sheet dl { display: grid; gap: var(--space-1); margin: var(--space-0); }.shortcuts-sheet dl div { display: grid; grid-template-columns: 11rem 1fr; align-items: center; gap: var(--space-3); padding: var(--space-2); border-bottom: var(--panel-border); }.shortcuts-sheet dt, .shortcuts-sheet dd { margin: var(--space-0); }
.detail-overview { min-height: 100%; padding: var(--space-8); display: grid; align-content: center; gap: var(--space-6); background: linear-gradient(145deg, var(--surface-panel), var(--accent-soft)); }.detail-overview > div:first-child { max-width: 38rem; }.detail-overview h2 { margin-block: var(--space-2); font-size: var(--text-2xl); }.detail-overview p { color: var(--text-secondary); }.overview-metrics { display: grid; grid-template-columns: repeat(3, minmax(6rem, 1fr)); gap: var(--space-3); margin: var(--space-0); }.overview-metrics div { padding: var(--space-4); border: var(--panel-border); border-radius: var(--radius-md); background: var(--surface-raised); box-shadow: var(--shadow-sm); }.overview-metrics dt { color: var(--text-secondary); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .08em; }.overview-metrics dd { margin: var(--space-1) var(--space-0) var(--space-0); font-size: var(--text-2xl); font-weight: 800; }.overview-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }.overview-actions button { min-height: var(--control-height); padding-inline: var(--space-4); border: var(--panel-border); border-radius: var(--radius-md); background: var(--surface-raised); color: var(--text-primary); }.overview-actions button:first-child:not(:disabled) { border-color: var(--danger); color: var(--danger); }
.agents-panel:has(#agents-status.state-loading) .agent-list:empty::before, .alerts-panel:has(#alerts-status.state-loading) .alert-list:empty::before, .boards-panel:has(#boards-status.state-loading) #boards:empty::before, .detail-panel:has(#activity-status.state-loading) .event-list:empty::before, .detail-panel:has(#messages-status.state-loading) .message-list:empty::before { content: ""; min-height: 11rem; display: block; border-radius: var(--radius-md); background: repeating-linear-gradient(180deg, var(--surface-subtle) 0, var(--surface-subtle) 2.4rem, var(--border-subtle) 2.45rem, var(--surface-panel) 2.5rem); }
.alerts-panel:has(#alerts-status.state-empty) .alert-list:empty::before { content: none; display: none; }
@container (max-width: 650px) { .agent-row { grid-template-columns: 1.5rem minmax(5rem, 1fr) 5.5rem 6rem; }.agent-row .port_type, .agent-row .age, .agent-row .ticket { display: none; }.agent-row time { display: block; } }

@media (max-width: 1000px) { .topbar { align-items: flex-start; }.workbench-bar { align-items: stretch; flex-direction: column; }.global-search { width: 100%; }.console-grid { grid-template-columns: 1fr; grid-template-rows: auto; grid-template-areas: "agents" "alerts" "detail" "boards"; }.agent-list, .tab-view { max-height: 30rem; }.agent-row { grid-template-columns: 1.5rem 1fr 5.5rem 6rem; }.agent-row .port_type, .agent-row .age, .agent-row .ticket { display: none; }.agent-row time { display: block; } }
@media (max-width: 680px) { .topbar { position: static; padding: var(--space-3); flex-direction: column; }.topbar-actions { width: 100%; flex: 0 0 auto; justify-content: flex-start; }.quiet-button span { display: none; }.console-grid { padding: var(--space-2); gap: var(--space-2); }.empty-office { margin: var(--space-2) var(--space-2) var(--space-0); padding: var(--space-4); align-items: stretch; flex-direction: column; }.empty-office button { align-self: flex-start; }.board-columns { grid-template-columns: 1fr; }.alert { grid-template-columns: 1.5rem 1fr; }.alert > *:nth-child(n+3) { grid-column: 2; }.shortcuts-sheet dl div { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

/* Application shell: sections occupy the workspace; navigation never competes with content. */
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 16rem minmax(0, 1fr); }
.app-sidebar { position: sticky; z-index: 30; top: 0; height: 100vh; padding: var(--space-6) var(--space-4); display: grid; grid-template-rows: auto 1fr auto; gap: var(--space-8); border-right: var(--panel-border); background: var(--surface-panel); box-shadow: var(--shadow-sm); }
.sidebar-brand { display: flex; align-items: center; gap: var(--space-3); }.sidebar-brand div { display: grid; }.sidebar-brand strong { font-size: var(--text-lg); }.sidebar-brand span:last-child { color: var(--text-secondary); font-size: var(--text-xs); }
.section-navigation { display: grid; align-content: start; gap: var(--space-1); }.section-navigation a { min-height: 2.8rem; padding: var(--space-2) var(--space-3); display: grid; grid-template-columns: 1.5rem 1fr auto; align-items: center; gap: var(--space-2); border-radius: var(--radius-md); color: var(--text-secondary); text-decoration: none; font-weight: 650; }.section-navigation a:hover { color: var(--text-primary); background: var(--surface-subtle); }.section-navigation a[aria-current="page"] { color: var(--accent); background: var(--accent-soft); }.section-navigation strong { min-width: 1.7rem; padding-inline: var(--space-1); border-radius: var(--radius-pill); background: var(--surface-sunken); font-size: var(--text-xs); font-variant-numeric: tabular-nums; text-align: center; }
.sidebar-status { display: flex; align-items: center; gap: var(--space-2); color: var(--text-secondary); font-size: var(--text-xs); }.sidebar-live-dot { width: .65rem; height: .65rem; border-radius: 50%; background: var(--warning); }.sidebar-live-dot.state-ready { background: var(--success); }
.app-workspace { min-width: 0; }.application-content { min-height: calc(100vh - 8.25rem); padding: var(--space-8); }.app-section { width: 100%; min-height: calc(100vh - 12.25rem); }
.section-header { min-height: 5.5rem; padding-bottom: var(--space-5); display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6); border-bottom: var(--panel-border); }.section-header h2 { margin-block: var(--space-1); font-size: var(--text-2xl); }.section-header p:last-child { color: var(--text-secondary); }
.overview-section { display: grid; align-content: start; gap: var(--space-6); }.overview-section .empty-office { margin: 0; }.overview-section .detail-overview { min-height: 28rem; border: var(--panel-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.app-section.panel { min-height: calc(100vh - 12.25rem); display: grid; grid-template-rows: auto minmax(0, 1fr); }.app-section .agent-list, .app-section .alert-list, .app-section #boards { max-height: none; }
.detail-panel.app-section { display: grid; grid-template-rows: auto auto minmax(0, 1fr); }.detail-panel .tab-view { min-height: 32rem; }.detail-panel .panel-header > .panel-actions { width: auto; flex-basis: auto; }
.agent-board-view, .lifecycle-view { padding: var(--space-5); }.lifecycle-card, .settings-card { padding: var(--space-6); display: grid; gap: var(--space-4); border: var(--panel-border); border-radius: var(--radius-lg); background: var(--surface-panel); box-shadow: var(--shadow-sm); }.lifecycle-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.terminals-section, .integration-section, .settings-section { display: grid; align-content: start; gap: var(--space-6); }.section-mount, #terminals-workspace-mount { min-height: 32rem; border: var(--panel-border); border-radius: var(--radius-lg); background: var(--surface-panel); box-shadow: var(--shadow-sm); }
.settings-grid { max-width: 64rem; display: grid; grid-template-columns: repeat(2, minmax(16rem, 1fr)); gap: var(--space-5); }.settings-grid > label { padding: var(--space-5); display: grid; align-content: start; gap: var(--space-2); border: var(--panel-border); border-radius: var(--radius-lg); background: var(--surface-panel); font-weight: 700; }.settings-grid select, .settings-grid input { width: 100%; min-height: var(--control-height); }
.empty-state { min-height: 16rem; padding: var(--space-8); display: grid; place-content: center; gap: var(--space-2); color: var(--text-secondary); text-align: center; }.empty-state h3 { color: var(--text-primary); font-size: var(--text-lg); text-transform: none; letter-spacing: normal; }
.settings-grid select, .settings-grid input:not([type="range"]), .terminal-controls input, .terminal-controls select, .term-tab-add select { min-height: var(--control-height); padding: var(--space-2) var(--space-3); border: var(--panel-border); border-radius: var(--radius-md); color: var(--text-primary); background: var(--surface-raised); }.typing-toggle-btn, .btn-sm, .btn-mode { min-height: var(--control-height); padding: var(--space-1) var(--space-3); border: var(--panel-border); border-radius: var(--radius-md); color: var(--text-primary); background: var(--surface-raised); box-shadow: var(--shadow-sm); }.typing-toggle-btn:hover, .btn-sm:hover, .btn-mode:hover { border-color: var(--accent); background: var(--accent-soft); }
.terminals-workspace { min-height: 36rem; display: grid; grid-template-rows: auto auto minmax(0, 1fr); }.term-tab-bar { display: flex; align-items: end; gap: var(--space-1); padding: var(--space-3) var(--space-4) 0; border-bottom: var(--panel-border); background: var(--surface-subtle); overflow-x: auto; }.term-tab { min-height: var(--control-height); padding: var(--space-2) var(--space-3); display: inline-flex; align-items: center; gap: var(--space-3); border: var(--panel-border); border-bottom: 0; border-radius: var(--radius-md) var(--radius-md) 0 0; color: var(--text-secondary); background: var(--surface-sunken); white-space: nowrap; }.term-tab.active { color: var(--accent); background: var(--surface-panel); font-weight: 800; }.term-tab-close { color: var(--text-tertiary); }.term-tab-add { padding-bottom: var(--space-2); }.workspace-typing-banner { margin: var(--space-4) var(--space-4) 0; display: flex; justify-content: space-between; }.term-session-area { min-height: 30rem; padding: var(--space-4); background: var(--surface-sunken); }.term-session-area > .terminal-container { min-height: 32rem; }

@media (max-width: 800px) {
  .app-shell { grid-template-columns: 4.5rem minmax(0, 1fr); }
  .app-sidebar { padding-inline: var(--space-2); }.sidebar-brand div, .section-navigation a span:nth-child(2), .sidebar-status span:last-child { display: none; }.sidebar-brand { justify-content: center; }.section-navigation a { grid-template-columns: 1fr; justify-items: center; }.section-navigation strong { position: absolute; margin: -1.5rem 0 0 1.75rem; }
  .application-content { padding: var(--space-4); }.settings-grid { grid-template-columns: 1fr; }
}

.section-context { display: grid; gap: var(--space-1); }.section-context h1 { font-size: var(--text-xl); }
.workbench-bar .global-search { width: 100%; }.workbench-bar .workbench-meta { flex: none; }.demo-slot { width: auto; }.demo-controls { position: static; }
.agents-panel .agent-list { padding: 0; overflow: auto; }.roster-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-variant-numeric: tabular-nums; }.roster-table th, .roster-table td { height: var(--row-height); padding: var(--space-2) var(--space-3); border-bottom: var(--panel-border); overflow: hidden; text-align: left; text-overflow: ellipsis; white-space: nowrap; }.roster-table thead th { position: sticky; z-index: 2; top: 0; height: 3rem; padding-block: 0; background: var(--surface-subtle); }.roster-table thead button { width: 100%; height: 100%; padding: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); border: 0; color: var(--text-secondary); background: transparent; font-size: var(--text-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }.roster-table thead button:hover { color: var(--accent); }.roster-table th:nth-child(1) { width: 16%; }.roster-table th:nth-child(2) { width: 14%; }.roster-table th:nth-child(3) { width: 10%; }.roster-table th:nth-child(4) { width: 30%; }.roster-table th:nth-child(5) { width: 13%; }.roster-table th:nth-child(6) { width: 17%; }.roster-table .agent-row { display: table-row; background: transparent; }.roster-table .agent-row:hover, .roster-table .agent-row.selected { background: var(--accent-soft); }.roster-table .agent-row.state-blocked { border: 0; border-left: 4px solid var(--danger); background: var(--danger-soft); }.agent-link { width: 100%; padding: 0; display: flex; align-items: center; gap: var(--space-2); border: 0; color: var(--text-primary); background: transparent; font-weight: 800; text-align: left; }.agent-link:hover { color: var(--accent); }.roster-table .presence-label { display: inline-flex; padding: var(--space-1) var(--space-2); border-radius: var(--radius-pill); background: var(--surface-sunken); font-size: var(--text-xs); font-weight: 750; }.roster-table .state-blocked .presence-label { color: var(--danger); background: var(--danger-soft); }

/* The conversation is the agent page. Observation and control stay secondary. */
.detail-panel.app-section { grid-template-rows: auto minmax(0, 1fr); }.detail-panel.with-secondary { grid-template-columns: minmax(28rem, 1.15fr) minmax(26rem, .85fr); grid-template-rows: auto minmax(0, 1fr); gap: var(--space-4); background: transparent; border: 0; box-shadow: none; overflow: visible; }.detail-panel.with-secondary > .panel-header { grid-column: 1 / -1; border: var(--panel-border); border-radius: var(--radius-lg); }.conversation-actions { width: auto !important; flex-basis: auto !important; }
.conversation-view { min-height: 36rem; display: grid; grid-template-rows: auto auto minmax(18rem, 1fr) auto; border-radius: 0 0 var(--radius-lg) var(--radius-lg); background: var(--surface-panel); overflow: hidden; }.detail-panel.with-secondary .conversation-view { border: var(--panel-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }.conversation-meta { min-height: 2.75rem; padding: var(--space-2) var(--space-4); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); border-bottom: var(--panel-border); background: var(--surface-subtle); }.conversation-meta .panel-state { border: 0; background: transparent; }
.conversation-presence { min-height: 3rem; padding: var(--space-3) var(--space-5); border-bottom: var(--panel-border); color: var(--text-secondary); background: var(--surface-subtle); font-weight: 650; }.conversation-presence.state-blocked { color: var(--danger); background: var(--danger-soft); }.conversation-presence.state-unknown { color: var(--warning); background: var(--warning-soft); }.conversation-presence.state-working { color: var(--info); background: var(--info-soft); }.conversation-presence.state-idle { color: var(--success); background: var(--success-soft); }
.conversation-list { min-height: 22rem; max-height: calc(100vh - 24rem); margin: 0; padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-5); overflow-y: auto; scrollbar-gutter: stable; list-style: none; }.conversation-message { max-width: min(46rem, 82%); display: grid; gap: var(--space-2); }.conversation-message header, .conversation-activity > header { display: flex; align-items: baseline; gap: var(--space-2); color: var(--text-secondary); font-size: var(--text-xs); }.conversation-message header strong, .conversation-activity header strong { color: var(--text-primary); font-size: var(--text-sm); }.conversation-message header time { margin-left: auto; font-variant-numeric: tabular-nums; }.conversation-message p { margin: 0; padding: var(--space-3) var(--space-4); border: var(--panel-border); border-radius: var(--radius-md) var(--radius-lg) var(--radius-lg); background: var(--surface-subtle); white-space: pre-wrap; overflow-wrap: anywhere; }.message-operator { align-self: flex-end; }.message-operator header { flex-direction: row-reverse; }.message-operator header time { margin: 0 auto 0 0; }.message-operator p { border-color: var(--accent); border-radius: var(--radius-lg) var(--radius-md) var(--radius-lg) var(--radius-lg); background: var(--accent-soft); }.message-client p { border-style: dashed; border-color: var(--warning); background: var(--warning-soft); }
.conversation-activity { max-width: min(42rem, 78%); display: grid; gap: var(--space-2); }.conversation-activity > ol { margin: 0; padding: var(--space-3) var(--space-4); display: grid; gap: var(--space-2); border-left: 2px solid var(--info); border-radius: 0 var(--radius-md) var(--radius-md) 0; background: var(--info-soft); list-style: none; }.conversation-activity li { display: grid; grid-template-columns: 1.25rem minmax(6rem, auto) 1fr; align-items: center; gap: var(--space-2); }.conversation-activity li > span:last-child { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.conversation-composer { position: sticky; bottom: 0; padding: var(--space-4) var(--space-5); display: flex; align-items: flex-end; gap: var(--space-3); border-top: var(--panel-border); background: color-mix(in srgb, var(--surface-panel) 94%, transparent); backdrop-filter: blur(12px); }.conversation-composer textarea { min-height: 5rem; padding: var(--space-3) var(--space-4); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); background: var(--surface-raised); }.conversation-composer textarea:focus { border-color: var(--focus); box-shadow: 0 0 0 3px var(--accent-soft); outline: 0; }.conversation-composer #send { min-width: 6rem; min-height: 3rem; border-color: var(--accent); background: var(--accent); color: var(--text-inverse); font-weight: 800; }
.secondary-view { min-width: 0; min-height: 36rem; border: var(--panel-border); border-radius: var(--radius-lg); background: var(--surface-panel); box-shadow: var(--shadow-sm); overflow: auto; }.detail-panel:not(.with-secondary) > .secondary-view { display: none !important; }.detail-panel.with-secondary .terminal-panel { padding: var(--space-3); }.detail-panel.with-secondary .terminal-bar { align-items: flex-start; }.detail-panel.with-secondary .terminal-controls { max-height: 11rem; overflow: auto; }.detail-panel.with-secondary .terminal-container { min-height: 30rem; }
@media (max-width: 1100px) { .detail-panel.with-secondary { grid-template-columns: 1fr; }.detail-panel.with-secondary > .panel-header { grid-column: 1; }.conversation-list { max-height: 36rem; } }