/* ============================================================================
   Answers — shared app shell
   The phone-width card (desktop) / full-screen (mobile) frame every screen
   uses, so Topics, Talk-to-a-person, and the chat all feel like one app.
   ========================================================================== */

/* Depends on design-tokens.css being <link>ed first (no @import:
   imported URLs can't carry the ?v= cache-busting version the HTML uses). */
html, body {
  height: 100%;
  margin: 0;
}
body {
  background: var(--ans-canvas);
  font-family: var(--ans-font-body);
  -webkit-font-smoothing: antialiased;
  color: var(--ans-ink);
}

.answers-app {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 420px;
  /* svh (small viewport height — the guaranteed-visible minimum, address
     bar fully shown) after the vh fallback, not dvh: real mobile browsers
     have been seen reporting dvh's LARGE value on first paint even while
     their address bar is still on screen, sizing this box taller than
     what's actually visible and pushing the pinned footer nav below the
     fold until the user scrolls the whole page. svh can't do that — it's
     already the worst case, so the footer is always on screen. The minor
     cost is a sliver of unused space at the bottom once the browser chrome
     collapses, which is far better than an unreachable nav bar. */
  height: 100vh;
  height: 100svh;
  max-height: 760px;
  margin: 24px auto;
  background: var(--ans-canvas);
  border-radius: 22px;
  /* clip, not hidden: overflow:hidden still leaves the frame a
     programmatically-scrollable container, and mobile browsers scroll it to
     reveal a keyboard-focused input — shifting the whole app shell (header
     off the top, nav mid-screen, dead strip below) and leaving it there.
     The off-canvas beta sheet/history panel give it scrollable overflow to
     shift into. clip removes the scroll container entirely; hidden stays
     first as the fallback for old engines. answers-pwa.js adds a scroll
     guard for browsers that only get the fallback. */
  overflow: hidden;
  overflow: clip;
  position: relative; /* anchors the slide-over history panel on every screen */
  box-shadow: 0 24px 60px rgba(0, 20, 45, 0.18), 0 0 0 1px var(--ans-line-soft);
}
@media (max-width: 480px) {
  /* Phones: the frame IS the app — the document must never scroll. Without
     this, the browser can scroll the page while the on-screen keyboard is
     up and some browsers leave that scroll offset behind after it closes,
     exposing a dead strip below the footer nav. answers-pwa.js pairs this
     by sizing the frame to the live viewport height. (Same rule lives in
     answers-webchat.css for the Chat page's own wrapper.) */
  html, body {
    overflow: hidden;
    overscroll-behavior: none;
  }
  .answers-app {
    margin: 0;
    max-width: none;
    max-height: none;
    height: 100vh;
    height: 100svh;
    border-radius: 0;
    box-shadow: none;
  }
}

/* ---- Shared app header (every screen except Welcome) ---------------------
   Layout: [back?] [history] [brand avatar + title(+status)] ... [auth].
   The history button and auth area are filled/toggled by answers-history.js;
   moved here from answers-webchat.css so all screens share one header. */
.answers-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--ans-surface);
  box-shadow: var(--ans-shadow-header);
  position: relative;
  z-index: 5;
}
.answers-header__back {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 40px;
  margin-left: -4px;
  color: var(--ans-blue-500);
  text-decoration: none;
  border-radius: 8px;
}
.answers-header__back svg { width: 11px; height: auto; display: block; }
.answers-header__back:hover { background: #f1f4f8; }
.answers-header__back:focus-visible {
  outline: 2px solid var(--ans-blue-500);
  outline-offset: 2px;
}
.answers-header__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ans-grad-avatar);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.answers-header__avatar svg { width: 22px; height: auto; display: block; }
.answers-header__title {
  font-size: 16.5px;
  font-weight: 600;
  color: var(--ans-navy-900);
  line-height: 1.1;
}
.answers-header__status {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--ans-fs-meta);
  color: var(--ans-green);
  margin-top: 2px;
}
.answers-header__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ans-green);
  display: block;
}

/* ---- Shared bottom tab bar (every primary screen) ------------------------ */
.answers-nav {
  flex-shrink: 0;
  display: flex;
  justify-content: space-around;
  padding: 9px 6px 22px;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-top: 1px solid rgba(10, 40, 80, 0.08);
}
.answers-nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  /* One color for every tab, active or not — font-weight is the only
     signal for the current page. Previously the active tab used a darker
     blue and any --soon placeholder was dimmed with opacity, so the bar
     showed three different shades at once; per 2026-07-02 feedback all
     icons should read as one consistent color. */
  color: #9aa7b8;
  font-size: 10.5px;
  font-weight: 500;
}
.answers-nav__item svg { width: 24px; height: 24px; }
.answers-nav__item--active { font-weight: 600; }
.answers-nav__item--soon {
  cursor: default;
  pointer-events: none;
}