# Task 03 — The container's CSS

**Phase:** `161_reasoning_bubble` · **Source:** `TODO.md:3 — "The reasoning process should be one collapsible section that **stays open** during the reasoning process and shows all thinking and tool calls in order. Right now the thinking, tool calling, thinking, tool calling blocks take up a ton of space and obscure the answer. We need to condense this while still letting the user watch the thinking process happen so the latency doesn't feel super low. This new thinking/tool calling bubble should only collapse once the final response has been returned and the session has stopped."`
**Story:** n/a

## Objective
The `details.reasoning` container's styling: the native
`details`/`summary` treatment of the house family (the
`details.thinking` convention — L633), the bounded 320px live window
(D3), the inner-run compacting (de-bordered, one scroll surface), the
reduced-motion stills — all AA-contrast, WCAG 2.1 AA basics
(focusable summary ≥44px, `:focus-visible`, chevron).

## Work
1. `frontend/assets/styles.css` — the `details.reasoning` block (a
   NEW distinct comment block citing this phase + D3; placed
   ADJACENT to the `details.thinking` family — after the
   `details.thinking .thinking-text` margin rule ~L684, before the
   phase-117 `.tool-calls-disclosure` comment ~L689 — verify the
   actual layout in the file and keep the family blocks adjacent):
   `background: var(--surface); border: 1px solid var(--line);
   border-left: 3px solid var(--brand-soft); border-radius:
   var(--radius-sm); margin: 0 0 0.5rem; overflow: hidden;` — the
   family treatment of `details.thinking` (the same surface/line/
   brand-soft/radius tokens; the comment documents the parity + the
   D3 window).
2. `frontend/assets/styles.css` — `summary.reasoning-summary`:
   `display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem
   0.75rem; min-height: 44px;` (the WCAG ≥44px target — parity with
   the `details.thinking` summary); `color: var(--brand-ink)` (8.7:1
   on `--surface` — AA — the token the `details.thinking` summary
   uses); `font-size: 0.9rem; cursor: pointer; list-style: none;`;
   `summary.reasoning-summary::-webkit-details-marker { display: none
   }`; the CSS chevron `summary.reasoning-summary::before { content:
   "▸"; display: inline-block; transition: transform 0.15s ease; }` +
   `details.reasoning[open] summary.reasoning-summary::before {
   transform: rotate(90deg); }` (the `details.thinking` convention);
   `summary.reasoning-summary:focus-visible { outline: 3px solid
   var(--brand); outline-offset: 2px; }` (the house 3px ring).
3. `frontend/assets/styles.css` — `.reasoning-status`: `color:
   var(--ink-soft)` (6.9:1 on `--surface` — AA); `font-size: 0.8rem;
   line-height: 1.4; margin-left: 0.25rem;` (D6 — text + color, never
   color alone — B5; the status is a span INSIDE the summary — the
   flex row lays it out after the literal).
4. `frontend/assets/styles.css` — `.reasoning-body`: `padding: 0 0.75rem
   0.75rem; max-height: 320px; overflow-y: auto;` (D3 — the ONE
   bounded live window; a user-scrollable window — the phase-17
   convention; the comment cites this phase + D3 + the pinned-tail
   follow in app.js).
5. `frontend/assets/styles.css` — the inner-run compacting (D3 — the
   nested-border weight removed; ONE scroll surface):
   `details.reasoning details.thinking { border: 0; border-left: 2px
   solid var(--line); border-radius: 0; margin: 0.25rem 0;
   background: transparent; }` + `details.reasoning details.thinking
   .thinking-text { max-height: none; overflow-y: visible; }` (the
   inner 320px window disabled — the container's window is the single
   scroll surface; the phase-17 per-block follow in app.js no-ops
   accordingly — the task-01 comment) + `details.reasoning
   .tool-calls-disclosure { margin: 0.25rem 0; }` (already compact —
   the rule documents the intent, no visual change).
6. `frontend/assets/styles.css` — the reduced-motion block (L1499,
   the existing `details.thinking summary::before { transition: none;
   }` stills list): append `summary.reasoning-summary::before {
   transition: none; }` (the chevron rotation stills — parity with
   the existing stills).
7. No JS change in this task (the selectors the task-01/02 JS
   creates — `reasoning` / `reasoning-summary` / `reasoning-status` /
   `reasoning-body` — are the CSS contract).

## Testing & Quality
- Unit: `tests/unit/test_reasoning_bubble.py` (extended) — the source
  pins: the `details.reasoning` rule exists with the family tokens +
  `overflow: hidden`; the `summary.reasoning-summary` rule with
  `min-height: 44px` + the `:focus-visible` ring + the webkit-marker
  suppression + the chevron `::before` + the `[open]` rotation; the
  `.reasoning-status` rule with the AA token; the `.reasoning-body`
  rule with `max-height: 320px` + `overflow-y: auto`; the
  inner-run compacting rules (the de-border + the
  `max-height: none` on the inner `.thinking-text`); the
  reduced-motion still appended.
- E2E (verified in task 04's suite): the computed-style pins —
  `.reasoning-body`'s `max-height` ≤ 320px + `overflow-y: auto`
  (the D3 contract — test 6 of `test_reasoning_bubble.py` per the
  phase overview).
- Coverage: **>90%** on this task's new/modified code (frontend — the
  `app/` gate is untouched; held by the suite).

## Completion Criteria
- [ ] `tests/unit/test_reasoning_bubble.py` green (`uv run pytest
      tests/unit/test_reasoning_bubble.py -v --no-cov`)
- [ ] `uv run ruff check . && uv run pyright` clean (the CSS is
      verified by the unit source pins — no CSS lint gate)
- [ ] the full test suite green (`uv run pytest`)
- [ ] no behavior change in completed work beyond the documented
      inner-run compacting (the `details.thinking` /
      `.tool-calls-disclosure` rules OUTSIDE the container are
      byte-identical — the legacy no-container path renders
      unchanged)