/* ============================================================================
   ROUNDTABLE 2.0 — Collaborative AI Operations Workspace
   Slack × GitHub × Linear · Mission Control · dense · multi-agent · human-in-control
   Local-first · browser-first · self-contained (system fonts, no CDN, no framework)
   Maps to: src/web/public/workspace.css
   ============================================================================ */

:root {
  /* ---- surfaces ---- */
  --bg:        #0d0e13;   /* app canvas / deepest */
  --rail:      #0a0b0f;   /* far-left workspace rail */
  --bg-2:      #111219;   /* room list / wells */
  --surface:   #16171e;   /* timeline canvas */
  --surface-2: #1b1c24;   /* cards / panels */
  --surface-3: #21232c;   /* raised rows / headers */
  --surface-4: #292b36;   /* hover / selected */
  --line:      #25262f;   /* hairline */
  --line-2:    #33353f;   /* stronger border */

  /* ---- brand / authority — Electric Tangerine (Kraken palette) ---- */
  --orange:      #ff6d1f;
  --orange-soft: #ff8a45;
  --orange-tint: rgba(255,109,31,.14);
  --orange-t:    rgba(255,109,31,.14);   /* alias — matches the --*-t tint naming */
  --orange-line: rgba(255,109,31,.44);
  --grad: linear-gradient(135deg,#ff8a45,#ff6d1f 55%,#e55a0f);

  /* ---- text ---- */
  --fg1: #eceef4;
  --fg2: #a8aab6;
  --fg3: #797b85;
  --fg4: #5b5d67;

  /* ---- semantic ---- */
  --ok:    #5fb083;  --ok-t:   rgba(95,176,131,.13);  --ok-l:   rgba(95,176,131,.4);
  --warn:  #d9a441;  --warn-t: rgba(217,164,65,.14);  --warn-l: rgba(217,164,65,.42);
  --err:   #df6f5f;  --err-t:  rgba(223,111,95,.13);  --err-l:  rgba(223,111,95,.42);
  --info:  #6f9fd0;  --info-t: rgba(111,159,208,.13); --info-l: rgba(111,159,208,.4);
  --human: #c98be0;  --human-t:rgba(201,139,224,.15); --human-l:rgba(201,139,224,.44);
  --risk:  #e0683f;  --risk-t: rgba(224,104,63,.14);  --risk-l: rgba(224,104,63,.44);

  /* ---- agent accent ring colors (assigned per agent) ---- */
  --a-codex:   #6f9fd0;
  --a-claude:  #c98be0;
  --a-design:  #5fb083;
  --a-manus:   #d9a441;
  --a-gemini:  #e0683f;

  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  --r-xs: 5px; --r-sm: 7px; --r-md: 10px; --r-lg: 14px; --r-xl: 18px;
  --rail-w: 60px; --rooms-w: 248px; --ctx-w: 360px; --topbar-h: 48px;
}

/* ============================================================================
   LIGHT THEME — EXACT Kraken OS warm-paper palette (os-pages/theme.css).
   Page = sidebar = #FCFBF7 · white cards · ink-alpha borders · tangerine.
   ============================================================================ */
:root[data-theme="light"] {
  --bg:        #fcfbf7;   /* kw-page — warm paper canvas */
  --rail:      #fcfbf7;   /* sidebar = page (single-paper system) */
  --bg-2:      #fcfbf7;   /* room list / context = same paper */
  --surface:   #fcfbf7;   /* timeline reading area = paper */
  --surface-2: #ffffff;   /* kw-surface — white cards */
  --surface-3: #f7f5ee;   /* kw-surface-2 — raised rows / headers */
  --surface-4: #f2efe8;   /* kw-sunken — hover / selected */
  --line:      rgba(15,15,15,.07);   /* kw-border */
  --line-2:    rgba(15,15,15,.14);   /* kw-border-strong */

  --fg1: #0a0a0a;                /* kw-ink */
  --fg2: #3a3a3a;                /* kw-ink-3 */
  --fg3: rgba(15,15,15,.55);     /* kw-mute */
  --fg4: rgba(15,15,15,.36);     /* kw-fade */

  --orange-soft: #b33f03;        /* kw-brand-700 — tangerine text on paper */
  --orange-tint: rgba(255,109,31,.12);
  --orange-t:    rgba(255,109,31,.12);
  --orange-line: rgba(255,109,31,.42);

  --ok:   #0e7048;  --ok-t:   rgba(16,185,129,.10);  --ok-l:   rgba(16,185,129,.40);
  --warn: #8a5a07;  --warn-t: rgba(201,148,47,.14);  --warn-l: rgba(201,148,47,.42);
  --err:  #a11341;  --err-t:  rgba(161,19,65,.10);   --err-l:  rgba(161,19,65,.40);
  --info: #036497;  --info-t: rgba(42,130,201,.10);  --info-l: rgba(42,130,201,.40);
  --human:#4d3679;  --human-t:rgba(80,60,140,.10);   --human-l:rgba(80,60,140,.40);
  --risk: #b33f03;  --risk-t: rgba(255,109,31,.12);  --risk-l: rgba(255,109,31,.42);
}
/* Kraken soft paper shadows */
:root[data-theme="light"] .mention-pop { box-shadow: 0 6px 28px rgba(15,15,15,.10); }
:root[data-theme="light"] .context { box-shadow: -12px 0 32px -18px rgba(15,15,15,.12); }
/* workspace tiles — white cards with ink-alpha border on warm paper */
:root[data-theme="light"] .ws { background: #ffffff; border: 1px solid rgba(15,15,15,.12); color: var(--fg1); }
:root[data-theme="light"] .ws:hover { background: #ffffff; border-color: rgba(15,15,15,.24); }
:root[data-theme="light"] .ws.active,
:root[data-theme="light"] .ws.active:hover { background: var(--orange); border-color: transparent; color: #fff; }
:root[data-theme="light"] .ws.add { background: transparent; border-style: dashed; border-color: rgba(15,15,15,.18); color: var(--fg3); }
:root[data-theme="light"] .ws.add:hover { color: var(--orange); border-color: var(--orange-line); }
:root[data-theme="light"] .rail .sep { background: rgba(15,15,15,.10); }
/* section labels use kw-mute (Kraken label treatment) for readability on paper */
:root[data-theme="light"] #ctxBody > .ctx-sec-title,
:root[data-theme="light"] .room-group .gl,
:root[data-theme="light"] .tui-panel > .ph { color: var(--fg3); }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--fg2); font-family: var(--sans); font-size: 13px;
  line-height: 1.5; -webkit-font-smoothing: antialiased; overflow: hidden; }
::selection { background: var(--orange-tint); color: var(--fg1); }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 9px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #44464f; background-clip: padding-box; }
.mono { font-family: var(--mono); }
button { font-family: inherit; cursor: pointer; }
svg.ic { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ============================================================================
   APP GRID  —  rail | rooms | room-view | context
   ============================================================================ */
.app { display: grid; grid-template-columns: var(--rail-w) var(--rooms-w) 1fr var(--ctx-w);
  height: 100vh; overflow: hidden; }
.app.ctx-collapsed { grid-template-columns: var(--rail-w) var(--rooms-w) 1fr 0; }
.app.rooms-collapsed { grid-template-columns: var(--rail-w) 0 1fr var(--ctx-w); }

/* ============================================================================
   1 · WORKSPACE RAIL (far-left)
   ============================================================================ */
.rail { background: var(--rail); border-right: 1px solid var(--line); display: flex;
  flex-direction: column; align-items: center; padding: 10px 0; gap: 8px; }
.ws { position: relative; width: 40px; height: 40px; border-radius: 13px; border: none;
  background: var(--surface-2); color: var(--fg2); display: grid; place-items: center;
  font-weight: 700; font-size: 14px; transition: .14s; }
.ws:hover { border-radius: 11px; color: var(--fg1); background: var(--surface-3); }
.ws.active { background: var(--orange); color: #fff; border-radius: 12px; box-shadow: 0 4px 14px -4px rgba(255,109,31,.55); }
.ws.active::before { content: ""; position: absolute; left: -10px; top: 50%; transform: translateY(-50%);
  width: 4px; height: 22px; border-radius: 0 4px 4px 0; background: var(--orange); }
.ws .ws-badge { position: absolute; top: -3px; right: -3px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 9px; background: var(--err); color: #fff; font-size: 10px; font-weight: 700;
  display: grid; place-items: center; border: 2px solid var(--rail); }
.rail .sep { width: 26px; height: 1px; background: var(--line-2); margin: 2px 0; }
.rail .add { background: none; border: 1px dashed var(--line-2); color: var(--fg3); }
.rail .add:hover { color: var(--orange); border-color: var(--orange-line); }
.rail .spacer { flex: 1; }
.rail .me { width: 36px; height: 36px; border-radius: 50%; background: var(--surface-3); color: var(--human);
  display: grid; place-items: center; font-weight: 700; font-size: 13px; border: 2px solid var(--human-l); }

/* ============================================================================
   2 · ROOM LIST
   ============================================================================ */
.rooms { background: var(--bg-2); border-right: 1px solid var(--line); display: flex; flex-direction: column;
  overflow: hidden; min-width: 0; }
.rooms-head { padding: 12px 14px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 8px; }
.rooms-head .wm { font-weight: 700; font-size: 14px; color: var(--fg1); letter-spacing: -.01em; }
.rooms-head .wm small { display: block; font-family: var(--mono); font-size: 10px; color: var(--fg3); font-weight: 500; margin-top: 1px; }
.rooms-head .gear { margin-left: auto; color: var(--fg3); width: 28px; height: 28px; border-radius: 6px;
  background: none; border: none; display: grid; place-items: center; }
.rooms-head .gear:hover { background: var(--surface-2); color: var(--fg1); }

.rooms-search { padding: 10px 12px; }
.rooms-search .box { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 7px 10px; color: var(--fg4); font-size: 12px; }
.rooms-search .box svg { width: 14px; height: 14px; }

.rooms-list { flex: 1; overflow-y: auto; padding: 4px 8px 12px; }
.room-group { margin-top: 12px; }
.room-group .gl { display: flex; align-items: center; gap: 6px; padding: 4px 8px; font-family: var(--mono);
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg4); }
.room-group .gl .ct { margin-left: auto; }
.room-group .gl svg { width: 11px; height: 11px; }
.room { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: var(--r-sm);
  color: var(--fg2); font-size: 13px; border: none; background: none; width: 100%; text-align: left; transition: .1s; }
.room:hover { background: var(--surface-2); color: var(--fg1); }
.room.active { background: rgba(255,109,31,.14); color: var(--orange-soft); }
.room.active .room-glyph { color: var(--orange-soft); }
.room.active .unread { background: rgba(255,109,31,.20); color: var(--orange-soft); }
.room.active .live-dot { background: var(--orange); box-shadow: 0 0 7px rgba(255,109,31,.6); }
.room-glyph { width: 16px; color: var(--fg3); display: grid; place-items: center; font-family: var(--mono); flex: none; }
.room-glyph svg { width: 14px; height: 14px; }
.room .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room .room-meta { margin-left: auto; display: flex; align-items: center; gap: 6px; flex: none; }
.room .unread { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--surface-4);
  color: var(--fg1); font-size: 10.5px; font-weight: 700; display: grid; place-items: center; }
.room.has-alert .unread { background: var(--orange); color: #fff; }
.room .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 7px var(--ok); }
.room .pin { color: var(--fg4); }
.room .pin svg { width: 12px; height: 12px; }

.rooms-foot { border-top: 1px solid var(--line); padding: 10px 12px; display: flex; align-items: center; gap: 9px; }
.rooms-foot .status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.rooms-foot .txt { font-family: var(--mono); font-size: 10.5px; color: var(--fg3); }
.rooms-foot .txt b { color: var(--fg2); }

/* ============================================================================
   3 · ROOM VIEW (center)
   ============================================================================ */
.room-view { display: flex; flex-direction: column; background: var(--surface); overflow: hidden; min-width: 0; }

/* topbar */
.rv-top { height: var(--topbar-h); flex: none; display: flex; align-items: center; gap: 12px; padding: 0 16px;
  border-bottom: 1px solid var(--line); background: var(--surface); }
.rv-top .rv-glyph { color: var(--fg3); font-family: var(--mono); }
.rv-top .rv-title { font-weight: 700; font-size: 14px; color: var(--fg1); }
.rv-top .rv-topic { font-size: 12px; color: var(--fg3); border-left: 1px solid var(--line-2); padding-left: 12px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 360px; }
.rv-top .rv-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.rv-top .facepile { display: flex; align-items: center; margin-right: 6px; }
.rv-top .facepile .av { margin-left: -7px; border: 2px solid var(--surface); }
.iconbtn { width: 30px; height: 30px; border-radius: var(--r-sm); border: 1px solid transparent; background: none;
  color: var(--fg3); display: grid; place-items: center; transition: .12s; position: relative; }
.iconbtn:hover { background: var(--surface-3); color: var(--fg1); }
.iconbtn.on { background: var(--orange-tint); color: var(--orange); border-color: var(--orange-line); }
.iconbtn svg { width: 16px; height: 16px; }

/* governance ribbon — ink "authority bar" (Kraken kw-card--ink): dark strip,
   paper text, tangerine shield. Reads as the mission-control control plane. */
.gov-ribbon { flex: none; display: flex; align-items: center; gap: 9px; padding: 7px 16px;
  background: #0c0d11; border-bottom: 1px solid rgba(255,255,255,.06); font-size: 11.5px; color: rgba(236,238,244,.72); }
.gov-ribbon svg { width: 14px; height: 14px; color: var(--orange); }
.gov-ribbon b { color: #ffffff; }
.gov-ribbon .rb-right { margin-left: auto; font-family: var(--mono); font-size: 10.5px; color: rgba(236,238,244,.42); }
.gov-ribbon.lockdown { background: #2a0d12; border-color: rgba(223,111,95,.4); color: #f0a99f; }
.gov-ribbon.lockdown b { color: #ffd9d2; }
.gov-ribbon.lockdown svg { color: var(--err); }
:root[data-theme="light"] .gov-ribbon { background: var(--orange-tint); border-bottom-color: var(--orange-line); color: #5f3422; }
:root[data-theme="light"] .gov-ribbon b { color: #2f1b12; }
:root[data-theme="light"] .gov-ribbon .rb-right { color: rgba(95,52,34,.65); }
:root[data-theme="light"] .gov-ribbon.lockdown { background: var(--err-t); border-bottom-color: var(--err-l); color: #7d1c32; }
:root[data-theme="light"] .gov-ribbon.lockdown b { color: #4c0c1b; }

/* ============================================================================
   4 · CHAT TIMELINE
   ============================================================================ */
.timeline { flex: 1; overflow-y: auto; padding: 14px 16px 8px; display: flex; flex-direction: column; }
.day-div { display: flex; align-items: center; gap: 12px; margin: 16px 2px 8px; }
.day-div::before, .day-div::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.day-div span { font-family: var(--mono); font-size: 10.5px; color: var(--fg4); letter-spacing: .05em; }

.msg { display: grid; grid-template-columns: 38px 1fr; gap: 11px; padding: 7px 6px; border-radius: var(--r-sm);
  position: relative; }
.msg:hover { background: var(--surface-2); }
.msg.sys { grid-template-columns: 1fr; padding: 3px 6px; }
.msg .av-col { padding-top: 2px; }
.msg .m-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; flex-wrap: wrap; }
.msg .m-name { font-weight: 700; font-size: 13px; color: var(--fg1); }
.msg .m-ts { font-family: var(--mono); font-size: 10px; color: var(--fg4); }
.msg .m-body { font-size: 13.5px; color: var(--fg1); line-height: 1.55; }
.msg .m-body p { margin: 0 0 6px; } .msg .m-body p:last-child { margin: 0; }
.msg.cont { padding-top: 1px; padding-bottom: 1px; }
.msg.cont .av-col { opacity: 0; }
.msg.cont:hover .av-col { opacity: 1; }
.msg.cont .av-col .mini-ts { font-family: var(--mono); font-size: 9px; color: var(--fg4); text-align: center; }
.msg-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; opacity: .2; transition: opacity .12s; }
.msg:hover .msg-actions, .msg-actions:focus-within { opacity: 1; }
.mini-action { display: inline-flex; align-items: center; gap: 5px; min-height: 24px; padding: 0 8px; border-radius: 6px;
  border: 1px solid var(--line-2); background: var(--surface-3); color: var(--fg2); font-size: 11px; font-weight: 650; }
.mini-action:hover { color: var(--fg1); border-color: var(--orange-line); background: var(--orange-t); }
.mini-action.run { color: var(--orange-soft); border-color: var(--orange-line); }
.mini-action.ok { color: var(--ok); border-color: var(--ok-l); background: var(--ok-t); }
.mini-action.warn { color: var(--warn); border-color: var(--warn-l); background: var(--warn-t); }
.mini-action.stop { color: var(--err); border-color: var(--err-l); background: var(--err-t); }
.mini-action.review-action { color: var(--human); border-color: var(--human-l); background: var(--human-t); }
.mini-action.committee-action { color: var(--info); border-color: var(--info-l); background: var(--info-t); }
.mini-action.static { pointer-events: none; opacity: .72; }
.mini-action.static.completed { color: var(--ok); border-color: var(--ok-l); background: var(--ok-t); }
.mini-action.static.failed,
.mini-action.static.cancelled { color: var(--risk); border-color: var(--risk-l); background: var(--risk-t); }
.mini-action.disabled,
.mini-action.unavailable,
.mini-action:disabled,
.mini-action[aria-disabled="true"] { opacity: .48; cursor: not-allowed; color: var(--fg4); border-color: var(--line); background: var(--surface-2); }
.mini-action.unavailable:hover,
.mini-action:disabled:hover,
.mini-action[aria-disabled="true"]:hover { color: var(--fg4); border-color: var(--line); background: var(--surface-2); }
.inline-stop { margin-top: 6px; }
.mini-action svg { width: 13px; height: 13px; }

/* message kind tag */
.kind { display: inline-flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: 9.5px;
  font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 1px 6px; border-radius: 4px;
  border: 1px solid var(--line-2); color: var(--fg3); }
.kind.task { color: var(--orange-soft); background: var(--orange-t); border-color: var(--orange-line); }
.kind.proposal { color: var(--info); background: var(--info-t); border-color: var(--info-l); }
.kind.review { color: var(--human); background: var(--human-t); border-color: var(--human-l); }
.kind.decision { color: var(--ok); background: var(--ok-t); border-color: var(--ok-l); }
.kind.critique { color: var(--warn); background: var(--warn-t); border-color: var(--warn-l); }
.kind.blocked { color: var(--err); background: var(--err-t); border-color: var(--err-l); }

/* mentions & code inline */
.mention { color: var(--orange-soft); background: var(--orange-tint); padding: 0 4px; border-radius: 4px;
  font-weight: 600; font-size: 12.5px; }
.mention.human { color: var(--human); background: var(--human-t); }
.mention.all { color: var(--warn); background: var(--warn-t); }
.m-body code { font-family: var(--mono); font-size: 11.5px; background: var(--surface-3); color: var(--orange-soft);
  padding: 1px 5px; border-radius: 4px; border: 1px solid var(--line); }
.m-body a.ref { color: var(--info); text-decoration: none; border-bottom: 1px dashed var(--info-l); }

/* code block in message */
.m-code { margin: 8px 0; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; background: var(--bg-2); }
.m-code .cc-top { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--surface-3);
  border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 10.5px; color: var(--fg3); }
.m-code .cc-top .cp { margin-left: auto; color: var(--fg3); }
.m-code pre { margin: 0; padding: 10px 12px; font-family: var(--mono); font-size: 11.5px; line-height: 1.7;
  color: var(--fg2); overflow-x: auto; }
.m-code .kw { color: var(--info); } .m-code .st { color: var(--ok); } .m-code .fn { color: var(--orange-soft); }

/* attachment chips / cards */
.attach { display: flex; gap: 9px; margin-top: 7px; flex-wrap: wrap; }
.att-card { display: flex; align-items: center; gap: 9px; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 8px 11px; min-width: 180px; }
.att-card .ai { width: 30px; height: 30px; border-radius: 6px; display: grid; place-items: center; flex: none; }
.att-card .ai.diff { background: var(--ok-t); color: var(--ok); }
.att-card .ai.file { background: var(--info-t); color: var(--info); }
.att-card .ai.img { background: var(--human-t); color: var(--human); }
.att-card .ai svg { width: 16px; height: 16px; }
.att-card .an { font-size: 12px; color: var(--fg1); font-weight: 600; }
.att-card .as { font-family: var(--mono); font-size: 10px; color: var(--fg3); margin-top: 1px; }
.att-card .as .pos { color: var(--ok); } .att-card .as .neg { color: var(--err); }

/* inline proposal/review card embedded in timeline */
.embed { margin-top: 8px; border: 1px solid var(--line-2); border-radius: var(--r-md); overflow: hidden; max-width: 560px; }
.embed .e-top { display: flex; align-items: center; gap: 9px; padding: 9px 12px; background: var(--surface-3);
  border-bottom: 1px solid var(--line); }
.embed .e-top .e-id { font-family: var(--mono); font-size: 11px; color: var(--orange-soft); font-weight: 600; }
.embed .e-top .e-title { font-size: 12.5px; font-weight: 600; color: var(--fg1); }
.embed .e-top .b { margin-left: auto; }
.embed .e-body { padding: 10px 12px; }
.embed .e-row { display: flex; gap: 10px; font-size: 11.5px; padding: 3px 0; }
.embed .e-row .ek { color: var(--fg3); width: 76px; flex: none; font-family: var(--mono); font-size: 10.5px; }
.embed .e-actions { display: flex; gap: 7px; padding: 9px 12px; border-top: 1px solid var(--line); background: var(--surface-2); }

/* reactions */
.reacts { display: flex; gap: 5px; margin-top: 6px; flex-wrap: wrap; }
.react { display: inline-flex; align-items: center; gap: 5px; background: var(--surface-3); border: 1px solid var(--line);
  border-radius: 11px; padding: 2px 8px; font-size: 11px; color: var(--fg2); }
.react.mine { background: var(--orange-tint); border-color: var(--orange-line); color: var(--orange-soft); }
.react .rc { font-family: var(--mono); font-size: 10px; color: var(--fg3); }
.mention-lifecycle .mention-state.ok { color: var(--ok); border-color: var(--ok-l); background: var(--ok-t); }
.mention-lifecycle .mention-state.warn { color: var(--warn); border-color: var(--warn-l); background: var(--warn-t); }
.mention-lifecycle .mention-state.risk { color: var(--risk); border-color: var(--risk-l); background: var(--risk-t); }

.agent-working-strip { display: grid; gap: 8px; margin: 4px 6px 8px; }
.agent-working { display: flex; align-items: center; gap: 8px; width: fit-content; max-width: 100%;
  border: 1px solid var(--warn-l); background: var(--warn-t); color: var(--fg2); border-radius: var(--r-sm); padding: 7px 9px; }
.agent-working b { color: var(--fg1); }
.agent-response { max-width: 720px; }
.agent-response-head { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
.recommendation-card { margin-top: 9px; max-width: 620px; border: 1px solid var(--info-l); background: var(--info-t);
  border-radius: var(--r-md); overflow: hidden; }
.recommendation-card .rec-top { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-bottom: 1px solid var(--line);
  background: var(--surface-2); color: var(--fg1); }
.recommendation-card .rec-top svg { color: var(--info); }
.recommendation-card .rec-top .b { margin-left: auto; }
.recommendation-card .rec-body { padding: 10px 11px; color: var(--fg2); font-size: 12.5px; line-height: 1.5; }
.recommendation-card .rec-meta { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 11px 9px;
  font-family: var(--mono); font-size: 10px; color: var(--fg3); }
.recommendation-card .rec-meta span:not(:last-child)::after { content: "·"; margin-left: 7px; color: var(--fg4); }
.recommendation-card .rec-actions { display: flex; gap: 6px; flex-wrap: wrap; padding: 9px 11px; border-top: 1px solid var(--line);
  background: var(--surface-2); }

/* typing / status line */
.typing { display: flex; align-items: center; gap: 8px; padding: 4px 8px 8px; font-size: 11.5px; color: var(--fg3);
  font-style: italic; }
.typing .dots { display: inline-flex; gap: 3px; }
.typing .dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--orange); animation: blink 1.2s infinite; }
.typing .dots i:nth-child(2){ animation-delay: .2s; } .typing .dots i:nth-child(3){ animation-delay: .4s; }
@keyframes blink { 0%,60%,100%{opacity:.25;} 30%{opacity:1;} }

/* ============================================================================
   AVATARS (agents + human)
   ============================================================================ */
.av { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-weight: 700;
  font-size: 13px; color: #fff; position: relative; flex: none; }
.av.sm { width: 22px; height: 22px; border-radius: 6px; font-size: 10px; }
.av.lg { width: 44px; height: 44px; border-radius: 12px; font-size: 16px; }
.av.human { background: var(--surface-3); color: var(--human); border: 1.5px solid var(--human-l); }
.av .presence { position: absolute; right: -3px; bottom: -3px; width: 11px; height: 11px; border-radius: 50%;
  border: 2px solid var(--surface); }
.av.sm .presence { width: 8px; height: 8px; right: -2px; bottom: -2px; }
.presence.online { background: var(--ok); box-shadow: 0 0 6px var(--ok); }
.presence.busy   { background: var(--warn); }
.presence.thinking { background: var(--info); }
.presence.offline { background: var(--fg4); }

/* ============================================================================
   5 · COMPOSER
   ============================================================================ */
.composer-wrap { flex: none; padding: 10px 16px 14px; }
.composer { position: relative; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface-2);
  transition: border-color .15s; }
.composer.focus { border-color: var(--orange-line); box-shadow: 0 0 0 3px var(--orange-tint); }
.composer .c-toolbar { display: flex; align-items: center; gap: 2px; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.composer .c-toolbar .tb { width: 28px; height: 28px; border-radius: 6px; background: none; border: none; color: var(--fg3);
  display: grid; place-items: center; }
.composer .c-toolbar .tb:hover { background: var(--surface-3); color: var(--fg1); }
.composer .c-toolbar .tb:disabled,
.composer .c-toolbar .tb[aria-disabled="true"] { color: var(--fg4); cursor: not-allowed; opacity: .58; }
.composer .c-toolbar .tb:disabled:hover,
.composer .c-toolbar .tb[aria-disabled="true"]:hover { background: transparent; color: var(--fg4); }
.composer .c-toolbar .tb svg { width: 15px; height: 15px; }
.composer .c-toolbar .sep { width: 1px; height: 18px; background: var(--line-2); margin: 0 4px; }
.composer .c-toolbar .target { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 11px;
  color: var(--fg2); font-family: var(--mono); border: 1px solid var(--line-2); background: var(--surface);
  border-radius: 999px; padding: 3px 8px 3px 4px; cursor: pointer; transition: .12s; white-space: nowrap; }
.composer .c-toolbar .target:hover { background: var(--surface-3); border-color: var(--human-l); }
.composer .c-toolbar .target .who { color: var(--human); font-weight: 600; }
.composer .c-toolbar .target .chev { width: 12px; height: 12px; color: var(--fg3); }
.composer .c-input { padding: 11px 13px; min-height: 24px; color: var(--fg1); font-size: 13.5px; outline: none; }
.composer .c-input:empty::before { content: attr(data-ph); color: var(--fg4); }
.composer .auth-strip { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.composer .auth-strip input { min-width: 0; width: 130px; height: 28px; border-radius: 6px; border: 1px solid var(--line-2);
  background: var(--surface); color: var(--fg1); padding: 0 9px; font: inherit; }
.composer .auth-strip input:focus { outline: none; border-color: var(--orange-line); box-shadow: 0 0 0 3px var(--orange-tint); }
.composer .c-foot { display: flex; align-items: center; gap: 10px; padding: 8px 10px; }
.composer .c-foot .hint { font-family: var(--mono); font-size: 10.5px; color: var(--fg4); }
.composer .c-foot .hint b { color: var(--fg3); }
.composer .c-foot .send { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; background: var(--grad);
  color: #fff; border: none; border-radius: var(--r-sm); padding: 8px 15px; font-size: 12.5px; font-weight: 600;
  box-shadow: 0 6px 16px -6px rgba(239,106,54,.5); }
.composer .c-foot .send:active { transform: scale(.97); }
.composer .c-foot .send svg { width: 14px; height: 14px; }
.composer .c-foot .send:disabled, .composer .c-foot .send.is-disabled {
  background: var(--surface-3); color: var(--fg4); box-shadow: none; cursor: not-allowed; filter: none; transform: none; }
.composer .c-attach-row { display: flex; gap: 8px; padding: 0 12px 10px; flex-wrap: wrap; }

/* mention autocomplete popover */
.mention-pop { position: absolute; top: 44px; left: 10px; width: min(280px, calc(100% - 20px)); max-height: 180px;
  overflow: auto; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r-md);
  box-shadow: 0 24px 50px -16px rgba(0,0,0,.7); padding: 6px; z-index: 70; display: none; }
.mention-pop.show { display: block; }
.mention-pop .mp-h { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--fg4); padding: 5px 8px; }
.mention-pop .mp-row { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: var(--r-sm); }
.mention-pop .mp-row:hover, .mention-pop .mp-row.sel { background: var(--surface-3); }
.mention-pop .mp-row .mp-name { font-size: 12.5px; color: var(--fg1); font-weight: 600; }
.mention-pop .mp-row .mp-role { font-family: var(--mono); font-size: 10px; color: var(--fg3); margin-left: auto; }

/* ============================================================================
   6 · CONTEXT PANEL (right, tabbed)
   ============================================================================ */
.context { background: var(--bg-2); border-left: 1px solid var(--line); display: flex; flex-direction: column;
  overflow: hidden; min-width: 0; }
.ctx-tabs { display: flex; gap: 1px; padding: 8px 8px 0; border-bottom: 1px solid var(--line); overflow-x: auto; flex: none; }
.ctx-tabs::-webkit-scrollbar { height: 0; }
.ctx-tab { display: inline-flex; align-items: center; gap: 6px; padding: 8px 11px; border: none; background: none;
  color: var(--fg3); font-size: 12px; font-weight: 600; border-bottom: 2px solid transparent; white-space: nowrap; }
.ctx-tab svg { width: 14px; height: 14px; }
.ctx-tab .tct { font-family: var(--mono); font-size: 10px; background: var(--surface-3); color: var(--fg2);
  padding: 0 5px; border-radius: 7px; min-width: 16px; text-align: center; }
.ctx-tab:hover { color: var(--fg1); }
.ctx-tab.active { color: var(--fg1); border-bottom-color: var(--orange); }
.ctx-tab.active svg { color: var(--orange); }
.ctx-body { flex: 1; overflow-y: auto; padding: 12px; }
.ctx-sec-title { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--fg4); margin: 4px 2px 10px; }
.ctx-sec-title .ct { margin-left: auto; color: var(--fg3); }
.ctx-sec-title:not(:first-child) { margin-top: 20px; }

/* generic panel card */
.pcard { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); margin-bottom: 9px; overflow: hidden; }
.pcard .pc-top { display: flex; align-items: center; gap: 9px; padding: 9px 11px; }
.pcard .pc-top.bd { border-bottom: 1px solid var(--line); background: var(--surface-3); }
.pcard .pc-body { padding: 9px 11px; }
.pcard .pc-row { display: flex; gap: 8px; font-size: 11.5px; padding: 3px 0; }
.pcard .pc-row .pk { color: var(--fg3); width: 78px; flex: none; font-family: var(--mono); font-size: 10.5px; }
.pcard .pc-row .pv { color: var(--fg2); }

/* ---- 8/9/10 AGENT CARD ---- */
.agent-card { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md);
  margin-bottom: 9px; overflow: hidden; }
.agent-card .ac-top { display: flex; align-items: center; gap: 10px; padding: 11px; }
.agent-card .ac-id { min-width: 0; }
.agent-card .ac-name { font-size: 13px; font-weight: 700; color: var(--fg1); display: flex; align-items: center; gap: 7px; }
.agent-card .ac-sub { font-family: var(--mono); font-size: 10.5px; color: var(--fg3); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-card .ac-status { margin-left: auto; flex: none; }
.agent-card .ac-status { display: inline-flex; align-items: center; gap: 6px; }
.agent-card .ac-foot { display: flex; align-items: center; gap: 6px; padding: 8px 11px; border-top: 1px solid var(--line);
  background: var(--surface); flex-wrap: wrap; }
.agent-profile-body { display: grid; gap: 7px; padding: 0 11px 10px; }
.agent-profile-row { display: grid; grid-template-columns: 72px 1fr; gap: 8px; align-items: start; font-size: 11.5px; }
.agent-profile-row > span:first-child { font-family: var(--mono); color: var(--fg3); font-size: 10.5px; }
.capability-chip { color: var(--info); background: var(--info-t); border-color: var(--info-l); }
.agent-turns { display: grid; gap: 6px; padding: 9px 11px; border-top: 1px solid var(--line); background: var(--surface); }
.agent-turn-mini { display: grid; grid-template-columns: auto 1fr auto; gap: 7px; align-items: center; font-size: 11px; color: var(--fg2); }
.muted-line { font-family: var(--mono); font-size: 10.5px; color: var(--fg4); }
.status-pill { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 10px;
  font-weight: 600; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--fg3); }
.status-pill .sd { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-pill.online   { color: var(--ok);   background: var(--ok-t);   border-color: var(--ok-l); }
.status-pill.busy     { color: var(--warn); background: var(--warn-t); border-color: var(--warn-l); }
.status-pill.thinking { color: var(--info); background: var(--info-t); border-color: var(--info-l); }
.status-pill.offline  { color: var(--fg3); }
.status-pill .spin { width: 9px; height: 9px; animation: spin 1s linear infinite; }
.health-indicator { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 7px;
  border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--fg3); }
.health-indicator svg { width: 13px; height: 13px; }
.health-indicator .health-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.health-indicator.ok { color: var(--ok); border-color: var(--ok-l); background: var(--ok-t); }
.health-indicator.warn { color: var(--warn); border-color: var(--warn-l); background: var(--warn-t); }
.health-indicator.risk { color: var(--risk); border-color: var(--risk-l); background: var(--risk-t); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- badges (shared) ---- */
.b { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 10px; font-weight: 600;
  padding: 2px 7px; border-radius: 5px; border: 1px solid var(--line-2); color: var(--fg2); background: var(--surface-3); white-space: nowrap; }
.b svg { width: 10px; height: 10px; }
.b.role { color: var(--orange-soft); background: var(--orange-t); border-color: var(--orange-line); }
.b.human { color: var(--human); background: var(--human-t); border-color: var(--human-l); }
.b.perm.granted { color: var(--ok); background: var(--ok-t); border-color: var(--ok-l); }
.b.perm.revoked { color: var(--fg4); background: transparent; border-style: dashed; }
.b.ok { color: var(--ok); background: var(--ok-t); border-color: var(--ok-l); }
.b.warn { color: var(--warn); background: var(--warn-t); border-color: var(--warn-l); }
.b.err { color: var(--err); background: var(--err-t); border-color: var(--err-l); }
.b.info { color: var(--info); background: var(--info-t); border-color: var(--info-l); }
.b.human2 { color: var(--human); background: var(--human-t); border-color: var(--human-l); }
.b.risk { color: var(--risk); background: var(--risk-t); border-color: var(--risk-l); }
.b.lock { color: var(--warn); background: var(--warn-t); border-color: var(--warn-l); }
.b.muted { color: var(--fg3); }
.permset { display: flex; gap: 4px; flex-wrap: wrap; }

/* ---- 11 TASK PANEL ---- */
.task { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); margin-bottom: 8px; }
.task .tk-top { display: flex; align-items: center; gap: 9px; padding: 10px 11px; }
.task .tk-id { font-family: var(--mono); font-size: 10.5px; color: var(--orange-soft); font-weight: 600; }
.task .tk-title { font-size: 12.5px; color: var(--fg1); font-weight: 600; flex: 1; }
.task .tk-foot { display: flex; align-items: center; gap: 8px; padding: 0 11px 10px; }
.task .tk-assignee { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.task-state { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 10px; font-weight: 600;
  padding: 2px 7px; border-radius: 5px; }
.task-state.todo { color: var(--fg3); background: var(--surface-3); }
.task-state.doing { color: var(--info); background: var(--info-t); }
.task-state.review { color: var(--human); background: var(--human-t); }
.task-state.blocked { color: var(--err); background: var(--err-t); }
.task-state.done { color: var(--ok); background: var(--ok-t); }
.task .tk-prog { height: 3px; background: var(--surface-4); border-radius: 3px; margin: 0 11px 10px; overflow: hidden; }
.task .tk-prog i { display: block; height: 100%; background: var(--grad); border-radius: 3px; }

/* ---- 12 DEPENDENCY GRAPH ---- */
.depgraph { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px;
  position: relative; overflow: hidden; }
.depgraph svg { width: 100%; display: block; }
.dep-legend { display: flex; gap: 12px; margin-top: 10px; font-size: 10.5px; color: var(--fg3); flex-wrap: wrap; }
.dep-legend .li { display: flex; align-items: center; gap: 6px; }
.dep-legend .sw { width: 9px; height: 9px; border-radius: 3px; }

/* ---- 16 AUDIT ---- */
.audit-row { display: grid; grid-template-columns: 52px 1fr; gap: 9px; padding: 6px 2px; font-family: var(--mono);
  font-size: 10.5px; border-bottom: 1px dashed var(--line); align-items: baseline; }
.audit-row:last-child { border-bottom: none; }
.audit-row .a-ts { color: var(--fg4); }
.audit-row .a-main .a-actor.human { color: var(--human); }
.audit-row .a-main .a-actor.agent { color: var(--info); }
.audit-row .a-main .a-actor.system { color: var(--fg3); }
.audit-row .a-main .a-type { color: var(--fg1); }
.audit-row .a-main .a-pl { color: var(--fg3); }

/* ---- 17 ACTIVITY FEED ---- */
.act-row { display: grid; grid-template-columns: 26px 1fr; gap: 9px; padding: 8px 2px; border-bottom: 1px dashed var(--line); }
.act-row:last-child { border-bottom: none; }
.act-row .a-ico { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; flex: none; }
.act-row .a-ico svg { width: 13px; height: 13px; }
.act-row .a-txt { font-size: 11.5px; color: var(--fg2); line-height: 1.45; }
.act-row .a-txt b { color: var(--fg1); font-weight: 600; }
.act-row .a-txt .at { font-family: var(--mono); font-size: 9.5px; color: var(--fg4); display: block; margin-top: 2px; }

/* buttons used in panels */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 11.5px; font-weight: 600;
  padding: 6px 11px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--surface-3); color: var(--fg1); }
.btn svg { width: 13px; height: 13px; }
.btn:hover { background: var(--surface-4); }
.btn.primary { background: var(--grad); color: #fff; border-color: transparent; }
.btn.ghost { background: none; }
.btn.sm { padding: 4px 9px; font-size: 11px; }
.btn.disabled { opacity: .45; pointer-events: none; }
.btn.human { border-color: var(--human-l); color: var(--human); background: var(--human-t); }

/* ============================================================================
   EMPTY / LOADING STATES
   ============================================================================ */
.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: 50px 20px; color: var(--fg3); }
.empty .ew { width: 52px; height: 52px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line-2);
  display: grid; place-items: center; margin-bottom: 14px; }
.empty .ew svg { width: 24px; height: 24px; color: var(--fg3); }
.empty h3 { font-size: 15px; color: var(--fg1); margin: 0 0 6px; }
.empty p { font-size: 12px; max-width: 280px; margin: 0; }
.empty-mini { text-align: center; padding: 20px 10px; color: var(--fg4); font-size: 11px; font-family: var(--mono); }
.empty-mini svg { width: 18px; height: 18px; margin-bottom: 7px; }

.sk { background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);
  background-size: 400% 100%; animation: shimmer 1.4s ease infinite; border-radius: 5px; }
@keyframes shimmer { 0%{background-position:100% 0;} 100%{background-position:-100% 0;} }
.sk-msg { display: grid; grid-template-columns: 34px 1fr; gap: 11px; padding: 8px 6px; }
.sk-msg .sk-av { width: 34px; height: 34px; border-radius: 9px; }
.sk-line { height: 10px; margin: 4px 0; }

/* big screen-level empty (no room) */
.room-empty { flex: 1; display: grid; place-items: center; }
.hidden { display: none !important; }
.icon-nudge { margin-right: -4px; }
.avatar-codex { background: #4a7cb8; }
.avatar-claude { background: #a35fc6; }
.avatar-design { background: #439268; }
.avatar-gemini { background: #c8502f; }
.avatar-manus { background: #a8761c; }
.avatar-all { background: var(--warn); color: #1a1a1a; }
.avatar-operator-mark { width: 16px; height: 16px; border-radius: 4px; background: var(--surface-3);
  border: 1px solid var(--human-l); color: var(--human); display: grid; place-items: center;
  font-size: 8px; font-weight: 700; }
.composer.readonly { opacity: .82; }
.composer.readonly .c-input { color: var(--fg3); cursor: default; }
.composer.readonly .send,
.composer.readonly .tb { cursor: not-allowed; filter: grayscale(.2); opacity: .62; }
.composer.readonly .send { background: var(--surface-4); color: var(--fg3); box-shadow: none; }
.composer.locked .c-input { color: var(--fg3); }
.composer.locked .send { background: var(--surface-4); color: var(--fg3); box-shadow: none; }
.composer.busy { opacity: .72; }
.hidden { display: none !important; }
.mention-pop { min-width: 210px; }
.mention-pop:not(:empty) { display: flex; flex-direction: column; }
.mention-pop:empty { display: none; }
.mention-choice { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 0; background: transparent;
  color: var(--fg1); padding: 8px 10px; text-align: left; width: 100%; border-radius: var(--r-sm); }
.mention-choice:hover { background: var(--surface-3); color: var(--orange-soft); }
.mention-choice span { color: var(--fg3); font-size: 11px; }
.cli-hint { color: var(--orange-soft); }
.msg.sys .m-body { color: var(--fg3); font-size: 11.5px; font-family: var(--mono); }
.typing.workline { padding: 4px 0 0; }
.react-muted { color: var(--fg4); }
.agent-card.operator-card { border-color: var(--human-l); }
.ctx-section-gap { margin-top: 18px; }
.ctx-section-gap-lg { margin-top: 20px; }
.governance-lock-strip { display: flex; align-items: center; gap: 9px; padding: 11px;
  background: var(--warn-t); border-bottom: 1px solid var(--warn-l); }
.governance-lock-strip .lock-icon { color: var(--warn); }
.governance-lock-strip .lock-copy { font-size: 11.5px; color: var(--fg2); }
.governance-lock-strip .lock-holder { color: #e8c074; }
.governance-body { padding: 9px 11px; }
.matrix-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.matrix-name { font-size: 11.5px; color: var(--fg1); width: 96px; }
.cli-note { display: flex; gap: 8px; margin-top: 10px; }
.cli-note .b { padding: 8px 11px; width: 100%; justify-content: center; }
.activity-icon { background: var(--info-t); color: var(--info); }
.activity-icon.human2 { background: var(--human-t); color: var(--human); }
.activity-icon.ok { background: var(--ok-t); color: var(--ok); }
.activity-icon.warn { background: var(--warn-t); color: var(--warn); }
.activity-icon.risk { background: var(--risk-t); color: var(--risk); }
.flow-card { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2);
  margin-bottom: 10px; overflow: hidden; }
.flow-head { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-bottom: 1px solid var(--line);
  color: var(--fg1); min-width: 0; }
.flow-head b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flow-graph { padding: 10px 11px; display: grid; gap: 7px; }
.flow-step { display: flex; gap: 9px; align-items: center; border: 1px solid var(--line);
  background: var(--surface-3); border-radius: var(--r-sm); padding: 8px; }
.flow-step.done { border-color: var(--ok-l); background: var(--ok-t); }
.flow-step.running, .flow-step.ready { border-color: var(--warn-l); background: var(--warn-t); }
.flow-step.failed, .flow-step.cancelled { border-color: var(--risk-l); background: var(--risk-t); }
.flow-pos { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--surface-4); color: var(--fg2); font-family: var(--mono); font-size: 10px; font-weight: 700; }
.flow-step-main { min-width: 0; flex: 1; }
.flow-step b { color: var(--fg1); font-size: 12px; }
.flow-step small { display: block; margin-top: 1px; color: var(--fg3); font-size: 10.5px; line-height: 1.35; }
.flow-edge { display: inline-flex; align-items: center; gap: 6px; color: var(--fg3); font-family: var(--mono);
  font-size: 10px; padding-left: 8px; }
.flow-edge svg { width: 13px; height: 13px; color: var(--orange-soft); }
.review-badge { margin-left: auto; border: 1px solid var(--line); border-radius: 5px; padding: 2px 6px;
  font-family: var(--mono); font-size: 9.5px; white-space: nowrap; color: var(--fg3); }
.review-badge.ok { color: var(--ok); background: var(--ok-t); border-color: var(--ok-l); }
.review-badge.warn { color: var(--warn); background: var(--warn-t); border-color: var(--warn-l); }
.review-badge.risk { color: var(--risk); background: var(--risk-t); border-color: var(--risk-l); }
.lineage-row .review-badge { margin-left: 4px; }
.committee-tally { margin-left: auto; font-family: var(--mono); font-size: 9.5px; color: var(--fg3);
  border-left: 1px solid var(--line); padding-left: 8px; white-space: nowrap; }
.gate-actions { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
.gate-actions.task-run { align-items: center; }
.gate-actions.final-gate { padding-left: 8px; border-left: 1px solid var(--human-l); }
.gate-actions .mini-action { min-height: 22px; font-size: 10px; }
.mini-action.static.running, .mini-action.static.blocked { color: var(--warn); border-color: var(--warn-l); background: var(--warn-t); }
.gate-reason { flex-basis: 100%; max-width: 220px; color: var(--fg3); font-size: 10.5px; line-height: 1.35; text-align: right; }
.flow-actions { display: flex; gap: 7px; padding: 9px 11px; border-top: 1px solid var(--line); background: var(--surface-2); }
.flow-guide { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; padding: 8px;
  border: 1px solid var(--orange-line); border-radius: var(--r-md); background: var(--orange-t); }
.flow-guide span { display: inline-flex; align-items: center; gap: 5px; color: var(--orange-soft);
  font-size: 10px; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; }
.flow-guide span:not(:last-child)::after { content: "->"; color: var(--fg4); margin-left: 6px; }
.committee-card { border-top: 1px solid var(--line); background: var(--surface); padding: 10px 11px; }
.committee-head { display: flex; align-items: center; gap: 8px; color: var(--fg1); margin-bottom: 8px; }
.committee-head svg { color: var(--info); }
.committee-head .b { margin-left: auto; }
.committee-grid { display: grid; grid-template-columns: 82px 1fr; gap: 6px 10px; align-items: center;
  font-size: 11px; color: var(--fg2); }
.committee-grid > span { color: var(--fg3); font-family: var(--mono); font-size: 10px; }
.committee-grid b { color: var(--fg1); }
.committee-grid .b { margin-right: 4px; margin-bottom: 4px; }
.flow-lineage { border-top: 1px solid var(--line); padding: 8px 11px; display: grid; gap: 6px; }
.lineage-row { display: flex; gap: 9px; font-size: 11.5px; }
.lineage-row .pk { font-family: var(--mono); color: var(--fg3); width: 18px; flex: none; }
.lineage-row .pv { min-width: 0; color: var(--fg2); }
.ops-panel { display: grid; gap: 10px; }
.op-card { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2);
  overflow: hidden; }
.op-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 11px;
  border-bottom: 1px solid var(--line); color: var(--fg1); }
.op-head > span:first-child { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.op-head b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-meta { display: flex; gap: 7px; flex-wrap: wrap; padding: 9px 11px 0; font-family: var(--mono);
  font-size: 10.5px; color: var(--fg3); }
.op-meta span { display: inline-flex; align-items: center; gap: 5px; }
.op-meta b { color: var(--fg2); font-weight: 600; }
.op-actions { display: flex; gap: 6px; flex-wrap: wrap; padding: 9px 11px; }
.op-history { border-top: 1px solid var(--line); padding: 8px 11px; background: var(--surface);
  display: grid; gap: 4px; }
.op-history .pc-row.compact { padding: 2px 0; }
.op-history .pk { width: 70px; overflow: hidden; text-overflow: ellipsis; }
.sk-card-avatar { width: 34px; height: 34px; border-radius: 9px; }
.sk-flex { flex: 1; }
.sk-line-lg { width: 80%; }
.sk-line-md { width: 60%; }
.sk-line-sm { width: 40%; }
.sk-line-xs { width: 30%; }
.sk-line-body { width: 55%; }
.progress-0 { width: 0%; }
.progress-20 { width: 20%; }
.progress-70 { width: 70%; }
.progress-90 { width: 90%; }
.progress-100 { width: 100%; }

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
.scrim { display: none; }
@media (max-width: 1200px) {
  :root { --ctx-w: 320px; }
}
@media (max-width: 1040px) {
  .app { grid-template-columns: var(--rail-w) var(--rooms-w) 1fr 0; }
  .app.show-ctx { grid-template-columns: var(--rail-w) 0 1fr min(420px, 86vw); }
  .context { position: fixed; right: 0; top: 0; bottom: 0; width: min(420px,86vw); z-index: 60;
    box-shadow: -20px 0 50px -20px rgba(0,0,0,.7); }
  .app:not(.show-ctx) .context { transform: translateX(100%); }
}
@media (max-width: 760px) {
  .app { grid-template-columns: var(--rail-w) 1fr 0 0; }
  .rooms { position: fixed; left: var(--rail-w); top: 0; bottom: 0; width: 280px; z-index: 55; }
  .app:not(.show-rooms) .rooms { transform: translateX(-110%); }
  .app.show-ctx .scrim, .app.show-rooms .scrim { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 54; }
  .rv-top .rv-topic { display: none; }
}

/* ============================================================================
   BEST-PRACTICE POLISH — accessibility, legibility, affordances
   ============================================================================ */

/* 1 · Keyboard focus rings (none existed). Mouse users unaffected. */
:where(button, a, select, [contenteditable], .room, .ctx-tab, .ws, .iconbtn, .tb, .react):focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}
.c-input:focus-visible { outline: none; }           /* composer shows its own .focus ring */
:where(.send, .btn.primary):focus-visible { outline-offset: 3px; }

/* 2 · Avatar initial legibility on lighter identity colors (amber/green) */
.av:not(.human) { text-shadow: 0 1px 1.5px rgba(0,0,0,.3); }

/* 3 · Active room — soft tangerine tint (Kraken kw-nav-item--active) */
.room.active { position: relative; font-weight: 600; }

/* 4 · Consistent press feedback */
.btn:active { transform: translateY(1px); }
.iconbtn:active, .tb:active, .room:active, .ctx-tab:active { transform: translateY(1px); }
.ws:active { transform: scale(.94); }

/* 5 · Slightly stronger hover on primary actions */
.btn.primary:hover, .btn.human:hover { filter: brightness(1.06); }

/* 6 · Reduced-motion: calm the looping presence/typing/shimmer animations */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; }
}