/* ═══════════════════════════════════════════════════════════════
   bottom-rail.css — fixed home-screen speak rail
   ───────────────────────────────────────────────────────────────
   Mirrors the West Hartford kiosk's bottom rail
   (tinkytown.com/ct/West-hartford/townhall): pins the
   Tap-to-Speak → Type/Clear/Send → 👂 Listen for Staff →
   Conversation ▾ stack to the bottom of the viewport, ABOVE the
   demo-bottom-nav (Home / Numbers / Translate / ADA).

   Loaded AFTER css/styles.css and css/demo-bottom-nav.css so the
   fixed-positioning + body-padding-bottom overrides win the cascade
   without !important. Keeps styles.css off the growth path
   (it's already at 3,700 lines, HARD STOP per global rules).
   ═══════════════════════════════════════════════════════════════ */

/* Rail measurements — exposed as custom props so body bottom-padding
   stays in sync if the rail height changes. */
:root {
  --rail-height: 232px;          /* tap-to-speak + chat row + listen-for-staff + conv pill + paddings */
  --bottom-nav-height: 58px;     /* mirrors demo-bottom-nav.css */
}

.ask-wrap {
  /* Override the inline-flow ask-wrap rule in styles.css line 863
     (.ask-wrap { width:100%; ...; flex-shrink:0; }). We pin it
     to the bottom instead of letting it sit at the end of the
     scroll. */
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px));
  /* z-index 55 sits BELOW demo-bottom-nav (60) so nothing fights
     the bottom nav, and ABOVE the sticky caption pill (50) + tile
     grid for visual hierarchy. */
  z-index: 55;
  max-width: 600px;              /* matches .app-layout content width */
  margin: 0 auto;
  padding: 10px 14px;
  background: rgba(20, 17, 14, 0.96);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  /* Keep the flex-column stacking from the original rule. */
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Make sure tile grid + sticky pill clear the fixed rail. The
   pre-existing body { padding-bottom: calc(58px + safe-area) } in
   demo-bottom-nav.css only accounted for the nav — we now need
   space for nav + rail. */
body {
  padding-bottom: calc(var(--rail-height) + var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px));
}

/* Demo autoplay hides the bottom-nav (body.demo-running .demo-bottom-nav
   {display:none} from demo-bottom-nav.css line 69) AND zeroes the
   body padding-bottom. Keep that behaviour: the cinematic demo owns
   the screen and the rail comes back when endDemo() removes
   .demo-running. */
body.demo-running .ask-wrap { display: none; }
body.demo-running { padding-bottom: 0; }

/* Listen overlay (the immersive "Their Turn" panel) takes the whole
   screen. Hide the rail under it so it doesn't peek out. */
body:has(.listen-overlay.active) .ask-wrap { display: none; }
.listen-overlay.active ~ .ask-wrap { display: none; }

/* Kiosk-active path (when running the ordering kiosk inside the demo)
   already had a 70px bump in styles.css line 1739. Keep the rail
   slightly higher so the cart bar doesn't push it. */
body.kiosk-active .ask-wrap {
  bottom: calc(var(--bottom-nav-height) + 70px + env(safe-area-inset-bottom, 0px));
}