/* Chat content uses the shared theme; generated content never supplies styles. */
.chat-activity { align-self: flex-start; font-size: 12px; color: var(--text-faint); margin: 0 0 14px; padding: 8px 10px; max-width: 100%; }
.chat-activity summary { display: flex; align-items: center; gap: 9px; cursor: pointer; list-style: none; width: fit-content; user-select: none; }
.chat-activity summary::-webkit-details-marker { display: none; }
.chat-activity summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; border-radius: 3px; }
.chat-activity-marker { width: 15px; height: 15px; display: grid; place-items: center; font-size: 10px; color: var(--accent); }
.chat-activity[data-state='sending'] .chat-activity-marker,
.chat-activity[data-state='waiting'] .chat-activity-marker,
.chat-activity[data-state='responding'] .chat-activity-marker { border: 1.5px solid var(--border-strong); border-top-color: var(--accent); border-radius: 50%; animation: activity-spin 1.3s linear infinite; }
.chat-activity[data-state='done'] .chat-activity-marker { animation: activity-complete 280ms ease-out; }
.chat-activity[data-state='failed'] .chat-activity-marker,
.chat-activity[data-state='disconnected'] .chat-activity-marker { color: var(--danger); }
.chat-activity-detail { color: var(--text-dim); }
.chat-activity-detail::before { content: '\00b7'; margin-right: 9px; }
.chat-activity-chevron { margin-left: 8px; transition: transform 180ms ease; }
.chat-activity[open] .chat-activity-chevron { transform: rotate(180deg); }
.chat-activity-steps { list-style: none; padding: 10px 0 0 0; margin: 0; }
/* Closed details skip rendering their contents. Starting an entrance there
   leaves Chromium's animation completion pending until the details opens. */
.chat-activity[open] .chat-activity-steps { animation: activity-reveal 220ms ease-out; }
.chat-activity-steps li { display: flex; align-items: center; position: relative; gap: 10px; min-height: 29px; opacity: .55; transition: opacity 250ms, color 250ms; }
.chat-activity-steps li:not(:last-child)::after { content: ''; position: absolute; top: 22px; bottom: -7px; left: 7px; width: 1px; background: var(--border-strong); }
.chat-step-marker { display: grid; place-items: center; width: 15px; height: 15px; font-size: 10px; border-radius: 50%; border: 1px solid var(--border-strong); }
.chat-activity-steps li[data-state='done'] { opacity: 1; color: var(--text-dim); }
.chat-activity-steps li[data-state='active'] { opacity: 1; color: var(--accent); }
.chat-activity[open] .chat-activity-steps li[data-state='active'] .chat-step-marker { animation: thinking-pulse 1.8s ease-in-out infinite; }
.chat-progress-card { font-family: inherit; text-align: left; }
@keyframes activity-spin { to { transform: rotate(360deg); } }
@keyframes activity-reveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes activity-complete { from { opacity: .2; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
@media(prefers-reduced-motion: reduce) { .chat-activity *, .chat-activity-steps li { animation: none !important; transition: none !important; } }
.chat-prose { white-space: normal; line-height: 1.75; font-size: 15px; overflow-wrap: anywhere; }
.chat-prose > :first-child { margin-top: 0; }
.chat-prose > :last-child { margin-bottom: 0; }
.chat-prose p { margin: 0 0 1em; }
.chat-prose h1, .chat-prose h2, .chat-prose h3, .chat-prose h4, .chat-prose h5, .chat-prose h6 { font-weight: 600; line-height: 1.35; letter-spacing: -.02em; margin: 1.5em 0 .65em; }
.chat-prose h1 { font-size: 1.55em; }
.chat-prose h2 { font-size: 1.3em; }
.chat-prose h3 { font-size: 1.12em; }
.chat-prose ul, .chat-prose ol { padding-left: 1.5em; margin: .65em 0 1em; }
.chat-prose li { padding-left: .2em; margin: .3em 0; }
.chat-prose li > p { margin: .4em 0; }
.chat-prose blockquote { margin: 1em 0; padding: .3em 0 .3em 1em; border-left: 2px solid var(--border-strong); color: var(--text-dim); }
.chat-prose blockquote p:last-child { margin-bottom: 0; }
.chat-prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.chat-prose hr { border: 0; border-top: 1px solid var(--border); margin: 1.5em 0; }
.chat-prose code, .artifact-source { font-family: 'Cascadia Code', Consolas, monospace; font-size: .88em; }
.chat-prose :not(pre) > code { padding: .15em .35em; border-radius: 5px; background: var(--surface-2); }
.chat-code-block { border: 1px solid var(--border); background: var(--bg-panel); border-radius: 12px; margin: 1em 0; overflow: hidden; }
.chat-code-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 14px; border-bottom: 1px solid var(--border); color: var(--text-faint); font: 11px/1.5 var(--font-mono, monospace); }
.chat-code-header button { background: none; color: var(--text-dim); padding: 3px 5px; border: 0; cursor: pointer; font: inherit; }
.chat-code-header button:hover { color: var(--text); }
.chat-prose pre { margin: 0; padding: 16px; overflow-x: auto; white-space: pre; line-height: 1.65; }
.chat-prose pre code { background: none; }
.chat-table-wrap { max-width: 100%; overflow-x: auto; margin: 1em 0; border: 1px solid var(--border); border-radius: 10px; }
.chat-prose table { width: 100%; border-collapse: collapse; font-size: .9em; }
.chat-prose th, .chat-prose td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--border); min-width: 100px; }
.chat-prose th { background: var(--bg-panel); font-weight: 550; }
.chat-prose tr:last-child td { border-bottom: 0; }
.hljs-comment, .hljs-quote { color: var(--text-faint); font-style: italic; }
.hljs-keyword, .hljs-selector-tag, .hljs-literal { color: var(--accent); }
.hljs-string, .hljs-attr, .hljs-template-tag { color: var(--success); }
.hljs-number, .hljs-symbol, .hljs-variable { color: var(--warn); }
.hljs-title, .hljs-built_in, .hljs-type { color: var(--text); font-weight: 600; }
.msg-interrupted { font-size: 12px; color: var(--text-dim); margin-top: 14px; padding: 10px 12px; border-left: 2px solid var(--danger); background: var(--bg-panel); }
.chat-fallback-panel { margin: 12px 0 4px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-panel); }
.chat-fallback-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.chat-fallback-panel strong { display: block; font-size: 12px; font-weight: 600; color: var(--text); }
.chat-fallback-panel p { margin: 5px 0 11px; max-width: 62ch; font-size: 12px; line-height: 1.55; color: var(--text-dim); }
.chat-fallback-choices { display: flex; flex-wrap: wrap; gap: 6px; }
.chat-fallback-choices .btn { font-size: 11px; }
.msg.msg-failed .msg-body { color: var(--text); }
#chat-main { position: relative; min-width: 0; }
.chat-jump { position: absolute; bottom: calc(var(--composer-height, 140px) + 12px); left: 50%; transform: translateX(-50%); z-index: 3; border-radius: 24px; box-shadow: var(--shadow-elevated); }
.chat-jump[hidden] { display: none; }
.chat-summary-trigger { flex-shrink: 0; margin-left: auto; padding: 6px 11px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--bg-panel); color: var(--text-dim);
  font: inherit; font-size: 11px; cursor: pointer; }
.chat-summary-trigger:hover { color: var(--text); border-color: var(--border-strong); }
.chat-summary-trigger[hidden], .chat-timeline[hidden] { display: none; }
.chat-summary-trigger:focus-visible, .chat-timeline-point:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.chat-timeline { position: absolute; top: 82px; right: 24px; bottom: calc(var(--composer-height, 140px) + 26px);
  z-index: 4; width: 20px; min-height: 120px; }
.chat-timeline-track { position: relative; width: 100%; height: 100%; }
.chat-timeline-track::before { content: ''; position: absolute; top: 0; bottom: 0; left: 9px;
  width: 1px; background: var(--border-strong); }
.chat-timeline-point { position: absolute; left: 3px; width: 13px; height: 13px; padding: 0; transform: translateY(-50%);
  border: 2px solid var(--bg); border-radius: 50%; background: var(--text-faint); cursor: pointer; }
.chat-timeline-point:hover, .chat-timeline-point.active { background: var(--accent); }
.chat-timeline-preview { display: none; position: absolute; right: 19px; top: 50%; transform: translateY(-50%);
  width: max-content; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 6px 9px; border: 1px solid var(--border-strong); border-radius: 7px;
  background: var(--bg-panel-solid); box-shadow: var(--shadow-elevated); color: var(--text); font-size: 11px; }
.chat-timeline-point:hover .chat-timeline-preview, .chat-timeline-point:focus-visible .chat-timeline-preview { display: block; }
.chat-summary-backdrop { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center;
  padding: 20px; background: rgba(var(--shade-rgb), .6); }
.chat-summary-dialog { display: flex; flex-direction: column; width: min(580px, 100%); max-height: min(690px, 86vh);
  padding: 22px; border: 1px solid var(--border-strong); border-radius: 16px;
  background: var(--bg-panel-solid); box-shadow: var(--shadow-elevated); color: var(--text); }
.chat-summary-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.chat-summary-eyebrow { color: var(--accent); font-size: 10px; font-weight: 650; letter-spacing: .11em; }
.chat-summary-header h2 { margin: 5px 0 0; font-size: 20px; font-weight: 600; }
.chat-summary-meta { margin: 15px 0; color: var(--text-faint); font-size: 12px; line-height: 1.5; }
.chat-summary-body { min-height: 100px; overflow: auto; white-space: pre-wrap; font-size: 13px; line-height: 1.7; }
.chat-summary-footer { display: flex; justify-content: flex-end; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
#chat-main:has(.chat-find:not([hidden])) .chat-summary-trigger { display: none; }
@media (max-width: 1100px) { .chat-timeline { display: none; } }
@media (max-width: 680px) { .chat-summary-dialog { padding: 18px; max-height: 85vh; } }
.chat-input-right { min-width: 0; gap: 4px; }
/* Mode: a pill matching the model control. */
.chat-permission-control { display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; height: 32px; padding: 0 4px 0 12px;
  border: 1px solid var(--hairline-soft); border-radius: 999px; background: rgba(var(--ink-rgb), .025);
  color: var(--text-faint); font-size: 10px; white-space: nowrap; }
.chat-permission-control select { width: auto; height: 26px; padding: 0 22px 0 6px; border: 0; border-radius: 999px;
  background-color: transparent; background-position: right 6px center; color: var(--text); font: inherit;
  font-size: 12px; cursor: pointer; box-shadow: none; }
.chat-permission-control[data-mode='auto'] { border-color: var(--accent); }
.chat-permission-control[data-mode='auto'] select { color: var(--accent); }
.chat-permission-control select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.chat-permission-control select:disabled { opacity: .6; cursor: wait; }
.chat-permission-notice { padding: 1px 12px 9px; color: var(--accent); font-size: 10px; line-height: 1.4; text-align: center; }
.chat-permission-notice[hidden] { display: none; }
.side-chat-composer .chat-permission-notice { flex-basis: 100%; padding: 4px 2px 0; text-align: left; }

.chat-composer-dock .attach-strip { width: 100%; max-width: none; padding: 0 0 10px; }
.chat-composer-dock .attach-strip:empty { display: none; }
.chat-input-top:has(.chat-reference-chips) { flex-wrap: wrap; }
.chat-input-top:has(.chat-reference-chips) #chat-input { flex-basis: 100%; }
.chat-reference-picker {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 14px); z-index: 60;
  max-height: min(350px, 42vh); overflow-y: auto;
}
.chat-reference-picker[hidden] { display: none; }
.chat-reference-heading { padding: 10px 11px 4px; color: var(--text-faint); font-size: 11px; font-weight: 600; }
.chat-reference-option {
  display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 2px 10px;
  width: 100%; padding: 9px 11px; border: 0; border-radius: 8px;
  background: transparent; color: var(--text); font: inherit; font-size: 12px;
  text-align: left; cursor: pointer;
}
.chat-reference-option:hover, .chat-reference-option[aria-selected='true'] { background: var(--surface-2); }
.chat-reference-option:focus-visible, .chat-reference-chip button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.chat-reference-kind { color: var(--accent); font-size: 10px; line-height: 1.6; }
.chat-reference-name, .chat-reference-detail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-reference-name { font-weight: 550; }
.chat-reference-detail { grid-column: 2; color: var(--text-faint); font-size: 11px; }
.chat-reference-empty { padding: 12px; color: var(--text-faint); font-size: 12px; }
.slash-command-option { grid-template-columns: 90px minmax(0, 1fr); }
/* Phone: stop short of the floating menu button at the top left. */
@media (max-width: 768px) { .chat-reference-picker { max-height: min(280px, 34vh); } }
.slash-command-option .chat-reference-name,
.slash-command-option .chat-reference-detail { white-space: normal; overflow-wrap: anywhere; }
.chat-reference-chips { display: flex; flex-basis: 100%; flex-wrap: wrap; gap: 6px; }
.chat-reference-chips:empty { display: none; }
.chat-reference-chip {
  display: inline-flex; align-items: center; min-width: 0; max-width: 100%; gap: 5px;
  padding: 4px 5px 4px 8px; border: 1px solid var(--border-strong);
  border-radius: 7px; background: var(--surface-2); color: var(--text-dim); font-size: 11px;
}
.chat-reference-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-reference-chip button {
  flex: 0 0 auto; border: 0; border-radius: 4px; background: transparent;
  color: var(--text-faint); font: inherit; font-size: 16px; line-height: 1; cursor: pointer;
}
.chat-reference-chip button:hover { color: var(--text); }
.artifact-comment-chip { max-width: min(360px, 100%); align-items: flex-start; }
.chat-reference-chip .artifact-comment-open { display: flex; flex: 1; flex-direction: column; min-width: 0; text-align: left; font-size: 11px; line-height: 1.5; color: var(--text-dim); }
.artifact-comment-open span { width: 100%; }
.artifact-comment-open span:first-child { font-weight: 600; color: var(--text); }
.artifact-tab-panel { position: relative; }
.artifact-select[aria-pressed="true"] { color: var(--accent); background: var(--surface-2); }
[data-selecting="true"] [data-pick] { cursor: crosshair; touch-action: none; user-select: none; }
.artifact-pick-hover, .artifact-picked { outline: 2px solid var(--accent); outline-offset: -2px; }
.artifact-commented { outline: 2px dashed var(--accent); outline-offset: -2px; }
.artifact-picked.artifact-commented { outline-style: solid; }
.artifact-image-viewport, .artifact-pdf-page-wrap { position: relative; }
.artifact-review-rect { position: absolute; pointer-events: none; z-index: 10001; }
.office-pick-group { position: absolute; pointer-events: none; z-index: 10001; }
.artifact-comment-box { position: absolute; z-index: 10002; width: min(310px, calc(100% - 16px)); padding: 12px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--bg-panel-solid); box-shadow: var(--shadow-elevated); }
.artifact-comment-box[hidden] { display: none; }
.artifact-comment-box textarea { display: block; width: 100%; max-height: 140px; resize: vertical; font: inherit; }
.artifact-comment-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
@media (max-width: 679px) {
  .artifact-comment-box { left: 8px !important; top: auto !important; bottom: 8px; width: calc(100% - 16px); }
  .artifact-tab-panel:has(.artifact-comment-box:not([hidden])) .artifact-preview { padding-bottom: 180px; }
}
.chat-reference-kind { display: flex; align-items: center; gap: 5px; }
.handoff-avatar {
  display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px;
  border-radius: 50%; color: var(--text); background: var(--surface-2); font-size: 12px;
}
.chat-reference-chip .handoff-avatar { width: 20px; height: 20px; font-size: 10px; }
.agent-message-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-weight: 550; margin-bottom: 10px; }
.agent-handoff { border: 1px solid var(--hairline); border-radius: var(--radius); padding: 14px; }
.agent-handoff .agent-message-heading { margin-bottom: 0; width: 100%; }
/* The status as a pill at the card's right edge, tinted by state. */
.agent-handoff-status { margin-left: auto; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 500;
  border: 1px solid var(--hairline-soft); color: var(--text-dim); }
.agent-handoff-status[data-status="working"] { color: var(--accent); border-color: rgba(var(--accent-rgb), .45); }
.agent-handoff-status[data-status="needs_you"] { color: var(--warn); border-color: rgba(var(--warn-rgb), .5); background: rgba(var(--warn-rgb), .08); }
.agent-handoff-status[data-status="done"] { color: var(--success); border-color: rgba(var(--success-rgb), .45); }
.agent-handoff-status[data-status="failed"] { color: var(--danger); border-color: rgba(var(--danger-rgb), .45); }
.agent-handoff-note { margin-top: 8px; }
.agent-handoff-answer { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.agent-handoff-answer textarea { flex: 1 1 180px; min-width: 0; }
.side-chat-input-top { flex: 1; min-width: 0; position: relative; }
.side-chat-input-top .side-chat-input { width: 100%; }
.model-picker-btn { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.model-picker-item { width: 100%; text-align: left; font: inherit; background: none; border: 0; }
.model-version-form { padding: 12px; display: grid; gap: 10px; }
.model-version-form label { font-size: 12px; font-weight: 550; }
.model-version-form input { width: 100%; min-width: 0; }
.model-version-form p { font-size: 12px; line-height: 1.6; margin: 0; }

/* -- model catalog + reasoning level (David's ask 2026-09-15) ----------- */
.model-version-search { padding: 8px 8px 4px; position: sticky; top: -4px; z-index: 1; background: var(--bg-panel-solid); }
.model-version-search input { width: 100%; min-width: 0; }
.model-catalog-list { display: grid; grid-auto-rows: max-content; align-content: start; gap: 2px; padding: 0 4px 4px; }
/* The model menu is clamped to the window (menuFit.js). Its two long lists, the
   connections and the model versions, scroll inside the clamp, so the heading,
   search box, reasoning buttons and footer stay in view. If even the fixed parts
   do not fit, the whole menu scrolls as a last resort. */
.model-picker-unified:not(.hidden) { display: flex; flex-direction: column; }
.model-picker-unified > * { flex: 0 0 auto; }
.model-picker-unified > .model-connection-list { flex: 0 .05 auto; min-height: 56px; overflow-y: auto; overscroll-behavior: contain; }
.model-picker-unified > .model-version-section { flex: 1 1 auto; min-height: 196px; display: flex; flex-direction: column; }
.model-picker-unified > .model-version-section:has(.model-effort-row) { min-height: 242px; }
.model-picker-unified .model-version-section > * { flex: 0 0 auto; }
.model-picker-unified .model-version-section > .model-catalog-list { flex: 1 1 auto; min-height: 72px; overflow-y: auto; overscroll-behavior: contain; }
.model-catalog-list .muted { font-size: 12px; line-height: 1.6; margin: 0; padding: 8px 6px; }
.model-catalog-item { display: grid; gap: 2px; padding: 8px 10px; }
.model-catalog-name { font-size: 12.5px; font-weight: 550; }
.model-catalog-desc {
  font-size: 11px; color: var(--text-faint); line-height: 1.5;
  /* Descriptions vary from a few words to a sentence; clamp so one long
     entry can't push the rest of the list out of view. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.model-effort-row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; padding: 8px 10px; border-top: 1px solid var(--border); }
.model-effort-label { font-size: 11px; color: var(--text-faint); margin-right: 2px; }
.model-effort-btn {
  background: transparent; border: 1px solid var(--border); color: var(--text-dim);
  border-radius: 6px; padding: 3px 8px; font: inherit; font-size: 11px; cursor: pointer;
}
.model-effort-btn:hover { border-color: var(--border-strong); color: var(--text); }
.model-effort-btn.active { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }
.model-custom-details { border-top: 1px solid var(--border); }
.model-custom-details summary { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; font-size: 12.5px; color: var(--text-dim); cursor: pointer; list-style: none; }
.model-custom-details summary::-webkit-details-marker { display: none; }
.model-custom-details summary::before { content: "\203A"; width: 10px; font-size: 15px; line-height: 1; transition: transform .15s ease; }
.model-custom-details[open] summary::before { transform: rotate(90deg); }
.model-custom-details summary:hover { color: var(--text); }

/* -- context meter ------------------------------------------------------ */
/* Deliberately quiet: this reports state, it is not a control. It stays
   hidden entirely until a turn reports a real measurement. */
/* Context: a small ring, the share of the window this chat now fills. */
.context-pill { display: flex; align-items: center; gap: 5px; padding: 4px 6px; border-radius: 999px; font-size: 11px; color: var(--text-faint); cursor: default; }
.context-pill[hidden] { display: none; }
#overflow-menu .overflow-menu-item[hidden] { display: none; }
.context-ring { width: 16px; height: 16px; flex-shrink: 0; }
.context-ring-track { fill: none; stroke: var(--border-strong); stroke-width: 2.2; }
.context-ring-fill { fill: none; stroke: var(--text-dim); stroke-width: 2.2; stroke-linecap: round; transition: stroke-dasharray 240ms ease-out; }
.context-text { font-variant-numeric: tabular-nums; }
.context-pill[data-level='warn'] .context-ring-fill { stroke: var(--warn); }
.context-pill[data-level='warn'] .context-text { color: var(--warn); }
.context-pill[data-level='high'] .context-ring-fill { stroke: var(--danger); }
.context-pill[data-level='high'] .context-text { color: var(--danger); }
@media (prefers-reduced-motion: reduce) { .context-ring-fill { transition: none; } }
.artifact-card { display: flex; align-items: center; gap: 14px; width: min(100%, 430px); margin: 12px 0; padding: 16px; text-align: left; border: 1px solid var(--border); border-radius: 12px; color: var(--text); background: var(--bg-panel); cursor: pointer; transition: border-color 180ms, background 180ms; font: inherit; }
.artifact-card:hover { border-color: var(--border-strong); background: var(--surface-2); }
.artifact-icon { display: grid; place-items: center; flex: 0 0 44px; height: 48px; border: 1px solid var(--border-strong); border-radius: 7px; font: 10px monospace; color: var(--text-dim); }
.artifact-info { display: flex; flex-direction: column; min-width: 0; gap: 3px; }
.artifact-info strong { font-size: 13px; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.artifact-info > span { font-size: 11px; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.artifact-arrow { margin-left: auto; color: var(--text-faint); }
.artifact-panel { flex: 0 0 clamp(330px, 38vw, 660px); min-width: 0; display: flex; flex-direction: column; background: var(--bg-panel); border-left: 1px solid var(--border); animation: artifact-enter 220ms var(--ease-out, ease-out); }
.artifact-viewer, .chat-files-panel { animation: none; } /* The shared pane mount animates retained documents too. */
.chat-pane-resizer { display: none; }
.chat-pane-toolbar, .chat-new-window, .chat-window-menu-item { display: none; }
.chat-pane-stack > .chat-stacked-pane { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; }
.chat-pane-stack > .chat-stacked-pane[hidden] { display: none; }
.single-chat-window #sidebar, .single-chat-window .ms-drawer, .single-chat-window .ms-menu-btn,
.single-chat-window #chat-sessions, .single-chat-window #chat-history-toggle { display: none !important; }
.single-chat-window #content { margin-left: 0; }
/* Clip content while its region grows from zero, including wide previews. */
.chat-layout.pane-opening > .artifact-panel { overflow: hidden; }
@media (min-width: 1101px) {
  .chat-layout.has-pane #chat-main {
    flex: 0 0 auto; width: clamp(380px, var(--chat-pane-width), 70%); /* matches MAX_SHARE in chatPaneLayout.js */
    --chat-column: min(860px, 100%);
    transition: width 180ms var(--ease-out, ease-out);
  }
  .chat-layout.has-pane > .artifact-panel { flex: 1 1 0; }
  .chat-layout.has-pane > .chat-pane-resizer {
    display: block; flex: 0 0 12px; position: relative; cursor: col-resize;
    touch-action: none; outline-offset: -2px;
  }
  .chat-pane-resizer::after { content: ''; position: absolute; inset: 0 5px; background: var(--border); }
  .chat-pane-resizer:hover::after, .chat-pane-resizer:focus-visible::after { background: var(--accent); }
  .chat-pane-resizer:focus-visible { outline: 2px solid var(--accent); }
  .chat-layout.pane-dragging { cursor: col-resize; user-select: none; }
  .chat-layout.pane-dragging #chat-main { transition: none; }
  .chat-layout.pane-opening #chat-main { transition: none; }
  /* Embedded previews cannot steal a captured drag. */
  .chat-layout.pane-dragging iframe { pointer-events: none; }
  .chat-layout.pane-maximized > #chat-main,
  .chat-layout.pane-maximized > #chat-sessions,
  .chat-layout.has-pane.pane-maximized > .side-chat,
  .chat-layout.pane-maximized > .chat-pane-resizer { display: none; }
}
.artifact-pane-top { flex-shrink: 0; border-bottom: 1px solid var(--border); }
.artifact-tabs { display: flex; overflow-x: auto; min-width: 0; }
.artifact-tab { display: flex; align-items: center; flex: 0 1 220px; min-width: 120px; border-right: 1px solid var(--border); }
.artifact-tab.active { background: var(--surface-2); box-shadow: inset 0 -2px var(--accent); }
.artifact-tab-label, .artifact-tab-close {
  font: inherit; font-size: 12px; color: var(--text-dim); background: transparent;
  border: 0; cursor: pointer; min-height: 38px;
}
.artifact-tab-label { flex: 1; min-width: 0; padding: 10px 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.artifact-tab-close { flex: 0 0 34px; padding: 6px; }
.artifact-tab.active .artifact-tab-label { color: var(--accent); }
.artifact-tab-label:hover, .artifact-tab-close:hover { background: var(--surface-2); color: var(--text); }
.artifact-tab-label:focus-visible, .artifact-tab-close:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.artifact-tab-panel { display: flex; flex-direction: column; flex: 1; min-height: 0; min-width: 0; }
.artifact-tab-panel[hidden] { display: none; }
.artifact-origin { display: block; padding: 2px 0; font-size: 11px; color: var(--text-dim); text-align: left; }
.artifact-origin[hidden], .artifact-foreign-bar [hidden] { display: none; }
.artifact-tab-add { flex: 0 0 auto; min-width: 36px; }
.artifact-open-menu { width: min(360px, calc(100vw - 24px)) !important; }
.artifact-open-menu .documents-menu-search { width: 100%; position: sticky; top: 0; background: var(--bg-panel-solid); }
.artifact-empty > p { padding: 16px; }
.artifact-foreign-bar { flex: 0 0 auto; max-height: 40%; overflow: auto; padding: 12px 16px; border-top: 1px solid var(--border-strong); background: var(--bg-panel-solid); font-size: 12px; }
.artifact-foreign-bar[hidden] { display: none; }
.artifact-foreign-comments { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; }
.artifact-foreign-comment { display: flex; align-items: flex-start; gap: 4px; }
.artifact-foreign-comment > button:first-child { flex: 1; text-align: left; white-space: normal; overflow-wrap: anywhere; }
.artifact-foreign-bar input { width: 100%; margin-bottom: 8px; }
.artifact-foreign-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.artifact-foreign-actions .meta { flex: 1; }
.chat-files-group-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.chat-documents-toggle { flex-shrink: 0; font-size: 11px; }
@media (max-width: 680px) {
  .artifact-tab-add, .artifact-origin, .artifact-foreign-bar button { min-width: 44px; min-height: 44px; }
  .artifact-foreign-bar { padding: 8px; }
}
.artifact-header-controls { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
/* Matched on both classes deliberately: interface.css loads after this file
   and carries a base `.btn { display: inline-flex }`, which beats a
   single-class rule here on source order alone and brought this button back
   at 900px (caught by scripts/artifact-pane-checks.cjs). */
@media (max-width: 1100px) { .artifact-maximize.btn { display: none; } }
@media (max-width: 680px) {
  .artifact-tab-label, .artifact-tab-close { min-height: 44px; }
  .artifact-tab-close { flex-basis: 44px; }
  .artifact-panel .btn, .artifact-panel .office-tab { min-height: 44px; min-width: 44px; }
}
@media (prefers-reduced-motion: reduce) { .chat-layout.has-pane #chat-main { transition: none !important; } }
.artifact-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 20px; border-bottom: 1px solid var(--border); }
.artifact-header > div { min-width: 0; }
.artifact-header h2 { font-size: 14px; font-weight: 550; overflow-wrap: anywhere; margin: 0 0 5px; }
.artifact-detail { font-size: 11px; color: var(--text-faint); }
.artifact-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 12px 18px; border-bottom: 1px solid var(--border); }
.artifact-toolbar .btn { padding: 6px 10px; font-size: 12px; text-decoration: none; }
.artifact-toolbar .muted { font-size: 11px; }
.artifact-toolbar [aria-pressed='true'] { background: var(--surface-2); }
.artifact-preview { flex: 1; min-height: 0; overflow: auto; padding: 20px; color: var(--text-dim); font-size: 13px; }
.artifact-preview:has(.artifact-frame) { padding: 0; }
.artifact-preview > img { display: block; width: auto; max-width: 100%; height: auto; margin: auto; border-radius: 8px; }
.artifact-frame { border: 0; display: block; width: 100%; height: 100%; min-height: 360px; background: white; }
.artifact-source { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.7; margin: 0; color: var(--text); }
.artifact-pdf-page { display: block; background: white; box-shadow: var(--shadow-elevated); }
.artifact-pdf-text { margin-top: 18px; line-height: 1.7; }
.artifact-document { color: var(--text); }
.artifact-fallback { padding: 40px 12px; text-align: center; line-height: 1.7; }
.chat-files-body { flex: 1; min-height: 0; overflow: auto; padding: 12px 18px 24px; }
.chat-files-heading { margin: 18px 0 8px; font-size: 12px; font-weight: 600; color: var(--text-dim); }
.chat-file-row { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; margin-bottom: 5px; border: 1px solid var(--border); border-radius: 8px; background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.chat-file-row:hover:not(:disabled) { background: var(--surface-2); border-color: var(--border-strong); }
.chat-file-row:disabled { opacity: .55; cursor: default; }
.chat-file-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
/* -- Office previews (David's ask 2026-09-15) ---------------------------- */
.office-tabs { display: flex; gap: 4px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.office-tab {
  background: transparent; border: 1px solid var(--border); color: var(--text-dim);
  border-radius: 7px; padding: 5px 10px; font: inherit; font-size: 12px; cursor: pointer;
  max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.office-tab:hover { border-color: var(--border-strong); color: var(--text); }
.office-tab.active { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }
.office-body { min-height: 0; }
/* Wide sheets scroll inside their own box so the panel itself never gains a
   horizontal scrollbar. */
.office-grid-wrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; margin: 0 0 14px; }
.office-grid { border-collapse: collapse; font-size: 12.5px; width: max-content; min-width: 100%; }
.office-grid th, .office-grid td {
  text-align: left; padding: 7px 12px; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border);
  white-space: pre-wrap; vertical-align: top; max-width: 320px; overflow-wrap: anywhere;
}
.office-grid th { background: var(--bg-panel); font-weight: 550; position: sticky; top: 0; }
.office-grid tr:last-child td { border-bottom: 0; }
.office-grid th:last-child, .office-grid td:last-child { border-right: 0; }
.office-note { font-size: 11.5px; line-height: 1.6; color: var(--text-faint); margin: 0 0 12px; }
.office-doc h1, .office-doc h2, .office-doc h3, .office-doc h4, .office-doc h5, .office-doc h6 { font-weight: 600; line-height: 1.35; margin: 1.4em 0 .5em; }
.office-doc h1 { font-size: 1.45em; } .office-doc h2 { font-size: 1.22em; } .office-doc h3 { font-size: 1.08em; }
.office-doc > :first-child { margin-top: 0; }
.office-doc p { margin: 0 0 .9em; line-height: 1.75; }
.office-list-item { padding-left: 1.2em; position: relative; }
.office-list-item::before { content: '•'; position: absolute; left: .2em; color: var(--text-faint); }
.office-slide { border: 1px solid var(--border); border-radius: 12px; padding: 20px; background: var(--bg-panel); margin-bottom: 14px; }
.office-slide h2 { font-size: 1.2em; font-weight: 600; margin: 0 0 .7em; }
.office-slide p { margin: 0 0 .6em; line-height: 1.7; }
.office-notes summary { font-size: 12px; color: var(--text-dim); cursor: pointer; }
.office-notes p { margin: 8px 0 0; font-size: 12.5px; line-height: 1.7; color: var(--text-dim); }

/* -- side browser (David's ask 2026-09-15) ------------------------------- */
/* Shares .artifact-panel's layout so the right-hand region behaves
   identically whichever pane is open — only one ever is. */
.browser-panel {
  display: flex; flex-direction: column;
  /* No slide-in, unlike the file preview: a native view cannot be animated
     by CSS, so the chrome would glide in while the page sat still behind it.
     Appearing at once is the honest version. */
  animation: none;
}
.browser-toolbar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.browser-toolbar .btn { padding: 5px 9px; font-size: 12px; flex-shrink: 0; }
.browser-address-form { flex: 1; min-width: 0; display: flex; }
.browser-address {
  width: 100%; min-width: 0; font-size: 12px; padding: 6px 10px;
  border-radius: 7px; font-family: inherit;
}
.browser-status { margin: 0; padding: 8px 14px; font-size: 11.5px; line-height: 1.6; color: var(--text-faint); border-bottom: 1px solid var(--border); }
.browser-status:empty { display: none; }
/* In the desktop app this box stays deliberately EMPTY: the page is a native
   view the main process positions over this exact rectangle. The background
   is white so a slow-loading page doesn't flash the dark app theme through,
   which is also what the iframe path wants. */
.browser-viewport { flex: 1; min-height: 0; position: relative; background: #fff; }
.browser-frame { border: 0; display: block; width: 100%; height: 100%; background: #fff; }

/* The contained computer is a screenshot stream, shared by Chats and Agents. */
.chat-computer-body { flex: 1; min-height: 0; overflow: auto; padding: 14px; }
.computer-panel { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.computer-panel-head, .computer-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.computer-panel-head { justify-content: space-between; }
.computer-title { font-size: 14px; font-weight: 550; min-width: 0; overflow-wrap: anywhere; }
.computer-url { color: var(--text-dim); font-size: 12px; overflow-wrap: anywhere; }
.computer-time, .computer-state { font-size: 12px; }
.computer-state { color: var(--text-dim); }
.computer-panel.is-taken-over .computer-state { color: var(--accent); font-weight: 600; }
.computer-stage { box-sizing: border-box; width: 100%; aspect-ratio: 8 / 5; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 8px; overflow: hidden; outline-offset: 3px; }
.computer-stage:focus-visible { outline: 2px solid var(--accent); }
.computer-panel.is-taken-over .computer-stage { cursor: crosshair; }
.computer-frame { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; }
.computer-recording-indicator { color: var(--danger); font-size: 12px; font-weight: 600; }
.computer-recording-indicator::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 6px;
  border-radius: 50%; background: var(--danger); }
.computer-panel.is-recording .computer-stage { border-color: var(--danger); }
.recording-review { width: 720px; max-height: 90dvh; gap: 12px; background: var(--bg-panel-solid); }
.recording-review h4, .recording-review p { margin: 0; }
.recording-review-body { overflow: auto; min-height: 0; display: flex; flex-direction: column; gap: 14px; }
.recording-field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.recording-field input, .recording-field textarea { width: 100%; box-sizing: border-box; }
.recording-field textarea { resize: vertical; min-height: 180px; font-family: var(--font-mono); }
.recording-steps { margin: 0; padding-left: 24px; font-size: 12px; }
.recording-steps li { margin-bottom: 10px; overflow-wrap: anywhere; }
.recording-step-row { display: flex; align-items: start; justify-content: space-between; gap: 10px; }
.recording-step-row .btn { flex-shrink: 0; }
.recording-check { display: flex; align-items: center; gap: 8px; font-size: 12px; margin-top: 5px; }
.recording-scan pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; }
@media (max-width: 680px) { .recording-review { padding: 16px; max-width: calc(100vw - 24px); } }
.agent-computer-section { margin-bottom: 12px; }
.agent-computer-section > .title { margin-bottom: 10px; }
.chat-computer-toggle svg { width: 16px; height: 16px; }
.computer-watch { font-size: 11px; }
.computer-shot { flex-basis: 100%; margin-top: 6px; }
.computer-shot summary { cursor: zoom-in; list-style: none; }
.computer-shot[open] summary { cursor: zoom-out; }
.computer-thumbnail { display: block; width: 180px; max-width: 100%; height: auto; border: 1px solid var(--border); border-radius: 6px; }
.computer-shot[open] .computer-thumbnail { width: 100%; }
.chat-computer-history { margin-top: 12px; }
.chat-computer-history > details > summary { cursor: pointer; font-size: 12px; color: var(--text-dim); }
.chat-computer-step { display: block; }

@keyframes artifact-enter { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } }
@media (max-width: 1100px) { .artifact-panel { position: absolute; inset: 0 0 0 auto; width: min(620px, 85%); z-index: 30; box-shadow: var(--shadow-elevated); } .chat-layout { position: relative; } }
@media (max-width: 680px) { .artifact-panel { width: 100%; inset: 0; } .chat-prose { font-size: 14px; } .chat-input-bar .model-picker-btn { max-width: 105px; font-size: 10px; padding-inline: 4px; } .chat-input-right { gap: 4px; } .artifact-header { padding: 16px; } .msg-actions { opacity: 1; } }
/* Files and Computer share an opaque phone drawer and the chat header's menu clearance. */
@media (max-width: 768px) {
  .artifact-panel { position: fixed; inset: var(--titlebar-h) 0 0; width: 100%; background: var(--bg-panel-solid); }
  .artifact-panel > .artifact-header { min-height: 62px; padding: 12px 16px 12px 62px; }
  .artifact-viewer > .artifact-pane-top { padding: 9px 0 9px 62px; }
  .artifact-tab-panel > .artifact-header { padding: 12px 16px; }
}
@media (prefers-reduced-motion: reduce) { .artifact-panel { animation: none; } .artifact-card { transition: none; } }

/* -- live replies form in (David, 2026-10-07) ------------------------------
   A message sent or received just now rises in. A file card, code block or
   table that appears mid-reply forms in halftone: a 4 px dot screen whose
   dots grow from nothing until they merge, while a solid edge sweeps down
   from the top, like a print developing (chatContent.js formBlocks). A mask
   reads only alpha, so its colour is just currentColor. */
.msg-enter { animation: msg-enter 260ms cubic-bezier(.22, 1, .36, 1) both; }
@keyframes msg-enter { from { opacity: 0; transform: translateY(8px); } }
@property --form-dot { syntax: '<length>'; inherits: false; initial-value: 3px; }
@property --form-edge { syntax: '<percentage>'; inherits: false; initial-value: 130%; }
.is-forming {
  -webkit-mask-image: linear-gradient(currentColor calc(var(--form-edge) - 30%), transparent var(--form-edge)),
    radial-gradient(circle, currentColor var(--form-dot), transparent calc(var(--form-dot) + .6px));
  mask-image: linear-gradient(currentColor calc(var(--form-edge) - 30%), transparent var(--form-edge)),
    radial-gradient(circle, currentColor var(--form-dot), transparent calc(var(--form-dot) + .6px));
  -webkit-mask-size: 100% 100%, 4px 4px; mask-size: 100% 100%, 4px 4px;
  animation: form-dots 900ms linear both;
}
/* Most of the time is spent as a visible dot screen; the dots only merge,
   and the solid edge only reaches the bottom, near the end. */
@keyframes form-dots {
  0% { --form-dot: 0px; --form-edge: -30%; transform: translateY(4px); }
  65% { --form-dot: 1.5px; --form-edge: 45%; transform: none; }
  100% { --form-dot: 3px; --form-edge: 130%; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .msg-enter, .is-forming { animation: none; -webkit-mask-image: none; mask-image: none; } }

/* -- stopped turn (David's ask 2026-09-15, voice work's foundation) ------ */
/* Deliberately not styled like a failure: stopping is a normal outcome, and
   the partial reply above it was saved. Neutral border, no danger colour. */
.msg-stopped { font-size: 12px; color: var(--text-faint); margin-top: 14px; padding: 10px 12px; border-left: 2px solid var(--border-strong); background: var(--bg-panel); }
#chat-send[data-mode='stop'] { background: var(--surface-2); color: var(--text); }
#chat-send[data-mode='stop']:hover { background: var(--border-strong); }

/* -- dictation (David's ask 2026-09-15) --------------------------------- */
.chat-mic-btn[hidden] { display: none; }
.chat-mic-btn.recording { color: var(--danger); }
/* The ring tracks real mic level, so a muted or dead device is visibly
   different from one that is actually hearing you. */
.chat-mic-btn.recording::after {
  content: ''; position: absolute; inset: -2px; border-radius: 8px;
  border: 1.5px solid var(--danger);
  opacity: calc(.35 + var(--mic-level, 0) * .65);
  transform: scale(calc(1 + var(--mic-level, 0) * .12));
  transition: opacity 90ms linear, transform 90ms linear;
  pointer-events: none;
}
.chat-mic-btn { position: relative; }
.chat-mic-btn.busy { opacity: .55; }
@media (prefers-reduced-motion: reduce) { .chat-mic-btn.recording::after { transition: none; transform: none; } }

/* -- Open Mic (David's ask 2026-09-15) ---------------------------------- */
.chat-openmic-btn[hidden] { display: none; }
.chat-openmic-btn.active { color: var(--accent); background: var(--accent-dim); }
/* The state is the whole point of the indicator: listening, thinking and
   speaking are the three things you need to know without looking away. */
.chat-openmic-btn[data-mic-state='listening'] { color: var(--success); }
.chat-openmic-btn[data-mic-state='transcribing'],
.chat-openmic-btn[data-mic-state='thinking'] { color: var(--text-dim); }
.chat-openmic-btn[data-mic-state='speaking'] { color: var(--accent); }
.chat-openmic-btn[data-mic-state='listening']::after {
  content: ''; position: absolute; inset: -3px; border-radius: 9px;
  border: 1.5px solid var(--success); opacity: .5;
  animation: openmic-pulse 1.8s ease-in-out infinite;
}
.chat-openmic-btn { position: relative; }
#chat-main.open-mic .chat-input-bar { box-shadow: inset 0 0 0 1px var(--accent-dim); }
@keyframes openmic-pulse { 0%, 100% { opacity: .25; } 50% { opacity: .7; } }
@media (prefers-reduced-motion: reduce) { .chat-openmic-btn[data-mic-state='listening']::after { animation: none; } }

/* Permission prompt (David's ask 2026-09-18). Shared by every feature that
   can ask; the request's own text is rendered as content, never as markup. */
.permission-dialog { color: var(--text); background: var(--bg-panel-solid); border: 1px solid var(--border-strong); border-radius: var(--radius); width: min(560px, calc(100vw - 32px)); padding: 22px 24px; box-shadow: var(--shadow-elevated); }
.permission-dialog::backdrop { background: rgba(var(--shade-rgb), .65); }
.permission-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.permission-head h2 { font-size: 17px; font-weight: 500; margin: 0; }
.permission-tool { font-size: 11px; color: var(--text-dim); border: 1px solid var(--border); border-radius: 20px; padding: 3px 10px; }
.permission-title { margin: 12px 0 4px; line-height: 1.5; overflow-wrap: anywhere; }
.permission-target { margin: 6px 0 0; font-size: 13px; color: var(--accent); overflow-wrap: anywhere; }
.permission-args { margin: 14px 0; }
.permission-args pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; max-height: 220px; overflow: auto; background: var(--bg); border-radius: 8px; padding: 10px; }
.permission-choices { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.permission-error { color: var(--danger); margin: 8px 0 0; }
.permission-dialog :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Terminal chat style (David's ask 2026-09-25, after Hermes's terminal UI):
   Settings > Appearance > Chat style, or /terminal. Presentation only, and
   scoped to the main chat (#chat-messages, #chat-input): School's course
   panel reuses the .msg classes and keeps its own look. */
:root[data-chat-style='terminal'] :is(#chat-messages, .side-messages) {
  --term-font: 'Cascadia Code', 'Cascadia Mono', Consolas, 'Courier New', monospace;
  font-family: var(--term-font); gap: 14px;
}
:root[data-chat-style='terminal'] :is(#chat-messages, .side-messages) > .msg { font-size: 13.5px; line-height: 1.6; align-items: flex-start; }
:root[data-chat-style='terminal'] :is(#chat-messages, .side-messages) > .msg.user .msg-body {
  max-width: 100%; padding: 0; border: 0; border-radius: 0; background: none; color: var(--text);
}
:root[data-chat-style='terminal'] :is(#chat-messages, .side-messages) > .msg.user .msg-body::before { content: 'you \276F  '; color: var(--accent); font-weight: 600; }
:root[data-chat-style='terminal'] :is(#chat-messages, .side-messages) > .msg.assistant::before {
  content: 'kairos \276F'; color: var(--text-faint); font-weight: 600; margin-bottom: 2px;
}
:root[data-chat-style='terminal'] :is(#chat-messages, .side-messages) > .msg.assistant .msg-body { padding-left: 2ch; border-left: 1px solid var(--border); }
:root[data-chat-style='terminal'] :is(#chat-messages, .side-messages) > .msg.user .msg-actions { justify-content: flex-start; }
:root[data-chat-style='terminal'] :is(#chat-messages, .side-messages) .msg-body :is(h1, h2, h3, h4) { font-size: 1em; font-weight: 700; margin: .8em 0 .3em; }
:root[data-chat-style='terminal'] :is(#chat-messages, .side-messages) .msg-body :is(h1, h2)::before { content: '# '; color: var(--text-faint); }
:root[data-chat-style='terminal'] :is(#chat-messages, .side-messages) .msg-cursor {
  width: .62em; height: 1.15em; margin-left: 1px; border-radius: 0; opacity: .85;
}
:root[data-chat-style='terminal'] :is(#chat-messages, .side-messages) .msg-thinking-text { font-family: var(--term-font); font-size: 12.5px; }
:root[data-chat-style='terminal'] :is(#chat-messages, .side-messages) .msg-thinking-dot { border-radius: 0; width: 7px; height: 12px; }
:root[data-chat-style='terminal'] :is(#chat-messages, .side-messages) .chat-activity { font-family: var(--term-font); font-size: 11.5px; padding: 0 0 0 2ch; margin: 0 0 6px; }
:root[data-chat-style='terminal'] :is(#chat-messages, .side-messages) .chat-activity summary::before { content: '['; color: var(--text-faint); }
:root[data-chat-style='terminal'] :is(#chat-messages, .side-messages) .chat-activity summary::after { content: ']'; color: var(--text-faint); }
:root[data-chat-style='terminal'] .chat-input-bar { border-radius: 8px; }
:root[data-chat-style='terminal'] .chat-input-top::before {
  content: '\276F'; align-self: flex-start; padding: 4px 0 0 6px; color: var(--accent); font-weight: 700;
  font-family: 'Cascadia Code', Consolas, monospace; font-size: 14px; line-height: 1.6;
}
:root[data-chat-style='terminal'] :is(#chat-input, .side-chat-input) {
  font-family: 'Cascadia Code', 'Cascadia Mono', Consolas, 'Courier New', monospace; font-size: 13.5px; caret-shape: block;
}
@media (prefers-reduced-motion: reduce) {
  :root[data-chat-style='terminal'] :is(#chat-messages, .side-messages) .msg-cursor { animation: none; }
}

/* Side-by-side chats (static/js/sideChat.js, 2026-09-25). The pane sits after
   #chat-main in the .chat-layout row; its width is a share of the row the
   divider sets and localStorage keeps. Desktop widths only. */
.side-chat { display: none; }
.chat-layout.has-side-chat .side-chat {
  display: flex; flex: 0 0 var(--side-chat-width, 44%); min-width: 0; min-height: 0; position: relative;
  border-left: 1px solid var(--border);
}
.side-chat-divider {
  position: absolute; left: -4px; top: 0; bottom: 0; width: 8px; cursor: col-resize; z-index: 2; touch-action: none;
}
.side-chat-divider:hover, .side-chat-divider:focus-visible { background: linear-gradient(90deg, transparent 3px, var(--accent) 3px 5px, transparent 5px); outline: none; }
.side-chat-inner { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; }
.side-chat-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; min-height: 54px;
  border-bottom: 1px solid var(--border); flex-shrink: 0; }
.side-chat-title { font-size: 12.5px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.side-chat-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.side-chat-actions .btn { font-size: 11.5px; padding: 4px 9px; }
.side-chat-close { font-size: 18px; line-height: 1; }
.side-messages { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 18px 16px; display: flex; flex-direction: column; gap: 18px; }
.side-messages > .msg { width: 100%; font-size: 14px; }
.side-chat-composer { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin: 0 12px 12px; padding: 10px; border-radius: 14px; flex-shrink: 0; }
.side-chat-input { flex: 1; min-width: 0; resize: none; background: transparent; border: none; box-shadow: none; font-size: 14px;
  line-height: 1.5; max-height: 160px; padding: 4px 6px; }
.side-chat-input:focus { outline: none; box-shadow: none; }
.side-chat-send { flex-shrink: 0; font-size: 12px; padding: 6px 12px; }
/* sessionChat.js: one embedded conversation (Agents, tab chats). It fills
   whatever box its host gives it; the host sets the height. */
.session-chat { display: flex; flex-direction: column; flex: 1; min-height: 0; height: 100%; }
.session-chat-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.session-chat-tools[hidden] { display: none; }
.session-chat-permissions { display: flex; align-items: center; gap: 6px; min-width: 0; }
.session-chat-permissions[data-mode='auto'] .custom-select-btn { color: var(--accent); border-color: var(--accent); }
.session-chat-models { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; flex: 1; }
.session-chat-models .custom-select { flex: 1 1 140px; min-width: 0; max-width: 220px; }
.session-chat-status:empty { display: none; }
.session-attachment-controls, .session-attachments { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.session-attachments:empty { display: none; }
.session-attachment-controls .meta { font-size: 11px; line-height: 1.5; flex: 1; min-width: 140px; }
.session-attachment, .session-attachment-history { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.session-attachment { border: 1px solid var(--border); padding: 5px 8px; font-size: 11px; max-width: 100%; }
.session-attachment span { overflow-wrap: anywhere; }
.session-attachment img { width: 54px; height: 54px; object-fit: contain; }
.session-attachment-history { margin-top: 8px; }
.side-chat-send[data-mode='stop'] { color: var(--danger); }
.side-chat-drop-hint {
  position: absolute; top: 12px; right: 12px; bottom: 12px; width: calc(50% - 18px); z-index: 5; pointer-events: none;
  display: grid; place-items: center; border: 2px dashed var(--accent); border-radius: 16px;
  background: rgba(var(--accent-rgb), .08); color: var(--accent); font-size: 13px;
  opacity: 0; transition: opacity .12s;
}
.side-chat-drop-hint.active { opacity: 1; }
@media (max-width: 999px) { .chat-layout.has-side-chat .side-chat { display: none; } }
@media (prefers-reduced-motion: reduce) { .side-chat-drop-hint { transition: none; } }

/* Message queue (static/js/views/chat.js, 2026-09-25): messages typed while
   a reply runs wait here and send when it finishes. */
.chat-queue { display: flex; flex-direction: column; gap: 4px; margin: 0 0 8px; padding: 8px 10px; border: 1px dashed var(--border-strong);
  border-radius: 12px; font-size: 12.5px; }
.chat-queue[hidden] { display: none; }
.chat-queue-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--text-faint); font-size: 11.5px; }
.chat-queue-item { display: flex; align-items: center; gap: 6px; min-width: 0; }
.chat-queue-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-dim); }
.chat-queue-item .btn, .chat-queue-resume { font-size: 11px; padding: 3px 8px; flex-shrink: 0; }
.chat-queue-remove { font-size: 16px; line-height: 1; flex-shrink: 0; }
:root[data-chat-style='terminal'] .chat-queue { font-family: 'Cascadia Code', Consolas, monospace; border-radius: 6px; }

/* Find in chat (static/js/chatFind.js, 2026-09-25). */
.chat-find { position: absolute; top: 60px; right: 18px; z-index: 6; display: flex; align-items: center; gap: 4px;
  padding: 6px 8px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--bg-panel-solid);
  box-shadow: var(--shadow-elevated); max-width: calc(100% - 36px); }
.chat-find[hidden] { display: none; }
.chat-find-input { width: 200px; min-width: 0; font-size: 12.5px; padding: 4px 8px; }
.chat-find-count { font-size: 11.5px; color: var(--text-faint); min-width: 64px; text-align: center; font-variant-numeric: tabular-nums; }
::highlight(chat-find) { background-color: rgba(var(--accent-rgb), .28); color: inherit; }
::highlight(chat-find-current) { background-color: rgba(var(--accent-rgb), .45); color: var(--text); }

/* Message actions: text buttons in the hover action row. */
.msg-actions .msg-edit, .msg-actions .msg-regenerate, .msg-actions .msg-fork { font-size: 11.5px; padding: 3px 7px; }
.msg-actions .msg-edit:hover, .msg-actions .msg-regenerate:hover, .msg-actions .msg-fork:hover { color: var(--text); background: rgba(var(--ink-rgb), .05); }
.attach-chip-preview {
  width: 31px;
  height: 31px;
  object-fit: cover;
  border-radius: 5px;
  flex: none;
}
.attach-chip-preview-button {
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
.chat-image-preview {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  background: var(--scrim);
}
.chat-image-preview img {
  max-width: 94vw;
  max-height: calc(90vh - 60px);
  object-fit: contain;
}
.msg-images {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0;
}
.msg-images img {
  max-width: min(320px, 70vw);
  max-height: 250px;
  object-fit: contain;
  border-radius: 9px;
  cursor: zoom-in;
}

/* Device-local browser capture. The stream is stopped after one frame; this
   dialog only reviews the still image before adding it to the composer. */
.screen-capture-dialog {
  position: fixed; inset: 0; z-index: 10020; display: grid; place-items: center;
  padding: 20px; background: rgba(var(--shade-rgb), .72);
}
.screen-capture-dialog[hidden], .screen-capture-review[hidden],
.screen-capture-choices[hidden], .screen-capture-selection[hidden] { display: none; }
.screen-capture-panel {
  width: min(620px, 100%); max-height: min(90vh, 860px); overflow: auto;
  color: var(--text); background: var(--bg-panel-solid); border: 1px solid var(--border-strong);
  border-radius: var(--radius); box-shadow: var(--shadow-elevated); padding: 22px;
}
.screen-capture-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 17px; }
.screen-capture-eyebrow { color: var(--accent); font-size: 10px; font-weight: 750; letter-spacing: .13em; }
.screen-capture-header h2 { font-size: 20px; letter-spacing: -.025em; margin: 4px 0 0; }
.screen-capture-close { width: 30px; height: 30px; border: 1px solid var(--border); border-radius: 9px;
  color: var(--text-dim); background: transparent; font-size: 20px; line-height: 1; cursor: pointer; }
.screen-capture-choices { display: grid; gap: 10px; }
.screen-capture-choice { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left;
  color: var(--text); background: rgba(var(--ink-rgb), .035); border: 1px solid var(--border);
  border-radius: 10px; padding: 14px; cursor: pointer; }
.screen-capture-choice:hover, .screen-capture-choice:focus-visible { border-color: var(--accent); background: rgba(var(--accent-rgb), .09); }
.screen-capture-choice:disabled { opacity: .55; cursor: not-allowed; }
.screen-capture-choice-icon { display: grid; place-items: center; width: 39px; height: 39px;
  flex: none; border-radius: 10px; color: var(--accent); background: rgba(var(--accent-rgb), .14); font-size: 20px; }
.screen-capture-choice strong, .screen-capture-choice small { display: block; }
.screen-capture-choice strong { font-size: 13.5px; font-weight: 650; }
.screen-capture-choice small { margin-top: 3px; color: var(--text-dim); font-size: 11.5px; line-height: 1.4; }
.screen-capture-arrow { margin-left: auto; color: var(--text-faint); font-size: 19px; }
.screen-capture-review > p { color: var(--text-dim); font-size: 12.5px; margin: 0 0 12px; }
.screen-capture-image-wrap { position: relative; display: table; max-width: 100%; margin: auto; cursor: crosshair; touch-action: none; }
.screen-capture-image-wrap img { display: block; max-width: 100%; max-height: 48vh; border-radius: 8px; user-select: none; }
.screen-capture-selection { position: absolute; border: 2px solid var(--accent); background: rgba(var(--accent-rgb), .13);
  box-shadow: 0 0 0 1px rgba(var(--shade-rgb), .4); pointer-events: none; }
.screen-capture-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; margin-top: 15px; }
.screen-capture-actions button { color: var(--text); background: rgba(var(--ink-rgb), .05); border: 1px solid var(--border-strong);
  border-radius: 9px; padding: 8px 12px; cursor: pointer; }
.screen-capture-actions button[data-action="crop"] { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.screen-capture-actions button:disabled { opacity: .45; cursor: not-allowed; }
.screen-capture-status { min-height: 17px; color: var(--danger); font-size: 12px; margin: 12px 0 0; }
.screen-capture-panel footer { margin-top: 9px; padding-top: 13px; border-top: 1px solid var(--border);
  color: var(--text-faint); font-size: 11.5px; }
@media (max-width: 600px) {
  .screen-capture-dialog { padding: 10px; align-items: end; }
  .screen-capture-panel { padding: 17px; max-height: 85vh; border-radius: 17px; }
  .screen-capture-header h2 { font-size: 18px; }
  .screen-capture-actions button { flex: 1; }
}
/* Artifact viewers: responsive canvases and stable review targets. */
.artifact-preview { container-type: inline-size; }
.artifact-skeleton { display: grid; gap: 16px; padding: 20px 0; }
.artifact-skeleton span { display: block; height: 14px; width: 88%; border-radius: 5px; background: linear-gradient(100deg, var(--surface-2) 25%, var(--bg-panel-solid) 45%, var(--surface-2) 65%); background-size: 250% 100%; animation: artifact-shimmer 1.6s ease-in-out infinite; }
.artifact-skeleton span:nth-child(2n) { width: 62%; }
@keyframes artifact-shimmer { to { background-position: -250% 0; } }
@media (prefers-reduced-motion: reduce) { .artifact-skeleton span { animation: none; } }
.artifact-version-picker { max-width: 64px; flex-shrink: 0; padding: 3px; font-size: 11px; }
.artifact-toolbar [hidden], .artifact-version-picker[hidden] { display: none; }
.office-grid-wrap { max-height: 65vh; overflow: auto; }
.office-grid thead th { z-index: 2; }
.office-grid tr > :first-child { position: sticky; left: 0; z-index: 1; background: var(--bg-panel-solid); }
.office-grid thead tr > :first-child { z-index: 3; }
.office-grid td { font-weight: normal; }
.office-doc img { max-width: 100%; height: auto; }
.office-doc figure { margin: 16px 0; }
.office-doc ul, .office-doc ol { padding-left: 1.8em; margin: 0 0 1em; }
.office-doc li { line-height: 1.75; }
.office-list-bridge { list-style: none; }
.office-deck, .artifact-pdf-viewer { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 18px; align-items: start; }
.office-deck { outline-offset: 3px; }
.office-deck:focus:not(:focus-visible) { outline: none; }
.office-deck .office-body { min-width: 0; }
.artifact-thumbnail-rail { display: flex; flex-direction: column; gap: 8px; max-height: 70vh; overflow: auto; padding: 3px; }
.artifact-thumbnail { flex: 0 0 auto; min-height: 44px; width: 100%; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-panel-solid); color: var(--text-dim); padding: 5px; cursor: pointer; }
.artifact-thumbnail.active { outline: 2px solid var(--accent); outline-offset: -1px; }
.artifact-thumbnail canvas { display: block; max-width: 100%; height: auto; margin: 0 auto 4px; }
.office-slide { position: relative; width: 100%; padding: 0; border-radius: 0; background: white; color: var(--page-ink); overflow: hidden; container-type: inline-size; margin-bottom: 14px; }
.office-shape { position: absolute; transform-origin: center; overflow: hidden; border: 1px solid transparent; font-family: Arial, sans-serif; font-size: 2.4cqw; white-space: pre-wrap; }
.office-shape p { font-size: inherit; line-height: 1.2; margin: 0; }
.office-shape img { width: 100%; height: 100%; object-fit: fill; display: block; }
.office-shape-placeholder { border: 1px dashed var(--text-faint); display: grid; place-items: center; text-align: center; font-size: 1.6cqw; }
.office-shape .office-grid-wrap { border-radius: 0; height: 100%; margin: 0; overflow: hidden; }
.office-shape .office-grid { width: 100%; min-width: 0; font-size: 1.6cqw; table-layout: fixed; }
.office-shape .office-grid td { padding: .25em; max-width: none; white-space: pre-wrap; }
.office-shape .office-grid tr > :first-child { position: static; background: transparent; }
.artifact-thumbnail .office-slide { margin: 0 0 4px; pointer-events: none; }
.artifact-pdf-body { min-width: 0; overflow: auto; max-height: 75vh; padding: 3px; }
.artifact-pdf-page-wrap { position: relative; width: max-content; margin: auto; }
.artifact-pdf-page { max-width: none; }
.drive-pdf-viewer { display: block; }
.artifact-preview:has(.artifact-image-viewport) { overflow: hidden; padding: 0; }
.artifact-image-viewport { position: relative; width: 100%; height: 100%; overflow: auto; padding: 12px; box-sizing: border-box; }
.artifact-image-viewport img { display: block; max-width: none; margin: auto; user-select: none; }
.artifact-image-viewport.is-zoomed { cursor: grab; }
.artifact-image-viewport.is-zoomed:active { cursor: grabbing; }
.artifact-lines { white-space: pre; overflow: auto; font-size: 12px; }
.artifact-line { display: flex; min-height: 1.7em; }
.artifact-line code { display: block; white-space: pre; }
.artifact-line-number { display: inline-block; flex: 0 0 4.5em; padding-right: 1em; text-align: right; color: var(--text-faint); user-select: none; border-right: 1px solid var(--border); margin-right: 1em; }
.artifact-html-viewport { height: 100%; width: 100%; overflow: auto; background: var(--surface-2); }
.artifact-html-stage { position: relative; margin: auto; overflow: hidden; }
.artifact-frame { max-width: none; min-height: 0; transform-origin: top left; }
.artifact-html-widths { display: inline-flex; flex-wrap: wrap; gap: 4px; }
@container (max-width: 620px) {
  .office-deck, .artifact-pdf-viewer { grid-template-columns: minmax(0, 1fr); }
  .artifact-thumbnail-rail { flex-direction: row; max-height: 140px; }
  .artifact-thumbnail { width: 100px; }
}
@media (max-width: 680px) { .artifact-version-picker { min-height: 44px; } }
/* Hidden images keep their loading bars visible until decoding completes. */
.artifact-image-viewport img[hidden] { display: none; }
.office-grid tbody th { top: auto; }

/* Phone controls wrap into rows; the text area and Send remain usable at
   320px without shrinking the model label or the touch targets. */
@media (max-width: 768px) {
  .input-icon-btn, .sidebar-settings-btn, .sidebar-user-card,
  .chat-summary-trigger, .artifact-header-controls .btn, .side-chat-send {
    min-width: 44px; min-height: 44px;
  }
  #chat-send, .forge-composer-send { width: 44px; height: 44px; }
  .chat-input-right { flex-wrap: wrap; flex-shrink: 1; max-width: 100%; gap: 4px; }
  .chat-input-bar .model-pill { flex: 1 1 100%; min-width: 0; height: auto; min-height: 44px; justify-content: flex-end; }
  .chat-input-bar .model-pill .model-picker-btn { height: 44px; min-width: 44px; max-width: 100%; font-size: 12px; }
  .chat-input-bar .model-picker-wrap { min-width: 0; }
  .side-chat-input { font-size: 16px; }
  #chat-input, .side-chat-input { max-height: min(200px, 25dvh); }
}

/* Phone conversation: keep the title readable and give touch menus room. */
.chat-phone-tools { display: none; }
@media (max-width: 768px) {
  .mobile-menu-btn { box-shadow: none; border-radius: 14px; }
  .chat-phone-tools { display: block; flex-shrink: 0; }
  .chat-phone-tools .overflow-menu { left: auto; right: 0; min-width: 210px; max-width: calc(100vw - 32px); }
  .chat-mobile-header > .chat-files-toggle,
  .chat-mobile-header > .chat-documents-toggle,
  .chat-mobile-header > .chat-summary-trigger { display: none; }
  .chat-mobile-header { gap: 6px; min-height: 68px; padding-right: 12px; background: var(--bg-panel); }
  .chat-title { flex: 1; font-size: 14px; letter-spacing: 0; color: var(--text); font-weight: 500; }
  .chat-mobile-header .input-icon-btn { flex-shrink: 0; border-radius: 12px; }
  .chat-mobile-header .chat-documents-toggle { font-size: 11px; padding-inline: 8px; }
  #chat-messages { padding: 22px 18px 16px; --chat-message-gap: 26px; gap: var(--chat-message-gap); scrollbar-gutter: auto; }
  #chat-messages .msg { font-size: 16px; line-height: 1.7; }
  #chat-messages .chat-prose { font-size: 16px; }
  .msg.user .msg-body { padding: 12px 16px; border-radius: 20px 20px 6px 20px; }
  .chat-input-bar { border-color: var(--border-strong); box-shadow: var(--shadow-elevated); }
  .chat-input-bar .model-picker-btn { font-size: 12px; }
  .overflow-menu .overflow-menu-item, .model-picker-option { min-height: 44px; }
  .composer-hint { font-size: 10px; line-height: 1.5; }
}

/* ---- Computer steps (cua upgrade 5.4): a run's kept actions, step by step.
   Desktop: a wide panel dialog; phone: the same panel as a bottom sheet. ---- */
.computer-steps { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.computer-steps-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.computer-steps-dialog .btn.btn, .kairos-redesign .panel-dialog.computer-steps-dialog .btn.btn { min-height: 44px; min-width: 44px; }
.computer-steps-position { font-size: 13px; font-weight: 600; text-align: center; }
.computer-steps-action { font-size: 14px; font-weight: 550; overflow-wrap: anywhere; }
.computer-steps-result { font-size: 12px; color: var(--text-dim); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 96px; overflow: auto; }
.computer-steps-result.is-error { color: var(--danger); }
.computer-steps-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.computer-steps-tabs .btn.active { border-color: var(--accent); color: var(--accent); }
.computer-steps-stage { width: 100%; aspect-ratio: 8 / 5; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px;
  overflow: hidden; display: flex; align-items: center; justify-content: center; }
.computer-steps-image { display: block; width: 100%; height: 100%; object-fit: contain; }
.computer-steps-empty { padding: 16px; text-align: center; }
.computer-steps-notes p { margin: 0; }
.computer-steps-footer { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.computer-steps-runs { display: flex; flex-direction: column; gap: 6px; }
.computer-steps-run { justify-content: flex-start; text-align: left; }
.btn.run-steps-open { margin: 4px 0 8px; min-height: 44px; }
@media (max-width: 768px) {
  .kairos-redesign .computer-steps-dialog .computer-steps-footer { flex-direction: column-reverse; align-items: stretch; width: 100%; }
  .kairos-redesign .computer-steps-dialog .computer-steps-footer .btn { width: 100%; box-sizing: border-box; white-space: normal; }
  .kairos-redesign .computer-steps-dialog .computer-steps-nav .btn { flex: 1; }
}