/* chrome screen — parity wave 2 scoped styles. Owner: the chrome agent.
   Global chrome fixes G1–G6. Loaded after desktop.css, so equal-specificity
   rules here win. Nothing in here touches per-screen content. */

/* ======================================================================
   G1 — Collapsible sidebar on desktop
   The hamburger was display:none above 960px and only toggled body.nav-open,
   which nothing responded to. On desktop it now toggles body.nav-collapsed,
   which animates the sidebar grid track to zero. Persisted in sessionStorage
   by the router so it survives route changes and reloads. The <960px drawer
   behaviour (body.nav-open) in desktop.css is untouched.
   ====================================================================== */
.layout { transition: grid-template-columns .2s ease; }

@media (min-width: 961px) {
  /* Reveal the toggle (desktop.css hides it) and make it feel actionable. */
  .hamburger { display: inline-flex; }

  body.nav-collapsed .layout { grid-template-columns: 0 1fr; }
  body.nav-collapsed .sidebar {
    overflow: hidden;
    padding-left: 0; padding-right: 0;
    border-right: 0;
  }
  /* Fade the sidebar contents out as the track closes so text doesn't smear. */
  body.nav-collapsed .sidebar > * { opacity: 0; transition: opacity .12s ease; }
}

/* ======================================================================
   G2 — the topbar no longer renders .tb-title for tenant screens (handled in
   router.js). Screens own the single page H1 via UI.pageHead. No CSS needed;
   the search simply flows to the left edge of the topbar.
   ====================================================================== */

/* ======================================================================
   G5 — a larger, more prominent AI-search bar in the topbar
   ====================================================================== */
.topbar .tb-search.tb-search-lg { max-width: 620px; margin: 0 auto 0 4px; }
.tb-search-lg form { padding: 8px 10px 8px 16px; }
.tb-search-lg form .ic { width: 20px; height: 20px; }
.tb-search-lg input { min-height: 34px; font-size: var(--fs-md); }

/* ======================================================================
   G4 — the "/" shortcut glyph only shows when the field is empty AND unfocused
   ====================================================================== */
.tb-search form:focus-within .kbd { display: none; }
.tb-search input:not(:placeholder-shown) ~ .kbd { display: none; }

/* ======================================================================
   G3 / G5 — search suggestion panel: empty-focus state + capped NL questions
   ====================================================================== */
/* Empty-focus intro line, framing this as Search. */
.tb-suggest .ts-intro {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 6px 8px; color: var(--muted); font-size: var(--fs-sm);
}
.tb-suggest .ts-intro .ic { width: 18px; height: 18px; color: var(--aqua-deep); flex: none; }

/* Starter chips (reused from Ask AssetIQ's "Try asking"). */
.tb-suggest .ts-chips .chip {
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer; max-width: 100%;
}
.tb-suggest .ts-chips .chip span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* The ≤2 natural-language question rows, sitting above the resource groups. */
.tb-suggest .ts-ai { display: flex; flex-direction: column; gap: 2px; margin-bottom: 4px; }
.tb-suggest .ts-airow {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: transparent; border: 0; padding: 9px 8px;
  border-radius: var(--r-sm); cursor: pointer;
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink);
}
.tb-suggest .ts-airow:hover,
.tb-suggest .ts-airow:focus-visible { background: var(--purple-soft); }
.tb-suggest .ts-airow .ic { width: 18px; height: 18px; color: var(--purple); flex: none; }
.tb-suggest .ts-airow span {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Recent searches list. */
.tb-suggest .ts-recent { display: flex; flex-direction: column; gap: 2px; }
.tb-suggest .ts-recent-row {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: transparent; border: 0; padding: 8px;
  border-radius: var(--r-sm); cursor: pointer;
  font-size: var(--fs-sm); color: var(--ink);
}
.tb-suggest .ts-recent-row:hover,
.tb-suggest .ts-recent-row:focus-visible { background: var(--aqua-soft, rgba(100,214,211,.14)); }
.tb-suggest .ts-recent-row .ic { width: 16px; height: 16px; color: var(--muted); flex: none; }
.tb-suggest .ts-recent-row span {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}