.cp-composer { --ui-body-size: 14px; --ui-mono-size: calc(var(--ui-body-size) - 2px);
  display: flex; flex-direction: column; gap: 6px; padding: 6px 20px 14px; background: var(--paper) }
.cp-composer > * { width: min(100%, var(--cp-read)); margin-inline: auto }
/* The assignment / review context chip sits in the same column as the field, in the same voice. */
.cp-composer > .cp-review-context { margin: 0 auto 6px; font-family: var(--sans); font-size: 12.5px }
.cp-field {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: end; gap: 2px; padding: 5px 5px 5px 4px;
  background: var(--paper-raised); border: 1px solid var(--line-strong);
}
.cp-field:focus-within { border-color: var(--signal) }
.cp-field .cp-attachments { grid-column: 1 / -1; margin: 3px 4px 2px; padding: 0 }
.cp-field textarea {
  width: 100%; min-height: 30px; max-height: calc(1.5em * 8 + 10px); padding: 5px 6px; resize: none;
  overflow-y: auto; font: inherit; font-size: 14px; line-height: 1.5; color: var(--ink);
  border: 0; background: transparent; scrollbar-width: none; -ms-overflow-style: none;
}
.cp-field textarea::-webkit-scrollbar { display: none; width: 0; height: 0 }
.cp-field textarea:focus { outline: none; border: 0 }
/* A placeholder that wraps would grow the empty field; it is a hint, so it clips instead. */
.cp-field textarea::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink-faint) }
.cp-field-btn {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; background: transparent; border: 1px solid transparent;
  color: var(--ink-soft); cursor: pointer; font: inherit;
}
.cp-field-btn:hover:not(:disabled) { background: var(--selection); color: var(--ink) }
.cp-field-btn:focus-visible { outline: 2px solid var(--signal); outline-offset: -2px }
.cp-field-send { background: var(--signal); border-color: var(--signal); color: #fff }
.cp-field-send:hover:not(:disabled) { background: var(--signal-deep); border-color: var(--signal-deep); color: #fff }
.cp-field-send:disabled { opacity: .35; cursor: default }
.cp-field-tools { display: flex; align-items: center; gap: 2px }
/* Dictation and Refine are first-class on the field (ruling Nam 19:44), never behind a menu. */
/* Dictation (part W): while speaking, the mic button becomes a strip (live wave, elapsed, Cancel,
   Accept) and the field shows the draft: settled words in ink, words still being recognised muted
   italic. The draft view uses the textarea's own box so nothing jumps. */
.cp-dictation { display: inline-flex; align-items: center; gap: 4px; padding-left: 4px }
.cp-dictation-wave { display: inline-flex; align-items: center; gap: 2px; height: 22px; padding: 0 2px }
.cp-dictation-bar { width: 2px; height: 100%; background: var(--margin-ink); transform-origin: center;
  transition: transform 90ms linear }
.cp-dictation[data-phase="transcribing"] .cp-dictation-bar { background: var(--ink-faint) }
.cp-dictation-elapsed { font-family: var(--mono); font-size: var(--ui-mono-size); font-variant-numeric: tabular-nums;
  color: var(--margin-ink); min-width: 3.2ch; text-align: right }
.cp-dictation-accept { color: var(--signal) }
.cp-dictation-accept:disabled { opacity: .45; cursor: default }
.cp-dictation-draft { width: 100%; min-height: 30px; max-height: calc(1.5em * 8 + 10px); padding: 5px 6px;
  overflow-y: auto; font-size: 14px; line-height: 1.5; color: var(--ink); white-space: pre-wrap;
  overflow-wrap: anywhere; scrollbar-width: none }
.cp-dictation-interim { color: var(--ink-soft); font-style: italic }
.cp-dictation-error { margin: 0 0 6px; font-size: 12px; line-height: 1.4; color: var(--margin-ink, var(--human)) }
.cp-dictation-caret { display: inline-block; width: 1px; height: 1.1em; margin-left: 1px; vertical-align: text-bottom;
  background: var(--ink); animation: cp-pulse 1s steps(2, start) infinite }
.cp-field-refine.is-suggested { color: var(--signal); border-color: var(--signal);
  animation: cp-suggest 1.4s ease-in-out 3 }
@keyframes cp-suggest { 50% { background: var(--selection) } }
@media (prefers-reduced-motion: reduce) { .cp-dictation-caret, .cp-field-refine.is-suggested { animation: none } .cp-dictation-bar { transition: none } }
.cp-field-plus[aria-expanded="true"] { background: var(--selection); color: var(--ink) }