/* ─────────────────────────────────────────────────────────────────
 * chitti_theme.css — UNIFIED Indian-flag theme across all Chitti pages
 * Locked 2026-05-15, refreshed to flag-exact spec 2026-05-23.
 *
 * Locked palette (per Sire's Priority-1 spec):
 *   --saffron: #FF9933   (India saffron — flag top stripe)
 *   --white:   #FFFFFF
 *   --green:   #138808   (India green — flag bottom stripe)
 *   --navy:    #000080   (Ashoka wheel navy)
 *   --bg:      #FAFAFA
 *
 * Mobile-first (375 px). Every page <link>s this AFTER its own <style>
 * so cascade wins for shared selectors; inline page styles using
 * existing var(--saffron) / var(--navy) automatically pick up the new
 * values because we redefine those variables at :root.
 *
 * Honest: pages with hard-coded hex (e.g. .btn{background:#E86A17})
 * are overridden via the high-specificity patterns at the bottom of
 * this file. Pages that use the variable-based pattern (the majority)
 * get the new colours for free.
 * ───────────────────────────────────────────────────────────────── */

:root {
  /* ── Indian flag palette (LOCKED 2026-05-23 per Sire Priority-1) ── */
  --chitti-saffron: #FF9933;       /* Indian flag saffron */
  --chitti-white:   #FFFFFF;       /* Indian flag white */
  --chitti-green:   #138808;       /* Indian flag green */
  --chitti-navy:    #000080;       /* Ashoka wheel navy */
  --chitti-saffron-deep: #E07B1D;  /* Hover / pressed saffron */
  --chitti-green-deep:   #0E6606;  /* Hover / pressed green */
  --chitti-navy-deep:    #00004D;  /* Pressed navy */
  --chitti-cream:   #FFF7EC;       /* Soft background tint */

  /* Semantic tokens (consumed by buttons / banners / chips) */
  --chitti-bg:        #FAFAFA;
  --chitti-bg-soft:   #FFF7EC;
  --chitti-text:      #1a1a1a;
  --chitti-muted:     #666666;
  --chitti-border:    #e5e7eb;
  --chitti-success:   #138808;     /* = --chitti-green per spec */
  --chitti-warning:   #FF9933;     /* saffron at 80% opacity in usage */
  --chitti-danger:    #CC0000;

  /* Override the pre-existing per-page variable names so pages that
     already use var(--saffron) / var(--navy) / var(--gold) / var(--green)
     pick up the unified palette without each page being rewritten. */
  --saffron: #FF9933;
  --saffron-deep: #E07B1D;
  --navy:    #000080;
  --gold:    #FF9933;   /* Pages used --gold as an accent — point at saffron */
  --green:   #138808;
  --red:     #CC0000;
  --bg:      #FAFAFA;
  --card:    #FFFFFF;
  --card2:   #FFF7EC;
  --text:    #1a1a1a;
  --muted:   #666666;
  --border:  #e5e7eb;

  /* Pages built on sahayai_design_system.css (chitti_2wheeler /
     chitti_4wheeler / chitti_fashion) use --sds-* tokens — point them
     at the same flag palette so those pages inherit Indian colors
     without a per-page overlay. Added 2026-05-23. */
  --sds-saffron: #FF9933;
  --sds-white:   #FFFFFF;
  --sds-green:   #138808;
  --sds-navy:    #000080;
  --sds-dark:    #000080;
  --sds-bg:      #FAFAFA;
  --sds-muted:   #666666;
  --sds-line:    #e5e7eb;
  --sds-line-strong: #BDBDBD;
  --sds-amber:   #FF9933;
  --sds-red:     #CC0000;
  --sds-fb-yellow: #FFF8E1;

  /* Typography + scale */
  --chitti-font: 'Noto Sans', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Inter', Roboto, sans-serif;
  --chitti-font-mono: 'JetBrains Mono', 'Menlo', monospace;
  --chitti-radius:   14px;        /* per Sire's Priority-1 spec */
  --chitti-radius-lg: 18px;
  --chitti-shadow:   0 2px 12px rgba(0, 0, 80, 0.08);   /* per spec */
  --chitti-shadow-md: 0 8px 24px rgba(0, 0, 80, 0.14);
  --chitti-tap:      48px;        /* WCAG 2.5.5 — 48px per Sire spec */
  --radius:          14px;
  --card-shadow:     0 2px 12px rgba(0, 0, 80, 0.08);

  /* Spacing scale (4-pt grid) */
  --chitti-sp-1: 4px;
  --chitti-sp-2: 8px;
  --chitti-sp-3: 12px;
  --chitti-sp-4: 16px;
  --chitti-sp-5: 24px;
  --chitti-sp-6: 32px;
}

/* RTL bidi for ur/ks/sd — chitti_a11y.js sets <html dir="rtl"> on switch. */
html[dir="rtl"] body { direction: rtl; text-align: right; }
html[dir="rtl"] .chitti-a11y-bar { flex-direction: row-reverse; }

/* ── Base reset (mobile-first 375 px) ────────────────────────── */
html, body {
  font-family: var(--chitti-font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--chitti-text);
  background: var(--chitti-bg);
  -webkit-text-size-adjust: 100%;
}

* { box-sizing: border-box; }

/* Touch targets — never smaller than 44 px on mobile. */
button,
a.chitti-btn,
input[type="button"],
input[type="submit"],
.chitti-tap {
  min-height: var(--chitti-tap);
  min-width: var(--chitti-tap);
}

/* ── Indian-flag stripe — 3 EQUAL bands (saffron / white / green) ─
   Per Sire's Priority-1 spec, the top stripe on EVERY page is the
   flag tricolour: saffron left third, white middle, green right third.
   This selector overrides any per-page .bharat-stripe (which most
   Chitti pages still ship with the legacy gradient saffron→gold→navy).
*/
.chitti-bharat-stripe,
.bharat-stripe,
.sds-tricolour {
  height: 3px !important;
  background: linear-gradient(
    90deg,
    var(--chitti-saffron) 0%, var(--chitti-saffron) 33.33%,
    var(--chitti-white)  33.33%, var(--chitti-white)  66.66%,
    var(--chitti-green)  66.66%, var(--chitti-green)  100%
  ) !important;
}
/* SDS pages use .sds-tricolour.fixed for the sticky top variant. */
.sds-tricolour.fixed {
  position: sticky;
  top: 0;
  z-index: 80;
}

/* ── Buttons — unified style ─────────────────────────────────── */
.chitti-btn,
button.chitti-primary,
.btn-saffron {
  background: linear-gradient(135deg, var(--chitti-saffron), var(--chitti-saffron-deep)) !important;
  color: var(--chitti-white) !important;
  border: none;
  border-radius: var(--chitti-radius);
  padding: 12px 18px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
  box-shadow: var(--chitti-shadow);
  transition: filter .15s, transform .1s;
}
.chitti-btn:hover,
button.chitti-primary:hover,
.btn-saffron:hover { filter: brightness(1.06); }
.chitti-btn:active,
button.chitti-primary:active,
.btn-saffron:active { transform: translateY(1px); }

button.chitti-navy,
.btn-navy {
  background: linear-gradient(135deg, var(--chitti-navy), var(--chitti-navy-deep)) !important;
  color: var(--chitti-white) !important;
  border: none;
  border-radius: var(--chitti-radius);
  padding: 12px 18px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
}

button.chitti-ghost,
.btn-ghost {
  background: transparent;
  color: var(--chitti-text);
  border: 1px solid var(--chitti-border);
  border-radius: var(--chitti-radius);
  padding: 10px 16px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
}

/* ── Header (consistent across all pages) ────────────────────── */
header[role="banner"],
.chitti-header {
  background: linear-gradient(135deg, var(--chitti-navy), #16376a);
  color: var(--chitti-white);
  border-radius: 0 0 var(--chitti-radius-lg) var(--chitti-radius-lg);
  padding: var(--chitti-sp-4);
}

header[role="banner"] .brand,
.chitti-header .brand {
  font-weight: 900;
  font-size: 20px;
  line-height: 1.1;
  color: var(--chitti-white);
}

/* ── Section cards (unified) ─────────────────────────────────── */
.section-card,
.card,
.panel {
  background: var(--chitti-white);
  border: 1px solid var(--chitti-border);
  border-radius: var(--chitti-radius-lg);
  padding: var(--chitti-sp-4);
  box-shadow: var(--chitti-shadow);
  margin: 0 0 var(--chitti-sp-3);
}

/* ── Response box — the per-response widget anchor ───────────── */
[data-chitti-response] {
  position: relative;
}

/* ── Chip / pill styles (legacy classes get the saffron accent) ── */
.chip,
.pill,
.badge {
  background: var(--chitti-cream);
  color: var(--chitti-text);
  border: 1px solid var(--chitti-saffron);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ── Sticky disclaimer bars (e.g. NOT SEBI REGISTERED) ───────── */
.sebi-bar,
.legal-bar,
[data-chitti-legal-bar] {
  background: var(--chitti-danger) !important;
  color: var(--chitti-white) !important;
  font-weight: 800;
  text-align: center;
  padding: 8px 12px;
  font-size: 12px;
  letter-spacing: .03em;
  position: sticky;
  top: 0;
  z-index: 100;
}

/* ── Override the most common hardcoded hex codes from the
 *    pre-unified theme (--saffron was #E86A17, --gold was #D4AF37).
 *    We can't rewrite every inline style, but the bulk of pages
 *    used these patterns inline. ───────────────────────────────── */
[style*="#E86A17"]      { background-color: var(--chitti-saffron) !important; }
[style*="background:#E86A17"]  { background: var(--chitti-saffron) !important; }
[style*="color:#E86A17"] { color: var(--chitti-saffron) !important; }

/* ── Forms ───────────────────────────────────────────────────── */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="search"],
textarea,
select {
  background: var(--chitti-white);
  border: 1px solid var(--chitti-border);
  border-radius: var(--chitti-radius);
  padding: 12px 14px;
  font-size: 14px;
  font-family: inherit;
  color: var(--chitti-text);
  min-height: var(--chitti-tap);
  width: 100%;
  max-width: 100%;
}
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--chitti-saffron);
  box-shadow: 0 0 0 3px rgba(255, 153, 51, 0.25);
}

/* ── Language switcher (top-right corner — chitti_a11y.js renders) ─ */
.chitti-langbar {
  position: fixed;
  top: 8px;
  right: 8px;
  z-index: 8500;
  background: rgba(0, 51, 102, 0.92);
  color: var(--chitti-white);
  border-radius: var(--chitti-radius);
  padding: 4px 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  box-shadow: var(--chitti-shadow);
}
.chitti-langbar select {
  background: rgba(255, 255, 255, 0.10);
  color: var(--chitti-white);
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  min-height: 32px;
  min-width: 110px;
  font-family: inherit;
}
.chitti-langbar select option { background: var(--chitti-navy); color: var(--chitti-white); }
html[dir="rtl"] .chitti-langbar { right: auto; left: 8px; }

/* ── Per-response widget — 4-icon row (rendered by feedback-widget.js) ── */
.chitti-fwidget,
.chitti-feedback-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--chitti-sp-2);
  flex-wrap: wrap;
}
.chitti-fwidget button,
.chitti-feedback-row button {
  background: var(--chitti-white);
  border: 1px solid var(--chitti-border);
  border-radius: 999px;
  width: 36px;
  height: 36px;
  padding: 0;
  cursor: pointer;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--chitti-text);
  transition: transform .1s, border-color .15s;
}
.chitti-fwidget button:hover,
.chitti-feedback-row button:hover {
  border-color: var(--chitti-saffron);
}
.chitti-fwidget button[data-action="up"]:hover { color: var(--chitti-success); }
.chitti-fwidget button[data-action="down"]:hover { color: var(--chitti-danger); }
.chitti-fwidget button.active { background: var(--chitti-cream); border-color: var(--chitti-saffron); }

/* ── ISL panel — chitti_isl.js renders next to response boxes ── */
.chitti-isl-panel {
  display: inline-block;
  margin: 4px 6px;
  padding: 4px 8px;
  background: var(--chitti-cream);
  border: 1px dashed var(--chitti-saffron);
  border-radius: var(--chitti-radius);
  font-size: 12px;
  color: var(--chitti-text);
  font-family: inherit;
}

/* ── Mobile-first responsive scale ───────────────────────────── */
@media (min-width: 640px) {
  html, body { font-size: 16px; }
  .chitti-header { padding: var(--chitti-sp-5); }
}
@media (min-width: 1024px) {
  .section-card, .card, .panel { padding: var(--chitti-sp-5); }
}

/* ── Reduced-motion respect ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ── Print / PDF mode ────────────────────────────────────────── */
@media print {
  .chitti-langbar,
  .chitti-fwidget,
  .chitti-feedback-row,
  .chitti-a11y-bar,
  button { display: none !important; }
  body { color: #000; background: #fff; }
}

/* ═══════════════════════════════════════════════════════════════
   FEEDBACK-WIDGET CARD INTEGRATION (universal — 2026-05-23)
   feedback-widget.js inserts the 4-icon bar as a SIBLING after each
   .chitti-response card (architectural — it survives innerHTML rerenders).
   The CSS below makes that sibling bar visually JOIN the card above:
   shared border, no top border, shared radius bottom. Result reads as
   "icons inside the card" without modifying the platform widget.
   Lifted from the Health File one-off into the platform substrate so
   every page gets the fix.
   ═══════════════════════════════════════════════════════════════ */

.chitti-response {
  background: var(--chitti-white) !important;
  border-left: 4px solid var(--chitti-saffron) !important;
  border-radius: var(--chitti-radius) var(--chitti-radius) 0 0 !important;
  margin-bottom: 0 !important;
  box-shadow: var(--card-shadow) !important;
}
.chitti-response + .chitti-fb-box-bar {
  background: var(--chitti-white) !important;
  border: 1px solid var(--chitti-border) !important;
  border-left: 4px solid var(--chitti-saffron) !important;
  border-top: 1px dashed var(--chitti-border) !important;
  border-radius: 0 0 var(--chitti-radius) var(--chitti-radius) !important;
  padding: 10px 16px !important;
  margin: 0 0 14px 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  box-shadow: var(--card-shadow) !important;
}
.chitti-response + .chitti-fb-box-bar .chitti-fb-bbtn {
  background: rgba(0, 0, 0, 0.04) !important;
  border: 1px solid var(--chitti-border) !important;
  border-radius: 8px !important;
  padding: 6px 10px !important;
  font-size: 13px !important;
  cursor: pointer !important;
  min-height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-family: inherit !important;
}
.chitti-response + .chitti-fb-box-bar .chitti-fb-bbtn.demo {
  background: rgba(255, 153, 51, 0.10) !important;   /* saffron tint */
  color: var(--chitti-saffron-deep) !important;
  border-color: rgba(255, 153, 51, 0.35) !important;
}
.chitti-response + .chitti-fb-box-bar .chitti-fb-bbtn.up:hover {
  background: rgba(19, 136, 8, 0.12) !important;     /* green hover */
  border-color: var(--chitti-green) !important;
}
.chitti-response + .chitti-fb-box-bar .chitti-fb-bbtn.down:hover {
  background: rgba(204, 0, 0, 0.10) !important;      /* danger hover */
  border-color: var(--chitti-danger) !important;
}
/* Push 👍/👎 to the right edge of the bar so 🤖/🔊 stay anchored left. */
.chitti-response + .chitti-fb-box-bar .chitti-fb-bbtn.up {
  margin-left: auto !important;
}
.chitti-fb-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ═══════════════════════════════════════════════════════════════
   BHARAT BOTTOM-NAV (opt-in per page)
   Pages add: <nav class="chitti-bharat-bottom-nav" ...> with anchors.
   Active anchor takes .active class. Inactive opacity 0.6.
   ═══════════════════════════════════════════════════════════════ */
.chitti-bharat-bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0;
  height: 56px;
  background: var(--chitti-navy);
  color: var(--chitti-white);
  display: flex; align-items: center; justify-content: space-around;
  z-index: 60;
  padding: 0 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 -2px 12px rgba(0, 0, 80, 0.18);
}
.chitti-bharat-bottom-nav a,
.chitti-bharat-bottom-nav button {
  color: rgba(255, 255, 255, 0.60);
  text-decoration: none;
  background: transparent; border: 0;
  font-family: inherit; font-size: 11px; font-weight: 700;
  min-height: 48px; min-width: 48px;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 4px 8px;
  border-bottom: 3px solid transparent;
}
.chitti-bharat-bottom-nav a.active,
.chitti-bharat-bottom-nav button.active {
  color: var(--chitti-saffron);
  border-bottom-color: var(--chitti-saffron);
}
.chitti-bharat-bottom-nav .ico { font-size: 20px; line-height: 1; }

/* ═══════════════════════════════════════════════════════════════
   BHARAT HERO GRADIENT (opt-in per page)
   .chitti-bharat-hero adds the flag gradient hero. Section titles
   default to navy + bold.
   ═══════════════════════════════════════════════════════════════ */
.chitti-bharat-hero {
  background: linear-gradient(135deg,
    var(--chitti-saffron) 0%,
    var(--chitti-white) 50%,
    var(--chitti-green) 100%);
  color: var(--chitti-navy);
  padding: 20px;
  border-radius: var(--radius);
  margin: 12px;
}
.chitti-bharat-hero h1,
.chitti-bharat-hero .title { color: var(--chitti-navy); font-weight: 800; }

/* Success / confirm buttons in flag green */
.btn-success,
.chitti-success-btn,
button.chitti-success {
  background: linear-gradient(135deg, var(--chitti-green), var(--chitti-green-deep)) !important;
  color: var(--chitti-white) !important;
  border: none;
  border-radius: var(--radius);
  padding: 12px 18px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
  min-height: 48px;
}
.btn-success:hover { filter: brightness(1.06); }

/* Links default to navy across all Chitti pages */
a:not([class*="chitti-btn"]):not([class*="btn-"]):not(.cta-saffron) {
  color: var(--chitti-navy);
}
a:not([class*="chitti-btn"]):not([class*="btn-"]):not(.cta-saffron):hover {
  color: var(--chitti-saffron-deep);
}

/* Section headings default to navy + bold */
.section-title,
section h2,
section h3 {
  color: var(--chitti-navy);
}

/* Warning surface — saffron at 80% (effective tone for non-critical alerts) */
.chitti-warning,
.warn-banner {
  background: rgba(255, 153, 51, 0.80);
  color: var(--chitti-white);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-weight: 600;
}

/* Danger / error */
.chitti-danger,
.error-banner,
.btn-danger {
  background: var(--chitti-danger);
  color: var(--chitti-white);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-weight: 600;
  border: 0;
  cursor: pointer;
}

/* When bottom-nav is present, add bottom-padding to body so content
   doesn't hide behind the 56px bar. Opt-in: add class chitti-has-bottom-nav
   to body. */
body.chitti-has-bottom-nav { padding-bottom: 68px; }

/* ═══════════════════════════════════════════════════════════════
   375px MOBILE GUARDS (LOCKED 2026-05-23 — Sire Step-3 directive)
   Universal "no-horizontal-scroll-ever" + "48px tap target everywhere"
   safety net. Applied to ALL 16 product pages via theme.css inclusion.
   ═══════════════════════════════════════════════════════════════ */

/* 1. PREVENT horizontal scroll at any width. Body width clamped to
      the viewport; any overflow gets hidden (better than the page
      offering a horizontal-scroll surface that users find by accident
      on touch). Long content INSIDE specific containers can still
      use overflow-x:auto explicitly — this guard only stops the
      ROOT-LEVEL surprise. */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
}

/* 2. Media + embeds — always fit the column on mobile. */
img, video, canvas, iframe, svg, embed, object {
  max-width: 100%;
  height: auto;
}

/* 3. Long unbroken strings (URLs, base64, hashes) — wrap, don't
      stretch the parent. */
pre, code, samp, kbd {
  white-space: pre-wrap;
  word-break: break-word;
}
.kv-row .val, .answer, .timeline .entry, [data-chitti-response] {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 4. Tables — wrap as small cards on phones (last-resort; pages
      that need a real table should opt-in via .chitti-keep-table). */
@media (max-width: 480px) {
  table:not(.chitti-keep-table) {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
}

/* 5. Tap-target floor — 48×48 px on every interactive element that
      looks like a primary action. Excludes elements explicitly opting
      out via .chitti-tiny / .btn-tiny (small chrome icons / inline
      affordances), and excludes the per-card feedback bar buttons
      which already declare 36px because they nest 4 buttons in a
      narrow row. */
button:not(.chitti-tiny):not(.btn-tiny):not(.tiny):not(.chitti-fb-bbtn),
a.btn:not(.tiny),
a.cta-saffron:not(.tiny),
a.btn-saffron:not(.tiny),
a.btn-navy:not(.tiny),
input[type="button"]:not(.tiny),
input[type="submit"]:not(.tiny) {
  min-height: 48px;
  min-width: 48px;
}

/* 6. Flex / grid rows that pack many children → always wrap on
      narrow screens so nothing gets pushed off-screen. */
@media (max-width: 480px) {
  .switch-row,
  .header-controls,
  .brand-row,
  .pills,
  .row-mic,
  .field-row,
  .lang-pick,
  .actions {
    flex-wrap: wrap !important;
  }
  /* Bottom-nav: ensure 5 tabs squeeze without wrap (use smaller font
     instead — the nav itself never wraps because it's `display:flex`
     justify-content:space-around with 5 equal columns at 56px height). */
  .chitti-bharat-bottom-nav .lbl {
    font-size: 10px;
  }
  .chitti-bharat-bottom-nav .ico {
    font-size: 18px;
  }
}

/* 7. Form controls — no IE/Safari overflow on inputs. */
input, select, textarea, button {
  max-width: 100%;
}

/* 8. Sticky banners — never push horizontal layout. */
.sebi-bar, .med-bar, .news-disclaimer, .picker-bar, .chitti-disclaimer-bar {
  max-width: 100vw;
  overflow-x: hidden;
}

/* 9. Bharat stripe — already 3 equal bands per spec, but on very
      narrow phones (320 px) the 3-band gradient can look pixel-aligned
      off. Force the gradient stops to integer percentages for crisp
      rendering. (Already done above; this is a safety pin in case
      the stop math changes in future.) */
@media (max-width: 380px) {
  .chitti-bharat-stripe,
  .bharat-stripe {
    height: 3px !important;
    background: linear-gradient(
      90deg,
      var(--chitti-saffron) 0%,
      var(--chitti-saffron) 33%,
      var(--chitti-white)   33%,
      var(--chitti-white)   67%,
      var(--chitti-green)   67%,
      var(--chitti-green)   100%
    ) !important;
  }
}

/* 10. Bottom-nav above sticky bottom UI — ensure the 56px nav doesn't
       hide content from sticky callouts. Already handled via body.chitti-
       has-bottom-nav { padding-bottom:68px }. */

/* ═══════════════════════════════════════════════════════════════
   GAP-1 (2026-05-24): per-page mobile-overflow patterns spotted in
   the static scan that weren't covered by the earlier 10 guards.
   ═══════════════════════════════════════════════════════════════ */

/* 11. Fixed-bottom UI elements (FABs, toasts, demo-banners, sticky
       footers, debug ribbons) must clear the 56px navy nav. Pages
       opt in via body.chitti-has-bottom-nav; this rule bumps known
       fixed-bottom patterns to bottom:68px so they sit ABOVE the nav.
       Excludes the nav itself + the "you are here" badge (top-anchored). */
body.chitti-has-bottom-nav .demo-banner,
body.chitti-has-bottom-nav .toast,
body.chitti-has-bottom-nav .chitti-toast,
body.chitti-has-bottom-nav .sticky-bottom,
body.chitti-has-bottom-nav .fab,
body.chitti-has-bottom-nav .bottom-cta,
body.chitti-has-bottom-nav .demo-ribbon-bottom {
  bottom: 68px !important;
}

/* 12. Modal overlays that take the full viewport — make sure they
       don't show the bottom-nav underneath bleeding through.
       Z-index higher than the nav (60). */
.modal, .vmodal, .vai-modal, .med-modal, .chitti-overlay,
.consent-overlay, .device-overlay, .kv-overlay, [role="dialog"][aria-modal="true"] {
  z-index: 9000 !important;
}

/* 13. Long-content text containers — anywhere user-pasted text or
       fetched API content lands, force wrap. Catches the .answer /
       .timeline pattern on multiple pages that the §3 word-break
       rule already covers, plus a few more containers we found in
       the deep scan. */
.timeline-entry, .art-summary, .art-title, .kv-row .name,
.answer-text, .response-text, .ai-reply, .deepseek-reply,
[data-chitti-response] *:not(button):not(input):not(select):not(svg):not(.ico) {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 14. Common form rows that ship as flex with 3+ children — wrap
       on phones so they never push horizontally. */
@media (max-width: 480px) {
  .field-row, .form-row, .actions-row,
  .picker-bar, .upload-row, .insurance-row, .doc-row {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  /* Inputs in those rows take full width if the row wraps */
  .field-row > .field, .form-row > .field, .upload-row > input,
  .picker-bar select, .picker-bar input {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* 15. SDS (2wheeler/4wheeler/fashion) pages — their .sds-page
       wrapper sometimes has min-width that breaks 375px. Force fluid.
       The class names come from sahayai_design_system.css; theme.css
       overrides at higher specificity via .sds-page.sds-page. */
.sds-page.sds-page,
.sds-page.sds-page .sds-card,
.sds-page.sds-page .sds-row,
.sds-page.sds-page .sds-col {
  max-width: 100%;
  min-width: 0;
}

/* 16. Vaani's vai-tabbar — pin to bottom AND coexist with its own
       internals. Vaani opts out of the unified bottom-nav, so the
       vai-tabbar is the only bottom-fixed element there — no conflict. */
.vai-tabbar { z-index: 60 !important; }

/* 17. Health File iframe inside MedUPI's #health-file tab — clamp
       height so the iframe + tabs + bottom-nav all fit. */
#hf-iframe {
  max-width: 100% !important;
  min-height: 700px;
}
@media (max-width: 480px) {
  #hf-iframe { min-height: 560px; }
}

/* 18. Header brand-row on every page — never let "Chitti X" tag-line
       wrap and break layout; if it must overflow, ellipsize. */
@media (max-width: 480px) {
  header[role="banner"] .brand,
  .chitti-header .brand,
  header[role="banner"] .tagline,
  .chitti-header .tagline {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
