/* Patrika: turmeric, indigo ink, sindoor. Built around the kundli diagram. */
:root {
  --haldi: #E3AE2B;
  --haldi-deep: #C9921A;
  --neel: #1F2A5C;
  --neel-soft: #3B4678;
  --patra: #FFFCF3;
  --patra-line: #E9E0C8;
  --sindoor: #B3261E;
  --rakh: #6A6873;
  --mehendi: #4E6B3A;

  --serif: "Tiro Devanagari Hindi", "Noto Serif Devanagari", Georgia, serif;
  --sans: "Mukta", "Noto Sans Devanagari", system-ui, sans-serif;

  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.3rem;
  --step-2: 1.7rem;
  --step-3: clamp(2rem, 1.4rem + 2.6vw, 3.1rem);
  --radius: 6px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.55;
  color: var(--neel);
  background: var(--patra);
}
h1, h2 { font-family: var(--serif); font-weight: 400; line-height: 1.15; margin: 0; }
h2 { font-size: var(--step-2); margin-bottom: .4rem; }
p { margin: 0; }
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--sindoor); outline-offset: 2px; }

.wrap { width: min(1180px, 100% - 2.5rem); margin-inline: auto; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.skip { position: absolute; left: -999px; top: 0; background: var(--neel); color: var(--patra); padding: .5rem 1rem; z-index: 10; }
.skip:focus { left: 1rem; }

/* ---------- header ---------- */
.top { background: var(--haldi); border-bottom: 1px solid var(--haldi-deep); }
.top-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .7rem; }
.brand { display: flex; align-items: baseline; gap: .55rem; text-decoration: none; color: var(--neel); }
.brand-deva { font-family: var(--serif); font-size: 1.65rem; line-height: 1; }
.brand-latin { font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--neel-soft); }
.langs { display: flex; border: 1.5px solid var(--neel); border-radius: 999px; overflow: hidden; }
.langs button {
  border: 0; background: transparent; padding: .25rem .8rem; cursor: pointer; font-size: var(--step--1);
}
.langs button + button { border-left: 1.5px solid var(--neel); }
.langs button[aria-pressed="true"] { background: var(--neel); color: var(--patra); }

/* ---------- hero ---------- */
.hero { background: var(--haldi); padding-block: 2rem 2.6rem; }
.hero-grid { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: minmax(340px, 470px) 1fr; gap: 3.5rem; }
  .hero { padding-block: 3rem 3.5rem; }
}
.chart-card { margin: 0; }
.chart-frame {
  background: var(--patra);
  /* the SVG draws the inner square; this adds the outer rule = double frame, as on a patrika */
  box-shadow: 0 0 0 6px var(--patra), 0 0 0 7.5px var(--neel);
  margin: 8px;
}
#kundli { display: block; width: 100%; height: auto; }
#kundli .grid { fill: none; stroke: var(--neel); stroke-width: 1.6; }
#kundli .signno { font-family: var(--sans); font-size: 12px; fill: var(--rakh); }
#kundli .graha { font-family: var(--serif); font-size: 15px; fill: var(--neel); }
#kundli .graha.small { font-size: 12.5px; }
#kundli .graha.retro { font-style: italic; }
#kundli .lagna-mark { font-family: var(--serif); font-size: 13px; fill: var(--sindoor); }
#kundli .lagna-cell { fill: rgba(179, 38, 30, .07); }
#kundli .centre { font-family: var(--serif); font-size: 15px; fill: var(--neel-soft); }
.chart-caption {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem;
  margin: .9rem 7px 0; font-size: var(--step--1);
}
.chart-style { display: inline-flex; gap: .3rem; }
.chart-style button {
  border: 1.5px solid var(--neel); background: transparent; border-radius: 999px;
  padding: .1rem .7rem; cursor: pointer; font-size: var(--step--1);
}
.chart-style button[aria-pressed="true"] { background: var(--neel); color: var(--patra); }

.hero-side h1 { font-size: var(--step-3); max-width: 16ch; }
.perks { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .8rem; padding: 0; }
.perks li { background: var(--patra); color: var(--neel); border-radius: 999px; padding: .2rem .75rem; font-size: var(--step--1); font-weight: 600; }
.perks li.offer { background: var(--sindoor); color: var(--patra); }
.hero.has-chart .perks { display: none; }
@media (max-width: 720px) {
  .hero-side h1 { font-size: var(--step-2); }
  .lede { font-size: var(--step-0); margin-top: .5rem; }
  #birth-form { margin-top: 1rem; }
  #birth-form .hint { font-size: var(--step--1); }
  /* keep the main button in view while filling the form */
  #birth-form button[type=submit] { position: sticky; bottom: .7rem; z-index: 3; width: 100%; box-shadow: 0 6px 18px rgba(31, 42, 92, .25); }
}
.lede { margin-top: .9rem; max-width: 46ch; font-size: var(--step-1); line-height: 1.45; }

form#birth-form { margin-top: 1.6rem; display: grid; gap: .95rem; max-width: 520px; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.field { display: grid; gap: .25rem; }
.field label { font-weight: 500; font-size: var(--step--1); }
input[type="text"], input:not([type]), input[type="date"], input[type="time"], textarea {
  width: 100%; background: var(--patra); border: 1.5px solid var(--neel); border-radius: var(--radius);
  padding: .55rem .7rem; min-height: 46px;
}
input:disabled { opacity: .45; }
.check { display: flex; gap: .55rem; align-items: center; font-size: var(--step--1); cursor: pointer; }
.check input { width: 1.1rem; height: 1.1rem; accent-color: var(--neel); }
.hint { font-size: var(--step--1); color: var(--neel-soft); }
.error { color: var(--sindoor); font-weight: 500; background: var(--patra); padding: .4rem .7rem; border-radius: var(--radius); }
.place { position: relative; }
#place-list {
  position: absolute; top: calc(100% - 1.6rem); left: 0; right: 0; z-index: 5;
  list-style: none; margin: 0; padding: .25rem 0;
  background: var(--patra); border: 1.5px solid var(--neel); border-radius: var(--radius);
  max-height: 290px; overflow-y: auto; box-shadow: 0 10px 24px rgba(31, 42, 92, .18);
}
#place-list li { padding: .45rem .75rem; cursor: pointer; display: flex; justify-content: space-between; gap: 1rem; }
#place-list li[aria-selected="true"], #place-list li:hover { background: #F6E7BC; }
#place-list .coords { color: var(--rakh); font-size: var(--step--1); white-space: nowrap; }

button.primary {
  background: var(--sindoor); color: #fff; border: 0; border-radius: var(--radius);
  padding: .7rem 1.4rem; font-weight: 700; cursor: pointer; justify-self: start; min-height: 46px;
}
button.primary:hover { background: #962018; }
button.primary:disabled { opacity: .6; cursor: progress; }
button.link { background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-weight: 500; }

.summary { margin-top: 1.6rem; display: grid; gap: .35rem; max-width: 520px; }
.summary-name { font-family: var(--serif); font-size: var(--step-2); }
.summary-line { font-size: var(--step-1); }
.warn { background: var(--patra); border-left: 4px solid var(--sindoor); padding: .5rem .8rem; font-size: var(--step--1); }
.summary .link { justify-self: start; margin-top: .4rem; }

/* ---------- results ---------- */
#results { padding-block: 2.4rem 3rem; }
@media (prefers-reduced-motion: no-preference) {
  #kundli .graha, #kundli .lagna-mark { opacity: 0; animation: settle .5s ease-out forwards; animation-delay: var(--d, 0s); }
  @keyframes settle { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
}

/* ---------- accounts & payments ---------- */
.top-actions { display: flex; align-items: center; gap: .6rem; }
.account-btn {
  border: 1.5px solid var(--neel); background: var(--patra); border-radius: 999px;
  padding: .25rem .85rem; cursor: pointer; font-size: var(--step--1); font-weight: 500; white-space: nowrap;
}
.account-btn.signed-in { background: var(--neel); color: var(--patra); }
@media (max-width: 520px) {
  .top-inner { flex-wrap: wrap; }
  .langs button { padding: .2rem .55rem; }
}

dialog {
  border: 1.5px solid var(--neel); border-radius: var(--radius); background: var(--patra); color: var(--neel);
  padding: 1.6rem 1.4rem 1.3rem; width: min(440px, calc(100% - 1.5rem)); max-height: calc(100vh - 2rem);
  box-shadow: 0 0 0 6px var(--patra), 0 0 0 7.5px var(--neel), 0 20px 50px rgba(31, 42, 92, .35);
}
dialog::backdrop { background: rgba(31, 42, 92, .45); }
dialog h2 { margin-bottom: .5rem; padding-right: 2rem; }
dialog h3 { font-family: var(--serif); font-weight: 400; font-size: var(--step-1); margin: 1.3rem 0 .4rem; }
.dlg-close { position: absolute; top: .5rem; right: .6rem; }
.dlg-close button { border: 0; background: none; font-size: 1.7rem; line-height: 1; cursor: pointer; padding: .2rem .45rem; }
dialog .field, dialog .primary, dialog .secondary { margin-top: .8rem; }
dialog .primary { width: 100%; }
.google-btn {
  display: flex; align-items: center; justify-content: center; gap: .7rem; width: 100%; min-height: 48px;
  background: #fff; border: 1.5px solid var(--neel); border-radius: var(--radius); font-weight: 500; cursor: pointer;
}
.google-btn:hover { background: #F6E7BC; }
button.secondary {
  background: transparent; border: 1.5px solid var(--neel); border-radius: var(--radius);
  padding: .55rem 1.1rem; font-weight: 500; cursor: pointer; min-height: 44px;
}
.or { margin-top: 1.2rem; color: var(--neel-soft); font-size: var(--step--1); }
.phone-row { display: flex; border: 1.5px solid var(--neel); border-radius: var(--radius); overflow: hidden; background: var(--patra); }
.phone-row .cc { padding: .55rem .6rem; border-right: 1.5px solid var(--neel); background: #F6E7BC; font-weight: 500; }
.phone-row input { border: 0; border-radius: 0; min-height: 44px; }
.fine { font-size: var(--step--1); color: var(--rakh); margin-top: 1rem; }
.fine a { color: var(--neel); }

.packs { border: 0; padding: 0; margin: .4rem 0 0; display: grid; }
.pack {
  display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "r q p" "r per per";
  align-items: center; column-gap: .75rem; padding: .7rem .4rem .7rem .2rem;
  border-bottom: 1px solid var(--patra-line); cursor: pointer;
}
.pack:first-of-type { border-top: 2px solid var(--neel); }
.pack input { grid-area: r; width: 1.15rem; height: 1.15rem; accent-color: var(--sindoor); }
.pack-q { grid-area: q; font-family: var(--serif); font-size: var(--step-1); }
.pack-price { grid-area: p; font-family: var(--serif); font-size: var(--step-1); font-variant-numeric: tabular-nums; }
.pack-per { grid-area: per; font-size: var(--step--1); color: var(--rakh); }
.pack:has(input:checked) { background: #FFF6DC; box-shadow: inset 4px 0 0 var(--sindoor); }

.who { font-weight: 500; margin-bottom: .6rem; word-break: break-all; }
.history { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; font-size: var(--step--1); }
.history small { display: block; color: var(--rakh); }
.acct-actions { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.4rem; flex-wrap: wrap; }
button.link.danger { color: var(--sindoor); }


.toast {
  position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%); z-index: 50;
  background: var(--neel); color: var(--patra); padding: .7rem 1.1rem; border-radius: var(--radius);
  max-width: min(92vw, 520px); box-shadow: 0 10px 30px rgba(31, 42, 92, .3);
}
.toast.bad { background: var(--sindoor); }

.foot-links { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; }
.foot-links a { color: var(--patra); }

/* ---------- policy pages ---------- */
.legal-body { max-width: 72ch; padding-block: 2.2rem 3rem; }
.legal-body h1 { font-size: var(--step-3); }
.legal-body h2 { font-size: var(--step-1); margin-top: 1.8rem; }
.legal-body p, .legal-body ul, .legal-body table, .legal-body dl { margin-top: .8rem; }
.legal-body .meta { color: var(--rakh); font-size: var(--step--1); margin-top: .4rem; }
.legal-body mark { background: #F6D7D3; color: var(--sindoor); padding: 0 .2rem; }
.legal-body li + li { margin-top: .35rem; }


/* ---------- coupons ---------- */
.coupon { margin-top: 1rem; display: grid; gap: .55rem; }
.coupon-offer { display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left; cursor: pointer;
  background: #FFF3D6; color: var(--neel); border: 2px dashed var(--haldi-deep); border-radius: 10px;
  padding: .7rem .9rem; font: inherit; font-weight: 600; }
.coupon-offer .gift { font-size: 1.3em; }
.coupon-offer span:nth-child(2) { flex: 1; }
.coupon-offer .tap { background: var(--sindoor); color: var(--patra); border-radius: 999px; padding: .2rem .8rem; font-size: var(--step--1); }
.coupon-field { display: flex; border: 1.5px solid var(--neel); border-radius: 10px; background: var(--patra); overflow: hidden; }
.coupon-field:focus-within { box-shadow: 0 0 0 3px rgba(227, 174, 43, .45); }
.coupon-field input { flex: 1; min-width: 0; border: 0; background: transparent; min-height: 50px; padding: 0 .9rem;
  font: inherit; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--neel); }
.coupon-field input:focus { outline: none; }
.coupon-field input::placeholder { text-transform: none; letter-spacing: 0; font-weight: 400; }
.coupon-field button { border: 0; background: var(--neel); color: var(--patra); font: inherit; font-weight: 600;
  padding: 0 1.2rem; cursor: pointer; }
.coupon-field button:disabled { background: var(--rakh); opacity: .45; cursor: default; }
.coupon-applied { display: flex; align-items: center; gap: .6rem; background: #E7F1E0; color: var(--mehendi);
  border: 1.5px solid var(--mehendi); border-radius: 10px; padding: .65rem .8rem; font-weight: 600; }
.coupon-applied .tick { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: var(--mehendi); color: #fff; flex: none; }
.coupon-applied span:nth-child(2) { flex: 1; }
.coupon-x { border: 0; background: none; font-size: 1.5rem; line-height: 1; color: var(--neel); cursor: pointer; padding: 0 .3rem; }
.pack-price .plus-gst { display: block; font-family: var(--sans, inherit); font-size: var(--step--1); color: var(--rakh); text-align: right; }
.pack-price s { color: var(--rakh); font-size: var(--step-0); margin-right: .1rem; }
.pack-price strong { color: var(--sindoor); font-weight: 400; }
.pack.discounted .pack-per { color: var(--mehendi); }

/* ---------- results content (restored) ---------- */
.section-note { color: var(--neel-soft); max-width: 60ch; margin-bottom: 1rem; }
.pay-total { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
  border-top: 1px solid var(--rule, #e8dfc4); padding-top: .6rem; margin: 0 0 .9rem; color: var(--neel-soft); }
.pay-total:empty { display: none; }
.pay-total strong { color: var(--neel, #1F2A5C); font-family: var(--serif); font-size: var(--step-1); font-weight: 400;
  font-variant-numeric: tabular-nums; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem 1.5rem; margin: 0; }
@media (min-width: 640px) { .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.facts div { border-top: 2px solid var(--neel); padding-top: .5rem; }
.facts dt { font-size: var(--step--1); color: var(--neel-soft); }
.facts dd { margin: 0; font-family: var(--serif); font-size: var(--step-1); line-height: 1.25; }
.facts dd small { display: block; font-family: var(--sans); font-size: var(--step--1); color: var(--rakh); margin-top: .15rem; }

.table-wrap { overflow-x: auto; }
.ledger { width: 100%; border-collapse: collapse; font-size: var(--step-0); }
.ledger th { text-align: left; font-weight: 500; font-size: var(--step--1); color: var(--neel-soft); padding: .4rem .6rem .4rem 0; border-bottom: 2px solid var(--neel); }
.ledger td { padding: .55rem .6rem .55rem 0; border-bottom: 1px solid var(--patra-line); vertical-align: top; }
.ledger td:first-child { font-family: var(--serif); font-size: var(--step-1); white-space: nowrap; }
.ledger .deg, .ledger .note { display: block; font-size: var(--step--1); color: var(--rakh); font-family: var(--sans); }
.ledger .note.good { color: var(--mehendi); font-weight: 500; }
.ledger .note.weak { color: var(--sindoor); font-weight: 500; }
.ledger td.num { font-variant-numeric: tabular-nums; }

.dasha { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--neel); }
.dasha > li { position: relative; padding: 0 0 .2rem 1.2rem; }
.dasha > li::before {
  content: ""; position: absolute; left: -7px; top: .95rem; width: 12px; height: 12px;
  border-radius: 50%; background: var(--patra); border: 2px solid var(--neel);
}
.dasha > li.now::before { background: var(--sindoor); border-color: var(--sindoor); }
.dasha > li.past { color: var(--rakh); }
.dasha details summary {
  cursor: pointer; padding: .5rem 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .8rem;
  list-style: none;
}
.dasha details summary::-webkit-details-marker { display: none; }
.dasha .lord { font-family: var(--serif); font-size: var(--step-1); }
.dasha .span { font-variant-numeric: tabular-nums; }
.dasha .now-tag { color: var(--sindoor); font-weight: 700; font-size: var(--step--1); }
.dasha .antar { list-style: none; margin: 0 0 .8rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .2rem 1rem; font-size: var(--step--1); }
.dasha .antar li.now { color: var(--sindoor); font-weight: 700; }

.panchang { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.5rem; margin: 0; }
.panchang dt { color: var(--neel-soft); }
.panchang dd { margin: 0; }
.meta { font-size: var(--step--1); color: var(--rakh); margin-top: .5rem; min-height: 1.2em; }

/* ---------- footer (restored) ---------- */
.foot { background: var(--neel); color: var(--patra); padding-block: 2rem 6rem; font-size: var(--step--1); }
.foot .wrap { display: grid; gap: .6rem; max-width: 75ch; margin-left: max(1.25rem, (100% - 1180px) / 2); }
.foot .credits { color: #C5C9DE; }
.foot-explore { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; padding-bottom: .6rem; border-bottom: 1px solid #3B4678; }
.foot-explore a { color: var(--patra); }

/* =====================================================================
   Redesign: mobile-first hero, date dropdowns, tabs, chat drawer + FAB
   ===================================================================== */

/* ---------- header: compact language picker on phones ---------- */
.lang-select { display: none; align-items: center; gap: .3rem; border: 1.5px solid var(--neel);
  border-radius: 999px; padding: 0 .3rem 0 .55rem; background: transparent; }
.lang-select select { border: 0; background: transparent; font: inherit; font-size: var(--step--1);
  padding: .3rem .2rem; color: var(--neel); cursor: pointer; }
@media (max-width: 639px) {
  .langs { display: none; }
  .lang-select { display: inline-flex; }
  .top-inner { flex-wrap: nowrap; }
  .brand-latin { display: none; }
}

/* ---------- hero: form first on phones; chart once it exists ---------- */
@media (max-width: 899px) {
  .hero:not(.has-chart) .chart-card { display: none; }
  .hero-grid { gap: 1.4rem; }
  .hero { padding-block: 1.4rem 2rem; }
}
.hero.has-chart h1, .hero.has-chart .lede { display: none; }
.summary-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; margin-top: .8rem; }
.summary-actions .primary { justify-self: auto; }

/* ---------- date of birth dropdowns ---------- */
fieldset.dob { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.dob legend { font-weight: 500; font-size: var(--step--1); padding: 0; margin-bottom: .25rem; }
.dob-row { display: grid; grid-template-columns: 1fr 1.5fr 1.2fr; gap: .5rem; }
select { font: inherit; color: var(--neel); }
.dob-row select {
  width: 100%; min-height: 46px; background: var(--patra); border: 1.5px solid var(--neel);
  border-radius: var(--radius); padding: .5rem .55rem;
}

/* ---------- results: tabs ---------- */
#results { padding-block: 1.6rem 6rem; }
.results-wrap { max-width: 900px; }
.tabs {
  display: flex; gap: .2rem; border-bottom: 2px solid var(--neel); margin-bottom: 1.6rem;
  overflow-x: auto; scrollbar-width: none; position: sticky; top: 0; background: var(--patra); z-index: 4;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs button {
  border: 0; background: none; padding: .75rem 1rem .6rem; font-size: var(--step-0); font-weight: 500;
  color: var(--neel-soft); cursor: pointer; white-space: nowrap; border-bottom: 4px solid transparent; margin-bottom: -2px;
}
.tabs button[aria-selected="true"] { color: var(--neel); border-bottom-color: var(--sindoor); }
[role="tabpanel"] > h2 { margin-bottom: .4rem; }
[role="tabpanel"] .facts + h2 { margin-top: 2.2rem; }

.facts dd .ask-link { margin-top: .35rem; font-family: var(--sans); font-size: var(--step--1); }
.quick-asks { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .6rem; margin-top: .6rem; }
.quick-asks button {
  text-align: left; background: #FFF6DC; border: 1.5px solid var(--neel); border-radius: var(--radius);
  padding: .8rem .9rem; cursor: pointer; font-size: var(--step-0); line-height: 1.35;
  display: flex; justify-content: space-between; gap: .6rem; align-items: center;
}
.quick-asks button::after { content: "›"; font-size: 1.4rem; line-height: 1; color: var(--sindoor); }
.quick-asks button:hover { background: #F6E7BC; }

/* planet rows: tap to ask */
.ledger tbody tr.askable { cursor: pointer; }
.ledger tbody tr.askable:hover td { background: #FFF6DC; }
.ledger td.ask-cell { text-align: right; vertical-align: middle; padding-right: 0; }
.ask-pill {
  border: 1.5px solid var(--neel); background: var(--patra); border-radius: 999px; padding: .15rem .65rem;
  font-size: var(--step--1); cursor: pointer; white-space: nowrap;
}
@media (max-width: 520px) {
  .ledger th:nth-child(3), .ledger td:nth-child(3) { display: none; }  /* nakshatra column: shown in planet cell on phones */
  .ledger .nak-inline { display: block; }
}
.ledger .nak-inline { display: none; font-size: var(--step--1); color: var(--rakh); font-family: var(--sans); }

/* ---------- floating chat button ---------- */
.fab-wrap { position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 30; display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; }
.chat-fab {
  display: inline-flex; align-items: center; gap: .55rem; border: 0; cursor: pointer;
  background: var(--sindoor); color: #fff; border-radius: 999px; padding: .85rem 1.25rem .85rem 1rem;
  font-weight: 700; font-size: var(--step-0); box-shadow: 0 10px 28px rgba(179, 38, 30, .35), 0 2px 6px rgba(31, 42, 92, .25);
}
.chat-fab:hover { background: #962018; }
.fab-hint {
  background: var(--neel); color: var(--patra); padding: .6rem .85rem; border-radius: 12px 12px 4px 12px;
  max-width: 240px; font-size: var(--step--1); box-shadow: 0 8px 20px rgba(31, 42, 92, .25);
}
@media (max-width: 520px) {
  .chat-fab { padding: .95rem; }
  .chat-fab .fab-label { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .chat-fab.pulse { animation: fabpulse 1.6s ease-out 2; }
  @keyframes fabpulse { 0% { box-shadow: 0 0 0 0 rgba(179, 38, 30, .55), 0 10px 28px rgba(179, 38, 30, .35); }
    100% { box-shadow: 0 0 0 18px rgba(179, 38, 30, 0), 0 10px 28px rgba(179, 38, 30, .35); } }
}

/* ---------- chat drawer ---------- */
.chat {
  position: fixed; z-index: 40; top: 0; right: 0; bottom: 0; width: min(440px, 100%);
  background: var(--patra); border-left: 1.5px solid var(--neel); box-shadow: -18px 0 40px rgba(31, 42, 92, .18);
  display: flex; flex-direction: column;
}
@media (prefers-reduced-motion: no-preference) {
  .chat:not([hidden]) { animation: drawer .22s ease-out; }
  @keyframes drawer { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
}
@media (max-width: 639px) {
  .chat { width: 100%; border-left: 0; }
  body.chat-open { overflow: hidden; }
}
.chat-head {
  display: flex; align-items: center; gap: .7rem; padding: .8rem .9rem .8rem 1rem;
  background: var(--haldi); border-bottom: 1.5px solid var(--neel);
}
.chat-head-text { flex: 1; min-width: 0; }
.chat-head h2 { font-size: var(--step-1); margin: 0; }
.chat-head .meta { margin: 0; color: var(--neel); font-size: var(--step--1); }
.history .invoice-dl { margin-left: .6rem; font-size: var(--step--1); }
.inapp { background: #FFF6DC; border: 1.5px solid var(--haldi); border-radius: var(--radius); padding: .9rem 1rem; margin-bottom: 1rem; }
.inapp p { margin: 0 0 .7rem; }
.inapp .primary { width: 100%; margin-bottom: .4rem; }
.lang-dlg { text-align: center; max-width: 360px; }
.lang-dlg-brand { font-family: var(--serif); font-size: var(--step-2); color: var(--haldi-deep); margin: 0; }
.lang-dlg h2 { font-size: var(--step-1); margin: .3rem 0 1.2rem; line-height: 1.4; }
.lang-dlg h2 span { display: block; }
.lang-choices { display: grid; gap: .6rem; }
.lang-choices button { min-height: 56px; font: inherit; font-size: var(--step-1); font-weight: 600; color: var(--neel);
  background: var(--patra); border: 2px solid var(--neel); border-radius: var(--radius); cursor: pointer; }
.lang-choices button:hover, .lang-choices button:focus-visible { background: var(--neel); color: var(--patra); }
.chat-new { border: 1.5px solid var(--neel); background: none; color: var(--neel); border-radius: 999px;
  padding: .25rem .8rem; font: inherit; font-size: var(--step--1); font-weight: 500; cursor: pointer; white-space: nowrap; }
.chat-new:hover { background: var(--neel); color: var(--patra); }
.chat-close { border: 0; background: none; padding: .4rem; cursor: pointer; color: var(--neel); border-radius: 50%; }
.chat-close:hover { background: rgba(31, 42, 92, .1); }
.avatar {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--neel);
  background: var(--patra) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M9 9h22v22H9zM9 9l22 22M31 9L9 31M20 9l11 11-11 11L9 20z' fill='none' stroke='%231F2A5C' stroke-width='1.8'/%3E%3C/svg%3E") center / 76% no-repeat;
}

.thread { flex: 1; overflow-y: auto; padding: 1rem .9rem 1.2rem; display: flex; flex-direction: column; gap: .9rem; }
.msg-q {
  align-self: flex-end; max-width: 85%; background: var(--neel); color: var(--patra);
  padding: .6rem .9rem; border-radius: 16px 16px 4px 16px; white-space: pre-wrap; word-wrap: break-word;
}
.msg-a {
  align-self: flex-start; max-width: calc(100% - 44px); margin-left: 44px; position: relative;
  background: #fff; border: 1px solid var(--patra-line); border-left: 3px solid var(--haldi);
  padding: .7rem .95rem; border-radius: 4px 16px 16px 16px; box-shadow: 0 1px 2px rgba(31, 42, 92, .06);
}
.msg-a::before {
  content: ""; position: absolute; left: -44px; top: 0; width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid var(--neel);
  background: var(--haldi) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M9 9h22v22H9zM9 9l22 22M31 9L9 31M20 9l11 11-11 11L9 20z' fill='none' stroke='%231F2A5C' stroke-width='1.8'/%3E%3C/svg%3E") center / 76% no-repeat;
}
.msg-a p + p, .msg-a ul { margin-top: .55rem; }
.msg-a ul { padding-left: 1.2rem; margin-bottom: 0; }
.msg-a strong { color: var(--neel); }
.msg-a.welcome { background: #FFF6DC; }
.msg-a.typing:empty { min-width: 64px; min-height: 40px; }
.msg-a.typing:empty::after {
  content: ""; position: absolute; left: 1rem; top: 50%; width: 6px; height: 6px; border-radius: 50%;
  background: var(--neel-soft); box-shadow: 12px 0 0 var(--neel-soft), 24px 0 0 var(--neel-soft);
  animation: dots 1s infinite ease-in-out; transform: translateY(-50%);
}
.msg-a.typing:not(:empty)::after { content: "▍"; animation: blink 1s steps(1) infinite; color: var(--haldi-deep); }
@keyframes blink { 50% { opacity: 0; } }
@keyframes dots { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.msg-err { align-self: stretch; color: var(--sindoor); font-weight: 500; background: #FBEAE8; padding: .6rem .8rem; border-radius: var(--radius); }

.chips { display: flex; flex-wrap: wrap; gap: .45rem; margin-left: 44px; }
.chips button {
  background: var(--patra); border: 1.5px solid var(--neel); border-radius: 999px;
  padding: .35rem .85rem; cursor: pointer; font-size: var(--step--1); text-align: left;
}
.chips button:hover { background: var(--neel); color: var(--patra); }

.chat-cta { padding: 0 .9rem .6rem; }
.chat-cta .primary { width: 100%; }
.ask {
  display: flex; align-items: flex-end; gap: .5rem; padding: .7rem .8rem; border-top: 1.5px solid var(--patra-line);
  background: var(--patra);
}
.ask textarea {
  flex: 1; resize: none; min-height: 46px; max-height: 140px; border-radius: 22px; padding: .65rem 1rem; line-height: 1.4;
}
.send {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--sindoor); color: #fff; display: grid; place-items: center;
}
.send:hover { background: #962018; }
.send:disabled { opacity: .5; cursor: progress; }
.chat-note { font-size: .78rem; color: var(--rakh); padding: 0 1rem .7rem; text-align: center; }