/* public/css/app-shell.css
   Phase 3 nav-port styles. Loaded once from views/partials/head.ejs.
   See docs/NAVIGATION_PORT.md §4 for the visual contract. */

/* ── BENED button (lives in app bar / nav) ───────────────────── */
.bened-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(251, 191, 36, 0.45);
  background: linear-gradient(135deg, rgba(251,191,36,.15), rgba(217,119,6,.10));
  color: #fbbf24;
  cursor: pointer;
  transition: transform 120ms ease, background 120ms ease, box-shadow 120ms ease;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
  padding: 0;
}
.bened-button:hover,
.bened-button:focus-visible {
  background: linear-gradient(135deg, rgba(251,191,36,.25), rgba(217,119,6,.18));
  box-shadow: 0 0 12px rgba(251, 191, 36, 0.35);
  outline: none;
}
.bened-button:active { transform: scale(0.94); }
.bened-button[aria-expanded="true"] {
  background: linear-gradient(135deg, rgba(251,191,36,.35), rgba(217,119,6,.25));
  box-shadow: 0 0 16px rgba(251, 191, 36, 0.55);
}
.bened-button__glyph {
  filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.5));
  pointer-events: none;
}

/* ── BENED ecosystem sheet ───────────────────────────────────── */
.bened-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 90;
  opacity: 0;
  transition: opacity 180ms ease;
}
.bened-sheet-backdrop.is-open { opacity: 1; }

.bened-sheet {
  position: fixed;
  z-index: 91;
  background: #111;
  color: #e5e7eb;
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.6);
  /* Mobile first — bottom sheet */
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 18px 18px 0 0;
  max-height: 80vh;
  transform: translateY(100%);
  transition: transform 220ms cubic-bezier(0.32, 0.72, 0, 1);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.bened-sheet.is-open { transform: translateY(0); }

@media (min-width: 768px) {
  .bened-sheet {
    /* Desktop — anchored dropdown style */
    left: auto;
    right: 16px;
    bottom: auto;
    top: 64px;
    width: 320px;
    max-height: 70vh;
    border-radius: 14px;
    transform: translateY(-8px);
    opacity: 0;
    transition: transform 160ms ease, opacity 160ms ease;
  }
  .bened-sheet.is-open { transform: translateY(0); opacity: 1; }
  .bened-sheet-backdrop { display: none; } /* desktop closes on outside-click via JS, no scrim */
}

.bened-sheet__handle {
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.18);
  margin: 8px auto 4px;
}
@media (min-width: 768px) { .bened-sheet__handle { display: none; } }

.bened-sheet__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.bened-sheet__avatar {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: #7c3aed;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 16px;
  overflow: hidden;
  flex-shrink: 0;
}
.bened-sheet__avatar img { width: 100%; height: 100%; object-fit: cover; }
.bened-sheet__id { flex: 1; min-width: 0; }
.bened-sheet__handle {
  /* Note: same class name reused for h-style id row (acceptable per BEM-ish) */
}
.bened-sheet__id .bened-sheet__handle {
  width: auto; height: auto; background: none; margin: 0;
  font-size: 15px; font-weight: 600; color: #f4f4f5;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bened-sheet__role {
  font-size: 12px;
  color: #9ca3af;
  margin-top: 2px;
}
.bened-sheet__close {
  background: none;
  border: none;
  color: #9ca3af;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  -webkit-tap-highlight-color: transparent;
}
.bened-sheet__close:hover { color: #fff; }

.bened-sheet__list {
  list-style: none;
  margin: 0;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.bened-sheet__list:last-child { border-bottom: none; }
.bened-sheet__list a,
.bened-sheet__list button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  background: none;
  border: none;
  color: #e5e7eb;
  font-size: 14px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.bened-sheet__list a:hover,
.bened-sheet__list button:hover {
  background: rgba(255, 255, 255, 0.04);
}
.bs-icon { width: 20px; text-align: center; flex-shrink: 0; }
.bs-chev { margin-left: auto; color: #6b7280; }
.bs-danger { color: #f87171 !important; }

.bened-sheet__rooms {
  padding: 4px 16px 12px 48px;
  background: rgba(0, 0, 0, 0.25);
}
.bs-rooms__loading {
  font-size: 12px;
  color: #6b7280;
  padding: 8px 0;
}
.bs-rooms__list { list-style: none; margin: 0; padding: 0; }
.bs-rooms__list li a {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; color: #cbd5e1; font-size: 13px;
  text-decoration: none;
}
.bs-rooms__list li a:hover { color: #fbbf24; }
.bs-rooms__list .bs-room-glyph {
  width: 18px; height: 18px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}

.bened-sheet__cta-wrap { padding: 16px; }
.bened-sheet__cta {
  display: block;
  text-align: center;
  padding: 10px 16px;
  background: #fbbf24;
  color: #0a0a0a;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
}

/* ── Bottom tabs (Phase 3 scaffold; hidden via [hidden] attr) ── */
.bened-bottom-tabs {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  background: rgba(15, 15, 15, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  z-index: 60;
  padding-bottom: env(safe-area-inset-bottom, 0);
  height: calc(56px + env(safe-area-inset-bottom, 0px));
}
.bened-bottom-tabs[hidden] { display: none !important; }
/* Never show the new bottom-tabs alongside the legacy #pwaBottomNav.
   The legacy one is `display: flex` only on `html.capacitor-native`
   (and on PWA standalone mobile). On those surfaces, force the new
   tabs hidden until Phase 4 fully replaces #pwaBottomNav. */
html.capacitor-native #bened-bottom-tabs,
body.is-native #bened-bottom-tabs {
  display: none !important;
}
@media (display-mode: standalone) {
  #bened-bottom-tabs { display: none !important; }
}
.bb-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-decoration: none;
  color: #9ca3af;
  font-size: 11px;
  -webkit-tap-highlight-color: transparent;
}
.bb-tab.is-active { color: #fbbf24; }
.bb-icon { width: 22px; height: 22px; }

/* ── App bar / shell scaffolds (used by Phase 4) ─────────────── */
.app-bar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(15, 15, 15, 0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: env(safe-area-inset-top, 0);
}
.app-bar__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  height: 56px;
}
.app-bar__back {
  background: none; border: none; color: #e5e7eb;
  padding: 6px; cursor: pointer; border-radius: 999px;
  -webkit-tap-highlight-color: transparent;
}
.app-bar__back:hover { background: rgba(255, 255, 255, 0.06); }
.app-bar__logo {
  display: flex; align-items: center; gap: 8px;
  text-decoration: none; color: inherit; flex-shrink: 0;
}
.app-bar__title { font-size: 17px; font-weight: 600; }
.app-bar__title-accent { color: #fbbf24; }
.app-bar__spacer { flex: 1; }
.app-bar__action {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 999px;
  color: #e5e7eb; text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.app-bar__action:hover { background: rgba(255, 255, 255, 0.06); }

.app-content { min-height: 50vh; }

/* ── HTMX swap transitions (used by Phase 4) ─────────────────── */
#app-content.htmx-swapping { opacity: 0; transition: opacity 100ms ease; }
#app-content.htmx-settling  { opacity: 1; }

/* Native-only safe-area bumps */
body.is-native .app-bar { padding-top: env(safe-area-inset-top, 0); }

/* ─────────────────────────────────────────────────────────────
   LOCKED APP SHELL  (rev 2 — no body position:fixed)
   ─────────────────────────────────────────────────────────────
   Goal: top header + bottom nav stay glued to the device while
   only the inner content scrolls.

   The previous revision put `position: fixed; inset: 0` on <body>.
   On iOS WKWebView that re-anchors position:fixed descendants to
   the body's containing block in some cases — which is why the
   bottom nav appeared "lifted up" with a black band beneath it
   (Jeremy's report). The body itself was 100dvh tall (excluding
   the home-indicator zone), so a child `position: fixed; bottom: 0`
   resolved to the *body's* bottom, not the viewport's.

   This revision keeps body in normal flow:
     - <html> + <body> are sized to the viewport with overflow:hidden
       and overscroll-behavior:none → kills the rubber-band drag.
     - Body padding remains var(--pwa-header-h)/var(--pwa-bottom-h)
       so its content doesn't go under the fixed chrome (legacy rules
       in style.css already do this; we simply don't override them).
     - The page's primary scroll container becomes the only thing
       that scrolls, with its own overflow-y:auto.
   ──────────────────────────────────────────────────────────── */

html.capacitor-native,
html.capacitor-native body {
  height: 100%;
  height: 100dvh;
  overflow: hidden !important;
  overscroll-behavior: none;
}

/* Primary scroll viewport: pages with the standard sidebar wrapper. */
html.capacitor-native body > .page-with-sidebar,
html.capacitor-native body > #sidebar-content {
  /* Use min-height + height so the wrapper fills the available space
     between header and bottom-nav (body padding already reserves both). */
  height: calc(100dvh - var(--pwa-header-h) - var(--pwa-bottom-h));
  min-height: 0 !important;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  /* Cancel the body padding for THIS element only — the body still
     reserves the chrome zones, but we want the scroll container to
     start at y=header-height, not header-height + header-height. */
  margin: 0 !important;
}

/* Fallback scroll viewport for pages that put <main> directly under <body>. */
html.capacitor-native body > main {
  height: calc(100dvh - var(--pwa-header-h) - var(--pwa-bottom-h));
  min-height: 0 !important;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  margin: 0 !important;
}

/* Hide the marketing footer on native — bottom tab bar replaces it. */
html.capacitor-native body > footer { display: none !important; }

/* Same lock for installed PWAs on mobile. */
@media (display-mode: standalone) and (max-width: 768px) {
  html, body {
    height: 100%;
    height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
  }
  body > .page-with-sidebar,
  body > #sidebar-content,
  body > main {
    height: calc(100dvh - var(--pwa-header-h, 0px) - var(--pwa-bottom-h, 0px));
    min-height: 0 !important;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    margin: 0 !important;
  }
  body > footer { display: none !important; }
}

/* Watch page edge-case: existing rules in style.css zero out the
   page-with-sidebar margin and let the player go full-bleed. Our
   height/overflow rules above are compatible. */