/* CONTRACT: .shell is the authenticated viewport. It paints
   `var(--bg)` solidly across the entire screen (position: fixed;
   inset: 0). Any ornament on html / body pseudo-elements is hidden
   behind this layer once logged in — paint ornaments on
   `.shell::before` / `.shell::after` instead.

   `--bg` is therefore an OPAQUE FILL variable. Themes that set it
   to rgba(..., <1) will leak whatever sits behind through every
   surface that paints it. */
.shell {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg); /* CONTRACT: opaque app-wide fill — every surface beneath this must assume nothing shows through */
}

/* ── Logo bar (always visible, toggles drawer) ────── */

.shell__bar {
  flex-shrink: 0;
  height: calc(58px + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
  display: flex;
  align-items: center;
  padding-left: 16px;
  padding-right: 16px;
  background: var(--bg); /* CONTRACT: opaque — bar floats above content, must hide whatever scrolls under it */
  border-bottom: 1px solid var(--border-light); /* CONTRACT: subtle 1px hairline; pairs with --bg above */
  position: relative;
  z-index: 100;
  -webkit-tap-highlight-color: transparent;
}

.shell__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

/* Keyboard-only focus ring on the brand/drawer toggle. Matches the
   drawer row ring style (Drawer.css:235-241) — same accent + offset. */
.shell__brand:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.shell__logo {
  width: 34px;
  height: 34px;
  border-radius: 6px;
}

.shell__wordmark {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text); /* CONTRACT: high-contrast text on the opaque --bg of .shell__bar */
}

/* ── Content ───────────────────────────────────────── */

.shell__content {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  /* Containing block for absolutely-positioned .shell__view
     siblings. Each view is full-bleed, stacked, and toggled via
     visibility — see .shell__view rationale below. */
  position: relative;
}

/* `.shell__view` wraps each persisted view (ChatView, AppCanvas).
   All views are laid out simultaneously (position: absolute, inset
   0) and toggled via `visibility` + `pointer-events`. Why not
   display:none?
     - display:none forces a full layout reflow on each view-flip.
       ChatView's ResizeObserver fires (size 0 -> real), spacer
       recalculates, scroll restoration kicks in -> visible jitter.
     - Iframes inside display:none parents pause some painting; on
       un-hide, Chrome repaints from scratch -> "elements
       disappear/reappear" feel reported on app-back-nav.
   visibility:hidden keeps the layout stable so views are instantly
   ready when re-shown. The cost is constant layout for all
   mounted views — acceptable since at most 2-3 are mounted (the
   active chat, optionally a recently-visited app, optionally
   settings). */
.shell__view {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  visibility: hidden;
  pointer-events: none;
}

.shell__view--active {
  visibility: visible;
  pointer-events: auto;
}

/* The install affordance lives in the first-sign-in walkthrough now
   (see frontend/src/components/Walkthrough/WalkthroughOverlay.jsx).
   beforeinstallprompt capture and the drawer banner that used to
   live here are gone — the walkthrough's "Add to home screen" step
   tells the user how to install for their platform exactly once,
   then never appears again. Sub-app install lives in the standalone
   card surfaced from drawer ⋮ on a mini-app. */

  /* Global offline indicator pill in the top bar. Shown only when the
     browser reports offline (useOnlineStatus). Keeps the user oriented
     so they aren't guessing about connectivity. */
  .shell__offline {
    margin-left: auto;
    align-self: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: var(--danger, #f87171);
    background: color-mix(in srgb, var(--danger, #f87171) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--danger, #f87171) 35%, transparent);
    white-space: nowrap;
  }
