/**
 * Document shell + the daylight redesign's two-region layout.
 *
 *   #hero    the warm Darjeeling photo with the brand, language, greeting and the gold-glass mic
 *            over it — a fixed-proportion band that dissolves into the ivory canvas below.
 *   #canvas  everything that scrolls/flows: the quick-topic chips, the live conversation with its
 *            inline receipts, and the docked text fallback + safety control.
 *
 * The photo, frosted-glass surfaces, serif headlines and gold accents are layered on top by
 * css/daylight.css. This file owns only the skeleton: box model, flex regions, scroll containers.
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

html {
  /* Chat logs are scroll containers; keep the browser from fighting our own anchoring. */
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-indic);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Respect a reduced-motion preference everywhere, once. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Focus visibility — one ring, keyboard/AT only. */
:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* -------------------------------------------------------------------------------------------
 * Scrollbars — a designed element, not an OS accident (see the long note kept in git history).
 * The `@supports` gate is load-bearing: since Chromium 121, `scrollbar-width` other than `auto`
 * makes the engine ignore every `::-webkit-scrollbar` rule, so the standard props are scoped to
 * engines with no `::-webkit-scrollbar` at all (Firefox).
 * ----------------------------------------------------------------------------------------- */

@supports not selector(::-webkit-scrollbar) {
  #log,
  #market-panel,
  #chips,
  #text-input {
    scrollbar-width: thin;
    scrollbar-color: var(--scroll-thumb) var(--scroll-track);
  }
}

#log::-webkit-scrollbar,
#market-panel::-webkit-scrollbar,
#chips::-webkit-scrollbar,
#text-input::-webkit-scrollbar {
  width: 10px;
  height: 9px;
}

#log::-webkit-scrollbar-track,
#market-panel::-webkit-scrollbar-track,
#chips::-webkit-scrollbar-track,
#text-input::-webkit-scrollbar-track {
  background: var(--scroll-track);
  border-radius: var(--radius-pill);
}

#log::-webkit-scrollbar-thumb,
#market-panel::-webkit-scrollbar-thumb,
#chips::-webkit-scrollbar-thumb,
#text-input::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border-radius: var(--radius-pill);
  border: 3px solid transparent;
  background-clip: content-box;
}

#log::-webkit-scrollbar-thumb:hover,
#market-panel::-webkit-scrollbar-thumb:hover,
#text-input::-webkit-scrollbar-thumb:hover {
  background: var(--scroll-thumb-hover);
  background-clip: content-box;
}

/* -------------------------------------------------------------------------------------------
 * App frame — a single warm-ivory page the centred column sits on.
 * ----------------------------------------------------------------------------------------- */

#app {
  position: relative;
  /* `vh` FIRST, `dvh` second — a progressive-enhancement pair, not a duplicate.
     A browser that understands `dvh` takes the second and ignores the first; one that does not
     discards the `dvh` line as invalid and keeps `vh`. Without the fallback BOTH declarations are
     invalid there, `#app` gets no height at all, the page grows to fit its content, and the dock —
     the mic — slides below the fold. Reported 2026-09-14 as "the mic is invisible", on a layout
     that measures correctly at every viewport size in a current Chrome. */
  min-height: 100vh;
  min-height: 100dvh;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--paper-2) 0%, var(--paper) 42%, var(--paper-warm) 100%);
}

#stage {
  flex: 1;
  min-height: 0;
  display: flex;
  justify-content: center;
  position: relative;
}

#chat-pane {
  flex: 1;
  min-width: 0;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative; /* containing block for the #market-panel/#login-panel overlays */
  overflow: hidden; /* the hero photo bleeds to the pane edges, never past them */
  /* The pane, not the viewport, is what this UI fits into: a 460/480px column at every size from
     720px up. So `@media (max-width: 820px)` never fired on a laptop and ran the roomy branch in a
     phone-width box. Layout rules query the column instead — see the @container blocks in orb.css. */
  container: pane / inline-size;
}

/* -------------------------------------------------------------------------------------------
 * Hero — a fixed-proportion band. Its photo, scrim and copy are styled in daylight.css; here it
 * just claims its share of the column and stacks its three layers.
 * ----------------------------------------------------------------------------------------- */

/* No `min-height` here: both live modes set their own (glass.css for welcome, daylight.css for
   active) at higher specificity, so a vh floor on the bare `#hero` selector only ever looked like
   it was doing something. The dead `--orb-size` override in orb.css was the same mistake and it
   cost a broken hero — see the note at the foot of this file. */
#hero {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: calc(env(safe-area-inset-top) + var(--sp-4)) var(--sp-4) var(--sp-5);
}

#hero-top {
  position: relative;
  /* 4, not 3. The band holds the two popups in the hero — the ⋯ overflow sheet and the language
     picker — and both hang BELOW it, over #hero-copy. At an equal z-index the copy won on tree
     order alone (it comes later), so the greeting painted straight through the open menu; the
     sheet's own z-index:20 could not save it, being scoped inside this stacking context. Chrome
     with a popup outranks content: keep this above #hero-copy. */
  z-index: 4;
  flex: 0 0 auto; /* the teal band is chrome: it never squashes to make room for the greeting */
}

/* The greeting + mic cluster, pinned to the foot of the hero so it reads as rising out of the
   mist, with the brand row above and the canvas below. */
#hero-copy {
  position: relative;
  z-index: 3;
  margin-top: auto;
  padding-top: var(--sp-5);
  text-align: center;
  /* The one region that can outgrow its space (long greeting, ?stage=1, short laptop). #chat-pane
     clips, so it used to paint over the chips row instead — 49px of overlap at 1280x720, 183px with
     the composer open. Now it scrolls itself and everything around it stays put. `overflow-x` is
     pinned hidden, not left to compute to `auto`: the orb's invite ring scales past its own box. */
  min-height: 0;
  overflow: hidden auto;
  overscroll-behavior-y: contain;
  scrollbar-width: none; /* it scrolls only in the edge cases; a bar bisecting the hero reads as a bug */
}

#hero-copy::-webkit-scrollbar {
  display: none;
}

/* -------------------------------------------------------------------------------------------
 * Canvas — the flowing region under the hero. Column: chips (fixed), conversation (grows and
 * scrolls), composer dock (fixed at the foot).
 * ----------------------------------------------------------------------------------------- */

#canvas {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

#log-wrap {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  display: flex;
}

/* A soft fade at the top edge of the transcript, so the newest turns read as emerging from under
   the chips rather than stopping at a hard line. */
@supports (mask-image: linear-gradient(#000, transparent)) {
  #log {
    mask-image: linear-gradient(to bottom, transparent 0, #000 20px);
  }
}

/* -------------------------------------------------------------------------------------------
 * Breakpoints — one calm, centred phone-width column at every size. On a wide screen the warm
 * ivory page breathes around it rather than stretching the concierge across a projector.
 * ----------------------------------------------------------------------------------------- */

@media (min-width: 720px) {
  #chat-pane {
    max-width: 460px;
    margin: var(--sp-5) auto;
    height: calc(100vh - 2 * var(--sp-5));
    height: calc(100dvh - 2 * var(--sp-5));
    border-radius: var(--radius-lg);
    box-shadow: var(--lift);
  }
}

@media (min-width: 1200px) {
  #chat-pane {
    max-width: 480px;
  }
}

/* -------------------------------------------------------------------------------------------
 * Short viewports — a 1366x768 laptop with browser chrome leaves ~600px of pane, and the welcome
 * composition (band + greeting + sub + orb + two labels + chips + dock) does not fit at its full
 * rhythm. #hero-copy scrolling is the safety net; this is the part that keeps it from being
 * needed, by spending less on air and on the display size of the greeting.
 * ----------------------------------------------------------------------------------------- */
@media (max-height: 720px) {
  #hero {
    padding-bottom: var(--sp-3);
  }
  #hero-copy {
    padding-top: var(--sp-3);
  }
}