.cs-shell {
  --cs-detail-width: var(--ds-side-panel-width);
  --cs-conversation-min: 562px;
  --module-list-width: clamp(
    300px,
    100vw - var(--rail-width) - var(--cs-detail-width) - var(--cs-conversation-min),
    374px
  );
}

.composer--sending .composer-pill {
  opacity: 0.6;
  cursor: wait;
}

.composer--sending .cs-rec {
  pointer-events: none;
}

.cs-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.5rem 0.35rem 0.25rem;
}
.cs-attachments[hidden] { display: none; }

.cs-attachment {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  max-width: 220px;
  padding: 0.25rem 0.35rem 0.25rem 0.4rem;
  border-radius: 0.6rem;
  background: var(--bg-subtle);
  color: var(--txt);
  font-size: 0.8rem;
}

.cs-attachment__thumb {
  width: 28px;
  height: 28px;
  border-radius: 0.4rem;
  object-fit: cover;
  flex-shrink: 0;
}

.cs-attachment__icon {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--txt-muted);
}
.cs-attachment__icon[hidden] { display: none; }

.cs-attachment__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.cs-attachment__remove {
  --hover-size: 0;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--txt-muted);
  cursor: pointer;
  transition: color 0.12s, background-color 0.12s;
}
.cs-attachment__remove:hover {
  color: var(--txt);
  background: var(--hover);
}

.cs-attach-error {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0.35rem 0.25rem;
  padding: 0.35rem 0.6rem;
  border-radius: 0.6rem;
  font-size: 0.8rem;
  color: var(--color-negative);
  background: color-mix(in oklch, var(--color-negative) 10%, transparent);
}
.cs-attach-error[hidden] { display: none; }

.composer-view-once[hidden] { display: none; }
.composer-view-once.is-active { color: var(--accent); }
/* v5: a toggle that is on says so by its ink, with no circle. */
:where(html[data-visual="v5"]) .composer-view-once.is-active { color: var(--ds-on-cta-soft); }

.composer-channel {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0 calc(var(--inline-space) + 1vw);
  min-width: 0;
  font-size: 0.8rem;
  color: var(--txt-muted);
}

.composer-channel__lead { flex: none; color: var(--txt-muted); }

.cs-composer-action {
  --hover-size: 0;
  flex: none;
  white-space: nowrap;
  background: transparent;
  color: var(--txt-muted);
  cursor: pointer;
  transition: background-color 0.12s, border-color 0.12s, color 0.12s;
}
.cs-composer-action:hover { background: var(--hover); }

.composer-channel__dd .cs-channel-dropdown__summary {
  border: 1px solid var(--color-border);
  color: var(--txt);
  max-width: 340px;
  border-radius: 999px;
}

.cs-composer-bar__right {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* Where the field cannot be, the notice takes the pill's place, on the notice scale in px. */
.composer-notice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  background: var(--color-bg-pure);
  border: 1px solid var(--color-border);
  border-radius: 24px;
  padding: 14px 16px;
  color: var(--txt-muted);
}
.composer-notice .composer-hint {
  block-size: auto;
  margin-block-start: 1px;
  color: var(--txt-muted);
}
.composer-notice .composer-hint svg { inline-size: 16px; block-size: 16px; }
.composer-notice__text {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: var(--ds-status-font);
  line-height: 18px;
}
.composer-notice--blocked {
  border-color: color-mix(in oklch, var(--color-negative) 35%, transparent);
  background: color-mix(in oklch, var(--color-negative) 9%, transparent);
}
.composer-notice--blocked .composer-hint { color: var(--color-negative); }
.composer-notice--blocked .composer-notice__text p { margin: 0; }
.composer-notice__title { font-weight: 600; color: var(--txt); }
.composer-notice__link { color: var(--accent-strong); font-weight: 600; text-decoration: underline; }
.composer-notice__actions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.composer-notice__actions form { display: contents; }

/* v5: one line centred in the pill's height, in its shape and fill; blocked says so by its ink, not by a red box. */
:where(html[data-visual="v5"]) .composer-notice {
  padding-block: calc((var(--ds-composer-height) - 18px) / 2 - 1px);
  border-color: transparent;
  border-radius: calc(var(--ds-composer-height) / 2);
  background: var(--ds-composer-field);
}

:where(html[data-visual="v5"]) main:has(.ds-wallpaper-host) .composer-notice { background: var(--ds-composer-field-chat); }
:where(html[data-visual="v5"]) .composer-notice--blocked { border-color: transparent; }
:where(html[data-visual="v5"]) .composer-notice--blocked :is(.composer-hint, .composer-notice__title) { color: var(--ds-negative); }
:where(html[data-visual="v5"]) .composer-notice__text { color: var(--ds-text-secondary); }
:where(html[data-visual="v5"]) .composer-notice__link { color: var(--ds-link); }

.composer-channel__single,
.cs-composer-action {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
  max-width: 340px;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--txt);
}

.composer-channel__summary { max-width: 340px; min-width: 0; }
.composer-channel__summary-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  color: var(--txt);
}
.composer-channel__summary-number {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--txt-muted);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.composer-channel__summary-number:empty { display: none; }

.composer-channel__dd .cs-channel-dropdown__menu {
  inset-block-start: auto;
  inset-block-end: calc(100% + 6px);
  inset-inline-start: 0;
  inset-inline-end: auto;
  min-width: 300px;
  max-width: 360px;
  max-height: 320px;
  overflow-y: auto;
  border-radius: 14px;
  padding: 0.4rem;
}
.composer-channel__dd .composer-channel__item {
  align-items: center;
  gap: 0.55rem;
  padding: 0.3rem 0.5rem;
  border-radius: 10px;
  width: 100%;
  text-align: left;
}
.composer-channel__dd .composer-channel__item + .composer-channel__item { margin-block-start: 3px; }
.composer-channel__item[hidden] { display: none; }
.composer-channel__dd .composer-channel__item:hover,
.composer-channel__dd .composer-channel__item:focus-visible {
  background-color: color-mix(in oklch, var(--txt) 8%, transparent);
}
.composer-channel__dd .composer-channel__item.is-selected {
  background-color: color-mix(in oklch, var(--accent) 11%, transparent);
}
/* Opaque, so the seal keeps its contrast on the tinted row of the chosen channel. */
.composer-channel__dd .cs-status-badge--disconnected {
  background-color: color-mix(in oklch, var(--color-negative) 12%, var(--color-bg));
}
.composer-channel__item-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1 1 auto;
}
.composer-channel__item-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 500;
  color: var(--txt);
}
.composer-channel__item-meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 11.5px;
  color: var(--txt-muted);
}
.composer-channel__item-number { font-variant-numeric: tabular-nums; white-space: nowrap; }
.composer-channel__item-kind { font-weight: 600; white-space: nowrap; }
.composer-channel__item-sep { color: var(--txt-muted); }
.composer-channel__item-check {
  flex: none;
  margin-inline-start: auto;
  display: inline-flex;
  color: var(--accent);
}
/* The canais of one number sit under it in the menu's own column; the wrapper only carries the group. */
.composer-channel__group:not([hidden]) { display: contents; }

.composer-channel__empty {
  margin: 0;
  padding: 0.45rem 0.5rem;
  text-align: center;
  font-size: 12px;
  color: var(--txt-muted);
}

.composer-reply {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-block-end: 0.4rem;
  padding: 0.4rem 0.5rem 0.4rem 0.75rem;
  border-radius: 0.5rem;
  background: color-mix(in oklch, var(--accent) 9%, var(--bg-pure));
  overflow: hidden;
}
.composer-reply__bar {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 4px;
  background: var(--accent);
}
.composer-reply__body {
  flex: 1;
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.composer-reply__author {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.composer-reply__text {
  font-size: 0.82rem;
  color: var(--txt-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.composer-reply__episode {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.composer-reply__thumb {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 4px;
  object-fit: cover;
}
.composer-reply__cancel {
  --hover-size: 0;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  padding: 0.25rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--txt-muted);
  cursor: pointer;
}
.composer-reply__cancel:hover { color: var(--txt); }

/* v5: the quote over the field is a box in the pill's own fill, said by its author and not by a stripe down its side;
   the author in the soft green ink, the text secondary, and the X a round button like the pill's. */
:where(html[data-visual="v5"]) .composer-reply {
  margin-block-end: var(--ds-space-2);
  padding: var(--ds-space-2) var(--ds-space-1) var(--ds-space-2) var(--ds-space-4);
  border-radius: var(--ds-radius-xl);
  background: var(--ds-composer-field);
}

:where(html[data-visual="v5"]) main:has(.ds-wallpaper-host) .composer-reply { background: var(--ds-composer-field-chat); }
:where(html[data-visual="v5"]) .composer-reply__bar { display: none; }
:where(html[data-visual="v5"]) .composer-reply__author { color: var(--ds-on-cta-soft); font-size: var(--ds-font-size-xs); }
:where(html[data-visual="v5"]) .composer-reply__episode { color: var(--ds-text-muted); font-size: var(--ds-font-size-2xs); }
:where(html[data-visual="v5"]) .composer-reply__text { color: var(--ds-text-secondary); font-size: var(--ds-font-size-sm); }

:where(html[data-visual="v5"]) .composer-reply__cancel {
  inline-size: 32px;
  block-size: 32px;
  padding: 0;
  color: var(--ds-text-secondary);
  transition: background-color var(--ds-duration-fast);
}

@media (any-hover: hover) {
  :where(html[data-visual="v5"]) .composer-reply__cancel:hover { background: var(--ds-fill-hover); color: var(--ds-text); }
}

.composer-pill textarea {
  padding: 0;
  display: block;
}

.composer-pill textarea:focus,
.composer-pill textarea:focus-visible {
  box-shadow: none;
  outline: none;
}

aside label > input[type="search"],
aside label > input[type="search"]:focus,
aside label > input[type="search"]:focus-visible {
  box-shadow: none !important;
  outline: none !important;
  outline-offset: 0 !important;
}

.cs-day-sep { inline-size: 100%; }

.cs-msg {
  padding-inline: 1rem;
  padding-block: 0;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  align-items: center;
  --cs-msg-gap: 0.4rem;
  gap: var(--cs-msg-gap);
}
.cs-msg + .cs-msg { margin-block-start: 2px; }
.cs-msg--continued { margin-block-start: 2px; }
/* A new author, including an attendant, starts a separate visual sequence. */
.cs-msg + .cs-msg.cs-msg--tail { margin-block-start: 10px; }
/* v5: the Chat's breath between runs. */
:where(html[data-visual="v5"]) .cs-msg + .cs-msg.cs-msg--tail:not(.cs-msg--chat) { margin-block-start: 8px; }
.cs-msg--me { flex-direction: row; justify-content: flex-end; }

.cs-msg:has(.cs-msg__menu.is-open) { z-index: 5; position: relative; }

.cs-msg__attendant-avatar,
.cs-msg__contact-avatar {
  flex-shrink: 0;
  align-self: flex-start;
  margin-block-start: 1px;
  padding: 0;
  border: 0 !important;
  background: transparent;
  box-shadow: none !important;
  outline: none !important;
  border-radius: 50%;
}
.cs-msg__attendant-avatar {
  margin-inline-start: calc(12.4px - var(--cs-msg-gap));
  cursor: pointer;
  transition: transform 0.12s ease;
}
.cs-msg__attendant-avatar:hover { transform: scale(1.05); }
.cs-msg__attendant-avatar:focus-visible { outline: 2px solid var(--ds-focus-ring) !important; outline-offset: 0; }
.cs-msg__attendant-avatar .avatar,
.cs-msg__attendant-avatar img,
.cs-msg__attendant-avatar .avatar-monogram,
.cs-msg__contact-avatar .avatar,
.cs-msg__contact-avatar img,
.cs-msg__contact-avatar .avatar-monogram {
  width: 28px;
  height: 28px;
  border-radius: 50%;
}
/* 12.4px from avatar to bubble whatever the row's gap, which is what the run's next bubbles indent by. */
.cs-msg__contact-avatar { margin-inline-end: calc(12.4px - var(--cs-msg-gap)); }
.cs-via-app-avatar {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #25d366;
  color: #ffffff;
}
.cs-via-app-avatar svg { display: block; }
.cs-msg.cs-msg--me:not(:has(.cs-msg__attendant-avatar)) .cs-msg__bubble { margin-inline-end: calc(28px + 12.4px); }
.cs-msg--group-contact:not(.cs-msg--tail) .cs-msg__bubble { margin-inline-start: calc(28px + 12.4px); }

.cs-jump-to-latest {
  position: absolute;
  bottom: 6rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  background-color: var(--color-border-strong);
  box-shadow: none !important;
  outline: none !important;
}
/* v5: a round button on the paper, set apart by its tone, as WhatsApp's. */
:where(html[data-visual="v5"]) .cs-jump-to-latest { background-color: var(--ds-bg-pure); color: var(--ds-text-muted); }
@media (any-hover: hover) {
  :where(html[data-visual="v5"]) .cs-jump-to-latest:hover { background-color: var(--ds-fill-hover); color: var(--ds-text); }
}

.cs-msg__bubble {
  position: relative;
  max-inline-size: var(--bubble-width);
  padding: var(--bubble-padding);
  border-radius: var(--bubble-radius);
  background: var(--ds-msg-in);
  --cs-bubble-bg: var(--ds-msg-in);
  box-shadow: 0 1px 0.5px oklch(0 0 0 / 0.13);
  color: var(--ds-msg-in-text);
  font-size: var(--bubble-font-size);
  line-height: var(--bubble-line-height);
  overflow-wrap: anywhere;
}

.cs-msg--me .cs-msg__bubble {
  background: #d9fdd3;
  --cs-bubble-bg: #d9fdd3;
}

.cs-msg__sender {
  display: block;
  margin-block-end: 2px;
  color: oklch(0.43 0.1 165);
  font-size: 12px;
  font-weight: 600;
}
.cs-msg__sender-phone,
.cs-msg__sender-profile {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cs-msg__sender-phone { color: var(--txt); }

[data-theme="dark"] .cs-msg__sender,
:root:not([data-theme]) .cs-msg__sender {
  color: oklch(0.82 0.09 165);
}

.cs-msg.cs-msg--tail:not(.cs-msg--me) .cs-msg__bubble {
  border-top-left-radius: 0;
}
.cs-msg.cs-msg--tail.cs-msg--me .cs-msg__bubble {
  border-top-right-radius: 0;
}
.cs-msg.cs-msg--tail:not(.cs-msg--me) .cs-msg__bubble::before {
  content: "";
  position: absolute;
  top: 0;
  left: -8px;
  width: 0;
  height: 0;
  border-top: 10px solid var(--ds-msg-in);
  border-left: 8px solid transparent;
  filter: drop-shadow(0 1px 0.5px oklch(0 0 0 / 0.13));
}
.cs-msg.cs-msg--tail.cs-msg--me .cs-msg__bubble::before {
  content: "";
  position: absolute;
  top: 0;
  right: -8px;
  width: 0;
  height: 0;
  border-top: 10px solid #d9fdd3;
  border-right: 8px solid transparent;
  filter: drop-shadow(0 1px 0.5px oklch(0 0 0 / 0.13));
}

.cs-msg__pill {
  display: block;
  margin-block-end: 0.25rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: color-mix(in oklch, currentColor 55%, transparent);
}

.cs-msg__channel {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  min-width: 0;
  max-width: 12ch;
}

.cs-msg__channel svg { flex-shrink: 0; }

.cs-msg__meta-sep { flex-shrink: 0; opacity: 0.6; }

.cs-msg__channel-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cs-msg__body { display: inline; word-wrap: break-word; }
.cs-msg__body p { display: inline; margin: 0; }
.cs-msg__body p + p { display: block; margin-block-start: 0.35rem; }
.cs-msg__body kbd {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.9em;
  background: color-mix(in oklch, currentColor 10%, transparent);
  padding-inline: 0.3em;
  border-radius: 0.3em;
}

.cs-voice {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  margin-block-end: 0.25rem;
  padding-block: 0.25rem;
}

.cs-msg__bubble:has(.cs-voice),
.cs-msg__bubble:has(.cs-msg__contact-card) {
  inline-size: min(340px, 100%);
}

.cs-msg__bubble:has(.cs-msg__contact-card) {
  display: flex;
  flex-direction: column;
}
.cs-msg__bubble:has(.cs-msg__contact-card) .cs-msg__contact-actions { order: 2; }
.cs-msg__bubble:has(.cs-msg__contact-card) .cs-msg__reactions { order: 3; }

.cs-voice__avatar {
  position: relative;
  flex-shrink: 0;
}

.cs-voice__mic {
  position: absolute;
  left: -4px;
  bottom: -4px;
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-foreground);
}

.cs-voice__play {
  --hover-size: 0;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-foreground);
  cursor: pointer;
  transition: background-color 0.15s;
}

.cs-voice__play:hover { background: var(--accent-strong); }

.cs-voice__icon { display: grid; place-items: center; }
.cs-voice__icon--pause { display: none; }
.cs-voice--playing .cs-voice__icon--play { display: none; }
.cs-voice--playing .cs-voice__icon--pause { display: grid; }

.cs-voice--failed .cs-voice__play,
.cs-voice--failed .cs-voice__wave { opacity: 0.4; }
.cs-voice--failed .cs-voice__time { opacity: 1; font-variant-numeric: normal; }

.cs-voice__wave {
  flex: 1;
  min-width: 0;
  height: 28px;
  color: var(--accent);
  cursor: pointer;
}

.cs-voice__time {
  flex-shrink: 0;
  min-width: 4ch;
  font-size: 0.65rem;
  font-variant-numeric: tabular-nums;
  color: var(--txt-muted);
}

.cs-rec {
  display: none;
  position: absolute;
  /* The stage already sits inside the pill's padding: repeating it here pushed the band off the row. */
  inset: 0;
  align-items: center;
  gap: 0.5rem;
}

/* The microphone error is a negative ds_notice (its scale and tone); this only spaces it from the pill. */
.cs-rec-notice { margin-block-end: 8px; }

.composer-stage { position: relative; width: 100%; }
#composer[data-recorder-state="recording"] .composer-row,
#composer[data-recorder-state="paused"] .composer-row { visibility: hidden; }
#composer[data-recorder-state="recording"] [data-cs-rec="recording"] { display: flex; }
#composer[data-recorder-state="paused"] [data-cs-rec="paused"] { display: flex; }

.cs-rec__delete {
  --hover-size: 0;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--txt-muted);
  cursor: pointer;
  transition: color 0.15s;
}

.cs-rec__delete:hover { color: var(--color-negative); }

.cs-rec__dot {
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-negative);
  animation: cs-rec-pulse 1.2s ease-in-out infinite;
}

@keyframes cs-rec-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

#composer[data-recorder-arming] .cs-rec__dot {
  background: var(--txt-muted);
  animation: cs-rec-arming 1s ease-in-out infinite;
}

#composer[data-recorder-arming] .cs-rec__timer { color: var(--txt-muted); }

@keyframes cs-rec-arming {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.7; }
}

@media (prefers-reduced-motion: reduce) {
  .cs-rec__dot { animation: none; }
  #composer[data-recorder-arming] .cs-rec__dot { animation: none; }
}

.cs-rec__timer {
  flex-shrink: 0;
  min-width: 3.5ch;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  color: var(--color-negative);
}

.cs-rec__wave {
  flex: 1;
  min-width: 0;
  height: 30px;
  color: var(--accent);
}

.cs-rec__ctrl {
  --hover-size: 0;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-foreground);
  cursor: pointer;
  transition: background-color 0.15s;
}

.cs-rec__ctrl:hover { background: var(--accent-strong); }

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

.cs-rec__send:active { transform: scale(0.92); }

@media (any-hover: hover) {
  .cs-rec__send:hover { opacity: 0.85; }
}

/* v5, as the Chat's recording: the send is the only green; pause is a quiet red control, the microphone that resumes and the play that listens are quiet buttons. */
:where(html[data-visual="v5"]) form.composer :is(.cs-rec__ctrl, .cs-rec .cs-voice__play) {
  inline-size: var(--ds-composer-control);
  block-size: var(--ds-composer-control);
  background: transparent;
  color: var(--ds-text-secondary);
  transition: background-color var(--ds-duration-fast), color var(--ds-duration-fast);
}

:where(html[data-visual="v5"]) form.composer [data-cs-rec="recording"] .cs-rec__ctrl { color: var(--ds-negative); }

@media (any-hover: hover) {
  :where(html[data-visual="v5"]) form.composer :is(.cs-rec__ctrl, .cs-rec .cs-voice__play):hover { background: var(--ds-fill-hover); }
}

/* On a computer the recording gathers on the right, as WhatsApp Web's and the Chat's. */
@media (min-width: 100ch) {
  :where(html[data-visual="v5"]) form.composer .cs-rec { justify-content: flex-end; gap: var(--ds-space-3); }
  :where(html[data-visual="v5"]) form.composer .cs-rec :is(.cs-rec__wave, .cs-voice__wave) { flex: 0 0 8rem; }
}

.cs-msg__media {
  display: block;
  max-width: 100%;
  margin-block-end: 0.25rem;
  border-radius: 6px;
  overflow: hidden;
}

.cs-msg__media img,
video.cs-msg__media {
  display: block;
  max-width: 100%;
  max-height: 320px;
  border-radius: 6px;
}

/* The box comes from the picture's own shape (media_box_style), so nothing jumps when it loads. */
.cs-msg__media--image,
.cs-msg__media--video { aspect-ratio: var(--media-ratio, auto); }

.cs-msg__media--image {
  position: relative;
  width: 320px;
  max-width: 100%;
  max-height: 400px;
  min-height: 120px;
  background: color-mix(in oklch, currentColor 8%, transparent);
}
.cs-msg__media--image img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 400px;
  object-fit: contain;
}
.cs-msg__bubble:has(.cs-msg__media) {
  max-inline-size: min(65%, 336px);
}
.cs-msg__album { display: grid; gap: 2px; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: hidden; border-radius: 6px; }
.cs-msg__album-item { aspect-ratio: 1; margin: 0; min-height: 0; position: relative; width: 100%; }
.cs-msg__album-item > .cs-msg__media { height: 100%; margin: 0; max-height: none; min-height: 0; width: 100%; }
.cs-msg__album-item :is(img, video) { height: 100%; max-height: none; object-fit: cover; width: 100%; }
.cs-msg__album-item:nth-child(n + 5) { display: none; }
.cs-msg__album-item:nth-child(4)[data-album-extra]:not([data-album-extra="0"])::after { align-items: center; background: oklch(0 0 0 / 0.58); border-radius: 6px; color: white; content: "+" attr(data-album-extra); display: flex; font-size: 1.35rem; font-weight: 700; inset: 0; justify-content: center; pointer-events: none; position: absolute; }
.cs-msg__album-item:not(:hover) > .cs-msg__menu:not(.is-open) { opacity: 0; pointer-events: none; }

.cs-msg__media--video {
  position: relative;
  display: block;
  width: min(320px, 100%);
  cursor: pointer;
}
.cs-msg__media--video video {
  display: block;
  width: 100%;
  max-height: 400px;
  border-radius: 6px;
  pointer-events: none;
}
/* A gif plays on its own, so it needs no button. It needs to say what it is, which is the one thing
   that separated it from a video that simply did not start. */
.cs-msg__gif { position: relative; display: block; }

.cs-msg__media-gif {
  position: absolute;
  inset-block-end: 0.55rem;
  inset-inline-start: 0.4rem;
  padding: 0.05rem 0.3rem;
  border-radius: 4px;
  background: oklch(0 0 0 / 0.6);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  pointer-events: none;
}

/* The place is already the right size because the picture is the one being sent. What is missing is
   only the delivery, so the mark that it is on its way sits over it instead of replacing it. */
.cs-msg__media--sending { position: relative; display: block; opacity: 0.75; }

.cs-msg__file--sending { display: inline-flex; align-items: center; gap: 0.4rem; opacity: 0.75; }

.cs-msg__media-wait {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid oklch(1 0 0 / 0.35);
  border-top-color: oklch(1 0 0 / 0.9);
  animation: cs-voice-spin 700ms linear infinite;
}

.cs-msg__file--sending .cs-msg__media-wait {
  position: static;
  width: 16px;
  height: 16px;
  border-color: oklch(0 0 0 / 0.2);
  border-top-color: oklch(0 0 0 / 0.55);
}

.cs-msg__media-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: oklch(0 0 0 / 0.55);
  display: grid;
  place-items: center;
}
.cs-msg__media-play::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 17px;
  border-color: transparent transparent transparent #fff;
  margin-left: 4px;
}

.cs-msg__file {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-block-end: 0.25rem;
  padding: 0.45rem 0.55rem;
  border-radius: 8px;
  background: color-mix(in oklch, currentColor 7%, transparent);
}

.cs-msg__file-open {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  flex: 1;
  color: currentColor;
  text-decoration: none;
}

/* In v5, as in WhatsApp, hovering a file underlines nothing: the whole pill is the target. */
:root:not([data-visual="v5"]) a.cs-msg__file-open:hover .cs-msg__file-name { text-decoration: underline; }

.cs-msg__file-name {
  overflow-wrap: anywhere;
  line-height: 1.2;
}

.cs-msg__file-size {
  margin-inline-start: auto;
  padding-inline-start: 0.4rem;
  font-size: 0.78em;
  white-space: nowrap;
  color: color-mix(in oklch, currentColor 60%, transparent);
}

.cs-msg__file-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cs-msg__file--row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 0.55rem;
  min-height: 64px;
  padding: 0.5rem 0.55rem 0.5rem 0.7rem;
  border-radius: 6px;
}
.cs-msg__file--row .cs-msg__file-open {
  display: grid;
  grid-template-columns: auto max-content minmax(0, 1fr);
  align-items: center;
  gap: 0.15rem 0;
}
.cs-msg__file--row .cs-msg__file-open > svg { grid-row: 1 / 3; margin-inline-end: 0.55rem; }
.cs-msg__file--row .cs-msg__file-name { grid-column: 2 / 4; grid-row: 1; align-self: end; line-height: 1.25; }
.cs-msg__file--row .cs-file-face__kind,
.cs-msg__file--row .cs-msg__file-size {
  grid-row: 2;
  align-self: start;
  font-size: 0.78em;
  line-height: 1.3;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: color-mix(in oklch, currentColor 60%, transparent);
}
.cs-msg__file--row .cs-file-face__kind { grid-column: 2; }
.cs-msg__file--row .cs-file-face__kind::after { content: "\00a0·\00a0"; }
.cs-msg__file--row .cs-msg__file-size { grid-column: 3; margin-inline-start: 0; padding-inline-start: 0; }
.cs-msg__file-actions { display: flex; align-self: center; flex-shrink: 0; gap: 0.25rem; }
.cs-msg__file-download[hidden] { display: none; }

/* A raised chip in the bubble's own colour, in the corner the round actions leave free. */
@media (hover: hover) {
  .cs-msg__bubble:has(.cs-msg__file--row) .cs-msg__menu {
    top: 3px;
    right: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: transparent !important;
  }
  .cs-msg__bubble:has(.cs-msg__file--row) .cs-msg__menu-trigger {
    width: 20px;
    height: 20px;
    margin: 0;
    border-radius: 50%;
    background: var(--cs-bubble-bg);
    color: color-mix(in oklch, currentColor 70%, transparent);
    box-shadow: 0 1px 2px oklch(0 0 0 / 0.22) !important;
  }
  .cs-msg__bubble:has(.cs-msg__file--row) .cs-msg__menu-trigger:hover { color: currentColor; }
}

.cs-msg__file--pdf {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  width: min(320px, 100%);
  padding: 0;
  border-radius: 6px;
  overflow: hidden;
}

.cs-msg__bubble:has(.cs-msg__file--pdf),
.cs-msg__bubble:has(.cs-msg__file--row),
.cs-msg__bubble:has(.cs-msg__album) {
  inline-size: min(65%, 336px);
}
@media (max-width: 40rem) {
  .cs-msg__bubble:has(.cs-msg__file) { max-inline-size: min(85%, 336px); }
  .cs-msg__bubble:has(.cs-msg__file--pdf),
  .cs-msg__bubble:has(.cs-msg__file--row) { inline-size: min(85%, 336px); }
}

.cs-msg__file--pdf .cs-msg__file-open { display: contents; }
.cs-msg__pdf-cover {
  display: grid;
  grid-column: 1 / -1;
  place-items: center;
  aspect-ratio: 16 / 9;
  background: color-mix(in oklch, currentColor 8%, transparent);
  overflow: hidden;
}
/* The page's start, as WhatsApp shows it: a centred crop cut the title of a wide page on both sides. */
.cs-msg__pdf-cover canvas {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
}
.cs-msg__pdf-cover canvas[hidden], .cs-msg__pdf-cover [data-pdf-bubble-target="fallback"][hidden] { display: none; }
.cs-msg__pdf-footer {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 64px;
  padding: 0.5rem 0.55rem 0.5rem 0.7rem;
}
.cs-msg__pdf-details {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  flex: 1;
}
.cs-msg__pdf-text { display: grid; gap: 0.15rem; min-width: 0; }
.cs-msg__pdf-text .cs-msg__file-name,
.cs-msg__file--row .cs-msg__file-name {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.cs-msg__pdf-metadata {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 0.78em;
  color: color-mix(in oklch, currentColor 60%, transparent);
}
.cs-msg__pdf-actions {
  display: flex;
  align-self: center;
  flex-shrink: 0;
  margin-inline-end: 0.55rem;
  gap: 0.25rem;
}
.cs-msg__file-actions .cs-msg__file-download {
  --hover-size: 0;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid light-dark(oklch(0.48 0.12 131 / 0.25), oklch(0.8 0.12 131 / 0.35));
  border-radius: 50%;
  background: var(--cs-pdf-action);
  color: var(--accent);
  transition: background-color 150ms ease, border-color 150ms ease, transform 100ms ease;
}
.cs-msg__file-actions .cs-msg__file-download:hover {
  background: var(--cs-pdf-action-hover);
  color: var(--accent-strong);
}
.cs-msg__file-actions .cs-msg__file-download:focus-visible {
  outline: 2px solid var(--ds-focus-ring);
  outline-offset: 0;
}
.cs-msg__file-actions .cs-msg__file-download:active { transform: scale(0.92); }
@media (prefers-reduced-motion: reduce) {
  .cs-msg__file-actions .cs-msg__file-download { transition: none; }
  .cs-msg__file-actions .cs-msg__file-download:active { transform: none; }
}
.cs-msg__file-actions .cs-msg__file-download[data-downloading] svg {
  animation: cs-voice-spin 700ms linear infinite;
}
.cs-msg__bubble:has(.cs-msg__file--pdf) .cs-msg__meta {
  float: none;
  display: flex;
  justify-content: flex-end;
  margin: 0 0 2px;
}

.cs-msg__file svg { flex-shrink: 0; }

.cs-msg__location {
  display: block;
  width: min(15rem, 100%);
  overflow: hidden;
  margin-block-end: 0.25rem;
  border-radius: 8px;
  background: color-mix(in oklch, currentColor 7%, transparent);
  color: currentColor;
  text-decoration: none;
}
a.cs-msg__location:hover { background: color-mix(in oklch, currentColor 12%, transparent); }
.cs-msg__location-preview { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.cs-msg__location-preview img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cs-msg__location-details { display: flex; align-items: center; gap: 0.55rem; padding: 0.6rem; }
.cs-msg__location-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 6px;
  background: color-mix(in oklch, var(--accent) 18%, transparent);
  color: var(--accent);
}
.cs-msg__location-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.cs-msg__location-live { font-size: 0.8rem; font-weight: 700; }
.cs-msg__location-name { font-weight: 600; }
.cs-msg__location-addr,
.cs-msg__location-coords,
.cs-msg__location-unavailable,
.cs-msg__location-stale { font-size: 0.8rem; opacity: 0.75; }
.cs-msg__location-link { font-size: 0.72rem; color: var(--accent); }

.cs-msg__sticker {
  display: block;
  width: 160px;
  height: 160px;
  object-fit: contain;
  margin-block-end: 0.25rem;
}
.cs-msg__bubble:has(.cs-msg__sticker) {
  background: transparent !important;
  box-shadow: none !important;
  padding: 2px 0;
}
.cs-msg__bubble:has(.cs-msg__sticker)::before { display: none; }

.cs-msg__sticker-link {
  display: block;
  width: 160px;
  cursor: pointer;
  background: transparent;
}

.cs-sticker-preview {
  position: fixed;
  inset: 0;
  margin: auto;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 1rem;
  background: var(--bg-pure);
  color: var(--txt);
  box-shadow: 0 24px 48px oklch(0% 0 0 / 0.28);
  inline-size: min(320px, 90vw);
  block-size: fit-content;
  overflow: hidden;
}
.cs-sticker-preview::backdrop {
  background: oklch(0% 0 0 / 0.5);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.cs-sticker-preview__stage {
  min-block-size: min(56vw, 200px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  padding: 1.75rem 1.5rem 1.5rem;
}

.cs-sticker-preview__img {
  inline-size: min(56vw, 200px);
  block-size: auto;
  object-fit: contain;
}

.cs-sticker-preview__save {
  min-height: 2.5rem;
  padding-inline: 1.25rem;
}
.cs-sticker-preview__face {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.cs-sticker-preview__face--saved { display: none; }

.cs-sticker-preview[data-saved="true"] .cs-sticker-preview__face--unsaved { display: none; }
.cs-sticker-preview[data-saved="true"] .cs-sticker-preview__face--saved { display: inline-flex; }
.cs-sticker-preview[data-saved="true"] .cs-sticker-preview__save {
  background-color: var(--accent-soft);
  color: var(--accent);
  cursor: default;
  pointer-events: none;
}

.cs-sticker-preview__close {
  --hover-size: 0;
  position: absolute;
  inset-block-start: 0.55rem;
  inset-inline-end: 0.55rem;
  display: grid;
  place-items: center;
  inline-size: 1.9rem;
  block-size: 1.9rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--txt-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.cs-sticker-preview__close:hover {
  background: var(--hover);
  color: var(--txt);
}

.cs-contact-modal { inline-size: min(420px, 92vw); }
.cs-contact-modal__body { padding: 16px 16px 0; }
.cs-contact-modal__foot { display: flex; justify-content: flex-end; padding: 12px 16px 16px; }
.cs-pix-picker__body { padding-block-end: 16px; max-height: 70vh; overflow-y: auto; }
.cs-pix-picker__form, .cs-pix-picker__review { display: flex; flex-direction: column; gap: 1rem; }
.cs-pix-picker__keys { display: flex; flex-direction: column; gap: 0.25rem; margin: 0; padding: 0; border: 0; min-inline-size: 0; }
.cs-pix-picker__keys legend { display: block; float: inline-start; inline-size: 100%; margin-inline: 0; padding: 0; margin-block-end: 0.25rem; text-align: start; }
.cs-pix-picker__key {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem;
  border-radius: 0.5rem;
  cursor: pointer;
}
.cs-pix-picker__key:hover, .cs-pix-picker__key:has(input:checked) { background: var(--hover); }
.cs-pix-picker__key input[type="radio"] { appearance: auto; accent-color: var(--accent); margin: 0; flex-shrink: 0; }
.cs-pix-picker__key-text { display: flex; flex-direction: column; min-inline-size: 0; overflow-wrap: anywhere; }
.cs-pix-picker__row { display: flex; align-items: center; gap: 0.25rem; }
.cs-pix-picker__row > .cs-pix-picker__key { flex: 1; min-inline-size: 0; }
.cs-pix-picker__add { align-self: flex-start; }
.cs-pix-picker__subtitle { margin: 0 0 0.75rem; font-size: 14px; font-weight: 600; }
.cs-pix-picker__remove { display: flex; justify-content: flex-start; margin-block-start: 1rem; }
.cs-pix-picker__key-text small { color: var(--txt-muted); font-size: 12px; }
.cs-pix-picker__summary { display: flex; flex-direction: column; gap: 0.75rem; margin: 0; }
.cs-pix-picker__summary dt { color: var(--txt-muted); font-size: 12px; }
.cs-pix-picker__summary dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.cs-pix-picker__actions { display: flex; justify-content: flex-end; gap: 0.5rem; }
.cs-pix-picker__empty { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; }
.cs-pix-picker__empty p { margin: 0; }
.cs-contact-picker__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}
.cs-contact-picker__title { margin: 0; font-size: 15px; font-weight: 600; }
.cs-contact-picker__close {
  --hover-size: 0;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  border-radius: 0.5rem;
  color: var(--txt-muted);
}
.cs-contact-picker__close:hover { background: var(--hover); color: var(--txt); }
.cs-contact-picker__search {
  inline-size: 100%;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--bg);
  font-size: 13px;
}
.cs-contact-picker__body { max-height: calc(60vh - 84px); overflow-y: auto; }
.cs-contact-picker__list { display: flex; flex-direction: column; }
.cs-contact-picker__more { min-height: 1px; }
.cs-contact-picker__row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  border-radius: 0.5rem;
  cursor: pointer;
}
.cs-contact-picker__row:hover { background: var(--hover); }
.cs-contact-picker__row:has(input:checked) { background: var(--hover); }
.cs-contact-picker__row input[type="checkbox"] {
  appearance: auto;
  accent-color: var(--accent);
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  flex-shrink: 0;
  cursor: pointer;
}
.cs-dialog__error {
  margin: 0;
  padding: 1.25rem 0.5rem;
  font-size: 13px;
  color: var(--txt-muted);
  text-align: center;
}
.cs-contact-picker__empty {
  color: var(--txt-muted);
  font-size: 13px;
  text-align: center;
  padding: 1.5rem 0.5rem;
}

.cs-contact-card-modal { inline-size: min(420px, 92vw); }
.cs-contact-card-modal__body { padding: 18px; }
.cs-contact-card__head {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding-block-end: 0.875rem;
  border-block-end: 1px solid var(--border);
}
.cs-contact-card__avatar {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--hover);
  color: var(--txt-muted);
}
.cs-contact-card__heading { flex: 1; min-width: 0; }
.cs-contact-card__title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cs-contact-card__subtitle { margin: 0.125rem 0 0; font-size: 12px; color: var(--txt-muted); }
.cs-contact-card__close {
  --hover-size: 0;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  border-radius: 0.5rem;
  color: var(--txt-muted);
  cursor: pointer;
}
.cs-contact-card__close:hover { background: var(--hover); color: var(--txt); }
.cs-contact-card__person + .cs-contact-card__person { border-block-start: 1px solid var(--border); }
.cs-contact-card__person-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-block-start: 0.875rem;
}
.cs-contact-card__avatar--small { width: 28px; height: 28px; }
.cs-contact-card__person-naming { display: flex; flex-direction: column; min-width: 0; }
.cs-contact-card__person-name {
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cs-contact-card__person-trade { font-size: 12px; color: var(--txt-muted); }
.cs-contact-card__row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-block: 0.75rem;
}
.cs-contact-card__row-info { flex: 1; min-width: 0; }
.cs-contact-card__row form { margin: 0; flex-shrink: 0; }
.cs-contact-card__person-actions {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-inline-start: auto;
  flex-shrink: 0;
}
.cs-contact-card__person-actions form { margin: 0; }
.cs-contact-card__person-actions .cs-btn--small { white-space: nowrap; }
.cs-contact-card__person-actions .cs-btn--icon { min-height: 1.5rem; padding: 0.3rem; }
.cs-contact-card__row + .cs-contact-card__row { border-block-start: 1px solid var(--border); }
.cs-contact-card__number { display: block; font-size: 14px; font-weight: 600; }
.cs-contact-card__saved,
.cs-contact-card__unsaved {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-block-start: 0.125rem;
  font-size: 12px;
  color: var(--txt-muted);
}
.cs-contact-card__saved { color: var(--color-positive, var(--txt-muted)); }
.cs-contact-card__actions { display: flex; gap: 0.5rem; margin-block-start: 0.625rem; }
.cs-contact-card__actions form { margin: 0; }
.cs-contact-card__actions .cs-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  white-space: nowrap;
}
.cs-quick-reply-modal { inline-size: min(400px, 92vw); }

/* A lista quer ser estreita e o formulario quer espaco. Quem decide e o conteudo, lido pelo :has():
   trocar classe pelo JS obrigaria a lembrar disso nos tres pontos que injetam innerHTML. */
.cs-quick-reply-modal:has(.cs-quick-reply-picker__form) {
  inline-size: min(880px, 94vw);
  max-block-size: min(88dvh, 860px);
}
.cs-quick-reply-modal__body { padding: 16px; max-block-size: min(80dvh, 800px); overflow-y: auto; }
.cs-quick-reply-modal:has(.cs-quick-reply-picker__form) .cs-quick-reply-modal__body {
  max-block-size: none;
  min-block-size: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.cs-quick-reply-modal:has(.cs-quick-reply-picker__form) .cs-quick-reply-picker { min-block-size: 0; }

.cs-quick-reply-picker {
  display: flex;
  flex-direction: column;
  block-size: 100%;
}

/* O cabecalho leva o voltar e o fechar: rolar junto com um formulario alto e perder as duas saidas. */
.cs-quick-reply-picker__head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}
.cs-quick-reply-picker__title { margin: 0; font-size: 15px; font-weight: 600; }
.cs-quick-reply-suggest__empty,
.cs-quick-reply-suggest__no-match,
.cs-quick-reply-suggest__failed {
  color: var(--txt-muted);
  font-size: 13px;
  text-align: center;
  padding: 1.5rem 0.5rem;
  margin: 0;
}
.cs-quick-reply-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cs-quick-reply-item__send {
  /* Botao de largura cheia e arredondado: o anel do hover global e pintado FORA da caixa e o
     popover corta, sobrando so as pontas. O fundo abaixo ja e o mesmo do destaque do teclado. */
  --hover-size: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: var(--bg-subtle);
  text-align: left;
  cursor: pointer;
  transition: background-color 0.12s;
}
.cs-quick-reply-item__send:hover { background: var(--hover); }
.cs-quick-reply-item__send:disabled { opacity: 0.45; cursor: not-allowed; }

/* O lapis fica na lateral da linha, sem empurrar o texto: a linha toda continua clicavel. */
.cs-quick-reply-item { position: relative; }
/* Os dois botoes moram dentro de .cs-quick-reply-item__actions, que e quem se posiciona: absoluto
   aqui tambem empilharia um em cima do outro. */
.cs-quick-reply-item__edit,
.cs-quick-reply-item__delete {
  --hover-size: 0;
  display: inline-grid;
  place-items: center;
  inline-size: 1.4rem;
  block-size: 1.4rem;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--txt-muted);
  cursor: pointer;
}
.cs-quick-reply-item__edit:hover,
.cs-quick-reply-item__delete:hover { background: var(--bg-pure); color: var(--txt); }
.cs-quick-reply-picker__title { display: flex; align-items: center; gap: 0.35rem; }

/* Discreto de proposito: anexar e a excecao, escrever e o comum. */
.cs-qr-clip {
  --hover-size: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  width: fit-content;
  padding: 0.15rem 0.1rem;
  border: 0;
  background: none;
  color: var(--txt-muted);
  font-size: 0.7rem;
  cursor: pointer;
}
.cs-qr-clip:hover { color: var(--txt); }
.cs-quick-reply-item__shortcut { font-size: 12px; font-weight: 600; color: var(--accent); }
.cs-quick-reply-item__preview {
  font-size: 13px;
  color: var(--txt-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.cs-quick-reply-item__origin { display: flex; min-inline-size: 0; max-inline-size: 100%; }

/* Formulario a esquerda, o que chega no aparelho a direita. Estreito demais para duas colunas, elas
   viram uma so e a previa desce para baixo do formulario. */
.cs-quick-reply-picker__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 280px);
  gap: 20px;
  min-block-size: 0;
  overflow-y: auto;
}
@media (max-width: 760px) {
  .cs-quick-reply-picker__split { grid-template-columns: minmax(0, 1fr); }
}

.cs-qr-preview {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-inline-size: 0;
}
.cs-qr-preview__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--txt-muted);
}
.cs-qr-preview__phone {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-subtle, var(--hover));
  min-block-size: 120px;
}
/* The composer's bar at this form's size. A pressed button says the caret sits inside a marked
   span, which is what tells a second press from a first. */
.cs-wa-format { display: flex; align-items: center; gap: 2px; }
.cs-wa-format__btn {
  --hover-size: 0;
  display: grid;
  place-items: center;
  inline-size: 26px;
  block-size: 26px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--txt-muted);
  font-size: 12.5px;
  cursor: pointer;
}
.cs-wa-format__btn:hover { background: var(--hover); color: var(--txt); }
.cs-wa-format__btn[aria-pressed="true"] { background: var(--hover); color: var(--txt); }
.cs-wa-format__btn[data-customer-support--whatsapp-formatting-marker-param="```"] { font-family: var(--font-mono); font-size: 11px; }
.cs-wa-format__btn--refused {
  animation: cs-wa-format-refuse 340ms ease;
  color: var(--color-negative);
}
@keyframes cs-wa-format-refuse {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  75% { transform: translateX(2px); }
}
.cs-wa-format__count {
  margin-inline-start: auto;
  padding-inline: 0.4rem;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--txt);
  font-weight: 600;
}
.cs-wa-format__count[data-state="over"] { color: var(--color-negative); }
.cs-wa-format__count--refused {
  animation: cs-wa-format-refuse 340ms ease;
  color: var(--color-negative);
}
@media (prefers-reduced-motion: reduce) {
  .cs-wa-format__btn--refused,
  .cs-wa-format__count--refused { animation: none; }
}

/* v5: the formatting buttons are the pill's round buttons, smaller; the count is a muted caption until it goes over. */
:where(html[data-visual="v5"]) .cs-wa-format__btn {
  inline-size: 28px;
  block-size: 28px;
  border-radius: var(--ds-radius-full);
  color: var(--ds-text-secondary);
}

:where(html[data-visual="v5"]) .cs-wa-format__btn:hover { background: var(--ds-fill-hover); color: var(--ds-text); }
:where(html[data-visual="v5"]) .cs-wa-format__btn[aria-pressed="true"] { background: var(--ds-pressed); color: var(--ds-text); }
:where(html[data-visual="v5"]) .cs-wa-format__count { font-size: var(--ds-font-size-2xs); font-weight: 500; color: var(--ds-text-muted); }
:where(html[data-visual="v5"]) .cs-wa-format__count:is([data-state="over"], .cs-wa-format__count--refused) { color: var(--ds-negative); }

.cs-qr-attached {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 11.5px;
  color: var(--txt-muted);
}
.cs-qr-attached li { display: flex; align-items: center; gap: 5px; }
.cs-qr-attached__note { margin: 2px 0 0; font-size: 11px; color: var(--txt-muted); }
.cs-qr-attached__item { display: flex; align-items: center; gap: 0.3rem; }

.cs-qr-examples__door { margin: 0 0 0.5rem; }
.cs-qr-examples__link {
  --hover-size: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 12px;
  color: var(--accent);
  cursor: pointer;
}
.cs-qr-examples__link:hover { text-decoration: underline; }
.cs-qr-examples__intro, .cs-qr-examples__note {
  margin: 0 0 0.6rem;
  font-size: 12px;
  color: var(--txt-muted);
}
.cs-qr-examples { display: flex; flex-direction: column; gap: 0.6rem; }

/* Empilhados e nao lado a lado: sem formulario na tela o modal fica estreito, e duas colunas aqui
   cortariam o texto que a tela existe para mostrar. */
.cs-qr-example {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.6rem;
  border: 1px solid var(--border);
  border-radius: 0.6rem;
}
.cs-qr-example__shortcut { font-size: 12px; font-weight: 600; color: var(--accent); }
.cs-qr-example__sides { display: flex; flex-direction: column; gap: 0.4rem; }
.cs-qr-example__label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--txt-muted);
}
.cs-qr-example__written, .cs-qr-example__arrives { margin: 1px 0 0; font-size: 13px; }
.cs-qr-example__written { color: var(--txt-muted); font-family: ui-monospace, monospace; font-size: 12px; }
.cs-qr-example__arrives { color: var(--txt); white-space: pre-wrap; }

/* A previa desenha o texto cru, e html come a quebra de linha: sem isto, o que foi escrito em
   quatro linhas aparece numa so, que e o oposto do que a previa promete mostrar. */
.cs-qr-preview .cs-msg__body { white-space: pre-wrap; }
.cs-qr-attached__out {
  --hover-size: 0;
  display: inline-flex;
  padding: 2px;
  border: 0;
  background: transparent;
  color: var(--txt-muted);
  cursor: pointer;
}
.cs-qr-attached__out:hover { color: var(--negative); }

.cs-qr-vars { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.5rem; }
.cs-qr-vars__list { display: flex; flex-wrap: wrap; gap: 0.35rem; }

/* O anel de hover e desenhado fora da caixa e vaza numa fila de botoes pequenos e colados. */
.cs-qr-var {
  --hover-size: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.cs-qr-var:hover { border-color: var(--accent); background: var(--bg-shade); }
.cs-qr-var__name { font-size: 12px; font-weight: 600; color: var(--accent); }
.cs-qr-var__becomes { font-size: 11px; color: var(--txt-muted); }

.cs-qr-options__note {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
  padding: 10px 12px 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--txt-muted);
}
.cs-qr-options__note svg { flex-shrink: 0; margin-block-start: 1px; }

.cs-qr-preview__stack { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }

/* O balao e o mesmo da conversa, e ele nasce esperando a largura de uma tela de chat. Os tres
   escapes valem para toda previa que embute o balao, e ja eram repetidos em tres escopos. */
:is(.cs-qr-preview, .cs-tmpl-preview, .cs-tmpl-picker__preview) .cs-msg { padding-inline: 0; width: 100%; }
:is(.cs-qr-preview, .cs-tmpl-preview, .cs-tmpl-picker__preview) .cs-msg__body { display: block; }
.cs-qr-preview .cs-msg__bubble { max-inline-size: 100%; margin-inline-end: 0; }
.cs-qr-preview__photo {
  display: block;
  inline-size: 100%;
  border-radius: 8px;
  margin-block-end: 4px;
}
.cs-qr-preview__empty,
.cs-qr-preview__note { margin: 0; font-size: 11.5px; line-height: 1.4; color: var(--txt-muted); }

/* O logo da marca ja diz de onde veio, entao sobra o que identifica: nome e numero, no tamanho da
   linha em que eles moram. */
.cs-quick-reply-origin {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-inline-size: 0;
  font-size: 11px;
  color: var(--txt-muted);
  overflow: hidden;
}
.cs-quick-reply-origin .cs-channel-badge { flex-shrink: 0; }
.cs-quick-reply-origin__name {
  font-weight: 600;
  color: var(--txt);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cs-quick-reply-origin__number { flex-shrink: 0; white-space: nowrap; }

/* Um par de estados na mesma linha: os botoes normais, e a pergunta que os substitui. Trocar a linha
   inteira por uma tela de confirmacao tiraria de vista qual resposta esta sendo apagada. */
.cs-quick-reply-picker__form.is-confirming > .cs-btn { display: none; }
.cs-quick-reply-picker__confirm {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 12.5px;
  color: var(--txt-muted);
}

.cs-quick-reply-item__actions {
  position: absolute;
  inset-block-start: 6px;
  inset-inline-end: 6px;
  display: flex;
  gap: 2px;
}
.cs-quick-reply-item.is-confirming .cs-quick-reply-item__actions { display: none; }
.cs-quick-reply-item.is-confirming .cs-quick-reply-item__confirm { display: flex; }

.cs-quick-reply-item__confirm {
  position: absolute;
  inset-block-start: 4px;
  inset-inline-end: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--txt-muted);
}
.cs-quick-reply-item__confirm-yes,
.cs-quick-reply-item__confirm-no {
  --hover-size: 0;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--bg-pure);
  font-size: 11.5px;
  line-height: 1.6;
}
.cs-quick-reply-item__confirm-yes { border-color: var(--negative, #c0392b); color: var(--negative, #c0392b); }
.cs-quick-reply-item__confirm-yes:hover { background: color-mix(in oklch, var(--negative, #c0392b) 12%, transparent); }
.cs-quick-reply-item__confirm-no:hover { background: var(--hover); }

.cs-quick-reply-item__send.is-active { background: var(--hover); }

.cs-quick-reply-suggest {
  position: fixed;
  inset: auto;
  margin: 0;
  inline-size: min(320px, 92vw);
  max-block-size: min(420px, 60vh);
  padding: 0.4rem;
  background: var(--bg-raised);
  border: 1px solid var(--border-strong);
  border-radius: 0.9rem;
  box-shadow: 0 16px 40px oklch(0 0 0 / 0.28);
  overflow: hidden;
}
/* Coluna: a lista rola e o rodape fica preso embaixo. Como bloco, a lista empurrava o botao para
   fora do teto e o overflow do popover cortava ele. */
.cs-quick-reply-suggest:popover-open { display: flex; flex-direction: column; }

.cs-quick-reply-picker__notice {
  margin: 0 0.9rem 0.5rem;
  font-size: 0.78rem;
  color: var(--txt-muted);
}
.cs-quick-reply-picker__results { min-height: 0; }
/* O painel largo e para o formulario respirar, nao para esticar cada campo de ponta a ponta: a
   coluna fica no meio e a leitura nao atravessa a tela. */
.cs-quick-reply-picker__form {
  flex: 1;
  min-block-size: 0;
  inline-size: min(440px, 100%);
  margin-inline: auto;
  padding: 0 0.9rem 0.9rem;
  overflow-y: auto;
}
.cs-quick-reply-suggest::backdrop { background: transparent; }
.cs-quick-reply-suggest .cs-quick-reply-list { flex: 1; min-height: 0; overflow-y: auto; }

.cs-quick-reply-suggest__head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.15rem 0.15rem 0.35rem 0.4rem;
  border-block-end: 1px solid var(--border);
}
.cs-quick-reply-suggest__title {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--txt-muted);
  font-size: 0.72rem;
  font-weight: 600;
}
.cs-quick-reply-suggest__edit {
  --hover-size: 0;
  display: inline-grid;
  place-items: center;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--txt-muted);
  cursor: pointer;
}
.cs-quick-reply-suggest__edit:hover { background: var(--hover); color: var(--txt); }

/* v5: the "/" list is a floating menu like the others: the menu's shell with no shadow, its rows in the hover pill. */
:where(html[data-visual="v5"]) .cs-quick-reply-suggest {
  padding: var(--ds-menu-inset);
  border: 1px solid var(--ds-menu-border);
  border-radius: var(--ds-menu-radius);
  background: var(--ds-menu-bg);
  color: var(--ds-menu-text);
  box-shadow: none;
}

:where(html[data-visual="v5"]) .cs-quick-reply-suggest__head { border-block-end-color: var(--ds-menu-separator); }
:where(html[data-visual="v5"]) .cs-quick-reply-suggest__title { color: var(--ds-text-muted); font-size: var(--ds-font-size-2xs); }
:where(html[data-visual="v5"]) .cs-quick-reply-suggest .cs-quick-reply-item__send { background: transparent; border-radius: var(--ds-menu-item-radius); }
:where(html[data-visual="v5"]) .cs-quick-reply-suggest .cs-quick-reply-item__send.is-active { background: var(--ds-menu-hover); }

@media (any-hover: hover) {
  :where(html[data-visual="v5"]) .cs-quick-reply-suggest .cs-quick-reply-item__send:hover { background: var(--ds-menu-hover); }
}

:where(html[data-visual="v5"]) .cs-quick-reply-suggest__edit {
  inline-size: 28px;
  block-size: 28px;
  border-radius: var(--ds-radius-full);
  color: var(--ds-text-secondary);
}

:where(html[data-visual="v5"]) .cs-quick-reply-suggest__edit:hover { background: var(--ds-fill-hover); color: var(--ds-text); }

.cs-msg__poll {
  border: 1px solid color-mix(in oklch, currentColor 15%, transparent);
  border-radius: 8px;
}

/* The card is the bubble, not a box inside it: its children become the bubble's own, so the divider
   can reach both edges and the time can sit above it. */
.cs-msg__contact-card { display: contents; }

.cs-msg__contact {
  --hover-size: 0;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: -2px -9px 0 -7px;
  padding: 0.35rem 9px 0.35rem 7px;
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: start;
  inline-size: 100%;
  cursor: pointer;
}
.cs-msg__contact-name { font-size: 15px; }
.cs-msg__contact-actions {
  display: flex;
  /* Out to the bubble's own edge: the padding it cancels is 6px 9px 6px 7px. */
  margin: 0 -9px -6px -7px;
  border-block-start: 1px solid color-mix(in oklch, currentColor 12%, transparent);
  border-end-start-radius: 7.5px;
  border-end-end-radius: 7.5px;
  overflow: hidden;
}
.cs-msg__contact-action-form { display: contents; }
.cs-msg__contact-action {
  --hover-size: 0;
  flex: 1;
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0.45rem 0.5rem;
  color: var(--accent);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.cs-msg__contact-action:hover { background: color-mix(in oklch, currentColor 6%, transparent); }
.cs-msg__contact-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: color-mix(in oklch, currentColor 10%, transparent);
}
/* Several faces for several contacts, the first one in front. */
.cs-msg__contact-faces { display: inline-flex; align-items: center; flex-shrink: 0; }
.cs-msg__contact-faces .avatar {
  position: relative;
  border: 2px solid var(--cs-bubble-bg, var(--bg-pure));
  border-radius: 50%;
}
.cs-msg__contact-faces .avatar:not(:first-child) { margin-inline-start: -12px; }
.cs-msg__contact-faces .avatar:nth-child(1) { z-index: 3; }
.cs-msg__contact-faces .avatar:nth-child(2) { z-index: 2; }
.cs-msg__contact-faces .avatar:nth-child(3) { z-index: 1; }
.cs-msg__contact-info { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.cs-msg__contact-name,
.cs-msg__contact-phone {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cs-msg__contact-name { font-weight: 600; }
.cs-msg__contact-phone { font-size: 0.8rem; opacity: 0.75; }

.cs-msg__poll {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-block-end: 0.25rem;
  padding: 0.55rem 0.65rem;
}
.cs-msg__poll-label {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  opacity: 0.6;
}
.cs-msg__poll-question { font-weight: 600; }
.cs-msg__poll-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
}
.cs-msg__poll-bullet {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid color-mix(in oklch, currentColor 40%, transparent);
}
.cs-msg__poll-option-text { min-width: 0; }
.cs-msg__order {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  overflow: hidden;
}
.cs-msg__order-label,
.cs-msg__order-note,
.cs-msg__order-item,
.cs-msg__order-total { padding: 0.5rem 0.65rem; }
.cs-msg__order-label { display: flex; align-items: center; gap: 0.35rem; font-weight: 700; }
.cs-msg__order-note { padding-block-start: 0; font-size: 0.82rem; opacity: 0.78; }
.cs-msg__order-items { display: flex; flex-direction: column; border-block-start: 1px solid color-mix(in oklch, currentColor 12%, transparent); }
.cs-msg__order-item { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.82rem; }
.cs-msg__order-item + .cs-msg__order-item { border-block-start: 1px solid color-mix(in oklch, currentColor 8%, transparent); }
.cs-msg__order-total { display: flex; justify-content: space-between; gap: 1rem; border-block-start: 1px solid color-mix(in oklch, currentColor 16%, transparent); }

.cs-msg__product {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  overflow: hidden;
}
.cs-msg__product-label,
.cs-msg__product-title,
.cs-msg__product-description,
.cs-msg__product-code,
.cs-msg__product-elsewhere,
.cs-msg__product-prices { padding: 0.5rem 0.65rem; }
.cs-msg__product-label { display: flex; align-items: center; gap: 0.35rem; font-weight: 700; }
/* The catalog answers the name on more than one line when the name really has more than one. */
.cs-msg__product-title { padding-block-start: 0; font-size: 0.95rem; font-weight: 600; white-space: pre-line; overflow-wrap: anywhere; }
.cs-msg__product-description { padding-block-start: 0; font-size: 0.82rem; opacity: 0.78; }
.cs-msg__product-prices { display: flex; align-items: baseline; gap: 0.5rem; border-block-start: 1px solid color-mix(in oklch, currentColor 12%, transparent); }
.cs-msg__product-price { font-size: 1rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.cs-msg__product-was { font-size: 0.82rem; text-decoration: line-through; opacity: 0.6; }
/* What the official API alone brings: the code instead of the price, and where the rest of it is. */
.cs-msg__product-code { padding-block-start: 0; font-size: 0.82rem; font-variant-numeric: tabular-nums; opacity: 0.78; }
.cs-msg__product-elsewhere { display: flex; align-items: center; gap: 0.35rem; border-block-start: 1px solid color-mix(in oklch, currentColor 12%, transparent); font-size: 0.78rem; opacity: 0.7; }
.cs-msg__product-elsewhere svg { flex-shrink: 0; }

/* The three cards that fill the bubble edge to edge and carry their own footer. */
.cs-msg__bubble:has(.cs-msg__product),
.cs-msg__bubble:has(.cs-msg__pix),
.cs-msg__bubble:has(.cs-msg__order) { inline-size: min(340px, 82vw); padding: 0; }
.cs-msg__product, .cs-msg__pix, .cs-msg__order { border-radius: inherit; overflow: hidden; }
.cs-msg__product > .cs-msg__meta,
.cs-msg__order > .cs-msg__meta { align-self: flex-end; gap: 2px; padding: 0 0.7rem 0.3rem; font-size: 10px; }

.cs-msg__pix { display: flex; flex-direction: column; min-inline-size: 0; }
.cs-msg__pix-amount-row { display: flex; align-items: center; justify-content: center; gap: 0.75rem; padding: 1rem 1rem 0.45rem; text-align: center; }
.cs-msg__pix-amount { font-size: clamp(1.25rem, 3vw, 1.4rem); line-height: 1.1; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.cs-msg__pix-payment, .cs-msg__pix-person { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.65rem 1rem 0.8rem; }
.cs-msg__pix-person { justify-content: flex-start; }
.cs-msg__pix-payment span, .cs-msg__pix-person span:last-child { display: flex; flex-direction: column; min-inline-size: 0; }
.cs-msg__pix-payment strong { margin-block-end: 4px; font-size: 0.875rem; }
.cs-msg__pix-payment small, .cs-msg__pix-person small { font-size: 0.75rem; line-height: 1.4; opacity: 0.65; overflow-wrap: anywhere; }
.cs-msg__pix-person strong { font-size: 15px; line-height: 1.2; overflow-wrap: anywhere; }
.cs-msg__pix-mark { position: relative; display: block; flex: 0 0 40px; block-size: 40px; border-radius: 50%; background: color-mix(in srgb, #32bcad 13%, transparent); }
.cs-msg__pix-mark img { position: absolute; inset: 50% auto auto 50%; display: block; inline-size: 24px; block-size: 24px; transform: translate(-50%, -50%); }
.cs-msg__pix-mark--amount { flex-basis: 32px; block-size: 32px; }
.cs-msg__pix-mark--amount img { inline-size: 20px; block-size: 20px; }
.cs-msg__pix-copy { display: flex; align-items: center; justify-content: center; gap: 0.4rem; inline-size: 100%; padding: 0.45rem 0.5rem; border: 0; border-block-start: 1px solid color-mix(in oklch, currentColor 14%, transparent); background: transparent; color: var(--accent); font: inherit; font-size: 0.72rem; font-weight: 600; cursor: pointer; }
.cs-msg__pix-copy:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.cs-msg__pix-copy:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: -3px; }
.cs-msg__pix > .cs-msg__meta { align-self: flex-end; gap: 2px; padding: 0 0.7rem 0.25rem; font-size: 10px; }

.cs-msg__view-once {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-block-end: 0.25rem;
  padding: 0.1rem 0.4rem;
  border-radius: 0.5rem;
  background: color-mix(in oklch, currentColor 8%, transparent);
  font-size: 0.68rem;
  font-weight: 600;
  color: color-mix(in oklch, currentColor 65%, transparent);
}
.cs-msg__view-once svg { flex-shrink: 0; }

.cs-msg__forwarded {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-block-end: 0.3rem;
  font-size: 0.68rem;
  font-style: italic;
  color: color-mix(in oklch, currentColor 60%, transparent);
}
.cs-msg__forwarded svg { flex-shrink: 0; }
.cs-msg__forwarded { text-decoration: none; }
.cs-msg__forwarded:hover { text-decoration: underline; }

.cs-msg-info-forwarded__link { --hover-size: 0; text-decoration: none; color: inherit; border-radius: 8px; }
.cs-msg-info-forwarded__link:hover { background: var(--hover); }
.cs-msg-info-forwarded__link svg:last-child { margin-inline-start: auto; color: var(--txt-muted); }

.cs-msg__reply-choice {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.55rem;
  border-radius: 0.6rem;
  background: color-mix(in oklch, var(--accent) 10%, transparent);
  color: var(--accent);
  font-weight: 600;
}
.cs-msg__reply-choice svg { flex-shrink: 0; }

.cs-msg__quote {
  --hover-size: 0;
  --q-author: oklch(0.52 0.14 255);
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 8px;
  inline-size: 100%;
  margin-block-end: 3px;
  padding: 4px 8px 4px 10px;
  border: 0;
  border-radius: 5px;
  background: color-mix(in oklch, currentColor 6%, transparent);
  color: inherit;
  text-align: start;
  cursor: pointer;
  overflow: hidden;
}
.cs-msg__quote--from-agent { --q-author: oklch(0.5 0.15 300); }
/* v5: the quoted author in the app's inks, not the WhatsApp blue and purple: the client's in the link blue, ours in the soft green. */
:where(html[data-visual="v5"]) .cs-msg .cs-msg__bubble .cs-msg__quote { --q-author: var(--ds-link); }
:where(html[data-visual="v5"]) .cs-msg .cs-msg__bubble .cs-msg__quote--from-agent { --q-author: var(--ds-on-cta-soft); }
.cs-msg__quote::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 4px;
  background: var(--q-author);
}
.cs-msg__quote:hover { background: color-mix(in oklch, currentColor 11%, transparent); }
.cs-msg__quote--missing { cursor: default; font-style: italic; }
.cs-msg__quote--missing:hover { background: color-mix(in oklch, currentColor 6%, transparent); }
.cs-msg__quote--missing::before { background: color-mix(in oklch, currentColor 30%, transparent); }
.cs-msg__quote-body {
  flex: 1;
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.cs-msg__quote > .avatar { align-self: center; }

.cs-msg__quote-episode {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.68rem;
  font-weight: 600;
  color: color-mix(in oklch, currentColor 60%, transparent);
}
.cs-msg__quote-episode svg { flex-shrink: 0; }
.cs-msg__quote-author {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--q-author);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cs-msg__quote-line {
  display: flex;
  align-items: center;
  gap: 4px;
  min-inline-size: 0;
  font-size: 0.8rem;
  color: color-mix(in oklch, currentColor 68%, transparent);
}
.cs-msg__quote-line svg { flex-shrink: 0; }
.cs-msg__quote-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cs-msg__quote-thumb { flex-shrink: 0; align-self: center; }
.cs-msg__quote-thumb img {
  display: block;
  inline-size: 38px;
  block-size: 38px;
  object-fit: cover;
  border-radius: 4px;
}
[data-theme="dark"] .cs-msg__quote { --q-author: oklch(0.8 0.12 255); }
[data-theme="dark"] .cs-msg__quote--from-agent { --q-author: oklch(0.8 0.12 300); }
@media (prefers-color-scheme: dark) {
  [data-theme="system"] .cs-msg__quote { --q-author: oklch(0.8 0.12 255); }
  [data-theme="system"] .cs-msg__quote--from-agent { --q-author: oklch(0.8 0.12 300); }
}

.cs-msg--flash .cs-msg__bubble { animation: cs-msg-flash-darken 2.7s ease-out; }
[data-theme="dark"] .cs-msg--flash .cs-msg__bubble { animation-name: cs-msg-flash-lighten; }
@media (prefers-color-scheme: dark) {
  [data-theme="system"] .cs-msg--flash .cs-msg__bubble { animation-name: cs-msg-flash-lighten; }
}
@keyframes cs-msg-flash-darken {
  0%, 60% { filter: brightness(0.66) drop-shadow(0 0 1.5px oklch(0.5 0.16 131)) drop-shadow(0 0 1.5px oklch(0.5 0.16 131)); }
  100%    { filter: none; }
}
@keyframes cs-msg-flash-lighten {
  0%, 60% { filter: brightness(1.85) drop-shadow(0 0 1.5px oklch(0.82 0.14 131)) drop-shadow(0 0 1.5px oklch(0.82 0.14 131)); }
  100%    { filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-msg--flash .cs-msg__bubble { animation-name: none; filter: brightness(0.66) drop-shadow(0 0 1.5px oklch(0.5 0.16 131)) drop-shadow(0 0 1.5px oklch(0.5 0.16 131)); }
  [data-theme="dark"] .cs-msg--flash .cs-msg__bubble { animation-name: none; filter: brightness(1.85) drop-shadow(0 0 1.5px oklch(0.82 0.14 131)) drop-shadow(0 0 1.5px oklch(0.82 0.14 131)); }
  @media (prefers-color-scheme: dark) {
    [data-theme="system"] .cs-msg--flash .cs-msg__bubble { animation-name: none; filter: brightness(1.85) drop-shadow(0 0 1.5px oklch(0.82 0.14 131)) drop-shadow(0 0 1.5px oklch(0.82 0.14 131)); }
  }
}

.cs-msg__transcribed {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-block-end: 0.2rem;
  font-size: 0.68rem;
  font-weight: 600;
  color: color-mix(in oklch, currentColor 60%, transparent);
}

.cs-msg__transcript {
  color: color-mix(in oklch, currentColor 82%, transparent);
}
.cs-msg__transcript p::before { content: '"'; }
.cs-msg__transcript p::after  { content: '"'; }

.cs-msg__pending {
  --hover-size: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-block-end: 0.25rem;
  padding: 0.35rem 0.5rem;
  border-radius: 8px;
  border: 1px dashed color-mix(in oklch, currentColor 30%, transparent);
  background: transparent;
  font-style: italic;
  font-size: inherit;
  color: color-mix(in oklch, currentColor 65%, transparent);
  cursor: pointer;
}

.cs-msg__pending:hover {
  color: currentColor;
  border-style: solid;
  background: color-mix(in oklch, currentColor 7%, transparent);
}

.cs-msg__pending[busy] { opacity: 0.6; pointer-events: none; }

.cs-msg__audio-placeholder {
  font-style: italic;
  color: color-mix(in oklch, currentColor 65%, transparent);
}
.cs-msg__unsupported {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  max-width: 36ch;
  font-size: 0.8rem;
  line-height: 1.35;
  font-style: italic;
  color: color-mix(in oklch, currentColor 65%, transparent);
}
.cs-msg__unsupported svg { flex-shrink: 0; }

.cs-msg__meta {
  float: right;
  display: inline-flex;
  gap: 3px;
  align-items: center;
  margin: 5px -3px -4px 8px;
  line-height: 1;
  font-size: 11px;
  color: oklch(0.45 0 0);
  white-space: nowrap;
}

/* The time on its own line under the text: every Atendimento conversation message (all carry a badge). */
.cs-msg__bubble:has(.cs-channel-badge, .cs-channel-badges, .cs-msg__note-tag) .cs-msg__body { display: block; }
.cs-msg__bubble:has(.cs-channel-badge, .cs-channel-badges, .cs-msg__note-tag) .cs-msg__meta,
.cs-msg--chat .cs-msg__meta {
  float: none;
  display: flex;
  justify-content: flex-end;
  margin: 3px 0 0;
}

/* The time sits above the divider, and needs room to breathe from it: this comes after the channel
   badge rule on purpose, which sets the same property with the same weight. */
.cs-msg__bubble:has(.cs-msg__contact-card) .cs-msg__meta {
  order: 1;
  float: none;
  display: flex;
  justify-content: flex-end;
  align-self: stretch;
  margin: 0 0 9px;
}

.cs-msg__bubble:has(.cs-msg__unsupported) .cs-msg__body { display: inline; }
.cs-msg__bubble:has(.cs-msg__unsupported) .cs-msg__meta {
  float: right;
  display: inline-flex;
  margin: 5px -3px -4px 8px;
}

.cs-msg__via-app { display: inline-flex; align-items: center; color: #25d366; }

.cs-msg__check { display: inline-flex; align-items: center; justify-content: center; color: oklch(0.45 0 0); }
.cs-msg__check svg, .cs-channel-badge svg { display: block; }
.cs-msg__check--read   { color: oklch(0.62 0.13 220); }
.cs-msg__check--failed { color: var(--color-negative); }
.cs-msg__check--muted  { color: var(--txt-muted); opacity: 0.5; }

.cs-msg-info-not-yet { color: var(--txt-muted); font-style: italic; }

.cs-msg-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.05rem;
}
.cs-msg-timeline__event {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
}
.cs-msg-timeline__icon {
  flex-shrink: 0;
  display: inline-flex;
  margin-block-start: 1px;
}
.cs-msg-timeline__text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.cs-msg-timeline__label {
  color: var(--txt);
  font-size: 0.9rem;
  line-height: 1.25;
}
.cs-msg-timeline__time {
  color: var(--txt-muted);
  font-size: 0.78rem;
  white-space: nowrap;
}

.cs-new-count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--accent);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  display: grid;
  place-items: center;
  line-height: 1;
}

.cs-channel-badge {
  display: inline-grid;
  place-items: center;
}

.cs-channel-badges {
  display: inline-flex;
  align-items: center;
}
.cs-channel-badges .cs-channel-badge {
  background: var(--bg-pure);
  border-radius: 50%;
  padding: 1px;
  box-shadow: 0 0 0 1px var(--color-border);
}
.cs-channel-badges .cs-channel-badge:not(:first-child) {
  margin-inline-start: -4px;
}

.cs-channel-dropdown {
  position: relative;
}

.cs-channel-dropdown__summary {
  --hover-size: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  max-width: 140px;
  padding: 0.25rem 0.5rem;
  border-radius: 0.5rem;
  font-size: 12px;
  font-weight: 600;
  color: var(--txt-muted);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: color 0.15s, background-color 0.15s;
}

.cs-channel-dropdown__summary::-webkit-details-marker {
  display: none;
}

.cs-channel-dropdown__summary:hover {
  color: var(--txt);
  background-color: var(--bg-subtle);
}

.cs-channel-dropdown__caret {
  transition: transform 0.15s ease;
}

.cs-channel-dropdown[open] .cs-channel-dropdown__caret {
  transform: rotate(180deg);
}

.cs-channel-dropdown__menu {
  display: none;
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: calc(100% + 4px);
  z-index: 20;
  min-width: 200px;
  max-width: 260px;
  padding: var(--ds-menu-inset);
  background-color: var(--ds-menu-bg);
  color: var(--ds-menu-text);
  border: 1px solid var(--ds-menu-border);
  border-radius: var(--ds-menu-radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
}
html[data-visual="v5"] .cs-channel-dropdown__menu { box-shadow: none; }

.cs-channel-dropdown[open] .cs-channel-dropdown__menu {
  display: block;
}

.cs-channel-dropdown__item {
  --hover-size: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.5rem;
  border-radius: var(--ds-menu-item-radius);
  font-size: 13px;
  color: var(--ds-menu-text);
  text-decoration: none;
  transition: background-color 0.12s;
}

.cs-channel-dropdown__item:hover {
  background-color: var(--ds-menu-hover);
}

.cs-channel-dropdown__item.is-selected {
  font-weight: 600;
}
.cs-channel-dropdown__item:disabled { opacity: 0.55; cursor: not-allowed; }
.cs-channel-dropdown__item:disabled:hover { background-color: transparent; }
.composer-channel__item-note { margin-inline-start: auto; font-size: 11px; font-weight: 500; color: var(--color-negative); }

.cs-channel-dropdown__icon {
  display: inline-flex;
}

.cs-closing-status-filter { flex: 0 1 auto; min-inline-size: 0; margin-inline-start: auto; }
.cs-closing-status-filter__summary {
  max-inline-size: 100%;
  min-block-size: 1.7rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  gap: 0.25rem;
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1;
  color: var(--txt);
  background: var(--bg-subtle);
  box-shadow: inset 0 0 0 1px var(--border);
}
.cs-closing-status-filter__summary:hover { color: var(--txt); background: var(--hover); }
.cs-closing-status-filter__summary:focus-visible,
.cs-closing-status-filter__item:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: -2px; }
.cs-closing-status-filter__prefix { flex-shrink: 0; color: var(--txt-muted); }
.cs-closing-status-filter__value { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-closing-status-filter .cs-channel-dropdown__caret { flex-shrink: 0; display: inline-flex; color: var(--txt-muted); }
.cs-closing-status-filter .cs-channel-dropdown__menu {
  translate: var(--shift-inline, 0) 0;
  max-block-size: var(--max-height, min(60vh, 24rem));
  max-inline-size: min(260px, calc(100vw - 16px));
  overflow-y: auto;
  box-shadow: none;
}
.cs-closing-status-filter__item { justify-content: space-between; min-block-size: 2.25rem; }
.cs-closing-status-filter__item.is-selected { background-color: var(--bg-subtle); }
.cs-closing-status-filter__item:hover { background-color: var(--hover); }
.cs-closing-status-filter__name { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-closing-status-filter__inactive { flex-shrink: 0; font-size: 11px; color: var(--txt-muted); }
@media (pointer: coarse) {
  .cs-closing-status-filter__summary,
  .cs-closing-status-filter__item { min-block-size: 44px; }
}

.cs-unread-banner {
  display: block;
  width: 100%;
  flex-shrink: 0;
  text-align: center;
  padding: 8px 0;
  margin: 12px 0 6px;
  background: color-mix(in oklch, var(--accent) 8%, transparent);
  color: color-mix(in oklch, var(--accent) 80%, black);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2px;
  transition: opacity 0.35s ease, margin 0.35s ease, padding 0.35s ease;
  overflow: hidden;
}
/* v5: as WhatsApp's, no band across the Atendimento's thread: the count in a pill on the paper (the Chat's banner rides in its message). */
:where(html[data-visual="v5"]) .cs-unread-banner:not(.cs-msg *, .cs-unread-banner--dismiss) {
  inline-size: fit-content;
  margin-inline: auto;
  padding: var(--ds-space-1) var(--ds-space-3);
  border-radius: var(--ds-radius-full);
  background: var(--ds-bg-pure);
  color: var(--ds-text-muted);
  font-size: var(--ds-font-size-xs);
}
.cs-unread-banner--dismiss {
  opacity: 0;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

.cs-episode-chip__row,
.cs-episode-end__row {
  --hover-size: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  font-size: 13px;
  color: var(--txt-muted);
  white-space: nowrap;
  cursor: pointer;
  text-align: inherit;
}
.cs-episode-chip__row:hover .cs-episode-status,
.cs-episode-end__row:hover .cs-episode-status,
.cs-episode-chip__row:focus-visible .cs-episode-status,
.cs-episode-end__row:focus-visible .cs-episode-status { filter: brightness(1.18); }
.cs-episode-chip__row:focus-visible,
.cs-episode-end__row:focus-visible { outline: none; }
.cs-episode-status__icon { flex-shrink: 0; }

.cs-msg + .ds-event-pill, .ds-event-pill + .cs-msg { margin-block-start: 2px; }
.cs-episode-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
  flex-shrink: 0;
  margin: 16px 0 8px;
}
.cs-episode-chip__row::before,
.cs-episode-chip__row::after,
.cs-episode-end__row::before,
.cs-episode-end__row::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-border);
}
.cs-episode-line {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.cs-episode-status {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
  font-weight: 600;
}
.cs-episode-status--open   { background: color-mix(in oklch, var(--color-positive) 16%, transparent); color: var(--color-positive); }
.cs-episode-status--closed { background: color-mix(in oklch, var(--txt-muted) 20%, transparent); color: var(--txt-muted); }

/* v5: the start and the end of an attendance wear the system pill on the paper (no rules out to the sides), the state as an
   indicator only: the open icon in the CTA and its word in the soft green, the closed in muted, neither filled. */
:where(html[data-visual="v5"]) :is(.cs-episode-chip__row, .cs-episode-end__row) { justify-content: center; }
:where(html[data-visual="v5"]) :is(.cs-episode-chip__row, .cs-episode-end__row)::before,
:where(html[data-visual="v5"]) :is(.cs-episode-chip__row, .cs-episode-end__row)::after { content: none; }
:where(html[data-visual="v5"]) .cs-episode-line {
  max-inline-size: 100%;
  padding: var(--ds-space-1) var(--ds-space-3);
  border-radius: var(--ds-radius-full);
  background: var(--ds-bg-pure);
  font-size: var(--ds-font-size-xs);
  transition: background-color var(--ds-duration-fast);
}
/* On a narrow screen the details give way with an ellipsis; the state never does, and the ticket shows it all. */
:where(html[data-visual="v5"]) .cs-episode-line > .cs-episode-status { flex-shrink: 0; }
:where(html[data-visual="v5"]) .cs-episode-detail { overflow: hidden; text-overflow: ellipsis; }
:where(html[data-visual="v5"]) .cs-episode-status { padding: 0; background: none; }
:where(html[data-visual="v5"]) .cs-episode-status--open { color: var(--ds-on-cta-soft); }
:where(html[data-visual="v5"]) .cs-episode-status--open .cs-episode-status__icon { color: var(--ds-cta); }
:where(html[data-visual="v5"]) .cs-episode-status--closed { color: var(--ds-text-muted); }
:where(html[data-visual="v5"]) :is(.cs-episode-chip__row, .cs-episode-end__row):is(:hover, :focus-visible) .cs-episode-status { filter: none; }
:where(html[data-visual="v5"]) :is(.cs-episode-chip__row, .cs-episode-end__row):focus-visible .cs-episode-line { outline: 2px solid var(--ds-focus-ring); }
@media (any-hover: hover) {
  :where(html[data-visual="v5"]) :is(.cs-episode-chip__row, .cs-episode-end__row):hover .cs-episode-line { background: var(--ds-fill-hover); }
}
:where(html[data-visual="v5"]) .cs-episode-bracket { border-color: var(--ds-cta); }

.cs-episode-bracket {
  position: absolute;
  width: 11px;
  border: 2px solid var(--accent);
  border-right: 0;
  border-radius: 9px 0 0 9px;
  pointer-events: none;
  z-index: 1;
  transition: top 0.28s cubic-bezier(0.4, 0, 0.2, 1), height 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.cs-episode-bracket--open {
  border-bottom-width: 0;
  border-bottom-left-radius: 0;
}

.composer--note .composer-pill {
  background: var(--cs-note-soft);
  border-color: var(--cs-note-border);
}
.composer--note .composer-pill:focus-within {
  border-color: var(--cs-note-border);
  box-shadow: none;
  outline: 2px solid var(--ds-focus-ring);
  outline-offset: -1px;
}
.cs-composer-bar { --cs-bar-row: calc(18px + 0.5rem + 2px); }
.composer-channel { min-block-size: var(--cs-bar-row); flex-wrap: wrap; row-gap: 6px; }
/* The group's single-check line takes what the row has left; under 16rem it drops to a line of its own, full width. */
.composer-channel__hint { flex: 1 1 16rem; }

/* What a note hides of the bar (the recipient, the canal, the deadline) is the bar's own state: ds_composer_bar.css. */

/* Responder held back shows why in the gate, in the pill's place; a note writes in the pill as always. */
.composer-gate { display: contents; }
.cs-composer--note .composer-gate,
.cs-composer--blocked:not(.cs-composer--note) .cs-composer-body { display: none; }
/* The closed window's gate is one line at the pill's height: the sentence in the label step, muted and cut short, and the
   template the bar's own 28 px action, green as an accent. */
.composer-notice--window { align-items: center; column-gap: 8px; }
.composer-notice--window .composer-notice__text {
  overflow: hidden;
  font-size: var(--ds-status-font-sm);
  color: var(--ds-text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.composer-notice--window > .cs-tmpl-launcher { display: flex; flex: none; }
/* The bar's 28 px action wearing the tonal fill: a button by its shape, the green as the accent and never the block. */
.composer-gate .cs-tmpl-launcher > .cs-composer-action--accent { background: var(--ds-cta-soft); color: var(--ds-on-cta-soft); }
@media (any-hover: hover) {
  .composer-gate .cs-tmpl-launcher > .cs-composer-action--accent:hover { background: var(--ds-cta-soft-hover); }
}
/* The clock sits where the pill's + sits (its center 24 px in), in the supporting ink. */
.composer-notice--window .composer-hint { color: var(--ds-text-secondary); }
:where(html[data-visual="v5"]) .composer-notice--window { padding-inline-start: 16px; }
.composer-notice__short { display: none; }
.composer-gate > .cs-composer-strip { container: composer-gate / inline-size; }

/* Narrow, the whole sentence would be cut where no tooltip reaches: the short one says the window closed and what to do. */
@container composer-gate (width < 520px) {
  .composer-notice__short { display: inline; }
  .composer-notice--window .composer-notice__text { line-height: 16px; white-space: normal; text-wrap: balance; }
  :where(html[data-visual="v5"]) .composer-gate .composer-notice--window { padding-block: calc((var(--ds-composer-height) - 32px) / 2 - 1px); }
  .composer-notice__full {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
/* The gate sits where the pill sits, the same 6 px under the bar, so the footer keeps its 104 px. */
:where(html[data-visual="v5"]) .composer-band .composer-gate > .cs-composer-strip { padding-block-start: 6px; }
:where(html[data-visual="v5"]) .composer-notice--window {
  box-sizing: border-box;
  min-block-size: var(--ds-composer-height);
  padding-block: calc((var(--ds-composer-height) - var(--ds-composer-bar-control)) / 2 - 1px);
  padding-inline-end: calc((var(--ds-composer-height) - var(--ds-composer-bar-control)) / 2 - 1px);
}

/* The closed chip repeats the gate right under it, so it steps aside while the gate shows; a note hides the deadline anyway. */
.cs-composer--blocked:not(.cs-composer--note) .cs-window-timer--closed { display: none; }

/* What leaves through the canal is not on offer while writing a note. */
.composer--note [data-sends] { display: none; }

.composer-send__note,
.composer--note .composer-send__reply { display: none; }
.composer--note .composer-send__note { display: block; }

/* Only the menu that carries the window state pays the extra width: the class dresses two others. */
.composer-channel__dd .cs-channel-dropdown__menu:has(.cs-window-state) {
  /* min-width outranks max-width, so the phone clamp has to sit on both or it never applies. */
  min-width: min(340px, calc(100vw - 2rem));
  max-width: min(380px, calc(100vw - 2rem));
}
/* A flex item will not shrink below its content without this, so the ellipsis never fires. */
.composer-channel__item-number { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* The dot means a window exists at all: filled is open, ring is closed, absent is no window. */
.cs-window-state { display: inline-flex; align-items: center; gap: 4px; flex: none; white-space: nowrap; }
.cs-window-state::before {
  content: "";
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
}
.cs-window-state--open { color: var(--txt); }
.cs-window-state--open::before { background: currentColor; }
.cs-window-state--closed { color: color-mix(in oklch, var(--color-negative) 62%, var(--txt)); }
.cs-window-state--closed::before { border: 1.5px solid currentColor; }
.cs-window-state--no-window::before { display: none; }

.cs-composer-action--accent {
  color: var(--accent);
  border-color: color-mix(in oklch, var(--accent) 45%, var(--color-border));
}
.cs-composer-bar__right .cs-tmpl-launcher { display: contents; }

/* v5: the bar over the composer and its action pills are in ds_composer_bar.css. */

@media (max-width: 34rem) {
  .composer-channel__lead,
  .composer-channel__summary-number { display: none; }
}

.cs-msg--note { --cs-note-bubble: var(--ds-msg-note); }

[data-theme] .cs-msg--me.cs-msg--note .cs-msg__bubble { background: var(--cs-note-bubble); --cs-bubble-bg: var(--cs-note-bubble); color: var(--ds-msg-note-text); }
[data-theme] .cs-msg.cs-msg--tail.cs-msg--me.cs-msg--note .cs-msg__bubble::before { border-top-color: var(--cs-note-bubble); }
[data-theme] .cs-msg.cs-msg--me.cs-msg--note .cs-msg__menu {
  background: radial-gradient(at 100% 0%, var(--cs-note-bubble) 60%, transparent 85%);
}

.cs-msg__note-tag {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--cs-note);
}
/* v5: the note is the catalog's --ds-msg-note, and its tag reads as the time does, not as a second colour. */
:where(html[data-visual="v5"]) .cs-msg__note-tag { color: var(--ds-text-muted); }

.cs-list-filter { display: flex; gap: 4px; align-items: center; max-inline-size: 100%; margin: 0; }
.cs-list-filter--spaced { margin-block-end: 0.75rem; }
.cs-list-filter__row {
  display: flex;
  gap: 4px;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
}

.cs-list-filter__more { position: relative; flex-shrink: 0; display: flex; align-items: center; }
.cs-list-filter__more[hidden] { display: none; }
.cs-list-filter__tail { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.cs-list-filter__plus {
  --hover-size: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 22px;
  block-size: 22px;
  border-radius: 999px;
  color: var(--txt-muted);
  cursor: pointer;
  transition: background-color 0.12s, color 0.12s;
}
.cs-list-filter__plus:hover { background: var(--hover); color: var(--txt); }
.cs-list-filter__caret {
  --hover-size: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-inline-size: 22px;
  padding-inline: 4px;
  block-size: 22px;
  border-radius: 999px;
  list-style: none;
  color: var(--txt-muted);
  cursor: pointer;
  transition: background-color 0.12s, color 0.12s;
}
.cs-list-filter__caret::-webkit-details-marker { display: none; }
.cs-list-filter__caret:hover,
.cs-list-filter__more[open] .cs-list-filter__caret { background: var(--hover); color: var(--txt); }
.cs-list-filter__caret--active { color: var(--accent); background: var(--accent-soft); }
.cs-list-filter__more-count:not(:empty) { font-size: 0.66rem; font-weight: 700; }

.cs-list-filter__menu {
  inset-inline-end: 0;
  inset-block-start: calc(100% + 6px);
  inline-size: min(280px, 100vw - 32px);
  min-inline-size: 0;
  max-inline-size: none;
  max-block-size: min(60vh, var(--max-height, 60vh));
  overflow-y: auto;
  translate: var(--shift-inline, 0) 0;
}

.cs-list-filter__option {
  --hover-size: 0;
  display: flex;
  align-items: center;
  padding: 0.25rem 0.35rem;
  border-radius: var(--ds-menu-item-radius);
  text-decoration: none;
}
.cs-list-filter__option:hover { background: var(--ds-menu-hover); }
.cs-list-filter__option .ds-chip { flex: 0 1 auto; min-inline-size: 0; }
.cs-list-option { --cs-list-option-hover: var(--hover); display: flex; align-items: center; gap: 0.15rem; }
.cs-list-option > .cs-list-filter__option { flex: 1; min-inline-size: 0; gap: 0.4rem; }
.cs-list-option__check { display: inline-flex; margin-inline-start: auto; color: var(--accent); }
.cs-list-option__pencil {
  --hover-size: 0;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  inline-size: 26px;
  block-size: 26px;
  border-radius: 50%;
  color: var(--txt-muted);
}
.cs-list-option__pencil:hover,
.cs-list-option__pencil:focus-visible { background: var(--cs-list-option-hover); color: var(--txt); outline: none; }
.cs-list-filter__menu:not(:has(.cs-list-option)) .cs-list-filter__new { margin-block-start: 0; padding-block-start: 0.45rem; border-block-start: 0; }
.cs-list-filter__new {
  gap: 0.5rem;
  padding-inline: 0.6rem;
  margin-block-start: 0.25rem;
  padding-block-start: 0.45rem;
  border-block-start: 1px solid var(--border);
  border-radius: 0 0 0.5rem 0.5rem;
  color: var(--txt-muted);
  font-weight: 500;
}
.cs-list-filter__new:hover { color: var(--txt); }

/* v5: "see all" and "new" are the small icon circle, hover on the hover tint; with a chosen one folded inside, the glyph and its count speak in the green of text, no fill. */
html[data-visual="v5"] :is(.cs-list-filter__caret, .cs-list-filter__plus) { min-inline-size: 24px; block-size: 24px; color: var(--ds-text-secondary); }
html[data-visual="v5"] :is(.cs-list-filter__caret, .cs-list-filter__plus):hover,
html[data-visual="v5"] .cs-list-filter__more[open] .cs-list-filter__caret { background: var(--ds-hover); color: var(--ds-text); }
html[data-visual="v5"] .cs-list-filter__caret--active { background: none; color: var(--ds-on-cta-soft); }
html[data-visual="v5"] .cs-list-filter__more-count:not(:empty) { font-size: var(--ds-font-size-2xs); font-weight: var(--ds-weight-semibold); }
/* "+ Nova lista" is an item under the menu's separator (ds-menu__separator), not a bordered foot. */
html[data-visual="v5"] .cs-list-filter__new { position: relative; margin-block-start: calc(var(--ds-menu-inset) * 2 + 1px); padding-block: 0; border-block-start: 0; border-radius: var(--ds-menu-item-radius); color: var(--ds-text-secondary); }
html[data-visual="v5"] .cs-list-filter__new::before { content: ""; position: absolute; inset-inline: var(--ds-space-3); inset-block-start: calc(-1 * var(--ds-menu-inset) - 1px); block-size: 1px; background: var(--ds-menu-separator); }
html[data-visual="v5"] .cs-list-filter__menu:not(:has(.cs-list-option)) .cs-list-filter__new { margin-block-start: 0; }
html[data-visual="v5"] .cs-list-filter__menu:not(:has(.cs-list-option)) .cs-list-filter__new::before { display: none; }
html[data-visual="v5"] .cs-list-option__check { color: var(--ds-on-cta-soft); }

/* With a mouse the filter's lists are rows of the card's lists menu (ds-menu__choice): 32 px tall, the pencil keeping its
   place but showing only on the row under the pointer or the focus. A finger keeps the 40 px row and a pencil always there. */
@media (any-hover: hover) and (pointer: fine) {
  html[data-visual="v5"] .cs-list-filter__menu .cs-list-option > .cs-list-filter__option { min-block-size: var(--ds-menu-choice-height); }
  html[data-visual="v5"] .cs-list-filter__menu .cs-list-option:not(:hover, :focus-within) > .cs-list-option__pencil { opacity: 0; }
}

/* The pencil fills the frame beside the lists view, and while it holds the editor the view steps aside. The swap happens
   as soon as the editor is asked for (busy), holding the height the menu had until the editor arrives; then the menu is as
   tall as the editor, in the same width and on the same edges as every other step. */
.cs-list-editor-frame { display: block; }
.cs-list-editor-frame:is(:not(:empty), [data-editing]) { display: flex; flex-direction: column; overflow-y: auto; }
:is(.cs-card__menu-list, .cs-list-filter__menu):has(> .cs-list-editor-frame:is(:not(:empty), [data-editing])) > :not(.cs-list-editor-frame) { display: none; }
:is(.cs-card__menu-list, .cs-list-filter__menu):has(> .cs-list-editor-frame:is(:not(:empty), [data-editing])) { overflow-x: hidden; }
.cs-list-editor { display: flex; flex: 1; flex-direction: column; gap: 0.5rem; padding: 0.15rem; }
.cs-list-editor > form { flex: 1; }
.cs-list-editor__form > .cs-list-editor__actions { margin-block-start: auto; }
.cs-list-editor__head { display: flex; align-items: center; gap: 0.35rem; }
.cs-list-editor__back {
  --hover-size: 0;
  display: grid;
  place-items: center;
  inline-size: 26px;
  block-size: 26px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--txt-muted);
  cursor: pointer;
}
.cs-list-editor__back:hover,
.cs-list-editor__back:focus-visible { background: var(--bg-subtle); color: var(--txt); outline: none; }
.cs-list-editor__title { font-size: 0.82rem; font-weight: 600; color: var(--txt); }
.cs-list-editor__form { display: flex; flex-direction: column; gap: 0.6rem; padding-inline: 0.2rem; }
.cs-list-editor__note { margin: 0; font-size: 0.72rem; line-height: 1.4; color: var(--txt-muted); }
.cs-list-editor__actions { display: flex; justify-content: flex-end; }
.cs-list-editor__remove {
  --hover-size: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  inline-size: 100%;
  margin-block-start: 0.25rem;
  padding: 0.45rem;
  border: 0;
  border-block-start: 1px solid var(--border);
  border-radius: 0 0 0.5rem 0.5rem;
  background: transparent;
  font-size: 0.78rem;
  color: var(--negative);
  cursor: pointer;
}
.cs-list-editor__remove:hover { background: color-mix(in oklch, var(--negative) 14%, transparent); }

/* A list on Pessoas: the chip and its pencil travel together when the row folds. */
.cs-list-filter__item { display: inline-flex; align-items: center; gap: 1px; flex-shrink: 0; }
.cs-list-filter__item[hidden] { display: none; }
.cs-list-filter__edit.cs-btn--icon { inline-size: 24px; block-size: 24px; color: var(--ds-text-secondary); }
button.cs-list-filter__plus { border: 0; background: none; }

/* The list modal is the form modal (ds_modal.css); here only what is its own: the frame that holds the form, the delete on
   the left of the foot, the members taking the body's height, names that wrap, and the skeleton it opens over. */
.cs-list-modal__frame, .cs-list-modal__form { display: flex; flex-direction: column; flex: 1; min-block-size: 0; }
.cs-list-modal__delete { order: -1; margin-inline-end: auto; }
.cs-form-field.cs-list-members { display: flex; flex: 1; flex-direction: column; gap: var(--ds-modal-gap); min-block-size: 12rem; }
.cs-list-members__count { margin-inline-start: var(--ds-space-2); color: var(--ds-text-muted); font-weight: var(--ds-weight-regular); }
.cs-list-modal :is(.cs-picker-row__name, .cs-picker-row__subtitle) { overflow: visible; white-space: normal; overflow-wrap: anywhere; text-overflow: clip; }
.cs-list-modal__bone { display: block; flex: none; border-radius: var(--ds-radius-lg); background: var(--ds-fill-elevated); }
.cs-list-modal__bone--title { inline-size: 9rem; block-size: 1.25rem; padding: 0; margin: var(--ds-modal-pad) var(--ds-modal-pad) var(--ds-modal-gap); }
.cs-list-modal__bone--field { block-size: 2.75rem; border-radius: var(--ds-radius-full); }
.cs-list-modal__bone--colors { inline-size: 70%; block-size: 2rem; }
.cs-list-modal__bone--row { block-size: 44px; }
.cs-list-modal__skeleton .cs-modal__foot { justify-content: center; }
@media (prefers-reduced-motion: no-preference) {
  .cs-list-modal__bone { animation: cs-list-modal-pulse 1.2s ease-in-out infinite alternate; }
}
@keyframes cs-list-modal-pulse { to { opacity: 0.55; } }

.cs-menu {
  position: absolute;
  z-index: 30;
  padding: var(--ds-menu-inset);
  display: flex;
  flex-direction: column;
  background: var(--ds-menu-bg);
  color: var(--ds-menu-text);
  border: 1px solid var(--ds-menu-border);
  border-radius: var(--ds-menu-radius);
  box-shadow: 0 10px 30px oklch(0 0 0 / 0.18);
}
/* v5: the ds-menu shell, no shadow. */
html[data-visual="v5"] .cs-menu { box-shadow: none; }
/* Every floating opens inside the screen: the shell reads what the popup measured. */
:is(.cs-header-menu__menu, .cs-composer-menu__list) {
  translate: var(--shift-inline, 0) 0;
  max-block-size: var(--max-height, none);
  max-inline-size: calc(100vw - 32px);
  overflow-y: auto;
}

.cs-menu__item {
  --hover-size: 0;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  inline-size: 100%;
  min-block-size: var(--ds-menu-item-height);
  padding: 0.5rem 0.6rem;
  border: 0;
  border-radius: var(--ds-menu-item-radius);
  background: transparent;
  font-size: 13px;
  font-weight: 500;
  color: var(--ds-menu-text);
  text-align: start;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
@media (any-hover: hover) {
  .cs-menu__item:hover { background: var(--ds-menu-hover); }
}

.cs-header-menu { position: relative; }
.cs-header-menu__summary { list-style: none; }
.cs-header-menu__summary::-webkit-details-marker { display: none; }
.cs-header-menu[open] .cs-header-menu__summary { background: var(--hover); color: var(--txt); }

.cs-header-menu__menu {
  inset-inline-end: 0;
  inset-block-start: calc(100% + 6px);
  min-inline-size: 210px;
}

.cs-lists-block { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

.cs-list-picker { position: relative; }
.cs-list-add {
  --hover-size: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border: 1px dashed var(--border-strong);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--txt-muted);
  cursor: pointer;
  list-style: none;
  transition: border-color 0.12s, color 0.12s;
}
.cs-list-add::-webkit-details-marker { display: none; }
.cs-list-picker[open] > .cs-list-add,
.cs-list-picker__new-wrap[open] > .cs-list-add,
.cs-list-add:hover { border-color: var(--accent); color: var(--txt); }
.cs-list-picker__menu {
  position: absolute;
  z-index: 20;
  inset-block-start: calc(100% + 6px);
  inset-inline-start: 0;
  inline-size: min(300px, 78vw);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 1px solid var(--ds-menu-border);
  border-radius: var(--ds-menu-radius);
  background: var(--ds-menu-bg);
  color: var(--ds-menu-text);
  box-shadow: 0 10px 30px oklch(0 0 0 / 0.18);
}
html[data-visual="v5"] .cs-list-picker__menu { box-shadow: none; }
/* v5: "+ Adicionar" is a quiet pill in the fill, without the dashed outline; the menu's own divider over the new list. */
:where(html[data-visual="v5"]) .cs-list-add { padding: 4px 12px; border-color: transparent; background: var(--ds-fill); color: var(--ds-text-muted); }
:where(html[data-visual="v5"]) :is(.cs-list-picker[open] > .cs-list-add, .cs-list-picker__new-wrap[open] > .cs-list-add, .cs-list-add:hover) {
  border-color: transparent;
  background: var(--ds-fill-hover);
  color: var(--ds-text);
}
:where(html[data-visual="v5"]) .cs-list-picker__new-wrap { border-block-start-color: var(--ds-menu-separator); }
.cs-list-picker__options { display: flex; flex-direction: column; gap: 2px; }
.cs-list-picker__option {
  --hover-size: 0;
  display: flex;
  align-items: center;
  inline-size: 100%;
  padding: 5px 6px;
  border-radius: var(--ds-menu-item-radius);
  background: transparent;
  cursor: pointer;
  transition: background-color 0.12s;
}
.cs-list-picker__option:hover { background: var(--ds-menu-hover); }

.cs-list-picker__new-wrap {
  padding-block-start: 12px;
  border-block-start: 1px solid var(--border);
}
.cs-list-picker__new-wrap:only-child { padding-block-start: 0; border-block-start: 0; }
.cs-list-picker__new { display: flex; flex-direction: column; gap: 10px; margin-block-start: 10px; }

/* Both panel containers clip, so inside them the menu opens in the flow, full width. */
:where(#cs_contact_panel_body, #cs_group_panel_body) .cs-list-picker[open] { flex-basis: 100%; }
:where(#cs_contact_panel_body, #cs_group_panel_body) .cs-list-picker__menu {
  position: static;
  inline-size: 100%;
  margin-block-start: 8px;
  box-shadow: none;
}

.cs-picker { display: flex; flex-direction: column; gap: 0.75rem; }
.cs-picker svg { fill: currentColor; }

.cs-picker__scroll {
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--ds-bg-pure);
}
.cs-picker__list { display: flex; flex-direction: column; }
/* On a modal's sheet the picker is the step's own list, not a box sunk below it. */
html[data-visual="v5"] .cs-modal .cs-picker__scroll { background: none; }
/* v5: the list is a sheet of the paper, its rows the list's pills, like every other list. */
:where(html[data-visual="v5"]) .cs-picker__scroll { padding: var(--ds-space-1); border-color: transparent; border-radius: var(--ds-radius-xl); }

.cs-group-new__hero {
  display: flex; flex-direction: column; align-items: center; gap: 0.9rem;
  padding-block: 0.5rem 0.25rem;
}
.cs-group-new__hero .cs-profile-photo { flex-direction: column; gap: 0.5rem; }
.cs-group-new__hero .cs-avatar-edit__preview { inline-size: 88px; block-size: 88px; }
.cs-group-new__name { max-inline-size: 22rem; text-align: center; }
.cs-group-new__canal { display: flex; flex-direction: column; gap: 0.4rem; }

.cs-group-perm {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-block: 0.55rem;
  border-block-start: 1px solid var(--color-border);
}
.cs-group-perm:first-of-type { border-block-start: 0; }
.cs-group-perm__title { margin: 0; font-size: 0.85rem; font-weight: 600; }
.cs-group-perm__hint { margin: 0.1rem 0 0; font-size: 0.75rem; color: var(--txt-muted); }
.cs-group-candidate--in { opacity: 0.75; }
.cs-group-candidate__in { display: inline-flex; color: var(--accent); flex-shrink: 0; }

.cs-sidebar-head { padding-inline: 12px; }
/* v5: no rule between the filters and the list, as the Chat's column and WhatsApp's; the header above keeps its own. */
html[data-visual="v5"] .cs-sidebar-head { border-color: transparent; }

/* The list may be stale: a ds_notice in the sidebar's foot; its size is the notice scale, this only lays it out. */
.cs-sidebar-stale {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 12px 8px;
}

.cs-people-filter {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.cs-sidebar-head .cs-people-filter { padding-inline: 12px; }
.cs-people-filter__face {
  --hover-size: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: opacity 0.12s ease, box-shadow 0.12s ease;
}
.cs-people-filter__face { opacity: 0.55; }
.cs-people-filter__face:hover { opacity: 0.85; }
.cs-people-filter__face--on {
  opacity: 1;
  box-shadow: 0 0 0 2px var(--sidebar-bg, var(--bg-pure)), 0 0 0 4px var(--accent);
}
.cs-people-filter__face--on:hover { opacity: 1; }
/* v5: every face at full strength, the chosen one told by the account's outline, not by a glow or by fading the rest. */
html[data-visual="v5"] .cs-people-filter__face:is(*, :hover) { opacity: 1; }
html[data-visual="v5"] .cs-people-filter__face--on { box-shadow: none; outline: 2px solid var(--ds-cta); outline-offset: 2px; }
.cs-people-filter__add,
.cs-people-filter__nobody { flex-shrink: 0; }
.cs-people-filter__add { list-style: none; }
.cs-people-filter__add::-webkit-details-marker { display: none; }
.cs-people-filter__picker { position: relative; display: inline-flex; }
.cs-people-filter__menu {
  position: absolute;
  inset-block-start: calc(100% + 0.4rem);
  inset-inline-start: 0;
  z-index: 20;
  inline-size: 240px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.6rem;
  border: 1px solid var(--ds-menu-border);
  border-radius: var(--ds-menu-radius);
  background: var(--ds-menu-bg);
  color: var(--ds-menu-text);
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.28);
}
html[data-visual="v5"] .cs-people-filter__menu { box-shadow: none; }
.cs-people-filter__list {
  max-block-size: min(18rem, 40vh);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.cs-status-rows {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
}
.cs-status-rows .cs-status-tabs { width: 100%; }
.cs-status-rows .cs-status-tabs--alone { width: auto; }
.cs-status-rows__line { display: flex; align-items: center; gap: 0.4rem; inline-size: 100%; min-inline-size: 0; }
.cs-status-rows__line .cs-status-tabs--alone { flex-shrink: 0; }
.cs-status-rows .cs-status-tabs--alone .cs-status-tab { flex: 0 0 auto; padding-inline: 0.7rem; }

.cs-sidebar-head:has(#cs_sidebar_search input[name=q]:not(:placeholder-shown)) .cs-status-tab--active {
  background: none;
  color: var(--txt-muted);
}

.cs-card__status {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  flex-shrink: 0;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 500;
  line-height: 1.2;
  background: var(--accent-soft);
  color: var(--accent);
}
.cs-card__status--resolved { background: var(--bg-subtle); color: var(--txt-muted); }

.cs-card__avatar { position: relative; display: inline-flex; flex-shrink: 0; }
.cs-card__ticket {
  position: absolute;
  inset-block-end: -1px;
  inset-inline-end: -2px;
  display: grid;
  place-items: center;
  inline-size: 17px;
  block-size: 17px;
  border-radius: 50%;
  border: 2px solid var(--sidebar-bg, var(--bg));
  background: var(--accent);
  color: var(--bg-pure);
}

.cs-search-lists { padding: 0.5rem 0.75rem 0.25rem; }
.cs-search-section { padding-block-end: 0.35rem; }
.cs-search-section__title { padding: 0.7rem 0.9rem 0.35rem; }
.cs-search-row {
  --hover-size: 0;
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.45rem 0.9rem;
  color: var(--txt); text-decoration: none;
}
.cs-search-row:hover { background: var(--hover); }
button.cs-search-row { inline-size: 100%; border: 0; background: none; font: inherit; text-align: start; }
.cs-search-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.cs-search-row__name { font-size: 0.875rem; font-weight: 500; }
.cs-search-row__meta,
.cs-search-row__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-search-row__meta { font-size: 0.78rem; color: var(--txt-muted); }
.cs-search-row__when { flex-shrink: 0; font-size: 11px; color: var(--txt-muted); }
mark.cs-hit {
  background: transparent;
  color: var(--accent);
  font-weight: 600;
}

.cs-group-new__canal-name,
.cs-group-canal__name {
  display: flex; align-items: center; gap: 0.4rem; margin: 0.3rem 0 0;
  font-size: 0.9rem; color: var(--txt);
}

.cs-picker-empty { padding: 1.5rem 0.85rem; text-align: center; color: var(--txt-muted); font-size: 0.875rem; }

.cs-msg__number-chip {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 0 5px;
  height: 15px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: var(--txt-muted);
  background: color-mix(in oklch, var(--txt-muted) 12%, transparent);
}

.cs-msg-info-note-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 4px 16px 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: color-mix(in oklch, oklch(0.6 0.13 288) 13%, var(--bg-pure));
  color: var(--txt-muted);
  font-size: 0.8rem;
  line-height: 1.4;
}
.cs-msg-info-note-disclaimer svg { flex-shrink: 0; margin-top: 1px; color: oklch(0.55 0.14 288); }

.cs-episode-chip.cs-episode--active .cs-episode-chip__row::before,
.cs-episode-chip.cs-episode--active .cs-episode-chip__row::after,
.cs-episode-end.cs-episode--active .cs-episode-end__row::before,
.cs-episode-end.cs-episode--active .cs-episode-end__row::after {
  background: var(--accent);
  height: 1.5px;
}
.cs-episode-chip.cs-episode--active .cs-episode-chip__row::before,
.cs-episode-end.cs-episode--active .cs-episode-end__row::before {
  background: linear-gradient(to right, transparent 0 9px, var(--accent) 9px);
}
/* v5: the active attendance has no rules to colour; its pill takes the soft green instead. */
:where(html[data-visual="v5"]) .cs-episode--active .cs-episode-line { background: var(--ds-cta-soft); }

@keyframes cs-episode-arrive {
  0%   { background: color-mix(in oklch, var(--accent) 24%, transparent); }
  100% { background: transparent; }
}
.cs-episode--arrived { animation: cs-episode-arrive 1.8s ease-out; }
.cs-episode-detail {
  min-width: 0;
  font-weight: 500;
  color: var(--txt-muted);
}

.cs-episode-end {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
  flex-shrink: 0;
  margin: 8px 0 16px;
}
.cs-episode-stats {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  max-width: 92%;
}
.cs-episode-stats__line {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--txt-muted);
  text-align: center;
}
.cs-episode-stats__people {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 3px 8px;
}
.cs-episode-stats__canais {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 3px 10px;
}
.cs-episode-stats__canal { display: inline-flex; align-items: center; gap: 4px; }
:where(html[data-visual="v5"]) .cs-episode-stats__line { font-size: var(--ds-font-size-2xs); color: var(--ds-text-muted); }

.cs-agent-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  vertical-align: middle;
}
.cs-band-avatar {
  vertical-align: middle;
}

.cs-msg__failed {
  position: absolute;
  inset-inline-start: -36px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%; border: 0 !important; padding: 0;
  background: var(--color-negative);
  color: #ffffff;
  cursor: pointer;
  line-height: 1;
  box-shadow: 0 1px 3px oklch(0 0 0 / 0.15) !important;
  outline: none !important;
}
.cs-msg__failed:hover {
  filter: brightness(0.9);
  box-shadow: none !important;
  outline: none !important;
}
.cs-msg__failed:focus:not(:focus-visible) { outline: none !important; }
.cs-msg__failed:focus-visible { box-shadow: none !important; outline: 2px solid var(--ds-focus-ring) !important; outline-offset: 0 !important; }

.cs-msg__partial-contact {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  color: var(--color-negative);
  font-size: 12px;
  line-height: 1.35;
  padding: 6px 8px;
}
.cs-msg__partial-contact svg { flex: none; }

.cs-msg__dialog {
  position: fixed;
  inset: 0;
  margin: auto;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 0.75rem;
  background: var(--bg-raised);
  color: var(--txt);
  box-shadow: 0 20px 40px oklch(0 0 0 / 0.25);
  width: min(320px, 90vw);
  height: fit-content;
}
.cs-msg__dialog::backdrop { background: oklch(0 0 0 / 0.4); }

.cs-msg__dialog--wide { inline-size: min(400px, 92vw); }

.cs-retry__label {
  margin: 0 0 8px;
  text-align: start;
  font-size: 12px;
  font-weight: 600;
  color: var(--txt-muted);
}

.cs-retry__reason {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  margin: 0 0 14px;
  padding: 0.6rem 0.75rem;
  border-radius: 10px;
  text-align: start;
  font-size: 13px;
  line-height: 1.4;
  color: var(--txt);
  background: color-mix(in oklch, var(--color-negative) 9%, transparent);
  border: 1px solid color-mix(in oklch, var(--color-negative) 35%, transparent);
}
.cs-retry__reason svg { flex-shrink: 0; margin-top: 0.1rem; color: var(--color-negative); }

.cs-retry__template { display: flex; margin-block-start: 8px; }

.cs-retry__loading { margin: 0; font-size: 12.5px; color: var(--txt-muted); text-align: start; }

.cs-modal__choices--tight { margin-block: 0 16px; }

.cs-modal__choice--compact { gap: 10px; padding: 10px 12px; }
.cs-modal__choice.cs-modal__choice--compact:hover { border-color: var(--border-strong); }
.cs-modal__choice--compact .cs-modal__choice-title { font-size: 13.5px; font-weight: 500; }
.cs-modal__choice--compact .cs-modal__choice-hint { font-size: 11.5px; }
.cs-modal__choice-mark { display: grid; place-items: center; flex-shrink: 0; }

label.cs-modal__choice:has(.cs-retry__input:checked) { background: color-mix(in oklch, var(--accent) 11%, transparent); }
label.cs-modal__choice:has(.cs-retry__input:focus-visible) { outline: 2px solid var(--ds-focus-ring); outline-offset: 0; }
.cs-modal__choice[aria-disabled] { opacity: 0.55; cursor: not-allowed; }
.cs-modal__choice[aria-disabled]:hover { background: none; border-color: var(--border-strong); }
.cs-modal__choice--still { cursor: default; }
.cs-modal__choice.cs-modal__choice--still:hover { background: none; border-color: var(--border-strong); }
.cs-modal__choice--still .cs-retry__input:disabled { opacity: 0.55; }

.cs-retry__input {
  --hover-size: 0;
  appearance: auto;
  accent-color: var(--accent);
  cursor: pointer;
  inline-size: 1.05rem;
  block-size: 1.05rem;
  margin: 0;
  flex-shrink: 0;
}
.cs-retry__input:focus { outline: none; box-shadow: none; }

.cs-msg__dialog-body { position: relative; padding: 24px 20px 20px; }
.cs-msg__dialog-title {
  margin: 0 0 16px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--txt);
  text-align: center;
  padding-inline: 16px;
}
.cs-msg__dialog .cs-panel-input {
  min-block-size: 8.5rem; margin-block-end: 6px;
  resize: vertical; text-align: start;
}
.cs-msg__dialog .cs-wa-format { margin-block-end: 12px; }

.cs-msg__dialog-actions { display: flex; flex-direction: column; gap: 8px; }
.cs-msg__dialog-options + .cs-msg__dialog-actions { margin-block-start: 8px; }

.cs-msg__dialog-btn,
.cs-msg__dialog-btn:hover,
.cs-msg__dialog-btn:focus,
.cs-msg__dialog-btn:focus-visible,
.cs-msg__dialog-close,
.cs-msg__dialog-close:hover,
.cs-msg__dialog-close:focus,
.cs-msg__dialog-close:focus-visible {
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

.cs-msg__dialog-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 7px;
  width: 100%;
  padding: 9px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  transition: background 0.12s;
}
.cs-msg__dialog-btn--primary {
  background: color-mix(in oklch, var(--accent) 12%, transparent);
  color: var(--accent);
}
.cs-msg__dialog-btn--primary:hover {
  background: color-mix(in oklch, var(--accent) 20%, transparent);
}
.cs-msg__dialog-btn--danger {
  background: color-mix(in oklch, var(--color-negative) 10%, transparent);
  color: var(--color-negative);
}
.cs-msg__dialog-btn--danger:hover {
  background: color-mix(in oklch, var(--color-negative) 18%, transparent);
}

.cs-msg__dialog-close {
  position: absolute; top: 0.5rem; right: 0.5rem;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  background: transparent;
  border-radius: 50%;
  color: var(--txt-muted);
  cursor: pointer;
}
.cs-msg__dialog-close:hover { background: var(--color-bg); color: var(--txt); }

.cs-msg__dialog form { margin: 0; }

.cs-contact-form__card { background: var(--surface); }
.cs-contact-form__card .input {
  --input-background: var(--bg-pure);
  --input-border-color: var(--color-border-darker);
  --input-border-radius: 8px;
}
/* The chip's own surface is the card's in the dark; it takes the fields' background, which reads in both themes. */
.cs-contact-form__card .ds-user-picker-chip { background: var(--ds-bg-pure); }
.cs-contact-form__handle-kind { max-inline-size: 8.5rem; }
.cs-contact-form__handle-label { max-inline-size: 8rem; }

.cs-person-form__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 1rem;
}
.cs-address { display: grid; gap: 1rem; }
.cs-address__wide { grid-column: 1 / -1; }

/* "Sem número" sits inside the number's field, on the right, and the text keeps clear of it. */
.cs-address__number { position: relative; }
.cs-address__status { display: flex; align-items: flex-start; gap: var(--ds-space-1); }
.cs-address__status[hidden] { display: none; }
.cs-address__status:not(.cs-form-field__success) > .cs-address__found { display: none; }
.cs-address__number .input { padding-inline-end: 8.5rem; }
.cs-address__number .cs-address__no-number {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0.75rem;
  margin: auto 0;
  block-size: fit-content;
}

/* No border or padding: the search is the CEP cell's other face, not a box under the form. */
.cs-address__finder { row-gap: var(--ds-space-3); }
/* The face's heading, in the label's place: it outweighs any sheet's muted label rule. */
.cs-address .cs-address__finder > .cs-address__finder-title { margin: 0; color: var(--ds-text); font-weight: var(--ds-weight-semibold); }
.cs-address__finder-place { display: flex; flex-wrap: wrap; gap: var(--ds-space-3); }
/* UF keeps the width of "Selecione"; Cidade takes the rest and wraps under it when the cell is narrow. */
.cs-address__finder-place > :last-child { flex: 1 1 9rem; min-inline-size: 0; }
.cs-address__finder-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cs-address__finder-actions .cs-btn { --hover-size: 0; border-radius: var(--ds-radius-full); }
.cs-address__results:empty { display: none; }
/* Each street keeps the height of its two lines: squeezed to the list's box, a row ran into the next one. */
.cs-address__suggestions {
  display: grid;
  grid-auto-rows: max-content;
  gap: 2px;
  max-block-size: 18rem;
  margin: 0;
  padding: var(--ds-space-1);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-xl);
  background: var(--ds-bg-pure);
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
}
.cs-address__suggestion { border: 0; border-radius: var(--ds-radius-lg); cursor: pointer; }
.cs-address__suggestion:is(:hover, .is-active) { background: var(--ds-hover); }
.cs-address__suggestion .cs-picker-row__subtitle { white-space: normal; }
.cs-address__search-empty { display: grid; justify-items: start; gap: 0.5rem; color: var(--txt-muted); font-size: var(--ds-font-size-sm); }
.cs-address__search-empty p { margin: 0; }
.cs-address__search-empty .cs-btn { --hover-size: 0; border-radius: var(--ds-radius-full); }

.cs-person-form:has(input[name$="[kind]"][value="company"]:checked) [data-kind="individual"],
.cs-person-form:has(input[name$="[kind]"][value="individual"]:checked) [data-kind="company"] { display: none; }

.cs-person-lists { margin-block-start: 0.5rem; }
.cs-person-block__relationship { font-size: 0.8125rem; color: var(--txt-muted); }
.cs-person-relationships { display: flex; flex-direction: column; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.cs-person-relationship {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.75rem;
  border-radius: 0.75rem;
  background: var(--surface);
}
.cs-person-relationship__body { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.cs-person-relationship__line { font-size: 0.875rem; color: var(--txt); overflow-wrap: anywhere; }
.cs-person-relationship__line a { color: var(--accent-strong); text-decoration: none; font-weight: 600; }
.cs-person-relationship__line a:hover { text-decoration: underline; }
.cs-person-relationship__meta { font-size: 0.8125rem; color: var(--txt-muted); }
.cs-person-relationship--ended { background: transparent; border: 1px dashed var(--border-strong); }
.cs-person-relationship--ended .cs-person-relationship__line,
.cs-person-relationship--ended .cs-person-relationship__line a { color: var(--txt-muted); font-weight: 400; }
.cs-person-relationship__menu { position: relative; flex-shrink: 0; }
.cs-person-relationship__menu summary { --hover-size: 0; list-style: none; cursor: pointer; }
.cs-person-relationship__menu summary::-webkit-details-marker { display: none; }
.cs-person-relationship__menu summary:hover { background: var(--hover); }
.cs-person-relationship__menu .cs-menu { position: absolute; inset-inline-end: 0; inset-block-start: 100%; z-index: 10; min-inline-size: 11rem; }
.cs-person-relationship__menu form { display: block; }
.cs-person-relationship__menu :where(button, a) { --hover-size: 0; inline-size: 100%; }
.cs-person-choice__new { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block-start: 0.75rem; }
.cs-person-relationship__menu .cs-menu__item--danger { color: var(--negative); }
.cs-relationship-kind--inactive { opacity: 0.6; }
.cs-relationship-kind__icon { color: var(--accent); }
.cs-custom-field--inactive { opacity: 0.6; }
.cs-custom-field__icon { color: var(--accent); }
.cs-person-documents { display: flex; flex-direction: column; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.cs-person-document {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.75rem;
  border-radius: 0.75rem;
  background: var(--surface);
}
.cs-person-document__icon { display: inline-flex; color: var(--accent); flex-shrink: 0; }
.cs-person-document__body { flex: 1 1 12rem; min-inline-size: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.cs-person-document__name { font-size: 0.875rem; color: var(--txt); overflow-wrap: anywhere; }
.cs-person-document__meta { font-size: 0.8125rem; color: var(--txt-muted); }
.cs-person-document__actions { display: flex; gap: 0.25rem; margin-inline-start: auto; }
.cs-person-document__actions form { display: contents; }
.cs-person-document__actions :where(a, button) { --hover-size: 0; }
.cs-person-document__actions :where(a, button):hover { background: var(--hover); }
.cs-person-document__actions :where(a, button):focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: 0; }
.cs-person-timeline__frame { display: block; }
.cs-person-timeline__scope { margin: -0.25rem 0 0.5rem; font-size: 0.75rem; color: var(--txt-muted); }
.cs-person-timeline__more { display: flex; justify-content: center; margin-block-start: 0.75rem; }
.cs-person-timeline__link { color: var(--accent-strong); text-decoration: none; }
.cs-person-timeline__link:hover { text-decoration: underline; }
.cs-person-timeline__link:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: 0; border-radius: 0.25rem; }
.cs-profile-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr)); gap: 0.5rem; margin: 0; }
.cs-profile-stats__item { display: grid; gap: 0.15rem; padding: 0.6rem 0.75rem; border-radius: 0.75rem; background: var(--surface); container-type: inline-size; align-content: space-between; }
.cs-profile-stats dt { font-size: 0.75rem; color: var(--txt-muted); }
.cs-profile-stats__value { margin: 0; font-size: 1.125rem; font-weight: 600; color: var(--txt); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
/* Sized by the card, so the longest month ("fevereiro de 2026") stays on one line. */
.cs-profile-stats__value--date { font-size: clamp(0.8125rem, 10cqi, 1.125rem); text-wrap: balance; }
.cs-person-activity { display: grid; gap: 0.75rem; }
.cs-profile-stats__scope { margin: 0.4rem 0 0; font-size: 0.75rem; color: var(--txt-muted); }

/* v5: the contact's and the person's profile as the room's stats in the Chat: the name in the topbar, the
   numbers in tiles, and each section a label over a sheet of the pure paper on the drawn ground. */
:where(html[data-visual="v5"]) .cs-profile { display: flex; flex-direction: column; gap: var(--ds-space-6); min-inline-size: 0; }
:where(html[data-visual="v5"]) .cs-profile :is(section, .cs-profile-stats-block, .cs-person-activity) { display: flex; flex-direction: column; gap: var(--ds-space-2); min-inline-size: 0; }
:where(html[data-visual="v5"]) .cs-profile :is(section, .cs-profile-stats-block) > :is(h2.cs-settings__subtitle, div > h2.cs-settings__subtitle),
:where(html[data-visual="v5"]) .cs-profile section > .flex > h2.cs-settings__subtitle {
  margin: 0;
  padding-inline: var(--ds-space-1);
  font-size: var(--ds-info-title);
  font-weight: var(--ds-weight-regular);
  line-height: var(--ds-info-leading);
  letter-spacing: normal;
  text-transform: none;
  color: var(--ds-text-muted);
}
:where(html[data-visual="v5"]) .cs-profile section > .flex.mb-2 { margin-block-end: 0; }
:where(html[data-visual="v5"]) .cs-profile .cs-settings__list {
  gap: 0;
  padding: var(--ds-space-1);
  border-radius: var(--ds-radius-xl);
  background: var(--ds-bg-pure);
}
:where(html[data-visual="v5"]) .cs-profile .cs-settings__list > :is(.cs-card, a.cs-card) {
  min-block-size: 56px;
  padding-inline: var(--ds-space-3);
  border: 0;
  border-radius: var(--ds-radius-lg);
  background: none;
  font-weight: var(--ds-weight-regular);
}
@media (any-hover: hover) {
  :where(html[data-visual="v5"]) .cs-profile .cs-settings__list > a.cs-card:hover { background: var(--ds-hover); }
  :where(html[data-visual="v5"]) .cs-profile .cs-settings__list > div.cs-card:hover { background: none; }
}
:where(html[data-visual="v5"]) .cs-profile .cs-settings__list > .cs-card + .cs-card { border-block-start: 1px solid var(--ds-border); border-start-start-radius: 0; border-start-end-radius: 0; }
:where(html[data-visual="v5"]) .cs-profile .cs-lists-block { padding: var(--ds-space-4); border-radius: var(--ds-radius-xl); background: var(--ds-bg-pure); }
:where(html[data-visual="v5"]) .cs-browse { display: flex; flex-direction: column; gap: var(--ds-space-2); min-inline-size: 0; }
/* People and groups as WhatsApp's list: rows of 72 px on one sheet, the name at 16 in semibold over the muted line. */
:where(html[data-visual="v5"]) .cs-browse .cs-settings__list--flush { gap: 0; padding: var(--ds-space-1); border-radius: var(--ds-radius-xl); background: var(--ds-bg-pure); }
:where(html[data-visual="v5"]) .cs-person-row { padding-inline: var(--ds-space-3); border-radius: var(--ds-radius-lg); }
:where(html[data-visual="v5"]) .cs-person-row__name { font-size: var(--ds-font-size-base); font-weight: var(--ds-weight-semibold); }
:where(html[data-visual="v5"]) .cs-person-row__detail { font-size: var(--ds-font-size-compact); color: var(--ds-text-muted); }
/* The lists hold one line: a name that does not fit ends in an ellipsis and the +N stays whole beside the last pill. */
.cs-person-row__lists > .ds-chip[data-list-id] { flex-shrink: 1; min-inline-size: 0; }
.cs-person-row__lists > .ds-more { flex-shrink: 0; }
/* The group's channels give way to its name: at most 40 % of the row, each cut with an ellipsis. On a phone they take a
   line of their own under the name, lined up with it, as the panel header's aside does. */
.cs-person-row__channels { flex: 0 1 auto; max-inline-size: 40%; }
.cs-person-row__channels > .cs-canal-chip { min-inline-size: 0; }
@media not all and (min-width: 100ch) {
  .cs-person-row:has(> .cs-person-row__channels) { flex-wrap: wrap; row-gap: var(--ds-space-1); }
  .cs-person-row > .cs-person-row__channels { order: 1; flex-basis: 100%; max-inline-size: none; padding-inline-start: calc(44px + 0.75rem); }
}
@media (min-width: 100ch) {
  :where(html[data-visual="v5"]) .cs-person-row__name { font-size: var(--ds-font-size-sm); }
}
:where(html[data-visual="v5"]) .cs-person-header--meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-2); }
:where(html[data-visual="v5"]) .cs-person-header__label { font-size: var(--ds-font-size-compact); color: var(--ds-text-muted); }
.cs-document-lookup__status { display: flex; align-items: flex-start; gap: var(--ds-space-1); margin: 0; font-size: 0.8125rem; color: var(--txt-muted); }
.cs-document-lookup__status:not(.cs-form-field__success) > .cs-document-lookup__found { display: none; }
.cs-document-lookup__status[hidden] { display: none; }
:is(.cs-document-lookup__status, .cs-address__status) > svg { flex-shrink: 0; margin-block-start: 0.15em; }
.cs-partner-suggestions__hint { margin: 0.15rem 0 0.5rem; font-size: 0.8125rem; color: var(--txt-muted); }
.cs-partner-suggestions__failure { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; margin-block-end: 0.5rem; }
.cs-partner-suggestions__failure .cs-partner-suggestions__hint { margin: 0; }
.cs-partner-suggestions__failure :where(button) { --hover-size: 0; }
.cs-partner-suggestions__failure :where(button):hover { background: var(--hover); }
.cs-partner-suggestions__list { display: flex; flex-direction: column; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.cs-partner-suggestion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.75rem;
  border-radius: 0.75rem;
  background: var(--surface);
}
.cs-partner-suggestion__body { flex: 1 1 12rem; min-inline-size: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.cs-partner-suggestion__name { font-size: 0.875rem; font-weight: 600; color: var(--txt); overflow-wrap: anywhere; }
.cs-partner-suggestion__meta { font-size: 0.8125rem; color: var(--txt-muted); }
.cs-partner-suggestion__actions { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.cs-partner-suggestion__actions form { display: contents; }
.cs-partner-suggestion__actions :where(a, button) { --hover-size: 0; }
.cs-partner-suggestion__actions :where(a, button):hover { background: var(--hover); }
.cs-partner-suggestion__actions :where(a, button):focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: 0; }
.cs-partner-link__form { display: block; }
.cs-partner-link__choice { --hover-size: 0; inline-size: 100%; text-align: start; }
.cs-person-block__staff { display: inline-flex; align-items: center; gap: 0.4rem; }
.cs-modal .ds-user-picker--inline { inline-size: 100%; }
.cs-staffing-confirm__same, .cs-staffing-confirm__same-name { display: flex; align-items: center; gap: 0.4rem; margin: 0; font-size: 0.9rem; }
.cs-staffing-confirm__exception { padding: 0.75rem; border: 1px solid var(--border-strong); border-radius: var(--ds-radius-md, 0.75rem); display: flex; flex-direction: column; gap: 0.35rem; text-align: start; }
.cs-staffing-confirm__exception p { margin: 0; }
.cs-staffing-confirm__ack { display: flex; align-items: flex-start; gap: 0.5rem; text-align: start; font-size: 0.9rem; }
.cs-staffing-confirm__form { display: flex; flex-direction: column; gap: 0.75rem; }
.cs-staffing-confirm { display: flex; flex-direction: column; gap: 1rem; }
.cs-staffing-confirm__change { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin: 0; }
.cs-staffing-confirm__change div { padding: 0.75rem; border: 1px solid var(--border); border-radius: var(--ds-radius-md, 0.75rem); }
.cs-staffing-confirm__change dt { color: var(--txt-muted); font-size: 0.8rem; }
.cs-staffing-confirm__change dd { margin: 0.15rem 0 0; font-weight: 600; overflow-wrap: anywhere; }
.cs-staffing-confirm .cs-modal__actions { flex-direction: row; flex-wrap: wrap; justify-content: center; }
.cs-staffing-confirm .cs-modal__actions form { display: contents; }
.cs-staffing-confirm__list { text-align: start; margin: 0; padding-inline-start: 1.1rem; display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.9rem; }
@media (max-width: 480px) { .cs-staffing-confirm__change { grid-template-columns: 1fr; } }
.cs-responsible-filter { display: flex; margin-block-end: 0.75rem; }
.cs-responsible-filter__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.35rem 0.25rem 0.3rem;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 0.8125rem;
  font-weight: 600;
  max-inline-size: 100%;
}
.cs-responsible-filter__chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-responsible-filter__clear { --hover-size: 0; display: inline-flex; padding: 0.2rem; border-radius: 50%; color: inherit; }
.cs-responsible-filter__clear:hover { background: var(--hover); }
.cs-handle-meta { display: flex; flex-wrap: wrap; gap: 0.15rem 0.6rem; font-size: 0.75rem; color: var(--txt-muted); }
.cs-contact-panel__hero .cs-handle-meta { justify-content: center; }
.cs-handle-meta__check { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--accent-strong); }
.cs-handle-meta__check--off { color: var(--txt-muted); }
.cs-handle-meta__check--unverified { color: var(--txt-muted); }
.cs-handle-meta__undo { --hover-size: 0; padding: 0; background: none; border: 0; font: inherit; color: var(--accent-strong); font-weight: 600; text-decoration: underline; cursor: pointer; }
.cs-person-block { display: flex; flex-direction: column; gap: 0.6rem; }
.cs-person-block__person {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.75rem;
  border-radius: 0.75rem;
  background: var(--bg-subtle);
}
.cs-person-block__icon { flex-shrink: 0; color: var(--accent); }
.cs-person-block__body { flex: 1 1 12rem; min-inline-size: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.cs-person-block__kind { font-size: 0.875rem; font-weight: 600; color: var(--txt); }
.cs-person-block__document { font-size: 0.8125rem; color: var(--txt-muted); white-space: nowrap; }
.cs-person-block__complete { align-self: flex-start; }
.cs-contact-panel__move { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--ds-space-1) var(--ds-space-2); margin: 0.35rem 0 0; font-size: 0.75rem; color: var(--txt-muted); text-align: center; }
.cs-contact-speakers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0.15rem 0.4rem;
  margin: 0.5rem 0 0;
  padding: 0.45rem 0.75rem;
  border-radius: 0.75rem;
  background: var(--bg-subtle);
  font-size: 0.75rem;
  text-align: center;
}
.cs-contact-speakers dd { margin: 0; }
.cs-contact-speakers__label { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--txt-muted); }
.cs-contact-speakers__names { font-weight: 600; color: var(--txt); }
.cs-contact-speakers-form { display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
.cs-contact-speakers-form .cs-modal__list { margin-block-start: 0; }
.cs-contact-speakers-form__tie { align-self: flex-start; }
.cs-speaker-choice { --hover-size: 0; cursor: pointer; }
.cs-speaker-choice:has(input:checked) { background: color-mix(in oklch, var(--accent) 11%, transparent); }
.cs-speaker-choice:has(input:checked):hover { border-color: var(--color-border); }
.cs-speaker-choice:has(input:focus-visible) { outline: 2px solid var(--ds-focus-ring); outline-offset: 0; }
.cs-speaker-choice__check {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 1.4rem;
  block-size: 1.4rem;
  margin-inline-start: auto;
  border-radius: 50%;
  border: 1.5px solid var(--border-strong);
  color: transparent;
  transition: background-color 0.12s, border-color 0.12s, color 0.12s;
}
.cs-speaker-choice:has(input:checked) .cs-speaker-choice__check { background: var(--accent); border-color: var(--accent); color: var(--bg-pure); }
.cs-contact-addition__page { max-inline-size: 26rem; }
.cs-company-tie__switch { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; cursor: pointer; }
.cs-company-tie .switch__input:checked + .switch__btn { background-color: var(--accent); }
.cs-company-fields { display: none; flex-direction: column; gap: 1rem; }
.cs-company-tie:has(.switch__input:checked) .cs-company-fields { display: flex; }
.cs-contact-form:has(input[name="customer_support_contact[person_kind]"][value="company"]:checked) .cs-company-tie { display: none; }
.cs-company-picker__chosen { display: flex; align-items: center; gap: 0.35rem; margin: 0; font-size: 0.8125rem; color: var(--txt-muted); }
.cs-company-picker__chosen[hidden] { display: none; }
.cs-company-picker__chosen span { display: none; align-items: center; gap: 0.35rem; }
.cs-company-picker__chosen[data-state="existing"] [data-when="existing"],
.cs-company-picker__chosen[data-state="new"] [data-when="new"] { display: inline-flex; }
.cs-company-picker__results:empty { display: none; }
.cs-company-picker__results .cs-modal__list { border: 1px solid var(--border-strong); border-radius: 0.75rem; padding: 0.25rem; }
.cs-company-picker__results .cs-modal__choice { --hover-size: 0; inline-size: 100%; text-align: start; background: transparent; font: inherit; cursor: pointer; }
.cs-company-picker__results .cs-modal__choice:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: -2px; }
.cs-company-picker__new .cs-modal__choice-title { color: var(--accent-strong); }
.cs-person-choice { display: contents; }
.cs-person-choice .cs-modal__choice { inline-size: 100%; text-align: start; background: transparent; font: inherit; cursor: pointer; }
.cs-person-choice__icon { color: var(--accent); }
.cs-retry__number { --hover-size: 0; inline-size: 100%; text-align: start; background: transparent; font: inherit; color: inherit; cursor: pointer; }
.cs-retry__number:disabled { opacity: 0.55; cursor: not-allowed; }
.cs-person-choice__empty { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; }

/* O fluxo de adicionar contato usa o painel estreito, não o espaçamento dos modais. */
.cs-contact-panel__sheet #cs_contact_form.cs-contact-flow {
  display: block;
  padding: 24px 20px 32px;
}
.cs-contact-panel__sheet .cs-contact-flow__intro { margin-block-end: 24px; }
.cs-contact-panel__sheet .cs-contact-flow__intro .cs-modal__title {
  display: none;
}
.cs-contact-panel__sheet .cs-contact-flow__intro .cs-modal__text {
  margin: 0;
  max-inline-size: none;
  text-align: start;
}
.cs-contact-panel__sheet .cs-modal__choices { gap: 12px; margin-block-start: 0; }
.cs-contact-panel__sheet .cs-modal__choice {
  gap: 12px;
  padding: 16px;
  border-color: var(--color-border);
  border-radius: 14px;
  background: var(--surface);
}
.cs-contact-panel__sheet .cs-modal__choice:hover,
.cs-contact-panel__sheet .cs-modal__choice:focus-visible { border-color: var(--accent); }
.cs-contact-panel__sheet .cs-modal__choice-title { line-height: 1.35; }
.cs-contact-panel__sheet .cs-modal__choice-hint { line-height: 1.5; }
.cs-contact-panel__sheet .cs-modal__search { margin-block-start: 0; }
.cs-contact-panel__sheet .cs-modal__list { gap: 8px; margin-block-start: 16px; }
.cs-contact-panel__sheet .cs-contact-flow__notice {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin-block: 0 16px;
}
.cs-contact-panel__sheet .cs-contact-flow__notice svg { flex: 0 0 auto; margin-block-start: 0.1rem; }
.cs-contact-panel__sheet .cs-modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-block-start: 24px;
}
.cs-contact-panel__sheet .cs-contact-form__card {
  padding: 0;
  border-radius: 0;
  background: transparent;
}
.cs-contact-panel__sheet .cs-contact-form__card + .cs-contact-form__card {
  padding-block-start: 24px;
  border-block-start: 1px solid var(--color-border);
}
.cs-contact-panel__sheet .cs-contact-form__actions {
  padding-block-start: 20px;
  border-block-start: 1px solid var(--color-border);
}
.cs-contact-panel__sheet .input {
  --input-border-radius: 12px;
  --input-border-color: var(--color-border-darker);
  --input-background: var(--surface);
  --input-padding: 10px 12px;
  box-sizing: border-box;
  min-block-size: 44px;
}
.cs-contact-panel__sheet [data-nested-fields-row] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px;
  gap: 8px;
}
.cs-contact-panel__sheet .cs-contact-form__handle-kind {
  grid-column: 1;
  max-inline-size: none;
}
.cs-contact-panel__sheet .cs-contact-form__handle-value,
.cs-contact-panel__sheet .cs-contact-form__handle-label {
  grid-column: 1 / -1;
  max-inline-size: none;
  min-inline-size: 0;
}
.cs-contact-panel__sheet [data-nested-fields-row] > button {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
}

.cs-contact-form__title { margin: 0; font-size: 0.875rem; font-weight: 600; }

/* v5: the form's cards are sheets of the pure paper on the drawn ground (in the side panel too), the fields the
   catalog's box, and the person's kind a segmented control on the fill, the chosen one on the paper. */
:where(html[data-visual="v5"]) .cs-contact-form__card { border-radius: var(--ds-radius-2xl); background: var(--ds-bg-pure); }
:where(html[data-visual="v5"]) .cs-contact-form__card .input--box {
  --input-background: var(--ds-bg-pure);
  --input-border-color: var(--ds-border-strong);
  --input-border-radius: var(--ds-radius-xl);
}
:where(html[data-visual="v5"]) :is(.cs-contact-form__title, .cs-msg-info-sender__label) {
  font-size: var(--ds-info-title);
  font-weight: var(--ds-weight-regular);
  line-height: var(--ds-info-leading);
  letter-spacing: normal;
  text-transform: none;
  color: var(--ds-text-muted);
}
:where(html[data-visual="v5"]) .cs-contact-panel__sheet #cs_contact_form.cs-contact-flow { padding: var(--ds-space-1) var(--ds-space-3) var(--ds-space-6); }
:where(html[data-visual="v5"]) .cs-contact-panel__sheet .cs-contact-form__card { padding: var(--ds-space-4); border-radius: var(--ds-radius-xl); background: var(--ds-bg-pure); }
:where(html[data-visual="v5"]) .cs-contact-panel__sheet .cs-contact-form__card + .cs-contact-form__card { padding-block-start: var(--ds-space-4); border-block-start: 0; }
:where(html[data-visual="v5"]) .cs-contact-panel__sheet .cs-contact-form__actions { border-block-start: 0; }
:where(html[data-visual="v5"]) .cs-contact-panel__sheet .cs-modal__choice { border-color: transparent; background: var(--ds-bg-pure); }
:where(html[data-visual="v5"]) .cs-contact-panel__sheet .cs-modal__choice:hover { border-color: transparent; background: var(--ds-fill); }
:where(html[data-visual="v5"]) .cs-contact-panel__sheet .cs-modal__choice:focus-visible { border-color: transparent; outline: 2px solid var(--ds-focus-ring); outline-offset: -2px; }
:where(html[data-visual="v5"]) .cs-contact-panel__sheet .cs-modal__choices { gap: var(--ds-space-2); }
:where(html[data-visual="v5"]) .cs-contact-panel__sheet .cs-modal__list { gap: var(--ds-space-2); }
:where(html[data-visual="v5"]) .cs-contact-panel__sheet .input:not(.input--box, textarea) { --input-border-radius: var(--ds-radius-full); }

.cs-contact-panel__history { list-style: none; margin: 0; padding: 0; }
.cs-contact-panel__history-item {
  position: relative;
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  column-gap: 0.65rem;
  padding-block: 0.45rem;
  align-items: start;
}
.cs-contact-panel__history-item::before {
  content: "";
  position: absolute;
  left: 0.75rem; top: 0; bottom: 0;
  width: 1px;
  background: var(--color-border);
  transform: translateX(-0.5px);
}
.cs-contact-panel__history-item:first-child::before { top: 1.2rem; }
.cs-contact-panel__history-item:last-child::before { bottom: calc(100% - 1.2rem); }
.cs-contact-panel__history-node {
  position: relative; z-index: 1;
  width: 1.5rem; height: 1.5rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--bg-pure);
  border: 1px solid var(--color-border);
  color: var(--txt-muted);
}
.cs-contact-panel__history-item:first-child .cs-contact-panel__history-node {
  border-color: var(--accent);
  color: var(--accent);
}
.cs-contact-panel__history-body { display: grid; gap: 0.15rem; padding-block-start: 0.1rem; min-width: 0; }
.cs-contact-panel__history-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem; min-width: 0; }
.cs-contact-panel__history-kind {
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--txt-muted);
}
.cs-contact-panel__history-value {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--txt);
}
.cs-contact-panel__history-prev { font-size: 0.7rem; color: var(--txt-muted); }
.cs-contact-panel__history-when { font-size: 0.7rem; color: var(--txt-muted); white-space: nowrap; }

.cs-contact-panel__hero {
  display: flex; flex-direction: column; align-items: center;
  gap: 0.35rem; padding: 1.25rem 1rem 0.9rem;
  background: var(--bg-pure);
  border-block-end: 5px solid var(--color-bg);
}
.cs-contact-panel__name { font-size: 1.125rem; font-weight: 600; color: var(--txt); text-align: center; }
.cs-contact-panel__title-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.4rem; }
.cs-contact-panel__phone { font-size: 0.8125rem; color: var(--txt-muted); }
.cs-contact-panel__affiliation { max-width: 100%; font-size: 0.75rem; color: var(--txt-muted); }

.cs-contact-panel__profile-link {
  margin-block-start: 0.6rem;
  gap: 0.4rem;
  text-decoration: none;
}
.cs-contact-panel__profile-link svg:last-child { color: var(--txt-muted); }

.cs-contact-panel__unsaved {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-block-start: 0.5rem;
}

.cs-contact-panel__unsaved-hint {
  margin: 0;
  max-width: 26ch;
  text-align: center;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--txt-muted);
}

.cs-contact-panel__section {
  padding: 0.7rem 1.25rem;
  border-block-end: 5px solid var(--color-bg);
}
.cs-contact-panel__section:last-child { border-block-end: 0; }

#cs_contact_panel_body :where(button, summary, input, .btn, .input) { --hover-size: 0; }
#cs_group_panel_body :where(button, summary, input, .btn, .input) { --hover-size: 0; }

.cs-group-page #cs_group_panel_body {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-pure);
}
.cs-group-page .cs-contact-panel__hero { border-block-end: 1px solid var(--border); }
.cs-group-page .cs-contact-panel__section { border-block-end: 1px solid var(--border); }

.cs-contact-panel__disclosure-summary {
  --hover-size: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  list-style: none;
  border-radius: 8px;
}
.cs-contact-panel__disclosure-summary::-webkit-details-marker { display: none; }
.cs-contact-panel__disclosure-summary .cs-contact-panel__section-title { margin: 0; }
@media (any-hover: hover) {
  .cs-contact-panel__disclosure-summary:hover { background: var(--color-bg); }
}
.cs-contact-panel__disclosure-caret {
  display: inline-flex;
  margin-inline-start: auto;
  color: var(--txt-muted);
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
.cs-contact-panel__disclosure[open] .cs-contact-panel__disclosure-caret { transform: rotate(90deg); }
.cs-contact-panel__disclosure[open] > .cs-contact-panel__fields,
.cs-contact-panel__disclosure[open] > .cs-contact-panel__history { margin-block-start: 0.55rem; }
.cs-contact-panel__disclosure-summary:focus-visible {
  outline: 2px solid var(--ds-focus-ring);
  outline-offset: 0;
  border-radius: 6px;
}
.cs-contact-panel__section-title {
  display: flex; align-items: center; gap: 0.5rem;
  margin: 0 0 0.55rem;
  font-size: 0.7rem; font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.cs-contact-panel__fields { display: grid; gap: 0.5rem; margin: 0; }
.cs-contact-panel__fields > div { display: grid; gap: 0.15rem; }
.cs-contact-panel__fields dt { font-size: 0.8125rem; color: var(--txt); margin: 0; display: flex; align-items: center; gap: 0.4rem; }
.cs-contact-panel__fields dd { font-size: 0.8125rem; color: var(--txt); margin: 0; }

.cs-contact-panel__fields--icons { gap: 0.6rem; }
.cs-contact-panel__fields--icons > div {
  grid-template-columns: 1.75rem 1fr;
  grid-template-areas: "icon label" "icon value";
  column-gap: 0.6rem;
  row-gap: 0.05rem;
  align-items: start;
}
.cs-contact-panel__field-icon {
  grid-area: icon;
  align-self: center;
  display: grid; place-items: center;
  width: 1.75rem; height: 1.75rem;
  border-radius: 0.5rem;
  background: var(--color-bg);
  color: var(--txt-muted);
}
.cs-contact-panel__fields--icons dt {
  grid-area: label;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--txt-muted);
}
.cs-contact-panel__fields--icons dd { grid-area: value; font-weight: 500; }
.cs-contact-panel__field-num { font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.cs-contact-panel__handle-label {
  margin-inline-start: 0.35rem;
  font-size: 0.6875rem;
  font-weight: 400;
  color: var(--txt-muted);
}

.cs-contact-panel__msg-status {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  color: var(--txt-muted);
}
.cs-contact-panel__msg-status--read { color: var(--accent); }
.cs-contact-panel__msg-status--failed { color: var(--color-alert); }
.cs-contact-panel__msg-when { color: var(--txt-muted); }

.cs-msg-info-sender {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.cs-msg-info-sender__label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.cs-msg-info-sender__row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.cs-msg-info-sender__name {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--txt);
}
.cs-msg-info-channel__time {
  margin-inline-start: auto;
  font-size: 0.8rem;
  color: var(--txt-muted);
}

.cs-contact-panel__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.1rem; }
.cs-contact-panel__show-all { margin-block-start: 0.4rem; }
.cs-contact-panel__show-all-summary {
  list-style: none;
  cursor: pointer;
  text-align: center;
  padding: 0.35rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent);
}
.cs-contact-panel__show-all-summary::-webkit-details-marker { display: none; }
.cs-contact-panel__show-all[open] > .cs-contact-panel__list { margin-block-start: 0.35rem; }
.cs-contact-panel__show-all-less { display: none; }
.cs-contact-panel__show-all[open] .cs-contact-panel__show-all-more { display: none; }
.cs-contact-panel__show-all[open] .cs-contact-panel__show-all-less { display: inline; }
.cs-contact-panel__conv {
  display: block; padding: 0.3rem 0.75rem;
  border-radius: 0.5rem; text-decoration: none;
  color: var(--txt);
  background: var(--color-bg);
  transition: background 0.1s;
}
.cs-contact-panel__conv:hover { background: color-mix(in oklch, var(--accent) 8%, var(--color-bg)); }
.cs-contact-panel__conv-title { font-size: 0.8125rem; font-weight: 500; margin-block-end: 0.15rem; }
.cs-contact-panel__conv-meta { display: flex; align-items: center; gap: 0.5rem; font-size: 0.7rem; color: var(--txt-muted); }

.cs-msg, .cs-msg__bubble { overflow: visible; }

.cs-msg__menu {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 42px; height: 27px;
  display: flex; align-items: flex-start; justify-content: flex-end;
  opacity: 0; pointer-events: none;
  transition: opacity 0.12s ease;
  z-index: 4;
  background: radial-gradient(at 100% 0%, var(--ds-msg-in) 60%, transparent 85%);
  border-top-right-radius: 7.5px;
}
.cs-msg.cs-msg--me .cs-msg__menu {
  background: radial-gradient(at 100% 0%, #d9fdd3 60%, transparent 85%);
}
.cs-msg__bubble:hover .cs-msg__menu, .cs-msg__menu.is-open { opacity: 1; pointer-events: auto; }

/* Outside the bubble, on the side facing the middle of the thread, and only where a pointer can hover. */
.cs-msg__react-trigger,
.cs-msg__reaction-more {
  display: grid; place-items: center;
  padding: 0;
  border: 0 !important; border-radius: 50%;
  color: var(--muted-foreground);
  cursor: pointer;
  box-shadow: none !important;
  --hover-size: 0; outline: none;
  transition: opacity 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.cs-msg__react-trigger {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: 30px; height: 30px;
  display: none;
  background: transparent;
  opacity: 0; pointer-events: none;
}
.cs-msg:not(.cs-msg--me) .cs-msg__react-trigger { inset-inline-start: calc(100% + 6px); }
.cs-msg--me .cs-msg__react-trigger { inset-inline-end: calc(100% + 6px); }
.cs-msg__react-trigger:hover,
.cs-msg__react-trigger:focus-visible { background: var(--ds-menu-hover); color: var(--ds-menu-text); }
@media (hover: hover) and (pointer: fine) {
  .cs-msg__react-trigger { display: grid; }
  .cs-msg:hover .cs-msg__react-trigger,
  .cs-msg__react-trigger:focus-visible { opacity: 1; pointer-events: auto; }
}
.cs-msg__bubble:has(.cs-msg__menu[data-customer-support--message-menu-reactable-value="false"]) .cs-msg__react-trigger,
.cs-selection-mode .cs-msg__react-trigger { display: none; }

/* A held finger opens our menu, so the phone's own callout and text selection would only fight it. */
@media (hover: none) {
  .cs-msg__bubble { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
}

.cs-msg__menu-trigger {
  width: 20px; height: 20px;
  margin-top: 2px; margin-inline-end: 2px;
  display: grid; place-items: center;
  padding: 0;
  color: oklch(0 0 0 / 0.55);
  background: transparent;
  border: 0 !important;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: none !important;
  outline: none !important;
}
.cs-msg__menu-trigger:hover { color: oklch(0 0 0 / 0.85); }
.cs-msg__menu-trigger:focus-visible { outline: 2px solid var(--ds-focus-ring) !important; outline-offset: 0 !important; }

.cs-msg__bubble:has(.cs-msg__media) .cs-msg__menu,
.cs-msg__bubble:has(.cs-msg__sticker) .cs-msg__menu {
  background: transparent !important;
}
.cs-msg__bubble:has(.cs-msg__media) .cs-msg__menu-trigger,
.cs-msg__bubble:has(.cs-msg__sticker) .cs-msg__menu-trigger {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: oklch(0 0 0 / 0.5);
  color: #fff;
}
.cs-msg__bubble:has(.cs-msg__media) .cs-msg__menu-trigger:hover,
.cs-msg__bubble:has(.cs-msg__sticker) .cs-msg__menu-trigger:hover {
  color: #fff;
  background: oklch(0 0 0 / 0.68);
}

/* The frame only holds the pieces; each one is fixed and placed against the bubble on its own. */
.cs-msg__popover { display: contents; }
.cs-msg__popover[hidden] { display: none; }
.cs-msg__popover :where(button, input) { --hover-size: 0; outline: none; }
/* A long touch dims the page around the bubble; the hole is cut by the controller. */
.cs-msg__scrim { position: fixed; inset: 0; z-index: 59; background: oklch(0 0 0 / 0.4); }
.cs-msg__scrim[hidden] { display: none; }

.cs-msg__menu-card,
.cs-msg__reaction-pill {
  position: fixed;
  z-index: 60;
  top: 0; left: 0;
  max-width: calc(100vw - 16px);
  background: var(--ds-menu-bg);
  border: 1px solid var(--border);
  color: var(--ds-menu-text);
  animation: fadeUp 0.12s ease both;
}
/* The ds-menu shell: a breath inside, the hover a pill that keeps off the rounded edge. */
.cs-msg__menu-card { inline-size: max-content; min-inline-size: 188px; max-inline-size: calc(100vw - 16px); padding: var(--ds-menu-inset); border-color: var(--ds-menu-border); border-radius: var(--ds-menu-radius); background: var(--ds-menu-bg); color: var(--ds-menu-text); overflow-y: auto; overscroll-behavior: contain; }
.cs-msg__menu-card[hidden] { display: none; }
.cs-msg__menu-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%; min-block-size: var(--ds-menu-item-height); padding: 6px 12px;
  border-radius: var(--ds-menu-item-radius);
  background: transparent; border: 0 !important;
  cursor: pointer;
  font-size: 13px; line-height: 1.3; color: var(--ds-menu-text);
  text-align: start;
  box-shadow: none !important; outline: none !important;
}
/* O base.css so escurece item desabilitado :not(:hover), e pinta o hover de qualquer button.
   Sem esta guarda, passar o mouse num item cinza devolve o brilho e o fundo de item vivo. */
.cs-msg__menu-item:not([disabled]):hover,
.cs-msg__menu-item:focus-visible { background: var(--ds-menu-hover); }
.cs-msg__menu-item--danger { color: var(--destructive); }
.cs-msg__menu-divider { margin: var(--ds-menu-inset) var(--ds-space-3); height: 1px; background: var(--ds-menu-separator); }

.cs-msg__reaction-pill {
  display: flex; align-items: center; gap: 0;
  padding: 3px 4px;
  border-radius: 999px;
}
.cs-msg__reaction-pill[hidden] { display: none; }
.cs-msg__reaction-choice {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  padding: 0;
  font-family: var(--font-emoji);
  font-size: var(--ds-emoji-reaction-size); line-height: 1;
  background: transparent;
  border: 0 !important;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: none !important;
  transition: transform 0.12s ease, background 0.12s ease;
}
.cs-msg__reaction-choice:hover,
.cs-msg__reaction-choice:focus-visible {
  background: var(--ds-menu-hover);
  transform: scale(1.12);
}
.cs-msg__reaction-more {
  width: 28px; height: 28px;
  margin-inline: 2px;
  background: var(--ds-menu-hover);
}
.cs-msg__reaction-more:hover,
.cs-msg__reaction-more:focus-visible { color: var(--ds-menu-text); background: var(--ds-menu-separator); }
@media (max-width: 480px) {
  .cs-msg__reaction-choice { width: 36px; height: 36px; }
}

/* Hung under the bubble as WhatsApp does; the ring is the conversation's own background, not a border. */
.cs-msg__reactions {
  position: absolute;
  inset-block-end: 0;
  translate: 0 calc(100% - var(--reaction-overlap));
  display: flex;
  z-index: 1;
}
.cs-msg__reactions[hidden] { display: none; }
/* The room's block is drawn empty on every bubble, so the room under it follows a chip someone reacted with; a reply row already makes it. */
.cs-msg:not(:has(> .cs-msg__replies)):has(.cs-msg__reactions:not([hidden]) .cs-msg__reaction:not([hidden])) { padding-block-end: calc(var(--reaction-size) - var(--reaction-overlap)); }
.cs-msg__bubble:has(> .cs-msg__reactions:not([hidden])) > .cs-msg__meta { margin-block-end: 0; }
.cs-msg:not(.cs-msg--me) .cs-msg__reactions { inset-inline-start: var(--reaction-inset); }
.cs-msg--me .cs-msg__reactions { inset-inline-end: var(--reaction-inset); }
.cs-msg__reaction {
  --hover-size: 0;
  display: inline-flex; align-items: center; gap: 1px;
  block-size: var(--reaction-size);
  min-inline-size: var(--reaction-size);
  margin: 0; padding: 0 6px;
  font-family: var(--font-emoji);
  font-size: 13px; line-height: 1;
  color: var(--ds-menu-text);
  background: var(--ds-menu-hover);
  border: 2px solid var(--ds-bg);
  border-radius: 999px;
  box-shadow: none;
}
.cs-msg__reaction__emoji { line-height: 1; }
button.cs-msg__reaction { cursor: pointer; }
.cs-msg__reaction[hidden] { display: none; }
button.cs-msg__reaction:hover { background: var(--ds-menu-separator); }
button.cs-msg__reaction:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: 0; }
.cs-msg__reaction__count {
  margin-inline-start: 3px;
  font-family: var(--font-sistema);
  font-size: 11px; font-weight: 600;
  color: var(--ds-text-muted);
  font-variant-numeric: tabular-nums;
}
.cs-msg__reactions--group { position: static; translate: none; display: inline-flex; align-items: center; gap: 4px; }
.cs-msg__reaction--group { gap: 2px; cursor: pointer; }

/* Who reacted, as WhatsApp shows it: the count, one tab per emoji, and one row per person. */
.cs-reactions-panel {
  position: fixed; z-index: 60; top: 0; left: 0;
  display: flex; flex-direction: column;
  inline-size: min(296px, calc(100vw - 16px));
  max-block-size: min(400px, calc(100vh - 16px));
  overflow: hidden;
  background: var(--ds-menu-bg);
  color: var(--ds-menu-text);
  border: 1px solid var(--border);
  border-radius: var(--ds-radius-xl);
  font-size: var(--ds-font-size-compact);
  animation: fadeUp 0.12s ease both;
}
.cs-reactions-panel[hidden] { display: none; }
.cs-reactions-panel :where(button) { --hover-size: 0; }
.cs-reactions-panel__head { padding: var(--ds-space-2) var(--ds-space-2) var(--ds-space-2); border-block-end: 1px solid var(--ds-menu-separator); }
.cs-reactions-panel__title { margin: 0 var(--ds-space-1) 6px; color: var(--ds-text-muted); font-size: var(--ds-font-size-xs); font-weight: var(--ds-weight-semibold); }
.cs-reactions-panel__tabs { display: flex; flex-wrap: wrap; gap: var(--ds-space-1); }
.cs-reactions-panel__add,
.cs-reactions-panel__tab {
  display: inline-flex; align-items: center; gap: 4px;
  block-size: 30px; padding: 0 var(--ds-space-2);
  color: var(--ds-menu-text);
  background: transparent;
  border: 1px solid var(--ds-menu-separator);
  border-radius: var(--ds-radius-full);
  cursor: pointer;
  font-size: var(--ds-font-size-xs);
}
.cs-reactions-panel__add { inline-size: 30px; padding: 0; justify-content: center; color: var(--ds-text-secondary); }
.cs-reactions-panel__tab-emoji,
.cs-reactions-panel__emoji { font-family: var(--font-emoji); }
.cs-reactions-panel__tab-emoji { font-size: 16px; line-height: 1; }
.cs-reactions-panel__count { color: var(--ds-text-muted); font-variant-numeric: tabular-nums; }
.cs-reactions-panel__add:hover,
.cs-reactions-panel__tab:hover,
.cs-reactions-panel__tab.is-active { background: var(--ds-menu-hover); }
.cs-reactions-panel :is(.cs-reactions-panel__add, .cs-reactions-panel__tab, .cs-reactions-panel__person--ours):focus-visible {
  outline: 2px solid var(--ds-focus-ring);
  outline-offset: 0;
}
/* v5: a reaction, the emoji bar and the panel's tabs are pills, a solid fill with no outline; the bar is set apart
   from the bubbles (the panel's white or the account's tint) and the thread by the fill's own tone, not a border. */
html[data-visual="v5"] .cs-msg__reaction { border-color: transparent; background: var(--ds-fill); }
html[data-visual="v5"] button.cs-msg__reaction:hover { background: var(--ds-fill-hover); }
html[data-visual="v5"] .cs-msg__reaction__count { color: var(--ds-text-muted); }
html[data-visual="v5"] .cs-msg__reaction-pill { border-color: transparent; background: var(--ds-fill); }
html[data-visual="v5"] :is(.cs-reactions-panel__tab, .cs-reactions-panel__add) { border-color: transparent; background: var(--ds-fill); }
html[data-visual="v5"] :is(.cs-reactions-panel__tab, .cs-reactions-panel__add):hover { background: var(--ds-fill-hover); }
html[data-visual="v5"] .cs-reactions-panel__tab.is-active { background: var(--ds-cta-soft); color: var(--ds-on-cta-soft); }
/* v5: the panel is the reaction bar's own pill tone, so its chips and rows step one tone up from it. */
html[data-visual="v5"] :is(.cs-reactions-panel, .cs-msg__reaction-pill) { border-color: var(--ds-menu-border); background: var(--ds-menu-bg); color: var(--ds-menu-text); }
html[data-visual="v5"] .cs-reactions-panel :is(.cs-reactions-panel__tab, .cs-reactions-panel__add) { background: var(--ds-menu-hover); }
html[data-visual="v5"] .cs-reactions-panel :is(.cs-reactions-panel__tab, .cs-reactions-panel__add):hover,
html[data-visual="v5"] .cs-reactions-panel__person--ours:hover { background: var(--ds-pressed); }
html[data-visual="v5"] .cs-reactions-panel .cs-reactions-panel__tab.is-active { background: var(--ds-cta-soft); }
.cs-reactions-panel__list { margin: 0; padding: 4px 0; list-style: none; overflow-y: auto; overscroll-behavior: contain; }
.cs-reactions-panel__row[hidden] { display: none; }
.cs-reactions-panel__person {
  display: flex; align-items: center; gap: var(--ds-space-2);
  inline-size: 100%; padding: var(--ds-space-2) var(--ds-space-3);
  color: inherit; background: transparent; border: 0;
  text-align: start;
}
.cs-reactions-panel__person--ours { cursor: pointer; }
.cs-reactions-panel__person--ours:hover { background: var(--ds-menu-hover); }
.cs-reactions-panel__who { display: flex; flex-direction: column; gap: 0; flex: 1; min-inline-size: 0; line-height: 1.25; }
.cs-reactions-panel__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--ds-font-size-compact); }
.cs-reactions-panel__hint { color: var(--ds-text-muted); font-size: var(--ds-font-size-2xs); }
.cs-reactions-panel__hint--tap { display: none; }
@media (hover: none) and (pointer: coarse) {
  .cs-reactions-panel__hint--click { display: none; }
  .cs-reactions-panel__hint--tap { display: inline; }
}
.cs-reactions-panel__emoji { font-size: 20px; line-height: 1; }

.cs-msg__bubble--deleted {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px;
  color: var(--txt-muted); font-style: italic; font-size: 13px;
  padding: 6px 9px; border-radius: 7.5px;
  background: color-mix(in oklch, var(--bg-pure) 90%, transparent);
}

.cs-msg__menu-item--off,
.cs-msg__menu-item--off:hover { opacity: .45; cursor: not-allowed; filter: brightness(0.75); }
.cs-msg__menu-hint {
  padding: 2px 12px 8px; margin: 0;
  color: var(--txt-muted); font-size: 11.5px; line-height: 1.35;
}
.cs-msg__menu-hint[hidden] { display: none; }

.cs-msg-info-stack {
  display: flex; flex-direction: column; gap: 1px; min-width: 0;
}
.cs-msg-info-when {
  color: var(--txt-muted); font-size: 12px; line-height: 1.3;
}
.cs-msg-info-erased__text,
.cs-msg-info-previous {
  margin-block-start: 6px; line-height: 1.45;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.cs-msg-info-erased__text { color: var(--txt); font-size: 14px; }
.cs-msg-info-previous {
  padding-inline-start: 9px; border-inline-start: 2px solid var(--border);
  color: var(--txt-muted); font-size: 13.5px;
}
.cs-msg-info-erased__file {
  display: flex; align-items: center; gap: 6px;
  margin-block-start: 6px; color: var(--txt-muted); font-size: 13px;
}

/* Running text, so a long name wraps across the bubble's width; in a flex row it shrank to a column beside the link. */
.cs-msg__deleted-linha { display: inline; }
.cs-msg__deleted-linha > :is(svg, .avatar) { display: inline-block; vertical-align: -0.2em; margin-inline-end: 6px; }
.cs-msg__deleted-sumiu { font-style: normal; font-size: 11.5px; opacity: .8; padding-inline-start: 20px; }
.cs-msg__deleted-reveal {
  /* O anel de hover do base.css e pintado por box-shadow FORA da caixa, e num link sem fundo ele
     vira halo. A regra da casa manda zerar em tudo que nao e botao pequeno com padding. */
  --hover-size: 0;
  margin-inline-start: 6px; padding: 0;
  border: 0; background: transparent; color: var(--txt-muted);
  font-style: normal; font-size: 11.5px; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
  text-decoration-color: color-mix(in oklch, currentColor 40%, transparent);
  /* Quem cede espaco quando a coluna aperta e o nome, que quebra em linha inteira; o rotulo nunca. */
  white-space: nowrap; flex-shrink: 0;
}
.cs-msg__deleted-reveal:hover { color: var(--txt); text-decoration-color: currentColor; }

.cs-selection-bar {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 20;
}

/* v5: the pill sits where the composer's does, over the drawn paper. */
:where(html[data-visual="v5"]) .cs-selection-bar {
  inset-inline: var(--ds-composer-inset);
  inset-block-end: max(var(--ds-composer-inset), var(--safe-bottom, 0px));
}

.cs-selection-mode #conversation_composer > * { visibility: hidden; }

.cs-selection-mode .cs-msg__menu { display: none !important; }
.cs-selection-mode .cs-msg {
  --cs-pick-size: 1.125rem;
  --cs-pick-inset: 1rem;
  position: relative;
  padding-inline-start: calc(var(--cs-pick-inset) + var(--cs-pick-size) + var(--ds-space-2));
  cursor: pointer;
}

/* The ds-check box: the row's ::before, and its check a mask in --ds-on-cta on the ::after, so both follow the theme. */
.cs-selection-mode :is(.cs-msg, .cs-msg__album-item)::before,
.cs-selection-mode .cs-msg__album-item[data-album-item-id].is-selected::after,
.cs-selection-mode .cs-msg.is-selected::after {
  content: "";
  position: absolute;
  inset: 50% auto auto var(--cs-pick-inset);
  z-index: 1;
  display: block;
  box-sizing: border-box;
  inline-size: var(--cs-pick-size);
  block-size: var(--cs-pick-size);
  translate: 0 -50%;
  pointer-events: none;
}

.cs-selection-mode :is(.cs-msg, .cs-msg__album-item)::before {
  border: 1.5px solid var(--ds-text-muted);
  border-radius: var(--ds-radius-sm);
  background-color: var(--ds-bg-pure);
}

:where(html[data-visual="v5"]) .cs-selection-mode .cs-msg::before { border-color: var(--ds-border-strong); }

.cs-selection-mode :is(.cs-msg, .cs-msg__album-item).is-selected::before { border-color: transparent; background-color: var(--ds-cta); }

.cs-selection-mode .cs-msg__album-item[data-album-item-id].is-selected::after,
.cs-selection-mode .cs-msg.is-selected::after {
  z-index: 2;
  border-radius: 0;
  background: var(--ds-on-cta);
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'><polyline points='40 144 96 200 224 72' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='24'/></svg>") center / 0.75rem no-repeat;
}

.cs-selection-mode .cs-msg--album::before { visibility: hidden; }
.cs-selection-mode .cs-msg__album-item:nth-child(n + 5) { display: block; }
.cs-selection-mode .cs-msg__album-item:nth-child(4)[data-album-extra]:not(.is-selected)::after { content: none; }

/* Over a photo the box is the media badge, at its corner. */
.cs-selection-mode .cs-msg__album-item { --cs-pick-inset: 6px; }
.cs-selection-mode .cs-msg__album-item::before,
.cs-selection-mode .cs-msg__album-item[data-album-item-id].is-selected::after { inset-block-start: 6px; translate: none; }
.cs-selection-mode .cs-msg__album-item:not(.is-selected)::before { border-color: var(--ds-on-media); background-color: var(--ds-media-badge); }
.cs-selection-mode .cs-msg__album-item.is-selected > .cs-msg__media {
  outline: var(--ds-media-frame) solid var(--ds-cta);
  outline-offset: calc(-1 * var(--ds-media-frame));
}

.cs-selection-mode .cs-msg.is-selected {
  border-radius: var(--ds-radius-sm);
  background-color: color-mix(in oklch, var(--ds-cta) 10%, transparent);
}

/* v5, as WhatsApp: the whole line is tinted, out to the list's edges, without moving anything. */
:where(html[data-visual="v5"]) .cs-selection-mode .cs-msg.is-selected {
  border-radius: 0;
  background-color: transparent;
  border-image: conic-gradient(color-mix(in oklch, var(--ds-cta) 10%, transparent) 0 0) fill 0 / 0 / 1px 100vw;
}

[data-theme="dark"] .cs-msg--me .cs-msg__bubble,
:root:not([data-theme]) .cs-msg--me .cs-msg__bubble {
  background: oklch(0.34 0.08 131);
  --cs-bubble-bg: oklch(0.34 0.08 131);
}
[data-theme="dark"] .cs-msg.cs-msg--tail.cs-msg--me .cs-msg__bubble::before,
:root:not([data-theme]) .cs-msg.cs-msg--tail.cs-msg--me .cs-msg__bubble::before {
  border-top-color: oklch(0.34 0.08 131);
}
[data-theme="dark"] .cs-msg__meta,
[data-theme="dark"] .cs-msg__check,
:root:not([data-theme]) .cs-msg__meta,
:root:not([data-theme]) .cs-msg__check {
  color: oklch(0.7 0 0);
}
[data-theme="dark"] .cs-msg__check--read,
:root:not([data-theme]) .cs-msg__check--read {
  color: oklch(0.78 0.14 220);
}
[data-theme="dark"] .cs-msg.cs-msg--me .cs-msg__menu,
:root:not([data-theme]) .cs-msg.cs-msg--me .cs-msg__menu {
  background: radial-gradient(at 100% 0%, oklch(0.34 0.08 131) 60%, transparent 85%);
}
[data-theme="dark"] .cs-msg__menu-trigger,
:root:not([data-theme]) .cs-msg__menu-trigger {
  color: oklch(1 0 0 / 0.7);
}
[data-theme="dark"] .cs-msg__menu-trigger:hover,
:root:not([data-theme]) .cs-msg__menu-trigger:hover {
  color: oklch(1 0 0 / 0.95);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .cs-msg--me .cs-msg__bubble { background: #d9fdd3; --cs-bubble-bg: #d9fdd3; }
  :root:not([data-theme]) .cs-msg.cs-msg--tail.cs-msg--me .cs-msg__bubble::before { border-top-color: #d9fdd3; }
  :root:not([data-theme]) .cs-msg__meta,
  :root:not([data-theme]) .cs-msg__check { color: oklch(0.45 0 0); }
  :root:not([data-theme]) .cs-msg__check--read { color: oklch(0.62 0.13 220); }
  :root:not([data-theme]) .cs-msg.cs-msg--me .cs-msg__menu { background: radial-gradient(at 100% 0%, #d9fdd3 60%, transparent 85%); }
  :root:not([data-theme]) .cs-msg__menu-trigger { color: oklch(0 0 0 / 0.55); }
  :root:not([data-theme]) .cs-msg__menu-trigger:hover { color: oklch(0 0 0 / 0.85); }
}

[data-theme="light"] .cs-msg--me .cs-msg__bubble { background: #d9fdd3; --cs-bubble-bg: #d9fdd3; }
[data-theme="light"] .cs-msg.cs-msg--tail.cs-msg--me .cs-msg__bubble::before { border-top-color: #d9fdd3; }

@media (prefers-color-scheme: dark) {
  [data-theme="system"] .cs-msg--me .cs-msg__bubble { background: oklch(0.34 0.08 131); --cs-bubble-bg: oklch(0.34 0.08 131); }
  [data-theme="system"] .cs-msg__sender { color: oklch(0.82 0.09 165); }
  [data-theme="system"] .cs-msg.cs-msg--tail.cs-msg--me .cs-msg__bubble::before { border-top-color: oklch(0.34 0.08 131); }
  [data-theme="system"] .cs-msg__meta,
  [data-theme="system"] .cs-msg__check { color: oklch(0.7 0 0); }
  [data-theme="system"] .cs-msg__check--read { color: oklch(0.78 0.14 220); }
  [data-theme="system"] .cs-msg.cs-msg--me .cs-msg__menu { background: radial-gradient(at 100% 0%, oklch(0.34 0.08 131) 60%, transparent 85%); }
  [data-theme="system"] .cs-msg__menu-trigger { color: oklch(1 0 0 / 0.7); }
  [data-theme="system"] .cs-msg__menu-trigger:hover { color: oklch(1 0 0 / 0.95); }
}

/* v5: no shadow and no drawn tail (design-system-v5.md, "Bolhas"): the first of a run keeps a 4 px corner on its side. */
html[data-visual="v5"] .cs-msg .cs-msg__bubble { box-shadow: none; }
html[data-visual="v5"] .cs-msg.cs-msg--tail .cs-msg__bubble::before { content: none; }
html[data-visual="v5"] .cs-msg.cs-msg--tail:not(.cs-msg--me) .cs-msg__bubble { border-start-start-radius: 4px; }
html[data-visual="v5"] .cs-msg.cs-msg--tail.cs-msg--me .cs-msg__bubble { border-start-end-radius: 4px; }

/* v5: who wrote it is in the green of text (--ds-on-cta-soft), never the WhatsApp teal. */
html[data-visual="v5"] .cs-msg .cs-msg__sender { color: var(--ds-on-cta-soft); }

/* v5: the sent bubble is a step of the account's tint, not the button's fill; a note keeps its own. */
html[data-visual="v5"] .cs-msg.cs-msg--me:not(.cs-msg--note) .cs-msg__bubble { background: var(--ds-msg-me); --cs-bubble-bg: var(--ds-msg-me); color: var(--ds-msg-me-text); }
html[data-visual="v5"] .cs-msg.cs-msg--tail.cs-msg--me:not(.cs-msg--note) .cs-msg__bubble::before { border-top-color: var(--ds-msg-me); }
html[data-visual="v5"] .cs-msg.cs-msg--me:not(.cs-msg--note) .cs-msg__menu { background: radial-gradient(at 100% 0%, var(--ds-msg-me) 60%, transparent 85%); }
html[data-visual="v5"] .cs-msg.cs-msg--me:not(.cs-msg--note) :is(.cs-msg__meta, .cs-msg__check, .cs-msg__menu-trigger) { color: var(--ds-text-muted); }
html[data-visual="v5"] .cs-msg.cs-msg--me:not(.cs-msg--note) .cs-msg__menu-trigger:hover { color: var(--ds-msg-me-text); }
html[data-visual="v5"] .cs-msg.cs-msg--me:not(.cs-msg--note) .cs-msg__check.cs-msg__check--read { color: var(--ds-msg-me-read); }
html[data-visual="v5"] .cs-msg.cs-msg--me:not(.cs-msg--note) :is(.cs-msg__sender, .cs-msg__body a:not(.ds-mention)) { color: var(--ds-on-cta-soft); }
html[data-visual="v5"] .cs-msg.cs-msg--me:not(.cs-msg--note) .cs-msg__quote { --q-author: var(--ds-on-cta-soft); }

.cs-preview__draft {
  flex-shrink: 0;
  color: var(--accent);
}

.cs-preview__icon {
  flex-shrink: 0;
  color: var(--txt-muted);
}
.cs-preview__text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cs-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 1rem 1.25rem 0;
}
.cs-nav__center { justify-self: center; min-width: 0; }

.cs-settings {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  /* Fades the top edge, which the nav band's matching background would otherwise hide. */
  mask-image: linear-gradient(to bottom, transparent 0, black 18px);
}
/* v5: the topbar's own 1 px line is the one divider; the fade under it drew a second, softer edge. */
:where(html[data-visual="v5"]) .cs-settings { mask-image: none; }
.cs-settings__container {
  max-inline-size: 800px;
  margin-inline: auto;
  padding: 2rem 1.5rem 3rem;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}
.cs-settings__header {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.cs-settings__title-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.cs-settings__title {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--txt);
}
.cs-title-edit {
  --hover-size: 0;
  display: inline-grid;
  place-items: center;
  inline-size: 1.9rem;
  block-size: 1.9rem;
  flex-shrink: 0;
  border: 0;
  background: transparent;
  border-radius: 8px;
  color: var(--txt-muted);
  cursor: pointer;
  transition: background-color 0.12s, color 0.12s;
}
.cs-title-edit:hover { background-color: var(--bg-subtle); color: var(--txt); }
.cs-settings__subtitle {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--txt-muted);
}
.cs-settings__list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.cs-settings__list--flush { gap: 0; }
.cs-settings__list--compact {
  gap: 0.375rem;
}
/* A settings list is one sheet of rows (ds-list--divided): today a bordered card, in the v5 the pure paper on the
   drawn ground, without a border. A row's alert wraps under its details. */
.cs-settings__sheet {
  padding: 0.25rem;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--bg-pure);
}
.cs-settings__sheet .cs-picker-row { min-block-size: 3.5rem; padding-block: 0.5rem; }
.cs-settings__sheet .cs-picker-row__subtitle { white-space: normal; }
:where(html[data-visual="v5"]) .cs-settings__sheet {
  padding: var(--ds-space-1);
  border: 0;
  border-radius: var(--ds-radius-xl);
  background: var(--ds-bg-pure);
}
:where(html[data-visual="v5"]) .cs-settings__sheet .cs-picker-row { padding-inline: var(--ds-space-3); }
:where(html[data-visual="v5"]) .cs-settings__sheet .cs-picker-row__subtitle { font-size: var(--ds-font-size-compact); }

/* The quick reply form's options: one band, each option a row (lost when the tabs moved to ds_tabs.css). */
.cs-qr-options {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  overflow: hidden;
}
.cs-qr-option {
  --hover-size: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0.9rem;
  cursor: pointer;
}
.cs-qr-option + .cs-qr-option { border-block-start: 1px solid var(--border); }
.cs-qr-option:hover { background: var(--hover); }
.cs-qr-option__text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.cs-qr-option--off { opacity: 0.45; cursor: default; }
.cs-qr-option--off:hover { background: none; }
.cs-settings__container--wide { max-inline-size: 1160px; }
/* v5: the page's explanation opens the content, under the topbar that already holds the title. */
:where(html[data-visual="v5"]) .cs-shell .cs-settings__container { padding: var(--ds-space-6) var(--ds-space-6) 3rem; gap: var(--ds-space-6); }
:where(html[data-visual="v5"]) .cs-settings__lead { font-size: var(--ds-font-size-sm); color: var(--ds-text-muted); }
.cs-settings__container--browse { gap: 0.75rem; }
.cs-settings__container--browse > .cs-settings__header { margin-block-end: 0.5rem; }

html:not([data-visual="v5"]) .cs-sidebar-head .cs-search:focus-within {
  outline: 2px solid var(--ds-focus-ring);
  outline-offset: -1px;
  box-shadow: none;
}

turbo-frame#cs_sidebar_list { display: flex; flex-direction: column; min-height: 0; }

/* Room for the bar even when it is not drawn: hiding overflow for a frame to stop the inertia used
   to change the width, rewrap the text and drop a drag of the bar in progress. */
.cs-scrollable {
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in oklch, var(--txt) 22%, transparent) transparent;
}
.cs-scrollable::-webkit-scrollbar { inline-size: 8px; block-size: 8px; }
.cs-scrollable::-webkit-scrollbar-track { background: transparent; }
.cs-scrollable::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: color-mix(in oklch, var(--txt) 22%, transparent);
  border: 2px solid transparent;
  background-clip: content-box;
}
.cs-scrollable:hover { scrollbar-color: color-mix(in oklch, var(--txt) 38%, transparent) transparent; }
.cs-scrollable:hover::-webkit-scrollbar-thumb { background: color-mix(in oklch, var(--txt) 38%, transparent); background-clip: content-box; }
/* Chrome draws the standard bar, arrows and all, whenever scrollbar-width or -color is set, and then ignores the
   pseudo-elements above: where they exist, the standard pair steps back so the thin pill without arrows is the one drawn. */
@supports selector(::-webkit-scrollbar) {
  .cs-scrollable, .cs-scrollable:hover { scrollbar-width: auto; scrollbar-color: auto; }
  .cs-scrollable::-webkit-scrollbar-button { display: none; }
}

.cs-browse-results { display: block; transition: opacity 0.15s ease; }
.cs-browse-results[busy] { opacity: 0.5; pointer-events: none; }

.cs-canal-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  max-width: 11rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: var(--bg-subtle);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--txt-secondary);
}
.cs-canal-chip .cs-channel-icon { flex-shrink: 0; }

.cs-panel-input {
  --input-border-radius: 999px;
  --hover-size: 0;
  width: 100%;
}
textarea.cs-panel-input { --input-border-radius: 0.9rem; }
.cs-panel-input:focus,
.cs-panel-input:focus-visible {
  outline: 2px solid var(--ds-focus-ring);
  outline-offset: -1px;
}
.cs-panel-input--sm { --input-padding: 0.4em 0.8em; }

.cs-group-add { position: relative; }
.cs-group-add > summary { --hover-size: 0; list-style: none; cursor: pointer; }
.cs-group-add > summary::-webkit-details-marker { display: none; }
.cs-group-add__body {
  position: absolute;
  inset-block-start: calc(100% + 6px);
  inset-inline-end: 0;
  z-index: 20;
  inline-size: min(28rem, 78vw);
  padding: 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--bg-pure);
  box-shadow: 0 8px 24px oklch(0 0 0 / 0.18);
}
.cs-group-add__body .cs-settings__subtitle { font-size: 12px; }

.cs-group-candidate {
  --hover-size: 0;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.375rem 0.5rem;
  border: 0;
  background: transparent;
  border-radius: 0.5rem;
  cursor: pointer;
  text-align: left;
  color: var(--txt);
}
.cs-group-candidate:hover {
  background: var(--hover);
}
.cs-group-candidate__avatar {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bg-subtle);
  color: var(--txt-muted);
}
.cs-group-candidate__avatar--wa {
  background: color-mix(in oklab, var(--color-positive) 16%, transparent);
  color: var(--color-positive);
}
.cs-group-candidate__avatar--off { opacity: 0.7; }
.cs-group-candidate--off { cursor: default; }
.cs-group-candidate--off:hover { background: transparent; }
.cs-wa-ok { color: var(--color-positive); }

.cs-activity-feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cs-activity-feed__item {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.6rem 0;
  border-block-end: 1px solid var(--border);
}
.cs-activity-feed__item:last-child { border-block-end: 0; }
.cs-activity-feed__node {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bg-subtle);
  color: var(--txt-muted);
}
.cs-activity-feed__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.cs-activity-feed__text { font-size: 0.875rem; color: var(--txt); }
.cs-activity-feed__when { font-size: 0.75rem; color: var(--txt-muted); }
.cs-draft-kept {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.25rem;
  font-size: 0.8125rem;
  color: var(--txt-muted);
}

.cs-draft-kept .cs-preview__text {
  flex: 1;
  min-width: 0;
  color: var(--accent);
}

.cs-draft-kept__discard {
  --hover-size: 0;
  --hover-filter: brightness(0.7);
  --btn-padding: 0.25rem 0.6rem;
  flex-shrink: 0;
}

/* v5: the kept reply is quoted in the soft green ink, the account green read as text. */
:where(html[data-visual="v5"]) .cs-draft-kept { padding-inline: var(--ds-space-1); color: var(--ds-text-muted); font-size: var(--ds-font-size-xs); }
:where(html[data-visual="v5"]) .cs-draft-kept .cs-preview__text { color: var(--ds-on-cta-soft); }

.cs-group-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  margin: 0;
  padding: 0.6rem 0.75rem;
  border-radius: 0.625rem;
  background: var(--bg-subtle);
  color: var(--txt-secondary);
  font-size: 0.8125rem;
  line-height: 1.4;
}
.cs-group-notice svg { flex-shrink: 0; margin-top: 0.1rem; }

#module_pane[aria-busy="true"] .cs-chat-pane { pointer-events: none; }
#module_pane[aria-busy="true"] .cs-chat-pane::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 40;
  background: color-mix(in oklch, var(--color-bg) 55%, transparent);
}
#module_pane[aria-busy="true"] .cs-chat-pane::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 41;
  margin: auto;
  inline-size: 28px;
  block-size: 28px;
  border-radius: 50%;
  border: 3px solid var(--color-border);
  border-block-start-color: var(--accent);
}
@media (prefers-reduced-motion: no-preference) {
  #module_pane[aria-busy="true"] .cs-chat-pane::before { animation: cs-spin 0.7s linear infinite; }
}

#cs_group_candidates[aria-busy="true"] {
  opacity: 0.5;
  transition: opacity 0.12s;
}

.cs-group-avatar {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bg-subtle);
  color: var(--txt-muted);
  overflow: hidden;
}
.cs-group-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cs-note-card {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  border-radius: 0.75rem;
  background: transparent;
  text-decoration: none;
  color: inherit;
  transition: background-color 0.15s ease;
}
.cs-note-card:hover {
  background: var(--hover);
}
[data-theme="light"] .cs-note-card,
[data-theme="system"] .cs-note-card { --cs-note-accent: oklch(0.52 0.16 288); }
[data-theme="dark"] .cs-note-card { --cs-note-accent: oklch(0.8 0.1 288); }
@media (prefers-color-scheme: dark) {
  [data-theme="system"] .cs-note-card { --cs-note-accent: oklch(0.8 0.1 288); }
}
.cs-note-card__avatar {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  margin-top: 0.125rem;
  border-radius: 50%;
  overflow: hidden;
  display: block;
}
.cs-note-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cs-note-card__content {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.cs-note-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.cs-note-card__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--cs-note-accent);
}
.cs-note-card__tag svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
}
.cs-note-card__meta {
  font-size: 0.75rem;
  color: var(--txt-muted);
  min-width: 0;
}
.cs-note-card__author {
  font-weight: 500;
  color: var(--txt);
}
.cs-note-card__body {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--txt);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.cs-note-card__episode {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  align-self: flex-start;
  max-width: 100%;
  margin-top: 0.125rem;
  padding: 0.1875rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--txt);
  background: transparent;
  border: 1px solid var(--border-strong);
}
.cs-note-card__episode svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
}
.cs-note-card__episode--none {
  color: var(--txt-muted);
  background: var(--bg-subtle);
  border-color: transparent;
  font-weight: 500;
}
.cs-note-card--person:hover { background: transparent; }
.cs-note-card--person .cs-note-card__actions { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-block-start: 0.125rem; }
.cs-note-card--person .cs-note-card__actions form { display: contents; }
.cs-note-card--person .cs-note-card__actions :where(a, button) { --hover-size: 0; }
.cs-note-card--person .cs-note-card__actions :where(a, button):hover { background: var(--hover); }
.cs-person-note-form { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 0.5rem; margin-block-end: 0.75rem; }
.cs-person-note-form textarea { resize: vertical; }
.cs-person-note-form textarea:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: -1px; }
@media (max-width: 640px) {
  .cs-person-note-form { grid-template-columns: 1fr; }
  .cs-person-note-form [type=submit] { justify-self: end; }
}

.cs-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.75rem;
}
.cs-pager__total {
  font-size: 0.8125rem;
  color: var(--txt-muted);
}
.cs-pager__pages {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.cs-pager__page,
.cs-pager__gap {
  display: grid;
  place-items: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.5rem;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--txt-muted);
  text-decoration: none;
}
.cs-pager__page:hover {
  background: var(--hover);
  color: var(--txt);
}
.cs-pager__page--current {
  background: var(--accent);
  color: var(--accent-foreground);
}
.cs-pager__gap {
  min-width: auto;
  cursor: default;
}

.cs-btn {
  --hover-size: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid transparent;
  border-radius: 10px;
  min-width: 0;
  min-height: 2rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  overflow-wrap: break-word;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.cs-btn:focus-visible {
  outline: 2px solid var(--ds-focus-ring);
  outline-offset: 0;
}
.cs-btn--block {
  inline-size: 100%;
  padding-block: 0.75rem;
}

.cs-btn--primary {
  background-color: var(--accent);
  color: var(--accent-foreground);
}
.cs-btn--primary:hover {
  background-color: var(--accent-strong);
}
/* v5: the account's button color, with white or black by its luminance (rule 5 of the DS). */
html[data-visual="v5"] .cs-btn--primary { background-color: var(--ds-cta); color: var(--ds-on-cta); }
html[data-visual="v5"] .cs-btn--primary:hover { background-color: var(--ds-cta-hover); }

.cs-btn--ghost {
  background-color: transparent;
  color: var(--txt);
  border-color: var(--border-strong);
}
.cs-btn--ghost:hover {
  background-color: var(--hover);
}

.cs-btn--danger {
  background-color: transparent;
  color: var(--color-negative);
  border-color: color-mix(in oklch, var(--color-negative) 32%, transparent);
}
.cs-btn--danger:hover {
  background-color: color-mix(in oklch, var(--color-negative) 12%, transparent);
}

.cs-btn--disabled,
.cs-btn[aria-disabled="true"],
.cs-btn:disabled {
  background-color: var(--hover);
  color: var(--txt-muted);
  border-color: transparent;
  cursor: not-allowed;
  pointer-events: none;
}

.cs-btn--small {
  min-height: 1.5rem;
  padding: 0.3rem 0.6rem;
  font-size: 0.75rem;
  border-radius: 8px;
}

/* This height is the one the search capsule below already declares: the two are stacked and were
   coming out different. */
.cs-btn--pill {
  min-height: 42px;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  gap: 0.35rem;
}

/* On the status scale with the chip: 24 px, 13 px medium, the 7 px dot 5 px from the word; the small one 20 px and 12 px. */
.cs-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  block-size: var(--ds-status-height);
  padding: 0 10px;
  border-radius: var(--ds-radius-full);
  font-size: var(--ds-status-font);
  font-weight: var(--ds-weight-medium);
  line-height: 1;
  white-space: nowrap;
}
.cs-status-badge::before {
  content: "";
  inline-size: 7px;
  block-size: 7px;
  border-radius: 50%;
  background-color: currentColor;
  flex-shrink: 0;
}
.cs-status-badge--connected {
  background-color: var(--accent-soft);
  color: var(--accent-strong);
}
.cs-status-badge--disconnected {
  background-color: color-mix(in oklch, var(--color-negative) 12%, transparent);
  color: var(--color-negative);
}
/* v5: on a pill's quiet fill the app's red reads 4.45:1; the v5 red keeps AA. */
html[data-visual="v5"] .cs-status-badge--disconnected { color: var(--ds-negative); }
.cs-status-badge--pending {
  background-color: var(--hover);
  color: var(--txt-secondary);
}
.cs-status-badge--coex {
  background: transparent;
  color: var(--txt-secondary);
  border: 1px solid var(--color-border-dark);
}
.cs-status-badge--coex::before { display: none; }
.cs-status-badge--coex svg { flex-shrink: 0; }
.cs-status-badge--production_copy {
  background-color: color-mix(in oklch, var(--color-alert) 14%, transparent);
  color: var(--color-alert);
}
.cs-status-badge--muted {
  background-color: var(--hover);
  color: var(--txt-muted);
}

.cs-status-badge--sm {
  gap: 4px;
  block-size: var(--ds-status-height-sm);
  padding: 0 8px;
  font-size: var(--ds-status-font-sm);
}
.cs-status-badge--sm::before { inline-size: 6px; block-size: 6px; }
.cs-status-badge--muted::before { display: none; }

.cs-conn-cards {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.cs-conn-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.cs-conn-card {
  background-color: var(--bg-pure);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: 0 1px 2px oklch(0 0 0 / 0.04);
  overflow: hidden;
}
.cs-conn-card__head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 1.2rem 0.3rem;
}
.cs-conn-card__logo {
  display: inline-grid;
  place-items: center;
  inline-size: 1.8rem;
  block-size: 1.8rem;
  flex-shrink: 0;
  border-radius: 9px;
  background-color: var(--accent-soft);
  color: var(--accent-strong);
}
.cs-conn-card__kind {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--txt-muted);
}
.cs-conn-card__block {
  padding: 0.9rem 1.2rem;
}
.cs-conn-card__block--flush {
  padding-block-start: 0.6rem;
}
.cs-conn-card__app {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.cs-conn-card__app-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--txt);
}
.cs-conn-card__app-meta {
  margin: 0.5rem 0 0;
  font-size: 0.7rem;
  line-height: 1.5;
  color: var(--txt-muted);
}
.cs-conn-card__divider {
  block-size: 1px;
  margin-inline: 1.2rem;
  background-color: var(--color-border);
}
.cs-conn-card__label {
  margin: 0 0 0.6rem;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--txt-muted);
}
.cs-conn-card__number-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.cs-conn-card__number {
  min-width: 0;
  font-size: 1.35rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--txt);
  overflow-wrap: anywhere;
}
.cs-conn-card__status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35rem;
  flex-shrink: 0;
}
.cs-conn-card__ids {
  display: grid;
  gap: 0.1rem;
  margin: 0.75rem 0 0;
}
.cs-conn-card__id-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  padding-block: 0.3rem;
}
.cs-conn-card__id-row dt {
  font-size: 0.7rem;
  color: var(--txt-muted);
}
.cs-conn-card__id-row dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
  color: var(--txt);
  overflow-wrap: anywhere;
}
.cs-conn-card__token-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-block-start: 0.85rem;
}
.cs-conn-card__token-label {
  font-size: 0.7rem;
  color: var(--txt-muted);
}
.cs-conn-card__token-mask {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 2px;
  color: var(--txt-muted);
  opacity: 0.7;
}
.cs-conn-card .cs-option-row { border-block-start: 0; padding-block: 0; margin-block-start: 0.5rem; }
.cs-conn-card .cs-option-row__summary { padding-inline: 0; }
.cs-conn-card .cs-option-row__body { padding-inline: 0; }

@media (max-width: 640px) {
  .cs-conn-card__number-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  .cs-conn-card__status {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
  .cs-conn-card__number {
    font-size: 1.15rem;
  }
}

.cs-channel-card__avatar {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.cs-channel-card__avatar-icon {
  display: inline-grid;
  place-items: center;
  inline-size: 34px;
  block-size: 34px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--color-border);
}
.cs-channel-card__avatar-icon:not(:first-child) { margin-inline-start: -10px; }
.cs-channel-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.cs-channel-card__actions .cs-btn--danger:last-child {
  margin-inline-start: auto;
}

.cs-field-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
}
.cs-field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.875rem;
}
.cs-field-row dt {
  margin: 0;
  color: var(--txt-muted);
}
.cs-field-row dd {
  margin: 0;
  text-align: end;
  color: var(--txt);
}
.cs-field-row dd.is-negative {
  color: var(--color-negative);
}

.cs-chanpicker {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.cs-chanpicker__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 640px) {
  .cs-chanpicker__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.cs-chanpicker-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.25rem 1.5rem;
  background-color: var(--surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
}
.cs-chanpicker-card__logo {
  display: inline-grid;
  place-items: center;
  inline-size: 36px;
  block-size: 36px;
}
.cs-chanpicker-card__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--txt);
}
.cs-chanpicker-card__desc {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--txt-muted);
}
.cs-chanpicker-card__note {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--txt-muted);
}
.cs-chanpicker-card__note--warning {
  color: var(--color-negative);
}
.cs-chanpicker-card__cta {
  margin-block-start: auto;
  padding-block-start: 0.25rem;
}
.cs-chanpicker-card[data-unavailable="true"] {
  opacity: 0.65;
}

.cs-panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background-color: var(--bg-pure);
  border: 1px solid var(--color-border);
  border-radius: 14px;
}
.cs-panel--center {
  align-items: center;
  text-align: center;
}
.cs-panel__title {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--txt-muted);
}

.cs-qr {
  display: block;
  inline-size: 16rem;
  block-size: 16rem;
  padding: 0.75rem;
  background-color: #ffffff;
  border-radius: 12px;
}

.cs-table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.cs-table th {
  padding: 0.4rem 0.5rem;
  text-align: start;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--txt-muted);
  border-block-end: 1px solid var(--color-border);
}
.cs-table td {
  padding: 0.5rem;
  color: var(--txt);
  border-block-end: 1px solid var(--color-border);
}
.cs-table td.is-negative {
  color: var(--color-negative);
}

.cs-wizard-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.cs-form-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.cs-form-field__label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--txt-secondary);
}
.cs-form-field__hint {
  margin: 0;
  font-size: 0.7rem;
  line-height: 1.4;
  color: var(--txt-muted);
}

.cs-code {
  font-family: var(--font-mono);
  font-size: 0.82em;
  padding: 0.12em 0.4em;
  border-radius: 5px;
  background-color: var(--hover);
  color: var(--txt-secondary);
  overflow-wrap: break-word;
}

.cs-form-field--error .input {
  border-color: var(--color-negative);
}
.cs-form-field__error {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--color-negative);
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
}
.cs-form-field__error svg {
  flex-shrink: 0;
  margin-block-start: 0.1rem;
}
/* v5: the field's error in the compact step and the design system's negative. */
:where(html[data-visual="v5"]) .cs-form-field__error { font-size: var(--ds-font-size-compact); color: var(--ds-negative); }

.cs-copy-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.cs-copy-row__code {
  flex: 1;
  min-inline-size: 0;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background-color: var(--surface);
  font-size: 0.78rem;
  color: var(--txt-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cs-instructions {
  margin: 0;
  padding-inline-start: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--txt-secondary);
}
.cs-instructions li::marker {
  color: var(--txt-muted);
  font-weight: 600;
}

.cs-chanpicker-card--compact {
  gap: 0.5rem;
  padding: 1rem 1.1rem;
}
.cs-chanpicker-card--compact .cs-chanpicker-card__logo {
  inline-size: 28px;
  block-size: 28px;
}
.cs-chanpicker-card--compact .cs-chanpicker-card__title { font-size: 0.95rem; }
.cs-chanpicker-card--compact .cs-chanpicker-card__desc { font-size: 0.83rem; line-height: 1.45; }
.cs-chanpicker-card--compact .cs-chanpicker-card__note { font-size: 0.75rem; }
.cs-chanpicker-card--compact .cs-chanpicker-card__cta .cs-btn { padding-block: 0.5rem; }

.cs-webhook-verify {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
}
.cs-modal {
  position: fixed;
  inset: 0;
  margin: auto;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 0.9rem;
  background: var(--bg-pure);
  color: var(--txt);
  box-shadow: 0 24px 48px oklch(0 0 0 / 0.28);
  inline-size: min(400px, 92vw);
  block-size: fit-content;
}
/* O anel de foco do proprio dialog nao informa nada: a modal acabou de abrir e o foco ja esta preso
   nela. Ele aparecia porque o corpo chega por fetch, entao no showModal() nao ha nada dentro para
   receber o foco e o dialog fica com ele, e o Chrome pinta o anel "auto", grosso e bicolor. */
.cs-modal:focus,
.cs-modal:focus-visible { outline: none; }

.cs-modal--wide { inline-size: min(560px, 94vw); max-block-size: min(88dvh, 780px); overflow: hidden; }
.cs-modal--wide .cs-modal__panel { overflow-y: auto; }
.cs-modal::backdrop { background: oklch(0 0 0 / 0.42); }
@media (prefers-reduced-motion: no-preference) {
  .cs-modal[open] { animation: cs-modal-in 0.16s ease-out; }
}
@keyframes cs-modal-in {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

.cs-modal__panel { position: relative; padding: 28px 24px 22px; text-align: center; }

.cs-modal__choices {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-block-start: 18px;
  text-align: start;
}

.cs-modal__choice {
  --hover-size: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 0.7rem;
  color: var(--txt);
  text-decoration: none;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}

.cs-modal__choice:hover { background: var(--hover); border-color: var(--accent); }

.cs-modal__choice-icon {
  display: grid;
  place-items: center;
  inline-size: 38px;
  block-size: 38px;
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.cs-modal__choice-body { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.cs-modal__choice-title { font-size: 14px; font-weight: 600; }
.cs-modal__choice-hint { font-size: 12px; line-height: 1.4; color: var(--txt-muted); }

.cs-number-avatar__fallback {
  display: grid;
  place-items: center;
  inline-size: 100%;
  block-size: 100%;
  border-radius: 999px;
  background: color-mix(in oklch, var(--color-positive) 16%, transparent);
  color: var(--color-positive);
}

.cs-modal__search { margin-block-start: 16px; }

.cs-modal__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-block-start: 12px;
  max-block-size: 46dvh;
  overflow-y: auto;
  text-align: start;
}

.cs-modal__preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-block: 18px 14px;
}

.cs-modal__preview-name { font-size: 15px; font-weight: 600; color: var(--txt); }

.cs-modal__preview-adding {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 13px;
  font-weight: 600;
}

.cs-contact-merge__warning {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0.45rem;
  margin: 0 auto;
  max-inline-size: 40ch;
  text-align: center;
}
.cs-contact-merge__warning svg { flex: 0 0 auto; margin-block-start: 0.1rem; }
.cs-contact-merge__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.cs-new-chat {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  background: var(--sidebar-bg, var(--bg-pure));
  transform: translateX(-100%);
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.cs-new-chat--open { transform: translateX(0); }

.cs-new-list__body { flex: 1; overflow-y: auto; padding: 1rem 0.9rem 1.2rem; }
.cs-new-list__form { display: flex; flex-direction: column; gap: 1.4rem; }
.cs-new-list__add { align-self: flex-start; }
.cs-new-list__name { font-size: 0.95rem; padding-block: 0.6rem; }

.cs-new-list__picked { display: flex; flex-direction: column; gap: 0.4rem; }
.cs-new-list__picked:empty { display: none; }
.cs-new-list__pick {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.85rem;
  color: var(--txt);
}
.cs-new-list__pick .avatar { flex-shrink: 0; }
.cs-new-list__pick > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The members modal of Nova lista is the form modal (ds_modal.css), with the picker as its body. */
@media (prefers-reduced-motion: reduce) {
  .cs-new-chat { transition: none; }
}
.cs-new-chat__search { padding: 0.75rem; flex-shrink: 0; }
.cs-new-chat .input,
.cs-contact-panel__sheet .input { font-size: 14px; }
.cs-new-chat .input::placeholder,
.cs-contact-panel__sheet .input::placeholder { font-size: 14px; }

.cs-new-chat__body { flex: 1; overflow-y: auto; padding: 0 0.5rem 0.75rem; }
.cs-new-chat__label {
  margin: 0.25rem 0 0.35rem;
  padding-inline: 0.5rem;
  font-size: 0.75rem;
  color: var(--txt-muted);
}
.cs-candidate-row { display: flex; align-items: center; gap: 0.25rem; border-radius: 0.5rem; }
.cs-candidate-row:hover { background: var(--hover); }
.cs-candidate-row .cs-group-candidate:hover { background: transparent; }

#cs_new_chat_results[aria-busy="true"] { opacity: 0.5; transition: opacity 0.12s ease; pointer-events: none; }

.cs-icon-btn {
  --hover-size: 0;
  display: grid; place-items: center;
  inline-size: 30px; block-size: 30px;
  padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--txt-secondary);
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.cs-icon-btn:hover { background: var(--hover); color: var(--txt); }

.cs-modal__close {
  --hover-size: 0;
  position: absolute; inset-block-start: 0.6rem; inset-inline-end: 0.6rem;
  inline-size: 30px; block-size: 30px;
  display: grid; place-items: center;
  background: transparent; border: 0; border-radius: 50%;
  color: var(--txt-muted); cursor: pointer;
}
.cs-modal__close:hover { background: var(--color-bg); color: var(--txt); }

.cs-modal__icon {
  inline-size: 52px; block-size: 52px;
  margin: 0 auto 14px;
  display: grid; place-items: center;
  border-radius: 50%;
}
.cs-modal__icon--success { background: color-mix(in oklch, var(--accent) 14%, transparent); color: var(--accent); }
.cs-modal__icon--error   { background: color-mix(in oklch, var(--color-negative) 12%, transparent); color: var(--color-negative); }

.cs-modal__title { margin: 0 0 8px; font-size: 16px; font-weight: 600; color: var(--txt); }
.cs-modal__text  { margin: 0 auto; max-inline-size: 40ch; font-size: 13.5px; line-height: 1.5; color: var(--txt-muted); }
.cs-modal__hint  { margin: 10px auto 0; max-inline-size: 40ch; font-size: 12.5px; line-height: 1.45; color: var(--txt-muted); }

.cs-modal__loader {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 26px 0 10px;
  font-size: 13.5px; color: var(--txt-muted);
}
.cs-modal__loader-spinner {
  inline-size: 30px; block-size: 30px;
  border-radius: 50%;
  border: 3px solid var(--color-border);
  border-block-start-color: var(--accent);
}
@media (prefers-reduced-motion: no-preference) {
  .cs-modal__loader-spinner { animation: cs-spin 0.7s linear infinite; }
}

.cs-modal__registered {
  margin-block-start: 16px;
  display: flex; flex-direction: column; gap: 10px;
  text-align: start;
}
.cs-modal__registered-title {
  margin: 0;
  font-size: 12.5px; font-weight: 600;
  color: var(--txt);
}

.cs-modal__verify { margin-block-start: 16px; display: flex; justify-content: center; }
.cs-modal__status {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 7px 12px; border-radius: 999px;
  font-size: 12.5px; font-weight: 500;
}
.cs-modal__status--waiting  { background: var(--color-bg); color: var(--txt-muted); }
.cs-modal__status--verified { background: color-mix(in oklch, var(--accent) 12%, transparent); color: var(--accent); }

.cs-modal__actions { margin-block-start: 22px; }
.cs-modal__btn,
.cs-modal__btn:hover,
.cs-modal__btn:focus,
.cs-modal__btn:focus-visible {
  border: 0 !important; box-shadow: none !important; outline: none !important;
}
.cs-modal__btn {
  inline-size: 100%;
  padding: 10px 16px;
  border-radius: 9px;
  font-size: 13.5px; font-weight: 500;
  cursor: pointer;
  transition: background 0.12s;
}
.cs-modal__btn--primary {
  background: color-mix(in oklch, var(--accent) 14%, transparent);
  color: var(--accent);
}
.cs-modal__btn--primary:hover { background: color-mix(in oklch, var(--accent) 22%, transparent); }

.cs-settings .input,
.cs-panel .input {
  --hover-size: 0;
  --input-border-color: var(--color-border);
}
.cs-settings .input:focus,
.cs-panel .input:focus {
  outline: 2px solid var(--ds-focus-ring);
  outline-offset: -1px;
  box-shadow: none;
}

.cs-choice {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: stretch;
  margin: 0;
  padding: 0;
  border: 0;
  min-inline-size: 0;
}
@media (min-width: 640px) {
  .cs-choice { grid-template-columns: repeat(2, 1fr); }
}

.cs-choice-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1.5rem;
  background-color: var(--surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.cs-choice-card:hover {
  border-color: var(--border-strong);
  box-shadow: 0 1px 3px oklch(0 0 0 / 0.05);
  transform: translateY(-1px);
}
.cs-choice-card:has(.cs-choice-card__input:checked) {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
  transform: none;
}
.cs-choice-card:has(.cs-choice-card__input:focus-visible) {
  outline: 2px solid var(--ds-focus-ring);
  outline-offset: 0;
}

.cs-choice-card__input {
  position: absolute;
  inset-block-start: 0.75rem;
  inset-inline-end: 0.75rem;
  inline-size: 1px;
  block-size: 1px;
  margin: 0;
  opacity: 0;
}

.cs-choice-card__main {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  cursor: pointer;
}
.cs-choice-card__head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.cs-choice-card__logo {
  display: inline-grid;
  place-items: center;
  inline-size: 28px;
  block-size: 28px;
  color: var(--txt-secondary);
}
.cs-choice-card__tag {
  margin-inline-start: auto;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background-color: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.4;
}
.cs-choice-card__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--txt);
}
.cs-choice-card__essence {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--txt-muted);
}
.cs-choice-card__facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.cs-choice-card__fact {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--txt-secondary);
}
.cs-choice-card__fact svg {
  flex-shrink: 0;
  margin-block-start: 0.1rem;
  color: var(--accent-strong);
}

.cs-signup-details {
  display: flex;
  flex-direction: column;
}
.cs-signup-detail {
  max-block-size: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: max-block-size 0.22s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.15s ease,
              visibility 0.22s;
}
.cs-signup-detail__inner {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background-color: var(--bg-pure);
  border: 1px solid var(--color-border);
  border-radius: 14px;
}
.cs-choice:has(.cs-choice-card__input[value="new"]:checked) ~ .cs-signup-details .cs-signup-detail--new,
.cs-choice:has(.cs-choice-card__input[value="coexistence"]:checked) ~ .cs-signup-details .cs-signup-detail--coexistence {
  max-block-size: 700px;
  opacity: 1;
  visibility: visible;
}

.cs-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.cs-checklist__item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--txt-secondary);
}
.cs-checklist__item svg {
  flex-shrink: 0;
  margin-block-start: 0.1rem;
  color: var(--accent-strong);
}

.cs-signup-note {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding-inline-start: 0.85rem;
  border-inline-start: 2px solid var(--border-strong);
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--txt-secondary);
}
.cs-signup-note__icon {
  flex-shrink: 0;
  margin-block-start: 0.15rem;
  color: var(--txt-muted);
}
.cs-option-row {
  border-block-start: 1px solid var(--color-border);
  padding-block: 0.4rem;
}
.cs-option-row__summary {
  --hover-size: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.25rem;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--txt-secondary);
  cursor: pointer;
  list-style: none;
  transition: background-color 0.15s ease;
}
.cs-option-row__summary:hover {
  background-color: var(--hover);
}
.cs-option-row__summary::-webkit-details-marker { display: none; }
.cs-option-row__summary:focus-visible {
  outline: 2px solid var(--ds-focus-ring);
  outline-offset: 0;
  border-radius: 6px;
}
.cs-option-row__caret {
  flex-shrink: 0;
  color: var(--txt-muted);
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
.cs-option-row[open] .cs-option-row__caret { transform: rotate(90deg); }
.cs-option-row__body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.25rem 0.25rem 0.6rem;
}
.cs-option-row__body p {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--txt-muted);
}
.cs-option-row__body .cs-btn { align-self: flex-start; }

.cs-signup-status { margin: 0; }
.cs-signup-status:empty { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .cs-choice-card { animation: fadeUp 0.2s ease both; }
  .cs-choice-card:nth-child(2) { animation-delay: 60ms; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-choice-card,
  .cs-signup-detail,
  .cs-option-row__caret {
    transition: none;
    animation: none;
  }
}

.cs-settings__container:has(.cs-tmpl-builder) { max-width: 1160px; }
.cs-settings__container:has(.cs-tmpl-toolbar) { max-width: 1080px; }

.cs-tmpl-builder {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  gap: 1.5rem;
  align-items: start;
}

.cs-tmpl-editor {
  background: var(--bg-pure);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
}
.cs-tmpl-editor:focus-within {
  outline: 2px solid var(--ds-focus-ring);
  outline-offset: -1px;
}

.cs-tmpl-editor__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  padding: 4px 6px;
  border-bottom: 1px solid var(--color-border);
}
.cs-tmpl-editor__toolbar .cs-btn { white-space: nowrap; }
.cs-tmpl-editor__toolbar-spacer { flex: 1; }

.cs-tmpl-editor__textarea {
  --hover-size: 0;
  display: block;
  width: 100%;
  border: 0;
  outline: none;
  background: transparent;
  resize: vertical;
  padding: 0.6rem 0.75rem 0.25rem;
  font-size: 0.85rem;
  font-family: var(--font-sans);
  color: var(--txt);
  min-height: 8rem;
}

.cs-tmpl-builder .input { --input-border-radius: 10px; }

.cs-tmpl-builder > * { min-width: 0; }

.cs-tmpl-editor__count {
  padding: 0 0.6rem 0.4rem;
  text-align: right;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--txt-muted);
}
.cs-tmpl-editor > .cs-tmpl-editor__count { padding-inline-end: 1.4rem; }
.cs-tmpl-editor__count[data-state="warn"] { color: var(--txt); font-weight: 600; }
.cs-tmpl-editor__count[data-state="over"] { color: var(--color-negative); font-weight: 600; }

.cs-form-field > .cs-tmpl-editor__count { padding: 0.15rem 0 0; }

.cs-tmpl-builder__slug { font-family: var(--font-mono); font-size: 0.78em; color: var(--txt-muted); }

.cs-tmpl-examples { display: flex; flex-direction: column; gap: 0.5rem; }
.cs-tmpl-example { display: flex; align-items: center; gap: 0.5rem; }
.cs-tmpl-example .cs-tpl-var { flex-shrink: 0; }

.cs-tpl-var {
  font-family: var(--font-mono);
  font-size: 0.82em;
  padding: 0.1em 0.4em;
  border-radius: 5px;
  background: color-mix(in oklch, var(--accent) 14%, transparent);
  color: inherit;
}
mark.cs-tpl-var { background: color-mix(in oklch, var(--accent) 22%, transparent); }
.cs-tpl-var--empty { background: var(--hover); border: 1px dashed var(--color-border); }

.cs-tmpl-preview { position: sticky; top: 1rem; }
.cs-tmpl-preview__chat {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 1.75rem 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-height: 10rem;
  justify-content: center;
}
.cs-tmpl-preview__empty { align-self: center; font-size: 0.8rem; color: var(--txt-muted); }
.cs-tmpl-preview .cs-msg__bubble { max-inline-size: 100%; min-inline-size: 12rem; }
.cs-tmpl-preview__footer { font-size: 11.5px; opacity: 0.6; margin-block-start: 3px; }

@media (max-width: 900px) {
  .cs-tmpl-builder { grid-template-columns: 1fr; }
  .cs-tmpl-preview { position: static; }
}

.cs-tmpl-toolbar { justify-content: space-between; flex-wrap: wrap; }
.cs-tmpl-toolbar__actions { display: flex; gap: 0.5rem; }
.cs-tmpl-toolbar__actions form.button_to { display: contents; }
.cs-tmpl-toolbar__actions .cs-btn { font: inherit; }

.cs-tmpl-sync {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--txt-muted);
}
.cs-tmpl-sync svg { flex-shrink: 0; }
.cs-tmpl-sync--stale { color: var(--color-alert); }

.cs-tmpl-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.5rem 0;
}

.cs-table--linked tbody tr:hover { background: var(--hover); }
.cs-table--linked th,
.cs-table--linked td { white-space: nowrap; }
.cs-table--linked tbody tr:last-child td { border-block-end: 0; }
.cs-table__rowlink {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.cs-table__cell--body { width: 100%; max-width: 0; }
.cs-table__cell--body .cs-table__rowlink {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cs-tmpl-row__body { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-tmpl-row__error {
  display: block;
  margin-block-start: 0.15rem;
  white-space: normal;
  font-size: 0.8rem;
  color: var(--color-negative);
}

.cs-tmpl-meta__id { font-family: var(--font-mono); font-size: 0.8rem; color: var(--txt-muted); overflow-wrap: anywhere; }

.cs-tmpl-quality--muted { color: var(--txt-muted); }

.cs-tmpl-adjusted {
  display: inline-block;
  margin-inline-start: 0.4rem;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  font-size: 0.7rem;
  background: var(--hover);
  color: var(--txt-secondary);
  cursor: help;
}

.cs-tmpl-cost { cursor: help; }

.cs-tmpl-component {
  margin: 0;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--bg-pure);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--txt);
  white-space: pre-wrap;
}
.cs-tmpl-component--muted { color: var(--txt-muted); }

.cs-tmpl-component-buttons {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.cs-tmpl-component-buttons li {
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 0.85rem;
  color: var(--txt-secondary);
}

.cs-tmpl-preview__header { margin-block-end: 0.35rem; }
.cs-tmpl-preview__media {
  display: grid;
  place-items: center;
  block-size: 8rem;
  margin-block-end: 0.35rem;
  border-radius: 8px;
  overflow: hidden;
  background: color-mix(in oklch, var(--txt) 8%, transparent);
  color: var(--txt-muted);
}
.cs-tmpl-preview__media img,
.cs-tmpl-preview__media video {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.cs-tmpl-preview__buttons {
  inline-size: fit-content;
  min-inline-size: 12rem;
  max-inline-size: 100%;
  margin-block-start: 5px;
  margin-inline-start: auto;
  border-radius: 10px;
  overflow: hidden;
  background: color-mix(in oklch, var(--txt) 9%, var(--bg-pure));
}
.cs-msg.cs-msg--me:not(:has(.cs-msg__attendant-avatar)) ~ .cs-tmpl-preview__buttons { margin-inline-end: 42px; }
.cs-tmpl-preview__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 12px;
  color: var(--color-link);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.2;
}
.cs-tmpl-preview__btn + .cs-tmpl-preview__btn {
  border-block-start: 1px solid color-mix(in oklch, var(--txt) 12%, transparent);
}
.cs-tmpl-preview__btn-icon { flex: 0 0 auto; }

.cs-window-timer {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.08rem 0.42rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
  flex-shrink: 0;
  background: color-mix(in oklch, var(--accent) 12%, transparent);
  color: var(--accent);
}
.cs-window-timer--amber {
  background: color-mix(in oklch, oklch(0.72 0.15 72) 22%, transparent);
  color: oklch(0.62 0.15 66);
}
.cs-window-timer--closed {
  background: color-mix(in oklch, var(--color-negative) 12%, transparent);
  color: var(--color-negative);
}


.cs-tmpl-modal { inline-size: min(440px, 94vw); }
.cs-tmpl-modal__body { position: relative; padding: 22px 20px 20px; }

.cs-tmpl-picker__title {
  margin: 0 0 0.9rem;
  padding-inline: 1.6rem;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  color: var(--txt);
}

.cs-tmpl-picker__search {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.7rem;
  margin-block-end: 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--bg-pure);
  color: var(--txt-muted);
  transition: border-color 150ms, box-shadow 150ms;
}
.cs-tmpl-picker__search:focus-within {
  outline: 2px solid var(--ds-focus-ring);
  outline-offset: -1px;
  box-shadow: none;
}
.cs-tmpl-picker__search-input {
  --hover-size: 0;
  flex: 1;
  min-inline-size: 0;
  padding: 0;
  border: 0;
  background: transparent;
  outline: none;
  box-shadow: none;
  font-size: 13px;
  line-height: 1.4;
  color: var(--txt);
}
@media (pointer: coarse) {
  .cs-tmpl-picker__search-input { font-size: 16px; }
}
.cs-tmpl-picker__search .cs-tmpl-picker__search-input:focus,
.cs-tmpl-picker__search .cs-tmpl-picker__search-input:focus-visible {
  outline: none;
  box-shadow: none;
}

.cs-tmpl-picker__list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-block-size: 46vh;
  overflow-y: auto;
  padding-inline-end: 6px;
  padding-block-end: 4px;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in oklch, var(--txt) 22%, transparent) transparent;
}
.cs-tmpl-picker__list::-webkit-scrollbar { width: 8px; }
.cs-tmpl-picker__list::-webkit-scrollbar-track { background: transparent; }
.cs-tmpl-picker__list::-webkit-scrollbar-thumb {
  background: color-mix(in oklch, var(--txt) 22%, transparent);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.cs-tmpl-picker__row {
  --hover-size: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.6rem 0.7rem;
  text-align: start;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.cs-tmpl-picker__row:hover {
  background: var(--hover);
}
.cs-tmpl-picker__row-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.cs-tmpl-picker__row-name { font-size: 0.85rem; font-weight: 600; color: var(--txt); }
.cs-tmpl-picker__cat { text-transform: none; }
.cs-tmpl-picker__lang { font-size: 0.72rem; color: var(--txt-muted); }
.cs-tmpl-picker__excerpt { font-size: 0.78rem; line-height: 1.4; color: var(--txt-secondary); }
/* Loading, failed and empty all keep the picker's height: the dialog never opens as a bare band. */
.cs-tmpl-picker--state { display: grid; place-items: center; min-block-size: 220px; }
.cs-tmpl-picker__stale { margin: 0 0 var(--ds-space-2); font-size: var(--ds-font-size-xs); color: var(--ds-text-muted); text-align: center; }
.cs-tmpl-picker__empty { display: flex; flex-direction: column; gap: var(--ds-space-2); padding-block-start: var(--ds-space-2); }
/* The empty state's own bottom room belongs to a page; here the count of pending templates follows it closely. */
.cs-tmpl-picker__pending, .cs-tmpl-picker__none { margin: 0; font-size: var(--ds-font-size-compact); color: var(--ds-text-secondary); text-align: center; }
.cs-tmpl-picker__section { margin: var(--ds-space-2) 0 0; font-size: var(--ds-font-size-xs); font-weight: var(--ds-weight-semibold); color: var(--ds-text-muted); }
.cs-tmpl-picker__channels { display: flex; flex-direction: column; gap: 2px; }
.cs-tmpl-picker__channel {
  --hover-size: 0;
  display: flex; align-items: center; gap: var(--ds-space-3);
  inline-size: 100%; min-block-size: 52px; padding: var(--ds-space-2) var(--ds-space-3);
  border: 0; border-radius: var(--ds-radius-lg); background: transparent; color: var(--ds-text-muted);
  text-align: start; cursor: pointer;
}
.cs-tmpl-picker__channel:hover { background: var(--ds-fill-hover); }
.cs-tmpl-picker__channel:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: 0; }
.cs-tmpl-picker__channel-icon { display: inline-flex; flex-shrink: 0; }
.cs-tmpl-picker__channel-text { display: flex; flex-direction: column; flex: 1; min-inline-size: 0; }
.cs-tmpl-picker__channel-name { font-size: var(--ds-font-size-compact); font-weight: var(--ds-weight-semibold); color: var(--ds-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-tmpl-picker__channel-number { font-size: var(--ds-font-size-xs); color: var(--ds-text-muted); }
.cs-tmpl-picker__channel-count { font-size: var(--ds-font-size-xs); font-weight: var(--ds-weight-semibold); color: var(--ds-on-cta-soft); white-space: nowrap; }
.cs-tmpl-picker__create { align-self: center; }

.cs-tmpl-picker__back {
  --hover-size: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-block-end: 0.7rem;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 0.8rem;
  color: var(--txt-muted);
  cursor: pointer;
}
.cs-tmpl-picker__back:hover { color: var(--txt); }

.cs-tmpl-picker__vars {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-block-end: 0.8rem;
}
.cs-tmpl-picker__var { display: flex; align-items: center; gap: 0.5rem; }
.cs-tmpl-picker__var .cs-tpl-var { flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; }
.cs-tmpl-picker__var input {
  --hover-size: 0;
  flex: 1;
  min-inline-size: 0;
  padding: 0.4rem 0.65rem;
  border: 1px solid var(--color-border);
  border-radius: 0.6rem;
  background: var(--bg-pure);
  box-shadow: none;
  color: var(--txt);
  font-size: 13px;
  line-height: 1.4;
  transition: border-color 150ms, box-shadow 150ms;
}
@media (pointer: coarse) {
  .cs-tmpl-picker__var input { font-size: 16px; }
}
.cs-tmpl-picker__var input:focus,
.cs-tmpl-picker__var input:focus-visible {
  outline: 2px solid var(--ds-focus-ring);
  outline-offset: -1px;
  box-shadow: none;
}

.cs-tmpl-picker__preview {
  padding: 0.7rem;
  margin-block-end: 0.9rem;
  border-radius: 10px;
  background: var(--color-bg);
}
.cs-tmpl-picker__preview .cs-msg { padding-inline: 0; width: 100%; }
.cs-tmpl-picker__preview .cs-msg__bubble { max-inline-size: 100%; }
.cs-tmpl-picker__preview .cs-msg__body { display: block; }

.cs-tmpl-picker__actions { display: flex; justify-content: flex-end; }

/* The conversation's topbar is the panel header: the face and the name open the contact, and the line
   under the name joins what is shown with " · " (the profile and the affiliation stay drawn while hidden). */
.cs-header__avatar { --hover-size: 0; display: inline-grid; padding: 0; border: 0; background: transparent; cursor: pointer; }
.cs-header__identity {
  --hover-size: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  max-inline-size: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.cs-header__name { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* One row that gives way from the left: the profile name and the affiliation end in an ellipsis, the number stays whole. */
.cs-header__line { display: flex; align-items: center; min-inline-size: 0; }
.cs-header__line > * { flex-shrink: 0; white-space: nowrap; }
.cs-header__line > :not([hidden]) ~ :not([hidden])::before { content: "\00b7"; margin-inline: 0.3em; }
.cs-header__line > .cs-header__profile-name { flex-shrink: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; }
.cs-header__line > .cs-affiliation { flex-shrink: 1; }
.cs-header__line > .cs-header__channel { display: inline-flex; align-items: center; gap: 0.25em; flex-shrink: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; }
.cs-header__line > .cs-header__channel[hidden] { display: none; }
.cs-header__channel > svg { flex-shrink: 0; }
/* An unsaved number is the conversation's name and is never cut: on a phone its badge opens the line below instead of following it. */
.cs-header__line > .cs-header__unsaved { margin-inline-end: 0.375rem; }
.cs-header__line > .cs-header__unsaved + :not([hidden])::before,
.cs-header__line > .cs-header__unsaved + [hidden] + :not([hidden])::before,
.cs-header__line > .cs-header__unsaved + [hidden] + [hidden] + :not([hidden])::before { content: none; }
@media (min-width: 100ch) { .cs-header__unsaved--line { display: none; } }
@media not all and (min-width: 100ch) { .cs-header__unsaved--title { display: none; } }
.cs-header__numbers {
  --hover-size: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
  cursor: pointer;
}
.cs-ticket__block { display: flex; align-items: center; }
.cs-ticket__people { display: inline-flex; align-items: center; padding-inline-start: 0.15rem; }
.cs-card-row { position: relative; }
/* the small line under the name (WhatsApp profile or company) must not make the card taller; the v5 row has the room */
html:not([data-visual="v5"]) .cs-card:has(:is(.cs-card__profile-name, .cs-card__affiliation):not([hidden])) > .flex-col { gap: 0; }
html:not([data-visual="v5"]) .cs-card:has(:is(.cs-card__profile-name, .cs-card__affiliation):not([hidden])) [data-cs-contact-name] { line-height: 15px; }
html:not([data-visual="v5"]) .cs-card:has(:is(.cs-card__profile-name, .cs-card__affiliation):not([hidden])) .txt-x-small { line-height: 15px; }
html:not([data-visual="v5"]) .cs-card__profile-name, html:not([data-visual="v5"]) .cs-card__affiliation { font-size: 11px; line-height: 11px; }
html:not([data-visual="v5"]) .cs-card:has(:is(.cs-card__profile-name, .cs-card__affiliation):not([hidden])) .cs-preview { line-height: 16px; }
.cs-affiliation { display: flex; align-items: center; gap: 0.25rem; min-width: 0; }
.cs-affiliation[hidden] { display: none; }
.cs-affiliation__glyph { display: inline-flex; flex-shrink: 0; }
.cs-affiliation__glyph[hidden] { display: none; }

.cs-faces { display: contents; }
/* Today's look keeps the lists on a line of their own under the preview's, though the markup boxes them with the people;
   the line break is the column's own gap, whichever the card has. */
html:not([data-visual="v5"]) .cs-card__labels { display: contents; }
html:not([data-visual="v5"]) .cs-card__meta:has(> .cs-card__labels) { flex-wrap: wrap; row-gap: inherit; }
html:not([data-visual="v5"]) .cs-card__labels > .cs-card__lists { order: 1; flex-basis: 100%; }
.cs-card__lists-menu { position: absolute; inset: 0; pointer-events: none; }
/* Drawn over the +N it opens, for the keyboard's ring. */
.cs-card__lists-toggle {
  position: absolute;
  inset-inline-start: var(--cs-lists-x, 0);
  inset-block-start: var(--cs-lists-y, 0);
  inline-size: var(--cs-lists-w, 0);
  block-size: var(--cs-lists-h, 0);
  border-radius: var(--ds-radius-full);
  list-style: none;
  &::-webkit-details-marker { display: none; }
  &:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: 2px; }
}
.cs-card__lists-menu > .cs-card__lists-list {
  inset-block: calc(100% + 4px) auto;
  inset-inline: auto var(--cs-lists-end, 0);
  pointer-events: auto;
}
.cs-card__lists-menu.popup-orientation-top > .cs-card__lists-list { inset-block: auto calc(100% + 4px); }
.cs-card-row[data-controller~="customer-support--card-lists"] .cs-card__lists > .ds-more { position: relative; cursor: pointer; }
.cs-card-row:has(.cs-card__lists-menu[open]) .cs-card__lists > .ds-more {
  --more-fill: color-mix(in oklab, var(--ds-text) 20%, var(--ground, var(--ds-bg-pure)));
  color: var(--ds-text);
}
@media (any-hover: hover) {
  .cs-card-row[data-controller~="customer-support--card-lists"] .cs-card__lists > .ds-more:hover {
    --more-fill: color-mix(in oklab, var(--ds-text) 20%, var(--ground, var(--ds-bg-pure)));
    color: var(--ds-text);
  }
}
/* The 18 px count takes the pointer over 24 px at least (WCAG 2.5.8), 30 on touch. It grows to the sides and down, never up:
   the preview's line ends a pixel above it, and the card's centre has to open the conversation. */
.cs-card-row[data-controller~="customer-support--card-lists"] .cs-card__lists > .ds-more::after { content: ""; position: absolute; inset: 0 -3px -6px; }
@media (pointer: coarse) {
  .cs-card-row[data-controller~="customer-support--card-lists"] .cs-card__lists > .ds-more::after { inset-inline: -6px; }
}
.cs-card__menu {
  position: absolute;
  inset-block-end: 0.55rem;
  inset-inline-end: 0.35rem;
}
.cs-card__menu-toggle {
  --hover-size: 0;
  display: grid;
  place-items: center;
  inline-size: 22px;
  block-size: 22px;
  border-radius: 50%;
  color: var(--txt-muted);
  cursor: pointer;
  list-style: none;
  opacity: 0;
  transition: opacity 0.12s ease, background-color 0.12s ease;
}
.cs-card__menu-toggle::-webkit-details-marker { display: none; }
.cs-card-row:hover .cs-card__menu-toggle,
.cs-card__menu[open] .cs-card__menu-toggle,
.cs-card__menu-toggle:focus-visible { opacity: 1; }
.cs-card__menu-toggle:hover { background: var(--bg-subtle); color: var(--txt); }
/* A touch screen has no hover to reveal the caret, so there it is always drawn and always has its room. The v5 card
   keeps that room on its last line instead (ds_conversation_row.css), so this padding is the older look's alone. */
@media (hover: none) {
  .cs-card__menu-toggle { opacity: 1; }
  html:not([data-visual="v5"]) :is(.cs-card__lists, .cs-card__head, .cs-card:not(:has(.cs-card__lists)) .cs-card__meta) { padding-inline-end: 22px; }
}
html:not([data-visual="v5"]) .cs-card-row:is(:hover, :has(.cs-card__menu[open])) :is(.cs-card__lists, .cs-card:not(:has(.cs-card__lists)) .cs-card__meta) { padding-inline-end: 22px; }
.cs-card__menu-list {
  position: absolute;
  inset-block-start: calc(100% + 0.3rem);
  inset-inline-end: 0;
  z-index: 30;
  inline-size: max-content;
  min-inline-size: 190px;
  max-inline-size: min(280px, 100vw - 32px);
  max-block-size: var(--max-height, none);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: var(--ds-menu-inset);
  border: 1px solid var(--ds-menu-border);
  border-radius: var(--ds-menu-radius);
  background: var(--ds-menu-bg);
  color: var(--ds-menu-text);
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.28);
}
html[data-visual="v5"] .cs-card__menu-list { box-shadow: none; }

.cs-card__pin { display: inline-flex; color: var(--txt-muted); }
.cs-card--seen-here .cs-card__unread { display: none; }
.cs-card__follow-up { display: inline-flex; align-items: center; color: var(--txt-muted); }

.popup-orientation-top .cs-card__menu-list,
.popup-orientation-top .cs-closing-status-filter__menu,
.popup-orientation-top .cs-header-menu__menu,
.popup-orientation-top .cs-list-filter__menu,
.popup-orientation-top .cs-people-filter__menu {
  inset-block-start: auto;
  inset-block-end: calc(100% + 0.3rem);
}

.cs-card__menu-item {
  --hover-size: 0;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  inline-size: 100%;
  padding: 0.45rem 0.6rem;
  border: 0;
  border-radius: var(--ds-menu-item-radius);
  background: transparent;
  font-size: 0.82rem;
  color: var(--ds-menu-text);
  text-align: start;
  cursor: pointer;
}
.cs-card__menu-item:hover { background: var(--ds-menu-hover); }
.cs-card__menu-item--danger { color: var(--color-negative, oklch(0.6 0.2 25)); }

.cs-card__lists-frame {
  display: block;
  margin-block-start: 0.25rem;
  padding-block-start: 0.25rem;
  border-block-start: 1px solid var(--border);
}
.cs-card__lists-title {
  margin: 0;
  padding: 0.3rem 0.6rem 0.15rem;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--txt-muted);
}
.cs-card__lists-empty { margin: 0; padding: 0.35rem 0.6rem; font-size: 0.78rem; color: var(--txt-muted); }
/* The rows grow the menu, which is the one thing that scrolls: a list inside a list had two scrollbars. */
.cs-card__list-rows { display: flex; flex-direction: column; }
.cs-list-menu { display: flex; flex-direction: column; }
:where(html:not([data-visual="v5"])) .cs-list-menu__search {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0.15rem 0.35rem 0.3rem;
  padding-inline: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--txt-muted);
  background: var(--bg-subtle);
}
:where(html:not([data-visual="v5"])) .cs-list-menu__search:focus-within { outline: 2px solid var(--ds-focus-ring); outline-offset: -1px; color: var(--txt); }
:where(html:not([data-visual="v5"])) .cs-list-menu__search-field {
  --hover-size: 0;
  flex: 1;
  min-inline-size: 0;
  padding-block: 0.3rem;
  border: 0;
  background: transparent;
  font-size: 0.78rem;
  color: var(--txt);
  outline: none;
}
:where(html:not([data-visual="v5"])) .cs-list-menu__search-field::-webkit-search-cancel-button { appearance: none; }
.cs-card__list-new { margin-block-start: 0.25rem; padding-block-start: 0.5rem; border-block-start: 1px solid var(--border); border-radius: 0 0 8px 8px; color: var(--txt-muted); text-decoration: none; }
.cs-card__list-new:hover { color: var(--txt); }
.cs-card__list-manage { color: var(--txt-muted); text-decoration: none; }
.cs-card__list-manage:hover { color: var(--txt); }
.cs-list-menu .cs-list-option { --cs-list-option-hover: var(--bg-subtle); }
.cs-card__list-toggle { flex: 1; min-inline-size: 0; }
.cs-card__list-toggle .ds-chip { min-inline-size: 0; }

.cs-card__queue { display: flex; min-inline-size: 0; max-inline-size: 45%; }
.cs-card__people { display: inline-flex; align-items: center; }
.cs-conversation-protocol__icon { flex-shrink: 0; }
.cs-conversation-protocol[data-status="open"] .cs-conversation-protocol__icon { color: var(--color-positive); }
.cs-conversation-protocol__number { font-weight: 600; }

.cs-ticket-modal__title { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem; }
.cs-ticket-modal__icon { flex-shrink: 0; color: var(--txt-muted); }
.cs-ticket-modal__title:has([data-status="open"]) .cs-ticket-modal__icon { color: var(--color-positive); }
.cs-ticket-modal__badge {
  white-space: nowrap;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: color-mix(in oklch, var(--txt-muted) 18%, transparent);
  color: var(--txt-muted);
}
.cs-ticket-modal__badge[data-status="open"] {
  background: color-mix(in oklch, var(--color-positive) 16%, transparent);
  color: var(--color-positive);
}

.cs-resolution { display: flex; flex-direction: column; gap: 0.9rem; }
.cs-resolution__error { margin: 0; font-size: 0.85rem; color: var(--color-negative); }
.cs-resolution__fields { display: flex; flex-direction: column; gap: 0.75rem; text-align: start; }
.cs-resolution__fields[hidden], .cs-resolution__field[hidden] { display: none; }
.cs-resolution__field { display: flex; flex-direction: column; gap: 0.35rem; }
.cs-resolution .input { --input-border-radius: 0.6rem; }
.cs-resolution :where(button, input, select, textarea, .input) { --hover-size: 0; }
.cs-resolution__field textarea.input { resize: vertical; }
.cs-resolution__chosen { margin: 0; font-weight: 600; }
.cs-follow-up-people { margin-block-start: 0.5rem; }
.cs-resolution-modal { inline-size: min(34rem, 92vw); }
.cs-resolution__actions { display: flex; justify-content: flex-end; gap: 0.5rem; padding-block-start: 0.25rem; }
.cs-resolution__choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 0.5rem;
}
.cs-resolution__choices[hidden] { display: none; }
.cs-resolution__choice {
  --hover-size: 0;
  padding: 0.8rem 1rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: transparent;
  color: var(--txt);
  font-weight: 600;
  text-align: start;
  cursor: pointer;
}
.cs-resolution__choice:hover { background: var(--hover); }
.cs-resolution__choice:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: 0; }
.cs-resolution__hint { display: block; margin-block-start: 0.15rem; font-size: 0.78rem; font-weight: 400; color: var(--txt-muted); }

.cs-account-switch__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.cs-account-switch__row .cs-form-field__label { margin: 0; }
.cs-closing-statuses__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cs-closing-outcome-names { display: flex; flex-direction: column; gap: 0.9rem; padding-block-start: 1.25rem; border-block-start: 1px solid var(--border); }
.cs-closing-outcome-names__header { display: flex; flex-direction: column; gap: 0.2rem; }
.cs-closing-outcome-names__fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.75rem 1rem; }
.cs-closing-outcome-names__actions { display: flex; justify-content: flex-end; }
.cs-closing-status-suggestions { display: flex; flex-direction: column; gap: 1rem; }
.cs-closing-status__handle { cursor: grab; color: var(--txt-muted); flex-shrink: 0; }
.cs-closing-status__lock { display: inline-grid; place-items: center; inline-size: 16px; flex-shrink: 0; color: var(--txt-muted); }
.cs-closing-status-form { display: flex; flex-direction: column; gap: 1rem; max-width: 28rem; }
.cs-outcome-text {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-1);
  margin: var(--ds-space-3) 0 0;
  padding: var(--ds-space-2) var(--ds-space-3);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-bg-subtle);
  text-align: start;
}
.cs-outcome-text__body {
  margin: 0;
  font-size: var(--ds-font-size-sm);
  font-weight: var(--ds-weight-medium);
  line-height: 1.45;
  color: var(--ds-text);
  white-space: pre-line;
  overflow-wrap: anywhere;
}
/* The closing note under "Fechado em": a system card like the chat's pills, text read left to right. */
.cs-closing-note {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-1);
  width: min(100%, 480px);
  margin: var(--ds-space-1) 0;
  padding: var(--ds-space-2) var(--ds-space-3);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-bg-pure);
  color: var(--ds-text);
  font-size: var(--ds-font-size-sm);
  text-align: start;
}
.cs-closing-note__label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  font-size: var(--ds-font-size-xs);
  font-weight: var(--ds-weight-semibold);
  color: var(--ds-text-secondary);
}
/* v5: a system card on the paper, as the v5 notice: no border, the xl radius, the label in the soft green. */
:where(html[data-visual="v5"]) .cs-closing-note { border: 0; border-radius: var(--ds-radius-xl); }
:where(html[data-visual="v5"]) .cs-closing-note__label { color: var(--ds-on-cta-soft); }
.cs-closing-note__text {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  line-height: 1.45;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.cs-closing-note--expanded .cs-closing-note__text { display: block; -webkit-line-clamp: unset; line-clamp: none; }
.cs-closing-note__more {
  --hover-size: 0;
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ds-link);
  font-size: var(--ds-font-size-xs);
  font-weight: var(--ds-weight-medium);
  cursor: pointer;
}
.cs-closing-note__more:hover { text-decoration: underline; }
.cs-closing-note__more:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: 0; }
.cs-closing-note__follow-up {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  font-size: var(--ds-font-size-xs);
  color: var(--ds-text-secondary);
}
.cs-closing-note__text ~ .cs-closing-note__follow-up {
  margin-top: var(--ds-space-1);
  padding-top: var(--ds-space-2);
  border-top: 1px solid var(--ds-border);
}
.cs-closing-note__date { font-weight: var(--ds-weight-semibold); color: var(--ds-text); text-decoration: none; }
a.cs-closing-note__date:hover { color: var(--ds-link); text-decoration: underline; }
a.cs-closing-note__date:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: 0; border-radius: var(--ds-radius-sm); }
.cs-closing-note__follow-up--past,
.cs-closing-note__follow-up--past .cs-closing-note__date { color: var(--ds-text-muted); }
.cs-closing-note__follow-up--past .ds-avatar-group { opacity: 0.6; }

.cs-results__periods { margin-block: 0.5rem 1.25rem; }
.cs-results__numbers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 0.75rem;
  margin: 0 0 1rem;
}
.cs-results__number {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-inline-size: 0;
  padding: 0.9rem 1rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  color: inherit;
  text-decoration: none;
  transition: background-color 0.12s;
}
.cs-results__number:hover { background: var(--hover); }
.cs-results__number:focus-visible, .cs-results__bar:focus-visible, .cs-results__cell-link:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: 0; }
.cs-results__label { font-size: 0.8rem; color: var(--txt-muted); }
.cs-results__value { font-size: 1.4rem; font-weight: 700; color: var(--txt); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-results__section { display: flex; flex-direction: column; gap: 0.75rem; margin-block-start: 1.5rem; }
.cs-results__bars { display: flex; flex-direction: column; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.cs-results__bar {
  display: grid; grid-template-columns: minmax(6rem, 12rem) 1fr 2.5rem; align-items: center; gap: 0.75rem;
  padding: 0.35rem 0.5rem; margin-inline: -0.5rem; border-radius: 0.5rem; color: inherit; text-decoration: none;
}
.cs-results__bar:hover { background: var(--hover); }
.cs-results__cell-link { color: var(--txt); text-decoration: none; font-weight: 600; }
.cs-results__cell-link:hover { text-decoration: underline; }
.cs-results__bar-label { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.9rem; color: var(--txt); }
.cs-results__bar-track {
  height: 0.6rem;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in oklch, var(--txt-muted) 14%, transparent);
}
.cs-results__bar-fill { display: block; height: 100%; border-radius: inherit; background: var(--txt-muted); }
.cs-results__bar-total { text-align: end; color: var(--txt-muted); font-variant-numeric: tabular-nums; }
.cs-results__empty { margin: 0; font-size: 0.9rem; color: var(--txt-muted); }
.cs-results__table-wrap { overflow-x: auto; }
.cs-results__table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.cs-results__table th {
  padding: 0.5rem 0.75rem;
  text-align: start;
  font-weight: 600;
  color: var(--txt-muted);
  border-bottom: 1px solid var(--border);
}
.cs-results__table td { padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.cs-result-episodes td { white-space: nowrap; }
.cs-result-episodes__row { position: relative; }
.cs-result-episodes__row:hover { background: var(--hover); }
.cs-result-episodes__link { font-weight: 600; color: var(--txt); text-decoration: none; }
.cs-result-episodes__link::after { content: ""; position: absolute; inset: 0; }
.cs-result-episodes__link:focus-visible { outline: none; }
.cs-result-episodes__row:has(.cs-result-episodes__link:focus-visible) { outline: 2px solid var(--ds-focus-ring); outline-offset: -2px; }
.cs-result-episodes__contact { max-inline-size: 14rem; overflow: hidden; text-overflow: ellipsis; }
.cs-result-episodes__older { align-self: center; margin-block-start: 1rem; }
/* Today's phone drops two columns; the v5 stacks the rows instead (ds-table--stack) and keeps them. */
@media (max-width: 40rem) {
  html:not([data-visual="v5"]) .cs-result-episodes :is(.cs-result-episodes__attendant, .cs-result-episodes__date) { display: none; }
  .cs-result-episodes td.cs-result-episodes__status { white-space: normal; }
}

/* v5: the Resultados as the room's stats: the numbers in stat tiles, each section a muted label over a sheet of
   the pure paper, the table without its outer lines, the divider the catalog's, the head a section label. */
:where(html[data-visual="v5"]) .cs-results__periods { align-self: center; margin-block: 0; }
:where(html[data-visual="v5"]) .cs-results__section { gap: var(--ds-space-2); margin-block-start: 0; }
:where(html[data-visual="v5"]) .cs-results__section > h2.cs-settings__subtitle {
  margin: 0;
  padding-inline: var(--ds-space-1);
  font-size: var(--ds-info-title);
  font-weight: var(--ds-weight-regular);
  line-height: var(--ds-info-leading);
  letter-spacing: normal;
  text-transform: none;
  color: var(--ds-text-muted);
}
:where(html[data-visual="v5"]) :is(.cs-results__bars, .cs-results__table-wrap, .cs-results__empty) {
  padding: var(--ds-space-2) var(--ds-space-4);
  border-radius: var(--ds-radius-xl);
  background: var(--ds-bg-pure);
}
:where(html[data-visual="v5"]) .cs-results__bar-track { background: var(--ds-fill); }
:where(html[data-visual="v5"]) .cs-results__bar-fill { background: var(--ds-text-muted); }
:where(html[data-visual="v5"]) .cs-results__table :is(th, td) { border-bottom-color: var(--ds-border); }
:where(html[data-visual="v5"]) .cs-results__table tr:last-child td { border-bottom: 0; }
:where(html[data-visual="v5"]) .cs-results__table th {
  font-size: var(--ds-info-title);
  font-weight: var(--ds-weight-regular);
  line-height: var(--ds-info-leading);
  letter-spacing: normal;
  text-transform: none;
  color: var(--ds-text-muted);
}
@media (any-hover: hover) {
  :where(html[data-visual="v5"]) :is(.cs-result-episodes__row, .cs-results__bar):hover { background: var(--ds-hover); }
}

.cs-conversation-protocol {
  --hover-size: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
  padding: 0.4rem 0.7rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  color: var(--txt-muted);
  cursor: pointer;
  transition: background-color 0.12s ease;
}
.cs-conversation-protocol:hover { background: var(--hover); }
.cs-conversation-protocol__status {
  display: inline-flex;
  align-items: center;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  font-weight: 600;
  background: color-mix(in oklch, var(--txt-muted) 20%, transparent);
  color: var(--txt-muted);
}
.cs-conversation-protocol[data-status="open"] .cs-conversation-protocol__status {
  background: color-mix(in oklch, var(--color-positive) 16%, transparent);
  color: var(--color-positive);
}
/* v5: the ticket is a filled pill on the topbar, and its state the catalog's status badge: a dot and the word,
   green as an indicator only (the open dot in the CTA, the word in the soft ink), no fill. The pill is the ground
   its stack of faces is ringed in. */
:where(html[data-visual="v5"]) .cs-conversation-protocol {
  --ground: var(--ds-fill);
  padding: var(--ds-space-1) var(--ds-space-3);
  border-radius: var(--ds-radius-full);
  background: var(--ground);
  font-size: var(--ds-font-size-xs);
  color: var(--ds-text-muted);
}
@media (any-hover: hover) {
  :where(html[data-visual="v5"]) .cs-conversation-protocol:hover { --ground: var(--ds-fill-hover); }
}
:where(html[data-visual="v5"]) .cs-conversation-protocol__number { color: var(--ds-text); }
:where(html[data-visual="v5"]) .cs-conversation-protocol[data-status="open"] .cs-conversation-protocol__icon { color: var(--ds-on-cta-soft); }
:where(html[data-visual="v5"]) .cs-conversation-protocol__status { gap: 0.3rem; padding: 0; background: none; color: var(--ds-text-muted); }
:where(html[data-visual="v5"]) .cs-conversation-protocol__status::before {
  content: "";
  inline-size: 7px;
  block-size: 7px;
  border-radius: 50%;
  background: currentColor;
}
:where(html[data-visual="v5"]) .cs-conversation-protocol[data-status="open"] .cs-conversation-protocol__status { background: none; color: var(--ds-on-cta-soft); }
:where(html[data-visual="v5"]) .cs-conversation-protocol[data-status="open"] .cs-conversation-protocol__status::before { background: var(--ds-cta); }

.cs-avatar-edit {
  --hover-size: 0;
  position: relative;
  display: inline-block;
  padding: 0; border: 0; background: transparent; cursor: pointer;
  border-radius: 50%;
  line-height: 0;
}
.cs-avatar-edit__badge {
  --hover-size: 0;
  position: absolute; inset-block-end: 2px; inset-inline-end: 2px;
  padding: 0; cursor: pointer;
  inline-size: 26px; block-size: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--bg-pure); color: var(--txt-muted);
  border: 2px solid var(--bg-pure);
  box-shadow: 0 1px 3px oklch(0 0 0 / 0.18);
  transition: color 0.12s ease, background 0.12s ease;
}
.cs-avatar-edit__badge:is(:hover, :focus-visible) {
  background: var(--accent); color: var(--bg-pure);
}
.cs-avatar-edit__file { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.cs-avatar-edit__preview {
  inline-size: 64px; block-size: 64px;
  border-radius: 50%; object-fit: cover;
  background: var(--bg-subtle);
}
.cs-profile-photo { display: flex; align-items: center; gap: 0.9rem; }

.cs-avatar-picker__title { margin-block-end: 14px; }
.cs-avatar-picker__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.cs-avatar-picker__cell { margin: 0; }
.cs-avatar-picker__tile {
  --hover-size: 0;
  position: relative;
  inline-size: 100%; aspect-ratio: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px;
  padding: 6px;
  border: 1px solid var(--border-strong); border-radius: 0.7rem;
  background: var(--color-bg); color: var(--txt-muted);
  cursor: pointer; overflow: hidden;
  transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}
.cs-avatar-picker__tile:hover { color: var(--txt); border-color: var(--txt-muted); }
.cs-avatar-picker__tile-label { font-size: 11px; font-weight: 500; text-align: center; line-height: 1.2; }
.cs-avatar-picker__tile.is-selected {
  border-color: var(--accent); color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.cs-avatar-picker__tile--upload { border-style: dashed; }
.cs-avatar-picker__file {
  position: absolute; inset: 0; opacity: 0; cursor: pointer;
}
.cs-avatar-picker__photo { padding: 0; }
.cs-avatar-picker__thumb { inline-size: 100%; block-size: 100%; object-fit: cover; }
.cs-avatar-picker__flag {
  position: absolute; inset-block-start: 4px; inset-inline-end: 4px;
  inline-size: 18px; block-size: 18px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: oklch(0 0 0 / 0.5); color: #fff;
}
.cs-avatar-picker__hint { text-align: center; }

.cs-tmpl-header-text { display: flex; flex-direction: column; gap: 8px; margin-block-start: 8px; }
.cs-tmpl-buttons { display: flex; flex-direction: column; gap: 8px; margin-block-end: 8px; }
.cs-tmpl-button { display: flex; gap: 8px; align-items: center; }
.cs-tmpl-button__type { --hover-size: 0; flex: 0 0 auto; max-inline-size: 42%; }
.cs-tmpl-button__field { --hover-size: 0; flex: 1; min-inline-size: 0; }
.cs-tmpl-button__remove { --hover-size: 0; flex: 0 0 auto; }
.cs-tmpl-header-media { display: flex; align-items: center; gap: 10px; margin-block-start: 8px; }
.cs-tmpl-header-media__file { flex: 1; min-inline-size: 0; font-size: 0.85rem; }
.cs-tmpl-header-media__status { font-size: 0.8rem; color: var(--txt-muted); }
.cs-tmpl-header-media__status[data-state="ok"] { color: var(--color-positive, var(--txt)); }
.cs-tmpl-header-media__status[data-state="error"] { color: var(--color-negative, var(--txt)); }

.cs-tmpl-row__error-row td {
  white-space: normal;
  padding-block-start: 0;
  border-block-start: 0;
}
.cs-tmpl-row__error-actions {
  display: inline-flex;
  gap: 0.4rem;
  margin-inline-start: 0.6rem;
  vertical-align: middle;
}
.cs-tmpl-row__error-actions form { display: inline; }

.cs-callout {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.7rem 0.85rem;
  margin-block-end: 1rem;
  border: 1px solid var(--color-border);
  border-radius: 0.6rem;
  background: var(--bg-subtle);
}

.cs-conn { display: flex; flex-direction: column; gap: 0.4rem; }
.cs-conn__strip {
  display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap;
  padding-inline: 0.15rem;
}
.cs-conn__logo { display: inline-grid; place-items: center; flex-shrink: 0; color: var(--txt-muted); }
.cs-conn__kind {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--txt-muted);
}
.cs-conn__mode {
  font-size: 0.68rem; font-weight: 600;
  padding: 0.1rem 0.45rem; border-radius: 999px;
  background-color: var(--accent-soft); color: var(--accent-strong);
}
.cs-conn__sync { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 0.3rem; flex-shrink: 0; }
.cs-conn__sync-when { font-size: 0.7rem; color: var(--txt-muted); white-space: nowrap; }

.cs-conn-card__body { padding: 1.05rem 1.15rem 1.15rem; display: flex; flex-direction: column; gap: 0.85rem; }

.cs-btn--quiet {
  border-color: transparent;
  color: var(--txt-muted);
  padding: 0.2rem 0.4rem;
  min-height: 1.5rem;
  font-size: 0.72rem;
}
.cs-btn--quiet:hover { background-color: var(--hover); color: var(--txt); }

.cs-conn-id { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
.cs-conn-id__photo {
  inline-size: 3rem; block-size: 3rem; border-radius: 50%; object-fit: cover; flex-shrink: 0;
}
.cs-conn-id__photo--empty {
  display: inline-grid; place-items: center;
  background-color: var(--bg-subtle); color: var(--txt-muted);
}
.cs-conn-id__portrait { flex-shrink: 0; line-height: 0; }
.cs-conn-id__actions { display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0; margin-inline-start: auto; }
/* The name and its badges need room before the actions get a place beside them: on a phone the actions drop to a line of their own. */
.cs-conn-id__main { flex: 1 1 12rem; min-width: 0; }
.cs-conn-id__nameline { display: flex; align-items: center; gap: 0.5rem; min-width: 0; flex-wrap: wrap; }
.cs-conn-id__name {
  font-size: 1.05rem; font-weight: 650;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cs-conn-id__action { flex-shrink: 0; margin-inline-start: auto; }

.cs-conn-adv { border-block-start: 1px solid var(--color-border); padding: 0.8rem 1.15rem 1rem; }
.cs-conn-adv__body .cs-conn-card__block { padding-inline: 0; }
.cs-conn-adv__summary {
  --hover-size: 0;
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 0.35rem;
  padding: 0.4rem 0.5rem;
  margin-inline: -0.5rem;
  border-radius: 8px;
  font-size: 0.82rem; font-weight: 600; color: var(--txt-secondary);
  transition: background-color 0.15s ease;
}
@media (any-hover: hover) {
  .cs-conn-adv__summary:hover { background-color: var(--hover); }
}
.cs-conn-adv__summary::-webkit-details-marker { display: none; }
.cs-conn-adv[open] > .cs-conn-adv__summary .cs-option-row__caret { transform: rotate(90deg); }
.cs-conn-adv__summary:focus { outline: none; }
.cs-conn-adv__summary:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: 0; border-radius: 6px; }
.cs-conn-adv__body { display: flex; flex-direction: column; gap: 1rem; margin-block-start: 0.9rem; }
.cs-conn-card__actions-last { margin-inline-start: auto; }

.cs-conn-grp { display: flex; flex-direction: column; gap: 0.6rem; }
.cs-conn-grp__head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.cs-conn-grp__head .cs-conn-card__label { margin: 0; }
.cs-conn-grp__head form { margin: 0; }
.cs-conn-grp__link { align-self: flex-start; font-size: 0.78rem; color: var(--accent-strong); }

.cs-conn-state { display: flex; flex-direction: column; }
.cs-conn-state__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding-block: 0.15rem;
  font-size: 0.8rem; color: var(--txt-secondary);
}
.cs-conn-state__row strong { font-weight: 600; color: var(--txt); font-variant-numeric: tabular-nums; }
.cs-conn-state__row strong.cs-conn-state__quiet { font-weight: 400; color: var(--txt-muted); }
.cs-conn-state__row strong.cs-conn-state__bad { color: var(--color-negative); }

.cs-import__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; margin-top: 0.9rem; }
.cs-import__scope { margin: 0; font-size: 0.8rem; color: var(--txt-secondary); }

.cs-conn-ident { display: flex; flex-direction: column; }
.cs-conn-ident__row {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.3rem 0.45rem; margin-inline: -0.45rem;
  border-radius: 7px;
}
.cs-conn-ident__row:hover { background-color: var(--hover); }
.cs-conn-ident__label { flex: 0 0 11rem; font-size: 0.78rem; color: var(--txt-secondary); }
.cs-conn-ident__value {
  flex: 1; min-width: 0;
  font-family: var(--font-mono); font-size: 0.72rem; font-variant-numeric: tabular-nums;
  color: var(--txt); overflow-wrap: anywhere;
}
.cs-conn-ident__copy {
  --hover-size: 0;
  flex-shrink: 0; padding: 0.1rem 0.3rem; border-radius: 5px;
  font-size: 0.7rem; color: var(--txt-muted); cursor: pointer;
}
.cs-conn-ident__row:hover .cs-conn-ident__copy { color: var(--accent-strong); }

.cs-modal--profile { inline-size: min(30rem, 92vw); }
.cs-modal--profile .cs-modal__panel {
  text-align: start;
  max-block-size: min(86vh, 44rem); overflow-y: auto;
}
.cs-modal--profile .cs-modal__title { margin-block-end: 1rem; }
.cs-modal--swap { inline-size: min(30rem, 92vw); max-block-size: min(88vh, 46rem); overflow-y: auto; }
.cs-modal--swap .cs-modal__panel { text-align: start; padding: 24px 24px 0; }

.cs-conn-swap__title { margin: 0 0 4px; padding-inline-end: 44px; }
.cs-conn-swap__who { margin: 0 0 18px; font-size: 13px; line-height: 1.35; color: var(--txt-muted); }

.cs-conn-swap__select { block-size: 42px; }

.cs-conn-swap__hint {
  margin: 8px 0 0; min-block-size: 34px;
  font-size: 13px; line-height: 1.3; color: var(--txt-muted);
}
.cs-conn-swap__hint.is-negative { color: var(--color-negative); }

.cs-conn-swap__when {
  margin-block-start: 16px; padding: 12px 14px;
  border-inline-start: 3px solid var(--color-negative);
  border-radius: 0 10px 10px 0;
  background: var(--bg-subtle);
}
.cs-conn-swap__when-title {
  display: flex; align-items: center; gap: 7px; margin: 0 0 8px;
  font-size: 13px; font-weight: 600; color: var(--txt);
}
.cs-conn-swap__when-title svg { flex-shrink: 0; color: var(--color-negative); }
.cs-conn-swap__when-list {
  margin: 0; padding-inline-start: 20px;
  display: flex; flex-direction: column; gap: 5px;
  font-size: 13.5px; line-height: 1.45; color: var(--txt-secondary);
}
.cs-conn-swap__when-list li::marker { color: var(--txt-muted); font-variant-numeric: tabular-nums; }
.cs-conn-swap__when-list strong { font-weight: 600; color: var(--txt); }

.cs-conn-swap__stays { margin-block-start: 14px; padding: 11px 13px; border-radius: 10px; background: var(--bg-subtle); }
.cs-conn-swap__stays-title { margin: 0 0 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.03em; color: var(--txt-muted); }
.cs-conn-swap__stays-line { margin: 0; font-size: 14px; line-height: 1.45; color: var(--txt-secondary); }

.cs-conn-swap__watch { margin: 14px 0 18px; font-size: 14px; line-height: 1.45; color: var(--txt); }

.cs-conn-swap__foot { margin-inline: -24px; padding: 16px 24px 20px; border-block-start: 1px solid var(--color-border); }
.cs-conn-swap__status {
  margin: 0; min-block-size: 34px;
  font-size: 13px; line-height: 17px; color: var(--txt-secondary);
}
.cs-conn-swap__status.is-live { color: var(--txt); }
.cs-conn-swap__status.is-error { color: var(--color-negative); }
.cs-conn-swap__status-sub { margin: 4px 0 0; font-size: 12.5px; color: var(--txt-muted); }
.cs-conn-swap__actions { display: flex; justify-content: flex-end; gap: 8px; margin-block-start: 10px; }
.cs-conn-swap__actions .cs-btn { block-size: 40px; padding-inline: 20px; border-radius: 8px; font-size: 15px; }
@media (max-width: 34rem) { .cs-conn-swap__cols { grid-template-columns: 1fr; } }

.cs-conn-cred { display: flex; align-items: baseline; gap: 0.75rem; margin-block-start: 0.4rem; }
.cs-conn-cred__label { flex: 0 0 11rem; font-size: 0.78rem; color: var(--txt-secondary); }
.cs-conn-cred__value {
  flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  font-size: 0.78rem; font-weight: 600; color: var(--txt);
}
.cs-conn-cred__sub { font-size: 0.7rem; font-weight: 400; line-height: 1.4; color: var(--txt-muted); }
.cs-conn-cred__action { flex-shrink: 0; align-self: flex-start; margin-block-start: -0.2rem; }
.cs-conn-cred:first-of-type { margin-block-start: 0; }

.cs-conn-grp__head .cs-btn--quiet,
.cs-conn-cred__action.cs-btn--quiet { color: var(--accent-strong); font-weight: 600; }
.cs-conn-grp__head .cs-btn--quiet:hover,
.cs-conn-cred__action.cs-btn--quiet:hover { color: var(--accent-strong); background-color: var(--hover); }

@media (max-width: 40rem) {
  .cs-conn-cred { flex-wrap: wrap; }
  .cs-conn-cred__label { flex-basis: 100%; }
}

@media (max-width: 40rem) {
  .cs-conn-ident__row { flex-wrap: wrap; }
  .cs-conn-ident__label { flex-basis: 100%; }
}

.cs-conn-danger {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.8rem 1.15rem;
  border-block-start: 1px solid var(--color-border);
}
.cs-conn-adv__body .cs-conn-danger { padding-inline: 0; align-items: flex-start; }
.cs-conn-adv__body .cs-conn-danger .cs-btn { margin-block-start: 0.1rem; }
.cs-conn-danger__title { margin: 0; font-size: 0.85rem; font-weight: 600; }
.cs-conn-danger__hint { margin: 0.1rem 0 0; font-size: 0.75rem; color: var(--txt-muted); }
.cs-conn-danger form { margin: 0; flex-shrink: 0; }
@media (max-width: 40rem) {
  .cs-conn-danger { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
}

.cs-conn-id .cs-conn-card__number {
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--txt-secondary);
  margin: 0.1rem 0 0;
}
.cs-conn-id .cs-conn-card__status {
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  flex-shrink: 1;
  min-width: 0;
}

.cs-wa-profile__lock {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  margin: 0;
  font-size: 0.8rem;
  color: var(--txt-muted);
}
.cs-wa-profile__lock svg { flex-shrink: 0; margin-block-start: 0.15rem; }
.cs-wa-profile__lock-how { display: block; margin-block-start: 0.15rem; }

.cs-conn-card .cs-wa-profile__read {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 1.5rem;
  margin: 0;
}
@media (max-width: 40rem) {
  .cs-conn-card .cs-wa-profile__read { grid-template-columns: 1fr; }
}
.cs-wa-profile__read { display: flex; flex-direction: column; gap: 0.85rem; margin: 0.35rem 0 0; }
.cs-wa-profile__read dt {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--txt-muted);
}
.cs-wa-profile__read dd { margin: 0.12rem 0 0; font-size: 0.9rem; }
.cs-wa-profile__blank { color: var(--txt-muted); }

.cs-conn-state__stamp { margin: 0.1rem 0 0; font-size: 0.7rem; color: var(--txt-muted); }
.cs-conn-grp__head > div { min-width: 0; }

.cs-conn-failures { margin: 0.35rem 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.cs-conn-failures__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding-block: 0.15rem; font-size: 0.78rem; color: var(--txt-secondary);
}
.cs-conn-failures__error { overflow-wrap: anywhere; }
.cs-conn-failures__count { flex-shrink: 0; font-weight: 600; color: var(--color-negative); font-variant-numeric: tabular-nums; }

.cs-conn-state__mono { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 400; }

.cs-conv-search { display: flex; flex-direction: column; }
.cs-conv-search__field { padding: 0.75rem; }
.cs-conv-search__hint {
  margin: 0;
  padding: 0 0.9rem 0.9rem;
  font-size: 0.8rem;
  color: var(--txt-muted);
}
.cs-conv-search__results { display: flex; flex-direction: column; margin: 0; padding: 0 0.5rem 0.75rem; list-style: none; }
.cs-conv-search__result {
  --hover-size: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.55rem 0.6rem;
  border-radius: 0.6rem;
  text-decoration: none;
  color: inherit;
}
.cs-conv-search__result:hover { background: var(--hover); }
.cs-conv-search__when { font-size: 0.7rem; color: var(--txt-muted); }
.cs-conv-search__excerpt {
  font-size: 0.82rem;
  color: var(--txt);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cs-msg__link { text-decoration: underline; text-underline-offset: 2px; color: inherit; }
.cs-msg__link:hover { text-decoration-thickness: 2px; }

.cs-msg__preview {
  --hover-size: 0;
  display: block;
  margin-block-end: 0.4rem;
  border-radius: 0.7rem;
  overflow: hidden;
  background: color-mix(in oklch, var(--txt) 8%, transparent);
  text-decoration: none;
  color: inherit;
}
.cs-msg__preview:hover { background: color-mix(in oklch, var(--txt) 14%, transparent); }
/* Fixed, not capped: without a height of its own the card grows when the cover lands and pushes
   whatever is being read. */
.cs-msg__preview-cover { display: block; inline-size: 100%; block-size: 160px; object-fit: cover; }
.cs-msg__preview-body { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.5rem 0.6rem; }
.cs-msg__preview-title { font-size: 0.82rem; font-weight: 600; }
.cs-msg__preview-desc {
  font-size: 0.76rem;
  opacity: 0.75;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cs-shelf__head {
  --hover-size: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  text-decoration: none;
  color: inherit;
}
.cs-shelf__title { display: inline-flex; align-items: center; gap: 0.4rem; }
.cs-shelf__count {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.78rem;
  color: var(--txt-muted);
}
.cs-shelf__head:hover .cs-shelf__count { color: var(--txt); }
.cs-shelf__strip { display: flex; gap: 0.35rem; margin-block-start: 0.6rem; }
.cs-shelf__thumb {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 56px;
  block-size: 56px;
  border-radius: 0.6rem;
  overflow: hidden;
  background: var(--bg-subtle);
  color: var(--txt-muted);
}
.cs-shelf__thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.cs-shelf__play {
  position: absolute;
  inset-inline-end: 4px;
  inset-block-end: 4px;
  display: grid;
  place-items: center;
  inline-size: 18px;
  block-size: 18px;
  border-radius: 999px;
  background: rgb(0 0 0 / 65%);
  color: white;
}
.cs-shelf__pdf { display: grid; place-items: center; inline-size: 100%; block-size: 100%; color: #d32f2f; }
.cs-shelf__pdf canvas { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: top; }
.cs-shelf__pdf canvas[hidden], .cs-shelf__pdf [data-pdf-bubble-target="fallback"][hidden] { display: none; }

.cs-media-group { display: flex; flex-direction: column; gap: 0.6rem; }
.cs-media-group__title {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--txt-muted);
}

.cs-forward-modal { block-size: min(88dvh, 780px); }
.cs-forward-modal .cs-modal__panel {
  display: flex;
  flex-direction: column;
  block-size: 100%;
  overflow: hidden;
}
.cs-forward-modal__body,
.cs-forward-modal .cs-forward {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-block-size: 0;
}
.cs-forward-modal .cs-picker { flex: 1; min-block-size: 0; }
.cs-forward-modal .cs-picker__scroll {
  flex: 1;
  min-block-size: 0;
  max-block-size: none;
}
.cs-forward-modal .cs-forward__actions { flex: none; }
.cs-forward { display: flex; flex-direction: column; gap: 0.6rem; text-align: start; }
.cs-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 0.4rem;
}
.cs-media-cell {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 0.6rem;
  overflow: hidden;
  background: var(--bg-subtle);
  color: var(--txt-muted);
  cursor: zoom-in;
}
.cs-media-cell:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: 0; }
.cs-media-cell img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.cs-media-cell__play {
  position: absolute;
  display: grid;
  place-items: center;
  inline-size: 36px;
  block-size: 36px;
  border-radius: 999px;
  background: rgb(0 0 0 / 55%);
  color: white;
}
.cs-media-docs, .cs-media-links { display: flex; flex-direction: column; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
.cs-media-doc {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.6rem;
  border-radius: 0.6rem;
  background: var(--bg-subtle);
}
.cs-media-doc__face {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: 18px max-content minmax(0, 1fr);
  column-gap: 0.6rem;
  align-items: center;
}
.cs-media-doc__face svg { grid-row: 1 / 3; }
.cs-media-doc__face .cs-file-face__name {
  grid-column: 2 / 4;
  font-size: 0.85rem;
  color: var(--txt);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cs-media-doc__metadata {
  grid-column: 2 / 4;
  margin-inline-start: 0;
  padding-inline-start: 0;
  font-size: 0.72rem;
  color: var(--txt-muted);
}
.cs-media-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.5rem 0.6rem;
  border-radius: 0.6rem;
  background: var(--bg-subtle);
}
.cs-media-link__url { display: inline-flex; align-items: center; gap: 0.4rem; min-width: 0; font-size: 0.85rem; }
.cs-media-link__url span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-media-link__at { flex: none; font-size: 0.72rem; color: var(--txt-muted); }
.cs-forward__channel {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-block-end: 0.6rem;
  border-block-end: 1px solid var(--border);
}
.cs-forward__window {
  flex-basis: 100%;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.8125rem;
}
.cs-forward__window svg { flex-shrink: 0; margin-block-start: 0.1rem; }
.cs-forward__window-body { display: flex; flex-direction: column; gap: 0.35rem; }
.cs-forward__window p { margin: 0; }
.cs-forward__fallback { display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; }
.cs-forward__fallback input[type="checkbox"] {
  --hover-size: 0;
  appearance: auto;
  accent-color: var(--accent);
  inline-size: 1.05rem;
  block-size: 1.05rem;
  margin: 0;
  flex-shrink: 0;
  cursor: pointer;
}
.cs-forward__fallback-off { color: var(--color-negative); }
.cs-forward__channel-note {
  flex-basis: 100%;
  margin: 0;
  font-size: 12px;
  color: var(--txt-muted);
}
/* The composer's own list opens upwards because it sits at the foot of the screen; inside the
   window there is room below, and opening up climbs out of it. */
.cs-forward__channel .composer-channel__dd .cs-channel-dropdown__menu {
  inset-block-start: calc(100% + 6px);
  inset-block-end: auto;
  max-height: 260px;
}
.cs-forward__actions { display: flex; justify-content: flex-end; padding-block-start: 0.4rem; }

/* The notice sits at the end of the line so it never lands on top of the composer's own corner. */
/* Quiet it takes no height at all: the strip only pushes the composer when it has something
   to say. */
.cs-connection-line {
  display: flex;
  justify-content: flex-end;
  max-height: 0;
  overflow: hidden;
  padding-inline: 0.35rem;
}

.cs-connection-line:has(.cs-connection-notice--active),
.cs-connection-line:has(.cs-connection-notice--failed:not([hidden])) {
  max-height: 1.15rem;
}

.cs-connection-notice {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  color: var(--txt-muted, #8b918f);
  opacity: var(--cs-notice-opacity, 0);
  transition: opacity 300ms ease;
}

.cs-connection-notice--active {
  --cs-notice-opacity: 1;
}

.cs-connection-notice--failed {
  --cs-notice-opacity: 1;
  color: var(--color-negative);
  margin-right: 0.6rem;
}

.cs-connection-notice__label {
  line-height: 1;
}

/* The spinner draws its dots on top of whatever they sit in, which is fine on a button that gives up
   its label while it waits. This one keeps its words, so it opens room for them at the start. */
.cs-connection-notice__label.spinner {
  padding-inline-start: 1.5em;
}

.cs-msg__media-failed {
  align-items: center;
  background: color-mix(in oklab, var(--color-negative) 8%, transparent);
  border: 1px solid color-mix(in oklab, var(--color-negative) 25%, transparent);
  border-radius: 0.75rem;
  color: var(--color-negative);
  cursor: pointer;
  display: inline-flex;
  font-size: 0.8rem;
  gap: 0.4rem;
  padding: 0.4rem 0.7rem;
}

.cs-msg__transcript--missing { font-style: italic; opacity: 0.6; }

.cs-msg--sending .cs-voice { opacity: 0.7; }
.cs-msg--cancelled .cs-voice { opacity: 0.4; }

.cs-voice__play--loading {
  animation: cs-voice-spin 0.7s linear infinite;
  border: 2px solid color-mix(in oklab, var(--color-text) 20%, transparent);
  border-radius: 50%;
  border-top-color: var(--color-text);
}

@keyframes cs-voice-spin { to { transform: rotate(360deg); } }

/* :empty would never match: the container is rendered with whitespace inside it. What decides is
   whether a row is there, which is what the live one adds. */
div[id^="cs_conversation_list_"]:has(article) ~ .cs-empty-list {
  display: none;
}

/* Only the panel frame: it is the one a click on a tab or a chip navigates. The list frame is also
   refreshed on its own when the reader comes back to the window, and dimming the screen over a
   refresh nobody asked for reads as a fault. */
#cs_sidebar_panel[busy] #cs_sidebar_list {
  opacity: 0.5;
  pointer-events: none;
  transition: opacity 0.15s ease 0.05s;
}

/* Half a second is where dimmed rows stop reading as "loading" and start reading as "frozen". A
   warm answer lands long before the delay elapses, so it never shows up on a fast tab. */
#cs_sidebar_panel[busy]::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: 30px; block-size: 30px;
  margin-block-start: -15px; margin-inline-start: -15px;
  border-radius: 50%;
  border: 3px solid var(--color-border);
  border-block-start-color: var(--accent);
  /* The spinner lands on top of a row, and without a ground of its own it reads as part of it. */
  box-shadow: 0 0 0 8px var(--sidebar-bg), 0 2px 10px rgb(0 0 0 / 0.12);
  opacity: 0;
  animation: cs-appear 0.15s ease 0.5s forwards;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  #cs_sidebar_panel[busy]::after {
    animation: cs-spin 0.7s linear infinite, cs-appear 0.15s ease 0.5s forwards;
  }
}
@keyframes cs-appear {
  to { opacity: 1; }
}

/* The wording changed under the reader, so the bubble says why, the way WhatsApp does. */
.cs-msg__edited {
  font-style: italic;
  opacity: 0.75;
}

/* "1 tarefa aberta" ao lado do protocolo do atendimento. */
.cs-open-tasks-chip {
  --hover-size: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  padding: 2px 8px;
  border: 1px solid color-mix(in oklch, var(--accent) 45%, transparent);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}
.cs-open-tasks-chip:hover { background: color-mix(in oklch, var(--accent) 10%, transparent); }
/* v5: an indicator, so the soft green without a border, the chip of the catalog. */
:where(html[data-visual="v5"]) .cs-open-tasks-chip {
  padding: var(--ds-space-1) var(--ds-space-3);
  border: 0;
  background: var(--ds-cta-soft);
  color: var(--ds-on-cta-soft);
  font-size: var(--ds-font-size-xs);
}
@media (any-hover: hover) {
  :where(html[data-visual="v5"]) .cs-open-tasks-chip:hover { background: var(--ds-cta-soft-hover); }
}

.cs-handle-actions { display: flex; flex-shrink: 0; align-items: center; gap: 0.15rem; }
.cs-handle-actions form { display: contents; }
.cs-handle-action {
  --hover-size: 0;
  position: relative;
  display: inline-grid; place-items: center; inline-size: 2rem; block-size: 2rem; padding: 0;
  border: 0; border-radius: 0.5rem; background: transparent; color: var(--txt-muted); cursor: pointer;
}
.cs-handle-action:hover { background: var(--bg-subtle); color: var(--txt); }
.cs-handle-action:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: 0; }
.cs-address__line { overflow-wrap: anywhere; }
.cs-address-missing-cep {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem;
  margin: 0 0 0.75rem; font-size: 0.8125rem; color: var(--txt-muted);
}
.cs-address-missing-cep svg { color: var(--color-alert); flex-shrink: 0; }
.cs-address-missing-cep a { color: var(--accent); font-weight: 600; }
.cs-address-missing-cep a:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: 0; border-radius: 0.25rem; }

.cs-join-choices { display: grid; gap: 0.5rem; }
.cs-join-choice {
  display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.75rem;
  border: 1px solid var(--border-strong); border-radius: 0.75rem; cursor: pointer;
}
.cs-join-choice input { --hover-size: 0; appearance: auto; flex-shrink: 0; inline-size: 1.1rem; block-size: 1.1rem; margin: 0; accent-color: var(--accent); opacity: 1; }
.cs-join-choice:hover { background: var(--bg-subtle); }
.cs-join-choice:has(:checked) { border-color: var(--accent); background: var(--accent-soft); }
.cs-join-choice:has(:focus-visible) { outline: 2px solid var(--ds-focus-ring); outline-offset: 0; }
.cs-join-choice input:focus { outline: none; box-shadow: none; }
.cs-join-rules { display: grid; gap: 0.5rem; margin: 0; padding-inline-start: 1.1rem; font-size: 0.875rem; color: var(--txt); list-style: disc; }
.cs-join-refused {
  display: flex; align-items: flex-start; gap: 0.5rem; margin: 0; padding: 0.75rem 1rem;
  border-radius: 0.75rem; background: var(--bg-subtle); color: var(--txt); font-size: 0.875rem;
}

/* The Chat room bubble (cs-msg--chat): the shell above, with the room's run, avatar, actions and smiley drawn by the browser. */
.cs-msg.cs-msg--chat {
  --chat-bubble: var(--color-surface);
  --chat-ink: var(--color-txt);
  flex-wrap: wrap;
  align-items: center;
  column-gap: 8px;
  row-gap: 0;
  margin-block-start: 0;
  padding-inline: 0.5rem;
  padding-block: 1px;
  animation: fadeUp 0.2s ease backwards;
}
/* The fragment is cached for everyone, so the side, the run and the list's end come from the room's script (messages_controller).
   On a reload the page paints while it is still arriving, before that script runs: until it has sorted a bubble, the bubble waits unpainted.
   The script sorts in ~0.3 s; should it never run, the bubble shows itself after 1 s, unsorted, rather than leave the room empty. */
[data-messages-target="messages"] .cs-msg--chat:not(.cs-msg--formatted) {
  visibility: hidden;
  animation: fadeUp 0.2s ease backwards, cs-msg-unsorted 0s 1s forwards;
}
@keyframes cs-msg-unsorted { to { visibility: visible; } }
.cs-msg.cs-msg--chat.cs-msg--me { --chat-bubble: var(--color-msg-me); --chat-ink: var(--color-msg-me-text); }
.cs-msg.cs-msg--chat.cs-msg--emoji { --chat-bubble: transparent; --chat-ink: var(--ds-text); }
.cs-msg.cs-msg--chat:not(.cs-msg--continued),
.cs-msg.cs-msg--chat.cs-msg--first-of-day,
.cs-msg.cs-msg--chat:has(#unread_separator) { margin-block-start: 8px; }
.cs-msg--chat:has([data-message-menu]:not([hidden])) { position: relative; z-index: 20; }

.cs-msg--chat > :is(.cs-unread-banner, .cs-msg__day-sep, .cs-msg__replies) { flex-basis: 100%; }
.cs-msg--chat > :is(.cs-unread-banner, .cs-msg__day-sep) { order: -2; }
.cs-msg--chat > .cs-msg__day-sep { display: none; }
.cs-msg--chat:has(.cs-msg__reaction:not([hidden])) > .cs-msg__replies { margin-block-start: calc(var(--reaction-size) - var(--reaction-overlap)); }
.cs-msg--chat.cs-msg--first-of-day > .cs-msg__day-sep { display: flex; }

.cs-msg--chat .cs-msg__contact-avatar { margin-inline-end: 0; }
.cs-msg--chat .cs-msg__contact-avatar:focus-visible { outline: 2px solid var(--ds-focus-ring) !important; outline-offset: 0; }
.cs-msg--chat.cs-msg--me > .cs-msg__contact-avatar { display: none; }
.cs-msg--chat.cs-msg--continued:not(.cs-msg--first-of-day):not(:has(#unread_separator)) > .cs-msg__contact-avatar { visibility: hidden; }

.cs-msg--chat .cs-msg__bubble { flex: 0 1 auto; min-inline-size: 0; }
.cs-msg.cs-msg--chat.cs-msg--me .cs-msg__bubble { margin-inline-end: 0; }
.cs-msg__bubble > turbo-frame { display: contents; }

.cs-msg--chat .cs-msg__sender,
:where(html[data-visual="v5"]) .cs-msg .cs-msg__sender {
  overflow: hidden;
  line-height: 1.2;
  text-overflow: ellipsis;
  text-decoration: none;
  white-space: nowrap;
}
.cs-msg--chat .cs-msg__sender strong { font-weight: inherit; }
/* v5: an unsaved number and its WhatsApp name share the one line, the name muted, as WhatsApp's groups. */
:where(html[data-visual="v5"]) .cs-msg .cs-msg__sender > :is(.cs-msg__sender-phone, .cs-msg__sender-profile) { display: inline; }
:where(html[data-visual="v5"]) .cs-msg .cs-msg__sender-profile:not(:empty) { margin-inline-start: var(--ds-space-2); color: var(--ds-text-muted); font-weight: var(--ds-weight-regular); }
.cs-msg--chat.cs-msg--me .cs-msg__sender,
.cs-msg--chat.cs-msg--continued:not(.cs-msg--first-of-day):not(:has(#unread_separator)) .cs-msg__sender { display: none; }

.cs-msg__room {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-1);
  margin-block-end: var(--ds-space-1);
  font-size: var(--ds-font-size-2xs);
  color: var(--ds-link);
  text-decoration: none;
}
.cs-msg--me .cs-msg__room { color: inherit; }
.cs-msg--chat .cs-msg__origin a:not(.cs-msg__sender) { color: inherit; text-decoration: none; }

.cs-msg--chat .cs-msg__indicators:not(:has(.ds-chip:not([hidden] .ds-chip))) { display: none; }

.cs-msg--chat .lexxy-content { line-height: var(--bubble-line-height); }
.cs-msg--chat .lexxy-content blockquote {
  margin: 2px 0 6px !important;
  padding-inline-start: 0.75em !important;
  border-inline-start: 2px solid var(--color-border) !important;
  font-style: italic;
  line-height: 1.4;
  opacity: 0.8;
}
.cs-msg--chat .lexxy-content blockquote p { margin: 0; }
.cs-msg--chat .lexxy-content blockquote :is(ul, ol) { margin: 2px 0; padding-inline-start: 1.2em; }
.cs-msg--chat.cs-msg--me .lexxy-content a:not(.mention):not(.ds-mention) { color: inherit; text-decoration: underline; }
.cs-msg--chat.cs-msg--me .lexxy-content code { background: color-mix(in oklch, currentColor 15%, transparent); color: inherit; }
.cs-msg--chat.cs-msg--me .lexxy-content blockquote {
  border-inline-start-color: color-mix(in oklch, currentColor 50%, transparent) !important;
  background: color-mix(in oklch, currentColor 10%, transparent);
  color: color-mix(in oklch, currentColor 75%, transparent);
  opacity: 1;
}
.cs-msg--chat.cs-msg--me .ds-mention { color: inherit; }

.cs-msg__threads-list { display: flex; flex-direction: column; }
a.cs-msg__threads { text-decoration: none; }
a.cs-msg__threads:hover .cs-msg__threads-count { text-decoration: underline; }

.cs-msg--chat .cs-msg__meta a { color: inherit; text-decoration: none; }
.cs-msg__time { white-space: nowrap; }

/* Four rungs, and only what is known: waiting to leave (the clock, about this device), then on the server, delivered, read. */
.cs-msg--chat :is(.cs-msg__clock, .cs-msg__check) { display: none; align-items: center; line-height: 1; }
.cs-msg--chat.cs-msg--me.message--pending .cs-msg__clock { display: inline-flex; }
.cs-msg--chat.cs-msg--me .cs-msg__check:not([hidden]) { display: inline-flex; }
.cs-msg--chat.cs-msg--me.message--pending .cs-msg__check,
.cs-msg--chat.cs-msg--me.message--failed :is(.cs-msg__clock, .cs-msg__check) { display: none; }
/* One drawing at a time; the selectors outweigh `.cs-msg__check svg`, which shows every icon in the check. */
.cs-msg__check:not(.cs-msg__check--delivered) .cs-msg__check-both,
.cs-msg__check.cs-msg__check--delivered .cs-msg__check-one { display: none; }

.cs-msg--chat.message--pending { opacity: 0.7; }
.cs-msg--chat.message--failed { opacity: 0.55; }
.cs-msg--chat.message--failed .cs-msg__bubble { outline: 1px dashed var(--color-negative); }

/* Beside the bubble, on its outer side (right of a received one, left of mine), as WhatsApp Web: the reply, the smiley and the menu from the bubble out, centred on the bubble
   and out of the way until the message is pointed at. Nothing sits over the text or the picture; the menu card hangs from the "…".
   Each is a 30 px circle round a 20 px icon, a notch above the small icon button; the negative margin keeps the row as tall as the text. */
.cs-msg__side {
  --side-size: 30px;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 2px;
  margin-block: calc((24px - var(--side-size)) / 2 - 6px);
  line-height: 0;
}
.cs-msg--chat.cs-msg--me > .cs-msg__side,
:where(html[data-visual="v5"]) .cs-msg--me > .cs-msg__side { order: -1; flex-direction: row-reverse; }
.cs-msg__side > .cs-btn.cs-btn--icon.cs-btn--small { inline-size: var(--side-size); block-size: var(--side-size); padding: 0; text-decoration: none; }
.cs-msg__side > .cs-btn--icon svg { inline-size: calc(var(--side-size) * 2 / 3); block-size: calc(var(--side-size) * 2 / 3); }
.cs-msg__side .cs-msg__menu-card form { display: block; }
.cs-msg--chat:has(.msg-edit) > .cs-msg__side { display: none; }

@media (hover: hover) {
  .cs-msg--chat > .cs-msg__side,
  :where(html[data-visual="v5"]) .cs-msg > .cs-msg__side { opacity: 0; transition: opacity 100ms; }
  .cs-msg--chat:hover > .cs-msg__side,
  .cs-msg--chat:focus-within > .cs-msg__side,
  :where(html[data-visual="v5"]) .cs-msg:is(:hover, :focus-within) > .cs-msg__side,
  .cs-msg__side:has([data-message-menu]:not([hidden]), [aria-expanded="true"]) { opacity: 1; }
}

/* The Atendimento draws the same side in both visuals (its bubble is cached and broadcast), and only v5 shows it: there
   the arrow and the smiley inside the bubble give way to it, 8 px from the bubble as the Chat's. The album keeps its
   arrow on each photo (each one is deleted on its own) and has no side. */
:root:not([data-visual="v5"]) .cs-msg__side { display: none; }
:where(html[data-visual="v5"]) .cs-msg:not(.cs-msg--chat) { --cs-msg-gap: 8px; }
:where(html[data-visual="v5"]) .cs-msg:has(> .cs-msg__side) :is(.cs-msg__menu-trigger, .cs-msg__react-trigger) { display: none; }
/* The wrapper still paints the fade that sat behind the arrow, and the sent and note bubbles paint it from rules that
   outweigh any v5 one: with the arrow gone the wrapper shows nothing at all, or its fade covers the end of the first line. */
:where(html[data-visual="v5"]) .cs-msg:has(> .cs-msg__side) .cs-msg__menu { visibility: hidden; }
.cs-msg:has(.cs-msg__menu[data-customer-support--message-menu-reactable-value="false"]) > .cs-msg__side [data-reaction-trigger],
.cs-msg:has(.cs-msg__menu[data-customer-support--message-menu-replyable-value="false"]) > .cs-msg__side > .cs-msg__reply,
.cs-chat-pane:not(:has(#composer [data-customer-support--composer-target="replyField"])) .cs-msg__side > .cs-msg__reply,
.cs-selection-mode .cs-msg__side { display: none; }

/* Nothing hovers on a touch screen: the smiley and the menu stay in reach beside the bubble, the reply waits in the menu, and the text stays selectable. */
@media (hover: none) {
  .cs-msg--chat .cs-msg__bubble { -webkit-touch-callout: default; -webkit-user-select: text; user-select: text; }
  .cs-msg__side > .cs-msg__reply { display: none; }
}

.cs-msg--chat .cs-msg__bubble > .cs-msg__reactions--group {
  position: absolute;
  inset-block-end: 0;
  translate: 0 calc(100% - var(--reaction-overlap));
}

/* A picture keeps the box the server reserved for it, so nothing jumps when it loads; a file is the Atendimento's row. */
.cs-msg--chat .cs-msg__media { position: relative; max-inline-size: 100%; margin-inline: auto; }
/* As WhatsApp's: one width for every picture, and a shape held between 3:4 and 16:9; the rest is cropped from the centre, and the viewer shows it whole. */
.cs-msg--chat .cs-msg__media:where([style*="--media-ratio"]) {
  inline-size: min(var(--media-width), var(--ds-media-max-inline));
  aspect-ratio: clamp(var(--ds-media-ratio-min), var(--media-ratio), var(--ds-media-ratio-max));
}
.cs-msg__media-link { position: relative; display: flex; inline-size: 100%; block-size: 100%; }
.cs-msg--chat .cs-msg__media :is(img, video).message__attachment {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  max-block-size: none;
  object-fit: cover;
  border-radius: 0;
}
.cs-msg__media-tag { position: absolute; inset-block-start: var(--ds-space-2); inset-inline-end: var(--ds-space-2); pointer-events: none; }
.cs-msg--chat .cs-msg__file-download,
:where(html[data-visual="v5"]) .cs-msg .cs-msg__file-actions .cs-msg__file-download {
  --hover-size: 0;
  padding: 4px;
  border: 0;
  border-radius: var(--ds-radius-full);
  background: none;
  color: inherit;
  cursor: pointer;
}
.cs-msg--chat .cs-msg__file-download:hover,
:where(html[data-visual="v5"]) .cs-msg .cs-msg__file-actions .cs-msg__file-download:hover { background: color-mix(in oklch, currentColor 10%, transparent); color: inherit; }
:root:not([data-visual="v5"]) .cs-msg.cs-msg--chat .cs-msg__bubble:has(.cs-msg__media) { max-inline-size: var(--bubble-width); }

/* A picture or a video sits inside its bubble, as WhatsApp's: the bubble's own colour frames it (--ds-media-frame) and the picture's corners follow the bubble's from
   inside (its radius less the frame, the tail's included); the time and ticks sit over the picture's foot, and the smiley, reply and menu beside the bubble
   (.cs-msg__side), as for text. What else the bubble says (sender, labels, replies) keeps the text's inset, counted from the frame. */
.cs-msg--chat .cs-msg__bubble:has(.cs-msg__media) { padding: var(--ds-media-frame); }
.cs-msg--chat .cs-msg__bubble .cs-msg__media { overflow: hidden; margin: 0; border-radius: calc(var(--bubble-radius) - var(--ds-media-frame)); }
html[data-visual="v5"] .cs-msg.cs-msg--chat.cs-msg--tail:not(.cs-msg--me) .cs-msg__bubble .cs-msg__media { border-start-start-radius: calc(4px - var(--ds-media-frame)); }
html[data-visual="v5"] .cs-msg.cs-msg--chat.cs-msg--tail.cs-msg--me .cs-msg__bubble .cs-msg__media { border-start-end-radius: calc(4px - var(--ds-media-frame)); }
.cs-msg--chat .cs-msg__bubble:has(.cs-msg__media) :is(.cs-msg__sender, .cs-msg__room, .cs-msg__indicators) {
  padding: calc(6px - var(--ds-media-frame)) calc(9px - var(--ds-media-frame)) var(--ds-space-1) calc(7px - var(--ds-media-frame));
}
.cs-msg--chat .cs-msg__bubble:has(.cs-msg__media) .cs-msg__threads-list:has(.cs-msg__threads) {
  padding: var(--ds-space-1) calc(9px - var(--ds-media-frame)) calc(6px - var(--ds-media-frame)) calc(7px - var(--ds-media-frame));
}

.cs-msg--chat .cs-msg__bubble:has(.cs-msg__media):not(:has(.cs-msg__threads)) .cs-msg__meta {
  position: absolute;
  inset-block-end: calc(var(--ds-media-frame) + var(--ds-space-1));
  inset-inline-end: calc(var(--ds-media-frame) + var(--ds-space-1));
  z-index: 1;
  margin: 0;
  padding: 2px var(--ds-space-2);
  border-radius: var(--ds-radius-full);
  background: var(--ds-media-badge);
  pointer-events: none;
}
:root .cs-msg.cs-msg--chat .cs-msg__bubble:has(.cs-msg__media):not(:has(.cs-msg__threads)) :is(.cs-msg__meta, .cs-msg__time, .cs-msg__clock, .cs-msg__check:not(.cs-msg__check--read)) { color: var(--ds-on-media); }
.cs-msg--chat .cs-msg__bubble:has(.cs-msg__media):not(:has(.cs-msg__threads)) .cs-msg__meta a { pointer-events: auto; }

/* The video's cover: the play in the middle and the length at the foot, on the left, clear of the time. */
.cs-msg--chat .cs-msg__media-link .cs-msg__media-play { pointer-events: none; }
.cs-msg__media-length {
  position: absolute;
  inset-block-end: var(--ds-space-1);
  inset-inline-start: var(--ds-space-1);
  padding: 2px var(--ds-space-2);
  border-radius: var(--ds-radius-full);
  background: var(--ds-media-badge);
  color: var(--ds-on-media);
  font-size: 11px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

/* The Atendimento's picture and video in v5, as the Chat's above: one width for every picture and a shape held between 3:4 and 16:9, cropped
   from the centre; the bubble's colour frames it by 3 px with the corners followed from inside; the time and ticks in a pill over the foot
   when there is no caption, and the play only on the cover, with the length. Its markup differs from the Chat's (the link is the media box,
   the img or video sits in it), so the rules are its own; the album keeps its grid. */
:where(html[data-visual="v5"]) .cs-msg:not(.cs-msg--chat, .cs-msg--album) .cs-msg__bubble:has(> :is(.cs-msg__media--image, .cs-msg__media--video)) {
  max-inline-size: none;
  padding: var(--ds-media-frame);
}
:where(html[data-visual="v5"]) .cs-msg:not(.cs-msg--chat) .cs-msg__bubble > :is(.cs-msg__media--image, .cs-msg__media--video) {
  display: block;
  inline-size: 320px;
  max-inline-size: 100%;
  min-block-size: 0;
  max-block-size: none;
  margin: 0;
  overflow: hidden;
  border-radius: calc(var(--bubble-radius) - var(--ds-media-frame));
}
:where(html[data-visual="v5"]) .cs-msg:not(.cs-msg--chat) .cs-msg__bubble > :is(.cs-msg__media--image, .cs-msg__media--video):where([style*="--media-ratio"]) {
  inline-size: min(var(--media-width), var(--ds-media-max-inline));
  aspect-ratio: clamp(var(--ds-media-ratio-min), var(--media-ratio), var(--ds-media-ratio-max));
}
:where(html[data-visual="v5"]) .cs-msg:not(.cs-msg--chat) .cs-msg__bubble > :is(.cs-msg__media--image, .cs-msg__media--video) > :is(img, video) {
  inline-size: 100%;
  block-size: 100%;
  max-block-size: none;
  object-fit: cover;
  border-radius: 0;
}
:where(html[data-visual="v5"]) .cs-msg.cs-msg--tail:not(.cs-msg--chat, .cs-msg--me) .cs-msg__bubble > :is(.cs-msg__media--image, .cs-msg__media--video) { border-start-start-radius: calc(4px - var(--ds-media-frame)); }
:where(html[data-visual="v5"]) .cs-msg.cs-msg--tail.cs-msg--me:not(.cs-msg--chat) .cs-msg__bubble > :is(.cs-msg__media--image, .cs-msg__media--video) { border-start-end-radius: calc(4px - var(--ds-media-frame)); }
/* What else the bubble says keeps the text's inset, counted from the frame. */
:where(html[data-visual="v5"]) .cs-msg:not(.cs-msg--chat) .cs-msg__bubble:has(> :is(.cs-msg__media--image, .cs-msg__media--video)) > :not(.cs-msg__media, .cs-msg__menu, .cs-msg__react-trigger, .cs-msg__reactions) {
  padding-inline: calc(7px - var(--ds-media-frame)) calc(9px - var(--ds-media-frame));
}
:where(html[data-visual="v5"]) .cs-msg:not(.cs-msg--chat) .cs-msg__bubble:has(> :is(.cs-msg__media--image, .cs-msg__media--video)) > .cs-msg__body { padding-block-start: var(--ds-space-1); }
:where(html[data-visual="v5"]) .cs-msg:not(.cs-msg--chat) .cs-msg__bubble:has(> :is(.cs-msg__media--image, .cs-msg__media--video)) > .cs-msg__meta:last-child { padding-block-end: calc(6px - var(--ds-media-frame)); }
:where(html[data-visual="v5"]) .cs-msg:not(.cs-msg--chat) .cs-msg__bubble:has(> :is(.cs-msg__media--image, .cs-msg__media--video)):not(:has(> .cs-msg__body)) > .cs-msg__meta {
  position: absolute;
  inset-block-end: calc(var(--ds-media-frame) + var(--ds-space-1));
  inset-inline-end: calc(var(--ds-media-frame) + var(--ds-space-1));
  z-index: 1;
  display: flex;
  margin: 0;
  padding: 2px var(--ds-space-2);
  border-radius: var(--ds-radius-full);
  background: var(--ds-media-badge);
  pointer-events: none;
}
:where(html[data-visual="v5"]) .cs-msg:not(.cs-msg--chat) .cs-msg__bubble:has(> :is(.cs-msg__media--image, .cs-msg__media--video)):not(:has(> .cs-msg__body)) > .cs-msg__meta :is(time, .cs-msg__time, .cs-msg__check:not(.cs-msg__check--read)) { color: var(--ds-on-media); }
:where(html[data-visual="v5"]) .cs-msg:not(.cs-msg--chat) .cs-msg__media--video .cs-msg__media-play { pointer-events: none; }

/* A file sits in its bubble as a picture does, in the Chat and in the Atendimento: the same thin frame of the bubble's colour
   (--ds-media-frame) around the card, the card's corners following the bubble's from inside (the tail's too), as wide as a
   picture, and the time under it with the text's inset counted from the frame. */
.cs-msg--chat .cs-msg__bubble:has(.cs-msg__file),
:where(html[data-visual="v5"]) .cs-msg:not(.cs-msg--chat) .cs-msg__bubble:has(> .cs-msg__file) { padding: var(--ds-media-frame); }
.cs-msg--chat .cs-msg__bubble:has(.cs-msg__file) { inline-size: calc(var(--ds-media-max-inline) + 2 * var(--ds-media-frame)); max-inline-size: 100%; }
.cs-msg--chat .cs-msg__bubble .cs-msg__file,
:where(html[data-visual="v5"]) .cs-msg:not(.cs-msg--chat) .cs-msg__bubble > .cs-msg__file {
  inline-size: 100%;
  margin: 0;
  border-radius: calc(var(--bubble-radius) - var(--ds-media-frame));
}
html[data-visual="v5"] .cs-msg.cs-msg--tail:not(.cs-msg--me) .cs-msg__bubble .cs-msg__file { border-start-start-radius: calc(4px - var(--ds-media-frame)); }
html[data-visual="v5"] .cs-msg.cs-msg--tail.cs-msg--me .cs-msg__bubble .cs-msg__file { border-start-end-radius: calc(4px - var(--ds-media-frame)); }
.cs-msg--chat .cs-msg__bubble:has(.cs-msg__file) :is(.cs-msg__sender, .cs-msg__room, .cs-msg__indicators) {
  padding: calc(6px - var(--ds-media-frame)) calc(9px - var(--ds-media-frame)) var(--ds-space-1) calc(7px - var(--ds-media-frame));
}
.cs-msg--chat .cs-msg__bubble:has(.cs-msg__file) .cs-msg__threads-list:has(.cs-msg__threads) { padding-inline: calc(7px - var(--ds-media-frame)) calc(9px - var(--ds-media-frame)); }
.cs-msg--chat .cs-msg__bubble:has(.cs-msg__file) .cs-msg__meta {
  margin: 0;
  padding: var(--ds-space-1) calc(9px - var(--ds-media-frame)) calc(6px - var(--ds-media-frame)) calc(7px - var(--ds-media-frame));
}
:where(html[data-visual="v5"]) .cs-msg:not(.cs-msg--chat) .cs-msg__bubble:has(> .cs-msg__file) > :not(.cs-msg__file, .cs-msg__menu, .cs-msg__react-trigger, .cs-msg__reactions) {
  padding-inline: calc(7px - var(--ds-media-frame)) calc(9px - var(--ds-media-frame));
}
:where(html[data-visual="v5"]) .cs-msg:not(.cs-msg--chat) .cs-msg__bubble:has(> .cs-msg__file) > .cs-msg__body { padding-block-start: var(--ds-space-1); }
:where(html[data-visual="v5"]) .cs-msg:not(.cs-msg--chat) .cs-msg__bubble:has(> .cs-msg__file) > .cs-msg__meta {
  float: none;
  display: flex;
  justify-content: flex-end;
  margin: 0;
  padding-block: var(--ds-space-1) calc(6px - var(--ds-media-frame));
}
:where(html[data-visual="v5"]) .cs-msg:not(.cs-msg--chat) .cs-msg__bubble:has(> .cs-msg__file) > .cs-msg__body + .cs-msg__meta { padding-block-start: 0; }

/* A voice grows into the row up to the player's width, so a narrow screen never wraps it under the avatar. */
.cs-msg--chat .cs-msg__bubble:has(.cs-voice),
:where(html[data-visual="v5"]) .cs-msg .cs-msg__bubble:has(.cs-voice) { flex: 1 1 0; max-inline-size: 344px; }
.cs-msg--chat.cs-msg--me .cs-voice__play,
:where(html[data-visual="v5"]) .cs-msg.cs-msg--me:not(.cs-msg--note) .cs-voice__play { color: inherit; background: currentColor; }
.cs-msg--chat.cs-msg--me .cs-voice__play .cs-voice__icon,
:where(html[data-visual="v5"]) .cs-msg.cs-msg--me:not(.cs-msg--note) .cs-voice__play .cs-voice__icon { color: var(--cs-bubble-bg); }
.cs-msg--chat.cs-msg--me :is(.cs-voice__wave, .cs-voice__time),
:where(html[data-visual="v5"]) .cs-msg.cs-msg--me:not(.cs-msg--note) :is(.cs-voice__wave, .cs-voice__time) { color: inherit; }
.cs-msg__transcript {
  margin-block-start: var(--ds-space-2);
  padding-block-start: var(--ds-space-2);
  border-block-start: 1px solid color-mix(in oklab, currentColor 15%, transparent);
  font-size: 0.9em;
  white-space: pre-wrap;
  opacity: 0.8;
}

/* Editing takes the bubble's place, as WhatsApp does: the pill is drawn on the room, not inside a bubble. */
html:root .cs-msg.cs-msg--chat .cs-msg__bubble:has(.msg-edit) {
  flex: 1;
  max-inline-size: none;
  padding: 0;
  background: none;
  box-shadow: none;
}
html:root .cs-msg.cs-msg--chat .cs-msg__bubble:has(.msg-edit)::before { content: none; }

/* Without the v5 key the room keeps its own colors: the surface, the account's color for what I sent, no shadow. */
:root:not([data-visual="v5"]) .cs-msg.cs-msg--chat .cs-msg__bubble {
  background: var(--chat-bubble);
  --cs-bubble-bg: var(--chat-bubble);
  color: var(--chat-ink);
  box-shadow: none;
}
:root:not([data-visual="v5"]) .cs-msg.cs-msg--chat.cs-msg--tail .cs-msg__bubble::before { border-top-color: var(--chat-bubble); filter: none; }
:root:not([data-visual="v5"]) .cs-msg.cs-msg--chat .cs-msg__sender { color: var(--ds-on-cta-soft); }
:root:not([data-visual="v5"]) .cs-msg.cs-msg--chat .cs-msg__time { color: var(--ds-text-muted); }
:root:not([data-visual="v5"]) .cs-msg.cs-msg--chat.cs-msg--me .cs-msg__time { color: color-mix(in oklch, var(--chat-ink) 80%, transparent); }
:root:not([data-visual="v5"]) .cs-msg.cs-msg--chat :is(.cs-msg__clock, .cs-msg__check) { color: var(--txt-muted); }
:root:not([data-visual="v5"]) .cs-msg.cs-msg--chat.cs-msg--me :is(.cs-msg__clock, .cs-msg__check) { color: color-mix(in oklch, var(--chat-ink) 70%, transparent); }
:root:not([data-visual="v5"]) .cs-msg.cs-msg--chat.cs-msg--me .cs-msg__check.cs-msg__check--read { color: var(--msg-me-tick-read); }

/* The Chat's variations of the bubble (/design-system/atendimento-bolha#message_bubble). Last in the file, so they win over the theme and v5 skins. */
:root .cs-msg.cs-msg--emoji .cs-msg__bubble,
:root[data-visual] .cs-msg.cs-msg--emoji.cs-msg--me .cs-msg__bubble {
  padding-inline: 0;
  background: transparent;
  --cs-bubble-bg: transparent;
  box-shadow: none;
  color: var(--ds-text);
}
:root .cs-msg.cs-msg--emoji .cs-msg__bubble::before { content: none; }
.cs-msg--emoji .cs-msg__body,
.cs-msg--chat.cs-msg--emoji .lexxy-content { font-size: 2.4em; line-height: 1.4; }

:root .cs-msg.cs-msg--mentioned:not(.cs-msg--me) .cs-msg__bubble {
  background: var(--ds-cta-soft);
  --cs-bubble-bg: var(--ds-cta-soft);
  color: var(--ds-on-cta-soft);
}
:root .cs-msg.cs-msg--mentioned.cs-msg--tail:not(.cs-msg--me) .cs-msg__bubble::before { border-top-color: var(--ds-cta-soft); }

/* A thread's parent and a message away from its room stand alone: no tail. */
.cs-msg--parent { margin-block-end: var(--ds-space-1); }
/* The parent always says who wrote it, face and name, even when it is mine (the face then sits on the outer side, past the bubble). */
.cs-msg--chat.cs-msg--parent.cs-msg--me > .cs-msg__contact-avatar { display: block; order: 1; }
.cs-msg.cs-msg--chat.cs-msg--parent.cs-msg--me .cs-msg__sender { display: block; }
.cs-msg.cs-msg--chat.cs-msg--me .cs-msg__sender { text-align: end; }
/* Under the parent: the count of replies once one follows it, the empty state until then. Decided by the list itself, so the first reply to arrive swaps them. */
.cs-msg--parent > :is(.cs-msg__no-replies, .cs-msg__replies) { flex-basis: 100%; max-inline-size: none; order: 2; }
.cs-msg--parent:has(~ .cs-msg) > .cs-msg__no-replies,
.cs-msg--parent:not(:has(~ .cs-msg)) > .cs-msg__replies { display: none; }
:root .cs-msg:is(.cs-msg--parent, .cs-msg--out-of-room) .cs-msg__bubble { border-radius: var(--bubble-radius); }
:root .cs-msg:is(.cs-msg--parent, .cs-msg--out-of-room) .cs-msg__bubble::before { content: none; }
/* The search page is one reading column: a message found there spans it, like the field and the tabs above. */
/* Found messages stand apart from each other, each with its author's face beside the bubble, as in the room. */
.cs-msg--out-of-room { gap: var(--ds-space-2); }
.cs-msg--out-of-room > .cs-msg__contact-avatar { margin-inline-end: 0; }
.cs-msg--out-of-room + .cs-msg--out-of-room { margin-block-start: var(--ds-space-3); }
.cs-search-results .cs-msg--out-of-room { padding-inline: 0; }
.cs-search-results .cs-msg--out-of-room .cs-msg__bubble { flex: 1 1 auto; min-inline-size: 0; max-inline-size: 100%; }

.cs-msg__origin,
.cs-msg__indicators,
.cs-msg__threads {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-space-1) var(--ds-space-2);
  font-size: var(--ds-font-size-xs);
  color: var(--ds-text-muted);
}
.cs-msg__origin { margin-block-end: var(--ds-space-1); }
.cs-msg__origin-author { font-weight: var(--ds-weight-semibold); color: var(--ds-text); }
.cs-msg__indicators { margin-block-end: var(--ds-space-1); }
/* The bookmark and answered-by wrappers are there for the streams to replace; the chip inside is the flex item, so an empty wrapper adds no gap. */
.cs-msg__indicators span:not(.ds-chip, .ds-chip *, [hidden]) { display: contents; }
.cs-msg__threads { margin-block-start: var(--ds-space-2); }
.cs-msg__threads-count { font-weight: var(--ds-weight-semibold); color: var(--ds-link); text-decoration: none; }
.cs-msg__threads-count:hover { text-decoration: underline; }
.cs-msg__threads-last { font-size: var(--ds-font-size-2xs); }
.cs-msg--me :is(.cs-msg__origin, .cs-msg__indicators, .cs-msg__threads, .cs-msg__origin-author, .cs-msg__threads-count) { color: inherit; }

/* A message shown away from its room (Início, inbox, search): who, which room, when, and the jump back to it. */
.cs-msg__origin-jump {
  display: inline-block;
  margin-block-start: var(--ds-space-1);
  font-size: var(--ds-font-size-xs);
  font-weight: var(--ds-weight-semibold);
  color: var(--ds-link);
  text-decoration: none;
}
.cs-msg__origin-jump:hover { text-decoration: underline; }

/* v5: the Atendimento's older menus wear the ds-menu item: one height and type, the hover pill only where
   there is hover, the chosen on the tonal fill, the shell's own breath and its separator. */
:where(html[data-visual="v5"]) :is(.cs-card__menu-item, .cs-list-filter__option, .cs-closing-status-filter__item) {
  min-block-size: var(--ds-menu-item-height);
  font-size: var(--ds-font-size-compact);
  font-weight: var(--ds-weight-medium);
}
:where(html[data-visual="v5"]) .cs-card__menu-item--danger { color: var(--ds-negative); }
html[data-visual="v5"] .cs-closing-status-filter__item:is(.is-selected, [aria-current="true"]) {
  background: var(--ds-cta-soft);
  color: var(--ds-on-cta-soft);
}
@media not all and (any-hover: hover) {
  html[data-visual="v5"] :is(.cs-card__menu-item, .cs-list-filter__option, .cs-closing-status-filter__item, .cs-menu__item):not(.is-selected, [aria-current="true"]):hover { background: transparent; }
}
:where(html[data-visual="v5"]) :is(.cs-list-picker__menu, .cs-people-filter__menu) { padding: var(--ds-menu-inset); }
:where(html[data-visual="v5"]) :is(.cs-card__lists-frame, .cs-list-picker__new-wrap) { border-block-start-color: var(--ds-menu-separator); }

/* v5: the card's menu is the ds-menu shell, slid back inside by the popup; its lists are a ds-menu__section of
   compact choices, under the menu's separator, with "+ Nova lista" as the last item under another. */
/* One width whether the lists' panel is open or not, so "Ver mais" never makes it jump sideways, and room for the longest list
   name whole beside its check and pencil, as in the +N dropdown. */
html[data-visual="v5"] .cs-card__menu-list { inline-size: min(340px, 100vw - 32px); min-inline-size: 0; max-inline-size: none; translate: var(--shift-inline, 0) 0; }
html[data-visual="v5"] .cs-card__menu-item { gap: var(--ds-space-2); padding-inline: var(--ds-space-3); }
html[data-visual="v5"] :is(.cs-card__lists-frame, .cs-card__list-new) { position: relative; margin-block-start: calc(var(--ds-menu-inset) * 2 + 1px); padding-block: 0; border-block-start: 0; }
html[data-visual="v5"] :is(.cs-card__lists-frame, .cs-card__list-new)::before { content: ""; position: absolute; inset-inline: var(--ds-space-3); inset-block-start: calc(-1 * var(--ds-menu-inset) - 1px); block-size: 1px; background: var(--ds-menu-separator); }
html[data-visual="v5"] :is(.cs-card__list-new, .cs-card__list-manage) { border-radius: var(--ds-menu-item-radius); color: var(--ds-text-secondary); }
html[data-visual="v5"] .cs-card__lists-empty { padding: var(--ds-space-2) var(--ds-space-3); font-size: var(--ds-font-size-compact); color: var(--ds-text-muted); }
/* With the lists' panel open the card's menu is the panel: pin, read and block step aside, and so does the separator above it. */
.cs-card__menu-list:has(.ds-menu__panel[data-open]) > form { display: none; }
html[data-visual="v5"] .cs-card__menu-list:has(.ds-menu__panel[data-open]) > .cs-card__lists-frame { margin-block-start: 0; }
html[data-visual="v5"] .cs-card__menu-list:has(.ds-menu__panel[data-open]) > .cs-card__lists-frame::before { content: none; }