/* composer.js: one quiet card in the reading column — the field, the
 * options row, Send/Stop, drag-and-drop and the attachment tray. On an
 * empty chat (the greeting alone) it sits right under the greeting; the
 * first send docks it (composermotion.js slides it down). */

.composer {
  align-self: center;
  width: min(100% - 2 * var(--sv-space-5), var(--reading));
  margin: var(--sv-space-1) 0 var(--sv-space-3);
  display: flex;
  flex-direction: column;
  gap: var(--sv-space-1);
  padding: var(--sv-space-2);
  border-radius: calc(var(--sv-radius) * 1.5);
  transition: border-color var(--sv-dur-instant) var(--sv-ease-out);
  /* The options row lays out by the card's width, not the viewport's: an open
   * side panel narrows the card on a wide screen (tier.css @container composer). */
  container: composer / inline-size;
}
.composer:focus-within { border-color: var(--sv-hairline-strong); }
/* The options row: the controls that shape the next send, then Send. */
.composer-options { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sv-space-1); }
.composer-spacer { flex: 1; }
.composer-options select, .composer-options input {
  min-height: 28px;
  max-width: 11rem;
  padding: 0 var(--sv-space-2);
  border-color: transparent;
  background: transparent;
  color: var(--sv-ink-secondary);
  font-size: var(--ui-text);
  text-overflow: ellipsis;
}
.composer-options select:hover, .composer-options input:hover { background: var(--ws-hover); color: var(--sv-ink); }
.composer-options select:disabled, .composer-options input:disabled { opacity: 0.64; }
.composer-options #attach { color: var(--sv-ink-tertiary); }
/* Steer | Queue while a run is live: both choices in view, the picked one raised. */
.send-mode { display: inline-flex; padding: 2px; border-radius: var(--sv-radius); background: var(--sv-surface-sunken); }
.send-mode[hidden] { display: none; }
.send-mode button {
  display: inline-flex;
  align-items: center;
  gap: var(--sv-space-1);
  min-height: 26px;
  padding: 0 var(--sv-space-2);
  border: 0;
  border-radius: calc(var(--sv-radius) * 0.75);
  background: none;
  color: var(--sv-ink-tertiary);
  font: inherit;
  font-size: var(--ui-meta);
  cursor: pointer;
  transition: background var(--sv-dur-fast) var(--sv-ease-out), color var(--sv-dur-fast) var(--sv-ease-out);
}
.send-mode button:hover { color: var(--sv-ink); }
.send-mode button[aria-checked="true"] { background: var(--sv-surface); color: var(--sv-ink); box-shadow: 0 1px 2px rgb(0 0 0 / 0.08); }
.send-mode button[data-mode="followUp"][aria-checked="true"] { color: var(--ws-working-ink); }
.send-mode button:focus-visible { outline: var(--sv-hairline-w) solid var(--sv-ink-tertiary); outline-offset: 1px; }
/* A small phone keeps the words and drops the icons, so Stop stays on the row. */
@media (max-width: 360px) { .send-mode .icon { display: none; } }
.composer.running .effort-control { display: none; }
/* While a run is live Send is for steering; the primary spot is Stop's only when the box is empty. */
.composer.running:not(.has-text) #send { display: none; }
.composer:not(.running) #stop, .composer.running.has-text #stop { display: none; }
#stop { color: var(--sv-danger); }
.composer textarea {
  width: 100%;
  min-height: 24px;
  max-height: 12rem;
  resize: none;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 6px var(--sv-space-2);
  line-height: 1.5;
}
.composer textarea:focus-visible { outline: none; }
.composer textarea::placeholder { color: var(--sv-ink-tertiary); }

@media (max-width: 760px) {
  .composer { width: calc(100% - 2 * var(--sv-space-3)); }
}

/* An empty chat on a wide screen: the greeting rests on the composer and the
 * pair sits a little above the middle. Not a page, nor a chat this person
 * cannot write in. A phone keeps the composer docked by the keyboard. */
@media (min-width: 761px) and (min-height: 501px), (min-width: 961px), (min-width: 761px) and (pointer: fine) {
  .main:not(.board, [data-access]):has(> .transcript-wrap > .transcript > .empty:only-child) .transcript > .empty { margin-bottom: 0; }
  .main:not(.board, [data-access]):has(> .transcript-wrap > .transcript > .empty:only-child) .composer { margin-bottom: max(var(--sv-space-4), 26dvh); }
}

/* Send and Stop give under the finger (motion.css press) and swap with a short fade. */
#send, #stop { animation: sv-fade-in var(--sv-dur-enter) var(--sv-ease-out); }

/* Files dragged over the card: one ink edge, as v1's composer drop state. */
.composer.dragover { border-color: var(--sv-ink); outline: 1px solid var(--sv-ink); outline-offset: 0; }
/* Attachment tray inside the card, above the field (v1 .attachment-list). */
.composer-tools { display: flex; flex-wrap: wrap; gap: 6px; padding: var(--sv-space-1) var(--sv-space-1) 0; }
.attachment-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  max-width: min(100%, 18rem);
  padding: 3px 3px 3px 4px;
  color: var(--sv-ink);
  background: var(--sv-surface-sunken);
  border: var(--sv-hairline-w) solid var(--sv-hairline);
  border-radius: var(--sv-radius);
  font-size: var(--ui-meta);
  line-height: 1.2;
}
/* A staged file on its way up (composer.js progress): a bar fills the chip behind its words. */
.attachment-chip.uploading { background-image: linear-gradient(to right, var(--sv-surface-dim) calc(var(--a-progress, 0) * 100%), transparent 0); }
.attachment-chip img { display: block; width: 24px; height: 24px; flex: 0 0 24px; border-radius: 5px; object-fit: cover; background: var(--sv-surface-raised); }
.attachment-chip .a-name { min-width: 0; padding-left: var(--sv-space-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment-chip .a-size { flex: none; color: var(--sv-ink-tertiary); font-variant-numeric: tabular-nums; }
.attachment-chip button {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  color: var(--sv-ink-secondary);
  background: transparent;
  border: 0;
  border-radius: calc(var(--sv-radius) * 0.75);
  font-size: 16px;
  line-height: 1;
}
.attachment-chip button:hover { color: var(--sv-ink); background: var(--sv-surface-dim); }
@media (max-width: 760px) {
  .attachment-chip { min-height: 44px; max-width: 75%; }
  .attachment-chip button { width: 44px; height: 44px; }
}