/* ═══════════════════════════════════════════════
   PRUVN DESIGN SYSTEM
   Design 1 colors + Design 2 font
   ═══════════════════════════════════════════════ */
:root {
  --brand: #2D6A4F;
  --brand-light: #EDF5F0;
  --brand-dark: #1B4332;
  --verified: #2D6A4F;
  --mis: #B91C1C;
  --mis-bg: #FEF2F2;
  --dev: #B45309;
  --dev-bg: #FFFBEB;
  --bg: #FAF9F6;
  --border: #E8E5DD;
  --text: #1B1B18;
  --text-sub: #7A7A6E;
  --text-hint: #A0A090;
}

/* ── html / body reset ──
 * Without this, the user-agent default 8px margin on body shows up as a
 * gap below the fixed bottom nav on Shift2App webviews. Background color
 * matches the shell so any pixel of overscroll/safe-area shows brand bg
 * instead of white. */
html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  /* Lock html height to viewport. Without this, the .app-shell padding-bottom
   * can make body taller than the viewport, which then becomes scrollable
   * and shows blank space below the fixed nav. */
  min-height: 100vh;
  min-height: 100dvh;
}

/* ── App Shell ── */
.app-shell {
  width: 100%; max-width: 430px; margin: 0 auto;
  min-height: 100vh; min-height: 100dvh;
  background: var(--bg);
  font-family: -apple-system, 'SF Pro Display', 'Segoe UI', 'Helvetica Neue', sans-serif;
  display: flex; flex-direction: column;
  position: relative; color: var(--text);
  /* Reserve space for the now-fixed bottom nav (56px tall) plus the device's
   * bottom safe area inset (iPhone home indicator, Android gesture bar).
   * Without this, content scrolls behind the nav. */
  padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  /* Critical: with content-box (default), padding adds to height, making
   * the shell taller than 100dvh -> body becomes scrollable past the fixed
   * nav -> empty space appears below. border-box keeps padding inside the
   * 100dvh budget. */
  box-sizing: border-box;
}

/* ── Top Bar ── */
.top-bar {
  flex-shrink: 0; background: #fff; z-index: 50;
  position: sticky; top: 0;
  border-bottom: 1px solid var(--border);
}
.app-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 16px 8px; background: #fff;
}
.app-logo {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 22px; color: var(--brand); letter-spacing: -0.5px;
}

/* ── Scroll Area ── */
.scroll-area { flex: 1; -webkit-overflow-scrolling: touch; }
.scroll-area::-webkit-scrollbar { display: none; }
.scroll-area { scrollbar-width: none; -ms-overflow-style: none; }

/* ── Header Buttons ── */
.hdr-btn {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--brand-light); display: flex;
  align-items: center; justify-content: center;
  font-size: 16px; color: var(--brand); text-decoration: none;
  cursor: pointer; border: none;
  flex-shrink: 0;
}
.hdr-btn i { pointer-events: none; }
.hdr-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--brand); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; text-decoration: none;
  flex-shrink: 0;
}
.hdr-avatar i { pointer-events: none; }

/* ── Stamp Badges ── */
.stamp {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border-radius: 8px;
  font-size: 12px; font-weight: 800; color: #fff; letter-spacing: 0.3px;
}
.stamp i { font-size: 13px; }
.stamp-v { background: rgba(45,106,79,0.92); }
.stamp-m { background: rgba(185,28,28,0.9); }
.stamp-d { background: rgba(180,83,9,0.9); }
.stamp-n { background: rgba(27,27,24,0.85); }

/* Hero fallback colors when no media_url (background-image takes over when set) */
.card-hero-green   { background: linear-gradient(135deg, #1B4332, #2D6A4F); }
.card-hero-red     { background: linear-gradient(135deg, #7f1d1d, #B91C1C); }
.card-hero-yellow  { background: linear-gradient(135deg, #78350f, #B45309); }
.card-hero-neutral { background: linear-gradient(135deg, #1B1B18, #4B5563); }

/* ══════════════════════════════════════════════
   NEWS CARDS
   ══════════════════════════════════════════════ */
.news-card {
  background: #fff; border-radius: 16px; overflow: hidden;
  box-shadow: 0 1px 6px rgba(0,0,0,0.04); margin-bottom: 14px;
}

/* Image area */
.card-img {
  height: 155px; position: relative; overflow: hidden; cursor: pointer;
}
.card-img img, .card-img video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.card-badge {
  position: absolute; top: 10px; left: 10px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: 8px;
  font-size: 11px; font-weight: 800; color: #fff; z-index: 2;
  letter-spacing: 0.3px;
}
.card-badge i { font-size: 12px; }
.card-badge-v { background: rgba(45,106,79,0.92); }
.card-badge-m { background: rgba(185,28,28,0.9); }
.card-badge-d { background: rgba(180,83,9,0.9); }
.card-badge-neutral { background: rgba(27,27,24,0.85); }
.card-time {
  position: absolute; top: 10px; right: 10px;
  background: rgba(0,0,0,0.35); color: #fff;
  font-size: 10px; padding: 3px 9px; border-radius: 6px; z-index: 2;
}
.card-time-dark {
  position: absolute; top: 12px; right: 14px;
  font-size: 11px; color: rgba(255,255,255,0.7);
}
.card-play {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; background: rgba(0,0,0,0.3); cursor: pointer; z-index: 2;
}
.card-play-btn {
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,0.9); display: flex;
  align-items: center; justify-content: center; font-size: 20px;
}

/* Color bar (no image fallback) */
.card-color-bar {
  height: 56px; position: relative; display: flex;
  align-items: center; padding: 0 14px; cursor: pointer;
}
.card-color-v { background: linear-gradient(135deg, #1B4332, #2D6A4F); }
.card-color-m { background: linear-gradient(135deg, #7f1d1d, #B91C1C); }
.card-color-d { background: linear-gradient(135deg, #78350f, #B45309); }
.card-color-neutral { background: linear-gradient(135deg, #1B1B18, #4B5563); }

/* Text body */
.card-body { padding: 14px 16px 8px; cursor: pointer; border-top: 1px solid var(--border); }
.card-headline {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 17px; line-height: 1.38; color: var(--text); font-weight: 400;
}
.card-summary {
  font-size: 13.5px; color: var(--text-sub); line-height: 1.55; margin-top: 6px;
}
.card-loc { font-size: 12px; color: var(--text-hint); margin-top: 6px; }
.card-org { display: flex; align-items: center; gap: 7px; margin-top: 10px; }
.card-org-icon {
  width: 20px; height: 20px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 800; color: #fff;
}
.card-org-name { font-size: 12px; font-weight: 600; color: var(--text); }
.card-org-sub { font-size: 10.5px; color: var(--text-hint); }
.card-stats { display: flex; gap: 10px; margin-top: 8px; font-size: 12px; color: var(--text-hint); }
.card-stats b { font-weight: 600; color: var(--brand); }
.card-stats i { font-size: 13px; vertical-align: middle; }

/* Claim vs Truth */
.cvt-grid { display: grid; grid-template-columns: 1fr; gap: 6px; margin-top: 12px; }
.cvt-box { padding: 10px 12px; border-radius: 12px; }
.cvt-label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.cvt-text { font-size: 13px; line-height: 1.45; }

/* Viral spread bar */
.card-viral {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 10px; padding: 10px 14px; border-radius: 12px; background: var(--mis-bg);
}
.card-viral-num { font-size: 18px; font-weight: 800; }
.card-viral-label { font-size: 11px; margin-top: 1px; }

/* ── CTA Bar ── */
.card-cta {
  display: flex; gap: 7px; padding: 8px 14px 14px;
  border-top: 1px solid var(--border);
}
.cta-rx {
  display: flex; align-items: center; gap: 4px;
  padding: 8px 12px; border-radius: 10px; font-size: 13px;
  cursor: pointer; background: #F2F0EA; color: var(--text-sub);
  transition: background 0.15s; border: none;
}
.cta-rx:hover { background: #E8E5DD; }
.cta-rx-active { background: var(--brand-light); color: var(--brand); }
.cta-rx i { font-size: 15px; }
.cta-rx b { font-weight: 500; font-size: 12px; }
.cta-share {
  flex: 1; display: flex; align-items: center; justify-content: center;
  gap: 5px; padding: 9px; border-radius: 10px;
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: opacity 0.15s; border: none; color: #fff;
}
.cta-share:hover { opacity: 0.9; }
.cta-share i { font-size: 15px; }
.cta-share-v { background: var(--brand); }
.cta-share-m { background: var(--mis); }
.cta-share-d { background: var(--dev); }
.cta-share-n { background: #1B1B18; }

/* ── Bottom Nav ── */
/* ── Bottom Nav ── */
/* iOS Safari and Android WebView auto-hide their bottom toolbar/nav on scroll.
 * With position:sticky and 100vh, the nav doesn't track the dynamic viewport
 * and either gets pushed offscreen or leaves a gap. position:fixed + 100dvh
 * fixes this because fixed-positioned elements track the dynamic viewport on
 * iOS 16+ and modern Android WebView.
 *
 * Because .app-shell is centered with max-width:430px, we mirror that on the
 * fixed nav so it aligns with the shell on tablets/desktop-sized viewports.
 */
.bottom-nav {
  display: flex; justify-content: space-around; align-items: center;
  padding: 6px;
  background: #fff; border-top: 1px solid var(--border);
  position: fixed;
  left: 0; right: 0; bottom: 0;
  max-width: 430px;
  min-height: 56px;
  margin: 0 auto;
  z-index: 50;
}
.nav-item {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 10px; font-weight: 500; color: var(--text-hint); cursor: pointer;
  text-decoration: none; transition: color 0.2s;
}
.nav-item.active { color: var(--brand); font-weight: 700; }
.nav-item i { font-size: 20px; }

/* ── Shift2App webview workaround ──
 * Shift2App's WebView does not pass Android system insets to CSS env(),
 * so env(safe-area-inset-bottom) is always 0 there. Without this override
 * the bottom nav appears to "float" above the device gesture bar with a
 * visible gap. We hardcode 24px (median Android gesture-bar height in 2026)
 * only inside Shift2App. Real browsers keep using env() (which works).
 *
 * If Shift2App later exposes a JS bridge for actual insets, swap this
 * to a CSS variable set from JS.
 */
body.pv-in-shift2app .bottom-nav {
  /* User-confirmed working state on Shift2App webview. The base padding:6px
   * + min-height:56px gives the icons a stable vertical box; restating
   * min-height here locks it in case any future override drops it. */
  min-height: 56px;
}
body.pv-in-shift2app .app-shell {
  padding-bottom: calc(56px + 24px);
}
/* Story overlay (mobile) bottom edge sits above the nav. The overlay
 * uses inline styles set by JS, which beat CSS unless we use !important. */
body.pv-in-shift2app #pv-story-overlay {
  bottom: calc(56px + 24px) !important;
}
/* Story overlay action bar (Save/Share buttons inside the slide-in overlay) */
body.pv-in-shift2app #pv-overlay-bar {
  bottom: calc(56px + 24px) !important;
}
/* Direct-page story action bar (when story.php is opened standalone) */
body.pv-in-shift2app #pv-story-bar {
  bottom: calc(56px) !important;
  min-height: 56px;
}

/* ── Fact-checker Card ── */
.fc-card {
  background: #fff; border-radius: 16px; padding: 16px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.04); margin-bottom: 12px;
}

/* ── WhatsApp Styles ── */
.wa-bg { background: #E5DDD5; }
.wa-header { background: #075E54; }
.msg { max-width: 80%; padding: 8px 10px; font-size: 12px; line-height: 1.5; border-radius: 12px; }
.msg-user { align-self: flex-end; background: #DCF8C6; border-radius: 12px 12px 0 12px; }
.msg-bot { align-self: flex-start; background: #fff; border-radius: 12px 12px 12px 0; box-shadow: 0 1px 1px rgba(0,0,0,0.06); }

/* ── Animations ── */
.page-content { animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.pulse { animation: pulse 2s ease-in-out infinite; }

/* ── Toast ── */
.toast {
  position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%);
  background: #1B1B18; color: #fff; padding: 10px 20px; border-radius: 12px;
  font-size: 13px; font-weight: 600; z-index: 100; opacity: 0;
  transition: opacity 0.3s; pointer-events: none;
}
.toast.show { opacity: 1; }

/* ── Share Sheet ── */
.overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5);
  z-index: 250; display: none; align-items: flex-end; justify-content: center;
}
.overlay.show { display: flex; }
.share-sheet {
  background: #fff; border-radius: 20px 20px 0 0; width: 100%; max-width: 430px;
  padding: 20px 20px max(20px, env(safe-area-inset-bottom));
  animation: slideUp 0.3s ease;
}
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* ── Language checkbox labels ── */
.pv-lang-label { transition: all 0.2s; }
.pv-lang-label:has(input:checked) {
    border-color: var(--brand) !important;
    background: var(--brand-light) !important;
    color: var(--brand) !important;
}
/* Fallback for browsers without :has() */
.pv-lang-label.pv-checked {
    border-color: var(--brand) !important;
    background: var(--brand-light) !important;
    color: var(--brand) !important;
}

/* ── Custom Scrollbars (browser only) ── */
/* Webkit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 3px;
  transition: background 0.3s;
}
/* Show on hover of the scrollable container */
*:hover::-webkit-scrollbar-thumb {
  background: rgba(160, 160, 144, 0.35);
}
*:hover::-webkit-scrollbar-thumb:hover {
  background: rgba(160, 160, 144, 0.6);
}
*:hover::-webkit-scrollbar-thumb:active {
  background: rgba(45, 106, 79, 0.5);
}
/* Body/html scrollbar — slightly wider */
html::-webkit-scrollbar { width: 8px; }
html::-webkit-scrollbar-track { background: var(--bg); }
html::-webkit-scrollbar-thumb { background: transparent; border-radius: 4px; }
html:hover::-webkit-scrollbar-thumb { background: rgba(160, 160, 144, 0.3); }
html:hover::-webkit-scrollbar-thumb:hover { background: rgba(160, 160, 144, 0.55); }

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
*:hover {
  scrollbar-color: rgba(160, 160, 144, 0.35) transparent;
}
html {
  scrollbar-width: thin;
  scrollbar-color: transparent var(--bg);
}
html:hover {
  scrollbar-color: rgba(160, 160, 144, 0.3) var(--bg);
}

/* Horizontal scroll containers (trending pills, filter chips) */
.flex[style*="overflow-x"] { scrollbar-width: none; }
.flex[style*="overflow-x"]::-webkit-scrollbar { display: none; }

/* Story overlay skeleton */
@keyframes pvSkeleton { 0% { opacity: 0.6; } 50% { opacity: 0.3; } 100% { opacity: 0.6; } }

/* ── Feature flag CSS gates ──
   Driven by classes on <body> set in static/js/ui.js after PV.loadFlags resolves.
   Lets the admin hide UI features without redeploying code. */

/* Hide share buttons when ui_show_share_button is off */
body.pv-no-share [onclick*="shared_truth"] { display: none !important; }
body.pv-no-share [onclick*="OverlayShare"] { display: none !important; }
body.pv-no-share .cta-share { display: none !important; }

/* Hide save buttons when ui_show_save_button is off */
body.pv-no-save [onclick*="saved_me"] { display: none !important; }
body.pv-no-save .cta-save { display: none !important; }

/* Hide reactions row when ui_show_reactions is off */
body.pv-no-reactions .cta-rx[onclick*="shared_truth"] { display: none !important; }
body.pv-no-reactions .cta-rx[onclick*="saved_me"] { display: none !important; }

/* Hide WhatsApp specific buttons when ui_show_whatsapp_share is off */
body.pv-no-wa .cta-whatsapp { display: none !important; }
body.pv-no-wa [onclick*="whatsapp"] { display: none !important; }

/* Show fake-forward counter only when ui_show_fake_forwards is on (default off) */
.pv-fake-forwards-count { display: none; }
body.pv-show-fakefwd .pv-fake-forwards-count { display: inline-flex; }

/* Show language switcher only when ui_show_language_switcher is on (default off) */
.pv-lang-switcher { display: none !important; }
body.pv-show-lang .pv-lang-switcher { display: revert !important; }
/* Operational master switch: even if ui_show_language_switcher is on, hide
   the picker entirely when feature_translations_enabled is off. Master wins. */
body.pv-no-lang-master .pv-lang-switcher { display: none !important; }

/* AI search bar gate (ui_show_ai_search). Default ON, hidden only when admin
   flips the flag off. The .pv-ai-search-bar class wraps the search input and
   filter chips on the factcheck hub page. */
body.pv-no-aisearch .pv-ai-search-bar { display: none !important; }

/* Claim submission gate (ui_show_claim_submission). Hides the Submit bottom-nav
   item + any "Submit a claim" CTAs sprinkled across the customer pages. */
body.pv-no-submit .nav-item[data-nav-id="submit"] { display: none !important; }
body.pv-no-submit .pv-cta-submit { display: none !important; }

/* Community notes gate (ui_show_community_notes). Default OFF: notes are
   rendered into the story page but hidden by CSS until admin flips on. The
   submission form is also hidden so users dont try to add notes that are
   then invisible. */
.pv-community-notes-block { display: none !important; }
body.pv-show-notes .pv-community-notes-block { display: block !important; }