/* P2 controls: the design-system boards, on the console's existing tokens. */
.ui-segs {
  display: inline-flex;
  /* The track's own width, even in a column that stretches its children. */
  width: fit-content;
  max-width: 100%;
  gap: 2px;
  padding: 3px;
  border-radius: var(--radius-lg);
  background: var(--track);
}
.ui-seg {
  box-sizing: border-box;
  height: var(--size-control-sm);
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  font: var(--type-body-strong-weight) var(--type-small-size)/1 var(--font-sans);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--motion-duration), background-color var(--motion-duration);
}
.ui-seg:hover { color: var(--ink); }
.ui-seg-on { color: var(--ink); background: var(--surface); box-shadow: 0 0 0 1px var(--line), var(--shadow-lift); }

/* The field edge covers the input row alone. Error words take their own row underneath it. */
.ui-field {
  --field-height: var(--size-control);
  position: relative;
  display: grid;
  grid-template-columns: calc(var(--space-4) + var(--space-5) / 2) minmax(0, 1fr);
  column-gap: var(--space-2);
  align-items: center;
  width: 260px;
  max-width: 100%;
  min-width: 0;
  color: var(--ink);
  font: var(--type-body-weight) var(--type-body-size)/var(--type-body-leading) var(--type-body-family);
}
.ui-field::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  box-sizing: border-box;
  height: var(--field-height);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  pointer-events: none;
  transition: border-color var(--motion-duration);
}
.ui-field-row { --field-height: var(--size-row); }
/* The large form (design d5b00734c; RD 10-02): the page's single act. The field-lg rung keeps its text at 16 px, so
   a phone never zooms on focus; full width; the scheme where the icon was; --edge once filled; an ink edge under the
   one focus ring every control shares when focused, never a halo. */
.ui-field-lg {
  --field-height: var(--size-control-lg);
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--space-1);
  width: 100%;
  font: var(--type-field-lg-weight) var(--type-field-lg-size)/var(--type-field-lg-leading) var(--type-field-lg-family);
}
.ui-field-lg::before { border-radius: var(--radius-xl); }
.ui-field.ui-field-lg > input { padding: 0 var(--space-4) 0 0; border-radius: var(--radius-xl); }
.ui-field-scheme {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  padding-left: var(--space-4);
  color: var(--faint);
  pointer-events: none;
}
.ui-field-lg:not(.ui-field-error):has(> input:not(:placeholder-shown))::before { border-color: var(--edge); }
.ui-field-lg:not(.ui-field-error):has(> input:focus)::before { border-color: var(--ink); }
.ui-field-bar {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--space-2) + var(--space-1) / 2);
  width: 100%;
  min-width: 0;
}
.ui-field-bar > .ui-field { flex: 1 1 auto; }
.ui-field-go { flex: none; }
.ui-field > .ic {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  justify-self: end;
  width: var(--space-4);
  height: var(--space-4);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--faint);
  pointer-events: none;
}
.ui-field > input {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: var(--field-height);
  margin: 0;
  padding: 0 calc(var(--space-5) / 2) 0 0;
  border: 0;
  border-radius: var(--radius-md);
  outline: none;
  background: transparent;
  color: var(--ink);
  font: inherit;
  appearance: none;
}
.ui-field > input::placeholder { color: var(--faint); opacity: 1; }
.ui-field > input::-webkit-search-cancel-button { appearance: none; }
.ui-field:has(> input:focus-visible)::before { outline: var(--focus-width) solid var(--focus-color); outline-offset: var(--focus-offset); }
.ui-field-error::before { border-color: var(--neg); }
.ui-field-msg {
  grid-column: 1 / -1;
  margin: var(--space-1) 0 0;
  color: var(--neg);
  font: var(--type-small-weight) var(--type-small-size)/var(--type-small-leading) var(--type-small-family);
  overflow-wrap: anywhere;
}
.v2-btn-lg { height: var(--size-control-lg); padding-inline: var(--space-5); border-radius: var(--radius-xl); }

.ui-chips { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--space-3) / 2); min-width: 0; }
.ui-chip {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: calc(var(--space-3) / 2);
  box-sizing: border-box;
  height: var(--size-control-sm);
  padding: 0 calc(var(--space-5) / 2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink);
  font: var(--type-body-strong-weight) var(--type-small-size)/1 var(--font-sans);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--motion-duration), background-color var(--motion-duration), color var(--motion-duration);
}
.ui-chip:hover { border-color: var(--edge); }
.ui-chip-n,
.ui-stab-n { color: var(--faint); font: var(--type-meta-weight) var(--type-meta-size)/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.ui-chip-zero,
.ui-chip-add { color: var(--muted); }
.ui-chip-add { border-style: dashed; }
.ui-chip-on { background: var(--btn); border-color: var(--btn); color: var(--btn-ink); }
.ui-chip-on .ui-chip-n { color: var(--btn-ink); }

.ui-stabs { display: flex; gap: var(--space-6); min-width: 0; border-bottom: 1px solid var(--line); }
.ui-stab {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: calc(var(--space-3) / 2);
  box-sizing: border-box;
  height: var(--size-row);
  margin-bottom: -1px;
  padding: 0 2px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  font: var(--type-body-strong-weight) var(--type-body-size)/1 var(--font-sans);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--motion-duration);
}
.ui-stab:hover { color: var(--ink); }
.ui-stab-on { color: var(--ink); border-bottom-color: var(--ink); }
.ui-seg:focus-visible,
.ui-chip:focus-visible,
.ui-stab:focus-visible { outline: var(--focus-width) solid var(--focus-color); outline-offset: var(--focus-offset); }

/* Five measures do not fit a phone (D-289, D-81): under 760 px the track scrolls sideways inside its row and no segment
   shrinks. A segment's ring sits inside it, so the scrolling track cannot clip it. */
@media (max-width: 759px) {
  .ui-segs { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; scroll-padding-inline: var(--space-3); }
  .ui-segs::-webkit-scrollbar { display: none; }
  .ui-seg { flex: none; }
  .ui-seg:focus-visible { outline-offset: calc(-1 * var(--focus-width)); }
}
@media (max-width: 390px) {
  .ui-chips,
  .ui-stabs {
    flex-wrap: nowrap;
    box-sizing: border-box;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    /* Leave the fading edge outside the picked item's reading area, including the last item. */
    padding-inline-end: 15%;
    scroll-padding-inline-end: 15%;
    mask-image: linear-gradient(90deg, var(--ink) 85%, transparent);
    /* A row that scrolls sideways clips vertically too: room for the focus ring above and below, given back outside. */
    padding-block: calc(var(--focus-width) + var(--focus-offset));
    margin-block: calc(-1 * (var(--focus-width) + var(--focus-offset)));
  }
  .ui-chips::-webkit-scrollbar,
  .ui-stabs::-webkit-scrollbar { display: none; }
  .ui-stabs { gap: var(--space-5); }
  .ui-stab { height: calc(var(--size-row) + var(--space-1)); font-size: var(--type-section-title-size); }
}
@media (prefers-reduced-motion: reduce) {
  .ui-seg,
  .ui-field::before,
  .ui-chip,
  .ui-stab { transition: none; }
}

.ui-fp-host { position: relative; }
/* Inside a host the panel floats under the row, over the page; anywhere else it takes its room in the flow. */
.ui-fp-host > .ui-fp {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  z-index: 60;
  box-shadow: var(--shadow-float);
}
.ui-fp {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--body);
  font: var(--type-body-weight) var(--type-body-size)/var(--type-body-leading) var(--type-body-family);
}
.ui-fp[hidden],
.ui-fp-helptext[hidden] { display: none; }
.ui-fp-btn,
.ui-fp-go {
  height: var(--size-control-sm);
  gap: var(--space-2);
  padding-inline: calc(var(--space-5) / 2);
  font: var(--type-small-weight) var(--type-small-size)/var(--type-small-leading) var(--type-small-family);
}
.ui-fp-btn { width: fit-content; }
.ui-fp-btn-on { border-color: var(--ink); color: var(--ink); }
.ui-fp-btn > .ic {
  width: var(--space-4);
  height: var(--space-4);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ui-fp { max-height: var(--fp-room, none); }
.ui-fp-groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5) var(--space-6);
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
}
.ui-fp-group { display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; min-width: 0; }
/* The group's head: its label, the "?" beside it, and the help words under both. */
.ui-fp-head {
  display: flex;
  flex-wrap: wrap;
  flex-basis: 100%;
  align-items: center;
  margin-bottom: var(--space-2);
}
.ui-fp-label {
  color: var(--muted);
  font: var(--type-meta-weight) var(--type-meta-size)/var(--type-meta-leading) var(--type-meta-family);
}
.ui-fp-help {
  flex: none;
  width: var(--space-5);
  height: var(--space-5);
  margin-inline-start: var(--space-1);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--muted);
  font: var(--type-meta-weight) var(--type-meta-size)/var(--type-meta-leading) var(--type-meta-family);
  cursor: pointer;
}
.ui-fp-helptext {
  flex-basis: 100%;
  margin: var(--space-1) 0 0;
  color: var(--muted);
  font: var(--type-small-weight) var(--type-small-size)/var(--type-small-leading) var(--type-small-family);
  overflow-wrap: anywhere;
}
.ui-fp-chip {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  min-height: var(--size-chip);
  max-width: 100%;
  margin: 0 var(--space-1) var(--space-1) 0;
  padding: 0 calc(var(--space-5) / 2);
  border: 1px solid var(--line);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--body);
  font: var(--type-small-weight) var(--type-small-size)/var(--type-small-leading) var(--type-small-family);
  text-align: start;
  overflow-wrap: anywhere;
  cursor: pointer;
}
.ui-fp-chip-on { border-color: var(--ink); color: var(--ink); }
.ui-fp-chip-off { display: inline-block; color: var(--faint); cursor: default; }
.ui-fp-why { color: var(--faint); }
.ui-fp-foot {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line-soft);
  background: var(--surface);
}
.ui-fp-count { flex: 1; min-width: 0; margin: 0; color: var(--ink); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.ui-fp-count > b { font-weight: 600; }
.ui-fp-clear {
  flex: none;
  min-height: var(--size-control-sm);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--link);
  font: var(--type-small-weight) var(--type-small-size)/var(--type-small-leading) var(--type-small-family);
  cursor: pointer;
}
.ui-fp-clear:disabled { color: var(--faint); cursor: default; }
.ui-fp-note {
  flex: none;
  margin: 0;
  color: var(--muted);
  font: var(--type-meta-weight) var(--type-meta-size)/var(--type-meta-leading) var(--type-meta-family);
  overflow-wrap: anywhere;
}
.ui-fp-note:empty { display: none; }
.ui-fp-btn:focus-visible,
.ui-fp-chip:focus-visible,
.ui-fp-help:focus-visible,
.ui-fp-clear:focus-visible,
.ui-fp-go:focus-visible { outline: var(--focus-width) solid var(--focus-color); outline-offset: var(--focus-offset); }
@media (max-width: 899px) {
  .ui-fp-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 559px) {
  .ui-fp { max-width: 100dvw; max-height: min(70dvh, 640px, var(--fp-room, 100dvh)); }
  .ui-fp-groups {
    grid-template-columns: minmax(0, 1fr);
    scrollbar-gutter: stable;
    padding: var(--space-1);
  }
  .ui-fp-foot { flex-wrap: wrap; }
  .ui-fp-count { flex-basis: 100%; }
  .ui-fp-go { margin-inline-start: auto; }
}

/* BrandPicker (H4f): the pill names the pick ("Compare with · Alpenway"); the menu floats under it. */
.ui-bp { position: relative; display: inline-flex; min-width: 0; }
.ui-bp-btn {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--space-3) / 2);
  box-sizing: border-box;
  max-width: 100%;
  height: var(--size-control-sm);
  padding: 0 calc(var(--space-5) / 2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink);
  font: var(--type-body-strong-weight) var(--type-small-size)/1 var(--font-sans);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--motion-duration);
}
.ui-bp-btn:hover,
.ui-bp-btn[aria-expanded="true"] { border-color: var(--ink); }
.ui-bp-value { overflow: hidden; text-overflow: ellipsis; }
.ui-bp-btn .ic { flex-shrink: 0; color: var(--faint); }
.ui-bp-menu {
  position: absolute;
  top: calc(100% + var(--space-1));
  left: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-width: 100%;
  max-height: 320px;
  overflow-y: auto;
  padding: var(--space-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-float);
}
.ui-bp-pick,
.ui-bp-all,
.ui-bp-box {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  box-sizing: border-box;
  min-height: var(--size-control-sm);
  padding: 0 var(--space-2);
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  color: var(--ink);
  font: var(--type-body-weight) var(--type-small-size)/1.3 var(--font-sans);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.ui-bp-pick:hover,
.ui-bp-all:hover,
.ui-bp-box:hover { background: var(--hover); }
.ui-bp-pick-on { font-weight: var(--type-body-strong-weight); box-shadow: inset 2px 0 0 var(--ink); }
.ui-bp-pick small,
.ui-bp-box small { margin-left: auto; color: var(--faint); font-size: var(--type-meta-size); }
.ui-bp-off { color: var(--faint); cursor: default; }
.ui-bp-off:hover { background: none; }
.ui-bp-all { color: var(--muted); border-bottom: 1px solid var(--line); border-radius: 0; }
.ui-bp-btn:focus-visible,
.ui-bp-pick:focus-visible,
.ui-bp-all:focus-visible,
.ui-bp-box input:focus-visible { outline: var(--focus-width) solid var(--focus-color); outline-offset: var(--focus-offset); }

/* Composer (P2, RD-1010c R2): one composer, drawn twice. The drawer form draws inside P1's drawer host, so no gutter of
   its own; the canvas form is the AgentCanvasHome card. Light and dark come from the tokens; 44 px targets under 760. */
.ui-composer {
  display: grid;
  /* One track that may shrink: an implicit auto column takes the nowrap token's min-content width and pushes the card past
     a phone's edge (REV-P2-composer, 390 with a question attached). */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  min-width: 0;
  color: var(--body);
  font: var(--type-body-weight) var(--type-body-size)/var(--type-body-leading) var(--font-sans);
}
.ui-composer-canvas {
  align-content: start;
  gap: var(--space-3);
  box-sizing: border-box;
  padding: 22px var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-lift);
}
/* The same for every grid inside the card: each is one shrinkable track, so no child sets its parent's width. */
.ui-composer-head,
.ui-composer-box,
.ui-composer-brief,
.ui-composer-list,
.ui-composer-plan,
.ui-composer-canvas .ui-composer-top { grid-template-columns: minmax(0, 1fr); }
/* The icons are outlines: the shared icon markup carries no paint of its own, so a bare <svg> draws solid black (a ":" for
   Shuffle, black triangles for the chevrons). Stroke follows the text colour, so dark mode needs nothing more. */
.ui-composer .ic { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ui-composer-head { display: grid; gap: var(--space-1); }
.ui-composer-eyebrow { color: var(--faint); font: var(--type-meta-weight) var(--type-meta-size)/var(--type-meta-leading) var(--font-sans); }
.ui-composer-title {
  margin: 0;
  color: var(--ink);
  font: var(--type-drawer-title-weight) var(--type-drawer-title-size)/var(--type-drawer-title-leading) var(--font-sans);
  letter-spacing: var(--type-drawer-title-tracking);
}
.ui-composer-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.ui-composer-canvas .ui-composer-top { display: grid; justify-content: stretch; gap: var(--space-2); }
.ui-composer-canvas .ui-composer-top .ui-segs { width: auto; }
.ui-composer-canvas .ui-composer-top .ui-seg { flex: 1; }
.ui-composer-hint { margin: 0; color: var(--muted); font: var(--type-small-weight) var(--type-small-size)/var(--type-small-leading) var(--font-sans); }
.ui-composer-drawer .ui-composer-hint { font: inherit; }
.ui-composer-box {
  display: grid;
  gap: var(--space-3);
  box-sizing: border-box;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--edge-hover);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.ui-composer-canvas .ui-composer-box { gap: var(--space-2); min-height: 104px; border-color: var(--edge); border-radius: var(--radius-xl); align-content: start; }
.ui-composer-box:focus-within { border-color: var(--focus-color); box-shadow: 0 0 0 1px var(--focus-color); }
/* One ring (REV-P3-17-wr1 S3): the box draws it, so the textarea inside draws no outline of its own. */
.ui-composer-box .ui-composer-text:focus-visible { outline: none; }
.ui-composer-text {
  box-sizing: border-box;
  width: 100%;
  min-height: 5.5rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: var(--type-field-lg-weight) var(--type-field-lg-size)/1.55 var(--font-sans);
  resize: vertical;
}
.ui-composer-canvas .ui-composer-text { min-height: 4.6rem; }
.ui-composer-text:focus { outline: none; }
.ui-composer-text::placeholder { color: var(--faint); opacity: 1; }
.ui-composer-token {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-self: start;
  max-width: 100%;
  box-sizing: border-box;
  height: var(--size-chip);
  padding: 0 var(--space-2);
  border-radius: var(--radius-md);
  background: var(--track);
  color: var(--body);
  font: var(--type-body-strong-weight) var(--type-small-size)/1 var(--font-sans);
}
.ui-composer-token-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-composer-token-x {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-xs);
  background: none;
  color: var(--faint);
  cursor: pointer;
}
.ui-composer-token-x:hover { color: var(--ink); background: var(--hover); }
.ui-composer-token-x .ic { width: 12px; height: 12px; }
.ui-composer-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.ui-composer-pills { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ui-composer-meta { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.ui-composer-meta .ui-composer-pills { gap: 6px; }
.ui-composer-brief-toggle { margin-left: auto; font-size: var(--type-small-size); }
.ui-composer-chevron { width: 12px; height: 12px; color: var(--faint); }
.ui-composer-brief { display: grid; gap: var(--space-3); }
.ui-composer-actions { position: relative; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.ui-composer-canvas .ui-composer-go,
.ui-composer-canvas .ui-composer-elsewhere { height: var(--size-control); padding: 0 var(--space-3); font-size: var(--type-body-size); font-weight: var(--type-body-strong-weight); }
.ui-composer-menu { position: absolute; top: calc(100% + var(--space-1)); left: 0; z-index: 20; }
.ui-composer-mark { display: inline-block; width: 14px; height: 14px; margin-left: 6px; vertical-align: -2px; }
.ui-composer-mark svg { display: block; width: 100%; height: 100%; }
.ui-composer-note { margin: 0; color: var(--muted); font: var(--type-small-weight) var(--type-small-size)/var(--type-small-leading) var(--font-sans); }
.ui-composer-foot { color: var(--faint); font-size: var(--type-meta-size); }
.ui-composer-error { margin: 0; color: var(--ink); font-weight: var(--type-body-strong-weight); }
.ui-composer-list,
.ui-composer-plan { display: grid; gap: var(--space-1); }
.ui-composer-drawer .ui-composer-list,
.ui-composer-drawer .ui-composer-plan { gap: var(--space-2); }
.ui-composer-list-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); padding: 0 var(--space-2); }
.ui-composer-label { margin: 0; color: var(--muted); font: var(--type-body-strong-weight) var(--type-meta-size)/var(--type-meta-leading) var(--font-sans); }
.ui-composer-shuffle { font-size: var(--type-small-size); }
.ui-composer-shuffle .ic { width: 13px; height: 13px; }
.ui-composer-prompt {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-height: 34px;
  box-sizing: border-box;
  padding: 6px var(--space-2);
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  color: var(--body);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.ui-composer-prompt:hover { background: var(--hover); }
.ui-composer-drawer .ui-composer-prompt { padding: var(--space-2) var(--space-3); border: 1px solid var(--line-soft); }
.ui-composer-drawer .ui-composer-prompt:hover { background: none; border-color: var(--edge-hover); }
.ui-composer-spark { flex: none; width: 14px; height: 14px; color: var(--faint); }
.ui-composer-drawer .ui-composer-spark { display: none; }
.ui-composer-prompt-text { display: grid; gap: var(--space-1); min-width: 0; }
.ui-composer-prompt-title { color: var(--ink); }
.ui-composer-canvas .ui-composer-prompt-title { color: var(--body); }
.ui-composer-plan-list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.ui-composer-plan-row {
  display: grid;
  grid-template-columns: var(--space-6) minmax(0, 1fr) auto;
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
}
.ui-composer-plan-body { display: grid; min-width: 0; }
.ui-composer-prompt:focus-visible,
.ui-composer-token-x:focus-visible,
.ui-composer-brief-toggle:focus-visible,
.ui-composer-shuffle:focus-visible { outline: var(--focus-width) solid var(--focus-color); outline-offset: var(--focus-offset); }
@media (max-width: 759px) {
  .ui-composer-canvas { padding: var(--space-4); }
  .ui-composer-canvas .ui-composer-box { min-height: 88px; }
  .ui-composer-canvas .ui-seg { height: 36px; }
  .ui-composer-spark { display: none; }
  .ui-composer-prompt { min-height: 44px; }
  .ui-composer-shuffle,
  .ui-composer-brief-toggle { min-height: 44px; font-size: var(--type-body-size); }
  .ui-composer-token-x { width: 28px; height: 28px; }
  .ui-composer-actions { flex-wrap: nowrap; }
  .ui-composer-canvas .ui-composer-go { flex: 1; justify-content: center; }
  .ui-composer-canvas .ui-composer-go,
  .ui-composer-canvas .ui-composer-elsewhere { height: 44px; }
  /* The drawer form's targets are 44 px too (COORD, REV-P2-composer). Its primary fills the row it wraps onto. */
  .ui-composer-drawer .ui-seg,
  .ui-composer-drawer .ui-composer-go { height: 44px; }
  .ui-composer-drawer .ui-composer-go { flex: 1 0 auto; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .ui-composer-box { transition: none; }
}