/* Atendimento channels: the list, the connection cards and the onboarding screens. */

/* Layout of the module in both looks: the channel row is a link, and the photo's camera sits beside its button. */
.cs-channel-row { color: inherit; text-decoration: none; }
.cs-channel-row__chevron { display: inline-grid; place-items: center; flex-shrink: 0; color: var(--ds-text-muted); }

.cs-conn-id__portrait { position: relative; display: inline-block; }

/* v5 list: the connection icon as a 40 px avatar on a quiet circle. A second connection rides the first one's corner as a
   22 px badge, so every name starts at the same x (side by side, a canal with two pushed its name 26 px right). */
:where(html[data-visual="v5"]) .cs-channel-row { gap: var(--ds-space-3); }
:where(html[data-visual="v5"]) .cs-channel-row .cs-channel-card__avatar { position: relative; inline-size: 40px; }
:where(html[data-visual="v5"]) .cs-channel-row .cs-channel-card__avatar-icon {
  inline-size: 40px;
  block-size: 40px;
  background: var(--ds-fill);
  box-shadow: none;
}
:where(html[data-visual="v5"]) .cs-channel-row .cs-channel-card__avatar-icon:not(:first-child) {
  position: absolute;
  inset-block-end: -3px;
  inset-inline-end: -5px;
  inline-size: 22px;
  block-size: 22px;
  margin: 0;
  outline: 2px solid var(--ds-bg-pure);
}
:where(html[data-visual="v5"]) .cs-channel-row .cs-channel-card__avatar-icon:not(:first-child) svg { inline-size: 14px; block-size: 14px; }
:where(html[data-visual="v5"]) .cs-channel-row:hover .cs-channel-card__avatar-icon:not(:first-child) { outline-color: var(--ds-fill-hover); }

/* v5: a connection's state is the small seal, the one a list line and a name line carry (20 px, 12 px), in the list and
   beside the connection's name. */
:where(html[data-visual="v5"]) :is(.cs-channel-row, .cs-conn-card__status) .cs-status-badge {
  gap: 4px;
  block-size: var(--ds-status-height-sm);
  padding: 0 8px;
  font-size: var(--ds-status-font-sm);
}
:where(html[data-visual="v5"]) :is(.cs-channel-row, .cs-conn-card__status) .cs-status-badge::before { inline-size: 6px; block-size: 6px; }

/* v5 connection card: the strip and the group names are named as the page's sections, in the info title and plain case;
   lines in the scale's border. */
:where(html[data-visual="v5"]) .cs-conn-cards { display: flex; flex-direction: column; gap: var(--ds-space-6); }
:where(html[data-visual="v5"]) :is(.cs-conn__kind, .cs-conn-card__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-conn__strip { padding-inline: var(--ds-space-2); }
:where(html[data-visual="v5"]) .cs-conn__logo { color: var(--ds-text); }
:where(html[data-visual="v5"]) .cs-conn__mode { background: var(--ds-fill); color: var(--ds-text-secondary); }
:where(html[data-visual="v5"]) .cs-conn__sync-when { font-size: var(--ds-font-size-2xs); color: var(--ds-text-muted); }
:where(html[data-visual="v5"]) .cs-conn-card__body { padding: var(--ds-space-6); gap: var(--ds-space-4); }
:where(html[data-visual="v5"]) .cs-conn-id__name { font-size: var(--ds-font-size-base); font-weight: var(--ds-weight-medium); }
:where(html[data-visual="v5"]) .cs-conn-id .cs-conn-card__number { font-size: var(--ds-font-size-sm); color: var(--ds-text-muted); }
:where(html[data-visual="v5"]) .cs-conn-id__photo--empty { background: var(--ds-fill); color: var(--ds-text-muted); }
:where(html[data-visual="v5"]) :is(.cs-conn-adv, .cs-conn-danger) { border-block-start-color: var(--ds-border); }
:where(html[data-visual="v5"]) .cs-conn-adv { padding: var(--ds-space-3) var(--ds-space-6) var(--ds-space-4); }
:where(html[data-visual="v5"]) .cs-conn-danger { padding: var(--ds-space-4) var(--ds-space-6); }
:where(html[data-visual="v5"]) .cs-conn-adv__body .cs-conn-danger { padding-inline: 0; }
:where(html[data-visual="v5"]) .cs-conn-adv__summary { border-radius: var(--ds-radius-full); color: var(--ds-text-secondary); font-size: var(--ds-font-size-sm); font-weight: var(--ds-weight-medium); }
@media (any-hover: hover) {
  :where(html[data-visual="v5"]) .cs-conn-adv__summary:hover { background-color: var(--ds-fill-hover); }
}
:where(html[data-visual="v5"]) :is(.cs-conn-danger__title) { font-size: var(--ds-font-size-sm); font-weight: var(--ds-weight-medium); }
:where(html[data-visual="v5"]) :is(.cs-conn-danger__hint, .cs-conn-state__stamp) { font-size: var(--ds-font-size-2xs); color: var(--ds-text-muted); }

/* v5: every name-and-value line of the card reads as a ds-facts row (state, import, identifiers, credential). */
:where(html[data-visual="v5"]) :is(.cs-conn-state__row, .cs-conn-ident__row, .cs-conn-cred, .cs-conn-failures__row) {
  padding-block: 0.75rem;
  font-size: var(--ds-font-size-sm);
  color: var(--ds-text-muted);
}
:where(html[data-visual="v5"]) :is(.cs-conn-state__row, .cs-conn-ident__row, .cs-conn-cred, .cs-conn-failures__row) + :is(.cs-conn-state__row, .cs-conn-ident__row, .cs-conn-cred, .cs-conn-failures__row) {
  border-block-start: 1px solid var(--ds-border);
}
:where(html[data-visual="v5"]) .cs-conn-state__row strong { font-weight: var(--ds-weight-regular); color: var(--ds-text); }
:where(html[data-visual="v5"]) .cs-conn-state__row strong.cs-conn-state__quiet { font-weight: var(--ds-weight-regular); color: var(--ds-text-muted); }
:where(html[data-visual="v5"]) :is(.cs-conn-state__bad, .cs-conn-state__row strong.cs-conn-state__bad, .cs-conn-failures__count) { color: var(--ds-negative); }
:where(html[data-visual="v5"]) .cs-conn-ident__row { margin-inline: 0; padding-inline: 0; border-radius: 0; }
:where(html[data-visual="v5"]) .cs-conn-ident__row:hover { background: none; }
:where(html[data-visual="v5"]) :is(.cs-conn-ident__label, .cs-conn-cred__label) { font-size: var(--ds-font-size-sm); color: var(--ds-text-muted); }
:where(html[data-visual="v5"]) .cs-conn-ident__value { font-family: var(--ds-font-mono); font-size: var(--ds-font-size-xs); color: var(--ds-text); }
:where(html[data-visual="v5"]) .cs-conn-ident__copy { border-radius: var(--ds-radius-full); color: var(--ds-text-muted); }
:where(html[data-visual="v5"]) .cs-conn-ident__copy:hover { background: var(--ds-fill-hover); color: var(--ds-text); }
:where(html[data-visual="v5"]) .cs-conn-cred { margin-block-start: 0; align-items: center; }
:where(html[data-visual="v5"]) .cs-conn-cred__value { font-size: var(--ds-font-size-sm); font-weight: var(--ds-weight-semibold); color: var(--ds-text); }
:where(html[data-visual="v5"]) .cs-conn-cred__sub { font-size: var(--ds-font-size-2xs); color: var(--ds-text-muted); }
:where(html[data-visual="v5"]) :is(.cs-conn-grp__head .cs-btn--quiet, .cs-conn-cred__action.cs-btn--quiet) { color: var(--ds-text); }
:where(html[data-visual="v5"]) :is(.cs-conn-grp__head .cs-btn--quiet, .cs-conn-cred__action.cs-btn--quiet):hover { background-color: var(--ds-fill-hover); color: var(--ds-text); }

/* v5 app swap dialog: the "when" box loses its red stripe and the boxes sit on the quiet fill. */
:where(html[data-visual="v5"]) .cs-conn-swap__when {
  border: 0;
  border-radius: var(--ds-radius-lg);
  background: var(--ds-fill);
}
:where(html[data-visual="v5"]) .cs-conn-swap__when-title svg { color: var(--ds-negative); }
:where(html[data-visual="v5"]) .cs-conn-swap__stays { border-radius: var(--ds-radius-lg); background: var(--ds-fill); }
:where(html[data-visual="v5"]) .cs-conn-swap__foot { border-block-start-color: var(--ds-border); }
:where(html[data-visual="v5"]) .cs-conn-swap__actions .cs-btn { border-radius: var(--ds-radius-full); font-size: var(--ds-font-size-sm); }

/* A provider that is not set up says so in a muted line where its button would be. */
.cs-chanpicker-card__unavailable { font-size: var(--ds-font-size-xs); color: var(--ds-text-muted); }

/* v5 choice of channel and onboarding: the title in the body's weight, muted notes in the label size, the warning in its
   own ink, the card's action a small button on the right of its foot, checklist ticks in the text color. */
:where(html[data-visual="v5"]) .cs-chanpicker { display: flex; flex-direction: column; gap: var(--ds-space-4); }
:where(html[data-visual="v5"]) .cs-chanpicker-card__title { font-size: var(--ds-info-value); font-weight: var(--ds-weight-medium); color: var(--ds-text); }
:where(html[data-visual="v5"]) :is(.cs-chanpicker-card__desc, .cs-chanpicker-card__note) { font-size: var(--ds-info-label); line-height: var(--ds-info-leading); color: var(--ds-text-muted); }
:where(html[data-visual="v5"]) .cs-chanpicker-card__cta { display: flex; justify-content: flex-end; align-items: center; min-block-size: 30px; }
:where(html[data-visual="v5"]) .cs-chanpicker-card--compact .cs-chanpicker-card__cta .cs-btn--small { padding-block: 0.3rem; }
:where(html[data-visual="v5"]) .cs-chanpicker-card__note--warning { color: var(--ds-warning); }
:where(html[data-visual="v5"]) .cs-checklist__item { font-size: var(--ds-font-size-sm); color: var(--ds-text-secondary); }
:where(html[data-visual="v5"]) .cs-checklist__item svg { color: var(--ds-text-muted); }
:where(html[data-visual="v5"]) .cs-qr { border-radius: var(--ds-radius-xl); }

/* v5: a section's explanation reads as the page lead, small and muted. */
/* v5: a section's explanation reads as the info label under its title, small and muted (at the body size it outweighed
   the title over it: "Mostrar grupos" in 16.6 px over a 19 px explanation at 1440). */
:where(html[data-visual="v5"]) :is(.cs-conn-section, .cs-panel) .cs-settings__subtitle {
  font-size: var(--ds-info-label);
  line-height: var(--ds-info-leading);
  color: var(--ds-text-muted);
}

/* v5 history import: the scope note in the same label, the action a small button at the right of the section's foot. */
:where(html[data-visual="v5"]) .cs-import__actions { align-items: stretch; gap: var(--ds-space-3); }
:where(html[data-visual="v5"]) .cs-import__actions > form { align-self: flex-end; }
:where(html[data-visual="v5"]) .cs-import__scope { font-size: var(--ds-info-label); line-height: var(--ds-info-leading); color: var(--ds-text-muted); }

/* A section that is one switch names the setting in the text colour, over its muted explanation. */
:where(html[data-visual="v5"]) .cs-panel:has(.switch) .ds-section-label { color: var(--ds-text); }

/* Inside the advanced fold the groups' divider runs edge to edge like the rows' lines, not inset to the card's padding. */
:where(html[data-visual="v5"]) .cs-conn-adv__body .cs-conn-card__divider { margin-inline: 0; }

/* v5: "Sincronizar" and "Ver conexão e QR code" are quiet actions in the body's medium, on one line (the second broke in
   two, centred and bold, on the phone). */
:where(html[data-visual="v5"]) :is(.cs-conn__sync, .cs-conn-grp__head) .cs-btn--quiet { font-weight: var(--ds-weight-medium); white-space: nowrap; }
:where(html[data-visual="v5"]) .cs-conn__sync .cs-btn--quiet { color: var(--ds-text-secondary); }

/* The touch target makes a v5 icon button relative on the phone, which dropped the photo's camera out of its corner
   and under the picture: inside the portrait it stays pinned to the corner. */

.cs-inbox-members { display: flex; flex-direction: column; gap: var(--ds-space-3); }

/* Connecting by QR: the code centred on its sheet, the instruction over it in the body, the path to the scanner under it
   in the label, and the loader saying the page is waiting for the phone. */
.cs-uazapi-qr { display: flex; flex-direction: column; align-items: center; gap: var(--ds-space-3); text-align: center; }
.cs-uazapi-qr__lead { margin: 0; }
.cs-uazapi-qr__hint { margin: 0; color: var(--ds-text-muted); }
:where(html[data-visual="v5"]) .cs-uazapi-qr__lead { font-size: var(--ds-info-value); line-height: var(--ds-info-leading); color: var(--ds-text); }
:where(html[data-visual="v5"]) .cs-uazapi-qr__hint { font-size: var(--ds-info-label); line-height: var(--ds-info-leading); }
/* In px, 240 at every width: the 16rem code swelled to 304 px at the wide screen's 19 px root. Its white quiet zone stays in
   the dark theme, or the phone cannot read it. */
:where(html[data-visual="v5"]) .cs-uazapi-qr .cs-qr { inline-size: 240px; block-size: 240px; }

/* v5: an "advanced" fold in the channel's forms (own proxy, own app, webhook) is the quiet summary of the connection card,
   in the small body size and medium weight, not a bold heading. */
:where(html[data-visual="v5"]) .cs-option-row__summary {
  border-radius: var(--ds-radius-full);
  font-size: var(--ds-font-size-sm);
  font-weight: var(--ds-weight-medium);
  color: var(--ds-text-secondary);
}