/* ═══════════════════════════════════════════════════════════
   KUNDALI ENGINE — MAIN STYLESHEET (Merged v7.0)
   Merged from: kundali-style.css + omx-input-v1.css + kundali-overrides.css
   Merge order: Base → OMX Input → Overrides (overrides win as intended)
   DO NOT edit individual files — edit this file only.
   ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   KUNDALI GURU — SANATANI MODERN UI v3
   Fonts: Cinzel Decorative (headings) + Noto Sans Devanagari + Cormorant Garamond
   Theme: Deep Vedic — Saffron/Gold/Maroon/Jade with sacred geometry
════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Cinzel+Decorative:wght@400;700;900&family=Cinzel:wght@400;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&family=Noto+Sans+Devanagari:wght@300;400;500;600;700;800&family=Rajdhani:wght@400;500;600;700&display=swap');

:root{
  --saffron:#FF6B00;--saffron2:#FF8C00;--saffronl:#FFE0C0;--saffronll:#FFF0E0;
  --maroon:#7B0D1E;--maroon2:#C0392B;--maroon3:#4A0010;
  --gold:#9A6E00;--gold2:#B88A00;--gold3:#FFD700;--goldl:#FFF0B0;--goldll:#FFF8D0;
  --jade:#1B5E20;--jade2:#2E7D32;--jade3:#43A047;
  --deep:#000000;--deep2:#111111;--deep3:#1a1a1a;
  --bg:#FFFFFF;--bg2:#F8F8F8;--bg3:#F0F0F0;
  --card:#FFFFFF;--card2:#F8F8F8;--card3:#F0F0F0;
  --border:rgba(184,138,0,.22);--border2:rgba(184,138,0,.38);--border3:rgba(184,138,0,.55);
  --text:#1A0A00;--text2:#2E1200;--muted:#7A5030;--muted2:#9A6A40;
  --shadow:0 2px 16px rgba(0,0,0,.12);
  --shadow2:0 6px 32px rgba(0,0,0,.18);
  --shadow3:0 16px 64px rgba(0,0,0,.24);
  --glow:0 0 20px rgba(255,107,0,.3);
  --glow2:0 0 40px rgba(255,107,0,.5);
  --r:16px;--r2:10px;--r3:6px;
  --nav-h:0px; /* WordPress: no fixed bottom nav */
  /* Chart */
  --chart-bg:#FFFFFF;--chart-line:#C8783C;--chart-fill:rgba(200,120,60,.06);
  --chart-lagna:rgba(200,120,60,.08);
  /* Gradients */
  --g-saffron:linear-gradient(135deg,#FF6B00,#FF8C00,#FFB300);
  --g-maroon:linear-gradient(135deg,#7B0D1E,#A01828,#C0392B);
  --g-gold:linear-gradient(135deg,#B8860B,#D4A017,#FFD700);
  --g-deep:linear-gradient(135deg,#000000,#111111,#1a1a1a);
  --g-card:linear-gradient(145deg,#ffffff,#fafafa);
}
/* Dark mode removed — light mode only */

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{font-size:16px;scroll-behavior:smooth;}
body{
  font-family:'Plus Jakarta Sans','Noto Sans Devanagari','Rajdhani',sans-serif;
  background:var(--bg);color:var(--text);
  min-height:100vh;overflow-x:hidden;
  transition:background .3s,color .3s;
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar{width:6px;height:6px;}
::-webkit-scrollbar-track{background:var(--bg2);}
::-webkit-scrollbar-thumb{background:var(--gold);border-radius:3px;}

/* ── SACRED GEOMETRY BACKGROUND ── */
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    radial-gradient(circle at 20% 20%,rgba(255,107,0,.03) 0%,transparent 60%),
    radial-gradient(circle at 80% 80%,rgba(184,134,11,.03) 0%,transparent 60%),
    radial-gradient(circle at 50% 50%,rgba(123,13,30,.02) 0%,transparent 70%);
}

/* ══════════════════════════════
   NAV — BOTTOM BAR ON MOBILE
   TOP BAR ON DESKTOP
════════════════════════════════ */
.nav{
  position:relative;
  background:var(--g-deep);
  border-bottom:1px solid rgba(255,107,0,.2);
  border-top:none;
  box-shadow:0 4px 24px rgba(0,0,0,.3);
  height:auto;
  min-height:52px;
}
.nav-inner{
  display:flex;align-items:center;justify-content:space-around;
  height:52px;padding:0 8px;max-width:100%;
}
.logo{display:none;}
.nav-tabs{
  display:flex;align-items:center;justify-content:space-around;
  flex:1;height:100%;gap:0;
}
.ntab{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  flex:1;height:52px;cursor:pointer;color:rgba(255,220,150,.5);
  font-size:.55rem;font-weight:600;letter-spacing:.02em;
  transition:all .25s;padding:6px 2px 2px;gap:2px;
  font-family:'Rajdhani',sans-serif;text-transform:uppercase;
  position:relative;min-width:36px;
}
.ntab::before{
  content:attr(data-icon);font-size:1.3rem;line-height:1;
  transition:transform .25s,filter .25s;
}
.ntab.active{color:var(--saffron);}
.ntab.active::after{
  content:'';position:absolute;bottom:-1px;left:50%;transform:translateX(-50%);
  width:24px;height:2px;background:var(--saffron);border-radius:0 0 2px 2px;
  box-shadow:0 0 8px var(--saffron);
}
.ntab.active::before{transform:translateY(-2px);filter:drop-shadow(0 0 4px var(--saffron));}
.ntab:hover{color:rgba(255,220,150,.8);}
.nav-right{display:flex;align-items:center;gap:6px;padding-right:4px;}
.lang-btn{
  background:rgba(255,107,0,.15);border:1px solid rgba(255,107,0,.3);
  color:var(--saffron);border-radius:20px;padding:4px 10px;cursor:pointer;
  font-size:.7rem;font-weight:700;font-family:'Rajdhani',sans-serif;
  transition:all .2s;white-space:nowrap;
}
.lang-btn:hover{background:rgba(255,107,0,.25);box-shadow:var(--glow);}

/* ══════════════════════════════
   PAGES
════════════════════════════════ */
.kg-pg {
  display:none;
  min-height:0;
  padding:0;
  position:relative;z-index:1;
  animation:fadeIn .3s ease;
}
.kg-pg.active{display:block;min-height:200px;padding:16px 0;}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}

/* ══════════════════════════════
   HOMEPAGE HERO
════════════════════════════════ */
.home-hero{
  text-align:center;padding:24px 16px 20px;
  background:var(--g-deep);border-radius:20px;
  margin-bottom:20px;position:relative;overflow:hidden;
}
.home-hero::before{
  content:'ॐ';position:absolute;
  font-size:200px;font-family:'Noto Sans Devanagari',sans-serif;
  color:rgba(255,107,0,.04);top:-30px;left:50%;
  transform:translateX(-50%);pointer-events:none;line-height:1;
}
.hero-om{
  font-size:2.5rem;margin-bottom:8px;animation:pulse 3s ease-in-out infinite;
  filter:drop-shadow(0 0 12px rgba(255,107,0,.6));
}
@keyframes pulse{0%,100%{transform:scale(1);}50%{transform:scale(1.05);}}
.hero-title{
  font-family:'Cinzel Decorative',serif;
  font-size:1.6rem;font-weight:900;
  background:var(--g-gold);-webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;margin-bottom:4px;
  text-shadow:none;
}
.hero-sub{
  font-family:'Cormorant Garamond',serif;font-style:italic;
  color:rgba(255,220,150,.7);font-size:.9rem;margin-bottom:16px;
}
.hero-tagline{
  font-size:.75rem;color:rgba(255,220,150,.5);
  letter-spacing:.15em;text-transform:uppercase;font-family:'Rajdhani',sans-serif;
}

/* ══════════════════════════════
   HOME FEATURE CARDS
════════════════════════════════ */
.home-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:16px;
}
.home-card{
  background:var(--g-card);border:1px solid var(--border);border-radius:var(--r);
  padding:16px 12px;text-align:center;cursor:pointer;
  transition:all .3s;position:relative;overflow:hidden;
  box-shadow:var(--shadow);
}
.home-card::before{
  content:'';position:absolute;inset:0;
  background:var(--g-saffron);opacity:0;
  transition:opacity .3s;z-index:0;
}
.home-card:hover::before,.home-card:active::before{opacity:.06;}
.home-card-icon{
  font-size:2rem;margin-bottom:8px;display:block;
  filter:drop-shadow(0 2px 4px rgba(255,107,0,.3));
  transition:transform .3s;
}
.home-card:hover .home-card-icon{transform:scale(1.15) translateY(-2px);}
.home-card-title{
  font-family:'Cinzel',serif;font-size:.75rem;font-weight:700;
  color:var(--maroon);margin-bottom:3px;text-transform:uppercase;letter-spacing:.05em;
}
.home-card-desc{font-size:.65rem;color:var(--muted);line-height:1.4;}
.home-card.featured{
  grid-column:span 2;
  background:linear-gradient(135deg,var(--maroon3),var(--maroon),rgba(184,134,11,.2));
  border-color:var(--gold3);
}
.home-card.featured .home-card-title{color:var(--gold3);}
.home-card.featured .home-card-desc{color:rgba(255,220,150,.7);}

/* ══════════════════════════════
   PAGE TITLES
════════════════════════════════ */
.page-header{
  background:var(--g-deep);border-radius:16px;
  padding:16px 20px;margin-bottom:16px;
  display:flex;align-items:center;gap:14px;
  border:1px solid rgba(255,107,0,.15);
}
.page-header-icon{
  font-size:2rem;filter:drop-shadow(0 0 8px rgba(255,107,0,.5));
  flex-shrink:0;
}
.page-header-title{
  font-family:'Cinzel',serif;font-size:1.1rem;font-weight:700;
  background:var(--g-gold);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.page-header-sub{font-size:.72rem;color:rgba(255,220,150,.6);margin-top:2px;font-family:'Rajdhani',sans-serif;}

/* ══════════════════════════════
   FORM CARDS
════════════════════════════════ */
.form-wrap{max-width:100%;margin:0 auto 16px;}
.form-card{
  background:var(--g-card);border:1px solid var(--border);
  border-radius:var(--r);padding:18px 16px;
  box-shadow:var(--shadow);
}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.fg{display:flex;flex-direction:column;gap:5px;position:relative;}
.fg.full{grid-column:span 2;}
label{
  font-size:.72rem;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.06em;font-family:'Rajdhani',sans-serif;
}
input,select,textarea{
  background:var(--bg2);border:1.5px solid var(--border);
  border-radius:var(--r3);padding:10px 12px;color:var(--text);
  font-size:.88rem;font-family:'Noto Sans Devanagari',sans-serif;
  transition:all .2s;width:100%;outline:none;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--saffron);box-shadow:0 0 0 3px rgba(255,107,0,.1);
  background:var(--card);
}
select option{background:var(--card);color:var(--text);}
.form-actions{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap;}
.btn{
  padding:12px 22px;border-radius:25px;border:none;cursor:pointer;
  font-family:'Rajdhani',sans-serif;font-weight:700;font-size:.88rem;
  letter-spacing:.04em;transition:all .25s;display:inline-flex;
  align-items:center;gap:7px;white-space:nowrap;
}
.btn-primary{
  background:var(--g-saffron);color:#fff;
  box-shadow:0 4px 16px rgba(255,107,0,.35);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(255,107,0,.5);}
.btn-primary:active{transform:translateY(0);}
.btn-secondary{
  background:transparent;color:var(--saffron);
  border:1.5px solid var(--saffron);
}
.btn-secondary:hover{background:rgba(255,107,0,.1);}
.btn-sm{padding:7px 14px;font-size:.78rem;border-radius:18px;}

/* ══════════════════════════════
   AUTOCOMPLETE
════════════════════════════════ */
.ac-wrap{position:relative;}
.ac-list{
  position:absolute;top:100%;left:0;right:0;z-index:9000;
  background:var(--card);border:1.5px solid var(--border);
  border-radius:var(--r2);box-shadow:var(--shadow2);
  max-height:220px;overflow-y:auto;display:none;
}
.ac-list.open{display:block;}
.ac-item{
  padding:10px 14px;cursor:pointer;font-size:.85rem;
  border-bottom:1px solid var(--border);transition:background .15s;
}
.ac-item:hover,.ac-item.sel{background:var(--saffronl);}
.ac-item:last-child{border:none;}
.ac-name{font-weight:600;color:var(--text);}
.ac-sub{font-size:.75rem;color:var(--muted);margin-top:2px;}

/* ══════════════════════════════
   RESULTS AREA
════════════════════════════════ */
#results{display:none;animation:fadeIn .4s ease;}
.result-header{
  background:var(--g-deep);border-radius:16px;
  padding:16px 18px;margin-bottom:14px;
  border:1px solid rgba(255,195,0,.15);
  position:relative;overflow:hidden;
}
.result-header::after{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--g-saffron);
}
.result-name{
  font-family:'Cinzel',serif;font-size:1.1rem;font-weight:700;
  color:var(--gold3);margin-bottom:4px;
}
.result-meta{font-size:.72rem;color:rgba(255,220,150,.6);line-height:1.7;}
.result-pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;}
.rpill{
  background:rgba(255,107,0,.12);border:1px solid rgba(255,107,0,.3);
  border-radius:12px;padding:3px 10px;font-size:.72rem;
  color:var(--saffron);font-family:'Rajdhani',sans-serif;font-weight:600;
}
.rpill.gold{background:rgba(212,160,23,.12);border-color:rgba(212,160,23,.3);color:var(--gold2);}
.rpill.green{background:rgba(46,125,50,.12);border-color:rgba(46,125,50,.3);color:var(--jade3);}
.rpill.red{background:rgba(198,40,40,.12);border-color:rgba(198,40,40,.3);color:#E57373;}

/* ══════════════════════════════
   CHART TABS
════════════════════════════════ */
#chart-tabs{
  display:flex;flex-wrap:nowrap;overflow-x:auto;gap:6px;
  padding:0 0 10px;margin-bottom:14px;
  scrollbar-width:none;-ms-overflow-style:none;
}
#chart-tabs::-webkit-scrollbar{display:none;}
.ctab{
  flex-shrink:0;padding:8px 16px;border-radius:20px;
  background:var(--bg2);border:1.5px solid var(--border);
  color:var(--muted);font-size:.75rem;font-weight:700;cursor:pointer;
  font-family:'Rajdhani',sans-serif;letter-spacing:.04em;
  transition:all .2s;white-space:nowrap;
}
.ctab.active{
  background:var(--g-saffron);color:#fff;border-color:transparent;
  box-shadow:0 4px 12px rgba(255,107,0,.3);
}
.ctab:hover:not(.active){background:var(--saffronl);color:var(--saffron);}
.tpanel{display:none;}
.tpanel.active{display:block;animation:fadeIn .25s ease;}

/* ══════════════════════════════
   CHARTS — STYLISH SVG
════════════════════════════════ */
.tcard{
  background:var(--g-card);border:1px solid var(--border);
  border-radius:var(--r);padding:14px;margin-bottom:12px;
  box-shadow:var(--shadow);
}
.stitle{
  font-family:'Cinzel',serif;font-size:.82rem;font-weight:700;
  color:var(--maroon);text-transform:uppercase;letter-spacing:.06em;
  padding-bottom:10px;margin-bottom:12px;
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:8px;
}
.stitle::before{
  content:'✦';color:var(--saffron);font-size:.7rem;
  filter:drop-shadow(0 0 4px rgba(255,107,0,.5));
}
.c2{display:grid;grid-template-columns:1fr;gap:12px;}
.ccard{
  background:linear-gradient(145deg,var(--bg2),var(--card));
  border:1px solid var(--border2);border-radius:var(--r);
  padding:12px;position:relative;overflow:hidden;
}
.ccard::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at center,rgba(255,107,0,.03),transparent 70%);
  pointer-events:none;
}
.ccard h4{
  font-family:'Cinzel',serif;font-size:.72rem;color:var(--gold);
  text-align:center;margin-bottom:10px;letter-spacing:.05em;text-transform:uppercase;
}
.csvg{
  width:100%;height:auto;max-width:340px;display:block;margin:0 auto;
  border-radius:8px;
  filter:drop-shadow(0 4px 12px rgba(139,69,19,.1));
}

/* ══════════════════════════════
   PLANET PILLS (ppills)
════════════════════════════════ */
.ppills{display:flex;flex-wrap:wrap;gap:6px;}
.ppill{
  display:inline-flex;align-items:center;gap:5px;
  background:var(--bg2);border:1px solid var(--border);
  border-radius:8px;padding:5px 10px;font-size:.75rem;
  transition:all .2s;cursor:default;
}
.ppill:hover{border-color:var(--saffron);box-shadow:0 0 8px rgba(255,107,0,.2);}
.ppill-sym{font-size:.95rem;}
.ppill-name{font-weight:600;color:var(--text2);}
.ppill-rashi{color:var(--muted);font-size:.7rem;}
.ppill.exalted{border-color:var(--jade2);background:rgba(46,125,50,.06);}
.ppill.debil{border-color:var(--maroon2);background:rgba(198,40,40,.06);}

/* ══════════════════════════════
   DASHA DISPLAY
════════════════════════════════ */
.dasha-levels{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;}
.dl{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--r2);padding:10px 14px;flex:1;min-width:120px;
}
.dl.cur{
  background:linear-gradient(135deg,rgba(255,107,0,.06),rgba(212,160,23,.06));
  border-color:var(--saffron);box-shadow:0 0 12px rgba(255,107,0,.12);
}
.dl-label{font-size:.65rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-family:'Rajdhani',sans-serif;font-weight:700;}
.dl-planet{font-size:1.05rem;font-weight:700;color:var(--saffron);font-family:'Cinzel',serif;margin:3px 0;}
.dl-dates{font-size:.65rem;color:var(--muted2);}

/* ══════════════════════════════
   TABLES — BEAUTIFUL
════════════════════════════════ */
table{width:100%;border-collapse:collapse;font-size:.78rem;}
thead th{
  background:var(--g-deep);color:rgba(255,220,150,.8);
  padding:8px 10px;text-align:left;font-family:'Rajdhani',sans-serif;
  font-weight:700;font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;
  position:sticky;top:0;z-index:2;
}
thead th:first-child{border-radius:8px 0 0 0;}
thead th:last-child{border-radius:0 8px 0 0;}
td{
  padding:8px 10px;border-bottom:1px solid var(--border);
  vertical-align:middle;color:var(--text2);
}
tr:last-child td{border:none;}
tr:nth-child(even) td{background:rgba(255,107,0,.02);}
tr:hover td{background:rgba(255,107,0,.05);}
.exalted td,.exalted{color:var(--jade2)!important;font-weight:600;}
.debil td,.debil{color:var(--maroon2)!important;}
.vakri{color:var(--saffron);font-style:italic;}

/* ══════════════════════════════
   YOGA GRID
════════════════════════════════ */
.yoga-grid{display:grid;grid-template-columns:1fr;gap:8px;}
.ycard{
  background:var(--g-card);border:1px solid var(--border);
  border-top:3px solid var(--saffron);border-radius:var(--r2);
  padding:12px 14px;transition:all .2s;
}
.ycard:hover{transform:translateY(-2px);box-shadow:var(--shadow2);}
.yname{
  font-family:'Cinzel',serif;font-size:.85rem;font-weight:700;
  margin-bottom:4px;
}
.ydesc{font-size:.8rem;color:var(--text2);line-height:1.6;}

/* ══════════════════════════════
   DOSHA GRID
════════════════════════════════ */
.dosha-grid{display:grid;grid-template-columns:1fr;gap:10px;}

/* ══════════════════════════════
   ASHTAKAVARGA
════════════════════════════════ */
.sav-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:14px;
}
.sav-cell{
  background:var(--bg2);border:1.5px solid var(--border);
  border-radius:var(--r2);padding:8px 4px;text-align:center;
  transition:all .2s;
}
.sav-cell:hover{transform:scale(1.05);box-shadow:var(--shadow);}
.sav-num{font-size:1.15rem;font-weight:800;font-family:'Cinzel',serif;}
.sav-lbl{font-size:.62rem;color:var(--muted);margin-top:2px;font-family:'Rajdhani',sans-serif;}

/* ══════════════════════════════
   PANCHANG
════════════════════════════════ */
.pgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;}
.pc{
  background:linear-gradient(135deg,var(--bg2),var(--card));
  border:1px solid var(--border);border-radius:var(--r2);
  padding:10px 12px;transition:all .2s;
}
.pc:hover{border-color:var(--border2);box-shadow:var(--shadow);}
.plbl{font-size:.65rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-family:'Rajdhani',sans-serif;font-weight:700;margin-bottom:3px;}
.pval{font-size:.88rem;font-weight:700;color:var(--text);font-family:'Cinzel',serif;}
.psub{font-size:.7rem;color:var(--muted2);margin-top:2px;}

/* ══════════════════════════════
   ANALYSIS BLOCKS
════════════════════════════════ */
.analysis-block{
  background:var(--g-card);border:1px solid var(--border);
  border-radius:var(--r);padding:14px 16px;margin-bottom:10px;
  box-shadow:var(--shadow);
}
.analysis-block h4{
  font-family:'Cinzel',serif;font-size:.82rem;font-weight:700;
  color:var(--maroon);margin-bottom:10px;display:flex;align-items:center;gap:7px;
}

/* ════════════════════════════
   WHATSAPP-STYLE AI CHAT
════════════════════════════ */
.chat-wrap{
  background:#0B1A10 !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='30' cy='30' r='1' fill='rgba(255,255,255,.02)'/%3E%3C/svg%3E") !important;
  display:flex !important;
  flex-direction:column !important;
}
.chat-header{background:linear-gradient(135deg,#075E54,#128C7E) !important;border-bottom:1px solid rgba(255,255,255,.1) !important;}
.chat-header-name{color:#fff !important;font-family:'Segoe UI','Noto Sans Devanagari',sans-serif !important;}
.chat-header-status{color:rgba(255,255,255,.7) !important;}
.chat-status-dot{background:#25D366 !important;}
.chat-messages{background:transparent;}
.chat-msg.ai .chat-bubble{
  background:#1F2C34 !important;
  border:none !important;
  color:#E9EDEF !important;
  border-radius:0 12px 12px 12px !important;
  font-family:'Segoe UI','Noto Sans Devanagari',sans-serif !important;
  font-size:.88rem !important;
  box-shadow:0 1px 2px rgba(0,0,0,.3) !important;
}
.chat-msg.ai .chat-bubble b{color:#25D366 !important;}
.chat-msg.user .chat-bubble{
  background:#005C4B !important;
  border-radius:12px 0 12px 12px !important;
  color:#E9EDEF !important;
  font-family:'Segoe UI','Noto Sans Devanagari',sans-serif !important;
  box-shadow:0 1px 2px rgba(0,0,0,.3) !important;
}
.chat-avatar{display:none !important;}  /* WhatsApp doesn't show avatar on own msgs */
.chat-msg.ai .chat-avatar{display:flex !important;width:28px !important;height:28px !important;background:#075E54 !important;border:none !important;border-radius:50% !important;font-size:.75rem !important;}
.chat-input-area{background:#1F2C34 !important;border-top:1px solid rgba(255,255,255,.1) !important;}
.chat-inp{
  background:#2A3942 !important;border:none !important;border-radius:22px !important;
  color:#E9EDEF !important;padding:10px 16px !important;
  font-family:'Segoe UI','Noto Sans Devanagari',sans-serif !important;
}
.chat-inp::placeholder{color:rgba(255,255,255,.3) !important;}
.chat-inp:focus{box-shadow:none !important;border:none !important;}
.chat-send{background:#25D366 !important;box-shadow:none !important;width:46px !important;height:46px !important;}
.chat-send:hover{background:#20B858 !important;box-shadow:none !important;}
.chat-suggestions{background:#0B1A10 !important;padding:8px 12px !important;}
.chat-sug{
  background:rgba(37,211,102,.1) !important;border:1px solid rgba(37,211,102,.25) !important;
  color:rgba(255,255,255,.7) !important;
}
.chat-sug:hover{background:rgba(37,211,102,.2) !important;color:#25D366 !important;border-color:rgba(37,211,102,.5) !important;}
.chat-typing span{background:rgba(255,255,255,.3) !important;}

/* ════════════════════════════
   APP HEADER (TOP BAR)
════════════════════════════ */
.app-header{
  position:relative;top:auto;left:auto;right:auto;z-index:1;
  background:var(--g-deep);
  height:52px;display:flex;align-items:center;
  padding:0 14px;justify-content:space-between;
  border-bottom:1px solid rgba(255,107,0,.15);
  box-shadow:0 2px 12px rgba(0,0,0,.3);
}
.app-header-logo{
  font-family:'Cinzel Decorative',serif;font-size:.85rem;font-weight:700;
  background:var(--g-gold);-webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;display:flex;align-items:center;gap:8px;
}
.app-header-logo span{font-size:1.2rem;-webkit-text-fill-color:initial;}
.app-header-right{display:flex;align-items:center;gap:8px;}
.header-icon-btn{
  width:36px;height:36px;border-radius:50%;
  background:rgba(255,107,0,.12);border:1px solid rgba(255,107,0,.2);
  color:rgba(255,220,150,.8);display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:1rem;transition:all .2s;
}
.header-icon-btn:hover{background:rgba(255,107,0,.25);color:var(--saffron);}

/* ════════════════════════════
   SETTINGS PANEL
════════════════════════════ */
.settings-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:1100;
  display:none;backdrop-filter:blur(4px);
}
.settings-overlay.open{display:flex;align-items:flex-end;}
@media(min-width:768px){.settings-overlay.open{align-items:center;justify-content:center;}}
.settings-panel{
  background:var(--card);border-radius:20px 20px 0 0;
  width:100%;max-height:85vh;overflow-y:auto;padding:20px;
  animation:slideUp .3s ease;
  border:1px solid var(--border);
}
@media(min-width:768px){
  .settings-panel{border-radius:20px;max-width:420px;max-height:none;animation:fadeIn .25s ease;}
}
.settings-title{
  font-family:'Cinzel',serif;font-size:1rem;font-weight:700;
  color:var(--maroon);margin-bottom:20px;text-align:center;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.set-section{margin-bottom:18px;}
.set-label{
  font-size:.72rem;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.07em;
  font-family:'Rajdhani',sans-serif;margin-bottom:8px;
}
.set-options{display:flex;gap:8px;flex-wrap:wrap;}
.set-opt{
  flex:1;min-width:80px;padding:10px 14px;border-radius:10px;text-align:center;
  background:var(--bg2);border:1.5px solid var(--border);cursor:pointer;
  font-family:'Rajdhani',sans-serif;font-weight:600;font-size:.85rem;
  transition:all .2s;color:var(--text2);
}
.set-opt.active,.set-opt:hover{
  background:rgba(255,107,0,.1);border-color:var(--saffron);color:var(--saffron);
}

/* ════════════════════════════
   CONTEXT AI CHAT STRIP
════════════════════════════ */
.ai-context-strip{
  margin:14px 0 0;padding:10px 14px;
  background:linear-gradient(135deg,rgba(7,94,84,.15),rgba(18,140,126,.1));
  border:1px solid rgba(37,211,102,.2);border-radius:10px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.ai-strip-text{font-size:.8rem;color:var(--text2);font-family:'Rajdhani',sans-serif;}
.ai-strip-text b{color:#25D366;}
.ai-strip-btn{
  background:#25D366;color:#fff;border:none;border-radius:18px;
  padding:6px 14px;font-size:.78rem;font-weight:700;cursor:pointer;
  font-family:'Rajdhani',sans-serif;white-space:nowrap;
  transition:all .2s;flex-shrink:0;
}
.ai-strip-btn:hover{background:#20B858;transform:scale(1.03);}

/* ════════════════════════════
   PAGES — with header offset
════════════════════════════ */
/* nav + header offsets handled in main .page and media query above */

/* ════════════════════════════
   MOBILE TOB FIX
════════════════════════════ */
.tob-row{
  display:flex !important;align-items:center;gap:4px;
  flex-wrap:nowrap !important;
}
.tob-row select{
  flex:1;min-width:0;padding:8px 4px !important;font-size:.8rem !important;
}
.tob-row span{flex-shrink:0;color:var(--muted);font-weight:700;}
@media(max-width:380px){
  .form-grid{grid-template-columns:1fr !important;}
  .fg.full{grid-column:auto !important;}
}

/* ════════════════════════════
   HINDI FONT ENHANCEMENT
════════════════════════════ */
:lang(hi) *:not(i):not([class*="fa"]):not([class*="icon"]):not(svg):not(symbol):not(use),
[lang="hi"] *:not(i):not([class*="fa"]):not([class*="icon"]):not(svg):not(symbol):not(use),
.hindi-text{
  font-family:'Noto Sans Devanagari','Mangal','Sanskrit Text',sans-serif !important;
  line-height:1.9 !important;
}
/* Restore icon fonts that were accidentally overridden */
[lang="hi"] i[class*="fa"],
[lang="hi"] [class*=" fa-"],
[lang="hi"] [class^="fa-"],
[lang="hi"] .fas, [lang="hi"] .far,
[lang="hi"] .fab, [lang="hi"] .fal,
[lang="hi"] .fa, [lang="hi"] .kg-logo-icon {
  font-family:"Font Awesome 5 Free","Font Awesome 5 Brands","FontAwesome" !important;
  line-height:1 !important;
}
/* Larger Devanagari in key places */
.chat-msg .chat-bubble,
.analysis-block p,
.analysis-block li,
.dosha-grid > div,
.yoga-grid .ydesc{
  font-size:.88rem;line-height:1.85;
}

/* ════════════════════════════
   COLORFUL CARDS (not just yellow/red)
════════════════════════════ */
.color-card-blue{border-left-color:#1565C0 !important;background:linear-gradient(135deg,rgba(21,101,192,.05),transparent) !important;}
.color-card-green{border-left-color:#2E7D32 !important;background:linear-gradient(135deg,rgba(46,125,50,.05),transparent) !important;}
.color-card-purple{border-left-color:#6A1B9A !important;background:linear-gradient(135deg,rgba(106,27,154,.05),transparent) !important;}
.color-card-teal{border-left-color:#00695C !important;background:linear-gradient(135deg,rgba(0,105,92,.05),transparent) !important;}
.color-card-orange{border-left-color:#E65100 !important;background:linear-gradient(135deg,rgba(230,81,0,.05),transparent) !important;}

/* Home cards colors */
.home-card:nth-child(1){border-top:3px solid var(--saffron);}
.home-card:nth-child(2){border-top:3px solid #1565C0;}
.home-card:nth-child(3){border-top:3px solid #2E7D32;}
.home-card:nth-child(4){border-top:3px solid #6A1B9A;}
.home-card:nth-child(5){border-top:3px solid #00695C;}
.home-card:nth-child(6){border-top:3px solid #E65100;}

/* Chart tabs colorful */
.ctab:nth-child(1).active{background:var(--g-saffron);}
.ctab:nth-child(2).active{background:linear-gradient(135deg,#1565C0,#1976D2);}
.ctab:nth-child(3).active{background:linear-gradient(135deg,#6A1B9A,#7B1FA2);}
.ctab:nth-child(4).active{background:linear-gradient(135deg,#2E7D32,#388E3C);}
.ctab:nth-child(5).active{background:linear-gradient(135deg,#00695C,#00796B);}

/* Analysis blocks colorful */
.analysis-block:nth-child(3n){border-left:3px solid #1565C0;}
.analysis-block:nth-child(3n+1){border-left:3px solid var(--saffron);}
.analysis-block:nth-child(3n+2){border-left:3px solid #2E7D32;}

/* ── FOOTER ── */
footer{
  text-align:center;padding:20px 16px;
  font-size:.75rem;color:var(--muted);
  border-top:1px solid var(--border);
  background:var(--bg2);
  line-height:1.8;
  font-family:'Rajdhani',sans-serif;
  letter-spacing:.03em;
  margin-top:20px;
}
footer span{color:var(--saffron);}
@media(max-width:767px){
  footer{padding-bottom:calc(var(--nav-h) + 20px);}
}

/* ══════════════════════════════════════════════════════════
   MISSING COMPONENTS — COMPLETE FIX
════════════════════════════════════════════════════════════ */

/* ── Loading Overlay ── */
.ldwrap{
  display:none;position:fixed;inset:0;z-index:9999;
  background:rgba(13,5,0,.85);backdrop-filter:blur(6px);
  align-items:center;justify-content:center;flex-direction:column;gap:16px;
}
.ldwrap.active{display:flex !important;}
.spin{
  width:48px;height:48px;border:3px solid rgba(255,107,0,.2);
  border-top-color:var(--saffron);border-radius:50%;
  animation:spin .8s linear infinite;
}
.shimmer{
  background:linear-gradient(90deg,var(--card2) 25%,var(--card3) 50%,var(--card2) 75%);
  background-size:200% 100%;animation:shimmer 1.5s infinite;
  border-radius:var(--r2);
}
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes shimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}

/* ── Error Box ── */
.err{
  display:none;background:rgba(198,40,40,.1);border:1.5px solid rgba(198,40,40,.4);
  color:#EF5350;border-radius:var(--r2);padding:10px 14px;margin:8px 0;
  font-size:.85rem;font-weight:600;animation:fadeIn .2s ease;
}

/* ── Results Wrapper ── */
.rwrap{
  background:var(--bg,#FFFFFF);border-radius:20px;
  border:1px solid rgba(255,107,0,.2);
  overflow:hidden;margin-bottom:16px;
}
.res-head{
  display:flex;align-items:flex-start;justify-content:space-between;
  flex-wrap:wrap;gap:12px;padding:18px 20px 14px;
  background:linear-gradient(135deg,rgba(255,107,0,.08),rgba(184,134,11,.06));
  border-bottom:1px solid rgba(255,107,0,.15);
}
.res-name{
  font-family:'Cinzel',serif;font-size:1.1rem;font-weight:700;
  color:var(--gold3);letter-spacing:.04em;margin-bottom:4px;
}
.res-meta{
  font-size:.78rem;color:var(--muted);line-height:1.6;
}
.res-badges{
  display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;
}
.rbadge{
  display:inline-flex;align-items:center;gap:4px;
  background:rgba(255,107,0,.1);border:1px solid rgba(255,107,0,.25);
  color:var(--saffron);border-radius:20px;padding:3px 10px;
  font-size:.72rem;font-weight:600;white-space:nowrap;
  font-family:'Rajdhani',sans-serif;
}

/* ── Chart Tabs ── */
.chart-tabs{
  display:flex;gap:0;overflow-x:auto;scrollbar-width:none;
  background:rgba(0,0,0,.2);border-bottom:1px solid rgba(255,107,0,.15);
  position:sticky;top:52px;z-index:10;
}
.chart-tabs::-webkit-scrollbar{display:none;}
.ctab{
  flex:0 0 auto;padding:10px 14px;cursor:pointer;
  font-size:.72rem;font-weight:600;color:rgba(255,220,150,.5);
  font-family:'Rajdhani',sans-serif;text-transform:uppercase;letter-spacing:.05em;
  border:none;background:transparent;border-bottom:2px solid transparent;
  transition:all .2s;white-space:nowrap;
}
.ctab:hover{color:rgba(255,220,150,.8);}
.ctab.active{
  color:var(--saffron);border-bottom-color:var(--saffron);
  background:rgba(255,107,0,.06);
}

/* ── Tab Panels ── */
.tpanel{display:none;padding:16px;}
.tpanel.active{display:block;}

/* ── Planet Pills ── */
#ppills{
  display:flex;flex-wrap:wrap;gap:8px;
  padding:16px;
}
.ppill{
  background:var(--g-card);border:1px solid var(--border);
  border-top:3px solid;border-radius:var(--r2);
  padding:10px 12px;min-width:100px;flex:1 1 100px;
  text-align:center;transition:transform .2s,box-shadow .2s;
}
.ppill:hover{transform:translateY(-2px);box-shadow:var(--shadow2);}
.pp-sym{font-size:1.4rem;line-height:1;}
.pp-nm{font-weight:700;font-size:.78rem;margin-top:2px;color:var(--text);}
.pp-rashi{font-size:.75rem;color:var(--muted);}
.pp-deg{font-size:.72rem;color:var(--text2);font-family:monospace;}
.pp-h{font-size:.7rem;font-weight:600;margin-top:2px;}

/* ── Style Switcher ── */
.style-btns{
  display:flex;gap:6px;padding:12px 16px 0;
}
.style-btn{
  padding:5px 14px;border-radius:20px;border:1.5px solid var(--border2);
  background:transparent;color:var(--muted);cursor:pointer;
  font-size:.75rem;font-weight:600;font-family:'Rajdhani',sans-serif;
  transition:all .2s;
}
.style-btn.active{
  background:var(--saffron);border-color:var(--saffron);
  color:#fff;box-shadow:var(--glow);
}

/* ── Ctrl Bar (chart controls) ── */
.ctrl-bar{
  display:flex;align-items:center;gap:10px;
  padding:10px 16px;border-bottom:1px solid var(--border);
  flex-wrap:wrap;
}

/* ── Divisional Chart Buttons ── */
.div-btns{
  display:flex;flex-wrap:wrap;gap:6px;
  padding:12px 16px;border-bottom:1px solid rgba(255,107,0,.1);
}
.div-btn{
  padding:5px 12px;border-radius:20px;border:1px solid var(--border2);
  background:transparent;color:var(--muted);cursor:pointer;
  font-size:.72rem;font-weight:600;font-family:'Rajdhani',sans-serif;
  transition:all .2s;
}
.div-btn.active,.div-btn:hover{
  background:rgba(255,107,0,.1);border-color:var(--saffron);color:var(--saffron);
}
#div-content{padding:16px;}

/* ── Rashifal Period Buttons ── */
.rf-period-btn{
  padding:8px 16px;border-radius:20px;cursor:pointer;
  border:1.5px solid var(--border2);background:transparent;
  color:var(--muted);font-size:.8rem;font-weight:600;
  font-family:'Rajdhani',sans-serif;transition:all .2s;
}
.rf-period-btn.active,.rf-period-btn.btn-primary{
  background:var(--g-saffron);border-color:transparent;
  color:#fff;box-shadow:var(--glow);
}
.rf-period-btn:hover:not(.active){
  border-color:var(--saffron);color:var(--saffron);
}

/* ── Coord Display ── */
.coord-disp{
  font-size:.78rem;color:var(--jade2);font-weight:600;
  padding:5px 10px;background:rgba(46,125,50,.08);
  border:1px solid rgba(46,125,50,.2);border-radius:var(--r3);
  margin-top:4px;min-height:20px;transition:all .2s;
}

/* ── Yoga Grid ── */
.ygrid{
  display:grid;gap:12px;padding:4px 0;
}

/* ── Dasha Current Levels ── */
.dasha-levels{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:10px;margin-bottom:16px;
}
.dl{
  background:var(--g-card);border:1px solid var(--border);
  border-radius:var(--r2);padding:12px;text-align:center;
}
.dl.cur{
  background:linear-gradient(135deg,rgba(255,107,0,.08),rgba(184,134,11,.06));
  border-color:rgba(255,107,0,.3);
}
.dl-label{font-size:.68rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px;}
.dl-planet{font-size:1.1rem;font-weight:700;color:var(--saffron);font-family:'Cinzel',serif;}
.dl-dates{font-size:.7rem;color:var(--muted2);margin-top:3px;}

/* ══════════════════════════════════════════════════════════
   WHATSAPP-STYLE AI CHAT — COMPLETE REDESIGN
════════════════════════════════════════════════════════════ */
/* chat-wrap: see final override below */
.chat-header{
  display:flex;align-items:center;gap:12px;
  padding:12px 16px;
  background:linear-gradient(135deg,#075E54,#128C7E);
  flex-shrink:0;
}
.chat-header-icon{
  width:42px;height:42px;border-radius:50%;
  background:rgba(255,255,255,.15);display:flex;
  align-items:center;justify-content:center;
  font-size:1.3rem;flex-shrink:0;
}
.chat-header-info{flex:1;min-width:0;}
.chat-header-name{
  font-weight:700;color:#fff;font-size:.92rem;
  font-family:'Rajdhani',sans-serif;letter-spacing:.02em;
}
.chat-header-status{
  display:flex;align-items:center;gap:5px;
  font-size:.7rem;color:rgba(255,255,255,.75);margin-top:1px;
}
.chat-status-dot{
  width:7px;height:7px;border-radius:50%;
  background:#25D366;box-shadow:0 0 6px #25D366;
  animation:pulse 2s infinite;
}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.5;}}

.chat-messages{
  flex:1;overflow-y:auto;padding:14px 14px 6px;
  display:flex;flex-direction:column;gap:10px;
  background:#0B1A10;scrollbar-width:thin;scrollbar-color:#25D36640 transparent;
  min-height:0;
}
.chat-messages::-webkit-scrollbar{width:4px;}
.chat-messages::-webkit-scrollbar-thumb{background:#25D36640;border-radius:2px;}

/* Chat messages */
.chat-msg{
  display:flex;align-items:flex-end;gap:8px;max-width:88%;
  animation:msgIn .25s ease;
}
@keyframes msgIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
.chat-msg.ai{align-self:flex-start;}
.chat-msg.user{align-self:flex-end;flex-direction:row-reverse;}
.chat-avatar{
  width:30px;height:30px;border-radius:50%;
  background:linear-gradient(135deg,#075E54,#128C7E);
  display:flex;align-items:center;justify-content:center;
  font-size:.9rem;flex-shrink:0;
}
.chat-msg.user .chat-avatar{background:linear-gradient(135deg,#2B5278,#1A3A5C);}
.chat-bubble{
  padding:9px 13px;border-radius:12px;
  font-size:.84rem;line-height:1.65;max-width:100%;
  word-break:break-word;
}
.chat-msg.ai .chat-bubble{
  background:#1F2C34;color:#E8F5E9;
  border-radius:2px 12px 12px 12px;
}
.chat-msg.user .chat-bubble{
  background:#005C4B;color:#fff;
  border-radius:12px 12px 2px 12px;
}
.chat-bubble b,.chat-bubble strong{color:#81C784;}
.chat-bubble h3{color:#A5D6A7;font-size:.88rem;margin:8px 0 4px;}
.chat-bubble ul,.chat-bubble ol{padding-left:16px;margin:4px 0;}
.chat-bubble li{margin:3px 0;}
.chat-bubble p{margin:4px 0;}
.chat-bubble hr{border-color:rgba(255,255,255,.15);margin:8px 0;}
.chat-bubble code{
  background:rgba(0,0,0,.3);padding:1px 5px;
  border-radius:3px;font-size:.8rem;
}

/* Typing indicator */
.chat-typing{display:flex;gap:4px;align-items:center;padding:4px 0;}
.chat-typing span{
  width:7px;height:7px;border-radius:50%;background:#25D366;
  animation:typing 1.2s infinite;
}
.chat-typing span:nth-child(2){animation-delay:.2s;}
.chat-typing span:nth-child(3){animation-delay:.4s;}
@keyframes typing{0%,60%,100%{transform:translateY(0);opacity:.5;}30%{transform:translateY(-6px);opacity:1;}}

/* Suggestions */
.chat-suggestions{
  display:flex;gap:6px;padding:8px 12px;
  overflow-x:auto;scrollbar-width:none;flex-shrink:0;
  background:rgba(0,0,0,.2);border-top:1px solid rgba(37,211,102,.1);
}
.chat-suggestions::-webkit-scrollbar{display:none;}
.chat-sug{
  flex:0 0 auto;padding:5px 12px;border-radius:16px;
  border:1px solid rgba(37,211,102,.3);background:rgba(37,211,102,.08);
  color:#81C784;cursor:pointer;font-size:.73rem;white-space:nowrap;
  transition:all .2s;
}
.chat-sug:hover{
  background:rgba(37,211,102,.15);border-color:#25D366;color:#A5D6A7;
}

/* Input area */
.chat-input-area{
  display:flex;flex-direction:column;
  padding:8px 12px 12px;
  background:#1F2C34;border-top:1px solid rgba(37,211,102,.1);
  flex-shrink:0;position:sticky;bottom:0;
}
.chat-input-row{
  display:flex;align-items:flex-end;gap:8px;
}
.chat-inp{
  flex:1;background:rgba(255,255,255,.1);
  border:1.5px solid rgba(37,211,102,.25);border-radius:24px;
  color:#E8F5E9;padding:10px 18px;font-size:.88rem;
  font-family:'Noto Sans Devanagari','Rajdhani',sans-serif;
  resize:none;min-height:42px;max-height:120px;line-height:1.5;
  outline:none;transition:all .2s;
  scrollbar-width:none;
}
.chat-inp:focus{border-color:#25D366;background:rgba(255,255,255,.13);}
.chat-inp::placeholder{color:rgba(255,255,255,.35);font-size:.82rem;}
.chat-inp::-webkit-scrollbar{display:none;}
.chat-send-btn{
  width:40px;height:40px;border-radius:50%;border:none;cursor:pointer;
  background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:1rem;flex-shrink:0;transition:all .2s;
}
.chat-send-btn:hover{background:#20BC5A;transform:scale(1.05);}
.chat-send-btn:active{transform:scale(.95);}

/* Old chat overlay (if still used) */
.chat-ov{
  display:none;position:fixed;inset:0;z-index:2000;
  background:rgba(0,0,0,.6);backdrop-filter:blur(4px);
  align-items:center;justify-content:center;padding:16px;
}
.chat-ov.open{display:flex;}
.chat-box{
  width:100%;max-width:480px;height:75vh;
  background:#0B1A10;border-radius:20px;overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:0 20px 80px rgba(0,0,0,.7);
}

/* cmsg (kundali result chat) */
.cmsg{
  display:flex;align-items:flex-end;gap:8px;
  max-width:88%;margin-bottom:8px;animation:msgIn .25s ease;
}
.cmsg.ai{align-self:flex-start;}
.cmsg.usr{align-self:flex-end;flex-direction:row-reverse;}
.cmsg.ai > div{
  background:#1F2C34;color:#E8F5E9;
  padding:9px 13px;border-radius:2px 12px 12px 12px;
  font-size:.84rem;line-height:1.65;max-width:480px;
}
.cmsg.usr > div{
  background:#005C4B;color:#fff;
  padding:9px 13px;border-radius:12px 12px 2px 12px;
  font-size:.84rem;line-height:1.65;
}
#chat-msgs{
  flex:1;overflow-y:auto;padding:12px;
  display:flex;flex-direction:column;
  background:#0B1A10;
}
#chat-inp{
  background:rgba(255,255,255,.08);border:1px solid rgba(37,211,102,.2);
  border-radius:22px;color:#E8F5E9;padding:9px 16px;font-size:.84rem;
  outline:none;transition:border-color .2s;width:100%;
}
#chat-inp:focus{border-color:#25D366;}

/* ── typing dots ── */
.typing{display:flex;gap:4px;align-items:center;padding:2px 0;}
.dot{
  width:7px;height:7px;border-radius:50%;background:#25D366;
  animation:typing 1.2s infinite;
}
.dot:nth-child(2){animation-delay:.2s;}
.dot:nth-child(3){animation-delay:.4s;}

/* ══════════════════════════════════════════════════════════
   LOGO (DESKTOP)
════════════════════════════════════════════════════════════ */
.logo-text{
  font-family:'Cinzel Decorative',serif;font-size:.95rem;
  color:var(--gold3);letter-spacing:.05em;font-weight:700;
}
.logo-sub{
  font-size:.6rem;color:var(--muted);letter-spacing:.08em;
  font-family:'Rajdhani',sans-serif;text-transform:uppercase;margin-top:1px;
}

/* ══════════════════════════════════════════════════════════
   SAV GRID
════════════════════════════════════════════════════════════ */
#sav-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:16px;
}
.sav-cell{
  background:var(--card);border:1.5px solid;border-radius:var(--r2);
  padding:10px;text-align:center;transition:transform .2s;
}
.sav-cell:hover{transform:translateY(-2px);}
.sav-num{font-size:1.4rem;font-weight:700;font-family:'Cinzel',serif;}
.sav-lbl{font-size:.7rem;color:var(--muted);margin-top:2px;}

/* ══════════════════════════════════════════════════════════
   ANALYSIS BLOCKS
════════════════════════════════════════════════════════════ */
.analysis-block{
  background:var(--g-card);border:1px solid var(--border);
  border-radius:var(--r2);padding:14px;margin-bottom:12px;
}
.analysis-block h4{
  font-family:'Cinzel',serif;font-size:.85rem;
  color:var(--saffron);margin-bottom:10px;letter-spacing:.03em;
}

/* ══════════════════════════════════════════════════════════
   DESKTOP OVERRIDES (≥768px)
════════════════════════════════════════════════════════════ */
@media(min-width:768px){
  /* chat-wrap desktop: see final override */
  #sav-grid{grid-template-columns:repeat(6,1fr);}
  .dasha-levels{grid-template-columns:repeat(4,1fr);}
}

/* ── Dasha current row highlight ── */
.dasha-cur{
  background:linear-gradient(90deg,rgba(255,107,0,.08),rgba(184,134,11,.06)) !important;
  font-weight:600;
}

/* ══════════════════════════════════════════════════════════
   HOME PAGE — PROFESSIONAL REDESIGN
════════════════════════════════════════════════════════════ */
.home-hero{
  text-align:center;padding:32px 20px 28px;
  background:var(--g-deep);border-radius:20px;
  margin-bottom:20px;position:relative;overflow:hidden;
  border:1px solid rgba(255,107,0,.12);
}
.home-hero::before{
  content:'ॐ';position:absolute;font-size:220px;
  font-family:'Noto Sans Devanagari',sans-serif;
  color:rgba(255,107,0,.04);top:-20px;left:50%;
  transform:translateX(-50%);pointer-events:none;
  line-height:1;z-index:0;
}
.hero-badge{
  display:inline-block;font-size:.7rem;color:var(--gold2);
  background:rgba(212,160,23,.1);border:1px solid rgba(212,160,23,.2);
  border-radius:20px;padding:4px 14px;margin-bottom:16px;
  letter-spacing:.06em;font-family:'Rajdhani',sans-serif;
  position:relative;z-index:1;
}
.hero-om{font-size:3rem;margin-bottom:8px;position:relative;z-index:1;
  filter:drop-shadow(0 0 20px rgba(255,107,0,.4));animation:omPulse 3s ease-in-out infinite;}
@keyframes omPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.05);}}
.hero-title{
  font-family:'Cinzel Decorative',serif;font-size:2rem;font-weight:700;
  background:linear-gradient(135deg,#FFD700,#FF8C00,#FF6B00);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  margin-bottom:8px;letter-spacing:.04em;position:relative;z-index:1;
}
.hero-sub{
  font-size:.92rem;color:rgba(255,220,150,.8);margin-bottom:20px;
  font-family:'Rajdhani',sans-serif;letter-spacing:.03em;position:relative;z-index:1;
}
.hero-cta-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;position:relative;z-index:1;}
.hero-cta-primary{
  padding:13px 28px;border-radius:30px;border:none;cursor:pointer;
  background:var(--g-saffron);color:#fff;font-size:.92rem;font-weight:700;
  font-family:'Rajdhani',sans-serif;letter-spacing:.04em;
  box-shadow:0 4px 20px rgba(255,107,0,.4);transition:all .25s;
}
.hero-cta-primary:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(255,107,0,.5);}
.hero-cta-sec{
  padding:13px 24px;border-radius:30px;cursor:pointer;
  background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.2);
  color:rgba(255,255,255,.9);font-size:.92rem;font-weight:600;
  font-family:'Rajdhani',sans-serif;transition:all .25s;
}
.hero-cta-sec:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.35);}

/* Stats bar */
.home-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:20px;
}
.stat-item{
  background:var(--g-card);border:1px solid var(--border);border-radius:var(--r2);
  padding:14px 10px;text-align:center;
  border-top:2px solid rgba(255,107,0,.3);
}
.stat-num{
  font-family:'Cinzel',serif;font-size:1.2rem;font-weight:700;
  color:var(--saffron);
}
.stat-lbl{font-size:.7rem;color:var(--muted);margin-top:3px;font-family:'Rajdhani',sans-serif;text-transform:uppercase;letter-spacing:.05em;}

/* Home sections */
.home-section{margin-bottom:20px;}
.home-section-hdr{
  display:flex;align-items:center;gap:12px;margin-bottom:12px;
}
.home-section-icon{font-size:1.4rem;}
.home-section-title{font-family:'Cinzel',serif;font-size:.95rem;font-weight:700;color:var(--text);}
.home-section-sub{font-size:.75rem;color:var(--muted);margin-top:1px;}
.home-section-btn{
  margin-left:auto;padding:5px 14px;border-radius:20px;border:1px solid var(--border2);
  background:transparent;color:var(--saffron);font-size:.75rem;cursor:pointer;
  font-family:'Rajdhani',sans-serif;font-weight:600;transition:all .2s;
}
.home-section-btn:hover{background:rgba(255,107,0,.1);}

/* Feature cards */
.home-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:10px;
}
.home-card{
  background:var(--g-card);border:1px solid var(--border);border-radius:16px;
  padding:16px;cursor:pointer;transition:all .25s;
  position:relative;overflow:hidden;
}
.home-card::before{
  content:'';position:absolute;inset:0;border-radius:16px;
  background:var(--g-saffron);opacity:0;transition:opacity .25s;
}
.home-card:hover{transform:translateY(-3px);box-shadow:var(--shadow2);border-color:rgba(255,107,0,.3);}
.home-card:hover::before{opacity:.04;}
.home-card.featured{
  grid-column:span 2;
  background:linear-gradient(135deg,rgba(255,107,0,.08),rgba(184,134,11,.06));
  border-color:rgba(255,107,0,.25);
}
.home-card-icon{font-size:1.6rem;display:block;margin-bottom:8px;}
.home-card-title{font-family:'Cinzel',serif;font-size:.92rem;font-weight:700;color:var(--text);margin-bottom:4px;}
.home-card-desc{font-size:.78rem;color:var(--muted);line-height:1.5;}
.home-card-arrow{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  font-size:1.2rem;color:var(--saffron);opacity:.4;transition:all .2s;
}
.home-card:hover .home-card-arrow{opacity:1;transform:translateY(-50%) translateX(3px);}

/* Why grid */
.home-why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
.why-card{
  background:var(--g-card);border:1px solid var(--border);border-radius:14px;
  padding:16px;
}
.why-icon{font-size:1.5rem;margin-bottom:8px;}
.why-title{font-family:'Cinzel',serif;font-size:.82rem;font-weight:700;color:var(--text);margin-bottom:4px;}
.why-desc{font-size:.77rem;color:var(--muted);line-height:1.55;}

/* AI Banner */
.home-ai-banner{
  display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(135deg,#0B1A10,#1F2C34);
  border:1.5px solid rgba(37,211,102,.3);border-radius:16px;
  padding:18px 20px;cursor:pointer;transition:all .25s;margin-bottom:4px;
}
.home-ai-banner:hover{border-color:#25D366;transform:translateY(-2px);box-shadow:0 8px 30px rgba(0,0,0,.3);}
.ai-banner-title{font-family:'Cinzel',serif;font-size:.92rem;font-weight:700;color:#A5D6A7;margin-bottom:4px;}
.ai-banner-sub{font-size:.78rem;color:rgba(165,214,167,.7);line-height:1.5;}
.ai-banner-arrow{font-size:2rem;color:#25D366;font-weight:300;}

/* ══════════════════════════════════════════════════════════
   CHART — UNIQUE MODERN STYLE
   Metallic sacred geometry aesthetic
════════════════════════════════════════════════════════════ */
.csvg{
  width:100%;height:auto;
  filter:drop-shadow(0 4px 20px rgba(255,107,0,.15));
  border-radius:8px;
  background:transparent;
}

/* ══ EXTREME RULE ENGINE CSS — Light Mode ══ */
.ere-panel{
  background:var(--card);
  border:1.5px solid var(--border);
  border-top:3px solid var(--saffron);
  border-radius:var(--r);
  padding:18px 16px;
  margin-top:14px;
  box-shadow:var(--shadow2);
  position:relative;overflow:hidden;
}
.ere-panel::before{content:'🔯';position:absolute;top:14px;right:14px;font-size:1.6rem;opacity:.08;}
.ere-panel-title{
  font-family:'Cinzel',serif;font-size:.95rem;font-weight:700;
  background:linear-gradient(135deg,#FF6B00,#B8860B);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  margin-bottom:14px;letter-spacing:.04em;
}
.ere-section{margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--border);}
.ere-section:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0;}
.ere-section-title{
  font-family:'Cinzel',serif;font-size:.75rem;font-weight:700;
  color:var(--gold);text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px;
}
.ere-text{font-size:.85rem;line-height:1.9;color:var(--text2);}
.ere-text b{color:var(--saffron);font-weight:700;}
.ere-text em{color:var(--maroon2);font-style:normal;}
.ere-pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;}
.ere-pill{padding:3px 10px;border-radius:20px;font-size:.72rem;font-weight:700;letter-spacing:.04em;}
.ere-pill.good{background:rgba(46,125,50,.1);border:1px solid rgba(46,125,50,.3);color:#1B5E20;}
.ere-pill.info{background:rgba(21,101,192,.1);border:1px solid rgba(21,101,192,.3);color:#0D47A1;}
.ere-pill.warn{background:rgba(245,124,0,.1);border:1px solid rgba(245,124,0,.3);color:#E65100;}
.ere-pill.bad{background:rgba(198,40,40,.1);border:1px solid rgba(198,40,40,.3);color:#B71C1C;}
.ere-pill.muted{background:rgba(100,116,139,.1);border:1px solid rgba(100,116,139,.3);color:#475569;}
.ere-pill.gold{background:rgba(184,134,11,.1);border:1px solid rgba(184,134,11,.3);color:#7B5800;}
.ere-score-bar{margin-top:8px;}
.ere-score-row{display:flex;align-items:center;gap:10px;margin-bottom:6px;}
.ere-score-label{font-size:.75rem;color:var(--muted);font-weight:600;min-width:80px;}
.ere-score-track{flex:1;height:6px;background:var(--bg3);border-radius:3px;overflow:hidden;}
.ere-score-fill{height:100%;border-radius:3px;}
.ere-score-num{font-size:.72rem;color:var(--muted);min-width:30px;text-align:right;}
.ere-house-block{background:var(--saffronl);border:1px solid var(--border);border-radius:10px;padding:14px;margin-bottom:10px;}
.ere-house-num{font-size:1rem;font-weight:700;color:var(--saffron);margin-bottom:2px;}
.ere-house-name{font-size:.72rem;color:var(--gold);font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px;}
.ere-house-text{font-size:.84rem;line-height:1.85;color:var(--text2);}
.ere-remedies{background:rgba(46,125,50,.05);border:1px solid rgba(46,125,50,.2);border-radius:10px;padding:14px;margin-top:10px;}
.ere-remedies-title{font-size:.78rem;font-weight:700;color:#2E7D32;margin-bottom:8px;}
.ere-remedy-item{font-size:.83rem;color:var(--text2);line-height:1.8;padding:5px 0;border-bottom:1px solid rgba(46,125,50,.1);}
.ere-remedy-item:last-child{border:none;}
.ere-dasha-card{background:var(--saffronl);border:1px solid var(--border);border-radius:10px;padding:12px 14px;margin-bottom:8px;}
.ere-dasha-label{font-size:.7rem;color:var(--gold);text-transform:uppercase;letter-spacing:.07em;font-weight:700;margin-bottom:3px;}
.ere-dasha-planet{font-size:1rem;font-weight:700;color:var(--saffron);}
.ere-dasha-dates{font-size:.75rem;color:var(--muted);margin-top:2px;}
.ere-dasha-pred{font-size:.84rem;color:var(--text2);line-height:1.85;margin-top:8px;}
.ere-timeline-item{
  display:flex;gap:10px;margin-bottom:10px;padding:10px 12px;
  background:var(--card);border:1px solid var(--border);
  border-left:3px solid rgba(255,107,0,.4);border-radius:0 8px 8px 0;
}
.ere-timeline-year{font-size:.8rem;font-weight:700;color:var(--saffron);min-width:90px;flex-shrink:0;}
.ere-timeline-desc{font-size:.83rem;color:var(--text2);line-height:1.7;}
/* ── Global font size improvements ── */
body{font-size:15px;}
.kg-pg {padding-top:16px;}
table{font-size:.86rem;}
th{font-size:.78rem;}
.stitle{font-size:1rem;}
h4{font-size:.92rem;}
.form-card label{font-size:.87rem;}
input,select,textarea{font-size:.9rem !important;}
.btn{font-size:.87rem;}

/* Desktop improvements */
@media(min-width:768px){
  .home-grid{grid-template-columns:repeat(3,1fr);}
  .home-card.featured{grid-column:span 1;}
  .home-why-grid{grid-template-columns:repeat(4,1fr);}
  .home-stats{grid-template-columns:repeat(4,1fr);}
  .hero-title{font-size:2.6rem;}
  body{font-size:16px;}
}

/* ── AI Mode Bar ── */
.ai-mode-bar{
  display:flex;gap:0;margin-bottom:0;
  background:rgba(0,0,0,.25);border-radius:12px 12px 0 0;
  border:1px solid rgba(37,211,102,.15);border-bottom:none;
  overflow:hidden;
}
.ai-mode-btn{
  flex:1;padding:10px 8px;border:none;cursor:pointer;
  background:transparent;color:rgba(165,214,167,.5);
  font-size:.8rem;font-weight:600;transition:all .2s;
  font-family:'Rajdhani',sans-serif;letter-spacing:.04em;
  border-right:1px solid rgba(37,211,102,.1);
}
.ai-mode-btn:last-child{border-right:none;}
.ai-mode-btn.active{
  background:rgba(37,211,102,.12);color:#A5D6A7;
  box-shadow:inset 0 -2px 0 #25D366;
}
.ai-mode-btn:hover:not(.active){color:rgba(165,214,167,.75);}

/* ── AI Input Panel (Kundali / Matching forms) ── */
.ai-input-panel{
  background:#1a2820;border:1px solid rgba(37,211,102,.2);
  border-top:none;border-radius:0;
  padding:14px;margin-bottom:0;
  border-bottom:1px solid rgba(37,211,102,.15);
}
.ai-panel-title{
  font-family:'Cinzel',serif;font-size:.82rem;color:#A5D6A7;
  font-weight:700;margin-bottom:10px;letter-spacing:.03em;
}
.ai-panel-sub{
  font-size:.78rem;color:#81C784;font-weight:700;
  font-family:'Rajdhani',sans-serif;text-transform:uppercase;
  letter-spacing:.05em;margin-bottom:6px;
}
.ai-panel-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px;
}
.ai-panel-two{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:10px;
}
.ai-panel-btn{
  width:100%;padding:9px;border-radius:8px;border:none;cursor:pointer;
  background:linear-gradient(135deg,#075E54,#128C7E);
  color:#fff;font-size:.84rem;font-weight:700;
  font-family:'Rajdhani',sans-serif;letter-spacing:.04em;
  transition:all .2s;
}
.ai-panel-btn:hover{background:linear-gradient(135deg,#0a7a6e,#18b09a);}
.ai-status-ok{
  margin-top:8px;padding:7px 10px;border-radius:6px;
  background:rgba(37,211,102,.1);border:1px solid rgba(37,211,102,.25);
  color:#A5D6A7;font-size:.78rem;line-height:1.5;
}
.ai-input-panel .form-inp,.ai-input-panel input,.ai-input-panel select{
  background:rgba(255,255,255,.08) !important;
  border:1px solid rgba(37,211,102,.2) !important;
  color:#E8F5E9 !important;border-radius:6px;
  padding:7px 10px;font-size:.82rem;width:100%;
}
.ai-input-panel label{color:rgba(165,214,167,.7);font-size:.75rem;}
.ai-input-panel .fg{margin-bottom:0;}

/* ── AI Panel Location Widget ── */
.ai-ac-wrap{position:relative;}
.ai-ac-list{
  position:absolute;top:100%;left:0;right:0;z-index:2000;
  background:#1a2e22;border:1.5px solid rgba(37,211,102,.35);
  border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.5);
  max-height:200px;overflow-y:auto;display:none;margin-top:2px;
}
.ai-ac-list.open{display:block;}
.ai-ac-list .ac-item{
  padding:9px 12px;cursor:pointer;font-size:.82rem;
  border-bottom:1px solid rgba(37,211,102,.1);transition:background .15s;
  color:#E8F5E9;
}
.ai-ac-list .ac-item:hover,.ai-ac-list .ac-item.sel{background:rgba(37,211,102,.12);}
.ai-ac-list .ac-item:last-child{border:none;}
.ai-ac-list .ac-name{font-weight:600;color:#A5D6A7;}
.ai-ac-list .ac-sub{font-size:.72rem;color:rgba(165,214,167,.55);margin-top:2px;}
.ai-coord-disp{
  font-size:.74rem;color:#81C784;font-weight:600;
  padding:4px 8px;background:rgba(37,211,102,.08);
  border:1px solid rgba(37,211,102,.2);border-radius:5px;
  margin-top:4px;min-height:0;display:none;
}
.ai-coord-disp.show{display:block;}

/* chat-wrap now has no border-radius top when mode bar is above */


/* ── Chat back + minimize buttons ── */
.chat-back-btn{
  background:none;border:none;color:#fff;cursor:pointer;
  font-size:1.8rem;line-height:1;padding:0 8px 0 0;
  font-weight:300;opacity:.85;transition:opacity .15s;
  flex-shrink:0;
}
.chat-back-btn:hover{opacity:1;}
.chat-minimize-btn{
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
  border-radius:50%;color:#fff;cursor:pointer;
  font-size:1.1rem;line-height:1;
  width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;
  margin-left:auto;flex-shrink:0;
  transition:background .15s;
}
.chat-minimize-btn:hover{background:rgba(255,255,255,.2);}

/* ── Mode bar fix ── */
.ai-mode-bar{
  display:flex;gap:0;
  background:var(--g-deep);border-radius:12px;
  border:1px solid rgba(255,107,0,.15);
  overflow:hidden;margin-bottom:10px;
}
.ai-mode-btn{
  flex:1;padding:11px 8px;border:none;cursor:pointer;
  background:transparent;color:rgba(255,220,150,.45);
  font-size:.82rem;font-weight:700;transition:all .2s;
  font-family:'Rajdhani',sans-serif;letter-spacing:.04em;
  border-right:1px solid rgba(255,107,0,.1);
}
.ai-mode-btn:last-child{border-right:none;}
.ai-mode-btn.active{
  background:rgba(255,107,0,.12);color:var(--saffron);
  box-shadow:inset 0 -2px 0 var(--saffron);
}
.ai-mode-btn:hover:not(.active){color:rgba(255,220,150,.75);}

/* ── AI mode page layout ── */
#pg-aichat{
  padding-bottom:20px;
}

/* ══════════════════════════════════════════════════════════
   CHAT WIDGET — CLEAN FINAL RULES (override all above)
════════════════════════════════════════════════════════════ */

/* Full-screen overlay: below app-header (52px), above bottom nav (64px) */
.chat-wrap{
  /* WordPress inline mode — always visible, not a floating overlay */
  display:flex !important;
  flex-direction:column !important;
  position:relative !important;
  top:auto !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  z-index:1 !important;
  background:#0B1A10 !important;
  border-radius:12px !important;
  box-shadow:0 4px 24px rgba(0,0,0,.4) !important;
  overflow:hidden !important;
  height:600px !important;
  max-height:80vh !important;
  min-height:400px !important;
}
/* Keep flex when JS sets display:flex explicitly */
.chat-wrap[style*="flex"],
.chat-wrap[style*="block"] {
  display:flex !important;
}

/* Header — fixed at top of widget */
.chat-header{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  padding:10px 14px !important;
  background:linear-gradient(135deg,#075E54,#128C7E) !important;
  flex-shrink:0 !important;
  position:relative !important;
  z-index:1 !important;
  min-height:52px !important;
}

/* Messages area — takes all available space */
.chat-messages{
  flex:1 1 0 !important;
  overflow-y:auto !important;
  padding:12px 14px 8px !important;
  display:flex !important;
  flex-direction:column !important;
  gap:10px !important;
  background:#0B1A10 !important;
  min-height:0 !important;         /* critical for flex shrink */
  scrollbar-width:thin;
  scrollbar-color:#25D36640 transparent;
}
.chat-messages::-webkit-scrollbar{width:4px;}
.chat-messages::-webkit-scrollbar-thumb{background:#25D36640;border-radius:2px;}

/* Suggestions strip */
.chat-suggestions{
  display:flex !important;
  gap:6px !important;
  padding:6px 12px !important;
  overflow-x:auto !important;
  scrollbar-width:none !important;
  flex-shrink:0 !important;
  background:rgba(0,0,0,.25) !important;
  border-top:1px solid rgba(37,211,102,.1) !important;
}
.chat-suggestions::-webkit-scrollbar{display:none;}

/* Input area — always at bottom, never scrolls */
.chat-input-area{
  display:flex !important;
  flex-direction:column !important;
  padding:8px 12px 10px !important;
  background:#1F2C34 !important;
  border-top:1px solid rgba(37,211,102,.15) !important;
  flex-shrink:0 !important;       /* never shrink */
  position:relative !important;   /* not sticky — flex column handles it */
}

/* Input row */
.chat-input-row{
  display:flex !important;
  align-items:flex-end !important;
  gap:8px !important;
}

/* Textarea */
.chat-inp{
  flex:1 !important;
  background:rgba(255,255,255,.1) !important;
  border:1.5px solid rgba(37,211,102,.25) !important;
  border-radius:24px !important;
  color:#E8F5E9 !important;
  padding:10px 18px !important;
  font-size:.88rem !important;
  font-family:'Noto Sans Devanagari','Rajdhani',sans-serif !important;
  resize:none !important;
  min-height:42px !important;
  max-height:100px !important;
  line-height:1.5 !important;
  outline:none !important;
  scrollbar-width:none !important;
}
.chat-inp:focus{
  border-color:#25D366 !important;
  background:rgba(255,255,255,.13) !important;
}
.chat-inp::placeholder{color:rgba(255,255,255,.35) !important;font-size:.82rem !important;}
.chat-inp::-webkit-scrollbar{display:none !important;}

/* Send button */
.chat-send-btn{
  width:42px !important;
  height:42px !important;
  border-radius:50% !important;
  border:none !important;
  cursor:pointer !important;
  background:#25D366 !important;
  color:#fff !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:1rem !important;
  flex-shrink:0 !important;
  transition:all .2s !important;
}
.chat-send-btn:hover{background:#20BC5A !important;transform:scale(1.05) !important;}

/* Back + Minimize buttons */
.chat-back-btn{
  background:none !important;
  border:none !important;
  color:#fff !important;
  cursor:pointer !important;
  font-size:1.6rem !important;
  line-height:1 !important;
  padding:0 8px 0 0 !important;
  font-weight:300 !important;
  flex-shrink:0 !important;
  opacity:.9 !important;
}
.chat-back-btn:hover{opacity:1 !important;}
.chat-minimize-btn{
  background:rgba(255,255,255,.15) !important;
  border:1px solid rgba(255,255,255,.25) !important;
  border-radius:50% !important;
  color:#fff !important;
  cursor:pointer !important;
  font-size:1rem !important;
  width:28px !important;
  height:28px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex-shrink:0 !important;
  transition:background .15s !important;
  margin-left:auto !important;
}
.chat-minimize-btn:hover{background:rgba(255,255,255,.25) !important;}

/* ── Mode bar — clean final override ── */
.ai-mode-bar{
  display:flex !important;
  gap:0 !important;
  background:var(--g-deep) !important;
  border-radius:12px !important;
  border:1px solid rgba(255,107,0,.2) !important;
  overflow:hidden !important;
  margin-bottom:12px !important;
}
.ai-mode-btn{
  flex:1 !important;
  padding:12px 6px !important;
  border:none !important;
  cursor:pointer !important;
  background:transparent !important;
  color:rgba(255,220,150,.45) !important;
  font-size:.82rem !important;
  font-weight:700 !important;
  transition:all .2s !important;
  font-family:'Rajdhani',sans-serif !important;
  letter-spacing:.03em !important;
  border-right:1px solid rgba(255,107,0,.1) !important;
}
.ai-mode-btn:last-child{border-right:none !important;}
.ai-mode-btn.active{
  background:rgba(255,107,0,.12) !important;
  color:var(--saffron) !important;
  box-shadow:inset 0 -2px 0 var(--saffron) !important;
}
.ai-mode-btn:hover:not(.active){
  background:rgba(255,107,0,.06) !important;
  color:rgba(255,220,150,.8) !important;
}

/* chat-open class — overrides display:none !important */
#ai-chat-wrap.chat-open{
  display:flex !important;
  flex-direction:column !important;
}
#ai-chat-wrap.chat-minimized{
  display:flex !important;
  flex-direction:column !important;
  top:auto !important;
  bottom:var(--nav-h) !important;
  height:52px !important;
  min-height:0 !important;
  overflow:hidden !important;
}

/* ── Match AI Chat ── */
.match-ai-wrap{
  background:#0B1A10;border-radius:12px;
  overflow:hidden;border:1px solid rgba(37,211,102,.2);
}
.match-ai-header{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 14px;
  background:linear-gradient(135deg,#075E54,#128C7E);
  color:#fff;font-weight:600;font-size:.88rem;
  font-family:'Rajdhani',sans-serif;
}
.match-ai-close{
  background:none;border:none;color:rgba(255,255,255,.7);
  cursor:pointer;font-size:1rem;padding:0 4px;
}
.match-ai-close:hover{color:#fff;}

/* ── Chat scroll-to-bottom button ── */
.chat-scroll-btn{
  position:absolute;
  bottom:14px;right:14px;
  width:36px;height:36px;
  border-radius:50%;
  background:#1F2C34;
  border:1.5px solid rgba(37,211,102,.35);
  color:#25D366;
  font-size:1.2rem;
  cursor:pointer;
  display:none;
  align-items:center;
  justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,.4);
  transition:all .2s;
  z-index:10;
}
.chat-scroll-btn.visible{display:flex;}
.chat-scroll-btn:hover{background:#128C7E;color:#fff;transform:scale(1.1);}

/* The chat-messages needs position:relative for absolute button */
.chat-messages{position:relative !important;}

/* ── General mode panel ── */
.ai-general-panel{
  margin-bottom:12px;
  padding:14px;
  background:var(--g-deep);
  border-radius:12px;
  border:1px solid rgba(255,107,0,.15);
}
.ai-gen-desc{
  font-size:.82rem;
  color:rgba(255,220,150,.6);
  margin-bottom:12px;
  line-height:1.5;
  font-family:'Rajdhani',sans-serif;
}
.ai-gen-topics{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.ai-gen-chip{
  background:rgba(255,107,0,.08);
  border:1px solid rgba(255,107,0,.2);
  border-radius:20px;
  padding:7px 14px;
  font-size:.8rem;
  color:rgba(255,220,150,.8);
  cursor:pointer;
  transition:all .2s;
  font-family:'Rajdhani',sans-serif;
  font-weight:600;
}
.ai-gen-chip:hover{
  background:rgba(255,107,0,.18);
  color:var(--saffron);
  border-color:var(--saffron);
  transform:translateY(-1px);
}
/* ══ KG AI MODE BUTTONS (3-mode switcher) ══ */
.kg-mode-btn {
  transition: all .2s;
  font-weight: 700 !important;
  letter-spacing: .03em;
}
.kg-mode-btn:hover:not(.active) {
  background: rgba(255,107,0,.08) !important;
  color: rgba(255,220,150,.85) !important;
}
.kg-mode-btn.active {
  background: rgba(255,107,0,.18) !important;
  color: var(--saffron) !important;
}

/* ══ CHAT SUGGESTIONS SCROLLABLE BAR (above input) ══ */
#kg-chat-sugg {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#kg-chat-sugg::-webkit-scrollbar { display: none; }

/* ══ CHAT INPUT DARK THEME ══ */
#kg-chat-inp {
  color: #E8F5E9 !important;
}
#kg-chat-inp::placeholder {
  color: rgba(232,245,233,.4) !important;
}

/* ══ AI STATUS OK BOX ══ */
.ai-status-ok {
  background: rgba(76,175,80,.1);
  border: 1px solid rgba(76,175,80,.25);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: .8rem;
  color: #4CAF50;
}

/* ══ JSON TAB PRE ══ */
#kg-json-out {
  background: #000000;
  color: #FFD580;
  border-radius: 8px;
  padding: 14px;
  font-size: .72rem;
  overflow-x: auto;
  max-height: 520px;
  overflow-y: auto;
  line-height: 1.6;
  font-family: monospace;
}

/* ══ BOUNCE ANIMATION (typing dots) ══ */
@keyframes bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: .5; }
  40% { transform: translateY(-6px); opacity: 1; }
}

/* ══ CHAT MSG FADE-IN TRANSITION ══ */
.chat-msg {
  transition: opacity .3s ease, transform .3s ease;
}

/* ══════════════════════════════════════════════════════════
   KG SETTINGS PANEL (plugin-prefixed classes)
══════════════════════════════════════════════════════════ */
.kg-settings-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    z-index: 9999;
    backdrop-filter: blur(4px);
    pointer-events: none;
}
.kg-settings-overlay.open {
    pointer-events: auto;
    display: flex;
    align-items: flex-end;
}
@media (min-width: 768px) {
    .kg-settings-overlay.open { align-items: center; justify-content: center; }
}
.kg-settings-panel {
    background: var(--card, #1A1A2E);
    border-radius: 20px 20px 0 0;
    padding: 24px 20px;
    width: 100%;
    max-width: 420px;
    max-height: 80vh;
    overflow-y: auto;
    border: 1px solid var(--border, rgba(255,107,0,.2));
    animation: kgSlideUp .25s ease;
}
@media (min-width: 768px) {
    .kg-settings-panel { border-radius: 20px; max-height: none; animation: kgFadeIn .25s ease; }
}
@keyframes kgSlideUp { from { transform: translateY(60px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes kgFadeIn  { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: scale(1); } }
.kg-settings-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--saffron, #FF6B00);
    margin-bottom: 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border, rgba(255,107,0,.2));
}
.kg-set-section { margin-bottom: 18px; }
.kg-set-label {
    font-size: .78rem;
    font-weight: 700;
    color: var(--muted, #888);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 8px;
}
.kg-set-options { display: flex; gap: 8px; flex-wrap: wrap; }
.kg-set-opt {
    padding: 7px 16px;
    border-radius: 20px;
    border: 1.5px solid var(--border, rgba(255,107,0,.2));
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--text2, rgba(255,220,150,.6));
    background: transparent;
    transition: all .2s;
}
.kg-set-opt.active,
.kg-set-opt:hover {
    background: linear-gradient(135deg,#FF6B00,#FF8C00);
    color: #fff;
    border-color: #FF6B00;
}

/* ══════════════════════════════════════════════════════════
   WHY KUNDALI GURU — 4-card grid
══════════════════════════════════════════════════════════ */
.why-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 10px;
}
@media (max-width: 600px) { .why-grid { grid-template-columns: 1fr; } }
.why-card {
    background: var(--card, rgba(255,107,0,.06));
    border: 1px solid var(--border, rgba(255,107,0,.15));
    border-radius: 14px;
    padding: 18px 16px;
    transition: all .25s;
}
.why-card:hover {
    border-color: var(--saffron, #FF6B00);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255,107,0,.12);
}
.why-icon { font-size: 1.8rem; margin-bottom: 10px; }
.why-title { font-size: .88rem; font-weight: 700; color: var(--gold3, #FFD700); margin-bottom: 6px; }
.why-desc  { font-size: .78rem; color: var(--text2, rgba(255,220,150,.65)); line-height: 1.65; }

/* ══════════════════════════════════════════════════════════
   RASHIFAL — period buttons (rf-period-btn)
══════════════════════════════════════════════════════════ */
.rf-period-btn {
    padding: 6px 14px !important;
    font-size: .78rem !important;
    border-radius: 16px !important;
    font-weight: 700 !important;
    transition: all .2s !important;
    cursor: pointer;
}
.rf-period-btn.active,
.rf-period-btn.btn-primary {
    background: linear-gradient(135deg,#FF6B00,#FF8C00) !important;
    color: #fff !important;
    border-color: #FF6B00 !important;
}
.rf-period-btn:hover:not(.active) {
    border-color: var(--saffron, #FF6B00) !important;
    color: var(--saffron, #FF6B00) !important;
}

/* ══════════════════════════════════════════════════════════
   CHAT SCROLL BUTTON (kg-prefixed)
══════════════════════════════════════════════════════════ */
#kg-ai-scroll-btn,
#kg-match-scroll-btn {
    display: none;
    position: absolute;
    bottom: 10px;
    right: 14px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--saffron, #FF6B00);
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
    transition: all .2s;
    z-index: 10;
}
#kg-ai-scroll-btn:hover,
#kg-match-scroll-btn:hover { background: #e55e00; transform: scale(1.1); }

/* ══════════════════════════════════════════════════════════
   TYPING DOT ANIMATION (for match chat)
══════════════════════════════════════════════════════════ */
@keyframes kgDot {
    0%, 80%, 100% { transform: translateY(0); opacity: .4; }
    40% { transform: translateY(-5px); opacity: 1; }
}

/* ══════════════════════════════════════════════════════════
   PDF / DOWNLOAD TAB IN CHART TAB BAR
══════════════════════════════════════════════════════════ */
.ctab-pdf {
    background: linear-gradient(135deg,#C62828,#E53935) !important;
    color: #fff !important;
    border-color: #C62828 !important;
    font-size: .75rem !important;
}
.ctab-pdf:hover { opacity: .85; }

/* ══════════════════════════════════════════════════════════
   MATCH AI SECTION improvements
══════════════════════════════════════════════════════════ */
#kg-match-ai-section .chat-messages {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
}

/* ══════════════════════════════════════════════════════════
   CHAT MINIMIZE BUTTON (kg-prefixed)
══════════════════════════════════════════════════════════ */
.kg-chat-min-btn {
    background: rgba(255,255,255,.12);
    border: none;
    color: rgba(255,220,150,.8);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    flex-shrink: 0;
    transition: background .2s;
}
.kg-chat-min-btn:hover { background: rgba(255,255,255,.22); }

/* ── Light mode only — hide dark toggle ── */
#kg-themebtn { display: none !important; }
[data-theme="dark"] { /* Force light even if JS sets dark accidentally */ }

/* ── Chart SVG light theme ── */
svg[id^="ni-"], svg[id^="si-"] {
  background: #FFFFFF !important;
  border-radius: 6px;
}
.chart-svg-wrap, .chart-wrap { background: #FFFFFF; }


/* ═══════════════════════════════════════════════════════════
   PREMIUM NATIVE APP UI — Top Bar + Bottom Nav
   ═══════════════════════════════════════════════════════════ */

/* ── TOP APP BAR (52px fixed) ── */
.kg-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 52px;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background: linear-gradient(135deg, #7B0D1E 0%, #5C0A16 50%, #3D0510 100%);
  box-shadow: 0 2px 12px rgba(0,0,0,.25);
}

.kg-topbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 90px;
}

.kg-logo-icon {
  font-size: 1.2rem;
  color: #FFD700;
  filter: drop-shadow(0 0 6px rgba(240,192,64,.5));
}

.kg-logo-text {
  font-family: 'Cinzel Decorative', 'Cinzel', serif;
  font-size: .78rem;
  font-weight: 700;
  color: #FFD700;
  letter-spacing: .03em;
  white-space: nowrap;
}

.kg-topbar-center {
  font-family: 'Rajdhani', sans-serif;
  font-size: .92rem;
  font-weight: 600;
  color: rgba(255,255,255,.9);
  text-align: center;
  flex: 1;
  padding: 0 8px;
}

.kg-topbar-right {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 90px;
  justify-content: flex-end;
}

.kg-tb-btn {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 8px;
  color: #fff;
  padding: 5px 10px;
  font-size: .78rem;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s;
  white-space: nowrap;
  position: relative;
  z-index: 1001;
  pointer-events: auto;
}
.kg-tb-btn:hover { background: rgba(255,255,255,.22); }
.kg-tb-btn i { font-size: .82rem; }

/* ── BOTTOM NAV BAR (52px fixed) — FIX v7.5.6: 64px → 52px ── */
.kg-bottomnav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 52px;
  z-index: 1001;
  display: flex;
  align-items: stretch;
  background: #fff;
  border-top: 1px solid #E8D5A0;
  box-shadow: 0 -4px 20px rgba(0,0,0,.08);
  pointer-events: auto;
}

.kg-bnav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px 2px;
  color: #9A7F4A;
  font-family: 'Rajdhani', sans-serif;
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .02em;
  position: relative;
  transition: color .2s;
}

.kg-bnav-item i {
  font-size: 1.1rem;
  transition: transform .2s, color .2s;
}

.kg-bnav-item span {
  font-size: .6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1;
}

.kg-bnav-item.active {
  color: #FF6B00;
}

.kg-bnav-item.active i {
  transform: translateY(-2px);
  color: #FF6B00;
}

/* Active indicator line on top */
.kg-bnav-item.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 20%;
  right: 20%;
  height: 2.5px;
  background: linear-gradient(90deg, #FF6B00, #B8860B);
  border-radius: 0 0 4px 4px;
}

/* ── CONTENT AREA — push below top bar, above bottom nav ── */
.kg-app {
  padding-top: 52px !important;
  padding-bottom: 72px !important;
  min-height: 100vh;
}

/* ── STANDALONE WIDGET PAGES (no bottom nav) ── */
.kg-standalone {
  padding-bottom: 24px !important;
}
.kg-standalone .kg-topbar {
  display: flex !important;
}
.kg-standalone > div[style*="padding-top"] {
  padding-top: 0 !important;
}

/* ── HIDE OLD NAV ── */
.nav { display: none !important; }


/* ── GOCHAR, MUHURT, HORA — keep them accessible via More in home ── */
/* These don't have bottom nav tabs, accessible from home grid only */

/* ── CHAT PAGE — full screen feel ── */
#kg-pg-chat {
  min-height: 0 !important;
  padding: 0 !important;
}
#kg-pg-chat.active {
  padding: 0 !important;
}

/* ── HOME HERO — updated spacing ── */
.home-hero {
  padding: 24px 16px 20px;
  text-align: center;
  background: linear-gradient(160deg, #FFFFFF 0%, #FFF3E0 100%);
  border-bottom: 1px solid rgba(184,134,11,.15);
  margin-bottom: 0;
}

.hero-badge {
  display: inline-block;
  background: linear-gradient(135deg, rgba(255,107,0,.1), rgba(184,134,11,.08));
  border: 1px solid rgba(255,107,0,.2);
  border-radius: 20px;
  padding: 4px 14px;
  font-size: .7rem;
  font-family: 'Cinzel', serif;
  font-weight: 600;
  color: var(--saffron, #FF6B00);
  letter-spacing: .06em;
  margin-bottom: 12px;
}

.hero-om {
  font-size: 2.2rem;
  color: #B8860B;
  line-height: 1;
  margin-bottom: 8px;
  filter: drop-shadow(0 0 8px rgba(184,134,11,.3));
}

.hero-title {
  font-family: 'Cinzel Decorative', serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #7B0D1E;
  margin: 0 0 8px;
}

.hero-sub {
  font-size: .82rem;
  color: var(--muted, #7A5F2A);
  margin-bottom: 16px;
  line-height: 1.5;
}

.hero-cta-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.hero-cta-primary {
  background: linear-gradient(135deg, #FF6B00, #B8860B);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 11px 22px;
  font-family: 'Rajdhani', sans-serif;
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(255,107,0,.3);
  letter-spacing: .03em;
  transition: transform .15s, box-shadow .15s;
}
.hero-cta-primary:active { transform: scale(.97); }

.hero-cta-sec {
  background: linear-gradient(135deg, #075E54, #128C7E);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 11px 22px;
  font-family: 'Rajdhani', sans-serif;
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: .03em;
}

/* ── HOME STATS ── */
.home-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-bottom: 1px solid rgba(184,134,11,.12);
  background: #fff;
}

.stat-item {
  padding: 12px 4px;
  text-align: center;
  border-right: 1px solid rgba(184,134,11,.1);
}
.stat-item:last-child { border-right: none; }

.stat-num {
  font-family: 'Cinzel', serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--saffron, #FF6B00);
}

.stat-lbl {
  font-size: .62rem;
  color: var(--muted, #7A5F2A);
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-top: 2px;
}

/* ── HOME SECTIONS ── */
.home-section {
  padding: 16px 14px 8px;
}

.home-section-hdr {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.home-section-icon {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, rgba(255,107,0,.1), rgba(184,134,11,.08));
  border: 1px solid rgba(255,107,0,.2);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.home-section-title {
  font-family: 'Cinzel', serif;
  font-size: .86rem;
  font-weight: 700;
  color: var(--maroon, #7B0D1E);
}

.home-section-sub {
  font-size: .72rem;
  color: var(--muted, #7A5F2A);
  margin-top: 1px;
}

.home-section-btn {
  margin-left: auto;
  background: none;
  border: 1px solid rgba(255,107,0,.3);
  border-radius: 8px;
  padding: 4px 10px;
  font-size: .72rem;
  color: var(--saffron, #FF6B00);
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

/* ── HOME GRID ── */
.home-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.home-card {
  background: var(--card, #fff);
  border: 1px solid var(--border, #E8D5A0);
  border-radius: 14px;
  padding: 14px 12px;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
  position: relative;
  overflow: hidden;
}

.home-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, rgba(255,107,0,.5), rgba(184,134,11,.3));
  border-radius: 14px 14px 0 0;
}

.home-card:active { transform: scale(.97); }

.home-card.featured {
  grid-column: span 2;
  background: linear-gradient(135deg, #FFFFFF, #FFF3E0);
  border-color: rgba(255,107,0,.25);
}
.home-card.featured::before {
  background: linear-gradient(90deg, #FF6B00, #B8860B);
}

.home-card-icon {
  font-size: 1.4rem;
  display: block;
  margin-bottom: 6px;
}

.home-card-title {
  font-family: 'Cinzel', serif;
  font-size: .82rem;
  font-weight: 700;
  color: var(--maroon, #7B0D1E);
  margin-bottom: 4px;
}

.home-card-desc {
  font-size: .72rem;
  color: var(--muted, #7A5F2A);
  line-height: 1.5;
}

.home-card-arrow {
  position: absolute;
  right: 12px;
  bottom: 12px;
  font-size: .8rem;
  color: rgba(255,107,0,.4);
  font-weight: 700;
}

/* ── WHY GRID ── */
.why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.why-card {
  background: var(--card, #fff);
  border: 1px solid var(--border, #E8D5A0);
  border-radius: 12px;
  padding: 12px;
}
.why-icon { font-size: 1.3rem; margin-bottom: 6px; }
.why-title { font-size: .78rem; font-weight: 700; color: var(--maroon, #7B0D1E); margin-bottom: 4px; }
.why-desc { font-size: .7rem; color: var(--muted, #7A5F2A); line-height: 1.5; }

/* ── AI BANNER ── */
.home-ai-banner {
  margin: 14px 14px 20px;
  background: linear-gradient(135deg, #075E54, #128C7E);
  border-radius: 14px;
  padding: 16px 18px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 6px 20px rgba(7,94,84,.25);
}
.ai-banner-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: .92rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
}
.ai-banner-sub { font-size: .72rem; color: rgba(255,255,255,.75); line-height: 1.4; }
.ai-banner-arrow { font-size: 1.8rem; color: rgba(255,255,255,.6); }

/* ── PAGE HEADER ── */
.page-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 14px 12px;
  border-bottom: 1px solid var(--border, #E8D5A0);
  margin-bottom: 14px;
  background: linear-gradient(135deg, #FFFFFF, #fff);
}
.page-header-icon {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, rgba(255,107,0,.12), rgba(184,134,11,.08));
  border: 1px solid rgba(255,107,0,.2);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}
.page-header-title {
  font-family: 'Cinzel', serif;
  font-size: .95rem;
  font-weight: 700;
  color: var(--maroon, #7B0D1E);
}
.page-header-sub {
  font-size: .72rem;
  color: var(--muted, #7A5F2A);
  margin-top: 2px;
}

/* ── FORM CARDS ── */
.form-card {
  margin: 0 14px 14px;
  background: var(--card, #fff);
  border: 1px solid var(--border, #E8D5A0);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,.04);
}

/* ── TABLET / DESKTOP ── */
@media (min-width: 600px) {
  .home-grid { grid-template-columns: repeat(3, 1fr); }
  .home-card.featured { grid-column: span 1; }
  .why-grid { grid-template-columns: repeat(4, 1fr); }
  .kg-topbar { padding: 0 24px; }
  .kg-logo-text { font-size: .88rem; }
}

@media (min-width: 900px) {
  /* Old bottom nav hide — now handled by 1024px breakpoint */
  .kg-app { padding-bottom: 20px !important; }
  .kg-topbar { height: 56px; }
  .kg-app { padding-top: 56px !important; }
}

/* ── CONTENT SCROLL AREA ── */
.kg-app > .kg-pg {
  min-height: calc(100vh - 52px - 64px);
}

/* ── HOME CARD hover states ── */
@media (hover: hover) {
  .home-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.1); }
  .home-ai-banner:hover { filter: brightness(1.05); }
}

/* ── FORM INSIDE PAGES — proper padding ── */
.kg-pg .form-card:first-child { margin-top: 14px; }
.kg-pg { padding: 0; }

/* ── RASHIFAL — rashi selector buttons ── */
.rashi-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  margin-bottom: 14px;
}
.rashi-btn {
  border: 1.5px solid var(--border, #E8D5A0);
  background: var(--card, #fff);
  border-radius: 10px;
  padding: 8px 4px;
  text-align: center;
  cursor: pointer;
  font-size: .7rem;
  font-family: 'Noto Sans Devanagari', sans-serif;
  transition: all .15s;
}
.rashi-btn .rs { font-size: 1rem; display: block; margin-bottom: 2px; }
.rashi-btn.kg-selected,
.rashi-btn:focus {
  border-color: var(--saffron, #FF6B00);
  background: var(--saffronl, #FFF3E0);
  color: var(--saffron, #FF6B00);
  font-weight: 700;
}

/* ── PERIOD BUTTONS ── */
.rf-period-btn {
  padding: 6px 12px !important;
  font-size: .78rem !important;
  border-radius: 8px !important;
}

/* ── PANCHANG GRID ── */
.pgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.pc {
  background: var(--card, #fff);
  border: 1px solid var(--border, #E8D5A0);
  border-radius: 10px;
  padding: 10px;
}

/* ── ADMIN BAR OFFSET ── */
body.admin-bar .kg-topbar { top: 32px; }
body.admin-bar .kg-app    { padding-top: 84px !important; }
@media screen and (max-width: 782px) {
  body.admin-bar .kg-topbar { top: 46px; }
  body.admin-bar .kg-app    { padding-top: 98px !important; }
}

/* ── MATCHING FORM ── */
.match-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 480px) {
  .match-grid { grid-template-columns: 1fr; }
  .rashi-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ── TOAST ── */
.toast {
  position: fixed;
  bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(30,10,0,.92);
  color: #FFD700;
  padding: 10px 20px;
  border-radius: 20px;
  font-size: .82rem;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s, transform .3s;
  white-space: nowrap;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ══════════════════════════════════════════════════════
   MOBILE APP UI UPGRADES v5.0
   PWA-ready, safe area, smooth transitions, better touch
   ══════════════════════════════════════════════════════ */

/* Smooth page transitions */
.kg-pg {
  animation: kgFadeIn .25s ease-out;
}
@keyframes kgFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Bottom nav safe area support (iOS notch) */
.kg-bottom-nav {
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}

/* Better touch targets for mobile */
@media (max-width: 480px) {
  .ntab, .ctab, .btn, button {
    min-height: 40px;
    touch-action: manipulation;
  }
  .form-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .fg.full { grid-column: 1 !important; }
  .res-head {
    flex-direction: column !important;
    gap: 10px !important;
    align-items: flex-start !important;
  }
  .res-head > div:last-child {
    width: 100% !important;
    justify-content: flex-start !important;
  }
  .c2 {
    grid-template-columns: 1fr !important;
  }
  .chart-tabs {
    gap: 2px !important;
  }
  .ctab {
    font-size: .68rem !important;
    padding: 5px 6px !important;
  }
  .ctrl-bar {
    flex-direction: column !important;
    gap: 8px !important;
  }
  /* PDF button more prominent on mobile */
  .ctab-pdf {
    background: linear-gradient(135deg, #1B5E20, #2E7D32) !important;
    color: #fff !important;
    border-radius: 14px !important;
    padding: 6px 12px !important;
  }
  /* Chat window full height on mobile */
  .chat-wrap {
    height: calc(100vh - 160px) !important;
    min-height: 400px !important;
    border-radius: 0 !important;
  }
  /* Matching grid stack on mobile */
  #kg-mode-panel-match > div > div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* Results wrap tighter padding */
  .rwrap {
    padding: 8px !important;
  }
  .tcard {
    padding: 12px !important;
  }
  /* Panchang/Hora/Muhurt tables scroll on mobile */
  .tcard table {
    font-size: .76rem !important;
  }
  .tcard th, .tcard td {
    padding: 5px 6px !important;
  }
}

/* Tablet improvements */
@media (min-width: 481px) and (max-width: 768px) {
  .c2 {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .form-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Chat history panel styling */
#kg-chat-history-panel {
  font-family: 'Noto Sans Devanagari', 'Segoe UI', sans-serif;
}
#kg-chat-history-panel div[onclick] {
  transition: background .15s;
}
#kg-chat-history-panel div[onclick]:hover {
  background: rgba(37, 211, 102, .06) !important;
}
#kg-chat-history-panel div[onclick]:active {
  background: rgba(37, 211, 102, .12) !important;
}

/* PDF export button in results header */
.btn[onclick*="kgExportPDF"] {
  transition: all .2s;
}
.btn[onclick*="kgExportPDF"]:hover {
  background: #2E7D32 !important;
  color: #fff !important;
  border-color: #2E7D32 !important;
}

/* Improved form inputs for mobile */
@media (max-width: 480px) {
  input[type="text"], input[type="number"], input[type="date"],
  input[type="time"], select, textarea {
    font-size: 16px !important; /* Prevents iOS zoom on focus */
    border-radius: 10px !important;
  }
  .tob-row select {
    font-size: 15px !important;
  }
}

/* Smooth scroll behavior */
html {
  scroll-behavior: smooth;
}

/* Scroll behavior — contain hataya, mouse/trackpad scroll fix */
body {
  overscroll-behavior-y: auto;
}

/* Better focus states for accessibility */
input:focus, select:focus, textarea:focus, button:focus-visible {
  outline: 2px solid var(--saffron, #FF6B00);
  outline-offset: 2px;
}

/* Chart SVG responsive container */
.csvg {
  width: 100%;
  height: auto;
  max-width: 440px;
  margin: 0 auto;
  display: block;
}

/* ERE sections better spacing on mobile */
@media (max-width: 480px) {
  .ere-section {
    padding: 10px !important;
  }
  .ere-section-title {
    font-size: .88rem !important;
    line-height: 1.5 !important;
  }
  .ere-text {
    font-size: .82rem !important;
  }
  /* Life score grid: 2 cols on mobile instead of 3 */
  .ere-text > div[style*="grid-template-columns: repeat(3"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Settings panel mobile */
@media (max-width: 480px) {
  .settings-overlay .settings-panel {
    width: 100% !important;
    max-width: 100% !important;
    height: 100vh !important;
    border-radius: 0 !important;
  }
}

/* Print styles for PDF */
@media print {
  .kg-bottom-nav, .chat-wrap, .settings-overlay,
  .kg-topbar, .ntab, .ctrl-bar, .btn, .form-wrap {
    display: none !important;
  }
  .kg-pg { display: block !important; }
  .rwrap { padding: 0 !important; box-shadow: none !important; }
}

/* ══════════════════════════════════════════════
   v5.0 RESPONSIVE — Phone / Tablet / Desktop
   ══════════════════════════════════════════════ */

/* Time input AM/PM toggle buttons */
.tob-row input[type="number"] {
  -moz-appearance: textfield;
}
.tob-row input[type="number"]::-webkit-inner-spin-button,
.tob-row input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* More menu styles */
#kg-more-menu button:active {
  background: rgba(255,255,255,.08) !important;
}

/* Phone — up to 480px */
@media (max-width: 480px) {
  /* Forms: single column */
  .form-grid, .info-grid, .ig, .ig2 {
    grid-template-columns: 1fr !important;
  }
  .fg.full { grid-column: 1 !important; }
  /* TOB row compact */
  .tob-row { flex-wrap: wrap !important; }
  .tob-row input[type="number"] { width: 50px !important; }
  /* Results header stack */
  .res-head {
    flex-direction: column !important;
    gap: 8px !important;
    align-items: stretch !important;
  }
  .res-head > div:last-child {
    width: 100% !important;
    flex-wrap: wrap !important;
  }
  /* Chart side-by-side → stack */
  .c2 { grid-template-columns: 1fr !important; gap: 8px !important; }
  /* Tabs scroll */
  .chart-tabs { gap: 2px !important; }
  .ctab { font-size: .66rem !important; padding: 5px 5px !important; min-width: 0 !important; }
  .ctrl-bar { flex-direction: column !important; gap: 6px !important; }
  /* Cards */
  .tcard, .ccard, .form-card { padding: 10px !important; }
  .rwrap { padding: 6px !important; }
  /* Matching grid stack */
  #kg-mode-panel-match > div > div[style*="grid-template-columns: 1fr 1fr"],
  .match-grid { grid-template-columns: 1fr !important; }
  /* Chat full height */
  .chat-wrap { height: calc(100vh - 140px) !important; min-height: 380px !important; border-radius: 0 !important; }
  /* More menu full width */
  #kg-more-menu { left: 8px !important; right: 8px !important; min-width: auto !important; }
  /* Rashi grid 3 columns on very small */
  .rashi-grid, [style*="repeat(4,1fr)"] { grid-template-columns: repeat(3,1fr) !important; }
  /* ERE sections */
  .ere-section { padding: 8px !important; }
  .ere-section-title { font-size: .85rem !important; }
  /* Chart legend compact */
  .kg-legend { padding: 8px 10px !important; gap: 4px !important; }
  .kg-legend > div:not(:first-child) { font-size: .62rem !important; padding: 2px 5px !important; }
  /* Bottom nav safe area */
  .kg-bottomnav { padding-bottom: env(safe-area-inset-bottom, 0) !important; }
  /* Page header compact */
  .page-header { padding: 12px !important; gap: 10px !important; }
  .page-header-title { font-size: 1rem !important; }
  /* Inputs 16px to prevent iOS zoom */
  input, select, textarea { font-size: 16px !important; }
}

/* Tablet — 481px to 768px */
@media (min-width: 481px) and (max-width: 768px) {
  .form-grid { grid-template-columns: 1fr 1fr; }
  .c2 { grid-template-columns: 1fr 1fr; gap: 10px; }
  .rashi-grid { grid-template-columns: repeat(4,1fr) !important; }
  .chart-tabs { flex-wrap: wrap; }
  .ctab { font-size: .72rem; padding: 6px 8px; }
  #kg-more-menu { min-width: 200px; }
}

/* Desktop — 769px+ */
@media (min-width: 769px) {
  .form-grid { grid-template-columns: 1fr 1fr 1fr; }
  .c2 { grid-template-columns: 1fr 1fr; gap: 14px; }
  .chat-wrap { max-width: 700px; margin: 0 auto; }
  .kg-app { max-width: 900px; margin: 0 auto; }
  /* ✅ FIX: Hide bottom nav on desktop — mobile only */
  .kg-bottomnav,
  #kg-bottomnav,
  .kg-liquid-nav,
  .kg-bnav-v6 { display: none !important; }
  #kg-more-menu { right: calc(50% - 340px); }
  /* Remove bottom padding on desktop since no nav */
  .kg-app, body { padding-bottom: 0 !important; }
}

/* Landscape phone */
@media (max-height: 500px) and (orientation: landscape) {
  .chat-wrap { height: calc(100vh - 80px) !important; }
  .kg-bottomnav { display: none !important; }
  #kg-more-menu { display: none !important; }
}
/* ══════════════════════════════════════════════════
   v5.1.0 — CRITICAL BUG FIXES (20 issues)
   ══════════════════════════════════════════════════ */

/* BUG 1: Desktop scroll not working — remove overflow:hidden from containers */
html, body {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  height: auto !important;
}
.kg-app {
  overflow: visible !important;
  height: auto !important;
}

/* BUG 2: Login/Signup button too big on mobile */
#kg-login-btn {
  padding: 5px 12px !important;
  font-size: .72rem !important;
  white-space: nowrap;
}
@media (max-width: 480px) {
  #kg-login-btn { padding: 4px 10px !important; font-size: .68rem !important; }
  #kg-user-bar { gap: 4px !important; }
  #kg-user-bar img { width: 22px !important; height: 22px !important; }
  #kg-user-bar > div { display: none !important; } /* hide name on tiny mobile */
}

/* BUG 3: Panchang full width */
#kg-panchang-content,
#kg-pg-panchang .form-card,
#kg-pg-panchang {
  max-width: 100% !important;
  width: 100% !important;
}

/* BUG 4: Cards need padding/spacing from edges */
.form-card, .tcard, .ccard {
  margin-left: 12px;
  margin-right: 12px;
}
.rwrap {
  margin: 0 8px;
}
@media (min-width: 769px) {
  .form-card, .tcard, .ccard { margin-left: 20px; margin-right: 20px; }
  .rwrap { margin: 0 16px; }
}
@media (max-width: 480px) {
  .form-card, .tcard, .ccard { margin-left: 8px; margin-right: 8px; }
  .rwrap { margin: 0 4px; }
}

/* BUG 8: AI Chat input — compact like WhatsApp */
#kg-chat-inp {
  min-height: 36px !important;
  max-height: 80px !important;
  padding: 8px 12px !important;
  font-size: .85rem !important;
  line-height: 1.4 !important;
  border-radius: 20px !important;
  resize: none !important;
}
.chat-input-bar, .chat-inp-wrap {
  padding: 6px 10px !important;
  gap: 8px !important;
}
.chat-send-btn, #kg-chat-send {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* BUG 11: Modern UI — clean font, boxy cards */
body {
  font-family: 'Inter', 'Noto Sans Devanagari', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.form-card, .tcard, .ccard, .page-header {
  border-radius: 12px !important;
  border: 1px solid rgba(0,0,0,.06) !important;
}
.form-inp, select, input[type="text"], input[type="email"], input[type="password"], 
input[type="number"], input[type="date"], input[type="time"], textarea {
  border-radius: 10px !important;
  border: 1.5px solid var(--border, #E8D5A0) !important;
  padding: 10px 12px !important;
  font-size: 15px !important;
  background: var(--card, #fff) !important;
  transition: border-color .2s !important;
}
.form-inp:focus, input:focus, select:focus, textarea:focus {
  border-color: var(--saffron, #FF6B00) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(255,107,0,.1) !important;
}
.btn {
  border-radius: 10px !important;
  font-weight: 600 !important;
  font-size: .84rem !important;
  transition: all .2s !important;
}

/* BUG 12: Footer icons clipping on scroll up */
.kg-bottomnav {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9990 !important;
  background: var(--card, #fff) !important;
  border-top: 1px solid rgba(0,0,0,.08) !important;
  box-shadow: 0 -2px 12px rgba(0,0,0,.06) !important;
  padding-bottom: env(safe-area-inset-bottom, 0) !important;
  transform: none !important;
}

/* BUG 18: Kundali tabs — horizontal scrollable on mobile */
#chart-tabs, .chart-tabs {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  gap: 4px !important;
  padding: 4px 8px !important;
  scrollbar-width: none !important;
}
#chart-tabs::-webkit-scrollbar, .chart-tabs::-webkit-scrollbar {
  display: none !important;
}
.ctab {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  font-size: .72rem !important;
  padding: 6px 10px !important;
}
@media (max-width: 480px) {
  .ctab { font-size: .66rem !important; padding: 5px 7px !important; }
}

/* Panchang grid items full width */
#kg-panch-res {
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  padding: 12px !important;
}
@media (max-width: 480px) {
  #kg-panch-res { grid-template-columns: 1fr !important; }
}

/* Rashi grid responsive */
@media (max-width: 360px) {
  .rashi-grid { grid-template-columns: repeat(3, 1fr) !important; }
}

/* Auth modal — better mobile */
.kg-auth-panel label {
  font-size: .78rem !important;
  font-weight: 600 !important;
  color: var(--muted) !important;
  margin-bottom: 4px !important;
  display: block !important;
}

/* Chat area — full screen when active */
#kg-pg-chat .page-header { display: none !important; }

/* Fix overlapping elements */
.kg-topbar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9995 !important;
}

/* More menu — above bottom nav */
#kg-more-menu {
  z-index: 9998 !important;
}

/* ERE sections spacing */
.ere-section { margin-bottom: 12px !important; }
.ere-panel { margin-bottom: 16px !important; }

/* Google Fonts import for Inter */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');



/* BUG 15: Gochar/Yearly only when kundali loaded */
#kg-more-menu .kg-needs-kundali {
  opacity: 0.4;
  pointer-events: none;
}
#kg-more-menu.has-kundali .kg-needs-kundali {
  opacity: 1;
  pointer-events: auto;
}

/* Bug 5: Dasha display — proper spacing, not cluttered */
.ere-dasha-card {
  padding: 14px !important;
  margin-bottom: 12px !important;
}
.ere-dasha-card .ere-dasha-pred {
  font-size: .82rem !important;
  line-height: 1.8 !important;
}
/* Collapsible dasha rows — spacing */
[onclick*="nextElementSibling"] {
  margin-bottom: 2px !important;
}
/* Dasha timeline table */
.ere-section table td,
.ere-section table th {
  padding: 6px 8px !important;
  font-size: .78rem !important;
}
/* Matching charts responsive */
#kg-ni-match1, #kg-si-match1, #kg-ni-match2, #kg-si-match2 {
  max-width: 100% !important;
  height: auto !important;
}
@media (max-width: 480px) {
  #kg-ni-match1, #kg-si-match1, #kg-ni-match2, #kg-si-match2 {
    max-width: 160px !important;
  }
}

/* Bug 16: Gochar/Annual content full width */
#kg-gochar-content, #kg-yearly-content {
  width: 100% !important;
}
#kg-gochar-content table, #kg-yearly-content table {
  font-size: .78rem !important;
}
#kg-gochar-content th, #kg-yearly-content th {
  font-size: .7rem !important;
  padding: 6px 8px !important;
}

/* ═══════════════════════════════════════════════════════════
   v6.0 FINAL COMPREHENSIVE BUG FIXES
   ═══════════════════════════════════════════════════════════ */

/* ── SCROLL FIX (Bug #3): Full page scroll restored ─────── */
html {
  height: auto !important;
  overflow-y: scroll !important;
  overflow-x: hidden !important;
  scroll-behavior: smooth;
}
body {
  min-height: 100vh !important;
  height: auto !important;
  overflow-y: visible !important;
  overflow-x: hidden !important;
  /* Prevent iOS momentum scroll locking on body */
  -webkit-overflow-scrolling: auto !important;
  touch-action: pan-y !important;
}
/* Do NOT put overflow:hidden on the app wrapper */
#kg-app, .kg-app {
  overflow: visible !important;
  height: auto !important;
  min-height: 100vh !important;
}
/* Page container: scrollable, not locked */
.kg-pg {
  overflow: visible !important;
}
/* ── Topbar pushes content down (not overlap) ───────────── */
#kg-app > .kg-topbar + * ,
.kg-topbar ~ .kg-pg,
.kg-topbar ~ #kg-pg-home {
  padding-top: 0;
}
.kg-content-wrap {
  padding-top: 58px !important;  /* topbar height */
  padding-bottom: 70px !important; /* bottom nav height */
}
/* Ensure main pages have proper spacing */
.kg-pg.active {
  padding-top: 58px !important;
  padding-bottom: 76px !important;
}
/* But chat page – different spacing */
#kg-pg-chat.active {
  padding-top: 52px !important;
  padding-bottom: 60px !important;
}

/* ── BOTTOM NAV FIX (Bug #13): No clipping on scroll up ── */
.kg-bottomnav, #kg-bottomnav {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9990 !important;
  background: var(--card, #fff) !important;
  border-top: 2px solid rgba(255,107,0,.12) !important;
  box-shadow: 0 -4px 20px rgba(0,0,0,.08) !important;
  /* Safe area for iPhone home bar */
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  /* transition allows smooth scroll-hide animation — do NOT set transition:none here */
  will-change: transform !important;
}
.kg-bnav-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 4px 6px !important;
  gap: 3px !important;
  font-size: .6rem !important;
  font-weight: 600 !important;
  color: rgba(120, 75, 15, 0.52) !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  flex: 1 !important;
  min-height: 52px !important;
  transition: color .2s !important;
}
.kg-bnav-item.active { color: var(--saffron, #FF6B00) !important; }
.kg-bnav-item i { font-size: 1.2rem !important; }
.kg-bnav-item span { font-size: .58rem !important; }

/* ── TOPBAR FIX ─────────────────────────────────────────── */
.kg-topbar, #kg-topbar {
  position: fixed !important;
  top: 0 !important;   /* admin bar ke saath override hoga neeche */
  left: 0 !important;
  right: 0 !important;
  z-index: 100000 !important; /* ✅ FIX: highest z-index, always above everything */
  height: 52px !important;
  display: flex !important;
  align-items: center !important;
  background: linear-gradient(135deg,#000000,#0a0a0a) !important;
  border-bottom: 1px solid rgba(255,107,0,.2) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.3) !important;
  padding: 0 12px !important;
}
/* Admin bar ke saath topbar neeche khisak jaaye */
body.admin-bar .kg-topbar,
body.admin-bar #kg-topbar {
  top: 32px !important;
}
@media screen and (max-width: 782px) {
  body.admin-bar .kg-topbar,
  body.admin-bar #kg-topbar {
    top: 46px !important;
  }
}
/* WP Admin Bar — hamesha dikhao (admins ke liye zaruri) */
#wpadminbar { display: block !important; position: fixed !important; top: 0 !important; z-index: 99999 !important; }
/* html margin-top WP khud set karta hai admin bar ke liye — mat hatao */
/* html { margin-top: 0 !important; } — REMOVED: ye admin bar scroll block karta tha */

/* ── PANCHANG FULL WIDTH (Bug #4) ───────────────────────── */
#kg-pg-panchang,
#kg-panchang-content,
.panchang-wrap {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
#kg-pg-panchang .form-card,
#kg-pg-panchang .tcard {
  margin-left: 10px !important;
  margin-right: 10px !important;
  max-width: calc(100% - 20px) !important;
}

/* ── CARDS RESPONSIVE — Left/Right Spacing (Bug #5) ─────── */
.form-card, .tcard, .ccard, .ere-panel {
  margin-left: 10px !important;
  margin-right: 10px !important;
  max-width: calc(100% - 20px) !important;
  box-sizing: border-box !important;
}
.rwrap, .results-wrap {
  margin-left: 6px !important;
  margin-right: 6px !important;
}
@media (min-width: 768px) {
  .form-card, .tcard, .ccard, .ere-panel {
    margin-left: 24px !important;
    margin-right: 24px !important;
    max-width: calc(100% - 48px) !important;
  }
  .rwrap, .results-wrap {
    margin-left: 20px !important;
    margin-right: 20px !important;
  }
}
@media (max-width: 400px) {
  .form-card, .tcard, .ccard {
    margin-left: 6px !important;
    margin-right: 6px !important;
    max-width: calc(100% - 12px) !important;
  }
}

/* ── KUNDALI TABS SCROLL ON MOBILE (Bug #19) ────────────── */
#chart-tabs, .chart-tabs, .ctabs-bar {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch !important;
  scroll-snap-type: x proximity !important;
  gap: 4px !important;
  padding: 6px 10px !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
#chart-tabs::-webkit-scrollbar,
.chart-tabs::-webkit-scrollbar { display: none !important; }

.ctab {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  scroll-snap-align: start !important;
  padding: 7px 12px !important;
  font-size: .75rem !important;
  border-radius: 20px !important;
  border: 1.5px solid var(--border) !important;
  background: var(--card) !important;
  color: var(--muted) !important;
  cursor: pointer !important;
  font-weight: 600 !important;
  transition: all .2s !important;
}
.ctab.active {
  background: var(--saffron, #FF6B00) !important;
  color: #fff !important;
  border-color: var(--saffron) !important;
}
@media (max-width: 480px) {
  .ctab {
    font-size: .68rem !important;
    padding: 5px 9px !important;
  }
}

/* ── CHAT INPUT — WhatsApp style (Bug #9) ───────────────── */
#kg-chat-inp, .chat-inp {
  min-height: 38px !important;
  max-height: 100px !important;
  height: 38px !important;
  padding: 8px 14px !important;
  font-size: .88rem !important;
  line-height: 1.5 !important;
  border-radius: 22px !important;
  resize: none !important;
  border: 1.5px solid rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
  flex: 1 !important;
}
#kg-chat-inp:focus { outline: none !important; border-color: rgba(37,211,102,.4) !important; }
.chat-input-bar, .chat-inp-wrap {
  padding: 8px 10px !important;
  gap: 8px !important;
  align-items: flex-end !important;
}
#kg-chat-send, .chat-send-btn {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  background: #25D366 !important;
  border: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  font-size: 1rem !important;
}



/* ── GOCHAR/YEARLY — only show when kundali loaded (Bug #16) */
#kg-more-menu .kg-needs-kundali {
  opacity: 0.35 !important;
  pointer-events: none !important;
  filter: grayscale(0.5) !important;
}
#kg-more-menu.has-kundali .kg-needs-kundali {
  opacity: 1 !important;
  pointer-events: auto !important;
  filter: none !important;
}

/* ── MODERN FONT + UI (Bug #12) ─────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

body, input, select, textarea, button {
  font-family: 'Inter', 'Noto Sans Devanagari', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}
/* Devanagari text still uses Noto */
[lang="hi"], .hi-text, .ere-panel p[lang="hi"] {
  font-family: 'Noto Sans Devanagari', 'Inter', sans-serif !important;
}

/* Boxy card design */
.form-card, .tcard, .ccard {
  border-radius: 14px !important;
  box-shadow: 0 1px 6px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.04) !important;
}
.page-header {
  border-radius: 14px !important;
}
.btn {
  border-radius: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
}
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], input[type="time"],
select, textarea {
  border-radius: 10px !important;
  font-size: 15px !important;
  padding: 10px 14px !important;
  border: 1.5px solid var(--border, #E8D5A0) !important;
  background: var(--card, #fff) !important;
  color: var(--text, #000000) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: border-color .2s, box-shadow .2s !important;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--saffron, #FF6B00) !important;
  box-shadow: 0 0 0 3px rgba(255,107,0,.1) !important;
  outline: none !important;
}

/* ── YOGAS / DOSHAS — better spacing on mobile (Bug #6) ──── */
.yoga-card, .dosha-card {
  margin-bottom: 8px !important;
  border-radius: 12px !important;
}
.yoga-list, .dosha-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
/* Dasha table — no overflow clipping */
.ere-dasha-card, .dasha-card {
  overflow: visible !important;
}
.ere-dasha-card table, .dasha-table {
  width: 100% !important;
  table-layout: auto !important;
  overflow-x: auto !important;
  display: block !important;
}

/* ── MATCHING BILINGUAL + FORM (Bug #7, #8) ─────────────── */
/* Matching form city autocomplete */
#kg-m-ac1, #kg-m-ac2 {
  position: absolute !important;
  z-index: 9000 !important;
  max-height: 220px !important;
  overflow-y: auto !important;
  background: var(--card, #fff) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.12) !important;
  width: 100% !important;
  left: 0 !important;
  top: 100% !important;
}

/* ── CHALIT CHART: show bhava madhya info ─────────────────── */
.chalit-info-bar {
  background: rgba(255,107,0,.06);
  border: 1px solid rgba(255,107,0,.15);
  border-radius: 10px;
  padding: 10px 14px;
  margin: 8px 10px;
  font-size: .78rem;
  color: var(--muted);
  line-height: 1.6;
}

/* ── AUTH MODAL — no close button when forced ────────────── */
.kg-auth-overlay[data-forced="true"] {
  pointer-events: all !important;
}
/* Coin display in topbar */
#kg-user-bar {
  gap: 5px !important;
}
#kg-user-bar img {
  flex-shrink: 0 !important;
}

/* ── MATCHING PAGE: Both kundali charts + analysis ────────── */
.match-charts-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  margin-bottom: 14px !important;
}
@media (max-width: 480px) {
  .match-charts-row {
    grid-template-columns: 1fr !important;
  }
  .match-chart-box svg {
    max-width: 200px !important;
    margin: 0 auto !important;
    display: block !important;
  }
}

/* ── RESPONSIVE: No overlap, no clip ─────────────────────── */
* { box-sizing: border-box !important; }
img, svg { max-width: 100%; height: auto; }

/* Ensure no horizontal scroll */
.kg-pg, .kg-content-wrap, .form-card, .tcard, .ere-panel {
  max-width: 100% !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

/* ── PDF EXPORT BUTTON ────────────────────────────────────── */
.kg-pdf-btn {
  background: linear-gradient(135deg, #C62828, #E53935) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 10px 18px !important;
  font-size: .84rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: all .2s !important;
}
.kg-pdf-btn:hover { opacity: .88 !important; }

/* ── DASHBOARD FULL PAGE ─────────────────────────────────── */
#kg-user-dashboard {
  animation: kgFadeIn .18s ease !important;
}
@keyframes kgFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── PANCHANG DATE PICKER ────────────────────────────────── */
#kg-panch-date-pick {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  margin: 10px 10px 0 !important;
  padding: 10px 14px !important;
  background: var(--card) !important;
  border-radius: 12px !important;
  border: 1px solid var(--border) !important;
}
#kg-panch-date-pick input[type="date"] {
  flex: 1 !important;
  min-width: 140px !important;
}
#kg-panch-date-pick button {
  flex-shrink: 0 !important;
  padding: 9px 16px !important;
  border-radius: 8px !important;
  font-size: .82rem !important;
}

/* ── SCROLL INDICATOR for tabs ───────────────────────────── */
.tabs-scroll-hint::after {
  content: '→';
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--saffron);
  font-size: .8rem;
  pointer-events: none;
  animation: fadeHint 2s ease infinite;
}
@keyframes fadeHint {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}



/* ══════════════════════════════════════════════════════════
   CHAT ACTIVE MODE — Correct Behaviour
   • Header (kg-topbar) → VISIBLE
   • Footer (kg-bottomnav) → VISIBLE
   • General / Kundali / Matching tabs → HIDDEN
   • ai-mode-bar (switcher row) → HIDDEN
   • page-header → HIDDEN
   ══════════════════════════════════════════════════════════ */
#kg-pg-chat.chat-active .chat-mode-tabs,
#kg-pg-chat.chat-active .ai-mode-bar,
#kg-pg-chat.chat-active #kg-mode-panel-kundali,
#kg-pg-chat.chat-active #kg-mode-panel-match,
#kg-pg-chat.chat-active .page-header {
  display: none !important;
}

/* chat-wrap fills space between topbar (52px) and bottomnav (60px) */
#kg-pg-chat.chat-active .chat-wrap {
  height: calc(100vh - 52px - 60px) !important;
  min-height: 300px !important;
  border-radius: 0 !important;
}

/* Desktop: bottomnav is hidden, so chat-wrap goes to bottom of screen */
@media (min-width: 769px) {
  #kg-pg-chat.chat-active .chat-wrap {
    height: calc(100vh - 52px - 20px) !important;
  }
}

/* Mobile */
@media (max-width: 480px) {
  #kg-pg-chat.chat-active .chat-wrap {
    height: calc(100vh - 52px - 56px) !important;
  }
}

#kg-pg-chat.chat-active .chat-messages,
#kg-pg-chat.chat-active #kg-chat-msgs {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  flex: 1 !important;
}
#kg-pg-chat.chat-active .chat-input-bar {
  position: sticky !important;
  bottom: 0 !important;
}

/* ══════════════════════════════════════════════════════════
   Dashboard full-page scroll
   ══════════════════════════════════════════════════════════ */
#kg-user-dashboard {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}
#kg-dash-content {
  padding-bottom: 80px !important;
}

/* ══════════════════════════════════════════════════════════
   FIX: Dasha/Antardasha table — readable on brown background
   ══════════════════════════════════════════════════════════ */
/* Override inline brown backgrounds in dasha rows */
.kg-antardasha-body > tr > td,
.kg-dasha-table td,
.kg-dasha-row td {
  background: var(--card, #fff) !important;
  color: var(--text, #000000) !important;
}
/* Any table inside a brown-background container */
[style*="background:#3D1500"] table td,
[style*="background:#4A1500"] table td,
[style*="background:#2D0A00"] table td,
[style*="background:#000000"] table td {
  color: var(--text, #000000) !important;
}
/* Dasha section table headers */
.kg-dasha-table th,
table.dasha-table th {
  background: linear-gradient(135deg,#3D1500,#7B2D00) !important;
  color: #FFD580 !important;
  font-weight: 700 !important;
  padding: 8px 12px !important;
}
/* Alternating row tint */
.kg-dasha-table tr:nth-child(even) td {
  background: rgba(255,107,0,.04) !important;
}

/* ══════════════════════════════════════════════════════════
   BATCH-1 FIX: Complete Dasha Table Redesign
   ══════════════════════════════════════════════════════════ */
/* Wrap the dasha section in a clean card */
.kg-dasha-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .82rem;
  background: var(--card, #fff) !important;
  border-radius: 10px;
  overflow: hidden;
}
.kg-dasha-table thead tr {
  background: linear-gradient(135deg, var(--saffron, #FF6B00), #D4500A) !important;
}
.kg-dasha-table th {
  background: transparent !important;
  color: #fff !important;
  font-weight: 700 !important;
  padding: 9px 12px !important;
  text-align: left;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  border: none !important;
}
.kg-dasha-table td {
  background: var(--card, #fff) !important;
  color: var(--text, #000000) !important;
  padding: 8px 12px !important;
  border-bottom: 1px solid var(--border, rgba(0,0,0,.07)) !important;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
}
.kg-dasha-table tr:nth-child(even) td {
  background: var(--bg2, rgba(255,107,0,.03)) !important;
}
.kg-dasha-table tr.kg-dasha-active td,
.kg-dasha-table tr[style*="background:rgba(255,107,0"] td {
  background: rgba(255, 107, 0, .08) !important;
  font-weight: 700;
}
.kg-dasha-table tr:hover td {
  background: rgba(255, 107, 0, .05) !important;
}
/* Active row indicator */
.kg-dasha-table td:first-child {
  font-weight: 600;
}

/* Antardasha nested table */
.kg-dasha-table table,
.kg-dasha-table .ant-table {
  margin: 4px 0 4px 16px;
  font-size: .76rem;
  background: var(--bg2, #f9f5f0) !important;
  border-radius: 6px;
  overflow: hidden;
}
.kg-dasha-table table th {
  background: rgba(255,107,0,.12) !important;
  color: var(--saffron, #FF6B00) !important;
  padding: 5px 10px !important;
  font-size: .72rem !important;
}
.kg-dasha-table table td {
  padding: 5px 10px !important;
  background: transparent !important;
  border-bottom: 1px solid var(--border, rgba(0,0,0,.05)) !important;
}

/* ── Chat Full-Page: hide topbar tabs when chat is active ── */
#kg-pg-chat.active ~ #kg-bottomnav .nav-item:not([data-page="chat"]),
body.kg-chat-fullpage .kg-topbar,
body.kg-chat-fullpage .kg-bottomnav,
html.kg-chat-fullpage .kg-topbar,
html.kg-chat-fullpage .kg-bottomnav {
  display: none !important;
}
#kg-pg-chat.active {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  /* position:fixed aur overflow:hidden hataya — yahi page scroll block karta tha */
  position: relative !important;
  z-index: 1 !important;
  overflow: visible !important;
}

/* ── Form Responsiveness Fixes ── */
/* DOB input minimum touch target */
input[type="date"],
input[type="number"],
input[type="text"],
input[type="email"],
input[type="password"],
select {
  min-height: 44px;
  font-size: 16px !important; /* Prevents iOS zoom */
}
/* AM/PM button touch target */
#kg-ap-am, #kg-ap-pm,
#kg-m-ap1-am, #kg-m-ap1-pm,
#kg-m-ap2-am, #kg-m-ap2-pm {
  min-height: 44px;
  min-width: 48px;
  touch-action: manipulation;
}
/* Time input row wrap on very small screens */
@media (max-width: 380px) {
  .tob-row {
    flex-wrap: wrap;
    gap: 8px !important;
  }
  .tob-row input[type="number"] {
    width: 56px !important;
  }
}
/* Matching form: stack columns on mobile */
@media (max-width: 520px) {
  #kg-mode-panel-match > div > div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── Language Switcher Fix ── */
/* Ensure analysis sections re-render on lang change */
.kg-lang-pending { opacity: 0.5; pointer-events: none; transition: opacity .2s; }

/* ══════════════════════════════════════════════════════════
   SCROLL FIX — Dashboard + Frontend + All Pages
   Version: scroll-fix-v1.0
   ══════════════════════════════════════════════════════════ */

/* 1. html aur body — kabhi overflow lock mat karo */
html, body {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  height: auto !important;
  min-height: 100vh;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
}

/* 2. Main app wrapper — scroll allow karo */
#kg-app, .kg-app {
  overflow: visible !important;
  height: auto !important;
  min-height: 100vh !important;
  touch-action: pan-y !important;
}

/* 3. Har page container scrollable hona chahiye */
.kg-pg,
[id^="kg-pg-"] {
  overflow: visible !important;
  height: auto !important;
  min-height: 0 !important;
  touch-action: pan-y !important;
}

/* 4. Chat page — sirf chat-messages box scroll karega, pura page nahi */
#kg-pg-chat,
#kg-pg-chat.active {
  position: relative !important;
  overflow: visible !important;
  z-index: 1 !important;
  inset: unset !important;
}

/* 5. Chat wrap — internal scroll theek rakho */
.chat-wrap,
#kg-chat-wrap,
.ai-chat-wrap {
  overflow: hidden !important; /* sirf chat box ke andar */
  /* page-level scroll pe koi effect nahi */
}

/* 6. WordPress Dashboard — admin bar ke saath scroll */
body.wp-admin,
body.admin-bar {
  overflow-y: auto !important;
  height: auto !important;
}

/* 7. Mobile touch scroll — iOS Safari fix */
* {
  -webkit-overflow-scrolling: touch;
}

/* 8. Modal open hone par bhi body scroll band nahi */
body.modal-open,
body.kg-modal-open,
body.kg-chat-fullpage {
  overflow-y: auto !important;
  position: static !important;
}

/* 9. Frontend pages — kundali page wrapper */
.kg-standalone,
.kg-frontend-wrap,
.kundali-page-wrap {
  overflow: visible !important;
  height: auto !important;
}

/* 10. Bottomnav fixed rehne par bhi page scroll band na ho */
.kg-bottomnav,
#kg-bottomnav {
  /* fixed position — ye theek hai, page scroll affect nahi karta */
  /* touch-action: none removed — was blocking all clicks on nav buttons */
}

/* 11. Topbar fixed rehne par bhi page scroll band na ho */
.kg-topbar,
#kg-topbar {
  /* touch-action: none removed — was blocking hamburger and all topbar clicks */
}

/* 12. Scroll ko block karne wale common patterns */
div[style*="overflow: hidden"][style*="height: 100vh"],
div[style*="overflow:hidden"][style*="height:100vh"] {
  overflow: visible !important;
  height: auto !important;
}

/* ══════════════════════════════════════════════════════════
   MASTER SCROLL FIX v2 — Scroll Bilkul Sahi Karo
   Mouse scroll, Touchpad scroll, Touch scroll — sab fix
   ══════════════════════════════════════════════════════════ */

/* Step 1: html aur body — sabse zaroori */
html {
  overflow-y: scroll !important;      /* hamesha scrollbar dikhao */
  overflow-x: hidden !important;
  height: auto !important;
  min-height: 100% !important;
  /* WP admin bar ke liye margin-top WP khud handle karta hai */
  overscroll-behavior: auto !important;
}

body {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  height: auto !important;
  min-height: 100vh !important;
  position: static !important;       /* koi fixed/relative position nahi */
  overscroll-behavior-y: auto !important; /* pull-to-refresh wala hack hatao */
  touch-action: pan-y !important;    /* mouse + touchpad + touch — sab scroll */
  -webkit-overflow-scrolling: touch !important;
}

/* Step 2: App wrapper — scroll wrapper nahi, sirf container */
#kg-app,
.kg-app {
  overflow: visible !important;
  height: auto !important;
  min-height: 100vh !important;
  position: relative !important;
  touch-action: pan-y !important;
}

/* Step 3: Har page visible hona chahiye */
.kg-pg,
[id^="kg-pg-"] {
  overflow: visible !important;
  height: auto !important;
  min-height: 0 !important;
  position: relative !important;
}

/* Step 4: Chat page specific — fixed mat rakho */
#kg-pg-chat,
#kg-pg-chat.active {
  position: relative !important;
  inset: unset !important;
  overflow: visible !important;
  z-index: 1 !important;
  height: auto !important;
}

/* Step 5: WP Admin Bar — proper display */
#wpadminbar {
  display: block !important;
  position: fixed !important;
  top: 0 !important;
  z-index: 99999 !important;
}

/* Step 6: Admin bar ke saath topbar aur content adjust karo */
body.admin-bar .kg-topbar,
body.admin-bar #kg-topbar {
  top: 32px !important;
}
@media screen and (max-width: 782px) {
  body.admin-bar .kg-topbar,
  body.admin-bar #kg-topbar {
    top: 46px !important;
  }
}
body.admin-bar .kg-app,
body.admin-bar #kg-app {
  padding-top: 84px !important; /* 32px admin + 52px topbar */
}
@media screen and (max-width: 782px) {
  body.admin-bar .kg-app,
  body.admin-bar #kg-app {
    padding-top: 98px !important; /* 46px admin + 52px topbar */
  }
}

/* Step 7: Modal/overlay open hone par bhi body scroll band nahi */
body.kg-chat-fullpage,
body.modal-open,
body.kg-modal-open {
  overflow-y: auto !important;
  position: static !important;
  height: auto !important;
}

/* Step 8: touch-action — nav bars par tap/click block nahi hona chahiye */
.kg-bottomnav,
#kg-bottomnav {
  touch-action: manipulation !important; /* tap/click allow, unwanted gestures block */
}
.kg-topbar,
#kg-topbar {
  touch-action: auto !important; /* topbar pe sab allow */
}

/* Step 9: Kisi bhi !important overflow:hidden ko undo karo on scroll containers */
body > *:not(#wpadminbar):not(.kg-topbar):not(#kg-topbar):not(.kg-bottomnav):not(#kg-bottomnav):not(script):not(style) {
  max-height: none !important;
}

/* ══════════════════════════════════════════════════════════════
   FINAL MASTER FIX — v3.0
   Scroll (Mouse/Trackpad/Touch) + Mobile Tabs + WP Admin Bar
   ══════════════════════════════════════════════════════════════ */

/* ── 1. HTML & BODY: Scroll fully unlocked ─────────────────── */
html {
  overflow-y: scroll !important;
  overflow-x: hidden !important;
  height: auto !important;
  min-height: 100% !important;
  overscroll-behavior: auto !important;
  /* WP admin bar: margin-top WP khud set karta hai — mat override karo */
}
body {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  height: auto !important;
  min-height: 100vh !important;
  position: static !important;
  overscroll-behavior-y: auto !important;   /* mouse/trackpad scroll unblock */
  touch-action: pan-y !important;           /* touch + trackpad scroll allow */
  -webkit-overflow-scrolling: touch !important;
}

/* ── 2. App & Page Wrappers: never lock scroll ──────────────── */
#kg-app, .kg-app {
  overflow: visible !important;
  height: auto !important;
  min-height: 100vh !important;
  position: relative !important;
  touch-action: pan-y !important;
}
.kg-pg, [id^="kg-pg-"] {
  overflow: visible !important;
  height: auto !important;
  position: relative !important;
}

/* ── 3. Chat Page: relative, not fixed ─────────────────────── */
#kg-pg-chat,
#kg-pg-chat.active {
  position: relative !important;
  inset: unset !important;
  overflow: visible !important;
  height: auto !important;
  z-index: 1 !important;
}

/* ── 4. Modal open: body still scrolls ─────────────────────── */
body.kg-chat-fullpage,
body.modal-open,
body.kg-modal-open {
  overflow-y: auto !important;
  position: static !important;
  height: auto !important;
}

/* ── 5. WP Admin Bar: always visible ───────────────────────── */
#wpadminbar {
  display: block !important;
  position: fixed !important;
  top: 0 !important;
  z-index: 99999 !important;
}

/* ── 6. Topbar: offset below admin bar ─────────────────────── */
.kg-topbar, #kg-topbar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9995 !important;
}
body.admin-bar .kg-topbar,
body.admin-bar #kg-topbar {
  top: 32px !important;   /* desktop: admin bar 32px */
}
@media screen and (max-width: 782px) {
  body.admin-bar .kg-topbar,
  body.admin-bar #kg-topbar {
    top: 46px !important; /* mobile: admin bar 46px */
  }
}

/* ── 7. Content offset with admin bar ──────────────────────── */
body.admin-bar #kg-app,
body.admin-bar .kg-app {
  padding-top: 84px !important;  /* 32px admin + 52px topbar */
}
@media screen and (max-width: 782px) {
  body.admin-bar #kg-app,
  body.admin-bar .kg-app {
    padding-top: 98px !important; /* 46px admin + 52px topbar */
  }
}

/* ── 8. Bottom nav: horizontal pan only (hamburger is in topbar, not bottomnav) ── */
/* NOTE: kg-topbar is intentionally EXCLUDED here — pan-x was blocking hamburger clicks */
.kg-bottomnav, #kg-bottomnav {
  touch-action: pan-x !important;
}

/* ── 9. MOBILE TABS: horizontal scroll ─────────────────────── */
/* ctrl-bar mobile par column banta hai — tabs ko full width do */
.ctrl-bar {
  overflow: visible !important;
}
@media (max-width: 768px) {
  .ctrl-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
    padding: 8px 10px !important;
  }
}

/* chart-tabs: horizontal scroll on all screen sizes */
#chart-tabs,
.chart-tabs,
#kg-chart-tabs,
.ctabs-bar {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch !important;
  scroll-snap-type: x proximity !important;
  gap: 6px !important;
  padding: 6px 10px !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
#chart-tabs::-webkit-scrollbar,
.chart-tabs::-webkit-scrollbar,
#kg-chart-tabs::-webkit-scrollbar,
.ctabs-bar::-webkit-scrollbar {
  display: none !important;
}

/* ctab: shrink nahi hoga, horizontal scroll karega */
.ctab {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  scroll-snap-align: start !important;
  min-width: max-content !important;
}
@media (max-width: 480px) {
  .ctab {
    font-size: .68rem !important;
    padding: 5px 9px !important;
  }
}
@media (max-width: 360px) {
  .ctab {
    font-size: .62rem !important;
    padding: 4px 7px !important;
  }
}

/* ── 10. WP Admin bar scrollable fix ───────────────────────── */
body.wp-admin,
body.admin-bar {
  overflow-y: auto !important;
  height: auto !important;
}


/* ══════════════════════════════════════════════════════════
   CHAT FULL-PAGE MODE — Hide all chrome except chat window
   ══════════════════════════════════════════════════════════ */

/* Hide page-header, mode-switcher bar, mode panels, suggestion chips
   when body has kg-chat-fullpage class (set by kgShowPage in app.js) */
body.kg-chat-fullpage .kg-chat-meta-ui,
body.kg-chat-fullpage #kg-pg-chat .page-header,
body.kg-chat-fullpage #kg-pg-chat > [style*="display:flex"][style*="border:1px solid rgba(255,107,0"],
body.kg-chat-fullpage #kg-mode-panel-general,
body.kg-chat-fullpage #kg-mode-panel-kundali,
body.kg-chat-fullpage #kg-mode-panel-match,
body.kg-chat-fullpage .kg-use-btn,
body.kg-chat-fullpage [class*="kg-use-btn"] {
  display: none !important;
}

/* Chat wrap: expand to fill full viewport in fullpage mode — below topbar */
body.kg-chat-fullpage #kg-pg-chat {
  padding: 0 !important;
  margin: 0 !important;
}
/* .kgc is now fixed-positioned itself — chat-wrap just needs to not interfere */
body.kg-chat-fullpage .chat-wrap,
body.kg-chat-fullpage #kg-chat-wrap {
  height: auto !important;
  max-height: none !important;
  border-radius: 0 !important;
  position: static !important;
  z-index: auto !important;
  overflow: visible !important;
}

/* Back button — hidden, header stays visible in chat mode */
#kg-chat-back-btn {
  display: none !important;
}

/* kgc-back-btn: back arrow inside chat topbar (before 3 bars) */
.kgc-back-btn {
  background: rgba(255,255,255,.04) !important;
  color: #ccc !important;
}
.kgc-back-btn:hover {
  background: rgba(255,255,255,.1) !important;
  color: #fff !important;
}

/* kg-topbar-chat-back: hidden since back is now inside chat area */
.kg-topbar-chat-back {
  display: none !important;
}
/* ── Chat Mode Topbar — hamburger always visible, back button hidden ── */
body.kg-chat-fullpage .kg-topbar .kg-hamburger {
  display: flex !important;
}
body.kg-chat-fullpage .kg-topbar .kg-topbar-chat-back {
  display: none !important;
}
.kg-topbar-chat-back {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text, #000000);
  font-size: 1.1rem;
  border-radius: 10px;
  flex-shrink: 0;
  padding: 0;
  transition: background .15s;
}
.kg-topbar-chat-back:hover {
  background: rgba(0,0,0,.06);
}
body.kg-chat-fullpage .kg-app,
body.kg-chat-fullpage #kg-app {
  padding-bottom: 0 !important;
}

/* ── DOB Input — consistent sizing with other fields ── */
#kg-dob,
#kg-m-dob1,
#kg-m-dob2,
#kg-ai-dob {
  width: 100% !important;
  box-sizing: border-box !important;
  display: block !important;
}

/* ── AM/PM Buttons — always visible, never clipped ── */
.tob-row {
  flex-wrap: nowrap !important;
  overflow: visible !important;
}
.tob-row > div:last-of-type {
  flex-shrink: 0 !important;
  overflow: visible !important;
}
#kg-ap-am, #kg-ap-pm,
#kg-m-ap1-am, #kg-m-ap1-pm,
#kg-m-ap2-am, #kg-m-ap2-pm {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  min-width: 46px !important;
  min-height: 44px !important;
  visibility: visible !important;
  opacity: 1 !important;
}
/* Desktop: ensure AM/PM row does not overflow */
@media (min-width: 641px) {
  .tob-row {
    overflow: visible !important;
  }
  .form-grid .tob-row {
    flex-wrap: nowrap !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   KUNDALI ENGINE v5.3 — FIXES & ENHANCEMENTS
   ═══════════════════════════════════════════════════════════ */

/* ── 1. White Space Fix — Content Area ── */
/* Remove redundant top/bottom padding that was causing white gaps */
.kg-app {
  /* App ko hi topbar + bottomnav ke beech fit karo */
  padding-top: 52px !important;    /* topbar exact height */
  padding-bottom: 52px !important; /* FIX v7.5.6: bottomnav exact height */
  box-sizing: border-box !important;
  overflow: hidden !important;
}
.kg-pg.active {
  padding-top: 0 !important;   /* .kg-app already compensates */
  padding-bottom: 0 !important;
  min-height: calc(100vh - 52px - 64px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#kg-pg-chat.active {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* Remove extra spacing from first form-card in pages */
.kg-pg .form-card:first-child {
  margin-top: 0 !important;
}
/* Thin page header — compact, no wasteful padding */
.page-header {
  padding: 12px 16px !important;
}

/* ── 2. Mobile Header — Account Icon always visible ── */
/* Ensure kg-topbar-right is never clipped or hidden on mobile */
.kg-topbar-right {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  flex-shrink: 0 !important;
  overflow: visible !important;
}
/* User bar on mobile: compact but complete */
#kg-user-bar {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  position: relative !important;
}
/* Coins badge on small screens — shrink label */
@media(max-width: 400px) {
  #kg-user-bar .kg-coins-badge span:last-child { display: none; }
  #kg-user-bar .kg-name-pill .kg-user-name { max-width: 48px !important; }
}
/* Dropdown must always appear above everything on mobile */
#kg-user-dropdown {
  z-index: 2147483647 !important;
  right: 0 !important;
  left: auto !important;
}

/* ── 3. Login/Signup buttons on mobile — no overflow ── */
#kg-login-btn, .kg-user-bar-logged-out a {
  white-space: nowrap !important;
  font-size: .7rem !important;
}
@media(max-width: 380px) {
  .kg-topbar-right > .kg-tb-btn { display: none !important; }
  /* Show only account icon + lang button on very small screens */
  #kg-topbar .kg-tb-btn:not(#kg-langbtn) { display: none !important; }
}

/* ── 4. Auth Styles Sync — Widget + Pages same look ── */
/* Spinner animation used in auth forms */
@keyframes kgSpin { to { transform: rotate(360deg); } }

/* ── 5. Wallet Recharge Page ── */
.kg-wallet-page .form-card { border-radius: 16px; }

/* ── 6. Coin gate notice — smooth transition ── */
.kg-coin-gate-notice {
  background: linear-gradient(135deg, rgba(198,40,40,.08), rgba(198,40,40,.04));
  border: 1px solid rgba(198,40,40,.2);
  border-radius: 12px;
  padding: 14px 16px;
  text-align: center;
  font-size: .85rem;
  color: #C62828;
  font-weight: 600;
  animation: kgSlideUp .3s ease;
}

/* ═══════════════════════════════════════════════════════════
   v5.4 — Responsive Yog/AI Summary + Chart Bilingual Fixes
   ═══════════════════════════════════════════════════════════ */

/* ── Result Head — fully responsive on mobile ── */
.res-head {
  flex-wrap: wrap !important;
  gap: 10px !important;
}
.res-head > div:first-child {
  flex: 1 1 200px;
  min-width: 0;
}
.res-head > div:last-child {
  flex-wrap: wrap !important;
  gap: 6px !important;
  justify-content: flex-end;
}

/* ── rbadge — allow wrapping on mobile, truncate if needed ── */
.rbadge {
  white-space: normal !important;    /* allow wrap */
  word-break: break-word;
  max-width: 100%;
  line-height: 1.4;
}
.res-badges {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  margin-top: 8px !important;
  align-items: flex-start !important;
}

/* ── Action buttons in result head — don't overflow ── */
.res-head .btn {
  flex-shrink: 0;
  white-space: nowrap;
}
@media (max-width: 480px) {
  .res-head > div:last-child {
    width: 100% !important;
    justify-content: flex-start !important;
  }
  .res-head .btn {
    font-size: .68rem !important;
    padding: 6px 10px !important;
  }
  /* Result name truncate */
  .res-name {
    font-size: .95rem !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }
  /* Yoga/Dosha badges compact */
  .rbadge {
    font-size: .66rem !important;
    padding: 2px 7px !important;
  }
}

/* ── Yoga grid responsive ── */
.yoga-grid, #kg-yoga-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
  gap: 8px !important;
}
@media (max-width: 420px) {
  .yoga-grid, #kg-yoga-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── ERE panel — full width on mobile ── */
#kg-ere-d1-panel, [id^="kg-ere-"] {
  overflow-x: hidden;
}
.ere-section {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ── Chart SVG — always fit container ── */
.csvg, svg.csvg {
  width: 100% !important;
  height: auto !important;
  max-width: 440px;
}
.ccard {
  overflow: hidden;
}

/* ══════════════════════════════════════════════════════════
   CHAT FULL-SIZE — Remove all whitespace, fill available area
   Mobile + Desktop. This block OVERRIDES everything above.
   ══════════════════════════════════════════════════════════ */

/* 1. Chat page panel — zero padding, zero margin, fill height */
#kg-pg-chat,
#kg-pg-chat.active {
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  /* fill space between topbar (52px) and bottomnav (64px) */
  height: calc(100dvh - 52px - 64px) !important;
  min-height: 0 !important;
  overflow: hidden !important;
  position: relative !important;
  inset: unset !important;
  z-index: 1 !important;
}

/* Desktop: no bottom nav */
@media (min-width: 900px) {
  #kg-pg-chat,
  #kg-pg-chat.active {
    height: calc(100dvh - 56px) !important;
  }
}

/* Admin bar offsets */
body.admin-bar #kg-pg-chat,
body.admin-bar #kg-pg-chat.active {
  height: calc(100dvh - 52px - 64px - 32px) !important;
}
@media (max-width: 782px) {
  body.admin-bar #kg-pg-chat,
  body.admin-bar #kg-pg-chat.active {
    height: calc(100dvh - 52px - 64px - 46px) !important;
  }
}
@media (min-width: 900px) {
  body.admin-bar #kg-pg-chat,
  body.admin-bar #kg-pg-chat.active {
    height: calc(100dvh - 56px - 32px) !important;
  }
}

/* 2. chat-wrap fills the entire #kg-pg-chat panel */
#kg-pg-chat .chat-wrap,
#kg-pg-chat #kg-chat-wrap {
  flex: 1 !important;
  height: 100% !important;
  max-height: none !important;
  min-height: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  position: relative !important;
  inset: unset !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

/* 3. Messages area — flex-grow to fill remaining space */
#kg-pg-chat .chat-messages,
#kg-pg-chat #chat-msgs,
#kg-pg-chat #kg-chat-msgs {
  flex: 1 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* 4. Input bar — always at bottom, no shrink */
#kg-pg-chat .chat-input-area,
#kg-pg-chat .chat-input-bar,
#kg-pg-chat #kg-chat-input-area {
  flex-shrink: 0 !important;
}

/* 5. Hide page-header inside chat (wastes vertical space) */
#kg-pg-chat .page-header {
  display: none !important;
}

/* 6. kg-app — ensure it doesn't add extra bottom padding on chat */
.kg-app:has(#kg-pg-chat.active) {
  overflow: hidden !important;
}

/* ══════════════════════════════════════════════════════════
   CHAT FULL-SIZE — Always fill available space (Mobile + Desktop)
   Overrides the fixed height:560px from frontend.php inline
════════════════════════════════════════════════════════════ */
/* kgc is now fixed-positioned — chat-wrap height rules not needed */
#kg-chat-wrap,
.chat-wrap {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

/* Mobile: same */
@media (max-width: 768px) {
  #kg-chat-wrap,
  .chat-wrap {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    border-radius: 0 !important;
  }
}

/* AI Mode selector pills in chat header */
.kg-ai-persona-bar {
  display: flex;
  gap: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border-top: 1px solid rgba(37,211,102,.12);
  background: #0d2218;
  flex-shrink: 0;
}
.kg-ai-persona-bar::-webkit-scrollbar { display: none; }
.kg-ai-persona-btn {
  flex-shrink: 0;
  padding: 7px 12px;
  border: none;
  background: transparent;
  color: rgba(232,245,233,.5);
  font-size: .72rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: all .2s;
  border-bottom: 2px solid transparent;
}
.kg-ai-persona-btn.active {
  color: #25D366;
  border-bottom-color: #25D366;
  background: rgba(37,211,102,.08);
}
.kg-ai-persona-btn:hover {
  color: #81C784;
  background: rgba(37,211,102,.05);
}

/* New Chat button in header */
.kg-new-chat-btn {
  background: rgba(255,255,255,.12);
  border: none;
  border-radius: 8px;
  padding: 6px 8px;
  cursor: pointer;
  font-size: .78rem;
  color: #E8F5E9;
  transition: all .2s;
}
.kg-new-chat-btn:hover { background: rgba(37,211,102,.25); }

/* Chat history panel — better styling */
#kg-chat-history-panel {
  scrollbar-width: thin;
  scrollbar-color: #25D36640 transparent;
}
#kg-chat-history-panel .kg-chat-hist-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  cursor: pointer;
  transition: background .15s;
}
#kg-chat-history-panel .kg-chat-hist-item:hover {
  background: rgba(37,211,102,.08);
}

/* Named chart badges in context bar */
.kg-ctx-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: .66rem;
  background: rgba(37,211,102,.15);
  border: 1px solid rgba(37,211,102,.3);
  border-radius: 12px;
  padding: 2px 8px;
  color: #4CAF50;
  margin-left: 4px;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════
   KUNDALI ENGINE — NOTIFICATION SYSTEM STYLES
   Bell | Dropdown | Push Prompt | Toast
   ═══════════════════════════════════════════════════════════ */

/* ── Notification Bell Wrapper ─────────────────────────────── */
.kg-notif-bell-wrap {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9990;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.kg-notif-bell {
  position: relative;
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, #1e1535, #2a1f4a);
  border: 2px solid rgba(200,151,58,.5);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c8973a;
  box-shadow: 0 4px 20px rgba(0,0,0,.4), 0 0 0 0 rgba(200,151,58,0);
  transition: all .3s ease;
  outline: none;
}
.kg-notif-bell:hover {
  border-color: #c8973a;
  transform: scale(1.08);
  box-shadow: 0 6px 24px rgba(0,0,0,.5), 0 0 16px rgba(200,151,58,.3);
}
.kg-notif-bell.kg-push-active {
  border-color: #4CAF50;
  color: #4CAF50;
}
/* Bell shake animation when new notif arrives */
@keyframes kg-bell-shake {
  0%,100%{transform:rotate(0)}
  10%,30%,50%,70%,90%{transform:rotate(-8deg)}
  20%,40%,60%,80%{transform:rotate(8deg)}
}
.kg-notif-bell.kg-bell-shake {
  animation: kg-bell-shake .6s ease;
}

/* ── Unread Badge ───────────────────────────────────────────── */
.kg-notif-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  background: #e53935;
  color: #fff;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 2px solid #0d0a1e;
  line-height: 1;
}

/* ── Dropdown Panel ─────────────────────────────────────────── */
.kg-notif-dropdown {
  position: fixed;
  bottom: calc(86px + env(safe-area-inset-bottom, 0px));
  right: 24px;
  width: 340px;
  max-width: calc(100vw - 32px);
  background: linear-gradient(180deg, #16112a 0%, #0d0a1e 100%);
  border: 1px solid rgba(200,151,58,.3);
  border-radius: 14px;
  box-shadow: 0 16px 48px rgba(0,0,0,.7);
  z-index: 9989;
  overflow: hidden;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  animation: kg-dropdown-in .2s ease;
}
@keyframes kg-dropdown-in {
  from { opacity:0; transform:translateY(12px) scale(.97); }
  to   { opacity:1; transform:translateY(0)    scale(1);   }
}

.kg-notif-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 12px;
  border-bottom: 1px solid rgba(200,151,58,.15);
  font-weight: 700;
  font-size: 14px;
  color: #c8973a;
  flex-shrink: 0;
}
.kg-notif-mark-all {
  background: none;
  border: 1px solid rgba(200,151,58,.3);
  color: rgba(200,151,58,.7);
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: all .2s;
}
.kg-notif-mark-all:hover {
  background: rgba(200,151,58,.1);
  color: #c8973a;
}

.kg-notif-list {
  overflow-y: auto;
  flex: 1;
  scrollbar-width: thin;
  scrollbar-color: rgba(200,151,58,.2) transparent;
}
.kg-notif-empty {
  padding: 32px 16px;
  text-align: center;
  color: rgba(255,255,255,.3);
  font-size: 13px;
}

/* ── Notification Item ──────────────────────────────────────── */
.kg-notif-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,.05);
  cursor: pointer;
  transition: background .15s;
  position: relative;
}
.kg-notif-item:hover { background: rgba(200,151,58,.06); }
.kg-notif-item:last-child { border-bottom: none; }
.kg-notif-unread { background: rgba(200,151,58,.04); }

.kg-notif-item-icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}
.kg-notif-item-body { flex: 1; min-width: 0; }
.kg-notif-item-title {
  font-weight: 600;
  font-size: 13px;
  color: #ffffff;
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kg-notif-item-msg {
  font-size: 12px;
  color: rgba(255,255,255,.55);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.kg-notif-item-time {
  font-size: 11px;
  color: rgba(200,151,58,.5);
  margin-top: 4px;
}
.kg-notif-unread-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c8973a;
  flex-shrink: 0;
  margin-top: 6px;
}

/* ── Push Permission Prompt ─────────────────────────────────── */
/* ── Native-style Push Permission Bar ───────────────────────────────────
   No overlay, no card. A slim bottom bar — user clicks → browser native prompt.
   ──────────────────────────────────────────────────────────────────────── */
.kg-push-prompt {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99999;
  display: flex;                 /* keep flex so JS can toggle display:flex/none */
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  background: #1a1230;
  border-top: 1px solid rgba(200,151,58,.35);
  box-shadow: 0 -4px 24px rgba(0,0,0,.55);
  transform: translateY(100%);   /* hidden below screen */
  opacity: 0;
  pointer-events: none;
  transition: transform .35s cubic-bezier(.25,.8,.25,1), opacity .35s ease;
  flex-wrap: wrap;
}
.kg-push-prompt.kg-push-prompt-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* Left side: icon + text */
.kg-push-prompt-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.kg-push-prompt-icon {
  font-size: 22px;
  flex-shrink: 0;
  line-height: 1;
}
.kg-push-prompt-text {
  min-width: 0;
}
.kg-push-prompt-text strong {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: #f0c040;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kg-push-prompt-text span {
  display: block;
  font-size: 11.5px;
  color: rgba(255,255,255,.5);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Right side: buttons */
.kg-push-prompt-btns {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.kg-push-allow-btn {
  background: linear-gradient(135deg, #c8973a, #a8771f);
  color: #0d0a1e;
  border: none;
  border-radius: 8px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  transition: box-shadow .2s, transform .15s;
  letter-spacing: .2px;
}
.kg-push-allow-btn:hover {
  box-shadow: 0 4px 16px rgba(200,151,58,.45);
  transform: translateY(-1px);
}
.kg-push-deny-btn {
  background: none;
  border: none;
  color: rgba(255,255,255,.35);
  font-size: 20px;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
  transition: color .2s;
  flex-shrink: 0;
}
.kg-push-deny-btn:hover { color: rgba(255,255,255,.65); }

/* Mobile: stack vertically */
@media (max-width: 480px) {
  .kg-push-prompt {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px 18px;
  }
  .kg-push-prompt-btns { width: 100%; }
  .kg-push-allow-btn   { flex: 1; text-align: center; }
}

/* ── Toast Notification ─────────────────────────────────────── */
#kg-toast {
  position: fixed;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #1e1535;
  border: 1px solid rgba(200,151,58,.4);
  color: #ffffff;
  padding: 11px 22px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 500;
  z-index: 99998;
  opacity: 0;
  pointer-events: none;
  transition: all .3s ease;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
#kg-toast.kg-toast-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
#kg-toast.kg-toast-success { border-color: rgba(76,175,80,.5); }
#kg-toast.kg-toast-warning { border-color: rgba(255,152,0,.5); }
#kg-toast.kg-toast-error   { border-color: rgba(229,57,53,.5); }

/* ── Mobile Adjustments ─────────────────────────────────────── */
@media (max-width: 480px) {
  .kg-notif-bell-wrap { bottom: 16px; right: 16px; }
  .kg-notif-dropdown  { right: 16px; bottom: 78px; width: calc(100vw - 32px); }
  .kg-push-prompt-inner { padding: 28px 20px; }
}

/* ══════════════════════════════════════════════════════════════
   ASTROVEDIC NEW HEADER — Hamburger + Logo + Coins + Notif + Search
   ══════════════════════════════════════════════════════════════ */

/* ── Override topbar with saffron gradient ── */
.kg-topbar, #kg-topbar {
  background: linear-gradient(135deg, #E65100 0%, #FF6B00 40%, #FF8C00 100%) !important;
  box-shadow: 0 2px 16px rgba(230,81,0,.4) !important;
  height: 56px !important;
  padding: 0 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* ── Hamburger Button ── */
.kg-hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 38px;
  height: 38px;
  background: rgba(255,255,255,.15);
  border: 1.5px solid rgba(255,255,255,.3);
  border-radius: 10px;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background .2s, transform .2s;
}
.kg-hamburger:hover, .kg-hamburger:active { background: rgba(255,255,255,.28); transform: scale(1.05); }
.kg-ham-line {
  display: block;
  width: 18px;
  height: 2.5px;
  background: #fff;
  border-radius: 3px;
  transition: all .3s ease;
  box-shadow: 0 0 4px rgba(255,255,255,.5);
}
/* Hamburger open state — X shape */
.kg-sidebar-open .kg-ham-line:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.kg-sidebar-open .kg-ham-line:nth-child(2) { opacity: 0; transform: scaleX(0); }
.kg-sidebar-open .kg-ham-line:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ── Topbar Left ── */
.kg-topbar-left {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
}
.kg-topbar-logo-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}
.kg-topbar-logo-wrap .kg-logo-text {
  color: #fff !important;
  font-family: 'Cinzel Decorative','Cinzel',serif !important;
  font-size: .9rem !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 8px rgba(0,0,0,.25), 0 0 20px rgba(255,220,100,.4) !important;
  letter-spacing: .04em !important;
}
.kg-topbar-logo-wrap .kg-logo-icon {
  color: #FFF9C4 !important;
  font-size: 1.3rem !important;
  filter: drop-shadow(0 0 6px rgba(255,235,59,.7)) !important;
}

/* ── Topbar Right ── */
.kg-topbar-right, #kg-topbar-right {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
}

/* ── Coins Badge in Header ── */
.kg-tb-coins {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(255,255,255,.18);
  border: 1.5px solid rgba(255,255,255,.35);
  border-radius: 20px;
  padding: 4px 10px 4px 7px;
  cursor: pointer;
  transition: background .2s;
  white-space: nowrap;
}
.kg-tb-coins:hover { background: rgba(255,255,255,.3); }
.kg-tb-coins-icon { font-size: .9rem; line-height: 1; }
.kg-tb-coins-val {
  font-size: .74rem;
  font-weight: 800;
  color: #FFF9C4;
  letter-spacing: .01em;
  text-shadow: 0 1px 4px rgba(0,0,0,.2);
}

/* ── Notification Bell ── */
.kg-tb-notif {
  position: relative;
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,.15);
  border: 1.5px solid rgba(255,255,255,.3);
  border-radius: 10px;
  color: #fff;
  font-size: .92rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
}
.kg-tb-notif:hover { background: rgba(255,255,255,.28); }
.kg-notif-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  background: #F44336;
  border-radius: 50%;
  border: 1.5px solid #FF6B00;
  animation: kg-notif-pulse 1.5s infinite;
}
@keyframes kg-notif-pulse {
  0%,100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: .8; }
}

/* ── Search Toggle Button ── */
.kg-tb-search-btn {
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,.15);
  border: 1.5px solid rgba(255,255,255,.3);
  border-radius: 10px;
  color: #fff;
  font-size: .88rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
}
.kg-tb-search-btn:hover { background: rgba(255,255,255,.28); }

/* ── Search Bar Dropdown ── */
.kg-search-bar-wrap {
  position: fixed;
  top: 54px; /* sits right below topbar */
  left: 0;
  right: 0;
  width: 100%; /* full width on ALL pages including 404/archive */
  z-index: 10500;
  background: rgba(255, 253, 248, 0.96);
  backdrop-filter: blur(20px) saturate(2);
  -webkit-backdrop-filter: blur(20px) saturate(2);
  padding: 8px 12px;
  box-shadow: 0 4px 24px rgba(100, 60, 0, 0.14);
  transform: translateY(-110%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  border-bottom: 1px solid rgba(200, 160, 60, 0.18);
  box-sizing: border-box;
}
.kg-search-bar-wrap.kg-search-open {
  transform: translateY(0);
}
.kg-search-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 12px;
  padding: 8px 14px;
  box-shadow: 0 2px 12px rgba(180, 100, 0, 0.10);
  border: 1px solid rgba(200, 150, 50, 0.15);
  max-width: 700px;
  margin: 0 auto;
}
.kg-search-icon { color: #FF6B00; font-size: .9rem; flex-shrink: 0; }
.kg-search-input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-size: .9rem;
  font-family: 'Noto Sans Devanagari','Segoe UI',sans-serif;
  color: #000000;
  min-width: 0;
  width: 100%;
}
.kg-search-input::placeholder { color: #9E6B3A; }
.kg-search-close {
  background: none;
  border: none;
  color: #9E6B3A;
  font-size: .88rem;
  cursor: pointer;
  padding: 2px 6px;
  flex-shrink: 0;
  border-radius: 6px;
  transition: color 0.2s ease, background 0.2s ease;
}
.kg-search-close:hover { color: #E53935; background: rgba(230,57,35,.08); }

/* Dark mode search */
body.kg-dark .kg-search-bar-wrap {
  background: rgba(14, 6, 1, 0.95) !important;
  border-bottom-color: rgba(255, 107, 0, 0.12) !important;
}
body.kg-dark .kg-search-inner {
  background: rgba(26, 10, 0, 0.9) !important;
  border-color: rgba(255, 107, 0, 0.12) !important;
}
body.kg-dark .kg-search-input { color: #ffffff !important; }
body.kg-dark .kg-search-icon { color: #FF8C00 !important; }

/* ── Sidebar Overlay ── */
.kg-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity .3s ease;
}
.kg-sidebar-overlay.kg-sidebar-open {
  display: block;
  opacity: 1;
}

/* ── Sidebar Drawer ── */
.kg-sidebar-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 9999;
  width: 300px;
  max-width: 85vw;
  background: var(--bg, #FFFFFF);
  box-shadow: 4px 0 32px rgba(0,0,0,.28);
  transform: translateX(-110%);
  transition: transform .32s cubic-bezier(.4,0,.2,1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.kg-sidebar-drawer.kg-sidebar-open {
  transform: translateX(0);
}
body.kg-dark .kg-sidebar-drawer { background: #111111; }

/* ── Sidebar Profile Section ── */
.kg-sidebar-profile {
  background: linear-gradient(135deg, #E65100 0%, #FF6B00 60%, #FF8C00 100%);
  padding: 60px 16px 16px; /* 60px top = topbar(52px) + 8px gap — sidebar starts at top:0 */
  flex-shrink: 0;
  position: relative;
}
.kg-sb-profile-inner {
  display: flex;
  align-items: center;
  gap: 12px;
}
/* Hide close button — sidebar has overlay click to close */
.kg-sb-close-btn {
  display: none !important;
}
.kg-sb-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,.5);
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 2px 12px rgba(0,0,0,.2);
}
.kg-sb-avatar-init {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,.5);
  background: rgba(255,255,255,.25);
  color: #fff;
  font-size: 1.4rem;
  font-weight: 900;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.kg-sb-guest-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,.4);
  background: rgba(255,255,255,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  color: rgba(255,255,255,.9);
  flex-shrink: 0;
}
.kg-sb-user-info { flex: 1; min-width: 0; }
.kg-sb-username {
  font-size: .92rem;
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.kg-sb-coins {
  font-size: .73rem;
  color: rgba(255,255,255,.85);
  margin-top: 3px;
  font-weight: 600;
}
.kg-sb-close-btn {
  display: none !important; /* hidden — overlay click closes sidebar */
}
.kg-sb-close-btn:hover { background: rgba(255,255,255,.35); }
.kg-sb-login-btn {
  margin-top: 12px;
  width: 100%;
  background: rgba(255,255,255,.2);
  border: 1.5px solid rgba(255,255,255,.4);
  border-radius: 12px;
  color: #fff;
  font-size: .88rem;
  font-weight: 700;
  padding: 10px 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background .2s;
}
.kg-sb-login-btn:hover { background: rgba(255,255,255,.32); }

/* ── Sidebar Nav (scrollable) ── */
.kg-sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 10px 10px 80px;
  -webkit-overflow-scrolling: touch;
}
.kg-sidebar-nav::-webkit-scrollbar { width: 3px; }
.kg-sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,107,0,.3); border-radius: 3px; }

.kg-sb-section-label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted, #9E6B3A);
  padding: 10px 8px 6px;
}
.kg-sb-divider {
  height: 1px;
  background: var(--border, #E8D5A0);
  margin: 8px 0;
}

/* ── Sidebar Menu Item ── */
.kg-sb-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 10px;
  background: none;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  transition: background .18s;
  position: relative;
}
.kg-sb-item:hover, .kg-sb-item:active {
  background: rgba(255,107,0,.08);
}
body.kg-dark .kg-sb-item:hover { background: rgba(255,107,0,.14); }
.kg-sb-item-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: .88rem;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.kg-sb-item-label {
  flex: 1;
  font-size: .88rem;
  font-weight: 600;
  color: var(--text, #000000);
  line-height: 1.3;
}
body.kg-dark .kg-sb-item-label { color: #ffffff; }
.kg-sb-expand-arrow {
  color: var(--muted, #9E6B3A);
  font-size: .72rem;
  transition: transform .25s;
  flex-shrink: 0;
}
.kg-sb-settings-expanded .kg-sb-expand-arrow { transform: rotate(180deg); }

/* ── Settings Submenu ── */
.kg-sb-submenu {
  display: none;
  flex-direction: column;
  gap: 2px;
  margin-left: 18px;
  border-left: 2px solid rgba(255,107,0,.2);
  padding-left: 10px;
  margin-bottom: 4px;
}
.kg-sb-submenu.kg-sb-submenu-open { display: flex; }
.kg-sb-subitem {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  background: none;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  font-size: .84rem;
  font-weight: 600;
  color: var(--text, #000000);
  transition: background .18s;
}
.kg-sb-subitem:hover { background: rgba(255,107,0,.08); }
body.kg-dark .kg-sb-subitem { color: #ffffff; }

/* ── Upgrade Plan Button ── */
.kg-sb-upgrade-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 8px 0 4px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #FF6B00, #FF8C00);
  border: none;
  border-radius: 14px;
  color: #fff;
  font-size: .86rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(255,107,0,.35);
  transition: transform .15s, box-shadow .15s;
  letter-spacing: .01em;
}
.kg-sb-upgrade-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(255,107,0,.45); }
.kg-sb-upgrade-btn i { font-size: 1rem; color: #FFF9C4; }

/* ── Adjust page content for 56px topbar ── */
.kg-pg, #kg-pg-home, .kg-topbar ~ .kg-pg, .kg-topbar ~ #kg-pg-home {
  padding-top: calc(56px + 8px) !important;
}
#kg-app > .kg-topbar + * { margin-top: 0 !important; }

/* ── Search bar shifts content down when open ── */
.kg-search-bar-open .kg-pg,
.kg-search-bar-open #kg-pg-home {
  padding-top: calc(56px + 56px + 8px) !important;
}

/* ── Dark mode adjustments ── */
/* sidebar-profile dark bg: handled in mobile-fixes and section 9 */
body.kg-dark .kg-sidebar-nav { background: #111111; }
body.kg-dark .kg-sb-section-label { color: rgba(255,150,80,.6); }
body.kg-dark .kg-sb-divider { background: rgba(255,107,0,.15); }


/* ═══════════════════════════════════════════════════════════
   ASTROVEDIC HOMEPAGE — NEW DESIGN (v6.0)
   Glassmorphic, Liquid Cooling, Saffron-inspired Modern UI
   ═══════════════════════════════════════════════════════════ */

/* ── HIDE OLD HOME STYLES ON NEW PAGES ── */
#kg-pg-home .home-hero,
#kg-pg-home .home-stats,
#kg-pg-home .home-section,
#kg-pg-home .home-grid,
#kg-pg-home .home-ai-banner,
#kg-pg-home .why-grid { display:none !important; }

/* ── SEARCH BAR (Fake/Trigger) ── */
.av-search-wrap {
  padding: 12px 14px 4px;
}
.av-search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1.5px solid #E8D5A0;
  border-radius: 28px;
  padding: 11px 18px;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(184,134,11,.06);
  transition: border-color .2s, box-shadow .2s;
}
.av-search-bar:hover {
  border-color: #FF6B00;
  box-shadow: 0 2px 16px rgba(255,107,0,.1);
}
.av-search-icon {
  color: #B8860B;
  font-size: .9rem;
}
.av-search-placeholder {
  color: #9A7F4A;
  font-size: .84rem;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 500;
}

/* ═══════════════════════════════════
   SERVICE ICONS GRID — Boxed Style
   AstroSage-inspired boxed icons
═══════════════════════════════════ */
.av-services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 14px 14px 6px;
}
.av-service-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 4px 10px;
  background: #fff;
  border: 1.5px solid #F5F5F5;
  border-radius: 14px;
  cursor: pointer;
  transition: all .2s ease;
  position: relative;
  overflow: hidden;
}
.av-service-box::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--svc-color, #FF6B00);
  opacity: .6;
  border-radius: 14px 14px 0 0;
  transition: opacity .2s;
}
.av-service-box:active {
  transform: scale(.94);
  border-color: var(--svc-color, #FF6B00);
}
.av-service-box:hover::before { opacity: 1; }
.av-service-box:hover {
  box-shadow: 0 4px 20px rgba(255,107,0,.12);
  border-color: rgba(255,107,0,.3);
}

.av-svc-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  color: #fff;
  background: var(--svc-color, #FF6B00);
  box-shadow: 0 3px 10px rgba(0,0,0,.12);
  transition: transform .2s;
}
.av-service-box:hover .av-svc-icon { transform: translateY(-2px) scale(1.08); }
.av-svc-label {
  font-family: 'Rajdhani', sans-serif;
  font-size: .7rem;
  font-weight: 700;
  color: #1a1a1a;
  text-align: center;
  line-height: 1.2;
  letter-spacing: .01em;
}

/* 3-column on small phones */
@media (max-width: 359px) {
  .av-services-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
}

/* ═══════════════════════════════════
   AI INPUT + TICKER SECTION
═══════════════════════════════════ */
.av-ai-input-section {
  margin: 10px 14px 14px;
  background: linear-gradient(160deg, #FFFFFF 0%, #FFF3E0 50%, #FFFFE0 100%);
  border: 1.5px solid rgba(255,107,0,.15);
  border-radius: 16px;
  padding: 0;
  overflow: hidden;
}

/* ── TICKER ── */
.av-ticker-wrap {
  overflow: hidden;
  position: relative;
  height: 36px;
  border-bottom: 1px solid rgba(255,107,0,.08);
}
.av-ticker-wrap::before,
.av-ticker-wrap::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 30px;
  z-index: 2;
  pointer-events: none;
}
.av-ticker-wrap::before { left: 0; background: linear-gradient(90deg, #FFFFFF, transparent); }
.av-ticker-wrap::after { right: 0; background: linear-gradient(-90deg, #FFF3E0, transparent); }

.av-ticker-track {
  display: flex;
  gap: 24px;
  white-space: nowrap;
  animation: avTickerScroll 30s linear infinite;
  padding: 8px 0;
  align-items: center;
}
@keyframes avTickerScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.av-ticker-track:hover { animation-play-state: paused; }
.av-ticker-item {
  font-family: 'Rajdhani', sans-serif;
  font-size: .78rem;
  font-weight: 600;
  color: #7A5F2A;
  cursor: pointer;
  padding: 2px 12px;
  border-radius: 14px;
  border: 1px solid rgba(184,134,11,.15);
  background: rgba(255,255,255,.6);
  transition: all .2s;
  flex-shrink: 0;
}
.av-ticker-item:hover {
  background: rgba(255,107,0,.08);
  border-color: #FF6B00;
  color: #FF6B00;
}

/* ── AI INPUT ROW ── */
.av-ai-input-row {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  align-items: center;
}
.av-ai-input {
  flex: 1;
  border: 1.5px solid #E8D5A0;
  border-radius: 24px;
  padding: 10px 16px;
  font-size: .84rem;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 500;
  color: #000000;
  background: #fff;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.av-ai-input:focus {
  border-color: #FF6B00;
  box-shadow: 0 0 0 3px rgba(255,107,0,.08);
}
.av-ai-input::placeholder { color: #B8A070; }
.av-ai-send-btn {
  background: linear-gradient(135deg, #FF6B00, #FF8C00);
  color: #fff;
  border: none;
  border-radius: 24px;
  padding: 10px 18px;
  font-family: 'Rajdhani', sans-serif;
  font-size: .84rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  box-shadow: 0 3px 12px rgba(255,107,0,.3);
  transition: transform .15s, box-shadow .15s;
}
.av-ai-send-btn:active { transform: scale(.95); }
.av-ai-send-btn:hover { box-shadow: 0 5px 18px rgba(255,107,0,.4); }

/* ═══════════════════════════════════
   AI ASTROLOGERS — 3x2 Card Grid
═══════════════════════════════════ */
.av-astrologers-section {
  padding: 10px 14px 14px;
}
.av-section-title {
  font-family: 'Cinzel', serif;
  font-size: .92rem;
  font-weight: 700;
  color: #7B0D1E;
  margin-bottom: 12px;
}
.av-section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.av-more-btn {
  background: none;
  border: 1px solid rgba(255,107,0,.3);
  border-radius: 8px;
  padding: 4px 10px;
  font-size: .72rem;
  color: #FF6B00;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  cursor: pointer;
}

.av-astrologer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.av-astrologer-card {
  background: #fff;
  border: 1.5px solid #F5F5F5;
  border-radius: 14px;
  padding: 14px 8px 10px;
  text-align: center;
  cursor: pointer;
  transition: all .2s;
  position: relative;
}
.av-astrologer-card:active { transform: scale(.95); }
.av-astrologer-card:hover {
  border-color: rgba(255,107,0,.3);
  box-shadow: 0 4px 16px rgba(255,107,0,.1);
}

.av-astro-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  margin: 0 auto 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--astro-color), color-mix(in srgb, var(--astro-color) 70%, #000));
  position: relative;
  box-shadow: 0 4px 16px rgba(0,0,0,.1);
}
.av-astro-emoji {
  font-size: 1.5rem;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,.2));
}
.av-astro-online {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 12px;
  height: 12px;
  background: #4CAF50;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 6px #4CAF50;
}
.av-astro-name {
  font-family: 'Rajdhani', sans-serif;
  font-size: .74rem;
  font-weight: 700;
  color: #000000;
  margin-bottom: 2px;
  line-height: 1.2;
}
.av-astro-tag {
  font-size: .58rem;
  color: #9A7F4A;
  line-height: 1.3;
  min-height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}
.av-astro-chat-btn {
  display: inline-block;
  background: linear-gradient(135deg, #FF6B00, #FF8C00);
  color: #fff;
  border: none;
  border-radius: 14px;
  padding: 4px 12px;
  font-family: 'Rajdhani', sans-serif;
  font-size: .66rem;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: .02em;
  transition: transform .15s;
}
.av-astro-chat-btn:active { transform: scale(.92); }

/* ═══════════════════════════════════
   PANCHANG MINI SECTION
═══════════════════════════════════ */
.av-panchang-section {
  padding: 10px 14px 6px;
}

/* ═══════════════════════════════════
   QUICK STATS STRIP
═══════════════════════════════════ */
.av-stats-strip {
  display: flex;
  margin: 6px 14px 20px;
  background: linear-gradient(135deg, #000000, #1a1a1a);
  border-radius: 14px;
  overflow: hidden;
}
.av-stat {
  flex: 1;
  text-align: center;
  padding: 14px 4px;
  border-right: 1px solid rgba(255,107,0,.1);
}
.av-stat:last-child { border-right: none; }
.av-stat-num {
  font-family: 'Cinzel', serif;
  font-size: .95rem;
  font-weight: 700;
  color: #FFD700;
  display: block;
}
.av-stat-lbl {
  font-size: .58rem;
  color: rgba(255,220,150,.5);
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-top: 2px;
  display: block;
}


/* ═══════════════════════════════════════════════════════════
   LIQUID COOLING BOTTOM NAV
   Glassmorphic, translucent, fluid gradients, neon glow
   ═══════════════════════════════════════════════════════════ */
.kg-liquid-nav {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 68px !important;
  z-index: 1001 !important;
  display: flex !important;
  align-items: stretch !important;
  /* Glassmorphic base */
  background: rgba(255, 255, 255, .72) !important;
  backdrop-filter: blur(24px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.8) !important;
  border-top: 1px solid rgba(255, 255, 255, .5) !important;
  box-shadow:
    0 -2px 20px rgba(0, 0, 0, .06),
    inset 0 1px 0 rgba(255, 255, 255, .6) !important;
  border-radius: 20px 20px 0 0 !important;
  padding: 0 6px !important;
  pointer-events: auto !important;
}
/* Liquid inner glow bar — simulates the "capsule" shape */
.kg-liquid-bg {
  position: absolute;
  top: 5px; left: 8px; right: 8px; bottom: 4px;
  background: linear-gradient(135deg, 
    rgba(200, 220, 255, .15), 
    rgba(180, 230, 255, .12), 
    rgba(200, 245, 255, .1));
  border-radius: 18px;
  border: 1px solid rgba(180, 220, 255, .25);
  pointer-events: none;
  z-index: 0;
}

/* ── NAV ITEMS ── */
.kg-liquid-nav .kg-bnav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: transparent !important;
  border: none;
  cursor: pointer;
  padding: 6px 2px 4px;
  color: #7A6040;
  font-family: 'Rajdhani', sans-serif;
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .02em;
  position: relative;
  z-index: 1;
  transition: color .25s ease;
}
.kg-liquid-nav .kg-bnav-item span {
  font-size: .58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1;
}

/* ── ICON WRAPPER ── */
.kg-bnav-icon-wrap {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  transition: all .3s cubic-bezier(.34, 1.56, .64, 1);
  position: relative;
}

/* ── ACTIVE STATE — Glowing Liquid Effect ── */
.kg-liquid-nav .kg-bnav-item.active {
  color: #FF6B00 !important;
}
.kg-liquid-nav .kg-bnav-item.active .kg-bnav-icon-wrap {
  background: radial-gradient(circle at 40% 35%, #FFB300, #FF6B00 60%, #E65100);
  color: #fff;
  transform: translateY(-4px) scale(1.15);
  box-shadow:
    0 4px 18px rgba(255, 107, 0, .45),
    0 0 30px rgba(255, 140, 0, .2),
    inset 0 -2px 4px rgba(0, 0, 0, .1),
    inset 0 2px 4px rgba(255, 255, 255, .3);
}
/* Neon ring pulse */
.kg-liquid-nav .kg-bnav-item.active .kg-bnav-icon-wrap::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(255, 140, 0, .3);
  animation: liquidPulse 2s ease-in-out infinite;
}
@keyframes liquidPulse {
  0%, 100% { transform: scale(1); opacity: .5; }
  50% { transform: scale(1.12); opacity: 0; }
}

/* ── INACTIVE HOVER ── */
.kg-liquid-nav .kg-bnav-item:not(.active):hover .kg-bnav-icon-wrap {
  background: rgba(255, 107, 0, .08);
  transform: translateY(-1px);
}

/* ── REMOVE OLD ACTIVE STYLES ── */
.kg-liquid-nav .kg-bnav-item.active::before { display: none !important; }
.kg-liquid-nav .kg-bnav-item.active i { transform: none; color: inherit; }

/* fa-crystal-ball removed — using fa-star-half-alt */

/* ── DARK MODE LIQUID NAV ── */
body.kg-dark .kg-liquid-nav {
  background: rgba(20, 10, 0, .82) !important;
  border-top-color: rgba(255, 107, 0, .15) !important;
}
body.kg-dark .kg-liquid-bg {
  background: linear-gradient(135deg, 
    rgba(255, 107, 0, .06),
    rgba(180, 100, 0, .04));
  border-color: rgba(255, 107, 0, .1);
}
body.kg-dark .kg-liquid-nav .kg-bnav-item { color: rgba(255, 200, 130, .5); }
body.kg-dark .kg-liquid-nav .kg-bnav-item.active { color: #FF8C00 !important; }

/* ── ADJUST APP PADDING FOR TALLER NAV ── */
/* FIX v7.5.5: Scoped to mobile only — desktop gets no padding from nav (nav is hidden on desktop) */
@media (max-width: 768px) {
  .kg-app { padding-bottom: 76px !important; }
}

/* ── RESPONSIVE ── */
@media (max-width: 359px) {
  .av-astrologer-grid { grid-template-columns: repeat(2, 1fr); }
  .kg-liquid-nav { height: 62px !important; }
  .kg-bnav-icon-wrap { width: 34px; height: 34px; font-size: .95rem; }
}
@media (min-width: 600px) {
/* Old responsive overrides removed — handled by main desktop responsive section */
}

/* ═══════════════════════════════════════════════════════════
   FIX: Hide embedded chat section on non-chat pages
   The chat-wrap is inside kg_render_kundali_form but should
   only show on the dedicated chat page (kg-pg-chat)
   ═══════════════════════════════════════════════════════════ */
#kg-pg-kundali .chat-wrap,
#kg-pg-matching .chat-wrap,
#kg-pg-faladesh .chat-wrap,
#kg-pg-home .chat-wrap { display: none !important; }

/* ═══════════════════════════════════════════════════════════
   FIX: Remove old search bar from homepage (av-search-wrap)
   ═══════════════════════════════════════════════════════════ */
.av-search-wrap { display: none !important; }

/* ═══════════════════════════════════════════════════════════
   FIX: Astrologer profile images
   ═══════════════════════════════════════════════════════════ */
.av-astro-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* ═══════════════════════════════════════════════════════════
   DESKTOP RESPONSIVE — Proper wide desktop layout
   Mobile is default. Tablet gets centered. Desktop gets full-width usage.
   ═══════════════════════════════════════════════════════════ */

/* ── TABLET (768px+) — Centered wider content ── */
@media (min-width: 768px) {
  .kg-app { max-width: 100% !important; }
  .kg-pg { max-width: 960px; margin: 0 auto; padding: 20px 24px; }
  #kg-pg-home { max-width: 1000px; margin: 0 auto; padding: 16px 24px; }

  /* Homepage: Service grid 4 columns, bigger boxes */
  .av-services-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    padding: 18px 0 10px;
  }
  .av-service-box { padding: 18px 10px 14px; border-radius: 16px; }
  .av-svc-icon { width: 52px; height: 52px; font-size: 1.4rem; border-radius: 14px; }
  .av-svc-label { font-size: .8rem; margin-top: 2px; }

  /* AI input section — wider */
  .av-ai-input-section { border-radius: 18px; }
  .av-ai-input { padding: 12px 20px; font-size: .9rem; }
  .av-ai-send-btn { padding: 12px 24px; font-size: .88rem; }

  /* Astrologer grid — 3 columns, wider cards */
  .av-astrologer-grid { gap: 14px; }
  .av-astrologer-card { padding: 18px 12px 14px; border-radius: 16px; }
  .av-astro-avatar { width: 64px; height: 64px; margin-bottom: 10px; }
  .av-astro-emoji { font-size: 1.8rem; }
  .av-astro-name { font-size: .82rem; }
  .av-astro-tag { font-size: .66rem; min-height: 30px; }
  .av-astro-chat-btn { padding: 5px 14px; font-size: .72rem; }

  /* Section titles bigger */
  .av-section-title { font-size: 1.05rem; }
  .av-astrologers-section { padding: 14px 0 18px; }
  .av-panchang-section { padding: 14px 0 10px; }

  /* Form cards — wider, side-by-side fields */
  .form-card { max-width: 100%; margin: 0 0 16px; padding: 20px 24px; border-radius: 18px; }
  .form-wrap { max-width: 100%; }
  .form-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 14px; }
  .form-grid .fg.full { grid-column: span 3; }
  .form-actions { display: flex; gap: 12px; justify-content: flex-start; }

  /* Page headers — wider */
  .page-header { margin: 0 0 16px; padding: 18px 24px 14px; border-radius: 0; }
  .page-header-icon { width: 48px; height: 48px; font-size: 1.4rem; }
  .page-header-title { font-size: 1.05rem; }

  /* Results — wider */
  .rwrap { max-width: 100%; }
  .res-head { padding: 16px 20px; }

  /* Topbar — wider padding */
  .kg-topbar { padding: 0 24px; }
  .kg-logo-text { font-size: .92rem !important; }
}

/* ── DESKTOP (1024px+) — Full professional layout ── */
@media (min-width: 1024px) {
  /* Hide bottom nav — not needed on desktop */
  .kg-liquid-nav, .kg-bottomnav { display: none !important; }
  .kg-app { padding-bottom: 24px !important; padding-top: 56px !important; }
  .kg-topbar { height: 56px; }

  /* Main content — wider */
  .kg-pg { max-width: 1100px; padding: 24px 32px; }
  #kg-pg-home { max-width: 1200px; padding: 20px 32px; }

  /* Homepage: single-column layout — all sections stack vertically */
  #kg-pg-home {
    display: block !important;
  }
  /* Service grid — 4 columns on desktop */
  .av-services-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 20px 0 14px;
  }
  .av-service-box { padding: 20px 12px 16px; }
  .av-svc-icon { width: 56px; height: 56px; font-size: 1.5rem; }
  .av-svc-label { font-size: .82rem; }

  /* AI input section — full width */
  .av-ai-input-section { grid-column: unset; }

  /* Astrologers section — full width below AI input */
  .av-astrologers-section { grid-column: unset; padding: 0; }
  .av-astrologer-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }

  /* Panchang section — full width */
  .av-panchang-section { grid-column: unset; }

  /* Form cards — 3-column grid for birth details */
  .form-grid { grid-template-columns: repeat(3, 1fr) !important; }

  /* Kundali results page — wider tabs */
  .ctrl-bar { flex-wrap: nowrap; overflow-x: auto; }

  /* Topbar — desktop styling */
  .kg-topbar { padding: 0 40px; }
  .kg-topbar-logo-wrap { margin-left: 8px; }

  /* Sidebar drawer — wider on desktop */
  .kg-sidebar-drawer { width: 340px; }
}

/* ── LARGE DESKTOP (1440px+) — even wider ── */
@media (min-width: 1440px) {
  .kg-pg { max-width: 1300px; }
  #kg-pg-home { max-width: 1400px; }
  .av-services-grid { grid-template-columns: repeat(4, 1fr); gap: 18px; }
  .av-astrologer-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .form-card { padding: 24px 32px; }
  .kg-topbar { padding: 0 60px; }
}

/* ═══════════════════════════════════════════════════════════
   FIX: Bottom nav icons — FontAwesome only, no text artifacts
   ═══════════════════════════════════════════════════════════ */
.kg-liquid-nav .kg-bnav-icon-wrap i {
  font-size: 1.1rem;
  line-height: 1;
}

/* ═══════════════════════════════════════════════════════════
   FIX: Wallet button in header — stylish design
   ═══════════════════════════════════════════════════════════ */
.kg-tb-coins {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: linear-gradient(135deg, rgba(255,140,0,.15), rgba(184,134,11,.1)) !important;
  border: 1px solid rgba(255,140,0,.3) !important;
  border-radius: 20px !important;
  padding: 4px 12px 4px 8px !important;
  cursor: pointer !important;
  color: #FF8C00 !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 700 !important;
  font-size: .78rem !important;
  transition: all .2s !important;
}
.kg-tb-coins:hover {
  background: linear-gradient(135deg, rgba(255,140,0,.25), rgba(184,134,11,.15)) !important;
  box-shadow: 0 0 12px rgba(255,140,0,.2) !important;
}
.kg-tb-coins i { font-size: .75rem; }
.kg-tb-coins-val { font-variant-numeric: tabular-nums; }

/* ═══════════════════════════════════
   HIDE STANDALONE HORA PAGE
   Hora is now embedded inside Panchang
═══════════════════════════════════ */
#kg-pg-hora { display: none !important; }

/* ═══════════════════════════════════
   HIDE FLOATING NOTIFICATION BELL
   Header bell replaces it
═══════════════════════════════════ */
.kg-notif-bell-wrap { display: none !important; }

/* Position notification dropdown properly when triggered from header */
#kg-notif-dropdown {
  max-width: 340px;
  min-width: 280px;
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,.15);
  border: 1px solid var(--border, #E8D5A0);
  background: var(--card, #fff);
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════
   FIX: Mobile header — thinner height
═══════════════════════════════════════════════════════════ */
.kg-topbar { height: 44px !important; min-height: 44px !important; }
.kg-app { padding-top: 44px !important; }
body.admin-bar .kg-topbar { top: 32px !important; }
body.admin-bar .kg-app { padding-top: 76px !important; }
@media (max-width:782px) {
  body.admin-bar .kg-topbar { top: 46px !important; }
  body.admin-bar .kg-app { padding-top: 90px !important; }
}
@media (min-width:900px) {
  .kg-topbar { height: 50px !important; }
  .kg-app { padding-top: 50px !important; }
}

/* ═══════════════════════════════════════════════════════════
   FIX: Bottom nav — base layout (scroll-hide handled via .kg-bnav-hidden)
═══════════════════════════════════════════════════════════ */
/* FIX v7.5.6: 64px → 52px — nav height kam ki, AI bar visible ho */
.kg-liquid-nav {
  flex-shrink: 0 !important;
  min-height: 52px !important;
  height: 52px !important;
  /* transition allows smooth scroll-hide — do NOT lock with transition:none */
  transition: transform 0.3s ease, opacity 0.3s ease, background 0.2s, border-color 0.2s !important;
}
/* ═══════════════════════════════════════════════════════════
   FIX: Chat wrap HARD HIDE on non-chat pages
═══════════════════════════════════════════════════════════ */
.kg-pg:not(#kg-pg-chat) .chat-wrap,
.kg-pg:not(#kg-pg-chat) #kg-chat-wrap { display: none !important; height: 0 !important; overflow: hidden !important; }

/* ═══════════════════════════════════════════════════════════
   FIX: Standalone pages — proper padding for shared header
═══════════════════════════════════════════════════════════ */
.kg-standalone { padding-top: 44px !important; padding-bottom: 72px !important; }
@media (min-width:900px) { .kg-standalone { padding-top: 50px !important; } }
@media (min-width:1024px) { .kg-standalone { padding-bottom: 24px !important; } }

/* ═══════════════════════════════════════════════════════════
   GROK-STYLE CHAT UI — Dark, Sleek, Modern
═══════════════════════════════════════════════════════════ */

/* ── Main container: full viewport below topbar ── */
.kgc {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: var(--kg-topbar-h, 52px);
  left: 0;
  right: 0;
  bottom: 0;
  background: #0a0a0a;
  overflow: hidden;
  z-index: 8000;
  width: 100%;
  max-width: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
}
/* Safe-area: keep .kgc at bottom:0, let input-area add the padding inside */
/* Do NOT shrink .kgc upward — that causes the input to hide behind browser chrome */

/* When chat fullpage class present — same positioning */
body.kg-chat-fullpage .kgc,
html.kg-chat-fullpage .kgc {
  top: var(--kg-topbar-h, 52px) !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: auto !important;
  max-width: 100% !important;
  border-radius: 0 !important;
  margin: 0 !important;
}

/* Desktop: still full width, no artificial max-width */
@media (min-width: 900px) {
  .kgc {
    max-width: 100% !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }
}

/* ── Top bar ── */
.kgc-topbar { display:flex; align-items:center; justify-content:space-between; padding:8px 12px; background:#111; border-bottom:1px solid #222; flex-shrink:0; gap:8px; }
.kgc-topbar-left, .kgc-topbar-right { display:flex; align-items:center; gap:8px; }
.kgc-title { display:flex; align-items:center; gap:6px; font-family:'Rajdhani',sans-serif; font-size:.88rem; font-weight:700; color:#e0d0b0; }
.kgc-btn-icon { width:32px; height:32px; border-radius:8px; border:none; background:rgba(255,255,255,.06); color:#aaa; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:.85rem; transition:all .15s; }
.kgc-btn-icon:hover { background:rgba(255,255,255,.12); color:#fff; }
.kgc-context-badge { font-size:.68rem; background:rgba(76,175,80,.12); border:1px solid rgba(76,175,80,.3); border-radius:12px; padding:2px 8px; color:#4CAF50; display:flex; align-items:center; gap:4px; }
.kgc-coins-badge { display: none !important; }
.kgc-plan-badge { font-size:.72rem; background:rgba(255,140,0,.12); border:1px solid rgba(255,140,0,.25); border-radius:12px; padding:2px 10px; color:#FF8C00; display:flex; align-items:center; gap:4px; font-weight:700; font-family:'Rajdhani',sans-serif; }

/* ── Persona modes ── */
.kgc-modes { display:flex; gap:0; padding:0; background:#111; border-bottom:1px solid #1a1a1a; overflow-x:auto; flex-shrink:0; -webkit-overflow-scrolling:touch; }
.kgc-mode { flex-shrink:0; padding:8px 12px; border:none; background:transparent; color:#666; font-size:.72rem; font-weight:600; font-family:'Rajdhani',sans-serif; cursor:pointer; transition:all .2s; display:flex; align-items:center; gap:4px; border-bottom:2px solid transparent; white-space:nowrap; }
.kgc-mode:hover { color:#aaa; background:rgba(255,255,255,.03); }
.kgc-mode.active { color:#FF8C00; border-bottom-color:#FF8C00; background:rgba(255,140,0,.06); }
.kgc-mode i { font-size:.7rem; }

/* ── Chat sidebar (history) ── */
.kgc-sidebar-overlay { position:absolute; inset:0; background:rgba(0,0,0,.5); z-index:100; display:none; }
.kgc-sidebar-overlay.open { display:block; }
.kgc-sidebar { position:absolute; top:0; left:0; bottom:0; width:280px; background:#111; z-index:101; transform:translateX(-100%); transition:transform .25s ease; display:flex; flex-direction:column; border-right:1px solid #222; }
.kgc-sidebar.open { transform:translateX(0); }
.kgc-sidebar-header { display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid #222; font-size:.88rem; font-weight:700; color:#e0d0b0; }
.kgc-sidebar-actions { display:flex; gap:6px; padding:10px 12px; border-bottom:1px solid #1a1a1a; }
.kgc-sidebar-btn { flex:1; padding:7px 10px; border:1px solid #333; border-radius:8px; background:transparent; color:#aaa; font-size:.72rem; font-weight:600; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:4px; transition:all .15s; }
.kgc-sidebar-btn:hover { background:rgba(255,255,255,.06); color:#fff; }
.kgc-sidebar-btn.kgc-danger { border-color:rgba(198,40,40,.3); color:#E53935; }
.kgc-sidebar-btn.kgc-danger:hover { background:rgba(198,40,40,.1); }
.kgc-history-list { flex:1; overflow-y:auto; padding:8px; }
.kgc-history-empty { text-align:center; padding:30px 10px; color:#555; font-size:.8rem; }
.kgc-sidebar-login { text-align:center; padding:40px 20px; color:#666; font-size:.82rem; display:flex; flex-direction:column; align-items:center; gap:8px; }

/* ── Messages area ── */
.kgc-messages { flex:1; overflow-y:auto; overflow-x:hidden; padding:14px 12px; display:flex; flex-direction:column; gap:12px; background:#0a0a0a; min-height:0; }
.kgc-messages::-webkit-scrollbar { width:4px; }
.kgc-messages::-webkit-scrollbar-thumb { background:#333; border-radius:2px; }

/* Message bubbles */
.kgc-msg { display:flex; gap:8px; max-width:88%; animation:kgcFadeIn .3s ease; }
@keyframes kgcFadeIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }
.kgc-msg.kgc-ai { align-self:flex-start; }
.kgc-msg.kgc-user { align-self:flex-end; flex-direction:row-reverse; }
.kgc-msg-avatar { width:28px; height:28px; border-radius:8px; background:linear-gradient(135deg,#FF6B00,#B8860B); display:flex; align-items:center; justify-content:center; color:#fff; font-size:.7rem; flex-shrink:0; }
.kgc-msg.kgc-user .kgc-msg-avatar { background:linear-gradient(135deg,#1565C0,#0D47A1); }
.kgc-msg-bubble { padding:10px 14px; border-radius:4px 14px 14px 14px; font-size:.84rem; line-height:1.7; }
.kgc-msg.kgc-ai .kgc-msg-bubble { background:#1a1a1a; color:#ddd; }
.kgc-msg.kgc-user .kgc-msg-bubble { background:linear-gradient(135deg,#1565C0,#1976D2); color:#fff; border-radius:14px 4px 14px 14px; }

/* Login / Coin gate */
.kgc-gate { text-align:center; padding:40px 20px; display:flex; flex-direction:column; align-items:center; gap:10px; }
.kgc-gate-icon { width:60px; height:60px; border-radius:50%; background:rgba(255,107,0,.1); display:flex; align-items:center; justify-content:center; font-size:1.5rem; color:#FF6B00; }
.kgc-gate-title { font-size:1rem; font-weight:700; color:#e0d0b0; font-family:'Rajdhani',sans-serif; }
.kgc-gate-sub { font-size:.82rem; color:#777; max-width:260px; }
.kgc-gate-btn { display:inline-flex; align-items:center; gap:6px; padding:10px 24px; background:linear-gradient(135deg,#FF6B00,#FF8C00); color:#fff; border:none; border-radius:24px; font-size:.88rem; font-weight:700; cursor:pointer; text-decoration:none; font-family:'Rajdhani',sans-serif; margin-top:6px; }

/* ── Suggestion chips ── */
.kgc-suggestions { display:flex; gap:6px; padding:8px 12px; overflow-x:auto; -webkit-overflow-scrolling:touch; background:#0f0f0f; border-top:1px solid #1a1a1a; flex-shrink:0; scrollbar-width:none; }
.kgc-chip { flex-shrink:0; padding:5px 12px; border:1px solid #2a2a2a; border-radius:16px; background:transparent; color:#888; font-size:.72rem; cursor:pointer; font-family:'Rajdhani',sans-serif; font-weight:600; transition:all .15s; white-space:nowrap; }
.kgc-chip:hover { border-color:#FF6B00; color:#FF8C00; background:rgba(255,107,0,.06); }

/* ── Input area ── */
.kgc-input-area { padding:8px 12px; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); background:#111; border-top:1px solid #1a1a1a; flex-shrink:0; position:relative; z-index:10; }
.kgc-input-row { display:flex; gap:8px; align-items:flex-end; }
.kgc-input-row textarea { flex:1; resize:none; background:#1a1a1a; border:1.5px solid #2a2a2a; border-radius:12px; padding:10px 14px; font-size:.88rem; font-family:'Rajdhani',sans-serif; color:#e0d0b0; outline:none; max-height:120px; overflow-y:auto; transition:border-color .2s; }
.kgc-input-row textarea:focus { border-color:#FF6B00; }
.kgc-input-row textarea::placeholder { color:#555; }
.kgc-send-btn { width:40px; height:40px; border-radius:12px; border:none; background:linear-gradient(135deg,#FF6B00,#FF8C00); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:.95rem; flex-shrink:0; transition:all .15s; }
.kgc-send-btn:hover { box-shadow:0 0 16px rgba(255,107,0,.4); }
.kgc-send-btn:active { transform:scale(.92); }
.kgc-input-footer { display:flex; justify-content:space-between; align-items:center; padding:4px 2px 0; }
.kgc-input-footer span { font-size:.65rem; color:#444; }
.kgc-save-btn { background:none; border:none; color:#555; cursor:pointer; font-size:.8rem; padding:2px 6px; transition:color .15s; }
.kgc-save-btn:hover { color:#FF8C00; }
.kgc-input-locked { text-align:center; padding:14px; color:#555; font-size:.84rem; display:flex; align-items:center; justify-content:center; gap:6px; }

/* ── Typing indicator ── */
.kgc-typing { display:flex; gap:4px; padding:6px 10px; }
.kgc-typing-dot { width:6px; height:6px; border-radius:50%; background:#FF8C00; animation:kgcBounce 1.4s infinite; }
.kgc-typing-dot:nth-child(2) { animation-delay:.2s; }
.kgc-typing-dot:nth-child(3) { animation-delay:.4s; }
@keyframes kgcBounce { 0%,80%,100%{transform:translateY(0)} 40%{transform:translateY(-6px)} }

/* ── History items ── */
.kgc-hist-item { display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:8px; cursor:pointer; color:#aaa; font-size:.78rem; transition:background .15s; border-bottom:1px solid #1a1a1a; }
.kgc-hist-item:hover { background:rgba(255,255,255,.04); color:#ddd; }
.kgc-hist-item i { color:#FF8C00; font-size:.7rem; flex-shrink:0; }
.kgc-hist-item-title { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kgc-hist-item-date { font-size:.62rem; color:#555; flex-shrink:0; }
.kgc-hist-del { border:none; background:none; color:#555; cursor:pointer; font-size:.7rem; padding:2px; opacity:0; transition:opacity .15s; }
.kgc-hist-item:hover .kgc-hist-del { opacity:1; }
.kgc-hist-del:hover { color:#E53935; }

/* ── Old chat classes compatibility ── */
.chat-wrap { display:none !important; }
#kg-pg-chat .chat-wrap { display:none !important; }
.kg-chat-meta-ui { display:none !important; }

/* ═══════════════════════════════════════════════════════════
   MOBILE CHAT FIX — kgc container proper height & scroll
   Ensures AI chat CSS loads and works correctly on mobile
═══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Chat container is position:fixed — height is auto via top/bottom */
  .kgc {
    top: var(--kg-topbar-h, 52px) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: auto !important;
    border-radius: 0 !important;
    overflow: hidden !important;
  }

  /* Messages scroll properly on iOS */
  .kgc-messages {
    -webkit-overflow-scrolling: touch !important;
    overflow-y: scroll !important;
  }

  /* Modes bar — smaller on mobile */
  .kgc-mode {
    padding: 7px 10px !important;
    font-size: .68rem !important;
  }

  /* Input area — tighter on mobile with safe-area */
  .kgc-input-area {
    padding: 6px 10px !important;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Suggestion chips — smaller tap targets */
  .kgc-chip {
    padding: 5px 10px !important;
    font-size: .7rem !important;
  }

  /* Sidebar full-width overlay on mobile */
  .kgc-sidebar {
    width: 100% !important;
    max-width: 320px !important;
  }

  /* Chat page — no extra padding bottom that breaks layout */
  #kg-pg-chat {
    padding-bottom: 0 !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   KUNDALI ENGINE — CONSOLIDATED FIXES v5.0
   All fixes in one block, no conflicts
═══════════════════════════════════════════════════════════ */

/* ── 1. HAMBURGER — ALWAYS VISIBLE on every page including chat ── */
.kg-hamburger,
#kg-hamburger-btn,
body.kg-chat-fullpage .kg-topbar .kg-hamburger,
body.kg-chat-fullpage #kg-topbar .kg-hamburger {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
}

/* ── 2. TOPBAR BACK BUTTON — never show (back is inside chat area) ── */
.kg-topbar-chat-back,
#kg-topbar-chat-back-btn {
  display: none !important;
}

/* ── 3. NOTIFICATION + ALL TOPBAR BUTTONS — clickable on mobile ──
   Root cause: touch-action:pan-x on .kg-topbar was blocking taps */
.kg-topbar,
#kg-topbar {
  touch-action: auto !important;
}
.kg-tb-notif,
.kg-tb-coins,
.kg-tb-search-btn,
.kg-hamburger,
#kg-hamburger-btn,
.kg-topbar button,
#kg-topbar button {
  touch-action: manipulation !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: rgba(255,255,255,0.1);
}
.kg-tb-notif {
  position: relative !important;
  z-index: 10010 !important;
}
#kg-notif-dropdown {
  z-index: 10011 !important;
  pointer-events: auto !important;
}

/* ── 4. BOTTOM NAV — position fixed, scroll-hide via .kg-bnav-hidden class ── */
.kg-liquid-nav,
.kg-bottomnav,
#kg-bottomnav {
  /* transition allows smooth scroll-hide animation */
  transition: transform 0.3s ease, opacity 0.3s ease, background 0.2s, border-color 0.2s !important;
  flex-shrink: 0 !important;
  will-change: transform !important;
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
}
/* Hidden state — scroll down triggers this */
.kg-liquid-nav.kg-bnav-hidden,
.kg-bottomnav.kg-bnav-hidden,
#kg-bottomnav.kg-bnav-hidden {
  transform: translateY(110%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ── 5. CHAT CONTAINER (kgc) — hidden by default, shown in chat mode ── */
.kgc {
  display: none !important;
  pointer-events: none !important; /* ✅ FIX: belt-and-suspenders */
}
body.kg-chat-fullpage .kgc {
  display: flex !important;
  position: fixed !important;
  top: var(--kg-topbar-h, 44px) !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: auto !important;
  border-radius: 0 !important;
  margin: 0 !important;
  z-index: 8000 !important;
  overflow: hidden !important;
}

/* ── 6. CHAT PAGE DIV — zero height (kgc is fixed overlay) ── */
#kg-pg-chat,
#kg-pg-chat.active {
  min-height: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

/* ── 7. CONTEXT BAR (green kundali badge) — hidden ── */
#kg-chat-context-bar,
.kgc-context-badge {
  display: none !important;
}

/* ── 8. INPUT AREA — flush to bottom, no extra space ── */
.kgc-input-area {
  padding: 8px 10px !important;
  padding-bottom: max(8px, env(safe-area-inset-bottom, 8px)) !important;
  margin-bottom: 0 !important;
  background: #111 !important;
  border-top: 1px solid #1a1a1a !important;
  flex-shrink: 0 !important;
}
.kgc-input-footer,
.kgc-save-btn {
  display: none !important;
}
.kgc-input-row textarea,
#kg-chat-inp {
  font-size: 16px !important;
  -webkit-text-size-adjust: 100% !important;
}
.kgc-send-btn {
  flex-shrink: 0 !important;
  min-width: 40px !important;
  width: 40px !important;
  height: 40px !important;
  touch-action: manipulation !important;
}
.kgc-input-row {
  align-items: center !important;
}

/* ── 9. CHAT TOPBAR BUTTONS — tappable ── */
.kgc-topbar button,
.kgc-topbar .kgc-btn-icon {
  touch-action: manipulation !important;
  pointer-events: auto !important;
}

/* ── 10. PAGE SWITCHING — ensure .kg-pg.active is visible ── */
.kg-pg { display: none; }
.kg-pg.active { display: block !important; }
#kg-pg-chat,
#kg-pg-chat.active { display: block !important; height: 0 !important; overflow: visible !important; }

/* ── 11. NOTIFICATION BELL — new chat-only buttons styling ── */
.kg-tb-chat-history,
.kg-tb-new-chat {
  position: relative;
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,.15);
  border: 1.5px solid rgba(255,255,255,.3);
  border-radius: 10px;
  color: #fff;
  font-size: .88rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
  flex-shrink: 0;
  touch-action: manipulation !important;
}
/* ── KUNDALI COMPUTED INFO CARD ── */
.kgc-msg.kgc-system-info {
  padding: 0 12px;
  margin: 4px 0;
}
.kgc-msg.kgc-system-info > div {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  animation: kgFadeUp .3s ease;
}
@keyframes kgFadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── CONTEXT BAR — chart badges ── */
#kg-chat-context-bar {
  display: none;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  padding: 2px 6px;
  border-radius: 20px;
  background: rgba(46,125,50,.12);
  border: 1px solid rgba(76,175,80,.25);
  cursor: default;
  font-size: .7rem;
  max-width: 55vw;
  overflow: hidden;
}
#kg-chat-context-bar i.fa-check-circle {
  color: #4CAF50;
  font-size: .75rem;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════
   ASTROLOGER PERSONA SWIPER
   ══════════════════════════════════════════════════════════ */
.kg-astro-swiper-wrap {
  position: relative;
  display: flex;
  align-items: center;
  padding: 6px 0 4px;
  border-bottom: 1px solid rgba(255,107,0,.12);
  background: var(--card, #fff);
  min-height: 72px;
  overflow: hidden;
}
.kg-astro-track-outer {
  flex: 1;
  overflow: hidden;
  margin: 0 28px;
}
.kg-astro-track {
  display: flex;
  gap: 0;
  transition: transform .32s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}
.kg-astro-card {
  flex: 0 0 auto;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  cursor: pointer;
  border-radius: 12px;
  transition: background .15s;
  user-select: none;
}
.kg-astro-card.active {
  background: rgba(255,107,0,.07);
}
.kg-astro-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 2.5px solid var(--astro-col, #FF6B00);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
  overflow: hidden;
  background: rgba(255,107,0,.07);
  position: relative;
}
.kg-astro-avatar img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
}
.kg-astro-online-dot {
  position: absolute;
  bottom: 1px; right: 1px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #25D366;
  border: 2px solid #fff;
}
.kg-astro-info { flex: 1; min-width: 0; }
.kg-astro-name {
  font-size: .88rem;
  font-weight: 800;
  color: var(--text, #000000);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kg-astro-tag {
  font-size: .68rem;
  color: var(--muted, #8D6E63);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kg-astro-badge {
  font-size: .6rem;
  padding: 2px 7px;
  border-radius: 8px;
  font-weight: 700;
  flex-shrink: 0;
  margin-left: auto;
}
.kg-astro-dots {
  display: flex;
  justify-content: center;
  gap: 5px;
  padding: 3px 0 1px;
  background: var(--card,#fff);
}
.kg-astro-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(255,107,0,.2);
  transition: all .2s;
  cursor: pointer;
}
.kg-astro-dot.active {
  background: #FF6B00;
  width: 14px;
  border-radius: 3px;
}
.kg-astro-arrow {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 24px; height: 34px;
  background: rgba(255,107,0,.08);
  border: none;
  border-radius: 6px;
  font-size: 1.3rem;
  color: #FF6B00;
  cursor: pointer;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  touch-action: manipulation;
}
.kg-astro-arrow-l { left: 2px; }
.kg-astro-arrow-r { right: 2px; }
.kg-astro-arrow:active { background: rgba(255,107,0,.2); }

/* ── Chat Compute Form — keyboard-safe positioning ── */
#kg-chat-compute-form {
  position: relative;
  z-index: 20;
  border-top: 1px solid rgba(255,107,0,.15);
  background: var(--card, #fff);
  max-height: 320px;
  overflow-y: auto;
}

/* ── Chat History sidebar — active chat indicator ── */
.kgc-hist-active {
  position: sticky;
  top: 0;
  z-index: 2;
}

/* ── Astrologer swiper — ensure cards fill track ── */
.kg-astro-card {
  min-width: 100%;
  box-sizing: border-box;
}

/* ═══════════════════════════════════════════════════════════
   v6.0 — MOBILE CHAT RESPONSIVE FIX
   Problems solved:
   1. 100vh broken on mobile browsers (URL bar shrinks viewport)
   2. iOS keyboard hides the input area
   3. Bottom safe-area (iPhone notch) not respected
   4. Input row overflows on very small screens
   5. Message bubbles overflow with long words / code
   ═══════════════════════════════════════════════════════════ */

/* Use dvh where supported — modern mobile browsers */
@supports (height: 100dvh) {
  #kg-pg-chat.chat-active .chat-wrap {
    height: calc(100dvh - 52px - 64px) !important;
  }
  @media (min-width: 769px) {
    #kg-pg-chat.chat-active .chat-wrap {
      height: calc(100dvh - 52px - 20px) !important;
    }
  }
  @media (max-width: 480px) {
    #kg-pg-chat.chat-active .chat-wrap {
      height: calc(100dvh - 52px - 64px) !important;
    }
  }
}

/* Mobile chat wrap — safe areas, full width, no rounded corners */
@media (max-width: 768px) {
  .chat-wrap {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding-bottom: env(safe-area-inset-bottom, 0) !important;
    box-sizing: border-box !important;
  }

  /* Messages area — allow shrinking, proper word wrap */
  .chat-messages,
  #kg-chat-msgs {
    padding: 10px 10px 8px !important;
    min-height: 0 !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Message bubbles — never overflow, wrap long URLs/code */
  .chat-messages .msg,
  .chat-messages .chat-msg,
  .chat-messages [class*="msg-"],
  #kg-chat-msgs > div {
    max-width: 88% !important;
    word-wrap: break-word !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }
  .chat-messages pre,
  .chat-messages code {
    max-width: 100% !important;
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
    overflow-x: auto !important;
    font-size: .78rem !important;
  }
  .chat-messages img,
  .chat-messages svg {
    max-width: 100% !important;
    height: auto !important;
  }
  .chat-messages table {
    display: block !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    font-size: .78rem !important;
  }

  /* Input area — sticky at bottom, respects safe area */
  .chat-input-area,
  .chat-input-bar {
    padding: 8px 10px !important;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0)) !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
  }

  .chat-input-row {
    gap: 6px !important;
    align-items: flex-end !important;
  }

  /* Textarea: prevents iOS zoom (>=16px), grows naturally */
  .chat-inp,
  #kg-chat-inp {
    font-size: 16px !important;
    min-height: 40px !important;
    max-height: 110px !important;
    padding: 9px 14px !important;
    line-height: 1.4 !important;
  }

  /* Send button — consistent tap target */
  .chat-send-btn,
  #kg-chat-send {
    flex-shrink: 0 !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Suggestions row — edge-to-edge scroll */
  .chat-suggestions,
  #kg-chat-sugg {
    padding: 6px 10px !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .chat-suggestions button,
  #kg-chat-sugg button {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* Chat header — compact on small screens */
  .chat-header {
    padding: 8px 12px !important;
    min-height: 48px !important;
  }
  .chat-header > *:not(:first-child):not(:last-child) {
    min-width: 0 !important;
  }
  .chat-header [class*="title"],
  .chat-header h1, .chat-header h2, .chat-header h3 {
    font-size: .92rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* Very small phones (≤360px) — tighter padding */
@media (max-width: 360px) {
  .chat-messages,
  #kg-chat-msgs {
    padding: 8px 8px 6px !important;
  }
  .chat-messages .msg,
  .chat-messages .chat-msg,
  #kg-chat-msgs > div {
    max-width: 92% !important;
  }
  .chat-input-area,
  .chat-input-bar {
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0)) !important;
  }
  .chat-inp,
  #kg-chat-inp {
    padding: 8px 12px !important;
  }
  .chat-send-btn,
  #kg-chat-send {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
  }
}

/* Landscape phones — tighter, hide bottomnav already handled */
@media (max-height: 500px) and (orientation: landscape) and (max-width: 900px) {
  #kg-pg-chat.chat-active .chat-wrap {
    height: 100vh !important;
  }
  @supports (height: 100dvh) {
    #kg-pg-chat.chat-active .chat-wrap {
      height: 100dvh !important;
    }
  }
  .chat-messages,
  #kg-chat-msgs {
    padding: 6px 10px !important;
  }
  .chat-header {
    min-height: 40px !important;
    padding: 6px 12px !important;
  }
}

/* When iOS keyboard appears, document height shrinks — flex layout
   automatically reflows. But we ensure the input bar stays visible
   by anchoring the flex column to the bottom of the viewport. */
@media (max-width: 768px) {
  #kg-pg-chat.chat-active {
    overflow: hidden !important;
  }
  #kg-pg-chat.chat-active .chat-wrap {
    position: fixed !important;
    top: 52px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    z-index: 50 !important;
  }
  /* Account for bottomnav above chat-wrap so input doesn't hide behind it */
  #kg-pg-chat.chat-active .chat-wrap {
    bottom: 64px !important;
  }
  /* When JS adds class 'kg-keyboard-open' (optional, see app.js), push below keyboard */
  body.kg-keyboard-open #kg-pg-chat.chat-active .chat-wrap {
    bottom: 0 !important;
  }
  body.kg-keyboard-open .kg-bottomnav {
    display: none !important;
  }
}

/* ══════════════════════════════════════════════════════════
   v6.0 — BOTTOM NAV REDESIGN
   Modern, floating, glass-effect with active pill indicator
   ══════════════════════════════════════════════════════════ */
/* ── bnav-v6: Light mode — frosted warm white (dark bg removed, was always black) ── */
.kg-bottomnav.kg-bnav-v6 {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 100 !important;
    display: flex !important;
    justify-content: space-around !important;
    align-items: center !important;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0)) !important;
    /* Light mode: warm frosted glass */
    background: rgba(255, 253, 248, 0.92) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-top: 1px solid rgba(200, 160, 80, 0.22) !important;
    box-shadow: 0 -2px 20px rgba(120, 80, 0, 0.08) !important;
    max-width: 700px !important;
    margin: 0 auto !important;
    border-radius: 20px 20px 0 0 !important;
}
/* ── bnav-v6: Dark mode ── */
body.kg-dark .kg-bottomnav.kg-bnav-v6 {
    background: rgba(14, 6, 1, 0.92) !important;
    border-top-color: rgba(255, 107, 0, 0.15) !important;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.5) !important;
}
body.kg-dark .kg-bnav-v6 .kg-bnav-item {
    color: rgba(255, 200, 130, 0.55) !important;
}

.kg-bnav-v6 .kg-bnav-item {
    flex: 1 1 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    padding: 8px 4px !important;
    background: transparent !important;
    border: none !important;
    /* Light mode: dark warm text; dark mode override below */
    color: rgba(90, 60, 20, 0.55) !important;
    font-size: .65rem !important;
    font-weight: 600 !important;
    letter-spacing: .2px !important;
    cursor: pointer !important;
    transition: color .2s, transform .2s !important;
    position: relative !important;
    min-width: 0 !important;
    -webkit-tap-highlight-color: transparent !important;
}

.kg-bnav-v6 .kg-bnav-icon-wrap {
    width: 44px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 16px !important;
    font-size: 1.1rem !important;
    transition: all .28s cubic-bezier(.4, 0, .2, 1) !important;
    background: transparent !important;
}

.kg-bnav-v6 .kg-bnav-item.active {
    color: #FF8C00 !important;
}

.kg-bnav-v6 .kg-bnav-item.active .kg-bnav-icon-wrap {
    background: linear-gradient(135deg, rgba(255, 107, 0, 0.25), rgba(255, 140, 0, 0.15)) !important;
    box-shadow: 0 2px 12px rgba(255, 107, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    transform: translateY(-2px) scale(1.08) !important;
}

.kg-bnav-v6 .kg-bnav-item.active span:last-child {
    transform: scale(1.04);
    font-weight: 700 !important;
}

.kg-bnav-v6 .kg-bnav-item:not(.active):hover .kg-bnav-icon-wrap {
    background: rgba(255, 255, 255, 0.06) !important;
}

.kg-bnav-v6 .kg-bnav-item:active .kg-bnav-icon-wrap {
    transform: scale(0.94) !important;
}

/* Center "Chat" item — larger floating button style */
.kg-bnav-v6 .kg-bnav-item.kg-bnav-center .kg-bnav-icon-wrap {
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #FF6B00, #FF8C00) !important;
    color: #fff !important;
    font-size: 1.25rem !important;
    box-shadow: 0 6px 20px rgba(255, 107, 0, 0.5), 0 0 0 4px var(--card, #FFFDF8) !important;
    margin-top: -22px !important;
}
.kg-bnav-v6 .kg-bnav-item.kg-bnav-center.active .kg-bnav-icon-wrap {
    transform: translateY(-4px) scale(1.05) !important;
    box-shadow: 0 8px 28px rgba(255, 107, 0, 0.7), 0 0 0 4px var(--card, #FFFDF8) !important;
}
.kg-bnav-v6 .kg-bnav-item.kg-bnav-center {
    color: #FF8C00 !important;
}

@media (max-width: 480px) {
    .kg-bottomnav.kg-bnav-v6 {
        border-radius: 16px 16px 0 0 !important;
    }
    .kg-bnav-v6 .kg-bnav-item.kg-bnav-center .kg-bnav-icon-wrap {
        width: 48px !important;
        height: 48px !important;
        font-size: 1.15rem !important;
    }
}

/* ══════════════════════════════════════════════════════════
   v6.0 — OM ASTRO CHAT UI
   ══════════════════════════════════════════════════════════ */
.kgc-omastro {
    --kgc-accent: #FF6B00;
    /* Inherits from .kgc which is position:fixed; top:52px; bottom:0; left:0; right:0
       So we DO NOT set position/height again — that breaks the layout.
       We only set the flex column behaviour and accent. */
    background: #0B1A10;
}

/* Om Astro pages: keep bottom nav visible by lifting chat above it */
.kgc-omastro {
    /* Default desktop: no bottom nav offset (nav hidden on desktop) */
}
@media (max-width: 768px) {
    /* Bottom nav visible on mobile — lift chat above it */
    body:has(.kgc-omastro) .kgc {
        bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    }
    /* Fallback for browsers without :has() (older Safari, Firefox <121) */
    body.kgc-omastro-host .kgc {
        bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* ── Topbar fix for Om Astro: prevent icons from squishing ── */
.kgc-topbar-omastro {
    flex-shrink: 0;
    gap: 6px !important;
    min-height: 52px;
}
.kgc-topbar-omastro .kgc-topbar-left {
    flex: 1 1 auto;
    min-width: 0;        /* allow children to shrink */
    overflow: hidden;
}
.kgc-topbar-omastro .kgc-topbar-right {
    flex-shrink: 0;
}
.kgc-topbar-omastro .kgc-btn-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
}
.kgc-topbar-omastro .kgc-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.kgc-topbar-omastro .kgc-title > span:not(.kg-pro-badge):not(.kgc-omastro-badge) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.kgc-omastro-badge {
    flex-shrink: 0;
}

/* Mobile tightening for Om Astro topbar */
@media (max-width: 480px) {
    .kgc-topbar-omastro {
        padding: 6px 10px !important;
        gap: 4px !important;
    }
    .kgc-topbar-omastro .kgc-btn-icon {
        width: 34px;
        height: 34px;
        font-size: .8rem;
    }
    .kgc-topbar-omastro .kgc-title {
        font-size: .82rem !important;
        gap: 6px !important;
    }
    .kgc-topbar-omastro .kgc-omastro-badge {
        width: 24px !important;
        height: 24px !important;
        font-size: .72rem !important;
    }
    .kg-pro-badge {
        font-size: .54rem !important;
        padding: 2px 5px !important;
    }
}

/* Typing dots animation */
.kgc-typing-dots {
    display: inline-flex;
    gap: 4px;
    padding: 6px 2px;
    align-items: center;
}
.kgc-typing-dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--kgc-accent, #FF6B00);
    opacity: 0.35;
    animation: kgcTyping 1.2s infinite ease-in-out;
}
.kgc-typing-dots span:nth-child(2) { animation-delay: .2s; }
.kgc-typing-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes kgcTyping {
    0%, 60%, 100% { opacity: .35; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-3px); }
}

/* Streaming cursor */
.kgc-cursor {
    display: inline-block;
    animation: kgcBlink 1s infinite step-end;
    color: var(--kgc-accent, #FF6B00);
    font-weight: 700;
    margin-left: 1px;
}
@keyframes kgcBlink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* ChatGPT-style input area */
.kgc-input-chatgpt {
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0));
    background: #0B1A10;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
    position: relative;
    overflow: visible;
    z-index: 50;
}
.kgc-input-wrap {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 6px 6px 6px 10px;
    transition: border-color .2s, box-shadow .2s;
}
.kgc-input-wrap:focus-within {
    border-color: var(--kgc-accent, #FF6B00);
    box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.12);
}
.kgc-input-btn {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.65);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: background .15s, color .15s;
}
.kgc-input-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}
.kgc-input-textarea {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    resize: none;
    color: #E8F5E9;
    font-family: 'Noto Sans Devanagari', 'Rajdhani', sans-serif;
    font-size: 16px;
    line-height: 1.4;
    padding: 9px 4px;
    max-height: 160px;
    min-height: 38px;
}
.kgc-input-textarea::placeholder {
    color: rgba(255, 255, 255, 0.4);
}
.kgc-input-right {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.kgc-model-btn {
    padding: 0 12px !important;
    width: auto !important;
    gap: 5px !important;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    font-size: .8rem !important;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
}
.kgc-model-label {
    font-size: .78rem;
    color: rgba(255, 255, 255, 0.85);
}
.kgc-send-btn {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #FF6B00, #FF8C00);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .88rem;
    transition: transform .15s, box-shadow .2s;
    box-shadow: 0 2px 10px rgba(255, 107, 0, 0.4);
}
.kgc-send-btn:hover { transform: scale(1.05); }
.kgc-send-btn:active { transform: scale(0.95); }

/* Model picker popup */
.kgc-model-popup {
    position: fixed;
    bottom: auto;
    right: 14px;
    width: 300px;
    max-width: calc(100vw - 28px);
    background: #1a1410;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 8px;
    z-index: 999999;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
    animation: kgcPopupIn .2s ease-out;
}
@keyframes kgcPopupIn {
    from { opacity: 0; transform: translateY(8px) scale(.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.kgc-model-popup-header {
    padding: 8px 12px 10px;
    font-size: .72rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: .5px;
    font-weight: 700;
}
.kgc-model-option {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    color: #fff;
    text-align: left;
    transition: background .15s, border-color .15s;
    margin-bottom: 4px;
}
.kgc-model-option:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 107, 0, 0.3);
}
.kgc-model-option.locked {
    opacity: 0.6;
}
.kgc-model-option.locked:hover {
    border-color: rgba(255, 215, 0, 0.3);
}
.kgc-model-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, #FF6B00, #FF8C00);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: .95rem;
}
.kgc-model-option[data-model="lite"] .kgc-model-icon {
    background: linear-gradient(135deg, #10B981, #059669);
}
.kgc-model-option[data-model="expert"] .kgc-model-icon {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #4A1500;
}
.kgc-model-text {
    flex: 1;
    min-width: 0;
}
.kgc-model-name {
    font-size: .88rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
}
.kgc-pro-tag {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #4A1500;
    font-size: .58rem;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 6px;
    letter-spacing: .5px;
}
.kgc-model-tag {
    font-size: .72rem;
    color: rgba(255, 255, 255, 0.55);
    margin-top: 2px;
}
.kgc-model-lock {
    color: #FFD700;
    font-size: .8rem;
}

/* Markdown styling inside bubbles */
.kgc-msg-bubble h3,
.kgc-msg-bubble h4 {
    margin: 10px 0 6px;
    font-size: .95rem;
    font-weight: 700;
    color: var(--kgc-accent, #FF8C00);
}
.kgc-msg-bubble h4 { font-size: .88rem; }
.kgc-msg-bubble ul,
.kgc-msg-bubble ol {
    margin: 6px 0 8px;
    padding-left: 22px;
}
.kgc-msg-bubble li {
    margin: 3px 0;
    line-height: 1.5;
}
.kgc-msg-bubble strong {
    color: #fff;
    font-weight: 700;
}
.kgc-msg-bubble em {
    color: rgba(255, 255, 255, 0.85);
}
.kgc-msg-bubble code {
    background: rgba(0, 0, 0, 0.3);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: .82em;
    font-family: 'SFMono-Regular', Consolas, monospace;
}

/* Attach popup */
.kg-attach-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    z-index: 500;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
    animation: kgcFadeIn .2s;
}
@keyframes kgcFadeIn { from { opacity: 0; } to { opacity: 1; } }
.kg-attach-popup {
    background: #1a1410;
    border: 1px solid rgba(255, 107, 0, 0.2);
    border-radius: 20px 20px 0 0;
    width: 100%;
    max-width: 520px;
    max-height: 82vh;
    overflow-y: auto;
    animation: kgcSlideUp .25s ease-out;
    padding-bottom: env(safe-area-inset-bottom, 0);
}
@keyframes kgcSlideUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}
@media (min-width: 640px) {
    .kg-attach-popup-overlay { align-items: center; padding: 20px; }
    .kg-attach-popup { border-radius: 20px; max-height: 80vh; }
}
.kg-attach-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: #fff;
    font-weight: 700;
    font-size: .95rem;
}
.kg-attach-popup-header i { color: var(--kgc-accent, #FF6B00); margin-right: 6px; }
.kg-attach-list {
    padding: 10px 14px;
}
.kg-attach-empty {
    padding: 16px;
    text-align: center;
    color: var(--omx-muted, rgba(255,255,255,0.5));
    font-size: .84rem;
    font-style: italic;
}
.kg-attach-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: var(--omx-bg2, rgba(255,255,255,0.04));
    border: 1px solid var(--omx-border, rgba(255,255,255,0.08));
    padding: 10px 12px;
    border-radius: 12px;
    margin-bottom: 8px;
}
.kg-attach-item-info { flex: 1; min-width: 0; }
.kg-attach-item-name {
    color: var(--omx-text, #000000);
    font-weight: 700;
    font-size: .88rem;
}
.kg-attach-item-meta {
    color: var(--omx-text2, rgba(0,0,0,0.5));
    font-size: .74rem;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kg-attach-remove {
    background: rgba(239, 68, 68, 0.12);
    color: #f87171;
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    cursor: pointer;
    flex-shrink: 0;
}
.kg-attach-form {
    padding: 12px 14px 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.kg-attach-form-title {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 10px;
    font-weight: 700;
}
.kg-attach-input {
    width: 100%;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 11px 14px;
    font-size: 15px;
    color: #fff;
    margin-bottom: 8px;
    outline: none;
    font-family: inherit;
}
.kg-attach-input:focus {
    border-color: var(--kgc-accent, #FF6B00);
}
.kg-attach-place-wrap {
    position: relative;
    margin-bottom: 8px;
}
.kg-attach-ac {
    position: absolute;
    top: calc(100% - 4px);
    left: 0;
    right: 0;
    background: #1a1410;
    border: 1px solid rgba(255, 107, 0, 0.2);
    border-radius: 12px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 10;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.kg-attach-ac-item {
    padding: 10px 14px;
    color: #fff;
    font-size: .84rem;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background .15s;
}
.kg-attach-ac-item:hover {
    background: rgba(255, 107, 0, 0.15);
}
.kg-attach-ac-item:last-child { border-bottom: none; }
.kg-attach-btn {
    padding: 11px 16px;
    border: none;
    border-radius: 12px;
    font-weight: 700;
    font-size: .88rem;
    cursor: pointer;
    transition: transform .1s, opacity .15s;
}
.kg-attach-btn:active { transform: scale(0.97); }
.kg-attach-btn-secondary {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.75);
}

/* Attached chips row (above input) */
.kg-attach-chips {
    display: flex;
    gap: 6px;
    padding: 0 4px 8px;
    overflow-x: auto;
    scrollbar-width: none;
}
.kg-attach-chips::-webkit-scrollbar { display: none; }
.kg-attach-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 107, 0, 0.15);
    border: 1px solid rgba(255, 107, 0, 0.35);
    color: #FFCC80;
    padding: 5px 10px;
    border-radius: 16px;
    font-size: .78rem;
    flex-shrink: 0;
    white-space: nowrap;
}
.kg-attach-chip i.fa-scroll { color: #FF8C00; }
.kg-attach-chip-x {
    background: transparent;
    border: none;
    color: rgba(255, 140, 0, 0.8);
    cursor: pointer;
    padding: 0 0 0 4px;
    font-size: .75rem;
}

/* Pro badge near user name */
.kg-pro-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    animation: kgProShimmer 3s infinite;
}
@keyframes kgProShimmer {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.2); }
}

/* ══════════════════════════════════════════════════════════
   COMPREHENSIVE BUG FIXES — All Issues
   ══════════════════════════════════════════════════════════ */

/* ✅ FIX 1: Bottom Nav — MOBILE ONLY. Hide on desktop, show on mobile */
@media (min-width: 769px) {
  .kg-bottomnav,
  #kg-bottomnav,
  nav.kg-liquid-nav,
  nav.kg-bnav-v6 {
    display: none !important;
    visibility: hidden !important;
  }
  body { padding-bottom: 0 !important; }
}
@media (max-width: 768px) {
  .kg-bottomnav,
  #kg-bottomnav {
    display: flex !important;
    visibility: visible !important;
  }
}

/* ✅ FIX 2: Hamburger — ensure clickable on all devices */
.kg-hamburger,
#kg-hamburger-btn,
button.kg-hamburger {
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: rgba(255,255,255,.15);
  cursor: pointer !important;
  position: relative;
  z-index: 100001 !important; /* ✅ FIX: above topbar */
  user-select: none !important;
  -webkit-user-select: none !important;
}
/* Ensure topbar doesn't block touch */
.kg-topbar, #kg-topbar {
  touch-action: auto !important;
  pointer-events: auto !important;
}
.kg-topbar *, #kg-topbar * {
  pointer-events: auto !important;
}

/* ✅ FIX 3: Muhurat date input — hide browser calendar icon */
#kg-mu-date::-webkit-calendar-picker-indicator {
  display: none !important;
  opacity: 0 !important;
}
#kg-mu-date {
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* ✅ FIX 4: Location autocomplete dropdown styling — consistent across all forms */
#kg-p-loc-ac,
#kg-mu-loc-ac,
#kg-fl-ac,
#kg-ho-ac,
.kg-loc-ac-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border: 1.5px solid rgba(255,107,0,.25);
  border-radius: 0 0 12px 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  max-height: 220px;
  overflow-y: auto;
  z-index: 9999;
  -webkit-overflow-scrolling: touch;
}
#kg-p-loc-ac.open,
#kg-mu-loc-ac.open,
#kg-fl-ac.open,
.kg-loc-ac-dropdown.open {
  display: block;
}
.kg-loc-ac-item {
  padding: 10px 14px;
  cursor: pointer;
  font-size: .83rem;
  border-bottom: 1px solid rgba(0,0,0,.05);
  color: #000000;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background .15s;
}
.kg-loc-ac-item:last-child { border-bottom: none; }
.kg-loc-ac-item:hover,
.kg-loc-ac-item.highlighted { background: rgba(255,107,0,.08); }
.kg-loc-ac-item-name {
  font-weight: 700;
  font-size: .84rem;
  color: var(--text, #000000);
}
.kg-loc-ac-item-sub {
  font-size: .72rem;
  color: var(--muted, #888);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ✅ FIX 5: Notification item — clickable cursor */
.kg-notif-item {
  cursor: pointer !important;
}
.kg-notif-item:hover {
  background: rgba(255,107,0,.05) !important;
}

/* ✅ FIX 6: Analysis tab — not shown as AI generated badge */
#kg-analysis-content .kg-ai-badge,
#kg-analysis-content .ai-generated-label {
  display: none !important;
}

/* ✅ FIX 7: OM AI Chat Widget — floating overlay */
#kg-omai-widget-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  align-items: flex-end;
  justify-content: center;
}
#kg-omai-widget-overlay.open {
  display: flex;
}
#kg-omai-widget {
  width: 100%;
  max-width: 540px;
  height: 82vh;
  max-height: 640px;
  background: #000000;
  border-radius: 20px 20px 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 -8px 40px rgba(0,0,0,.5);
  animation: kgOmaiSlideUp .3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes kgOmaiSlideUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@media (min-width: 769px) {
  #kg-omai-widget-overlay {
    align-items: center;
  }
  #kg-omai-widget {
    border-radius: 20px;
    height: 78vh;
  }
}
.kg-omai-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #000000, #111111);
  border-bottom: 1px solid rgba(255,107,0,.2);
  flex-shrink: 0;
}
.kg-omai-title {
  flex: 1;
  font-size: .9rem;
  font-weight: 800;
  color: #FFD580;
  letter-spacing: .02em;
}
.kg-omai-close {
  background: rgba(255,255,255,.1);
  border: none;
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
  touch-action: manipulation;
}
.kg-omai-kundali-badge {
  background: rgba(46,125,50,.2);
  border: 1px solid rgba(76,175,80,.4);
  border-radius: 20px;
  padding: 3px 10px;
  font-size: .7rem;
  color: #81C784;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 4px;
}
.kg-omai-msgs {
  flex: 1;
  overflow-y: auto;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  -webkit-overflow-scrolling: touch;
  background: #000000;
}
.kg-omai-msg-ai {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.kg-omai-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FF6B00, #FF8C00);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  color: #fff;
  flex-shrink: 0;
}
.kg-omai-bubble-ai {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,107,0,.15);
  border-radius: 4px 14px 14px 14px;
  padding: 10px 13px;
  font-size: .83rem;
  color: rgba(255,220,150,.9);
  line-height: 1.65;
  max-width: 88%;
}
.kg-omai-bubble-user {
  background: linear-gradient(135deg, #FF6B00, #FF8C00);
  border-radius: 14px 14px 4px 14px;
  padding: 10px 13px;
  font-size: .83rem;
  color: #fff;
  line-height: 1.6;
  max-width: 80%;
  margin-left: auto;
}
.kg-omai-typing {
  display: flex;
  gap: 4px;
  padding: 10px 13px;
  align-items: center;
}
.kg-omai-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #FF8C00;
  animation: kgOmaiDot .9s infinite;
}
.kg-omai-dot:nth-child(2) { animation-delay: .3s; }
.kg-omai-dot:nth-child(3) { animation-delay: .6s; }
@keyframes kgOmaiDot {
  0%, 80%, 100% { opacity: .3; transform: scale(.8); }
  40%           { opacity: 1;  transform: scale(1.1); }
}
.kg-omai-input-area {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 12px;
  padding-bottom: max(10px, env(safe-area-inset-bottom, 10px));
  background: rgba(255,255,255,.04);
  border-top: 1px solid rgba(255,107,0,.15);
  flex-shrink: 0;
}
.kg-omai-inp {
  flex: 1;
  background: rgba(255,255,255,.08);
  border: 1.5px solid rgba(255,107,0,.25);
  border-radius: 12px;
  padding: 10px 13px;
  font-size: .85rem;
  color: #fff;
  outline: none;
  resize: none;
  line-height: 1.5;
  max-height: 100px;
  overflow-y: auto;
  font-family: inherit;
}
.kg-omai-inp::placeholder { color: rgba(255,255,255,.35); }
.kg-omai-inp:focus { border-color: rgba(255,107,0,.6); }
.kg-omai-send {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FF6B00, #FF8C00);
  border: none;
  color: #fff;
  font-size: .95rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  touch-action: manipulation;
  transition: transform .15s;
}
.kg-omai-send:active { transform: scale(.92); }
.kg-omai-chips {
  display: flex;
  gap: 6px;
  padding: 0 12px 8px;
  overflow-x: auto;
  scrollbar-width: none;
  flex-shrink: 0;
}
.kg-omai-chips::-webkit-scrollbar { display: none; }
.kg-omai-chip {
  background: rgba(255,107,0,.1);
  border: 1px solid rgba(255,107,0,.25);
  border-radius: 20px;
  padding: 5px 12px;
  font-size: .74rem;
  color: #FFB366;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  touch-action: manipulation;
  transition: background .15s;
}
.kg-omai-chip:hover { background: rgba(255,107,0,.2); }


/* ══════════════════════════════════════════════════
   ✅ HEADER CLICK FIX — All pages
   Root causes fixed:
   1. .kg-push-prompt (opacity:0 but no pointer-events:none → blocks clicks)
   2. .kgc fixed overlay sitting on page invisibly
   3. Settings/auth overlays not having pointer-events:none when closed
   ══════════════════════════════════════════════════ */

/* Topbar always on top, always clickable */
.kg-topbar, #kg-topbar {
  z-index: 100000 !important;
  pointer-events: auto !important;
}
.kg-topbar *, #kg-topbar * {
  pointer-events: auto !important;
}
.kg-topbar button, #kg-topbar button,
.kg-hamburger, #kg-hamburger-btn,
.kg-tb-search-btn, #kg-search-toggle,
.kg-tb-notif, #kg-notif-btn,
.kg-langbtn, #kg-langbtn {
  pointer-events: auto !important;
  touch-action: manipulation !important;
  cursor: pointer !important;
  position: relative !important;
  z-index: 100001 !important;
}

/* Any overlay that is hidden must NOT block clicks */
.kg-push-prompt:not(.kg-push-prompt-visible),
.ldwrap:not(.active),
.kg-settings-overlay:not(.open),
.kg-user-dashboard:not([style*="block"]),
#kg-auth-modal:not([style*="block"]):not([style*="flex"]),
.kg-sidebar-overlay:not(.kg-sidebar-open) {
  pointer-events: none !important;
}

/* Our OM AI widget overlay when not open */
#kg-omai-widget-overlay:not(.open) {
  pointer-events: none !important;
  display: none !important;
}

/* kgc when not in chat mode - ensure no click blocking */
.kgc:not([style*="flex"]) {
  pointer-events: none !important;
}
/* ═══════════════════════════════════════════════════════════
   ✅ FINAL COMPREHENSIVE CLICK FIX — v6.1
   Addresses ALL known click-blocking issues:
   1. .kgc fixed overlay always present in DOM
   2. .kg-settings-overlay covers page when closed
   3. .kg-user-dashboard covers page when hidden
   4. #kg-auth-modal covers page when hidden
   5. .ldwrap covers page when not loading
   6. Any invisible fixed element blocking touches
   ═══════════════════════════════════════════════════════════ */

/* ── 1. .kgc — force display:none unless explicitly shown ── */
.kgc,
#kgc-container,
[id^="kgc-"] {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}
body.kg-chat-fullpage .kgc,
body.kg-chat-fullpage #kgc-container,
body.kg-omastro-standalone .kgc.kg-standalone,
body.kg-omastro-standalone .kgc.kgc-omastro,
body.kg-omastro-host .kgc.kg-standalone,
body.kg-omastro-host .kgc.kgc-omastro,
.kgc.kg-standalone {
  display: flex !important;
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}
/* ── 2. Settings overlay — pointer-events:none when closed ── */
.kg-settings-overlay,
#kg-settings-panel {
  pointer-events: none !important;
}
.kg-settings-overlay.open,
#kg-settings-panel.open {
  pointer-events: auto !important;
}
.kg-settings-overlay .kg-settings-panel,
#kg-settings-panel .kg-settings-panel {
  pointer-events: auto !important;
}

/* ── 3. User dashboard — pointer-events:none when hidden ── */
#kg-user-dashboard {
  pointer-events: none !important;
}
#kg-user-dashboard[style*="display: block"],
#kg-user-dashboard[style*="display:block"] {
  pointer-events: auto !important;
}

/* ── 4. Auth modal — pointer-events:none when hidden ── */
#kg-auth-modal {
  pointer-events: none !important;
}
#kg-auth-modal[style*="display: flex"],
#kg-auth-modal[style*="display:flex"] {
  pointer-events: auto !important;
}

/* ── 5. Loading overlay — pointer-events:none when not loading ── */
.ldwrap {
  pointer-events: none !important;
}
.ldwrap.active {
  pointer-events: auto !important;
}

/* ── 6. Search bar — pointer-events:none when not open ── */
.kg-search-bar-wrap {
  pointer-events: none !important;
}
.kg-search-bar-wrap.kg-search-open {
  pointer-events: auto !important;
}
.kg-search-bar-wrap.kg-search-open * {
  pointer-events: auto !important;
}

/* ── 7. Sidebar overlay — pointer-events:none when closed ── */
.kg-sidebar-overlay {
  pointer-events: none !important;
}
.kg-sidebar-overlay.kg-sidebar-open {
  pointer-events: auto !important;
}

/* ── 8. Upgrade modal — pointer-events:none when hidden ── */
#kg-upgrade-modal {
  pointer-events: none !important;
}
#kg-upgrade-modal[style*="display: flex"],
#kg-upgrade-modal[style*="display:flex"] {
  pointer-events: auto !important;
}

/* ── 9. OM AI widget — pointer-events:none when closed ── */
#kg-omai-widget-overlay {
  display: none !important;
  pointer-events: none !important;
}
#kg-omai-widget-overlay.open {
  display: flex !important;
  pointer-events: auto !important;
}

/* ── 10. Topbar — always on top, always clickable ── */
.kg-topbar,
#kg-topbar {
  position: fixed !important;
  z-index: 100000 !important;
  pointer-events: auto !important;
}
.kg-topbar *,
#kg-topbar * {
  pointer-events: auto !important;
}

/* ── 11. Bottom nav — always clickable ── */
.kg-bottomnav,
.kg-liquid-nav,
#kg-bottomnav {
  position: fixed !important;
  z-index: 10000 !important;
  pointer-events: auto !important;
}
.kg-bottomnav *,
.kg-liquid-nav *,
#kg-bottomnav * {
  pointer-events: auto !important;
  touch-action: manipulation !important;
}

/* ── 12. All interactive elements — ensure clickable ── */
button,
[onclick],
[role="button"],
a,
input,
select,
textarea,
label {
  touch-action: manipulation !important;
}

/* ── 13. Notification dropdown — above everything ── */
#kg-notif-dropdown {
  z-index: 2147483647 !important;
  pointer-events: auto !important;
}
#kg-notif-dropdown * {
  pointer-events: auto !important;
}

/* ── 14. User dropdown — above everything ── */
#kg-user-dropdown {
  z-index: 2147483647 !important;
  pointer-events: auto !important;
}

/* ── 15. Autocomplete dropdowns — above everything (only when open/visible) ── */
.ac-list.open {
  z-index: 99999 !important;
  pointer-events: auto !important;
}
#kg-fl-ac[style*="block"],
#kg-fl-embed-ac[style*="block"],
#kg-p-loc-ac[style*="block"],
#kg-mu-loc-ac[style*="block"],
#kg-ho-ac[style*="block"],
#kg-ac-list.open,
[id$="-ac-list"].open,
[id$="-ac"].open {
  z-index: 99999 !important;
  pointer-events: auto !important;
}
/* Items inside open dropdowns */
.ac-list.open .ac-item,
[id$="-ac"].open .ac-item,
[id$="-ac"][style*="block"] .kg-loc-ac-item,
.kg-loc-ac-dropdown.open .kg-loc-ac-item {
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* ── 16. More menu ── */
#kg-more-menu {
  pointer-events: none !important;
}
#kg-more-menu[style*="block"] {
  pointer-events: auto !important;
}
#kg-more-menu.has-kundali,
#kg-more-menu[style*="block"] button {
  pointer-events: auto !important;
}

/* ═══════════════════════════════════════════════════════════
   ✅ NUCLEAR CLICK FIX v6.2 — Override ALL blocking overlays
   Applied LAST so nothing overrides these rules
   ═══════════════════════════════════════════════════════════ */

/* Force .kgc invisible unless chat fullpage active */
html body .kgc,
html body #kgc-container,
html body div.kgc {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}
html body.kg-chat-fullpage .kgc,
html body.kg-chat-fullpage #kgc-container,
html body.kg-omastro-standalone .kgc.kg-standalone,
html body.kg-omastro-standalone .kgc.kgc-omastro,
html body.kg-omastro-host .kgc.kg-standalone,
html body.kg-omastro-host .kgc.kgc-omastro,
html body .kgc.kg-standalone {
  display: flex !important;
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Force all overlays to not block when closed */
html body .kg-settings-overlay:not(.open),
html body #kg-settings-panel:not(.open) {
  pointer-events: none !important;
  z-index: -1 !important;
}
html body #kg-user-dashboard:not([style*="block"]) {
  pointer-events: none !important;
}
html body #kg-auth-modal:not([style*="flex"]) {
  pointer-events: none !important;
}
html body .ldwrap:not(.active) {
  display: none !important;
  pointer-events: none !important;
}
html body .kg-search-bar-wrap:not(.kg-search-open) {
  pointer-events: none !important;
}
html body #kg-upgrade-modal:not([style*="flex"]):not([style*="block"]) {
  pointer-events: none !important;
  display: none !important;
}
html body #kg-omai-widget-overlay:not(.open) {
  display: none !important;
  pointer-events: none !important;
}
html body .kg-sidebar-overlay:not(.kg-sidebar-open) {
  pointer-events: none !important;
}

/* Ensure page content is always clickable */
html body .kg-pg,
html body .kg-pg.active,
html body #kg-app,
html body .kg-standalone {
  pointer-events: auto !important;
}
html body .kg-pg button,
html body .kg-pg input,
html body .kg-pg select,
html body .kg-pg a,
html body .kg-pg [onclick],
html body form button,
html body .btn,
html body .btn-primary,
html body .btn-secondary {
  pointer-events: auto !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: rgba(255,107,0,0.15) !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Autocomplete items MUST be clickable */
html body .ac-item,
html body .kg-loc-ac-item,
html body [id$="-ac"] div,
html body [id$="-ac-list"] div,
html body #kg-fl-ac div,
html body #kg-fl-embed-ac div,
html body #kg-p-loc-ac div,
html body #kg-mu-ac div,
html body #kg-ho-ac div {
  pointer-events: auto !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
  position: relative !important;
  z-index: 99999 !important;
}

/* Bottom nav items */
html body .kg-bnav-item,
html body .kg-liquid-nav button,
html body #kg-bottomnav button {
  pointer-events: auto !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
  z-index: 10001 !important;
  position: relative !important;
}

/* ══════════════════════════════════════════════════════════
   BUG FIX PATCH v5.7.1 — Header Icons + Faladesh Clicks
   ══════════════════════════════════════════════════════════ */

/* FIX 1: Header topbar right buttons — always clickable, above everything */
.kg-topbar-right,
#kg-topbar-right,
.kg-topbar-right > *,
#kg-topbar-right > *,
.kg-tb-notif,
.kg-tb-search-btn,
#kg-notif-btn,
#kg-search-toggle,
.kg-topbar button,
#kg-topbar button,
.kg-topbar .kg-hamburger,
#kg-topbar .kg-hamburger,
#kg-hamburger-btn {
  pointer-events: all !important;
  cursor: pointer !important;
  position: relative !important;
  z-index: 100002 !important;
  touch-action: manipulation !important;
}

/* FIX 2: Standalone faladesh page — all interactive elements clickable */
.kg-standalone .form-card button,
.kg-standalone .form-card input,
.kg-standalone .form-card select,
.kg-standalone button,
.kg-standalone input,
.kg-standalone select,
.kg-standalone [onclick],
#kg-fl-am-btn,
#kg-fl-pm-btn,
#kg-fl-langen,
#kg-fl-langhi,
#kg-fl-ac div {
  pointer-events: all !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
  position: relative !important;
  z-index: 100 !important;
}

/* FIX 3: Autocomplete dropdown — on top of everything */
#kg-fl-ac,
.kg-ac-dropdown,
[id$="-ac"],
[id$="-ac-list"] {
  pointer-events: all !important;
  z-index: 9999 !important;
  position: absolute !important;
}
#kg-fl-ac div {
  z-index: 10000 !important;
  pointer-events: all !important;
  cursor: pointer !important;
}

/* FIX 4: .kgc fixed overlay — prevent blocking topbar clicks on omastro pages */
.kgc {
  z-index: 8000 !important;
}
/* Topbar stays above kgc overlay */
.kg-topbar,
#kg-topbar {
  z-index: 100000 !important;
}

/* FIX 5: Om Astro standalone — ensure full height and no blank space */
.kgc.kg-standalone,
.kgc-omastro.kg-standalone,
#kgc-omastro-general,
#kgc-kgpred {
  position: fixed !important;
  /* FIX v8: top:0 se topbar ke neeche click block hota tha desktop pe.
     Topbar 52px tall hai, kgc uske baad start ho — pointer-events:none
     wala area topbar ke clicks consume nahi karega */
  top: var(--kg-topbar-h, 52px) !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: calc(100dvh - var(--kg-topbar-h, 52px)) !important;
  min-height: unset !important;
  z-index: 8000 !important;
  display: flex !important;
  flex-direction: column !important;
}
/* Admin bar ke saath adjustment */
body.admin-bar .kgc-omastro.kg-standalone,
body.admin-bar #kgc-omastro-general,
body.admin-bar #kgc-kgpred {
  top: calc(32px + var(--kg-topbar-h, 52px)) !important;
  height: calc(100dvh - 32px - var(--kg-topbar-h, 52px)) !important;
}
@media screen and (max-width: 782px) {
  body.admin-bar .kgc-omastro.kg-standalone,
  body.admin-bar #kgc-omastro-general,
  body.admin-bar #kgc-kgpred {
    top: calc(46px + var(--kg-topbar-h, 52px)) !important;
    height: calc(100dvh - 46px - var(--kg-topbar-h, 52px)) !important;
  }
}

/* FIX 6: Muhurt + other standalone pages header buttons */
.kg-standalone .kg-topbar-right button,
.kg-standalone .kg-topbar button,
.kg-standalone #kg-topbar button {
  pointer-events: all !important;
  z-index: 100002 !important;
  position: relative !important;
  cursor: pointer !important;
}

/* FIX 7: Prevent any WP theme element from blocking kg-app */
.kg-fullpage .entry-content *,
.kg-standalone-page .entry-content *,
.kg-fullpage .post-content *,
.kg-standalone-page .post-content * {
  pointer-events: auto !important;
}

/* ══════════════════════════════════════════════════════════
   MASTER BUG FIX PATCH v5.7.2
   Fix all 4 reported bugs:
   1. Header menu/search clicks on Faladesh/Muhurt/AI/Predictions
   2. Faladesh buttons, links, OpenStreetMap AC dropdown
   3. omastro_chat_general & Predictions shortcode blank page
   4. Bottom Nav invisible + duplicate AI buttons
   ══════════════════════════════════════════════════════════ */

/* ── BUG 1+2 FIX: Topbar always on top, always clickable ──────────────── */
.kg-topbar,
#kg-topbar {
  z-index: 999999 !important;
  position: fixed !important;
  pointer-events: all !important;
}
.kg-topbar *,
#kg-topbar *,
.kg-topbar button,
#kg-topbar button,
.kg-topbar-right,
#kg-topbar-right,
.kg-topbar-right > *,
#kg-topbar-right > *,
.kg-hamburger,
#kg-hamburger-btn,
.kg-tb-search-btn,
#kg-search-toggle,
.kg-tb-notif,
#kg-notif-btn {
  pointer-events: all !important;
  cursor: pointer !important;
  z-index: 999999 !important;
  position: relative !important;
  touch-action: manipulation !important;
}

/* Search bar overlay — also must be on top */
#kg-search-bar,
.kg-search-bar {
  z-index: 999998 !important;
  pointer-events: all !important;
}
#kg-search-bar *,
.kg-search-bar * {
  pointer-events: all !important;
}

/* Sidebar/drawer must NOT block topbar */
#kg-sidebar,
.kg-sidebar,
.kg-sidebar-drawer {
  z-index: 99000 !important;
}

/* ── BUG 2 FIX: Faladesh + all standalone pages — full pointer-events ──── */
/* The .kgc overlay (z-index: 8000) was blocking clicks on pages
   that embed shortcodes. We fix by ensuring .kg-standalone has higher z
   and all its children are clickable */
.kg-standalone {
  pointer-events: all !important;
  position: relative !important;
  z-index: 1 !important;
}
.kg-standalone *,
.kg-standalone button,
.kg-standalone input,
.kg-standalone select,
.kg-standalone textarea,
.kg-standalone a,
.kg-standalone [onclick],
.kg-standalone .btn,
.kg-standalone .btn-primary,
.kg-standalone .btn-secondary,
.kg-standalone .form-card,
.kg-standalone .form-card * {
  pointer-events: all !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
}

/* Autocomplete dropdown for faladesh & all AC fields — highest z-index */
#kg-fl-ac,
#kg-fl-embed-ac,
#kg-p-loc-ac,
#kg-mu-ac,
#kg-ho-ac,
#kg-cc-ac,
.ac-list,
[id$="-ac"],
[id$="-ac-list"],
.kg-loc-ac-dropdown {
  position: absolute !important;
  z-index: 9999999 !important;
  pointer-events: all !important;
  /* NOTE: display is intentionally NOT set here — controlled by .open class + JS */
}
#kg-fl-ac div,
#kg-fl-embed-ac div,
#kg-p-loc-ac div,
#kg-mu-ac div,
#kg-ho-ac div,
#kg-cc-ac div,
.ac-list .ac-item,
.ac-item,
[id$="-ac"] div,
[id$="-ac-list"] div {
  pointer-events: all !important;
  cursor: pointer !important;
  z-index: 9999999 !important;
  position: relative !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: rgba(255,107,0,0.15) !important;
}

/* ── BUG 3 FIX: omastro_chat_general & Predictions standalone shortcode ── */
/* .kgc is set display:none + pointer-events:none globally (for main app),
   but when embedded as standalone WP page shortcode it must always show.
   The container div gets class kgc + kg-standalone + kgc-omastro */
.kgc.kg-standalone,
.kgc-omastro.kg-standalone,
#kgc-omastro-general,
#kgc-kgpred {
  display: flex !important;
  flex-direction: column !important;
  pointer-events: all !important;
  position: fixed !important;
  /* FIX v8: top:0 → topbar ke baad shuru karo, warna topbar clicks block honge */
  top: var(--kg-topbar-h, 52px) !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: calc(100dvh - var(--kg-topbar-h, 52px)) !important;
  z-index: 8000 !important;
  min-height: unset !important;
  overflow: hidden !important;
}

/* Topbar on standalone chat pages sits above the kgc container */
.kgc.kg-standalone ~ .kg-topbar,
.kgc-omastro.kg-standalone ~ .kg-topbar,
body:has(#kgc-omastro-general) .kg-topbar,
body:has(#kgc-kgpred) .kg-topbar {
  z-index: 999999 !important;
}

/* All interactive elements inside standalone kgc must be clickable */
.kgc.kg-standalone *,
.kgc-omastro.kg-standalone *,
#kgc-omastro-general *,
#kgc-kgpred * {
  pointer-events: all !important;
}

/* ── BUG 4 FIX: Bottom Nav — always visible on mobile, correct colors ───── */
/* Override the desktop media query that hides it with display:none!important */
.kg-bottomnav.kg-bnav-v6,
nav.kg-bottomnav.kg-bnav-v6,
#kg-bottomnav.kg-bnav-v6 {
  display: flex !important;
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 10002 !important;
  pointer-events: all !important;
  justify-content: space-around !important;
  align-items: center !important;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  background: rgba(13, 5, 0, 0.95) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-top: 1px solid rgba(255, 107, 0, 0.2) !important;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.5) !important;
  height: 52px !important;   /* FIX v7.5.6: 64→52px */
  min-height: 52px !important;
  max-height: 60px !important;
}

/* On desktop (769px+), hide it just like before — but only the plain nav, not v6 */
@media (min-width: 769px) {
  .kg-bottomnav:not(.kg-bnav-v6),
  #kg-bottomnav:not(.kg-bnav-v6) {
    display: none !important;
  }
  /* v6 nav: also hide on desktop — we keep it mobile-only */
  .kg-bottomnav.kg-bnav-v6,
  #kg-bottomnav.kg-bnav-v6 {
    display: none !important;
  }
}
/* Mobile (<769px) — v6 nav is always visible */
@media (max-width: 768px) {
  .kg-bottomnav.kg-bnav-v6,
  #kg-bottomnav.kg-bnav-v6 {
    display: flex !important;
  }
  /* Push app content up so bottomnav doesn't cover it */
  #kg-app,
  .kg-app {
    padding-bottom: 72px !important;
  }
}

/* Nav buttons — correct color & clickable */
.kg-bnav-v6 .kg-bnav-item {
  flex: 1 1 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  padding: 6px 2px !important;
  background: transparent !important;
  border: none !important;
  color: rgba(255, 210, 130, 0.55) !important;
  font-size: .62rem !important;
  font-weight: 600 !important;
  letter-spacing: .02em !important;
  cursor: pointer !important;
  pointer-events: all !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: rgba(255,107,0,0.2) !important;
  position: relative !important;
  transition: color .2s !important;
  min-width: 0 !important;
}

.kg-bnav-v6 .kg-bnav-item span {
  font-size: .58rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .03em !important;
  line-height: 1 !important;
  color: inherit !important;
}

.kg-bnav-v6 .kg-bnav-icon-wrap {
  width: 36px !important;
  height: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 14px !important;
  font-size: 1.05rem !important;
  color: inherit !important;
  transition: all .25s !important;
  background: transparent !important;
}

.kg-bnav-v6 .kg-bnav-item i {
  font-size: 1.1rem !important;
  color: inherit !important;
}

/* Active state */
.kg-bnav-v6 .kg-bnav-item.active {
  color: #FF8C00 !important;
}
.kg-bnav-v6 .kg-bnav-item.active .kg-bnav-icon-wrap {
  background: rgba(255, 107, 0, 0.2) !important;
  box-shadow: 0 2px 10px rgba(255, 107, 0, 0.3) !important;
  transform: translateY(-2px) !important;
}

/* Center floating AI Guru button */
.kg-bnav-v6 .kg-bnav-item.kg-bnav-center {
  color: #FF8C00 !important;
}
.kg-bnav-v6 .kg-bnav-item.kg-bnav-center .kg-bnav-icon-wrap {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 35% 30%, #FFB300, #FF6B00 60%, #E65100) !important;
  color: #fff !important;
  font-size: 1.05rem !important;
  box-shadow: 0 3px 14px rgba(255, 107, 0, 0.45), 0 0 20px rgba(255, 140, 0, 0.18) !important;
  margin-top: 0 !important;
}
.kg-bnav-v6 .kg-bnav-item.kg-bnav-center .kg-bnav-icon-wrap i {
  color: #fff !important;
}
.kg-bnav-v6 .kg-bnav-item.kg-bnav-center.active .kg-bnav-icon-wrap {
  transform: scale(1.05) !important;
  box-shadow: 0 6px 22px rgba(255, 107, 0, 0.65) !important;
}

/* Remove the kg-liquid-bg pseudo element that was causing color issues */
.kg-bnav-v6 .kg-liquid-bg {
  display: none !important;
}

/* ── GENERAL FIX: Prevent any overlay from blocking interactive elements ── */
/* The body::before sacred geometry background must not intercept clicks */
body::before {
  pointer-events: none !important;
  z-index: -1 !important;
}

/* All clickable elements in kg-pg pages */
.kg-pg button,
.kg-pg input,
.kg-pg select,
.kg-pg textarea,
.kg-pg a,
.kg-pg [onclick],
.kg-pg .btn,
.kg-pg .ac-item,
.kg-pg .rashi-btn,
.kg-pg .home-card,
.kg-pg .ctab,
.kg-pg .ntab,
.kg-pg .ppill,
.kg-pg .home-card * {
  pointer-events: all !important;
  touch-action: manipulation !important;
}

/* Muhurt page buttons */
#kg-pg-muhurt button,
#kg-pg-muhurt input,
#kg-pg-muhurt [onclick],
#kg-pg-muhurt .btn,
#kg-pg-muhurt .ctab {
  pointer-events: all !important;
  cursor: pointer !important;
}

/* ── FIX: Ensure page content is above bg but below topbar ── */
.kg-pg.active {
  position: relative !important;
  z-index: 1 !important;
}

/* ── FIX: Predictions standalone page (shortcode) ── */
.kg-standalone-wrapper,
.kg-shortcode-wrap {
  position: relative !important;
  z-index: 1 !important;
  pointer-events: all !important;
}


/* ══════════════════════════════════════════════════════════
   PERMANENT FIX — om-astro-ai blank page + header clicks
   Applied at very end so nothing overrides these rules.
   ══════════════════════════════════════════════════════════ */

/* When body has kgc-omastro-host class (set by shortcode PHP),
   force the .kgc chat container to be fully visible.
   This beats the global display:none!important rule. */
body.kgc-omastro-host .kgc.kg-standalone,
body.kgc-omastro-host .kgc-omastro,
body.kgc-omastro-host #kgc-omastro-general,
body.kgc-omastro-host #kgc-kgpred,
body.kg-omastro-standalone .kgc.kg-standalone,
body.kg-omastro-standalone #kgc-omastro-general,
body.kg-omastro-standalone #kgc-kgpred {
  display: flex !important;
  flex-direction: column !important;
  position: fixed !important;
  /* FIX v8: top:0 ki jagah topbar ke baad shuru karo
     Yahi wajah thi ki desktop pe header menu click nahi hota tha —
     kgc container top:0 se start hokar topbar ke area par baith jaata tha
     aur pointer-events:all se sab clicks consume kar leta tha */
  top: var(--kg-topbar-h, 52px) !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: calc(100dvh - var(--kg-topbar-h, 52px)) !important;
  min-height: unset !important;
  z-index: 8000 !important;
  pointer-events: all !important;
  visibility: visible !important;
  opacity: 1 !important;
  /* FIX v7: overflow:hidden kgc ke flex children (omx-toolbar) ko clip kar deta tha mobile pe.
     overflow-x:hidden se horizontal scroll band hai, overflow-y:clip se toolbar visible rahega
     aur kgc scroll context nahi banega (unlike overflow:auto/scroll). */
  overflow-x: hidden !important;
  overflow-y: clip !important;
}
/* Admin bar ke saath: 32px extra offset */
body.admin-bar.kgc-omastro-host .kgc.kg-standalone,
body.admin-bar.kgc-omastro-host #kgc-omastro-general,
body.admin-bar.kgc-omastro-host #kgc-kgpred,
body.admin-bar.kg-omastro-standalone #kgc-omastro-general,
body.admin-bar.kg-omastro-standalone #kgc-kgpred {
  top: calc(32px + var(--kg-topbar-h, 52px)) !important;
  height: calc(100dvh - 32px - var(--kg-topbar-h, 52px)) !important;
}
@media screen and (max-width: 782px) {
  body.admin-bar.kgc-omastro-host .kgc.kg-standalone,
  body.admin-bar.kgc-omastro-host #kgc-omastro-general,
  body.admin-bar.kgc-omastro-host #kgc-kgpred,
  body.admin-bar.kg-omastro-standalone #kgc-omastro-general,
  body.admin-bar.kg-omastro-standalone #kgc-kgpred {
    top: calc(46px + var(--kg-topbar-h, 52px)) !important;
    height: calc(100dvh - 46px - var(--kg-topbar-h, 52px)) !important;
  }
}

/* Theme wrappers must not clip fixed children */
body.kgc-omastro-host .entry-content,
body.kgc-omastro-host .post-content,
body.kgc-omastro-host .site-content,
body.kgc-omastro-host main,
body.kg-omastro-standalone .entry-content,
body.kg-omastro-standalone .post-content {
  overflow: visible !important;
  position: static !important;
}

/* Topbar always above kgc container on omastro pages */
body.kgc-omastro-host .kg-topbar,
body.kgc-omastro-host #kg-topbar,
body.kg-omastro-standalone .kg-topbar,
body.kg-omastro-standalone #kg-topbar {
  z-index: 999999 !important;
  pointer-events: all !important;
}
body.kgc-omastro-host .kg-topbar *,
body.kgc-omastro-host #kg-topbar *,
body.kg-omastro-standalone .kg-topbar *,
body.kg-omastro-standalone #kg-topbar * {
  pointer-events: all !important;
  cursor: pointer !important;
}

/* ══════════════════════════════════════════════════════════
   FALADESH PAGE — COMPLETE JS + CLICK FIX v5.8
   Fixes: wpautop broken HTML, WP theme entry-content blocking,
   language buttons, AM/PM, location dropdown
   ══════════════════════════════════════════════════════════ */

/* FIX: WP theme entry-content / post-content wrappers
   Some themes set overflow:hidden or pointer-events:none on these,
   which blocks ALL clicks inside the shortcode output */
.entry-content .kg-app,
.entry-content .kg-standalone,
.post-content .kg-app,
.post-content .kg-standalone,
.page-content .kg-app,
.page-content .kg-standalone,
.wp-block-post-content .kg-app,
.wp-block-post-content .kg-standalone {
  pointer-events: all !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 1 !important;
}

/* All interactive elements inside any WP content wrapper */
.entry-content .kg-standalone button,
.entry-content .kg-standalone input,
.entry-content .kg-standalone select,
.entry-content .kg-standalone textarea,
.entry-content .kg-standalone [onclick],
.entry-content .kg-standalone a,
.post-content .kg-standalone button,
.post-content .kg-standalone input,
.post-content .kg-standalone select,
.post-content .kg-standalone textarea,
.post-content .kg-standalone [onclick],
.post-content .kg-standalone a {
  pointer-events: all !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
}

/* Faladesh language toggle buttons — always clickable */
#kg-fl-langen,
#kg-fl-langhi,
#kg-fl-am-btn,
#kg-fl-pm-btn,
[id^="kg-fl-"] button,
[id^="kg-fl-"][onclick] {
  pointer-events: all !important;
  cursor: pointer !important;
  position: relative !important;
  z-index: 200 !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: rgba(255,107,0,0.2) !important;
}

/* Language toggle container — must NOT clip children */
#kg-fl-langen,
#kg-fl-langhi {
  flex: 1 !important;
  display: block !important;
}

/* Location autocomplete dropdown — on top of everything including topbar */
#kg-fl-ac {
  position: absolute !important;
  z-index: 9999999 !important;
  pointer-events: all !important;
  display: none; /* JS controls this */
  background: var(--card, #fff) !important;
  border: 1.5px solid rgba(255,107,0,0.25) !important;
  border-radius: 0 0 12px 12px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important;
  max-height: 240px !important;
  overflow-y: auto !important;
}
#kg-fl-ac div {
  pointer-events: all !important;
  cursor: pointer !important;
  z-index: 9999999 !important;
  position: relative !important;
  touch-action: manipulation !important;
}

/* fg (form group) containers — must not clip AC dropdown */
.kg-standalone .fg {
  position: relative !important;
  overflow: visible !important;
}

/* form-card — must not clip AC dropdown */
.kg-standalone .form-card {
  overflow: visible !important;
}


/* ═══════════════════════════════════════════════════
   NUMEROLOGY — Tabs, Cards, Homepage Quick Section
   ═══════════════════════════════════════════════════ */

/* Numerology Tab Bar */
.kg-num-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin: 0 0 12px;
  padding: 6px;
  background: var(--card, #fff);
  border: 1.5px solid var(--border, #E8D5A0);
  border-radius: 14px;
}
.kg-num-tab {
  flex: 1;
  min-width: 60px;
  padding: 8px 6px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--muted, #7A5F2A);
  font-size: .72rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, color .15s;
  white-space: nowrap;
  text-align: center;
}
.kg-num-tab:hover { background: rgba(74,20,140,.07); color: #4A148C; }
.kg-num-tab.active {
  background: linear-gradient(135deg, #4A148C, #7B1FA2);
  color: #fff;
  box-shadow: 0 2px 8px rgba(74,20,140,.3);
}

/* Numerology Form Grid */
.kg-num-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}

/* Homepage Numerology Section */
.av-numerology-section {
  margin: 16px 0;
  padding: 16px;
  background: var(--card, #fff);
  border: 1.5px solid var(--border, #E8D5A0);
  border-radius: 16px;
}
.av-section-title {
  font-family: 'Cinzel', serif;
  font-size: .78rem;
  font-weight: 700;
  color: var(--maroon, #7B0D1E);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 12px;
}
.av-num-dob-row { margin-bottom: 10px; }

/* Homepage numerology number cards */
.av-num-card {
  background: var(--card, #fff);
  border: 1.5px solid var(--border, #E8D5A0);
  border-radius: 14px;
  padding: 14px 10px;
  text-align: center;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.av-num-card:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.av-num-card-sm { padding: 10px 6px; border-radius: 12px; }
.av-num-card-num {
  font-family: 'Cinzel', serif;
  font-size: 2rem;
  font-weight: 900;
  color: var(--maroon, #7B0D1E);
  line-height: 1;
}
.av-num-card-sm .av-num-card-num { font-size: 1.5rem; }
.av-num-card-lbl {
  font-size: .72rem;
  font-weight: 700;
  color: var(--text, #000000);
  margin-top: 4px;
}
.av-num-card-sub {
  font-size: .62rem;
  color: var(--muted, #7A5F2A);
  margin-top: 2px;
}

/* Homepage quick access buttons */
.av-num-quick-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card, #fff);
  border: 1.5px solid var(--border, #E8D5A0);
  border-radius: 12px;
  padding: 12px;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
  font-size: .75rem;
}
.av-num-quick-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,.07); }
.av-num-quick-btn i { font-size: 1.3rem; flex-shrink: 0; }
/* ═══════════════════════════════════════════════════════════════════════════
   COMPLETE DARK MODE — CSS VARIABLE OVERRIDES + COMPONENT RULES
   body.kg-dark — toggled via kgToggleDarkMode()
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Override all CSS variables so every var()-based element goes dark ── */
body.kg-dark {
  --bg: #000000 !important;
  --bg2: #0a0a0a !important;
  --bg3: #111111 !important;
  --card: #111111 !important;
  --card2: #141414 !important;
  --card3: #1a1a1a !important;
  --border: rgba(255,107,0,.2) !important;
  --border2: rgba(255,140,0,.3) !important;
  --border3: rgba(255,160,0,.4) !important;
  --text: #ffffff !important;
  --text2: #f0f0f0 !important;
  --muted: rgba(255,255,255,.55) !important;
  --muted2: rgba(255,255,255,.4) !important;
  --saffronl: rgba(255,107,0,.1) !important;
  --saffronll: rgba(255,107,0,.05) !important;
  --goldl: rgba(255,215,0,.12) !important;
  --goldll: rgba(255,215,0,.06) !important;
  --shadow: 0 2px 16px rgba(0,0,0,.5) !important;
  --shadow2: 0 6px 32px rgba(0,0,0,.6) !important;
  --shadow3: 0 16px 64px rgba(0,0,0,.7) !important;
  --chart-bg: #000000 !important;
  --chart-line: #FF8C40 !important;
  --chart-fill: rgba(255,140,0,.08) !important;
  --chart-lagna: rgba(255,140,0,.1) !important;
  --g-card: linear-gradient(145deg,#1F0D00,#000000) !important;
}

/* ── Base body ── */
body.kg-dark { background: #000000 !important; color: #ffffff !important; }
body.kg-dark::before {
  background-image:
    radial-gradient(circle at 20% 20%, rgba(255,107,0,.04) 0%, transparent 60%),
    radial-gradient(circle at 80% 80%, rgba(184,134,11,.03) 0%, transparent 60%) !important;
}

/* ── All white/light backgrounds ── */
body.kg-dark .tpanel,
body.kg-dark .rwrap,
body.kg-dark .res-head,
body.kg-dark .ctrl-bar,
body.kg-dark .form-card,
body.kg-dark .rcard,
body.kg-dark .res-block,
body.kg-dark .info-box,
body.kg-dark .section-box,
body.kg-dark .tab-section,
body.kg-dark .panel-card,
body.kg-dark .kg-panel,
body.kg-dark .content-card,
body.kg-dark .sub-card,
body.kg-dark .analysis-box,
body.kg-dark .summary-box,
body.kg-dark .detail-box,
body.kg-dark .info-section,
body.kg-dark .result-section,
body.kg-dark .kg-res-section,
body.kg-dark .kg-section,
body.kg-dark .kundali-section {
  background: #111111 !important;
  border-color: rgba(255,107,0,.12) !important;
  color: #ffffff !important;
}

/* ── Home cards ── */
body.kg-dark .home-card {
  background: #111111 !important;
  border-color: rgba(255,107,0,.12) !important;
}
body.kg-dark .home-card-title { color: #FFD700 !important; }
body.kg-dark .home-card-desc { color: rgba(255,200,130,.55) !important; }
body.kg-dark .home-card.featured { background: linear-gradient(135deg,#1a1a1a,#111111) !important; }

/* ── Navigation tabs (ntab) ── */
body.kg-dark .ntab { color: rgba(255,255,255,.6) !important; }
body.kg-dark .ntab.active { color: #FF6B00 !important; }
body.kg-dark .ntab:hover { color: rgba(255,200,130,.8) !important; }

/* ── Content tabs (ctab) ── */
body.kg-dark .ctab {
  background: #111111 !important;
  color: rgba(255,255,255,.6) !important;
  border-color: rgba(255,107,0,.15) !important;
}
body.kg-dark .ctab.active {
  color: #FF6B00 !important;
  border-color: #FF6B00 !important;
  background: rgba(255,107,0,.06) !important;
}
body.kg-dark .ctab:hover:not(.active) {
  background: rgba(255,107,0,.06) !important;
  color: #FF8C00 !important;
}

/* ── Planet pills ── */
body.kg-dark .ppill {
  background: #111111 !important;
  border-color: rgba(255,107,0,.15) !important;
  color: #ffffff !important;
}
body.kg-dark .ppill-name { color: #D4C4A0 !important; }
body.kg-dark .ppill-rashi { color: #A08060 !important; }
body.kg-dark .ppill.exalted { background: rgba(46,125,50,.15) !important; border-color: rgba(46,125,50,.35) !important; }
body.kg-dark .ppill.debil  { background: rgba(198,40,40,.15) !important; border-color: rgba(198,40,40,.35) !important; }

/* ── Dasha levels ── */
body.kg-dark .dl-label { color: #A08060 !important; }
body.kg-dark .dl-planet { color: #FF8C00 !important; }
body.kg-dark .dl-dates  { color: #8A6A40 !important; }
body.kg-dark .dasha-cur {
  background: linear-gradient(135deg,rgba(255,107,0,.12),rgba(255,140,0,.06)) !important;
  border-color: rgba(255,107,0,.25) !important;
}

/* ── Yoga & Dosha cards ── */
body.kg-dark .yoga-card,
body.kg-dark .dosha-card,
body.kg-dark .yoga-grid > div,
body.kg-dark .dosha-grid > div,
body.kg-dark .dosha-grid > div,
body.kg-dark .yoga-grid .ydesc {
  background: #1F0D00 !important;
  border-color: rgba(255,107,0,.14) !important;
  color: #ffffff !important;
}

/* ── Buttons ── */
body.kg-dark .btn {
  border-color: rgba(255,107,0,.25) !important;
  color: #ffffff !important;
}
body.kg-dark .btn-secondary {
  background: #1F0D00 !important;
  color: #ffffff !important;
  border-color: rgba(255,107,0,.2) !important;
}
body.kg-dark .btn-secondary:hover { background: #1a1a1a !important; }
body.kg-dark .btn-outline {
  background: transparent !important;
  color: #FF6B00 !important;
  border-color: rgba(255,107,0,.4) !important;
}

/* ── Numerology tabs (kg-num-tab) ── */
body.kg-dark .kg-num-tabs {
  background: #111111 !important;
  border-color: rgba(255,107,0,.15) !important;
}
body.kg-dark .kg-num-tab {
  color: rgba(255,200,130,.55) !important;
}
body.kg-dark .kg-num-tab:hover {
  background: rgba(255,107,0,.08) !important;
  color: #FF8C00 !important;
}
body.kg-dark .kg-num-tab.active {
  background: linear-gradient(135deg,#4A148C,#7B1FA2) !important;
  color: #fff !important;
}

/* ── Remedies sub-tabs ── */
body.kg-dark .kg-rem-stab {
  background: #111111 !important;
  color: #D4C4A0 !important;
  border-color: rgba(255,107,0,.2) !important;
}

/* ── Numerology number cards ── */
body.kg-dark .av-num-card,
body.kg-dark .av-num-quick-btn {
  background: #111111 !important;
  border-color: rgba(255,107,0,.15) !important;
}
body.kg-dark .av-num-card-num { color: #FF8C00 !important; }
body.kg-dark .av-num-card-lbl { color: #ffffff !important; }
body.kg-dark .av-num-card-sub { color: #A08060 !important; }

/* ── Settings overlay & panel ── */
body.kg-dark .kg-settings-overlay { background: rgba(0,0,0,.75) !important; }
body.kg-dark .kg-settings-panel {
  background: #111111 !important;
  border-color: rgba(255,107,0,.2) !important;
  color: #ffffff !important;
}
body.kg-dark .kg-settings-title { color: #FF8C00 !important; }
body.kg-dark .kg-set-section { border-color: rgba(255,107,0,.1) !important; }
body.kg-dark .kg-set-label { color: #D4C4A0 !important; }
body.kg-dark .kg-set-opt {
  background: #261200 !important;
  border-color: rgba(255,107,0,.15) !important;
  color: #ffffff !important;
}
body.kg-dark .kg-set-opt.active {
  background: rgba(255,107,0,.12) !important;
  border-color: #FF6B00 !important;
  color: #FF8C00 !important;
}

/* ── Tables (used in results, panchang, muhurat etc.) ── */
body.kg-dark table { color: #ffffff !important; }
body.kg-dark th {
  background: #261200 !important;
  color: #FFD700 !important;
  border-color: rgba(255,107,0,.15) !important;
}
body.kg-dark td {
  border-color: rgba(255,107,0,.08) !important;
  color: #ffffff !important;
}
body.kg-dark tr:nth-child(even) td { background: rgba(255,107,0,.03) !important; }
body.kg-dark tr:hover td { background: rgba(255,107,0,.06) !important; }

/* ── Inline result divs with hardcoded white/light backgrounds ── */
body.kg-dark [style*="background:#fff"],
body.kg-dark [style*="background: #fff"],
body.kg-dark [style*="background:white"],
body.kg-dark [style*="background: white"],
body.kg-dark [style*="background:#FFFFFF"],
body.kg-dark [style*="background: #FFFFFF"] {
  background: #111111 !important;
}
body.kg-dark [style*="background:#FAFAFA"],
body.kg-dark [style*="background:#FFFFFF"],
body.kg-dark [style*="background:#FFFFFF"],
body.kg-dark [style*="background:#FFF3E0"],
body.kg-dark [style*="background:#FFFFF0"] {
  background: #111111 !important;
}
body.kg-dark [style*="color:#000000"],
body.kg-dark [style*="color: #000000"],
body.kg-dark [style*="color:#333"],
body.kg-dark [style*="color:#555"],
body.kg-dark [style*="color:#000"] {
  color: #ffffff !important;
}
body.kg-dark [style*="color:#1a1a1a"] { color: #D4C4A0 !important; }
body.kg-dark [style*="color:#7A5F2A"] { color: #A08060 !important; }
body.kg-dark [style*="color:#7B0D1E"] { color: #FF8C40 !important; }
body.kg-dark [style*="border-color:#E8D5A0"],
body.kg-dark [style*="border: 1px solid #E8D5A0"],
body.kg-dark [style*="border:1px solid #E8D5A0"] {
  border-color: rgba(255,107,0,.18) !important;
}

/* ── Inline gradient backgrounds with light colors ── */
body.kg-dark [style*="background:linear-gradient(135deg,rgba(255,107,0,.12)"],
body.kg-dark [style*="background: linear-gradient(135deg,rgba(255,107,0,.12)"] {
  background: linear-gradient(135deg,rgba(255,107,0,.08),rgba(123,13,30,.12)) !important;
  border-color: rgba(255,107,0,.2) !important;
}
body.kg-dark [style*="background:rgba(255,107,0,.06)"],
body.kg-dark [style*="background:rgba(255,107,0,.08)"] {
  background: rgba(255,255,255,.08) !important;
}

/* ── Result area headings & labels ── */
body.kg-dark .res-head,
body.kg-dark .section-title,
body.kg-dark .result-title,
body.kg-dark .kg-sec-title,
body.kg-dark .panel-title { color: #FFD700 !important; }
body.kg-dark .res-sub,
body.kg-dark .section-sub,
body.kg-dark .result-sub { color: rgba(255,255,255,.6) !important; }

/* ── Chart SVG line colors — handled via --chart-line var in JS ── */
body.kg-dark .chart-container { background: #111111 !important; }
body.kg-dark svg text { fill: #ffffff !important; }
body.kg-dark svg .chart-lagna-bg { fill: rgba(255,140,0,.08) !important; }

/* ── Forecast / transit / dasha result cards ── */
body.kg-dark .forecast-card,
body.kg-dark .transit-row,
body.kg-dark .dasha-row,
body.kg-dark .gochar-card,
body.kg-dark .period-card {
  background: #111111 !important;
  border-color: rgba(255,107,0,.12) !important;
  color: #ffffff !important;
}

/* ── Panchang ── */
body.kg-dark .panch-card,
body.kg-dark .panch-item,
body.kg-dark .panch-row,
body.kg-dark .tithi-card {
  background: #111111 !important;
  border-color: rgba(255,107,0,.12) !important;
  color: #ffffff !important;
}

/* ── Matching ── */
body.kg-dark .match-card,
body.kg-dark .guna-row,
body.kg-dark .koot-card {
  background: #111111 !important;
  border-color: rgba(255,107,0,.12) !important;
  color: #ffffff !important;
}

/* ── Muhurat ── */
body.kg-dark .muh-slot,
body.kg-dark .muh-card,
body.kg-dark .choghadiya-row {
  background: #111111 !important;
  border-color: rgba(255,107,0,.12) !important;
  color: #ffffff !important;
}

/* ── Saturn transit ── */
body.kg-dark .sat-card,
body.kg-dark .sat-phase { background: #111111 !important; color: #ffffff !important; }

/* ── Pricing page ── */
body.kg-dark .pricing-card,
body.kg-dark .plan-card,
body.kg-dark .feature-row {
  background: #111111 !important;
  border-color: rgba(255,107,0,.15) !important;
  color: #ffffff !important;
}

/* ── Auth / Login forms ── */
body.kg-dark .auth-card,
body.kg-dark .login-card,
body.kg-dark .register-card {
  background: #111111 !important;
  border-color: rgba(255,107,0,.15) !important;
}

/* ── Modals / overlays ── */
body.kg-dark .modal-content,
body.kg-dark .overlay-card,
body.kg-dark .kg-modal {
  background: #111111 !important;
  border-color: rgba(255,107,0,.18) !important;
  color: #ffffff !important;
}

/* ── Spin / loader ── */
body.kg-dark .spin {
  border-color: rgba(255,107,0,.2) !important;
  border-top-color: #FF6B00 !important;
}

/* ── Ticker (home scrolling) ── */
body.kg-dark .av-ticker-wrap::before { background: linear-gradient(90deg, #000000, transparent) !important; }
body.kg-dark .av-ticker-wrap::after  { background: linear-gradient(-90deg, #000000, transparent) !important; }

/* ── Rashifal result ── */
body.kg-dark .rashifal-card,
body.kg-dark .rashi-result,
body.kg-dark .zodiac-card {
  background: #111111 !important;
  border-color: rgba(255,107,0,.12) !important;
  color: #ffffff !important;
}

/* ── PDF export button area ── */
body.kg-dark .pdf-bar { background: #111111 !important; border-color: rgba(255,107,0,.12) !important; }

/* ── Hora / Gochar tables ── */
body.kg-dark .hora-table,
body.kg-dark .hora-cell {
  background: #111111 !important;
  border-color: rgba(255,107,0,.1) !important;
  color: #ffffff !important;
}
body.kg-dark .hora-cell.good  { background: rgba(46,125,50,.15) !important; }
body.kg-dark .hora-cell.bad   { background: rgba(198,40,40,.15) !important; }

/* ── AI chat input bar in results ── */
body.kg-dark .ai-input-row,
body.kg-dark .ai-ask-bar {
  background: #111111 !important;
  border-color: rgba(255,107,0,.15) !important;
}

/* ── Star / badge indicators ── */
body.kg-dark .badge-good  { background: rgba(46,125,50,.2) !important; color: #81C784 !important; }
body.kg-dark .badge-bad   { background: rgba(198,40,40,.2) !important; color: #EF9A9A !important; }
body.kg-dark .badge-warn  { background: rgba(255,152,0,.15) !important; color: #FFCC80 !important; }
body.kg-dark .badge-neutral { background: rgba(255,255,255,.08) !important; color: #FFB74D !important; }

/* ── Scrollbar in dark mode (already partial, ensure all) ── */
body.kg-dark * { scrollbar-color: #FF6B00 #000000; }
body.kg-dark ::-webkit-scrollbar-track { background: #000000 !important; }
body.kg-dark ::-webkit-scrollbar-thumb { background: #FF6B00 !important; border-radius: 4px; }

/* ── Autocomplete dropdown ── */
body.kg-dark .ac-list {
  background: #111111 !important;
  border-color: rgba(255,107,0,.2) !important;
}
body.kg-dark .ac-item { color: #ffffff !important; }
body.kg-dark .ac-item:hover, body.kg-dark .ac-item.sel {
  background: rgba(255,255,255,.08) !important;
}
body.kg-dark .ac-name { color: #ffffff !important; }
body.kg-dark .ac-sub  { color: #A08060 !important; }

/* ── Notification dropdown ── */
body.kg-dark #kg-notif-dropdown {
  background: #111111 !important;
  border-color: rgba(255,107,0,.2) !important;
}
body.kg-dark .notif-item { border-color: rgba(255,107,0,.08) !important; color: #ffffff !important; }
body.kg-dark .notif-item:hover { background: rgba(255,107,0,.06) !important; }

/* ── Wallet / coin elements ── */
body.kg-dark .coin-badge { background: rgba(255,140,0,.15) !important; color: #FFB74D !important; }
body.kg-dark .wallet-card { background: #111111 !important; border-color: rgba(255,107,0,.15) !important; }

/* ── Pro / membership badge ── */
body.kg-dark .pro-badge { background: linear-gradient(135deg,#B8860B,#D4A017) !important; color: #000000 !important; }

/* ── More menu ── */
body.kg-dark #kg-more-menu {
  background: #111111 !important;
  border-color: rgba(255,107,0,.2) !important;
}
body.kg-dark #kg-more-menu a, body.kg-dark #kg-more-menu button {
  color: #ffffff !important;
}
body.kg-dark #kg-more-menu a:hover, body.kg-dark #kg-more-menu button:hover {
  background: rgba(255,107,0,.08) !important;
}

/* ── Topbar dark mode already covered; ensure logo text readable ── */
body.kg-dark .kg-topbar-title { color: #FFD700 !important; }
body.kg-dark .kg-topbar-sub   { color: rgba(255,200,130,.55) !important; }

/* ── Numerology result section headings (generated by JS) ── */
body.kg-dark .knum-panel,
body.kg-dark .knum-section,
body.kg-dark .num-result-card,
body.kg-dark .num-card {
  background: #111111 !important;
  border-color: rgba(255,107,0,.12) !important;
  color: #ffffff !important;
}

/* ── Saturn transit special ── */
body.kg-dark .kg-sat-card { background: #111111 !important; border-color: rgba(255,107,0,.12) !important; }

/* ── Remedies panel (generated HTML) ── */
body.kg-dark #t-remedies [style*="background:linear-gradient(135deg,rgba(255,107,0,.12)"] {
  background: linear-gradient(135deg,rgba(255,107,0,.07),rgba(123,13,30,.1)) !important;
}
body.kg-dark #t-remedies [style*="color:var(--maroon"] { color: #FF8C40 !important; }
body.kg-dark #t-remedies [style*="background:#fff"],
body.kg-dark #t-remedies [style*="background: #fff"] { background: #111111 !important; }

/* ── Ensure tpanel bg is always dark ── */
body.kg-dark .tpanel { background: #000000 !important; }
body.kg-dark .tpanel.active { background: #000000 !important; }

/* ── PDF Export bar ── */
body.kg-dark #kg-pdf-bar,
body.kg-dark .kg-pdf-actions {
  background: #111111 !important;
  border-color: rgba(255,107,0,.12) !important;
}


/* ═══════════════════════════════════════════════════════════
   DARK MODE — HEADER & CHART COMPREHENSIVE FIXES  v7.6
   Fixes: header forced light colors, chart SVG text colors,
   user menu inline styles in dark mode
═══════════════════════════════════════════════════════════ */

/* ── Force header topbar fully dark — override any inherited light styles ── */
body.kg-dark .kg-topbar,
body.kg-dark #kg-topbar {
  background: linear-gradient(135deg, #000000 0%, #0a0a0a 60%, #000000 100%) !important;
  border-bottom: 1px solid rgba(255,107,0,.2) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.6) !important;
}
body.kg-dark .kg-topbar *,
body.kg-dark #kg-topbar * {
  color: #ffffff !important;
}
body.kg-dark .kg-logo-text { color: #FFD700 !important; }
body.kg-dark .kg-logo-icon { color: #FFD700 !important; }
body.kg-dark .kg-topbar-center { color: rgba(255,220,150,.9) !important; }

/* ── User bar in header — override inline styles ── */
body.kg-dark #kg-user-bar [style*="background:rgba(255,107,0"],
body.kg-dark #kg-user-bar [style*="background: rgba(255,107,0"] {
  background: rgba(255,107,0,.15) !important;
  border-color: rgba(255,107,0,.35) !important;
}
body.kg-dark #kg-user-bar span[style*="color:var(--text"],
body.kg-dark #kg-user-bar span[style*="color: var(--text"] {
  color: #ffffff !important;
}
body.kg-dark .kg-tb-notif,
body.kg-dark .kg-tb-search-btn,
body.kg-dark .kg-tb-btn {
  color: rgba(255,220,150,.8) !important;
  background: rgba(255,107,0,.08) !important;
  border-color: rgba(255,107,0,.2) !important;
}
body.kg-dark .kg-tb-notif:hover,
body.kg-dark .kg-tb-search-btn:hover,
body.kg-dark .kg-tb-btn:hover {
  background: rgba(255,107,0,.18) !important;
  color: #FF8C00 !important;
}

/* ── Chart SVG dark mode — text visibility ── */
body.kg-dark .chart-container,
body.kg-dark [id^="kg-chart-"],
body.kg-dark [id^="chart-"],
body.kg-dark .chart-wrap svg {
  background: #111111 !important;
}
body.kg-dark svg text {
  fill: #ffffff !important;
}
body.kg-dark svg text[fill="#c09030"],
body.kg-dark svg text[fill="#c9a840"],
body.kg-dark svg text[fill="#c9a030"] {
  fill: #e0a030 !important;
}
body.kg-dark svg text[fill="#8b5e00"],
body.kg-dark svg text[fill="#9b6e10"],
body.kg-dark svg text[fill="#8b5e00"],
body.kg-dark svg text[fill="#5a3000"],
body.kg-dark svg text[fill="#7a5000"] {
  fill: #FFD700 !important;
}
body.kg-dark svg text[fill="#5a2000"],
body.kg-dark svg text[fill="#7b4010"],
body.kg-dark svg text[fill="#5a1500"],
body.kg-dark svg text[fill="#7b2b10"] {
  fill: #FFD070 !important;
}
body.kg-dark svg rect[fill="#fefcf7"],
body.kg-dark svg rect[fill="#fefdf8"],
body.kg-dark svg rect[fill="#f5f0e8"],
body.kg-dark svg rect[fill="#f4d99a"],
body.kg-dark svg rect[fill="#eecc7a"],
body.kg-dark svg rect[fill="#ffffff"],
body.kg-dark svg rect[fill="#fafafa"],
body.kg-dark svg rect[fill="#f5f5f5"] {
  fill: #111111 !important;
}
body.kg-dark svg .chart-lagna-bg,
body.kg-dark svg polygon[fill^="rgba(184,134,11"],
body.kg-dark svg rect[fill^="rgba(184,134,11"] {
  fill: rgba(255,140,0,.12) !important;
}

/* ── Kundali analysis result sections ── */
body.kg-dark .tcard,
body.kg-dark .stitle,
body.kg-dark .ere-panel,
body.kg-dark .ere-section,
body.kg-dark .ere-panel-title,
body.kg-dark .ere-section-title {
  background: #111111 !important;
  border-color: rgba(255,107,0,.12) !important;
  color: #ffffff !important;
}
body.kg-dark .ere-panel-title,
body.kg-dark .ere-section-title,
body.kg-dark .stitle { color: #FFD700 !important; }
body.kg-dark .ere-text { color: #D4C4A0 !important; }
body.kg-dark .ere-remedy-item {
  background: rgba(255,107,0,.06) !important;
  border-color: rgba(255,107,0,.15) !important;
  color: #ffffff !important;
}

/* ── Panchang tab cards ── */
body.kg-dark .pc {
  background: #111111 !important;
  border-color: rgba(255,107,0,.12) !important;
}
body.kg-dark .plbl { color: rgba(255,200,130,.55) !important; }
body.kg-dark .pval { color: #ffffff !important; }
body.kg-dark .psub { color: #A08060 !important; }

/* ── Inline style overrides for result HTML injected by PHP ── */
body.kg-dark [style*="background:var(--card"],
body.kg-dark [style*="background: var(--card"] {
  background: #111111 !important;
}
body.kg-dark [style*="border:1px solid var(--border"],
body.kg-dark [style*="border: 1px solid var(--border"] {
  border-color: rgba(255,107,0,.15) !important;
}
body.kg-dark [style*="color:var(--text"],
body.kg-dark [style*="color: var(--text"] {
  color: #ffffff !important;
}
body.kg-dark [style*="color:var(--muted"],
body.kg-dark [style*="color: var(--muted"] {
  color: #A08060 !important;
}
body.kg-dark [style*="color:var(--saffron"],
body.kg-dark [style*="color: var(--saffron"] {
  color: #FF8C00 !important;
}
body.kg-dark [style*="color:var(--gold2"],
body.kg-dark [style*="color: var(--gold2"] {
  color: #D4A020 !important;
}

/* ══════════════════════════════════════════════
   KG-LEGEND — Dark Mode Overrides
   ══════════════════════════════════════════════ */
/* Outer legend wrapper */
body.kg-dark .kg-legend {
  background: rgba(255,107,0,.04) !important;
  border: 1px solid rgba(255,107,0,.15) !important;
}
/* Each badge item — JS applies data-dbg on toggle;
   CSS fallback dark colors for items rendered server-side */
body.kg-dark .kg-legend-item {
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(255,200,130,.15) !important;
}
body.kg-dark .kg-legend-item[data-dbg] {
  /* overridden by JS kgApplyLegendDark() */
}
/* Symbol and label color in dark mode */
body.kg-dark .kg-legend-sym,
body.kg-dark .kg-legend-lbl {
  filter: brightness(1.5);
}

/* ── Matching form: single column on mobile ── */
@media (max-width: 640px) {
    .kg-match-persons-grid {
        grid-template-columns: 1fr !important;
    }
}


/* ── Graha Detail Engine — Detailed Planet Cards ── */
#kg-graha-detail .tcard,
.kg-graha-detail-section .tcard {
    margin-top: 10px;
}

/* Chat AI Button */
.kg-chat-ai-wrapper {
    margin: 16px 0;
    text-align: center;
}
.kg-chat-ai-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #FF6B00, #E65100);
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 12px 28px;
    font-size: .88rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(255,107,0,.35);
    transition: transform .2s, box-shadow .2s;
    letter-spacing: .3px;
    text-decoration: none;
}
.kg-chat-ai-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 28px rgba(255,107,0,.5);
}
body.kg-dark .kg-chat-ai-btn {
    box-shadow: 0 4px 20px rgba(255,107,0,.5);
}

/* Panchadha maitri badges */
.kg-panchadha-adhi-mitra { color: #1B5E20; }
.kg-panchadha-mitra      { color: #2E7D32; }
.kg-panchadha-sama       { color: #795548; }
.kg-panchadha-shatru     { color: #C62828; }
.kg-panchadha-adhi-shatru{ color: #7B0000; }

/* Rashi relation badge */
.kg-rashi-rel-own    { color: #1565C0; }
.kg-rashi-rel-exalt  { color: #1B5E20; }
.kg-rashi-rel-debil  { color: #B71C1C; }
.kg-rashi-rel-mitra  { color: #2E7D32; }
.kg-rashi-rel-shatru { color: #C62828; }
.kg-rashi-rel-sama   { color: #795548; }

/* Mobile adjustments for new planet cards */
@media (max-width: 600px) {
    .kg-chat-ai-btn {
        padding: 10px 18px;
        font-size: .8rem;
    }
    #kg-graha-detail {
        font-size: .78rem;
    }
}

/* ══════════════════════════════════════════════════════════
   IPHONE BROWSER CHROME FIX — 100dvh support
   Prevents input bar from hiding behind Safari's address bar
   ══════════════════════════════════════════════════════════ */
@supports (height: 100dvh) {
  body.kg-chat-fullpage .kgc,
  html.kg-chat-fullpage .kgc {
    height: calc(100dvh - var(--kg-topbar-h, 52px)) !important;
    top: var(--kg-topbar-h, 52px) !important;
    bottom: auto !important;
  }
  /* Non-fullpage (embedded chat with bottom nav) */
  body:not(.kg-chat-fullpage) .kgc {
    height: calc(100dvh - var(--kg-topbar-h, 52px) - var(--kg-bnav-h, 64px)) !important;
    top: var(--kg-topbar-h, 52px) !important;
    bottom: auto !important;
  }
}

/* Input area always adds safe-area padding at bottom */
.kgc-input-area {
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
}

/* ══════════════════════════════════════════════════════════
   v7.5.4 — CRITICAL MOBILE FIXES
   1. Chat input — browser chrome (URL bar) ke peeche hide hona fix
   2. Hamburger menu — sidebar toggle fix
   3. iOS Safari safe area fix
   ══════════════════════════════════════════════════════════ */

/* ── 1. Mobile Browser Chrome Fix for .kgc ──
   Problem: bottom:0 browser's VISIBLE bottom ko nahi maanta — URL bar chrome
   ke neeche chala jaata hai iOS Safari / Chrome mobile mein.
   Fix: dvh (dynamic viewport height) use karo jo actual visible area hai.
   Fallback: 100vh for older browsers. */

.kgc {
  /* Modern browsers: dvh = visible height (URL bar exclude) */
  height: 100dvh !important;
  height: -webkit-fill-available !important;
  top: var(--kg-topbar-h, 52px) !important;
  bottom: env(safe-area-inset-bottom, 0px) !important;
}

/* iOS Safari specific: use fill-available */
@supports (-webkit-touch-callout: none) {
  .kgc {
    height: -webkit-fill-available !important;
    /* Top se bottom tak — topbar height minus karo */
    max-height: calc(100vh - var(--kg-topbar-h, 52px)) !important;
  }
}

/* ── kgc-messages: flex:1 se grow kare, scroll internally ── */
.kgc-messages {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* ── kgc-input-area: ALWAYS visible at bottom, never hidden ──
   Extra padding for browser chrome safe area */
.kgc-input-area {
  flex-shrink: 0 !important;
  position: relative !important;
  z-index: 20 !important;
  /* Safe area bottom padding — iOS notch + browser bar ke liye */
  padding-bottom: max(12px, env(safe-area-inset-bottom, 12px)) !important;
}

/* ── 2. Hamburger/Sidebar — ensure overlay visible ──
   Problem: sidebar overlay nahi dikhta jab sidebar open ho
   FIX: overlay topbar ke neeche se start — top:52px — taaki
   kg-topbar-right (profile, notifications) always clickable rahe */
#kg-sidebar-overlay,
.kg-sidebar-overlay {
  display: none;
  position: fixed !important;
  top: 52px !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: rgba(0,0,0,.5) !important;
  z-index: 10050 !important;
  -webkit-tap-highlight-color: transparent;
}
#kg-sidebar-overlay.kg-sidebar-open,
.kg-sidebar-overlay.kg-sidebar-open {
  display: block !important;
}
#kg-sidebar-drawer,
.kg-sidebar-drawer {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  width: min(280px, 85vw) !important;
  z-index: 10060 !important;
  transform: translateX(-100%) !important;
  transition: transform .25s ease !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}
#kg-sidebar-drawer.kg-sidebar-open,
.kg-sidebar-drawer.kg-sidebar-open {
  transform: translateX(0) !important;
}

/* ── 3. Hamburger button — always tappable ── */
#kg-hamburger-btn,
.kg-hamburger {
  position: relative !important;
  z-index: 10100 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
  min-width: 36px !important;
  min-height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;
  gap: 5px !important;
  padding: 6px !important;
  border: none !important;
  background: transparent !important;
}

/* ── 4. Old .chat-input-area (non-kgc pages) — same fix ── */
.chat-input-area {
  flex-shrink: 0 !important;
  position: sticky !important;
  bottom: 0 !important;
  bottom: env(safe-area-inset-bottom, 0px) !important;
  padding-bottom: max(10px, env(safe-area-inset-bottom, 10px)) !important;
  z-index: 50 !important;
}

/* ── 5. .kg-bottom-nav safe area ── */
.kg-bottom-nav,
#kg-bottom-nav {
  padding-bottom: max(4px, env(safe-area-inset-bottom, 4px)) !important;
}

/* ── 6. Viewport meta tag effect: 100dvh support ── */
@supports (height: 100dvh) {
  .kgc {
    height: calc(100dvh - var(--kg-topbar-h, 52px)) !important;
    top: var(--kg-topbar-h, 52px) !important;
    bottom: auto !important;
  }
  body.kg-chat-fullpage .kgc {
    height: calc(100dvh - var(--kg-topbar-h, 52px)) !important;
    top: var(--kg-topbar-h, 52px) !important;
    bottom: auto !important;
  }
}


/* ══════════════════════════════════════════════════════════════════
   KG CHAT WIDGET — COMPLETE CSS RESET & REDESIGN v8.0
   Fixes Safari mobile browser nav bar overlap on input area.
   Strategy: Use dvh (dynamic viewport height) everywhere, flex column
   layout so input never goes behind browser chrome.
   All previous conflicting rules are overridden here with max specificity.
   ══════════════════════════════════════════════════════════════════ */

/* ── STEP 1: Hard-reset ALL previous .kgc positioning rules ── */
html body .kgc,
html body div.kgc,
html body .kgc.kg-standalone,
html body #kgc-omastro-general,
html body #kgc-kgpred,
html body .kgc-omastro,
html body.kg-chat-fullpage .kgc,
html body.kgc-omastro-host .kgc,
html body.kg-omastro-standalone .kgc {
  /* Reset everything from old rules */
  all: unset !important;

  /* Re-apply base box model */
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;

  /* Positioning: fixed, full viewport, below topbar */
  position: fixed !important;
  top: var(--kg-topbar-h, 52px) !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 8000 !important;

  /* Height: use dvh (dynamic — excludes browser chrome) */
  height: calc(100dvh - var(--kg-topbar-h, 52px)) !important;
  /* Fallback for browsers without dvh */
  height: calc(var(--window-inner-height, 100vh) - var(--kg-topbar-h, 52px)) !important;

  /* Ensure visible */
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: all !important;

  /* Reset background & font from 'all:unset' */
  background: #0a0a0a !important;
  font-family: 'Rajdhani', 'Segoe UI', sans-serif !important;
  color: #e0d0b0 !important;
}

/* iOS Safari: -webkit-fill-available is the safest height for address bar */
@supports (-webkit-touch-callout: none) {
  html body .kgc,
  html body div.kgc,
  html body .kgc.kg-standalone,
  html body #kgc-omastro-general,
  html body #kgc-kgpred {
    /* Fill available space minus topbar — iOS Safari address bar safe */
    height: calc(-webkit-fill-available - var(--kg-topbar-h, 52px)) !important;
    /* Fallback using svh (small viewport height — worst case, always visible) */
    height: calc(100svh - var(--kg-topbar-h, 52px)) !important;
  }
}

/* ── STEP 2: Messages area — fills remaining space, scrollable ── */
html body .kgc .kgc-messages,
html body .kgc .kgc-body {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  padding: 14px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  background: #0a0a0a !important;
}

/* ── STEP 3: Input area — ALWAYS pinned to flex bottom, never hidden ──
   Key insight: with flex column + flex:1 on messages, input area always
   sits at the bottom of the flex container. NO position:fixed needed here
   — the parent .kgc is already fixed and ends at the VISIBLE bottom (dvh).
   This is the only reliable fix for Safari mobile. ── */
html body .kgc .kgc-input-area,
html body .kgc .kgc-input-chatgpt {
  flex-shrink: 0 !important;
  /* Reset any position that was breaking the layout */
  position: relative !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;

  /* Padding: standard + safe area inset for notch */
  padding: 10px 12px !important;
  padding-bottom: max(10px, env(safe-area-inset-bottom, 10px)) !important;

  background: #111111 !important;
  border-top: 1px solid #1e1e1e !important;
  z-index: 10 !important;
  width: 100% !important;
}

/* ── STEP 4: ChatGPT-style input wrap ── */
html body .kgc .kgc-input-wrap {
  display: flex !important;
  align-items: flex-end !important;
  gap: 6px !important;
  background: #1a1a1a !important;
  border: 1.5px solid #2a2a2a !important;
  border-radius: 14px !important;
  padding: 6px 8px !important;
  transition: border-color .2s !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
html body .kgc .kgc-input-wrap:focus-within {
  border-color: #FF6B00 !important;
}

/* ── STEP 5: Textarea ── */
html body .kgc .kgc-input-textarea {
  flex: 1 !important;
  resize: none !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  padding: 6px 4px !important;
  font-size: .9rem !important;
  font-family: 'Rajdhani', 'Segoe UI', sans-serif !important;
  color: #e0d0b0 !important;
  line-height: 1.45 !important;
  max-height: 110px !important;
  min-height: 22px !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  caret-color: #FF6B00 !important;
}
html body .kgc .kgc-input-textarea::placeholder {
  color: #555 !important;
}

/* ── STEP 6: Input buttons ── */
html body .kgc .kgc-input-btn,
html body .kgc .kgc-input-right button {
  flex-shrink: 0 !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  border: none !important;
  background: rgba(255,107,0,.12) !important;
  color: #FF6B00 !important;
  font-size: .85rem !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background .15s !important;
}
html body .kgc .kgc-input-btn:hover,
html body .kgc .kgc-input-right button:hover {
  background: rgba(255,107,0,.25) !important;
}

/* ── STEP 7: Send button — highlighted ── */
html body .kgc .kgc-send-btn,
html body .kgc button[onclick*="Send"],
html body .kgc button[onclick*="send"] {
  background: linear-gradient(135deg,#FF6B00,#FF8C00) !important;
  color: #fff !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 12px !important;
}

/* ── STEP 8: Input footer (model info etc) ── */
html body .kgc .kgc-input-footer {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 4px 2px 0 !important;
  font-size: .62rem !important;
  color: #444 !important;
}

/* ── STEP 9: Locked input state ── */
html body .kgc .kgc-input-locked {
  text-align: center !important;
  padding: 14px !important;
  color: #555 !important;
  font-size: .84rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}

/* ── STEP 10: History sidebar if present ── */
html body .kgc .kgc-history-panel {
  flex-shrink: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* ── STEP 11: Update window.innerHeight CSS var on resize
   (injected via JS in kundali-ui-fixes.js — this rule reads it) ── */

/* ── STEP 12: Bottom nav safe area ── */
html body .kg-bottomnav,
html body #kg-bottomnav {
  padding-bottom: max(8px, env(safe-area-inset-bottom, 8px)) !important;
}

/* ── STEP 13: Standalone chat page (no KG app wrapper)
   When chat is on its own WP page via shortcode, the .kgc top should be 0
   since the KG global header sits above via kg_global_nav mechanism ── */
html body.kgc-omastro-host .kgc,
html body.kg-omastro-standalone .kgc {
  top: 0 !important;
  height: 100dvh !important;
  height: 100svh !important;
}
@supports (-webkit-touch-callout: none) {
  html body.kgc-omastro-host .kgc,
  html body.kg-omastro-standalone .kgc {
    height: -webkit-fill-available !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   KG CHAT WIDGET — COMPLETE REDESIGN v9.0
   - Full CSS reset of all previous conflicting rules
   - Clean modern dark UI  
   - All popups (model picker, attach, place-AC) escape overflow:hidden correctly
   - Pointer-events fully working on all buttons
   ══════════════════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────
   1. CONTAINER — Full-screen chat shell
   ──────────────────────────────────────────────── */
html body .kgc,
html body .kgc-omastro,
html body [id^="kgc-omastro"],
html body .kgc.kg-standalone {
  all: unset !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  position: fixed !important;
  top: 52px !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: calc(100dvh - 52px) !important;
  background: #0d0d0f !important;
  overflow: hidden !important;
  font-family: 'Rajdhani', 'Segoe UI', system-ui, sans-serif !important;
  color: #ffffff !important;
  z-index: 8000 !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: all !important;
  isolation: isolate !important;
}
@supports (-webkit-touch-callout: none) {
  html body .kgc,
  html body .kgc-omastro,
  html body [id^="kgc-omastro"],
  html body .kgc.kg-standalone {
    height: calc(100svh - 52px) !important;
  }
}

/* ────────────────────────────────────────────────
   2. INTERNAL TOPBAR (inside .kgc — chat header)
   ──────────────────────────────────────────────── */
html body .kgc .kgc-topbar {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 12px !important;
  height: 52px !important;
  background: #141416 !important;
  border-bottom: 1px solid rgba(255,107,0,.12) !important;
  position: relative !important;
  z-index: 2 !important;
  pointer-events: all !important;
}
html body .kgc .kgc-topbar-left,
html body .kgc .kgc-topbar-right {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  pointer-events: all !important;
}
html body .kgc .kgc-title {
  font-size: .9rem !important;
  font-weight: 800 !important;
  color: #f0e8d8 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
html body .kgc .kgc-context-badge {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: .7rem !important;
  background: rgba(255,107,0,.15) !important;
  color: #FF6B00 !important;
  border: 1px solid rgba(255,107,0,.3) !important;
  padding: 2px 8px !important;
  border-radius: 20px !important;
  font-weight: 700 !important;
}

/* ────────────────────────────────────────────────
   3. ICON BUTTONS (shared)
   ──────────────────────────────────────────────── */
html body .kgc .kgc-btn-icon {
  all: unset !important;
  box-sizing: border-box !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  color: #a0947a !important;
  font-size: .82rem !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background .15s, color .15s !important;
  flex-shrink: 0 !important;
  pointer-events: all !important;
}
html body .kgc .kgc-btn-icon:hover {
  background: rgba(255,107,0,.12) !important;
  color: #FF6B00 !important;
  border-color: rgba(255,107,0,.2) !important;
}

/* ────────────────────────────────────────────────
   4. HISTORY SIDEBAR
   ──────────────────────────────────────────────── */
html body .kgc .kgc-sidebar-overlay {
  display: none !important;
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,.6) !important;
  z-index: 20 !important;
  pointer-events: all !important;
}
html body .kgc .kgc-sidebar-overlay.open { display: block !important; }
html body .kgc .kgc-sidebar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  width: min(280px, 82vw) !important;
  background: #141416 !important;
  border-right: 1px solid rgba(255,107,0,.15) !important;
  z-index: 21 !important;
  transform: translateX(-100%) !important;
  transition: transform .24s ease !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  pointer-events: all !important;
}
html body .kgc .kgc-sidebar.open { transform: translateX(0) !important; }
html body .kgc .kgc-sidebar-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 14px !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  font-weight: 800 !important;
  font-size: .88rem !important;
  color: #f0e8d8 !important;
  flex-shrink: 0 !important;
}
html body .kgc .kgc-sidebar-actions {
  padding: 10px 12px !important;
  flex-shrink: 0 !important;
}
html body .kgc .kgc-sidebar-btn {
  all: unset !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: 100% !important;
  padding: 9px 0 !important;
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,107,0,.25) !important;
  border-radius: 10px !important;
  color: #FF6B00 !important;
  font-size: .82rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  pointer-events: all !important;
}
html body .kgc .kgc-history-list {
  flex: 1 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 8px 8px !important;
}
html body .kgc .kgc-history-empty {
  text-align: center !important;
  padding: 30px 16px !important;
  color: #555 !important;
  font-size: .82rem !important;
}
html body .kgc .kgc-sidebar-login {
  text-align: center !important;
  padding: 30px 16px !important;
  color: #777 !important;
  font-size: .84rem !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
}

/* ────────────────────────────────────────────────
   5. MESSAGES AREA
   ──────────────────────────────────────────────── */
html body .kgc .kgc-messages {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  padding: 16px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  background: #0d0d0f !important;
  scroll-behavior: smooth !important;
}
html body .kgc .kgc-messages::-webkit-scrollbar { width: 3px !important; }
html body .kgc .kgc-messages::-webkit-scrollbar-thumb { background: #2a2a2e !important; border-radius: 3px !important; }


/* ═══════════════════════════════════════════════════════════
   FIX PATCH v7.5.8 — Resolve all conflicting nav rules
   This block is the FINAL authority. Loaded last.
═══════════════════════════════════════════════════════════ */

/* Remove forced dark background — light mode */
.kg-liquid-nav,
.kg-bottomnav.kg-liquid-nav,
#kg-bottomnav.kg-liquid-nav,
#kg-bottomnav,
.kg-bottomnav {
  background: rgba(255, 253, 248, 0.88) !important;
  border-top: 1px solid rgba(200, 160, 80, 0.22) !important;
  height: 58px !important;
  max-height: 58px !important;
  z-index: 10000 !important;
}

/* Dark mode */
body.kg-dark .kg-liquid-nav,
body.kg-dark .kg-bottomnav.kg-liquid-nav,
body.kg-dark #kg-bottomnav.kg-liquid-nav,
body.kg-dark #kg-bottomnav,
body.kg-dark .kg-bottomnav {
  background: rgba(14, 6, 1, 0.88) !important;
  border-top-color: rgba(255, 107, 0, 0.15) !important;
}

/* Center button — no float, inline with other items */
#kg-bottomnav .kg-bnav-center .kg-bnav-icon-wrap,
.kg-bottomnav .kg-bnav-center .kg-bnav-icon-wrap {
  width: 36px !important;
  height: 36px !important;
  margin-top: 0 !important;
  transform: none !important;
  /* No negative margin-top that lifts it above the bar */
}

/* Uniform item layout */
#kg-bottomnav .kg-bnav-item,
.kg-bottomnav .kg-bnav-item {
  justify-content: center !important;
  padding: 5px 0 4px !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 2px !important;
}

/* Label uniformity */
#kg-bottomnav .kg-bnav-item > span:not(.kg-bnav-icon-wrap),
.kg-bottomnav .kg-bnav-item > span:not(.kg-bnav-icon-wrap) {
  font-size: 0.56rem !important;
  line-height: 1 !important;
  margin-top: 1px !important;
}

/* Scroll-hide */
.kg-bnav-hidden {
  transform: translateY(100%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Hide on AI/chat pages */
body.kg-chat-fullpage #kg-bottomnav,
body.kg-chat-fullpage .kg-bottomnav,
body.kg-omastro-fullpage #kg-bottomnav,
body.kg-omastro-fullpage .kg-bottomnav {
  display: none !important;
}

/* Notification dropdown — always visible */
#kg-notif-dropdown {
  position: fixed !important;
  z-index: 2147483647 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
/* ═══════════════════════════════════════════════════════════
   OMX INPUT SYSTEM v1
   (omx-input-v1.css merged below — omx-input-v1.css can be deleted)
   ═══════════════════════════════════════════════════════════ */

/* ── CSS variables (light mode base) ── */
:root {
  --omx-bg:          #1c1c22;
  --omx-bg2:         #252530;
  --omx-border:      rgba(255,107,0,.18);
  --omx-border2:     rgba(255,107,0,.35);
  --omx-text:        #e8dcc8;
  --omx-text2:       #b8a898;
  --omx-muted:       #7a6a5a;
  --omx-pill-bg:     rgba(255,255,255,.06);
  --omx-pill-hover:  rgba(255,107,0,.14);
  --omx-ta-bg:       rgba(255,255,255,.04);
  --omx-ta-focus:    rgba(255,107,0,.22);
  --omx-chip-bg:     rgba(255,107,0,.10);
  --omx-chip-text:   #ffb870;
  --omx-chip-hover:  rgba(255,107,0,.22);
  --omx-panel-bg:    #1e1e28;
  --omx-shadow:      0 -4px 24px rgba(0,0,0,.45);
  --omx-radius:      14px;
  --omx-radius2:     10px;
  --omx-radius3:     8px;
}

/* Light theme override when NOT in dark mode */
body:not(.kg-dark) {
  --omx-bg:          #ffffff;
  --omx-bg2:         #faf7f2;
  --omx-border:      rgba(139,90,20,.18);
  --omx-border2:     rgba(139,90,20,.35);
  --omx-text:        #2a1500;
  --omx-text2:       #5a3a10;
  --omx-muted:       #9a7a40;
  --omx-pill-bg:     rgba(0,0,0,.05);
  --omx-pill-hover:  rgba(255,107,0,.10);
  --omx-ta-bg:       rgba(0,0,0,.03);
  --omx-ta-focus:    rgba(255,107,0,.12);
  --omx-chip-bg:     rgba(255,107,0,.08);
  --omx-chip-text:   #b85000;
  --omx-chip-hover:  rgba(255,107,0,.16);
  --omx-panel-bg:    #fff8f0;
  --omx-shadow:      0 -4px 20px rgba(0,0,0,.10);
  --omx-ta-text:     #1a0800;
}

body:not(.kg-dark) .omx-ta {
  color: var(--omx-ta-text, var(--omx-text)) !important;
}
body:not(.kg-dark) .omx-ta::placeholder {
  color: var(--omx-muted) !important;
}

/* ════════════════════════════════════════════════════════════════
   1. SUGGESTION CHIPS ROW
   ════════════════════════════════════════════════════════════════ */
.omx-sugg-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  padding: 8px 12px 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.omx-sugg-row::-webkit-scrollbar { display: none; }

.omx-sugg-chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  background: var(--omx-chip-bg);
  color: var(--omx-chip-text);
  border: 1px solid var(--omx-border);
  border-radius: 20px;
  font-size: .75rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, border-color .15s, transform .1s;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.omx-sugg-chip:hover,
.omx-sugg-chip:active {
  background: var(--omx-chip-hover);
  border-color: var(--omx-border2);
  transform: translateY(-1px);
}

/* ════════════════════════════════════════════════════════════════
   2. MAIN INPUT BOX
   ════════════════════════════════════════════════════════════════ */
.omx-box {
  position: relative;
  background: var(--omx-bg);
  border-top: 1px solid var(--omx-border);
  border-radius: var(--omx-radius) var(--omx-radius) 0 0;
  box-shadow: var(--omx-shadow);
  padding: 8px 10px 10px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
  /* Ensure it's always above messages area */
  z-index: 30;
}

/* ── Attached kundali chips strip ── */
.omx-chip-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.omx-chip-strip:empty { display: none; }

/* Chip items rendered by kgOmastroRenderAttachList */
.omx-chip-strip .kg-omai-chip,
.omx-chip-strip .omx-attached-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  background: rgba(255,107,0,.12);
  border: 1px solid rgba(255,107,0,.3);
  border-radius: 20px;
  font-size: .72rem;
  color: var(--omx-chip-text);
  font-weight: 600;
}

/* ════════════════════════════════════════════════════════════════
   3. MODEL PANEL (slides up from toolbar)
   ════════════════════════════════════════════════════════════════ */
.omx-model-panel {
  background: var(--omx-panel-bg);
  border: 1px solid var(--omx-border);
  border-radius: var(--omx-radius2);
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  pointer-events: none;
  transition: max-height .22s ease, opacity .18s ease;
}
.omx-model-panel.omx-panel-open {
  max-height: 280px;
  opacity: 1;
  pointer-events: all;
}

.omx-model-panel-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px 8px;
  font-size: .78rem;
  font-weight: 700;
  color: var(--omx-text);
  border-bottom: 1px solid var(--omx-border);
}

.omx-model-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background .12s;
  border-bottom: 1px solid var(--omx-border);
  -webkit-tap-highlight-color: transparent;
}
.omx-model-opt:last-child { border-bottom: none; }
.omx-model-opt:hover { background: rgba(255,107,0,.07); }
.omx-model-opt.omx-model-active {
  background: rgba(255,107,0,.10);
  border-left: 3px solid var(--omx-mc, #FF6B00);
}
.omx-model-opt.omx-model-locked { opacity: .52; cursor: default; }
.omx-model-opt.omx-model-locked:hover { background: transparent; }

.omx-model-ico {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  flex-shrink: 0;
}
.omx-model-txt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.omx-model-name {
  font-size: .82rem;
  font-weight: 700;
  color: var(--omx-text);
  display: flex;
  align-items: center;
  gap: 5px;
}
.omx-model-desc {
  font-size: .67rem;
  color: var(--omx-muted);
  line-height: 1.3;
}
.omx-pro-badge {
  font-size: .55rem;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 6px;
  background: linear-gradient(135deg,#9333EA,#7C3AED);
  color: #fff;
  letter-spacing: .4px;
  text-transform: uppercase;
}
.omx-lock-ico {
  color: var(--omx-muted);
  font-size: .7rem;
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════════
   4. TEXTAREA
   ════════════════════════════════════════════════════════════════ */
.omx-ta-wrap {
  background: var(--omx-ta-bg);
  border: 1.5px solid var(--omx-border);
  border-radius: var(--omx-radius2);
  transition: border-color .15s, box-shadow .15s;
  position: relative;
}
.omx-ta-wrap:focus-within {
  border-color: var(--omx-border2);
  box-shadow: 0 0 0 3px var(--omx-ta-focus);
}

.omx-ta {
  display: block;
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  resize: none;
  padding: 10px 12px;
  font-family: inherit;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--omx-text);
  min-height: 44px;
  max-height: 160px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.omx-ta::placeholder {
  color: var(--omx-muted);
  font-style: italic;
  font-size: .85rem;
}
.omx-ta::-webkit-scrollbar { width: 3px; }
.omx-ta::-webkit-scrollbar-thumb { background: var(--omx-border2); border-radius: 3px; }

/* ════════════════════════════════════════════════════════════════
   5. TOOLBAR
   ════════════════════════════════════════════════════════════════ */
.omx-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 0 0;
}
.omx-toolbar-l {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  overflow: hidden;
}
.omx-toolbar-r {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* Pills */
.omx-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  background: var(--omx-pill-bg);
  border: 1px solid var(--omx-border);
  border-radius: 20px;
  font-size: .75rem;
  font-weight: 700;
  color: var(--omx-text2);
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, border-color .15s;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.omx-pill:hover,
.omx-pill:active {
  background: var(--omx-pill-hover);
  border-color: var(--omx-border2);
  color: var(--omx-text);
}
.omx-pill i { font-size: .72rem; }

.omx-pill-model i.omx-pill-arrow {
  font-size: .6rem;
  transition: transform .2s;
  opacity: .7;
}

/* Send button */
.omx-send-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: .9rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform .12s, box-shadow .12s;
  -webkit-tap-highlight-color: transparent;
}
.omx-send-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 16px rgba(255,107,0,.4);
}
.omx-send-btn:active {
  transform: scale(.96);
}

/* Icon button */
.omx-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--omx-text2);
  border-radius: 50%;
  cursor: pointer;
  font-size: .8rem;
  transition: background .12s, color .12s;
}
.omx-icon-btn:hover {
  background: var(--omx-pill-hover);
  color: var(--omx-text);
}

/* Locked msg */
.omx-locked-msg {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px;
  font-size: .85rem;
  color: var(--omx-muted);
}

/* ════════════════════════════════════════════════════════════════
   6. ATTACH KUNDALI POPUP
   ════════════════════════════════════════════════════════════════ */
.omx-attach-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 2147483640;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 0 env(safe-area-inset-bottom, 0);
}
@media (min-width: 480px) {
  .omx-attach-overlay {
    align-items: center;
  }
}

.omx-attach-modal {
  background: var(--omx-bg);
  border: 1px solid var(--omx-border);
  border-radius: var(--omx-radius) var(--omx-radius) 0 0;
  width: 100%;
  max-width: 500px;
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: 0 -8px 40px rgba(0,0,0,.5);
  display: flex;
  flex-direction: column;
  animation: omxSlideUp .22s ease;
}
@media (min-width: 480px) {
  .omx-attach-modal {
    border-radius: var(--omx-radius);
    max-height: 80vh;
  }
}
@keyframes omxSlideUp {
  from { transform: translateY(40px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.omx-attach-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 12px;
  font-size: .88rem;
  font-weight: 700;
  color: var(--omx-text);
  border-bottom: 1px solid var(--omx-border);
  flex-shrink: 0;
}

.omx-attach-list {
  padding: 8px 12px;
  flex-shrink: 0;
}

.omx-attach-form {
  padding: 12px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--omx-border);
}

.omx-attach-form-title {
  font-size: .78rem;
  font-weight: 700;
  color: var(--omx-text2);
  text-transform: uppercase;
  letter-spacing: .4px;
  margin-bottom: 2px;
}

.omx-attach-inp {
  width: 100%;
  background: var(--omx-ta-bg);
  border: 1.5px solid var(--omx-border);
  border-radius: var(--omx-radius3);
  padding: 9px 12px;
  font-family: inherit;
  font-size: .85rem;
  color: var(--omx-text);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  -webkit-appearance: none;
}
.omx-attach-inp:focus {
  border-color: var(--omx-border2);
  box-shadow: 0 0 0 3px var(--omx-ta-focus);
}
.omx-attach-inp::placeholder { color: var(--omx-muted); }

.omx-attach-row2 {
  display: flex;
  gap: 8px;
}
.omx-attach-row2 .omx-attach-inp { flex: 1; }

.omx-attach-hint {
  font-size: .7rem;
  color: var(--omx-muted);
  padding-left: 2px;
  margin-top: -4px;
}

.omx-attach-place-wrap { position: relative; }

.omx-attach-ac {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--omx-panel-bg);
  border: 1px solid var(--omx-border2);
  border-radius: var(--omx-radius3);
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
  z-index: 2147483641;
  max-height: 200px;
  overflow-y: auto;
  margin-top: 2px;
}

.omx-attach-form-btns {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.omx-attach-add-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  border: none;
  border-radius: var(--omx-radius3);
  color: #fff;
  font-family: inherit;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform .1s, box-shadow .1s;
}
.omx-attach-add-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(255,107,0,.4);
}
.omx-attach-done-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  background: var(--omx-pill-bg);
  border: 1.5px solid var(--omx-border);
  border-radius: var(--omx-radius3);
  color: var(--omx-text2);
  font-family: inherit;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s;
}
.omx-attach-done-btn:hover { background: var(--omx-pill-hover); }

/* ════════════════════════════════════════════════════════════════
   7. SIDEBAR HEADER OVERLAP FIX
   The kgc-sidebar with top:0 was covering the kgc-topbar.
   Fix: sidebar starts below the topbar (52px).
   ════════════════════════════════════════════════════════════════ */
html body .kgc .kgc-sidebar {
  top: 52px !important;
  height: calc(100% - 52px) !important;
}
html body .kgc .kgc-sidebar-overlay {
  top: 52px !important;
  height: calc(100% - 52px) !important;
}

/* On mobile (<768px) sidebar should still start at topbar height */
@media (max-width: 767px) {
  html body .kgc .kgc-sidebar {
    top: 52px !important;
    height: calc(100% - 52px) !important;
  }
  html body .kgc .kgc-sidebar-overlay {
    top: 52px !important;
    height: calc(100% - 52px) !important;
  }
}

/* kgc-topbar must be above sidebar */
html body .kgc .kgc-topbar {
  z-index: 50 !important;
  position: relative !important;
}

/* ════════════════════════════════════════════════════════════════
   8. LEGACY OVERRIDE — hide old kg-omai-* elements if they persist
   ════════════════════════════════════════════════════════════════ */
.kg-omai-box,
.kgc-suggestions,
.kg-attach-form {
  display: none !important;
}
/* kg-attach-popup-overlay: NOT hidden here — kgOmastroOpenAttachForm controls it via inline style */

/* Make kgc-chip-strip (old attach chips) show via omx-chip-strip bridge */
.kg-omai-chips { display: none !important; }
/* Re-render attach chips into omx-chip-strip via JS in app.js */
[id^="kg-attach-chips-"] {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
[id^="kg-attach-chips-"]:empty { display: none; }

/* ════════════════════════════════════════════════════════════════
   9. ORDER OVERRIDE — ensure omx elements stack correctly in kgc flex

/* ════════════════════════════════════════════════════════════════
   9. ORDER + LAYOUT — omx elements in kgc flex column
   Single clean rule — no overrides needed.
   ════════════════════════════════════════════════════════════════ */
html body .kgc .omx-sugg-row { order: 4 !important; flex-shrink: 0 !important; }
html body .kgc .omx-box      { order: 5 !important; flex-shrink: 0 !important; }

/* omx-box: always at bottom of kgc, never collapses, never moves */
html body .kgc .omx-box,
html body #kgc-omastro-general .omx-box,
html body #kgc-kgpred .omx-box {
  display: flex !important;
  flex-direction: column !important;
  flex-shrink: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important; /* model panel pops above */
  position: relative !important;
  z-index: 30 !important;
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
}

/* omx-toolbar: always visible, never hidden */
html body .kgc .omx-toolbar {
  display: flex !important;
  flex-shrink: 0 !important;
  align-items: center !important;
  justify-content: space-between !important;
  overflow: visible !important;
  min-height: 44px !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: all !important;
}

/* omx-toolbar children */
.omx-toolbar > *,
.omx-toolbar-l > *,
.omx-toolbar-r > * {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: all !important;
}

/* kgc container: overflow-y clip so messages scroll, omx-box stays fixed at bottom */
html body #kgc-omastro-general,
html body #kgc-kgpred,
html body .kgc.kg-standalone {
  overflow-x: hidden !important;
  overflow-y: clip !important;
  top: var(--kg-topbar-h, 52px) !important;
  height: calc(100dvh - var(--kg-topbar-h, 52px)) !important;
}

/* Model panel: opens above toolbar */
.omx-model-panel {
  position: absolute !important;
  bottom: 100% !important;
  left: 0 !important;
  z-index: 2147483630 !important;
  margin-bottom: 4px !important;
}

/* Attach overlay: always on top */
.omx-attach-overlay { z-index: 2147483640 !important; }
[id^="kg-attach-ac-body-"] { z-index: 2147483647 !important; }

/* Model + attach pills */
.omx-pill-model { flex: 0 0 auto !important; max-width: 130px !important; }
.omx-pill-model span[id^="omx-model-lbl-"] {
  max-width: 55px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.omx-pill-attach { flex: 0 0 auto !important; pointer-events: all !important; }
.omx-toolbar-l { flex: 0 1 auto !important; overflow: visible !important; }
.omx-toolbar-r { flex-shrink: 0 !important; overflow: visible !important; }
.omx-send-btn {
  flex-shrink: 0 !important;
  min-width: 38px !important;
  min-height: 38px !important;
  display: flex !important;
  pointer-events: all !important;
}

/* Mobile narrow: hide attach pill text */
@media (max-width: 400px) {
  .omx-pill-attach span { display: none !important; }
  .omx-pill-model span[id^="omx-model-lbl-"] { max-width: 40px !important; }
  .omx-pill { padding: 6px 8px !important; }
}

/* iOS keyboard open: shrink kgc to visible viewport */
@media (max-width: 767px) {
  body.kg-keyboard-open html body #kgc-omastro-general,
  body.kg-keyboard-open html body #kgc-kgpred,
  body.kg-keyboard-open html body .kgc.kg-standalone {
    height: 100dvh !important;
    max-height: 100dvh !important;
  }
}

/* END omx-input-v1.css */

/* ═══════════════════════════════════════════════════════════
   OVERRIDES & THEME NEUTRALIZER
   (kundali-overrides.css merged below — overrides file can be deleted)
   These rules win over everything above — minimal !important usage,
   only where theme CSS must be beaten.
   ═══════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────────
   SECTION 1 — CSS VARIABLES (single source of truth)
   ──────────────────────────────────────────────────────────────── */
:root {
  --kg-topbar-h:   52px;
  --kg-bnav-h:     58px;
  --kg-safe-b:     env(safe-area-inset-bottom, 0px);

  /* z-index scale */
  --z-content:     1;
  --z-sticky:      10;
  --z-dropdown:    500;
  --z-kgc:         800;
  --z-overlay:     1000;
  --z-modal:       1100;
  --z-toast:       1200;
  --z-sidebar:     9000;
  --z-bnav:        10000;
  --z-topbar:      10200;
  --z-auth:        2147483647;
}

/* ────────────────────────────────────────────────────────────────
   SECTION 2 — WORDPRESS THEME CHROME HIDE
   !important needed: theme CSS has high specificity
   ──────────────────────────────────────────────────────────────── */
body.kg-no-theme-chrome #masthead,
body.kg-no-theme-chrome header.site-header,
body.kg-no-theme-chrome #site-header,
body.kg-no-theme-chrome .site-header,
body.kg-no-theme-chrome .ast-primary-header-bar,
body.kg-no-theme-chrome #ast-desktop-header,
body.kg-no-theme-chrome #ast-mobile-header,
body.kg-no-theme-chrome .ast-mobile-header-wrap,
body.kg-no-theme-chrome .main-header-bar-wrap,
body.kg-no-theme-chrome #colophon,
body.kg-no-theme-chrome footer.site-footer,
body.kg-no-theme-chrome #site-footer,
body.kg-no-theme-chrome .site-footer,
body.kg-no-theme-chrome .site-below-footer-wrap,
body.kg-no-theme-chrome .ast-footer-copyright,
body.kg-no-theme-chrome footer[id],
body.kg-no-theme-chrome footer[class],
body.kg-no-theme-chrome #secondary,
body.kg-no-theme-chrome .widget-area,
body.kg-no-theme-chrome aside.sidebar,
body.kg-no-theme-chrome #right-sidebar,
body.kg-no-theme-chrome #left-sidebar,
body.kg-no-theme-chrome .ast-sidebar-wrap,
body.kg-no-theme-chrome header.entry-header,
body.kg-no-theme-chrome .ast-no-thumbnail.entry-header,
body.kg-no-theme-chrome #ast-scroll-top { display: none !important; }

body.kg-no-theme-chrome #page,
body.kg-no-theme-chrome .hfeed.site { padding-top: 0 !important; margin-top: 0 !important; }

body.kg-no-theme-chrome #content,
body.kg-no-theme-chrome .site-content,
body.kg-no-theme-chrome #primary,
body.kg-no-theme-chrome .content-area,
body.kg-no-theme-chrome main.site-main,
body.kg-no-theme-chrome article.ast-article-single,
body.kg-no-theme-chrome .entry-header,
body.kg-no-theme-chrome .ast-container {
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* ────────────────────────────────────────────────────────────────
   SECTION 3 — TOPBAR
   position:fixed + z-index needs !important to beat theme sticky headers
   ──────────────────────────────────────────────────────────────── */
.kg-topbar,
#kg-topbar {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  height: var(--kg-topbar-h);
  min-height: var(--kg-topbar-h);
  max-height: var(--kg-topbar-h);
  z-index: var(--z-topbar) !important;
  overflow: visible; /* dropdowns must escape */
  pointer-events: all;
  flex-wrap: nowrap;
  align-items: center;
}

body.admin-bar .kg-topbar,
body.admin-bar #kg-topbar { top: 32px !important; }

@media screen and (max-width: 782px) {
  body.admin-bar .kg-topbar,
  body.admin-bar #kg-topbar { top: 46px !important; }
}

/* Every interactive element in topbar is always clickable */
.kg-topbar button,
.kg-topbar a,
#kg-topbar button,
#kg-topbar a,
.kg-hamburger,
#kg-hamburger-btn {
  pointer-events: all;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  min-width: 40px;
  min-height: 40px;
}

/* Desktop nav links */
.kg-topbar-desktop-nav { display: none; }

@media (min-width: 900px) {
  .kg-topbar-desktop-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: 10px;
    flex-shrink: 0;
  }
  .kg-topbar-dnav-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border-radius: 8px;
    color: rgba(255,255,255,.90);
    text-decoration: none;
    font-family: 'Rajdhani', sans-serif;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .02em;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s, color .15s;
  }
  .kg-topbar-dnav-link:hover { background: rgba(255,255,255,.11); color: #fff; }
  .kg-topbar-dnav-link.active { background: rgba(255,255,255,.15); color: #fff; font-weight: 700; }
}

/* Dropdowns must escape topbar */
.kg-topbar-right,
#kg-topbar-right { overflow: visible; position: relative; z-index: 1; }

#kg-user-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: var(--z-auth);
  max-height: calc(100vh - 60px);
  overflow-y: auto;
}

#kg-user-bar { height: 36px; max-height: 36px; align-items: center; flex-shrink: 0; }
#kg-user-menu-btn { height: 34px; max-height: 34px; align-items: center; overflow: hidden; }

/* ────────────────────────────────────────────────────────────────
   SECTION 4 — BOTTOM NAV
   display:flex with !important needed: inline CSS in pg-header-nav.php
   forces display — we guard with html class set instantly in wp_head
   ──────────────────────────────────────────────────────────────── */

/* Bottom nav base layout — always fixed positioned when shown */
.kg-bottomnav,
#kg-bottomnav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--kg-bnav-h);
  z-index: var(--z-bnav);
  align-items: center;
  overflow: visible;
  padding-bottom: var(--kg-safe-b);
  transition: transform 0.30s cubic-bezier(0.4,0,0.2,1), opacity 0.30s ease;
}

/* SHOW on normal pages — relies on PHP body class (server-side, reliable) */
body.kg-global-nav-page .kg-bottomnav,
body.kg-global-nav-page #kg-bottomnav { display: flex; }

/* HIDE on chat/AI pages — html.kg-chat-fullpage is set via inline script (reliable)
   body.kgc-omastro-host / body.kg-omastro-standalone are JS-only — also covered */
html.kg-chat-fullpage .kg-bottomnav,
html.kg-chat-fullpage #kg-bottomnav,
body.kg-chat-fullpage .kg-bottomnav,
body.kg-chat-fullpage #kg-bottomnav,
body.kgc-omastro-host .kg-bottomnav,
body.kgc-omastro-host #kg-bottomnav,
body.kg-omastro-standalone .kg-bottomnav,
body.kg-omastro-standalone #kg-bottomnav { display: none !important; }

/* Hidden on desktop always */
@media (min-width: 768px) {
  .kg-bottomnav,
  #kg-bottomnav { display: none !important; }
}

/* Scroll-hide (JS adds class) */
.kg-bottomnav.kg-bnav-hidden,
#kg-bottomnav.kg-bnav-hidden {
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
}

/* Glass style — light */
.kg-liquid-nav,
.kg-bottomnav.kg-liquid-nav,
#kg-bottomnav.kg-liquid-nav {
  background: rgba(255,253,248,.92);
  border-top: 1px solid rgba(200,160,80,.22);
  backdrop-filter: blur(24px) saturate(2);
  -webkit-backdrop-filter: blur(24px) saturate(2);
  box-shadow: 0 -2px 16px rgba(120,80,0,.07);
}

/* Glass style — dark */
body.kg-dark .kg-liquid-nav,
body.kg-dark #kg-bottomnav.kg-liquid-nav {
  background: rgba(0,0,0,.94);
  border-top-color: rgba(255,107,0,.18);
}

/* Nav items */
.kg-bottomnav .kg-bnav-item,
#kg-bottomnav .kg-bnav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 0 4px;
  gap: 2px;
  color: rgba(80,45,5,.78);
  font-size: .57rem;
  font-weight: 600;
  transition: color .2s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

body.kg-dark .kg-bottomnav .kg-bnav-item,
body.kg-dark #kg-bottomnav .kg-bnav-item { color: rgba(255,220,160,.80); }

.kg-bottomnav .kg-bnav-item.active,
#kg-bottomnav .kg-bnav-item.active { color: #FF6B00; }

body.kg-dark .kg-bottomnav .kg-bnav-item.active,
body.kg-dark #kg-bottomnav .kg-bnav-item.active { color: #FF8C00; }

/* Center Om button */
.kg-bnav-center .kg-bnav-icon-wrap {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: linear-gradient(135deg,#FF6B00,#FF9500);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  box-shadow: 0 2px 10px rgba(255,107,0,.45);
  margin-bottom: 2px;
  transition: transform .15s, box-shadow .15s;
}
.kg-bnav-center:active .kg-bnav-icon-wrap { transform: scale(.93); }

/* Dark mode bnav inline overrides (needed for pg-header-nav.php inline CSS) */
body.kg-dark #kg-bottomnav,
body.kg-dark .kg-bottomnav {
  background: rgba(15,7,2,.90) !important;
  backdrop-filter: blur(32px) saturate(2) !important;
  -webkit-backdrop-filter: blur(32px) saturate(2) !important;
  border-top: 1px solid rgba(255,107,0,.15) !important;
  box-shadow: 0 -2px 20px rgba(0,0,0,.45) !important;
}

/* ────────────────────────────────────────────────────────────────
   SECTION 5 — KGC CHAT CONTAINER
   ──────────────────────────────────────────────────────────────── */

/* Hidden by default (non-chat pages) */
.kgc { display: none; }

/* Visible on chat pages */
body.kg-chat-fullpage .kgc,
body.kgc-omastro-host .kgc,
body.kg-omastro-standalone .kgc {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: var(--kg-topbar-h);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-kgc);
  overflow-x: hidden;
  overflow-y: clip;
  isolation: auto; /* fixed popups can escape */
}

/* admin bar offset */
body.admin-bar body.kg-chat-fullpage .kgc,
body.admin-bar body.kgc-omastro-host .kgc {
  top: calc(var(--kg-topbar-h) + 32px);
}
@media screen and (max-width: 782px) {
  body.admin-bar body.kg-chat-fullpage .kgc,
  body.admin-bar body.kgc-omastro-host .kgc {
    top: calc(var(--kg-topbar-h) + 46px);
  }
}

/* dvh support */
@supports (height: 100dvh) {
  body.kg-chat-fullpage .kgc,
  body.kgc-omastro-host .kgc,
  body.kg-omastro-standalone .kgc {
    height: calc(100dvh - var(--kg-topbar-h));
    bottom: auto;
  }
}

/* kgc flex order */
.kgc .kgc-topbar      { order: 0; flex-shrink: 0; position: relative; z-index: 50; }
.kgc .kgc-modes       { order: 1; flex-shrink: 0; }
.kgc .kgc-gate,
.kgc .kgc-messages    { order: 2; flex: 1 1 0%; min-height: 0; }
.kgc .kgc-suggestions { order: 4; flex-shrink: 0; }
.kgc .omx-box,
.kgc .kgc-input-area,
.kgc .kgc-input-chatgpt { order: 5; flex-shrink: 0; }

/* All children interactive */
body.kg-chat-fullpage .kgc *,
body.kgc-omastro-host .kgc *,
body.kg-omastro-standalone .kgc * { pointer-events: all; }

body.kgc-omastro-host .kgc button,
body.kgc-omastro-host .kgc input,
body.kgc-omastro-host .kgc textarea,
body.kg-omastro-standalone .kgc button,
body.kg-omastro-standalone .kgc input,
body.kg-omastro-standalone .kgc textarea,
body.kg-chat-fullpage .kgc button,
body.kg-chat-fullpage .kgc input,
body.kg-chat-fullpage .kgc textarea {
  pointer-events: all;
  touch-action: manipulation;
}

body.kgc-omastro-host .kgc textarea,
body.kg-omastro-standalone .kgc textarea,
body.kg-chat-fullpage .kgc textarea {
  cursor: text;
  user-select: text;
  -webkit-user-select: text;
}

/* Internal kgc sidebar */
.kgc .kgc-sidebar {
  position: fixed;
  top: var(--kg-topbar-h);
  z-index: calc(var(--z-kgc) + 10);
}
.kgc .kgc-sidebar-overlay {
  position: fixed;
  top: 0;
  z-index: calc(var(--z-kgc) + 9);
}

/* ────────────────────────────────────────────────────────────────
   SECTION 6 — OMX INPUT BOX (Om Astro / Predictions)
   Same approach as kgc-input-area on jyotish-chat
   ──────────────────────────────────────────────────────────────── */
.kgc .omx-box {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  height: auto;
  overflow: visible; /* model panel pops above */
  position: relative;
  z-index: 30;
  padding-bottom: calc(10px + var(--kg-safe-b));
}

.kgc .omx-toolbar {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  overflow: visible;
  min-height: 44px;
}

.omx-toolbar-l { flex: 0 1 auto; overflow: visible; }
.omx-toolbar-r { flex-shrink: 0; overflow: visible; }
.omx-send-btn  { flex-shrink: 0; min-width: 38px; min-height: 38px; display: flex; }

.omx-pill-model { flex: 0 0 auto; max-width: 130px; }
.omx-pill-model span[id^="omx-model-lbl-"] {
  max-width: 55px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.omx-pill-attach { flex: 0 0 auto; }

/* Model panel opens upward */
.omx-model-panel {
  position: absolute;
  bottom: 100%;
  left: 0;
  z-index: 2147483630;
  margin-bottom: 4px;
}

/* Attach overlay */
.omx-attach-overlay { z-index: 2147483640 !important; }
[id^="kg-attach-ac-body-"] { z-index: 2147483647 !important; }

@media (max-width: 400px) {
  .omx-pill-attach span { display: none; }
  .omx-pill-model span[id^="omx-model-lbl-"] { max-width: 40px; }
}

/* Keyboard open: shrink to visible viewport */
@media (max-width: 767px) {
  body.kg-keyboard-open .kgc {
    height: 100dvh;
    max-height: 100dvh;
  }
}

/* ────────────────────────────────────────────────────────────────
   SECTION 7 — SIDEBAR DRAWER
   ──────────────────────────────────────────────────────────────── */
#kg-sidebar-drawer,
.kg-sidebar-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(280px, 85vw);
  z-index: var(--z-sidebar);
  transform: translateX(-100%);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: block;
}

#kg-sidebar-drawer.kg-sidebar-open,
.kg-sidebar-drawer.kg-sidebar-open { transform: translateX(0); }

@media (min-width: 768px) {
  #kg-sidebar-drawer,
  .kg-sidebar-drawer { top: var(--kg-topbar-h); }
}

/* Sidebar overlay — hidden until open */
html body #kg-sidebar-overlay,
html body .kg-sidebar-overlay {
  display: none !important;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.55);
  z-index: calc(var(--z-sidebar) - 1);
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease;
}

html body #kg-sidebar-overlay.kg-sidebar-open,
html body .kg-sidebar-overlay.kg-sidebar-open {
  display: block !important;
  opacity: 1;
  pointer-events: all;
  cursor: pointer;
}

body.kg-sidebar-open { overflow: hidden; }

/* Sidebar profile */
.kg-sidebar-profile,
#kg-sidebar-drawer .kg-sidebar-profile {
  background: linear-gradient(160deg,#1e0a00,#2d1200 55%,#1a0800) !important;
  border-bottom: 1px solid rgba(255,107,0,.15) !important;
  padding: 60px 16px 16px !important;
}
body.admin-bar .kg-sidebar-profile { padding-top: 84px !important; }
@media (max-width: 782px) {
  body.admin-bar .kg-sidebar-profile { padding-top: 106px !important; }
}

.kg-sb-close-btn { display: none !important; }

.kg-sidebar-drawer .kg-sidebar-nav,
#kg-sidebar-drawer .kg-sidebar-nav {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1;
}

/* Sidebar items — high tap target on mobile */
@media (max-width: 767px) {
  .kg-sb-item {
    min-height: 48px;
    padding: 10px 14px;
    touch-action: manipulation;
  }
  .kg-sb-item-label { color: #2a1200; }
  body.kg-dark .kg-sb-item-label { color: rgba(255,220,160,.9); }
}

/* ────────────────────────────────────────────────────────────────
   SECTION 8 — OVERLAYS & MODALS
   ──────────────────────────────────────────────────────────────── */

/* Auth modal */
#kg-auth-modal,
.kg-auth-overlay {
  position: fixed !important;
  inset: 0;
  z-index: var(--z-auth) !important;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
#kg-auth-modal[style*="display: flex"],
#kg-auth-modal[style*="display:flex"],
.kg-auth-overlay[style*="display: flex"],
.kg-auth-overlay[style*="display:flex"] {
  display: flex !important;
  pointer-events: all;
}
.kg-auth-panel {
  position: relative;
  z-index: 1;
  max-height: 90vh;
  overflow-y: auto;
}

/* User dashboard */
#kg-user-dashboard {
  pointer-events: none;
  z-index: var(--z-modal);
}
#kg-user-dashboard[style*="display: block"],
#kg-user-dashboard[style*="display:block"] { pointer-events: all; }

/* Upgrade modal */
#kg-upgrade-modal { pointer-events: none; }
#kg-upgrade-modal[style*="display: flex"],
#kg-upgrade-modal[style*="display:flex"],
#kg-upgrade-modal[style*="display: block"],
#kg-upgrade-modal[style*="display:block"] {
  pointer-events: all;
  z-index: var(--z-modal);
}
#kg-upgrade-modal:not([style*="flex"]):not([style*="block"]) { display: none; }

/* Loading overlay */
.ldwrap { pointer-events: none; }
.ldwrap.active { pointer-events: all; z-index: var(--z-overlay); }
.ldwrap:not(.active) { display: none; }

/* Settings overlay */
.kg-settings-overlay:not(.open) { z-index: -1; pointer-events: none; }
.kg-settings-overlay.open { pointer-events: all; z-index: var(--z-modal); }

/* Search bar */
.kg-search-bar-wrap:not(.kg-search-open) { display: none !important; }
.kg-search-bar-wrap.kg-search-open,
.kg-search-bar-wrap.kg-search-open * { pointer-events: all; }

/* Page loader */
#kg-page-loader {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: none;
  opacity: 0;
  transition: opacity .22s ease;
}
#kg-page-loader.kg-loader-visible { opacity: 1; pointer-events: all; }

/* Notification + More menu — shown only via JS inline style */
#kg-notif-dropdown { z-index: var(--z-auth); pointer-events: all; }
#kg-more-menu { pointer-events: none; }
#kg-more-menu[style*="block"],
#kg-more-menu[style*="flex"] { pointer-events: all; }

/* Attach popup */
.kg-attach-popup-overlay { z-index: 2147483640 !important; }
.kg-attach-popup         { z-index: 2147483641 !important; }

/* Autocomplete dropdowns */
.ac-list,
[id$="-ac"],
[id$="-ac-list"],
.kg-loc-ac-dropdown,
div[id^="kg-attach-ac-body-"] {
  position: absolute;
  z-index: 9999999 !important;
  pointer-events: all;
}

/* ────────────────────────────────────────────────────────────────
   SECTION 9 — UNIVERSAL AI BAR
   bottom is NOT !important — JS inline style always wins
   ──────────────────────────────────────────────────────────────── */
#kg-universal-ai-bar,
.kg-uaib {
  position: fixed !important;
  left: 0;
  right: 0;
  bottom: 0; /* JS overrides — no !important */
  z-index: 9980; /* below bnav so nav overlaps cleanly */
  background: var(--card, #fff);
  border-top: 2px solid rgba(255,107,0,.3);
  padding: 8px 12px;
  box-shadow: 0 -6px 24px rgba(0,0,0,.12);
  transition: bottom .30s cubic-bezier(.4,0,.2,1);
}

/* Hidden on chat/AI pages */
html.kg-chat-fullpage #kg-universal-ai-bar,
html.kg-chat-fullpage .kg-uaib,
body.kgc-omastro-host #kg-universal-ai-bar,
body.kgc-omastro-host .kg-uaib,
body.kg-omastro-standalone #kg-universal-ai-bar,
body.kg-omastro-standalone .kg-uaib,
body.kg-chat-fullpage #kg-universal-ai-bar,
body.kg-chat-fullpage .kg-uaib { display: none !important; }

/* ── Inner layout ── */
.kg-uaib-inner { display: flex; flex-direction: column; width: 100%; }
.kg-uaib-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Input ── */
.kg-uaib-inp {
  flex: 1;
  min-width: 0;
  border: 1.5px solid rgba(255,107,0,.3);
  border-radius: 12px;
  padding: 9px 12px;
  font-size: .85rem;
  background: var(--bg, #fff);
  color: var(--text, #1a0800);
  resize: none;
  outline: none;
  font-family: inherit;
  line-height: 1.4;
  -webkit-appearance: none;
}
.kg-uaib-inp:focus { border-color: rgba(255,107,0,.8) !important; }

/* ── Send button — mobile base (MUST have background or it shows as tiny blank) ── */
.kg-uaib-send {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #FF6B00, #FF8C00);
  color: #fff;
  font-size: .9rem;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(255,107,0,.35);
  transition: transform .15s, background .3s;
  -webkit-tap-highlight-color: transparent;
}
.kg-uaib-send:hover, .kg-uaib-send:active { transform: scale(1.08); }
.kg-uaib-send-label { display: none; }

body.kg-dark #kg-universal-ai-bar,
body.kg-dark .kg-uaib {
  background: var(--card, #111) !important;
  border-top-color: rgba(255,107,0,.2) !important;
}
body.kg-dark .kg-uaib-inp {
  background: var(--bg, #0a0a0a) !important;
  color: var(--text, #fff) !important;
}

@media (min-width: 768px) {
  #kg-universal-ai-bar,
  .kg-uaib {
    bottom: 0;
    padding: 12px 0;
    border-top: 2px solid rgba(255,107,0,.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .kg-uaib-inner { max-width: 860px; margin: 0 auto; padding: 0 24px; }
  .kg-uaib-send { width: auto !important; height: 44px !important; padding: 0 20px !important; border-radius: 14px !important; gap: 8px !important; }
  .kg-uaib-send-label { display: inline !important; font-weight: 700; }
}

/* Hide old AI widget duplicates */
#kg-chat-ai-btn, .kg-chat-ai-wrapper, .kg-chat-ai-bar,
.ai-context-strip, #kg-ai-strip,
.kgn-ai-btn, .kg-bnn-chat-btn, .kg-ad-chat-btn, .kg-mu-chat-btn,
#kg-faladesh-ai-bar, .kg-faladesh-ai-bar,
#kg-fl-ai-chat-bar, .kg-fl-ai-chat-bar,
#kg-kfl-ai-bar, .kg-kfl-ai-bar,
#kg-yd-ai-section, #kg-match-ai-section, .kg-match-ai-section,
#kg-fl-ai-bar, .kg-fl-ai-bar { display: none !important; }

/* ────────────────────────────────────────────────────────────────
   SECTION 10 — BODY SPACING
   ──────────────────────────────────────────────────────────────── */
body.kg-global-nav-page {
  padding-top: var(--kg-topbar-h);
}

@media (max-width: 767px) {
  body.kg-has-bottomnav #kg-app,
  body.kg-has-bottomnav .kg-app {
    padding-bottom: calc(var(--kg-bnav-h) + 76px); /* nav + AI bar */
  }
}
@media (min-width: 768px) {
  body.kg-has-uaib #kg-app,
  body.kg-has-uaib .kg-app { padding-bottom: 76px; }
  body:not(.kg-has-uaib) #kg-app,
  body:not(.kg-has-uaib) .kg-app { padding-bottom: 0; }
}

/* ────────────────────────────────────────────────────────────────
   SECTION 11 — FORMS & DATE INPUTS
   overflow:visible !important needed: kundali-style.css has overflow:hidden
   ──────────────────────────────────────────────────────────────── */
.kgn-icard, .kgn-fg, .kgn-row, .form-card, .fg,
.kgn-input-body, [class*="form-card"], [class*="icard"],
[class*="kgn-"], .ai-input-panel, .tcard {
  overflow: visible !important;
}

input[type="date"],
input[type="datetime-local"] {
  -webkit-appearance: none;
  appearance: none;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: visible;
}

/* Prevent iOS zoom */
@media (max-width: 768px) {
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="number"], input[type="date"], input[type="time"],
  input[type="search"], select, textarea { font-size: 16px !important; }
}

/* ────────────────────────────────────────────────────────────────
   SECTION 12 — NUMEROLOGY PAGE
   ──────────────────────────────────────────────────────────────── */
.kg-num-app {
  padding-top: 0;
  padding-bottom: 80px;
  overflow-x: hidden;
}

.kgn-back-bar {
  position: sticky;
  top: var(--kg-topbar-h);
  z-index: 45;
  background: var(--bg, #fff);
  overflow: visible;
}

.kgn-tabs {
  position: sticky;
  top: calc(var(--kg-topbar-h) + 50px);
  z-index: 40;
}

.kgn-section-hdr {
  position: sticky;
  top: var(--kg-topbar-h);
  z-index: 30;
  background: var(--bg, #fff);
}

.kgn-input-hero,
.kgn-input-hero-icon { overflow: visible; position: relative; }

/* ────────────────────────────────────────────────────────────────
   SECTION 13 — DARK MODE — CHART REPAINT
   ──────────────────────────────────────────────────────────────── */
body.kg-dark [id*="kg-chart"],
body.kg-dark .kg-chart-card,
body.kg-dark .kg-chart-wrap {
  will-change: transform;
  transform: translateZ(0);
}

body.kg-dark svg.kg-ni-svg,
body.kg-dark svg.kg-si-svg { background: #0d0d0f !important; }
body:not(.kg-dark) svg.kg-ni-svg,
body:not(.kg-dark) svg.kg-si-svg { background: #faf7f2 !important; }

/* ────────────────────────────────────────────────────────────────
   SECTION 14 — MESSAGE BUBBLES
   ──────────────────────────────────────────────────────────────── */
.kgc-messages {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  scroll-padding-bottom: 24px;
}

.kgc-messages .kgc-msg {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
  max-width: 90%;
  align-self: flex-start;
}
.kgc-messages .kgc-msg.kgc-user {
  flex-direction: row-reverse;
  align-self: flex-end;
  max-width: 82%;
}
.kgc-messages .kgc-msg .kgc-msg-avatar { flex-shrink: 0; width: 28px; height: 28px; }
.kgc-messages .kgc-msg .kgc-msg-bubble {
  display: block;
  flex: 1 1 auto;
  min-width: 80px;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
  box-sizing: border-box;
}

/* ────────────────────────────────────────────────────────────────
   SECTION 15 — MISC
   ──────────────────────────────────────────────────────────────── */

/* Prevent text select on nav tap */
.kg-bottomnav, #kg-bottomnav, .kg-bnav-item { user-select: none; -webkit-user-select: none; }

/* Smooth page transition */
.kg-pg { animation: kgFadeIn .25s ease both; }
@keyframes kgFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Result panels bottom padding */
#kgbn-panel-result,
#kgad-panel-result,
#kglk-panel-result { padding-bottom: 140px; }

/* Sacred geometry background never blocks clicks */
body::before, body::after { pointer-events: none; z-index: -1; }

/* Print */
@media print {
  .kg-bottomnav, #kg-bottomnav, .kg-topbar, #kg-topbar,
  #kg-universal-ai-bar, .kg-uaib, #kg-page-loader { display: none !important; }
  body { padding: 0 !important; }
}

/* ═══════════════════════════════════════════════════════════
   OM ASTRO PAGES — SEPARATE PAGE IDS (v7.0)
   General:     #kgc-omastro-general  (accent: #FF6B00 saffron)
   Predictions: #kgc-kgpred           (accent: #8B5CF6 purple)
   ═══════════════════════════════════════════════════════════ */

/* Predictions page — purple accent overrides */
#kgc-kgpred .kgc-topbar-omastro,
body:has(#kgc-kgpred) .kgc-topbar-omastro {
    border-bottom-color: rgba(139,92,246,.2);
}

body:not(.kg-dark) #kgc-kgpred .kgc-topbar,
body:not(.kg-dark) #kgc-kgpred.kgc-topbar {
    border-bottom-color: rgba(139,92,246,.15) !important;
}

#kgc-kgpred .omx-sugg-chip.omx-sugg-chip-pred {
    border-color: rgba(139,92,246,.3);
    color: #8B5CF6;
}
#kgc-kgpred .omx-sugg-chip.omx-sugg-chip-pred:hover {
    background: rgba(139,92,246,.12);
    border-color: rgba(139,92,246,.5);
}

/* General page — saffron accent (reinforced) */
#kgc-omastro-general .omx-sugg-chip {
    border-color: rgba(255,107,0,.3);
    color: #FF6B00;
}
#kgc-omastro-general .omx-sugg-chip:hover {
    background: rgba(255,107,0,.1);
    border-color: rgba(255,107,0,.5);
}

/* .kgc visibility — authoritative rules:
   hidden by default; shown on chat pages via body classes.
   Consolidated here — do NOT add competing rules elsewhere. */
.kgc { display: none; }

body.kg-chat-fullpage .kgc,
body.kgc-omastro-host .kgc,
body.kg-omastro-standalone .kgc {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: var(--kg-topbar-h, 52px);
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}

/* ══════════════════════════════════════════════════════════
   AI CHAT PAGES - THEME NAVIGATION & CLICKABILITY FIX
   Resolves overlap conflicts and pointer-events rules
   ══════════════════════════════════════════════════════════ */

/* 1. Ensure theme header wrappers are visible on AI Chat pages */
body.kg-ai-chat-page #page,
body.kg-ai-chat-page .site,
body.kg-ai-chat-page header,
body.kg-ai-chat-page #masthead,
body.kg-ai-chat-page .site-header,
body.kg-ai-chat-page .header-wrap,
body.kg-ai-chat-page #header-wrap,
body.kg-ai-chat-page .header-container,
body.kg-ai-chat-page #header-container,
body.kg-ai-chat-page .site-header-wrapper,
body.kg-ai-chat-page .ast-primary-header-bar,
body.kg-ai-chat-page #ast-desktop-header,
body.kg-ai-chat-page #ast-mobile-header,
body.kg-ai-chat-page .ast-mobile-header-wrap,
body.kg-ai-chat-page .main-header-bar-wrap,
body.kg-ai-chat-page nav,
body.kg-ai-chat-page .site-navigation,
body.kg-ai-chat-page #site-navigation,
body.kg-ai-chat-page .menu-toggle,
body.kg-ai-chat-page .hamburger,
body.kg-ai-chat-page #menu,
body.kg-ai-chat-page .menu,
body.kg-ai-chat-page .notification-icon,
body.kg-ai-chat-page .notification-btn,
body.kg-ai-chat-page .notifications {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 999999 !important;
}

/* 2. Specific display modes for theme headers */
body.kg-ai-chat-page header,
body.kg-ai-chat-page .site-header,
body.kg-ai-chat-page .ast-primary-header-bar,
body.kg-ai-chat-page #ast-desktop-header,
body.kg-ai-chat-page #ast-mobile-header {
    display: flex !important;
}

/* Responsive menu & header overrides for mobile view on AI chat pages */
@media screen and (max-width: 921px) {
    /* Hide plugin topbar desktop nav on mobile AI pages */
    body.kg-ai-chat-page #kg-topbar-desktop-nav,
    body.kg-ai-chat-page .kg-topbar-desktop-nav {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        opacity: 0 !important;
    }
    /* Hide desktop header completely on mobile to prevent desktop menu from rendering */
    body.kg-ai-chat-page #ast-desktop-header,
    body.kg-ai-chat-page .ast-desktop-header {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        opacity: 0 !important;
    }
    /* Hide desktop menu items / horizontal lists on mobile unless toggled open */
    body.kg-ai-chat-page:not(.ast-mobile-menu-active):not(.toggle-active) nav:not(.active):not(.toggled):not(.open) ul,
    body.kg-ai-chat-page:not(.ast-mobile-menu-active):not(.toggle-active) .site-navigation:not(.active):not(.toggled):not(.open) ul,
    body.kg-ai-chat-page:not(.ast-mobile-menu-active):not(.toggle-active) #site-navigation:not(.active):not(.toggled):not(.open) ul,
    body.kg-ai-chat-page:not(.ast-mobile-menu-active):not(.toggle-active) .main-navigation:not(.active):not(.toggled):not(.open) ul,
    body.kg-ai-chat-page:not(.ast-mobile-menu-active):not(.toggle-active) #menu:not(.active):not(.toggled):not(.open),
    body.kg-ai-chat-page:not(.ast-mobile-menu-active):not(.toggle-active) .menu:not(.active):not(.toggled):not(.open) {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }
    /* Ensure the mobile header itself is flex-displayed */
    body.kg-ai-chat-page #ast-mobile-header {
        display: flex !important;
        visibility: visible !important;
    }
}

@media screen and (min-width: 922px) {
    /* Hide mobile header on desktop */
    body.kg-ai-chat-page #ast-mobile-header,
    body.kg-ai-chat-page .ast-mobile-header-wrap {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        opacity: 0 !important;
    }
    /* Ensure desktop header is flex-displayed */
    body.kg-ai-chat-page #ast-desktop-header {
        display: flex !important;
        visibility: visible !important;
    }
}

/* 3. Ensure all click events pass through to all children inside the theme header */
body.kg-ai-chat-page #page *,
body.kg-ai-chat-page header *,
body.kg-ai-chat-page #masthead *,
body.kg-ai-chat-page .site-header *,
body.kg-ai-chat-page nav *,
body.kg-ai-chat-page .site-navigation *,
body.kg-ai-chat-page #site-navigation *,
body.kg-ai-chat-page .menu-toggle *,
body.kg-ai-chat-page .hamburger *,
body.kg-ai-chat-page #menu *,
body.kg-ai-chat-page .menu *,
body.kg-ai-chat-page .notification-icon *,
body.kg-ai-chat-page .notification-btn *,
body.kg-ai-chat-page .notifications * {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* 4. Layer the chat containers below the theme header so it remains clickable */
body.kg-ai-chat-page #jc3-root,
body.kg-ai-chat-page .jc3-root,
body.kg-ai-chat-page #jc2-root,
body.kg-ai-chat-page .jc2-root,
body.kg-ai-chat-page #jc-root,
body.kg-ai-chat-page .jc-root,
body.kg-ai-chat-page .kgc.kg-standalone,
body.kg-ai-chat-page .kgc-omastro.kg-standalone,
body.kg-ai-chat-page [id^="kgc-omastro"],
body.kg-ai-chat-page #kgc-omastro-general,
body.kg-ai-chat-page #kgc-kgpred {
    z-index: 100 !important;
    pointer-events: all !important;
}

/* ══════════════════════════════════════════════════
   LIGHT MODE: CSS Variable Defaults
   (Components styled by APP UI REDESIGN v8.0 block below)
   ══════════════════════════════════════════════════ */

/* Pointer Events — z-index / layout fixes (no theme) */
.rwrap, .kg-results, .jc3-container, .kgc, #jc3-root { pointer-events: auto; }
/* MOBILE-INPUT-CLICK-FIX: removed pointer-events:none that blocked input */
.kgc.kg-standalone *, .kgc-omastro.kg-standalone *, #jc3-root * { pointer-events: auto; }
.rwrap:not(.active),
.rwrap[style*="display: none"],
#kg-user-dashboard:not(.active),
#kg-user-dashboard:not(.show),
#kg-user-dashboard[style*="display: none"] { pointer-events: none; }
.rwrap.active, #kg-user-dashboard.active, #kg-user-dashboard.show { pointer-events: auto; }
.kg-modal, .kg-modal-content, .kg-modal-dialog,
.kg-popup, .kg-popup-content, .kg-dashboard-panel,
.kg-dashboard-card, .kg-auth-modal, .kg-auth-modal-content { pointer-events: auto; }
.site-header, #masthead, .site-navigation, #site-navigation,
.menu-toggle, .hamburger, .ast-mobile-header-wrap, .main-header-bar-wrap,
.notification-icon, .notification-btn, .notifications,
.header-wrap, #header-wrap, .header-container, #header-container,
.site-header-wrapper { z-index: 999999; pointer-events: auto; }
.site-header *, #masthead *, .site-navigation *, #site-navigation *,
.menu-toggle *, .hamburger *, .ast-mobile-header-wrap *,
.main-header-bar-wrap *, .notification-icon *, .notification-btn *,
.notifications * { pointer-events: auto; }


/* ═══════════════════════════════════════════════════════════
   APP UI REDESIGN v8.0 — True App-Like Feel + Proper Dark/Light Mode
   Fixes: Dark mode forced in light mode, z-index wars, app-like UI
   ═══════════════════════════════════════════════════════════ */

/* ── ROOT: Proper light mode defaults (was missing) ── */
:root {
  --app-radius: 18px;
  --app-radius-sm: 12px;
  --app-radius-xs: 8px;
  --app-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --topbar-h: 56px;
  --bnav-h: 64px;
}

/* ── LIGHT MODE: Clean white app look ── */
body:not(.kg-dark) {
  background: #f5f0e8 !important;
  color: #1a0a00 !important;
}
body:not(.kg-dark) .kg-topbar {
  background: linear-gradient(135deg, #1a0800, #2d1200) !important;
  border-bottom: 1px solid rgba(255,107,0,0.3) !important;
}
body:not(.kg-dark) .kg-app,
body:not(.kg-dark) #kg-app {
  background: #f5f0e8 !important;
}
body:not(.kg-dark) .form-card,
body:not(.kg-dark) .ccard,
body:not(.kg-dark) .tcard,
body:not(.kg-dark) .panchang-card,
body:not(.kg-dark) .match-card {
  background: #ffffff !important;
  border: 1px solid rgba(155, 100, 30, 0.15) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
}
body:not(.kg-dark) .page-header {
  background: linear-gradient(135deg, #1a0800, #3d1200) !important;
  color: #fff !important;
}
body:not(.kg-dark) .page-header-title,
body:not(.kg-dark) .page-header-sub { color: #fff !important; }

body:not(.kg-dark) label { color: #3d1500 !important; }
body:not(.kg-dark) input[type="text"],
body:not(.kg-dark) input[type="number"],
body:not(.kg-dark) input[type="date"],
body:not(.kg-dark) select,
body:not(.kg-dark) textarea {
  background: #fff !important;
  color: #1a0a00 !important;
  border-color: rgba(155,100,30,0.3) !important;
}
body:not(.kg-dark) input::placeholder { color: #9a7060 !important; }

/* Bottom nav in light mode */
body:not(.kg-dark) .kg-liquid-nav,
body:not(.kg-dark) .kg-bottomnav {
  background: rgba(26, 8, 0, 0.95) !important;
  backdrop-filter: blur(20px) !important;
  border-top: 1px solid rgba(255,107,0,0.2) !important;
}

/* Sidebar in light mode */
body:not(.kg-dark) .kg-sidebar-drawer {
  background: #fff !important;
  border-right: 1px solid rgba(155,100,30,0.2) !important;
}
body:not(.kg-dark) .kg-sb-item-label { color: #1a0a00 !important; }
body:not(.kg-dark) .kg-sb-section-label { color: rgba(155,80,0,0.7) !important; }

/* ── APP-LIKE TOPBAR ── */
.kg-topbar {
  height: var(--topbar-h) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 10000 !important;
  box-shadow: 0 2px 20px rgba(0,0,0,0.3) !important;
}
.kg-topbar-inner,
.kg-topbar > .kg-topbar-inner {
  height: var(--topbar-h) !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 12px !important;
  gap: 8px !important;
}

/* ── APP-LIKE HAMBURGER ── */
#kg-hamburger-btn,
.kg-hamburger {
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;
  gap: 5px !important;
  background: rgba(255,107,0,0.12) !important;
  border: 1px solid rgba(255,107,0,0.2) !important;
  cursor: pointer !important;
  pointer-events: all !important;
  z-index: 10001 !important;
  position: relative !important;
  transition: var(--app-transition) !important;
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
}
#kg-hamburger-btn:hover,
.kg-hamburger:hover {
  background: rgba(255,107,0,0.22) !important;
  transform: scale(1.05) !important;
}
.kg-ham-line {
  display: block !important;
  width: 18px !important;
  height: 2px !important;
  background: #FF8C00 !important;
  border-radius: 2px !important;
  transition: var(--app-transition) !important;
  pointer-events: none !important;
}

/* ── TOPBAR ACTION BUTTONS (Notif, Search, User) ── */
.kg-tb-notif,
.kg-tb-search-btn,
#kg-notif-btn,
#kg-search-toggle {
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  background: rgba(255,107,0,0.1) !important;
  border: 1px solid rgba(255,107,0,0.15) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  pointer-events: all !important;
  z-index: 10001 !important;
  position: relative !important;
  color: rgba(255,220,150,0.9) !important;
  font-size: 1rem !important;
  transition: var(--app-transition) !important;
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
}
.kg-tb-notif:hover,
.kg-tb-search-btn:hover,
#kg-notif-btn:hover,
#kg-search-toggle:hover {
  background: rgba(255,107,0,0.2) !important;
  transform: scale(1.05) !important;
}

/* ── SIDEBAR: APP-LIKE DRAWER ── */
.kg-sidebar-drawer,
#kg-sidebar-drawer {
  z-index: 100010 !important;
  top: 0 !important;
  height: 100dvh !important;
  border-radius: 0 24px 24px 0 !important;
  box-shadow: 4px 0 40px rgba(0,0,0,0.4) !important;
}
.kg-sidebar-overlay,
#kg-sidebar-overlay {
  z-index: 100009 !important;
}

/* ── BOTTOM NAV: GLASS MORPHISM ── */
.kg-liquid-nav,
.kg-bottomnav,
.kg-bnav-v6 {
  z-index: 9999 !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

/* ── APP PAGES: Full-screen cards ── */
.kg-pg {
  padding: 0 !important;
  min-height: calc(100dvh - var(--topbar-h) - var(--bnav-h)) !important;
}
.page-header {
  border-radius: 0 0 20px 20px !important;
  margin-bottom: 16px !important;
  padding: 20px 16px 24px !important;
}

/* ── KUNDALI FORM: App-like redesign ── */
#kg-form-wrap,
.form-wrap {
  padding: 0 12px 12px !important;
}
.form-card {
  border-radius: var(--app-radius) !important;
  padding: 20px !important;
  margin-bottom: 12px !important;
}
.form-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
}
.fg { display: flex !important; flex-direction: column !important; gap: 6px !important; }
.fg.full { grid-column: 1 / -1 !important; }
.fg label {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--saffron) !important;
}
.fg input,
.fg select {
  height: 46px !important;
  border-radius: var(--app-radius-sm) !important;
  border: 1.5px solid var(--border) !important;
  padding: 0 14px !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  background: var(--card) !important;
  color: var(--text) !important;
  transition: border-color 0.2s !important;
  -webkit-appearance: none !important;
}
.fg input:focus,
.fg select:focus {
  border-color: var(--saffron) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(255,107,0,0.15) !important;
}

/* Time of birth row — compact */
.tob-row {
  gap: 8px !important;
}
.tob-row input {
  height: 46px !important;
  border-radius: var(--app-radius-sm) !important;
}
.tob-row button {
  height: 46px !important;
  min-width: 44px !important;
  border-radius: var(--app-radius-sm) !important;
}

/* Form action buttons */
.form-actions {
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  margin-top: 20px !important;
}
.btn {
  height: 48px !important;
  border-radius: var(--app-radius-sm) !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  padding: 0 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  border: none !important;
  transition: var(--app-transition) !important;
}
.btn-primary {
  background: linear-gradient(135deg, #FF6B00, #FF8C00) !important;
  color: #fff !important;
  flex: 1 !important;
  justify-content: center !important;
  box-shadow: 0 4px 16px rgba(255,107,0,0.35) !important;
}
.btn-primary:hover { transform: translateY(-1px) !important; box-shadow: 0 6px 20px rgba(255,107,0,0.5) !important; }
.btn-secondary {
  background: var(--card) !important;
  color: var(--saffron) !important;
  border: 1.5px solid rgba(255,107,0,0.3) !important;
  flex: 1 !important;
  justify-content: center !important;
}

/* ── RESULT TABS: App-like pill tabs ── */
#chart-tabs,
.chart-tabs {
  display: flex !important;
  gap: 6px !important;
  padding: 4px !important;
  background: var(--bg3) !important;
  border-radius: 14px !important;
  overflow-x: auto !important;
  margin: 12px 12px 0 !important;
  scrollbar-width: none !important;
}
.ctab {
  flex-shrink: 0 !important;
  height: 36px !important;
  padding: 0 16px !important;
  border-radius: 10px !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  border: none !important;
  cursor: pointer !important;
  background: transparent !important;
  color: var(--muted) !important;
  transition: var(--app-transition) !important;
  white-space: nowrap !important;
}
.ctab.active {
  background: linear-gradient(135deg, #FF6B00, #FF8C00) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(255,107,0,0.3) !important;
}

/* ── GRAHA TABLE: Modern cards ── */
#kg-planet-table,
.kg-planet-table {
  border-radius: var(--app-radius) !important;
  overflow: hidden !important;
  margin: 0 12px !important;
}

/* ── DASHBOARD: Full App-page (not popup) ── */
#kg-user-dashboard {
  position: fixed !important;
  inset: 0 !important;
  /* z-index set by JS to 100300 — above topbar, below sidebar drawer */
  background: var(--bg) !important;
  padding-top: 0 !important;          /* No topbar padding — dashboard IS the full page */
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
/* Dashboard header */
.kg-dash-header,
#kg-dash-header {
  padding: 20px 16px !important;
  background: linear-gradient(135deg, #1a0800, #3d1200) !important;
  color: #fff !important;
  border-radius: 0 !important;
  margin-bottom: 16px !important;
  padding-top: calc(20px + env(safe-area-inset-top, 0px)) !important;
}
/* Dashboard close button — always above the dashboard itself */
.kg-dash-close,
#kg-dash-close {
  position: fixed !important;
  top: calc(14px + env(safe-area-inset-top, 0px)) !important;
  right: 14px !important;
  z-index: 100400 !important;   /* Above dashboard (100300) */
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: rgba(255,107,0,0.2) !important;
  border: 1.5px solid rgba(255,107,0,0.3) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  pointer-events: all !important;
  color: #FF8C00 !important;
  font-size: 1.1rem !important;
}

/* ── Z-INDEX HIERARCHY (clean, no conflicts) ──
   Page content:      1-100
   Topbar:            10000
   Bottom nav:        9999
   Sidebar overlay:   100009
   Sidebar drawer:    100010
   Dashboard:         99998
   Dashboard close:   100000
   Auth modal:        200000
   Loading overlay:   300000
   Notifications:     400000
── */

/* Topbar must always be above dashboard */
.kg-topbar, #kg-topbar {
  z-index: 100011 !important;
}

/* Sidebar stays above dashboard */
.kg-sidebar-drawer, #kg-sidebar-drawer { z-index: 100010 !important; }
.kg-sidebar-overlay, #kg-sidebar-overlay { z-index: 100009 !important; }

/* Auth modal above everything except loader */
#kg-auth-modal, .kg-auth-modal { z-index: 200000 !important; }

/* Loading overlay highest */
.ldwrap, #kg-ldwrap { z-index: 300000 !important; }

/* Notifications panel */
#kg-notif-panel, .kg-notif-panel { z-index: 400000 !important; }

/* ── DARK MODE: Fix places where dark was forced in light mode ── */
/* Remove forced dark backgrounds from chat areas in light mode */
body:not(.kg-dark) .kgc-topbar,
body:not(.kg-dark) .kgc-header {
  background: linear-gradient(135deg, #1a0800, #3d1200) !important;
  color: #fff !important;
}
body:not(.kg-dark) .kgc-messages {
  background: #f5f0e8 !important;
}
body:not(.kg-dark) .kgc-input-area {
  background: #fff !important;
  border-top: 1px solid rgba(155,100,30,0.2) !important;
}
body:not(.kg-dark) .kgc-msg-ai .kgc-msg-bubble {
  background: #fff !important;
  color: #1a0a00 !important;
  border: 1px solid rgba(155,100,30,0.15) !important;
}
body:not(.kg-dark) .kgc-msg-user .kgc-msg-bubble {
  background: linear-gradient(135deg, #FF6B00, #FF8C00) !important;
  color: #fff !important;
}
/* Fix: light mode sidebar text */
body:not(.kg-dark) .kg-sb-item-label,
body:not(.kg-dark) .kg-sb-subitem { color: #1a0a00 !important; }
body:not(.kg-dark) .kg-sb-item:hover { background: rgba(255,107,0,0.08) !important; }

/* Dark mode overrides (were correct, just reinforced) */
body.kg-dark .kgc-messages { background: #0a0a0a !important; }
body.kg-dark .kgc-input-area { background: #111 !important; border-top: 1px solid rgba(255,107,0,0.15) !important; }

/* ── NOTIFICATION PANEL: Above everything ── */
.kg-notif-wrap, #kg-notif-panel {
  z-index: 400000 !important;
  pointer-events: all !important;
}

/* ── FIX: Chat header buttons clickability ── */
.kgc-topbar *, .kgc-header * {
  pointer-events: auto !important;
}
.kgc-topbar button,
.kgc-header button,
.kgc-topbar [onclick],
.kgc-header [onclick] {
  z-index: 1 !important;
  position: relative !important;
  cursor: pointer !important;
  pointer-events: all !important;
}

/* ── WELCOME MESSAGE (homepage) ── */
.kg-welcome-msg {
  padding: 16px !important;
  margin: 0 12px 16px !important;
  background: linear-gradient(135deg, rgba(255,107,0,0.12), rgba(184,134,11,0.08)) !important;
  border: 1px solid rgba(255,107,0,0.2) !important;
  border-radius: var(--app-radius) !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
.kg-welcome-avatar {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #FF6B00, #FF8C00) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.3rem !important;
  flex-shrink: 0 !important;
  box-shadow: 0 4px 12px rgba(255,107,0,0.3) !important;
}
.kg-welcome-text { flex: 1 !important; }
.kg-welcome-name {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--saffron) !important;
  margin-bottom: 2px !important;
}
.kg-welcome-sub {
  font-size: 0.78rem !important;
  color: var(--muted) !important;
  line-height: 1.4 !important;
}
body:not(.kg-dark) .kg-welcome-msg {
  background: linear-gradient(135deg, rgba(255,107,0,0.1), rgba(184,134,11,0.06)) !important;
}

/* ── MISC APP POLISH ── */
/* Card hover effect */
.ccard:hover, .tcard:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
  transition: var(--app-transition) !important;
}

/* Smooth page transitions */
.kg-pg {
  transition: opacity 0.15s ease !important;
}
.kg-pg.kg-pg-entering { opacity: 0; }
.kg-pg.kg-pg-visible { opacity: 1; }

/* ── MOBILE: Remove theme header chrome (for plugin pages only) ── */
body.kg-no-theme-chrome .site-header,
body.kg-no-theme-chrome #masthead,
body.kg-no-theme-chrome .site-navigation,
body.kg-no-theme-chrome #main-navigation,
body.kg-no-theme-chrome .ast-site-header-area,
body.kg-no-theme-chrome .header-main-layout-1,
body.kg-no-theme-chrome .main-header-bar { display: none !important; }

body.kg-no-theme-chrome > #page > main,
body.kg-no-theme-chrome > #page > #content,
body.kg-no-theme-chrome > .hfeed > main { padding: 0 !important; margin: 0 !important; }

/* ═══════════════════════════════════════════════════════════════════════
   KG MASTER FIX v8.0 — Resolves ALL click-blocking & z-index conflicts
   Applied last so it wins over all earlier rules.
   DO NOT add more CSS after this block.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. GLOBAL TOPBAR: Always on top, always clickable ─────────────── */
#kg-topbar,
.kg-topbar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 100200 !important;
  pointer-events: auto !important;
}
#kg-topbar *,
.kg-topbar * {
  pointer-events: auto !important;
}
#kg-topbar button,
.kg-topbar button,
#kg-hamburger-btn,
.kg-hamburger,
#kg-notif-btn,
.kg-tb-notif,
#kg-search-toggle,
.kg-tb-search-btn,
#kg-langbtn,
.kg-langbtn {
  pointer-events: auto !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
}

/* ── 2. GLOBAL SIDEBAR DRAWER: Above topbar ────────────────────────── */
#kg-sidebar-drawer,
.kg-sidebar-drawer {
  z-index: 200000 !important;
  pointer-events: auto !important;
}
#kg-sidebar-overlay,
.kg-sidebar-overlay {
  z-index: 199999 !important;
}
#kg-sidebar-overlay.kg-sidebar-open,
.kg-sidebar-overlay.kg-sidebar-open {
  pointer-events: auto !important;
}
#kg-sidebar-overlay:not(.kg-sidebar-open),
.kg-sidebar-overlay:not(.kg-sidebar-open) {
  pointer-events: none !important;
}

/* ── 3. CHAT PAGES (kgc-topbar) — The core chat UI ────────────────── */
/* The .kgc is position:fixed with z-index:800.
   Inside it, kgc-topbar has z-index:2 which is fine for internal stacking,
   but sidebar must be fixed & above the GLOBAL topbar when open. */

/* kgc internal topbar — always interactive */
html body .kgc .kgc-topbar {
  position: relative !important;
  z-index: 10 !important;
  pointer-events: auto !important;
}
html body .kgc .kgc-topbar * {
  pointer-events: auto !important;
}
html body .kgc .kgc-topbar button,
html body .kgc .kgc-topbar .kgc-btn-icon,
html body .kgc .kgc-topbar [onclick] {
  pointer-events: auto !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
  /* Remove z-index:1 that was blocking clicks */
  z-index: auto !important;
  position: relative !important;
}

/* kgc chat sidebar — must appear ABOVE global topbar (100200) when open */
html body .kgc .kgc-sidebar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  width: min(300px, 85vw) !important;
  z-index: 300000 !important;          /* above everything */
  transform: translateX(-100%) !important;
  transition: transform 0.25s ease !important;
  pointer-events: auto !important;
}
html body .kgc .kgc-sidebar.open {
  transform: translateX(0) !important;
}
html body .kgc .kgc-sidebar * {
  pointer-events: auto !important;
}

/* kgc sidebar overlay — just below sidebar */
html body .kgc .kgc-sidebar-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 299999 !important;
  display: none !important;
  pointer-events: none !important;
  background: rgba(0,0,0,0.65) !important;
}
html body .kgc .kgc-sidebar-overlay.open {
  display: block !important;
  pointer-events: auto !important;
}

/* ── 4. NOTIFICATION DROPDOWN: Highest z-index ─────────────────────── */
#kg-notif-dropdown {
  z-index: 400000 !important;
  pointer-events: auto !important;
}
#kg-notif-dropdown * {
  pointer-events: auto !important;
}

/* ── 5. HIDDEN OVERLAYS: Must NOT block clicks ─────────────────────── */
/* Settings overlay when closed */
.kg-settings-overlay:not(.open),
#kg-settings-panel:not(.open) {
  pointer-events: none !important;
}
.kg-settings-overlay.open,
#kg-settings-panel.open {
  pointer-events: auto !important;
  z-index: 150000 !important;
}

/* User dashboard when hidden */
#kg-user-dashboard:not([style*="block"]) {
  pointer-events: none !important;
}
#kg-user-dashboard[style*="display: block"],
#kg-user-dashboard[style*="display:block"] {
  pointer-events: auto !important;
  z-index: 100300 !important;           /* above topbar */
}

/* Auth modal when hidden */
#kg-auth-modal:not([style*="flex"]):not([style*="block"]) {
  pointer-events: none !important;
}
#kg-auth-modal[style*="display: flex"],
#kg-auth-modal[style*="display:flex"],
#kg-auth-modal[style*="display: block"],
#kg-auth-modal[style*="display:block"] {
  pointer-events: auto !important;
  z-index: 500000 !important;
}

/* Upgrade modal when hidden */
#kg-upgrade-modal:not([style*="flex"]):not([style*="block"]) {
  pointer-events: none !important;
}

/* Loading overlay when not active */
.ldwrap:not(.active) {
  pointer-events: none !important;
}
.ldwrap.active {
  pointer-events: auto !important;
  z-index: 600000 !important;
}

/* Push prompt when not visible */
.kg-push-prompt:not(.kg-push-prompt-visible) {
  pointer-events: none !important;
  opacity: 0 !important;
}

/* kgc container when not active — MUST NOT block clicks */
.kgc:not([style*="flex"]):not(.kg-standalone) {
  pointer-events: none !important;
}

/* ── 6. SEARCH BAR: Only blocks clicks when open ───────────────────── */
.kg-search-bar-wrap:not(.kg-search-open) {
  pointer-events: none !important;
}
.kg-search-bar-wrap.kg-search-open {
  pointer-events: auto !important;
  z-index: 150001 !important;
}

/* ── 7. BOTTOM NAV: Clickable, below sidebar ───────────────────────── */
.kg-bottomnav,
.kg-liquid-nav,
#kg-bottomnav {
  z-index: 9999 !important;
  pointer-events: auto !important;
}
.kg-bottomnav *,
.kg-liquid-nav *,
#kg-bottomnav * {
  pointer-events: auto !important;
  touch-action: manipulation !important;
}
.kg-bottomnav.kg-bnav-hidden,
.kg-liquid-nav.kg-bnav-hidden,
#kg-bottomnav.kg-bnav-hidden {
  pointer-events: none !important;
}

/* ── 8. FLOATING NOTIFICATION BELL: Hidden (header btn used instead) ─ */
/* .kg-notif-bell-wrap is kept display:none — header #kg-notif-btn is used */

/* ── 9. DARK MODE: bg fix so light mode elements don't show dark bg ── */
body:not(.kg-dark) #kg-app,
body:not(.kg-dark) .kg-app {
  background: var(--bg, #fafaf8) !important;
}

/* ── 10. OMASTRO / PREDICTIONS CHAT page specific fixes ────────────── */
/* On standalone omastro pages, kgc-topbar buttons must work */
body.kg-omastro-standalone .kgc .kgc-topbar button,
body.kg-omastro-standalone .kgc .kgc-btn-icon,
body.kg-omastro-standalone .kgc .kgc-topbar [onclick],
body.kg-chat-fullpage .kgc .kgc-topbar button,
body.kg-chat-fullpage .kgc .kgc-btn-icon,
body.kg-chat-fullpage .kgc .kgc-topbar [onclick] {
  pointer-events: auto !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
  z-index: auto !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   END KG MASTER FIX v8.0
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   KG LIGHT MODE FIX — Chat (kgc) component light mode support
   Chat was always dark — now respects day/night mode
   ═══════════════════════════════════════════════════════════════════════ */
body:not(.kg-dark) .kgc-topbar,
body:not(.kg-dark) html .kgc .kgc-topbar {
  background: #ffffff !important;
  border-bottom: 1px solid rgba(155,100,30,0.15) !important;
}
body:not(.kg-dark) .kgc-modes {
  background: #f5f0e8 !important;
  border-bottom: 1px solid rgba(155,100,30,0.12) !important;
}
body:not(.kg-dark) .kgc-messages,
body:not(.kg-dark) html .kgc .kgc-messages {
  background: #faf7f2 !important;
}
body:not(.kg-dark) .kgc-input-area,
body:not(.kg-dark) html .kgc .kgc-input-area {
  background: #ffffff !important;
  border-top: 1px solid rgba(155,100,30,0.15) !important;
}
body:not(.kg-dark) .kgc-input-row textarea {
  background: #f5f0e8 !important;
  border: 1.5px solid rgba(155,100,30,0.25) !important;
  color: #1a0800 !important;
}
body:not(.kg-dark) .kgc-input-row textarea::placeholder { color: #9a7a50 !important; }
body:not(.kg-dark) .kgc-suggestions {
  background: #f0ebe0 !important;
  border-top: 1px solid rgba(155,100,30,0.12) !important;
}
body:not(.kg-dark) .kgc-msg.kgc-ai .kgc-msg-bubble {
  background: #ffffff !important;
  color: #1a0800 !important;
  border: 1px solid rgba(155,100,30,0.15) !important;
}
body:not(.kg-dark) .kgc-sidebar,
body:not(.kg-dark) html .kgc .kgc-sidebar {
  background: #ffffff !important;
  border-right: 1px solid rgba(155,100,30,0.15) !important;
}
body:not(.kg-dark) .kgc-sidebar-header { border-bottom: 1px solid rgba(155,100,30,0.12) !important; color: #3d1500 !important; }
body:not(.kg-dark) .kgc-sidebar-btn { border-color: rgba(155,100,30,0.2) !important; color: #5a3a10 !important; }
body:not(.kg-dark) .kgc-hist-item { color: #3d1500 !important; border-bottom: 1px solid rgba(155,100,30,0.08) !important; }
body:not(.kg-dark) .kgc-hist-item:hover { background: rgba(255,107,0,0.06) !important; }
body:not(.kg-dark) .kgc-btn-icon,
body:not(.kg-dark) html .kgc .kgc-btn-icon {
  background: rgba(0,0,0,0.05) !important;
  border: 1px solid rgba(155,100,30,0.18) !important;
  color: #5a3a10 !important;
}
body:not(.kg-dark) .kgc-title { color: #1a0800 !important; }
body:not(.kg-dark) .kgc-mode-btn { color: #5a3a10 !important; }
body:not(.kg-dark) .kgc-mode-btn.active { color: #FF6B00 !important; border-bottom-color: #FF6B00 !important; }

/* omx input (Om Astro AI pages) light mode */
body:not(.kg-dark) .kgc-topbar-omastro,
body:not(.kg-dark) html .kgc .kgc-topbar-omastro {
  background: linear-gradient(135deg, #1a0800, #2d1200) !important;
}
body:not(.kg-dark) .kgc-topbar-omastro .kgc-title { color: #fff !important; }
body:not(.kg-dark) .kgc-topbar-omastro .kgc-btn-icon {
  background: rgba(255,255,255,0.1) !important;
  border-color: rgba(255,255,255,0.15) !important;
  color: rgba(255,255,255,0.8) !important;
}

/* omx message area light mode */
body:not(.kg-dark) .omx-box { background: #ffffff !important; border-top: 1px solid rgba(155,100,30,0.15) !important; }
body:not(.kg-dark) .omx-ta {
  background: #f5f0e8 !important;
  color: #1a0800 !important;
  border-color: rgba(155,100,30,0.25) !important;
}



/* ═══════════════════════════════════════════════════════════════════════
   KUNDALI FORM v8 — App-like redesign (kf-* prefix)
   Full dark/light mode support
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Hero header ── */
.kf-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 16px 14px;
  background: linear-gradient(135deg, #1a0800, #3d1200);
  border-radius: 0 0 24px 24px;
  margin-bottom: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
.kf-hero-icon {
  font-size: 2.2rem;
  filter: drop-shadow(0 0 12px rgba(255,107,0,0.6));
  flex-shrink: 0;
  animation: kfPulse 3s ease-in-out infinite;
}
@keyframes kfPulse {
  0%,100% { filter: drop-shadow(0 0 8px rgba(255,107,0,0.4)); }
  50%      { filter: drop-shadow(0 0 18px rgba(255,107,0,0.8)); }
}
.kf-hero-title {
  font-family: 'Cinzel', serif !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  background: linear-gradient(135deg, #FFD700, #FF8C00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0 !important;
  line-height: 1.2 !important;
}
.kf-hero-sub {
  font-size: .72rem;
  color: rgba(255,220,150,0.65);
  margin-top: 3px;
  font-family: 'Rajdhani', sans-serif;
  letter-spacing: .04em;
}

/* ── Wrapper ── */
.kf-wrap {
  padding: 0 12px 100px;
  max-width: 600px;
  margin: 0 auto;
}

/* ── Section card ── */
.kf-section {
  background: var(--card, #fff);
  border: 1px solid var(--border, #E8D5A0);
  border-radius: 18px;
  padding: 16px 14px;
  margin-bottom: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  transition: box-shadow 0.2s;
}
.kf-section:focus-within {
  box-shadow: 0 4px 20px rgba(255,107,0,0.12);
  border-color: rgba(255,107,0,0.3);
}

/* ── Section label ── */
.kf-section-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--saffron, #FF6B00);
  margin-bottom: 14px;
}
.kf-step-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FF6B00, #FF8C00);
  color: #fff;
  font-size: .68rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(255,107,0,0.35);
}

/* ── Field row ── */
.kf-field {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}
.kf-field:last-child { margin-bottom: 0; }
.kf-field-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255,107,0,0.08);
  border: 1px solid rgba(255,107,0,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
  margin-top: 16px;
}
.kf-field-body { flex: 1; min-width: 0; }

/* ── Label ── */
.kf-label {
  display: block;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted, #7A5F2A);
  margin-bottom: 5px;
}

/* ── Input ── */
.kf-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 13px;
  border: 1.5px solid var(--border, #C8A030);
  border-radius: 12px;
  background: var(--bg2, #F8F8F8);
  color: var(--text, #000);
  font-size: .9rem;
  font-family: inherit;
  transition: border-color .18s, box-shadow .18s, background .18s;
  -webkit-appearance: none;
  appearance: none;
}
.kf-input:focus {
  outline: none;
  border-color: var(--saffron, #FF6B00);
  box-shadow: 0 0 0 3px rgba(255,107,0,0.12);
  background: var(--card, #fff);
}
.kf-input::placeholder { color: var(--muted, #9A7A40); opacity: 0.7; }

/* ── 2-col row ── */
.kf-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 400px) {
  .kf-row-2 { grid-template-columns: 1fr; }
}

/* ── 3-col row (advanced) ── */
.kf-row-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
@media (max-width: 480px) {
  .kf-row-3 { grid-template-columns: 1fr 1fr; }
}
.kf-field-small .kf-label { font-size: .65rem; }

/* ── Gender pills ── */
.kf-gender-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.kf-pill {
  flex: 1;
  padding: 8px 10px;
  border: 1.5px solid var(--border, #C8A030);
  border-radius: 10px;
  background: transparent;
  color: var(--text, #000);
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .18s;
  font-family: inherit;
  white-space: nowrap;
}
.kf-pill:hover { border-color: var(--saffron); color: var(--saffron); background: rgba(255,107,0,0.06); }
.kf-pill.active {
  background: linear-gradient(135deg, #FF6B00, #FF8C00);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 2px 8px rgba(255,107,0,0.3);
}

/* ── Time row ── */
.kf-time-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.kf-time-part {
  width: 64px !important;
  text-align: center;
  font-size: 1rem !important;
  font-weight: 700 !important;
  flex-shrink: 0;
  padding: 10px 6px !important;
}
.kf-time-sep {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--muted);
  flex-shrink: 0;
}
.kf-ampm {
  display: flex;
  border: 1.5px solid var(--border, #C8A030);
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
}
.kf-ampm-btn {
  padding: 10px 13px;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .18s;
  font-family: inherit;
}
.kf-ampm-btn.active {
  background: linear-gradient(135deg, #FF6B00, #FF8C00);
  color: #fff;
}

/* ── Coord display ── */
.kf-coord-disp {
  margin-top: 6px;
  font-size: .72rem;
  color: var(--jade3, #43A047);
  font-weight: 600;
  min-height: 16px;
}

/* ── Advanced toggle ── */
.kf-advanced {
  margin-top: 12px;
  border: 1px dashed var(--border, #C8A030);
  border-radius: 12px;
  overflow: hidden;
}
.kf-advanced-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  cursor: pointer;
  font-size: .78rem;
  font-weight: 600;
  color: var(--muted);
  list-style: none;
  user-select: none;
}
.kf-advanced-toggle::-webkit-details-marker { display: none; }
.kf-advanced-toggle:hover { background: rgba(255,107,0,0.04); color: var(--saffron); }
.kf-adv-arrow { transition: transform .25s ease; font-size: .7rem; }
.kf-adv-body { padding: 12px 14px 14px; border-top: 1px dashed var(--border); }

/* ── Error box ── */
.kf-err {
  padding: 10px 14px;
  background: rgba(198,40,40,0.08);
  border: 1.5px solid rgba(198,40,40,0.3);
  border-radius: 10px;
  color: #C62828;
  font-size: .82rem;
  margin-bottom: 12px;
}

/* ── Action buttons ── */
.kf-actions { margin-top: 8px; }
.kf-btn-generate {
  width: 100%;
  padding: 15px 20px;
  background: linear-gradient(135deg, #FF6B00, #FF8C00, #FFB300);
  border: none;
  border-radius: 16px;
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
  font-family: 'Cinzel', serif;
  letter-spacing: .06em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 6px 24px rgba(255,107,0,0.4);
  transition: transform .18s, box-shadow .18s;
  touch-action: manipulation;
  margin-bottom: 10px;
}
.kf-btn-generate:active { transform: scale(0.98); box-shadow: 0 2px 12px rgba(255,107,0,0.3); }
.kf-btn-icon-wrap {
  font-size: 1.1rem;
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.6));
  animation: kfSpin 8s linear infinite;
}
@keyframes kfSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.kf-actions-secondary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.kf-btn-sec {
  padding: 11px 14px;
  background: var(--card, #fff);
  border: 1.5px solid var(--border, #C8A030);
  border-radius: 12px;
  color: var(--text);
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all .18s;
  font-family: inherit;
  touch-action: manipulation;
}
.kf-btn-sec:hover { border-color: var(--saffron); color: var(--saffron); background: rgba(255,107,0,0.05); }
.kf-btn-sec:active { transform: scale(0.97); }

/* ── Loader ── */
.kf-loader {
  position: relative;
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
}
.kf-loader-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid rgba(255,107,0,0.15);
  border-top-color: #FF6B00;
  animation: kfSpin .9s linear infinite;
}
.kf-loader-planet {
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FF6B00, #FFB300);
  opacity: 0.6;
  animation: kfPulse 1.4s ease-in-out infinite;
}
.kf-loader-text {
  text-align: center;
  color: var(--muted);
  font-family: 'Cinzel', serif;
  font-size: .82rem;
  letter-spacing: .06em;
}

/* ── Dark mode overrides ── */
body.kg-dark .kf-section {
  background: var(--card, #111) !important;
  border-color: rgba(255,107,0,0.12) !important;
}
body.kg-dark .kf-input {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,107,0,0.18) !important;
  color: #fff !important;
}
body.kg-dark .kf-input:focus {
  background: rgba(255,255,255,0.08) !important;
  border-color: #FF6B00 !important;
}
body.kg-dark .kf-field-icon {
  background: rgba(255,107,0,0.1) !important;
  border-color: rgba(255,107,0,0.2) !important;
}
body.kg-dark .kf-pill {
  border-color: rgba(255,107,0,0.2) !important;
  color: rgba(255,220,160,0.8) !important;
}
body.kg-dark .kf-ampm { border-color: rgba(255,107,0,0.2) !important; }
body.kg-dark .kf-ampm-btn { color: rgba(255,220,160,0.7) !important; }
body.kg-dark .kf-btn-sec {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,107,0,0.2) !important;
  color: rgba(255,220,160,0.8) !important;
}
body.kg-dark .kf-advanced { border-color: rgba(255,107,0,0.15) !important; }
body.kg-dark .kf-adv-body { border-top-color: rgba(255,107,0,0.12) !important; }
body.kg-dark .kf-section-label { color: #FF8C00 !important; }

/* ═══════════════════════════════════════════════════════════════════════
   GLOBAL APP UI POLISH v8
   ═══════════════════════════════════════════════════════════════════════ */

/* Bottom nav — clean pill style */
.kg-bnav-item {
  border-radius: 12px !important;
  transition: all .2s !important;
}
.kg-bnav-item.active {
  background: rgba(255,107,0,0.12) !important;
}

/* Topbar polish */
.kg-topbar, #kg-topbar {
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* Tab bar scrollable — hide scrollbar */
.ctrl-bar, .chart-tabs {
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}
.ctrl-bar::-webkit-scrollbar,
.chart-tabs::-webkit-scrollbar { display: none !important; }

/* Result header — app-like */
.res-head {
  padding: 14px 14px 10px !important;
  gap: 8px !important;
}
.res-name {
  font-size: 1rem !important;
  font-weight: 800 !important;
}

/* Cards — uniform corner radius */
.ccard, .tcard {
  border-radius: 16px !important;
  overflow: hidden !important;
}

/* Buttons in results — pill style */
.btn {
  border-radius: 10px !important;
  font-weight: 700 !important;
  transition: all .18s !important;
}
.btn:active { transform: scale(0.97) !important; }
.btn-primary {
  background: linear-gradient(135deg, #FF6B00, #FF8C00) !important;
  box-shadow: 0 3px 12px rgba(255,107,0,0.35) !important;
}

/* ══════════════════════════════════════════════════════════════
   PATCH v7.5.x — Om Astro AI Refactor (oag/oap IDs) + UI Fixes
   ══════════════════════════════════════════════════════════════ */

/* ── 1. New page IDs: oag (General) & oap (Predictions) ──────── */

/* Both pages carry kgc-oag / kgc-oap — same layout as old classes */
.kgc-oag, .kgc-oap {
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0;
  overflow: hidden;
}

/* Topbar accent — General (orange) */
.kgc-topbar-oag {
  border-bottom: 2px solid rgba(255, 107, 0, 0.18) !important;
}
/* Topbar accent — Predictions (purple) */
.kgc-topbar-oap {
  border-bottom: 2px solid rgba(139, 92, 246, 0.18) !important;
}

/* Sidebar action button colours */
.kgc-sidebar-btn-oag {
  background: linear-gradient(135deg, #FF6B00, #FF8C00) !important;
  color: #fff !important;
}
.kgc-sidebar-btn-oap {
  background: linear-gradient(135deg, #8B5CF6, #6366F1) !important;
  color: #fff !important;
}

/* Gate button colours */
.kgc-gate-btn-oag {
  background: linear-gradient(135deg, #FF6B00, #FF8C00) !important;
  color: #fff !important;
  padding: 10px 22px;
  border-radius: 20px;
  font-size: .85rem;
  font-weight: 700;
}
.kgc-gate-btn-oap {
  background: linear-gradient(135deg, #8B5CF6, #6366F1) !important;
  color: #fff !important;
  padding: 10px 22px;
  border-radius: 20px;
  font-size: .85rem;
  font-weight: 700;
}

/* Suggestion chips — General */
.omx-sugg-chip-oag {
  border-color: rgba(255, 107, 0, 0.35) !important;
  color: #FF6B00 !important;
}
.omx-sugg-chip-oag:hover,
.omx-sugg-chip-oag:active {
  background: rgba(255, 107, 0, 0.1) !important;
}

/* Suggestion chips — Predictions */
.omx-sugg-chip-oap {
  border-color: rgba(139, 92, 246, 0.35) !important;
  color: #8B5CF6 !important;
}
.omx-sugg-chip-oap:hover,
.omx-sugg-chip-oap:active {
  background: rgba(139, 92, 246, 0.1) !important;
}

/* Send button — Predictions (already set inline, but reinforce) */
.omx-send-btn-oap {
  background: linear-gradient(135deg, #8B5CF6, #6366F1) !important;
}

/* Input box border accent — Predictions */
.omx-box-oap .omx-ta {
  border-color: rgba(139, 92, 246, 0.3) !important;
}
.omx-box-oap .omx-ta:focus {
  border-color: rgba(139, 92, 246, 0.8) !important;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.12) !important;
}

/* Attach pill — Predictions */
.omx-pill-attach-oap {
  border-color: rgba(139, 92, 246, 0.4) !important;
  color: #8B5CF6 !important;
}

/* Hide Universal AI bar on new page classes too */
body.kgc-oag-host #kg-universal-ai-bar,
body.kgc-oag-host .kg-uaib,
body.kgc-oap-host #kg-universal-ai-bar,
body.kgc-oap-host .kg-uaib { display: none !important; }

/* ── 2. Universal AI Bar — z-index fix so it never covers elements ── */

/* The bar must sit BELOW any open dropdowns/modals but above page content.
   z-index 9980 is kept, but we ensure page content has proper bottom padding
   so the bar never overlaps any interactive element.                        */

#kg-universal-ai-bar,
.kg-uaib {
  z-index: 9980 !important;   /* already set, reinforce */
}

/* On mobile: ensure body/app content is padded enough so the AI bar + bottom
   nav never cover the last element. We add extra safety buffer of 8px.       */
@media (max-width: 767px) {
  body.kg-has-bottomnav.kg-has-uaib #kg-app,
  body.kg-has-bottomnav.kg-has-uaib .kg-app {
    padding-bottom: calc(var(--kg-bnav-h, 58px) + 80px) !important;
  }
  /* When no bottom nav but AI bar present */
  body:not(.kg-has-bottomnav).kg-has-uaib #kg-app,
  body:not(.kg-has-bottomnav).kg-has-uaib .kg-app {
    padding-bottom: 80px !important;
  }
}

/* Desktop: same reinforcement */
@media (min-width: 768px) {
  body.kg-has-uaib #kg-app,
  body.kg-has-uaib .kg-app {
    padding-bottom: 84px !important;
  }
}

/* Ensure any fixed/sticky footer-like elements inside kg-app
   always have enough breathing room above the AI bar            */
.kg-app > *:last-child,
#kg-app > *:last-child {
  margin-bottom: 0;    /* no collapse; padding on parent handles spacing */
}

/* ── 3. Kundali Input Page — Time Field Responsive Fix ─────────── */

/* kf-time-row: the row containing Hr input, colon, Min input, AM/PM */
.kf-time-row {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;    /* keep on one line */
  gap: 4px !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

/* Hour & Minute inputs: shrink on tiny screens */
.kf-time-part {
  width: 56px !important;
  min-width: 40px !important;
  max-width: 72px !important;
  flex: 0 0 auto !important;
  text-align: center !important;
  font-size: .95rem !important;
  font-weight: 700 !important;
  padding: 10px 4px !important;
  box-sizing: border-box !important;
  -moz-appearance: textfield !important;  /* hide spin arrows Firefox */
}
.kf-time-part::-webkit-inner-spin-button,
.kf-time-part::-webkit-outer-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

/* Colon separator */
.kf-time-sep {
  flex-shrink: 0 !important;
  font-size: 1.2rem !important;
  font-weight: 800 !important;
  color: var(--muted) !important;
  padding: 0 1px !important;
}

/* AM/PM toggle group — flex fill remaining space */
.kf-ampm {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  border: 1.5px solid var(--border, #C8A030) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}
.kf-ampm-btn {
  flex: 1 !important;
  padding: 10px 8px !important;
  border: none !important;
  background: transparent !important;
  color: var(--text) !important;
  font-size: .78rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  font-family: inherit !important;
  transition: background .18s, color .18s !important;
}
.kf-ampm-btn.active {
  background: linear-gradient(135deg, #FF6B00, #FF8C00) !important;
  color: #fff !important;
}

/* Very small screens (< 360px) — shrink further */
@media (max-width: 359px) {
  .kf-time-part {
    width: 44px !important;
    min-width: 36px !important;
    font-size: .82rem !important;
    padding: 8px 2px !important;
  }
  .kf-ampm-btn {
    font-size: .72rem !important;
    padding: 8px 4px !important;
  }
}

/* The parent field-body must not clip the time row */
.kf-field-body {
  overflow: visible !important;
  min-width: 0 !important;
}

/* kf-field: ensure it doesn't add extra horizontal constraints */
.kf-field {
  overflow: visible !important;
}

/* ═══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   PATCH v7.5.x-B — Fix [id^="kgc-"] wildcard blocking child elements
   The rule above hides ALL elements whose ID starts with "kgc-".
   This catches children like #kgc-sidebar-oag, #kgc-sidebar-overlay-oag
   etc., making sidebar, buttons, notifications unclickable.
   We un-hide them inside any active kgc container.
   ══════════════════════════════════════════════════════════════ */

/* ── 1. Explicitly show new root containers ── */
#kgc-oag,
#kgc-oap {
  display: flex !important;
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ── 2. Un-hide ALL kgc- child elements inside an active kgc ──
   The [id^="kgc-"] rule at specificity (0,1,0) hides children.
   We override with higher specificity via body class + kgc parent.
*/
body.kg-omastro-standalone .kgc.kg-standalone [id^="kgc-"],
body.kg-omastro-host      .kgc.kg-standalone [id^="kgc-"],
body.kg-omastro-standalone .kgc.kgc-omastro  [id^="kgc-"],
body.kg-omastro-host      .kgc.kgc-omastro   [id^="kgc-"],
.kgc.kg-standalone [id^="kgc-"] {
  display: revert !important;       /* let the element's own CSS decide */
  pointer-events: auto !important;
  visibility: visible !important;
}

/* Sidebar overlay specifically needs display:none when NOT open */
.kgc.kg-standalone .kgc-sidebar-overlay:not(.open),
.kgc.kgc-omastro  .kgc-sidebar-overlay:not(.open) {
  display: none !important;
  pointer-events: none !important;
}
.kgc.kg-standalone .kgc-sidebar-overlay.open,
.kgc.kgc-omastro  .kgc-sidebar-overlay.open {
  display: block !important;
  pointer-events: auto !important;
}

/* Sidebar panel itself — block layout */
.kgc.kg-standalone [id^="kgc-sidebar-"]:not([id*="overlay"]),
.kgc.kgc-omastro  [id^="kgc-sidebar-"]:not([id*="overlay"]) {
  display: flex !important;
  flex-direction: column !important;
  pointer-events: auto !important;
  visibility: visible !important;
}

/* ── 3. All buttons/interactive elements inside active kgc always clickable ── */
.kgc.kg-standalone button,
.kgc.kg-standalone a,
.kgc.kg-standalone textarea,
.kgc.kg-standalone input,
.kgc.kg-standalone select,
.kgc.kgc-omastro button,
.kgc.kgc-omastro a,
.kgc.kgc-omastro textarea,
.kgc.kgc-omastro input,
.kgc.kgc-omastro select {
  pointer-events: auto !important;
  visibility: visible !important;
}

/* ── 4. Notification dropdown — ensure it's above the kgc layer ──
   kgc has z-index 8000; dropdown must be above it.
   It is appended to #kg-app or body by JS, so it's NOT inside kgc.
   The [id^="kgc-"] rule does NOT catch #kg-notif-dropdown (different prefix).
   Real problem: the topbar z-index may be below a covering layer.
*/
#kg-topbar,
.kg-topbar {
  z-index: 100000 !important;
  pointer-events: auto !important;
}
#kg-topbar *,
.kg-topbar * {
  pointer-events: auto !important;
  position: relative;
  z-index: 1;         /* creates stacking context so buttons sit above siblings */
}
#kg-notif-btn,
.kg-tb-notif,
#kg-hamburger-btn,
.kg-hamburger,
#kg-langbtn,
.kg-langbtn,
#kg-search-toggle,
.kg-tb-search-btn {
  pointer-events: auto !important;
  cursor: pointer !important;
  position: relative !important;
  z-index: 100001 !important;
}

/* ── 5. kgc-oag / kgc-oap specific: topbar & all direct children visible ── */
#kgc-oag > *,
#kgc-oap > * {
  display: revert !important;
  pointer-events: auto !important;
  visibility: visible !important;
}
/* Keep overlay hidden until opened */
#kgc-oag > .kgc-sidebar-overlay:not(.open),
#kgc-oap > .kgc-sidebar-overlay:not(.open) {
  display: none !important;
  pointer-events: none !important;
}
#kgc-oag > .kgc-sidebar-overlay.open,
#kgc-oap > .kgc-sidebar-overlay.open {
  display: block !important;
  pointer-events: auto !important;
}

/* ═══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   PATCH v7.5.x-C — Topbar layout, Sidebar position, Z-index fix
   ══════════════════════════════════════════════════════════════ */

/* ── FIX 1: Remove display:revert from oag/oap direct children.
   display:revert on .kgc-topbar turns it block (not flex), which
   stacks .kgc-topbar-left and .kgc-topbar-right vertically,
   putting the + button below the back button.
   Override with correct display values for each child type. ── */

/* kgc-topbar: MUST be flex row */
#kgc-oag > .kgc-topbar,
#kgc-oap > .kgc-topbar {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-shrink: 0 !important;
  pointer-events: auto !important;
  visibility: visible !important;
  width: 100% !important;
}

/* kgc-messages: flex:1 fill, scrollable */
#kgc-oag > .kgc-messages,
#kgc-oap > .kgc-messages {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 0% !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  pointer-events: auto !important;
  visibility: visible !important;
}

/* omx-sugg-row: flex row, shrink */
#kgc-oag > .omx-sugg-row,
#kgc-oap > .omx-sugg-row {
  display: flex !important;
  flex-direction: row !important;
  flex-shrink: 0 !important;
  pointer-events: auto !important;
  visibility: visible !important;
}

/* omx-box input area: flex column, shrink */
#kgc-oag > .omx-box,
#kgc-oap > .omx-box {
  display: flex !important;
  flex-direction: column !important;
  flex-shrink: 0 !important;
  pointer-events: auto !important;
  visibility: visible !important;
  position: relative !important;   /* needed for omx-model-panel absolute position */
}

/* ── FIX 2: Topbar inner layout — left fills, right shrinks ── */
#kgc-oag .kgc-topbar-left,
#kgc-oap .kgc-topbar-left {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  pointer-events: auto !important;
  visibility: visible !important;
}
#kgc-oag .kgc-topbar-right,
#kgc-oap .kgc-topbar-right {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
  pointer-events: auto !important;
  visibility: visible !important;
}

/* All buttons in topbar: inline-flex, not block */
#kgc-oag .kgc-topbar button,
#kgc-oap .kgc-topbar button,
#kgc-oag .kgc-topbar .kgc-btn-icon,
#kgc-oap .kgc-topbar .kgc-btn-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* ── FIX 3: Sidebar — correct top offset so it starts BELOW global header ──
   kgc itself starts at top: var(--kg-topbar-h, 52px).
   kgc-topbar inside kgc is ~52px tall.
   Sidebar position:fixed top:0 = under global kg-topbar AND under kgc-topbar.
   Correct: top = global-topbar-h + kgc-topbar-h ≈ 52+52=104px
   We use CSS variable with 52px fallback for each layer.              ── */

html body .kgc .kgc-sidebar {
  position: fixed !important;
  top: calc(var(--kg-topbar-h, 52px) + 52px) !important;
  left: 0 !important;
  bottom: 0 !important;
  height: auto !important;            /* let top+bottom define height */
  width: min(300px, 85vw) !important;
  transform: translateX(-100%) !important;
  transition: transform 0.25s ease !important;
  pointer-events: auto !important;
  /* Z-index must beat omx-model-panel (2147483630) and attach overlay (2147483640) */
  z-index: 2147483645 !important;
}
html body .kgc .kgc-sidebar.open {
  transform: translateX(0) !important;
}
html body .kgc .kgc-sidebar * {
  pointer-events: auto !important;
  visibility: visible !important;
}

/* Sidebar overlay: full screen but starts below global topbar */
html body .kgc .kgc-sidebar-overlay {
  position: fixed !important;
  top: var(--kg-topbar-h, 52px) !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: auto !important;
  background: rgba(0, 0, 0, 0.65) !important;
  z-index: 2147483644 !important;
  display: none !important;
  pointer-events: none !important;
}
html body .kgc .kgc-sidebar-overlay.open {
  display: block !important;
  pointer-events: auto !important;
}

/* ── FIX 4: Admin bar present — add extra offset ── */
body.admin-bar .kgc .kgc-sidebar {
  top: calc(var(--kg-topbar-h, 52px) + 52px + 32px) !important;
}
@media (max-width: 782px) {
  body.admin-bar .kgc .kgc-sidebar {
    top: calc(var(--kg-topbar-h, 52px) + 52px + 46px) !important;
  }
}

/* ── FIX 5: omx-model-panel & attach-overlay must NOT cover sidebar ──
   When sidebar opens, it must be above model panel & attach overlay.
   Sidebar z-index 2147483645 beats model panel 2147483630 and attach 2147483640.
   Nothing else to do — z-index order is now:
   sidebar(2147483645) > attach(2147483640) > model-panel(2147483630)         ── */

/* Ensure omx-box stays position:relative so model panel pops upward correctly */
.kgc .omx-box {
  position: relative !important;
  z-index: auto !important;           /* no stacking context; children use their own */
}

/* ── FIX 6: kgc-oag/oap sidebar & overlay inherit correct top ── */
#kgc-oag .kgc-sidebar,
#kgc-oap .kgc-sidebar {
  top: calc(var(--kg-topbar-h, 52px) + 52px) !important;
}
#kgc-oag .kgc-sidebar-overlay,
#kgc-oap .kgc-sidebar-overlay {
  top: var(--kg-topbar-h, 52px) !important;
}

/* ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   BUG FIXES v8.0
   Fix 1: Notification dropdown on AI chat pages
   Fix 2: Attach Kundali popup pointer-events
   Fix 4: Model selector visible above suggestions
   Fix 5: User dropdown below header (not cut off above)
   ═══════════════════════════════════════════════════════════════ */

/* AI chat input bar area background in dark mode */
body.kg-dark .jc3-inputbox,
body.kg-dark .jc3-tawrap,
body.kg-dark .jc3-ta,
body.kg-dark .kg-omai-input-area,
body.kg-dark .kg-chat-input-area {
  background: #120903 !important;
  border: 1.5px solid #2D1A10 !important;
  color: #ffffff !important;
}

/* ── Fix 1: Notification dropdown — always above .kgc overlay ──
   The dropdown is now appended to document.body (z-index:2147483647)
   so it beats .kgc (z-index:8000) on AI chat pages.              */
#kg-notif-dropdown {
  z-index: 2147483647 !important;
  pointer-events: auto !important;
  visibility: visible !important;
}
#kg-notif-dropdown * {
  pointer-events: auto !important;
}

/* ── Fix 2: Attach Kundali popup — all children clickable ──────
   When popup is appended to body and shown, no rule should block
   pointer events on its children.                                */
.kg-attach-popup-overlay[style*="flex"] {
  pointer-events: auto !important;
}
.kg-attach-popup-overlay[style*="flex"] * {
  pointer-events: auto !important;
}
.kg-attach-popup {
  pointer-events: auto !important;
}
.kg-attach-popup * {
  pointer-events: auto !important;
}

/* ── Fix 4: Model selector panel — visible above suggestions row ──
   omx-model-panel pops upward (bottom:100%) from omx-box.
   Give omx-box a stacking context (z-index:2) so the model panel
   (z-index:2147483630) can escape and sit above omx-sugg-row.    */
.kgc .omx-box {
  position: relative !important;
  z-index: 2 !important;          /* creates stacking context for omx-model-panel */
  overflow: visible !important;   /* don't clip the upward-opening panel */
}
.kgc .omx-model-panel {
  z-index: 2147483630 !important;
  pointer-events: none;
  overflow: hidden;
}
.kgc .omx-model-panel.omx-panel-open {
  pointer-events: all !important;
  overflow: visible !important;
}
/* sugg-row must be below omx-box stacking context */
.kgc .omx-sugg-row {
  position: relative !important;
  z-index: 1 !important;
}

/* ── Fix 5: User dropdown — always below header, never above ───
   Ensure position:fixed is set so JS-calculated top/right work.
   The inline style top:0 is the default; JS overrides on open.   */
#kg-user-dropdown {
  position: fixed !important;
  z-index: 2147483647 !important;
  pointer-events: auto !important;
}
#kg-user-dropdown * {
  pointer-events: auto !important;
}

/* ═══════════════════════════════════════════════════════════════
   BUG FIXES v8.1 — Nuclear CSS whitelist override
   Ensures #kg-notif-dropdown and #kg-user-dropdown are ALWAYS
   visible when JS shows them, even as body direct children.
   The nuclear CSS rule hides body > *:not(whitelisted) — these
   IDs were missing from the whitelist.
   ═══════════════════════════════════════════════════════════════ */
#kg-notif-dropdown,
#kg-user-dropdown {
  display: none;          /* default: JS controls show/hide */
  position: fixed !important;
  visibility: visible !important;
  height: auto !important;
  max-height: none !important;
  overflow: hidden !important;
  left: auto !important;
  z-index: 2147483647 !important;
  pointer-events: auto !important;
}
/* When JS sets display:block, override any nuclear rule */
#kg-notif-dropdown[style*="block"],
#kg-notif-dropdown[data-open="1"],
#kg-user-dropdown[style*="block"] {
  display: block !important;
  visibility: visible !important;
  height: auto !important;
  max-height: 90vh !important;
  overflow: auto !important;
  left: auto !important;
}
}
/* ═══════════════════════════════════════════════════════════
   LIGHT MODE OVERHAUL — Clean, Airy, 3-Color Palette
   Primary: Saffron (#FF6B00)  Neutral: Warm White/Cream  Accent: Maroon (#7B0D1E)
   All dark backgrounds → light; all heavy shadows → soft
   ═══════════════════════════════════════════════════════════ */

/* ── Root: Light mode base variables ── */
body:not(.kg-dark) {
  --bg:   #FAF8F5 !important;
  --bg2:  #F5F2ED !important;
  --bg3:  #EDE8E0 !important;
  --card:  #FFFFFF !important;
  --card2: #FDFCF9 !important;
  --card3: #F8F5EF !important;
  --text:  #1A0F00 !important;
  --text2: #2E1A00 !important;
  --muted: #7A6040 !important;
  --muted2:#9A8060 !important;
  --border: #E8D8B8 !important;
  --border2:#D4C098 !important;
  --shadow: 0 2px 12px rgba(0,0,0,.07) !important;
  --shadow2: 0 6px 24px rgba(0,0,0,.1) !important;
  --g-card: linear-gradient(145deg, #ffffff, #fdfcf9) !important;
}

/* ── Body background ── */
body:not(.kg-dark) {
  background: #FAF8F5 !important;
  color: #1A0F00 !important;
}

/* ── Nav/topbar — keep dark (intentional brand element) ── */

/* ── Home hero — dark bg is intentional brand element, keep ── */

/* ── Home Welcome Card ── */
body:not(.kg-dark) .kg-welcome-card-container {
  background: linear-gradient(135deg, #FFFFFF 0%, #FFF8EE 60%, #FFF4E0 100%) !important;
  border: 1.5px solid #E8D5A0 !important;
  box-shadow: 0 4px 20px rgba(255,107,0,.08) !important;
}
body:not(.kg-dark) .kg-welcome-title { color: #7B0D1E !important; }
body:not(.kg-dark) .kg-welcome-date {
  background: rgba(255,107,0,.08) !important;
  color: #CC5500 !important;
  border-color: rgba(255,107,0,.2) !important;
}
body:not(.kg-dark) .kg-welcome-subtitle { color: #7A6040 !important; }
body:not(.kg-dark) .kg-welcome-suggestion-box {
  background: rgba(255,248,238,.8) !important;
  border-left-color: #FF8C00 !important;
}
body:not(.kg-dark) .kg-welcome-suggestion-text { color: #3E2000 !important; }
body:not(.kg-dark) .kg-indicator-text { color: #2E7D32 !important; }

/* ── Service boxes ── */
body:not(.kg-dark) .av-service-box {
  background: #FFFFFF !important;
  border-color: #EDE0C8 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.05) !important;
}
body:not(.kg-dark) .av-service-box:hover {
  border-color: rgba(255,107,0,.35) !important;
  box-shadow: 0 6px 20px rgba(255,107,0,.1) !important;
}
body:not(.kg-dark) .av-svc-label { color: #2E1A00 !important; }

/* ── AI Input section ── */
body:not(.kg-dark) .av-ai-input-section {
  background: linear-gradient(160deg, #FFFFFF 0%, #FFF8F0 50%, #FFFAE8 100%) !important;
  border-color: rgba(255,107,0,.15) !important;
}
body:not(.kg-dark) .av-ticker-item {
  background: rgba(255,255,255,.8) !important;
  border-color: rgba(184,134,11,.2) !important;
  color: #7A5F2A !important;
}
body:not(.kg-dark) .av-ticker-item:hover {
  background: rgba(255,107,0,.08) !important;
  color: #FF6B00 !important;
}
body:not(.kg-dark) .av-ticker-wrap::before { background: linear-gradient(90deg, #FFFFFF, transparent) !important; }
body:not(.kg-dark) .av-ticker-wrap::after { background: linear-gradient(-90deg, #FFF8F0, transparent) !important; }
body:not(.kg-dark) .av-ai-input {
  background: #FFFFFF !important;
  border-color: #E8D5A0 !important;
  color: #1A0F00 !important;
}
body:not(.kg-dark) .av-ai-input::placeholder { color: #B8A070 !important; }

/* ── Astrologer cards ── */
body:not(.kg-dark) .av-astrologers-section { background: transparent !important; }
body:not(.kg-dark) .av-astrologer-card {
  background: #FFFFFF !important;
  border-color: #EDE0C8 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.05) !important;
}
body:not(.kg-dark) .av-astrologer-card:hover {
  border-color: rgba(255,107,0,.3) !important;
  box-shadow: 0 6px 16px rgba(255,107,0,.1) !important;
}
body:not(.kg-dark) .av-astro-name { color: #1A0F00 !important; }
body:not(.kg-dark) .av-astro-tag { color: #9A7F4A !important; }
body:not(.kg-dark) .av-astro-online { border-color: #FFFFFF !important; }
body:not(.kg-dark) .av-section-title { color: #7B0D1E !important; }

/* ── Numerology section cards ── */
body:not(.kg-dark) .av-numerology-section {
  background: #FFFFFF !important;
  border-color: #EDE0C8 !important;
}
body:not(.kg-dark) .kg-num-home-card {
  background: #FFFFFF !important;
  border-color: rgba(0,0,0,.08) !important;
  box-shadow: 0 1px 6px rgba(0,0,0,.05) !important;
}
body:not(.kg-dark) .kg-num-home-card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,.1) !important;
  background: linear-gradient(160deg, #FFFFFF 60%, rgba(0,0,0,.02)) !important;
}
body:not(.kg-dark) .kg-nhc-title { color: #1A0F00 !important; }
body:not(.kg-dark) .kg-nhc-sub { color: #7A6040 !important; }

/* ── Form cards ── */
body:not(.kg-dark) .form-card {
  background: #FFFFFF !important;
  border-color: #EDE0C8 !important;
}
body:not(.kg-dark) .form-card label { color: #5A3A10 !important; }
body:not(.kg-dark) input:not([type="checkbox"]):not([type="radio"]),
body:not(.kg-dark) select,
body:not(.kg-dark) textarea {
  background: #FFFFFF !important;
  color: #1A0F00 !important;
  border-color: #D8C898 !important;
}

/* ── Page headers — remove dark gradient ── */
body:not(.kg-dark) .page-header {
  background: linear-gradient(135deg, #7B0D1E, #A01828) !important;
}
body:not(.kg-dark) .page-header-title { color: #FFD700 !important; }
body:not(.kg-dark) .page-header-sub { color: rgba(255,220,150,.85) !important; }

/* ── Home cards ── */
body:not(.kg-dark) .home-card {
  background: #FFFFFF !important;
  border-color: #E8D5A0 !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.06) !important;
}
body:not(.kg-dark) .home-card-title { color: #7B0D1E !important; }
body:not(.kg-dark) .home-card-desc { color: #7A6040 !important; }

/* ── Stat cards / SAV cards ── */
body:not(.kg-dark) .sav-card,
body:not(.kg-dark) .stat-card {
  background: #FFFFFF !important;
  border-color: #EDE0C8 !important;
}

/* ── Result area ── */
body:not(.kg-dark) .rwrap { background: #FFFFFF !important; }
body:not(.kg-dark) .res-head { background: #FDFCF9 !important; }
body:not(.kg-dark) .ctab { color: #7A6040 !important; border-color: #EDE0C8 !important; }
body:not(.kg-dark) .ctab.active { color: #FF6B00 !important; border-color: #FF6B00 !important; }

/* ── Rashi buttons ── */
body:not(.kg-dark) .rashi-btn {
  background: #FFFFFF !important;
  border-color: #EDE0C8 !important;
  color: #2E1A00 !important;
}
body:not(.kg-dark) .rashi-btn.active,
body:not(.kg-dark) .rashi-btn:hover {
  background: rgba(255,107,0,.08) !important;
  border-color: #FF6B00 !important;
  color: #FF6B00 !important;
}

/* ── Trust bar ── */
body:not(.kg-dark) #kg-trust-bar {
  background: linear-gradient(135deg, #F5F0E8, #EDE5D0) !important;
  border-color: rgba(123,13,30,.15) !important;
}
body:not(.kg-dark) #kg-trust-bar > div:first-child { color: #7B0D1E !important; }

/* ═══════════════════════════════════════════════════════════
   DESKTOP: Numerology card hover — replace float with glow pulse
   Remove translateY (icon disappearing off-screen) 
   New: Shine border sweep effect instead
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  /* Kill the translateY float that hides icons */
  .kg-num-home-card:hover { transform: none !important; }
  .kg-num-home-card:hover .kg-nhc-icon { transform: none !important; }

  /* New effect: animated border glow + subtle scale */
  .kg-num-home-card {
    transition: all .3s cubic-bezier(.25,.8,.25,1) !important;
    position: relative;
    overflow: hidden;
  }

  /* Shimmer sweep on hover */
  .kg-num-home-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0; left: 0; right: 0 !important;
    height: 3px !important;
    background: linear-gradient(90deg, transparent, var(--nc, #4A148C), transparent) !important;
    border-radius: 16px 16px 0 0 !important;
    opacity: 0 !important;
    transition: opacity .3s !important;
  }
  .kg-num-home-card:hover::before { opacity: 1 !important; }

  .kg-num-home-card:hover {
    border-color: var(--nc, #4A148C) !important;
    box-shadow: 0 0 0 2px var(--nc, #4A148C), 0 8px 28px rgba(0,0,0,.12) !important;
    background: linear-gradient(160deg, #FFFFFF 60%, rgba(var(--nc-rgb, 74,20,140),.04)) !important;
  }

  /* Icon: soft pulse instead of float */
  .kg-nhc-icon {
    transition: filter .3s !important;
  }
  .kg-num-home-card:hover .kg-nhc-icon {
    filter: drop-shadow(0 0 8px var(--nc, #4A148C)) brightness(1.1) !important;
    transform: none !important;
  }

  /* Service box desktop: ripple effect instead of float */
  .av-service-box:hover .av-svc-icon {
    transform: none !important;
    filter: brightness(1.15) drop-shadow(0 0 6px rgba(255,255,255,.5)) !important;
  }
  .av-service-box {
    transition: all .25s !important;
  }
  .av-service-box:hover {
    transform: scale(1.04) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,.1) !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   LIGHT MODE — KUNDALI RESULTS / ANALYSIS PAGE FIXES
   All dark backgrounds + invisible golden/cream text fixed
   ═══════════════════════════════════════════════════════════ */

/* ── 1. Result Header — was pure black bg with gold text ── */
body:not(.kg-dark) .result-header {
  background: linear-gradient(135deg, #7B0D1E, #A01828) !important;
  border-color: rgba(255,107,0,.2) !important;
}
body:not(.kg-dark) .result-name { color: #FFD700 !important; }
body:not(.kg-dark) .result-meta { color: rgba(255,230,180,.85) !important; }

/* ── 2. Res-head (rwrap header) — subtle warm gradient ── */
body:not(.kg-dark) .res-head {
  background: linear-gradient(135deg, rgba(255,107,0,.07), rgba(184,134,11,.04)) !important;
  border-bottom-color: rgba(255,107,0,.12) !important;
}
body:not(.kg-dark) .res-name { color: #7B0D1E !important; }
body:not(.kg-dark) .res-meta { color: #7A6040 !important; }

/* ── 3. Chart Tabs bar — was rgba(0,0,0,.2) = dark ── */
body:not(.kg-dark) .chart-tabs {
  background: #F5F0E8 !important;
  border-bottom-color: #E8D5A0 !important;
}
/* ctab text — was rgba(255,220,150,.5) = invisible on white */
body:not(.kg-dark) .ctab {
  color: #7A6040 !important;
  background: transparent !important;
  border-color: transparent !important;
}
body:not(.kg-dark) .ctab:hover { color: #CC5500 !important; }
body:not(.kg-dark) .ctab.active {
  color: #FF6B00 !important;
  background: rgba(255,107,0,.08) !important;
  border-color: rgba(255,107,0,.2) !important;
}

/* ── 4. Table headers — was var(--g-deep) = black ── */
body:not(.kg-dark) thead th {
  background: linear-gradient(135deg, #7B0D1E, #A01828) !important;
  color: rgba(255,230,180,.9) !important;
}
body:not(.kg-dark) td { color: #2E1A00 !important; }
body:not(.kg-dark) tr:nth-child(even) td { background: rgba(255,107,0,.02) !important; }
body:not(.kg-dark) tr:hover td { background: rgba(255,107,0,.04) !important; }

/* ── 5. ERE section titles — var(--gold) = #9A6E00 — readable but improve ── */
body:not(.kg-dark) .ere-section-title { color: #7B0D1E !important; }
body:not(.kg-dark) .ere-panel-title { /* gradient text — already fine */ }
body:not(.kg-dark) .ere-text { color: #2E1A00 !important; }
body:not(.kg-dark) .ere-house-block {
  background: #FFF8EE !important;
  border-color: #E8D5A0 !important;
}
body:not(.kg-dark) .ere-house-name { color: #7B0D1E !important; }
body:not(.kg-dark) .ere-house-text { color: #2E1A00 !important; }
body:not(.kg-dark) .ere-dasha-card {
  background: #FFF8EE !important;
  border-color: #E8D5A0 !important;
}
body:not(.kg-dark) .ere-dasha-label { color: #7B0D1E !important; }
body:not(.kg-dark) .ere-dasha-pred { color: #2E1A00 !important; }
body:not(.kg-dark) .ere-dasha-dates { color: #7A6040 !important; }
body:not(.kg-dark) .ere-remedy-item { color: #2E1A00 !important; }
body:not(.kg-dark) .ere-score-label,
body:not(.kg-dark) .ere-score-num { color: #7A6040 !important; }
body:not(.kg-dark) .ere-score-track { background: #EDE0C8 !important; }
body:not(.kg-dark) .ere-timeline-desc { color: #2E1A00 !important; }

/* ── 6. Yoga / Dosha cards ── */
body:not(.kg-dark) .ycard,
body:not(.kg-dark) .dosha-grid > div {
  background: #FFFFFF !important;
  border-color: #E8D5A0 !important;
}
body:not(.kg-dark) .yname { color: #7B0D1E !important; }
body:not(.kg-dark) .ydesc { color: #2E1A00 !important; }

/* ── 7. Planet pills ── */
body:not(.kg-dark) .ppill,
body:not(.kg-dark) #ppills .ppill {
  background: #FFFFFF !important;
  border-color: #E8D5A0 !important;
}
body:not(.kg-dark) .pp-nm,
body:not(.kg-dark) .ppill-name { color: #1A0F00 !important; }
body:not(.kg-dark) .pp-rashi,
body:not(.kg-dark) .ppill-rashi { color: #7A6040 !important; }
body:not(.kg-dark) .pp-deg { color: #5A4020 !important; }
body:not(.kg-dark) .pp-h { color: #CC5500 !important; }

/* ── 8. Ashtakavarga cells ── */
body:not(.kg-dark) .sav-cell {
  background: #FDFCF9 !important;
  border-color: #E8D5A0 !important;
}
body:not(.kg-dark) .sav-num { color: #7B0D1E !important; }
body:not(.kg-dark) .sav-lbl { color: #7A6040 !important; }

/* ── 9. Dasha levels ── */
body:not(.kg-dark) .dl-label { color: #7A6040 !important; }
body:not(.kg-dark) .dl-planet { color: #CC5500 !important; }
body:not(.kg-dark) .dasha-levels > div {
  background: #FFFFFF !important;
  border-color: #E8D5A0 !important;
}
body:not(.kg-dark) .dasha-cur {
  background: linear-gradient(90deg, rgba(255,107,0,.06), rgba(184,134,11,.04)) !important;
}

/* ── 10. Ctrl bar / style buttons ── */
body:not(.kg-dark) .ctrl-bar {
  border-bottom-color: #E8D5A0 !important;
  background: #FDFCF9 !important;
}
body:not(.kg-dark) .style-btn {
  background: #FFFFFF !important;
  border-color: #E8D5A0 !important;
  color: #7A6040 !important;
}
body:not(.kg-dark) .div-btn {
  background: #FFFFFF !important;
  border-color: #E8D5A0 !important;
  color: #7A6040 !important;
}
body:not(.kg-dark) .div-btn.active,
body:not(.kg-dark) .div-btn:hover {
  background: rgba(255,107,0,.08) !important;
  border-color: #FF6B00 !important;
  color: #CC5500 !important;
}

/* ── 11. Result pills / badges ── */
body:not(.kg-dark) .rpill.gold { color: #7B5800 !important; }
body:not(.kg-dark) .rpill.red { color: #B71C1C !important; }

/* ── 12. AI mode buttons (chat area) ── */
body:not(.kg-dark) .ai-mode-btn {
  color: #7A6040 !important;
}
body:not(.kg-dark) .ai-mode-btn:hover:not(.active) { color: #CC5500 !important; }

/* ── 13. Panchang / Gochar page — any dark bg sections ── */
body:not(.kg-dark) .tob-row span { color: #5A4020 !important; }
body:not(.kg-dark) .plbl { color: #7A6040 !important; }

/* ── 14. Matching page — stat labels ── */
body:not(.kg-dark) .stat-lbl { color: #7A6040 !important; }

/* ── 15. General: any remaining rgba(255,220,150) text in light mode ── */
body:not(.kg-dark) [style*="color:rgba(255,220,150"],
body:not(.kg-dark) [style*="color: rgba(255,220,150"] {
  color: #5A4020 !important;
}


/* ═══════════════════════════════════════════════════════════
   GLOBAL LIGHT MODE — FINAL COMPREHENSIVE FIX
   Header icons/text → white | All dark bg sections fixed
   ═══════════════════════════════════════════════════════════ */

/* ── 1. TOPBAR: Logo text & icon → WHITE (not yellow) ── */
body:not(.kg-dark) .kg-logo-text,
body:not(.kg-dark) .kg-topbar-logo-wrap .kg-logo-text {
  color: #ffffff !important;
  text-shadow: 0 1px 6px rgba(0,0,0,.3) !important;
}
body:not(.kg-dark) .kg-logo-icon,
body:not(.kg-dark) .kg-topbar-logo-wrap .kg-logo-icon {
  color: #ffffff !important;
  filter: drop-shadow(0 0 6px rgba(255,255,255,.4)) !important;
}
body:not(.kg-dark) .kg-topbar-center { color: rgba(255,255,255,.95) !important; }
body:not(.kg-dark) .kg-tb-btn {
  color: #ffffff !important;
  background: rgba(255,255,255,.15) !important;
  border-color: rgba(255,255,255,.25) !important;
}
body:not(.kg-dark) .kg-tb-btn:hover { background: rgba(255,255,255,.28) !important; }
body:not(.kg-dark) .kg-tb-btn i { color: #ffffff !important; }
body:not(.kg-dark) .kg-ham-line { background: #ffffff !important; }
body:not(.kg-dark) .kg-hamburger {
  background: rgba(255,255,255,.15) !important;
  border-color: rgba(255,255,255,.3) !important;
}
body:not(.kg-dark) .kg-hamburger:hover { background: rgba(255,255,255,.28) !important; }

/* Notif badge, user-btn, search icons in topbar → white */
body:not(.kg-dark) #kg-notif-btn,
body:not(.kg-dark) #kg-search-toggle,
body:not(.kg-dark) .kg-topbar .kg-tb-btn,
body:not(.kg-dark) #kg-topbar .kg-tb-btn {
  color: #ffffff !important;
}
body:not(.kg-dark) .kg-tb-notif-badge,
body:not(.kg-dark) #kg-notif-count {
  background: #FF3B30 !important;
  color: #fff !important;
}

/* ── 2. PAGE HEADERS (all inner pages) — keep dark bg, fix sub text ── */
body:not(.kg-dark) .page-header {
  background: linear-gradient(135deg, #7B0D1E, #A01828) !important;
  border-color: rgba(255,107,0,.2) !important;
}
body:not(.kg-dark) .page-header-title {
  background: linear-gradient(135deg, #FFD700, #FF8C00) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
body:not(.kg-dark) .page-header-sub { color: rgba(255,220,180,.85) !important; }
body:not(.kg-dark) .page-header-icon { color: #ffffff !important; }

/* ── 3. HOME HERO — dark bg intentional, fix text inside ── */
body:not(.kg-dark) .hero-sub { color: rgba(255,220,180,.9) !important; }
body:not(.kg-dark) .hero-tagline { color: rgba(255,220,180,.65) !important; }

/* ── 4. APP-HEADER (old-style header) → keep dark, white icons ── */
body:not(.kg-dark) .header-icon-btn {
  color: #ffffff !important;
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.2) !important;
}
body:not(.kg-dark) .header-icon-btn:hover {
  background: rgba(255,255,255,.22) !important;
  color: #ffffff !important;
}

/* ── 5. AI MODE SWITCHER (dark bg panel) ── */
body:not(.kg-dark) .ai-mode-switcher,
body:not(.kg-dark) .ai-modes-bar {
  background: #F5F0E8 !important;
  border-color: #E8D5A0 !important;
}
body:not(.kg-dark) .ai-mode-btn {
  color: #7A6040 !important;
  background: transparent !important;
}
body:not(.kg-dark) .ai-mode-btn.active {
  background: rgba(255,107,0,.1) !important;
  color: #CC5500 !important;
}
body:not(.kg-dark) .ai-mode-btn:hover:not(.active) { color: #CC5500 !important; }

/* ── 6. AI GENERAL PANEL (dark bg with cream text) ── */
body:not(.kg-dark) .ai-general-panel {
  background: #FDFCF9 !important;
  border-color: #E8D5A0 !important;
}
body:not(.kg-dark) .ai-gen-desc { color: #7A6040 !important; }
body:not(.kg-dark) .ai-gen-chip {
  background: rgba(255,107,0,.06) !important;
  border-color: rgba(255,107,0,.18) !important;
  color: #CC5500 !important;
}
body:not(.kg-dark) .ai-gen-chip:hover {
  background: rgba(255,107,0,.12) !important;
  color: #FF6B00 !important;
}

/* ── 7. HOME CARD FEATURED (dark gradient card) ── */
body:not(.kg-dark) .home-card.featured {
  background: linear-gradient(135deg, #7B0D1E, #A01828) !important;
  border-color: rgba(255,215,0,.3) !important;
}
/* home-card.featured text already has color:var(--gold3) — fine on dark bg */

/* ── 8. OLD NAV TABS (ntab) — on dark nav bg, text should be light ── */
/* .nav has dark bg — ntab color rgba(255,220,150) is fine there, no fix needed */

/* ── 9. MATCHING RESULT — kuta/ashtakoota table heads ── */
body:not(.kg-dark) .match-kuta-table thead th,
body:not(.kg-dark) .kuta-head,
body:not(.kg-dark) .ashtakoota-head {
  background: linear-gradient(135deg, #7B0D1E, #A01828) !important;
  color: rgba(255,220,180,.9) !important;
}

/* ── 10. PANCHANG sections — any remaining dark panels ── */
body:not(.kg-dark) .panchang-card,
body:not(.kg-dark) .tcard {
  background: #FFFFFF !important;
  border-color: #E8D5A0 !important;
  color: #1A0F00 !important;
}
body:not(.kg-dark) .tcard-head {
  background: linear-gradient(135deg, #7B0D1E, #A01828) !important;
  color: #fff !important;
}

/* ── 11. GOCHAR / TRANSIT page ── */
body:not(.kg-dark) .gochar-planet-row,
body:not(.kg-dark) .transit-row {
  background: #FDFCF9 !important;
  border-color: #E8D5A0 !important;
  color: #1A0F00 !important;
}

/* ── 12. BOTTOM NAV — already light bg, ensure correct ── */
body:not(.kg-dark) .kg-bottomnav {
  background: #FFFFFF !important;
  border-top-color: #E8D5A0 !important;
}
body:not(.kg-dark) .kg-bnav-item { color: #9A7F4A !important; }
body:not(.kg-dark) .kg-bnav-item.active,
body:not(.kg-dark) .kg-bnav-item.active i { color: #FF6B00 !important; }

/* ── 13. SIDEBAR ── */
body:not(.kg-dark) .kg-sidebar-drawer,
body:not(.kg-dark) .kg-sidebar-nav {
  background: #FFFFFF !important;
  border-color: #E8D5A0 !important;
}
body:not(.kg-dark) .kg-sb-item { color: #2E1A00 !important; }
body:not(.kg-dark) .kg-sb-item:hover { background: rgba(255,107,0,.06) !important; }
body:not(.kg-dark) .kg-sb-item-label { color: #2E1A00 !important; }
body:not(.kg-dark) .kg-sb-section-label { color: #7A6040 !important; }
body:not(.kg-dark) .kg-sb-divider { background: #E8D5A0 !important; }
body:not(.kg-dark) .kg-sb-subitem { color: #5A4020 !important; }

/* ── 14. SEARCH BAR ── */
body:not(.kg-dark) .kg-search-bar-wrap { background: #FAF8F5 !important; }
body:not(.kg-dark) .kg-search-inner {
  background: #FFFFFF !important;
  border-color: #E8D5A0 !important;
}
body:not(.kg-dark) .kg-search-input { color: #1A0F00 !important; }
body:not(.kg-dark) .kg-search-icon { color: #7A6040 !important; }

/* ── 15. LIQUID NAV (v6 bottom nav) — dark bg intentional ── */
/* liquid-nav has dark bg — items already colored per saffron — no fix needed */

/* ── 16. SETTINGS PANEL ── */
body:not(.kg-dark) .kg-settings-panel,
body:not(.kg-dark) .settings-section {
  background: #FFFFFF !important;
  border-color: #E8D5A0 !important;
  color: #1A0F00 !important;
}

/* ── 17. Tooltips / toasts in light mode ── */
body:not(.kg-dark) .toast {
  background: #2E1A00 !important;
  color: #fff !important;
}

/* ── 18. Wallet / coin display in topbar ── */
body:not(.kg-dark) #kg-coins-display,
body:not(.kg-dark) .kg-coin-wrap {
  background: rgba(255,255,255,.15) !important;
  border-color: rgba(255,255,255,.25) !important;
  color: #ffffff !important;
}



/* ═══════════════════════════════════════════════════════════
   PREMIUM APP-LIKE DESIGN & GLASSMORPHISM OVERLAYS (v3.1)
   ═══════════════════════════════════════════════════════════ */

/* Font & Spacing updates */
:root {
  --app-radius: 18px;
  --app-shadow-light: 0 8px 30px rgba(139, 69, 19, 0.06);
  --app-shadow-dark: 0 8px 30px rgba(0, 0, 0, 0.35);
  --glass-bg-light: rgba(255, 255, 255, 0.75);
  --glass-bg-dark: rgba(18, 9, 3, 0.75);
  --glass-border-light: rgba(184, 138, 0, 0.18);
  --glass-border-dark: rgba(255, 107, 0, 0.22);
}

/* Light mode overrides */
body:not(.kg-dark) .kf-section, 
body:not(.kg-dark) .tcard, 
body:not(.kg-dark) .ccard,
body:not(.kg-dark) .kg-rem-panel {
  background: var(--glass-bg-light) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid var(--glass-border-light) !important;
  box-shadow: var(--app-shadow-light) !important;
  border-radius: var(--app-radius) !important;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease, border-color 0.25s ease !important;
}

body:not(.kg-dark) .kf-section:hover, 
body:not(.kg-dark) .tcard:hover, 
body:not(.kg-dark) .ccard:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 38px rgba(139, 69, 19, 0.12) !important;
  border-color: rgba(255, 107, 0, 0.35) !important;
}

/* Dark mode overrides */
body.kg-dark .kf-section, 
body.kg-dark .tcard, 
body.kg-dark .ccard,
body.kg-dark .kg-rem-panel {
  background: var(--glass-bg-dark) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid var(--glass-border-dark) !important;
  box-shadow: var(--app-shadow-dark) !important;
  border-radius: var(--app-radius) !important;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease, border-color 0.25s ease !important;
}

body.kg-dark .kf-section:hover, 
body.kg-dark .tcard:hover, 
body.kg-dark .ccard:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 38px rgba(0, 0, 0, 0.5) !important;
  border-color: rgba(255, 107, 0, 0.45) !important;
}

/* Premium Inputs */
.kf-input, .knum-name-inp {
  border-radius: 12px !important;
  padding: 12px 16px !important;
  font-weight: 500 !important;
  transition: all 0.25s ease !important;
}
body:not(.kg-dark) .kf-input, body:not(.kg-dark) .knum-name-inp {
  background: rgba(255, 255, 255, 0.8) !important;
  border: 1.5px solid rgba(184, 138, 0, 0.25) !important;
  color: #2E1200 !important;
}
body.kg-dark .kf-input, body.kg-dark .knum-name-inp {
  background: rgba(30, 15, 5, 0.6) !important;
  border: 1.5px solid rgba(255, 107, 0, 0.25) !important;
  color: #fff !important;
}
.kf-input:focus, .knum-name-inp:focus {
  border-color: var(--saffron, #FF6B00) !important;
  box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.18) !important;
}

/* Premium Navigation Pill Tabs */
.ctab, .knum-tab, .kg-rem-stab {
  padding: 10px 18px !important;
  font-weight: 700 !important;
  font-size: 0.82rem !important;
  border-radius: 24px !important;
  border: 1px solid transparent !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  margin: 2px !important;
}
body:not(.kg-dark) .ctab, body:not(.kg-dark) .knum-tab {
  background: rgba(255, 107, 0, 0.04) !important;
  color: #7A5030 !important;
}
body.kg-dark .ctab, body.kg-dark .knum-tab {
  background: rgba(255, 107, 0, 0.08) !important;
  color: rgba(255, 220, 180, 0.8) !important;
}

/* Active tabs get a premium saffron-gold gradient */
.ctab.active, .knum-tab.act, .kg-rem-stab.active {
  background: linear-gradient(135deg, #FF6B00, #FF8C00) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(255, 107, 0, 0.4) !important;
  transform: scale(1.03) !important;
}

/* Hover effect on tab pills */
.ctab:hover:not(.active), .knum-tab:hover:not(.act), .kg-rem-stab:hover:not(.active) {
  background: rgba(255, 107, 0, 0.12) !important;
  color: var(--saffron) !important;
  transform: translateY(-1px) !important;
}

/* Grid & Layout Alignments */
.kf-section-label {
  font-size: 0.76rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
}
.kf-step-dot {
  font-size: 0.72rem !important;
  width: 22px !important;
  height: 22px !important;
}

/* Smooth layout transitions */
.tpanel {
  animation: kgFadeInUp 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) both;
}
@keyframes kgFadeInUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* App Header Hero Area styling */
.kf-hero {
  border-radius: 0 0 28px 28px !important;
  padding: 24px 20px 20px !important;
  background: linear-gradient(135deg, #1f0b02, #3d1400) !important;
  box-shadow: 0 8px 32px rgba(27, 9, 0, 0.35) !important;
}

/* Modern, Beautiful Custom Scrollbars inside panels */
.kg-app ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.kg-app ::-webkit-scrollbar-track {
  background: transparent;
}
.kg-app ::-webkit-scrollbar-thumb {
  background: rgba(255, 107, 0, 0.25);
  border-radius: 10px;
}
.kg-app ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 107, 0, 0.45);
}

/* Gender pills enhancement */
.kf-pill {
  padding: 10px 16px !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
  transition: all 0.2s ease !important;
}
body:not(.kg-dark) .kf-pill {
  background: rgba(255, 255, 255, 0.7) !important;
  border: 1px solid var(--border) !important;
}
body:not(.kg-dark) .kf-pill.active {
  background: linear-gradient(135deg, #FF6B00, #FF8C00) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(255, 107, 0, 0.2) !important;
}
body.kg-dark .kf-pill {
  background: rgba(20, 10, 5, 0.5) !important;
  border: 1px solid rgba(255, 107, 0, 0.2) !important;
  color: #ccc !important;
}
body.kg-dark .kf-pill.active {
  background: linear-gradient(135deg, #FF6B00, #FF8C00) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(255, 107, 0, 0.3) !important;
}


/* ═══════════════════════════════════════════════════════════
   PREMIUM REDESIGNED SPA NAVIGATION, GRID MENU & DARK MODE (v3.1)
   ═══════════════════════════════════════════════════════════ */

/* ── 1. App-Style Results Menu Grid ── */
#kg-results-menu-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 20px !important;
  padding: 20px 0 !important;
  margin: 15px 0 !important;
  animation: kgFadeInUp 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) both !important;
}

.kg-results-menu-card {
  border-radius: var(--app-radius, 18px) !important;
  padding: 22px 20px !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 16px !important;
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  position: relative !important;
  overflow: hidden !important;
  text-decoration: none !important;
}

/* Light mode card aesthetics */
body:not(.kg-dark) .kg-results-menu-card {
  background: rgba(255, 255, 255, 0.8) !important;
  border: 1.5px solid rgba(184, 138, 0, 0.15) !important;
  box-shadow: 0 4px 20px rgba(139, 69, 19, 0.04) !important;
}

body:not(.kg-dark) .kg-results-menu-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(255, 107, 0, 0.35) !important;
  box-shadow: 0 10px 30px rgba(255, 107, 0, 0.08) !important;
  background: rgba(255, 255, 255, 0.98) !important;
}

/* Dark mode card aesthetics */
body.kg-dark .kg-results-menu-card {
  background: rgba(30, 16, 8, 0.45) !important;
  border: 1.5px solid rgba(255, 107, 0, 0.15) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25) !important;
}

body.kg-dark .kg-results-menu-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(255, 107, 0, 0.45) !important;
  box-shadow: 0 10px 30px rgba(255, 107, 0, 0.18) !important;
  background: rgba(45, 25, 12, 0.6) !important;
}

/* Card icon wrap */
.kg-results-menu-card .card-icon-wrap {
  width: 48px !important;
  height: 48px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.4rem !important;
  flex-shrink: 0 !important;
  transition: all 0.3s ease !important;
  background: linear-gradient(135deg, rgba(255, 107, 0, 0.12), rgba(255, 140, 0, 0.06)) !important;
  color: #FF6B00 !important;
  border: 1px solid rgba(255, 107, 0, 0.18) !important;
}

.kg-results-menu-card:hover .card-icon-wrap {
  transform: scale(1.08) rotate(5deg) !important;
  background: linear-gradient(135deg, #FF6B00, #FF8C00) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(255, 107, 0, 0.3) !important;
}

.kg-results-menu-card .card-details {
  flex-grow: 1 !important;
}

.kg-results-menu-card .card-title {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  margin: 0 0 5px 0 !important;
  transition: color 0.2s ease !important;
}

body:not(.kg-dark) .kg-results-menu-card .card-title {
  color: #2E1200 !important;
}
body:not(.kg-dark) .kg-results-menu-card:hover .card-title {
  color: #FF6B00 !important;
}

body.kg-dark .kg-results-menu-card .card-title {
  color: rgba(255, 220, 180, 0.95) !important;
}
body.kg-dark .kg-results-menu-card:hover .card-title {
  color: #FF8C00 !important;
}

.kg-results-menu-card .card-desc {
  font-size: 0.8rem !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}

body:not(.kg-dark) .kg-results-menu-card .card-desc {
  color: #7A5F45 !important;
}
body.kg-dark .kg-results-menu-card .card-desc {
  color: rgba(255, 220, 180, 0.6) !important;
}

/* ── 2. Premium Back Bar ── */
#kg-results-back-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 20px !important;
  margin-bottom: 20px !important;
  border-radius: 14px !important;
  backdrop-filter: blur(12px) !important;
  transition: all 0.3s ease !important;
}

body:not(.kg-dark) #kg-results-back-bar {
  background: rgba(255, 255, 255, 0.7) !important;
  border: 1.5px solid rgba(184, 138, 0, 0.15) !important;
  box-shadow: 0 4px 15px rgba(139, 69, 19, 0.03) !important;
}

body.kg-dark #kg-results-back-bar {
  background: rgba(22, 11, 4, 0.7) !important;
  border: 1.5px solid rgba(255, 107, 0, 0.2) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
}

.kg-results-back-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: linear-gradient(135deg, #FF6B00, #FF8C00) !important;
  color: #ffffff !important;
  border: none !important;
  padding: 8px 16px !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  border-radius: 20px !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  box-shadow: 0 3px 10px rgba(255, 107, 0, 0.25) !important;
}

.kg-results-back-btn:hover {
  transform: translateX(-3px) !important;
  box-shadow: 0 5px 15px rgba(255, 107, 0, 0.38) !important;
}

.kg-results-back-title {
  font-size: 1rem !important;
  font-weight: 800 !important;
  margin: 0 !important;
}

body:not(.kg-dark) .kg-results-back-title {
  color: #7B0D1E !important;
}
body.kg-dark .kg-results-back-title {
  color: #FF8C00 !important;
}

/* ── 3. Header Search Bar & Frosted Glass dropdown ── */
body:not(.kg-dark) .kg-search-inner {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(16px) !important;
  border: 1.5px solid rgba(184, 138, 0, 0.22) !important;
  box-shadow: 0 10px 40px rgba(139, 69, 19, 0.12) !important;
}

body.kg-dark .kg-search-inner {
  background: rgba(18, 9, 3, 0.85) !important;
  backdrop-filter: blur(16px) !important;
  border: 1.5px solid rgba(255, 107, 0, 0.25) !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
}

.kg-search-inner:focus-within {
  border-color: #FF6B00 !important;
  box-shadow: 0 4px 20px rgba(255, 107, 0, 0.22), 0 10px 40px rgba(0, 0, 0, 0.35) !important;
}

/* ── 4. Dark Mode Contrast Fixes ── */
body.kg-dark [style*="#1565C0"], 
body.kg-dark [style*="color:#1565C0"] {
  color: #64B5F6 !important;
}

body.kg-dark [style*="border-color:#1565C0"] {
  border-color: #64B5F6 !important;
}

body.kg-dark .bnn-card {
  background: rgba(30, 15, 5, 0.5) !important;
  border: 1.5px solid rgba(255, 107, 0, 0.2) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25) !important;
  color: rgba(255, 220, 180, 0.85) !important;
}

/* AI chat input bar area background in dark mode */
body.kg-dark .jc3-inputbox,
body.kg-dark .jc3-tawrap,
body.kg-dark .jc3-ta,
body.kg-dark .kg-omai-input-area,
body.kg-dark .kg-chat-input-area {
  background: #120903 !important;
  border: 1.5px solid #2D1A10 !important;
  color: #ffffff !important;
}

body.kg-dark .jc3-inputbox::placeholder,
body.kg-dark .kg-omai-input-area::placeholder {
  color: rgba(255, 220, 180, 0.4) !important;
}

/* Header icon orange color consistency in dark mode */
body.kg-dark #kg-notif-btn i,
body.kg-dark #kg-search-toggle i,
body.kg-dark .kg-topbar .kg-tb-btn i,
body.kg-dark #kg-topbar .kg-tb-btn i {
  color: #FF6B00 !important;
}

body.kg-dark .kg-hamburger .kg-ham-line {
  background: #FF6B00 !important;
}

/* ── Main Tab Scroll Pill Bar Styling ── */
.kg-main-tabs-scroll-wrapper {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.05);
  border-bottom: 1.5px solid rgba(184, 138, 0, 0.15);
  white-space: nowrap;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
}
.kg-main-tabs-scroll-wrapper::-webkit-scrollbar {
  display: none; /* WebKit */
}

.kg-main-tabs-pill-bar {
  display: flex;
  gap: 8px;
  align-items: center;
}

.kg-results-tab-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.8) !important;
  border: 1.5px solid rgba(184, 138, 0, 0.22) !important;
  border-radius: 20px !important;
  color: var(--text2, #2E1200) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.82rem !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  white-space: nowrap !important;
}

.kg-results-tab-pill i {
  font-size: 0.9rem !important;
  transition: transform 0.25s ease !important;
}

.kg-results-tab-pill:hover {
  background: rgba(255, 107, 0, 0.06) !important;
  border-color: rgba(255, 107, 0, 0.4) !important;
  transform: translateY(-1px) !important;
}

.kg-results-tab-pill.active {
  background: linear-gradient(135deg, #FF6B00, #FF8C00) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(255, 107, 0, 0.3) !important;
}

.kg-results-tab-pill.active i {
  color: #ffffff !important;
  transform: scale(1.15) !important;
}

/* Dark Mode Overrides for Scrolling Pills */
body.kg-dark .kg-main-tabs-scroll-wrapper {
  background: rgba(0, 0, 0, 0.2) !important;
  border-bottom-color: rgba(255, 107, 0, 0.15) !important;
}
body.kg-dark .kg-results-tab-pill {
  background: rgba(30, 15, 5, 0.6) !important;
  border-color: rgba(255, 107, 0, 0.2) !important;
  color: rgba(255, 220, 180, 0.85) !important;
}
body.kg-dark .kg-results-tab-pill:hover {
  background: rgba(255, 107, 0, 0.15) !important;
  border-color: rgba(255, 107, 0, 0.5) !important;
}
body.kg-dark .kg-results-tab-pill.active {
  background: linear-gradient(135deg, #FF6B00, #FF8C00) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(255, 107, 0, 0.4) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   FLUTTER-STYLE KUNDALI RESULTS MENU GRID
   ═══════════════════════════════════════════════════════════════════════ */

/* Menu grid — 2-column card list */
.kg-rmenu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 14px;
}

/* Each menu card */
.kg-rmenu-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card, #fff);
  border: 1.5px solid rgba(255, 107, 0, 0.15);
  border-radius: 14px;
  padding: 14px 12px;
  cursor: pointer;
  text-align: left;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.kg-rmenu-card:hover,
.kg-rmenu-card:active {
  background: rgba(255, 107, 0, 0.06);
  border-color: rgba(255, 107, 0, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 107, 0, 0.12);
}

.kg-rmenu-card:active {
  transform: scale(0.97);
  box-shadow: none;
}

/* Icon circle */
.kg-rmenu-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 12px;
  background: rgba(255, 107, 0, 0.08);
  font-size: 1.1rem;
  transition: transform 0.2s;
}

.kg-rmenu-card:hover .kg-rmenu-icon {
  transform: scale(1.1);
}

/* Label */
.kg-rmenu-label {
  flex: 1;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text, #1A0A00);
  line-height: 1.3;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

/* Arrow chevron */
.kg-rmenu-arrow {
  font-size: 0.65rem;
  color: rgba(255, 107, 0, 0.5);
  transition: transform 0.2s;
}

.kg-rmenu-card:hover .kg-rmenu-arrow {
  transform: translateX(3px);
  color: #FF6B00;
}

/* ═══════════════════════════════════════════════════════════════════════
   BACK BAR — Flutter-style back navigation
   ═══════════════════════════════════════════════════════════════════════ */

.kg-rback-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--card, #fff);
  border-bottom: 1.5px solid rgba(255, 107, 0, 0.12);
  padding: 8px 12px 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.kg-rback-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 4px 8px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #FF6B00;
  font-family: 'Plus Jakarta Sans', sans-serif;
  letter-spacing: 0.02em;
  transition: opacity 0.15s;
}

.kg-rback-btn:hover { opacity: 0.75; }
.kg-rback-btn i { font-size: 0.85rem; }

/* Pill scroller inside back bar */
.kg-rback-pills {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 8px;
}
.kg-rback-pills::-webkit-scrollbar { display: none; }

.kg-rback-pills .kg-main-tabs-pill-bar {
  display: flex;
  gap: 6px;
  min-width: max-content;
}

/* ═══════════════════════════════════════════════════════════════════════
   DARK MODE — Flutter menu grid
   ═══════════════════════════════════════════════════════════════════════ */

body.kg-dark .kg-rmenu-card {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,107,0,0.18) !important;
}
body.kg-dark .kg-rmenu-card:hover {
  background: rgba(255,107,0,0.1) !important;
  border-color: rgba(255,107,0,0.45) !important;
}
body.kg-dark .kg-rmenu-icon {
  background: rgba(255,107,0,0.12) !important;
}
body.kg-dark .kg-rmenu-label {
  color: rgba(255,220,180,0.9) !important;
}
body.kg-dark .kg-rmenu-arrow {
  color: rgba(255,107,0,0.4) !important;
}
body.kg-dark .kg-rback-bar {
  background: #0D0907 !important;
  border-bottom-color: rgba(255,107,0,0.15) !important;
}
body.kg-dark .kg-rback-btn {
  color: #FF8C00 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   DARK MODE — Fix av-ai-input-section white background
   ═══════════════════════════════════════════════════════════════════════ */

body.kg-dark .av-ai-input-section {
  background: #000000 !important;
  border-color: rgba(255, 107, 0, 0.2) !important;
}
body.kg-dark .av-ticker-wrap {
  border-bottom-color: rgba(255,107,0,0.1) !important;
}
body.kg-dark .av-ticker-item {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(184,134,11,0.18) !important;
  color: rgba(255, 220, 160, 0.75) !important;
}
body.kg-dark .av-ticker-item:hover {
  background: rgba(255,107,0,0.1) !important;
  color: #FF8C00 !important;
}
body.kg-dark .av-ticker-wrap::before {
  background: linear-gradient(90deg, #0D0907, transparent) !important;
}
body.kg-dark .av-ticker-wrap::after {
  background: linear-gradient(-90deg, #160C04, transparent) !important;
}
body.kg-dark .av-ai-input {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,107,0,0.25) !important;
  color: rgba(255,220,160,0.9) !important;
}
body.kg-dark .av-ai-input::placeholder {
  color: rgba(255,180,80,0.4) !important;
}
body.kg-dark .av-ai-send-btn {
  background: linear-gradient(135deg, #FF6B00, #FF8C00) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   DARK MODE — Fix Lagna Chart Accordion (kf-adv-body) text visibility
   ═══════════════════════════════════════════════════════════════════════ */

/* Accordion container in dark mode */
body.kg-dark .kf-advanced {
  background: rgba(255,255,255,0.03) !important;
}
/* All text inside the advanced/accordion body */
body.kg-dark .kf-adv-body,
body.kg-dark .kf-adv-body label,
body.kg-dark .kf-adv-body .kf-label,
body.kg-dark .kf-advanced-toggle {
  color: rgba(255, 220, 160, 0.85) !important;
}
/* Inputs inside accordion */
body.kg-dark .kf-adv-body .kf-input,
body.kg-dark .kf-adv-body input,
body.kg-dark .kf-adv-body select {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 107, 0, 0.3) !important;
  color: rgba(255, 220, 160, 0.9) !important;
}
body.kg-dark .kf-adv-body .kf-input::placeholder,
body.kg-dark .kf-adv-body input::placeholder {
  color: rgba(255, 160, 80, 0.4) !important;
}
/* Row labels */
body.kg-dark .kf-adv-body .kf-field-small label {
  color: rgba(255, 200, 120, 0.7) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   FIX v8.1 — av-ai-input-section DARK MODE FORCED OVERRIDE
   Problem: base CSS uses hardcoded gradient background: linear-gradient(160deg,#FFFFFF…)
   Solution: maximum specificity override using html body selector chain
   ═══════════════════════════════════════════════════════════════════════ */

html body.kg-dark .av-ai-input-section,
html body.kg-dark div.av-ai-input-section {
  background: #000000 !important;
  background-image: none !important;
  border-color: rgba(255, 107, 0, 0.2) !important;
}
html body.kg-dark .av-ticker-wrap::before {
  background: linear-gradient(90deg, #000000, transparent) !important;
}
html body.kg-dark .av-ticker-wrap::after {
  background: linear-gradient(-90deg, #000000, transparent) !important;
}
html body.kg-dark .av-ai-input {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 107, 0, 0.25) !important;
  color: rgba(255, 220, 160, 0.9) !important;
}
html body.kg-dark .av-ai-input::placeholder {
  color: rgba(255, 150, 80, 0.45) !important;
}
html body.kg-dark .av-ai-send-btn {
  background: linear-gradient(135deg, #FF6B00, #E65100) !important;
  color: #ffffff !important;
}
html body.kg-dark .av-ticker-item {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(184, 134, 11, 0.18) !important;
  color: rgba(255, 220, 160, 0.75) !important;
}
html body.kg-dark .av-ticker-item:hover {
  background: rgba(255, 107, 0, 0.1) !important;
  color: #FF8C00 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   FIX v8.1 — ACCORDION / ERE-SECTION COMPREHENSIVE DARK MODE
   Problem: .ere-section accordion content is white in dark mode
   Solution: target both the container and all inner elements
   ═══════════════════════════════════════════════════════════════════════ */

/* Accordion toggle button / header */
html body.kg-dark .ere-section-toggle,
html body.kg-dark .ere-acc-toggle,
html body.kg-dark [class*="ere-"][class*="toggle"],
html body.kg-dark [class*="acc-"][class*="toggle"] {
  background: #1a0a00 !important;
  color: #FFD700 !important;
  border-color: rgba(255, 107, 0, 0.2) !important;
}
html body.kg-dark .ere-section-toggle:hover,
html body.kg-dark .ere-acc-toggle:hover {
  background: rgba(255, 107, 0, 0.1) !important;
}

/* Accordion body / content area */
html body.kg-dark .ere-section,
html body.kg-dark .ere-panel {
  background: #111111 !important;
  border-color: rgba(255, 107, 0, 0.12) !important;
  color: #ffffff !important;
}
html body.kg-dark .ere-section-title,
html body.kg-dark .ere-panel-title {
  color: #FFD700 !important;
  background: transparent !important;
}
html body.kg-dark .ere-section *,
html body.kg-dark .ere-panel * {
  color: inherit;
}
/* Force all immediate child text-bearing elements in ere-section to white */
html body.kg-dark .ere-section p,
html body.kg-dark .ere-section div,
html body.kg-dark .ere-section span,
html body.kg-dark .ere-section li,
html body.kg-dark .ere-panel p,
html body.kg-dark .ere-panel div,
html body.kg-dark .ere-panel span,
html body.kg-dark .ere-panel li {
  color: #ffffff !important;
  background-color: transparent !important;
}
/* Headings inside ere sections stay gold */
html body.kg-dark .ere-section h1,
html body.kg-dark .ere-section h2,
html body.kg-dark .ere-section h3,
html body.kg-dark .ere-section h4,
html body.kg-dark .ere-section h5,
html body.kg-dark .ere-panel h1,
html body.kg-dark .ere-panel h2,
html body.kg-dark .ere-panel h3,
html body.kg-dark .ere-panel h4,
html body.kg-dark .ere-panel h5 {
  color: #FFD700 !important;
  background-color: transparent !important;
}
/* Tables inside accordions */
html body.kg-dark .ere-section table,
html body.kg-dark .ere-panel table {
  color: #ffffff !important;
  background: transparent !important;
}
html body.kg-dark .ere-section th,
html body.kg-dark .ere-panel th {
  background: #261200 !important;
  color: #FFD700 !important;
  border-color: rgba(255, 107, 0, 0.15) !important;
}
html body.kg-dark .ere-section td,
html body.kg-dark .ere-panel td {
  color: #ffffff !important;
  border-color: rgba(255, 107, 0, 0.08) !important;
  background-color: transparent !important;
}
/* Inline styles with white/light backgrounds inside ere sections */
html body.kg-dark .ere-section [style*="background:#fff"],
html body.kg-dark .ere-section [style*="background: #fff"],
html body.kg-dark .ere-section [style*="background:white"],
html body.kg-dark .ere-section [style*="background: white"],
html body.kg-dark .ere-section [style*="background:#FFFFFF"],
html body.kg-dark .ere-section [style*="background: #FFFFFF"],
html body.kg-dark .ere-section [style*="background:#FFF"],
html body.kg-dark .ere-panel [style*="background:#fff"],
html body.kg-dark .ere-panel [style*="background: #fff"],
html body.kg-dark .ere-panel [style*="background:white"],
html body.kg-dark .ere-panel [style*="background: white"],
html body.kg-dark .ere-panel [style*="background:#FFFFFF"],
html body.kg-dark .ere-panel [style*="background: #FFFFFF"] {
  background: #111111 !important;
  color: #ffffff !important;
}
html body.kg-dark .ere-section [style*="color:#000"],
html body.kg-dark .ere-section [style*="color: #000"],
html body.kg-dark .ere-section [style*="color:#333"],
html body.kg-dark .ere-section [style*="color:#1a1a1a"],
html body.kg-dark .ere-panel [style*="color:#000"],
html body.kg-dark .ere-panel [style*="color: #000"],
html body.kg-dark .ere-panel [style*="color:#333"],
html body.kg-dark .ere-panel [style*="color:#1a1a1a"] {
  color: #ffffff !important;
}
/* ere-text (muted body text) */
html body.kg-dark .ere-text {
  color: #D4C4A0 !important;
}
/* ere-remedy-item blocks */
html body.kg-dark .ere-remedy-item {
  background: rgba(255, 107, 0, 0.06) !important;
  border-color: rgba(255, 107, 0, 0.15) !important;
  color: #ffffff !important;
}
html body.kg-dark .ere-remedy-item span,
html body.kg-dark .ere-remedy-item div {
  color: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   FIX v8.1 — HOMEPAGE SPACING REDUCTION
   Problem: Extra space at top and bottom of homepage
   ═══════════════════════════════════════════════════════════════════════ */

/* Reduce oracle card top margin */
.kg-oracle-card {
  margin-top: 6px !important;
  margin-bottom: 10px !important;
}

/* Reduce kg-pg top padding */
.kg-pg {
  padding-top: 6px !important;
}

/* Reduce trust bar spacing at bottom */
#kg-trust-bar {
  margin-top: 8px !important;
  margin-bottom: 8px !important;
}

/* Reduce av-services-grid top/bottom gap */
.av-services-grid {
  margin-top: 0 !important;
  margin-bottom: 6px !important;
}

/* Tighten av-ai-input-section margin */
.av-ai-input-section {
  margin-top: 0 !important;
  margin-bottom: 8px !important;
}

/* Tighten av-astrologers-section spacing */
.av-astrologers-section {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Tighten av-numerology-section spacing */
.av-numerology-section {
  margin-top: 8px !important;
  padding-top: 0 !important;
}