/* ═══════════════════════════════════════════════════════════════════════════
   KG APP CHROME — global mobile-app shell for Omastro front-end pages
   ─────────────────────────────────────────────────────────────────────────
   ONE new file, owned by Worker 3. Do NOT edit sibling CSS/JS/PHP files —
   every rule here is additive and scoped under app-page body classes, so it
   cannot collide with Worker 1 (chat) or Worker 2 (kundali) edits.

   HOOKS (read-only, verified against the tree):
   • Theme:  <html class="kg-dark" data-theme="dark|light">  (set by the
              inline boot script in templates/kundali-page.php from
              localStorage['kg-dark']); some CSS also uses body.kg-dark.
              Tokens below are defined for BOTH, so either hook works.
   • Pages:  body.kg-fullpage (shared by BOTH templates: chat + kundali),
              body.kg-ai-chat-page / body.kg-chat-fullpage /
              body.kg-jyotish-chat-page / body.kg-ai-chat-prediction-page
              (chat variants), main#primary.kg-main-landmark (the app column).
   • Existing bottom nav (read-only): #kgbn-v10, #kg-bottomnav,
              .kg-bottomnav, .kg-liquid-nav  (+ .kg-bnav-hidden /
              .kgbn-v10-hidden hide states, respected — we never force
              display on these).
   • Flutter WebView injects --kg-app-safe-bottom for the Android nav bar
              (see includes/divine-chat-page.php) — we reuse that pattern.

   OPT-IN CLASSES provided for the sibling workers:
   • .kg-scroll        inner scroll container (keeps working when body is locked)
   • .kg-composer      sticky bottom composer bar (keyboard-friendly)
   • .kg-tabbar        bottom tab bar component (see §10 for markup)
   • .kg-appbar        sticky top app bar
   • .kg-card .kg-btn .kg-btn-primary .kg-btn-ghost .kg-chip .kg-input
   • .kg-fs-xs/sm/base/lg/xl   type scale utilities
   • .kg-section-title .kg-eyebrow
   • body.kg-has-tabbar  (add via JS when a tab bar is present → reserves
                          bottom clearance so content is never hidden)

   KEYBOARD — JS-free strategy (Worker 1 owns the visualViewport JS for chat;
   this file is the CSS foundation):
   1. Every text input is ≥16px (§7) → iOS never auto-zooms on focus.
   2. Composers use position:sticky;bottom:0 INSIDE their scroll context
      (.kg-composer) instead of viewport-fixed bars, so they ride above the
      iOS/Android keyboard instead of being shoved off-screen. The template
      already sets interactive-widget=resizes-content in the viewport meta.
   3. dvh units + env(safe-area-inset-*) keep chrome glued to the real
      visible viewport; --kg-app-safe-bottom covers Android WebView where
      env() is 0.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ════════════════ §1 · DESIGN TOKENS — light (warm white) ════════════════ */
:root {
  color-scheme: light;

  /* surfaces */
  --kg-bg:            #FFF9F2;  /* page background (the "phone screen") */
  --kg-bg-deep:       #F6EDE1;  /* ambient backdrop behind the column   */
  --kg-surface:       #FFFFFF;
  --kg-card:          #FFFFFF;
  --kg-input-bg:      #FFFFFF;

  /* text */
  --kg-text:          #241A10;
  --kg-muted:         #6E5F4D;
  --kg-faint:         #A2917B;

  /* lines */
  --kg-border:        #E9D8BF;
  --kg-border-soft:   #F4E9D6;

  /* brand — saffron */
  --kg-accent:        #FF6B00;
  --kg-accent-strong: #E05A00;
  --kg-accent-ink:    #241203;  /* text placed ON saffron (dark = readable) */
  --kg-accent-soft:   rgba(255,107,0,.10);
  --kg-focus-ring:    rgba(255,107,0,.55);

  /* ambient backdrop glows (desktop column, §5) */
  --kg-ambient-a:     rgba(255,107,0,.12);
  --kg-ambient-b:     rgba(255,150,60,.07);

  /* shadows */
  --kg-shadow-sm:     0 1px 2px rgba(120,70,20,.06), 0 2px 8px rgba(120,70,20,.06);
  --kg-shadow:        0 8px 24px rgba(120,70,20,.12);
  --kg-shadow-lg:     0 24px 80px rgba(90,50,10,.22), 0 4px 16px rgba(90,50,10,.12);

  /* chrome */
  --kg-tabbar-bg:     rgba(255,249,242,.82);
  --kg-appbar-bg:     rgba(255,249,242,.85);
  --kg-scroll-thumb:  #D9C2A1;
  --kg-selection:     rgba(255,107,0,.22);

  /* radii */
  --kg-r-sm: 10px;
  --kg-r-md: 16px;
  --kg-r-lg: 20px;
  --kg-r-xl: 24px;
  --kg-r-pill: 999px;

  /* 8pt spacing rhythm */
  --kg-sp-1: 4px;
  --kg-sp-2: 8px;
  --kg-sp-3: 12px;
  --kg-sp-4: 16px;
  --kg-sp-5: 24px;
  --kg-sp-6: 32px;
  --kg-sp-7: 48px;

  /* type scale */
  --kg-fs-xs: 12px;
  --kg-fs-sm: 14px;
  --kg-fs-base: 16px;
  --kg-fs-lg: 20px;
  --kg-fs-xl: 24px;

  /* typography */
  --kg-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Noto Sans", "Noto Sans Devanagari", "Mangal", "Kokila", sans-serif;

  /* safe-area insets (env() may be 0 on old browsers — graceful) */
  --kg-sat: env(safe-area-inset-top, 0px);
  --kg-sar: env(safe-area-inset-right, 0px);
  --kg-sab: env(safe-area-inset-bottom, 0px);
  --kg-sal: env(safe-area-inset-left, 0px);

  /* layout */
  --kg-col-w: 560px;   /* app column width */
  --kg-tabbar-h: 64px; /* reserved height when body.kg-has-tabbar is set */
}

/* ════════════════ §2 · DESIGN TOKENS — dark (deep warm charcoal) ═════════
   True dark, NOT pure black: warm charcoal #14100B base, warm-tinted
   surfaces, readable warm-gray muted text, saffron accent intact. */
html.kg-dark,
body.kg-dark,
html[data-theme="dark"],
body[data-theme="dark"] {
  color-scheme: dark;

  --kg-bg:            #14100B;
  --kg-bg-deep:       #0C0805;
  --kg-surface:       #1D1712;
  --kg-card:          #221A13;
  --kg-input-bg:      #221A13;

  --kg-text:          #F4EDE2;
  --kg-muted:         #C6B39B;
  --kg-faint:         #8D7B64;

  --kg-border:        #3A2E21;
  --kg-border-soft:   #2A2118;

  --kg-accent:        #FF6B00;
  --kg-accent-strong: #FF8A2A;
  --kg-accent-ink:    #241203;
  --kg-accent-soft:   rgba(255,107,0,.16);
  --kg-focus-ring:    rgba(255,122,26,.65);

  --kg-ambient-a:     rgba(255,107,0,.13);
  --kg-ambient-b:     rgba(140,60,0,.10);

  --kg-shadow-sm:     0 1px 2px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.35);
  --kg-shadow:        0 8px 28px rgba(0,0,0,.5);
  --kg-shadow-lg:     0 24px 90px rgba(0,0,0,.65), 0 4px 18px rgba(0,0,0,.5);

  --kg-tabbar-bg:     rgba(20,16,11,.82);
  --kg-appbar-bg:     rgba(20,16,11,.85);
  --kg-scroll-thumb:  #4A3A28;
  --kg-selection:     rgba(255,107,0,.38);
}

/* ════════════════ §3 · BASE PAGE CHROME (scoped — never global) ═════════ */
body.kg-fullpage {
  font-family: var(--kg-font);
  background-color: var(--kg-bg);
  color: var(--kg-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;               /* no sideways page wobble on mobile */
  overscroll-behavior: none;      /* page chrome doesn't rubber-band … */
  touch-action: pan-x pan-y;
}

/* html-level lock, best effort (see FIXLOG: templates/kundali-page.php sets
   html{overscroll-behavior:auto!important} inline — coordinator should scope
   that rule; until then body-level lock still holds). */
html:has(body.kg-fullpage) {
  height: 100%;
  overscroll-behavior: none;
}

/* …while inner scroll containers keep scrolling (opt-in utility for workers) */
body.kg-fullpage .kg-scroll {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;  /* scroll chaining stops here, page stays put */
  scrollbar-width: thin;
}

body.kg-fullpage a,
body.kg-fullpage button {
  -webkit-tap-highlight-color: rgba(255,107,0,.18);
  touch-action: manipulation;      /* kill the 300ms tap delay */
}

body.kg-fullpage img,
body.kg-fullpage svg,
body.kg-fullpage video {
  max-width: 100%;
  height: auto;
}

/* ════════════════ §4 · MOBILE STATIC SHELL ════════════════
   App pages behave like a native screen: the column fills the real visible
   viewport (dvh with vh fallback), the page itself never scrolls sideways
   or rubber-bands, inner regions scroll via .kg-scroll. */
body.kg-fullpage #primary.kg-main-landmark {
  position: relative;
  width: 100%;
  min-height: 100vh;   /* fallback */
  min-height: 100dvh;  /* real visible viewport (URL bar aware) */
  margin-inline: auto;
  background: var(--kg-bg);
  color: var(--kg-text);
}

/* notch / home-indicator respect for anything pinned to the viewport edge */
body.kg-fullpage .kg-pin-bottom {
  padding-bottom: max(var(--kg-sab), var(--kg-app-safe-bottom, 0px));
  padding-left: var(--kg-sal);
  padding-right: var(--kg-sar);
}

/* ════════════════ §5 · DESKTOP APP COLUMN (≥768px) ════════════════
   The whole web UI becomes a centered "phone screen" on a warm ambient
   backdrop. 768–1100px: edge-to-edge column. ≥1100px: floating rounded card. */
@media (min-width: 768px) {
  body.kg-fullpage {
    background-color: var(--kg-bg-deep);
    background-image:
      radial-gradient(1200px 620px at 50% -12%, var(--kg-ambient-a), transparent 62%),
      radial-gradient(1000px 560px at 50% 112%, var(--kg-ambient-b), transparent 62%);
    background-attachment: fixed;
    background-repeat: no-repeat;
  }

  body.kg-fullpage #primary.kg-main-landmark {
    max-width: var(--kg-col-w);
    min-height: 100vh;
    min-height: 100dvh;
    box-shadow: var(--kg-shadow);
    border-inline: 1px solid var(--kg-border-soft);
  }
}

/* very wide screens: the column floats like a phone */
@media (min-width: 1100px) {
  body.kg-fullpage #primary.kg-main-landmark {
    margin-block: 24px;
    min-height: calc(100vh - 48px);
    min-height: calc(100dvh - 48px);
    border: 1px solid var(--kg-border-soft);
    border-radius: var(--kg-r-xl);      /* 24px rounded "phone screen" */
    box-shadow: var(--kg-shadow-lg);
    overflow: clip;                      /* keeps corners clean; no scroll box */
  }
}

/* ════════════════ §6 · KEYBOARD FRIENDLINESS ════════════════
   1) ≥16px on ALL text entry → iOS Safari never auto-zooms on focus.
   2) .kg-composer sticks INSIDE its scroll context (not viewport-fixed),
      so the iOS/Android keyboard pushes content up instead of covering it.
      Pair with the template's interactive-widget=resizes-content viewport. */
body.kg-fullpage input,
body.kg-fullpage textarea,
body.kg-fullpage select {
  font-size: 16px;   /* the iOS-zoom killer — do not reduce */
}

body.kg-fullpage .kg-composer {
  position: sticky;
  bottom: 0;
  z-index: 60;
  background: var(--kg-bg);
  background: color-mix(in srgb, var(--kg-bg) 84%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--kg-border-soft);
  padding: var(--kg-sp-3) var(--kg-sp-4);
  padding-bottom: max(var(--kg-sp-3),
                      calc(var(--kg-sp-3) + var(--kg-sab)),
                      calc(var(--kg-sp-3) + var(--kg-app-safe-bottom, 0px)));
}

/* never let a stray viewport-fixed bar sit under the keyboard zone */
body.kg-fullpage .kg-avoid-kb {
  bottom: max(0px, var(--kg-sab));
}

/* ════════════════ §7 · TYPOGRAPHY + SPACING SYSTEM ════════════════ */
body.kg-fullpage .kg-fs-xs   { font-size: var(--kg-fs-xs); line-height: 1.5; }
body.kg-fullpage .kg-fs-sm   { font-size: var(--kg-fs-sm); line-height: 1.55; }
body.kg-fullpage .kg-fs-base { font-size: var(--kg-fs-base); line-height: 1.6; }
body.kg-fullpage .kg-fs-lg   { font-size: var(--kg-fs-lg); line-height: 1.4; font-weight: 700; }
body.kg-fullpage .kg-fs-xl   { font-size: var(--kg-fs-xl); line-height: 1.3; font-weight: 800; }

body.kg-fullpage .kg-eyebrow {
  font-size: var(--kg-fs-xs);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--kg-accent-strong);
}

body.kg-fullpage .kg-section-title {
  font-size: var(--kg-fs-base);
  font-weight: 800;
  letter-spacing: .01em;
  color: var(--kg-text);
  margin: 0 0 var(--kg-sp-3);
  display: flex;
  align-items: center;
  gap: var(--kg-sp-2);
}
body.kg-fullpage .kg-section-title::before {
  content: "";
  width: 4px;
  height: 1.1em;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--kg-accent), var(--kg-accent-strong));
  flex: none;
}

body.kg-fullpage .kg-muted { color: var(--kg-muted); }
body.kg-fullpage .kg-faint { color: var(--kg-faint); }

/* card */
body.kg-fullpage .kg-card {
  background: var(--kg-card);
  border: 1px solid var(--kg-border-soft);
  border-radius: var(--kg-r-lg);          /* 20px */
  box-shadow: var(--kg-shadow-sm);
  padding: var(--kg-sp-4);
  color: var(--kg-text);
}
body.kg-fullpage .kg-card + body.kg-fullpage .kg-card { margin-top: var(--kg-sp-4); }

/* buttons — 48px touch targets, saffron primary */
body.kg-fullpage .kg-btn {
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--kg-sp-2);
  min-height: 48px;
  padding: 12px 20px;
  border-radius: 14px;
  border: 1px solid var(--kg-border);
  background: var(--kg-surface);
  color: var(--kg-text);
  font-size: var(--kg-fs-base);
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  transition: transform .12s ease, box-shadow .18s ease, background-color .18s ease;
}
body.kg-fullpage .kg-btn:active { transform: scale(.97); }

body.kg-fullpage .kg-btn-primary {
  background: linear-gradient(135deg, var(--kg-accent), var(--kg-accent-strong));
  border-color: transparent;
  color: var(--kg-accent-ink);
  box-shadow: 0 6px 18px rgba(255,107,0,.32);
}
body.kg-fullpage .kg-btn-primary:active { box-shadow: 0 2px 8px rgba(255,107,0,.28); }

body.kg-fullpage .kg-btn-ghost {
  background: transparent;
  border-color: var(--kg-border);
  box-shadow: none;
}
body.kg-fullpage .kg-btn-block { display: flex; width: 100%; }
body.kg-fullpage .kg-btn-sm { min-height: 40px; padding: 8px 14px; font-size: var(--kg-fs-sm); border-radius: 12px; }

/* chips / pills */
body.kg-fullpage .kg-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--kg-r-pill);
  background: var(--kg-accent-soft);
  border: 1px solid var(--kg-border-soft);
  color: var(--kg-text);
  font-size: var(--kg-fs-xs);
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}
body.kg-fullpage .kg-chip.is-on {
  background: var(--kg-accent);
  border-color: transparent;
  color: var(--kg-accent-ink);
}

/* text inputs */
body.kg-fullpage .kg-input {
  font-family: inherit;
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--kg-border);
  background: var(--kg-input-bg);
  color: var(--kg-text);
  font-size: 16px;   /* keep ≥16px (iOS zoom) */
}
body.kg-fullpage .kg-input::placeholder { color: var(--kg-faint); }

/* sticky top app bar (opt-in) */
body.kg-fullpage .kg-appbar {
  position: sticky;
  top: 0;
  z-index: 800;
  display: flex;
  align-items: center;
  gap: var(--kg-sp-3);
  min-height: 56px;
  padding: calc(8px + var(--kg-sat)) var(--kg-sp-4) 8px;
  background: var(--kg-appbar-bg);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--kg-border-soft);
}

/* ════════════════ §8 · THEME POLISH ════════════════ */
/* scrollbars — both themes, page-level only */
body.kg-fullpage {
  scrollbar-width: thin;
  scrollbar-color: var(--kg-scroll-thumb) transparent;
}
body.kg-fullpage ::-webkit-scrollbar { width: 10px; height: 10px; }
body.kg-fullpage ::-webkit-scrollbar-track { background: transparent; }
body.kg-fullpage ::-webkit-scrollbar-thumb {
  background: var(--kg-scroll-thumb);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: content-box;
}
body.kg-fullpage ::-webkit-scrollbar-thumb:hover { background: var(--kg-accent); background-clip: content-box; }

/* text selection */
body.kg-fullpage ::selection {
  background: var(--kg-selection);
  color: var(--kg-text);
}

/* accessible focus — visible saffron ring, never removed globally */
body.kg-fullpage :focus { outline: none; }
body.kg-fullpage :focus-visible {
  outline: 2px solid var(--kg-accent);
  outline-offset: 2px;
  border-radius: 8px;
  box-shadow: 0 0 0 4px var(--kg-focus-ring);
}

/* divider */
body.kg-fullpage .kg-hr {
  border: 0;
  border-top: 1px solid var(--kg-border-soft);
  margin: var(--kg-sp-4) 0;
}

/* reduced motion — static, no jank */
@media (prefers-reduced-motion: reduce) {
  body.kg-fullpage *,
  body.kg-fullpage *::before,
  body.kg-fullpage *::after {
    animation-duration: .01ms;
    transition-duration: .01ms;
    scroll-behavior: auto;
  }
}

/* ════════════════ §9 · EXISTING BOTTOM NAV — app-style treatment ═════════
   Markup already in the tree (read-only): #kgbn-v10, #kg-bottomnav,
   .kg-bottomnav, .kg-liquid-nav. We style the CONTAINER only (position,
   blur, safe-area); item internals and the JS hide/show states
   (.kg-bnav-hidden, .kgbn-v10-hidden, inline display:none on chat pages)
   are left untouched. */
body.kg-fullpage #kgbn-v10,
body.kg-fullpage #kg-bottomnav,
body.kg-fullpage .kg-bottomnav,
body.kg-fullpage .kg-liquid-nav {
  position: fixed !important;
  bottom: 0 !important;
  /* FIX 2026-09-24: old code used left:50% + translateX(-50%), but legacy
     `left:0 !important` rules win the cascade while the translate still
     applied — shoving the nav half off-screen to the left on mobile.
     margin:auto centering is immune to that fight. */
  left: 0 !important;
  right: 0 !important;
  transform: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
  max-width: var(--kg-col-w) !important;      /* stays inside the app column */
  z-index: 900;
  background: var(--kg-tabbar-bg);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  border-top: 1px solid var(--kg-border-soft);
  padding-bottom: max(var(--kg-sab), var(--kg-app-safe-bottom, 0px));
  padding-left: var(--kg-sal);
  padding-right: var(--kg-sar);
}

/* saffron active-tab indicator for existing navs (generic item hooks) */
body.kg-fullpage #kgbn-v10 .is-active,
body.kg-fullpage #kg-bottomnav .is-active,
body.kg-fullpage .kg-bottomnav .is-active,
body.kg-fullpage .kg-liquid-nav .is-active,
body.kg-fullpage #kgbn-v10 .active,
body.kg-fullpage #kg-bottomnav .active,
body.kg-fullpage .kg-bottomnav .active,
body.kg-fullpage .kg-liquid-nav .active,
body.kg-fullpage #kgbn-v10 [aria-current="page"],
body.kg-fullpage #kg-bottomnav [aria-current="page"],
body.kg-fullpage .kg-bottomnav [aria-current="page"],
body.kg-fullpage .kg-liquid-nav [aria-current="page"] {
  color: var(--kg-accent-strong);
}

/* floating dock look on very wide screens */
@media (min-width: 1100px) {
  body.kg-fullpage #kgbn-v10,
  body.kg-fullpage #kg-bottomnav,
  body.kg-fullpage .kg-bottomnav,
  body.kg-fullpage .kg-liquid-nav {
    bottom: 24px;
    max-width: calc(var(--kg-col-w) - 48px);
    border: 1px solid var(--kg-border-soft);
    border-radius: 20px;
    box-shadow: var(--kg-shadow-lg);
    overflow: hidden;
  }
}

/* ════════════════ §10 · .kg-tabbar — opt-in bottom tab bar component ═════
   Markup contract (drop-in anywhere inside the app column):
     <nav class="kg-tabbar" aria-label="Primary">
       <a class="kg-tabbar-item is-active" href="/ai-chat/">
         <span class="kg-tabbar-ico" aria-hidden="true">💬</span>
         <span class="kg-tabbar-label">Chat</span>
       </a>
       … 3–5 items …
     </nav>
   Add class "kg-has-tabbar" to <body> (one line of JS) and page content
   automatically clears the bar. */
body.kg-fullpage .kg-tabbar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--kg-col-w);
  z-index: 900;
  display: flex;
  align-items: stretch;
  background: var(--kg-tabbar-bg);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  border-top: 1px solid var(--kg-border-soft);
  padding-bottom: max(var(--kg-sab), var(--kg-app-safe-bottom, 0px));
  padding-left: var(--kg-sal);
  padding-right: var(--kg-sar);
}

body.kg-fullpage .kg-tabbar-item {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: var(--kg-tabbar-h);
  padding: 8px 4px 6px;
  color: var(--kg-muted);
  text-decoration: none;
  font-size: var(--kg-fs-xs);
  font-weight: 700;
  line-height: 1.2;
  border-radius: 12px;
  transition: color .16s ease, transform .12s ease;
}
body.kg-fullpage .kg-tabbar-item:active { transform: scale(.94); }

body.kg-fullpage .kg-tabbar-ico {
  font-size: 22px;
  line-height: 1;
  display: block;
}

/* active tab: saffron label + pill indicator on top edge */
body.kg-fullpage .kg-tabbar-item.is-active { color: var(--kg-accent-strong); }
body.kg-fullpage .kg-tabbar-item.is-active::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 4px;
  border-radius: 0 0 6px 6px;
  background: linear-gradient(90deg, var(--kg-accent), var(--kg-accent-strong));
  box-shadow: 0 2px 8px rgba(255,107,0,.5);
}

/* reserve space so the bar never covers content */
body.kg-fullpage.kg-has-tabbar #primary.kg-main-landmark {
  padding-bottom: calc(var(--kg-tabbar-h) + max(var(--kg-sab), var(--kg-app-safe-bottom, 0px)) + var(--kg-sp-4));
}

/* floating dock on very wide screens */
@media (min-width: 1100px) {
  body.kg-fullpage .kg-tabbar {
    bottom: 24px;
    max-width: calc(var(--kg-col-w) - 48px);
    border: 1px solid var(--kg-border-soft);
    border-radius: 20px;
    box-shadow: var(--kg-shadow-lg);
  }
}

/* ════════════════ §11 · SMALL UTILITIES ════════════════ */
body.kg-fullpage .kg-block { display: block; width: 100%; }
body.kg-fullpage .kg-center { text-align: center; }
body.kg-fullpage .kg-stack > * + * { margin-top: var(--kg-sp-3); }  /* 8pt-ish vertical rhythm */
body.kg-fullpage .kg-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

/* ════════════════ §11 · FIX 2026-09-24 — /kundali/ mobile tab refinements ═══
   1. Tighten gap between sticky tab pills and tab content on mobile.
   2. Chart drag-scroll: .csvg had touch-action:pinch-zoom which BLOCKED
      vertical page scroll when the drag started on a chart. pan-y restores it.
   3. General responsive hardening for tab panels. */
@media (max-width: 768px) {
  body.kg-fullpage .kg-main-tabs-scroll-wrapper {
    padding: 6px 10px !important;
  }
  body.kg-fullpage .kg-main-tabs-pill-bar {
    padding: 6px 4px !important;
    gap: 6px !important;
  }
  body.kg-fullpage .kg-results-content-column .tpanel {
    padding: 8px 10px 0 !important;
  }
  /* first card in each panel sits flush under the tab bar */
  body.kg-fullpage .kg-results-content-column .tpanel > :first-child {
    margin-top: 0 !important;
  }
  body.kg-fullpage .kg-results-content-column .tpanel > .kg-stitch-section-card:first-child,
  body.kg-fullpage .kg-results-content-column .tpanel > .tcard:first-child,
  body.kg-fullpage .kg-results-content-column .tpanel > .ccard:first-child {
    margin-top: 2px !important;
  }
  /* tab pills: compact, no wrap, thumb-friendly */
  body.kg-fullpage .kg-results-tab-pill {
    padding: 8px 12px !important;
    font-size: .78rem !important;
    white-space: nowrap !important;
  }
  /* chart cards: full-bleed-ish, no stray outer margins */
  body.kg-fullpage .kg-results-content-column .c2 {
    gap: 10px !important;
    padding: 0 !important;
  }
  body.kg-fullpage .kg-results-content-column .ccard {
    margin: 0 0 10px !important;
    padding: 10px !important;
  }
  /* tables inside panels: contained horizontal scroll, never page-breaking */
  body.kg-fullpage .kg-results-content-column .tcard {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  body.kg-fullpage .kg-results-content-column table {
    font-size: .76rem !important;
  }
}

/* chart drag-scroll fix (all viewports): allow vertical pan + pinch zoom */
body.kg-fullpage .csvg,
body.kg-fullpage svg.csvg {
  touch-action: pan-y pinch-zoom !important;
  cursor: default !important;
  max-width: 100% !important;
  height: auto !important;
}

/* ══════════════════════════════════════════════════════════
   UI ENHANCE 2026-09-24 — Kundali tabs + sticky bar polish
   ══════════════════════════════════════════════════════════ */
/* Sticky tab bar: glassy backdrop so content scrolling under it stays readable */
body.kg-fullpage .kg-main-tabs-scroll-wrapper {
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 2px 16px rgba(139, 69, 19, .07);
  border-bottom: 1px solid var(--kg-sep, rgba(184,138,0,.14));
}
body.kg-fullpage.kg-dark .kg-main-tabs-scroll-wrapper,
body.kg-dark .kg-main-tabs-scroll-wrapper {
  box-shadow: 0 2px 16px rgba(0, 0, 0, .35);
  border-bottom-color: rgba(255, 107, 0, .16);
}
/* Tab pills: PLAIN flat design (user request 2026-09-24) — no rounded pills,
   square edges, flat colors, simple active indicator */
body.kg-fullpage .kg-results-tab-pill {
  border-radius: 4px !important;
  border: 1px solid var(--kg-sep, rgba(184,138,0,.25)) !important;
  background: var(--kg-card, #fff) !important;
  transition: background .15s ease, color .15s ease !important;
  box-shadow: none !important;
}
body.kg-fullpage .kg-results-tab-pill:active {
  transform: none;
}
body.kg-fullpage .kg-results-tab-pill.active {
  background: #FF6B00 !important;
  border-color: #FF6B00 !important;
  color: #fff !important;
  box-shadow: none !important;
}
body.kg-fullpage .kg-results-tab-pill.active i {
  color: #fff !important;
}
/* Tab panels: soft entrance animation on switch */
body.kg-fullpage .kg-results-content-column .tpanel.active {
  animation: kgTabIn .28s ease both;
}
@keyframes kgTabIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Cards: subtle elevation for app-like depth */
body.kg-fullpage .kg-results-content-column .tcard,
body.kg-fullpage .kg-results-content-column .ccard,
body.kg-fullpage .kg-results-content-column .kg-stitch-section-card {
  border-radius: 16px !important;
  box-shadow: 0 2px 12px rgba(139, 69, 19, .06) !important;
}
body.kg-fullpage.kg-dark .kg-results-content-column .tcard,
body.kg-dark .kg-results-content-column .tcard,
body.kg-fullpage.kg-dark .kg-results-content-column .ccard,
body.kg-dark .kg-results-content-column .ccard {
  box-shadow: 0 2px 12px rgba(0, 0, 0, .4) !important;
}

/* ══════════════════════════════════════════════════════════
   FIX 2026-09-24 — Mobile: Kundali tabs PLAIN + FIXED.
   User feedback: sticky tabs hide behind header initially and users
   don't know scrolling reveals them. Make the tab bar position:fixed
   directly under the header — always visible, no confusion.
   Desktop (≥1024px) keeps its sidebar layout untouched.
   ══════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  /* outer column becomes a plain height spacer (no sticky) */
  body.kg-fullpage .kg-results-tabs-column {
    position: static !important;
    top: auto !important;
    max-height: none !important;
    overflow: visible !important;
    z-index: auto !important;
    height: var(--kg-mtab-h, 60px) !important;
    min-height: var(--kg-mtab-h, 60px) !important;
  }
  /* the actual tab bar: fixed under the header, always on screen */
  body.kg-fullpage .kg-main-tabs-scroll-wrapper {
    position: fixed !important;
    top: var(--kg-sticky-top, 56px) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 999 !important;
    /* plain: solid bg, simple shadow, no blur */
    background: var(--kg-card, #ffffff) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .10) !important;
    border-bottom: 1px solid var(--kg-sep, rgba(184,138,0,.16)) !important;
  }
  body.kg-fullpage.kg-dark .kg-main-tabs-scroll-wrapper,
  body.kg-dark .kg-main-tabs-scroll-wrapper {
    background: #000000 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .5) !important;
    border-bottom-color: rgba(255, 107, 0, .18) !important;
  }
}

/* ── Unified Vedic Crimson Header Across All Pages ── */
#kg-topbar, .kg-topbar {
  background: linear-gradient(135deg, #7B0D1E 0%, #5C0A16 50%, #3D0510 100%) !important;
  backdrop-filter: blur(24px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(190%) !important;
  border-bottom: 1.5px solid rgba(255, 215, 0, 0.35) !important;
  box-shadow: 0 4px 20px rgba(60, 0, 10, 0.25), inset 0 -1px 0 rgba(255, 215, 0, 0.2) !important;
}
#kg-topbar .kg-hamburger .kg-ham-line { background: #FFD700 !important; }
#kg-topbar .kg-tb-search-btn, #kg-topbar .kg-tb-notif { color: #FFD700 !important; }
#kg-topbar .kg-topbar-logo-wrap .kg-logo-text { color: #FFD700 !important; text-shadow: 0 0 10px rgba(255, 215, 0, 0.4) !important; }
#kg-topbar .kg-logo-icon { color: #FFD700 !important; filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.5)) !important; }

/* ── Suppress iOS Native Video Player Controls in WKWebView ── */
video::-webkit-media-controls,
video::-webkit-media-controls-start-playback-button,
video::-webkit-media-controls-play-button,
video::-webkit-media-controls-enclosure,
video::-webkit-media-controls-panel,
video::-webkit-media-controls-overlay-play-button {
  display: none !important;
  -webkit-appearance: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}