/* Phase 3: the agent screen as the place an agent is run. Sections navigation, set-up tabs (read-only and editor),
   the pending-change bar, the two-halves mode card, jobs, memory, the Library, reads, Activity, Chat, and the fleet's
   observed marker and chat shortcut. Built from roles and components only (design/DESIGN.md); no raw colour. */

/* ================================================================ sections: a primary row, then Set-up and Operate */
.agent-nav { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-6); }
.agent-nav .tabs { margin-bottom: 0; }
.tabs > li { display: contents; }
.subtabs { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-6); align-items: center; }
.subtab-group { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.subtab-label { flex: none; font: var(--text-micro); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); padding-right: var(--sp-1); }
.subtab-list { display: flex; gap: 2px; padding: 3px; border-radius: var(--r-md); background: var(--surface-3); }
.subtab-list > li { display: contents; }
.subtab-list .tab-link { height: 30px; padding: 0 var(--sp-3); border-radius: var(--r-sm); font: var(--text-body-sm); font-weight: 500; color: var(--ink-2); gap: 6px; }
.subtab-list .tab-link .icon { width: 14px; height: 14px; }
.subtab-list .tab-link:hover { background: var(--surface-2); }
.subtab-list .tab-link[aria-current="page"] { background: var(--surface-1); color: var(--ink-1); box-shadow: var(--shadow-1); }
.subtab-list .tab-link[aria-current="page"]::after { content: none; }
@media (pointer: coarse) { .subtab-list .tab-link { height: var(--target); } }
@media (max-width: 719px) {
  /* Phones: each row becomes one sideways-scrolling segmented strip. */
  .subtabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); gap: var(--sp-4); }
  .subtabs::-webkit-scrollbar { display: none; }
  .subtab-group { flex: none; }
}
@media (forced-colors: active) { .subtab-list .tab-link[aria-current="page"] { outline: 2px solid CanvasText; } }

/* ================================================================ set-up tabs */
.setup { display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 1fr); }
.setup > *, .setup-body > * { min-width: 0; }
.setup-head { display: grid; gap: var(--sp-3); }
.setup-head:empty { display: none; }
.setup-body { display: grid; gap: var(--sp-4); }
.setup-source { display: flex; align-items: flex-start; gap: var(--sp-2); color: var(--ink-2); font: var(--text-body-sm); }
.setup-source > .icon { flex: none; margin-top: 2px; color: var(--ink-3); }
.setup-source.is-edit > .icon { color: var(--accent); }
.setup-source b { color: var(--ink-1); font-weight: 600; }
.card-actions-start { justify-content: flex-start; }
.plain-list { display: grid; gap: 2px; }
.provider-list { display: grid; gap: var(--sp-2); }
.provider-list li { display: flex; gap: var(--sp-2); align-items: baseline; }
.section-tools { display: flex; align-items: center; gap: var(--sp-3); font: var(--text-body-sm); }
.section-sub { font: var(--text-body-sm); margin-top: calc(-1 * var(--sp-2)); }
.targets-slot, .versions-slot { min-width: 0; }

/* the two halves of managed mode */
.mode-card { display: grid; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); }
.mode-card-lead { font: var(--text-body-sm); color: var(--ink-1); }
.mode-halves { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--sp-2); }
.mode-half { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3); border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); flex-wrap: wrap; }
.mode-half-mark { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--surface-3); color: var(--ink-3); }
.mode-half-mark .icon { width: 14px; height: 14px; }
.mode-half.is-on .mode-half-mark { background: var(--ok-wash); color: var(--ok-ink); }
.mode-half.is-off .mode-half-mark { background: var(--surface-1); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-input); }
.mode-half-text { flex: 1 1 160px; display: grid; gap: 2px; min-width: 0; font: var(--text-body-sm); }
.mode-half-text b { font-weight: 600; }
.mode-half .btn { margin-left: 36px; }

/* the pending change: one bar across every set-up tab */
.pending-bar {
  position: sticky; bottom: var(--sp-4); z-index: 10; display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4); border-radius: var(--r-lg); background: var(--surface-2);
  box-shadow: var(--shadow-3), inset 0 0 0 1px var(--accent); animation: pop-in var(--dur-2) var(--ease-out);
}
.pending-mark { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: var(--r-md); background: var(--accent-wash); color: var(--accent); }
.pending-text { flex: 1 1 220px; min-width: 0; font: var(--text-body-sm); }
.pending-text b { font: var(--text-body); font-weight: 600; color: var(--ink-1); }
.pending-why { display: block; color: var(--warn-ink); margin-top: 2px; }
.pending-actions { display: flex; gap: var(--sp-2); }
@media (max-width: 719px) {
  .pending-bar { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--sp-2)); padding: var(--sp-3); }
  .pending-actions { width: 100%; } .pending-actions .btn-primary { flex: 1; }
}
.chip-flight-outline { background: var(--accent-wash); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.chip-flight-outline .icon { width: 12px; height: 12px; }

/* Identity: rendered persona files */
.file-card { display: grid; }
.file-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3) var(--sp-4); flex-wrap: wrap; padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--line); }
.file-card-title { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; min-width: 0; }
.file-card-title h2 { font: var(--text-title-3); font-family: var(--font-mono); letter-spacing: 0; }
.file-card-title .edit-card-sub { flex-basis: 100%; }
.file-tools { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.file-tools .segmented button { height: 30px; }
.file-card-body { padding: var(--sp-5); min-width: 0; }
.file-card-body > .log-lines { margin: calc(-1 * var(--sp-5)); border-radius: 0 0 var(--r-lg) var(--r-lg); max-height: 560px; }
.file-card-body .not-managed { margin-bottom: var(--sp-4); }
.file-card.has-drift { box-shadow: inset 3px 0 0 var(--warn); }
.md-render { max-width: 72ch; font-size: 0.9375rem; line-height: 1.65; }
.md-render h3 { margin-top: var(--sp-6); }
.md-render h3:first-child, .md-render h4:first-child { margin-top: 0; }
.md-render code { font: var(--text-mono); background: var(--surface-2); padding: 1px 5px; border-radius: var(--r-xs); color: var(--ink-1); }
.md-render pre code { background: none; padding: 0; }
.md-render blockquote { border-left: 3px solid var(--line-strong); padding: var(--sp-1) 0 var(--sp-1) var(--sp-4); color: var(--ink-2); }
.md-render .md-image-alt { color: var(--ink-3); font-style: italic; }
.md-render input[type="checkbox"] { margin-right: var(--sp-2); }
.drift { display: grid; gap: var(--sp-2); padding: var(--sp-4) var(--sp-5) 0; }
.drift-diff { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.drift-diff > summary { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); cursor: pointer; font: var(--text-body-sm); font-weight: 500; }
.drift-diff > summary .icon { transition: transform var(--dur-1) var(--ease-out); }
.drift-diff[open] > summary .icon { transform: rotate(90deg); }
.drift-diff .linediff { border-top: 1px solid var(--line); }
.drift-actions { padding: var(--sp-3); border-top: 1px solid var(--line); }
@media (pointer: coarse) { .drift-diff > summary { min-height: var(--target); } }
.file-editor { min-height: 360px; }

/* Jobs */
.job-cards { display: grid; gap: var(--sp-3); }
.job-card { display: grid; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); }
.job-card.is-paused { background: var(--surface-2); }
.job-card.is-paused .job-title h3 { color: var(--ink-2); }
.job-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.job-title { display: grid; gap: 4px; min-width: 0; flex: 1 1 260px; }
.job-title h3 { font: var(--text-title-3); }
.job-when { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: baseline; color: var(--ink-1); font: var(--text-body-sm); }
.job-when .mono { font: var(--text-mono); }
.job-chips { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: 2px; }
.job-chips:empty { display: none; }
.job-chips .chip .icon { width: 12px; height: 12px; }
.job-tools { display: flex; align-items: center; gap: var(--sp-1); flex-wrap: wrap; min-width: 0; }
.job-card, .job-cards > li { min-width: 0; }
.job-tools .switch { margin-right: var(--sp-2); }
.job-switch-text { font: var(--text-body-sm); color: var(--ink-2); min-width: 3.4em; text-align: right; }
.job-facts { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-8); font: var(--text-body-sm); }
.job-facts > div { display: grid; gap: 1px; }
.job-facts dt { color: var(--ink-3); font: var(--text-caption); }
.job-prompt { border-top: 1px solid var(--line); padding-top: var(--sp-2); }
.job-prompt > summary { display: inline-flex; align-items: center; gap: var(--sp-2); cursor: pointer; font: var(--text-body-sm); font-weight: 500; color: var(--ink-2); padding: var(--sp-1) 0; }
.job-prompt > summary .icon { width: 14px; height: 14px; transition: transform var(--dur-1) var(--ease-out); }
.job-prompt[open] > summary .icon { transform: rotate(90deg); }
.job-prompt-text { margin-top: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--surface-2); border-left: 3px solid var(--line-strong);
  white-space: pre-wrap; overflow-wrap: anywhere; font: var(--text-body-sm); color: var(--ink-1); max-height: 320px; overflow: auto; }
@media (pointer: coarse) { .job-prompt > summary { min-height: var(--target); } }
.job-form { display: grid; gap: var(--sp-4); box-shadow: inset 0 0 0 1px var(--accent); }
.sched-words { color: var(--ink-1); font-weight: 500; }
.watched-list { display: grid; }
.watched-list li { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; padding: var(--sp-3) var(--sp-4); font: var(--text-body-sm); }
.watched-list li + li { border-top: 1px solid var(--line); }
.watched-list .chip { margin-left: auto; }
.btn-ghost-crit { color: var(--crit-ink); }
.btn-ghost-crit:hover:not(:disabled) { background: var(--crit-wash); color: var(--crit-ink); }

/* Skills & tools */
.toolset-list { display: grid; }
.toolset-list li { display: grid; grid-template-columns: minmax(120px, 160px) minmax(0, 1fr); gap: var(--sp-3); padding: var(--sp-2) 0; font: var(--text-body-sm); }
.toolset-list li + li { border-top: 1px solid var(--line); }
@media (max-width: 479px) { .toolset-list li { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

/* Memory */
.mem-status { display: flex; align-items: flex-start; gap: var(--sp-3); flex-wrap: wrap; font: var(--text-body-sm); color: var(--ink-1); }
.mem-files { display: grid; }
.mem-files li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: var(--sp-3); align-items: center; padding: var(--sp-3) 0; }
.mem-files li + li { border-top: 1px solid var(--line); }
.mem-files li > div { display: grid; gap: 2px; font: var(--text-body-sm); }
.mem-file-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--r-md); background: var(--surface-3); color: var(--ink-2); }
.danger-card { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; box-shadow: inset 0 0 0 1px var(--crit-wash); }
.danger-text { flex: 1 1 300px; display: grid; gap: 2px; min-width: 0; }
.btn-danger-outline { background: transparent; color: var(--crit-ink); border: 1px solid var(--crit); }
.btn-danger-outline:hover:not(:disabled) { background: var(--crit-wash); }

/* reads: a viewer for what the steward read from the host */
.read-body { display: grid; gap: var(--sp-3); min-height: 140px; }
.read-wait { display: flex; align-items: center; gap: var(--sp-2); color: var(--accent); font: var(--text-body-sm); font-weight: 500; }
.read-wait .spinner { color: var(--accent); }
.read-meta { font: var(--text-caption); }
.read-raw { border-radius: var(--r-md); max-height: min(60vh, 560px); }
.read-note { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-3); color: var(--ink-3); font: var(--text-caption); }
.read-note .icon { width: 14px; height: 14px; flex: none; }
.read-actions { margin-right: auto; display: flex; gap: var(--sp-2); }
.read-body .md-render { max-height: min(60vh, 560px); overflow: auto; padding-right: var(--sp-2); }
.read-empty { padding: var(--sp-6) 0; text-align: center; }

/* Library */
.library-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.library-head .setup-source { flex: 1 1 320px; }
.library-table .group-row th .icon { width: 14px; height: 14px; vertical-align: -2px; margin-right: var(--sp-2); color: var(--ink-3); }
.library-table tbody th { font-weight: 400; }
.library-table td.row-actions { text-align: right; white-space: nowrap; width: 1%; }
@media (max-width: 479px) { .library-table th:nth-child(3), .library-table td:nth-child(3) { display: none; } } /* "Changed" folds away on small phones */
.library-table tr.is-going { opacity: 0.6; }
.file-link { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 2px 0; border: 0; background: none; color: var(--accent); font: var(--text-body-sm); font-weight: 500; text-align: left; cursor: pointer; }
.file-link .mono { font: var(--text-mono); font-weight: 500; }
@media (pointer: coarse) { .file-link { min-height: var(--target); } }
.file-link:hover { text-decoration: underline; }
.file-link .icon { width: 16px; height: 16px; color: var(--ink-3); flex: none; }
.banner-flight { background: var(--accent-wash); border-color: transparent; color: var(--ink-1); }
.banner-flight .flight-dot { margin-top: 6px; }
.upload-path { font: var(--text-body-sm); min-height: 18px; }
.file-input { font: var(--text-body-sm); color: var(--ink-2); padding: var(--sp-2) 0; }
.file-input::file-selector-button { font: inherit; font-weight: 500; margin-right: var(--sp-3); padding: 6px var(--sp-3); border-radius: var(--r-md);
  border: 1px solid var(--line-input); background: var(--surface-2); color: var(--ink-1); cursor: pointer; }

/* Activity */
.empty-read { display: flex; gap: var(--sp-3); align-items: flex-start; color: var(--ink-2); font: var(--text-body-sm); }
.empty-read > .icon { color: var(--ink-3); flex: none; margin-top: 2px; }
.read-waiting { display: grid; gap: var(--sp-3); }
.tool-usage { display: grid; gap: var(--sp-3); }
.bar-list { display: grid; gap: var(--sp-2); }
.bar-list li { display: grid; grid-template-columns: minmax(110px, 160px) minmax(0, 1fr) 72px; gap: var(--sp-3); align-items: center; font: var(--text-body-sm); }
.bar-track { height: 8px; border-radius: var(--r-pill); background: var(--meter-track); overflow: hidden; }
.bar-fill { display: block; height: 100%; width: var(--fill); background: var(--viz-single); border-radius: inherit; animation: grow-x var(--dur-3) var(--ease-out); transform-origin: left; }
.bar-value { text-align: right; color: var(--ink-2); }
@keyframes grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 479px) { .bar-list li { grid-template-columns: minmax(0, 1fr) 64px; } .bar-track { grid-column: 1 / -1; grid-row: 2; } }
@media (forced-colors: active) { .bar-fill { background: CanvasText; } }

/* ================================================================ Chat */
.chat-wrap { display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 1fr) 280px; align-items: start; }
.chat-main { display: grid; gap: var(--sp-4); min-width: 0; }
.chat-aside { display: grid; gap: var(--sp-3); position: sticky; top: var(--sp-6); }
.chat-aside:empty { display: none; }
.chat-side { display: grid; gap: var(--sp-2); font: var(--text-body-sm); }
.chat-side-title { font: var(--text-caption); color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; }
.chat-side-kv { display: grid; grid-template-columns: 1fr auto; gap: 4px var(--sp-3); }
.chat-side-kv dt { color: var(--ink-2); }
.chat-side-kv dd { color: var(--ink-1); font-weight: 500; text-align: right; }
@media (max-width: 1199px) { .chat-wrap { grid-template-columns: minmax(0, 1fr); } .chat-aside { display: none; } }
.chat { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: max(460px, calc(100dvh - 420px)); max-height: 960px; overflow: hidden; }
.chat-head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-5); border-bottom: 1px solid var(--line); min-width: 0; }
.chat-head .btn { flex: none; }
@media (max-width: 479px) {
  .chat-head { padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-3); gap: var(--sp-2); }
  .chat-end-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .chat-name .mode-badge { display: none; }
}
.chat, .chat-log, .msg, .msg-col, .msg-bubble { min-width: 0; }
.chat-who { flex: 1; min-width: 0; display: grid; gap: 1px; }
.chat-name { display: flex; align-items: center; gap: var(--sp-2); font: var(--text-title-3); }
.chat-meta { color: var(--ink-3); font: var(--text-caption); font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-avatar { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--accent-wash); color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent); font: 600 0.875rem/1 var(--font-sans); }
.chat-avatar-lg { width: 56px; height: 56px; font-size: 1.375rem; }
.chat-log { overflow-y: auto; overscroll-behavior: contain; padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); scroll-behavior: smooth; }
.chat-log:focus-visible { outline-offset: -2px; border-radius: 0; }
.chat-loading { display: grid; gap: var(--sp-3); }
.chat-empty { margin: auto; max-width: 440px; display: grid; justify-items: center; gap: var(--sp-2); text-align: center; padding: var(--sp-6) 0; }
.chat-empty h3 { font: var(--text-title-2); margin-top: var(--sp-2); }
.chat-empty p { font: var(--text-body-sm); }
.chat-suggest { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-3); }
.chip-btn { cursor: pointer; height: auto; min-height: 30px; padding: 5px var(--sp-3); white-space: normal; text-align: left; font: var(--text-body-sm); color: var(--ink-1); transition: background-color var(--dur-1) var(--ease-out); }
.chip-btn:hover { background: var(--surface-2); }
@media (pointer: coarse) { .chip-btn { min-height: var(--target); } }

.msg { display: flex; gap: var(--sp-3); max-width: 100%; animation: msg-in var(--dur-2) var(--ease-out); }
@keyframes msg-in { from { transform: translateY(4px); } to { transform: none; } }
.msg-user { flex-direction: column; align-items: flex-end; margin-left: 15%; }
.msg-agent { align-items: flex-start; margin-right: 6%; }
.msg-col { display: grid; gap: 4px; min-width: 0; flex: 1; }
.msg-bubble { min-width: 0; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-lg); }
.msg-user .msg-bubble { background: var(--accent-wash); color: var(--ink-1); border-bottom-right-radius: var(--r-xs); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); }
.msg-agent .msg-bubble { background: var(--surface-2); border: 1px solid var(--line); border-top-left-radius: var(--r-xs); }
.msg-text { white-space: pre-wrap; overflow-wrap: anywhere; font: var(--text-body); }
.msg-user.is-failed .msg-bubble { box-shadow: inset 0 0 0 1px var(--crit); }
.msg-foot { display: flex; align-items: center; gap: var(--sp-3); color: var(--ink-3); font: var(--text-caption); font-weight: 400; flex-wrap: wrap; }
.msg-user .msg-foot { justify-content: flex-end; }
.msg-usage { font-variant-numeric: tabular-nums; }
.msg-copy { height: 26px; padding: 0 var(--sp-2); color: var(--ink-3); }
.msg-copy .icon { width: 14px; height: 14px; }
@media (pointer: coarse) { .msg-copy { height: var(--target); } }
.chat-md { max-width: none; font-size: 0.9375rem; line-height: 1.6; color: var(--ink-1); }
.chat-md > :last-child { margin-bottom: 0; }
.chat-md p, .chat-md ul, .chat-md ol, .chat-md blockquote, .chat-md .md-table { margin-bottom: var(--sp-3); }
.chat-md .md-table { overflow-x: auto; }
.chat-md .table { font: var(--text-body-sm); }
.msg-working .msg-progress { display: flex; align-items: center; gap: var(--sp-3); padding: 6px 0; color: var(--ink-2); font: var(--text-body-sm); }
.msg-progress b { color: var(--ink-1); font-weight: 600; }
.typing { display: inline-flex; gap: 3px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: typing 1.2s var(--ease-in-out) infinite; }
.typing i:nth-child(2) { animation-delay: 0.15s; } .typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-3px); opacity: 1; } }
.msg-error { display: flex; align-items: flex-start; gap: var(--sp-2); flex-wrap: wrap; margin-left: 15%; justify-content: flex-end; color: var(--crit-ink); font: var(--text-body-sm); text-align: right; }
.msg-error .icon { flex: none; margin-top: 2px; }
.msg-system { align-self: center; color: var(--ink-3); font: var(--text-caption); }
.chat-closed { display: grid; justify-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); text-align: center; font: var(--text-body-sm); }
.chat-compose-wrap { display: grid; gap: var(--sp-2); }
.chat-compose-wrap[hidden] { display: none; }
.chat-foot { display: grid; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4) var(--sp-3); border-top: 1px solid var(--line); background: var(--surface-1); }
.chat-foot[hidden] { display: none; }
.chat-real { display: flex; align-items: center; gap: var(--sp-2); color: var(--ink-2); font: var(--text-caption); font-weight: 400; }
.chat-real .icon { width: 14px; height: 14px; color: var(--warn); flex: none; }
.chat-real b { color: var(--ink-1); font-weight: 600; }
.chat-status { font: var(--text-caption); font-weight: 400; color: var(--ink-2); }
.chat-status:empty { display: none; }
.chat-status.is-offline, .chat-status.is-error { color: var(--crit-ink); }
.chat-compose { display: flex; align-items: flex-end; gap: var(--sp-2); }
.chat-input { flex: 1; min-width: 0; resize: none; field-sizing: content; min-height: 44px; max-height: 200px; padding: 11px var(--sp-3); border-radius: var(--r-md);
  border: 1px solid var(--line-input); background: var(--surface-2); color: var(--ink-1); font: var(--text-body); line-height: 20px; }
.chat-input:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; border-color: transparent; }
.chat-input:disabled { opacity: 0.6; cursor: not-allowed; }
.chat-input::placeholder { color: var(--ink-3); }
.chat-send { height: 44px; flex: none; }
.chat-hint { display: flex; justify-content: space-between; gap: var(--sp-3); color: var(--ink-3); font: var(--text-micro); font-weight: 400; }
.chat-count.is-over { color: var(--crit-ink); font-weight: 600; }
@media (pointer: coarse) { .chat-hint-keys { display: none; } .chat-input { font-size: 1rem; } }
@media (max-width: 719px) {
  /* Phones: the conversation fills the space between the top bar and the tab bar; opening the tab scrolls it there. */
  .chat { height: calc(100dvh - var(--topbar-h) - var(--tabbar-h) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - var(--sp-4));
    min-height: 380px; max-height: none; border-radius: var(--r-lg); scroll-margin-top: calc(var(--topbar-h) + env(safe-area-inset-top) + var(--sp-2)); }
  .chat-log { padding: var(--sp-4) var(--sp-3); }
  .msg-user, .msg-error { margin-left: 8%; }
  .msg-agent { margin-right: 0; }
  .msg-agent > .chat-avatar { display: none; }
  .chat-send-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .chat-send { width: 44px; padding: 0; }
}
.chat-access { min-width: 0; }
.chat-access:empty { display: none; }
.chat-access > p { display: flex; align-items: center; gap: var(--sp-2); font: var(--text-body-sm); }
.chat-access > p .icon { width: 14px; height: 14px; }
.chat-access-row { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-lg); background: var(--surface-1); border: 1px solid var(--line); }
@media (prefers-reduced-motion: reduce) { .typing i, .msg, .bar-fill { animation: none; } .chat-log { scroll-behavior: auto; } }
@media (forced-colors: active) { .msg-bubble { border: 1px solid CanvasText; } .typing i { background: CanvasText; } }

/* ================================================================ fleet: observed marker, chat shortcut */
.ac-head-end { display: flex; align-items: center; gap: var(--sp-2); flex: none; }
.ac-beat, .cell-beat { display: inline-flex; flex-direction: column; gap: 2px; min-width: 0; }
.obs-mark { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-3); font: var(--text-micro); font-weight: 400; white-space: nowrap; }
.obs-mark .icon { width: 12px; height: 12px; flex: none; }
.obs-mark.is-stale { color: var(--warn-ink); }
.chat-shortcut { position: relative; z-index: 2; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-md); color: var(--ink-2);
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); }
.chat-shortcut .icon { width: 16px; height: 16px; }
.chat-shortcut:hover { background: var(--accent-wash); color: var(--accent); text-decoration: none; }
@media (pointer: coarse) { .chat-shortcut { width: var(--target); height: var(--target); } }
.mem-flags { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); margin-top: var(--sp-3); font: var(--text-body-sm); }
.mem-flags li { display: inline-flex; align-items: center; gap: 6px; }
.mem-provider { font: var(--text-body-sm); color: var(--ink-1); }
.unsupported-list { margin-top: var(--sp-2); }
.sessions-table td .sub { display: block; margin-top: 2px; color: var(--ink-3); font: var(--text-caption); font-weight: 400; }

/* a finished change on the set-up tabs: one line, opens to the full card */
.change-recent > summary { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-lg);
  background: var(--surface-1); border: 1px solid var(--line); cursor: pointer; font: var(--text-body-sm); list-style: none; }
.change-recent > summary::-webkit-details-marker { display: none; }
.change-recent.is-crit > summary { box-shadow: inset 3px 0 0 var(--crit); }
.change-recent.is-ok > summary { box-shadow: inset 3px 0 0 var(--ok); }
.change-recent-text { flex: 1; min-width: 0; }
.change-recent-text b { font-weight: 600; }
.change-recent-more { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); font-weight: 500; flex: none; }
.change-recent-more .icon { width: 14px; height: 14px; transition: transform var(--dur-1) var(--ease-out); }
.change-recent[open] .change-recent-more .icon { transform: rotate(90deg); }
.change-recent[open] > summary { margin-bottom: var(--sp-3); }
@media (pointer: coarse) { .change-recent > summary { min-height: var(--target); } }
.tab-dot-pending { background: var(--accent); box-shadow: 0 0 0 2px var(--accent-wash); }