.walle-session :where(.agent-ui-header, .agent-ui-work, .agent-ui-approval,
  .agent-ui-queue, .agent-ui-composer, .agent-ui-final-answer, .agent-ui-artifact) {
  box-sizing: border-box;
  color: var(--text-primary, #e8ecf8);
}
.walle-session .agent-ui-header { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.walle-session :where(.agent-ui-header-identity, .agent-ui-header-meta, .agent-ui-header-actions) { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.walle-session :where(.agent-ui-status, .agent-ui-fidelity, .agent-ui-chip) { border:1px solid var(--border, #37415f); border-radius:999px; padding:4px 8px; font-size:12px; }
.walle-session .agent-ui-fidelity[data-fidelity="native"] { color:#8be0b0; }
.walle-session :where(.agent-ui-fidelity[data-fidelity="runtime"], .agent-ui-fidelity[data-fidelity="pty"]) { color:#f4cf76; }
.walle-session .agent-ui-chip-label { color:var(--text-muted, #9099b5); margin-right:5px; }
.walle-session .agent-ui-work { position:sticky; top:0; z-index:3; display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--border, #37415f); border-radius:10px; background:var(--surface-raised, #222a3d); }
.walle-session .agent-ui-work[hidden] { display:none; }
.walle-session .agent-ui-work-summary { display:flex; align-items:center; gap:8px; min-width:0; flex:1; }
.walle-session .agent-ui-work-title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.walle-session .agent-ui-work-title::before { content:'·'; margin-right:8px; color:var(--fg-dim, #9aa1ba); }
.walle-session .agent-ui-work-progress { flex:0 0 auto; font-variant-numeric:tabular-nums; color:var(--accent, #7aa2f7); font-weight:700; }
.walle-session .agent-ui-work-details { margin-left:auto; }
.walle-session .agent-ui-work-list { display:grid; gap:4px; margin:8px 0 0; padding-left:22px; }
.walle-session .agent-ui-work-task[data-status="completed"] { color:var(--fg-dim, #9aa1ba); text-decoration:line-through; }
.walle-session .agent-ui-approval { padding:14px; border:1px solid #8d6f2d; border-radius:12px; background:color-mix(in srgb, #8d6f2d 12%, transparent); }
.walle-session .agent-ui-approval[data-status="resolved"] { border-color:#397656; }
.walle-session .agent-ui-approval[data-status="expired"] { opacity:.7; }
/* D-4d — "resolving" (post-click, pre-ack) must never look identical to
   "idle": a spinner plus explanatory text so the disabled buttons read as
   "in flight", not "broken". [data-error] is the re-arm's fallback when the
   ack timer above fires with no terminal outcome — visible, not silent. */
.walle-session .agent-ui-approval[data-status="resolving"] { opacity:.85; }
.walle-session .agent-ui-approval[data-status="resolving"]::before {
  content:'';
  display:inline-block;
  width:12px;
  height:12px;
  margin-right:6px;
  border-radius:50%;
  border:2px solid currentColor;
  border-top-color:transparent;
  vertical-align:-2px;
  animation:agent-ui-approval-spin 0.8s linear infinite;
}
.walle-session .agent-ui-approval[data-status="resolving"]::after {
  content:'Submitting…';
  font-size:12px;
  color:var(--text-muted, #9099b5);
}
.walle-session .agent-ui-approval[data-error] { border-color:#a3432f; }
.walle-session .agent-ui-approval .perm-error {
  margin-top:8px;
  font-size:12px;
  color:#ff9c9c;
}
@keyframes agent-ui-approval-spin { to { transform:rotate(360deg); } }
.walle-session :where(.agent-ui-approval-facts, .agent-ui-approval-actions) { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:10px; }
.walle-session .agent-ui-queue { display:grid; gap:10px; }
.walle-session .agent-ui-queue-list { display:grid; gap:7px; padding:0; margin:0; list-style:none; }
.walle-session .agent-ui-queue-item { display:flex; align-items:center; gap:8px; padding:8px; border:1px solid var(--border, #37415f); border-radius:8px; }
.walle-session .agent-ui-queue-text { min-width:0; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.walle-session .agent-ui-queue-send-mode { flex:0 0 auto; padding:2px 7px; border:1px solid var(--border, #37415f); border-radius:999px; color:var(--fg-dim, #9aa1ba); font-size:11px; }
.walle-session :where(.agent-ui-queue-item-actions, .agent-ui-queue-actions) { display:flex; gap:6px; flex-wrap:wrap; }
/* `flex-shrink:0` is load-bearing, not cosmetic. This node is a DIRECT flex
   item of the `.walle-session` column (`.walle-composer-persist` is
   `display:contents`), and its `overflow:hidden` zeroes the automatic minimum
   size — so with the default shrink factor there is nothing to stop it
   collapsing. Its sibling `.walle-web-surface` is `flex:1 1 auto`, i.e. a
   CONTENT-sized flex base, so a long conversation creates a large deficit that
   flexbox splits in proportion to base sizes: the taller the transcript, the
   more of the composer's height gets taken, until the toolbar and the input
   are clipped out of their own box and the hints row paints over them.
   Measured: at a 4000px transcript the composer collapsed 107px -> 22px.
   The legacy `.walle-input-bar` always carried `flex-shrink:0`; that guarantee
   was lost when the shared `createComposer()` wrapper became the flex item. */
.walle-session .agent-ui-composer {
  display:grid;
  gap:10px;
  min-width:0;
  width:100%;
  max-width:100%;
  overflow:hidden;
  flex-shrink:0;
}
.walle-session .agent-ui-composer-input { width:100%; resize:vertical; min-height:72px; border:1px solid var(--border, #37415f); border-radius:10px; padding:12px; color:inherit; background:var(--surface, #171c2a); }
.walle-session .agent-ui-composer-actions { display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
.walle-session .agent-ui-composer-mode { min-height:44px; border:1px solid var(--border, #37415f); border-radius:8px; padding:8px 30px 8px 10px; color:inherit; background:var(--surface-raised, #222a3d); }
.walle-session :where(.agent-ui-button, .agent-ui-action, .agent-ui-icon-button) { min-width:44px; min-height:44px; border:1px solid var(--border, #37415f); border-radius:8px; padding:8px 12px; color:inherit; background:var(--surface-raised, #222a3d); cursor:pointer; }
.walle-session .agent-ui-icon-button { min-width:44px; padding:8px; }
.walle-session .agent-ui-button.primary { background:#779cf3; color:#101522; border-color:#779cf3; }
.walle-session .agent-ui-button.danger { color:#ff9c9c; }
.walle-session :where(.agent-ui-button, .agent-ui-action, .agent-ui-icon-button, .agent-ui-composer-input, .agent-ui-composer-mode):focus-visible { outline:3px solid #8eb0ff; outline-offset:2px; }
.walle-session :where(.agent-ui-final-answer, .agent-ui-artifact) { display:grid; gap:10px; padding:14px; border:1px solid var(--border, #37415f); border-radius:12px; }
.walle-session .agent-ui-final-answer-header { display:flex; align-items:center; justify-content:space-between; gap:10px; }

/* Web and Conv share one composer node outside the scrollable Web projection. */
@media (max-width:720px) {
  .walle-session .agent-ui-header { align-items:flex-start; }
  .walle-session .agent-ui-header-meta { width:100%; overflow-x:auto; flex-wrap:nowrap; }
  .walle-session .agent-ui-queue-item { align-items:flex-start; flex-direction:column; }
  .walle-session :where(.agent-ui-queue-item-actions, .agent-ui-composer-actions) { width:100%; }
  .walle-session .agent-ui-composer-actions .agent-ui-button { flex:1; }
}
@media (prefers-reduced-motion:reduce) {
  .walle-session :where(.agent-ui-header, .agent-ui-work, .agent-ui-approval, .agent-ui-queue, .agent-ui-composer) * { animation:none !important; transition:none !important; }
}
@media (prefers-contrast:more) {
  .walle-session :where(.agent-ui-status, .agent-ui-fidelity, .agent-ui-chip, .agent-ui-work, .agent-ui-approval,
    .agent-ui-queue-item, .agent-ui-composer-input, .agent-ui-button) { border-width:2px; }
}

/* Inline diff-comment affordance rendered by message-renderer.js (shared by the
   Conv surface and the review page). */
.cr-diff-comment-gutter { width: 34px; padding: 0 4px; text-align: center; }
.cr-diff-comment-button {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--fg-dim, #9aa1ba);
  background: transparent;
  cursor: pointer;
  font: 700 12px/1 var(--font-ui, sans-serif);
}
.cr-diff-line:hover .cr-diff-comment-button,
.cr-diff-comment-button:focus-visible,
.cr-diff-line.has-review-comment .cr-diff-comment-button { border-color: var(--accent, #7aa2f7); color: var(--accent, #7aa2f7); background: rgba(122, 162, 247, .12); }