/* The assistant's panel (www/assets/assistant.js mountGuide, SPEC §8.1). build.js owns the frame around it (the 384px
 * column beside the stage on a laptop, the sheet with its handle and heights on anything narrower) and hands this file
 * the container, <section id="as-panel">, which mountGuide marks .as-root. Everything inside it is styled here and
 * nothing outside it: a header, the conversation, and a footer with the status line, the quick replies and the box.
 *
 * The rules it keeps: the front door's own type and colors (site.css's tokens; never the builder's green, which means
 * "yours to change" on the stage and nothing else), 16px in the box so a phone never zooms, 44px targets on a coarse
 * pointer, motion only in transform and opacity, and under reduced motion fades alone. Loaded on /assistant from the
 * page's head (so its column is drawn at first paint) and on /build the first time the assistant opens. */

.as-root {
  --as-pad: 20px;
  --as-rule: var(--rule, rgba(23, 21, 18, .16));
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 15px/1.55 var(--sans);
}
.as-root [hidden] { display: none !important; }
.as-root :focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.as-root svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---- the header: what this is, what reads it, and the way out ---- */
.as-root .as-head {
  flex: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 4px 6px 8px var(--as-pad);
  border-bottom: 1px solid var(--as-rule);
  box-sizing: border-box;
}
.as-root .as-head-text { min-width: 0; padding-top: 14px; }
.as-root .as-title { margin: 0; font: 400 12px/1 var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.as-root .as-ai { margin: 6px 0 0; font-size: 12px; line-height: 1.4; color: var(--ink-2); }
.as-root .as-x {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--ink-2);
  cursor: pointer;
}
.as-root .as-x svg { width: 18px; height: 18px; }
.as-root .as-x.is-done { width: auto; padding: 0 12px; font: 600 15px/1 var(--sans); color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .as-root .as-x:hover { background: var(--paper-2); color: var(--ink); } }

/* ---- the conversation: the assistant's lines plain, the buyer's to the right on a rule ---- */
.as-root .as-body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 20px var(--as-pad) 16px;
}
.as-root .as-body:focus { outline: none; }
.as-root .as-turn { display: flex; flex-direction: column; gap: 12px; }
.as-root .as-turn.is-new { animation: as-in 200ms cubic-bezier(.2, 0, 0, 1) both; }
@keyframes as-in { from { opacity: 0; transform: translateY(6px); } }
.as-root .as-line { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; text-wrap: pretty; }
.as-root .as-me {
  align-self: flex-end;
  max-width: 86%;
  padding: 2px 0 2px 14px;
  border-left: 2px solid var(--line-2);
  text-align: right;
}
.as-root .as-me .as-line { color: var(--ink); }
.as-root .as-quiet { color: var(--ink-2); font-size: 14px; }
.as-root .as-pics { display: flex; justify-content: flex-end; gap: 6px; }
.as-root .as-pics img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: 8px;
  background: repeating-conic-gradient(var(--paper-2) 0 25%, var(--paper) 0 50%) 0 0 / 12px 12px;
  box-shadow: inset 0 0 0 1px var(--as-rule);
}

/* ---- chips: the answers a tap gives ---- */
.as-root .as-chips, .as-root .as-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.as-root .as-chip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--as-rule);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  font: 500 15px/1.2 var(--sans);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.as-root .as-chip:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .as-root .as-chip:hover { border-color: var(--ink); } }
.as-root .as-chip.is-strong { border-color: var(--ink); font-weight: 600; }
.as-root .as-chip.is-go { border-color: var(--red); background: var(--red); color: #fff; font-weight: 600; }
.as-root .as-chip.is-age { min-width: 52px; font-variant-numeric: tabular-nums; }
.as-root .as-chip[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.as-root .as-chip.is-swatch { min-width: 52px; padding: 0 10px; }
/* Two colors as two discs, the main over the dark: "●●". */
.as-root .as-sw {
  flex: none;
  width: 26px;
  height: 16px;
  background:
    radial-gradient(circle at 18px 50%, var(--b) 0 6.5px, transparent 7px),
    radial-gradient(circle at 8px 50%, var(--a) 0 6.5px, transparent 7px);
  filter: drop-shadow(0 0 .5px rgba(23, 21, 18, .45));
}
.as-root .as-link {
  appearance: none;
  min-height: 36px;
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--ink-2);
  font: 600 14px/1.2 var(--sans);
  text-decoration: underline;
  text-decoration-color: var(--as-rule);
  text-underline-offset: 4px;
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) { .as-root .as-link:hover { color: var(--ink); text-decoration-color: currentColor; } }

/* ---- what a turn changed: a row per slot, each with its own Undo, then Undo all ---- */
.as-root .as-rows-head { margin: 0; font-size: 14px; color: var(--ink-2); }
.as-root .as-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--as-rule); }
.as-root .as-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  border-bottom: 1px solid var(--as-rule);
  font-size: 14px;
}
.as-root .as-row-go {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.as-root .as-row-slot, .as-root .as-row-to { flex: none; color: var(--ink-2); }
.as-root .as-row-val { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.as-root .as-row-undo { flex: none; }
.as-root .as-row-done { flex: none; font-size: 13px; color: var(--ink-2); }
.as-root .as-row.is-undone .as-row-val { font-weight: 400; color: var(--ink-2); text-decoration: line-through; text-decoration-color: var(--as-rule); }
.as-root .as-row.is-suggested { flex-wrap: wrap; gap: 0 12px; padding-bottom: 10px; }
.as-root .as-row.is-suggested .as-row-go { flex-basis: 100%; padding-bottom: 6px; }
.as-root .as-row.is-kept .as-row-val { font-weight: 400; color: var(--ink-2); }
.as-root .as-row-acts { display: flex; align-items: center; gap: 12px; }
.as-root .as-use {
  appearance: none;
  min-height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  background: var(--ink);
  color: var(--paper);
  font: 600 14px/1 var(--sans);
  cursor: pointer;
}
.as-root .as-use:active { transform: scale(.97); }
.as-root .as-all { display: flex; justify-content: flex-end; margin: -4px 0 0; }

/* ---- the order details, proposed on a card ---- */
.as-root .as-card {
  padding: 16px;
  border: 1px solid var(--as-rule);
  border-radius: 12px;
  background: var(--paper);
  box-shadow: var(--shadow-1);
  font-size: 14px;
}
.as-root .as-card-title { margin: 0 0 12px; font-weight: 600; font-size: 15px; }
/* Each detail as a small label over its value, the value the card's whole width: an address or a sign-in email reads
 * whole on one line, which is the point of the card ("check each one is exactly right"). */
.as-root .as-card dl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; margin: 0 0 12px; }
.as-root .as-card dt { color: var(--ink-2); font-size: 13px; }
.as-root .as-card dt:not(:first-child) { margin-top: 10px; }
.as-root .as-card dd { margin: 0; overflow-wrap: anywhere; font-weight: 600; }
.as-root .as-was { font-weight: 400; color: var(--ink-2); }
.as-root .as-warn { margin: 12px 0 0; padding: 8px 12px; border-radius: 8px; background: var(--red-soft); color: var(--deep); font-size: 13px; }
.as-root .as-refused { margin: 12px 0 0; color: var(--ink-2); font-size: 13px; }
.as-root .as-card-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; }
.as-root .as-card-done { margin: 0; color: var(--ink-2); font-size: 13px; }

/* ---- the footer: what is happening, the selected slot's ideas, and the box ---- */
.as-root .as-foot {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px var(--as-pad) calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--as-rule);
  background: var(--paper);
}
.as-root .as-status { display: flex; align-items: center; gap: 10px; min-height: 24px; margin: 0; font-size: 13px; color: var(--ink-2); }
.as-root .as-dots { display: inline-flex; gap: 4px; }
.as-root .as-dots i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .3; animation: as-pulse 1.2s ease-in-out infinite; }
.as-root .as-dots i:nth-child(2) { animation-delay: .15s; }
.as-root .as-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes as-pulse { 0%, 80%, 100% { opacity: .25; transform: scale(.8); } 40% { opacity: 1; transform: scale(1); } }
.as-root .as-stop { margin-left: auto; appearance: none; min-height: 32px; padding: 0 12px; border: 1px solid var(--as-rule); border-radius: 8px; background: none; color: var(--ink); font: 600 13px/1 var(--sans); cursor: pointer; }
.as-root .as-quick-label { flex-basis: 100%; margin: 0 0 -2px; font: 400 11px/1 var(--label); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.as-root .as-compose { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.as-root .as-focus {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  max-width: 100%;
  min-height: 28px;
  margin: 0;
  padding: 0 2px 0 12px;
  border-radius: 999px;
  background: var(--paper-2);
  box-shadow: inset 0 0 0 1px var(--as-rule);
  font-size: 13px;
  color: var(--ink-2);
}
.as-root .as-focus span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-root .as-focus b { font-weight: 600; color: var(--ink); }
.as-root .as-focus-x { display: grid; place-items: center; width: 32px; height: 32px; margin: -2px -2px -2px 0; border: 0; border-radius: 50%; background: none; color: var(--ink-2); cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .as-root .as-focus-x:hover { background: var(--paper); color: var(--ink); } }
.as-root .as-focus-x svg { width: 14px; height: 14px; }
.as-root .as-box {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--field-line);
  border-radius: 14px;
  background: var(--paper);
}
.as-root .as-box:focus-within { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.as-root .as-text {
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  max-height: 130px;
  margin: 0;
  padding: 11px 6px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: 400 16px/22px var(--sans);
  resize: none;
  overflow-y: hidden;
  box-sizing: border-box;
}
.as-root .as-text:focus, .as-root .as-text:focus-visible { outline: none; }
.as-root .as-text::placeholder { color: var(--ink-2); opacity: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-root .as-attach, .as-root .as-send {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  cursor: pointer;
}
.as-root .as-attach { border-radius: 10px; color: var(--ink-2); }
@media (hover: hover) and (pointer: fine) { .as-root .as-attach:hover { background: var(--paper-2); color: var(--ink); } }
.as-root .as-send { border-radius: 50%; background: var(--ink); color: var(--paper); }
.as-root .as-send svg { width: 18px; height: 18px; stroke-width: 2.4; }
.as-root .as-send:active { transform: scale(.94); }
.as-root .as-send:disabled { opacity: .35; cursor: default; transform: none; }

/* ---- a coarse pointer: every target 44px as drawn ---- */
@media (pointer: coarse) {
  .as-root .as-chip, .as-root .as-link, .as-root .as-use, .as-root .as-stop { min-height: 44px; }
  .as-root .as-link, .as-root .as-stop { min-width: 44px; }
  .as-root .as-focus-x { width: 44px; height: 44px; margin: -8px -6px -8px -4px; }
}

/* ---- a short sheet (the phone's keyboard up, or the sheet stepped down while a change lands): the header and the
 * gaps tighten so the question on screen and the chips that answer it still show above the box ---- */
.as-root.is-short .as-head { min-height: 44px; padding-top: 0; padding-bottom: 0; align-items: center; }
.as-root.is-short .as-head-text { padding-top: 0; }
.as-root.is-short .as-ai { margin-top: 2px; }
.as-root.is-short .as-body { gap: 16px; padding-top: 12px; padding-bottom: 10px; }
.as-root.is-short .as-turn { gap: 10px; }
.as-root.is-short .as-foot { gap: 8px; padding-top: 8px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }

/* ---- the phone sheet at its lowest height: the box alone ---- */
[data-detent="composer"] .as-root > .as-head,
[data-detent="composer"] .as-root .as-body,
[data-detent="composer"] .as-root .as-status,
[data-detent="composer"] .as-root .as-quick,
[data-detent="composer"] .as-root .as-focus { display: none; }
[data-detent="composer"] .as-root .as-foot { border-top: 0; padding-top: 8px; }

/* ---- reduced motion: fades, no slides, no pulse ---- */
@media (prefers-reduced-motion: reduce) {
  .as-root .as-turn.is-new { animation: as-fade 150ms linear both; }
  .as-root .as-dots i { animation: none; opacity: .6; }
  .as-root .as-chip:active, .as-root .as-use:active, .as-root .as-send:active { transform: none; }
}
@keyframes as-fade { from { opacity: 0; } }
@media (forced-colors: active) {
  .as-root .as-chip[aria-pressed="true"] { forced-color-adjust: none; border: 2px solid CanvasText; }
  .as-root .as-sw { forced-color-adjust: none; }
}