/* OAS6/UIQ T2-R2: the three page destinations inside the desktop topbar,
   composing the full-height app frame with the Agents
   rail beneath it. All colors from theme tokens; nothing is hard-coded so
   light and dark read identically by construction. */
.app-top-nav {
  display: none;
}

@media (min-width: 821px) {
  .app-top-nav {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    flex: 1 1 auto;
    min-width: 0;
    align-self: center;
    margin: 0 0.9rem;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .app-top-nav::-webkit-scrollbar {
    display: none;
  }

  .app-top-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    line-height: 1.2;
    padding: 0.35rem 0.6rem;
    border: 0;
    border-radius: 0.45rem;
    background: transparent;
    color: var(--ui-text-soft, #c3c9d6);
    font: 600 0.8rem/1.2 var(--font-ui, system-ui), sans-serif;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
  }

  .app-top-nav-link .ui-icon {
    width: 1rem;
    height: 1rem;
    flex: none;
  }

  .app-top-nav-link:hover {
    background: var(--ui-hover, #1b2130);
    color: var(--ui-text, #e8eaf0);
  }

  .app-top-nav-link:focus-visible {
    outline: 2px solid var(--ui-accent, #4da3ff);
    outline-offset: -2px;
  }

  .app-top-nav-link[aria-current="page"] {
    background: color-mix(in srgb, var(--ui-accent, #4da3ff) 14%, transparent);
    color: var(--ui-text, #e8eaf0);
  }
}

/* OAS6/UIQ T2-R2: the compact brand anchors the page-destination group. */
.app-brand {
  display: flex;
  align-items: center;
  /* foundation.css wraps .title-row — the brand is one row, always. */
  flex-wrap: nowrap;
  gap: 0.5rem;
  min-width: 0;
  white-space: nowrap;
}

.app-brand .brand-mark {
  width: 1.65rem;
  height: 1.65rem;
  flex: none;
}

.app-brand-name {
  font: 650 0.95rem/1.1 var(--font-ui, system-ui), sans-serif;
  color: var(--ui-text, #e8eaf0);
  white-space: nowrap;
}

@media (max-width: 820px) {
  /* Phone: the bottom nav owns page destinations. */
  .app-brand-name {
    display: none;
  }
}

/* The topbar's design floor is 15 + 34 + 15 = 64px (chrome-fidelity):
   every added control commits to the 34px content band. */
.title-row {
  align-self: center;
}

@media (max-width: 820px) {
  /* The phone topbar is a fixed 390px budget: the overflow Menu goes
     icon-only (its drawer rows carry their own labels), keeping the
     destination chrome overflow-free. */
  #shell-overflow-toggle span:not(.ui-icon) {
    display: none;
  }

  #shell-overflow-toggle {
    min-width: 2.4rem;
    padding-inline: 0.4rem;
  }
}