/* chat.css -- the chat page's styles (newsite/panchang.php: home, /xx/loc, dated pages), moved out of the page so
browsers keep them (#492). The star field's shadows are the fixed values the page's seeded generator gave. */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--saffron: #E07B2A;
--saffron-light: rgba(245,166,35,0.18);
--saffron-dark: #F5A623;
--green: #34C759;
--green-light: rgba(52,199,89,0.15);
--red: #FF453A;
--red-light: rgba(255,69,58,0.15);
--ink: #F0EDE8;
--ink-soft: #C0B8B0;
--ink-muted: rgba(255,255,255,0.45);
--border: rgba(255,255,255,0.12);
--bg: #060010;
--card: #110820;
--warn-bg: rgba(245,166,35,0.1);
--warn-text: #F5A623;
--qb: transparent;
--stars-vis: 1;
--pc-orb1: rgba(180,40,140,0.45);
--pc-orb2: rgba(40,80,200,0.38);
--pc-orb3: rgba(200,100,20,0.32);
--horizon-glow: rgba(200,100,30,0.18);
}
[data-theme="light"] {
--saffron: #B85000;
--saffron-light: rgba(184,80,0,0.12);
--saffron-dark: #963C00;
--green: #1A8A3C;
--green-light: rgba(26,138,60,0.12);
--red: #CC2A20;
--red-light: rgba(204,42,32,0.12);
--ink: #1A0800;
--ink-soft: #4A2808;
--ink-muted: rgba(26,8,0,0.5);
--border: rgba(0,0,0,0.09);
--bg: #FEF3E2;
--card: #FFF8EE;
--warn-bg: rgba(184,80,0,0.08);
--warn-text: #B85000;
--qb: #FFF0DC;
--stars-vis: 0;
--pc-orb1: rgba(255,200,80,0.45);
--pc-orb2: rgba(255,140,40,0.38);
--pc-orb3: rgba(220,80,10,0.28);
--horizon-glow: rgba(240,160,60,0.28);
}
[data-theme="light"] body { color: var(--ink); }
[data-theme="light"] .lpg-sheet { border-color: rgba(0,0,0,0.1); box-shadow: 0 8px 32px rgba(0,0,0,0.15); }
/* ── STAR FIELD ─────────────────────────────────────────────────── */
.pc-stars-s, .pc-stars-m, .pc-stars-l {
position: fixed; top: 0; left: 0; width: 1px; height: 1px;
background: transparent; border-radius: 50%; pointer-events: none; z-index: 0;
}
.pc-stars-s {
box-shadow: 770px 113px #fff,1540px 59px #fff,1430px 161px #fff,1528px 107px #fff,874px 205px #fff,108px 203px #fff,766px 309px #fff,1504px 179px #fff,914px 65px #fff,1300px 255px #fff,38px 93px #fff,1160px 83px #fff,1018px 73px #fff,1276px 159px #fff,1102px 237px #fff,368px 159px #fff,610px 273px #fff,868px 115px #fff,54px 17px #fff,984px 11px #fff,1034px 97px #fff,652px 19px #fff,350px 225px #fff,1152px 11px #fff,818px 21px #fff,1140px 231px #fff,6px 197px #fff,552px 187px #fff,602px 301px #fff,1564px 27px #fff,1518px 45px #fff,656px 147px #fff,770px 237px #fff,1220px 143px #fff,534px 141px #fff,632px 39px #fff,938px 129px #fff,1132px 235px #fff,1086px 105px #fff,1376px 207px #fff,146px 21px #fff,1492px 311px #fff,1574px 277px #fff,72px 271px #fff,570px 329px #fff,1596px 7px #fff,654px 229px #fff,1392px 91px #fff,162px 233px #fff,548px 303px #fff,438px 309px #fff,1304px 27px #fff,778px 293px #fff,652px 31px #fff,158px 101px #fff,896px 275px #fff,242px 193px #fff,884px 255px #fff,902px 85px #fff,552px 183px #fff,1370px 113px #fff,1436px 299px #fff,110px 257px #fff,272px 127px #fff,1154px 333px #fff,516px 335px #fff,22px 249px #fff,1528px 175px #fff,1258px 129px #fff,1196px 119px #fff,1278px 189px #fff,1184px 3px #fff,1298px 1px #fff,20px 335px #fff,934px 217px #fff,264px 95px #fff,954px 221px #fff,828px 131px #fff,718px 17px #fff,944px 331px #fff,674px 157px #fff,612px 195px #fff,118px 149px #fff,280px 115px #fff,586px 253px #fff,460px 111px #fff,350px 125px #fff,256px 223px #fff,1522px 113px #fff,1524px 63px #fff,646px 241px #fff,680px 75px #fff,538px 1px #fff,28px 51px #fff,494px 69px #fff,592px 295px #fff,2px 61px #fff,644px 183px #fff,1494px 233px #fff,824px 55px #fff,1130px 149px #fff,364px 175px #fff,702px 41px #fff,224px 263px #fff,1426px 149px #fff,340px 315px #fff,1446px 145px #fff,1416px 175px #fff,1594px 177px #fff,1468px 315px #fff,1486px 245px #fff,752px 231px #fff,482px 161px #fff,292px 135px #fff,502px 337px #fff,728px 315px #fff,1162px 37px #fff,1548px 143px #fff,1502px 21px #fff,192px 199px #fff;
animation: pcTwinkle 4s ease-in-out infinite alternate;
opacity: var(--stars-vis);
}
.pc-stars-m {
width: 2px; height: 2px;
box-shadow: 1330px 81px rgba(255,255,200,0.9),628px 35px rgba(255,255,200,0.9),1478px 69px rgba(255,255,200,0.9),936px 159px rgba(255,255,200,0.9),1498px 129px rgba(255,255,200,0.9),796px 139px rgba(255,255,200,0.9),878px 157px rgba(255,255,200,0.9),1552px 271px rgba(255,255,200,0.9),514px 81px rgba(255,255,200,0.9),4px 67px rgba(255,255,200,0.9),1174px 149px rgba(255,255,200,0.9),248px 79px rgba(255,255,200,0.9),618px 81px rgba(255,255,200,0.9),172px 59px rgba(255,255,200,0.9),446px 101px rgba(255,255,200,0.9),416px 175px rgba(255,255,200,0.9),1362px 1px rgba(255,255,200,0.9),276px 203px rgba(255,255,200,0.9),614px 5px rgba(255,255,200,0.9),1544px 151px rgba(255,255,200,0.9),186px 177px rgba(255,255,200,0.9),1532px 219px rgba(255,255,200,0.9),1230px 221px rgba(255,255,200,0.9),368px 135px rgba(255,255,200,0.9),1506px 1px rgba(255,255,200,0.9),548px 251px rgba(255,255,200,0.9),374px 53px rgba(255,255,200,0.9),792px 199px rgba(255,255,200,0.9),138px 33px rgba(255,255,200,0.9),716px 43px rgba(255,255,200,0.9),1566px 101px rgba(255,255,200,0.9),1088px 199px rgba(255,255,200,0.9),562px 193px rgba(255,255,200,0.9),1588px 43px rgba(255,255,200,0.9),1414px 77px rgba(255,255,200,0.9);
animation: pcTwinkle 3s ease-in-out 1s infinite alternate;
opacity: var(--stars-vis);
}
.pc-stars-l {
width: 3px; height: 3px;
box-shadow: 1192px 119px rgba(255,240,150,1),1306px 97px rgba(255,240,150,1),220px 187px rgba(255,240,150,1),942px 5px rgba(255,240,150,1),1168px 95px rgba(255,240,150,1),770px 41px rgba(255,240,150,1),516px 83px rgba(255,240,150,1),406px 109px rgba(255,240,150,1),56px 55px rgba(255,240,150,1),618px 177px rgba(255,240,150,1),1132px 187px rgba(255,240,150,1),126px 229px rgba(255,240,150,1);
animation: pcTwinkle 5s ease-in-out 0.5s infinite alternate;
opacity: var(--stars-vis);
}
@keyframes pcTwinkle { from { opacity: 0.3 } to { opacity: 1 } }
.pc-horizon {
position: fixed; bottom: 0; left: 0; right: 0; height: 220px;
pointer-events: none; z-index: 0;
background: radial-gradient(ellipse at bottom center, var(--horizon-glow) 0%, transparent 70%);
}
/* ── AURORA ORBS ─────────────────────────────────────────────────── */
.pc-orb {
position: fixed; border-radius: 50%;
pointer-events: none; filter: blur(70px); z-index: 0;
}
.pc-orb1 {
width: 500px; height: 500px;
background: radial-gradient(ellipse, var(--pc-orb1) 0%, transparent 70%);
top: -160px; left: -140px;
animation: pcOrb1 20s ease-in-out infinite alternate;
}
.pc-orb2 {
width: 400px; height: 400px;
background: radial-gradient(ellipse, var(--pc-orb2) 0%, transparent 70%);
bottom: 5%; right: -110px;
animation: pcOrb2 26s ease-in-out infinite alternate;
}
.pc-orb3 {
width: 300px; height: 300px;
background: radial-gradient(ellipse, var(--pc-orb3) 0%, transparent 70%);
top: 40%; left: 30%;
animation: pcOrb3 18s ease-in-out infinite alternate;
}
@keyframes pcOrb1 { from { transform: translate(0,0) scale(1); } to { transform: translate(80px,100px) scale(1.3); } }
@keyframes pcOrb2 { from { transform: translate(0,0) scale(1.1); } to { transform: translate(-70px,-80px) scale(0.8); } }
@keyframes pcOrb3 { from { transform: translate(0,0) scale(1); } to { transform: translate(-50px,60px) scale(1.2); } }
.lang-selector {
margin-left: auto;
flex-shrink: 0;
}
.lang-globe-btn {
font-family: 'DM Sans', sans-serif;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px 12px;
background: rgba(255,255,255,0.15);
border: 1px solid rgba(255,255,255,0.35);
border-radius: 20px;
cursor: pointer;
color: white;
font-size: 14px;
font-weight: 500;
transition: background 0.15s;
}
.lang-globe-btn:hover { background: rgba(255,255,255,0.28); }
.lang-globe-btn .lgb-label {
font-size: 13px;
opacity: 0.9;
}
/* 12h/24h time-format switch — electric-switch style toggle */
.ampm-switch {
-webkit-appearance: none;
appearance: none;
display: inline-flex;
align-items: center;
border: none;
background: none;
padding: 0;
margin: 0;
cursor: pointer;
flex-shrink: 0;
margin-left: 6px;
}
.ampm-switch .ampm-track {
position: relative;
display: inline-flex;
align-items: center;
width: 58px;
height: 28px;
border-radius: 16px;
background: rgba(255,255,255,0.15);
border: 1px solid rgba(255,255,255,0.35);
transition: background 0.25s, border-color 0.25s, box-shadow 0.25s;
overflow: hidden;
}
.ampm-switch:hover .ampm-track { background: rgba(255,255,255,0.24); }
.ampm-switch.on .ampm-track {
background: linear-gradient(135deg, #F5A623 0%, #E8871E 100%);
border-color: rgba(255,255,255,0.55);
box-shadow: 0 0 10px rgba(245,166,35,0.65), inset 0 0 4px rgba(255,255,255,0.4);
}
.ampm-switch .ampm-lbl {
position: absolute;
font-size: 9px;
font-weight: 800;
letter-spacing: 0.02em;
color: rgba(255,255,255,0.85);
transition: opacity 0.2s;
}
/* Label sits on the side OPPOSITE the thumb (thumb is at left:2px when
off, so "24H" goes on the right; thumb slides to the right when on,
so "12H" goes on the left) -- otherwise the thumb covers the label. */
.ampm-switch .ampm-lbl-24 { right: 6px; }
.ampm-switch .ampm-lbl-12 { left: 7px; opacity: 0; }
.ampm-switch.on .ampm-lbl-24 { opacity: 0; }
.ampm-switch.on .ampm-lbl-12 { opacity: 1; color: #2a1400; }
.ampm-switch .ampm-thumb {
position: absolute;
top: 2px;
left: 2px;
width: 22px;
height: 22px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,0.4);
transition: transform 0.25s cubic-bezier(.4,1.5,.6,1);
}
.ampm-switch.on .ampm-thumb { transform: translateX(30px); }
/* Numerals choice: two-segment pill "123 | native", the digits in
use highlighted (owner found a one-label switch confusing). */
.nm-seg { -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; gap: 2px; height: 28px; box-sizing: border-box; padding: 2px; margin: 0; border: 1px solid rgba(255,255,255,0.35); border-radius: 16px; background: rgba(255,255,255,0.15); cursor: pointer; flex-shrink: 0; }
#_mpNM.nm-seg, #_mpMS.nm-seg { margin-left: 6px; }
/* Home button: desktop only; on phones and tablets the logo and name go home (owner 2026-10-05). */
@media (max-width: 1024px) { #_zpHome { display: none !important; } }
.nm-seg:hover { background: rgba(255,255,255,0.24); }
.nm-seg span { display: inline-flex; align-items: center; height: 100%; padding: 0 7px; border-radius: 13px; font-size: 11px; font-weight: 800; line-height: 1; color: rgba(255,255,255,0.8); transition: background 0.2s, color 0.2s; }
.nm-seg:not(.on) .nm-a, .nm-seg.on .nm-b { background: linear-gradient(135deg, #F5A623 0%, #E8871E 100%); color: #2a1400; box-shadow: 0 0 6px rgba(245,166,35,0.55); }
/* The Amanta | Purnimanta choice in the ☰ menu: drawer colours, not the header's. */
#_mpMSw .nm-seg { border-color: var(--border); background: transparent; height: 32px; }
#_mpMSw .nm-seg span { color: var(--ink); font-size: 12px; }
#_mpMSw .nm-seg:not(.on) .nm-a, #_mpMSw .nm-seg.on .nm-b { color: #2a1400; }
/* Festival filter selector */
.fsect-selector {
flex-shrink: 0;
}
.fsect-btn {
font-family: 'DM Sans', sans-serif;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px 12px;
background: rgba(255,255,255,0.15);
border: 1px solid rgba(255,255,255,0.35);
border-radius: 20px;
cursor: pointer;
color: white;
font-size: 13px;
font-weight: 500;
transition: background 0.15s;
}
.fsect-btn:hover { background: rgba(255,255,255,0.28); }
/* Festival filter overlay */
.fsect-overlay { display: none; position: fixed; inset: 0; background: transparent; z-index: 300; }
.fsect-overlay.open { display: block; }
.fsect-sheet {
position: fixed; top: 54px; right: 8px;
background: var(--card);
border-radius: 16px;
width: auto; min-width: 280px; max-width: calc(100vw - 16px);
padding: 16px 14px 20px;
box-shadow: 0 8px 32px rgba(0,0,0,0.45);
border: 1px solid rgba(255,255,255,0.08);
animation: _fsectDrop 0.18s cubic-bezier(0.22,1,0.36,1);
}
@keyframes _fsectDrop {
from { opacity: 0; transform: translateY(-8px) scale(0.97); }
to { opacity: 1; transform: none; }
}
[data-theme="light"] .fsect-sheet { border-color: rgba(0,0,0,0.1); box-shadow: 0 8px 32px rgba(0,0,0,0.15); }
.fsect-title {
text-align: center;
font-size: 13px;
font-weight: 600;
opacity: 0.5;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 16px;
}
.fsect-cells {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.fsect-done-btn {
display: block;
width: auto;
max-width: 100%;
margin: 14px auto 0;
padding: 10px 28px;
border: none;
border-radius: 10px;
background: #8B1A1A;
color: #fff;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
cursor: pointer;
}
.fsect-done-btn:hover { background: #A32020; }
[data-theme="light"] .fsect-done-btn { background: #7A2000; }
[data-theme="light"] .fsect-done-btn:hover { background: #8F2600; }
.fsect-btn-cell {
display: flex;
flex-direction: column;
align-items: center;
padding: 12px 8px 10px;
border: 2px solid rgba(255,255,255,0.12);
border-radius: 12px;
cursor: pointer;
background: rgba(255,255,255,0.05);
font-family: 'DM Sans', sans-serif;
transition: border-color 0.12s, background 0.12s;
}
.fsect-btn-cell.active { background: #8B1A1A; border-color: #F5A623; }
.fsect-btn-cell.active .fsect-cell-name { color: white; }
.fsect-btn-cell.active .fsect-cell-icon { color: white; }
.fsect-cell-icon { font-size: 22px; margin-bottom: 4px; }
.fsect-cell-name { font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.75); }
/* Language picker overlay */
.lpg-overlay {
display: none;
position: fixed;
inset: 0;
background: transparent;
z-index: 300;
}
.lpg-overlay.open { display: block; }
.lpg-sheet {
position: fixed;
top: 54px;
right: 8px;
background: var(--card);
border-radius: 16px;
width: auto;
min-width: 288px;
max-width: calc(100vw - 16px);
padding: 16px 14px 20px;
box-shadow: 0 8px 32px rgba(0,0,0,0.45);
border: 1px solid rgba(255,255,255,0.08);
animation: _lpgDrop 0.18s cubic-bezier(0.22,1,0.36,1);
}
@keyframes _lpgDrop {
from { opacity: 0; transform: translateY(-8px) scale(0.97); }
to { opacity: 1; transform: none; }
}
@keyframes slideUp {
from { transform: translateY(60px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.lpg-title {
text-align: center;
font-size: 13px;
font-weight: 600;
opacity: 0.5;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 16px;
}
.lpg-cells {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.lang-btn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 12px 6px;
background: var(--bg);
border: 2px solid transparent;
border-radius: 14px;
cursor: pointer;
transition: all 0.15s;
gap: 4px;
}
.lang-btn:hover { border-color: var(--saffron); }
.lang-btn.active {
background: var(--saffron);
border-color: var(--saffron);
}
.lang-btn .lpg-script {
font-size: 18px;
font-weight: 600;
line-height: 1.1;
color: var(--ink);
}
.lang-btn.active .lpg-script { color: white; }
.lang-btn .lpg-name {
font-size: 10px;
opacity: 0.55;
color: var(--ink);
}
.lang-btn.active .lpg-name { opacity: 0.85; color: white; }
.card-tools {
display: flex;
gap: 6px;
align-items: center;
flex-wrap: wrap;
justify-content: flex-end;
}
.card-tool-btn {
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.25);
color: rgba(255, 255, 255, 0.85);
border-radius: 8px;
min-width: 36px;
min-height: 36px;
padding: 6px 10px;
font-size: 15px;
line-height: 1;
cursor: pointer;
transition: all 0.15s;
font-family: 'DM Sans', sans-serif;
display: inline-flex;
align-items: center;
justify-content: center;
}
.card-tool-btn:hover,
.card-tool-btn:active {
background: rgba(255, 255, 255, 0.22);
color: white;
}
/* Real overlaid on the 📅 label — required for iOS native picker */
.card-date-label {
position: relative;
overflow: hidden;
}
.card-date-input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
border: 0;
padding: 0;
margin: 0;
cursor: pointer;
/* iOS Safari: prevent zoom on focus, keep input tappable */
font-size: 16px;
-webkit-appearance: none;
appearance: none;
background: transparent;
color: transparent;
}
.card-date-input::-webkit-date-and-time-value {
text-align: left;
}
.card-date-input::-webkit-calendar-picker-indicator {
opacity: 0;
}
.card-lang-wrap {
position: relative;
display: inline-block;
}
.card-lang-pop {
position: absolute;
top: calc(100% + 6px);
right: 0;
background: var(--card);
border: 1px solid var(--border);
border-radius: 10px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
padding: 6px;
display: grid;
grid-template-columns: repeat(5, auto);
gap: 4px;
z-index: 50;
max-width: calc(100vw - 24px);
}
.card-lang-pop[hidden] {
display: none;
}
.card-lang-pop .clb {
font-family: 'DM Sans', sans-serif;
font-size: 14px;
min-width: 34px;
padding: 5px 6px;
background: var(--saffron-light);
border: 1px solid transparent;
border-radius: 8px;
cursor: pointer;
color: var(--ink);
transition: all 0.12s;
line-height: 1.1;
}
.card-lang-pop .clb:hover {
background: var(--saffron);
color: #fff;
}
.card-lang-pop .clb.active {
background: var(--saffron);
color: #fff;
border-color: var(--saffron-dark);
font-weight: 600;
}
/* Tooltip — default above */
[data-tip] {
position: relative;
}
[data-tip]::after {
content: attr(data-tip);
position: absolute;
bottom: calc(100% + 6px);
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.85);
color: white;
font-size: 11px;
padding: 4px 8px;
border-radius: 6px;
white-space: nowrap;
pointer-events: none;
opacity: 0;
transition: opacity 0.15s;
z-index: 999;
}
[data-tip]:hover::after {
opacity: 1;
}
[data-tip]::before {
content: '';
position: absolute;
bottom: calc(100% + 2px);
left: 50%;
transform: translateX(-50%);
border: 4px solid transparent;
border-top-color: rgba(0, 0, 0, 0.85);
pointer-events: none;
opacity: 0;
transition: opacity 0.15s;
z-index: 999;
}
[data-tip]:hover::before {
opacity: 1;
}
/* Lang buttons in header — tooltip below */
header [data-tip]::after {
bottom: auto;
top: calc(100% + 6px);
}
header [data-tip]::before {
bottom: auto;
top: calc(100% + 2px);
border-top-color: transparent;
border-bottom-color: rgba(0, 0, 0, 0.85);
}
@media(max-width:600px) {
[data-tip]::after,
[data-tip]::before {
display: none;
}
}
body {
font-family: 'DM Sans', sans-serif;
background: var(--bg);
color: var(--ink);
height: 100dvh;
display: flex;
flex-direction: column;
overflow: hidden;
}
@supports not (height: 100dvh) {
body {
height: 100vh;
}
}
/* iOS safe areas for notch and home indicator */
header {
background: linear-gradient(90deg, #5a0e0e 0%, #8a3e0e 100%);
color: white;
padding: 0.7rem 1.5rem;
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.6);
position: relative;
z-index: 10;
}
/* Room for the phone's status bar wherever the page draws under it: the
Capacitor app (--sat from AndroidBridge on Android) and the iPhone
home-screen app (black-translucent + viewport-fit=cover, #276 -- the
clock and battery sat on the header). In a normal browser tab the top
inset is 0, so nothing changes there. */
header {
padding-top: calc(var(--sat, env(safe-area-inset-top, 0px)) + 0.7rem);
}
.cap .input-area {
padding-bottom: 34px;
padding-right: 2rem;
}
/* Hamburger menu button + slide-in drawer for reference pages */
.menu-btn {
width: 38px;
height: 38px;
flex-shrink: 0;
background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 10px;
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
line-height: 1;
padding: 0;
}
.menu-btn:active {
background: rgba(255, 255, 255, 0.28);
}
#nav-scrim {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.45);
z-index: 240;
opacity: 0;
pointer-events: none;
transition: opacity .2s;
}
#nav-scrim.show {
opacity: 1;
pointer-events: auto;
}
#nav-drawer {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 80%;
max-width: 300px;
background: var(--card);
z-index: 250;
box-shadow: 2px 0 24px rgba(0, 0, 0, 0.25);
transform: translateX(-100%);
transition: transform .22s ease;
display: flex;
flex-direction: column;
}
#nav-drawer.show {
transform: translateX(0);
}
#nav-drawer .nd-head {
background: linear-gradient(90deg, #5a0e0e 0%, #8a3e0e 100%);
color: #fff;
padding: 16px 18px;
display: flex;
align-items: center;
gap: 10px;
}
#nav-drawer .nd-head .ic {
font-size: 1.5rem;
}
#nav-drawer .nd-head h2 {
font-size: 1rem;
font-weight: 700;
margin: 0;
}
#nav-drawer .nd-head p {
font-size: .72rem;
opacity: .8;
margin: 1px 0 0;
}
#nav-drawer .nd-head .x {
margin-left: auto;
background: none;
border: none;
color: rgba(255, 255, 255, .7);
font-size: 1.3rem;
cursor: pointer;
line-height: 1;
}
#nav-drawer nav {
overflow-y: auto;
padding: 8px 0;
flex: 1;
}
#nav-drawer a, #nav-drawer .navb {
display: flex;
align-items: center;
gap: 12px;
padding: 13px 20px;
color: var(--ink);
text-decoration: none;
font-size: .96rem;
font-weight: 500;
border-bottom: 1px solid var(--border);
}
#nav-drawer .navb { width: 100%; background: none; border: 0; border-bottom: 1px solid var(--border); font: inherit; font-size: .96rem; font-weight: 500; text-align: left; cursor: pointer; }
#nav-drawer a:active, #nav-drawer .navb:active {
background: var(--saffron-light);
}
#nav-drawer a .ne, #nav-drawer .navb .ne {
font-size: 1.15rem;
width: 24px;
text-align: center;
flex-shrink: 0;
}
#nav-drawer .nd-foot {
padding: 12px 20px;
font-size: .72rem;
color: var(--ink-muted);
}
#nav-drawer .nav-signin {
padding: 13px 20px;
border-bottom: 1px solid var(--border);
}
.header-icon {
width: 38px;
height: 38px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
}
.header-text {
flex: 1;
min-width: 0;
}
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.header-text h1, .header-text .hdr-h {
font-size: 1rem;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.header-text p {
font-size: 12px;
color: rgba(255, 255, 255, 0.75);
margin-top: 1px;
/* one line, never one word per line when the header is crowded (tablet, owner 2026-10-05) */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.q-ar {
flex: 1;
overflow-y: auto;
padding-block: 1rem;
padding-inline: max(1.5rem, calc((100% - 1600px) / 2));
display: flex;
flex-direction: column;
gap: 16px;
background: var(--qb);
position: relative;
z-index: 1;
}
.msg {
display: flex;
gap: 10px;
align-items: flex-start;
width: 100%;
}
/* Random entrance animation: JS adds _mI0.._mI3 (paused), reflows, adds _mRn to start */
._mI0{animation:_kI0 0.45s cubic-bezier(0.22,1,0.36,1) both;animation-play-state:paused}
._mI1{animation:_kI1 0.42s cubic-bezier(0.34,1.56,0.64,1) both;animation-play-state:paused}
._mI2{animation:_kI2 0.45s cubic-bezier(0.22,1,0.36,1) both;animation-play-state:paused}
._mI3{animation:_kI3 0.5s cubic-bezier(0.16,1,0.3,1) both;animation-play-state:paused}
._mRn._mI0,._mRn._mI1,._mRn._mI2,._mRn._mI3{animation-play-state:running}
@keyframes _kI0{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@keyframes _kI1{from{opacity:0;transform:scale(0.85)}to{opacity:1;transform:scale(1)}}
@keyframes _kI2{from{opacity:0;transform:translateX(32px)}to{opacity:1;transform:translateX(0)}}
@keyframes _kI3{from{opacity:0;filter:blur(8px);transform:scale(0.97)}to{opacity:1;filter:blur(0px);transform:scale(1)}}
@media(prefers-reduced-motion:reduce){._mI0,._mI1,._mI2,._mI3{animation:_kF 0.2s ease both}._mRn._mI0,._mRn._mI1,._mRn._mI2,._mRn._mI3{animation-play-state:running}}
@keyframes _kF{from{opacity:0}to{opacity:1}}
.msg.user {
flex-direction: row-reverse;
}
.msg-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 500;
}
.msg.bot .msg-avatar {
background: transparent;
padding: 0;
overflow: hidden;
}
.msg.bot .msg-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.msg.user .msg-avatar {
background: #6B1F1F;
color: white;
font-size: 11px;
}
.msg-bubble {
background: var(--card);
border-radius: 16px;
border-top-left-radius: 4px;
padding: 10px 14px;
font-size: 14px;
line-height: 1.6;
color: var(--ink);
max-width: 80%;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
border: 1px solid var(--border);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.msg.user .msg-bubble {
background: linear-gradient(135deg, #7a1a1a 0%, #a04010 100%);
color: white;
border-radius: 16px;
border-top-right-radius: 4px;
border: none;
}
.msg-card {
background: var(--card);
border-radius: 16px;
border-top-left-radius: 4px;
overflow: hidden;
width: 100%;
max-width: 100%;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
border: 1px solid var(--border);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.msg.bot:has(.msg-card) {
width: 100%;
}
.msg.bot:has(.msg-card) .msg-avatar {
flex-shrink: 0;
}
/* "All features" card: grouped buttons, large enough for older visitors */
.zf-groups { padding: 12px 14px 16px; display: grid; gap: 16px; }
.zf-gt { font-weight: 700; font-size: 0.82rem; letter-spacing: .04em; text-transform: uppercase; color: var(--saffron-dark); margin-bottom: 8px; }
.zf-bs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.zf-b { display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--saffron-light); color: var(--ink); font: inherit; font-size: 0.95rem; text-align: left; text-decoration: none; cursor: pointer; }
.zf-b:hover { border-color: var(--saffron-dark); transform: scale(1.03); }
.zf-b:active { transform: scale(0.97); }
/* Buttons grow in one after another (scale + fade, owner 2026-10-03). */
@media (prefers-reduced-motion: no-preference) {
.zf-b { animation: zfIn .34s ease-out both; animation-delay: calc(var(--zi, 0) * 6ms); transition: transform .15s ease, border-color .15s ease; }
@keyframes zfIn { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: scale(1); } }
.suggestion-btn.zf-chip { animation: zfGlow 2.4s ease-in-out 1s 2; }
@keyframes zfGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(245,166,35,0); } 50% { box-shadow: 0 0 0 4px rgba(245,166,35,.28); } }
}
.zf-b:focus-visible { outline: 2px solid var(--saffron-dark); outline-offset: 2px; }
.zf-i { flex: none; }
.zf-new { margin-left: auto; flex: none; font-size: 0.65rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--saffron-dark); color: #1a0800; }
[data-theme="light"] .zf-new { color: #fff; }
.suggestion-btn.zf-chip { font-weight: 700; border-color: var(--saffron-dark); color: var(--saffron-dark); }
/* "You may also ask" row under an answer */
.zf-fu { border-top: 1px solid var(--border); padding: 12px 14px 14px; }
.zf-fu-t { font-weight: 700; font-size: 0.85rem; color: var(--saffron-dark); margin-bottom: 8px; }
.zf-fu-bs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.card-header {
background: linear-gradient(90deg, #5a0e0e 0%, #8a3e0e 100%);
color: white;
padding: 14px 16px;
display: flex;
justify-content: space-between;
align-items: center;
}
.sd-badge {
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: 5px;
padding: 3px 10px 3px 8px;
border-radius: 20px;
background: rgba(255,215,0,0.18);
border: 1px solid rgba(255,215,0,0.35);
color: #FFD700;
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.03em;
line-height: 1.3;
white-space: nowrap;
}
.mc-sd { display:block; font-size:7px; color:#F5A623; line-height:1.1; text-align:right; }
.sd-list-card { border-radius:14px; overflow:hidden; background:var(--card); box-shadow:0 2px 12px rgba(0,0,0,0.08); }
.sd-list { }
.sd-list-item { padding:9px 16px; display:flex; flex-direction:column; gap:2px; cursor:pointer; border-bottom:1px solid var(--border);
animation:_cxFD 0.32s cubic-bezier(0.22,1,0.36,1) both;
animation-delay:calc(var(--cx-idx,0) * 35ms + 0.15s); }
.sd-list-item:last-child { border-bottom:none; }
.sd-list-item:hover, .sd-list-item:active { background:rgba(245,166,35,0.08); }
.sd-li-date { font-size:0.82rem; font-weight:700; color:var(--ink); }
.sd-li-detail { font-size:0.72rem; color:var(--ink-muted); }
.sd-li-q { color:#F5A623; font-weight:600; }
.wm-table-wrap { overflow-x:auto; max-width:100%; border:1px solid var(--border); border-radius:8px; }
.wm-table { border-collapse:collapse; width:100%; font-size:0.72rem; white-space:nowrap; }
.wm-table th, .wm-table td { border:1px solid var(--border); vertical-align:top; }
.wm-table th { text-align:left; padding:8px 10px; font-weight:700; font-size:0.66rem;
text-transform:uppercase; letter-spacing:.03em; opacity:.75; background:rgba(245,166,35,0.06); }
.wm-table td { padding:7px 10px; color:var(--ink); }
.wm-table tbody tr { cursor:pointer; }
.wm-table tbody tr:hover { background:rgba(245,166,35,0.08); }
.wm-tick { text-align:center; font-weight:700; }
.wm-tick-ok { color:#4EB97A; }
.wm-tick-x { color:#D96060; }
.wm-comment-cell { color:#F5A623; font-style:italic; white-space:normal; max-width:130px; font-size:.9em; }
.wm-window-cell { min-width:200px; white-space:normal; } /* owner 2026-10-04: shrink Comments, more room for the window */
.wm-date-cell { text-align:center; }
/* Year view: replaces the old standalone per-month heading div now that
all 12 months share one (see render_wedding_muhurtha_year()) --
a row instead, not clickable like the data rows above/below it. */
.wm-table tr.wm-month-divider { cursor:default; }
.wm-table tr.wm-month-divider:hover { background:none; }
.wm-table tr.wm-month-divider td { font-size:0.78rem; font-weight:700; padding:12px 14px 6px;
color:var(--ink); border:none; white-space:normal; background:var(--card); }
.wm-month-slot:empty { display:none; }
.ys-slot:empty { display:none; }
.wm-year-loading { padding:14px 16px; text-align:center; color:var(--ink-muted); font-size:0.75rem; }
.wm-year-empty { padding:16px; text-align:center; color:var(--ink-muted); font-size:0.78rem; }
.wm-footnote { padding:10px 16px 14px; color:var(--ink-muted); font-size:0.72rem; font-style:italic; line-height:1.4; }
.mhp-picker { display:flex; gap:8px; flex-wrap:wrap; align-items:center; padding:8px 16px; background:var(--card); border-bottom:1px solid var(--border); }
.mhp-picker select { width:auto; max-width:100%; font-size:0.75rem; padding:4px 8px; border-radius:6px; border:1px solid var(--border); background:var(--card); color:var(--ink); font-family:'DM Sans',sans-serif; cursor:pointer; }
.vh-pchip { opacity:.55; }
.vh-pchip.on { opacity:1; }
.vh-pfiltered { display:none !important; }
.ntv-vedha { display:flex; flex-wrap:wrap; gap:4px; }
.nak-vp { display:inline-block; background:rgba(255,255,255,.08); border-radius:8px; padding:1px 7px; font-size:11px; }
.nak-vp-empty { opacity:.6; }
.monthly-card { border-radius: 14px; overflow: hidden; background: var(--card); box-shadow: 0 2px 12px rgba(0,0,0,0.08); width: 100%; max-width: 1000px; }
.monthly-hdr { background: linear-gradient(90deg,#5a0e0e 0%,#8a3e0e 100%); color: #fff; padding: 12px 16px; display: flex; justify-content: space-between; align-items: baseline; }
.monthly-title { font-size: 1.1rem; font-weight: 700; }
.monthly-city { font-size: 0.72rem; opacity: 0.75; }
.pmc-card { border-radius: 14px; overflow: hidden; background: var(--card); box-shadow: 0 2px 12px rgba(0,0,0,0.08); max-width: 560px; }
.pmc-hdr { background: linear-gradient(90deg,#5a0e0e 0%,#8a3e0e 100%); color: #fff; padding: 12px 16px; display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.help-hdr { background: linear-gradient(90deg,#5a0e0e 0%,#8a3e0e 100%); }
.pmc-nav { background: rgba(255,255,255,0.18); border: none; color: #fff; border-radius: 5px; padding: 2px 7px; cursor: pointer; font-size: 0.85rem; line-height: 1.5; }
.pmc-nav:hover { background: rgba(255,255,255,0.32); }
.pmc-title { font-size: 0.95rem; font-weight: 700; }
.pmc-city { font-size: 0.72rem; opacity: 0.75; }
.pmc-body { padding: 8px 14px; }
.pm-nomove { font-size: 0.75rem; padding: 4px 0; color: rgba(255,255,255,0.75); }
.mc-cal { border-collapse: collapse; width: 100%; table-layout: fixed; font-size: 0.68rem; }
.mc-cal tr:not(:last-child) { border-bottom: 1px solid var(--border); }
.mc-dh { background: #4A1212; color: #fff; font-size: 0.65rem; font-weight: 700; padding: 5px 7px; text-align: center; white-space: nowrap; width: 30px; }
.mc-cell { padding: 4px 5px; cursor: pointer; vertical-align: top; min-width: 52px; border-left: 1px solid var(--border); }
.mc-cell:active { background: rgba(245,166,35,0.15); }
@keyframes mcShake {
0%, 100% { transform: rotate(0deg); }
20% { transform: rotate(-2deg); }
40% { transform: rotate(2deg); }
60% { transform: rotate(-1.5deg); }
80% { transform: rotate(1.5deg); }
}
.mc-cell:hover { animation: mcShake 0.4s ease; }
.mc-empty { min-width: 52px; border-left: 1px solid var(--border); background: rgba(0,0,0,0.15); }
.mc-today { background: rgba(245,166,35,0.18) !important; border-left: 2px solid #F5A623 !important; }
.mc-d { display: block; font-size: 0.9rem; font-weight: 700; color: var(--ink); line-height: 1.2; }
.mc-td { display: block; font-size: 0.55rem; color: #4BD9A0; font-weight: 700; margin-bottom: 1px; white-space: normal; }
.mc-cm { display: block; font-size: 0.55rem; color: #F5A623; font-weight: 700; margin-bottom: 1px; white-space: normal; }
.mc-fv { display: block; font-size: 0.56rem; color: #60AFFF; font-weight: 700; margin-bottom: 1px; white-space: normal; }
.mc-ti { display: block; color: #F5A623; font-weight: 600; line-height: 1.3; white-space: normal; max-width: 100%; }
.mc-na { display: block; color: var(--ink-muted); line-height: 1.3; white-space: normal; }
.mc-yo, .mc-ka { display: block; color: var(--ink-muted); line-height: 1.3; white-space: nowrap; font-size: 0.9em; }
.mc-nav { background: rgba(255,255,255,0.18); border: none; color: #fff; border-radius: 5px; padding: 2px 7px; cursor: pointer; font-size: 0.85rem; line-height: 1.5; }
.mc-nav:hover { background: rgba(255,255,255,0.32); }
.masa-hdr { flex-wrap: wrap; gap: 6px; }
.masa-side-label { font-size: 0.72rem; opacity: 0.75; white-space: nowrap; }
/* ── Festival card ─────────────────────────────────────── */
.festival-msg-card .card-header {
background: linear-gradient(135deg, #8c030c 0%, #c05621 100%);
gap: 12px;
}
.festival-msg-card .card-body {
padding: 12px 16px;
}
.festival-msg-card .card-tools {
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
padding: 8px 16px 12px;
border-top: 1px solid var(--border);
background: var(--bg);
}
.festival-msg-card .festival-city-input {
width: 100%;
box-sizing: border-box;
padding: 5px 8px;
border: 1px solid var(--border);
border-radius: 5px;
font-size: 0.9em;
background: var(--card);
color: var(--ink);
}
.festival-msg-card .fmc-go-btn {
background: #8c030c;
color: #fff;
border: none;
padding: 5px 12px;
border-radius: 5px;
font-size: 0.85em;
cursor: pointer;
white-space: nowrap;
}
.festival-embed {
font-size: 13px;
line-height: 1.5;
}
.festival-embed table {
width: 100%;
border-collapse: collapse;
}
.festival-embed td, .festival-embed th {
padding: 6px 10px;
border: 1px solid #e0d0c0;
}
.copy-btn {
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.25);
color: rgba(255, 255, 255, 0.8);
border-radius: 8px;
padding: 5px 10px;
font-size: 11px;
cursor: pointer;
transition: all 0.15s;
display: flex;
align-items: center;
gap: 4px;
font-family: 'DM Sans', sans-serif;
}
.copy-btn:hover {
background: rgba(255, 255, 255, 0.22);
color: white;
}
.copy-btn.copied {
background: var(--green);
border-color: var(--green);
color: white;
}
.date-str {
font-family: 'Tiro Devanagari Sanskrit', serif;
font-size: 1.1rem;
font-weight: 400;
}
.city-str {
font-size: 11px;
color: rgba(255, 255, 255, 0.92);
text-transform: uppercase;
letter-spacing: 0.07em;
margin-top: 2px;
font-weight: 500;
}
.card-body {
padding: 10px 14px;
}
.rise-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 6px;
margin-bottom: 8px;
}
.rise-item {
background: linear-gradient(90deg, #5a0e0e 0%, #8a3e0e 100%);
border-radius: 8px;
padding: 6px 10px;
color: white;
}
.rise-item .rl {
font-size: 10px;
color: rgba(255, 255, 255, 0.6);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 3px;
font-weight: 600;
}
.rise-item .rv {
font-size: 15px;
font-weight: 700;
color: white;
}
/* Panch grid — tithi/nakshatra bigger */
.panch-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
gap: 6px;
margin-bottom: 8px;
}
.panch-item {
border: 1px solid var(--border);
border-radius: 10px;
padding: 8px 10px;
position: relative;
}
.panch-item .pl {
font-size: 10px;
color: var(--ink-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 4px;
}
.panch-item .pv {
font-size: 15px;
font-weight: 600;
color: var(--ink);
}
.panch-item .ps {
font-size: 11px;
color: var(--ink-muted);
margin-top: 3px;
}
/* Tithi and Nakshatra — most important for priests */
.panch-item.tithi {
border-color: var(--saffron);
border-width: 2px;
}
.panch-item.tithi .pv {
font-size: 17px;
color: var(--saffron-dark);
}
.panch-item.nakshatra {
border-color: #7B68EE;
border-width: 2px;
}
.panch-item.nakshatra .pv {
color: #9D96FF;
}
/* Nakshatra Analysis — one tile per nakshatra segment of the day,
matching .panch-item's card language; the purple accent reuses
.panch-item.nakshatra's own color so the two read as the same idea. */
.nak-tiles {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 8px;
margin-bottom: 8px;
}
.nak-tile {
border: 2px solid #7B68EE;
border-radius: 10px;
padding: 10px 12px;
}
.nak-tile-head {
font-size: 15px;
font-weight: 700;
color: #9D96FF;
margin-bottom: 8px;
}
.nak-tile-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
gap: 6px;
}
.nak-tile-item {
border: 1px solid var(--border);
border-radius: 8px;
padding: 6px 8px;
}
.nak-tile-item .ntl {
font-size: 9px;
color: var(--ink-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 2px;
}
.nak-tile-item .ntv {
font-size: 13px;
font-weight: 600;
color: var(--ink);
}
/* Shraddha Tithi cards: tiles (owner 2026-10-12 "attractive with tiles, easy to read") */
.sh-tiles { display: grid; gap: 8px; }
.sh-t { border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; background: var(--saffron-light); min-width: 0; }
.sh-l { font-size: 11px; letter-spacing: 0.04em; color: var(--ink-soft); margin-bottom: 3px; }
.sh-v { font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.3; overflow-wrap: anywhere; }
.sh-s { font-size: 12px; font-weight: 500; color: var(--ink-soft); }
.sh-hero { border: 2px solid var(--saffron); text-align: center; padding: 10px 12px; }
.sh-hero .sh-v { font-size: 22px; font-weight: 800; color: var(--saffron-dark); }
.sh-cmp .sh-hero .sh-v { font-size: 18px; }
.sh-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; }
.sh-grid .sh-t { background: var(--card); }
.sh-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.sh-chip { border: 1px solid var(--saffron); border-radius: 8px; padding: 4px 10px; background: var(--card); text-align: center; }
.sh-chip b { display: block; font-size: 14px; color: var(--ink); white-space: nowrap; }
.sh-chip span { font-size: 11px; color: var(--ink-soft); }
.sh-go { cursor: pointer; font: inherit; color: inherit; }
.sh-go:hover, .sh-go:focus-visible { background: var(--saffron-light); outline: 2px solid var(--saffron); outline-offset: 1px; }
.sh-cmp { display: grid; gap: 8px; }
.sh-ch { border: 2px solid var(--saffron); border-radius: 10px; padding: 6px 8px; font-weight: 800; text-align: center; color: var(--saffron-dark); font-size: 14px; }
.sh-dec { font-size: 15px; font-weight: 700; color: var(--ink); text-align: center; margin-bottom: 10px; }
.sh-note { font-size: 12px; color: var(--ink-soft); }
.mp-fix { text-align: right; padding: 2px 14px 10px; font-size: 11px; }
.mp-fix a { color: var(--ink-muted); text-decoration: underline dotted; }
.mp-fix a:hover { color: var(--saffron-dark); }
.sh-16 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.section-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-muted);
margin-bottom: 6px;
margin-top: 8px;
font-weight: 600;
}
/* Good timings — green highlight bigger */
.timings-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 5px;
margin-bottom: 8px;
}
.t-item {
padding: 10px 12px;
border-radius: 8px;
background: var(--bg);
}
.t-item.good {
background: var(--green-light);
border: 1px solid #A8D5B8;
}
.t-item.bad {
background: var(--red-light);
border: 1px solid #F5A8A0;
}
.t-item.warn {
background: var(--warn-bg);
border: 1px solid #F5D8A0;
}
.t-item .tl {
font-size: 11px;
color: var(--ink-muted);
margin-bottom: 3px;
font-weight: 500;
}
.t-item.good .tl {
color: var(--green);
}
.t-item.bad .tl {
color: var(--red);
}
.t-item.warn .tl {
color: var(--warn-text);
}
.t-item .tv {
font-size: 13px;
font-weight: 600;
}
.t-item.good .tv {
color: var(--green);
}
.t-item.bad .tv {
color: var(--red);
}
.t-item.warn .tv {
color: var(--warn-text);
}
/* ── TIMELINE CARD: HERO ──────────────────────────────────────── */
.tl-hero {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-bottom: 8px;
animation: _tlHI 0.48s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes _tlHI { from{opacity:0;transform:scale(0.9)} to{opacity:1;transform:none} }
.tl-hero-main {
border-radius: 14px;
padding: 13px 14px;
display: flex;
flex-direction: column;
gap: 3px;
position: relative;
overflow: hidden;
}
.tl-ht { background: linear-gradient(145deg,rgba(80,10,20,.95) 0%,rgba(140,25,40,.85) 100%); border:1px solid rgba(255,100,120,.25); }
.tl-hn { background: linear-gradient(145deg,rgba(10,20,80,.95) 0%,rgba(20,50,130,.85) 100%); border:1px solid rgba(100,140,255,.25); }
.tl-ht::before {
content:''; position:absolute; top:-24px; right:-24px;
width:90px; height:90px; border-radius:50%;
background:radial-gradient(ellipse,rgba(220,50,80,.35),transparent 70%);
pointer-events:none;
}
.tl-hn::before {
content:''; position:absolute; top:-24px; right:-24px;
width:90px; height:90px; border-radius:50%;
background:radial-gradient(ellipse,rgba(80,120,255,.35),transparent 70%);
pointer-events:none;
}
.tl-hero-lbl {
font-size: 9px; font-weight:700; text-transform:uppercase;
letter-spacing:.1em; color:rgba(255,255,255,.55); margin-bottom:2px;
}
.tl-hero-val {
font-family:'Tiro Devanagari Sanskrit',serif;
font-size:18px; font-weight:600; color:#fff; line-height:1.2;
}
.tl-ht .tl-hero-val { color:#FFB0C0; }
.tl-hn .tl-hero-val { color:#B0C8FF; }
.tl-hero-main { transition:transform .15s,box-shadow .15s; cursor:default; }
.tl-hero-main:hover { transform:translateY(-2px); box-shadow:0 6px 22px rgba(0,0,0,.35); }
.tl-hero-sub { font-size:10px; color:rgba(255,255,255,.45); margin-top:3px; }
.tl-hero-sub2 { display:flex; flex-wrap:wrap; gap:3px; margin-top:5px; }
.tl-hero-pill {
font-size:9px; padding:2px 7px; border-radius:10px;
background:rgba(255,255,255,.13); color:rgba(255,255,255,.8);
font-weight:600;
}
/* ── TIMELINE CARD: RISE/SET STRIP ─────────────────────────────── */
.tl-rise-strip {
display: grid;
grid-template-columns: repeat(4,1fr);
gap: 6px;
margin-bottom: 8px;
animation: _tlRI 0.4s cubic-bezier(0.22,1,0.36,1) 0.13s both;
}
@keyframes _tlRI { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none} }
.tl-rs {
display:flex; flex-direction:column; align-items:center;
padding:10px 4px; border-radius:12px; gap:3px;
position:relative; overflow:hidden;
}
.tl-sunrise { background:linear-gradient(135deg,#5a2d00 0%,#8a4800 100%); }
.tl-sunset { background:linear-gradient(135deg,#3a1560 0%,#6a2090 100%); }
.tl-moonrise { background:linear-gradient(135deg,#0d1f4a 0%,#1a3060 100%); }
.tl-moonset { background:linear-gradient(135deg,#0d1f4a 0%,#1a3060 80%); opacity:.8; }
.tl-rs-icon { font-size:18px; line-height:1; }
.tl-rs-t { font-size:13px; font-weight:700; color:#fff; }
.tl-rs-l { font-size:9px; color:rgba(255,255,255,.6); text-transform:uppercase; letter-spacing:.06em; font-weight:600; }
/* ── TIMELINE CARD: META STRIP (yoga/karana/chandramana) ────────── */
.tl-meta-strip {
display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px;
animation: _tlMI 0.4s 0.22s both;
}
@keyframes _tlMI { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
.tl-mc {
flex:1; min-width:90px; border:1px solid var(--border);
border-radius:10px; padding:8px 10px; background:var(--bg);
position:relative; overflow:hidden;
}
.tl-mc-l {
font-size:9px; color:var(--ink-muted); text-transform:uppercase;
letter-spacing:.08em; font-weight:600; margin-bottom:3px;
}
.tl-mc-v { font-size:13px; font-weight:600; color:var(--ink); }
.tl-mc-td { background:linear-gradient(145deg,rgba(20,90,70,.5) 0%,rgba(30,140,110,.35) 100%); border-color:rgba(75,217,160,.3); }
.tl-mc-cm { background:linear-gradient(145deg,rgba(100,50,10,.5) 0%,rgba(160,90,20,.35) 100%); border-color:rgba(245,166,35,.3); }
.tl-mc-tm { background:linear-gradient(145deg,rgba(70,30,110,.5) 0%,rgba(110,60,180,.35) 100%); border-color:rgba(180,140,255,.3); }
.tl-mc-pm { background:linear-gradient(145deg,rgba(15,70,120,.5) 0%,rgba(25,110,180,.35) 100%); border-color:rgba(90,170,255,.3); }
.tl-mc-td .tl-mc-v { color:#4BD9A0; }
.tl-mc-cm .tl-mc-v { color:#F5A623; }
.tl-mc-tm .tl-mc-v { color:#B48CFF; }
.tl-mc-pm .tl-mc-v { color:#5AAAFF; }
.tl-mc-sd { background:linear-gradient(145deg,rgba(120,20,70,.5) 0%,rgba(190,50,120,.35) 100%); border-color:rgba(255,130,190,.3); }
.tl-mc-sd .tl-mc-v { color:#FF9CCB; }
[data-theme="light"] .tl-mc-sd { background:linear-gradient(145deg,rgba(190,40,110,.12) 0%,rgba(190,40,110,.06) 100%); border-color:rgba(190,40,110,.3); }
[data-theme="light"] .tl-mc-sd .tl-mc-v { color:#9A1F5C; }
[data-theme="light"] .tl-mc-td { background:linear-gradient(145deg,rgba(20,140,90,.12) 0%,rgba(20,140,90,.06) 100%); border-color:rgba(20,140,90,.3); }
[data-theme="light"] .tl-mc-cm { background:linear-gradient(145deg,rgba(200,110,10,.12) 0%,rgba(200,110,10,.06) 100%); border-color:rgba(200,110,10,.3); }
[data-theme="light"] .tl-mc-tm { background:linear-gradient(145deg,rgba(120,60,200,.12) 0%,rgba(120,60,200,.06) 100%); border-color:rgba(120,60,200,.3); }
[data-theme="light"] .tl-mc-pm { background:linear-gradient(145deg,rgba(20,90,170,.12) 0%,rgba(20,90,170,.06) 100%); border-color:rgba(20,90,170,.3); }
[data-theme="light"] .tl-mc-td .tl-mc-v { color:#157040; }
[data-theme="light"] .tl-mc-cm .tl-mc-v { color:#8A4500; }
[data-theme="light"] .tl-mc-tm .tl-mc-v { color:#6B2FB3; }
[data-theme="light"] .tl-mc-pm .tl-mc-v { color:#1A5FA8; }
@keyframes tlMcShake {
0%, 100% { transform: rotate(0deg); }
20% { transform: rotate(-2deg); }
40% { transform: rotate(2deg); }
60% { transform: rotate(-1.5deg); }
80% { transform: rotate(1.5deg); }
}
.tl-mc-td:hover, .tl-mc-cm:hover, .tl-mc-tm:hover, .tl-mc-pm:hover { animation: tlMcShake 0.4s ease; cursor:default; }
.tl-mc-td::before, .tl-mc-cm::before, .tl-mc-tm::before, .tl-mc-pm::before {
content:''; position:absolute; width:46px; height:46px; border-radius:50%;
top:-16px; right:-16px; pointer-events:none; z-index:0;
animation: tlOrbPulse 3.5s ease-in-out infinite;
}
.tl-mc-td::before { background: radial-gradient(circle, rgba(75,217,160,.55) 0%, transparent 70%); }
.tl-mc-cm::before { background: radial-gradient(circle, rgba(245,166,35,.55) 0%, transparent 70%); }
.tl-mc-tm::before { background: radial-gradient(circle, rgba(180,140,255,.55) 0%, transparent 70%); }
.tl-mc-pm::before { background: radial-gradient(circle, rgba(90,170,255,.55) 0%, transparent 70%); }
.tl-mc-td > *, .tl-mc-cm > *, .tl-mc-tm > *, .tl-mc-pm > * { position:relative; z-index:1; }
@keyframes tlOrbPulse {
0%, 100% { transform: scale(1); opacity:.7; }
50% { transform: scale(1.25); opacity:1; }
}
/* ── TIMELINE CARD: DAY EVENTS ─────────────────────────────────── */
.tl-day-events { margin-bottom:8px; }
.tl-ev {
display:flex; align-items:flex-start; gap:10px;
animation: _tlEI 0.38s cubic-bezier(0.22,1,0.36,1) both;
animation-delay: calc(var(--tl-idx,0) * 55ms + 0.28s);
}
@keyframes _tlEI { from{opacity:0;transform:translateX(-18px)} to{opacity:1;transform:none} }
.tl-ev-spine {
display:flex; flex-direction:column; align-items:center;
flex-shrink:0; width:14px; margin-top:4px;
}
.tl-ev-dot {
width:10px; height:10px; border-radius:50%; flex-shrink:0;
background:rgba(255,255,255,.35); border:2px solid var(--bg);
transition: box-shadow 0.2s;
}
.tl-ev-line { width:2px; flex:1; min-height:14px; background:var(--border); margin-top:2px; }
.tl-ev:last-child .tl-ev-line { display:none; }
.tl-ev-body {
padding:0 0 11px; flex:1; display:flex;
align-items:baseline; gap:8px; flex-wrap:wrap;
}
.tl-ev-name { font-size:13px; font-weight:600; color:var(--ink); line-height:1.3; }
.tl-ev-time { font-size:11px; color:var(--ink-muted); font-weight:500; white-space:nowrap; }
.tl-ev-good .tl-ev-dot { background:var(--green); box-shadow:0 0 7px rgba(52,199,89,.55); }
.tl-ev-good .tl-ev-name { color:var(--green); }
.tl-ev-bad .tl-ev-dot { background:var(--red); box-shadow:0 0 7px rgba(255,69,58,.55); }
.tl-ev-bad .tl-ev-name { color:var(--red); }
.tl-ev-warn .tl-ev-dot { background:var(--warn-text); box-shadow:0 0 7px rgba(245,166,35,.55); }
.tl-ev-warn .tl-ev-name { color:var(--warn-text); }
/* ── LIGHT THEME OVERRIDES for tl-* ────────────────────────────── */
[data-theme="light"] .tl-ht { background:linear-gradient(145deg,rgba(180,20,40,.1) 0%,rgba(220,50,80,.06) 100%); border-color:rgba(200,40,70,.25); }
[data-theme="light"] .tl-hn { background:linear-gradient(145deg,rgba(20,40,160,.1) 0%,rgba(40,80,220,.06) 100%); border-color:rgba(50,100,220,.25); }
[data-theme="light"] .tl-ht .tl-hero-lbl { color:rgba(160,30,60,.65); }
[data-theme="light"] .tl-hn .tl-hero-lbl { color:rgba(30,60,180,.65); }
[data-theme="light"] .tl-ht .tl-hero-val { color:#8B1A2A; }
[data-theme="light"] .tl-hn .tl-hero-val { color:#1a3080; }
[data-theme="light"] .tl-ht .tl-hero-sub { color:rgba(160,30,60,.5); }
[data-theme="light"] .tl-hn .tl-hero-sub { color:rgba(30,60,180,.5); }
[data-theme="light"] .tl-ht::before { background:radial-gradient(ellipse,rgba(220,50,80,.18),transparent 70%); }
[data-theme="light"] .tl-hn::before { background:radial-gradient(ellipse,rgba(50,100,220,.18),transparent 70%); }
[data-theme="light"] .tl-ht .tl-hero-pill { background:rgba(160,30,60,.1); color:rgba(140,20,50,.85); }
[data-theme="light"] .tl-hn .tl-hero-pill { background:rgba(30,60,180,.1); color:rgba(20,50,160,.85); }
[data-theme="light"] .tl-sunrise { background:linear-gradient(135deg,#fef3c7 0%,#fcd34d 100%); }
[data-theme="light"] .tl-sunrise .tl-rs-t { color:#92400e; }
[data-theme="light"] .tl-sunrise .tl-rs-l { color:rgba(146,64,14,.6); }
[data-theme="light"] .tl-sunset { background:linear-gradient(135deg,#fce7f3 0%,#f9a8d4 100%); }
[data-theme="light"] .tl-sunset .tl-rs-t { color:#831843; }
[data-theme="light"] .tl-sunset .tl-rs-l { color:rgba(131,24,67,.6); }
[data-theme="light"] .tl-moonrise { background:linear-gradient(135deg,#ede9fe 0%,#c4b5fd 100%); }
[data-theme="light"] .tl-moonrise .tl-rs-t { color:#4c1d95; }
[data-theme="light"] .tl-moonrise .tl-rs-l { color:rgba(76,29,149,.6); }
[data-theme="light"] .tl-moonset { background:linear-gradient(135deg,#ede9fe 0%,#ddd6fe 70%); }
[data-theme="light"] .tl-moonset .tl-rs-t { color:#4c1d95; }
[data-theme="light"] .tl-moonset .tl-rs-l { color:rgba(76,29,149,.6); }
[data-theme="light"] .tl-mc { background:rgba(0,0,0,.03); }
[data-theme="light"] .tl-ev-neutral .tl-ev-dot { background:rgba(0,0,0,.3); }
[data-theme="light"] .tl-ev-line { background:rgba(0,0,0,.1); }
/* ── Samvat collapsible section ────────────────────────────────── */
.tl-samvat-toggle {
cursor:pointer; user-select:none; list-style:none;
display:flex; align-items:center; gap:5px;
font-size:11px; text-transform:uppercase; letter-spacing:.08em;
color:var(--ink-muted); font-weight:600; margin-bottom:0;
padding:4px 0; border-top:1px solid var(--border); margin-top:2px;
}
.tl-samvat-toggle::marker { display:none; }
.tl-samvat-toggle .tl-tog-arr { font-size:8px; transition:transform .2s; }
details[open] .tl-samvat-toggle .tl-tog-arr { transform:rotate(90deg); }
details.tl-samvat { margin-bottom:8px; }
details.tl-samvat[open] summary { margin-bottom:6px; }
/* ── Mundane Transit embed (collapsed by default -- see
mundane_embed_renderer.php) -- same rotating-arrow technique as
.tl-samvat-toggle above, own class so it starts CLOSED (no [open]
attribute in the markup) rather than tl-samvat's open-by-default. ── */
.mnd-emb-details { margin-bottom:8px; border-top:1px solid var(--border); padding-top:4px; }
.mnd-emb-summary {
cursor:pointer; user-select:none; list-style:none;
display:flex; align-items:center; gap:6px;
font-size:12px; color:var(--ink-muted); font-weight:600;
padding:4px 0;
}
.mnd-emb-summary::marker { display:none; }
.mnd-emb-arr { font-size:8px; transition:transform .2s; display:inline-block; }
details[open] .mnd-emb-summary .mnd-emb-arr { transform:rotate(90deg); }
.mnd-emb-body { padding-top:6px; display:flex; flex-direction:column; gap:10px; }
.mnd-emb-row { padding:8px 10px; border-radius:8px; background:var(--bg); border:1px solid var(--border); }
.mnd-emb-row-hdr { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:4px; }
.mnd-emb-planet { font-size:13px; font-weight:700; color:var(--ink); }
.mnd-emb-nak { font-size:12px; color:var(--ink-muted); }
.mnd-emb-badge { margin-left:auto; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:2px 8px; border-radius:999px; }
.mnd-emb-sev-low { background:var(--green-light); color:var(--green); border:1px solid var(--green); }
.mnd-emb-sev-moderate { background:var(--warn-bg); color:var(--warn-text); border:1px solid var(--warn-text); }
.mnd-emb-sev-high { background:var(--red-light); color:var(--red); border:1px solid var(--red); }
/* Solid maroon/cream pairing (not theme-linked, deliberately -- same
exact combination mundane.php's .mp-sev-critical already uses,
verified 8.1:1 contrast in this session's WCAG audit) so the top
band reads as visually distinct from HIGH in both themes, not just
a deeper shade of the same red. */
.mnd-emb-sev-critical { background:#8B1A1A; color:#F5EFE0; border:1px solid #8B1A1A; }
.mnd-emb-para { font-size:13px; line-height:1.5; color:var(--ink); margin:0; }
/* ── Personalize-Sankalpa sub-form (gotra/family/purpose) ─────── */
/* Every .skf-* element below sets its own `display` unconditionally
(flex/inline-flex for layout), which otherwise overrides the
browser's default `[hidden] { display:none }` UA rule -- author
styles always win over UA styles at equal specificity, so toggling
the `hidden` property from JS silently did nothing without this. */
.skf-wrap [hidden] { display:none !important; }
.skf-toggle {
display:inline-flex; align-items:center; gap:6px;
margin-top:10px; font-size:13px; font-weight:600;
background:linear-gradient(135deg, rgba(245,166,35,.16), rgba(245,166,35,.05));
border:1px solid rgba(245,166,35,.4); border-radius:20px;
padding:7px 16px; color:var(--saffron-dark); cursor:pointer;
transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.skf-toggle:hover { transform:translateY(-1px); box-shadow:0 4px 14px rgba(245,166,35,.25); background:rgba(245,166,35,.22); }
.skf-toggle:active { transform:translateY(0); }
.skf-toggle-ic { display:inline-block; transition:transform .2s ease; }
.skf-toggle.skf-open .skf-toggle-ic { transform:rotate(45deg); }
.skf-edit-btn {
display:inline-flex; align-items:center; gap:5px;
margin-top:10px; font-size:12px; font-weight:600;
background:transparent; border:1px solid var(--border); border-radius:16px;
padding:5px 13px; color:var(--ink-soft); cursor:pointer;
transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.skf-edit-btn:hover { border-color:var(--saffron-dark); color:var(--saffron-dark); background:rgba(245,166,35,.1); }
.skf-form {
margin-top:12px; display:flex; flex-direction:column; gap:10px;
max-width:100%; padding:14px; border-radius:16px;
background:rgba(255,255,255,.03);
border:1px solid var(--border);
animation:skfIn .25s ease both;
}
@keyframes skfIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }
[data-theme="light"] .skf-form { background:rgba(0,0,0,.02); }
.skf-section-label {
font-size:10px; text-transform:uppercase; letter-spacing:.08em;
color:var(--ink-muted); font-weight:700; margin-top:4px;
}
.skf-person-row, .skf-family-row { display:flex; flex-wrap:wrap; gap:8px; }
.skf-family-row { padding:10px; border-radius:12px; background:rgba(255,255,255,.02); border:1px dashed var(--border); }
.skf-family-rows { display:flex; flex-direction:column; gap:8px; }
[data-theme="light"] .skf-family-row { background:rgba(0,0,0,.015); }
.skf-form input[type="text"], .skf-form select {
flex:1 1 140px; width:auto; max-width:100%;
background:rgba(255,255,255,.04);
border:1px solid var(--border); border-radius:10px;
padding:9px 12px; font-size:13px; color:var(--ink);
outline:none; appearance:none; -webkit-appearance:none;
transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.skf-gotra { flex:1 1 140px; padding:5px 12px !important; font-size:12px !important; }
.skf-form select {
cursor:pointer;
background-image:linear-gradient(45deg, transparent 50%, var(--ink-muted) 50%), linear-gradient(135deg, var(--ink-muted) 50%, transparent 50%);
background-position:calc(100% - 16px) center, calc(100% - 11px) center;
background-size:5px 5px, 5px 5px; background-repeat:no-repeat;
padding-right:28px;
}
[data-theme="light"] .skf-form input[type="text"], [data-theme="light"] .skf-form select { background-color:rgba(0,0,0,.03); }
.skf-form input[type="text"]::placeholder { color:var(--ink-muted); }
.skf-form input[type="text"]:hover, .skf-form select:hover { border-color:rgba(245,166,35,.4); }
.skf-form input[type="text"]:focus, .skf-form select:focus {
border-color:var(--saffron-dark); background-color:rgba(245,166,35,.06);
box-shadow:0 0 0 3px rgba(245,166,35,.16);
}
.skf-check { font-size:13px; color:var(--ink-soft); display:flex; align-items:center; gap:7px; cursor:pointer; width:fit-content; }
.skf-check input[type="checkbox"] { accent-color:var(--saffron-dark); width:15px; height:15px; cursor:pointer; }
.skf-add-family {
align-self:flex-start; font-size:12px; font-weight:600;
background:transparent; border:1px dashed rgba(245,166,35,.4);
color:var(--saffron-dark); border-radius:10px; padding:6px 12px; cursor:pointer;
transition:background .15s ease, border-color .15s ease, transform .15s ease;
}
.skf-add-family:hover { background:rgba(245,166,35,.12); border-color:var(--saffron-dark); transform:translateY(-1px); }
.skf-remove-family {
flex:0 0 auto; width:34px; border-radius:10px;
border:1px solid var(--red-light); background:transparent; color:var(--red);
cursor:pointer; font-size:15px; line-height:1; transition:background .15s ease, transform .15s ease;
}
.skf-remove-family:hover { background:var(--red-light); transform:scale(1.06); }
.skf-submit {
align-self:flex-start; margin-top:2px;
font-size:13px; font-weight:700; letter-spacing:.02em;
background:linear-gradient(135deg, var(--saffron-dark), var(--saffron));
border:none; border-radius:20px; padding:10px 22px; color:#1A0800; cursor:pointer;
box-shadow:0 4px 16px rgba(245,166,35,.3);
transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.skf-submit:hover { transform:translateY(-1px); box-shadow:0 6px 22px rgba(245,166,35,.42); filter:brightness(1.05); }
.skf-submit:active { transform:translateY(0); }
.skf-result:not(:empty) {
font-size:14px; line-height:1.7; margin-top:10px;
padding:14px; border-radius:14px;
background:rgba(255,255,255,.03); border:1px solid rgba(245,166,35,.25);
animation:skfIn .25s ease both;
}
[data-theme="light"] .skf-result:not(:empty) { background:rgba(0,0,0,.02); }
/* ── Shared cx-* cross-card animations ───────────────────────── */
.cx-anim { animation:_cxCA 0.42s cubic-bezier(0.34,1.56,0.64,1) both; }
@keyframes _cxCA { from{opacity:0;transform:scale(0.92)} to{opacity:1;transform:none} }
/* ── Lost Item Oracle chat card ──────────────────────────────── */
.lio-msg-card { background:linear-gradient(160deg,rgba(90,20,160,.14),rgba(20,10,60,.1)); border:1px solid rgba(180,120,255,.25); }
.lio-card-icon { font-size:30px; line-height:1; margin-bottom:6px; }
.lio-card-headline { font-size:1.25em; font-weight:700; margin-bottom:2px; }
.lio-card-subline { font-size:.92em; opacity:.85; margin-bottom:10px; }
.lio-card-body p { font-size:.94em; line-height:1.6; margin-bottom:9px; }
.lio-card-footer { font-size:.72em; opacity:.55; text-align:right; margin-top:6px; font-style:italic; }
.lio-inline-form .lio-in-desc { width:100%; min-height:56px; resize:vertical; background:rgba(255,255,255,.06); border:1px solid var(--border); border-radius:10px; color:var(--ink); font:inherit; font-size:.9em; padding:8px 10px; margin:6px 0 10px; }
.lio-inline-form .lio-in-loc { width:100%; background:rgba(255,255,255,.06); border:1px solid var(--border); border-radius:10px; color:var(--ink); font:inherit; font-size:.9em; padding:8px 10px; margin:2px 0 10px; }
.lio-chip-row { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.lio-chip { background:rgba(255,255,255,.06); border:1px solid var(--border); border-radius:20px; padding:5px 12px; font-size:.82em; color:var(--ink); cursor:pointer; transition:all .15s; }
.lio-chip:hover { border-color:#B478FF; }
.lio-chip.on { background:rgba(180,120,255,.28); border-color:#B478FF; font-weight:600; }
.lio-ask-btn { width:100%; padding:10px; background:linear-gradient(135deg,#7A2CC8,#3A1090); border:none; border-radius:10px; color:#fff; font-size:.95em; font-weight:700; cursor:pointer; transition:opacity .15s; }
.lio-ask-btn:hover { opacity:.88; }
.lio-ask-btn:disabled { opacity:.6; cursor:default; }
.lio-astro-basis { margin-top:14px; padding-top:12px; border-top:1px dashed rgba(180,120,255,.3); }
.lio-astro-title { font-size:.78em; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:#B478FF; margin-bottom:4px; }
.lio-astro-intro { font-size:.82em; opacity:.7; line-height:1.5; margin-bottom:10px; }
.lio-astro-chip .lio-astro-tag { font-size:9.5px; text-transform:uppercase; letter-spacing:.05em; margin-top:3px; opacity:.7; }
.lio-astro-loc { font-size:.82em; opacity:.8; line-height:1.6; margin-top:10px; }
.lio-astro-timing { margin-top:10px; background:rgba(180,120,255,.08); border:1px solid rgba(180,120,255,.2); border-radius:8px; padding:8px 10px; }
.lio-astro-timing .cic-l { font-size:9.5px; text-transform:uppercase; letter-spacing:.05em; opacity:.65; margin-bottom:2px; }
.lio-astro-timing .cic-v { font-size:.95em; font-weight:700; color:#B478FF; }
[data-theme="light"] .lio-msg-card { background:linear-gradient(160deg,rgba(180,120,255,.08),rgba(255,255,255,.4)); border-color:rgba(122,44,200,.25); }
[data-theme="light"] .lio-inline-form .lio-in-desc,
[data-theme="light"] .lio-inline-form .lio-in-loc,
[data-theme="light"] .lio-chip { background:rgba(0,0,0,.03); }
/* Info chips — tithi/nakshatra/yoga/timing row in vrat/festival cards */
.cx-info-strip { display:grid; grid-template-columns:repeat(auto-fit,minmax(88px,1fr)); gap:5px; margin-bottom:9px; }
.cx-info-chip { background:rgba(255,255,255,.05); border:1px solid var(--border); border-radius:8px; padding:6px 9px;
animation:_cxChI 0.32s cubic-bezier(0.22,1,0.36,1) both;
animation-delay:calc(var(--cx-idx,0) * 40ms + 0.22s); }
@keyframes _cxChI { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
.cx-info-chip .cic-l { font-size:9.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-muted); font-weight:600; margin-bottom:3px; }
.cx-info-chip .cic-v { font-size:13px; font-weight:600; color:var(--ink); }
/* Rashi / horoscope blocks in predictions card */
.cx-rashi { border:1px solid var(--border); border-radius:10px; padding:9px 12px; margin-bottom:7px;
animation:_cxRS 0.32s cubic-bezier(0.22,1,0.36,1) both;
animation-delay:calc(var(--cx-idx,0) * 38ms + 0.18s); }
@keyframes _cxRS { from{opacity:0;transform:scale(0.95)} to{opacity:1;transform:none} }
.cx-rashi-head { font-weight:700; color:var(--saffron-dark); margin-bottom:5px; display:flex; align-items:center; gap:9px; }
.cx-rashi-glyph { font-size:22px; line-height:1; }
.cx-rashi-name { font-size:14px; }
.cx-rashi-text { font-size:13px; color:var(--ink); line-height:1.5; }
.cx-rashi-sub { font-size:12.5px; color:var(--ink); line-height:1.5; margin-top:5px; }
.cx-rashi-sublbl { font-weight:600; color:var(--ink-muted); }
/* Vrat/shraddha date-cell row slide-in */
.cx-vrat-row { animation:_cxVR 0.32s cubic-bezier(0.22,1,0.36,1) both;
animation-delay:calc(var(--cx-idx,0) * 40ms + 0.18s); }
@keyframes _cxVR { from{opacity:0;transform:translateX(-10px)} to{opacity:1;transform:none} }
[data-theme="light"] .cx-info-chip { background:rgba(0,0,0,.025); }
[data-theme="light"] .cx-rashi { background:#fff; }
/* Mahapata card rows */
.mahapata-msg-card .mp-row { display:flex; align-items:baseline; justify-content:space-between; gap:14px;
font-size:13px; padding:7px 0; border-bottom:1px solid rgba(255,255,255,.08); }
.mahapata-msg-card .mp-row:last-of-type { border-bottom:none; }
.mahapata-msg-card .mp-label { color:rgba(255,255,255,.6); white-space:nowrap; }
.mahapata-msg-card .mp-val { text-align:right; }
[data-theme="light"] .mahapata-msg-card .mp-row { border-bottom-color:rgba(0,0,0,.08); }
[data-theme="light"] .mahapata-msg-card .mp-label { color:rgba(26,8,0,.6); }
/* Chogadia */
.chog-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
gap: 5px;
margin-bottom: 8px;
}
.chog-item {
padding: 9px 10px;
border-radius: 8px;
/* Same scale+opacity entrance as .cx-anim (card-level), applied per
tile with a staggered delay so a grid (Chogadia/Hora/Gowri/Nalla
Neram/Chogadia Nalla Neram) cascades in tile-by-tile instead of
popping in all at once -- owner 2026-08-30. Reuses the existing
_cxCA keyframe (scale(0.92)->none, opacity 0->1) rather than a new
one, for visual consistency with the rest of the chat card. */
animation: _cxCA 0.34s cubic-bezier(0.34,1.56,0.64,1) both;
}
.chog-grid .chog-item:nth-child(1) { animation-delay: .02s; }
.chog-grid .chog-item:nth-child(2) { animation-delay: .05s; }
.chog-grid .chog-item:nth-child(3) { animation-delay: .08s; }
.chog-grid .chog-item:nth-child(4) { animation-delay: .11s; }
.chog-grid .chog-item:nth-child(5) { animation-delay: .14s; }
.chog-grid .chog-item:nth-child(6) { animation-delay: .17s; }
.chog-grid .chog-item:nth-child(7) { animation-delay: .20s; }
.chog-grid .chog-item:nth-child(8) { animation-delay: .23s; }
.chog-grid .chog-item:nth-child(9) { animation-delay: .26s; }
.chog-grid .chog-item:nth-child(10) { animation-delay: .29s; }
.chog-grid .chog-item:nth-child(11) { animation-delay: .32s; }
.chog-grid .chog-item:nth-child(n+12) { animation-delay: .35s; }
.chog-item .cn {
font-size: 14px;
font-weight: 600;
margin-bottom: 2px;
}
.chog-item .ct {
font-size: 10px;
opacity: 0.8;
}
.chog-item .cr {
font-size: 10px;
opacity: 0.65;
margin-top: 2px;
}
.chog-best {
background: var(--green-light);
color: var(--green);
}
.chog-good {
background: rgba(26,107,174,0.2);
color: #60AFFF;
}
.chog-neutral {
background: var(--bg);
color: var(--ink-soft);
border: 1px solid var(--border);
}
.chog-bad {
background: var(--warn-bg);
color: var(--warn-text);
}
.chog-worst {
background: var(--red-light);
color: var(--red);
}
/* Lagna */
.lagna-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 5px;
margin-bottom: 8px;
}
.lagna-item {
padding: 9px 11px;
border-radius: 8px;
background: var(--bg);
border: 1px solid var(--border);
}
@keyframes lagnaShake {
0%, 100% { transform: translateX(0); }
20% { transform: translateX(-3px); }
40% { transform: translateX(3px); }
60% { transform: translateX(-2px); }
80% { transform: translateX(2px); }
}
.lagna-item:hover,
.lagna-item:active {
animation: lagnaShake 0.4s ease-in-out;
}
.lagna-item .ln {
font-size: 14px;
font-weight: 600;
}
.lagna-item .lt {
font-size: 11px;
color: var(--ink-muted);
margin-top: 2px;
}
.lagna-item .lt.lagna-ashtama,
.lagna-item .lt.lagna-panchaka-bad {
color: var(--warn-text);
}
.lagna-item .lt.lagna-panchaka-good {
color: var(--green);
}
.balam-box {
background: var(--bg);
border-radius: 8px;
padding: 8px 12px;
font-size: 13px;
color: var(--ink-soft);
line-height: 1.7;
margin-bottom: 8px;
border: 1px solid var(--border);
}
.meta-row {
display: flex;
gap: 6px;
flex-wrap: wrap;
font-size: 12px;
margin-bottom: 8px;
}
.meta-row span {
background: var(--bg);
padding: 4px 10px;
border-radius: 20px;
border: 1px solid var(--border);
color: var(--ink-muted);
}
.meta-row .vrat {
background: var(--saffron-light);
color: var(--saffron-dark);
border-color: var(--saffron);
font-weight: 500;
font-size: 13px;
}
.city-chooser {
background: var(--card);
border: 1px solid var(--border);
border-radius: 16px;
border-top-left-radius: 4px;
padding: 14px 16px;
max-width: 440px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.city-chooser p {
font-size: 13px;
color: var(--ink-muted);
margin-bottom: 10px;
}
.city-choice-btn {
display: block;
width: 100%;
text-align: left;
font-family: 'DM Sans', sans-serif;
font-size: 13px;
padding: 9px 12px;
margin-bottom: 6px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 8px;
cursor: pointer;
color: var(--ink);
transition: all 0.15s;
}
.city-choice-btn:hover {
background: var(--saffron-light);
border-color: var(--saffron);
color: var(--saffron-dark);
}
.typing {
display: flex;
gap: 5px;
align-items: center;
padding: 4px 0;
}
.typing span {
width: 7px;
height: 7px;
background: var(--ink-muted);
border-radius: 50%;
animation: bounce 1.2s infinite;
}
.typing span:nth-child(2) {
animation-delay: 0.2s;
}
.typing span:nth-child(3) {
animation-delay: 0.4s;
}
@keyframes bounce {
0%,
60%,
100% {
transform: translateY(0);
}
30% {
transform: translateY(-6px);
}
}
.suggestions {
display: flex;
gap: 6px;
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding-block: 8px;
padding-inline: max(1rem, calc((100% - 1100px) / 2));
background: var(--qb);
border-top: 1px solid var(--border);
flex-shrink: 0;
align-items: center;
/* #suggestions-bar renders empty server-side and buildSuggestions()
fills it with buttons on DOMContentLoaded, on every single page
load -- without a reserved height the row grows from ~16px (just
this padding) to its real ~40px, pushing .input-area down every
time. Confirmed live via a Cloudflare Core Web Vitals report:
#suggestions-bar/.input-area were the top two "Poor" CLS elements
on panchang.php, the site's highest-traffic page. Reserving the
filled-state height up front removes the jump entirely. */
min-height: 44px;
}
.suggestions::-webkit-scrollbar {
display: none;
}
.suggestions.more-r {
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 30px), transparent);
mask-image: linear-gradient(to right, #000 calc(100% - 30px), transparent);
}
.suggestions.more-l:not(.more-r) {
-webkit-mask-image: linear-gradient(to right, transparent, #000 30px);
mask-image: linear-gradient(to right, transparent, #000 30px);
}
.suggestions.more-l.more-r {
-webkit-mask-image: linear-gradient(to right, transparent, #000 30px, #000 calc(100% - 30px), transparent);
mask-image: linear-gradient(to right, transparent, #000 30px, #000 calc(100% - 30px), transparent);
}
/* Owner-reported 2026-07-31: flex-wrap left whichever button ended up
last (the account chip, then the "?" help button after a reorder)
orphaned onto its own line depending on viewport/username width --
whack-a-mole with pure reordering. Real fix: always horizontal-
scroll (never wrap, so nothing is ever "last" in a way that can
orphan), same mechanism already used on touch devices. The
[data-tip] hover tooltip for buttons IN THIS BAR is handled by JS
instead of the sitewide CSS ::after/::before (see _zqTip below) --
those pop up via position:absolute relative to the button, which
still gets clipped by this box's now-necessary overflow-x:auto
(browsers force overflow-y non-visible too once overflow-x isn't
visible); a position:fixed tooltip appended to the body element escapes that
clipping entirely.
Owner also hit this on .card-tools buttons near the top-right of a
card (2026-07-31) -- a DIFFERENT root cause (viewport-edge overflow,
not a scrolling ancestor) but the same fix works, since the JS
tooltip already clamps horizontally to stay on-screen. Rather than
maintain two parallel tooltip systems, the CSS pseudo-tooltip below
is now suppressed sitewide (on this page) and the JS handler is
delegated on document.body instead of just #suggestions-bar. */
[data-tip]::after,
[data-tip]::before {
display: none;
}
.suggestion-btn {
font-family: 'DM Sans', sans-serif;
font-size: 12px;
padding: 5px 12px;
background: rgba(255,255,255,0.07);
border: 1px solid var(--border);
border-radius: 20px;
cursor: pointer;
color: var(--ink-soft);
transition: all 0.15s;
white-space: nowrap;
flex-shrink: 0;
}
/* JS-driven tooltip for #suggestions-bar buttons (see _zqTip JS) --
position:fixed so it escapes the scroll container's clipping;
styled to match the sitewide [data-tip]::after/::before look. */
#zq-tip {
position: fixed;
z-index: 1000;
background: rgba(0, 0, 0, 0.85);
color: white;
font-size: 11px;
padding: 4px 8px;
border-radius: 6px;
white-space: nowrap;
pointer-events: none;
opacity: 0;
transition: opacity 0.15s;
}
#zq-tip.show { opacity: 1; }
#zq-tip::after {
content: '';
position: absolute;
left: 50%;
transform: translateX(-50%);
border: 4px solid transparent;
}
#zq-tip.pos-above::after { top: 100%; border-top-color: rgba(0, 0, 0, 0.85); }
#zq-tip.pos-below::after { bottom: 100%; border-bottom-color: rgba(0, 0, 0, 0.85); }
@media(max-width:600px) { #zq-tip { display: none; } }
.suggestion-btn:hover {
background: var(--saffron-light);
border-color: var(--saffron);
color: var(--saffron-dark);
}
/* Festival quick-query chip bar */
.fql-bar{display:flex;align-items:center;gap:7px;overflow-x:auto;padding-block:7px;padding-inline:max(14px, calc((100% - 1100px) / 2));border-top:1px solid rgba(255,255,255,.06);flex-shrink:0;scrollbar-width:none;}
.fql-bar::-webkit-scrollbar{display:none}
.fql-lbl{font-size:10px;letter-spacing:.09em;color:rgba(255,255,255,.35);white-space:nowrap;flex-shrink:0;text-transform:uppercase;}
.fql-chip{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:14px;color:rgba(255,255,255,.72);font-size:12px;padding:5px 11px;cursor:pointer;white-space:nowrap;font-family:inherit;transition:background .15s,border-color .15s;flex-shrink:0;}
.fql-chip:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22);color:#fff;}
[data-theme="light"] .fql-bar{border-top-color:rgba(0,0,0,.1);}
[data-theme="light"] .fql-lbl{color:rgba(26,8,0,.6);}
[data-theme="light"] .fql-chip{background:rgba(180,80,10,.05);border-color:rgba(180,80,10,.2);color:rgba(26,8,0,.72);}
[data-theme="light"] .fql-chip:hover{background:rgba(180,80,10,.12);border-color:rgba(180,80,10,.35);color:#7A2000;}
/* Owner: "no way to scroll there [on desktop], mobile easy with finger"
-- .fql-bar's scrollbar is deliberately hidden (scrollbar-width:none
above), so a mouse user has zero visual hint it scrolls at all.
Hover-revealed arrow buttons, desktop-only (@media hover:none hides
them wherever :hover doesn't really apply, i.e. touch devices, which
already scroll fine by finger). */
.fql-wrap{position:relative}
.fql-nav{position:absolute;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:50%;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.15);color:#fff;font-size:13px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .15s;z-index:2;}
.fql-wrap:hover .fql-nav{opacity:1;pointer-events:auto}
.fql-nav-l{left:2px}
.fql-nav-r{right:2px}
[data-theme="light"] .fql-nav{background:rgba(255,255,255,.88);border-color:rgba(0,0,0,.15);color:#1A0800;}
@media (hover:none){.fql-nav{display:none}}
/* Hide extra tiles on mobile — keep only essential */
@media(max-width:600px) {
.suggestion-btn.hide-mobile {
display: none;
}
/* Toolbar — bigger touch targets, popover sized for thumb taps */
.card-tool-btn {
min-width: 40px;
min-height: 40px;
padding: 8px 10px;
font-size: 16px;
}
.copy-btn {
min-height: 40px;
padding: 8px 12px;
font-size: 12px;
}
.card-lang-pop {
grid-template-columns: repeat(4, auto);
padding: 8px;
gap: 6px;
}
.card-lang-pop .clb {
min-width: 40px;
min-height: 36px;
font-size: 15px;
padding: 6px 8px;
}
}
.help-btn {
background: rgba(255,255,255,0.12);
color: white;
border-color: rgba(255,255,255,0.2);
margin-left: auto;
}
.help-btn:hover {
background: rgba(255,255,255,0.22);
border-color: rgba(255,255,255,0.3);
color: white;
}
.bookmark-btn {
background: var(--green-light);
color: var(--green);
border-color: var(--green);
}
.share-btn {
background: rgba(26,107,174,0.18);
color: #60AFFF;
border-color: rgba(26,107,174,0.5);
}
.reset-btn {
background: rgba(230,81,0,0.15);
color: #FF8A50;
border-color: rgba(230,81,0,0.5);
}
.help-tab {
font-family: 'DM Sans', sans-serif;
font-size: 12px;
padding: 8px 14px;
background: none;
border: none;
border-bottom: 2px solid transparent;
cursor: pointer;
color: var(--ink-muted);
white-space: nowrap;
transition: all 0.15s;
}
.help-tab:hover {
color: var(--ink);
background: var(--bg);
}
.help-tab.active {
color: var(--saffron-dark);
border-bottom-color: var(--saffron);
font-weight: 500;
}
.help-page {
animation: fadeIn 0.15s ease;
}
.help-tip {
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid var(--border);
font-size: 12px;
color: var(--ink-muted);
line-height: 1.8;
}
.help-section {
margin-bottom: 14px;
}
.help-section-title {
font-size: 12px;
font-weight: 600;
color: var(--ink);
margin-bottom: 8px;
padding-bottom: 4px;
border-bottom: 1px solid var(--border);
}
.help-items {
display: flex;
flex-direction: column;
gap: 6px;
}
.help-item {
display: flex;
align-items: baseline;
gap: 10px;
flex-wrap: wrap;
}
.help-cmd {
font-size: 12px;
font-weight: 500;
background: var(--saffron-light);
color: var(--saffron-dark);
padding: 2px 8px;
border-radius: 6px;
white-space: nowrap;
font-family: monospace;
}
.help-desc {
font-size: 12px;
color: var(--ink-muted);
}
#help-overlay {
display: none;
}
.input-area {
padding-block-start: 10px;
padding-block-end: 28px;
padding-inline: max(1.5rem, calc((100% - 1600px) / 2));
background: var(--card);
border-top: 1px solid var(--border);
display: flex;
gap: 10px;
flex-shrink: 0;
position: relative;
z-index: 1;
}
.input-area input {
flex: 1;
font-family: 'DM Sans', sans-serif;
font-size: 16px;
padding: 10px 14px;
border: 1px solid var(--border);
border-radius: 24px;
outline: none;
background: var(--bg);
color: var(--ink);
color-scheme: dark;
transition: border-color 0.15s;
-webkit-appearance: none;
appearance: none;
}
.input-area input::placeholder { color: var(--ink-muted); }
/* type=search is used to dodge iOS Keychain / Chrome password autofill;
strip the default magnifier + clear button so it looks like a text box */
.input-area input::-webkit-search-decoration,
.input-area input::-webkit-search-cancel-button,
.input-area input::-webkit-search-results-button,
.input-area input::-webkit-search-results-decoration {
-webkit-appearance: none;
appearance: none;
display: none;
}
.input-area input:focus {
border-color: var(--saffron);
}
.input-wrap {
flex: 1;
position: relative;
}
.input-wrap input {
width: 100%;
box-sizing: border-box;
font-size: max(16px, 1em); /* 16px or more: iOS does not zoom in on focus, so the page can allow zoom (#489) */
}
.autocomplete {
position: absolute;
left: 0;
right: 0;
bottom: calc(100% + 6px);
background: var(--card);
border: 1px solid var(--border);
border-radius: 12px;
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
overflow: hidden;
z-index: 50;
max-height: 250px;
overflow-y: auto;
}
.ac-item {
padding: 8px 14px;
font-size: 14px;
color: var(--ink);
cursor: pointer;
transition: background 0.1s;
font-family: 'DM Sans', sans-serif;
border-bottom: 1px solid var(--border);
}
.ac-item:last-child {
border-bottom: none;
}
.ac-item.active,
.ac-item:hover {
background: linear-gradient(90deg, #5a0e0e 0%, #8a3e0e 100%);
color: white;
}
.send-btn {
width: 40px;
height: 40px;
background: var(--saffron);
border: none;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.send-btn:hover {
background: var(--saffron-dark);
}
.send-btn svg {
width: 16px;
height: 16px;
fill: white;
}
/* Voice input button */
/* Phone history ▲▼ (touch screens; shown by _zhV()) */
.hist-nav { display: flex; flex-direction: column; gap: 3px; flex-shrink: 0; }
.hist-nav[hidden] { display: none; }
.hist-nav button { width: 34px; height: 19px; padding: 0; border: 1px solid var(--border); border-radius: 7px; background: transparent; color: var(--ink-soft); font-size: 10px; line-height: 1; cursor: pointer; }
.hist-nav button:active { background: var(--saffron-light); color: var(--saffron-dark); }
.mic-btn {
width: 40px;
height: 40px;
background: transparent;
border: 1px solid var(--border);
color: var(--ink-soft);
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all 0.2s;
}
.mic-btn:hover {
background: var(--saffron-light);
border-color: var(--saffron);
color: var(--saffron-dark);
}
.mic-btn.listening {
background: #6B1F1F;
border-color: #6B1F1F;
color: white;
animation: mic-pulse 1.2s ease-in-out infinite;
}
@keyframes mic-pulse {
0%,
100% {
box-shadow: 0 0 0 0 rgba(107, 31, 31, 0.6);
}
50% {
box-shadow: 0 0 0 10px rgba(107, 31, 31, 0);
}
}
/* Mic in "got it, sending in 1.5s" pause state — saffron-tinted */
.mic-btn.paused {
background: rgba(245,166,35,0.2);
border-color: rgba(245,166,35,0.5);
color: #F5A623;
animation: mic-paused 1.5s linear forwards;
}
@keyframes mic-paused {
0% {
box-shadow: inset 0 -100% 0 rgba(184, 134, 11, 0.25);
}
100% {
box-shadow: inset 0 0 0 rgba(184, 134, 11, 0.25);
}
}
/* While capturing voice: tint the input border maroon so user sees we're listening */
.input-wrap.voice-active input {
border-color: #6B1F1F;
background: rgba(107, 31, 31, 0.04);
}
/* "Did you mean?" alternatives row, appears above the input */
.voice-chips {
position: absolute;
left: 0;
right: 0;
bottom: calc(100% + 6px);
display: flex;
gap: 6px;
flex-wrap: wrap;
align-items: center;
z-index: 50;
padding: 6px;
background: var(--card);
border: 1px solid var(--border);
border-radius: 12px;
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.1);
}
.voice-chips-label {
font-size: 11px;
color: var(--ink-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 0 4px;
font-weight: 600;
}
.voice-chip {
background: var(--saffron-light);
border: 1px solid var(--saffron);
color: var(--ink);
padding: 5px 12px;
border-radius: 14px;
font-size: 13px;
cursor: pointer;
font-family: 'DM Sans', sans-serif;
transition: all 0.15s;
white-space: nowrap;
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
}
.voice-chip:hover {
background: linear-gradient(90deg, #5a0e0e 0%, #8a3e0e 100%);
border-color: #8a3e0e;
color: white;
}
.icon-btn {
width: 36px;
height: 36px;
background: none;
border: 1px solid var(--border);
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--ink-muted);
transition: all 0.15s;
}
.icon-btn:hover {
border-color: var(--saffron);
color: var(--saffron);
}
.icon-btn svg {
width: 16px;
height: 16px;
}
/* ---- TABLET (601px - 1024px) ---- */
@media(min-width:601px) and (max-width:1024px) {
header {
padding: calc(var(--sat, env(safe-area-inset-top, 0px)) + 0.7rem) 1.5rem 0.7rem;
}
.header-text h1, .header-text .hdr-h {
font-size: 1.05rem;
}
.q-ar {
padding: 1rem 1.5rem;
}
/* Card */
.card-body {
padding: 10px 14px;
}
.rise-grid {
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
.rise-item .rv {
font-size: 16px;
}
/* Panch — 3 columns on tablet */
.panch-grid {
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.panch-item .pv {
font-size: 15px;
}
.panch-item.tithi .pv {
font-size: 18px;
}
/* Timings — 3 columns */
.timings-grid {
grid-template-columns: repeat(3, 1fr);
gap: 7px;
}
.t-item .tv {
font-size: 14px;
}
/* Chogadia — 4 columns */
.chog-grid {
grid-template-columns: repeat(4, 1fr);
gap: 7px;
}
.chog-item .cn {
font-size: 15px;
}
.chog-item .ct {
font-size: 11px;
}
.chog-item .cr {
font-size: 11px;
}
/* Lagna — 3 columns */
.lagna-grid {
grid-template-columns: repeat(3, 1fr);
gap: 7px;
}
.lagna-item .ln {
font-size: 15px;
}
/* Festivals */
.fest-tag {
font-size: 13px;
padding: 4px 10px;
}
.meta-row .vrat {
font-size: 13px;
}
/* Suggestions */
.suggestion-btn {
font-size: 13px;
padding: 6px 14px;
}
}
/* ---- MOBILE (max 600px) ---- */
@media(max-width:600px) {
/* Header */
header {
/* status-bar room kept here too: this rule comes after the base one (#276) */
padding: calc(var(--sat, env(safe-area-inset-top, 0px)) + 8px) 12px 8px;
gap: 8px;
}
.header-icon {
width: 32px;
height: 32px;
font-size: 1.1rem;
}
.header-text h1, .header-text .hdr-h {
font-size: 0.85rem;
}
.header-text p {
display: none;
}
/* Chat */
.q-ar {
padding: 10px 10px;
}
.msg {
gap: 8px;
}
.msg-avatar {
width: 28px;
height: 28px;
font-size: 12px;
}
/* Card */
.msg-card {
border-radius: 12px;
}
.card-body {
padding: 8px 10px;
}
.card-header {
padding: 10px 12px;
}
.festival-msg-card .card-body {
padding: 10px 12px;
}
.festival-msg-card .card-tools {
padding: 8px 12px 12px;
}
.date-str {
font-size: 1rem;
}
/* Rise grid — 2x2 on mobile */
.rise-grid {
grid-template-columns: repeat(2, 1fr);
gap: 6px;
margin-bottom: 10px;
}
.rise-item {
padding: 8px 10px;
}
.rise-item .rv {
font-size: 16px;
}
/* Panch grid — 2 columns on mobile */
.panch-grid {
grid-template-columns: repeat(2, 1fr);
gap: 6px;
margin-bottom: 10px;
}
.panch-item {
padding: 9px 10px;
}
.panch-item .pv {
font-size: 15px;
}
.panch-item.tithi .pv {
font-size: 17px;
}
/* Timings — 2 columns */
.timings-grid {
grid-template-columns: repeat(2, 1fr);
gap: 6px;
margin-bottom: 10px;
}
.t-item {
padding: 9px 10px;
}
.t-item .tv {
font-size: 13px;
}
/* Chogadia — 2 columns */
.chog-grid {
grid-template-columns: repeat(2, 1fr);
gap: 6px;
margin-bottom: 10px;
}
.chog-item {
padding: 9px 10px;
}
.chog-item .cn {
font-size: 14px;
}
.chog-item .ct {
font-size: 11px;
}
.chog-item .cr {
font-size: 11px;
}
/* Lagna — 2 columns */
.lagna-grid {
grid-template-columns: repeat(2, 1fr);
gap: 6px;
margin-bottom: 10px;
}
.lagna-item .ln {
font-size: 14px;
}
/* Festivals */
.fest-day {
padding: 8px 10px;
}
.fest-tag {
font-size: 13px;
padding: 4px 10px;
}
/* Section labels */
.section-label {
font-size: 11px;
margin-bottom: 6px;
}
/* Vrat badges bigger on mobile */
.meta-row .vrat {
font-size: 13px;
padding: 5px 12px;
}
/* Suggestions sizing on small screens. Layout (wrap vs swipe-row) is
decided by input type below, not width. */
.suggestions {
padding: 7px 10px;
gap: 6px;
}
.suggestion-btn {
font-size: 13px;
padding: 6px 12px;
}
/* Input */
.input-area {
padding: 8px 10px;
}
.input-area input {
font-size: 16px;
}
/* prevent zoom on iOS */
}
.fest-list { display:flex; flex-direction:column; gap:5px; }
.fest-day { display:grid; grid-template-columns:auto 1fr; gap:0 10px;
padding:9px 10px; border-radius:10px; background:var(--bg); border:1px solid var(--border);
animation:_cxFD 0.32s cubic-bezier(0.22,1,0.36,1) both;
animation-delay:calc(var(--cx-idx,0) * 42ms + 0.18s); }
@keyframes _cxFD { from{opacity:0;transform:translateX(-14px)} to{opacity:1;transform:none} }
.fest-day-num { font-size:11px; font-weight:700; color:var(--saffron-dark);
white-space:nowrap; padding-top:2px; display:flex; align-items:flex-start; gap:5px; }
.fest-day-num::before { content:''; display:block; width:6px; height:6px; border-radius:50%;
background:var(--saffron); box-shadow:0 0 5px rgba(245,166,35,.5);
margin-top:2px; flex-shrink:0; }
.fest-items { display:flex; flex-wrap:wrap; gap:4px; }
.fest-tag { display:inline-block; padding:3px 9px; border-radius:10px; font-size:12px; font-weight:500;
background:rgba(175,90,20,.12); border:1px solid rgba(175,90,20,.2); color:var(--ink);
transition:background .15s; }
.fest-tag:hover { background:rgba(175,90,20,.22); }
/* Suggestion-bar: single swipeable/scrollable row + edge-fade-mask on
every input type now (base .suggestions rule above) -- see the
comment there for the two prior attempts (universal-scroll-broke-
tooltips, then reorder-just-moved-the-orphan-elsewhere) this
replaced. This block used to hold the same rules scoped to
touch-only; now redundant since they're unscoped above. */
/* ── Kundli form card ── */
.kundli-form-card{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.12);border-radius:10px;padding:14px;max-width:340px}
.kfc-header{font-weight:700;color:#F5A623;margin-bottom:10px;font-size:.95rem}
.kfc-row{margin-bottom:8px;display:flex;gap:6px;align-items:center}
.kfc-name,.kfc-cityinput{width:100%;padding:6px 10px;border:1px solid rgba(255,255,255,0.18);border-radius:6px;font-size:.88rem;box-sizing:border-box;background:rgba(255,255,255,0.06);color:#fff;font-family:'DM Sans',sans-serif}
.kfc-day,.kfc-mon{padding:5px 4px;border:1px solid rgba(255,255,255,0.18);border-radius:6px;font-size:.85rem;background:rgba(255,255,255,0.06);color:#fff}
.kfc-yr,.kfc-hr,.kfc-min,.kfc-sec{width:60px;padding:5px 6px;border:1px solid rgba(255,255,255,0.18);border-radius:6px;font-size:.85rem;text-align:center;background:rgba(255,255,255,0.06);color:#fff}
.kfc-hint-time{font-size:.75rem;color:rgba(255,255,255,0.45);margin:-4px 0 4px;padding:0 8px}
.kfc-hint{font-size:.72rem;color:rgba(255,255,255,0.4)}
.kfc-hint-bar{background:rgba(245,166,35,0.1);border:1px solid rgba(245,166,35,0.3);border-radius:6px;padding:5px 9px;font-size:.78rem;color:#F5A623;margin-bottom:8px}
.kfc-submit{width:100%;background:#6B1F1F;color:#fff;border:none;border-radius:7px;padding:9px;font-size:.9rem;cursor:pointer;margin-top:6px}
.kfc-submit:disabled{opacity:.6;cursor:default}
.kfc-drop{position:absolute;top:100%;left:0;right:0;background:#1A0B2E;border:1px solid rgba(255,255,255,0.15);border-radius:6px;z-index:99;max-height:180px;overflow-y:auto;display:none;box-shadow:0 4px 20px rgba(0,0,0,.5)}
.kfc-drop-item{padding:7px 10px;cursor:pointer;font-size:.82rem;border-bottom:1px solid rgba(255,255,255,0.08);color:rgba(255,255,255,0.8)}
.kfc-drop-item:hover{background:rgba(245,166,35,0.15)}
.kfc-sublabel{font-size:.68rem;font-weight:600;color:rgba(255,255,255,0.5);text-transform:uppercase;letter-spacing:.04em;margin:4px 0 4px}
.kfc-dst .kfc-dsth,.kfc-dst .kfc-dstm{width:60px;padding:5px 6px;border:1px solid rgba(255,255,255,0.18);border-radius:6px;font-size:.85rem;text-align:center;background:rgba(255,255,255,0.06);color:#fff}
.kfc-lmt-row{display:flex;align-items:center;gap:6px;font-size:.78rem;color:rgba(255,255,255,0.7);margin:2px 0 8px;cursor:pointer}
/* ── Kundli answer card (rashi/nakshatra only) ── */
.kundli-answer-card{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);border-left:3px solid #F5A623;padding:10px 14px;border-radius:0 8px 8px 0;font-size:.9rem;line-height:1.6;color:var(--ink)}
/* ── Direct-compute info bar (name/date/time/city, shown above the card) ── */
.kundli-info-bar{display:flex;flex-wrap:wrap;gap:10px;width:auto;max-width:560px;margin:0 0 8px;padding:8px 12px;background:rgba(139,26,26,0.12);border:1px solid rgba(212,175,55,0.35);border-radius:8px;font-size:.8rem;color:var(--ink)}
.kundli-info-bar span{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.kundli-info-bar em{opacity:.65;font-style:normal;font-size:.72rem}
[data-theme="light"] .kundli-info-bar{background:rgba(232,98,26,0.08);border-color:rgba(212,175,55,0.45)}
/* ── Full kundli card ── */
.kundli-card{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);border-radius:10px;overflow:hidden;max-width:560px;font-size:.85rem}
.kc-hdr{background:#6B1F1F;color:#fff;padding:8px 12px;font-size:.82rem}
.kc-body{display:flex;flex-direction:column;gap:8px;padding:8px 10px}
.kc-charts{display:flex;gap:8px;justify-content:center}
.kc-clbl{font-size:.6rem;color:rgba(255,255,255,0.4);text-align:center;margin-top:2px}
.kc-info{display:flex;flex-wrap:wrap;gap:4px 10px;padding:4px 0}
.kc-info span{display:flex;flex-direction:column}
.kc-info label{font-size:.62rem;color:rgba(255,255,255,0.4);text-transform:uppercase}
.kc-dasha{padding:6px 10px;background:rgba(255,255,255,0.06);border-radius:6px;font-size:.8rem;color:var(--ink)}
.kc-content{padding:0 10px 10px}
.kc-preds{padding:4px 0 4px}
.kc-pred{font-size:.78rem;line-height:1.5;color:rgba(255,255,255,0.8);margin:3px 0;padding-left:8px;border-left:2px solid rgba(255,255,255,0.2);overflow-wrap:break-word;word-break:break-word}
.kc-dtl summary{font-size:.75rem;color:#F5A623;cursor:pointer;padding:4px 0;font-weight:600}
.kc-ptbl{width:100%;border-collapse:collapse;font-size:.72rem;margin-top:4px}
.kc-ptbl th{background:rgba(255,255,255,0.1);color:#F5A623;padding:3px 4px;text-align:left;font-size:.68rem}
.kc-ptbl td{padding:3px 4px;border-bottom:1px solid rgba(255,255,255,0.08);color:rgba(255,255,255,0.8)}
.pm-month-label{font-size:.72rem;font-weight:700;color:#F5A623;margin:8px 0 2px;text-transform:uppercase;letter-spacing:.04em}
.kc-avk td:first-child{font-weight:600;color:#F5A623;width:40%}
.kc-slide-btn{width:100%;text-align:left;background:rgba(255,255,255,0.06);border:none;border-top:1px solid rgba(255,255,255,0.1);padding:7px 12px;font-size:.8rem;color:#F5A623;cursor:pointer;font-weight:600;display:flex;justify-content:space-between}
.kc-slide{overflow:hidden;max-height:0;transition:max-height .35s ease}
.kc-slide.kco{max-height:600px}
.kc-si{padding:8px 10px}
.kc-maha>summary{list-style:none}.kc-maha>summary::-webkit-details-marker{display:none}.kc-maha>summary::marker{display:none}
.kc-drow{display:flex;gap:8px;align-items:baseline;padding:4px 10px;font-size:.78rem;border-bottom:1px solid rgba(255,255,255,0.08);cursor:pointer;color:rgba(255,255,255,0.75)}
.kc-drow.kca{background:rgba(245,166,35,0.15);font-weight:700;color:#F5A623}
.kc-drow .kc-dy{font-size:.68rem;color:rgba(255,255,255,0.35);margin-left:auto}
.kc-maha>summary.kc-drow::after{content:' ▶';font-size:.6rem;color:rgba(255,255,255,0.35)}.kc-maha[open]>summary.kc-drow::after{content:' ▼'}
.kc-adlist{background:rgba(255,255,255,0.03);padding:2px 0 4px 0}
.kc-adr{display:flex;gap:8px;padding:2px 20px;font-size:.72rem;color:rgba(255,255,255,0.55);border-bottom:1px solid rgba(255,255,255,0.06)}
.kc-adr.kca{color:#F5A623;font-weight:700}
.kc-nav{padding:8px 10px;display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.kc-actions{display:flex;flex-wrap:wrap;gap:0}
.kc-actions form{flex:1;margin:0!important}
.kc-pdf-btn{width:100%;background:#3D0F0F;color:#fff;border:none;padding:8px 12px;font-size:.82rem;cursor:pointer;font-weight:600;letter-spacing:.03em}
.kc-vfr-btn{flex:1;background:#F5A623;color:#3D0F0F}
.kc-kpc-btn{flex:1;background:#1F6F6B;color:#fff}
/* ── South Indian chart ── */
.si-chart{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(4,minmax(55px,auto));border:1px solid rgba(245,166,35,0.4);width:220px;min-height:220px;flex-shrink:0;font-size:.55rem;overflow:visible}
.si-cell{border:1px solid rgba(245,166,35,0.25);padding:2px;overflow:visible;word-break:break-word;z-index:1}
.si-cell.si-empty{background:rgba(0,0,0,0.2);border:1px solid rgba(245,166,35,0.15)}
.si-ri{font-size:.48rem;color:rgba(255,255,255,0.35);display:block}
.si-pl{font-weight:700;color:rgba(255,255,255,0.9);display:block;line-height:1.1}
.si-asc{font-size:.45rem;color:#F5A623}
/* ── LIGHT THEME — comprehensive overrides ──────────────────────── */
/* Card and section headers */
[data-theme="light"] .card-header { background: linear-gradient(135deg, #7A2000 0%, #B85000 100%); }
[data-theme="light"] .monthly-hdr { background: linear-gradient(135deg, #7A2000 0%, #B85000 100%); }
[data-theme="light"] .festival-msg-card .card-header { background: linear-gradient(135deg, #6A0008 0%, #A84000 100%); }
/* Monthly calendar — hardcoded dark-only colors */
[data-theme="light"] .mc-dh { background: #7A2000; color: #fff; }
[data-theme="light"] .mc-empty { background: rgba(0,0,0,0.04); }
[data-theme="light"] .mc-td { color: #157040; }
[data-theme="light"] .mc-cm { color: #8A4500; }
[data-theme="light"] .mc-fv { color: #1C3098; }
[data-theme="light"] .mc-ti { color: #8A4500; }
[data-theme="light"] .mc-na { color: rgba(26,8,0,0.55); }
[data-theme="light"] .mc-nav { background: rgba(122,32,0,0.2); border: none; color: #fff; }
[data-theme="light"] .mc-nav:hover { background: rgba(122,32,0,0.35); }
[data-theme="light"] .monthly-card { box-shadow: 0 2px 12px rgba(0,0,0,0.1); }
[data-theme="light"] .pmc-hdr { background: linear-gradient(135deg, #7A2000 0%, #B85000 100%); }
[data-theme="light"] .help-hdr { background: linear-gradient(135deg, #7A2000 0%, #B85000 100%); }
[data-theme="light"] .pmc-nav { background: rgba(122,32,0,0.2); border: none; color: #fff; }
[data-theme="light"] .pmc-nav:hover { background: rgba(122,32,0,0.35); }
[data-theme="light"] .pmc-card { box-shadow: 0 2px 12px rgba(0,0,0,0.1); }
[data-theme="light"] .pm-nomove { color: rgba(26,8,0,0.7); }
/* Rise/set items */
[data-theme="light"] .rise-item { background: linear-gradient(135deg, #7A2000 0%, #B85000 100%); }
/* Nakshatra pv special color */
[data-theme="light"] .panch-item.nakshatra .pv { color: #2C26A8; }
/* Chogadia */
[data-theme="light"] .chog-good { background: rgba(28,48,152,0.1); color: #1C3098; }
/* card-tool-btn and copy-btn are always on dark card headers — no light override needed */
/* Suggestion-area only buttons need light overrides (cream bg) */
[data-theme="light"] .help-btn { background: rgba(0,0,0,0.07); border-color: rgba(0,0,0,0.16); color: rgba(26,8,0,0.72); margin-left: auto; }
[data-theme="light"] .help-btn:hover { background: rgba(0,0,0,0.13); border-color: rgba(0,0,0,0.22); color: #1A0800; }
[data-theme="light"] .share-btn { background: rgba(28,48,152,0.1); color: #1C3098; border-color: rgba(28,48,152,0.35); }
[data-theme="light"] .reset-btn { background: rgba(168,48,0,0.1); color: #8C3000; border-color: rgba(168,48,0,0.35); }
[data-theme="light"] .bookmark-btn { color: #146030; border-color: rgba(20,96,48,0.5); background: rgba(20,96,48,0.1); }
/* Suggestion chips */
[data-theme="light"] .suggestion-btn { background: rgba(180,80,10,0.07); border-color: rgba(180,80,10,0.2); color: rgba(26,8,0,0.72); }
[data-theme="light"] .suggestion-btn:hover { background: rgba(184,80,0,0.14); border-color: rgba(184,80,0,0.4); color: #B85000; }
/* Input box */
[data-theme="light"] .input-area input { color-scheme: light; }
/* Festival sect filter cells */
[data-theme="light"] .fsect-btn-cell { background: rgba(180,80,10,0.05); border-color: rgba(180,80,10,0.15); }
[data-theme="light"] .fsect-btn-cell.active { background: #7A2000; border-color: #B85000; }
[data-theme="light"] .fsect-cell-name { color: rgba(26,8,0,0.75); }
[data-theme="light"] .fsect-btn-cell.active .fsect-cell-name { color: #fff; }
/* Title labels inside dropdowns — opacity:0.5 is too low on light bg */
[data-theme="light"] .fsect-title,
[data-theme="light"] .lpg-title { opacity: 1; color: var(--ink-soft); }
/* Festival card footer — restore warm cream look in light mode */
[data-theme="light"] .festival-msg-card .card-tools { background: #fffaf2; border-top-color: #f0d8b8; }
[data-theme="light"] .festival-msg-card .festival-city-input { background: #fff; border-color: #e0c0a0; color: #1A0800; }
/* Autocomplete hover */
[data-theme="light"] .ac-item.active,
[data-theme="light"] .ac-item:hover { background: linear-gradient(135deg, #7A2000 0%, #B85000 100%); color: #fff; }
/* Card shadow on light bg */
[data-theme="light"] .msg-card { box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
/* Kundli form */
[data-theme="light"] .kundli-form-card { background: rgba(180,80,10,0.04); border-color: rgba(180,80,10,0.16); }
[data-theme="light"] .kfc-header { color: #B85000; }
[data-theme="light"] .kfc-name,
[data-theme="light"] .kfc-cityinput { background: #fff; border-color: rgba(0,0,0,0.22); color: #1A0800; }
[data-theme="light"] .kfc-day,
[data-theme="light"] .kfc-mon { background: #fff; border-color: rgba(0,0,0,0.22); color: #1A0800; }
[data-theme="light"] .kfc-yr,
[data-theme="light"] .kfc-hr,
[data-theme="light"] .kfc-min,
[data-theme="light"] .kfc-sec { background: #fff; border-color: rgba(0,0,0,0.22); color: #1A0800; }
[data-theme="light"] .kfc-hint-time { color: rgba(26,8,0,0.48); }
[data-theme="light"] .kfc-hint { color: rgba(26,8,0,0.42); }
[data-theme="light"] .kfc-hint-bar { background: rgba(184,80,0,0.08); border-color: rgba(184,80,0,0.24); color: #B85000; }
[data-theme="light"] .kfc-submit { background: #7A2000; }
[data-theme="light"] .kfc-drop { background: #FFF5E6; border-color: rgba(180,80,10,0.22); box-shadow: 0 4px 20px rgba(0,0,0,0.14); }
[data-theme="light"] .kfc-drop-item { border-bottom-color: rgba(180,80,10,0.1); color: #1A0800; }
[data-theme="light"] .kfc-drop-item:hover { background: rgba(180,80,10,0.1); }
[data-theme="light"] .kfc-sublabel { color: rgba(26,8,0,0.55); }
[data-theme="light"] .kfc-dst .kfc-dsth,
[data-theme="light"] .kfc-dst .kfc-dstm { background: #fff; border-color: rgba(0,0,0,0.22); color: #1A0800; }
[data-theme="light"] .kfc-lmt-row { color: rgba(26,8,0,0.68); }
/* Kundli answer card */
[data-theme="light"] .kundli-answer-card { background: rgba(180,80,10,0.04); border-color: rgba(180,80,10,0.14); border-left-color: #B85000; }
/* Full kundli card */
[data-theme="light"] .kundli-card { background: #FFF8EE; border-color: rgba(180,80,10,0.14); }
[data-theme="light"] .kc-hdr { background: #7A2000; }
[data-theme="light"] .kc-clbl { color: rgba(26,8,0,0.42); }
[data-theme="light"] .kc-info label { color: rgba(26,8,0,0.48); }
[data-theme="light"] .kc-dasha { background: rgba(180,80,10,0.07); }
[data-theme="light"] .kc-pred { color: rgba(26,8,0,0.8); border-left-color: rgba(180,80,10,0.3); }
[data-theme="light"] .kc-dtl summary { color: #B85000; }
[data-theme="light"] .kc-ptbl th { background: rgba(180,80,10,0.12); color: #B85000; }
[data-theme="light"] .kc-ptbl td { border-bottom-color: rgba(0,0,0,0.08); color: rgba(26,8,0,0.8); }
[data-theme="light"] .pm-month-label { color: #B85000; }
[data-theme="light"] .kc-avk td:first-child { color: #B85000; }
[data-theme="light"] .kc-slide-btn { background: rgba(180,80,10,0.06); border-top-color: rgba(180,80,10,0.14); color: #B85000; }
[data-theme="light"] .kc-drow { border-bottom-color: rgba(0,0,0,0.08); color: rgba(26,8,0,0.75); }
[data-theme="light"] .kc-drow.kca { background: rgba(180,80,10,0.12); color: #B85000; }
[data-theme="light"] .kc-drow .kc-dy { color: rgba(26,8,0,0.38); }
[data-theme="light"] .kc-maha>summary.kc-drow::after { color: rgba(26,8,0,0.38); }
[data-theme="light"] .kc-adlist { background: rgba(180,80,10,0.03); }
[data-theme="light"] .kc-adr { border-bottom-color: rgba(0,0,0,0.07); color: rgba(26,8,0,0.55); }
[data-theme="light"] .kc-adr.kca { color: #B85000; }
[data-theme="light"] .kc-pdf-btn { background: #7A2000; }
[data-theme="light"] .kc-vfr-btn { background: #F5A623; color: #3D0F0F; }
[data-theme="light"] .kc-kpc-btn { background: #1F6F6B; color: #fff; }
/* South Indian chart */
[data-theme="light"] .si-chart { border-color: rgba(184,80,0,0.38); }
[data-theme="light"] .si-cell { border-color: rgba(184,80,0,0.2); }
[data-theme="light"] .si-cell.si-empty { background: rgba(0,0,0,0.03); border-color: rgba(184,80,0,0.1); }
[data-theme="light"] .si-ri { color: rgba(26,8,0,0.38); }
[data-theme="light"] .si-pl { color: #1A0800; }
[data-theme="light"] .si-asc { color: #B85000; }
/* Shubh Dina list hover — 8% saffron invisible on light cream */
[data-theme="light"] .sd-list-item:hover,
[data-theme="light"] .sd-list-item:active { background: rgba(180,80,10,0.1); }
/* Monthly calendar — today highlight and tap state barely visible */
[data-theme="light"] .mc-cell:active { background: rgba(180,80,10,0.18); }
[data-theme="light"] .mc-today { background: rgba(180,80,10,0.14) !important; border-left-color: #B85000 !important; }
/* Festival embed table — tan border invisible on light background */
[data-theme="light"] .festival-embed td,
[data-theme="light"] .festival-embed th { border-color: #c0a070; }
/* Timeline hero subtitle — white 45% text invisible on light card */
[data-theme="light"] .tl-hero-sub { color: rgba(26,8,0,0.45); }
/* Festival month tags — low-opacity hover barely visible on light */
[data-theme="light"] .fest-tag { background: rgba(180,80,10,0.09); border-color: rgba(180,80,10,0.25); }
[data-theme="light"] .fest-tag:hover { background: rgba(180,80,10,0.2); }
/* Major Transit section (magenta, owner 2026-10-01) */
.fest-transit { margin-top: 10px; padding-top: 8px; border-top: 1px dashed rgba(255,111,216,0.35); }
.fest-transit-hd { font-size: 12px; font-weight: 700; color: #FF6FD8; margin-bottom: 4px; }
.fest-tag.fest-tag-tr { color: #FF6FD8; border-color: rgba(255,111,216,0.45); background: rgba(255,111,216,0.10); }
[data-theme="light"] .fest-transit { border-top-color: rgba(176,0,142,0.3); }
[data-theme="light"] .fest-transit-hd, [data-theme="light"] .fest-tag.fest-tag-tr { color: #B0008E; }
[data-theme="light"] .fest-tag.fest-tag-tr { border-color: rgba(176,0,142,0.35); background: rgba(176,0,142,0.07); }
/* cx animation chips — very low opacity on light background */
[data-theme="light"] .cx-info-chip { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.1); }
[data-theme="light"] .cx-rashi { background: #fff; border-color: rgba(180,80,10,0.2); }
[data-theme="light"] .cx-rashi-head { color: #8A3000; }
/* Shubh Dina badge + quality label — gold/saffron unreadable on cream bg */
[data-theme="light"] .sd-badge { background: rgba(138,80,0,0.1); border-color: rgba(138,80,0,0.28); color: #7A4800; }
[data-theme="light"] .sd-li-q { color: #8A5000; }
[data-theme="light"] .wm-table tbody tr:hover { background: rgba(180,80,10,0.1); }
[data-theme="light"] .wm-tick-ok { color: #2E8B57; }
[data-theme="light"] .wm-tick-x { color: #C0392B; }
[data-theme="light"] .wm-comment-cell { color: #8A5000; }
/* Monthly calendar shubh mark — saffron invisible on light cell */
[data-theme="light"] .mc-sd { color: #B85000; }
/* Planet-vedha filter chips/tags — white rgba background invisible on light bg */
[data-theme="light"] .vh-pchip { background: rgba(0,0,0,0.06); border-color: rgba(0,0,0,0.18); }
[data-theme="light"] .nak-vp { background: rgba(0,0,0,0.06); }