/* The one topbar of the app's panels and pages: menu or back, the avatar, the title over its subtitle, and the actions on the right. */
.ds-panel-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
  min-block-size: 52px;
  padding: calc(10px + var(--ds-safe-top)) 0.75rem 0.625rem;
  border-block-end: 1px solid var(--ds-divider);
  background: var(--ds-bg-sidebar);
  color: var(--ds-text);
}

.ds-panel-header__lead { display: contents; }
.ds-panel-header__avatar { display: inline-grid; flex-shrink: 0; }
.ds-panel-header__identity { display: flex; flex-direction: column; gap: 0.125rem; flex: 1; min-inline-size: 0; }
.ds-panel-header__title { display: flex; align-items: center; gap: 0.375rem; min-inline-size: 0; }
/* The name gives way to the count, and a name that links reads as the name, not as a link. */
.ds-panel-header__name { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--ds-font-size-base); line-height: 1.25; font-weight: var(--ds-weight-bold); }
.ds-panel-header__name a { color: inherit; text-decoration: none; }
.ds-panel-header__subtitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--ds-font-size-xs); line-height: 1.3; color: var(--ds-text-muted); }
/* A room named in the subtitle wears its sidebar face before the name: # for a channel, the lock, the person. */
.ds-panel-header__subtitle > :has(> .ds-panel-header__mark) { display: inline-flex; align-items: center; gap: 0.25rem; max-inline-size: 100%; }
.ds-panel-header__mark { display: inline-grid; flex-shrink: 0; }
.ds-panel-header__actions { display: flex; align-items: center; gap: 0.25rem; flex-shrink: 0; }
/* A badge that belongs to the whole page and not to the title (the ticket of an Atendimento conversation). */
.ds-panel-header__aside { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; min-inline-size: 0; }

@media (min-width: 100ch) {
  .ds-panel-header { block-size: var(--ds-nav-height); min-block-size: 0; padding: 0 1.5rem 0 1rem; }
  .ds-panel-header__mobile { display: none; }
}

@media not all and (min-width: 100ch) {
  .ds-panel-header__desktop { display: none; }
  /* On a phone the aside takes a row of its own under the title, lined up with it. */
  .ds-panel-header--aside { flex-wrap: wrap; row-gap: 0.375rem; }
  .ds-panel-header--aside > .ds-panel-header__aside { order: 1; flex-basis: 100%; padding-inline-start: calc(32px + 0.75rem); }
  .ds-panel-header--aside:has(> .ds-panel-header__avatar) > .ds-panel-header__aside { padding-inline-start: calc(32px + 40px + 1.5rem); }
}

/* v5: the title in semibold at about 16 px on every width, the size of a name in the sidebar, as WhatsApp's;
   the desktop root is 19 px, so there it is the sm step, and the subtitle the 2xs (13 px). 20 px crowded the subtitle and the row. */
:where(html[data-visual="v5"]) .ds-panel-header__name { font-weight: var(--ds-weight-semibold); }

@media (min-width: 100ch) {
  :where(html[data-visual="v5"]) .ds-panel-header__name { font-size: var(--ds-font-size-sm); }
  :where(html[data-visual="v5"]) .ds-panel-header__subtitle { font-size: var(--ds-font-size-2xs); }
  /* The last action sits as far from the right edge as the back button or the avatar from the left. */
  :where(html[data-visual="v5"]) .ds-panel-header { padding-inline-end: 1rem; }
  /* The back button takes the room avatar's box (40 px, the same centre), so the title does not move
     between the room and its settings or members; the button inside stays the 32 px icon circle. */
  :where(html[data-visual="v5"]) .ds-panel-header__lead:not(.ds-panel-header__mobile) { display: inline-grid; flex-shrink: 0; place-items: center; inline-size: 40px; block-size: 40px; }
}