/* BetterChat — design tokens */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* type */
  --font-sans: "IBM Plex Sans", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* radii */
  --r-xs: 5px;
  --r-sm: 7px;
  --r-md: 9px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-pill: 999px;

  /* accent (overridable by tweak) */
  --accent: #5b8cff;
  --accent-fg: #ffffff;

  /* stage colors (theme-independent hues) */
  --stage1: #7c8696;   /* cold  */
  --stage2: #e0a02e;   /* invited */
  --stage3: #34c08a;   /* joined */

  /* market accents */
  --mena: #d4a23c;
  --tr:   #e2566a;
  --cca:  #4a8fe2;
  --au:   #8b7be6;
  --br:   #2e9e57;   /* Brazil green */
  --latam: #e08a3c;

  /* semantic */
  --danger: #f06868;
  --success: #34c08a;
  --held: #d9822b;   /* temporarily blocked by TikTok, auto-retrying */
  --elig: #6f7dd0;   /* parked until the creator passes the eligibility check */

  /* density (overridden by [data-density]) */
  --row-py: 11px;
  --avatar: 40px;
  --list-gap: 2px;
}

/* ---------- DARK (primary) — soft warm charcoal, off-white text, low halation ---------- */
[data-theme="dark"] {
  --bg: #1b1c1f;
  --surface: #222429;
  --surface-2: #292c32;
  --surface-3: #31343b;
  --surface-hover: #2c2f36;
  --raised: #2d3038;

  --border: #30333a;
  --border-2: #3b3f47;
  --border-strong: #4c515b;

  --text: #e8e7e3;
  --text-2: #aeaca6;
  --text-3: #84837d;
  --text-faint: #63615c;

  --accent-weak: color-mix(in srgb, var(--accent) 18%, transparent);
  --accent-line: color-mix(in srgb, var(--accent) 42%, transparent);
  --accent-text: color-mix(in srgb, var(--accent) 72%, white);

  --bubble-them: #272a30;
  --bubble-us: color-mix(in srgb, var(--accent) 17%, #232730);
  --bubble-us-border: color-mix(in srgb, var(--accent) 30%, transparent);
  --bubble-ai: #242a33;

  --shadow-pop: 0 12px 32px -8px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.35);
  --shadow-drawer: -24px 0 48px -12px rgba(0,0,0,.5);
  --scrim: rgba(10,11,14,.5);
}

/* ---------- LIGHT — warm beige reading theme, low glare ---------- */
[data-theme="light"] {
  --bg: #e8e0d0;
  --surface: #f6f1e6;
  --surface-2: #efe7d6;
  --surface-3: #e6dcc8;
  --surface-hover: #f0e9db;
  --raised: #fbf7ee;

  --border: #dccfb6;
  --border-2: #d1c3a6;
  --border-strong: #bfae8c;

  --text: #3a342a;
  --text-2: #6d6452;
  --text-3: #968b76;
  --text-faint: #b4a88e;

  --accent-weak: color-mix(in srgb, var(--accent) 14%, transparent);
  --accent-line: color-mix(in srgb, var(--accent) 38%, transparent);
  --accent-text: color-mix(in srgb, var(--accent) 80%, #2a2114);

  --bubble-them: #f4eee2;
  --bubble-us: #eaddc3;
  --bubble-us-border: #d8c8a4;
  --bubble-ai: #efe8d9;

  --shadow-pop: 0 12px 30px -10px rgba(74,60,36,.20), 0 0 0 1px rgba(74,60,36,.07);
  --shadow-drawer: -24px 0 48px -16px rgba(74,60,36,.15);
  --scrim: rgba(60,50,32,.26);
}

/* density (set at html level so .bc-app reads the cascaded vars) */
[data-density="compact"] {
  --row-py: 7px;
  --avatar: 32px;
  --list-gap: 0px;
  --list-w: 330px;
  --rail-w: 220px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--accent-weak); }

/* scrollbars */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--border-strong); background-clip: padding-box; }
*::-webkit-scrollbar-track { background: transparent; }

.mono { font-family: var(--font-mono); font-feature-settings: "ss01"; }
.tnum { font-variant-numeric: tabular-nums; }