/* Video mode — nav count badge, the reel overlay, the one-time mode hint, and
 * the mobile-menu icons. Paired with public/js/video-mode.js.
 *
 * There is intentionally NO in-feed video badge/affordance any more (removed
 * 2026-08-17): video is reached only via the mode FAB and the nav. */

/* ---- Nav "Video" pill (promoted after My News) ---- */
.nav-pill.nav-pill-video svg { color: var(--blue); }

/* Count badges — one shared treatment, identical to .saved-count so Video and
 * Saved match in the mobile drawer. */
.nav-video-count,
.mobile-video-count,
.mobile-saved-count {
  display: inline-block;
  margin-left: 6px;
  min-width: 16px;
  padding: 1px 5px;
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  color: #fff;
  background: var(--blue);
  border-radius: var(--radius-full, 999px);
  vertical-align: middle;
}
.mobile-video-link { display: inline-flex; align-items: center; }

/* ---- Reel overlay — sits BELOW the persistent site header, never over it ----
 * Nicolas 2026-08-17: the UBH logo + top menu bar must ALWAYS stay visible, the
 * player must have breathing room below the header, and it must read as a
 * deliberately designed card (rounded, one consistent surface, sensible max
 * width) rather than a raw <video> jammed against the chrome. */
.ubh-video-overlay {
  position: fixed;
  top: var(--ubh-overlay-top, 0px);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  /* ONE consistent surface — pure black, same as the player, so the breathing
     room below the header reads as clean matte, not a competing tone. */
  background: #000;
  display: flex;
  flex-direction: column;
  animation: ubhVideoOverlayIn 0.18s ease;
}
@keyframes ubhVideoOverlayIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
/* MOBILE: the player is full-bleed below the header (no side inset, so there are
 * no sliver gutters / double-frame), with a clear top margin for breathing room
 * and rounded TOP corners so it still reads as a deliberate surface. */
.ubh-video-stage {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  margin-top: 16px;
  background: #000;
  overflow: hidden;
}
.ubh-video-overlay-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
/* Close X: hidden on mobile (the FAB is the single control there), shown on
 * desktop where there is no FAB. */
.ubh-video-overlay-close {
  position: absolute;
  top: calc(var(--ubh-overlay-top, 0px) + 16px);
  right: 22px;
  z-index: 3;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border, #2a2d35);
  background: rgba(20, 20, 26, 0.82);
  color: #fff;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  display: none;
}
.ubh-video-overlay-close:hover { border-color: var(--blue); color: var(--blue); }
@media (min-width: 900px) {
  /* Desktop: a centered phone-shaped card with full rounding + a shadow on a
     dimmed backdrop, with a sensible max width. */
  .ubh-video-overlay {
    background: rgba(0, 0, 0, 0.86);
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
  }
  .ubh-video-stage {
    flex: 0 1 auto;
    width: min(430px, 96vw);
    height: 100%;
    margin-top: 0;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
  }
  .ubh-video-overlay-close { display: inline-flex; align-items: center; justify-content: center; }
}

/* ---- One-time "more modes" hint — matches the site's pill/dark-surface look ---- */
.ubh-video-hint {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 84px);
  z-index: 9500;
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(92vw, 420px);
  box-sizing: border-box;
  padding: 11px 12px 11px 16px;
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--text, #e8e8ed);
  background: var(--card, #14161c);
  border: 1px solid var(--border, #2a2d35);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  animation: ubhHintIn 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes ubhHintIn {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
.ubh-video-hint-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--blue-dim, rgba(37, 99, 235, 0.12));
  color: var(--blue);
}
.ubh-video-hint-icon svg { width: 18px; height: 18px; }
.ubh-video-hint-body { flex: 1 1 auto; }
.ubh-video-hint-body strong { color: var(--blue); font-weight: 700; }
.ubh-video-hint-x {
  flex: none;
  border: 0;
  background: transparent;
  color: var(--text-dim, #9ca3af);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 6px 8px;
  border-radius: 8px;
}
.ubh-video-hint-x:hover { color: var(--text, #fff); background: rgba(255, 255, 255, 0.06); }
@media (min-width: 900px) { .ubh-video-hint { display: none; } }
/* Never let the one-time hint toast sit over the open reel overlay (it collided
 * with the player's headline) or the open mobile drawer (it covered menu rows).
 * It belongs on the feed only. */
html.ubh-video-overlay-open .ubh-video-hint,
body:has(.mobile-menu.open) .ubh-video-hint { display: none !important; }

/* The floating mode FAB STAYS VISIBLE while the reel overlay is open — it is the
 * single bottom-right mode control across all four modes. Its z-index (8000)
 * already sits above the overlay (90); kept explicit for safety. */
html.ubh-video-overlay-open #view-toggle-fab { z-index: 8000; }

/* Reclaim vertical space for the video while the overlay is open by collapsing
 * the NON-essential top strips (push-notification banner + market ticker). The
 * UBH logo + menu bar deliberately stay visible. */
html.ubh-video-overlay-open #push-banner,
html.ubh-video-overlay-open #market-ticker { display: none !important; }

/* ---- Mobile menu icons (consistent set across every entry) ---- */
.mobile-menu-icon {
  display: inline-flex;
  vertical-align: -3px;
  margin-right: 10px;
  color: var(--text-dim, #9ca3af);
}
.mobile-menu-items a:hover .mobile-menu-icon { color: var(--blue); }