/* ============================================================
   Responsive prototype shell (pattern from fb-ai-social)
   - Phone (< 640px): the app fills the screen like a real app,
     no phone frame, no fake status bar; a dark demo bar on top
     can be collapsed to a small pull tab.
   - iPad / desktop (>= 640px): demo toolbar on top + the 390×844
     phone frame centered, scaled down to fit the height (JS sets --app-scale).
   ============================================================ */
:root { --demo-h: 48px; --demo-bg: #222226; }

.demo-bar {
  position: relative; z-index: 10000; flex: none; box-sizing: content-box;
  display: flex; align-items: center; gap: 8px; height: var(--demo-h); padding: 0 8px;
  background: var(--demo-bg); color: #fff;
  font: var(--font-weight-semibold) var(--text-body-14) var(--font-family);
}
.demo-brand { display: flex; align-items: center; gap: 8px; flex: none; color: #fff; text-decoration: none; }
.demo-brand img { width: 28px; height: 28px; border-radius: 8px; }
.demo-brand span { white-space: nowrap; }
.demo-pick {
  position: relative; min-width: 0; height: 36px; display: flex; align-items: center; gap: 8px;
  padding: 0 12px; border-radius: 10px; background: rgba(255,255,255,.1);
}
.demo-pick-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-pick svg { flex: none; width: 16px; height: 16px; opacity: .7; }
.demo-pick { border: none; color: #fff; font: inherit; text-align: left; cursor: pointer; width: 100%; }
.demo-pick-wrap { position: relative; flex: 1; min-width: 0; }
/* screen menu — design-system surface: white card, radius 16, card shadow, Body-14/16 */
.demo-menu {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 10002;
  max-height: min(70vh, 560px); overflow-y: auto; overscroll-behavior: contain; padding: 8px;
  border-radius: 16px; background: var(--theme-on-primary); box-shadow: 0 12px 32px rgba(34,34,38,.18);
}
.demo-menu[hidden] { display: none; }
.demo-menu-group { padding: 12px 12px 4px; font: var(--font-weight-semibold) var(--text-body-12) var(--font-family); color: var(--content-sub); text-transform: uppercase; letter-spacing: .04em; }
.demo-menu-item {
  width: 100%; min-height: 44px; display: flex; align-items: center; gap: 12px; padding: 8px 12px;
  border: none; border-radius: 12px; background: none; text-align: left; cursor: pointer;
  font: var(--font-weight-semibold) var(--text-body-14) var(--font-family); color: var(--content-main);
}
.demo-menu-item span { flex: 1; min-width: 0; }
.demo-menu-item:hover { background: var(--theme-surface); }
.demo-menu-item.on { background: var(--palette-pink-5); color: var(--content-primary); }
.demo-menu-check { display: none; flex: none; width: 20px; height: 20px; border-radius: 99px; background: var(--theme-primary); place-items: center; }
.demo-menu-item.on .demo-menu-check { display: grid; }
.demo-menu-check img { width: 12px; height: 12px; }
.demo-scrim { position: fixed; inset: 0; z-index: 9999; /* under the bar (10000), whose menu must stay clickable */ display: none; background: rgba(34,34,38,.4); }
html.demo-menu-open .demo-scrim { display: block; }
.demo-opt { flex: none; display: flex; gap: 2px; padding: 2px; border-radius: 10px; background: rgba(255,255,255,.1); }
.demo-opt[hidden] { display: none; }
.demo-opt button { height: 32px; padding: 0 10px; border: none; border-radius: 8px; background: none; color: rgba(255,255,255,.7); font: inherit; cursor: pointer; }
.demo-opt button.on { background: #fff; color: var(--content-main); }
.demo-btn {
  flex: none; width: 36px; height: 36px; display: grid; place-items: center; padding: 0;
  border: none; border-radius: 10px; background: rgba(255,255,255,.1); color: #fff; cursor: pointer;
}
.demo-btn svg { width: 18px; height: 18px; }
.demo-btn--light { background: #fff; color: var(--content-main); }
.frame-status { display: none; }
.demo-tab {
  position: fixed; top: 0; left: 50%; z-index: 10000; transform: translateX(-50%);
  display: none; place-items: center; width: 56px; height: 20px; padding: 0; border: none;
  border-radius: 0 0 12px 12px; background: rgba(34,34,38,.8); color: #fff;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); cursor: pointer;
}
.demo-tab svg { width: 14px; height: 14px; }

/* ---------- iPad / desktop: toolbar + centered, scaled phone frame ---------- */
@media (min-width: 640px) {
  html, body { display: block; height: 100%; }
  body { display: flex; flex-direction: column; align-items: center; overflow: hidden; background: #e8e0ec; }
  .demo-bar { align-self: stretch; height: 56px; padding: 0 16px; gap: 12px; }
  .demo-pick-wrap { flex: 0 1 360px; margin: 0 auto; }
  .demo-scrim { background: transparent; }
  .demo-collapse { display: none; }
  .demo-stage { flex: 1; min-height: 0; width: 100%; display: flex; justify-content: center; align-items: flex-start; overflow: auto; }
  #app { zoom: var(--app-scale, 1); margin: 24px 0; }
  /* status bar over every screen (under toasts, 9900) — hidden where the screen draws its own */
  #app .frame-status { display: flex; position: absolute; top: 0; left: 0; right: 0; z-index: 9800; pointer-events: none; }
  html.own-status #app .frame-status { display: none; }
  /* screens without their own bar are light, so keep it dark even over the Feed tab (which whitens .status-bar) */
  #app .status-bar.frame-status .time { color: var(--color-content-main); }
  #app .status-bar.frame-status .status-icons .icon { filter: none; }
}
@media (min-width: 640px) and (max-width: 899px) { .demo-brand span { display: none; } }

/* ---------- real phone: full-screen app under the demo bar ---------- */
@media (max-width: 639px) {
  /* make room for the Tabs / Accordion switch: the screen menu still names the screen */
  .demo-bar:has(.demo-opt:not([hidden])) .demo-brand { display: none; }
  :root { --app-h: calc(100dvh - var(--demo-h) - env(safe-area-inset-top)); }
  html.demo-hidden { --demo-h: 0px; }
  html { display: block; }
  html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
  body { width: 100%; display: flex; flex-direction: column; align-items: stretch; background: var(--color-surface); -webkit-tap-highlight-color: transparent; }
  .demo-bar { padding-top: env(safe-area-inset-top); }
  .demo-brand span { display: none; }
  .demo-menu { position: fixed; top: calc(var(--demo-h) + env(safe-area-inset-top) + 4px); left: 8px; right: 8px; max-height: 75dvh; }
  .demo-menu-item { min-height: 48px; font: var(--font-weight-semibold) var(--text-body-16) var(--font-family); }
  html.demo-hidden .demo-bar { display: none; }
  html.demo-hidden .demo-tab { display: grid; }
  html.demo-hidden { --app-h: 100dvh; }
  .demo-stage { flex: 1; min-height: 0; display: flex; }
  #app.phone-shell {
    width: 100%; height: var(--app-h); min-height: 0; margin: 0;
    border-radius: 0; box-shadow: none; touch-action: manipulation;
  }
  #app.phone-shell::before { border-radius: 0 0 60% 60% / 0 0 40px 40px; }
  #app .page-screen, #app .allr-backdrop, #app .gc-bg, #app .gc-manage-backdrop { border-radius: 0; }
  /* the phone has its own clock and battery: drop the fake 9:41 bar to a thin spacer */
  #app { --status-bar-h: 12px; }
  #app .status-bar { height: var(--status-bar-h); padding: 0; overflow: hidden; visibility: hidden; }
  #app .bk-screen { padding-top: var(--status-bar-h); }
  /* headers built for the 44px fake status bar (44 + 12): keep the same 12px below the slim phone inset */
  #app .appt-header, #app .notif-page-header, #app .profile-header, #app .deals-header, #app .avail-now-header,
  #app .trending-header, #app .srch-content, #app .map-top, #app .cam-top { padding-top: calc(var(--status-bar-h) + 12px); }
  #app .set-head { padding-top: calc(var(--status-bar-h) + 10px); }
  #app .home-indicator-bar { opacity: 0; }
}