/* The Atendimento's conversation row in v5 (/design-system#list_row, the conversation variant): WhatsApp's line of
   72 px (a profile or company line adds one), inset and rounded on the sidebar like the Chat's rows. The markup is the cached and broadcast
   inboxes/_card, the same in both looks, so everything here hangs on the v5 key. */
:where(html[data-visual="v5"]) #cs_sidebar_list { padding-inline: var(--ds-space-2); }
/* 2 px under every row, the ds-list's gap: the same between two rows of any height and across the pinned and the
   rest, so the open one's tint never touches the hovered one's. */
:where(html[data-visual="v5"]) #cs_sidebar_list :is(.cs-card-row, .cs-search-row) { margin-block-end: 2px; }

html[data-visual="v5"] .cs-card-row > .cs-card {
  min-block-size: 72px;
  padding: 6px var(--ds-space-3);
  border-radius: var(--ds-radius-xl);
  font-weight: var(--ds-weight-normal);
}

/* The open one in the account's soft ink, never the full green; the hover only with a pointer that hovers. */
html[data-visual="v5"] .cs-card:hover { background: none; }
@media (any-hover: hover) {
  html[data-visual="v5"] .cs-card:hover { background: var(--ds-fill-hover); }
  html[data-visual="v5"] .cs-card.bg-sidebar-active:hover { background: var(--ds-cta-soft-hover); }
}
/* While its menu is open the row keeps the hover tint, as WhatsApp's. */
html[data-visual="v5"] .cs-card-row:has(.cs-card__menu[open], .cs-card__lists-menu[open]) .cs-card:not(.bg-sidebar-active) { background: var(--ds-fill-hover); }
html[data-visual="v5"] .cs-card.bg-sidebar-active { background: var(--ds-cta-soft); }

/* The row's colour in each state, for what rings itself in it (the faces, the +N) and the queue's fill; the head above the
   list stands on the same ground, so its queue filters wear the card's fill. */
html[data-visual="v5"] :is(.cs-sidebar-head, .cs-card) { --ground: var(--ds-bg-sidebar); }
@media (any-hover: hover) {
  html[data-visual="v5"] .cs-card:hover { --ground: var(--ds-fill-hover); }
  html[data-visual="v5"] .cs-card.bg-sidebar-active:hover { --ground: var(--ds-cta-soft-hover); }
}
html[data-visual="v5"] .cs-card-row:has(.cs-card__menu[open], .cs-card__lists-menu[open]) .cs-card:not(.bg-sidebar-active) { --ground: var(--ds-fill-hover); }
html[data-visual="v5"] .cs-card.bg-sidebar-active { --ground: var(--ds-cta-soft); }

/* The badge of an open ticket over the avatar, in the account's colour, cut out of the row's own background. */
html[data-visual="v5"] .cs-card__ticket { border-color: var(--ds-bg-sidebar); background: var(--ds-cta); color: var(--ds-on-cta); }
html[data-visual="v5"] .cs-card.bg-sidebar-active .cs-card__ticket { border-color: var(--ds-cta-soft); }

/* WhatsApp's card in its 72 px: the name and the time; the preview across the width with the pin and the count at its
   end; and only with a queue or a list, the labels' line, in the status scale's small step, which still fits the 72 px.
   The people on it ride the labels' line when there is one, else the preview's end, never the name's. The markup is the cached
   and broadcast card, so the lines are drawn here: the head and the meta lend their children to one wrapping flex, order
   puts each on its line, and the box's two pseudo-elements break the lines (each line sizes alone, unlike a grid's columns).
   What grows takes a 1 px basis: at 0 it would fit beside the 100 % break before it and never get a line of its own. */
html[data-visual="v5"] .cs-card-row > .cs-card > .flex-col {
  flex-flow: row wrap;
  align-items: center;
  align-content: center;
  gap: 0;

  &::before, &::after { content: ""; flex-basis: 100%; block-size: 0; }
  &::before { order: 4; }
  &::after { order: 6; }
}
html[data-visual="v5"] :is(.cs-card__head, .cs-card__meta) { display: contents; }
html[data-visual="v5"] .cs-card__head > :first-child { flex: 1 1 0; order: 1; }
html[data-visual="v5"] .cs-card__status { order: 1; margin-inline-start: var(--ds-space-2); }
html[data-visual="v5"] .cs-card__people {
  display: inline-flex;
  order: 5;
  margin-inline-start: var(--ds-space-2);
}
html[data-visual="v5"] .cs-card-row > .cs-card > .flex-col:has(.cs-card__queue) > .cs-card__meta > .cs-card__people {
  order: 8;
  margin-block-start: var(--cs-card-labels-rise);
  margin-inline: auto var(--cs-card-caret);
}
/* Three faces or more fold to one face and the count, so a short queue never cuts. Beside a queue alone the stack
   grows second, after the queue, between its folded and its whole width (the 18 px faces, each over the last by a
   fifth); beside lists, the lists' box decides (below). */
.cs-card__people > .cs-card__people-folded { display: none; }
html[data-visual="v5"] .cs-card-row > .cs-card > .flex-col:has(.cs-card__queue) > .cs-card__meta > .cs-card__people:has(> .cs-card__people-folded) {
  flex: 100 1 1px;
  justify-content: flex-end;
  min-inline-size: calc(18px * 1.8);
  max-inline-size: calc(18px * 2.6);
  container: cs-card-people / inline-size;
}
@container cs-card-people (width < 46.5px) {
  html[data-visual="v5"] .cs-card__people > .ds-avatar-group:not(.cs-card__people-folded) { display: none; }
  html[data-visual="v5"] .cs-card__people > .cs-card__people-folded { display: inline-flex; }
}
html[data-visual="v5"] .cs-card__time { order: 3; margin-inline-start: var(--ds-space-2); }
html[data-visual="v5"] :is(.cs-card__profile-name, .cs-card__affiliation) { order: 3; flex-basis: 100%; }
html[data-visual="v5"] :is(.cs-card__follow-up, .cs-card__pin, .cs-card__unread) { order: 5; margin-inline-start: var(--ds-space-2); }
/* The labels' line hangs from the preview's letters, not from its line box: the box leaves 0.4 em under the baseline
   (the descent and the half-leading), and the line rises by half of it, then drops 4 px, so the pills sit about 7 px
   under the baseline and 3 px under the descenders, never touching the preview. A three-line card still fits its 72 px. */
html[data-visual="v5"] :is(.cs-card__queue, .cs-card__labels) { order: 7; margin-block-start: var(--cs-card-labels-rise); }
/* The queue grows first, up to its whole name, so it cuts only once the lists are down to their folded +N. Before the
   lists, the compact pills' own gap, as between the lists themselves. */
html[data-visual="v5"] .cs-card__queue {
  display: inline-flex;
  flex: 1000 1 1px;
  min-inline-size: 0;
  max-inline-size: max-content;
  margin-inline-end: var(--ds-space-1);
}

/* No room kept for the caret: on hover it slides in and pushes the last line's end, as WhatsApp's; on touch it is always there. */
/* The room is the caret's circle less the card's padding it hangs over, and the line's 6 px gap before it, as between the line's own items. */
html[data-visual="v5"] .cs-card {
  --cs-card-gap: 6px;
  --cs-card-labels-rise: calc(5px - var(--ds-font-size-compact) * 0.2);
  --cs-card-caret-room: calc(24px + var(--ds-space-2) - var(--ds-space-3) + var(--cs-card-gap));
  --cs-card-caret: 0px;
}
html[data-visual="v5"] .cs-card-row > .cs-card > .flex-col:not(:has(.cs-card__queue, .cs-card__lists))::after { order: 5; flex-basis: var(--cs-card-caret); }
html[data-visual="v5"] .cs-card-row > .cs-card > .flex-col:not(:has(.cs-card__people, .cs-card__lists)) .cs-card__queue { margin-inline-end: var(--cs-card-caret); }
html[data-visual="v5"] .cs-card-row > .cs-card > .flex-col :is(.cs-card__people, .cs-card__labels, .cs-card__queue) {
  transition: margin var(--ds-duration-fast) var(--ds-ease-out);
}
html[data-visual="v5"] .cs-card-row > .cs-card > .flex-col::after { transition: flex-basis var(--ds-duration-fast) var(--ds-ease-out); }
@media (any-hover: hover) {
  html[data-visual="v5"] .cs-card-row:hover .cs-card { --cs-card-caret: var(--cs-card-caret-room); }
}
@media (hover: none) {
  html[data-visual="v5"] .cs-card { --cs-card-caret: var(--cs-card-caret-room); }
}
html[data-visual="v5"] .cs-card-row:has(.cs-card__menu[open], .cs-card__menu-toggle:focus-visible) .cs-card { --cs-card-caret: var(--cs-card-caret-room); }
@media (prefers-reduced-motion: reduce) {
  html[data-visual="v5"] .cs-card-row > .cs-card > .flex-col :is(.cs-card__people, .cs-card__labels, .cs-card__queue),
  html[data-visual="v5"] .cs-card-row > .cs-card > .flex-col::after { transition: none; }
}

/* The name at 16, medium once read and semibold while unread, as the Chat's room; the time in the link's colour then too. */
html[data-visual="v5"] .cs-card__head > :first-child {
  font-size: var(--ds-font-size-base);
  font-weight: var(--ds-weight-medium);
  line-height: 1.2;
  color: var(--ds-text);
}
html[data-visual="v5"] .cs-card-row[data-menu-unread="true"] .cs-card__head > :first-child { font-weight: var(--ds-weight-semibold); }
/* The desktop root is 19 px, so there 16 is the sm step, as the panel header's title beside it. */
@media (min-width: 100ch) {
  html[data-visual="v5"] .cs-card__head > :first-child { font-size: var(--ds-font-size-sm); }
}
html[data-visual="v5"] .cs-card__time { font-size: var(--ds-font-size-2xs); font-variant-numeric: tabular-nums; color: var(--ds-text-muted); }
html[data-visual="v5"] .cs-card-row[data-menu-unread="true"] .cs-card__time { color: var(--ds-link); }

html[data-visual="v5"] :is(.cs-card__profile-name, .cs-card__affiliation) { font-size: var(--ds-font-size-2xs); line-height: 1.3; color: var(--ds-text-muted); }

html[data-visual="v5"] .cs-card .cs-preview { flex: 1 1 1px; order: 5; font-size: var(--ds-font-size-compact); line-height: 1.25; color: var(--ds-text-muted); }
html[data-visual="v5"] .cs-card__pin { color: var(--ds-text-muted); }
/* The return the closing set: the day at the time's size, the calendar beside it. */
html[data-visual="v5"] .cs-card__follow-up {
  gap: var(--ds-space-1);
  font-size: var(--ds-font-size-2xs);
  font-variant-numeric: tabular-nums;
  color: var(--ds-text-muted);
}

html[data-visual="v5"] .cs-card__queue .ds-chip {
  min-inline-size: 0;
  color: var(--ds-text-secondary);
}
/* The lists and the people share one box, after the queue's whole name. It sizes them together, so nothing is cut beside
   room left over. The order, one way only as the room falls (rule 4 of item 19b): the first pill shrinks to its
   narrowest, two letters and the ellipsis; then the lists fold into the tag and their count, a single list too ("P…" said
   nothing, and the count opens the menu with the whole name); only then the faces fold; and last the queue cuts. The lists
   fold by their own two letters (below), against the room the whole stack leaves them. The faces fold once even the count
   (32 px) leaves no room for the whole stack (three circles, each over the last by a fifth), and the lists stay folded with
   them: what the faces give back would otherwise open a single pill again. A container query takes no variable, so the
   sums are written out where they are asked. */
html[data-visual="v5"] .cs-card__labels {
  --cs-card-lists-min: 38px;
  --cs-card-labels-min: var(--cs-card-lists-min);
  display: flex;
  flex: 1 1 1px;
  align-items: center;
  gap: var(--cs-card-gap);
  min-inline-size: var(--cs-card-labels-min);
  margin-inline-end: var(--cs-card-caret);
  container: cs-card-labels / inline-size;
}
html[data-visual="v5"] .cs-card__labels:has(> .cs-card__lists > .cs-card__lists-all) { --cs-card-lists-min: 32px; }
html[data-visual="v5"] .cs-card__labels:has(> .cs-card__people) { --cs-card-labels-min: calc(var(--cs-card-lists-min) + var(--cs-card-gap) + 18px); }
html[data-visual="v5"] .cs-card__labels:has(> .cs-card__people > .ds-avatar-group > :nth-child(2)) {
  --cs-card-labels-min: calc(var(--cs-card-lists-min) + var(--cs-card-gap) + 18px * 1.8);
}
html[data-visual="v5"] .cs-card__labels > .cs-card__people { margin-inline-start: auto; }
@container cs-card-labels (width < calc(32px + 6px + 18px * 2.6)) {
  html[data-visual="v5"] .cs-card__people:has(> .cs-card__people-folded) > .ds-avatar-group:not(.cs-card__people-folded) { display: none; }
  html[data-visual="v5"] .cs-card__people > .cs-card__people-folded { display: inline-flex; }
  html[data-visual="v5"] .cs-card__lists:has(~ .cs-card__people > .cs-card__people-folded) > .cs-card__lists-all ~ * { display: none; }
  html[data-visual="v5"] .cs-card__lists:has(~ .cs-card__people > .cs-card__people-folded) > .cs-card__lists-all { display: inline-flex; }
}
html[data-visual="v5"] .cs-card__lists {
  flex: 1 1 1px;
  flex-wrap: nowrap;
  gap: var(--ds-space-1);
  min-inline-size: var(--cs-card-lists-min);
  overflow: visible;
  container: cs-card-lists / inline-size;
}
html[data-visual="v5"] .cs-card__lists > .ds-chip { flex: 0 1 auto; min-inline-size: 0; }
.cs-card__lists > :is(.cs-card__lists-all, .cs-card__lists-fit) { display: none; }
/* The lists fold the moment this card's own first pill, at two letters and the ellipsis, and its +N stop fitting: a
   hidden copy of them overflows the box, and the box asks whether it scrolls. Padded 13 px and 6 px and pulled back by
   as much, so the clip lands where the +N's ring and its touch area end, and the box takes the pointer nowhere. */
@supports (container-type: scroll-state) {
  html[data-visual="v5"] .cs-card__lists:has(> .cs-card__lists-fit) {
    container: cs-card-lists / inline-size scroll-state;
    position: relative;
    box-sizing: content-box;
    padding: 13px 6px;
    margin: -13px -6px;
    overflow: hidden;
    pointer-events: none;

    > * { pointer-events: auto; }
  }
  html[data-visual="v5"] .cs-card__lists > .cs-card__lists-fit {
    position: absolute;
    inset-block-start: 13px;
    inset-inline-start: 6px;
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-1);
    padding-inline-end: 6px;
    visibility: hidden;
    pointer-events: none;
  }
  @container cs-card-lists scroll-state(scrollable: inline) {
    html[data-visual="v5"] .cs-card__lists > .cs-card__lists-all ~ * { display: none; }
    html[data-visual="v5"] .cs-card__lists > .cs-card__lists-all { display: inline-flex; }
  }
}
/* Where a box cannot ask, the widest two letters stand for every name. */
@supports not (container-type: scroll-state) {
  @container cs-card-lists (width < 55.4px) {
    html[data-visual="v5"] .cs-card__lists:has(> .ds-chip + .ds-more) > .cs-card__lists-all ~ * { display: none; }
    html[data-visual="v5"] .cs-card__lists:has(> .ds-chip + .ds-more) > .cs-card__lists-all { display: inline-flex; }
  }
  @container cs-card-lists (width < 38px) {
    html[data-visual="v5"] .cs-card__lists > .cs-card__lists-all ~ * { display: none; }
    html[data-visual="v5"] .cs-card__lists > .cs-card__lists-all { display: inline-flex; }
  }
}

/* In a search, the tab each result belongs to. */
html[data-visual="v5"] .cs-card__status { font-size: var(--ds-font-size-2xs); font-weight: var(--ds-weight-medium); background: var(--ds-cta-soft); color: var(--ds-on-cta-soft); }
html[data-visual="v5"] .cs-card__status--resolved { background: var(--ds-fill); color: var(--ds-text-muted); }

/* The row's caret: the 24 px icon circle on the last line's centre, over the room kept for it. The details spans the
   card's height, so its menu opens 4 px clear of the card, under it or over it, and never covers the card it belongs
   to; only the caret and the menu take the pointer. */
/* The card and the details share the row's one cell, so the caret's box is the row, which holds the line it anchors to. */
html[data-visual="v5"] .cs-card-row { display: grid; grid-template-columns: minmax(0, 1fr); }
html[data-visual="v5"] .cs-card-row > :is(.cs-card, .cs-card__menu) { grid-area: 1 / 1; }
html[data-visual="v5"] .cs-card__menu { position: static; justify-self: end; inline-size: 24px; margin-inline-end: var(--ds-space-2); pointer-events: none; }
/* In the secondary text, AA on the row in every state; it slides in from the edge as the room opens. */
html[data-visual="v5"] .cs-card__menu-toggle {
  position: absolute;
  inset-block-end: 4px;
  inset-inline-end: var(--ds-space-2);
  inline-size: 24px;
  block-size: 24px;
  color: var(--ds-text-secondary);
  pointer-events: auto;
  translate: 6px 0;
  transition: opacity var(--ds-duration-fast) var(--ds-ease-out), translate var(--ds-duration-fast) var(--ds-ease-out), background-color var(--ds-duration-fast);
}
html[data-visual="v5"] :is(.cs-card-row:hover, .cs-card-row:has(.cs-card__menu[open])) .cs-card__menu-toggle,
html[data-visual="v5"] .cs-card__menu-toggle:focus-visible { translate: 0 0; }
@media (hover: none) {
  html[data-visual="v5"] .cs-card__menu-toggle { translate: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-visual="v5"] .cs-card__menu-toggle { translate: 0 0; transition: none; }
}
/* The lines are centred in a card of 72 px or more, so the last one is found by anchor, not by a distance from the edge. */
@supports (anchor-scope: --cs-card-line) {
  html[data-visual="v5"] .cs-card-row { anchor-scope: --cs-card-line; }
  html[data-visual="v5"] .cs-card :is(.cs-preview, .cs-card__queue, .cs-card__lists) { anchor-name: --cs-card-line; }
  html[data-visual="v5"] .cs-card__menu-toggle { position-anchor: --cs-card-line; inset-block: anchor(center) auto; margin-block-start: -12px; }
}
html[data-visual="v5"] .cs-card__menu-list { inset-block-start: calc(100% + 4px); inset-inline-end: var(--ds-space-2); pointer-events: auto; }
html[data-visual="v5"] .popup-orientation-top .cs-card__menu-list { inset-block: auto calc(100% + 4px); }
html[data-visual="v5"] .cs-card__menu-toggle:hover,
html[data-visual="v5"] .cs-card__menu[open] .cs-card__menu-toggle { background: var(--ds-hover); color: var(--ds-text); }

/* The search's other rows (people, contacts, groups, messages) on the same terms as the conversations among them. */
html[data-visual="v5"] #cs_sidebar_list .cs-search-row { min-block-size: 64px; padding: 10px var(--ds-space-3); border-radius: var(--ds-radius-xl); }
html[data-visual="v5"] #cs_sidebar_list .cs-search-row:hover { background: none; }
@media (any-hover: hover) {
  html[data-visual="v5"] #cs_sidebar_list .cs-search-row:hover { background: var(--ds-fill-hover); }
}
html[data-visual="v5"] .cs-search-row__name { font-size: var(--ds-font-size-base); font-weight: var(--ds-weight-semibold); }
html[data-visual="v5"] .cs-search-row__meta { font-size: var(--ds-font-size-compact); color: var(--ds-text-muted); }
html[data-visual="v5"] .cs-search-row__when { font-size: var(--ds-font-size-2xs); color: var(--ds-text-muted); font-variant-numeric: tabular-nums; }
html[data-visual="v5"] .cs-search-section__title { padding: var(--ds-space-3) var(--ds-space-3) var(--ds-space-1); }
@media (min-width: 100ch) {
  html[data-visual="v5"] .cs-search-row__name { font-size: var(--ds-font-size-sm); }
}