/* The app header keeps fixed touch targets; workspace selectors get a separate
   row when space is limited instead of squeezing icons or hiding scope. */
.topbar {
  height: auto;
  min-height: var(--topbar-h);
  gap: 8px;
  padding-block: 8px;
}

.topbar > .icon-btn,
.topbar > .ai-btn,
.topbar__anchor,
.topbar .userchip,
.topbar .icon-btn {
  flex-shrink: 0;
}

.topbar > button.topbar__search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 180px;
  min-width: 120px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: var(--r-full);
  background: var(--bg-sunken);
  text-align: left;
  color: var(--ink-3);
}

.topbar > .topbar__search:hover { border-color: var(--line-strong); }
.topbar > .topbar__search svg {
  position: static;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
}
.topbar__search-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar > .topbar__search .topbar__kbd { position: static; margin-left: auto; flex-shrink: 0; }
.topbar__spacer { flex: 0 1 12px; }

.topbar__scope { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 0 1 auto; }
.topbar__brands { min-width: 0; }
.topbar__brand-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; max-width: 400px; }
.topbar__brand-chips .chip { flex-shrink: 0; white-space: nowrap; }
.topbar__scope-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.topbar__scope-field > span { display: none; color: var(--ink-3); font-size: var(--t-2xs); font-weight: 600; }
.topbar__scope-field .select { width: 100%; min-width: 0; text-overflow: ellipsis; }
.topbar__brand-select { display: none; }
.topbar__location { width: 170px; flex: 0 1 170px; }

.topbar .userchip { max-width: 224px; }
.topbar .userchip__meta { max-width: 150px; }
.topbar .userchip__meta > * { overflow: hidden; text-overflow: ellipsis; }
.topbar__anchor { position: relative; }
.topbar__user { margin-inline-start: auto; }
/* A filter makes fixed descendants relative to the header. Remove it while a
   panel is open so its dismiss layer and phone panel use the whole viewport. */
.topbar:has(.topbar__popover) {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: var(--surface-solid);
}
/* A header panel (chats, notifications, account) must be above the mini chats
   (85). On wide screens the header itself rises while a panel is open (modals
   stay above at 90+). Where the sidebar is a drawer (30) that must stay above
   the header, the mini chats drop just below the header instead. */
@media (min-width: 1081px) {
  .topbar:has(.topbar__popover) { z-index: 87; }
}
@media (max-width: 1080px) {
  body:has(.topbar__popover) .chat-dock { z-index: 19; }
}
.topbar__popover {
  width: 300px;
  min-width: 0;
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 88px);
  overflow: auto;
  overscroll-behavior: contain;
  z-index: 52;
}
.topbar__popover.popover--wide { width: 380px; min-width: 0; }
.topbar__popover .popover__item { white-space: normal; overflow-wrap: anywhere; }
.topbar__popover .popover__label { overflow-wrap: anywhere; }
.topbar__popover-close { margin-left: auto; }
.topbar__account { align-items: flex-start; gap: 8px; padding: 8px 10px; overflow-wrap: anywhere; }
.topbar__account .icon-btn { margin-top: -4px; margin-right: -6px; }
.topbar__dismiss { position: fixed; inset: 0; z-index: 50; cursor: default; }
.topbar__anchor:has(.topbar__popover) { z-index: 51; }
.sidebar__focusguard { display: none; }
.shell__scrim { z-index: 25; width: 100%; height: 100%; }

@media (max-width: 1600px) {
  .topbar__brand-chips { max-width: 300px; }
  .topbar .userchip__meta { max-width: 110px; }
}

@media (max-width: 1440px) {
  .topbar__brand-chips { display: none; }
  .topbar__brand-select { display: flex; }
  .topbar__brands { width: 160px; flex: 0 1 160px; }
  .topbar .userchip { width: 44px; height: 44px; padding: 4px; justify-content: center; }
  .topbar .userchip__meta,
  .topbar .userchip__chevron { display: none; }
  .topbar > .topbar__search .topbar__kbd { display: none; }
}

@media (max-width: 1080px) {
  .sidebar {
    width: min(320px, calc(100vw - 40px));
    max-height: 100dvh;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    visibility: hidden;
    pointer-events: none;
  }
  .shell.is-drawer-open .sidebar { visibility: visible; pointer-events: auto; }
  .shell.is-drawer-open .content { overflow: hidden; }
  .sidebar__brand,
  .shell.is-collapsed .sidebar__brand {
    min-height: 64px;
    justify-content: flex-start;
    gap: 10px;
    padding: 8px 14px;
  }
  .sidebar__title { flex: 1; }
  .sidebar__title > * { overflow: hidden; text-overflow: ellipsis; }
  .sidebar__close { width: 44px; height: 44px; margin-right: -6px; flex-shrink: 0; }
  .sidebar__desktop-foot { display: none; }
  .shell.is-collapsed .sidebar__title { display: flex; }
  .shell.is-collapsed .sidebar .nav-link__text,
  .shell.is-collapsed .sidebar .nav-group__label,
  .shell.is-collapsed .sidebar .nav-link__badge { display: block; }
  .sidebar .nav-link,
  .shell.is-collapsed .sidebar .nav-link { min-height: 46px; justify-content: flex-start; padding: 11px 10px; }
  .sidebar .nav-link__text { white-space: normal; line-height: 1.35; }
  .shell.is-collapsed .sidebar .nav-group__label { height: auto; padding: 14px 10px 6px; }
  .sidebar__focusguard { display: block; position: absolute; width: 1px; height: 1px; overflow: hidden; }
}

@media (max-width: 900px) {
  .topbar { flex-wrap: wrap; column-gap: 8px; row-gap: 6px; padding: 6px 12px; }
  .topbar > .topbar__search { max-width: none; }
  .topbar__spacer { flex: 1 1 0; }
  .topbar__scope { order: 10; flex: 1 0 100%; width: 100%; padding-bottom: 4px; }
  .topbar__brands,
  .topbar__location { flex: 1 1 0; width: 0; }
  .topbar__scope-field > span { display: block; }
  .topbar__scope-field .select { min-height: 44px; font-size: 16px; }
  .topbar__popover { position: fixed; inset: 64px 12px auto auto; max-height: calc(100dvh - 80px); }
}

@media (max-width: 760px) {
  .topbar { gap: 4px; padding: max(6px, env(safe-area-inset-top, 0px)) max(8px, env(safe-area-inset-right, 0px)) 6px max(8px, env(safe-area-inset-left, 0px)); }
  .topbar > .icon-btn,
  .topbar > .ai-btn,
  .topbar__anchor > .icon-btn,
  .topbar .userchip { width: 44px; height: 44px; min-width: 44px; }
  .topbar > button.topbar__search { flex: 0 0 44px; width: 44px; min-width: 44px; height: 44px; padding: 0; justify-content: center; }
  .topbar__search-label,
  .topbar > .topbar__utility { display: none; }
  .topbar__spacer { flex: 1 1 0; min-width: 0; }
  .topbar__scope { gap: 8px; margin-top: 2px; }
  .topbar__popover { inset: 62px 8px auto; width: auto; max-width: none; max-height: calc(100dvh - 78px - env(safe-area-inset-bottom, 0px)); }
  .topbar__popover.popover--wide { width: auto; }
  .topbar__popover .popover__item,
  .topbar__popover .themeswitch__item { min-height: 44px; }
  .topbar__popover .icon-btn { width: 44px; height: 44px; }
}

@media (max-width: 359px) {
  .topbar { column-gap: 2px; }
}