/* ACQ-RD-3 the docked assistant. Role tokens only (STYLE-BASE §11): the host's :root supplies --bg, --surface,
   --surface-2, --ink, --muted, --line, --line-strong, --accent, --on-accent, --accent-hover, --soft, --on-soft,
   --ok/--warn/--danger with -soft, --focus, --scrim, --shadow-2, --font, --mono. The host sets --assistant-w
   (its drawer width) and --assistant-top (its top bar height).
   Docked at 1280 and wider · overlay with a light scrim below · full-width sheet under 640 (AssistantDock). */

.esw-assistant {
  position: fixed; top: var(--assistant-top, 0px); right: 0; bottom: 0; z-index: 40;
  width: var(--assistant-w, 400px); max-width: 100vw;
  display: flex; flex-direction: column; min-width: 0;
  background: var(--surface); color: var(--ink); border-left: 1px solid var(--line); box-shadow: var(--shadow-2);
  font: 400 14px/1.45 var(--font);
  animation: esw-as-in 250ms ease-out;
}
@keyframes esw-as-in { from { transform: translateX(16px); opacity: 0; } to { transform: none; opacity: 1; } }
.esw-as-scrim { position: fixed; inset: var(--assistant-top, 0px) 0 0 0; z-index: 39; background: var(--scrim); }
@media (min-width: 1280px) { .esw-as-scrim { display: none; } }
@media (max-width: 639px) { .esw-assistant { width: 100%; border-left: 0; } }

.esw-as-head { display: flex; gap: 12px; align-items: flex-start; padding: 16px 16px 8px; }
.esw-as-ttl { flex: 1; min-width: 0; }
.esw-as-ttl h2 { margin: 2px 0 0; font: 600 18px/1.2 var(--font-display, var(--font)); overflow-wrap: anywhere; }
.esw-as-tabs { display: flex; gap: 8px; padding: 0 16px; border-bottom: 1px solid var(--line); }
.esw-as-tabs [role="tab"] {
  appearance: none; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  padding: 8px 12px; font: 600 14px var(--font); color: var(--muted); cursor: pointer;
}
.esw-as-tabs [role="tab"][aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.esw-as-tabs [role="tab"]:hover { color: var(--ink); }
.esw-as-body { flex: 1; overflow: auto; min-height: 0; }
.esw-as-panel { padding: 16px; }
.esw-as-panel[hidden] { display: none; }
.esw-as-foot { border-top: 1px solid var(--line); padding: 12px 16px 16px; background: var(--surface); }

.esw-kicker { display: block; font: 600 11px var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0; }
.esw-muted { color: var(--muted); }
.esw-small { font-size: 12px; }
.esw-error { color: var(--danger); }

/* Buttons: secondary by default; one primary per region; quiet has no edge. */
.esw-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 14px;
  border-radius: 8px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  font: 600 13px var(--font); cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.esw-btn:hover { background: var(--surface-2); }
.esw-btn.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.esw-btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.esw-btn.quiet { border-color: transparent; background: transparent; }
.esw-btn.quiet:hover { background: var(--surface-2); }
.esw-btn.small { height: 28px; padding: 0 10px; font-size: 12px; }
.esw-btn.icon { width: 32px; height: 32px; padding: 0; font-size: 18px; border-color: transparent; background: transparent; }
.esw-btn.icon:hover { background: var(--surface-2); }
.esw-btn:disabled { opacity: .5; cursor: default; }
.esw-link { appearance: none; background: none; border: 0; padding: 0; color: var(--accent); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.esw-chip {
  display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font: 600 12px var(--font); cursor: pointer;
}
.esw-chip:hover { background: var(--surface-2); }
.esw-chip:disabled { opacity: .5; cursor: default; }
.esw-pill { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; font: 600 11px var(--font); white-space: nowrap; }
.esw-pill.ok { background: var(--ok-soft); color: var(--ok); }
.esw-pill.warn { background: var(--warn-soft); color: var(--warn); }
.esw-pill.muted { background: var(--surface-2); color: var(--muted); }
.esw-tag { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--soft); color: var(--on-soft); font: 600 12px var(--font); text-decoration: none; }
.esw-input {
  height: 36px; min-width: 0; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line-strong);
  background: var(--bg); color: var(--ink); font: 400 14px var(--font);
}
.esw-input:focus-visible { border-color: var(--accent); }
.esw-assistant :focus-visible, .esw-inline :focus-visible, .esw-applied :focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: 2px; }
.esw-as-tabs [role="tab"]:focus-visible { outline-offset: -2px; }

/* The ask box, pinned. */
.esw-askbox { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.esw-askrow { display: flex; gap: 8px; }
.esw-askrow .esw-input { flex: 1; }
.esw-trust, .esw-meter { margin: 0; font-size: 11px; color: var(--muted); }
.esw-meter { font-variant-numeric: tabular-nums; }
.esw-meter.is-near { color: var(--warn); }
.esw-meter.is-over { color: var(--danger); }

/* The conversation. */
.esw-convo { display: flex; flex-direction: column; gap: 12px; }
.esw-context {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; align-self: flex-start; max-width: 100%;
  margin: 0; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font: 600 12px var(--font);
}
.esw-context:empty { display: none; }
.esw-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.esw-msg { display: flex; flex-direction: column; gap: 8px; max-width: 100%; }
.esw-msg.is-me { align-items: flex-end; }
.esw-bubble { margin: 0; padding: 10px 12px; border-radius: 10px; max-width: 95%; overflow-wrap: anywhere; }
.esw-msg.is-me .esw-bubble { background: var(--soft); color: var(--on-soft); border-bottom-right-radius: 4px; }
.esw-msg.is-ai .esw-bubble { background: var(--surface-2); border-bottom-left-radius: 4px; }
.esw-bubble p { margin: 4px 0; }
.esw-md > :first-child { margin-top: 0; } .esw-md > :last-child { margin-bottom: 0; }
.esw-who { display: flex; gap: 8px; align-items: center; font-size: 11px; color: var(--muted); }
.esw-who-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--accent); }
.esw-cites { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; }
.esw-cite { font-size: 12px; color: var(--accent); text-decoration: none; }
a.esw-cite:hover { text-decoration: underline; }
.esw-questions { margin: 8px 0 0; padding-left: 20px; }
.esw-questions li { margin: 8px 0; }
.esw-qa { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.esw-qa .esw-chip { height: 28px; }
.esw-new { align-self: flex-start; }

/* Restatement chips: resolved, unresolved, ambiguous. */
.esw-restate-head { margin: 0 0 4px; }
.esw-rchips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0; }
.esw-rchip {
  display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 0 10px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--surface); font: 600 12px var(--font); color: var(--ink);
}
.esw-rchip-ok { color: var(--ok); font-size: 11px; }
.esw-rchip.is-unresolved { border-style: dashed; border-color: var(--warn); color: var(--warn); }
.esw-rchip-pick { border: 0; background: transparent; color: var(--muted); font: 400 12px var(--font); }

/* The proposal card (ACQ-RD-3 §3.1). */
.esw-card {
  display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 10px;
  border: 1px solid var(--line-strong); background: var(--surface);
}
.esw-card.is-applied, .esw-card.is-undone { border-color: var(--line); }
.esw-card-kicker { display: flex; align-items: center; gap: 8px; font: 600 11px var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.esw-card-kicker > :last-child:not(:first-child) { margin-left: auto; letter-spacing: 0; text-transform: none; }
.esw-card-note { color: var(--muted); font-size: 11px; }
.esw-card-note.warn { color: var(--warn); } .esw-card-note.danger { color: var(--danger); }
.esw-card-line { margin: 0; font-size: 13px; }
.esw-card-line b { font-weight: 600; }
.esw-card-reason { margin: 0; color: var(--danger); font-size: 13px; }
.esw-card-stale { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 8px; background: var(--warn-soft); color: var(--warn); font-size: 12px; }
.esw-card-stale .esw-btn { margin-left: auto; }
.esw-card-facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; padding: 8px 12px; border-radius: 8px; background: var(--surface-2); font-size: 12px; }
.esw-card-facts dt { color: var(--muted); }
.esw-card-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.esw-card-facts dd.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.esw-card-assumed { margin: 0; padding-left: 20px; color: var(--muted); font-size: 12px; }
.esw-card-touches { display: flex; flex-wrap: wrap; gap: 8px; }
.esw-card-basis { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; font-size: 12px; color: var(--muted); }
.esw-card-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.esw-card-actions:empty { display: none; }
.esw-card-trust { margin: 0; font-size: 11px; color: var(--muted); }
.esw-card.is-dismissed { flex-direction: row; align-items: center; gap: 8px; padding: 8px 12px; border-style: dashed; border-color: var(--line-strong); color: var(--muted); font-size: 12px; }
.esw-card.is-dismissed .esw-btn { margin-left: auto; }
.esw-card-form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.esw-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.esw-field label { font: 600 12px var(--font); }
.esw-field .esw-input { height: 32px; font-size: 13px; }
.esw-hint { font-size: 12px; color: var(--muted); }
@media (max-width: 639px) { .esw-card-form { grid-template-columns: 1fr; } }

/* Set cards (§3.3). */
.esw-set { display: flex; flex-direction: column; }
.esw-set-row { display: grid; grid-template-columns: 20px 1fr auto; gap: 8px; align-items: start; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; }
.esw-set-row:first-child { border-top: 0; }
.esw-set-row input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--accent); }
.esw-set-row.is-info, .esw-set-row.is-needsperson { color: var(--muted); }
.esw-set-o { display: block; width: 16px; height: 16px; margin-top: 2px; border-radius: 999px; border: 1.5px solid var(--line-strong); }
.esw-set-row.is-needsperson .esw-set-o { border-style: dashed; border-color: var(--warn); }
.esw-set-facts { display: block; margin-top: 2px; font: 400 12px var(--mono); color: var(--muted); }

/* Inline mode and the applied list. */
.esw-inline { display: flex; flex-direction: column; gap: 12px; font: 400 14px/1.45 var(--font); color: var(--ink); }
.esw-applied { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font-size: 13px; }
.esw-applied ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.esw-applied li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.esw-applied li.is-undone .esw-applied-what { text-decoration: line-through; color: var(--muted); }
.esw-applied-what { flex: 1 1 240px; min-width: 0; }
.esw-applied-who { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .esw-assistant { animation: none; }
  .esw-btn { transition: none; }
}