/* Ported verbatim from Breckly/demo/assets/css/ops.css. Change a value here only to match the reference. */
/* Ops screens beyond Home, Conversations and Infrastructure (assets/js/opsviews.js):
   topology, runbooks, automations, reports, documentation, activity and settings. */

/* ---------- Shared pieces ---------- */

.ops-gap { margin-top: 17px; }
.page > .machine-head + .banner { margin: 17px 0 0; }
/* A note under a machine head (capabilities, no agent) takes its own line instead of squeezing the identity column. */
.machine-head > p { flex-basis: 100%; }
.ops-kpis { margin: 0 0 17px; }
.ops-small { margin-top: 8px; font-size: 11.5px; }
.ops-hint { margin-top: 12px; font-size: 12px; color: var(--ink-3); }
.ops-sub { margin: 16px 0 6px; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.panel-body .ops-flush { margin: 0 -17px; padding-bottom: 0; }
.ops-empty { margin: 0; }
.ops-link-text { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--accent); }
.ops-link-text.strong { font-size: 13px; }
.ops-link-text:hover, .ops-mlink:hover { text-decoration: underline; text-underline-offset: 3px; }
.ops-mlink { font-weight: 600; }
.ops-mlink:hover { color: var(--accent); }
.ops-note-line { display: flex; align-items: center; gap: 7px; margin: 0; padding: 0 4px; }
/* The connector that manages an imported asset, on its row and its page (asset connectors live in Infrastructure). */
.ops-source { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 6px; font-size: 12.5px; color: var(--ink-2); }
.ops-source > .icon { color: var(--ink-3); }
.ops-source + .banner { margin-top: 8px; }
.role .ops-src { color: var(--ink-3); }
.role .ops-src.warn { color: var(--wait); }
/* Infrastructure tree: a host's chevron, its indented VMs and LXC containers, and the agent column. */
.infra-name { gap: 8px; }
.infra-tw { width: 24px; height: 24px; flex: none; }
.infra-tw .icon { transition: transform .15s ease; }
.infra-tw[aria-expanded="true"] .icon { transform: rotate(90deg); }
.infra-tw-gap { width: 24px; flex: none; }
.infra-child .infra-name { padding-left: 32px; }
.infra-agent { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; font-size: 12.5px; }
.infra-agent.on > .icon { color: var(--ok); }
.infra-agent.off { color: var(--wait); }
.infra-agent.none { color: var(--ink-3); gap: 8px; }
@media (prefers-reduced-motion: reduce) { .infra-tw .icon { transition: none; } }
/* Connector setup is a step wizard (DESIGN.md Overlays › Step wizard): Telegram's steps keep their chat illustrations (remote.css rd-msgs). */
.ops-tg { display: grid; gap: 12px; }
.ops-tg-manual { display: grid; gap: 8px; }
.ops-tg-manual > summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--accent); width: max-content; }
.ops-tg-manual[open] > summary { margin-bottom: 4px; }
/* OVH rights to create, each with its copy button. */
.ops-rights { display: grid; gap: 6px; list-style: none; margin: 0; padding: 0; }
.ops-rights li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 6px 5px 10px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
/* A configured connector's state above its summary, and the review list of the last step. */
.ops-conn-state { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 4px; font-size: 12.5px; }
.ops-conn-state > .banner { flex-basis: 100%; }
.ops-review { display: grid; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.ops-review li { display: grid; gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.ops-review span { color: var(--ink-2); overflow-wrap: anywhere; }
.ops-tg-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ops-tg-cmd { margin: 0; flex: 1 1 160px; }
.ops-tg-chat { flex: none; overflow: visible; max-width: 380px; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
.ops-tg-chat li { background: var(--surface); }
.ops-tg-chat li.me { background: var(--accent-soft); }
.ops-tg-chat li.sys { background: none; }
.ops-tg-chat code { font-size: 11.5px; }
.ops-tg-found { display: grid; gap: 6px; }
.ops-tg-chatrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--r-md); }

.ops-result { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; white-space: nowrap; }
.ops-result.ok .icon { color: var(--ok); }
.ops-result.fail, .ops-result.stopped { color: var(--crit); font-weight: 600; }
.ops-result.waiting { color: var(--wait); font-weight: 600; }
.ops-result.declined { color: var(--ink-2); }
.ops-result.running { color: var(--accent); font-weight: 600; }
.ops-result.none { color: var(--ink-3); }

/* Status dots are circles (state); the brick stays for critical items only. */
.ops-dot { flex: none; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ok-mark); }
.ops-dot.degraded { background: var(--wait-mark); }
.ops-dot.offline { background: var(--crit-mark); }
.ops-dot.unknown { background: var(--line-strong); }

.ops-badge {
  display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 7px; border-radius: 6px;
  font-size: 11px; font-weight: 600; white-space: nowrap; background: var(--sunken); color: var(--ink-2);
}
.ops-badge.approval { background: color-mix(in oklab, var(--wait-mark) 14%, var(--surface)); color: var(--wait); }
.ops-badge.auto { background: var(--accent-soft); color: var(--accent); }
.ops-badge.verify { background: color-mix(in oklab, var(--ok-mark) 12%, var(--surface)); color: var(--ok); }

.ops-actor { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.ops-actor > .persona { flex: none; }
.ops-av {
  flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: color-mix(in oklab, var(--p-deep) 80%, var(--p-mid)); color: #FFFFFF; font-size: 9.5px; font-weight: 700; letter-spacing: 0.02em;
}

/* ---------- Lists: runbooks and automations ---------- */

.ops-trigger { font-size: 12.5px; font-weight: 600; }
.role.ops-note { max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ops-paused .machine-cell a, .ops-paused .machine-cell .tile { opacity: 0.6; }
.ops-switch-cell .switch span { min-width: 44px; color: var(--ink-2); }

/* ---------- Topology ---------- */

.ops-topo { display: grid; grid-template-columns: minmax(0, 1fr) 286px; gap: 17px; align-items: start; }
.ops-map-panel { display: flex; flex-direction: column; align-self: stretch; }
.ops-map { position: relative; flex: 1 1 auto; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0 28px; padding: 14px; }
.ops-links { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ops-link { fill: none; stroke: var(--line-strong); stroke-width: 1.5; transition: stroke 0.2s; }
.ops-link.vpn { stroke: color-mix(in oklab, var(--accent) 55%, var(--surface)); }
.ops-link.backup { stroke: var(--wait-mark); stroke-dasharray: 5 4; }
.ops-link.down { stroke: var(--crit-mark); stroke-dasharray: 4 4; }
.ops-link.on:not(.down):not(.backup) { stroke: var(--accent); stroke-width: 2.5; }
.ops-link.on.backup { stroke-width: 2.5; }

.ops-bands { display: grid; gap: 12px; min-width: 0; }
/* Live topology: no Internet column; a site band puts its devices box beside the site node. */
.ops-map.live { grid-template-columns: minmax(0, 1fr); align-content: start; align-items: start; }
.ops-band-body .ops-segs.wide { grid-column: 2 / -1; }
.ops-band-body .ops-segs.full { grid-column: 1 / -1; }
.ops-band { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); min-width: 0; }
.ops-band-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 10px; padding: 9px 12px 0; font-size: 12px; }
.ops-band-head h3 { font-size: 14px; font-weight: 700; }
.ops-band-flag { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; }
.ops-band-flag.crit { color: var(--crit); }
.ops-band-flag.wait { color: var(--wait); }
.ops-band-flag.ok { color: var(--ok); }
.ops-band-body { display: grid; grid-template-columns: 136px 136px minmax(0, 1fr); align-items: center; gap: 10px 16px; padding: 10px 12px 12px; }
.ops-col { display: grid; gap: 10px; min-width: 0; }
.ops-segs { display: grid; gap: 8px; min-width: 0; }
.ops-seg { padding: 0 7px 7px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); min-width: 0; }
.ops-seg-head { display: flex; justify-content: space-between; gap: 8px; padding: 7px 2px 6px; font-size: 11.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.ops-seg-head .data { overflow: hidden; text-overflow: ellipsis; font-weight: 400; color: var(--ink-3); }
.ops-leaves { display: flex; flex-wrap: wrap; gap: 6px; }

.ops-node {
  position: relative; display: flex; align-items: center; gap: 7px; width: 100%; min-width: 0;
  padding: 4px 8px 4px 4px; border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: var(--surface);
  text-align: left; transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.ops-leaves .ops-node { flex: 1 1 128px; width: auto; max-width: 230px; }
.ops-node:hover { border-color: var(--ink-3); }
.ops-node.degraded { border-color: color-mix(in oklab, var(--wait-mark) 60%, var(--surface)); }
.ops-node.offline { border-color: color-mix(in oklab, var(--crit-mark) 55%, var(--surface)); background: color-mix(in oklab, var(--crit-mark) 5%, var(--surface)); }
.ops-node[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ops-node .tile { flex: none; width: 26px; height: 26px; border-radius: 7.5px; }
.ops-node-txt { flex: 1; min-width: 0; line-height: 1.25; }
.ops-node-txt strong { display: block; font-size: 12px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ops-node-txt small { display: block; font-size: 10.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ops-node.offline small { color: var(--crit); }
.ops-node.degraded small { color: var(--wait); }
.ops-node-wan { flex-direction: column; gap: 5px; width: 76px; padding: 8px 4px; text-align: center; }
.ops-node-wan .tile { width: 38px; height: 38px; border-radius: 50%; }
.ops-node-wan .ops-dot { position: absolute; top: 6px; right: 6px; }
.ops-wan { position: relative; z-index: 1; }

.ops-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 10px 17px 12px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-2); }
.ops-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ops-key { display: inline-block; width: 22px; border-top: 2px solid var(--line-strong); }
.ops-key.vpn { border-color: color-mix(in oklab, var(--accent) 55%, var(--surface)); }
.ops-key.backup { border-top-style: dashed; border-color: var(--wait-mark); }
.ops-key.down { border-top-style: dashed; border-color: var(--crit-mark); }

.ops-side { position: sticky; top: calc(var(--top-h) + 16px); }
.ops-site-sum { list-style: none; margin: 0; padding: 0; }
.ops-site-sum li { padding: 9px 0; border-top: 1px solid var(--line); }
.ops-site-sum li:first-child { border-top: 0; padding-top: 2px; }
.ops-site-sum p { margin-top: 2px; font-size: 11.5px; }
.ops-site-top { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.ops-site-top .muted { font-size: 11.5px; }
/* One pillar per device; offline ones stand taller. */
.ops-pips { display: flex; align-items: flex-end; gap: 3px; height: 22px; margin-top: 6px; }
.ops-pips i { width: 6px; height: 18.5px; border-radius: 3px; background: var(--ok-mark); }
.ops-pips i.degraded { background: var(--wait-mark); }
.ops-pips i.offline { height: 22px; background: var(--crit-mark); }
.ops-pips i.unknown { background: var(--line-strong); }
.ops-sel-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.ops-sel-head > div { flex: 1; min-width: 0; }
.ops-sel-head h3 { font-size: 15px; font-weight: 700; }
.ops-sel-head p { font-size: 12px; }
.ops-sel .banner { margin-bottom: 12px; }
.ops-sel-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.ops-mini { list-style: none; margin: 0; padding: 0; }
.ops-mini li { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 12.5px; }

/* ---------- Runbook and automation details ---------- */

.ops-steps { list-style: none; margin: 0; padding: 0; }
.ops-step { position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; padding-bottom: 16px; }
.ops-step:last-child { padding-bottom: 2px; }
.ops-step:not(:last-child)::before { content: ""; position: absolute; left: 12.25px; top: 30px; bottom: 3px; width: 1.5px; border-radius: 1px; background: var(--line); }
.ops-step-n {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  border: 1.5px solid var(--line-strong); background: var(--surface); font-size: 12px; font-weight: 700; color: var(--ink-2);
}
.ops-step.approval .ops-step-n { border-color: var(--wait-mark); color: var(--wait); }
.ops-step.auto .ops-step-n { border-color: var(--accent); color: var(--accent); }
.ops-step.verify .ops-step-n { border-color: var(--ok-mark); color: var(--ok); }
.ops-step-top { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 10px; padding-top: 3px; }
.ops-step-top strong { font-size: 13px; }
.ops-step-body p { margin-top: 3px; max-width: 68ch; font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
.ops-script {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 7px; padding: 3px 8px; border-radius: 6px;
  background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 600;
}
.ops-script:hover { text-decoration: underline; text-underline-offset: 3px; }

.ops-params { list-style: none; margin: 0; padding: 0; }
.ops-params li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.ops-params li:first-child { border-top: 0; padding-top: 0; }
.ops-params .muted { grid-column: 1; font-size: 12px; }
.ops-params strong { grid-column: 2; grid-row: 1 / 3; align-self: center; text-align: right; font-size: 12.5px; font-weight: 600; }
.ops-policy { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.ops-policy li, .ops-rule { display: flex; align-items: flex-start; gap: 9px; font-size: 12.5px; line-height: 1.45; }
.ops-policy .icon, .ops-rule .icon { flex: none; margin-top: 1px; color: var(--ink-3); }
.ops-rule { margin-bottom: 10px; font-size: 13px; }

.ops-flow { list-style: none; margin: 0; padding: 0; }
.ops-flow-step { position: relative; display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 12px; padding-bottom: 14px; }
.ops-flow-step:last-child { padding-bottom: 0; }
.ops-flow-step:not(:last-child)::after { content: ""; position: absolute; left: calc(58px + 12px + 28px); bottom: 0; height: 14px; width: 1.5px; background: var(--line-strong); }
.ops-flow-tag { padding-top: 19px; text-align: right; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); }
.ops-flow-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
.ops-flow-card strong { font-size: 13px; }
.ops-flow-card p { margin-top: 2px; font-size: 12px; }
.ops-flow-list { margin: 0; padding-left: 16px; display: grid; gap: 6px; font-size: 12.5px; line-height: 1.4; }
.ops-flow-list a { font-weight: 600; color: var(--accent); }
.ops-flow-list a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ops-flow-list .ops-badge { margin-left: 4px; vertical-align: 1px; }

.ops-runbar { display: flex; align-items: flex-end; gap: 3px; height: 22px; }
.ops-runbar i { width: 6px; height: 18.5px; border-radius: 3px; background: var(--ok-mark); }
.ops-runbar i.bad { height: 22px; background: var(--crit-mark); }

/* ---------- Reports ---------- */

.ops-report-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 17px; }
.ops-report-card { display: grid; gap: 8px; align-content: start; padding: 14px 17px 13px; color: inherit; transition: border-color 0.15s, background 0.15s; }
.ops-report-card:hover { border-color: var(--accent-line); }
.ops-rc-top { display: flex; align-items: center; gap: 10px; }
.ops-rc-top h2 { flex: 1; font-size: 14.5px; font-weight: 700; }
.ops-rc-top > .icon { color: var(--ink-3); }
.ops-report-card p { font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
.ops-rc-spark .spark { width: 100%; }
.ops-rc-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11.5px; color: var(--ink-3); }
.ops-rc-meta span { display: inline-flex; align-items: center; gap: 5px; }
.ops-period { margin: 10px 0 14px; font-size: 12.5px; }
.ops-rp { display: flex; flex-direction: column; }
.ops-report-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; align-items: start; }
.ops-report-grid .ops-wide { grid-column: 1 / -1; }

/* ---------- Documentation (bound to the viewport, like Conversations) ---------- */

.fit .ops-docs-page { flex: 0 0 auto; height: calc(100dvh - var(--top-h) - 40px); min-height: 460px; }
.ops-docs { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 17px; flex: 1 1 auto; min-height: 0; }
.ops-docs-nav, .ops-docs-main { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.ops-docs-top { display: grid; gap: 10px; padding: 13px 13px 11px; border-bottom: 1px solid var(--line); }
.ops-docs-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ops-docs-title h2 { font-size: 15px; font-weight: 700; }
.ops-docs-search { position: relative; display: block; }
.ops-docs-search input { width: 100%; padding-left: 30.5px; }
.ops-docs-search .icon { position: absolute; left: 9.5px; top: 8.5px; color: var(--ink-3); }
.ops-tree { flex: 1 1 auto; overflow: auto; overscroll-behavior: contain; padding: 4px 8px 12px; }
.ops-tree-head { display: flex; justify-content: space-between; padding: 10px 8px 4px; font-size: 11.5px; font-weight: 600; color: var(--ink-3); }
.ops-tree ul { list-style: none; margin: 0; padding: 0; }
.ops-tree a { display: flex; align-items: flex-start; gap: 8px; padding: 6px 8px; border-radius: var(--r-sm); font-size: 13px; line-height: 1.35; color: var(--ink-2); }
.ops-tree a .icon { flex: none; margin-top: 2px; color: var(--ink-3); }
.ops-tree a:hover { background: var(--sunken); color: var(--ink); }
.ops-tree a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.ops-tree a[aria-current="page"] .icon { color: var(--accent); }
.ops-draft { display: inline-block; margin-left: 4px; padding: 0 5px; border-radius: 5px; border: 1px solid color-mix(in oklab, var(--wait-mark) 45%, var(--surface)); font-size: 10.5px; font-weight: 600; color: var(--wait); vertical-align: 1px; }
.ops-docs-main { overflow: auto; overscroll-behavior: contain; }
.ops-doc { padding: 20px 26px 32px; }
.ops-doc-back { display: none; align-items: center; gap: 5px; margin-bottom: 12px; font-size: 13px; font-weight: 600; color: var(--accent); }
.ops-doc .crumbs { margin-bottom: 10px; }
.ops-doc-head h1 { max-width: 34ch; font-size: 23.5px; line-height: 1.2; font-weight: 700; }
.ops-doc-head > p { margin-top: 6px; max-width: 68ch; font-size: 14px; line-height: 1.5; }
.ops-doc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 8px; font-size: 12.5px; color: var(--ink-2); }
.ops-doc-meta .persona, .ops-doc-meta .icon { margin-right: 2px; }
.ops-doc-meta .icon { color: var(--ink-3); }
.ops-doc-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.ops-doc-grid { display: grid; grid-template-columns: minmax(0, 72ch) 200px; justify-content: space-between; gap: 28px; margin-top: 22px; }
.ops-doc-body { font-size: 14px; line-height: 1.6; min-width: 0; }
.ops-doc-body h2 { margin: 22px 0 8px; font-size: 16px; font-weight: 700; }
.ops-doc-body > :first-child { margin-top: 0; }
.ops-doc-body p { margin: 0 0 12px; }
.ops-doc-body .banner { margin: 6px 0 14px; }
.ops-doc-body .banner p { margin: 0; font-size: 13px; line-height: 1.5; }
.ops-doc-steps { list-style: none; counter-reset: step; display: grid; gap: 10px; margin: 0 0 14px; padding: 0; }
.ops-doc-steps li { counter-increment: step; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; }
.ops-doc-steps li::before {
  content: counter(step); display: grid; place-items: center; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.ops-code { margin: 4px 0 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--sunken); overflow: hidden; }
.ops-code figcaption { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 3px 5px 3px 12px; border-bottom: 1px solid var(--line); font-size: 11.5px; font-weight: 600; color: var(--ink-3); }
.ops-code pre { margin: 0; padding: 12px; overflow: auto; font: 500 12px/1.65 var(--font-data); color: var(--ink); }
.ops-doc-table { margin: 4px 0 16px; border: 1px solid var(--line); border-radius: var(--r-md); }
.ops-doc-table .dt-table { font-size: 13px; }
.ops-doc-aside { min-width: 0; }
.ops-doc-aside h2 { margin: 0 0 8px; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.ops-doc-aside * + h2 { margin-top: 20px; }
.ops-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ops-chip { display: inline-flex; align-items: center; gap: 6px; height: 27px; padding: 0 10px; border-radius: 84px; border: 1px solid var(--line-strong); background: var(--surface); font-size: 12px; }
.ops-chip:hover { border-color: var(--accent-line); }
.ops-chip .icon { color: var(--ink-3); }
.ops-related { list-style: none; margin: 0; padding: 0; }
.ops-related li { padding: 5px 0; font-size: 13px; line-height: 1.4; }
.ops-related a { color: var(--accent); font-weight: 600; }
.ops-related a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ops-doc-sec { margin-top: 22px; }
.ops-doc-sec h2 { margin-bottom: 4px; font-size: 14px; font-weight: 700; }
.ops-doc .ops-flush { margin: 0 -26px; padding-bottom: 0; }
.ops-doc .row .ops-small { margin: 0; white-space: nowrap; }

/* ---------- Activity ---------- */

.ops-evt { display: grid; gap: 14px; margin-top: 12px; }
.ops-evt dl.facts dd .ops-actor { justify-content: flex-end; }
.ops-raw summary { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); cursor: pointer; list-style: none; }
.ops-raw summary::-webkit-details-marker { display: none; }
.ops-raw summary .icon { transition: transform 0.15s; }
.ops-raw[open] summary .icon { transform: rotate(90deg); }
.ops-raw pre { margin: 8px 0 0; padding: 12px; max-height: 260px; overflow: auto; border-radius: var(--r-md); background: var(--sunken); font: 500 12px/1.55 var(--font-data); }

/* ---------- Settings ---------- */

.ops-bot-card { display: flex; align-items: center; gap: 17px; padding: 14px 17px; }
.ops-bot-card h2 { font-size: 15px; font-weight: 700; }
.ops-bot-card p { margin-top: 3px; max-width: 70ch; font-size: 12.5px; line-height: 1.5; }
.ops-bot-card .ops-link-text { font-size: inherit; }
.panel-head.ops-subhead { margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--line); }
.ops-seg-choice { flex-wrap: wrap; }
.ops-locked { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.ops-days { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.ops-id { padding: 4px 8px; border-radius: 6px; background: var(--sunken); }
.ops-members .select-wrap select { min-width: 170px; }
.ops-members td { white-space: nowrap; }
.ops-settings .btn.danger:not(.solid) { color: var(--crit); }
.ops-danger { border-color: color-mix(in oklab, var(--crit-mark) 30%, var(--surface)); }
.ops-danger .panel-head h2 { color: var(--crit); }
.ops-memory { list-style: none; margin: 10px 0 8px; padding: 0; }
.ops-memory li { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; align-items: start; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.45; }
.ops-memory li:first-child { border-top: 0; }
.ops-memory .muted { font-size: 12px; }

/* ---------- Responsive ---------- */

@media (max-width: 1180px) {
  .ops-topo { grid-template-columns: minmax(0, 1fr); }
  .ops-side { position: static; }
  .ops-doc-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .ops-report-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
  .fit .ops-docs-page { height: auto; min-height: 0; }
  .ops-docs { grid-template-columns: minmax(0, 1fr); }
  .ops-docs.has-article .ops-docs-nav, .ops-docs:not(.has-article) .ops-docs-main { display: none; }
  .ops-docs-nav, .ops-docs-main, .ops-tree, .ops-docs-main { overflow: visible; }
  .ops-doc { padding: 16px 17px 24px; }
  .ops-doc .ops-flush { margin: 0 -17px; }
  .ops-doc-back { display: inline-flex; }
  .ops-doc .crumbs { display: none; }
  .ops-doc-head h1 { font-size: 21px; }
  .role.ops-note { max-width: 100%; white-space: normal; }
}

@media (max-width: 720px) {
  .ops-members thead { display: none; }
  .ops-members, .ops-members tbody { display: block; width: 100%; min-width: 0; }
  .ops-doc-table .dt-table { min-width: 0; }
  .ops-conn li > .pill { grid-column: 2; grid-row: 2; justify-self: start; }
  .ops-conn li > .btn { grid-column: 3; grid-row: 1 / 3; }
  .ops-members tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 10px; padding: 11px 17px; border-bottom: 1px solid var(--line); }
  .ops-members tbody tr:last-child { border-bottom: 0; }
  .ops-members td { padding: 0; border: 0; white-space: normal; }
  .ops-members td:nth-child(2), .ops-members td:nth-child(4) { display: none; }
  .ops-members td:nth-child(3) { grid-column: 1 / -1; grid-row: 2; }
  .ops-members .select-wrap, .ops-members .select-wrap select { width: 100%; }
  /* Stacked sites read on their own; long links would cross the devices. */
  .ops-map { grid-template-columns: minmax(0, 1fr); padding: 12px; }
  .ops-links, .ops-wan, .ops-legend .ops-lk { display: none; }
  .ops-band-body { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ops-segs { grid-column: 1 / -1; }
  .ops-band-body .ops-segs.wide, .ops-band-body .ops-segs.full { grid-column: 1 / -1; }
  .ops-flow-step { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .ops-flow-tag { padding-top: 0; text-align: left; }
  .ops-flow-step:not(:last-child)::after { left: 28px; }
  .ops-memory li { grid-template-columns: minmax(0, 1fr) auto; }
  .ops-memory li > .data { grid-column: 1 / -1; }
  .ops-bot-card { align-items: flex-start; }
}

/* Tables: short cells stay on one line, prose cells wrap. */
.ops-hist td, .ops-nowrap { white-space: nowrap; }
.ops-hist td.ops-wrap { white-space: normal; min-width: 160px; }
.ops-mlink.data { font-weight: 500; white-space: nowrap; }

@media (max-width: 520px) {
  .ops-filters .segmented { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Live plans (RunbooksPage): the steps of a plan and the step editor of a new plan. */
.pl-steps { display: grid; gap: 10px; margin: 0 0 14px; padding-left: 20px; }
.ops-step-edit { display: grid; gap: 8px; margin: 0; padding: 10px 12px 12px; border: 1px solid var(--line); border-radius: 8px; }
.ops-step-edit legend { padding: 0 4px; font-size: 12px; font-weight: 600; color: var(--ink-3); }

/* Brix's work in an answer (M9): the steps it took, the resources it cites and an error in words. The step rows reuse the
   workspace's subagent steps (.ws-agent-steps); the disclosure follows details.measures; sources follow msg.links rows. */
.msg-steps { margin: 2px 0 8.5px; font-size: 12.5px; color: var(--ink-2); }
.msg-steps summary { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--ink-2); list-style: none; }
.msg-steps summary::-webkit-details-marker { display: none; }
.msg-steps summary > .icon { flex: none; color: var(--ink-3); transition: transform 0.2s var(--ease-out); }
.msg-steps[open] summary > .icon { transform: rotate(90deg); }
.msg-steps-sys { font-weight: 500; color: var(--ink-3); }
.msg-steps-failed { margin-left: 4px; color: var(--crit); }
.msg-step-list { margin: 6px 0 0 5px; padding-left: 11px; border-left: 1px solid var(--line); }
.msg-step-list li { align-items: flex-start; }
.msg-step-list li > .icon, .msg-step-list li > .spin { flex: none; margin-top: 3px; }
.msg-step-result { color: var(--ink-3); }
.msg-step-list .failed .icon, .msg-step-list .failed .msg-step-text { color: var(--crit); }
.thinking-label + .msg-steps { margin-top: 7px; }
:is(.msg-bot, .chat-row) .msg-text ul { margin: 4px 0 6px; padding-left: 19px; font-size: 14px; line-height: 1.62; max-width: 68ch; }
:is(.msg-bot, .chat-row) .msg-text p + p, :is(.msg-bot, .chat-row) .msg-text ul + p, :is(.msg-bot, .chat-row) .msg-text p + ul { margin-top: 7px; }
:is(.msg-bot, .chat-row) .msg-text code.data { padding: 1px 4px; border-radius: 4px; background: var(--sunken); font-size: 12.5px; }
:is(.msg-bot, .chat-row) .msg-error { display: flex; align-items: center; gap: 6px; margin-top: 8.5px; font-size: 13px; color: var(--crit); }
:is(.msg-bot, .chat-row) .msg-error .icon { flex: none; }
.msg-sources { margin-top: 10px; max-width: 560px; }
:is(.msg-bot, .chat-row) .msg-sources-head { font-size: 11.5px; font-weight: 600; color: var(--ink-3); }
.msg-sources .rows { margin-top: 3px; padding: 0; }
.msg-source { padding: 6px 3.5px; grid-template-columns: 18.5px minmax(0, 1fr) auto auto; }
.msg-source > .icon:first-child { color: var(--ink-3); }
.msg-source-kind { font-size: 11.5px; color: var(--ink-3); }
:is(.msg-bot, .chat-row) .msg-sources-more { margin-top: 3px; font-size: 11.5px; color: var(--ink-3); }

/* Brix's Markdown (M9): the reference's message typography (14px, 1.62, 68ch measure), headings stepped down to the thread's scale,
   tables as the mini table, code in the data font with a copy button. Raw HTML never reaches this markup. */
.md { font-size: 14px; line-height: 1.62; }
:is(.msg-bot, .chat-row) .md > * { margin: 0; }
:is(.msg-bot, .chat-row) .md > * + * { margin-top: 8px; }
.md p, .md ul, .md ol, .md blockquote { max-width: 68ch; }
.md h3, .md h4, .md h5, .md h6 { line-height: 1.35; font-weight: 700; color: var(--ink); }
:is(.msg-bot, .chat-row) .md > * + :is(h3, h4, h5, h6) { margin-top: 14px; }
.md h3 { font-size: 15.5px; }
.md h4 { font-size: 14.5px; }
.md h5, .md h6 { font-size: 13.5px; }
.md ul, .md ol { padding-left: 20px; }
.md li + li { margin-top: 2px; }
.md li > ul, .md li > ol { margin-top: 2px; }
.md ul.contains-task-list { padding-left: 4px; list-style: none; }
.md .task-list-item input { margin-right: 6px; vertical-align: -2px; }
.md a { color: var(--accent); font-weight: 600; text-decoration: none; }
.md a:hover { text-decoration: underline; text-underline-offset: 3px; }
.md strong { font-weight: 700; color: var(--ink); }
.md del { color: var(--ink-3); }
.md blockquote { padding: 2px 0 2px 12px; border-left: 3px solid var(--line-strong); color: var(--ink-2); }
.md hr { border: 0; border-top: 1px solid var(--line); margin: 12px 0; }
.md :not(pre) > code { padding: 0.5px 4px; border-radius: 4px; background: var(--sunken); font-family: var(--font-data); font-size: 11.5px; }
.md table.mini-table { display: block; width: max-content; max-width: 100%; min-width: 0; overflow-x: auto; }
.md table.mini-table td { white-space: normal; }
.md table.mini-table td:nth-child(2) { font-weight: 400; }
.md-code { max-width: 860px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--sunken); overflow: hidden; }
.md-code-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 6px 4px 11px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.md-code-lang { font-size: 11px; font-weight: 600; color: var(--ink-3); }
.md-code pre { margin: 0; padding: 10px 12px; overflow-x: auto; }
.md-code code { font-family: var(--font-data); font-size: 12px; line-height: 1.6; white-space: pre; }
/* The streaming caret closes the last line: the last paragraph, heading, quote or list item. */
.md.streaming > :is(p, h3, h4, h5, h6, blockquote):last-child::after, .md.streaming > :is(ul, ol):last-child > li:last-child::after { content: ""; display: inline-block; width: 7px; height: 15px; margin-left: 3px; vertical-align: -2px; border-radius: 1.5px; background: var(--accent); animation: md-caret 1s steps(1) infinite; }
@keyframes md-caret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .md.streaming *::after { animation: none !important; opacity: 0.6; } }

/* Questions from Brix (M9), carded like the approval card: header chip, question, option rows, « Autre », stepper, summary. */
.q-card { max-width: 640px; margin-top: 13.5px; padding: 13.5px 15.5px; border: 1px solid var(--accent-line, var(--line-strong)); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-1); }
.q-card.answered { border-color: var(--line); box-shadow: none; padding: 10px 13.5px; }
.q-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.q-title { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; }
.q-title .icon { color: var(--accent); }
.q-chip { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 11.5px; font-weight: 700; }
.q-steps { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--ink-3); }
.q-dot { width: 8px; height: 8px; padding: 0; border: 1.5px solid var(--line-strong); border-radius: 50%; background: var(--surface); cursor: pointer; }
.q-dot.done { border-color: var(--ok-mark); background: var(--ok-mark); }
.q-dot.current { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.q-steps .num { margin-left: 3px; font-variant-numeric: tabular-nums; }
:is(.msg-bot, .chat-row) .q-text { margin-top: 9px; font-size: 14px; font-weight: 600; color: var(--ink); }
.q-opts { display: grid; gap: 6px; margin-top: 10px; }
.q-opt.check { display: flex; align-items: flex-start; gap: 10px; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.q-opt.check:hover { border-color: var(--line-strong); background: var(--surface-2); }
.q-opt.picked { border-color: var(--accent); background: var(--accent-soft); }
.q-opt input { margin-top: 2px; }
/* A radio group with nothing picked yet is :indeterminate; keep the empty ring, not the kit's indeterminate bar. */
.q-opt input[type="radio"]:indeterminate { background: var(--surface); border-color: var(--line-strong); }
.q-opt input[type="radio"]:indeterminate::after { content: none; }
.q-opt-body { display: grid; gap: 2px; min-width: 0; flex: 1; }
.q-opt-label { font-size: 13px; font-weight: 600; color: var(--ink); }
.q-opt-desc { font-size: 12px; line-height: 1.45; color: var(--ink-3); }
.q-free { width: 100%; margin-top: 6px; }
.q-card > .q-free { margin-top: 10px; }
.q-actions { display: flex; align-items: center; gap: 7px; margin-top: 12px; flex-wrap: wrap; }
.q-actions .spin { width: 14px; height: 14px; color: var(--accent); }
.q-missing { font-size: 12px; color: var(--wait); }
.q-summary { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 10px; align-items: center; margin: 8px 0 0; font-size: 13px; }
.q-summary dd { margin: 0; color: var(--ink-2); }
/* Shared asset page (Ops and Endpoint): agent state in the head, connector errors in the Sources panel. */
.asset-agent.off { color: var(--wait); }
.asset-agent.none { color: var(--ink-3); }
/* The agent's own update (AgentUpdateNote): quiet when up to date, the accent while on offer or under way, amber after a rollback,
   crit text on failure, never a brick (DESIGN.md, The Brick Rule). */
.agent-upd.quiet { color: var(--ink-3); }
.agent-upd.info { color: var(--accent); font-weight: 600; }
.agent-upd.wait { color: var(--wait); }
.agent-upd.crit { color: var(--crit); font-weight: 600; }
.asset-sources .asset-src-err { color: var(--wait); }
/* Asset head (operator choice of 2026-11-05, the demo's DC-01 head): the product's logo in the tile, warnings in line 2, "↗" after
   a link that leaves Breckly. */
.asset-head .tile .product-logo { border-radius: 5px; }
.asset-warn { color: var(--wait); }
.asset-ext { color: var(--ink-3); font-weight: 400; }
.asset-head h1 .skel { display: inline-block; vertical-align: middle; }
/* From 1280px the head keeps to two lines (operator's mockup): the name, chips and actions share line 1, and the facts run under
   them across the head instead of wrapping beside the actions. Narrower, the demo's wrapping head. Same markup either way. */
@media (min-width: 1280px) {
  .asset-head { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; column-gap: 13.5px; row-gap: 3.5px; align-items: center; }
  .asset-head > .icon-btn, .asset-head > .tile { grid-row: 1 / span 2; }
  .asset-head > .machine-id { display: contents; }
  .asset-head h1 { grid-column: 3; grid-row: 1; min-width: 0; }
  .asset-head .machine-meta { grid-column: 3 / -1; grid-row: 2; margin-top: 0; }
  .asset-head > .machine-actions { grid-column: 4; grid-row: 1; flex-wrap: nowrap; }
  .asset-head > p { grid-column: 1 / -1; }
}

/* Bell panel (PL-03, richer than app.js `bellMenu` on operator request): header, day groups, items with sentence, facts and actions. */
.notif-panel { width: min(400px, calc(100vw - 34px)); display: grid; gap: 0; margin: -4px; }
.notif-panel-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 6px 8px; border-bottom: 1px solid var(--line); }
.notif-panel-head > strong { font-size: 13.5px; margin-right: auto; }
.notif-panel-tools { display: inline-flex; align-items: center; gap: 2px; }
.notif-panel-list { max-height: min(62vh, 560px); overflow-y: auto; padding: 2px 0; }
.notif-empty { margin: 0; padding: 14px 8.5px; font-size: 12.5px; }
.notif-day { position: sticky; top: 0; z-index: 1; padding: 8px 8.5px 4px; background: var(--surface); font-size: 11.5px; font-weight: 600; color: var(--ink-3); }
.notif-item { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; align-items: start; padding: 8px 8.5px; border-radius: var(--r-sm); }
.notif-item:hover { background: var(--sunken); }
.notif-item .notif-icon { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; color: var(--ink-3); background: var(--sunken); }
.notif-item.tone-critical .notif-icon { color: var(--crit); background: color-mix(in srgb, var(--crit) 12%, transparent); }
.notif-item.tone-warning .notif-icon { color: var(--wait); background: color-mix(in srgb, var(--wait) 14%, transparent); }
.notif-item.tone-online .notif-icon { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.notif-item.tone-info .notif-icon { color: var(--accent); background: var(--accent-soft); }
.notif-main { min-width: 0; }
.notif-title { display: flex; align-items: baseline; gap: 6px; }
.notif-title .unread { flex: none; align-self: center; }
.notif-title strong { font-size: 13px; font-weight: 600; min-width: 0; }
.notif-item:not(.is-unread) .notif-title strong { font-weight: 500; color: var(--ink-2); }
.notif-title time { margin-left: auto; flex: none; font-size: 11.5px; color: var(--ink-3); }
.notif-main p { margin: 2px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
.notif-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.notif-meta .tag b { font-weight: 600; margin-left: 4px; }
.notif-asset { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 1px 7px; border: 1px solid var(--line); border-radius: 999px; font-size: 12px; color: var(--ink); }
.notif-asset:hover { border-color: var(--line-strong); background: var(--surface); }
.notif-asset > :not(.muted) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notif-actions { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; font-size: 12.5px; }
.notif-row-tools { display: inline-flex; gap: 0; opacity: .55; }
.notif-item:hover .notif-row-tools, .notif-item:focus-within .notif-row-tools { opacity: 1; }
.notif-panel-foot { display: flex; justify-content: flex-start; padding: 8px 8.5px 4px; border-top: 1px solid var(--line); font-size: 12.5px; }
.notif-panel-foot .link-text { display: inline-flex; align-items: center; gap: 5px; }
/* Hosted rows on an asset page: the name carries the asset hover card, the chevron opens the asset. */
.rows .asset-row { cursor: default; }
:is(.msg-bot, .chat-row) .q-sent { margin-top: 6px; font-size: 12.5px; color: var(--ink-3); }

/* The Brix conversation as a chat (M9, operator request): bubbles on both sides with their avatars, runs of the same author
   grouped under one name and time, cards attached under Brix's bubble. User bubble geometry from the reference (13.5/13.5/3.5/13.5,
   tailed bottom-right, 760px at most); Brix's bubble mirrors it, up to the 1120px assistant measure. */
.messages:has(.chat-row) { gap: 16px; }
.chat-row { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 9px; align-items: start; }
.chat-row.me { grid-template-columns: minmax(0, 1fr) 26px; }
.chat-row.me .chat-av { order: 2; }
.chat-row.cont { margin-top: -11px; }
.chat-av { display: grid; justify-items: center; padding-top: 18px; }
.chat-row.cont .chat-av { padding-top: 0; }
.chat-col { display: grid; gap: 4px; min-width: 0; justify-items: start; }
.chat-row.me .chat-col { justify-items: end; }
.chat-who { display: flex; align-items: baseline; gap: 7px; font-size: 12px; }
.chat-who strong { font-weight: 700; color: var(--ink); }
.chat-who time { font-size: 11px; font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.chat-row.me .chat-who { flex-direction: row-reverse; }
.chat-bubble { min-width: 0; max-width: 100%; padding: 9px 13.5px; font-size: 14px; line-height: 1.62; }
.chat-row.me .chat-bubble { max-width: min(760px, 78%); border: 1px solid var(--accent-line); border-radius: 13.5px 13.5px 3.5px 13.5px; background: var(--accent-soft); white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-row.brix .chat-bubble { max-width: min(1120px, 100%); border: 1px solid var(--line); border-radius: 13.5px 13.5px 13.5px 3.5px; background: var(--surface); box-shadow: var(--shadow-1); }
[data-theme="dark"] .chat-row.brix .chat-bubble { box-shadow: none; }
.chat-row.brix .chat-bubble:empty { display: none; }
.chat-row.brix .chat-bubble.working { padding: 7px 12px; }
.chat-bubble > :first-child { margin-top: 0; }
.chat-row .chat-bubble p { font-size: 14px; line-height: 1.62; max-width: 68ch; }
.chat-row .msg-steps:last-child { margin-bottom: 0; }
.chat-row .chat-col > .q-card, .chat-row .chat-col > .action-card, .chat-row .chat-col > .msg-sources, .chat-row .chat-col > .mini-wrap,
.chat-row .chat-col > .choices, .chat-row .chat-col > ul.rows { width: min(640px, 100%); margin-top: 4px; }
.chat-row .chat-col > .mini-wrap { width: min(860px, 100%); }
.chat-row .chat-col > .msg-sources { margin-top: 6px; }
.chat-status { font-size: 11.5px; color: var(--ink-3); }
.chat-status.wait { color: var(--wait); }
.chat-status.failed { color: var(--crit); }
.chat-me { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: 9.5px; font-weight: 800; }
.chat-brix { display: inline-grid; }
.chat-note { margin: -6px 0 0 35px; font-size: 11.5px; color: var(--ink-3); }
.chat-dots { display: inline-flex; gap: 3px; margin-left: 6px; vertical-align: middle; }
.chat-dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--ink-3); animation: chat-dot 1.2s infinite ease-in-out; }
.chat-dots i:nth-child(2) { animation-delay: 0.15s; }
.chat-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes chat-dot { 0%, 80%, 100% { opacity: 0.25; transform: none; } 40% { opacity: 1; transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .chat-dots i { animation: none; opacity: 0.6; } }
.cmp-stop { gap: 5px; }
@media (max-width: 600px) {
  .chat-row { grid-template-columns: 22px minmax(0, 1fr); gap: 7px; }
  .chat-row.me { grid-template-columns: minmax(0, 1fr) 22px; }
  .chat-row.me .chat-bubble { max-width: 88%; }
  .chat-bubble { padding: 8px 11px; }
}
.chat-row.me .chat-status { max-width: min(760px, 78%); text-align: right; }
/* Asset head (Ops and Endpoint): the identity keeps room for its name and facts; when the actions do not fit beside it, they go
   to the next line instead of squeezing it into a narrow column. */
.machine-head > .machine-id { flex: 1 1 240px; min-width: min(240px, 100%); }
.machine-head > .machine-actions { flex: 0 1 auto; }
/* Sources rows: the text has the whole line; the state and Configure sit under it. */
.asset-sources li { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 6px; }
.asset-sources li > .tile { grid-row: 1 / 3; align-self: start; }
.asset-sources li > span:nth-child(2) { grid-column: 2 / 4; }
.asset-sources li > .pill { grid-column: 2; grid-row: 2; justify-self: start; }
.asset-sources li > .btn { grid-column: 3; grid-row: 2; justify-self: end; }