/* =====================================================================
   BharatCall brand system — loaded LAST on every page.
   One palette, one type pair, one set of controls, light + dark.
   Every page keeps its own layout CSS; this file maps all of their
   colour variables onto these shared tokens, so the whole site switches
   theme together and looks like one product.
   ===================================================================== */

/* ---------- 1. Tokens: "Saffron India" ----------
   Saffron primary, India-green accent, chakra-navy ink. Light = warm cream, dark = deep navy.
   Chart colours (studio/admin) were checked separately with the dataviz palette validator. */
:root,
html[data-theme="dark"] {
  --bc-primary: #F07A2B;          /* saffron (brighter on navy) */
  --bc-primary-hover: #F98E45;
  --bc-primary-soft: #FDBA74;
  --bc-primary-rgb: 240 122 43;   /* same colour as numbers, for see-through tints: rgb(var(--bc-primary-rgb) / .1) */
  --bc-accent: #34C77B;           /* India green */
  --bc-navy: #93A5E8;             /* chakra navy, lifted for dark */
  --bc-success: #22A55B;
  --bc-success-soft: #4ADE80;
  --bc-warning: #F5A623;
  --bc-danger: #F05263;
  --bc-grad: linear-gradient(135deg, #D4520F 0%, #B83A0A 100%);
  --bc-grad-hover: linear-gradient(135deg, #DD5A12 0%, #C2410C 100%);
  --bc-tricolor: linear-gradient(90deg, #FF9933 0 33.3%, #1E3A8A 33.3% 66.6%, #138808 66.6%);

  --bc-bg: #0B1222;
  --bc-surface: #111A2E;
  --bc-surface-2: #18233B;
  --bc-surface-3: #20304D;
  --bc-text: #F7F3EC;
  --bc-text-2: #BFC4D3;
  --bc-muted: #7F88A0;
  --bc-line: rgba(255, 255, 255, 0.08);
  --bc-line-strong: rgba(255, 255, 255, 0.18);
  --bc-tint: rgba(255, 255, 255, 0.05);
  --bc-tint-2: rgba(255, 255, 255, 0.09);
  --bc-input: rgba(255, 255, 255, 0.04);
  --bc-topbar: rgba(11, 18, 34, 0.82);
  --bc-shadow: 0 12px 34px rgba(0, 0, 0, 0.38);
  --bc-shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.5);
  --bc-contrast-bg: #FFFCF7;      /* light "paper" sections on the landing page */
  --bc-contrast-bg-2: #F6EEE2;
  --bc-contrast-text: #1A1F33;
  --bc-contrast-text-2: #4B4F63;
  --bc-contrast-line: rgba(26, 31, 51, 0.09);

  --bc-font-display: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bc-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bc-radius: 18px;
  --bc-radius-sm: 12px;
  color-scheme: dark;
}

html[data-theme="light"] {
  --bc-primary: #C2410C;          /* deep saffron: 5:1 on white, so it works for text too */
  --bc-primary-hover: #9A3412;
  --bc-primary-soft: #EA580C;
  --bc-primary-rgb: 194 65 12;
  --bc-accent: #15803D;
  --bc-navy: #1E3A8A;
  --bc-success: #15803D;
  --bc-success-soft: #22A55B;
  --bc-danger: #DC2646;
  --bc-bg: #FBF6EE;
  --bc-surface: #FFFFFF;
  --bc-surface-2: #F6EEE2;
  --bc-surface-3: #EDE2D2;
  --bc-text: #1A1F33;
  --bc-text-2: #4B4F63;
  --bc-muted: #857E73;
  --bc-line: rgba(26, 31, 51, 0.1);
  --bc-line-strong: rgba(26, 31, 51, 0.2);
  --bc-tint: rgb(var(--bc-primary-rgb) / 0.04);
  --bc-tint-2: rgb(var(--bc-primary-rgb) / 0.08);
  --bc-input: #FFFFFF;
  --bc-topbar: rgba(251, 246, 238, 0.86);
  --bc-shadow: 0 10px 30px rgba(120, 60, 10, 0.08);
  --bc-shadow-lg: 0 24px 60px rgba(120, 60, 10, 0.14);
  --bc-contrast-bg: #FFFFFF;
  --bc-contrast-bg-2: #F6EEE2;
  color-scheme: light;
}

/* ---------- 2. Website pages (landing, info, auth, settings, bots) ---------- */
html:root {
  --night: var(--bc-bg);
  --night-2: var(--bc-surface);
  --night-3: var(--bc-surface-2);
  --paper: var(--bc-text);
  --paper-2: var(--bc-text-2);
  --haze: var(--bc-text-2);
  --dim: var(--bc-muted);
  --line-dark: var(--bc-line);
  --rose: var(--bc-primary);
  --rose-soft: var(--bc-primary-soft);
  --mint: var(--bc-success-soft);
  --amber: var(--bc-warning);
  --ink: var(--bc-contrast-text);
  --ink-soft: var(--bc-contrast-text-2);
  --line-light: var(--bc-contrast-line);
  --f-display: var(--bc-font-display);
  --f-body: var(--bc-font-body);
  --radius: var(--bc-radius);
}

/* ---------- 3. Dashboard (beats its own body[data-theme] rules) ---------- */
html[data-theme] body {
  --bg-base: var(--bc-bg);
  --surface-solid: var(--bc-surface);
  --surface-hover: var(--bc-tint-2);
  --surface-sunken: var(--bc-surface-2);
  --border-line: var(--bc-line);
  --text-primary: var(--bc-text);
  --text-secondary: var(--bc-text-2);
  --text-muted: var(--bc-muted);
  --iris: var(--bc-primary);
  --magenta: var(--bc-danger);       /* the dashboard uses it for leave/delete/errors */
  --green: var(--bc-accent);
  --gold: var(--bc-warning);
  --accent-grad: var(--bc-grad);
  --accent-glow: 0 8px 24px -6px rgba(212, 82, 15, 0.45);
  --p-emerald: var(--bc-success);
}
html[data-theme="dark"] body {
  --bg-mesh-1: radial-gradient(at 0% 0%, rgba(240, 122, 43, 0.12) 0px, transparent 50%);
  --bg-mesh-2: radial-gradient(at 100% 100%, rgba(52, 199, 123, 0.08) 0px, transparent 50%);
  --bg-mesh-3: radial-gradient(at 50% 50%, rgba(11, 18, 34, 0.6) 0px, transparent 100%);
  --glass-bg: rgba(17, 26, 46, 0.78);
  --glass-border: rgba(255, 255, 255, 0.07);
  --glass-shadow: var(--bc-shadow);
  --glass-shadow-hover: var(--bc-shadow-lg);
  --p-bubble-in: var(--bc-surface-2);
  --p-bubble-out: rgba(16, 185, 129, 0.18);
}
html[data-theme="light"] body {
  --bg-mesh-1: radial-gradient(at 0% 0%, rgba(255, 153, 51, 0.12) 0px, transparent 50%);
  --bg-mesh-2: radial-gradient(at 100% 100%, rgba(19, 136, 8, 0.06) 0px, transparent 50%);
  --bg-mesh-3: radial-gradient(at 50% 50%, rgba(255, 252, 247, 0.7) 0px, transparent 100%);
  --glass-bg: rgba(255, 255, 255, 0.84);
  --glass-border: rgba(255, 255, 255, 0.9);
  --glass-shadow: var(--bc-shadow);
  --glass-shadow-hover: var(--bc-shadow-lg);
  --p-bubble-in: #FFFFFF;
  --p-bubble-out: #DCFCE7;
}
/* Outgoing chat bubbles: readable text in both themes */
html[data-theme="dark"] .bubble.out { color: #D1FAE5; }
html[data-theme="dark"] .bubble.out .t { color: #A7F3D0; }

/* ---------- 4. Admin panel + developer portal ---------- */
html:root {
  --bg: var(--bc-bg);
  --panel: var(--bc-surface);
  --surface: var(--bc-surface);
  --sunken: var(--bc-surface-2);
  --line: var(--bc-line);
  --border: var(--bc-line);
  --text: var(--bc-text);
  --muted: var(--bc-text-2);
  --text-muted: var(--bc-text-2);
  --surface-hover: var(--bc-tint-2);
  --accent: var(--bc-primary);
  --emerald: var(--bc-success);
  --ok: var(--bc-success);
  --warn: var(--bc-warning);
  --danger: var(--bc-danger);
}

/* ---------- 5. Typography ---------- */
body { font-family: var(--bc-font-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, h4, .display-font, .brand { font-family: var(--bc-font-display); }

/* ---------- 6. Shared controls ---------- */
/* Primary action = the same gradient everywhere */
.btn-fill, .submit, .btn-pill.accent, .bcai-go, .btn.primary {
  background: var(--bc-grad) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 8px 22px -10px rgb(var(--bc-primary-rgb) / 0.75);
}
.btn-fill:hover, .submit:hover, .btn-pill.accent:hover, .btn.primary:hover { background: var(--bc-grad-hover) !important; }
.btn-fill:focus-visible, .submit:focus-visible, .btn-pill:focus-visible, .btn:focus-visible { outline: 2px solid var(--bc-primary-soft); outline-offset: 2px; }

/* Website + settings form fields */
.fg input, .fg select, .fg textarea {
  background: var(--bc-input) !important;
  color: var(--bc-text) !important;
  border-color: var(--bc-line-strong);
}
.fg input::placeholder, .fg textarea::placeholder { color: var(--bc-muted); }
.fg input:focus, .fg select:focus, .fg textarea:focus { border-color: var(--bc-primary) !important; box-shadow: 0 0 0 4px rgb(var(--bc-primary-rgb) / 0.14); }
select option { background: var(--bc-surface); color: var(--bc-text); }

/* Brand lock-up: real logo everywhere */
.brand-logo { width: 30px; height: 30px; border-radius: 9px; object-fit: cover; flex-shrink: 0; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: -0.02em; }

/* Theme toggle button (website header, admin) */
.theme-toggle {
  width: 38px; height: 38px; border-radius: 50%; display: inline-grid; place-items: center; cursor: pointer;
  border: 1px solid var(--bc-line-strong); background: transparent; color: var(--bc-text-2); font-size: 15px;
  transition: color .2s, border-color .2s, background .2s;
}
.theme-toggle:hover { color: var(--bc-text); border-color: var(--bc-primary); background: var(--bc-tint); }

/* Website header (same frosted bar in both themes) */
.topbar { background: var(--bc-topbar) !important; }
html[data-theme="light"] .topbar { box-shadow: 0 1px 0 var(--bc-line); }
html[data-theme="light"] .aurora .blob { opacity: 0.35; }
html[data-theme="light"] .flash.ok { color: #047857; }
html[data-theme="light"] .flash.err { color: #B91C3C; }
html[data-theme="light"] .why .kicker { color: #4B3BE0 !important; }

/* Cards on website pages get the same soft elevation as the app */
.form-card, .card-d, .officer, .row-item, .acc-item, .stat { box-shadow: var(--bc-shadow); }

/* Smooth theme changes (skipped for reduced-motion users) */
@media (prefers-reduced-motion: no-preference) {
  body, .topbar, .form-card, .glass, .p-shell, .popover {
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
  }
}

/* ---------- 7. Motion & polish ---------- */
:root { --bc-ease: cubic-bezier(.16, 1, .3, 1); --bc-spring: cubic-bezier(.34, 1.56, .64, 1); }
::selection { background: rgba(255, 153, 51, 0.32); }
:focus-visible { outline: 2px solid var(--bc-primary-soft); outline-offset: 2px; }
input:focus-visible, textarea:focus-visible { outline: none; }

/* Skeleton placeholders (global_space.js skeleton()) */
.sk { background: var(--bc-tint-2); border-radius: 8px; position: relative; overflow: hidden; }
.sk::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--bc-tint-2), transparent);
  animation: bcShimmer 1.3s ease-in-out infinite;
}
.sk-av { width: 40px; height: 40px; border-radius: 14px; flex-shrink: 0; }
.sk-line { height: 12px; margin-top: 10px; }
.sk-block { height: 180px; margin-top: 16px; border-radius: 14px; }
.sk-row { gap: 12px; padding: 10px 6px; }
.sk-card { pointer-events: none; padding: 24px; margin-bottom: 24px; }
@media (max-width: 768px) { .sk-card { padding: 16px; margin-bottom: 14px; border-radius: 18px; } }
@keyframes bcShimmer { to { transform: translateX(100%); } }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  /* Content rises in as it loads; re-rendered cards (.static) don't. */
  .post:not(.static), .entity-card, .v-card-large, .empty-state, .sk-wrap, .form-card, .acc-item {
    animation: bcRise .5s var(--bc-ease) both;
  }
  .post:nth-child(2), .entity-card:nth-child(2), .v-card-large:nth-child(2) { animation-delay: .04s; }
  .post:nth-child(3), .entity-card:nth-child(3), .v-card-large:nth-child(3) { animation-delay: .08s; }
  .post:nth-child(4), .entity-card:nth-child(4), .v-card-large:nth-child(4) { animation-delay: .12s; }
  .post:nth-child(n+5), .entity-card:nth-child(n+5), .v-card-large:nth-child(n+5) { animation-delay: .16s; }
  .post.static { animation: none; }
  @keyframes bcRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

  /* Section switches glide instead of snapping */
  .view { transition: opacity .35s var(--bc-ease), transform .35s var(--bc-ease), visibility .35s !important; transform: translateY(6px); }
  .view.visible { transform: none; }

  /* Cards lift slightly under the pointer */
  .post, .entity-card, .v-card-large, .side-card { transition: transform .3s var(--bc-ease), box-shadow .3s ease, border-color .3s ease; }
  .entity-card:hover, .v-card-large:hover { transform: translateY(-3px); }

  /* Every button answers a press */
  button, .btn-pill, .icon-btn, .rail-btn, .pa, .pop-row, .chip, .tab, .btn, .submit, .btn-fill, .theme-toggle {
    -webkit-tap-highlight-color: transparent;
  }
  .btn-pill:active:not(:disabled), .icon-btn:active, .rail-btn:active, .pa:active, .btn:active, .submit:active, .btn-fill:active, .theme-toggle:active {
    transform: scale(.96) !important; transition-duration: .08s;
  }
  .rail-btn { transition: background .25s ease, color .25s ease, box-shadow .25s ease, transform .25s var(--bc-spring); }
  .rail-btn:hover:not(.active) { transform: translateY(-2px); }

  /* Like: heart pops, then settles */
  .post-actions .pa.like.liked svg { color: #E11D48; fill: #E11D48; }
  .post-actions .pa.like.pop svg { animation: bcPop .45s var(--bc-spring); }
  @keyframes bcPop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }

  /* New chat bubbles slide in from their own side */
  .bubble:last-child { animation: bcBubble .3s var(--bc-ease) both; }
  .bubble.in:last-child { --bx: -8px; }
  .bubble.out:last-child { --bx: 8px; }
  @keyframes bcBubble { from { opacity: 0; transform: translateX(var(--bx, 0)) scale(.98); } to { opacity: 1; transform: none; } }

  /* Images fade in rather than pop */
  .post-gallery img { animation: bcFade .5s ease both; }
  @keyframes bcFade { from { opacity: 0; } to { opacity: 1; } }
}

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

/* ---------- 8. Saffron India signature ---------- */
/* A slim tricolour stripe on every header (website, app, admin) */
.topbar, .topbar-a { position: relative; }
.topbar::before, .topbar-a::before, .bc-tricolor::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--bc-tricolor); z-index: 2; pointer-events: none;
}
/* A faint jaali (lattice) pattern behind hero sections */
section.hero, section.subhero {
  background-image:
    radial-gradient(circle at 1px 1px, rgb(var(--bc-primary-rgb) / 0.09) 1px, transparent 1.6px),
    radial-gradient(circle at 13px 13px, rgba(19, 136, 8, 0.06) 1px, transparent 1.6px);
  background-size: 24px 24px, 24px 24px;
}
html[data-theme="dark"] section.hero, html[data-theme="dark"] section.subhero {
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255, 153, 51, 0.10) 1px, transparent 1.6px),
    radial-gradient(circle at 13px 13px, rgba(52, 199, 123, 0.07) 1px, transparent 1.6px);
}
/* Headline emphasis wears saffron everywhere */
section.hero h1 em, section.subhero h1 em { color: var(--bc-primary); }
/* Saffron glows read as brown on navy at full strength: keep them soft in dark mode */
html[data-theme="dark"] .aurora .blob { opacity: 0.2 !important; }

/* Touch feel: taps act at once (no double-tap-zoom wait), no grey flash on phones, and scrolling inside a sheet or
   thread doesn't drag the whole page. People who ask for less motion get it everywhere. */
html { -webkit-tap-highlight-color: transparent; }
a, button, select, label, summary, input[type="checkbox"], [role="button"], [onclick], .btn, .btn-pill, .rail-btn, .chat-row, .bubble { touch-action: manipulation; }
#thread-messages, .modal-content, .cm-list, .popover { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
img { content-visibility: auto; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Chat tools */
.chat-tools { display: flex; gap: 6px; padding: 0 16px 10px; overflow-x: auto; scrollbar-width: none; }
.chat-tools button { flex-shrink: 0; border: 1px solid var(--border-line); background: transparent; color: var(--text-secondary); border-radius: 999px; padding: 5px 11px; font-size: 12px; font-weight: 700; cursor: pointer; }
.msg-context-menu { max-height: calc(100dvh - 20px); overflow-y: auto; }
.mcm-reacts { display: flex; gap: 2px; padding: 2px 2px 6px; border-bottom: 1px solid var(--border-line); margin-bottom: 4px; }
.mcm-reacts button { flex: 1; min-width: 0; border: 0; background: none; font-size: 18px; padding: 4px 0; border-radius: 8px; cursor: pointer; }
.mcm-reacts button:hover { background: var(--surface-hover); }
.msg-reacts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.msg-reacts span { font-size: 12px; padding: 1px 7px; border-radius: 999px; background: var(--surface-sunken); color: var(--text-primary); border: 1px solid var(--border-line); }
.msg-reacts span.mine { border-color: var(--p-emerald, #10B981); }
.bubble { overflow-wrap: anywhere; min-width: 0; }
.bubble.hit { outline: 2px solid var(--gold, #F5A623); outline-offset: 2px; }
.bubble .mention { font-weight: 800; }
.unread-line { align-self: center; font-size: 11px; font-weight: 800; color: var(--text-secondary); background: var(--surface-sunken); padding: 4px 14px; border-radius: 999px; margin: 6px 0; }
.thread-search { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--border-line); min-width: 0; }
.thread-search input { flex: 1; min-width: 0; border: 1px solid var(--border-line); background: var(--surface-sunken); color: var(--text-primary); border-radius: 999px; padding: 7px 12px; font-size: 13px; outline: none; }
.thread-search button { border: 0; background: none; color: var(--text-secondary); width: 30px; height: 30px; cursor: pointer; flex-shrink: 0; }
.thread-search span { font-size: 12px; color: var(--text-muted); flex-shrink: 0; }
.jump-bottom { position: absolute; right: 20px; bottom: 96px; z-index: 5; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border-line); background: var(--surface-solid); color: var(--text-primary); box-shadow: 0 4px 14px rgba(0,0,0,.18); cursor: pointer; }
.jump-bottom[hidden] { display: none; }
.ce-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.ce-grid img, .ce-grid video { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; cursor: pointer; display: block; }

/* Any screen, any text: long names, links and words wrap inside their box instead of pushing out of it. */
h1, h2, h3, h4, h5, p, li, dd, td, th, blockquote, label, code, .post-body, .cm-text, .quote, .kc-title, .kc-sub { overflow-wrap: anywhere; }
/* Names in headers and lists stay on one line and end in "..." however long they are. */
#thread-name, #thread-status, .chat-row .name, .chat-row .last { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.chat-row .info { min-width: 0; flex: 1; }
img, video, iframe, table { max-width: 100%; }
pre { max-width: 100%; overflow-x: auto; }

.split > * { min-width: 0; }   /* a wide code sample scrolls inside its box instead of stretching the column */

@media (max-width: 340px) { .top-link { width: 32px; height: 32px; margin-left: -4px; flex-shrink: 1; } }