/* Planning Block Choice Buttons Styling */ /* Composer choice type scale (rev-f9kno.7). ONE token drives the choice title, the pros/cons detail, and the Send label so they cannot drift apart: the operator's requirement is that ALL choice-text — composer rows AND the in-story planning-block buttons — render at the SAME size as the narrative prose (`#story-content p`, `font-size: 16px` inherited from ). The token lives at 1rem (== 16px) so this stays a single source of truth; if you ever need to step it down again, change ONLY this line. Historically this was set to 12.8px to make the composer row feel compact against the textarea; the operator reversed that decision on 2026-08-18 ("planning block and custom action text too small — make it same size as narrative text"), so the value is back at the body baseline. */ :root { --composer-choice-font: 1rem; } /* Risk-tinted planning-block (Direction 4, feat/risk-tinted-direction-4). The choice row's data-risk attribute surfaces the existing risk_level field (one of: safe | low | medium | high; VALID_RISK_LEVELS in narrative_response_schema.py). Three tokens cover the four values: safe=green, low/medium=risky=yellow, high=dangerous=red. The row gets a 2px left border + ~7% bg tint via color-mix so the cue is visible without overpowering the existing safe/risky/dangerous text the renderer may add later. The helper var(--risk-rgb-) holds the numeric RGB triple so color-mix works in `in srgb` syntax without parsing the hex. The fallback-form CSS uses both the named token AND a hex literal so a painter that strips the tokens (e.g. theme overrides) still renders the color, and a contract test pins the fallback chain end-to-end. */ :root { --risk-safe: #2ea043; --risk-risky: #d4a017; --risk-dangerous: #c93c3c; --risk-rgb-safe: 46 160 67; --risk-rgb-risky: 212 160 23; --risk-rgb-dangerous: 201 60 60; } /* Thinking text paragraph styling */ .planning-block-thinking { margin-bottom: 0.5rem; } /* Aggressively collapse vertical space below planning block choices */ .planning-block-choices { margin-bottom: 0 !important; padding-bottom: 0 !important; } .planning-block-choices + div, .planning-block-choices + form, .planning-block-choices + input, .planning-block-choices + .form-group, .planning-block-choices + .input-group { margin-top: 0 !important; padding-top: 0 !important; } /* Remove margin from parent if present */ .planning-block-choices:parent { margin-bottom: 0 !important; padding-bottom: 0 !important; } /* Individual choice button */ .choice-button { display: block; width: 100%; margin-bottom: 0.5rem; padding: 0.5rem 1rem; text-align: left; background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 3px; cursor: pointer; transition: all 0.15s ease; line-height: 1.4; color: #212529; box-shadow: none; } .choice-button:last-child { margin-bottom: 0.1rem; } /* Per-row disclosure (E1a, rev-f9kno.6, supersedes C4's always-expanded compact pros/cons line from rev-f9kno.2): each choice defaults to ONE line (title only); a sibling chevron button reveals pros/cons for THAT row only, independent of the others (ARIA APG Disclosure pattern, not the stricter exclusive-open Accordion -- multiple rows may be open at once). Unscoped so history and the composer -- which render the SAME markup via parsePlanningBlocks -- both get it; the composer-scoped overrides further below (.composer-choices .choice-row ...) handle the width/divider differences between the two contexts, same pattern the old .choice-body block used. */ .choice-row { margin-bottom: 0.5rem; } .choice-row:last-child { margin-bottom: 0.1rem; } /* Risk-tinted row (Direction 4). The data-risk attribute on the .choice-row div mirrors the LLM's risk_level (safe | low | medium | high). Four values fold into three colors: safe=green, low/medium=risky=yellow, high= dangerous=red. 2px left border + ~7% bg tint via color-mix; the tint is drawn on the row container (not the inner button) so hovering the title still uses the existing .choice-button hover state without double-tinting. The pad-left absorbs the 2px border so the title text does not shift from its existing baseline. */ .choice-row[data-risk="safe"] { border-left: 2px solid var(--risk-safe, #2ea043); background-color: color-mix(in srgb, var(--risk-safe, #2ea043) 7%, transparent); } .choice-row[data-risk="low"], .choice-row[data-risk="medium"] { border-left: 2px solid var(--risk-risky, #d4a017); background-color: color-mix(in srgb, var(--risk-risky, #d4a017) 7%, transparent); } .choice-row[data-risk="high"] { border-left: 2px solid var(--risk-dangerous, #c93c3c); background-color: color-mix(in srgb, var(--risk-dangerous, #c93c3c) 7%, transparent); } .choice-head { display: flex; align-items: center; } /* The title button keeps the existing .choice-button visual language (background/hover/active/focus/disabled from the base rule below and the composer override further down) -- only its width changes, from 100% to flex:1, since it now shares its row with .chev-btn. */ .choice-row .choice-select { flex: 1; min-width: 0; width: auto; margin-bottom: 0; } .ctitle { font-size: var(--composer-choice-font, 1rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* When expanded, line-wrap the choice title so long choice texts are not cutoff */ .choice-row.open .ctitle { white-space: normal; overflow: visible; text-overflow: clip; word-break: break-word; } .chev-btn { flex: 0 0 auto; width: 34px; align-self: stretch; background: transparent; border: none; border-left: 1px solid rgba(255, 255, 255, 0.06); color: var(--text-muted, #8a86a8); cursor: pointer; font-size: 11px; } .chev-btn:hover { background: rgba(255, 255, 255, 0.06); color: var(--text-primary, #f0ecff); } .chev-btn i { transition: transform 0.15s; display: inline-block; } .choice-row.open .chev-btn i { transform: rotate(180deg); } .choice-detail { display: none; padding: 0 12px 9px 40px; /* PARITY with the choice title (rev-f9kno.7) — same token, never a literal. */ font-size: var(--composer-choice-font, 1rem); color: var(--text-muted, #8a86a8); } .choice-row.open .choice-detail { display: block; } .choice-detail b { color: var(--text-secondary, #b8b4cf); font-weight: 600; } .choice-detail .pro { color: #86efac; } .choice-detail .con { color: #fca5a5; } .choice-button:hover { background: #e9ecef; border-color: #adb5bd; } .choice-button:active { background: #dee2e6; } /* Choice ID styling */ .choice-id { font-weight: bold; color: #0d6efd; margin-right: 0.5rem; font-family: 'Courier New', monospace; } /* Choice description */ .choice-description { color: #495057; } /* Disabled state when waiting for response */ .choice-button:disabled { opacity: 0.6; cursor: not-allowed; background: #e9ecef; } /* Custom choice button styling */ .choice-button-custom { background: linear-gradient(135deg, #f0f4ff 0%, #e0e8ff 100%); border-color: #6c757d; border-style: dashed; } .choice-button-custom:hover { background: linear-gradient(135deg, #e0e8ff 0%, #d0d8ff 100%); border-color: #495057; } .choice-button-custom .choice-id { color: #6c757d; } .choice-button-custom .choice-description { font-style: italic; color: #6c757d; } /* Custom action button - always shown at bottom of planning block choices */ .custom-action-button { background: transparent; border-style: dashed; border-color: #adb5bd; color: #6c757d; font-style: italic; margin-top: 0.25rem; } .custom-action-button:hover { background: #f8f9fa; border-color: #6c757d; color: #495057; } /* Error state for planning blocks */ .planning-block-error { background-color: #fff3cd; border: 1px solid #ffecb5; color: #856404; padding: 1rem; margin: 0.5rem 0; border-radius: 0.25rem; } .planning-block-error pre { background-color: rgba(0, 0, 0, 0.05); padding: 0.5rem; margin: 0.5rem 0; border-radius: 0.25rem; overflow-x: auto; font-size: 0.875rem; white-space: pre-wrap; word-wrap: break-word; } /* Styling for malformed content within error blocks */ .malformed-content { background-color: rgba(0, 0, 0, 0.05); padding: 0.75rem; margin: 0.5rem 0; border-radius: 0.25rem; border-left: 4px solid #ffecb5; font-family: monospace; font-size: 0.9rem; line-height: 1.4; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word; } /* Responsive design */ @media (max-width: 768px) { .choice-button { padding: 0.08rem 0.25rem; font-size: var(--composer-choice-font, 1rem); margin-right: 0.25rem; margin-bottom: 0.15rem; } .choice-id { font-size: var(--composer-choice-font, 1rem); } .planning-block-choices { padding: 0.15rem; } } /* ====================================================================== */ /* Live choices in the composer — Option C: seamless dock */ /* #composer-stack wraps #composer-choices + the #user-input input-group */ /* inside #interaction-form in ONE bordered surface with hairline */ /* dividers between rows, so picking a choice and typing free-form text */ /* visibly belong to the same control. Story history keeps its own */ /* clickable choices; only the promoted turn's in-story duplicate is */ /* hidden (see .composer-promoted below). */ /* ====================================================================== */ .composer-choices:empty { display: none; } /* Collapsed (no live choices this turn): no border, no background — the input-group underneath falls back to its normal Bootstrap look, byte-for- byte what shipped before this feature existed. */ .composer-row { margin-bottom: 0.35rem; } .composer-row > .composer-stack { margin-bottom: 0; } /* E1a action bar (rev-f9kno.5, supersedes C4's Send-only full-width-below- dock row from rev-f9kno.1): Send now lives with the avatar + mode toggles in one bar, separate from the auto-submit numbered choices above -- see the HTML comment above #composer-avatar-slot in index.html for the full rationale. Segmented-pill toggle CSS below matches the confirmed E1a mock (Claude Design project 386f01e8, e1-variations.html), adapted to real radio inputs via Bootstrap's own .btn-check pattern instead of the mock's plain