*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #0f0e17;
  --surface: #1a1830;
  --surface2: #231f3a;
  --border: #2e2a4a;
  --accent: #a78bfa;
  --accent2: #f59e0b;
  --text: #e2e0f0;
  --text-dim: #8b87aa;
  --user-bubble: #2d2b55;
  --ai-bubble: #1e1c38;
  --success: #34d399;
  --danger: #f87171;
  --radius: 12px;
}

body {
  font-family: 'Segoe UI', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Login overlay ──────────────────────────────────── */
#login-overlay {
  position: fixed;
  inset: 0;
  background: #09081a;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 9999;
}

/* First-chat preferred-name prompt */
#name-overlay {
  position: fixed;
  inset: 0;
  background: rgba(9, 8, 26, 0.78);
  backdrop-filter: blur(6px);
  display: none;            /* toggled to flex by JS */
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 10000;
}
#name-overlay.show { display: flex; }
#name-modal {
  width: 100%;
  max-width: 400px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 28px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
#name-modal-icon { font-size: 40px; line-height: 1; margin-bottom: 10px; }
#name-modal-title { margin: 0 0 8px; font-size: 1.3rem; color: var(--text); }
#name-modal-sub { margin: 0 0 20px; font-size: 0.9rem; color: var(--text-dim); line-height: 1.45; }
#name-modal-input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  font-size: 1rem;
  color: var(--text);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  outline: none;
  margin-bottom: 16px;
}
#name-modal-input:focus { border-color: var(--accent); }
#name-modal-continue {
  width: 100%;
  padding: 12px;
  font-size: 1rem;
  font-weight: 600;
  color: #1a1830;
  background: var(--accent);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: filter .15s, transform .1s;
}
#name-modal-continue:hover { filter: brightness(1.08); }
#name-modal-continue:active { transform: scale(.97); }
#name-modal-anon {
  width: 100%;
  margin-top: 10px;
  padding: 10px;
  font-size: 0.9rem;
  color: var(--text-dim);
  background: transparent;
  border: none;
  cursor: pointer;
}
#name-modal-anon:hover { color: var(--text); }

/* Two-pane split card */
#login-split {
  display: flex;
  width: 100%;
  max-width: 1060px;
  min-height: 580px;
  max-height: 720px;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(167,139,250,.18);
  box-shadow: 0 48px 120px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.04);
}

/* ── Left panel ────────────────────────────────── */
#login-left {
  flex: 1.25;
  position: relative;
  background: linear-gradient(140deg, #0c0a2e 0%, #18103e 35%, #1c0e36 60%, #0d1224 100%);
  padding: 56px 52px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* Concentric ring decorations */
#login-left::before {
  content: '';
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  border: 1px solid rgba(167,139,250,.12);
  right: -160px;
  top: 50%;
  transform: translateY(-50%);
  animation: lp-spin 40s linear infinite;
}
#login-left::after {
  content: '';
  position: absolute;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  border: 1px dashed rgba(245,158,11,.1);
  right: -60px;
  top: 50%;
  transform: translateY(-50%);
  animation: lp-spin 28s linear infinite reverse;
}

@keyframes lp-spin {
  from { transform: translateY(-50%) rotate(0deg); }
  to   { transform: translateY(-50%) rotate(360deg); }
}

/* Star field via box-shadow */
.ll-stars::before,
.ll-stars::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: transparent;
}
.ll-stars::before {
  width: 2px; height: 2px;
  top: 0; left: 0;
  box-shadow:
    72px 38px  rgba(167,139,250,.7), 155px 112px rgba(245,158,11,.5),
    238px 28px  rgba(255,255,255,.4), 315px 175px rgba(167,139,250,.5),
    398px 58px  rgba(245,158,11,.6), 448px 198px rgba(255,255,255,.35),
    52px  248px rgba(245,158,11,.4),  128px 308px rgba(167,139,250,.6),
    198px 375px rgba(255,255,255,.3), 276px 285px rgba(245,158,11,.45),
    345px 345px rgba(167,139,250,.4), 418px 268px rgba(255,255,255,.3),
    28px  378px rgba(167,139,250,.5), 108px 448px rgba(245,158,11,.35),
    188px 478px rgba(255,255,255,.25),366px 428px rgba(167,139,250,.45),
    458px 378px rgba(245,158,11,.3),  88px  148px rgba(255,255,255,.45),
    308px 108px rgba(167,139,250,.55),478px 328px rgba(245,158,11,.4);
  animation: lp-twinkle 7s ease-in-out infinite alternate;
}
.ll-stars::after {
  width: 1px; height: 1px;
  top: 0; left: 0;
  box-shadow:
    48px  78px  rgba(255,255,255,.5), 138px 52px  rgba(167,139,250,.6),
    218px 158px rgba(245,158,11,.4),  288px 238px rgba(255,255,255,.45),
    358px 128px rgba(167,139,250,.5), 428px 208px rgba(245,158,11,.55),
    68px  338px rgba(255,255,255,.4), 148px 398px rgba(167,139,250,.5),
    228px 458px rgba(245,158,11,.35), 308px 398px rgba(255,255,255,.3),
    388px 468px rgba(167,139,250,.4), 468px 438px rgba(245,158,11,.35);
  animation: lp-twinkle 9s ease-in-out infinite alternate-reverse;
}

@keyframes lp-twinkle {
  0%   { opacity: .45; }
  100% { opacity: 1;   }
}

/* Ambient glow orbs */
.ll-glow-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(60px);
}
.ll-orb1 {
  width: 280px; height: 280px;
  background: rgba(167,139,250,.1);
  bottom: -80px; left: -60px;
}
.ll-orb2 {
  width: 200px; height: 200px;
  background: rgba(245,158,11,.08);
  top: -60px; right: 80px;
}

#login-left-content {
  position: relative;
  z-index: 2;
  max-width: 440px;
}

#login-logo {
  height: 56px;
  width: auto;
  filter: brightness(0) invert(1);
  object-fit: contain;
  display: block;
  margin-bottom: 30px;
}

#ll-badge {
  display: inline-flex;
  align-items: center;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent2);
  background: rgba(245,158,11,.1);
  border: 1px solid rgba(245,158,11,.25);
  border-radius: 20px;
  padding: 4px 14px;
  margin-bottom: 20px;
}

#ll-headline {
  font-size: 2.55rem;
  font-weight: 800;
  line-height: 1.18;
  color: #fff;
  margin-bottom: 16px;
}

.ll-gradient {
  background: linear-gradient(100deg, #a78bfa 0%, #f59e0b 55%, #f472b6 100%);
  background-size: 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: ll-shimmer 5s ease infinite;
}

@keyframes ll-shimmer {
  0%, 100% { background-position: 0%;   }
  50%       { background-position: 100%;}
}

#ll-desc {
  font-size: .92rem;
  color: rgba(226,224,240,.65);
  line-height: 1.75;
  margin-bottom: 32px;
  max-width: 370px;
}

#ll-features {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 32px;
}

.ll-feature {
  display: flex;
  align-items: flex-start;
  gap: 13px;
}

.ll-feature-icon {
  font-size: 1.15rem;
  flex-shrink: 0;
  margin-top: 1px;
}

.ll-feature-title {
  font-size: .86rem;
  font-weight: 600;
  color: #e2e0f0;
  margin-bottom: 2px;
}

.ll-feature-desc {
  font-size: .76rem;
  color: rgba(226,224,240,.5);
  line-height: 1.5;
}

#ll-trust {
  font-size: .7rem;
  color: rgba(245,158,11,.65);
  letter-spacing: .07em;
  font-weight: 500;
}

/* ── Right panel ──────────────────────────────────── */
#login-right {
  flex: .82;
  background: #100e28;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 44px;
  position: relative;
  border-left: 1px solid rgba(167,139,250,.1);
}

/* Top-right glow */
#login-right::before {
  content: '';
  position: absolute;
  width: 260px; height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(167,139,250,.07) 0%, transparent 70%);
  top: -80px; right: -60px;
  pointer-events: none;
}
/* Bottom glow */
#login-right::after {
  content: '';
  position: absolute;
  width: 300px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(66,133,244,.06) 0%, transparent 70%);
  bottom: -60px; left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}

#login-card {
  width: 100%;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 1;
}

#lr-dot-brand {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 40px;
}

#lr-brand-dot {
  display: block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent), 0 0 20px rgba(167,139,250,.4);
  animation: dot-pulse 2.5s ease-in-out infinite;
}

@keyframes dot-pulse {
  0%, 100% { box-shadow: 0 0 8px var(--accent), 0 0 16px rgba(167,139,250,.3); }
  50%       { box-shadow: 0 0 14px var(--accent), 0 0 28px rgba(167,139,250,.6); }
}

#lr-brand-name {
  font-size: .78rem;
  font-weight: 700;
  color: var(--text-dim);
  letter-spacing: .1em;
  text-transform: uppercase;
}

#lr-welcome {
  font-size: 1.75rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
  letter-spacing: -.01em;
}

#lr-subtitle {
  font-size: .85rem;
  color: var(--text-dim);
  margin-bottom: 36px;
  line-height: 1.5;
}

/* Glow ring around Google button */
#lr-btn-wrap {
  margin-bottom: 22px;
  border-radius: 8px;
  padding: 3px;
  background: linear-gradient(135deg, rgba(66,133,244,.5) 0%, rgba(167,139,250,.4) 50%, rgba(66,133,244,.5) 100%);
  background-size: 200%;
  animation: btn-glow 4s ease infinite;
}

@keyframes btn-glow {
  0%, 100% { background-position: 0%;    box-shadow: 0 6px 28px rgba(66,133,244,.25); }
  50%       { background-position: 100%; box-shadow: 0 6px 36px rgba(66,133,244,.45); }
}

#g-signin-btn {
  display: block;
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg);
}

#login-note {
  font-size: .74rem;
  color: var(--text-dim);
  opacity: .75;
  margin-bottom: 14px;
}

#lr-terms {
  font-size: .66rem;
  color: var(--text-dim);
  opacity: .4;
  line-height: 1.6;
}

/* ── Top navigation bar ─────────────────────────────── */
#topbar {
  display: flex;
  align-items: center;
  height: 85px;
  padding: 0 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  gap: 16px;
  z-index: 100;
}

#topbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}

#topbar-logo {
  height: 75px;
  width: auto;
  filter: brightness(0) invert(1);
  object-fit: contain;
}


#topbar-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── User chip (in topbar) ──────────────────────────── */
#user-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 30px;
  padding: 4px 14px 4px 5px;
}

#user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border);
}

#user-name {
  font-size: .82rem;
  color: var(--text);
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#reset-btn {
  background: transparent;
  border: 1px solid rgba(248, 113, 113, 0.35);
  border-radius: 20px;
  color: #f87171;
  padding: 4px 13px;
  margin-left: 6px;
  font-size: .73rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
  white-space: nowrap;
  letter-spacing: .02em;
}
#reset-btn:hover {
  background: rgba(248, 113, 113, 0.14);
  border-color: #f87171;
  color: #fca5a5;
}

#logout-btn {
  background: transparent;
  border: none;
  border-left: 1px solid var(--border);
  color: var(--text-dim);
  padding: 2px 0 2px 12px;
  margin-left: 0;
  font-size: .78rem;
  cursor: pointer;
  transition: color .15s;
  white-space: nowrap;
}
#logout-btn:hover { color: var(--danger); }

/* ── Main layout ────────────────────────────────────── */
#main {
  flex: 1;
  display: flex;
  overflow: hidden;
  min-height: 0;
}

/* ── Chat panel ─────────────────────────────────────── */
#chat-panel {
  width: 400px;
  min-width: 320px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
  transition: width 0.55s cubic-bezier(0.4, 0, 0.2, 1),
              max-width 0.55s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.3s;
}

#phase-badge {
  font-size: .7rem;
  padding: 3px 9px;
  border-radius: 20px;
  background: var(--surface2);
  color: var(--accent2);
  border: 1px solid var(--border);
  text-transform: uppercase;
  letter-spacing: .06em;
}

#messages {
  flex: 1;
  overflow-y: auto;
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.msg {
  max-width: 88%;
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: .9rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  animation: msg-appear 0.22s ease forwards;
}
.msg.user {
  background: linear-gradient(135deg, var(--user-bubble) 0%, #362f6a 100%);
  align-self: flex-end;
  border-bottom-right-radius: 3px;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.msg.assistant {
  background: var(--ai-bubble);
  align-self: flex-start;
  border-bottom-left-radius: 3px;
  border: 1px solid rgba(167,139,250,.18);
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}

@keyframes msg-appear {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.msg.system-info {
  background: transparent;
  border: 1px dashed var(--border);
  color: var(--text-dim);
  font-size: .78rem;
  align-self: center;
  padding: 5px 12px;
}

#input-area {
  padding: 12px 14px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  display: flex;
  gap: 10px;
  align-items: flex-end;
}

#user-input {
  flex: 1;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--text);
  padding: 11px 16px;
  font-size: .9rem;
  resize: none;
  outline: none;
  line-height: 1.4;
  min-height: 44px;
  max-height: 140px;
  overflow-y: auto;
  transition: border-color .2s;
}
#user-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(167,139,250,.1); }

/* ── Send button — paper-plane circle ─────────────────── */
#send-btn {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #a78bfa 0%, #7c3aed 100%);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform .15s ease, box-shadow .15s ease;
  box-shadow: 0 4px 14px rgba(124,58,237,.4);
  padding: 0;
  align-self: flex-end;
}
#send-btn svg { pointer-events: none; transform: translateX(1px); }
#send-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 22px rgba(124,58,237,.65);
}
#send-btn:active { transform: scale(.93); }
#send-btn:disabled { opacity: .4; cursor: not-allowed; transform: none !important; box-shadow: none; }

#analyse-btn {
  width: 100%;
  margin: 0;
  background: var(--accent2);
  color: #0f0e17;
  border: none;
  border-radius: 8px;
  padding: 10px;
  font-weight: 700;
  font-size: .9rem;
  cursor: pointer;
}
#analyse-btn:hover { opacity: .85; }
#analyse-btn:disabled { opacity: .4; cursor: not-allowed; }
#chat-domain-bar {
  padding: 10px 14px 12px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  display: none;
}

.chat-domain-label {
  font-size: .68rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 7px;
}

.chat-domain-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.chat-domain-btn {
  padding: 4px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  font-size: .75rem;
  cursor: pointer;
  transition: all .15s;
}
.chat-domain-btn:hover {
  background: var(--surface2);
  color: var(--text);
  border-color: var(--accent);
}
.chat-domain-btn:disabled { opacity: .35; cursor: not-allowed; }

#analyse-wrap { padding: 10px 14px; background: var(--surface); border-top: 1px solid var(--border); display: none; }

/* ── Analysis panel ─────────────────────────────────── */
#analysis-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}


#domain-bar {
  display: flex;
  gap: 6px;
  padding: 9px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  flex-shrink: 0;
}
#domain-bar::-webkit-scrollbar { height: 3px; }

.domain-btn {
  white-space: nowrap;
  padding: 4px 13px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  font-size: .75rem;
  cursor: pointer;
  transition: all .15s;
  flex-shrink: 0;
}
.domain-btn:hover {
  background: var(--surface2);
  color: var(--text);
  border-color: var(--accent);
}
.domain-btn.active {
  background: var(--accent);
  color: #0f0e17;
  border-color: var(--accent);
  font-weight: 600;
}
.domain-btn:disabled {
  opacity: .35;
  cursor: not-allowed;
}

#analysis-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  align-items: center;
}

.tab-btn {
  padding: 5px 14px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  font-size: .8rem;
  cursor: pointer;
  transition: all .15s;
}
.tab-btn.active, .tab-btn:hover {
  background: var(--surface2);
  color: var(--text);
  border-color: var(--accent);
}

#save-report-btn,
#save-report-btn-match {
  margin-left: auto;
  padding: 4px 12px;
  border-radius: 6px;
  border: 1px solid var(--accent2);
  background: transparent;
  color: var(--accent2);
  font-size: .75rem;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
#save-report-btn:hover,
#save-report-btn-match:hover { background: #2a1f00; }
#save-report-btn:disabled,
#save-report-btn-match:disabled { opacity: .35; cursor: default; }

.tab-content { display: none; flex: 1; overflow-y: auto; padding: 20px; }
.tab-content.active { display: block; }
#report-content { padding: 0; }
#report-text { padding: 20px; }
#yogas-content:not(:empty) { padding: 0 20px 20px; }

/* Classical Sources / RAG citations block */
.rag-references {
  margin: 12px 20px 20px;
  padding: 12px 16px;
  background: rgba(var(--accent-rgb, 139, 92, 246), .07);
  border: 1px solid rgba(var(--accent-rgb, 139, 92, 246), .2);
  border-radius: 8px;
  font-size: .78rem;
  color: var(--text-dim);
  line-height: 1.55;
}
.rag-references-title {
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-dim);
  margin-bottom: 6px;
  opacity: .7;
}
.rag-references ol {
  margin: 0;
  padding-left: 18px;
}
.rag-references li {
  margin-bottom: 3px;
}

/* Report + BNN markdown rendering */
#report-content, #bnn-content {
  font-size: .88rem;
  line-height: 1.7;
  color: var(--text);
}
#report-content h1, #report-content h2, #report-content h3,
#bnn-content h1, #bnn-content h2, #bnn-content h3 {
  color: var(--accent);
  margin: 1.2em 0 .4em;
}
#report-content h1, #bnn-content h1 { font-size: 1.2rem; }
#report-content h2, #bnn-content h2 { font-size: 1.05rem; }
#report-content h3, #bnn-content h3 { font-size: .95rem; color: var(--accent2); }
#report-content p, #bnn-content p { margin-bottom: .7em; }
#report-content strong, #bnn-content strong { color: var(--accent2); }
#report-content ul, #report-content ol,
#bnn-content ul, #bnn-content ol { padding-left: 1.4em; margin-bottom: .7em; }

/* BNN tab section dividers */
#bnn-content h2 {
  border-top: 1px solid var(--border);
  padding-top: .8em;
  margin-top: 1.4em;
}

/* ── South Indian Vedic Chart ────────────────────────── */

/* Container for multiple charts side by side */
.vchart-row {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: flex-start;
}

.vchart-wrap {
  flex: 0 0 auto;
}

.vchart-title {
  font-size: .75rem;
  color: var(--accent2);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: 10px;
  font-weight: 700;
  text-align: center;
}

/* 4×4 grid — each cell 110px, total 440px square */
.vchart-grid {
  display: grid;
  grid-template-columns: repeat(4, 110px);
  grid-template-rows: repeat(4, 110px);
  border: 2px solid var(--accent);
}

/* Every border cell */
.vchart-cell {
  border: 1px solid #3a3560;
  padding: 7px 8px;
  display: flex;
  flex-direction: column;
  background: #161428;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

/* Empty center 2×2 */
.vchart-cell.vchart-center {
  background: #0c0b18;
  border-color: #2a2645;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Lagna cell gets highlighted border + tint */
.vchart-cell.vchart-lagna {
  background: #1e1a3a;
  border: 2px solid var(--accent2);
  box-shadow: inset 0 0 12px rgba(245,158,11,.08);
}

.vchart-center-label {
  font-size: .65rem;
  color: var(--accent);
  text-align: center;
  opacity: .55;
  line-height: 1.4;
}

/* Top row of each house cell: sign label + badges */
.vchart-cell-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 4px;
}

.vchart-sign {
  font-size: .62rem;
  color: #5a5680;
  font-weight: 600;
  letter-spacing: .03em;
}

.vchart-badges {
  display: flex;
  gap: 3px;
  align-items: center;
}

.vchart-hnum {
  font-size: .55rem;
  color: var(--accent);
  background: rgba(167,139,250,.1);
  border: 1px solid rgba(167,139,250,.25);
  border-radius: 3px;
  padding: 1px 4px;
  line-height: 1.3;
}

.vchart-sav {
  font-size: .55rem;
  color: var(--accent2);
  background: rgba(245,158,11,.1);
  border: 1px solid rgba(245,158,11,.2);
  border-radius: 3px;
  padding: 1px 4px;
  line-height: 1.3;
}

/* Planet names */
.vchart-planets {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.vchart-planet {
  display: flex;
  align-items: baseline;
  gap: 3px;
  line-height: 1.3;
  overflow: hidden;
}

.vp-name {
  font-size: .78rem;
  color: #d4d0f0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vp-deg {
  font-size: .6rem;
  color: #7a75a8;
  flex-shrink: 0;
}

.vp-tag {
  font-size: .58rem;
  font-weight: 700;
  border-radius: 2px;
  padding: 0 3px;
  flex-shrink: 0;
  line-height: 1.4;
}
.vp-exalt  { background: #1a3a1a; color: #6fcf97; }
.vp-debil  { background: #3a1a1a; color: #eb5757; }
.vp-retro  { color: #f59e0b; background: transparent; }

.vp-exalted    .vp-name { color: #6fcf97; }
.vp-debilitated .vp-name { color: #f87171; }

/* Ascendant / Lagna label */
.vchart-asc {
  color: var(--accent2) !important;
  font-weight: 700;
  margin-bottom: 12px;
  font-weight: 700;
}

.vchart-yoga-count {
  background: var(--surface2);
  border-radius: 10px;
  padding: 1px 7px;
  font-size: .7rem;
  color: var(--accent);
  margin-left: 6px;
}

.vchart-yoga-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.vchart-yoga-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 7px 12px;
  background: var(--surface);
  border-radius: 6px;
  border-left: 3px solid var(--accent);
}

.vchart-yoga-name {
  font-size: .8rem;
  color: var(--accent2);
  font-weight: 600;
}

.vchart-yoga-cond {
  font-size: .72rem;
  color: var(--accent);
  opacity: .7;
  line-height: 1.4;
  font-style: italic;
}

.vchart-yoga-effect {
  font-size: .75rem;
  color: var(--text-dim);
  line-height: 1.4;
}

/* ── Dasha / plain tables (kept for dasha tab) ───────── */
.chart-table-wrap { margin-bottom: 24px; }
.chart-table-wrap h3 {
  font-size: .85rem;
  color: var(--accent2);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.chart-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .82rem;
}
.chart-table th {
  background: var(--surface2);
  color: var(--accent);
  padding: 6px 10px;
  text-align: left;
  border: 1px solid var(--border);
}
.chart-table td {
  padding: 5px 10px;
  border: 1px solid var(--border);
  color: var(--text-dim);
  vertical-align: top;
}
.chart-table tr:hover td { background: var(--surface2); color: var(--text); }

/* Current dasha chain panel */
.dasha-section-label {
  font-size: .72rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 10px;
  font-weight: 600;
}
.dasha-chain-wrap { margin-bottom: 28px; }
.dasha-chain-grid { display: flex; flex-direction: column; gap: 4px; }
.dasha-chain-row {
  display: grid;
  grid-template-columns: 150px 110px 1fr 90px;
  align-items: center;
  padding: 7px 12px;
  border-radius: 6px;
  background: var(--surface);
  border-left: 3px solid var(--border);
  font-size: .82rem;
  gap: 8px;
}
.dasha-chain-row:first-child  { border-left-color: var(--accent);  background: #1a1838; }
.dasha-chain-row:nth-child(2) { border-left-color: var(--accent2); }
.dasha-chain-row:nth-child(3) { border-left-color: #60a5fa; }
.dasha-chain-row:nth-child(4) { border-left-color: var(--success); }
.dasha-chain-row:nth-child(5) { border-left-color: var(--danger);  }
.dasha-chain-level { color: var(--text-dim); font-size: .75rem; }
.dasha-chain-lord  { color: var(--text); font-weight: 700; }
.dasha-chain-range { color: var(--text-dim); font-size: .78rem; }
.dasha-chain-dur   { color: var(--accent2); font-size: .75rem; text-align: right; }

/* Upcoming dasha periods table */
.dasha-upcoming-table { width: 100%; }
.dasha-maha  { color: var(--text); font-weight: 600; }
.dasha-sep   { color: var(--text-dim); margin: 0 3px; font-size: .72rem; }
.dasha-antar { color: var(--accent2); }
.dasha-now-badge {
  display: inline-block;
  font-size: .55rem;
  background: var(--accent);
  color: #0f0e17;
  border-radius: 3px;
  padding: 1px 5px;
  font-weight: 700;
  letter-spacing: .04em;
  vertical-align: middle;
  margin-left: 5px;
}

/* ── Brigu Nadi card ─────────────────────────────────── */
.bnn-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 2px solid var(--accent2);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 24px;
}
.bnn-title {
  font-size: .82rem;
  font-weight: 700;
  color: var(--accent2);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 14px;
}
.bnn-block { margin-bottom: 14px; }
.bnn-block-transit { border-top: 1px solid var(--border); padding-top: 12px; }
.bnn-block-label {
  font-size: .78rem;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 7px;
}
.bnn-activated {
  font-size: .78rem;
  color: var(--text);
  background: #1e1a38;
  border-left: 3px solid var(--accent2);
  padding: 5px 10px;
  border-radius: 4px;
  margin-bottom: 8px;
}
.bnn-act-label { color: var(--text-dim); font-size: .72rem; margin-right: 5px; }
.bnn-row {
  display: grid;
  grid-template-columns: 140px 110px 1fr;
  gap: 6px;
  align-items: baseline;
  padding: 3px 0;
  font-size: .78rem;
  border-bottom: 1px solid #1e1c38;
}
.bnn-row:last-child { border-bottom: none; }
.bnn-row-label  { color: var(--text-dim); }
.bnn-row-sign   { color: var(--accent2); font-weight: 600; }
.bnn-row-planets { color: var(--text); }
.bnn-row-note   { color: var(--text-dim); font-size: .72rem; font-style: italic; }
.bnn-ref {
  font-size: .76rem;
  color: var(--text-dim);
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.bnn-ref strong { color: var(--text); }
.bnn-ref-note { font-size: .71rem; color: var(--text-dim); opacity: .75; }
.bnn-planet-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .76rem;
  margin-bottom: 8px;
}
.bnn-planet-table th {
  color: var(--text-dim);
  font-weight: 600;
  font-size: .7rem;
  text-align: left;
  padding: 3px 8px 3px 0;
  border-bottom: 1px solid var(--border);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.bnn-planet-table td {
  padding: 3px 8px 3px 0;
  border-bottom: 1px solid #1e1c38;
  color: var(--text);
  vertical-align: middle;
}
.bnn-planet-table tr:last-child td { border-bottom: none; }
.bnn-dignity {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  border-radius: 3px;
  padding: 1px 5px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.bnn-dig-exalted     { background: #1a3a1a; color: #6fcf97; border: 1px solid #2d6a2d; }
.bnn-dig-debilitated { background: #3a1a1a; color: #eb5757; border: 1px solid #6a2d2d; }
.bnn-dig-own_sign    { background: #1a2e3a; color: #56b4d3; border: 1px solid #2d5a6a; }

/* Dasha interpretation */
.dasha-interp { font-size: .85rem; line-height: 1.7; color: var(--text); }
.dasha-interp h2 { color: var(--accent); font-size: .95rem; margin: .8em 0 .3em; }
.dasha-interp h3 { color: var(--accent2); font-size: .85rem; margin: .6em 0 .2em; }
.dasha-interp p  { margin-bottom: .6em; }
.dasha-interp strong { color: var(--accent2); }

/* Dasha table */
.dasha-current { background: #1a2e1a !important; color: var(--success) !important; }

/* Stale-cache refresh banner */
#stale-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  margin: 0 0 12px;
  background: rgba(167,139,250,.08);
  border: 1px solid rgba(167,139,250,.25);
  border-radius: 8px;
  font-size: .82rem;
  color: var(--text-dim);
}
#stale-banner span { flex: 1; }
#stale-banner button {
  padding: 5px 12px;
  border-radius: 6px;
  border: 1px solid var(--accent);
  background: rgba(167,139,250,.15);
  color: var(--accent);
  cursor: pointer;
  font-size: .8rem;
  white-space: nowrap;
}
#stale-banner button:hover { background: rgba(167,139,250,.3); }
#stale-banner button.dismiss {
  padding: 3px 8px;
  border-color: rgba(167,139,250,.3);
  color: var(--text-dim);
  background: transparent;
}

/* Report loading animation */
.report-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  min-height: 60vh;
  padding: 40px 20px;
  color: var(--text-dim);
}
.report-loading-spinner {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 3px solid rgba(167,139,250,.15);
  border-top-color: var(--accent);
  animation: spin .85s linear infinite;
  box-shadow: 0 0 18px rgba(167,139,250,.2);
}
.report-loading-msg {
  font-size: .85rem;
  color: rgba(226,224,240,.5);
  transition: opacity .4s;
  letter-spacing: .04em;
}

/* Feed transit chart */
.feed-transit-section { margin-bottom: 24px; }
.feed-transit-chart .chart-grid-container { max-width: 280px; }

/* Status dot */
.spinner {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  border-top-color: transparent;
  animation: spin .7s linear infinite;
  margin-right: 6px;
  vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

#status-bar {
  padding: 8px 20px;
  font-size: .78rem;
  color: var(--text-dim);
  background: var(--surface);
  border-top: 1px solid var(--border);
  min-height: 32px;
}

/* Scrollbars */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* ── Daily Feed tab ──────────────────────────────────── */
.feed-panchanga {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.feed-pan-row { display: flex; flex-wrap: wrap; gap: 14px; }
.feed-pan-item { display: flex; flex-direction: column; gap: 2px; font-size: .8rem; color: var(--text); }
.feed-pan-label { font-size: .62rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; }
.feed-pan-item.feed-avoid { color: var(--danger); }

.feed-section-label {
  font-size: .72rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 10px;
  font-weight: 600;
}

.feed-hora-section { margin-bottom: 24px; }

.feed-hora-timeline {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 6px;
}
.feed-hora-timeline::-webkit-scrollbar { height: 3px; }

.feed-hora-card {
  flex: 0 0 auto;
  width: 88px;
  padding: 8px 8px 6px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 3px;
  cursor: default;
  transition: border-color .15s;
}
.feed-hora-card:hover { border-color: var(--accent); }

.feed-hora-best    { border-left: 3px solid var(--success); }
.feed-hora-good    { border-left: 3px solid var(--accent); }
.feed-hora-caution { border-left: 3px solid var(--accent2); }
.feed-hora-avoid   { border-left: 3px solid var(--danger); opacity: .7; }

.feed-hora-now {
  border-color: var(--accent2) !important;
  background: #1e1a38;
}

.feed-hora-time {
  font-size: .68rem;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 4px;
}
.feed-hora-now-badge {
  font-size: .55rem;
  background: var(--accent2);
  color: #0f0e17;
  border-radius: 3px;
  padding: 1px 4px;
  font-weight: 700;
  letter-spacing: .04em;
}
.feed-hora-planet { font-size: .82rem; font-weight: 700; color: var(--text); }
.feed-hora-night  { font-size: .62rem; color: var(--text-dim); }
.feed-hora-good-for { font-size: .62rem; color: var(--text-dim); line-height: 1.3; margin-top: 2px; }
.feed-hora-avoid-txt { font-size: .6rem; color: var(--danger); margin-top: 1px; }

.feed-text {
  font-size: .88rem;
  line-height: 1.7;
  color: var(--text);
}
.feed-text h2 { color: var(--accent); margin: 1.2em 0 .4em; font-size: 1rem; }
.feed-text h3 { color: var(--accent2); margin: 1em 0 .3em; font-size: .92rem; }
.feed-text p  { margin-bottom: .7em; }
.feed-text strong { color: var(--accent2); }
.feed-text ul, .feed-text ol { padding-left: 1.4em; margin-bottom: .7em; }

/* Empty state / Welcome banner */
/* ── Empty state (welcome banner) ───────────────────── */
#empty-state {
  position: relative;
  overflow: hidden;
  min-height: 100%;
  background: linear-gradient(150deg, #0c0a2e 0%, #18103e 40%, #1c0e36 65%, #0d1224 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 36px 52px;
}

/* Spinning concentric ring decorations */
#empty-state::before {
  content: '';
  position: absolute;
  width: 480px; height: 480px;
  border-radius: 50%;
  border: 1px solid rgba(167,139,250,.1);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  animation: es-spin 50s linear infinite;
  pointer-events: none;
}
#empty-state::after {
  content: '';
  position: absolute;
  width: 300px; height: 300px;
  border-radius: 50%;
  border: 1px dashed rgba(245,158,11,.09);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  animation: es-spin 32s linear infinite reverse;
  pointer-events: none;
}
@keyframes es-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Star field */
.es-stars { position: absolute; inset: 0; pointer-events: none; }
.es-stars::before, .es-stars::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: transparent;
}
.es-stars::before {
  width: 2px; height: 2px; top: 0; left: 0;
  box-shadow:
    60px 45px rgba(167,139,250,.7), 140px 90px rgba(245,158,11,.5),
    220px 25px rgba(255,255,255,.4), 300px 140px rgba(167,139,250,.55),
    380px 55px rgba(245,158,11,.6), 430px 185px rgba(255,255,255,.35),
    50px 230px rgba(245,158,11,.4), 125px 290px rgba(167,139,250,.6),
    195px 355px rgba(255,255,255,.3), 265px 265px rgba(245,158,11,.45),
    335px 325px rgba(167,139,250,.4), 400px 255px rgba(255,255,255,.3),
    25px 360px rgba(167,139,250,.5),  95px 425px rgba(245,158,11,.35),
    175px 455px rgba(255,255,255,.25),350px 405px rgba(167,139,250,.45),
    445px 360px rgba(245,158,11,.3),  80px 135px rgba(255,255,255,.45),
    295px 100px rgba(167,139,250,.55),460px 310px rgba(245,158,11,.4);
  animation: es-twinkle 7s ease-in-out infinite alternate;
}
.es-stars::after {
  width: 1px; height: 1px; top: 0; left: 0;
  box-shadow:
    45px 70px  rgba(255,255,255,.5), 130px 48px rgba(167,139,250,.6),
    210px 150px rgba(245,158,11,.4), 280px 225px rgba(255,255,255,.45),
    350px 120px rgba(167,139,250,.5), 415px 200px rgba(245,158,11,.55),
    65px 320px  rgba(255,255,255,.4), 145px 380px rgba(167,139,250,.5),
    225px 440px rgba(245,158,11,.35), 305px 380px rgba(255,255,255,.3),
    385px 450px rgba(167,139,250,.4), 460px 420px rgba(245,158,11,.35);
  animation: es-twinkle 9s ease-in-out infinite alternate-reverse;
}
@keyframes es-twinkle {
  0%   { opacity: .4; }
  100% { opacity: 1;  }
}

/* Ambient glow orbs */
.es-glow-orb { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(60px); }
.es-orb-a { width: 260px; height: 260px; background: rgba(167,139,250,.12); bottom: -80px; left: -60px; }
.es-orb-b { width: 180px; height: 180px; background: rgba(245,158,11,.09); top: -50px; right: 40px; }

/* Inner content */
#es-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  max-width: 300px;
}

#es-symbol {
  font-size: 2.8rem;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 4px;
  animation: es-pulse 3.5s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(167,139,250,.35));
}
@keyframes es-pulse {
  0%, 100% { opacity: .55; filter: drop-shadow(0 0 8px rgba(167,139,250,.25)); }
  50%       { opacity: 1;   filter: drop-shadow(0 0 24px rgba(167,139,250,.7)); }
}

#es-headline {
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.35;
  color: rgba(226,224,240,.8);
  margin: 0;
}

#es-desc {
  font-size: .78rem;
  color: rgba(226,224,240,.38);
  line-height: 1.7;
}
#es-desc strong { color: var(--accent2); font-weight: 600; }

/* ── Intake widgets ──────────────────────────────────── */
.chat-widget {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin: 8px 0 4px;
  max-width: 88%;
  align-self: flex-start;
}

.widget-label {
  font-size: .82rem;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 10px;
}

.widget-hint {
  font-size: .74rem;
  color: var(--text-dim);
  margin-bottom: 8px;
}

.widget-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.widget-date-input {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 12px;
  color: var(--text);
  font-size: .85rem;
  color-scheme: dark;
}
.widget-date-input:focus {
  outline: none;
  border-color: var(--accent);
}

.widget-btn {
  background: var(--accent);
  color: #0f0e17;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity .15s;
}
.widget-btn:disabled { opacity: .35; cursor: default; }
.widget-btn:not(:disabled):hover { opacity: .85; }

.widget-optional {
  font-weight: 400;
  font-size: .75rem;
  color: var(--text-dim);
  margin-left: 4px;
}

.widget-skip-btn {
  display: block;
  width: 100%;
  margin-top: 10px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 12px;
  color: var(--text-dim);
  font-size: .78rem;
  cursor: pointer;
  text-align: center;
  transition: border-color .15s, color .15s;
}
.widget-skip-btn:hover {
  border-color: var(--accent);
  color: var(--text);
}

/* Place autocomplete */
.widget-place-wrap {
  position: relative;
  margin-bottom: 10px;
}

.widget-place-input {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  color: var(--text);
  font-size: .85rem;
}
.widget-place-input:focus {
  outline: none;
  border-color: var(--accent);
}

.widget-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  z-index: 100;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.widget-dropdown[hidden] { display: none; }

.widget-dd-item {
  padding: 9px 14px;
  font-size: .82rem;
  color: var(--text);
  cursor: pointer;
  border-bottom: 1px solid #1e1c38;
  transition: background .1s;
}
.widget-dd-item:last-child { border-bottom: none; }
.widget-dd-item:not(.widget-dd-loading):not(.widget-dd-empty):hover {
  background: var(--surface);
  color: var(--accent);
}
.widget-dd-loading { color: var(--text-dim); cursor: default; font-style: italic; }
.widget-dd-empty   { color: var(--text-dim); cursor: default; }

/* Domain selection widget */
.domain-widget {
  border-left-color: var(--accent2);
  max-width: 100%;
}

.domain-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.domain-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font-size: .8rem;
  transition: all .15s;
  white-space: nowrap;
}
.domain-card:hover:not(:disabled) {
  border-color: var(--accent2);
  background: var(--surface2);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
}
.domain-card .dc-icon { display: flex; align-items: center; opacity: .8; }
.domain-card:hover:not(:disabled) .dc-icon { opacity: 1; }
.domain-card .dc-label { font-weight: 600; font-size: .78rem; }

.dc-selected {
  border-color: var(--accent2) !important;
  background: #2a1f00 !important;
  color: var(--accent2) !important;
  opacity: 1 !important;
}
.dc-faded { opacity: 0.3; }

/* ── Planet mode legend ──────────────────────────────── */
.planet-legend {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  margin-bottom: 20px;
  overflow: hidden;
}
.planet-legend-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  user-select: none;
}
.planet-legend-header:hover { background: var(--surface2); }
.planet-legend-arrow { font-size: .7rem; color: var(--text-dim); }
.planet-legend-body { padding: 0 16px 14px; }

.pl-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid #1e1c38;
}
.pl-row:last-of-type { border-bottom: none; }
.pl-badge {
  display: inline-block;
  min-width: 52px;
  text-align: center;
  font-size: .72rem;
  font-weight: 700;
  border-radius: 4px;
  padding: 3px 8px;
  flex-shrink: 0;
  margin-top: 2px;
}
.pl-exalt  { background: #1a3a1a; color: #6fcf97; border: 1px solid #2d6a2d; }
.pl-debil  { background: #3a1a1a; color: #eb5757; border: 1px solid #6a2d2d; }
.pl-retro  { background: #2a1f00; color: #f59e0b; border: 1px solid #5a4000; }
.pl-normal { background: var(--surface2); color: var(--text-dim); border: 1px solid var(--border); }
.pl-info { font-size: .78rem; line-height: 1.55; color: var(--text); }
.pl-info strong { color: var(--accent2); }

.pl-exalt-table { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.pl-et-title {
  font-size: .72rem;
  color: var(--text-dim);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 8px;
}
.pl-exalt-table table { width: 100%; border-collapse: collapse; font-size: .76rem; }
.pl-exalt-table th {
  color: var(--text-dim);
  font-weight: 600;
  font-size: .7rem;
  text-align: left;
  padding: 3px 10px 3px 0;
  border-bottom: 1px solid var(--border);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.pl-exalt-table td {
  padding: 3px 10px 3px 0;
  color: var(--text);
  border-bottom: 1px solid #1e1c38;
}
.pl-exalt-table tr:last-child td { border-bottom: none; }

/* ── Print doc (hidden on screen) ───────────────────── */
#print-doc { display: none; }

/* ── Print / Save PDF ────────────────────────────────── */
@media print {
  @page { margin: 18mm 20mm; size: A4; }

  body > *:not(#print-doc) { display: none !important; }

  /* Global print reset — everything must fit within the page column */
  *, *::before, *::after {
    box-sizing: border-box !important;
    max-width: 100% !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }

  #print-doc {
    display: block !important;
    width: 100%;
    font-family: "Georgia", "Times New Roman", serif;
    font-size: 10.5pt;
    line-height: 1.7;
    color: #1C1C2E;
    background: #fff;
  }

  /* ════════════════════════════════
     COVER PAGE
  ════════════════════════════════ */
  .pd-cover {
    page-break-after: always;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 257mm;          /* A4 297mm − 2×18mm margins = ~261mm; a touch less to stay clean */
    padding: 14mm 16mm;
    background: #fff;
    text-align: center;
    outline: 4pt solid #C17F24;
    outline-offset: -8mm;
    position: relative;
  }

  /* corner ornaments */
  .pd-cover::before, .pd-cover::after {
    content: "✦";
    position: absolute;
    font-size: 18pt;
    color: #C17F24;
  }
  .pd-cover::before { top: 10mm; left: 12mm; }
  .pd-cover::after  { bottom: 10mm; right: 12mm; }

  .pd-logo { height: 52px; width: auto; margin-bottom: 5mm; }

  .pd-cover-rule {
    width: 60mm;
    height: 0;
    border-top: 1.5pt solid #C17F24;
    margin: 4mm auto;
  }

  /* Om + Ganesh SVG block */
  .pd-om-block { margin: 2mm 0 4mm; }
  .pd-ganesh-svg { width: 72mm; height: 72mm; display: block; margin: 0 auto 3mm; }
  .pd-om-namah {
    font-size: 17pt;
    font-weight: 700;
    color: #C17F24;
    letter-spacing: .06em;
    font-family: "Noto Serif Devanagari", "Mangal", serif;
  }

  /* Person name */
  .pd-person-name {
    font-size: 22pt;
    font-weight: 700;
    color: #1C2340;
    letter-spacing: .04em;
    margin: 4mm 0 3mm;
    text-transform: uppercase;
  }

  /* Birth details grid */
  .pd-birth-grid { width: 100%; max-width: 100mm; margin: 0 auto; }
  .pd-birth-row {
    display: flex;
    justify-content: space-between;
    border-bottom: 0.5pt solid #ddd;
    padding: 1.5mm 0;
    font-size: 10pt;
  }
  .pd-birth-row:last-child { border-bottom: none; }
  .pd-birth-label { color: #666; font-style: italic; }
  .pd-birth-val   { color: #1C2340; font-weight: 600; }

  .pd-cover-footer {
    position: absolute;
    bottom: 12mm;
    left: 0; right: 0;
    text-align: center;
    font-size: 8pt;
    color: #999;
    letter-spacing: .1em;
    text-transform: uppercase;
  }

  /* ════════════════════════════════
     CONTENT PAGES
  ════════════════════════════════ */

  /* Running header on every content page */
  .pd-section:first-of-type { padding-top: 0; }

  .pd-section {
    margin-bottom: 7mm;
  }

  .pd-section-title {
    font-size: 13pt;
    font-weight: 700;
    color: #7B2D3A;
    text-transform: uppercase;
    letter-spacing: .08em;
    border-left: 4pt solid #C17F24;
    padding: 1.5mm 0 1.5mm 4mm;
    margin: 0 0 4mm;
    page-break-after: avoid;
    background: #fdf8f0;
  }

  /* Prose headings inside sections */
  .pd-section h1, .pd-section h2, .pd-section h3 {
    page-break-after: avoid;
    color: #1C2340;
  }
  .pd-section h2 {
    font-size: 11.5pt;
    font-weight: 700;
    color: #1C2340;
    border-bottom: 0.5pt solid #C17F24;
    padding-bottom: 1mm;
    margin: 4mm 0 1.5mm;
    border-top: none;
    padding-top: 0;
  }
  .pd-section h3 {
    font-size: 10.5pt;
    font-weight: 700;
    color: #7B2D3A;
    margin: 3mm 0 1mm;
  }
  .pd-section p  { margin-bottom: 2mm; color: #1C1C2E; }
  .pd-section strong { color: #1C2340; font-weight: 700; }
  .pd-section em     { color: #7B2D3A; }
  .pd-section ul, .pd-section ol { padding-left: 6mm; margin-bottom: 2mm; }
  .pd-section li { margin-bottom: 1mm; }

  /* ── Charts ── */
  .vchart-row  { display: flex; flex-wrap: wrap; gap: 5px; width: 100%; }
  .vchart-wrap { break-inside: avoid; flex: 0 1 auto; max-width: 100%; }
  .vchart      { font-size: 6.5pt; width: auto !important; max-width: 100%; }
  .vchart table { font-size: 6.5pt; }

  /* All flex containers must wrap */
  .pd-birth-grid, .pd-details,
  [style*="display:flex"], [style*="display: flex"] {
    flex-wrap: wrap !important;
    max-width: 100% !important;
  }

  /* ── Tables (Dasha, BNN) ── */
  .dasha-table, .bnn-planet-table {
    font-size: 8.5pt;
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed;
    border-collapse: collapse;
    margin-bottom: 3mm;
    break-inside: avoid;
  }
  .dasha-table td, .dasha-table th,
  .bnn-planet-table td, .bnn-planet-table th {
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
  }
  .dasha-table th, .dasha-table td,
  .bnn-planet-table th, .bnn-planet-table td {
    border: 0.5pt solid #ccc;
    padding: 1.5mm 2.5mm;
    color: #1C1C2E !important;
    background: #fff !important;
  }
  .dasha-table th, .bnn-planet-table th {
    background: #fdf8f0 !important;
    color: #7B2D3A !important;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 7.5pt;
    letter-spacing: .05em;
  }
  .dasha-table tr:nth-child(even) td,
  .bnn-planet-table tr:nth-child(even) td { background: #fafafa !important; }

  /* ── Dasha chain / current period highlight ── */
  .dasha-current { background: #fdf0d8 !important; font-weight: 600; }

  /* ── Disclaimer ── */
  .pd-disclaimer {
    margin-top: 10mm;
    padding: 4mm 5mm;
    border: 0.5pt solid #ccc;
    background: #f9f9f9 !important;
    page-break-inside: avoid;
  }
  .pd-disclaimer-title {
    font-size: 10pt;
    font-weight: 700;
    color: #555;
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-bottom: 2mm;
  }
  .pd-disclaimer p {
    font-size: 8pt;
    color: #666 !important;
    line-height: 1.5;
    margin-bottom: 1.5mm;
  }

  /* ── Copyright ── */
  .pd-copyright {
    margin-top: 4mm;
    text-align: center;
    font-size: 7.5pt;
    color: #999 !important;
    letter-spacing: .06em;
    border-top: 0.5pt solid #ddd;
    padding-top: 2mm;
  }

  /* ── Global overrides for dark-theme elements ── */
  * {
    color: #1C1C2E !important;
    background: transparent !important;
    border-color: #ccc !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  /* Restore intentional colors */
  .pd-section-title        { color: #7B2D3A !important; background: #fdf8f0 !important; border-color: #C17F24 !important; }
  .pd-section h2           { color: #1C2340 !important; border-color: #C17F24 !important; }
  .pd-section h3           { color: #7B2D3A !important; }
  .pd-section strong       { color: #1C2340 !important; }
  .pd-om-namah             { color: #C17F24 !important; }
  .pd-person-name          { color: #1C2340 !important; }
  .pd-birth-label          { color: #666    !important; }
  .pd-birth-val            { color: #1C2340 !important; }
  .pd-disclaimer p         { color: #666    !important; }
  .pd-copyright            { color: #999    !important; }
  .pd-disclaimer           { background: #f9f9f9 !important; }
  .pd-cover                { background: #fff !important; outline-color: #C17F24 !important; }
  .dasha-table th, .bnn-planet-table th { background: #fdf8f0 !important; color: #7B2D3A !important; }
  img { filter: none !important; -webkit-filter: none !important; }
}

/* ── Stars / Nakshatra tab ──────────────────────────── */
.nak-janma-banner {
  background: linear-gradient(135deg, rgba(167,139,250,.18), rgba(245,158,11,.1));
  border: 1px solid rgba(167,139,250,.35);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 20px;
}
.nak-janma-top {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 10px;
}
.nak-janma-label {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-dim);
}
.nak-janma-star {
  font-size: 1.3rem; font-weight: 700; color: var(--accent);
}
.nak-janma-meta { color: var(--text); font-size: .92rem; }
.nak-janma-theme {
  font-size: .95rem; font-weight: 600; color: var(--accent2); margin-bottom: 8px;
}
.nak-janma-interp {
  font-size: .88rem; color: var(--text); line-height: 1.6;
}
.nak-janma-note {
  font-size: .78rem; color: var(--text-dim); font-style: italic;
}

.nak-section { margin-bottom: 28px; }
.nak-section-title {
  font-size: .75rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-dim); border-bottom: 1px solid var(--border);
  padding-bottom: 6px; margin-bottom: 10px;
}
.nak-chain-intro {
  font-size: .84rem; color: var(--text-dim); margin-bottom: 14px; line-height: 1.5;
}

.nak-table {
  width: 100%; border-collapse: collapse; font-size: .84rem;
}
.nak-table th {
  text-align: left; padding: 7px 10px; background: var(--surface2);
  color: var(--text-dim); font-weight: 600; font-size: .73rem;
  text-transform: uppercase; letter-spacing: .05em;
  border-bottom: 1px solid var(--border);
}
.nak-table td {
  padding: 8px 10px; border-bottom: 1px solid rgba(46,42,74,.5); vertical-align: middle;
}
.nak-table tr:last-child td { border-bottom: none; }
.nak-table tbody tr:hover td { background: rgba(167,139,250,.05); }

.nak-row-janma td { background: rgba(167,139,250,.08); }
.nak-row-janma:hover td { background: rgba(167,139,250,.13) !important; }

.nak-planet    { font-weight: 600; color: var(--text); }
.nak-name      { color: var(--accent); font-style: italic; }
.nak-lord      { color: var(--accent2); }
.nak-lord-natal { font-size: .82rem; color: var(--text-dim); }
.nak-star-badge { color: var(--accent2); font-size: .7rem; }
.nak-theme-cell { font-size: .78rem; color: var(--text-dim); font-style: italic; }
.nak-activation { font-size: .8rem; color: #34d399; }

/* Gana badges */
.nak-gana { font-size: .72rem; padding: 2px 7px; border-radius: 10px; font-weight: 600; }
.nak-gana-deva { background: rgba(52,211,153,.15); color: #34d399; }
.nak-gana-rak  { background: rgba(248,113,113,.15); color: #f87171; }
.nak-gana-man  { background: rgba(251,191,36,.15);  color: #fbbf24; }

/* Dignity */
.nak-dig-ex  { color: #34d399; font-weight: 600; }
.nak-dig-deb { color: #f87171; }
.nak-dig-own { color: var(--accent2); }

/* Delivery mechanism chain */
.nak-chain-item {
  margin-bottom: 14px; padding: 12px 16px;
  background: var(--surface2); border-radius: var(--radius);
  border-left: 3px solid var(--accent);
}
.nak-chain-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: .84rem; margin-bottom: 6px;
}
.nak-chain-meaning {
  font-size: .82rem; color: var(--text-dim); line-height: 1.5;
  padding-left: 4px;
}
.nak-lord-planet { font-weight: 600; color: var(--text); }
.nak-lord-nak    { color: var(--accent); font-style: italic; }
.nak-lord-house  { color: var(--accent2); font-weight: 500; }

/* ── Yogas tab ──────────────────────────────────────── */
#yogas-content { padding: 16px; overflow-y: auto; }

.yoga-header {
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.yoga-header-title {
  font-size: 1.05rem; font-weight: 600; color: var(--text);
  margin-bottom: 6px;
  display: flex; align-items: center; gap: 8px;
}
.yoga-count {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff;
  font-size: .75rem; font-weight: 700;
  border-radius: 99px; padding: 1px 8px; min-width: 22px;
}
.yoga-header-note {
  font-size: .82rem; color: var(--text-dim); line-height: 1.5;
}

.yoga-list { display: flex; flex-direction: column; gap: 10px; }

.yoga-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
}
.yoga-positive  { border-left-color: #10b981; }
.yoga-caution   { border-left-color: #f59e0b; }
.yoga-challenge { border-left-color: #6b7280; }

.yoga-card-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px; margin-bottom: 6px;
}
.yoga-name {
  font-size: .95rem; font-weight: 600; color: var(--text);
  line-height: 1.3;
}
.yoga-badge {
  font-size: .7rem; font-weight: 600; white-space: nowrap;
  border-radius: 4px; padding: 2px 7px; flex-shrink: 0;
}
.yoga-badge-positive  { background: rgba(16,185,129,.15); color: #10b981; }
.yoga-badge-caution   { background: rgba(245,158,11,.15);  color: #f59e0b; }
.yoga-badge-challenge { background: rgba(107,114,128,.15); color: #9ca3af; }

.yoga-condition {
  font-size: .78rem; color: var(--text-dim);
  margin-bottom: 6px;
  font-style: italic;
}
.yoga-effect {
  font-size: .83rem; color: var(--text); line-height: 1.55;
}
.nak-lord-arrow  { color: var(--text-dim); font-size: .8rem; }

/* ── Reading-type toggle (segmented pill control) ───── */
#reading-type-toggle { display: none; }

/* ── Reading-type choice widget (inline in chat) ─────── */
.reading-type-widget .reading-type-btns {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.rt-choice-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: border-color .15s, background .15s;
}
.rt-choice-btn:hover:not(:disabled) {
  border-color: var(--accent);
  background: rgba(167,139,250,.08);
}
.rt-choice-btn.dc-selected {
  border-color: var(--accent);
  background: rgba(167,139,250,.15);
}
.rt-choice-btn:disabled { opacity: .45; cursor: default; }
.rtc-icon { font-size: 1.4rem; flex-shrink: 0; width: 32px; text-align: center; }
.rtc-text { display: flex; flex-direction: column; }
.rtc-title { font-size: .92rem; font-weight: 600; }
.rtc-desc  { font-size: .78rem; color: var(--text-dim); margin-top: 2px; }

/* ── Match Making tabs bar — same structure as #analysis-tabs ── */
#match-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  align-items: center;
  flex-shrink: 0;
}

/* ── Match Making empty state — mirrors #empty-state with ♥ theme ── */
#empty-state-match {
  position: relative; overflow: hidden;
  min-height: 100%; display: flex;
  align-items: center; justify-content: center;
  padding: 48px 36px 52px;
  background: linear-gradient(150deg, #1c0a2e 0%, #2a1040 40%, #1c0e36 65%, #0d1224 100%);
}
#empty-state-match::before {
  content: '';
  position: absolute; width: 480px; height: 480px; border-radius: 50%;
  border: 1px solid rgba(236,72,153,.08);
  top: 50%; left: 50%; transform: translate(-50%,-50%);
  animation: es-spin 50s linear infinite; pointer-events: none;
}
#empty-state-match::after {
  content: '';
  position: absolute; width: 300px; height: 300px; border-radius: 50%;
  border: 1px dashed rgba(167,139,250,.09);
  top: 50%; left: 50%; transform: translate(-50%,-50%);
  animation: es-spin 32s linear infinite reverse; pointer-events: none;
}
.esm-stars { position: absolute; inset: 0; pointer-events: none; }
.esm-stars::before, .esm-stars::after {
  content: ''; position: absolute; border-radius: 50%; background: transparent;
}
.esm-stars::before {
  width: 2px; height: 2px; top: 0; left: 0;
  box-shadow:
    60px 45px rgba(236,72,153,.5),  140px 90px rgba(167,139,250,.4),
    220px 25px rgba(255,255,255,.3), 300px 140px rgba(236,72,153,.45),
    380px 55px rgba(245,158,11,.4),  430px 185px rgba(255,255,255,.3),
    50px 230px rgba(167,139,250,.4), 125px 290px rgba(236,72,153,.5),
    195px 355px rgba(255,255,255,.25),265px 265px rgba(245,158,11,.35),
    335px 325px rgba(167,139,250,.4), 400px 255px rgba(255,255,255,.25),
    25px 360px rgba(236,72,153,.4),  95px 425px rgba(245,158,11,.3),
    175px 455px rgba(255,255,255,.2), 350px 405px rgba(167,139,250,.4),
    445px 360px rgba(236,72,153,.3),  80px 135px rgba(255,255,255,.35);
  animation: es-twinkle 7s ease-in-out infinite alternate;
}
.esm-stars::after {
  width: 1px; height: 1px; top: 0; left: 0;
  box-shadow:
    45px 70px rgba(255,255,255,.4),  130px 48px rgba(236,72,153,.5),
    210px 150px rgba(245,158,11,.35),280px 225px rgba(255,255,255,.4),
    350px 120px rgba(167,139,250,.4),415px 200px rgba(236,72,153,.45),
    65px 320px rgba(255,255,255,.35),145px 380px rgba(167,139,250,.4);
  animation: es-twinkle 9s ease-in-out infinite alternate-reverse;
}
.esm-glow-orb { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(60px); }
.esm-orb-a { width: 260px; height: 260px; background: rgba(236,72,153,.1);   bottom: -80px; left: -60px; }
.esm-orb-b { width: 180px; height: 180px; background: rgba(167,139,250,.08); top: -50px; right: 40px; }
#esm-inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
  gap: 14px; max-width: 300px;
}
#esm-symbol {
  font-size: 2.8rem; color: #ec4899; line-height: 1; margin-bottom: 4px;
  animation: esm-pulse 3.5s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(236,72,153,.35));
}
@keyframes esm-pulse {
  0%,100% { opacity: .55; filter: drop-shadow(0 0 8px rgba(236,72,153,.25)); }
  50%      { opacity: 1;   filter: drop-shadow(0 0 24px rgba(236,72,153,.7)); }
}
#esm-headline { font-size: 1.45rem; font-weight: 700; line-height: 1.35; color: rgba(226,224,240,.8); margin: 0; }
#esm-desc { font-size: .78rem; color: rgba(226,224,240,.38); line-height: 1.7; }
#esm-desc strong { color: #ec4899; font-weight: 600; }

/* Match tab content panels — zero padding on wrapper; inner divs handle it */
#match-score-content,
#match-charts-content,
#match-dasha-content,
#match-navamsa-content { padding: 14px; overflow-y: auto; }
#match-report-content  { padding: 0; overflow-y: auto; }
#match-report-text     { padding: 20px; }

.match-persons-card {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 10px; padding: 14px 20px; margin-bottom: 14px;
  flex-wrap: wrap; text-align: center;
}
.match-person-name { font-size: 1rem; font-weight: 700; color: var(--text); }
.match-person-nak  { font-size: .82rem; color: var(--accent); margin-top: 2px; }
.match-person-meta { font-size: .75rem; color: var(--text-dim); margin-top: 2px; }
.match-heart { font-size: 1.6rem; color: #ec4899; flex-shrink: 0; }

.match-score-card {
  display: flex; justify-content: center;
  margin-bottom: 14px;
}
.match-total-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.match-ring { width: 120px; height: 120px; }
.match-verdict-label {
  font-size: .85rem; font-weight: 700; letter-spacing: .03em;
  padding: 3px 12px; border-radius: 20px;
}
.match-verdict-excellent { background: rgba(16,185,129,.15); color: #10b981; }
.match-verdict-good      { background: rgba(34,197,94,.12);  color: #22c55e; }
.match-verdict-average   { background: rgba(245,158,11,.15); color: #f59e0b; }
.match-verdict-challenge { background: rgba(239,68,68,.12);  color: #ef4444; }

.match-koota-wrap  { margin-bottom: 14px; }
.match-koota-title {
  font-size: .82rem; font-weight: 600; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px;
}
.match-koota-table { width: 100%; border-collapse: collapse; font-size: .83rem; }
.match-koota-table th {
  text-align: left; padding: 5px 8px;
  border-bottom: 1px solid var(--border);
  color: var(--text-dim); font-weight: 600; font-size: .75rem;
}
.match-koota-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); }
.mk-name  { font-weight: 600; color: var(--text); white-space: nowrap; }
.mk-max   { color: var(--text-dim); }
.mk-meaning { color: var(--text-dim); font-size: .78rem; }
.mk-score span { font-weight: 700; padding: 1px 6px; border-radius: 4px; font-size: .85rem; }
.mk-high  { background: rgba(16,185,129,.15); color: #10b981; }
.mk-mid   { background: rgba(245,158,11,.12); color: #f59e0b; }
.mk-low   { background: rgba(239,68,68,.10);  color: #ef4444; }

.match-sup-wrap  { margin-bottom: 10px; }
.match-sup-grid  { display: flex; flex-wrap: wrap; gap: 8px; }
.match-sup-item  {
  display: flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 6px;
  font-size: .8rem; font-weight: 500;
}
.sup-pass { background: rgba(16,185,129,.12); color: #10b981; }
.sup-fail { background: rgba(107,114,128,.1);  color: #9ca3af; }
.sup-icon { font-weight: 700; }

/* Match charts */
.match-chart-section { margin-bottom: 20px; }
.match-chart-title {
  font-size: .85rem; font-weight: 600; color: var(--text-dim);
  margin-bottom: 8px; padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

/* Match report — mirrors #report-content prose styles */
#match-report-content {
  font-size: .88rem;
  line-height: 1.7;
  color: var(--text);
}
#match-report-text h1, #match-report-text h2, #match-report-text h3 { color: var(--accent); margin: 1.2em 0 .4em; }
#match-report-text h1 { font-size: 1.2rem; }
#match-report-text h2 { font-size: 1.05rem; border-bottom: 1px solid var(--border); padding-bottom: .3em; }
#match-report-text h3 { font-size: .95rem; color: var(--accent2); }
#match-report-text p  { margin-bottom: .7em; }
#match-report-text strong { color: var(--accent2); }
#match-report-text ul, #match-report-text ol { padding-left: 1.4em; margin-bottom: .7em; }
/* RAG references block inside match report panel */
#match-report-content .rag-references { margin: 0 20px 20px; }

/* Match dasha — two-column layout */
.match-dasha-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.match-dasha-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
}

/* Match Navamsa — two-column layout */
.match-navamsa-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.match-navamsa-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
}
.match-ind-title {
  font-size: .82rem; font-weight: 600; color: var(--text-dim);
  margin: 14px 0 6px; padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.match-ind-table { width: 100%; border-collapse: collapse; font-size: .82rem; margin-top: 4px; }
.match-ind-label { color: var(--text-dim); padding: 5px 8px 5px 0; width: 40%; vertical-align: top; }
.match-ind-value { color: var(--text);     padding: 5px 0;         }
.match-ind-table tr { border-bottom: 1px solid var(--border); }
.match-ind-table tr:last-child { border-bottom: none; }

/* Mangal Dosha banner */
.match-dosha-banner {
  border-radius: 8px; padding: 10px 14px; margin-bottom: 14px;
  font-size: .84rem; line-height: 1.5;
}
.dosha-active  { background: #2a1a1a; border: 1px solid #6a2d2d; color: #f87171; }
.dosha-cancel  { background: #1a2a1a; border: 1px solid #2d6a2d; color: #6fcf97; }

@media (max-width: 900px) {
  .match-dasha-wrap, .match-navamsa-wrap { grid-template-columns: 1fr; }
}

/* ── Cosmos star particles (welcome banner) ─────────── */
.es-cosmos-star {
  position: absolute;
  z-index: 3;
  width: var(--size, 1px);
  height: var(--size, 1px);
  border-radius: 50%;
  background: var(--clr, var(--accent));
  opacity: 0;
  pointer-events: none;
  animation: cosmos-twinkle var(--dur, 3.5s) var(--delay, 0s) ease-in-out infinite;
}

@keyframes cosmos-twinkle {
  0%, 100% { opacity: 0;                   transform: scale(1); }
  50%       { opacity: var(--mx, 0.45);     transform: scale(2); }
}

.ll-sparkle-star {
  position: absolute;
  z-index: 1;
  width: var(--size, 1px);
  height: var(--size, 1px);
  border-radius: 50%;
  background: var(--clr, rgba(167,139,250,.8));
  opacity: 0;
  pointer-events: none;
  animation: cosmos-twinkle var(--dur, 3.5s) var(--delay, 0s) ease-in-out infinite;
}

/* Subtle nebula glow behind welcome banner */
#report-content {
  position: relative;
}
#report-content::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 35% 40%, rgba(167,139,250,.055) 0%, transparent 55%),
    radial-gradient(ellipse at 72% 65%, rgba(245,158,11,.04)   0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
  animation: nebula-drift 14s ease-in-out infinite alternate;
}
#report-content > * { position: relative; z-index: 1; }

@keyframes nebula-drift {
  0%   { opacity: .6; transform: scale(1); }
  100% { opacity: 1;  transform: scale(1.04); }
}

/* ── Desktop panel slide-in ─────────────────────────── */
@media (min-width: 769px) {
  /* Hide panel until content is ready */
  #analysis-panel {
    display: none;
  }

  /* Slide in from the right when revealed */
  body.panel-visible #analysis-panel {
    display: flex;
    animation: panel-reveal 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }

  @keyframes panel-reveal {
    from { opacity: 0; transform: translateX(36px); }
    to   { opacity: 1; transform: translateX(0); }
  }

  /* Chat panel fills / centers when analysis panel is closed */
  body:not(.panel-visible) #chat-panel {
    width: 100%;
    max-width: 700px;
    height: calc(100vh - 100px);
    border: 1px solid rgba(167,139,250,.22) !important;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(167,139,250,.06), 0 24px 80px rgba(0,0,0,.55);
  }
  body:not(.panel-visible) #main {
    justify-content: center;
    align-items: center;
    padding: 20px;
  }
}

/* ── Login page mobile ──────────────────────────────── */
@media (max-width: 700px) {
  #login-overlay { padding: 0; align-items: stretch; }
  #login-split {
    flex-direction: column;
    border-radius: 0;
    max-height: none;
    min-height: 100%;
    overflow-y: auto;
    border: none;
    box-shadow: none;
  }
  #login-left {
    flex: none;
    padding: 44px 28px 36px;
  }
  #ll-headline { font-size: 1.85rem; }
  #login-left::before, #login-left::after { display: none; }
  #login-right {
    flex: none;
    padding: 40px 28px 52px;
    border-left: none;
    border-top: 1px solid rgba(167,139,250,.1);
  }
  #login-card { max-width: 100%; }
}

/* ── Mobile bottom nav (hidden on desktop) ──────────── */
#mobile-nav { display: none; }

/* ── Mobile layout ≤ 768px ──────────────────────────── */
@media (max-width: 768px) {

  /* Dynamic viewport height so browser chrome doesn't cut off the bottom */
  body {
    height: 100vh;   /* fallback for older browsers */
    height: 100dvh;  /* dynamic viewport — must come LAST to win */
  }

  /* Compact topbar */
  #topbar        { height: 56px; padding: 0 10px; gap: 8px; }
  #topbar-logo   { height: 36px; }
  #user-name     { display: none; }
  #user-chip     { padding: 3px 8px 3px 4px; }

  /* Single-panel main area — stacked column, only one child visible */
  #main { flex-direction: column; }

  #chat-panel {
    width: 100%;
    min-width: 0;
    border-right: none;
    border-bottom: 1px solid var(--border);
    flex: 1;
    min-height: 0;
  }
  #analysis-panel {
    display: flex !important;  /* override desktop hide */
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
    width: 100%;
    flex: 1;
    min-height: 0;
  }

  #chat-panel {
    transition: none;
    max-width: none !important;
    width: 100% !important;
  }

  /* Show/hide panels based on active mobile view */
  body.mobile-chat     #analysis-panel { display: none !important; }
  body.mobile-analysis #chat-panel     { display: none; }

  /* Bottom navigation bar — part of the body flex column */
  #mobile-nav {
    display: flex;
    height: 64px;
    flex-shrink: 0;
    background: var(--surface);
    border-top: 1px solid var(--border);
    z-index: 200;
  }
  .mob-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: transparent;
    border: none;
    color: var(--text-dim);
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .02em;
    cursor: pointer;
    position: relative;
    transition: color .15s;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
  }
  .mob-tab.active      { color: var(--accent); }
  .mob-tab-icon        { font-size: 1.3rem; line-height: 1; }
  .mob-tab-label       { font-size: .72rem; }
  .mob-badge {
    position: absolute;
    top: 8px;
    right: calc(50% - 22px);
    width: 7px;
    height: 7px;
    background: var(--accent2);
    border-radius: 50%;
    display: none;
  }

  /* Analysis tab bar: horizontal scroll, no wrap */
  #analysis-tabs,
  #match-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #analysis-tabs::-webkit-scrollbar,
  #match-tabs::-webkit-scrollbar { display: none; }

  /* Chat domain pills: allow wrap */
  .chat-domain-pills { gap: 5px; flex-wrap: wrap; }

  /* Vedic chart grid: scale for phone widths */
  .vchart-grid {
    grid-template-columns: repeat(4, 74px);
    grid-template-rows:    repeat(4, 74px);
  }
  .vchart-cell { font-size: .52rem; }

  /* Login card: full-width on small screens */
  #login-card { padding: 36px 24px 30px; }

  /* Widget cards: full width */
  .chat-widget { max-width: 100%; }
  /* Dasha guide: collapse headline on small screens */
  .dasha-guide-headline { display: none; }
  /* Stars summary: tighter paragraphs */
  .stars-sum-para { font-size: .8rem; }

  /* ── Mobile chat & messages polish ─────────────────── */
  #messages {
    padding: 14px 12px;
    gap: 10px;
  }

  .msg {
    max-width: 92%;
    font-size: .88rem;
    padding: 10px 13px;
  }

  /* Input area: compact, full-width pill */
  #input-area {
    padding: 10px 12px;
    gap: 8px;
    /* safe area for iOS bottom bar */
    padding-bottom: max(10px, env(safe-area-inset-bottom, 10px));
  }

  #user-input {
    font-size: .9rem;
    padding: 10px 14px;
    border-radius: 22px;
    min-height: 42px;
  }

  #send-btn {
    width: 42px;
    height: 42px;
    min-width: 42px;
  }

  /* Analyse buttons — full width, bigger touch target */
  #analyse-wrap { padding: 10px 12px; }
  #analyse-btn,
  #analyse-match-btn {
    padding: 13px;
    font-size: .92rem;
    border-radius: 12px;
  }

  /* Domain pills: slightly smaller */
  .chat-domain-btn { font-size: .72rem; padding: 5px 11px; }

  /* Status bar: compact */
  #status-bar { padding: 6px 14px; font-size: .72rem; min-height: 28px; }

  /* Analysis tabs: compact */
  #analysis-tabs, #match-tabs {
    padding: 6px 10px 0;
    gap: 4px;
  }
  .tab-btn { padding: 5px 10px; font-size: .72rem; }

  /* Tab content: tighter padding */
  .tab-content { padding: 14px 12px; }

  /* Mobile bottom nav: polished */
  #mobile-nav {
    height: 60px;
    box-shadow: 0 -1px 0 var(--border), 0 -8px 24px rgba(0,0,0,.3);
  }
  .mob-tab {
    position: relative;
    gap: 3px;
    padding-top: 4px;
  }
  .mob-tab.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 3px;
    background: var(--accent);
    border-radius: 0 0 3px 3px;
  }
  .mob-tab.active .mob-tab-icon { filter: drop-shadow(0 0 6px rgba(167,139,250,.7)); }
  .mob-tab-icon { font-size: 1.25rem; }
  .mob-tab-label { font-size: .65rem; letter-spacing: .02em; }

  /* User chip: tighter */
  #user-chip { gap: 5px; padding: 3px 8px 3px 4px; border-radius: 22px; }
  #user-avatar { width: 26px; height: 26px; }
  #reset-btn { padding: 3px 10px; font-size: .68rem; }
  #logout-btn { padding: 2px 0 2px 10px; font-size: .72rem; }

  /* Phase badge: compact */
  #phase-badge { font-size: .62rem; padding: 2px 7px; }

  /* Report content: smaller headings */
  #report-content h1 { font-size: 1.05rem; }
  #report-content h2 { font-size: .92rem; }
  #report-content h3 { font-size: .82rem; }
  #report-content p  { font-size: .84rem; }

  /* Vedic chart: slightly larger cells than before */
  .vchart-grid {
    grid-template-columns: repeat(4, 78px);
    grid-template-rows:    repeat(4, 78px);
  }
  .vchart-cell { padding: 5px 6px; }
  .vp-name { font-size: .74rem; }

  /* Dasha chain grid */
  .dasha-chain-row {
    grid-template-columns: 120px 90px 1fr;
    font-size: .78rem;
    padding: 6px 10px;
  }
  .dasha-chain-dur { display: none; }

  /* Nakshatra table: hide less important columns */
  .nak-table th:nth-child(4),
  .nak-table td:nth-child(4),
  .nak-table th:nth-child(8),
  .nak-table td:nth-child(8) { display: none; }

  /* Save PDF button */
  #save-report-btn, #save-report-btn-match { font-size: .68rem; padding: 4px 9px; }

  /* Domain bar cards: wrap nicely */
  .domain-card { padding: 7px 12px; font-size: .76rem; }

  /* Login card: full-width on small screens */
  #login-card { padding: 36px 24px 30px; }
}

/* ── Dasha Life Timing Guide ─────────────────────────────── */
.dasha-guide-intro {
  font-size: .84rem;
  color: var(--text-dim);
  line-height: 1.65;
  margin-bottom: 18px;
  padding: 10px 14px;
  background: rgba(167,139,250,.04);
  border-radius: 8px;
  border-left: 3px solid rgba(167,139,250,.3);
}
.dasha-guide-timeline { display: flex; flex-direction: column; gap: 10px; }
.dasha-guide-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--planet-clr, var(--accent));
  border-radius: 10px;
  overflow: hidden;
  transition: box-shadow .2s;
}
.dasha-guide-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,.25); }
.dasha-guide-current {
  border-color: var(--planet-clr, var(--accent));
  background: #1a1838;
  box-shadow: 0 0 28px rgba(167,139,250,.07);
}
.dasha-guide-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px 10px;
  background: rgba(0,0,0,.12);
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.dasha-guide-icon {
  width: 36px; height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--planet-clr, var(--accent));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--planet-clr, var(--accent));
  flex-shrink: 0;
}
.dasha-guide-title-area { flex: 1; min-width: 0; }
.dasha-guide-name {
  font-size: .9rem;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.dasha-guide-period { font-size: .72rem; color: var(--text-dim); margin-top: 2px; }
.dasha-guide-headline {
  font-size: .76rem;
  font-weight: 600;
  color: var(--planet-clr, var(--accent));
  text-align: right;
  flex-shrink: 0;
  max-width: 200px;
  line-height: 1.35;
}
.dasha-guide-body { padding: 12px 16px 14px; }
.dasha-guide-desc {
  font-size: .82rem;
  color: var(--text-dim);
  line-height: 1.65;
  margin-bottom: 10px;
}
.dasha-guide-best-label {
  font-size: .7rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
  margin-bottom: 6px;
}
.dasha-guide-best-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 10px;
}
.dasha-guide-best-list li {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px;
  padding: 3px 11px;
  font-size: .72rem;
  color: var(--text-dim);
}
.dasha-guide-caution {
  font-size: .75rem;
  color: var(--accent2);
  background: rgba(245,158,11,.06);
  border: 1px solid rgba(245,158,11,.14);
  border-radius: 6px;
  padding: 6px 10px;
  line-height: 1.5;
}

/* ── Stars life summary ──────────────────────────────────── */
.stars-summary { margin-top: 4px; }
.stars-summary-body { padding: 4px 0; }
.stars-sum-para {
  font-size: .84rem;
  line-height: 1.75;
  color: var(--text-dim);
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid #1e1c38;
}
.stars-sum-para:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.stars-sum-para strong { color: var(--accent2); font-weight: 600; -webkit-text-fill-color: var(--accent2); }
.stars-sum-para em { color: var(--accent); font-style: normal; }

/* ── Talk to Your Horoscope ──────────────────────────── */
#followup-fab {
  position: absolute;
  bottom: 48px;
  right: 16px;
  z-index: 40;
  background: linear-gradient(135deg, var(--accent) 0%, #7c3aed 100%);
  color: #fff;
  border: none;
  border-radius: 24px;
  padding: 10px 18px;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .06em;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(167,139,250,.45);
  transition: transform .15s, box-shadow .15s;
}
#followup-fab:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(167,139,250,.6); }

#followup-drawer {
  position: absolute;
  top: 40px;
  right: 0;
  bottom: 0;
  width: 380px;
  max-width: 100%;
  background: #100e28;
  border-left: 1px solid rgba(167,139,250,.18);
  display: flex;
  flex-direction: column;
  z-index: 50;
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
  box-shadow: -8px 0 32px rgba(0,0,0,.45);
}
#followup-drawer.open { transform: translateX(0); }

#followup-drawer-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid rgba(167,139,250,.12);
  flex-shrink: 0;
}
#followup-drawer-title {
  flex: 1;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .07em;
  color: var(--accent);
}
#followup-quota-chip {
  font-size: .68rem;
  font-weight: 700;
  color: var(--accent2);
  background: rgba(245,158,11,.12);
  border: 1px solid rgba(245,158,11,.3);
  border-radius: 12px;
  padding: 2px 10px;
}
#followup-quota-chip.exhausted { color: var(--text-dim); background: none; border-color: var(--border); }
#followup-close {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: .9rem;
  padding: 2px 6px;
  border-radius: 4px;
  transition: color .15s;
}
#followup-close:hover { color: var(--text); }

#followup-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.fu-msg {
  max-width: 90%;
  font-size: .82rem;
  line-height: 1.65;
  border-radius: 12px;
  padding: 10px 14px;
}
.fu-msg.user {
  align-self: flex-end;
  background: rgba(167,139,250,.15);
  border: 1px solid rgba(167,139,250,.22);
  color: var(--text);
}
.fu-msg.assistant {
  align-self: flex-start;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  color: var(--text);
}
.fu-msg.assistant strong { color: var(--accent2); }
.fu-typing {
  align-self: flex-start;
  font-size: .75rem;
  color: var(--text-dim);
  padding: 4px 0;
  animation: fu-blink 1.2s ease-in-out infinite;
}
@keyframes fu-blink { 0%,100%{opacity:.4} 50%{opacity:1} }
.fu-empty {
  align-self: center;
  text-align: center;
  font-size: .78rem;
  color: var(--text-dim);
  opacity: .7;
  padding: 20px 8px;
  line-height: 1.7;
}
.fu-no-charge-note {
  font-size: .72rem;
  color: var(--text-dim);
  opacity: .65;
  padding: 4px 12px 8px;
  font-style: italic;
}
.fu-exhausted {
  align-self: center;
  text-align: center;
  font-size: .78rem;
  color: var(--text-dim);
  border: 1px dashed var(--border);
  border-radius: 10px;
  padding: 12px 16px;
  line-height: 1.7;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.fu-reset-btn {
  font-size: .75rem;
  padding: 5px 14px;
  border-radius: 6px;
  border: 1px solid rgba(var(--accent-rgb, 139, 92, 246), .5);
  background: rgba(var(--accent-rgb, 139, 92, 246), .1);
  color: var(--accent, #8b5cf6);
  cursor: pointer;
  transition: background .15s;
}
.fu-reset-btn:hover {
  background: rgba(var(--accent-rgb, 139, 92, 246), .2);
}

#followup-input-wrap {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding: 12px 14px;
  border-top: 1px solid rgba(167,139,250,.1);
  flex-shrink: 0;
}
#followup-input {
  flex: 1;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px 12px;
  color: var(--text);
  font-size: .82rem;
  resize: none;
  line-height: 1.5;
  font-family: inherit;
  transition: border-color .15s;
}
#followup-input:focus { outline: none; border-color: var(--accent); }
#followup-input:disabled { opacity: .45; cursor: not-allowed; }
#followup-send {
  background: var(--accent);
  border: none;
  border-radius: 10px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity .15s, background .15s;
}
#followup-send:disabled { opacity: .35; cursor: not-allowed; }
#followup-send:not(:disabled):hover { background: #7c3aed; }

@media (max-width: 768px) {
  #followup-drawer { width: 100%; top: 0; border-left: none; border-top: 1px solid rgba(167,139,250,.18); }
  #followup-fab { bottom: 60px; }
}

/* ══════════════════════════════════════════════════════════
   Navigation & journey UX (stepper, drawer, post-actions)
   ══════════════════════════════════════════════════════════ */

/* ── Journey stepper ── */
#journey-stepper {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
}
.js-step {
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: .45;
  transition: opacity .2s;
}
.js-step.active, .js-step.done { opacity: 1; }
.js-dot {
  width: 20px; height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .62rem;
  font-weight: 700;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text-dim);
  flex-shrink: 0;
}
.js-step.active .js-dot {
  background: var(--accent);
  border-color: var(--accent);
  color: #17142a;
  box-shadow: 0 0 10px rgba(167, 139, 250, .45);
}
.js-step.done .js-dot {
  background: transparent;
  border-color: var(--success);
  color: var(--success);
}
.js-label {
  font-size: .7rem;
  color: var(--text-dim);
  white-space: nowrap;
}
.js-step.active .js-label { color: var(--text); font-weight: 600; }
.js-step.done .js-label   { color: var(--success); }
.js-line {
  width: 18px; height: 1px;
  background: var(--border);
  flex-shrink: 0;
}
.js-line.done { background: var(--success); opacity: .5; }

/* ── Topbar buttons ── */
#history-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 8px;
  padding: 4px 10px;
  font-size: .9rem;
  cursor: pointer;
  margin-right: 10px;
  transition: all .15s;
}
#history-btn:hover { color: var(--text); border-color: var(--accent); }
#new-btn {
  background: var(--accent);
  border: none;
  color: #17142a;
  border-radius: 8px;
  padding: 5px 12px;
  font-size: .74rem;
  font-weight: 700;
  cursor: pointer;
  margin-right: 8px;
  transition: filter .15s;
}
#new-btn:hover { filter: brightness(1.12); }

/* ── Sessions drawer ── */
#sessions-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 8, 20, .55);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s;
  z-index: 990;
}
body.drawer-open #sessions-backdrop { opacity: 1; pointer-events: auto; }
#sessions-drawer {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: 320px;
  max-width: 86vw;
  background: var(--surface);
  border-right: 1px solid var(--border);
  transform: translateX(-102%);
  transition: transform .24s ease;
  z-index: 995;
  display: flex;
  flex-direction: column;
}
body.drawer-open #sessions-drawer { transform: translateX(0); }
#sd-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
#sd-title { font-weight: 700; font-size: .9rem; color: var(--accent); }
#sd-close {
  background: none; border: none;
  color: var(--text-dim);
  font-size: 1rem;
  cursor: pointer;
}
#sd-close:hover { color: var(--text); }
#sd-actions {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.sd-new-btn {
  flex: 1;
  padding: 8px 0;
  border-radius: 9px;
  border: 1px solid var(--accent);
  background: rgba(167, 139, 250, .1);
  color: var(--accent);
  font-size: .76rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}
.sd-new-btn:hover { background: var(--accent); color: #17142a; }
#sd-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}
.sd-empty {
  color: var(--text-dim);
  font-size: .8rem;
  text-align: center;
  padding: 28px 12px;
  line-height: 1.7;
}
.sd-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all .15s;
}
.sd-item:hover { background: var(--surface2); }
.sd-item.active {
  background: var(--surface2);
  border-color: var(--accent);
}
.sd-item-icon { color: var(--accent2); font-size: .95rem; flex-shrink: 0; }
.sd-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sd-item-name {
  font-size: .8rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sd-item-meta { font-size: .66rem; color: var(--text-dim); }
.sd-del {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: .72rem;
  cursor: pointer;
  opacity: 0;
  padding: 4px 6px;
  transition: all .15s;
}
.sd-item:hover .sd-del { opacity: .7; }
.sd-del:hover { opacity: 1 !important; color: var(--danger); }
#sd-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
}
#delete-all-btn {
  width: 100%;
  padding: 8px 0;
  border-radius: 9px;
  border: 1px solid rgba(248, 113, 113, .4);
  background: transparent;
  color: var(--danger);
  font-size: .74rem;
  cursor: pointer;
  transition: all .15s;
}
#delete-all-btn:hover { background: rgba(248, 113, 113, .12); }

/* ── Post-reading next actions ── */
#post-actions {
  display: none;
  gap: 8px;
  padding: 10px 14px;
  background: var(--surface);
  border-top: 1px solid var(--border);
}
.pa-btn {
  flex: 1;
  padding: 9px 8px;
  border-radius: 10px;
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}
.pa-primary {
  border: 1px solid var(--accent);
  background: rgba(167, 139, 250, .12);
  color: var(--accent);
}
.pa-primary:hover { background: var(--accent); color: #17142a; }
.pa-secondary {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
}
.pa-secondary:hover { color: var(--text); border-color: var(--accent); }

/* ── Domain pill states (done / active) ── */
.chat-domain-btn.dc-done {
  border-color: rgba(52, 211, 153, .45);
  color: var(--success);
}
.chat-domain-btn.dc-active {
  border-color: var(--accent);
  background: rgba(167, 139, 250, .14);
  color: var(--accent);
  cursor: default;
}

/* ── Saved-details note + escape hatch ── */
.edit-details-note { text-align: center; margin: 2px 0 8px; }
.widget-link-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: .72rem;
  text-decoration: underline;
  cursor: pointer;
}
.widget-link-btn:hover { color: var(--accent); }

/* ── Per-tab empty states ── */
.tab-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 60px 24px;
  color: var(--text-dim);
  font-size: .84rem;
  text-align: center;
}
.tab-empty-symbol { font-size: 1.6rem; color: var(--accent); opacity: .5; }

/* ── Mobile ── */
@media (max-width: 768px) {
  .js-label { display: none; }
  .js-line  { width: 10px; }
  #journey-stepper { gap: 4px; }
  #new-btn { padding: 4px 9px; font-size: .68rem; }
  #post-actions { flex-direction: column; }
}

/* ── DOB widget: type-first with optional calendar ── */
.widget-dob-row { position: relative; }
.widget-cal-btn {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0 10px;
  font-size: .9rem;
  cursor: pointer;
  transition: border-color .15s;
}
.widget-cal-btn:hover { border-color: var(--accent); }
.widget-native-date {
  position: absolute;
  left: 0; bottom: 0;
  width: 1px; height: 1px;
  opacity: 0;
  border: 0; padding: 0;
  pointer-events: none;
}
.widget-error {
  color: var(--danger);
  font-size: .7rem;
  min-height: 1em;
  margin-top: 4px;
}

/* ══════════════════════════════════════════════════════════
   At-a-Glance dashboard
   ══════════════════════════════════════════════════════════ */
#glance-card:empty { display: none; }
#glance-card {
  background: linear-gradient(160deg, var(--surface) 0%, var(--surface2) 100%);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px 14px;
  margin-bottom: 22px;
}
.gl-title {
  font-size: .78rem;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 12px;
}
.gl-section { margin-bottom: 14px; }
.gl-section:last-child { margin-bottom: 2px; }
.gl-label {
  font-size: .68rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 7px;
}
.gl-sub { text-transform: none; letter-spacing: 0; opacity: .8; }

/* Timeline ribbon */
.gl-timeline-wrap { position: relative; }
.gl-timeline {
  display: flex;
  gap: 2px;
  height: 40px;
  border-radius: 8px;
  overflow: hidden;
}
.gl-seg {
  position: relative;
  background: color-mix(in srgb, var(--seg) 26%, transparent);
  border-top: 3px solid var(--seg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 6px;
  min-width: 0;
  overflow: hidden;
}
.gl-seg-past { opacity: .55; }
.gl-seg-now {
  background: color-mix(in srgb, var(--seg) 45%, transparent);
  box-shadow: inset 0 0 0 1px var(--seg);
}
.gl-seg-lord {
  font-size: .68rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gl-seg-years { font-size: .6rem; color: var(--text-dim); }
.gl-now {
  position: absolute;
  bottom: 0;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.gl-now-dot { color: var(--accent2); font-size: .7rem; }
.gl-now-label { font-size: .64rem; color: var(--accent2); font-style: italic; }

/* Support meters */
.gl-meters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 18px;
}
.gl-meter {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 3px 4px;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  transition: background .15s;
}
.gl-meter:hover { background: rgba(167, 139, 250, .08); }
.gl-meter-name {
  width: 52px;
  font-size: .74rem;
  color: var(--text);
  flex-shrink: 0;
}
.gl-meter-track {
  flex: 1;
  height: 8px;
  border-radius: 5px;
  background: var(--border);
  overflow: hidden;
}
.gl-meter-fill { display: block; height: 100%; border-radius: 5px; transition: width .5s ease; }
.gl-v-strong     { background: var(--success); }
.gl-v-good       { background: #a3e635; }
.gl-v-steady     { background: var(--accent2); }
.gl-v-needs-care { background: var(--danger); }
.gl-meter-verdict {
  width: 74px;
  font-size: .66rem;
  color: var(--text-dim);
  flex-shrink: 0;
}

/* Highlight chips */
.gl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.gl-chip {
  font-size: .72rem;
  color: var(--text);
  background: rgba(167, 139, 250, .1);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 11px;
}

/* Match nadi/porutham verdict chips */
.match-nadi-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 14px;
  justify-content: center;
}
.mn-chip {
  font-size: .7rem;
  border-radius: 999px;
  padding: 4px 11px;
  border: 1px solid var(--border);
}
.mn-ok   { color: var(--success); border-color: rgba(52, 211, 153, .4); }
.mn-bad  { color: var(--danger);  border-color: rgba(248, 113, 113, .4); }
.mn-warn { color: var(--accent2); border-color: rgba(245, 158, 11, .4); }

@media (max-width: 768px) {
  .gl-meters { grid-template-columns: 1fr; }
  .gl-seg-years { display: none; }
}

/* ── Login card: dev bypass + GIS-unavailable fallback ── */
#dev-login-btn {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 10px 0;
  border-radius: 9px;
  border: 1px dashed var(--accent);
  background: rgba(167, 139, 250, .08);
  color: var(--accent);
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}
#dev-login-btn:hover { background: var(--accent); color: #17142a; }
.gsi-unavailable {
  font-size: .74rem;
  color: var(--text-dim);
  text-align: center;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════
   Modern mobile layer — PWA polish, safe areas, touch UX
   ══════════════════════════════════════════════════════════ */

/* Global touch behaviour (all sizes — harmless on desktop) */
* { -webkit-tap-highlight-color: transparent; }
button, .tab-btn, .mob-tab, .chat-domain-btn, .domain-card {
  touch-action: manipulation;      /* kill double-tap zoom delay */
}
body { overscroll-behavior-y: none; }
#messages, .tab-content, #sd-list, #followup-messages {
  -webkit-overflow-scrolling: touch;
}

/* Respect users who turn animations off */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media (max-width: 768px) {

  /* ── Notch / home-bar safe areas (viewport-fit=cover) ── */
  #topbar {
    padding-top: env(safe-area-inset-top, 0px);
    height: calc(56px + env(safe-area-inset-top, 0px));
    background: color-mix(in srgb, var(--surface) 82%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
  #mobile-nav {
    padding-bottom: env(safe-area-inset-bottom, 0px);
    height: calc(60px + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--surface) 85%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
  #sessions-drawer {
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    width: 84vw;
  }

  /* Active bottom-tab pill — clearer "where am I" */
  .mob-tab.active::before {
    content: "";
    position: absolute;
    top: 6px;
    width: 40px;
    height: 3px;
    border-radius: 2px;
    background: var(--accent);
  }

  /* ── iOS: inputs under 16px trigger zoom-on-focus ── */
  #user-input, #followup-input, .widget-date-input,
  .widget-place-input, #name-modal-input {
    font-size: 16px !important;
  }

  /* ── Reading typography: comfortable long-form on phones ── */
  #report-text, #bnn-content, .feed-text, #match-report-text {
    font-size: .95rem;
    line-height: 1.75;
  }
  #report-text h2, #bnn-content h2, #match-report-text h2 {
    font-size: 1.05rem;
    margin-top: 1.4em;
  }

  /* ── Wide data (koota / dasha tables) scrolls, never squishes ── */
  #analysis-panel table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  /* ── Glance card: timeline pans horizontally, stays legible ── */
  .gl-timeline-wrap { overflow-x: auto; scrollbar-width: none; }
  .gl-timeline-wrap::-webkit-scrollbar { display: none; }
  .gl-timeline { min-width: 520px; }
  #glance-card { padding: 13px 13px 11px; border-radius: 12px; }

  /* ── Touch targets ≥ 44px ── */
  .pa-btn        { padding: 13px 10px; font-size: .84rem; }
  .sd-new-btn    { padding: 12px 0; font-size: .82rem; }
  .sd-item       { padding: 13px 10px; }
  .sd-del        { opacity: .55; padding: 8px 10px; }   /* always visible on touch */
  #delete-all-btn{ padding: 12px 0; }
  #history-btn   { padding: 7px 12px; }
  #new-btn       { padding: 8px 13px; }
  .widget-btn, .widget-skip-btn, .widget-cal-btn { min-height: 44px; }
  .chat-domain-btn { padding: 8px 14px; font-size: .78rem; }
  .domain-card   { min-height: 46px; }

  /* Follow-up: FAB and drawer clear the bottom nav */
  #followup-fab {
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    padding: 12px 20px;
  }
  #followup-drawer {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  /* Post-actions: thumb-friendly stacked buttons */
  #post-actions { padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); }
}

/* ══════════════════════════════════════════════════════════
   Print fixes: full-length output + new sections
   ══════════════════════════════════════════════════════════ */
@media print {
  /* The app shell is a fixed-height flex column with hidden overflow —
     without this reset the browser clips printing to a single page. */
  html, body {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    background: #fff !important;
  }

  /* Never print leftover empty-state placeholders */
  .tab-empty { display: none !important; }

  /* Classical source citations */
  .rag-references {
    margin-top: 4mm;
    padding: 3mm 4mm;
    border: 0.5pt solid #C17F24;
    background: #fdf8f0 !important;
    break-inside: avoid;
  }
  .rag-references-title {
    font-size: 9pt;
    font-weight: 700;
    color: #7B2D3A;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 1.5mm;
  }
  .rag-references ol { padding-left: 5mm; margin: 0; }
  .rag-references li { font-size: 8.5pt; color: #1C1C2E; margin-bottom: 0.8mm; }
}

/* ── Kundali Milan regional-system switch ── */
.match-region-toggle {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 4px 0 10px;
}
.mrt-btn {
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  font-size: .76rem;
  cursor: pointer;
  transition: all .15s;
}
.mrt-btn.active {
  border-color: var(--accent);
  background: rgba(167, 139, 250, .14);
  color: var(--accent);
  cursor: default;
  font-weight: 600;
}
.mrt-btn:not(.active):hover { color: var(--text); border-color: var(--accent); }

/* ── "Who is this reading for?" person picker ── */
#person-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 8, 20, .62);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1200;
}
#person-overlay.show { display: flex; }
#person-modal {
  width: 380px;
  max-width: 92vw;
  max-height: 84vh;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 26px 24px 20px;
  text-align: center;
}
#person-modal-icon { font-size: 1.6rem; color: var(--accent); margin-bottom: 8px; }
#person-modal-title { font-size: 1.05rem; margin-bottom: 4px; }
#person-modal-sub { font-size: .76rem; color: var(--text-dim); margin-bottom: 16px; }
#person-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.person-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface2);
  cursor: pointer;
  text-align: left;
  transition: all .15s;
}
.person-row:hover { border-color: var(--accent); background: rgba(167, 139, 250, .1); }
.pr-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #7c3aed);
  color: #fff;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pr-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pr-name { font-size: .86rem; color: var(--text); font-weight: 600; }
.pr-meta { font-size: .7rem; color: var(--text-dim); }
.pr-go { color: var(--text-dim); }
.person-row:hover .pr-go { color: var(--accent); }
#person-new {
  width: 100%;
  padding: 11px 0;
  border-radius: 12px;
  border: 1px dashed var(--accent);
  background: rgba(167, 139, 250, .07);
  color: var(--accent);
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 8px;
  transition: all .15s;
}
#person-new:hover { background: var(--accent); color: #17142a; }
#person-cancel {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: .74rem;
  cursor: pointer;
  text-decoration: underline;
}
#person-cancel:hover { color: var(--text); }

/* ── Intake widgets: aligned inputs, full-width confirm ── */
.widget-btn-block {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 11px 0;
  border-radius: 10px;
  font-size: .85rem;
}
.widget-date-input { height: 40px; }
.widget-cal-btn {
  width: 46px;
  height: 40px;
  flex-shrink: 0;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}
.widget-error:empty { display: none; }

/* ── Drawer: profiles section ── */
.sd-section-head {
  padding: 10px 16px 6px;
  font-size: .64rem;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .1em;
}
#sd-profile-count { color: var(--accent); margin-left: 4px; }
#sd-profile-list { padding: 0 8px; }
.sd-empty-sm { padding: 10px 12px; font-size: .72rem; }
.sd-profile-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
  transition: background .15s;
}
.sd-profile-row:hover { background: var(--surface2); }
.sd-profile-row .pr-avatar { width: 30px; height: 30px; font-size: .8rem; }
.sd-profile-row .pr-name { font-size: .78rem; }
.sd-profile-row .pr-meta { font-size: .64rem; }
.sd-prof-act {
  background: none;
  border: 1px solid transparent;
  color: var(--text-dim);
  font-size: .8rem;
  padding: 5px 7px;
  border-radius: 8px;
  cursor: pointer;
  transition: all .15s;
}
.sd-prof-act:hover { color: var(--accent); border-color: var(--border); }
.sd-prof-del:hover { color: var(--danger); }
#sd-profiles { border-bottom: 1px solid var(--border); padding-bottom: 8px; }

/* ── Chart Details: stacked sections (charts + birth star + life timing) ── */
#details-content .details-section { margin-bottom: 30px; }
.details-head {
  font-size: .72rem;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .09em;
  padding-bottom: 7px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
#charts-content, #stars-content, #dasha-content { display: block; }

/* ── Glance timeline: in-ribbon marker + in-flow caption (mobile-safe) ── */
.gl-timeline { position: relative; }
.gl-marker {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  background: var(--accent2);
  box-shadow: 0 0 8px var(--accent2);
  border-radius: 1px;
  pointer-events: none;
}
.gl-now-caption {
  margin-top: 6px;
  font-size: .66rem;
  color: var(--accent2);
  font-style: italic;
}
.gl-now { display: none; }   /* legacy marker retired */

/* ── North Indian diamond chart ── */
.nc-wrap { width: 280px; max-width: 100%; }
.nc-svg  { width: 100%; height: auto; display: block; }
.nc-line { stroke: var(--accent); stroke-width: 1.1; opacity: .75; }
.nc-sign { fill: var(--accent2); font-weight: 700; }
.nc-pl   { fill: var(--text); }
.nc-ex   { fill: var(--success); font-weight: 700; }
.nc-deb  { fill: var(--danger); font-weight: 700; }
.nc-caption {
  margin-top: 6px;
  font-size: .62rem;
  color: var(--text-dim);
  line-height: 1.5;
}
.vchart-style-switch {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}
.vcs-btn {
  padding: 5px 13px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  font-size: .72rem;
  cursor: pointer;
  transition: all .15s;
}
.vcs-btn.active {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(167, 139, 250, .12);
  cursor: default;
}
.vcs-btn:not(.active):hover { color: var(--text); border-color: var(--accent); }

@media (max-width: 768px) {
  .nc-wrap { width: 100%; max-width: 340px; margin: 0 auto; }
}

@media print {
  .vchart-style-switch { display: none !important; }
  .nc-line { stroke: #C17F24; }
  .nc-sign { fill: #7B2D3A; }
  .nc-pl   { fill: #1C1C2E; }
  .nc-ex   { fill: #1a7a4f; }
  .nc-deb  { fill: #a03030; }
  .nc-caption { color: #666; }
  .nc-wrap { break-inside: avoid; }
}

/* ══════════════════════════════════════════════════════════
   Mobile horizontal containment — nothing drags the page sideways
   ══════════════════════════════════════════════════════════ */

/* The ribbon's scroll container must clip at ANY width (was mobile-only) */
.gl-timeline-wrap {
  overflow-x: auto;
  max-width: 100%;
  scrollbar-width: none;
}
.gl-timeline-wrap::-webkit-scrollbar { display: none; }
#glance-card { max-width: 100%; min-width: 0; overflow: hidden; }
.gl-section  { min-width: 0; }

@media (max-width: 768px) {
  /* Belt-and-braces: the app never scrolls sideways as a whole —
     wide content pans inside its own container or not at all */
  html, body { overflow-x: hidden; }
  #main, #chat-panel, #analysis-panel, .tab-content { min-width: 0; max-width: 100vw; }

  /* Topbar: fit stepper + New + Sign out on a 390px phone */
  #topbar { gap: 6px; padding: 0 8px; padding-top: env(safe-area-inset-top, 0px); }
  #topbar-center { flex: 1; min-width: 0; overflow: hidden; }
  #journey-stepper { gap: 3px; }
  .js-dot  { width: 17px; height: 17px; font-size: .56rem; }
  .js-line { width: 7px; }
  #history-btn { margin-right: 4px; padding: 5px 9px; }
  #new-btn     { margin-right: 4px; padding: 5px 9px; font-size: .64rem; }
  #logout-btn  { font-size: .62rem; padding: 4px 8px; }
  #user-chip   { gap: 5px; padding: 2px 4px; }
  #topbar-logo { height: 30px; }
}

/* ── Timeline caption: anchored directly beneath the marker ── */
.gl-timeline-wrap { padding-bottom: 24px; }   /* room for the caption row */
.gl-now-caption {
  position: absolute;
  top: calc(100% + 5px);
  transform: translateX(-50%);
  white-space: nowrap;
  margin-top: 0;
}

/* Caption hangs below the ribbon — the ribbon itself must not clip it;
   corner rounding moves to the first/last segments instead */
.gl-timeline { overflow: visible; }
.gl-seg:first-child { border-radius: 8px 0 0 8px; }
.gl-seg:last-child  { border-radius: 0 8px 8px 0; }

/* Card needn't clip — the ribbon wrapper handles horizontal containment;
   this lets the caption's last character breathe at the card edge */
#glance-card { overflow: visible; }