/* The Build chat (plan 27, phase U): answers, guidance, refusals, buttons and charts.

   A token added by the plan-36 design refresh (docs/design-tokens.md) carries its older value as the fallback,
   because universal_chat.js injects this sheet on pages that load report.css's tokens and not styles.css's.

   Every colour is a token of styles.css's bare :root (one committed palette, no OS dark mode: plan 27 phase U;
   tests/test_ui_assets.py checks it). Every font size is at least 12px (the browser run read 11px as too small), so chart text stays readable at 375 px:
   chart text is HTML, not SVG text, so it never shrinks with a viewBox. Wide content scrolls inside its own box,
   never the page. */

.msg.agent.ca-msg .bubble{max-width:100%; width:100%; min-width:0}
/* styles.css sets the author label at 11.5px and the lineage pill at 11px; in the chat both are 12px (browser run) */
.ca-msg .who{font-size:12px}
.ca-msg .lin, .ca-chart .lin{font-size:12px}
.ca-answer, .ca-envelope{min-width:0}
.ca-intro{margin:0 0 8px; color:var(--ink)}
.ca-claim{margin:0 0 8px; padding-left:10px; border-left:2px solid var(--accent); overflow-wrap:anywhere}
.ca-claim[data-lineage="estimate"], .ca-claim[data-lineage="reported"]{border-left-style:dashed}
.ca-refusal{margin:0 0 8px; color:var(--ink2); overflow-wrap:anywhere}
.ca-notice{margin:8px 0 0; font-size:12.5px; color:var(--ink-muted, var(--ink3))}
.ca-notice[data-severity="warning"]{color:var(--bad)}
.ca-progress{margin:0; color:var(--ink-muted, var(--ink3)); font-size:13px}
.ca-steps{margin:6px 0 0; padding-left:18px; font-size:12.5px; color:var(--ink-muted, var(--ink3))}

/* guidance: a hypothesis, drawn apart from every measured value */
.ca-advice{margin:10px 0; padding:10px 12px; border:1px dashed var(--warn-line, var(--amber)); border-radius:var(--r-md, 8px); background:var(--warn-soft, var(--amber-soft))}
.ca-advice p{margin:6px 0 0; overflow-wrap:anywhere}
.ca-advice-table{border-collapse:collapse; margin:6px 0 0; font-size:12.5px}
.ca-advice-table th, .ca-advice-table td{border:0; border-bottom:1px solid var(--line); padding:4px 8px 4px 0; text-align:left; vertical-align:top}
.ca-advice-table th{font-weight:500; color:var(--ink2)}
.ca-guidance{display:inline-block; font-family:var(--mono); font-size:12px; letter-spacing:.04em; padding:2px 7px;
  border:1px solid var(--amber); border-radius:var(--r-pill, 999px); color:var(--ink2); background:var(--card)}
.ca-evidence{list-style:none; margin:8px 0 0; padding:0; font-size:12.5px; color:var(--ink2)}
.ca-evidence-head{font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-muted, var(--ink3))}
/* the expert note (ui/expert_note_routes.py): model prose the server checked, drawn apart from the answer above */
.ca-expert{margin:12px 0 0; padding:10px 12px; border:1px dashed var(--warn-line, var(--amber)); border-left:2px solid var(--amber);
  border-radius:var(--r-md, 8px); background:var(--card)}
.ca-expert-title{margin:0; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--ink2)}
.ca-expert-caveat{margin:4px 0 0; font-size:12px; color:var(--ink-muted, var(--ink3)); overflow-wrap:anywhere}
.ca-expert-text{margin:8px 0 0; color:var(--ink); overflow-wrap:anywhere; white-space:normal}

.ca-facts{margin:0 0 8px; padding-left:18px}
.ca-fact{margin:3px 0; overflow-wrap:anywhere}
.ca-item-facts h4{margin:10px 0 4px; font-size:13px}
.ca-links{display:flex; gap:10px; flex-wrap:wrap; margin:8px 0 0}
.ca-link{color:var(--accent-ink)}
.ca-nexts{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.ca-next, .ca-retry, .ca-button, .ca-mode{
  font-family:inherit; font-size:13px; font-weight:500; padding:6px 12px; border-radius:var(--r-md, 8px); border:1px solid var(--line); background:var(--card);
  color:var(--ink); cursor:pointer; min-height:32px; box-shadow:var(--shadow-xs, none);
  transition:border-color var(--dur-fast, 150ms) var(--ease, ease), color var(--dur-fast, 150ms) var(--ease, ease), background var(--dur-fast, 150ms) var(--ease, ease)}
.ca-next:hover, .ca-button:hover, .ca-mode:hover{border-color:var(--accent-line, var(--accent)); color:var(--accent-ink); background:var(--paper2, var(--paper))}
.ca-mini{font-size:12px; padding:3px 8px; min-height:28px}

/* the bar above the composer while a Build is open */
/* .ca-controls takes the composer's own column (styles.css `.composer > *`); inside it, the modes and buttons are one
   row (.ca-strip) that scrolls sideways, so on a phone the bar and the composer do not take half the screen, and
   the wait notice is its own wrapping line above that row, always in view */
.ca-controls{margin-bottom:8px; min-width:0}
.ca-strip{display:flex; gap:8px; flex-wrap:nowrap; align-items:center; overflow-x:auto;
  scrollbar-width:thin; -webkit-overflow-scrolling:touch}
.ca-strip > *{flex:none}
.ca-wait{margin:0 0 6px; font-size:12.5px; color:var(--ink2); white-space:normal; overflow-wrap:anywhere}
.dc-composer .cred-warn{margin:6px 0 0; font-size:12.5px; color:var(--bad); overflow-wrap:anywhere}
/* Build-chat mode: the starter prompts and the planner's hint belong to "New model"; hiding them at mount also
   keeps the bar from jumping when the thread fills (the browser run lost clicks to that jump) */
.composer[data-chat="build"] .suggest{display:none}
.ca-modes{display:inline-flex; gap:2px; padding:2px; border:1px solid var(--border, var(--line)); border-radius:var(--r-md, 8px); background:var(--paper2, var(--paper))}
.ca-mode{border:0; border-radius:var(--r-sm, 6px); background:transparent; box-shadow:none}
.ca-mode[aria-pressed="true"]{background:var(--card); color:var(--accent-ink); font-weight:600; box-shadow:var(--shadow-xs, none)}
.ca-buttons{display:flex; gap:6px; flex-wrap:nowrap}
@media (max-width: 520px){ .ca-next, .ca-button, .ca-mode{padding:4px 9px; min-height:30px} }

/* charts */
.ca-chart-block{margin:8px 0}
.ca-chart-caption{margin:0 0 4px; font-size:13px; color:var(--ink2)}
.ca-chart-slot{font-size:12.5px; color:var(--ink-muted, var(--ink3)); padding:10px 0}
.ca-chart{margin:8px 0; padding:12px 14px; border:1px solid var(--border, var(--line)); border-radius:var(--r-lg, 12px); background:var(--card); box-shadow:var(--shadow-xs, none);
  min-width:0; max-width:100%; font-size:12.5px}
.ca-chart figcaption{display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; margin-bottom:8px}
.ca-chart-title{font-weight:600; font-size:13px; overflow-wrap:anywhere}
.ca-chart-lin{font-size:12px; color:var(--ink-muted, var(--ink3))}
.ca-chart-note{margin:6px 0 0; font-size:12px; color:var(--ink2)}
.ca-chart-refused .ca-chart-note{color:var(--ink-muted, var(--ink3))}
.ca-axis-title{margin:0 0 4px; font-size:12px; color:var(--ink-muted, var(--ink3))}
.ca-scroll{overflow-x:auto; max-width:100%}
.ca-rows{display:grid; gap:10px}
.ca-row{min-width:0}
.ca-row-head{display:flex; flex-wrap:wrap; gap:4px 8px; align-items:baseline}
.ca-row-name{font-weight:600; overflow-wrap:anywhere}
.ca-row-meta{font-size:12px; color:var(--ink-muted, var(--ink3))}
.ca-row-foot{display:flex; flex-wrap:wrap; gap:2px 10px; font-size:12px; color:var(--ink2)}
.ca-gate{font-size:12px; padding:1px 6px; border-radius:var(--r-pill, 999px); border:1px solid var(--line)}
.ca-gate[data-gate="passes"]{color:var(--ok); border-color:var(--ok); background:var(--ok-soft)}
.ca-gate[data-gate="fails"]{color:var(--bad); border-color:var(--bad); background:var(--bad-soft)}
.ca-iv[data-verdict="worse"]{color:var(--bad)}
.ca-iv[data-verdict="better"]{color:var(--ok)}

/* fixed arm and number columns: every bar of a chart is drawn on one track width, so lengths compare (an auto
   number column made B0 = 1 look longer than V = 0.9946 in the browser run) */
.ca-bar[data-arm]{display:grid; grid-template-columns:28px minmax(40px, 1fr) 64px; gap:6px; align-items:center; margin:2px 0}
.ca-bar-arm{font-family:var(--mono); font-size:12px; color:var(--ink-muted, var(--ink3))}
.ca-bar-track{position:relative; height:8px; border-radius:var(--r-pill, 999px); background:var(--line2); min-width:0}
.ca-bar-track i{position:absolute; left:0; top:0; bottom:0; border-radius:var(--r-pill, 999px); background:var(--accent)}
.ca-bar[data-arm="B0"] .ca-bar-track i{background:var(--ink3)}
.ca-bar-num{font-family:var(--mono); font-size:12px; overflow-wrap:anywhere}
.ca-floor{position:absolute; top:-3px; bottom:-3px; width:2px; margin-left:-1px; background:var(--bad)}
.ca-floor-text{color:var(--bad)}

/* as many columns as fit at 220px each: a column never gets so narrow that its bars' tracks reach 0 px (the canvas
   open at 901-1045 px squeezed three fixed columns) */
.ca-span-cols{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:4px 12px}
.ca-col-name{font-size:12px; color:var(--ink-muted, var(--ink3))}

.ca-confusion{border-collapse:collapse; font-family:var(--mono); font-size:12px}
.ca-confusion th{font-weight:600; padding:4px 8px; text-align:center; color:var(--ink2)}
.ca-confusion td{padding:6px 10px; text-align:center; border:1px solid var(--line2);
  background:color-mix(in srgb, var(--accent) calc(var(--a, 0) * 55%), transparent)}
.ca-confusion td.ca-diag{outline:2px solid var(--ok); outline-offset:-2px}
/* Contract v11: an analysis is drawn by report_render.js (report.css's dc-* rules); its frame only here. */
.ca-generic{margin:6px 0}

.ca-timeline{display:grid; gap:6px}
.ca-track{display:grid; grid-template-columns:120px minmax(0, 1fr); gap:8px; align-items:center}
.ca-track-name{font-size:12px; overflow-wrap:anywhere}
.ca-arm{font-family:var(--mono); font-size:12px; color:var(--ink-muted, var(--ink3))}
.ca-lane{position:relative; height:22px; border-radius:var(--r-sm, 6px); background:var(--line2); overflow:hidden; min-width:0}
.ca-span{position:absolute; top:2px; bottom:2px; min-width:2px; border-radius:3px; background:var(--accent);
  color:var(--paper2, var(--paper)); font-size:12px; line-height:18px; overflow:hidden; white-space:nowrap}
.ca-span span{padding:0 3px}
.ca-track[data-arm="T"] .ca-span{background:var(--ok)}
.ca-track[data-arm="B0"] .ca-span{background:var(--ink3)}
.ca-empty{font-size:12px; color:var(--ink-muted, var(--ink3)); padding-left:6px; line-height:22px}
.ca-tl-axis{position:relative; height:16px; margin-left:calc(120px + 8px); font-size:12px; color:var(--ink-muted, var(--ink3))}
.ca-tick{position:absolute; transform:translateX(-50%); white-space:nowrap}
@media (max-width: 520px){
  .ca-track{grid-template-columns:minmax(0, 1fr)}
  .ca-tl-axis{margin-left:0}
}

.ca-worst-list{margin:0; padding-left:0; list-style:none; display:grid; gap:6px}
.ca-worst{display:grid; grid-template-columns:minmax(0, 7em) minmax(0, 1fr); gap:2px 8px; align-items:center}
.ca-worst .ca-bar{grid-column:2}
.ca-item{font-family:var(--mono); font-size:12px; overflow-wrap:anywhere}
.ca-diff{grid-column:2; font-size:12px; color:var(--ink-muted, var(--ink3))}
.ca-worst-acts{grid-column:2; display:flex; gap:8px; flex-wrap:wrap; align-items:center; font-size:12px}

.ca-legend{margin:0 0 6px; display:flex; flex-wrap:wrap; gap:4px 12px; font-size:12px}
.ca-key::before{content:""; display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:5px;
  vertical-align:-1px; background:var(--accent)}
.ca-key[data-arm="B0"]::before{background:var(--ink3)}
.ca-key[data-i="1"]::before{background:var(--run2)}
.ca-key[data-i="2"]::before{background:var(--run3)}
.ca-key[data-i="3"]::before{background:var(--run4)}
.ca-hist{display:flex; gap:3px; align-items:flex-end; height:120px; min-width:0}
.ca-bin{flex:1 1 0; min-width:0; display:flex; flex-direction:column; height:100%}
.ca-bin-bars{flex:1; display:flex; gap:1px; align-items:flex-end}
.ca-hbar{flex:1; min-height:1px; background:var(--accent); border-radius:2px 2px 0 0}
.ca-hbar[data-arm="B0"]{background:var(--ink3)}
.ca-bin-lo{font-size:12px; color:var(--ink-muted, var(--ink3)); overflow:hidden; white-space:nowrap}

.ca-plot{position:relative; height:160px; margin-left:3.5em; border-left:1px solid var(--line); border-bottom:1px solid var(--line)}
.ca-loss{width:100%; height:100%; display:block}
.ca-line{fill:none; stroke:var(--accent); stroke-width:2; vector-effect:non-scaling-stroke}
.ca-line[data-i="1"]{stroke:var(--run2)} .ca-line[data-i="2"]{stroke:var(--run3)} .ca-line[data-i="3"]{stroke:var(--run4)}
.ca-y{position:absolute; left:-3.5em; width:3.2em; text-align:right; font-family:var(--mono); font-size:12px; color:var(--ink-muted, var(--ink3))}
.ca-y-hi{top:-6px} .ca-y-lo{bottom:-6px}
.ca-x{display:flex; justify-content:space-between; margin:8px 0 0 3.5em; font-size:12px; color:var(--ink-muted, var(--ink3))}

.ca-runs{display:grid; gap:6px}
.ca-run{display:grid; grid-template-columns:minmax(0, 1fr); gap:2px}
.ca-run.ca-this .ca-run-name{font-weight:600}
.ca-run-name{font-size:12px; overflow-wrap:anywhere}
.ca-run-cost{font-size:12px; color:var(--ink-muted, var(--ink3))}
.ca-overview{display:grid; gap:8px}
.ca-overview .ca-chart{margin:0}

/* plan 36 U1: the universal chat on the pages that had none (universal_chat.js): no "New model" mode there (no
   planner on those pages), and the panel's own layout */
.uc{max-width:1080px; margin:24px auto 0; border-top:1px solid var(--border, var(--line)); padding-top:16px}
.uc .ca-mode[data-mode="new"]{display:none}
.uc-thread{max-height:60vh; overflow:auto}
.uc-composer .composerow{display:flex; gap:8px}
.uc-composer textarea{flex:1; font:inherit; resize:none; padding:8px 10px; border-radius:var(--r-md, 8px); border:1px solid var(--line); background:var(--card); color:var(--ink)}
.uc-composer textarea:focus{outline:2px solid transparent; border-color:var(--accent); box-shadow:var(--focus-ring, none)}
.uc-send{flex:none; align-self:flex-end; min-height:36px; padding:7px 14px; font:inherit; font-size:13px; font-weight:500;
  border:1px solid var(--accent); border-radius:var(--r-md, 8px); background:var(--accent); color:var(--card); cursor:pointer;
  box-shadow:var(--shadow-xs, none); transition:background var(--dur-fast, 150ms) var(--ease, ease)}
.uc-send:hover{background:var(--accent-ink); border-color:var(--accent-ink)}
.ca-page-links{display:flex; flex-wrap:wrap; gap:6px}
.ca-card{display:inline-flex; gap:4px; align-items:center}
.ca-embedded{margin:8px 0}

/* plan 37 F2: the home agent (home_agent.js), its own section above the start card on the empty home. Its turns,
   the server's fact chips (each with its lineage label), the upload drop zone, the profile, the proposal card and
   the Build's live status. Wide content (the column table) scrolls in its own box; nothing scrolls the page. */
.ha-home{min-width:0; margin-bottom:24px}
.ha-title{font-size:22px; font-weight:600; line-height:1.25; margin:0 0 6px; text-align:center; overflow-wrap:anywhere}
.ha-sub{margin:0 auto 12px; max-width:58ch; text-align:center; color:var(--ink2); font-size:14px}
.ha-home .sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0, 0, 0, 0); white-space:nowrap}
.ha-thread{min-width:0}
.ha-thread .msg .bubble{max-width:100%; min-width:0}
/* the bubble's wrapper is the .msg flex item: it must be able to shrink, or the column table widens the page */
.ha-msg > div{min-width:0; max-width:100%}
.ha-msg.agent > div{width:100%}
.ha-msg.agent .bubble{width:100%}
/* plan 39 O1: a stored turn no person wrote, with its author chip */
.ha-author{display:inline-block; margin:0 0 6px; padding:0 6px; border:1px solid var(--line); border-radius:var(--r-pill, 999px);
  color:var(--ink2); font-size:12px}
.ha-composer{margin:0 0 8px}
.ha-turn{min-width:0; overflow-wrap:anywhere}
.ha-text p{margin:0 0 8px}
.ha-draft-text p{margin:0 0 8px}       /* the streamed draft in the card's blocks (home_agent.js renderDraft) */
.ha-text .fact{display:inline-flex; align-items:baseline; gap:4px; padding:0 6px; border:1px solid var(--line); border-radius:var(--r-sm, 6px);
  background:var(--paper); font-family:var(--mono); font-size:13px}
.ha-text .fact small{font-family:var(--mono); font-size:12px; padding:0 5px; border:1px solid var(--accent); border-radius:var(--r-pill, 999px); color:var(--accent-ink)}
.ha-text .fact[data-label="measured"] small{background:var(--accent); color:var(--card)}
.ha-text .fact[data-label="reported"] small{border-style:dashed; border-color:var(--line); color:var(--ink2)}
.ha-text .fact[data-label="estimate"] small{border-style:dashed}
.ha-block{margin:10px 0 0; padding:12px; border:1px solid var(--border, var(--line)); border-radius:var(--r-lg, 12px); background:var(--card);
  box-shadow:var(--shadow-xs, none); min-width:0}
.ha-block[hidden]{display:none}
.ha-h{margin:0 0 8px; font-size:13px; font-weight:600; color:var(--ink2); overflow-wrap:anywhere}
.ha-says{margin:0 0 8px}
.ha-k{color:var(--ink2); font-size:13px; margin:8px 0 4px}
.ha-rows{margin:0 0 8px}
.ha-unmeasured{color:var(--ink-muted, var(--ink3))}
.ha-name{font-family:var(--mono); font-size:13px; overflow-wrap:anywhere}
.ha-more{color:var(--ink-muted, var(--ink3)); font-size:12px}
.ha-cols{overflow-x:auto; max-height:240px; overflow-y:auto}
.ha-cols table{border-collapse:collapse; font-size:13px; min-width:100%}
.ha-cols th, .ha-cols td{text-align:left; padding:4px 8px 4px 0; border-bottom:1px solid var(--line2); white-space:nowrap}
.ha-targets{margin:0; padding-left:18px; font-size:13px}
.ha-drop{display:flex; flex-direction:column; gap:2px; align-items:center; justify-content:center; padding:16px; text-align:center;
  border:1.5px dashed var(--accent); border-radius:var(--r-md, 8px); background:var(--paper); cursor:pointer; position:relative; min-height:44px}
.ha-drop:hover, .ha-upload[data-over="1"] .ha-drop{background:var(--accent-soft)}
.ha-drop:focus-within{outline:2px solid var(--accent); outline-offset:2px}
.ha-drop-k{font-weight:500; color:var(--accent-ink)}
.ha-drop-d{font-size:12px; color:var(--ink-muted, var(--ink3))}
.ha-file{position:absolute; width:1px; height:1px; opacity:0; overflow:hidden}
.ha-upload[data-state="uploading"] .ha-drop, .ha-upload[data-state="done"] .ha-drop{cursor:default; opacity:.6}
.ha-status{margin:8px 0 0; font-size:13px; color:var(--ink2)}
.ha-status:empty{display:none}
.ha-status[data-severity="warning"]{color:var(--bad)}
.ha-dl{display:grid; grid-template-columns:max-content minmax(0, 1fr); gap:4px 12px; margin:0; font-size:14px}
.ha-dl dt{color:var(--ink2)}
.ha-dl dd{margin:0; min-width:0; overflow-wrap:anywhere}
.ha-why{color:var(--ink2)}
.ha-actions{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:12px}
.ha-approve{min-height:36px}
.ha-approve[disabled]{opacity:.6; cursor:progress}
.ha-note{font-size:12px; color:var(--ink-muted, var(--ink3))}
.ha-started{font-weight:600; color:var(--ok)}
.ha-superseded{font-weight:600; color:var(--ink2)}
.ha-proposal[data-state="superseded"] .ha-dl{opacity:.6}
.ha-build{border-left:2px solid var(--accent)}
.ha-build[data-status="error"]{border-left-color:var(--bad)}
.ha-build-state{margin:0 0 6px}
.ha-link{color:var(--accent-ink)}
/* a Hermes turn: a card already on the page, pointed back to; the first rows of a table */
.ha-see-above{margin:8px 0 0}
.ha-see-above .ha-link{background:none; border:0; padding:0; font:inherit; cursor:pointer; text-decoration:underline}
.ha-preview td{font-variant-numeric:tabular-nums; white-space:nowrap}
.ha-followup{display:block; margin-top:10px}
/* plan 37 F8: what feature_importance measured */
.ha-analysis{overflow-x:auto}
.ha-analysis .ha-sub{margin:8px 0 4px; font-size:13px; color:var(--ink2)}
.ha-table{border-collapse:collapse; font-size:13px; min-width:100%}
.ha-table th, .ha-table td{text-align:left; padding:4px 8px 4px 0; border-bottom:1px solid var(--line2); vertical-align:top}
.ha-table th{font-weight:500; color:var(--ink2)}
.ha-table .ha-name{overflow-wrap:anywhere}
.ha-interval{white-space:nowrap}
.ha-fit{margin:10px 0 6px; font-size:13px}
.ha-analysis .ha-link{display:inline-block; margin:6px 12px 0 0; font-size:13px}
.ha-analysis .ha-note{display:block; margin:0 0 4px}
.ha-findings{border-left:2px solid var(--accent)}
.ha-finding{margin:4px 0; font-size:14px; overflow-wrap:anywhere}
.ha-composed{margin:2px 0 6px; font-size:12px; font-style:italic}
/* Plan 39 M1b: a note the agent proposes (its exact text, kept lines), Remember / Not now, and the project's notes chip */
.ha-note-proposal{border-left:2px solid var(--accent)}
.ha-note-text{margin:0 0 8px; padding:8px 10px; border-radius:var(--r-md, 8px); background:var(--paper); font-size:14px;
  white-space:pre-wrap; overflow-wrap:anywhere; max-height:320px; overflow-y:auto}
.ha-note-current{border:1px dashed var(--line)}
.ha-note-from, .ha-note-replaces{display:block; margin:8px 0 0}
.ha-remember, .ha-not-now{min-height:36px}
.ha-remember[disabled]{opacity:.6; cursor:progress}
.ha-unavailable .ha-status{margin:0}
.ha-empty{color:var(--ink2)}
.ha-notes{margin:0 0 10px; min-width:0}
.ha-notes[hidden], .ha-notes-chip[hidden], .ha-notes-panel[hidden]{display:none}
.ha-notes-chip{min-height:36px}
.ha-notes-chip:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.ha-notes-panel{margin-top:8px; padding:12px; border:1px solid var(--border, var(--line)); border-radius:var(--r-lg, 12px);
  background:var(--card)}
.ha-notes-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.ha-notes-top{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-bottom:4px}
/* Plan 39 M2a: edit, delete and export notes; the forget card. */
.ha-my-notes{margin:0 0 10px; min-width:0}
.ha-my-notes-chip, .ha-note-edit, .ha-note-delete, .ha-note-save, .ha-note-cancel, .ha-note-delete-yes,
  .ha-note-delete-no, .ha-forget, .ha-forget-keep{min-height:36px}
.ha-my-notes-chip:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.ha-note-actions{flex-wrap:wrap}
.ha-note-box{display:block; width:100%; box-sizing:border-box; margin:0 0 8px; font:inherit; font-size:14px; padding:8px 10px;
  border:1px solid var(--border, var(--line)); border-radius:var(--r-md, 8px); background:var(--paper); color:inherit}
.ha-note-text[hidden]{display:none}
.ha-notes-export{display:inline-block; margin-top:10px; font-size:13px}
.ha-note-forget{border-left:2px solid var(--warn, var(--accent))}
.ha-forget[disabled], .ha-note-save[disabled], .ha-note-delete-yes[disabled]{opacity:.6; cursor:progress}
.ha-note-deleted .ha-status{margin:0}
/* Plan 37 F10: one box. Bound to the page's composer, the agent is only the conversation; an upload limit's lineage
   is one quiet note, not a chip; "+ Data" is a two-item menu above the box; the storage form is a card. */
.ha-home[data-bound="1"]{margin-bottom:8px}
.ha-home[data-bound="1"]:empty, .ha-home[data-bound="1"] .ha-thread:empty{display:none}
.ha-limit .num{font-family:inherit}
.ha-limit-note{color:var(--ink-muted, var(--ink3))}
.ha-data-menu{display:flex; flex-direction:column; gap:2px; padding:6px; margin-bottom:8px; border:1px solid var(--border, var(--line));
  border-radius:var(--r-lg, 12px); background:var(--card); box-shadow:var(--shadow-md, none)}
.ha-data-item{display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:left; padding:8px 10px; border:0;
  border-radius:var(--r-md, 8px); background:transparent; color:var(--ink); cursor:pointer; font:inherit; min-height:44px}
.ha-data-item:hover, .ha-data-item:focus-visible{background:var(--accent-soft)}
.ha-data-k{font-weight:500}
.ha-data-d{font-size:12px; color:var(--ink-muted, var(--ink3))}
.ha-quiet{display:inline-block; margin-top:8px; font-size:12px}
.sc-ask{margin:0 0 6px; font-weight:500}
.sc-providers{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px}
.sc-provider[aria-pressed="true"]{border-color:var(--accent); color:var(--accent-ink); background:var(--accent-soft)}
.sc-form{display:flex; flex-direction:column; gap:8px; min-width:0}
.sc-row{display:flex; flex-direction:column; gap:2px; min-width:0}
.sc-label{font-size:12px; color:var(--ink2)}
.sc-input{width:100%; min-width:0; box-sizing:border-box; padding:8px 10px; border:1px solid var(--line); border-radius:var(--r-md, 8px);
  background:var(--paper); font:inherit; font-size:14px; color:var(--ink)}
.sc-input:focus{outline:2px solid var(--accent); outline-offset:1px}
.sc-hint{margin:0; font-size:12px; color:var(--ink-muted, var(--ink3))}
.sc-actions{display:flex; gap:8px}
.sc-status{margin:0; font-size:13px; color:var(--ink2)}
.sc-status:empty{display:none}
.sc-status[data-severity="warning"]{color:var(--bad)}
.hero-alt{margin:10px 0 0; font-size:13px; color:var(--ink-muted, var(--ink3)); text-align:center}
/* Plan 38 P1b: the home's project list (links that carry the project's id), a project's header, its notices. */
.hp-list{margin:4px 0 12px; min-width:0}
.hp-list-top{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px}
.hp-list-title{font-size:15px; font-weight:600; margin:0}
.hp-rows{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px}
.hp-row{display:flex; flex-direction:column; justify-content:center; gap:2px; min-height:44px; padding:6px 10px; min-width:0;
  border-radius:var(--r-md, 8px); color:var(--ink); text-decoration:none}
.hp-row:hover{background:var(--accent-soft)}
.hp-row:focus-visible{outline:2px solid var(--accent); outline-offset:1px; background:var(--accent-soft)}
.hp-row-title{font-weight:500; overflow-wrap:anywhere}
.hp-row-meta{font-size:12px; color:var(--ink-muted, var(--ink3))}
.hp-guided-list{margin-top:12px}
.hp-guided-title{font-size:13px; margin:0 0 4px}
.hp-status{margin:0 0 6px; font-size:13px; color:var(--ink2)}
.hp-status:empty{display:none}
.hp-head{display:flex; flex-direction:column; gap:2px; margin:0 0 10px; min-width:0}
.hp-title{font-size:18px; font-weight:600; margin:0; overflow-wrap:anywhere}
.hp-back{font-size:13px; color:var(--accent-ink)}
.hp-back:focus-visible, .hp-new:focus-visible, .hp-earlier:focus-visible, .hp-retry:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.hp-missing, .hp-failed{margin:0 0 10px; font-size:14px; color:var(--bad)}
.hp-earlier{display:block; margin:0 auto 10px; min-height:44px}
@media (max-width: 560px){
  .ha-dl{grid-template-columns:minmax(0, 1fr)}
  .ha-dl dd{margin-bottom:6px}
  .hp-new{min-height:44px}
}

/* Gated private-project controls use native form elements and text-only notices. */
.hp-visibility-label{display:flex; align-items:center; flex-wrap:wrap; gap:6px; font-size:13px}
.hp-new-visibility{min-height:44px; max-width:100%; color:var(--ink); background:var(--card)}
.hp-visibility{font-size:12px; color:var(--ink-muted, var(--ink3))}
.hp-change-visibility{align-self:flex-start; min-height:44px}
.hp-share-confirm{margin:6px 0; padding:8px; border-left:2px solid var(--accent); font-size:13px}
.hp-share-confirm p{margin:0 0 8px}
.hp-share-confirm button{min-height:44px; margin-right:6px}
.hp-visibility-status{font-size:13px; overflow-wrap:anywhere}
.hp-visibility-status:empty{display:none}

.hp-personal-settings{display:flex; flex-direction:column; align-items:flex-start; gap:8px}
.hp-personal-settings .btn{min-height:44px}
.hp-personal-confirm{max-width:60ch}