/* R3D3 Web Base — role-tools-cleanup-pass11-2026-07-04 */
/* R3D3 Web Base — pass106 mobile live stop UI 2026-07-10 */
/* R3D3 Web Base — chat-media-temp-prepass-pass74-2026-06-28 */
/* R3D3 Web Base — flow-library-final-polish-pass42-2026-06-27 */
/* R3D3 Web Base — chat-copy-bottom-pass21-2026-06-25 */
:root {
  --bg: #f4f1ea;
  --panel: #fffaf0;
  --panel-2: #ece5d7;
  --canvas: #ede7dc;
  --ink: #1e1d1a;
  --muted: #6f695f;
  --line: #2c2a26;
  --soft-line: #bdb3a4;
  --accent: #355c7d;
  --accent-ink: #ffffff;
  --agent: #293241;
  --gate: #6a4c3b;
  --output: #465f4a;
  --checklist: #6f5f3f;
  --check-gold: #c89b2c;
  --check-gold-ink: #fff4c7;
  --task-splitter: #5b4d7d;
  --merge: #7a5534;
  --danger: #8c2f39;
  --ok: #4f8f64;
  --warning: #b77b22;
  --accent-2: var(--accent);
  --shadow: rgba(30, 29, 26, .14);
  --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color-scheme: light;
}

html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) {
  --bg: #11100e;
  --panel: #1a1815;
  --panel-2: #24211d;
  --canvas: #141310;
  --ink: #efe8dc;
  --muted: #a9a094;
  --line: #e5d7c1;
  --soft-line: #554d43;
  --accent: #b59b6a;
  --accent-ink: #11100e;
  --agent: #28313f;
  --gate: #4d3529;
  --output: #314533;
  --checklist: #4b442d;
  --check-gold: #e2b84e;
  --check-gold-ink: #fff4c7;
  --task-splitter: #44335f;
  --merge: #5a3f2a;
  --danger: #a54848;
  --ok: #8fcf9a;
  --warning: #e0a34c;
  --accent-2: var(--accent);
  --shadow: rgba(192, 151, 91, .18);
  --shadow-strong: rgba(206, 165, 101, .28);
  --shadow-ambient: rgba(0, 0, 0, .48);
  --surface-highlight: rgba(255, 232, 187, .075);
  --surface-raised: #1f1a13;
  --surface-raised-2: #251f16;
  color-scheme: dark;
}


html[data-theme="night"] {
  --bg: #0b1116;
  --panel: #111a21;
  --panel-2: #17232c;
  --canvas: #0a1015;
  --ink: #dbe6ed;
  --muted: #8498a6;
  --line: #60727f;
  --soft-line: #2a3943;
  --accent: #69c9ef;
  --accent-ink: #061116;
  --agent: #173242;
  --gate: #23323c;
  --output: #1b3a35;
  --checklist: #263642;
  --check-gold: #74c9e8;
  --check-gold-ink: #061116;
  --task-splitter: #24354a;
  --merge: #263943;
  --danger: #d76f78;
  --ok: #79c6a3;
  --warning: #d7aa63;
  --accent-2: #8bdcff;
  --shadow: rgba(0, 0, 0, .28);
  --shadow-strong: rgba(0, 0, 0, .40);
  --shadow-ambient: rgba(0, 0, 0, .62);
  --surface-highlight: rgba(175, 225, 246, .065);
  --surface-raised: #142029;
  --surface-raised-2: #182630;
  --panel-glow: color-mix(in srgb, var(--accent) 18%, transparent);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  overflow: hidden;
  text-rendering: optimizeLegibility;
}
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }

.app-shell {
  height: 100vh;
  display: grid;
  grid-template-columns: 310px minmax(420px, 1fr) 386px;
  grid-template-rows: 54px 1fr;
  grid-template-areas:
    "top top top"
    "left canvas right";
}

.topbar {
  grid-area: top;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 14px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 0 var(--shadow);
  z-index: 5;
}

.brand { display: flex; align-items: baseline; gap: 10px; letter-spacing: .08em; }
.brand-mark { font-weight: 850; font-size: 22px; }
.build-pill { font-size: 11px; text-transform: uppercase; color: var(--muted); }
.top-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

.panel {
  background: var(--panel);
  border-right: 1px solid var(--line);
  overflow: auto;
  min-width: 0;
}
.left-panel { grid-area: left; }
.right-panel { grid-area: right; border-right: 0; border-left: 1px solid var(--line); }
.panel-section { padding: 15px 16px; border-bottom: 1px solid var(--soft-line); }
.panel-section h2 {
  margin: 0 0 10px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--muted);
}

.ui-btn, .node-palette {
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--ink);
  padding: 8px 10px;
  min-height: 35px;
  box-shadow: 2px 2px 0 var(--shadow);
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
}
.ui-btn:hover, .node-palette:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--shadow); }
.ui-btn:active, .node-palette:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--shadow); }
.ui-btn.primary { background: var(--accent); color: var(--accent-ink); }
.ui-btn.full { width: 100%; margin-top: 8px; }
.inline-row { display: flex; gap: 8px; align-items: center; }
.inline-row > * { min-width: 0; }
select, input, textarea {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  padding: 9px;
  outline: none;
}
textarea { min-height: 128px; resize: vertical; line-height: 1.42; }
label { display: grid; gap: 6px; margin: 10px 0; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
label input, label textarea { color: var(--ink); text-transform: none; letter-spacing: normal; font-size: 14px; }

.node-palette-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}
.node-palette {
  display: inline-grid;
  width: 100%;
  margin: 0;
  place-items: center;
  text-align: center;
  background: var(--panel-2);
  min-width: 0;
  padding-inline: 5px;
  font-size: 12px;
  line-height: 1.15;
}
.node-palette-grid .node-palette:first-child:nth-last-child(4),
.node-palette-grid .node-palette:first-child:nth-last-child(4) ~ .node-palette {
  min-height: 42px;
}
.file-list { display: grid; gap: 6px; max-height: 260px; overflow: auto; }
.file-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 7px 8px;
  border: 1px solid var(--soft-line);
  background: var(--bg);
  font-size: 12px;
}
.file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-actions { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.file-mini { border: 1px solid var(--soft-line); background: transparent; color: var(--ink); padding: 2px 5px; line-height: 1.15; }
.file-mini.view { border-color: var(--accent); color: var(--accent); }
.file-html .file-name::before { content: '◈ '; color: var(--accent); }


.canvas-wrap {
  grid-area: canvas;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(var(--soft-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--soft-line) 1px, transparent 1px),
    var(--canvas);
  background-size: 42px 42px;
}
.canvas { position: absolute; inset: 0; transform-origin: 0 0; }
.wire-layer { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
.wire { stroke: var(--line); stroke-width: 2; fill: none; stroke-linecap: square; opacity: .8; }
.wire.active { stroke: var(--accent); stroke-width: 3; }
.canvas-hint {
  position: absolute;
  left: 14px;
  bottom: 14px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  color: var(--muted);
  font-size: 12px;
  z-index: 2;
}

.r3-node {
  position: absolute;
  width: 250px;
  min-height: 132px;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: 7px 7px 0 var(--shadow);
  z-index: 3;
  user-select: none;
  animation: nodeIn .18s ease-out;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.r3-node:hover { transform: translateY(-2px); box-shadow: 9px 9px 0 var(--shadow); }
.r3-node.selected { outline: 3px solid var(--accent); outline-offset: 2px; }
.r3-node.running { animation: nodePulse .9s ease-in-out infinite alternate; }
.node-head {
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 9px;
  border-bottom: 1px solid var(--line);
  background: var(--agent);
  color: #fff;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-size: 12px;
}
.r3-node[data-type="TrueFalse"] .node-head { background: var(--gate); }
.r3-node[data-type="Output"] .node-head { background: var(--output); }
.r3-node[data-type="Checklist"] .node-head { background: var(--checklist); }
.r3-node[data-type="TaskSplitter"] .node-head { background: var(--task-splitter); }
.r3-node[data-type="Merge"] .node-head { background: var(--merge); }
.node-body { padding: 11px 12px 8px; font-size: 12px; line-height: 1.42; color: var(--muted); max-height: 86px; overflow: hidden; }
.node-tools { display: grid; gap: 6px; padding: 0 12px 12px; }
.tool-bubble {
  position: relative;
  max-width: 92px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--ink);
  padding: 4px 6px;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tool-bubble::after {
  content: attr(data-tip);
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  width: max-content;
  max-width: 260px;
  white-space: normal;
  padding: 8px 9px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  box-shadow: 4px 4px 0 var(--shadow);
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity .14s ease, transform .14s ease;
  z-index: 50;
}
.tool-bubble:hover { overflow: visible; max-width: none; z-index: 40; }
.tool-bubble:hover::after { opacity: 1; transform: translateY(0); }

.node-options { display: grid; gap: 10px; }
.hidden { display: none !important; }
.empty-state, .form-message { color: var(--muted); font-size: 13px; line-height: 1.45; }
.option-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tool-checks { display: grid; grid-template-columns: 1fr; gap: 5px 8px; font-size: 12px; }
.tool-checks label { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--ink); text-transform: none; letter-spacing: normal; }
.tool-checks input { width: auto; }
.run-log {
  display: grid;
  gap: 8px;
  max-height: 420px;
  overflow: auto;
  font-size: 12px;
}
.log-entry { border: 1px solid var(--soft-line); padding: 8px; background: var(--bg); }
.log-entry strong { display: block; margin-bottom: 4px; }
.log-entry pre { white-space: pre-wrap; margin: 0; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.overlay {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--bg) 72%, #000 28%);
  z-index: 100;
}
.overlay.hidden { display: none; }
.auth-card, .setup-dialog {
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  box-shadow: 10px 10px 0 var(--shadow);
}
.auth-card { width: min(440px, calc(100vw - 28px)); padding: 24px; }
.auth-card h1, .setup-dialog h2 { margin: 0 0 8px; }
.auth-card p { color: var(--muted); margin: 0 0 18px; }
.setup-dialog { width: min(560px, calc(100vw - 28px)); padding: 0; }
.setup-dialog::backdrop { background: rgba(0, 0, 0, .48); }
.setup-dialog form { padding: 18px; }
.setup-dialog menu { display: flex; justify-content: flex-end; gap: 8px; padding: 0; margin: 16px 0 0; }
#fileContent { min-height: 360px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
#fileContent.is-large-file-page { min-height: 440px; background: var(--bg); white-space: pre; tab-size: 2; }
.file-page-controls, .r3-large-file-pager { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; margin-top: 10px; padding: 9px 10px; border: 1px solid var(--soft-line); background: var(--panel-2); }
.file-page-controls[hidden] { display: none !important; }
.file-page-controls span, .r3-large-file-pager span { min-width: 0; color: var(--muted); font: 700 11px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r3-large-file-pager { position: sticky; top: 0; z-index: 4; margin: 0 0 8px; }
.r3-large-file-pager .ui-btn:disabled, .file-page-controls .ui-btn:disabled { opacity: .45; cursor: default; }

@keyframes nodeIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes nodePulse { from { box-shadow: 7px 7px 0 var(--shadow); } to { box-shadow: 11px 11px 0 var(--shadow); } }

@media (max-width: 980px) {
  body { overflow: auto; }
  .app-shell { min-height: 100vh; height: auto; grid-template-columns: 1fr; grid-template-rows: auto auto minmax(520px, 1fr) auto; grid-template-areas: "top" "left" "canvas" "right"; }
  .topbar { position: sticky; top: 0; }
  .panel { max-height: none; border-right: 0; border-bottom: 1px solid var(--line); }
  .right-panel { border-left: 0; }
  .canvas-wrap { min-height: 560px; }
  .top-actions { gap: 6px; }
  .ui-btn { padding: 7px 8px; }
}

/* Increment: pan/zoom, context menus, richer tool/output states */
.canvas-wrap { cursor: grab; touch-action: none; }
.canvas-wrap.panning { cursor: grabbing; }
.canvas-wrap::after {
  content: var(--zoom, "100%");
  position: absolute;
  right: 14px;
  bottom: 14px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 90%, transparent);
  color: var(--muted);
  font-size: 11px;
  padding: 5px 7px;
  z-index: 4;
  pointer-events: none;
}
.canvas, .wire-layer {
  inset: auto;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  will-change: transform;
}
.canvas { cursor: default; }
.wire-layer { overflow: visible; }
.canvas-hint { right: 72px; max-width: min(560px, calc(100% - 120px)); }

.r3-node { cursor: grab; }
.r3-node:active { cursor: grabbing; }
.r3-node.state-done { border-color: var(--output); }
.r3-node.state-error { border-color: var(--danger); }
.r3-node.running {
  overflow: visible;
  border-color: var(--accent);
  box-shadow: 9px 9px 0 var(--shadow), inset 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent);
}
.r3-node.running::before {
  content: "";
  position: absolute;
  inset: -5px;
  border: 1px solid var(--accent);
  opacity: .65;
  animation: workingSweep 1.1s linear infinite;
  pointer-events: none;
}
.node-status {
  display: none;
  position: absolute;
  top: 41px;
  right: 10px;
  gap: 4px;
  z-index: 2;
}
.r3-node.running .node-status { display: flex; }
.node-status span {
  width: 5px;
  height: 5px;
  background: var(--accent);
  border: 1px solid var(--line);
  animation: dotWork .75s ease-in-out infinite alternate;
}
.node-status span:nth-child(2) { animation-delay: .12s; }
.node-status span:nth-child(3) { animation-delay: .24s; }

.tool-bubble { max-width: 128px; overflow: visible; cursor: help; }
.tool-bubble::after { display: none; }
.bubble-label {
  display: block;
  max-width: 118px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tool-bubble:hover .bubble-label { max-width: 220px; }
.tool-tip {
  position: absolute;
  left: -1px;
  bottom: calc(100% + 8px);
  width: 310px;
  max-width: 62vw;
  display: grid;
  gap: 5px;
  padding: 9px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  box-shadow: 5px 5px 0 var(--shadow);
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity .14s ease, transform .14s ease;
  z-index: 80;
}
.tool-tip b { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--accent); }
.tool-tip small { color: var(--ink); line-height: 1.35; }
.tool-tip pre {
  margin: 0;
  max-height: 180px;
  overflow: auto;
  white-space: pre-wrap;
  color: var(--muted);
  font: 11px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.tool-bubble:hover .tool-tip { opacity: 1; transform: translateY(0); }
.tool-working .bubble-label, .tool-error .bubble-label, .tool-invalid_json .bubble-label, .tool-protocol .bubble-label { color: var(--danger); }

.r3-context-menu {
  position: fixed;
  min-width: 192px;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: 7px 7px 0 var(--shadow);
  z-index: 120;
  padding: 5px;
}
.r3-context-menu button {
  width: 100%;
  border: 0;
  border-left: 3px solid transparent;
  background: transparent;
  color: var(--ink);
  text-align: left;
  padding: 8px 9px;
}
.r3-context-menu button:hover { background: var(--panel-2); border-left-color: var(--accent); }
.r3-context-menu button.danger { color: var(--danger); }
.ctx-divider { height: 1px; background: var(--soft-line); margin: 5px 0; }
.ui-btn.danger { border-color: var(--danger); color: var(--danger); }
.ui-btn.mini { min-height: 28px; padding: 4px 7px; font-size: 11px; }

.output-card {
  border: 1px solid var(--line);
  background: var(--bg);
  box-shadow: 3px 3px 0 var(--shadow);
}
.output-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px;
  border-bottom: 1px solid var(--soft-line);
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.output-card pre {
  margin: 0;
  padding: 10px;
  max-height: 260px;
  overflow: auto;
  white-space: pre-wrap;
  color: var(--ink);
  font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
}

@keyframes workingSweep {
  0% { clip-path: inset(0 96% 96% 0); }
  25% { clip-path: inset(0 0 96% 0); }
  50% { clip-path: inset(0 0 0 96%); }
  75% { clip-path: inset(96% 0 0 0); }
  100% { clip-path: inset(0 96% 96% 0); }
}
@keyframes dotWork { from { transform: translateY(0); opacity: .45; } to { transform: translateY(-4px); opacity: 1; } }

/* Flow increment: global prompt, file delete, and clearer flow states */
.global-prompt-section textarea {
  min-height: 118px;
  max-height: 220px;
  font-size: 13px;
  line-height: 1.42;
}
.field-help {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.global-prompt-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}
.prompt-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
}
.prompt-action-icon {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  border: 1px solid var(--soft-line);
  background: var(--bg);
  color: var(--accent);
  font-weight: 900;
  line-height: 1;
}
.file-mini.danger {
  border-color: var(--danger);
  color: var(--danger);
}
.file-mini.danger:hover {
  background: color-mix(in srgb, var(--danger) 12%, transparent);
}
.r3-node.state-done .node-head::after {
  content: "DONE";
  margin-left: auto;
  font-size: 10px;
  opacity: .8;
}
.r3-node.state-error .node-head::after {
  content: "ERR";
  margin-left: auto;
  font-size: 10px;
  color: #fff;
  background: var(--danger);
  padding: 1px 4px;
}
.tool-bubble.tool-done {
  border-color: var(--output);
}
.tool-bubble.tool-working {
  animation: bubbleWorking .8s ease-in-out infinite alternate;
}
@keyframes bubbleWorking {
  from { transform: translateY(0); }
  to { transform: translateY(-2px); }
}
.output-meta {
  padding: 8px 10px;
  border-bottom: 1px solid var(--soft-line);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}
.output-meta b {
  color: var(--ink);
}


/* Modal/tool visibility increment */
.node-head-tools {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
}
.node-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.node-kind {
  min-width: 28px;
  text-align: right;
}
.node-head-btn {
  width: 22px;
  height: 22px;
  border: 1px solid rgba(255,255,255,.55);
  background: rgba(255,255,255,.08);
  color: #fff;
  padding: 0;
  line-height: 1;
  box-shadow: none;
}
.node-head-btn:hover,
.node-head-btn:focus-visible {
  background: rgba(255,255,255,.18);
  outline: 1px solid rgba(255,255,255,.7);
}
.tool-bubble {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  width: 100%;
  max-width: 100%;
  min-height: 32px;
  text-align: left;
  white-space: normal;
  overflow: visible;
  padding: 5px 7px;
  cursor: pointer;
}
.bubble-icon {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 1px solid var(--soft-line);
  background: var(--bg);
  font-size: 12px;
}
.bubble-copy {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.bubble-copy b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--accent);
}
.bubble-copy em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: normal;
  color: var(--ink);
}
.tool-bubble:hover .bubble-copy em,
.tool-bubble:focus-visible .bubble-copy em {
  white-space: normal;
}
.tool-tip {
  width: 380px;
  max-width: min(72vw, 420px);
  bottom: calc(100% + 10px);
}
.tool-tip strong {
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.tool-bubble:hover .tool-tip,
.tool-bubble:focus-visible .tool-tip {
  opacity: 1;
  transform: translateY(0);
}
.output-actions {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.r3-viewer-modal {
  width: min(940px, calc(100vw - 34px));
  height: min(86dvh, 860px);
  max-height: min(86dvh, 860px);
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  box-shadow: 10px 10px 0 var(--shadow);
}
.r3-viewer-modal::backdrop {
  background: rgba(0,0,0,.52);
  backdrop-filter: blur(2px);
}
.viewer-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  overflow: hidden;
}
.viewer-head,
.viewer-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-2);
}
.viewer-foot {
  border-top: 1px solid var(--line);
  border-bottom: 0;
  justify-content: flex-end;
}
.viewer-head strong {
  display: block;
  font-size: 16px;
  line-height: 1.2;
}
.viewer-head span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .14em;
}
.viewer-body {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 14px;
  display: grid;
  align-content: start;
  gap: 14px;
}
.viewer-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.viewer-summary-grid > div,
.viewer-section,
.tool-card {
  border: 1px solid var(--soft-line);
  background: var(--bg);
  box-shadow: 3px 3px 0 var(--shadow);
}
.viewer-summary-grid > div {
  padding: 10px;
  display: grid;
  gap: 3px;
}
.viewer-summary-grid b,
.viewer-section h3,
.tool-card header b {
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 11px;
}
.viewer-summary-grid span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.viewer-section h3 {
  margin: 0;
  padding: 9px 10px;
  border-bottom: 1px solid var(--soft-line);
  background: color-mix(in srgb, var(--panel-2) 68%, transparent);
}
.viewer-section pre,
.tool-card pre {
  margin: 0;
  padding: 12px;
  max-height: 360px;
  overflow: auto;
  white-space: pre-wrap;
  color: var(--ink);
  font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.viewer-dl {
  margin: 0;
  padding: 10px;
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 8px 12px;
}
.viewer-dl dt {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 11px;
}
.viewer-dl dd { margin: 0; }
.tool-timeline {
  display: grid;
  gap: 10px;
  padding: 10px;
}
.tool-card {
  padding: 0;
}
.tool-card.selected {
  outline: 3px solid var(--accent);
  outline-offset: 1px;
}
.tool-card header {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 8px;
  align-items: center;
  padding: 9px 10px;
  border-bottom: 1px solid var(--soft-line);
}
.tool-card-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  background: var(--panel-2);
}
.tool-card header small {
  display: block;
  margin-top: 2px;
  color: var(--ink);
  line-height: 1.35;
}
.tool-card p {
  margin: 0;
  padding: 9px 10px;
  border-bottom: 1px solid var(--soft-line);
  color: var(--muted);
}
@media (max-width: 980px) {
  .viewer-summary-grid { grid-template-columns: 1fr; }
  .r3-viewer-modal { width: calc(100vw - 18px); height: calc(100dvh - 18px); max-height: calc(100dvh - 18px); }
}
.r3-node:hover,
.r3-node.selected,
.r3-node:focus-within {
  z-index: 20;
}
.node-tools .tool-bubble:first-child .tool-tip {
  bottom: auto;
  top: calc(100% + 10px);
}


/* Checklist/polish increment */
.canvas-wrap { isolation: isolate; }
.wire-layer { z-index: 1 !important; }
.canvas { z-index: 2; position: absolute; pointer-events: auto; }
.r3-node { z-index: 3; width: 270px; min-height: 112px; overflow: visible; background: color-mix(in srgb, var(--panel) 96%, #000 4%); }
.r3-node:hover,
.r3-node.selected,
.r3-node:focus-within { z-index: 30; }
.node-head { height: 30px; padding: 0 8px; font-size: 11px; }
.node-head-btn { width: 20px; height: 20px; font-size: 11px; }
.node-kind { min-width: 34px; font-size: 10px; opacity: .92; }
.node-body {
  margin: 9px 10px 8px;
  padding: 8px 9px;
  max-height: none;
  min-height: 48px;
  overflow: hidden;
  border: 1px solid var(--soft-line);
  background: color-mix(in srgb, var(--bg) 88%, var(--panel) 12%);
}
.node-body-label {
  margin-bottom: 4px;
  color: var(--accent);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.node-body-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.38;
  overflow-wrap: anywhere;
}
.r3-node[data-type="Checklist"] .node-body-text { -webkit-line-clamp: 5; }
.node-tools {
  display: grid;
  gap: 6px;
  padding: 0 10px 10px;
  max-height: 190px;
  overflow: visible;
}
.tool-bubble {
  min-height: 34px;
  background: color-mix(in srgb, var(--panel-2) 86%, var(--accent) 4%);
  box-shadow: 2px 2px 0 var(--shadow);
}
.tool-bubble .bubble-copy em { font-size: 10.5px; }
.tool-tip {
  left: 0;
  bottom: calc(100% + 12px);
  width: 420px;
  max-width: min(74vw, 460px);
  max-height: 310px;
  overflow: auto;
  z-index: 120;
}
.tool-tip pre { max-height: 190px; }
.file-item { position: relative; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease; }
.file-item.file-flash {
  border-color: var(--accent);
  transform: translateX(2px);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent), 4px 4px 0 var(--shadow);
}
.file-item.file-read { --accent: #8bb8ff; }
.file-item.file-edit { --accent: #f2c66d; }
.file-item.file-write { --accent: #6ee7a8; }
.file-item.file-search { --accent: #b99cff; }
.file-item.file-flash::before {
  content: "";
  position: absolute;
  left: -1px;
  top: -1px;
  bottom: -1px;
  width: 4px;
  background: var(--accent);
}
.option-card {
  border: 1px solid var(--soft-line);
  background: var(--bg);
  padding: 10px;
  display: grid;
  gap: 8px;
}
.option-card h3 {
  margin: 0 0 2px;
  color: var(--accent);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.option-card label,
.compact-check {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--ink);
  font-size: 12px;
  letter-spacing: normal;
  text-transform: none;
}
.option-card input[type="checkbox"] { width: auto; }
.flow-target-list {
  border: 1px solid var(--soft-line);
  background: var(--panel);
  padding: 8px;
  display: grid;
  gap: 6px;
  font-size: 12px;
}
.flow-target-list b { color: var(--ink); }
.flow-target-list ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 5px;
  max-height: 150px;
  overflow: auto;
}
.flow-target-list li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid var(--soft-line);
  padding-top: 5px;
}
.flow-target-list span { color: var(--muted); }
.task-splitter-card h3 { color: color-mix(in srgb, var(--task-splitter) 72%, var(--accent)); }
.merge-card h3 { color: color-mix(in srgb, var(--merge) 72%, var(--accent)); }

.checklist-editor .inline-row { gap: 6px; }
.checklist-add input { min-width: 0; }
.checklist-list { display: grid; gap: 6px; max-height: 220px; overflow: auto; }
.checklist-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--soft-line);
  padding: 6px;
  background: var(--panel);
}
.checklist-row label {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 7px;
}
.checklist-row span {
  overflow-wrap: anywhere;
  line-height: 1.3;
}
.checklist-row input:checked + span { color: var(--muted); text-decoration: line-through; }
.tool-checks .checklist-tool { color: var(--accent); }
@keyframes fileFlashPulse {
  from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent), 4px 4px 0 var(--shadow); }
  to { box-shadow: 0 0 0 6px transparent, 4px 4px 0 var(--shadow); }
}
.file-item.file-flash { animation: fileFlashPulse 1s ease-in-out 2; }


/* Live tool-step polish */
.tool-bubble.tool-thinking,
.tool-bubble.tool-working {
  position: relative;
}
.tool-bubble.tool-thinking::before,
.tool-bubble.tool-working::before {
  content: '';
  position: absolute;
  inset: -2px;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  opacity: .72;
  animation: r3d3LivePulse 1.05s ease-in-out infinite;
  pointer-events: none;
}
@keyframes r3d3LivePulse {
  0%, 100% { transform: scale(1); opacity: .45; }
  50% { transform: scale(1.035); opacity: .95; }
}


/* Checklist node polish */
.r3-node[data-type="Checklist"] .node-body {
  background: color-mix(in srgb, var(--checklist) 10%, var(--bg));
}
.r3-node[data-type="Checklist"] .node-body-label {
  color: var(--checklist);
}
.checklist-editor {
  gap: 10px;
  background: color-mix(in srgb, var(--bg) 90%, var(--checklist) 10%);
}
.checklist-editor-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.checklist-editor-head h3 { margin-bottom: 2px; }
.checklist-editor-head p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  text-transform: none;
  letter-spacing: normal;
}
.checklist-count {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  min-width: 48px;
  padding: 5px 7px;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 2px 2px 0 var(--shadow);
}
.checklist-progress {
  height: 9px;
  border: 1px solid var(--line);
  background: var(--panel);
  overflow: hidden;
}
.checklist-progress span {
  display: block;
  height: 100%;
  background: var(--checklist);
  transition: width .18s ease;
}
.checklist-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.checklist-stats span {
  border: 1px solid var(--soft-line);
  background: var(--panel);
  padding: 5px 6px;
  color: var(--muted);
  font-size: 11px;
  text-align: center;
}
.checklist-list {
  display: grid;
  gap: 7px;
  max-height: 280px;
  overflow: auto;
  padding-right: 2px;
}
.checklist-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 8px;
  border: 1px solid var(--soft-line);
  padding: 8px;
  background: var(--panel);
  box-shadow: 2px 2px 0 var(--shadow);
}
.checklist-row.is-done {
  background: color-mix(in srgb, var(--panel) 80%, var(--checklist) 12%);
}
.checklist-item-label {
  min-width: 0;
  display: grid !important;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: start !important;
  gap: 8px !important;
  margin: 0 !important;
}
.checklist-item-label input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.checklist-box {
  width: 18px;
  height: 18px;
  border: 1px solid var(--line);
  background: var(--bg);
  box-shadow: 1px 1px 0 var(--shadow);
  position: relative;
}
.checklist-item-label input:checked + .checklist-box {
  border-color: var(--check-gold);
  background: color-mix(in srgb, var(--check-gold) 16%, var(--bg));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--check-gold) 35%, transparent), 1px 1px 0 var(--shadow);
}
.checklist-item-label input:checked + .checklist-box::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 7px;
  height: 12px;
  border: solid var(--check-gold);
  border-width: 0 2px 2px 0;
  filter: drop-shadow(0 0 1px color-mix(in srgb, var(--check-gold-ink) 70%, transparent));
  transform: rotate(45deg);
}
.checklist-copy { min-width: 0; display: grid; gap: 3px; }
.checklist-copy b {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.checklist-copy small {
  color: var(--muted);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.checklist-row.is-done .checklist-copy b {
  color: var(--muted);
  text-decoration: line-through;
}
.checklist-empty {
  border: 1px dashed var(--soft-line);
  background: color-mix(in srgb, var(--panel) 70%, transparent);
  padding: 12px;
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}
.checklist-empty b { color: var(--ink); }
.checklist-add input { min-width: 0; }
.tool-checks .checklist-tool { color: var(--accent); }


/* Stop/scroll/focus polish */
.r3-node {
  display: flex;
  flex-direction: column;
  max-height: min(76vh, 540px);
  overflow: hidden !important;
}
.node-head { flex: 0 0 auto; }
.node-status { flex: 0 0 auto; }
.node-body {
  flex: 0 0 auto;
  max-height: 124px;
  overflow: auto;
  scrollbar-gutter: stable;
}
.node-tools {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 280px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
  padding-right: 8px;
}
.r3-node[data-type="Output"] .node-tools,
.r3-node[data-type="Checklist"] .node-tools {
  max-height: 210px;
}
.wire-layer {
  z-index: 0 !important;
  pointer-events: none !important;
}
.canvas {
  z-index: 2 !important;
}
.r3-node {
  z-index: 5 !important;
}
.r3-node:hover,
.r3-node.selected {
  z-index: 30 !important;
}
.r3-node:focus-within:not(.selected):not(:hover) {
  z-index: 5 !important;
}
.tool-bubble:focus:not(:focus-visible) {
  outline: none;
}
.tool-bubble:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: -2px;
}
.tool-bubble:focus-visible .bubble-copy em {
  white-space: nowrap;
}
.tool-bubble:focus-visible .tool-tip {
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
}
.tool-bubble:hover .tool-tip {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.tool-bubble.tool-thinking::before,
.tool-bubble.tool-working::before {
  content: none;
}
.tool-bubble.is-pending.tool-thinking::before,
.tool-bubble.is-pending.tool-working::before {
  content: '';
  position: absolute;
  inset: -2px;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  opacity: .72;
  animation: r3d3LivePulse 1.05s ease-in-out infinite;
  pointer-events: none;
}
.tool-bubble.tool-stopped .bubble-copy b,
.tool-bubble.tool-stopped .bubble-icon {
  color: var(--danger);
}
.ui-btn[disabled] {
  opacity: .55;
  cursor: not-allowed;
  transform: none !important;
}
.option-help {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
  text-transform: none;
  letter-spacing: normal;
}

/* Live timeout/strategy polish */
@media (max-width: 1180px) {
  .node-palette-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .node-palette-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.tool-bubble.tool-provider_timeout .bubble-copy b,
.tool-bubble.tool-provider_timeout .bubble-icon {
  color: var(--warning);
}
.tool-bubble.tool-provider_timeout {
  border-color: color-mix(in srgb, var(--warning) 62%, var(--line));
}


/* Checklist node compact renderer */
.node-body-content { min-width: 0; }
.r3-node[data-type="Checklist"] .node-body {
  max-height: 168px;
  padding: 8px;
  background: color-mix(in srgb, var(--bg) 86%, var(--checklist) 14%);
}
.r3-node[data-type="Checklist"] .node-body-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 7px;
  color: var(--line);
}
.checklist-mini {
  display: grid;
  gap: 7px;
  min-width: 0;
}
.checklist-mini-summary {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 6px;
  align-items: center;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.checklist-mini-summary b {
  color: var(--ink);
  font-size: 11px;
}
.checklist-mini-summary span:nth-child(2) { text-align: center; }
.checklist-mini-progress {
  height: 6px;
  border: 1px solid var(--line);
  background: var(--panel);
  overflow: hidden;
}
.checklist-mini-progress span {
  display: block;
  height: 100%;
  background: var(--checklist);
}
.checklist-mini-list {
  display: grid;
  gap: 4px;
}
.checklist-mini-item {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 6px;
  align-items: start;
  min-width: 0;
  padding: 4px 5px;
  border: 1px solid color-mix(in srgb, var(--soft-line) 72%, transparent);
  background: color-mix(in srgb, var(--panel) 78%, transparent);
}
.checklist-mini-box {
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--checklist);
  font-size: 10px;
  line-height: 1;
  font-weight: 900;
  box-shadow: 1px 1px 0 var(--shadow);
}
.checklist-mini-item.is-done .checklist-mini-box {
  border-color: var(--check-gold);
  background: color-mix(in srgb, var(--check-gold) 16%, var(--bg));
  color: var(--check-gold);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--check-gold) 35%, transparent), 1px 1px 0 var(--shadow);
}
.checklist-mini-text {
  min-width: 0;
  color: var(--ink);
  font-size: 11px;
  line-height: 1.25;
  overflow-wrap: anywhere;
  word-break: normal;
}
.checklist-mini-item.is-done .checklist-mini-text {
  color: var(--muted);
  text-decoration: line-through;
}
.checklist-mini-empty {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  border: 1px dashed var(--soft-line);
  padding: 8px;
  background: color-mix(in srgb, var(--panel) 76%, transparent);
}


/* Working/tool-guard polish */
.r3-node.running {
  border-color: var(--accent) !important;
  animation: nodeWorkingPulse 1.05s ease-in-out infinite !important;
  box-shadow:
    9px 9px 0 var(--shadow),
    0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent),
    0 0 24px color-mix(in srgb, var(--accent) 38%, transparent) !important;
}
.r3-node.running::before {
  inset: -7px !important;
  border: 2px solid var(--accent) !important;
  opacity: .85 !important;
  animation: workingSweep 1.05s linear infinite, workingHalo 1.05s ease-in-out infinite !important;
}
.r3-node.running::after {
  content: "WORKING";
  position: absolute;
  right: 8px;
  top: -22px;
  padding: 3px 7px;
  border: 1px solid var(--accent);
  background: var(--panel);
  color: var(--accent);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  pointer-events: none;
  box-shadow: 3px 3px 0 var(--shadow);
}
.r3-node.running .node-head {
  background-image: linear-gradient(90deg, var(--agent), color-mix(in srgb, var(--accent) 45%, var(--agent)), var(--agent));
  background-size: 220% 100%;
  animation: nodeHeadWorking 1.2s linear infinite;
}
.r3-node.running .node-body {
  border-color: color-mix(in srgb, var(--accent) 62%, var(--soft-line));
  background: color-mix(in srgb, var(--bg) 76%, var(--accent) 8%);
}
.tool-bubble.tool-error,
.tool-bubble.tool-protocol,
.tool-bubble.tool-missing {
  border-color: color-mix(in srgb, var(--danger) 70%, var(--line));
  background: color-mix(in srgb, var(--panel-2) 78%, var(--danger) 9%);
}

.tool-bubble.tool-r3d3_validator {
  border-color: color-mix(in srgb, var(--accent) 72%, var(--line));
  background: color-mix(in srgb, var(--panel-2) 82%, var(--accent) 10%);
}
.tool-bubble.tool-r3d3_validator .bubble-icon {
  color: var(--accent);
}
@keyframes nodeWorkingPulse {
  0%, 100% { filter: brightness(1); transform: translateY(0); }
  50% { filter: brightness(1.12); transform: translateY(-1px); }
}
@keyframes workingHalo {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 42%, transparent); }
  50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent) 10%, transparent); }
}
@keyframes nodeHeadWorking {
  from { background-position: 0% 0; }
  to { background-position: 220% 0; }
}


/* Timer/sound increment */
.node-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 7px;
}
.node-timer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 68px;
  max-width: 84px;
  height: 18px;
  padding: 0 5px;
  border: 1px solid rgba(255,255,255,.38);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.86);
  font: 800 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .04em;
  white-space: nowrap;
}
.r3-node.running .node-timer {
  border-color: var(--accent);
  color: #fff;
  background: color-mix(in srgb, var(--accent) 22%, rgba(0,0,0,.22));
  animation: timerPulse .85s ease-in-out infinite alternate;
}
.r3-node.state-done .node-timer {
  border-color: color-mix(in srgb, var(--output) 70%, rgba(255,255,255,.38));
}
.r3-node.state-error .node-timer {
  border-color: color-mix(in srgb, var(--danger) 72%, rgba(255,255,255,.38));
  color: #fff;
}
@keyframes timerPulse {
  from { transform: translateY(0); filter: brightness(1); }
  to { transform: translateY(-1px); filter: brightness(1.22); }
}
@media (max-width: 760px) {
  .node-timer { min-width: 56px; font-size: 8px; }
}
.r3-node.state-done .node-head::after,
.r3-node.state-error .node-head::after {
  content: none !important;
}


.viewer-collapsible,
.live-tool-detail {
  border: 1px solid var(--soft-line);
  background: var(--bg);
  box-shadow: 3px 3px 0 var(--shadow);
}
.viewer-collapsible > summary,
.live-tool-detail > summary {
  cursor: pointer;
  list-style: none;
  padding: 10px 12px;
  border-bottom: 1px solid transparent;
  display: flex;
  align-items: center;
  gap: 10px;
  user-select: none;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 11px;
  font-weight: 800;
}
.viewer-collapsible > summary::-webkit-details-marker,
.live-tool-detail > summary::-webkit-details-marker { display: none; }
.viewer-collapsible > summary::before,
.live-tool-detail > summary::before {
  content: '+';
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--soft-line);
  background: var(--panel-2);
  color: var(--ink);
}
.viewer-collapsible[open] > summary::before,
.live-tool-detail[open] > summary::before { content: '−'; }
.viewer-collapsible[open] > summary,
.live-tool-detail[open] > summary { border-bottom-color: var(--soft-line); }
.viewer-collapsible pre,
.live-tool-detail pre,
.live-current pre {
  margin: 0;
  padding: 12px;
  max-height: 360px;
  overflow: auto;
  white-space: pre-wrap;
  color: var(--ink);
  font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.live-summary span { font-variant-numeric: tabular-nums; }
.live-current.is-pending,
.live-tool-detail.is-pending {
  border-color: color-mix(in srgb, var(--accent) 70%, var(--soft-line));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 34%, transparent), 5px 5px 0 var(--shadow);
}
.live-current-body {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 10px;
  padding: 12px;
  align-items: center;
}
.live-current-body b,
.live-tool-detail summary b {
  display: block;
  color: var(--ink);
  letter-spacing: normal;
  text-transform: none;
  font-size: 13px;
}
.live-current-body p,
.live-tool-detail summary small {
  display: block;
  margin: 2px 0 0;
  color: var(--muted);
  text-transform: none;
  letter-spacing: normal;
  font-weight: 600;
  line-height: 1.35;
}
.live-tool-stream {
  display: grid;
  gap: 10px;
  padding: 10px;
}
.live-tool-detail p {
  margin: 0;
  padding: 10px 12px;
  border-bottom: 1px solid var(--soft-line);
  color: var(--muted);
}
.node-head-btn[data-node-action="live"] {
  color: var(--accent);
}
.state-running .node-head-btn[data-node-action="live"] {
  animation: liveButtonPulse 1.1s ease-in-out infinite;
}
@keyframes liveButtonPulse {
  0%, 100% { transform: scale(1); box-shadow: inset 0 0 0 1px transparent; }
  50% { transform: scale(1.08); box-shadow: inset 0 0 0 1px var(--accent); }
}



/* Agent role manager */
.role-dialog {
  width: min(980px, calc(100vw - 28px));
}
.role-dialog form {
  max-height: min(780px, calc(100vh - 40px));
  overflow: hidden;
}
.role-manager-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}
.role-manager-head p {
  margin: 6px 0 0;
  color: var(--muted);
  line-height: 1.45;
}
.role-limit-badge {
  border: 1px solid var(--border);
  background: var(--panel-soft);
  padding: 6px 10px;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.role-manager-grid {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  gap: 16px;
  min-height: 520px;
}
.role-list-wrap {
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel) 80%, transparent);
  padding: 10px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.role-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: auto;
  min-height: 0;
  max-height: 470px;
  padding-right: 3px;
}
.role-list-item {
  text-align: left;
  border: 1px solid var(--border);
  background: var(--panel-soft);
  color: var(--text);
  padding: 10px;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.role-list-item:hover,
.role-list-item.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--panel-soft));
  transform: translateX(2px);
}
.role-list-item strong,
.role-list-item span {
  display: block;
}
.role-list-item strong {
  font-size: 13px;
  margin-bottom: 4px;
}
.role-list-item span {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.35;
}
.role-editor {
  border: 1px solid var(--border);
  background: var(--panel-soft);
  padding: 12px;
  display: grid;
  gap: 10px;
  min-width: 0;
}
.role-editor textarea {
  min-height: 250px;
  max-height: 340px;
  resize: vertical;
  font-family: var(--mono);
  line-height: 1.45;
}
.role-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.role-picker-card {
  display: grid;
  gap: 8px;
}
.role-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.role-picker-head h3 {
  margin: 0;
}
.role-preview {
  margin: 0;
  color: var(--muted);
  line-height: 1.4;
  font-size: 12px;
}

@media (max-width: 760px) {
  .role-manager-grid {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .role-list {
    max-height: 210px;
  }
}

/* Roles manager functional polish */
#rolesBtn { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
#rolesBtn::before { content: "✦ "; color: var(--accent); }
.role-dialog[open] { opacity: 1; }
.role-editor input,
.role-editor textarea { width: 100%; }

/* Role AI builder + delete polish */
.role-ai-panel {
  display: grid;
  gap: 9px;
  padding: 11px;
  border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--border));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 9%, transparent), transparent 56%),
    var(--panel);
  box-shadow: 3px 3px 0 var(--shadow);
}
.role-ai-title {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  border-bottom: 1px solid var(--soft-line);
  padding-bottom: 7px;
}
.role-ai-title strong {
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
}
.role-ai-title span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  text-align: right;
}
.role-ai-panel textarea {
  min-height: 68px;
  max-height: 120px;
  font-family: var(--font);
}
.role-ai-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.role-list-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px;
  gap: 6px;
  align-items: stretch;
}
.role-list-row.active .role-list-item {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--panel-soft));
  transform: translateX(2px);
}
.role-list-row .role-list-item {
  min-width: 0;
  width: 100%;
}
.role-inline-delete {
  border: 1px solid var(--border);
  background: var(--panel-soft);
  color: var(--muted);
  cursor: pointer;
  font-weight: 900;
  font-size: 18px;
  line-height: 1;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.role-inline-delete:hover:not(:disabled) {
  color: var(--danger);
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 10%, var(--panel-soft));
}
.role-inline-delete:disabled {
  opacity: .45;
  cursor: not-allowed;
}
@media (max-width: 760px) {
  .role-ai-actions { grid-template-columns: 1fr; }
  .role-ai-title { display: grid; }
  .role-ai-title span { text-align: left; }
}


/* Flow-smarts UI polish */
:root {
  --radius: 0px;
  --panel-glow: color-mix(in srgb, var(--accent) 14%, transparent);
}
.app-shell {
  grid-template-columns: 326px minmax(460px, 1fr) 410px;
}
.topbar {
  background: linear-gradient(135deg, color-mix(in srgb, var(--panel) 92%, var(--accent) 8%), var(--panel));
}
.brand-mark { letter-spacing: .16em; }
.build-pill {
  border: 1px solid var(--soft-line);
  padding: 3px 6px;
  background: var(--bg);
}
.panel-section {
  margin: 10px;
  border: 1px solid var(--soft-line);
  background: color-mix(in srgb, var(--panel) 88%, var(--bg) 12%);
  box-shadow: 3px 3px 0 var(--shadow);
}
.left-panel, .right-panel { background: color-mix(in srgb, var(--panel) 80%, var(--bg) 20%); }
.flow-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
.flow-stat-card {
  border: 1px solid var(--soft-line);
  background: var(--bg);
  padding: 8px;
  display: grid;
  gap: 2px;
  min-height: 54px;
}
.flow-stat-card b {
  font-size: 16px;
  line-height: 1.1;
  color: var(--accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.flow-stat-card span {
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.node-palette {
  min-height: 54px;
  position: relative;
  align-content: center;
}
.node-palette::before {
  display: block;
  font-size: 16px;
  margin-bottom: 3px;
}
.node-palette[data-node-type="TrueFalse"]::before { content: "◇"; }
.node-palette[data-node-type="Output"]::before { content: "▣"; }
.node-palette[data-node-type="Checklist"]::before { content: "☑"; }
.r3-node {
  width: 270px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 94%, white 6%), var(--panel));
}
html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .r3-node {
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 92%, #fff 3%), var(--panel));
}
.node-head {
  height: 38px;
  padding-inline: 10px;
}
.node-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.node-timer {
  font-size: 10px;
  border: 1px solid color-mix(in srgb, #fff 38%, transparent);
  padding: 2px 4px;
  background: rgba(0,0,0,.12);
  white-space: nowrap;
}
.node-head-tools { display: inline-flex; align-items: center; gap: 4px; }
.node-head-btn {
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.08);
  color: #fff;
  width: 23px;
  height: 23px;
  display: inline-grid;
  place-items: center;
  padding: 0;
}
.node-body {
  max-height: 112px;
  padding: 10px 11px;
  border-bottom: 1px solid color-mix(in srgb, var(--soft-line) 70%, transparent);
}
.node-body-label {
  display: inline-block;
  margin-bottom: 6px;
  color: var(--accent);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .14em;
}
.node-body-text {
  color: var(--ink);
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  border-left: 3px solid var(--soft-line);
  padding: 6px 7px;
}
.node-tools {
  grid-template-columns: 1fr;
  align-items: stretch;
  max-height: 128px;
  overflow: auto;
  padding-top: 10px;
}
.tool-bubble {
  border-color: color-mix(in srgb, var(--line) 75%, var(--accent) 25%);
  background: linear-gradient(180deg, var(--panel-2), color-mix(in srgb, var(--panel-2) 84%, var(--accent) 16%));
}
.r3-node.running {
  box-shadow: 0 0 0 3px var(--panel-glow), 11px 11px 0 var(--shadow), 0 0 28px color-mix(in srgb, var(--accent) 32%, transparent);
}
.r3-node.running .node-head {
  background: linear-gradient(90deg, var(--accent), var(--agent));
}
.option-card, .output-card, .log-entry, .role-ai-panel, .role-picker-card {
  border: 1px solid var(--soft-line);
  background: color-mix(in srgb, var(--bg) 82%, var(--panel) 18%);
  box-shadow: 2px 2px 0 var(--shadow);
}

/* Node-card generated tool items stay one per row; this is not the side-panel tool picker. */
.r3-node .node-tools {
  display: grid;
  grid-template-columns: 1fr !important;
}
.r3-node .node-tools .tool-bubble {
  width: 100%;
}

.tool-checks {
  max-height: 230px;
  overflow: auto;
  padding: 8px;
  border: 1px solid var(--soft-line);
  background: var(--bg);
}
.canvas-hint {
  backdrop-filter: blur(8px);
}
@media (max-width: 1180px) {
  .app-shell { grid-template-columns: 300px minmax(390px, 1fr) 360px; }
}

/* Tool chooser reverted to single-column for readability. */


/* Role manager scroll fix: keep every control reachable on short screens */
.role-dialog {
  width: min(1040px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  overflow: hidden;
}
.role-dialog form {
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 28px);
  overflow: hidden;
  min-height: 0;
}
.role-dialog .role-manager-head {
  flex: 0 0 auto;
}
.role-dialog .role-manager-grid {
  flex: 1 1 auto;
  min-height: 0;
  max-height: calc(100dvh - 190px);
  overflow: hidden;
}
.role-dialog .role-list-wrap,
.role-dialog .role-editor {
  min-height: 0;
  overflow: hidden;
}
.role-dialog .role-list {
  flex: 1 1 auto;
  min-height: 120px;
  max-height: none;
  overflow-y: auto;
  scrollbar-gutter: stable;
}
.role-dialog .role-editor {
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding-right: 14px;
}
.role-dialog .role-editor textarea,
.role-dialog .role-ai-panel textarea {
  max-height: 42vh;
}
.role-dialog menu {
  flex: 0 0 auto;
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin: 10px -18px -18px;
  padding: 12px 18px;
  border-top: 1px solid var(--soft-line);
  background: color-mix(in srgb, var(--panel) 96%, transparent);
  backdrop-filter: blur(8px);
}
@media (max-width: 760px) {
  .role-dialog {
    width: calc(100vw - 14px);
    max-height: calc(100dvh - 14px);
  }
  .role-dialog form {
    max-height: calc(100dvh - 16px);
    overflow-y: auto;
  }
  .role-dialog .role-manager-grid {
    max-height: none;
    overflow: visible;
  }
  .role-dialog .role-list-wrap,
  .role-dialog .role-editor {
    overflow: visible;
  }
  .role-dialog .role-list {
    max-height: 220px;
  }
  .role-dialog .role-editor {
    padding-right: 0;
  }
}

/* Checklist workflow consolidation */
.checklist-workflow select {
  min-height: 38px;
}
.checklist-workflow .option-help {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  text-transform: none;
  letter-spacing: normal;
}


/* Node-local scrolling polish */
.r3-node,
.node-body,
.node-tools,
.tool-tip {
  overscroll-behavior: contain;
}
.node-body,
.node-tools {
  touch-action: pan-y;
}
.node-tools {
  scroll-behavior: smooth;
}

/* Live steer + polished context menu */
.r3-context-menu {
  min-width: 238px;
  padding: 7px;
  border-color: color-mix(in srgb, var(--line) 78%, var(--accent) 22%);
  background: color-mix(in srgb, var(--panel) 94%, #000 6%);
  box-shadow: 9px 9px 0 var(--shadow), 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent) inset;
}
.r3-context-menu button {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 38px;
  border: 1px solid transparent;
  border-left: 3px solid transparent;
  padding: 6px 8px 6px 6px;
}
.r3-context-menu button:hover:not(:disabled),
.r3-context-menu button:focus-visible:not(:disabled) {
  background: color-mix(in srgb, var(--panel-2) 82%, var(--accent) 18%);
  border-color: color-mix(in srgb, var(--soft-line) 75%, var(--accent) 25%);
  border-left-color: var(--accent);
  outline: none;
}
.r3-context-menu button:disabled {
  opacity: .47;
  cursor: not-allowed;
}
.ctx-icon {
  width: 26px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--soft-line);
  background: var(--bg);
  color: var(--accent);
  font-size: 13px;
  font-weight: 850;
  line-height: 1;
}
.ctx-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.ctx-copy b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  letter-spacing: .02em;
}
.ctx-copy small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.2;
}
.ctx-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--soft-line), transparent);
  margin: 7px 3px;
}
.r3-context-menu button.danger .ctx-icon {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 45%, var(--soft-line));
}

.r3-steer-modal::backdrop { background: rgba(0, 0, 0, .58); }
.r3-steer-modal {
  width: min(640px, calc(100vw - 26px));
  padding: 0;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
}
.steer-card {
  display: grid;
  gap: 14px;
  padding: 16px;
  background: var(--panel);
  box-shadow: 10px 10px 0 var(--shadow);
}
.steer-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--soft-line);
}
.steer-head strong {
  display: block;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--accent);
}
.steer-head span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}
.steer-field {
  margin: 0;
}
.steer-field textarea {
  min-height: 180px;
  font-size: 14px;
  line-height: 1.45;
}
.steer-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.tool-live_steer .bubble-icon {
  color: var(--accent);
}

/* Side panel polish: collapsible cards, icons, and denser visual hierarchy */
.panel {
  scrollbar-gutter: stable;
}
.panel-fold {
  padding: 0;
  overflow: clip;
  border-bottom: 1px solid color-mix(in srgb, var(--soft-line) 76%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 94%, var(--accent) 6%), var(--panel));
}
.panel-fold[open] {
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--accent) 16%, transparent);
}
.panel-summary,
.option-fold > summary {
  list-style: none;
  display: grid;
  grid-template-columns: 26px 1fr auto;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 11px 13px;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 11px;
  font-weight: 850;
}
.panel-summary::-webkit-details-marker,
.option-fold > summary::-webkit-details-marker { display: none; }
.panel-summary:hover,
.option-fold > summary:hover {
  color: var(--ink);
  background: color-mix(in srgb, var(--panel-2) 52%, transparent);
}
.panel-summary-icon,
.fold-icon {
  width: 23px;
  height: 23px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--soft-line);
  background: color-mix(in srgb, var(--bg) 74%, var(--accent) 26%);
  color: var(--accent);
  font-size: 12px;
  line-height: 1;
}
.panel-summary-chevron,
.fold-chevron {
  color: var(--accent);
  transition: transform .16s ease;
}
.panel-fold:not([open]) .panel-summary-chevron,
.option-fold:not([open]) .fold-chevron { transform: rotate(-90deg); }
.panel-content,
.option-fold-content {
  padding: 0 13px 14px;
}
.left-panel .panel-content,
.right-panel .panel-content { animation: panelContentIn .12s ease-out; }
@keyframes panelContentIn { from { opacity: .55; transform: translateY(-2px); } to { opacity: 1; transform: translateY(0); } }

.node-options {
  gap: 10px;
}
.option-fold {
  border: 1px solid color-mix(in srgb, var(--soft-line) 88%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 80%, var(--panel) 20%), var(--bg));
  box-shadow: 3px 3px 0 var(--shadow);
}
.option-fold > summary {
  min-height: 38px;
  padding: 9px 10px;
  grid-template-columns: 24px 1fr auto auto;
  background: color-mix(in srgb, var(--panel) 74%, transparent);
}
.option-fold .option-fold-content {
  padding: 10px;
}
.option-fold label {
  padding: 8px;
  margin: 0 0 8px;
  border: 1px solid color-mix(in srgb, var(--soft-line) 58%, transparent);
  background: color-mix(in srgb, var(--panel) 48%, transparent);
}
.option-fold label:last-child { margin-bottom: 0; }
.fold-count {
  display: inline-grid;
  min-width: 22px;
  height: 22px;
  place-items: center;
  padding: 0 6px;
  border: 1px solid var(--soft-line);
  color: var(--accent);
  background: var(--bg);
  font-size: 10px;
  letter-spacing: normal;
}

.node-palette {
  position: relative;
  grid-template-rows: auto auto;
  gap: 5px;
  min-height: 64px;
  padding: 8px 6px;
}
.node-palette::before {
  content: '◇';
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid var(--soft-line);
  color: var(--accent);
  background: color-mix(in srgb, var(--bg) 80%, var(--accent) 20%);
  font-size: 13px;
}
.node-palette[data-node-type="TrueFalse"]::before { content: '◇'; }
.node-palette[data-node-type="Output"]::before { content: '▣'; }
.node-palette[data-node-type="Checklist"]::before { content: '☑'; }
.node-palette[data-node-type="TaskSplitter"]::before { content: '↯'; }
.node-palette[data-node-type="Merge"]::before { content: '⇄'; }

.file-item {
  border-color: color-mix(in srgb, var(--soft-line) 78%, transparent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--bg) 88%, var(--panel) 12%), var(--bg));
}
.file-name::before {
  content: '▧ ';
  color: var(--muted);
}
.file-html .file-name::before { content: '◈ '; color: var(--accent); }
.file-actions .file-mini {
  min-height: 22px;
  text-transform: uppercase;
  font-size: 10px;
}

.tool-checks {
  border-style: dashed;
  background: color-mix(in srgb, var(--bg) 88%, var(--panel) 12%);
}
.tool-checks label {
  border: 1px solid transparent;
  padding: 5px 6px;
  transition: background .12s ease, border-color .12s ease;
}
.tool-checks label:hover {
  border-color: var(--soft-line);
  background: color-mix(in srgb, var(--panel-2) 48%, transparent);
}
.tool-checks label input:checked + span,
.tool-checks label input:checked ~ span {
  color: var(--accent);
  font-weight: 800;
}

.inline-row, .global-prompt-actions, .download-row, .file-list {
  margin-top: 2px;
}
.panel .ui-btn {
  min-height: 34px;
}
.right-panel .empty-state {
  border: 1px dashed var(--soft-line);
  padding: 12px;
  background: var(--bg);
}

@media (max-width: 980px) {
  .panel-summary,
  .option-fold > summary { min-height: 40px; }
  .node-palette { min-height: 58px; }
}


/* Image/video node + bypass + node stream scroll fix */
.r3-node[data-type="Image"] .node-head {
  background: color-mix(in srgb, var(--accent) 58%, #4b2f6f 42%);
}
.node-palette[data-node-type="Image"]::before { content: '▧'; }
.r3-node[data-type="Video"] .node-head {
  background: color-mix(in srgb, var(--accent) 52%, #24496f 48%);
}
.node-palette[data-node-type="Video"]::before { content: '▻'; }
.video-ref-row video {
  display: block;
}
.r3-node.is-bypassed {
  opacity: .72;
  border-style: dashed;
  filter: saturate(.78);
}
.r3-node.is-bypassed .node-head {
  background: color-mix(in srgb, var(--muted) 65%, var(--agent) 35%) !important;
}
.r3-node.is-bypassed .node-body {
  border-style: dashed;
}
.r3-node.is-bypassed .node-body-label::after {
  content: ' · skip';
  color: var(--danger);
}
/* Hidden absolute tooltips used to inflate .node-tools scrollHeight, creating a fake empty bottom.
   Keep them out of scroll calculations until the user actually hovers a bubble. */
.r3-node .node-tools .tool-tip {
  display: none !important;
}
.r3-node .node-tools .tool-bubble:hover .tool-tip {
  display: grid !important;
}
.r3-node .node-tools .tool-bubble:focus-visible .tool-tip {
  display: none !important;
}

/* Browser probe iframe/runtime diagnostics */
.r3-browser-probe-modal {
  width: min(1180px, calc(100vw - 28px));
  z-index: 10000;
  height: min(820px, calc(100dvh - 28px));
  padding: 0;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  box-shadow: 12px 12px 0 var(--shadow);
}
.r3-browser-probe-modal::backdrop {
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
}
.browser-probe-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
  min-height: 0;
}
.browser-probe-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(135deg, color-mix(in srgb, var(--panel-2) 84%, var(--accent) 16%), var(--panel-2));
}
.browser-probe-title strong {
  display: block;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 13px;
}
.browser-probe-title > span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.browser-probe-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  min-width: 0;
}
.browser-probe-status {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 8px;
  border: 1px solid var(--soft-line);
  background: color-mix(in srgb, var(--panel) 78%, transparent);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  white-space: nowrap;
}
.browser-probe-status[data-tone="running"],
.browser-probe-status[data-tone="analyzing"] {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--soft-line));
  color: var(--accent);
}
.browser-probe-status[data-tone="complete"] {
  border-color: color-mix(in srgb, var(--ok) 58%, var(--soft-line));
  color: var(--ok);
}
.browser-probe-status[data-tone="warning"] {
  border-color: color-mix(in srgb, var(--warning) 62%, var(--soft-line));
  color: var(--warning);
}
.browser-probe-finish-toggle {
  display: inline-flex;
  grid-template-columns: none;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  margin: 0;
  padding: 5px 8px;
  border: 1px solid var(--soft-line);
  background: color-mix(in srgb, var(--panel) 82%, transparent);
  color: var(--ink);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0;
  line-height: 1.15;
  text-transform: none;
  cursor: pointer;
  user-select: none;
}
.browser-probe-finish-toggle:hover {
  border-color: var(--accent);
}
.browser-probe-finish-toggle input {
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  accent-color: var(--accent);
  flex: 0 0 auto;
}
.browser-probe-finish-toggle span {
  display: inline;
  margin: 0;
  color: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  text-transform: none;
  white-space: nowrap;
}
.browser-probe-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(320px, 1.15fr) minmax(320px, .85fr);
  gap: 10px;
  padding: 10px;
  background: var(--bg);
}
.browser-probe-frame {
  width: 100%;
  height: 100%;
  min-height: 360px;
  border: 1px solid var(--line);
  background: #000;
  box-shadow: 4px 4px 0 var(--shadow);
}
.browser-probe-output {
  margin: 0;
  width: 100%;
  height: 100%;
  min-height: 360px;
  overflow: auto;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 86%, #000 14%);
  color: var(--ink);
  padding: 12px;
  font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: pre-wrap;
  box-shadow: 4px 4px 0 var(--shadow);
}
.r3-browser-probe-modal.probe-hidden-mode {
  opacity: 0;
  pointer-events: none;
}
.tool-bubble.tool-browser_probe {
  border-color: color-mix(in srgb, var(--accent) 70%, var(--line));
  background: color-mix(in srgb, var(--panel-2) 78%, var(--accent) 12%);
}
.tool-bubble.tool-browser_probe .bubble-icon {
  color: var(--accent);
}
@media (max-width: 900px) {
  .r3-browser-probe-modal {
    width: calc(100vw - 14px);
    height: calc(100dvh - 14px);
  }
  .browser-probe-head {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 9px;
  }
  .browser-probe-title {
    min-width: min(100%, 220px);
    flex: 1 1 220px;
  }
  .browser-probe-head-actions {
    width: 100%;
    justify-content: space-between;
    gap: 7px;
  }
  .browser-probe-status {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .browser-probe-finish-toggle {
    margin-left: auto;
  }
  .browser-probe-grid {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(320px, 1fr) minmax(280px, .8fr);
  }
}
@media (max-width: 520px) {
  .browser-probe-head-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .browser-probe-status {
    grid-column: 1 / -1;
    width: 100%;
  }
  .browser-probe-finish-toggle {
    margin-left: 0;
  }
}
.browser-probe-hidden-frame {
  position: fixed;
  left: -12000px;
  top: 0;
  width: 1280px;
  height: 720px;
  border: 0;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}
.file-mini.probe {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--soft-line));
  color: var(--accent);
}

/* Browser probe appears as a normal opt-in runtime tool in Agent tool lists. */
.tool-checks .browser-probe-tool span::before {
  content: '🧪 ';
}

/* Browser probe visible mode: optional close-after-analysis lifecycle. */
.r3-browser-probe-modal[open] {
  position: fixed;
  inset: 14px auto auto 50%;
  transform: translateX(-50%);
  max-width: calc(100vw - 28px);
  max-height: calc(100dvh - 28px);
}
.r3-browser-probe-modal.probe-hidden-mode[open] {
  display: none;
}

/* Duplicate-guard/upsert tool polish */
.tool-checks label:has(input[data-tool="upsert_section"]),
.tool-checks label:has(input[data-tool="upsert_config_key"]) {
  border-color: color-mix(in srgb, var(--accent) 24%, transparent);
}
.tool-checks label:has(input[data-tool="upsert_section"]) span::before,
.tool-checks label:has(input[data-tool="upsert_config_key"]) span::before {
  content: '↺ ';
  color: var(--accent);
  font-weight: 900;
}
.tool-bubble.tool-upsert_section,
.tool-bubble.tool-upsert_config_key,
.tool-bubble.tool-r3d3-duplicate-guard,
.tool-bubble.tool-node--check {
  border-color: color-mix(in srgb, var(--accent) 62%, var(--line));
  background: color-mix(in srgb, var(--panel-2) 82%, var(--accent) 8%);
}

/* Recoverable error / validator repair states: visible but not terminal */
.tool-bubble.tool-status-repair,
.tool-bubble.tool-status-recoverable_error {
  border-color: color-mix(in srgb, var(--accent) 62%, var(--line));
  background: color-mix(in srgb, var(--panel-2) 82%, var(--accent) 10%);
}
.tool-bubble.tool-status-repair .bubble-icon,
.tool-bubble.tool-status-recoverable_error .bubble-icon {
  color: var(--accent);
}
.tool-bubble.tool-status-repair .bubble-copy b::after {
  content: ' · repair';
  color: var(--muted);
  font-weight: 700;
}
.tool-bubble.tool-status-recoverable_error .bubble-copy b::after {
  content: ' · recover';
  color: var(--muted);
  font-weight: 700;
}


/* Setup-owned browser probe visibility + prompt layer explainer */
.setup-fieldset {
  margin: 12px 0 0;
  padding: 12px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel-2) 70%, transparent);
}
.setup-fieldset legend {
  padding: 0 6px;
  color: var(--accent);
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 11px;
}
.layers-help-btn {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
}
.layers-dialog {
  width: min(860px, calc(100vw - 28px));
}
.layers-dialog form {
  padding: 0;
}
.layers-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 18px;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 32%),
    var(--panel);
}
.layers-modal-head h2 { margin: 0 0 5px; }
.layers-modal-head p { margin: 0; color: var(--muted); }
.layers-visual {
  position: relative;
  display: grid;
  gap: 10px;
  padding: 18px;
}
.layers-visual::before {
  content: '';
  position: absolute;
  left: 31px;
  top: 34px;
  bottom: 34px;
  width: 2px;
  background: linear-gradient(to bottom, transparent, var(--accent), transparent);
  opacity: .55;
}
.layer-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(160px, 220px) 1fr;
  gap: 12px;
  align-items: center;
  min-height: 58px;
  padding: 12px 14px 12px 42px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel-2) 88%, transparent);
  box-shadow: 5px 5px 0 var(--shadow);
}
.layer-card::before {
  content: '';
  position: absolute;
  left: 18px;
  width: 14px;
  height: 14px;
  border: 2px solid var(--accent);
  background: var(--panel);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent);
}
.layer-card b { color: var(--ink); }
.layer-card span { color: var(--muted); line-height: 1.35; }
.layer-system { border-color: color-mix(in srgb, #ff6b6b 38%, var(--line)); }
.layer-project { border-color: color-mix(in srgb, #ffd166 38%, var(--line)); }
.layer-role { border-color: color-mix(in srgb, #80ed99 38%, var(--line)); }
.layer-node { border-color: color-mix(in srgb, #64dfdf 38%, var(--line)); }
.layer-context { border-color: color-mix(in srgb, #bdb2ff 38%, var(--line)); }
.layer-tools { border-color: color-mix(in srgb, var(--accent) 44%, var(--line)); }
.layers-flow-note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 18px 18px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line));
  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
}
.layers-flow-note span {
  color: var(--accent);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .05em;
}
@media (max-width: 720px) {
  .layer-card { grid-template-columns: 1fr; gap: 5px; }
  .layers-modal-head { flex-direction: column; }
}


/* Role manager UX polish: collapsible AI builder + reliable close button */
.role-dialog .role-manager-head {
  gap: 12px;
}
.role-dialog .role-editor {
  align-content: start;
}
.role-dialog .role-ai-panel {
  display: block;
  padding: 0;
  overflow: hidden;
}
.role-dialog .role-ai-panel:not([open]) {
  background: color-mix(in srgb, var(--panel) 74%, transparent);
}
.role-ai-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px;
  cursor: pointer;
  user-select: none;
  list-style: none;
}
.role-ai-summary::-webkit-details-marker {
  display: none;
}
.role-ai-summary span,
.role-ai-summary strong,
.role-ai-summary small {
  display: block;
}
.role-ai-summary strong {
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
}
.role-ai-summary small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}
.role-ai-summary em {
  border: 1px solid var(--border);
  color: var(--muted);
  font-style: normal;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 5px 8px;
  white-space: nowrap;
}
.role-ai-panel[open] .role-ai-summary {
  border-bottom: 1px solid var(--soft-line);
}
.role-ai-body {
  display: grid;
  gap: 9px;
  padding: 11px;
}
.role-ai-guidance {
  display: grid;
  gap: 5px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
  background: color-mix(in srgb, var(--accent) 7%, var(--panel-soft));
  color: var(--muted);
  padding: 9px;
  font-size: 11px;
  line-height: 1.4;
}
.role-ai-guidance b {
  color: var(--text);
  font-size: 12px;
}
.role-dialog menu #closeRoleBtn {
  min-width: 110px;
}
@media (max-width: 760px) {
  .role-ai-summary {
    align-items: flex-start;
  }
}

/* Role AI builder overflow fix: keep expanded contents reachable */
.role-dialog .role-editor {
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.role-dialog .role-editor > *,
.role-dialog .role-editor label,
.role-dialog .role-ai-body,
.role-dialog .role-ai-body > * {
  min-width: 0;
}
.role-dialog .role-ai-panel[open] {
  overflow: visible;
}

/* Role AI verbose action increment */
.role-builder-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.role-builder-actions .ui-btn {
  min-width: 0;
  white-space: normal;
  line-height: 1.2;
}
@media (max-width: 900px) {
  .role-builder-actions {
    grid-template-columns: 1fr;
  }
}

.role-dialog .role-ai-panel[open] .role-ai-body {
  max-height: min(430px, calc(100dvh - 300px));
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.role-dialog .role-ai-panel input,
.role-dialog .role-ai-panel textarea,
.role-dialog .role-editor input,
.role-dialog .role-editor textarea {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.role-dialog .role-ai-panel textarea {
  min-height: 96px;
  max-height: 180px;
}
.role-dialog .role-ai-actions {
  position: sticky;
  bottom: 0;
  z-index: 1;
  padding-top: 8px;
  background: linear-gradient(to bottom, transparent, var(--panel) 26%);
}
@media (max-width: 760px), (max-height: 680px) {
  .role-dialog form {
    overflow-y: auto;
  }
  .role-dialog .role-manager-grid {
    max-height: none;
    overflow: visible;
  }
  .role-dialog .role-editor {
    overflow: visible;
  }
  .role-dialog .role-ai-panel[open] .role-ai-body {
    max-height: none;
    overflow: visible;
  }
  .role-dialog menu {
    position: sticky;
    bottom: 0;
  }
}



/* R3D3:NODE_TITLE_VISIBILITY_2026_06_02
   Keep node names readable. Timer/action controls move to a compact second row
   so the title gets the full header width instead of collapsing to 2 letters. */
.r3-node {
  width: 310px;
}
.node-head {
  height: auto !important;
  min-height: 52px;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: minmax(16px, auto) 23px;
  align-items: center;
  gap: 3px 6px;
  padding: 5px 8px 6px;
}
.node-title {
  grid-column: 1 / -1;
  grid-row: 1;
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.15;
}
.node-timer {
  grid-column: 1;
  grid-row: 2;
  justify-self: start;
  min-width: 74px;
  max-width: none;
}
.node-head-tools {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  min-width: 0;
  gap: 3px;
}
.node-head-btn {
  width: 21px;
  height: 21px;
}
.node-kind {
  min-width: 22px;
  font-size: 9px;
  text-align: right;
}
@media (max-width: 760px) {
  .r3-node { width: 292px; }
  .node-head { min-height: 50px; padding-inline: 7px; }
  .node-head-btn { width: 20px; height: 20px; }
  .node-kind { min-width: 20px; }
}

/* Cross-project flow templates/import */
.flow-library-dialog {
  width: min(980px, calc(100vw - 28px));
}
.flow-library-card {
  max-height: min(86vh, 860px);
}
.flow-library-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
}
.flow-library-list {
  display: grid;
  gap: 8px;
}
.flow-library-cardlet {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  padding: 10px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel-2) 84%, transparent);
}
.flow-library-cardlet b {
  display: block;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.flow-library-cardlet small,
.flow-library-cardlet p {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  line-height: 1.35;
}
.flow-library-actions {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.flow-library-select {
  display: grid;
  gap: 6px;
  margin-bottom: 10px;
}
.flow-library-select select {
  width: 100%;
}
@media (max-width: 860px) {
  .flow-library-body { grid-template-columns: 1fr; }
  .flow-library-cardlet { grid-template-columns: 1fr; }
  .flow-library-actions { justify-content: flex-start; }
}

/* Role combine + searchable model picker polish */
.role-list-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 8px;
}
.role-combine-list {
  display: grid;
  gap: 6px;
  max-height: 180px;
  overflow: auto;
  border: 1px solid var(--line);
  background: var(--panel-3, rgba(0,0,0,0.18));
  padding: 6px;
}
.role-combine-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 6px;
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  background: color-mix(in srgb, var(--panel) 72%, transparent);
}
.role-combine-row span {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.role-combine-row small {
  color: var(--muted);
  line-height: 1.25;
}
@media (max-width: 760px) {
  .role-list-actions { grid-template-columns: 1fr; }
}

/* Chat view + route choice UI extracted from JS — 2026-06-03 */
.node-title-wrap {
  min-width: 0;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  overflow: hidden;
  line-height: 1;
}
.node-title-wrap .node-title {
  min-width: 0;
  max-width: calc(100% - 52px);
  flex: 0 1 auto;
}
.node-route-choice {
  flex: 0 0 auto;
  position: relative;
  top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 16px;
  padding: 0 5px;
  border: 1px solid rgba(247, 198, 95, .82);
  background: linear-gradient(135deg, rgba(247, 198, 95, .22), rgba(247, 198, 95, .06));
  color: #f7c65f;
  box-shadow: 0 0 0 1px rgba(247, 198, 95, .12), 0 0 12px rgba(247, 198, 95, .16);
  font-size: 7.5px;
  font-weight: 950;
  letter-spacing: .12em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.r3-node[data-type="TrueFalse"][data-route-choice="true"] .node-route-choice::before { content: "TRUE"; }
.r3-node[data-type="TrueFalse"][data-route-choice="false"] .node-route-choice::before { content: "FALSE"; }
.r3-node[data-type="TrueFalse"][data-route-force] .node-route-choice {
  border-color: color-mix(in srgb, var(--warning) 72%, var(--line));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--warning) 28%, transparent), 0 0 14px color-mix(in srgb, var(--warning) 26%, transparent);
}
.r3-node[data-type="TrueFalse"][data-route-force] .node-route-choice::after {
  content: "⚑";
  margin-left: 4px;
  font-size: 8px;
  color: var(--warning);
}
.r3-node[data-type="TrueFalse"] .node-body-label {
  color: #f7c65f;
}
.route-choice-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid rgba(247, 198, 95, .64);
  background: linear-gradient(135deg, rgba(247, 198, 95, .14), transparent 70%);
  color: #f7c65f;
  padding: 8px 9px;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.route-choice-preview b {
  color: #ffd984;
}
.chat-toggle-btn.is-chat-active {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 74%, #fff 4%), var(--accent));
  color: var(--accent-ink);
  border-color: var(--accent);
}
.app-shell.chat-mode {
  grid-template-columns: 1fr;
  grid-template-rows: 54px minmax(0, 1fr);
  grid-template-areas: "top" "chat";
}
.app-shell.chat-mode .left-panel,
.app-shell.chat-mode .canvas-wrap,
.app-shell.chat-mode .right-panel {
  display: none !important;
}
.r3-chat-shell {
  grid-area: chat;
  min-height: 0;
  display: none;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  background:
    radial-gradient(circle at 18% 8%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--canvas) 78%, #000 8%), var(--bg));
  overflow: hidden;
}
.app-shell.chat-mode .r3-chat-shell {
  display: grid;
}
.r3-chat-sidebar {
  min-height: 0;
  overflow: auto;
  border-right: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 86%, var(--bg) 14%);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.r3-chat-brand {
  display: grid;
  gap: 6px;
  padding: 14px;
  border: 1px solid var(--line);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, transparent), var(--panel));
  box-shadow: 4px 4px 0 var(--shadow);
}
.r3-chat-brand strong {
  font-size: 19px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.r3-chat-brand span,
.r3-chat-note,
.r3-chat-hint {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.r3-chat-panel {
  border: 1px solid var(--soft-line);
  background: color-mix(in srgb, var(--panel) 82%, transparent);
  padding: 11px;
  box-shadow: 3px 3px 0 var(--shadow);
}
.r3-chat-panel h3 {
  margin: 0 0 9px;
  color: var(--accent);
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.r3-chat-main {
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
}
.r3-chat-messages {
  min-height: 0;
  overflow: auto;
  padding: 28px clamp(16px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  scroll-behavior: smooth;
}
.r3-chat-empty {
  align-self: center;
  width: min(720px, 100%);
  margin: auto 0;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  box-shadow: 7px 7px 0 var(--shadow);
  padding: 22px;
  display: grid;
  gap: 10px;
}
.r3-chat-empty h2 { margin: 0; }
.r3-chat-row {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  max-width: min(920px, 100%);
}
.r3-chat-row.user { align-self: flex-end; flex-direction: row-reverse; }
.r3-chat-row.assistant,
.r3-chat-row.system { align-self: flex-start; }
.r3-chat-avatar {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
  box-shadow: 2px 2px 0 var(--shadow);
}
.r3-chat-bubble {
  min-width: 0;
  max-width: min(760px, 76vw);
  border: 1px solid var(--soft-line);
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  box-shadow: 3px 3px 0 var(--shadow);
  padding: 13px 14px;
  line-height: 1.55;
}
.r3-chat-row.user .r3-chat-bubble {
  border-color: color-mix(in srgb, var(--accent) 62%, var(--soft-line));
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, var(--panel)), var(--panel));
}
.r3-chat-bubble p { margin: 0 0 10px; }
.r3-chat-bubble p:last-child { margin-bottom: 0; }
.r3-chat-bubble ul,
.r3-chat-bubble ol { margin: 6px 0 10px 22px; padding: 0; }
.r3-chat-bubble pre {
  overflow: auto;
  padding: 11px;
  border: 1px solid var(--soft-line);
  background: var(--bg);
  white-space: pre-wrap;
  font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.r3-chat-bubble code {
  border: 1px solid color-mix(in srgb, var(--soft-line) 70%, transparent);
  background: var(--bg);
  padding: 1px 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .92em;
}
.r3-chat-meta {
  margin-top: 10px;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.r3-chat-trace {
  margin-top: 12px;
  border-top: 1px solid var(--soft-line);
  padding-top: 10px;
}
.r3-chat-trace summary {
  cursor: pointer;
  color: var(--accent);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.r3-chat-trace-list {
  margin-top: 9px;
  display: grid;
  gap: 7px;
}
.r3-chat-trace-item,
.r3-chat-node-pill {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--soft-line);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  padding: 7px 8px;
  font-size: 12px;
}
.r3-chat-status-dot {
  width: 10px;
  height: 10px;
  border: 1px solid var(--line);
  background: var(--muted);
}
.r3-chat-status-running .r3-chat-status-dot { background: var(--accent); animation: r3d3LivePulse 1.05s ease-in-out infinite; }
.r3-chat-status-done .r3-chat-status-dot { background: var(--output); }
.r3-chat-status-skipped .r3-chat-status-dot { background: var(--gate); }
.r3-chat-status-error .r3-chat-status-dot { background: var(--danger); }
.r3-chat-node-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r3-chat-node-tool {
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  white-space: nowrap;
}
.r3-chat-hud-current {
  display: grid;
  gap: 6px;
  border: 1px solid color-mix(in srgb, var(--accent) 58%, var(--soft-line));
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, transparent), transparent 72%);
  padding: 10px;
  margin-bottom: 10px;
}
.r3-chat-hud-current b { color: var(--accent); }
.r3-chat-hud-current span { color: var(--muted); font-size: 12px; line-height: 1.35; }
.r3-chat-composer {
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 90%, transparent);
  padding: 14px clamp(16px, 4vw, 56px) 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "attachments attachments"
    "input send"
    "hint hint";
  gap: 10px;
  align-items: end;
}
.r3-chat-input-wrap {
  grid-area: input;
  position: relative;
  border: 1px solid var(--line);
  background: var(--bg);
  box-shadow: 3px 3px 0 var(--shadow);
  padding: 7px 48px 7px 7px;
}
.r3-chat-input {
  min-height: 54px;
  max-height: 180px;
  resize: vertical;
  border: 0;
  background: transparent;
  padding: 7px;
  box-shadow: none;
}
.r3-chat-send {
  min-width: 96px;
  min-height: 48px;
}

.r3-chat-attachment-tray {
  grid-area: attachments;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
  padding: 8px;
  border: 1px dashed color-mix(in srgb, var(--accent) 56%, var(--soft-line));
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  box-shadow: 2px 2px 0 var(--shadow);
}
.r3-chat-attachment-tray[hidden] { display: none !important; }
.r3-chat-attachment-chip {
  min-width: 0;
  max-width: min(280px, 100%);
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--soft-line);
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  color: var(--ink);
  padding: 6px;
  box-shadow: 2px 2px 0 var(--shadow);
}
.r3-chat-attachment-preview {
  width: 44px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--soft-line);
  background: var(--bg);
  overflow: hidden;
  color: var(--accent);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
}
.r3-chat-attachment-preview img,
.r3-chat-attachment-preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.r3-chat-attachment-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.r3-chat-attachment-copy b,
.r3-chat-attachment-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.r3-chat-attachment-copy b {
  font-size: 12px;
  line-height: 1.15;
}
.r3-chat-attachment-copy small {
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.r3-chat-attachment-remove,
.r3-chat-attach-btn {
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--ink);
  box-shadow: 1px 1px 0 var(--shadow);
}
.r3-chat-attachment-remove {
  width: 26px;
  height: 26px;
  padding: 0;
  color: var(--danger);
}
.r3-chat-attach-btn {
  position: absolute;
  right: 9px;
  bottom: 9px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  font-weight: 900;
  z-index: 7;
}
.r3-chat-composer.is-chat-dragging-media {
  background: color-mix(in srgb, var(--accent) 16%, var(--panel));
}
.r3-chat-composer.is-chat-dragging-media .r3-chat-input-wrap {
  outline: 2px dashed var(--accent);
  outline-offset: 3px;
}
.r3-chat-message-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0 0 10px;
}
.r3-chat-message-attachments .r3-chat-attachment-chip {
  grid-template-columns: 34px minmax(0, 1fr);
  max-width: 240px;
  padding: 5px;
  box-shadow: none;
}
.r3-chat-message-attachments .r3-chat-attachment-preview {
  width: 34px;
  height: 30px;
}
.r3-chat-media-analysis {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: -3px 0 10px;
}
.r3-chat-analysis-chip {
  min-width: 0;
  max-width: min(100%, 520px);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 46%, var(--soft-line));
  background: color-mix(in srgb, var(--accent) 8%, var(--panel));
  color: var(--muted);
  font-size: 10px;
  line-height: 1.15;
  letter-spacing: .03em;
}
.r3-chat-analysis-chip i {
  flex: 0 0 auto;
  color: var(--accent);
  font-style: normal;
  font-size: 9px;
}
.r3-chat-analysis-chip > span {
  flex: 0 0 auto;
  font-style: normal;
}
.r3-chat-analysis-chip > b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
  font-weight: 800;
}
.r3-chat-analysis-view {
  flex: 0 0 auto;
  min-height: 24px;
  margin-left: 2px;
  padding: 3px 7px;
  border: 1px solid color-mix(in srgb, var(--accent) 58%, var(--soft-line));
  background: color-mix(in srgb, var(--accent) 13%, var(--panel-2));
  color: var(--accent);
  font-size: 9px;
  font-weight: 850;
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}
.r3-chat-analysis-view:hover:not(:disabled),
.r3-chat-analysis-view:focus-visible {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 22%, var(--panel-2));
  color: var(--ink);
}
.r3-chat-analysis-view:disabled {
  opacity: .42;
  cursor: not-allowed;
}
.r3-chat-analysis-modal {
  width: min(760px, calc(100vw - 28px));
  max-width: min(760px, calc(100vw - 28px));
  max-height: min(84dvh, 780px);
  overflow: hidden;
  box-sizing: border-box;
}
.r3-chat-analysis-modal .r3-chat-analysis-card {
  width: 100%;
  max-width: none;
  min-width: 0;
  max-height: min(84dvh, 780px);
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  box-sizing: border-box;
}
.r3-chat-analysis-modal [data-chat-analysis-meta] {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.r3-chat-analysis-modal [data-chat-analysis-meta] span {
  border: 1px solid var(--soft-line);
  background: var(--bg);
  padding: 5px 7px;
  color: var(--muted);
  font-size: 10px;
  overflow-wrap: anywhere;
}
.r3-chat-analysis-modal [data-chat-analysis-text] {
  min-height: 0;
  max-height: min(62dvh, 620px);
  overflow: auto;
  overscroll-behavior: contain;
}
@media (max-width: 720px) {
  .r3-chat-analysis-modal {
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
  }
  .r3-chat-analysis-modal .r3-chat-analysis-card {
    max-height: calc(100dvh - 16px);
  }
}
.r3-chat-typing {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.r3-chat-typing span {
  width: 6px;
  height: 6px;
  border: 1px solid var(--line);
  background: var(--accent);
  animation: dotWork .85s ease-in-out infinite alternate;
}
.r3-chat-typing span:nth-child(2) { animation-delay: .12s; }
.r3-chat-typing span:nth-child(3) { animation-delay: .24s; }
@media (max-width: 920px) {
  .r3-chat-shell { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .r3-chat-sidebar { max-height: 260px; border-right: 0; border-bottom: 1px solid var(--line); }
  .r3-chat-bubble { max-width: calc(100vw - 82px); }
  .r3-chat-composer {
    grid-template-columns: 1fr;
    grid-template-areas:
      "attachments"
      "input"
      "hint"
      "send";
  }
  .r3-chat-send { width: 100%; }
}

.r3-chat-live-run {
  margin-top: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 52%, var(--soft-line));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 11%, transparent), transparent 70%),
    color-mix(in srgb, var(--bg) 82%, transparent);
  box-shadow: 3px 3px 0 var(--shadow);
  padding: 11px;
  display: grid;
  gap: 10px;
}
/* Keep the Chat live-run geometry stable before its first activity/summary arrives. */
.r3-chat-live-run-slim {
  width: 520px;
  max-width: 100%;
  box-sizing: border-box;
}
/* Oracle mode shares the same stable geometry. */
.r3-chat-live-run-slim.is-oracle-view {
  width: 520px;
  max-width: 100%;
  box-sizing: border-box;
}
.r3-chat-live-head,
.r3-chat-live-current {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  border: 1px solid color-mix(in srgb, var(--soft-line) 84%, transparent);
  background: color-mix(in srgb, var(--panel) 76%, transparent);
  padding: 10px;
  box-shadow: 2px 2px 0 var(--shadow);
}
.r3-chat-live-head small,
.r3-chat-live-current small {
  display: block;
  color: var(--accent);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 3px;
}
.r3-chat-live-head b,
.r3-chat-live-current b {
  display: block;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.r3-chat-live-head span:not(.r3-chat-live-tool),
.r3-chat-live-current span:not(.r3-chat-live-tool) {
  display: block;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.r3-chat-live-tool {
  align-self: start;
  border: 1px solid color-mix(in srgb, var(--accent) 70%, var(--line));
  background: color-mix(in srgb, var(--accent) 16%, var(--panel));
  color: var(--accent);
  padding: 5px 7px;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .1em;
  text-transform: uppercase;
  box-shadow: 2px 2px 0 var(--shadow);
}
.r3-chat-live-tool.muted {
  color: var(--muted);
  border-color: var(--soft-line);
  background: var(--panel);
}
.r3-chat-live-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}
.r3-chat-live-metrics > div {
  border: 1px solid color-mix(in srgb, var(--soft-line) 84%, transparent);
  background: color-mix(in srgb, var(--panel) 72%, transparent);
  padding: 8px;
  min-width: 0;
  box-shadow: 2px 2px 0 var(--shadow);
}
.r3-chat-live-metrics b {
  display: block;
  color: var(--accent);
  font-size: 13px;
  line-height: 1.1;
  white-space: nowrap;
}
.r3-chat-live-metrics span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.r3-chat-live-tools-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--accent);
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.r3-chat-live-tools-head small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
}
.r3-chat-live-tools {
  display: grid;
  gap: 6px;
  max-height: 172px;
  overflow: auto;
  padding-right: 2px;
}
.r3-chat-live-tool-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--soft-line) 82%, transparent);
  background: color-mix(in srgb, var(--panel) 72%, transparent);
  padding: 7px 8px;
  color: inherit;
  font: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}
.r3-chat-live-tool-row:hover,
.r3-chat-live-tool-row:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 62%, var(--soft-line));
  background: color-mix(in srgb, var(--accent) 8%, var(--panel));
  outline: none;
}
.r3-chat-live-tool-row.is-pending {
  border-color: color-mix(in srgb, var(--accent) 76%, var(--soft-line));
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 13%, var(--panel)), var(--panel));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent), 2px 2px 0 var(--shadow);
}
.r3-chat-live-tool-icon {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid var(--soft-line);
  background: var(--bg);
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
}
.r3-chat-live-tool-row.is-pending .r3-chat-live-tool-icon {
  animation: r3d3LivePulse 1.05s ease-in-out infinite;
}
.r3-chat-live-tool-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.r3-chat-live-tool-copy b,
.r3-chat-live-tool-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.r3-chat-live-tool-copy b {
  color: var(--accent);
  font-size: 10px;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.r3-chat-live-tool-copy small {
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.25;
}
.r3-chat-live-tool-state {
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.r3-chat-live-idle-note {
  border: 1px dashed var(--soft-line);
  background: color-mix(in srgb, var(--panel) 70%, transparent);
  color: var(--muted);
  padding: 9px;
  font-size: 12px;
  line-height: 1.35;
}
.r3-chat-row.assistant .r3-chat-bubble .r3-chat-typing + .r3-chat-bubble-content {
  margin-top: 6px;
}
@media (max-width: 920px) {
  .r3-chat-live-run-slim { max-width: 100%; }
  .r3-chat-live-run-slim.is-oracle-view { width: 100%; }
  .r3-chat-live-head,
  .r3-chat-live-current { grid-template-columns: 1fr; }
  .r3-chat-live-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .r3-chat-live-tool { justify-self: start; max-width: 100%; }
  .r3-chat-live-tool-row { grid-template-columns: 24px minmax(0, 1fr); }
  .r3-chat-live-tool-state { grid-column: 2; justify-self: start; }
}

/* End chat view + route choice UI */

/* R3D3 chat clear boolean fix 2026-06-03 */

/* R3D3 chat active tool slim 2026-06-03 */


/* Flow library + toolbar refresh 2026-06-03 */
.topbar-v2 {
  min-height: 62px;
  padding: 8px 12px;
  gap: 12px;
  background:
    radial-gradient(circle at 15% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--panel) 92%, var(--accent) 8%), var(--panel));
}
.brand-link {
  color: inherit;
  text-decoration: none;
  align-items: center;
  min-width: max-content;
}
.brand-link .brand-mark {
  display: inline-grid;
  place-items: center;
  min-width: 78px;
  min-height: 36px;
  border: 1px solid var(--line);
  background: var(--bg);
  box-shadow: 3px 3px 0 var(--shadow);
}
.toolbar-v2 {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
}
.top-action-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px;
  border: 1px solid var(--soft-line);
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  box-shadow: 2px 2px 0 var(--shadow);
}
.run-action-group { margin-left: auto; border-color: color-mix(in srgb, var(--accent) 52%, var(--soft-line)); }
.toolbar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 34px;
  padding: 7px 9px;
  box-shadow: none;
  white-space: nowrap;
}
.toolbar-btn span[aria-hidden="true"] {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  border: 1px solid var(--soft-line);
  background: color-mix(in srgb, var(--panel) 76%, transparent);
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
}
.toolbar-btn b {
  font-size: 12px;
  line-height: 1;
}
.toolbar-btn.icon-only { width: 36px; padding-inline: 6px; }
.logout-btn {
  border-color: color-mix(in srgb, var(--danger) 52%, var(--line));
  background: color-mix(in srgb, var(--panel-2) 88%, var(--danger) 12%);
  color: var(--ink);
}
.logout-btn span[aria-hidden="true"] {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 48%, var(--soft-line));
}
.logout-btn:hover:not(:disabled),
.logout-btn:focus-visible:not(:disabled) {
  background: color-mix(in srgb, var(--panel-2) 78%, var(--danger) 22%);
  border-color: var(--danger);
}
.toolbar-btn.accent-soft {
  border-color: color-mix(in srgb, var(--accent) 72%, var(--line));
  background: color-mix(in srgb, var(--accent) 16%, var(--panel-2));
}
.run-btn {
  min-width: 76px;
}
.flow-library-body {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .95fr);
}
.flow-library-wide {
  grid-column: 1 / -1;
}
.flow-library-cardlet {
  position: relative;
  overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}
.flow-library-cardlet::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: color-mix(in srgb, var(--accent) 74%, transparent);
}
.flow-library-cardlet:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 5px 5px 0 var(--shadow);
}
.flow-kind-global {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, var(--panel-2)), color-mix(in srgb, var(--panel-2) 92%, transparent));
}
.flow-status-pill {
  display: inline-flex;
  align-items: center;
  margin-left: 7px;
  padding: 2px 5px;
  border: 1px solid var(--soft-line);
  color: var(--muted);
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
  vertical-align: middle;
}
@media (max-width: 1220px) {
  .topbar-v2 { align-items: flex-start; height: auto; }
  .toolbar-v2 { flex-wrap: wrap; justify-content: flex-end; }
  .run-action-group { margin-left: 0; }
}
@media (max-width: 760px) {
  .topbar-v2 { position: sticky; top: 0; align-items: stretch; }
  .brand-link { justify-content: space-between; width: 100%; }
  .toolbar-v2, .top-action-group { width: 100%; }
  .top-action-group { justify-content: stretch; }
  .toolbar-btn { flex: 1 1 auto; min-width: 0; padding-inline: 7px; }
  .toolbar-btn b { font-size: 11px; }
  .ghost-on-mobile { display: none; }
  .flow-library-body { grid-template-columns: 1fr; }
  .flow-library-wide { grid-column: auto; }
}
.app-shell { grid-template-rows: auto 1fr; }


/* Mobile canvas + responsive polish 2026-06-03 */
@media (max-width: 760px) {
  html, body {
    min-height: 100%;
    overflow-x: hidden;
  }

  body {
    overflow-y: auto;
    background:
      radial-gradient(circle at 20% -10%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 34%),
      var(--bg);
  }

  .app-shell {
    min-height: 100svh;
    height: auto;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(64svh, 760px) auto auto;
    grid-template-areas:
      "top"
      "canvas"
      "left"
      "right";
    gap: 0;
  }

  .topbar-v2 {
    position: sticky;
    top: 0;
    z-index: 80;
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 8px;
    min-height: 0;
    padding: calc(8px + env(safe-area-inset-top, 0px)) 9px 8px;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
    box-shadow: 0 8px 22px color-mix(in srgb, var(--shadow) 85%, transparent);
    backdrop-filter: blur(12px);
  }

  .brand-link {
    width: 100%;
    min-width: 0;
    justify-content: space-between;
    gap: 8px;
  }

  .brand-link .brand-mark {
    min-width: 58px;
    min-height: 30px;
    font-size: 16px;
    letter-spacing: .12em;
    box-shadow: 2px 2px 0 var(--shadow);
  }

  .build-pill {
    max-width: 48vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
    padding: 3px 6px;
  }

  .toolbar-v2 {
    width: calc(100vw - 18px);
    max-width: calc(100vw - 18px);
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 2px 7px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  .toolbar-v2::after {
    content: '';
    flex: 0 0 1px;
  }

  .top-action-group {
    flex: 0 0 auto;
    width: auto;
    min-width: max-content;
    justify-content: flex-start;
    gap: 5px;
    padding: 4px;
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    box-shadow: 1px 1px 0 var(--shadow);
    scroll-snap-align: start;
  }

  .run-action-group {
    order: -1;
    border-color: color-mix(in srgb, var(--accent) 68%, var(--soft-line));
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 11%, var(--bg)), color-mix(in srgb, var(--bg) 84%, transparent));
  }

  .toolbar-btn {
    flex: 0 0 auto;
    min-width: 54px;
    min-height: 36px;
    padding: 6px 8px;
    gap: 5px;
    box-shadow: none;
  }

  .toolbar-btn span[aria-hidden="true"] {
    min-width: 20px;
    height: 20px;
    font-size: 10px;
  }

  .toolbar-btn b {
    font-size: 10.5px;
    letter-spacing: .01em;
  }

  .toolbar-btn.icon-only {
    width: 36px;
    min-width: 36px;
  }

  .ghost-on-mobile {
    display: inline-flex;
  }

  .canvas-wrap {
    min-height: 64svh;
    height: min(760px, 72svh);
    margin: 9px;
    border: 1px solid var(--line);
    box-shadow: 4px 4px 0 var(--shadow);
    background-size: 34px 34px;
    overscroll-behavior: contain;
  }

  .canvas-wrap::after {
    right: 8px;
    bottom: 8px;
    font-size: 10px;
    padding: 4px 6px;
    background: color-mix(in srgb, var(--panel) 94%, transparent);
  }

  .canvas-hint {
    left: 8px;
    right: auto;
    bottom: 8px;
    max-width: calc(100% - 76px);
    padding: 6px 7px;
    font-size: 10.5px;
    line-height: 1.28;
    box-shadow: 2px 2px 0 var(--shadow);
  }

  .canvas-hint::before {
    content: 'Canvas: ';
    color: var(--accent);
    font-weight: 900;
  }

  .left-panel,
  .right-panel {
    border: 0;
    background: transparent;
    overflow: visible;
    padding: 0 9px 9px;
  }

  .right-panel {
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  }

  .panel-section {
    margin: 8px 0;
    padding: 0;
    border-color: color-mix(in srgb, var(--soft-line) 86%, transparent);
    box-shadow: 2px 2px 0 var(--shadow);
  }

  .panel-summary,
  .option-fold > summary {
    min-height: 42px;
    padding: 10px;
  }

  .panel-content,
  .option-fold-content {
    padding: 10px;
  }

  .node-palette-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .node-palette {
    min-height: 48px;
    padding: 6px 5px;
    font-size: 11px;
    box-shadow: 1px 1px 0 var(--shadow);
  }

  .global-prompt-section textarea {
    min-height: 92px;
    max-height: 150px;
  }

  .file-list {
    max-height: 190px;
  }

  .file-item {
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
    padding: 8px;
  }

  .file-actions {
    justify-content: flex-start;
  }

  .file-mini {
    min-height: 28px;
    padding: 5px 7px;
  }

  .r3-node {
    width: min(292px, calc(100vw - 44px));
    max-height: min(70svh, 520px);
  }

  .node-head {
    min-height: 42px;
    height: auto;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "title tools"
      "timer tools";
    row-gap: 3px;
    padding: 6px 7px;
  }

  .node-title-wrap { grid-area: title; }
  .node-timer {
    grid-area: timer;
    justify-self: start;
    min-width: 58px;
    height: 16px;
  }
  .node-head-tools { grid-area: tools; }

  .node-body {
    margin: 8px;
    max-height: 118px;
  }

  .node-tools {
    padding: 0 8px 8px;
    max-height: 210px;
  }

  .tool-tip {
    display: none;
  }

  .option-actions {
    grid-template-columns: 1fr;
  }

  .viewer-head,
  .viewer-foot {
    padding: 10px;
    align-items: flex-start;
  }

  .viewer-body {
    padding: 10px;
  }

  .r3-chat-shell {
    height: calc(100svh - 116px);
    min-height: 0;
  }

  .app-shell.chat-mode {
    min-height: 100svh;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .r3-chat-sidebar {
    max-height: 214px;
    overflow: auto;
  }

  .r3-chat-messages {
    padding: 14px 10px;
    gap: 12px;
  }

  .r3-chat-avatar {
    width: 28px;
    height: 28px;
    font-size: 9px;
  }

  .r3-chat-bubble {
    max-width: calc(100vw - 58px);
    padding: 11px;
    line-height: 1.48;
  }

  .r3-chat-composer {
    padding: 10px 9px calc(12px + env(safe-area-inset-bottom, 0px));
    gap: 8px;
  }

  .r3-chat-input {
    min-height: 46px;
    max-height: 132px;
  }
}

@media (max-width: 430px) {
  .toolbar-btn b {
    display: none;
  }

  .run-action-group .toolbar-btn b,
  .library-action-group .toolbar-btn:nth-child(-n + 2) b {
    display: inline;
  }

  .toolbar-btn {
    min-width: 42px;
    padding-inline: 6px;
  }

  .run-btn {
    min-width: 66px;
  }

  .canvas-wrap {
    height: 68svh;
    min-height: 420px;
  }

  .canvas-hint {
    max-width: calc(100% - 70px);
  }
}


/* Mobile rescue layout from user video 2026-06-03
   Fixes phone/webview cases where only the 980px layout applies: the toolbar stacks,
   the canvas becomes the primary surface, and panels become full-width cards below it. */
html.r3-mobile-device,
html.r3-mobile-device body {
  min-height: 100%;
  overflow-x: hidden !important;
}

html.r3-mobile-device body {
  overflow-y: auto !important;
  background:
    radial-gradient(circle at 18% -12%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 36%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 94%, #000 6%), var(--bg));
}

html.r3-mobile-device .app-shell:not(.chat-mode) {
  width: 100% !important;
  max-width: 100vw !important;
  min-height: 100svh !important;
  height: auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto minmax(58svh, 620px) auto auto !important;
  grid-template-areas:
    "top"
    "canvas"
    "left"
    "right" !important;
  overflow-x: hidden !important;
}

html.r3-mobile-device .topbar-v2 {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  gap: 8px !important;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 9px 9px !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--panel) 88%, var(--accent) 8%), color-mix(in srgb, var(--panel) 96%, #000 4%)) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 86%, transparent) !important;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--shadow) 80%, transparent) !important;
}

html.r3-mobile-device .brand-link {
  width: 100% !important;
  min-width: 0 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 8px !important;
}

html.r3-mobile-device .brand-link .brand-mark {
  min-width: 64px !important;
  min-height: 32px !important;
  font-size: 17px !important;
  line-height: 1 !important;
  letter-spacing: .12em !important;
  box-shadow: 2px 2px 0 var(--shadow) !important;
}

html.r3-mobile-device .build-pill {
  max-width: 48vw !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 10px !important;
}

html.r3-mobile-device .toolbar-v2 {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 1px 2px 7px !important;
  scroll-snap-type: x proximity !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
}

html.r3-mobile-device .toolbar-v2::-webkit-scrollbar { display: none; }


html.r3-mobile-device .run-action-group {
  order: -1 !important;
  margin-left: 0 !important;
  border-color: color-mix(in srgb, var(--accent) 70%, var(--soft-line)) !important;
}

html.r3-mobile-device .top-action-group {
  display: inline-flex !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 5px !important;
  padding: 4px !important;
  background: color-mix(in srgb, var(--bg) 84%, transparent) !important;
  box-shadow: 1px 1px 0 var(--shadow) !important;
}

html.r3-mobile-device .toolbar-btn {
  flex: 0 0 auto !important;
  min-width: 42px !important;
  min-height: 38px !important;
  padding: 6px 7px !important;
  gap: 5px !important;
  box-shadow: none !important;
}

html.r3-mobile-device .toolbar-btn span[aria-hidden="true"] {
  min-width: 20px !important;
  height: 20px !important;
  font-size: 10px !important;
}

html.r3-mobile-device .toolbar-btn b {
  display: none !important;
  font-size: 10.5px !important;
}

html.r3-mobile-device .run-action-group .toolbar-btn b,
html.r3-mobile-device .library-action-group .toolbar-btn:nth-child(-n + 3) b {
  display: inline !important;
}

html.r3-mobile-device .ghost-on-mobile { display: none !important; }

html.r3-mobile-device .canvas-wrap {
  grid-area: canvas !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 58svh !important;
  height: min(680px, 64svh) !important;
  margin: 9px !important;
  border: 1px solid var(--line) !important;
  box-shadow: 4px 4px 0 var(--shadow) !important;
  background-size: 34px 34px !important;
  overscroll-behavior: contain !important;
}

html.r3-mobile-device .canvas-hint {
  left: 8px !important;
  right: auto !important;
  bottom: 8px !important;
  max-width: calc(100% - 74px) !important;
  padding: 6px 7px !important;
  font-size: 10.5px !important;
  line-height: 1.25 !important;
  background: color-mix(in srgb, var(--panel) 94%, transparent) !important;
  box-shadow: 2px 2px 0 var(--shadow) !important;
}

html.r3-mobile-device .canvas-wrap::after {
  right: 8px !important;
  bottom: 8px !important;
  font-size: 10px !important;
  padding: 4px 6px !important;
}

html.r3-mobile-device .left-panel,
html.r3-mobile-device .right-panel {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100vw !important;
  border: 0 !important;
  background: transparent !important;
  overflow: visible !important;
  padding: 0 9px 9px !important;
}

html.r3-mobile-device .right-panel {
  padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
}

html.r3-mobile-device .panel-section {
  margin: 8px 0 !important;
  padding: 0 !important;
  border: 1px solid color-mix(in srgb, var(--soft-line) 86%, transparent) !important;
  background: color-mix(in srgb, var(--panel) 96%, transparent) !important;
  box-shadow: 2px 2px 0 var(--shadow) !important;
}

html.r3-mobile-device .panel-summary,
html.r3-mobile-device .option-fold > summary {
  min-height: 42px !important;
  padding: 10px !important;
}

html.r3-mobile-device .panel-content,
html.r3-mobile-device .option-fold-content {
  padding: 10px !important;
}

html.r3-mobile-device .file-list { max-height: 220px !important; }

html.r3-mobile-device .file-item {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 7px !important;
  padding: 8px !important;
}

html.r3-mobile-device .file-actions { justify-content: flex-start !important; }
html.r3-mobile-device .file-mini { min-height: 28px !important; padding: 5px 7px !important; }

html.r3-mobile-device .node-palette-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

html.r3-mobile-device .node-palette {
  min-height: 48px !important;
  padding: 6px 5px !important;
  font-size: 11px !important;
  box-shadow: 1px 1px 0 var(--shadow) !important;
}

html.r3-mobile-device .global-prompt-section textarea {
  min-height: 92px !important;
  max-height: 150px !important;
}

html.r3-mobile-device .r3-node {
  width: min(292px, calc(100vw - 44px)) !important;
  max-height: min(70svh, 520px) !important;
}

html.r3-mobile-device .node-head {
  min-height: 42px !important;
  height: auto !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas:
    "title tools"
    "timer tools" !important;
  row-gap: 3px !important;
  padding: 6px 7px !important;
}

html.r3-mobile-device .node-title-wrap { grid-area: title !important; }
html.r3-mobile-device .node-timer {
  grid-area: timer !important;
  justify-self: start !important;
  min-width: 58px !important;
  height: 16px !important;
}
html.r3-mobile-device .node-head-tools { grid-area: tools !important; }
html.r3-mobile-device .node-body { margin: 8px !important; max-height: 118px !important; }
html.r3-mobile-device .node-tools { padding: 0 8px 8px !important; max-height: 210px !important; }
html.r3-mobile-device .tool-tip { display: none !important; }
html.r3-mobile-device .option-actions { grid-template-columns: 1fr !important; }

@media (max-width: 430px) {
  html.r3-mobile-device .app-shell:not(.chat-mode) {
    grid-template-rows: auto minmax(52svh, 460px) auto auto !important;
  }
  html.r3-mobile-device .canvas-wrap {
    height: 54svh !important;
    min-height: 430px !important;
  }
  html.r3-mobile-device .brand-link .brand-mark {
    min-width: 60px !important;
    font-size: 16px !important;
  }
}


/* Active route wire glow — pass94 */
.wire,
.wire-glow {
  transition: stroke .18s ease, stroke-width .18s ease, opacity .18s ease, filter .18s ease;
}
.wire-glow {
  stroke: var(--accent);
  stroke-width: 9;
  fill: none;
  stroke-linecap: square;
  opacity: .26;
  filter: blur(1.2px) drop-shadow(0 0 7px color-mix(in srgb, var(--accent) 52%, transparent));
  pointer-events: none;
}
.wire.wire-ran {
  stroke: var(--accent);
  stroke-width: 3.25;
  opacity: 1;
  filter:
    drop-shadow(0 0 4px color-mix(in srgb, var(--accent) 82%, transparent))
    drop-shadow(0 0 11px color-mix(in srgb, var(--accent) 42%, transparent));
}
.wire.wire-ran.active {
  stroke-width: 4.25;
}
html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .wire-glow {
  opacity: .34;
  filter: blur(1.4px) drop-shadow(0 0 10px color-mix(in srgb, var(--accent) 64%, transparent));
}
html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .wire.wire-ran {
  filter:
    drop-shadow(0 0 5px color-mix(in srgb, var(--accent) 92%, transparent))
    drop-shadow(0 0 15px color-mix(in srgb, var(--accent) 52%, transparent));
}
@media (prefers-reduced-motion: no-preference) {
  .wire-glow {
    animation: r3d3WireRouteGlow 1.8s ease-in-out infinite alternate;
  }
}
@keyframes r3d3WireRouteGlow {
  from {
    filter:
      blur(1px)
      drop-shadow(0 0 4px color-mix(in srgb, var(--accent) 56%, transparent))
      drop-shadow(0 0 8px color-mix(in srgb, var(--accent) 24%, transparent));
  }
  to {
    filter:
      blur(1.3px)
      drop-shadow(0 0 7px color-mix(in srgb, var(--accent) 78%, transparent))
      drop-shadow(0 0 15px color-mix(in srgb, var(--accent) 40%, transparent));
  }
}


/* Live preview refresh/cache-bust hardening 2026-06-05 */


/* Contract evidence + browser probe reliability increment */
.tool-bubble.tool-status-needs_evidence,
.tool-card .tool-card-icon {
  font-variant-numeric: tabular-nums;
}
.tool-bubble.tool-status-needs_evidence {
  border-color: color-mix(in srgb, var(--danger) 62%, var(--line));
  background: color-mix(in srgb, var(--panel-2) 82%, var(--danger) 8%);
}
.tool-bubble.tool-status-needs_evidence .bubble-icon,
.tool-bubble.tool-status-needs_evidence .bubble-copy b {
  color: var(--danger);
}
.r3-browser-probe-modal:not(.probe-hidden-mode) {
  z-index: 170;
}
.r3-browser-probe-modal:not(.probe-hidden-mode) .browser-probe-title strong::after {
  content: " · visible";
  color: var(--accent);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.viewer-dl dd {
  overflow-wrap: anywhere;
}

/* R3D3 BUILD: simple stability + loop guard 2026-06-14 */

/* Flow Library add-to-project + run log copy polish 2026-06-16 */
.runlog-summary {
  grid-template-columns: 26px minmax(0, 1fr) auto auto;
}
.panel-summary-action {
  min-height: 26px;
  padding: 4px 8px;
  letter-spacing: normal;
  text-transform: none;
  justify-self: end;
}
.panel-summary-action:hover {
  color: var(--accent-ink);
}
.flow-library-dialog {
  width: min(1120px, calc(100vw - 28px));
}
.flow-library-help {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}
.flow-library-cardlet {
  grid-template-columns: minmax(0, 1fr) minmax(170px, auto);
}
.flow-library-actions {
  justify-content: flex-end;
  flex-wrap: wrap;
  max-width: 270px;
}
.flow-library-actions .ui-btn {
  min-height: 30px;
  padding: 5px 8px;
  font-size: 11px;
}
.flow-library-actions .ui-btn.primary {
  min-width: 118px;
}
.flow-library-advanced {
  padding: 0;
  overflow: hidden;
}
.flow-library-advanced > summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 12px;
  border-bottom: 1px solid var(--soft-line);
  color: var(--accent);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
  user-select: none;
}
.flow-library-advanced > summary::-webkit-details-marker { display: none; }
.flow-library-json-tools {
  display: grid;
  gap: 9px;
  padding: 12px;
}
.flow-library-json-tools textarea {
  min-height: 150px;
  max-height: 260px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
}
@media (max-width: 860px) {
  .runlog-summary { grid-template-columns: 26px minmax(0, 1fr) auto auto; }
  .flow-library-cardlet { grid-template-columns: 1fr; }
  .flow-library-actions { justify-content: flex-start; max-width: none; }
}

/* Flow Library revisions + calmer tabbed UX 2026-06-16 */
.flow-library-dialog-v2 {
  width: min(1180px, calc(100vw - 24px));
}
.flow-library-card-v2 {
  max-height: min(88vh, 900px);
  overflow: hidden;
}
.flow-library-head-v2 {
  flex: 0 0 auto;
}
.flow-library-tabs {
  flex: 0 0 auto;
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel-2) 78%, transparent);
}
.flow-library-tab {
  border: 1px solid var(--soft-line);
  background: var(--panel);
  color: var(--ink);
  min-height: 32px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 2px 2px 0 var(--shadow);
}
.flow-library-tab:hover,
.flow-library-tab.is-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, var(--panel));
}
.flow-library-body-v2 {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px) !important;
  align-items: start;
  min-height: 0;
}
.flow-library-main-pane {
  min-width: 0;
  display: grid;
}
.flow-library-pane {
  display: none;
}
.flow-library-pane.is-active {
  display: grid;
  gap: 10px;
}
.flow-library-detail-panel {
  position: sticky;
  top: 0;
  align-self: start;
  max-height: min(68vh, 680px);
  overflow: auto;
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 88%, var(--panel) 12%);
  box-shadow: 4px 4px 0 var(--shadow);
  padding: 10px;
}
.flow-library-detail-head {
  display: grid;
  gap: 3px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--soft-line);
}
.flow-library-detail-head b {
  color: var(--ink);
  font-size: 14px;
  overflow-wrap: anywhere;
}
.flow-library-detail-head small,
.flow-library-detail-panel p {
  color: var(--muted);
  line-height: 1.4;
}
.flow-library-detail-actions {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  padding-top: 8px;
  border-top: 1px solid var(--soft-line);
}
.flow-library-compare,
.flow-library-revision-note {
  border: 1px solid color-mix(in srgb, var(--accent) 44%, var(--soft-line));
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--muted);
}
.flow-library-compare {
  display: grid;
  gap: 3px;
  padding: 9px;
  font-size: 12px;
  line-height: 1.35;
}
.flow-library-compare b { color: var(--accent); text-transform: uppercase; letter-spacing: .12em; font-size: 10px; }
.flow-library-compare span { color: var(--ink); }
.flow-library-revision-note {
  margin-top: 7px !important;
  padding: 6px 7px;
  font-size: 11px;
}
.flow-library-cardlet {
  grid-template-columns: minmax(0, 1fr) auto;
}
.flow-library-cardlet p {
  max-width: 68ch;
}
.flow-library-actions .ui-btn.subtle {
  opacity: .82;
}
.flow-library-foot-v2 {
  flex: 0 0 auto;
}
@media (max-width: 980px) {
  .flow-library-body-v2 {
    grid-template-columns: 1fr !important;
  }
  .flow-library-detail-panel {
    position: static;
    max-height: none;
  }
}
@media (max-width: 680px) {
  .flow-library-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-gutter: stable;
  }
  .flow-library-tab {
    flex: 0 0 auto;
  }
  .flow-library-cardlet {
    grid-template-columns: 1fr !important;
  }
  .flow-library-actions {
    justify-content: flex-start;
    max-width: none;
  }
}

/* Project delete, stable library sizing, custom dialogs, and setup polish 2026-06-16 */
.project-actions-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 8px; }
.project-actions-row .ui-btn { white-space: nowrap; }
.flow-library-dialog-v2 { width: min(1180px, calc(100vw - 32px)); height: min(820px, calc(100vh - 56px)); max-height: calc(100vh - 56px); }
.flow-library-dialog-v2 .viewer-card, .flow-library-card-v2 { height: 100%; max-height: none; grid-template-rows: auto auto minmax(0, 1fr) auto; }
.flow-library-body-v2 { min-height: 0; overflow: hidden; padding: 14px !important; }
.flow-library-main-pane, .flow-library-pane.is-active { min-height: 0; }
.flow-library-pane.is-active { grid-template-rows: auto auto minmax(0, 1fr); overflow: hidden; }
.flow-library-pane > .flow-library-help { margin: 0; padding: 10px 12px 12px; border-bottom: 1px solid var(--soft-line); }
.flow-library-pane > .flow-library-list { min-height: 0; overflow: auto; padding: 12px; scrollbar-gutter: stable; }
.flow-library-pane > .flow-library-select { margin: 0; padding: 10px 12px 12px; border-bottom: 1px solid var(--soft-line); }
.flow-library-pane[data-flow-pane="advanced"] .flow-library-json-tools { padding: 12px; overflow: auto; }
.flow-library-cardlet { padding: 12px; }
.flow-library-cardlet p { margin: 6px 0 0; }
.flow-library-detail-panel { height: 100%; max-height: none; min-height: 0; }
.flow-library-foot-v2 { padding: 12px 14px; }
.r3-action-dialog { width: min(560px, calc(100vw - 28px)); padding: 0; border: 1px solid var(--line); background: var(--panel); color: var(--ink); box-shadow: 10px 10px 0 var(--shadow); }
.r3-action-dialog::backdrop { background: rgba(0,0,0,.52); backdrop-filter: blur(2px); }
.r3-action-card { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; max-height: min(86vh, 720px); }
.r3-action-head, .r3-action-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 15px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--panel-2) 76%, transparent); }
.r3-action-foot { justify-content: flex-end; border-top: 1px solid var(--line); border-bottom: 0; }
.r3-action-head strong { display: block; font-size: 16px; }
.r3-action-head span { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; line-height: 1.35; }
.r3-action-body { display: grid; gap: 12px; padding: 15px; overflow: auto; }
.r3-action-body label { margin: 0; }
.r3-action-body textarea { min-height: 110px; }
.r3-action-check { display: grid !important; grid-template-columns: auto minmax(0, 1fr); align-items: start !important; padding: 10px; border: 1px solid var(--soft-line); background: var(--bg); }

/* Flow publish dialog clarity — pass43 2026-06-27
   The canvas-content checkbox is hidden unless it is actionable, and its copy explains exactly when nodes are replaced. */
.r3-action-check.hidden,
.r3-action-check[hidden] {
  display: none !important;
}
.r3-action-check-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.r3-action-check-copy b {
  font-size: 12px;
  line-height: 1.25;
}
.r3-action-check-copy small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.r3-action-warning { margin: 0; padding: 9px 10px; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--soft-line)); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.r3-action-card.is-danger .r3-action-warning { border-color: color-mix(in srgb, var(--danger) 65%, var(--soft-line)); background: color-mix(in srgb, var(--danger) 10%, transparent); }
.r3-action-foot .ui-btn.danger, .ui-btn.primary.danger { background: var(--danger); color: #fff; border-color: var(--danger); }
.setup-dialog-v2 { width: min(760px, calc(100vw - 32px)); }
.setup-form-v2 { padding: 0 !important; max-height: min(88vh, 820px); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; }
.setup-head-v2 { padding: 18px 20px; border-bottom: 1px solid var(--line); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent 58%), var(--panel-2); }
.setup-head-v2 h2 { margin: 0 0 4px; }
.setup-head-v2 p { margin: 0; color: var(--muted); }
.setup-grid-v2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; padding: 16px; overflow: auto; }
.setup-card-v2 { display: grid; gap: 10px; align-content: start; border: 1px solid var(--soft-line); background: color-mix(in srgb, var(--bg) 84%, var(--panel) 16%); padding: 12px; box-shadow: 3px 3px 0 var(--shadow); }
.setup-card-wide { grid-column: 1 / -1; }
.setup-card-v2 h3 { margin: 0; padding-bottom: 7px; border-bottom: 1px solid var(--soft-line); color: var(--accent); font-size: 11px; letter-spacing: .13em; text-transform: uppercase; }
.setup-card-v2 label { margin: 0; }
.setup-probe-card .compact-check,
.setup-run-view-card .compact-check { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 9px; padding: 9px; border: 1px solid var(--soft-line); background: var(--panel); }
.setup-probe-card .compact-check input,
.setup-run-view-card .compact-check input { margin-top: 2px; }
.setup-status-card { gap: 8px; }
.setup-model-row { align-items: center; }
.setup-form-v2 menu { margin: 0 !important; padding: 13px 16px !important; border-top: 1px solid var(--line); background: var(--panel-2); }
@media (max-width: 760px) {
  .flow-library-dialog-v2 { width: calc(100vw - 14px); height: calc(100vh - 24px); max-height: calc(100vh - 24px); }
  .flow-library-body-v2 { overflow: auto; }
  .setup-grid-v2 { grid-template-columns: 1fr; }
  .setup-card-wide { grid-column: auto; }
  .project-actions-row { grid-template-columns: 1fr auto auto auto; }
}

.flow-library-pane[data-flow-pane="projects"].is-active { grid-template-rows: auto auto auto minmax(0, 1fr); }
.flow-library-pane[data-flow-pane="advanced"].is-active { grid-template-rows: auto auto minmax(0, 1fr); }

/* Voice dictation UI alignment polish 2026-06-16 */
.voice-dictation-field {
  position: relative;
}
.voice-dictation-wrap {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
}
.voice-dictation-wrap textarea.voice-dictation-target,
.r3-chat-input-wrap.voice-dictation-field textarea.voice-dictation-target {
  padding-right: 54px;
}
.voice-dictation-wrap textarea.voice-dictation-target {
  display: block;
  width: 100%;
}
.voice-dictation-controls {
  position: absolute;
  right: 8px;
  top: 8px;
  display: inline-flex;
  align-items: flex-start;
  flex-direction: row-reverse;
  gap: 7px;
  z-index: 8;
  pointer-events: none;
}
.r3-chat-input-wrap.voice-dictation-field .voice-dictation-controls {
  top: 9px;
  right: 9px;
}
.voice-dictation-btn {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 88%, var(--accent) 8%);
  color: var(--ink);
  box-shadow: 2px 2px 0 var(--shadow);
  font-size: 15px;
  line-height: 1;
  padding: 0;
  pointer-events: auto;
}
.voice-dictation-btn:hover:not(.is-unavailable) {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--shadow);
}
.voice-dictation-btn.is-listening {
  border-color: var(--danger);
  color: #fff;
  background: color-mix(in srgb, var(--danger) 78%, var(--accent) 22%);
  animation: voiceListenPulse 1s ease-in-out infinite alternate;
}
.voice-dictation-btn.is-unavailable {
  opacity: .48;
  cursor: help;
}
.voice-dictation-status {
  display: none;
  max-width: min(280px, 44vw);
  border: 1px solid var(--soft-line);
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  color: var(--muted);
  box-shadow: 2px 2px 0 var(--shadow);
  padding: 5px 7px;
  font-size: 10.5px;
  line-height: 1.25;
  text-transform: none;
  letter-spacing: normal;
  white-space: normal;
  pointer-events: none;
}
.voice-dictation-status.has-status {
  display: inline-block;
}
.voice-dictation-status.is-fading {
  opacity: .85;
}
.r3-chat-input-wrap .voice-dictation-status {
  max-width: min(360px, 54vw);
}
@keyframes voiceListenPulse {
  from { filter: brightness(1); transform: translateY(0); }
  to { filter: brightness(1.22); transform: translateY(-1px); }
}
@media (max-width: 760px) {
  .voice-dictation-controls {
    right: 7px;
    top: 7px;
  }
  .voice-dictation-btn {
    width: 30px;
    height: 30px;
  }
  .voice-dictation-status {
    max-width: 56vw;
  }
  .r3-chat-composer {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

/* Release polish: memory, run summaries, route labels, undo/autosave, library search 2026-06-16 */
.save-state-pill {
  align-self: center;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 8px;
  border: 1px solid var(--soft-line);
  background: var(--bg);
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 2px 2px 0 var(--shadow);
}
.save-state-pill[data-state="dirty"] { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 58%, var(--soft-line)); }
.save-state-pill[data-state="saving"],
.save-state-pill[data-state="autosaving"] { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 58%, var(--soft-line)); }
.save-state-pill[data-state="error"] { color: #fff; background: var(--danger); border-color: var(--danger); }

.node-reason-chip {
  margin: 0 9px 7px;
  padding: 5px 6px;
  border: 1px solid var(--soft-line);
  background: color-mix(in srgb, var(--panel) 74%, var(--bg));
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.28;
  overflow-wrap: anywhere;
}
.node-reason-chip b { color: var(--accent); }
.node-reason-skipped { border-color: color-mix(in srgb, var(--danger) 40%, var(--soft-line)); }
.node-reason-error { background: color-mix(in srgb, var(--danger) 10%, var(--panel)); }
.node-reason-running { border-color: color-mix(in srgb, var(--accent) 55%, var(--soft-line)); }

.wire-label {
  pointer-events: none;
  paint-order: stroke fill;
  stroke: var(--panel);
  stroke-width: 5px;
  fill: var(--muted);
  font: 900 11px/1 var(--font);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.wire-label.is-active { fill: var(--accent); }
.wire-label.is-inactive { fill: var(--danger); opacity: .78; }

.run-summary-card {
  display: grid;
  gap: 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 50%, var(--soft-line));
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent 60%), var(--bg);
  box-shadow: 3px 3px 0 var(--shadow);
  padding: 10px;
}
.run-summary-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--soft-line);
  padding-bottom: 7px;
}
.run-summary-card header strong { color: var(--accent); text-transform: uppercase; letter-spacing: .12em; font-size: 11px; }
.run-summary-card header span { color: var(--muted); font-size: 11px; }
.run-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.run-summary-grid div {
  border: 1px solid var(--soft-line);
  background: var(--panel);
  padding: 6px;
  display: grid;
  gap: 2px;
  text-align: center;
}
.run-summary-grid b { color: var(--ink); font-size: 15px; }
.run-summary-grid small,
.run-summary-line b,
.run-summary-warnings b { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.run-summary-line {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
  font-size: 12px;
}
.run-summary-line span { overflow-wrap: anywhere; }
.run-summary-warnings {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.run-summary-warnings span {
  border: 1px solid var(--soft-line);
  background: var(--panel);
  padding: 3px 5px;
  color: var(--muted);
  font-size: 11px;
}
.run-summary-card details {
  border: 1px solid var(--soft-line);
  background: var(--panel);
}
.run-summary-card summary {
  cursor: pointer;
  padding: 7px 8px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.run-summary-card ol { margin: 0; padding: 8px 8px 8px 28px; display: grid; gap: 5px; }
.run-summary-card li b { display: block; color: var(--ink); }
.run-summary-card li small { color: var(--muted); line-height: 1.3; }
.run-summary-chat { margin-top: 10px; }

.r3-chat-run-settings label { margin-bottom: 8px; }
.r3-chat-run-status {
  border: 1px solid var(--soft-line);
  background: var(--bg);
  color: var(--muted);
  padding: 7px 8px;
  font-size: 11px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.release-guide-btn { border-color: color-mix(in srgb, var(--accent) 50%, var(--soft-line)); }
.release-guide-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.release-guide-body section {
  border: 1px solid var(--soft-line);
  background: var(--bg);
  padding: 10px;
  box-shadow: 2px 2px 0 var(--shadow);
}
.release-guide-body b { color: var(--accent); text-transform: uppercase; letter-spacing: .1em; font-size: 11px; }
.release-guide-body p { margin: 5px 0 0; color: var(--muted); line-height: 1.45; }
.r3-confirm-detail {
  margin: 0;
  max-height: 260px;
  overflow: auto;
  white-space: pre-wrap;
  color: var(--ink);
  font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
  border: 1px solid var(--soft-line);
  background: var(--bg);
  padding: 10px;
}

.flow-library-searchbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
  padding: 10px 12px;
  border-bottom: 1px solid var(--soft-line);
  background: color-mix(in srgb, var(--panel) 82%, var(--bg));
}
.flow-library-searchbar label { margin: 0; }
.flow-library-searchbar span {
  border: 1px solid var(--soft-line);
  background: var(--bg);
  padding: 8px 9px;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
  white-space: nowrap;
}
.flow-library-cardlet.is-filtered-out { display: none !important; }

@media (max-width: 760px) {
  .save-state-pill { display: none; }
  .release-guide-body { grid-template-columns: 1fr; }
  .flow-library-searchbar { grid-template-columns: 1fr; }
  .run-summary-grid { grid-template-columns: 1fr; }
}


/* Chat dedupe polish 2026-06-16: keep completed chat runs to answer + summary path only. */
.r3-chat-shell .r3-chat-trace { display: none !important; }
.r3-chat-sidebar .r3-chat-run-settings { margin-bottom: 0; }
.r3-chat-empty p { max-width: 720px; }

/* User input/yes-no nodes + multi-select drag polish 2026-06-16 */
.r3-node[data-type="UserInput"] .node-head {
  background: color-mix(in srgb, var(--accent) 58%, #315f52 42%);
}
.r3-node[data-type="UserYesNo"] .node-head {
  background: color-mix(in srgb, var(--accent) 54%, #6b4a2f 46%);
}
.r3-node[data-type="UserInput"] .node-body-label,
.r3-node[data-type="UserYesNo"] .node-body-label {
  color: var(--accent);
}
.node-palette[data-node-type="UserInput"]::before { content: '⌨'; }
.node-palette[data-node-type="UserYesNo"]::before { content: 'Y/N'; font-size: 10px; }
.r3-node.state-stopped {
  border-color: var(--danger) !important;
  opacity: .86;
}
.r3-node.state-stopped .node-head {
  background-image: linear-gradient(90deg, var(--danger), color-mix(in srgb, var(--danger) 70%, var(--line)));
}
.human-node-card {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, transparent), var(--bg));
}
.human-input-dialog {
  width: min(620px, calc(100vw - 28px));
}
.human-input-card {
  width: 100%;
  min-width: 0;
  overflow: hidden;
}
.human-input-body {
  display: grid;
  gap: 14px;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}
.human-input-body > * {
  min-width: 0;
  max-width: 100%;
}
.human-last-agent-output {
  display: grid;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}
.human-last-agent-output > b {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.2;
}
.human-last-agent-output pre {
  min-width: 0;
  max-width: 100%;
  max-height: min(34vh, 300px);
  margin: 0;
  padding: 11px 12px;
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid var(--soft-line);
  background: color-mix(in srgb, var(--bg) 88%, #000 12%);
  color: var(--ink);
  font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  scrollbar-gutter: stable;
}
.human-question-card {
  border: 1px solid var(--soft-line);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%),
    var(--bg);
  padding: 13px;
  box-shadow: 3px 3px 0 var(--shadow);
}
.human-question-card b {
  display: block;
  color: var(--accent);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 7px;
}
.human-question-card p {
  margin: 0;
  color: var(--ink);
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.human-input-dialog textarea {
  min-height: 150px;
  max-height: min(38vh, 320px);
  resize: vertical;
}
.human-choice-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  min-width: 0;
}
.human-choice-row .ui-btn {
  width: 100%;
  min-width: 0;
  min-height: 54px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.human-input-warning {
  border: 1px solid color-mix(in srgb, var(--danger) 60%, var(--soft-line));
  background: color-mix(in srgb, var(--danger) 10%, var(--bg));
  color: var(--ink);
  padding: 9px 10px;
  margin: 0;
}
@media (max-width: 760px) {
  .human-input-dialog { width: calc(100vw - 16px); }
  .human-choice-row { grid-template-columns: 1fr; }
}


/* Project Kanban Board Single Toggle Polish */
.r3-board-modal {
  width: min(1180px, calc(100vw - 28px));
  max-height: min(88vh, 920px);
  padding: 0;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  box-shadow: 10px 10px 0 var(--shadow);
}
.r3-board-modal::backdrop,
.board-editor-dialog::backdrop {
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
}
.board-card {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  max-height: min(88vh, 920px);
}
.board-head,
.board-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-2);
}
.board-head strong { display: block; font-size: 17px; }
.board-head span,
.board-status { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; }
.board-toolbar { flex-wrap: wrap; background: var(--panel); }
.board-ai-toggle {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: min(420px, 100%);
}
.board-ai-toggle > span {
  display: grid;
  gap: 3px;
  color: var(--ink);
  text-transform: none;
  letter-spacing: normal;
}
.board-ai-toggle b {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.2;
}
.board-ai-toggle small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
  max-width: 520px;
}
.board-ai-toggle input { width: auto; }
.board-grid {
  min-height: 0;
  overflow: auto;
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(5, minmax(210px, 1fr));
  gap: 10px;
}
.board-column {
  min-width: 0;
  border: 1px solid var(--soft-line);
  background: color-mix(in srgb, var(--bg) 78%, var(--panel) 22%);
  display: grid;
  grid-template-rows: auto minmax(180px, 1fr) auto;
  box-shadow: 3px 3px 0 var(--shadow);
}
.board-column > header {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 10px;
  border-bottom: 1px solid var(--soft-line);
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 11px;
}
.board-column > header span {
  color: var(--muted);
}
.board-column-drop {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 9px;
  min-height: 180px;
}
.board-column-drop.is-over {
  outline: 2px dashed var(--accent);
  outline-offset: -5px;
  background: color-mix(in srgb, var(--accent) 9%, transparent);
}
.board-empty {
  border: 1px dashed var(--soft-line);
  color: var(--muted);
  padding: 12px;
  text-align: center;
  font-size: 12px;
}
.board-add-column {
  margin: 0 9px 9px;
}
.board-card-item {
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  padding: 9px;
  display: grid;
  gap: 7px;
  cursor: grab;
  box-shadow: 3px 3px 0 var(--shadow);
}
.board-card-item.is-dragging { opacity: .55; }
.board-card-top,
.board-card-meta,
.board-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.board-card-top b {
  overflow-wrap: anywhere;
  line-height: 1.25;
}
.board-card-top span {
  border: 1px solid var(--soft-line);
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  padding: 2px 5px;
}
.board-card-item.priority-high { border-color: color-mix(in srgb, var(--danger) 64%, var(--line)); }
.board-card-item.priority-low { opacity: .86; }
.board-card-item p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.board-card-meta {
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  flex-wrap: wrap;
}
.board-mini-checklist {
  display: grid;
  gap: 4px;
}
.board-mini-checklist label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 5px;
  margin: 0;
  color: var(--ink);
  text-transform: none;
  letter-spacing: normal;
  font-size: 11px;
}
.board-mini-checklist input { width: auto; margin-top: 2px; accent-color: var(--check-gold); }
.tool-checks input[type="checkbox"],
.tool-checks input[type="radio"],
.compact-check input[type="checkbox"],
.r3-action-check input[type="checkbox"] { accent-color: var(--check-gold); }
.board-mini-checklist span { overflow-wrap: anywhere; }
.board-mini-checklist input:checked + span { color: var(--muted); text-decoration: line-through; }
.board-mini-checklist small { color: var(--muted); }
.board-card-actions { justify-content: flex-end; }
.board-editor-dialog {
  width: min(780px, calc(100vw - 18px));
  max-width: calc(100vw - 18px);
  overflow: hidden;
}
.board-editor-card {
  width: 100%;
  max-width: 100%;
  max-height: min(88vh, 780px);
  overflow: hidden;
}
.board-editor-body {
  display: grid;
  gap: 14px;
  padding: 16px;
  overflow-x: hidden;
}
.board-editor-body label {
  min-width: 0;
  gap: 8px;
}
.board-editor-body input,
.board-editor-body select,
.board-editor-body textarea {
  min-width: 0;
  width: 100%;
}
.board-editor-fields {
  display: grid;
  gap: 13px;
}
.board-editor-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.board-editor-section {
  border: 1px solid var(--soft-line);
  background: color-mix(in srgb, var(--bg) 86%, var(--panel) 14%);
  padding: 12px;
  display: grid;
  gap: 10px;
  min-width: 0;
}
.board-editor-label {
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.board-file-picker-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
}
.board-selected-files {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  min-width: 0;
}
.board-file-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  border: 1px solid var(--soft-line);
  background: var(--panel);
  color: var(--ink);
  padding: 5px 7px;
  box-shadow: 2px 2px 0 var(--shadow);
}
.board-file-pill b {
  min-width: 0;
  max-width: min(360px, 62vw);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}
.board-file-pill button {
  width: 21px;
  height: 21px;
  border: 1px solid var(--soft-line);
  background: transparent;
  color: var(--danger);
  padding: 0;
  line-height: 1;
}
.board-file-empty {
  color: var(--muted);
  font-size: 12px;
}
.board-editor-comments {
  border: 1px solid var(--soft-line);
  background: var(--bg);
  padding: 12px;
  display: grid;
  gap: 7px;
  min-width: 0;
}
.board-editor-comments h4 {
  margin: 0;
  color: var(--accent);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.board-editor-comments p {
  margin: 0;
  color: var(--muted);
  line-height: 1.35;
}
@media (max-width: 1180px) {
  .board-grid { grid-template-columns: repeat(3, minmax(220px, 1fr)); }
}
.board-editor-dialog .r3-action-foot {
  flex-wrap: wrap;
  gap: 9px;
}
@media (max-width: 760px) {
  .r3-board-modal { width: calc(100vw - 12px); }
  .board-grid { grid-template-columns: 1fr; }
  .board-editor-dialog { width: calc(100vw - 10px); max-width: calc(100vw - 10px); }
  .board-editor-grid,
  .board-file-picker-row { grid-template-columns: 1fr; }
  .board-editor-body { padding: 12px; }
  .board-file-pill b { max-width: 78vw; }
  .board-head,
  .board-toolbar { align-items: stretch; flex-direction: column; }
}

/* Kanban audit + checklist format polish 2026-06-21 */
.checklist-format-toggle {
  border: 1px solid var(--soft-line);
  background: color-mix(in srgb, var(--panel) 82%, var(--checklist) 8%);
  padding: 7px 8px;
  margin: 2px 0 0;
}
.tool-bubble.tool-board_add_comment,
.tool-bubble.tool-board_move_card,
.tool-bubble.tool-board_update_card,
.tool-bubble.tool-board_create_card,
.tool-bubble.tool-board_list_cards {
  border-color: color-mix(in srgb, var(--accent) 68%, var(--line));
  background: color-mix(in srgb, var(--panel-2) 84%, var(--accent) 8%);
}


/* Kanban board fixed sizing + card overflow UX 2026-06-22 */
.r3-board-modal {
  width: min(1200px, calc(100vw - 24px));
  height: min(88dvh, 900px);
  max-height: min(88dvh, 900px);
  overflow: hidden;
}
.board-card {
  height: 100%;
  max-height: none;
  min-height: 0;
}
.board-head,
.board-toolbar {
  flex: 0 0 auto;
}
.board-grid {
  height: 100%;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  align-items: stretch;
  grid-auto-rows: minmax(0, 1fr);
  grid-template-columns: repeat(5, minmax(216px, 1fr));
  scrollbar-gutter: stable;
}
.board-column {
  height: 100%;
  min-height: 0;
  overflow: hidden;
  grid-template-rows: auto minmax(0, 1fr) auto;
}
.board-column > header {
  flex: 0 0 auto;
}
.board-column-drop {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}
.board-add-column {
  flex: 0 0 auto;
}
.board-card-item {
  max-height: 260px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}
.board-card-top {
  align-items: start;
}
.board-card-top b {
  min-width: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.board-card-top span {
  flex: 0 0 auto;
}
.board-card-item p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  max-height: calc(1.35em * 5);
  overflow: hidden;
}
.board-mini-checklist {
  max-height: 92px;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 2px;
  scrollbar-gutter: stable;
}
.board-mini-checklist span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.board-card-actions {
  position: sticky;
  bottom: 0;
  padding-top: 3px;
  background: linear-gradient(180deg, transparent, var(--panel) 34%);
}
@media (max-width: 1180px) and (min-width: 761px) {
  .board-grid { grid-template-columns: repeat(5, minmax(216px, 1fr)); }
}
@media (max-width: 760px) {
  .r3-board-modal {
    width: calc(100vw - 10px);
    height: calc(100dvh - 10px);
    max-height: calc(100dvh - 10px);
  }
  .board-card { height: 100%; }
  .board-grid {
    overflow: auto;
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    align-items: start;
  }
  .board-column {
    height: auto;
    min-height: min(58dvh, 520px);
  }
  .board-column-drop {
    max-height: min(48dvh, 460px);
  }
  .board-card-item { max-height: 230px; }
}


/* Mobile chat-first flow designer + bottom sheets 2026-06-22 */
.r3-chat-flow-button { display: none; margin-top: 8px; }
.r3-mobile-flow-ui { display: none; }

html.r3-mobile-device,
html.r3-mobile-device body {
  width: 100%;
  min-height: 100%;
  overflow-x: hidden !important;
}

html.r3-mobile-device .app-shell.chat-mode {
  height: 100svh !important;
  min-height: 100svh !important;
  overflow: hidden !important;
}

html.r3-mobile-device .app-shell:not(.chat-mode) {
  height: 100svh !important;
  min-height: 100svh !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  grid-template-areas: "top" "canvas" !important;
  overflow: hidden !important;
  padding: 0 !important;
}

html.r3-mobile-device .app-shell:not(.chat-mode) .topbar-v2 {
  position: relative !important;
  top: auto !important;
  z-index: 130 !important;
  max-height: 112px !important;
  overflow: hidden !important;
}

html.r3-mobile-device .app-shell:not(.chat-mode) .toolbar-v2 {
  padding-bottom: 3px !important;
}

html.r3-mobile-device .app-shell:not(.chat-mode) .canvas-wrap {
  grid-area: canvas !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  border-width: 1px 0 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overscroll-behavior: none !important;
  touch-action: none !important;
}

html.r3-mobile-device .app-shell:not(.chat-mode) .canvas-hint {
  bottom: calc(100px + env(safe-area-inset-bottom, 0px)) !important;
  max-width: calc(100vw - 88px) !important;
}

html.r3-mobile-device .left-panel,
html.r3-mobile-device .right-panel {
  display: contents !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

html.r3-mobile-device .panel-section {
  display: none !important;
}

html.r3-mobile-device .panel-section.r3-mobile-active-sheet {
  position: fixed !important;
  left: max(10px, env(safe-area-inset-left, 0px)) !important;
  right: max(10px, env(safe-area-inset-right, 0px)) !important;
  bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
  z-index: 230 !important;
  display: block !important;
  max-height: min(74svh, 640px) !important;
  margin: 0 !important;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch !important;
  border: 1px solid var(--line) !important;
  background: color-mix(in srgb, var(--panel) 98%, #000 2%) !important;
  box-shadow: 0 -10px 34px color-mix(in srgb, var(--shadow) 84%, transparent), 5px 5px 0 var(--shadow) !important;
}

html.r3-mobile-device .panel-section.r3-mobile-active-sheet .panel-summary,
html.r3-mobile-device .panel-section.r3-mobile-active-sheet .option-fold > summary {
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
  background: color-mix(in srgb, var(--panel-2) 96%, var(--accent) 4%) !important;
}

html.r3-mobile-device .panel-section.r3-mobile-active-sheet .panel-content,
html.r3-mobile-device .panel-section.r3-mobile-active-sheet .option-fold-content {
  padding: 11px !important;
}

html.r3-mobile-device .r3-mobile-flow-ui:not(.hidden) {
  display: block;
}

html.r3-mobile-device .r3-mobile-flow-hud,
html.r3-mobile-device .r3-mobile-node-bar,
html.r3-mobile-device .r3-mobile-dock,
html.r3-mobile-device .r3-mobile-zoom-cluster {
  position: fixed;
  z-index: 210;
  font-family: var(--font);
}

html.r3-mobile-device .r3-mobile-flow-hud {
  left: 10px;
  right: 10px;
  top: calc(112px + env(safe-area-inset-top, 0px));
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
  pointer-events: none;
}

html.r3-mobile-device .r3-mobile-chip,
html.r3-mobile-device .r3-mobile-selected-label,
html.r3-mobile-device .r3-mobile-connect-hint {
  min-height: 34px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 93%, transparent);
  color: var(--ink);
  box-shadow: 2px 2px 0 var(--shadow);
  padding: 7px 9px;
  font-size: 11px;
  line-height: 1.2;
  pointer-events: auto;
}

html.r3-mobile-device .r3-mobile-chip {
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .1em;
}

html.r3-mobile-device .r3-mobile-selected-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
}

html.r3-mobile-device .r3-mobile-connect-hint {
  color: var(--accent);
  border-color: var(--accent);
  font-weight: 900;
}

html.r3-mobile-device .r3-mobile-zoom-cluster {
  right: 10px;
  bottom: calc(154px + env(safe-area-inset-bottom, 0px));
  display: grid;
  gap: 6px;
}

html.r3-mobile-device .r3-mobile-zoom-cluster button {
  width: 42px;
  min-height: 38px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 96%, transparent);
  color: var(--ink);
  box-shadow: 2px 2px 0 var(--shadow);
  font-size: 13px;
  font-weight: 900;
}

html.r3-mobile-device .r3-mobile-node-bar {
  left: 10px;
  right: 10px;
  bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  display: none;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  padding: 7px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  box-shadow: 0 -8px 24px color-mix(in srgb, var(--shadow) 78%, transparent);
}

html.r3-mobile-device .r3-mobile-flow-ui.has-node .r3-mobile-node-bar,
html.r3-mobile-device .r3-mobile-flow-ui.is-connecting .r3-mobile-node-bar {
  display: grid;
}

html.r3-mobile-device .r3-mobile-node-bar button,
html.r3-mobile-device .r3-mobile-dock button {
  min-width: 0;
  min-height: 42px;
  border: 1px solid var(--soft-line);
  background: color-mix(in srgb, var(--panel-2) 92%, transparent);
  color: var(--ink);
  box-shadow: 1px 1px 0 var(--shadow);
  font-size: 10.5px;
  font-weight: 850;
}

html.r3-mobile-device .r3-mobile-node-bar button.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 72%, var(--soft-line)); }
html.r3-mobile-device .r3-mobile-node-bar button:disabled { opacity: .45; cursor: not-allowed; }

html.r3-mobile-device .r3-mobile-dock {
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  padding: 7px max(7px, env(safe-area-inset-right, 0px)) calc(7px + env(safe-area-inset-bottom, 0px)) max(7px, env(safe-area-inset-left, 0px));
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 97%, #000 3%);
  box-shadow: 0 -9px 28px color-mix(in srgb, var(--shadow) 82%, transparent);
}

html.r3-mobile-device .r3-mobile-dock button {
  display: grid;
  place-items: center;
  gap: 2px;
  border-right: 0;
  box-shadow: none;
  padding: 4px 2px;
}

html.r3-mobile-device .r3-mobile-dock button:last-child { border-right: 1px solid var(--soft-line); }
html.r3-mobile-device .r3-mobile-dock button.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 18%, var(--panel-2));
  color: var(--accent);
}
html.r3-mobile-device .r3-mobile-dock span { font-size: 13px; line-height: 1; }
html.r3-mobile-device .r3-mobile-dock b { font-size: 9.5px; line-height: 1; }

html.r3-mobile-device .r3-mobile-sheet-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 220;
  border: 0;
  background: rgba(0, 0, 0, .36);
}
html.r3-mobile-device .r3-mobile-sheet-backdrop.active { display: block; }

html.r3-mobile-device .r3-mobile-flow-ui.sheet-open .r3-mobile-node-bar {
  display: none;
}

html.r3-mobile-device .r3-node {
  touch-action: none !important;
}

html.r3-mobile-device .node-head-btn,
html.r3-mobile-device .file-mini,
html.r3-mobile-device .ui-btn.mini {
  min-width: 34px !important;
  min-height: 32px !important;
}

html.r3-mobile-device .r3-context-menu {
  max-width: calc(100vw - 18px);
  left: 9px !important;
  right: 9px !important;
}

html.r3-mobile-device .r3-chat-flow-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

html.r3-mobile-device .r3-chat-shell {
  height: auto !important;
  min-height: 0 !important;
}

html.r3-mobile-device .r3-chat-sidebar {
  max-height: 232px !important;
  padding: 10px !important;
  gap: 9px !important;
}

html.r3-mobile-device .r3-chat-brand {
  padding: 10px !important;
}

html.r3-mobile-device .r3-chat-messages {
  padding-bottom: 12px !important;
}

@media (max-width: 430px) {
  html.r3-mobile-device .r3-mobile-flow-hud {
    top: calc(104px + env(safe-area-inset-top, 0px));
    grid-template-columns: auto minmax(0, 1fr);
  }
  html.r3-mobile-device .r3-mobile-connect-hint { display: none !important; }
  html.r3-mobile-device .r3-mobile-node-bar { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; left: 7px; right: 7px; }
  html.r3-mobile-device .r3-mobile-node-bar button { font-size: 9.4px; padding-inline: 1px; }
  html.r3-mobile-device .r3-mobile-dock b { font-size: 8.8px; }
  html.r3-mobile-device .panel-section.r3-mobile-active-sheet { left: 7px !important; right: 7px !important; }
}


/* Mobile simplified chat + pinch canvas polish 2026-06-22 */
.r3-chat-mobile-top,
.r3-chat-settings-close { display: none; }
.r3-chat-run-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

html.r3-mobile-device .app-shell.chat-mode {
  height: 100svh !important;
  min-height: 100svh !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  overflow: hidden !important;
}

html.r3-mobile-device .app-shell.chat-mode .topbar-v2 {
  min-height: 64px !important;
  height: 64px !important;
  padding: 8px 10px !important;
  gap: 8px !important;
  position: relative !important;
  top: auto !important;
  z-index: 160 !important;
  overflow: hidden !important;
}

html.r3-mobile-device .app-shell.chat-mode .brand-link {
  flex: 0 0 auto !important;
}

html.r3-mobile-device .app-shell.chat-mode .brand-link .brand-mark {
  min-width: 72px !important;
  min-height: 38px !important;
  font-size: 24px !important;
}

html.r3-mobile-device .app-shell.chat-mode .build-pill {
  display: none !important;
}

html.r3-mobile-device .app-shell.chat-mode .toolbar-v2 {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  justify-content: flex-end !important;
  overflow: visible !important;
  gap: 0 !important;
  padding: 0 !important;
}


html.r3-mobile-device .app-shell.chat-mode .chat-toggle-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 134px !important;
  max-width: 46vw !important;
  min-height: 40px !important;
  padding: 8px 11px !important;
  white-space: nowrap !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  color: var(--accent-ink) !important;
  background: var(--accent) !important;
}

html.r3-mobile-device .app-shell.chat-mode .r3-chat-shell {
  height: 100% !important;
  min-height: 0 !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: minmax(0, 1fr) !important;
  overflow: hidden !important;
}

html.r3-mobile-device .app-shell.chat-mode .r3-chat-main {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
}

html.r3-mobile-device .r3-chat-mobile-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  border-bottom: 1px solid var(--line) !important;
  background: color-mix(in srgb, var(--panel) 96%, #000 4%) !important;
  box-shadow: 0 3px 0 var(--shadow) !important;
}

html.r3-mobile-device .r3-chat-mobile-top div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

html.r3-mobile-device .r3-chat-mobile-top b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  letter-spacing: .04em;
}

html.r3-mobile-device .r3-chat-mobile-top small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
}

html.r3-mobile-device .r3-chat-mobile-top .ui-btn {
  flex: 0 0 auto;
  min-width: 88px !important;
  min-height: 36px !important;
}

html.r3-mobile-device .app-shell.chat-mode .r3-chat-sidebar {
  display: none !important;
}

html.r3-mobile-device .app-shell.chat-mode .r3-chat-shell.mobile-settings-open .r3-chat-sidebar {
  position: fixed !important;
  left: max(10px, env(safe-area-inset-left, 0px)) !important;
  right: max(10px, env(safe-area-inset-right, 0px)) !important;
  bottom: calc(82px + env(safe-area-inset-bottom, 0px)) !important;
  z-index: 260 !important;
  display: block !important;
  max-height: min(70svh, 470px) !important;
  overflow: auto !important;
  padding: 0 !important;
  border: 1px solid var(--line) !important;
  background: color-mix(in srgb, var(--panel) 98%, #000 2%) !important;
  box-shadow: 0 -12px 30px color-mix(in srgb, var(--shadow) 82%, transparent), 5px 5px 0 var(--shadow) !important;
}

html.r3-mobile-device .app-shell.chat-mode .r3-chat-brand {
  display: none !important;
}

html.r3-mobile-device .app-shell.chat-mode .r3-chat-run-settings {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 12px !important;
  display: grid !important;
  gap: 10px !important;
}

html.r3-mobile-device .app-shell.chat-mode .r3-chat-run-head {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: -12px -12px 2px;
  padding: 11px 12px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel-2) 96%, var(--accent) 4%);
}

html.r3-mobile-device .app-shell.chat-mode .r3-chat-run-head h3 {
  margin: 0 !important;
}

html.r3-mobile-device .r3-chat-settings-close {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

html.r3-mobile-device .app-shell.chat-mode .r3-chat-run-settings label {
  margin: 0 !important;
  gap: 5px !important;
  font-size: 10px !important;
}

html.r3-mobile-device .app-shell.chat-mode .r3-chat-run-settings select {
  min-height: 40px !important;
}

html.r3-mobile-device .app-shell.chat-mode .r3-chat-run-status {
  min-height: 0 !important;
  padding: 7px 8px !important;
  font-size: 11px !important;
  color: var(--muted) !important;
  border: 1px solid var(--soft-line) !important;
}

html.r3-mobile-device .app-shell.chat-mode .r3-chat-hint {
  margin: 0 !important;
}

html.r3-mobile-device .app-shell.chat-mode .r3-chat-messages {
  padding: 12px 11px 10px !important;
  gap: 11px !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

html.r3-mobile-device .app-shell.chat-mode .r3-chat-empty {
  width: 100% !important;
  align-self: start !important;
  margin: 8px 0 0 !important;
  padding: 16px !important;
  gap: 8px !important;
  box-shadow: 4px 4px 0 var(--shadow) !important;
}

html.r3-mobile-device .app-shell.chat-mode .r3-chat-empty h2 {
  font-size: 24px !important;
  line-height: 1.08 !important;
}

html.r3-mobile-device .app-shell.chat-mode .r3-chat-empty p {
  font-size: 14px !important;
  line-height: 1.42 !important;
}

html.r3-mobile-device .app-shell.chat-mode .r3-chat-avatar {
  display: none !important;
}

html.r3-mobile-device .app-shell.chat-mode .r3-chat-row {
  width: 100% !important;
  max-width: 100% !important;
  gap: 0 !important;
}

html.r3-mobile-device .app-shell.chat-mode .r3-chat-row.user {
  justify-content: flex-end !important;
}

html.r3-mobile-device .app-shell.chat-mode .r3-chat-bubble {
  max-width: 92vw !important;
  padding: 11px 12px !important;
  font-size: 14px !important;
  line-height: 1.48 !important;
  box-shadow: 2px 2px 0 var(--shadow) !important;
}

html.r3-mobile-device .app-shell.chat-mode .r3-chat-row.user .r3-chat-bubble {
  max-width: 86vw !important;
}

html.r3-mobile-device .app-shell.chat-mode .r3-chat-meta,
html.r3-mobile-device .app-shell.chat-mode .run-summary-chat,
html.r3-mobile-device .app-shell.chat-mode .r3-chat-trace {
  display: none !important;
}

html.r3-mobile-device .app-shell.chat-mode .r3-chat-composer {
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px !important;
  padding: 9px 10px calc(9px + env(safe-area-inset-bottom, 0px)) !important;
  align-items: end !important;
  background: color-mix(in srgb, var(--panel) 98%, #000 2%) !important;
}

html.r3-mobile-device .app-shell.chat-mode .r3-chat-input-wrap {
  min-width: 0 !important;
  padding: 4px !important;
  box-shadow: 2px 2px 0 var(--shadow) !important;
}

html.r3-mobile-device .app-shell.chat-mode .r3-chat-input {
  min-height: 44px !important;
  max-height: 104px !important;
  resize: none !important;
  padding: 8px 48px 8px 8px !important;
  font-size: 16px !important;
  line-height: 1.32 !important;
}

html.r3-mobile-device .app-shell.chat-mode .r3-chat-send {
  width: 82px !important;
  min-width: 82px !important;
  min-height: 54px !important;
}

html.r3-mobile-device .app-shell.chat-mode .r3-chat-input-wrap .voice-dictation-controls {
  right: 5px !important;
  bottom: 5px !important;
}

html.r3-mobile-device .canvas-wrap {
  touch-action: none !important;
}

html.r3-mobile-device .canvas-wrap::after {
  content: var(--zoom, "100%") " · pinch to zoom" !important;
}

@media (max-width: 380px) {
  html.r3-mobile-device .app-shell.chat-mode .chat-toggle-btn {
    min-width: 118px !important;
    font-size: 13px !important;
  }
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-mobile-top .ui-btn {
    min-width: 78px !important;
  }
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-send {
    width: 72px !important;
    min-width: 72px !important;
  }
}


/* Mobile auth guard + chat return button repair 2026-06-22 */
#loginOverlay.overlay:not(.hidden) {
  z-index: 2147483000 !important;
  pointer-events: auto !important;
  isolation: isolate;
}

.r3-auth-inert {
  pointer-events: none !important;
  user-select: none !important;
}

html.r3-auth-locked,
html.r3-auth-locked body,
body.r3-auth-locked {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

html.r3-mobile-device #loginOverlay.overlay:not(.hidden) {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  min-height: 100svh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: calc(14px + env(safe-area-inset-top, 0px)) max(14px, env(safe-area-inset-right, 0px)) calc(14px + env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px)) !important;
  background: color-mix(in srgb, var(--bg) 96%, #000 4%) !important;
  overflow: hidden !important;
  touch-action: none !important;
}

html.r3-mobile-device #loginOverlay.overlay:not(.hidden) .auth-card {
  width: min(440px, calc(100vw - 28px)) !important;
  max-height: calc(100dvh - 42px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

html.r3-mobile-device .app-shell.chat-mode .topbar-v2 {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  overflow: visible !important;
}

html.r3-mobile-device .app-shell.chat-mode .brand-link {
  width: auto !important;
  max-width: calc(100% - 150px) !important;
  flex: 0 1 auto !important;
  justify-content: flex-start !important;
}

html.r3-mobile-device .app-shell.chat-mode .toolbar-v2 {
  display: flex !important;
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: 52vw !important;
  justify-content: flex-end !important;
  align-items: center !important;
  overflow: visible !important;
}

html.r3-mobile-device .app-shell.chat-mode .chat-toggle-btn {
  position: relative !important;
  flex: 0 0 auto !important;
  min-width: 128px !important;
  max-width: none !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
}

html.r3-mobile-device .r3-chat-mobile-actions {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

html.r3-mobile-device .r3-chat-mobile-actions .ui-btn {
  min-width: 70px !important;
  min-height: 36px !important;
  padding: 7px 9px !important;
}

@media (max-width: 380px) {
  html.r3-mobile-device .app-shell.chat-mode .brand-link .brand-mark {
    min-width: 62px !important;
    font-size: 20px !important;
  }
  html.r3-mobile-device .app-shell.chat-mode .chat-toggle-btn {
    min-width: 112px !important;
    font-size: 12px !important;
    padding-inline: 8px !important;
  }
  html.r3-mobile-device .r3-chat-mobile-actions {
    gap: 5px;
  }
  html.r3-mobile-device .r3-chat-mobile-actions .ui-btn {
    min-width: 60px !important;
    padding-inline: 7px !important;
  }
}

/* Chat live tool autoscroll polish 2026-06-22 */
.r3-chat-live-tools.is-user-scrolled {
  border-top: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  scrollbar-gutter: stable;
}


/* Mobile single Chat/Flow toggle repair 2026-06-22 */
html.r3-mobile-device .r3-mobile-flow-hud {
  grid-template-columns: minmax(0, 1fr) auto !important;
}

html.r3-mobile-device .r3-mobile-flow-hud [data-mobile-action="chat"],
html.r3-mobile-device #chatMobileFlowBtn {
  display: none !important;
}

html.r3-mobile-device .r3-mobile-selected-label {
  min-width: 0 !important;
  width: 100% !important;
}

html.r3-mobile-device .app-shell.chat-mode .r3-chat-mobile-actions {
  margin-left: auto !important;
}

html.r3-mobile-device .app-shell.chat-mode .r3-chat-mobile-actions .ui-btn {
  min-width: 92px !important;
}

html.r3-mobile-device .app-shell.chat-mode .chat-toggle-btn,
html.r3-mobile-device .app-shell:not(.chat-mode) .chat-toggle-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.r3-chat-flow-button {
  display: none !important;
}


/* Toolbar polish + chat pulse 2026-06-22 */
.topbar-v2 {
  position: sticky;
  top: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-height: 68px;
  padding: 10px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 90%, transparent);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--shadow) 55%, transparent);
  backdrop-filter: blur(10px);
}
.topbar-leading {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: max-content;
}
.brand-link {
  flex: 0 0 auto;
}
.topbar-build-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  align-self: center;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--soft-line) 88%, var(--line) 12%);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  color: var(--muted);
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  box-shadow: 2px 2px 0 var(--shadow);
}
.toolbar-v2 {
  gap: 10px;
  align-items: center;
}
.top-action-group {
  gap: 5px;
  padding: 5px;
  border-color: color-mix(in srgb, var(--soft-line) 86%, var(--line) 14%);
  box-shadow: 1px 1px 0 var(--shadow);
}
.top-action-group[aria-label="Settings and helpers"] {
  margin-left: auto;
}
.run-action-group {
  margin-left: 0;
}
.save-state-pill {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  letter-spacing: .12em;
}
.chat-toggle-btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 60%, var(--line));
  background: color-mix(in srgb, var(--accent) 10%, var(--panel-2));
  color: var(--ink);
  box-shadow: 2px 2px 0 var(--shadow);
  white-space: nowrap;
  overflow: visible;
}
.chat-toggle-btn::after {
  content: '';
  position: absolute;
  inset: -4px;
  border: 1px solid color-mix(in srgb, var(--accent) 86%, transparent);
  opacity: .72;
  pointer-events: none;
  animation: chatToggleBorderPulse 1.45s ease-in-out infinite;
}
.chat-toggle-btn.is-chat-active::after {
  inset: -5px;
  border-color: color-mix(in srgb, var(--accent) 96%, #fff 4%);
}
@keyframes chatToggleBorderPulse {
  0%, 100% { transform: scale(1); opacity: .34; }
  50% { transform: scale(1.045); opacity: .95; }
}
@media (max-width: 1220px) {
  .topbar-v2 {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .topbar-leading {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .toolbar-v2 {
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100%;
  }
  .top-action-group[aria-label="Settings and helpers"] {
    margin-left: 0;
  }
}
@media (max-width: 760px) {
  .topbar-v2 {
    gap: 8px;
    padding: calc(8px + env(safe-area-inset-top, 0px)) 9px 8px;
  }
  .topbar-leading {
    width: 100%;
    justify-content: space-between;
    gap: 8px;
  }
  .chat-toggle-btn {
    min-height: 38px;
    padding: 7px 12px;
    box-shadow: 1px 1px 0 var(--shadow);
  }
  .toolbar-v2 {
    width: calc(100vw - 18px);
    max-width: calc(100vw - 18px);
  }
  .topbar-build-pill {
    order: -4;
    min-height: 38px;
    padding: 0 10px;
    scroll-snap-align: start;
  }
}
html.r3-mobile-device .topbar-v2 {
  grid-template-columns: 1fr !important;
  align-items: stretch !important;
}
html.r3-mobile-device .topbar-leading {
  width: 100% !important;
  justify-content: space-between !important;
  gap: 8px !important;
}
html.r3-mobile-device .topbar-leading .brand-link {
  min-width: 0 !important;
}
html.r3-mobile-device .toolbar-v2 > .topbar-build-pill,
html.r3-mobile-device .toolbar-v2 > .top-action-group {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: max-content !important;
  scroll-snap-align: start !important;
}
html.r3-mobile-device .toolbar-v2 > .topbar-build-pill {
  order: -3 !important;
}
html.r3-mobile-device .chat-toggle-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
}
html.r3-mobile-device .app-shell.chat-mode .chat-toggle-btn,
html.r3-mobile-device .app-shell:not(.chat-mode) .chat-toggle-btn {
  display: inline-flex !important;
}


/* Production toolbar grouping + More menu 2026-06-22 */
.topbar-v2 {
  min-height: 64px;
  padding: 8px 12px;
}
.toolbar-v2 {
  justify-content: flex-end;
  overflow: visible;
}
.topbar-build-pill {
  margin-right: auto;
  min-height: 36px;
}
.run-action-group {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--soft-line));
  background: color-mix(in srgb, var(--bg) 58%, transparent);
}
.topbar-more-menu {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  z-index: 75;
}
.topbar-more-menu summary {
  list-style: none;
}
.topbar-more-menu summary::-webkit-details-marker {
  display: none;
}
.topbar-more-btn {
  min-width: 84px;
  border-color: color-mix(in srgb, var(--soft-line) 92%, var(--line) 8%);
  background: color-mix(in srgb, var(--panel-2) 82%, transparent);
}
.topbar-more-menu[open] .topbar-more-btn {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--panel-2));
}
.topbar-more-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(420px, calc(100vw - 24px));
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 96%, #000 4%);
  box-shadow: 10px 10px 0 var(--shadow), 0 18px 32px color-mix(in srgb, var(--shadow) 72%, transparent);
  z-index: 90;
}
.topbar-more-section {
  display: grid;
  gap: 7px;
}
.topbar-more-label {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.topbar-more-panel .top-action-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 0 !important;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.topbar-more-panel .toolbar-btn {
  justify-content: flex-start;
  min-width: 0;
  width: 100%;
  min-height: 38px;
  padding-inline: 9px;
}
.topbar-more-panel .toolbar-btn.icon-only {
  width: 100%;
}
.topbar-more-panel .logout-btn {
  grid-column: 1 / -1;
}
.release-guide-btn {
  flex: 0 0 auto;
}
.chat-toggle-btn {
  font-weight: 800;
}
.app-shell.chat-mode .chat-toggle-btn::after {
  animation-duration: 2.2s;
  opacity: .48;
}
@media (max-width: 1220px) {
  .topbar-build-pill {
    margin-right: 0;
  }
  .toolbar-v2 {
    overflow-x: auto;
    overflow-y: visible;
    flex-wrap: nowrap;
  }
}
@media (max-width: 760px) {
  .topbar-v2 {
    min-height: 0;
  }
  .topbar-more-panel {
    position: fixed;
    top: max(78px, calc(env(safe-area-inset-top, 0px) + 70px));
    left: 10px;
    right: 10px;
    width: auto;
    max-height: min(68vh, 560px);
    overflow: auto;
  }
  .topbar-more-panel .top-action-group {
    grid-template-columns: 1fr 1fr;
  }
  .topbar-more-btn {
    min-width: 76px;
  }
}
html.r3-mobile-device .toolbar-v2 {
  overflow-x: auto !important;
  overflow-y: visible !important;
}
html.r3-mobile-device .toolbar-v2 > .topbar-more-menu {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: max-content !important;
  scroll-snap-align: start !important;
}
html.r3-mobile-device .topbar-build-pill {
  margin-right: 0 !important;
}


/* Toolbar status left + More cursor repair 2026-06-22 */
.topbar-more-menu,
.topbar-more-menu summary,
.topbar-more-btn {
  cursor: pointer;
}
.run-action-group {
  align-items: center;
}
.run-action-group .save-state-pill {
  order: -10;
  flex: 0 1 142px;
  max-width: 142px;
  min-width: 82px;
  min-height: 0;
  padding: 0 10px 0 0;
  margin-right: 4px;
  border: 0;
  border-right: 1px solid color-mix(in srgb, var(--soft-line) 62%, transparent);
  background: transparent;
  color: var(--muted);
  box-shadow: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  letter-spacing: .13em;
  line-height: 1.2;
  opacity: .86;
}
.run-action-group .save-state-pill::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 7px;
  border: 1px solid currentColor;
  background: currentColor;
  vertical-align: 1px;
  opacity: .7;
}
.run-action-group .save-state-pill[data-state="dirty"] {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 46%, transparent);
}
.run-action-group .save-state-pill[data-state="saving"],
.run-action-group .save-state-pill[data-state="autosaving"] {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 46%, transparent);
}
.run-action-group .save-state-pill[data-state="error"] {
  color: var(--danger);
  background: transparent;
  border-color: color-mix(in srgb, var(--danger) 54%, transparent);
}
@media (max-width: 1220px) {
  .run-action-group .save-state-pill {
    max-width: 104px;
    min-width: 70px;
  }
}


/* Toolbar status standalone label polish 2026-06-22 */
.topbar-status-slot {
  flex: 0 1 clamp(148px, 22vw, 280px);
  min-width: 138px;
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  margin-right: 8px;
}
.topbar-status-slot .save-state-pill {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 100%;
  min-height: 36px;
  padding: 10px 12px 10px 78px;
  border: 1px solid color-mix(in srgb, var(--soft-line) 86%, var(--line) 14%);
  background: linear-gradient(135deg, color-mix(in srgb, var(--bg) 88%, var(--panel) 12%), color-mix(in srgb, var(--panel) 78%, transparent));
  color: var(--ink);
  box-shadow: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.2;
  opacity: .98;
}
.topbar-status-slot .save-state-pill::before {
  content: 'STATUS';
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  padding-right: 9px;
  border-right: 1px solid color-mix(in srgb, var(--soft-line) 78%, transparent);
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.topbar-status-slot .save-state-pill[data-state="dirty"] {
  color: color-mix(in srgb, var(--danger) 86%, var(--ink) 14%);
  border-color: color-mix(in srgb, var(--danger) 45%, var(--soft-line));
  background: linear-gradient(135deg, color-mix(in srgb, var(--danger) 9%, var(--bg)), color-mix(in srgb, var(--panel) 82%, transparent));
}
.topbar-status-slot .save-state-pill[data-state="saving"],
.topbar-status-slot .save-state-pill[data-state="autosaving"] {
  color: color-mix(in srgb, var(--accent) 88%, var(--ink) 12%);
  border-color: color-mix(in srgb, var(--accent) 42%, var(--soft-line));
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, var(--bg)), color-mix(in srgb, var(--panel) 82%, transparent));
}
.topbar-status-slot .save-state-pill[data-state="error"] {
  color: #fff;
  border-color: color-mix(in srgb, var(--danger) 72%, var(--soft-line));
  background: linear-gradient(135deg, color-mix(in srgb, var(--danger) 18%, var(--bg)), color-mix(in srgb, var(--danger) 8%, var(--panel)));
}
@media (max-width: 1220px) {
  .topbar-status-slot {
    flex-basis: 220px;
    min-width: 146px;
  }
}
@media (max-width: 760px) {
  .topbar-status-slot {
    margin-right: 0;
    min-width: 150px;
  }
  .topbar-status-slot .save-state-pill {
    min-height: 38px;
  }
}
html.r3-mobile-device .topbar-status-slot {
  flex: 0 0 auto !important;
  min-width: 156px !important;
  width: auto !important;
  scroll-snap-align: start !important;
}


/* Persistent collapsed/expanded panel state 2026-06-22 */


/* Chat Kanban @mention support 2026-06-22 */
.r3-chat-card-mention {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  margin: 0 2px;
  padding: 1px 7px;
  border: 1px solid color-mix(in srgb, var(--accent) 54%, var(--soft-line));
  background: color-mix(in srgb, var(--accent) 12%, var(--panel-2));
  color: var(--accent);
  font-weight: 800;
  line-height: 1.35;
  vertical-align: baseline;
  overflow-wrap: anywhere;
}
.r3-chat-input-wrap .card-mention-picker {
  z-index: 2147483000;
}


/* More menu Theme label repair 2026-06-22 */
.topbar-more-panel .theme-btn {
  justify-content: flex-start;
}
.topbar-more-panel .theme-btn b {
  display: inline;
}


/* Monetization foundation: compact plan status */
.plan-status-pill {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  max-width: min(430px, 38vw);
  min-height: 34px;
  border: 1px solid var(--soft-line);
  background: color-mix(in srgb, var(--panel-2) 82%, transparent);
  color: var(--ink);
  padding: 4px 6px;
  box-shadow: 2px 2px 0 var(--shadow);
  font-size: 11px;
}
.plan-status-label {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 800;
}
.plan-status-pill strong {
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 11px;
}
.plan-status-pill.is-admin strong { color: var(--check-gold); }
.plan-status-pill.is-pro strong { color: var(--accent); }
#planStatusUsage {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
}
.plan-upgrade-btn {
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
  padding: 4px 7px;
  min-height: 24px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 1px 1px 0 var(--shadow);
}
.plan-upgrade-btn[hidden] { display: none !important; }
@media (max-width: 1180px) {
  .plan-status-pill { grid-template-columns: auto auto auto; max-width: none; }
  #planStatusUsage { display: none; }
}
html.r3-mobile-device .plan-status-pill {
  width: 100%;
  max-width: none;
  grid-template-columns: auto auto 1fr auto;
}
html.r3-mobile-device #planStatusUsage { display: block; }
@media (max-width: 620px) {
  html.r3-mobile-device .plan-status-pill { grid-template-columns: auto auto auto; }
  html.r3-mobile-device #planStatusUsage { display: none; }
}

/* Monetization feature gates — pass3 2026-06-24 */
.node-palette.pro-only,
.ui-btn.is-locked,
.file-mini.is-locked,
.tool-checks label.is-locked {
  position: relative;
}
.node-palette.pro-only::after {
  content: attr(data-pro-badge);
  position: absolute;
  top: -7px;
  right: -5px;
  padding: 2px 5px;
  border: 1px solid var(--line);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
  box-shadow: 2px 2px 0 var(--shadow);
}
.node-palette.is-locked,
.ui-btn.is-locked,
.file-mini.is-locked,
.tool-checks label.is-locked {
  opacity: .62;
}
.tool-checks label.is-locked span::after {
  content: ' locked';
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
}


/* Monetization admin plan UI — pass4 2026-06-24 */
.plan-admin-btn {
  border: 1px solid var(--check-gold);
  background: color-mix(in srgb, var(--check-gold) 18%, var(--panel-2));
  color: var(--ink);
  padding: 4px 7px;
  min-height: 24px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 1px 1px 0 var(--shadow);
}
.plan-admin-btn[hidden] { display: none !important; }
.plan-status-pill.is-admin {
  border-color: color-mix(in srgb, var(--check-gold) 64%, var(--soft-line));
  background: linear-gradient(135deg, color-mix(in srgb, var(--check-gold) 12%, var(--panel-2)), color-mix(in srgb, var(--panel) 84%, transparent));
}
.billing-plan-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.billing-plan-grid section,
.admin-selected-user,
.admin-user-results {
  border: 1px solid var(--soft-line);
  background: var(--bg);
  box-shadow: 3px 3px 0 var(--shadow);
}
.billing-plan-grid section {
  padding: 12px;
  display: grid;
  gap: 6px;
}
.billing-plan-grid b,
.admin-selected-user b {
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 11px;
}
.billing-plan-grid p { margin: 0; color: var(--ink); }
.billing-plan-grid small,
.admin-selected-user small,
.admin-selected-usage {
  color: var(--muted);
  line-height: 1.4;
}
.admin-plan-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px;
}
.admin-user-results {
  display: grid;
  gap: 6px;
  max-height: 240px;
  overflow: auto;
  padding: 8px;
}
.admin-user-result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  border: 1px solid var(--soft-line);
  background: var(--panel);
  color: var(--ink);
  padding: 9px;
  text-align: left;
}
.admin-user-result:hover,
.admin-user-result:focus-visible {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
}
.admin-user-result span,
.admin-selected-user header {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.admin-user-result small,
.admin-user-result b,
.admin-user-result em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-user-result em {
  color: var(--accent);
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: .1em;
}
.admin-selected-user {
  display: grid;
  gap: 10px;
  padding: 12px;
}
.admin-selected-user code {
  color: var(--check-gold);
  font-size: 11px;
}
@media (max-width: 720px) {
  .billing-plan-grid,
  .admin-plan-search-row { grid-template-columns: 1fr; }
  .admin-plan-search-row .ui-btn { width: 100%; }
}


/* Monetization hardening — pass5 2026-06-24 */
.plan-status-pill[title*="Admin file not found"] {
  outline: 1px dashed color-mix(in srgb, var(--danger) 55%, transparent);
  outline-offset: 2px;
}

/* Admin effective plan testing — pass6 2026-06-24 */
.plan-status-pill.is-admin.is-free { border-color: color-mix(in srgb, var(--accent) 72%, var(--line)); }
.plan-status-pill.is-admin.is-free #planStatusName::after,
.plan-status-pill.is-admin.is-pro #planStatusName::after { content: ' TEST'; font-size: 9px; letter-spacing: .12em; color: var(--accent); margin-left: 4px; }
.admin-plan-dialog option:disabled { color: var(--muted); }


/* Free tools + Kanban Pro gate — pass7 2026-06-24 */
.toolbar-btn.is-locked,
.tool-checks label.pro-only,
.node-palette.pro-only.is-locked {
  opacity: .62;
}
.toolbar-btn.is-locked::after,
.tool-checks label.pro-only span::after {
  content: ' PRO';
  color: var(--accent);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
}


/* Kanban mention helper — pass8 2026-06-24 */
.mention-feature-help {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  text-transform: none;
  letter-spacing: normal;
}
.mention-feature-help::before {
  content: '@';
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1px solid var(--soft-line);
  background: var(--bg);
  color: var(--accent);
  font-weight: 900;
  font-size: 11px;
  box-shadow: 1px 1px 0 var(--shadow);
}
.mention-feature-help.is-pro-locked::before {
  content: 'PRO';
  width: auto;
  min-width: 30px;
  padding: 0 5px;
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--line);
  font-size: 9px;
  letter-spacing: .08em;
}
.r3-chat-mention-help {
  grid-column: 1 / 2;
  margin: -3px 0 0 2px;
}
@media (max-width: 760px) {
  .r3-chat-mention-help {
    grid-column: 1 / -1;
    margin-top: -1px;
  }
}

/* File limit badge — pass9 2026-06-24 */
.file-section .panel-summary {
  grid-template-columns: auto minmax(0, auto) auto 1fr auto;
  column-gap: 8px;
}
.section-usage-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  max-width: 118px;
  padding: 2px 6px;
  border: 1px solid var(--soft-line);
  background: color-mix(in srgb, var(--panel-2) 78%, transparent);
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.section-usage-badge.is-near-limit {
  border-color: color-mix(in srgb, var(--accent) 70%, var(--soft-line));
  color: var(--accent);
}
.section-usage-badge.is-at-limit {
  border-color: color-mix(in srgb, var(--danger) 72%, var(--soft-line));
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 10%, var(--panel-2));
}
.section-usage-badge.is-unlimited {
  border-color: color-mix(in srgb, var(--check-gold) 68%, var(--soft-line));
  color: var(--check-gold);
}
@media (max-width: 760px) {
  .file-section .panel-summary { grid-template-columns: auto minmax(0, 1fr) auto auto; }
  .file-limit-badge { min-width: 52px; max-width: 92px; font-size: 8px; padding-inline: 5px; }
}

/* Plan status topbar containment — pass10 2026-06-24 */
.plan-status-pill {
  grid-template-columns: auto auto minmax(92px, 1fr) auto auto;
  flex: 1 1 clamp(460px, 42vw, 590px);
  width: clamp(460px, 42vw, 590px);
  max-width: min(590px, 48vw);
  min-width: 380px;
  overflow: hidden;
  white-space: nowrap;
}
.plan-status-pill > * {
  min-width: 0;
}
.plan-upgrade-btn,
.plan-admin-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}
#planStatusName {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html:not(.r3-mobile-device) #planStatusUsage {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 1500px) {
  html:not(.r3-mobile-device) .plan-status-pill {
    grid-template-columns: auto auto auto auto;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    min-width: 0;
  }
  html:not(.r3-mobile-device) #planStatusUsage {
    display: none;
  }
}
@media (max-width: 1180px) {
  .plan-status-pill {
    grid-template-columns: auto auto auto auto;
  }
}



/* Max-step locked designer intent — pass14 2026-06-24 */
.max-steps-control {
  display: grid;
  gap: 8px;
  margin: 10px 0;
  padding: 9px;
  border: 1px solid var(--soft-line);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
}
.max-steps-headline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(112px, .72fr);
  gap: 8px;
  align-items: end;
}
.max-steps-current-label,
.max-steps-original-label {
  margin: 0;
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .11em;
}
.max-steps-current-label input,
.max-steps-original-label input {
  margin: 0;
  min-height: 34px;
}
.max-steps-original-label input[disabled] {
  border-style: dashed;
  background: color-mix(in srgb, var(--panel) 72%, transparent);
  color: var(--accent);
  opacity: 1;
  cursor: help;
  font-weight: 800;
}
.max-steps-summary {
  display: flex;
  align-items: stretch;
  gap: 6px;
  flex-wrap: wrap;
}
.max-steps-summary span,
.max-steps-summary em {
  display: inline-grid;
  grid-auto-flow: column;
  align-items: center;
  gap: 5px;
  min-height: 26px;
  border: 1px solid var(--soft-line);
  background: var(--panel);
  padding: 4px 7px;
  color: var(--ink);
  font-size: 11px;
  font-style: normal;
  line-height: 1.15;
}
.max-steps-summary b {
  color: var(--muted);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.max-steps-summary em {
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 10px;
}
.max-steps-control.is-capped {
  border-color: color-mix(in srgb, var(--accent) 62%, var(--soft-line));
  background: color-mix(in srgb, var(--accent) 8%, var(--bg));
}
.max-steps-control.is-unlimited .max-steps-summary span:first-child {
  border-color: color-mix(in srgb, var(--output) 66%, var(--soft-line));
}
.max-steps-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}
.max-steps-note {
  margin: 0;
}
@media (max-width: 520px) {
  .max-steps-headline,
  .max-steps-footer {
    grid-template-columns: 1fr;
  }
  .max-steps-footer .ui-btn {
    width: 100%;
  }
  .max-steps-summary {
    display: grid;
    grid-template-columns: 1fr;
  }
  .max-steps-summary span,
  .max-steps-summary em {
    justify-content: space-between;
  }
}


/* Follow live node camera mode — pass15 2026-06-24 */
.canvas-wrap.follow-live-panning .canvas,
.canvas-wrap.follow-live-panning .wire-layer {
  transition: transform .28s ease;
}
.setup-run-view-card .field-help {
  margin-top: -2px;
}


/* Project selector layout — pass17 2026-06-24 */
.project-actions-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}
.project-actions-row #projectSelect {
  grid-column: 1 / -1;
  min-width: 0;
  width: 100%;
  text-overflow: ellipsis;
}
.project-actions-row .ui-btn {
  width: 100%;
  min-width: 0;
  padding-inline: 8px;
}
.project-actions-row #renameProjectBtn {
  min-width: 0;
}
@media (max-width: 760px) {
  .project-actions-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Chat message copy UX — pass21 2026-06-25 */
.r3-chat-bubble {
  position: relative;
  padding-right: 54px;
}
.r3-chat-bubble-actions {
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: opacity .14s ease, transform .14s ease;
}
.r3-chat-bubble-actions.top {
  position: absolute;
  top: 7px;
  right: 7px;
  opacity: 0;
  transform: translateY(-2px);
}
.r3-chat-bubble-actions.bottom {
  position: static;
  justify-content: flex-end;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--soft-line) 52%, transparent);
  opacity: 1;
  transform: none;
}
.r3-chat-row:hover .r3-chat-bubble-actions.top,
.r3-chat-row:focus-within .r3-chat-bubble-actions.top,
.r3-chat-copy-btn:focus-visible {
  opacity: 1;
  transform: translateY(0);
}
.r3-chat-copy-btn {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid color-mix(in srgb, var(--soft-line) 72%, transparent);
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  color: var(--muted);
  padding: 3px 7px;
  font-size: 10px;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 2px 2px 0 var(--shadow);
}
.r3-chat-copy-btn span {
  font-size: 12px;
  line-height: 1;
}
.r3-chat-copy-btn b {
  font: inherit;
  color: inherit;
}
.r3-chat-copy-btn:hover,
.r3-chat-copy-btn:focus-visible,
.r3-chat-copy-btn.is-copied {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 13%, var(--panel));
  color: var(--accent);
  transform: translate(-1px, -1px);
}
.r3-chat-copy-btn[disabled] {
  opacity: .35;
  cursor: not-allowed;
}
@media (hover: none), (pointer: coarse) {
  .r3-chat-bubble {
    padding-right: 42px;
  }
  .r3-chat-bubble-actions.top {
    opacity: 1;
    transform: none;
  }
  .r3-chat-copy-btn {
    min-width: 31px;
    padding-inline: 6px;
  }
  .r3-chat-copy-btn b {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-bubble {
  padding-right: 43px !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-copy-btn {
  min-height: 25px !important;
  box-shadow: 1px 1px 0 var(--shadow) !important;
}



/* Kanban # command prompt helper — pass22 2026-06-25 */
.mention-feature-help {
  line-height: 1.35;
}
.board-command-picker .card-mention-pill {
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* Kanban card preview UX — pass24 2026-06-25
   Prioritize readable descriptions on dense AI-created cards. */
.board-card-item {
  position: relative;
  max-height: none;
  min-height: 146px;
  overflow: hidden;
  align-content: start;
  gap: 6px;
  padding-bottom: 42px;
}
.board-card-item:has(> p) {
  min-height: 168px;
}
.board-card-top {
  order: 1;
  min-width: 0;
}
.board-card-top b {
  font-size: 14px;
  line-height: 1.18;
  -webkit-line-clamp: 2;
}
.board-card-top span {
  align-self: start;
}
.board-card-item > p {
  order: 2;
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3 !important;
  min-height: calc(1.35em * 2);
  max-height: calc(1.35em * 3) !important;
  overflow: hidden;
  color: color-mix(in srgb, var(--ink) 72%, var(--muted));
}
.board-card-meta {
  order: 3;
  font-size: 9px;
  line-height: 1.25;
}
.board-card-item:has(> p) .board-mini-checklist {
  display: none;
}
.board-card-actions {
  order: 5;
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  padding-top: 0;
  background: linear-gradient(180deg, transparent, var(--panel) 22%);
  min-height: 30px;
  align-items: end;
}
.board-card-actions .ui-btn.mini {
  padding: 5px 8px;
  font-size: 11px;
}
@media (hover: hover) and (pointer: fine) {
  .board-card-actions {
    opacity: .58;
    transition: opacity .14s ease;
  }
  .board-card-item:hover .board-card-actions,
  .board-card-item:focus-within .board-card-actions {
    opacity: 1;
  }
}
@media (max-width: 760px) {
  .board-card-item,
  .board-card-item:has(> p) {
    min-height: 156px;
  }
  .board-card-item > p {
    -webkit-line-clamp: 2 !important;
    min-height: calc(1.35em * 2);
    max-height: calc(1.35em * 2) !important;
  }
}



/* Board card delete confirmation — pass28 2026-06-25 */
.board-card-item.is-delete-confirming {
  outline: 1px solid color-mix(in srgb, var(--danger) 62%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 14%, transparent);
}
.board-card-actions .ui-btn.mini.danger.is-confirming {
  background: color-mix(in srgb, var(--danger) 18%, var(--panel));
  border-color: color-mix(in srgb, var(--danger) 82%, var(--soft-line));
  color: var(--danger);
  font-weight: 800;
  transform: translateY(-1px);
}
@media (hover: hover) and (pointer: fine) {
  .board-card-actions .ui-btn.mini.danger.is-confirming:hover {
    background: color-mix(in srgb, var(--danger) 24%, var(--panel));
  }
}


/* Stripe billing increment */
.stripe-billing-dialog { width: min(640px, calc(100vw - 28px)); }
.billing-pro-card {
  border-color: color-mix(in srgb, var(--accent) 72%, var(--soft-line)) !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, var(--bg)), var(--bg)) !important;
}
.billing-actions { flex-wrap: wrap; }
.billing-actions [data-billing-checkout],
.billing-actions [data-billing-portal] { min-width: 160px; }
.stripe-billing-dialog .form-message {
  margin: 0;
  min-height: 20px;
}
.stripe-billing-dialog .form-message.is-ok { color: #8fd18f; }
.stripe-billing-dialog .form-message.is-error { color: var(--danger); }
@media (max-width: 620px) {
  .billing-actions { align-items: stretch; }
  .billing-actions .ui-btn { width: 100%; }
}


/* Stripe billing pricing modal — pass31 */
.stripe-billing-dialog.billing-upgrade-dialog {
  width: min(980px, calc(100vw - 26px));
  max-height: min(92vh, 940px);
  padding: 0;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  box-shadow: 14px 14px 0 var(--shadow);
}
.stripe-billing-dialog.billing-upgrade-dialog::backdrop {
  background: rgba(0,0,0,.58);
  backdrop-filter: blur(3px);
}
.billing-upgrade-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  max-height: min(92vh, 940px);
  overflow: hidden;
}
.billing-upgrade-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 22px 18px;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 24%, transparent), transparent 38%),
    linear-gradient(135deg, color-mix(in srgb, var(--panel-2) 82%, var(--accent) 8%), var(--panel));
}
.billing-hero-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.billing-eyebrow,
.billing-plan-kicker {
  color: var(--accent);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.billing-hero-copy strong {
  font-size: clamp(26px, 4vw, 40px);
  line-height: 1;
  letter-spacing: -.04em;
}
.billing-hero-copy span[data-billing-subtitle] {
  color: var(--muted);
  font-size: 13px;
}
.billing-close-btn { flex: 0 0 auto; }
.billing-upgrade-body {
  overflow: auto;
  display: grid;
  gap: 14px;
  padding: 16px 18px 18px;
}
.billing-status-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border: 1px solid var(--soft-line);
  background: color-mix(in srgb, var(--bg) 82%, var(--panel) 18%);
  padding: 10px 12px;
  box-shadow: 3px 3px 0 var(--shadow);
}
.billing-status-dot {
  width: 11px;
  height: 11px;
  border: 1px solid var(--line);
  background: var(--muted);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--muted) 16%, transparent);
}
.billing-status-card[data-tone="ok"] .billing-status-dot {
  background: #8fd18f;
  box-shadow: 0 0 0 4px color-mix(in srgb, #8fd18f 18%, transparent);
}
.billing-status-card[data-tone="warn"] .billing-status-dot,
.billing-status-card[data-tone="admin"] .billing-status-dot {
  background: var(--check-gold);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--check-gold) 18%, transparent);
}
.billing-status-card b {
  display: block;
  color: var(--ink);
  font-size: 13px;
}
.billing-status-card small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  line-height: 1.35;
}
.billing-plan-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.billing-plan-card {
  position: relative;
  display: grid;
  gap: 12px;
  align-content: start;
  min-height: 100%;
  border: 1px solid var(--soft-line);
  background: var(--bg);
  padding: 16px;
  box-shadow: 5px 5px 0 var(--shadow);
  overflow: hidden;
}
.billing-plan-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--soft-line);
}
.billing-plan-card.is-current {
  border-color: color-mix(in srgb, var(--accent) 72%, var(--soft-line));
}
.billing-plan-card.is-current::before,
.billing-featured-card::before {
  background: var(--accent);
}
.billing-featured-card {
  border-color: color-mix(in srgb, var(--accent) 78%, var(--soft-line));
  background:
    radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 28%),
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, var(--bg)), var(--bg));
  box-shadow: 7px 7px 0 var(--shadow), 0 0 0 2px color-mix(in srgb, var(--accent) 16%, transparent);
}
.billing-card-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}
.billing-plan-badge {
  border: 1px solid var(--soft-line);
  background: var(--panel);
  color: var(--muted);
  padding: 4px 7px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.billing-plan-badge.recommended,
.billing-plan-badge.is-active {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
}
.billing-plan-card h3 {
  margin: 0;
  font-size: 24px;
  letter-spacing: -.03em;
}
.billing-price {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.billing-price b {
  font-size: clamp(30px, 5vw, 44px);
  line-height: .95;
  color: var(--ink);
}
.billing-price span {
  color: var(--muted);
  font-size: 13px;
}
.billing-plan-summary {
  margin: 0;
  min-height: 42px;
  color: var(--muted);
  line-height: 1.42;
}
.billing-mini-list {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--ink);
  font-size: 13px;
}
.billing-mini-list li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 7px;
  align-items: start;
}
.billing-mini-list span {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1px solid color-mix(in srgb, var(--accent) 68%, var(--soft-line));
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  font-weight: 900;
  line-height: 1;
}
.billing-mini-list li.is-missing {
  color: var(--muted);
}
.billing-mini-list li.is-missing span {
  border-color: color-mix(in srgb, var(--danger) 62%, var(--soft-line));
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 8%, transparent);
}
.billing-plan-card .ui-btn.full {
  margin-top: auto;
}
.billing-current-btn[disabled] {
  opacity: .82;
  color: var(--muted);
}
.billing-compare-card {
  border: 1px solid var(--soft-line);
  background: color-mix(in srgb, var(--bg) 86%, var(--panel) 14%);
  box-shadow: 4px 4px 0 var(--shadow);
  overflow: hidden;
}
.billing-compare-card > header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  align-items: end;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--soft-line);
  background: color-mix(in srgb, var(--panel-2) 70%, transparent);
}
.billing-compare-card header b {
  display: block;
  color: var(--accent);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.billing-compare-card header span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}
.billing-compare-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  text-align: center;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.billing-feature-list {
  display: grid;
}
.billing-feature-group {
  padding: 9px 14px 6px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--soft-line) 75%, transparent);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.billing-feature-group:first-child { border-top: 0; }
.billing-feature-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px 110px;
  gap: 8px;
  align-items: center;
  min-height: 42px;
  padding: 8px 14px;
  border-top: 1px solid color-mix(in srgb, var(--soft-line) 68%, transparent);
}
.billing-feature-name {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.3;
}
.billing-feature-plan {
  display: flex;
  justify-content: center;
  min-width: 0;
}
.billing-feature-yes,
.billing-feature-no,
.billing-feature-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  min-height: 28px;
  padding: 4px 8px;
  border: 1px solid var(--soft-line);
  background: var(--panel);
  color: var(--ink);
  font-size: 11px;
  line-height: 1.15;
  text-align: center;
}
.billing-feature-mark {
  display: grid;
  place-items: center;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  border: 1px solid currentColor;
  background: color-mix(in srgb, currentColor 8%, transparent);
  font-size: 13px;
  font-weight: 950;
  line-height: 1;
}
.billing-feature-yes {
  border-color: color-mix(in srgb, var(--accent) 70%, var(--soft-line));
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, var(--panel));
}
.billing-feature-no {
  border-color: color-mix(in srgb, var(--danger) 48%, var(--soft-line));
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 6%, var(--panel));
}
.billing-feature-no em {
  color: var(--muted);
}
.billing-feature-yes em,
.billing-feature-no em {
  font-style: normal;
}
.billing-feature-value {
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
}
.billing-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.billing-trust-row span {
  border: 1px solid var(--soft-line);
  background: color-mix(in srgb, var(--panel) 72%, transparent);
  color: var(--muted);
  padding: 7px 9px;
  font-size: 11px;
  line-height: 1.2;
}
.billing-upgrade-dialog .billing-actions {
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid var(--line);
  background: var(--panel-2);
}
.billing-upgrade-dialog .form-message {
  margin: 0;
  min-height: 20px;
}
@media (max-width: 760px) {
  .stripe-billing-dialog.billing-upgrade-dialog {
    width: calc(100vw - 14px);
    max-height: calc(100vh - 14px);
  }
  .billing-upgrade-hero {
    padding: 16px;
  }
  .billing-plan-cards,
  .billing-compare-card > header {
    grid-template-columns: 1fr;
  }
  .billing-compare-head {
    display: none;
  }
  .billing-feature-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
    align-items: start;
  }
  .billing-feature-plan {
    justify-content: stretch;
  }
  .billing-feature-plan::before {
    display: inline-flex;
    width: 56px;
    flex: 0 0 56px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
  }
  .billing-feature-plan:not(.is-pro)::before { content: 'Free'; }
  .billing-feature-plan.is-pro::before { content: 'Pro'; }
  .billing-feature-yes,
  .billing-feature-no,
  .billing-feature-value {
    flex: 1 1 auto;
    justify-content: flex-start;
  }
  .billing-upgrade-dialog .billing-actions {
    align-items: stretch;
  }
  .billing-upgrade-dialog .billing-actions .ui-btn {
    width: 100%;
  }
}

/* Stripe billing pricing modal — pass33 production card comparison */
.stripe-billing-dialog.billing-pricing-pass33 {
  width: min(1080px, calc(100vw - 24px));
  max-height: min(94vh, 980px);
}
.billing-pricing-pass33 .billing-upgrade-card {
  max-height: min(94vh, 980px);
}
.billing-pricing-pass33 .billing-upgrade-body {
  gap: 16px;
  padding: 18px;
}
.billing-pricing-pass33 .billing-plan-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}
.billing-pricing-pass33 .billing-plan-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  gap: 12px;
  padding: 17px;
}
.billing-pricing-pass33 .billing-plan-summary {
  min-height: 48px;
}
.billing-card-feature-list {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.billing-card-section-title {
  margin-top: 5px;
  padding: 8px 0 2px;
  color: var(--accent);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
  border-top: 1px solid color-mix(in srgb, var(--soft-line) 72%, transparent);
}
.billing-card-section-title:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.billing-plan-feature {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  min-height: 40px;
  padding: 8px 9px;
  border: 1px solid color-mix(in srgb, var(--soft-line) 74%, transparent);
  background: color-mix(in srgb, var(--panel) 55%, transparent);
}
.billing-plan-feature .billing-feature-mark {
  width: 20px;
  height: 20px;
  flex-basis: 20px;
  margin-top: 1px;
}
.billing-plan-feature-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.billing-plan-feature-copy b {
  color: var(--ink);
  font-size: 12.5px;
  line-height: 1.25;
}
.billing-plan-feature-copy small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
}
.billing-plan-feature.is-included {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--soft-line));
  background: color-mix(in srgb, var(--accent) 6%, var(--panel));
}
.billing-plan-feature.is-included .billing-feature-mark {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 74%, var(--soft-line));
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.billing-plan-feature.is-missing {
  opacity: .86;
  border-color: color-mix(in srgb, var(--danger) 38%, var(--soft-line));
  background: color-mix(in srgb, var(--danger) 4%, var(--panel));
}
.billing-plan-feature.is-missing .billing-feature-mark {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 70%, var(--soft-line));
  background: color-mix(in srgb, var(--danger) 10%, transparent);
}
.billing-plan-feature.is-missing .billing-plan-feature-copy b,
.billing-plan-feature.is-missing .billing-plan-feature-copy small {
  color: var(--muted);
}
.billing-pricing-pass33 .billing-plan-card .ui-btn.full {
  margin-top: auto;
}
.billing-pricing-pass33 .billing-compare-card,
.billing-pricing-pass33 .billing-trust-row,
.billing-pricing-pass33 [data-billing-detail] {
  display: none !important;
}
.billing-pricing-pass33 .billing-status-card {
  margin-bottom: 0;
}
.billing-pricing-pass33 .form-message {
  min-height: 22px;
}
@media (max-width: 860px) {
  .billing-pricing-pass33 .billing-plan-cards {
    grid-template-columns: 1fr;
  }
  .billing-pricing-pass33 .billing-plan-summary {
    min-height: 0;
  }
}
@media (max-width: 520px) {
  .billing-pricing-pass33 .billing-upgrade-body {
    padding: 12px;
  }
  .billing-pricing-pass33 .billing-plan-card {
    padding: 13px;
  }
  .billing-plan-feature {
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 8px;
    padding: 7px;
  }
}


/* Stripe billing compact feature cards + stale billing UX — pass34 */
.billing-pricing-pass34 .billing-upgrade-body {
  gap: 12px;
  padding: 14px;
}
.billing-pricing-pass34 .billing-plan-cards {
  gap: 12px;
}
.billing-pricing-pass34 .billing-plan-card {
  gap: 9px;
  padding: 14px;
}
.billing-pricing-pass34 .billing-plan-summary {
  min-height: 36px;
  margin-bottom: 2px;
  font-size: 13px;
  line-height: 1.38;
}
.billing-pricing-pass34 .billing-price {
  margin: 2px 0 0;
}
.billing-pricing-pass34 .billing-price b {
  font-size: clamp(34px, 4vw, 46px);
  line-height: .95;
}
.billing-pricing-pass34 .billing-card-feature-list {
  gap: 4px;
}
.billing-pricing-pass34 .billing-card-section-title {
  margin-top: 4px;
  padding: 6px 0 1px;
  font-size: 9px;
  letter-spacing: .15em;
}
.billing-pricing-pass34 .billing-plan-feature {
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  min-height: 30px;
  padding: 5px 7px;
}
.billing-pricing-pass34 .billing-plan-feature .billing-feature-mark {
  width: 17px;
  height: 17px;
  flex-basis: 17px;
  margin-top: 0;
  font-size: 11px;
}
.billing-pricing-pass34 .billing-plan-feature-copy {
  gap: 0;
}
.billing-pricing-pass34 .billing-plan-feature-copy b {
  font-size: 11.5px;
  line-height: 1.18;
}
.billing-pricing-pass34 .billing-plan-feature-copy small {
  font-size: 10px;
  line-height: 1.18;
}
.billing-pricing-pass34 .billing-status-card {
  padding: 8px 10px;
}
.billing-pricing-pass34 .billing-actions {
  padding-block: 10px;
}
@media (max-width: 520px) {
  .billing-pricing-pass34 .billing-upgrade-body {
    padding: 10px;
  }
  .billing-pricing-pass34 .billing-plan-card {
    padding: 11px;
  }
  .billing-pricing-pass34 .billing-plan-feature {
    padding: 5px 6px;
  }
}


/* Mobile production shell polish — pass35
   Intent: phone gets two clean modes: Chat is a compact assistant screen, Flow is a canvas-first editor.
   This intentionally overrides older mobile rescue rules that stacked desktop controls into the viewport. */
html.r3-mobile-device {
  --r3-mobile-top: 58px;
  --r3-mobile-dock: 62px;
  --r3-mobile-gap: 8px;
}

html.r3-mobile-device body {
  background: var(--bg) !important;
  overscroll-behavior: none !important;
}

html.r3-mobile-device .topbar-v2 {
  height: var(--r3-mobile-top) !important;
  min-height: var(--r3-mobile-top) !important;
  max-height: var(--r3-mobile-top) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 7px max(9px, env(safe-area-inset-right, 0px)) 7px max(9px, env(safe-area-inset-left, 0px)) !important;
  overflow: visible !important;
  background: color-mix(in srgb, var(--panel) 97%, #000 3%) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 84%, transparent) !important;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--shadow) 58%, transparent) !important;
}

html.r3-mobile-device .topbar-leading {
  width: auto !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  overflow: hidden !important;
}

html.r3-mobile-device .brand-link {
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
}

html.r3-mobile-device .brand-link .brand-mark {
  min-width: 56px !important;
  min-height: 36px !important;
  padding: 0 8px !important;
  display: inline-grid !important;
  place-items: center !important;
  font-size: 17px !important;
  line-height: 1 !important;
  letter-spacing: .12em !important;
  box-shadow: 2px 2px 0 var(--shadow) !important;
}

html.r3-mobile-device .chat-toggle-btn {
  min-width: 84px !important;
  max-width: 132px !important;
  min-height: 38px !important;
  padding: 7px 10px !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  box-shadow: 2px 2px 0 var(--shadow) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html.r3-mobile-device .chat-toggle-btn::after { content: none !important; }

html.r3-mobile-device .toolbar-v2 {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: 50vw !important;
  min-width: 0 !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  padding: 0 !important;
  overflow: visible !important;
  scrollbar-width: none !important;
}

html.r3-mobile-device .toolbar-v2::-webkit-scrollbar { display: none !important; }

html.r3-mobile-device .toolbar-v2 > .topbar-build-pill,
html.r3-mobile-device .toolbar-v2 > .topbar-status-slot,
html.r3-mobile-device .toolbar-v2 > .topbar-more-menu {
  display: none !important;
}

html.r3-mobile-device .toolbar-v2 > .run-action-group {
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html.r3-mobile-device #saveFlowBtn,
html.r3-mobile-device #undoFlowBtn,
html.r3-mobile-device #redoFlowBtn {
  display: none !important;
}

html.r3-mobile-device #runFlowBtn,
html.r3-mobile-device #stopFlowBtn {
  min-width: 54px !important;
  min-height: 38px !important;
  padding: 0 9px !important;
  gap: 4px !important;
  font-size: 11px !important;
}

html.r3-mobile-device #runFlowBtn b,
html.r3-mobile-device #stopFlowBtn b {
  display: inline !important;
  font-size: 11px !important;
}

html.r3-mobile-device #runFlowBtn span[aria-hidden="true"],
html.r3-mobile-device #stopFlowBtn span[aria-hidden="true"] {
  min-width: 16px !important;
  height: 16px !important;
  border: 0 !important;
  background: transparent !important;
}


html.r3-mobile-device .plan-status-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  max-width: 128px !important;
  min-width: 78px !important;
  min-height: 38px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html.r3-mobile-device .plan-status-label,
html.r3-mobile-device #planStatusUsage,
html.r3-mobile-device #planStatusName,
html.r3-mobile-device #adminPlanBtn {
  display: none !important;
}

html.r3-mobile-device #upgradePlanBtn,
html.r3-mobile-device .plan-upgrade-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 78px !important;
  min-height: 38px !important;
  margin: 0 !important;
  padding: 0 10px !important;
  border: 1px solid color-mix(in srgb, var(--accent) 72%, var(--line)) !important;
  background: color-mix(in srgb, var(--accent) 84%, var(--panel-2)) !important;
  color: var(--accent-ink) !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  box-shadow: 2px 2px 0 var(--shadow) !important;
  white-space: nowrap !important;
}

/* Flow mode: canvas-first, no desktop panel stacking. */
html.r3-mobile-device .app-shell:not(.chat-mode) {
  height: 100svh !important;
  min-height: 100svh !important;
  grid-template-rows: var(--r3-mobile-top) minmax(0, 1fr) !important;
  grid-template-areas: "top" "canvas" !important;
  overflow: hidden !important;
}

html.r3-mobile-device .app-shell:not(.chat-mode) .canvas-wrap {
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  border-width: 1px 0 0 !important;
  box-shadow: none !important;
  background-size: 34px 34px !important;
}

html.r3-mobile-device .app-shell:not(.chat-mode) .canvas-hint {
  display: none !important;
}

html.r3-mobile-device .app-shell:not(.chat-mode) .canvas-wrap::after {
  right: 8px !important;
  bottom: calc(var(--r3-mobile-dock) + 14px + env(safe-area-inset-bottom, 0px)) !important;
  max-width: 112px !important;
  content: var(--zoom, "100%") !important;
  font-size: 10px !important;
  padding: 5px 7px !important;
  opacity: .92 !important;
}

html.r3-mobile-device .app-shell:not(.chat-mode) .r3-node {
  width: min(268px, calc(100vw - 46px)) !important;
  max-height: min(62svh, 440px) !important;
  box-shadow: 5px 5px 0 var(--shadow) !important;
}

html.r3-mobile-device .app-shell:not(.chat-mode) .node-head {
  min-height: 38px !important;
  padding: 5px 6px !important;
}

html.r3-mobile-device .app-shell:not(.chat-mode) .node-body {
  margin: 6px !important;
  padding: 7px !important;
  max-height: 96px !important;
}

html.r3-mobile-device .app-shell:not(.chat-mode) .node-tools {
  padding: 0 6px 7px !important;
  max-height: 162px !important;
}

html.r3-mobile-device .r3-mobile-flow-ui:not(.hidden) {
  display: block !important;
}

html.r3-mobile-device .r3-mobile-flow-ui:not(.has-node):not(.is-connecting) .r3-mobile-flow-hud {
  display: none !important;
}

html.r3-mobile-device .r3-mobile-flow-hud {
  left: 8px !important;
  right: 62px !important;
  top: calc(var(--r3-mobile-top) + 8px) !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  pointer-events: none !important;
}

html.r3-mobile-device .r3-mobile-selected-label,
html.r3-mobile-device .r3-mobile-connect-hint {
  width: auto !important;
  max-width: 100% !important;
  min-height: 30px !important;
  padding: 6px 8px !important;
  font-size: 10.5px !important;
  line-height: 1.15 !important;
  border-radius: 0 !important;
  box-shadow: 2px 2px 0 var(--shadow) !important;
  pointer-events: auto !important;
}

html.r3-mobile-device .r3-mobile-connect-hint {
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
}

html.r3-mobile-device .r3-mobile-zoom-cluster {
  right: 8px !important;
  bottom: calc(var(--r3-mobile-dock) + 18px + env(safe-area-inset-bottom, 0px)) !important;
  gap: 5px !important;
}

html.r3-mobile-device .r3-mobile-zoom-cluster button {
  width: 38px !important;
  min-height: 36px !important;
  font-size: 12px !important;
  box-shadow: 2px 2px 0 var(--shadow) !important;
}

html.r3-mobile-device .r3-mobile-node-bar {
  left: 7px !important;
  right: 7px !important;
  bottom: calc(var(--r3-mobile-dock) + 8px + env(safe-area-inset-bottom, 0px)) !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 4px !important;
  padding: 5px !important;
  background: color-mix(in srgb, var(--panel) 96%, #000 4%) !important;
  box-shadow: 0 -8px 22px color-mix(in srgb, var(--shadow) 70%, transparent) !important;
}

html.r3-mobile-device .r3-mobile-node-bar button {
  min-height: 34px !important;
  padding: 3px 2px !important;
  font-size: 9.3px !important;
  line-height: 1.05 !important;
}

html.r3-mobile-device .r3-mobile-dock {
  min-height: var(--r3-mobile-dock) !important;
  padding: 5px max(6px, env(safe-area-inset-right, 0px)) calc(5px + env(safe-area-inset-bottom, 0px)) max(6px, env(safe-area-inset-left, 0px)) !important;
  background: color-mix(in srgb, var(--panel) 98%, #000 2%) !important;
  box-shadow: 0 -8px 22px color-mix(in srgb, var(--shadow) 72%, transparent) !important;
}

html.r3-mobile-device .r3-mobile-dock button {
  min-height: 48px !important;
  padding: 4px 1px !important;
  gap: 2px !important;
}

html.r3-mobile-device .r3-mobile-dock span {
  font-size: 12px !important;
}

html.r3-mobile-device .r3-mobile-dock b {
  font-size: 9px !important;
  letter-spacing: .01em !important;
}

html.r3-mobile-device .r3-mobile-dock button.active {
  color: var(--accent-ink) !important;
  background: var(--accent) !important;
}

html.r3-mobile-device .panel-section.r3-mobile-active-sheet {
  top: calc(var(--r3-mobile-top) + 8px) !important;
  bottom: calc(var(--r3-mobile-dock) + 9px + env(safe-area-inset-bottom, 0px)) !important;
  left: max(8px, env(safe-area-inset-left, 0px)) !important;
  right: max(8px, env(safe-area-inset-right, 0px)) !important;
  max-height: none !important;
  border-radius: 0 !important;
  z-index: 240 !important;
}

html.r3-mobile-device .panel-section.r3-mobile-active-sheet .panel-summary {
  min-height: 40px !important;
  padding: 9px 10px !important;
}

html.r3-mobile-device .panel-section.r3-mobile-active-sheet .panel-content {
  padding: 10px !important;
}

/* Chat mode: compact assistant screen, pinned composer, no giant stacked toolbar. */
html.r3-mobile-device .app-shell.chat-mode {
  height: 100svh !important;
  min-height: 100svh !important;
  grid-template-rows: var(--r3-mobile-top) minmax(0, 1fr) !important;
  overflow: hidden !important;
}

html.r3-mobile-device .app-shell.chat-mode .brand-link .brand-mark {
  min-width: 56px !important;
  min-height: 36px !important;
  font-size: 17px !important;
}

html.r3-mobile-device .app-shell.chat-mode .chat-toggle-btn {
  min-width: 112px !important;
  max-width: 132px !important;
  font-size: 12px !important;
  color: var(--accent-ink) !important;
  background: var(--accent) !important;
}

html.r3-mobile-device .app-shell.chat-mode .r3-chat-shell {
  height: 100% !important;
  min-height: 0 !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: minmax(0, 1fr) !important;
  background: var(--bg) !important;
}

html.r3-mobile-device .app-shell.chat-mode .r3-chat-main {
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  height: 100% !important;
}

html.r3-mobile-device .r3-chat-mobile-top {
  min-height: 54px !important;
  padding: 8px 10px !important;
  background: color-mix(in srgb, var(--panel) 96%, #000 4%) !important;
  box-shadow: 0 2px 0 var(--shadow) !important;
}

html.r3-mobile-device .r3-chat-mobile-top b {
  font-size: 14px !important;
  letter-spacing: .02em !important;
}

html.r3-mobile-device .r3-chat-mobile-top small {
  font-size: 10.5px !important;
}

html.r3-mobile-device .r3-chat-mobile-top .ui-btn {
  min-width: 78px !important;
  min-height: 34px !important;
  padding: 6px 8px !important;
  font-size: 12px !important;
}

html.r3-mobile-device .app-shell.chat-mode .r3-chat-messages {
  padding: 10px 9px 9px !important;
  gap: 10px !important;
}

html.r3-mobile-device .app-shell.chat-mode .r3-chat-empty {
  width: 100% !important;
  margin: 0 !important;
  padding: 16px 14px !important;
  gap: 8px !important;
  align-self: start !important;
  box-shadow: 3px 3px 0 var(--shadow) !important;
}

html.r3-mobile-device .app-shell.chat-mode .r3-chat-empty h2 {
  font-size: 25px !important;
  line-height: 1.08 !important;
}

html.r3-mobile-device .app-shell.chat-mode .r3-chat-empty p {
  font-size: 14px !important;
  line-height: 1.4 !important;
}

html.r3-mobile-device .app-shell.chat-mode .r3-chat-bubble {
  max-width: 96vw !important;
  padding: 10px 11px !important;
  font-size: 14px !important;
}

html.r3-mobile-device .app-shell.chat-mode .r3-chat-composer {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas:
    "attachments attachments"
    "input send"
    "hint hint" !important;
  gap: 7px !important;
  padding: 8px 9px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  align-items: end !important;
}

html.r3-mobile-device .app-shell.chat-mode .r3-chat-attachment-tray {
  grid-area: attachments !important;
  max-height: 126px;
  overflow: auto;
}

html.r3-mobile-device .app-shell.chat-mode .r3-chat-input-wrap {
  grid-area: input !important;
  padding: 4px !important;
}

html.r3-mobile-device .app-shell.chat-mode .r3-chat-input {
  min-height: 42px !important;
  max-height: 96px !important;
  padding: 8px 45px 8px 8px !important;
  font-size: 16px !important;
}

html.r3-mobile-device .app-shell.chat-mode .r3-chat-send {
  grid-area: send !important;
  width: 72px !important;
  min-width: 72px !important;
  min-height: 50px !important;
  padding: 0 8px !important;
  font-size: 14px !important;
}

html.r3-mobile-device .app-shell.chat-mode .r3-chat-mention-help {
  grid-area: hint !important;
  margin: 0 !important;
  min-height: 0 !important;
  padding: 0 3px !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
  color: var(--muted) !important;
}

html.r3-mobile-device .app-shell.chat-mode .r3-chat-input-wrap .voice-dictation-controls {
  right: 5px !important;
  bottom: 5px !important;
}

@media (max-width: 380px) {
  html.r3-mobile-device {
    --r3-mobile-top: 56px;
    --r3-mobile-dock: 60px;
  }
  html.r3-mobile-device .brand-link .brand-mark,
  html.r3-mobile-device .app-shell.chat-mode .brand-link .brand-mark {
    min-width: 52px !important;
    font-size: 15px !important;
  }
  html.r3-mobile-device .chat-toggle-btn,
  html.r3-mobile-device .app-shell.chat-mode .chat-toggle-btn {
    min-width: 82px !important;
    max-width: 112px !important;
    font-size: 11px !important;
    padding-inline: 7px !important;
  }
  html.r3-mobile-device .plan-status-pill {
    min-width: 68px !important;
    max-width: 96px !important;
  }
  html.r3-mobile-device #upgradePlanBtn,
  html.r3-mobile-device .plan-upgrade-btn {
    min-width: 68px !important;
    font-size: 10px !important;
    padding-inline: 7px !important;
  }
  html.r3-mobile-device .r3-mobile-dock b {
    font-size: 8.2px !important;
  }
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-send {
    width: 66px !important;
    min-width: 66px !important;
  }
}

/* pass35 chat-specific toolbar cleanup */
html.r3-mobile-device .app-shell.chat-mode .toolbar-v2 > .run-action-group {
  display: none !important;
}
html.r3-mobile-device .app-shell.chat-mode .toolbar-v2 {
  max-width: 36vw !important;
}

/* Desktop chat composer layout fix — pass39 2026-06-26
   Keep Send beside the textarea while the Pro/@/# helper stays below the input. */
.app-shell.chat-mode .r3-chat-composer {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "attachments attachments"
    "input send"
    "hint hint";
  align-items: end;
}
.app-shell.chat-mode .r3-chat-attachment-tray {
  grid-area: attachments;
}
.app-shell.chat-mode .r3-chat-input-wrap {
  grid-area: input;
  min-width: 0;
}
.app-shell.chat-mode .r3-chat-send {
  grid-area: send;
  align-self: end;
}
.app-shell.chat-mode .r3-chat-mention-help {
  grid-area: hint;
  grid-column: auto;
  margin: -2px 0 0 2px;
}
@media (max-width: 920px) and (min-width: 761px) {
  .app-shell.chat-mode .r3-chat-composer {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "attachments attachments"
      "input send"
      "hint hint";
  }
  .app-shell.chat-mode .r3-chat-send {
    width: auto;
    min-width: 96px;
  }
}

/* Chat TTS voice controls — pass40 2026-06-27
   Adds unified TTS volume and visually highlights graph start nodes in Chat Run From. */
.setup-tts-card .compact-check,
.r3-chat-voice-settings .compact-check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  padding: 9px;
  border: 1px solid var(--soft-line);
  background: var(--panel);
}
.setup-tts-card .compact-check input,
.r3-chat-voice-settings .compact-check input {
  margin-top: 2px;
}
.r3-chat-voice-settings {
  display: grid;
  gap: 10px;
}
.r3-chat-voice-settings label {
  margin: 0;
}
.r3-chat-voice-settings input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}

.setup-tts-card input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}
#chatStartSelect.has-flow-start-options {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--soft-line));
  box-shadow: inset 4px 0 0 color-mix(in srgb, var(--accent) 76%, transparent);
}
#chatStartSelect option.r3-chat-start-option.is-flow-start {
  background: #2a2118;
  color: #f6d48a;
  font-weight: 800;
}
.setup-tts-card .field-help,
.r3-chat-voice-settings .field-help {
  display: block;
  margin-top: 4px;
}
.r3-chat-voice-settings .is-muted {
  opacity: .56;
}
.r3-chat-run-status.is-error {
  border-color: color-mix(in srgb, var(--danger) 60%, var(--soft-line));
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 8%, var(--bg));
}
.r3-chat-run-status.is-ok {
  border-color: color-mix(in srgb, var(--accent) 54%, var(--soft-line));
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--bg));
}
.r3-chat-copy-btn.r3-chat-speak-btn.is-speaking {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--panel));
}
.r3-chat-bubble {
  padding-right: 118px;
}
@media (hover: none), (pointer: coarse) {
  .r3-chat-bubble {
    padding-right: 74px;
  }
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-bubble {
  padding: 10px 74px 10px 11px !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-bubble-actions.top {
  top: 6px !important;
  right: 6px !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-voice-settings {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 12px !important;
  display: grid !important;
  gap: 10px !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-voice-settings label {
  margin: 0 !important;
  gap: 5px !important;
  font-size: 10px !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-voice-settings select,
html.r3-mobile-device .app-shell.chat-mode .r3-chat-voice-settings input:not([type="checkbox"]) {
  min-height: 40px !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-voice-settings .compact-check {
  padding: 8px !important;
  gap: 8px !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-voice-settings .r3-chat-run-status {
  min-height: 0 !important;
  padding: 7px 8px !important;
  font-size: 11px !important;
}

/* Flow library availability gating — pass42 2026-06-27
   Public flows can be Free + Pro or Pro only; Free users see Pro-only imports as upgrade-gated. */
.r3-action-availability {
  display: grid;
  gap: 6px;
}
.r3-action-availability select {
  width: 100%;
}
.r3-action-availability small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}
.flow-availability-pill {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 2px 6px;
  border: 1px solid var(--soft-line);
  background: color-mix(in srgb, var(--panel-2) 80%, transparent);
  color: var(--muted);
  font-size: 10px;
  line-height: 1.15;
  letter-spacing: .08em;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}
.flow-availability-pill.is-pro-only {
  border-color: color-mix(in srgb, var(--accent) 70%, var(--soft-line));
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--accent-2);
}
.flow-availability-pill.is-free-pro {
  border-color: color-mix(in srgb, var(--ok) 48%, var(--soft-line));
  background: color-mix(in srgb, var(--ok) 10%, transparent);
}
.flow-library-cardlet.is-plan-locked {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
}
.flow-library-cardlet .ui-btn.is-locked {
  border-color: color-mix(in srgb, var(--accent) 70%, var(--line));
  background: color-mix(in srgb, var(--accent) 25%, var(--panel));
}
.flow-library-detail-head .flow-availability-pill {
  margin-left: 10px;
}


/* Flow Library consolidated UX — pass45 2026-06-27
   Editor Library now uses the standalone Library visual language: compact hero, intent-based tabs, card grid, and one clean preview rail. */
.flow-library-dialog-v3 {
  width: min(1240px, calc(100vw - 28px));
  height: min(880px, calc(100vh - 42px));
  max-height: calc(100vh - 42px);
}
.flow-library-card-v3 {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto !important;
  height: 100%;
  overflow: hidden;
  background:
    radial-gradient(circle at 8% -14%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 36%),
    var(--panel);
}
.flow-library-hero-v3 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: start;
  padding: 18px 20px 16px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel-2) 78%, transparent);
}
.flow-library-hero-copy-v3 { display: grid; gap: 9px; min-width: 0; }
.flow-library-kicker-v3 {
  color: var(--accent);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .17em;
  text-transform: uppercase;
}
.flow-library-hero-copy-v3 h2 {
  margin: 0;
  font-size: clamp(28px, 4.2vw, 54px);
  line-height: .92;
  letter-spacing: -.055em;
}
.flow-library-hero-copy-v3 p {
  margin: 0;
  max-width: 820px;
  color: var(--muted);
  line-height: 1.45;
}
.flow-library-hero-actions-v3 { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.flow-library-stats-v3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(84px, 128px));
  gap: 8px;
  margin-top: 4px;
}
.flow-library-stats-v3 span {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid var(--soft-line);
  background: var(--bg);
}
.flow-library-stats-v3 b { font-size: 22px; line-height: 1; text-align: right; }
.flow-library-stats-v3 small { color: var(--muted); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.flow-library-toolbar-v3 {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto minmax(0, auto);
  gap: 10px;
  align-items: end;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 86%, var(--bg));
}
.flow-library-searchbar-v3 { margin: 0; }
.flow-library-searchbar-v3 input { margin-top: 5px; }
.flow-library-count-v3 {
  align-self: end;
  border: 1px solid var(--soft-line);
  background: var(--bg);
  color: var(--muted);
  min-height: 39px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.flow-library-tabs-v3 {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  justify-content: flex-end;
}
.flow-library-tabs-v3 .flow-library-tab { min-height: 39px; padding-inline: 12px; }
.flow-library-body-v3 {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px) !important;
  padding: 14px !important;
  gap: 14px;
  overflow: hidden;
}
.flow-library-main-pane-v3,
.flow-library-pane.is-active { min-height: 0; }
.flow-library-main-pane-v3 { overflow: hidden; }
.flow-library-main-pane-v3 .flow-library-pane.is-active {
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: 12px;
  overflow: hidden;
}
.flow-library-pane-head-v3 {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 12px;
  border: 1px solid var(--soft-line);
  background: color-mix(in srgb, var(--bg) 82%, var(--panel));
  padding: 12px;
}
.flow-library-pane-head-v3 h3 {
  margin: 0;
  color: var(--accent);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.flow-library-pane-head-v3 p {
  margin: 4px 0 0;
  color: var(--muted);
  line-height: 1.35;
}
.flow-library-grid-v3 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  align-content: start;
  gap: 12px;
  min-height: 0;
  overflow: auto;
  padding: 2px 2px 12px;
  scrollbar-gutter: stable;
}
.flow-library-section-stack-v3 {
  display: grid;
  gap: 14px;
  min-height: 0;
  overflow: auto;
  padding-right: 4px;
  scrollbar-gutter: stable;
}
.flow-library-subsection-v3 {
  display: grid;
  gap: 10px;
  min-height: 220px;
}
.flow-library-subsection-v3 + .flow-library-subsection-v3 {
  padding-top: 12px;
  border-top: 1px solid var(--soft-line);
}
.flow-library-subhead-v3 {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
}
.flow-library-subhead-v3 b {
  color: var(--ink);
  font-size: 14px;
}
.flow-library-subhead-v3 small { text-align: right; }
.flow-library-project-select-v3 { margin: 0; }
.flow-library-cardlet-v3 {
  position: relative;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 12px;
  min-height: 230px;
  padding: 14px 14px 13px 17px !important;
  overflow: hidden;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 90%, transparent);
  box-shadow: 5px 5px 0 var(--shadow);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.flow-library-cardlet-v3::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: var(--accent);
  opacity: .75;
}
.flow-library-cardlet-v3:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
  box-shadow: 7px 7px 0 var(--shadow);
}
.flow-library-cardlet-main-v3 { display: grid; align-content: start; gap: 8px; min-width: 0; }
.flow-library-cardlet-top-v3 {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 8px;
}
.flow-library-cardlet-top-v3 h4 {
  margin: 0;
  font-size: 17px;
  line-height: 1.12;
  overflow-wrap: anywhere;
}
.flow-library-cardlet-top-v3 > div {
  display: flex;
  justify-content: flex-end;
  gap: 5px;
  flex-wrap: wrap;
}
.flow-library-cardlet-v3 small {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.35;
}
.flow-library-cardlet-v3 p {
  margin: 0 !important;
  color: var(--muted);
  line-height: 1.42;
}
.flow-library-type-chips-v3,
.flow-library-actions-v3 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.flow-library-type-chips-v3 span {
  border: 1px solid var(--soft-line);
  background: var(--bg);
  color: var(--muted);
  padding: 4px 7px;
  font-size: 11px;
}
.flow-library-actions-v3 {
  padding-top: 10px;
  border-top: 1px solid var(--soft-line);
  justify-content: flex-start !important;
  max-width: none !important;
}
.flow-library-actions-v3 .ui-btn.primary { min-width: 126px; }
.flow-library-detail-panel-v3 {
  height: 100%;
  min-height: 0;
  overflow: auto;
  background: color-mix(in srgb, var(--bg) 90%, var(--panel));
}
.flow-library-foot-v3 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.flow-library-foot-v3 > span {
  color: var(--muted);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.flow-library-foot-v3 > div { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.flow-library-json-tools-v3 {
  border: 1px solid var(--soft-line);
  background: var(--bg);
  padding: 12px;
  overflow: auto;
}
.flow-library-json-tools-v3 textarea { min-height: 260px; }
@media (max-width: 1020px) {
  .flow-library-body-v3 { grid-template-columns: 1fr !important; overflow: auto; }
  .flow-library-detail-panel-v3 { height: auto; min-height: 180px; }
  .flow-library-toolbar-v3 { grid-template-columns: 1fr auto; }
  .flow-library-tabs-v3 { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 720px) {
  .flow-library-dialog-v3 { width: calc(100vw - 12px); height: calc(100vh - 18px); max-height: calc(100vh - 18px); }
  .flow-library-hero-v3 { grid-template-columns: 1fr; padding: 14px; }
  .flow-library-hero-copy-v3 h2 { font-size: 34px; }
  .flow-library-stats-v3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .flow-library-toolbar-v3 { grid-template-columns: 1fr; }
  .flow-library-count-v3 { justify-content: center; }
  .flow-library-tabs-v3 { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px !important; }
  .flow-library-grid-v3 { grid-template-columns: 1fr; overflow: visible; padding-bottom: 0; }
  .flow-library-section-stack-v3 { overflow: visible; }
  .flow-library-cardlet-v3 { min-height: 0; }
  .flow-library-foot-v3 { align-items: stretch; flex-direction: column; }
  .flow-library-foot-v3 > div { justify-content: stretch; }
  .flow-library-foot-v3 .ui-btn { flex: 1 1 auto; }
}

/* Flow Library product UX — pass46 2026-06-27
   Adds marketplace-style filtering, clearer cards, richer preview panel, and mobile-safe library controls. */
.flow-library-dialog-v4 .flow-library-toolbar-v4 {
  grid-template-columns: minmax(260px, 1fr) auto minmax(360px, auto);
  align-items: end;
}
.flow-library-filters-v4 {
  display: grid;
  grid-template-columns: repeat(3, minmax(118px, 1fr)) auto;
  gap: 8px;
  align-items: end;
  min-width: 0;
}
.flow-library-filters-v4 label {
  margin: 0;
  min-width: 0;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.flow-library-filters-v4 select {
  width: 100%;
  min-height: 39px;
  margin-top: 5px;
  text-transform: none;
  letter-spacing: normal;
  font-size: 12px;
}
.flow-library-filters-v4 .ui-btn { min-height: 39px; white-space: nowrap; }
.flow-library-cardlet-v4 {
  cursor: pointer;
  min-height: 258px;
}
.flow-library-cardlet-v4:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.flow-library-cardlet-v4 .flow-library-cardlet-main-v3 > p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.flow-library-mini-stats-v4 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.flow-library-mini-stats-v4 span {
  border: 1px solid var(--soft-line);
  background: var(--bg);
  color: var(--muted);
  padding: 5px 6px;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
}
.flow-library-lock-note-v4 {
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--soft-line));
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent-2) !important;
  padding: 7px 8px;
  font-size: 12px;
}
.flow-library-detail-head-v4 {
  display: grid;
  gap: 6px;
}
.flow-library-detail-stats-v4 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.flow-library-detail-stats-v4 div {
  border: 1px solid var(--soft-line);
  background: var(--panel);
  padding: 9px;
  display: grid;
  gap: 3px;
}
.flow-library-detail-stats-v4 b {
  font-size: 22px;
  line-height: 1;
  text-align: right;
}
.flow-library-detail-stats-v4 span {
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.flow-library-requires-pro-v4 {
  border: 1px solid color-mix(in srgb, var(--accent) 58%, var(--line));
  background: color-mix(in srgb, var(--accent) 13%, var(--bg));
  padding: 10px;
  display: grid;
  gap: 5px;
}
.flow-library-requires-pro-v4 b {
  color: var(--accent);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 11px;
}
.flow-library-requires-pro-v4 span {
  color: var(--muted);
  line-height: 1.4;
}
.flow-library-detail-types-v4 .flow-library-type-chips-v3 { margin-top: 8px; }
.flow-library-detail-actions-v4 {
  position: sticky;
  bottom: 0;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(8px);
  padding-top: 10px;
}
@media (max-width: 1180px) {
  .flow-library-dialog-v4 .flow-library-toolbar-v4 { grid-template-columns: 1fr auto; }
  .flow-library-filters-v4 { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .flow-library-filters-v4 { grid-template-columns: 1fr 1fr; }
  .flow-library-filters-v4 .ui-btn { grid-column: 1 / -1; }
  .flow-library-cardlet-v4 { min-height: 0; }
  .flow-library-mini-stats-v4 { grid-template-columns: 1fr; }
  .flow-library-detail-stats-v4 { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .flow-library-filters-v4 { grid-template-columns: 1fr; }
}


/* Admin username identity tools — pass49 2026-06-27 */
.admin-identity-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  align-items: end;
}
.admin-inline-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.admin-selected-user label span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
@media (max-width: 720px) {
  .admin-identity-grid { grid-template-columns: 1fr; }
  .admin-inline-actions .ui-btn { width: 100%; }
}


/* Admin User Tools UX polish — pass50 2026-06-27
   Wider, two-column admin panel with clearer user results, public identity, and plan testing sections. */
.admin-user-tools-dialog {
  width: min(980px, calc(100vw - 32px));
}
.admin-user-tools-card {
  max-height: min(90vh, 820px);
  min-height: min(720px, calc(100vh - 48px));
  overflow: hidden;
}
.admin-tools-head {
  align-items: flex-start;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, transparent), transparent 62%),
    color-mix(in srgb, var(--panel-2) 88%, var(--bg));
}
.admin-tools-head strong {
  font-size: clamp(18px, 2.2vw, 25px);
  letter-spacing: -.02em;
}
.admin-tools-eyebrow {
  display: inline-flex !important;
  width: fit-content;
  margin: 0 0 5px !important;
  padding: 3px 7px;
  border: 1px solid color-mix(in srgb, var(--accent) 60%, var(--soft-line));
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent) !important;
  font-size: 10px !important;
  font-weight: 900;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.admin-tools-body {
  gap: 14px;
  padding: 16px;
  overflow: hidden;
  min-height: 0;
}
.admin-tools-search-card,
.admin-tools-card-section,
.admin-tools-sidebar,
.admin-tools-detail {
  border: 1px solid var(--soft-line);
  background: color-mix(in srgb, var(--bg) 78%, var(--panel) 22%);
  box-shadow: 3px 3px 0 var(--shadow);
}
.admin-tools-search-card {
  display: grid;
  grid-template-columns: minmax(220px, .62fr) minmax(0, 1fr);
  gap: 14px;
  align-items: end;
  padding: 14px;
}
.admin-tools-search-copy {
  display: grid;
  gap: 4px;
}
.admin-tools-search-copy b,
.admin-tools-section-head b {
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.admin-tools-search-copy span,
.admin-tools-section-head small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}
.admin-tools-layout {
  display: grid;
  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
  gap: 14px;
  min-height: 0;
  overflow: hidden;
}
.admin-tools-sidebar,
.admin-tools-detail {
  min-height: 0;
}
.admin-tools-sidebar {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: 12px;
  gap: 10px;
}
.admin-tools-section-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--soft-line);
}
.admin-user-results {
  max-height: none;
  overflow: auto;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  scrollbar-gutter: stable;
}
.admin-user-result {
  border-color: color-mix(in srgb, var(--soft-line) 76%, transparent);
  background: color-mix(in srgb, var(--panel) 82%, var(--bg));
  padding: 10px;
  box-shadow: 2px 2px 0 var(--shadow);
}
.admin-user-result.is-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, var(--panel));
  box-shadow: inset 3px 0 0 var(--accent), 2px 2px 0 var(--shadow);
}
.admin-user-result b {
  color: var(--ink);
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
}
.admin-user-result small {
  margin-top: 2px;
}
.admin-tools-detail {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 14px;
  overflow: auto;
}
.admin-selected-hero {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 11px !important;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--soft-line);
}
.admin-user-avatar {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid color-mix(in srgb, var(--accent) 60%, var(--soft-line));
  background: color-mix(in srgb, var(--accent) 14%, var(--panel));
  color: var(--accent);
  font-weight: 1000;
  font-size: 22px;
  box-shadow: 3px 3px 0 var(--shadow);
}
.admin-selected-hero b {
  color: var(--ink);
  font-size: 18px;
  letter-spacing: -.01em;
  text-transform: none;
}
.admin-selected-hero small {
  color: var(--muted);
  font-size: 13px;
}
.admin-usage-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.admin-usage-grid span {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--soft-line);
  background: var(--panel);
}
.admin-usage-grid b {
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.admin-usage-grid em {
  color: var(--ink);
  font-style: normal;
  font-size: 12px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-tools-card-section {
  display: grid;
  gap: 10px;
  padding: 12px;
}
.admin-identity-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}
.admin-inline-actions {
  justify-content: flex-start;
}
.admin-inline-actions .ui-btn {
  min-width: 150px;
}
.admin-tools-message {
  margin: 0;
  min-height: 22px;
  padding: 9px 10px;
  border: 1px solid var(--soft-line);
  background: var(--panel);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}
.admin-tools-foot {
  background: color-mix(in srgb, var(--panel-2) 88%, var(--bg));
}
@media (max-width: 900px) {
  .admin-tools-search-card,
  .admin-tools-layout {
    grid-template-columns: 1fr;
  }
  .admin-tools-sidebar {
    max-height: 220px;
  }
  .admin-user-tools-card {
    min-height: 0;
  }
}
@media (max-width: 640px) {
  .admin-user-tools-dialog {
    width: calc(100vw - 14px);
  }
  .admin-tools-body {
    padding: 10px;
    overflow: auto;
  }
  .admin-tools-layout {
    overflow: visible;
  }
  .admin-tools-sidebar,
  .admin-tools-detail {
    overflow: visible;
  }
  .admin-plan-search-row,
  .admin-identity-grid,
  .admin-usage-grid {
    grid-template-columns: 1fr;
  }
  .admin-plan-search-row .ui-btn,
  .admin-inline-actions .ui-btn {
    width: 100%;
  }
}


/* Admin User Tools compact UX correction — pass51 2026-06-27
   Removes the oversized side-card result panel; search results are now compact and selected user editing owns the main space. */
.admin-user-tools-dialog {
  width: min(920px, calc(100vw - 28px));
}
.admin-user-tools-card {
  min-height: 0;
  max-height: min(88vh, 760px);
  overflow: hidden;
}
.admin-tools-body {
  overflow: auto;
  padding: 14px 16px 16px;
}
.admin-tools-head {
  padding-block: 16px 14px;
}
.admin-tools-search-card {
  grid-template-columns: minmax(180px, 280px) minmax(0, 1fr);
  padding: 12px;
  box-shadow: 2px 2px 0 var(--shadow);
}
.admin-tools-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  overflow: visible;
}
.admin-tools-results-band {
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 8px;
  padding: 11px;
  min-height: 0;
  max-height: none;
  overflow: visible;
}
.admin-tools-results-band .admin-tools-section-head {
  padding-bottom: 7px;
}
.admin-user-results {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
  align-content: start;
  align-items: start;
  gap: 8px;
  max-height: 156px;
  overflow: auto;
  padding-right: 2px;
  scrollbar-gutter: stable;
}
.admin-user-result {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  min-height: 56px;
  height: auto;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  box-shadow: none;
}
.admin-user-result.is-active {
  box-shadow: inset 3px 0 0 var(--accent);
}
.admin-result-avatar {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--soft-line));
  background: color-mix(in srgb, var(--accent) 12%, var(--panel));
  color: var(--accent);
  font-weight: 1000;
  line-height: 1;
}
.admin-result-main {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.admin-user-result em {
  align-self: center;
  justify-self: end;
  max-width: 110px;
  padding: 3px 6px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--soft-line));
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.admin-tools-message {
  min-height: 0;
  padding: 7px 9px;
}
.admin-tools-detail {
  overflow: visible;
  padding: 13px;
  box-shadow: 2px 2px 0 var(--shadow);
}
.admin-selected-hero {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  padding: 0 0 12px;
}
.admin-selected-hero .admin-tools-eyebrow {
  margin-bottom: 4px !important;
}
.admin-selected-hero b {
  display: block;
  margin-bottom: 1px;
}
.admin-usage-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.admin-tools-editor-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(260px, .9fr);
  gap: 12px;
}
.admin-tools-card-section {
  align-content: start;
  box-shadow: none;
}
.admin-identity-grid {
  grid-template-columns: minmax(0, 1fr);
}
.admin-tools-foot {
  padding-block: 12px;
}
@media (max-width: 760px) {
  .admin-user-tools-dialog { width: calc(100vw - 12px); }
  .admin-user-tools-card { max-height: calc(100dvh - 18px); }
  .admin-tools-body { padding: 10px; }
  .admin-tools-search-card,
  .admin-tools-editor-grid,
  .admin-usage-grid { grid-template-columns: 1fr; }
  .admin-user-results { grid-template-columns: 1fr; max-height: 210px; }
  .admin-user-result { grid-template-columns: 28px minmax(0, 1fr); }
  .admin-user-result em { justify-self: start; grid-column: 2; }
}


/* Flow Library final polish — pass42 2026-06-27 */
.flow-library-cardlet-v5 {
  min-height: 246px;
  border-color: color-mix(in srgb, var(--line) 78%, var(--soft-line));
}
.flow-library-cardlet-v5.flow-requires-pro::before {
  background: color-mix(in srgb, var(--accent) 84%, var(--warning));
}
.flow-library-cardlet-v5 .flow-library-cardlet-top-v3 {
  align-items: flex-start;
}
.flow-library-mini-stats-v5 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.flow-library-mini-stats-v5 span {
  min-height: 30px;
  display: grid;
  place-items: center;
}
.flow-library-lock-note-v5 b {
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 10px;
}
.flow-library-detail-panel-v5 {
  border: 1px solid var(--soft-line);
  box-shadow: 4px 4px 0 var(--shadow);
}
.flow-library-empty-v5 {
  display: grid;
  gap: 7px;
  min-height: 148px;
  align-content: center;
  border: 1px dashed var(--soft-line);
  background: color-mix(in srgb, var(--panel) 58%, transparent);
  padding: 16px;
}
.flow-library-empty-v5 b {
  color: var(--ink);
  font-size: 14px;
}
.flow-library-empty-v5 span {
  color: var(--muted);
  line-height: 1.42;
}
.flow-library-empty-loading b::after {
  content: '…';
  color: var(--accent);
}
.flow-library-empty-error {
  border-color: color-mix(in srgb, var(--danger) 58%, var(--soft-line));
  background: color-mix(in srgb, var(--danger) 8%, var(--panel));
}
.flow-library-detail-head-v5 {
  position: sticky;
  top: 0;
  z-index: 3;
  padding: 12px;
  margin: -1px -1px 0;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel-2) 88%, var(--bg));
}
.flow-library-preview-summary-v5 {
  display: grid;
  gap: 10px;
}
.flow-library-preview-summary-v5 > p {
  margin: 0;
  color: var(--muted);
  line-height: 1.48;
}
.flow-library-detail-stats-v5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.flow-library-detail-stats-v5 div {
  min-width: 0;
}
.flow-library-detail-stats-v5 b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.flow-library-requires-pro-v5 ul {
  margin: 2px 0 0;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.45;
}
.flow-library-import-ok-v5 {
  border: 1px solid color-mix(in srgb, var(--ok) 45%, var(--soft-line));
  background: color-mix(in srgb, var(--ok) 8%, var(--bg));
  padding: 10px;
  display: grid;
  gap: 4px;
}
.flow-library-import-ok-v5 b {
  color: var(--ok);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.flow-library-import-ok-v5 span {
  color: var(--muted);
  line-height: 1.4;
}
.flow-library-detail-types-v5 .flow-library-type-chips-v3 {
  margin: 8px 10px 10px;
}
.flow-library-node-preview-v5 pre {
  max-height: 300px;
}
.flow-library-detail-actions-v4 .ui-btn {
  flex: 1 1 auto;
}
.flow-library-dialog-v4 .flow-library-toolbar-v4 {
  gap: 9px;
}
@media (max-width: 1020px) {
  .flow-library-detail-head-v5 {
    position: static;
  }
  .flow-library-detail-stats-v5 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .flow-library-dialog-v4 .flow-library-toolbar-v4,
  .flow-library-body-v3 {
    overflow: auto;
  }
  .flow-library-hero-actions-v3 .ui-btn,
  .flow-library-foot-v3 .ui-btn,
  .flow-library-actions-v3 .ui-btn {
    min-height: 42px;
  }
  .flow-library-cardlet-top-v3 {
    display: grid;
  }
  .flow-library-cardlet-top-v3 > div {
    justify-content: flex-start;
  }
  .flow-library-mini-stats-v5,
  .flow-library-detail-stats-v5 {
    grid-template-columns: 1fr 1fr;
  }
  .flow-library-actions-v3 {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .flow-library-actions-v3 .ui-btn {
    width: 100%;
  }
}
@media (max-width: 520px) {
  .flow-library-actions-v3,
  .flow-library-mini-stats-v5,
  .flow-library-detail-stats-v5 {
    grid-template-columns: 1fr;
  }
}


/* Auth anti-abuse + login UX polish — pass52 2026-06-27 */
#loginOverlay.auth-overlay:not(.hidden) {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(16px, 3vw, 34px);
  overflow: auto;
  background:
    radial-gradient(circle at 20% 8%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 34rem),
    radial-gradient(circle at 78% 22%, color-mix(in srgb, var(--gate) 26%, transparent), transparent 30rem),
    linear-gradient(var(--soft-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--soft-line) 1px, transparent 1px),
    color-mix(in srgb, var(--bg) 94%, #000 6%);
  background-size: auto, auto, 46px 46px, 46px 46px, auto;
  background-position: center, center, -1px -1px, -1px -1px, center;
}
.auth-shell-v2 {
  width: min(1040px, calc(100vw - 32px));
  min-height: min(620px, calc(100dvh - 48px));
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .82fr);
  gap: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 94%, #000 6%);
  box-shadow: 18px 18px 0 color-mix(in srgb, var(--shadow) 86%, transparent), 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
}
.auth-hero-panel,
.auth-form-panel {
  min-width: 0;
  padding: clamp(24px, 4vw, 46px);
}
.auth-hero-panel {
  position: relative;
  display: grid;
  align-content: end;
  gap: 18px;
  min-height: 520px;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, transparent), transparent 44%),
    linear-gradient(160deg, color-mix(in srgb, var(--panel-2) 82%, #000 18%), color-mix(in srgb, var(--bg) 88%, #000 12%));
  border-right: 1px solid var(--line);
}
.auth-hero-panel::before {
  content: '';
  position: absolute;
  inset: 24px;
  border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 34%, transparent) 1px, transparent 1px),
    linear-gradient(color-mix(in srgb, var(--accent) 34%, transparent) 1px, transparent 1px);
  background-size: 54px 54px;
  opacity: .22;
  z-index: -1;
}
.auth-hero-panel::after {
  content: 'FLOW';
  position: absolute;
  right: -16px;
  top: 22px;
  color: color-mix(in srgb, var(--accent) 16%, transparent);
  font-size: clamp(88px, 14vw, 170px);
  font-weight: 950;
  letter-spacing: -.08em;
  line-height: .82;
  z-index: -1;
}
.auth-kicker {
  width: max-content;
  max-width: 100%;
  border: 1px solid color-mix(in srgb, var(--accent) 70%, var(--line));
  background: color-mix(in srgb, var(--panel) 80%, transparent);
  color: var(--accent);
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.auth-hero-panel h1 {
  margin: 0;
  max-width: 620px;
  font-size: clamp(32px, 5.4vw, 68px);
  line-height: .92;
  letter-spacing: -.055em;
}
.auth-hero-panel p {
  max-width: 610px;
  margin: 0;
  color: var(--muted);
  font-size: clamp(15px, 1.8vw, 18px);
  line-height: 1.55;
}
.auth-benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 8px;
}
.auth-benefits span {
  min-width: 0;
  border: 1px solid var(--soft-line);
  background: color-mix(in srgb, var(--panel) 64%, transparent);
  padding: 10px;
  display: grid;
  gap: 3px;
  box-shadow: 3px 3px 0 var(--shadow);
}
.auth-benefits b {
  color: var(--ink);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.auth-benefits small {
  color: var(--muted);
  line-height: 1.35;
}
.auth-form-panel {
  display: grid;
  align-content: center;
  gap: 15px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 96%, #fff 4%), color-mix(in srgb, var(--panel) 92%, #000 8%));
}
.auth-brand-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin-bottom: 3px;
}
.auth-logo {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 950;
  box-shadow: 4px 4px 0 var(--shadow);
}
.auth-brand-row strong {
  display: block;
  font-size: 22px;
  line-height: 1.15;
}
.auth-brand-row small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  line-height: 1.35;
}
.auth-mode-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--line);
  background: var(--bg);
  box-shadow: 3px 3px 0 var(--shadow);
}
.auth-mode-btn {
  min-height: 42px;
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-weight: 850;
  letter-spacing: .02em;
}
.auth-mode-btn:last-child { border-right: 0; }
.auth-mode-btn:hover,
.auth-mode-btn.is-active {
  background: var(--accent);
  color: var(--accent-ink);
}
.auth-field {
  margin: 0;
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.auth-field span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.auth-field em {
  color: var(--accent);
  font-style: normal;
  font-size: 10px;
}
.auth-field input {
  min-height: 46px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 92%, #fff 8%);
  color: var(--ink);
  padding: 11px 12px;
  font-size: 15px;
  text-transform: none;
  letter-spacing: normal;
  box-shadow: inset 0 0 0 1px transparent;
}
.auth-field input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent), 3px 3px 0 var(--shadow);
}
.auth-field small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  text-transform: none;
  letter-spacing: normal;
}
.auth-submit {
  width: 100%;
  min-height: 48px;
  margin-top: 2px;
  font-size: 15px;
  font-weight: 900;
}
.auth-submit[disabled] { opacity: .68; cursor: wait; }
.auth-message {
  min-height: 22px;
  margin-top: 0;
  color: var(--muted);
  line-height: 1.4;
}
.auth-message.is-error { color: var(--danger); }
.auth-message.is-ok { color: color-mix(in srgb, var(--output) 74%, var(--ink)); }
.r3-honeypot {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  clip-path: inset(50%) !important;
}
@media (max-width: 880px) {
  .auth-shell-v2 {
    grid-template-columns: 1fr;
    width: min(560px, calc(100vw - 24px));
    min-height: 0;
  }
  .auth-hero-panel {
    min-height: 250px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    align-content: center;
  }
  .auth-hero-panel h1 { font-size: clamp(30px, 10vw, 46px); }
  .auth-benefits { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
  #loginOverlay.auth-overlay:not(.hidden) { padding: 10px; }
  .auth-shell-v2 { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); overflow: auto; }
  .auth-hero-panel,
  .auth-form-panel { padding: 20px; }
  .auth-hero-panel { min-height: 220px; }
  .auth-mode-tabs { grid-template-columns: 1fr; }
  .auth-mode-btn { border-right: 0; border-bottom: 1px solid var(--line); }
  .auth-mode-btn:last-child { border-bottom: 0; }
}
html.r3-mobile-device #loginOverlay.auth-overlay:not(.hidden) {
  background:
    radial-gradient(circle at 24% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 26rem),
    color-mix(in srgb, var(--bg) 96%, #000 4%) !important;
  overflow: auto !important;
  touch-action: pan-y !important;
}
html.r3-mobile-device #loginOverlay.auth-overlay:not(.hidden) .auth-shell-v2 {
  width: min(560px, calc(100vw - 24px)) !important;
  max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
  overflow: auto !important;
}

/* Mobile login: keep credentials visible without scrolling past benefit cards. */
html.r3-mobile-device #loginOverlay.auth-overlay:not(.hidden) .auth-benefits {
  display: none !important;
}
html.r3-mobile-device #loginOverlay.auth-overlay:not(.hidden) .auth-hero-panel {
  min-height: 0 !important;
}


/* Community MVP — pass60 2026-06-27 */
.community-dialog { width: min(1180px, calc(100vw - 22px)); max-height: min(92vh, 920px); }
.community-shell { display: grid; grid-template-rows: auto auto minmax(0, 1fr); max-height: min(92vh, 920px); background: radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 28rem), var(--panel); }
.community-hero { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; padding: 18px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--panel-2) 82%, var(--accent) 6%); }
.community-hero h2 { margin: 4px 0 6px; font-size: clamp(24px, 4vw, 38px); letter-spacing: -.04em; }
.community-hero p { margin: 0; color: var(--muted); max-width: 680px; line-height: 1.45; }
.community-kicker { color: var(--accent); font-size: 11px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.community-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.community-toolbar { display: grid; grid-template-columns: minmax(220px, 1fr) 190px 210px auto; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--soft-line); background: color-mix(in srgb, var(--panel) 88%, transparent); }
.community-toolbar label, .community-new-post-card label, .community-reply-box label { margin: 0; }
.community-layout { min-height: 0; display: grid; grid-template-columns: minmax(320px, .82fr) minmax(0, 1.18fr); }
.community-list-pane { min-height: 0; overflow: auto; display: grid; align-content: start; gap: 12px; padding: 14px; border-right: 1px solid var(--line); }
.community-detail-pane { min-height: 0; overflow: auto; padding: 14px; background: color-mix(in srgb, var(--bg) 82%, var(--panel) 18%); }
.community-status-card, .community-new-post-card, .community-post-card, .community-detail-card, .community-comment, .community-attached-flow, .community-empty { border: 1px solid var(--soft-line); background: var(--panel); box-shadow: 3px 3px 0 var(--shadow); }
.community-status-card { display: grid; gap: 4px; padding: 10px; color: var(--muted); line-height: 1.35; }
.community-status-card b { color: var(--ink); }
.community-status-card small { color: var(--muted); font-size: 11px; }
.community-status-card.is-locked { border-color: color-mix(in srgb, var(--accent) 46%, var(--soft-line)); background: color-mix(in srgb, var(--accent) 8%, var(--panel)); }
.community-new-post-card { display: grid; gap: 10px; padding: 12px; }
.community-card-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.community-card-head b { color: var(--accent); text-transform: uppercase; letter-spacing: .12em; font-size: 11px; }
.community-card-head small { color: var(--muted); font-size: 11px; text-align: right; }
.community-new-post-card textarea { min-height: 104px; max-height: 180px; }
.community-post-list { display: grid; gap: 10px; }
.community-post-card { width: 100%; display: grid; gap: 8px; padding: 12px; color: var(--ink); text-align: left; cursor: pointer; }
.community-post-card:hover, .community-post-card.is-active { border-color: var(--accent); transform: translateY(-1px); box-shadow: 5px 5px 0 var(--shadow); }
.community-post-top { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.community-post-top b { font-size: 15px; line-height: 1.25; overflow-wrap: anywhere; }
.community-post-top em { flex: 0 0 auto; border: 1px solid var(--soft-line); background: var(--bg); color: var(--accent); padding: 3px 6px; font-style: normal; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.community-post-excerpt { color: var(--muted); font-size: 12px; line-height: 1.38; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.community-post-meta { color: var(--muted); font-size: 11px; }
.community-post-foot { display: flex; justify-content: space-between; gap: 8px; align-items: center; flex-wrap: wrap; }
.community-flow-chip, .community-like-pill { border: 1px solid var(--soft-line); background: var(--bg); color: var(--muted); padding: 4px 7px; font-size: 11px; }
.community-like-pill.is-liked, .ui-btn.is-liked { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--panel-2)); }
.community-detail-card { display: grid; gap: 14px; padding: 14px; }
.community-detail-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; border-bottom: 1px solid var(--soft-line); padding-bottom: 12px; }
.community-detail-head span { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
.community-detail-head h3 { margin: 4px 0 0; font-size: clamp(22px, 3vw, 34px); line-height: 1.05; overflow-wrap: anywhere; }
.community-attached-flow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px; background: color-mix(in srgb, var(--accent) 8%, var(--panel)); }
.community-attached-flow b { color: var(--accent); text-transform: uppercase; letter-spacing: .1em; font-size: 10px; }
.community-attached-flow span { color: var(--ink); overflow-wrap: anywhere; }
.community-detail-body { margin: 0; color: var(--ink); line-height: 1.55; white-space: normal; overflow-wrap: anywhere; }
.community-section-title { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; color: var(--muted); border-bottom: 1px solid var(--soft-line); padding-bottom: 8px; margin-bottom: 10px; }
.community-section-title b { color: var(--accent); text-transform: uppercase; letter-spacing: .12em; font-size: 11px; }
.community-comments { display: grid; gap: 10px; }
.community-comment { display: grid; gap: 8px; padding: 10px; }
.community-comment header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.community-comment header b { color: var(--ink); }
.community-comment header span { color: var(--muted); font-size: 11px; margin-right: auto; }
.community-comment p { margin: 0; color: var(--muted); line-height: 1.45; overflow-wrap: anywhere; }
.community-replies { display: grid; gap: 8px; margin-left: 20px; padding-left: 10px; border-left: 2px solid var(--soft-line); }
.community-comment.is-reply { box-shadow: none; background: color-mix(in srgb, var(--bg) 84%, var(--panel) 16%); }
.community-inline-reply { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; }
.community-inline-reply textarea { min-height: 42px; max-height: 90px; }
.community-reply-box { border-top: 1px solid var(--soft-line); padding-top: 12px; display: grid; gap: 8px; }
.community-reply-box textarea { min-height: 86px; }
.community-mod-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; border-top: 1px dashed var(--soft-line); padding-top: 8px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
.community-empty { padding: 18px; display: grid; gap: 5px; color: var(--muted); line-height: 1.4; }
.community-empty b { color: var(--ink); }
.community-empty.small { box-shadow: none; border-style: dashed; }
.status-hidden, .status-deleted { opacity: .62; border-color: var(--danger) !important; }
@media (max-width: 920px) { .community-toolbar, .community-layout { grid-template-columns: 1fr; } .community-list-pane { border-right: 0; border-bottom: 1px solid var(--line); max-height: none; } .community-detail-pane { min-height: 420px; } .community-hero { display: grid; } }
@media (max-width: 560px) { .community-dialog { width: calc(100vw - 10px); max-height: 96vh; } .community-shell { max-height: 96vh; } .community-hero, .community-toolbar, .community-list-pane, .community-detail-pane { padding: 10px; } .community-post-top, .community-detail-head, .community-attached-flow, .community-inline-reply { display: grid; grid-template-columns: 1fr; } }


/* Community modal UX polish — pass61 2026-06-27 */
/* Community permanent delete polish — pass62 2026-06-27 */
.community-dialog-pass61 {
  width: min(1220px, calc(100vw - 18px));
  max-height: min(94vh, 960px);
}
.community-shell-v2 {
  grid-template-rows: auto auto minmax(0, 1fr);
  max-height: min(94vh, 960px);
  background:
    radial-gradient(circle at 12% -10%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 26rem),
    linear-gradient(145deg, color-mix(in srgb, var(--panel) 96%, #000 4%), color-mix(in srgb, var(--bg) 88%, var(--panel) 12%));
}
.community-hero-v2 {
  align-items: center;
  padding: 14px 16px;
  gap: 14px;
}
.community-hero-v2 h2 {
  margin: 3px 0 3px;
  font-size: clamp(24px, 3.3vw, 34px);
  line-height: 1;
}
.community-hero-copy p {
  max-width: 760px;
  font-size: 13px;
}
.community-hero-actions .ui-btn {
  min-height: 34px;
  padding: 7px 10px;
}
.community-toolbar-v2 {
  grid-template-columns: minmax(260px, 1fr) 190px 170px auto;
  align-items: end;
  padding: 10px 12px;
  gap: 9px;
}
.community-toolbar-v2 label {
  gap: 5px;
}
.community-toolbar-v2 input,
.community-toolbar-v2 select {
  min-height: 38px;
  padding: 8px 10px;
}
.community-layout-v2 {
  grid-template-columns: minmax(310px, 410px) minmax(0, 1fr);
  min-height: 0;
}
.community-list-pane-v2 {
  gap: 9px;
  padding: 10px;
  background: color-mix(in srgb, var(--bg) 82%, var(--panel) 18%);
}
.community-list-head {
  position: sticky;
  top: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: stretch;
  padding-bottom: 1px;
  background: color-mix(in srgb, var(--bg) 82%, var(--panel) 18%);
}
.community-status-card {
  min-width: 0;
}
.community-list-head .community-status-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 9px;
  box-shadow: none;
}
.community-status-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
.community-status-card.is-locked .community-status-dot {
  background: var(--muted);
  box-shadow: none;
}
.community-status-copy {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.community-status-copy b,
.community-status-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.community-status-copy b {
  font-size: 12px;
}
.community-status-copy small {
  color: var(--muted);
  font-size: 11px;
}
.community-count-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 70px;
  border: 1px solid var(--soft-line);
  background: var(--panel);
  color: var(--muted);
  padding: 0 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
  box-shadow: 2px 2px 0 var(--shadow);
}
.community-composer-panel {
  display: grid;
  gap: 9px;
  padding: 11px;
  border: 1px solid var(--accent);
  background: color-mix(in srgb, var(--panel) 92%, var(--accent) 8%);
  box-shadow: 4px 4px 0 var(--shadow);
  animation: communityComposerIn .16s ease-out;
}
.community-composer-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 8px;
}
.community-composer-panel label {
  margin: 0;
  gap: 5px;
}
.community-composer-panel textarea {
  min-height: 82px;
  max-height: 150px;
}
.community-composer-panel input,
.community-composer-panel select,
.community-composer-panel textarea {
  padding: 8px 9px;
}
.community-composer-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.community-composer-actions .ui-btn {
  min-height: 32px;
  padding: 6px 10px;
}
.community-post-list {
  gap: 8px;
}
.community-post-card-v2 {
  gap: 6px;
  padding: 10px;
  box-shadow: 2px 2px 0 var(--shadow);
  border-color: color-mix(in srgb, var(--soft-line) 82%, transparent);
}
.community-post-card-v2:hover,
.community-post-card-v2.is-active {
  transform: none;
  box-shadow: 3px 3px 0 var(--shadow), inset 3px 0 0 var(--accent);
}
.community-post-card-meta,
.community-post-foot,
.community-card-flow-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.community-post-card-meta em {
  border: 1px solid var(--soft-line);
  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
  color: var(--accent);
  padding: 2px 6px;
  font-style: normal;
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.community-post-card-meta small,
.community-post-byline {
  color: var(--muted);
  font-size: 10.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.community-post-title {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.22;
  overflow-wrap: anywhere;
}
.community-post-card-v2 .community-post-excerpt {
  font-size: 11.5px;
  line-height: 1.35;
  -webkit-line-clamp: 2;
}
.community-like-pill {
  flex: 0 0 auto;
  min-width: 42px;
  text-align: center;
  padding: 3px 6px;
}
.community-card-flow-row {
  justify-content: flex-start;
}
.community-card-flow-row .community-flow-chip {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.community-detail-pane-v2 {
  padding: 12px;
}
.community-detail-card-v2 {
  gap: 11px;
  padding: 0;
  overflow: hidden;
  box-shadow: 4px 4px 0 var(--shadow);
}
.community-detail-head-v2 {
  padding: 14px;
  align-items: center;
  background: color-mix(in srgb, var(--panel-2) 62%, transparent);
}
.community-detail-title-block {
  min-width: 0;
  display: grid;
  gap: 5px;
}
.community-detail-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.community-detail-meta em {
  border: 1px solid var(--soft-line);
  background: var(--bg);
  color: var(--accent);
  padding: 3px 7px;
  font-style: normal;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.community-detail-meta small {
  color: var(--muted);
  font-size: 11px;
}
.community-detail-head-v2 h3 {
  margin: 0;
  font-size: clamp(20px, 2.4vw, 30px);
  line-height: 1.08;
}
.community-detail-actions {
  flex: 0 0 auto;
  display: flex;
  gap: 6px;
}
.community-body-card {
  margin: 0 14px;
  padding: 13px;
  border: 1px solid var(--soft-line);
  background: color-mix(in srgb, var(--bg) 82%, var(--panel) 18%);
}
.community-body-card .community-detail-body {
  line-height: 1.55;
}
.community-attached-flow-v2 {
  margin: 0 14px;
  padding: 9px 10px;
  box-shadow: none;
}
.community-attached-flow-v2 span {
  display: grid;
  gap: 2px;
}
.community-attached-flow-v2 small {
  color: var(--ink);
  overflow-wrap: anywhere;
}
.community-comments-v2 {
  padding: 0 14px;
}
.community-comment-v2 {
  gap: 7px;
  padding: 9px 10px;
  box-shadow: 2px 2px 0 var(--shadow);
  background: color-mix(in srgb, var(--panel) 94%, var(--bg) 6%);
}
.community-comment-v2 header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.community-comment-v2 header span {
  display: grid;
  gap: 1px;
  margin-right: 0;
}
.community-comment-v2 header small {
  color: var(--muted);
  font-size: 10.5px;
}
.community-comment-v2 p {
  color: var(--ink);
  font-size: 13px;
}
.community-replies-v2 {
  margin-left: 12px;
  padding-left: 10px;
}
.community-inline-reply-v2 {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
}
.community-inline-reply-v2 textarea {
  min-height: 38px;
}
.community-inline-reply-v2 .form-message {
  grid-column: 1 / -1;
  min-height: 0;
  margin: 0;
}
.community-reply-box-v2 {
  margin: 2px 14px 14px;
  padding: 12px;
  border: 1px solid var(--soft-line);
  background: color-mix(in srgb, var(--panel-2) 48%, transparent);
}
.community-reply-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
}
.community-reply-head b {
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 11px;
}
.community-reply-head small {
  color: var(--muted);
  font-size: 11px;
}
.community-reply-box-v2 textarea {
  min-height: 70px;
}
.community-reply-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}
.community-reply-actions .form-message {
  min-height: 0;
  margin: 0;
}
.community-mod-actions {
  padding-top: 7px;
}
.community-empty-list,
.community-empty-welcome {
  box-shadow: none;
}
@keyframes communityComposerIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 980px) {
  .community-toolbar-v2,
  .community-layout-v2 {
    grid-template-columns: 1fr;
  }
  .community-list-head {
    position: static;
  }
  .community-list-pane-v2 {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    max-height: min(48vh, 520px);
  }
  .community-detail-pane-v2 {
    min-height: 440px;
  }
}
@media (max-width: 620px) {
  .community-dialog-pass61 {
    width: calc(100vw - 8px);
    max-height: 96vh;
  }
  .community-shell-v2 {
    max-height: 96vh;
  }
  .community-hero-v2,
  .community-toolbar-v2,
  .community-list-pane-v2,
  .community-detail-pane-v2 {
    padding: 9px;
  }
  .community-hero-v2,
  .community-hero-actions,
  .community-composer-grid,
  .community-detail-head-v2,
  .community-attached-flow-v2,
  .community-reply-head,
  .community-inline-reply-v2,
  .community-reply-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
  .community-hero-actions .ui-btn,
  .community-composer-actions .ui-btn,
  .community-reply-actions .ui-btn {
    width: 100%;
  }
  .community-list-head {
    grid-template-columns: 1fr;
  }
  .community-count-pill {
    min-height: 30px;
  }
  .community-body-card,
  .community-attached-flow-v2,
  .community-comments-v2,
  .community-reply-box-v2 {
    margin-inline: 9px;
  }
}

/* Community permanent delete polish — pass62 2026-06-27 */
.community-mod-note {
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.community-purge-btn {
  border-color: var(--danger) !important;
  background: color-mix(in srgb, var(--danger) 10%, transparent) !important;
}
.community-purge-btn:hover,
.community-purge-btn:focus-visible {
  background: color-mix(in srgb, var(--danger) 18%, transparent) !important;
}
.status-hidden .community-mod-actions,
.status-deleted .community-mod-actions {
  border-top-color: color-mix(in srgb, var(--danger) 55%, var(--soft-line));
}


/* Community admin announcements + sticky controls — pass63 2026-06-27 */
.community-comment-toggle {
  border: 1px solid var(--soft-line);
  background: color-mix(in srgb, var(--panel) 78%, var(--accent) 6%);
  padding: 8px 9px;
  display: grid;
  gap: 4px;
}
.community-comment-toggle > span {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--ink);
  text-transform: none;
  letter-spacing: normal;
  font-size: 12px;
}
.community-comment-toggle input {
  width: auto;
}
.community-comment-toggle small {
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.35;
  text-transform: none;
  letter-spacing: normal;
}
.community-card-badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}
.community-special-badge {
  border: 1px solid var(--soft-line);
  background: color-mix(in srgb, var(--panel) 80%, var(--accent) 8%);
  color: var(--muted);
  padding: 2px 6px;
  font-size: 9px;
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.community-special-badge.is-pin {
  border-color: color-mix(in srgb, var(--accent) 70%, var(--soft-line));
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 13%, var(--panel));
}
.community-special-badge.is-official {
  border-color: color-mix(in srgb, var(--check-gold, var(--accent)) 70%, var(--soft-line));
  color: var(--check-gold, var(--accent));
  background: color-mix(in srgb, var(--check-gold, var(--accent)) 13%, var(--panel));
}
.community-special-badge.is-locked {
  border-color: color-mix(in srgb, var(--danger) 48%, var(--soft-line));
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 8%, var(--panel));
}
.community-post-card-v2.is-pinned {
  border-color: color-mix(in srgb, var(--accent) 72%, var(--soft-line));
  background: color-mix(in srgb, var(--panel) 88%, var(--accent) 7%);
}
.community-post-card-v2.is-official,
.community-detail-card-v2.is-official .community-detail-head-v2 {
  background-image: linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 64%);
}
.community-detail-card-v2.is-pinned {
  border-color: color-mix(in srgb, var(--accent) 70%, var(--soft-line));
}
.community-reply-box-v2.is-locked {
  border-style: dashed;
  background: color-mix(in srgb, var(--panel-2) 44%, var(--danger) 5%);
}
.community-mod-actions .ui-btn[data-community-mod-action="pin"],
.community-mod-actions .ui-btn[data-community-mod-action="unpin"],
.community-mod-actions .ui-btn[data-community-mod-action="unlock_comments"],
.community-mod-actions .ui-btn[data-community-mod-action="lock_comments"] {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--soft-line));
}
@media (max-width: 620px) {
  .community-card-badges { gap: 4px; }
  .community-special-badge { font-size: 8.5px; padding-inline: 5px; }
}

/* Chat live autoscroll guard — pass64 2026-06-27 */
.r3-chat-messages,
.r3-chat-live-tools {
  overscroll-behavior: contain;
}
.r3-chat-messages {
  overflow-anchor: none;
}
.r3-chat-messages.is-user-scrolled,
.r3-chat-messages.r3-chat-scroll-restoring {
  scroll-behavior: auto !important;
}

/* Board command quick editor — pass66 2026-06-27 */
.board-command-picker .card-mention-item:first-of-type,
.board-command-picker .card-mention-item:nth-of-type(2) {
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}
.board-command-picker .card-mention-item:first-of-type .card-mention-pill,
.board-command-picker .card-mention-item:nth-of-type(2) .card-mention-pill {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 46%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.board-command-quick-editor {
  position: fixed;
  z-index: 2147483001;
  display: grid;
  gap: 9px;
  width: min(320px, calc(100vw - 24px));
  padding: 11px;
  border: 1px solid color-mix(in srgb, var(--accent) 58%, var(--soft-line));
  background: color-mix(in srgb, var(--panel) 94%, #000 6%);
  color: var(--ink);
  box-shadow: 8px 8px 0 var(--shadow), 0 18px 54px rgba(0,0,0,.34);
}
.board-command-quick-editor.hidden {
  display: none !important;
}
.board-command-quick-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.board-command-quick-head b {
  color: var(--accent);
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.board-command-quick-head span {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.2;
  text-align: right;
}
.board-command-count-label {
  display: grid;
  gap: 5px;
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.board-command-count-label input {
  min-height: 38px;
  padding: 8px 10px;
  color: var(--ink);
  font-size: 18px;
  font-weight: 850;
  text-align: center;
  text-transform: none;
  letter-spacing: normal;
}
.board-command-chips {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.board-command-chips button {
  min-height: 30px;
  border: 1px solid var(--soft-line);
  background: var(--panel-2);
  color: var(--ink);
  font-weight: 850;
  box-shadow: 2px 2px 0 var(--shadow);
}
.board-command-chips button:hover,
.board-command-chips button:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  outline: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
}
.board-command-preview {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px dashed var(--soft-line);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  color: var(--muted);
  padding: 7px 8px;
  font: 11px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
}
html.r3-mobile-device .board-command-quick-editor {
  left: 12px !important;
  right: 12px;
  width: auto !important;
}


/* Duplicate read/cache replay recovery polish — pass67 2026-06-27 */
.tool-bubble.tool-status-duplicate_skipped,
.tool-bubble.tool-status-cache_replay {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--soft-line));
  background: color-mix(in srgb, var(--panel-2) 88%, var(--accent) 6%);
}
.tool-bubble.tool-status-duplicate_skipped .bubble-icon,
.tool-bubble.tool-status-cache_replay .bubble-icon {
  color: var(--accent);
}
.tool-bubble.tool-status-duplicate_skipped .bubble-copy b::after,
.tool-bubble.tool-status-cache_replay .bubble-copy b::after {
  content: ' · duplicate skipped';
  color: var(--muted);
  font-weight: 700;
}
.r3-chat-status-duplicate_skipped,
.r3-chat-status-cache_replay {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--soft-line));
  background: color-mix(in srgb, var(--panel-2) 82%, var(--accent) 5%);
}
.r3-chat-status-duplicate_skipped .r3-chat-live-tool-state,
.r3-chat-status-cache_replay .r3-chat-live-tool-state {
  color: var(--accent);
}


/* User input upstream source + flow board access policy — pass68 2026-06-28 */
.human-input-settings h3 { margin-bottom: 6px; }
.human-input-settings .user-input-field-row.is-muted { opacity: 0.62; }
.board-flow-policy { display: flex; align-items: center; gap: 10px; min-width: min(360px, 100%); }
.board-flow-policy > span { display: grid; gap: 2px; line-height: 1.15; }
.board-flow-policy small { color: var(--muted); font-weight: 500; letter-spacing: 0; text-transform: none; }
.board-flow-policy select { min-width: 180px; }
@media (max-width: 720px) {
  .board-flow-policy { align-items: stretch; flex-direction: column; gap: 6px; width: 100%; }
  .board-flow-policy select { width: 100%; }
}

/* Shared Project Board + per-flow hard AI access — pass69 2026-06-28 */
.board-flow-policy [data-board-policy-scope] {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .05em;
  text-transform: none;
}
.board-flow-policy [data-board-ai-help] {
  display: block;
  margin-top: 3px;
}
.r3-board-modal .board-status {
  white-space: nowrap;
}


/* Direct run mode — pass70 2026-06-28 */

/* Interactive user input renderer — pass71 2026-06-28 */
.human-option-grid,
.r3-chat-input-options {
  display: grid;
  gap: 10px;
}
.human-option-grid.hidden,
.r3-chat-input-options.hidden { display: none !important; }
.human-option-btn {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 54px;
  padding: 9px 11px;
  border: 1px solid var(--soft-line);
  background: linear-gradient(135deg, color-mix(in srgb, var(--panel-2) 88%, var(--accent) 8%), var(--panel));
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--shadow);
}
.human-option-btn:hover,
.human-option-btn:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 65%, var(--soft-line));
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 var(--shadow), 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent) inset;
}
.human-option-btn span {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 46%, var(--soft-line));
  background: var(--bg);
  color: var(--accent);
  font-size: 12px;
  font-weight: 950;
}
.human-option-btn b {
  min-width: 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.r3-chat-pending-input {
  display: grid;
  gap: 12px;
  margin: 12px 0;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 48%, var(--soft-line));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 11%, transparent), transparent 68%),
    color-mix(in srgb, var(--panel-2) 92%, var(--bg));
  box-shadow: 4px 4px 0 var(--shadow);
}
.r3-chat-pending-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.r3-chat-pending-head span {
  color: var(--accent);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.r3-chat-pending-head b {
  color: var(--muted);
  font-size: 11px;
  text-align: right;
}
.r3-chat-pending-input p {
  margin: 0;
  color: var(--ink);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.r3-chat-input-response {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
}
.r3-chat-input-response textarea {
  min-height: 86px;
  max-height: 220px;
  resize: vertical;
}
.r3-chat-pending-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.r3-chat-pending-foot small {
  color: var(--muted);
  line-height: 1.35;
}
.r3-chat-input-options.two {
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 720px) {
  .r3-chat-input-response,
  .r3-chat-input-options.two {
    grid-template-columns: 1fr;
  }
  .r3-chat-pending-foot {
    align-items: stretch;
    flex-direction: column;
  }
}


/* Community UX + moderation dialog polish — pass72 2026-06-28 */
.community-dialog-pass72 {
  width: min(1280px, calc(100vw - 24px));
  min-height: min(720px, calc(100dvh - 46px));
  max-height: min(94dvh, 980px);
}
.community-shell-v3 {
  min-height: min(720px, calc(100dvh - 46px));
}
.community-dialog-pass72 .community-hero-v2 {
  padding: 18px 20px;
}
.community-dialog-pass72 .community-hero-copy p {
  max-width: 860px;
}
.community-dialog-pass72 .community-toolbar-v2 {
  padding: 12px 14px;
  grid-template-columns: minmax(320px, 1fr) 190px 190px auto;
}
.community-dialog-pass72 .community-layout-v2 {
  grid-template-columns: minmax(350px, 430px) minmax(520px, 1fr);
  min-height: 520px;
}
.community-list-pane-v3,
.community-detail-pane-v3 {
  min-height: 520px;
}
.community-dialog-pass72 .community-list-head {
  gap: 10px;
}
.community-dialog-pass72 .community-status-card {
  box-shadow: none;
  background: color-mix(in srgb, var(--panel) 90%, var(--bg) 10%);
}
.community-dialog-pass72 .community-count-pill {
  min-width: 78px;
}
.community-empty-list-v3,
.community-empty-detail-v3 {
  min-height: 170px;
  place-content: center;
  text-align: center;
  border-style: dashed;
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 16rem),
    color-mix(in srgb, var(--panel) 88%, var(--bg) 12%);
}
.community-empty-detail-v3 {
  min-height: 320px;
  height: 100%;
}
.community-empty-icon {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  justify-self: center;
  border: 1px solid color-mix(in srgb, var(--accent) 58%, var(--soft-line));
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
  font-weight: 900;
  font-size: 20px;
}
.community-empty-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.community-mod-actions-v3 {
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding-top: 10px;
  text-transform: none;
  letter-spacing: normal;
}
.community-mod-actions-v3 .community-mod-label {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.community-mod-buttons {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.community-mod-state {
  border: 1px solid color-mix(in srgb, var(--danger) 56%, var(--soft-line));
  background: color-mix(in srgb, var(--danger) 9%, transparent);
  color: var(--danger);
  padding: 3px 7px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.community-action-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483300;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(0, 0, 0, .56);
  backdrop-filter: blur(5px);
}
.community-action-card {
  width: min(520px, calc(100vw - 28px));
  display: grid;
  gap: 14px;
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at 16% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 18rem),
    var(--panel);
  box-shadow: 10px 10px 0 var(--shadow), 0 22px 70px rgba(0,0,0,.44);
  padding: 18px;
  color: var(--ink);
}
.community-action-card header { display: grid; gap: 5px; }
.community-action-card h3 { margin: 0; font-size: 24px; line-height: 1.05; }
.community-action-card p { margin: 0; color: var(--muted); line-height: 1.45; }
.community-action-card label { margin: 0; display: grid; gap: 6px; }
.community-action-card label span { color: var(--accent); font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.community-action-card label em { color: var(--muted); font-style: normal; }
.community-action-card textarea { min-height: 92px; resize: vertical; }
.community-action-card footer { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.community-action-card .ui-btn.danger {
  border-color: color-mix(in srgb, var(--danger) 70%, var(--line));
  background: color-mix(in srgb, var(--danger) 12%, var(--accent) 16%);
  color: var(--ink);
}
@media (max-width: 980px) {
  .community-dialog-pass72 .community-layout-v2,
  .community-dialog-pass72 .community-toolbar-v2 {
    grid-template-columns: 1fr;
  }
  .community-dialog-pass72,
  .community-shell-v3 {
    min-height: min(760px, calc(100dvh - 24px));
  }
  .community-list-pane-v3 { min-height: 260px; }
  .community-detail-pane-v3 { min-height: 420px; }
}
@media (max-width: 620px) {
  .community-dialog-pass72 {
    width: calc(100vw - 8px);
    min-height: calc(100dvh - 8px);
    max-height: calc(100dvh - 8px);
  }
  .community-shell-v3 {
    min-height: calc(100dvh - 8px);
    max-height: calc(100dvh - 8px);
  }
  .community-dialog-pass72 .community-hero-v2 { padding: 12px; }
  .community-action-overlay { padding: 10px; }
  .community-action-card { padding: 14px; }
  .community-action-card footer { display: grid; grid-template-columns: 1fr; }
}


/* Community moderation overlay stack fix — pass73 2026-06-28 */
.community-dialog-pass73 {
  overflow: visible;
}
.community-dialog-pass73.has-community-action-overlay .community-shell-v3 {
  pointer-events: none;
}
.community-dialog-pass73 .community-action-overlay {
  position: fixed;
  z-index: 100;
  inset: 0;
  pointer-events: auto;
}
.community-dialog-pass73 .community-action-card {
  pointer-events: auto;
}


/* TTS voice presets — pass75 2026-06-28 */
.tts-voice-preset-row input[list="ttsVoiceSuggestions"] {
  padding-right: 32px;
}
.tts-preset-hint {
  display: block;
  margin-top: 5px;
  color: var(--muted);
}
.tts-voice-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0;
}
.tts-voice-actions .field-help {
  margin: 0;
  text-transform: none;
  letter-spacing: normal;
}
.setup-tts-card .tts-voice-actions,
.r3-chat-voice-settings .tts-voice-actions {
  border: 1px solid var(--soft-line);
  background: color-mix(in srgb, var(--panel) 80%, transparent);
  padding: 8px;
}
.r3-chat-voice-settings .tts-voice-actions .ui-btn,
.setup-tts-card .tts-voice-actions .ui-btn {
  min-height: 30px;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-voice-settings .tts-voice-actions {
  align-items: stretch;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-voice-settings .tts-voice-actions .ui-btn {
  width: 100%;
}

/* Expose as Chat — pass81 2026-06-29 */
.expose-chat-dialog {
  width: min(980px, calc(100vw - 28px));
}
.expose-chat-card {
  max-height: min(86vh, 880px);
  overflow: hidden;
}
.expose-chat-body {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(320px, .8fr);
  gap: 14px;
  overflow: auto;
}
.expose-chat-create,
.expose-chat-list-section,
.expose-chat-row {
  border: 1px solid var(--soft-line);
  background: var(--bg);
  box-shadow: 3px 3px 0 var(--shadow);
  padding: 12px;
}
.expose-chat-section-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
  margin-bottom: 10px;
}
.expose-chat-section-head b {
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 11px;
}
.expose-chat-section-head small,
.expose-chat-row small,
.expose-chat-row p,
.expose-chat-row header span {
  color: var(--muted);
}
.expose-chat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.expose-chat-checks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0;
}
.expose-chat-checks label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--ink);
  text-transform: none;
  letter-spacing: normal;
  font-size: 12px;
}
.expose-chat-checks input[type="checkbox"] { width: auto; }
.expose-chat-limits {
  border: 1px solid var(--soft-line);
  background: var(--panel);
  padding: 8px;
}
.expose-chat-limits summary {
  cursor: pointer;
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.expose-chat-limits[open] summary { margin-bottom: 8px; }
.expose-chat-list {
  display: grid;
  gap: 10px;
  max-height: 470px;
  overflow: auto;
}
.expose-chat-row {
  display: grid;
  gap: 8px;
  padding: 10px;
}
.expose-chat-row header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: start;
}
.expose-chat-row header b,
.expose-chat-row header small {
  display: block;
}
.expose-chat-row p {
  margin: 0;
  line-height: 1.4;
  font-size: 12px;
}
.expose-chat-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.expose-chat-actions .danger {
  color: var(--danger);
  border-color: var(--danger);
}
@media (max-width: 980px) {
  .expose-chat-body,
  .expose-chat-grid,
  .expose-chat-checks {
    grid-template-columns: 1fr;
  }
  .expose-chat-dialog { width: calc(100vw - 18px); }
}

/* Expose as Chat file workspace — pass82 2026-06-29 */
.expose-chat-limits .limit-grid {
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
}
.expose-chat-row header small {
  line-height: 1.35;
}

/* Last-run persistence + admin UX delivery marker: pass88 */
.log-entry-last-run {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--soft-line));
  background: color-mix(in srgb, var(--panel) 88%, var(--accent) 5%);
}
.last-run-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--soft-line);
}
.last-run-head strong {
  display: block;
  margin: 0;
  color: var(--ink);
}
.last-run-head small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}
.last-run-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 8px 0;
}
.last-run-meta span {
  border: 1px solid var(--soft-line);
  background: var(--bg);
  color: var(--muted);
  padding: 4px 7px;
  font-size: 11px;
}
.last-run-meta b {
  color: var(--ink);
}
.log-entry-last-run pre {
  max-height: 320px;
}

/* Execution packets + terminal quality validator delivery marker: pass90 */


/* Execution packets + terminal quality validator delivery marker: pass90 */
.run-summary-terminal {
  display: grid;
  gap: 3px;
  margin: 9px 10px 0;
  padding: 8px 10px;
  border: 1px solid var(--soft-line);
  background: color-mix(in srgb, var(--panel-2) 72%, transparent);
}
.run-summary-terminal b {
  color: var(--accent);
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.run-summary-terminal small {
  color: var(--muted);
  line-height: 1.35;
}
.run-summary-card.terminal-failed_protocol .run-summary-terminal,
.run-summary-card.terminal-failed_no_progress .run-summary-terminal {
  border-color: color-mix(in srgb, var(--danger) 70%, var(--soft-line));
  background: color-mix(in srgb, var(--danger) 10%, var(--panel));
}
.run-summary-card.terminal-blocked_needs_user .run-summary-terminal,
.run-summary-card.terminal-blocked_missing_context .run-summary-terminal,
.run-summary-card.terminal-completed_with_warnings .run-summary-terminal {
  border-color: color-mix(in srgb, var(--warning) 70%, var(--soft-line));
  background: color-mix(in srgb, var(--warning) 10%, var(--panel));
}
.run-summary-card.terminal-completed .run-summary-terminal {
  border-color: color-mix(in srgb, var(--ok) 70%, var(--soft-line));
}

/* Semantic safety validator hotfix delivery marker: pass93C */


/* AI node header/live-step layout polish — pass115
   Prevent pricing chips from sharing the timer grid cell and keep live loader icons out of text. */
.r3-node .node-head {
  height: auto !important;
  min-height: 66px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-rows: minmax(16px, auto) 18px 20px !important;
  grid-template-areas:
    "title tools"
    "timer tools"
    "cost cost" !important;
  align-items: center !important;
  gap: 3px 8px !important;
  padding: 6px 8px 7px !important;
}
.r3-node .node-head:not(:has(.node-cost:not([hidden]))) {
  min-height: 48px !important;
  grid-template-rows: minmax(16px, auto) 22px !important;
  grid-template-areas:
    "title tools"
    "timer tools" !important;
}
.r3-node .node-title-wrap {
  grid-area: title !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}
.r3-node .node-title-wrap .node-title {
  min-width: 0 !important;
  max-width: 100% !important;
  flex: 1 1 auto !important;
}
.r3-node .node-timer:not(.node-cost) {
  grid-area: timer !important;
  justify-self: start !important;
  min-width: 0 !important;
  max-width: 128px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.r3-node .node-cost {
  grid-area: cost !important;
  justify-self: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 18px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  padding: 0 6px !important;
  font-size: 9px !important;
}
.r3-node .node-cost[hidden] {
  display: none !important;
}
.r3-node .node-head-tools {
  grid-area: tools !important;
  align-self: center !important;
  justify-self: end !important;
  flex-wrap: nowrap !important;
}
.r3-node .node-tools .tool-bubble {
  display: grid !important;
  grid-template-columns: 30px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 42px !important;
  padding: 7px 9px !important;
  overflow: hidden !important;
}
.r3-node .node-tools .tool-bubble:hover,
.r3-node .node-tools .tool-bubble:focus-visible {
  overflow: visible !important;
}
.r3-node .node-tools .bubble-icon {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  align-self: center !important;
  line-height: 1 !important;
  overflow: hidden !important;
}
.r3-node .node-tools .bubble-copy {
  min-width: 0 !important;
  overflow: hidden !important;
  display: grid !important;
  gap: 2px !important;
}
.r3-node .node-tools .bubble-copy b,
.r3-node .node-tools .bubble-copy em {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.r3-node .node-tools .bubble-copy em {
  line-height: 1.28 !important;
}
@media (max-width: 760px) {
  .r3-node .node-head {
    min-height: 64px !important;
    grid-template-rows: minmax(16px, auto) 18px 19px !important;
  }
  .r3-node .node-head:not(:has(.node-cost:not([hidden]))) {
    min-height: 48px !important;
  }
}

/* Auto role selector visibility — pass116 */
.node-auto-role-badge {
  flex: 0 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  max-width: 118px;
  height: 16px;
  padding: 0 6px;
  border: 1px solid color-mix(in srgb, var(--accent) 58%, var(--line));
  background: color-mix(in srgb, var(--accent) 12%, var(--panel));
  color: var(--accent-strong, var(--accent));
  font-size: 7.5px;
  font-weight: 950;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.role-picker-card select option[value="__r3d3_auto_role__"] {
  font-weight: 800;
}

/* Auto role + compact node header placement — pass117
   Keeps Auto [role] visible without stealing title/timer/cost space. */
.r3-node .node-head {
  min-height: 78px !important;
  grid-template-rows: minmax(28px, auto) 18px 20px !important;
  grid-template-areas:
    "title tools"
    "timer tools"
    "cost cost" !important;
  align-items: start !important;
  gap: 4px 8px !important;
  padding: 6px 8px 7px !important;
}
.r3-node .node-head:not(:has(.node-cost:not([hidden]))) {
  min-height: 58px !important;
  grid-template-rows: minmax(28px, auto) 18px !important;
  grid-template-areas:
    "title tools"
    "timer tools" !important;
}
.r3-node .node-title-wrap {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-content: start !important;
  gap: 3px !important;
  line-height: 1.05 !important;
}
.r3-node .node-title-wrap .node-title {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.r3-node .node-auto-role-badge {
  justify-self: start !important;
  max-width: 100% !important;
  height: 15px !important;
  padding: 0 5px !important;
  font-size: 7px !important;
  letter-spacing: .07em !important;
}
.r3-node .node-head-tools {
  align-self: start !important;
  padding-top: 0 !important;
  max-width: 98px !important;
  overflow: hidden !important;
}
.r3-node .node-timer:not(.node-cost) {
  align-self: center !important;
  max-width: 140px !important;
}
.r3-node .node-cost {
  align-self: center !important;
  height: 18px !important;
  line-height: 17px !important;
}
@media (max-width: 760px) {
  .r3-node .node-head {
    min-height: 76px !important;
    grid-template-rows: minmax(28px, auto) 18px 19px !important;
  }
  .r3-node .node-head:not(:has(.node-cost:not([hidden]))) {
    min-height: 58px !important;
  }
  .r3-node .node-auto-role-badge {
    max-width: 108px !important;
  }
}


/* Readable runtime role header — pass119
   Gives Auto-selected roles their own full-width row instead of squeezing them beside the title/tools. */
.r3-node .node-head {
  min-height: 96px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-rows: 20px 20px 18px 20px !important;
  grid-template-areas:
    "title tools"
    "role role"
    "timer timer"
    "cost cost" !important;
  align-items: center !important;
  gap: 4px 8px !important;
  padding: 7px 8px 8px !important;
}
.r3-node .node-head:not(:has(.node-cost:not([hidden]))) {
  min-height: 74px !important;
  grid-template-rows: 20px 20px 18px !important;
  grid-template-areas:
    "title tools"
    "role role"
    "timer timer" !important;
}
.r3-node .node-title-wrap {
  grid-area: title !important;
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}
.r3-node .node-title-wrap .node-title {
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.r3-node .node-runtime-role {
  grid-area: role !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 5px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 20px !important;
  padding: 0 7px !important;
  border: 1px solid color-mix(in srgb, var(--accent) 52%, var(--line)) !important;
  background: color-mix(in srgb, var(--accent) 13%, var(--panel)) !important;
  color: var(--accent-strong, var(--accent)) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent) !important;
  overflow: hidden !important;
}
.r3-node .node-runtime-role-mode {
  flex: 0 0 auto !important;
  font-size: 7px !important;
  font-weight: 950 !important;
  letter-spacing: .12em !important;
  line-height: 1 !important;
  opacity: .86 !important;
}
.r3-node .node-runtime-role-name {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 8.5px !important;
  font-weight: 950 !important;
  letter-spacing: .06em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}
.r3-node .node-runtime-role + .node-timer:not(.node-cost) {
  grid-area: timer !important;
}
.r3-node .node-head:not(:has(.node-runtime-role)) {
  min-height: 76px !important;
  grid-template-rows: 18px 18px 20px !important;
  grid-template-areas:
    "title tools"
    "timer timer"
    "cost cost" !important;
}
.r3-node .node-head:not(:has(.node-runtime-role)):not(:has(.node-cost:not([hidden]))) {
  min-height: 52px !important;
  grid-template-rows: 20px 20px !important;
  grid-template-areas:
    "title tools"
    "timer timer" !important;
}
.r3-node .node-auto-role-badge {
  display: none !important;
}
@media (max-width: 760px) {
  .r3-node .node-head {
    min-height: 94px !important;
    grid-template-rows: 20px 20px 18px 19px !important;
  }
  .r3-node .node-head:not(:has(.node-cost:not([hidden]))) {
    min-height: 74px !important;
  }
  .r3-node .node-runtime-role-name {
    font-size: 8px !important;
  }
}

/* Pass 6: Role metadata inspector/backfill */
.role-meta-panel {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
}
.role-meta-body {
  gap: 10px;
}
.role-meta-summary {
  display: grid;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
}
.role-meta-summary p {
  margin: 0;
}
.role-meta-chip {
  display: inline-flex;
  align-items: center;
  width: max-content;
  max-width: 100%;
  border: 1px solid var(--soft-line);
  background: color-mix(in srgb, var(--panel-soft) 82%, transparent);
  color: var(--muted);
  padding: 4px 7px;
  margin: 0 5px 5px 0;
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.role-meta-ready { color: #b7f7c4; border-color: rgba(128, 220, 148, .45); }
.role-meta-missing,
.role-meta-stale,
.role-meta-thin { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.role-meta-json {
  margin: 0;
  max-height: 190px;
  overflow: auto;
  white-space: pre-wrap;
  border: 1px solid var(--soft-line);
  background: rgba(0,0,0,.22);
  color: var(--muted);
  padding: 9px;
  font: 11px/1.45 var(--mono);
}
.role-meta-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 760px) {
  .role-meta-actions { grid-template-columns: 1fr; }
}
.role-list-meta {
  float: right;
  margin-left: 6px;
  border: 1px solid var(--soft-line);
  color: var(--muted);
  font-style: normal;
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 1px 4px;
}
.role-list-meta.ready { color: #b7f7c4; border-color: rgba(128,220,148,.4); }
.role-list-meta.missing,
.role-list-meta.stale,
.role-list-meta.thin { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }

/* R3D3 BUILD: r3d3-pass6-role-metadata-manager-2026-07-03 */

/* R3D3 UX connectors + selected-flow prompt guard — 2026-07-03 */
.global-prompt-section.needs-node {
  position: relative;
  border-color: color-mix(in srgb, var(--accent) 72%, var(--line));
  background: color-mix(in srgb, var(--panel) 90%, var(--accent) 8%);
}
.global-prompt-section.needs-node textarea {
  border-color: color-mix(in srgb, var(--accent) 78%, var(--line));
  background: color-mix(in srgb, var(--bg) 84%, var(--accent) 8%);
  cursor: pointer;
}
.global-prompt-section.needs-node textarea::placeholder { color: var(--accent); }
.global-prompt-section.needs-node .prompt-action-btn[disabled] { opacity: .48; }
.global-prompt-section.needs-node-pulse textarea,
.global-prompt-section.needs-node-pulse .panel-summary {
  animation: selectedFlowPromptPulse 1.1s ease-in-out 2;
}
@keyframes selectedFlowPromptPulse {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  45% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 38%, transparent), 4px 4px 0 var(--shadow); }
}

.r3-node .node-port {
  position: absolute;
  z-index: 36;
  width: 18px;
  height: 18px;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--accent);
  padding: 0;
  box-shadow: 2px 2px 0 var(--shadow);
  opacity: .92;
  transition: transform .14s ease, background .14s ease, border-color .14s ease, box-shadow .14s ease, opacity .14s ease;
}
.r3-node .node-port::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: inherit;
  background: var(--accent);
}
.r3-node .node-port:hover,
.r3-node .node-port:focus-visible {
  transform: scale(1.18);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--panel) 82%, var(--accent) 18%);
  opacity: 1;
  outline: none;
}
.node-port-in { left: -10px; top: 56px; }
.node-port-out { right: -10px; top: 56px; cursor: crosshair; }
.r3-node.is-connecting-source .node-port-out,
.r3-node.is-connect-target .node-port-in {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 28%, transparent), 2px 2px 0 var(--shadow);
  animation: portConnectPulse .9s ease-in-out infinite;
}
@keyframes portConnectPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.18); }
}
.canvas-wrap.connecting-wire { cursor: crosshair; }
.wire.wire-draft {
  stroke: var(--accent);
  stroke-width: 3;
  stroke-dasharray: 9 7;
  opacity: .9;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent) 65%, transparent));
  animation: wireDraftMarch .7s linear infinite;
}
@keyframes wireDraftMarch { to { stroke-dashoffset: -16; } }

.selection-marquee {
  position: absolute;
  z-index: 90;
  pointer-events: none;
  border: 1px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 38%, transparent), 3px 3px 0 var(--shadow);
}
.canvas-wrap.marquee-selecting { cursor: crosshair; }

.tool-checks label span {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.tool-checks label span b {
  color: var(--ink);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 750;
  text-transform: none;
  letter-spacing: normal;
}
.tool-checks label span small {
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.32;
  text-transform: none;
  letter-spacing: normal;
}
.tool-checks label:hover span small { color: var(--ink); }
html.r3-mobile-device .r3-node .node-port {
  width: 24px;
  height: 24px;
}
html.r3-mobile-device .node-port-in,
html.r3-mobile-device .node-port-out { top: 60px; }
html.r3-mobile-device .node-port-in { left: -13px; }
html.r3-mobile-device .node-port-out { right: -13px; }

/* R3D3 roles manager clarity pass + admin flow inspector — 2026-07-03 */
:root {
  --border: var(--line);
  --panel-soft: color-mix(in srgb, var(--panel) 88%, var(--bg));
  --text: var(--ink);
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.role-dialog {
  width: min(1120px, calc(100vw - 24px));
}
.role-manager-head-v2 {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--soft-line);
}
.role-manager-grid-v2 {
  grid-template-columns: minmax(260px, 310px) minmax(0, 1fr);
  gap: 14px;
}
.role-list-wrap-v2 {
  padding: 12px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 92%, var(--accent) 4%), var(--panel));
}
.role-sidebar-tools {
  display: grid;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--soft-line);
}
.role-search-label {
  margin: 0;
}
.role-search-label span {
  color: var(--accent);
  font-weight: 800;
}
.role-manager-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}
.role-manager-stats span {
  border: 1px solid var(--soft-line);
  background: color-mix(in srgb, var(--bg) 76%, transparent);
  padding: 6px 5px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.2;
  text-align: center;
}
.role-manager-stats b {
  display: block;
  color: var(--ink);
  font-size: 13px;
}
.role-list-v2 {
  gap: 7px;
}
.role-list-v2 .role-list-item {
  display: grid;
  gap: 4px;
  box-shadow: none;
}
.role-list-v2 .role-list-item small {
  display: block;
  color: var(--accent);
  opacity: .86;
  font-size: 10px;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.role-list-row.active .role-list-item {
  box-shadow: inset 3px 0 0 var(--accent), 3px 3px 0 var(--shadow);
}
.role-list-empty,
.role-selected-empty {
  display: grid;
  gap: 4px;
  border: 1px dashed var(--soft-line);
  color: var(--muted);
  padding: 12px;
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  font-size: 12px;
}
.role-list-empty b,
.role-selected-empty b {
  color: var(--ink);
}
.role-editor-v2 {
  gap: 12px;
}
.role-selected-summary {
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--soft-line));
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, transparent), color-mix(in srgb, var(--panel) 92%, transparent));
  padding: 12px;
  box-shadow: 3px 3px 0 var(--shadow);
}
.role-selected-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
}
.role-selected-kicker {
  display: block;
  color: var(--accent);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.role-selected-main strong {
  display: block;
  margin-top: 2px;
  font-size: 18px;
}
.role-selected-main p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}
.role-selected-chips {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 5px;
  max-width: 280px;
}
.role-tools-panel {
  border-color: color-mix(in srgb, var(--accent) 26%, var(--soft-line));
}

.role-tools-quickbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--soft-line));
  background: color-mix(in srgb, var(--panel) 84%, var(--accent) 6%);
  padding: 10px;
  box-shadow: 3px 3px 0 var(--shadow);
}
.role-tools-quickbar-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.role-tools-quickbar-copy strong {
  color: var(--accent);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.role-tools-quickbar-copy span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}
.role-tools-quick-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}
.role-tools-quick-actions .ui-btn {
  min-height: 30px;
  white-space: nowrap;
}
.role-tools-stack {
  display: grid;
  gap: 9px;
  padding: 0;
  background: transparent;
}
.role-tools-stack > .role-ai-panel {
  border-color: color-mix(in srgb, var(--accent) 24%, var(--soft-line));
  box-shadow: none;
}
.role-tools-stack > .role-ai-panel:not([open]) {
  display: none;
}
.role-tools-stack > .role-ai-panel[open] {
  display: block;
  margin-top: 10px;
}
.role-field-grid {
  display: grid;
  grid-template-columns: minmax(180px, .65fr) minmax(220px, 1fr);
  gap: 10px;
}
.role-editor-v2 label {
  margin: 0;
}
.role-editor-v2 .field-help {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  text-transform: none;
  letter-spacing: normal;
}
.role-editor-v2 #rolePrompt {
  min-height: min(34vh, 330px);
}
@media (max-width: 900px) {
  .role-manager-grid-v2,
  .role-selected-main,
  .role-field-grid {
    grid-template-columns: 1fr;
  }
  .role-selected-chips {
    justify-content: flex-start;
    max-width: none;
  }
  .role-tools-quickbar {
    grid-template-columns: 1fr;
  }
  .role-tools-quick-actions {
    justify-content: stretch;
  }
  .role-tools-quick-actions .ui-btn {
    flex: 1 1 150px;
  }
}

/* Flow source update badges — pass12 */
.node-title-wrap {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.flow-update-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  max-width: 104px;
  border: 1px solid color-mix(in srgb, var(--warning) 72%, #fff 18%);
  background: color-mix(in srgb, var(--warning) 22%, var(--panel) 78%);
  color: var(--ink);
  padding: 2px 4px;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
  box-shadow: 1px 1px 0 var(--shadow);
  cursor: pointer;
  animation: flowUpdateBadgePulse 1.8s ease-in-out infinite;
}
.flow-update-badge em {
  font-style: normal;
  color: var(--warning);
  letter-spacing: 0;
  white-space: nowrap;
}
.flow-update-badge:hover,
.flow-update-badge:focus-visible {
  background: color-mix(in srgb, var(--warning) 34%, var(--panel) 66%);
  outline: 1px solid var(--warning);
  outline-offset: 1px;
}
@keyframes flowUpdateBadgePulse {
  0%, 100% { box-shadow: 1px 1px 0 var(--shadow), 0 0 0 0 color-mix(in srgb, var(--warning) 45%, transparent); }
  50% { box-shadow: 1px 1px 0 var(--shadow), 0 0 0 4px transparent; }
}
.flow-update-dialog {
  width: min(720px, calc(100vw - 28px));
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  box-shadow: 10px 10px 0 var(--shadow);
  padding: 0;
}
.flow-update-dialog::backdrop { background: rgba(0,0,0,.52); }
.flow-update-card { max-height: min(82vh, 760px); }
.flow-update-body { display: grid; gap: 12px; }
.flow-update-version-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.flow-update-version-grid span {
  display: grid;
  gap: 3px;
  border: 1px solid var(--soft-line);
  background: var(--bg);
  padding: 8px;
}
.flow-update-version-grid b {
  color: var(--accent);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.flow-update-version-grid em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: normal;
}
.flow-update-actions { gap: 8px; }
@media (max-width: 760px) {
  .flow-update-version-grid { grid-template-columns: 1fr 1fr; }
  .flow-update-actions { display: grid; grid-template-columns: 1fr; }
}


/* R3D3 pass13: compact diamond True/False route nodes */
.r3-node.is-truefalse-diamond {
  width: 132px !important;
  min-height: 132px !important;
  aspect-ratio: 1 / 1 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  display: block !important;
}
.r3-node.is-truefalse-diamond::before {
  content: '' !important;
  position: absolute !important;
  z-index: 0 !important;
  inset: 13px !important;
  border: 2px solid color-mix(in srgb, var(--gate) 82%, var(--line)) !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--gate) 20%, var(--panel)) 0%, color-mix(in srgb, var(--panel) 94%, #000 6%) 72%),
    var(--panel) !important;
  box-shadow: 6px 6px 0 var(--shadow), inset 0 0 0 1px color-mix(in srgb, var(--gate) 18%, transparent) !important;
  transform: rotate(45deg) !important;
  pointer-events: none !important;
}
.r3-node.is-truefalse-diamond:hover {
  transform: translateY(-2px) !important;
  box-shadow: none !important;
}
.r3-node.is-truefalse-diamond:hover::before {
  border-color: var(--gate) !important;
  box-shadow: 8px 8px 0 var(--shadow), 0 0 0 3px color-mix(in srgb, var(--gate) 14%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--gate) 28%, transparent) !important;
}
.r3-node.is-truefalse-diamond.selected {
  outline: none !important;
}
.r3-node.is-truefalse-diamond.selected::before {
  border-color: var(--accent) !important;
  box-shadow: 7px 7px 0 var(--shadow), 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--accent) 32%, transparent) !important;
}
.r3-node.is-truefalse-diamond.state-done::before,
.r3-node.is-truefalse-diamond[data-route-active="true"]::before {
  border-color: color-mix(in srgb, var(--output) 78%, var(--gate)) !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--output) 16%, var(--panel)) 0%, color-mix(in srgb, var(--panel) 94%, #000 6%) 76%) !important;
}
.r3-node.is-truefalse-diamond.state-error::before,
.r3-node.is-truefalse-diamond[data-route-active="false"].state-skipped::before {
  border-color: color-mix(in srgb, var(--danger) 58%, var(--gate)) !important;
}
.r3-node.is-truefalse-diamond.running::before {
  animation: trueFalseDiamondPulse .9s ease-in-out infinite alternate !important;
}
@keyframes trueFalseDiamondPulse {
  from { filter: brightness(1); transform: rotate(45deg) scale(1); }
  to { filter: brightness(1.12); transform: rotate(45deg) scale(1.04); }
}
.r3-node.is-truefalse-diamond .node-head {
  position: absolute !important;
  z-index: 2 !important;
  inset: 22px 20px 54px !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--ink) !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto auto !important;
  grid-template-areas: "title" "badge" !important;
  align-items: center !important;
  justify-items: center !important;
  gap: 5px !important;
  text-align: center !important;
}
.r3-node.is-truefalse-diamond .node-title-wrap {
  grid-area: title !important;
  width: 100% !important;
  max-width: 86px !important;
  min-width: 0 !important;
  display: grid !important;
  justify-items: center !important;
  gap: 5px !important;
  overflow: visible !important;
}
.r3-node.is-truefalse-diamond .node-title-wrap .node-title {
  max-width: 82px !important;
  color: var(--ink) !important;
  font-size: 9px !important;
  font-weight: 950 !important;
  letter-spacing: .11em !important;
  line-height: 1.12 !important;
  text-align: center !important;
  white-space: normal !important;
  text-overflow: clip !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}
.r3-node.is-truefalse-diamond .node-route-choice {
  order: -1 !important;
  min-width: 48px !important;
  height: 20px !important;
  padding: 0 7px !important;
  border-radius: 999px !important;
  font-size: 8px !important;
  letter-spacing: .13em !important;
  background: color-mix(in srgb, var(--gate) 20%, var(--panel)) !important;
  border-color: color-mix(in srgb, var(--gate) 82%, var(--line)) !important;
  color: #f7c65f !important;
}
.r3-node.is-truefalse-diamond .node-runtime-role,
.r3-node.is-truefalse-diamond .node-timer,
.r3-node.is-truefalse-diamond .node-cost,
.r3-node.is-truefalse-diamond .node-head-tools,
.r3-node.is-truefalse-diamond .node-tools,
.r3-node.is-truefalse-diamond .node-body-content,
.r3-node.is-truefalse-diamond .node-reason-chip {
  display: none !important;
}
.r3-node.is-truefalse-diamond .node-body {
  position: absolute !important;
  z-index: 2 !important;
  left: 25px !important;
  right: 25px !important;
  bottom: 28px !important;
  max-height: none !important;
  padding: 0 !important;
  color: color-mix(in srgb, var(--ink) 78%, var(--muted)) !important;
  overflow: visible !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}
.r3-node.is-truefalse-diamond .node-body-label {
  color: color-mix(in srgb, var(--ink) 78%, var(--muted)) !important;
  font-size: 7.5px !important;
  font-weight: 850 !important;
  letter-spacing: .07em !important;
  line-height: 1.15 !important;
  text-transform: uppercase !important;
  max-width: 78px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.r3-node.is-truefalse-diamond .node-status {
  position: absolute !important;
  z-index: 4 !important;
  left: 50% !important;
  bottom: 14px !important;
  transform: translateX(-50%) !important;
}
.r3-node.is-truefalse-diamond .node-port-in,
.r3-node.is-truefalse-diamond .node-port-out {
  top: 56px !important;
  z-index: 40 !important;
}
.r3-node.is-truefalse-diamond .node-port-in { left: 2px !important; }
.r3-node.is-truefalse-diamond .node-port-out { right: 2px !important; }
html.r3-mobile-device .r3-node.is-truefalse-diamond {
  width: 136px !important;
  min-height: 136px !important;
}
html.r3-mobile-device .r3-node.is-truefalse-diamond .node-port-in,
html.r3-mobile-device .r3-node.is-truefalse-diamond .node-port-out {
  top: 56px !important;
}
html.r3-mobile-device .r3-node.is-truefalse-diamond .node-port-in { left: -1px !important; }
html.r3-mobile-device .r3-node.is-truefalse-diamond .node-port-out { right: -1px !important; }

.r3-node.is-truefalse-diamond .node-head::after,
.r3-node.is-truefalse-diamond.running::after {
  display: none !important;
  content: none !important;
}

/* True/False route pass-through polish — pass62 */
.r3-node.is-truefalse-diamond[data-route-active="true"]::before {
  box-shadow:
    6px 6px 0 var(--shadow),
    0 0 0 3px color-mix(in srgb, var(--output) 18%, transparent),
    0 0 18px color-mix(in srgb, var(--output) 28%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--output) 30%, transparent) !important;
}
.r3-node.is-truefalse-diamond[data-route-active="true"]:hover::before {
  box-shadow:
    8px 8px 0 var(--shadow),
    0 0 0 4px color-mix(in srgb, var(--output) 20%, transparent),
    0 0 22px color-mix(in srgb, var(--output) 32%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--output) 36%, transparent) !important;
}
.r3-node.is-truefalse-diamond .node-body-label {
  display: none !important;
}

/* Project spend + playback theatre pass20 */
.flow-stat-card.flow-stat-spend {
  border-color: color-mix(in srgb, var(--accent) 68%, var(--soft-line));
  background: color-mix(in srgb, var(--accent) 10%, var(--bg));
}
.last-run-actions {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.r3-node.playback-active {
  outline: 4px solid var(--accent) !important;
  outline-offset: 4px;
  box-shadow: 9px 9px 0 var(--shadow), 0 0 0 3px color-mix(in srgb, var(--accent) 55%, transparent), 0 0 34px color-mix(in srgb, var(--accent) 42%, transparent) !important;
  z-index: 60 !important;
}
.r3-node.playback-done {
  border-color: color-mix(in srgb, var(--ok) 80%, var(--line)) !important;
  box-shadow: 7px 7px 0 var(--shadow), 0 0 18px color-mix(in srgb, var(--ok) 22%, transparent) !important;
}
.wire.wire-playback,
.wire-glow.wire-playback {
  stroke: var(--accent) !important;
  stroke-width: 4 !important;
  opacity: 1 !important;
  filter: drop-shadow(0 0 9px color-mix(in srgb, var(--accent) 80%, transparent));
}
.r3-playback-dialog {
  width: min(1180px, calc(100vw - 28px));
  max-height: min(90vh, 920px);
  padding: 0;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  box-shadow: 12px 12px 0 var(--shadow);
}
.r3-playback-dialog::backdrop {
  background: rgba(0, 0, 0, .62);
  backdrop-filter: blur(3px);
}
.r3-playback-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  max-height: min(90vh, 920px);
}
.r3-playback-head,
.r3-playback-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-2);
}
.r3-playback-head span {
  display: block;
  color: var(--accent);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.r3-playback-head strong {
  display: block;
  font-size: 18px;
  line-height: 1.2;
}
.r3-playback-head small {
  display: block;
  color: var(--muted);
  margin-top: 2px;
}
.r3-playback-body {
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
}
.r3-playback-stage {
  min-height: 0;
  overflow: auto;
  padding: 14px;
  display: grid;
  gap: 12px;
  align-content: start;
  background:
    linear-gradient(var(--soft-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--soft-line) 1px, transparent 1px),
    color-mix(in srgb, var(--canvas) 88%, var(--panel) 12%);
  background-size: 42px 42px;
}
.r3-playback-nodes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}
.r3-playback-node {
  text-align: left;
  border: 1px solid var(--soft-line);
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  color: var(--ink);
  padding: 10px;
  box-shadow: 3px 3px 0 var(--shadow);
}
.r3-playback-node b,
.r3-playback-event b,
.r3-playback-meta b {
  display: block;
  color: var(--accent);
}
.r3-playback-node small,
.r3-playback-event small,
.r3-playback-meta span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}
.r3-playback-node.is-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, var(--panel));
  transform: translateY(-2px);
}
.r3-playback-node.is-focus:not(.is-active) {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--soft-line));
}
.r3-playback-event {
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  padding: 14px;
  box-shadow: 5px 5px 0 var(--shadow);
}
.r3-playback-event p {
  max-height: 260px;
  overflow: auto;
  white-space: pre-wrap;
  color: var(--ink);
  margin-bottom: 8px;
}
.r3-playback-side {
  min-height: 0;
  border-left: 1px solid var(--line);
  background: var(--panel);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}
.r3-playback-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 12px;
  border-bottom: 1px solid var(--soft-line);
}
.r3-playback-meta > div {
  border: 1px solid var(--soft-line);
  background: var(--bg);
  padding: 8px;
  min-width: 0;
}
.r3-playback-meta b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.r3-playback-timeline {
  min-height: 0;
  overflow: auto;
  margin: 0;
  padding: 10px;
  display: grid;
  gap: 8px;
  list-style: none;
}
.r3-playback-timeline li button {
  width: 100%;
  text-align: left;
  border: 1px solid var(--soft-line);
  background: var(--bg);
  color: var(--ink);
  padding: 8px;
}
.r3-playback-timeline li.is-active button {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 13%, var(--bg));
}
.r3-playback-timeline b {
  display: block;
  font-size: 12px;
}
.r3-playback-timeline small {
  display: block;
  color: var(--muted);
  margin-top: 3px;
  line-height: 1.35;
}
.r3-playback-controls {
  border-top: 1px solid var(--line);
  border-bottom: 0;
  grid-template-columns: auto auto minmax(160px, 1fr) auto;
}
.r3-playback-controls input[type="range"] {
  min-width: 160px;
}
.r3-playback-controls select {
  width: auto;
  min-width: 86px;
}
@media (max-width: 820px) {
  .r3-playback-body { grid-template-columns: 1fr; }
  .r3-playback-side { border-left: 0; border-top: 1px solid var(--line); max-height: 340px; }
  .r3-playback-controls { display: grid; grid-template-columns: 1fr 1fr; }
  .r3-playback-controls input[type="range"],
  .r3-playback-controls select { grid-column: 1 / -1; width: 100%; }
}

/* Playback theatre visual repair pass42 — stage now mirrors live canvas nodes/wires */
.r3-playback-stage {
  position: relative;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.r3-playback-flow-shell {
  position: relative;
  min-width: 100%;
  min-height: 430px;
  border: 1px solid color-mix(in srgb, var(--soft-line) 72%, transparent);
  background:
    linear-gradient(var(--soft-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--soft-line) 1px, transparent 1px),
    color-mix(in srgb, var(--canvas) 84%, var(--bg) 16%);
  background-size: 42px 42px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bg) 78%, transparent);
  overflow: visible;
}
.r3-playback-flow {
  position: relative;
  min-width: 100%;
  min-height: 430px;
  isolation: isolate;
}
.r3-playback-wire-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.r3-playback-wire {
  fill: none !important;
  stroke: color-mix(in srgb, var(--line) 68%, var(--soft-line));
  stroke-width: 2.4;
  stroke-linecap: square;
  stroke-linejoin: round;
  opacity: .54;
  transition: stroke .18s ease, stroke-width .18s ease, opacity .18s ease, filter .18s ease;
}
.r3-playback-wire.is-active {
  stroke: color-mix(in srgb, var(--ok) 64%, var(--accent));
  stroke-width: 3.2;
  opacity: .92;
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--ok) 42%, transparent));
}
.r3-playback-wire.is-current {
  stroke: var(--accent);
  stroke-width: 4.2;
  opacity: 1;
  stroke-dasharray: 12 8;
  animation: r3PlaybackWireMarch .62s linear infinite;
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent) 74%, transparent));
}
@keyframes r3PlaybackWireMarch { to { stroke-dashoffset: -20; } }
.r3-playback-nodes {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block !important;
  pointer-events: none;
}
.r3-playback-node {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 0;
  text-align: left;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 96%, #000 4%);
  color: var(--ink);
  padding: 0;
  box-shadow: 7px 7px 0 var(--shadow);
  pointer-events: auto;
  overflow: hidden;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, filter .18s ease, opacity .18s ease;
}
.r3-playback-node:hover {
  transform: translateY(-2px);
  box-shadow: 9px 9px 0 var(--shadow);
}
.r3-playback-node-head {
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 8px;
  border-bottom: 1px solid var(--line);
  background: var(--agent);
  color: #fff;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.r3-playback-title-wrap {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.r3-playback-node-head b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: inherit !important;
}
.r3-playback-node-head em,
.r3-playback-title-wrap i {
  flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,.48);
  color: rgba(255,255,255,.84);
  padding: 1px 5px;
  font-style: normal;
  font-size: 9px;
  line-height: 1.45;
  letter-spacing: .1em;
}
.r3-playback-node-body {
  margin: 9px 10px 8px;
  padding: 8px 9px;
  min-height: 48px;
  max-height: 104px;
  overflow: hidden;
  display: grid;
  gap: 4px;
  border: 1px solid var(--soft-line);
  background: color-mix(in srgb, var(--bg) 88%, var(--panel) 12%);
}
.r3-playback-node-body strong {
  color: var(--accent);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.r3-playback-node-body span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.36;
  overflow-wrap: anywhere;
}
.r3-playback-node > small {
  display: block;
  margin: auto 10px 10px;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.32;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.r3-playback-node[data-type="TrueFalse"] .r3-playback-node-head { background: var(--gate); }
.r3-playback-node[data-type="Output"] .r3-playback-node-head { background: var(--output); }
.r3-playback-node[data-type="Checklist"] .r3-playback-node-head { background: var(--checklist); }
.r3-playback-node[data-type="TaskSplitter"] .r3-playback-node-head { background: var(--task-splitter); }
.r3-playback-node[data-type="Merge"] .r3-playback-node-head { background: var(--merge); }
.r3-playback-node[data-type="Verifier"] .r3-playback-node-head { background: color-mix(in srgb, var(--danger) 42%, var(--agent)); }
.r3-playback-node[data-type="Image"] .r3-playback-node-head,
.r3-playback-node[data-type="Video"] .r3-playback-node-head { background: color-mix(in srgb, var(--task-splitter) 58%, var(--agent)); }
.r3-playback-mini-tools {
  display: grid;
  gap: 5px;
  padding: 0 10px 9px;
}
.r3-playback-mini-tool {
  min-width: 0;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  min-height: 29px;
  border: 1px solid var(--soft-line);
  background: color-mix(in srgb, var(--panel-2) 86%, var(--accent) 4%);
  box-shadow: 2px 2px 0 var(--shadow);
}
.r3-playback-mini-tool i {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-left: 4px;
  border: 1px solid var(--soft-line);
  background: var(--bg);
  font-style: normal;
  font-size: 11px;
}
.r3-playback-mini-tool b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink) !important;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.r3-playback-port {
  position: absolute;
  top: 50%;
  z-index: 4;
  width: 12px;
  height: 12px;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: 1px 1px 0 var(--shadow);
  transform: translateY(-50%);
  pointer-events: none;
}
.r3-playback-port-in { left: -7px; }
.r3-playback-port-out { right: -7px; }
.r3-playback-node.is-focus:not(.is-active) {
  border-color: color-mix(in srgb, var(--accent) 72%, var(--soft-line));
  box-shadow: 7px 7px 0 var(--shadow), 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent);
}
.r3-playback-node.is-active,
.r3-playback-node.is-working {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 9px 9px 0 var(--shadow), 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 24px color-mix(in srgb, var(--accent) 34%, transparent);
  z-index: 10;
}
.r3-playback-node.is-working::after {
  content: "WORKING";
  position: absolute;
  right: 8px;
  top: -21px;
  padding: 3px 7px;
  border: 1px solid var(--accent);
  background: var(--panel);
  color: var(--accent);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .16em;
  box-shadow: 3px 3px 0 var(--shadow);
}
.r3-playback-node.is-done {
  border-color: color-mix(in srgb, var(--ok) 72%, var(--line));
  box-shadow: 7px 7px 0 var(--shadow), 0 0 18px color-mix(in srgb, var(--ok) 22%, transparent);
}
.r3-playback-node.is-error {
  border-color: var(--danger);
  box-shadow: 7px 7px 0 var(--shadow), 0 0 22px color-mix(in srgb, var(--danger) 34%, transparent);
}
.r3-playback-node.is-done .r3-playback-node-head em { color: #b9f7c4; border-color: color-mix(in srgb, var(--ok) 70%, #fff); }
.r3-playback-node.is-error .r3-playback-node-head em { color: #fff; border-color: var(--danger); background: var(--danger); }
.r3-playback-node.is-truefalse-diamond {
  width: 132px !important;
  min-height: 132px !important;
  aspect-ratio: 1 / 1;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  display: block;
}
.r3-playback-node.is-truefalse-diamond::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 13px;
  border: 2px solid color-mix(in srgb, var(--gate) 82%, var(--line));
  background: linear-gradient(135deg, color-mix(in srgb, var(--gate) 20%, var(--panel)) 0%, color-mix(in srgb, var(--panel) 94%, #000 6%) 72%);
  box-shadow: 6px 6px 0 var(--shadow), inset 0 0 0 1px color-mix(in srgb, var(--gate) 18%, transparent);
  transform: rotate(45deg);
  pointer-events: none;
}
.r3-playback-node.is-truefalse-diamond.is-working::before,
.r3-playback-node.is-truefalse-diamond.is-active::before {
  border-color: var(--accent);
  animation: trueFalseDiamondPulse .9s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent) 42%, transparent));
}
.r3-playback-node.is-truefalse-diamond.is-done::before,
.r3-playback-node.is-truefalse-diamond[data-route-active="true"]::before {
  border-color: color-mix(in srgb, var(--output) 78%, var(--gate));
  background: linear-gradient(135deg, color-mix(in srgb, var(--output) 16%, var(--panel)) 0%, color-mix(in srgb, var(--panel) 94%, #000 6%) 76%);
}
.r3-playback-node.is-truefalse-diamond.is-error::before,
.r3-playback-node.is-truefalse-diamond[data-route-active="false"]::before {
  border-color: color-mix(in srgb, var(--danger) 58%, var(--gate));
}
.r3-playback-node.is-truefalse-diamond .r3-playback-node-head {
  position: absolute;
  z-index: 2;
  inset: 22px 20px 54px;
  min-height: 0;
  height: auto;
  padding: 0;
  border: 0;
  background: transparent !important;
  color: var(--ink);
  display: grid;
  place-items: center;
  text-align: center;
}
.r3-playback-node.is-truefalse-diamond .r3-playback-title-wrap {
  display: grid;
  justify-items: center;
  gap: 5px;
}
.r3-playback-node.is-truefalse-diamond .r3-playback-node-head b {
  max-width: 82px;
  color: var(--ink) !important;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .11em;
  line-height: 1.12;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.r3-playback-node.is-truefalse-diamond .r3-playback-title-wrap i {
  min-width: 48px;
  height: 20px;
  color: #f7c65f;
  background: color-mix(in srgb, var(--gate) 20%, var(--panel));
  border-color: color-mix(in srgb, var(--gate) 82%, var(--line));
  border-radius: 999px;
  font-size: 8px;
}
.r3-playback-node.is-truefalse-diamond .r3-playback-node-head em,
.r3-playback-node.is-truefalse-diamond .r3-playback-mini-tools,
.r3-playback-node.is-truefalse-diamond > small {
  display: none;
}
.r3-playback-node.is-truefalse-diamond .r3-playback-node-body {
  position: absolute;
  z-index: 2;
  left: 25px;
  right: 25px;
  bottom: 28px;
  margin: 0;
  padding: 0;
  min-height: 0;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.r3-playback-node.is-truefalse-diamond .r3-playback-node-body strong {
  color: color-mix(in srgb, var(--ink) 78%, var(--muted));
  font-size: 7.5px;
  font-weight: 850;
  letter-spacing: .07em;
  line-height: 1.15;
  max-width: 78px;
}
.r3-playback-node.is-truefalse-diamond .r3-playback-node-body span { display: none; }
.r3-playback-node.is-truefalse-diamond .r3-playback-port-in { left: 2px; }
.r3-playback-node.is-truefalse-diamond .r3-playback-port-out { right: 2px; }
.r3-playback-event {
  position: sticky;
  left: 0;
  bottom: 0;
  z-index: 5;
  max-width: min(760px, calc(100vw - 460px));
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  backdrop-filter: blur(4px);
}
@media (max-width: 820px) {
  .r3-playback-flow-shell { min-height: 360px; }
  .r3-playback-event { max-width: none; position: static; }
  .r3-playback-node { transform-origin: top left; }
}

/* Playback theatre polish pass43 — deterministic scrub, fit controls, live-like working pulse */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.r3-playback-stage::before {
  content: var(--playback-zoom, "100%");
  position: sticky;
  top: 0;
  left: 0;
  z-index: 8;
  width: max-content;
  display: block;
  margin-bottom: -28px;
  padding: 5px 7px;
  border: 1px solid var(--soft-line);
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  pointer-events: none;
}
.r3-playback-flow-shell[data-fit="1"] {
  min-width: 0;
  min-height: 0;
}
.r3-playback-flow {
  will-change: transform;
}
.r3-playback-controls {
  justify-content: stretch;
  grid-template-columns: auto auto auto auto auto minmax(160px, 1fr) auto;
}
.r3-playback-follow {
  width: auto;
  margin: 0;
  min-height: 35px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 9px;
  border: 1px solid var(--soft-line);
  background: var(--bg);
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 2px 2px 0 var(--shadow);
}
.r3-playback-follow input {
  width: auto;
  margin: 0;
}
.r3-playback-node.is-queued {
  opacity: .54;
  filter: saturate(.78);
}
.r3-playback-node.is-preview:not(.is-active) {
  border-color: color-mix(in srgb, var(--accent) 72%, var(--line));
  box-shadow: 7px 7px 0 var(--shadow), 0 0 0 2px color-mix(in srgb, var(--accent) 32%, transparent), 0 0 22px color-mix(in srgb, var(--accent) 22%, transparent);
  opacity: 1;
  z-index: 9;
}
.r3-playback-wire.is-preview:not(.is-current) {
  stroke: var(--accent);
  stroke-width: 3.8;
  opacity: 1;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent) 64%, transparent));
}
.r3-playback-node.is-working {
  animation: nodeWorkingPulse 1.05s ease-in-out infinite !important;
}
.r3-playback-node:not(.is-truefalse-diamond).is-working::before {
  content: "";
  position: absolute;
  inset: -7px;
  z-index: -1;
  border: 2px solid var(--accent);
  opacity: .82;
  animation: workingSweep 1.05s linear infinite, workingHalo 1.05s ease-in-out infinite;
  pointer-events: none;
}
.r3-playback-node.is-working .r3-playback-node-head {
  background-image: linear-gradient(90deg, var(--agent), color-mix(in srgb, var(--accent) 45%, var(--agent)), var(--agent));
  background-size: 220% 100%;
  animation: nodeHeadWorking 1.2s linear infinite;
}
.r3-playback-node[data-type="TrueFalse"].is-working .r3-playback-node-head,
.r3-playback-node[data-type="Output"].is-working .r3-playback-node-head,
.r3-playback-node[data-type="Checklist"].is-working .r3-playback-node-head,
.r3-playback-node[data-type="TaskSplitter"].is-working .r3-playback-node-head,
.r3-playback-node[data-type="Merge"].is-working .r3-playback-node-head,
.r3-playback-node[data-type="Verifier"].is-working .r3-playback-node-head,
.r3-playback-node[data-type="Image"].is-working .r3-playback-node-head,
.r3-playback-node[data-type="Video"].is-working .r3-playback-node-head {
  background-image: linear-gradient(90deg, color-mix(in srgb, var(--agent) 70%, #000), color-mix(in srgb, var(--accent) 46%, var(--agent)), color-mix(in srgb, var(--agent) 70%, #000));
}
.r3-playback-node.is-retry {
  border-color: color-mix(in srgb, var(--warning) 72%, var(--line));
  box-shadow: 9px 9px 0 var(--shadow), 0 0 0 2px color-mix(in srgb, var(--warning) 40%, transparent), 0 0 24px color-mix(in srgb, var(--warning) 26%, transparent);
  z-index: 11;
}
.r3-playback-node.is-retry .r3-playback-node-head em {
  color: #fff3d0;
  border-color: var(--warning);
  background: color-mix(in srgb, var(--warning) 42%, transparent);
}
.r3-playback-node.is-retry::after {
  content: "RETRY";
  position: absolute;
  right: 8px;
  top: -21px;
  padding: 3px 7px;
  border: 1px solid var(--warning);
  background: var(--panel);
  color: var(--warning);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
  pointer-events: none;
  box-shadow: 3px 3px 0 var(--shadow);
}
.r3-playback-node-badge {
  position: absolute;
  left: 8px;
  top: -22px;
  z-index: 8;
  max-width: calc(100% - 16px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 3px 7px;
  border: 1px solid var(--soft-line);
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  box-shadow: 3px 3px 0 var(--shadow);
  pointer-events: none;
}
.r3-playback-node-badge[data-event-tone="retry"] {
  border-color: var(--warning);
  color: var(--warning);
}
.r3-playback-node-badge[data-event-tone="error"] {
  border-color: var(--danger);
  color: var(--danger);
}
.r3-playback-node-badge[data-event-tone="done"] {
  border-color: color-mix(in srgb, var(--ok) 70%, var(--line));
  color: var(--ok);
}
.r3-playback-event[data-event-tone="retry"] {
  border-color: var(--warning);
  background: color-mix(in srgb, var(--panel) 82%, var(--warning) 11%);
  box-shadow: 5px 5px 0 var(--shadow), 0 0 22px color-mix(in srgb, var(--warning) 18%, transparent);
}
.r3-playback-event[data-event-tone="error"] {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--panel) 82%, var(--danger) 10%);
}
.r3-playback-event[data-event-tone="handoff"] {
  border-color: var(--accent);
}
.r3-playback-timeline li[data-event-tone="retry"] button {
  border-color: color-mix(in srgb, var(--warning) 78%, var(--soft-line));
  background: color-mix(in srgb, var(--bg) 84%, var(--warning) 9%);
}
.r3-playback-timeline li[data-event-tone="error"] button {
  border-color: color-mix(in srgb, var(--danger) 78%, var(--soft-line));
  background: color-mix(in srgb, var(--bg) 84%, var(--danger) 8%);
}
.r3-playback-timeline li:hover button {
  border-color: var(--accent);
  transform: translateX(-1px);
}
.r3-playback-route-rails {
  pointer-events: none;
}
.r3-playback-node.is-truefalse-diamond .r3-playback-route-rails i {
  position: absolute;
  z-index: 4;
  min-width: 42px;
  padding: 2px 5px;
  border: 1px solid var(--soft-line);
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  color: var(--muted);
  font-size: 7.5px;
  font-style: normal;
  font-weight: 950;
  letter-spacing: .12em;
  text-align: center;
  box-shadow: 2px 2px 0 var(--shadow);
}
.r3-playback-node.is-truefalse-diamond .r3-playback-route-rails i[data-route-label="true"] {
  right: -18px;
  top: 24px;
}
.r3-playback-node.is-truefalse-diamond .r3-playback-route-rails i[data-route-label="false"] {
  right: -18px;
  bottom: 24px;
}
.r3-playback-node.is-truefalse-diamond[data-route-choice="true"][data-route-active="true"] .r3-playback-route-rails i[data-route-label="true"],
.r3-playback-node.is-truefalse-diamond[data-route-choice="false"][data-route-active="true"] .r3-playback-route-rails i[data-route-label="false"] {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 13%, var(--panel));
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--accent) 34%, transparent));
}
.r3-playback-node.is-truefalse-diamond[data-route-active="false"] .r3-playback-route-rails i {
  opacity: .54;
}
.r3-playback-node.is-truefalse-diamond .r3-playback-route-value {
  position: absolute;
  z-index: 4;
  left: 29px;
  right: 29px;
  bottom: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--gate) 72%, var(--soft-line));
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  color: var(--muted);
  padding: 2px 4px;
  text-align: center;
  font-size: 7.5px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.r3-playback-node.is-truefalse-diamond.is-working::after,
.r3-playback-node.is-truefalse-diamond.is-retry::after {
  right: -5px;
  top: -14px;
}
@media (max-width: 820px) {
  .r3-playback-controls { grid-template-columns: 1fr 1fr; }
  .r3-playback-follow,
  .r3-playback-controls input[type="range"],
  .r3-playback-controls select { grid-column: 1 / -1; width: 100%; }
  .r3-playback-node-badge { top: -19px; }
}

/* Community full-page destination + board UX polish — pass44 2026-07-04 */
html.r3-community-page-mode,
html.r3-community-page-mode body {
  height: auto;
  min-height: 100%;
  overflow: auto;
}
body.r3-community-page-mode {
  background:
    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 30rem),
    linear-gradient(135deg, color-mix(in srgb, var(--bg) 96%, #000 4%), color-mix(in srgb, var(--panel) 72%, #000 28%));
}
.r3-community-page-mode #app.r3-community-page-hidden {
  display: none !important;
}
.community-page {
  min-height: 100vh;
  padding: clamp(10px, 2.2vw, 28px);
  color: var(--ink);
}
.community-page .community-shell-page {
  width: min(1480px, calc(100vw - clamp(20px, 4vw, 56px)));
  min-height: calc(100vh - clamp(20px, 4vw, 56px));
  max-height: none;
  margin: 0 auto;
  border: 1px solid var(--line);
  box-shadow: 12px 12px 0 var(--shadow);
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  background:
    radial-gradient(circle at 16% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 34rem),
    color-mix(in srgb, var(--panel) 96%, #000 4%);
}
.community-page .community-hero-v4 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 18px;
  padding: clamp(16px, 2vw, 24px);
}
.community-page .community-hero-copy h2 {
  font-size: clamp(34px, 5vw, 64px);
  line-height: .92;
  margin: 4px 0 8px;
}
.community-page .community-hero-copy p {
  max-width: 760px;
  font-size: 14px;
}
.community-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(82px, 1fr));
  gap: 8px;
  min-width: min(360px, 34vw);
}
.community-hero-stats span,
.community-guide-card {
  border: 1px solid var(--soft-line);
  background: color-mix(in srgb, var(--bg) 78%, var(--panel) 22%);
  box-shadow: 3px 3px 0 var(--shadow);
}
.community-hero-stats span {
  display: grid;
  gap: 2px;
  padding: 9px 10px;
}
.community-hero-stats b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--accent);
  font-size: 18px;
  line-height: 1;
}
.community-hero-stats small {
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.community-page .community-toolbar-v4 {
  grid-template-columns: minmax(260px, 1fr) 220px minmax(180px, 260px) auto;
  padding: 13px clamp(14px, 1.8vw, 22px);
}
.community-category-rail {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 11px clamp(14px, 1.8vw, 22px);
  border-bottom: 1px solid var(--soft-line);
  background: color-mix(in srgb, var(--bg) 52%, transparent);
  scrollbar-gutter: stable;
}
.community-category-chip {
  flex: 0 0 auto;
  border: 1px solid var(--soft-line);
  background: color-mix(in srgb, var(--panel) 86%, transparent);
  color: var(--muted);
  padding: 7px 10px;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 2px 2px 0 var(--shadow);
}
.community-category-chip:hover,
.community-category-chip.is-active {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
  transform: translateY(-1px);
}
.community-page .community-layout-v4 {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(320px, 410px) minmax(460px, 1fr) minmax(240px, 304px);
}
.community-page .community-list-pane-v4 {
  gap: 14px;
  padding: clamp(12px, 1.6vw, 18px);
  border-right: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 82%, var(--panel) 18%);
}
.community-page .community-detail-pane-v4 {
  padding: clamp(12px, 1.6vw, 18px);
  background:
    linear-gradient(var(--soft-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--soft-line) 1px, transparent 1px),
    color-mix(in srgb, var(--canvas, var(--bg)) 76%, var(--panel) 24%);
  background-size: 42px 42px;
}
.community-dialog .community-info-pane {
  display: none;
}
.community-info-pane {
  min-height: 0;
  overflow: auto;
  display: grid;
  align-content: start;
  gap: 12px;
  padding: clamp(12px, 1.5vw, 16px);
  border-left: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 86%, #000 14%);
}
.community-guide-card {
  display: grid;
  gap: 8px;
  padding: 13px;
  color: var(--muted);
  line-height: 1.42;
}
.community-guide-card b {
  color: var(--ink);
  font-size: 15px;
}
.community-guide-card p {
  margin: 0;
  color: var(--muted);
}
.community-guide-card ul {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
}
.community-flow-context-card p {
  margin: 0;
  overflow-wrap: anywhere;
  font: 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.community-page .community-list-head-v4 {
  grid-template-columns: minmax(0, 1fr) auto;
}
.community-page .community-post-list {
  gap: 12px;
}
.community-post-card-v2 {
  position: relative;
  isolation: isolate;
}
.community-page .community-post-card-v2 {
  padding: 13px;
  background: color-mix(in srgb, var(--panel) 92%, #000 8%);
}
.community-page .community-post-card-v2::before {
  content: '';
  position: absolute;
  inset: -1px auto -1px -1px;
  width: 4px;
  background: transparent;
  transition: background .16s ease, box-shadow .16s ease;
}
.community-page .community-post-card-v2:hover::before,
.community-page .community-post-card-v2.is-active::before {
  background: var(--accent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 45%, transparent);
}
.community-page .community-post-title {
  font-size: 17px;
  line-height: 1.18;
}
.community-page .community-post-card-v2 .community-post-excerpt {
  -webkit-line-clamp: 2;
  font-size: 13px;
}
.community-page .community-detail-card-v2 {
  max-width: 960px;
  margin-inline: auto;
  gap: 16px;
  padding: clamp(14px, 1.8vw, 22px);
  background: color-mix(in srgb, var(--panel) 96%, #000 4%);
  box-shadow: 7px 7px 0 var(--shadow);
}
.community-page .community-detail-head-v2 h3 {
  font-size: clamp(30px, 4.5vw, 48px);
  letter-spacing: -.045em;
}
.community-page .community-body-card {
  padding: 16px;
  background: color-mix(in srgb, var(--bg) 82%, var(--panel) 18%);
}
.community-page .community-comment-v2 {
  padding: 13px;
  background: color-mix(in srgb, var(--panel) 90%, var(--bg) 10%);
}
.community-page .community-comment-v2 p {
  color: var(--ink);
}
.community-page .community-reply-box-v2:not(.is-locked) {
  position: sticky;
  bottom: 10px;
  z-index: 4;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  padding: 12px;
  box-shadow: 5px 5px 0 var(--shadow), 0 -10px 30px color-mix(in srgb, var(--bg) 52%, transparent);
}
.community-mobile-back {
  display: none;
  margin-bottom: 10px;
}
details.community-mod-actions-v4 {
  display: block;
  border: 1px dashed var(--soft-line);
  padding: 0;
  background: color-mix(in srgb, var(--bg) 62%, transparent);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
}
details.community-mod-actions-v4 summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 8px;
  cursor: pointer;
  color: var(--muted);
}
details.community-mod-actions-v4 summary::-webkit-details-marker {
  display: none;
}
details.community-mod-actions-v4 summary::after {
  content: 'Controls';
  color: var(--accent);
  font-size: 10px;
}
details.community-mod-actions-v4[open] summary {
  border-bottom: 1px dashed var(--soft-line);
}
details.community-mod-actions-v4 .community-mod-buttons {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 8px;
}
.community-mod-state {
  margin-left: auto;
  border: 1px solid var(--soft-line);
  padding: 2px 5px;
  color: var(--warning);
}
@media (min-width: 861px) {
  .community-page .community-detail-pane-v4,
  .community-page .community-list-pane-v4,
  .community-page .community-info-pane {
    max-height: calc(100vh - 238px);
  }
}
@media (max-width: 1120px) {
  .community-page .community-hero-v4 {
    grid-template-columns: minmax(0, 1fr);
  }
  .community-hero-stats {
    min-width: 0;
  }
  .community-page .community-layout-v4 {
    grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
  }
  .community-info-pane {
    display: none;
  }
}
@media (max-width: 860px) {
  .community-page {
    padding: 8px;
  }
  .community-page .community-shell-page {
    width: 100%;
    min-height: calc(100vh - 16px);
    box-shadow: 6px 6px 0 var(--shadow);
  }
  .community-page .community-toolbar-v4,
  .community-page .community-layout-v4 {
    grid-template-columns: 1fr;
  }
  .community-page .community-hero-v4,
  .community-page .community-toolbar-v4,
  .community-page .community-list-pane-v4,
  .community-page .community-detail-pane-v4,
  .community-info-pane {
    padding: 12px;
  }
  .community-page .community-list-pane-v4 {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    max-height: none;
  }
  .community-page .community-detail-pane-v4 {
    min-height: 62vh;
    max-height: none;
  }
  .community-mobile-back {
    display: inline-flex;
    width: max-content;
  }
  .community-page.community-thread-open .community-toolbar-v4,
  .community-page.community-thread-open .community-category-rail,
  .community-page.community-thread-open .community-list-pane-v4 {
    display: none;
  }
  .community-page:not(.community-thread-open) .community-detail-pane-v4 {
    display: none;
  }
  .community-page .community-reply-box-v2:not(.is-locked) {
    position: static;
  }
}
@media (max-width: 560px) {
  .community-hero-stats {
    grid-template-columns: 1fr;
  }
  .community-page .community-hero-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .community-page .community-hero-actions .ui-btn:first-child {
    grid-column: 1 / -1;
  }
  .community-page .community-detail-head-v2,
  .community-page .community-attached-flow-v2,
  .community-page .community-inline-reply-v2 {
    display: grid;
    grid-template-columns: 1fr;
  }
}
.community-dialog .community-hero-stats,
.community-dialog .community-category-rail {
  display: none;
}


/* Community full-bleed polish + stable layout — pass45 2026-07-05 */
html.r3-community-page-mode,
body.r3-community-page-mode {
  width: 100%;
  min-width: 0;
}
body.r3-community-page-mode {
  overflow-x: hidden;
}
.community-page.community-page-pass45 {
  width: 100%;
  min-height: 100dvh;
  padding: clamp(8px, 1.1vw, 16px);
  display: grid;
  color: var(--ink);
}
.community-page.community-page-pass45 .community-shell-page {
  width: 100%;
  max-width: none;
  min-height: calc(100dvh - clamp(16px, 2.2vw, 32px));
  margin: 0;
  overflow: hidden;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  border-color: color-mix(in srgb, var(--line) 86%, transparent);
  box-shadow: 10px 10px 0 var(--shadow), 0 24px 90px rgba(0,0,0,.28);
}
.community-page.community-page-pass45 .community-hero-v5 {
  grid-template-columns: minmax(360px, 1fr) minmax(270px, 430px) auto;
  gap: clamp(14px, 1.6vw, 24px);
  min-height: 132px;
  padding: clamp(18px, 2vw, 30px) clamp(20px, 2.2vw, 34px);
}
.community-page.community-page-pass45 .community-hero-copy {
  min-width: 0;
}
.community-page.community-page-pass45 .community-hero-copy h2 {
  max-width: none;
  font-size: clamp(42px, 4.6vw, 76px);
  line-height: .9;
  letter-spacing: -.065em;
  text-wrap: balance;
}
.community-page.community-page-pass45 .community-hero-copy p {
  max-width: 920px;
}
.community-page.community-page-pass45 .community-hero-stats {
  width: 100%;
  min-width: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.community-page.community-page-pass45 .community-hero-stats span {
  min-width: 0;
  min-height: 54px;
  align-content: center;
}
.community-page.community-page-pass45 .community-hero-stats b {
  max-width: 100%;
}
.community-page.community-page-pass45 .community-hero-actions {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.community-page.community-page-pass45 .community-toolbar-v5 {
  grid-template-columns: minmax(360px, 1fr) minmax(190px, 230px) minmax(210px, 300px) auto;
  align-items: end;
  gap: 12px;
  padding: 14px clamp(18px, 2vw, 30px);
  background: color-mix(in srgb, var(--panel) 82%, #000 5%);
}
.community-page.community-page-pass45 .community-toolbar-v5 label {
  min-width: 0;
}
.community-page.community-page-pass45 .community-toolbar-v5 input,
.community-page.community-page-pass45 .community-toolbar-v5 select,
.community-page.community-page-pass45 .community-toolbar-v5 .ui-btn {
  min-height: 40px;
}
.community-page.community-page-pass45 .community-category-rail-v5 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 8px;
  overflow: visible;
  padding: 12px clamp(18px, 2vw, 30px);
  min-height: 62px;
  align-items: stretch;
  background: color-mix(in srgb, var(--bg) 58%, var(--panel) 42%);
}
.community-page.community-page-pass45 .community-category-chip {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-inline: 10px;
  transform: none !important;
  box-shadow: 2px 2px 0 var(--shadow);
  transition: border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease;
}
.community-page.community-page-pass45 .community-category-chip:hover,
.community-page.community-page-pass45 .community-category-chip.is-active {
  transform: none !important;
  box-shadow: 3px 3px 0 var(--shadow), inset 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent);
}
.community-page.community-page-pass45 .community-layout-v5 {
  min-height: 0;
  grid-template-columns:
    minmax(340px, clamp(360px, 24vw, 460px))
    minmax(0, 1fr)
    minmax(236px, clamp(250px, 16vw, 330px));
  align-items: stretch;
}
.community-page.community-page-pass45 .community-list-pane-v5,
.community-page.community-page-pass45 .community-detail-pane-v5,
.community-page.community-page-pass45 .community-info-pane {
  max-height: none;
  min-height: 0;
  height: auto;
}
.community-page.community-page-pass45 .community-list-pane-v5 {
  padding: clamp(14px, 1.4vw, 22px);
  gap: 12px;
}
.community-page.community-page-pass45 .community-detail-pane-v5 {
  padding: clamp(14px, 1.6vw, 24px);
  overflow: auto;
}
.community-page.community-page-pass45 .community-info-pane {
  padding: clamp(14px, 1.4vw, 20px);
}
@media (min-width: 861px) {
  .community-page.community-page-pass45 .community-list-pane-v5,
  .community-page.community-page-pass45 .community-detail-pane-v5,
  .community-page.community-page-pass45 .community-info-pane {
    height: calc(100dvh - 286px);
    max-height: calc(100dvh - 286px);
  }
}
.community-page.community-page-pass45 .community-list-head-v4 {
  min-height: 48px;
  align-items: stretch;
}
.community-page.community-page-pass45 .community-status-card,
.community-page.community-page-pass45 .community-count-pill {
  min-height: 46px;
}
.community-page.community-page-pass45 .community-post-list {
  align-content: start;
}
.community-page.community-page-pass45 .community-post-card-v2 {
  min-height: 116px;
  padding: 14px;
  border-color: color-mix(in srgb, var(--soft-line) 88%, transparent);
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.community-page.community-page-pass45 .community-post-card-v2:hover,
.community-page.community-page-pass45 .community-post-card-v2.is-active {
  transform: none;
  box-shadow: 5px 5px 0 var(--shadow), inset 0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent);
}
.community-page.community-page-pass45 .community-card-badges {
  min-width: 0;
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 6px;
  align-items: center;
  max-width: 100%;
}
.community-page.community-page-pass45 .community-card-badges em,
.community-page.community-page-pass45 .community-special-badge {
  flex: 0 1 auto;
  max-width: min(210px, 46vw);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-height: 23px;
  display: inline-flex;
  align-items: center;
}
.community-page.community-page-pass45 .community-post-card-meta,
.community-page.community-page-pass45 .community-detail-meta {
  min-height: 26px;
  align-items: center;
}
.community-page.community-page-pass45 .community-detail-card-v2 {
  width: 100%;
  max-width: none;
  margin: 0;
  min-height: 100%;
  padding: clamp(18px, 2vw, 28px);
  gap: 18px;
  border-color: color-mix(in srgb, var(--soft-line) 88%, transparent);
}
.community-page.community-page-pass45 .community-detail-head-v2 {
  align-items: start;
  min-height: 120px;
  padding-bottom: 18px;
}
.community-page.community-page-pass45 .community-detail-title-block {
  min-width: 0;
}
.community-page.community-page-pass45 .community-detail-head-v2 h3 {
  max-width: 1120px;
  font-size: clamp(34px, 4vw, 64px);
  line-height: .94;
  letter-spacing: -.06em;
  text-wrap: balance;
}
.community-page.community-page-pass45 .community-detail-actions {
  min-width: 48px;
  display: flex;
  justify-content: flex-end;
}
.community-page.community-page-pass45 .community-body-card {
  min-height: 96px;
  padding: clamp(14px, 1.4vw, 20px);
}
.community-page.community-page-pass45 .community-comments-v2 {
  min-height: 120px;
}
.community-page.community-page-pass45 .community-section-title {
  min-height: 32px;
}
.community-page.community-page-pass45 .community-comment-v2 {
  min-height: 86px;
  border-color: color-mix(in srgb, var(--soft-line) 82%, transparent);
}
.community-page.community-page-pass45 .community-reply-box-v2:not(.is-locked) {
  bottom: 14px;
}
.community-page.community-page-pass45 .community-guide-card {
  min-height: 124px;
  border-color: color-mix(in srgb, var(--soft-line) 84%, transparent);
}
.community-page.community-page-pass45 .community-empty-detail-v3 {
  min-height: min(520px, 62vh);
}
@media (min-width: 1520px) {
  .community-page.community-page-pass45 .community-layout-v5 {
    grid-template-columns: minmax(390px, 470px) minmax(0, 1fr) minmax(280px, 360px);
  }
}
@media (max-width: 1260px) {
  .community-page.community-page-pass45 .community-hero-v5 {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 390px);
  }
  .community-page.community-page-pass45 .community-hero-actions {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, max-content);
    justify-content: end;
  }
  .community-page.community-page-pass45 .community-layout-v5 {
    grid-template-columns: minmax(330px, 430px) minmax(0, 1fr);
  }
  .community-page.community-page-pass45 .community-info-pane {
    display: none;
  }
}
@media (max-width: 980px) {
  .community-page.community-page-pass45 .community-hero-v5,
  .community-page.community-page-pass45 .community-toolbar-v5,
  .community-page.community-page-pass45 .community-layout-v5 {
    grid-template-columns: 1fr;
  }
  .community-page.community-page-pass45 .community-hero-actions {
    justify-content: stretch;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .community-page.community-page-pass45 .community-category-rail-v5 {
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  }
}
@media (max-width: 860px) {
  .community-page.community-page-pass45 {
    padding: 6px;
  }
  .community-page.community-page-pass45 .community-shell-page {
    min-height: calc(100dvh - 12px);
  }
  .community-page.community-page-pass45 .community-list-pane-v5,
  .community-page.community-page-pass45 .community-detail-pane-v5,
  .community-page.community-page-pass45 .community-info-pane {
    height: auto;
    max-height: none;
  }
  .community-page.community-page-pass45 .community-detail-card-v2 {
    min-height: 62vh;
  }
}
@media (max-width: 620px) {
  .community-page.community-page-pass45 .community-hero-actions {
    grid-template-columns: 1fr;
  }
  .community-page.community-page-pass45 .community-hero-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .community-page.community-page-pass45 .community-hero-stats small {
    letter-spacing: .06em;
  }
  .community-page.community-page-pass45 .community-detail-head-v2 {
    min-height: 0;
  }
}
@media (max-width: 430px) {
  .community-page.community-page-pass45 .community-hero-stats,
  .community-page.community-page-pass45 .community-category-rail-v5 {
    grid-template-columns: 1fr;
  }
}


/* Community compact full-page polish — pass46 2026-07-05 */
html.r3-community-page-mode,
html.r3-community-page-mode body,
body.r3-community-page-mode {
  height: 100%;
  min-height: 0;
  overflow: hidden !important;
}
body.r3-community-page-mode {
  overscroll-behavior: none;
}
.community-page.community-page-pass46 {
  height: 100dvh;
  min-height: 0;
  padding: 8px;
  overflow: hidden;
  align-items: stretch;
}
.community-page.community-page-pass46 .community-shell-page {
  height: calc(100dvh - 16px);
  min-height: 0;
  max-height: calc(100dvh - 16px);
  grid-template-rows: auto auto auto minmax(0, 1fr);
  overflow: hidden;
  box-shadow: 6px 6px 0 var(--shadow), 0 16px 52px rgba(0,0,0,.24);
}
.community-page.community-page-pass46 .community-hero-v5 {
  min-height: 88px;
  padding: 14px 18px;
  grid-template-columns: minmax(340px, 1fr) minmax(240px, 388px) auto;
  gap: 14px;
  border-bottom: 1px solid var(--line);
}
.community-page.community-page-pass46 .community-hero-copy h2 {
  margin: 2px 0 4px;
  font-size: clamp(36px, 3.15vw, 56px);
  line-height: .92;
  letter-spacing: -.058em;
}
.community-page.community-page-pass46 .community-hero-copy p {
  margin: 0;
  max-width: 760px;
  font-size: 12.5px;
  line-height: 1.35;
}
.community-page.community-page-pass46 .community-kicker {
  font-size: 9.5px;
  letter-spacing: .18em;
}
.community-page.community-page-pass46 .community-hero-stats {
  gap: 7px;
  min-width: 0;
}
.community-page.community-page-pass46 .community-hero-stats span {
  min-height: 42px;
  padding: 7px 9px;
  box-shadow: 2px 2px 0 var(--shadow);
}
.community-page.community-page-pass46 .community-hero-stats b {
  font-size: 15px;
}
.community-page.community-page-pass46 .community-hero-stats small {
  font-size: 9px;
  letter-spacing: .1em;
}
.community-page.community-page-pass46 .community-hero-actions {
  gap: 7px;
}
.community-page.community-page-pass46 .community-hero-actions .ui-btn {
  min-height: 34px;
  padding: 7px 10px;
  box-shadow: 2px 2px 0 var(--shadow);
}
.community-page.community-page-pass46 .community-toolbar-v5 {
  padding: 8px 18px;
  gap: 10px;
  grid-template-columns: minmax(320px, 1fr) minmax(170px, 214px) minmax(190px, 270px) auto;
}
.community-page.community-page-pass46 .community-toolbar-v5 label {
  gap: 4px;
  margin: 0;
  font-size: 10px;
}
.community-page.community-page-pass46 .community-toolbar-v5 input,
.community-page.community-page-pass46 .community-toolbar-v5 select,
.community-page.community-page-pass46 .community-toolbar-v5 .ui-btn {
  min-height: 34px;
  padding-block: 7px;
}
.community-page.community-page-pass46 .community-category-rail-v5 {
  min-height: 46px;
  height: 46px;
  padding: 7px 18px;
  gap: 7px;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  overflow: hidden;
  align-items: stretch;
}
.community-page.community-page-pass46 .community-category-chip {
  min-height: 31px;
  height: 31px;
  padding: 0 8px;
  font-size: 10px;
  letter-spacing: .075em;
  box-shadow: 1px 1px 0 var(--shadow);
  contain: layout paint;
}
.community-page.community-page-pass46 .community-category-chip:hover,
.community-page.community-page-pass46 .community-category-chip.is-active {
  box-shadow: 2px 2px 0 var(--shadow), inset 0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent);
}
.community-page.community-page-pass46 .community-layout-v5 {
  min-height: 0;
  height: 100%;
  overflow: hidden;
  grid-template-columns: minmax(318px, 390px) minmax(0, 1fr) minmax(248px, 314px);
}
.community-page.community-page-pass46 .community-list-pane-v5,
.community-page.community-page-pass46 .community-detail-pane-v5,
.community-page.community-page-pass46 .community-info-pane {
  height: auto !important;
  max-height: none !important;
  min-height: 0;
}
.community-page.community-page-pass46 .community-list-pane-v5 {
  padding: 12px;
  gap: 10px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}
.community-page.community-page-pass46 .community-list-pane-v5:has(.community-composer-panel:not(.hidden)) {
  grid-template-rows: auto auto minmax(0, 1fr);
}
.community-page.community-page-pass46 .community-post-list {
  min-height: 0;
  overflow: auto;
  padding-right: 3px;
  scrollbar-gutter: stable;
  gap: 10px;
}
.community-page.community-page-pass46 .community-list-head-v4 {
  min-height: 38px;
  gap: 8px;
}
.community-page.community-page-pass46 .community-status-card,
.community-page.community-page-pass46 .community-count-pill {
  min-height: 38px;
  padding-block: 7px;
}
.community-page.community-page-pass46 .community-post-card-v2 {
  min-height: 96px;
  padding: 11px 12px;
  box-shadow: 2px 2px 0 var(--shadow);
}
.community-page.community-page-pass46 .community-post-card-v2:hover,
.community-page.community-page-pass46 .community-post-card-v2.is-active {
  box-shadow: 3px 3px 0 var(--shadow), inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
}
.community-page.community-page-pass46 .community-post-title {
  font-size: 15.5px;
  line-height: 1.16;
}
.community-page.community-page-pass46 .community-post-card-v2 .community-post-excerpt {
  font-size: 12px;
  line-height: 1.32;
}
.community-page.community-page-pass46 .community-card-badges em,
.community-page.community-page-pass46 .community-special-badge {
  min-height: 20px;
  font-size: 9.5px;
  padding: 2px 6px;
}
.community-page.community-page-pass46 .community-detail-pane-v5 {
  padding: 12px 14px;
  overflow: auto;
  scrollbar-gutter: stable;
}
.community-page.community-page-pass46 .community-detail-card-v2 {
  min-height: 100%;
  padding: 16px;
  gap: 14px;
  box-shadow: 5px 5px 0 var(--shadow);
}
.community-page.community-page-pass46 .community-detail-head-v2 {
  min-height: 86px;
  padding-bottom: 12px;
}
.community-page.community-page-pass46 .community-detail-head-v2 h3 {
  font-size: clamp(30px, 3vw, 50px);
  line-height: .95;
  letter-spacing: -.052em;
}
.community-page.community-page-pass46 .community-body-card {
  min-height: 72px;
  padding: 12px 14px;
}
.community-page.community-page-pass46 .community-comments-v2 {
  min-height: 92px;
}
.community-page.community-page-pass46 .community-comment-v2 {
  min-height: 72px;
  padding: 11px 12px;
}
.community-page.community-page-pass46 .community-reply-box-v2:not(.is-locked) {
  padding: 10px;
  bottom: 10px;
  box-shadow: 4px 4px 0 var(--shadow), 0 -8px 22px color-mix(in srgb, var(--bg) 42%, transparent);
}
.community-page.community-page-pass46 .community-reply-box-v2 textarea,
.community-page.community-page-pass46 .community-inline-reply-v2 textarea,
.community-page.community-page-pass46 textarea[data-community-comment-body] {
  min-height: 62px;
}
.community-page.community-page-pass46 .community-info-pane {
  padding: 12px;
  gap: 10px;
  overflow: auto;
  scrollbar-gutter: stable;
}
.community-page.community-page-pass46 .community-guide-card {
  min-height: 0;
  padding: 12px;
  gap: 7px;
  box-shadow: 2px 2px 0 var(--shadow);
}
.community-page.community-page-pass46 .community-guide-card b {
  font-size: 14px;
}
.community-page.community-page-pass46 .community-guide-card p,
.community-page.community-page-pass46 .community-guide-card li {
  font-size: 13px;
  line-height: 1.36;
}
.community-page.community-page-pass46 .community-empty-detail-v3 {
  min-height: min(390px, 52vh);
}
@media (min-width: 1520px) {
  .community-page.community-page-pass46 .community-layout-v5 {
    grid-template-columns: minmax(330px, 410px) minmax(0, 1fr) minmax(260px, 330px);
  }
}
@media (max-width: 1280px) {
  .community-page.community-page-pass46 .community-hero-v5 {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .community-page.community-page-pass46 .community-hero-stats {
    grid-column: 1 / -1;
    max-width: 520px;
  }
  .community-page.community-page-pass46 .community-layout-v5 {
    grid-template-columns: minmax(306px, 380px) minmax(0, 1fr);
  }
}
@media (max-width: 1080px) {
  .community-page.community-page-pass46 .community-toolbar-v5 {
    grid-template-columns: minmax(0, 1fr) minmax(150px, 200px) auto;
  }
  .community-page.community-page-pass46 .community-toolbar-v5 label:nth-of-type(3) {
    grid-column: 1 / 3;
  }
  .community-page.community-page-pass46 .community-category-rail-v5 {
    height: auto;
    min-height: 43px;
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    overflow: visible;
  }
}
@media (max-width: 860px) {
  html.r3-community-page-mode,
  html.r3-community-page-mode body,
  body.r3-community-page-mode {
    overflow: auto !important;
    height: auto;
  }
  .community-page.community-page-pass46 {
    height: auto;
    min-height: 100dvh;
    padding: 6px;
    overflow: visible;
  }
  .community-page.community-page-pass46 .community-shell-page {
    height: auto;
    min-height: calc(100dvh - 12px);
    max-height: none;
    overflow: visible;
  }
  .community-page.community-page-pass46 .community-hero-v5,
  .community-page.community-page-pass46 .community-toolbar-v5,
  .community-page.community-page-pass46 .community-layout-v5 {
    grid-template-columns: 1fr;
  }
  .community-page.community-page-pass46 .community-hero-v5 {
    min-height: 0;
    padding: 12px;
  }
  .community-page.community-page-pass46 .community-hero-copy h2 {
    font-size: clamp(32px, 12vw, 44px);
  }
  .community-page.community-page-pass46 .community-list-pane-v5,
  .community-page.community-page-pass46 .community-detail-pane-v5,
  .community-page.community-page-pass46 .community-info-pane {
    height: auto !important;
    max-height: none !important;
    overflow: visible;
  }
}
@media (max-width: 620px) {
  .community-page.community-page-pass46 .community-hero-actions,
  .community-page.community-page-pass46 .community-hero-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .community-page.community-page-pass46 .community-hero-actions .ui-btn {
    padding-inline: 6px;
  }
  .community-page.community-page-pass46 .community-toolbar-v5 label:nth-of-type(3) {
    grid-column: auto;
  }
}
@media (max-width: 460px) {
  .community-page.community-page-pass46 .community-hero-actions,
  .community-page.community-page-pass46 .community-hero-stats {
    grid-template-columns: 1fr;
  }
}
.community-page.community-page-pass46 .community-list-pane-v5 {
  grid-template-rows: auto auto minmax(0, 1fr);
}
.community-page.community-page-pass46 .community-list-head-v4 { grid-row: 1; }
.community-page.community-page-pass46 .community-composer-panel { grid-row: 2; }
.community-page.community-page-pass46 .community-post-list { grid-row: 3; }

/* Pass 47: compact AI node summaries without hiding tool-call cards */
.ai-node-card {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.ai-node-primary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.ai-node-kicker {
  color: var(--accent);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ai-node-primary strong {
  min-width: 0;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.15;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ai-node-detail,
.ai-node-last {
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ai-node-detail {
  color: var(--ink);
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  border-left: 3px solid var(--soft-line);
  padding: 5px 7px;
}
.ai-node-last b { color: var(--accent); }
.ai-node-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
}
.ai-node-meta span {
  max-width: 100%;
  padding: 2px 5px;
  border: 1px solid color-mix(in srgb, var(--soft-line) 78%, transparent);
  background: color-mix(in srgb, var(--panel) 76%, var(--bg));
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ai-node-router .ai-node-detail { border-left-color: var(--accent); }
.ai-router-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  padding: 2px 6px;
  border: 1px solid var(--soft-line);
  background: color-mix(in srgb, var(--bg) 62%, transparent);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.ai-router-value.is-true {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 68%, var(--soft-line));
}
.ai-router-value.is-false {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 68%, var(--soft-line));
}
.ai-router-value.is-unknown {
  color: var(--muted);
}
.r3-node[data-type="Agent"] .node-body,
.r3-node[data-type="Verifier"] .node-body,
.r3-node[data-type="Image"] .node-body,
.r3-node[data-type="Video"] .node-body {
  max-height: 126px;
}


/* R3D3 pass: True/False diamond label overlap fix — 2026-07-06
   Keep branch titles readable without colliding with the diamond body/ports. */
.r3-node.is-truefalse-diamond .node-head {
  inset: 24px 20px 52px !important;
}
.r3-node.is-truefalse-diamond .node-title-wrap .node-title {
  position: absolute !important;
  top: -24px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 8 !important;
  max-width: 116px !important;
  min-height: 14px !important;
  padding: 2px 6px !important;
  border: 1px solid color-mix(in srgb, var(--gate) 42%, transparent) !important;
  background: color-mix(in srgb, var(--bg) 78%, transparent) !important;
  box-shadow: 3px 3px 0 color-mix(in srgb, var(--shadow) 80%, transparent) !important;
  color: color-mix(in srgb, var(--ink) 88%, #fff) !important;
  font-size: 8.5px !important;
  line-height: 1 !important;
  letter-spacing: .09em !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  display: block !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: initial !important;
  pointer-events: none !important;
}
.r3-node.is-truefalse-diamond .node-route-choice {
  margin-top: 4px !important;
}
.r3-node.is-truefalse-diamond .node-body {
  bottom: 30px !important;
}
.r3-node.is-truefalse-diamond .node-status {
  bottom: 15px !important;
}
.r3-playback-node.is-truefalse-diamond .r3-playback-node-head {
  inset: 24px 20px 52px !important;
}
.r3-playback-node.is-truefalse-diamond .r3-playback-node-head b {
  position: absolute !important;
  top: -24px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 8 !important;
  max-width: 116px !important;
  min-height: 14px !important;
  padding: 2px 6px !important;
  border: 1px solid color-mix(in srgb, var(--gate) 42%, transparent) !important;
  background: color-mix(in srgb, var(--bg) 78%, transparent) !important;
  box-shadow: 3px 3px 0 color-mix(in srgb, var(--shadow) 80%, transparent) !important;
  font-size: 8.5px !important;
  line-height: 1 !important;
  letter-spacing: .09em !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  display: block !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: initial !important;
  pointer-events: none !important;
}
.r3-playback-node.is-truefalse-diamond .r3-playback-title-wrap i {
  margin-top: 4px !important;
}
.r3-playback-node.is-truefalse-diamond .r3-playback-node-body {
  bottom: 30px !important;
}

/* Pass 57: router Agent two-tool viewport — compact true-hex with corrected ports */
.r3-node.is-router-agent {
  width: 270px !important;
  min-height: 132px !important;
  max-height: 246px !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  clip-path: none !important;
}
.r3-node.is-router-agent::before,
.r3-node.is-router-agent::after {
  content: "" !important;
  position: absolute !important;
  pointer-events: none !important;
  clip-path: polygon(10% 0, 90% 0, 100% 50%, 90% 100%, 10% 100%, 0 50%) !important;
  z-index: 0 !important;
}
.r3-node.is-router-agent::before {
  inset: 0 !important;
  background: color-mix(in srgb, var(--accent) 62%, var(--line)) !important;
  box-shadow: 7px 7px 0 color-mix(in srgb, var(--shadow) 64%, transparent) !important;
}
.r3-node.is-router-agent::after {
  inset: 2px !important;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--agent) 74%, #2a1b14 26%) 0,
      color-mix(in srgb, var(--agent) 52%, #19120e 48%) 50px,
      color-mix(in srgb, var(--panel) 96%, #050403 4%) 51px,
      color-mix(in srgb, var(--panel) 96%, #050403 4%) 100%) !important;
}
.r3-node.is-router-agent > *:not(.node-port) {
  position: relative !important;
  z-index: 1 !important;
}
.r3-node.is-router-agent .node-head,
.r3-node.is-router-agent .node-status,
.r3-node.is-router-agent .node-body,
.r3-node.is-router-agent .node-tools {
  width: auto !important;
  min-width: 0 !important;
  clip-path: none !important;
  box-shadow: none !important;
}
.r3-node.is-router-agent .node-head {
  flex: 0 0 auto !important;
  height: 42px !important;
  min-height: 42px !important;
  margin: 2px 27px 0 !important;
  padding: 5px 6px !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 46%, var(--line)) !important;
}
.r3-node.is-router-agent .node-title {
  max-width: 112px !important;
}
.r3-node.is-router-agent .node-timer,
.r3-node.is-router-agent .node-cost {
  min-width: 60px !important;
  font-size: 9px !important;
}
.r3-node.is-router-agent .node-head-tools {
  gap: 2px !important;
}
.r3-node.is-router-agent .node-head-btn {
  width: 19px !important;
  height: 19px !important;
}
.r3-node.is-router-agent .node-status {
  flex: 0 0 auto !important;
  height: 8px !important;
  min-height: 8px !important;
  margin: 0 27px !important;
  background: color-mix(in srgb, var(--bg) 42%, transparent) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 20%, transparent) !important;
}
.r3-node.is-router-agent .node-body {
  flex: 0 0 auto !important;
  max-height: 78px !important;
  margin: 0 20px !important;
  padding: 6px 7px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-gutter: stable !important;
  background: color-mix(in srgb, var(--bg) 56%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent) !important;
  border-top: 0 !important;
}
.r3-node.is-router-agent .node-body-label {
  font-size: 9px !important;
  margin-bottom: 3px !important;
  line-height: 1.1 !important;
  color: color-mix(in srgb, var(--accent) 82%, var(--ink)) !important;
}
.r3-node.is-router-agent .node-body-content {
  min-height: 0 !important;
}
.r3-node.is-router-agent .node-tools {
  flex: 0 1 auto !important;
  min-height: 0 !important;
  max-height: 86px !important;
  margin: 6px 20px 10px !important;
  padding: 0 4px 5px 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-gutter: stable !important;
  background: transparent !important;
  border: 0 !important;
}
.r3-node.is-router-agent .node-tools::after { content: none !important; }
.r3-node.is-router-agent .tool-bubble {
  margin-inline: 0 !important;
  min-height: 38px !important;
}
.r3-node.is-router-agent .node-port {
  position: absolute !important;
  top: 50% !important;
  z-index: 50 !important;
  border-color: color-mix(in srgb, var(--accent) 82%, var(--soft-line)) !important;
  background: color-mix(in srgb, var(--bg) 88%, transparent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bg) 86%, transparent) !important;
}
.r3-node.is-router-agent .node-port-in {
  left: 0 !important;
  right: auto !important;
  transform: translate(-50%, -50%) !important;
}
.r3-node.is-router-agent .node-port-out {
  right: 0 !important;
  left: auto !important;
  transform: translate(50%, -50%) !important;
}
.r3-node.is-router-agent .ai-node-router-compact {
  display: grid !important;
  gap: 4px !important;
}
.r3-node.is-router-agent .ai-node-primary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
}
.r3-node.is-router-agent .ai-node-kicker {
  font-size: 9px !important;
}
.r3-node.is-router-agent .ai-node-detail.ai-router-reason,
.r3-node.is-router-agent .ai-node-detail {
  max-height: 30px !important;
  overflow: hidden !important;
  background: transparent !important;
  border-left-color: color-mix(in srgb, var(--accent) 78%, transparent) !important;
  padding: 2px 0 2px 7px !important;
  line-height: 1.25 !important;
}
.r3-node.is-router-agent .ai-node-last {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: 10px !important;
}
.r3-node.is-router-agent .ai-node-meta {
  gap: 3px !important;
  max-height: 18px !important;
  overflow: hidden !important;
}
.r3-node.is-router-agent .ai-router-value {
  min-width: 52px !important;
  max-width: 76px !important;
  padding: 2px 5px !important;
  font-size: 10px !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
html.r3-mobile-device .r3-node.is-router-agent {
  width: 292px !important;
  max-height: 270px !important;
}
html.r3-mobile-device .r3-node.is-router-agent .node-head,
html.r3-mobile-device .r3-node.is-router-agent .node-status {
  margin-inline: 30px !important;
}
html.r3-mobile-device .r3-node.is-router-agent .node-body,
html.r3-mobile-device .r3-node.is-router-agent .node-tools {
  margin-inline: 23px !important;
}
html.r3-mobile-device .r3-node.is-router-agent .node-body {
  max-height: 84px !important;
}
html.r3-mobile-device .r3-node.is-router-agent .node-tools {
  max-height: 94px !important;
}
html.r3-mobile-device .r3-node.is-router-agent .node-port-in {
  left: 0 !important;
  transform: translate(-50%, -50%) !important;
}
html.r3-mobile-device .r3-node.is-router-agent .node-port-out {
  right: 0 !important;
  transform: translate(50%, -50%) !important;
}

/* R3D3 BUILD: pass48 router visual mode + clipped overlay cleanup — 2026-07-06 */
.r3-node.is-router-agent {
  width: 258px !important;
  min-height: 128px !important;
  max-height: 222px !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  clip-path: none !important;
}
.r3-node.is-router-agent.selected,
.r3-node.is-router-agent.running,
.r3-node.is-router-agent:hover {
  outline: 0 !important;
  box-shadow: none !important;
}
.r3-node.is-router-agent::before,
.r3-node.is-router-agent::after {
  content: "" !important;
  position: absolute !important;
  pointer-events: none !important;
  clip-path: polygon(11% 0, 89% 0, 100% 50%, 89% 100%, 11% 100%, 0 50%) !important;
  z-index: 0 !important;
}
.r3-node.is-router-agent::before {
  inset: 0 !important;
  border: 0 !important;
  background: color-mix(in srgb, var(--accent) 68%, var(--line)) !important;
  box-shadow: 6px 6px 0 color-mix(in srgb, var(--shadow) 70%, transparent) !important;
  animation: none !important;
}
.r3-node.is-router-agent::after {
  inset: 3px !important;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--agent) 70%, #2a1b14 30%) 0,
      color-mix(in srgb, var(--agent) 58%, #19120e 42%) 38px,
      color-mix(in srgb, var(--panel) 96%, #050403 4%) 39px,
      color-mix(in srgb, var(--panel) 96%, #050403 4%) 100%) !important;
  box-shadow: none !important;
  animation: none !important;
}
.r3-node.is-router-agent.selected::before,
.r3-node.is-router-agent.running::before {
  background: color-mix(in srgb, var(--accent) 84%, var(--line)) !important;
  box-shadow:
    6px 6px 0 color-mix(in srgb, var(--shadow) 70%, transparent),
    0 0 0 2px color-mix(in srgb, var(--accent) 42%, transparent),
    0 0 22px color-mix(in srgb, var(--accent) 32%, transparent) !important;
}
.r3-node.is-router-agent > *:not(.node-port) {
  position: relative !important;
  z-index: 2 !important;
  min-width: 0 !important;
}
.r3-node.is-router-agent .node-head,
.r3-node.is-router-agent .node-body,
.r3-node.is-router-agent .node-tools {
  width: auto !important;
  min-width: 0 !important;
  clip-path: none !important;
  box-shadow: none !important;
}
.r3-node.is-router-agent .node-head {
  flex: 0 0 35px !important;
  height: 35px !important;
  min-height: 35px !important;
  margin: 3px 28px 0 !important;
  padding: 3px 4px !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  gap: 4px !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 44%, var(--line)) !important;
}
.r3-node.is-router-agent .node-title-wrap {
  min-width: 0 !important;
}
.r3-node.is-router-agent .node-title {
  max-width: 92px !important;
  font-size: 11px !important;
  line-height: 1.05 !important;
}
.r3-node.is-router-agent .node-runtime-role {
  display: none !important;
}
.r3-node.is-router-agent .node-timer,
.r3-node.is-router-agent .node-cost {
  min-width: 54px !important;
  max-width: 64px !important;
  height: 17px !important;
  padding-inline: 3px !important;
  font-size: 8px !important;
}
.r3-node.is-router-agent .node-head-tools {
  gap: 2px !important;
}
.r3-node.is-router-agent .node-head-btn {
  width: 18px !important;
  height: 18px !important;
  font-size: 10px !important;
}
.r3-node.is-router-agent .node-kind {
  min-width: 24px !important;
  font-size: 8px !important;
}
.r3-node.is-router-agent .node-status,
.r3-node.is-router-agent.running .node-status {
  display: none !important;
}
.r3-node.is-router-agent .node-body {
  flex: 0 0 auto !important;
  max-height: 62px !important;
  min-height: 48px !important;
  margin: 0 22px !important;
  padding: 5px 6px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scrollbar-gutter: stable !important;
  background: color-mix(in srgb, var(--bg) 58%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent) !important;
  border-top: 0 !important;
}
.r3-node.is-router-agent .node-body-label {
  margin-bottom: 3px !important;
  color: color-mix(in srgb, var(--accent) 84%, var(--ink)) !important;
  font-size: 8.5px !important;
  line-height: 1.05 !important;
}
.r3-node.is-router-agent .node-body-content,
.r3-node.is-router-agent .ai-node-router-compact {
  min-height: 0 !important;
}
.r3-node.is-router-agent .node-tools {
  flex: 0 1 auto !important;
  min-height: 0 !important;
  max-height: 74px !important;
  margin: 5px 22px 10px !important;
  padding: 0 4px 3px 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scrollbar-gutter: stable !important;
  background: transparent !important;
  border: 0 !important;
}
.r3-node.is-router-agent .node-tools::after,
.r3-node.is-router-agent .tool-tip {
  display: none !important;
}
.r3-node.is-router-agent .tool-bubble {
  min-height: 34px !important;
  padding: 4px 6px !important;
  grid-template-columns: 20px minmax(0, 1fr) !important;
  gap: 6px !important;
}
.r3-node.is-router-agent .bubble-icon {
  width: 20px !important;
  height: 20px !important;
  font-size: 11px !important;
}
.r3-node.is-router-agent .bubble-copy b {
  font-size: 9px !important;
}
.r3-node.is-router-agent .bubble-copy em {
  font-size: 10px !important;
}
.r3-node.is-router-agent .node-port {
  position: absolute !important;
  top: 50% !important;
  z-index: 60 !important;
  border-color: color-mix(in srgb, var(--accent) 82%, var(--soft-line)) !important;
  background: color-mix(in srgb, var(--bg) 88%, transparent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bg) 86%, transparent), 2px 2px 0 var(--shadow) !important;
}
.r3-node.is-router-agent .node-port-in {
  left: 0 !important;
  right: auto !important;
  transform: translate(-50%, -50%) !important;
}
.r3-node.is-router-agent .node-port-out {
  right: 0 !important;
  left: auto !important;
  transform: translate(50%, -50%) !important;
}
.r3-node.is-router-agent .ai-node-router-compact {
  display: grid !important;
  gap: 3px !important;
}
.r3-node.is-router-agent .ai-node-primary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 5px !important;
}
.r3-node.is-router-agent .ai-node-kicker {
  font-size: 8.5px !important;
}
.r3-node.is-router-agent .ai-node-detail.ai-router-reason,
.r3-node.is-router-agent .ai-node-detail {
  max-height: 24px !important;
  overflow: hidden !important;
  background: transparent !important;
  border-left-color: color-mix(in srgb, var(--accent) 76%, transparent) !important;
  padding: 1px 0 1px 6px !important;
  line-height: 1.2 !important;
}
.r3-node.is-router-agent .ai-node-last,
.r3-node.is-router-agent .ai-node-meta {
  display: none !important;
}
.r3-node.is-router-agent .ai-router-value {
  min-width: 48px !important;
  max-width: 66px !important;
  padding: 2px 4px !important;
  font-size: 9px !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
html.r3-mobile-device .r3-node.is-router-agent {
  width: 280px !important;
  max-height: 242px !important;
}
html.r3-mobile-device .r3-node.is-router-agent .node-head {
  margin-inline: 31px !important;
}
html.r3-mobile-device .r3-node.is-router-agent .node-body,
html.r3-mobile-device .r3-node.is-router-agent .node-tools {
  margin-inline: 25px !important;
}
html.r3-mobile-device .r3-node.is-router-agent .node-body {
  max-height: 68px !important;
}
html.r3-mobile-device .r3-node.is-router-agent .node-tools {
  max-height: 78px !important;
}


/* R3D3 BUILD: pass49 node copy dedupe — 2026-07-06
   One clear node summary: AI/router body copy no longer repeats state labels already shown by the header/card. */
.r3-node[data-type="Agent"] .node-body.node-body-no-label,
.r3-node[data-type="Verifier"] .node-body.node-body-no-label,
.r3-node[data-type="Image"] .node-body.node-body-no-label,
.r3-node[data-type="Video"] .node-body.node-body-no-label {
  padding-top: 7px;
}
.ai-node-primary {
  justify-content: flex-start;
}
.ai-node-primary strong {
  text-align: left;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.ai-router-decision {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  min-width: 0;
}
.ai-router-decision span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.r3-node.is-router-agent .node-body.node-body-no-label {
  padding-top: 5px !important;
}
.r3-node.is-router-agent .ai-router-decision {
  gap: 5px !important;
}
.r3-node.is-router-agent .ai-router-decision span {
  font-size: 8.5px !important;
}
.r3-node.is-router-agent .ai-node-meta {
  display: none !important;
}


/* R3D3 BUILD: pass50 router layout cleanup — 2026-07-06
   Router nodes use an isolated single-row header and non-scrolling summary body so timer/cost/status text cannot spill over the decision card. */
.r3-node.is-router-agent {
  width: 264px !important;
  min-height: 132px !important;
  max-height: 230px !important;
}
.r3-node.is-router-agent::after {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--agent) 72%, #2a1b14 28%) 0,
      color-mix(in srgb, var(--agent) 58%, #19120e 42%) 38px,
      color-mix(in srgb, var(--panel) 96%, #050403 4%) 39px,
      color-mix(in srgb, var(--panel) 96%, #050403 4%) 100%) !important;
}
.r3-node.is-router-agent .node-head,
.r3-node.is-router-agent .node-head:not(:has(.node-cost:not([hidden]))),
.r3-node.is-router-agent .node-head:not(:has(.node-runtime-role)),
.r3-node.is-router-agent .node-head:not(:has(.node-runtime-role)):not(:has(.node-cost:not([hidden]))) {
  flex: 0 0 35px !important;
  height: 35px !important;
  min-height: 35px !important;
  max-height: 35px !important;
  margin: 3px 29px 0 !important;
  padding: 3px 4px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  grid-template-rows: 28px !important;
  grid-template-areas: "title timer tools" !important;
  align-items: center !important;
  gap: 4px !important;
  overflow: hidden !important;
}
.r3-node.is-router-agent .node-title-wrap {
  grid-area: title !important;
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
}
.r3-node.is-router-agent .node-title-wrap .node-title,
.r3-node.is-router-agent .node-title {
  max-width: 100% !important;
  font-size: 11px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.r3-node.is-router-agent .node-runtime-role,
.r3-node.is-router-agent .node-cost {
  display: none !important;
}
.r3-node.is-router-agent .node-timer:not(.node-cost) {
  grid-area: timer !important;
  justify-self: end !important;
  align-self: center !important;
  min-width: 58px !important;
  max-width: 66px !important;
  height: 17px !important;
  line-height: 16px !important;
  margin: 0 !important;
  padding: 0 3px !important;
  font-size: 8px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.r3-node.is-router-agent .node-head-tools {
  grid-area: tools !important;
  align-self: center !important;
  justify-self: end !important;
  max-width: 78px !important;
  gap: 2px !important;
  padding: 0 !important;
  overflow: hidden !important;
}
.r3-node.is-router-agent .node-body {
  flex: 0 0 auto !important;
  min-height: 58px !important;
  max-height: 66px !important;
  margin: 0 23px !important;
  padding: 6px 7px !important;
  overflow: hidden !important;
  scrollbar-gutter: auto !important;
}
.r3-node.is-router-agent .node-body-content,
.r3-node.is-router-agent .ai-node-router,
.r3-node.is-router-agent .ai-node-router-compact {
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
}
.r3-node.is-router-agent .ai-node-router-compact {
  gap: 4px !important;
}
.r3-node.is-router-agent .ai-router-decision {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 19px !important;
}
.r3-node.is-router-agent .ai-router-decision span {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 9px !important;
}
.r3-node.is-router-agent .ai-router-value {
  justify-self: end !important;
  min-width: 50px !important;
  max-width: 62px !important;
  height: 19px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 5px !important;
  font-size: 9px !important;
  line-height: 1 !important;
}
.r3-node.is-router-agent .ai-node-detail.ai-router-reason,
.r3-node.is-router-agent .ai-node-detail {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  max-height: 32px !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 0 0 0 7px !important;
  line-height: 1.22 !important;
  font-size: 10.5px !important;
}
.r3-node.is-router-agent .node-tools {
  max-height: 78px !important;
  margin: 6px 23px 11px !important;
  padding: 0 4px 3px 0 !important;
}
.r3-node.is-router-agent .node-tools .tool-bubble,
.r3-node.is-router-agent .tool-bubble {
  min-height: 34px !important;
  max-height: 34px !important;
  padding: 4px 6px !important;
  grid-template-columns: 20px minmax(0, 1fr) !important;
  gap: 6px !important;
  overflow: hidden !important;
}
.r3-node.is-router-agent .node-tools .bubble-icon,
.r3-node.is-router-agent .bubble-icon {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  font-size: 11px !important;
}
.r3-node.is-router-agent .node-tools .bubble-copy b,
.r3-node.is-router-agent .bubble-copy b {
  font-size: 9px !important;
  line-height: 1.05 !important;
}
.r3-node.is-router-agent .node-tools .bubble-copy em,
.r3-node.is-router-agent .bubble-copy em {
  font-size: 10px !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
}
.r3-node.is-router-agent:hover .tool-bubble,
.r3-node.is-router-agent .tool-bubble:hover,
.r3-node.is-router-agent .tool-bubble:focus-visible {
  overflow: hidden !important;
}
html.r3-mobile-device .r3-node.is-router-agent {
  width: 280px !important;
  max-height: 248px !important;
}
html.r3-mobile-device .r3-node.is-router-agent .node-head,
html.r3-mobile-device .r3-node.is-router-agent .node-head:not(:has(.node-cost:not([hidden]))),
html.r3-mobile-device .r3-node.is-router-agent .node-head:not(:has(.node-runtime-role)),
html.r3-mobile-device .r3-node.is-router-agent .node-head:not(:has(.node-runtime-role)):not(:has(.node-cost:not([hidden]))) {
  margin-inline: 31px !important;
  grid-template-areas: "title timer tools" !important;
  grid-template-rows: 28px !important;
}
html.r3-mobile-device .r3-node.is-router-agent .node-body,
html.r3-mobile-device .r3-node.is-router-agent .node-tools {
  margin-inline: 25px !important;
}
html.r3-mobile-device .r3-node.is-router-agent .node-body {
  max-height: 72px !important;
}


/* R3D3 BUILD: pass51 true/false diamond cleanup — 2026-07-07
   True/False nodes show one branch title and one status chip; duplicate route pills/body text are hidden so the diamond cannot overlap itself. */
.r3-node.is-truefalse-diamond {
  width: 136px !important;
  min-height: 136px !important;
}
.r3-node.is-truefalse-diamond::before {
  inset: 12px !important;
}
.r3-node.is-truefalse-diamond .node-head {
  inset: 28px 25px auto !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 1fr !important;
  grid-template-areas: "title" !important;
  align-items: center !important;
  justify-items: center !important;
  overflow: hidden !important;
}
.r3-node.is-truefalse-diamond .node-title-wrap {
  width: 100% !important;
  max-width: 72px !important;
  min-width: 0 !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
}
.r3-node.is-truefalse-diamond .node-title-wrap .node-title {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  width: 100% !important;
  max-width: 72px !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--ink) !important;
  font-size: 10px !important;
  font-weight: 950 !important;
  letter-spacing: .1em !important;
  line-height: 1.12 !important;
  text-align: center !important;
  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}
.r3-node.is-truefalse-diamond .node-route-choice {
  display: none !important;
}
.r3-node.is-truefalse-diamond .node-body {
  left: 33px !important;
  right: 33px !important;
  bottom: 35px !important;
  height: 22px !important;
  min-height: 22px !important;
  max-height: 22px !important;
  padding: 0 !important;
  overflow: hidden !important;
}
.r3-node.is-truefalse-diamond .node-body-label {
  max-width: 70px !important;
  height: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 5px !important;
  border: 1px solid color-mix(in srgb, var(--gate) 50%, var(--soft-line)) !important;
  background: color-mix(in srgb, var(--panel) 78%, transparent) !important;
  color: color-mix(in srgb, var(--ink) 88%, var(--muted)) !important;
  font-size: 7.5px !important;
  font-weight: 900 !important;
  letter-spacing: .09em !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-transform: uppercase !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.r3-node.is-truefalse-diamond[data-route-active="true"] .node-body-label,
.r3-node.is-truefalse-diamond.state-done .node-body-label {
  border-color: color-mix(in srgb, var(--output) 64%, var(--soft-line)) !important;
  color: color-mix(in srgb, var(--ok) 74%, var(--ink)) !important;
}
.r3-node.is-truefalse-diamond[data-route-active="false"] .node-body-label,
.r3-node.is-truefalse-diamond.state-skipped .node-body-label {
  border-color: color-mix(in srgb, var(--danger) 54%, var(--soft-line)) !important;
  color: color-mix(in srgb, var(--danger) 72%, var(--ink)) !important;
}
.r3-node.is-truefalse-diamond .node-port-in,
.r3-node.is-truefalse-diamond .node-port-out {
  top: 58px !important;
}
.r3-node.is-truefalse-diamond .node-port-in { left: 2px !important; }
.r3-node.is-truefalse-diamond .node-port-out { right: 2px !important; }

.r3-playback-node.is-truefalse-diamond .r3-playback-node-head {
  inset: 28px 25px auto !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
}
.r3-playback-node.is-truefalse-diamond .r3-playback-node-head b {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  max-width: 72px !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 10px !important;
  line-height: 1.12 !important;
  white-space: normal !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}
.r3-playback-node.is-truefalse-diamond .r3-playback-title-wrap i {
  display: none !important;
}
.r3-playback-node.is-truefalse-diamond .r3-playback-node-body {
  left: 33px !important;
  right: 33px !important;
  bottom: 35px !important;
  height: 22px !important;
  min-height: 22px !important;
  max-height: 22px !important;
  overflow: hidden !important;
}
.r3-playback-node.is-truefalse-diamond .r3-playback-node-body strong {
  max-width: 70px !important;
  height: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 5px !important;
  border: 1px solid color-mix(in srgb, var(--gate) 50%, var(--soft-line)) !important;
  background: color-mix(in srgb, var(--panel) 78%, transparent) !important;
  font-size: 7.5px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* R3D3 BUILD: pass56 chat summary show-more — 2026-07-07
   Chat run summaries stop after the terminal/warning strip, then reveal details on demand. */
.run-summary-card.run-summary-chat {
  gap: 9px !important;
  padding-bottom: 13px !important;
}

.run-summary-chat .run-summary-terminal {
  margin: 0 !important;
}

.run-summary-chat .run-summary-more {
  border: 0 !important;
  background: transparent !important;
  margin: 1px 0 0 !important;
  padding: 0 !important;
  display: block !important;
}

.run-summary-chat .run-summary-more > summary {
  width: max-content !important;
  max-width: 100% !important;
  min-height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  margin: 1px 0 0 !important;
  padding: 8px 12px !important;
  border: 1px solid color-mix(in srgb, var(--accent) 62%, var(--soft-line)) !important;
  background: color-mix(in srgb, var(--accent) 12%, var(--panel)) !important;
  color: var(--ink) !important;
  box-shadow: 2px 2px 0 var(--shadow) !important;
  cursor: pointer !important;
  user-select: none !important;
}

.run-summary-chat .run-summary-more > summary::-webkit-details-marker {
  display: none !important;
}

.run-summary-chat .run-summary-more > summary::marker {
  content: '' !important;
}

.run-summary-chat .run-summary-more > summary:hover,
.run-summary-chat .run-summary-more > summary:focus-visible {
  background: color-mix(in srgb, var(--accent) 18%, var(--panel)) !important;
  outline: none !important;
}

.run-summary-chat .run-summary-more .show-less-copy {
  display: none !important;
}

.run-summary-chat .run-summary-more[open] .show-more-copy {
  display: none !important;
}

.run-summary-chat .run-summary-more[open] .show-less-copy {
  display: inline !important;
}

.run-summary-chat .run-summary-more-body {
  display: grid !important;
  gap: 8px !important;
  padding-top: 10px !important;
}

.run-summary-chat .run-summary-more-body > details {
  margin-top: 0 !important;
}

@media (max-width: 720px) {
  .run-summary-chat .run-summary-more > summary {
    width: 100% !important;
  }
}

/* Readable output popout — pass57 */
.r3-node .node-head-tools {
  max-width: 132px !important;
  overflow: visible !important;
}
.r3-node .node-output-popout-btn {
  position: relative;
  border-color: color-mix(in srgb, var(--check-gold) 52%, rgba(255,255,255,.45)) !important;
}
.r3-node .node-output-popout-btn.is-enabled {
  background: color-mix(in srgb, var(--check-gold) 28%, rgba(255,255,255,.08)) !important;
  color: var(--check-gold-ink) !important;
  animation: outputPopoutPulse 1.35s ease-in-out infinite;
}
.r3-node .node-output-popout-btn.is-enabled::after {
  content: '';
  position: absolute;
  inset: -4px;
  border: 1px solid color-mix(in srgb, var(--check-gold) 70%, transparent);
  opacity: .68;
  animation: outputPopoutRing 1.35s ease-in-out infinite;
  pointer-events: none;
}

@keyframes outputPopoutPulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--check-gold) 26%, transparent); }
  50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--check-gold) 0%, transparent); }
}
@keyframes outputPopoutRing {
  0%, 100% { transform: scale(.92); opacity: .36; }
  50% { transform: scale(1.12); opacity: .9; }
}
.r3-node.is-router-agent .node-head-tools {
  max-width: 106px !important;
  overflow: visible !important;
}
.r3-node.is-router-agent .node-head-btn {
  width: 18px !important;
  height: 18px !important;
  font-size: 9px !important;
}
.r3-node.is-router-agent .node-kind {
  min-width: 20px !important;
}

.r3-output-popout-modal,
.r3-output-detail-modal {
  padding: 0;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  box-shadow: none;
  overflow: visible;
}
.r3-output-popout-modal {
  width: min(960px, calc(100vw - 24px));
  max-height: min(90vh, 900px);
  z-index: 2147483646;
}
.r3-output-detail-modal {
  width: min(760px, calc(100vw - 32px));
  max-height: min(78vh, 760px);
  z-index: 2147483647;
}
.r3-output-popout-modal::backdrop,
.r3-output-detail-modal::backdrop {
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(3px);
}
.output-popout-card,
.output-detail-card {
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--check-gold) 13%, transparent), transparent 280px),
    var(--panel);
  box-shadow: 12px 12px 0 var(--shadow), 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent) inset;
  max-height: inherit;
  display: grid;
  min-width: 0;
}
.output-popout-card {
  grid-template-rows: auto auto minmax(180px, 1fr) auto;
}
.output-detail-card {
  grid-template-rows: auto minmax(0, 1fr);
}
.output-popout-head,
.output-detail-head,
.output-popout-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 15px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel-2) 88%, var(--check-gold) 12%);
}
.output-detail-head {
  cursor: grab;
  user-select: none;
}
.output-detail-head:active { cursor: grabbing; }
.output-popout-foot {
  border-top: 1px solid var(--line);
  border-bottom: 0;
  justify-content: flex-end;
}
.output-popout-head strong,
.output-detail-head strong {
  display: block;
  font-size: 18px;
  line-height: 1.15;
}
.output-popout-head span,
.output-detail-head span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .14em;
}
.output-popout-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 12px 15px;
  border-bottom: 1px solid var(--soft-line);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
}
.output-popout-meta > div {
  border: 1px solid var(--soft-line);
  background: color-mix(in srgb, var(--panel) 82%, transparent);
  padding: 10px;
  display: grid;
  gap: 3px;
  box-shadow: 3px 3px 0 var(--shadow);
}
.output-popout-meta b {
  color: var(--accent);
  font-size: 16px;
  line-height: 1.1;
}
.output-popout-meta span {
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.output-popout-text {
  margin: 0;
  padding: 20px;
  min-height: 180px;
  max-height: min(58vh, 620px);
  overflow: auto;
  overflow-wrap: anywhere;
  color: var(--ink);
  background: color-mix(in srgb, var(--bg) 86%, var(--panel) 14%);
  font: 15px/1.65 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.output-popout-text.r3-output-rich-text {
  display: block;
}
.output-popout-text.r3-output-rich-text p { margin: 0 0 12px; }
.output-popout-text.r3-output-rich-text p:last-child { margin-bottom: 0; }
.output-popout-text.r3-output-rich-text h3,
.output-popout-text.r3-output-rich-text h4,
.output-popout-text.r3-output-rich-text h5 {
  margin: 15px 0 8px;
  color: var(--ink);
  line-height: 1.22;
}
.output-popout-text.r3-output-rich-text h3:first-child,
.output-popout-text.r3-output-rich-text h4:first-child,
.output-popout-text.r3-output-rich-text h5:first-child { margin-top: 0; }
.output-popout-text.r3-output-rich-text ul,
.output-popout-text.r3-output-rich-text ol {
  margin: 7px 0 13px 23px;
  padding: 0;
}
.output-popout-text.r3-output-rich-text li {
  margin: 5px 0;
  padding-left: 2px;
}
.output-popout-text.r3-output-rich-text pre {
  overflow: auto;
  margin: 10px 0 14px;
  padding: 12px;
  border: 1px solid var(--soft-line);
  background: var(--bg);
  white-space: pre-wrap;
  box-shadow: 3px 3px 0 var(--shadow);
  font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.output-popout-text.r3-output-rich-text code {
  border: 1px solid color-mix(in srgb, var(--soft-line) 70%, transparent);
  background: var(--bg);
  padding: 1px 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .92em;
}
.output-popout-text.r3-output-rich-text pre code {
  display: block;
  border: 0;
  background: transparent;
  padding: 0;
  font-size: 1em;
}
.output-popout-text.r3-output-rich-text a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.output-popout-text.r3-output-rich-text .r3-chat-card-mention {
  display: inline-block;
  border: 1px solid color-mix(in srgb, var(--accent) 46%, var(--soft-line));
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
  padding: 0 4px;
  font-size: .92em;
  font-weight: 850;
}

.output-detail-body {
  overflow: auto;
  padding: 13px;
  display: grid;
  gap: 13px;
  max-height: calc(min(78vh, 760px) - 58px);
}
.output-detail-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.output-detail-models > div {
  padding: 10px;
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
}
.output-detail-path {
  margin: 0;
  padding: 10px 10px 10px 30px;
  display: grid;
  gap: 7px;
}
.output-detail-path b {
  color: var(--ink);
}
.output-detail-path small {
  display: block;
  color: var(--muted);
  line-height: 1.35;
}
@media (max-width: 760px) {
  .r3-node .node-head-tools {
    max-width: 124px !important;
  }
  .r3-output-popout-modal,
  .r3-output-detail-modal {
    width: calc(100vw - 16px);
  }
  .output-popout-meta,
  .output-detail-grid {
    grid-template-columns: 1fr;
  }
  .output-popout-text {
    padding: 15px;
    font-size: 14px;
  }
  .output-popout-head,
  .output-detail-head,
  .output-popout-foot {
    align-items: flex-start;
    flex-wrap: wrap;
  }
}


/* Node interaction hover tooltip — pass58 */
.r3-node .node-hover-tip {
  position: absolute;
  left: 12px;
  top: calc(100% + 10px);
  width: min(320px, 72vw);
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
  padding: 10px 11px;
  border: 1px solid color-mix(in srgb, var(--line) 86%, var(--accent));
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--panel) 94%, var(--accent) 6%),
      color-mix(in srgb, var(--panel-2) 82%, var(--panel) 18%));
  color: var(--ink);
  box-shadow: 5px 5px 0 var(--shadow);
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity .14s ease, transform .14s ease;
  transition-delay: .18s;
  z-index: 2147483000;
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: normal;
  text-transform: none;
  text-align: left;
}
.r3-node .node-hover-tip::before {
  content: '';
  position: absolute;
  left: 18px;
  top: -6px;
  width: 10px;
  height: 10px;
  border-left: 1px solid color-mix(in srgb, var(--line) 86%, var(--accent));
  border-top: 1px solid color-mix(in srgb, var(--line) 86%, var(--accent));
  background: color-mix(in srgb, var(--panel) 94%, var(--accent) 6%);
  transform: rotate(45deg);
}
.r3-node .node-hover-tip b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--accent);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.r3-node .node-hover-tip em {
  display: block;
  margin-top: -3px;
  color: var(--muted);
  font-style: normal;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.r3-node .node-hover-tip span {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
  min-width: 0;
  white-space: normal;
}
.r3-node .node-hover-tip strong {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
}
@media (hover: hover) and (pointer: fine) {
  .r3-node:hover .node-hover-tip,
  .r3-node:focus-within .node-hover-tip {
    opacity: 1;
    transform: translateY(0);
  }
  .r3-node:has(.node-head-tools:hover) .node-hover-tip,
  .r3-node:has(.node-head-tools:focus-within) .node-hover-tip,
  .r3-node:has(.node-port:hover) .node-hover-tip,
  .r3-node:has(.tool-bubble:hover) .node-hover-tip,
  .r3-node:has(.tool-bubble:focus-visible) .node-hover-tip {
    opacity: 0;
    transform: translateY(4px);
    transition-delay: 0s;
  }
}
.r3-node.is-router-agent .node-hover-tip {
  left: 18px;
  top: calc(100% + 12px);
}
@media (max-width: 720px) {
  .r3-node .node-hover-tip {
    display: none;
  }
}
.r3-node.is-router-agent > .node-hover-tip {
  position: absolute !important;
  z-index: 2147483000 !important;
}

/* All-node hover description tooltip — pass60 */
.r3-node .node-hover-tip {
  width: min(350px, 74vw);
  gap: 6px;
}
.r3-node .node-hover-tip .node-hover-tip-row {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  min-width: 0;
  white-space: normal;
}
.r3-node .node-hover-tip .node-hover-tip-row small {
  display: block;
  min-width: 0;
  color: var(--ink);
  font-size: 11px;
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: anywhere;
}
.r3-node .node-hover-tip .node-hover-tip-description {
  grid-template-columns: 1fr;
  gap: 3px;
  padding: 7px 8px;
  border: 1px solid color-mix(in srgb, var(--soft-line) 72%, transparent);
  background: color-mix(in srgb, var(--bg) 72%, transparent);
}
.r3-node .node-hover-tip .node-hover-tip-description small {
  color: var(--ink);
  white-space: pre-line;
}
.node-description-field {
  min-height: 74px;
  resize: vertical;
}
@media (hover: hover) and (pointer: fine) {
  .r3-node:hover > .node-hover-tip,
  .r3-node:focus-within > .node-hover-tip {
    opacity: 1;
    transform: translateY(0);
  }
}


/* R3D3 pass61: allow all canvas nodes to display the shared hover card.
   Earlier scroll polish clipped regular Agent/User Yes-No/etc nodes with overflow:hidden,
   while True/False and Router nodes had their own overflow-visible overrides. */
.r3-node {
  overflow: visible !important;
}
.r3-node:hover,
.r3-node:focus-within {
  z-index: 90 !important;
}
.r3-node > .node-hover-tip {
  display: grid;
  top: calc(100% + 10px);
  left: 12px;
  visibility: hidden;
}
@media (hover: hover) and (pointer: fine) {
  .r3-node:hover > .node-hover-tip,
  .r3-node:focus-within > .node-hover-tip {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
  }
  .r3-node:has(.node-head-tools:hover) > .node-hover-tip,
  .r3-node:has(.node-head-tools:focus-within) > .node-hover-tip,
  .r3-node:has(.node-port:hover) > .node-hover-tip,
  .r3-node:has(.tool-bubble:hover) > .node-hover-tip,
  .r3-node:has(.tool-bubble:focus-visible) > .node-hover-tip {
    visibility: hidden;
    opacity: 0;
    transform: translateY(4px);
  }
}
.r3-node .node-body,
.r3-node .node-tools {
  overflow: auto;
}
.r3-node.is-truefalse-diamond > .node-hover-tip,
.r3-node.is-router-agent > .node-hover-tip {
  overflow: visible;
}

/* True/False title-only route pulse — pass63
   Keep diamonds visually clean: only the branch title is shown on the node.
   The pass-through state is communicated by a subtle pulsing diamond glow. */
.r3-node.is-truefalse-diamond .node-body,
.r3-node.is-truefalse-diamond .node-body-label,
.r3-node.is-truefalse-diamond .node-body-content,
.r3-node.is-truefalse-diamond .node-reason-chip,
.r3-node.is-truefalse-diamond .node-tools {
  display: none !important;
}

.r3-node.is-truefalse-diamond[data-route-active="true"]::before {
  animation: trueFalseRoutePassedPulse 1.15s ease-in-out infinite !important;
  border-color: color-mix(in srgb, var(--output) 64%, var(--line)) !important;
}

.r3-node.is-truefalse-diamond[data-route-active="true"]:hover::before {
  animation: trueFalseRoutePassedPulse 1.15s ease-in-out infinite !important;
}

@keyframes trueFalseRoutePassedPulse {
  0%, 100% {
    box-shadow:
      6px 6px 0 var(--shadow),
      0 0 0 2px color-mix(in srgb, var(--output) 16%, transparent),
      0 0 14px color-mix(in srgb, var(--output) 24%, transparent),
      inset 0 0 0 1px color-mix(in srgb, var(--output) 26%, transparent);
    filter: brightness(1);
  }
  50% {
    box-shadow:
      6px 6px 0 var(--shadow),
      0 0 0 4px color-mix(in srgb, var(--output) 24%, transparent),
      0 0 26px color-mix(in srgb, var(--output) 42%, transparent),
      inset 0 0 0 1px color-mix(in srgb, var(--output) 42%, transparent);
    filter: brightness(1.08);
  }
}


/* R3D3 BUILD: pass64 true/false title-only hard cleanup + cache bust support — 2026-07-08
   Final override: branch diamonds render as title-only route markers. */
.r3-node.is-truefalse-diamond .node-body,
.r3-node.is-truefalse-diamond .node-body-label,
.r3-node.is-truefalse-diamond .node-body-content,
.r3-node.is-truefalse-diamond .node-body-text,
.r3-node.is-truefalse-diamond .node-reason-chip,
.r3-node.is-truefalse-diamond .node-tools,
.r3-node.is-truefalse-diamond .node-route-choice,
.r3-node.is-truefalse-diamond .node-head-badge.node-route-choice {
  display: none !important;
  visibility: hidden !important;
}
.r3-node.is-truefalse-diamond[data-route-active="true"]::before {
  animation: trueFalseRoutePassedPulse 1.05s ease-in-out infinite !important;
  border-color: color-mix(in srgb, var(--output) 68%, var(--line)) !important;
}

/* R3D3 BUILD: pass65 true/false branch colors + obvious pass-through pulse — 2026-07-08
   True/False route diamonds are always color-coded by branch. The branch that
   actually passed on the current run gets an unmistakable animated halo. */
.r3-node.is-truefalse-diamond,
.r3-playback-node.is-truefalse-diamond {
  --tf-branch-color: var(--gate);
  --tf-branch-ink: var(--ink);
  --tf-branch-shadow: color-mix(in srgb, var(--gate) 18%, transparent);
}
.r3-node.is-truefalse-diamond[data-route-choice="true"],
.r3-playback-node.is-truefalse-diamond[data-route-choice="true"] {
  --tf-branch-color: var(--ok);
  --tf-branch-ink: color-mix(in srgb, var(--ok) 42%, var(--ink));
  --tf-branch-shadow: color-mix(in srgb, var(--ok) 34%, transparent);
}
.r3-node.is-truefalse-diamond[data-route-choice="false"],
.r3-playback-node.is-truefalse-diamond[data-route-choice="false"] {
  --tf-branch-color: var(--danger);
  --tf-branch-ink: color-mix(in srgb, var(--danger) 38%, var(--ink));
  --tf-branch-shadow: color-mix(in srgb, var(--danger) 34%, transparent);
}
.r3-node.is-truefalse-diamond::before {
  z-index: 1 !important;
  border-color: color-mix(in srgb, var(--tf-branch-color) 78%, var(--line)) !important;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--tf-branch-color) 18%, var(--panel)) 0%,
      color-mix(in srgb, var(--panel) 86%, #000 14%) 74%),
    var(--panel) !important;
  box-shadow:
    6px 6px 0 var(--shadow),
    0 0 0 2px color-mix(in srgb, var(--tf-branch-color) 13%, transparent),
    0 0 16px color-mix(in srgb, var(--tf-branch-color) 16%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--tf-branch-color) 22%, transparent) !important;
}
.r3-node.is-truefalse-diamond .node-title-wrap .node-title {
  color: var(--tf-branch-ink) !important;
  text-shadow: 0 0 10px color-mix(in srgb, var(--tf-branch-color) 24%, transparent) !important;
}
.r3-node.is-truefalse-diamond[data-route-active="true"]::before {
  animation: trueFalseBranchDiamondPulse .88s ease-in-out infinite !important;
  border-color: color-mix(in srgb, var(--tf-branch-color) 92%, #fff 8%) !important;
}
.r3-node.is-truefalse-diamond[data-route-active="true"]::after {
  content: '' !important;
  position: absolute !important;
  z-index: 0 !important;
  inset: 7px !important;
  border: 2px solid color-mix(in srgb, var(--tf-branch-color) 82%, transparent) !important;
  border-radius: 2px !important;
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--tf-branch-color) 16%, transparent),
    0 0 34px color-mix(in srgb, var(--tf-branch-color) 54%, transparent),
    0 0 62px color-mix(in srgb, var(--tf-branch-color) 26%, transparent) !important;
  opacity: .78 !important;
  pointer-events: none !important;
  transform: rotate(45deg) scale(.94) !important;
  animation: trueFalseBranchHaloPulse .88s ease-in-out infinite !important;
}
.r3-node.is-truefalse-diamond[data-route-active="false"]::before {
  filter: saturate(.9) brightness(.88) !important;
  box-shadow:
    6px 6px 0 var(--shadow),
    0 0 0 2px color-mix(in srgb, var(--tf-branch-color) 10%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--tf-branch-color) 16%, transparent) !important;
}
.r3-node.is-truefalse-diamond .node-body,
.r3-node.is-truefalse-diamond .node-body-label,
.r3-node.is-truefalse-diamond .node-body-content,
.r3-node.is-truefalse-diamond .node-body-text,
.r3-node.is-truefalse-diamond .node-reason-chip,
.r3-node.is-truefalse-diamond .node-tools,
.r3-node.is-truefalse-diamond .node-route-choice,
.r3-node.is-truefalse-diamond .node-head-badge.node-route-choice {
  display: none !important;
  visibility: hidden !important;
}
@keyframes trueFalseBranchDiamondPulse {
  0%, 100% {
    filter: brightness(1) saturate(1.05);
    transform: rotate(45deg) scale(1);
    box-shadow:
      6px 6px 0 var(--shadow),
      0 0 0 3px color-mix(in srgb, var(--tf-branch-color) 20%, transparent),
      0 0 20px color-mix(in srgb, var(--tf-branch-color) 36%, transparent),
      inset 0 0 0 1px color-mix(in srgb, var(--tf-branch-color) 36%, transparent);
  }
  50% {
    filter: brightness(1.2) saturate(1.3);
    transform: rotate(45deg) scale(1.055);
    box-shadow:
      6px 6px 0 var(--shadow),
      0 0 0 7px color-mix(in srgb, var(--tf-branch-color) 30%, transparent),
      0 0 38px color-mix(in srgb, var(--tf-branch-color) 68%, transparent),
      0 0 70px color-mix(in srgb, var(--tf-branch-color) 34%, transparent),
      inset 0 0 0 1px color-mix(in srgb, var(--tf-branch-color) 55%, transparent);
  }
}
@keyframes trueFalseBranchHaloPulse {
  0%, 100% { opacity: .48; transform: rotate(45deg) scale(.92); }
  50% { opacity: 1; transform: rotate(45deg) scale(1.08); }
}
.r3-playback-node.is-truefalse-diamond::before {
  border-color: color-mix(in srgb, var(--tf-branch-color) 78%, var(--line)) !important;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--tf-branch-color) 18%, var(--panel)) 0%,
      color-mix(in srgb, var(--panel) 86%, #000 14%) 74%),
    var(--panel) !important;
  box-shadow:
    6px 6px 0 var(--shadow),
    0 0 0 2px color-mix(in srgb, var(--tf-branch-color) 13%, transparent),
    0 0 16px color-mix(in srgb, var(--tf-branch-color) 16%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--tf-branch-color) 22%, transparent) !important;
}
.r3-playback-node.is-truefalse-diamond[data-route-active="true"]::before {
  animation: trueFalseBranchDiamondPulse .88s ease-in-out infinite !important;
  border-color: color-mix(in srgb, var(--tf-branch-color) 92%, #fff 8%) !important;
}
.r3-playback-node.is-truefalse-diamond[data-route-active="true"]::after {
  content: '' !important;
  position: absolute !important;
  z-index: 0 !important;
  inset: 7px !important;
  border: 2px solid color-mix(in srgb, var(--tf-branch-color) 82%, transparent) !important;
  border-radius: 2px !important;
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--tf-branch-color) 16%, transparent),
    0 0 34px color-mix(in srgb, var(--tf-branch-color) 54%, transparent),
    0 0 62px color-mix(in srgb, var(--tf-branch-color) 26%, transparent) !important;
  opacity: .78 !important;
  pointer-events: none !important;
  transform: rotate(45deg) scale(.94) !important;
  animation: trueFalseBranchHaloPulse .88s ease-in-out infinite !important;
}
.r3-playback-node.is-truefalse-diamond .r3-playback-node-head b {
  color: var(--tf-branch-ink) !important;
  text-shadow: 0 0 10px color-mix(in srgb, var(--tf-branch-color) 24%, transparent) !important;
}


/* ask_user tool dialog polish — pass66 */
.human-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.human-input-countdown {
  min-width: 42px;
  text-align: center;
  border: 1px solid color-mix(in srgb, var(--accent) 66%, var(--soft-line));
  background: color-mix(in srgb, var(--accent) 13%, var(--bg));
  color: var(--accent);
  padding: 4px 7px;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .08em;
  box-shadow: 2px 2px 0 var(--shadow);
}
.human-input-countdown.is-ending {
  border-color: color-mix(in srgb, var(--danger) 76%, var(--line));
  background: color-mix(in srgb, var(--danger) 16%, var(--bg));
  color: var(--danger);
  animation: askUserCountdownPulse .72s ease-in-out infinite alternate;
}
.human-input-card[data-human-mode="multi_choice"] .human-option-btn {
  grid-template-columns: 42px minmax(0, 1fr) 24px;
}
.human-input-card[data-human-mode="multi_choice"] .human-option-btn::after {
  content: '＋';
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 1px solid var(--soft-line);
  color: var(--muted);
  font-size: 12px;
}
.human-option-btn.is-selected {
  border-color: color-mix(in srgb, var(--ok) 72%, var(--line));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--ok) 20%, transparent), transparent 70%),
    var(--panel);
  box-shadow: 5px 5px 0 var(--shadow), 0 0 0 2px color-mix(in srgb, var(--ok) 18%, transparent) inset;
}
.human-input-card[data-human-mode="multi_choice"] .human-option-btn.is-selected::after {
  content: '✓';
  border-color: color-mix(in srgb, var(--ok) 74%, var(--line));
  color: var(--ok);
}
.tool-checks label.human-tool .prompt-action-icon,
.tool-checks label.human-tool b {
  color: var(--accent);
}
@keyframes askUserCountdownPulse {
  from { transform: translateY(0); opacity: .82; }
  to { transform: translateY(-1px); opacity: 1; }
}
@media (max-width: 760px) {
  .human-head-actions { width: 100%; justify-content: space-between; }
  .human-input-card[data-human-mode="multi_choice"] .human-option-btn { grid-template-columns: 36px minmax(0, 1fr) 24px; }
}

/* Flow node hotkeys + keyboard navigation — pass67 */
.node-flow-hotkey {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 16px;
  padding: 0 4px;
  border: 1px solid color-mix(in srgb, var(--check-gold) 78%, #fff 8%);
  background: color-mix(in srgb, var(--check-gold) 22%, rgba(0,0,0,.18));
  color: var(--check-gold-ink);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--check-gold) 18%, transparent), 0 0 10px color-mix(in srgb, var(--check-gold) 16%, transparent);
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .04em;
  line-height: 1;
  text-transform: uppercase;
}
.r3-node.selected .node-flow-hotkey {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--check-gold) 38%, transparent), 0 0 16px color-mix(in srgb, var(--check-gold) 28%, transparent);
}
.r3-context-menu .ctx-copy small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
}


/* R3D3 BUILD: pass71 mobile True/False diamond scale fix — 2026-07-08
   On phones the rotated diamond's visual diagonal was much larger than normal nodes.
   Keep desktop sizing, but compact mobile diamonds and their pulse halo so they scale with the flow canvas. */
html.r3-mobile-device .r3-node.is-truefalse-diamond {
  --tf-mobile-size: clamp(92px, 22vw, 106px);
  width: var(--tf-mobile-size) !important;
  min-width: var(--tf-mobile-size) !important;
  height: var(--tf-mobile-size) !important;
  min-height: var(--tf-mobile-size) !important;
  max-height: var(--tf-mobile-size) !important;
}
html.r3-mobile-device .r3-node.is-truefalse-diamond:hover {
  transform: translateY(-1px) !important;
}
html.r3-mobile-device .r3-node.is-truefalse-diamond::before {
  inset: 10px !important;
  border-width: 1.5px !important;
  box-shadow:
    4px 4px 0 var(--shadow),
    0 0 0 1px color-mix(in srgb, var(--tf-branch-color, var(--gate)) 12%, transparent),
    0 0 12px color-mix(in srgb, var(--tf-branch-color, var(--gate)) 14%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--tf-branch-color, var(--gate)) 18%, transparent) !important;
}
html.r3-mobile-device .r3-node.is-truefalse-diamond[data-route-active="true"]::before {
  animation: trueFalseBranchDiamondPulseMobile .88s ease-in-out infinite !important;
}
html.r3-mobile-device .r3-node.is-truefalse-diamond[data-route-active="true"]::after {
  inset: 6px !important;
  border-width: 1.5px !important;
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--tf-branch-color, var(--gate)) 15%, transparent),
    0 0 18px color-mix(in srgb, var(--tf-branch-color, var(--gate)) 46%, transparent),
    0 0 30px color-mix(in srgb, var(--tf-branch-color, var(--gate)) 24%, transparent) !important;
  animation: trueFalseBranchHaloPulseMobile .88s ease-in-out infinite !important;
}
html.r3-mobile-device .r3-node.is-truefalse-diamond .node-head,
html.r3-mobile-device .r3-node.is-truefalse-diamond .node-head:not(:has(.node-cost:not([hidden]))),
html.r3-mobile-device .r3-node.is-truefalse-diamond .node-head:not(:has(.node-runtime-role)),
html.r3-mobile-device .r3-node.is-truefalse-diamond .node-head:not(:has(.node-runtime-role)):not(:has(.node-cost:not([hidden]))) {
  inset: 28px 15px auto !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  margin: 0 !important;
  padding: 0 !important;
}
html.r3-mobile-device .r3-node.is-truefalse-diamond .node-title-wrap {
  max-width: 58px !important;
}
html.r3-mobile-device .r3-node.is-truefalse-diamond .node-title-wrap .node-title,
html.r3-mobile-device .r3-node.is-truefalse-diamond .node-title {
  max-width: 58px !important;
  font-size: 7.4px !important;
  letter-spacing: .075em !important;
  line-height: 1.06 !important;
  -webkit-line-clamp: 2 !important;
}
html.r3-mobile-device .r3-node.is-truefalse-diamond .node-port-in,
html.r3-mobile-device .r3-node.is-truefalse-diamond .node-port-out {
  top: 42px !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
}
html.r3-mobile-device .r3-node.is-truefalse-diamond .node-port-in { left: -1px !important; }
html.r3-mobile-device .r3-node.is-truefalse-diamond .node-port-out { right: -1px !important; }
html.r3-mobile-device .r3-node.is-truefalse-diamond .node-status,
html.r3-mobile-device .r3-node.is-truefalse-diamond .node-body,
html.r3-mobile-device .r3-node.is-truefalse-diamond .node-route-choice,
html.r3-mobile-device .r3-node.is-truefalse-diamond .node-head-tools {
  display: none !important;
}
@keyframes trueFalseBranchDiamondPulseMobile {
  0%, 100% {
    filter: brightness(1) saturate(1.05);
    transform: rotate(45deg) scale(1);
    box-shadow:
      4px 4px 0 var(--shadow),
      0 0 0 2px color-mix(in srgb, var(--tf-branch-color, var(--gate)) 18%, transparent),
      0 0 14px color-mix(in srgb, var(--tf-branch-color, var(--gate)) 32%, transparent),
      inset 0 0 0 1px color-mix(in srgb, var(--tf-branch-color, var(--gate)) 30%, transparent);
  }
  50% {
    filter: brightness(1.18) saturate(1.28);
    transform: rotate(45deg) scale(1.045);
    box-shadow:
      4px 4px 0 var(--shadow),
      0 0 0 4px color-mix(in srgb, var(--tf-branch-color, var(--gate)) 26%, transparent),
      0 0 24px color-mix(in srgb, var(--tf-branch-color, var(--gate)) 58%, transparent),
      0 0 38px color-mix(in srgb, var(--tf-branch-color, var(--gate)) 28%, transparent),
      inset 0 0 0 1px color-mix(in srgb, var(--tf-branch-color, var(--gate)) 44%, transparent);
  }
}
@keyframes trueFalseBranchHaloPulseMobile {
  0%, 100% { opacity: .42; transform: rotate(45deg) scale(.9); }
  50% { opacity: .95; transform: rotate(45deg) scale(1.02); }
}

html.r3-mobile-device .r3-playback-node.is-truefalse-diamond {
  --tf-mobile-size: clamp(92px, 22vw, 106px);
  width: var(--tf-mobile-size) !important;
  min-width: var(--tf-mobile-size) !important;
  min-height: var(--tf-mobile-size) !important;
  max-height: var(--tf-mobile-size) !important;
}
html.r3-mobile-device .r3-playback-node.is-truefalse-diamond::before {
  inset: 10px !important;
  border-width: 1.5px !important;
  box-shadow:
    4px 4px 0 var(--shadow),
    0 0 0 1px color-mix(in srgb, var(--tf-branch-color, var(--gate)) 12%, transparent),
    0 0 12px color-mix(in srgb, var(--tf-branch-color, var(--gate)) 14%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--tf-branch-color, var(--gate)) 18%, transparent) !important;
}
html.r3-mobile-device .r3-playback-node.is-truefalse-diamond[data-route-active="true"]::before {
  animation: trueFalseBranchDiamondPulseMobile .88s ease-in-out infinite !important;
}
html.r3-mobile-device .r3-playback-node.is-truefalse-diamond[data-route-active="true"]::after {
  inset: 6px !important;
  border-width: 1.5px !important;
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--tf-branch-color, var(--gate)) 15%, transparent),
    0 0 18px color-mix(in srgb, var(--tf-branch-color, var(--gate)) 46%, transparent),
    0 0 30px color-mix(in srgb, var(--tf-branch-color, var(--gate)) 24%, transparent) !important;
  animation: trueFalseBranchHaloPulseMobile .88s ease-in-out infinite !important;
}
html.r3-mobile-device .r3-playback-node.is-truefalse-diamond .r3-playback-node-head {
  inset: 28px 15px auto !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
}
html.r3-mobile-device .r3-playback-node.is-truefalse-diamond .r3-playback-node-head b {
  max-width: 58px !important;
  font-size: 7.4px !important;
  letter-spacing: .075em !important;
  line-height: 1.06 !important;
}
html.r3-mobile-device .r3-playback-node.is-truefalse-diamond .r3-playback-port-in,
html.r3-mobile-device .r3-playback-node.is-truefalse-diamond .r3-playback-port-out {
  top: 42px !important;
}

@media (max-width: 480px) {
  html.r3-mobile-device .r3-node.is-truefalse-diamond .node-port-in,
  html.r3-mobile-device .r3-node.is-truefalse-diamond .node-port-out,
  html.r3-mobile-device .r3-playback-node.is-truefalse-diamond .r3-playback-port-in,
  html.r3-mobile-device .r3-playback-node.is-truefalse-diamond .r3-playback-port-out {
    top: 37px !important;
  }
}


/* R3D3 BUILD: pass73 mobile True/False diamond polish — 2026-07-08
   In mobile flow view, keep True/False route nodes compact, square, and legible.
   Apply the override both for the explicit mobile-device class and as a small-screen fallback
   so the nodes still scale correctly if the mobile class is delayed or missing. */
@media (max-width: 760px) {
  .r3-node.is-truefalse-diamond,
  html.r3-mobile-device .r3-node.is-truefalse-diamond {
    --tf-mobile-size: clamp(78px, 19vw, 90px);
    width: var(--tf-mobile-size) !important;
    min-width: var(--tf-mobile-size) !important;
    max-width: var(--tf-mobile-size) !important;
    height: var(--tf-mobile-size) !important;
    min-height: var(--tf-mobile-size) !important;
    max-height: var(--tf-mobile-size) !important;
    aspect-ratio: 1 / 1 !important;
  }
  .r3-node.is-truefalse-diamond::before,
  html.r3-mobile-device .r3-node.is-truefalse-diamond::before {
    inset: 8px !important;
    border-width: 1.25px !important;
    box-shadow:
      3px 3px 0 var(--shadow),
      0 0 0 1px color-mix(in srgb, var(--tf-branch-color, var(--gate)) 12%, transparent),
      0 0 10px color-mix(in srgb, var(--tf-branch-color, var(--gate)) 18%, transparent),
      inset 0 0 0 1px color-mix(in srgb, var(--tf-branch-color, var(--gate)) 16%, transparent) !important;
  }
  .r3-node.is-truefalse-diamond[data-route-active="true"]::before,
  html.r3-mobile-device .r3-node.is-truefalse-diamond[data-route-active="true"]::before {
    animation: trueFalseBranchDiamondPulseMobileCompact .82s ease-in-out infinite !important;
  }
  .r3-node.is-truefalse-diamond[data-route-active="true"]::after,
  html.r3-mobile-device .r3-node.is-truefalse-diamond[data-route-active="true"]::after {
    inset: 5px !important;
    border-width: 1.25px !important;
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--tf-branch-color, var(--gate)) 18%, transparent),
      0 0 12px color-mix(in srgb, var(--tf-branch-color, var(--gate)) 34%, transparent),
      0 0 20px color-mix(in srgb, var(--tf-branch-color, var(--gate)) 22%, transparent) !important;
    animation: trueFalseBranchHaloPulseMobileCompact .82s ease-in-out infinite !important;
  }
  .r3-node.is-truefalse-diamond .node-head,
  .r3-node.is-truefalse-diamond .node-head:not(:has(.node-cost:not([hidden]))),
  .r3-node.is-truefalse-diamond .node-head:not(:has(.node-runtime-role)),
  .r3-node.is-truefalse-diamond .node-head:not(:has(.node-runtime-role)):not(:has(.node-cost:not([hidden]))),
  html.r3-mobile-device .r3-node.is-truefalse-diamond .node-head,
  html.r3-mobile-device .r3-node.is-truefalse-diamond .node-head:not(:has(.node-cost:not([hidden]))),
  html.r3-mobile-device .r3-node.is-truefalse-diamond .node-head:not(:has(.node-runtime-role)),
  html.r3-mobile-device .r3-node.is-truefalse-diamond .node-head:not(:has(.node-runtime-role)):not(:has(.node-cost:not([hidden]))) {
    inset: 22px 11px auto !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .r3-node.is-truefalse-diamond .node-title-wrap,
  html.r3-mobile-device .r3-node.is-truefalse-diamond .node-title-wrap {
    max-width: 54px !important;
  }
  .r3-node.is-truefalse-diamond .node-title-wrap .node-title,
  .r3-node.is-truefalse-diamond .node-title,
  html.r3-mobile-device .r3-node.is-truefalse-diamond .node-title-wrap .node-title,
  html.r3-mobile-device .r3-node.is-truefalse-diamond .node-title {
    max-width: 54px !important;
    font-size: 8.2px !important;
    letter-spacing: .06em !important;
    line-height: 1.08 !important;
    -webkit-line-clamp: 2 !important;
  }
  .r3-node.is-truefalse-diamond .node-port-in,
  .r3-node.is-truefalse-diamond .node-port-out,
  html.r3-mobile-device .r3-node.is-truefalse-diamond .node-port-in,
  html.r3-mobile-device .r3-node.is-truefalse-diamond .node-port-out {
    top: 37px !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
  }
  .r3-node.is-truefalse-diamond .node-port-in,
  html.r3-mobile-device .r3-node.is-truefalse-diamond .node-port-in { left: -2px !important; }
  .r3-node.is-truefalse-diamond .node-port-out,
  html.r3-mobile-device .r3-node.is-truefalse-diamond .node-port-out { right: -2px !important; }

  .r3-playback-node.is-truefalse-diamond,
  html.r3-mobile-device .r3-playback-node.is-truefalse-diamond {
    --tf-mobile-size: clamp(78px, 19vw, 90px);
    width: var(--tf-mobile-size) !important;
    min-width: var(--tf-mobile-size) !important;
    max-width: var(--tf-mobile-size) !important;
    height: var(--tf-mobile-size) !important;
    min-height: var(--tf-mobile-size) !important;
    max-height: var(--tf-mobile-size) !important;
    aspect-ratio: 1 / 1 !important;
  }
  .r3-playback-node.is-truefalse-diamond::before,
  html.r3-mobile-device .r3-playback-node.is-truefalse-diamond::before {
    inset: 8px !important;
    border-width: 1.25px !important;
  }
  .r3-playback-node.is-truefalse-diamond[data-route-active="true"]::before,
  html.r3-mobile-device .r3-playback-node.is-truefalse-diamond[data-route-active="true"]::before {
    animation: trueFalseBranchDiamondPulseMobileCompact .82s ease-in-out infinite !important;
  }
  .r3-playback-node.is-truefalse-diamond[data-route-active="true"]::after,
  html.r3-mobile-device .r3-playback-node.is-truefalse-diamond[data-route-active="true"]::after {
    inset: 5px !important;
    border-width: 1.25px !important;
    animation: trueFalseBranchHaloPulseMobileCompact .82s ease-in-out infinite !important;
  }
  .r3-playback-node.is-truefalse-diamond .r3-playback-node-head,
  html.r3-mobile-device .r3-playback-node.is-truefalse-diamond .r3-playback-node-head {
    inset: 22px 11px auto !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
  }
  .r3-playback-node.is-truefalse-diamond .r3-playback-node-head b,
  html.r3-mobile-device .r3-playback-node.is-truefalse-diamond .r3-playback-node-head b {
    max-width: 54px !important;
    font-size: 8.2px !important;
    letter-spacing: .06em !important;
    line-height: 1.08 !important;
  }
  .r3-playback-node.is-truefalse-diamond .r3-playback-port-in,
  .r3-playback-node.is-truefalse-diamond .r3-playback-port-out,
  html.r3-mobile-device .r3-playback-node.is-truefalse-diamond .r3-playback-port-in,
  html.r3-mobile-device .r3-playback-node.is-truefalse-diamond .r3-playback-port-out {
    top: 37px !important;
  }
}

@keyframes trueFalseBranchDiamondPulseMobileCompact {
  0%, 100% {
    filter: brightness(1) saturate(1.03);
    transform: rotate(45deg) scale(1);
    box-shadow:
      3px 3px 0 var(--shadow),
      0 0 0 1px color-mix(in srgb, var(--tf-branch-color, var(--gate)) 16%, transparent),
      0 0 10px color-mix(in srgb, var(--tf-branch-color, var(--gate)) 22%, transparent),
      inset 0 0 0 1px color-mix(in srgb, var(--tf-branch-color, var(--gate)) 22%, transparent);
  }
  50% {
    filter: brightness(1.14) saturate(1.16);
    transform: rotate(45deg) scale(1.03);
    box-shadow:
      3px 3px 0 var(--shadow),
      0 0 0 3px color-mix(in srgb, var(--tf-branch-color, var(--gate)) 20%, transparent),
      0 0 16px color-mix(in srgb, var(--tf-branch-color, var(--gate)) 42%, transparent),
      0 0 24px color-mix(in srgb, var(--tf-branch-color, var(--gate)) 24%, transparent),
      inset 0 0 0 1px color-mix(in srgb, var(--tf-branch-color, var(--gate)) 34%, transparent);
  }
}
@keyframes trueFalseBranchHaloPulseMobileCompact {
  0%, 100% { opacity: .34; transform: rotate(45deg) scale(.92); }
  50% { opacity: .82; transform: rotate(45deg) scale(1.01); }
}


/* R3D3 BUILD: pass75 dark theme elevation polish — 2026-07-08
   Dark mode was clean but visually flat because the offset shadows were nearly black on black.
   Keep the noir palette, but add warm paper-edge shadows and faint inset highlights to raised surfaces. */
html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .topbar,
html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .panel-section,
html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .r3-node,
html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .output-card,
html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .option-card,
html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .log-entry,
html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .role-ai-panel,
html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .role-picker-card,
html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .viewer-card,
html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .tool-card,
html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .setup-card-v2,
html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .flow-library-card,
html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .flow-library-card-v2,
html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .flow-library-cardlet,
html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .run-summary-card,
html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .r3-chat-bubble,
html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .r3-chat-avatar,
html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .r3-chat-panel,
html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .r3-chat-live-head,
html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .r3-chat-live-current,
html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .r3-chat-live-metrics > div,
html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .r3-chat-live-tool-row,
html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .r3-chat-attachment-chip,
html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .human-input-dialog,
html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .r3-action-card,
html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .board-editor-card,
html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .release-guide-body section {
  box-shadow:
    inset 0 1px 0 var(--surface-highlight),
    3px 3px 0 var(--shadow),
    0 10px 28px color-mix(in srgb, var(--shadow-ambient) 42%, transparent) !important;
}

html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .r3-node {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-raised) 86%, #fff 4%), var(--panel));
  border-color: color-mix(in srgb, var(--soft-line) 78%, var(--accent) 22%);
}
html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .r3-node:hover,
html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .r3-node.selected {
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface-highlight) 78%, #fff 4%),
    6px 6px 0 var(--shadow-strong),
    0 14px 34px color-mix(in srgb, var(--shadow-ambient) 52%, transparent),
    0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent) inset !important;
}
html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .r3-node.running {
  box-shadow:
    0 0 0 3px var(--panel-glow),
    inset 0 1px 0 color-mix(in srgb, var(--surface-highlight) 80%, #fff 6%),
    7px 7px 0 var(--shadow-strong),
    0 0 30px color-mix(in srgb, var(--accent) 30%, transparent) !important;
}

html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .panel-section,
html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .option-card,
html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .output-card,
html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .log-entry,
html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .role-ai-panel,
html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .role-picker-card,
html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .setup-card-v2,
html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .run-summary-card,
html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .r3-chat-bubble {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-raised) 80%, var(--panel) 20%), var(--panel));
  border-color: color-mix(in srgb, var(--soft-line) 82%, var(--accent) 18%);
}

html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .r3-chat-row.user .r3-chat-bubble {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, var(--surface-raised-2)), var(--panel));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface-highlight) 80%, var(--accent) 12%),
    4px 4px 0 var(--shadow-strong),
    0 12px 30px color-mix(in srgb, var(--shadow-ambient) 44%, transparent) !important;
}

html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .ui-btn,
html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .node-palette,
html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .toolbar-btn,
html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .r3-chat-send {
  box-shadow:
    inset 0 1px 0 var(--surface-highlight),
    2px 2px 0 var(--shadow) !important;
}
html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .ui-btn:hover,
html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .node-palette:hover,
html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .toolbar-btn:hover,
html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .r3-chat-send:hover {
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface-highlight) 82%, #fff 5%),
    3px 3px 0 var(--shadow-strong),
    0 8px 22px color-mix(in srgb, var(--shadow-ambient) 34%, transparent) !important;
}

html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .canvas-wrap {
  background:
    radial-gradient(circle at 25% 12%, color-mix(in srgb, var(--accent) 5%, transparent), transparent 34%),
    var(--canvas);
}
html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .r3-chat-main {
  background:
    radial-gradient(circle at 18% 16%, color-mix(in srgb, var(--accent) 5%, transparent), transparent 32%),
    linear-gradient(135deg, color-mix(in srgb, var(--canvas) 92%, #000 8%), var(--bg));
}


/* R3D3 BUILD: pass76 dark grid restore + diamond-only True/False nodes — 2026-07-08
   Pass75 added dark elevation but accidentally replaced the dark canvas grid background
   and let generic card shadows apply to True/False route containers. Restore the grid and
   keep route nodes visually diamond-only; all depth/glow belongs to the diamond pseudo-elements. */
html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .canvas-wrap {
  --dark-grid-line: color-mix(in srgb, var(--soft-line) 56%, transparent);
  background:
    linear-gradient(var(--dark-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--dark-grid-line) 1px, transparent 1px),
    radial-gradient(circle at 25% 12%, color-mix(in srgb, var(--accent) 5%, transparent), transparent 34%),
    var(--canvas) !important;
  background-size: 42px 42px, 42px 42px, auto, auto !important;
  background-position: 0 0, 0 0, center, center !important;
}

.r3-node.is-truefalse-diamond,
.r3-node.is-truefalse-diamond:hover,
.r3-node.is-truefalse-diamond.selected,
.r3-node.is-truefalse-diamond.running,
html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .r3-node.is-truefalse-diamond,
html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .r3-node.is-truefalse-diamond:hover,
html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .r3-node.is-truefalse-diamond.selected,
html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .r3-node.is-truefalse-diamond.running {
  background: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
}

.r3-node.is-truefalse-diamond::before,
html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .r3-node.is-truefalse-diamond::before {
  z-index: 0 !important;
}

.r3-node.is-truefalse-diamond::after,
html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .r3-node.is-truefalse-diamond::after {
  pointer-events: none !important;
}

.r3-node.is-truefalse-diamond.selected::before,
html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .r3-node.is-truefalse-diamond.selected::before {
  border-color: color-mix(in srgb, var(--tf-branch-color, var(--accent)) 82%, var(--accent)) !important;
}


/* R3D3 BUILD: pass77 router hex-only shadow + working pulse — 2026-07-08
   Dark elevation should not add a square card shadow behind Router hex nodes.
   Keep Router nodes hex-only and move all depth/working glow onto the clipped hex outline. */
.r3-node.is-router-agent,
.r3-node.is-router-agent:hover,
.r3-node.is-router-agent.selected,
.r3-node.is-router-agent.running,
html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .r3-node.is-router-agent,
html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .r3-node.is-router-agent:hover,
html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .r3-node.is-router-agent.selected,
html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .r3-node.is-router-agent.running {
  background: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
  animation: none !important;
}

.r3-node.is-router-agent::before,
html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .r3-node.is-router-agent::before {
  box-shadow: none !important;
  transform-origin: center !important;
  filter:
    drop-shadow(5px 5px 0 color-mix(in srgb, var(--shadow) 68%, transparent))
    drop-shadow(0 0 9px color-mix(in srgb, var(--accent) 14%, transparent)) !important;
}

.r3-node.is-router-agent:hover::before,
.r3-node.is-router-agent.selected::before,
html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .r3-node.is-router-agent:hover::before,
html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .r3-node.is-router-agent.selected::before {
  background: color-mix(in srgb, var(--accent) 84%, var(--line)) !important;
  box-shadow: none !important;
  filter:
    drop-shadow(5px 5px 0 color-mix(in srgb, var(--shadow-strong, var(--shadow)) 70%, transparent))
    drop-shadow(0 0 14px color-mix(in srgb, var(--accent) 34%, transparent))
    drop-shadow(0 0 24px color-mix(in srgb, var(--accent) 18%, transparent)) !important;
}

.r3-node.is-router-agent.running::before,
html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .r3-node.is-router-agent.running::before {
  background: color-mix(in srgb, var(--accent) 90%, var(--line)) !important;
  box-shadow: none !important;
  animation: routerHexWorkingPulse .92s ease-in-out infinite !important;
}

.r3-node.is-router-agent::after,
.r3-node.is-router-agent.running::after,
html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .r3-node.is-router-agent::after,
html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .r3-node.is-router-agent.running::after {
  content: "" !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

@keyframes routerHexWorkingPulse {
  0%, 100% {
    filter:
      drop-shadow(5px 5px 0 color-mix(in srgb, var(--shadow) 68%, transparent))
      drop-shadow(0 0 0 color-mix(in srgb, var(--accent) 0%, transparent))
      drop-shadow(0 0 12px color-mix(in srgb, var(--accent) 28%, transparent));
    transform: scale(1);
  }
  50% {
    filter:
      drop-shadow(5px 5px 0 color-mix(in srgb, var(--shadow-strong, var(--shadow)) 76%, transparent))
      drop-shadow(0 0 4px color-mix(in srgb, var(--accent) 36%, transparent))
      drop-shadow(0 0 22px color-mix(in srgb, var(--accent) 58%, transparent))
      drop-shadow(0 0 34px color-mix(in srgb, var(--accent) 28%, transparent));
    transform: scale(1.018);
  }
}


/* R3D3 BUILD: pass78 chat keyboard focus loop — 2026-07-08
   In Chat View, Tab intentionally toggles between the message box and Run From
   selector so users can switch flows without leaving the composer workflow. */
.r3-chat-shell .r3-chat-input:focus-visible,
.r3-chat-shell #chatStartSelect:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 72%, #fff 10%) !important;
  outline-offset: 2px;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 26%, transparent),
    0 0 18px color-mix(in srgb, var(--accent) 18%, transparent) !important;
}
.r3-chat-shell.chat-tab-run-target #chatStartSelect,
.r3-chat-shell.chat-tab-input-target .r3-chat-input {
  border-color: color-mix(in srgb, var(--accent) 82%, var(--line)) !important;
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent),
    0 0 18px color-mix(in srgb, var(--accent) 18%, transparent) !important;
}


/* R3D3 BUILD: pass79 rich readable output popup — 2026-07-08
   The auto-open output modal now renders final answers with the same lightweight
   markdown parser used by Chat View, so code blocks, lists, headings, inline code,
   links, bold, and italics preserve readable styling instead of displaying as raw text. */


/* R3D3 BUILD: pass80 chat live run cost/layout polish — 2026-07-08 */
.r3-chat-live-run::before {
  content: '';
  height: 3px;
  width: 100%;
  display: block;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 58%, transparent), transparent);
  opacity: .72;
  animation: r3ChatLiveSweep 1.25s ease-in-out infinite;
}
@keyframes r3ChatLiveSweep {
  0%, 100% { transform: translateX(-16%); opacity: .35; }
  50% { transform: translateX(16%); opacity: .86; }
}
html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .r3-chat-live-run {
  box-shadow:
    inset 0 1px 0 var(--surface-highlight),
    4px 4px 0 var(--shadow),
    0 14px 32px color-mix(in srgb, var(--shadow-ambient) 46%, transparent) !important;
}
html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .r3-chat-live-metrics b {
  text-shadow: 0 0 12px color-mix(in srgb, var(--accent) 24%, transparent);
}


/* R3D3 BUILD: pass81 chat final output visible run cost — 2026-07-08
   Keep final Chat View totals visible without expanding the Run Summary details. */
.run-summary-chat .run-summary-visible-metrics {
  display: grid !important;
  grid-template-columns: minmax(132px, 1.25fr) repeat(2, minmax(72px, .7fr));
  gap: 7px !important;
  margin: 0 !important;
}
.run-summary-chat .run-summary-visible-metrics > div {
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--soft-line)) !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 9%, transparent), transparent 62%),
    color-mix(in srgb, var(--panel) 86%, var(--bg)) !important;
  box-shadow: 2px 2px 0 var(--shadow) !important;
  padding: 8px 10px !important;
  display: grid !important;
  gap: 2px !important;
  min-width: 0 !important;
}
.run-summary-chat .run-summary-visible-metrics b {
  color: var(--ink) !important;
  font-size: 15px !important;
  line-height: 1.05 !important;
  font-weight: 950 !important;
  letter-spacing: .01em !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.run-summary-chat .run-summary-visible-metrics small {
  color: var(--muted) !important;
  font-size: 10px !important;
  font-weight: 850 !important;
  letter-spacing: .13em !important;
  line-height: 1.1 !important;
  text-transform: uppercase !important;
}
.run-summary-chat .run-summary-visible-cost {
  border-color: color-mix(in srgb, var(--accent) 64%, var(--soft-line)) !important;
}
.run-summary-chat .run-summary-visible-cost b {
  color: var(--accent) !important;
  font-size: 17px !important;
}
html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .run-summary-chat .run-summary-visible-metrics > div {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent 64%),
    var(--surface-raised, var(--panel)) !important;
  box-shadow:
    inset 0 1px 0 var(--surface-highlight, rgba(255,255,255,.06)),
    2px 2px 0 var(--shadow) !important;
}
@media (max-width: 720px) {
  .run-summary-chat .run-summary-visible-metrics {
    grid-template-columns: 1fr !important;
  }
}


/* R3D3 BUILD: pass82 mobile More menu + admin access — 2026-07-08
   Mobile should expose the More panel instead of the old Start/star guide button,
   and staff users should have Admin/Moderator access inside More on desktop and mobile. */
.topbar-more-admin-btn[hidden] {
  display: none !important;
}
.topbar-more-admin-btn span[aria-hidden="true"] {
  min-width: 28px;
  font-size: 8px;
  letter-spacing: .06em;
}
html.r3-mobile-device #releaseGuideBtn {
  display: none !important;
}
html.r3-mobile-device .toolbar-v2 {
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
}
html.r3-mobile-device .toolbar-v2 > .topbar-more-menu {
  display: inline-flex !important;
  visibility: visible !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: max-content !important;
  order: 40 !important;
  scroll-snap-align: start !important;
  z-index: 180 !important;
}
html.r3-mobile-device .topbar-more-btn {
  display: inline-flex !important;
  min-width: 64px !important;
  min-height: 38px !important;
  padding: 0 9px !important;
  gap: 5px !important;
  box-shadow: 2px 2px 0 var(--shadow) !important;
}
html.r3-mobile-device .topbar-more-btn b {
  display: inline !important;
  font-size: 10.5px !important;
}
html.r3-mobile-device .topbar-more-panel {
  position: fixed !important;
  top: max(76px, calc(env(safe-area-inset-top, 0px) + 66px)) !important;
  left: max(10px, env(safe-area-inset-left, 0px)) !important;
  right: max(10px, env(safe-area-inset-right, 0px)) !important;
  width: auto !important;
  max-height: min(72svh, 580px) !important;
  overflow: auto !important;
  z-index: 260 !important;
  -webkit-overflow-scrolling: touch !important;
}
html.r3-mobile-device .topbar-more-panel .top-action-group {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 7px !important;
}
html.r3-mobile-device .topbar-more-panel .toolbar-btn {
  width: 100% !important;
  min-width: 0 !important;
  justify-content: flex-start !important;
  padding-inline: 8px !important;
}
html.r3-mobile-device .topbar-more-panel .toolbar-btn b {
  display: inline !important;
}
html.r3-mobile-device .topbar-more-admin-btn {
  border-color: color-mix(in srgb, var(--accent) 76%, var(--line)) !important;
  background: color-mix(in srgb, var(--accent) 18%, var(--panel-2)) !important;
}

/* R3D3 BUILD: pass83 switch node — manual on/off flow gate */
.r3-node[data-type="Switch"] {
  width: 218px;
  min-height: 126px;
  background: color-mix(in srgb, var(--panel) 94%, var(--gate) 6%);
}
.r3-node[data-type="Switch"] .node-head {
  background: color-mix(in srgb, var(--gate) 78%, var(--accent) 22%);
}
.r3-node.is-switch-node[data-switch-pass="allowed"] {
  border-color: color-mix(in srgb, var(--ok) 72%, var(--line));
  box-shadow: 7px 7px 0 var(--shadow), inset 0 0 0 2px color-mix(in srgb, var(--ok) 22%, transparent);
}
.r3-node.is-switch-node[data-switch-pass="blocked"] {
  border-color: color-mix(in srgb, var(--danger) 72%, var(--line));
  box-shadow: 7px 7px 0 var(--shadow), inset 0 0 0 2px color-mix(in srgb, var(--danger) 20%, transparent);
}
.r3-node.is-switch-node.running .node-switch-track,
.r3-node.is-switch-node[data-route-active="true"] .node-switch-track {
  animation: switchTrackPulse 1.05s ease-in-out infinite alternate;
}
.node-switch-badge {
  width: auto;
  min-width: 30px;
  height: 17px;
  padding: 1px 5px;
  border-radius: 999px;
  font-size: 9px;
  line-height: 14px;
  color: #fff;
  text-align: center;
}
.node-switch-badge.node-switch-on { background: var(--danger); }
.node-switch-badge.node-switch-off { background: var(--ok); color: #10150f; }
.node-switch-toggle {
  width: 100%;
  min-height: 58px;
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 1px solid var(--soft-line);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  color: var(--ink);
  padding: 8px;
  text-align: left;
  box-shadow: 3px 3px 0 var(--shadow);
}
.node-switch-toggle:hover,
.node-switch-toggle:focus-visible {
  border-color: var(--accent);
  outline: none;
  transform: translate(-1px, -1px);
}
.node-switch-track,
.switch-editor-track {
  position: relative;
  display: block;
  width: 66px;
  height: 32px;
  border: 1px solid var(--line);
  background: var(--ok);
  box-shadow: inset 2px 2px 0 rgba(0,0,0,.22);
  transition: background .18s ease, box-shadow .18s ease;
}
.node-switch-knob,
.switch-editor-knob {
  position: absolute;
  left: 3px;
  top: 3px;
  width: 24px;
  height: 24px;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: 2px 2px 0 var(--shadow);
  transition: transform .2s cubic-bezier(.2,.8,.2,1), background .18s ease;
}
.r3-node.is-switch-node[data-switch-state="on"] .node-switch-track,
.switch-editor-preview[data-switch-state="on"] .switch-editor-track {
  background: var(--danger);
}
.r3-node.is-switch-node[data-switch-state="on"] .node-switch-knob,
.switch-editor-preview[data-switch-state="on"] .switch-editor-knob {
  transform: translateX(34px);
}
.node-switch-copy,
.switch-editor-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.node-switch-copy b,
.switch-editor-copy b {
  font-size: 16px;
  letter-spacing: .1em;
  color: var(--ink);
}
.node-switch-copy small,
.switch-editor-copy small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.25;
}
.switch-node-card .option-help b { color: var(--ink); }
.switch-editor-preview { margin: 8px 0 10px; }
.switch-editor-toggle {
  width: 100%;
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  padding: 10px;
  box-shadow: 3px 3px 0 var(--shadow);
  text-align: left;
}
.switch-editor-toggle:hover,
.switch-editor-toggle:focus-visible {
  border-color: var(--accent);
  outline: none;
  transform: translate(-1px, -1px);
}
.switch-editor-preview[data-switch-pass="allowed"] .switch-editor-toggle {
  border-color: color-mix(in srgb, var(--ok) 68%, var(--line));
}
.switch-editor-preview[data-switch-pass="blocked"] .switch-editor-toggle {
  border-color: color-mix(in srgb, var(--danger) 68%, var(--line));
}
@keyframes switchTrackPulse {
  from { filter: saturate(1); }
  to { filter: saturate(1.35) drop-shadow(0 0 9px color-mix(in srgb, var(--accent) 54%, transparent)); }
}
@media (max-width: 980px) {
  .r3-node[data-type="Switch"] { width: 218px; }
  .node-switch-toggle { min-height: 62px; }
}

/* R3D3 BUILD: pass84 switch visual correction — ON is green, OFF is red, and the canvas node reads like a hardware switch instead of a mini agent. */
.r3-node[data-type="Switch"] {
  width: 246px !important;
  min-height: 118px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.r3-node.is-switch-node::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--line);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--panel) 92%, transparent), color-mix(in srgb, var(--panel-2) 80%, transparent)),
    var(--panel);
  box-shadow: 7px 7px 0 var(--shadow);
  clip-path: polygon(12% 0, 88% 0, 100% 50%, 88% 100%, 12% 100%, 0 50%);
  pointer-events: none;
  z-index: 0;
}
.r3-node.is-switch-node > * {
  position: relative;
  z-index: 1;
}
.r3-node.is-switch-node .node-port {
  z-index: 4;
}
.r3-node.is-switch-node[data-switch-pass="allowed"],
.r3-node.is-switch-node[data-switch-pass="blocked"] {
  border-color: transparent !important;
  box-shadow: none !important;
}
.r3-node.is-switch-node[data-switch-state="on"]::before {
  border-color: color-mix(in srgb, var(--ok) 78%, var(--line));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--ok) 13%, var(--panel)), color-mix(in srgb, var(--panel-2) 86%, transparent)),
    var(--panel);
}
.r3-node.is-switch-node[data-switch-state="off"]::before {
  border-color: color-mix(in srgb, var(--danger) 76%, var(--line));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--danger) 12%, var(--panel)), color-mix(in srgb, var(--panel-2) 86%, transparent)),
    var(--panel);
}
.r3-node.is-switch-node:hover::before,
.r3-node.is-switch-node:focus-within::before {
  box-shadow: 9px 9px 0 var(--shadow);
}
.r3-node.is-switch-node.selected {
  outline: none !important;
}
.r3-node.is-switch-node.selected::before {
  border-color: var(--accent);
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent) 44%, transparent));
}
.r3-node[data-type="Switch"] .node-head {
  height: 25px !important;
  min-height: 25px !important;
  margin: 9px 34px 0 !important;
  padding: 0 10px !important;
  justify-content: center !important;
  border: 1px solid var(--line) !important;
  background: color-mix(in srgb, var(--panel-2) 86%, var(--accent) 14%) !important;
  color: var(--ink) !important;
  box-shadow: 2px 2px 0 var(--shadow) !important;
  clip-path: polygon(8% 0, 92% 0, 100% 50%, 92% 100%, 8% 100%, 0 50%);
}
.r3-node.is-switch-node .node-title-wrap {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
}
.r3-node.is-switch-node .node-title {
  max-width: 82px;
  font-size: 10px;
  letter-spacing: .14em;
  text-align: center;
}
.r3-node.is-switch-node .node-runtime-role,
.r3-node.is-switch-node .node-timer,
.r3-node.is-switch-node .node-cost,
.r3-node.is-switch-node .node-head-tools {
  display: none !important;
}
.r3-node.is-switch-node .node-body {
  padding: 10px 22px 15px !important;
  max-height: none !important;
  overflow: visible !important;
  color: var(--ink);
}
.r3-node.is-switch-node .node-body-content {
  overflow: visible !important;
}
.node-switch-badge.node-switch-on {
  background: var(--ok) !important;
  color: #10150f !important;
}
.node-switch-badge.node-switch-off {
  background: var(--danger) !important;
  color: #fff !important;
}
.node-switch-toggle {
  min-height: 58px !important;
  grid-template-columns: 82px minmax(0, 1fr) !important;
  gap: 11px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 5px 0 0 !important;
}
.node-switch-toggle:hover,
.node-switch-toggle:focus-visible {
  transform: none !important;
}
.node-switch-track,
.switch-editor-track {
  width: 72px !important;
  height: 34px !important;
  border-radius: 999px !important;
  background: var(--danger) !important;
  box-shadow: inset 2px 2px 0 rgba(0,0,0,.28), 0 0 0 1px color-mix(in srgb, var(--danger) 28%, transparent) !important;
}
.node-switch-knob,
.switch-editor-knob {
  width: 26px !important;
  height: 26px !important;
  border-radius: 999px !important;
}
.r3-node.is-switch-node[data-switch-state="on"] .node-switch-track,
.switch-editor-preview[data-switch-state="on"] .switch-editor-track {
  background: var(--ok) !important;
  box-shadow: inset 2px 2px 0 rgba(0,0,0,.22), 0 0 0 1px color-mix(in srgb, var(--ok) 28%, transparent) !important;
}
.r3-node.is-switch-node[data-switch-state="on"] .node-switch-knob,
.switch-editor-preview[data-switch-state="on"] .switch-editor-knob {
  transform: translateX(40px) !important;
}
.r3-node.is-switch-node[data-switch-state="on"] .node-switch-copy b,
.switch-editor-preview[data-switch-state="on"] .switch-editor-copy b {
  color: color-mix(in srgb, var(--ok) 82%, var(--ink));
}
.r3-node.is-switch-node[data-switch-state="off"] .node-switch-copy b,
.switch-editor-preview[data-switch-state="off"] .switch-editor-copy b {
  color: color-mix(in srgb, var(--danger) 82%, var(--ink));
}
.r3-node.is-switch-node .node-port-in,
.r3-node.is-switch-node .node-port-out {
  top: 50px !important;
}
.r3-node.is-switch-node .node-port-in { left: -5px !important; }
.r3-node.is-switch-node .node-port-out { right: -5px !important; }
.switch-editor-preview[data-switch-state="off"] .switch-editor-track {
  background: var(--danger) !important;
}
@media (max-width: 980px) {
  .r3-node[data-type="Switch"] { width: 246px !important; }
  .node-switch-toggle { min-height: 62px !important; }
}


/* R3D3 BUILD: pass85 switch visual cleanup — compact toggle chip, ON green / OFF red, no mini-agent silhouette. */
.r3-node.is-switch-node {
  width: 238px !important;
  height: 92px !important;
  min-height: 92px !important;
  max-height: 92px !important;
  display: block !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  filter: none !important;
  clip-path: none !important;
}
.r3-node.is-switch-node::before {
  content: none !important;
}
.r3-node.is-switch-node .node-head,
.r3-node.is-switch-node .node-status,
.r3-node.is-switch-node .node-body-label,
.r3-node.is-switch-node .node-reason-chip,
.r3-node.is-switch-node .node-tools {
  display: none !important;
}
.r3-node.is-switch-node .node-body {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  overflow: visible !important;
  scrollbar-gutter: auto !important;
}
.r3-node.is-switch-node .node-body-content {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
}
.r3-node.is-switch-node .node-switch-toggle {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 82px !important;
  grid-template-areas: "copy track" !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px 18px 14px 22px !important;
  border: 1px solid var(--line) !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--panel) 94%, transparent), color-mix(in srgb, var(--panel-2) 80%, transparent)),
    var(--panel) !important;
  color: var(--ink) !important;
  box-shadow: 6px 6px 0 var(--shadow) !important;
  text-align: left !important;
  overflow: hidden !important;
  clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%) !important;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease !important;
}
.r3-node.is-switch-node .node-switch-toggle::before {
  content: "SWITCH";
  position: absolute;
  left: 23px;
  top: 9px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .18em;
  pointer-events: none;
}
.r3-node.is-switch-node[data-switch-state="on"] .node-switch-toggle {
  border-color: color-mix(in srgb, var(--ok) 76%, var(--line)) !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--ok) 10%, var(--panel)), color-mix(in srgb, var(--panel-2) 84%, transparent)),
    var(--panel) !important;
}
.r3-node.is-switch-node[data-switch-state="off"] .node-switch-toggle {
  border-color: color-mix(in srgb, var(--danger) 78%, var(--line)) !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--danger) 10%, var(--panel)), color-mix(in srgb, var(--panel-2) 84%, transparent)),
    var(--panel) !important;
}
.r3-node.is-switch-node:hover .node-switch-toggle,
.r3-node.is-switch-node:focus-within .node-switch-toggle {
  transform: translate(-1px, -1px) !important;
  box-shadow: 8px 8px 0 var(--shadow) !important;
}
.r3-node.is-switch-node.selected .node-switch-toggle {
  outline: 3px solid var(--accent) !important;
  outline-offset: 3px !important;
}
.r3-node.is-switch-node .node-switch-track {
  grid-area: track !important;
  justify-self: end !important;
  width: 76px !important;
  height: 38px !important;
  border-radius: 999px !important;
  border: 1px solid var(--line) !important;
  background: var(--danger) !important;
  box-shadow: inset 2px 2px 0 rgba(0,0,0,.30), 0 0 0 2px color-mix(in srgb, var(--danger) 18%, transparent) !important;
}
.r3-node.is-switch-node .node-switch-knob {
  width: 30px !important;
  height: 30px !important;
  top: 3px !important;
  left: 3px !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--panel) 94%, #fff 6%) !important;
  box-shadow: 2px 2px 0 rgba(0,0,0,.32) !important;
}
.r3-node.is-switch-node[data-switch-state="on"] .node-switch-track {
  background: var(--ok) !important;
  box-shadow: inset 2px 2px 0 rgba(0,0,0,.24), 0 0 0 2px color-mix(in srgb, var(--ok) 18%, transparent) !important;
}
.r3-node.is-switch-node[data-switch-state="on"] .node-switch-knob {
  transform: translateX(38px) !important;
}
.r3-node.is-switch-node .node-switch-copy {
  grid-area: copy !important;
  display: grid !important;
  gap: 4px !important;
  min-width: 0 !important;
  padding-top: 14px !important;
}
.r3-node.is-switch-node .node-switch-copy b {
  font-size: 20px !important;
  line-height: 1 !important;
  letter-spacing: .08em !important;
  color: var(--ink) !important;
}
.r3-node.is-switch-node[data-switch-state="on"] .node-switch-copy b {
  color: color-mix(in srgb, var(--ok) 76%, var(--ink)) !important;
}
.r3-node.is-switch-node[data-switch-state="off"] .node-switch-copy b {
  color: color-mix(in srgb, var(--danger) 78%, var(--ink)) !important;
}
.r3-node.is-switch-node .node-switch-copy small {
  display: block !important;
  max-width: 100% !important;
  color: var(--muted) !important;
  font-size: 10px !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.r3-node.is-switch-node .node-port-in,
.r3-node.is-switch-node .node-port-out {
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 6 !important;
}
.r3-node.is-switch-node .node-port-in { left: -8px !important; }
.r3-node.is-switch-node .node-port-out { right: -8px !important; }
.r3-node.is-switch-node.state-done .node-switch-toggle::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  clip-path: inherit;
  pointer-events: none;
  opacity: .55;
}
.r3-node.is-switch-node.running .node-switch-toggle,
.r3-node.is-switch-node[data-route-active="true"] .node-switch-toggle {
  animation: switchChipPulse 1.05s ease-in-out infinite alternate !important;
}
@keyframes switchChipPulse {
  from { filter: saturate(1); }
  to { filter: saturate(1.25) drop-shadow(0 0 8px color-mix(in srgb, var(--accent) 38%, transparent)); }
}
@media (max-width: 980px) {
  .r3-node.is-switch-node {
    width: 226px !important;
    height: 88px !important;
    min-height: 88px !important;
    max-height: 88px !important;
  }
  .r3-node.is-switch-node .node-switch-toggle {
    grid-template-columns: minmax(0, 1fr) 76px !important;
    padding-inline: 18px 14px !important;
  }
  .r3-node.is-switch-node .node-switch-track {
    width: 70px !important;
    height: 36px !important;
  }
  .r3-node.is-switch-node .node-switch-knob {
    width: 28px !important;
    height: 28px !important;
  }
  .r3-node.is-switch-node[data-switch-state="on"] .node-switch-knob {
    transform: translateX(34px) !important;
  }
}


/* R3D3 BUILD: pass86 switch interaction/layout fix — only the slider toggles; node body drags; ports are pinned to left/right. */
.r3-node.is-switch-node {
  width: 260px !important;
  height: 86px !important;
  min-height: 86px !important;
  max-height: 86px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  clip-path: none !important;
}
.r3-node.is-switch-node .node-head,
.r3-node.is-switch-node .node-status,
.r3-node.is-switch-node .node-body-label,
.r3-node.is-switch-node .node-reason-chip,
.r3-node.is-switch-node .node-tools {
  display: none !important;
}
.r3-node.is-switch-node .node-body {
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}
.r3-node.is-switch-node .node-body-content {
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
}
.r3-node.is-switch-node .node-switch-toggle {
  display: none !important;
}
.r3-node.is-switch-node .node-switch-shell {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-rows: 18px minmax(0, 1fr) !important;
  grid-template-areas:
    "label control"
    "copy control" !important;
  align-items: center !important;
  gap: 2px 14px !important;
  padding: 12px 16px 12px 24px !important;
  border: 1px solid var(--line) !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--panel) 92%, transparent), color-mix(in srgb, var(--panel-2) 82%, transparent)),
    var(--panel) !important;
  color: var(--ink) !important;
  box-shadow: 6px 6px 0 var(--shadow) !important;
  clip-path: polygon(7% 0, 100% 0, 93% 100%, 0 100%) !important;
  cursor: grab !important;
  transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease, background .15s ease !important;
}
.r3-node.is-switch-node:active .node-switch-shell {
  cursor: grabbing !important;
}
.r3-node.is-switch-node:hover .node-switch-shell,
.r3-node.is-switch-node:focus-within .node-switch-shell {
  box-shadow: 8px 8px 0 var(--shadow) !important;
  transform: translate(-1px, -1px) !important;
}
.r3-node.is-switch-node.selected .node-switch-shell {
  outline: 3px solid var(--accent) !important;
  outline-offset: 3px !important;
}
.r3-node.is-switch-node[data-switch-state="on"] .node-switch-shell {
  border-color: color-mix(in srgb, var(--ok) 74%, var(--line)) !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--ok) 11%, var(--panel)), color-mix(in srgb, var(--panel-2) 86%, transparent)),
    var(--panel) !important;
}
.r3-node.is-switch-node[data-switch-state="off"] .node-switch-shell {
  border-color: color-mix(in srgb, var(--danger) 78%, var(--line)) !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--danger) 10%, var(--panel)), color-mix(in srgb, var(--panel-2) 86%, transparent)),
    var(--panel) !important;
}
.r3-node.is-switch-node .node-switch-label {
  grid-area: label !important;
  min-width: 0 !important;
  color: var(--muted) !important;
  font-size: 10px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  pointer-events: none !important;
}
.r3-node.is-switch-node .node-switch-copy {
  grid-area: copy !important;
  min-width: 0 !important;
  display: grid !important;
  gap: 4px !important;
  padding: 0 !important;
  pointer-events: none !important;
}
.r3-node.is-switch-node .node-switch-copy b {
  color: var(--ink) !important;
  font-size: 22px !important;
  line-height: .95 !important;
  letter-spacing: .05em !important;
}
.r3-node.is-switch-node[data-switch-state="on"] .node-switch-copy b {
  color: color-mix(in srgb, var(--ok) 78%, var(--ink)) !important;
}
.r3-node.is-switch-node[data-switch-state="off"] .node-switch-copy b {
  color: color-mix(in srgb, var(--danger) 80%, var(--ink)) !important;
}
.r3-node.is-switch-node .node-switch-copy small {
  display: block !important;
  max-width: 135px !important;
  color: var(--muted) !important;
  font-size: 10px !important;
  line-height: 1.22 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.r3-node.is-switch-node .node-switch-control {
  grid-area: control !important;
  position: relative !important;
  display: block !important;
  width: 78px !important;
  height: 42px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer !important;
  z-index: 18 !important;
}
.r3-node.is-switch-node .node-switch-control:hover,
.r3-node.is-switch-node .node-switch-control:focus-visible {
  transform: none !important;
  outline: 2px solid var(--accent) !important;
  outline-offset: 4px !important;
}
.r3-node.is-switch-node .node-switch-control .node-switch-track {
  width: 78px !important;
  height: 40px !important;
  display: block !important;
  border-radius: 999px !important;
  border: 1px solid var(--line) !important;
  background: var(--danger) !important;
  box-shadow: inset 2px 2px 0 rgba(0,0,0,.30), 0 0 0 2px color-mix(in srgb, var(--danger) 20%, transparent) !important;
  pointer-events: none !important;
}
.r3-node.is-switch-node .node-switch-control .node-switch-knob {
  width: 32px !important;
  height: 32px !important;
  top: 3px !important;
  left: 3px !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--panel) 94%, #fff 6%) !important;
  box-shadow: 2px 2px 0 rgba(0,0,0,.34) !important;
  pointer-events: none !important;
}
.r3-node.is-switch-node[data-switch-state="on"] .node-switch-control .node-switch-track {
  background: var(--ok) !important;
  box-shadow: inset 2px 2px 0 rgba(0,0,0,.24), 0 0 0 2px color-mix(in srgb, var(--ok) 22%, transparent) !important;
}
.r3-node.is-switch-node[data-switch-state="on"] .node-switch-control .node-switch-knob {
  transform: translateX(38px) !important;
}
.r3-node.is-switch-node .node-port,
html.r3-mobile-device .r3-node.is-switch-node .node-port {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 30 !important;
}
.r3-node.is-switch-node .node-port-in,
html.r3-mobile-device .r3-node.is-switch-node .node-port-in {
  left: -11px !important;
  right: auto !important;
}
.r3-node.is-switch-node .node-port-out,
html.r3-mobile-device .r3-node.is-switch-node .node-port-out {
  left: auto !important;
  right: -11px !important;
}
.r3-node.is-switch-node.state-done .node-switch-shell::after {
  content: "" !important;
  position: absolute !important;
  inset: 6px !important;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent) !important;
  clip-path: inherit !important;
  pointer-events: none !important;
  opacity: .55 !important;
}
.r3-node.is-switch-node.running .node-switch-shell,
.r3-node.is-switch-node[data-route-active="true"] .node-switch-shell {
  animation: switchChipPulse 1.05s ease-in-out infinite alternate !important;
}
@media (max-width: 980px) {
  .r3-node.is-switch-node {
    width: 248px !important;
    height: 84px !important;
    min-height: 84px !important;
    max-height: 84px !important;
  }
  .r3-node.is-switch-node .node-switch-shell {
    padding: 11px 14px 11px 22px !important;
    grid-template-columns: minmax(0, 1fr) 72px !important;
  }
  .r3-node.is-switch-node .node-switch-control,
  .r3-node.is-switch-node .node-switch-control .node-switch-track {
    width: 72px !important;
  }
  .r3-node.is-switch-node .node-switch-control .node-switch-knob {
    width: 30px !important;
    height: 30px !important;
  }
  .r3-node.is-switch-node[data-switch-state="on"] .node-switch-control .node-switch-knob {
    transform: translateX(34px) !important;
  }
}

/* R3D3 BUILD: pass88 hover tooltip description pulse — draw attention to the most useful node description text. */
@keyframes nodeHoverDescriptionGoldPulse {
  0%, 100% {
    color: var(--ink);
    text-shadow: none;
  }
  50% {
    color: color-mix(in srgb, var(--check-gold, #e2b84e) 92%, var(--ink) 8%);
    text-shadow: 0 0 10px color-mix(in srgb, var(--check-gold, #e2b84e) 34%, transparent);
  }
}

@media (hover: hover) and (pointer: fine) {
  .r3-node:hover > .node-hover-tip .node-hover-tip-description small,
  .r3-node:focus-within > .node-hover-tip .node-hover-tip-description small {
    animation: nodeHoverDescriptionGoldPulse 1.18s ease-in-out infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  .r3-node:hover > .node-hover-tip .node-hover-tip-description small,
  .r3-node:focus-within > .node-hover-tip .node-hover-tip-description small {
    animation: none !important;
    color: color-mix(in srgb, var(--check-gold, #e2b84e) 86%, var(--ink) 14%);
  }
}

/* R3D3 BUILD: pass94 dark True/False inactive visual — keep inactive diamonds readable; only remove the passed-through glow. */
html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .r3-node.is-truefalse-diamond[data-route-active="false"]:not(.selected):not(:hover) {
  opacity: 1 !important;
  filter: none !important;
}
html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .r3-node.is-truefalse-diamond[data-route-active="false"]:not(.selected):not(:hover)::before {
  border-color: color-mix(in srgb, var(--tf-branch-color) 78%, var(--line)) !important;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--tf-branch-color) 18%, var(--panel)) 0%,
      color-mix(in srgb, var(--panel) 86%, #000 14%) 74%),
    var(--panel) !important;
  animation: none !important;
  filter: none !important;
  box-shadow:
    6px 6px 0 var(--shadow),
    inset 0 0 0 1px color-mix(in srgb, var(--tf-branch-color) 18%, transparent) !important;
}
html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .r3-node.is-truefalse-diamond[data-route-active="false"]:not(.selected):not(:hover)::after {
  content: none !important;
  display: none !important;
  box-shadow: none !important;
  animation: none !important;
}
html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .r3-node.is-truefalse-diamond[data-route-active="false"]:not(.selected):not(:hover) .node-title,
html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .r3-node.is-truefalse-diamond[data-route-active="false"]:not(.selected):not(:hover) .node-title-wrap .node-title {
  color: var(--tf-branch-ink) !important;
  text-shadow: none !important;
}
html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .r3-node.is-truefalse-diamond[data-route-active="true"],
html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .r3-node.is-truefalse-diamond[data-route-active="used"] {
  opacity: 1 !important;
  filter: none !important;
}
html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .wire-label.is-inactive {
  fill: color-mix(in srgb, var(--danger) 48%, var(--muted) 52%) !important;
  opacity: .58 !important;
}

/* R3D3 BUILD: pass92 task splitter branch handoff viewer — inspect exact outgoing assignment context. */
.task-splitter-target-list .flow-target-row {
  align-items: center;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}
.task-splitter-target-list .flow-target-main {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.task-splitter-target-list .flow-target-main b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.task-splitter-target-list .flow-target-main small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
}
.flow-target-view {
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  color: var(--ink);
  padding: 2px 1px;
  min-height: 22px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  box-shadow: none;
  animation: splitterViewGoldPulse 1.65s ease-in-out infinite;
}
.flow-target-view:hover,
.flow-target-view:focus-visible {
  color: var(--check-gold, #e2b84e);
  outline: 1px solid color-mix(in srgb, var(--check-gold, #e2b84e) 60%, transparent);
  outline-offset: 3px;
}
.viewer-note {
  margin: 0;
  padding: 12px;
  color: var(--muted);
  line-height: 1.5;
}
@keyframes splitterViewGoldPulse {
  0%, 100% {
    color: var(--ink);
    text-shadow: none;
  }
  50% {
    color: var(--check-gold, #e2b84e);
    text-shadow: 0 0 9px color-mix(in srgb, var(--check-gold, #e2b84e) 42%, transparent);
  }
}
@media (prefers-reduced-motion: reduce) {
  .flow-target-view { animation: none; }
}

/* R3D3 BUILD: pass93 scalable live-run mirror — compact snapshots, remote stop control, read-only cross-device node state. */
.live-run-banner {
  position: absolute;
  left: 14px;
  top: 14px;
  z-index: 35;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(520px, calc(100% - 28px));
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  color: var(--ink);
  box-shadow: 5px 5px 0 var(--shadow);
  padding: 9px 10px;
  backdrop-filter: blur(12px);
  pointer-events: auto;
}
.live-run-banner.hidden { display: none !important; }
.live-run-banner::before {
  content: '';
  width: 10px;
  height: 10px;
  border: 1px solid var(--line);
  background: var(--ok);
  box-shadow: 0 0 14px color-mix(in srgb, var(--ok) 58%, transparent);
  animation: liveRunPulse 1.2s ease-in-out infinite;
  flex: 0 0 auto;
}
.live-run-banner.is-remote::before {
  background: var(--check-gold);
  box-shadow: 0 0 14px color-mix(in srgb, var(--check-gold) 58%, transparent);
}
.live-run-banner > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.live-run-banner b {
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
}
.live-run-banner span {
  color: var(--muted);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.live-run-stop {
  margin-left: auto;
  border: 1px solid var(--danger);
  background: color-mix(in srgb, var(--danger) 18%, var(--panel));
  color: var(--danger);
  padding: 5px 8px;
  min-height: 28px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  box-shadow: 2px 2px 0 var(--shadow);
}
.remote-live-node:not(.selected) {
  outline: 2px dashed color-mix(in srgb, var(--check-gold) 72%, transparent);
  outline-offset: 4px;
}
.remote-live-node::after {
  content: attr(data-remote-state);
  position: absolute;
  right: 8px;
  bottom: 7px;
  z-index: 8;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  color: var(--check-gold);
  padding: 2px 5px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  pointer-events: none;
}
.remote-state-running:not(.selected) {
  box-shadow: 7px 7px 0 var(--shadow), 0 0 0 2px color-mix(in srgb, var(--check-gold) 38%, transparent), 0 0 22px color-mix(in srgb, var(--check-gold) 22%, transparent);
}
.remote-state-error:not(.selected) {
  outline-color: color-mix(in srgb, var(--danger) 82%, transparent);
}
.remote-state-error::after {
  color: var(--danger);
}
@keyframes liveRunPulse {
  0%, 100% { transform: scale(.78); opacity: .65; }
  50% { transform: scale(1.12); opacity: 1; }
}
@media (max-width: 980px) {
  .live-run-banner {
    left: 10px;
    right: 10px;
    top: 10px;
    max-width: none;
  }
  .live-run-banner span { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .live-run-banner::before { animation: none; }
}

/* R3D3 BUILD: pass95 live sync mirror fix — remote devices reuse native running/state classes and wire glow. */
.remote-live-node[data-remote-live="1"] {
  transition: box-shadow .16s ease, outline-color .16s ease, border-color .16s ease, filter .16s ease;
}
.remote-live-node.remote-state-running:not(.selected) {
  border-color: var(--accent) !important;
  box-shadow: 9px 9px 0 var(--shadow), inset 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent), 0 0 24px color-mix(in srgb, var(--check-gold) 24%, transparent) !important;
}
.remote-live-node.remote-state-running .node-status {
  display: flex !important;
}
.remote-live-node.remote-state-done:not(.selected) {
  border-color: var(--output) !important;
}
.remote-live-node.remote-state-skipped:not(.selected) {
  border-color: color-mix(in srgb, var(--muted) 70%, var(--line)) !important;
}
.remote-live-node.remote-state-error:not(.selected) {
  border-color: var(--danger) !important;
}
.remote-wire-ran.wire {
  stroke: var(--check-gold) !important;
  stroke-width: 3.1 !important;
  opacity: .96 !important;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--check-gold) 48%, transparent));
}
.remote-wire-ran.wire-label {
  color: var(--check-gold) !important;
  fill: var(--check-gold) !important;
  opacity: .9 !important;
}
.remote-wire-glow.wire-glow {
  stroke: var(--check-gold) !important;
  stroke-width: 7 !important;
  opacity: .24 !important;
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--check-gold) 52%, transparent));
  animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .remote-live-node.remote-state-running::before,
  .remote-live-node.remote-state-running .node-status span {
    animation: none !important;
  }
}


/* R3D3 BUILD: pass96 mobile More popup + chat/flow mobile chrome polish — More is a real mobile popup; headers/composer stay compact and readable. */
html.r3-mobile-device .topbar-v2,
html.r3-mobile-device .app-shell.chat-mode .topbar-v2,
html.r3-mobile-device .app-shell:not(.chat-mode) .topbar-v2 {
  position: sticky !important;
  top: 0 !important;
  z-index: 360 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-items: stretch !important;
  gap: 8px !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 10px 8px !important;
  overflow: visible !important;
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 38%),
    linear-gradient(135deg, color-mix(in srgb, var(--panel) 94%, var(--accent) 6%), color-mix(in srgb, var(--panel) 98%, #000 2%)) !important;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--shadow) 70%, transparent) !important;
}

html.r3-mobile-device .topbar-leading,
html.r3-mobile-device .app-shell.chat-mode .topbar-leading,
html.r3-mobile-device .app-shell:not(.chat-mode) .topbar-leading {
  width: 100% !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

html.r3-mobile-device .brand-link,
html.r3-mobile-device .app-shell.chat-mode .brand-link,
html.r3-mobile-device .app-shell:not(.chat-mode) .brand-link {
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
}

html.r3-mobile-device .toolbar-v2,
html.r3-mobile-device .app-shell.chat-mode .toolbar-v2,
html.r3-mobile-device .app-shell:not(.chat-mode) .toolbar-v2 {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 7px !important;
  padding: 0 1px 3px !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  scroll-snap-type: x proximity !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
}
html.r3-mobile-device .toolbar-v2::-webkit-scrollbar { display: none !important; }

html.r3-mobile-device .topbar-build-pill,
html.r3-mobile-device .topbar-status-slot {
  display: none !important;
}

html.r3-mobile-device .plan-status-pill {
  flex: 0 0 auto !important;
  max-width: 168px !important;
  min-width: 104px !important;
  grid-template-columns: auto auto !important;
  min-height: 38px !important;
  padding: 5px 7px !important;
  scroll-snap-align: start !important;
}
html.r3-mobile-device .plan-status-label,
html.r3-mobile-device #planStatusUsage {
  display: none !important;
}
html.r3-mobile-device .plan-upgrade-btn,
html.r3-mobile-device .plan-admin-btn {
  min-height: 26px !important;
  padding: 4px 6px !important;
  font-size: 10px !important;
}

html.r3-mobile-device .run-action-group {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  margin: 0 !important;
  scroll-snap-align: start !important;
}
html.r3-mobile-device .app-shell.chat-mode .run-action-group {
  display: none !important;
}

html.r3-mobile-device .toolbar-v2 > .topbar-more-menu,
html.r3-mobile-device .app-shell.chat-mode .toolbar-v2 > .topbar-more-menu,
html.r3-mobile-device .app-shell:not(.chat-mode) .toolbar-v2 > .topbar-more-menu {
  display: inline-flex !important;
  visibility: visible !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: max-content !important;
  margin-left: auto !important;
  order: 99 !important;
  overflow: visible !important;
  scroll-snap-align: end !important;
  z-index: 520 !important;
}

html.r3-mobile-device .topbar-more-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 72px !important;
  min-height: 38px !important;
  padding: 0 10px !important;
  gap: 6px !important;
  border-color: color-mix(in srgb, var(--accent) 44%, var(--line)) !important;
  background: color-mix(in srgb, var(--accent) 12%, var(--panel-2)) !important;
  box-shadow: 2px 2px 0 var(--shadow) !important;
}
html.r3-mobile-device .topbar-more-btn b {
  display: inline !important;
  font-size: 11px !important;
  letter-spacing: .03em !important;
}

html.r3-mobile-device.r3-topbar-more-open body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 500;
  background: color-mix(in srgb, var(--bg) 42%, rgba(0, 0, 0, .48));
  backdrop-filter: blur(2px);
}

html.r3-mobile-device .topbar-more-menu:not([open]) .topbar-more-panel {
  display: none !important;
}
html.r3-mobile-device .topbar-more-menu[open] .topbar-more-panel {
  position: fixed !important;
  display: grid !important;
  top: calc(58px + env(safe-area-inset-top, 0px)) !important;
  left: max(10px, env(safe-area-inset-left, 0px)) !important;
  right: max(10px, env(safe-area-inset-right, 0px)) !important;
  width: auto !important;
  max-height: min(74svh, 590px) !important;
  overflow: auto !important;
  z-index: 560 !important;
  padding: 12px !important;
  border: 1px solid var(--line) !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--panel) 96%, var(--accent) 4%), color-mix(in srgb, var(--panel) 98%, #000 2%)) !important;
  box-shadow: 0 18px 44px color-mix(in srgb, var(--shadow) 88%, transparent), 6px 6px 0 var(--shadow) !important;
  -webkit-overflow-scrolling: touch !important;
}
html.r3-mobile-device .topbar-more-panel .top-action-group {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}
html.r3-mobile-device .topbar-more-panel .toolbar-btn {
  width: 100% !important;
  min-height: 42px !important;
  justify-content: flex-start !important;
  padding: 8px 9px !important;
}
html.r3-mobile-device .topbar-more-panel .toolbar-btn b {
  display: inline !important;
  font-size: 11px !important;
}

html.r3-mobile-device .chat-toggle-btn,
html.r3-mobile-device .app-shell.chat-mode .chat-toggle-btn,
html.r3-mobile-device .app-shell:not(.chat-mode) .chat-toggle-btn {
  flex: 0 0 auto !important;
  min-width: 116px !important;
  max-width: 46vw !important;
  min-height: 38px !important;
  padding: 7px 10px !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html.r3-mobile-device .app-shell.chat-mode .r3-chat-shell {
  background:
    radial-gradient(circle at 50% -18%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 40%),
    var(--bg) !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-main {
  grid-template-rows: auto minmax(0, 1fr) auto !important;
}
html.r3-mobile-device .r3-chat-mobile-top {
  position: relative !important;
  z-index: 20 !important;
  padding: 11px 12px !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--panel) 96%, var(--accent) 4%), color-mix(in srgb, var(--panel) 98%, #000 2%)) !important;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--shadow) 54%, transparent) !important;
}
html.r3-mobile-device .r3-chat-mobile-actions .ui-btn,
html.r3-mobile-device .app-shell.chat-mode .r3-chat-mobile-actions .ui-btn {
  min-width: 88px !important;
  min-height: 36px !important;
  border-color: color-mix(in srgb, var(--accent) 48%, var(--line)) !important;
  background: color-mix(in srgb, var(--accent) 12%, var(--panel-2)) !important;
}

html.r3-mobile-device .app-shell.chat-mode .r3-chat-composer {
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas:
    "attachments attachments"
    "input send"
    "tools tools"
    "hint hint" !important;
  gap: 8px !important;
  padding: 9px 10px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  border-top: 1px solid color-mix(in srgb, var(--line) 86%, transparent) !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 98%, transparent), color-mix(in srgb, var(--panel) 96%, #000 4%)) !important;
  box-shadow: 0 -8px 22px color-mix(in srgb, var(--shadow) 60%, transparent) !important;
  z-index: 30 !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-input-wrap {
  min-height: 52px !important;
  padding: 5px 42px 5px 5px !important;
  border-color: color-mix(in srgb, var(--line) 88%, var(--accent) 12%) !important;
  background: color-mix(in srgb, var(--bg) 94%, var(--panel) 6%) !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-input {
  min-height: 42px !important;
  max-height: 112px !important;
  padding: 8px !important;
  line-height: 1.32 !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-send {
  width: 76px !important;
  min-width: 76px !important;
  min-height: 52px !important;
  align-self: stretch !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-prompt-tools {
  grid-area: tools !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 7px !important;
  margin: 0 !important;
  min-width: 0 !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-prompt-tools .ui-btn {
  min-height: 30px !important;
  padding: 5px 9px !important;
  font-size: 11px !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-mention-help {
  grid-area: hint !important;
  margin: -2px 0 0 !important;
  padding: 0 2px !important;
  font-size: 10.5px !important;
}

@media (max-width: 380px) {
  html.r3-mobile-device .chat-toggle-btn,
  html.r3-mobile-device .app-shell.chat-mode .chat-toggle-btn,
  html.r3-mobile-device .app-shell:not(.chat-mode) .chat-toggle-btn {
    min-width: 104px !important;
    max-width: 43vw !important;
    font-size: 12px !important;
    padding-inline: 8px !important;
  }
  html.r3-mobile-device .plan-status-pill {
    max-width: 112px !important;
    min-width: 84px !important;
  }
  html.r3-mobile-device .topbar-more-panel .top-action-group {
    grid-template-columns: 1fr !important;
  }
}

/* R3D3 BUILD: pass97 mobile Flow button + More popup layering fix — keep Flow visible in chat and render More above the blur backdrop. */
html.r3-mobile-device.r3-topbar-more-open .topbar-v2,
html.r3-mobile-device.r3-topbar-more-open .app-shell.chat-mode .topbar-v2,
html.r3-mobile-device.r3-topbar-more-open .app-shell:not(.chat-mode) .topbar-v2 {
  position: sticky !important;
  z-index: 1200 !important;
  overflow: visible !important;
  isolation: isolate !important;
}

html.r3-mobile-device.r3-topbar-more-open body::before {
  z-index: 1100 !important;
  pointer-events: auto !important;
}

html.r3-mobile-device .topbar-more-menu[open],
html.r3-mobile-device .toolbar-v2 > .topbar-more-menu[open] {
  z-index: 1210 !important;
  overflow: visible !important;
}

html.r3-mobile-device .topbar-more-menu[open] .topbar-more-panel {
  z-index: 1220 !important;
  pointer-events: auto !important;
  transform: translateZ(0) !important;
}

html.r3-mobile-device .topbar-leading,
html.r3-mobile-device .app-shell.chat-mode .topbar-leading,
html.r3-mobile-device .app-shell:not(.chat-mode) .topbar-leading {
  display: grid !important;
  grid-template-columns: auto minmax(72px, max-content) !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  overflow: visible !important;
}

html.r3-mobile-device .brand-link,
html.r3-mobile-device .app-shell.chat-mode .brand-link,
html.r3-mobile-device .app-shell:not(.chat-mode) .brand-link {
  width: auto !important;
  max-width: calc(100vw - 120px) !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

html.r3-mobile-device .chat-toggle-btn,
html.r3-mobile-device .app-shell.chat-mode .chat-toggle-btn,
html.r3-mobile-device .app-shell:not(.chat-mode) .chat-toggle-btn {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  justify-self: end !important;
  flex: 0 0 auto !important;
  min-width: 72px !important;
  max-width: 104px !important;
  min-height: 38px !important;
  padding: 7px 10px !important;
  overflow: visible !important;
  white-space: nowrap !important;
  z-index: 2 !important;
}

html.r3-mobile-device .app-shell.chat-mode .chat-toggle-btn {
  border-color: color-mix(in srgb, var(--check-gold) 72%, var(--line)) !important;
  background: color-mix(in srgb, var(--check-gold) 18%, var(--panel-2)) !important;
  color: var(--ink) !important;
}

/* R3D3 BUILD: pass98 mobile chat chrome cleanup — compact chat header, hide stray billing/status row, keep More above overlay, and separate mic/attach controls. */
html.r3-mobile-device .app-shell.chat-mode .topbar-v2 {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto auto !important;
  grid-template-rows: auto !important;
  grid-template-areas: "brand spacer flow more" !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 66px !important;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 8px !important;
  overflow: visible !important;
  z-index: 1250 !important;
}

html.r3-mobile-device .app-shell.chat-mode .topbar-leading {
  display: contents !important;
}

html.r3-mobile-device .app-shell.chat-mode .brand-link {
  grid-area: brand !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  justify-self: start !important;
}

html.r3-mobile-device .app-shell.chat-mode .chat-toggle-btn {
  grid-area: flow !important;
  justify-self: end !important;
  min-width: 82px !important;
  max-width: 92px !important;
  min-height: 42px !important;
  padding: 8px 12px !important;
  margin: 0 !important;
  font-size: 13px !important;
  letter-spacing: .02em !important;
  box-shadow: 3px 3px 0 var(--shadow) !important;
}

html.r3-mobile-device .app-shell.chat-mode .toolbar-v2 {
  display: contents !important;
  width: auto !important;
  max-width: none !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

html.r3-mobile-device .app-shell.chat-mode .toolbar-v2 > :not(.topbar-more-menu) {
  display: none !important;
}

html.r3-mobile-device .app-shell.chat-mode .toolbar-v2 > .topbar-more-menu {
  grid-area: more !important;
  display: block !important;
  position: relative !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  order: initial !important;
  z-index: 1260 !important;
}

html.r3-mobile-device .app-shell.chat-mode .topbar-more-btn {
  min-width: 78px !important;
  min-height: 42px !important;
  padding: 0 10px !important;
  gap: 7px !important;
  border-color: color-mix(in srgb, var(--accent) 58%, var(--line)) !important;
  background: color-mix(in srgb, var(--panel-2) 82%, var(--accent) 18%) !important;
  box-shadow: 3px 3px 0 var(--shadow) !important;
}

html.r3-mobile-device.r3-topbar-more-open body::before {
  z-index: 3000 !important;
  background: color-mix(in srgb, var(--bg) 48%, rgba(0, 0, 0, .56)) !important;
  backdrop-filter: blur(3px) !important;
}

html.r3-mobile-device .topbar-more-menu[open],
html.r3-mobile-device .toolbar-v2 > .topbar-more-menu[open],
html.r3-mobile-device .app-shell.chat-mode .toolbar-v2 > .topbar-more-menu[open] {
  z-index: 4010 !important;
  isolation: isolate !important;
}

html.r3-mobile-device .topbar-more-menu[open] .topbar-more-panel,
html.r3-mobile-device .app-shell.chat-mode .topbar-more-menu[open] .topbar-more-panel {
  top: calc(72px + env(safe-area-inset-top, 0px)) !important;
  left: max(10px, env(safe-area-inset-left, 0px)) !important;
  right: max(10px, env(safe-area-inset-right, 0px)) !important;
  z-index: 4020 !important;
  max-height: min(72svh, 620px) !important;
}

html.r3-mobile-device .app-shell.chat-mode .r3-chat-main {
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  min-height: 0 !important;
}

html.r3-mobile-device .app-shell.chat-mode .r3-chat-mobile-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  min-height: 42px !important;
  padding: 8px 12px !important;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 58%, transparent) !important;
  background: color-mix(in srgb, var(--panel) 88%, transparent) !important;
  box-shadow: none !important;
}

html.r3-mobile-device .app-shell.chat-mode .r3-chat-mobile-top b {
  display: block !important;
  font-size: 12px !important;
  line-height: 1.1 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: var(--accent) !important;
}

html.r3-mobile-device .app-shell.chat-mode .r3-chat-mobile-top small {
  display: block !important;
  max-width: 60vw !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 11px !important;
  color: var(--muted) !important;
}

html.r3-mobile-device .app-shell.chat-mode .r3-chat-mobile-actions .ui-btn {
  min-width: 74px !important;
  min-height: 30px !important;
  padding: 5px 8px !important;
  font-size: 11px !important;
}

html.r3-mobile-device .app-shell.chat-mode .r3-chat-messages {
  padding: 12px 12px 10px !important;
}

html.r3-mobile-device .app-shell.chat-mode .r3-chat-empty {
  margin: 0 !important;
  padding: 18px 16px !important;
  gap: 12px !important;
  border-color: color-mix(in srgb, var(--line) 72%, var(--accent) 28%) !important;
  background: color-mix(in srgb, var(--panel) 82%, transparent) !important;
  box-shadow: 4px 4px 0 color-mix(in srgb, var(--shadow) 82%, transparent) !important;
}

html.r3-mobile-device .app-shell.chat-mode .r3-chat-empty h2 {
  font-size: clamp(28px, 8vw, 38px) !important;
  line-height: 1.02 !important;
  letter-spacing: -.04em !important;
}

html.r3-mobile-device .app-shell.chat-mode .r3-chat-empty p {
  font-size: 14px !important;
  line-height: 1.45 !important;
}

html.r3-mobile-device .app-shell.chat-mode .r3-chat-composer {
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas:
    "attachments attachments"
    "input send"
    "tools tools"
    "hint hint" !important;
  align-items: stretch !important;
  gap: 8px !important;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
}

html.r3-mobile-device .app-shell.chat-mode .r3-chat-input-wrap {
  min-height: 62px !important;
  padding: 6px 92px 6px 6px !important;
  display: grid !important;
  align-items: stretch !important;
}

html.r3-mobile-device .app-shell.chat-mode .r3-chat-input {
  min-height: 48px !important;
  max-height: 116px !important;
  padding: 8px 0 8px 8px !important;
}

html.r3-mobile-device .app-shell.chat-mode .r3-chat-attach-btn {
  right: 8px !important;
  bottom: 8px !important;
  top: auto !important;
  width: 34px !important;
  height: 34px !important;
  z-index: 9 !important;
}

html.r3-mobile-device .app-shell.chat-mode .r3-chat-input-wrap .voice-dictation-controls {
  top: auto !important;
  right: 48px !important;
  bottom: 8px !important;
  left: auto !important;
  align-items: center !important;
  flex-direction: row !important;
  gap: 6px !important;
  z-index: 10 !important;
}

html.r3-mobile-device .app-shell.chat-mode .r3-chat-input-wrap .voice-dictation-btn {
  width: 34px !important;
  height: 34px !important;
  font-size: 15px !important;
}

html.r3-mobile-device .app-shell.chat-mode .r3-chat-input-wrap .voice-dictation-status {
  position: absolute !important;
  right: -40px !important;
  bottom: calc(100% + 8px) !important;
  max-width: min(250px, 72vw) !important;
}

html.r3-mobile-device .app-shell.chat-mode .r3-chat-send {
  width: 76px !important;
  min-width: 76px !important;
  min-height: 62px !important;
  align-self: stretch !important;
  font-size: 14px !important;
}

@media (max-width: 380px) {
  html.r3-mobile-device .app-shell.chat-mode .topbar-v2 {
    grid-template-columns: auto minmax(0, 1fr) auto auto !important;
    gap: 6px !important;
    padding-inline: 9px !important;
  }
  html.r3-mobile-device .app-shell.chat-mode .brand-link .brand-mark {
    min-width: 76px !important;
    font-size: 20px !important;
    padding-inline: 8px !important;
  }
  html.r3-mobile-device .app-shell.chat-mode .chat-toggle-btn {
    min-width: 72px !important;
    max-width: 76px !important;
    padding-inline: 8px !important;
  }
  html.r3-mobile-device .app-shell.chat-mode .topbar-more-btn {
    min-width: 70px !important;
    padding-inline: 8px !important;
  }
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-send {
    width: 68px !important;
    min-width: 68px !important;
  }
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-input-wrap {
    padding-right: 86px !important;
  }
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-input-wrap .voice-dictation-controls {
    right: 46px !important;
  }
}


/* R3D3 BUILD: pass100 readable Output/Merge viewer — remove successful scheduler noise and make merged handoffs scan like a document. */
.viewer-body.is-output-viewer {
  gap: 16px;
  padding: 16px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 5%, transparent), transparent 220px),
    var(--panel);
}
.viewer-body.is-output-viewer .viewer-summary-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.viewer-primary-output {
  border-color: color-mix(in srgb, var(--accent) 48%, var(--soft-line));
  background: color-mix(in srgb, var(--panel) 92%, var(--bg));
  box-shadow: 6px 6px 0 var(--shadow);
}
.viewer-primary-output > h3 {
  padding: 11px 14px;
  font-size: 12px;
  letter-spacing: .15em;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 14%, transparent), transparent 72%),
    var(--panel-2);
}
.viewer-primary-output > h3.viewer-output-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.viewer-output-heading > span {
  min-width: 0;
}
.viewer-output-heading > .ui-btn {
  flex: 0 0 auto;
  letter-spacing: normal;
  text-transform: none;
}
.viewer-rich-output {
  width: 100%;
  min-width: 0;
  max-width: none;
  padding: 18px 20px 22px;
  color: var(--ink);
  overflow-wrap: anywhere;
  font: 15px/1.68 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.viewer-rich-output.is-compact {
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.56;
}
.viewer-rich-output.is-scroll-region {
  max-height: 360px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.viewer-primary-output > .viewer-rich-output {
  max-height: none;
  overflow: visible;
}
.viewer-collapsible > .viewer-rich-output {
  background: color-mix(in srgb, var(--bg) 88%, transparent);
}
.viewer-rich-dl dd {
  min-width: 0;
}
.viewer-rich-dl dd > .viewer-rich-output {
  padding: 0;
  background: transparent;
}
.tool-card-rich-summary {
  border-bottom: 1px solid var(--soft-line);
  color: var(--muted);
}
.tool-card > .viewer-rich-output.is-scroll-region,
.live-tool-detail > .viewer-rich-output.is-scroll-region,
.live-current > .viewer-rich-output.is-scroll-region {
  border-top: 0;
  background: color-mix(in srgb, var(--bg) 92%, var(--panel));
}
.viewer-rich-output p { margin: 0 0 12px; }
.viewer-rich-output p:last-child { margin-bottom: 0; }
.viewer-rich-output h3,
.viewer-rich-output h4,
.viewer-rich-output h5 {
  margin: 18px 0 8px;
  color: var(--ink);
  line-height: 1.22;
  letter-spacing: -.015em;
  text-transform: none;
}
.viewer-rich-output ul,
.viewer-rich-output ol {
  margin: 8px 0 15px 24px;
  padding: 0;
}
.viewer-rich-output li { margin: 6px 0; padding-left: 2px; }
.viewer-rich-output pre {
  margin: 12px 0 16px;
  padding: 14px;
  overflow: auto;
  white-space: pre-wrap;
  border: 1px solid var(--soft-line);
  background: var(--bg);
  box-shadow: 3px 3px 0 var(--shadow);
  font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.viewer-rich-output code {
  border: 1px solid color-mix(in srgb, var(--soft-line) 70%, transparent);
  background: var(--bg);
  padding: 1px 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .92em;
}
.viewer-rich-output pre code { border: 0; background: transparent; padding: 0; }
.viewer-rich-output a { color: var(--accent); text-underline-offset: 2px; }
.viewer-secondary-section {
  opacity: .9;
  box-shadow: 2px 2px 0 var(--shadow);
}
.viewer-secondary-section[open] { opacity: 1; }
.viewer-secondary-section .viewer-dl { background: color-mix(in srgb, var(--bg) 88%, transparent); }
.viewer-merged-output { display: grid; gap: 14px; padding: 14px; }
.viewer-merged-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 2px 12px;
  border-bottom: 1px solid var(--soft-line);
}
.viewer-merged-hero span {
  color: var(--accent);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .17em;
  text-transform: uppercase;
}
.viewer-merged-hero h3 {
  margin: 4px 0 0;
  color: var(--ink);
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1;
  letter-spacing: -.035em;
  text-transform: none;
}
.viewer-merged-badges { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.viewer-merged-badges b {
  border: 1px solid var(--soft-line);
  background: var(--bg);
  color: var(--muted);
  padding: 6px 8px;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  box-shadow: 2px 2px 0 var(--shadow);
}
.viewer-merged-branches { display: grid; gap: 12px; }
.viewer-merged-branch {
  border: 1px solid var(--soft-line);
  background: color-mix(in srgb, var(--bg) 88%, var(--panel));
  box-shadow: 4px 4px 0 var(--shadow);
  overflow: hidden;
}
.viewer-merged-branch > header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid var(--soft-line);
  background: color-mix(in srgb, var(--panel-2) 74%, transparent);
}
.viewer-merged-branch > header > span {
  border: 1px solid var(--accent);
  color: var(--accent);
  padding: 5px 7px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.viewer-merged-branch h4 { margin: 0; color: var(--ink); font-size: 15px; line-height: 1.15; }
.viewer-merged-branch header small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }
.viewer-merged-state {
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.viewer-merged-state.is-done { color: var(--ok); }
.viewer-merged-state.is-error { color: var(--danger); }
.viewer-merged-copy,
.viewer-merged-key > div {
  padding: 13px 15px;
  color: var(--ink);
  font: 14px/1.62 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.viewer-merged-copy p,
.viewer-merged-key p { margin: 0 0 9px; }
.viewer-merged-copy p:last-child,
.viewer-merged-key p:last-child { margin-bottom: 0; }
.viewer-merged-copy ul,
.viewer-merged-copy ol,
.viewer-merged-key ul,
.viewer-merged-key ol { margin: 7px 0 10px 22px; padding: 0; }
.viewer-merged-key {
  margin: 0 12px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 46%, var(--soft-line));
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}
.viewer-merged-key h5 {
  margin: 0;
  padding: 8px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 34%, var(--soft-line));
  color: var(--accent);
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.viewer-merged-checklist .viewer-rich-output { padding: 14px; font-size: 13px; }
html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .viewer-primary-output,
html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .viewer-merged-branch {
  background: var(--surface-raised, var(--panel));
  box-shadow:
    inset 0 1px 0 var(--surface-highlight, rgba(255,255,255,.05)),
    5px 5px 0 var(--shadow);
}
@media (max-width: 760px) {
  .viewer-body.is-output-viewer { padding: 10px; gap: 11px; }
  .viewer-body.is-output-viewer .viewer-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .viewer-rich-output { padding: 14px; font-size: 14px; line-height: 1.58; }
  .viewer-merged-output { padding: 10px; }
  .viewer-merged-hero { align-items: flex-start; flex-direction: column; }
  .viewer-merged-badges { justify-content: flex-start; }
  .viewer-merged-branch > header { grid-template-columns: auto minmax(0, 1fr); }
  .viewer-merged-state { grid-column: 2; }
}


/* R3D3 BUILD: pass105 live sync hydration — remote cards show current data without stale saved-run content. */
.remote-live-node[data-remote-live="1"] .node-body,
.remote-live-node[data-remote-live="1"] .node-tools {
  transition: opacity .14s ease, border-color .14s ease, background-color .14s ease;
}
.remote-live-node[data-remote-live="1"] .node-body {
  background: color-mix(in srgb, var(--panel-2) 92%, var(--check-gold) 3%);
}
.remote-live-node[data-remote-live="1"] .node-tools {
  border-color: color-mix(in srgb, var(--check-gold) 22%, var(--soft-line));
}


/* R3D3 BUILD: pass106 mobile live controls — auto-sized flow header, non-overlapping controls, compact live status, reliable touch targets. */
html.r3-mobile-device .app-shell:not(.chat-mode) {
  grid-template-rows: auto minmax(0, 1fr) !important;
}

html.r3-mobile-device .app-shell:not(.chat-mode) .topbar-v2 {
  position: relative !important;
  top: auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  gap: 8px !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 10px 9px !important;
  overflow: visible !important;
  z-index: 820 !important;
}

html.r3-mobile-device .app-shell:not(.chat-mode) .topbar-leading {
  display: grid !important;
  grid-template-columns: auto minmax(76px, max-content) !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  overflow: visible !important;
}

html.r3-mobile-device .app-shell:not(.chat-mode) .brand-link .brand-mark {
  min-width: 76px !important;
  min-height: 42px !important;
  padding: 0 10px !important;
  font-size: 20px !important;
}

html.r3-mobile-device .app-shell:not(.chat-mode) .chat-toggle-btn {
  min-width: 82px !important;
  max-width: 96px !important;
  min-height: 42px !important;
  justify-self: end !important;
  padding: 7px 11px !important;
  box-shadow: 3px 3px 0 var(--shadow) !important;
}

html.r3-mobile-device .app-shell:not(.chat-mode) .toolbar-v2 {
  display: grid !important;
  grid-template-columns: minmax(86px, 1fr) minmax(88px, auto) minmax(76px, auto) !important;
  grid-template-areas: "run plan more" !important;
  align-items: stretch !important;
  gap: 7px !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 42px !important;
  height: auto !important;
  padding: 0 !important;
  overflow: visible !important;
}

html.r3-mobile-device .app-shell:not(.chat-mode) .run-action-group {
  grid-area: run !important;
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
  gap: 6px !important;
  overflow: visible !important;
}

html.r3-mobile-device .app-shell:not(.chat-mode) #runFlowBtn,
html.r3-mobile-device .app-shell:not(.chat-mode) #stopFlowBtn {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  width: auto !important;
  min-height: 42px !important;
  padding: 0 9px !important;
  justify-content: center !important;
  white-space: nowrap !important;
  touch-action: manipulation !important;
  position: relative !important;
  z-index: 4 !important;
}

html.r3-mobile-device .app-shell:not(.chat-mode) #stopFlowBtn.hidden {
  display: none !important;
}

html.r3-mobile-device .app-shell:not(.chat-mode).has-live-run #runFlowBtn {
  display: none !important;
}

html.r3-mobile-device .app-shell:not(.chat-mode).has-live-run #stopFlowBtn:not(.hidden) {
  display: inline-flex !important;
  width: 100% !important;
  flex-basis: 100% !important;
  border-color: color-mix(in srgb, var(--danger) 78%, var(--line)) !important;
  background: color-mix(in srgb, var(--danger) 16%, var(--panel-2)) !important;
  box-shadow: 3px 3px 0 var(--shadow) !important;
}

html.r3-mobile-device .app-shell:not(.chat-mode).live-stop-pending #stopFlowBtn {
  opacity: .68 !important;
  cursor: wait !important;
}

html.r3-mobile-device .app-shell:not(.chat-mode) .plan-status-pill {
  grid-area: plan !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 88px !important;
  max-width: 112px !important;
  width: auto !important;
  min-height: 42px !important;
  padding: 0 !important;
  overflow: hidden !important;
}

html.r3-mobile-device .app-shell:not(.chat-mode) #upgradePlanBtn,
html.r3-mobile-device .app-shell:not(.chat-mode) .plan-upgrade-btn {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 42px !important;
  padding: 0 9px !important;
  font-size: 10.5px !important;
  box-shadow: 3px 3px 0 var(--shadow) !important;
}

html.r3-mobile-device .app-shell:not(.chat-mode) .toolbar-v2 > .topbar-more-menu {
  grid-area: more !important;
  display: block !important;
  min-width: 76px !important;
  width: auto !important;
  margin: 0 !important;
  position: relative !important;
  z-index: 830 !important;
}

html.r3-mobile-device .app-shell:not(.chat-mode) .topbar-more-btn {
  width: 100% !important;
  min-width: 76px !important;
  min-height: 42px !important;
  padding: 0 9px !important;
  box-shadow: 3px 3px 0 var(--shadow) !important;
}

html.r3-mobile-device .app-shell:not(.chat-mode) .canvas-wrap {
  min-height: 0 !important;
  overflow: hidden !important;
}

html.r3-mobile-device .app-shell:not(.chat-mode) .live-run-banner {
  left: 8px !important;
  right: 8px !important;
  top: 8px !important;
  width: auto !important;
  max-width: none !important;
  min-height: 48px !important;
  display: grid !important;
  grid-template-columns: 10px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 9px !important;
  padding: 8px 10px !important;
  z-index: 110 !important;
  pointer-events: none !important;
  box-shadow: 4px 4px 0 color-mix(in srgb, var(--shadow) 88%, transparent) !important;
}

html.r3-mobile-device .app-shell:not(.chat-mode) .live-run-banner > div {
  min-width: 0 !important;
  gap: 2px !important;
}

html.r3-mobile-device .app-shell:not(.chat-mode) .live-run-banner b {
  font-size: 10.5px !important;
  letter-spacing: .1em !important;
}

html.r3-mobile-device .app-shell:not(.chat-mode) .live-run-banner span {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 10.5px !important;
}

html.r3-mobile-device .app-shell:not(.chat-mode) .live-run-banner .live-run-stop {
  display: none !important;
}

.live-run-stop:disabled,
#stopFlowBtn:disabled {
  opacity: .62;
  cursor: wait;
  pointer-events: none;
}

@media (max-width: 380px) {
  html.r3-mobile-device .app-shell:not(.chat-mode) .toolbar-v2 {
    grid-template-columns: minmax(80px, 1fr) 82px 72px !important;
    gap: 5px !important;
  }
  html.r3-mobile-device .app-shell:not(.chat-mode) .topbar-more-btn,
  html.r3-mobile-device .app-shell:not(.chat-mode) .toolbar-v2 > .topbar-more-menu {
    min-width: 72px !important;
  }
  html.r3-mobile-device .app-shell:not(.chat-mode) #runFlowBtn b,
  html.r3-mobile-device .app-shell:not(.chat-mode) #stopFlowBtn b,
  html.r3-mobile-device .app-shell:not(.chat-mode) .topbar-more-btn b {
    font-size: 10px !important;
  }
}

/* R3D3 BUILD: pass107 remote working badge geometry — sync status must not combine top and bottom anchors. */
.remote-live-node.remote-state-running::after {
  content: "WORKING" !important;
  top: -22px !important;
  right: 8px !important;
  bottom: auto !important;
  left: auto !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  display: block !important;
  padding: 3px 7px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.remote-live-node:not(.remote-state-running)::after {
  top: auto !important;
  bottom: 7px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

/* R3D3 BUILD: pass122 mobile chat subheader containment + persistent start-node selector.
   The app grid must size its top row from the real toolbar height; fixed legacy
   row tokens let the toolbar overlap the chat subheader on tall/mobile browser chrome. */
html.r3-mobile-device .app-shell.chat-mode {
  grid-template-rows: auto minmax(0, 1fr) !important;
}

html.r3-mobile-device .app-shell.chat-mode .topbar-v2 {
  position: relative !important;
  top: auto !important;
  height: auto !important;
  min-height: 66px !important;
  max-height: none !important;
  box-sizing: border-box !important;
}

html.r3-mobile-device .app-shell.chat-mode .r3-chat-shell {
  height: auto !important;
  min-height: 0 !important;
  align-self: stretch !important;
  overflow: hidden !important;
}

html.r3-mobile-device .app-shell.chat-mode .r3-chat-main {
  height: auto !important;
  min-height: 0 !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  overflow: hidden !important;
}

html.r3-mobile-device .app-shell.chat-mode .r3-chat-mobile-top {
  position: relative !important;
  inset: auto !important;
  z-index: 40 !important;
  min-height: 62px !important;
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
  overflow: visible !important;
  isolation: isolate !important;
}

html.r3-mobile-device .app-shell.chat-mode .r3-chat-mobile-top > div {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

html.r3-mobile-device .app-shell.chat-mode .r3-chat-mobile-actions {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(118px, min(38vw, 220px)) auto !important;
  align-items: center !important;
  gap: 7px !important;
}

html.r3-mobile-device .app-shell.chat-mode .r3-chat-mobile-start-select {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 220px !important;
  min-height: 34px !important;
  padding: 5px 26px 5px 8px !important;
  border: 1px solid color-mix(in srgb, var(--accent) 48%, var(--line)) !important;
  border-radius: 0 !important;
  background: color-mix(in srgb, var(--panel-2) 88%, var(--accent) 12%) !important;
  color: var(--ink) !important;
  font: inherit !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  box-shadow: 2px 2px 0 var(--shadow) !important;
}

html.r3-mobile-device .app-shell.chat-mode .r3-chat-mobile-start-select:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px !important;
}

html.r3-mobile-device .app-shell.chat-mode .r3-chat-messages {
  position: relative !important;
  z-index: 1 !important;
  min-height: 0 !important;
  scroll-padding-top: 12px !important;
}

@media (max-width: 420px) {
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-mobile-top {
    gap: 7px !important;
    padding-inline: 9px !important;
  }
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-mobile-actions {
    grid-template-columns: minmax(104px, 34vw) auto !important;
    gap: 5px !important;
  }
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-mobile-actions .ui-btn {
    min-width: 68px !important;
    padding-inline: 7px !important;
  }
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-mobile-start-select {
    font-size: 10px !important;
    padding-left: 6px !important;
  }
}


/* Pass124: authoritative human steering + stable tool-call rows.
   Tool output is click-driven; hovering never expands labels, tooltips, or node geometry. */
.r3-node .node-tools .tool-bubble,
.r3-node .node-tools .tool-bubble:hover,
.r3-node .node-tools .tool-bubble:focus-visible {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  z-index: auto !important;
  transform: none !important;
}
.r3-node .node-tools .tool-bubble::after,
.r3-node .node-tools .tool-tip {
  display: none !important;
  content: none !important;
}
.r3-node .node-tools .bubble-label,
.r3-node .node-tools .tool-bubble:hover .bubble-label,
.r3-node .node-tools .tool-bubble:focus-visible .bubble-label {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.r3-node .node-tools .bubble-copy,
.r3-node .node-tools .bubble-copy b,
.r3-node .node-tools .bubble-copy em {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.node-human-steer-badge {
  background: color-mix(in srgb, var(--accent) 22%, var(--panel)) !important;
  border-color: var(--accent) !important;
  color: var(--ink) !important;
  white-space: nowrap !important;
}
.node-human-steer-badge.is-acknowledged,
.node-human-steer-badge.is-applied {
  background: color-mix(in srgb, var(--ok) 20%, var(--panel)) !important;
  border-color: var(--ok) !important;
}

/* R3D3 BUILD: pass128 shared Markdown output rendering — 2026-07-10
   Every node's Full Output uses the same safe Markdown renderer as Chat View.
   Shared table styles keep plan/handoff tables readable without widening dialogs. */
.r3-markdown-table-wrap {
  width: 100%;
  margin: 12px 0 16px;
  overflow-x: auto;
  border: 1px solid var(--soft-line);
  background: var(--bg);
  box-shadow: 3px 3px 0 var(--shadow);
}
.r3-markdown-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: .92em;
  line-height: 1.45;
}
.r3-markdown-table th,
.r3-markdown-table td {
  padding: 9px 11px;
  border-right: 1px solid var(--soft-line);
  border-bottom: 1px solid var(--soft-line);
  vertical-align: top;
  overflow-wrap: anywhere;
}
.r3-markdown-table th:last-child,
.r3-markdown-table td:last-child { border-right: 0; }
.r3-markdown-table tbody tr:last-child td { border-bottom: 0; }
.r3-markdown-table th {
  background: color-mix(in srgb, var(--accent) 11%, var(--panel-2));
  color: var(--ink);
  font-size: .82em;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.r3-markdown-table tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--panel-2) 58%, transparent);
}
.viewer-rich-output > :first-child { margin-top: 0; }
.viewer-rich-output > :last-child { margin-bottom: 0; }
@media (max-width: 700px) {
  .r3-markdown-table { min-width: 460px; }
  .r3-markdown-table th,
  .r3-markdown-table td { padding: 8px 9px; }
}


/* R3D3 BUILD: pass129 unified node markdown viewer and reliable modal scrolling. */
.viewer-section,
.viewer-primary-output,
.viewer-collapsible,
.tool-card {
  min-width: 0;
}
.viewer-primary-output {
  overflow: visible;
}
.viewer-body.is-output-viewer,
.viewer-body.is-live-viewer {
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
.viewer-body .r3-markdown-table-wrap {
  max-width: 100%;
}
@media (max-width: 760px) {
  .viewer-rich-output,
  .viewer-rich-output.is-compact {
    padding: 12px;
    font-size: 13px;
    line-height: 1.55;
  }
  .viewer-dl {
    grid-template-columns: 1fr;
  }
  .viewer-dl dt {
    margin-top: 4px;
  }
}


/* Pass133: compact per-node model routing and sampling controls. */
.model-options-disclosure {
  margin: -2px 0 8px;
  border: 0;
  background: transparent;
}
.model-options-disclosure > summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 28px;
  padding: 2px 3px;
  color: var(--accent);
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
  user-select: none;
}
.model-options-disclosure > summary::-webkit-details-marker { display: none; }
.model-options-disclosure > summary:hover { color: var(--ink); }
.model-options-state {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  text-decoration: none;
}
.model-options-disclosure[open] .model-options-state { color: var(--accent); }
.model-options-panel {
  display: grid;
  gap: 8px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--soft-line) 72%, transparent);
  background: color-mix(in srgb, var(--panel) 62%, transparent);
}
.option-fold .model-options-panel label,
.option-card .model-options-panel label {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 5px;
  margin: 0;
  padding: 7px;
}
.model-options-panel input,
.model-options-panel select { width: 100%; }
.model-options-reasoning {
  border-left: 2px solid color-mix(in srgb, var(--accent) 72%, transparent);
  background: color-mix(in srgb, var(--accent) 5%, var(--panel));
}
.model-option-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.model-option-chip {
  flex: 0 0 auto;
  padding: 2px 5px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--soft-line));
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .1em;
  line-height: 1.2;
  text-transform: uppercase;
}
.model-options-reasoning select {
  min-height: 34px;
}
.model-options-reset { justify-self: start; }
@media (max-width: 760px) {
  .model-options-disclosure > summary { min-height: 34px; padding: 4px; }
  .model-options-panel { padding: 7px; }
}


/* R3D3 BUILD: pass135 structured task handoffs */
.checklist-copy > span {
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.checklist-copy small code {
  padding: 1px 4px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--soft-line));
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  color: var(--accent);
  font-size: 10px;
  letter-spacing: 0;
  text-transform: none;
}

/* R3D3 BUILD: pass194 live rich output viewer — 2026-07-14
   Shared chat-grade rendering, live tool updates, follow/pause behavior, and cleaner modal hierarchy. */
.r3-viewer-modal {
  width: min(1120px, calc(100vw - 32px));
  height: min(91dvh, 920px);
  max-height: min(91dvh, 920px);
  border-color: color-mix(in srgb, var(--accent) 52%, var(--line));
  background: color-mix(in srgb, var(--panel) 96%, black 4%);
  box-shadow: 12px 12px 0 color-mix(in srgb, var(--shadow) 88%, transparent);
}
.viewer-card {
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--panel);
}
.viewer-head {
  min-height: 64px;
  padding: 12px 14px;
  gap: 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 32%, var(--soft-line));
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 48%),
    color-mix(in srgb, var(--panel-2) 92%, var(--panel));
}
.viewer-title-block {
  min-width: 0;
  flex: 1 1 auto;
}
.viewer-title-block strong,
.viewer-title-block span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.viewer-title-block strong {
  font-size: 17px;
  letter-spacing: -.01em;
}
.viewer-head-actions,
.viewer-foot-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
}
.viewer-live-pill,
.viewer-working-chip,
.viewer-status-chip,
.viewer-event-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 26px;
  border: 1px solid color-mix(in srgb, var(--accent) 62%, var(--line));
  background: color-mix(in srgb, var(--accent) 13%, var(--panel));
  color: var(--accent);
  padding: 4px 8px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .11em;
  line-height: 1;
  text-transform: uppercase;
  box-shadow: 2px 2px 0 var(--shadow);
}
.viewer-live-pill i,
.viewer-working-chip i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent);
  animation: viewerLivePulse 1.35s ease-in-out infinite;
}
.viewer-follow-btn[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--ok) 60%, var(--line));
  background: color-mix(in srgb, var(--ok) 12%, var(--panel));
}
.viewer-follow-btn.is-paused {
  border-color: color-mix(in srgb, var(--warn) 62%, var(--line));
  color: var(--warn);
}
.viewer-foot {
  min-height: 58px;
  padding: 10px 14px;
  gap: 12px;
  justify-content: space-between;
  border-top: 1px solid var(--soft-line);
  background: color-mix(in srgb, var(--panel-2) 93%, var(--panel));
}
.viewer-foot-status {
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.viewer-body.is-live-viewer {
  padding: 14px;
  gap: 12px;
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--accent) 7%, transparent), transparent 34%),
    var(--panel);
}
.viewer-body.is-tool-viewer {
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}
.viewer-summary-grid.live-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.viewer-summary-grid.live-summary > div {
  min-height: 58px;
  border-color: color-mix(in srgb, var(--accent) 24%, var(--soft-line));
  background: color-mix(in srgb, var(--panel-2) 82%, var(--bg));
  box-shadow: 2px 2px 0 var(--shadow);
}
.viewer-summary-grid.live-summary b {
  font-size: 9px;
  letter-spacing: .14em;
}
.viewer-summary-grid.live-summary span {
  color: var(--ink);
  font-weight: 750;
}
.viewer-section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
  padding: 9px 11px;
  border-bottom: 1px solid var(--soft-line);
  background: color-mix(in srgb, var(--panel-2) 82%, transparent);
}
.viewer-section-title-row h3 {
  margin: 0;
  padding: 0;
}
.viewer-section-note {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
}
.live-current {
  overflow: hidden;
  border-color: color-mix(in srgb, var(--accent) 44%, var(--soft-line));
}
.live-current-body {
  padding: 12px;
  background: color-mix(in srgb, var(--panel-2) 54%, transparent);
}
.live-stream-section {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--accent) 34%, var(--soft-line));
}
.tool-stream-shell {
  height: 100%;
  min-height: 0;
}
.live-tool-stream {
  min-height: 0;
  max-height: min(56dvh, 590px);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 10px;
  scroll-padding-block: 10px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 94%, transparent), color-mix(in srgb, var(--panel) 92%, transparent));
}
.is-tool-viewer .live-tool-stream {
  max-height: none;
  height: 100%;
}
.live-tool-detail {
  overflow: hidden;
  border-color: color-mix(in srgb, var(--soft-line) 88%, var(--accent));
  background: color-mix(in srgb, var(--bg) 88%, var(--panel));
  box-shadow: 2px 2px 0 var(--shadow);
}
.live-tool-detail + .live-tool-detail { margin-top: 9px; }
.live-tool-detail > summary {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 54px;
  padding: 9px 10px;
  border-bottom: 1px solid transparent;
  background: color-mix(in srgb, var(--panel-2) 70%, transparent);
}
.live-tool-detail > summary::before { display: none; }
.live-tool-detail[open] > summary {
  border-bottom-color: var(--soft-line);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent 68%),
    color-mix(in srgb, var(--panel-2) 84%, transparent);
}
.live-tool-detail.is-pending > summary {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%),
    var(--panel-2);
}
.live-tool-copy {
  min-width: 0;
}
.live-tool-detail summary b,
.live-tool-detail summary small {
  overflow-wrap: anywhere;
}
.live-tool-detail summary b {
  color: var(--accent);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.live-tool-detail summary small {
  color: var(--ink);
  font-size: 12px;
  font-weight: 560;
  line-height: 1.4;
}
.viewer-event-status {
  min-width: 54px;
  min-height: 22px;
  padding: 3px 6px;
  color: var(--muted);
  border-color: var(--soft-line);
  background: var(--bg);
  box-shadow: none;
}
.viewer-event-status.is-working,
.viewer-event-status.is-pending {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 58%, var(--line));
}
.viewer-event-status.is-error,
.viewer-event-status.is-failed,
.viewer-event-status.is-fail {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 58%, var(--line));
}
.viewer-event-status.is-warn,
.viewer-event-status.is-warning,
.viewer-event-status.is-needs_review {
  color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 58%, var(--line));
}
.viewer-tool-code {
  width: 100%;
  min-width: 0;
  max-height: 370px;
  margin: 0;
  padding: 13px 14px;
  overflow: auto;
  overscroll-behavior: contain;
  white-space: pre;
  tab-size: 2;
  border: 0;
  background: color-mix(in srgb, var(--bg) 96%, black 4%);
  color: var(--ink);
  font: 12px/1.58 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  scrollbar-gutter: stable;
}
.viewer-tool-code code {
  display: block;
  min-width: max-content;
  border: 0;
  background: transparent;
  padding: 0;
  color: inherit;
  font: inherit;
}
.tool-card-rich-summary > .viewer-rich-output {
  padding: 10px 13px;
  background: color-mix(in srgb, var(--accent) 5%, var(--panel));
}
.viewer-live-empty {
  min-height: 180px;
  border: 1px dashed color-mix(in srgb, var(--accent) 38%, var(--soft-line));
  background: color-mix(in srgb, var(--panel-2) 62%, transparent);
}
@keyframes viewerLivePulse {
  0%, 100% { opacity: .45; transform: scale(.82); }
  50% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .viewer-live-pill i,
  .viewer-working-chip i { animation: none; }
}
@media (max-width: 760px) {
  .r3-viewer-modal {
    width: calc(100vw - 10px);
    height: calc(100dvh - 10px);
    max-height: calc(100dvh - 10px);
    margin: 5px;
    box-shadow: 4px 4px 0 var(--shadow);
  }
  .viewer-head {
    min-height: 58px;
    padding: 9px 10px;
    align-items: center;
  }
  .viewer-head-actions { gap: 5px; }
  .viewer-live-pill { display: none; }
  .viewer-follow-btn { padding-inline: 7px; }
  .viewer-title-block strong { font-size: 15px; }
  .viewer-title-block span { font-size: 9px; }
  .viewer-body.is-live-viewer { padding: 8px; gap: 8px; }
  .viewer-summary-grid.live-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .viewer-summary-grid.live-summary > div { min-height: 48px; padding: 8px; }
  .viewer-section-title-row { min-height: 38px; padding: 8px 9px; }
  .viewer-section-note { display: none; }
  .live-tool-stream { padding: 7px; max-height: min(58dvh, 620px); }
  .live-tool-detail > summary {
    grid-template-columns: 28px minmax(0, 1fr);
    min-height: 50px;
    padding: 8px;
  }
  .live-tool-detail > summary .viewer-event-status { display: none; }
  .tool-card-icon { width: 28px; height: 28px; }
  .viewer-tool-code { max-height: 320px; padding: 11px; font-size: 11px; }
  .viewer-foot { min-height: 52px; padding: 8px 10px; }
  .viewer-foot-status { font-size: 10px; }
  .viewer-foot-actions .ui-btn { min-height: 34px; padding: 7px 9px; }
}
@media (max-width: 430px) {
  .viewer-foot-status { max-width: 48vw; }
  .viewer-follow-btn { font-size: 10px; }
  .viewer-head-actions .ui-btn { min-width: 0; }
}


/* Pass 209 — Agent V2 theme-native brain + current-task review */
.node-palette[data-node-type="Agent"] {
  position: relative;
  border-color: var(--accent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--agent) 84%, var(--panel)), color-mix(in srgb, var(--accent) 26%, var(--panel)));
  color: var(--ink);
  box-shadow: 3px 3px 0 var(--shadow), inset 0 2px 0 color-mix(in srgb, var(--check-gold) 78%, transparent);
  font-weight: 900;
  letter-spacing: .04em;
}
.node-palette[data-node-type="Agent"]::before { content: '◉'; color: var(--check-gold); text-shadow: 0 0 8px color-mix(in srgb, var(--check-gold) 62%, transparent); }
.node-palette[data-node-type="Agent"]::after {
  content: 'V2'; position: absolute; top: 4px; right: 5px; padding: 1px 4px;
  border: 1px solid var(--check-gold); border-radius: 1px; background: var(--panel); color: var(--check-gold);
  font-size: 8px; line-height: 1.3; letter-spacing: .1em;
}
.r3-node.is-agent-v2 {
  border-color: var(--accent);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--check-gold) 10%, transparent) 1px, transparent 1px),
    linear-gradient(color-mix(in srgb, var(--check-gold) 8%, transparent) 1px, transparent 1px),
    color-mix(in srgb, var(--panel) 96%, var(--agent) 4%);
  background-size: 18px 18px;
  box-shadow: 8px 8px 0 var(--shadow), inset 0 0 0 1px color-mix(in srgb, var(--check-gold) 30%, transparent);
}
.r3-node.is-agent-v2::after { content: ''; position: absolute; inset: -2px; pointer-events: none; border: 1px solid color-mix(in srgb, var(--check-gold) 72%, var(--line)); opacity: .72; }
.r3-node.is-agent-v2 .node-head {
  background: linear-gradient(90deg, color-mix(in srgb, var(--agent) 92%, #000), color-mix(in srgb, var(--accent) 42%, var(--agent)));
  color: #fff; box-shadow: inset 0 3px 0 var(--check-gold);
}
.r3-node.is-agent-v2 .node-kind {
  color: var(--accent-ink) !important; background: var(--check-gold) !important;
  border-color: color-mix(in srgb, var(--check-gold) 70%, var(--line)) !important;
  border-radius: 1px !important; letter-spacing: .08em; font-weight: 950;
}
.r3-node.is-agent-v2 .node-body { border-top-color: color-mix(in srgb, var(--check-gold) 52%, var(--line)); }
.r3-node.is-agent-v2.running { box-shadow: 8px 8px 0 var(--shadow), 0 0 0 2px color-mix(in srgb, var(--check-gold) 34%, transparent), 0 0 22px color-mix(in srgb, var(--accent) 26%, transparent); }
.option-fold-agent-v2-brain { border-color: color-mix(in srgb, var(--accent) 68%, var(--line)); overflow: hidden; border-radius: 1px; box-shadow: 2px 2px 0 var(--shadow); }
.option-fold-agent-v2-brain > summary {
  background: linear-gradient(90deg, color-mix(in srgb, var(--agent) 24%, var(--panel)), color-mix(in srgb, var(--check-gold) 9%, var(--panel)));
  border-bottom-color: color-mix(in srgb, var(--check-gold) 48%, var(--line));
}
.agent-v2-brain-icon { color: var(--check-gold); text-shadow: 0 0 7px color-mix(in srgb, var(--check-gold) 55%, transparent); }
.agent-v2-brain-pulse { width: 7px; height: 7px; margin-left: auto; border-radius: 50%; background: var(--check-gold); box-shadow: 0 0 0 0 color-mix(in srgb, var(--check-gold) 55%, transparent); animation: agentV2BrainPulse 1.8s infinite; }
@keyframes agentV2BrainPulse { 0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--check-gold) 45%, transparent); } 50% { box-shadow: 0 0 0 7px transparent; } }
.agent-v2-brain { display: grid; gap: 8px; }
.agent-v2-brain-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px;
  border: 1px solid var(--line); border-radius: 1px; background: color-mix(in srgb, var(--panel-2) 84%, var(--check-gold) 6%);
  box-shadow: inset 3px 0 0 var(--check-gold);
}
.agent-v2-brain-head div { display: grid; gap: 2px; min-width: 0; }
.agent-v2-brain-head b { font-size: 13px; }
.agent-v2-brain-head small { color: var(--muted); }
.agent-v2-brain-head > span { flex: 0 0 auto; padding: 3px 7px; border: 1px solid var(--accent); border-radius: 1px; background: var(--panel); color: var(--accent); font-size: 9px; font-weight: 900; }
.agent-v2-brain-metrics { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px; }
.agent-v2-brain-metrics span { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 6px 7px; border: 1px solid var(--soft-line); border-radius: 1px; font-size: 9px; background: var(--panel); }
.agent-v2-brain-metrics b { color: var(--check-gold); text-transform: uppercase; }
.agent-v2-brain-metrics .agent-v2-metric-wide { grid-column: 1 / -1; }
.agent-v2-brain-metrics .is-resolved { border-color: var(--output); }
.agent-v2-brain-metrics .is-needs_review { border-color: var(--danger); }
.agent-v2-current-task {
  position: relative; display: grid; gap: 5px; padding: 10px 10px 10px 14px;
  border: 1px solid color-mix(in srgb, var(--check-gold) 72%, var(--line)); border-radius: 1px;
  background: color-mix(in srgb, var(--check-gold) 7%, var(--panel)); overflow: hidden;
}
.agent-v2-current-task::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--check-gold); }
.agent-v2-current-task > small { color: var(--muted); text-transform: uppercase; letter-spacing: .11em; font-size: 9px; }
.agent-v2-current-task > b { line-height: 1.35; }
.agent-v2-current-task > span { justify-self: start; padding: 2px 6px; border: 1px solid var(--soft-line); border-radius: 1px; font-size: 9px; text-transform: uppercase; font-weight: 900; background: var(--panel-2); }
.agent-v2-current-task > span.is-working { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.agent-v2-current-task > span.is-completed { background: var(--output); color: #fff; border-color: var(--output); }
.agent-v2-current-task > span.is-blocked { background: var(--danger); color: #fff; border-color: var(--danger); }
.agent-v2-current-task p { margin: 0; font-size: 10px; color: var(--muted); }
.agent-v2-tree,.agent-v2-subpanel { border: 1px solid var(--soft-line); border-radius: 1px; background: var(--panel); overflow: hidden; }
.agent-v2-tree > summary,.agent-v2-subpanel > summary { cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 9px; background: color-mix(in srgb, var(--panel-2) 88%, var(--check-gold) 3%); font-weight: 850; font-size: 10px; }
.agent-v2-tree > summary small { margin-left: auto; color: var(--muted); font-size: 9px; font-weight: 600; text-align: right; }
.agent-v2-subpanel > summary span { padding: 1px 5px; border: 1px solid var(--soft-line); border-radius: 1px; background: var(--panel); color: var(--muted); font-size: 8px; }
.agent-v2-tree ol,.agent-v2-subpanel ul { list-style: none; margin: 0; padding: 0 9px 9px; display: grid; gap: 6px; }
.agent-v2-task { display: grid; grid-template-columns: 15px 8px minmax(0,1fr); align-items: start; gap: 5px; }
.agent-v2-tree-joint { color: var(--muted); font-family: monospace; }
.agent-v2-task-dot { width: 8px; height: 8px; margin-top: 4px; border-radius: 50%; border: 2px solid var(--accent); background: var(--panel); }
.agent-v2-task.is-working .agent-v2-task-dot { background: var(--check-gold); border-color: var(--check-gold); box-shadow: 0 0 7px color-mix(in srgb, var(--check-gold) 45%, transparent); }
.agent-v2-task.is-completed .agent-v2-task-dot { background: var(--output); border-color: var(--output); }
.agent-v2-task.is-blocked .agent-v2-task-dot { background: var(--danger); border-color: var(--danger); }
.agent-v2-task-copy { display: grid; gap: 2px; min-width: 0; }
.agent-v2-task-copy b { font-size: 10px; line-height: 1.35; }
.agent-v2-task-copy small { color: var(--muted); font-size: 9px; }
.agent-v2-subpanel li { position: relative; padding-left: 11px; font-size: 10px; line-height: 1.42; }
.agent-v2-subpanel li::before { content: '›'; position: absolute; left: 0; color: var(--check-gold); font-weight: 900; }
.agent-v2-turns { display: grid; gap: 6px; padding: 0 8px 8px; max-height: 310px; overflow: auto; }
.agent-v2-turn { display: grid; gap: 4px; padding: 7px; border: 1px solid var(--soft-line); border-radius: 1px; background: color-mix(in srgb, var(--panel) 96%, var(--check-gold) 2%); }
.agent-v2-turn header { display: flex; justify-content: space-between; gap: 8px; font-size: 9px; }
.agent-v2-turn header b { color: var(--check-gold); }
.agent-v2-turn header span { color: var(--muted); text-align: right; }
.agent-v2-turn p,.agent-v2-turn small,.agent-v2-turn em { margin: 0; font-size: 10px; line-height: 1.4; }
.agent-v2-turn small { color: var(--muted); }
.agent-v2-turn em { color: var(--danger); font-style: normal; }
.agent-v2-empty { padding: 8px 0; color: var(--muted); font-size: 10px; }
.agent-v2-task-transition,.agent-v2-resolution { display: grid; gap: 4px; padding: 8px; border: 1px solid var(--soft-line); border-radius: 1px; background: var(--panel); font-size: 10px; }
.agent-v2-task-transition b,.agent-v2-resolution b { color: var(--check-gold); text-transform: uppercase; letter-spacing: .07em; font-size: 9px; }
.agent-v2-task-transition small { color: var(--muted); }
.agent-v2-task-transition.is-completed,.agent-v2-resolution.is-resolved { border-color: var(--output); }
.agent-v2-task-transition.is-blocked,.agent-v2-resolution.is-needs_review { border-color: var(--danger); }

/* Pass 247 — truthful model-input breakdown + controller-enforced closeout view */
.agent-v2-brain-head.is-closeout { border-color: color-mix(in srgb, var(--output) 72%, var(--line)); box-shadow: inset 3px 0 0 var(--output); }
.agent-v2-brain-head.is-closeout > span { border-color: var(--output); color: var(--output); }
.agent-v2-model-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 5px; }
.agent-v2-model-metrics > span { min-width: 0; display: grid; gap: 2px; padding: 7px 6px; border: 1px solid var(--soft-line); background: var(--panel); text-align: center; }
.agent-v2-model-metrics b { color: var(--check-gold); font-size: 11px; overflow-wrap: anywhere; }
.agent-v2-model-metrics small { color: var(--muted); font-size: 8px; text-transform: uppercase; letter-spacing: .05em; }
.agent-v2-decision-card { display: grid; gap: 7px; padding: 10px; border: 1px solid color-mix(in srgb, var(--accent) 65%, var(--line)); background: color-mix(in srgb, var(--accent) 6%, var(--panel)); box-shadow: inset 3px 0 0 var(--accent); }
.agent-v2-decision-card.is-closeout { border-color: color-mix(in srgb, var(--output) 72%, var(--line)); background: color-mix(in srgb, var(--output) 7%, var(--panel)); box-shadow: inset 3px 0 0 var(--output); }
.agent-v2-decision-card.is-blocked { border-color: color-mix(in srgb, var(--danger) 72%, var(--line)); background: color-mix(in srgb, var(--danger) 7%, var(--panel)); box-shadow: inset 3px 0 0 var(--danger); }
.agent-v2-decision-card header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.agent-v2-decision-card header small { color: var(--muted); font-size: 8px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.agent-v2-decision-card header b { color: var(--accent); font-size: 11px; text-transform: uppercase; }
.agent-v2-decision-card.is-closeout header b { color: var(--output); }
.agent-v2-decision-card.is-blocked header b { color: var(--danger); }
.agent-v2-decision-card p,.agent-v2-lane-note { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.45; }
.agent-v2-closeout-note { color: var(--output); font-size: 9px; line-height: 1.4; }
.agent-v2-blocker-note { color: var(--danger); font-size: 9px; line-height: 1.4; }
.agent-v2-action-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.agent-v2-action-chip { padding: 3px 6px; border: 1px solid color-mix(in srgb, var(--accent) 68%, var(--soft-line)); background: color-mix(in srgb, var(--accent) 7%, var(--panel-2)); color: var(--ink); font: 800 8px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace; overflow-wrap: anywhere; }
.agent-v2-action-chip.is-done { border-color: var(--output); background: color-mix(in srgb, var(--output) 12%, var(--panel)); color: var(--output); }
.agent-v2-action-chip.is-retired { border-color: var(--soft-line); background: var(--panel); color: var(--muted); text-decoration: line-through; opacity: .76; }
.agent-v2-action-chip.is-muted { color: var(--muted); border-color: var(--soft-line); }
.agent-v2-model-panel { border: 1px solid var(--soft-line); background: var(--panel); overflow: hidden; }
.agent-v2-model-panel > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 9px; background: color-mix(in srgb, var(--panel-2) 90%, var(--check-gold) 2%); }
.agent-v2-model-panel > summary::-webkit-details-marker { display: none; }
.agent-v2-model-panel > summary b { font-size: 10px; }
.agent-v2-model-panel > summary span { padding: 2px 5px; border: 1px solid var(--soft-line); color: var(--muted); font-size: 8px; text-transform: uppercase; }
.agent-v2-model-panel.is-runtime-only { border-style: dashed; }
.agent-v2-model-panel.is-runtime-only > summary { background: var(--panel); }
.agent-v2-view-list { list-style: none; display: grid; gap: 0; margin: 0; padding: 0; }
.agent-v2-view-list > li { display: grid; grid-template-columns: 8px minmax(0,1fr) auto; gap: 7px; align-items: start; padding: 8px 9px; border-top: 1px solid var(--soft-line); }
.agent-v2-view-list > li:first-child { border-top: 0; }
.agent-v2-view-list > li > div { display: grid; gap: 2px; min-width: 0; }
.agent-v2-view-list b { font-size: 9px; }
.agent-v2-view-list small { color: var(--muted); font-size: 8px; line-height: 1.4; }
.agent-v2-view-list em { color: var(--muted); font-size: 8px; font-style: normal; white-space: nowrap; }
.agent-v2-view-dot { width: 7px; height: 7px; margin-top: 3px; border-radius: 50%; background: var(--check-gold); box-shadow: 0 0 0 2px color-mix(in srgb, var(--check-gold) 18%, transparent); }
.agent-v2-view-list > .agent-v2-view-empty { display: block; color: var(--muted); font-size: 9px; }
.agent-v2-panel-body { display: grid; gap: 8px; padding: 9px; border-top: 1px solid var(--soft-line); }
.agent-v2-panel-body p { display: grid; gap: 2px; margin: 0; color: var(--muted); font-size: 9px; line-height: 1.45; overflow-wrap: anywhere; }
.agent-v2-panel-body p strong { color: var(--check-gold); font-size: 8px; letter-spacing: .07em; text-transform: uppercase; }
.agent-v2-panel-body ul { margin: 0; padding-left: 16px; display: grid; gap: 4px; }
.agent-v2-panel-body li { color: var(--muted); font-size: 9px; line-height: 1.4; }
.agent-v2-retired-chips { padding: 9px 9px 5px; }
.agent-v2-retired-chips > small { color: var(--muted); font-size: 9px; }
.agent-v2-lane-note { padding: 0 9px 9px; }
@media (max-width:720px) {
  .agent-v2-brain-metrics { grid-template-columns: 1fr 1fr; }
  .agent-v2-model-metrics { grid-template-columns: 1fr 1fr; }
  .agent-v2-tree > summary { align-items: flex-start; }
  .agent-v2-tree > summary small { max-width: 150px; }
}


/* R3D3 BUILD: pass210 Agent V2 active-state clarity + model-cost badge placement — 2026-07-14
   Agent V2 must look actively engaged while running, never disabled/dimmed. Paid-model
   markers stay pinned to the top-right of each tool card instead of entering the grid flow. */
.r3-node.is-agent-v2.running,
html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .r3-node.is-agent-v2.running {
  opacity: 1 !important;
  filter: none !important;
  border-color: color-mix(in srgb, var(--check-gold) 78%, var(--accent)) !important;
  animation: agentV2ActiveNodePulse 1.08s ease-in-out infinite !important;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--surface-raised, var(--panel-2)) 90%, var(--check-gold) 4%),
      color-mix(in srgb, var(--panel) 96%, var(--accent) 4%)) !important;
}

.r3-node.is-agent-v2.running .node-head,
html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .r3-node.is-agent-v2.running .node-head {
  opacity: 1 !important;
  filter: none !important;
  color: #fff !important;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--agent) 92%, #000),
      color-mix(in srgb, var(--accent) 58%, var(--agent)),
      color-mix(in srgb, var(--check-gold) 28%, var(--agent)),
      color-mix(in srgb, var(--agent) 92%, #000)) !important;
  background-size: 230% 100% !important;
  animation: agentV2ActiveHeadSweep 1.5s linear infinite !important;
  box-shadow:
    inset 0 3px 0 var(--check-gold),
    inset 0 -1px 0 color-mix(in srgb, var(--check-gold) 42%, var(--line)) !important;
}

.r3-node.is-agent-v2.running .node-head *,
.r3-node.is-agent-v2.running .node-body,
.r3-node.is-agent-v2.running .node-body *,
.r3-node.is-agent-v2.running .node-tools,
.r3-node.is-agent-v2.running .node-tools * {
  opacity: 1 !important;
  filter: none !important;
}

.r3-node.is-agent-v2.running .node-title {
  color: #fff !important;
  text-shadow: 0 0 9px color-mix(in srgb, var(--check-gold) 46%, transparent) !important;
}

.r3-node.is-agent-v2.running .node-timer {
  color: color-mix(in srgb, var(--check-gold) 90%, #fff 10%) !important;
  border-color: color-mix(in srgb, var(--check-gold) 72%, var(--line)) !important;
}

.r3-node.is-agent-v2.running .node-kind {
  color: var(--accent-ink, #17130a) !important;
  background: var(--check-gold) !important;
  border-color: color-mix(in srgb, var(--check-gold) 72%, var(--line)) !important;
  text-shadow: none !important;
}

.r3-node.is-agent-v2.running .node-head-btn {
  color: #fff !important;
  border-color: color-mix(in srgb, var(--check-gold) 62%, rgba(255,255,255,.48)) !important;
  background: color-mix(in srgb, var(--panel) 68%, transparent) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--check-gold) 16%, transparent) !important;
}

.r3-node.is-agent-v2.running .node-head-btn:hover,
.r3-node.is-agent-v2.running .node-head-btn:focus-visible {
  background: color-mix(in srgb, var(--check-gold) 28%, var(--panel)) !important;
  color: var(--check-gold-ink, #17130a) !important;
}

.r3-node.is-agent-v2.running .node-body {
  color: var(--ink) !important;
  border-top-color: color-mix(in srgb, var(--check-gold) 58%, var(--line)) !important;
  background: color-mix(in srgb, var(--panel) 94%, var(--check-gold) 3%) !important;
}

.r3-node.is-agent-v2.running .node-body-text,
.r3-node.is-agent-v2.running .bubble-copy b {
  color: var(--ink) !important;
}

.r3-node.is-agent-v2.running .bubble-copy em {
  color: color-mix(in srgb, var(--muted) 72%, var(--ink) 28%) !important;
}

.r3-node.is-agent-v2.running::before {
  opacity: .94 !important;
  border-color: color-mix(in srgb, var(--check-gold) 82%, var(--accent)) !important;
  box-shadow: 0 0 18px color-mix(in srgb, var(--check-gold) 30%, transparent) !important;
}

.r3-node.is-agent-v2.running::after {
  opacity: 1 !important;
  border-color: color-mix(in srgb, var(--check-gold) 86%, var(--line)) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--check-gold) 20%, transparent) !important;
}

@keyframes agentV2ActiveNodePulse {
  0%, 100% {
    transform: translateY(0);
    box-shadow:
      8px 8px 0 var(--shadow),
      0 0 0 2px color-mix(in srgb, var(--check-gold) 38%, transparent),
      0 0 22px color-mix(in srgb, var(--accent) 22%, transparent);
  }
  50% {
    transform: translateY(-1px);
    box-shadow:
      10px 10px 0 var(--shadow),
      0 0 0 3px color-mix(in srgb, var(--check-gold) 54%, transparent),
      0 0 34px color-mix(in srgb, var(--check-gold) 30%, transparent);
  }
}

@keyframes agentV2ActiveHeadSweep {
  from { background-position: 0% 50%; }
  to { background-position: 230% 50%; }
}

.r3-node .tool-bubble {
  position: relative !important;
}

.r3-node .tool-bubble.is-model-call {
  padding-right: 30px !important;
}

.r3-node .tool-bubble .bubble-cost-badge {
  position: absolute !important;
  top: 6px !important;
  right: 6px !important;
  z-index: 6 !important;
  display: grid !important;
  place-items: center !important;
  width: 17px !important;
  height: 17px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid color-mix(in srgb, var(--check-gold) 76%, var(--line)) !important;
  border-radius: 1px !important;
  background: color-mix(in srgb, var(--check-gold) 20%, var(--panel)) !important;
  color: var(--check-gold) !important;
  box-shadow: 2px 2px 0 var(--shadow) !important;
  font-size: 10px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  pointer-events: none !important;
}

.r3-node .tool-bubble.is-pending .bubble-cost-badge {
  animation: agentV2CostBadgePulse 1s ease-in-out infinite !important;
}

@keyframes agentV2CostBadgePulse {
  0%, 100% { transform: scale(1); box-shadow: 2px 2px 0 var(--shadow); }
  50% { transform: scale(1.08); box-shadow: 2px 2px 0 var(--shadow), 0 0 9px color-mix(in srgb, var(--check-gold) 44%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
  .r3-node.is-agent-v2.running,
  .r3-node.is-agent-v2.running .node-head,
  .r3-node .tool-bubble.is-pending .bubble-cost-badge {
    animation: none !important;
  }
}


/* R3D3 BUILD: pass211 Agent V2 visible running shell — 2026-07-14
   Keep the node's content in the normal paint layer while running. Animate only
   decorative affordances; never transform/filter the whole node inside the
   already-transformed canvas because some browsers drop descendant layers. */
.r3-node.is-agent-v2.running,
html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .r3-node.is-agent-v2.running {
  animation: none !important;
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
  isolation: isolate;
  overflow: visible !important;
  box-shadow:
    8px 8px 0 var(--shadow),
    0 0 0 2px color-mix(in srgb, var(--check-gold) 44%, transparent),
    0 0 28px color-mix(in srgb, var(--check-gold) 24%, transparent) !important;
}

.r3-node.is-agent-v2.running > .node-head,
.r3-node.is-agent-v2.running > .node-body,
.r3-node.is-agent-v2.running > .node-tools {
  position: relative;
  z-index: 3;
  visibility: visible !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}

.r3-node.is-agent-v2.running > .node-body,
.r3-node.is-agent-v2.running > .node-tools {
  display: block;
}

.r3-node.is-agent-v2.running > .node-tools {
  display: grid;
}

.r3-node.is-agent-v2.running > .node-port,
.r3-node.is-agent-v2.running > .node-status {
  z-index: 5;
  visibility: visible !important;
  opacity: 1 !important;
}

.r3-node.is-agent-v2.running::before {
  content: "" !important;
  position: absolute !important;
  inset: -6px !important;
  z-index: 0 !important;
  border: 2px solid color-mix(in srgb, var(--check-gold) 82%, var(--accent)) !important;
  background: transparent !important;
  opacity: .9 !important;
  pointer-events: none !important;
  transform: none !important;
  animation: agentV2RunningRing 1.15s ease-in-out infinite !important;
}

.r3-node.is-agent-v2.running::after {
  content: "" !important;
  position: absolute !important;
  inset: -2px !important;
  z-index: 0 !important;
  border: 1px solid color-mix(in srgb, var(--check-gold) 88%, var(--line)) !important;
  background: transparent !important;
  opacity: 1 !important;
  pointer-events: none !important;
  transform: none !important;
  animation: none !important;
}

.r3-node.is-agent-v2.running .node-head {
  animation: agentV2ActiveHeadSweep 1.5s linear infinite !important;
}

@keyframes agentV2RunningRing {
  0%, 100% {
    opacity: .72;
    box-shadow: 0 0 10px color-mix(in srgb, var(--check-gold) 20%, transparent);
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 24px color-mix(in srgb, var(--check-gold) 34%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .r3-node.is-agent-v2.running::before,
  .r3-node.is-agent-v2.running .node-head {
    animation: none !important;
  }
}

/* R3D3 BUILD: pass212 Agent V2 tooltip layout fix — 2026-07-14
   Hover help is an overlay, never part of the node's running layout. Pass 211
   accidentally forced it into the normal flex flow, expanding the node and
   collapsing tooltip columns into vertical text. */
.r3-node.is-agent-v2.running > .node-hover-tip {
  position: absolute !important;
  left: 12px !important;
  top: calc(100% + 10px) !important;
  z-index: 2147483000 !important;
  display: grid !important;
  width: min(350px, 74vw) !important;
  visibility: hidden !important;
  opacity: 0 !important;
  transform: translateY(4px) !important;
  pointer-events: none !important;
}

@media (hover: hover) and (pointer: fine) {
  .r3-node.is-agent-v2.running:hover > .node-hover-tip,
  .r3-node.is-agent-v2.running:focus-within > .node-hover-tip {
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
  }

  .r3-node.is-agent-v2.running:has(.node-head-tools:hover) > .node-hover-tip,
  .r3-node.is-agent-v2.running:has(.node-head-tools:focus-within) > .node-hover-tip,
  .r3-node.is-agent-v2.running:has(.node-port:hover) > .node-hover-tip,
  .r3-node.is-agent-v2.running:has(.tool-bubble:hover) > .node-hover-tip,
  .r3-node.is-agent-v2.running:has(.tool-bubble:focus-visible) > .node-hover-tip {
    visibility: hidden !important;
    opacity: 0 !important;
    transform: translateY(4px) !important;
  }
}

@media (max-width: 720px) {
  .r3-node.is-agent-v2.running > .node-hover-tip {
    display: none !important;
  }
}



/* R3D3 BUILD: pass213 live tool viewer component contract — 2026-07-14
   The live tool viewer now renders article > button + content, not
   details > summary. Keep the entire component styled from its actual DOM
   contract so browser-default button rendering can never leak into the UI. */
.r3-viewer-modal .live-tool-detail {
  display: block;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--soft-line) 88%, var(--accent));
  background: color-mix(in srgb, var(--bg) 88%, var(--panel));
  box-shadow: 2px 2px 0 var(--shadow);
}

.r3-viewer-modal .live-tool-toggle {
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-width: 0;
  min-height: 54px;
  margin: 0;
  padding: 9px 10px;
  border: 0;
  border-radius: 0;
  outline: 0;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 5%, transparent), transparent 72%),
    color-mix(in srgb, var(--panel-2) 78%, var(--panel));
  color: var(--ink);
  box-shadow: none;
  font: inherit;
  line-height: 1.2;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
}

.r3-viewer-modal .live-tool-toggle:hover {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 72%),
    color-mix(in srgb, var(--panel-2) 88%, var(--panel));
}

.r3-viewer-modal .live-tool-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -3px;
}

.r3-viewer-modal .live-tool-detail.is-pending .live-tool-toggle {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 15%, transparent), transparent 72%),
    color-mix(in srgb, var(--panel-2) 92%, var(--panel));
}

.r3-viewer-modal .live-tool-toggle[aria-expanded="true"] {
  border-bottom: 1px solid var(--soft-line);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 9%, transparent), transparent 72%),
    color-mix(in srgb, var(--panel-2) 86%, var(--panel));
}

.r3-viewer-modal .live-tool-copy {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
}

.r3-viewer-modal .live-tool-copy b,
.r3-viewer-modal .live-tool-copy small {
  display: block;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.r3-viewer-modal .live-tool-copy b {
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.r3-viewer-modal .live-tool-copy small {
  color: var(--ink);
  font-size: 12px;
  font-weight: 560;
  line-height: 1.35;
}

.r3-viewer-modal .live-tool-toggle .tool-card-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
  background: color-mix(in srgb, var(--bg) 84%, var(--panel));
  color: var(--ink);
  box-shadow: 1px 1px 0 var(--shadow);
  font-size: 14px;
  line-height: 1;
}

.r3-viewer-modal .live-tool-toggle .viewer-event-status {
  align-self: center;
  justify-self: end;
  margin: 0;
  white-space: nowrap;
}

.r3-viewer-modal .live-tool-chevron {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1;
  transform: rotate(-90deg);
  transition: transform .14s ease, color .14s ease;
}

.r3-viewer-modal .live-tool-toggle[aria-expanded="true"] .live-tool-chevron {
  color: var(--accent);
  transform: rotate(0deg);
}

.r3-viewer-modal .live-tool-content {
  display: block;
  min-width: 0;
  overflow: hidden;
  background: color-mix(in srgb, var(--panel) 96%, var(--bg));
}

.r3-viewer-modal .live-tool-content[hidden] {
  display: none !important;
}

.r3-viewer-modal .live-tool-content > :first-child { margin-top: 0; }
.r3-viewer-modal .live-tool-content > :last-child { margin-bottom: 0; }

/* Retire the stale details/summary-only styling path without affecting any
   actual details widgets elsewhere in the app. */
.r3-viewer-modal .live-tool-detail > summary {
  display: none !important;
}

@media (max-width: 760px) {
  .r3-viewer-modal .live-tool-toggle {
    grid-template-columns: 28px minmax(0, 1fr) 16px;
    gap: 7px;
    min-height: 50px;
    padding: 8px;
  }

  .r3-viewer-modal .live-tool-toggle .tool-card-icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
  }

  .r3-viewer-modal .live-tool-copy {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .r3-viewer-modal .live-tool-toggle .viewer-event-status {
    display: none;
  }
}


/* R3D3 BUILD: pass214 persistent live-tool expansion — 2026-07-14
   Expansion has one visual source of truth: .is-open. The JS keeps that
   state in a persistent event-key set across live rerenders, so the detail
   body cannot remain hidden while its chevron says expanded. */
.r3-viewer-modal .live-tool-detail > .live-tool-content {
  display: none !important;
  min-width: 0;
  min-height: 0;
  border-top: 1px solid var(--soft-line);
  background: color-mix(in srgb, var(--panel) 96%, var(--bg));
}

.r3-viewer-modal .live-tool-detail.is-open > .live-tool-content {
  display: block !important;
}

.r3-viewer-modal .live-tool-detail.is-open {
  overflow: visible;
  border-color: color-mix(in srgb, var(--accent) 58%, var(--soft-line));
  box-shadow: 3px 3px 0 var(--shadow);
}

.r3-viewer-modal .live-tool-detail.is-open > .live-tool-toggle {
  position: sticky;
  top: 0;
  z-index: 2;
}

.r3-viewer-modal .live-tool-content > .viewer-rich-output,
.r3-viewer-modal .live-tool-content > .viewer-tool-code {
  max-height: min(48dvh, 480px);
}

.r3-viewer-modal .live-tool-detail {
  scroll-margin-block: 8px;
}


/* R3D3 BUILD: pass215 live tool row minimum-height contract — 2026-07-14
   The activity stream is an ordered vertical list, not a height-sharing grid.
   Flex rows keep every collapsed event at its readable intrinsic height while
   the stream itself scrolls, so opening one event can never compress siblings. */
.r3-viewer-modal .live-tool-stream {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  align-content: flex-start;
  gap: 10px;
}

.r3-viewer-modal .live-tool-detail {
  flex: 0 0 auto;
  width: 100%;
  min-height: 54px !important;
  height: auto !important;
  max-height: none;
  margin: 0 !important;
  contain: none;
}

.r3-viewer-modal .live-tool-toggle {
  flex: 0 0 auto;
  min-height: 54px !important;
  height: auto !important;
}

.r3-viewer-modal .live-tool-detail:not(.is-open) > .live-tool-content {
  display: none !important;
}

.r3-viewer-modal .live-tool-detail.is-open > .live-tool-content {
  flex: 0 0 auto;
}

@media (max-width: 760px) {
  .r3-viewer-modal .live-tool-detail,
  .r3-viewer-modal .live-tool-toggle {
    min-height: 50px !important;
  }
}


/* Pass 218: inspectable ordered Agent V2 task ledger */
.agent-v2-task { grid-template-columns: 15px 8px minmax(0,1fr); }
.agent-v2-task-record { min-width: 0; border: 1px solid transparent; border-radius: 1px; overflow: hidden; }
.agent-v2-task-record[open] { border-color: var(--soft-line); background: color-mix(in srgb, var(--panel-2) 82%, var(--panel)); }
.agent-v2-task-record > summary { list-style: none; cursor: pointer; display: flex; align-items: flex-start; gap: 8px; min-width: 0; padding: 2px 4px 5px; }
.agent-v2-task-record > summary::-webkit-details-marker { display: none; }
.agent-v2-task-record > summary .agent-v2-task-copy { flex: 1 1 auto; }
.agent-v2-task-chevron { flex: 0 0 auto; color: var(--muted); font-size: 11px; transition: transform .16s ease; }
.agent-v2-task-record[open] .agent-v2-task-chevron { transform: rotate(180deg); color: var(--check-gold); }
.agent-v2-task-record-body { display: grid; gap: 7px; padding: 7px 8px 9px; border-top: 1px solid var(--soft-line); }
.agent-v2-task-record-body > div { display: grid; gap: 3px; }
.agent-v2-task-record-body b { color: var(--check-gold); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }
.agent-v2-task-record-body p { margin: 0; color: var(--ink); font-size: 9px; line-height: 1.45; overflow-wrap: anywhere; }
.agent-v2-task-evidence { margin: 0 !important; padding: 0 0 0 13px !important; display: grid !important; gap: 3px !important; list-style: square !important; }
.agent-v2-task-evidence li { color: var(--muted); font-size: 9px; line-height: 1.4; overflow-wrap: anywhere; }
.agent-v2-task.is-completed .agent-v2-task-record[open] { border-color: color-mix(in srgb, var(--output) 64%, var(--soft-line)); }
.agent-v2-task.is-blocked .agent-v2-task-record[open] { border-color: color-mix(in srgb, var(--danger) 68%, var(--soft-line)); }
.agent-v2-task.is-working .agent-v2-task-record[open] { border-color: color-mix(in srgb, var(--check-gold) 70%, var(--soft-line)); }


/* R3D3 BUILD: pass219 stable live UI + mobile Agent V2 — 2026-07-15
   Invariants:
   - user-controlled disclosure state survives live option-panel rerenders;
   - historical tool rows never share/shrink available height;
   - mobile node controls remain inside the node shell. */

/* Brain task records remain readable while their DOM is refreshed. */
.option-fold-agent-v2-brain details[data-disclosure-key] {
  overflow-anchor: none;
}
.agent-v2-tree > ol {
  min-width: 0;
}
.agent-v2-task,
.agent-v2-task-record,
.agent-v2-task-copy {
  min-width: 0;
}
.agent-v2-task-record > summary {
  touch-action: manipulation;
}

/* Live tool history is an intrinsic-height scroll list. No past event may
   consume a fractional track or shrink when a new event arrives. */
.r3-viewer-modal .viewer-body.is-tool-viewer .live-stream-section,
.r3-viewer-modal .viewer-body.is-live-viewer .live-stream-section {
  min-height: 0 !important;
  overflow: hidden !important;
}
.r3-viewer-modal .viewer-body.is-tool-viewer .live-tool-stream,
.r3-viewer-modal .viewer-body.is-live-viewer .live-tool-stream {
  display: flex !important;
  flex-flow: column nowrap !important;
  align-items: stretch !important;
  align-content: flex-start !important;
  gap: 10px !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.r3-viewer-modal .live-tool-detail,
.r3-viewer-modal .live-tool-detail.is-open,
.r3-viewer-modal .live-tool-detail.is-pending {
  display: block !important;
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  inline-size: 100% !important;
  block-size: auto !important;
  min-block-size: 54px !important;
  max-block-size: none !important;
  contain: none !important;
  content-visibility: visible !important;
}
.r3-viewer-modal .live-tool-toggle {
  display: grid !important;
  flex: 0 0 auto !important;
  inline-size: 100% !important;
  block-size: auto !important;
  min-block-size: 54px !important;
  max-block-size: none !important;
}
.r3-viewer-modal .live-tool-content {
  inline-size: 100% !important;
  max-inline-size: 100% !important;
  min-width: 0 !important;
}
.r3-viewer-modal .live-tool-content > .viewer-tool-code,
.r3-viewer-modal .live-tool-content > .viewer-rich-output {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Canvas tool history follows the same non-shrinking rule. */
.r3-node.is-agent-v2 .node-tools {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  align-content: flex-start !important;
}
.r3-node.is-agent-v2 .node-tools > .tool-bubble {
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  min-height: 42px !important;
}

@media (max-width: 760px) {
  .r3-viewer-modal {
    padding: max(6px, env(safe-area-inset-top, 0px)) 6px max(6px, env(safe-area-inset-bottom, 0px)) !important;
  }
  .r3-viewer-modal .viewer-card {
    width: 100% !important;
    max-width: none !important;
    height: min(94dvh, calc(100dvh - 12px)) !important;
    max-height: calc(100dvh - 12px) !important;
  }
  .r3-viewer-modal .viewer-body.is-tool-viewer,
  .r3-viewer-modal .viewer-body.is-live-viewer {
    padding: 8px !important;
    gap: 8px !important;
  }
  .r3-viewer-modal .live-tool-stream {
    gap: 8px !important;
    padding: 7px !important;
  }
  .r3-viewer-modal .live-tool-detail,
  .r3-viewer-modal .live-tool-toggle {
    min-block-size: 58px !important;
  }
  .r3-viewer-modal .live-tool-toggle {
    grid-template-columns: 32px minmax(0, 1fr) 18px !important;
    gap: 8px !important;
    padding: 9px !important;
  }
  .r3-viewer-modal .live-tool-copy {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 3px !important;
  }
  .r3-viewer-modal .live-tool-copy b,
  .r3-viewer-modal .live-tool-copy small {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
  .r3-viewer-modal .live-tool-copy small {
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden !important;
  }
  .r3-viewer-modal .live-tool-detail.is-open .live-tool-copy small {
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }
  .r3-viewer-modal .live-tool-content > .viewer-tool-code,
  .r3-viewer-modal .live-tool-content > .viewer-rich-output {
    max-height: min(42dvh, 420px) !important;
    overflow: auto !important;
  }
  .r3-viewer-modal .live-tool-content > .viewer-tool-code,
  .r3-viewer-modal .live-tool-content > .viewer-tool-code code {
    white-space: pre-wrap !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  /* Agent V2 gets a dedicated mobile header grid instead of squeezing title,
     timer, cost and five controls into one row. */
  html.r3-mobile-device .app-shell:not(.chat-mode) .r3-node.is-agent-v2 {
    width: min(306px, calc(100vw - 28px)) !important;
    max-height: min(68svh, 500px) !important;
  }
  html.r3-mobile-device .app-shell:not(.chat-mode) .r3-node.is-agent-v2 .node-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto auto auto !important;
    grid-template-areas:
      "title title"
      "role role"
      "timer cost"
      "tools tools" !important;
    min-height: 96px !important;
    height: auto !important;
    gap: 4px 7px !important;
    padding: 7px 8px !important;
    overflow: hidden !important;
  }
  html.r3-mobile-device .app-shell:not(.chat-mode) .r3-node.is-agent-v2 .node-head:not(:has(.node-runtime-role)) {
    grid-template-rows: auto auto auto !important;
    grid-template-areas:
      "title title"
      "timer cost"
      "tools tools" !important;
    min-height: 72px !important;
  }
  html.r3-mobile-device .app-shell:not(.chat-mode) .r3-node.is-agent-v2 .node-title-wrap {
    grid-area: title !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  html.r3-mobile-device .app-shell:not(.chat-mode) .r3-node.is-agent-v2 .node-title {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }
  html.r3-mobile-device .app-shell:not(.chat-mode) .r3-node.is-agent-v2 .node-runtime-role {
    grid-area: role !important;
  }
  html.r3-mobile-device .app-shell:not(.chat-mode) .r3-node.is-agent-v2 .node-timer:not(.node-cost) {
    grid-area: timer !important;
    justify-self: start !important;
    max-width: 100% !important;
  }
  html.r3-mobile-device .app-shell:not(.chat-mode) .r3-node.is-agent-v2 .node-cost {
    grid-area: cost !important;
    justify-self: end !important;
    max-width: 100% !important;
  }
  html.r3-mobile-device .app-shell:not(.chat-mode) .r3-node.is-agent-v2 .node-head-tools {
    grid-area: tools !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 5px !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
  html.r3-mobile-device .app-shell:not(.chat-mode) .r3-node.is-agent-v2 .node-head-btn {
    flex: 0 0 24px !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
  }
  html.r3-mobile-device .app-shell:not(.chat-mode) .r3-node.is-agent-v2 .node-kind {
    flex: 0 0 auto !important;
    min-width: 25px !important;
    height: 22px !important;
    padding-inline: 5px !important;
  }
  html.r3-mobile-device .app-shell:not(.chat-mode) .r3-node.is-agent-v2 .node-body {
    max-height: 112px !important;
  }
  html.r3-mobile-device .app-shell:not(.chat-mode) .r3-node.is-agent-v2 .node-tools {
    max-height: 196px !important;
    padding: 6px 7px 8px !important;
    gap: 7px !important;
  }
}

/* Pass 255 — mobile node tool history owns vertical swipe gestures. */
html.r3-mobile-device .app-shell:not(.chat-mode) .r3-node .node-tools {
  min-height: 96px !important;
  overflow-x: hidden !important;
  overflow-y: scroll !important;
  overscroll-behavior-y: contain !important;
  touch-action: pan-y !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--check-gold) color-mix(in srgb, var(--panel) 88%, transparent);
}

html.r3-mobile-device .app-shell:not(.chat-mode) .r3-node .node-tools > .tool-bubble,
html.r3-mobile-device .app-shell:not(.chat-mode) .r3-node .node-tools > .tool-bubble * {
  touch-action: pan-y !important;
}

html.r3-mobile-device .app-shell:not(.chat-mode) .r3-node .node-tools::-webkit-scrollbar {
  width: 6px;
}

html.r3-mobile-device .app-shell:not(.chat-mode) .r3-node .node-tools::-webkit-scrollbar-track {
  background: color-mix(in srgb, var(--panel) 88%, transparent);
}

html.r3-mobile-device .app-shell:not(.chat-mode) .r3-node .node-tools::-webkit-scrollbar-thumb {
  background: var(--check-gold);
  border: 1px solid var(--panel);
}

/* Pass 257 — mobile Live View keeps native vertical scroll ownership. */
html.r3-mobile-device .r3-viewer-modal .viewer-body.is-live-viewer .live-tool-stream,
html.r3-mobile-device .r3-viewer-modal .viewer-body.is-tool-viewer .live-tool-stream {
  overflow-x: hidden !important;
  overflow-y: scroll !important;
  overscroll-behavior-y: contain !important;
  touch-action: pan-y !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--check-gold) color-mix(in srgb, var(--panel) 88%, transparent);
}

html.r3-mobile-device .r3-viewer-modal .live-tool-stream > .live-tool-detail,
html.r3-mobile-device .r3-viewer-modal .live-tool-stream .live-tool-toggle {
  touch-action: pan-y !important;
}

html.r3-mobile-device .r3-viewer-modal .live-tool-stream::-webkit-scrollbar {
  width: 6px;
}

html.r3-mobile-device .r3-viewer-modal .live-tool-stream::-webkit-scrollbar-track {
  background: color-mix(in srgb, var(--panel) 88%, transparent);
}

html.r3-mobile-device .r3-viewer-modal .live-tool-stream::-webkit-scrollbar-thumb {
  background: var(--check-gold);
  border: 1px solid var(--panel);
}

/* Pass 270 — local, plan-limited Timeout gate. */
.node-palette-timeout {
  border-color: color-mix(in srgb, #d9a441 58%, var(--line));
  background: linear-gradient(145deg, color-mix(in srgb, #d9a441 13%, var(--panel-2)), var(--panel-2));
}

.r3-node.is-timeout-node {
  width: 238px;
  min-height: 122px;
  border-color: color-mix(in srgb, #d9a441 66%, var(--line));
  background:
    radial-gradient(circle at 22% 62%, color-mix(in srgb, #f2c66d 14%, transparent), transparent 34%),
    color-mix(in srgb, var(--panel) 97%, #d9a441 3%);
  box-shadow: 6px 6px 0 var(--shadow), inset 0 0 0 1px color-mix(in srgb, #f2c66d 12%, transparent);
  clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 9px, 100% calc(100% - 9px), calc(100% - 9px) 100%, 9px 100%, 0 calc(100% - 9px), 0 9px);
}

.r3-node.is-timeout-node:hover {
  box-shadow: 8px 8px 0 var(--shadow), 0 0 20px color-mix(in srgb, #d9a441 18%, transparent);
}

.r3-node.is-timeout-node .node-head {
  background: linear-gradient(100deg, #8a5b17, #c08a2b 58%, #e2b65a);
  color: #fff8e6;
  border-bottom-color: color-mix(in srgb, #f6d488 45%, var(--line));
}

.r3-node.is-timeout-node .node-kind {
  min-width: 26px;
  font-size: 15px;
  line-height: 1;
}

.r3-node.is-timeout-node .node-body {
  margin: 8px 9px 9px;
  min-height: 67px;
  padding: 0;
  overflow: hidden;
  border-color: color-mix(in srgb, #d9a441 35%, var(--soft-line));
  background: color-mix(in srgb, var(--bg) 88%, #d9a441 5%);
}

.r3-node.is-timeout-node .node-body-label {
  display: none;
}

.node-timeout-shell {
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 65px;
  padding: 9px 10px 12px;
}

.node-hourglass {
  position: relative;
  display: block;
  width: 36px;
  height: 43px;
  filter: drop-shadow(0 3px 3px color-mix(in srgb, #6a4310 34%, transparent));
}

.node-hourglass::before,
.node-hourglass::after {
  content: "";
  position: absolute;
  left: 2px;
  width: 32px;
  height: 4px;
  border-radius: 3px;
  background: linear-gradient(90deg, #98681d, #f0c86c, #98681d);
  z-index: 3;
}

.node-hourglass::before { top: 0; }
.node-hourglass::after { bottom: 0; }

.hourglass-top,
.hourglass-bottom {
  position: absolute;
  left: 6px;
  width: 24px;
  height: 18px;
  border: 2px solid color-mix(in srgb, #d9a441 82%, var(--ink));
  background: linear-gradient(to bottom, color-mix(in srgb, #f2c66d 70%, transparent), color-mix(in srgb, #d79025 26%, transparent));
}

.hourglass-top {
  top: 4px;
  clip-path: polygon(0 0, 100% 0, 58% 100%, 42% 100%);
}

.hourglass-bottom {
  bottom: 4px;
  clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%);
  background: linear-gradient(to bottom, color-mix(in srgb, #d79025 16%, transparent), color-mix(in srgb, #f2c66d 76%, transparent));
}

.hourglass-stream {
  position: absolute;
  z-index: 2;
  left: 17px;
  top: 18px;
  width: 2px;
  height: 9px;
  border-radius: 2px;
  background: #f4c85f;
  box-shadow: 0 0 5px color-mix(in srgb, #f4c85f 65%, transparent);
}

.node-timeout-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.node-timeout-copy b {
  color: var(--ink);
  font-size: 12px;
  letter-spacing: .04em;
}

.node-timeout-copy small {
  color: var(--muted);
  font-size: 10px;
  white-space: nowrap;
}

.node-timeout-progress {
  position: absolute;
  right: 10px;
  bottom: 6px;
  left: 10px;
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, #d9a441 14%, var(--panel-2));
}

.node-timeout-progress i {
  display: block;
  width: var(--timeout-progress, 0%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #b7771e, #f2c66d);
  transition: width .12s linear;
}

.r3-node.is-timeout-node.running .node-hourglass {
  animation: timeoutHourglassFloat 1.25s ease-in-out infinite;
}

.r3-node.is-timeout-node.running .hourglass-stream {
  animation: timeoutSandStream .58s ease-in-out infinite;
}

.r3-node.is-timeout-node.state-done .node-hourglass {
  filter: drop-shadow(0 0 6px color-mix(in srgb, #64d699 48%, transparent));
}

@keyframes timeoutHourglassFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-2px) rotate(2deg); }
}

@keyframes timeoutSandStream {
  0%, 100% { opacity: .35; transform: scaleY(.45); transform-origin: top; }
  50% { opacity: 1; transform: scaleY(1); transform-origin: top; }
}

.timeout-node-card {
  border-color: color-mix(in srgb, #d9a441 45%, var(--line));
  background: linear-gradient(145deg, color-mix(in srgb, #d9a441 8%, var(--panel-2)), var(--panel-2));
}

.timeout-editor-heading {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}

.timeout-editor-heading h3 { margin: 0 0 2px; }
.timeout-editor-heading small { color: var(--muted); font-size: 10px; }
.timeout-editor-icon { font-size: 25px; filter: drop-shadow(0 2px 3px color-mix(in srgb, #d9a441 35%, transparent)); }
.timeout-editor-controls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, .9fr); gap: 9px; }
.timeout-editor-controls label { margin: 6px 0; }
.timeout-limit-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  padding: 8px 9px;
  border: 1px solid color-mix(in srgb, #d9a441 28%, var(--soft-line));
  background: color-mix(in srgb, #d9a441 6%, var(--bg));
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .07em;
}
.timeout-limit-row b { color: #d9a441; }

@media (prefers-reduced-motion: reduce) {
  .r3-node.is-timeout-node.running .node-hourglass,
  .r3-node.is-timeout-node.running .hourglass-stream { animation: none; }
}

@media (max-width: 720px) {
  .r3-node.is-timeout-node { width: 230px; }
  .timeout-editor-controls { grid-template-columns: 1fr; }
}

/* Pass 271 — bounded graph loops and animated feedback rails. */
.loop-wire-halo {
  fill: none;
  stroke: #efb84f;
  stroke-width: 13px;
  stroke-linecap: round;
  opacity: .13;
  filter: blur(3px);
}

.loop-wire-halo.is-running {
  opacity: .26;
  animation: loopWireHaloPulse 1.35s ease-in-out infinite;
}

.wire.loop-wire {
  fill: none;
  stroke: #e8b44e;
  stroke-width: 3px;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 3 11;
  opacity: .94;
  filter: drop-shadow(0 0 4px color-mix(in srgb, #efb84f 48%, transparent));
  animation: loopWireTravel 1.15s linear infinite;
}

.wire.loop-wire-feedback {
  stroke: #f4cd76;
  stroke-width: 3.6px;
  stroke-dasharray: 4 9;
}

.wire.loop-wire-running {
  stroke: #ffe39a;
  filter: drop-shadow(0 0 7px color-mix(in srgb, #ffd36f 78%, transparent));
  animation-duration: .62s;
}

.wire.loop-wire-capped {
  stroke: #ef8f55;
  animation: none;
  stroke-dasharray: 5 7;
}

.loop-wire-badge {
  pointer-events: none;
  filter: drop-shadow(0 3px 5px color-mix(in srgb, #3e2609 55%, transparent));
}

.loop-wire-badge rect {
  fill: color-mix(in srgb, var(--panel) 88%, #9c6818 12%);
  stroke: #e8b44e;
  stroke-width: 1.5px;
}

.loop-wire-badge text {
  dominant-baseline: middle;
  text-anchor: middle;
  font-family: var(--font);
  font-weight: 850;
  fill: #f4cd76;
}

.loop-wire-badge-glyph { font-size: 16px; }
.loop-wire-badge-text { font-size: 9px; letter-spacing: .06em; }

.loop-wire-badge.is-running rect {
  fill: color-mix(in srgb, var(--panel) 78%, #d89b32 22%);
  animation: loopBadgePulse 1s ease-in-out infinite;
}

.loop-wire-badge.is-running .loop-wire-badge-glyph {
  transform-box: fill-box;
  transform-origin: center;
  animation: loopBadgeSpin 1.2s linear infinite;
}

.loop-wire-badge.is-capped rect { stroke: #ef8f55; }
.loop-wire-badge.is-capped text { fill: #ffb179; }

.loop-status-card {
  border-color: color-mix(in srgb, #e8b44e 48%, var(--line));
  background: linear-gradient(145deg, color-mix(in srgb, #e8b44e 9%, var(--panel-2)), var(--panel-2));
}

.loop-status-heading {
  display: flex;
  align-items: center;
  gap: 10px;
}

.loop-status-heading > span:first-child {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid color-mix(in srgb, #e8b44e 58%, var(--line));
  border-radius: 50%;
  color: #f4cd76;
  background: color-mix(in srgb, #e8b44e 11%, var(--bg));
  font-size: 22px;
}

.loop-status-heading h3 { margin: 0 0 2px; }
.loop-status-heading small { color: #e8b44e; font-size: 10px; font-weight: 800; letter-spacing: .09em; }
.loop-status-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin: 10px 0 4px; }
.loop-status-stats span { padding: 7px; border: 1px solid var(--soft-line); background: color-mix(in srgb, var(--bg) 88%, #e8b44e 5%); color: var(--muted); font-size: 10px; text-align: center; }
.loop-status-stats b { color: #f4cd76; }
.loop-feedback-copy { display: block; color: var(--muted); line-height: 1.45; overflow-wrap: anywhere; }
.loop-status-card .option-help b { color: #f4cd76; text-transform: none; }

.r3-node.is-loop-member {
  outline: 1px solid color-mix(in srgb, #e8b44e 52%, transparent);
  outline-offset: 4px;
}

.r3-node.is-loop-member[data-loop-state="running"] {
  filter: drop-shadow(0 0 9px color-mix(in srgb, #e8b44e 38%, transparent));
}

.r3-node.is-loop-member[data-loop-state="capped"] {
  outline-color: color-mix(in srgb, #ef8f55 72%, transparent);
}

.r3-node.is-loop-member.selected {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

@keyframes loopWireTravel {
  to { stroke-dashoffset: -28; }
}

@keyframes loopWireHaloPulse {
  0%, 100% { opacity: .15; stroke-width: 11px; }
  50% { opacity: .32; stroke-width: 16px; }
}

@keyframes loopBadgePulse {
  0%, 100% { stroke-width: 1.5px; }
  50% { stroke-width: 2.6px; }
}

@keyframes loopBadgeSpin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .wire.loop-wire,
  .loop-wire-halo.is-running,
  .loop-wire-badge.is-running rect,
  .loop-wire-badge.is-running .loop-wire-badge-glyph { animation: none; }
}

/* Pass 273 — mobile sheet stacking, pinned Switch ports, and unmistakable cycle rails. */
html.r3-mobile-device .r3-mobile-flow-ui.sheet-open .r3-mobile-dock {
  z-index: 260 !important;
  isolation: isolate;
}

html.r3-mobile-device .r3-mobile-flow-ui.sheet-open .r3-mobile-dock button.active {
  position: relative;
  z-index: 1;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 52%, transparent),
              0 -7px 18px color-mix(in srgb, var(--accent) 25%, transparent) !important;
}

.r3-node.is-switch-node > .node-port-in,
html.r3-mobile-device .r3-node.is-switch-node > .node-port-in {
  inset: 50% auto auto -11px !important;
  transform: translateY(-50%) !important;
}

.r3-node.is-switch-node > .node-port-out,
html.r3-mobile-device .r3-node.is-switch-node > .node-port-out {
  inset: 50% -11px auto auto !important;
  transform: translateY(-50%) !important;
}

.loop-wire-tracer {
  fill: none;
  stroke: #fff1bd;
  stroke-width: 1.8px;
  stroke-linecap: round;
  stroke-dasharray: 1 24;
  opacity: .9;
  filter: drop-shadow(0 0 4px #ffd36f);
  animation: loopWireTracerTravel .82s linear infinite;
  pointer-events: none;
}

.loop-wire-tracer.is-feedback {
  stroke: #fff8df;
  stroke-width: 2.25px;
  stroke-dasharray: 2 20;
}

.loop-wire-tracer.is-running {
  animation-duration: .48s;
  filter: drop-shadow(0 0 7px #ffe39a);
}

@keyframes loopWireTracerTravel {
  to { stroke-dashoffset: -25; }
}

@media (prefers-reduced-motion: reduce) {
  .loop-wire-tracer { animation: none; stroke-dasharray: 4 10; }
}

/* Pass 274 — lift the parent top-bar stacking context above More's own mobile shade. */
html.r3-mobile-device.r3-topbar-more-open .topbar-v2,
html.r3-mobile-device.r3-topbar-more-open .app-shell.chat-mode .topbar-v2,
html.r3-mobile-device.r3-topbar-more-open .app-shell:not(.chat-mode) .topbar-v2 {
  position: relative !important;
  z-index: 6100 !important;
  overflow: visible !important;
  isolation: isolate !important;
}

html.r3-mobile-device.r3-topbar-more-open body::before {
  z-index: 6000 !important;
  pointer-events: auto !important;
}

html.r3-mobile-device.r3-topbar-more-open .topbar-more-menu[open],
html.r3-mobile-device.r3-topbar-more-open .toolbar-v2 > .topbar-more-menu[open] {
  position: relative !important;
  z-index: 6200 !important;
  overflow: visible !important;
  isolation: isolate !important;
}

html.r3-mobile-device.r3-topbar-more-open .topbar-more-menu[open] > .topbar-more-btn {
  position: relative !important;
  z-index: 6210 !important;
  pointer-events: auto !important;
}

html.r3-mobile-device.r3-topbar-more-open .topbar-more-menu[open] > .topbar-more-panel {
  z-index: 6220 !important;
  pointer-events: auto !important;
}

/* Pass 275 — an OFF Switch opens the cycle in runtime and on the canvas. */
.wire.loop-wire-open {
  stroke: #b76558 !important;
  stroke-width: 2.35px !important;
  stroke-dasharray: 7 10 !important;
  stroke-dashoffset: 0 !important;
  opacity: .48 !important;
  filter: none !important;
  animation: none !important;
}

.wire.loop-wire-open.loop-wire-break-edge {
  stroke: #e07a68 !important;
  stroke-width: 3.1px !important;
  stroke-dasharray: 3 9 !important;
  opacity: .82 !important;
}

.loop-break-badge {
  pointer-events: none;
  filter: drop-shadow(0 3px 5px color-mix(in srgb, #35130e 58%, transparent));
}

.loop-break-badge rect {
  fill: color-mix(in srgb, var(--panel) 84%, #7e3027 16%);
  stroke: #e07a68;
  stroke-width: 1.5px;
}

.loop-break-badge text {
  fill: #ffc0b4;
  text-anchor: middle;
  dominant-baseline: middle;
  font-family: var(--font);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .055em;
}

.r3-node.is-open-loop-member:not(.selected) {
  outline: 1px dashed color-mix(in srgb, #e07a68 58%, transparent);
  outline-offset: 4px;
}

.loop-status-card.is-open {
  border-color: color-mix(in srgb, #e07a68 56%, var(--line));
  background: linear-gradient(145deg, color-mix(in srgb, #e07a68 8%, var(--panel-2)), var(--panel-2));
}

.loop-status-card.is-open .loop-status-heading > span:first-child,
.loop-status-card.is-open .loop-status-heading small,
.loop-status-card.is-open .loop-status-stats b {
  color: #e99687;
}

/* Pass 278 — mobile-only file sheet sizing, modal node tools, and even chat tool spacing. */
html.r3-mobile-device .file-section.r3-mobile-active-sheet {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  overflow: hidden !important;
}

html.r3-mobile-device .file-section.r3-mobile-active-sheet > .panel-content {
  min-height: 0 !important;
  height: 100% !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  align-content: stretch !important;
  gap: 10px !important;
  overflow: hidden !important;
}

html.r3-mobile-device .file-section.r3-mobile-active-sheet .file-list {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  height: 100% !important;
  align-content: start !important;
  gap: 8px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain !important;
  -webkit-overflow-scrolling: touch;
  padding: 8px !important;
  border: 1px solid var(--soft-line) !important;
  background: color-mix(in srgb, var(--bg) 78%, var(--panel) 22%) !important;
}

html.r3-mobile-device .file-section.r3-mobile-active-sheet .file-item {
  width: 100% !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 9px !important;
  align-items: stretch !important;
  padding: 10px !important;
}

html.r3-mobile-device .file-section.r3-mobile-active-sheet .file-name {
  width: 100% !important;
  min-width: 0 !important;
  padding-bottom: 1px !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
}

html.r3-mobile-device .file-section.r3-mobile-active-sheet .file-actions {
  width: 100% !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

html.r3-mobile-device .file-section.r3-mobile-active-sheet .file-mini {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 38px !important;
  padding: 7px 5px !important;
  text-align: center !important;
}

html.r3-mobile-device .file-section.r3-mobile-active-sheet #newFileBtn {
  width: 100% !important;
  min-height: 46px !important;
  margin: 0 !important;
}

html.r3-mobile-device .app-shell:not(.chat-mode) .r3-node .node-tools.is-mobile-modal-launcher {
  min-height: 0 !important;
  max-height: none !important;
  display: block !important;
  overflow: visible !important;
  padding: 6px 7px 8px !important;
  touch-action: manipulation !important;
  scrollbar-gutter: auto !important;
}

html.r3-mobile-device .app-shell:not(.chat-mode) .r3-node .node-tools.is-mobile-modal-launcher[hidden] {
  display: none !important;
}

html.r3-mobile-device .node-tools-modal-trigger {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 52px !important;
  display: grid !important;
  grid-template-columns: 30px minmax(0, 1fr) auto !important;
  gap: 8px !important;
  align-items: center !important;
  padding: 8px !important;
  border: 1px solid color-mix(in srgb, var(--soft-line) 82%, transparent) !important;
  background: color-mix(in srgb, var(--panel-2) 86%, var(--panel) 14%) !important;
  color: var(--ink) !important;
  text-align: left !important;
  box-shadow: 2px 2px 0 var(--shadow) !important;
  touch-action: manipulation !important;
}

html.r3-mobile-device .node-tools-modal-trigger.is-live {
  border-color: color-mix(in srgb, var(--accent) 72%, var(--soft-line)) !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 13%, var(--panel-2)), var(--panel-2)) !important;
}

html.r3-mobile-device .node-tools-modal-icon {
  width: 30px !important;
  height: 30px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid var(--soft-line) !important;
  background: var(--bg) !important;
  color: var(--accent) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

html.r3-mobile-device .node-tools-modal-copy {
  min-width: 0 !important;
  display: grid !important;
  gap: 3px !important;
}

html.r3-mobile-device .node-tools-modal-copy b,
html.r3-mobile-device .node-tools-modal-copy small {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html.r3-mobile-device .node-tools-modal-copy b {
  color: var(--accent) !important;
  font-size: 10px !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
}

html.r3-mobile-device .node-tools-modal-copy small {
  color: var(--muted) !important;
  font-size: 10.5px !important;
  line-height: 1.2 !important;
}

html.r3-mobile-device .node-tools-modal-count {
  min-width: 42px !important;
  display: grid !important;
  justify-items: end !important;
  gap: 2px !important;
  color: var(--accent) !important;
  font-size: 11px !important;
  font-weight: 950 !important;
}

html.r3-mobile-device .node-tools-modal-count em {
  color: var(--muted) !important;
  font-size: 8px !important;
  font-style: normal !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
}

html.r3-mobile-device .app-shell.chat-mode .r3-chat-live-tools {
  gap: 8px !important;
  padding: 1px 2px 2px 1px !important;
}

html.r3-mobile-device .app-shell.chat-mode .r3-chat-live-tool-row {
  min-height: 64px !important;
  grid-template-columns: 30px minmax(0, 1fr) auto !important;
  grid-template-rows: 1fr !important;
  gap: 10px !important;
  align-items: center !important;
  padding: 9px 10px !important;
}

html.r3-mobile-device .app-shell.chat-mode .r3-chat-live-tool-icon {
  width: 30px !important;
  height: 30px !important;
}

html.r3-mobile-device .app-shell.chat-mode .r3-chat-live-tool-copy {
  min-width: 0 !important;
  gap: 4px !important;
}

html.r3-mobile-device .app-shell.chat-mode .r3-chat-live-tool-copy small {
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere !important;
}

html.r3-mobile-device .app-shell.chat-mode .r3-chat-live-tool-state {
  grid-column: auto !important;
  justify-self: end !important;
  align-self: center !important;
  min-width: 42px !important;
  text-align: right !important;
  white-space: nowrap !important;
}


/* Pass 279 — structural file viewer with collapsible code/Markdown sections and chat references. */
.file-item[role="button"] {
  cursor: pointer;
  transition: border-color .14s ease, background .14s ease, box-shadow .14s ease, transform .14s ease;
}
.file-item[role="button"]:hover,
.file-item[role="button"]:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 68%, var(--soft-line));
  background: color-mix(in srgb, var(--accent) 7%, var(--bg));
  box-shadow: 3px 3px 0 var(--shadow);
  outline: none;
}
.file-item[role="button"]:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--shadow);
}
.file-item[role="button"] .file-actions,
.file-item[role="button"] .file-actions * {
  cursor: default;
}
.file-item[role="button"] .file-mini { cursor: pointer; }

.r3-file-viewer-modal {
  width: min(1180px, calc(100vw - 30px));
  height: min(92dvh, 940px);
  max-width: none;
  max-height: none;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  box-shadow: 12px 12px 0 var(--shadow);
  z-index: 2147483646;
}
.r3-file-viewer-modal::backdrop {
  background: rgba(0, 0, 0, .64);
  backdrop-filter: blur(3px);
}
.r3-file-viewer-card {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--accent) 8%, transparent), transparent 340px),
    var(--panel);
}
.r3-file-viewer-head {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 15px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel-2) 90%, var(--accent) 10%);
}
.r3-file-viewer-heading {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.r3-file-viewer-heading > span {
  color: var(--accent);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.r3-file-viewer-heading strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 17px;
  line-height: 1.2;
}
.r3-file-viewer-heading small {
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.3;
}
.r3-file-viewer-head-actions,
.r3-file-viewer-selection-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  flex-wrap: wrap;
}
.r3-file-viewer-body {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 12px;
  background: color-mix(in srgb, var(--bg) 90%, var(--panel) 10%);
  user-select: text;
  -webkit-user-select: text;
}
.r3-file-viewer-overview {
  position: sticky;
  top: 0;
  z-index: 8;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 10px;
  padding: 9px 10px;
  border: 1px solid var(--soft-line);
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  box-shadow: 3px 3px 0 var(--shadow);
  backdrop-filter: blur(6px);
}
.r3-file-viewer-overview > span:first-child {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.r3-file-viewer-overview b {
  color: var(--accent);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.r3-file-viewer-overview small {
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.3;
}
.r3-file-viewer-overview-path {
  max-width: 42%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font: 11px/1.25 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.r3-file-viewer-document {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 7px;
}
.r3-file-viewer-section {
  min-width: 0;
  border: 1px solid var(--soft-line);
  background: color-mix(in srgb, var(--panel) 92%, var(--bg) 8%);
  box-shadow: 2px 2px 0 var(--shadow);
}
.r3-file-viewer-section > summary {
  min-width: 0;
  min-height: 40px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px 9px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  -webkit-user-select: none;
  background: color-mix(in srgb, var(--panel-2) 88%, var(--accent) 12%);
}
.r3-file-viewer-section > summary::-webkit-details-marker { display: none; }
.r3-file-viewer-section > summary:hover,
.r3-file-viewer-section > summary:focus-visible {
  background: color-mix(in srgb, var(--accent) 15%, var(--panel-2));
  outline: none;
}
.r3-file-viewer-fold-icon {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 1px solid var(--soft-line);
  background: var(--bg);
  color: var(--accent);
  font-size: 17px;
  font-weight: 900;
  line-height: 1;
  transition: transform .14s ease;
}
.r3-file-viewer-section[open] > summary .r3-file-viewer-fold-icon { transform: rotate(90deg); }
.r3-file-viewer-fold-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
  font: 700 12px/1.25 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.r3-file-viewer-fold-range {
  color: var(--muted);
  font: 800 9px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .04em;
  white-space: nowrap;
}
.r3-file-viewer-section-body {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 8px;
  border-top: 1px solid var(--soft-line);
  background: color-mix(in srgb, var(--bg) 93%, var(--panel) 7%);
}
.r3-file-viewer-section-body .r3-file-viewer-section {
  margin-left: 10px;
  box-shadow: 1px 1px 0 var(--shadow);
}
.r3-file-viewer-source {
  min-width: max-content;
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--soft-line) 72%, transparent);
  background: color-mix(in srgb, var(--bg) 96%, var(--panel) 4%);
}
.r3-file-viewer-line {
  min-height: 21px;
  display: grid;
  grid-template-columns: 52px minmax(max-content, 1fr);
  align-items: start;
  border-bottom: 1px solid color-mix(in srgb, var(--soft-line) 34%, transparent);
  font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.r3-file-viewer-line:last-child { border-bottom: 0; }
.r3-file-viewer-line:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.r3-file-viewer-line.is-comment code { color: var(--muted); font-style: italic; }
.r3-file-viewer-line.is-declaration code { color: color-mix(in srgb, var(--accent) 82%, var(--ink)); font-weight: 700; }
.r3-file-viewer-line.is-blank { min-height: 17px; }
.r3-file-viewer-line-number {
  position: sticky;
  left: 0;
  z-index: 2;
  min-height: inherit;
  padding: 1px 8px 1px 4px;
  border-right: 1px solid color-mix(in srgb, var(--soft-line) 54%, transparent);
  background: color-mix(in srgb, var(--panel-2) 78%, var(--bg) 22%);
  color: var(--muted);
  text-align: right;
  user-select: none;
  -webkit-user-select: none;
}
.r3-file-viewer-line code {
  display: block;
  min-width: max-content;
  padding: 1px 10px;
  color: var(--ink);
  white-space: pre;
}
.r3-file-viewer-line code::selection,
.r3-file-viewer-markdown-body ::selection,
.r3-file-viewer-document > p::selection {
  background: color-mix(in srgb, var(--accent) 34%, transparent);
}
.r3-file-viewer-markdown-section > summary .r3-file-viewer-fold-title {
  font-family: var(--font);
  font-size: 13px;
}
.r3-file-viewer-markdown-section.level-1 > summary .r3-file-viewer-fold-title { font-size: 15px; }
.r3-file-viewer-markdown-body {
  gap: 9px;
  padding: 12px;
}
.r3-file-viewer-markdown-body p,
.r3-file-viewer-markdown > p,
.r3-file-viewer-markdown-body blockquote,
.r3-file-viewer-markdown > blockquote {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.62;
}
.r3-file-viewer-markdown-body blockquote,
.r3-file-viewer-markdown > blockquote {
  padding: 9px 11px;
  border-left: 4px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, var(--panel));
  color: color-mix(in srgb, var(--ink) 82%, var(--muted));
}
.r3-file-viewer-md-list {
  margin: 0;
  padding-left: 24px;
  display: grid;
  gap: 5px;
  font-size: 13px;
  line-height: 1.5;
}
.r3-file-viewer-md-list .is-task {
  list-style: none;
  margin-left: -20px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 7px;
  align-items: start;
}
.r3-file-viewer-md-list input { width: auto; margin-top: 3px; }
.r3-file-viewer-markdown-body code,
.r3-file-viewer-markdown > p code,
.r3-file-viewer-markdown > blockquote code {
  padding: 1px 4px;
  border: 1px solid var(--soft-line);
  background: var(--bg);
  font: .92em/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.r3-file-viewer-md-code {
  min-width: 0;
  display: grid;
  gap: 0;
  border: 1px solid var(--soft-line);
  background: var(--bg);
}
.r3-file-viewer-md-code > span {
  padding: 6px 8px;
  border-bottom: 1px solid var(--soft-line);
  background: var(--panel-2);
  color: var(--accent);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.r3-file-viewer-md-code pre {
  margin: 0;
  max-width: 100%;
  overflow: auto;
  padding: 10px;
  color: var(--ink);
  font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre;
}
.r3-file-viewer-md-link { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.r3-file-viewer-md-link small { color: var(--muted); text-decoration: none; }
.r3-file-viewer-markdown hr { width: 100%; border: 0; border-top: 1px solid var(--soft-line); }
.r3-file-viewer-selection {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel-2) 88%, var(--accent) 12%);
  box-shadow: 0 -5px 18px color-mix(in srgb, var(--shadow) 75%, transparent);
}
.r3-file-viewer-selection[hidden] { display: none !important; }
.r3-file-viewer-selection-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.r3-file-viewer-selection-copy b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--accent);
  font-size: 11px;
}
.r3-file-viewer-selection-copy small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.3;
}
.r3-file-viewer-loading,
.r3-file-viewer-error,
.r3-file-viewer-empty {
  min-height: 180px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  padding: 20px;
  border: 1px solid var(--soft-line);
  background: var(--panel);
  color: var(--muted);
  text-align: center;
}
.r3-file-viewer-loading > span { color: var(--accent); font-size: 28px; animation: r3FileViewerPulse 1s ease-in-out infinite alternate; }
.r3-file-viewer-loading b,
.r3-file-viewer-error b { color: var(--ink); }
.r3-file-viewer-error { border-color: color-mix(in srgb, var(--danger) 58%, var(--soft-line)); }
@keyframes r3FileViewerPulse { from { opacity: .4; transform: scale(.9); } to { opacity: 1; transform: scale(1.08); } }

@media (max-width: 760px) {
  .r3-file-viewer-modal {
    width: 100vw;
    height: 100svh;
    max-width: 100vw;
    max-height: 100svh;
    margin: 0;
    border: 0;
    box-shadow: none;
  }
  .r3-file-viewer-card { height: 100svh; }
  .r3-file-viewer-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 10px 10px;
  }
  .r3-file-viewer-heading strong { font-size: 15px; }
  .r3-file-viewer-head-actions {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }
  .r3-file-viewer-head-actions .ui-btn {
    width: 100%;
    min-width: 0;
    min-height: 36px;
    padding-inline: 5px;
    font-size: 10.5px;
  }
  .r3-file-viewer-body {
    padding: 8px;
    scrollbar-gutter: auto;
  }
  .r3-file-viewer-overview {
    align-items: flex-start;
    padding: 8px;
  }
  .r3-file-viewer-overview-path { display: none; }
  .r3-file-viewer-section > summary {
    grid-template-columns: 22px minmax(0, 1fr) auto;
    gap: 6px;
    padding: 8px 7px;
  }
  .r3-file-viewer-fold-title { font-size: 11px; }
  .r3-file-viewer-fold-range { font-size: 8px; }
  .r3-file-viewer-section-body {
    padding: 6px;
    gap: 5px;
  }
  .r3-file-viewer-section-body .r3-file-viewer-section { margin-left: 4px; }
  .r3-file-viewer-line {
    grid-template-columns: 42px minmax(max-content, 1fr);
    font-size: 11px;
  }
  .r3-file-viewer-line-number { padding-inline: 3px 6px; }
  .r3-file-viewer-line code { padding-inline: 7px; }
  .r3-file-viewer-selection {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 9px 9px calc(9px + env(safe-area-inset-bottom, 0px));
  }
  .r3-file-viewer-selection-actions {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, .7fr) minmax(0, .7fr) minmax(0, 1.5fr);
    gap: 6px;
  }
  .r3-file-viewer-selection-actions .ui-btn {
    width: 100%;
    min-width: 0;
    padding-inline: 5px;
    font-size: 10.5px;
  }
}

/* Pass 281 — direct project outline, grep, code viewer, and multi-file prompt references. */
.file-section .panel-summary {
  grid-template-columns: auto minmax(0, auto) auto minmax(52px, 1fr) auto;
}
.file-project-view-btn {
  justify-self: end;
  min-width: 52px;
  min-height: 26px;
  padding: 4px 9px;
  border-color: color-mix(in srgb, var(--accent) 58%, var(--soft-line));
  background: color-mix(in srgb, var(--accent) 8%, var(--panel-2));
  color: var(--accent);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.file-project-view-btn:hover,
.file-project-view-btn:focus-visible {
  color: var(--accent-ink);
  background: var(--accent);
  outline: none;
}

.r3-project-view-modal {
  --r3-project-nav-width: 330px;
  width: min(1460px, calc(100vw - 28px));
  height: min(94dvh, 980px);
  max-width: none;
  max-height: none;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  box-shadow: 14px 14px 0 var(--shadow);
  z-index: 2147483646;
}
.r3-project-view-modal::backdrop {
  background: rgba(0, 0, 0, .68);
  backdrop-filter: blur(4px);
}
.r3-project-view-card {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  overflow: hidden;
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--accent) 10%, transparent), transparent 360px),
    var(--panel);
}
.r3-project-view-head {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel-2) 90%, var(--accent) 10%);
}
.r3-project-view-heading {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.r3-project-view-heading > span {
  color: var(--accent);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.r3-project-view-heading strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 17px;
  line-height: 1.2;
}
.r3-project-view-heading small {
  color: var(--muted);
  font-size: 10px;
}
.r3-project-view-head-actions,
.r3-project-view-editor-actions,
.r3-project-view-selection-actions,
.r3-project-view-basket-actions,
.r3-project-view-result-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
.r3-project-view-refresh.is-stale {
  border-color: color-mix(in srgb, var(--warning) 72%, var(--line));
  color: var(--warning);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--warning) 14%, transparent);
}
.r3-project-view-refresh.is-stale::before { content: '• '; }

.r3-project-view-searchbar {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto auto auto minmax(150px, 240px) auto;
  align-items: stretch;
  gap: 7px;
  padding: 9px 11px;
  border-bottom: 1px solid var(--soft-line);
  background: color-mix(in srgb, var(--bg) 86%, var(--panel) 14%);
}
.r3-project-view-search-field,
.r3-project-view-path-field,
.r3-project-view-filter {
  margin: 0;
  text-transform: none;
  letter-spacing: normal;
}
.r3-project-view-search-field,
.r3-project-view-path-field {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  padding: 0 9px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--muted);
}
.r3-project-view-search-field:focus-within,
.r3-project-view-path-field:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 15%, transparent);
}
.r3-project-view-search-field > span {
  color: var(--accent);
  font-size: 19px;
  line-height: 1;
}
.r3-project-view-path-field > span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.r3-project-view-search-field input,
.r3-project-view-path-field input {
  min-height: 37px;
  padding: 7px 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  font: 12px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.r3-project-view-filter {
  position: relative;
  min-width: 50px;
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  place-content: center;
  column-gap: 4px;
  padding: 3px 7px;
  border: 1px solid var(--soft-line);
  background: var(--panel-2);
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}
.r3-project-view-filter input {
  grid-row: 1 / 3;
  width: auto;
  margin: 0;
}
.r3-project-view-filter span {
  color: var(--ink);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}
.r3-project-view-filter small {
  font-size: 8px;
  line-height: 1;
  text-transform: uppercase;
}
.r3-project-view-filter:has(input:checked) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--panel-2));
  color: var(--accent);
}
.r3-project-view-result-nav {
  min-width: 112px;
  padding-left: 2px;
}
.r3-project-view-result-nav span {
  min-width: 55px;
  color: var(--muted);
  font: 800 10px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-align: center;
}
.r3-project-view-mobile-tabs { display: none; }

.r3-project-view-workspace {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(230px, var(--r3-project-nav-width)) 8px minmax(0, 1fr);
  overflow: hidden;
}
.r3-project-view-nav,
.r3-project-view-editor {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.r3-project-view-nav {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border-right: 1px solid var(--soft-line);
  background: color-mix(in srgb, var(--bg) 89%, var(--panel) 11%);
}
.r3-project-view-nav-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--soft-line);
  background: var(--panel-2);
}
.r3-project-view-nav-tabs button {
  min-height: 38px;
  border: 0;
  border-right: 1px solid var(--soft-line);
  background: transparent;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.r3-project-view-nav-tabs button:last-child { border-right: 0; }
.r3-project-view-nav-tabs button.is-active {
  background: color-mix(in srgb, var(--accent) 12%, var(--panel));
  color: var(--accent);
  box-shadow: inset 0 -3px 0 var(--accent);
}
.r3-project-view-nav-tabs span {
  display: inline-grid;
  min-width: 18px;
  min-height: 18px;
  place-items: center;
  margin-left: 4px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 8px;
}
.r3-project-view-nav-panel {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 8px;
}
.r3-project-view-nav-panel[hidden] { display: none !important; }
.r3-project-view-splitter {
  position: relative;
  min-width: 8px;
  cursor: col-resize;
  background: color-mix(in srgb, var(--panel-2) 78%, var(--bg) 22%);
  border-right: 1px solid var(--soft-line);
  border-left: 1px solid var(--soft-line);
  touch-action: none;
}
.r3-project-view-splitter::after {
  content: '';
  position: absolute;
  inset: 44% 2px;
  border-left: 1px solid var(--muted);
  border-right: 1px solid var(--muted);
  opacity: .55;
}
.r3-project-view-splitter:hover,
.r3-project-view-splitter:focus-visible {
  background: color-mix(in srgb, var(--accent) 18%, var(--panel-2));
  outline: none;
}
body.is-project-view-resizing { cursor: col-resize !important; user-select: none !important; }

.r3-project-tree {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 4px;
}
.r3-project-tree-folder,
.r3-project-tree-file {
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--soft-line) 72%, transparent);
  background: color-mix(in srgb, var(--panel) 92%, var(--bg) 8%);
}
.r3-project-tree-folder > summary,
.r3-project-tree-file > summary {
  min-width: 0;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-height: 35px;
  padding: 6px 7px;
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.r3-project-tree-folder > summary::-webkit-details-marker,
.r3-project-tree-file > summary::-webkit-details-marker { display: none; }
.r3-project-tree-folder > summary:hover,
.r3-project-tree-file > summary:hover {
  background: color-mix(in srgb, var(--accent) 8%, var(--panel-2));
}
.r3-project-tree-folder > summary > span:first-child {
  color: var(--accent);
  font-size: 15px;
  transition: transform .12s ease;
}
.r3-project-tree-folder[open] > summary > span:first-child { transform: rotate(90deg); }
.r3-project-tree-folder > summary b,
.r3-project-tree-file > summary b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
}
.r3-project-tree-folder > summary small,
.r3-project-tree-file > summary small {
  color: var(--muted);
  font: 9px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.r3-project-tree-folder > div {
  display: grid;
  gap: 4px;
  padding: 0 5px 5px 13px;
}
.r3-project-tree-file-icon {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 1px solid var(--soft-line);
  background: var(--bg);
  color: var(--accent);
  font: 800 8px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.r3-project-tree-symbols {
  display: grid;
  gap: 3px;
  padding: 0 5px 6px 13px;
}
.r3-project-tree-symbols button {
  min-width: 0;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  min-height: 29px;
  padding: 4px 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink);
  text-align: left;
}
.r3-project-tree-symbols button:hover,
.r3-project-tree-symbols button:focus-visible {
  border-color: var(--soft-line);
  background: color-mix(in srgb, var(--accent) 7%, var(--bg));
  outline: none;
}
.r3-project-tree-symbols button span {
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--accent);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.r3-project-tree-symbols button b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 10px/1.25 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.r3-project-tree-symbols button small,
.r3-project-tree-empty {
  color: var(--muted);
  font: 8px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.r3-project-tree-empty { padding: 5px 7px; }

.r3-project-results {
  display: grid;
  gap: 5px;
}
.r3-project-results > button {
  min-width: 0;
  display: grid;
  gap: 5px;
  padding: 8px;
  border: 1px solid var(--soft-line);
  background: var(--panel);
  color: var(--ink);
  text-align: left;
  box-shadow: 1px 1px 0 var(--shadow);
}
.r3-project-results > button:hover,
.r3-project-results > button:focus-visible,
.r3-project-results > button.is-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--panel));
  outline: none;
}
.r3-project-results > button.is-active { box-shadow: inset 3px 0 0 var(--accent), 2px 2px 0 var(--shadow); }
.r3-project-results > button > span {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.r3-project-results b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
}
.r3-project-results small {
  color: var(--accent);
  font: 800 9px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.r3-project-results code {
  display: block;
  overflow: hidden;
  color: var(--muted);
  font: 10px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.r3-project-results mark {
  padding: 0 1px;
  background: color-mix(in srgb, var(--check-gold) 48%, transparent);
  color: var(--ink);
}

.r3-project-view-editor {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: color-mix(in srgb, var(--bg) 92%, var(--panel) 8%);
}
.r3-project-view-editor-head {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 43px;
  padding: 7px 9px;
  border-bottom: 1px solid var(--soft-line);
  background: var(--panel-2);
}
.r3-project-view-back { display: none; }
.r3-project-view-breadcrumbs {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  overflow: hidden;
  color: var(--muted);
  font: 10px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: nowrap;
}
.r3-project-view-breadcrumbs span,
.r3-project-view-breadcrumbs b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.r3-project-view-breadcrumbs span:last-of-type,
.r3-project-view-breadcrumbs b { color: var(--ink); }
.r3-project-view-breadcrumbs i { color: var(--accent); font-style: normal; }
.r3-project-view-body {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 10px;
  user-select: text;
  -webkit-user-select: text;
}
.r3-project-view-file-overview {
  position: sticky;
  top: 0;
  z-index: 12;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
  padding: 8px 10px;
  border: 1px solid var(--soft-line);
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  box-shadow: 3px 3px 0 var(--shadow);
  backdrop-filter: blur(6px);
}
.r3-project-view-file-overview > span:first-child { display: grid; gap: 2px; }
.r3-project-view-file-overview b {
  color: var(--accent);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.r3-project-view-file-overview small,
.r3-project-view-file-overview > span:last-child {
  color: var(--muted);
  font-size: 9.5px;
}
.r3-project-view-body .r3-file-viewer-line-number { cursor: ns-resize; }
.r3-project-view-body .r3-file-viewer-line.is-project-view-selected {
  background: color-mix(in srgb, var(--accent) 17%, transparent);
  box-shadow: inset 3px 0 0 var(--accent);
}
.r3-project-view-body .r3-file-viewer-line.is-project-view-target,
.r3-project-view-body [data-line-start].is-project-view-target {
  animation: r3ProjectTargetPulse .82s ease-in-out 3;
  outline: 2px solid color-mix(in srgb, var(--check-gold) 78%, var(--accent));
  outline-offset: -2px;
}
@keyframes r3ProjectTargetPulse {
  0%, 100% { background: color-mix(in srgb, var(--check-gold) 8%, transparent); }
  50% { background: color-mix(in srgb, var(--check-gold) 28%, transparent); }
}
.r3-project-view-editor-empty,
.r3-project-view-loading,
.r3-project-view-error,
.r3-project-view-empty {
  min-height: 150px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  padding: 18px;
  border: 1px dashed var(--soft-line);
  background: color-mix(in srgb, var(--panel) 88%, var(--bg) 12%);
  color: var(--muted);
  text-align: center;
}
.r3-project-view-editor-empty > span,
.r3-project-view-loading > span {
  color: var(--accent);
  font-size: 26px;
}
.r3-project-view-editor-empty b,
.r3-project-view-loading b,
.r3-project-view-error b,
.r3-project-view-empty b { color: var(--ink); }
.r3-project-view-editor-empty p,
.r3-project-view-editor-empty small,
.r3-project-view-loading small,
.r3-project-view-empty span,
.r3-project-view-error span { margin: 0; font-size: 10px; line-height: 1.45; }
.r3-project-view-error { border-color: color-mix(in srgb, var(--danger) 68%, var(--soft-line)); }
.r3-project-view-loading > span { animation: r3FileViewerPulse 1s ease-in-out infinite alternate; }

.r3-project-view-selection {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel-2) 86%, var(--accent) 14%);
  box-shadow: 0 -4px 16px color-mix(in srgb, var(--shadow) 70%, transparent);
}
.r3-project-view-selection[hidden] { display: none !important; }
.r3-project-view-selection > div:first-child {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.r3-project-view-selection b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--accent);
  font-size: 10px;
}
.r3-project-view-selection small { color: var(--muted); font-size: 9px; }

.r3-project-view-basket {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel-2) 91%, var(--accent) 9%);
}
.r3-project-view-basket-summary {
  min-width: 0;
  display: grid;
  grid-template-columns: 25px auto minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  padding: 5px 7px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink);
  text-align: left;
}
.r3-project-view-basket-summary:hover,
.r3-project-view-basket-summary:focus-visible {
  border-color: var(--soft-line);
  background: color-mix(in srgb, var(--accent) 7%, var(--panel));
  outline: none;
}
.r3-project-view-basket-summary > span {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border: 1px solid var(--soft-line);
  color: var(--accent);
}
.r3-project-view-basket-summary b { font-size: 10px; }
.r3-project-view-basket-summary small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 9px;
}
.r3-project-view-basket-list {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: calc(100% + 1px);
  z-index: 30;
  max-height: min(38vh, 360px);
  overflow: auto;
  display: grid;
  gap: 5px;
  padding: 8px;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: 0 -8px 26px color-mix(in srgb, var(--shadow) 86%, transparent);
}
.r3-project-view-basket-list[hidden] { display: none !important; }
.r3-project-view-basket-list article {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px;
  gap: 5px;
}
.r3-project-view-basket-list article > button:first-child {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 7px;
  border: 1px solid var(--soft-line);
  background: var(--bg);
  color: var(--ink);
  text-align: left;
}
.r3-project-view-basket-list article > button:first-child:hover { border-color: var(--accent); }
.r3-project-view-basket-list article > button:last-child {
  border: 1px solid color-mix(in srgb, var(--danger) 72%, var(--soft-line));
  background: transparent;
  color: var(--danger);
  font-size: 18px;
}
.r3-project-view-basket-list article span {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.r3-project-view-basket-list article b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
}
.r3-project-view-basket-list article small { color: var(--accent); font-size: 8px; }
.r3-project-view-basket-list article code {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font: 9px/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@media (max-width: 980px) {
  .r3-project-view-searchbar {
    grid-template-columns: minmax(220px, 1fr) auto auto auto;
  }
  .r3-project-view-path-field { grid-column: 1 / 3; }
  .r3-project-view-result-nav { grid-column: 3 / 5; }
}

@media (max-width: 760px) {
  .file-section .panel-summary {
    grid-template-columns: auto minmax(0, 1fr) auto auto auto;
    column-gap: 6px;
  }
  .file-project-view-btn {
    min-width: 46px;
    min-height: 25px;
    padding-inline: 6px;
    font-size: 9px;
  }
  .r3-project-view-modal {
    width: 100vw;
    height: 100svh;
    max-width: 100vw;
    max-height: 100svh;
    margin: 0;
    border: 0;
    box-shadow: none;
  }
  .r3-project-view-card {
    height: 100svh;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  }
  .r3-project-view-head {
    padding: calc(9px + env(safe-area-inset-top, 0px)) 9px 8px;
  }
  .r3-project-view-heading strong { font-size: 14px; }
  .r3-project-view-heading small { font-size: 8px; }
  .r3-project-view-head-actions .ui-btn { min-height: 34px; padding-inline: 7px; font-size: 10px; }
  .r3-project-view-searchbar {
    grid-template-columns: minmax(0, 1fr) repeat(3, 48px);
    gap: 5px;
    padding: 7px;
  }
  .r3-project-view-search-field { grid-column: 1 / -1; }
  .r3-project-view-path-field { grid-column: 1 / 3; }
  .r3-project-view-result-nav { grid-column: 3 / 5; min-width: 0; }
  .r3-project-view-filter { min-width: 0; padding-inline: 3px; }
  .r3-project-view-mobile-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid var(--line);
    background: var(--panel-2);
  }
  .r3-project-view-mobile-tabs button {
    min-height: 36px;
    border: 0;
    border-right: 1px solid var(--soft-line);
    background: transparent;
    color: var(--muted);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  .r3-project-view-mobile-tabs button.is-active {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 11%, var(--panel));
    box-shadow: inset 0 -3px 0 var(--accent);
  }
  .r3-project-view-workspace {
    display: block;
    position: relative;
  }
  .r3-project-view-splitter { display: none; }
  .r3-project-view-nav,
  .r3-project-view-editor {
    width: 100%;
    height: 100%;
    border: 0;
  }
  .r3-project-view-modal[data-mobile-pane="nav"] .r3-project-view-editor,
  .r3-project-view-modal[data-mobile-pane="editor"] .r3-project-view-nav { display: none; }
  .r3-project-view-nav-panel { padding: 7px; }
  .r3-project-view-editor-head {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px;
    padding: 6px;
  }
  .r3-project-view-back { display: inline-flex; }
  .r3-project-view-editor-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .r3-project-view-editor-actions .ui-btn { width: 100%; min-height: 33px; font-size: 9px; }
  .r3-project-view-body { padding: 7px; scrollbar-gutter: auto; }
  .r3-project-view-file-overview {
    align-items: flex-start;
    padding: 7px;
  }
  .r3-project-view-file-overview > span:last-child { display: none; }
  .r3-project-view-selection {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
    padding: 8px;
  }
  .r3-project-view-selection-actions {
    display: grid;
    grid-template-columns: .7fr .7fr 1.4fr;
  }
  .r3-project-view-selection-actions .ui-btn { width: 100%; min-width: 0; padding-inline: 4px; font-size: 9px; }
  .r3-project-view-basket {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    padding: 7px 7px calc(7px + env(safe-area-inset-bottom, 0px));
  }
  .r3-project-view-basket-actions {
    display: grid;
    grid-template-columns: .7fr 1.3fr;
  }
  .r3-project-view-basket-actions .ui-btn { width: 100%; min-height: 36px; }
  .r3-project-view-basket-summary { grid-template-columns: 25px auto minmax(0, 1fr); }
  .r3-project-view-basket-list { left: 7px; right: 7px; max-height: 45svh; }
}

/* Media output nodes — generated bytes remain client-only */
.node-palette[data-node-type="ImageOut"]::before { content: '▧+'; }
.node-palette[data-node-type="VideoOut"]::before { content: '▻+'; }
.node-palette[data-node-type="AudioOut"]::before { content: '≋'; }
.r3-node[data-type="ImageOut"] .node-head {
  background: color-mix(in srgb, var(--accent) 68%, #61431a 32%);
}
.r3-node[data-type="VideoOut"] .node-head {
  background: color-mix(in srgb, var(--accent) 58%, #203f69 42%);
}
.r3-node[data-type="AudioOut"] .node-head {
  background: color-mix(in srgb, var(--accent) 56%, #55306b 44%);
}
.r3-node[data-type="ImageOut"] .node-body,
.r3-node[data-type="VideoOut"] .node-body {
  max-height: 170px;
}
.r3-node[data-type="Output"] .node-body {
  max-height: 260px;
  overflow: auto;
}
.r3-node[data-type="AudioOut"] .node-body {
  max-height: 132px;
}
.mediaout-node {
  position: relative;
  min-height: 74px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  overflow: hidden;
}
.mediaout-node > b {
  color: var(--ink);
  font-size: 11px;
  letter-spacing: .08em;
}
.mediaout-node > span:not(.mediaout-client-chip):not(.mediaout-play-chip) {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}
.mediaout-ready.mediaout-image,
.mediaout-ready.mediaout-video {
  min-height: 116px;
  background: color-mix(in srgb, var(--panel) 84%, #000 16%);
  border: 1px solid var(--soft-line);
}
.mediaout-ready img,
.mediaout-ready video {
  width: 100%;
  height: 116px;
  display: block;
  object-fit: cover;
  background: #111;
}
.mediaout-preview-link {
  display: block;
  width: 100%;
  height: 100%;
}
.mediaout-option-link,
.image-ref-thumb-link {
  display: inline-block;
}
.image-node-preview-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.image-node-preview {
  min-height: 116px;
}
.image-node-preview-text {
  -webkit-line-clamp: 2;
}
.output-node-media {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.output-node-media-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.output-node-media-open-link {
  width: fit-content;
  color: var(--accent);
  font-size: 10px;
  line-height: 1.2;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.output-node-media-open-link:hover {
  color: var(--ink);
}
.output-node-media-preview {
  min-height: 116px;
}
.output-node-media-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.output-node-media-meta > b {
  color: var(--ink);
  font-size: 10px;
  letter-spacing: .06em;
}
.output-node-media-meta > span {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}
.output-node-media-text {
  -webkit-line-clamp: 3;
}

.viewer-output-media-grid {
  gap: 12px;
}
.viewer-output-media .mediaout-node {
  min-height: auto;
}
.viewer-output-media .mediaout-ready img,
.viewer-output-media .mediaout-ready video {
  height: auto;
  max-height: min(52vh, 460px);
  object-fit: contain;
  background: #000;
}
.viewer-output-media .output-node-media-meta > b,
.viewer-output-media .output-node-media-meta > span,
.viewer-output-media .output-node-media-open-link {
  font-size: 12px;
}
.mediaout-client-chip,
.mediaout-play-chip {
  position: absolute;
  bottom: 6px;
  padding: 3px 6px;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--soft-line));
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  color: var(--ink);
  font-size: 8px;
  line-height: 1;
  letter-spacing: .08em;
  pointer-events: none;
}
.mediaout-client-chip { right: 6px; }
.mediaout-play-chip { left: 6px; }
.mediaout-working { padding-left: 22px; }
.mediaout-status-pulse {
  position: absolute;
  left: 2px;
  width: 10px;
  height: 10px;
  border: 2px solid var(--accent);
  animation: mediaoutPulse 1.1s steps(2, end) infinite;
}
@keyframes mediaoutPulse {
  0%, 100% { opacity: .35; transform: scale(.8); }
  50% { opacity: 1; transform: scale(1.15); }
}
.mediaout-audio {
  width: 100%;
  min-width: 0;
  min-height: 96px;
  align-items: stretch;
  overflow: visible;
}
.r3-node[data-type="AudioOut"] .node-body,
.r3-node[data-type="AudioOut"] .node-body-content {
  width: 100%;
  min-width: 0;
}
.r3-node[data-type="AudioOut"] .node-body {
  overflow-x: hidden;
}
.mediaout-node-audio {
  display: block;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  height: 40px;
  min-height: 40px;
  flex: 0 0 40px;
  box-sizing: border-box;
}
.mediaout-wave {
  height: 32px;
  display: flex;
  gap: 3px;
  align-items: center;
}
.mediaout-wave i {
  display: block;
  width: 4px;
  height: calc(var(--wave) * 4px);
  background: var(--accent);
  opacity: .8;
}
.mediaout-settings {
  display: grid;
  gap: 10px;
}
.mediaout-storage-note {
  display: block;
  padding: 8px;
  border-left: 2px solid var(--accent);
  background: color-mix(in srgb, var(--panel) 88%, transparent);
}
.mediaout-preview-card {
  display: grid;
  gap: 8px;
}
.mediaout-option-image,
.mediaout-option-video {
  display: block;
  width: 100%;
  max-height: 260px;
  object-fit: contain;
  border: 1px solid var(--soft-line);
  background: #111;
}
.mediaout-option-audio {
  width: 100%;
}
.mediaout-context-toggle {
  margin-bottom: 0 !important;
}

/* Session expiry read-only overlay */
.session-ended-overlay {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: grid;
  place-items: center;
  padding: 20px;
  background: color-mix(in srgb, #020307 62%, transparent);
  backdrop-filter: blur(9px) saturate(.8);
  -webkit-backdrop-filter: blur(9px) saturate(.8);
}
.session-ended-overlay.hidden { display: none !important; }
.session-ended-card {
  width: min(430px, calc(100vw - 28px));
  display: grid;
  gap: 14px;
  padding: 24px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent 42%),
    color-mix(in srgb, var(--panel) 96%, #000 4%);
  color: var(--ink);
  box-shadow: 12px 12px 0 var(--shadow), 0 24px 70px rgba(0, 0, 0, .34);
}
.session-ended-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.session-ended-mark {
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 70%, var(--line));
  background: color-mix(in srgb, var(--accent) 12%, var(--panel));
  font-size: 13px;
  line-height: 1;
}
.session-ended-card h2 {
  margin: 0;
  font-size: clamp(23px, 4vw, 30px);
  line-height: 1.05;
  letter-spacing: -.025em;
}
.session-ended-card > p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}
.session-ended-reason {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--soft-line);
  background: color-mix(in srgb, var(--bg) 72%, transparent);
}
.session-ended-reason span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.session-ended-reason strong {
  color: var(--ink);
  font-size: 13px;
}
.session-ended-actions {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 9px;
  margin-top: 2px;
}
.session-ended-actions .ui-btn { min-height: 42px; }
html.r3-session-ended #saveState {
  color: var(--muted);
}
@media (max-width: 520px) {
  .session-ended-overlay { padding: 12px; }
  .session-ended-card { width: 100%; padding: 20px; box-shadow: 7px 7px 0 var(--shadow), 0 20px 50px rgba(0,0,0,.32); }
  .session-ended-actions { grid-template-columns: 1fr; }
  .session-ended-actions [data-session-login] { order: -1; }
}


/* Persistent generated PDF/DOCX project files — read-only to agents for now. */
.file-name-wrap {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.file-name-wrap .file-name { min-width: 0; }
.file-document {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--soft-line));
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 5%, var(--bg)), var(--bg));
}
.file-document .file-name::before { content: '▤ '; color: var(--accent); }
.file-agent-context-off {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  display: inline-grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--muted) 48%, var(--soft-line));
  border-radius: 999px;
  color: var(--muted);
  background: color-mix(in srgb, var(--panel) 84%, transparent);
  cursor: help;
}
.file-agent-context-off svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.file-document .file-mini.view {
  background: color-mix(in srgb, var(--accent) 9%, transparent);
}


/* Oracle node: Pro-only, read-only observer sidecar. */
.node-palette[data-node-type="Oracle"]::before {
  content: '◉';
  color: #8fb7ff;
  text-shadow: 0 0 10px rgba(93, 145, 255, .72);
}
.node-palette[data-node-type="Oracle"] {
  border-color: color-mix(in srgb, #6d93ff 55%, var(--line));
  background: linear-gradient(145deg, color-mix(in srgb, #14294f 58%, var(--panel)), color-mix(in srgb, #0b1630 70%, var(--panel)));
}
.r3-node[data-type="Oracle"] {
  min-height: 168px;
  border-color: rgba(103, 151, 255, .72);
  background:
    radial-gradient(circle at 24% 62%, rgba(80, 136, 255, .14), transparent 30%),
    linear-gradient(155deg, color-mix(in srgb, #101f42 72%, var(--panel)), color-mix(in srgb, #091126 82%, var(--panel)));
  box-shadow: 0 0 26px rgba(70, 120, 255, .15), 7px 7px 0 var(--shadow);
}
.r3-node[data-type="Oracle"] .node-head {
  background: linear-gradient(90deg, #172d62, #274f9d 56%, #172d62);
  border-bottom-color: rgba(139, 181, 255, .42);
  box-shadow: inset 0 -1px 18px rgba(111, 163, 255, .16);
}
.r3-node[data-type="Oracle"] .node-title {
  color: #eef5ff;
  text-shadow: 0 0 10px rgba(143, 183, 255, .38);
}
.r3-node[data-type="Oracle"] .node-port-out {
  border-color: #9bbcff;
  background: #173d86;
  box-shadow: 0 0 0 3px rgba(91, 143, 255, .15), 0 0 14px rgba(91, 143, 255, .45);
}
.r3-node[data-type="Oracle"] .node-body-label {
  color: #9fbfff;
}
.oracle-head-badge,
.oracle-pro-pill {
  color: #c8dcff !important;
  border-color: rgba(139, 181, 255, .5) !important;
  background: rgba(48, 92, 177, .26) !important;
}
.oracle-pro-pill {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 1px 5px;
  border: 1px solid;
  border-radius: 999px;
  font-size: 8px;
  letter-spacing: .12em;
}
.oracle-node-body {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 72px;
}
.oracle-orb {
  position: relative;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(140, 183, 255, .62);
  border-radius: 50%;
  background: radial-gradient(circle, #b9d2ff 0 8%, #467fe8 10% 21%, #142e66 24% 49%, rgba(14, 29, 66, .28) 52% 100%);
  box-shadow: 0 0 16px rgba(84, 137, 255, .42), inset 0 0 16px rgba(154, 192, 255, .2);
}
.oracle-orb::before,
.oracle-orb::after {
  content: '';
  position: absolute;
  inset: 6px -5px;
  border: 1px solid rgba(125, 169, 255, .36);
  border-radius: 50%;
  transform: rotate(28deg);
}
.oracle-orb::after { transform: rotate(-28deg); }
.oracle-orb span {
  position: absolute;
  inset: 15px;
  border-radius: 50%;
  background: #e8f2ff;
  box-shadow: 0 0 10px #9fc2ff;
}
.r3-node[data-type="Oracle"] .oracle-orb { animation: oracleOrbPulse 2.5s ease-in-out infinite; }
.r3-node[data-type="Oracle"]:has(.node-body-label) .oracle-node-copy { min-width: 0; }
.oracle-node-copy { display: grid; gap: 4px; min-width: 0; }
.oracle-node-copy b { color: #b8d2ff; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.oracle-node-copy span { color: color-mix(in srgb, var(--ink) 84%, #9abfff); font-size: 11px; line-height: 1.4; }
.oracle-option-card {
  border-color: rgba(93, 145, 255, .32) !important;
  background: linear-gradient(150deg, rgba(35, 68, 135, .12), rgba(10, 22, 50, .1)) !important;
}
.oracle-option-status {
  display: grid;
  gap: 3px;
  padding: 8px 9px;
  margin-bottom: 9px;
  border: 1px solid rgba(99, 149, 255, .22);
  background: rgba(43, 84, 164, .08);
}
.oracle-option-status b { color: #aac8ff; font-size: 11px; }
.oracle-option-status small { color: var(--muted); line-height: 1.35; }

/* Attached flow membership: intentionally faint but noticeable royal-blue observer glow. */
.r3-node.oracle-observed:not([data-type="Oracle"]) {
  filter: drop-shadow(0 0 8px rgba(72, 127, 255, .34));
}
.r3-node.oracle-observed:not([data-type="Oracle"]) .node-head {
  box-shadow: inset 0 0 18px rgba(69, 126, 255, .12);
}
.r3-node.oracle-observed-root:not([data-type="Oracle"]) {
  filter: drop-shadow(0 0 11px rgba(85, 141, 255, .46));
}
.oracle-observer-wire-glow {
  fill: none !important;
  stroke: rgba(88, 143, 255, .19);
  stroke-width: 8;
  pointer-events: none;
  filter: blur(1px);
}
.wire.oracle-observer-wire {
  fill: none !important;
  stroke: #6f9cff;
  stroke-width: 2.1;
  stroke-dasharray: 7 7;
  opacity: .78;
  pointer-events: none;
  filter: drop-shadow(0 0 4px rgba(83, 139, 255, .55));
  animation: oracleWireMarch 1.4s linear infinite;
}
@keyframes oracleWireMarch { to { stroke-dashoffset: -28; } }
@keyframes oracleOrbPulse {
  0%, 100% { transform: scale(.96); box-shadow: 0 0 13px rgba(84, 137, 255, .34), inset 0 0 14px rgba(154, 192, 255, .16); }
  50% { transform: scale(1.03); box-shadow: 0 0 20px rgba(84, 137, 255, .54), inset 0 0 18px rgba(154, 192, 255, .24); }
}
@media (prefers-reduced-motion: reduce) {
  .r3-node[data-type="Oracle"] .oracle-orb,
  .wire.oracle-observer-wire { animation: none !important; }
}


/* Project file manager refresh */
.file-section .panel-content,
.r3-chat-files-settings .r3-chat-panel-body { gap: 8px; }
.file-list {
  gap: 4px;
  padding-right: 2px;
}
.file-item {
  min-height: 38px;
  padding: 6px 7px;
  gap: 7px;
  border-color: color-mix(in srgb, var(--soft-line) 82%, transparent);
}
.file-name-wrap { min-width: 0; }
.file-name { font-size: 11px; }
.file-actions { flex-wrap: nowrap; gap: 3px; }
.file-actions .file-mini { min-height: 24px; padding: 3px 6px; }
.file-add-btn { margin-top: 4px; min-height: 38px; font-weight: 800; letter-spacing: .03em; }
.file-folder-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto auto;
  align-items: center;
  gap: 6px;
  min-height: 31px;
  padding: 5px 7px;
  margin-top: 4px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--soft-line));
  background: color-mix(in srgb, var(--panel-2) 88%, var(--accent) 12%);
}
.file-folder-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 900; letter-spacing: .04em; color: var(--accent); }
.file-folder-empty { font-size: 9px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.file-folder-delete { opacity: .7; }
.file-folder-delete:hover { opacity: 1; }
.file-media-image .file-name::before { content: '▧ '; color: var(--accent); }
.file-media-audio .file-name::before { content: '♪ '; color: var(--accent); }

.file-manager-dialog { width: min(620px, calc(100vw - 24px)); }
.file-manager-dialog > form { display: grid; gap: 12px; }
.file-manager-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.file-manager-head h2 { margin: 0; }
.file-manager-head p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.file-manager-tabs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }
.file-manager-tabs .ui-btn { min-width: 0; }
.file-manager-tabs .ui-btn.is-active { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--panel-2) 82%, var(--accent) 18%); }
.file-manager-pane { display: grid; gap: 10px; padding: 11px; border: 1px solid var(--soft-line); background: color-mix(in srgb, var(--bg) 88%, var(--panel) 12%); }
.file-manager-pane.hidden { display: none !important; }
.file-manager-grid { display: grid; grid-template-columns: minmax(130px,.7fr) minmax(0,1.3fr); gap: 8px; }
.file-manager-pane textarea { min-height: 180px; max-height: 42vh; resize: vertical; }
.file-manager-dropzone { display: grid !important; place-items: center; min-height: 118px; padding: 18px !important; border: 1px dashed var(--accent) !important; background: color-mix(in srgb, var(--bg) 92%, var(--accent) 8%); cursor: pointer; text-align: center; }
.file-manager-dropzone b { color: var(--ink); font-size: 14px; }
.file-manager-dropzone span { color: var(--muted); font-size: 11px; }
.file-manager-dropzone input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.file-manager-upload-queue { max-height: 100px; overflow: auto; padding: 7px 8px; border: 1px solid var(--soft-line); color: var(--muted); font-size: 11px; line-height: 1.5; }
.file-manager-status { min-height: 18px; margin: 0; }
.file-manager-status.is-error { color: var(--danger, #ff6d6d); }

@media (max-width: 760px) {
  .file-list { max-height: 250px !important; }
  .file-item { grid-template-columns: minmax(0,1fr) auto !important; align-items: center !important; padding: 7px !important; }
  .file-actions { justify-content: flex-end !important; overflow-x: auto; scrollbar-width: none; }
  .file-actions::-webkit-scrollbar { display: none; }
  .file-actions .file-mini { min-height: 30px !important; padding: 5px 7px !important; }
  .file-folder-row { min-height: 36px; }
  .file-manager-dialog { width: calc(100vw - 14px); max-height: calc(100dvh - 14px); margin: 7px auto; }
  .file-manager-dialog > form { gap: 9px; }
  .file-manager-head p { display: none; }
  .file-manager-tabs { gap: 4px; }
  .file-manager-tabs .ui-btn { padding-inline: 5px; font-size: 11px; }
  .file-manager-grid { grid-template-columns: 1fr; }
  .file-manager-pane { padding: 9px; }
  .file-manager-pane textarea { min-height: 140px; max-height: 30vh; }
  .file-manager-dropzone { min-height: 95px; padding: 12px !important; }
}

/* Oracle dashboard: live execution data first, generic node chrome second. */
.r3-node[data-type="Oracle"] {
  min-height: 176px;
}
.r3-node[data-type="Oracle"] .node-body {
  padding-top: 8px;
}
.r3-node[data-type="Oracle"] .node-body-label,
.r3-node[data-type="Oracle"] .node-reason-chip {
  display: none !important;
}
.oracle-dashboard {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  min-height: 0;
}
.oracle-dashboard-head {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: #b9d1ff;
  font-size: 9px;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.oracle-dashboard-head > b {
  margin-right: auto;
  color: #d8e6ff;
  font-size: 9px;
  letter-spacing: .1em;
}
.oracle-live-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  border: 1px solid rgba(151, 187, 255, .5);
  background: rgba(98, 137, 214, .35);
  box-shadow: 0 0 0 2px rgba(90, 136, 230, .08);
}
.oracle-live-dot.is-live {
  background: #9fc0ff;
  box-shadow: 0 0 8px rgba(117, 164, 255, .8), 0 0 0 2px rgba(90, 136, 230, .14);
}
.oracle-metric {
  display: inline-flex;
  gap: 3px;
  align-items: baseline;
  padding: 2px 5px;
  border: 1px solid rgba(120, 161, 242, .2);
  background: rgba(59, 95, 169, .1);
  white-space: nowrap;
  color: rgba(201, 219, 255, .76);
  letter-spacing: .02em;
  text-transform: none;
}
.oracle-metric strong { color: #eef5ff; font-size: 10px; }
.oracle-active-card {
  display: grid;
  gap: 4px;
  padding: 8px 9px;
  min-width: 0;
  border: 1px solid rgba(116, 159, 244, .27);
  background: linear-gradient(135deg, rgba(51, 88, 165, .18), rgba(18, 36, 77, .12));
  box-shadow: inset 2px 0 0 rgba(116, 164, 255, .55);
}
.oracle-active-card.is-empty { opacity: .72; }
.oracle-active-title {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.oracle-active-title b {
  overflow: hidden;
  color: #f0f6ff;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.oracle-active-title span {
  margin-left: auto;
  padding: 1px 5px;
  border: 1px solid rgba(123, 167, 255, .25);
  color: #a9c7ff;
  font-size: 8px;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
}
.oracle-active-output {
  color: color-mix(in srgb, var(--ink) 92%, #b9d0ff);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.35;
}
.oracle-active-detail {
  color: color-mix(in srgb, var(--muted) 80%, #9cbcff);
  font-size: 9px;
  line-height: 1.35;
}
.oracle-summary-strip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 7px;
  align-items: start;
  padding: 6px 8px;
  border-top: 1px solid rgba(109, 153, 239, .18);
  background: rgba(28, 55, 111, .08);
}
.oracle-summary-strip b {
  color: #8fb5ff;
  font-size: 8px;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.oracle-summary-strip span {
  color: color-mix(in srgb, var(--muted) 78%, #b8d0ff);
  font-size: 9px;
  line-height: 1.35;
}
.r3-node[data-type="Oracle"] .node-tools {
  max-height: 54px;
}
.r3-node[data-type="Oracle"] .tool-bubble {
  min-height: 40px;
}
@media (max-width: 720px) {
  .oracle-dashboard-head { gap: 4px; }
  .oracle-metric { padding-inline: 4px; }
  .oracle-active-card { padding: 7px; }
}


/* Oracle compact dashboard: tiny live activity preview, Oracle output first. */
.r3-node[data-type="Oracle"] .node-body {
  max-height: none !important;
  overflow: hidden !important;
}
.r3-node[data-type="Oracle"] .node-body-content {
  overflow: hidden !important;
}
.oracle-active-card {
  padding: 5px 7px;
  gap: 0;
}
.oracle-active-title {
  gap: 5px;
}
.oracle-active-title b {
  flex: 1 1 auto;
}
.oracle-active-title .oracle-active-snippet {
  flex: 0 0 auto;
  max-width: 72px;
  padding: 1px 4px;
  overflow: hidden;
  border: 1px solid rgba(123, 167, 255, .18);
  color: color-mix(in srgb, var(--muted) 76%, #aac7ff);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0;
  text-overflow: ellipsis;
  text-transform: none;
  white-space: nowrap;
}
.oracle-active-title .oracle-active-tool {
  margin-left: 0;
}
.oracle-active-output,
.oracle-active-detail {
  display: none !important;
}
.oracle-summary-panel {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid rgba(109, 153, 239, .2);
  background: rgba(28, 55, 111, .11);
  box-shadow: inset 2px 0 0 rgba(116, 164, 255, .42);
}
.oracle-summary-panel > b {
  color: #8fb5ff;
  font-size: 8px;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.oracle-summary-panel > span {
  display: -webkit-box;
  overflow: hidden;
  color: color-mix(in srgb, var(--ink) 88%, #bfd4ff);
  font-size: 10px;
  line-height: 1.3;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}
.oracle-summary-strip {
  display: none !important;
}
@media (max-width: 720px) {
  html.r3-mobile-device .app-shell:not(.chat-mode) .r3-node[data-type="Oracle"] .node-body {
    max-height: none !important;
    overflow: hidden !important;
  }
  .oracle-summary-panel > span {
    -webkit-line-clamp: 3;
  }
}


/* Oracle: summary-first canvas UI. Header controls remain the drill-down surface. */
.r3-node[data-type="Oracle"] {
  min-height: 0 !important;
}
.r3-node[data-type="Oracle"] .node-body {
  max-height: none !important;
  min-height: 112px !important;
  padding: 8px 9px 9px !important;
  overflow: hidden !important;
}
.r3-node[data-type="Oracle"] .node-body-content {
  height: auto !important;
  max-height: none !important;
  overflow: hidden !important;
}
.r3-node[data-type="Oracle"] .node-tools {
  display: none !important;
}
.oracle-summary-only {
  display: grid;
  gap: 7px;
  min-width: 0;
}
.oracle-summary-only-head {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #a9c7ff;
  font-size: 8px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.oracle-summary-only-head b {
  color: #d8e6ff;
  font-size: 8px;
}
.oracle-summary-only-text {
  display: -webkit-box;
  overflow: hidden;
  color: color-mix(in srgb, var(--ink) 92%, #c7d9ff);
  font-size: 11px;
  font-weight: 620;
  line-height: 1.38;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 8;
}
@media (max-width: 720px) {
  .r3-node[data-type="Oracle"] .node-body {
    min-height: 104px !important;
  }
  .oracle-summary-only-text {
    font-size: 10px;
    -webkit-line-clamp: 7;
  }
}


/* Agent running card: compact thinking row with animated brain + dots */
.r3-node[data-type="Agent"] .node-body {
  max-height: 108px !important;
}
.r3-node[data-type="Agent"] .ai-node-thinking-mode {
  gap: 0 !important;
}
.r3-node[data-type="Agent"] .ai-thinking-shell {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  padding: 7px 10px;
  border: 1px solid color-mix(in srgb, var(--soft-line) 82%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 86%, transparent), color-mix(in srgb, var(--panel) 80%, var(--bg)));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, rgba(255,255,255,.03) 100%, transparent);
}
.r3-node[data-type="Agent"] .ai-thinking-brain {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 21px;
  height: 21px;
  color: color-mix(in srgb, var(--accent) 86%, #fff 14%);
  flex: 0 0 auto;
  animation: r3AiThinkingPulse 1.55s ease-in-out infinite;
}
.r3-node[data-type="Agent"] .ai-thinking-brain svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.r3-node[data-type="Agent"] .ai-thinking-inline {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.r3-node[data-type="Agent"] .ai-thinking-inline strong {
  color: var(--ink);
  font-size: 12px;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.r3-node[data-type="Agent"] .ai-thinking-dots {
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  min-width: 15px;
}
.r3-node[data-type="Agent"] .ai-thinking-dots span {
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 92%, transparent);
  opacity: .28;
  animation: r3AiThinkingDots 1.2s ease-in-out infinite;
}
.r3-node[data-type="Agent"] .ai-thinking-dots span:nth-child(2) { animation-delay: .16s; }
.r3-node[data-type="Agent"] .ai-thinking-dots span:nth-child(3) { animation-delay: .32s; }

@keyframes r3AiThinkingDots {
  0%, 80%, 100% { opacity: .25; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-1px); }
}
@keyframes r3AiThinkingPulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(255,255,255,0)); }
  50% { transform: scale(1.05); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 28%, transparent)); }
}

@media (max-width: 720px) {
  .r3-node[data-type="Agent"] .node-body {
    max-height: 100px !important;
  }
  .r3-node[data-type="Agent"] .ai-thinking-shell {
    min-height: 34px;
    padding: 6px 8px;
  }
  .r3-node[data-type="Agent"] .ai-thinking-inline strong {
    font-size: 11px;
  }
}


/* Agent running UI hotfix: compact fixed brain + guaranteed animated dots. */
.r3-node[data-type="Agent"].running .node-body,
.r3-node.is-agent-v2.running .node-body {
  min-height: 0 !important;
  max-height: 58px !important;
  height: auto !important;
  padding: 7px 9px !important;
  overflow: hidden !important;
}
.r3-node[data-type="Agent"].running .node-body-content,
.r3-node.is-agent-v2.running .node-body-content {
  min-height: 0 !important;
  height: auto !important;
  max-height: 44px !important;
  overflow: hidden !important;
}
.r3-node[data-type="Agent"] .ai-node-thinking-mode {
  display: block !important;
  min-height: 0 !important;
  height: auto !important;
}
.r3-node[data-type="Agent"] .ai-thinking-shell {
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  min-height: 36px !important;
  height: 36px !important;
  padding: 6px 9px !important;
  overflow: hidden !important;
  border: 1px solid color-mix(in srgb, var(--soft-line) 86%, transparent) !important;
  background: color-mix(in srgb, var(--bg) 82%, var(--panel)) !important;
}
.r3-node[data-type="Agent"] .ai-thinking-brain {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  flex: 0 0 18px !important;
  overflow: hidden !important;
  color: var(--check-gold, var(--accent)) !important;
  animation: r3AiThinkingPulse 1.35s ease-in-out infinite !important;
}
.r3-node[data-type="Agent"] .ai-thinking-brain svg {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  flex: none !important;
  overflow: hidden !important;
}
.r3-node[data-type="Agent"] .ai-thinking-inline {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  white-space: nowrap !important;
}
.r3-node[data-type="Agent"] .ai-thinking-inline strong {
  font-size: 11px !important;
  line-height: 1 !important;
  letter-spacing: .08em !important;
}
.r3-node[data-type="Agent"] .ai-thinking-dots {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  width: 18px !important;
  height: 8px !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.r3-node[data-type="Agent"] .ai-thinking-dots i {
  display: block !important;
  width: 4px !important;
  height: 4px !important;
  min-width: 4px !important;
  border-radius: 50% !important;
  background: currentColor !important;
  color: var(--ink) !important;
  opacity: .25;
  animation: r3AiThinkingDots 1s ease-in-out infinite !important;
}
.r3-node[data-type="Agent"] .ai-thinking-dots i:nth-child(2) { animation-delay: .14s !important; }
.r3-node[data-type="Agent"] .ai-thinking-dots i:nth-child(3) { animation-delay: .28s !important; }

/* Oracle: remove READY/status strip; make summary the visual focus. */
.r3-node[data-type="Oracle"] .node-body {
  min-height: 124px !important;
  max-height: none !important;
  padding: 10px 12px 12px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(92,145,255,.10), transparent 42%),
    linear-gradient(180deg, rgba(16,24,44,.92), rgba(10,14,24,.96)) !important;
}
.r3-node[data-type="Oracle"] .oracle-summary-only {
  display: block !important;
  min-width: 0 !important;
  padding: 0 !important;
}
.r3-node[data-type="Oracle"] .oracle-summary-only-head {
  display: none !important;
}
.r3-node[data-type="Oracle"] .oracle-summary-only-text {
  display: -webkit-box !important;
  margin: 0 !important;
  padding: 10px 12px !important;
  min-height: 92px !important;
  overflow: hidden !important;
  border: 1px solid rgba(117,160,255,.22) !important;
  border-left: 3px solid rgba(111,158,255,.68) !important;
  background: rgba(3,8,18,.38) !important;
  box-shadow: inset 0 0 24px rgba(56,102,214,.08) !important;
  color: #e8efff !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  line-height: 1.42 !important;
  text-align: left !important;
  overflow-wrap: anywhere !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 9 !important;
}
.r3-node[data-type="Oracle"].running .oracle-summary-only-text::after {
  content: "▌";
  display: inline;
  margin-left: 2px;
  color: #8db4ff;
  animation: r3OracleCaret .72s steps(1,end) infinite;
}
@keyframes r3OracleCaret {
  0%, 48% { opacity: 1; }
  49%, 100% { opacity: 0; }
}

@media (max-width: 720px) {
  .r3-node[data-type="Agent"].running .node-body,
  .r3-node.is-agent-v2.running .node-body {
    max-height: 54px !important;
    padding: 6px 8px !important;
  }
  .r3-node[data-type="Oracle"] .node-body {
    min-height: 112px !important;
    padding: 8px 9px 10px !important;
  }
  .r3-node[data-type="Oracle"] .oracle-summary-only-text {
    min-height: 84px !important;
    font-size: 10px !important;
    -webkit-line-clamp: 8 !important;
  }
}


/* Agent thinking brain + animated dots visual fix */
.r3-node[data-type="Agent"] .ai-thinking-shell {
  justify-content: flex-start !important;
}
.r3-node[data-type="Agent"] .ai-thinking-brain,
.r3-node.is-agent-v2 .ai-thinking-brain {
  color: color-mix(in srgb, var(--accent) 85%, #fff 15%) !important;
  filter: drop-shadow(0 0 5px rgba(224, 190, 92, .18)) !important;
}
.r3-node[data-type="Agent"] .ai-thinking-inline,
.r3-node.is-agent-v2 .ai-thinking-inline {
  color: var(--ink) !important;
}
.r3-node[data-type="Agent"] .ai-thinking-inline strong,
.r3-node.is-agent-v2 .ai-thinking-inline strong {
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: none !important;
  letter-spacing: .01em !important;
}
.r3-node[data-type="Agent"] .ai-thinking-dots,
.r3-node.is-agent-v2 .ai-thinking-dots {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 0 !important;
  width: auto !important;
  min-width: 14px !important;
  height: auto !important;
  line-height: 1 !important;
  color: var(--ink) !important;
}
.r3-node[data-type="Agent"] .ai-thinking-dots i,
.r3-node.is-agent-v2 .ai-thinking-dots i {
  display: inline-block !important;
  width: auto !important;
  min-width: 3px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  color: currentColor !important;
  font-style: normal !important;
  font-size: 13px !important;
  line-height: 1 !important;
  opacity: .22 !important;
  transform: translateY(0) !important;
  animation: r3ThinkingDotPulse 1.1s ease-in-out infinite !important;
}
.r3-node[data-type="Agent"] .ai-thinking-dots i:nth-child(2),
.r3-node.is-agent-v2 .ai-thinking-dots i:nth-child(2) { animation-delay: .15s !important; }
.r3-node[data-type="Agent"] .ai-thinking-dots i:nth-child(3),
.r3-node.is-agent-v2 .ai-thinking-dots i:nth-child(3) { animation-delay: .3s !important; }

@keyframes r3ThinkingDotPulse {
  0%, 80%, 100% { opacity: .2; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-1px); }
}


/* Agent thinking final line/animation fix */
.r3-node[data-type="Agent"] .ai-node-card.ai-node-thinking-mode,
.r3-node.is-agent-v2 .ai-node-card.ai-node-thinking-mode {
  display: block !important;
  gap: 0 !important;
}
.r3-node[data-type="Agent"] .ai-thinking-shell,
.r3-node.is-agent-v2 .ai-thinking-shell {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  min-height: 34px !important;
  height: 34px !important;
  padding: 6px 9px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}
.r3-node[data-type="Agent"] .ai-thinking-row,
.r3-node.is-agent-v2 .ai-thinking-row {
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 7px !important;
  white-space: nowrap !important;
  width: auto !important;
  min-width: 0 !important;
}
.r3-node[data-type="Agent"] .ai-thinking-brain,
.r3-node.is-agent-v2 .ai-thinking-brain {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 18px !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  line-height: 0 !important;
  color: color-mix(in srgb, var(--accent) 85%, #fff 15%) !important;
}
.r3-node[data-type="Agent"] .ai-thinking-brain svg,
.r3-node.is-agent-v2 .ai-thinking-brain svg {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
  transform-origin: 50% 50% !important;
  animation: r3ThinkingBrainPulse 1.3s ease-in-out infinite !important;
  will-change: transform, filter, opacity !important;
}
.r3-node[data-type="Agent"] .ai-thinking-label,
.r3-node.is-agent-v2 .ai-thinking-label {
  display: inline-block !important;
  margin: 0 !important;
  color: var(--ink) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: .01em !important;
  white-space: nowrap !important;
}
.r3-node[data-type="Agent"] .ai-thinking-dots,
.r3-node.is-agent-v2 .ai-thinking-dots {
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 3px !important;
  width: auto !important;
  min-width: 18px !important;
  height: 8px !important;
  color: var(--ink) !important;
  white-space: nowrap !important;
}
.r3-node[data-type="Agent"] .ai-thinking-dots span,
.r3-node.is-agent-v2 .ai-thinking-dots span {
  display: block !important;
  width: 4px !important;
  height: 4px !important;
  min-width: 4px !important;
  min-height: 4px !important;
  border-radius: 999px !important;
  background: currentColor !important;
  opacity: .22 !important;
  animation: r3ThinkingDotsPulse 1.1s ease-in-out infinite !important;
  will-change: transform, opacity !important;
}
.r3-node[data-type="Agent"] .ai-thinking-dots span:nth-child(2),
.r3-node.is-agent-v2 .ai-thinking-dots span:nth-child(2) {
  animation-delay: .15s !important;
}
.r3-node[data-type="Agent"] .ai-thinking-dots span:nth-child(3),
.r3-node.is-agent-v2 .ai-thinking-dots span:nth-child(3) {
  animation-delay: .30s !important;
}

@keyframes r3ThinkingBrainPulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(0,0,0,0)); opacity: .92; }
  50% { transform: scale(1.1); filter: drop-shadow(0 0 5px rgba(224,190,92,.22)); opacity: 1; }
}
@keyframes r3ThinkingDotsPulse {
  0%, 80%, 100% { opacity: .24; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-1px); }
}


/* Chat live Oracle toggle: one-click summary-only mode. */
.r3-chat-live-run {
  position: relative;
}
.r3-chat-live-normal {
  display: grid;
  gap: 10px;
}
.r3-chat-oracle-toggle {
  position: absolute;
  z-index: 5;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 29px;
  height: 29px;
  padding: 0;
  border: 1px solid color-mix(in srgb, #79a8ff 58%, var(--soft-line));
  background: color-mix(in srgb, var(--panel) 86%, #1e4f9f 14%);
  color: #9fc1ff;
  box-shadow: 2px 2px 0 var(--shadow);
  cursor: pointer;
}
.r3-chat-oracle-toggle svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}
.r3-chat-oracle-toggle:hover,
.r3-chat-oracle-toggle.is-active {
  color: #e8f0ff;
  border-color: #78a8ff;
  background: color-mix(in srgb, #2458ae 42%, var(--panel));
  box-shadow: 0 0 12px rgba(70, 124, 235, .20), 2px 2px 0 var(--shadow);
}
.r3-chat-oracle-view {
  display: none;
}
.r3-chat-live-run.is-oracle-view {
  min-height: 156px;
  padding: 12px;
  border-color: rgba(105, 153, 255, .48);
  background:
    radial-gradient(circle at 18% 0%, rgba(78, 130, 245, .14), transparent 48%),
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 84%, #102850), color-mix(in srgb, var(--bg) 93%, #08162d));
}
.r3-chat-live-run.is-oracle-view .r3-chat-live-normal {
  display: none !important;
}
.r3-chat-live-run.is-oracle-view .r3-chat-oracle-view {
  display: grid;
  gap: 9px;
  min-height: 130px;
  padding: 12px 46px 12px 13px;
  border: 1px solid rgba(111, 158, 255, .24);
  border-left: 3px solid rgba(111, 158, 255, .72);
  background: rgba(4, 10, 22, .34);
  box-shadow: inset 0 0 26px rgba(59, 105, 214, .07);
}

.r3-chat-oracle-actions {
  display: grid;
  gap: 8px;
}
.r3-chat-oracle-ask-btn-wrap {
  justify-self: start;
}
.r3-chat-oracle-ask-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: start;
  min-height: 33px;
  padding: 7px 12px;
  border: 1px solid rgba(114, 164, 255, .56);
  background: linear-gradient(180deg, rgba(58, 104, 197, .82), rgba(28, 59, 118, .84));
  color: #eef4ff;
  box-shadow: 0 0 16px rgba(59, 105, 214, .14), 2px 2px 0 rgba(0,0,0,.14);
  cursor: pointer;
}
.r3-chat-oracle-ask-btn:hover:not(:disabled),
.r3-chat-oracle-ask-btn.is-open {
  border-color: #9fc1ff;
  box-shadow: 0 0 18px rgba(94, 144, 247, .2), 2px 2px 0 rgba(0,0,0,.14);
}
.r3-chat-oracle-ask-btn:disabled {
  opacity: .46;
  cursor: not-allowed;
}
.r3-chat-oracle-ask-btn span {
  color: #9fc1ff;
  font-size: 12px;
}
.r3-chat-oracle-ask-btn b {
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.r3-chat-oracle-mini {
  display: grid;
  gap: 6px;
  padding: 9px 10px;
  border: 1px solid rgba(111, 158, 255, .18);
  background: rgba(5, 11, 23, .5);
}
.r3-chat-oracle-mini.is-user {
  border-color: rgba(205, 177, 112, .18);
  background: rgba(49, 38, 16, .22);
}
.r3-chat-oracle-mini.is-empty {
  gap: 4px;
}
.r3-chat-oracle-mini-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.r3-chat-oracle-mini-head b {
  color: #d8e6ff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.r3-chat-oracle-mini-head small {
  color: #8ca3cd;
  font-size: 9px;
  font-weight: 800;
}
.r3-chat-oracle-mini-body {
  color: #dfe9ff;
  font-size: 11px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.r3-chat-oracle-mini.is-empty span {
  color: #8ea4cd;
  font-size: 11px;
  line-height: 1.4;
}
.r3-chat-oracle-mini-more {
  justify-self: start;
  padding: 0;
  border: 0;
  background: transparent;
  color: #9fc1ff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  cursor: pointer;
}
.r3-chat-oracle-ask-form {
  display: grid;
  gap: 7px;
  padding: 9px 10px;
  border: 1px solid rgba(111, 158, 255, .22);
  background: rgba(3, 8, 17, .34);
}
.r3-chat-oracle-ask-form textarea {
  width: 100%;
  min-height: 54px;
  resize: vertical;
  border: 1px solid rgba(111, 158, 255, .28);
  outline: none;
  background: rgba(2, 7, 15, .72);
  color: #edf3ff;
  padding: 8px 9px;
  font: inherit;
  font-size: 11px;
  line-height: 1.4;
}
.r3-chat-oracle-ask-form textarea:focus {
  border-color: rgba(123, 170, 255, .76);
  box-shadow: 0 0 0 2px rgba(68, 119, 222, .10);
}
.r3-chat-oracle-ask-actions {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
}
.r3-chat-oracle-cancel-btn,
.r3-chat-oracle-send-btn {
  min-height: 30px;
  padding: 6px 11px;
  border: 1px solid rgba(111, 158, 255, .32);
  background: rgba(7, 13, 25, .6);
  color: #dfeaff;
  font-size: 11px;
  font-weight: 800;
}
.r3-chat-oracle-send-btn {
  border-color: rgba(114, 164, 255, .58);
  background: linear-gradient(180deg, rgba(59, 105, 199, .70), rgba(31, 64, 127, .72));
}
.r3-chat-oracle-cancel-btn:hover,
.r3-chat-oracle-send-btn:hover:not(:disabled) {
  border-color: #9fc1ff;
}
.r3-chat-oracle-send-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.r3-oracle-message-dialog {
  width: min(680px, calc(100vw - 32px));
  max-width: 680px;
  max-height: min(82vh, 720px);
  padding: 0;
  border: 1px solid rgba(111, 158, 255, .36);
  background: color-mix(in srgb, var(--panel) 94%, #08152b);
  color: var(--ink);
  overflow: hidden;
  box-shadow: 0 22px 70px rgba(0, 0, 0, .48), 0 0 0 1px rgba(103, 153, 255, .08);
}
.r3-oracle-message-dialog::backdrop {
  background: rgba(0, 0, 0, .68);
  backdrop-filter: blur(3px);
}
.r3-oracle-message-card {
  width: 100%;
  max-width: none;
  max-height: min(82vh, 720px);
  min-width: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
  overflow: hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 90%, #102850), color-mix(in srgb, var(--bg) 95%, #071326));
  box-shadow: none;
}
.r3-oracle-message-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
  padding: 13px 14px 12px 16px;
  border-bottom: 1px solid rgba(111, 158, 255, .24);
  background: linear-gradient(180deg, rgba(49, 78, 132, .18), rgba(12, 22, 40, .12));
}
.r3-oracle-message-head > div {
  min-width: 0;
}
.r3-oracle-message-head b {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #edf4ff;
  font-size: 14px;
  line-height: 1.25;
}
.r3-oracle-message-head small {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #8fa9d8;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
}
.r3-oracle-message-head [data-oracle-message-close] {
  flex: 0 0 auto;
}
.r3-oracle-message-body {
  min-width: 0;
  min-height: 150px;
  margin: 0;
  max-height: min(66vh, 560px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  padding: 16px 18px 18px;
  border: 0;
  background: rgba(4, 9, 18, .54);
  color: #e8f0ff;
  font: 13px/1.65 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  box-sizing: border-box;
}
.r3-oracle-message-body::-webkit-scrollbar {
  width: 9px;
}
.r3-oracle-message-body::-webkit-scrollbar-thumb {
  background: rgba(126, 165, 235, .34);
  border: 2px solid transparent;
  background-clip: padding-box;
}
@media (max-width: 720px) {
  .r3-chat-oracle-ask-btn {
    width: 100%;
    justify-content: center;
  }
  .r3-chat-oracle-mini-body,
  .r3-chat-oracle-mini.is-empty span,
  .r3-chat-oracle-ask-form textarea {
    font-size: 10px;
  }
  .r3-oracle-message-dialog {
    width: calc(100vw - 18px);
    max-height: calc(100vh - 18px);
  }
  .r3-oracle-message-card {
    max-height: calc(100vh - 18px);
  }
  .r3-oracle-message-head {
    padding: 11px 10px 10px 12px;
  }
  .r3-oracle-message-body {
    min-height: 120px;
    max-height: calc(100vh - 86px);
    padding: 13px 14px 15px;
    font-size: 12px;
  }
}
.r3-chat-oracle-kicker {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.r3-chat-oracle-kicker > span {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #79a8ff;
  box-shadow: 0 0 9px rgba(121, 168, 255, .72);
}
.r3-chat-oracle-kicker b {
  color: #dce8ff;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.r3-chat-oracle-kicker small {
  color: #8198c2;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.r3-chat-oracle-text {
  color: #e7efff;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.r3-chat-live-run.is-oracle-view .r3-chat-oracle-text::after {
  content: "▌";
  margin-left: 2px;
  color: #8db4ff;
  animation: r3ChatOracleCaret .72s steps(1, end) infinite;
}
@keyframes r3ChatOracleCaret {
  0%, 48% { opacity: 1; }
  49%, 100% { opacity: 0; }
}
@media (max-width: 720px) {
  .r3-chat-oracle-toggle {
    top: 7px;
    right: 7px;
    width: 28px;
    height: 28px;
  }
  .r3-chat-live-run.is-oracle-view {
    min-height: 138px;
  }
  .r3-chat-live-run.is-oracle-view .r3-chat-oracle-view {
    min-height: 112px;
    padding: 10px 39px 10px 11px;
  }
  .r3-chat-oracle-text {
    font-size: 12px;
    line-height: 1.45;
  }
}


/* Oracle Context Chat — compact linked Q&A companion. */
.r3-node[data-type="OracleChat"] {
  width: 350px !important;
  border-color: rgba(105, 153, 255, .45) !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(70, 127, 241, .13), transparent 42%),
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 92%, #102b55 8%), color-mix(in srgb, var(--bg) 96%, #081629 4%)) !important;
  box-shadow: 7px 7px 0 var(--shadow), 0 0 22px rgba(55, 102, 205, .08) !important;
}
.r3-node[data-type="OracleChat"] .node-head {
  border-bottom-color: rgba(111, 158, 255, .28) !important;
  background: linear-gradient(90deg, rgba(31, 72, 139, .62), rgba(25, 31, 47, .92)) !important;
}
.r3-node[data-type="OracleChat"] .node-kind {
  color: #a8c5ff !important;
}
.r3-node[data-type="OracleChat"] .node-status,
.r3-node[data-type="OracleChat"] .node-tools,
.r3-node[data-type="OracleChat"] .node-timer:not(.node-cost),
.r3-node[data-type="OracleChat"] .node-head-tools .node-output-popout-btn,
.r3-node[data-type="OracleChat"] .node-head-tools [data-node-action="live"],
.r3-node[data-type="OracleChat"] .node-head-tools [data-node-action="tools"] {
  display: none !important;
}
.r3-node[data-type="OracleChat"] .node-body {
  min-height: 314px !important;
  height: 314px !important;
  max-height: 314px !important;
  padding: 8px !important;
  overflow: hidden !important;
  background: rgba(4, 9, 18, .30) !important;
}
.r3-node[data-type="OracleChat"] .node-body-content {
  height: 100% !important;
  max-height: none !important;
  overflow: hidden !important;
}
.oracle-context-chat {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  gap: 7px;
  height: 100%;
  min-height: 0;
}
.oracle-context-thread {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  padding: 2px 2px 5px;
}
.oracle-context-message {
  display: grid;
  gap: 3px;
  max-width: 88%;
}
.oracle-context-message small {
  color: #7288ad;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.oracle-context-message > div {
  padding: 7px 9px;
  border: 1px solid rgba(111, 158, 255, .18);
  background: rgba(8, 16, 31, .62);
  color: #e7efff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.42;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.oracle-context-message.is-user {
  align-self: flex-end;
}
.oracle-context-message.is-user small {
  text-align: right;
}
.oracle-context-message.is-user > div {
  border-color: rgba(205, 177, 112, .28);
  background: rgba(70, 55, 26, .28);
  color: var(--ink);
}
.oracle-context-message.is-assistant {
  align-self: flex-start;
}
.oracle-context-message.is-thinking > div {
  display: inline-flex;
  gap: 4px;
  width: 34px;
  align-items: center;
  justify-content: center;
}
.oracle-context-message.is-thinking > div span {
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: #9fc1ff;
  opacity: .22;
  animation: r3OracleContextThinking 1s ease-in-out infinite;
}
.oracle-context-message.is-thinking > div span:nth-child(2) { animation-delay: .14s; }
.oracle-context-message.is-thinking > div span:nth-child(3) { animation-delay: .28s; }
@keyframes r3OracleContextThinking {
  0%, 80%, 100% { opacity: .22; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-1px); }
}
.oracle-context-empty {
  display: grid;
  gap: 6px;
  place-content: center;
  min-height: 130px;
  padding: 16px;
  border: 1px dashed rgba(111, 158, 255, .22);
  background: rgba(3, 8, 17, .26);
  text-align: center;
}
.oracle-context-empty b {
  color: #dce8ff;
  font-size: 12px;
}
.oracle-context-empty span {
  color: #7f93b8;
  font-size: 10px;
  line-height: 1.45;
}
.oracle-context-compose {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  gap: 6px;
  align-items: stretch;
}
.oracle-context-compose textarea {
  width: 100%;
  min-height: 44px;
  max-height: 74px;
  resize: none;
  border: 1px solid rgba(111, 158, 255, .28);
  outline: none;
  background: rgba(2, 7, 15, .72);
  color: #edf3ff;
  padding: 7px 8px;
  font: inherit;
  font-size: 10px;
  line-height: 1.35;
}
.oracle-context-compose textarea:focus {
  border-color: rgba(123, 170, 255, .76);
  box-shadow: 0 0 0 2px rgba(68, 119, 222, .10);
}
.oracle-context-compose textarea:disabled {
  opacity: .55;
}
.oracle-context-compose button {
  border: 1px solid rgba(114, 164, 255, .58);
  background: linear-gradient(180deg, rgba(59, 105, 199, .70), rgba(31, 64, 127, .72));
  color: #eef4ff;
  font-size: 16px;
  font-weight: 900;
  cursor: pointer;
}
.oracle-context-compose button:hover:not(:disabled) {
  border-color: #8cb4ff;
  box-shadow: 0 0 10px rgba(82, 135, 238, .18);
}
.oracle-context-compose button:disabled {
  opacity: .38;
  cursor: default;
}
.oracle-context-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  color: #6f84aa;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.oracle-context-meta span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.oracle-context-meta span:last-child {
  color: #91acd8;
  flex: 0 0 auto;
}
.oracle-context-wire {
  stroke: #7eaaff !important;
  stroke-width: 2.1px !important;
  stroke-dasharray: 4 6 !important;
  opacity: .72 !important;
  animation: r3OracleContextWire 1.6s linear infinite;
}
@keyframes r3OracleContextWire {
  to { stroke-dashoffset: -20; }
}

@media (max-width: 720px) {
  .r3-node[data-type="OracleChat"] {
    width: 315px !important;
  }
  .r3-node[data-type="OracleChat"] .node-body {
    min-height: 286px !important;
    height: 286px !important;
    max-height: 286px !important;
  }
  .oracle-context-message > div {
    font-size: 10px;
  }
}


/* UI cleanup: bounded context menu, top-level Chat Oracle toggle, polished Chat panel headers. */

/* Context menu copy must never dictate viewport width. */
.r3-context-menu {
  width: 310px !important;
  min-width: 0 !important;
  max-width: calc(100vw - 16px) !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}
.r3-context-menu button {
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
.r3-context-menu .ctx-copy {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}
.r3-context-menu .ctx-copy small {
  display: block !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

/* Live Oracle eye belongs to the assistant bubble corner, not the nested run card. */
.r3-chat-row.is-live .r3-chat-bubble-actions.top {
  opacity: 1 !important;
  transform: none !important;
}
.r3-chat-bubble-actions .r3-chat-oracle-toggle-bubble {
  position: static !important;
  inset: auto !important;
  width: 29px !important;
  height: 27px !important;
  min-width: 29px !important;
  flex: 0 0 29px !important;
  box-shadow: 2px 2px 0 var(--shadow) !important;
}
.r3-chat-live-run > .r3-chat-oracle-toggle {
  display: none !important;
}

/* Chat sidebar fold headers: replace native gray buttons with R3D3 panel chrome. */
.r3-chat-panel {
  padding: 0 !important;
  overflow: hidden !important;
  border-color: color-mix(in srgb, var(--soft-line) 80%, var(--accent) 20%) !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 94%, var(--accent) 6%), var(--panel)) !important;
}
.r3-chat-panel-head {
  min-height: 40px;
  padding: 0 !important;
  border-bottom: 1px solid color-mix(in srgb, var(--soft-line) 78%, transparent);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 9%, var(--panel-2)), color-mix(in srgb, var(--panel-2) 90%, var(--panel)));
}
.r3-chat-panel-toggle {
  appearance: none;
  -webkit-appearance: none;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 9px 11px;
  border: 0;
  border-left: 3px solid transparent;
  border-radius: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
}
.r3-chat-panel-toggle:hover,
.r3-chat-panel-toggle:focus-visible {
  color: var(--accent);
  border-left-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.r3-chat-panel-toggle span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.r3-chat-panel-toggle i {
  margin-left: auto;
  color: var(--accent);
  font-size: 12px;
  font-style: normal;
  line-height: 1;
  transition: transform .16s ease;
}
.r3-chat-panel-toggle[aria-expanded="false"] i {
  transform: rotate(-90deg);
}
.r3-chat-panel-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding-right: 8px;
}
.r3-chat-panel-head > .ui-btn {
  flex: 0 0 auto;
  margin-right: 8px;
}
.r3-chat-panel-body {
  display: grid;
  gap: 10px;
  padding: 10px 11px 11px;
}

@media (max-width: 720px) {
  .r3-context-menu {
    width: min(310px, calc(100vw - 16px)) !important;
  }
  .r3-chat-bubble-actions .r3-chat-oracle-toggle-bubble {
    width: 28px !important;
    height: 27px !important;
    min-width: 28px !important;
    flex-basis: 28px !important;
  }
}


/* Oracle summaries in Chat: clickable node references + persistent completed-run view. */
.r3-chat-oracle-node-link {
  display: inline;
  color: #a9c8ff;
  font-weight: 850;
  text-decoration: none;
  border-bottom: 1px solid rgba(129, 174, 255, .52);
  background: linear-gradient(180deg, transparent 58%, rgba(78, 128, 232, .12) 58%);
  border-radius: 2px;
  padding: 0 1px;
  cursor: pointer;
}
.r3-chat-oracle-node-link:hover,
.r3-chat-oracle-node-link:focus-visible {
  color: #e8f1ff;
  border-bottom-color: #9fc1ff;
  background: rgba(79, 132, 239, .17);
  outline: none;
  box-shadow: 0 0 0 2px rgba(84, 139, 245, .10);
}
.r3-chat-oracle-history {
  display: grid;
  gap: 10px;
  min-height: 112px;
  padding: 13px 14px;
  border: 1px solid rgba(111, 158, 255, .26);
  border-left: 3px solid rgba(111, 158, 255, .76);
  background:
    radial-gradient(circle at 14% 0%, rgba(72, 128, 241, .12), transparent 46%),
    rgba(4, 10, 22, .40);
  box-shadow: inset 0 0 28px rgba(55, 103, 212, .08);
}
.r3-chat-oracle-history-text {
  color: #e7efff;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.52;
  overflow-wrap: anywhere;
}
.r3-chat-row.is-oracle-history-view .r3-chat-bubble {
  border-color: rgba(105, 153, 255, .40);
  background:
    radial-gradient(circle at 16% 0%, rgba(71, 126, 238, .09), transparent 44%),
    var(--panel);
}
.r3-chat-row.is-oracle-history-view .r3-chat-bubble-actions.top {
  opacity: 1 !important;
  transform: none !important;
}

@media (max-width: 720px) {
  .r3-chat-oracle-history {
    padding: 11px 12px;
  }
  .r3-chat-oracle-history-text {
    font-size: 12px;
    line-height: 1.48;
  }
}

/* R3D3 pass328 · node-settings long field containment · 2026-09-09 */
.right-panel,
.right-panel .panel-section,
.right-panel .panel-content,
.right-panel .node-options,
.right-panel .option-card,
.right-panel .option-fold,
.right-panel .option-fold-content,
.right-panel label {
  min-width: 0;
  max-width: 100%;
}

.right-panel {
  overflow-x: hidden;
}

.right-panel input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.right-panel textarea,
.right-panel select {
  min-width: 0;
  max-width: 100%;
}

.right-panel textarea {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  overflow-x: hidden;
}

.right-panel .option-help,
.right-panel label > small {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Chat run settings: keep compact checkbox controls aligned as one inline row. */
.r3-chat-run-settings label.compact-check {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  width: 100%;
  margin: 0 0 8px;
  color: var(--ink);
  text-transform: none;
  letter-spacing: normal;
}
.r3-chat-run-settings label.compact-check input[type="checkbox"] {
  flex: 0 0 auto;
  width: auto;
  margin: 0;
}
.r3-chat-run-settings label.compact-check > span {
  min-width: 0;
  flex: 0 1 auto;
}

.mediaout-preview-link img,
.image-ref-thumb-link img { cursor: pointer; }


.node-last-frame-btn.is-enabled {
  border-color: color-mix(in srgb, var(--accent) 70%, var(--soft-line));
  color: var(--accent);
}
.video-last-frame-result {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--soft-line);
}
.video-last-frame-result > h4 {
  margin: 0 0 7px;
  color: var(--ink);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.video-last-frame-image {
  max-height: 220px;
  object-fit: contain;
  background: #000;
}
.mediaout-extract-error {
  display: block;
  margin-top: 6px;
  overflow-wrap: anywhere;
}


.r3-node[data-type="MediaContainer"] .node-body {
  max-height: 190px;
}
.r3-node.is-media-drop-target {
  box-shadow: 0 0 0 2px rgba(208,176,113,.9), 0 0 0 6px rgba(208,176,113,.18);
}
.media-container-empty {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}
.media-container-empty > b {
  color: var(--ink);
  font-size: 11px;
  letter-spacing: .04em;
}
.media-container-node {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.media-container-stats {
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: var(--muted);
  font-size: 10px;
}
.media-container-stats > b {
  color: var(--ink);
  font-size: 15px;
}
.media-container-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  gap: 8px;
  max-height: 118px;
  overflow: auto;
  padding-right: 2px;
}
.media-container-thumb {
  position: relative;
  display: block;
  min-height: 56px;
  border: 1px solid rgba(208,176,113,.26);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255,255,255,.03);
}
.media-container-thumb img,
.media-container-thumb video {
  width: 100%;
  height: 56px;
  object-fit: cover;
  display: block;
  background: #050505;
}
.media-container-thumb span {
  position: absolute;
  right: 4px;
  bottom: 4px;
  padding: 2px 5px;
  border-radius: 999px;
  background: rgba(0,0,0,.72);
  color: #fff;
  font-size: 9px;
  letter-spacing: .05em;
}
.media-container-thumb-generic {
  display: flex;
  align-items: center;
  justify-content: center;
}
.media-container-thumb-generic b {
  color: var(--ink);
  font-size: 12px;
}
.media-container-editor {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.media-container-item-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 420px;
  overflow: auto;
  padding-right: 2px;
}
.media-container-item {
  border: 1px solid rgba(208,176,113,.18);
  border-radius: 12px;
  padding: 10px;
  background: rgba(255,255,255,.02);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.media-container-item-main {
  display: flex;
  gap: 10px;
  align-items: center;
}
.media-container-item-preview {
  width: 72px;
  min-width: 72px;
  height: 72px;
  border: 1px solid rgba(208,176,113,.24);
  border-radius: 10px;
  overflow: hidden;
  background: #080808;
  display: block;
}
.media-container-item-preview img,
.media-container-item-preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.media-container-item-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
}
.media-container-item-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.media-container-item-copy > b {
  color: var(--ink);
  font-size: 12px;
}
.media-container-item-copy > small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}


.mediaout-ref-list {
  display:flex;
  flex-direction:column;
  gap:6px;
  max-height:150px;
  overflow:auto;
  padding:2px 2px 2px 0;
}
.mediaout-ref-check {
  align-items:flex-start;
  line-height:1.35;
}
.video-node-preview video {
  width:100%;
  height:auto;
  max-height:150px;
  object-fit:contain;
  background:#000;
}

/* Oracle chat/steer layout: keep textarea + Steer + send controls in one row. */
.oracle-context-compose {
  grid-template-columns: minmax(0, 1fr) minmax(52px, auto) 34px;
}
.oracle-context-compose textarea {
  min-width: 0;
  box-sizing: border-box;
}
.oracle-context-compose button {
  min-width: 0;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.oracle-context-compose .oracle-context-steer-btn {
  min-width: 52px;
  font-size: 10px;
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding-inline: 9px;
}
.oracle-context-compose .oracle-context-send-btn {
  width: 34px;
  min-width: 34px;
  padding: 0;
  font-size: 16px;
}

/* Keep Oracle steer status/proposal labels visually separate from their text. */
.oracle-steer-applied {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgba(111, 158, 255, .24);
  background: rgba(5, 12, 25, .48);
}
.oracle-steer-applied b,
.oracle-steer-applied span {
  display: block;
  min-width: 0;
}
.oracle-steer-applied b {
  color: #91acd8;
  font-size: 9px;
  line-height: 1.2;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.oracle-steer-applied span {
  color: #b9c8df;
  font-size: 10px;
  line-height: 1.4;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.oracle-steer-proposal {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
  min-width: 0;
}
.oracle-steer-proposal > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.oracle-steer-proposal > div b,
.oracle-steer-proposal > div span {
  display: block;
  min-width: 0;
}
.oracle-steer-proposal > div span {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.oracle-apply-steer-btn {
  max-width: 110px;
  white-space: normal;
  line-height: 1.2;
}

/* R3D3 flow chrome polish · 2026-09-10
   Presentation only. Scope excludes chat mode and all canvas node descendants.
   Existing theme tokens, event handlers, live stream scrollports and harness stay intact.
   !important is limited to resolving legacy mobile/elevation overrides. */
body:has(> .app-shell:not(.chat-mode)) {
  --flow-ui-border: color-mix(in srgb, var(--soft-line) 64%, transparent);
  --flow-ui-hover: color-mix(in srgb, var(--accent) 9%, var(--panel-2));
  --flow-ui-shadow: 0 16px 48px rgba(0, 0, 0, .28);
}
.app-shell:not(.chat-mode) {
  height: 100dvh;
  grid-template-columns: 288px minmax(0, 1fr) 352px;
  grid-template-rows: auto minmax(0, 1fr);
}
.app-shell:not(.chat-mode) .topbar-v2 {
  min-height: 64px;
  gap: 16px;
  padding: 8px 16px;
  border-color: var(--flow-ui-border);
  background: var(--panel);
  box-shadow: none !important;
}
.app-shell:not(.chat-mode) .toolbar-v2 { min-width: 0; gap: 10px; flex: 1 1 auto; }
.app-shell:not(.chat-mode) .topbar-leading { flex: 0 0 auto; gap: 10px; }
.app-shell:not(.chat-mode) .brand-mark { border-color: var(--flow-ui-border); box-shadow: none !important; }
.app-shell:not(.chat-mode) .top-action-group {
  border: 0;
  padding: 0;
  gap: 6px;
  background: transparent;
  box-shadow: none !important;
}
.app-shell:not(.chat-mode) .topbar-status-slot { flex: 0 1 130px; min-width: 74px; margin-left: auto; }
.app-shell:not(.chat-mode) .save-state-pill {
  border: 0;
  background: transparent;
  padding: 8px 0;
  min-height: 36px;
  box-shadow: none !important;
}
.app-shell:not(.chat-mode) .save-state-pill::before { content: none; }
.app-shell:not(.chat-mode) .plan-status-pill {
  flex: 0 1 auto;
  min-width: 0;
  gap: 8px;
  border-color: var(--flow-ui-border);
  border-radius: 6px;
  background: var(--panel-2);
  box-shadow: none !important;
}
.app-shell:not(.chat-mode) #planStatusUsage { max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-shell:not(.chat-mode) :is(.topbar-more-panel, .library-choice-menu) {
  border: 1px solid var(--flow-ui-border);
  border-radius: 10px;
  padding: 12px;
  background: var(--panel);
  box-shadow: var(--flow-ui-shadow) !important;
  max-height: calc(100dvh - 100px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.app-shell:not(.chat-mode) .topbar-more-panel .toolbar-btn { min-height: 44px; }
.app-shell:not(.chat-mode) .panel {
  min-height: 0;
  padding: 8px;
  border-color: var(--flow-ui-border);
  background: var(--panel);
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--soft-line) transparent;
  overflow-x: hidden;
}
.app-shell:not(.chat-mode) .panel-section {
  margin: 0 0 8px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--flow-ui-border);
  background: transparent;
  box-shadow: none !important;
}
.app-shell:not(.chat-mode) .panel-summary {
  min-height: 44px;
  padding: 10px;
  gap: 8px;
  background: transparent;
  border: 0;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .07em;
  line-height: 1.4;
}
.app-shell:not(.chat-mode) .panel-summary-icon {
  width: 20px;
  height: 20px;
  border: 0;
  background: transparent;
  color: var(--accent);
  box-shadow: none;
}
.app-shell:not(.chat-mode) .panel-content { padding: 2px 10px 16px; }
.app-shell:not(.chat-mode) .panel :is(.option-card, .option-fold, .log-entry, .output-card) {
  min-width: 0;
  border: 1px solid var(--flow-ui-border);
  border-radius: 6px;
  background: transparent;
  box-shadow: none !important;
}
.app-shell:not(.chat-mode) .panel .option-fold > summary {
  min-height: 44px;
  padding: 11px 12px;
  background: var(--panel-2);
  border-color: var(--flow-ui-border);
  font-size: 11px;
  letter-spacing: .06em;
  line-height: 1.4;
}
.app-shell:not(.chat-mode) .option-fold-content { padding: 12px; }
.app-shell:not(.chat-mode) .panel .option-fold label {
  margin: 0 0 16px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.app-shell:not(.chat-mode) .panel label { letter-spacing: .04em; line-height: 1.4; gap: 7px; }
.app-shell:not(.chat-mode) .panel :is(.field-help, .option-help, label > small) {
  font-size: 12px;
  line-height: 1.55;
  color: var(--muted);
  letter-spacing: normal;
  overflow-wrap: anywhere;
}
.app-shell:not(.chat-mode) .panel :is(input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea) {
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--soft-line);
  border-radius: 6px;
  background: var(--bg);
  padding: 10px 11px;
  font-size: 14px;
  line-height: 1.5;
  box-shadow: none;
}
.app-shell:not(.chat-mode) .panel :is(input[type=checkbox], input[type=radio]) { accent-color: var(--accent); }
.app-shell:not(.chat-mode) .panel textarea { min-height: 120px; scroll-padding: 12px; }
.app-shell:not(.chat-mode) .project-actions-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; }
.app-shell:not(.chat-mode) #projectSelect { grid-column: 1 / -1; width: 100%; }
.app-shell:not(.chat-mode) .global-prompt-actions { gap: 8px; margin-top: 8px; }
.app-shell:not(.chat-mode) .file-list { gap: 0; max-height: 360px; }
.app-shell:not(.chat-mode) .file-item {
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--flow-ui-border);
  background: transparent;
  box-shadow: none;
}
.app-shell:not(.chat-mode) .file-name { font-size: 12px; line-height: 1.5; }
.app-shell:not(.chat-mode) .file-actions { justify-content: flex-start; gap: 6px; }
.app-shell:not(.chat-mode) .node-palette-grid { gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.app-shell:not(.chat-mode) :is(.topbar-v2, .panel) :is(.ui-btn, .file-mini, .node-palette, .plan-upgrade-btn, .plan-admin-btn) {
  min-height: 36px;
  border-radius: 6px;
  border-color: var(--flow-ui-border);
  box-shadow: none !important;
  transform: none !important;
  transition: background .15s ease, border-color .15s ease;
  line-height: 1.3;
  touch-action: manipulation;
}
.app-shell:not(.chat-mode) .toolbar-btn { min-height: 40px !important; }
.app-shell:not(.chat-mode) .toolbar-btn span[aria-hidden=true] {
  border: 0;
  background: transparent;
  box-shadow: none;
}
.app-shell:not(.chat-mode) :is(.topbar-v2, .panel) :is(.ui-btn, .file-mini, .node-palette):hover {
  border-color: var(--accent);
  background-color: var(--flow-ui-hover);
}
.app-shell:not(.chat-mode) :is(.topbar-v2, .panel) .ui-btn.primary { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.app-shell:not(.chat-mode) :is(.topbar-v2, .panel) :is(.danger, .file-mini.delete) { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.app-shell:not(.chat-mode) .canvas-wrap {
  background-image: linear-gradient(color-mix(in srgb, var(--soft-line) 35%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--soft-line) 35%, transparent) 1px, transparent 1px);
}
.app-shell:not(.chat-mode) .canvas-hint {
  max-width: calc(100% - 28px);
  border: 1px solid var(--flow-ui-border);
  border-radius: 6px;
  font-size: 11px;
  line-height: 1.5;
  box-shadow: none;
  pointer-events: none;
}
@media (min-width: 981px) and (max-width: 1280px) {
  .app-shell:not(.chat-mode) { grid-template-columns: 252px minmax(0, 1fr) 306px; }
  .app-shell:not(.chat-mode) #planStatusUsage { max-width: 96px; }
  .app-shell:not(.chat-mode) .topbar-v2 { gap: 10px; padding-inline: 10px; }
  .app-shell:not(.chat-mode) .toolbar-v2 { gap: 6px; }
}

/* Shared flow viewers. Preserve native dialog and all live update behavior. */
body:has(> .app-shell:not(.chat-mode)) :is(.r3-viewer-modal:not(.flow-library-dialog), .r3-output-popout-modal, .r3-output-detail-modal) {
  padding: 0 !important;
  border: 1px solid var(--flow-ui-border);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: var(--flow-ui-shadow) !important;
  overflow: hidden;
}
body:has(> .app-shell:not(.chat-mode)) :is(.r3-viewer-modal:not(.flow-library-dialog), .r3-output-popout-modal, .r3-output-detail-modal)::backdrop {
  background: rgba(0, 0, 0, .56);
  backdrop-filter: blur(3px);
}
body:has(> .app-shell:not(.chat-mode)) .r3-viewer-modal:not(.flow-library-dialog) { width: min(1040px, calc(100vw - 40px)); height: min(90dvh, 900px); max-height: calc(100dvh - 40px); }
body:has(> .app-shell:not(.chat-mode)) .r3-viewer-modal:not(.flow-library-dialog) .viewer-card {
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0;
  box-shadow: none !important;
}
body:has(> .app-shell:not(.chat-mode)) :is(.viewer-head, .viewer-foot, .output-popout-head, .output-popout-foot, .output-detail-head) {
  padding: 14px 18px;
  gap: 12px;
  background: var(--panel);
  border-color: var(--flow-ui-border);
  flex-shrink: 0;
}
body:has(> .app-shell:not(.chat-mode)) .r3-viewer-modal:not(.flow-library-dialog) .viewer-head span { letter-spacing: .04em; }
body:has(> .app-shell:not(.chat-mode)) .viewer-title-block strong { font-size: 18px; }
body:has(> .app-shell:not(.chat-mode)) .viewer-title-block span { margin-top: 5px; }
body:has(> .app-shell:not(.chat-mode)) :is(.r3-viewer-modal:not(.flow-library-dialog), .r3-output-popout-modal, .r3-output-detail-modal) .ui-btn {
  min-height: 40px;
  border: 1px solid var(--flow-ui-border);
  border-radius: 6px;
  padding: 9px 12px;
  font-size: 12px;
  line-height: 1.3;
  box-shadow: none !important;
  transform: none !important;
  touch-action: manipulation;
}
body:has(> .app-shell:not(.chat-mode)) :is(.r3-viewer-modal:not(.flow-library-dialog), .r3-output-popout-modal, .r3-output-detail-modal) .ui-btn:hover { border-color: var(--accent); }
body:has(> .app-shell:not(.chat-mode)) .r3-viewer-modal:not(.flow-library-dialog) :is(.viewer-live-pill, .viewer-working-chip, .viewer-status-chip, .viewer-event-status) {
  border: 0;
  border-radius: 4px;
  box-shadow: none;
  min-height: 24px;
}
/* Author styles previously overrode the native hidden attribute (including stale Live badges). */
body:has(> .app-shell:not(.chat-mode)) .r3-viewer-modal:not(.flow-library-dialog) [hidden] { display: none !important; }
body:has(> .app-shell:not(.chat-mode)) .viewer-follow-btn[aria-pressed=true] { color: var(--ink); border-color: color-mix(in srgb, var(--ok) 55%, transparent); }
body:has(> .app-shell:not(.chat-mode)) .viewer-follow-btn.is-paused { color: var(--muted); border-color: var(--soft-line); }
body:has(> .app-shell:not(.chat-mode)) .r3-viewer-modal:not(.flow-library-dialog) .viewer-body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 18px;
  gap: 16px;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--panel);
  scrollbar-gutter: auto;
}
body:has(> .app-shell:not(.chat-mode)) .r3-viewer-modal:not(.flow-library-dialog) .viewer-body > * { flex: 0 0 auto; min-width: 0; }
body:has(> .app-shell:not(.chat-mode)) .r3-viewer-modal:not(.flow-library-dialog) .viewer-body.is-tool-viewer { overflow: hidden; }
body:has(> .app-shell:not(.chat-mode)) .r3-viewer-modal:not(.flow-library-dialog) .viewer-body.is-tool-viewer > .live-stream-section { flex: 1 1 auto; min-height: 0 !important; }
body:has(> .app-shell:not(.chat-mode)) .r3-viewer-modal:not(.flow-library-dialog) .viewer-summary-grid { gap: 0; border-bottom: 1px solid var(--flow-ui-border); padding-bottom: 12px; }
body:has(> .app-shell:not(.chat-mode)) .r3-viewer-modal:not(.flow-library-dialog) .viewer-summary-grid > div {
  border: 0;
  border-left: 1px solid var(--flow-ui-border);
  padding: 4px 14px;
  min-height: 44px;
  gap: 5px;
  background: transparent;
  box-shadow: none;
}
body:has(> .app-shell:not(.chat-mode)) .r3-viewer-modal:not(.flow-library-dialog) .viewer-summary-grid > div:first-child { border-left: 0; padding-left: 0; }
body:has(> .app-shell:not(.chat-mode)) .r3-viewer-modal:not(.flow-library-dialog) .viewer-summary-grid b { color: var(--muted); font-size: 10px; letter-spacing: .06em; }
body:has(> .app-shell:not(.chat-mode)) .r3-viewer-modal:not(.flow-library-dialog) .viewer-summary-grid span { font-size: 14px; white-space: normal; overflow-wrap: anywhere; }
body:has(> .app-shell:not(.chat-mode)) .r3-viewer-modal:not(.flow-library-dialog) :is(.viewer-section, .tool-card, .viewer-collapsible, .live-tool-detail) {
  border: 1px solid var(--flow-ui-border);
  border-radius: 7px;
  box-shadow: none !important;
  background: var(--bg);
}
body:has(> .app-shell:not(.chat-mode)) .r3-viewer-modal:not(.flow-library-dialog) .viewer-section-title-row {
  padding: 11px 12px;
  min-height: 42px;
  border-color: var(--flow-ui-border);
  background: transparent;
}
body:has(> .app-shell:not(.chat-mode)) .r3-viewer-modal:not(.flow-library-dialog) :is(.viewer-section-title-row h3, .viewer-section h3) {
  border: 0;
  background: transparent;
  color: var(--muted);
  letter-spacing: .06em;
  font-size: 11px;
}
body:has(> .app-shell:not(.chat-mode)) .r3-viewer-modal:not(.flow-library-dialog) .live-current { border-left: 3px solid var(--accent); }
body:has(> .app-shell:not(.chat-mode)) .r3-viewer-modal:not(.flow-library-dialog) .live-current-body { background: transparent; padding: 12px; }
body:has(> .app-shell:not(.chat-mode)) .r3-viewer-modal:not(.flow-library-dialog) .live-current-body p { font-size: 13px; font-weight: 400; line-height: 1.6; overflow-wrap: anywhere; }
body:has(> .app-shell:not(.chat-mode)) .r3-viewer-modal:not(.flow-library-dialog) .viewer-body.is-live-viewer .live-stream-section { min-height: 260px !important; }
body:has(> .app-shell:not(.chat-mode)) .r3-viewer-modal:not(.flow-library-dialog) .viewer-body.is-live-viewer .live-tool-stream {
  height: clamp(220px, 36dvh, 400px);
  max-height: none;
  padding: 10px !important;
  gap: 8px !important;
  background: transparent;
}
body:has(> .app-shell:not(.chat-mode)) .r3-viewer-modal:not(.flow-library-dialog) .live-tool-toggle { background: var(--panel); border-color: var(--flow-ui-border); padding: 12px; }
body:has(> .app-shell:not(.chat-mode)) .r3-viewer-modal:not(.flow-library-dialog) .live-tool-copy b { letter-spacing: .04em; }
body:has(> .app-shell:not(.chat-mode)) .r3-viewer-modal:not(.flow-library-dialog) .live-tool-copy small { font-size: 12px; font-weight: 400; line-height: 1.5; }
body:has(> .app-shell:not(.chat-mode)) .r3-viewer-modal:not(.flow-library-dialog) .tool-card-icon { border: 0; border-radius: 5px; background: var(--panel-2); }
body:has(> .app-shell:not(.chat-mode)) .r3-viewer-modal:not(.flow-library-dialog) .viewer-collapsible { border-width: 0 0 1px; border-radius: 0; background: transparent; }
body:has(> .app-shell:not(.chat-mode)) .r3-viewer-modal:not(.flow-library-dialog) .viewer-collapsible > summary {
  min-height: 48px;
  padding: 12px 2px;
  border-color: var(--flow-ui-border);
  background: transparent;
  color: var(--ink);
  letter-spacing: .04em;
  font-size: 11px;
}
body:has(> .app-shell:not(.chat-mode)) .r3-viewer-modal:not(.flow-library-dialog) .viewer-collapsible > summary::before { border: 0; background: transparent; }
body:has(> .app-shell:not(.chat-mode)) .r3-viewer-modal:not(.flow-library-dialog) .viewer-rich-output { font-size: 14px; line-height: 1.65; overflow-wrap: anywhere; }
body:has(> .app-shell:not(.chat-mode)) .r3-viewer-modal:not(.flow-library-dialog) .viewer-foot-status { white-space: normal; max-width: none; }
body:has(> .app-shell:not(.chat-mode)) .r3-output-popout-modal { height: min(86dvh, 820px); max-height: calc(100dvh - 40px); }
body:has(> .app-shell:not(.chat-mode)) .output-popout-card { height: 100%; min-height: 0; max-height: 100%; grid-template-rows: auto auto minmax(0, 1fr) auto; }
body:has(> .app-shell:not(.chat-mode)) .output-popout-text { min-height: 0; max-height: none; padding: 22px; overscroll-behavior: contain; }
body:has(> .app-shell:not(.chat-mode)) .output-popout-meta { gap: 0; background: transparent; border-color: var(--flow-ui-border); }
body:has(> .app-shell:not(.chat-mode)) .output-popout-meta > div { border: 0; border-left: 1px solid var(--flow-ui-border); background: transparent; box-shadow: none; }
body:has(> .app-shell:not(.chat-mode)) .output-popout-meta > div:first-child { border-left: 0; }
body:has(> .app-shell:not(.chat-mode)) .output-detail-card { max-height: calc(90dvh - 24px); }
body:has(> .app-shell:not(.chat-mode)) .output-detail-body { overscroll-behavior: contain; overflow-wrap: anywhere; }
body:has(> .app-shell:not(.chat-mode)) .r3-context-menu {
  border: 1px solid var(--flow-ui-border);
  border-radius: 10px;
  padding: 6px;
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--panel);
  box-shadow: var(--flow-ui-shadow);
}
body:has(> .app-shell:not(.chat-mode)) .r3-context-menu button { min-height: 44px; padding: 10px; border: 0; border-radius: 5px; }
body:has(> .app-shell:not(.chat-mode)) .r3-context-menu button:hover { background: var(--flow-ui-hover); }
body:has(> .app-shell:not(.chat-mode)) .r3-context-menu .ctx-copy small { line-height: 1.5; }
/* Focus is scoped to editor chrome; node controls are excluded. */
.app-shell:not(.chat-mode) :is(.panel, .topbar-v2) :is(button, summary, input, select, textarea, a):focus-visible,
body:has(> .app-shell:not(.chat-mode)) :is(.r3-viewer-modal:not(.flow-library-dialog), .r3-output-popout-modal, .r3-output-detail-modal, .r3-context-menu, .r3-mobile-flow-ui) :is(button, summary, input, select, textarea, a):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* Mobile sheets use the same measured-by-layout two-row header height. */
html.r3-mobile-device:has(.app-shell:not(.chat-mode)) { --r3-mobile-top: calc(113px + env(safe-area-inset-top, 0px)); }
html.r3-mobile-device .app-shell:not(.chat-mode) { height: 100dvh !important; min-height: 0 !important; }
html.r3-mobile-device .app-shell:not(.chat-mode) .topbar-v2 {
  min-height: var(--r3-mobile-top) !important;
  background: var(--panel) !important;
  border-color: var(--flow-ui-border) !important;
}
html.r3-mobile-device .app-shell:not(.chat-mode) :is(.brand-link .brand-mark, .chat-toggle-btn, .toolbar-btn, #upgradePlanBtn) { min-height: 44px !important; box-shadow: none !important; }
html.r3-mobile-device .app-shell:not(.chat-mode) .toolbar-v2 { min-height: 44px !important; }
html.r3-mobile-device .app-shell:not(.chat-mode) .plan-status-pill { background: transparent !important; border: 0 !important; }
html.r3-mobile-device .app-shell:not(.chat-mode) .panel-section.r3-mobile-active-sheet {
  top: calc(var(--r3-mobile-top) + 8px) !important;
  bottom: calc(var(--r3-mobile-dock) + 8px + env(safe-area-inset-bottom, 0px)) !important;
  border: 1px solid var(--flow-ui-border) !important;
  border-radius: 12px !important;
  background: var(--panel) !important;
  box-shadow: var(--flow-ui-shadow) !important;
  overscroll-behavior: contain;
  scroll-padding-top: 56px;
}
html.r3-mobile-device .app-shell:not(.chat-mode) .r3-mobile-active-sheet > .panel-summary {
  min-height: 48px !important;
  padding: 12px 14px !important;
  background: var(--panel) !important;
  border-bottom: 1px solid var(--flow-ui-border);
  z-index: 3 !important;
}
/* Nested sticky fold headings previously painted over one another. */
html.r3-mobile-device .app-shell:not(.chat-mode) .r3-mobile-active-sheet .option-fold > summary { position: static !important; }
html.r3-mobile-device .app-shell:not(.chat-mode) .r3-mobile-active-sheet .panel-content { padding: 14px !important; }
html.r3-mobile-device .app-shell:not(.chat-mode) .panel :is(.ui-btn, .file-mini, .node-palette) { min-height: 44px !important; padding: 10px !important; }
html.r3-mobile-device .app-shell:not(.chat-mode) .panel :is(input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea) { font-size: 16px; }
html.r3-mobile-device .app-shell:not(.chat-mode) .file-item { grid-template-columns: minmax(0, 1fr) !important; }
html.r3-mobile-device .app-shell:not(.chat-mode) .file-list { max-height: none !important; }
html.r3-mobile-device .app-shell:not(.chat-mode) .topbar-more-menu[open] .topbar-more-panel {
  top: calc(var(--r3-mobile-top) + 8px) !important;
  max-height: calc(100dvh - var(--r3-mobile-top) - 24px - env(safe-area-inset-bottom, 0px)) !important;
  border-radius: 10px;
}
body:has(> .app-shell:not(.chat-mode)) .r3-mobile-dock { gap: 4px; border-top: 1px solid var(--flow-ui-border); box-shadow: none !important; }
body:has(> .app-shell:not(.chat-mode)) .r3-mobile-dock button { border: 0 !important; border-radius: 7px; background: transparent; box-shadow: none !important; }
body:has(> .app-shell:not(.chat-mode)) .r3-mobile-dock b { font-size: 10px !important; font-weight: 650; }
body:has(> .app-shell:not(.chat-mode)) .r3-mobile-node-bar { gap: 5px !important; padding: 6px !important; border: 1px solid var(--flow-ui-border); border-radius: 8px; box-shadow: none !important; }
body:has(> .app-shell:not(.chat-mode)) .r3-mobile-node-bar button { min-height: 44px !important; border: 0; border-radius: 5px; font-size: 10px !important; box-shadow: none !important; }
body:has(> .app-shell:not(.chat-mode)) .r3-mobile-zoom-cluster { gap: 4px; }
body:has(> .app-shell:not(.chat-mode)) .r3-mobile-zoom-cluster button { width: 44px !important; min-height: 44px !important; border-radius: 6px; border-color: var(--flow-ui-border); box-shadow: none !important; }
body:has(> .app-shell:not(.chat-mode)) .r3-mobile-selected-label { border-radius: 6px; border-color: var(--flow-ui-border); box-shadow: none; }
@media (max-width: 760px) {
  body:has(> .app-shell:not(.chat-mode)) :is(.r3-viewer-modal:not(.flow-library-dialog), .r3-output-popout-modal, .r3-output-detail-modal) {
    inset: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    padding: 0 !important;
    border: 0;
    border-radius: 0;
  }
  body:has(> .app-shell:not(.chat-mode)) .r3-viewer-modal:not(.flow-library-dialog) .viewer-card,
  body:has(> .app-shell:not(.chat-mode)) .output-detail-card { height: 100% !important; max-height: 100% !important; }
  body:has(> .app-shell:not(.chat-mode)) :is(.viewer-head, .output-popout-head, .output-detail-head) { padding: calc(12px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 12px max(16px, env(safe-area-inset-left, 0px)); }
  body:has(> .app-shell:not(.chat-mode)) .r3-viewer-modal:not(.flow-library-dialog) .viewer-head { flex-wrap: wrap; }
  body:has(> .app-shell:not(.chat-mode)) .r3-viewer-modal:not(.flow-library-dialog) .viewer-title-block { flex: 1 1 120px; }
  body:has(> .app-shell:not(.chat-mode)) .r3-viewer-modal:not(.flow-library-dialog) .viewer-title-block span { font-size: 10px; }
  body:has(> .app-shell:not(.chat-mode)) .r3-viewer-modal:not(.flow-library-dialog) .viewer-head-actions { margin-left: auto; gap: 8px; }
  body:has(> .app-shell:not(.chat-mode)) :is(.r3-viewer-modal:not(.flow-library-dialog), .r3-output-popout-modal, .r3-output-detail-modal) .ui-btn { min-height: 44px; font-size: 12px; }
  body:has(> .app-shell:not(.chat-mode)) .r3-viewer-modal:not(.flow-library-dialog) .viewer-body { padding: 16px !important; gap: 14px !important; }
  body:has(> .app-shell:not(.chat-mode)) .r3-viewer-modal:not(.flow-library-dialog) .viewer-summary-grid.live-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 12px; }
  body:has(> .app-shell:not(.chat-mode)) .r3-viewer-modal:not(.flow-library-dialog) .live-summary > div:nth-child(odd) { border-left: 0; padding-left: 0; }
  body:has(> .app-shell:not(.chat-mode)) .r3-viewer-modal:not(.flow-library-dialog) .viewer-body.is-live-viewer .live-stream-section { min-height: 260px !important; }
  body:has(> .app-shell:not(.chat-mode)) .r3-viewer-modal:not(.flow-library-dialog) .viewer-body.is-live-viewer .live-tool-stream { height: clamp(220px, 36dvh, 340px); }
  body:has(> .app-shell:not(.chat-mode)) .r3-viewer-modal:not(.flow-library-dialog) .viewer-live-pill:not([hidden]) { display: inline-flex; }
  body:has(> .app-shell:not(.chat-mode)) :is(.viewer-foot, .output-popout-foot) { flex-wrap: wrap; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); }
  body:has(> .app-shell:not(.chat-mode)) .r3-viewer-modal:not(.flow-library-dialog) .viewer-foot-status { flex: 1 1 150px; font-size: 11px; }
  body:has(> .app-shell:not(.chat-mode)) .output-popout-meta { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 12px 8px; }
  body:has(> .app-shell:not(.chat-mode)) .output-popout-meta > div { padding: 8px; min-width: 0; overflow-wrap: anywhere; }
  body:has(> .app-shell:not(.chat-mode)) .output-popout-text { padding: 18px; font-size: 16px; }
  body:has(> .app-shell:not(.chat-mode)) .output-detail-body { padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
  .app-shell:not(.chat-mode) :is(.panel, .topbar-v2) *,
  body:has(> .app-shell:not(.chat-mode)) :is(.r3-viewer-modal:not(.flow-library-dialog), .r3-output-popout-modal, .r3-output-detail-modal, .r3-mobile-flow-ui) * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
/* Keep secondary mobile controls clear of the selected-node action strip. */
body:has(> .app-shell:not(.chat-mode)) .r3-mobile-flow-ui :is(.hidden, [hidden]) { display: none !important; }
body:has(> .app-shell:not(.chat-mode)) .r3-mobile-flow-ui.has-node .r3-mobile-zoom-cluster,
body:has(> .app-shell:not(.chat-mode)) .r3-mobile-flow-ui.is-connecting .r3-mobile-zoom-cluster {
  bottom: calc(var(--r3-mobile-dock) + 80px + env(safe-area-inset-bottom, 0px)) !important;
}
body:has(> .app-shell:not(.chat-mode)) .r3-mobile-selected-label { border-radius: 6px !important; box-shadow: none !important; }
body:has(> .app-shell:not(.chat-mode)) .r3-output-detail-modal :is(.viewer-section, .tool-card, .viewer-summary-grid > div) {
  border-color: var(--flow-ui-border);
  border-radius: 6px;
  box-shadow: none !important;
  background: var(--bg);
}
body:has(> .app-shell:not(.chat-mode)) .r3-output-detail-modal :is(.viewer-section h3, .tool-card header) {
  border-color: var(--flow-ui-border);
  background: var(--panel);
}
body:has(> .app-shell:not(.chat-mode)) :is(.r3-steer-modal, .human-input-dialog, .r3-confirm-dialog, .r3-playback-dialog) {
  border: 1px solid var(--flow-ui-border);
  border-radius: 10px;
  box-shadow: var(--flow-ui-shadow) !important;
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 24px);
  overscroll-behavior: contain;
}
body:has(> .app-shell:not(.chat-mode)) :is(.r3-steer-modal, .human-input-dialog, .r3-confirm-dialog) :is(.ui-btn, input, textarea, select) {
  border-radius: 6px;
  border-color: var(--soft-line);
  box-shadow: none !important;
}
@media (max-width: 760px) {
  body:has(> .app-shell:not(.chat-mode)) :is(.r3-steer-modal, .human-input-dialog, .r3-confirm-dialog) :is(.ui-btn, input, select) { min-height: 44px; }
  body:has(> .app-shell:not(.chat-mode)) :is(.r3-steer-modal, .human-input-dialog) :is(input, textarea, select) { font-size: 16px; }
}

/* Chat view behavior restoration — preserves the newer Flow View while reasserting
   the established Chat scroll owner, live activity motion, and Oracle/typewriter UI. */
.app-shell.chat-mode .r3-chat-shell,
.app-shell.chat-mode .r3-chat-main {
  min-height: 0;
  overflow: hidden;
}

.app-shell.chat-mode .r3-chat-messages {
  min-height: 0;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  overflow-anchor: none;
  scrollbar-gutter: stable;
  scroll-behavior: smooth;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}
.app-shell.chat-mode .r3-chat-messages.is-user-scrolled,
.app-shell.chat-mode .r3-chat-messages.r3-chat-scroll-restoring {
  scroll-behavior: auto !important;
}

.app-shell.chat-mode .r3-chat-live-tools {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

.app-shell.chat-mode .r3-chat-typing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.app-shell.chat-mode .r3-chat-typing span {
  width: 6px;
  height: 6px;
  border: 1px solid var(--line);
  background: var(--accent);
  animation: dotWork .85s ease-in-out infinite alternate !important;
  will-change: transform, opacity;
}
.app-shell.chat-mode .r3-chat-typing span:nth-child(2) { animation-delay: .12s !important; }
.app-shell.chat-mode .r3-chat-typing span:nth-child(3) { animation-delay: .24s !important; }

.app-shell.chat-mode .r3-chat-live-run {
  position: relative;
  overflow: hidden;
}
.app-shell.chat-mode .r3-chat-live-run::before {
  content: '';
  display: block;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 58%, transparent), transparent);
  opacity: .72;
  animation: r3ChatLiveSweep 1.25s ease-in-out infinite !important;
  pointer-events: none;
}

.app-shell.chat-mode .r3-chat-live-run.is-oracle-view .r3-chat-oracle-view {
  animation: r3ChatOracleViewIn .18s ease-out both;
}
.app-shell.chat-mode .r3-chat-oracle-kicker > span {
  animation: r3ChatOraclePulse 1.05s ease-in-out infinite !important;
  will-change: transform, opacity, box-shadow;
}
.app-shell.chat-mode .r3-chat-live-run.is-oracle-view .r3-chat-oracle-text::after {
  content: "▌";
  margin-left: 2px;
  color: #8db4ff;
  animation: r3ChatOracleCaret .72s steps(1, end) infinite !important;
}

@keyframes r3ChatOracleViewIn {
  from { opacity: .35; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes r3ChatOraclePulse {
  0%, 100% { opacity: .55; transform: scale(.92); box-shadow: 0 0 5px rgba(121, 168, 255, .42); }
  50% { opacity: 1; transform: scale(1.16); box-shadow: 0 0 12px rgba(121, 168, 255, .88); }
}

@media (prefers-reduced-motion: reduce) {
  .app-shell.chat-mode .r3-chat-messages { scroll-behavior: auto; }
  .app-shell.chat-mode .r3-chat-typing span,
  .app-shell.chat-mode .r3-chat-live-run::before,
  .app-shell.chat-mode .r3-chat-oracle-kicker > span,
  .app-shell.chat-mode .r3-chat-live-run.is-oracle-view .r3-chat-oracle-text::after,
  .app-shell.chat-mode .r3-chat-live-run.is-oracle-view .r3-chat-oracle-view {
    animation: none !important;
  }
}

/* Idle animation/GPU guard — no flow means no continuous UI motion.
   Runtime truth comes from .app-shell.has-live-run, maintained by updateRunControls(). */
.app-shell:not(.has-live-run) *,
.app-shell:not(.has-live-run) *::before,
.app-shell:not(.has-live-run) *::after {
  animation: none !important;
}

/* Do not leave stale "working" affordances visible after a run has ended. */
.app-shell:not(.has-live-run) .r3-node.running::before,
.app-shell:not(.has-live-run) .r3-node.running::after,
.app-shell:not(.has-live-run) .r3-node.running .node-status,
.app-shell:not(.has-live-run) .mediaout-status-pulse,
.app-shell:not(.has-live-run) .oracle-live-dot.is-live,
.app-shell:not(.has-live-run) .r3-chat-typing {
  display: none !important;
}

/* Historical/last-run wires stay visible, but never march/pulse while idle. */
.app-shell:not(.has-live-run) .wire,
.app-shell:not(.has-live-run) .wire-glow,
.app-shell:not(.has-live-run) .wire.oracle-observer-wire,
.app-shell:not(.has-live-run) .loop-wire-tracer,
.app-shell:not(.has-live-run) .r3-playback-wire {
  animation: none !important;
}

/* Reset residual animated transforms/filters from nodes that still carry a stale running class. */
.app-shell:not(.has-live-run) .r3-node.running,
.app-shell:not(.has-live-run) .r3-playback-node.is-working {
  animation: none !important;
  filter: none !important;
}
.app-shell:not(.has-live-run) .r3-node.running .node-head,
.app-shell:not(.has-live-run) .r3-node.running .node-timer,
.app-shell:not(.has-live-run) .r3-playback-node.is-working .r3-playback-node-head {
  animation: none !important;
}

/* Live-run animation scope guard — only the currently executing connected flow may animate.
   Visual-only guard: .is-run-scope / .is-run-scope-wire are assigned from the existing run scope. */
.app-shell.has-live-run .r3-node:not(.is-run-scope),
.app-shell.has-live-run .r3-node:not(.is-run-scope) *,
.app-shell.has-live-run .r3-node:not(.is-run-scope)::before,
.app-shell.has-live-run .r3-node:not(.is-run-scope)::after,
.app-shell.has-live-run .r3-node:not(.is-run-scope) *::before,
.app-shell.has-live-run .r3-node:not(.is-run-scope) *::after {
  animation: none !important;
  will-change: auto !important;
}

/* Stale node state must never advertise work when that node is outside this run's scope. */
.app-shell.has-live-run .r3-node.running:not(.is-run-scope)::before,
.app-shell.has-live-run .r3-node.running:not(.is-run-scope)::after,
.app-shell.has-live-run .r3-node.running:not(.is-run-scope) .node-status,
.app-shell.has-live-run .r3-node:not(.is-run-scope) .mediaout-status-pulse,
.app-shell.has-live-run .r3-node:not(.is-run-scope) .oracle-live-dot.is-live,
.app-shell.has-live-run .r3-node:not(.is-run-scope) .agent-v2-brain-pulse {
  display: none !important;
}
.app-shell.has-live-run .r3-node.running:not(.is-run-scope),
.app-shell.has-live-run .r3-node.running:not(.is-run-scope) .node-head,
.app-shell.has-live-run .r3-node.running:not(.is-run-scope) .node-body,
.app-shell.has-live-run .r3-node.running:not(.is-run-scope) .node-timer {
  animation: none !important;
  filter: none !important;
  will-change: auto !important;
}

/* SVG rails are the largest continuous paint cost. Keep unrelated flows completely static. */
.app-shell.has-live-run .wire:not(.is-run-scope-wire),
.app-shell.has-live-run .wire-glow:not(.is-run-scope-wire),
.app-shell.has-live-run .loop-wire-halo:not(.is-run-scope-wire),
.app-shell.has-live-run .loop-wire-tracer:not(.is-run-scope-wire),
.app-shell.has-live-run .oracle-observer-wire-glow:not(.is-run-scope-wire) {
  animation: none !important;
  will-change: auto !important;
}

/* Loop rails used to march simply because a loop existed anywhere on the canvas.
   A loop may animate only when it belongs to the active run scope. */
.app-shell.has-live-run .wire.loop-wire:not(.is-run-scope-wire),
.app-shell.has-live-run .loop-wire-tracer:not(.is-run-scope-wire) {
  stroke-dashoffset: 0 !important;
}

/* Oracle observation rails/orbs are scoped to the Oracle attached to this run only. */
.app-shell.has-live-run .wire.oracle-observer-wire:not(.is-run-scope-wire),
.app-shell.has-live-run .wire.oracle-context-wire:not(.is-run-scope-wire) {
  animation: none !important;
  stroke-dashoffset: 0 !important;
}

/* Chat Oracle typewriter parity — mirror the node-view Oracle typing state exactly.
   These selectors only animate while a live Oracle summary is actively typing. */
.app-shell.has-live-run.chat-mode .r3-chat-oracle-view.is-typing .r3-chat-oracle-kicker > span {
  animation: r3ChatOraclePulse 1.05s ease-in-out infinite !important;
  will-change: transform, opacity, box-shadow;
}
.app-shell.has-live-run.chat-mode .r3-chat-oracle-text.is-typing::after {
  content: "▌";
  display: inline;
  margin-left: 2px;
  color: #8db4ff;
  animation: r3ChatOracleCaret .72s steps(1, end) infinite !important;
}
.app-shell.has-live-run.chat-mode .r3-chat-oracle-text:not(.is-typing)::after {
  content: none !important;
  animation: none !important;
}
.app-shell.has-live-run.chat-mode .r3-chat-oracle-view:not(.is-typing) .r3-chat-oracle-kicker > span {
  animation: none !important;
  will-change: auto;
}

/* Wire routing breakpoints — interactive, clamped, and non-animated. */
.wire-interaction-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  z-index: 4;
  pointer-events: none;
}
.wire-interaction-layer .wire-hit {
  fill: none;
  stroke: transparent;
  stroke-width: 18px;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: stroke;
  cursor: crosshair;
}
.wire-interaction-layer .wire-hit:hover {
  stroke: color-mix(in srgb, var(--accent) 24%, transparent);
  stroke-width: 10px;
}
.wire-interaction-layer .wire-hit.has-breakpoints:hover {
  stroke: color-mix(in srgb, var(--accent) 34%, transparent);
}
.wire-interaction-layer .wire-point {
  r: 7px;
  fill: color-mix(in srgb, var(--panel) 88%, var(--accent) 12%);
  stroke: var(--accent);
  stroke-width: 2px;
  pointer-events: all;
  cursor: grab;
  filter: drop-shadow(0 1px 2px color-mix(in srgb, var(--shadow) 82%, transparent));
  transition: r .1s ease, fill .1s ease, stroke-width .1s ease, filter .1s ease;
}
.wire-interaction-layer .wire-point:hover,
.wire-interaction-layer .wire-point:focus-visible {
  r: 9px;
  fill: color-mix(in srgb, var(--accent) 26%, var(--panel));
  stroke-width: 3px;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent) 48%, transparent));
  outline: none;
}
.wire-interaction-layer .wire-point.is-dragging {
  r: 10px;
  cursor: grabbing;
  fill: var(--accent);
  stroke: var(--panel);
  stroke-width: 3px;
}
.wire-interaction-layer .wire-point.is-clamped {
  fill: color-mix(in srgb, var(--warning) 72%, var(--panel));
  stroke: var(--warning);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--warning) 46%, transparent));
}
@media (max-width: 760px) {
  .wire-interaction-layer .wire-hit { stroke-width: 28px; }
  .wire-interaction-layer .wire-point { r: 9px; }
  .wire-interaction-layer .wire-point:hover,
  .wire-interaction-layer .wire-point:focus-visible,
  .wire-interaction-layer .wire-point.is-dragging { r: 11px; }
}

/* Live tool viewer scroll ownership — user scrolling must never be re-anchored by live DOM refreshes. */
.r3-viewer-modal .viewer-body,
.r3-viewer-modal .live-tool-stream,
.r3-viewer-modal [data-viewer-scroll-key] {
  overflow-anchor: none;
  overscroll-behavior: contain;
}

/* Live tool inner-scroll clarity + repaint stability — 2026-09-10
   Nested read/diff/result panes must read as their own scroll surfaces and
   must not visually blend into the outer live-event card. */
.r3-viewer-modal .live-tool-detail.is-open,
.r3-viewer-modal .live-tool-detail.is-open > .live-tool-content {
  overflow: hidden !important;
}

.r3-viewer-modal .live-tool-content {
  background: color-mix(in srgb, var(--panel) 90%, var(--panel-2) 10%) !important;
}

.r3-viewer-modal .live-tool-content > .viewer-tool-code.is-scroll-region,
.r3-viewer-modal .live-tool-content > .viewer-rich-output.is-scroll-region,
.r3-viewer-modal .viewer-scratchpad-code > .viewer-tool-code.is-scroll-region,
.r3-viewer-modal .viewer-diff-scroll {
  position: relative;
  width: calc(100% - 20px) !important;
  max-width: calc(100% - 20px) !important;
  margin: 9px 10px 11px !important;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--soft-line)) !important;
  border-radius: 6px;
  background: color-mix(in srgb, var(--panel-2) 66%, var(--bg)) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--ink) 6%, transparent),
    inset 0 10px 18px color-mix(in srgb, #000 7%, transparent),
    inset 0 -10px 18px color-mix(in srgb, #000 7%, transparent);
  overflow: auto !important;
  overflow-anchor: none;
  overscroll-behavior: contain;
  scroll-behavior: auto !important;
  scrollbar-gutter: stable both-edges;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--accent) 62%, var(--muted)) color-mix(in srgb, var(--panel-2) 78%, var(--bg));
  touch-action: pan-x pan-y;
  contain: paint;
}

html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .r3-viewer-modal .live-tool-content > .viewer-tool-code.is-scroll-region,
html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .r3-viewer-modal .live-tool-content > .viewer-rich-output.is-scroll-region,
html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .r3-viewer-modal .viewer-scratchpad-code > .viewer-tool-code.is-scroll-region,
html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .r3-viewer-modal .viewer-diff-scroll {
  background: color-mix(in srgb, var(--bg) 70%, #000 30%) !important;
  border-color: color-mix(in srgb, var(--accent) 36%, var(--soft-line)) !important;
}

.r3-viewer-modal .viewer-mutation-diff {
  margin: 9px 10px 11px !important;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--soft-line)) !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  background: color-mix(in srgb, var(--panel-2) 58%, var(--bg)) !important;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink) 5%, transparent);
}
.r3-viewer-modal .viewer-mutation-diff > .viewer-diff-scroll {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  max-height: min(44dvh, 440px) !important;
}
.r3-viewer-modal .viewer-diff-row {
  width: max-content;
  min-width: 100%;
}

/* Make a nested scrollbar an explicit affordance instead of a nearly
   invisible browser-default gutter. */
.r3-viewer-modal .live-tool-content > .viewer-tool-code.is-scroll-region::-webkit-scrollbar,
.r3-viewer-modal .live-tool-content > .viewer-rich-output.is-scroll-region::-webkit-scrollbar,
.r3-viewer-modal .viewer-scratchpad-code > .viewer-tool-code.is-scroll-region::-webkit-scrollbar,
.r3-viewer-modal .viewer-diff-scroll::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.r3-viewer-modal .live-tool-content > .viewer-tool-code.is-scroll-region::-webkit-scrollbar-track,
.r3-viewer-modal .live-tool-content > .viewer-rich-output.is-scroll-region::-webkit-scrollbar-track,
.r3-viewer-modal .viewer-scratchpad-code > .viewer-tool-code.is-scroll-region::-webkit-scrollbar-track,
.r3-viewer-modal .viewer-diff-scroll::-webkit-scrollbar-track {
  background: color-mix(in srgb, var(--panel-2) 78%, var(--bg));
  border-left: 1px solid color-mix(in srgb, var(--soft-line) 68%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--soft-line) 48%, transparent);
}
.r3-viewer-modal .live-tool-content > .viewer-tool-code.is-scroll-region::-webkit-scrollbar-thumb,
.r3-viewer-modal .live-tool-content > .viewer-rich-output.is-scroll-region::-webkit-scrollbar-thumb,
.r3-viewer-modal .viewer-scratchpad-code > .viewer-tool-code.is-scroll-region::-webkit-scrollbar-thumb,
.r3-viewer-modal .viewer-diff-scroll::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--accent) 58%, var(--muted));
  border: 2px solid color-mix(in srgb, var(--panel-2) 78%, var(--bg));
  border-radius: 999px;
}
.r3-viewer-modal .live-tool-content > .viewer-tool-code.is-scroll-region::-webkit-scrollbar-thumb:hover,
.r3-viewer-modal .live-tool-content > .viewer-rich-output.is-scroll-region::-webkit-scrollbar-thumb:hover,
.r3-viewer-modal .viewer-scratchpad-code > .viewer-tool-code.is-scroll-region::-webkit-scrollbar-thumb:hover,
.r3-viewer-modal .viewer-diff-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}

/* Live refreshes should not animate layout/paint properties of expanded
   cards. This keeps nested scrolling visually stable on lower-end GPUs. */
.r3-viewer-modal .live-tool-detail,
.r3-viewer-modal .live-tool-content,
.r3-viewer-modal .viewer-tool-code,
.r3-viewer-modal .viewer-rich-output.is-scroll-region,
.r3-viewer-modal .viewer-mutation-diff,
.r3-viewer-modal .viewer-diff-scroll {
  transition: none !important;
}

@media (max-width: 760px) {
  .r3-viewer-modal .live-tool-content > .viewer-tool-code.is-scroll-region,
  .r3-viewer-modal .live-tool-content > .viewer-rich-output.is-scroll-region,
  .r3-viewer-modal .viewer-scratchpad-code > .viewer-tool-code.is-scroll-region {
    width: calc(100% - 14px) !important;
    max-width: calc(100% - 14px) !important;
    margin: 7px !important;
  }
  .r3-viewer-modal .viewer-mutation-diff {
    margin: 7px !important;
  }
}

/* R3D3 · Agent V2 request pacing side-panel layout · 2026-09-11 */
.agent-request-delay-control {
  gap: 9px;
  overflow: hidden;
}
.agent-request-delay-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
.agent-request-delay-head h3 {
  margin: 0;
  min-width: 0;
}
.agent-request-delay-state {
  flex: 0 0 auto;
  max-width: 48%;
  padding: 3px 7px;
  border: 1px solid var(--soft-line);
  background: var(--panel);
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .06em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-request-delay-label {
  margin: 0;
  color: var(--ink);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
}
.agent-request-delay-fields {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(118px, 1.15fr);
  gap: 8px;
  width: 100%;
  min-width: 0;
}
.option-card label.agent-request-delay-value,
.option-card label.agent-request-delay-unit {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 5px;
  min-width: 0;
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.agent-request-delay-fields input,
.agent-request-delay-fields select {
  display: block;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 36px;
  margin: 0;
  color: var(--ink);
  background: var(--panel);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: normal;
  text-transform: none;
}
.agent-request-delay-help {
  display: block;
  margin: 0;
  line-height: 1.4;
}
@media (max-width: 420px) {
  .agent-request-delay-fields {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Flow Frames / visual canvas groups --------------------------------------- */
.flow-frame-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  transform-origin: 0 0;
  overflow: visible;
}

/* Keep wires above frame fills and below executable nodes. */
.canvas-wrap > .flow-frame-layer { z-index: 0; }
.canvas-wrap > .wire-layer { z-index: 1 !important; }
.canvas-wrap > .canvas { z-index: 2 !important; }

.flow-frame {
  --frame-accent: #4f8cff;
  --frame-accent-rgb: 79, 140, 255;
  position: absolute;
  box-sizing: border-box;
  min-width: 300px;
  min-height: 170px;
  border: 1px solid color-mix(in srgb, var(--frame-accent) 55%, var(--line));
  border-radius: 16px;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--frame-accent) 13%, var(--panel)) 0,
      color-mix(in srgb, var(--frame-accent) 7%, var(--canvas)) 74px,
      color-mix(in srgb, var(--panel) 36%, transparent) 100%);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--frame-accent) 7%, transparent) inset,
    0 12px 32px color-mix(in srgb, #000 9%, transparent);
  pointer-events: auto;
  color: var(--ink);
  user-select: none;
  contain: layout paint;
}

.flow-frame[data-frame-color="violet"] { --frame-accent: #9b7cff; --frame-accent-rgb: 155, 124, 255; }
.flow-frame[data-frame-color="green"] { --frame-accent: #36b67e; --frame-accent-rgb: 54, 182, 126; }
.flow-frame[data-frame-color="amber"] { --frame-accent: #d99a2b; --frame-accent-rgb: 217, 154, 43; }
.flow-frame[data-frame-color="rose"] { --frame-accent: #e36d8d; --frame-accent-rgb: 227, 109, 141; }
.flow-frame[data-frame-color="slate"] { --frame-accent: #7d8ba1; --frame-accent-rgb: 125, 139, 161; }

.flow-frame:hover {
  border-color: color-mix(in srgb, var(--frame-accent) 78%, var(--line));
}

.flow-frame.selected {
  border-color: var(--frame-accent);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--frame-accent) 22%, transparent),
    0 0 0 1px color-mix(in srgb, var(--frame-accent) 16%, transparent) inset,
    0 14px 36px color-mix(in srgb, #000 12%, transparent);
}

.flow-frame.is-locked {
  border-style: dashed;
}

.flow-frame-head {
  height: 52px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 8px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--frame-accent) 22%, var(--soft-line));
  border-radius: 15px 15px 0 0;
  background: color-mix(in srgb, var(--frame-accent) 8%, var(--panel));
  cursor: grab;
}

.flow-frame.selected .flow-frame-head { background: color-mix(in srgb, var(--frame-accent) 12%, var(--panel)); }
.flow-frame.is-locked .flow-frame-head { cursor: default; }
.flow-frame-head:active { cursor: grabbing; }
.flow-frame.is-locked .flow-frame-head:active { cursor: default; }

.flow-frame-accent {
  width: 5px;
  height: 28px;
  flex: 0 0 5px;
  border-radius: 999px;
  background: var(--frame-accent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--frame-accent) 35%, transparent);
}

.flow-frame-heading {
  min-width: 0;
  flex: 1 1 auto;
  display: grid;
  gap: 1px;
}

.flow-frame-title {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: .01em;
  color: var(--ink);
}

.flow-frame-meta {
  color: color-mix(in srgb, var(--muted) 88%, var(--frame-accent));
  font-size: 10px;
  line-height: 1.2;
  font-weight: 650;
}

.flow-frame-grip {
  flex: 0 0 auto;
  color: color-mix(in srgb, var(--muted) 70%, var(--frame-accent));
  font-size: 15px;
  letter-spacing: -4px;
  transform: rotate(90deg);
  opacity: .8;
  padding: 4px 6px;
}

.flow-frame.is-locked .flow-frame-grip::before {
  content: '🔒';
  display: inline-block;
  transform: rotate(-90deg);
  font-size: 10px;
  letter-spacing: 0;
  margin-right: 4px;
}

.flow-frame-description {
  position: relative;
  z-index: 1;
  max-width: min(720px, calc(100% - 28px));
  margin: 9px 14px 0;
  color: color-mix(in srgb, var(--muted) 92%, var(--frame-accent));
  font-size: 11px;
  line-height: 1.38;
  font-weight: 520;
  white-space: pre-line;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  text-wrap: pretty;
  cursor: text;
}

.flow-frame-description.is-empty {
  opacity: .58;
  font-style: italic;
}

.flow-frame-title.is-editing,
.flow-frame-description.is-editing {
  user-select: text;
  -webkit-user-select: text;
  outline: 1px solid color-mix(in srgb, var(--frame-accent) 72%, white);
  outline-offset: 3px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--panel) 84%, transparent);
  overflow: visible;
  white-space: pre-wrap;
  -webkit-line-clamp: unset;
  cursor: text;
}

.flow-frame-resize {
  position: absolute;
  z-index: 4;
  display: block;
  pointer-events: auto;
}
.flow-frame-resize.n,
.flow-frame-resize.s { left: 12px; right: 12px; height: 9px; cursor: ns-resize; }
.flow-frame-resize.n { top: -5px; }
.flow-frame-resize.s { bottom: -5px; }
.flow-frame-resize.e,
.flow-frame-resize.w { top: 12px; bottom: 12px; width: 9px; cursor: ew-resize; }
.flow-frame-resize.e { right: -5px; }
.flow-frame-resize.w { left: -5px; }
.flow-frame-resize.ne,
.flow-frame-resize.nw,
.flow-frame-resize.se,
.flow-frame-resize.sw {
  width: 15px;
  height: 15px;
}
.flow-frame-resize.ne { top: -7px; right: -7px; cursor: nesw-resize; }
.flow-frame-resize.nw { top: -7px; left: -7px; cursor: nwse-resize; }
.flow-frame-resize.se { right: -7px; bottom: -7px; cursor: nwse-resize; }
.flow-frame-resize.sw { left: -7px; bottom: -7px; cursor: nesw-resize; }

.flow-frame.selected:not(.is-locked) .flow-frame-resize::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  border: 1px solid var(--frame-accent);
  border-radius: 2px;
  background: var(--panel);
  opacity: .9;
}
.flow-frame.selected .flow-frame-resize.n::after,
.flow-frame.selected .flow-frame-resize.s::after { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.flow-frame.selected .flow-frame-resize.e::after,
.flow-frame.selected .flow-frame-resize.w::after { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.flow-frame.selected .flow-frame-resize.ne::after,
.flow-frame.selected .flow-frame-resize.nw::after,
.flow-frame.selected .flow-frame-resize.se::after,
.flow-frame.selected .flow-frame-resize.sw::after { left: 50%; top: 50%; transform: translate(-50%, -50%); }

html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .flow-frame {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--frame-accent) 11%, var(--panel)) 0,
      color-mix(in srgb, var(--frame-accent) 5%, var(--canvas)) 74px,
      color-mix(in srgb, var(--panel) 26%, transparent) 100%);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--frame-accent) 7%, transparent) inset,
    0 16px 38px rgba(0, 0, 0, .18);
}

/* Frames are organizational surfaces only: never animate during a run. */
.flow-frame,
.flow-frame * {
  animation: none !important;
  transition: none !important;
}

@media (max-width: 760px) {
  .flow-frame-head { height: 48px; padding: 7px 10px; }
  .flow-frame-title { font-size: 13px; }
  .flow-frame-description { margin: 7px 12px 0; font-size: 10px; }
}

/* The transparent canvas surface must not swallow hits intended for frames.
   Nodes remain fully interactive; blank-space gestures continue on canvasWrap. */
.canvas-wrap > .canvas { pointer-events: none !important; }
.canvas-wrap > .canvas > .r3-node { pointer-events: auto !important; }
.canvas-wrap.follow-live-panning .flow-frame-layer {
  transition: transform .28s ease;
}

/* Left sidebar readability + compact file rows — 2026-09-11 */
.app-shell:not(.chat-mode) .left-panel {
  --left-surface: color-mix(in srgb, var(--panel) 93%, var(--accent) 7%);
  --left-section: color-mix(in srgb, var(--panel-2) 88%, var(--panel) 12%);
  --left-section-open: color-mix(in srgb, var(--panel-2) 82%, var(--accent) 18%);
  --left-divider: color-mix(in srgb, var(--soft-line) 78%, var(--accent) 22%);
  background: var(--left-surface);
}

.app-shell:not(.chat-mode) .left-panel .panel-section {
  margin-bottom: 6px;
  border-bottom-color: var(--left-divider);
}

.app-shell:not(.chat-mode) .left-panel .panel-summary {
  min-height: 38px;
  padding: 8px 9px;
  border: 1px solid color-mix(in srgb, var(--left-divider) 74%, transparent);
  border-radius: 6px;
  background: var(--left-section);
  color: color-mix(in srgb, var(--ink) 76%, var(--muted));
}

.app-shell:not(.chat-mode) .left-panel .panel-section[open] > .panel-summary {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--left-divider));
  background: var(--left-section-open);
  color: var(--ink);
}

.app-shell:not(.chat-mode) .left-panel .panel-section[open] > .panel-summary .panel-summary-icon,
.app-shell:not(.chat-mode) .left-panel .panel-section[open] > .panel-summary .panel-summary-chevron {
  color: var(--accent);
}

.app-shell:not(.chat-mode) .left-panel .panel-content {
  padding: 6px 7px 12px;
}

.app-shell:not(.chat-mode) .left-panel :is(.field-help, .option-help, label > small) {
  color: color-mix(in srgb, var(--muted) 82%, var(--ink) 18%);
}

.app-shell:not(.chat-mode) .left-panel :is(input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea) {
  background: color-mix(in srgb, var(--bg) 90%, var(--panel) 10%);
  border-color: color-mix(in srgb, var(--soft-line) 84%, var(--accent) 16%);
}

.app-shell:not(.chat-mode) .left-panel :is(input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea):focus {
  border-color: var(--accent);
  outline: 1px solid color-mix(in srgb, var(--accent) 46%, transparent);
  outline-offset: 1px;
}

/* File rows stay one compact line: name on the left, icon actions on the right. */
.app-shell:not(.chat-mode) .left-panel .file-list {
  gap: 2px;
  max-height: 410px;
  padding-right: 3px;
}

.app-shell:not(.chat-mode) .left-panel .file-item {
  grid-template-columns: minmax(72px, 1fr) auto;
  align-items: center;
  gap: 5px;
  min-height: 34px;
  padding: 4px 3px 4px 6px;
  border: 1px solid transparent;
  border-bottom-color: color-mix(in srgb, var(--left-divider) 65%, transparent);
  border-radius: 5px;
  background: transparent;
}

.app-shell:not(.chat-mode) .left-panel .file-item:hover,
.app-shell:not(.chat-mode) .left-panel .file-item:focus-within {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--left-divider));
  background: color-mix(in srgb, var(--panel-2) 80%, var(--accent) 20%);
}

.app-shell:not(.chat-mode) .left-panel .file-name-wrap {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 4px;
}

.app-shell:not(.chat-mode) .left-panel .file-name {
  min-width: 0;
  font-size: 11px;
  line-height: 1.25;
  color: color-mix(in srgb, var(--ink) 92%, var(--muted));
}

.app-shell:not(.chat-mode) .left-panel .file-actions {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 2px;
  min-width: 0;
}

.app-shell:not(.chat-mode) .left-panel .file-actions .file-mini {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: 0 0 26px;
  width: 26px;
  min-width: 26px;
  height: 26px;
  min-height: 26px;
  padding: 0;
  border-radius: 5px;
  font-size: 0;
  line-height: 1;
  color: var(--muted);
  background: color-mix(in srgb, var(--panel) 82%, transparent);
}

.app-shell:not(.chat-mode) .left-panel .file-actions .file-mini::before {
  display: block;
  font-size: 12px;
  line-height: 1;
  font-weight: 800;
  color: currentColor;
}

.app-shell:not(.chat-mode) .left-panel .file-actions .file-mini[data-action="view"]::before,
.app-shell:not(.chat-mode) .left-panel .file-actions .file-mini[data-action="viewdoc"]::before { content: '◉'; }
.app-shell:not(.chat-mode) .left-panel .file-actions .file-mini[data-action="viewmedia"]::before { content: '▶'; font-size: 10px; }
.app-shell:not(.chat-mode) .left-panel .file-actions .file-mini[data-action="probe"]::before { content: '⌁'; font-size: 14px; }
.app-shell:not(.chat-mode) .left-panel .file-actions .file-mini[data-action="edit"]::before { content: '✎'; }
.app-shell:not(.chat-mode) .left-panel .file-actions .file-mini[data-action="dl"]::before { content: '↓'; font-size: 14px; }
.app-shell:not(.chat-mode) .left-panel .file-actions .file-mini[data-action="del"]::before { content: '×'; font-size: 16px; }

.app-shell:not(.chat-mode) .left-panel .file-actions .file-mini:hover,
.app-shell:not(.chat-mode) .left-panel .file-actions .file-mini:focus-visible {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 58%, var(--left-divider));
  background: color-mix(in srgb, var(--panel-2) 74%, var(--accent) 26%);
}

.app-shell:not(.chat-mode) .left-panel .file-actions .file-mini.danger,
.app-shell:not(.chat-mode) .left-panel .file-actions .file-mini[data-action="del"] {
  color: color-mix(in srgb, var(--danger) 84%, var(--ink) 16%);
}

.app-shell:not(.chat-mode) .left-panel .file-actions .file-mini.danger:hover,
.app-shell:not(.chat-mode) .left-panel .file-actions .file-mini.danger:focus-visible,
.app-shell:not(.chat-mode) .left-panel .file-actions .file-mini[data-action="del"]:hover,
.app-shell:not(.chat-mode) .left-panel .file-actions .file-mini[data-action="del"]:focus-visible {
  border-color: color-mix(in srgb, var(--danger) 58%, var(--left-divider));
  background: color-mix(in srgb, var(--panel) 78%, var(--danger) 22%);
}

.app-shell:not(.chat-mode) .left-panel .file-project-view-btn {
  min-height: 28px !important;
  height: 28px;
  padding: 4px 8px;
  font-size: 10px;
}

.app-shell:not(.chat-mode) .left-panel .file-add-btn {
  min-height: 34px;
  margin-top: 6px;
}

html:is([data-theme="dark"], [data-theme="night"], [data-theme="dark-elegance"]) .app-shell:not(.chat-mode) .left-panel {
  --left-surface: color-mix(in srgb, var(--panel) 90%, #000 10%);
  --left-section: color-mix(in srgb, var(--panel-2) 88%, #000 12%);
  --left-section-open: color-mix(in srgb, var(--panel-2) 78%, var(--accent) 22%);
}

@media (max-width: 760px) {
  .app-shell:not(.chat-mode) .left-panel .file-actions .file-mini {
    flex-basis: 30px;
    width: 30px;
    min-width: 30px;
    height: 30px;
    min-height: 30px;
  }
}

/* Chat edited-file cards — keep generated/edited file actions readable and compact. */
.app-shell.chat-mode .r3-chat-edited-files {
  display: grid;
  gap: 7px;
  margin: 12px 0 2px;
  padding-top: 10px;
  border-top: 1px solid var(--soft-line);
}
.app-shell.chat-mode .r3-chat-edited-files-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.app-shell.chat-mode .r3-chat-edited-files-label > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.app-shell.chat-mode .r3-chat-edited-files-label i {
  display: grid;
  width: 17px;
  height: 17px;
  place-items: center;
  flex: 0 0 17px;
  border: 1px solid color-mix(in srgb, var(--output) 48%, var(--soft-line));
  background: color-mix(in srgb, var(--output) 10%, transparent);
  color: var(--output);
  font-style: normal;
  font-size: 10px;
}
.app-shell.chat-mode .r3-chat-edited-files-label small {
  color: color-mix(in srgb, var(--muted) 88%, var(--ink));
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .06em;
  white-space: nowrap;
}
.app-shell.chat-mode .r3-chat-edited-files-list {
  display: grid;
  gap: 6px;
}
.app-shell.chat-mode .r3-chat-edited-file {
  appearance: none;
  width: 100%;
  min-width: 0;
  min-height: 46px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 6px 7px;
  border: 1px solid color-mix(in srgb, var(--soft-line) 88%, var(--accent));
  border-radius: 0;
  background: color-mix(in srgb, var(--bg) 72%, var(--panel) 28%);
  color: var(--ink);
  box-shadow: 2px 2px 0 color-mix(in srgb, var(--shadow) 72%, transparent);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .14s ease, background .14s ease, transform .14s ease, box-shadow .14s ease;
}
.app-shell.chat-mode .r3-chat-edited-file:hover,
.app-shell.chat-mode .r3-chat-edited-file:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 70%, var(--soft-line));
  background: color-mix(in srgb, var(--accent) 8%, var(--panel));
  box-shadow: 3px 3px 0 color-mix(in srgb, var(--accent) 18%, var(--shadow));
  outline: none;
}
.app-shell.chat-mode .r3-chat-edited-file:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--shadow);
}
.app-shell.chat-mode .r3-chat-edited-file-icon {
  width: 38px;
  height: 32px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--soft-line));
  background: color-mix(in srgb, var(--accent) 9%, var(--bg));
  color: var(--accent);
  font: 800 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .05em;
}
.app-shell.chat-mode .r3-chat-edited-file-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.app-shell.chat-mode .r3-chat-edited-file-copy b,
.app-shell.chat-mode .r3-chat-edited-file-copy small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app-shell.chat-mode .r3-chat-edited-file-copy b {
  color: var(--ink);
  font-size: 12px;
  line-height: 1.2;
}
.app-shell.chat-mode .r3-chat-edited-file-copy small {
  color: var(--muted);
  font-size: 9px;
  line-height: 1.2;
}
.app-shell.chat-mode .r3-chat-edited-file-action {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 9px;
  border: 1px solid color-mix(in srgb, var(--accent) 46%, var(--soft-line));
  background: color-mix(in srgb, var(--accent) 8%, var(--panel));
  color: color-mix(in srgb, var(--accent) 84%, var(--ink));
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
}
.app-shell.chat-mode .r3-chat-edited-file-action i {
  font-style: normal;
  font-size: 12px;
  line-height: 1;
}
.app-shell.chat-mode .r3-chat-edited-file.is-previewable .r3-chat-edited-file-action {
  border-color: color-mix(in srgb, var(--output) 44%, var(--soft-line));
  background: color-mix(in srgb, var(--output) 8%, var(--panel));
  color: color-mix(in srgb, var(--output) 82%, var(--ink));
}
@media (max-width: 620px) {
  .app-shell.chat-mode .r3-chat-edited-file {
    grid-template-columns: 32px minmax(0, 1fr) auto;
    gap: 7px;
    min-height: 42px;
    padding: 5px 6px;
  }
  .app-shell.chat-mode .r3-chat-edited-file-icon { width: 32px; height: 28px; font-size: 8px; }
  .app-shell.chat-mode .r3-chat-edited-file-copy small { display: none; }
  .app-shell.chat-mode .r3-chat-edited-file-action { min-height: 28px; padding-inline: 7px; }
}

/* R3D3 Chat workspace chrome overhaul · 2026-09-12
   Presentation/navigation only. Keeps the existing chat/run harness and tool behavior intact. */
body:has(> .app-shell.chat-mode) {
  --chat-ui-border: color-mix(in srgb, var(--soft-line) 64%, transparent);
  --chat-ui-hover: color-mix(in srgb, var(--accent) 9%, var(--panel-2));
  --chat-ui-raised: color-mix(in srgb, var(--panel) 94%, var(--bg) 6%);
  --chat-ui-shadow: 0 16px 48px rgba(0, 0, 0, .24);
}
.app-shell.chat-mode {
  height: 100dvh;
  grid-template-rows: auto minmax(0, 1fr);
}
.app-shell.chat-mode .topbar-v2 {
  min-height: 60px;
  gap: 12px;
  padding: 8px 14px;
  border-color: var(--chat-ui-border);
  background: var(--panel);
  box-shadow: none !important;
}
.app-shell.chat-mode .topbar-leading {
  flex: 0 0 auto;
  gap: 8px;
}
.app-shell.chat-mode .brand-mark,
.app-shell.chat-mode .chat-toggle-btn {
  min-height: 40px;
  border-radius: 7px;
  border-color: var(--chat-ui-border);
  box-shadow: none !important;
}
.app-shell.chat-mode .chat-toggle-btn {
  padding-inline: 13px;
  font-weight: 800;
}
.app-shell.chat-mode .toolbar-v2 {
  flex: 1 1 auto;
  min-width: 0;
  gap: 8px;
  align-items: center;
}
/* Flow editing controls are redundant while the composer owns execution. */
.app-shell.chat-mode .run-action-group { display: none !important; }
.app-shell.chat-mode .topbar-status-slot {
  margin-left: auto;
  flex: 0 1 112px;
  min-width: 64px;
}
.app-shell.chat-mode .save-state-pill {
  min-height: 36px;
  padding: 7px 0;
  border: 0;
  background: transparent;
  box-shadow: none !important;
}
.app-shell.chat-mode .save-state-pill::before { content: none; }
.app-shell.chat-mode .plan-status-pill {
  min-width: 0;
  gap: 7px;
  border-radius: 7px;
  border-color: var(--chat-ui-border);
  background: var(--panel-2);
  box-shadow: none !important;
}
.app-shell.chat-mode .plan-status-label,
.app-shell.chat-mode #planStatusUsage { display: none; }
.app-shell.chat-mode :is(.topbar-more-panel, .library-choice-menu) {
  max-height: calc(100dvh - 84px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  border: 1px solid var(--chat-ui-border);
  border-radius: 10px;
  padding: 10px;
  background: var(--panel);
  box-shadow: var(--chat-ui-shadow) !important;
}
.app-shell.chat-mode .topbar-more-panel {
  width: min(410px, calc(100vw - 24px));
  gap: 10px;
}
.app-shell.chat-mode .topbar-more-section {
  padding: 0 0 10px;
  border-bottom: 1px solid var(--chat-ui-border);
}
.app-shell.chat-mode .topbar-more-section:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.app-shell.chat-mode .topbar-more-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  padding: 0;
  border: 0;
  background: transparent;
}
.app-shell.chat-mode .topbar-more-panel .toolbar-btn {
  width: 100%;
  min-height: 42px;
  border-radius: 7px;
  box-shadow: none !important;
}

.app-shell.chat-mode .r3-chat-shell {
  min-height: 0;
  grid-template-columns: 316px minmax(0, 1fr);
  background: var(--canvas);
  overflow: hidden;
  transition: grid-template-columns .16s ease;
}
.app-shell.chat-mode .r3-chat-sidebar {
  min-width: 0;
  min-height: 0;
  padding: 10px;
  gap: 8px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--soft-line) transparent;
  scrollbar-gutter: stable;
  border-right: 1px solid var(--chat-ui-border);
  background: var(--panel);
  transition: opacity .14s ease, padding .14s ease;
}
.app-shell.chat-mode .r3-chat-brand {
  gap: 3px;
  padding: 10px 11px 11px;
  border: 0;
  border-bottom: 1px solid var(--chat-ui-border);
  background: transparent;
  box-shadow: none !important;
}
.app-shell.chat-mode .r3-chat-brand-kicker,
.app-shell.chat-mode .r3-chat-top-kicker {
  color: var(--accent);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.app-shell.chat-mode .r3-chat-brand strong {
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: .03em;
  text-transform: none;
}
.app-shell.chat-mode .r3-chat-brand span:last-child {
  font-size: 11px;
  line-height: 1.4;
}
.app-shell.chat-mode .r3-chat-panel {
  margin: 0;
  border: 0 !important;
  border-bottom: 1px solid var(--chat-ui-border) !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
}
.app-shell.chat-mode .r3-chat-panel-head {
  min-height: 46px;
  border: 0;
  background: transparent;
}
.app-shell.chat-mode .r3-chat-panel-toggle {
  min-height: 46px;
  gap: 8px;
  padding: 8px 9px;
  border-left: 0;
  border-radius: 7px;
  text-transform: none;
  letter-spacing: normal;
}
.app-shell.chat-mode .r3-chat-panel-toggle:hover,
.app-shell.chat-mode .r3-chat-panel-toggle:focus-visible {
  border-left-color: transparent;
  background: var(--chat-ui-hover);
}
.app-shell.chat-mode .r3-chat-panel-title {
  min-width: 0;
  display: grid !important;
  gap: 2px;
  overflow: visible !important;
  white-space: normal !important;
}
.app-shell.chat-mode .r3-chat-panel-title b {
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
}
.app-shell.chat-mode .r3-chat-panel-title small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: normal;
  text-transform: none;
}
.app-shell.chat-mode .r3-chat-panel-toggle i { margin-left: auto; }
.app-shell.chat-mode .r3-chat-panel-head-actions {
  gap: 5px;
  padding-right: 7px;
}
.app-shell.chat-mode .r3-chat-panel-head-actions .ui-btn,
.app-shell.chat-mode .r3-chat-panel-head > .ui-btn {
  min-height: 30px;
  height: 30px;
  padding: 5px 8px;
  margin-right: 7px;
  border-radius: 6px;
  box-shadow: none !important;
}
.app-shell.chat-mode .r3-chat-panel-body {
  gap: 10px;
  padding: 2px 9px 13px;
}
.app-shell.chat-mode .r3-chat-panel.is-collapsed .r3-chat-panel-body { display: none !important; }
.app-shell.chat-mode .r3-chat-panel label {
  margin: 0;
  gap: 6px;
  font-size: 10px;
  line-height: 1.35;
  letter-spacing: .06em;
}
.app-shell.chat-mode .r3-chat-panel :is(input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea) {
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--soft-line);
  border-radius: 7px;
  background: var(--bg);
  padding: 8px 9px;
  box-shadow: none;
}
.app-shell.chat-mode .r3-chat-panel :is(input, select, textarea):focus {
  border-color: var(--accent);
  outline: 2px solid color-mix(in srgb, var(--accent) 18%, transparent);
  outline-offset: 1px;
}
.app-shell.chat-mode .r3-chat-run-settings .inline-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
.app-shell.chat-mode .r3-chat-run-settings .inline-row .ui-btn {
  min-width: 0;
  min-height: 34px;
  padding: 7px 8px;
  border-radius: 7px;
  box-shadow: none !important;
}
.app-shell.chat-mode .r3-chat-run-status {
  margin: 0;
  min-height: 0;
  padding: 7px 8px;
  border: 1px solid var(--chat-ui-border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.app-shell.chat-mode .r3-chat-hint {
  margin: 0;
  font-size: 11px;
  line-height: 1.45;
}
.app-shell.chat-mode .r3-chat-file-list {
  max-height: min(34dvh, 340px);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding-right: 3px;
}
.app-shell.chat-mode .r3-chat-file-list .file-folder-row {
  grid-template-columns: minmax(0, 1fr) auto auto;
}
.app-shell.chat-mode .r3-chat-file-list .file-folder-delete {
  width: auto !important;
  min-width: 48px !important;
  padding-inline: 7px !important;
  font-size: 9px !important;
}
.app-shell.chat-mode .r3-chat-file-list .file-folder-delete::before { content: none !important; }

.app-shell.chat-mode .r3-chat-main {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  background: var(--bg);
}
.app-shell.chat-mode .r3-chat-mobile-top {
  display: flex;
  min-width: 0;
  min-height: 64px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px clamp(16px, 3vw, 32px);
  border-bottom: 1px solid var(--chat-ui-border);
  background: var(--panel);
  box-shadow: none !important;
  z-index: 2;
}
.app-shell.chat-mode .r3-chat-mobile-top > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.app-shell.chat-mode .r3-chat-mobile-top b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 17px;
  line-height: 1.2;
}
.app-shell.chat-mode .r3-chat-mobile-top small {
  max-width: min(52vw, 620px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
}
.app-shell.chat-mode .r3-chat-mobile-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.app-shell.chat-mode .r3-chat-mobile-start-select {
  width: clamp(180px, 24vw, 320px);
  min-width: 0;
  min-height: 38px;
  border-radius: 7px;
  border-color: var(--soft-line);
  background: var(--bg);
  padding: 7px 9px;
  font-size: 12px;
}
.app-shell.chat-mode .r3-chat-mobile-top .ui-btn {
  min-height: 38px;
  border-radius: 7px;
  box-shadow: none !important;
}
@media (min-width: 921px) {
  .app-shell.chat-mode .r3-chat-shell.settings-collapsed {
    grid-template-columns: 0 minmax(0, 1fr);
  }
  .app-shell.chat-mode .r3-chat-shell.settings-collapsed .r3-chat-sidebar {
    opacity: 0;
    pointer-events: none;
    padding-inline: 0;
    border-right: 0;
    overflow: hidden;
  }
}
.app-shell.chat-mode .r3-chat-messages {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 24px clamp(18px, 4vw, 58px) 28px;
  gap: 14px;
}
.app-shell.chat-mode .r3-chat-row {
  width: min(980px, 100%);
}
.app-shell.chat-mode .r3-chat-bubble {
  max-width: min(820px, 78vw);
  border-radius: 8px;
  border-color: var(--chat-ui-border);
  background: var(--chat-ui-raised);
  box-shadow: none !important;
}
.app-shell.chat-mode .r3-chat-row.user .r3-chat-bubble {
  border-color: color-mix(in srgb, var(--accent) 48%, var(--chat-ui-border));
  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
}
.app-shell.chat-mode .r3-chat-avatar {
  border-radius: 7px;
  border-color: var(--chat-ui-border);
  box-shadow: none !important;
}
.app-shell.chat-mode .r3-chat-empty {
  border-radius: 10px;
  border-color: var(--chat-ui-border);
  background: var(--panel);
  box-shadow: none !important;
}
.app-shell.chat-mode .r3-chat-composer {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "attachments attachments"
    "input send"
    "tools tools"
    "hint hint";
  gap: 8px;
  padding: 12px clamp(18px, 4vw, 58px) 14px;
  border-top: 1px solid var(--chat-ui-border);
  background: var(--panel);
}
.app-shell.chat-mode .r3-chat-input-wrap {
  min-width: 0;
  border-radius: 9px;
  border-color: var(--soft-line);
  background: var(--bg);
  box-shadow: none !important;
}
.app-shell.chat-mode .r3-chat-input-wrap:focus-within {
  border-color: var(--accent);
  outline: 2px solid color-mix(in srgb, var(--accent) 16%, transparent);
  outline-offset: 1px;
}
.app-shell.chat-mode .r3-chat-input {
  min-height: 50px;
  max-height: 180px;
  font-size: 14px;
}
.app-shell.chat-mode .r3-chat-send {
  min-width: 92px;
  min-height: 50px;
  border-radius: 9px;
  box-shadow: none !important;
}
.app-shell.chat-mode .r3-chat-prompt-tools {
  grid-area: tools;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}
.app-shell.chat-mode .r3-chat-prompt-tools .ui-btn {
  min-height: 30px;
  padding: 5px 9px;
  border-radius: 6px;
  box-shadow: none !important;
}
.app-shell.chat-mode .r3-chat-mention-help {
  grid-area: hint;
  margin: 0;
  min-width: 0;
  font-size: 10.5px;
}
.app-shell.chat-mode .r3-chat-attachment-tray,
.app-shell.chat-mode .r3-chat-attachment-chip {
  border-radius: 7px;
  box-shadow: none !important;
}
.app-shell.chat-mode :is(.r3-chat-sidebar, .r3-chat-messages, .r3-chat-file-list)::-webkit-scrollbar { width: 9px; height: 9px; }
.app-shell.chat-mode :is(.r3-chat-sidebar, .r3-chat-messages, .r3-chat-file-list)::-webkit-scrollbar-track { background: transparent; }
.app-shell.chat-mode :is(.r3-chat-sidebar, .r3-chat-messages, .r3-chat-file-list)::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: color-mix(in srgb, var(--soft-line) 78%, transparent);
  background-clip: padding-box;
}
.app-shell.chat-mode :is(.topbar-v2, .r3-chat-shell) :is(button, summary, input, select, textarea, a):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (min-width: 761px) and (max-width: 1080px) {
  .app-shell.chat-mode .r3-chat-shell { grid-template-columns: 276px minmax(0, 1fr); }
  .app-shell.chat-mode .r3-chat-mobile-start-select { width: clamp(150px, 22vw, 230px); }
  .app-shell.chat-mode .plan-status-pill { display: none; }
  .app-shell.chat-mode .r3-chat-messages,
  .app-shell.chat-mode .r3-chat-composer { padding-inline: 20px; }
}

html.r3-mobile-device .app-shell.chat-mode {
  height: 100dvh !important;
  min-height: 0 !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
}
html.r3-mobile-device .app-shell.chat-mode .topbar-v2 {
  min-height: 60px !important;
  height: 60px !important;
  padding: 8px 10px !important;
  border-color: var(--chat-ui-border) !important;
  overflow: visible !important;
}
html.r3-mobile-device .app-shell.chat-mode .topbar-status-slot,
html.r3-mobile-device .app-shell.chat-mode .plan-status-pill { display: none !important; }
html.r3-mobile-device .app-shell.chat-mode .topbar-leading { min-width: 0; gap: 7px !important; }
html.r3-mobile-device .app-shell.chat-mode .brand-link .brand-mark {
  min-width: 58px !important;
  min-height: 40px !important;
  font-size: 20px !important;
}
html.r3-mobile-device .app-shell.chat-mode .chat-toggle-btn {
  min-width: 92px !important;
  max-width: 34vw !important;
  min-height: 40px !important;
  padding-inline: 9px !important;
  font-size: 12px !important;
}
html.r3-mobile-device .app-shell.chat-mode .toolbar-v2 > .topbar-more-menu { display: block !important; }
html.r3-mobile-device .app-shell.chat-mode .topbar-more-btn {
  min-width: 44px !important;
  width: 44px !important;
  min-height: 40px !important;
}
html.r3-mobile-device .app-shell.chat-mode .topbar-more-btn b { display: none !important; }
html.r3-mobile-device .app-shell.chat-mode .r3-chat-main {
  grid-template-rows: auto minmax(0, 1fr) auto !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-mobile-top {
  min-height: 58px !important;
  padding: 8px 10px !important;
  gap: 8px !important;
  border-color: var(--chat-ui-border) !important;
  background: var(--panel) !important;
  box-shadow: none !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-top-kicker { display: none; }
html.r3-mobile-device .app-shell.chat-mode .r3-chat-mobile-top b { font-size: 14px !important; }
html.r3-mobile-device .app-shell.chat-mode .r3-chat-mobile-top small { max-width: 46vw; font-size: 10px !important; }
html.r3-mobile-device .app-shell.chat-mode .r3-chat-mobile-actions { gap: 6px !important; }
html.r3-mobile-device .app-shell.chat-mode .r3-chat-mobile-start-select {
  width: min(38vw, 170px) !important;
  min-height: 38px !important;
  padding: 6px 7px !important;
  font-size: 11px !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-mobile-top .ui-btn {
  min-width: 72px !important;
  min-height: 38px !important;
  padding: 7px 9px !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-sidebar { display: none !important; }
html.r3-mobile-device .app-shell.chat-mode .r3-chat-shell.mobile-settings-open .r3-chat-sidebar {
  position: fixed !important;
  inset: 68px max(8px, env(safe-area-inset-right, 0px)) max(10px, env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px)) !important;
  z-index: 280 !important;
  display: block !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scrollbar-gutter: stable;
  padding: 8px !important;
  border: 1px solid var(--chat-ui-border) !important;
  border-radius: 12px !important;
  background: var(--panel) !important;
  box-shadow: var(--chat-ui-shadow) !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-brand { display: none !important; }
html.r3-mobile-device .app-shell.chat-mode .r3-chat-panel {
  padding: 0 !important;
  border-bottom: 1px solid var(--chat-ui-border) !important;
  background: transparent !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-panel-head {
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--panel) !important;
  border-bottom: 0 !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-panel-toggle { min-height: 48px !important; }
html.r3-mobile-device .app-shell.chat-mode .r3-chat-panel-body { padding: 4px 9px 14px !important; }
html.r3-mobile-device .app-shell.chat-mode .r3-chat-panel :is(input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea) { font-size: 16px !important; }
html.r3-mobile-device .app-shell.chat-mode .r3-chat-file-list { max-height: min(34dvh, 300px) !important; }
html.r3-mobile-device .app-shell.chat-mode .r3-chat-messages {
  padding: 12px 10px 14px !important;
  gap: 10px !important;
  scrollbar-gutter: auto;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-row { width: 100% !important; }
html.r3-mobile-device .app-shell.chat-mode .r3-chat-bubble {
  max-width: calc(100vw - 62px) !important;
  border-radius: 8px !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-composer {
  grid-template-columns: minmax(0, 1fr) 74px !important;
  grid-template-areas:
    "attachments attachments"
    "input send"
    "tools tools"
    "hint hint" !important;
  gap: 7px !important;
  padding: 9px 10px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  border-color: var(--chat-ui-border) !important;
  background: var(--panel) !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-input-wrap {
  min-height: 50px !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-send {
  width: 74px !important;
  min-width: 74px !important;
  min-height: 50px !important;
  border-radius: 8px !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-prompt-tools { grid-area: tools !important; }
html.r3-mobile-device .app-shell.chat-mode .r3-chat-mention-help { grid-area: hint !important; }

@media (prefers-reduced-motion: reduce) {
  .app-shell.chat-mode .r3-chat-shell,
  .app-shell.chat-mode .r3-chat-sidebar { transition: none !important; }
}

/* Chat workspace scroll hierarchy fix · 2026-09-12
   The sidebar is the primary navigator; bounded file lists can scroll independently
   but hand wheel/touch scrolling back to the sidebar at their edges. */
.app-shell.chat-mode .r3-chat-sidebar {
  display: grid;
  grid-auto-flow: row;
  grid-auto-rows: max-content;
  align-content: start;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-x: none;
  overscroll-behavior-y: contain;
  scroll-padding-block: 10px 22px;
  touch-action: pan-y;
}
.app-shell.chat-mode .r3-chat-sidebar > :is(.r3-chat-brand, .r3-chat-panel) {
  min-width: 0;
  flex: none;
}
.app-shell.chat-mode .r3-chat-panel {
  min-height: max-content;
}
.app-shell.chat-mode .r3-chat-file-list {
  width: 100%;
  min-width: 0;
  max-height: min(30dvh, 300px);
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-x: none;
  overscroll-behavior-y: auto;
  scrollbar-gutter: stable;
  touch-action: pan-y;
}

/* Keep Chat file rows inside the sidebar instead of creating a horizontal
   scroll lane just to reach file actions. */
.app-shell.chat-mode .r3-chat-file-list .file-item {
  width: 100%;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center;
  gap: 6px;
  padding: 5px 6px;
  overflow: hidden;
}
.app-shell.chat-mode .r3-chat-file-list .file-name-wrap,
.app-shell.chat-mode .r3-chat-file-list .file-name {
  min-width: 0;
  max-width: 100%;
}
.app-shell.chat-mode .r3-chat-file-list .file-name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app-shell.chat-mode .r3-chat-file-list .file-actions {
  min-width: 0;
  flex: 0 0 auto;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 3px;
  overflow: visible !important;
}
.app-shell.chat-mode .r3-chat-file-list .file-actions .file-mini {
  position: relative;
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0 !important;
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  font-size: 0 !important;
  line-height: 1;
  border-radius: 5px;
}
.app-shell.chat-mode .r3-chat-file-list .file-actions .file-mini::before {
  display: block;
  font-size: 12px;
  font-weight: 850;
  line-height: 1;
}
.app-shell.chat-mode .r3-chat-file-list .file-actions .file-mini[data-action="view"]::before,
.app-shell.chat-mode .r3-chat-file-list .file-actions .file-mini[data-action="viewdoc"]::before { content: '◉'; }
.app-shell.chat-mode .r3-chat-file-list .file-actions .file-mini[data-action="viewmedia"]::before { content: '▶'; font-size: 10px; }
.app-shell.chat-mode .r3-chat-file-list .file-actions .file-mini[data-action="probe"]::before { content: '⌁'; font-size: 14px; }
.app-shell.chat-mode .r3-chat-file-list .file-actions .file-mini[data-action="edit"]::before { content: '✎'; }
.app-shell.chat-mode .r3-chat-file-list .file-actions .file-mini[data-action="dl"]::before { content: '↓'; font-size: 14px; }
.app-shell.chat-mode .r3-chat-file-list .file-actions .file-mini[data-action="del"]::before { content: '×'; font-size: 16px; }

.app-shell.chat-mode .r3-chat-file-list .file-folder-row {
  width: 100%;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) auto 28px !important;
  gap: 5px;
  overflow: hidden;
}
.app-shell.chat-mode .r3-chat-file-list .file-folder-empty {
  white-space: nowrap;
}
.app-shell.chat-mode .r3-chat-file-list .file-folder-delete {
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 !important;
  overflow: hidden;
  font-size: 0 !important;
}
.app-shell.chat-mode .r3-chat-file-list .file-folder-delete::after {
  content: '×';
  font-size: 16px;
  line-height: 1;
}

/* Mobile settings sheet keeps the same scroll ownership: the sheet itself
   navigates sections and the file list yields scrolling at its boundaries. */
html.r3-mobile-device .app-shell.chat-mode .r3-chat-shell.mobile-settings-open .r3-chat-sidebar {
  display: block !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain !important;
  touch-action: pan-y !important;
  scroll-padding-block: 8px calc(18px + env(safe-area-inset-bottom, 0px));
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-sidebar > .r3-chat-panel {
  margin-bottom: 0;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-file-list {
  max-height: min(30dvh, 270px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: auto !important;
  touch-action: pan-y !important;
}

/* Chat stopped-run retry controls — 2026-09-12 */
.app-shell.chat-mode .r3-chat-user-stopped {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--soft-line) 58%, transparent);
}
.app-shell.chat-mode .r3-chat-user-stopped-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
  letter-spacing: .035em;
}
.app-shell.chat-mode .r3-chat-user-stopped-label > i {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--danger, #d65b52) 80%, var(--muted));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger, #d65b52) 12%, transparent);
}
.app-shell.chat-mode .r3-chat-user-stopped-label b {
  color: var(--text);
  font: inherit;
  font-weight: 700;
}
.app-shell.chat-mode .r3-chat-retry-btn {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 48%, var(--soft-line));
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
  color: var(--accent);
  font-size: 10px;
  line-height: 1;
  letter-spacing: .075em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: none;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease, transform .12s ease;
}
.app-shell.chat-mode .r3-chat-retry-btn span {
  font-size: 14px;
  line-height: 1;
  transform-origin: center;
}
.app-shell.chat-mode .r3-chat-retry-btn b {
  color: inherit;
  font: inherit;
  font-weight: 800;
}
.app-shell.chat-mode .r3-chat-retry-btn:hover,
.app-shell.chat-mode .r3-chat-retry-btn:focus-visible {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 18%, var(--panel));
  color: color-mix(in srgb, var(--accent) 88%, var(--text));
  transform: translateY(-1px);
}
.app-shell.chat-mode .r3-chat-retry-btn:active {
  transform: translateY(0);
}
.app-shell.chat-mode .r3-chat-retry-btn:disabled {
  opacity: .45;
  cursor: wait;
  transform: none;
}
@media (max-width: 560px) {
  .app-shell.chat-mode .r3-chat-user-stopped {
    align-items: flex-start;
  }
  .app-shell.chat-mode .r3-chat-retry-btn {
    min-height: 34px;
    padding-inline: 11px;
  }
}

/* Chat workspace: project selector */
.app-shell.chat-mode .r3-chat-project-picker {
  display: grid;
  gap: 5px;
  width: 100%;
  margin-top: 8px;
}
.app-shell.chat-mode .r3-chat-project-picker > span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.app-shell.chat-mode .r3-chat-project-select {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  padding: 7px 30px 7px 9px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--chat-ui-border));
  background: color-mix(in srgb, var(--panel) 94%, var(--accent) 6%);
  color: var(--text);
  font-size: 11px;
  font-weight: 750;
  box-sizing: border-box;
}
.app-shell.chat-mode .r3-chat-project-select:hover,
.app-shell.chat-mode .r3-chat-project-select:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 68%, var(--chat-ui-border));
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 12%, transparent);
}
.app-shell.chat-mode .r3-chat-project-select:disabled {
  opacity: .58;
  cursor: wait;
}

/* Chat workspace: project ZIP action */
.app-shell.chat-mode .r3-chat-brand .r3-chat-download-project {
  width: 100%;
  min-height: 36px;
  margin-top: 7px;
  padding: 8px 10px;
  justify-content: center;
  border-color: color-mix(in srgb, var(--accent) 42%, var(--chat-ui-border));
  background: color-mix(in srgb, var(--accent) 8%, var(--panel));
  color: var(--text);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .035em;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 5%, transparent);
}
.app-shell.chat-mode .r3-chat-brand .r3-chat-download-project:hover,
.app-shell.chat-mode .r3-chat-brand .r3-chat-download-project:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 72%, var(--chat-ui-border));
  background: color-mix(in srgb, var(--accent) 14%, var(--panel));
}
.app-shell.chat-mode .r3-chat-brand .r3-chat-download-project:active {
  transform: translateY(1px);
}

/* Chat View: long-message expand/collapse control */
.app-shell.chat-mode .r3-chat-message-body.is-collapsible {
  position: relative;
  max-height: 320px;
  overflow: hidden;
}

.app-shell.chat-mode .r3-chat-message-body.is-collapsible:not(.is-expanded)::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 64px;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--accent) 10%, var(--panel)) 88%);
}

.app-shell.chat-mode .r3-chat-message-body.is-collapsible.is-expanded {
  max-height: none;
  overflow: visible;
}

.app-shell.chat-mode .r3-chat-message-body.is-collapsible.is-expanded::after {
  display: none;
}

.app-shell.chat-mode .r3-chat-view-more {
  appearance: none;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 8px 0 2px;
  padding: 6px 9px;
  border: 1px solid color-mix(in srgb, var(--accent) 44%, var(--chat-ui-border));
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 8%, var(--panel));
  color: var(--text);
  font: inherit;
  font-size: 11px;
  font-weight: 750;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
}

.app-shell.chat-mode .r3-chat-view-more i {
  font-style: normal;
  font-size: 12px;
  line-height: 1;
}

.app-shell.chat-mode .r3-chat-view-more:hover,
.app-shell.chat-mode .r3-chat-view-more:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 72%, var(--chat-ui-border));
  background: color-mix(in srgb, var(--accent) 14%, var(--panel));
  outline: none;
}

/* Preserve native <details> collapsing despite the grid layout rule above. */
.run-summary-chat .run-summary-more:not([open]) > .run-summary-more-body {
  display: none !important;
}

.run-summary-chat .run-summary-more[open] > .run-summary-more-body {
  display: grid !important;
}

@media (max-width: 720px) {
  .app-shell.chat-mode .r3-chat-message-body.is-collapsible {
    max-height: 260px;
  }

  .app-shell.chat-mode .r3-chat-message-body.is-collapsible.is-expanded {
    max-height: none;
  }
}

/* Chat Needs Review: expose the same node continuation action as Flow View. */
.run-summary-chat .run-summary-chat-actions {
  display: flex !important;
  align-items: flex-start !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 1px !important;
}

.run-summary-chat .run-summary-chat-actions > .run-summary-more {
  margin: 0 !important;
}

.run-summary-chat .run-summary-continue-btn {
  min-height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  padding: 8px 12px !important;
  border: 1px solid color-mix(in srgb, #72c98f 58%, var(--soft-line)) !important;
  background: color-mix(in srgb, #72c98f 18%, var(--panel)) !important;
  color: color-mix(in srgb, #c9f4d7 82%, var(--ink)) !important;
  box-shadow: 2px 2px 0 var(--shadow) !important;
  cursor: pointer !important;
  font: inherit !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .055em !important;
  text-transform: uppercase !important;
}

.run-summary-chat .run-summary-continue-btn:hover,
.run-summary-chat .run-summary-continue-btn:focus-visible {
  border-color: color-mix(in srgb, #72c98f 78%, var(--soft-line)) !important;
  background: color-mix(in srgb, #72c98f 27%, var(--panel)) !important;
  outline: none !important;
}

.run-summary-chat .run-summary-continue-btn:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--shadow) !important;
}

.run-summary-chat .run-summary-continue-btn:disabled {
  opacity: .55 !important;
  cursor: wait !important;
  transform: none !important;
}

@media (max-width: 720px) {
  .run-summary-chat .run-summary-chat-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .run-summary-chat .run-summary-chat-actions > .run-summary-more,
  .run-summary-chat .run-summary-more > summary,
  .run-summary-chat .run-summary-continue-btn {
    width: 100% !important;
  }
}

@media (min-width: 721px) {
  .run-summary-chat .run-summary-chat-actions > .run-summary-more:not([open]) {
    flex: 0 0 auto !important;
    width: auto !important;
  }

  .run-summary-chat .run-summary-chat-actions > .run-summary-more[open] {
    flex: 1 1 100% !important;
    width: 100% !important;
  }
}

/* Chat send motion: intentionally visual-only. Keep this scoped to Chat View;
   do not couple these transitions/delays to flow execution or Agent V2 logic.
   Entrance state is persisted in JS across Chat View rerenders so the motion
   is not stripped by live-run synchronization immediately after send. */
.r3-chat-row.r3-chat-entering {
  opacity: 0;
  filter: blur(2px);
  will-change: opacity, transform, filter;
  transition:
    opacity 300ms cubic-bezier(.2,.75,.25,1),
    transform 430ms cubic-bezier(.16,1,.3,1),
    filter 300ms ease;
}
.r3-chat-row.r3-chat-entering-user {
  transform: translate3d(18px, 12px, 0) scale(.97);
}
.r3-chat-row.r3-chat-entering-agent {
  transform: translate3d(-18px, 12px, 0) scale(.97);
}
.r3-chat-row.r3-chat-entering.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0) scale(1);
}
.r3-chat-row.r3-chat-entering .r3-chat-avatar {
  transform: scale(.78);
  opacity: .2;
  transition:
    opacity 300ms ease 80ms,
    transform 460ms cubic-bezier(.16,1,.3,1) 70ms;
}
.r3-chat-row.r3-chat-entering.is-visible .r3-chat-avatar {
  transform: scale(1);
  opacity: 1;
}
.r3-chat-row.r3-chat-entering .r3-chat-bubble {
  transform-origin: 50% 100%;
}
.r3-chat-row.r3-chat-entering-agent .r3-chat-bubble {
  box-shadow: 0 0 0 transparent;
  outline: 1px solid color-mix(in srgb, var(--accent) 0%, transparent);
  transition:
    box-shadow 420ms ease 80ms,
    outline-color 420ms ease 80ms;
}
.r3-chat-row.r3-chat-entering-agent.is-visible .r3-chat-bubble {
  box-shadow: 3px 3px 0 var(--shadow), 0 0 18px color-mix(in srgb, var(--accent) 16%, transparent);
  outline-color: color-mix(in srgb, var(--accent) 22%, transparent);
}
.r3-chat-composer.r3-chat-send-transition .r3-chat-input-wrap {
  animation: r3ChatComposerSettle 460ms cubic-bezier(.16,1,.3,1);
}
.r3-chat-composer.r3-chat-send-transition .r3-chat-send {
  animation: r3ChatSendPulse 460ms cubic-bezier(.16,1,.3,1);
}
.r3-chat-row.assistant.is-live .r3-chat-typing span {
  animation-duration: .82s;
}
@keyframes r3ChatComposerSettle {
  0% { transform: translateY(0); box-shadow: none; }
  34% { transform: translateY(3px) scale(.994); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 14%, transparent); }
  100% { transform: translateY(0) scale(1); box-shadow: none; }
}
@keyframes r3ChatSendPulse {
  0% { transform: scale(1); filter: brightness(1); }
  34% { transform: scale(.9); filter: brightness(1.18); }
  70% { transform: scale(1.07); filter: brightness(1.1); }
  100% { transform: scale(1); filter: brightness(1); }
}
@media (prefers-reduced-motion: reduce) {
  .r3-chat-row.r3-chat-entering,
  .r3-chat-row.r3-chat-entering .r3-chat-avatar,
  .r3-chat-row.r3-chat-entering-agent .r3-chat-bubble {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
    outline-color: transparent !important;
  }
  .r3-chat-composer.r3-chat-send-transition .r3-chat-input-wrap,
  .r3-chat-composer.r3-chat-send-transition .r3-chat-send {
    animation: none !important;
  }
}

/* Library chooser dropdown — keep these base styles with the Library markup.
   The chooser is a nested menu inside More; without these rules it falls back
   to raw browser button/text layout. */
.library-picker-wrap {
  position: relative;
  min-width: 0;
  width: 100%;
}
.library-picker-trigger {
  width: 100%;
}
.library-picker-caret {
  margin-left: auto;
  font-size: 11px;
  line-height: 1;
  opacity: .72;
  transition: transform .14s ease, opacity .14s ease;
}
.library-picker-trigger[aria-expanded="true"] .library-picker-caret {
  transform: rotate(180deg);
  opacity: 1;
}
.library-choice-menu {
  position: absolute;
  top: calc(100% + 7px);
  left: 0;
  z-index: 140;
  width: min(330px, calc(100vw - 42px));
  display: grid;
  gap: 7px;
  padding: 8px;
  border: 1px solid var(--soft-line);
  border-radius: 9px;
  background: var(--panel);
  box-shadow: 0 16px 34px color-mix(in srgb, var(--shadow) 72%, transparent), 5px 5px 0 var(--shadow);
}
.library-choice-menu[hidden] {
  display: none !important;
}
.library-choice-item {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-width: 0;
  min-height: 62px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px 11px;
  border: 1px solid var(--soft-line);
  border-radius: 7px;
  background: var(--panel-2);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: none;
  transition: border-color .13s ease, background .13s ease, transform .13s ease;
}
.library-choice-item:hover,
.library-choice-item:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 68%, var(--soft-line));
  background: color-mix(in srgb, var(--accent) 10%, var(--panel-2));
  outline: none;
  transform: translateY(-1px);
}
.library-choice-item > span:last-child {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.library-choice-item b {
  display: block;
  color: var(--ink);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.2;
}
.library-choice-item small {
  display: block;
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: normal;
  overflow-wrap: anywhere;
}
.library-choice-icon {
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--soft-line));
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
}
@media (max-width: 760px) {
  .library-choice-menu {
    width: min(300px, calc(100vw - 48px));
  }
}

/* R3D3 · live tool viewer UX hardening · 2026-09-20
   Keep the active event header visible, make result panes feel contained, and
   avoid the clipped/nested-scroll appearance without changing tool behavior. */
.r3-viewer-modal .viewer-body.is-tool-viewer .live-stream-section {
  min-height: 0 !important;
  overflow: hidden !important;
}

.r3-viewer-modal .viewer-body.is-tool-viewer .live-tool-stream {
  padding: 12px 12px 18px !important;
  scroll-padding-block: 12px 18px;
}

.r3-viewer-modal .live-tool-detail.is-open > .live-tool-toggle {
  position: sticky;
  top: 0;
  z-index: 4;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--soft-line) 82%, transparent) !important;
}

.r3-viewer-modal .live-tool-detail.is-open > .live-tool-content {
  min-height: 0;
}

.r3-viewer-modal .live-tool-content > .viewer-tool-code.is-scroll-region,
.r3-viewer-modal .live-tool-content > .viewer-rich-output.is-scroll-region,
.r3-viewer-modal .viewer-scratchpad-code > .viewer-tool-code.is-scroll-region {
  min-height: 0 !important;
  max-height: clamp(190px, 36dvh, 420px) !important;
}

/* JSON/tool payloads are inspection data, not source files. Wrap them so the
   modal avoids a second horizontal navigation axis while preserving line breaks. */
.r3-viewer-modal .viewer-tool-code.is-json-result,
.r3-viewer-modal .viewer-tool-code.is-json-result code {
  min-width: 0 !important;
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

.r3-viewer-modal .live-tool-content > .viewer-tool-code.is-json-result.is-scroll-region {
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

@media (max-width: 760px) {
  .r3-viewer-modal .viewer-body.is-tool-viewer .live-tool-stream {
    padding: 8px 8px 14px !important;
    scroll-padding-block: 8px 14px;
  }

  .r3-viewer-modal .live-tool-content > .viewer-tool-code.is-scroll-region,
  .r3-viewer-modal .live-tool-content > .viewer-rich-output.is-scroll-region,
  .r3-viewer-modal .viewer-scratchpad-code > .viewer-tool-code.is-scroll-region {
    max-height: min(40dvh, 360px) !important;
  }
}

/* R3D3 · tool activity viewer intrinsic sizing · 2026-09-21
   Tool snapshots should consume only the space their rows need, up to the
   viewport cap. Long histories still scroll inside the activity stream. */
body:has(> .app-shell:not(.chat-mode)) .r3-viewer-modal:not(.flow-library-dialog):has(.viewer-body.is-tool-viewer) {
  height: auto !important;
  max-height: calc(100dvh - 40px) !important;
}
body:has(> .app-shell:not(.chat-mode)) .r3-viewer-modal:not(.flow-library-dialog):has(.viewer-body.is-tool-viewer) .viewer-card {
  height: auto !important;
  max-height: calc(100dvh - 40px) !important;
}
body:has(> .app-shell:not(.chat-mode)) .r3-viewer-modal:not(.flow-library-dialog) .viewer-body.is-tool-viewer {
  flex: 0 1 auto;
  overflow: hidden !important;
}
body:has(> .app-shell:not(.chat-mode)) .r3-viewer-modal:not(.flow-library-dialog) .viewer-body.is-tool-viewer > .live-stream-section {
  flex: 0 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: min(66dvh, 680px);
}
body:has(> .app-shell:not(.chat-mode)) .r3-viewer-modal:not(.flow-library-dialog) .viewer-body.is-tool-viewer .live-tool-stream {
  height: auto !important;
  min-height: 0 !important;
  max-height: min(60dvh, 620px) !important;
  overflow-y: auto !important;
  align-content: flex-start !important;
}

@media (max-width: 760px) {
  body:has(> .app-shell:not(.chat-mode)) .r3-viewer-modal:not(.flow-library-dialog):has(.viewer-body.is-tool-viewer),
  body:has(> .app-shell:not(.chat-mode)) .r3-viewer-modal:not(.flow-library-dialog):has(.viewer-body.is-tool-viewer) .viewer-card {
    max-height: calc(100dvh - 18px) !important;
  }
  body:has(> .app-shell:not(.chat-mode)) .r3-viewer-modal:not(.flow-library-dialog) .viewer-body.is-tool-viewer > .live-stream-section {
    max-height: min(64dvh, 540px);
  }
  body:has(> .app-shell:not(.chat-mode)) .r3-viewer-modal:not(.flow-library-dialog) .viewer-body.is-tool-viewer .live-tool-stream {
    max-height: min(58dvh, 500px) !important;
  }
}


/* Retryable Agent V2 interruption — UI-only auto-resume prompt. */
.r3-auto-continue-card {
  width: min(520px, calc(100vw - 28px));
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--soft-line));
}
.r3-auto-continue-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.r3-auto-continue-head small {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.r3-auto-continue-head b {
  display: block;
  margin-top: 2px;
  font-size: 15px;
}
.r3-auto-continue-head > span {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  padding-top: 9px;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--soft-line));
  background: color-mix(in srgb, var(--panel) 84%, var(--accent) 16%);
}
.r3-auto-continue-head > span b {
  font-size: 16px;
  font-weight: 950;
}
.r3-auto-continue-head > span small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 850;
}
.r3-auto-continue-card > p {
  margin: 0;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.r3-auto-continue-note {
  padding: 9px 10px;
  border-left: 2px solid color-mix(in srgb, var(--accent) 65%, transparent);
  background: color-mix(in srgb, var(--panel) 92%, var(--accent) 8%);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}
.r3-auto-continue-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
@media (max-width: 620px) {
  .r3-auto-continue-card { width: calc(100vw - 18px); padding: 13px; }
  .r3-auto-continue-actions .ui-btn { flex: 1 1 150px; min-height: 42px; }
}

/* CanvasV2 transport heartbeat — transient UX only; never stored in run history. */
.agent-heartbeat-indicator {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 18px;
  border: 1px solid color-mix(in srgb, var(--accent) 44%, var(--soft-line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
  color: color-mix(in srgb, var(--accent) 86%, #fff 14%);
  box-shadow: 0 0 0 rgba(0,0,0,0);
  transition: opacity .16s ease, border-color .16s ease, color .16s ease, background .16s ease;
}
.agent-heartbeat-indicator.is-hidden { display: none !important; }
.agent-heartbeat-indicator svg { width: 12px; height: 12px; display: block; flex: 0 0 12px; }
.agent-heartbeat-bytes { display: none; white-space: nowrap; font-size: 10px; line-height: 1; font-weight: 750; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.agent-heartbeat-indicator.is-pending { opacity: .58; }
.agent-heartbeat-indicator.is-alive {
  opacity: 1;
  animation: r3TransportHeartbeat 1.8s ease-in-out infinite;
}
.agent-heartbeat-indicator.is-quiet {
  color: #e8b45e;
  border-color: rgba(232, 180, 94, .55);
  background: rgba(92, 62, 18, .28);
  animation: none;
}
@keyframes r3TransportHeartbeat {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); transform: scale(1); }
  45% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent); transform: scale(1.04); }
}
.r3-node .agent-heartbeat-indicator[data-heartbeat-scope="canvas"] {
  grid-area: timer !important;
  justify-self: end !important;
  align-self: center !important;
  margin-right: 1px;
  width: 17px;
  height: 17px;
  flex-basis: 17px;
}
.r3-chat-live-head-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
}
.r3-chat-live-head .agent-heartbeat-indicator,
.r3-chat-oracle-kicker .agent-heartbeat-indicator {
  display: inline-flex !important;
  width: auto !important;
  height: 20px !important;
  min-width: 18px !important;
  padding: 0 6px 0 4px !important;
  gap: 3px;
  overflow: visible !important;
  color: #8fb7ff;
}
.r3-chat-live-head .agent-heartbeat-indicator .agent-heartbeat-bytes,
.r3-chat-oracle-kicker .agent-heartbeat-indicator .agent-heartbeat-bytes {
  display: inline-block;
}
.r3-chat-live-head .agent-heartbeat-indicator svg,
.r3-chat-oracle-kicker .agent-heartbeat-indicator svg { width: 11px; height: 11px; flex-basis: 11px; }
.r3-chat-live-head .agent-heartbeat-indicator.is-hidden,
.r3-chat-oracle-kicker .agent-heartbeat-indicator.is-hidden { display: none !important; }
.r3-chat-oracle-kicker .agent-heartbeat-indicator { margin-left: auto; }
.r3-chat-oracle-kicker .agent-heartbeat-indicator.is-quiet,
.r3-chat-live-head .agent-heartbeat-indicator.is-quiet { color: #e8b45e; }


/* Live provider transport inspector. Restored after later stylesheet merges dropped the modal shell styles. */
.r3-transport-inspector-modal {
  width: min(920px, calc(100vw - 28px));
  max-width: 920px;
  max-height: min(820px, calc(100vh - 28px));
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--line) 78%, var(--accent) 22%);
  background: var(--panel);
  color: var(--ink);
  box-shadow: 14px 14px 0 color-mix(in srgb, var(--shadow) 88%, transparent);
  overflow: hidden;
}
.r3-transport-inspector-modal::backdrop {
  background: rgba(0,0,0,.68);
  backdrop-filter: blur(3px);
}
.r3-transport-inspector-card {
  display: grid;
  grid-template-rows: auto auto auto minmax(0,1fr);
  max-height: inherit;
  min-height: 0;
  background: var(--panel);
  overflow: auto;
  align-content: start;
}
.r3-transport-inspector-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--soft-line);
  background: color-mix(in srgb, var(--panel-2) 86%, var(--accent) 14%);
}
.r3-transport-inspector-head > div:first-child {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.r3-transport-inspector-head small {
  color: var(--accent);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.r3-transport-inspector-head strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}
.r3-transport-inspector-head-actions {
  display: inline-flex !important;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  flex: 0 0 auto;
}
.r3-transport-mode-btn {
  width: 30px;
  height: 30px;
  min-width: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--soft-line);
  border-radius: 6px;
  background: color-mix(in srgb, var(--panel) 88%, var(--accent) 12%);
  color: var(--muted);
  cursor: pointer;
  transition: border-color .14s ease, background .14s ease, color .14s ease, transform .14s ease;
}
.r3-transport-mode-btn:hover {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--soft-line));
  color: var(--ink);
  background: color-mix(in srgb, var(--panel) 78%, var(--accent) 22%);
}
.r3-transport-mode-btn:active { transform: translateY(1px); }
.r3-transport-mode-btn[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--accent) 62%, var(--soft-line));
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 13%, var(--panel));
}
.r3-transport-mode-btn svg { width: 15px; height: 15px; display: block; }
.r3-transport-inspector-metrics {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 7px;
  padding: 10px 12px 0;
}
.r3-transport-inspector-metrics > div {
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid var(--soft-line);
  background: var(--bg);
  display: grid;
  gap: 3px;
}
.r3-transport-inspector-metrics span {
  color: var(--muted);
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.r3-transport-inspector-metrics b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
  font: 800 12px/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.r3-transport-inspector-note {
  margin: 8px 12px 0;
  padding: 8px 9px;
  border-left: 2px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, var(--bg));
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}
.r3-transport-stream-panel {
  min-height: 0;
  margin: 9px 12px 12px;
  border: 1px solid var(--soft-line);
  background: var(--bg);
  display: grid;
  grid-template-rows: auto minmax(120px,1fr) auto;
  overflow: hidden;
}
.r3-transport-stream-panel + .r3-transport-stream-panel { margin-top: 0; }
.r3-transport-stream-panel[hidden] { display: none !important; }
.r3-transport-stream-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--soft-line);
  background: var(--panel-2);
}
.r3-transport-stream-panel > header b {
  color: var(--ink);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.r3-transport-stream-panel > header span {
  color: var(--accent);
  font: 800 10px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.r3-transport-stream-panel pre {
  margin: 0;
  padding: 10px 11px;
  min-height: 150px;
  max-height: 42vh;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  color: var(--ink);
  background: #0d0f12;
  font: 10px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  scrollbar-gutter: stable;
}
html[data-theme="light"] .r3-transport-stream-panel pre { background: #f7f3eb; }
.r3-transport-stream-panel > small {
  min-height: 27px;
  padding: 6px 10px 7px;
  border-top: 1px solid var(--soft-line);
  color: var(--muted);
  font-size: 9px;
  line-height: 1.4;
}
@media (max-width: 640px) {
  .r3-transport-inspector-modal {
    width: 100vw;
    max-width: 100vw;
    max-height: 100svh;
    height: 100svh;
    border: 0;
    box-shadow: none;
  }
  .r3-transport-inspector-card { height: 100svh; }
  .r3-transport-inspector-head { padding: calc(10px + env(safe-area-inset-top,0px)) 10px 9px; }
  .r3-transport-inspector-metrics { grid-template-columns: 1fr 1fr; padding: 8px 8px 0; }
  .r3-transport-inspector-note { margin: 7px 8px 0; }
  .r3-transport-stream-panel { margin: 8px; }
  .r3-transport-stream-panel pre { max-height: 38svh; font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .agent-heartbeat-indicator.is-alive { animation: none; }
}

/* Setup dashboard v3 — structured settings layout, 2026-09-24 */
.setup-dialog-v3 {
  width: min(1040px, calc(100vw - 36px));
  max-width: 1040px;
  max-height: calc(100vh - 28px);
  border-color: color-mix(in srgb, var(--line) 86%, var(--accent) 14%);
  background: var(--panel);
  box-shadow: 14px 14px 0 color-mix(in srgb, var(--shadow) 88%, transparent);
  overflow: hidden;
}
.setup-dialog-v3::backdrop {
  background: rgba(0, 0, 0, .64);
  backdrop-filter: blur(3px);
}
.setup-form-v3 {
  width: 100%;
  max-height: min(92vh, 900px);
  min-height: min(680px, calc(100vh - 52px));
  background: var(--panel);
}
.setup-head-v3 {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px 16px;
  background:
    linear-gradient(110deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 46%),
    var(--panel-2);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .025);
}
.setup-head-copy-v3 {
  min-width: 0;
}
.setup-kicker-v3 {
  display: block;
  margin-bottom: 5px;
  color: var(--accent);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.setup-head-v3 h2 {
  margin: 0 0 4px;
  font-size: 23px;
  line-height: 1.1;
}
.setup-head-v3 p {
  max-width: 620px;
  font-size: 12px;
  line-height: 1.45;
}
.setup-head-close-v3 {
  flex: 0 0 auto;
  margin-top: 2px;
}
.setup-dashboard-v3 {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: start;
  gap: 14px;
  padding: 14px;
  scrollbar-gutter: stable;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--panel-2) 34%, transparent), transparent 120px),
    var(--panel);
}
.setup-column-v3 {
  display: grid;
  gap: 14px;
  min-width: 0;
  align-content: start;
}
.setup-card-v3 {
  min-width: 0;
  gap: 12px;
  padding: 14px;
  border-color: color-mix(in srgb, var(--soft-line) 86%, var(--accent) 14%);
  background: color-mix(in srgb, var(--bg) 80%, var(--panel) 20%);
  box-shadow: 2px 2px 0 color-mix(in srgb, var(--shadow) 82%, transparent);
}
.setup-card-v3:hover {
  border-color: color-mix(in srgb, var(--line) 78%, var(--accent) 22%);
}
.setup-card-v3 > h3 {
  margin: 0;
}
.setup-card-head-v3 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--soft-line);
}
.setup-card-head-v3 > div {
  min-width: 0;
}
.setup-card-head-v3 h3 {
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .13em;
  line-height: 1.2;
  text-transform: uppercase;
}
.setup-card-head-v3 p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}
.setup-card-tag-v3 {
  flex: 0 0 auto;
  padding: 3px 7px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--soft-line));
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  color: color-mix(in srgb, var(--accent) 80%, var(--ink) 20%);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.setup-card-v3 label {
  min-width: 0;
  color: color-mix(in srgb, var(--ink) 90%, var(--muted) 10%);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .035em;
}
.setup-card-v3 input:not([type="checkbox"]):not([type="range"]),
.setup-card-v3 select {
  width: 100%;
  min-width: 0;
  margin-top: 6px;
}
.setup-card-v3 .field-help {
  display: block;
  margin-top: 5px;
  color: color-mix(in srgb, var(--muted) 92%, var(--ink) 8%);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.45;
}
.setup-subsection-v3 {
  display: grid;
  gap: 9px;
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--soft-line);
  background: color-mix(in srgb, var(--panel) 76%, var(--bg) 24%);
}
.setup-subsection-v3 h4 {
  margin: 0;
  color: var(--ink);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.setup-toggle-stack-v3 {
  display: grid;
  gap: 7px;
  min-width: 0;
}
.setup-dialog-v3 .setup-toggle-stack-v3 .compact-check,
.setup-dialog-v3 .setup-voice-toggles-v3 .compact-check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  min-width: 0;
  margin: 0;
  padding: 9px 10px;
  border: 1px solid var(--soft-line);
  background: color-mix(in srgb, var(--panel) 86%, var(--bg) 14%);
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.35;
}
.setup-dialog-v3 .setup-toggle-stack-v3 .compact-check:hover,
.setup-dialog-v3 .setup-voice-toggles-v3 .compact-check:hover {
  border-color: color-mix(in srgb, var(--accent) 38%, var(--soft-line));
  background: color-mix(in srgb, var(--accent) 5%, var(--panel));
}
.setup-dialog-v3 .compact-check input[type="checkbox"] {
  margin: 2px 0 0;
}
.setup-timeout-v3 {
  gap: 7px;
}
.setup-two-field-v3,
.setup-slider-grid-v3 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}
.setup-slider-grid-v3 > label {
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--soft-line);
  background: color-mix(in srgb, var(--panel) 80%, var(--bg) 20%);
}
.setup-range-head-v3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0;
}
.setup-range-head-v3 .field-help {
  margin: 0;
  color: var(--ink);
  font-size: 10px;
  font-weight: 800;
}
.setup-dialog-v3 .setup-slider-grid-v3 input[type="range"] {
  width: 100%;
  margin: 1px 0 0;
}
.setup-tts-openrouter-v3 {
  gap: 10px;
}
.setup-inline-action-v3 {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.setup-inline-action-v3 .field-help {
  margin: 0;
}
.setup-voice-toggles-v3 {
  padding-top: 2px;
}
.setup-action-grid-v3 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.setup-action-grid-v3 .ui-btn {
  width: 100%;
  min-height: 36px;
  justify-content: center;
}
.setup-validator-v3 {
  margin: 0;
  padding: 10px 11px;
  border: 1px solid var(--soft-line);
  background: color-mix(in srgb, var(--panel) 78%, var(--bg) 22%);
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.setup-onboarding-card-v3 {
  gap: 11px;
}
.setup-onboarding-action-v3 {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}
.setup-onboarding-action-v3 .field-help {
  margin: 0;
}
.setup-foot-v3 {
  position: relative;
  z-index: 3;
  display: flex !important;
  align-items: center;
  justify-content: space-between !important;
  gap: 14px;
  min-height: 58px;
  padding: 10px 14px !important;
  background: color-mix(in srgb, var(--panel-2) 94%, var(--bg) 6%) !important;
  box-shadow: 0 -1px 0 var(--line), 0 -8px 24px rgba(0, 0, 0, .08);
}
.setup-foot-hint-v3 {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}
.setup-foot-actions-v3 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.setup-foot-actions-v3 .ui-btn {
  min-width: 78px;
}
.setup-foot-actions-v3 .ui-btn.primary {
  min-width: 92px;
}

@media (max-width: 920px) {
  .setup-dialog-v3 {
    width: min(760px, calc(100vw - 24px));
  }
  .setup-dashboard-v3 {
    grid-template-columns: 1fr;
  }
  .setup-column-v3 {
    gap: 12px;
  }
}

@media (max-width: 620px) {
  .setup-dialog-v3 {
    width: calc(100vw - 12px);
    max-height: calc(100vh - 12px);
  }
  .setup-form-v3 {
    min-height: 0;
    max-height: calc(100vh - 12px);
  }
  .setup-head-v3 {
    padding: 14px 13px 12px;
  }
  .setup-head-v3 h2 {
    font-size: 20px;
  }
  .setup-head-v3 p {
    font-size: 11px;
  }
  .setup-head-close-v3 {
    padding-inline: 8px;
  }
  .setup-dashboard-v3 {
    gap: 10px;
    padding: 10px;
  }
  .setup-card-v3 {
    gap: 10px;
    padding: 11px;
  }
  .setup-two-field-v3,
  .setup-slider-grid-v3,
  .setup-action-grid-v3 {
    grid-template-columns: 1fr;
  }
  .setup-onboarding-action-v3 {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .setup-onboarding-action-v3 .ui-btn {
    width: 100%;
  }
  .setup-foot-v3 {
    min-height: 54px;
    padding: 9px 10px !important;
  }
  .setup-foot-hint-v3 {
    display: none;
  }
  .setup-foot-actions-v3 {
    width: 100%;
    justify-content: flex-end;
  }
}

/* Chat Ctrl+V media prepass — dedicated transient worker state. */
.r3-chat-media-worker {
  min-height: 154px;
  padding: 0;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--accent) 58%, var(--soft-line));
  background:
    radial-gradient(circle at 18% 38%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 44%),
    color-mix(in srgb, var(--bg) 86%, var(--panel));
}
.r3-chat-media-worker::before {
  display: none !important;
}
.r3-chat-media-worker-inner {
  position: relative;
  min-height: 152px;
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  padding: 22px 24px;
  box-sizing: border-box;
}
.r3-chat-media-worker-inner::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 28%, color-mix(in srgb, var(--accent) 5%, transparent) 50%, transparent 72%);
  transform: translateX(-100%);
  animation: r3ChatMediaWorkerSheen 2.4s ease-in-out infinite;
}
.r3-chat-media-worker-visual {
  position: relative;
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
}
.r3-chat-media-worker-ring {
  position: absolute;
  inset: 3px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--soft-line));
  border-top-color: var(--accent);
  border-right-color: color-mix(in srgb, var(--accent) 72%, white);
  border-radius: 50%;
  box-shadow: 0 0 22px color-mix(in srgb, var(--accent) 15%, transparent);
  animation: r3ChatMediaWorkerSpin 1.15s linear infinite;
}
.r3-chat-media-worker-core {
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 50%, var(--soft-line));
  background: color-mix(in srgb, var(--panel) 82%, var(--accent) 18%);
  box-shadow: 2px 2px 0 var(--shadow), 0 0 18px color-mix(in srgb, var(--accent) 12%, transparent);
}
.r3-chat-media-worker-core svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.r3-chat-media-worker-dot {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 75%, transparent);
  animation: r3ChatMediaWorkerDot 1.35s ease-in-out infinite;
}
.r3-chat-media-worker-dot.is-one { left: 2px; top: 34px; animation-delay: 0s; }
.r3-chat-media-worker-dot.is-two { right: 7px; top: 9px; animation-delay: .18s; }
.r3-chat-media-worker-dot.is-three { right: 2px; bottom: 12px; animation-delay: .36s; }
.r3-chat-media-worker-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
}
.r3-chat-media-worker-copy small {
  display: block;
  margin-bottom: 5px;
  color: var(--accent);
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.r3-chat-media-worker-copy b {
  display: block;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.2;
  letter-spacing: -.01em;
}
.r3-chat-media-worker-copy > span {
  display: block;
  max-width: 360px;
  margin-top: 6px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}
.r3-chat-media-worker-models {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
  min-width: 0;
}
.r3-chat-media-worker-model {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  max-width: 100%;
  padding: 5px 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--soft-line));
  background: color-mix(in srgb, var(--panel) 88%, var(--accent) 12%);
  box-shadow: inset 0 0 14px color-mix(in srgb, var(--accent) 7%, transparent);
}
.r3-chat-media-worker-model small {
  flex: 0 0 auto;
  color: var(--accent);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.r3-chat-media-worker-model b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
  font-size: 10px;
  font-weight: 750;
  line-height: 1.2;
}
.r3-chat-media-worker-model.is-pending {
  opacity: .68;
}

.r3-chat-media-worker-progress {
  width: min(310px, 100%);
  height: 4px;
  margin-top: 15px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--soft-line) 78%, transparent);
  background: color-mix(in srgb, var(--panel) 76%, transparent);
}
.r3-chat-media-worker-progress i {
  display: block;
  width: 38%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  animation: r3ChatMediaWorkerProgress 1.25s ease-in-out infinite;
}
@keyframes r3ChatMediaWorkerSpin {
  to { transform: rotate(360deg); }
}
@keyframes r3ChatMediaWorkerDot {
  0%, 100% { opacity: .28; transform: scale(.72); }
  50% { opacity: 1; transform: scale(1.12); }
}
@keyframes r3ChatMediaWorkerProgress {
  from { transform: translateX(-110%); }
  to { transform: translateX(285%); }
}
@keyframes r3ChatMediaWorkerSheen {
  0%, 20% { transform: translateX(-100%); }
  70%, 100% { transform: translateX(100%); }
}
@media (max-width: 720px) {
  .r3-chat-media-worker-inner {
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 13px;
    min-height: 132px;
    padding: 17px 15px;
  }
  .r3-chat-media-worker-visual { width: 58px; height: 58px; }
  .r3-chat-media-worker-core { width: 36px; height: 36px; }
  .r3-chat-media-worker-core svg { width: 20px; height: 20px; }
  .r3-chat-media-worker-copy b { font-size: 15px; }
  .r3-chat-media-worker-copy > span { font-size: 10.5px; }
  .r3-chat-media-worker-models { gap: 5px; margin-top: 9px; }
  .r3-chat-media-worker-model { width: 100%; padding: 5px 7px; }
  .r3-chat-media-worker-model b { font-size: 9.5px; }
  .r3-chat-media-worker-progress { margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .r3-chat-media-worker-ring,
  .r3-chat-media-worker-dot,
  .r3-chat-media-worker-progress i,
  .r3-chat-media-worker-inner::after {
    animation: none !important;
  }
}

/* Allow the Chat media worker to animate during the short pre-run setup window. */
.app-shell.chat-mode .r3-chat-media-worker .r3-chat-media-worker-ring {
  animation: r3ChatMediaWorkerSpin 1.15s linear infinite !important;
}
.app-shell.chat-mode .r3-chat-media-worker .r3-chat-media-worker-dot {
  animation: r3ChatMediaWorkerDot 1.35s ease-in-out infinite !important;
}
.app-shell.chat-mode .r3-chat-media-worker .r3-chat-media-worker-progress i {
  animation: r3ChatMediaWorkerProgress 1.25s ease-in-out infinite !important;
}
.app-shell.chat-mode .r3-chat-media-worker .r3-chat-media-worker-inner::after {
  animation: r3ChatMediaWorkerSheen 2.4s ease-in-out infinite !important;
}
@media (prefers-reduced-motion: reduce) {
  .app-shell.chat-mode .r3-chat-media-worker .r3-chat-media-worker-ring,
  .app-shell.chat-mode .r3-chat-media-worker .r3-chat-media-worker-dot,
  .app-shell.chat-mode .r3-chat-media-worker .r3-chat-media-worker-progress i,
  .app-shell.chat-mode .r3-chat-media-worker .r3-chat-media-worker-inner::after {
    animation: none !important;
  }
}


/* Three-theme selector: Light / Dark / Night */
.theme-picker {
  cursor: default;
  gap: 7px;
  padding-right: 6px !important;
}
.theme-picker:hover { transform: none !important; }
.theme-picker-select {
  width: auto !important;
  min-width: 70px;
  max-width: 92px;
  min-height: 24px;
  margin-left: auto;
  padding: 2px 20px 2px 5px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--ink) !important;
  box-shadow: none !important;
  outline: none;
  cursor: pointer;
  font-size: 11px;
  font-weight: 850;
  line-height: 1.2;
}
.theme-picker-select:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}
.theme-picker-select option {
  background: var(--panel);
  color: var(--ink);
}
html[data-theme="night"] body {
  background: var(--bg);
}
html[data-theme="night"] .topbar,
html[data-theme="night"] .panel,
html[data-theme="night"] .r3-chat-sidebar,
html[data-theme="night"] .r3-chat-composer {
  background-color: var(--panel);
}
html[data-theme="night"] .canvas-wrap,
html[data-theme="night"] .r3-chat-main {
  --night-grid-line: color-mix(in srgb, var(--soft-line) 52%, transparent);
}
html[data-theme="night"] .canvas-wrap {
  background:
    linear-gradient(var(--night-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--night-grid-line) 1px, transparent 1px),
    radial-gradient(circle at 72% 18%, color-mix(in srgb, var(--accent) 5%, transparent), transparent 38%),
    var(--canvas) !important;
  background-size: 42px 42px, 42px 42px, auto, auto !important;
}
html[data-theme="night"] .r3-chat-main {
  background:
    radial-gradient(circle at 78% 12%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 36%),
    linear-gradient(135deg, var(--canvas), var(--bg)) !important;
}
@media (max-width: 720px) {
  .topbar-more-panel .theme-picker { grid-column: 1 / -1; }
  .theme-picker-select { max-width: none; min-width: 92px; }
}

/* Community production polish — stable workspace, reduced layout shift, smoother feedback — 2026-09-25 */
@media (min-width: 861px) {
  html.r3-community-page-mode,
  html.r3-community-page-mode body,
  body.r3-community-page-mode {
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden !important;
  }

  .community-page.community-page-pass46 {
    position: fixed;
    inset: 0;
    z-index: 1200;
    width: 100vw;
    height: 100dvh;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    background: var(--bg);
  }

  .community-page.community-page-pass46 .community-shell-page {
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    grid-template-rows: 94px 54px 44px minmax(0, 1fr);
    overflow: hidden;
  }

  .community-page.community-page-pass46 .community-hero-v5 {
    height: 94px;
    min-height: 94px;
    padding: 12px 18px;
    grid-template-columns: minmax(360px, 1fr) minmax(255px, 360px) auto;
    gap: 14px;
    align-items: center;
    overflow: hidden;
  }

  .community-page.community-page-pass46 .community-hero-copy {
    align-self: center;
  }

  .community-page.community-page-pass46 .community-hero-copy h2 {
    margin: 1px 0 3px;
    font-size: clamp(34px, 2.85vw, 48px);
    line-height: .94;
    letter-spacing: -.052em;
  }

  .community-page.community-page-pass46 .community-hero-copy p {
    max-width: 720px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
  }

  .community-page.community-page-pass46 .community-hero-stats {
    height: 50px;
    align-self: center;
  }

  .community-page.community-page-pass46 .community-hero-stats span {
    height: 50px;
    min-height: 50px;
    padding: 7px 10px;
    align-content: center;
    background: color-mix(in srgb, var(--panel) 94%, var(--bg));
    border-color: color-mix(in srgb, var(--soft-line) 90%, transparent);
    box-shadow: none;
  }

  .community-page.community-page-pass46 .community-hero-actions {
    align-self: center;
  }

  .community-page.community-page-pass46 .community-hero-actions .ui-btn {
    min-height: 36px;
    box-shadow: none;
  }

  .community-page.community-page-pass46 .community-toolbar-v5 {
    height: 54px;
    min-height: 54px;
    padding: 7px 18px;
    gap: 9px;
    align-items: end;
    overflow: hidden;
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--panel) 90%, var(--bg));
  }

  .community-page.community-page-pass46 .community-toolbar-v5 input,
  .community-page.community-page-pass46 .community-toolbar-v5 select,
  .community-page.community-page-pass46 .community-toolbar-v5 .ui-btn {
    height: 34px;
    min-height: 34px;
  }

  .community-page.community-page-pass46 .community-category-rail-v5 {
    height: 44px;
    min-height: 44px;
    padding: 6px 18px;
    gap: 6px;
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg) 78%, var(--panel) 22%);
  }

  .community-page.community-page-pass46 .community-category-chip {
    height: 31px;
    min-height: 31px;
    box-shadow: none;
    transition:
      color .16s ease,
      border-color .16s ease,
      background-color .16s ease,
      box-shadow .16s ease;
  }

  .community-page.community-page-pass46 .community-category-chip:hover,
  .community-page.community-page-pass46 .community-category-chip.is-active {
    box-shadow: inset 0 -2px 0 var(--accent);
  }

  .community-page.community-page-pass46 .community-layout-v5 {
    height: 100%;
    min-height: 0;
    grid-template-columns: minmax(300px, 350px) minmax(0, 1fr) minmax(228px, 272px);
    overflow: hidden;
  }

  .community-page.community-page-pass46 .community-list-pane-v5,
  .community-page.community-page-pass46 .community-detail-pane-v5,
  .community-page.community-page-pass46 .community-info-pane {
    height: 100% !important;
    min-height: 0;
    max-height: none !important;
    overscroll-behavior: contain;
  }

  .community-page.community-page-pass46 .community-list-pane-v5 {
    padding: 12px;
    gap: 10px;
    border-right: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg) 88%, var(--panel) 12%);
  }

  .community-page.community-page-pass46 .community-detail-pane-v5 {
    position: relative;
    padding: 14px;
    overflow: auto;
    background:
      linear-gradient(color-mix(in srgb, var(--soft-line) 55%, transparent) 1px, transparent 1px),
      linear-gradient(90deg, color-mix(in srgb, var(--soft-line) 55%, transparent) 1px, transparent 1px),
      color-mix(in srgb, var(--canvas, var(--bg)) 84%, var(--panel) 16%);
    background-size: 32px 32px;
  }

  .community-page.community-page-pass46 .community-info-pane {
    padding: 12px;
    overflow: auto;
    border-left: 1px solid var(--line);
    background: color-mix(in srgb, var(--panel) 92%, var(--bg));
  }
}

.community-page.community-page-pass46 .community-list-head-v4 {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
}

.community-page.community-page-pass46 .community-status-card,
.community-page.community-page-pass46 .community-count-pill {
  min-height: 42px;
  border-color: color-mix(in srgb, var(--soft-line) 88%, transparent);
  background: color-mix(in srgb, var(--panel) 94%, var(--bg));
  box-shadow: none;
}

.community-page.community-page-pass46 .community-status-card {
  overflow: hidden;
}

.community-page.community-page-pass46 .community-status-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.community-page.community-page-pass46 .community-post-list {
  position: relative;
  min-height: 0;
  padding: 1px 4px 10px 1px;
  scrollbar-gutter: stable;
  transition: opacity .16s ease, filter .16s ease;
}

.community-page.community-page-pass46 .community-post-list.is-community-loading {
  opacity: .72;
  filter: saturate(.82);
  pointer-events: none;
}

.community-page.community-page-pass46 .community-post-list.is-community-loading::after {
  content: 'Refreshing…';
  position: absolute;
  left: 50%;
  bottom: 8px;
  z-index: 8;
  display: block;
  width: max-content;
  margin: 0;
  transform: translateX(-50%);
  padding: 5px 9px;
  border: 1px solid color-mix(in srgb, var(--accent) 48%, var(--soft-line));
  background: color-mix(in srgb, var(--panel) 94%, var(--bg));
  color: var(--accent);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--shadow) 42%, transparent);
  animation: communityLoadingPulse 1.1s ease-in-out infinite;
}

.community-page.community-page-pass46 .community-post-card-v2 {
  height: 126px;
  min-height: 126px;
  max-height: 126px;
  padding: 11px 12px;
  gap: 5px;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--soft-line) 86%, transparent);
  background: color-mix(in srgb, var(--panel) 95%, var(--bg));
  box-shadow: none;
  transition:
    border-color .16s ease,
    background-color .16s ease,
    box-shadow .16s ease,
    opacity .16s ease;
  animation: communityCardIn .2s ease-out both;
}

.community-page.community-page-pass46 .community-post-card-v2:hover {
  border-color: color-mix(in srgb, var(--accent) 52%, var(--soft-line));
  background: color-mix(in srgb, var(--panel) 90%, var(--accent) 10%);
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent) 62%, transparent);
}

.community-page.community-page-pass46 .community-post-card-v2.is-active {
  border-color: color-mix(in srgb, var(--accent) 68%, var(--soft-line));
  background: color-mix(in srgb, var(--panel) 86%, var(--accent) 14%);
  box-shadow: inset 3px 0 0 var(--accent);
}

.community-page.community-page-pass46 .community-post-card-v2::before {
  display: none;
}

.community-page.community-page-pass46 .community-post-card-meta {
  min-height: 20px;
}

.community-page.community-page-pass46 .community-post-title {
  min-height: 18px;
  max-height: 37px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 15px;
  line-height: 1.18;
}

.community-page.community-page-pass46 .community-post-card-v2 .community-post-excerpt {
  min-height: 31px;
  max-height: 31px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 11.5px;
  line-height: 1.34;
}

.community-page.community-page-pass46 .community-post-foot {
  min-height: 19px;
}

.community-page.community-page-pass46 .community-card-flow-row {
  min-height: 18px;
  overflow: hidden;
}

.community-page.community-page-pass46 .community-detail-card-v2 {
  width: min(100%, 1120px);
  min-height: 100%;
  margin: 0 auto;
  padding: 16px;
  gap: 14px;
  border-color: color-mix(in srgb, var(--soft-line) 88%, transparent);
  background: color-mix(in srgb, var(--panel) 97%, var(--bg));
  box-shadow: 0 14px 36px color-mix(in srgb, var(--shadow) 24%, transparent);
  animation: communityDetailIn .22s ease-out both;
}

.community-page.community-page-pass46 .community-detail-head-v2 {
  min-height: 92px;
  padding: 14px 14px 13px;
  border-bottom: 1px solid var(--soft-line);
  background: color-mix(in srgb, var(--panel-2) 70%, transparent);
}

.community-page.community-page-pass46 .community-detail-head-v2 h3 {
  font-size: clamp(28px, 2.7vw, 46px);
  line-height: .98;
  letter-spacing: -.045em;
}

.community-page.community-page-pass46 .community-body-card {
  margin: 0;
  min-height: 78px;
  padding: 13px 14px;
  background: color-mix(in srgb, var(--bg) 78%, var(--panel) 22%);
}

.community-page.community-page-pass46 .community-comments-v2 {
  min-height: 130px;
}

.community-page.community-page-pass46 .community-comment-v2 {
  min-height: 76px;
  padding: 11px 12px;
  border-color: color-mix(in srgb, var(--soft-line) 84%, transparent);
  background: color-mix(in srgb, var(--panel) 93%, var(--bg));
}

.community-page.community-page-pass46 .community-comment-v2.is-reply {
  background: color-mix(in srgb, var(--panel) 86%, var(--bg));
}

.community-page.community-page-pass46 .community-reply-box-v2:not(.is-locked) {
  bottom: 0;
  margin-top: 2px;
  border-color: color-mix(in srgb, var(--accent) 34%, var(--soft-line));
  background: color-mix(in srgb, var(--panel) 96%, var(--bg));
  box-shadow: 0 -12px 28px color-mix(in srgb, var(--bg) 48%, transparent);
}

.community-page.community-page-pass46 .community-guide-card {
  padding: 13px;
  border: 1px solid color-mix(in srgb, var(--soft-line) 84%, transparent);
  background: color-mix(in srgb, var(--panel) 96%, var(--bg));
  box-shadow: none;
}

.community-page.community-page-pass46 .community-guide-card + .community-guide-card {
  margin-top: 1px;
}

.community-page.community-page-pass46 .community-detail-pane-v5.is-community-detail-loading::after {
  content: 'Loading discussion';
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 12;
  margin: 0;
  padding: 6px 9px 6px 25px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--soft-line));
  background: color-mix(in srgb, var(--panel) 96%, var(--bg));
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--shadow) 32%, transparent);
  pointer-events: none;
}

.community-page.community-page-pass46 .community-detail-pane-v5.is-community-detail-loading::before {
  content: '';
  position: absolute;
  top: 19px;
  right: 124px;
  z-index: 13;
  width: 8px;
  height: 8px;
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-top-color: var(--accent);
  border-radius: 999px;
  animation: communitySpinner .75s linear infinite;
  pointer-events: none;
}

.community-page.community-page-pass46 .community-loading-state {
  min-height: 112px;
  display: grid;
  place-items: center;
  align-content: center;
}

.community-page.community-page-pass46 .community-composer-panel {
  max-height: min(390px, 44vh);
  overflow: auto;
  scrollbar-gutter: stable;
  animation: communityComposerPolishIn .18s ease-out both;
}

.community-page.community-page-pass46 input,
.community-page.community-page-pass46 select,
.community-page.community-page-pass46 textarea,
.community-page.community-page-pass46 .ui-btn {
  transition:
    border-color .15s ease,
    background-color .15s ease,
    color .15s ease,
    box-shadow .15s ease,
    opacity .15s ease;
}

.community-page.community-page-pass46 input:focus,
.community-page.community-page-pass46 select:focus,
.community-page.community-page-pass46 textarea:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 72%, var(--line));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 14%, transparent);
}

.community-page.community-page-pass46 .ui-btn:hover:not(:disabled) {
  transform: none;
}

.community-page.community-page-pass46 .community-list-pane-v5::-webkit-scrollbar,
.community-page.community-page-pass46 .community-detail-pane-v5::-webkit-scrollbar,
.community-page.community-page-pass46 .community-info-pane::-webkit-scrollbar,
.community-page.community-page-pass46 .community-post-list::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

.community-page.community-page-pass46 .community-detail-pane-v5::-webkit-scrollbar-thumb,
.community-page.community-page-pass46 .community-info-pane::-webkit-scrollbar-thumb,
.community-page.community-page-pass46 .community-post-list::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--muted) 34%, transparent);
  border: 2px solid transparent;
  background-clip: padding-box;
}

@keyframes communityCardIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes communityDetailIn {
  from { opacity: .55; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes communityComposerPolishIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes communityLoadingPulse {
  0%, 100% { opacity: .68; }
  50% { opacity: 1; }
}

@keyframes communitySpinner {
  to { transform: rotate(360deg); }
}

@media (min-width: 861px) and (max-width: 1280px) {
  .community-page.community-page-pass46 .community-shell-page {
    grid-template-rows: 104px 54px auto minmax(0, 1fr);
  }
  .community-page.community-page-pass46 .community-hero-v5 {
    height: 104px;
    min-height: 104px;
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .community-page.community-page-pass46 .community-hero-stats {
    display: none;
  }
  .community-page.community-page-pass46 .community-layout-v5 {
    grid-template-columns: minmax(290px, 340px) minmax(0, 1fr);
  }
  .community-page.community-page-pass46 .community-info-pane {
    display: none;
  }
}

@media (min-width: 861px) and (max-width: 1080px) {
  .community-page.community-page-pass46 .community-shell-page {
    grid-template-rows: 104px 88px auto minmax(0, 1fr);
  }
  .community-page.community-page-pass46 .community-toolbar-v5 {
    height: 88px;
    min-height: 88px;
  }
  .community-page.community-page-pass46 .community-category-rail-v5 {
    height: auto;
    min-height: 44px;
  }
}

@media (max-width: 860px) {
  .community-page.community-page-pass46 {
    padding: 0;
    background: var(--bg);
  }
  .community-page.community-page-pass46 .community-shell-page {
    border: 0;
    box-shadow: none;
  }
  .community-page.community-page-pass46 .community-post-card-v2 {
    height: auto;
    min-height: 108px;
    max-height: none;
  }
  .community-page.community-page-pass46 .community-card-flow-row {
    display: flex;
  }
  .community-page.community-page-pass46 .community-detail-card-v2 {
    width: 100%;
    min-height: 62vh;
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .community-page.community-page-pass46 *,
  .community-page.community-page-pass46 *::before,
  .community-page.community-page-pass46 *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* Community viewport fill correction — 2026-09-26
   Use flex sizing for the page shell so legacy pane height calculations cannot
   leave a dead band below the discussion workspace. */
@media (min-width: 861px) {
  .community-page.community-page-pass46 .community-shell-page {
    display: flex !important;
    flex-direction: column;
    width: 100%;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden;
  }

  .community-page.community-page-pass46 .community-hero-v5,
  .community-page.community-page-pass46 .community-toolbar-v5,
  .community-page.community-page-pass46 .community-category-rail-v5 {
    flex: 0 0 auto;
    width: 100%;
  }

  .community-page.community-page-pass46 .community-layout-v5 {
    flex: 1 1 0;
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden;
  }

  .community-page.community-page-pass46 .community-list-pane-v5,
  .community-page.community-page-pass46 .community-detail-pane-v5,
  .community-page.community-page-pass46 .community-info-pane {
    align-self: stretch;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
  }
}

/* Community page root viewport correction — 2026-09-26
   The full-page community surface intentionally reuses modal pass classes for
   shared styling. community-dialog-pass72 caps max-height at 980px, which is
   correct for dialogs but leaves a dead band below the full-page forum on tall
   screens. Neutralize modal geometry only when that element is the page root. */
@media (min-width: 861px) {
  .community-page.community-page-pass46.community-dialog-pass72.is-community-page {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .community-page.community-page-pass46.community-dialog-pass72.is-community-page > .community-shell-page {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
  }
}

/* Community simplified discussion workspace — Reddit-inspired hierarchy, R3D3 theme — 2026-09-26 */
@media (min-width: 861px) {
  .community-page.community-page-pass46 .community-shell-page {
    background: var(--bg);
  }

  .community-page.community-page-pass46 .community-hero-v5 {
    height: 96px;
    min-height: 96px;
    padding: 14px 18px 12px;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "copy actions"
      "stats actions";
    column-gap: 18px;
    row-gap: 6px;
    align-items: center;
    border-bottom: 1px solid color-mix(in srgb, var(--soft-line) 72%, transparent);
    background: color-mix(in srgb, var(--panel) 86%, var(--bg));
  }

  .community-page.community-page-pass46 .community-hero-copy {
    grid-area: copy;
    min-width: 0;
  }

  .community-page.community-page-pass46 .community-hero-copy h2 {
    margin: 0;
    font-size: clamp(29px, 2.25vw, 38px);
    line-height: 1;
    letter-spacing: -.042em;
  }

  .community-page.community-page-pass46 .community-hero-copy p {
    margin: 4px 0 0;
    max-width: 720px;
    color: var(--muted);
    font-size: 11.5px;
    line-height: 1.35;
  }

  .community-page.community-page-pass46 .community-hero-stats {
    grid-area: stats;
    display: flex;
    width: auto;
    height: auto;
    min-height: 0;
    gap: 16px;
    justify-self: start;
    align-items: center;
  }

  .community-page.community-page-pass46 .community-hero-stats span {
    display: inline-flex;
    width: auto;
    height: auto;
    min-height: 0;
    padding: 0;
    gap: 5px;
    align-items: baseline;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .community-page.community-page-pass46 .community-hero-stats b {
    color: var(--accent);
    font-size: 11px;
    line-height: 1;
  }

  .community-page.community-page-pass46 .community-hero-stats small {
    color: var(--muted);
    font-size: 9px;
    font-weight: 650;
    letter-spacing: .02em;
    text-transform: none;
  }

  .community-page.community-page-pass46 .community-hero-actions {
    grid-area: actions;
    display: flex;
    gap: 7px;
    align-self: center;
  }

  .community-page.community-page-pass46 .community-hero-actions .ui-btn {
    min-height: 34px;
    padding-inline: 11px;
  }

  .community-page.community-page-pass46 .community-toolbar-v5 {
    height: 52px;
    min-height: 52px;
    padding: 7px 14px;
    grid-template-columns: minmax(280px, 1fr) minmax(150px, 190px) minmax(150px, 210px) auto;
    gap: 8px;
    align-items: end;
    background: color-mix(in srgb, var(--bg) 88%, var(--panel) 12%);
    border-bottom-color: color-mix(in srgb, var(--soft-line) 74%, transparent);
  }

  .community-page.community-page-pass46 .community-toolbar-v5 label > span {
    margin-bottom: 3px;
    color: var(--muted);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: none;
  }

  .community-page.community-page-pass46 .community-toolbar-v5 input,
  .community-page.community-page-pass46 .community-toolbar-v5 select,
  .community-page.community-page-pass46 .community-toolbar-v5 .ui-btn {
    height: 31px;
    min-height: 31px;
  }

  .community-page.community-page-pass46 .community-category-rail-v5 {
    height: 39px;
    min-height: 39px;
    padding: 5px 14px 4px;
    gap: 2px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    background: var(--bg);
    border-bottom-color: color-mix(in srgb, var(--soft-line) 68%, transparent);
  }

  .community-page.community-page-pass46 .community-category-rail-v5::-webkit-scrollbar {
    display: none;
  }

  .community-page.community-page-pass46 .community-category-chip {
    flex: 0 0 auto;
    height: 29px;
    min-height: 29px;
    padding: 0 12px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--muted);
    box-shadow: none !important;
    font-size: 9px;
    font-weight: 750;
    letter-spacing: .02em;
    text-transform: none;
  }

  .community-page.community-page-pass46 .community-category-chip:hover {
    color: var(--ink);
    background: color-mix(in srgb, var(--panel) 58%, transparent);
    border-bottom-color: color-mix(in srgb, var(--accent) 36%, transparent);
  }

  .community-page.community-page-pass46 .community-category-chip.is-active {
    color: var(--accent);
    background: transparent;
    border-bottom-color: var(--accent);
  }

  .community-page.community-page-pass46 .community-layout-v5 {
    position: relative;
    grid-template-columns: 310px minmax(0, 1fr) !important;
    background: var(--bg);
  }

  .community-page.community-page-pass46 .community-list-pane-v5 {
    padding: 0;
    gap: 0;
    border-right: 1px solid color-mix(in srgb, var(--soft-line) 72%, transparent);
    background: color-mix(in srgb, var(--panel) 54%, var(--bg));
  }

  .community-page.community-page-pass46 .community-list-head-v4 {
    min-height: 48px;
    padding: 8px 10px;
    gap: 8px;
    align-items: center;
    border-bottom: 1px solid color-mix(in srgb, var(--soft-line) 65%, transparent);
  }

  .community-page.community-page-pass46 .community-status-card,
  .community-page.community-page-pass46 .community-count-pill {
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .community-page.community-page-pass46 .community-status-card {
    display: flex;
    align-items: center;
    gap: 7px;
  }

  .community-page.community-page-pass46 .community-status-copy b {
    font-size: 10px;
  }

  .community-page.community-page-pass46 .community-status-copy small {
    max-width: 188px;
    font-size: 9px;
  }

  .community-page.community-page-pass46 .community-count-pill {
    white-space: nowrap;
    color: var(--muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
  }

  .community-page.community-page-pass46 .community-post-list {
    padding: 0;
    overflow-y: auto;
    background: transparent;
  }

  .community-page.community-page-pass46 .community-post-card-v2 {
    position: relative;
    height: 108px;
    min-height: 108px;
    max-height: 108px;
    margin: 0;
    padding: 11px 13px 10px;
    gap: 4px;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--soft-line) 62%, transparent);
    border-radius: 0;
    background: transparent;
    box-shadow: none !important;
    text-align: left;
    transition: background-color .16s ease, color .16s ease;
  }

  .community-page.community-page-pass46 .community-post-card-v2:hover {
    border-color: color-mix(in srgb, var(--soft-line) 62%, transparent);
    background: color-mix(in srgb, var(--panel) 74%, var(--accent) 3%);
    box-shadow: none !important;
  }

  .community-page.community-page-pass46 .community-post-card-v2.is-active {
    border-color: color-mix(in srgb, var(--soft-line) 62%, transparent);
    background: color-mix(in srgb, var(--accent) 8%, var(--panel));
    box-shadow: inset 3px 0 0 var(--accent) !important;
  }

  .community-page.community-page-pass46 .community-post-card-meta {
    min-height: 16px;
  }

  .community-page.community-page-pass46 .community-post-title {
    min-height: 17px;
    max-height: 34px;
    font-size: 14px;
    line-height: 1.18;
  }

  .community-page.community-page-pass46 .community-post-card-v2 .community-post-excerpt {
    min-height: 27px;
    max-height: 27px;
    color: var(--muted);
    font-size: 10.5px;
    line-height: 1.3;
  }

  .community-page.community-page-pass46 .community-post-foot {
    min-height: 16px;
    margin-top: auto;
    color: var(--muted);
    font-size: 9px;
  }

  .community-page.community-page-pass46 .community-card-flow-row {
    display: none;
  }

  .community-page.community-page-pass46 .community-like-pill {
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .community-page.community-page-pass46 .community-card-badges em,
  .community-page.community-page-pass46 .community-special-badge {
    border-color: color-mix(in srgb, var(--soft-line) 64%, transparent);
    background: color-mix(in srgb, var(--panel) 76%, transparent);
    font-size: 8px;
    letter-spacing: .04em;
  }

  .community-page.community-page-pass46 .community-detail-pane-v5 {
    padding: 0 18px 34px;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--bg) !important;
    background-image: none !important;
  }

  .community-page.community-page-pass46 .community-detail-pane-v5 > [data-community-detail] {
    width: min(100%, 900px);
    min-height: 100%;
    margin: 0 auto;
  }

  .community-page.community-page-pass46 .community-detail-card-v2 {
    width: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0 0 84px;
    gap: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none !important;
  }

  .community-page.community-page-pass46 .community-detail-head-v2 {
    min-height: 0;
    padding: 22px 4px 17px;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--soft-line) 72%, transparent);
    background: transparent;
  }

  .community-page.community-page-pass46 .community-detail-head-v2 h3 {
    margin-top: 7px;
    font-size: clamp(26px, 2.15vw, 36px);
    line-height: 1.08;
    letter-spacing: -.035em;
  }

  .community-page.community-page-pass46 .community-detail-meta small {
    color: var(--muted);
    font-size: 9.5px;
  }

  .community-page.community-page-pass46 .community-detail-actions .ui-btn {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
  }

  .community-page.community-page-pass46 .community-attached-flow-v2 {
    margin: 12px 4px 0;
    padding: 8px 10px;
    border-color: color-mix(in srgb, var(--soft-line) 65%, transparent);
    background: color-mix(in srgb, var(--panel) 55%, transparent);
    box-shadow: none;
  }

  .community-page.community-page-pass46 .community-body-card {
    min-height: 0;
    margin: 0;
    padding: 18px 4px 20px;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--soft-line) 72%, transparent);
    background: transparent;
    box-shadow: none;
  }

  .community-page.community-page-pass46 .community-detail-body {
    max-width: 760px;
    color: var(--ink);
    font-size: 13.5px;
    line-height: 1.62;
  }

  .community-page.community-page-pass46 .community-comments-v2 {
    min-height: 120px;
    padding: 0 4px;
  }

  .community-page.community-page-pass46 .community-section-title {
    min-height: 46px;
    margin: 0;
    padding: 15px 0 10px;
    border: 0;
    background: transparent;
  }

  .community-page.community-page-pass46 .community-section-title b {
    font-size: 12px;
    letter-spacing: 0;
    text-transform: none;
  }

  .community-page.community-page-pass46 .community-section-title span {
    color: var(--muted);
    font-size: 10px;
  }

  .community-page.community-page-pass46 .community-comment-v2 {
    min-height: 0;
    margin: 0;
    padding: 14px 4px 15px;
    border: 0;
    border-top: 1px solid color-mix(in srgb, var(--soft-line) 62%, transparent);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    animation: communityCommentIn .18s ease-out both;
  }

  .community-page.community-page-pass46 .community-comment-v2:first-of-type {
    border-top-color: color-mix(in srgb, var(--soft-line) 72%, transparent);
  }

  .community-page.community-page-pass46 .community-comment-v2 header {
    min-height: 24px;
    align-items: center;
  }

  .community-page.community-page-pass46 .community-comment-v2 header b {
    font-size: 10.5px;
  }

  .community-page.community-page-pass46 .community-comment-v2 header small {
    color: var(--muted);
    font-size: 9px;
  }

  .community-page.community-page-pass46 .community-comment-v2 > p {
    margin: 7px 0 3px;
    color: var(--ink);
    font-size: 12px;
    line-height: 1.55;
  }

  .community-page.community-page-pass46 .community-comment-v2 header > .ui-btn,
  .community-page.community-page-pass46 .community-comment-v2.is-reply header > .ui-btn {
    min-height: 24px;
    padding: 2px 6px;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    color: var(--muted);
  }

  .community-page.community-page-pass46 .community-replies-v2 {
    margin: 10px 0 0 12px;
    padding-left: 14px;
    border-left: 2px solid color-mix(in srgb, var(--accent) 24%, var(--soft-line));
  }

  .community-page.community-page-pass46 .community-comment-v2.is-reply {
    padding: 11px 2px 11px 8px;
    border-top-color: color-mix(in srgb, var(--soft-line) 48%, transparent);
    background: transparent;
  }

  .community-page.community-page-pass46 .community-inline-reply-disclosure {
    display: block;
    margin: 6px 0 0;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .community-page.community-page-pass46 .community-inline-reply-disclosure > summary {
    width: max-content;
    padding: 3px 0;
    color: var(--muted);
    cursor: pointer;
    font-size: 9.5px;
    font-weight: 750;
    list-style: none;
    user-select: none;
    transition: color .15s ease;
  }

  .community-page.community-page-pass46 .community-inline-reply-disclosure > summary::-webkit-details-marker {
    display: none;
  }

  .community-page.community-page-pass46 .community-inline-reply-disclosure > summary::before {
    content: '↳';
    margin-right: 5px;
    color: var(--accent);
  }

  .community-page.community-page-pass46 .community-inline-reply-disclosure > summary:hover,
  .community-page.community-page-pass46 .community-inline-reply-disclosure[open] > summary {
    color: var(--accent);
  }

  .community-page.community-page-pass46 .community-inline-reply-compose {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px;
    margin-top: 7px;
    animation: communityInlineReplyIn .16s ease-out both;
  }

  .community-page.community-page-pass46 .community-inline-reply-compose textarea {
    min-height: 66px;
    max-height: 120px;
    resize: vertical;
  }

  .community-page.community-page-pass46 .community-inline-reply-compose .form-message {
    grid-column: 1 / -1;
    margin: 0;
  }

  .community-page.community-page-pass46 .community-mod-actions-v4 {
    margin: 6px 0 0;
    border: 0;
    background: transparent;
  }

  .community-page.community-page-pass46 .community-mod-actions-v4 > summary {
    min-height: 0;
    padding: 2px 0;
    border: 0;
    color: var(--muted);
    background: transparent;
    font-size: 8.5px;
    text-transform: none;
  }

  .community-page.community-page-pass46 .community-mod-label {
    letter-spacing: .02em;
    text-transform: none;
  }

  .community-page.community-page-pass46 .community-mod-buttons {
    padding: 7px 0 2px;
    gap: 6px;
  }

  .community-page.community-page-pass46 .community-reply-box-v2 {
    position: sticky;
    z-index: 14;
    bottom: 0;
    margin: 12px -8px 0;
    padding: 12px;
    border: 0;
    border-top: 1px solid color-mix(in srgb, var(--accent) 28%, var(--soft-line));
    border-radius: 0;
    background: color-mix(in srgb, var(--bg) 90%, var(--panel) 10%);
    box-shadow: 0 -14px 32px color-mix(in srgb, var(--bg) 74%, transparent);
    backdrop-filter: blur(10px);
  }

  .community-page.community-page-pass46 .community-reply-head b {
    font-size: 11px;
    text-transform: none;
  }

  .community-page.community-page-pass46 .community-reply-head small {
    font-size: 9px;
  }

  .community-page.community-page-pass46 .community-reply-box-v2 textarea {
    min-height: 72px;
    max-height: 140px;
  }

  .community-page.community-page-pass46 .community-info-pane {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 40;
    display: block !important;
    width: min(360px, calc(100vw - 40px));
    height: 100% !important;
    padding: 14px;
    overflow-y: auto;
    border-left: 1px solid color-mix(in srgb, var(--soft-line) 78%, transparent);
    background: color-mix(in srgb, var(--panel) 97%, var(--bg));
    box-shadow: -18px 0 44px color-mix(in srgb, var(--shadow) 36%, transparent);
    opacity: 0;
    pointer-events: none;
    transform: translateX(102%);
    transition: transform .2s ease, opacity .2s ease;
  }

  .community-page.community-page-pass46.is-community-guide-open .community-info-pane {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
  }

  .community-page.community-page-pass46 .community-guide-head {
    position: sticky;
    top: -14px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: -14px -14px 12px;
    padding: 12px 14px;
    border-bottom: 1px solid color-mix(in srgb, var(--soft-line) 70%, transparent);
    background: color-mix(in srgb, var(--panel) 97%, var(--bg));
  }

  .community-page.community-page-pass46 .community-guide-head > div {
    min-width: 0;
    display: grid;
    gap: 2px;
  }

  .community-page.community-page-pass46 .community-guide-head b {
    font-size: 13px;
  }

  .community-page.community-page-pass46 .community-guide-card {
    margin: 0;
    padding: 13px 2px;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--soft-line) 60%, transparent);
    background: transparent;
  }

  .community-page.community-page-pass46 .community-guide-card + .community-guide-card {
    margin-top: 0;
  }

  .community-page.community-page-pass46 .community-guide-card b {
    font-size: 12px;
  }

  .community-page.community-page-pass46 .community-guide-card p,
  .community-page.community-page-pass46 .community-guide-card li {
    font-size: 11px;
    line-height: 1.5;
  }

  .community-page.community-page-pass46 .community-composer-panel {
    margin: 0;
    padding: 11px;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--soft-line) 68%, transparent);
    border-radius: 0;
    background: color-mix(in srgb, var(--panel) 82%, var(--bg));
    box-shadow: none;
  }
}

@keyframes communityCommentIn {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes communityInlineReplyIn {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (min-width: 861px) and (max-width: 1120px) {
  .community-page.community-page-pass46 .community-layout-v5 {
    grid-template-columns: 286px minmax(0, 1fr) !important;
  }
  .community-page.community-page-pass46 .community-hero-stats {
    display: none;
  }
  .community-page.community-page-pass46 .community-hero-v5 {
    grid-template-areas: "copy actions";
  }
}

@media (max-width: 860px) {
  .community-page.community-page-pass46 .community-info-pane {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 2200;
    display: block !important;
    width: 100%;
    max-height: min(72dvh, 620px);
    padding: 14px;
    overflow-y: auto;
    border: 1px solid var(--soft-line);
    border-bottom: 0;
    background: var(--panel);
    box-shadow: 0 -18px 40px color-mix(in srgb, var(--shadow) 48%, transparent);
    opacity: 0;
    pointer-events: none;
    transform: translateY(105%);
    transition: transform .2s ease, opacity .2s ease;
  }
  .community-page.community-page-pass46.is-community-guide-open .community-info-pane {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
  .community-page.community-page-pass46 .community-guide-head {
    position: sticky;
    top: -14px;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: -14px -14px 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--soft-line);
    background: var(--panel);
  }
  .community-page.community-page-pass46 .community-inline-reply-disclosure > summary {
    cursor: pointer;
    color: var(--muted);
  }
  .community-page.community-page-pass46 .community-inline-reply-compose {
    display: grid;
    gap: 7px;
    margin-top: 7px;
  }
}

/* Chat View · compact selected-flow Switch controls — 2026-09-27 */
.app-shell.chat-mode .r3-chat-composer {
  grid-template-areas:
    "attachments attachments"
    "input send"
    "switches switches"
    "tools tools"
    "hint hint";
}
.app-shell.chat-mode .r3-chat-switches {
  grid-area: switches;
  justify-self: start;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 1px 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.app-shell.chat-mode .r3-chat-switches[hidden] { display: none !important; }
.app-shell.chat-mode .r3-chat-switches-label {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  color: var(--muted);
  font-size: 8px;
  font-weight: 900;
  line-height: 22px;
  letter-spacing: .11em;
  text-transform: uppercase;
  white-space: nowrap;
}
.app-shell.chat-mode .r3-chat-switches-list {
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex: 0 1 auto;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--soft-line) 70%, transparent) transparent;
  padding: 0 1px 1px 0;
}
.app-shell.chat-mode .r3-chat-switches-list::-webkit-scrollbar { height: 4px; }
.app-shell.chat-mode .r3-chat-switches-list::-webkit-scrollbar-track { background: transparent; }
.app-shell.chat-mode .r3-chat-switches-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: color-mix(in srgb, var(--soft-line) 68%, transparent);
}
.app-shell.chat-mode .r3-chat-switch-chip {
  position: relative;
  flex: 0 0 auto;
  min-width: 0;
  max-width: 180px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 1px 6px 1px 4px;
  border: 1px solid color-mix(in srgb, var(--soft-line) 80%, transparent);
  border-radius: 5px;
  background: color-mix(in srgb, var(--panel) 72%, transparent);
  color: var(--ink);
  cursor: pointer;
  user-select: none;
  transition: border-color .16s ease, background-color .16s ease, opacity .16s ease, transform .16s ease;
}
.app-shell.chat-mode .r3-chat-switch-chip:hover {
  border-color: color-mix(in srgb, var(--accent) 54%, var(--soft-line));
  background: color-mix(in srgb, var(--accent) 6%, var(--panel));
}
.app-shell.chat-mode .r3-chat-switch-chip:active { transform: translateY(1px); }
.app-shell.chat-mode .r3-chat-switch-chip.is-off { opacity: .72; }
.app-shell.chat-mode .r3-chat-switch-chip input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}
.app-shell.chat-mode .r3-chat-switch-check {
  position: relative;
  flex: 0 0 12px;
  width: 12px;
  height: 12px;
  border: 1px solid color-mix(in srgb, var(--soft-line) 88%, var(--ink));
  border-radius: 3px;
  background: var(--bg);
  transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}
.app-shell.chat-mode .r3-chat-switch-chip input:checked + .r3-chat-switch-check {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 10%, transparent);
}
.app-shell.chat-mode .r3-chat-switch-chip input:checked + .r3-chat-switch-check::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 1px;
  width: 3px;
  height: 6px;
  border: solid var(--bg);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.app-shell.chat-mode .r3-chat-switch-chip:has(input:focus-visible) {
  outline: 2px solid color-mix(in srgb, var(--accent) 72%, transparent);
  outline-offset: 1px;
}
.app-shell.chat-mode .r3-chat-switch-name {
  min-width: 0;
  max-width: 128px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 750;
  line-height: 1;
}
.app-shell.chat-mode .r3-chat-switch-chip small {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 7px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .06em;
}
.app-shell.chat-mode .r3-chat-switch-chip.is-on small { color: color-mix(in srgb, var(--accent) 84%, var(--ink)); }

html.r3-mobile-device .app-shell.chat-mode .r3-chat-composer {
  grid-template-areas:
    "attachments attachments"
    "input send"
    "switches switches"
    "tools tools"
    "hint hint" !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-switches {
  width: 100%;
  max-width: 100%;
  gap: 6px;
  padding: 0;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-switches-label { line-height: 22px; }
html.r3-mobile-device .app-shell.chat-mode .r3-chat-switches-list {
  min-width: 0;
  flex: 1 1 auto;
  max-width: none;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 1px;
  scrollbar-width: none;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-switches-list::-webkit-scrollbar { display: none; }
html.r3-mobile-device .app-shell.chat-mode .r3-chat-switch-chip {
  flex: 0 0 auto;
  max-width: 150px;
}

@media (prefers-reduced-motion: reduce) {
  .app-shell.chat-mode .r3-chat-switch-chip,
  .app-shell.chat-mode .r3-chat-switch-check { transition: none !important; }
}

/* Start node — compact launch-style flow origin. */
.node-palette-start {
  grid-column: 1 / -1;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-color: color-mix(in srgb, var(--accent) 54%, var(--flow-ui-border, var(--soft-line))) !important;
  background: color-mix(in srgb, var(--accent) 8%, var(--panel-2)) !important;
  color: color-mix(in srgb, var(--accent) 78%, var(--ink)) !important;
  font-weight: 850;
  letter-spacing: .02em;
}
.node-palette-start > span {
  width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 65%, var(--soft-line));
  background: color-mix(in srgb, var(--bg) 78%, var(--accent) 8%);
  color: var(--accent);
  font-size: 9px;
  line-height: 1;
}
.node-palette-start > b { font: inherit; }
.node-palette-start:hover,
.node-palette-start:focus-visible {
  border-color: var(--accent) !important;
  background: color-mix(in srgb, var(--accent) 14%, var(--panel-2)) !important;
}

.r3-node.is-start-node,
.r3-node[data-type="Start"] {
  width: 275px !important;
  min-height: 72px !important;
  height: auto !important;
  border-color: color-mix(in srgb, var(--accent) 46%, var(--line)) !important;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--panel) 94%, var(--accent) 4%),
    color-mix(in srgb, var(--panel) 98%, var(--bg) 2%)) !important;
  box-shadow: 5px 5px 0 var(--shadow) !important;
  overflow: visible !important;
}
.r3-node.is-start-node:hover,
.r3-node[data-type="Start"]:hover {
  transform: translate(-1px, -1px);
  box-shadow: 7px 7px 0 var(--shadow) !important;
}
.r3-node.is-start-node.selected,
.r3-node[data-type="Start"].selected {
  outline: 2px solid color-mix(in srgb, var(--accent) 78%, transparent);
  outline-offset: 2px;
}
.r3-node.is-start-node > .node-head,
.r3-node.is-start-node > .node-status,
.r3-node.is-start-node > .node-tools,
.r3-node[data-type="Start"] > .node-head,
.r3-node[data-type="Start"] > .node-status,
.r3-node[data-type="Start"] > .node-tools {
  display: none !important;
}
.r3-node.is-start-node > .node-body,
.r3-node[data-type="Start"] > .node-body {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 70px !important;
  max-height: none !important;
  border: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}
.r3-node.is-start-node .node-body-content,
.r3-node[data-type="Start"] .node-body-content {
  min-width: 0;
  min-height: 70px;
}
.node-start-shell {
  min-height: 70px;
  display: grid;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 14px 17px 14px 14px;
}
.node-start-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--accent);
  background: color-mix(in srgb, var(--bg) 88%, var(--accent) 6%);
  color: var(--accent);
  box-shadow: inset 0 0 16px color-mix(in srgb, var(--accent) 8%, transparent);
  font-size: 13px;
}
.node-start-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.node-start-copy small {
  color: var(--accent);
  font: 850 9px/1.15 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .13em;
}
.node-start-copy b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.25;
}
.node-start-copy span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
}
.r3-node.is-start-node .node-port-out,
.r3-node[data-type="Start"] .node-port-out {
  top: 27px !important;
  right: -10px !important;
  border-color: color-mix(in srgb, var(--accent) 72%, var(--line));
  background: var(--panel);
}
.r3-node.is-start-node.state-done,
.r3-node[data-type="Start"].state-done {
  border-color: color-mix(in srgb, var(--accent) 54%, var(--line)) !important;
}
.r3-node.is-start-node.running,
.r3-node[data-type="Start"].running {
  animation: none !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent), 5px 5px 0 var(--shadow) !important;
}

html.r3-mobile-device .r3-node.is-start-node,
html.r3-mobile-device .r3-node[data-type="Start"] {
  width: 260px !important;
  min-height: 68px !important;
}
html.r3-mobile-device .node-start-shell {
  min-height: 66px;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 10px;
  padding: 12px 15px 12px 12px;
}
html.r3-mobile-device .node-start-icon { width: 36px; height: 36px; }
html.r3-mobile-device .r3-node.is-start-node .node-port-out,
html.r3-mobile-device .r3-node[data-type="Start"] .node-port-out { top: 25px !important; }

.r3-node.is-start-node .node-start-shell:active,
.r3-node[data-type="Start"] .node-start-shell:active { cursor: grabbing; }

/* Chat completed node outputs menu — pass 2026-09-28 */
.r3-chat-output-menu-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
.r3-chat-outputs-btn {
  position: relative;
}
.r3-chat-outputs-btn em {
  min-width: 15px;
  height: 15px;
  display: inline-grid;
  place-items: center;
  padding: 0 4px;
  border: 1px solid color-mix(in srgb, var(--accent) 54%, var(--soft-line));
  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
  color: var(--accent);
  font: 850 9px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-style: normal;
  letter-spacing: 0;
}
.r3-chat-outputs-btn[aria-disabled="true"] {
  opacity: .58;
}
.r3-chat-output-menu {
  position: absolute;
  z-index: 90;
  top: calc(100% + 7px);
  right: 0;
  width: min(340px, calc(100vw - 34px));
  max-height: min(380px, 54vh);
  display: none;
  overflow: auto;
  padding: 5px;
  border: 1px solid color-mix(in srgb, var(--soft-line) 86%, var(--accent) 14%);
  background: color-mix(in srgb, var(--panel-2) 96%, var(--bg));
  box-shadow: 6px 7px 0 color-mix(in srgb, var(--shadow) 88%, transparent), 0 14px 34px rgba(0, 0, 0, .28);
  transform-origin: top right;
}
.r3-chat-output-menu-wrap:hover > .r3-chat-output-menu,
.r3-chat-output-menu-wrap:focus-within > .r3-chat-output-menu,
.r3-chat-output-menu-wrap.is-open > .r3-chat-output-menu {
  display: grid;
  gap: 3px;
  animation: r3-chat-output-menu-in .11s ease-out both;
}
@keyframes r3-chat-output-menu-in {
  from { opacity: 0; transform: translateY(-3px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.r3-chat-output-menu-item {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 8px 9px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.r3-chat-output-menu-item:hover,
.r3-chat-output-menu-item:focus-visible {
  outline: 0;
  border-color: color-mix(in srgb, var(--accent) 46%, var(--soft-line));
  background: color-mix(in srgb, var(--accent) 9%, var(--panel));
}
.r3-chat-output-menu-mark {
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--soft-line));
  background: color-mix(in srgb, var(--accent) 7%, var(--bg));
  color: var(--accent);
  font-size: 11px;
  line-height: 1;
}
.r3-chat-output-menu-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.r3-chat-output-menu-copy b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.1;
}
.r3-chat-output-menu-copy small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 9.5px;
  line-height: 1.2;
}
.r3-chat-output-menu-empty {
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  color: var(--muted);
}
.r3-chat-output-menu-empty b {
  color: var(--ink);
  font-size: 10px;
}
.r3-chat-output-menu-empty span {
  font-size: 9.5px;
  line-height: 1.35;
}
/* Reserve the action lane so Copy + Outputs + Oracle never cover the first line. */
.r3-chat-row:has(.r3-chat-output-menu-wrap) .r3-chat-bubble {
  padding-right: 194px;
}
.r3-chat-row.is-live .r3-chat-output-menu-wrap,
.r3-chat-row.is-oracle-history-view .r3-chat-output-menu-wrap {
  pointer-events: auto;
}
@media (hover: none), (pointer: coarse) {
  .r3-chat-row:has(.r3-chat-output-menu-wrap) .r3-chat-bubble {
    padding-right: 112px;
  }
  .r3-chat-outputs-btn {
    min-width: 35px;
    padding-inline: 5px;
  }
  .r3-chat-outputs-btn em {
    min-width: 13px;
    height: 13px;
    padding-inline: 3px;
    font-size: 8px;
  }
  .r3-chat-output-menu {
    width: min(320px, calc(100vw - 18px));
  }
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-row:has(.r3-chat-output-menu-wrap) .r3-chat-bubble {
  padding-right: 112px !important;
}
@media (prefers-reduced-motion: reduce) {
  .r3-chat-output-menu-wrap:hover > .r3-chat-output-menu,
  .r3-chat-output-menu-wrap:focus-within > .r3-chat-output-menu,
  .r3-chat-output-menu-wrap.is-open > .r3-chat-output-menu {
    animation: none;
  }
}

/* Chat live card stable mode geometry — 2026-09-28
   Normal activity and Oracle summary share one fixed frame so toggling views
   never changes the chat row height or shifts the page beneath the pointer. */
.app-shell.chat-mode .r3-chat-live-run-slim[data-chat-live-phase="run"] {
  --r3-chat-live-mode-height: 352px;
  height: var(--r3-chat-live-mode-height) !important;
  min-height: var(--r3-chat-live-mode-height) !important;
  max-height: var(--r3-chat-live-mode-height) !important;
  grid-template-rows: minmax(0, 1fr);
  box-sizing: border-box;
  overflow: hidden;
}

.app-shell.chat-mode .r3-chat-live-run-slim[data-chat-live-phase="run"] > .r3-chat-live-normal {
  height: 100%;
  min-height: 0;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  overflow: hidden;
}

.app-shell.chat-mode .r3-chat-live-run-slim[data-chat-live-phase="run"] .r3-chat-live-tools {
  min-height: 0;
  max-height: none;
  height: 100%;
  overflow-y: auto;
}

.app-shell.chat-mode .r3-chat-live-run-slim[data-chat-live-phase="run"].is-oracle-view > .r3-chat-oracle-view {
  height: 100%;
  min-height: 0;
  max-height: none;
  align-content: start;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  box-sizing: border-box;
}

@media (max-width: 720px) {
  .app-shell.chat-mode .r3-chat-live-run-slim[data-chat-live-phase="run"] {
    --r3-chat-live-mode-height: 300px;
  }
}

/* Chat stable live frame — Oracle layout correction · 2026-09-29
   The animated sweep is decorative. Once the live frame became a one-row grid,
   its ::before pseudo-element participated in grid placement and consumed the
   flexible row in Oracle mode, pushing the Oracle card toward the bottom.
   Keep both live modes in the same explicit grid area and take decoration out
   of layout so view switching remains height-stable without visual dead space. */
.app-shell.chat-mode .r3-chat-live-run-slim[data-chat-live-phase="run"] {
  grid-template:
    "live-view" minmax(0, 1fr)
    / minmax(0, 1fr) !important;
  align-items: stretch;
}

.app-shell.chat-mode .r3-chat-live-run-slim[data-chat-live-phase="run"]::before {
  position: absolute !important;
  z-index: 3;
  top: 0;
  right: 0;
  left: 0;
  width: auto;
  margin: 0;
  pointer-events: none;
}

.app-shell.chat-mode .r3-chat-live-run-slim[data-chat-live-phase="run"] > .r3-chat-live-normal,
.app-shell.chat-mode .r3-chat-live-run-slim[data-chat-live-phase="run"] > .r3-chat-oracle-view {
  grid-area: live-view;
  align-self: stretch;
  width: 100%;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
}

.app-shell.chat-mode .r3-chat-live-run-slim[data-chat-live-phase="run"] > .r3-chat-live-normal {
  height: auto;
}

.app-shell.chat-mode .r3-chat-live-run-slim[data-chat-live-phase="run"].is-oracle-view > .r3-chat-oracle-view {
  height: auto !important;
  max-height: none;
  align-content: start;
  grid-auto-rows: max-content;
  gap: 10px;
  padding: 14px 46px 14px 14px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  background:
    linear-gradient(180deg, rgba(21, 42, 77, .18), rgba(4, 10, 22, .22)),
    rgba(4, 10, 22, .34);
}

/* Give the summary a deliberate readable block rather than letting the fixed
   viewport feel like a large empty shell when Oracle text is short. */
.app-shell.chat-mode .r3-chat-live-run-slim[data-chat-live-phase="run"].is-oracle-view .r3-chat-oracle-text {
  max-width: 100%;
  padding: 1px 0 2px;
  line-height: 1.48;
}

.app-shell.chat-mode .r3-chat-live-run-slim[data-chat-live-phase="run"].is-oracle-view .r3-chat-oracle-actions {
  align-content: start;
}

/* Keep steer state visually anchored and separated from the primary summary
   without manufacturing a second large nested card. */
.app-shell.chat-mode .r3-chat-live-run-slim[data-chat-live-phase="run"].is-oracle-view .oracle-steer-applied,
.app-shell.chat-mode .r3-chat-live-run-slim[data-chat-live-phase="run"].is-oracle-view .oracle-steer-proposal {
  margin-top: 2px;
}

@media (max-width: 720px) {
  .app-shell.chat-mode .r3-chat-live-run-slim[data-chat-live-phase="run"].is-oracle-view > .r3-chat-oracle-view {
    padding: 12px 39px 12px 12px;
    gap: 9px;
  }
}

/* Tool activity hedge-marker layout correction — 2026-09-29
   The backup-response rocket is metadata, not a grid cell. When it participated
   in the tool-card grid it shifted copy/status into later columns and could wrap
   Node tool titles into a tiny first-column slot. Keep it as a compact overlay
   badge so normal and hedged tool calls have identical geometry. */
.r3-node .node-tools .tool-bubble {
  position: relative !important;
}
.r3-node .node-tools .tool-bubble > .r3-hedge-response-marker {
  position: absolute !important;
  z-index: 7 !important;
  top: 3px !important;
  left: 29px !important;
  width: 13px !important;
  height: 13px !important;
  margin: 0 !important;
  display: grid !important;
  place-items: center !important;
  pointer-events: none !important;
  color: var(--accent) !important;
  background: color-mix(in srgb, var(--panel) 90%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--accent) 46%, var(--soft-line)) !important;
  box-shadow: 1px 1px 0 var(--shadow) !important;
}
.r3-node .node-tools .tool-bubble > .r3-hedge-response-marker svg {
  width: 9px !important;
  height: 9px !important;
}

.app-shell.chat-mode .r3-chat-live-tool-row {
  position: relative;
}
.app-shell.chat-mode .r3-chat-live-tool-row > .r3-hedge-response-marker {
  position: absolute !important;
  z-index: 4 !important;
  top: 3px !important;
  left: 25px !important;
  width: 12px !important;
  height: 12px !important;
  margin: 0 !important;
  display: grid !important;
  place-items: center !important;
  pointer-events: none !important;
  color: var(--accent) !important;
  background: color-mix(in srgb, var(--panel) 90%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--accent) 44%, var(--soft-line)) !important;
  box-shadow: 1px 1px 0 var(--shadow) !important;
}
.app-shell.chat-mode .r3-chat-live-tool-row > .r3-hedge-response-marker svg {
  width: 8px !important;
  height: 8px !important;
}

/* Small desktop/tablet Chat still has ample width for status in the trailing
   column. Older <=920px rules moved status onto a second row, which amplified
   the hedge-marker grid bug and made otherwise normal rows look unstable. */
@media (min-width: 541px) and (max-width: 920px) {
  html:not(.r3-mobile-device) .app-shell.chat-mode .r3-chat-live-tool-row {
    grid-template-columns: 24px minmax(0, 1fr) auto !important;
    grid-template-rows: 1fr !important;
    align-items: center !important;
  }
  html:not(.r3-mobile-device) .app-shell.chat-mode .r3-chat-live-tool-state {
    grid-column: auto !important;
    justify-self: end !important;
    align-self: center !important;
    white-space: nowrap !important;
  }
}

/* Keep copy as the sole flexible grid child in both surfaces. */
.r3-node .node-tools .tool-bubble > .bubble-copy,
.app-shell.chat-mode .r3-chat-live-tool-row > .r3-chat-live-tool-copy {
  min-width: 0 !important;
  width: auto !important;
}

/* Mobile Chat live activity visibility correction — 2026-09-29
   The stable normal/Oracle frame must remain identical between views, but the
   previous 300px mobile frame was fully consumed by the current-agent card,
   2x2 metrics and Recent Activity heading. Reserve a real activity viewport so
   live tool calls remain visible and scroll inside the card. */
@media (max-width: 720px) {
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-live-run-slim[data-chat-live-phase="run"] {
    --r3-chat-live-mode-height: clamp(420px, 54dvh, 500px);
  }

  html.r3-mobile-device .app-shell.chat-mode .r3-chat-live-run-slim[data-chat-live-phase="run"] > .r3-chat-live-normal {
    grid-template-rows: auto auto auto minmax(126px, 1fr) !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  html.r3-mobile-device .app-shell.chat-mode .r3-chat-live-run-slim[data-chat-live-phase="run"] .r3-chat-live-tools {
    display: grid !important;
    min-height: 126px !important;
    height: 100% !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    align-content: start !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Keep Oracle on the exact same outer geometry; only its own content scrolls. */
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-live-run-slim[data-chat-live-phase="run"].is-oracle-view > .r3-chat-oracle-view {
    min-height: 0 !important;
    height: auto !important;
    overflow-y: auto !important;
  }
}

/* Chat Outputs hover corridor — 2026-09-29
   Preserve the visual gap below the Outputs button while keeping hover continuity
   as the pointer moves down/diagonally into the context menu. */
@media (hover: hover) and (pointer: fine) {
  .r3-chat-output-menu-wrap:hover::after,
  .r3-chat-output-menu-wrap:focus-within::after,
  .r3-chat-output-menu-wrap.is-open::after {
    content: "";
    position: absolute;
    z-index: 89;
    top: 100%;
    right: 0;
    width: min(340px, calc(100vw - 34px));
    height: 9px;
    background: transparent;
    pointer-events: auto;
  }
}

/* Chat live activity row sizing correction — 2026-09-29
   The fixed-height live frame makes .r3-chat-live-tools a tall grid viewport.
   With only one tool call, the grid's default stretch behavior expands that
   single auto row to fill the viewport. Keep every tool row content-sized and
   pack rows from the top so 1, 2, or many calls use identical row geometry. */
.app-shell.chat-mode .r3-chat-live-run-slim[data-chat-live-phase="run"] .r3-chat-live-tools {
  align-content: start !important;
  grid-auto-rows: max-content !important;
}

.app-shell.chat-mode .r3-chat-live-run-slim[data-chat-live-phase="run"] .r3-chat-live-tool-row {
  align-self: start !important;
  height: auto !important;
}

/* Parallel Workspace Tabs — pass 2 · 2026-09-30
   UI/session isolation only. Each secondary workspace runs in its own same-origin
   app frame so project/run/controller state cannot bleed across tabs. */
:root { --r3-workspace-tabs-h: 38px; }
html.r3-workspace-tabs-host .app-shell {
  height: calc(100vh - var(--r3-workspace-tabs-h)) !important;
  min-height: calc(100vh - var(--r3-workspace-tabs-h)) !important;
  margin-top: var(--r3-workspace-tabs-h) !important;
}
.r3-workspace-tabs {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 2147482000;
  height: var(--r3-workspace-tabs-h);
  display: flex;
  align-items: stretch;
  gap: 6px;
  padding: 4px 8px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 94%, var(--bg) 6%);
  box-shadow: 0 2px 0 var(--shadow);
  overflow: hidden;
}
.r3-workspace-tab-list {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: stretch;
  gap: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
}
.r3-workspace-tab {
  flex: 0 1 260px;
  min-width: 132px;
  max-width: 290px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  border: 1px solid var(--soft-line);
  background: color-mix(in srgb, var(--panel-2) 86%, var(--bg) 14%);
  color: var(--muted);
}
.r3-workspace-tab.is-active {
  border-color: color-mix(in srgb, var(--accent) 72%, var(--line));
  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
  color: var(--ink);
}
.r3-workspace-tab-main,
.r3-workspace-tab-close,
.r3-workspace-tab-add {
  border: 0;
  color: inherit;
  background: transparent;
}
.r3-workspace-tab-main {
  min-width: 0;
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  padding: 5px 8px;
  text-align: left;
}
.r3-workspace-tab-main b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 800;
}
.r3-workspace-tab-status {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--muted);
  opacity: .48;
}
.r3-workspace-tab.is-running .r3-workspace-tab-status {
  background: var(--accent);
  opacity: 1;
  animation: r3-workspace-pulse 1.35s ease-in-out infinite;
}
.r3-workspace-tab.is-done .r3-workspace-tab-status { background: #79c98d; opacity: .9; }
.r3-workspace-tab.is-error .r3-workspace-tab-status { background: #e06f6f; opacity: 1; }
@keyframes r3-workspace-pulse { 50% { transform: scale(1.45); opacity: .55; } }
.r3-workspace-tab-close {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  font-size: 17px;
  color: var(--muted);
}
.r3-workspace-tab-close:hover { color: var(--ink); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.r3-workspace-tab-add {
  flex: 0 0 auto;
  min-width: 84px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 9px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--ink);
  font-size: 11px;
  font-weight: 800;
}
.r3-workspace-tab-add span { font-size: 15px; line-height: 1; }
.r3-workspace-tab-add i {
  font-size: 8px;
  font-style: normal;
  letter-spacing: .06em;
  color: var(--accent);
}
.r3-workspace-tab-add:not(.is-locked) i { display: none; }
.r3-workspace-tab-add.is-locked { color: var(--muted); }
.r3-workspace-tab-stage {
  position: fixed;
  z-index: 2147481000;
  top: var(--r3-workspace-tabs-h);
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--bg);
}
.r3-workspace-tab-stage[hidden] { display: none !important; }
.r3-workspace-tab-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--bg);
}
.r3-workspace-tab-frame[hidden] { display: none !important; }
.r3-workspace-upgrade-copy {
  display: grid;
  gap: 6px;
  padding: 13px;
  border: 1px solid var(--soft-line);
  background: var(--bg);
}
.r3-workspace-upgrade-copy b { color: var(--accent); font-size: 14px; }
.r3-workspace-upgrade-copy p { margin: 0; color: var(--muted); line-height: 1.45; }
@media (prefers-reduced-motion: reduce) {
  .r3-workspace-tab.is-running .r3-workspace-tab-status { animation: none; }
}
@media (max-width: 760px) {
  :root { --r3-workspace-tabs-h: 36px; }
  html.r3-workspace-tabs-host .app-shell,
  html.r3-mobile-device.r3-workspace-tabs-host .app-shell,
  html.r3-mobile-device.r3-workspace-tabs-host .app-shell.chat-mode,
  html.r3-mobile-device.r3-workspace-tabs-host .app-shell:not(.chat-mode) {
    height: calc(100svh - var(--r3-workspace-tabs-h)) !important;
    min-height: calc(100svh - var(--r3-workspace-tabs-h)) !important;
    margin-top: var(--r3-workspace-tabs-h) !important;
  }
  .r3-workspace-tabs { padding-inline: 5px; gap: 4px; }
  .r3-workspace-tab { min-width: 112px; max-width: 190px; }
  .r3-workspace-tab-main { padding-inline: 6px; }
  .r3-workspace-tab-add { min-width: 36px; width: 36px; padding: 0; }
  .r3-workspace-tab-add b, .r3-workspace-tab-add i { display: none !important; }
}
.r3-workspace-tabs[hidden] { display: none !important; }

/* Parallel Workspace Tabs — pass 3 polish/recovery · 2026-09-30 */
.r3-workspace-tab-list {
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
}
.r3-workspace-tab { scroll-snap-align: nearest; }
.r3-workspace-tab.is-attention .r3-workspace-tab-status {
  background: #d9a441;
  opacity: 1;
  box-shadow: 0 0 0 2px color-mix(in srgb, #d9a441 18%, transparent);
}
.r3-workspace-shared-warning {
  flex: 0 0 auto;
  min-width: 0;
  max-width: 210px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 9px;
  border: 1px solid color-mix(in srgb, #d9a441 46%, var(--line));
  background: color-mix(in srgb, #d9a441 8%, var(--panel-2));
  color: var(--muted);
  font-size: 10px;
  white-space: nowrap;
}
.r3-workspace-shared-warning[hidden] { display: none !important; }
.r3-workspace-shared-warning b {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding-inline: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, #d9a441 18%, transparent);
  color: #d9a441;
  font-size: 9px;
}
.r3-workspace-shared-warning span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.r3-workspace-tab-main:focus-visible,
.r3-workspace-tab-close:focus-visible,
.r3-workspace-tab-add:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
@media (max-width: 760px) {
  .r3-workspace-tab-list { gap: 3px; }
  .r3-workspace-shared-warning {
    width: 32px;
    min-width: 32px;
    max-width: 32px;
    justify-content: center;
    padding: 0;
  }
  .r3-workspace-shared-warning span { display: none; }
  .r3-workspace-shared-warning b { min-width: 20px; padding-inline: 3px; }
}

/* Community page + parallel workspace tabs — 2026-10-02
   The global workspace tab bar is fixed above the app shell. On the full-page
   community route it was still rendered over the forum, clipping the hero and
   filter rows by the tab-bar height. Community owns the viewport, so suppress
   workspace chrome while this route is active. */
html.r3-community-page-mode .r3-workspace-tabs,
html.r3-community-page-mode .r3-workspace-tab-stage {
  display: none !important;
}

/* Keep the full-page forum flush to the viewport even if the workspace-host
   class remains on <html> for the lifetime of the editor session. */
html.r3-community-page-mode.r3-workspace-tabs-host,
html.r3-community-page-mode.r3-workspace-tabs-host body {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Community desktop header/filters intrinsic-height fix — 2026-10-02
   Several later forum passes changed the hero/toolbar contents without updating
   the older fixed grid-row heights. With overflow:hidden still inherited, the
   stats row and field labels were physically clipped. Let the chrome size to
   its content and keep only the discussion area constrained. */
@media (min-width: 861px) {
  .community-page.community-page-pass46 .community-shell-page {
    grid-template-rows: auto auto auto minmax(0, 1fr) !important;
  }

  .community-page.community-page-pass46 .community-hero-v5 {
    height: auto !important;
    min-height: 102px !important;
    overflow: visible !important;
  }

  .community-page.community-page-pass46 .community-hero-copy,
  .community-page.community-page-pass46 .community-hero-stats,
  .community-page.community-page-pass46 .community-hero-actions {
    overflow: visible !important;
  }

  .community-page.community-page-pass46 .community-toolbar-v5 {
    height: auto !important;
    min-height: 58px !important;
    overflow: visible !important;
  }

  .community-page.community-page-pass46 .community-toolbar-v5 label {
    min-width: 0;
    overflow: visible !important;
  }

  .community-page.community-page-pass46 .community-toolbar-v5 label > span {
    display: block;
    line-height: 1.2;
  }

  .community-page.community-page-pass46 .community-category-rail-v5 {
    height: auto !important;
    min-height: 41px !important;
  }
}

/* Community main-area loading overlay — thread/category transitions */
.community-page .community-layout,
.community-dialog .community-layout {
  position: relative;
}

.community-main-loading {
  position: absolute;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  background:
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 38%),
    color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(5px) saturate(.9);
  -webkit-backdrop-filter: blur(5px) saturate(.9);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .16s ease, visibility 0s linear .16s;
}

.community-main-loading.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .16s ease;
}

.community-main-loading-card {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  min-width: 210px;
  padding: 14px 17px 14px 15px;
  border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--soft-line));
  border-radius: 10px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--panel) 98%, white 1%),
    color-mix(in srgb, var(--panel) 94%, var(--bg)));
  color: var(--ink);
  box-shadow:
    0 18px 46px color-mix(in srgb, var(--shadow) 52%, transparent),
    inset 0 1px 0 color-mix(in srgb, white 7%, transparent);
}

.community-main-loading-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.community-main-loading-copy b {
  font-size: 11px;
  font-weight: 850;
  line-height: 1.15;
  letter-spacing: .035em;
  color: var(--ink);
}

.community-main-loading-copy small {
  font-size: 9px;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: .05em;
  color: var(--muted);
}

.community-main-spinner {
  position: relative;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    color-mix(in srgb, var(--accent) 10%, transparent) 0 28%,
    var(--accent) 72% 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  animation: communitySpinner .78s linear infinite;
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--accent) 22%, transparent));
}

.community-main-spinner::after {
  content: '';
  position: absolute;
  width: 5px;
  height: 5px;
  left: 50%;
  top: -1px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 55%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .community-main-loading,
  .community-main-loading.is-active {
    transition: none;
  }
  .community-main-spinner {
    animation-duration: 1.4s;
  }
}

/* Live reasoning typography — keep prose compact without shrinking code blocks. */
.r3-transport-reasoning > p,
.r3-transport-reasoning > ul,
.r3-transport-reasoning > ol,
.r3-transport-reasoning > blockquote,
.r3-transport-reasoning li {
  font-size: 13px;
  line-height: 1.5;
}
.r3-transport-reasoning > h1 { font-size: 17px; }
.r3-transport-reasoning > h2 { font-size: 16px; }
.r3-transport-reasoning > h3 { font-size: 15px; }
.r3-transport-reasoning > h4,
.r3-transport-reasoning > h5,
.r3-transport-reasoning > h6 { font-size: 14px; }

/* Mobile Chat UX polish — 2026-10-02
   Goals:
   - remove redundant header copy on phones
   - keep node picker + settings from overlapping
   - compress the live HUD into a single clean stats row
   - make tool activity easier to read and scroll on mobile */
html.r3-mobile-device .app-shell.chat-mode .r3-chat-mobile-top {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: center !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-mobile-top-copy {
  display: none !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-mobile-actions {
  width: 100% !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  justify-content: stretch !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-mobile-start-select {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  justify-self: stretch !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-mobile-top .ui-btn {
  min-width: 86px !important;
}

html.r3-mobile-device .app-shell.chat-mode .r3-chat-live-run-slim[data-chat-live-phase="run"] {
  --r3-chat-live-mode-height: clamp(360px, 48dvh, 430px) !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-live-run-slim[data-chat-live-phase="run"] > .r3-chat-live-normal {
  grid-template-rows: auto auto auto minmax(112px, 1fr) !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-live-head {
  gap: 8px !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-live-head > div > small {
  font-size: 10px !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-live-head > div > b {
  font-size: 13px !important;
  line-height: 1.22 !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-live-head > div > span {
  font-size: 10.5px !important;
  line-height: 1.35 !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-live-head-actions {
  gap: 6px !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-live-tool {
  min-height: 24px !important;
  padding: 3px 8px !important;
  font-size: 9px !important;
}

html.r3-mobile-device .app-shell.chat-mode .r3-chat-live-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 6px !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-live-metrics > div {
  min-width: 0 !important;
  padding: 7px 4px 6px !important;
  border-radius: 10px !important;
  box-shadow: 1px 1px 0 var(--shadow) !important;
  text-align: center !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-live-metrics b {
  font-size: 12px !important;
  line-height: 1.05 !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-live-metrics span {
  margin-top: 4px !important;
  font-size: 7.5px !important;
  letter-spacing: .09em !important;
}

html.r3-mobile-device .app-shell.chat-mode .r3-chat-live-tools-head {
  align-items: baseline !important;
  gap: 8px !important;
  font-size: 8px !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-live-tools-head small {
  font-size: 8.5px !important;
  letter-spacing: .04em !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-live-tools {
  min-height: 112px !important;
  height: 100% !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
  padding-right: 1px !important;
  padding-bottom: 12px !important;
  scroll-padding-bottom: 12px !important;
  scrollbar-gutter: stable !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-live-tool-row {
  grid-template-columns: 22px minmax(0, 1fr) auto !important;
  align-items: start !important;
  gap: 7px !important;
  padding: 8px 8px 9px !important;
  border-radius: 10px !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-live-tool-icon {
  width: 22px !important;
  height: 22px !important;
  font-size: 11px !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-live-tool-row > .r3-hedge-response-marker {
  top: 2px !important;
  left: 22px !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-live-tool-copy {
  gap: 3px !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-live-tool-copy b {
  font-size: 9.5px !important;
  letter-spacing: .06em !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-live-tool-copy small {
  display: -webkit-box !important;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: 10.5px !important;
  line-height: 1.32 !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-live-tool-state {
  justify-self: end !important;
  align-self: start !important;
  padding: 2px 6px !important;
  border: 1px solid color-mix(in srgb, var(--soft-line) 82%, transparent) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--bg) 78%, transparent) !important;
  font-size: 8px !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-messages {
  scroll-padding-bottom: 24px !important;
}


/* R3D3 BUILD: chat pricing info tooltip repair + compact live metrics — 2026-10-08 */
.r3-chat-pricing-metric {
  position: relative;
  cursor: help;
  overflow: visible;
  isolation: isolate;
}
.r3-chat-cost-help {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 20;
  display: inline-flex !important;
  width: 17px;
  height: 17px;
  margin: 0 !important;
  align-items: center;
  justify-content: center;
}
.r3-chat-live-metrics .r3-chat-cost-info,
.run-summary-visible-metrics .r3-chat-cost-info {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  margin: 0 !important;
  border: 1px solid color-mix(in srgb, var(--accent) 58%, var(--soft-line));
  background: color-mix(in srgb, var(--panel) 92%, var(--accent) 8%);
  color: var(--accent) !important;
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: 10px !important;
  font-style: normal;
  font-weight: 950 !important;
  line-height: 1;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: 1px 1px 0 var(--shadow);
  pointer-events: none;
}
.r3-chat-cost-tip {
  position: absolute;
  top: 23px;
  right: 0;
  z-index: 80;
  display: none !important;
  width: min(310px, calc(100vw - 52px));
  margin: 0 !important;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 50%, var(--line));
  background: color-mix(in srgb, var(--panel) 97%, var(--accent) 3%);
  color: var(--ink);
  box-shadow: 5px 5px 0 var(--shadow), 0 12px 30px rgba(0,0,0,.24);
  text-align: left;
  white-space: normal;
  pointer-events: none;
}
.r3-chat-pricing-metric:is(:hover, :focus, :focus-within) .r3-chat-cost-tip {
  display: grid !important;
  gap: 8px;
}
.r3-chat-pricing-metric:is(:hover, :focus, :focus-within) .r3-chat-cost-info {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 18%, var(--panel));
}
.r3-chat-cost-tip-head {
  display: grid !important;
  gap: 2px;
  margin: 0 !important;
}
.r3-chat-live-metrics .r3-chat-cost-tip-head b,
.run-summary-visible-metrics .r3-chat-cost-tip-head b {
  display: block !important;
  color: var(--ink) !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  white-space: normal !important;
}
.r3-chat-cost-tip-head small,
.r3-chat-cost-tip-sources > small {
  color: var(--accent) !important;
  font-size: 8px !important;
  font-weight: 900 !important;
  letter-spacing: .11em !important;
  text-transform: uppercase !important;
}
.r3-chat-cost-tip-grid,
.r3-chat-cost-tip-sources {
  display: grid !important;
  gap: 4px;
  margin: 0 !important;
}
.r3-chat-cost-tip-grid > span,
.r3-chat-cost-tip-sources > span {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: baseline;
  margin: 0 !important;
  font-size: 9px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.r3-chat-cost-tip-grid i,
.r3-chat-cost-tip-sources i {
  color: var(--muted);
  font-style: normal;
  font-weight: 700;
}
.r3-chat-live-metrics .r3-chat-cost-tip-grid b,
.r3-chat-live-metrics .r3-chat-cost-tip-sources b,
.run-summary-visible-metrics .r3-chat-cost-tip-grid b,
.run-summary-visible-metrics .r3-chat-cost-tip-sources b {
  display: block !important;
  color: var(--ink) !important;
  font-size: 9px !important;
  white-space: nowrap !important;
}
.r3-chat-cost-tip-note {
  display: block !important;
  margin: 0 !important;
  padding-top: 7px;
  border-top: 1px solid var(--soft-line);
  color: var(--muted) !important;
  font-size: 8.5px !important;
  font-weight: 650 !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.r3-chat-cost-tip-note b {
  display: inline !important;
  color: var(--ink) !important;
  font-size: inherit !important;
  white-space: normal !important;
}
/* Let the help card escape the compact live panel; the animated sweep remains visual only. */
.app-shell.chat-mode .r3-chat-live-run { overflow: visible; }
.r3-chat-live-metrics > .r3-chat-pricing-metric { padding-right: 28px; }
@media (max-width: 720px) {
  .r3-chat-cost-tip { width: min(280px, calc(100vw - 32px)); }
  .r3-chat-live-metrics > .r3-chat-pricing-metric { padding-right: 22px !important; }
  .r3-chat-cost-help { top: 4px; right: 4px; }
}

/* R3D3 BUILD: UI polish — chat cards, panel tooltips, reasoning spacing, notes node refresh — 2026-10-14 */
.r3-transport-stream-panel > small {
  display: none !important;
}
.r3-transport-stream-panel {
  gap: 10px;
}
.r3-transport-stream-panel + .r3-transport-stream-panel {
  margin-top: 14px;
}
.r3-transport-stream-panel .r3-transport-stream-box {
  margin-top: 4px;
}

.app-shell:not(.chat-mode) .panel .r3-help-host,
.app-shell:not(.chat-mode) #nodeOptions .r3-help-host {
  position: relative;
}

.r3-inline-help {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.r3-inline-help-trigger {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  border: 1px solid color-mix(in srgb, var(--accent) 46%, var(--soft-line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel-2) 88%, var(--accent) 12%);
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 2px 2px 0 var(--shadow);
  cursor: help;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.r3-inline-help-trigger:hover,
.r3-inline-help-trigger:focus-visible,
.r3-inline-help-trigger[data-open="true"] {
  transform: translateY(-1px);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 18%, var(--panel-2));
  outline: none;
}
.r3-inline-help-bubble {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(320px, calc(100vw - 28px));
  padding: 10px 11px;
  border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--soft-line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel) 96%, transparent);
  color: var(--ink);
  box-shadow: 10px 12px 28px rgba(0,0,0,.34), 3px 3px 0 var(--shadow);
  font-size: 12px;
  line-height: 1.45;
  letter-spacing: normal;
  text-transform: none;
  white-space: normal;
  overflow-wrap: anywhere;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
  pointer-events: none;
}
.r3-inline-help-trigger[data-open="true"] + .r3-inline-help-bubble,
.r3-inline-help:hover .r3-inline-help-bubble,
.r3-inline-help:focus-within .r3-inline-help-bubble {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.r3-inline-help-source {
  display: none !important;
}

.app-shell:not(.chat-mode) .left-panel :is(.field-help, .option-help, label > small):not(.r3-inline-help-source),
.app-shell:not(.chat-mode) .right-panel :is(.field-help, .option-help, label > small):not(.r3-inline-help-source),
.app-shell:not(.chat-mode) #nodeOptions :is(.field-help, .option-help, label > small):not(.r3-inline-help-source) {
  max-width: 100%;
}

.run-summary-card,
.run-summary-card.run-summary-chat,
.r3-chat-live-run {
  border-radius: 16px;
  border-color: color-mix(in srgb, var(--accent) 24%, var(--soft-line));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 97%, transparent), color-mix(in srgb, var(--bg) 92%, transparent));
  box-shadow: 0 16px 42px rgba(0,0,0,.24), 4px 4px 0 var(--shadow);
  overflow: hidden;
}
.run-summary-card header,
.r3-chat-live-head,
.r3-chat-live-current {
  padding: 14px 16px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel-2) 88%, transparent), color-mix(in srgb, var(--panel) 78%, transparent));
  border-bottom: 1px solid color-mix(in srgb, var(--soft-line) 74%, transparent);
}
.run-summary-card {
  padding: 0;
}
.run-summary-card > :not(header) {
  padding-left: 16px;
  padding-right: 16px;
}
.run-summary-grid,
.run-summary-chat .run-summary-visible-metrics,
.r3-chat-live-metrics {
  gap: 10px;
}
.run-summary-grid > div,
.run-summary-chat .run-summary-visible-metrics > div,
.r3-chat-live-metrics > div {
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--soft-line) 76%, transparent);
  background: color-mix(in srgb, var(--panel-2) 78%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
  padding: 11px 12px;
}
.run-summary-line,
.run-summary-terminal,
.r3-chat-live-tools-head {
  margin-top: 12px;
}
.r3-chat-live-tools {
  padding: 0 2px 2px;
}
.r3-chat-live-tool-row {
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--soft-line) 74%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel-2) 74%, transparent), color-mix(in srgb, var(--panel) 70%, transparent));
  padding: 10px 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.r3-chat-live-tool-row:hover,
.r3-chat-live-tool-row:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--soft-line));
  transform: translateY(-1px);
}
.run-summary-chat .run-summary-more > summary,
.run-summary-chat .run-summary-continue-btn {
  border-radius: 12px;
}
.run-summary-chat .run-summary-chat-actions {
  gap: 10px;
  padding-bottom: 16px;
}
.r3-chat-run-status {
  border-radius: 999px;
}

.r3-node[data-type="Checklist"] .node-body,
.r3-node[data-type="Agent"] .node-body,
.r3-node.is-agent-v2 .node-body {
  border-radius: 12px;
  border-color: color-mix(in srgb, var(--accent) 24%, var(--soft-line));
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--panel-2) 56%, transparent) 0%,
      color-mix(in srgb, var(--bg) 92%, var(--panel) 8%) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), inset 0 0 0 1px rgba(255,255,255,.02);
  padding: 10px 11px;
}
.r3-node[data-type="Checklist"] .node-body {
  border-left: 3px solid color-mix(in srgb, var(--accent) 74%, transparent);
}
.r3-node[data-type="Checklist"] .node-body-label,
.r3-node[data-type="Agent"] .node-body-label,
.r3-node.is-agent-v2 .node-body-label {
  margin-bottom: 6px;
  font-size: 9.5px;
  letter-spacing: .16em;
  color: color-mix(in srgb, var(--accent) 84%, var(--ink));
}
.r3-node[data-type="Checklist"] .node-body-text,
.r3-node[data-type="Agent"] .node-body-text,
.r3-node.is-agent-v2 .node-body-text {
  color: color-mix(in srgb, var(--ink) 72%, var(--muted));
  line-height: 1.48;
  -webkit-line-clamp: 6;
  white-space: pre-wrap;
}
.r3-node[data-type="Checklist"] .node-body-text {
  -webkit-line-clamp: 8;
}

html.r3-mobile-device .r3-inline-help {
  top: 6px;
  right: 6px;
}
html.r3-mobile-device .r3-inline-help-trigger {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  font-size: 12px;
}
html.r3-mobile-device .r3-inline-help-bubble {
  position: fixed;
  left: 12px;
  right: 12px;
  top: auto;
  bottom: 14px;
  width: auto;
  max-height: min(38vh, 260px);
  overflow: auto;
}
html.r3-mobile-device .app-shell.chat-mode .run-summary-card,
html.r3-mobile-device .app-shell.chat-mode .run-summary-card.run-summary-chat,
html.r3-mobile-device .app-shell.chat-mode .r3-chat-live-run {
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,.22), 3px 3px 0 var(--shadow);
}
html.r3-mobile-device .app-shell.chat-mode .run-summary-card > :not(header) {
  padding-left: 12px;
  padding-right: 12px;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-live-head,
html.r3-mobile-device .app-shell.chat-mode .r3-chat-live-current,
html.r3-mobile-device .app-shell.chat-mode .run-summary-card header {
  padding: 12px;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-live-metrics,
html.r3-mobile-device .app-shell.chat-mode .run-summary-chat .run-summary-visible-metrics,
html.r3-mobile-device .app-shell.chat-mode .run-summary-grid {
  gap: 8px;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-live-tool-row {
  padding: 9px 10px;
}
html.r3-mobile-device .app-shell.chat-mode .run-summary-chat .run-summary-chat-actions {
  padding-bottom: 12px;
}


/* R3D3 BUILD: notes node visual refresh — 2026-10-14 */
.r3-notes-node {
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--soft-line)) !important;
  border-radius: 16px !important;
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--check-gold) 12%, transparent) 0, transparent 32%),
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 96%, rgba(6,10,18,.92)) 0%, color-mix(in srgb, var(--bg) 94%, rgba(6,10,18,.96)) 100%) !important;
  box-shadow: 0 18px 36px rgba(0,0,0,.28), 4px 4px 0 var(--shadow), inset 0 1px 0 rgba(255,255,255,.05) !important;
  overflow: hidden !important;
}
.r3-notes-node::before {
  content: '';
  position: absolute;
  inset: 10px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--check-gold) 20%, rgba(255,255,255,.06));
  pointer-events: none;
  opacity: .7;
}
.r3-notes-node.selected {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--soft-line)) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 38%, transparent), 0 18px 42px rgba(0,0,0,.34), 4px 4px 0 var(--shadow) !important;
}
.r3-notes-node .node-port-out {
  top: 50% !important;
  right: -9px !important;
  transform: translateY(-50%) !important;
  border-color: color-mix(in srgb, var(--check-gold) 52%, var(--soft-line)) !important;
  background: color-mix(in srgb, var(--panel) 78%, var(--check-gold) 22%) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bg) 84%, transparent), 0 0 0 1px color-mix(in srgb, var(--check-gold) 44%, transparent) !important;
}
.r3-notes-node .node-port-out:hover,
.r3-notes-node .node-port-out:focus-visible {
  transform: translateY(-50%) scale(1.06) !important;
}
.r3-notes-node .notes-node-head {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 10px 42px;
  border: 1px solid color-mix(in srgb, var(--check-gold) 30%, var(--soft-line));
  border-radius: 12px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel-2) 82%, transparent), color-mix(in srgb, var(--panel) 74%, transparent));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  cursor: grab;
  z-index: 1;
}
.r3-notes-node .notes-node-head::before {
  content: '📝';
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  font-size: 13px;
  line-height: 1;
  border-radius: 6px;
  background: color-mix(in srgb, var(--check-gold) 24%, var(--panel-2));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--check-gold) 36%, transparent);
}
.r3-notes-node .notes-node-head::after {
  content: 'NOTE';
  margin-left: auto;
  padding: 4px 7px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--check-gold) 36%, var(--soft-line));
  background: color-mix(in srgb, var(--check-gold) 12%, var(--panel));
  color: color-mix(in srgb, var(--check-gold) 74%, var(--ink));
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .14em;
  line-height: 1;
}
.r3-notes-node .notes-node-title {
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--ink);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .01em;
  text-shadow: 0 1px 0 rgba(0,0,0,.22);
}
.r3-notes-node .notes-node-body {
  position: absolute;
  top: 66px;
  left: 12px;
  right: 12px;
  bottom: 12px;
  padding: 14px 16px 16px;
  border: 1px solid color-mix(in srgb, var(--soft-line) 82%, transparent);
  border-radius: 12px;
  background:
    repeating-linear-gradient(
      180deg,
      color-mix(in srgb, var(--accent) 0%, transparent) 0,
      color-mix(in srgb, var(--accent) 0%, transparent) 25px,
      color-mix(in srgb, var(--accent) 18%, transparent) 25px,
      color-mix(in srgb, var(--accent) 18%, transparent) 26px
    ),
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 92%, transparent), color-mix(in srgb, var(--bg) 90%, transparent));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
  color: color-mix(in srgb, var(--ink) 82%, var(--muted));
  font-size: 13px;
  font-weight: 500;
  line-height: 1.56;
  letter-spacing: .002em;
  white-space: pre-wrap;
  word-break: break-word;
  overflow: auto;
  scrollbar-width: thin;
}
.r3-notes-node .notes-node-body.is-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: color-mix(in srgb, var(--muted) 86%, var(--ink));
  font-style: italic;
}
.r3-notes-node .notes-node-body::selection {
  background: color-mix(in srgb, var(--accent) 32%, transparent);
}
.r3-notes-node .notes-node-resize {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  cursor: nwse-resize;
  z-index: 2;
}
.r3-notes-node .notes-node-resize::before {
  content: '';
  position: absolute;
  inset: 2px;
  border-right: 2px solid color-mix(in srgb, var(--check-gold) 72%, transparent);
  border-bottom: 2px solid color-mix(in srgb, var(--check-gold) 72%, transparent);
  opacity: .9;
}
.r3-notes-node .notes-node-resize::after {
  content: '';
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 8px;
  height: 8px;
  border-right: 2px solid color-mix(in srgb, var(--check-gold) 42%, transparent);
  border-bottom: 2px solid color-mix(in srgb, var(--check-gold) 42%, transparent);
}
.r3-notes-node .notes-node-resize:hover::before,
.r3-notes-node .notes-node-resize:focus-visible::before {
  border-right-color: color-mix(in srgb, var(--accent) 78%, transparent);
  border-bottom-color: color-mix(in srgb, var(--accent) 78%, transparent);
}
html.r3-mobile-device .r3-notes-node {
  border-radius: 14px !important;
}
html.r3-mobile-device .r3-notes-node .notes-node-head {
  top: 10px;
  left: 10px;
  right: 10px;
  min-height: 40px;
  padding: 9px 12px 9px 38px;
}
html.r3-mobile-device .r3-notes-node .notes-node-title {
  font-size: 14px;
}
html.r3-mobile-device .r3-notes-node .notes-node-body {
  top: 62px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  padding: 12px 14px 14px;
  font-size: 12.5px;
  line-height: 1.5;
}

/* R3D3 BUILD: Flow View left control rail overhaul — 2026-10-14 */
.app-shell:not(.chat-mode) {
  grid-template-columns: 300px minmax(0, 1fr) 352px;
}

.app-shell:not(.chat-mode) .left-panel {
  --left-rail-line: color-mix(in srgb, var(--soft-line) 72%, var(--accent) 28%);
  --left-rail-card: color-mix(in srgb, var(--panel-2) 88%, var(--panel) 12%);
  --left-rail-card-open: color-mix(in srgb, var(--panel-2) 82%, var(--accent) 18%);
  --left-rail-control: color-mix(in srgb, var(--bg) 91%, var(--panel) 9%);
  --left-rail-hover: color-mix(in srgb, var(--panel-2) 78%, var(--accent) 22%);
  padding: 10px 9px 14px !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 97%, var(--accent) 3%), var(--panel));
  border-right-color: color-mix(in srgb, var(--soft-line) 70%, transparent) !important;
  scrollbar-gutter: stable;
}
.app-shell:not(.chat-mode) .left-panel::-webkit-scrollbar { width: 8px; }
.app-shell:not(.chat-mode) .left-panel::-webkit-scrollbar-track { background: transparent; }
.app-shell:not(.chat-mode) .left-panel::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: color-mix(in srgb, var(--soft-line) 68%, transparent);
  background-clip: padding-box;
}

.app-shell:not(.chat-mode) .left-panel .panel-section {
  margin: 0 0 10px !important;
  overflow: visible;
  border: 1px solid color-mix(in srgb, var(--left-rail-line) 74%, transparent) !important;
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel) 92%, transparent) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.12) !important;
}
.app-shell:not(.chat-mode) .left-panel .panel-section:last-child { margin-bottom: 0 !important; }
.app-shell:not(.chat-mode) .left-panel .panel-summary {
  min-height: 42px !important;
  margin: 0 !important;
  padding: 9px 10px !important;
  gap: 8px;
  border: 0 !important;
  border-radius: 11px !important;
  background: var(--left-rail-card) !important;
  color: color-mix(in srgb, var(--ink) 84%, var(--muted)) !important;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .095em;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
}
.app-shell:not(.chat-mode) .left-panel .panel-section[open] > .panel-summary {
  border-radius: 11px 11px 0 0 !important;
  background: var(--left-rail-card-open) !important;
  color: var(--ink) !important;
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--left-rail-line) 64%, transparent) !important;
}
.app-shell:not(.chat-mode) .left-panel .panel-summary:hover {
  background: color-mix(in srgb, var(--left-rail-card-open) 88%, var(--accent) 12%) !important;
}
.app-shell:not(.chat-mode) .left-panel .panel-summary-icon {
  width: 24px !important;
  height: 24px !important;
  display: inline-grid !important;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--soft-line)) !important;
  border-radius: 7px;
  background: color-mix(in srgb, var(--bg) 78%, var(--accent) 8%) !important;
  color: var(--accent) !important;
  font-size: 11px;
}
.app-shell:not(.chat-mode) .left-panel .panel-summary-chevron {
  margin-left: auto;
  color: var(--accent);
  opacity: .9;
}
.app-shell:not(.chat-mode) .left-panel .panel-content {
  display: grid;
  gap: 9px;
  padding: 11px !important;
  border-radius: 0 0 11px 11px;
  background: color-mix(in srgb, var(--panel) 97%, var(--bg) 3%);
}

/* Project: selector first, compact actions second, download as a clear footer action. */
.app-shell:not(.chat-mode) .left-panel .project-actions-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr 48px !important;
  gap: 7px !important;
  margin: 0 !important;
}
.app-shell:not(.chat-mode) .left-panel #projectSelect {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 42px;
  padding-inline: 12px;
  border-radius: 9px !important;
  background: var(--left-rail-control) !important;
  font-size: 13px;
}
.app-shell:not(.chat-mode) .left-panel .project-actions-row .ui-btn {
  min-width: 0;
  min-height: 38px !important;
  padding: 8px 9px;
  border-radius: 8px !important;
  font-size: 12px;
  font-weight: 750;
}
.app-shell:not(.chat-mode) .left-panel #deleteProjectBtn {
  color: color-mix(in srgb, var(--danger) 86%, var(--ink));
  background: color-mix(in srgb, var(--panel-2) 90%, var(--danger) 10%);
}
.app-shell:not(.chat-mode) .left-panel .download-row { margin: 0 !important; }
.app-shell:not(.chat-mode) .left-panel #downloadProjectBtn {
  min-height: 39px !important;
  border-radius: 8px !important;
  border-color: color-mix(in srgb, var(--accent) 28%, var(--left-rail-line));
  background: color-mix(in srgb, var(--accent) 7%, var(--panel-2));
  font-weight: 760;
}

/* Prompt editor: cleaner empty/active state and balanced action toolbar. */
.app-shell:not(.chat-mode) .left-panel .global-prompt-section .panel-content { gap: 8px; }
.app-shell:not(.chat-mode) .left-panel #globalPrompt {
  min-height: 126px !important;
  max-height: 260px;
  resize: vertical;
  padding: 11px 12px !important;
  border-radius: 10px !important;
  border-color: color-mix(in srgb, var(--soft-line) 84%, var(--accent) 16%) !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 96%, var(--accent) 4%), var(--bg)) !important;
  color: var(--ink);
  font-size: 12.5px !important;
  line-height: 1.5 !important;
}
.app-shell:not(.chat-mode) .left-panel #globalPrompt::placeholder {
  color: color-mix(in srgb, var(--muted) 82%, var(--accent) 18%);
}
.app-shell:not(.chat-mode) .left-panel .global-prompt-section.needs-node #globalPrompt {
  border-style: dashed !important;
  border-color: color-mix(in srgb, var(--accent) 44%, var(--soft-line)) !important;
  background: color-mix(in srgb, var(--bg) 94%, var(--accent) 6%) !important;
}
.app-shell:not(.chat-mode) .left-panel .global-prompt-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px !important;
  margin: 0 !important;
}
.app-shell:not(.chat-mode) .left-panel .prompt-action-btn {
  min-width: 0;
  min-height: 38px !important;
  padding: 8px 9px !important;
  border-radius: 8px !important;
  font-size: 11.5px;
  font-weight: 760;
}
.app-shell:not(.chat-mode) .left-panel .prompt-action-icon {
  width: 21px;
  height: 21px;
  display: inline-grid;
  place-items: center;
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 10%, var(--bg));
}
.app-shell:not(.chat-mode) .left-panel .prompt-action-btn:disabled {
  opacity: .46;
  filter: saturate(.65);
}

/* Node palette: categorized, icon-led tiles using the existing node symbols. */
.app-shell:not(.chat-mode) .left-panel .node-palette-section > .panel-content {
  padding: 9px !important;
}
.app-shell:not(.chat-mode) .left-panel .node-palette-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 12px !important;
  margin: 0;
}
.app-shell:not(.chat-mode) .left-panel .node-palette-group {
  min-width: 0;
  display: grid;
  gap: 7px;
  padding: 0 0 11px;
  border-bottom: 1px solid color-mix(in srgb, var(--left-rail-line) 54%, transparent);
}
.app-shell:not(.chat-mode) .left-panel .node-palette-group:last-child {
  padding-bottom: 1px;
  border-bottom: 0;
}
.app-shell:not(.chat-mode) .left-panel .node-palette-group-head {
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 0 2px;
}
.app-shell:not(.chat-mode) .left-panel .node-palette-group-head > span {
  color: color-mix(in srgb, var(--ink) 84%, var(--accent));
  font-size: 9.5px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.app-shell:not(.chat-mode) .left-panel .node-palette-group-head > small {
  min-width: 0;
  color: var(--muted);
  font-size: 8.5px;
  line-height: 1.2;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-shell:not(.chat-mode) .left-panel .node-palette-group-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
.app-shell:not(.chat-mode) .left-panel .node-palette {
  --palette-accent: var(--accent);
  position: relative;
  min-width: 0;
  min-height: 68px !important;
  display: grid !important;
  grid-template-rows: 27px auto !important;
  place-items: center;
  align-content: center;
  gap: 5px !important;
  padding: 9px 7px 8px !important;
  overflow: visible;
  border: 1px solid color-mix(in srgb, var(--palette-accent) 24%, var(--left-rail-line)) !important;
  border-radius: 9px !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--panel-2) 93%, var(--palette-accent) 7%), color-mix(in srgb, var(--panel) 96%, var(--palette-accent) 4%)) !important;
  color: color-mix(in srgb, var(--ink) 92%, var(--muted));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03) !important;
  font-size: 11px;
  font-weight: 760;
  line-height: 1.16;
  text-align: center;
  white-space: normal;
  transition: border-color .15s ease, background .15s ease, transform .15s ease, color .15s ease !important;
}
.app-shell:not(.chat-mode) .left-panel .node-palette::before,
.app-shell:not(.chat-mode) .left-panel .node-palette-start > span {
  width: 27px !important;
  height: 27px !important;
  margin: 0 !important;
  display: grid !important;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--palette-accent) 30%, var(--soft-line)) !important;
  border-radius: 7px;
  background: color-mix(in srgb, var(--bg) 78%, var(--palette-accent) 12%) !important;
  color: var(--palette-accent) !important;
  font-size: 12px !important;
  font-weight: 900;
  line-height: 1;
  text-shadow: none !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}
.app-shell:not(.chat-mode) .left-panel .node-palette:hover,
.app-shell:not(.chat-mode) .left-panel .node-palette:focus-visible {
  transform: translateY(-1px) !important;
  border-color: color-mix(in srgb, var(--palette-accent) 68%, var(--left-rail-line)) !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--panel-2) 84%, var(--palette-accent) 16%), color-mix(in srgb, var(--panel) 92%, var(--palette-accent) 8%)) !important;
  color: var(--ink);
  outline: none;
}
.app-shell:not(.chat-mode) .left-panel .node-palette:active { transform: translateY(0) scale(.985) !important; }
.app-shell:not(.chat-mode) .left-panel .node-palette.is-locked:hover { transform: none !important; }

.app-shell:not(.chat-mode) .left-panel .node-palette-start {
  --palette-accent: var(--accent);
  grid-column: 1 / -1 !important;
  min-height: 48px !important;
  grid-template-columns: 28px auto !important;
  grid-template-rows: 1fr !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 8px 11px !important;
}
.app-shell:not(.chat-mode) .left-panel .node-palette-start::before { content: none !important; }
.app-shell:not(.chat-mode) .left-panel .node-palette-start > b { font: inherit; }
.app-shell:not(.chat-mode) .left-panel .node-palette[data-node-type="Agent"] { --palette-accent: var(--check-gold); }
.app-shell:not(.chat-mode) .left-panel .node-palette[data-node-type="Output"] { --palette-accent: var(--ok); }
.app-shell:not(.chat-mode) .left-panel .node-palette[data-node-type="Verifier"] { --palette-accent: color-mix(in srgb, var(--ok) 70%, var(--accent)); }
.app-shell:not(.chat-mode) .left-panel .node-palette[data-node-type="Checklist"] { --palette-accent: var(--check-gold); }
.app-shell:not(.chat-mode) .left-panel .node-palette[data-node-type="Oracle"] { --palette-accent: #8fb7ff; }
.app-shell:not(.chat-mode) .left-panel .node-palette[data-node-type="TaskSplitter"],
.app-shell:not(.chat-mode) .left-panel .node-palette[data-node-type="Merge"] { --palette-accent: color-mix(in srgb, var(--accent) 72%, #8fb7ff); }

/* Preserve the existing icon language and fill the types that previously fell back to the generic diamond. */
.app-shell:not(.chat-mode) .left-panel .node-palette[data-node-type="Agent"]::before { content: '◉' !important; }
.app-shell:not(.chat-mode) .left-panel .node-palette[data-node-type="Router"]::before { content: '◇' !important; }
.app-shell:not(.chat-mode) .left-panel .node-palette[data-node-type="TrueFalse"]::before { content: '◇' !important; }
.app-shell:not(.chat-mode) .left-panel .node-palette[data-node-type="Switch"]::before { content: '◇' !important; }
.app-shell:not(.chat-mode) .left-panel .node-palette[data-node-type="Timeout"]::before { content: '⌛' !important; font-size: 11px !important; }
.app-shell:not(.chat-mode) .left-panel .node-palette[data-node-type="Http"]::before { content: '◇' !important; }
.app-shell:not(.chat-mode) .left-panel .node-palette[data-node-type="UserInput"]::before { content: '⌨' !important; }
.app-shell:not(.chat-mode) .left-panel .node-palette[data-node-type="UserYesNo"]::before { content: 'Y/N' !important; font-size: 9px !important; }
.app-shell:not(.chat-mode) .left-panel .node-palette[data-node-type="Output"]::before { content: '▣' !important; }
.app-shell:not(.chat-mode) .left-panel .node-palette[data-node-type="Verifier"]::before { content: '◇' !important; }
.app-shell:not(.chat-mode) .left-panel .node-palette[data-node-type="Checklist"]::before { content: '☑' !important; }
.app-shell:not(.chat-mode) .left-panel .node-palette[data-node-type="Image"]::before { content: '▧' !important; }
.app-shell:not(.chat-mode) .left-panel .node-palette[data-node-type="Video"]::before { content: '▻' !important; }
.app-shell:not(.chat-mode) .left-panel .node-palette[data-node-type="ImageOut"]::before { content: '▧+' !important; font-size: 10px !important; }
.app-shell:not(.chat-mode) .left-panel .node-palette[data-node-type="VideoOut"]::before { content: '▻+' !important; font-size: 10px !important; }
.app-shell:not(.chat-mode) .left-panel .node-palette[data-node-type="AudioOut"]::before { content: '≋' !important; }
.app-shell:not(.chat-mode) .left-panel .node-palette[data-node-type="Oracle"]::before { content: '◉' !important; }
.app-shell:not(.chat-mode) .left-panel .node-palette[data-node-type="TaskSplitter"]::before { content: '↯' !important; }
.app-shell:not(.chat-mode) .left-panel .node-palette[data-node-type="Merge"]::before { content: '⇄' !important; }

.app-shell:not(.chat-mode) .left-panel .node-palette[data-node-type="Agent"]::after {
  content: 'V2' !important;
  top: 6px !important;
  right: 6px !important;
  padding: 2px 4px !important;
  border-radius: 4px !important;
  border-color: color-mix(in srgb, var(--check-gold) 64%, var(--soft-line)) !important;
  background: color-mix(in srgb, var(--panel) 92%, var(--check-gold) 8%) !important;
  color: var(--check-gold) !important;
  box-shadow: none !important;
  font-size: 7.5px !important;
  line-height: 1 !important;
}
.app-shell:not(.chat-mode) .left-panel .node-palette.pro-only::after {
  top: 5px;
  right: 5px;
  padding: 2px 5px;
  border: 1px solid color-mix(in srgb, var(--accent) 52%, var(--soft-line));
  border-radius: 4px;
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: none;
  font-size: 7.5px;
  line-height: 1.1;
}

/* Files: compact hierarchy, clear status chips, consistent icon actions. */
.app-shell:not(.chat-mode) .left-panel .file-section > .panel-summary {
  grid-template-columns: 24px minmax(0, auto) auto minmax(48px, 1fr) auto !important;
}
.app-shell:not(.chat-mode) .left-panel .section-usage-badge {
  min-width: 0;
  max-width: 84px;
  padding: 3px 6px;
  border-radius: 999px;
  border-color: color-mix(in srgb, var(--accent) 30%, var(--soft-line));
  background: color-mix(in srgb, var(--bg) 78%, var(--accent) 7%);
  font-size: 8px;
  letter-spacing: .06em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app-shell:not(.chat-mode) .left-panel .file-project-view-btn {
  min-width: 48px;
  height: 27px;
  min-height: 27px !important;
  padding: 4px 7px;
  border-radius: 7px !important;
  background: color-mix(in srgb, var(--accent) 8%, var(--panel-2));
  font-size: 9px;
}
.app-shell:not(.chat-mode) .left-panel .file-list {
  display: grid;
  gap: 4px !important;
  max-height: 390px !important;
  margin: 0 !important;
  padding: 0 2px 0 0 !important;
  scrollbar-gutter: stable;
}
.app-shell:not(.chat-mode) .left-panel .file-item {
  min-height: 38px !important;
  grid-template-columns: minmax(70px, 1fr) auto !important;
  gap: 5px !important;
  padding: 5px 5px 5px 8px !important;
  border: 1px solid color-mix(in srgb, var(--left-rail-line) 44%, transparent) !important;
  border-radius: 8px !important;
  background: color-mix(in srgb, var(--bg) 78%, var(--panel) 22%) !important;
}
.app-shell:not(.chat-mode) .left-panel .file-item:hover,
.app-shell:not(.chat-mode) .left-panel .file-item:focus-within {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--left-rail-line)) !important;
  background: color-mix(in srgb, var(--panel-2) 78%, var(--accent) 8%) !important;
}
.app-shell:not(.chat-mode) .left-panel .file-name-wrap {
  min-width: 0;
  gap: 5px;
}
.app-shell:not(.chat-mode) .left-panel .file-name {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10.5px;
  line-height: 1.3;
}
.app-shell:not(.chat-mode) .left-panel .file-folder-row {
  min-height: 36px;
  margin: 2px 0 0;
  padding: 6px 6px 6px 8px;
  gap: 6px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--left-rail-line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel-2) 86%, var(--accent) 7%);
}
.app-shell:not(.chat-mode) .left-panel .file-folder-name {
  font-size: 10.5px;
  letter-spacing: .02em;
}
.app-shell:not(.chat-mode) .left-panel .file-folder-empty {
  max-width: 92px;
  padding: 3px 6px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--soft-line) 70%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  font-size: 7.5px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app-shell:not(.chat-mode) .left-panel .file-folder-row.is-agent-hidden .file-folder-empty {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--soft-line));
  color: color-mix(in srgb, var(--accent) 72%, var(--muted));
}
.app-shell:not(.chat-mode) .left-panel .file-actions { gap: 3px !important; }
.app-shell:not(.chat-mode) .left-panel .file-actions .file-mini {
  flex-basis: 27px !important;
  width: 27px !important;
  min-width: 27px !important;
  height: 27px !important;
  min-height: 27px !important;
  border-radius: 7px !important;
  background: color-mix(in srgb, var(--panel-2) 84%, transparent) !important;
}
.app-shell:not(.chat-mode) .left-panel .file-add-btn {
  min-height: 39px !important;
  margin: 1px 0 0 !important;
  border-radius: 8px !important;
  border-style: dashed !important;
  border-color: color-mix(in srgb, var(--accent) 36%, var(--left-rail-line)) !important;
  background: color-mix(in srgb, var(--accent) 5%, var(--panel-2)) !important;
  font-size: 11.5px;
  font-weight: 800;
}
.app-shell:not(.chat-mode) .left-panel .file-add-btn:hover,
.app-shell:not(.chat-mode) .left-panel .file-add-btn:focus-visible {
  border-style: solid !important;
  background: color-mix(in srgb, var(--accent) 12%, var(--panel-2)) !important;
}

/* Keep native tooltips useful without visual overflow in the rail. */
.app-shell:not(.chat-mode) .left-panel :is(button, select, textarea, .file-name, .file-folder-name):focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 54%, transparent);
  outline-offset: 1px;
}

@media (min-width: 981px) and (max-width: 1280px) {
  .app-shell:not(.chat-mode) { grid-template-columns: 276px minmax(0, 1fr) 306px; }
  .app-shell:not(.chat-mode) .left-panel .node-palette-group-head > small { display: none; }
}

@media (max-width: 980px) {
  html.r3-mobile-device .app-shell:not(.chat-mode) .left-panel {
    padding: 8px !important;
  }
  html.r3-mobile-device .app-shell:not(.chat-mode) .left-panel .panel-section.r3-mobile-active-sheet {
    border-radius: 13px !important;
  }
  html.r3-mobile-device .app-shell:not(.chat-mode) .left-panel .panel-summary {
    min-height: 46px !important;
  }
  html.r3-mobile-device .app-shell:not(.chat-mode) .left-panel .panel-content {
    padding: 10px !important;
  }
  html.r3-mobile-device .app-shell:not(.chat-mode) .left-panel .node-palette-group-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  html.r3-mobile-device .app-shell:not(.chat-mode) .left-panel .node-palette {
    min-height: 72px !important;
    padding: 10px 7px 8px !important;
  }
  html.r3-mobile-device .app-shell:not(.chat-mode) .left-panel .node-palette-start {
    min-height: 50px !important;
  }
  html.r3-mobile-device .app-shell:not(.chat-mode) .left-panel .file-list {
    max-height: min(42dvh, 420px) !important;
  }
}

@media (max-width: 380px) {
  html.r3-mobile-device .app-shell:not(.chat-mode) .left-panel .node-palette-group-head > small { display: none; }
  html.r3-mobile-device .app-shell:not(.chat-mode) .left-panel .project-actions-row {
    grid-template-columns: 1fr 1fr 46px !important;
  }
}

/* R3D3 BUILD: left rail production visual pass — 2026-10-14
   Flatter geometry, restrained surfaces, tighter typography, fewer decorative effects. */
.app-shell:not(.chat-mode) .left-panel {
  --rail-radius: 3px;
  --rail-radius-sm: 2px;
  --rail-edge: color-mix(in srgb, var(--soft-line) 72%, transparent);
  --rail-edge-strong: color-mix(in srgb, var(--accent) 38%, var(--soft-line));
  --rail-surface: color-mix(in srgb, var(--panel) 97%, var(--bg) 3%);
  --rail-surface-2: color-mix(in srgb, var(--panel-2) 88%, var(--panel) 12%);
  --rail-surface-hover: color-mix(in srgb, var(--panel-2) 84%, var(--accent) 5%);
  background: var(--rail-surface) !important;
  border-right: 1px solid var(--rail-edge) !important;
  box-shadow: none !important;
}

.app-shell:not(.chat-mode) .left-panel .panel-section {
  border: 0 !important;
  border-bottom: 1px solid var(--rail-edge) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.app-shell:not(.chat-mode) .left-panel .panel-section:first-child {
  border-top: 1px solid var(--rail-edge) !important;
}
.app-shell:not(.chat-mode) .left-panel .panel-summary {
  min-height: 38px !important;
  padding: 0 8px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: color-mix(in srgb, var(--ink) 90%, var(--muted)) !important;
  transition: background .12s ease, color .12s ease !important;
}
.app-shell:not(.chat-mode) .left-panel .panel-summary:hover,
.app-shell:not(.chat-mode) .left-panel .panel-summary:focus-visible {
  background: color-mix(in srgb, var(--accent) 5%, transparent) !important;
  color: var(--ink) !important;
  outline: none !important;
}
.app-shell:not(.chat-mode) .left-panel .panel-summary-icon {
  width: 18px !important;
  min-width: 18px !important;
  height: 18px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--accent) !important;
  font-size: 10px !important;
}
.app-shell:not(.chat-mode) .left-panel .panel-summary > span:nth-child(2) {
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
}
.app-shell:not(.chat-mode) .left-panel .panel-summary-chevron {
  opacity: .75;
  font-size: 10px !important;
}
.app-shell:not(.chat-mode) .left-panel .panel-content {
  gap: 8px !important;
  padding: 8px 8px 10px !important;
  background: transparent !important;
}

/* Controls: squared-off and quiet. */
.app-shell:not(.chat-mode) .left-panel :is(.ui-btn, select, textarea, input) {
  border-radius: var(--rail-radius) !important;
  box-shadow: none !important;
}
.app-shell:not(.chat-mode) .left-panel .ui-btn {
  border-color: var(--rail-edge) !important;
  background: var(--rail-surface-2) !important;
  transition: background .12s ease, border-color .12s ease, color .12s ease !important;
}
.app-shell:not(.chat-mode) .left-panel .ui-btn:hover,
.app-shell:not(.chat-mode) .left-panel .ui-btn:focus-visible {
  border-color: var(--rail-edge-strong) !important;
  background: var(--rail-surface-hover) !important;
  transform: none !important;
  outline: none !important;
}
.app-shell:not(.chat-mode) .left-panel .ui-btn:active {
  transform: none !important;
  background: color-mix(in srgb, var(--panel-2) 78%, var(--accent) 8%) !important;
}

/* Project */
.app-shell:not(.chat-mode) .left-panel #projectSelect {
  min-height: 38px !important;
  padding-inline: 10px !important;
  border-radius: var(--rail-radius) !important;
  border-color: var(--rail-edge) !important;
  background: var(--bg) !important;
  font-size: 12px !important;
}
.app-shell:not(.chat-mode) .left-panel .project-actions-row {
  gap: 5px !important;
}
.app-shell:not(.chat-mode) .left-panel .project-actions-row .ui-btn,
.app-shell:not(.chat-mode) .left-panel #downloadProjectBtn {
  min-height: 34px !important;
  border-radius: var(--rail-radius) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}
.app-shell:not(.chat-mode) .left-panel #downloadProjectBtn {
  background: var(--rail-surface-2) !important;
  border-color: var(--rail-edge) !important;
}
.app-shell:not(.chat-mode) .left-panel #deleteProjectBtn {
  background: transparent !important;
  border-color: color-mix(in srgb, var(--danger) 42%, var(--rail-edge)) !important;
  color: color-mix(in srgb, var(--danger) 84%, var(--ink)) !important;
}

/* Prompt editor */
.app-shell:not(.chat-mode) .left-panel #globalPrompt {
  min-height: 118px !important;
  padding: 10px !important;
  border-radius: var(--rail-radius) !important;
  border: 1px solid var(--rail-edge) !important;
  background: var(--bg) !important;
  box-shadow: none !important;
  font-size: 12px !important;
  line-height: 1.46 !important;
}
.app-shell:not(.chat-mode) .left-panel #globalPrompt:focus {
  border-color: var(--rail-edge-strong) !important;
  outline: 1px solid color-mix(in srgb, var(--accent) 16%, transparent) !important;
  outline-offset: 0 !important;
}
.app-shell:not(.chat-mode) .left-panel .global-prompt-section.needs-node #globalPrompt {
  border-style: solid !important;
  border-color: var(--rail-edge) !important;
  background: color-mix(in srgb, var(--bg) 96%, var(--accent) 2%) !important;
}
.app-shell:not(.chat-mode) .left-panel .global-prompt-actions {
  gap: 5px !important;
}
.app-shell:not(.chat-mode) .left-panel .prompt-action-btn {
  min-height: 34px !important;
  padding: 7px 8px !important;
  border-radius: var(--rail-radius) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
}
.app-shell:not(.chat-mode) .left-panel .prompt-action-icon {
  width: 18px !important;
  height: 18px !important;
  border-radius: var(--rail-radius-sm) !important;
  background: transparent !important;
}

/* Node palette: modern tool-palette treatment rather than cards. */
.app-shell:not(.chat-mode) .left-panel .node-palette-section > .panel-content {
  padding: 7px 8px 10px !important;
}
.app-shell:not(.chat-mode) .left-panel .node-palette-grid {
  gap: 13px !important;
}
.app-shell:not(.chat-mode) .left-panel .node-palette-group {
  gap: 6px !important;
  padding-bottom: 12px !important;
  border-bottom-color: color-mix(in srgb, var(--rail-edge) 70%, transparent) !important;
}
.app-shell:not(.chat-mode) .left-panel .node-palette-group-head {
  padding: 0 1px 2px !important;
}
.app-shell:not(.chat-mode) .left-panel .node-palette-group-head > span {
  color: var(--muted) !important;
  font-size: 8.5px !important;
  font-weight: 800 !important;
  letter-spacing: .13em !important;
}
.app-shell:not(.chat-mode) .left-panel .node-palette-group-head > small {
  color: color-mix(in srgb, var(--muted) 76%, transparent) !important;
  font-size: 8px !important;
}
.app-shell:not(.chat-mode) .left-panel .node-palette-group-grid {
  gap: 5px !important;
}
.app-shell:not(.chat-mode) .left-panel .node-palette {
  min-height: 58px !important;
  grid-template-rows: 22px auto !important;
  gap: 4px !important;
  padding: 7px 6px 6px !important;
  border: 1px solid var(--rail-edge) !important;
  border-radius: var(--rail-radius) !important;
  background: var(--rail-surface-2) !important;
  box-shadow: none !important;
  color: color-mix(in srgb, var(--ink) 90%, var(--muted)) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  transition: background .12s ease, border-color .12s ease, color .12s ease !important;
}
.app-shell:not(.chat-mode) .left-panel .node-palette::before,
.app-shell:not(.chat-mode) .left-panel .node-palette-start > span {
  width: 22px !important;
  height: 22px !important;
  border: 0 !important;
  border-radius: var(--rail-radius-sm) !important;
  background: color-mix(in srgb, var(--palette-accent) 8%, var(--bg)) !important;
  box-shadow: none !important;
  color: color-mix(in srgb, var(--palette-accent) 86%, var(--ink)) !important;
  font-size: 11px !important;
}
.app-shell:not(.chat-mode) .left-panel .node-palette:hover,
.app-shell:not(.chat-mode) .left-panel .node-palette:focus-visible {
  transform: none !important;
  border-color: color-mix(in srgb, var(--palette-accent) 46%, var(--rail-edge)) !important;
  background: color-mix(in srgb, var(--rail-surface-2) 92%, var(--palette-accent) 8%) !important;
  color: var(--ink) !important;
  outline: 1px solid color-mix(in srgb, var(--palette-accent) 14%, transparent) !important;
  outline-offset: -1px !important;
}
.app-shell:not(.chat-mode) .left-panel .node-palette:active {
  transform: none !important;
  background: color-mix(in srgb, var(--rail-surface-2) 86%, var(--palette-accent) 12%) !important;
}
.app-shell:not(.chat-mode) .left-panel .node-palette-start {
  min-height: 38px !important;
  grid-template-columns: 22px auto !important;
  gap: 7px !important;
  padding: 6px 8px !important;
  justify-content: start !important;
}
.app-shell:not(.chat-mode) .left-panel .node-palette[data-node-type="Agent"]::after,
.app-shell:not(.chat-mode) .left-panel .node-palette.pro-only::after {
  top: 4px !important;
  right: 4px !important;
  padding: 2px 4px !important;
  border-radius: 1px !important;
  box-shadow: none !important;
  font-size: 7px !important;
  letter-spacing: .05em !important;
}
.app-shell:not(.chat-mode) .left-panel .node-palette.pro-only::after {
  background: color-mix(in srgb, var(--accent) 86%, var(--panel)) !important;
}

/* Files: list/table feel, not cards. */
.app-shell:not(.chat-mode) .left-panel .section-usage-badge {
  padding: 2px 5px !important;
  border-radius: 1px !important;
  background: transparent !important;
  border-color: color-mix(in srgb, var(--accent) 34%, var(--rail-edge)) !important;
  font-size: 7.5px !important;
}
.app-shell:not(.chat-mode) .left-panel .file-project-view-btn {
  min-width: 44px !important;
  height: 25px !important;
  min-height: 25px !important;
  border-radius: var(--rail-radius) !important;
  background: transparent !important;
}
.app-shell:not(.chat-mode) .left-panel .file-list {
  gap: 0 !important;
  padding-right: 0 !important;
}
.app-shell:not(.chat-mode) .left-panel .file-item,
.app-shell:not(.chat-mode) .left-panel .file-folder-row {
  min-height: 34px !important;
  margin: 0 !important;
  padding: 5px 4px 5px 6px !important;
  border: 0 !important;
  border-bottom: 1px solid color-mix(in srgb, var(--rail-edge) 66%, transparent) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.app-shell:not(.chat-mode) .left-panel .file-item:first-child,
.app-shell:not(.chat-mode) .left-panel .file-folder-row:first-child {
  border-top: 1px solid color-mix(in srgb, var(--rail-edge) 66%, transparent) !important;
}
.app-shell:not(.chat-mode) .left-panel .file-item:hover,
.app-shell:not(.chat-mode) .left-panel .file-item:focus-within,
.app-shell:not(.chat-mode) .left-panel .file-folder-row:hover,
.app-shell:not(.chat-mode) .left-panel .file-folder-row:focus-within {
  border-color: color-mix(in srgb, var(--rail-edge) 84%, transparent) !important;
  background: color-mix(in srgb, var(--accent) 4%, transparent) !important;
}
.app-shell:not(.chat-mode) .left-panel .file-name,
.app-shell:not(.chat-mode) .left-panel .file-folder-name {
  font-size: 10px !important;
  font-weight: 650 !important;
}
.app-shell:not(.chat-mode) .left-panel .file-folder-empty {
  max-width: 90px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--muted) !important;
  font-size: 7px !important;
  font-weight: 700 !important;
  letter-spacing: .05em !important;
}
.app-shell:not(.chat-mode) .left-panel .file-folder-row.is-agent-hidden .file-folder-empty {
  border: 0 !important;
  color: color-mix(in srgb, var(--accent) 64%, var(--muted)) !important;
}
.app-shell:not(.chat-mode) .left-panel .file-actions {
  gap: 2px !important;
}
.app-shell:not(.chat-mode) .left-panel .file-actions .file-mini {
  flex-basis: 24px !important;
  width: 24px !important;
  min-width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
  border-radius: var(--rail-radius-sm) !important;
  border-color: transparent !important;
  background: transparent !important;
}
.app-shell:not(.chat-mode) .left-panel .file-actions .file-mini:hover,
.app-shell:not(.chat-mode) .left-panel .file-actions .file-mini:focus-visible {
  border-color: var(--rail-edge) !important;
  background: var(--rail-surface-2) !important;
}
.app-shell:not(.chat-mode) .left-panel .file-add-btn {
  min-height: 34px !important;
  margin-top: 6px !important;
  border-radius: var(--rail-radius) !important;
  border-style: solid !important;
  border-color: var(--rail-edge) !important;
  background: var(--rail-surface-2) !important;
  font-size: 10.5px !important;
  font-weight: 750 !important;
}
.app-shell:not(.chat-mode) .left-panel .file-add-btn:hover,
.app-shell:not(.chat-mode) .left-panel .file-add-btn:focus-visible {
  border-style: solid !important;
  border-color: var(--rail-edge-strong) !important;
  background: var(--rail-surface-hover) !important;
}

/* Avoid decorative pill language throughout this rail. */
.app-shell:not(.chat-mode) .left-panel :is(.section-usage-badge, .node-palette.pro-only::after, .node-palette[data-node-type="Agent"]::after) {
  border-radius: 1px !important;
}

@media (max-width: 980px) {
  html.r3-mobile-device .app-shell:not(.chat-mode) .left-panel .panel-section.r3-mobile-active-sheet {
    border-radius: var(--rail-radius) !important;
  }
  html.r3-mobile-device .app-shell:not(.chat-mode) .left-panel .panel-summary {
    min-height: 42px !important;
  }
  html.r3-mobile-device .app-shell:not(.chat-mode) .left-panel .panel-content {
    padding: 8px !important;
  }
  html.r3-mobile-device .app-shell:not(.chat-mode) .left-panel .node-palette {
    min-height: 60px !important;
    padding: 7px 6px 6px !important;
  }
  html.r3-mobile-device .app-shell:not(.chat-mode) .left-panel .node-palette-start {
    min-height: 40px !important;
  }
}

/* R3D3 BUILD: Chat View left rail production visual pass — 2026-10-14
   Mirrors the Flow View rail: flat geometry, restrained surfaces, compact typography. */
.app-shell.chat-mode .r3-chat-sidebar {
  --rail-radius: 3px;
  --rail-radius-sm: 2px;
  --rail-edge: color-mix(in srgb, var(--soft-line) 72%, transparent);
  --rail-edge-strong: color-mix(in srgb, var(--accent) 38%, var(--soft-line));
  --rail-surface: color-mix(in srgb, var(--panel) 97%, var(--bg) 3%);
  --rail-surface-2: color-mix(in srgb, var(--panel-2) 88%, var(--panel) 12%);
  --rail-surface-hover: color-mix(in srgb, var(--panel-2) 84%, var(--accent) 5%);
  padding: 0 8px 12px !important;
  gap: 0 !important;
  background: var(--rail-surface) !important;
  border-right: 1px solid var(--rail-edge) !important;
  box-shadow: none !important;
}

/* Workspace / project block */
.app-shell.chat-mode .r3-chat-brand {
  display: grid !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 13px 8px 11px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--rail-edge) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.app-shell.chat-mode .r3-chat-brand-kicker {
  margin: 0 !important;
  color: var(--accent) !important;
  font-size: 8.5px !important;
  font-weight: 850 !important;
  letter-spacing: .13em !important;
  line-height: 1.1 !important;
}
.app-shell.chat-mode .r3-chat-brand > strong {
  margin: -3px 0 2px !important;
  color: var(--ink) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: .015em !important;
  line-height: 1.2 !important;
}
.app-shell.chat-mode .r3-chat-project-picker {
  display: grid !important;
  gap: 5px !important;
  margin: 0 !important;
}
.app-shell.chat-mode .r3-chat-project-picker > span {
  color: var(--muted) !important;
  font-size: 8.5px !important;
  font-weight: 800 !important;
  letter-spacing: .11em !important;
  line-height: 1.1 !important;
  text-transform: uppercase !important;
}
.app-shell.chat-mode #chatProjectSelect {
  min-height: 38px !important;
  padding: 7px 10px !important;
  border: 1px solid var(--rail-edge) !important;
  border-radius: var(--rail-radius) !important;
  background: var(--bg) !important;
  box-shadow: none !important;
  color: var(--ink) !important;
  font-size: 11.5px !important;
  font-weight: 650 !important;
}
.app-shell.chat-mode #chatProjectSelect:hover,
.app-shell.chat-mode #chatProjectSelect:focus {
  border-color: var(--rail-edge-strong) !important;
  outline: none !important;
}
.app-shell.chat-mode .r3-chat-download-project {
  min-height: 34px !important;
  padding: 7px 9px !important;
  border: 1px solid var(--rail-edge) !important;
  border-radius: var(--rail-radius) !important;
  background: var(--rail-surface-2) !important;
  box-shadow: none !important;
  color: color-mix(in srgb, var(--ink) 92%, var(--muted)) !important;
  font-size: 10.5px !important;
  font-weight: 750 !important;
}
.app-shell.chat-mode .r3-chat-download-project:hover,
.app-shell.chat-mode .r3-chat-download-project:focus-visible {
  border-color: var(--rail-edge-strong) !important;
  background: var(--rail-surface-hover) !important;
  transform: none !important;
  outline: none !important;
}

/* Sections */
.app-shell.chat-mode .r3-chat-panel {
  margin: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--rail-edge) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.app-shell.chat-mode .r3-chat-panel-head {
  min-height: 40px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
.app-shell.chat-mode .r3-chat-panel-toggle {
  min-height: 40px !important;
  padding: 7px 6px !important;
  gap: 7px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: color-mix(in srgb, var(--ink) 91%, var(--muted)) !important;
  transition: background .12s ease, color .12s ease !important;
}
.app-shell.chat-mode .r3-chat-panel-toggle:hover,
.app-shell.chat-mode .r3-chat-panel-toggle:focus-visible {
  background: color-mix(in srgb, var(--accent) 5%, transparent) !important;
  color: var(--ink) !important;
  outline: none !important;
}
.app-shell.chat-mode .r3-chat-panel-title {
  gap: 1px !important;
}
.app-shell.chat-mode .r3-chat-panel-title b {
  color: var(--ink) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .045em !important;
  line-height: 1.2 !important;
}
.app-shell.chat-mode .r3-chat-panel-title small {
  color: var(--muted) !important;
  font-size: 8.5px !important;
  font-weight: 550 !important;
  letter-spacing: .015em !important;
  line-height: 1.2 !important;
}
.app-shell.chat-mode .r3-chat-panel-toggle i {
  margin-left: auto !important;
  color: var(--accent) !important;
  font-size: 10px !important;
  opacity: .78 !important;
}
.app-shell.chat-mode .r3-chat-panel-head-actions {
  gap: 4px !important;
  padding-right: 5px !important;
}
.app-shell.chat-mode .r3-chat-panel-head-actions .ui-btn,
.app-shell.chat-mode .r3-chat-panel-head > .ui-btn {
  min-height: 26px !important;
  height: 26px !important;
  margin-right: 4px !important;
  padding: 4px 7px !important;
  border: 1px solid var(--rail-edge) !important;
  border-radius: var(--rail-radius) !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 9px !important;
  font-weight: 750 !important;
}
.app-shell.chat-mode .r3-chat-panel-head-actions .ui-btn:hover,
.app-shell.chat-mode .r3-chat-panel-head-actions .ui-btn:focus-visible,
.app-shell.chat-mode .r3-chat-panel-head > .ui-btn:hover,
.app-shell.chat-mode .r3-chat-panel-head > .ui-btn:focus-visible {
  border-color: var(--rail-edge-strong) !important;
  background: var(--rail-surface-hover) !important;
  transform: none !important;
  outline: none !important;
}
.app-shell.chat-mode .r3-chat-panel-body {
  gap: 8px !important;
  padding: 7px 7px 11px !important;
  background: transparent !important;
}

/* Form language matches Flow View rail. */
.app-shell.chat-mode .r3-chat-panel label:not(.compact-check) {
  gap: 5px !important;
  color: color-mix(in srgb, var(--muted) 92%, var(--ink)) !important;
  font-size: 8.5px !important;
  font-weight: 750 !important;
  letter-spacing: .09em !important;
  line-height: 1.15 !important;
  text-transform: uppercase !important;
}
.app-shell.chat-mode .r3-chat-panel :is(input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea) {
  min-height: 36px !important;
  padding: 7px 9px !important;
  border: 1px solid var(--rail-edge) !important;
  border-radius: var(--rail-radius) !important;
  background: var(--bg) !important;
  box-shadow: none !important;
  color: var(--ink) !important;
  font-size: 11px !important;
  font-weight: 550 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}
.app-shell.chat-mode .r3-chat-panel :is(input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea):hover {
  border-color: color-mix(in srgb, var(--rail-edge-strong) 66%, var(--rail-edge)) !important;
}
.app-shell.chat-mode .r3-chat-panel :is(input, select, textarea):focus {
  border-color: var(--rail-edge-strong) !important;
  outline: 1px solid color-mix(in srgb, var(--accent) 15%, transparent) !important;
  outline-offset: 0 !important;
}
.app-shell.chat-mode .r3-chat-panel :is(input, select, textarea):disabled {
  opacity: .58 !important;
  cursor: not-allowed !important;
}
.app-shell.chat-mode .r3-chat-panel .field-help {
  margin-top: 0 !important;
  color: var(--muted) !important;
  font-size: 8.5px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}
.app-shell.chat-mode .r3-chat-panel .compact-check {
  min-height: 24px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: color-mix(in srgb, var(--ink) 82%, var(--muted)) !important;
  font-size: 9.5px !important;
  font-weight: 600 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}
.app-shell.chat-mode .r3-chat-panel .compact-check input[type="checkbox"] {
  width: 13px !important;
  height: 13px !important;
  min-width: 13px !important;
  margin: 0 !important;
  border-radius: 2px !important;
}

/* Run section */
.app-shell.chat-mode .r3-chat-run-status {
  min-height: 0 !important;
  padding: 7px 8px !important;
  border: 1px solid color-mix(in srgb, var(--rail-edge) 78%, transparent) !important;
  border-radius: var(--rail-radius) !important;
  background: color-mix(in srgb, var(--bg) 92%, var(--panel) 8%) !important;
  box-shadow: none !important;
  color: var(--muted) !important;
  font-size: 9px !important;
  line-height: 1.35 !important;
}
.app-shell.chat-mode .r3-chat-run-settings .inline-row {
  gap: 5px !important;
}
.app-shell.chat-mode .r3-chat-run-settings .inline-row .ui-btn {
  min-height: 34px !important;
  padding: 7px 8px !important;
  border: 1px solid var(--rail-edge) !important;
  border-radius: var(--rail-radius) !important;
  background: var(--rail-surface-2) !important;
  box-shadow: none !important;
  font-size: 10px !important;
  font-weight: 750 !important;
}
.app-shell.chat-mode .r3-chat-run-settings .inline-row .ui-btn:hover,
.app-shell.chat-mode .r3-chat-run-settings .inline-row .ui-btn:focus-visible {
  border-color: var(--rail-edge-strong) !important;
  background: var(--rail-surface-hover) !important;
  transform: none !important;
  outline: none !important;
}
.app-shell.chat-mode #chatClearBtn {
  border-color: color-mix(in srgb, var(--danger) 46%, var(--rail-edge)) !important;
  background: transparent !important;
  color: color-mix(in srgb, var(--danger) 86%, var(--ink)) !important;
}
.app-shell.chat-mode #chatClearBtn:hover,
.app-shell.chat-mode #chatClearBtn:focus-visible {
  border-color: color-mix(in srgb, var(--danger) 68%, var(--rail-edge)) !important;
  background: color-mix(in srgb, var(--danger) 8%, transparent) !important;
}
.app-shell.chat-mode .r3-chat-hint {
  margin: 0 !important;
  padding: 1px 0 0 !important;
  color: var(--muted) !important;
  font-size: 9px !important;
  line-height: 1.4 !important;
}

/* Files */
.app-shell.chat-mode .section-usage-badge {
  padding: 2px 5px !important;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--rail-edge)) !important;
  border-radius: 1px !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 7.5px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
}
.app-shell.chat-mode .r3-chat-file-list {
  gap: 0 !important;
  padding-right: 0 !important;
}
.app-shell.chat-mode .r3-chat-file-list .file-item,
.app-shell.chat-mode .r3-chat-file-list .file-folder-row {
  min-height: 34px !important;
  margin: 0 !important;
  padding: 5px 4px 5px 6px !important;
  border: 0 !important;
  border-bottom: 1px solid color-mix(in srgb, var(--rail-edge) 66%, transparent) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.app-shell.chat-mode .r3-chat-file-list .file-item:first-child,
.app-shell.chat-mode .r3-chat-file-list .file-folder-row:first-child {
  border-top: 1px solid color-mix(in srgb, var(--rail-edge) 66%, transparent) !important;
}
.app-shell.chat-mode .r3-chat-file-list .file-item:hover,
.app-shell.chat-mode .r3-chat-file-list .file-item:focus-within,
.app-shell.chat-mode .r3-chat-file-list .file-folder-row:hover,
.app-shell.chat-mode .r3-chat-file-list .file-folder-row:focus-within {
  background: color-mix(in srgb, var(--accent) 4%, transparent) !important;
}
.app-shell.chat-mode .r3-chat-file-list .file-name,
.app-shell.chat-mode .r3-chat-file-list .file-folder-name {
  color: color-mix(in srgb, var(--ink) 91%, var(--muted)) !important;
  font-size: 10px !important;
  font-weight: 650 !important;
}
.app-shell.chat-mode .r3-chat-file-list .file-folder-empty {
  max-width: 92px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--muted) !important;
  font-size: 7px !important;
  font-weight: 700 !important;
  letter-spacing: .05em !important;
}
.app-shell.chat-mode .r3-chat-file-list .file-actions {
  gap: 2px !important;
}
.app-shell.chat-mode .r3-chat-file-list .file-actions .file-mini,
.app-shell.chat-mode .r3-chat-file-list .file-folder-delete {
  width: 24px !important;
  min-width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
  padding: 0 !important;
  border: 1px solid transparent !important;
  border-radius: var(--rail-radius-sm) !important;
  background: transparent !important;
  box-shadow: none !important;
}
.app-shell.chat-mode .r3-chat-file-list .file-actions .file-mini:hover,
.app-shell.chat-mode .r3-chat-file-list .file-actions .file-mini:focus-visible,
.app-shell.chat-mode .r3-chat-file-list .file-folder-delete:hover,
.app-shell.chat-mode .r3-chat-file-list .file-folder-delete:focus-visible {
  border-color: var(--rail-edge) !important;
  background: var(--rail-surface-2) !important;
  transform: none !important;
  outline: none !important;
}
.app-shell.chat-mode #chatNewFileBtn {
  min-height: 34px !important;
  margin-top: 6px !important;
  border: 1px solid var(--rail-edge) !important;
  border-radius: var(--rail-radius) !important;
  background: var(--rail-surface-2) !important;
  box-shadow: none !important;
  font-size: 10.5px !important;
  font-weight: 750 !important;
}
.app-shell.chat-mode #chatNewFileBtn:hover,
.app-shell.chat-mode #chatNewFileBtn:focus-visible {
  border-color: var(--rail-edge-strong) !important;
  background: var(--rail-surface-hover) !important;
  transform: none !important;
  outline: none !important;
}

/* Voice */
.app-shell.chat-mode .r3-chat-voice-settings input[type="range"] {
  min-height: 20px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  accent-color: var(--accent);
}
.app-shell.chat-mode .r3-chat-voice-settings .tts-voice-actions {
  gap: 5px !important;
}
.app-shell.chat-mode .r3-chat-voice-settings .tts-voice-actions .ui-btn,
.app-shell.chat-mode #chatTestTtsVoiceBtn {
  min-height: 32px !important;
  border: 1px solid var(--rail-edge) !important;
  border-radius: var(--rail-radius) !important;
  background: var(--rail-surface-2) !important;
  box-shadow: none !important;
}
.app-shell.chat-mode .r3-chat-voice-settings .tts-voice-actions .ui-btn:hover,
.app-shell.chat-mode #chatTestTtsVoiceBtn:hover,
.app-shell.chat-mode #chatTestTtsVoiceBtn:focus-visible {
  border-color: var(--rail-edge-strong) !important;
  background: var(--rail-surface-hover) !important;
  transform: none !important;
  outline: none !important;
}

/* No decorative card/pill language in the chat rail. */
.app-shell.chat-mode .r3-chat-sidebar :is(.r3-chat-run-status, .section-usage-badge, .r3-chat-panel-head .ui-btn, .r3-chat-panel-body .ui-btn) {
  box-shadow: none !important;
}

@media (max-width: 980px) {
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-shell.mobile-settings-open .r3-chat-sidebar {
    padding: 0 8px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    background: var(--rail-surface) !important;
  }
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-brand {
    padding: 12px 8px 10px !important;
  }
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-panel-head,
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-panel-toggle {
    min-height: 42px !important;
  }
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-panel-body {
    padding: 7px 7px 11px !important;
  }
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-panel :is(input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea) {
    min-height: 40px !important;
    font-size: 16px !important;
  }
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-run-settings .inline-row .ui-btn,
  html.r3-mobile-device .app-shell.chat-mode #chatNewFileBtn {
    min-height: 40px !important;
  }
}

/* R3D3 BUILD: Chat View production UI rehaul — 2026-10-14
   Visual-only pass. Keeps all existing chat/run/tool/oracle/composer behavior intact. */
.app-shell.chat-mode {
  --chat-content-max: 1080px;
  --chat-surface: color-mix(in srgb, var(--bg) 97%, var(--panel) 3%);
  --chat-surface-raised: color-mix(in srgb, var(--panel) 94%, var(--bg) 6%);
  --chat-surface-soft: color-mix(in srgb, var(--panel-2) 58%, var(--panel) 42%);
  --chat-edge: color-mix(in srgb, var(--soft-line) 72%, transparent);
  --chat-edge-strong: color-mix(in srgb, var(--accent) 38%, var(--soft-line));
  --chat-radius: 3px;
  --chat-radius-sm: 2px;
}

/* Main workspace: flat, quiet, centered. */
.app-shell.chat-mode .r3-chat-main {
  background: var(--chat-surface) !important;
}
.app-shell.chat-mode .r3-chat-workspace-top {
  min-height: 58px !important;
  padding: 9px max(20px, calc((100% - var(--chat-content-max)) / 2)) !important;
  border-bottom: 1px solid var(--chat-edge) !important;
  background: color-mix(in srgb, var(--panel) 97%, var(--bg) 3%) !important;
  box-shadow: none !important;
}
.app-shell.chat-mode .r3-chat-mobile-top-copy {
  gap: 1px !important;
}
.app-shell.chat-mode .r3-chat-top-kicker {
  font-size: 8px !important;
  font-weight: 850 !important;
  letter-spacing: .13em !important;
}
.app-shell.chat-mode .r3-chat-workspace-top b {
  font-size: 15px !important;
  font-weight: 750 !important;
  letter-spacing: 0 !important;
}
.app-shell.chat-mode .r3-chat-workspace-top small {
  font-size: 9.5px !important;
  line-height: 1.25 !important;
}
.app-shell.chat-mode .r3-chat-mobile-actions {
  gap: 6px !important;
}
.app-shell.chat-mode .r3-chat-mobile-start-select,
.app-shell.chat-mode .r3-chat-workspace-top .ui-btn {
  min-height: 32px !important;
  height: 32px !important;
  border: 1px solid var(--chat-edge) !important;
  border-radius: var(--chat-radius) !important;
  background: var(--bg) !important;
  box-shadow: none !important;
  font-size: 10px !important;
}
.app-shell.chat-mode .r3-chat-mobile-start-select:hover,
.app-shell.chat-mode .r3-chat-mobile-start-select:focus,
.app-shell.chat-mode .r3-chat-workspace-top .ui-btn:hover,
.app-shell.chat-mode .r3-chat-workspace-top .ui-btn:focus-visible {
  border-color: var(--chat-edge-strong) !important;
  background: color-mix(in srgb, var(--panel-2) 84%, var(--accent) 4%) !important;
  outline: none !important;
  transform: none !important;
}

/* Conversation lane: messages share one centered rail instead of opposite viewport edges. */
.app-shell.chat-mode .r3-chat-messages {
  align-items: stretch !important;
  gap: 20px !important;
  padding: 30px max(20px, calc((100% - var(--chat-content-max)) / 2)) 38px !important;
  background: var(--chat-surface) !important;
  scroll-padding-block: 24px 40px;
}
.app-shell.chat-mode .r3-chat-row {
  width: 100% !important;
  max-width: var(--chat-content-max) !important;
  margin-inline: auto !important;
  gap: 10px !important;
  align-items: flex-start !important;
}
.app-shell.chat-mode .r3-chat-row.assistant,
.app-shell.chat-mode .r3-chat-row.system {
  justify-content: flex-start !important;
}
.app-shell.chat-mode .r3-chat-row.user {
  justify-content: flex-start !important; /* row-reverse makes this the right side */
}

/* Identity markers are compact labels, not floating cards. */
.app-shell.chat-mode .r3-chat-avatar {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  flex-basis: 24px !important;
  margin-top: 1px !important;
  border: 1px solid var(--chat-edge) !important;
  border-radius: var(--chat-radius) !important;
  background: var(--chat-surface-raised) !important;
  box-shadow: none !important;
  color: var(--accent) !important;
  font-size: 8px !important;
  font-weight: 900 !important;
  letter-spacing: .05em !important;
}
.app-shell.chat-mode .r3-chat-row.user .r3-chat-avatar {
  color: color-mix(in srgb, var(--accent) 84%, var(--ink)) !important;
}
.app-shell.chat-mode .r3-chat-row.system .r3-chat-avatar {
  color: var(--muted) !important;
  background: transparent !important;
}

/* Assistant answers read like document content; user messages retain a restrained bubble. */
.app-shell.chat-mode .r3-chat-bubble {
  min-width: 0 !important;
  box-shadow: none !important;
}
.app-shell.chat-mode .r3-chat-row.assistant .r3-chat-bubble {
  width: min(820px, calc(100% - 34px)) !important;
  max-width: min(820px, calc(100% - 34px)) !important;
  padding: 2px 0 8px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}
.app-shell.chat-mode .r3-chat-row.user .r3-chat-bubble {
  width: auto !important;
  max-width: min(620px, calc(100% - 34px)) !important;
  padding: 10px 12px !important;
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--chat-edge)) !important;
  border-radius: var(--chat-radius) !important;
  background: color-mix(in srgb, var(--panel-2) 72%, var(--panel) 28%) !important;
}
.app-shell.chat-mode .r3-chat-row.system .r3-chat-bubble {
  width: auto !important;
  max-width: min(580px, calc(100% - 34px)) !important;
  padding: 8px 10px !important;
  border: 0 !important;
  border-left: 2px solid color-mix(in srgb, var(--soft-line) 82%, transparent) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--muted) !important;
}
.app-shell.chat-mode .r3-chat-bubble-content {
  color: color-mix(in srgb, var(--ink) 94%, var(--muted)) !important;
  font-size: 13px !important;
  line-height: 1.58 !important;
}
.app-shell.chat-mode .r3-chat-bubble-content :is(h1,h2,h3,h4) {
  margin-top: 1.15em;
  margin-bottom: .45em;
  line-height: 1.22;
  letter-spacing: -.01em;
}
.app-shell.chat-mode .r3-chat-bubble-content :is(p,ul,ol) {
  margin-top: 0 !important;
  margin-bottom: .72em !important;
}
.app-shell.chat-mode .r3-chat-bubble-content > :last-child {
  margin-bottom: 0 !important;
}
.app-shell.chat-mode .r3-chat-bubble pre {
  margin: 10px 0 !important;
  padding: 10px 12px !important;
  border: 1px solid var(--chat-edge) !important;
  border-radius: var(--chat-radius) !important;
  background: var(--bg) !important;
  box-shadow: none !important;
}
.app-shell.chat-mode .r3-chat-bubble code {
  border: 0 !important;
  border-radius: var(--chat-radius-sm) !important;
  background: color-mix(in srgb, var(--panel-2) 70%, var(--bg) 30%) !important;
  padding: 1px 4px !important;
}
.app-shell.chat-mode .r3-chat-meta {
  margin-top: 8px !important;
  color: color-mix(in srgb, var(--muted) 88%, transparent) !important;
  font-size: 8.5px !important;
  font-weight: 650 !important;
  letter-spacing: .075em !important;
}

/* Message utility actions become subdued controls instead of mini cards. */
.app-shell.chat-mode .r3-chat-bubble-actions {
  gap: 3px !important;
}
.app-shell.chat-mode .r3-chat-bubble-actions.top {
  top: -4px !important;
  right: 0 !important;
}
.app-shell.chat-mode .r3-chat-copy-btn,
.app-shell.chat-mode .r3-chat-oracle-toggle-bubble {
  min-height: 26px !important;
  height: 26px !important;
  padding: 3px 6px !important;
  border: 1px solid transparent !important;
  border-radius: var(--chat-radius) !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--muted) !important;
  font-size: 8.5px !important;
}
.app-shell.chat-mode .r3-chat-copy-btn:hover,
.app-shell.chat-mode .r3-chat-copy-btn:focus-visible,
.app-shell.chat-mode .r3-chat-oracle-toggle-bubble:hover,
.app-shell.chat-mode .r3-chat-oracle-toggle-bubble:focus-visible,
.app-shell.chat-mode .r3-chat-oracle-toggle-bubble.is-active {
  border-color: var(--chat-edge) !important;
  background: var(--chat-surface-raised) !important;
  color: var(--ink) !important;
  outline: none !important;
}

/* Run summary: one flat execution section, not nested cards. */
.app-shell.chat-mode .run-summary-card.run-summary-chat {
  width: 100% !important;
  margin-top: 14px !important;
  padding: 0 !important;
  gap: 0 !important;
  border: 1px solid var(--chat-edge) !important;
  border-radius: var(--chat-radius) !important;
  background: color-mix(in srgb, var(--panel) 58%, transparent) !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.app-shell.chat-mode .run-summary-card.run-summary-chat > header {
  min-height: 34px !important;
  padding: 7px 10px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--chat-edge) !important;
  background: transparent !important;
}
.app-shell.chat-mode .run-summary-card.run-summary-chat > header strong {
  color: color-mix(in srgb, var(--accent) 84%, var(--ink)) !important;
  font-size: 8.5px !important;
  font-weight: 900 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}
.app-shell.chat-mode .run-summary-card.run-summary-chat > header span {
  color: var(--muted) !important;
  font-size: 8.5px !important;
  font-weight: 600 !important;
}
.app-shell.chat-mode .run-summary-chat .run-summary-visible-metrics {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border-bottom: 1px solid var(--chat-edge) !important;
}
.app-shell.chat-mode .run-summary-chat .run-summary-visible-metrics > div {
  min-width: 0 !important;
  min-height: 50px !important;
  padding: 8px 10px !important;
  border: 0 !important;
  border-right: 1px solid var(--chat-edge) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.app-shell.chat-mode .run-summary-chat .run-summary-visible-metrics > div:last-child {
  border-right: 0 !important;
}
.app-shell.chat-mode .run-summary-chat .run-summary-visible-metrics b {
  color: color-mix(in srgb, var(--accent) 84%, var(--ink)) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
}
.app-shell.chat-mode .run-summary-chat .run-summary-visible-metrics small {
  margin-top: 3px !important;
  color: var(--muted) !important;
  font-size: 7.5px !important;
  font-weight: 750 !important;
  letter-spacing: .08em !important;
  line-height: 1.15 !important;
  text-transform: uppercase !important;
}
.app-shell.chat-mode .run-summary-chat .run-summary-chat-actions {
  min-height: 36px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 5px 7px !important;
  background: transparent !important;
}
.app-shell.chat-mode .run-summary-chat .run-summary-more,
.app-shell.chat-mode .run-summary-chat .run-summary-chat-actions > .run-summary-more {
  margin: 0 !important;
  padding: 0 !important;
}
.app-shell.chat-mode .run-summary-chat .run-summary-more > summary,
.app-shell.chat-mode .run-summary-chat .run-summary-continue-btn {
  width: auto !important;
  min-height: 26px !important;
  padding: 4px 7px !important;
  border: 1px solid transparent !important;
  border-radius: var(--chat-radius) !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--muted) !important;
  font-size: 8.5px !important;
  font-weight: 800 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
}
.app-shell.chat-mode .run-summary-chat .run-summary-more > summary:hover,
.app-shell.chat-mode .run-summary-chat .run-summary-more > summary:focus-visible,
.app-shell.chat-mode .run-summary-chat .run-summary-continue-btn:hover,
.app-shell.chat-mode .run-summary-chat .run-summary-continue-btn:focus-visible {
  border-color: var(--chat-edge) !important;
  background: var(--chat-surface-raised) !important;
  color: var(--ink) !important;
  outline: none !important;
  transform: none !important;
}
.app-shell.chat-mode .run-summary-chat .run-summary-more-body {
  gap: 6px !important;
  padding: 8px !important;
  border-top: 1px solid var(--chat-edge) !important;
}

/* Live execution uses the same flat language as completed summaries. */
.app-shell.chat-mode .r3-chat-live-run {
  width: 100% !important;
  margin: 12px 0 0 !important;
  border: 1px solid var(--chat-edge) !important;
  border-radius: var(--chat-radius) !important;
  background: color-mix(in srgb, var(--panel) 58%, transparent) !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.app-shell.chat-mode .r3-chat-live-normal {
  border-radius: 0 !important;
  overflow: visible !important;
}
.app-shell.chat-mode .r3-chat-live-head {
  min-height: 58px !important;
  padding: 9px 10px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--chat-edge) !important;
  background: transparent !important;
}
.app-shell.chat-mode .r3-chat-live-head > div:first-child {
  gap: 2px !important;
}
.app-shell.chat-mode .r3-chat-live-head small {
  color: var(--accent) !important;
  font-size: 7.5px !important;
  font-weight: 900 !important;
  letter-spacing: .11em !important;
  text-transform: uppercase !important;
}
.app-shell.chat-mode .r3-chat-live-head b {
  color: var(--ink) !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  line-height: 1.25 !important;
}
.app-shell.chat-mode .r3-chat-live-head span:not(.r3-chat-live-tool):not(.agent-heartbeat-bytes) {
  color: var(--muted) !important;
  font-size: 9.5px !important;
  line-height: 1.35 !important;
}
.app-shell.chat-mode .r3-chat-live-head-actions {
  gap: 5px !important;
  flex: 0 0 auto !important;
}
.app-shell.chat-mode .r3-chat-live-tool {
  min-height: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 3px 6px !important;
  border: 1px solid var(--chat-edge) !important;
  border-radius: var(--chat-radius) !important;
  background: transparent !important;
  color: var(--muted) !important;
  font-size: 7.5px !important;
  font-weight: 800 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}
.app-shell.chat-mode .r3-chat-live-head .agent-heartbeat-indicator,
.app-shell.chat-mode .r3-chat-oracle-kicker .agent-heartbeat-indicator {
  min-width: 22px !important;
  height: 22px !important;
  padding: 0 5px !important;
  border-radius: var(--chat-radius) !important;
  box-shadow: none !important;
}
.app-shell.chat-mode .r3-chat-live-metrics {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0 !important;
  padding: 0 !important;
  border-bottom: 1px solid var(--chat-edge) !important;
}
.app-shell.chat-mode .r3-chat-live-metrics > div {
  min-width: 0 !important;
  min-height: 50px !important;
  padding: 8px 9px !important;
  border: 0 !important;
  border-right: 1px solid var(--chat-edge) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.app-shell.chat-mode .r3-chat-live-metrics > div:last-child {
  border-right: 0 !important;
}
.app-shell.chat-mode .r3-chat-live-metrics b {
  font-size: 13px !important;
  font-weight: 800 !important;
}
.app-shell.chat-mode .r3-chat-live-metrics span {
  margin-top: 3px !important;
  font-size: 7.5px !important;
  font-weight: 750 !important;
  letter-spacing: .07em !important;
  line-height: 1.15 !important;
  text-transform: uppercase !important;
}
.app-shell.chat-mode .r3-chat-live-tools-head {
  min-height: 32px !important;
  margin: 0 !important;
  padding: 7px 9px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--chat-edge) !important;
  background: transparent !important;
}
.app-shell.chat-mode .r3-chat-live-tools-head span {
  font-size: 8px !important;
  font-weight: 900 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
}
.app-shell.chat-mode .r3-chat-live-tools-head small {
  font-size: 8px !important;
  color: var(--muted) !important;
}
.app-shell.chat-mode .r3-chat-live-tools {
  gap: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
.app-shell.chat-mode .r3-chat-live-tool-row {
  min-height: 42px !important;
  margin: 0 !important;
  padding: 7px 9px !important;
  border: 0 !important;
  border-bottom: 1px solid color-mix(in srgb, var(--chat-edge) 74%, transparent) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transition: background .12s ease !important;
}
.app-shell.chat-mode .r3-chat-live-tool-row:last-child {
  border-bottom: 0 !important;
}
.app-shell.chat-mode .r3-chat-live-tool-row:hover,
.app-shell.chat-mode .r3-chat-live-tool-row:focus-visible {
  border-color: color-mix(in srgb, var(--chat-edge) 74%, transparent) !important;
  background: color-mix(in srgb, var(--accent) 4%, transparent) !important;
  outline: none !important;
  transform: none !important;
}
.app-shell.chat-mode .r3-chat-live-tool-icon {
  width: 22px !important;
  min-width: 22px !important;
  height: 22px !important;
  border: 1px solid var(--chat-edge) !important;
  border-radius: var(--chat-radius-sm) !important;
  background: var(--bg) !important;
}
.app-shell.chat-mode .r3-chat-live-tool-copy b {
  font-size: 9.5px !important;
  font-weight: 800 !important;
}
.app-shell.chat-mode .r3-chat-live-tool-copy small {
  margin-top: 2px !important;
  font-size: 8.5px !important;
  line-height: 1.3 !important;
}
.app-shell.chat-mode .r3-chat-live-tool-state {
  font-size: 7px !important;
  font-weight: 900 !important;
  letter-spacing: .07em !important;
}
.app-shell.chat-mode .r3-chat-live-idle-note {
  padding: 10px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--muted) !important;
  font-size: 9px !important;
}

/* Oracle panels stay functional but match the flatter execution UI. */
.app-shell.chat-mode .r3-chat-oracle-view {
  border-radius: 0 !important;
  border-top: 1px solid var(--chat-edge) !important;
  background: color-mix(in srgb, var(--panel-2) 28%, transparent) !important;
  box-shadow: none !important;
}
.app-shell.chat-mode .r3-chat-oracle-kicker,
.app-shell.chat-mode .r3-chat-oracle-actions,
.app-shell.chat-mode .r3-chat-oracle-mini,
.app-shell.chat-mode .r3-chat-oracle-ask-form,
.app-shell.chat-mode .r3-chat-oracle-ask-form textarea {
  border-radius: var(--chat-radius) !important;
  box-shadow: none !important;
}

/* Empty state becomes a quiet onboarding block in the same content lane. */
.app-shell.chat-mode .r3-chat-empty {
  width: min(640px, 100%) !important;
  margin: auto !important;
  padding: 18px 20px !important;
  border: 1px solid var(--chat-edge) !important;
  border-radius: var(--chat-radius) !important;
  background: transparent !important;
  box-shadow: none !important;
}
.app-shell.chat-mode .r3-chat-empty h2 {
  font-size: 17px !important;
  font-weight: 750 !important;
}
.app-shell.chat-mode .r3-chat-empty p {
  color: var(--muted) !important;
  font-size: 11px !important;
  line-height: 1.5 !important;
}

/* Composer: one production input bar with quiet secondary tools. */
.app-shell.chat-mode .r3-chat-composer {
  grid-template-columns: minmax(0, 1fr) 82px !important;
  grid-template-areas:
    "attachments attachments"
    "input send"
    "switches switches"
    "tools hint" !important;
  column-gap: 7px !important;
  row-gap: 6px !important;
  padding: 10px max(20px, calc((100% - var(--chat-content-max)) / 2)) 11px !important;
  border-top: 1px solid var(--chat-edge) !important;
  background: color-mix(in srgb, var(--panel) 97%, var(--bg) 3%) !important;
  box-shadow: none !important;
}
.app-shell.chat-mode .r3-chat-input-wrap {
  min-height: 50px !important;
  padding: 4px 38px 4px 5px !important;
  border: 1px solid var(--chat-edge) !important;
  border-radius: var(--chat-radius) !important;
  background: var(--bg) !important;
  box-shadow: none !important;
  outline: none !important;
}
.app-shell.chat-mode .r3-chat-input-wrap:hover {
  border-color: color-mix(in srgb, var(--chat-edge-strong) 68%, var(--chat-edge)) !important;
}
.app-shell.chat-mode .r3-chat-input-wrap:focus-within {
  border-color: var(--chat-edge-strong) !important;
  outline: 1px solid color-mix(in srgb, var(--accent) 14%, transparent) !important;
  outline-offset: 0 !important;
}
.app-shell.chat-mode .r3-chat-input {
  min-height: 40px !important;
  max-height: 160px !important;
  padding: 7px 8px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--ink) !important;
  font-size: 12.5px !important;
  line-height: 1.45 !important;
}
.app-shell.chat-mode .r3-chat-input::placeholder {
  color: color-mix(in srgb, var(--muted) 78%, transparent) !important;
}
.app-shell.chat-mode .r3-chat-attach-btn {
  right: 6px !important;
  bottom: 6px !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  border: 1px solid transparent !important;
  border-radius: var(--chat-radius) !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--muted) !important;
}
.app-shell.chat-mode .r3-chat-attach-btn:hover,
.app-shell.chat-mode .r3-chat-attach-btn:focus-visible {
  border-color: var(--chat-edge) !important;
  background: var(--chat-surface-raised) !important;
  color: var(--ink) !important;
  outline: none !important;
}
.app-shell.chat-mode .r3-chat-send {
  width: 82px !important;
  min-width: 82px !important;
  min-height: 50px !important;
  height: 50px !important;
  padding: 0 12px !important;
  border-radius: var(--chat-radius) !important;
  box-shadow: none !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}
.app-shell.chat-mode .r3-chat-send:hover,
.app-shell.chat-mode .r3-chat-send:focus-visible {
  transform: none !important;
}
.app-shell.chat-mode .r3-chat-prompt-tools {
  align-self: center !important;
  gap: 3px !important;
}
.app-shell.chat-mode .r3-chat-prompt-tools .ui-btn {
  min-height: 24px !important;
  height: 24px !important;
  padding: 3px 6px !important;
  border: 1px solid transparent !important;
  border-radius: var(--chat-radius) !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--muted) !important;
  font-size: 8.5px !important;
  font-weight: 750 !important;
}
.app-shell.chat-mode .r3-chat-prompt-tools .ui-btn:hover,
.app-shell.chat-mode .r3-chat-prompt-tools .ui-btn:focus-visible {
  border-color: var(--chat-edge) !important;
  background: var(--chat-surface-raised) !important;
  color: var(--ink) !important;
  outline: none !important;
}
.app-shell.chat-mode .r3-chat-mention-help {
  justify-self: end !important;
  align-self: center !important;
  margin: 0 !important;
  color: var(--muted) !important;
  font-size: 8.5px !important;
  line-height: 1.25 !important;
  text-align: right !important;
}
.app-shell.chat-mode .r3-chat-switches {
  margin-top: 0 !important;
}
.app-shell.chat-mode .r3-chat-switch-chip {
  height: 21px !important;
  border-radius: var(--chat-radius) !important;
  box-shadow: none !important;
}
.app-shell.chat-mode .r3-chat-attachment-tray {
  padding: 6px !important;
  border: 1px solid var(--chat-edge) !important;
  border-radius: var(--chat-radius) !important;
  background: var(--bg) !important;
  box-shadow: none !important;
}
.app-shell.chat-mode .r3-chat-attachment-chip {
  border: 1px solid var(--chat-edge) !important;
  border-radius: var(--chat-radius) !important;
  background: var(--chat-surface-raised) !important;
  box-shadow: none !important;
}

/* Pending human input follows the same flat, compact hierarchy. */
.app-shell.chat-mode .r3-chat-pending-input,
.app-shell.chat-mode .r3-chat-last-agent-output,
.app-shell.chat-mode .r3-chat-input-response textarea,
.app-shell.chat-mode .human-option-btn {
  border-radius: var(--chat-radius) !important;
  box-shadow: none !important;
}

/* Pricing help remains above overflow surfaces and visually matches the new UI. */
.r3-chat-cost-tip-portal {
  border-radius: 3px !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.32) !important;
}

/* Mobile: same system, denser—not a separate visual language. */
@media (max-width: 760px) {
  html.r3-mobile-device .app-shell.chat-mode {
    --chat-content-max: 100%;
  }
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-workspace-top {
    min-height: 50px !important;
    padding: 7px 9px !important;
  }
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-workspace-top b {
    font-size: 13px !important;
  }
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-workspace-top small {
    max-width: 42vw !important;
    font-size: 8.5px !important;
  }
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-mobile-start-select {
    width: min(48vw, 190px) !important;
    min-height: 34px !important;
    height: 34px !important;
    font-size: 11px !important;
  }
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-workspace-top .ui-btn {
    min-height: 34px !important;
    height: 34px !important;
  }
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-messages {
    gap: 16px !important;
    padding: 18px 10px 24px !important;
  }
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-row {
    gap: 7px !important;
  }
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-avatar {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    flex-basis: 22px !important;
  }
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-row.assistant .r3-chat-bubble,
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-row.user .r3-chat-bubble,
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-row.system .r3-chat-bubble {
    max-width: calc(100vw - 49px) !important;
  }
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-row.assistant .r3-chat-bubble {
    width: calc(100vw - 49px) !important;
  }
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-bubble-content {
    font-size: 12.5px !important;
    line-height: 1.52 !important;
  }
  html.r3-mobile-device .app-shell.chat-mode .run-summary-card.run-summary-chat,
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-live-run {
    border-radius: var(--chat-radius) !important;
    box-shadow: none !important;
  }
  html.r3-mobile-device .app-shell.chat-mode .run-summary-chat .run-summary-visible-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  html.r3-mobile-device .app-shell.chat-mode .run-summary-chat .run-summary-visible-metrics > div {
    min-height: 46px !important;
    padding: 7px 8px !important;
  }
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-live-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-live-metrics > div:nth-child(2) {
    border-right: 0 !important;
  }
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-live-metrics > div:nth-child(-n+2) {
    border-bottom: 1px solid var(--chat-edge) !important;
  }
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-live-head {
    min-height: 0 !important;
    align-items: flex-start !important;
    gap: 8px !important;
    padding: 8px !important;
  }
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-live-head-actions {
    max-width: 42% !important;
    flex-wrap: wrap !important;
  }
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-composer {
    grid-template-columns: minmax(0, 1fr) 72px !important;
    grid-template-areas:
      "attachments attachments"
      "input send"
      "switches switches"
      "tools tools"
      "hint hint" !important;
    padding: 8px 9px calc(9px + env(safe-area-inset-bottom, 0px)) !important;
  }
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-input-wrap,
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-send {
    min-height: 48px !important;
    height: auto !important;
    border-radius: var(--chat-radius) !important;
  }
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-send {
    width: 72px !important;
    min-width: 72px !important;
    height: 48px !important;
  }
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-mention-help {
    justify-self: start !important;
    text-align: left !important;
  }
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-bubble-actions.top {
    position: static !important;
    justify-content: flex-end !important;
    margin-bottom: 5px !important;
  }
}

/* R3D3 BUILD: Chat View scale + composer layout refinement — 2026-10-14
   Keeps the production-flat rehaul, widens the working conversation lane, and
   fixes the footer/tool-help grid so helper text never collapses into the Send column. */
.app-shell.chat-mode {
  --chat-content-max: min(1480px, calc(100vw - 96px));
}

/* Give wide desktop displays a fuller, more useful conversation canvas. */
.app-shell.chat-mode .r3-chat-workspace-top,
.app-shell.chat-mode .r3-chat-messages,
.app-shell.chat-mode .r3-chat-composer {
  padding-left: max(24px, calc((100% - var(--chat-content-max)) / 2)) !important;
  padding-right: max(24px, calc((100% - var(--chat-content-max)) / 2)) !important;
}
.app-shell.chat-mode .r3-chat-messages {
  gap: 22px !important;
  padding-top: 32px !important;
  padding-bottom: 44px !important;
}
.app-shell.chat-mode .r3-chat-row {
  max-width: var(--chat-content-max) !important;
}
.app-shell.chat-mode .r3-chat-row.assistant .r3-chat-bubble {
  width: min(1120px, calc(100% - 36px)) !important;
  max-width: min(1120px, calc(100% - 36px)) !important;
}
.app-shell.chat-mode .r3-chat-row.user .r3-chat-bubble {
  max-width: min(760px, calc(100% - 36px)) !important;
}
.app-shell.chat-mode .r3-chat-row.system .r3-chat-bubble {
  max-width: min(720px, calc(100% - 36px)) !important;
}
.app-shell.chat-mode .r3-chat-bubble-content {
  font-size: 14px !important;
  line-height: 1.58 !important;
}
.app-shell.chat-mode .r3-chat-avatar {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  flex-basis: 26px !important;
}
.app-shell.chat-mode .r3-chat-row {
  gap: 11px !important;
}

/* Let execution summaries use the additional answer width instead of appearing undersized. */
.app-shell.chat-mode .run-summary-card.run-summary-chat,
.app-shell.chat-mode .r3-chat-live-run {
  width: 100% !important;
  max-width: none !important;
}
.app-shell.chat-mode .run-summary-chat .run-summary-visible-metrics > div,
.app-shell.chat-mode .r3-chat-live-metrics > div {
  min-height: 54px !important;
  padding: 9px 11px !important;
}
.app-shell.chat-mode .run-summary-chat .run-summary-visible-metrics b,
.app-shell.chat-mode .r3-chat-live-metrics b {
  font-size: 14px !important;
}

/* Composer footer fix: never place helper copy inside the narrow Send column. */
.app-shell.chat-mode .r3-chat-composer {
  grid-template-columns: minmax(0, 1fr) 88px !important;
  grid-template-areas:
    "attachments attachments"
    "input send"
    "switches switches"
    "tools tools"
    "hint hint" !important;
  column-gap: 8px !important;
  row-gap: 7px !important;
  padding-top: 12px !important;
  padding-bottom: 13px !important;
}
.app-shell.chat-mode .r3-chat-input-wrap {
  min-width: 0 !important;
  min-height: 56px !important;
  padding-right: 40px !important;
}
.app-shell.chat-mode .r3-chat-input {
  min-height: 46px !important;
  font-size: 13.5px !important;
}
.app-shell.chat-mode .r3-chat-send {
  width: 88px !important;
  min-width: 88px !important;
  height: 56px !important;
  min-height: 56px !important;
}
.app-shell.chat-mode .r3-chat-prompt-tools {
  grid-area: tools !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  min-width: 0 !important;
}
.app-shell.chat-mode .r3-chat-prompt-tools .ui-btn {
  min-height: 26px !important;
  height: 26px !important;
  padding: 4px 8px !important;
}
.app-shell.chat-mode .r3-chat-mention-help {
  grid-area: hint !important;
  justify-self: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: -1px 0 0 !important;
  padding: 0 2px !important;
  font-size: 9px !important;
  line-height: 1.35 !important;
  text-align: left !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

/* Mid-size desktop/tablet: stay generous without pushing into the viewport edges. */
@media (max-width: 1360px) and (min-width: 761px) {
  .app-shell.chat-mode {
    --chat-content-max: calc(100vw - 72px);
  }
  .app-shell.chat-mode .r3-chat-row.assistant .r3-chat-bubble {
    width: min(980px, calc(100% - 36px)) !important;
    max-width: min(980px, calc(100% - 36px)) !important;
  }
}

/* Preserve the dedicated mobile treatment from the rehaul. */
@media (max-width: 760px) {
  html.r3-mobile-device .app-shell.chat-mode {
    --chat-content-max: 100%;
  }
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-workspace-top,
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-messages,
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-composer {
    padding-left: 9px !important;
    padding-right: 9px !important;
  }
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-messages {
    gap: 16px !important;
    padding-top: 18px !important;
    padding-bottom: 24px !important;
  }
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-row.assistant .r3-chat-bubble {
    width: calc(100vw - 49px) !important;
    max-width: calc(100vw - 49px) !important;
  }
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-bubble-content {
    font-size: 12.5px !important;
  }
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-avatar {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    flex-basis: 22px !important;
  }
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-composer {
    grid-template-columns: minmax(0, 1fr) 72px !important;
    grid-template-areas:
      "attachments attachments"
      "input send"
      "switches switches"
      "tools tools"
      "hint hint" !important;
    padding-top: 8px !important;
    padding-bottom: calc(9px + env(safe-area-inset-bottom, 0px)) !important;
  }
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-input-wrap,
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-send {
    min-height: 48px !important;
    height: auto !important;
  }
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-send {
    width: 72px !important;
    min-width: 72px !important;
    height: 48px !important;
  }
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-mention-help {
    font-size: 8.5px !important;
    padding-inline: 0 !important;
  }
}


/* R3D3 BUILD: chat header cleanup — 2026-10-14
   Removes redundant Chat View title copy from the left rail and workspace header. */
.app-shell.chat-mode .r3-chat-brand {
  padding-top: 10px !important;
  gap: 6px !important;
}
.app-shell.chat-mode .r3-chat-brand-kicker,
.app-shell.chat-mode .r3-chat-brand > strong {
  display: none !important;
}
.app-shell.chat-mode .r3-chat-workspace-top {
  justify-content: flex-end !important;
  min-height: 48px !important;
}
.app-shell.chat-mode .r3-chat-mobile-top-copy {
  display: none !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-workspace-top {
  justify-content: space-between !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-mobile-top-copy {
  display: none !important;
}


/* R3D3 BUILD: Chat message utility rail clearance — 2026-10-14
   Keep hover actions visually attached to the message, but lift them above
   long first-line text so COPY / READ / OUTPUTS never compete with content. */
@media (min-width: 981px) {
  .app-shell.chat-mode .r3-chat-row.assistant .r3-chat-bubble-actions.top,
  .app-shell.chat-mode .r3-chat-row.system .r3-chat-bubble-actions.top {
    top: -26px !important;
    right: 0 !important;
  }

  /* Give the utility rail a small stable hover corridor so moving between
     the message and the controls does not make the controls feel detached. */
  .app-shell.chat-mode .r3-chat-row.assistant .r3-chat-bubble-actions.top::before,
  .app-shell.chat-mode .r3-chat-row.system .r3-chat-bubble-actions.top::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 8px;
  }
}

/* R3D3 BUILD: mobile chat density + tooltip cleanup — 2026-10-14
   Mobile-only visual fixes: suppress hover-only pricing cards, compact the live
   run header, and keep the composer/tool rows dense without removing controls. */
html.r3-mobile-device .app-shell.chat-mode .r3-chat-cost-help,
html.r3-mobile-device .app-shell.chat-mode .r3-chat-cost-tip {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* The desktop hover affordance has no useful hover state on touch screens. */
html.r3-mobile-device .app-shell.chat-mode .r3-chat-pricing-metric {
  cursor: default !important;
}

/* Reduce active-run header clutter: keep title/status, drop the long model/prompt line. */
html.r3-mobile-device .app-shell.chat-mode .r3-chat-live-head > div > span {
  display: none !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-live-head {
  min-height: 58px !important;
  padding: 9px 10px !important;
  align-items: center !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-live-head > div {
  min-width: 0 !important;
  gap: 2px !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-live-head > div > small {
  font-size: 8px !important;
  letter-spacing: .1em !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-live-head > div > b {
  font-size: 15px !important;
  line-height: 1.15 !important;
}

/* Make the live card actually fit a phone viewport and prevent metric overlap. */
html.r3-mobile-device .app-shell.chat-mode .r3-chat-live-run-slim[data-chat-live-phase="run"] {
  --r3-chat-live-mode-height: clamp(300px, 40dvh, 350px) !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-live-run-slim[data-chat-live-phase="run"] > .r3-chat-live-normal {
  grid-template-rows: auto auto auto minmax(90px, 1fr) !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-live-metrics {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0 !important;
  border-top: 1px solid var(--chat-edge) !important;
  border-bottom: 1px solid var(--chat-edge) !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-live-metrics > div {
  min-height: 48px !important;
  padding: 7px 8px !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-align: left !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-live-metrics > div:nth-child(odd) {
  border-right: 1px solid var(--chat-edge) !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-live-metrics > div:nth-child(-n+2) {
  border-bottom: 1px solid var(--chat-edge) !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-live-metrics b {
  font-size: 13px !important;
  line-height: 1.1 !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-live-metrics span {
  margin-top: 3px !important;
  font-size: 7.5px !important;
  line-height: 1.2 !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-live-tools-head {
  min-height: 30px !important;
  padding: 6px 9px !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-live-tools {
  min-height: 90px !important;
  padding: 6px 6px 8px !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-live-tool-row {
  padding: 7px !important;
  border-radius: 2px !important;
}

/* Compact bottom composer: input + Stop/Send, then one slim utility row. */
html.r3-mobile-device .app-shell.chat-mode .r3-chat-composer {
  grid-template-columns: minmax(0, 1fr) 80px !important;
  grid-template-areas:
    "attachments attachments"
    "input send"
    "switches tools" !important;
  align-items: center !important;
  column-gap: 8px !important;
  row-gap: 6px !important;
  padding: 8px 9px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-input-wrap {
  height: 72px !important;
  min-height: 72px !important;
  max-height: 72px !important;
  padding: 5px 78px 5px 5px !important;
  overflow: hidden !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-input {
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  padding: 8px !important;
  overflow-y: auto !important;
  font-size: 16px !important;
  line-height: 1.35 !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-send {
  width: 80px !important;
  min-width: 80px !important;
  height: 72px !important;
  min-height: 72px !important;
  align-self: stretch !important;
  font-size: 14px !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-attach-btn {
  width: 30px !important;
  height: 30px !important;
  right: 6px !important;
  bottom: 6px !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-input-wrap .voice-dictation-controls {
  right: 42px !important;
  bottom: 6px !important;
  gap: 3px !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-input-wrap .voice-dictation-btn {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  font-size: 13px !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-switches {
  grid-area: switches !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 26px !important;
  gap: 5px !important;
  overflow: hidden !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-switches-label {
  font-size: 7.5px !important;
  line-height: 20px !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-switches-list {
  min-height: 24px !important;
  padding: 0 !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-switch-chip {
  height: 22px !important;
  max-width: 128px !important;
  padding: 1px 5px 1px 4px !important;
  border-radius: 2px !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-switch-name {
  max-width: 82px !important;
  font-size: 8.5px !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-prompt-tools {
  grid-area: tools !important;
  justify-self: end !important;
  align-self: center !important;
  flex-wrap: nowrap !important;
  gap: 3px !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-prompt-tools .ui-btn {
  min-height: 24px !important;
  height: 24px !important;
  padding: 3px 5px !important;
  font-size: 8px !important;
}
/* Hint copy is desktop guidance, not an interaction; hide it on phone to reclaim height. */
html.r3-mobile-device .app-shell.chat-mode .r3-chat-mention-help {
  display: none !important;
}

@media (max-width: 380px) {
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-composer {
    grid-template-columns: minmax(0, 1fr) 72px !important;
  }
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-send {
    width: 72px !important;
    min-width: 72px !important;
  }
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-input-wrap {
    padding-right: 74px !important;
  }
}

/* R3D3 BUILD: mobile chat one-row chrome — 2026-10-14
   Removes the redundant R3D3 brand block and folds Start + Settings into the
   same compact control row as Flow + More. Visual-only; existing controls/IDs stay intact. */
@media (max-width: 980px) {
  html.r3-mobile-device .app-shell.chat-mode .topbar-v2 {
    position: relative !important;
    display: block !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    padding: 6px 8px !important;
    overflow: visible !important;
  }

  /* The mobile Chat surface already has project/workspace identity above it. */
  html.r3-mobile-device .app-shell.chat-mode .brand-link {
    display: none !important;
  }

  html.r3-mobile-device .app-shell.chat-mode .topbar-leading,
  html.r3-mobile-device .app-shell.chat-mode .toolbar-v2 {
    display: contents !important;
  }

  /* Keep only the Flow toggle and More control from the desktop topbar. */
  html.r3-mobile-device .app-shell.chat-mode .chat-toggle-btn {
    position: absolute !important;
    top: 6px !important;
    right: 56px !important;
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    border-radius: 3px !important;
    box-shadow: none !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    z-index: 4 !important;
  }
  html.r3-mobile-device .app-shell.chat-mode .toolbar-v2 > .topbar-more-menu {
    position: absolute !important;
    top: 6px !important;
    right: 8px !important;
    width: 42px !important;
    height: 42px !important;
    margin: 0 !important;
    z-index: 5 !important;
  }
  html.r3-mobile-device .app-shell.chat-mode .topbar-more-btn {
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    border-radius: 3px !important;
    box-shadow: none !important;
  }

  /* Pull the existing Start + Settings controls into the unused left side of
     the same topbar row instead of spending a second full header row on them. */
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-main {
    position: relative !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
  }
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-mobile-top {
    position: absolute !important;
    top: -48px !important;
    left: 8px !important;
    right: 124px !important;
    z-index: 6 !important;
    width: auto !important;
    min-height: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    pointer-events: none !important;
  }
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-mobile-top-copy {
    display: none !important;
  }
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-mobile-actions {
    width: 100% !important;
    height: 42px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 66px !important;
    align-items: stretch !important;
    gap: 5px !important;
    pointer-events: auto !important;
  }
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-mobile-start-select {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 6px 24px 6px 9px !important;
    border-radius: 3px !important;
    box-shadow: none !important;
    font-size: 10px !important;
    font-weight: 750 !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }
  html.r3-mobile-device .app-shell.chat-mode #chatMobileSettingsBtn {
    width: 66px !important;
    min-width: 66px !important;
    max-width: 66px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 6px !important;
    border-radius: 3px !important;
    box-shadow: none !important;
    font-size: 9.5px !important;
    font-weight: 750 !important;
  }

  /* The conversation now begins immediately below the single compact row. */
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-messages {
    padding-top: 14px !important;
  }
}

@media (max-width: 380px) {
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-mobile-top {
    right: 116px !important;
  }
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-mobile-actions {
    grid-template-columns: minmax(0, 1fr) 58px !important;
    gap: 4px !important;
  }
  html.r3-mobile-device .app-shell.chat-mode #chatMobileSettingsBtn {
    width: 58px !important;
    min-width: 58px !important;
    max-width: 58px !important;
    padding-inline: 4px !important;
    font-size: 9px !important;
  }
  html.r3-mobile-device .app-shell.chat-mode .chat-toggle-btn {
    right: 52px !important;
    width: 60px !important;
    min-width: 60px !important;
    max-width: 60px !important;
    font-size: 10.5px !important;
  }
  html.r3-mobile-device .app-shell.chat-mode .toolbar-v2 > .topbar-more-menu,
  html.r3-mobile-device .app-shell.chat-mode .topbar-more-btn {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
  }
}

/* R3D3 BUILD: mobile Chat topbar controls restored — 2026-10-14
   Start + live model + Settings now live in the actual topbar beside Flow + More.
   This avoids the old negative-offset header being clipped by .r3-chat-main overflow. */
.r3-chat-mobile-actions[data-mobile-topbar-controls="1"] {
  display: none;
}

@media (max-width: 980px) {
  html.r3-mobile-device .app-shell.chat-mode .topbar-v2 {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 58px 42px !important;
    align-items: center !important;
    gap: 5px !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    padding: 6px 8px !important;
    overflow: visible !important;
  }

  html.r3-mobile-device .app-shell.chat-mode .topbar-leading,
  html.r3-mobile-device .app-shell.chat-mode .toolbar-v2 {
    display: contents !important;
  }

  html.r3-mobile-device .app-shell.chat-mode .r3-chat-mobile-actions[data-mobile-topbar-controls="1"] {
    grid-column: 1 !important;
    min-width: 0 !important;
    width: 100% !important;
    height: 42px !important;
    display: grid !important;
    grid-template-columns: minmax(86px, 1.45fr) minmax(70px, 1fr) 38px !important;
    align-items: stretch !important;
    gap: 4px !important;
    position: static !important;
    pointer-events: auto !important;
    z-index: 6 !important;
  }

  html.r3-mobile-device .app-shell.chat-mode .r3-chat-mobile-start-select,
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-mobile-model,
  html.r3-mobile-device .app-shell.chat-mode #chatMobileSettingsBtn {
    min-width: 0 !important;
    width: 100% !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    margin: 0 !important;
    border: 1px solid color-mix(in srgb, var(--accent) 36%, var(--soft-line)) !important;
    border-radius: 3px !important;
    background: color-mix(in srgb, var(--panel) 94%, var(--bg) 6%) !important;
    color: var(--ink) !important;
    box-shadow: none !important;
    outline: none !important;
  }

  html.r3-mobile-device .app-shell.chat-mode .r3-chat-mobile-start-select {
    padding: 6px 23px 6px 8px !important;
    font-size: 9.5px !important;
    font-weight: 750 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }

  html.r3-mobile-device .app-shell.chat-mode .r3-chat-mobile-model {
    padding: 6px 7px !important;
    font-size: 9px !important;
    font-weight: 650 !important;
    text-overflow: ellipsis !important;
  }
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-mobile-model:disabled {
    opacity: .52 !important;
  }

  html.r3-mobile-device .app-shell.chat-mode #chatMobileSettingsBtn {
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    font-size: 16px !important;
    font-weight: 500 !important;
  }

  html.r3-mobile-device .app-shell.chat-mode .r3-chat-mobile-start-select:focus,
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-mobile-model:focus,
  html.r3-mobile-device .app-shell.chat-mode #chatMobileSettingsBtn:focus-visible {
    border-color: var(--accent) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent) !important;
  }

  html.r3-mobile-device .app-shell.chat-mode .chat-toggle-btn {
    grid-column: 2 !important;
    position: static !important;
    width: 58px !important;
    min-width: 58px !important;
    max-width: 58px !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 5px !important;
  }

  html.r3-mobile-device .app-shell.chat-mode .toolbar-v2 > .topbar-more-menu {
    grid-column: 3 !important;
    position: static !important;
    width: 42px !important;
    height: 42px !important;
    margin: 0 !important;
  }
  html.r3-mobile-device .app-shell.chat-mode .topbar-more-btn {
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
  }

  /* The old in-content mobile header is now intentionally empty/unused. */
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-mobile-top {
    display: none !important;
  }
}

@media (max-width: 410px) {
  html.r3-mobile-device .app-shell.chat-mode .topbar-v2 {
    grid-template-columns: minmax(0, 1fr) 54px 40px !important;
    gap: 4px !important;
    padding-inline: 6px !important;
  }
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-mobile-actions[data-mobile-topbar-controls="1"] {
    grid-template-columns: minmax(76px, 1.35fr) minmax(62px, .95fr) 36px !important;
    gap: 3px !important;
  }
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-mobile-start-select {
    font-size: 8.8px !important;
    padding-left: 6px !important;
  }
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-mobile-model {
    font-size: 8.4px !important;
    padding-inline: 5px !important;
  }
  html.r3-mobile-device .app-shell.chat-mode #chatMobileSettingsBtn {
    font-size: 15px !important;
  }
  html.r3-mobile-device .app-shell.chat-mode .chat-toggle-btn {
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
    font-size: 10px !important;
  }
  html.r3-mobile-device .app-shell.chat-mode .toolbar-v2 > .topbar-more-menu,
  html.r3-mobile-device .app-shell.chat-mode .topbar-more-btn {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
  }
}

/* R3D3 BUILD: mobile chat markdown width + overflow containment — 2026-10-14
   Assistant avatars are already hidden on mobile, so let answer content use the
   full message rail. The old output-action padding reservation is no longer
   needed because mobile utility controls are laid out outside the text flow. */
@media (max-width: 760px) {
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-row.assistant,
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-row.system {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  html.r3-mobile-device .app-shell.chat-mode .r3-chat-row.assistant .r3-chat-bubble,
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-row.system .r3-chat-bubble,
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-row:has(.r3-chat-output-menu-wrap) .r3-chat-bubble {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-right: 0 !important;
  }

  html.r3-mobile-device .app-shell.chat-mode .r3-chat-bubble-content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  /* Long prose, links, inline code, and generated identifiers must never widen
     the conversation viewport. Preserve code-block scrolling separately. */
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-bubble-content :is(p, li, blockquote, h1, h2, h3, h4, h5, h6, a, strong, em, span) {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  html.r3-mobile-device .app-shell.chat-mode .r3-chat-bubble-content :not(pre) > code {
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }

  html.r3-mobile-device .app-shell.chat-mode .r3-chat-bubble pre {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  html.r3-mobile-device .app-shell.chat-mode .r3-chat-bubble pre code {
    white-space: pre !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  /* Tables get the full mobile answer width, with their own horizontal scroller
     for genuinely wide generated tables instead of shrinking the whole message. */
  html.r3-mobile-device .app-shell.chat-mode .r3-markdown-table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 12px 0 16px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
  }

  html.r3-mobile-device .app-shell.chat-mode .r3-markdown-table {
    width: max(100%, 560px) !important;
    min-width: 560px !important;
    table-layout: auto !important;
  }

  html.r3-mobile-device .app-shell.chat-mode .r3-markdown-table th,
  html.r3-mobile-device .app-shell.chat-mode .r3-markdown-table td {
    min-width: 0 !important;
    max-width: 260px !important;
    padding: 8px 10px !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  html.r3-mobile-device .app-shell.chat-mode .r3-markdown-table :is(th, td) code {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }
}

/* R3D3 BUILD: mobile live-card reasoning + tool viewport correction — 2026-10-14 */
@media (max-width: 760px) {
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-live-head {
    position: relative !important;
    padding: 10px 48px 10px 12px !important;
    min-height: 58px !important;
  }
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-live-head-actions {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    width: 28px !important;
    max-width: 28px !important;
    min-width: 28px !important;
    height: 28px !important;
    display: grid !important;
    place-items: center !important;
    margin: 0 !important;
    gap: 0 !important;
    flex-wrap: nowrap !important;
    z-index: 4 !important;
  }
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-live-head-actions .agent-heartbeat-indicator {
    position: static !important;
    width: 28px !important;
    min-width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 3px !important;
  }
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-live-head-actions .r3-chat-live-tool {
    display: none !important;
  }

  html.r3-mobile-device .app-shell.chat-mode .r3-chat-live-run-slim[data-chat-live-phase="run"] {
    --r3-chat-live-mode-height: clamp(350px, 46dvh, 400px) !important;
  }
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-live-run-slim[data-chat-live-phase="run"] > .r3-chat-live-normal {
    grid-template-rows: auto auto auto minmax(126px, 1fr) !important;
  }
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-live-tools {
    min-height: 126px !important;
    height: 126px !important;
    max-height: 126px !important;
    padding: 7px !important;
    overflow-y: auto !important;
    scroll-snap-type: y proximity !important;
    scroll-padding-block: 7px !important;
  }
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-live-tool-row {
    min-height: 108px !important;
    padding: 10px 9px !important;
    align-items: start !important;
    scroll-snap-align: start !important;
  }
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-live-tool-copy small {
    -webkit-line-clamp: 4 !important;
    line-height: 1.38 !important;
  }

  html.r3-mobile-device .r3-chat-cost-tip,
  html.r3-mobile-device .r3-chat-cost-tip-portal,
  html.r3-mobile-device .r3-chat-cost-help {
    display: none !important;
  }
}

/* R3D3 BUILD: tool-result rendering cleanup — 2026-10-15
   Raw tool envelopes are inspection surfaces, not ruled documents. Keep JSON/file
   output visually continuous even if browser/extension syntax wrappers appear. */
.r3-viewer-modal .viewer-tool-file-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 9px 10px 0;
  padding: 7px 9px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--soft-line));
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  background: color-mix(in srgb, var(--panel-2) 72%, var(--panel));
  color: var(--muted);
  font: 600 10px/1.25 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.r3-viewer-modal .viewer-tool-file-meta b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
  font-weight: 750;
}
.r3-viewer-modal .viewer-tool-file-meta span {
  flex: 0 0 auto;
  white-space: nowrap;
}
.r3-viewer-modal .live-tool-content > .viewer-tool-code.is-file-read.is-scroll-region {
  margin-top: 0 !important;
  border-radius: 0 0 6px 6px !important;
}
.r3-viewer-modal .viewer-tool-code,
.r3-viewer-modal .viewer-tool-code code,
.r3-viewer-modal .viewer-tool-code code *,
.r3-viewer-modal .viewer-tool-code span {
  text-decoration: none !important;
  border-block: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  background-image: none !important;
}
.r3-viewer-modal .viewer-tool-code code,
.r3-viewer-modal .viewer-tool-code code * {
  background-color: transparent !important;
}
.r3-viewer-modal .viewer-tool-code::before,
.r3-viewer-modal .viewer-tool-code::after,
.r3-viewer-modal .viewer-tool-code code::before,
.r3-viewer-modal .viewer-tool-code code::after {
  content: none !important;
  display: none !important;
}
.r3-viewer-modal .viewer-tool-code.is-json-result,
.r3-viewer-modal .viewer-tool-code.is-file-read {
  line-height: 1.5 !important;
}
@media (max-width: 760px) {
  .r3-viewer-modal .viewer-tool-file-meta {
    margin: 7px 7px 0;
    padding: 6px 8px;
    gap: 6px;
  }
  .r3-viewer-modal .viewer-tool-file-meta span {
    font-size: 9px;
  }
  .r3-viewer-modal .live-tool-content > .viewer-tool-code.is-file-read.is-scroll-region {
    margin-top: 0 !important;
  }
}

/* Manual GitHub sync (shared Flow/Chat sidebar). */
.r3-gh-host{min-width:0;width:100%}.r3-gh-ui{display:grid;gap:10px;font-size:12px;min-width:0;color:var(--ink)}
.r3-gh-ui button,.r3-gh-ui input,.r3-gh-ui select,.r3-gh-ui textarea{font:inherit;max-width:100%;min-width:0}
.r3-gh-ui .ui-btn{min-height:31px;padding:6px 8px;font-size:11px;box-shadow:none}
.r3-gh-controls,.r3-gh-token-form,.r3-gh-ui form[data-gh-form="link"]{display:grid;gap:8px;min-width:0}
.r3-gh-controls{padding:9px;border:1px solid var(--soft-line);background:color-mix(in srgb,var(--panel-2) 55%,transparent)}
.r3-gh-ui label,.r3-gh-dialog label{display:grid;gap:5px;font-size:11px;letter-spacing:0;text-transform:none;color:var(--muted);margin:0;min-width:0}
.r3-gh-ui input:not([type="checkbox"]),.r3-gh-ui select,.r3-gh-dialog textarea{width:100%;border:1px solid var(--soft-line);background:var(--bg);color:var(--ink);padding:7px 8px;font:12px/1.3 var(--font)}
.r3-gh-token-form input{font-family:ui-monospace,monospace!important}.r3-gh-ui small{font-size:10.5px;line-height:1.4;color:var(--muted);overflow-wrap:anywhere}
.r3-gh-ui .r3-gh-wide{width:100%}.r3-gh-inline,.r3-gh-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.r3-gh-actions button{flex:1 1 auto}
.r3-gh-account{display:flex;gap:7px;align-items:center;min-width:0}.r3-gh-account b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.r3-gh-dot{background:var(--ok);height:7px;width:7px;border-radius:100%;flex:0 0 auto}
.r3-gh-text-btn{border:0;background:transparent;color:var(--muted);text-decoration:underline;cursor:pointer;margin-left:auto;font-size:10px;padding:2px}
.r3-gh-repo{border:1px solid var(--soft-line);background:var(--panel-2);padding:10px;display:grid;gap:4px;min-width:0}
.r3-gh-repo b{font-size:13px;overflow-wrap:anywhere}.r3-gh-repo span{color:var(--accent);font-weight:700}.r3-gh-repo small{color:var(--muted)}
.r3-gh-notice,.r3-gh-warning,.r3-gh-helper{color:var(--muted);line-height:1.4;margin:0;overflow-wrap:anywhere;font-size:11px}
.r3-gh-warning{color:var(--danger);font-weight:750}
.r3-gh-ui details{border:1px solid var(--soft-line);min-width:0}.r3-gh-ui details>summary{list-style:none;cursor:pointer;font-weight:750;padding:9px 10px;display:flex;justify-content:space-between;gap:7px;background:var(--panel-2);font-size:11px}
.r3-gh-ui details>summary::-webkit-details-marker{display:none}.r3-gh-ui details>summary::before{content:'▸';color:var(--accent);margin-right:3px}.r3-gh-ui details[open]>summary::before{content:'▾'}
.r3-gh-file-fold{padding-bottom:8px}.r3-gh-file-fold>.r3-gh-helper{padding:8px 9px}
.r3-gh-repo-picker .r3-gh-controls{border:0;border-top:1px solid var(--soft-line)}
.r3-gh-file-list{max-height:255px;overflow:auto;display:grid;gap:1px;min-width:0}
.r3-gh-file{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:5px;padding:6px 8px;border-bottom:1px solid color-mix(in srgb,var(--soft-line) 55%,transparent);min-width:0}
.r3-gh-file:last-child{border:0}.r3-gh-file label{display:flex;align-items:center;gap:6px;min-width:0;cursor:pointer;color:var(--ink)}
.r3-gh-file input[type="checkbox"]{flex:0 0 auto;accent-color:var(--accent);width:15px;height:15px;margin:0}
.r3-gh-file label span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;font:11px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace}
.r3-gh-file small{white-space:nowrap;font-size:9px!important}.r3-gh-file.is-folder{background:color-mix(in srgb,var(--accent) 7%,transparent)}
.r3-gh-file.is-excluded{opacity:.65}.r3-gh-file.is-excluded label span{text-decoration:line-through}
.r3-gh-diff-btn{border:1px solid var(--soft-line);color:var(--accent);background:transparent;font-size:10px!important;cursor:pointer;padding:2px 4px}
.r3-gh-ui form[data-gh-form="exclude"]{padding:9px;display:flex;gap:6px;align-items:end;min-width:0}.r3-gh-ui form[data-gh-form="exclude"] label{flex:1}
.r3-gh-exclusions{padding:7px 9px;display:flex;flex-wrap:wrap;align-items:center;gap:5px}
.r3-gh-chip{font-size:10px!important;overflow-wrap:anywhere;max-width:100%;padding:4px 6px;border:1px solid var(--soft-line);color:var(--muted);background:var(--bg);cursor:pointer}
.r3-gh-ui button:disabled{opacity:.48;cursor:not-allowed}
.r3-gh-dialog{border:1px solid var(--line);background:var(--panel);color:var(--ink);padding:0;width:min(740px,calc(100vw - 24px));max-height:85dvh;box-shadow:12px 12px 0 var(--shadow)}
.r3-gh-dialog::backdrop{background:rgba(0,0,0,.68)}.r3-gh-dialog-inner{display:grid;grid-template-rows:auto minmax(0,1fr);max-height:85dvh;min-width:0}
.r3-gh-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-bottom:1px solid var(--soft-line);background:var(--panel-2)}
.r3-gh-dialog-head strong{overflow-wrap:anywhere}.r3-gh-dialog-body{padding:14px;overflow:auto;display:grid;gap:10px;min-width:0}
.r3-gh-diff{margin:0;border:1px solid var(--soft-line);background:var(--bg);padding:12px;white-space:pre;overflow:auto;max-height:65dvh;font:11px/1.55 ui-monospace,monospace}
.r3-gh-diff span{display:block;white-space:pre;min-height:1em}.r3-gh-diff .add{background:color-mix(in srgb,var(--ok) 16%,transparent)}.r3-gh-diff .del{background:color-mix(in srgb,var(--danger) 16%,transparent)}
.r3-gh-push-form{display:grid;gap:12px}.r3-gh-push-form textarea{resize:vertical;min-height:74px}
.r3-gh-push-list{max-height:200px;overflow:auto;padding:10px;background:var(--bg);border:1px solid var(--soft-line);font:11px/1.65 ui-monospace,monospace;overflow-wrap:anywhere}
@media(max-width:650px){.r3-gh-dialog{width:calc(100vw - 16px)}.r3-gh-dialog-body{padding:10px}.r3-gh-ui .r3-gh-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.r3-gh-file-list{max-height:310px}}

/* Manual GitHub repository management — shared Chat / Flow left panels */
.r3-gh-manage>.r3-gh-controls{border:0;border-top:1px solid var(--soft-line)}
.r3-gh-ui .r3-gh-danger,.r3-gh-dialog .r3-gh-danger{border:1px solid var(--danger);color:var(--danger);background:color-mix(in srgb,var(--danger) 9%,var(--panel));}
.r3-gh-dialog .r3-gh-repository-form input,.r3-gh-dialog .r3-gh-repository-form select{width:100%;min-width:0;border:1px solid var(--soft-line);background:var(--bg);color:var(--ink);padding:9px 10px;font:12px var(--font)}
.r3-gh-dialog .r3-gh-check{display:flex;align-items:center;gap:9px;color:var(--ink)}
.r3-gh-dialog .r3-gh-check input[type="checkbox"]{width:17px;height:17px;accent-color:var(--accent);margin:0;flex:0 0 auto}
.r3-gh-dialog .r3-gh-check span{flex:1;min-width:0}
.r3-gh-repository-form small{font-size:11px;color:var(--muted);line-height:1.45}
.r3-gh-repository-form .r3-gh-actions{justify-content:flex-end}
.r3-gh-repository-form .r3-gh-actions button{flex:0 1 auto;min-height:35px}

/* Desktop Chat: the Start / Model / Settings controls are already in the left
   sidebar. They are moved into the main topbar only for the mobile layout.
   Hide that mobile-only group and the redundant save-state text on desktop;
   keep Flow View and the existing mobile topbar entirely unchanged. */
html:not(.r3-mobile-device) .app-shell.chat-mode .topbar-leading > .r3-chat-mobile-actions[data-mobile-topbar-controls="1"],
html:not(.r3-mobile-device) .app-shell.chat-mode .topbar-status-slot {
  display: none !important;
}

/* Shared, automatically inherited sticky-bottom behavior for all vertical scrollers. */
.r3d3-sticky-scroll {
  scroll-behavior: auto !important;
  overflow-anchor: none;
  overscroll-behavior-y: contain;
}

/* Browser Probe: a nonblocking, animated workspace dock, shown only after a probe call.
   Keep the iframe in its original dialog; never reparent it (that reloads the page). */
@media (min-width: 761px) {
  .app-shell.chat-mode .r3-chat-shell.probe-split > .r3-chat-main {
    width: 50% !important;
    min-width: 0 !important;
    justify-self: start !important;
    transition: width .38s cubic-bezier(.22,1,.36,1) !important;
  }
  .app-shell.chat-mode .r3-chat-shell > .r3-chat-main {
    transition: width .38s cubic-bezier(.22,1,.36,1);
  }
}
.r3-browser-probe-modal.probe-docked[open] {
  position: fixed !important;
  inset: auto !important;
  left: var(--probe-dock-left, 50vw) !important;
  top: var(--probe-dock-top, 70px) !important;
  width: var(--probe-dock-width, 48vw) !important;
  height: var(--probe-dock-height, calc(100dvh - 70px)) !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-left: 1px solid var(--soft-line) !important;
  border-radius: 0 !important;
  background: var(--panel) !important;
  box-shadow: -13px 0 32px rgba(0,0,0,.18) !important;
  transform: translateX(-30px) scale(.985) !important;
  transform-origin: left center;
  opacity: 0;
  visibility: visible;
  pointer-events: none;
  z-index: 180 !important;
  overflow: hidden !important;
  transition: transform .38s cubic-bezier(.22,1,.36,1), opacity .32s ease,
    filter .24s ease !important;
}
.r3-browser-probe-modal.probe-docked.probe-dock-entered[open] {
  transform: translateX(0) scale(1) !important;
  opacity: 1;
  pointer-events: auto;
}
/* Keep the dialog mounted during exit so its opacity/slide transition and
   the chat workspace's width/height restoration play together. */
.r3-browser-probe-modal.probe-docked.probe-dock-exiting[open] {
  pointer-events: none !important;
  transform: translateX(22px) scale(.985) !important;
  opacity: 0 !important;
}
.r3-browser-probe-modal.probe-docked.probe-hidden-mode[open] {
  display: none !important;
}
.r3-browser-probe-modal.probe-docked .browser-probe-card {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}
.r3-browser-probe-modal.probe-docked .browser-probe-head {
  padding: 10px 12px;
  min-width: 0;
  flex-wrap: wrap;
  gap: 8px;
}
.r3-browser-probe-modal.probe-docked .browser-probe-title {
  min-width: 0;
  flex: 1 1 140px;
}
.r3-browser-probe-modal.probe-docked .browser-probe-head-actions {
  flex: 0 1 auto;
  min-width: 0;
  flex-wrap: wrap;
  gap: 6px;
}
.r3-browser-probe-modal.probe-docked .browser-probe-finish-toggle { display: none !important; }
.r3-browser-probe-modal.probe-docked .browser-probe-idle-note {
  display: inline-flex;
  align-items: center;
  color: var(--muted);
  font-size: 10px;
  white-space: normal;
}
.r3-browser-probe-modal:not(.probe-docked) .browser-probe-idle-note { display: none; }
.r3-browser-probe-modal.probe-docked .browser-probe-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(130px, 3fr) minmax(100px, 2fr) !important;
  min-height: 0 !important;
  min-width: 0 !important;
  overflow: hidden;
  gap: 6px;
  padding: 8px;
}
.r3-browser-probe-modal.probe-docked .browser-probe-frame {
  width: 100%;
  height: 100%;
  min-height: 0 !important;
  min-width: 0;
  box-shadow: none;
}
.r3-browser-probe-modal.probe-docked .browser-probe-inspector {
  display: grid;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  grid-template-rows: minmax(0,1fr) auto;
}
.r3-browser-probe-modal.probe-docked .browser-probe-activity-pane,
.r3-browser-probe-modal.probe-docked .browser-probe-activity-list {
  min-width: 0;
  min-height: 0;
  overflow: auto;
}
.r3-browser-probe-modal.probe-docked .browser-probe-report-drawer { max-height: 130px; overflow: auto; }
.r3-browser-probe-modal.probe-docked .browser-probe-output { min-height: 0; max-height: 180px; box-shadow: none; }
/* Inactivity is a chrome-only state. Never filter, fade, cover, or disable
   the preview iframe: browser screenshots and live vision must see real pixels. */
.r3-browser-probe-modal.probe-docked .browser-probe-frame {
  filter: none !important;
  opacity: 1 !important;
  transition: none !important;
}
.r3-browser-probe-modal.probe-docked .browser-probe-title strong::after {
  content: none;
}
.r3-browser-probe-modal.probe-docked.probe-inactive .browser-probe-head {
  border-bottom-color: color-mix(in srgb, var(--soft-line) 50%, transparent);
  background: color-mix(in srgb, var(--panel-2) 82%, var(--panel));
}
.r3-browser-probe-modal.probe-docked.probe-inactive :is(.browser-probe-status, .browser-probe-idle-note) {
  color: var(--muted);
  opacity: .75;
}
@media (max-width: 760px) {
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-shell.probe-split > .r3-chat-main,
  .app-shell.chat-mode .r3-chat-shell.probe-split > .r3-chat-main {
    width: 100% !important;
    height: 50% !important;
    max-height: 50% !important;
    align-self: start !important;
    transition: height .38s cubic-bezier(.22,1,.36,1), max-height .38s cubic-bezier(.22,1,.36,1) !important;
  }
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-shell > .r3-chat-main,
  .app-shell.chat-mode .r3-chat-shell > .r3-chat-main {
    max-height: 100% !important;
    transition: height .38s cubic-bezier(.22,1,.36,1), max-height .38s cubic-bezier(.22,1,.36,1) !important;
  }
  .r3-browser-probe-modal.probe-docked.probe-dock-exiting[open] {
    transform: translateY(18px) scale(.985) !important;
  }
  .r3-browser-probe-modal.probe-docked .browser-probe-grid {
    grid-template-rows: minmax(90px, 3fr) minmax(64px, 1fr) !important;
  }
  .r3-browser-probe-modal.probe-docked .browser-probe-head { padding: 6px 9px; }
  .r3-browser-probe-modal.probe-docked .browser-probe-title > span { display: none; }
  .r3-browser-probe-modal.probe-docked .browser-probe-idle-note { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .app-shell.chat-mode .r3-chat-shell > .r3-chat-main,
  .r3-browser-probe-modal.probe-docked[open] {
    transition: none !important;
  }
}

/* Mobile Flow/Node View header — keep chat-only Start / Model / Settings out of
   the shared toolbar. The same live controls remain available in Chat View. */
@media (max-width: 980px) {
  html.r3-mobile-device .app-shell:not(.chat-mode) .r3-chat-mobile-actions,
  html.r3-mobile-device .app-shell:not(.chat-mode) .r3-chat-mobile-actions[data-mobile-topbar-controls="1"] {
    display: none !important;
  }

  /* Two balanced rows: identity + Chat, then Run + plan + More. */
  html.r3-mobile-device .app-shell:not(.chat-mode) .topbar-v2 {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 42px 42px !important;
    align-content: center !important;
    align-items: stretch !important;
    gap: 7px !important;
    min-height: calc(107px + env(safe-area-inset-top, 0px)) !important;
    height: auto !important;
    max-height: none !important;
    padding: calc(8px + env(safe-area-inset-top, 0px)) 10px 8px !important;
    border-bottom: 1px solid var(--flow-ui-border, var(--soft-line)) !important;
    background: var(--panel) !important;
    box-shadow: none !important;
    overflow: visible !important;
  }
  html.r3-mobile-device .app-shell:not(.chat-mode) .topbar-leading {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 42px !important;
  }
  html.r3-mobile-device .app-shell:not(.chat-mode) .brand-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    justify-self: start !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    text-decoration: none !important;
  }
  html.r3-mobile-device .app-shell:not(.chat-mode) .brand-link .brand-mark {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 74px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 11px !important;
    font-size: 19px !important;
    letter-spacing: .12em !important;
    border-radius: 5px !important;
    box-shadow: none !important;
  }
  html.r3-mobile-device .app-shell:not(.chat-mode) .chat-toggle-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    justify-self: end !important;
    min-width: 84px !important;
    max-width: 100px !important;
    width: auto !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 14px !important;
    margin: 0 !important;
    border: 1px solid color-mix(in srgb, var(--accent) 48%, var(--soft-line)) !important;
    border-radius: 5px !important;
    background: color-mix(in srgb, var(--accent) 12%, var(--panel-2)) !important;
    color: var(--ink) !important;
    box-shadow: none !important;
    font-size: 12px !important;
    font-weight: 750 !important;
    white-space: nowrap !important;
  }
  html.r3-mobile-device .app-shell:not(.chat-mode) .toolbar-v2 {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(86px, auto) minmax(76px, auto) !important;
    grid-template-areas: "run plan more" !important;
    align-items: stretch !important;
    gap: 7px !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  html.r3-mobile-device .app-shell:not(.chat-mode) .toolbar-v2 > .run-action-group {
    grid-area: run !important;
    min-width: 0 !important;
    height: 42px !important;
  }
  html.r3-mobile-device .app-shell:not(.chat-mode) #runFlowBtn,
  html.r3-mobile-device .app-shell:not(.chat-mode) #stopFlowBtn:not(.hidden) {
    height: 42px !important;
    min-height: 42px !important;
    border-radius: 5px !important;
    box-shadow: none !important;
    font-size: 12px !important;
    font-weight: 750 !important;
  }
  html.r3-mobile-device .app-shell:not(.chat-mode) .plan-status-pill {
    grid-area: plan !important;
    width: auto !important;
    min-width: 86px !important;
    max-width: 122px !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    border: 1px solid var(--flow-ui-border, var(--soft-line)) !important;
    border-radius: 5px !important;
    background: color-mix(in srgb, var(--panel-2) 92%, var(--accent) 8%) !important;
  }
  html.r3-mobile-device .app-shell:not(.chat-mode) .toolbar-v2 > .topbar-more-menu {
    grid-area: more !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 42px !important;
    margin: 0 !important;
  }
  html.r3-mobile-device .app-shell:not(.chat-mode) .topbar-more-btn {
    width: 100% !important;
    min-width: 0 !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 8px !important;
    border: 1px solid var(--flow-ui-border, var(--soft-line)) !important;
    border-radius: 5px !important;
    background: color-mix(in srgb, var(--panel-2) 92%, var(--accent) 8%) !important;
    box-shadow: none !important;
  }
}
@media (max-width: 380px) {
  html.r3-mobile-device .app-shell:not(.chat-mode) .topbar-v2 { padding-inline: 8px !important; gap: 6px !important; }
  html.r3-mobile-device .app-shell:not(.chat-mode) .toolbar-v2 {
    grid-template-columns: minmax(0, 1fr) 82px 72px !important;
    gap: 6px !important;
  }
  html.r3-mobile-device .app-shell:not(.chat-mode) .chat-toggle-btn { min-width: 78px !important; padding-inline: 10px !important; }
}

/* Desktop workspace header — one restrained visual system for both editors.
   Header only; mobile controls retain their existing layouts and behavior. */
@media (min-width: 981px) {
  html:not(.r3-mobile-device) .app-shell > .topbar-v2 {
    --r3-header-stroke: color-mix(in srgb, var(--soft-line) 56%, transparent);
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: center;
    column-gap: clamp(14px, 2.1vw, 28px);
    min-height: 58px;
    height: 58px;
    padding: 7px 16px;
    background: var(--panel);
    border-bottom: 1px solid var(--r3-header-stroke);
    box-shadow: none !important;
    backdrop-filter: none;
  }
  html:not(.r3-mobile-device) .app-shell > .topbar-v2 .topbar-leading {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 12px;
    min-width: 0;
  }
  html:not(.r3-mobile-device) .app-shell > .topbar-v2 .brand-link,
  html:not(.r3-mobile-device) .app-shell > .topbar-v2 .brand-link .brand-mark {
    width: auto;
    min-width: 0;
    height: 36px;
    min-height: 36px;
    margin: 0;
    padding: 0 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none !important;
  }
  html:not(.r3-mobile-device) .app-shell > .topbar-v2 .brand-link .brand-mark {
    font-size: 21px;
    font-weight: 800;
    letter-spacing: .075em;
    color: var(--ink);
  }
  html:not(.r3-mobile-device) .app-shell > .topbar-v2 .chat-toggle-btn {
    min-height: 34px;
    height: 34px;
    min-width: 92px;
    padding: 0 12px;
    border: 1px solid var(--r3-header-stroke);
    border-radius: 6px;
    background: color-mix(in srgb, var(--panel-2) 72%, var(--panel));
    color: var(--ink);
    font-size: 12px;
    font-weight: 650;
    letter-spacing: 0;
    box-shadow: none !important;
    animation: none !important;
  }
  html:not(.r3-mobile-device) .app-shell > .topbar-v2 .chat-toggle-btn::after,
  html:not(.r3-mobile-device) .app-shell > .topbar-v2 .chat-toggle-btn::before {
    content: none !important;
    animation: none !important;
  }
  html:not(.r3-mobile-device) .app-shell > .topbar-v2 .toolbar-v2 {
    display: flex;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
  }
  html:not(.r3-mobile-device) .app-shell > .topbar-v2 .topbar-status-slot {
    flex: 0 0 auto;
    min-width: 0;
    width: auto;
    margin: 0 auto 0 0;
  }
  html:not(.r3-mobile-device) .app-shell > .topbar-v2 .save-state-pill {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    flex: 0 0 auto;
    width: auto;
    min-height: 32px;
    padding: 0 6px;
    line-height: 1;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 10px;
    font-weight: 650;
    letter-spacing: .025em;
    box-shadow: none !important;
  }
  html:not(.r3-mobile-device) .app-shell > .topbar-v2 .save-state-pill::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    position: static;
    left: auto;
    top: auto;
    transform: none;
    margin-right: 7px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--ok);
    vertical-align: middle;
  }
  html:not(.r3-mobile-device) .app-shell > .topbar-v2 .save-state-pill:is([data-state='dirty'], [data-state='error'])::before {
    background: var(--danger);
  }
  html:not(.r3-mobile-device) .app-shell > .topbar-v2 .save-state-pill:is([data-state='saving'], [data-state='autosaving'])::before {
    background: var(--accent);
  }
  html:not(.r3-mobile-device) .app-shell > .topbar-v2 .plan-status-pill {
    display: flex;
    flex: 0 0 auto !important;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: auto !important;
    min-width: 0 !important;
    max-width: 230px !important;
    min-height: 34px;
    height: 34px;
    padding: 0 7px 0 10px;
    border: 1px solid var(--r3-header-stroke);
    border-radius: 6px;
    background: color-mix(in srgb, var(--panel-2) 55%, var(--panel));
    box-shadow: none !important;
    overflow: hidden;
  }
  html:not(.r3-mobile-device) .app-shell > .topbar-v2 :is(.plan-status-label, #planStatusUsage) {
    display: none !important;
  }
  html:not(.r3-mobile-device) .app-shell > .topbar-v2 #planStatusName {
    color: var(--muted);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .07em;
    line-height: 1;
  }
  html:not(.r3-mobile-device) .app-shell > .topbar-v2 .plan-status-pill > :is(.plan-upgrade-btn, .plan-admin-btn) {
    min-height: 25px;
    height: 25px;
    padding: 0 9px;
    border: 1px solid var(--r3-header-stroke);
    border-radius: 4px;
    background: var(--panel);
    color: var(--ink);
    box-shadow: none !important;
    font-size: 10px;
    font-weight: 650;
    letter-spacing: 0;
    text-transform: none;
  }
  html:not(.r3-mobile-device) .app-shell > .topbar-v2 .top-action-group.run-action-group {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 5px;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    box-shadow: none !important;
  }
  html:not(.r3-mobile-device) .app-shell > .topbar-v2 .toolbar-v2 > .run-action-group > .toolbar-btn,
  html:not(.r3-mobile-device) .app-shell > .topbar-v2 .topbar-more-menu > .topbar-more-btn {
    min-height: 34px;
    height: 34px;
    padding: 0 12px;
    border: 1px solid var(--r3-header-stroke);
    border-radius: 6px;
    background: var(--panel-2);
    color: var(--ink);
    box-shadow: none !important;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    transform: none;
  }
  html:not(.r3-mobile-device) .app-shell > .topbar-v2 .toolbar-v2 > .run-action-group > .toolbar-btn:is(:hover, :focus-visible),
  html:not(.r3-mobile-device) .app-shell > .topbar-v2 .topbar-more-menu > .topbar-more-btn:is(:hover, :focus-visible),
  html:not(.r3-mobile-device) .app-shell > .topbar-v2 .chat-toggle-btn:is(:hover, :focus-visible) {
    border-color: color-mix(in srgb, var(--accent) 38%, var(--soft-line));
    background: color-mix(in srgb, var(--accent) 8%, var(--panel-2));
    box-shadow: none !important;
    transform: none;
  }
  html:not(.r3-mobile-device) .app-shell > .topbar-v2 .run-action-group > .toolbar-btn > span[aria-hidden='true'],
  html:not(.r3-mobile-device) .app-shell > .topbar-v2 .topbar-more-menu > .topbar-more-btn > span[aria-hidden='true'] {
    display: none;
  }
  html:not(.r3-mobile-device) .app-shell > .topbar-v2 .run-action-group :is(.run-btn, #stopFlowBtn:not(.hidden)) {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
    font-weight: 750;
  }
  html:not(.r3-mobile-device) .app-shell > .topbar-v2 .run-action-group .toolbar-btn.icon-only {
    width: 34px;
    min-width: 34px;
    padding: 0;
  }
  html:not(.r3-mobile-device) .app-shell > .topbar-v2 .run-action-group .toolbar-btn.icon-only > span[aria-hidden='true'] {
    display: inline;
    border: 0;
    background: transparent;
    min-width: 0;
    width: auto;
    height: auto;
    font-size: 15px;
    color: inherit;
  }
  html:not(.r3-mobile-device) .app-shell > .topbar-v2 .topbar-more-btn {
    min-width: 76px;
  }
  html:not(.r3-mobile-device) .app-shell > .topbar-v2 .topbar-more-btn::after {
    content: '⌄';
    color: var(--muted);
    font-size: 13px;
    margin-left: 1px;
  }
  html:not(.r3-mobile-device) .app-shell > .topbar-v2 .topbar-more-menu[open] .topbar-more-btn {
    border-color: var(--accent);
    background: var(--panel-2);
  }
  html:not(.r3-mobile-device) .app-shell > .topbar-v2 :is(.toolbar-btn, .chat-toggle-btn):focus-visible,
  html:not(.r3-mobile-device) .app-shell > .topbar-v2 .brand-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
}


/* Chat empty-state visual: clean floating orb; all pre-existing R3D3 styles preserved. */
.app-shell.chat-mode .r3-chat-empty {
  width: min(720px, 100%) !important;
  margin: auto !important;
  padding: 8px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  display: grid !important;
  justify-items: center !important;
  gap: 12px !important;
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  transition: opacity .22s ease, transform .22s ease, filter .22s ease !important;
}
.app-shell.chat-mode .r3-chat-empty.is-entering {
  opacity: 0 !important;
  transform: translateY(18px) scale(.985) !important;
}
.app-shell.chat-mode .r3-chat-empty.is-leaving {
  opacity: 0 !important;
  transform: translateY(-10px) scale(.988) !important;
  pointer-events: none !important;
  filter: blur(1px) saturate(.96) !important;
}
.app-shell.chat-mode .r3-chat-empty-hero {
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  min-height: 280px !important;
  pointer-events: none !important;
}
.app-shell.chat-mode .r3-chat-empty-orb {
  position: relative !important;
  width: 228px !important;
  height: 228px !important;
  display: grid !important;
  place-items: center !important;
  filter: drop-shadow(0 22px 42px rgba(0, 0, 0, .22)) !important;
}
.app-shell.chat-mode .r3-chat-empty-orb::before,
.app-shell.chat-mode .r3-chat-empty-orb::after {
  content: "" !important;
  position: absolute !important;
  inset: 26px !important;
  border-radius: 999px !important;
}
.app-shell.chat-mode .r3-chat-empty-orb::before {
  background: radial-gradient(circle at 34% 28%, rgba(173, 228, 255, .42), rgba(80, 161, 255, .16) 24%, rgba(12, 28, 43, .84) 58%, rgba(7, 14, 22, .96) 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(160, 219, 255, .10), inset 0 26px 36px rgba(255,255,255,.05), inset 0 -30px 44px rgba(0,0,0,.28) !important;
}
.app-shell.chat-mode .r3-chat-empty-orb::after {
  inset: 44px !important;
  background: radial-gradient(circle at 50% 50%, rgba(117, 210, 255, .12), transparent 68%) !important;
  filter: blur(10px) !important;
}
.app-shell.chat-mode .r3-chat-empty-orb-core {
  position: relative !important;
  z-index: 2 !important;
  display: grid !important;
  justify-items: center !important;
  gap: 6px !important;
  text-align: center !important;
}
.app-shell.chat-mode .r3-chat-empty-orb-core span {
  color: #f4fbff !important;
  font-size: 38px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  text-indent: .08em !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.08), 0 0 20px rgba(95, 198, 255, .12) !important;
}
.app-shell.chat-mode .r3-chat-empty-orb-core small {
  color: color-mix(in srgb, var(--muted) 86%, white 14%) !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}
.app-shell.chat-mode .r3-chat-empty-orb-ring {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  border-radius: 999px !important;
  border: 1px solid rgba(134, 208, 255, .18) !important;
  transform-style: preserve-3d !important;
  will-change: transform !important;
}
.app-shell.chat-mode .r3-chat-empty-orb-ring.ring-a {
  width: 228px !important;
  height: 92px !important;
  margin: -46px 0 0 -114px !important;
  animation: r3ChatOrbSpinX 8.4s linear infinite !important;
}
.app-shell.chat-mode .r3-chat-empty-orb-ring.ring-b {
  width: 228px !important;
  height: 92px !important;
  margin: -46px 0 0 -114px !important;
  animation: r3ChatOrbSpinY 10s linear infinite reverse !important;
}
.app-shell.chat-mode .r3-chat-empty-orb-ring.ring-c {
  width: 176px !important;
  height: 176px !important;
  margin: -88px 0 0 -88px !important;
  border-color: rgba(134, 208, 255, .12) !important;
  animation: r3ChatOrbHalo 12s linear infinite !important;
}
.app-shell.chat-mode .r3-chat-empty-orb-ring.ring-d {
  width: 248px !important;
  height: 248px !important;
  margin: -124px 0 0 -124px !important;
  border-color: rgba(134, 208, 255, .08) !important;
  animation: r3ChatOrbHalo 18s linear infinite reverse !important;
}
.app-shell.chat-mode .r3-chat-empty-orb-particle {
  position: absolute !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(198, 240, 255, .95), rgba(97, 192, 255, .88)) !important;
  box-shadow: 0 0 0 6px rgba(97, 192, 255, .06), 0 0 18px rgba(97, 192, 255, .22) !important;
}
.app-shell.chat-mode .r3-chat-empty-orb-particle.particle-a {
  left: 50% !important;
  top: 50% !important;
  margin: -96px 0 0 72px !important;
  animation: r3ChatParticleA 6.4s linear infinite !important;
}
.app-shell.chat-mode .r3-chat-empty-orb-particle.particle-b {
  left: 50% !important;
  top: 50% !important;
  margin: 50px 0 0 -98px !important;
  animation: r3ChatParticleB 7.8s linear infinite !important;
}
.app-shell.chat-mode .r3-chat-empty-orb-particle.particle-c {
  left: 50% !important;
  top: 50% !important;
  margin: -108px 0 0 -10px !important;
  animation: r3ChatParticleC 9.4s linear infinite !important;
}
.app-shell.chat-mode .r3-chat-empty h2 {
  margin: 2px 0 0 !important;
  font-size: 28px !important;
  line-height: 1.05 !important;
  font-weight: 820 !important;
  letter-spacing: -.045em !important;
  text-align: center !important;
  color: color-mix(in srgb, var(--ink) 96%, white 4%) !important;
}
.app-shell.chat-mode .r3-chat-empty p {
  max-width: 560px !important;
  margin: 0 !important;
  color: color-mix(in srgb, var(--muted) 90%, var(--ink) 10%) !important;
  font-size: 12.5px !important;
  line-height: 1.62 !important;
  text-align: center !important;
}
@keyframes r3ChatOrbSpinX {
  from { transform: translateZ(0) rotateX(74deg) rotateZ(0deg); }
  to { transform: translateZ(0) rotateX(74deg) rotateZ(360deg); }
}
@keyframes r3ChatOrbSpinY {
  from { transform: translateZ(0) rotateY(74deg) rotateZ(0deg); }
  to { transform: translateZ(0) rotateY(74deg) rotateZ(360deg); }
}
@keyframes r3ChatOrbHalo {
  from { transform: rotateZ(0deg); }
  to { transform: rotateZ(360deg); }
}
@keyframes r3ChatParticleA {
  0% { transform: translate(0, 0) scale(.92); opacity: .78; }
  25% { transform: translate(18px, 12px) scale(1.08); opacity: 1; }
  50% { transform: translate(-2px, 26px) scale(.88); opacity: .74; }
  75% { transform: translate(-18px, 8px) scale(1.04); opacity: .96; }
  100% { transform: translate(0, 0) scale(.92); opacity: .78; }
}
@keyframes r3ChatParticleB {
  0% { transform: translate(0, 0) scale(.86); opacity: .72; }
  30% { transform: translate(22px, -16px) scale(1.08); opacity: .98; }
  60% { transform: translate(10px, -34px) scale(.9); opacity: .78; }
  100% { transform: translate(0, 0) scale(.86); opacity: .72; }
}
@keyframes r3ChatParticleC {
  0% { transform: translate(0, 0) scale(.84); opacity: .78; }
  40% { transform: translate(-20px, 18px) scale(1.02); opacity: 1; }
  70% { transform: translate(8px, 28px) scale(.92); opacity: .72; }
  100% { transform: translate(0, 0) scale(.84); opacity: .78; }
}

html.r3-mobile-device .app-shell.chat-mode .r3-chat-empty {
  width: 100% !important;
  padding: 2px 0 4px !important;
  gap: 10px !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-empty-hero {
  min-height: 224px !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-empty-orb {
  width: 184px !important;
  height: 184px !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-empty-orb::before {
  inset: 22px !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-empty-orb::after {
  inset: 38px !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-empty-orb-core span {
  font-size: 30px !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-empty-orb-core small {
  font-size: 8.5px !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-empty-orb-ring.ring-a,
html.r3-mobile-device .app-shell.chat-mode .r3-chat-empty-orb-ring.ring-b {
  width: 184px !important;
  height: 74px !important;
  margin: -37px 0 0 -92px !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-empty-orb-ring.ring-c {
  width: 144px !important;
  height: 144px !important;
  margin: -72px 0 0 -72px !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-empty-orb-ring.ring-d {
  width: 200px !important;
  height: 200px !important;
  margin: -100px 0 0 -100px !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-empty h2 {
  font-size: 22px !important;
}
html.r3-mobile-device .app-shell.chat-mode .r3-chat-empty p {
  max-width: 320px !important;
  font-size: 11px !important;
}
@media (prefers-reduced-motion: reduce) {
  .app-shell.chat-mode .r3-chat-empty,
  .app-shell.chat-mode .r3-chat-empty-orb-ring,
  .app-shell.chat-mode .r3-chat-empty-orb-particle {
    animation: none !important;
    transition: none !important;
  }
}

/* Keep the empty-chat hero unboxed on phones, too. */
html.r3-mobile-device .app-shell.chat-mode .r3-chat-empty {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* Chat dictation: align the same microphone used by node inputs inside the
   composer top-right. Keep the attachment action beside it, not stacked. */
.app-shell.chat-mode .r3-chat-input-wrap.voice-dictation-field {
  position: relative !important;
  padding: 4px 5px !important;
  overflow: visible !important;
}
.app-shell.chat-mode .r3-chat-input-wrap.voice-dictation-field textarea.voice-dictation-target {
  box-sizing: border-box !important;
  width: 100% !important;
  padding: 7px 85px 7px 8px !important;
}
.app-shell.chat-mode .r3-chat-input-wrap.voice-dictation-field .voice-dictation-controls {
  position: absolute !important;
  top: 7px !important;
  right: 7px !important;
  bottom: auto !important;
  left: auto !important;
  width: 30px !important;
  height: 30px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: row-reverse !important;
  z-index: 11 !important;
  pointer-events: none !important;
}
.app-shell.chat-mode .r3-chat-input-wrap.voice-dictation-field .voice-dictation-btn {
  box-sizing: border-box !important;
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid var(--chat-edge, var(--line)) !important;
  border-radius: var(--chat-radius, 4px) !important;
  background: var(--panel-2) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
  transform: none !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}
.app-shell.chat-mode .r3-chat-input-wrap.voice-dictation-field .voice-dictation-btn:hover:not(.is-unavailable),
.app-shell.chat-mode .r3-chat-input-wrap.voice-dictation-field .voice-dictation-btn:focus-visible {
  border-color: var(--chat-edge-strong, var(--accent)) !important;
  background: var(--chat-surface-raised, var(--panel)) !important;
  outline: none !important;
}
.app-shell.chat-mode .r3-chat-input-wrap.voice-dictation-field .voice-dictation-btn.is-listening {
  border-color: var(--danger) !important;
  background: color-mix(in srgb, var(--danger) 78%, var(--accent) 22%) !important;
  color: #fff !important;
}
.app-shell.chat-mode .r3-chat-input-wrap.voice-dictation-field .r3-chat-attach-btn {
  position: absolute !important;
  top: 8px !important;
  right: 44px !important;
  bottom: auto !important;
  left: auto !important;
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  z-index: 10 !important;
}
/* During recording, display the status above the mic instead of allowing it
   to enlarge or move the button (the composer is close to the viewport edge). */
.app-shell.chat-mode .r3-chat-input-wrap.voice-dictation-field .voice-dictation-status {
  position: absolute !important;
  top: auto !important;
  right: 0 !important;
  bottom: calc(100% + 7px) !important;
  left: auto !important;
  width: max-content !important;
  max-width: min(250px, 65vw) !important;
  border-radius: var(--chat-radius, 4px) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.18) !important;
  z-index: 12 !important;
}
@media (max-width: 760px) {
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-input-wrap.voice-dictation-field {
    padding: 5px !important;
    overflow: visible !important;
  }
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-input-wrap.voice-dictation-field textarea.voice-dictation-target {
    padding: 8px 82px 8px 8px !important;
  }
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-input-wrap.voice-dictation-field .voice-dictation-controls {
    top: 8px !important;
    right: 8px !important;
    bottom: auto !important;
    left: auto !important;
    width: 30px !important;
    height: 30px !important;
    flex-direction: row-reverse !important;
  }
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-input-wrap.voice-dictation-field .r3-chat-attach-btn {
    top: 9px !important;
    right: 45px !important;
    bottom: auto !important;
    left: auto !important;
  }
  html.r3-mobile-device .app-shell.chat-mode .r3-chat-input-wrap.voice-dictation-field .voice-dictation-status {
    top: auto !important;
    right: 0 !important;
    bottom: calc(100% + 7px) !important;
  }
}


/* ============================================================================
   R3D3 Atelier: Elegance collection, v2
   Dark: midnight emerald, blackened metal, champagne gold.
   Light: porcelain, vellum, walnut ink, brushed bronze.
   Completely opt-in; Light / Dark / Night and functional UI remain unchanged.
   ============================================================================ */
html[data-theme="dark-elegance"] {
  --bg: #0a1516;
  --panel: #102020;
  --panel-2: #1c302d;
  --canvas: #081113;
  --ink: #f5f0e7;
  --muted: #a9b8b0;
  --line: #aa9261;
  --soft-line: #354e46;
  --accent: #d6b875;
  --accent-ink: #1b221d;
  --accent-2: #eedba5;
  --agent: #263e39;
  --gate: #5b4933;
  --output: #2a4f43;
  --checklist: #514b35;
  --check-gold: #d9b56b;
  --check-gold-ink: #151e1c;
  --task-splitter: #49465b;
  --merge: #5d4937;
  --danger: #e18c81;
  --ok: #a5ccad;
  --warning: #e1b978;
  --shadow: rgba(0, 8, 6, .23);
  --shadow-strong: rgba(0, 8, 6, .48);
  --shadow-ambient: rgba(0, 8, 6, .72);
  --surface-highlight: rgba(239, 218, 169, .055);
  --surface-raised: #19302b;
  --surface-raised-2: #243b34;
  --panel-glow: rgba(219, 183, 108, .12);
  --el-deep: #091719;
  --el-layer: #142623;
  --el-raised: #203630;
  --el-border: rgba(184, 170, 129, .20);
  --el-shine: rgba(248, 228, 171, .13);
  --el-foil: linear-gradient(120deg, #967241 0%, #cbaa67 26%, #eed9a1 48%, #c4a065 76%, #937044 100%);
  --el-soft-shadow: 0 8px 26px rgba(0, 8, 7, .23);
  color-scheme: dark;
}
html[data-theme="light-elegance"] {
  --bg: #f1ece1;
  --panel: #fffcf6;
  --panel-2: #eae2d3;
  --canvas: #f4efe6;
  --ink: #2a2c26;
  --muted: #6e7165;
  --line: #9a7b49;
  --soft-line: #d8cdb7;
  --accent: #94703e;
  --accent-ink: #ffffff;
  --accent-2: #ac8752;
  --agent: #4b5349;
  --gate: #8d7150;
  --output: #55725d;
  --checklist: #887850;
  --check-gold: #9b7843;
  --check-gold-ink: #fffaf0;
  --task-splitter: #80738b;
  --merge: #a18463;
  --danger: #a65048;
  --ok: #3f765a;
  --warning: #957038;
  --shadow: rgba(89, 66, 34, .08);
  --shadow-strong: rgba(89, 66, 34, .17);
  --shadow-ambient: rgba(65, 48, 27, .11);
  --surface-highlight: rgba(255, 255, 255, .92);
  --surface-raised: #fffbf2;
  --surface-raised-2: #f5eedf;
  --panel-glow: rgba(165, 127, 64, .10);
  --el-deep: #f4efe5;
  --el-layer: #fffcf6;
  --el-raised: #f7f0e5;
  --el-border: rgba(143, 110, 56, .20);
  --el-shine: rgba(255, 255, 255, .9);
  --el-foil: linear-gradient(120deg, #8c6937 0%, #b78e4f 26%, #d6b67b 50%, #b48b4a 74%, #816033 100%);
  --el-soft-shadow: 0 8px 26px rgba(87, 66, 37, .085);
  color-scheme: light;
}
html:is([data-theme="dark-elegance"],[data-theme="light-elegance"]),
html:is([data-theme="dark-elegance"],[data-theme="light-elegance"]) .app-shell.chat-mode {
  --chat-radius: 9px;
  --chat-radius-sm: 6px;
  --chat-edge: color-mix(in srgb, var(--soft-line) 78%, transparent);
  --chat-edge-strong: color-mix(in srgb, var(--accent) 46%, var(--soft-line));
  --chat-surface: var(--bg);
  --chat-surface-raised: var(--panel);
  --chat-surface-soft: var(--panel-2);
  --rail-edge: color-mix(in srgb, var(--soft-line) 80%, transparent);
  --rail-edge-strong: color-mix(in srgb, var(--accent) 38%, var(--soft-line));
  --rail-surface: var(--panel);
  --rail-surface-2: var(--panel-2);
  --rail-surface-hover: color-mix(in srgb, var(--panel-2) 87%, var(--accent) 13%);
  --r3-elegance-foil: var(--el-foil);
}
/* Distinct, illuminated frame without changing header geometry or mobile buttons. */
html:is([data-theme="dark-elegance"],[data-theme="light-elegance"]) .topbar {
  position: relative;
  background: linear-gradient(105deg, var(--panel), color-mix(in srgb, var(--panel) 80%, var(--panel-2))) !important;
  border-bottom: 1px solid var(--soft-line) !important;
  box-shadow: 0 6px 22px var(--shadow) !important;
}
html:is([data-theme="dark-elegance"],[data-theme="light-elegance"]) .topbar::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 44%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--accent) 30%, transparent 100%);
  opacity: .72;
  pointer-events: none;
}
html:is([data-theme="dark-elegance"],[data-theme="light-elegance"]) :is(.brand-mark,.cv-brand) {
  color: var(--ink);
  font-weight: 850;
  letter-spacing: .18em;
  text-shadow: 0 0 22px color-mix(in srgb, var(--accent) 12%, transparent);
}
html:is([data-theme="dark-elegance"],[data-theme="light-elegance"]) :is(.panel,.r3-chat-sidebar,.r3-chat-composer) {
  background: linear-gradient(165deg, var(--panel), color-mix(in srgb, var(--panel) 92%, var(--panel-2))) !important;
  border-color: var(--soft-line) !important;
}
html:is([data-theme="dark-elegance"],[data-theme="light-elegance"]) :is(.panel-section,.r3-chat-panel,.r3-chat-panel-head,.r3-chat-workspace-top) {
  border-color: var(--el-border) !important;
}
html:is([data-theme="dark-elegance"],[data-theme="light-elegance"]) :is(.panel-section h2,.r3-chat-panel-title b,.cv-section h3) {
  color: color-mix(in srgb, var(--accent) 78%, var(--ink));
  letter-spacing: .13em !important;
  font-weight: 800;
}
html:is([data-theme="dark-elegance"],[data-theme="light-elegance"]) :is(.topbar-more-panel,.theme-picker,.r3-chat-input-wrap) {
  border-color: var(--el-border) !important;
}
html:is([data-theme="dark-elegance"],[data-theme="light-elegance"]) .theme-picker-select {
  min-width: 112px;
  max-width: 100%;
  font-weight: 750;
  letter-spacing: .025em;
}
/* Brushed-metal actions; use bold foil only for the principal action. */
html:is([data-theme="dark-elegance"],[data-theme="light-elegance"]) :is(.ui-btn,.toolbar-btn,.node-palette,.r3-chat-send) {
  border-radius: 8px !important;
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, color .16s ease !important;
}
html:is([data-theme="dark-elegance"],[data-theme="light-elegance"]) :is(.ui-btn,.toolbar-btn,.node-palette):not(.primary):hover {
  border-color: color-mix(in srgb, var(--accent) 57%, var(--soft-line)) !important;
  background: color-mix(in srgb, var(--panel-2) 82%, var(--accent) 18%) !important;
  box-shadow: inset 0 1px 0 var(--el-shine) !important;
}
html:is([data-theme="dark-elegance"],[data-theme="light-elegance"]) :is(.ui-btn.primary,.r3-chat-send,.run-btn):not([disabled]) {
  background: var(--el-foil) !important;
  border: 1px solid color-mix(in srgb, var(--accent) 75%, var(--panel)) !important;
  color: #191c18 !important;
  font-weight: 850 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.22) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 5px 15px color-mix(in srgb, var(--accent) 12%, transparent) !important;
}
html:is([data-theme="dark-elegance"],[data-theme="light-elegance"]) :is(.ui-btn.primary,.r3-chat-send,.run-btn):not([disabled]):hover {
  filter: brightness(1.075);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.30), 0 6px 20px color-mix(in srgb, var(--accent) 20%, transparent) !important;
}
html:is([data-theme="dark-elegance"],[data-theme="light-elegance"]) :is(button,input,select,textarea):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
html:is([data-theme="dark-elegance"],[data-theme="light-elegance"]) :is(input,select,textarea) {
  caret-color: var(--accent);
}
html:is([data-theme="dark-elegance"],[data-theme="light-elegance"]) :is(input:not([type=checkbox]):not([type=radio]),textarea,select) {
  border-color: var(--soft-line);
  background-color: var(--el-deep);
}
/* Velvet and porcelain are visually different canvas treatments. */
html[data-theme="dark-elegance"] .canvas-wrap {
  background:
    radial-gradient(ellipse at 68% 12%, rgba(39, 85, 70, .24), transparent 48%),
    radial-gradient(ellipse at 8% 88%, rgba(115, 85, 44, .07), transparent 42%),
    linear-gradient(rgba(193, 178, 127, .043) 1px, transparent 1px),
    linear-gradient(90deg, rgba(193, 178, 127, .043) 1px, transparent 1px),
    #071315 !important;
  background-size: auto,auto,42px 42px,42px 42px,auto !important;
}
html[data-theme="light-elegance"] .canvas-wrap {
  background:
    radial-gradient(ellipse at 60% 12%, rgba(205, 179, 124, .13), transparent 50%),
    linear-gradient(rgba(125, 105, 74, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125, 105, 74, .07) 1px, transparent 1px),
    #f4efe6 !important;
  background-size: auto,42px 42px,42px 42px,auto !important;
}
html:is([data-theme="dark-elegance"],[data-theme="light-elegance"]) .r3-node:not(.is-truefalse-diamond):not(.is-router-agent) {
  border-color: var(--el-border) !important;
  border-radius: 10px !important;
  box-shadow: var(--el-soft-shadow), inset 0 1px 0 var(--el-shine) !important;
}
html:is([data-theme="dark-elegance"],[data-theme="light-elegance"]) .r3-node.selected {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 5px color-mix(in srgb,var(--accent) 9%,transparent), var(--el-soft-shadow) !important;
}
html:is([data-theme="dark-elegance"],[data-theme="light-elegance"]) :is(.r3-node .node-head,.r3-node .node-header) {
  border-bottom-color: var(--el-border) !important;
}
html:is([data-theme="dark-elegance"],[data-theme="light-elegance"]) .app-shell.chat-mode .r3-chat-main {
  background:
    radial-gradient(ellipse at 50% -25%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 68%),
    var(--bg) !important;
}
html:is([data-theme="dark-elegance"],[data-theme="light-elegance"]) .app-shell.chat-mode .r3-chat-messages {
  background: transparent !important;
}
html:is([data-theme="dark-elegance"],[data-theme="light-elegance"]) .app-shell.chat-mode .r3-chat-workspace-top {
  background: color-mix(in srgb, var(--panel) 75%, transparent) !important;
  border-bottom-color: var(--el-border) !important;
}
html:is([data-theme="dark-elegance"],[data-theme="light-elegance"]) .app-shell.chat-mode .r3-chat-row.user .r3-chat-bubble {
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--soft-line)) !important;
  border-radius: 12px !important;
  background: linear-gradient(128deg, var(--panel), color-mix(in srgb, var(--panel) 76%, var(--panel-2))) !important;
  box-shadow: inset 0 1px 0 var(--el-shine), 0 4px 15px var(--shadow) !important;
}
html:is([data-theme="dark-elegance"],[data-theme="light-elegance"]) .app-shell.chat-mode .r3-chat-bubble-content :is(h1,h2,h3),
html:is([data-theme="dark-elegance"],[data-theme="light-elegance"]) .app-shell.chat-mode .r3-chat-empty h2 {
  font-family: Georgia, "Times New Roman", serif !important;
  font-weight: 650 !important;
  letter-spacing: -.028em !important;
}
html:is([data-theme="dark-elegance"],[data-theme="light-elegance"]) .app-shell.chat-mode .r3-chat-empty h2 {
  font-size: clamp(25px, 3.1vw, 35px) !important;
}
html:is([data-theme="dark-elegance"],[data-theme="light-elegance"]) .app-shell.chat-mode .r3-chat-input-wrap {
  border-radius: 11px !important;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--soft-line)) !important;
  background: var(--el-layer) !important;
  box-shadow: inset 0 1px 0 var(--el-shine), var(--el-soft-shadow) !important;
}
html:is([data-theme="dark-elegance"],[data-theme="light-elegance"]) .app-shell.chat-mode .r3-chat-input-wrap:focus-within {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent), inset 0 1px 0 var(--el-shine) !important;
}
html:is([data-theme="dark-elegance"],[data-theme="light-elegance"]) .app-shell.chat-mode :is(.r3-chat-live-run,.run-summary-card.run-summary-chat) {
  border: 1px solid var(--el-border) !important;
  border-radius: 10px !important;
  background: color-mix(in srgb, var(--panel) 75%, var(--bg)) !important;
  box-shadow: inset 0 1px 0 var(--el-shine) !important;
}
html:is([data-theme="dark-elegance"],[data-theme="light-elegance"]) .app-shell.chat-mode .r3-chat-live-metrics b {
  color: var(--accent) !important;
}
/* Subtle golden wordmark and rings: no extra empty-state cards or panels. */
html:is([data-theme="dark-elegance"],[data-theme="light-elegance"]) .r3-chat-empty-orb::before {
  background: radial-gradient(circle at 33% 25%, color-mix(in srgb,var(--accent) 42%,white), color-mix(in srgb,var(--accent) 33%,var(--panel)) 22%, var(--panel) 60%, var(--bg)) !important;
  box-shadow: inset 0 0 0 1px var(--el-border), inset 0 16px 22px color-mix(in srgb,white 8%,transparent), inset 0 -24px 34px var(--shadow-strong) !important;
}
html:is([data-theme="dark-elegance"],[data-theme="light-elegance"]) .r3-chat-empty-orb-ring {
  border-color: color-mix(in srgb, var(--accent) 54%, transparent) !important;
}
html:is([data-theme="dark-elegance"],[data-theme="light-elegance"]) .r3-chat-empty-orb-particle {
  background: linear-gradient(180deg,#f1dfad,#be995b) !important;
  box-shadow: 0 0 0 6px rgba(194,155,89,.06),0 0 18px rgba(194,155,89,.25) !important;
}
html:is([data-theme="dark-elegance"],[data-theme="light-elegance"]) .r3-chat-empty-orb-core span {
  color: var(--ink) !important;
  text-shadow: 0 0 19px color-mix(in srgb,var(--accent) 24%,transparent) !important;
}
html:is([data-theme="dark-elegance"],[data-theme="light-elegance"]) .r3-chat-empty-orb-core small {
  color: var(--muted) !important;
}
/* Light-mode readability: several legacy node tools assume a dark palette. */
html[data-theme="light-elegance"] :is(.r3-node:not(.is-truefalse-diamond):not(.is-router-agent),.option-card,.output-card,.viewer-card,.setup-card-v2) {
  background-color: var(--panel) !important;
  color: var(--ink);
}
html[data-theme="light-elegance"] .app-shell.chat-mode :is(.r3-chat-input,.r3-chat-input-wrap,textarea,input,select) {
  color: var(--ink) !important;
}
html[data-theme="light-elegance"] .r3-chat-bubble pre {
  background: #f6efe4 !important;
}
html[data-theme="dark-elegance"] .r3-chat-empty-orb-core span { color: #fff9e9 !important; }
@media (max-width: 720px) {
  html:is([data-theme="dark-elegance"],[data-theme="light-elegance"]) .theme-picker-select {
    min-width: 100px;
    max-width: 100%;
  }
}

/* Boutique details are reserved for headings and identity, not body copy. */
html:is([data-theme="dark-elegance"],[data-theme="light-elegance"]) .brand-mark,
html:is([data-theme="dark-elegance"],[data-theme="light-elegance"]) .r3-chat-empty-orb-core span {
  background: var(--el-foil);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
html:is([data-theme="dark-elegance"],[data-theme="light-elegance"]) .panel-section h2 {
  border-left: 2px solid color-mix(in srgb,var(--accent) 65%,transparent);
  padding-left: 9px;
}
html:is([data-theme="dark-elegance"],[data-theme="light-elegance"]) .app-shell.chat-mode .r3-chat-avatar {
  border-color: color-mix(in srgb,var(--accent) 36%,var(--soft-line)) !important;
  background: var(--panel-2) !important;
  color: var(--accent) !important;
}

html:is([data-theme="dark-elegance"],[data-theme="light-elegance"]) .app-shell.chat-mode .r3-chat-composer,
html:is([data-theme="dark-elegance"],[data-theme="light-elegance"]) .app-shell.chat-mode .r3-chat-sidebar {
  background: linear-gradient(165deg,var(--panel),color-mix(in srgb,var(--panel) 88%,var(--panel-2))) !important;
  border-color: var(--el-border) !important;
}

/* Run-usage tooltip: readable live-context estimate, separate from summed billing. */
.r3-chat-cost-tip-current {
  display: grid !important;
  gap: 4px !important;
  min-width: 0 !important;
  padding: 11px 12px !important;
  border-radius: 9px !important;
  border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--soft-line)) !important;
  background: color-mix(in srgb, var(--accent) 9%, var(--panel)) !important;
}
.r3-chat-cost-tip-current > small {
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
  color: var(--accent) !important;
  text-transform: uppercase !important;
}
.r3-chat-cost-tip-current > strong {
  font-size: 21px !important;
  font-weight: 850 !important;
  letter-spacing: -.035em !important;
  line-height: 1.25 !important;
  color: var(--ink) !important;
  font-variant-numeric: tabular-nums !important;
}
.r3-chat-cost-tip-current > em {
  font-size: 9px !important;
  font-style: normal !important;
  line-height: 1.45 !important;
  color: var(--muted) !important;
}
.r3-chat-cost-tip-current.is-unavailable > strong {
  font-size: 14px !important;
}
.r3-chat-cost-tip-sources {
  border-top: 1px solid var(--soft-line) !important;
  padding-top: 8px !important;
}
.r3-chat-cost-tip-portal .r3-chat-cost-tip-current {
  margin: 0 !important;
}
@media (prefers-reduced-motion: reduce) {
  .r3-chat-cost-tip-portal { transition: none !important; }
}

/* Pending Ask User — per-workspace attention indicator.
   Displayed only for a live unanswered ask_user interaction. */
.r3-workspace-tab.is-awaiting-ask-user {
  border-color: color-mix(in srgb, #c6a15c 52%, var(--soft-line));
}
.r3-workspace-tab.is-awaiting-ask-user .r3-workspace-tab-main {
  grid-template-columns: 8px minmax(0, 1fr) 11px;
}
.r3-workspace-tab.is-awaiting-ask-user .r3-workspace-tab-status {
  background: #d5ae65;
  opacity: 1;
  box-shadow: 0 0 0 2px rgba(213, 174, 101, .14);
  animation: none;
}
.r3-workspace-ask-user-dot {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e7b75d;
  box-shadow: 0 0 0 2px rgba(231, 183, 93, .13);
  animation: r3-workspace-ask-user-pulse 1.8s ease-in-out infinite;
}
@keyframes r3-workspace-ask-user-pulse {
  50% { opacity: .65; box-shadow: 0 0 0 5px rgba(231, 183, 93, .04); }
}
@media (prefers-reduced-motion: reduce) {
  .r3-workspace-ask-user-dot { animation: none; }
}

/* Parallel workspace lifecycle: app-ready handshake and recoverable loading UI. */
.r3-workspace-tab-loading {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
  background: var(--bg);
  color: var(--ink);
}
.r3-workspace-tab-loading[hidden] { display: none !important; }
.r3-workspace-tab-loading strong {
  font-size: 15px;
  font-weight: 750;
  letter-spacing: -.015em;
}
.r3-workspace-tab-loading > span {
  max-width: 380px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--muted);
}
.r3-workspace-tab-loader {
  width: 30px;
  height: 30px;
  margin-bottom: 4px;
  border: 2px solid color-mix(in srgb, var(--accent) 14%, var(--line));
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: r3-workspace-loading-spin 1s linear infinite;
}
@keyframes r3-workspace-loading-spin { to { transform: rotate(360deg); } }
.r3-workspace-tab-loading [data-workspace-retry] {
  margin-top: 4px;
  border-color: color-mix(in srgb, var(--accent) 50%, var(--line));
}
@media (prefers-reduced-motion: reduce) {
  .r3-workspace-tab-loader { animation: none; border-top-width: 3px; }
}

/* Chat output export: a small, quiet utility modal in the existing design system. */
.r3-chat-save-dialog,
.r3-gh-agent-approval {
  position: fixed; inset: 0; margin: auto; padding: 0;
  max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px);
  width: min(480px, calc(100vw - 24px));
  background: var(--panel, #171c20); color: var(--ink, #e7e9eb);
  border: 1px solid var(--line, #434d52); border-radius: 18px;
  box-shadow: 0 24px 76px rgba(0,0,0,.45); overflow: auto;
}
.r3-gh-agent-approval { width: min(540px, calc(100vw - 24px)); }
.r3-chat-save-dialog::backdrop,
.r3-gh-agent-approval::backdrop { background: rgba(4,8,14,.70); backdrop-filter: blur(5px); }
.r3-chat-save-form, .r3-gh-agent-card { padding: 23px; display: grid; gap: 16px; min-width: 0; }
.r3-chat-save-head, .r3-gh-agent-card header { display: flex; align-items: center; gap: 12px; min-width: 0; }
.r3-chat-save-head > div, .r3-gh-agent-card header > div { min-width: 0; flex: 1; display: grid; gap: 4px; }
.r3-chat-save-head strong, .r3-gh-agent-card header strong { font-size: 17px; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; }
.r3-chat-save-head small, .r3-gh-agent-card header small { font-size: 11px; color: var(--muted); letter-spacing: .035em; }
.r3-chat-save-symbol, .r3-gh-agent-icon { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 11%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line)); color: var(--accent); font-size: 18px; }
.r3-chat-save-form label { display: grid; min-width: 0; gap: 7px; font-size: 11px; font-weight: 700; color: var(--ink); }
.r3-chat-save-form select, .r3-chat-save-form input {
  display: block; box-sizing: border-box; width: 100%; min-width: 0; height: 42px;
  padding: 8px 11px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel-2, #22272d); color: var(--ink);
  font: inherit; font-size: 12px;
}
.r3-chat-save-form select:focus-visible, .r3-chat-save-form input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.r3-chat-save-path { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 11px; min-width: 0; }
.r3-chat-save-form [data-save-hint], .r3-gh-agent-note { margin: 0; font-size: 11px; line-height: 1.55; color: var(--muted); }
.r3-chat-save-error, .r3-gh-agent-error { margin: 0; min-height: 1em; font-size: 11px; color: #e2a0a0; }
.r3-chat-save-actions, .r3-gh-agent-card footer { display: flex; justify-content: flex-end; gap: 9px; flex-wrap: wrap; }
.r3-gh-agent-card > p { margin: 0; line-height: 1.6; font-size: 12px; color: var(--muted); }
.r3-gh-agent-card > p b { color: var(--ink); }
.r3-gh-agent-card dl { margin: 0; display: grid; gap: 8px; }
.r3-gh-agent-card dl > div { display: grid; grid-template-columns: 90px minmax(0,1fr); gap: 10px; font-size: 12px; }
.r3-gh-agent-card dt { color: var(--muted); }
.r3-gh-agent-card dd { margin: 0; overflow-wrap: anywhere; font-weight: 750; }
.r3-gh-agent-changes { padding: 12px; display: grid; gap: 6px; min-height: 44px; max-height: 190px; overflow-y: auto; border-radius: 12px; border: 1px solid var(--line); background: color-mix(in srgb, var(--panel-2) 72%, transparent); }
.r3-gh-agent-changes small { color: var(--muted); font-size: 10px; letter-spacing: .07em; font-weight: 800; }
.r3-gh-agent-changes > div { font-size: 11px; color: var(--ink); overflow-wrap: anywhere; }
.r3-gh-agent-changes > p { margin: 0; font-size: 11px; color: var(--muted); }
@media (max-width: 540px) { .r3-chat-save-form, .r3-gh-agent-card { padding: 17px; gap: 13px; } .r3-chat-save-path { grid-template-columns: 1fr; } }
/* Browser Probe inspector: scoped tool activity cards and readable nested details.
   Only panel chrome is styled; the browser iframe remains untouched. */
.r3-browser-probe-modal .browser-probe-inspector {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-content: stretch;
  gap: 8px;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 12px;
}
.r3-browser-probe-modal .browser-probe-activity-pane {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--soft-line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel) 94%, var(--bg));
}
.r3-browser-probe-modal .browser-probe-pane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 10px 12px;
  border-bottom: 1px solid var(--soft-line);
  background: color-mix(in srgb, var(--panel-2) 74%, var(--panel));
}
.r3-browser-probe-modal .browser-probe-pane-title {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.r3-browser-probe-modal .browser-probe-pane-title strong {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .01em;
  color: var(--ink);
}
.r3-browser-probe-modal .browser-probe-pane-title > span {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
}
.r3-browser-probe-modal .browser-probe-pane-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
}
.r3-browser-probe-modal .browser-probe-activity-count {
  white-space: nowrap;
  padding: 4px 7px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 19%, var(--soft-line));
  border-radius: 5px;
  font-size: 10px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}
.r3-browser-probe-modal .browser-probe-pane-actions button {
  appearance: none;
  min-width: 0;
  padding: 5px 8px;
  border: 1px solid var(--soft-line);
  border-radius: 5px;
  background: var(--panel);
  color: var(--muted);
  font: 700 10px/1.2 ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.r3-browser-probe-modal .browser-probe-pane-actions button:hover,
.r3-browser-probe-modal .browser-probe-pane-actions button:focus-visible {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--soft-line));
  background: color-mix(in srgb, var(--accent) 7%, var(--panel));
}
.r3-browser-probe-modal .browser-probe-activity-list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  min-height: 0;
  min-width: 0;
  padding: 10px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.r3-browser-probe-modal .browser-probe-activity-empty {
  display: grid;
  place-content: center;
  gap: 6px;
  min-height: 110px;
  padding: 14px;
  color: var(--muted);
  text-align: center;
  line-height: 1.45;
}
.r3-browser-probe-modal .browser-probe-activity-empty strong {
  color: var(--ink);
  font-size: 12px;
}
.r3-browser-probe-modal .browser-probe-activity-empty span { font-size: 11px; }
.r3-browser-probe-modal .browser-probe-activity-item {
  flex: 0 0 auto;
  min-width: 0;
  margin: 0;
  border: 1px solid var(--soft-line);
  border-radius: 9px;
  background: color-mix(in srgb, var(--panel-2) 35%, var(--panel));
  overflow: hidden;
  transition: border-color .16s ease, background .16s ease;
}
.r3-browser-probe-modal .browser-probe-activity-item[open] {
  border-color: color-mix(in srgb, var(--accent) 20%, var(--soft-line));
  background: var(--panel);
}
.r3-browser-probe-modal .browser-probe-activity-item[data-status="error"] {
  border-color: color-mix(in srgb, var(--danger) 42%, var(--soft-line));
}
.r3-browser-probe-modal .browser-probe-activity-item > .browser-probe-activity-summary {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  min-height: 42px;
  padding: 9px 11px;
  list-style: none;
  cursor: pointer;
  user-select: none;
  background: color-mix(in srgb, var(--panel-2) 54%, var(--panel));
}
.r3-browser-probe-modal .browser-probe-activity-item > summary::-webkit-details-marker,
.r3-browser-probe-modal .browser-probe-activity-section > summary::-webkit-details-marker,
.r3-browser-probe-modal .browser-probe-report-drawer > summary::-webkit-details-marker { display: none; }
.r3-browser-probe-modal .browser-probe-activity-summary::before,
.r3-browser-probe-modal .browser-probe-activity-section > summary::before,
.r3-browser-probe-modal .browser-probe-report-drawer > summary::before {
  content: '';
  display: block;
  flex: 0 0 6px;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  opacity: .7;
  transition: transform .16s ease;
}
.r3-browser-probe-modal .browser-probe-activity-item[open] > summary::before,
.r3-browser-probe-modal .browser-probe-activity-section[open] > summary::before,
.r3-browser-probe-modal .browser-probe-report-drawer[open] > summary::before {
  transform: rotate(45deg);
}
.r3-browser-probe-modal .browser-probe-activity-item > summary:hover {
  background: color-mix(in srgb, var(--accent) 5%, var(--panel-2));
}
.r3-browser-probe-modal .browser-probe-activity-kind {
  min-width: 0;
  flex: 1 1 auto;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.45;
}
.r3-browser-probe-modal .browser-probe-activity-summary-meta {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.r3-browser-probe-modal .browser-probe-activity-state {
  padding: 3px 6px;
  border: 1px solid var(--soft-line);
  border-radius: 4px;
  background: color-mix(in srgb, var(--muted) 7%, transparent);
  color: var(--muted);
  font: 800 9px/1.2 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .045em;
}
.r3-browser-probe-modal .browser-probe-activity-state[data-status="ok"],
.r3-browser-probe-modal .browser-probe-activity-state[data-status="closed"] {
  color: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 30%, var(--soft-line));
  background: color-mix(in srgb, var(--ok) 7%, transparent);
}
.r3-browser-probe-modal .browser-probe-activity-state[data-status="running"] {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 32%, var(--soft-line));
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.r3-browser-probe-modal .browser-probe-activity-state[data-status="error"] {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 35%, var(--soft-line));
  background: color-mix(in srgb, var(--danger) 7%, transparent);
}
.r3-browser-probe-modal .browser-probe-activity-state[data-status="warning"] {
  color: var(--warning);
  border-color: color-mix(in srgb, var(--warning) 35%, var(--soft-line));
  background: color-mix(in srgb, var(--warning) 7%, transparent);
}
.r3-browser-probe-modal .browser-probe-activity-summary-meta time {
  color: var(--muted);
  white-space: nowrap;
  font: 10px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}
.r3-browser-probe-modal .browser-probe-activity-body {
  display: grid;
  gap: 9px;
  min-width: 0;
  padding: 11px;
  border-top: 1px solid var(--soft-line);
}
.r3-browser-probe-modal .browser-probe-activity-reason {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  column-gap: 10px;
  row-gap: 5px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 13%, var(--soft-line));
  border-radius: 7px;
  background: color-mix(in srgb, var(--accent) 4%, var(--panel-2));
  line-height: 1.55;
}
.r3-browser-probe-modal .browser-probe-activity-reason b {
  color: var(--accent);
  font-size: 9px;
  letter-spacing: .085em;
  line-height: 1.9;
}
.r3-browser-probe-modal .browser-probe-activity-reason span {
  color: var(--ink);
  font-size: 11px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.r3-browser-probe-modal .browser-probe-activity-section,
.r3-browser-probe-modal .browser-probe-report-drawer {
  min-width: 0;
  border: 1px solid var(--soft-line);
  border-radius: 7px;
  background: color-mix(in srgb, var(--panel-2) 55%, var(--panel));
  overflow: hidden;
}
.r3-browser-probe-modal .browser-probe-activity-section > summary,
.r3-browser-probe-modal .browser-probe-report-drawer > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 35px;
  padding: 8px 10px;
  list-style: none;
  cursor: pointer;
  color: var(--ink);
  background: color-mix(in srgb, var(--panel-2) 72%, var(--panel));
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .015em;
}
.r3-browser-probe-modal .browser-probe-activity-section > summary:hover,
.r3-browser-probe-modal .browser-probe-report-drawer > summary:hover {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, var(--panel-2));
}
.r3-browser-probe-modal .browser-probe-activity-section[open] > summary,
.r3-browser-probe-modal .browser-probe-report-drawer[open] > summary {
  border-bottom: 1px solid var(--soft-line);
}
.r3-browser-probe-modal .browser-probe-activity-section pre,
.r3-browser-probe-modal .browser-probe-report-drawer pre {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  max-height: 250px;
  margin: 0;
  padding: 11px 12px;
  border: 0;
  border-radius: 0;
  background: color-mix(in srgb, var(--bg) 80%, var(--panel));
  color: var(--ink);
  box-shadow: none;
  overflow: auto;
  overscroll-behavior: contain;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: 11px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  tab-size: 2;
}
.r3-browser-probe-modal .browser-probe-code-block pre {
  white-space: pre;
  overflow-wrap: normal;
  max-height: 340px;
}
.r3-browser-probe-modal .browser-probe-code-block code {
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  font: inherit;
  white-space: inherit;
}
.r3-browser-probe-modal .browser-probe-code-head {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 6px 9px;
  border-bottom: 1px solid var(--soft-line);
  background: color-mix(in srgb, var(--panel-2) 45%, var(--panel));
}
.r3-browser-probe-modal .browser-probe-code-copy {
  appearance: none;
  min-width: 0;
  border: 1px solid var(--soft-line);
  border-radius: 5px;
  padding: 4px 9px;
  background: var(--panel);
  color: var(--accent);
  font: 750 10px/1.2 ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
}
.r3-browser-probe-modal .browser-probe-code-copy:hover,
.r3-browser-probe-modal .browser-probe-code-copy:focus-visible {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, var(--panel));
}
.r3-browser-probe-modal .browser-probe-activity-section:focus-within,
.r3-browser-probe-modal .browser-probe-activity-item:focus-within {
  outline: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  outline-offset: 1px;
}
.r3-browser-probe-modal .browser-probe-report-drawer {
  flex: 0 0 auto;
  max-height: 210px;
  overflow: auto;
}
.r3-browser-probe-modal .browser-probe-report-drawer > summary {
  justify-content: flex-start;
}
.r3-browser-probe-modal .browser-probe-report-drawer > summary small {
  margin-left: auto;
  min-width: 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 500;
  text-align: right;
  overflow-wrap: anywhere;
}
.r3-browser-probe-modal .browser-probe-output {
  min-height: 0;
  max-height: 180px;
  height: auto;
}
/* The dock needs the pane header fixed while its list scrolls. */
.r3-browser-probe-modal.probe-docked .browser-probe-activity-pane { overflow: hidden; }
.r3-browser-probe-modal.probe-docked .browser-probe-activity-list { overflow: auto; }
.r3-browser-probe-modal.probe-docked .browser-probe-report-drawer { max-height: 130px; }
@media (max-width: 520px) {
  .r3-browser-probe-modal .browser-probe-pane-head { align-items: flex-start; flex-wrap: wrap; padding: 8px 9px; }
  .r3-browser-probe-modal .browser-probe-pane-title > span { display: none; }
  .r3-browser-probe-modal .browser-probe-pane-actions { gap: 4px; }
  .r3-browser-probe-modal .browser-probe-activity-list { padding: 7px; gap: 6px; }
  .r3-browser-probe-modal .browser-probe-activity-item > summary { flex-wrap: wrap; padding: 8px 9px; }
  .r3-browser-probe-modal .browser-probe-activity-summary-meta { margin-left: 15px; }
  .r3-browser-probe-modal .browser-probe-activity-body { padding: 8px; }
  .r3-browser-probe-modal .browser-probe-activity-reason { grid-template-columns: 1fr; gap: 3px; }
}
@media (prefers-reduced-motion: reduce) {
  .r3-browser-probe-modal .browser-probe-activity-item,
  .r3-browser-probe-modal .browser-probe-activity-summary::before,
  .r3-browser-probe-modal .browser-probe-activity-section > summary::before,
  .r3-browser-probe-modal .browser-probe-report-drawer > summary::before { transition: none; }
}

/* Ask User countdown doubles as an extend-time button. */
.human-input-countdown:not(.hidden) { cursor: pointer; font-family: inherit; line-height: 1.3; }
.human-input-countdown:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 22%, var(--bg)); }
.human-input-countdown:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.human-input-countdown:disabled { opacity: .65; cursor: not-allowed; }

/* Remote Filesystem tool / credential and approval UI. */
.remote-tool-choice { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; min-width:0; }
.remote-tool-choice .runtime-tool { display:flex; align-items:flex-start; min-width:0; gap:9px; }
.remote-tool-choice .runtime-tool > span { min-width:0; overflow-wrap:anywhere; }
.remote-tool-choice [data-remote-connect] { flex:none; align-self:center; }
.r3-remote-dialog { border:1px solid var(--line, #334552); background:var(--panel,#131e27); color:var(--ink,#e4edf5); padding:0; width:min(580px,calc(100vw - 22px)); max-height:min(86vh,790px); border-radius:14px; box-shadow:0 28px 100px rgba(0,0,0,.48); }
.r3-remote-dialog::backdrop { background:rgba(0,0,0,.72); backdrop-filter:blur(4px); }
.r3-remote-card { padding:22px; display:grid; gap:15px; margin:0; min-width:0; }
.r3-remote-card header { display:flex; gap:18px; align-items:start; justify-content:space-between; }
.r3-remote-card header small { color:var(--accent,#cbb27c); font-size:10px; font-weight:800; letter-spacing:.12em; }
.r3-remote-card h3 { font-size:20px; letter-spacing:-.02em; line-height:1.3; margin:6px 0; }
.r3-remote-card p { margin:0; color:var(--muted,#9aabb6); font-size:12px; line-height:1.55; }
.r3-remote-fields { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:11px; }
.r3-remote-fields label { display:grid; gap:6px; font-size:11px; font-weight:750; min-width:0; }
.r3-remote-fields label.r3-remote-wide { grid-column:1/-1; }
.r3-remote-fields input, .r3-remote-fields select { width:100%; min-width:0; border-radius:8px; border:1px solid var(--line,#32404b); background:var(--bg,#0a141e); color:var(--ink,#edf3f6); padding:10px 12px; box-sizing:border-box; outline-offset:2px; font-size:12px; }
.r3-remote-fields label small { color:var(--muted,#9aabb6); font-weight:400; line-height:1.45; }
.r3-remote-fields [hidden] { display:none !important; }
.r3-remote-feedback { min-height:0; color:#e69b91 !important; overflow-wrap:anywhere; white-space:pre-line; }
.r3-remote-card footer { display:flex; gap:8px; justify-content:flex-end; align-items:center; flex-wrap:wrap; }
.r3-remote-card footer > span { margin-right:auto; font-size:11px; color:var(--muted,#9aabb6); }
.r3-remote-connected { color:var(--ok,#8acba6); font-weight:700; }
.r3-remote-target { display:grid; gap:4px; border:1px solid var(--line,#32404b); background:var(--bg,#0a141e); padding:12px; border-radius:8px; overflow-wrap:anywhere; }
.r3-remote-target b { font-size:12px; }
.r3-remote-target span { font-size:11px; color:var(--muted,#9aabb6); }
.r3-remote-preview { background:var(--bg,#0b141b); border:1px solid var(--line,#32404b); color:var(--ink,#e4edf5); padding:12px; margin:0; border-radius:8px; font-size:11px; max-height:260px; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; }
@media(max-width:500px) { .r3-remote-card { padding:15px; } .r3-remote-fields { grid-template-columns:1fr; } .r3-remote-fields label { grid-column:1; } .remote-tool-choice { grid-template-columns:1fr; } .remote-tool-choice [data-remote-connect] { justify-self:start; } }

/* Agent V2 allowed-tools picker: one compact row per tool; full details stay in tooltip. */
.tool-checks > label,
.tool-checks .remote-tool-choice > label {
  min-height: 32px; padding: 5px 7px; display: flex; gap: 9px;
  align-items: center; min-width: 0;
}
.tool-checks > label > span,
.tool-checks .remote-tool-choice > label > span { min-width: 0; flex: 1; overflow: hidden; }
.tool-checks > label > span > b,
.tool-checks .remote-tool-choice > label > span > b { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: 1.15; }
.tool-checks label > span > small,
.tool-checks label > span .tool-effective-state { display: none !important; }
.tool-checks label .r3-tool-help {
  flex: 0 0 auto; width: 23px; height: 23px; margin-left: auto; padding: 0;
  color: var(--muted); background: transparent; border: 1px solid var(--soft-line);
  border-radius: 50%; cursor: help; font-size: 13px; line-height: 1;
}
.tool-checks label .r3-tool-help:hover,
.tool-checks label .r3-tool-help:focus-visible { color: var(--ink); border-color: var(--accent); }
.tool-checks .remote-tool-choice { grid-template-columns: minmax(0,1fr) auto; }
.tool-checks .remote-tool-choice > label { width: 100%; }
.tool-checks .remote-tool-choice > button { margin: 0; white-space: nowrap; }
.r3-tool-help-dialog,.r3-mcp-dialog {
  padding: 0; border: 1px solid var(--line); border-radius: 12px;
  background: var(--panel); color: var(--ink); width: min(600px, calc(100vw - 20px));
  max-height: min(85vh,800px); overflow: auto; box-shadow: 0 30px 90px rgba(0,0,0,.5);
}
.r3-tool-help-dialog::backdrop,.r3-mcp-dialog::backdrop { background: rgba(0,0,0,.7); }
.r3-tool-help-body { padding: 20px; display: grid; gap: 14px; }
.r3-tool-help-body h3,.r3-tool-help-body p { margin: 0; }
.r3-tool-help-body p { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; line-height: 1.55; }
.r3-tool-help-body button { justify-self: end; }
.r3-mcp-card { padding: 20px; display: grid; gap: 15px; }
.r3-mcp-card header { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; }
.r3-mcp-card header small { color: var(--accent); font-size: 11px; font-weight: 750; letter-spacing: .1em; }
.r3-mcp-card header h3 { margin: 5px 0; font-size: 21px; }
.r3-mcp-card p { margin: 0; font-size: 12px; line-height: 1.5; color: var(--muted); }
.r3-mcp-card footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.r3-mcp-card footer > span { margin-right: auto; font-size: 11px; color: var(--muted); }
.r3-mcp-list { display: grid; gap: 9px; max-height: 45vh; overflow: auto; }
.r3-mcp-entry { padding: 12px; border: 1px solid var(--soft-line); display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: start; gap: 8px; }
.r3-mcp-entry > div:first-child { min-width: 0; display: grid; gap: 5px; }
.r3-mcp-entry b { font-size: 13px; overflow-wrap: anywhere; }
.r3-mcp-entry small { font-size: 11px; color: var(--muted); overflow-wrap: anywhere; }
.r3-mcp-entry-actions { display: flex; gap: 5px; }
.r3-mcp-entry details > summary { cursor: pointer; font-size: 11px; color: var(--accent); }
.r3-mcp-tool-list { display: flex; flex-wrap: wrap; gap: 5px; padding: 8px 0; }
.r3-mcp-tool-list span { max-width: 100%; overflow-wrap: anywhere; padding: 3px 5px; border: 1px solid var(--soft-line); font-size: 10px; }
.r3-mcp-fields { display: grid; gap: 11px; }
.r3-mcp-fields label { display: grid; gap: 5px; font-size: 12px; letter-spacing: normal; text-transform: none; min-width: 0; }
.r3-mcp-fields label[hidden] { display: none !important; }
.r3-mcp-fields input:not([type="checkbox"]),.r3-mcp-fields select,.r3-mcp-fields textarea { width: 100%; min-width: 0; max-width: 100%; font-size: 13px; padding: 8px; }
.r3-mcp-fields .r3-mcp-check { display: flex; gap: 9px; align-items: center; }
.r3-mcp-fields .r3-mcp-check input { width: auto; }
.r3-mcp-feedback { min-height: 0; color: var(--danger) !important; overflow-wrap: anywhere; }
@media(max-width:500px) {
  .tool-checks .remote-tool-choice { grid-template-columns: minmax(0,1fr) auto; }
  .tool-checks .remote-tool-choice > button { justify-self: auto; }
  .r3-mcp-entry { grid-template-columns: minmax(0,1fr); }
  .r3-mcp-entry-actions { justify-content: flex-end; }
}

/* MCP activity: compact method name on the title line (Flow + Chat). */
.bubble-copy b .mcp-tool-inline-name,
.r3-chat-live-tool-copy b .mcp-tool-inline-name,
.live-tool-copy b .mcp-tool-inline-name,
.live-current-body b .mcp-tool-inline-name {
  color: var(--muted);
  font-size: .9em;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  opacity: .88;
}