/* The connection status takes no room while the socket is up; offline it is the amber dot, with the words where they fit. */
.ds-connection-status {
  display: none;
  align-items: center;
  gap: 6px;
  flex: none;
  color: var(--ds-text-secondary);
  font-size: var(--ds-status-font-sm);
  line-height: 16px;
  white-space: nowrap;
}

.ds-connection-status--offline { display: inline-flex; }

.ds-connection-status__dot {
  inline-size: 8px;
  block-size: 8px;
  flex: none;
  border-radius: var(--ds-radius-full);
  background: var(--ds-warning);
  animation: ds-connection-status-pulse 1.6s ease-in-out infinite;
}

@keyframes ds-connection-status-pulse { 50% { opacity: 0.35; } }

@media (prefers-reduced-motion: reduce) {
  .ds-connection-status__dot { animation: none; }
}

/* The group's single-check line is the thin notice where the bar has room; the info icon stands in for it below. */
.cs-composer-bar .composer-channel > .composer-channel__hint--icon { display: none; flex: none; }

/* v5: one low line of 28 px controls over the composer, measured in px like the notices, the same on the phone and the computer. */
:where(html[data-visual="v5"]) .composer-band > .cs-composer-bar {
  container: composer-bar / inline-size;
  padding-block-start: 8px;
}

:where(html[data-visual="v5"]) .composer-band:has(> .cs-composer-bar) :is(#composer, form.composer) { margin-block-start: 6px; }

:where(html[data-visual="v5"]) .composer-band .composer-channel {
  min-block-size: var(--ds-composer-bar-control);
  padding-inline: 4px;
  column-gap: 6px;
  row-gap: 6px;
  font-size: var(--ds-status-font);
}

:where(html[data-visual="v5"]) .composer-band .composer-channel__lead {
  color: var(--ds-text-muted);
  font-size: var(--ds-status-font-sm);
}

:where(html[data-visual="v5"]) .composer-band .cs-composer-bar__right { gap: 8px; }

/* The channel picker and the action are one control: same height, radius and hover; only the picker keeps its fill at rest. */
:where(html[data-visual="v5"]) .composer-band .composer-channel :is(.composer-channel__summary, .composer-channel__single),
:where(html[data-visual="v5"]) .composer-band .cs-composer-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  block-size: var(--ds-composer-bar-control);
  min-block-size: 0;
  max-inline-size: none;
  padding: 0 10px;
  border: 0;
  border-radius: var(--ds-radius-full);
  color: var(--ds-text);
  font-size: var(--ds-status-font);
  font-weight: var(--ds-weight-medium);
  line-height: 1;
  white-space: nowrap;
}

:where(html[data-visual="v5"]) .composer-band .composer-channel .composer-channel__single { background: var(--ds-fill); }

/* The pickers are <details>: as a block their line box adds a fraction over the 28 px trigger, and the bar came out 36.19. */
:where(html[data-visual="v5"]) .composer-band .composer-channel > .composer-channel__dd { display: inline-flex; }

:where(html[data-visual="v5"]) .composer-band .cs-composer-action {
  background: transparent;
  color: var(--ds-text-secondary);

  > svg { inline-size: 16px; block-size: 16px; flex: none; }
}

:where(html[data-visual="v5"]) .composer-band .cs-composer-action--accent { color: var(--ds-on-cta-soft); font-weight: var(--ds-weight-semibold); }

@media (any-hover: hover) {
  :where(html[data-visual="v5"]) .composer-band .cs-composer-action:hover { background: var(--ds-fill-hover); color: var(--ds-text); }
  :where(html[data-visual="v5"]) .composer-band .cs-composer-action--accent:hover { color: var(--ds-on-cta-soft); }
}

:where(html[data-visual="v5"]) .composer-band .composer-channel :is(.composer-channel__summary, .composer-channel__single):focus-visible,
:where(html[data-visual="v5"]) .composer-band .cs-composer-action:focus-visible {
  outline: 2px solid var(--ds-focus-ring);
  outline-offset: 0;
}

:where(html[data-visual="v5"]) .composer-band .composer-channel .cs-channel-dropdown__icon { display: inline-flex; flex: none; }
:where(html[data-visual="v5"]) .composer-band .composer-channel .cs-channel-dropdown__icon svg { inline-size: 18px; block-size: 18px; }

/* "para" and "por" are one pill: the same fill, height, radius and caret. The person is her whole number; the canal is the
   name our number shows on WhatsApp, cut by an ellipsis, and the part of its number people say. Both whole in the menu and the tooltip. */
:where(html[data-visual="v5"]) .composer-band .composer-channel :is(.composer-channel__summary--recipient, .composer-channel__summary--compact, .composer-channel__single--compact) {
  > .composer-channel__summary-name {
    min-inline-size: 0;
    max-inline-size: 9rem;
    color: var(--ds-text);
    font-weight: var(--ds-weight-medium);
  }

  > .composer-channel__summary-number:not([hidden]) {
    display: inline;
    flex: none;
    overflow: visible;
    color: var(--ds-text);
    font-weight: var(--ds-weight-medium);
  }

  > .composer-channel__summary-sep { margin-inline: -2px; color: var(--ds-text-muted); }
  > .composer-channel__summary-sep + .composer-channel__summary-number { color: var(--ds-text-secondary); }
}

/* The name left the trigger for the menu, so there it is whole: a long one takes a second line instead of an ellipsis. */
:where(html[data-visual="v5"]) .composer-band .composer-channel__menu .composer-channel__item-name { white-space: normal; text-wrap: pretty; }

/* The window's deadline is a small chip: neutral while there is time, amber under 2 h, a stronger amber under 1 h, red closed. Its 12 px text keeps 5:1 on the fill. */
:where(html[data-visual="v5"]) .cs-window-timer {
  gap: 4px;
  block-size: var(--ds-status-height-sm);
  padding: 0 8px;
  border-radius: var(--ds-radius-full);
  background: var(--ds-fill);
  color: var(--ds-text-secondary);
  font-size: var(--ds-status-font-sm);
  font-weight: var(--ds-weight-medium);
  line-height: 1;
  font-variant-numeric: tabular-nums;

  > svg { inline-size: 12px; block-size: 12px; }
}

:where(html[data-visual="v5"]) .cs-window-timer--amber {
  background: color-mix(in oklch, var(--ds-warning) 14%, transparent);
  color: var(--ds-warning-text);
}

:where(html[data-visual="v5"]) .cs-window-timer--urgent {
  background: color-mix(in oklch, var(--ds-warning) 22%, transparent);
  font-weight: var(--ds-weight-semibold);
}

:where(html[data-visual="v5"]) .cs-window-timer--closed {
  background: color-mix(in oklch, var(--ds-negative) 12%, transparent);
  color: var(--ds-negative);
}

@container composer-bar (width < 760px) {
  .cs-composer-bar .composer-channel > .composer-channel__hint--line { display: none; }
  .cs-composer-bar .composer-channel > .composer-channel__hint--icon { display: inline-grid; }
}

/* Narrow, the bar keeps its line: the lead goes, the actions are their icons in a 28 px circle, the deadline is the clock and the time (or Fechada),
   offline is the dot alone. What left the screen is still read out, and the tooltip says it on hover. */
@container composer-bar (width < 520px) {
  .composer-channel__lead { display: none; }

  .cs-composer-action:has(> .cs-composer-action__label) { inline-size: var(--ds-composer-bar-control); padding: 0; justify-content: center; }

  .cs-window-timer[data-short]::after { content: attr(data-short) / ""; }

  /* The dot keeps its 8 px in the line and reaches 20 px for the pointer. */
  .ds-connection-status { padding: 6px; margin: -6px; }

  /* The canal keeps its name, shorter, and leaves the number to the menu. */
  .composer-band .composer-channel :is(.composer-channel__summary--compact, .composer-channel__single--compact) {
    > .composer-channel__summary-name { max-inline-size: 8rem; }
    > :is(.composer-channel__summary-sep, .composer-channel__summary-number:not([hidden])) { display: none; }
  }

  /* The customer's number is in the header already; narrow, the recipient pill is the face, with the number in the tooltip and the menu. */
  :is(.cs-composer-action__label, .ds-connection-status__label, .cs-window-timer[data-short] > .cs-window-timer__text, [data-cs-recipient-label]) {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* The channel search is focused by the opening, not by the person: no focus line until they type or click in it. */
.cs-channel-dropdown[data-quiet-focus] .composer-channel__search.cs-search:focus-within { outline: none; }

/* Under each of the contact's numbers, the name the person uses on WhatsApp there; a long one ends in an ellipsis. */
.composer-channel__item-whatsapp-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* How many atendimentos went through that number or canal, whole: a long WhatsApp name is the one that gives way. */
.composer-channel__item-count { flex: none; white-space: nowrap; }
/* The canal's line is full with its number, kind and window, so there the count closes the item on a line of its own. */
.composer-channel__dd .composer-channel__item:not([data-to-number]) .composer-channel__item-meta:has(> .composer-channel__item-count) { flex-wrap: wrap; row-gap: 1px; }
.composer-channel__dd .composer-channel__item:not([data-to-number]) .composer-channel__item-count { flex-basis: 100%; }
/* The chosen number is bold; its second line stays as quiet as the others. */
.composer-channel__dd .composer-channel__item-meta { font-weight: 400; }

/* A note leaves through no canal: the recipient and canal pills, their leads, the delivery hint and the deadline step aside.
   Stated by the bar after every display its pickers set, so no picker (a <details> made inline-flex, a pill) shows through. */
.cs-composer--note .cs-composer-bar .composer-channel > :is(.composer-channel__lead, .composer-channel__dd, .composer-channel__single, .composer-channel__hint),
.cs-composer--note .cs-composer-bar .cs-composer-bar__right > .cs-window-timer { display: none; }