/* Selectable color themes (Settings > تم رنگی). Each theme only defines --theme-primary;
   the darker "edge"/"dark" shades used for the 3D button effect (button-polish.css) and
   depth accents (chat-polish.css) are derived from it with color-mix, so adding a theme is
   a one-line change. html[data-color-theme] is set as early as possible (inline script in
   index.html <head>, before first paint) so the login screen picks it up too, not just the
   chat UI.

   Every derived variable is defined unconditionally on bare :root (not only inside
   html[data-color-theme]) — that inline script sets the attribute wrapped in try/catch, so
   anything throwing before that line (a privacy mode blocking localStorage, etc.) leaves the
   attribute missing entirely. When these lived ONLY under html[data-color-theme], that silently
   left --brand, --brand-dark and everything color-mix'd from them completely undefined — not
   "wrong color", genuinely unset, which turns `background:linear-gradient(var(--theme-primary),
   var(--theme-primary-dark))` invalid and drops back to no background at all (a save button that
   reads as plain white with no way to tell it's a button). :root's unconditional rasan-green
   defaults mean the app never depends on that attribute existing to render correctly; the
   attribute (when present) still overrides --theme-primary per theme exactly as before, and
   every derived variable picks that up automatically since var() resolution follows the cascade
   at the same element, not the declaration site. */
:root{
  /* --org-brand = the organization's color from تنظیمات سازمان ← هویت سازمان (set on <html> by the
     inline head script from a cached copy, then refreshed from /api/v1/org/branding). */
  --theme-primary:var(--org-brand,#168c7e);
  --theme-primary-dark:color-mix(in srgb,var(--theme-primary) 82%,black);
  --theme-primary-edge:color-mix(in srgb,var(--theme-primary) 62%,black);
  /* Feed the app's original brand variables so every existing rule already using
     var(--brand)/var(--brand-dark) (avatars, floating button, dialogs, links...) follows
     the chosen theme automatically, with no per-file changes needed. */
  --brand:var(--theme-primary);
  --brand-dark:var(--theme-primary-dark);
  /* The login screen (auth-purchase-theme.css) has its own separate green brand variables —
     feed those too so "هم در ورودی" (the entry/login screen) follows the chosen theme. */
  --corp-primary:var(--theme-primary);
  --corp-deep:var(--theme-primary-dark);
  --corp-ring:color-mix(in srgb,var(--theme-primary) 22%,transparent);
  /* Chat wallpaper and "my own message" bubble tint, both previously hardcoded (a yellow-green
     wallpaper and a WhatsApp-green bubble in telegram-shell.css) regardless of the chosen theme —
     a subtle theme tint here instead, like Telegram's own accent-tinted own-message bubbles.
     --bubble-mine-custom/--bubble-theirs-custom are set inline on :root only once someone actually
     picks an independent bubble color in تنظیمات ← تم رنگی (theme-ui.js) — var()'s fallback (the
     theme-derived tint / plain white) applies for everyone else, exactly like
     --theme-custom-primary already does for the "رنگ دلخواه" theme swatch. */
  --chat:color-mix(in srgb,var(--theme-primary) 5%,#eef2f4);
  --bubble-mine:var(--bubble-mine-custom,color-mix(in srgb,var(--theme-primary) 16%,#ffffff));
  --bubble-theirs:var(--bubble-theirs-custom,#ffffff);
}
html[data-color-theme="rasan"]{--theme-primary:var(--org-brand,#168c7e)}
html[data-color-theme="telegram"]{--theme-primary:#229ed9}
html[data-color-theme="whatsapp"]{--theme-primary:#25d366}
html[data-color-theme="htm"]{--theme-primary:#8e2436}
html[data-color-theme="custom"]{--theme-primary:var(--theme-custom-primary,var(--org-brand,#168c7e))}

/* Custom chat wallpaper (تنظیمات ← تم رنگی ← پس‌زمینه گفتگو, public/chat-appearance.js) — an
   uploaded photo, fetched with the app's auth token (see authenticated-media.js) and turned into a
   blob: URL, then set here as --chat-wallpaper-image. Needs higher specificity than
   telegram-shell.css's own `main{background-image:...!important}` dot pattern to win regardless
   of load order — both are !important (a tie), so the cascade falls through to specificity next,
   and body.has-custom-wallpaper main outranks a bare `main` selector there. */
body.has-custom-wallpaper main{background-image:var(--chat-wallpaper-image)!important;background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important}