/* cc-composer-row — ONE control row, for all four composer surfaces.
 *
 * Operator ruling 2026-09-20, four screenshots compared (launch + session x
 * mobile + desktop): "MOBILE IS THE REFERENCE". Both mobile composers already
 * float their controls INSIDE the input field along its bottom edge with even
 * padding; desktop did not — the launch row was inside but misaligned, and the
 * session row sat BELOW the field entirely, a different component wearing the
 * same name.
 *
 * The mobile pattern was never a phone idea, only phone-scoped: the FORM is
 * the field (border, radius, raised background), and the text and the control
 * row are two flow tracks inside it. That is promoted here to every surface and
 * every width, so the phone block in agent-composer.css keeps only what is
 * genuinely about touch — 44px targets and 16px text.
 *
 * CANONICAL ORDER, left to right, on all four: paperclip, model chip,
 * microphone, then the primary button right-aligned. The only difference the
 * ruling allows between launch and session is what that button says.
 *
 * This is its own file because agent-composer.css is at its 1000-line cap
 * (tests/test_t235g_static.py) and because "one row" reads better as one file
 * than as rules threaded through four others. It loads after agent-composer.css
 * so it wins the ties it needs to win.
 */

.agent-composer:is(.composer, .dock-composer, .agent-launch-column__form) {
  --composer-field-pad: 0.375rem;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  gap: 0;
  padding: var(--composer-field-pad);
  border: 1px solid var(--ui-line);
  border-radius: 1.25rem;
  background: var(--ui-raised);
}

.agent-composer:is(.composer, .dock-composer):focus-within,
.agent-composer.agent-launch-column__form:focus-within {
  border-color: color-mix(in srgb, var(--ui-accent) 45%, var(--ui-line));
}

/* The field's own chrome belongs to the form now; the wrapper and the textarea
   are transparent tracks inside it, or the pill reads as a box within a box. */
html .agent-composer :is(.file-reference-input, .agent-launch-column__composer) {
  border: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

html .agent-composer :is(#instruction-text, #dock-instruction-text, #dock-launch-instruction) {
  border: 0;
  border-radius: 0;
  padding: 0.5rem 0.4rem 0.35rem;
  background: transparent;
  box-shadow: none;
  resize: none;
}

/* The row itself. Same declarations for all four, so there is nothing left for
   a surface to diverge on except its primary button's label. */
html .agent-composer :is(.actions.composer-actions, .dock-composer-row, .agent-launch-actions) {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0 0.1rem 0.05rem;
}

/* The launch row's two wrappers were plumbing for an arrangement that no longer
   exists. `display: contents` lifts their children into the row, so the order
   below can address every control uniformly and the gap applies once. The model
   popover is position:fixed, so nothing here depended on the wrapper's box. */
.agent-composer .agent-launch-actions
  :is(.agent-launch-column__model, .agent-launch-column__toolbar) {
  display: contents;
}

/* CANONICAL ORDER. Set on the controls themselves rather than on DOM position,
   because the three surfaces mount their microphone in three different places
   and one of them is inside another control's wrapper. */
.agent-composer :is(.composer-attachment-actions, .composer-attach-button,
  [data-launch-file]) { order: 1; }
.agent-composer :is(.model-cluster, .agent-launch-column__model,
  .model-picker-button) { order: 2; }
.agent-composer .voice-note-actions { order: 3; }
.agent-composer :is(#instruct-submit, #dock-instruct-submit,
  [data-launch-submit]) { order: 4; margin-inline-start: auto; }

/* The model chip is the row's only elastic control: it gives up width first so
   the four fixed controls keep their targets, and truncates rather than
   collapsing to a bare caret. */
.agent-composer :is(.model-cluster, .model-picker-button) {
  flex: 0 1 auto;
  min-width: 4.5rem;
}
.agent-composer :is(.composer-attachment-actions, .composer-attach-button,
  .voice-note-mic, [data-launch-file], #instruct-submit, #dock-instruct-submit,
  [data-launch-submit]) { flex: 0 0 auto; }

/* Icons over text (standing rule): the microphone is a glyph on every surface,
   not a "Voice" button on desktop and a glyph on phone. aria-label and title
   carry the word. */
.agent-composer .voice-note-mic-label { display: none; }

/* The desktop session composer used to be a bordered strip above the pane edge
   with the row beneath it. The pill is the field now, so that chrome moves to
   the strip AROUND it. */
.agent-composer.composer { margin: 0 0.75rem 0.75rem; width: auto; }

/* The launch form carried two more wrappers than the session form — a body and
   a composer card — so the same pill had a different inside. They are flow
   plumbing, not boxes: `display: contents` gives the launch field the session
   field's anatomy, chips and text and row as direct tracks.

   The bottom-anchoring those wrappers used to do (2026-09-20 ruling: header at
   the top of the column, composer at the bottom) moves up with them, onto the
   pill itself, which is the thing that has to sit at the bottom. */
.agent-composer.agent-launch-column__form
  :is(.agent-launch-column__body, .agent-launch-column__composer) {
  display: contents;
}
.agent-launch-column .agent-composer.agent-launch-column__form {
  flex: 0 0 auto;
  margin-top: auto;
}
/* Empty by design now the footer is gone — but it still reports failures, and
   an empty status must not open a gap inside the field. */
.agent-composer .agent-launch-column__state:empty { display: none; }

/* The launch field carried a label the session field does not — "WHAT SHOULD
   IT WORK ON?" — which is the placeholder's job now that the hint lives there
   too. Identical anatomy means the field holds text and a row, nothing else. */
.agent-composer.agent-launch-column__form .agent-launch-eyebrow { display: none; }

/* Operator ruling 2026-09-20: the hint moves out of a footer row and into the
   placeholder as a second line. #1718 made every composer placeholder nowrap
   because the field was ONE line then and a wrap meant a clipped sentence; the
   launch field opens at three rows, so it can hold the two lines it is given.
   `pre-line` is what honours the newline in the attribute. */
html .agent-composer #dock-launch-instruction::placeholder {
  white-space: pre-line;
  text-overflow: clip;
}

/* The chip's tint came from the phone block, which is why the same control read
   as a filled pill on mobile and a bare label on desktop. Mobile is the
   reference, so it is the chip's look on all four surfaces now. */
html .agent-composer .model-picker-button {
  position: relative;
  isolation: isolate;
  gap: 0.25rem;
}
html .agent-composer .model-picker-button::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: 999px;
  background: var(--ui-hover);
}