/* Compact the controls inside the available header width, never below the logo. */
html .agent-topbar {
  container: agent-header / inline-size;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  isolation: isolate;
}
/* Cover the full top edge while retaining the header's content alignment. */
html .agent-topbar::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--color-page);
  box-shadow: 0 0 0 100vmax var(--color-page);
  clip-path: inset(0 -100vmax);
}
html .agent-topbar-brand { flex: 0 0 auto; }
html .agent-shell-data > .agent-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--color-page);
}
html .agent-topbar nav {
  display: flex;
  flex: 0 1 auto;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
  width: auto;
  margin: 0;
  gap: .25rem;
}
html .agent-topbar nav :is(a, button) { position: relative; flex: 0 0 auto; white-space: nowrap; }
html .agent-topbar .agent-nav-icon {
  display: none;
  flex: 0 0 auto;
  width: 1.3rem;
  height: 1.3rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@container agent-header (max-width: 38rem) {
  .agent-topbar .agent-topbar-logout span { display: none; }
  .agent-topbar .agent-topbar-logout svg { display: block; }
  .agent-topbar nav .agent-topbar-logout { width: 2.75rem; min-width: 2.75rem; padding-inline: 0; }
}
@container agent-header (max-width: 34rem) {
  .agent-topbar [data-nav-settings] .agent-nav-label { display: none; }
  html .agent-topbar [data-nav-settings] .agent-nav-icon { display: block; }
  html .agent-topbar nav [data-nav-settings] { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; min-width: 2.75rem; padding-inline: 0; }
}
@container agent-header (max-width: 28rem) {
  .agent-topbar [data-nav-chat] .agent-nav-label { display: none; }
  html .agent-topbar [data-nav-chat] .agent-nav-icon { display: block; }
  html .agent-topbar nav [data-nav-chat] { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; min-width: 2.75rem; padding-inline: 0; }
  .agent-topbar [data-nav-chat] .agent-unread-badge { position: absolute; top: -.2rem; right: -.2rem; }
}
@media (max-width: 760px) {
  html .agent-topbar { gap: .4rem; }
  html .agent-topbar nav :is(a, button) { min-height: 2.75rem; }
}