/* ════════════════════════════════════════
   S NEWS MOBILE FEATURES — Self-contained styles
   CSS variables defined here so plugin works on ANY theme
════════════════════════════════════════ */

:root {
  --snews-k: #0A0A0A;
  --snews-w: #ffffff;
  --snews-g1: #F9F9F7;
  --snews-g2: #E8E8E6;
  --snews-g3: #BEBEBE;
  --snews-g4: #6A6A6A;
  --snews-r: #E53E3E;
  --snews-nav-h: 62px;
  --snews-dm: 'DM Sans', sans-serif;
  --snews-bg: 'Bricolage Grotesque', sans-serif;
}

/* Map S News theme vars used by extracted CSS */
.mob-nav, .mob-nav * {
  --K: #0A0A0A;
  --W: #ffffff;
  --G1: #F9F9F7;
  --G2: #E8E8E6;
  --G3: #BEBEBE;
  --G4: #6A6A6A;
  --BG: 'Bricolage Grotesque', sans-serif;
  --DM: 'DM Sans', sans-serif;
  --R: #E53E3E;
  --BOTNAV: 62px;
  --MOB: 52px;
  --NAV: 56px;
  --R8: 8px;
  --ease: cubic-bezier(.4,0,.2,1);
}

/* ── MOBILE NAV BASE (visible on ALL screen sizes for mobile devices) ── */
.mob-nav {
  display: none; /* hidden on desktop */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--snews-nav-h);
  background: #ffffff;
  border-top: 1px solid #E8E8E6;
  z-index: 9999;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-shadow: 0 -1px 8px rgba(0,0,0,.08);
}

/* Show on mobile */
@media (max-width: 1024px) {
  .mob-nav {
    display: block !important;
  }
  body {
    padding-bottom: calc(var(--snews-nav-h) + env(safe-area-inset-bottom, 0px));
  }
}

.mob-nav-in {
  display: flex;
  align-items: stretch;
  height: 100%;
  width: 100%;
}

.mob-tab, .mob-tab-xp {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  text-decoration: none !important;
  color: #BEBEBE !important;
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  transition: color .15s;
  -webkit-tap-highlight-color: transparent;
}

.mob-tab.on, .mob-tab-xp.on,
.mob-tab:hover, .mob-tab-xp:hover {
  color: #0A0A0A !important;
}

.mob-tab svg, .mob-tab-xp svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
}

.mob-tab-xp-ico {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: #0A0A0A;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mob-tab-xp-ico svg {
  stroke: #ffffff !important;
}

/* SPA pages — hidden until activated */
.pg {
  display: none !important;
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: #ffffff;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.pg.on {
  display: block !important;
}

/* Toast */
.toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: #0A0A0A;
  color: #ffffff;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
  z-index: 9999;
  white-space: nowrap;
  max-width: 90vw;
}

.toast.on { opacity: 1; }

/* S News Mobile Features Plugin — CSS */

:root{
  --W:#FFFFFF; --K:#0A0A0A;
  --G1:#F7F7F5; --G2:#E8E8E6; --G3:#CFCFCF;
  --G4:#9A9A9A; --G5:#5A5A5A; --G6:#2A2A2A;
  /* Brand accent — Cinnabar Red (El Salvador flag-inspired) */
    
  /* Shadows */
  --sh-xs:0 1px 4px rgba(0,0,0,.06);
  --sh-sm:0 3px 12px rgba(0,0,0,.08),0 1px 3px rgba(0,0,0,.04);
  --sh-md:0 8px 28px rgba(0,0,0,.1),0 2px 6px rgba(0,0,0,.05);
  --sh-lg:0 20px 60px rgba(0,0,0,.14),0 6px 16px rgba(0,0,0,.06);
  --BG:'Bricolage Grotesque',sans-serif;
  --DM:'DM Sans',sans-serif;
  --NAV:56px; --MOB:50px; --BOTNAV:64px;
  --MAX:1480px;
  --R4:4px; --R8:8px; --R12:12px;
  --ease:cubic-bezier(.4,0,.2,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
}

/* ════════════════════════════════════════
   MOBILE HEADER
════════════════════════════════════════ */
.mob-hd{
  display:none;position:sticky;top:0;z-index:600;
  height:var(--MOB);
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(28px) saturate(200%);
  -webkit-backdrop-filter:blur(28px) saturate(200%);
  border-bottom:1px solid var(--G2);
  padding:0 16px;align-items:center;justify-content:space-between;
}

.mob-hd::before{
  content:'';position:absolute;top:0;left:0;right:0;
  height:3px;background:var(--K);
}

.mob-mark{font-family:var(--BG);font-size:22px;font-weight:800;letter-spacing:-.06em;display:flex;align-items:center;gap:2px}

.mob-mark-dot{width:6px;height:6px;border-radius:50%;background:var(--K);margin-bottom:1px}

@media(max-width:768px) {
  .mob-hd{display:flex;height:52px;padding:0 16px}
}

@media(max-width:768px) {
  .mob-nav{display:block}
}

@media(max-width:768px) {
  .mob-mark{font-size:20px}
}

@media(max-width:768px) {
  /* ══ QUICK CATS ══ */
  .mob-quick-cats{display:flex;position:sticky;top:52px;z-index:599}
}

@media(max-width:768px) {
  #pg-article.on{padding-top:calc(var(--MOB) + 8px)}
}

@media(max-width:768px) {
  /* ══ HOME PREDICCIONES ══ */
  .home-preds-gauge-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:16px 0}
}

@media(max-width:768px) {
  .hp-card{padding:12px}
}

@media(max-width:768px) {
  /* ══ VIDEOS ══ */
  .vf-feed{height:calc(100vh - var(--MOB) - 62px)}
}

@media(max-width:768px) {
  .vf-item{height:calc(100vh - var(--MOB) - 62px)}
}

@media(max-width:768px) {
  .vf-content{padding:0 70px 28px 20px}
}

@media(max-width:768px) {
  .vf-hl{font-size:22px}
}

@media(max-width:768px) {
  /* ══ ASK LUNA ══ */
  .ask-shell{height:calc(100vh - var(--MOB) - 62px);border:none}
}

@media(max-width:768px) {
  .ask-msgs{padding:12px 16px}
}

@media(max-width:768px) {
  .ask-top{padding:12px 16px}
}

@media(max-width:768px) {
  .ask-chips-row{padding:0 16px 10px}
}

@media(max-width:768px) {
  .ask-input-bar{padding:10px 14px 14px}
}

@media(max-width:768px) {
  .ask-welcome-mark{font-size:36px}
}

@media(max-width:768px) {
  .ask-welcome-title{font-size:17px}
}

@media(max-width:768px) {
  .ask-welcome-sub{font-size:13px}
}

@media(max-width:768px) {
  #ask-suggest-list{padding:0 16px 16px}
}

@media(max-width:768px) {
  .ask-suggest-item{padding:10px 14px;gap:10px}
}

@media(max-width:768px) {
  .xp-compose,.xp-post{padding:12px 16px}
}

@media(max-width:768px) {
  .xp-compose-in{padding:10px 14px}
}

@media(max-width:768px) {
  /* ══ PREDICCIONES ══ */
  .pred-outer{padding:12px 16px 100px}
}

@media(max-width:768px) {
  .pred-pg-top{flex-direction:column;align-items:flex-start;gap:12px;padding-bottom:14px}
}

@media(max-width:768px) {
  .pred-pg-title{font-size:24px}
}

@media(max-width:768px) {
  .pred-featured-inner{grid-template-columns:1fr}
}

@media(max-width:768px) {
  .pred-featured-chart{display:none}
}

@media(max-width:768px) {
  .pred-featured-left{border-right:none;border-bottom:1px solid var(--G2)}
}

@media(max-width:768px) {
  .pred-grid{grid-template-columns:1fr 1fr;gap:10px}
}

@media(max-width:768px) {
  .pred-card{padding:12px 12px 10px}
}

@media(max-width:768px) {
  .pred-q{font-size:12px;-webkit-line-clamp:3}
}

@media(max-width:768px) {
  .pred-gauge-si-pct{font-size:17px}
}

@media(max-width:768px) {
  .pred-vote-si,.pred-vote-no{font-size:11px;padding:7px 4px}
}

@media(max-width:768px) {
  /* ══ MODALS ══ */
  .modal-box{border-radius:16px 16px 0 0;position:fixed;bottom:0;left:0;right:0;max-width:100%;max-height:88vh;display:flex;flex-direction:column}
}

@media(max-width:768px) {
  .modal-layer{align-items:flex-end;padding:0}
}

@media(max-width:768px) {
  .modal-body{padding:16px 18px}
}

@media(max-width:768px) {
  .pred-detail-box{border-radius:16px 16px 0 0;position:fixed;bottom:0;left:0;right:0;max-width:100%;max-height:90vh}
}

@media(max-width:768px) {
  .pred-detail-layer{align-items:flex-end;padding:0}
}

@media(max-width:768px) {
  /* ══ MOBILE NAV BOTTOM ══ */
  .mob-nav{height:62px;padding-bottom:env(safe-area-inset-bottom,0px)}
}

@media(max-width:768px) {
  .mob-nav-in{height:62px}
}

@media(max-width:768px) {
  a.mob-tab,button.mob-tab{gap:3px;font-size:8.5px;letter-spacing:.02em}
}

@media(max-width:768px) {
  a.mob-tab svg,button.mob-tab svg{width:22px;height:22px;stroke-width:1.75}
}

@media(max-width:768px) {
  a.mob-tab-xp,button.mob-tab-xp{font-size:8.5px}
}

@media(max-width:768px) {
  .mob-tab-xp-ico{width:44px;height:44px;border-radius:14px;margin-top:-14px}
}

@media(max-width:768px) {
  .mob-tab-xp-ico svg{width:22px;height:22px}
}

@media(max-width:768px) {
  a.mob-tab,a.mob-tab:visited{text-decoration:none;color:#BEBEBE}
}

@media(max-width:768px) {
  a.mob-tab.on,a.mob-tab:hover{color:var(--K)}
}

@media(max-width:768px) {
  a.mob-tab-xp,a.mob-tab-xp:visited{text-decoration:none}
}

@media(max-width:1280px) {
  .pred-grid{grid-template-columns:repeat(3,1fr)}
}

@media(max-width:1100px) {
  .pred-grid{grid-template-columns:repeat(3,1fr)}
}

@media(max-width:1100px) {
  .pred-featured-inner{grid-template-columns:320px 1fr}
}

@media(max-width:860px) {
  .pred-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:860px) {
  .pred-card{padding:14px 14px 11px}
}

@media(max-width:860px) {
  .pred-featured-inner{grid-template-columns:1fr}
}

@media(max-width:860px) {
  .pred-featured-chart{border-top:1px solid var(--G2);min-height:220px}
}

@media(max-width:768px) {
  .mob-hd{display:flex}
}

@media(max-width:768px) {
  .mob-nav{display:block}
}

@media(max-width:768px) {
  /* just mob-hd height on mobile */

  /* ── Mobile header — taller, better layout ── */
  .mob-hd{
    height:52px;
    padding:0 16px;
  }
}

@media(max-width:768px) {
  .mob-mark{font-size:20px}
}

@media(max-width:768px) {
  /* ── Videos ── */
  .vf-feed{height:calc(100vh - var(--MOB) - var(--BOTNAV))}
}

@media(max-width:768px) {
  .vf-item{height:calc(100vh - var(--MOB) - var(--BOTNAV))}
}

@media(max-width:768px) {
  .vf-content{padding:0 70px 28px 20px}
}

@media(max-width:768px) {
  .vf-hl{font-size:22px}
}

@media(max-width:768px) {
  /* ── Ask Luna ── */
  .ask-shell{height:calc(100vh - var(--MOB) - var(--BOTNAV));border:none}
}

@media(max-width:768px) {
  .ask-msgs{padding:14px 16px}
}

@media(max-width:768px) {
  .ask-top{padding:13px 16px}
}

@media(max-width:768px) {
  .ask-chips-row{padding:0 16px 10px}
}

@media(max-width:768px) {
  .ask-input-bar{padding:10px 14px 14px}
}

@media(max-width:768px) {
  .ask-welcome-mark{font-size:40px}
}

@media(max-width:768px) {
  .ask-welcome-title{font-size:18px}
}

@media(max-width:768px) {
  .xp-compose,.xp-post{padding:13px 16px}
}

@media(max-width:768px) {
  /* ── Predicciones mobile ── */
  .pred-outer{padding:16px 16px 80px}
}

@media(max-width:768px) {
  .pred-pg-top{flex-direction:column;align-items:flex-start;gap:12px;padding-bottom:16px}
}

@media(max-width:768px) {
  .pred-pg-title{font-size:26px}
}

@media(max-width:768px) {
  .pred-featured-inner{grid-template-columns:1fr}
}

@media(max-width:768px) {
  .pred-featured-chart{display:none}
}

@media(max-width:768px) {
  /* hide chart on mobile in featured card */
  .pred-featured-left{border-right:none;border-bottom:1px solid var(--G2)}
}

@media(max-width:768px) {
  .pred-grid{grid-template-columns:1fr 1fr;gap:10px}
}

@media(max-width:768px) {
  .pred-card{padding:13px 13px 11px}
}

@media(max-width:768px) {
  .pred-q{font-size:12.5px;-webkit-line-clamp:3}
}

@media(max-width:768px) {
  .pred-gauge-num{font-size:13px}
}

@media(max-width:768px) {
  .pred-gauge-si-pct{font-size:18px}
}

@media(max-width:768px) {
  .pred-vote-si,.pred-vote-no{font-size:11px;padding:8px 4px}
}

@media(max-width:768px) {
  /* ── Modals ── */
  .modal-box{border-radius:16px 16px 0 0;position:fixed;bottom:0;left:0;right:0;max-width:100%;max-height:88vh;display:flex;flex-direction:column}
}

@media(max-width:768px) {
  .modal-layer{align-items:flex-end;padding:0}
}

@media(max-width:768px) {
  .pred-detail-box{border-radius:16px 16px 0 0;position:fixed;bottom:0;left:0;right:0;max-width:100%;max-height:90vh}
}

@media(max-width:768px) {
  .pred-detail-layer{align-items:flex-end;padding:0}
}

@media(max-width:768px) {
  /* ── Mobile nav bottom ── */
  .mob-nav{height:62px}
}

@media(max-width:768px) {
  .mob-nav-in{height:62px}
}

@media(max-width:768px) {
  .mob-tab{gap:3px;font-size:8.5px;letter-spacing:.02em}
}

@media(max-width:768px) {
  .mob-tab svg{width:22px;height:22px}
}

@media(max-width:768px) {
  .mob-tab-xp{font-size:8.5px}
}

@media(max-width:768px) {
  .mob-tab-xp-ico{width:42px;height:42px;border-radius:14px;margin-top:-10px}
}

@media(max-width:768px) {
  .mob-tab-xp-ico svg{width:21px;height:21px}
}

@media(max-width:480px) {
  .pred-grid{grid-template-columns:1fr}
}

@media(max-width:480px) {
  .home-preds-gauge-grid{grid-template-columns:1fr}
}

@media(max-width:768px) {
  /* ── MOBILE QUICK CATEGORIES ── */
.mob-quick-cats{
  display:none;
  background:var(--W);
  border-bottom:1px solid var(--G2);
  padding:8px 14px;
  gap:8px;
  overflow-x:auto;
  scrollbar-width:none;
  position:sticky;
  top:var(--MOB);
  z-index:599;
}
}

@media(max-width:768px) {
  .mob-quick-cats::-webkit-scrollbar{display:none}
}

@media(max-width:768px) {
  .mob-quick-cats{display:flex}
}

@media(max-width:768px) {
  /* ═══════════════════════════════════════════════════
   ARTICLE READER — 3 templates
   All use: BG for headlines, DM Sans for body
═══════════════════════════════════════════════════ */
#pg-article.on{display:block;background:var(--W);min-height:100vh;padding-top:calc(var(--NAV) + 30px)}
}

@media(max-width:768px) {
  #pg-article.on{padding-top:calc(var(--MOB) + 4px)}
}

@media(max-width:768px) {
  /* Mobile nav — anchor tags render same as buttons */
a.mob-tab, a.mob-tab:visited, a.mob-tab:link {
  text-decoration:none;
  color:#BEBEBE;
}
}

@media(max-width:768px) {
  a.mob-tab.on, a.mob-tab:hover {
  color:var(--K);
}
}

@media(max-width:768px) {
  a.mob-tab-xp, a.mob-tab-xp:visited, a.mob-tab-xp:link {
  text-decoration:none;
  color:var(--K);
}
}

@media(max-width:768px) {
  /* ════════════════════════════════════════
   ASK LUNA — Fullscreen chat experience
   No footer, locked viewport, offset from nav
════════════════════════════════════════ */
#pg-ask.on {
  background: var(--W);
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow: hidden;
}
}

@media(max-width:768px) {
  #pg-ask .site-footer,
#pg-ask ~ .site-footer {
  display: none !important;
}
}

@media(max-width:768px) {
  .ask-shell {
  display: flex;
  flex-direction: column;
  height: 100vh;
  max-width: 700px;
  margin: 0 auto;
  border: none;
  background: var(--W);
  position: relative;
}
}

@media(max-width:768px) {
  /* Push shell content below the fixed desktop nav + ticker */
.ask-shell::before {
  content: '';
  display: block;
  height: calc(var(--NAV) + 30px);
  flex-shrink: 0;
}
}

@media(max-width:768px) {
  /* Brand header */
.ask-top {
  padding: 12px 24px 10px;
  border-bottom: 1px solid var(--G2);
  flex-shrink: 0;
}
}

@media(max-width:768px) {
  .ask-top-brand {
  display: flex;
  align-items: center;
  gap: 4px;
}
}

@media(max-width:768px) {
  .ask-top-brand-part {
  font-family: var(--DM);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 4px 8px;
  border: 1.5px solid var(--K);
  border-radius: 4px;
}
}

@media(max-width:768px) {
  /* Tab strip */
.ask-tabs {
  display: flex;
  border-bottom: 1px solid var(--G2);
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
}

@media(max-width:768px) {
  .ask-tabs::-webkit-scrollbar { display: none; }
}

@media(max-width:768px) {
  .ask-tab {
  font-family: var(--DM);
  font-size: 12px;
  font-weight: 600;
  color: var(--G4);
  padding: 11px 18px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: all .15s;
  flex-shrink: 0;
}
}

@media(max-width:768px) {
  .ask-tab.on { color: var(--K); border-bottom-color: var(--K); }
}

@media(max-width:768px) {
  .ask-tab:hover:not(.on) { color: var(--G5); }
}

@media(max-width:768px) {
  /* Messages — scrollable area fills remaining space */
.ask-msgs {
  flex: 1;
  overflow-y: auto;
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  /* Never show footer content below messages */
  overscroll-behavior: contain;
}
}

@media(max-width:768px) {
  /* Welcome state */
.ask-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 48px 24px 24px;
  gap: 10px;
}
}

@media(max-width:768px) {
  .ask-welcome-greeting {
  font-family: var(--BG);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.04em;
  color: var(--K);
  line-height: 1.1;
}
}

@media(max-width:768px) {
  .ask-welcome-sub {
  font-family: var(--DM);
  font-size: 14px;
  color: var(--G4);
  font-weight: 300;
  max-width: 320px;
}
}

@media(max-width:768px) {
  .ask-suggest-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 500px;
  margin-top: 12px;
}
}

@media(max-width:768px) {
  .ask-suggest-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--G1);
  border: 1px solid var(--G2);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  transition: background .15s, border-color .15s;
}
}

@media(max-width:768px) {
  .ask-suggest-item:hover { background: var(--G2); border-color: var(--G3); }
}

@media(max-width:768px) {
  .ask-suggest-icon { font-size: 18px; flex-shrink: 0; }
}

@media(max-width:768px) {
  .ask-suggest-text {
  font-family: var(--DM);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--K);
  line-height: 1.35;
}
}

@media(max-width:768px) {
  /* Message bubbles */
.ask-row { display: flex; gap: 10px; align-items: flex-end; max-width: 85%; }
}

@media(max-width:768px) {
  .ask-row.user { align-self: flex-end; flex-direction: row-reverse; }
}

@media(max-width:768px) {
  .ask-row.ai   { align-self: flex-start; }
}

@media(max-width:768px) {
  .ask-bub {
  font-family: var(--DM);
  font-size: 14px;
  line-height: 1.6;
  padding: 11px 15px;
  border-radius: 16px;
  max-width: 100%;
  white-space: pre-wrap;
  word-break: break-word;
}
}

@media(max-width:768px) {
  .ask-row.user .ask-bub {
  background: var(--K);
  color: var(--W);
  border-bottom-right-radius: 4px;
}
}

@media(max-width:768px) {
  .ask-row.ai .ask-bub {
  background: var(--G1);
  color: var(--K);
  border: 1px solid var(--G2);
  border-bottom-left-radius: 4px;
}
}

@media(max-width:768px) {
  .ask-typing-bub {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--G1);
  border: 1px solid var(--G2);
  padding: 11px 15px;
  border-radius: 16px;
  border-bottom-left-radius: 4px;
}
}

@media(max-width:768px) {
  .ask-typing-bub span span,
.ask-typing-bub > span:not(#luna-status-txt) span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--G4);
  animation: askPulse 1.2s ease-in-out infinite;
  display: inline-block;
}
}

@media(max-width:768px) {
  .ask-typing-bub > span:not(#luna-status-txt) span:nth-child(2) { animation-delay: .2s; }
}

@media(max-width:768px) {
  .ask-typing-bub > span:not(#luna-status-txt) span:nth-child(3) { animation-delay: .4s; }
}

@media(max-width:768px) {
  /* Input area — always visible at bottom */
.ask-input-bar {
  flex-shrink: 0;
  padding: 12px 16px 16px;
  border-top: 1px solid var(--G2);
  background: var(--W);
}
}

@media(max-width:768px) {
  .ask-input-in {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  background: var(--G1);
  border: 1.5px solid var(--G2);
  border-radius: 14px;
  padding: 10px 10px 10px 16px;
  transition: border-color .2s;
}
}

@media(max-width:768px) {
  .ask-input-in:focus-within { border-color: var(--K); }
}

@media(max-width:768px) {
  .ask-send-btn {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--K);
  border: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: opacity .15s, transform .1s;
}
}

@media(max-width:768px) {
  .ask-send-btn:disabled { opacity: .35; cursor: default; }
}

@media(max-width:768px) {
  .ask-send-btn:not(:disabled):hover { opacity: .85; }
}

@media(max-width:768px) {
  .ask-send-btn:not(:disabled):active { transform: scale(.95); }
}

@media(max-width:768px) {
  .ask-send-btn svg { width: 20px; height: 20px; }
}

@media(max-width:768px) {
  .ask-footer-note {
  text-align: center;
  padding: 6px 0 0;
  font-family: var(--DM);
  font-size: 10px;
  color: var(--G3);
}
}

@media(max-width:768px)  {
  #pg-ask.on {
    position: fixed;
    inset: 0;
    overflow: hidden;
  }
}

@media(max-width:768px)  {
  .ask-shell {
    max-width: 100%;
    height: 100%;
  }
}

@media(max-width:768px)  {
  .ask-shell::before {
    /* On mobile nav is sticky at top */
    height: var(--MOB);
  }
}

@media(max-width:768px)  {
  .ask-msgs { padding: 12px 16px; }
}

@media(max-width:768px)  {
  .ask-top  { padding: 10px 16px 8px; }
}

@media(max-width:768px)  {
  .ask-input-bar { padding: 8px 12px calc(12px + env(safe-area-inset-bottom, 0px)); }
}

@media(max-width:768px)  {
  .ask-welcome { padding: 32px 16px 16px; }
}

@media(max-width:768px)  {
  .ask-welcome-greeting { font-size: 22px; }
}

@media(max-width:768px)  {
  .ask-suggest-item { padding: 10px 14px; }
}

@media(max-width:768px)  {
  .ask-suggest-text { font-size: 13px; }
}

@media(max-width:768px)  {
  /* Hide mob bottom nav while in ask */
  #pg-ask.on ~ #mob-nav,
  body:has(#pg-ask.on) #mob-nav { display: none !important; }
}

@media(max-width:768px)  {
  /* ── Also hide site footer when ask is active ── */
body:has(#pg-ask.on) .site-footer { display: none !important; }
}

@media(max-width:768px)  {
  body:has(#pg-ask.on) #mob-nav     { display: none !important; }
}

@media(max-width:768px)  {
  /* ── Predicciones modal — above nav, button always visible ── */
.modal-layer { z-index: 1200 !important; }
}

@media(max-width:768px)  {
  .pred-detail-layer { z-index: 1200 !important; }
}

@media(max-width:768px)  {
  .modal-box {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: min(90vh, 700px);
}
}

@media(max-width:768px)  {
  .modal-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
}

@media(max-width:768px)  {
  .modal-foot {
  flex-shrink: 0;
  padding: 14px 22px 18px;
  border-top: 1px solid var(--G2);
  background: var(--W);
  display: flex;
  gap: 10px;
}
}

@media(max-width:768px)  {
  .modal-submit {
  flex: 1;
  background: var(--K);
  color: var(--W);
  border: none;
  border-radius: 8px;
  font-family: var(--DM);
  font-size: 13px;
  font-weight: 700;
  padding: 12px;
  cursor: pointer;
  transition: opacity .15s;
}
}

@media(max-width:768px)  {
  .modal-submit:hover { opacity: .85; }
}

@media(max-width:768px)  {
  .modal-submit:disabled { opacity: .4; cursor: default; }
}

@media(max-width:768px)  {
  .modal-cancel {
  background: none;
  border: 1.5px solid var(--G2);
  border-radius: 8px;
  font-family: var(--DM);
  font-size: 13px;
  font-weight: 600;
  padding: 12px 18px;
  color: var(--G4);
  cursor: pointer;
}
}

@media(max-width:768px) {
  .modal-box { max-height: 85vh; border-radius: 20px 20px 0 0; }
}

@media(max-width:768px) {
  .modal-foot { padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px)); }
}

@media(max-width:768px) {
  /* ── Xpress compose — anonymous name input ── */
.xp-name-row {
  padding: 10px 16px 0;
  display: flex;
  align-items: center;
}
}

@media(max-width:768px) {
  .xp-name-inp {
  width: 100%;
  border: 1.5px solid var(--G2);
  border-radius: 8px;
  padding: 8px 12px;
  font-family: var(--DM);
  font-size: 13px;
  font-weight: 500;
  color: var(--K);
  background: var(--G1);
  outline: none;
  transition: border-color .18s;
}
}

@media(max-width:768px) {
  .xp-name-inp:focus { border-color: var(--K); background: var(--W); }
}

@media(max-width:768px) {
  .xp-name-inp::placeholder { color: var(--G3); font-weight: 400; }
}

@media(max-width:768px) {
  .xp-compose-body-row {
  display: flex;
  gap: 10px;
  padding: 10px 16px 12px;
  align-items: flex-start;
}
}

@media(max-width:768px) {
  /* Xpress ad slot */
.xp-ad-slot {
  border-bottom: 1px solid var(--G2);
  background: #fafaf8;
}
}

@media(max-width:480px) {
  /* ── Pred cards on home — full display ── */
.home-preds-gauge-grid .pred-card {
  border: 1px solid var(--G2);
  border-radius: 14px;
  padding: 18px 16px 14px;
  cursor: pointer;
  transition: border-color .18s, transform .18s;
  display: flex;
  flex-direction: column;
  background: var(--W);
  min-height: 180px;
}
}

@media(max-width:480px) {
  .home-preds-gauge-grid .pred-card:hover {
  border-color: var(--K);
  transform: translateY(-2px);
}
}

@media(max-width:480px) {
  .home-preds-gauge-grid .pred-card-top-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 12px;
}
}

@media(max-width:480px) {
  .home-preds-gauge-grid .pred-card-spacer { flex: 1; }
}

@media(max-width:768px) {
  .home-preds-gauge-grid{grid-template-columns:1fr 1fr !important;gap:10px}
}

@media(max-width:480px) {
  .home-preds-gauge-grid{grid-template-columns:1fr !important}
}

@media(max-width:768px) {
  #pg-ask.on {
    position: fixed !important;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 200 !important;
    background: var(--W);
    overflow: hidden;
  }
}

@media(max-width:768px) {
  .ask-shell {
    height: 100% !important;
    max-width: 100% !important;
    display: flex;
    flex-direction: column;
  }
}

@media(max-width:768px) {
  .ask-shell::before {
    height: var(--MOB, 52px) !important;
    flex-shrink: 0;
  }
}

@media(max-width:768px) {
  .ask-msgs {
    flex: 1 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 12px 16px !important;
    overscroll-behavior: contain;
  }
}

@media(max-width:768px) {
  .ask-top {
    flex-shrink: 0;
    padding: 10px 16px 8px !important;
  }
}

@media(max-width:768px) {
  .ask-tabs {
    flex-shrink: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media(max-width:768px) {
  .ask-tab {
    padding: 9px 14px !important;
    font-size: 11px !important;
  }
}

@media(max-width:768px) {
  .ask-input-bar {
    flex-shrink: 0 !important;
    padding: 10px 14px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    background: var(--W);
    border-top: 1px solid var(--G2);
  }
}

@media(max-width:768px) {
  .ask-welcome {
    padding: 28px 16px 16px !important;
  }
}

@media(max-width:768px) {
  .ask-welcome-greeting {
    font-size: 20px !important;
  }
}

@media(max-width:768px) {
  .ask-suggest-list {
    gap: 7px !important;
  }
}

@media(max-width:768px) {
  .ask-suggest-item {
    padding: 10px 13px !important;
  }
}

@media(max-width:768px) {
  .ask-suggest-text {
    font-size: 12.5px !important;
  }
}

@media(max-width:768px) {
  .ask-bub {
    font-size: 13.5px !important;
    padding: 10px 13px !important;
  }
}

@media(max-width:768px) {
  .ask-row { max-width: 90% !important; }
}

@media(max-width:768px) {
  /* Hide mob-nav and footer when chat is open */
  body:has(#pg-ask.on) #mob-nav { display: none !important; }
}

@media(max-width:768px) {
  body:has(#pg-ask.on) .site-footer { display: none !important; }
}

@media(max-width:768px) {
  /* ── Xpress compose — fixed layout ── */
.xp-compose { padding: 0; }
}

@media(max-width:768px) {
  .xp-name-row { padding: 12px 16px 0; }
}

@media(max-width:768px) {
  .xp-name-inp {
  width: 100%;
  box-sizing: border-box;
  border: 1.5px solid var(--G2);
  border-radius: 8px;
  padding: 9px 13px;
  font-family: var(--DM);
  font-size: 13px;
  font-weight: 500;
  color: var(--K);
  background: var(--G1);
  outline: none;
  transition: border-color .18s;
}
}

@media(max-width:768px) {
  .xp-name-inp:focus { border-color: var(--K); background: var(--W); }
}

@media(max-width:768px) {
  .xp-name-inp::placeholder { color: var(--G3); }
}

@media(max-width:768px) {
  .xp-compose-body-row {
  display: flex;
  gap: 12px;
  padding: 10px 16px 14px;
  align-items: flex-start;
}
}

@media(max-width:768px) {
  .xp-av-box {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--K);
  color: var(--W);
  font-family: var(--BG);
  font-size: 14px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
}

@media(max-width:768px) {
  .xp-compose-in {
  flex: 1;
  min-width: 0;
}
}

@media(max-width:768px) {
  .xp-compose-textarea {
  width: 100%;
  box-sizing: border-box;
  border: none;
  outline: none;
  font-family: var(--DM);
  font-size: 14px;
  color: var(--K);
  background: transparent;
  resize: none;
  line-height: 1.5;
  min-height: 40px;
  max-height: 150px;
  padding: 0;
}
}

@media(max-width:768px) {
  .xp-compose-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--G2);
}
}

@media(max-width:768px) {
  .xp-pub-btn {
  background: var(--K);
  color: var(--W);
  border: none;
  border-radius: 8px;
  font-family: var(--DM);
  font-size: 13px;
  font-weight: 700;
  padding: 8px 18px;
  cursor: pointer;
  transition: opacity .15s;
}
}

@media(max-width:768px) {
  .xp-pub-btn:hover { opacity: .85; }
}