/* The side panel: a sheet that slides in from the right over a backdrop, and docks beside the conversation
   where there is room. It holds the contact, the group, a message's details, the search in the conversation
   and the contact form; the names stay cs-contact-panel*, which four controllers and five shells know. */
.cs-contact-panel { position: fixed; inset: 0; z-index: 60; }
.cs-contact-panel__backdrop {
  position: absolute; inset: 0;
  background: oklch(0 0 0 / 0);
  transition: background 0.22s ease;
}
.cs-contact-panel--open .cs-contact-panel__backdrop { background: oklch(0 0 0 / 0.18); }
.cs-contact-panel__sheet {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(400px, 90vw);
  background: var(--ds-bg-pure);
  border-inline-start: 1px solid var(--ds-border);
  transform: translateX(100%);
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}
.cs-contact-panel--open .cs-contact-panel__sheet { transform: translateX(0); }

/* Docked only where rail, the narrowest list, the panel and --cs-conversation-min all fit. */
@media (min-width: 1280px) {
  .cs-chat-pane {
    transition: padding-inline-end 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .cs-chat-pane:has(> .cs-contact-panel--open) {
    padding-inline-end: var(--ds-side-panel-width);
  }

  .cs-chat-pane > .cs-contact-panel__sheet,
  .cs-chat-pane > .cs-contact-panel .cs-contact-panel__sheet {
    width: var(--ds-side-panel-width);
  }

  .cs-chat-pane > .cs-contact-panel .cs-contact-panel__backdrop {
    display: none;
  }

  /* Docked, the panel is a column beside the conversation, not a layer over the screen: the fixed box that holds it
     lets the pointer through, so the module rail, the list and the conversation keep their hover and their clicks. */
  .cs-chat-pane > .cs-contact-panel { pointer-events: none; }
  .cs-chat-pane > .cs-contact-panel .cs-contact-panel__sheet { pointer-events: auto; }
}

.cs-contact-panel__body { display: contents; }

/* The topbar is the panel_header with close:, and it stays while the body scrolls under it. */
.cs-contact-panel__sheet .ds-panel-header { position: sticky; inset-block-start: 0; z-index: 2; }

/* v5: the sheet is the surface of the topbar and the list beside it, as the Chat's sidebar, and the sections are
   WhatsApp's contact info: full width on that surface, split by a band a step darker, no card and no border. */
:where(html[data-visual="v5"]) .cs-contact-panel__sheet {
  padding-block-end: var(--ds-space-3);
  background: var(--ds-bg-sidebar);
  border-inline-start-color: var(--ds-divider);
}

:where(html[data-visual="v5"]) .cs-contact-panel__content { display: flex; flex-direction: column; gap: var(--ds-space-2); }
:where(html[data-visual="v5"]) .cs-contact-panel__sheet .cs-contact-panel__content { gap: 0; }

:where(html[data-visual="v5"]) .cs-contact-panel__sheet :is(.cs-contact-panel__hero, .cs-contact-panel__section) {
  margin: 0;
  padding: var(--ds-space-4) var(--ds-space-6);
  border: 0;
  border-radius: 0;
  background: none;
}
:where(html[data-visual="v5"]) .cs-contact-panel__sheet :is(.cs-contact-panel__hero, .cs-contact-panel__section) ~ .cs-contact-panel__section {
  border-block-start: var(--ds-space-2) solid var(--ds-panel-band);
}
:where(html[data-visual="v5"]) .cs-contact-panel__sheet .cs-contact-panel__hero { padding-block: var(--ds-space-4); }
/* One breath from a section's name to what it holds, 12 px in every section; the rows that pad themselves (an opener, the
   facts, the atendimentos) pull back their own 8 px so their text keeps the same 12 and the section the same 16 at its edges. */
:where(html[data-visual="v5"]) .cs-contact-panel__sheet .cs-contact-panel__section > * + * { margin-block-start: var(--ds-space-3); }
:where(html[data-visual="v5"]) .cs-contact-panel__sheet .cs-contact-panel__section > :is(.ds-facts--icons, .cs-contact-panel__list) { margin-block: calc(-1 * var(--ds-space-2)); }
:where(html[data-visual="v5"]) .cs-contact-panel__sheet .cs-contact-panel__section > * + :is(.ds-facts--icons, .cs-contact-panel__list) { margin-block-start: var(--ds-space-1); }

/* The group's page keeps its sections as sheets of the pure paper on the drawn ground. */
:where(html[data-visual="v5"]) .cs-group-page :is(.cs-contact-panel__hero, .cs-contact-panel__section) {
  padding: var(--ds-space-4);
  border: 0;
  border-radius: var(--ds-radius-xl);
  background: var(--ds-bg-pure);
}

/* The face, the name and the number, as WhatsApp's: the name the largest text of the panel, the rest in the muted ink. */
:where(html[data-visual="v5"]) .cs-contact-panel__name { font-size: var(--ds-font-size-xl); font-weight: var(--ds-weight-semibold); line-height: 1.2; }
:where(html[data-visual="v5"]) .cs-contact-panel__phone { font-size: var(--ds-font-size-sm); color: var(--ds-text-muted); }
:where(html[data-visual="v5"]) .cs-contact-panel__hero :is(.cs-contact-panel__affiliation, .cs-contact-panel__move, .cs-contact-panel__unsaved-hint) { color: var(--ds-text-muted); }
/* The name the number gave itself on WhatsApp ("~Loja …") sits centred under the number, in the muted ink, as WhatsApp's. */
:where(html[data-visual="v5"]) .cs-contact-panel__hero .cs-contact-panel__profile-name { font-size: var(--ds-font-size-sm); text-align: center; color: var(--ds-text-muted); }

/* A number not in the contacts: the "not saved" badge and the action to add it on one row right under the number, as
   WhatsApp's, and the why under them. */
:where(html[data-visual="v5"]) .cs-contact-panel__hero .cs-contact-panel__unsaved { flex-flow: row wrap; justify-content: center; gap: var(--ds-space-2); margin-block-start: var(--ds-space-1); }
:where(html[data-visual="v5"]) .cs-contact-panel__hero .cs-contact-panel__unsaved-hint { order: 1; flex-basis: 100%; max-inline-size: none; text-wrap: balance; }

/* One section name, WhatsApp's: the info type's title (ds_info_line.css), the change history's size in the muted ink, plain
   case, no tracking. A section that opens a step is the same words on the opener, with its count and the chevron
   (ds_panel_stack.css). */
:where(html[data-visual="v5"]) :is(.cs-contact-panel__sheet, .cs-group-page) :is(.cs-contact-panel__section-title, .cs-msg-info-sender__label) {
  margin: 0;
  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__disclosure-summary { margin: calc(-1 * var(--ds-space-2)); padding: var(--ds-space-2); }
@media (any-hover: hover) {
  :where(html[data-visual="v5"]) .cs-contact-panel__disclosure-summary:hover { background: var(--ds-hover); }
}

/* The last sent message's status is its ticks after the date, as on the bubble; the word is its name for a reader. */
:where(html[data-visual="v5"]) .ds-facts--icons dd .cs-contact-panel__msg-status { vertical-align: -0.125em; margin-inline-start: var(--ds-space-1); }

/* The person tied to the number is a fact row (ds-facts--icons): the 20 px icon on the centre of the kind's line, the kind
   in the info type's value, the document and the ties under it in its label, "Completar cadastro" under the text. */
:where(html[data-visual="v5"]) .cs-contact-panel__sheet .cs-person-block__person { gap: var(--ds-space-4); padding: 0; background: none; }
:where(html[data-visual="v5"]) .cs-contact-panel__sheet :is(.cs-person-block__icon, .cs-person-block__kind) { font-size: var(--ds-info-value); line-height: var(--ds-info-leading); }
:where(html[data-visual="v5"]) .cs-contact-panel__sheet .cs-person-block__icon { inline-size: 20px; block-size: 1lh; align-self: start; margin: 0; color: var(--ds-text-muted); }
:where(html[data-visual="v5"]) .cs-contact-panel__sheet .cs-person-block__kind { font-weight: var(--ds-weight-regular); color: var(--ds-text); }
:where(html[data-visual="v5"]) .cs-contact-panel__sheet :is(.cs-person-block__document, .cs-person-block__relationship) {
  font-size: var(--ds-info-label);
  line-height: var(--ds-info-leading);
  white-space: normal;
  color: var(--ds-text-muted);
}
:where(html[data-visual="v5"]) .cs-contact-panel__sheet .cs-person-block__complete { margin-inline-start: calc(20px + var(--ds-space-4)); }

/* The change history: the newest node in the fill, the green only on its icon. */
:where(html[data-visual="v5"]) .cs-contact-panel__history-node { border-color: var(--ds-border); background: var(--ds-bg-pure); }
:where(html[data-visual="v5"]) .cs-contact-panel__history-item:first-child .cs-contact-panel__history-node {
  border-color: transparent;
  background: var(--ds-fill);
  color: var(--ds-on-cta-soft);
}

/* Each change in the info type (ds_info_line.css), the ruler the panel's rows follow: what changed on top in the value, then
   its kind, what it was, who did it and when, in the label under it. */
:where(html[data-visual="v5"]) .cs-contact-panel__history-text { flex-direction: column; align-items: stretch; gap: 0.125rem; }
:where(html[data-visual="v5"]) .cs-contact-panel__history-value { order: -1; font-size: var(--ds-info-value); line-height: var(--ds-info-leading); font-weight: var(--ds-weight-regular); letter-spacing: normal; color: var(--ds-text); }
:where(html[data-visual="v5"]) :is(.cs-contact-panel__history-kind, .cs-contact-panel__history-prev, .cs-contact-panel__history-when) {
  font-size: var(--ds-info-label);
  line-height: var(--ds-info-leading);
  font-weight: var(--ds-weight-regular);
  letter-spacing: normal;
  text-transform: none;
  color: var(--ds-text-muted);
}

/* The atendimentos are rows of a list: no tinted card each, the hover a pill, "show all" a link. */
:where(html[data-visual="v5"]) .cs-contact-panel__list { gap: 0; margin-inline: calc(-1 * var(--ds-space-2)); }
:where(html[data-visual="v5"]) .cs-contact-panel__conv { padding: var(--ds-space-2); border-radius: var(--ds-radius-lg); background: none; }
@media (any-hover: hover) {
  :where(html[data-visual="v5"]) .cs-contact-panel__conv:hover { background: var(--ds-hover); }
}
/* Each one a fact row of the root (ds-facts--icons): the 20 px icon on the centre of the protocol's line, the protocol in the
   info type's value, and the status, channels and how long ago under it in its label. */
:where(html[data-visual="v5"]) .cs-contact-panel__conv {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  grid-template-areas: "icon value" ". label";
  column-gap: var(--ds-space-4);
  row-gap: 0.125rem;
  align-items: start;
}
:where(html[data-visual="v5"]) .cs-contact-panel__conv-icon { grid-area: icon; display: inline-grid; place-items: center; block-size: 1lh; font-size: var(--ds-info-value); line-height: var(--ds-info-leading); color: var(--ds-text-muted); }
:where(html[data-visual="v5"]) .cs-contact-panel__conv-title { grid-area: value; margin: 0; font-size: var(--ds-info-value); line-height: var(--ds-info-leading); font-weight: var(--ds-weight-regular); }
:where(html[data-visual="v5"]) .cs-contact-panel__conv-meta { grid-area: label; font-size: var(--ds-info-label); line-height: var(--ds-info-leading); color: var(--ds-text-muted); flex-wrap: wrap; }
:where(html[data-visual="v5"]) .cs-contact-panel__show-all-summary { color: var(--ds-link); font-size: var(--ds-info-label); }

/* Media, links and docs, as WhatsApp's: the opener with the gallery's whole count, then up to four squares of one size on
   the md radius; a document stands by its type's icon. Each square opens the viewer on itself (lightbox#open). */
:where(html[data-visual="v5"]) .cs-shelf__count { font-size: inherit; color: inherit; }
:where(html[data-visual="v5"]) .cs-shelf__strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ds-space-2); }
:where(html[data-visual="v5"]) .cs-shelf__thumb {
  inline-size: auto;
  block-size: auto;
  aspect-ratio: 1;
  border-radius: var(--ds-radius-md);
  background: var(--ds-fill);
  color: var(--ds-text-muted);
  text-decoration: none;
}
:where(html[data-visual="v5"]) .cs-shelf__thumb:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: 2px; }
@media (any-hover: hover) {
  :where(html[data-visual="v5"]) .cs-shelf__thumb:hover { background: var(--ds-fill-hover); color: var(--ds-text); }
  :where(html[data-visual="v5"]) .cs-shelf__thumb:hover img { opacity: 0.88; }
}
:where(html[data-visual="v5"]) .cs-shelf__play { background: var(--ds-media-badge); color: var(--ds-on-media); }


/* The search in the conversation: the field is the list's search pill, the results rows on the sheet. */
:where(html[data-visual="v5"]) .cs-contact-panel__sheet .cs-conv-search__results { padding: var(--ds-space-1) var(--ds-space-2); }

/* The group's channel: the name and the number wrap as one line of text, not as two columns. */
:where(html[data-visual="v5"]) .cs-group-canal__name { display: block; font-size: var(--ds-font-size-sm); }
:where(html[data-visual="v5"]) .cs-group-canal__name > * { margin-inline-end: var(--ds-space-1); vertical-align: middle; }

/* The group's page reuses the panel's sections: in the v5 they are the same sheets on the drawn ground, with no
   card around them, so the page reads as the panel does. */
:where(html[data-visual="v5"]) .cs-group-page { display: flex; flex-direction: column; gap: var(--ds-space-4); }
:where(html[data-visual="v5"]) .cs-group-page #cs_group_panel_body { overflow: visible; border: 0; border-radius: 0; background: none; }
:where(html[data-visual="v5"]) .cs-group-page :is(.cs-contact-panel__hero, .cs-contact-panel__section) { margin-inline: 0; }

/* On a phone the panel is the whole screen, as WhatsApp's contact info, and its steps go back inside it. */
@media not all and (min-width: 100ch) {
  :where(html[data-visual="v5"]) .cs-contact-panel__sheet { inline-size: 100%; border-inline-start: 0; }
}

/* The gallery as a step of the panel: the tabs on top, three thumbnails a row, the month as the section's name. */
.cs-media-step { display: flex; flex-direction: column; gap: var(--ds-space-4); padding: var(--ds-space-3) var(--ds-space-4) var(--ds-space-6); }
.cs-media-step .cs-media-grid { grid-template-columns: repeat(3, 1fr); gap: var(--ds-space-1); }
.cs-media-step .cs-media-cell { border-radius: var(--ds-radius-md); }
.cs-media-step .cs-media-group__title { font-size: var(--ds-font-size-sm); font-weight: var(--ds-weight-regular); letter-spacing: normal; text-transform: none; color: var(--ds-text-muted); }
.cs-media-step :is(.cs-media-doc, .cs-media-link) { min-inline-size: 0; }
/* The panel is narrow: a document's name takes its row, and its actions go under it. */
.cs-media-step .cs-media-doc { flex-wrap: wrap; row-gap: var(--ds-space-1); }
.cs-media-step .cs-media-doc__face { flex-basis: 100%; }

/* A record's lists (the panel, the group, the profile) are the filter's small pills, the × inside; "+ Adicionar lista" is a
   quiet action on the same 20 px pill, its ink the muted one and the fill only under the pointer or while its menu is open. */
:where(html[data-visual="v5"]) .cs-lists-block { gap: var(--ds-space-1); }
:where(html[data-visual="v5"]) .cs-lists-block > .cs-list-picker > .cs-list-add {
  gap: 4px;
  block-size: var(--ds-status-height-sm);
  padding: 0 8px;
  border: 0;
  border-radius: var(--ds-radius-full);
  background: none;
  color: var(--ds-text-muted);
  font-size: var(--ds-status-font-sm);
  font-weight: var(--ds-weight-medium);
  line-height: 1;
}
:where(html[data-visual="v5"]) .cs-lists-block > .cs-list-picker > .cs-list-add > svg { inline-size: 12px; block-size: 12px; }
:where(html[data-visual="v5"]) .cs-lists-block > .cs-list-picker[open] > .cs-list-add { background: var(--ds-fill-hover); color: var(--ds-text); }
@media (any-hover: hover) {
  :where(html[data-visual="v5"]) .cs-lists-block > .cs-list-picker > .cs-list-add:hover { background: var(--ds-fill-hover); color: var(--ds-text); }
}