/*
 * chat-bubbles.css — messages, bubbles, and bubble-rendered widgets.
 *
 * Verbatim slice extracted from pwa/views/chat.js inline <style> block at
 * commit #0 of chat-domain-redesign per design DD-05a + DD-06. Zero token
 * migration, zero class rename, zero behavior change at the extraction
 * step. Per-section commits #5 + #11..#12 progressively rewrite .ch-bubble
 * selectors to .cha-bubble (gated by experimentalFeatures.redesign per
 * DD-09).
 *
 * Surface scope: .ch-messages scroller, .ch-bubble core (user/assistant/
 * system + markdown), context-transition pills, exec-event/research
 * cards, all bubble-rendered widgets (research, flight, person profile,
 * usage, email, task card, subtask, task list, backlog, queue), reply
 * bar, attachment pills (in-bubble), reply quote, msg-actions overlay,
 * timeline, status footer, question card.
 */

      /* overscroll-behavior-x:contain blocks macOS Safari/Chrome from
         claiming two-finger horizontal swipes for browser back/forward
         when the gesture starts inside the chat scroller. */
      .ch-messages { flex:1; overflow-y:auto; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; padding:12px 12px 8px; display:flex; flex-direction:column; gap:var(--space-base); }
      /* touch-action:pan-y tells the browser our bubbles only scroll
         vertically natively — horizontal touch/trackpad gestures stay
         with our JS swipe handlers and don't trigger native pan. */
      .ch-bubble, .eml-card { touch-action:pan-y; }
      /* Finance-aligned: 14px radius matching .fin-rule-card. Bubble width capped at min(75%, 640px) and user bubble uses --color-primary-container (deep navy) so primary action color stays reserved for CTAs. */
      .ch-bubble { max-width:min(75%, 640px); padding:10px 14px; border-radius:var(--radius-roomy); font-size:13px; line-height:1.55; word-break:break-word; position:relative; -webkit-user-select:text; user-select:text; }
      .ch-bubble.user { align-self:flex-end; background:var(--color-primary-container); color:var(--color-on-primary-container); border-bottom-right-radius:4px; white-space:pre-wrap; padding:8px 14px; }
      .ch-bubble.assistant { align-self:flex-start; background:var(--bg2); color:var(--text); border:1px solid color-mix(in srgb, white 4%, transparent); border-bottom-left-radius:4px; }
      .ch-bubble.system { align-self:center; background:color-mix(in srgb, white 4%, transparent); border:none; color:var(--hint); font-size:12px; font-weight:500; border-radius:var(--radius-pill); padding:6px 12px; }
      /* Context-transition pill + execution-event card — non-bubble custom
         shapes for system interactions. Renamed `.ch-*` → `.cha-*` for
         class-prefix consistency with the rest of the chat-domain-redesign
         migration. Atomic rename with the matching markup in
         chat-messages.js's renderContextTransition + renderExecutionEvent;
         `ch-ctx-transition-*` abbreviation collapsed to
         `cha-context-transition-*` so all child class names share their
         parent's full prefix. No `experimentalFeatures.redesign` gate —
         these aren't bubbles and weren't part of DD-07-05's flag-gated
         migration; outright rename matches the precedent set by
         `.ch-task-bar*` → `.cha-task-context*` (Commit #3, 146933f). */
      .cha-context-transition { align-self:center; display:flex; flex-direction:column; align-items:center; gap:var(--space-tight); margin:4px 0 8px; }
      .cha-context-transition-pill { display:inline-flex; align-items:center; gap:var(--space-base); padding:7px 12px; border-radius:var(--radius-pill); background:color-mix(in srgb, var(--color-primary) 10%, transparent); border:1px solid color-mix(in srgb, var(--color-primary) 22%, transparent); color:var(--text); font-size:12px; }
      .cha-context-transition-kind { text-transform:uppercase; letter-spacing:0.3px; font-size:10px; color:var(--btn); font-weight:700; }
      .cha-context-transition-title { font-weight:600; }
      .cha-context-transition-source { color:var(--hint); font-size:11px; }
      .cha-context-transition-body { max-width:560px; text-align:center; color:var(--hint); font-size:12px; }
      .cha-exec-event { align-self:stretch; padding:10px 12px; border-radius:var(--radius-md); background:color-mix(in srgb, white 4%, transparent); border:1px solid color-mix(in srgb, white 7%, transparent); color:var(--text); }
      .cha-exec-event-head { display:flex; align-items:center; justify-content:space-between; gap:var(--space-base); font-size:12px; }
      .cha-exec-event-title { font-weight:700; }
      .cha-exec-event-status { color:var(--hint); text-transform:capitalize; }
      .cha-exec-event-body { margin-top:5px; font-size:12px; color:var(--hint); }
      .rs-card {
        align-self:stretch; border-radius:var(--radius-roomy); border:1px solid color-mix(in srgb, white 8%, transparent);
        background:color-mix(in srgb, white 3%, transparent); overflow:hidden;
      }
      .rs-card[open] { background:color-mix(in srgb, white 4%, transparent); }
      .rs-card.tone-info { border-color:color-mix(in srgb, var(--color-primary) 22%, transparent); background:color-mix(in srgb, var(--color-primary) 8%, transparent); }
      .rs-card.tone-success { border-color:color-mix(in srgb, var(--color-success) 20%, transparent); background:color-mix(in srgb, var(--color-success) 8%, transparent); }
      .rs-card.tone-warning { border-color:color-mix(in srgb, var(--color-warning) 22%, transparent); background:color-mix(in srgb, var(--color-warning) 8%, transparent); }
      .rs-card.tone-error { border-color:color-mix(in srgb, var(--color-error) 20%, transparent); background:color-mix(in srgb, var(--color-error) 8%, transparent); }
      .rs-summary {
        list-style:none; display:flex; align-items:center; gap:var(--space-snug); padding:10px 12px; cursor:pointer;
      }
      .rs-summary::-webkit-details-marker { display:none; }
      .rs-phase {
        font-size:10px; font-weight:800; letter-spacing:0.4px; text-transform:uppercase;
        color:var(--color-primary); background:color-mix(in srgb, white 12%, transparent); border-radius:var(--radius-pill); padding:4px 7px;
      }
      .rs-title { flex:1; min-width:0; font-size:13px; font-weight:700; color:var(--text); }
      .rs-toggle { font-size:11px; color:var(--hint); font-weight:600; }
      .rs-body { padding:0 12px 12px; }
      .rs-body-title { font-size:12px; font-weight:700; color:var(--text); margin-bottom:var(--space-tight); }
      .rs-body-copy { font-size:12px; line-height:1.5; color:var(--hint); }
      .rs-meta { display:flex; flex-wrap:wrap; gap:var(--space-tight); margin-top:var(--space-base); }
      .rs-chip {
        font-size:10px; font-weight:700; color:var(--hint); background:color-mix(in srgb, white 8%, transparent);
        border-radius:var(--radius-pill); padding:4px 7px;
      }

      /* Markdown typography */
      .ch-bubble code { font-family:'SF Mono','Menlo',monospace; font-size:12px; background:color-mix(in srgb, black 25%, transparent); border-radius:var(--radius-sm); padding:1px 5px; }
      .ch-bubble pre { display:block; padding:10px 12px; margin:8px -2px; overflow-x:auto; background:color-mix(in srgb, black 30%, transparent); border-radius:var(--radius-default); white-space:pre; -webkit-overflow-scrolling:touch; }
      .ch-bubble pre code { background:none; padding:0; font-size:12px; line-height:1.45; }
      .ch-bubble strong { font-weight:700; }
      .ch-bubble em { font-style:italic; opacity:0.9; }

      /* Lists */
      .ch-bubble ul,.ch-bubble ol { margin:6px 0; padding-left:18px; }
      .ch-bubble ul { list-style:disc; }
      .ch-bubble ol { list-style:decimal; }
      .ch-bubble li { margin:3px 0; padding-left:var(--space-hairline); }
      .ch-bubble li > p { margin:2px 0; }

      /* Headings — compact for chat context */
      .ch-bubble h1,.ch-bubble h2,.ch-bubble h3,.ch-bubble h4 { line-height:1.3; }
      .ch-bubble h1 { font-size:16px; font-weight:700; margin:12px 0 6px; }
      .ch-bubble h2 { font-size:15px; font-weight:700; margin:10px 0 4px; }
      .ch-bubble h3 { font-size:14px; font-weight:600; margin:8px 0 3px; color:color-mix(in srgb, white 85%, transparent); }
      .ch-bubble h4 { font-size:13px; font-weight:600; margin:6px 0 2px; color:var(--hint); }
      .ch-bubble > h1:first-child,.ch-bubble > h2:first-child,.ch-bubble > h3:first-child { margin-top:0; }

      /* Block elements */
      .ch-bubble blockquote { border-left:3px solid color-mix(in srgb, white 15%, transparent); padding:2px 0 2px 10px; margin:8px 0; color:color-mix(in srgb, white 65%, transparent); font-size:13px; }
      .ch-bubble hr { border:none; border-top:1px solid color-mix(in srgb, white 8%, transparent); margin:10px 0; }
      .ch-bubble a { color:var(--link); text-decoration:none; }
      .ch-bubble a:hover { text-decoration:underline; }

      /* Tables — scrollable, compact */
      .ch-bubble .md-table-wrap { overflow-x:auto; margin:8px -2px; -webkit-overflow-scrolling:touch; }
      .ch-bubble table { border-collapse:collapse; font-size:12px; min-width:100%; white-space:nowrap; }
      .ch-bubble th,.ch-bubble td { border:1px solid color-mix(in srgb, white 8%, transparent); padding:5px 10px; text-align:left; }
      .ch-bubble th { background:color-mix(in srgb, black 25%, transparent); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:0.3px; color:var(--hint); }
      .ch-bubble td { font-size:13px; }
      .ch-bubble tr:nth-child(even) td { background:color-mix(in srgb, black 8%, transparent); }

      /* Paragraphs */
      .ch-bubble p { margin:6px 0; }
      .ch-bubble > p:first-child { margin-top:0; }
      .ch-bubble > p:last-child { margin-bottom:0; }
      .ch-bubble > ul:first-child,.ch-bubble > ol:first-child { margin-top:0; }
      /* ── Activity Timeline ── */
      .ch-timeline { margin:8px 0 4px; }
      .ch-tl-step { display:flex; gap:var(--space-snug); min-height:36px; }
      .ch-tl-step.last { min-height:unset; }
      .ch-tl-gutter { display:flex; flex-direction:column; align-items:center; width:28px; flex-shrink:0; }
      .ch-tl-icon { width:28px; height:28px; border-radius:var(--radius-default); background:color-mix(in srgb, white 6%, transparent); display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; }
      .ch-tl-line { width:2px; flex:1; background:color-mix(in srgb, white 8%, transparent); margin:3px 0; min-height:8px; }
      .ch-tl-body { flex:1; padding-bottom:var(--space-snug); min-width:0; }
      .ch-tl-step.last .ch-tl-body { padding-bottom:0; }
      .ch-tl-header { display:flex; align-items:center; gap:var(--space-tight); line-height:28px; }
      .ch-tl-num { font-size:10px; font-weight:700; color:var(--hint); background:color-mix(in srgb, white 6%, transparent); width:18px; height:18px; border-radius:var(--radius-full); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
      .ch-tl-action { font-size:13px; font-weight:600; color:var(--text); }
      .ch-tl-desc { font-size:12px; color:var(--hint); line-height:1.4; margin-top:var(--space-hairline); }
      .ch-tl-desc code { font-size:11px; }
      .ch-tl-desc a { color:var(--link); }

      /* ── Status Footer ── */
      .ch-status { margin:10px -14px -10px; padding:8px 14px; border-radius:0 0 18px 18px; font-size:13px; font-weight:600; display:flex; align-items:center; gap:var(--space-tight); }
      .ch-status-success { background:color-mix(in srgb, var(--color-success) 12%, transparent); color:var(--color-success); }
      .ch-status-error { background:color-mix(in srgb, var(--color-error) 12%, transparent); color:var(--color-error); }
      .ch-status-warning { background:color-mix(in srgb, var(--color-warning) 12%, transparent); color:var(--color-warning); }
      .ch-bubble.assistant .ch-status { border-bottom-left-radius:4px; }

      /* ── Question Card ── */
      .ch-question { margin:8px 0 2px; }
      .ch-question-text { font-size:14px; font-weight:600; margin-bottom:var(--space-base); line-height:1.4; }
      .ch-question-opts { display:flex; flex-direction:column; gap:var(--space-tight); }
      .ch-opt-btn { display:block; width:100%; text-align:left; padding:10px 12px; background:color-mix(in srgb, white 4%, transparent); border:1px solid color-mix(in srgb, white 10%, transparent); border-radius:var(--radius-snug); color:var(--text); font-size:13px; line-height:1.4; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background 0.15s, border-color 0.15s; font-family:inherit; }
      .ch-opt-btn:hover { background:color-mix(in srgb, white 8%, transparent); border-color:color-mix(in srgb, white 18%, transparent); }
      .ch-opt-btn:active { background:var(--btn); color:var(--btn-text); border-color:var(--btn); }
      .ch-opt-btn strong { font-weight:600; }
      .ch-opt-btn code { font-size:12px; background:color-mix(in srgb, black 20%, transparent); border-radius:3px; padding:1px 4px; }

      .ch-timestamp { font-size:11px; color:var(--hint); margin-top:var(--space-hairline); padding:0 4px; }
      .ch-timestamp.user { align-self:flex-end; }
      .ch-timestamp.assistant { align-self:flex-start; }
      .ch-model-badge { display:inline-block; font-size:10px; color:var(--hint); background:color-mix(in srgb, white 8%, transparent); padding:1px 6px; border-radius:var(--radius-tight); margin-left:var(--space-tight); }
      .ch-typing { display:flex; align-items:center; gap:var(--space-base); padding:8px 14px; align-self:flex-start; }
      .ch-typing-dots { display:flex; gap:var(--space-xs); }
      .ch-typing-dot { width:6px; height:6px; border-radius:var(--radius-full); background:var(--hint); animation:pulse 1.2s ease-in-out infinite; }
      .ch-typing-dot:nth-child(2) { animation-delay:0.2s; }
      .ch-typing-dot:nth-child(3) { animation-delay:0.4s; }
      .ch-typing-label { font-size:13px; color:var(--hint); }
      /* ── Composer (Commit #9 / DD-07-09) ──
         Mirrors `.fin-modal-input` density: 14px radius, surface-container
         bg, primary focus ring. Class namespace migrated `.ch-input-bar` /
         `.ch-input` / `.ch-send-btn` / `.ch-attach-btn` / `.ch-cam-btn` /
         `.ch-mic-btn` → `.cha-composer` / `.cha-composer-input` /
         `.cha-composer-send` / `.cha-composer-tool` (with -attach / -cam /
         -mic role suffixes). New `.cha-composer-tools` wrapper groups the
         icon buttons per DD-07-09. (Rules retained in chat-bubbles.css for
         now — file relocation to chat-composer.css is a follow-up.) */
      .cha-composer {
        display:flex; align-items:flex-end; gap:var(--space-snug);
        padding:12px 16px;
        border-top:1px solid var(--color-outline-variant);
        background:var(--color-surface);
        flex-shrink:0; z-index:10;
        position: sticky; bottom: 0;
      }
      .cha-composer-tools {
        display:flex; align-items:center; gap:var(--space-xs);
        flex-shrink:0;
      }
      .cha-composer-tool {
        background:none; border:none;
        color:var(--color-on-surface-variant);
        cursor:pointer;
        padding:var(--space-tight);
        display:flex; align-items:center; justify-content:center;
        flex-shrink:0;
        transition:color 0.15s ease;
      }
      .cha-composer-tool:active { opacity:0.6; }
      .cha-composer-tool:hover { color:var(--color-on-surface); }
      .cha-composer-tool svg { width:20px; height:20px; }
      .cha-composer-tool-mic.recording {
        color:var(--color-error);
      }
      .cha-composer-tool-mic.recording svg { animation:pulse 1s infinite; }
      .cha-composer-input {
        flex:1; resize:none;
        border:1px solid var(--color-outline-variant);
        border-radius:var(--radius-roomy); padding:10px 14px; font-size:14px;
        font-family:inherit;
        background:var(--color-surface-container);
        color:var(--color-on-surface);
        outline:none; min-height:40px; max-height:120px;
        line-height:1.5; overflow-y:auto;
        -webkit-appearance: none;
        -webkit-user-select: text;
        user-select: text;
        transition:border-color 0.15s, background 0.15s;
      }
      .cha-composer-input::placeholder { color:var(--color-on-surface-variant); }
      .cha-composer-input:focus {
        border-color:color-mix(in srgb, var(--color-primary) 50%, transparent);
        background:var(--color-surface);
      }
      .cha-composer-send {
        width:40px; height:40px; border-radius:var(--radius-full);
        border:none;
        background:var(--color-primary);
        color:var(--color-on-primary);
        cursor:pointer;
        display:flex; align-items:center; justify-content:center;
        flex-shrink:0;
        transition:transform 0.1s, opacity 0.15s;
      }
      .cha-composer-send:disabled { opacity:0.3; cursor:default; }
      .cha-composer-send:active:not(:disabled) { transform:scale(0.94); }
      .cha-composer-send svg { width:20px; height:20px; }
      /* .ch-empty rules removed — chat-messages.js owns empty-state rendering via card() builder (.ch-empty-card). */
      .ch-conn-spinner { display:none; width:20px; height:20px; border:2px solid color-mix(in srgb, white 10%, transparent); border-top-color:var(--color-warning); border-radius:var(--radius-full); animation:ch-spin 0.8s linear infinite; margin-bottom:var(--space-xs); }
      #chEmpty.connecting .ch-conn-spinner { display:block; }
      @keyframes ch-spin { to { transform:rotate(360deg); } }

      /* ── Autocomplete popup — finance-modal-style: 14px radius, var(--bg2), token primary on selected ── */
      .ch-autocomplete { position:absolute; bottom:57px; left:var(--space-base); right:var(--space-base); background:var(--bg2); border:1px solid color-mix(in srgb, white 10%, transparent); border-radius:var(--radius-roomy); max-height:280px; overflow-y:auto; z-index:50; box-shadow:0 -8px 24px color-mix(in srgb, black 40%, transparent); display:none; }
      .ch-autocomplete.visible { display:block; }
      .ch-ac-item { padding:10px 14px; cursor:pointer; border-bottom:1px solid color-mix(in srgb, white 4%, transparent); transition:background 0.1s; }
      .ch-ac-item:last-child { border-bottom:none; }
      .ch-ac-item:active, .ch-ac-item.selected { background:color-mix(in srgb, var(--color-primary) 12%, transparent); }
      .ch-ac-name { font-weight:600; font-size:14px; color:var(--text); }
      .ch-ac-args { font-size:13px; color:var(--hint); margin-left:var(--space-tight); }
      .ch-ac-desc { font-size:12px; color:var(--hint); margin-top:var(--space-hairline); line-height:1.4; }

      /* ── Copy & Share buttons ─────────────────────────────────────
         Visible at 0.55 opacity by default (not hover-revealed) so users
         on touch + non-hover desktops actually see the affordances.
         Both bubble shells (.ch-bubble legacy + .cha-bubble redesigned)
         ramp to opacity:1 on hover/active. The redesign-flip rule was
         missing the .cha-bubble selector, leaving the buttons at
         opacity:0 forever in production. */
      .ch-msg-actions {
        position:absolute; top:var(--space-tight); right:var(--space-tight); display:flex; gap:var(--space-hairline); opacity:0.55; transition:opacity 0.15s;
      }
      .ch-copy-btn, .ch-share-btn {
        background:color-mix(in srgb, white 8%, transparent); border:none; border-radius:var(--radius-tight);
        padding:3px 6px; cursor:pointer;
        font-size:12px; color:var(--hint); line-height:1; display:flex; align-items:center;
      }
      .ch-copy-btn:hover, .ch-share-btn:hover { background:color-mix(in srgb, white 14%, transparent); color:var(--text); }
      .ch-bubble:hover .ch-msg-actions,
      .ch-bubble:active .ch-msg-actions,
      .cha-bubble:hover .ch-msg-actions,
      .cha-bubble:active .ch-msg-actions,
      .cha-bubble:focus-within .ch-msg-actions { opacity:1; }
      @media (hover: none) {
        /* Touch: keep actions fully visible — there is no hover state to reveal them. */
        .ch-msg-actions { opacity:0.85; }
        .ch-copy-btn, .ch-share-btn { opacity:1; }
      }

      /* ── Finance-v6 chat treatment (chat-panel-redesign 2026-05-13) ──
         Opt-in variant that mirrors the design bundle's ChatPanel.jsx.
         Activate by adding `data-chat-style="finance-v6"` to the
         `.ch-messages` (or `.cha-messages`) scroller; cascades to every
         child bubble. Views that haven't migrated keep the current look.
         Two distinctive changes vs. the default:
           1. Assistant text is plain (no background, no border, no
              bubble corner) — matches the design's "agent prose" pattern.
              User bubbles stay solid-blue with the asymmetric corner.
           2. Action buttons (.ch-msg-actions) reposition from absolute
              top-right corner to an inline bottom row under the agent
              text. Hover-reveal still applies. */
      [data-chat-style="finance-v6"] .ch-bubble.assistant,
      [data-chat-style="finance-v6"] .cha-bubble.assistant {
        background: transparent;
        border: none;
        padding: var(--space-snug) 0;
        max-width: 100%;
      }
      /* Inline action row under finance-v6 agent messages. The default
         absolute positioning is overridden so the buttons sit beneath the
         text rather than over the corner. */
      [data-chat-style="finance-v6"] .ch-bubble.assistant .ch-msg-actions,
      [data-chat-style="finance-v6"] .cha-bubble.assistant .ch-msg-actions {
        position: static;
        margin-top: var(--space-tight);
        opacity: 1;  /* always-on; no hover-reveal needed without a bubble surface */
        gap: var(--space-snug);
      }
      [data-chat-style="finance-v6"] .ch-bubble.assistant .ch-copy-btn,
      [data-chat-style="finance-v6"] .ch-bubble.assistant .ch-share-btn,
      [data-chat-style="finance-v6"] .cha-bubble.assistant .ch-copy-btn,
      [data-chat-style="finance-v6"] .cha-bubble.assistant .ch-share-btn {
        background: transparent;
        color: var(--color-on-surface-variant);
        padding: 2px 4px;
      }
      [data-chat-style="finance-v6"] .ch-bubble.assistant .ch-copy-btn:hover,
      [data-chat-style="finance-v6"] .ch-bubble.assistant .ch-share-btn:hover,
      [data-chat-style="finance-v6"] .cha-bubble.assistant .ch-copy-btn:hover,
      [data-chat-style="finance-v6"] .cha-bubble.assistant .ch-share-btn:hover {
        color: var(--color-on-surface);
        background: transparent;
      }
      /* Agent monogram + caps header — the design's "TRAVEL AGENT /
         CONNECTED" strip. Views that want it render a single block:
         <div class="ch-agent-monogram">
           <span class="ch-agent-monogram-mark">⚡</span>
           <div class="ch-agent-monogram-titles">
             <span class="caps">TRAVEL AGENT</span>
             <span class="ch-agent-monogram-status">
               <span class="ch-agent-monogram-dot"></span> CONNECTED
             </span>
           </div>
         </div>
         The block is style-agnostic — works inside or outside the
         finance-v6 scope. */
      .ch-agent-monogram {
        display: inline-flex;
        align-items: center;
        gap: var(--space-snug);
      }
      .ch-agent-monogram-mark {
        width: 28px;
        height: 28px;
        border-radius: var(--radius-default);
        background: var(--color-primary);
        color: var(--color-on-primary);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
      }
      .ch-agent-monogram-titles {
        display: flex;
        flex-direction: column;
        gap: 1px;
        min-width: 0;
      }
      .ch-agent-monogram-status {
        font-size: 11px;
        color: var(--color-on-surface-variant);
        display: inline-flex;
        align-items: center;
        gap: var(--space-xs);
      }
      .ch-agent-monogram-dot {
        width: 6px;
        height: 6px;
        border-radius: var(--radius-full);
        background: var(--color-success);
        flex-shrink: 0;
      }

      /* ── Context-pinned messages ── */
      .ch-bubble.ctx-pinned {
        border-left:3px solid var(--btn);
        background:color-mix(in srgb, var(--color-primary) 8%, transparent);
      }
      .ch-bubble.ctx-pinned.user {
        border-right:3px solid var(--btn); border-left:none;
        background:color-mix(in srgb, var(--color-primary) 25%, transparent);
      }
      .ch-ctx-bar {
        display:none; align-items:center; gap:var(--space-base);
        padding:6px 12px; background:color-mix(in srgb, var(--color-primary) 10%, transparent);
        border-top:1px solid color-mix(in srgb, var(--color-primary) 20%, transparent); flex-shrink:0;
      }
      .ch-ctx-bar.visible { display:flex; }
      .ch-ctx-bar-label { flex:1; font-size:12px; color:var(--btn); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
      .ch-ctx-bar-clear { background:none; border:none; color:var(--hint); cursor:pointer; font-size:14px; padding:2px 6px; }
      .ch-ctx-bar-clear:active { opacity:0.6; }

      /* ── Reply bar — finance-aligned: 4px accent rail matching .fin-rec-card ── */
      .ch-reply-bar {
        display:none; align-items:center; gap:0;
        padding:8px 8px 8px 0; background:var(--bg2);
        border-top:1px solid color-mix(in srgb, white 6%, transparent); flex-shrink:0;
      }
      .ch-reply-bar.visible { display:flex; }
      .ch-reply-bar-accent { width:4px; min-height:100%; border-radius:0; margin-right:var(--space-snug); flex-shrink:0; }
      .ch-reply-bar-accent.user { background:var(--color-success); }
      .ch-reply-bar-accent.assistant { background:var(--color-primary); }
      .ch-reply-bar-content { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
      .ch-reply-bar-role { font-size:11px; font-weight:600; color:var(--hint); }
      .ch-reply-bar-text { font-size:12px; color:var(--text); opacity:0.7; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
      .ch-reply-bar-close { background:none; border:none; color:var(--hint); cursor:pointer; font-size:16px; padding:2px 6px; flex-shrink:0; }
      .ch-reply-bar-close:active { opacity:0.6; }

      /* ── Message queue (compact list) ── */
      .ch-queue-list {
        margin:6px 12px 6px auto; max-width:85%;
        background:color-mix(in srgb, white 4%, transparent);
        border-radius:var(--radius-snug); overflow:hidden;
        border:1px solid color-mix(in srgb, white 6%, transparent);
      }
      .ch-queue-header {
        display:flex; align-items:center; gap:var(--space-tight);
        padding:6px 10px; font-size:11px; color:var(--hint);
        letter-spacing:0.3px; text-transform:uppercase;
      }
      .ch-queue-header svg { opacity:0.5; }
      .ch-queue-item {
        display:flex; align-items:center; gap:var(--space-base);
        padding:7px 10px; font-size:13px; color:color-mix(in srgb, white 55%, transparent);
        border-top:1px solid color-mix(in srgb, white 4%, transparent);
        line-height:1.35;
      }
      .ch-queue-item-text {
        flex:1; min-width:0;
        overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
      }
      .ch-queue-item-actions {
        display:flex; gap:var(--space-hairline); flex-shrink:0; opacity:0;
        transition:opacity .15s;
      }
      .ch-queue-item:hover .ch-queue-item-actions,
      .ch-queue-item:active .ch-queue-item-actions { opacity:1; }
      @media (hover:none) { .ch-queue-item-actions { opacity:1; } }
      .ch-queue-interrupt, .ch-queue-remove {
        background:none; border:none; cursor:pointer;
        border-radius:var(--radius-sm); padding:2px 6px;
        font-size:11px; color:var(--hint); line-height:1;
      }
      .ch-queue-interrupt:hover { background:color-mix(in srgb, var(--color-warning) 12%, transparent); color:var(--color-warning); }
      .ch-queue-remove { font-size:13px; padding:2px 4px; }
      .ch-queue-remove:hover { background:color-mix(in srgb, var(--color-error) 12%, transparent); color:var(--color-error); }

      .ch-bubble.system.error { background:color-mix(in srgb, var(--color-error) 15%, transparent); color:var(--color-error); }
      .ch-bubble.system.has-widget { background:transparent; padding:0; max-width:100%; width:100%; }
      .ch-bubble.interrupted { border:1px solid color-mix(in srgb, var(--color-warning) 30%, transparent); }
      .ch-interrupted-banner { display:flex; align-items:center; gap:var(--space-base); margin-top:var(--space-base); padding:6px 10px; border-radius:var(--radius-default); background:color-mix(in srgb, var(--color-warning) 12%, transparent); color:var(--color-warning); font-size:12px; font-weight:500; }
      .ch-retry-interrupted { background:color-mix(in srgb, var(--color-warning) 18%, transparent); border:1px solid color-mix(in srgb, var(--color-warning) 30%, transparent); color:var(--color-warning); border-radius:var(--radius-tight); padding:3px 10px; font-size:11px; cursor:pointer; }
      .ch-retry-interrupted:hover { background:color-mix(in srgb, var(--color-warning) 30%, transparent); }

      /* ── Tool bubbles — finance-aligned (.fin-rec-card border-left state accent) ── */
      .tb-wrap { align-self:stretch; max-width:100%; margin:6px 0; }
      .tb-input { display:flex; align-items:center; gap:var(--space-snug); padding:10px 14px; border-left:4px solid var(--color-primary); border-radius:var(--radius-md); background:var(--bg2); font-size:13px; font-family:'Space Grotesk',system-ui,sans-serif; font-weight:600; letter-spacing:0.04em; color:var(--text); }
      .tb-wrap[data-phase="running"] .tb-input { border-left-color:var(--color-warning); }
      .tb-wrap[data-phase="error"] .tb-input { border-left-color:var(--color-error); }
      .tb-wrap[data-phase="done"] .tb-input { border-left-color:var(--color-success); }
      .tb-icon { font-size:14px; flex-shrink:0; }
      .tb-label { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
      .tb-spinner { width:14px; height:14px; border:2px solid color-mix(in srgb, white 15%, transparent); border-top-color:var(--hint); border-radius:var(--radius-full); animation:tb-spin 0.8s linear infinite; flex-shrink:0; }
      @keyframes tb-spin { to { transform:rotate(360deg); } }
      .tb-check { font-size:11px; font-weight:700; color:var(--color-success); flex-shrink:0; letter-spacing:0.3px; }
      .tb-check.tb-fail { color:var(--color-error); }

      /* T-07 / DD-06: per-category accent — replaces the inline
         `style="border-left-color:#hex..."` on .tb-input. Phase-state
         overrides (running/error/done) win over category color. */
      .tb-input[data-tool-category="mail"]     { border-left-color:var(--color-primary); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 14%, transparent); }
      .tb-input[data-tool-category="calendar"] { border-left-color:var(--color-warning); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--color-warning) 14%, transparent); }
      .tb-input[data-tool-category="files"]    { border-left-color:var(--color-on-surface-variant); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--color-on-surface-variant) 14%, transparent); }
      .tb-input[data-tool-category="tasks"]    { border-left-color:var(--color-success); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--color-success) 14%, transparent); }
      .tb-input[data-tool-category="finance"]  { border-left-color:var(--color-success); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--color-success) 14%, transparent); }
      .tb-input[data-tool-category="system"]   { border-left-color:var(--color-on-surface-variant); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--color-on-surface-variant) 14%, transparent); }
      .tb-input[data-tool-category="travel"]   { border-left-color:var(--color-primary); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 14%, transparent); }
      .tb-input[data-tool-category="shopping"] { border-left-color:var(--color-error); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--color-error) 14%, transparent); }
      .tb-input[data-tool-category="comms"]    { border-left-color:var(--color-success); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--color-success) 14%, transparent); }
      .tb-input[data-tool-category="browser"]  { border-left-color:var(--color-primary); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 14%, transparent); }
      .tb-input[data-tool-category="web"]      { border-left-color:var(--color-primary); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 14%, transparent); }
      .tb-input[data-tool-category="info"]     { border-left-color:var(--color-on-surface-variant); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--color-on-surface-variant) 14%, transparent); }

      /* T-08 / DD-05a: people_graph SVG widget — extracted from
         chat-messages.js inline <style> block. The .pg-svg wrapper element
         carries the inline width/touch-action overrides that were on the
         <svg style="..."> attribute pre-extraction. */
      .pg-svg { width:100%; touch-action:none; overscroll-behavior-x:contain; }
      .pg-edge { stroke:var(--color-on-surface-variant); stroke-width:1.2; fill:none; }
      .pg-label { fill:var(--color-on-surface-variant); font-size:8px; text-anchor:middle; font-family:system-ui; }
      .pg-node-center { fill:color-mix(in srgb, var(--color-success) 20%, transparent); stroke:var(--color-success); stroke-width:2; }
      .pg-node-outer { fill:color-mix(in srgb, var(--color-on-surface-variant) 15%, transparent); stroke:var(--color-on-surface-variant); stroke-width:1.2; cursor:pointer; }
      .pg-node-outer:hover { fill:color-mix(in srgb, var(--color-success) 15%, transparent); stroke:var(--color-success); }
      .pg-node-mutual { stroke-dasharray:0; stroke-width:2.4; }
      .pg-name { font-size:9px; text-anchor:middle; fill:var(--color-on-surface); font-family:system-ui; font-weight:500; }
      .pg-name-center { font-size:11px; font-weight:600; }

      .tb-output { background:var(--bg2); border-radius:var(--radius-md); padding:12px 14px; margin-top:var(--space-tight); font-size:13px; line-height:1.55; color:var(--text); word-break:break-word; position:relative; -webkit-user-select:text; user-select:text; border:1px solid color-mix(in srgb, white 4%, transparent); }
      .tb-output.error { background:color-mix(in srgb, var(--color-error) 6%, transparent); border:1px solid color-mix(in srgb, var(--color-error) 20%, transparent); border-left:4px solid var(--color-error); }
      .tb-output.has-widget { background:transparent; padding:0; }

      /* ── File created widget ── */
      .ch-file-card { background:var(--bg2); border-radius:var(--radius-snug); padding:10px 14px; border:1px solid color-mix(in srgb, white 8%, transparent); }
      .ch-file-header { display:flex; align-items:center; gap:var(--space-snug); }
      .ch-file-icon { font-size:28px; flex-shrink:0; }
      .ch-file-info { display:flex; flex-direction:column; min-width:0; }
      .ch-file-name { font-size:14px; font-weight:600; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
      .ch-file-path { font-size:11px; color:var(--hint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
      .ch-file-actions { display:flex; gap:var(--space-base); margin-top:var(--space-base); }
      .ch-file-btn { font-size:12px; font-weight:600; color:var(--color-primary); background:color-mix(in srgb, var(--color-primary) 10%, transparent); border:none; border-radius:var(--radius-tight); padding:4px 12px; cursor:pointer; text-decoration:none; }
      .ch-file-btn:hover { background:color-mix(in srgb, var(--color-primary) 20%, transparent); }
      .ch-file-preview { margin-top:var(--space-base); background:color-mix(in srgb, black 25%, transparent); border-radius:var(--radius-default); padding:10px 12px; font-size:12px; line-height:1.5; color:var(--text); max-height:300px; overflow:auto; white-space:pre-wrap; word-break:break-word; font-family:var(--mono, 'SF Mono', monospace); }

      /* ── Approval cards — finance-aligned (.fin-rec-card warning border-left + soft pulse) ── */
      .apv-wrap { align-self:stretch; max-width:100%; margin:8px 0; border-radius:var(--radius-md); padding:14px 16px; background:var(--bg2); }
      .apv-pending { border:1px solid color-mix(in srgb, var(--color-warning) 30%, transparent); border-left:4px solid var(--color-warning); animation:apv-pulse 2.4s ease-in-out infinite; }
      .apv-resolved-approve { border:1px solid color-mix(in srgb, var(--color-success) 20%, transparent); border-left:4px solid var(--color-success); }
      .apv-resolved-deny { border:1px solid color-mix(in srgb, var(--color-error) 20%, transparent); border-left:4px solid var(--color-error); }
      @keyframes apv-pulse {
        0%,100% { border-color:color-mix(in srgb, var(--color-warning) 30%, transparent); border-left-color:var(--color-warning); }
        50% { border-color:color-mix(in srgb, var(--color-warning) 50%, transparent); border-left-color:var(--color-warning); }
      }
      /* .apv-header → .base-row in pwa/styles/base.css. Markup composes both. */
      .apv-icon { font-size:14px; flex-shrink:0; }
      .apv-title { font-size:13px; font-weight:600; color:var(--text); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
      .apv-badge { font-size:12px; font-weight:600; white-space:nowrap; }
      .apv-expiry { font-size:11px; color:var(--hint); white-space:nowrap; }
      .apv-expiry.expired { color:var(--color-error); }
      .apv-body { margin-top:var(--space-tight); font-size:12px; color:var(--hint); word-break:break-all; }
      .apv-body code { font-size:11px; background:color-mix(in srgb, white 6%, transparent); padding:2px 4px; border-radius:var(--radius-sm); }
      /* Approval action row — finance .fin-rule-actions style */
      .apv-actions { display:flex; gap:var(--space-base); margin-top:var(--space-sm); padding-top:var(--space-snug); border-top:1px solid color-mix(in srgb, white 6%, transparent); }
      .apv-btn { flex:1; border:none; border-radius:var(--radius-snug); padding:9px 14px; font-size:13px; font-weight:600; cursor:pointer; transition:transform 0.1s; }
      .apv-btn:active { transform:scale(0.97); }
      .apv-btn-approve { background:color-mix(in srgb, var(--color-success) 15%, transparent); color:var(--color-success); border:1px solid color-mix(in srgb, var(--color-success) 30%, transparent); }
      .apv-btn-deny { background:color-mix(in srgb, var(--color-error) 10%, transparent); color:var(--color-error); border:1px solid color-mix(in srgb, var(--color-error) 30%, transparent); }

      /* ── Research bubble — deep research task UI ── */
      .rs-wrap { align-self:stretch; max-width:100%; margin:4px 0; border-radius:var(--radius-md); padding:12px 14px; border:1px solid color-mix(in srgb, var(--color-primary) 20%, transparent); background:color-mix(in srgb, var(--color-primary) 6%, transparent); }
      .rs-plan { border-color:color-mix(in srgb, var(--color-warning) 30%, transparent); background:color-mix(in srgb, var(--color-warning) 6%, transparent); animation:apv-pulse 2s ease-in-out infinite; }
      .rs-researching { border-color:color-mix(in srgb, var(--color-primary) 30%, transparent); background:color-mix(in srgb, var(--color-primary) 6%, transparent); }
      .rs-completed { border-color:color-mix(in srgb, var(--color-success) 20%, transparent); background:color-mix(in srgb, var(--color-success) 6%, transparent); }
      .rs-terminal { border-color:color-mix(in srgb, var(--color-on-surface-variant) 20%, transparent); background:color-mix(in srgb, var(--color-on-surface-variant) 6%, transparent); opacity:0.7; }
      /* .rs-header → .base-row in pwa/styles/base.css. Markup composes both. */
      .rs-icon { font-size:16px; flex-shrink:0; display:flex; align-items:center; }
      .rs-title { font-size:14px; font-weight:600; color:var(--text); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
      .rs-badge { font-size:11px; font-weight:600; padding:2px 8px; border-radius:var(--radius-default); white-space:nowrap; }
      .rs-badge-plan { background:color-mix(in srgb, var(--color-warning) 15%, transparent); color:var(--color-warning); }
      .rs-badge-active { background:color-mix(in srgb, var(--color-primary) 15%, transparent); color:var(--color-primary); max-width:140px; overflow:hidden; text-overflow:ellipsis; }
      .rs-badge-done { background:color-mix(in srgb, var(--color-success) 15%, transparent); color:var(--color-success); }
      .rs-badge-cancel { background:color-mix(in srgb, var(--color-on-surface-variant) 15%, transparent); color:var(--color-on-surface-variant); }
      .rs-badge-fail { background:color-mix(in srgb, var(--color-error) 15%, transparent); color:var(--color-error); }
      .rs-meta { display:flex; gap:var(--space-sm); margin-top:var(--space-tight); font-size:12px; color:var(--hint); }
      .rs-section { margin-top:var(--space-base); }
      .rs-section-title { font-size:11px; font-weight:600; color:var(--hint); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:var(--space-xs); }
      .rs-outline { margin:0; padding-left:var(--space-wide); font-size:12px; color:var(--text); line-height:1.6; }
      .rs-questions { margin:0; padding-left:var(--space-gutter); font-size:12px; color:var(--text); line-height:1.6; }
      .rs-actions { display:flex; gap:var(--space-base); margin-top:var(--space-snug); }
      .rs-btn { border:none; border-radius:var(--radius-default); padding:6px 16px; font-size:13px; font-weight:600; cursor:pointer; transition:opacity 0.15s; }
      .rs-btn:active { opacity:0.7; }
      .rs-btn-approve { background:var(--color-primary); color:#fff; }
      .rs-btn-revise { background:color-mix(in srgb, var(--color-warning) 15%, transparent); color:var(--color-warning); border:1px solid color-mix(in srgb, var(--color-warning) 30%, transparent); }
      .rs-btn-cancel { background:color-mix(in srgb, var(--color-error) 15%, transparent); color:var(--color-error); border:1px solid color-mix(in srgb, var(--color-error) 30%, transparent); }
      .rs-progress { height:4px; background:color-mix(in srgb, white 10%, transparent); border-radius:var(--radius-sm); margin-top:var(--space-base); overflow:hidden; }
      .rs-progress-fill { height:100%; background:linear-gradient(90deg,var(--color-primary),var(--color-success)); border-radius:var(--radius-sm); transition:width 0.5s ease; }
      .rs-progress-label { font-size:11px; color:var(--hint); margin-top:var(--space-xs); }
      .rs-findings { margin-top:var(--space-base); max-height:200px; overflow-y:auto; font-size:12px; color:var(--text); line-height:1.5; padding:var(--space-base); background:color-mix(in srgb, black 20%, transparent); border-radius:var(--radius-default); }
      .rs-findings p { margin:0 0 6px; }
      .rs-summary { max-height:300px; }
      .rs-links { display:flex; gap:var(--space-base); margin-top:var(--space-base); }
      .rs-link { font-size:12px; font-weight:600; color:var(--color-primary); background:color-mix(in srgb, var(--color-primary) 10%, transparent); border-radius:var(--radius-tight); padding:4px 12px; text-decoration:none; }
      .rs-link:hover { background:color-mix(in srgb, var(--color-primary) 20%, transparent); }
      .rs-error { margin-top:var(--space-tight); font-size:12px; color:var(--color-error); }
      .rs-spinner { display:inline-block; width:14px; height:14px; border:2px solid color-mix(in srgb, var(--color-primary) 30%, transparent); border-top-color:var(--color-primary); border-radius:var(--radius-full); animation:spin 0.8s linear infinite; }
      @keyframes spin { to { transform:rotate(360deg); } }

      /* ── Flight card — finance .fin-rec-card style with status-driven accent ── */
      .flt-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:var(--space-snug); }
      .flt-card { background:var(--bg2); border:1px solid color-mix(in srgb, white 6%, transparent); border-left:4px solid var(--flt-accent, color-mix(in srgb, white 10%, transparent)); border-radius:var(--radius-roomy); padding:14px 16px; cursor:pointer; transition:transform 0.18s ease; position:relative; overflow:hidden; }
      .flt-card:active { transform:scale(0.98); }
      .flt-card.detail { cursor:default; }
      .flt-card.status-scheduled { --flt-accent:var(--color-primary); }
      .flt-card.status-active, .flt-card.status-en-route { --flt-accent:var(--color-success); }
      .flt-card.status-landed { --flt-accent:var(--color-success); }
      .flt-card.status-cancelled, .flt-card.status-diverted { --flt-accent:var(--color-error); }
      .flt-card.status-delayed { --flt-accent:var(--color-warning); }
      .flt-card.status-unknown { --flt-accent:color-mix(in srgb, white 10%, transparent); }

      /* .flt-header → .base-row-between in pwa/styles/base.css. Markup composes both. */
      .flt-code { font-size:16px; font-weight:700; color:var(--text); letter-spacing:0.5px; }
      .flt-airline { font-size:12px; color:var(--hint); font-weight:400; display:block; margin-top:1px; }
      .flt-status { font-size:11px; font-weight:600; padding:3px 10px; border-radius:var(--radius-snug); text-transform:capitalize; white-space:nowrap; }
      .flt-status.scheduled { background:color-mix(in srgb, var(--color-primary) 15%, transparent); color:var(--color-primary); }
      .flt-status.active,.flt-status.en-route { background:color-mix(in srgb, var(--color-success) 15%, transparent); color:var(--color-success); }
      .flt-status.landed { background:color-mix(in srgb, var(--color-success) 12%, transparent); color:var(--color-success); }
      .flt-status.cancelled,.flt-status.diverted { background:color-mix(in srgb, var(--color-error) 15%, transparent); color:var(--color-error); }
      .flt-status.delayed { background:color-mix(in srgb, var(--color-warning) 15%, transparent); color:var(--color-warning); }
      .flt-status.unknown { background:color-mix(in srgb, var(--color-on-surface-variant) 15%, transparent); color:var(--color-on-surface-variant); }

      .flt-divider { border:none; border-top:1px dashed color-mix(in srgb, white 10%, transparent); margin:12px 0; }

      .flt-route { display:flex; align-items:center; justify-content:center; gap:0; margin:14px 0 10px; }
      .flt-airport { text-align:center; min-width:60px; }
      .flt-airport-code { font-size:22px; font-weight:800; color:var(--text); letter-spacing:1px; line-height:1.1; }
      .flt-airport-city { font-size:11px; color:var(--hint); margin-top:var(--space-hairline); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100px; }

      .flt-path { flex:1; display:flex; align-items:center; justify-content:center; position:relative; margin:0 12px; min-width:60px; }
      .flt-path-line { width:100%; height:0; border-top:2px dashed color-mix(in srgb, white 15%, transparent); }
      .flt-path-icon { position:absolute; color:var(--flt-accent, var(--hint)); font-size:16px; background:var(--bg2); padding:0 4px; }

      .flt-times { display:flex; align-items:flex-start; justify-content:space-between; margin:6px 0 2px; }
      .flt-time-block { text-align:center; }
      .flt-time-block.dep { text-align:left; }
      .flt-time-block.arr { text-align:right; }
      .flt-time-value { font-size:18px; font-weight:700; color:var(--text); line-height:1.2; }
      .flt-time-date { font-size:11px; color:var(--hint); margin-top:1px; }
      .flt-next-day { font-size:10px; color:var(--color-warning); font-weight:600; }
      .flt-duration { font-size:12px; color:var(--hint); background:color-mix(in srgb, white 5%, transparent); padding:4px 10px; border-radius:var(--radius-snug); white-space:nowrap; align-self:center; }

      .flt-footer { font-size:11px; color:var(--hint); margin-top:var(--space-base); display:flex; flex-wrap:wrap; gap:4px 12px; align-items:center; }
      .flt-footer-item { display:flex; align-items:center; gap:3px; }
      .flt-countdown { color:var(--flt-accent, var(--btn)); font-weight:600; }

      .flt-info-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); gap:var(--space-base); margin:4px 0; }
      .flt-info-cell { padding:8px 10px; background:color-mix(in srgb, white 3%, transparent); border-radius:var(--radius-default); }
      .flt-info-label { font-size:10px; color:var(--hint); text-transform:uppercase; letter-spacing:0.5px; font-weight:500; margin-bottom:var(--space-hairline); }
      .flt-info-value { font-size:14px; font-weight:600; color:var(--text); }

      .flt-actions { display:flex; gap:var(--space-base); margin-top:var(--space-sm); padding-top:var(--space-sm); border-top:1px solid color-mix(in srgb, white 6%, transparent); }
      .flt-action { padding:6px 14px; border-radius:var(--radius-default); font-size:12px; font-weight:600; cursor:pointer; border:1px solid color-mix(in srgb, white 10%, transparent); background:color-mix(in srgb, white 4%, transparent); color:var(--text); transition:background 0.15s; }
      .flt-action:active { opacity:0.6; }
      .flt-action.danger { color:var(--color-error); border-color:color-mix(in srgb, var(--color-error) 25%, transparent); }
      .flt-action.link { color:var(--btn); border-color:color-mix(in srgb, var(--color-primary) 25%, transparent); text-decoration:none; }

      /* ── Person profile card ── */
      .per-card { background:var(--bg2); border:1px solid color-mix(in srgb, white 6%, transparent); border-radius:var(--radius-md); padding:var(--space-gutter); box-shadow:0 2px 12px color-mix(in srgb, black 30%, transparent); }
      .per-header { display:flex; align-items:center; gap:var(--space-sm); margin-bottom:var(--space-roomy); }
      .per-avatar { width:44px; height:44px; border-radius:var(--radius-full); display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:700; flex-shrink:0; }
      .per-header-info { flex:1; min-width:0; }
      .per-name { font-size:17px; font-weight:700; color:var(--text); }
      .per-badges { display:flex; align-items:center; gap:var(--space-tight); margin-top:3px; flex-wrap:wrap; }
      .per-role-badge { font-size:11px; font-weight:600; padding:2px 8px; border-radius:var(--radius-snug); text-transform:capitalize; }
      .per-org { font-size:12px; color:var(--hint); }
      .per-section { margin-top:var(--space-sm); padding-top:var(--space-sm); border-top:1px solid color-mix(in srgb, white 6%, transparent); }
      .per-section-title { font-size:12px; font-weight:600; color:var(--hint); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:var(--space-base); }
      .per-section-items { display:flex; flex-direction:column; gap:var(--space-xs); }
      .per-item { display:flex; justify-content:space-between; align-items:baseline; gap:var(--space-base); font-size:13px; }
      .per-item-label { color:var(--hint); flex-shrink:0; }
      .per-item-value { color:var(--text); text-align:right; word-break:break-word; }
      .per-section-actions { display:flex; gap:var(--space-tight); margin-top:var(--space-base); flex-wrap:wrap; }
      .per-action { background:color-mix(in srgb, white 6%, transparent); color:var(--text); border:none; border-radius:var(--radius-default); padding:6px 12px; font-size:12px; cursor:pointer; font-family:inherit; }
      .per-action:active { background:color-mix(in srgb, white 12%, transparent); }
      /* Progress kind (tasks with status + trackable IDs) */
      .per-progress-items { display:flex; flex-direction:column; gap:var(--space-tight); }
      .per-progress-item { display:flex; flex-direction:column; gap:3px; padding:6px 8px; background:color-mix(in srgb, white 2%, transparent); border-radius:var(--radius-tight); border-left:2px solid color-mix(in srgb, white 8%, transparent); }
      .per-progress-main { font-size:13px; color:var(--text); }
      .per-task-link { background:none; border:none; color:var(--link, var(--color-primary)); cursor:pointer; font:inherit; font-size:13px; padding:0; text-align:left; text-decoration:none; }
      .per-task-link:hover { text-decoration:underline; }
      .per-progress-meta { display:flex; align-items:center; gap:var(--space-tight); }
      .per-role-tag { font-size:10px; font-weight:600; color:var(--hint); text-transform:uppercase; letter-spacing:0.3px; }
      .per-status-badge { font-size:10px; font-weight:600; padding:1px 6px; border-radius:var(--radius-tight); text-transform:capitalize; }
      .per-status-todo { background:color-mix(in srgb, var(--color-on-surface-variant) 20%, transparent); color:var(--color-on-surface-variant); }
      .per-status-in-progress { background:color-mix(in srgb, var(--color-primary) 20%, transparent); color:var(--color-primary); }
      .per-status-done { background:color-mix(in srgb, var(--color-success) 20%, transparent); color:var(--color-success); }
      .per-status-blocked { background:color-mix(in srgb, var(--color-error) 20%, transparent); color:var(--color-error); }
      .per-status-scheduled { background:color-mix(in srgb, var(--color-warning) 20%, transparent); color:var(--color-warning); }
      .per-status-unknown { background:color-mix(in srgb, var(--color-on-surface-variant) 15%, transparent); color:var(--color-on-surface-variant); }

      /* Activity kind (timeline-style) */
      .per-activity-items { display:flex; flex-direction:column; gap:var(--space-xs); }
      .per-activity-item { display:flex; flex-direction:column; gap:1px; font-size:13px; padding:4px 0; border-bottom:1px solid color-mix(in srgb, white 3%, transparent); }
      .per-activity-item:last-child { border-bottom:none; }
      .per-activity-time { font-size:11px; color:var(--hint); font-weight:500; }
      .per-activity-text { color:var(--text); }

      /* Context kind (learned facts / preferences) */
      .per-context-items { display:flex; flex-direction:column; gap:var(--space-xs); }
      .per-context-item { display:flex; gap:var(--space-base); font-size:13px; align-items:baseline; }
      .per-context-cat { font-size:10px; font-weight:600; color:var(--hint); text-transform:uppercase; letter-spacing:0.3px; background:color-mix(in srgb, white 4%, transparent); padding:1px 6px; border-radius:var(--radius-sm); flex-shrink:0; }
      .per-context-val { color:var(--text); }

      .per-list { display:flex; flex-direction:column; gap:var(--space-base); margin-top:var(--space-base); }
      .per-list-item { display:flex; align-items:center; justify-content:space-between; gap:var(--space-snug); padding:8px 10px; background:color-mix(in srgb, white 3%, transparent); border-radius:var(--radius-default); }
      .per-list-info { flex:1; min-width:0; }
      .per-list-name { font-size:14px; font-weight:600; color:var(--text); }
      .per-list-sub { font-size:12px; color:var(--hint); margin-top:var(--space-hairline); }

      /* ── Usage dashboard widget ── */
      .usg-wrap { width:100%; }
      .usg-quota { margin-bottom:var(--space-sm); }
      .usg-quota-bar { height:8px; background:color-mix(in srgb, white 8%, transparent); border-radius:var(--radius-sm); overflow:visible; position:relative; }
      .usg-quota-fill { height:100%; border-radius:var(--radius-sm); transition:width 0.4s ease; }
      .usg-quota-baseline { position:absolute; top:-2px; bottom:-2px; width:2px; background:var(--color-warning); border-radius:1px; z-index:1; }
      .usg-quota-text { display:flex; justify-content:space-between; align-items:center; margin-top:var(--space-tight); font-size:12px; color:var(--hint); }
      .usg-pct { font-weight:700; font-size:14px; }

      .usg-forecast { display:flex; align-items:center; gap:var(--space-base); padding:8px 12px; border-radius:var(--radius-default); border:1px solid; margin-bottom:var(--space-sm); font-size:13px; }
      .usg-forecast-dot { width:8px; height:8px; border-radius:var(--radius-full); flex-shrink:0; }
      .usg-forecast-text { flex:1; color:var(--text); font-weight:600; }
      .usg-velocity { font-size:11px; color:var(--hint); white-space:nowrap; }

      .usg-baseline { margin-bottom:var(--space-sm); padding:10px 12px; background:color-mix(in srgb, var(--color-warning) 6%, transparent); border:1px solid color-mix(in srgb, var(--color-warning) 15%, transparent); border-radius:var(--radius-default); }
      .usg-baseline-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--space-tight); }
      .usg-baseline-label { font-size:11px; font-weight:700; color:var(--color-warning); text-transform:uppercase; letter-spacing:0.5px; }
      .usg-baseline-pct { font-size:11px; color:var(--hint); }
      .usg-baseline-bar { height:4px; background:color-mix(in srgb, white 8%, transparent); border-radius:var(--radius-sm); overflow:hidden; margin-bottom:var(--space-tight); }
      .usg-baseline-fill { height:100%; background:var(--color-warning); border-radius:var(--radius-sm); }
      .usg-baseline-breakdown { display:flex; flex-wrap:wrap; gap:var(--space-tight); }
      .usg-baseline-cat { font-size:10px; color:var(--hint); background:color-mix(in srgb, white 4%, transparent); padding:2px 6px; border-radius:var(--radius-sm); }

      .usg-heatmap { margin-bottom:var(--space-sm); }
      .usg-heatmap-label { font-size:11px; font-weight:600; color:var(--hint); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:var(--space-tight); }
      .usg-heatmap-grid { display:flex; gap:var(--space-hairline); height:28px; align-items:flex-end; }
      .usg-hm-cell { flex:1; min-width:0; height:100%; border-radius:var(--radius-sm); cursor:default; transition:opacity 0.2s; }
      .usg-hm-cell:hover { filter:brightness(1.3); }
      .usg-heatmap-times { display:flex; justify-content:space-between; font-size:10px; color:var(--hint); margin-top:var(--space-xs); }

      .usg-models { margin-bottom:var(--space-sm); }
      .usg-models-label { font-size:11px; font-weight:600; color:var(--hint); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:var(--space-tight); }
      .usg-model-row { display:flex; align-items:center; gap:var(--space-base); margin-bottom:var(--space-xs); }
      .usg-model-name { font-size:12px; color:var(--text); width:55px; flex-shrink:0; font-weight:600; }
      .usg-model-bar { flex:1; height:6px; background:color-mix(in srgb, white 6%, transparent); border-radius:3px; overflow:hidden; }
      .usg-model-fill { height:100%; border-radius:3px; }
      .usg-model-stat { font-size:11px; color:var(--hint); white-space:nowrap; }

      .usg-stats { display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--space-base); margin-bottom:var(--space-sm); }
      .usg-stat { text-align:center; padding:8px 4px; background:color-mix(in srgb, white 3%, transparent); border-radius:var(--radius-default); }
      .usg-stat-val { font-size:14px; font-weight:700; color:var(--text); }
      .usg-stat-label { font-size:10px; color:var(--hint); text-transform:uppercase; letter-spacing:0.5px; margin-top:var(--space-hairline); }

      .usg-budget { margin-bottom:var(--space-sm); padding:10px 12px; background:color-mix(in srgb, var(--color-success) 6%, transparent); border:1px solid color-mix(in srgb, var(--color-success) 15%, transparent); border-radius:var(--radius-default); }
      .usg-budget-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--space-xs); }
      .usg-budget-label { font-size:11px; font-weight:700; color:var(--hint); text-transform:uppercase; letter-spacing:0.5px; }
      .usg-budget-mode { font-size:11px; font-weight:600; }
      .usg-budget-val { font-size:13px; color:var(--text); font-weight:600; }
      .usg-budget-defer { font-size:11px; color:var(--color-warning); margin-top:var(--space-xs); }

      .usg-actions { display:flex; gap:var(--space-base); }
      .usg-action { background:color-mix(in srgb, white 6%, transparent); color:var(--text); border:none; border-radius:var(--radius-default); padding:6px 12px; font-size:12px; cursor:pointer; font-family:inherit; }
      .usg-action:active { background:color-mix(in srgb, white 12%, transparent); }

      /* ── Email widgets ── */
      .eml-wrap { width:100%; }
      .eml-toolbar { display:flex; align-items:center; justify-content:space-between; gap:var(--space-snug); margin:0 0 10px; padding:0 2px; }
      .eml-title { font-size:12px; font-weight:700; color:var(--hint); text-transform:uppercase; letter-spacing:0.6px; }
      .eml-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:var(--space-snug); }
      .eml-card {
        background:var(--bg2);
        background-image:linear-gradient(135deg, color-mix(in srgb, white 3%, transparent) 0%, transparent 60%);
        border:1px solid color-mix(in srgb, white 6%, transparent);
        border-left:3px solid var(--eml-accent, var(--color-primary));
        border-radius:var(--radius-md);
        padding:14px 16px;
        cursor:pointer;
        box-shadow:0 2px 12px color-mix(in srgb, black 30%, transparent);
        overflow:hidden;
      }
      .eml-card.unread { --eml-accent:var(--color-primary); }
      .eml-card.read { --eml-accent:var(--color-on-surface-variant); opacity:0.85; }
      .eml-card.flagged { --eml-accent:var(--color-warning); }
      .eml-from { font-size:12px; color:var(--hint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
      .eml-flags { font-size:12px; margin-left:var(--space-tight); opacity:0.9; }
      .eml-subject { font-size:14px; font-weight:650; margin:6px 0 4px; color:var(--text); }
      .eml-snippet { font-size:12px; color:color-mix(in srgb, white 72%, transparent); line-height:1.45; max-height:3.9em; overflow:hidden; }
      .eml-meta { font-size:11px; color:var(--hint); margin-top:var(--space-base); display:flex; gap:var(--space-base); align-items:center; flex-wrap:wrap; }
      .eml-acct { opacity:0.9; }
      .eml-actions { display:flex; gap:var(--space-base); flex-wrap:wrap; margin-top:var(--space-sm); padding-top:var(--space-sm); border-top:1px solid color-mix(in srgb, white 6%, transparent); }
      .eml-action {
        padding:6px 14px;
        border-radius:var(--radius-pill);
        font-size:12px;
        font-weight:650;
        cursor:pointer;
        border:1px solid color-mix(in srgb, white 12%, transparent);
        background:color-mix(in srgb, white 4%, transparent);
        color:var(--color-on-surface);
        font-family:inherit;
      }
      .eml-action:active { opacity:0.6; }
      .eml-action.primary { background:color-mix(in srgb, var(--color-primary) 15%, transparent); border-color:color-mix(in srgb, var(--color-primary) 30%, transparent); color:var(--color-primary); }
      .eml-action.danger { color:var(--color-error); border-color:color-mix(in srgb, var(--color-error) 25%, transparent); }
      .eml-detail { background:var(--bg2); border:1px solid color-mix(in srgb, white 6%, transparent); border-radius:var(--radius-md); padding:14px 16px; }
      .eml-detail-subject { font-size:15px; font-weight:700; color:var(--text); margin-bottom:var(--space-tight); }
      .eml-detail-from { font-size:12px; color:var(--hint); }
      .eml-body { margin-top:var(--space-snug); padding-top:var(--space-snug); border-top:1px solid color-mix(in srgb, white 6%, transparent); white-space:pre-wrap; font-size:12px; line-height:1.5; color:color-mix(in srgb, white 85%, transparent); max-height:55vh; overflow:auto; }

      /* ── Bubble swipe labels (inside bubble to avoid overflow clip) ── */
      .ch-swipe-label {
        position:absolute; top:50%; transform:translateY(-50%);
        font-size:11px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase;
        padding:3px 8px; border-radius:var(--radius-tight); opacity:0;
        transition:opacity 0.15s; pointer-events:none; z-index:5;
        white-space:nowrap;
      }
      .ch-swipe-label.reply { left:var(--space-base); color:var(--color-primary); background:color-mix(in srgb, var(--color-primary) 15%, transparent); }
      .ch-swipe-label.copy { right:var(--space-base); color:color-mix(in srgb, white 60%, transparent); background:color-mix(in srgb, white 8%, transparent); }
      .ch-swipe-label.retry { left:var(--space-base); color:var(--color-warning); background:color-mix(in srgb, var(--color-warning) 15%, transparent); }
      .ch-swipe-label.pin { right:var(--space-base); color:var(--color-primary); background:color-mix(in srgb, var(--color-primary) 15%, transparent); }

      /* ── Email card swipe hint ── */
      .eml-card { position:relative; transition:transform 0.2s ease, opacity 0.2s ease; }
      .eml-card.swiping { transform:translateX(var(--swipe-x, 0px)); }
      .eml-card .eml-swipe-hint {
        position:absolute; left:-60px; top:0; bottom:0; width:56px;
        display:flex; align-items:center; justify-content:center;
        font-size:20px; color:color-mix(in srgb, var(--color-primary) 80%, transparent); opacity:0;
        transition:opacity 0.15s;
      }
      .eml-card.swiping .eml-swipe-hint { opacity:1; }

      /* ── Email triage widget ── */
      .eml-triage {
        background:var(--bg2);
        background-image:linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 6%, transparent) 0%, transparent 60%);
        border:1px solid color-mix(in srgb, var(--color-primary) 15%, transparent);
        border-left:3px solid var(--color-primary);
        border-radius:var(--radius-md);
        padding:14px 16px;
        width:100%;
      }
      .eml-triage-header { display:flex; align-items:center; gap:var(--space-base); margin-bottom:var(--space-snug); }
      .eml-triage-badge {
        font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px;
        padding:3px 8px; border-radius:var(--radius-tight);
      }
      .eml-triage-badge.prio-high { background:color-mix(in srgb, var(--color-error) 15%, transparent); color:var(--color-error); }
      .eml-triage-badge.prio-med { background:color-mix(in srgb, var(--color-warning) 15%, transparent); color:var(--color-warning); }
      .eml-triage-badge.prio-low { background:color-mix(in srgb, var(--color-on-surface-variant) 15%, transparent); color:var(--color-on-surface-variant); }
      .eml-triage-badge.prio-ignore { background:color-mix(in srgb, var(--color-on-surface-variant) 10%, transparent); color:var(--color-on-surface-variant); opacity:0.8; }
      .eml-triage-cat { font-size:10px; color:var(--hint); text-transform:uppercase; letter-spacing:0.4px; }
      .eml-triage-label { margin-left:auto; font-size:10px; font-weight:700; color:var(--color-primary); text-transform:uppercase; letter-spacing:0.5px; }
      .eml-triage-email { margin-bottom:var(--space-base); }
      .eml-triage-subject { font-size:14px; font-weight:650; color:var(--text); }
      .eml-triage-from { font-size:12px; color:var(--hint); margin-top:var(--space-hairline); }
      .eml-triage-summary { font-size:12px; color:color-mix(in srgb, white 80%, transparent); line-height:1.45; margin-bottom:var(--space-snug); padding:8px 10px; background:color-mix(in srgb, black 15%, transparent); border-radius:var(--radius-default); }
      .eml-triage-actions-title { font-size:10px; font-weight:700; color:var(--hint); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:var(--space-tight); }
      .eml-triage-plan { display:flex; flex-direction:column; gap:var(--space-tight); margin-bottom:var(--space-sm); }
      .eml-triage-step { display:flex; gap:var(--space-base); align-items:flex-start; }
      .eml-triage-step-icon { font-size:14px; flex-shrink:0; width:20px; text-align:center; margin-top:1px; }
      .eml-triage-step-body { flex:1; min-width:0; }
      .eml-triage-step-action { font-size:12px; font-weight:600; color:var(--text); text-transform:capitalize; }
      .eml-triage-step-detail { font-size:11px; color:var(--hint); line-height:1.4; margin-top:1px; }
      .eml-triage-draft { margin-bottom:var(--space-sm); padding:8px 10px; background:color-mix(in srgb, black 15%, transparent); border-radius:var(--radius-default); border-left:2px solid color-mix(in srgb, var(--color-primary) 40%, transparent); }
      .eml-triage-draft-label { font-size:10px; font-weight:700; color:var(--hint); text-transform:uppercase; letter-spacing:0.4px; margin-bottom:var(--space-xs); }
      .eml-triage-draft-body { font-size:12px; color:color-mix(in srgb, white 80%, transparent); line-height:1.45; white-space:pre-wrap; }
      .eml-triage-buttons { display:flex; gap:var(--space-base); flex-wrap:wrap; padding-top:var(--space-sm); border-top:1px solid color-mix(in srgb, white 6%, transparent); }

      /* ── Task Card Widget ── */
      .ch-task-card { border-left:3px solid var(--task-accent, var(--color-primary)); border-radius:var(--radius-md); background:var(--bg2); padding:14px 16px; box-shadow:0 2px 12px color-mix(in srgb, black 30%, transparent); }
      .ch-task-card.status-in-progress { --task-accent:var(--color-success); }
      .ch-task-card.status-done { --task-accent:var(--color-on-surface-variant); }
      .ch-task-card-header { display:flex; align-items:center; gap:var(--space-base); font-size:11px; color:var(--hint); text-transform:uppercase; letter-spacing:0.5px; font-weight:600; }
      .ch-task-card-title { font-size:15px; font-weight:600; margin:8px 0; color:var(--text); }
      .ch-task-card-status { font-size:11px; font-weight:600; padding:3px 10px; border-radius:var(--radius-snug); display:inline-block; }
      .ch-task-card-actions { display:flex; gap:var(--space-base); margin-top:var(--space-sm); padding-top:var(--space-sm); border-top:1px solid color-mix(in srgb, white 6%, transparent); }
      .ch-task-card-detail { margin:8px 0 0; padding:10px 0 0; border-top:1px solid color-mix(in srgb, white 6%, transparent); }
      .ch-task-card-progress { display:flex; align-items:center; gap:var(--space-base); margin-bottom:var(--space-base); }
      .ch-task-card-progress-bar { flex:1; height:4px; background:color-mix(in srgb, white 10%, transparent); border-radius:var(--radius-sm); overflow:hidden; }
      .ch-task-card-progress-fill { height:100%; border-radius:var(--radius-sm); background:var(--task-accent, var(--color-primary)); transition:width 0.3s; }
      .ch-task-card-progress-text { font-size:11px; color:var(--hint); flex-shrink:0; }
      .ch-task-card-subtask { display:flex; align-items:center; gap:var(--space-tight); padding:2px 0; font-size:12px; }
      .ch-task-card-subtask .tc-dot { width:6px; height:6px; border-radius:var(--radius-full); flex-shrink:0; }
      .ch-task-card-subtask .tc-dot.done { background:var(--color-success); }
      .ch-task-card-subtask .tc-dot.in_progress { background:var(--color-primary); }
      .ch-task-card-subtask .tc-dot.pending { background:var(--color-on-surface-variant); }
      .ch-task-card-subtask .tc-dot.failed { background:var(--color-error); }
      .ch-task-card-subtask .tc-dot.skipped { background:var(--color-on-surface-variant); opacity:0.4; }
      .ch-task-card-subtask .tc-title { color:var(--text); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
      .ch-task-card-subtask .tc-title.skipped { color:var(--hint); text-decoration:line-through; }
      .ch-task-card-meta { display:flex; flex-wrap:wrap; gap:6px 12px; margin-top:var(--space-tight); font-size:11px; color:var(--hint); }
      .ch-task-card-meta .tc-overdue { color:var(--color-error); font-weight:600; }
      .ch-task-card-blocked { display:flex; align-items:center; gap:var(--space-xs); font-size:11px; color:var(--color-warning); margin-top:var(--space-xs); }
      .ch-task-btn { padding:6px 14px; border-radius:var(--radius-default); font-size:12px; font-weight:600; cursor:pointer; border:1px solid color-mix(in srgb, white 10%, transparent); background:color-mix(in srgb, white 4%, transparent); color:var(--text); font-family:inherit; transition:background 0.15s; }
      .ch-task-btn:active { opacity:0.6; }
      .ch-task-btn.primary { background:color-mix(in srgb, var(--color-primary) 15%, transparent); border-color:color-mix(in srgb, var(--color-primary) 30%, transparent); color:var(--color-primary); }
      .ch-task-card-prio { font-size:10px; font-weight:700; padding:2px 8px; border-radius:var(--radius-default); display:inline-block; margin-left:var(--space-tight); vertical-align:middle; }
      .ch-task-card-research {
        --task-accent:var(--color-tertiary);
        position:relative;
        overflow:hidden;
        border-left-width:4px;
        background:
          radial-gradient(circle at top right, color-mix(in srgb, var(--color-tertiary) 22%, transparent), transparent 34%),
          linear-gradient(145deg, var(--color-primary-container-deep, var(--color-surface-container)) 0%, var(--color-surface) 45%, var(--color-primary-container-deep, var(--color-surface-container)) 100%);
        border:1px solid color-mix(in srgb, var(--color-tertiary) 18%, transparent);
        box-shadow:0 14px 34px color-mix(in srgb, black 34%, transparent), 0 0 0 1px color-mix(in srgb, var(--color-tertiary) 8%, transparent) inset;
      }
      .ch-task-card-research::before {
        content:"";
        position:absolute;
        inset:0;
        pointer-events:none;
        background:linear-gradient(135deg, color-mix(in srgb, white 6%, transparent), transparent 28%, transparent 72%, color-mix(in srgb, var(--color-tertiary) 10%, transparent));
      }
      .ch-research-hero {
        position:relative;
        display:flex;
        align-items:flex-start;
        gap:var(--space-sm);
        margin:-2px 0 12px;
        padding:12px 12px 12px 13px;
        border-radius:var(--radius-md);
        background:linear-gradient(135deg, color-mix(in srgb, var(--color-tertiary) 18%, transparent), color-mix(in srgb, var(--color-primary) 10%, transparent));
        border:1px solid color-mix(in srgb, var(--color-tertiary) 22%, transparent);
        overflow:hidden;
      }
      .ch-research-hero-icon {
        width:34px;
        height:34px;
        border-radius:var(--radius-snug);
        display:flex;
        align-items:center;
        justify-content:center;
        flex-shrink:0;
        font-size:17px;
        background:color-mix(in srgb, white 10%, transparent);
        box-shadow:0 6px 18px color-mix(in srgb, var(--color-tertiary) 18%, transparent);
      }
      .ch-research-hero-copy { position:relative; z-index:1; min-width:0; }
      .ch-research-hero-kicker {
        font-size:10px;
        font-weight:800;
        letter-spacing:0.12em;
        text-transform:uppercase;
        color:var(--color-tertiary);
        margin-bottom:var(--space-xs);
      }
      .ch-research-hero-text {
        font-size:12px;
        line-height:1.5;
        color:color-mix(in srgb, white 90%, transparent);
      }
      .ch-research-hero-glow {
        position:absolute;
        right:-18px;
        top:-18px;
        width:84px;
        height:84px;
        border-radius:var(--radius-pill);
        background:radial-gradient(circle, color-mix(in srgb, var(--color-tertiary) 30%, transparent), transparent 68%);
        filter:blur(2px);
        pointer-events:none;
      }
      .ch-research-pill-row {
        display:flex;
        flex-wrap:wrap;
        gap:var(--space-tight);
        margin-top:var(--space-snug);
      }
      .ch-research-pill {
        display:inline-flex;
        align-items:center;
        font-size:10px;
        font-weight:700;
        letter-spacing:0.03em;
        color:var(--color-tertiary);
        padding:5px 9px;
        border-radius:var(--radius-pill);
        background:color-mix(in srgb, var(--color-tertiary) 14%, transparent);
        border:1px solid color-mix(in srgb, var(--color-tertiary) 20%, transparent);
      }
      .ch-task-card-research .rs-meta { margin-top:var(--space-snug); }
      .ch-task-card-research .rs-chip {
        background:color-mix(in srgb, var(--color-tertiary) 14%, transparent);
        border:1px solid color-mix(in srgb, var(--color-tertiary) 18%, transparent);
        color:var(--color-tertiary);
      }
      .ch-task-card-research .ch-task-card-actions,
      .ch-task-card-research .ch-task-card-detail {
        border-top-color:color-mix(in srgb, var(--color-tertiary) 12%, transparent);
      }
      .ch-task-card-research .ch-task-btn.primary {
        background:color-mix(in srgb, var(--color-tertiary) 20%, transparent);
        border-color:color-mix(in srgb, var(--color-tertiary) 34%, transparent);
        color:var(--color-tertiary);
      }
      .tkp-card-research {
        position:relative;
        overflow:hidden;
        border:1px solid color-mix(in srgb, var(--color-tertiary) 18%, transparent);
        background:
          radial-gradient(circle at top right, color-mix(in srgb, var(--color-tertiary) 20%, transparent), transparent 34%),
          linear-gradient(145deg, var(--color-primary-container-deep, var(--color-surface-container)) 0%, var(--color-surface) 45%, var(--color-primary-container-deep, var(--color-surface-container)) 100%);
        box-shadow:0 14px 34px color-mix(in srgb, black 34%, transparent), 0 0 0 1px color-mix(in srgb, var(--color-tertiary) 8%, transparent) inset;
      }
      .tkp-card-research::before {
        content:"";
        position:absolute;
        inset:0;
        pointer-events:none;
        background:linear-gradient(135deg, color-mix(in srgb, white 5%, transparent), transparent 32%, transparent 72%, color-mix(in srgb, var(--color-tertiary) 10%, transparent));
      }
      .tkp-spotlight {
        position:relative;
        display:flex;
        align-items:flex-start;
        gap:var(--space-sm);
        margin-bottom:var(--space-sm);
        padding:var(--space-sm);
        border-radius:var(--radius-md);
        background:linear-gradient(135deg, color-mix(in srgb, var(--color-tertiary) 17%, transparent), color-mix(in srgb, var(--color-primary) 10%, transparent));
        border:1px solid color-mix(in srgb, var(--color-tertiary) 20%, transparent);
      }
      .tkp-spotlight-icon {
        width:34px;
        height:34px;
        border-radius:var(--radius-snug);
        display:flex;
        align-items:center;
        justify-content:center;
        flex-shrink:0;
        font-size:17px;
        background:color-mix(in srgb, white 10%, transparent);
        box-shadow:0 6px 18px color-mix(in srgb, var(--color-tertiary) 18%, transparent);
      }
      .tkp-spotlight-copy { min-width:0; flex:1; }
      .tkp-spotlight-label {
        font-size:10px;
        font-weight:800;
        letter-spacing:0.12em;
        text-transform:uppercase;
        color:var(--color-tertiary);
        margin-bottom:var(--space-xs);
      }
      .tkp-spotlight-text {
        font-size:12px;
        line-height:1.5;
        color:color-mix(in srgb, white 90%, transparent);
      }
      .tkp-spotlight-pulse {
        width:10px;
        height:10px;
        margin-top:var(--space-xs);
        border-radius:var(--radius-pill);
        flex-shrink:0;
        background:var(--color-tertiary);
        box-shadow:0 0 0 color-mix(in srgb, var(--color-tertiary) 50%, transparent);
        animation:ch-research-pulse 1.8s ease-out infinite;
      }
      .tkp-tag-row {
        display:flex;
        flex-wrap:wrap;
        gap:var(--space-tight);
        margin:2px 0 8px;
      }
      .tkp-tag {
        display:inline-flex;
        align-items:center;
        font-size:10px;
        font-weight:700;
        letter-spacing:0.03em;
        color:var(--color-tertiary);
        padding:5px 9px;
        border-radius:var(--radius-pill);
        background:color-mix(in srgb, var(--color-tertiary) 14%, transparent);
        border:1px solid color-mix(in srgb, var(--color-tertiary) 20%, transparent);
      }
      @keyframes ch-research-pulse {
        0% { box-shadow:0 0 0 0 color-mix(in srgb, var(--color-tertiary) 45%, transparent); }
        70% { box-shadow:0 0 0 10px color-mix(in srgb, var(--color-tertiary) 0%, transparent); }
        100% { box-shadow:0 0 0 0 color-mix(in srgb, var(--color-tertiary) 0%, transparent); }
      }

      /* ── Subtask Created Widget ── */
      .ch-subtask-card { padding:8px 12px; background:color-mix(in srgb, white 3%, transparent); border-radius:var(--radius-default); border-left:2px solid color-mix(in srgb, white 10%, transparent); }
      .ch-subtask-header { display:flex; align-items:center; gap:var(--space-base); font-size:13px; }
      .ch-subtask-title { color:var(--text); flex:1; }

      /* ── Task List Widget ── */
      .ch-tl-list { background:var(--bg2); border:1px solid color-mix(in srgb, white 6%, transparent); border-radius:var(--radius-md); overflow:hidden; }
      .ch-tl-row { display:flex; align-items:center; gap:var(--space-snug); padding:10px 14px; cursor:pointer; border-bottom:1px solid color-mix(in srgb, white 4%, transparent); transition:background 0.12s; }
      .ch-tl-row:last-of-type { border-bottom:none; }
      .ch-tl-row:active { background:color-mix(in srgb, white 6%, transparent); }
      .ch-tl-dot { width:8px; height:8px; border-radius:var(--radius-full); flex-shrink:0; }
      .ch-tl-title { flex:1; font-size:13px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
      .ch-tl-prio { font-size:10px; font-weight:700; flex-shrink:0; }
      .ch-tl-footer { padding:8px 14px; text-align:center; border-top:1px solid color-mix(in srgb, white 6%, transparent); }
      .ch-tl-viewall { font-size:12px; color:var(--btn); text-decoration:none; font-weight:500; }
      .ch-tl-viewall:active { opacity:0.6; }

      /* ── Backlog Dashboard Widget ── */
      .bd-wrap { background:var(--bg2); border:1px solid color-mix(in srgb, white 6%, transparent); border-radius:var(--radius-md); padding:var(--space-roomy); display:flex; flex-direction:column; gap:var(--space-sm); }

      /* ─── Bubble redesign (Commit #5 / DD-07-05) ───────────────────────
         New `.cha-bubble*` markup contract per DD-09 — wraps content in
         `.cha-bubble-text` (selectable inner) + adds `.cha-bubble-meta`
         slot (timestamp + status). Activates when chat-messages.js's
         `_renderUser/Assistant/System` emit `.cha-bubble` markup behind
         the `experimentalFeatures.redesign` flag.

         AC-25 selection contract: shells get user-select:none (prevents
         accidental selection of bubble chrome on long-press); inner
         `.cha-bubble-text` overrides with user-select:text to preserve
         copy-paste of message body.

         Tone parity with `.ch-bubble*` legacy rules above — same
         primary-fill for user, surface-container for assistant,
         translucent muted for system. Border-radius pattern preserved
         (4px collapse on the sender-side corner).
      */
      .cha-bubble {
        max-width:92%;
        padding:10px 14px;
        border-radius:var(--radius-roomy);
        font-size:14px;
        line-height:1.55;
        word-break:break-word;
        position:relative;
        -webkit-touch-callout:none;
        -webkit-user-select:none;
        user-select:none;
        touch-action:pan-y;
      }
      .cha-bubble.user {
        align-self:flex-end;
        background:var(--color-primary);
        color:var(--color-on-primary);
        border-bottom-right-radius:4px;
        padding:8px 14px;
      }
      .cha-bubble.assistant {
        align-self:flex-start;
        background:var(--color-surface-container);
        color:var(--color-on-surface);
        border:1px solid var(--color-outline-variant);
        border-bottom-left-radius:4px;
        max-width:94%;
      }
      .cha-bubble.system {
        align-self:center;
        background:color-mix(in srgb, var(--color-on-surface) 4%, transparent);
        color:var(--color-on-surface-variant);
        font-size:12px;
        font-weight:500;
        border-radius:var(--radius-pill);
        padding:6px 12px;
      }
      .cha-bubble-text {
        -webkit-user-select:text;
        user-select:text;
        white-space:pre-wrap;
      }
      .cha-bubble.user .cha-bubble-text { white-space:pre-wrap; }
      .cha-bubble-meta {
        margin-top:var(--space-xs);
        font-size:10px;
        font-weight:500;
        letter-spacing:0.04em;
        color:color-mix(in srgb, currentColor 60%, transparent);
        display:flex;
        gap:var(--space-tight);
        align-items:center;
      }
      .cha-bubble-meta:empty { display:none; }
      .cha-bubble.user .cha-bubble-meta { justify-content:flex-end; }

      /* Reply quote — chat-messages.js:297 inline `border-left:3px solid
         ${rAccent}` migrates to data-reply-color="<role>" → --reply-color
         CSS variable bridge below. DD-03 rev 2 callsite #2.
         Selector covers BOTH legacy `.ch-reply-quote` (still emitted by
         current chat-messages.js render path) AND new `.cha-reply-quote`
         (post-T-30 flag-on path) — coexistence per DD-09. */
      .ch-reply-quote,
      .cha-reply-quote {
        border-left:3px solid var(--reply-color, var(--color-primary));
        padding:4px 0 4px 8px;
        margin-bottom:var(--space-tight);
        font-size:12px;
        color:var(--color-on-surface-variant);
        font-style:italic;
        opacity:0.85;
      }
      /* role → --reply-color bridge: keeps the role accent palette
         declarative (no inline style attribute needed). `user` reply
         accents the green success token; `assistant` uses the primary-
         container tint; `system` falls back to the rule's default
         (var(--color-primary)). */
      [data-reply-color="user"]      { --reply-color: var(--color-success); }
      [data-reply-color="assistant"] { --reply-color: var(--color-primary-container); }
      .cha-reply-quote-author {
        font-weight:600;
        margin-right:var(--space-xs);
      }

      /* ─── Quick-actions row (Commit #11 / DD-08-A / FR-08) ─────────────
         Renders as a sibling AFTER each assistant `.cha-bubble.assistant`
         message when `experimentalFeatures.reactions !== false`. Visible
         at 0.7 opacity by default (was: collapsed-until-hover, which made
         the row functionally invisible on touch + non-hover desktops).
         Hover/active/focus ramps to 1.0 — affordance stays present + alive.

         Keyboard: arrow keys move focus across chips; Enter/Space
         activates. role="toolbar" + aria-label="Message actions" for SR
         announcement.
      */
      .cha-reaction-row {
        display:flex; flex-wrap:wrap; gap:var(--space-tight);
        margin:4px 0 8px;
        align-self:flex-start;
        opacity:0.7;
        transition:opacity 0.15s ease;
      }
      .cha-bubble.assistant:hover + .cha-reaction-row,
      .cha-reaction-row:hover,
      .cha-reaction-row:focus-within,
      .cha-reaction-row.cha-reaction-row--open {
        opacity:1;
      }
      @media (hover: none) {
        /* Touch: full opacity; the row is the primary action surface. */
        .cha-reaction-row { opacity:1; }
      }
      .cha-reaction-chip {
        background:color-mix(in srgb, var(--color-on-surface) 6%, transparent);
        border:1px solid var(--color-outline-variant);
        color:var(--color-on-surface-variant);
        border-radius:var(--radius-full);
        padding:4px 10px;
        font-size:11px;
        font-weight:500;
        cursor:pointer;
        transition:background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
      }
      .cha-reaction-chip:hover {
        background:color-mix(in srgb, var(--color-primary) 12%, transparent);
        border-color:color-mix(in srgb, var(--color-primary) 30%, transparent);
        color:var(--color-on-surface);
      }
      .cha-reaction-chip:focus-visible {
        outline:2px solid var(--color-primary);
        outline-offset:2px;
      }
      .cha-reaction-chip:active { transform:scale(0.96); }

      /* ─── Reply menu popover (Commit #12 / DD-08-B / FR-09) ────────────
         Long-press on touch / right-click on desktop opens a small menu
         with 4 affordances (Reply / Copy / Save / Share). Positioned
         absolute by chat.js _openReplyMenu(); pointer-coords-anchored.

         z-index 1000 covers the chat-shell stacking context (header at
         z-index 10, exec banners at 5). Menu DOM lives on document.body
         so it isn't clipped by overflow:hidden ancestors.
      */
      .cha-reply-menu {
        position:fixed;
        z-index:1000;
        background:var(--color-surface-container-high);
        border:1px solid var(--color-outline-variant);
        border-radius:var(--radius-snug);
        padding:var(--space-xs);
        box-shadow:0 8px 24px color-mix(in srgb, black 18%, transparent);
        min-width:140px;
        display:flex;
        flex-direction:column;
        gap:var(--space-hairline);
        animation:cha-reply-menu-in 0.12s ease-out;
      }
      @keyframes cha-reply-menu-in {
        from { opacity:0; transform:scale(0.95); }
        to   { opacity:1; transform:scale(1); }
      }
      .cha-reply-menu-item {
        display:flex; align-items:center; gap:var(--space-snug);
        padding:8px 12px;
        background:transparent;
        border:none;
        color:var(--color-on-surface);
        font-size:13px;
        font-weight:500;
        text-align:left;
        cursor:pointer;
        border-radius:var(--radius-tight);
        transition:background 0.12s ease;
      }
      .cha-reply-menu-item:hover,
      .cha-reply-menu-item:focus-visible {
        background:color-mix(in srgb, var(--color-primary) 10%, transparent);
        outline:none;
      }
      .cha-reply-menu-item .material-symbols-outlined {
        color:var(--color-on-surface-variant);
        font-size:16px;
      }

/* ── Utility classes added during inline-style extraction ─────────── */

/* Task card progress bar track (dark glass tint) */
.tkp-progress-bar-track { background: color-mix(in srgb, var(--color-on-surface) 8%, transparent); }

/* Task-panel subtasks collapsed — JS toggles the centralized .hidden
   utility from pwa/styles/base.css. Markup is now ${collapsed ? 'hidden' : ''}. */

/* Task summary detail */
.tkp-st-detail-pad { padding: 4px 8px; margin-top: var(--space-xs); }

/* Subtask card icon (dim) */
.ch-subtask-icon-dim { color: color-mix(in srgb, var(--color-on-surface) 40%, transparent); }

/* Subtask card ID label */
.ch-subtask-id-label { color: color-mix(in srgb, var(--color-on-surface) 25%, transparent); font-size: 11px; }

/* Task list empty state */
.ch-tl-empty { color: var(--color-on-surface-variant); font-size: 13px; }

/* Generic "no data" fallback rows used in widget renderers */
.ch-no-data { color: var(--color-on-surface-variant); font-size: 13px; }

/* Fallback card padding for no-component trip/flight rows */
.ch-widget-fallback-row { padding: var(--space-base); color: var(--color-on-surface-variant); }

/* Trip detected row wrapper */
.ch-trip-detected-row { margin: 8px 0; }

/* Trip detected action bar below the trip card */
.ch-trip-detected-actions { padding: 8px 16px; margin-top: -8px; }

/* Spacer that pushes action buttons to the right */
.ch-trip-detected-spacer { flex: 1; }

/* Trip detected source label */
.ch-trip-detected-source { font-size: 11px; color: var(--color-on-surface-variant); font-family: 'Space Grotesk', system-ui, sans-serif; }

/* Arrival delay value — warning color */
.ch-flight-arr-delay { color: var(--color-tertiary); }

/* bd-plan highRisk tag */
.bd-plan-tag-risk { color: var(--color-error); }

/* Chart stack height — fixed 52px for bd-chart-stack */
.bd-chart-stack-h { height: 52px; }

/* CSS-var carve-out for dynamic task-card progress fill width. JS sets
   `--ch-progress-pct: ${pct}%` on the parent or fill element. */
.ch-task-card-progress-fill { width: var(--ch-progress-pct, 0%); }

/* ── ws-* widget shell — flight/hotel search, trip stage/activity/invitation, browser flows, day plan ── */
.ws-search-results { display:flex; flex-direction:column; gap:8px; padding:4px 0; }
.ws-search-header { font-size:12px; font-weight:600; color:var(--color-on-surface-variant); text-transform:uppercase; letter-spacing:.04em; padding:0 2px 4px; }
.ws-result-card { display:flex; align-items:flex-start; gap:10px; padding:10px 12px; background:color-mix(in srgb, var(--color-surface-variant) 60%, transparent); border:1px solid color-mix(in srgb, white 6%, transparent); border-radius:var(--radius-base); }
.ws-result-main { flex:1; min-width:0; font-size:13px; line-height:1.5; }
.ws-result-main strong { display:block; font-size:14px; font-weight:600; color:var(--color-on-surface); }
.ws-result-detail { color:var(--color-on-surface-variant); font-size:12px; margin-top:2px; }
.ws-result-price { font-size:13px; font-weight:700; color:var(--color-primary); white-space:nowrap; }
.ws-result-actions { display:flex; gap:6px; margin-top:6px; flex-wrap:wrap; }
.ws-btn { font-size:12px; font-weight:500; padding:4px 10px; border-radius:var(--radius-pill); border:1px solid color-mix(in srgb, var(--color-primary) 50%, transparent); background:transparent; color:var(--color-primary); cursor:pointer; }
.ws-btn:hover { background:color-mix(in srgb, var(--color-primary) 10%, transparent); }
.ws-tag { display:inline-block; font-size:11px; font-weight:500; padding:2px 7px; border-radius:var(--radius-pill); background:color-mix(in srgb, var(--color-primary) 12%, transparent); color:var(--color-primary); margin-left:4px; vertical-align:middle; }
.ws-stars { font-size:13px; font-weight:600; color:var(--color-warning); white-space:nowrap; padding-top:2px; }
.ws-rationale { font-size:12px; color:var(--color-on-surface-variant); font-style:italic; margin-top:3px; }
.ws-link { color:var(--color-primary); text-decoration:underline; font-size:13px; }
.ws-empty { color:var(--color-on-surface-variant); font-size:13px; padding:8px 0; }
.ws-more { font-size:12px; color:var(--color-on-surface-variant); text-align:center; padding:4px 0; }
.ws-ghost-card { border-style:dashed; }
/* chat-ui-coordination 2026-05-08 — round-trip verification ⚠️ banner.
   Surfaces when verifyAfterWrite re-read disagrees with the input echo.
   Yellow tint per design tokens; non-blocking — caller should inspect
   the trip view to confirm. */
.ws-unverified-banner {
  font-size:12px;
  font-weight:500;
  color:var(--color-warning, #b88a2b);
  background:color-mix(in srgb, var(--color-warning, #f4c542) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--color-warning, #f4c542) 35%, transparent);
  border-radius:var(--radius-base);
  padding:6px 10px;
  line-height:1.4;
}
/* trip_day_plan time gutter */
.ws-day-time {
  display:inline-block;
  min-width:62px;
  font-variant-numeric:tabular-nums;
  font-weight:600;
  color:var(--color-on-surface-variant);
  font-size:12px;
}
/* parallel_batch_status progress bar */
.ws-batch-progress {
  margin-top:6px;
  height:6px;
  border-radius:3px;
  background:color-mix(in srgb, var(--color-surface-variant) 70%, transparent);
  overflow:hidden;
}
.ws-batch-progress-fill {
  height:100%;
  background:var(--color-primary);
  transition:width .25s ease;
}

      /* ─── chat-step-trace-collapse T-11 (FR-01..FR-05, NFR-01..NFR-05)
         Renders as a `<section class="cha-step-trace">` between an
         assistant turn's grouped reasoning events and the next answer
         bubble. Default state: expanded (no class). Auto-collapses on
         first content delta of the next turn (CSS handles transition).
         Min-height 44px on the toggle satisfies AC-08 / NFR-04 mobile
         tap-target floor. Reduced-motion respected via the global guard
         at base.css:240-247 — no per-component override needed. */
      .cha-step-trace {
        align-self: flex-start;
        margin: 6px 0 8px;
        max-width: 94%;
        border-radius: var(--radius-roomy);
        background: color-mix(in srgb, white 3%, transparent);
        border: 1px solid color-mix(in srgb, white 7%, transparent);
        overflow: hidden;
      }
      .cha-step-trace-toggle {
        display: flex; align-items: center; justify-content: space-between;
        gap: var(--space-snug);
        width: 100%;
        min-height: 44px;
        padding: 8px 14px;
        background: transparent;
        border: none;
        color: var(--color-on-surface-variant);
        font-size: 12px; font-weight: 600;
        text-align: left;
        cursor: pointer;
      }
      .cha-step-trace-toggle:hover {
        background: color-mix(in srgb, white 4%, transparent);
        color: var(--color-on-surface);
      }
      .cha-step-trace-toggle:focus-visible {
        outline: 2px solid var(--color-primary);
        outline-offset: -2px;
      }
      .cha-step-trace-toggle::after {
        content: "▾";
        font-size: 10px;
        opacity: 0.7;
        transition: transform 0.18s ease-out;
      }
      .cha-step-trace.collapsed .cha-step-trace-toggle::after {
        transform: rotate(-90deg);
      }
      .cha-step-trace-events {
        padding: 0 12px 10px;
        display: flex; flex-direction: column; gap: 6px;
        transform-origin: top;
        transition: max-height 0.2s ease-out, opacity 0.18s ease-out;
        max-height: 800px;
        opacity: 1;
      }
      .cha-step-trace.collapsed .cha-step-trace-events {
        max-height: 0;
        opacity: 0;
        padding-top: 0;
        padding-bottom: 0;
        pointer-events: none;
      }

      /* ─────────────────────────────────────────────────────────────────
         Claude-Code-style status / thinking / tool-line surface.
         Mirrors the four UI primitives Claude Code uses in the terminal:
           • ✻ Thinking…            streaming reasoning, dim italic
           • ✻ Thought for Ns       collapsed reasoning pill
           • ● Tool(args)           single-line tool head with status dot
           •   ⎿ result line        indented continuation (output / error)
           • bottom status bar      verb + elapsed + token + esc-to-interrupt
         The legacy `.ch-typing`, `.tb-*`, and `.rs-*` rules above remain
         intact for non-redesign callers; new render paths emit `.cc-*`.
         ───────────────────────────────────────────────────────────────── */

      /* Status bar — sits below the message list while a turn is live. */
      .cc-status {
        align-self: stretch;
        display: flex; align-items: center; gap: var(--space-snug);
        padding: 8px 14px; margin: 4px 0 0;
        font-family: 'Space Grotesk', system-ui, sans-serif;
        font-size: 12px; color: var(--hint);
      }
      .cc-status__glyph {
        display: inline-flex; align-items: center; justify-content: center;
        width: 14px; height: 14px; flex-shrink: 0;
        color: var(--color-primary);
        animation: cc-sparkle-pulse 1.6s ease-in-out infinite;
      }
      .cc-status__verb {
        color: var(--text); font-weight: 600;
        letter-spacing: 0.01em;
      }
      .cc-status__verb::after {
        content: '…'; margin-left: 1px; color: var(--hint); font-weight: 400;
      }
      .cc-status__meta {
        color: var(--hint); font-size: 11px; font-weight: 500;
      }
      .cc-status__meta::before {
        content: '·'; margin: 0 6px; color: color-mix(in srgb, var(--hint) 60%, transparent);
      }
      .cc-status__hint {
        margin-left: auto; color: color-mix(in srgb, var(--hint) 80%, transparent);
        font-size: 11px;
      }
      .cc-status__hint kbd {
        display: inline-block; padding: 1px 5px;
        border: 1px solid color-mix(in srgb, white 14%, transparent);
        border-radius: 4px; font-family: inherit; font-size: 10px;
        background: color-mix(in srgb, white 4%, transparent);
        color: var(--text);
      }
      @keyframes cc-sparkle-pulse {
        0%, 100% { opacity: 0.55; transform: scale(0.92); }
        50%      { opacity: 1;    transform: scale(1.08); }
      }

      /* Thinking card — replaces the legacy `.rs-card` chrome with a
         dim-italic streaming block. Uses <details> so the same element
         doubles as the collapsed "✻ Thought for Ns" pill once done. */
      .cc-thinking {
        align-self: stretch;
        border-left: 2px solid color-mix(in srgb, var(--color-primary) 40%, transparent);
        padding: 4px 0 4px 12px; margin: 2px 0;
        background: transparent;
      }
      .cc-thinking[open] { padding-bottom: 8px; }
      .cc-thinking > summary {
        list-style: none; cursor: pointer;
        display: inline-flex; align-items: center; gap: 6px;
        font-size: 12px; color: var(--hint);
        font-style: italic;
      }
      .cc-thinking > summary::-webkit-details-marker { display: none; }
      .cc-thinking__glyph {
        color: var(--color-primary);
        font-style: normal;
      }
      .cc-thinking:not([open]) .cc-thinking__glyph {
        animation: cc-sparkle-pulse 1.6s ease-in-out infinite;
      }
      .cc-thinking[open] .cc-thinking__verb::after {
        content: ''; /* hide trailing dots once expanded */
      }
      .cc-thinking__verb::after {
        content: '…';
      }
      .cc-thinking__elapsed {
        color: color-mix(in srgb, var(--hint) 75%, transparent);
        font-size: 11px; font-style: normal;
      }
      .cc-thinking__body {
        margin-top: 6px; font-size: 12px; line-height: 1.55;
        color: color-mix(in srgb, var(--text) 75%, transparent);
        font-style: italic;
        white-space: pre-wrap; word-break: break-word;
      }
      .cc-thinking__body :is(p, ul, ol) { margin: 0 0 6px; }
      .cc-thinking__body :is(p, ul, ol):last-child { margin-bottom: 0; }
      .cc-thinking__chips {
        display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px;
      }
      .cc-thinking__chip {
        font-size: 10px; font-weight: 600; color: var(--hint);
        background: color-mix(in srgb, white 6%, transparent);
        padding: 2px 6px; border-radius: var(--radius-pill);
      }

      /* Tool line — single-line head + indented ⎿ continuation. */
      .cc-tool {
        align-self: stretch; margin: 4px 0;
        font-family: 'Space Grotesk', system-ui, sans-serif;
        font-size: 13px; line-height: 1.55;
      }
      .cc-tool__head {
        display: flex; align-items: center; gap: 8px;
        color: var(--text); font-weight: 600;
      }
      .cc-tool__dot {
        width: 8px; height: 8px; border-radius: var(--radius-full);
        flex-shrink: 0;
        background: var(--hint);
      }
      .cc-tool[data-phase="running"] .cc-tool__dot {
        background: var(--color-warning);
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-warning) 60%, transparent);
        animation: cc-dot-pulse 1.4s ease-out infinite;
      }
      .cc-tool[data-phase="completed"] .cc-tool__dot { background: var(--color-success); }
      .cc-tool[data-phase="failed"]    .cc-tool__dot { background: var(--color-error); }
      @keyframes cc-dot-pulse {
        0%   { box-shadow: 0 0 0 0   color-mix(in srgb, var(--color-warning) 55%, transparent); }
        70%  { box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-warning) 0%,  transparent); }
        100% { box-shadow: 0 0 0 0   color-mix(in srgb, var(--color-warning) 0%,  transparent); }
      }
      .cc-tool__name { color: var(--text); }
      .cc-tool__args {
        color: var(--hint); font-weight: 500;
        max-width: 60ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      }
      .cc-tool__args::before { content: '('; }
      .cc-tool__args::after  { content: ')'; }
      .cc-tool__cont {
        display: flex; align-items: flex-start; gap: 4px;
        margin: 2px 0 0 4px;
        color: var(--hint); font-size: 12px;
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        line-height: 1.5;
      }
      .cc-tool__cont-glyph {
        color: color-mix(in srgb, var(--hint) 60%, transparent);
        flex-shrink: 0;
      }
      .cc-tool__cont-text {
        flex: 1; min-width: 0;
        white-space: pre-wrap; word-break: break-word;
        max-height: 8.4em; overflow: hidden;
        position: relative;
      }
      .cc-tool[data-phase="failed"] .cc-tool__cont-text { color: var(--color-error); }
      .cc-tool__cont-text--expandable::after {
        content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2.4em;
        background: linear-gradient(to bottom, transparent, var(--bg) 90%);
        pointer-events: none;
      }
      .cc-tool__cont-text.is-open { max-height: none; }
      .cc-tool__cont-text.is-open::after { display: none; }
      .cc-tool__expand {
        background: none; border: none; padding: 0;
        color: var(--btn); cursor: pointer; font: inherit;
        font-size: 11px; margin-left: 4px;
      }
      .cc-tool__widget { margin: 6px 0 0 16px; }

      /* Click-to-toggle head — applies whether collapsed or expanded so
         the user can re-collapse a manually-expanded card. Chevron rotates
         to flag state; default state ▾ = expanded, rotated = collapsed. */
      .cc-tool__head {
        cursor: pointer;
        user-select: none;
      }
      .cc-tool__chevron {
        margin-left: auto;
        color: var(--hint);
        font-size: 10px;
        transition: transform 0.15s ease-out;
        opacity: 0.6;
      }
      .cc-tool--collapsed .cc-tool__chevron { transform: rotate(-90deg); opacity: 1; }

      /* CHAT-10 (deep-dive 2026-05-09): running tool bubbles are not
         collapsible — clicking is a no-op (the toggle gates on !isRunning).
         Suppress the misleading pointer cursor + chevron so the user
         doesn't get the impression they can hide an in-flight tool. */
      .cc-tool[data-phase="running"] .cc-tool__head { cursor: default; }
      .cc-tool[data-phase="running"] .cc-tool__chevron { display: none; }

      /* Collapsed state — hide continuation snippet + widget; head only.
         Spec: rca-2026-05-09 turn-end auto-collapse. Frees vertical
         space the moment the response is rendered. */
      .cc-tool--collapsed .cc-tool__cont,
      .cc-tool--collapsed .cc-tool__widget { display: none; }