/* 15.1151: a request with its materials (/kit/composer.js) — the words as in a chat, the attached files as the
   messenger's cards over them, the clip, the note and the main answer at the foot; the box is the field: its ground,
   its line, its focus ring; a file carried over it lights it as a drop place */
.composer {
  display: flex;
  flex-direction: column;
  gap: var(--sp-150);
  padding: var(--sp-150);
  border: var(--bw) solid var(--line2);
  border-radius: var(--r-l);
  background: var(--field);
  transition: border-color .15s, background .15s;
}
.composer:focus-within { border-color: var(--acc); box-shadow: inset 0 0 0 var(--bw) var(--acc); }
.composer.over { border-color: var(--acc); background: var(--acc-weak); }
.composer textarea.composer-text {
  display: block;
  width: 100%;
  min-height: 96px;
  max-height: 280px;
  padding: 0 var(--sp-050);
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: var(--fs);
  line-height: var(--lh);
  resize: none;
  outline: none;
}
/* the box glows, not the words inside it — the same chain as the common field rules, so it wins */
.composer textarea.composer-text:focus,
.composer textarea.composer-text:hover:not(:disabled):not([readonly]):not(:focus):not(.invalid) { box-shadow: none; }
.composer-foot { display: flex; align-items: center; gap: var(--sp-100); }
.composer-note { flex: 1 1 auto; min-width: 0; color: var(--ink3); font-size: var(--fs-s); line-height: var(--lh-s); }
/* 15.1155: a long pasted text opened whole, as it was pasted */
.composer-piece { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); }