.composer-pill {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  box-sizing: border-box;
  min-block-size: var(--ds-composer-height);
  background: var(--color-bg-pure);
  border: 1px solid var(--color-border);
  border-radius: 1.3rem;
  padding: 0.55rem 0.3rem 0.55rem 0.625rem;
  transition: border-color 150ms, box-shadow 150ms;
}

/* v5: the text written in the composer is 16 px over the 15.5 px bubble, a step above it as in WhatsApp Web, so a message never shrinks on its way out; a phone keeps 16 px so iOS does not zoom in.
   The caret is the accent green, as WhatsApp draws its own. */
:where(html[data-visual="v5"]) .composer-pill :is(textarea[data-customer-support--composer-target="input"], lexxy-editor) {
  font-size: var(--ds-font-size-composer);
  caret-color: var(--ds-caret);

  @media (pointer: coarse) { font-size: max(16px, var(--ds-font-size-composer)); }
}

/* v5: the hint, "Digite uma mensagem", in the muted text of every field; the editor draws it as a ::before of its content. */
:where(html[data-visual="v5"]) .composer-pill textarea[data-customer-support--composer-target="input"]::placeholder,
:where(html[data-visual="v5"]) .composer-pill lexxy-editor .lexxy-editor__content::before {
  color: var(--ds-text-muted);
  opacity: 1;
}

.composer-pill:focus-within {
  outline: 2px solid var(--ds-focus-ring);
  outline-offset: -1px;
  box-shadow: none;
}

/* By text, not by focus: a bar leaving on blur shifts the thread under the click that blurred it. */
#composer .cs-wa-format {
  display: none;
  margin-block-end: 4px;
}

#composer:not([data-recorder-state="recording"], [data-recorder-state="paused"])
  .composer-pill:has([data-customer-support--composer-target="input"]:not(:placeholder-shown)) .cs-wa-format {
  display: flex;
}

#composer .composer-row > :has(lexxy-editor) {
  max-height: none;
  overflow: visible;
}

#composer .composer-row {
  align-items: flex-end;
}

/* The door in front mirrors the send button, so both sit the same distance from their edge. */
.composer-pill:has(.cs-composer-menu) {
  padding-inline-start: 0.3rem;
}

.composer-hint {
  display: inline-flex;
  color: var(--color-txt);
  height: 34px;
  align-items: center;
}

.composer-btn {
  --hover-size: 0;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: var(--color-txt);
  transition: opacity 100ms;
  padding: 0;
  text-decoration: none;
  opacity: 0.6;
}

@media (any-hover: hover) {
  .composer-btn:hover {
    opacity: 1;
  }
}

.composer-send {
  --hover-size: 0;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: var(--color-txt);
  color: var(--color-bg-pure);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform 100ms, opacity 100ms;
  padding: 0;
  margin-left: 2px;
}

.composer-send:active {
  transform: scale(0.92);
}

@media (any-hover: hover) {
  .composer-send:hover {
    opacity: 0.85;
  }
}


.composer-pill > .ds-chip {
  align-self: flex-start;
  margin: 0 0.35rem 0.25rem;
}

/* v5, as WhatsApp: a neutral pill with no outline, not even on focus (the caret says where you are),
   the + and the emoji in front, and at the end the microphone until there is something to send. */
:where(html[data-visual="v5"]) .composer-pill,
html[data-visual="v5"] .composer--note .composer-pill {
  border-color: transparent;
  border-radius: min(var(--ds-radius-full), 1.5rem);
}

:where(html[data-visual="v5"]) .composer-pill:not(.composer--note *) {
  background-color: var(--ds-composer-field);
}

html[data-visual="v5"] .composer-pill:focus-within,
html[data-visual="v5"] .composer--note .composer-pill:focus-within {
  border-color: transparent;
  outline: none;
}

:where(html[data-visual="v5"]) form:not([data-composer-filled]) .composer-actions:has(.composer-mic) .composer-send,
:where(html[data-visual="v5"]) form[data-composer-filled] .composer-mic {
  display: none;
}

html[data-visual="v5"] :is(.composer-send, .cs-rec__send):not(.composer--note *) {
  background: var(--ds-cta);
  color: var(--ds-on-cta);
}

@media (any-hover: hover) {
  html[data-visual="v5"] :is(.composer-send, .cs-rec__send):not(.composer--note *):hover {
    background: var(--ds-cta-hover);
    opacity: 1;
  }
}

#composer lexxy-editor {
  --lexxy-editor-rows: 1lh;
  border: none;
  box-shadow: none;
}

#composer .lexxy-editor__content {
  padding: 0;
  outline: none;
}

#composer lexxy-toolbar {
  display: none;
}

#composer.composer--rich-text lexxy-toolbar {
  display: flex;
  padding: 0.2em 0 0;
}

#composer.composer--rich-text lexxy-editor {
  display: flex;
  flex-direction: column;
}

.composer--rich-text lexxy-toolbar {
  order: 1;
  position: relative;
  gap: 0.2em;
  border: none;
  background: none;
  margin-block: -0.3rem;
  min-height: 0;
  align-items: center;
}

.composer--rich-text .lexxy-editor__content {
  h1, h2, h3 {
    font-weight: bold;
  }

  h1 { font-size: 1.4rem; }
  h2 { font-size: 1.25rem; }
  h3 { font-size: 1.1rem; }
}

.composer--rich-text .lexxy-editor__toolbar-dropdown:has(> [name="highlight"]),
.composer--rich-text button[name="image"],
.composer--rich-text button[name="file"],
.composer--rich-text button[name="table"],
.composer--rich-text button[name="divider"],
.composer--rich-text button[name="undo"],
.composer--rich-text button[name="redo"],
.composer--rich-text .lexxy-editor__toolbar-spacer,
.composer--rich-text .lexxy-editor__toolbar-overflow {
  display: none;
}

.composer--rich-text .lexxy-editor__toolbar-button {
  --lexxy-toolbar-button-size: 1.75rem;
  background: transparent;
  border-radius: 6px;
  box-shadow: none;
  outline: none;
}

#composer lexxy-editor .lexxy-editor__toolbar-group-end::after {
  display: none;
}

.composer--rich-text .lexxy-editor__toolbar-button[aria-pressed="true"],
.composer--rich-text [open] > .lexxy-editor__toolbar-button {
  background-color: var(--color-hover);
}

@media (any-hover: hover) {
  .composer--rich-text .lexxy-editor__toolbar-button:hover:not([aria-pressed="true"]) {
    background-color: var(--color-hover);
  }
}

.composer--rich-text .lexxy-editor__toolbar-dropdown summary ~ * {
  background-color: var(--color-bg-pure);
  border: 1px solid var(--color-border);
  border-radius: 0.75em;
  box-shadow: 0 4px 16px oklch(0% 0 0 / 0.15);
  color: var(--color-txt);
  inset-block-end: 100%;
  inset-block-start: auto;
  inset-inline-start: 0;
  margin-block-end: 0.5em;
}

.composer--rich-text .lexxy-editor__toolbar-dropdown-list button {
  color: var(--color-txt);
  box-shadow: none;
}

.composer--rich-text .lexxy-editor__toolbar-dropdown-list button svg {
  fill: currentColor;
}

.composer--rich-text .lexxy-editor__toolbar-dropdown-list button[aria-pressed="true"] {
  background-color: var(--color-hover);
}

.composer--rich-text .lexxy-editor__toolbar-dropdown-list button:hover {
  background-color: var(--color-hover);
}

.composer--rich-text lexxy-link-dropdown {
  --lexxy-toolbar-spacing: 1.5ch;
}

.composer--rich-text lexxy-link-dropdown input[type="url"] {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 1em;
  color: var(--color-txt);
  padding: 0.5em 1em;
  font-size: max(16px, 1em);
}

.composer--rich-text lexxy-link-dropdown input[type="url"]::placeholder {
  color: var(--color-txt-muted);
}

.composer--rich-text lexxy-link-dropdown input[type="url"]:focus {
  border-color: var(--color-txt-muted);
  outline: none;
}

.composer--rich-text lexxy-link-dropdown {
  align-items: center;
}

.composer--rich-text lexxy-link-dropdown .lexxy-editor__toolbar-button {
  aspect-ratio: auto;
  block-size: auto;
  border-radius: 2em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  padding: 0.5em 1.1em;
  font-size: 0.875rem;
  box-shadow: none;
  outline: none;
}

.composer--rich-text lexxy-link-dropdown .lexxy-editor__toolbar-button[type="submit"] {
  background-color: var(--color-accent);
  color: var(--color-bg-pure);
  border: 1px solid transparent;
}

.composer--rich-text lexxy-link-dropdown .lexxy-editor__toolbar-button[type="submit"]:hover {
  background-color: var(--color-accent-strong, var(--color-accent));
  filter: brightness(1.1);
}

.composer--rich-text lexxy-link-dropdown .lexxy-editor__toolbar-button[type="button"] {
  background-color: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-txt);
}

.composer--rich-text lexxy-link-dropdown .lexxy-editor__toolbar-button[type="button"]:hover {
  background-color: var(--color-hover);
}

.composer--edit lexxy-toolbar {
  border-block-end: 1px solid var(--color-border);
  margin-inline: -0.8em;
  padding-inline: 0.3em;
  padding-block-end: 0.5em;
}

:is(img, span):is(.composer__file-thumbnail) {
  aspect-ratio: var(--aspect-ratio);
  block-size: auto;
  border-radius: var(--btn-border-radius);
  border: 1px solid var(--color-border);
  inline-size: var(--thumbnail-size);
  object-fit: cover;
  flex-shrink: 0;
}

.composer__file-thumbnail--common {
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m21.414 4.914-4.328-4.328a2 2 0 0 0-1.414-.586h-11.672a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-15.672a2 2 0 0 0-.586-1.414zm-10.414 14.586h-4.5a1 1 0 0 1 0-2h4.5a1 1 0 0 1 0 2zm4.5-4h-9a1 1 0 0 1 0-2h9a1 1 0 0 1 0 2zm0-4h-9a1 1 0 0 1 0-2h9a1 1 0 0 1 0 2z' fill='%23999'/%3E%3C/svg%3E") no-repeat center;
  background-size: 55%;
}

/* Typing and the connection share one line above the composer; quiet, it takes no height. */
.cs-connection-line.chat-composer-status {
  justify-content: space-between;
  gap: var(--ds-space-2);
}

.cs-connection-line.chat-composer-status:has(.chat-typing--active, .chat-syncing:not([hidden])) {
  max-height: 1.15rem;
}

.chat-syncing {
  --cs-notice-opacity: 1;
}

.chat-syncing[hidden] {
  display: none;
}

.chat-typing:not(.chat-typing--active) {
  visibility: hidden;
}

.chat-typing .ds-loader {
  font-size: 0.78rem;
}

.composer {
  flex: none;
  padding: var(--block-space-half) calc(var(--inline-space) + 1vw);
}

.composer__input-hint,
.composer__context-btn {
  .composer:has(.composer__input:focus-within) & {
    @media (max-width: 120ch) {
      display: none;
    }
  }
}

.composer__input {
  .composer__rich-text-btn,
  label:has(input[type="file"]) {
    cursor: pointer;
  }
}

[data-audio-composer-state] [data-audio-composer-only] {
  display: none;
}

[data-audio-composer-state="idle"] > [data-audio-composer-only="idle"] {
  display: block;
}

[data-audio-composer-state="recording"] > [data-audio-composer-only="recording"],
[data-audio-composer-state="transcribing"] > [data-audio-composer-only="transcribing"],
[data-audio-composer-state="preview"] > [data-audio-composer-only="preview"] {
  display: flex;
}

/* Recording is the same pill as writing, only its inside changes: the same height and the form's place in the column. */
.chat-voice {
  block-size: var(--ds-composer-height);
  margin-block: var(--block-space) 0;
  padding-block: 0;
}

[data-audio-composer-state="recording"] .chat-voice .cs-rec {
  display: flex;
  position: static;
}

[data-audio-composer-state="transcribing"] > [data-audio-composer-only="transcribing"] {
  align-items: center;
  justify-content: center;
}

.composer-voice-preview {
  gap: var(--ds-space-2);
  margin-block: var(--ds-space-2);
  padding: var(--ds-space-2) var(--ds-space-3);
}

.composer-voice-preview__player {
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
}

.composer-voice-preview__wave {
  flex: 1 1 auto;
  min-width: 0;
  height: 32px;
  cursor: pointer;
  color: var(--accent);
}

.composer-voice-preview__transcript {
  width: 100%;
  resize: vertical;
  min-height: 2.75rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  background: transparent;
  color: var(--ds-text);
  font-family: var(--font-sans);
  font-size: max(16px, 0.95rem);
  line-height: 1.4;
}

.composer-voice-preview__transcript:focus {
  outline: 2px solid var(--ds-focus-ring);
  outline-offset: -1px;
}

.composer-voice-preview__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--ds-space-2);
}

[data-audio-composer-state] .cs-rec-notice:not([hidden]) {
  margin-block: 8px 0;
}

.composer--note .composer-send {
  background: var(--cs-note);
  color: var(--color-bg-pure);
}

/* The emoji face beside the +: its picker is the reaction picker's, opened above it. */
.cs-composer-emoji { flex-shrink: 0; }
.cs-composer-emoji__trigger[aria-expanded="true"] { opacity: 1; }

/* The one door in front of the field: everything that is not typing opens from here. */
.cs-composer-menu { position: relative; flex-shrink: 0; }
.cs-composer-menu__trigger {
  --hover-size: 0;
  inline-size: 36px;
  block-size: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--color-txt);
  cursor: pointer;
  list-style: none;
  transition: background-color 120ms, transform 120ms;
}
.cs-composer-menu__trigger::-webkit-details-marker { display: none; }
@media (any-hover: hover) {
  .cs-composer-menu__trigger:hover { background: var(--hover); }
  }
.cs-composer-menu[open] .cs-composer-menu__trigger { background: var(--hover); transform: rotate(45deg); }
.cs-composer-menu__list {
  inset-block-end: calc(100% + 8px);
  inset-inline-start: 0;
  min-inline-size: 216px;
}
/* Hung off the pill, not the + inside it, so it clears the composer by a menu's gap even with the note's label and the formatting on top, as the emoji picker does.
   Fixed, because an anchor has to sit inside the menu's containing block, and the pill holds the + rather than the other way round. */
@supports (anchor-scope: --composer-pill) {
  .composer-pill:has(.cs-composer-menu) { anchor-name: --composer-pill; anchor-scope: --composer-pill, --composer-plus; }
  .composer-pill .cs-composer-menu { anchor-name: --composer-plus; }
  .composer-pill .cs-composer-menu__list {
    position: fixed;
    inset-block-end: calc(anchor(--composer-pill top) + 6px);
    inset-inline-start: anchor(--composer-plus left);
  }
}

/* v5: a whole circle the button's size fills on hover, as WhatsApp; --ds-hover vanishes on the --ds-field pill, so the pill's own step up. */
html[data-visual="v5"] :is(.composer-btn, .cs-composer-menu__trigger, .cs-rec__delete) {
  inline-size: 36px;
  block-size: 36px;
  border-radius: var(--ds-radius-full);
  color: var(--ds-text-secondary);
  opacity: 1;
  transition: background-color var(--ds-duration-fast), color var(--ds-duration-fast);
}

@media (any-hover: hover) {
  html[data-visual="v5"] :is(.composer-btn, .cs-composer-menu__trigger, .cs-rec__delete):hover { background-color: var(--ds-fill-hover); color: var(--ds-text); }
}

html[data-visual="v5"] :is(.composer-btn, .cs-composer-menu__trigger, .cs-rec__delete):active,
html[data-visual="v5"] .cs-composer-menu[open] .cs-composer-menu__trigger,
html[data-visual="v5"] .cs-composer-emoji__trigger[aria-expanded="true"] { background-color: var(--ds-pressed); color: var(--ds-text); }

/* As WhatsApp's: the pill close to the pane's foot, one small gap on its sides, under it and over it, the safe area within it. */
.composer-band {
  position: relative;
  padding-inline: var(--ds-composer-inset);
  padding-block-end: max(var(--ds-composer-inset), var(--safe-bottom, 0px));
}

.composer-band :is(#composer, form.composer) { margin-block: var(--ds-composer-inset) 0; }

/* The Chat's band is opaque in the conversation's own paper and above the list, so nothing from the messages shows under it,
   and it hangs the drawing again from its top edge. The Atendimento's lets through the drawing its pane already hangs. */
.chat-composer {
  position: relative;
  z-index: var(--ds-z-sticky);
  background-color: var(--ds-bg-conversation);
}

/* The Atendimento's strips (notices, the channel bar, the form's box) were each a padded opaque row; in the band they are the band. */
.composer-band :is(.cs-composer-strip, .cs-composer-body) {
  padding-inline: 0;
  background-color: transparent;
}

.composer-band form.composer { padding: 0; }

/* Over the Atendimento's channel bar, not on it: the tray floats above the whole band, at the pill's edge. */
.composer-band > .cs-composer-body .ds-attachment-tray {
  inset-inline-start: var(--ds-composer-inset);
  max-inline-size: calc(100% - 2 * var(--ds-composer-inset));
}

/* One line sits on the pill's middle with the buttons; more lines grow it upwards and the buttons stay by the last one. */
#composer .composer-pill { padding-block: calc((var(--ds-composer-height) - var(--ds-composer-control)) / 2 - 1px); }
#composer lexxy-editor { padding-block: calc((var(--ds-composer-control) - 1lh) / 2); }
.chat-composer > .ds-wallpaper { z-index: -1; }

/* Pausing a recording is a computer's control, as in WhatsApp Web; while paused the dot rests and the button offers the microphone back. */
.cs-rec__pause {
  --hover-size: 0;
  display: none;
  place-items: center;
  inline-size: 36px;
  block-size: 36px;
  flex-shrink: 0;
  padding: 0;
  border: 0;
  border-radius: var(--ds-radius-full);
  background: transparent;
  color: var(--ds-negative);
  cursor: pointer;
  transition: background-color var(--ds-duration-fast);
}

@media (any-hover: hover) {
  .cs-rec__pause:hover { background-color: var(--ds-fill-hover); }
}

.cs-rec__pause:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: 0; }
.cs-rec__resume-icon,
[data-audio-composer-paused] .cs-rec__pause-icon { display: none; }
[data-audio-composer-paused] .cs-rec__resume-icon { display: contents; }
[data-audio-composer-paused] .chat-voice .cs-rec__dot { animation: none; opacity: 0.4; }

/* On a computer the recording gathers on the right, as WhatsApp Web's: trash, dot and time, the wave, pause and send. */
@media (min-width: 100ch) {
  .chat-voice .cs-rec { justify-content: flex-end; gap: var(--ds-space-3); }
  .chat-voice .cs-rec__wave { flex: 0 0 8rem; }
  .chat-voice .cs-rec__pause { display: grid; }
}

/* v5: one line of the Atendimento's field sits on the pill's middle with the buttons, as the Chat's editor does. */
:where(html[data-visual="v5"]) form.composer textarea[data-customer-support--composer-target="input"] {
  padding-block: calc((var(--ds-composer-control) - 1lh) / 2);
}