:root,
:host,
.uc-theme-dark {
  color-scheme: dark;

  /* Mobile brand: Colors.ts primaryBlue + ChatsScreen/chrome.ts pill tints.
     Small light-theme text and white-label actions use a deeper blue for contrast. */
  --uc-brand-blue: #5792FF;
  --uc-action-color: #2563EB;
  --uc-action-hover: #1D4ED8;
  --uc-action-pressed: #1E40AF;
  --uc-on-accent: #0A1428;
  --uc-accent-soft: color-mix(in srgb, var(--uc-accent-color) 16%, transparent);
  /* Anchor selected fills to the app ground to retain text contrast on panels. */
  --uc-accent-surface: color-mix(in srgb, var(--uc-accent-color) 16%, var(--uc-primary-bg));
  --uc-accent-border: color-mix(in srgb, var(--uc-accent-color) 50%, transparent);
  --uc-avatar-size-list: 45px;
  --uc-avatar-size-sm: 32px;
  --uc-avatar-radius: 50%;
  --uc-avatar-text: #FFFFFF;
  --uc-avatar-font-family: 'Inter', system-ui, -apple-system, sans-serif;
  --uc-avatar-font-weight: 600;
  --uc-avatar-font-size: 16px;
  --uc-avatar-number-font-size: 13px;
  --uc-avatar-bg: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);

  --uc-accent-color: var(--uc-brand-blue);
  --uc-ap-bg: #111115;
  --uc-primary-bg: #111115;
  --uc-secondary-bg: #1C1C21;
  --uc-secondary-bg-light: #1D2D49;
  --uc-text-color-grey: #B6B6B6;
  --uc-text-color-secondery: var(--uc-accent-color);

  --uc-secondary-border-color: #2B3F5C;

  /* Text Colors */
  --uc-primary-text-color: #908F9D;
  --uc-secondary-text-color: #908F9D;
  --uc-white-text-color: #E8E6F0;
  --uc-hover-text-color: #E8E6F0;
  --uc-list-text-color: #908F9D;

  /* colors */
  --uc-primary-color: #908F9D;
  --uc-secondery-color: #908F9D;

  /* Border */
  --uc-primary-border-color: var(--uc-accent-color);
  --uc-primary-border-color-dimmed: var(--uc-accent-border);
  --uc-border-bubble: #A2A2A2;
  --uc-main-border-color: #121212;
  --uc-hover-bg: #1D2D49;
  --uc-icon : var(--uc-accent-color);
  --uc-icon-border : var(--uc-accent-color);
  --uc-icon-white: #ebeef2;
  --uc-chat-bg: #111115;
  --uc-chat-bubble-bg: rgba(255, 255, 255, 0.07);
  --uc-chat-bubble-own-bg: #5792FF1F;
  --uc-chat-bubble-own-text: #EBEEF2;
  --uc-chat-bubble-own-border: #5792FF40;
  --uc-sms-bubble-bg: #ffffff;
  --uc-sms-bubble-color: #000000;
  --uc-chat-divider-color: rgba(255, 255, 255, 0.08);
  --uc-chat-input-bg: #1C1C21;
  --uc-chat-input-border: #263750;
  --uc-chat-input-placeholder: rgba(255, 255, 255, 0.6);
  --uc-chat-bubble-other-bg: #1C1C21;
  --uc-chat-bubble-other-border: #33415530;
  --uc-chat-bubble-other-text: #ebeef2;

  /* Action Colours  */
  --uc-success-bg: #219653;
  --uc-danger-bg: #ff0000;
  --uc-notification-color: #f83e47;

  --uc-highlight-bg: #1D2D49;

  /* Settings dialog */
  --uc-dialog-bg: #0B1020;
  --uc-settings-row-bg: var(--uc-action-color);
  --uc-settings-row-text: #FFFFFF;
  --uc-toggle-off-bg: #121212;

  /* Login page */
  --uc-toggle-bg: #1D1D1D;
  --uc-tab-bg: #111115;
  --uc-type-tab-active-bg: var(--uc-action-color);

  /* Common colors */
  --uc-solid-bg: #0A0A0A;

  /* Active call panel — neon greens for dark bg */
  --uc-call-green: #39FF3C;
  --uc-call-border: rgba(57, 255, 60, 0.22);
  --uc-call-glow-md: rgba(57, 255, 60, 0.12);
  --uc-call-glow-sm: rgba(57, 255, 60, 0.06);
  --uc-call-glow-inset: rgba(57, 255, 60, 0.1);
  --uc-call-icon-bg: #44DB3F20;
  --uc-call-icon-border: #39FF3C75;
  --uc-call-pulse-start: rgba(57, 255, 60, 0.4);
  --uc-call-pulse-end: rgba(57, 255, 60, 0);

  /* Hold/Paused state */
  --uc-call-hold: #dfc83a;
  --uc-call-hold-bg: #EAFF0020;
  --uc-call-hold-border: #DEED3875;

  /* Call panel text */
  --uc-call-text-primary: #908f9d;
  --uc-call-text-secondary: #908f9d;
  --uc-call-text-inactive: #908f9d;

  /* Presence / BLF panel — bridged to the app's dark theme so the panel's
     surfaces and text match the surrounding chrome. The mockup's structure
     (cards, status gradients, pills) is kept; only the base palette tracks the
     app's --uc-* variables (with literal fallbacks). */
  --blf-surface: var(--uc-secondary-bg, #1c1c21);          /* panel bg — matches side panels */
  --blf-surface-sunken: var(--uc-primary-bg, #111115);     /* search box / sunken inputs — matches app bg */
  --blf-card: color-mix(in srgb, #ffffff 5%, var(--uc-secondary-bg, #1c1c21)); /* elevated card on the panel */
  --blf-line: var(--uc-chat-divider-color, rgba(255, 255, 255, 0.08));
  --blf-line-strong: rgba(255, 255, 255, 0.16);
  --blf-fg: var(--uc-white-text-color, #e8e6f0);           /* primary text (names) */
  --blf-fg-2: var(--uc-primary-text-color, #908f9d);       /* secondary text */
  --blf-fg-3: color-mix(in srgb, var(--uc-primary-text-color, #908f9d) 62%, var(--uc-secondary-bg, #1c1c21)); /* tertiary */
  --blf-muted: var(--uc-hover-bg, rgba(255, 255, 255, 0.05));  /* hover wash — matches app hovers */
  --blf-accent: var(--uc-accent-color);           /* active tab underline / focus / grip */
  --blf-pill-on-bg: var(--uc-accent-surface); /* active filter pill — app's blue accent tint */
  --blf-pill-on-fg: var(--uc-accent-color);
  --blf-online-fg: #34d39e;        /* "N online" badge (semantic green) */
  --blf-online-bg: rgba(52, 211, 158, 0.15);

  /* Settings modal + Quick Settings (Figma "Ui-fix" — Settings/* variables).
     Consumed by uc-app-setting/settings-primitives.styles.ts via --uc-set-*. */
  --uc-set-modal-bg: rgba(28, 28, 33, 0.878);
  --uc-set-modal-border: rgba(255, 255, 255, 0.102);
  --uc-set-scrim: rgba(0, 0, 0, 0.62);
  --uc-set-sidebar-bg: rgba(17, 17, 21, 0.659);
  --uc-set-surface: #1c1c21;
  --uc-set-control-bg: #27272c;
  --uc-set-control-disabled-bg: #27272c;
  --uc-set-nav-selected-bg: rgba(87, 146, 255, 0.161);
  --uc-set-hover-bg: rgba(255, 255, 255, 0.06);
  --uc-set-pressed-bg: rgba(255, 255, 255, 0.1);
  --uc-set-tint: rgba(87, 146, 255, 0.161);
  --uc-set-tint-pressed: rgba(87, 146, 255, 0.24);
  --uc-set-track-off: #3d3d46;
  --uc-set-track: #313139;
  --uc-set-brand: #2f6bf0;
  --uc-set-brand-hover: #2259e1;
  --uc-set-success: #34d39e;
  --uc-set-danger: #f87171;
  --uc-set-preview-bg: #0c0c10;
  --uc-set-overlay-pill: rgba(255, 255, 255, 0.141);
  --uc-set-border-subtle: rgba(255, 255, 255, 0.078);
  --uc-set-border: rgba(255, 255, 255, 0.122);
  --uc-set-border-strong: rgba(255, 255, 255, 0.2);
  --uc-set-border-brand: rgba(87, 146, 255, 0.6);
  --uc-set-border-brand-subtle: rgba(87, 146, 255, 0.4);
  --uc-set-border-brand-glass: rgba(87, 146, 255, 0.451);
  --uc-set-border-focus: #5792ff;
  --uc-set-focus-ring: rgba(87, 146, 255, 0.4);
  --uc-set-text: #f1f5f9;
  --uc-set-text-secondary: #94a3b8;
  --uc-set-text-tertiary: #64748b;
  --uc-set-text-nav: #cbd5e1;
  --uc-set-text-brand: #8ab4ff;
  --uc-set-text-disabled: #475569;
  --uc-set-text-on-brand: #ffffff;
  --uc-set-text-on-dark: rgba(255, 255, 255, 0.922);
  --uc-set-icon: #94a3b8;
  --uc-set-icon-brand: #8ab4ff;
}

/* Stream Chat SDK v2 bubble overrides */
.uc-theme-dark .str-chat,
.uc-theme-dark.str-chat {
  --str-chat__message-bubble-color: var(--uc-primary-text-color);
  --str-chat__message-bubble-background-color: var(--uc-chat-bubble-bg);
  --str-chat__own-message-bubble-color: var(--uc-chat-bubble-own-text);
  --str-chat__message-bubble-border-radius: 14px;
}

/* _utility.css */