/* ENG-1234 — agent focus mode and the plain-English working context review page.
   Loads after command-centre.css and context-review.css and only adds:
   - the Expand/Dock control on the quote agent and its expanded (conversation-first) layout,
   - the phone bottom sheet with a drag handle and a peek line,
   - the reference rail the quote folds into while the agent has the canvas,
   - the HITL origin card, field explainers and reviewer guide on context-review.html.
   Colour, type and spacing come from tokens.css only. */

/* --- Head controls (every width) ---------------------------------------- */
.agent-chat-head { flex-wrap: wrap; }
.agent-chat-state { margin-left: auto; }
.agent-focus-toggle { min-height: 36px; padding: 0 var(--space-3); font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); }
.agent-focus-toggle[aria-pressed="true"] { border-color: var(--accent); color: var(--accent-hover); background: var(--accent-muted); }
.agent-sheet-bar { display: none; }
.agent-chat-body-wrap { display: grid; gap: var(--space-4); min-width: 0; }
.agent-source-note { margin: 0; color: var(--text-secondary); font-size: var(--fs-caption); line-height: var(--lh-body-snug); }

/* --- Reference rail (hidden until the agent is expanded) ------------------ */
.agent-reference { display: none; min-width: 0; padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--bg-card); box-shadow: var(--elevation-2); }
.agent-reference-eyebrow { margin: 0 0 var(--space-2); font-size: var(--fs-caption); font-weight: var(--fw-bold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.agent-reference-title { margin: 0; font-size: var(--fs-h3); line-height: var(--lh-tight); overflow-wrap: anywhere; }
.agent-reference-client { margin: var(--space-1) 0 0; color: var(--text-body); font-size: var(--fs-body-sm); }
.agent-reference-meta { margin: var(--space-1) 0 0; color: var(--text-secondary); font-size: var(--fs-caption); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.agent-reference-stage { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-3) 0 0; font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--text-primary); }
.agent-reference-next { display: grid; gap: var(--space-0-5); margin: var(--space-3) 0 0; padding: var(--space-3); border-radius: var(--radius-sm); background: var(--bg-elevated); }
.agent-reference-next span { font-size: var(--fs-caption); font-weight: var(--fw-bold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.agent-reference-next strong { font-size: var(--fs-body-sm); color: var(--text-primary); }
.agent-reference-message { margin: var(--space-3) 0 0; padding: var(--space-2-5) var(--space-3); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); background: var(--accent-muted); color: var(--text-primary); font-size: var(--fs-body-sm); }
.agent-reference-activity { margin: var(--space-3) 0 0; padding: 0; list-style: none; display: grid; gap: var(--space-1); }
.agent-reference-activity li { color: var(--text-secondary); font-size: var(--fs-body-sm); }
.agent-reference-activity li::before { content: "· "; color: var(--accent); }
.agent-reference-group { margin: var(--space-3) 0 0; border-top: 1px solid var(--border); padding-top: var(--space-3); }
.agent-reference-group > summary { display: flex; align-items: center; gap: var(--space-2); min-height: var(--touch); cursor: pointer; font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); color: var(--text-primary); }
.agent-reference-count { display: inline-grid; place-items: center; min-width: 1.35rem; height: 1.35rem; padding: 0 var(--space-1-5); border-radius: var(--radius-pill); background: var(--chip-neutral-bg); border: 1px solid var(--chip-neutral-border); color: var(--text-secondary); font-size: var(--fs-label); font-variant-numeric: tabular-nums; }
.agent-reference-group ul { margin: 0; padding-left: var(--space-5); display: grid; gap: var(--space-1-5); }
.agent-reference-group li { color: var(--text-body); font-size: var(--fs-body-sm); line-height: var(--lh-body-snug); overflow-wrap: anywhere; }
.agent-reference-empty { margin: 0; color: var(--text-muted); font-size: var(--fs-body-sm); }
.agent-reference-back { width: 100%; min-height: var(--touch); margin-top: var(--space-4); }

/* --- Expanded: the conversation takes the canvas (tablet and up) ---------- */
@media (min-width: 601px) {
  [data-agent-focus-host][data-agent-focus="expanded"] .saved-quote-header { display: none; }
  [data-agent-focus-host][data-agent-focus="expanded"] .saved-quote-layout { grid-template-columns: minmax(15rem, 19rem) minmax(0, 1fr); gap: var(--space-6); }
  /* The form stays mounted so an applied suggestion still lands in its real field. */
  [data-agent-focus-host][data-agent-focus="expanded"] .saved-quote-main { display: none; }
  [data-agent-focus-host][data-agent-focus="expanded"] .agent-reference { display: block; position: sticky; top: calc(var(--global-nav-height) + var(--space-4)); order: -1; }
  [data-agent-focus-host][data-agent-focus="expanded"] .saved-quote-rail { position: static; order: 0; }
  [data-agent-focus-host][data-agent-focus="expanded"] .agent-chat { padding: var(--space-6) clamp(var(--space-5), 3vw, var(--space-10)); border-top: 0; gap: var(--space-5); }
  [data-agent-focus-host][data-agent-focus="expanded"] .agent-chat-body-wrap { max-width: 76rem; gap: var(--space-5); }
  [data-agent-focus-host][data-agent-focus="expanded"] .agent-chat-log { max-height: none; overflow: visible; gap: var(--space-4); }
  [data-agent-focus-host][data-agent-focus="expanded"] .agent-chat-turn[data-agent-turn="assistant"] { max-width: 70ch; padding: var(--space-4) var(--space-5); }
  [data-agent-focus-host][data-agent-focus="expanded"] .agent-chat-turn[data-agent-turn="user"] { max-width: 56ch; }
  [data-agent-focus-host][data-agent-focus="expanded"] .agent-chat-turn p, [data-agent-focus-host][data-agent-focus="expanded"] .agent-chat-body p { font-size: var(--fs-body-lg); }
  [data-agent-focus-host][data-agent-focus="expanded"] .agent-chat-turn[data-agent-turn="user"] p { font-size: var(--fs-body); }
  [data-agent-focus-host][data-agent-focus="expanded"] .agent-chat-idle { max-width: 60ch; font-size: var(--fs-body); }
  [data-agent-focus-host][data-agent-focus="expanded"] .agent-needs-you { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: var(--space-3); }
  [data-agent-focus-host][data-agent-focus="expanded"] .agent-suggestions { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: var(--space-3); }
  [data-agent-focus-host][data-agent-focus="expanded"] .agent-chat-form textarea { min-height: 6.5rem; font-size: var(--fs-body-lg); }
  [data-agent-focus-host][data-agent-focus="expanded"] .agent-capabilities { max-width: 70ch; }
}
@media (min-width: 601px) and (max-width: 900px) {
  [data-agent-focus-host][data-agent-focus="expanded"] .saved-quote-layout { grid-template-columns: minmax(0, 1fr); }
  [data-agent-focus-host][data-agent-focus="expanded"] .agent-reference { position: static; }
}

/* --- Phone: the agent is a bottom sheet with a peek line ------------------ */
@media (max-width: 600px) {
  [data-agent-focus-host] { padding-bottom: 5.5rem; }
  [data-agent-focus-host] .saved-quote-rail { position: fixed; inset: auto 0 var(--mobile-nav-height) 0; z-index: var(--z-sticky); order: 0; max-height: min(88dvh, calc(100dvh - var(--global-nav-height) - var(--mobile-nav-height))); display: flex; flex-direction: column; }
  [data-agent-focus-host] .agent-progress { flex: 1 1 100%; }
  [data-agent-focus-host] .agent-chat { display: flex; flex-direction: column; min-height: 0; padding: 0; border-top: 0; gap: 0; }
  [data-agent-focus-host] .agent-sheet-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--space-1) var(--space-3); padding: var(--space-2) var(--space-4) var(--space-3); flex: 0 0 auto; }
  .agent-sheet-label { display: inline-flex; align-items: center; gap: var(--space-1-5); justify-self: start; font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--text-secondary); white-space: nowrap; }
  .agent-sheet-label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--success); }
  .agent-sheet-label[data-agent-state="working"]::before { background: var(--accent); }
  .agent-sheet-handle { grid-column: 2; }
  .agent-sheet-peek { grid-column: 1 / -1; }
  .agent-sheet-handle { display: grid; place-items: center; width: 6rem; min-height: var(--touch); margin: 0; padding: 0; border: 0; background: transparent; cursor: grab; touch-action: none; }
  .agent-sheet-handle:active { cursor: grabbing; }
  .agent-sheet-handle:focus-visible { outline-offset: -6px; border-radius: var(--radius-md); }
  .agent-sheet-grip { display: block; width: 3rem; height: 5px; border-radius: var(--radius-pill); background: var(--border-strong); }
  .agent-sheet-peek { margin: 0; width: 100%; font-size: var(--fs-body-sm); line-height: var(--lh-body-snug); color: var(--text-primary); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  [data-agent-focus-host] .agent-chat-head { display: none; }
  [data-agent-focus-host] .agent-chat-body-wrap { display: none; }
  [data-agent-focus-host][data-agent-focus="expanded"] .agent-chat-head { display: flex; padding: 0 var(--space-4) var(--space-2); }
  [data-agent-focus-host][data-agent-focus="expanded"] .agent-focus-toggle { display: none; }
  [data-agent-focus-host][data-agent-focus="expanded"] .agent-sheet-peek { display: none; }
  [data-agent-focus-host][data-agent-focus="expanded"] .agent-sheet-label { visibility: hidden; }
  [data-agent-focus-host][data-agent-focus="expanded"] .agent-chat-body-wrap { display: grid; min-height: 0; padding: 0 var(--space-4) var(--space-4); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  [data-agent-focus-host][data-agent-focus="expanded"] .agent-chat-log { max-height: none; overflow: visible; }
  [data-agent-focus-host] .agent-reference { display: none; }
}

/* --- Working context review: origin, explainers, guide -------------------- */
.context-review-page { max-width: 76rem; }
.context-review-nav { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-4); font-size: var(--fs-body-sm); }
.context-review-eyebrow { margin: 0 0 var(--space-1); font-size: var(--fs-caption); font-weight: var(--fw-bold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.context-review-page h1 { margin: 0 0 var(--space-3); font-size: var(--fs-h2); line-height: var(--lh-h2); overflow-wrap: anywhere; }
.context-review-lede { margin: 0 0 var(--space-5); max-width: 68ch; color: var(--text-body); line-height: var(--lh-body); }
.context-review-origin { display: grid; gap: var(--space-2); margin: 0 0 var(--space-6); padding: var(--space-5); border: 1px solid var(--chip-warning-border); border-left: 4px solid var(--warning); border-radius: var(--radius-card); background: var(--bg-card); box-shadow: var(--elevation-1); }
.context-review-origin-eyebrow { margin: 0; font-size: var(--fs-caption); font-weight: var(--fw-bold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-warning); }
.context-review-origin h2 { margin: 0; font-size: var(--fs-h3-lg); line-height: var(--lh-tight); overflow-wrap: anywhere; }
.context-review-origin p { margin: 0; color: var(--text-body); line-height: var(--lh-body-snug); }
.context-review-origin-owner { display: inline-flex; align-items: center; gap: var(--space-1-5); padding: 0.1rem var(--space-2-5); border: 1px solid var(--chip-warning-border); border-radius: var(--radius-pill); background: var(--chip-warning-bg); color: var(--ink-warning); font-size: var(--fs-label); font-weight: var(--fw-bold); letter-spacing: 0.04em; text-transform: uppercase; justify-self: start; }
.context-review-origin-meta { color: var(--text-secondary) !important; font-size: var(--fs-caption); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.context-review-layout { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--space-6); align-items: start; }
.context-review-main { min-width: 0; }
.context-review-page form { margin-top: 0; }
.context-review-page label { gap: var(--space-1); }
.field-label { color: var(--text-primary); font-weight: var(--fw-semibold); }
.context-review-refs { display: grid; gap: var(--space-4); margin: 0; padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-panel); background: var(--bg-elevated); min-width: 0; }
.context-review-refs legend { padding: 0 var(--space-1); font-weight: var(--fw-semibold); color: var(--text-primary); }
.context-review-refs-help { margin: 0; color: var(--text-secondary); font-size: var(--fs-body-sm); line-height: var(--lh-body-snug); max-width: 68ch; }
.field-help { color: var(--text-secondary); font-size: var(--fs-body-sm); font-weight: var(--fw-regular); line-height: var(--lh-body-snug); max-width: 68ch; }
.context-review-page form button[type="submit"] { justify-self: start; margin: var(--space-2) 0 0; }
.context-review-guide { position: sticky; top: var(--space-4); display: grid; gap: var(--space-4); padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--bg-card); box-shadow: var(--elevation-2); }
.context-review-guide h2 { margin: 0; font-size: var(--fs-caption); font-weight: var(--fw-bold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.context-review-guide section { display: grid; gap: var(--space-1-5); padding-top: var(--space-3); border-top: 1px solid var(--border); }
.context-review-guide section:first-of-type { padding-top: 0; border-top: 0; }
.context-review-guide h3 { margin: 0; font-size: var(--fs-body); font-weight: var(--fw-semibold); }
.context-review-guide p, .context-review-guide li { margin: 0; color: var(--text-body); font-size: var(--fs-body-sm); line-height: var(--lh-body-snug); }
.context-review-guide ul { margin: 0; padding-left: var(--space-5); display: grid; gap: var(--space-1); }
.context-review-guide dl { display: grid; gap: var(--space-1); margin: 0; }
.context-review-guide dt { font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); color: var(--text-primary); }
.context-review-guide dd { margin: 0 0 var(--space-1); font-size: var(--fs-body-sm); color: var(--text-body); line-height: var(--lh-body-snug); }
#context-review section { display: grid; gap: var(--space-3); margin-top: var(--space-6); padding: var(--space-5); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius-card); background: var(--bg-card); }
#context-review h1 { font-size: var(--fs-h3-lg); margin: 0; }
#context-review p { margin: 0; }
#context-review [data-review-detail] { display: grid; gap: var(--space-2); }
@media (max-width: 900px) {
  .context-review-layout { grid-template-columns: minmax(0, 1fr); }
  .context-review-guide { position: static; }
}
@media (max-width: 600px) {
  .context-review-page { padding: var(--space-4); }
  .context-review-origin { padding: var(--space-4); }
  .context-review-origin h2 { font-size: var(--fs-h3); }
  .context-review-page form button[type="submit"], .context-review-page #context-review button { width: 100%; margin-inline: 0; }
}