/* One shell and one item for every floating list, as WhatsApp's: the panel keeps a breath inside, and the hover is a pill inset in it. The popup measures on open and the shell reads it. */
.ds-menu-trigger { position: relative; display: inline-block; }
.ds-menu-trigger > summary { list-style: none; }
.ds-menu-trigger > summary::-webkit-details-marker { display: none; }
.ds-menu-trigger[open] > summary { background-color: var(--ds-hover); }

.ds-menu {
  position: absolute;
  z-index: var(--ds-z-menu);
  inset-block-start: calc(100% + 6px);
  inset-inline-end: 0;
  display: flex;
  flex-direction: column;
  min-inline-size: 12rem;
  max-inline-size: calc(100vw - 16px);
  max-block-size: var(--max-height, none);
  overflow-y: auto;
  translate: var(--shift-inline, 0) 0;
  padding: var(--ds-menu-inset);
  border: 1px solid var(--ds-menu-border);
  border-radius: var(--ds-menu-radius);
  background: var(--ds-menu-bg);
  box-shadow: none;
  color: var(--ds-menu-text);
}

.popup-orientation-top > .ds-menu { inset-block: auto calc(100% + 6px); }

/* One scroll, the shell's, with the thin bar of the v5 lists: no arrows, a thumb that keeps clear of the rounded
   corners, and the page underneath never scrolled by the end of the menu. Every menu shell that scrolls is named
   here, or it keeps the page's grey bar with arrows. */
:is(.ds-menu, .cs-card__menu-list, .cs-menu, .cs-people-filter__menu, .cs-people-filter__list, .cs-channel-dropdown__menu,
    .cs-header-menu__menu, .cs-composer-menu__list, .cs-assign__list, .ds-emoji-picker__scroll, .ds-sticker-panel__scroll) {
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in oklch, var(--ds-text) 24%, transparent) transparent;

  @supports selector(::-webkit-scrollbar) {
    scrollbar-width: auto;
    scrollbar-color: auto;

    &::-webkit-scrollbar { inline-size: 10px; }
    &::-webkit-scrollbar-button { display: none; }
    &::-webkit-scrollbar-track { margin-block: var(--ds-menu-radius); background: transparent; }
    &::-webkit-scrollbar-thumb {
      border: 3px solid transparent;
      border-radius: var(--ds-radius-full);
      background: color-mix(in oklch, var(--ds-text) 24%, transparent) padding-box;
    }
    &::-webkit-scrollbar-thumb:hover { background-color: color-mix(in oklch, var(--ds-text) 40%, transparent); }
  }
}

.ds-menu__item {
  --hover-size: 0;
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
  inline-size: 100%;
  min-block-size: var(--ds-menu-item-height);
  padding-inline: var(--ds-space-3);
  border: 0;
  border-radius: var(--ds-menu-item-radius);
  background: transparent;
  color: var(--ds-menu-text);
  font: inherit;
  font-size: var(--ds-font-size-compact);
  font-weight: var(--ds-weight-medium);
  text-align: start;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;

  > :is(svg, .cs-spinner) { flex-shrink: 0; }
  > .cs-spinner { inline-size: 12px; block-size: 12px; margin-inline: 2px; }
}

.ds-menu__separator { flex-shrink: 0; block-size: 1px; margin: var(--ds-menu-inset) var(--ds-space-3); border: 0; background: var(--ds-menu-separator); }

.ds-menu__label { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; }
.ds-menu__check { margin-inline-start: auto; }

/* The suggestions under a field (a combobox's listbox): the menu's shell as wide as the field, one cs-picker-row per
   option at the row's own text size. The option the keyboard is on (.is-active, aria-selected) is the hover pill, never
   the green of a chosen one; an answer with nothing in it takes no room. */
.ds-menu--listbox {
  inset-inline: 0;
  inset-block-start: calc(100% + var(--ds-space-1));
  min-inline-size: 0;
  max-block-size: 16rem;
  gap: 2px;
  margin: 0;
  list-style: none;
}
.ds-menu--listbox:not(:has(> *)) { display: none; }
/* The suggestions float over the page and the sheet under the field, where the menu's own surface sits a hair off
   both (ΔL 0.008 to 0.025 in the dark), so they take the elevated step the modal uses, with its hairline and hover. */
.ds-menu--listbox { border-color: var(--ds-border-elevated); background: var(--ds-bg-elevated); }
.ds-menu--listbox > .cs-picker-row {
  flex-shrink: 0;
  min-block-size: var(--ds-menu-item-height);
  padding-inline: var(--ds-space-3);
  border: 0;
  border-radius: var(--ds-menu-item-radius);
  color: var(--ds-menu-text);
}
.ds-menu--listbox > .cs-picker-row:hover { background: transparent; }
@media (any-hover: hover) {
  .ds-menu--listbox > .cs-picker-row:hover { background: var(--ds-fill-hover-elevated); }
}
.ds-menu--listbox > .cs-picker-row.is-active { background: var(--ds-fill-hover-elevated); }
.ds-menu--listbox > .cs-picker-row:active { background: var(--ds-pressed); }

@media (max-width: 40rem), (pointer: coarse) {
  .ds-menu--listbox > .cs-picker-row { min-block-size: 44px; }
}

@media (any-hover: hover) {
  .ds-menu__item:not([aria-disabled="true"]):hover { background: var(--ds-menu-hover); }
}

.ds-menu__item:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: -2px; }
.ds-menu__item:not([aria-disabled="true"]):active { background: var(--ds-pressed); }

.ds-menu__item:is([aria-checked="true"], .is-selected) {
  background: var(--ds-cta-soft);
  color: var(--ds-on-cta-soft);
  font-weight: var(--ds-weight-semibold);
}

.ds-menu__item--danger { color: var(--ds-negative); }

.ds-menu__item[aria-disabled="true"] {
  color: var(--ds-text-muted);
  cursor: not-allowed;
}

/* The search inside a menu is the sidebar's pill (.cs-search, ds_menu_find), kept a breath above the rows it filters. */
.ds-menu__find,
.ds-menu .cs-search { flex-shrink: 0; margin-block-end: var(--ds-space-1); }

/* A section of many choices inside the shell (the lists of a conversation): a small caps label, the search above
   enough rows, then one compact row per option with its colour dot and name. The chosen ones say so only by the check
   on the right, never by a fill; the row's own action (edit) waits for hover or focus. One scroll: the shell's. */
.ds-menu__section {
  margin: 0;
  padding: var(--ds-space-2) var(--ds-space-3) var(--ds-space-1);
  font-size: var(--ds-font-size-2xs);
  font-weight: var(--ds-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ds-text-muted);
}

/* A section that opens as a panel in place of its menu (the lists of the card's menu), as the submenus of WhatsApp and
   macOS: shut, its head carries "Ver mais" and only its summary rows show (.ds-menu__panel-open waits); open
   ([data-open], by the menu-panel controller), the menu's other items step aside, a back arrow and the title head it,
   and that head and the search stay on top while the rows scroll under them. */
.ds-menu__section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-2);
  padding-inline-end: var(--ds-space-1);

  > .ds-menu__section { flex: 1; min-inline-size: 0; }
}

.ds-menu__more {
  --hover-size: 0;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 2px;
  min-block-size: 24px;
  margin-block-start: var(--ds-space-1);
  padding-inline: var(--ds-space-2) var(--ds-space-1);
  border: 0;
  border-radius: var(--ds-radius-full);
  background: transparent;
  color: var(--ds-link);
  font: inherit;
  font-size: var(--ds-font-size-xs);
  font-weight: var(--ds-weight-semibold);
  white-space: nowrap;
  cursor: pointer;

  &:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: 0; }
  &:active { background: var(--ds-pressed); }
}

@media (any-hover: hover) {
  .ds-menu__more:hover { background: var(--ds-menu-hover); }
}

@media (pointer: coarse) {
  .ds-menu__more { min-block-size: 32px; }
}

.ds-menu__panel-top {
  position: sticky;
  z-index: 1;
  inset-block-start: calc(-1 * var(--ds-menu-inset));
  margin-block-start: calc(-1 * var(--ds-menu-inset));
  padding-block-start: var(--ds-menu-inset);
  background: var(--ds-menu-bg);
}

.ds-menu__panel-head {
  display: flex;
  align-items: center;
  gap: var(--ds-space-1);
  min-block-size: var(--ds-menu-item-height);
  padding-inline: var(--ds-space-1) var(--ds-space-3);
}

.ds-menu__back {
  --hover-size: 0;
  display: grid;
  flex-shrink: 0;
  place-items: center;
  inline-size: 32px;
  block-size: 32px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ds-text-secondary);
  cursor: pointer;

  &:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: -2px; }
  &:active { background: var(--ds-pressed); }
}

@media (any-hover: hover) {
  .ds-menu__back:hover { background: var(--ds-menu-hover); color: var(--ds-text); }
}

.ds-menu__panel-title {
  margin: 0;
  font-size: var(--ds-font-size-compact);
  font-weight: var(--ds-weight-semibold);
  color: var(--ds-menu-text);
}

.ds-menu__panel:not([data-open]) :is(.ds-menu__panel-open, .ds-menu__choice-action) { display: none; }
.ds-menu__panel[data-open] .ds-menu__panel-shut { display: none; }
.ds-menu:has(> .ds-menu__panel[data-open]) > :not(.ds-menu__panel) { display: none; }

/* The check sits on the right edge; the pencil floats in a column before it, so showing it moves nothing. */
.ds-menu__choice {
  position: relative;
  display: flex;
  align-items: center;
  min-block-size: var(--ds-menu-choice-height);
  border-radius: var(--ds-menu-item-radius);
}

.ds-menu__choice[hidden] { display: none; }

.ds-menu__choice-toggle {
  --hover-size: 0;
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--ds-space-2);
  min-inline-size: 0;
  align-self: stretch;
  padding-inline: var(--ds-space-3);
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: var(--ds-menu-text);
  font: inherit;
  font-size: var(--ds-font-size-compact);
  font-weight: var(--ds-weight-medium);
  text-align: start;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;

  &:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: -2px; }
}

.ds-menu__choice .ds-menu__check { flex-shrink: 0; color: var(--ds-on-cta-soft); }

.ds-menu__choice-action {
  --hover-size: 0;
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: calc(var(--ds-space-3) + 14px + var(--ds-space-1));
  translate: 0 -50%;
  display: grid;
  place-items: center;
  inline-size: 24px;
  block-size: 24px;
  border-radius: 50%;
  color: var(--ds-text-secondary);
  opacity: 0;

  &:hover { background: var(--ds-pressed); color: var(--ds-text); }
  &:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: 0; opacity: 1; }
}

.ds-menu__choice:is(:hover, :focus-within) .ds-menu__choice-action { opacity: 1; }
.ds-menu__choice:is(:hover, :focus-within) .ds-menu__label { margin-inline-end: calc(14px + var(--ds-space-1) + 24px + var(--ds-space-1)); }
.ds-menu__choice:is(:hover, :focus-within) .ds-menu__label:has(+ .ds-menu__check) { margin-inline-end: calc(24px + var(--ds-space-1)); }
.ds-menu__choice:has(.ds-menu__choice-toggle:active) { background: var(--ds-pressed); }

@media (any-hover: hover) {
  .ds-menu__choice:hover { background: var(--ds-menu-hover); }
}

/* Without hover the action has no moment to appear, and a pencil on every row is noise: a touch screen reaches the
   editing through the section's last item instead ("Gerenciar listas"), and the row is a finger tall. */
@media (hover: none) {
  .ds-menu__choice-action { display: none; }
}

@media (pointer: coarse) {
  .ds-menu__choice { min-block-size: var(--ds-menu-item-height); }
}

/* The dropdown: a pill in the control outline that opens the same shell; the doubled class wins over the partial's own skin. */
.ds-dropdown { position: relative; display: inline-block; min-inline-size: 0; max-inline-size: 100%; }

.ds-dropdown > .ds-dropdown__trigger {
  --hover-size: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  min-inline-size: 0;
  max-inline-size: min(340px, 100%);
  min-block-size: 32px;
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--ds-border-strong);
  border-radius: var(--ds-radius-full);
  background: var(--ds-bg-pure);
  color: var(--ds-text);
  font-size: var(--ds-font-size-xs);
  font-weight: var(--ds-weight-semibold);
  list-style: none;
  cursor: pointer;

  &::-webkit-details-marker { display: none; }
  &:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: 0; }
}

@media (any-hover: hover) {
  .ds-dropdown > .ds-dropdown__trigger:hover { background: var(--ds-hover); }
}

.ds-dropdown[open] > .ds-dropdown__trigger { background: var(--ds-hover); }

/* v5: the trigger is a pill, a solid fill with no outline; hover and open only deepen the fill. */
:where(html[data-visual="v5"]) .ds-dropdown > .ds-dropdown__trigger { border-color: transparent; background: var(--ds-fill); }

@media (any-hover: hover) {
  :where(html[data-visual="v5"]) .ds-dropdown > .ds-dropdown__trigger:hover { background: var(--ds-fill-hover); }
}

:where(html[data-visual="v5"]) .ds-dropdown[open] > .ds-dropdown__trigger { background: var(--ds-fill-hover); }

.ds-dropdown__caret {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--ds-text-muted);
  transition: transform var(--ds-duration-fast) var(--ds-ease-out);

  > .cs-spinner { inline-size: 12px; block-size: 12px; }
}

.ds-dropdown[open] .ds-dropdown__caret { transform: rotate(180deg); }
.ds-dropdown__trigger[aria-busy="true"] .ds-dropdown__caret { transform: none; }
.ds-dropdown__status { display: inline-flex; flex-shrink: 0; }

.ds-dropdown > .ds-menu {
  inset-inline: 0 auto;
  min-inline-size: min(300px, calc(100vw - 16px));
  max-inline-size: min(360px, calc(100vw - 16px));
  padding: var(--ds-menu-inset);
  border: 1px solid var(--ds-menu-border);
  border-radius: var(--ds-menu-radius);
  background: var(--ds-menu-bg);
  box-shadow: none;
}

.ds-dropdown .ds-menu__item {
  padding-block: var(--ds-space-1);
  border-radius: var(--ds-menu-item-radius);
  font-size: var(--ds-font-size-compact);
  font-weight: var(--ds-weight-medium);
  white-space: normal;
}
.ds-dropdown .ds-menu__item.is-selected :is(svg, .composer-channel__item-check) { color: var(--ds-on-cta-soft); }

/* A menu of pills (the lists behind a card's +N): one compact pill per 28 px row, as wide as the longest name up to 19rem
   or the box it opens in (--ds-menu-room). It is where a cut name is read whole, so a longer name wraps inside its pill
   instead of cutting, and a one-line pill keeps the compact 18 px. */
.ds-menu--pills {
  inline-size: max-content;
  min-inline-size: 0;
  max-inline-size: min(19rem, var(--ds-menu-room, 100vw - 32px));
}
.ds-menu--pills > .ds-menu__item {
  min-block-size: calc(var(--ds-status-height-xs) + 2 * 5px);
  padding-inline: 5px;
}
.ds-menu--pills > .ds-menu__item > .ds-chip {
  min-inline-size: 0;
  block-size: auto;
  min-block-size: var(--ds-status-height-xs);
  padding-block: 3px;
  line-height: 12px;
  white-space: normal;

  .ds-chip__label { overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
  .ds-chip__space { display: inline; white-space: inherit; }
}
@media (pointer: coarse) {
  .ds-menu--pills > .ds-menu__item { min-block-size: var(--ds-menu-choice-height); }
}