:root {
      color-scheme: dark;
      --bg: #1f2328;
      --panel: #262b31;
      --panel2: #2c3239;
      --line: #3a414a;
      --text: #d7dde5;
      --muted: #8d98a6;
      --blue: #569cd6;
      --green: #6a9955;
      --yellow: #dcdcaa;
      --red: #f44747;
      --radius: 8px;
      --border: var(--line);
    }

    /* Provider Workbench visual baseline. This mirrors prototypes/provider-workbench.html;
       the selectors below are live Relay nodes, not placeholder demo content. */
    :root {
      --bg: #11151a;
      --panel: #1a2027;
      --panel-2: #202832;
      --panel-3: #252f3a;
      --line: #303b47;
      --text: #e8edf3;
      --muted: #8995a4;
      --blue: #5da9ff;
      --blue-soft: rgba(93,169,255,.14);
      --cyan: #63d4d0;
      --green: #62c586;
      --yellow: #dfb45e;
      --red: #e46878;
      --codex: #e59c67;
      --codex-soft: rgba(229,156,103,.14);
      --radius: 7px;
    }
    html, body { min-height: 100%; background: var(--bg); }
    body { font: 13px/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif; }
    button, input, textarea, select { color: inherit; }
    .app.prototype { max-width: none; width: 100%; min-height: 100dvh; padding: 0; margin: 0; display: flex; flex-direction: column; background: var(--bg); }
    .app.prototype.chat-mode { height: 100dvh; min-height: 100dvh; overflow: hidden; }
    .prototype .topbar { position: relative; height: 58px; flex: 0 0 58px; display: flex; align-items: center; gap: 22px; padding: 0 20px; border-bottom: 1px solid var(--line); background: #151a20; }
    .prototype .brand { display: flex; align-items: baseline; gap: 10px; min-width: 210px; }
    .prototype .brand strong { font-size: 18px; letter-spacing: .2px; }
    .prototype .brand span { color: var(--muted); font-size: 11px; }
    .prototype .session-overview { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--muted); font-size: 11px; white-space: nowrap; }
    .prototype .session-overview #topSyncTime { display: none; }
    .prototype .session-overview #topProviderCount { color: #aebdcc; }
    .prototype .session-overview .dot { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: var(--muted); }
    .prototype .session-overview .dot.green { background: var(--green); }
    .prototype .top-actions { position: absolute; top: 13px; left: 260px; display: flex; gap: 7px; }
    .prototype .top-actions .icon-btn { width: 32px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: var(--panel-2); color: var(--muted); }
    .prototype .top-actions .icon-btn:hover { color: var(--text); border-color: #526272; }
    .prototype .token { position: absolute; top: 58px; left: 12px; z-index: 20; width: min(420px, calc(100vw - 36px)); padding: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 7px; box-shadow: 0 14px 34px rgba(0,0,0,.35); }
    .prototype .token.open { display: grid; }
    .modal-backdrop {
      position: fixed;
      inset: 0;
      z-index: 80;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
      background: rgba(5, 8, 12, .66);
      backdrop-filter: blur(4px);
    }
    .modal-backdrop.open { display: flex; }
    .settings-dialog {
      width: min(540px, 100%);
      max-height: min(760px, calc(100dvh - 40px));
      display: flex;
      flex-direction: column;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: var(--panel);
      box-shadow: 0 24px 70px rgba(0, 0, 0, .48);
    }
    .shortcut-dialog { width: min(700px, 100%); }
    .forward-dialog { width: min(620px, 100%); }
    .dialog-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 16px 18px;
      border-bottom: 1px solid var(--line);
      background: #151a20;
    }
    .dialog-head h2 { margin: 0; font-size: 15px; font-weight: 650; }
    .dialog-close {
      width: 30px;
      height: 30px;
      padding: 0;
      border: 1px solid transparent;
      border-radius: 6px;
      background: transparent;
      color: var(--muted);
      font-size: 22px;
      line-height: 1;
    }
    .dialog-close:hover { border-color: var(--line); background: var(--panel-2); color: var(--text); }
    .dialog-body { display: grid; gap: 12px; overflow: auto; padding: 18px; }
    .dialog-body .notify-config { margin-top: 4px; }
    .forward-dialog-body { gap: 14px; }
    .forward-field { display: grid; gap: 6px; color: var(--muted); font-size: 12px; }
    .forward-field select,
    .forward-field textarea { width: 100%; border: 1px solid var(--line); border-radius: 6px; background: var(--panel-2); color: var(--text); }
    .forward-field textarea { min-height: 76px; resize: vertical; line-height: 1.5; }
    .forward-preview { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: #151a20; }
    .forward-preview strong { display: block; padding: 9px 11px; border-bottom: 1px solid var(--line); font-size: 12px; }
    .forward-preview pre { max-height: 230px; margin: 0; padding: 11px; overflow: auto; color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere; font: 11px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; }
    .forward-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }
    .forward-dialog-actions #submitForward { border-color: #4f86bb; background: #2e6498; color: #fff; }
    .controller-only { display: none; }
    .controller-mode .controller-only { display: block; }
    .prototype .web-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 300px minmax(420px, 1fr) 330px; transition: grid-template-columns .18s ease; }
    .prototype .web-body.left-panel-collapsed { grid-template-columns: 40px minmax(420px, 1fr) 330px; }
    .prototype .web-body.right-panel-collapsed { grid-template-columns: 300px minmax(420px, 1fr) 40px; }
    .prototype .web-body.left-panel-collapsed.right-panel-collapsed { grid-template-columns: 40px minmax(420px, 1fr) 40px; }
    .prototype .left, .prototype .right { position: relative; min-width: 0; min-height: 0; background: var(--panel); }
    .prototype .left { border-right: 1px solid var(--line); padding: 16px 12px; overflow: auto; }
    .prototype .right { border-left: 1px solid var(--line); padding: 16px; overflow: auto; }
    .prototype .rail-toggle { position: absolute; top: 10px; z-index: 5; width: 26px; height: 26px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: var(--panel-2); color: var(--muted); font-size: 20px; line-height: 22px; }
    .prototype .rail-toggle:hover { color: var(--text); border-color: var(--blue); background: var(--panel-3); }
    .prototype .left-toggle { right: 8px; }
    .prototype .right-toggle { left: 8px; }
    .prototype .web-body.left-panel-collapsed .left,
    .prototype .web-body.right-panel-collapsed .right { padding-left: 6px; padding-right: 6px; }
    .prototype .web-body.left-panel-collapsed .left > :not(.left-toggle),
    .prototype .web-body.right-panel-collapsed .right > :not(.right-toggle) { opacity: 0; visibility: hidden; pointer-events: none; }
    .prototype .web-body.left-panel-collapsed .left-toggle,
    .prototype .web-body.right-panel-collapsed .right-toggle { transform: rotate(180deg); }
    .prototype .main { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--bg); overflow: hidden; }
    .prototype .section { display: none; }
    .prototype .section.active { display: block; }
    .prototype .left #agents.section.active { height: 100%; overflow: visible; }
    .prototype .section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 4px 12px; }
    .prototype .left .section-head { padding-right: 30px; }
    .prototype .section-head h2 { margin: 0; font-size: 13px; font-weight: 650; }
    .prototype .count { color: var(--muted); font-size: 11px; }
    .prototype .filter { display: flex; gap: 4px; margin-bottom: 12px; padding: 3px; border: 1px solid var(--line); border-radius: 6px; background: #151a20; }
    .prototype .filter button { flex: 1; padding: 6px 8px; border: 0; border-radius: 4px; background: transparent; color: var(--muted); font-size: 12px; }
    .prototype .filter button.active { background: var(--panel-3); color: var(--text); }
    .prototype .filter button.codex.active { color: var(--codex); background: var(--codex-soft); }
    .prototype .filter button.claude.active { color: var(--blue); background: var(--blue-soft); }
    .prototype .session-card { display: block; width: 100%; margin: 3px 0; padding: 11px 11px 10px; text-align: left; border: 1px solid transparent; border-radius: var(--radius); background: transparent; }
    .prototype .session-card:hover { background: var(--panel-2); }
    .prototype .session-card.active { border-color: var(--blue); background: var(--blue-soft); }
    .prototype .session-title-row { display: flex; align-items: center; gap: 8px; }
    .prototype .session-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 620; }
    .prototype .session-unread-dot, .session-unread-dot { display: inline-block; flex: 0 0 auto; width: 8px; height: 8px; margin-left: 2px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 2px rgba(239,68,68,.16); }
    .prototype .provider-badge { flex: 0 0 auto; padding: 2px 6px; border-radius: 4px; font-size: 10px; line-height: 1.25; font-weight: 700; }
    .prototype .provider-badge.claude { color: var(--blue); background: var(--blue-soft); }
    .prototype .provider-badge.codex { color: var(--codex); background: var(--codex-soft); }
    .prototype .session-meta { display: flex; align-items: center; gap: 7px; margin-top: 5px; color: var(--muted); font-size: 11px; }
    .prototype .session-state { margin-left: auto; white-space: nowrap; }
    .prototype .session-state.working { color: var(--yellow); }
    .prototype .session-state.reconnecting { color: var(--red, #ff6b6b); font-weight: 700; }
    .prototype .session-state.new { color: var(--cyan); }
    .prototype .session-id { margin-top: 4px; color: #6e7b89; font: 10px ui-monospace, SFMono-Regular, Menlo, monospace; }
    .prototype .web-agent-group { margin-bottom: 20px; }
    .prototype .web-agent-group + .web-agent-group { padding-top: 12px; border-top: 1px solid var(--line); }
    .prototype .web-agent-title { display: flex; justify-content: space-between; gap: 8px; margin: 0 4px 4px; color: var(--muted); font-size: 11px; }
    .prototype .web-agent-title strong { min-width: 0; overflow-wrap: anywhere; color: var(--text); font-weight: 650; }
    .prototype .web-agent-state { flex-shrink: 0; white-space: nowrap; }
    .prototype .web-agent-state.online { color: var(--green); }
    .prototype .web-agent-projects { margin: 10px 4px 0; }
    .prototype .main-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 20px; border-bottom: 1px solid var(--line); background: #151a20; }
    .prototype .workbench-tools { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px; min-width: 0; }
    .prototype .workbench-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
    .prototype .current-title { min-width: 0; }
    .prototype .current-title .eyebrow { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; }
    .prototype .current-title h1 { margin: 2px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; font-weight: 650; }
    .prototype .current-actions { display: flex; gap: 7px; flex: 0 0 auto; }
    .prototype .button { height: auto; padding: 7px 11px; border: 1px solid var(--line); border-radius: 5px; background: var(--panel-2); color: var(--muted); }
    .prototype .button:hover { color: var(--text); border-color: #526272; }
    .prototype .button.primary { border-color: var(--blue); background: var(--blue); color: #07111d; font-weight: 650; }
    .prototype .context-strip { display: flex; align-items: center; gap: 16px; min-height: 38px; padding: 0 20px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11px; overflow: hidden; white-space: nowrap; }
    .prototype .context-strip span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .prototype .context-strip strong { color: var(--text); font-weight: 600; }
    .prototype .context-strip .sep { color: #566272; flex: 0 0 auto; }
    /* Provider/session history is controlled from the left rail; keep the
       controls in the DOM for state and deep-link compatibility. */
    .prototype .history-filters { display: none; }
    .prototype #workbench.section.active { display: flex; flex-direction: column; flex: 1; min-height: 0; }
    .prototype .chat-stream { flex: 1; min-height: 300px; overflow: auto; padding: 20px; align-content: flex-start; justify-content: flex-start; }
    .prototype .chat-stream .load-more { display: block; margin: 0 auto 12px; }
    .prototype .msg { display: flex; flex: 0 0 auto; flex-direction: column; width: auto; max-width: 82%; height: auto; min-height: 0; margin: 13px 0; }
    .prototype .msg.user { align-items: flex-end; align-self: flex-end; flex: 0 0 auto; width: auto; max-width: 82%; height: auto; min-height: 0; margin-left: auto; }
    .prototype .msg.assistant { align-items: flex-start; }
    .prototype .msg.cli-input { align-items: flex-start; }
    .prototype .msg.cli-context { align-items: flex-start; max-width: min(760px, 82%); }
    .prototype .msg.cli-status { align-items: flex-start; }
    .prototype .msg.interaction { align-items: flex-start; }
    .prototype .msg-name { margin: 0 5px 4px; color: var(--muted); font-size: 11px; }
    /* Keep live message bubbles separate from the legacy generic .bubble rules below. */
    .prototype #chatStream .message-bubble { display: inline-block; vertical-align: top; flex: 0 0 auto; width: auto; max-width: 100%; height: fit-content; min-height: 0; max-height: none; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; white-space: pre-wrap; background: var(--panel); }
    .prototype #chatStream .msg.user .message-bubble { background: #24384d; border-color: #355878; }
    .prototype #chatStream .msg.cli-input .message-bubble { background: rgba(184, 139, 73, .10); border-color: rgba(203, 158, 83, .42); }
    .prototype #chatStream .msg.cli-context .message-bubble { display: block; width: 100%; padding: 0; border: 0; background: transparent; }
    .prototype #chatStream .protocol-context { display: block; border: 1px solid rgba(93,169,255,.38); border-radius: 6px; background: rgba(93,169,255,.08); color: var(--text); overflow: hidden; }
    .prototype #chatStream .protocol-context summary { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; padding: 10px 12px; cursor: pointer; list-style: none; }
    .prototype #chatStream .protocol-context summary::-webkit-details-marker { display: none; }
    .prototype #chatStream .protocol-context-title { color: #a8cffb; font-weight: 650; }
    .prototype #chatStream .protocol-context-summary { color: var(--muted); font-size: 12px; }
    .prototype #chatStream .protocol-context-action { margin-left: auto; color: var(--blue); font-size: 11px; }
    .prototype #chatStream .protocol-context[open] .protocol-context-action { color: var(--muted); }
    .prototype #chatStream .protocol-context-details { padding: 0 12px 12px; border-top: 1px solid rgba(93,169,255,.24); }
    .prototype #chatStream .protocol-context-fields { display: flex; flex-wrap: wrap; gap: 7px 14px; padding: 10px 0; color: var(--muted); font-size: 12px; }
    .prototype #chatStream .protocol-context-fields span { overflow-wrap: anywhere; }
    .prototype #chatStream .protocol-context-fields b { margin-right: 4px; color: var(--text); font-weight: 600; }
    .prototype #chatStream .protocol-context pre { max-height: 310px; margin: 0; padding: 10px; overflow: auto; border: 1px solid var(--line); border-radius: 5px; background: #11171d; color: #b9c7d7; white-space: pre-wrap; font: 11px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; }
    .prototype #chatStream .msg.cli-status .message-bubble { padding: 7px 10px; background: rgba(93, 169, 255, .08); border-color: rgba(93, 169, 255, .36); color: var(--muted); font-size: 12px; }
    .prototype #chatStream .turn-process-trigger { padding: 0; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
    .prototype #chatStream .turn-process-trigger:hover { color: var(--text); }
    .turn-process-modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 32px; background: rgba(4,7,10,.78); }
    .turn-process-panel { display: flex; flex-direction: column; width: min(760px, 92vw); max-height: min(720px, 86vh); border: 1px solid var(--line); border-radius: 7px; background: var(--panel-2); box-shadow: 0 18px 70px rgba(0,0,0,.55); }
    .turn-process-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 15px; border-bottom: 1px solid var(--line); }
    .turn-process-head h2 { margin: 0; font-size: 14px; }
    .turn-process-head button { padding: 4px 8px; border: 1px solid var(--line); border-radius: 5px; background: var(--panel); color: var(--muted); font-size: 12px; }
    .turn-process-panel pre { margin: 0; padding: 15px; overflow: auto; white-space: pre-wrap; color: var(--text); font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
    .prototype #chatStream .msg.interaction .message-bubble { background: rgba(176, 111, 47, .16); border-color: rgba(220, 153, 73, .72); }
    .prototype #chatStream .interaction-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
    .prototype #chatStream .interaction-actions button { border: 1px solid rgba(220, 153, 73, .72); border-radius: 5px; background: rgba(176, 111, 47, .14); color: var(--text); padding: 4px 8px; font-size: 12px; }
    .prototype #chatStream .message-text { display: inline; width: auto; height: auto; min-height: 0; max-height: none; margin: 0; line-height: 1.5; overflow-wrap: anywhere; }
    .prototype #chatStream .message-attachments { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 8px; }
    .prototype #chatStream .message-image-button { display: block; width: auto; height: auto; padding: 0; border: 0; background: transparent; cursor: zoom-in; }
    .prototype #chatStream .message-attachments img { display: block; width: auto; max-width: min(130px, 100%); max-height: 90px; border: 1px solid rgba(150,180,205,.3); border-radius: 6px; object-fit: contain; background: #11171d; }
    .prototype #chatStream .message-image-button:hover img { border-color: var(--blue); }
    .prototype #chatStream .message-image-placeholder { box-sizing: border-box; width: 160px; max-width: 100%; height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 10px; border: 1px dashed var(--muted); border-radius: 6px; background: var(--panel); color: var(--text); font-size: 12px; text-align: center; }
    .prototype #chatStream .message-image-placeholder.failed { border-color: var(--red); color: var(--red); }
    .prototype #chatStream .message-image-button.terminal-upload { display: flex; align-items: center; justify-content: center; width: 160px; max-width: 100%; height: 120px; }
    .prototype #chatStream .message-image-button.terminal-upload img { max-width: 100%; max-height: 100%; }
    .prototype #chatStream .image-transfer-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .prototype #chatStream .message-image-placeholder button { min-height: 28px; padding: 3px 10px; border: 1px solid currentColor; border-radius: 4px; color: inherit; background: transparent; cursor: pointer; }
    .prototype #chatStream .message-file { display: flex; align-items: center; gap: 7px; min-width: 150px; max-width: 250px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--text); }
    .prototype #chatStream .message-file .file-mark,
    .prototype .attachment-chip .file-mark { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 36px; width: 36px; height: 30px; border-radius: 4px; background: #24394b; color: #9fc9e8; font-size: 9px; font-weight: 700; letter-spacing: 0; }
    .prototype #chatStream .message-file .file-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .prototype #chatStream .message-file small,
    .prototype .attachment-chip small { display: block; margin-top: 2px; color: #8ea6b9; font-size: 10px; }
    .prototype #chatStream .message-toggle { display: block; width: fit-content; margin: 9px 0 0 auto; padding: 3px 7px; border: 1px solid rgba(93,169,255,.38); border-radius: 5px; background: rgba(93,169,255,.10); color: var(--blue); font-size: 11px; line-height: 1.3; }
    .prototype #chatStream .message-toggle:hover { border-color: var(--blue); background: var(--blue-soft); color: var(--text); }
    .prototype .msg.assistant.report-message { width: min(760px, 82%); }
    .prototype .bubble-title { font-size: 13px; }
    .prototype .report-card { display: block; width: 100%; height: auto; min-height: 0; margin-top: 0; padding: 12px; border: 1px solid var(--line); border-left: 3px solid var(--blue); border-radius: 7px; background: var(--panel-2); box-shadow: 0 8px 22px rgba(0,0,0,.12); }
    .prototype .report-card.codex { border-left-color: var(--codex); }
    .prototype .report-card h3 { margin: 0 0 5px; font-size: 13px; }
    .prototype .report-card .bubble-head h3 { flex: 1; min-width: 0; }
    .prototype .report-card p { margin: 0; color: #b6c0cb; white-space: pre-wrap; overflow-wrap: anywhere; }
    .prototype .report-card .report-meta { margin-top: 8px; color: var(--muted); font-size: 11px; }
    .prototype .report-actions { display: flex; flex: 0 0 auto; gap: 5px; }
    .prototype .report-queue-offer { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 9px; margin-top: 11px; padding: 9px 10px; border: 1px solid rgba(220,153,73,.7); border-radius: 6px; background: rgba(176,111,47,.14); color: var(--text); font-size: 12px; }
    .prototype .report-queue-offer strong { color: var(--yellow); }
    .prototype .report-queue-offer span { color: var(--muted); }
    .prototype .queue-offer-button { min-height: 28px; margin-left: auto; padding: 4px 10px; border: 1px solid rgba(220,153,73,.8); border-radius: 5px; background: rgba(220,153,73,.18); color: var(--text); font-size: 12px; font-weight: 650; cursor: pointer; }
    .prototype .queue-offer-button:hover { background: rgba(220,153,73,.3); }
    .prototype .queue-offer-button:disabled { cursor: default; opacity: .72; }
    .prototype .speech-mini.active { color: var(--yellow); border-color: var(--yellow); background: rgba(223,180,94,.12); }
    .prototype .web-agent-projects .project-list { gap: 4px; margin-top: 6px; }
    .prototype .web-agent-projects .project-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 8px; padding: 6px 7px; border-radius: 6px; }
    .prototype .web-agent-projects .project-main { min-width: 0; display: grid; gap: 2px; }
    .prototype .web-agent-projects .project-head { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
    .prototype .web-agent-projects .project-head .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
    .prototype .web-agent-projects .project-head > span { flex: 0 0 auto; font-size: 11px; }
    .prototype .web-agent-projects .project-meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .prototype .web-agent-projects .project-actions { display: flex; gap: 3px; margin: 0; }
    .prototype .web-agent-projects .project-actions button { flex: 0 0 25px; width: 25px; height: 25px; padding: 0; border-radius: 5px; font-size: 11px; }
    .prototype .web-agent-projects .project-detail { grid-column: 1 / -1; margin-top: 2px; line-height: 1.35; }
    .prototype .composer { flex: 0 0 auto; position: static; padding: 12px 20px 16px; border-top: 1px solid var(--line); background: #151a20; }
    .prototype .notice { display: flex; align-items: center; gap: 7px; min-height: 25px; margin-bottom: 8px; color: var(--yellow); font-size: 11px; }
    .prototype .notice .dot { background: var(--yellow); }
    .prototype .quick-prompts { display: flex; gap: 6px; margin: 0 0 9px; overflow: auto; }
    .prototype .shortcut-panel.open { display: flex; }
    .prototype .shortcut-chip { flex: 0 0 auto; padding: 5px 8px; border: 1px solid var(--line); border-radius: 5px; background: var(--panel); color: var(--muted); font-size: 11px; white-space: nowrap; }
    .prototype .shortcut-chip:hover { color: var(--text); border-color: var(--blue); }
    .prototype .compose-row { display: grid; grid-template-columns: minmax(0, 1fr) 38px auto; gap: 8px; align-items: end; }
    .prototype .compose-input-wrap { position: relative; min-width: 0; grid-column: 1; grid-row: 1; }
    .prototype .compose-row textarea { width: 100%; min-height: 42px; max-height: 110px; resize: vertical; padding: 10px 38px 10px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--text); box-sizing: border-box; }
    .prototype .compose-tool { width: 38px; height: 42px; min-height: 42px; align-self: end; justify-self: center; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--muted); box-sizing: border-box; line-height: 0; }
    .prototype .compose-icon { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .prototype .compose-tool:hover, .prototype .compose-tool.on { color: var(--text); border-color: var(--blue); background: var(--blue-soft); }
    .prototype .compose-tool.listening { color: var(--yellow); border-color: var(--yellow); background: rgba(223,180,94,.12); }
    .prototype .compose-clear { position: absolute; right: 7px; bottom: 8px; z-index: 1; display: none; width: 24px; height: 24px; align-items: center; justify-content: center; padding: 0; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--muted); font-size: 19px; line-height: 20px; }
    .prototype .compose-clear.on { display: inline-flex; }
    .prototype .compose-clear:hover { border-color: var(--line); background: var(--panel-2); color: var(--text); }
    .prototype .shortcut-toggle { display: none; }
    .prototype .voice-note { display: none; align-items: center; gap: 7px; margin: 0 0 8px; color: var(--yellow); font-size: 11px; }
    .prototype .voice-note.on { display: flex; }
    .prototype .voice-note .pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 4px rgba(223,180,94,.12); }
    .prototype .attachment-strip { display: none; gap: 7px; margin: 0 0 8px; overflow-x: auto; }
    .prototype .attachment-strip.on { display: flex; }
    .prototype .attachment-chip { display: flex; flex: 0 0 auto; align-items: center; gap: 6px; max-width: 210px; padding: 4px 7px 4px 4px; border: 1px solid #36526b; border-radius: 7px; background: #17232e; color: #bdd5e8; font-size: 11px; }
    .prototype .attachment-chip img { width: 36px; height: 30px; object-fit: cover; border-radius: 4px; background: #10161c; }
    .prototype .attachment-chip span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .prototype .attachment-chip button { width: 18px; height: 18px; padding: 0; border: 0; background: transparent; color: #9fb4c5; font-size: 17px; line-height: 16px; }
    .prototype .composer.drag-over .compose-row { border-color: var(--blue); background: rgba(93,169,255,.08); box-shadow: inset 0 0 0 1px rgba(93,169,255,.28); }
    .prototype .compose-row #voice { display: none; }
    .prototype .compose-row #attachmentPickerBtn { grid-column: 1; grid-row: 1; }
    .prototype .compose-row .compose-input-wrap { grid-column: 2; grid-row: 1; }
    .prototype .compose-row #sound { grid-column: 3; grid-row: 1; }
    .prototype .compose-row #sendClaude { grid-column: 4; grid-row: 1; height: 42px; min-height: 42px; align-self: end; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; padding-top: 0; padding-bottom: 0; }
    .prototype .compose-row { grid-template-columns: 38px minmax(0, 1fr) 38px auto; }
    .prototype .compose-row.voice-enabled { grid-template-columns: 38px 38px minmax(0, 1fr) 38px auto; }
    .prototype .compose-row.voice-enabled #attachmentPickerBtn { grid-column: 1; }
    .prototype .compose-row.voice-enabled #voice { display: inline-flex; grid-column: 2; grid-row: 1; }
    .prototype .compose-row.voice-enabled .compose-input-wrap { grid-column: 3; }
    .prototype .compose-row.voice-enabled #sound { grid-column: 4; }
    .prototype .compose-row.voice-enabled #sendClaude { grid-column: 5; }
    .prototype .right { display: flex; flex-direction: column; }
    .prototype .inspector-content { min-height: 0; overflow: auto; display: grid; gap: 12px; align-content: start; }
    .prototype .inspector-block, .prototype .tool { margin-bottom: 0; padding: 13px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-2); }
    .prototype .inspector-block h3, .prototype .tool h2 { margin: 0 0 12px; font-size: 13px; }
    .prototype .provider-head { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
    .prototype .provider-mark { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 6px; font-weight: 750; }
    .prototype .provider-mark.claude { color: var(--blue); background: var(--blue-soft); }
    .prototype .provider-mark.codex { color: var(--codex); background: var(--codex-soft); }
    .prototype .provider-head strong { display: block; }
    .prototype .provider-head small { color: var(--muted); }
    .prototype .kv { display: grid; grid-template-columns: 76px minmax(0,1fr); gap: 8px 10px; padding: 7px 0; border-top: 1px solid var(--line); }
    .prototype .kv span { color: var(--muted); }
    .prototype .kv b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; font-weight: 550; }
    .prototype .usage { margin: 12px 0 4px; }
    .prototype .usage-row { display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; }
    .prototype .usage-row strong { color: var(--text); }
    .prototype .progress { height: 6px; margin-top: 7px; overflow: hidden; border-radius: 4px; background: #10151a; }
    .prototype .progress i { display: block; height: 100%; border-radius: inherit; background: var(--blue); }
    .prototype .progress.codex i { background: var(--codex); }
    .prototype .activity { display: flex; align-items: flex-start; gap: 8px; color: var(--yellow); }
    .prototype .activity .dot { margin-top: 5px; background: var(--yellow); }
    .prototype .activity p { margin: 0; }
    .prototype .activity small { display: block; margin-top: 3px; color: var(--muted); }
    .prototype .inspector-actions { display: flex; gap: 7px; margin-top: 12px; }
    .prototype .inspector-actions button { flex: 1; }
    .prototype .activity-tool { margin-top: 12px; }
    .prototype .activity-tool h2 { margin-bottom: 8px; }
    .prototype .activity-tool .hint { color: var(--muted); font-size: 11px; }
    .prototype .activity-page { flex: 1; min-height: 0; overflow: auto; padding: 16px 20px; }
    .prototype #reportDetailPage.active { flex: 1; min-height: 0; overflow: auto; padding: 16px 20px; }
    /* Final live-chat reset: legacy page rules must not impose form-like heights. */
    .prototype #chatStream .msg.user { height: auto !important; min-height: 0 !important; max-height: none !important; }
    .prototype #chatStream .msg.user .message-bubble { display: inline-block !important; vertical-align: top !important; width: auto !important; height: auto !important; min-height: 0 !important; max-height: none !important; flex: 0 0 auto !important; }
    .prototype #chatStream .msg.user .message-text { display: inline !important; width: auto !important; height: auto !important; min-height: 0 !important; max-height: none !important; }
    .prototype.detail-mode .web-body { grid-template-columns: minmax(0, 1fr); }
    .prototype.detail-mode .web-body > .left,
    .prototype.detail-mode .web-body > .right { display: none; }
    .prototype.detail-mode .topbar { display: none; }
    .prototype.detail-mode .token { display: none !important; }
    .prototype.detail-mode .web-body { padding-top: 0; }
    .prototype.detail-mode .main { width: 100%; }
    .prototype.detail-mode #reportDetailPage.active { padding: 0; }
    .prototype.detail-mode #reportDetail { width: 100%; min-height: 100%; margin: 0; padding: 22px 28px 0; border: 0; border-radius: 0; background: transparent; }
    .image-lightbox { position: fixed; inset: 0; z-index: 40; display: none; align-items: center; justify-content: center; padding: 42px 52px 54px; background: rgba(4,7,10,.88); }
    .image-lightbox.on { display: flex; }
    .image-lightbox > img { display: block; max-width: min(94vw, 1400px); max-height: calc(100vh - 96px); width: auto; height: auto; object-fit: contain; border: 1px solid rgba(180,210,235,.35); border-radius: 8px; box-shadow: 0 18px 70px rgba(0,0,0,.55); }
    .image-lightbox-close { position: absolute; top: 14px; right: 18px; width: 34px; height: 34px; padding: 0; border: 1px solid #526273; border-radius: 7px; background: #222a33; color: #e8edf3; font-size: 25px; line-height: 28px; }
    .image-lightbox-caption { position: absolute; left: 0; right: 0; bottom: 18px; color: #b9c6d4; font-size: 12px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    @media (max-width: 980px) {
      .prototype .web-body { grid-template-columns: 255px minmax(360px, 1fr); }
      .prototype .web-body.left-panel-collapsed { grid-template-columns: 40px minmax(360px, 1fr); }
      .prototype .web-body.right-panel-collapsed,
      .prototype .web-body.left-panel-collapsed.right-panel-collapsed { grid-template-columns: 255px minmax(360px, 1fr); }
      .prototype .right { display: none; }
      .prototype .top-actions { left: 215px; }
    }
    @media (max-width: 680px) {
      .prototype .topbar { height: auto; min-height: 56px; flex-basis: auto; flex-wrap: wrap; gap: 8px 12px; padding: 10px 12px; }
      .prototype .brand { min-width: 0; flex: 1; }
      .prototype .brand span { display: none; }
      .prototype .top-actions { top: 10px; right: 12px; left: auto; }
      .prototype .token { right: 12px; left: 12px; width: auto; }
      .prototype .web-body { display: block; }
      .prototype .main { height: 100%; }
      .prototype .left { display: none; }
      .app.prototype.agents-mode { height: 100dvh; overflow: hidden; }
      .prototype .tabs.compact { display: flex; flex: 0 0 auto; margin: 0; padding: 6px 12px; border-bottom: 1px solid var(--line); }
      .prototype.agents-mode .left { display: block; height: 100%; }
      .prototype.agents-mode .main { display: none; }
      .prototype .left .rail-toggle { display: none; }
      .prototype .left .section-head { padding-right: 4px; }
      .prototype .session-overview { overflow: hidden; }
      .prototype .web-body.left-panel-collapsed .left { padding: 16px 12px; }
      .prototype .web-body.left-panel-collapsed .left > :not(.left-toggle) { opacity: 1; visibility: visible; pointer-events: auto; }
      .prototype .main-head { padding: 12px; }
      .prototype .context-strip { padding: 0 12px; gap: 9px; overflow: auto; }
      .prototype .history-filters { display: none; }
      .prototype .chat-stream { padding: 14px 12px; }
      .prototype .composer { padding: 10px 12px calc(12px + env(safe-area-inset-bottom)); }
      .prototype .msg { max-width: 92%; }
      .prototype .msg.user { max-width: 92%; }
    }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      background: var(--bg);
      color: var(--text);
      font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      overflow-x: hidden;
    }
    html.chat-lock, body.chat-lock {
      height: 100%;
      overflow: hidden;
      overscroll-behavior: none;
    }
    button, input, textarea, select { font: inherit; }
    button { cursor: pointer; }
    .app {
      max-width: 920px;
      margin: 0 auto;
      padding: calc(14px + env(safe-area-inset-top)) 14px 14px;
    }
    .app.chat-mode {
      height: 100dvh;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      padding-bottom: 0;
      overflow: hidden;
    }
    .app.detail-mode {
      height: 100dvh;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      padding-bottom: 0;
      overflow: hidden;
    }
    header {
      position: sticky; top: 0; z-index: 5;
      background: color-mix(in srgb, var(--bg) 94%, transparent);
      backdrop-filter: blur(16px);
      padding: 6px 0 8px;
      border-bottom: 1px solid var(--line);
    }
    .topbar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; }
    h1 { margin: 0; font-size: 16px; line-height: 1.2; cursor: pointer; }
    .sub {
      min-width: 0;
      color: var(--muted);
      font-size: 12px;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .top-actions { display: flex; gap: 6px; justify-content: flex-end; }
    .icon-btn {
      width: 34px;
      height: 34px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      border-radius: 9px;
      font-size: 16px;
    }
    .token {
      display: none;
      gap: 8px;
      margin-top: 8px;
      background: #20252b;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 10px;
    }
    .token.open { display: grid; }
    .config-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
      align-items: center;
    }
    .controller-mode .config-row { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; }
    .notify-config {
      display: grid;
      gap: 8px;
      border-top: 1px solid var(--line);
      margin-top: 2px;
      padding-top: 10px;
    }
    .notify-config h3 {
      margin: 0;
      font-size: 13px;
      font-weight: 650;
      color: var(--text);
    }
    .notify-option {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      color: var(--muted);
      font-size: 13px;
    }
    .notify-option input[type="checkbox"] { width: auto; }
    .notify-option input[type="number"] {
      width: 92px;
      padding: 7px 8px;
    }
    .config-status { min-height: 18px; color: var(--muted); font-size: 12px; }
    .shortcut-edit-row { display: grid; grid-template-columns: minmax(90px, .7fr) minmax(120px, 1.3fr) 28px; gap: 5px; align-items: center; }
    .shortcut-edit-row input { min-width: 0; padding: 7px 8px; }
    .shortcut-remove { width: 28px; height: 28px; padding: 0; border: 1px solid var(--line); border-radius: 5px; background: transparent; color: var(--muted); font-size: 17px; line-height: 1; }
    .shortcut-config-actions { display: flex; gap: 6px; }
    .shortcut-config-actions button { padding: 7px 9px; border: 1px solid var(--line); border-radius: 5px; background: var(--panel-2); color: var(--muted); font-size: 12px; }
    input, textarea, select {
      width: 100%;
      color: var(--text);
      background: #20252b;
      border: 1px solid var(--line);
      border-radius: 7px;
      padding: 10px;
      outline: none;
    }
    input:focus, textarea:focus, select:focus { border-color: var(--blue); }
    textarea { min-height: 106px; resize: vertical; }
    button {
      border: 1px solid var(--line);
      background: var(--panel2);
      color: var(--text);
      border-radius: 7px;
      padding: 9px 12px;
    }
    button.primary { background: #315a7d; border-color: #3d6e96; }
    button.danger { background: #673333; border-color: #894545; }
    button:disabled { opacity: .5; cursor: default; }
    .tabs { display: flex; gap: 8px; margin: 14px 0; }
    .tabs.compact { display: none; }
    .tabs button { flex: 1; color: var(--muted); }
    .tabs button.active { color: var(--text); border-color: var(--blue); }
    .tabs button.has-new { color: var(--yellow); border-color: var(--yellow); }
    .section { display: none; }
    .section.active { display: block; }
    #reportDetailPage.active {
      position: relative;
      display: flex;
      flex: 1;
      min-height: 0;
      flex-direction: column;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
      padding-top: 0;
      padding-bottom: 0;
    }
    .section.chat-section.active {
      display: flex;
      flex: 1;
      min-height: 0;
      flex-direction: column;
    }
    .list { display: grid; gap: 10px; }
    .card {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 12px;
    }
    .row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
    .grid { display: grid; gap: 10px; }
    .grid.two { grid-template-columns: 1fr 1fr; }
    .actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
    .project-list { display: grid; gap: 8px; margin-top: 10px; }
    .project-card {
      background: #20252b;
      border: 1px solid var(--line);
      border-radius: 7px;
      padding: 10px;
    }
    .project-actions {
      display: flex;
      gap: 6px;
      margin-left: 8px;
    }
    .project-actions button {
      width: 30px;
      height: 30px;
      padding: 0;
      border-radius: 8px;
      font-size: 14px;
    }
    .session-list {
      display: grid;
      gap: 8px;
      margin-top: 10px;
    }
    .session-card {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
      align-items: center;
      background: #20252b;
      border: 1px solid var(--line);
      border-radius: 7px;
      padding: 9px;
    }
    .session-title {
      min-width: 0;
      font-size: 12px;
      font-weight: 650;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .session-card button {
      min-width: 54px;
      padding: 6px 9px;
      font-size: 12px;
    }
    .name { font-weight: 650; overflow-wrap: anywhere; }
    .meta { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
    .report-title { font-weight: 650; overflow-wrap: anywhere; }
    .report-summary {
      margin-top: 8px;
      color: var(--text);
      font-size: 13px;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
    }
    .chat-stream {
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
      gap: 12px;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
      padding: 4px 0 12px;
      scrollbar-color: #3c4652 transparent;
    }
    .msg {
      display: flex;
      flex-direction: column;
      max-width: 84%;
      gap: 4px;
    }
    .msg.assistant { align-self: flex-start; }
    .msg.user { align-self: flex-end; align-items: flex-end; }
    .msg.cli-input { align-self: flex-start; }
    .msg.interaction { align-self: flex-start; }
    .msg.system { align-self: center; max-width: 92%; align-items: center; }
    .msg.interaction .message-bubble { background: rgba(176, 111, 47, .16); border-color: rgba(220, 153, 73, .72); }
    .interaction-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
    .interaction-actions button { border: 1px solid rgba(220, 153, 73, .72); border-radius: 5px; background: rgba(176, 111, 47, .14); color: var(--text); padding: 4px 8px; font-size: 12px; }
    .msg-name { color: var(--muted); font-size: 11px; padding: 0 4px; }
    .occurrence-badge { display:inline-block; margin-left:8px; padding:1px 6px; border-radius:10px; background:rgba(220,153,73,.2); color:#f0c27b; font-size:11px; font-weight:700; vertical-align:middle; }
    .bubble {
      border: 1px solid var(--line);
      border-radius: 13px;
      padding: 10px 12px;
      overflow-wrap: anywhere;
      box-shadow: 0 8px 22px rgba(0,0,0,.12);
    }
    .assistant .bubble {
      background: var(--panel);
      border-top-left-radius: 5px;
    }
    .user .bubble {
      background: #315a7d;
      border-color: #3d6e96;
      color: #ffffff;
      border-top-right-radius: 5px;
    }
    .cli-input .bubble {
      background: rgba(184, 139, 73, .10);
      border-color: rgba(203, 158, 83, .42);
      border-top-left-radius: 5px;
    }
    .system .bubble {
      background: transparent;
      border-color: var(--line);
      color: var(--muted);
      box-shadow: none;
      font-size: 12px;
      padding: 7px 10px;
      border-radius: 8px;
    }
    .bubble-title { font-weight: 650; margin-bottom: 6px; }
    .bubble-summary {
      color: var(--text);
      line-height: 1.52;
      white-space: pre-wrap;
    }
    .bubble-meta { margin-top: 7px; color: var(--muted); font-size: 11px; }
    .composer {
      position: sticky;
      bottom: 0;
      z-index: 4;
      margin: 0 -14px;
      padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
      background: color-mix(in srgb, var(--bg) 96%, transparent);
      border-top: 1px solid var(--line);
      backdrop-filter: blur(16px);
    }
    .composer-box {
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: 8px;
      align-items: end;
      background: #20252b;
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 8px;
    }
    .composer textarea {
      min-height: 44px;
      max-height: 120px;
      padding: 8px;
      border: 0;
      resize: none;
      background: transparent;
    }
    .composer select {
      grid-column: 1 / -1;
      padding: 7px 8px;
      border-radius: 9px;
      background: #252b32;
    }
    .composer button {
      height: 38px;
      min-width: 42px;
      border-radius: 10px;
    }
    .composer-notice {
      display: none;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 8px;
      padding: 8px 10px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: #252b32;
      color: var(--muted);
      font-size: 12px;
    }
    .composer-notice.open { display: flex; }
    .composer-notice.warn {
      color: var(--yellow);
      border-color: #6f612e;
      background: #2c2a20;
    }
    .composer-notice button {
      flex: 0 0 auto;
      height: 30px;
      min-width: 70px;
      padding: 5px 9px;
      font-size: 12px;
    }
    .toast {
      position: fixed;
      left: 50%;
      bottom: max(18px, env(safe-area-inset-bottom));
      transform: translateX(-50%);
      z-index: 80;
      display: none;
      padding: 7px 12px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #252b32;
      color: var(--text);
      font-size: 12px;
      box-shadow: 0 8px 24px rgba(0,0,0,.28);
    }
    .shortcut-panel {
      display: none;
      gap: 6px;
      overflow-x: auto;
      padding: 0 0 8px;
    }
    .shortcut-panel.open { display: flex; }
    .shortcut-chip {
      flex: 0 0 auto;
      max-width: 220px;
      color: var(--text);
      background: #252b32;
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 7px 10px;
      font-size: 12px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .chat-filters {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
      padding: 2px 0 8px;
    }
    .workbench-context {
      display: flex;
      align-items: center;
      gap: 8px;
      min-height: 28px;
      padding: 0 0 8px;
      margin: -2px 0 8px;
      border-bottom: 1px solid var(--line);
      color: var(--muted);
      font-size: 12px;
      white-space: nowrap;
      overflow: hidden;
    }
    .workbench-context span {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .workbench-context strong {
      color: var(--text);
      font-weight: 650;
    }
    .workbench-context .sep {
      color: var(--line);
      flex: 0 0 auto;
    }
    .chat-filters select {
      min-width: 0;
      padding: 8px;
      border-radius: 9px;
      background: #252b32;
      font-size: 12px;
    }
    .summary {
      margin: 10px 0 12px;
      overflow-wrap: break-word;
      color: var(--text);
      line-height: 1.62;
      font-size: 14px;
    }
    .summary p { margin: 0 0 12px; }
    .summary h1, .summary h2, .summary h3 {
      margin: 18px 0 9px;
      line-height: 1.25;
      color: #ffffff;
    }
    .summary h1 { font-size: 19px; }
    .summary h2 { font-size: 17px; color: #f0df9a; }
    .summary h3 { font-size: 15px; color: #e7edf4; }
    .summary ul, .summary ol { margin: 8px 0 12px; padding-left: 22px; }
    .summary li { margin: 5px 0; }
    .summary code {
      color: #e1c979;
      background: transparent;
      border: 0;
      padding: 0 1px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: .92em;
    }
    .summary pre {
      max-height: none;
      margin: 10px 0 12px;
      font-size: 12px;
      line-height: 1.48;
    }
    .summary blockquote {
      margin: 8px 0 12px;
      padding-left: 10px;
      border-left: 3px solid var(--line);
      color: var(--muted);
    }
    .md-table-wrap {
      width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      margin: 10px 0 14px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #20252b;
    }
    .summary table {
      width: 100%;
      min-width: 520px;
      border-collapse: collapse;
      background: rgba(255,255,255,.015);
      font-size: 12.5px;
      line-height: 1.45;
    }
    .summary th, .summary td {
      border-right: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      padding: 8px 9px;
      text-align: left;
      vertical-align: top;
      overflow-wrap: break-word;
    }
    .summary th {
      color: var(--text);
      background: rgba(78,161,255,.10);
      font-weight: 700;
      white-space: nowrap;
    }
    .summary tr:last-child td { border-bottom: 0; }
    .summary th:last-child, .summary td:last-child { border-right: 0; }
    .detail-head { align-items: flex-start; }
    .detail-title-block { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
    .detail-back { flex: 0 0 auto; width: 36px; height: 34px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border-radius: var(--radius); color: var(--text); background: var(--panel); border: 1px solid var(--border); font-size: 23px; line-height: 1; }
    .detail-back:hover { border-color: var(--blue); color: var(--blue); }
    .detail-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 6px;
      flex-shrink: 0;
      flex-wrap: wrap;
    }
    .detail-actions button {
      min-width: 34px;
      height: 34px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0 9px;
      border-radius: var(--radius);
      color: var(--muted);
      background: var(--panel);
      border: 1px solid var(--border);
      font-weight: 700;
    }
    .detail-actions button.text {
      width: auto;
      font-size: 12px;
    }
    .detail-actions button:disabled {
      opacity: .35;
    }
    .detail-bottom-bar {
      display: grid;
      position: sticky;
      bottom: 0;
      z-index: 4;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      padding: 10px 0 calc(10px + env(safe-area-inset-bottom));
      margin-top: 12px;
      background: color-mix(in srgb, var(--bg) 94%, transparent);
      backdrop-filter: blur(12px);
    }
    #reportDetail {
      flex: 0 0 auto;
      margin-top: 0;
    }
    .detail-bottom-bar button {
      width: 100%;
      height: 42px;
      color: #eef4fb;
      background: #334150;
      border-color: #526273;
      box-shadow: 0 8px 22px rgba(0,0,0,.22);
    }
    .bubble-head {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      margin-bottom: 8px;
    }
    .bubble-head .bubble-title {
      flex: 1;
      min-width: 0;
      margin-bottom: 0;
    }
    .copy-mini {
      flex: 0 0 auto;
      height: 26px;
      padding: 0 8px;
      border-radius: 7px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.04);
      color: var(--muted);
      font-size: 11px;
      font-weight: 650;
    }
    .detail-section {
      border-top: 1px solid var(--line);
      margin-top: 12px;
      padding-top: 12px;
    }
    .detail-section h3 {
      margin: 0 0 8px;
      font-size: 13px;
      color: var(--yellow);
      font-weight: 650;
    }
    .chips { display: flex; flex-wrap: wrap; gap: 6px; }
    .chip {
      max-width: 100%;
      color: var(--text);
      background: #20252b;
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 5px 8px;
      font-size: 12px;
      overflow-wrap: anywhere;
    }
    .event-row {
      display: grid;
      grid-template-columns: 88px 1fr;
      gap: 8px;
      padding: 7px 0;
      border-top: 1px solid color-mix(in srgb, var(--line) 65%, transparent);
    }
    .event-row:first-child { border-top: 0; }
    .event-type { color: var(--blue); font-size: 12px; overflow-wrap: anywhere; }
    .event-msg { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
    .process-steps { display: grid; gap: 8px; }
    .process-step { min-width: 0; padding: 9px 10px; border: 1px solid var(--line); border-radius: 6px; background: rgba(255,255,255,.025); }
    .process-step-index { margin-bottom: 5px; color: var(--yellow); font-size: 11px; font-weight: 650; }
    .process-step pre { max-height: 360px; margin: 0; padding: 0; border: 0; background: transparent; color: var(--text); font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow: auto; overflow-wrap: anywhere; }
    .kv { display: grid; gap: 6px; margin-top: 10px; }
    .kv div { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
    .pill { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
    .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
    .dot.on { background: var(--green); }
    .ok { color: var(--green); }
    .warn { color: var(--yellow); }
    .bad { color: var(--red); }
    pre {
      margin: 0;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
      background: #20252b;
      border: 1px solid var(--line);
      border-radius: 7px;
      padding: 10px;
      max-height: 300px;
      overflow: auto;
    }
    .empty { color: var(--muted); text-align: center; padding: 28px 8px; }
    .loading {
      color: var(--muted);
      text-align: center;
      padding: 28px 8px;
      font-size: 13px;
    }
    .loading::before {
      content: "";
      display: inline-block;
      width: 10px;
      height: 10px;
      margin-right: 8px;
      border: 2px solid var(--line);
      border-top-color: var(--blue);
      border-radius: 50%;
      vertical-align: -1px;
      animation: spin .8s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }
    .load-more {
      align-self: center;
      min-width: 150px;
      color: var(--muted);
      background: #20252b;
      border-style: dashed;
      font-size: 12px;
    }
    .load-more:disabled { opacity: .65; }

    /* Relay Web workbench: the mobile flow remains the fallback, while wide screens
       get stable workspace, conversation, and diagnostics boundaries. */
    .app {
      max-width: 1480px;
      min-height: 100dvh;
      padding: calc(16px + env(safe-area-inset-top)) 22px 22px;
    }
    .app.chat-mode,
    .app.detail-mode {
      height: 100dvh;
      min-height: 100dvh;
      overflow: hidden;
    }
    header { flex: 0 0 auto; }
    .topbar { min-height: 38px; }
    .topbar h1 { letter-spacing: .01em; }
    .tabs.compact { display: none; }
    .web-shell {
      display: grid;
      grid-template-columns: minmax(220px, 270px) minmax(0, 1fr) minmax(250px, 310px);
      gap: 14px;
      flex: 1;
      min-height: 0;
      padding-top: 14px;
    }
    .web-sidebar,
    .web-main,
    .web-inspector {
      min-width: 0;
      min-height: 0;
    }
    .web-sidebar,
    .web-inspector {
      display: flex;
      flex-direction: column;
      background: color-mix(in srgb, var(--panel) 72%, var(--bg));
      border: 1px solid var(--line);
      border-radius: var(--radius);
      overflow: hidden;
    }
    .web-sidebar > #agents.section,
    .web-inspector > .inspector-content {
      min-height: 0;
      overflow-y: auto;
      padding: 0 12px 12px;
      -webkit-overflow-scrolling: touch;
    }
    .web-sidebar > #agents.section { display: block; }
    .web-main {
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    .web-main > .section.active { min-height: 0; }
    .panel-heading,
    .workbench-heading,
    .section-heading {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }
    .panel-heading {
      flex: 0 0 auto;
      padding: 14px 14px 12px;
      border-bottom: 1px solid var(--line);
    }
    .panel-heading h2,
    .workbench-heading h2,
    .section-heading h2 {
      margin: 2px 0 0;
      font-size: 16px;
      line-height: 1.2;
      color: #f0f3f6;
    }
    .eyebrow {
      display: block;
      color: var(--muted);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .12em;
    }
    .panel-count,
    .inspector-live,
    .connection-state {
      color: var(--muted);
      font-size: 11px;
      white-space: nowrap;
    }
    .connection-state::before,
    .inspector-live::before {
      content: "";
      display: inline-block;
      width: 7px;
      height: 7px;
      margin-right: 5px;
      border-radius: 50%;
      background: var(--muted);
      vertical-align: 1px;
    }
    .connection-state.ready::before,
    .inspector-live.ready::before { background: var(--green); }
    .connection-state.error::before,
    .inspector-live.busy::before { background: var(--yellow); }
    .web-main > #workbench.section.active {
      display: flex;
      flex-direction: column;
      flex: 1;
    }
    .workbench-heading { flex: 0 0 auto; padding: 2px 2px 12px; }
    .web-main > #commands.section.active,
    .web-main > #reportDetailPage.section.active {
      display: block;
      flex: 1;
      overflow-y: auto;
      padding-right: 2px;
      -webkit-overflow-scrolling: touch;
    }
    #commands .section-heading { margin: 2px 2px 14px; }
    #commands .list { padding-bottom: 18px; }
    .web-sidebar .card {
      padding: 10px;
      border-radius: 7px;
      background: #20252b;
    }
    .web-sidebar .list { gap: 8px; padding-top: 12px; }
    .web-sidebar .project-list,
    .web-sidebar .session-list { gap: 6px; }
    .web-sidebar .project-card,
    .web-sidebar .session-card { padding: 8px; }
    .web-sidebar .actions { grid-template-columns: repeat(4, 1fr); gap: 5px; }
    .web-sidebar .meta { font-size: 11px; }
    .inspector-content { display: grid; align-content: start; gap: 10px; }
    .inspector-empty { color: var(--muted); padding: 22px 4px; text-align: center; font-size: 12px; }
    .inspector-block {
      background: #20252b;
      border: 1px solid var(--line);
      border-radius: 7px;
      padding: 10px;
    }
    .inspector-block h3 {
      margin: 0 0 8px;
      color: var(--text);
      font-size: 12px;
      font-weight: 700;
    }
    .inspector-row {
      display: grid;
      grid-template-columns: 58px minmax(0, 1fr);
      gap: 8px;
      padding: 5px 0;
      border-top: 1px solid color-mix(in srgb, var(--line) 65%, transparent);
      font-size: 11px;
    }
    .inspector-row:first-of-type { border-top: 0; }
    .inspector-row span { color: var(--muted); }
    .inspector-row strong { min-width: 0; color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
    .inspector-row strong.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 10px; }
    .inspector-progress { height: 5px; margin-top: 8px; overflow: hidden; border-radius: 999px; background: #363d45; }
    .inspector-progress i { display: block; height: 100%; border-radius: inherit; background: var(--green); }
    .inspector-actions { display: flex; gap: 6px; margin-top: 10px; }
    .inspector-actions button { flex: 1; min-width: 0; padding: 7px 8px; font-size: 11px; }
    .project-context h2 { margin-bottom: 8px; }
    .project-context .kv { margin-top: 0; }
    .project-context .kv b { min-width: 0; overflow-wrap: anywhere; }
    .project-context .kv b.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 10px; font-weight: 500; }
    .project-context-empty { color: var(--muted); font-size: 12px; line-height: 1.45; }
    .idea-run-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12px; }
    .idea-workspace-actions, .idea-run-actions { display: flex; align-items: center; gap: 4px; }
    .idea-workspace-actions button, .idea-run-actions button { width: 25px; height: 25px; padding: 0; border-radius: 5px; font-size: 11px; }
    .idea-run-actions button:disabled { cursor: default; opacity: .38; }
    .idea-run-list { margin-top: 7px; }
    .idea-run-tree { display: grid; gap: 3px; }
    .idea-run-group { min-width: 0; }
    .idea-run-group-header { display: flex; align-items: center; width: 100%; min-height: 27px; gap: 6px; padding: 4px 5px; border: 0; border-radius: 4px; color: var(--muted); background: transparent; text-align: left; }
    .idea-run-group-header:hover { background: #262d35; color: var(--text); }
    .idea-run-group-header strong { color: inherit; font-size: 11px; font-weight: 650; }
    .idea-run-group-header small { margin-left: auto; min-width: 18px; color: var(--muted); font-size: 10px; text-align: right; }
    .idea-run-chevron { display: inline-block; width: 10px; color: var(--muted); font-size: 17px; line-height: 1; transform: rotate(0deg); transition: none; }
    .idea-run-group.open .idea-run-chevron { transform: rotate(90deg); }
    .idea-run-group-dot { width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: #75808c; }
    .idea-run-group-dot.running { background: var(--green); }
    .idea-run-group-dot.active { background: var(--yellow); }
    .idea-run-group-dot.unknown { background: var(--yellow); }
    .idea-run-children { display: grid; gap: 1px; margin: 1px 0 4px 10px; padding-left: 10px; border-left: 1px solid #39434e; }
    .idea-run-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 7px; min-height: 32px; padding: 4px 5px; border: 0; border-radius: 4px; background: transparent; }
    .idea-run-row::before { position: absolute; left: -11px; top: 50%; width: 7px; border-top: 1px solid #39434e; content: ""; }
    .idea-run-row:hover { background: #20262e; }
    .idea-run-main { min-width: 0; }
    .idea-run-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-size: 12px; font-weight: 650; }
    .idea-run-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; color: var(--muted); font-size: 10px; }
    .idea-run-state { white-space: nowrap; font-size: 11px; font-weight: 650; }
    .idea-run-state.running { color: var(--green); }
    .idea-run-state.working { color: var(--yellow); }
    .idea-run-state.stopped { color: var(--muted); }
    .status-working { color: var(--yellow) !important; }
    .status-idle { color: var(--green) !important; }
    .provider-mark {
      display: inline-flex;
      align-items: center;
      min-height: 19px;
      padding: 2px 6px;
      border: 1px solid var(--line);
      border-radius: 5px;
      color: var(--muted);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .04em;
    }
    .provider-mark.codex { color: #d7b47b; border-color: #6b5737; }
    .provider-mark.claude { color: #9bbce0; border-color: #405a73; }
    .chat-stream { padding-top: 8px; }
    .chat-stream .msg { max-width: min(760px, 84%); }
    .chat-stream .msg.assistant { margin-bottom: 5px; }
    .composer { margin-left: 0; margin-right: 0; }
    .composer-box { grid-template-columns: 180px auto minmax(0, 1fr) auto; }
    .composer select { grid-column: auto; }
    .composer textarea { min-height: 48px; }
    .section-heading { padding: 2px 2px 12px; }
    .section-heading + .list { padding-bottom: 18px; }
    @media (max-width: 1080px) {
      .web-shell { grid-template-columns: minmax(205px, 240px) minmax(0, 1fr); }
      .web-inspector { display: none; }
      .composer-box { grid-template-columns: 150px auto minmax(0, 1fr) auto; }
    }
    @media (max-width: 560px) {
      .app { padding: calc(10px + env(safe-area-inset-top)) 10px 10px; }
      .app.chat-mode { padding-bottom: 0; }
      .token, .grid.two { grid-template-columns: 1fr; }
      .controller-mode .config-row { grid-template-columns: 1fr; }
      .actions { grid-template-columns: repeat(2, 1fr); }
      .msg { max-width: 91%; }
      .composer { margin: 0 -10px; padding-left: 10px; padding-right: 10px; }
      .chat-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .web-shell { display: block; padding-top: 8px; }
      .web-sidebar { display: none; }
      .app.agents-mode .web-sidebar { display: flex; height: 100%; }
      .app.agents-mode .web-main { display: none; }
      .web-main { height: 100%; }
      .web-main > #workbench.section.active { min-height: 0; }
      .web-inspector { display: none; }
      .workbench-heading { padding-bottom: 8px; }
      .composer-box { grid-template-columns: auto 1fr auto; }
      .composer select { grid-column: 1 / -1; }
      .chat-stream .msg { max-width: 91%; }
    }

    /* Desktop workbench layout: a WeChat-style rail, conversation list and
       one spacious conversation surface. Mobile keeps the rules above. */
    @media (min-width: 981px) {
      .app.prototype.chat-mode,
      .app.prototype.detail-mode {
        position: relative;
        width: 100%;
        max-width: none;
        height: 100dvh;
        min-height: 100dvh;
        padding: 0 0 0 72px;
        overflow: hidden;
      }
      .app.prototype.chat-mode .topbar,
      .app.prototype.detail-mode .topbar {
        position: absolute;
        inset: 0 auto 0 0;
        z-index: 25;
        width: 72px;
        height: 100dvh;
        min-height: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
        padding: 20px 10px;
        border-right: 1px solid var(--line);
        border-bottom: 0;
        background: #151a20;
      }
      .app.prototype .brand {
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
      }
      .app.prototype .brand strong { font-size: 15px; letter-spacing: -.04em; }
      .app.prototype .brand span { display: none; }
      .app.prototype .top-actions {
        position: absolute;
        left: 20px;
        right: 20px;
        top: auto;
        bottom: 18px;
        flex-direction: column;
        align-items: center;
        gap: 8px;
      }
      .app.prototype .top-actions .icon-btn { width: 32px; height: 32px; }
      .app.prototype .tabs.compact {
        position: absolute;
        left: 0;
        top: 104px;
        z-index: 26;
        display: flex;
        flex-direction: column;
        width: 72px;
        gap: 8px;
        margin: 0;
        padding: 0 9px;
      }
      .app.prototype .tabs.compact button {
        flex: 0 0 42px;
        width: 54px;
        padding: 0;
        border: 1px solid transparent;
        border-radius: 8px;
        background: transparent;
        color: var(--muted);
        font-size: 0;
      }
      .app.prototype .tabs.compact button::before {
        display: block;
        color: currentColor;
        font-size: 20px;
        line-height: 40px;
      }
      .app.prototype .tabs.compact button[data-tab="agents"]::before { content: "☷"; }
      .app.prototype .tabs.compact button[data-tab="workbench"]::before { content: "▣"; }
      .app.prototype .tabs.compact button[data-tab="commands"]::before { content: "≡"; }
      .app.prototype .tabs.compact button.active {
        border-color: rgba(93,169,255,.42);
        background: var(--blue-soft);
        color: var(--blue);
      }
      .app.prototype .tabs.compact button.has-new { color: var(--yellow); }
      .app.prototype .web-body {
        width: 100%;
        height: 100dvh;
        min-height: 0;
        position: relative;
        grid-template-columns: 340px minmax(0, 1fr) 320px;
      }
      .app.prototype .web-body.left-panel-collapsed { grid-template-columns: 40px minmax(0, 1fr) 320px; }
      .app.prototype .web-body.right-panel-collapsed { grid-template-columns: 340px minmax(0, 1fr); }
      .app.prototype .web-body.left-panel-collapsed.right-panel-collapsed { grid-template-columns: 40px minmax(0, 1fr); }
      .app.prototype .web-body > .right { display: flex; flex-direction: column; min-width: 0; }
      .app.prototype .web-body.right-panel-collapsed > .right { display: none; }
      .app.prototype .right-panel-reveal {
        position: absolute;
        top: 12px;
        right: 12px;
        z-index: 30;
        width: 32px;
        height: 32px;
        padding: 0;
        border: 1px solid var(--line);
        border-radius: 6px;
        background: var(--panel-2);
        color: var(--muted);
        font-size: 22px;
        line-height: 28px;
      }
      .app.prototype .right-panel-reveal:hover { border-color: var(--blue); color: var(--text); background: var(--blue-soft); }
      .app.prototype .web-body:not(.right-panel-collapsed) .right-panel-reveal { display: none; }
      .app.prototype .web-body > .right .right-toggle { display: none; }
      .app.prototype .left { padding: 20px 12px 16px; background: #1a2027; }
      .app.prototype .left .section-head { padding-right: 4px; }
      .app.prototype .left-toggle { display: none; }
      .app.prototype .main { min-width: 0; background: var(--bg); }
      .app.prototype .main-head { min-height: 58px; padding: 14px 28px; }
      .app.prototype .workbench-tools { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
      .app.prototype .workbench-actions { display: flex; align-items: center; gap: 5px; margin-right: 4px; }
      .app.prototype .workbench-action { min-height: 30px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel-2); color: var(--muted); font-size: 11px; white-space: nowrap; }
      .app.prototype .workbench-action:hover:not(:disabled) { border-color: var(--blue); background: var(--blue-soft); color: var(--text); }
      .app.prototype .workbench-action:disabled { cursor: default; opacity: .45; }
      .app.prototype .workbench-action.danger { color: var(--red, #ff6b6b); }
      .app.prototype .panel-tool {
        min-height: 30px;
        padding: 5px 9px;
        border: 1px solid var(--line);
        border-radius: 6px;
        background: var(--panel-2);
        color: var(--muted);
        font-size: 11px;
      }
      .app.prototype .panel-tool:hover,
      .app.prototype .panel-tool.active { border-color: var(--blue); background: var(--blue-soft); color: var(--text); }
      .app.prototype .panel-tool span { margin-left: 3px; color: var(--yellow); }
      .app.prototype .queue-inspector-summary,
      .app.prototype .queue-inspector-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
      .app.prototype .queue-inspector-summary { margin-bottom: 10px; color: var(--text); }
      .app.prototype .queue-inspector-summary span { color: var(--yellow); font-size: 12px; }
      .app.prototype .queue-inspector-row { align-items: flex-start; padding: 9px 0; border-top: 1px solid var(--line); font-size: 11px; }
      .app.prototype .queue-inspector-main { min-width: 0; flex: 1 1 auto; }
      .app.prototype .queue-inspector-heading { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
      .app.prototype .queue-inspector-row b,
      .app.prototype .queue-inspector-row small { display: block; }
      .app.prototype .queue-inspector-row small { margin-top: 2px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 190px; }
      .app.prototype .queue-inspector-message { margin-top: 6px; color: var(--text); line-height: 1.45; overflow-wrap: anywhere; }
      .app.prototype .queue-inspector-reason { margin-top: 4px; color: var(--muted); line-height: 1.35; overflow-wrap: anywhere; }
      .app.prototype .queue-inspector-actions { display: flex; flex: 0 0 auto; flex-direction: column; align-items: flex-end; gap: 7px; }
      .app.prototype .queue-inspector-cancel { padding: 2px 7px; border: 1px solid var(--red, #e06c75); border-radius: 4px; background: transparent; color: var(--red, #e06c75); font-size: 11px; cursor: pointer; }
      .app.prototype .queue-inspector-cancel:hover { background: rgba(224,108,117,.14); }
      .app.prototype .inspector-session-card .inspector-subsection { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
      .app.prototype .inspector-session-card .inspector-subsection h3 { margin: 0 0 8px; font-size: 12px; color: var(--text); }
      .app.prototype .inspector-activity-row { display: flex; align-items: flex-start; gap: 8px; margin-top: 14px; padding: 9px 0 0; border-top: 1px solid var(--line); color: var(--yellow); }
      .app.prototype .inspector-activity-row .dot { flex: 0 0 7px; margin-top: 5px; background: var(--yellow); }
      .app.prototype .inspector-activity-row strong,
      .app.prototype .inspector-activity-row span { display: block; }
      .app.prototype .inspector-activity-row strong { font-size: 11px; }
      .app.prototype .inspector-activity-row span { margin-top: 2px; color: var(--text); font-size: 11px; }
      .app.prototype .chat-stream { padding: 24px 28px; }
      .app.prototype .msg { max-width: min(860px, 82%); }

      /* WeChat-style composer: large editor above a compact tool row. */
      .app.prototype .composer {
        padding: 12px 24px 18px;
        border-top: 1px solid var(--line);
        background: #151a20;
      }
      .app.prototype .compose-row {
        display: grid;
        grid-template-columns: 38px 38px 38px minmax(0, 1fr) 42px auto;
        grid-template-rows: minmax(74px, auto) 34px;
        gap: 4px 8px;
        padding: 10px 12px 8px;
        border: 1px solid #3a414a;
        border-radius: 10px;
        background: #1b2026;
      }
      .app.prototype .compose-input-wrap {
        grid-column: 1 / -1;
        grid-row: 1;
        min-width: 0;
      }
      .app.prototype .compose-row.voice-enabled .compose-input-wrap {
        grid-column: 1 / -1;
        grid-row: 1;
      }
      .app.prototype .compose-row.voice-enabled textarea {
        width: 100%;
      }
      .app.prototype .compose-row textarea {
        width: 100%;
        min-height: 74px;
        max-height: 180px;
        resize: vertical;
        padding: 4px 2px;
        border: 0;
        border-radius: 0;
        background: transparent;
        font-size: 14px;
        line-height: 1.55;
      }
      .app.prototype .compose-row textarea:focus { border: 0; box-shadow: none; }
      .app.prototype .compose-row #voice,
      .app.prototype .compose-row #attachmentPickerBtn,
      .app.prototype .compose-row #sound,
      .app.prototype .compose-row #shortcutBtn {
        display: inline-flex;
        grid-row: 2;
        align-self: center;
        width: 34px;
        height: 30px;
        min-height: 30px;
        padding: 0;
        border: 0;
        border-radius: 6px;
        background: transparent;
        color: var(--muted);
      }
      .app.prototype .compose-row #voice { grid-column: 1; }
      .app.prototype .compose-row #attachmentPickerBtn { grid-column: 2; }
      .app.prototype .compose-row #shortcutBtn {
        grid-column: 3;
        font-size: 0;
      }
      .app.prototype .compose-row #shortcutBtn::before { content: "⌁"; font-size: 21px; line-height: 30px; }
      .app.prototype .compose-row #sound { grid-column: 5; }
      .app.prototype .compose-row #voice:hover,
      .app.prototype .compose-row #attachmentPickerBtn:hover,
      .app.prototype .compose-row #sound:hover,
      .app.prototype .compose-row #shortcutBtn:hover,
      .app.prototype .compose-row #voice.listening { color: var(--text); background: var(--panel-2); }
      .app.prototype .compose-row #sendClaude {
        grid-column: 6;
        grid-row: 2;
        height: 30px;
        min-height: 30px;
        align-self: center;
        padding: 4px 15px;
        border-radius: 6px;
      }
      .app.prototype .compose-row.voice-enabled { grid-template-columns: 38px 38px 38px minmax(0, 1fr) 42px auto; }
      .app.prototype .compose-row.voice-enabled #voice { grid-column: 1; }
      .app.prototype .compose-row.voice-enabled #attachmentPickerBtn { grid-column: 2; }
      .app.prototype .compose-row.voice-enabled #shortcutBtn { grid-column: 3; }
      .app.prototype .compose-row.voice-enabled #sound { grid-column: 5; }
      .app.prototype .compose-row.voice-enabled #sendClaude { grid-column: 6; }
      .app.prototype .shortcut-panel { margin-bottom: 8px; }

      /* Detail view is a full-workspace document surface. Keep the desktop
         workbench grid from reserving the hidden session-list column. */
      .app.prototype.detail-mode {
        padding-left: 0;
      }
      .app.prototype.detail-mode .topbar {
        display: none;
      }
      .app.prototype.detail-mode .tabs.compact {
        display: none;
      }
      .app.prototype.detail-mode .web-body {
        grid-template-columns: minmax(0, 1fr);
      }
      .app.prototype.detail-mode .web-body > .left,
      .app.prototype.detail-mode .web-body > .right {
        display: none;
      }
      .app.prototype.detail-mode .right-panel-reveal { display: none !important; }
      .app.prototype.detail-mode .main {
        width: 100%;
        min-width: 0;
      }
      .app.prototype.detail-mode #reportDetailPage.active {
        display: flex;
        flex: 1;
        min-width: 0;
        min-height: 0;
        padding: 0;
      }
      .app.prototype.detail-mode #reportDetail {
        width: 100%;
        max-width: none;
        min-width: 0;
        min-height: 100%;
        margin: 0;
        padding: 0 34px;
        border: 0;
        border-radius: 0;
        background: transparent;
      }
      .app.prototype.detail-mode #reportDetail > .detail-head {
        position: sticky;
        top: 0;
        z-index: 12;
        margin: 0 -34px;
        padding: 16px 34px 14px;
        border-bottom: 1px solid var(--line);
        background: rgba(17, 21, 26, .96);
        backdrop-filter: blur(14px);
      }
    }