:root {
      --color-bg-chat: #f0f4fb;
      --color-surface-primary: #ffffff;
      --color-surface-soft: #eef2f9;
      --color-text-primary: #0c1a3a;
      --color-text-muted: #9ba8c0;
      --color-border-soft: #e4eaf5;
      --color-accent-primary: #1664c4;
      --color-accent-soft: #dbeafe;
      --bg: #eef3f9;
      --panel: #ffffff;
      --panel-soft: rgba(255, 255, 255, 0.84);
      --panel-border: #d7e1ec;
      --surface-base: #ffffff;
      --surface-elevated: rgba(255, 255, 255, 0.92);
      --surface-glass: rgba(255, 255, 255, 0.78);
      --surface-strong: #f7fbff;
      --line-soft: rgba(215, 225, 236, 0.82);
      --line-strong: rgba(208, 220, 234, 0.96);
      --list-row: rgba(255, 255, 255, 0.96);
      --list-row-hover: rgba(246, 250, 255, 0.98);
      --list-row-active: rgba(233, 242, 255, 0.88);
      --header-glass: rgba(255, 255, 255, 0.72);
      --composer-surface: rgba(255, 255, 255, 0.86);
      --input-bg: rgba(255, 255, 255, 0.95);
      --text: #102033;
      --muted: #6c7a8f;
      --accent: #1f7aec;
      --accent-dark: #1664c4;
      --accent-soft: #e9f2ff;
      --danger-soft: #ffe8e8;
      --danger-text: #b42318;
      --bubble-self: #d9ebff;
      --bubble-other: #ffffff;
      --shadow: 0 18px 40px rgba(17, 34, 68, 0.08);
      --contacts-page-bg: #f0f4fb;
      --contacts-surface: #ffffff;
      --contacts-control-bg: #eef2f9;
      --contacts-text: #0c1a3a;
      --contacts-muted: #9ba8c0;
      --contacts-divider: #eef2f9;
      --contacts-online: #16a34a;
      --tab-active-icon: #ffffff;
      --modal-overlay: rgba(7, 12, 20, 0.12);
      --modal-overlay-dark: rgba(2, 8, 18, 0.34);
      --modal-card-bg: var(--panel);
      --modal-card-border: var(--panel-border);
      --modal-card-shadow: var(--shadow);
      --modal-transition: 0.18s ease;
      --layer-sheet-overlay: rgba(15, 17, 23, 0.28);
      --layer-sheet-bg: var(--color-surface-primary);
      --layer-sheet-handle: #dde4f0;
      --layer-sheet-radius: 24px;
      --layer-sheet-max-width: 520px;
    }

    html.theme-dark {
      --color-bg-chat: #0f1117;
      --color-surface-primary: #181c27;
      --color-surface-soft: #252b3b;
      --color-text-primary: #e8edf8;
      --color-text-muted: #4a5568;
      --color-border-soft: #252b3b;
      --color-accent-primary: #85b7eb;
      --color-accent-soft: #1e3a5f;
      --bg: #0a111a;
      --panel: #121a26;
      --panel-soft: rgba(18, 26, 38, 0.92);
      --panel-border: #263447;
      --surface-base: #101722;
      --surface-elevated: rgba(18, 26, 38, 0.97);
      --surface-glass: rgba(14, 21, 31, 0.82);
      --surface-strong: #172130;
      --line-soft: rgba(56, 71, 94, 0.56);
      --line-strong: rgba(62, 80, 106, 0.84);
      --list-row: rgba(18, 26, 38, 0.98);
      --list-row-hover: rgba(22, 32, 46, 0.98);
      --list-row-active: rgba(28, 40, 58, 0.98);
      --header-glass: rgba(12, 18, 28, 0.88);
      --composer-surface: rgba(14, 21, 31, 0.96);
      --input-bg: rgba(13, 19, 29, 0.98);
      --text: #e6edf7;
      --muted: #93a1b4;
      --accent: #1f7aec;
      --accent-dark: #8ab8f0;
      --accent-soft: rgba(31, 122, 236, 0.18);
      --danger-soft: rgba(180, 35, 24, 0.18);
      --danger-text: #ff9494;
      --bubble-self: linear-gradient(180deg, rgba(22, 69, 120, 0.98) 0%, rgba(18, 56, 97, 0.98) 100%);
      --bubble-other: linear-gradient(180deg, rgba(22, 31, 45, 0.98) 0%, rgba(18, 26, 38, 0.98) 100%);
      --shadow: 0 18px 38px rgba(2, 8, 18, 0.34);
      --contacts-page-bg: #0f1117;
      --contacts-surface: #181c27;
      --contacts-control-bg: #252b3b;
      --contacts-text: #e8edf8;
      --contacts-muted: #4a5568;
      --contacts-divider: #252b3b;
      --contacts-online: #4ade80;
      --tab-active-icon: #0f1117;
      --layer-sheet-overlay: rgba(0, 0, 0, 0.5);
      --layer-sheet-bg: #181c27;
      --layer-sheet-handle: #2e3547;
    }

    :root[data-chat-bubble-theme="ocean"] {
      --bubble-self: linear-gradient(180deg, #d8ecff 0%, #c8e4ff 100%);
      --bubble-other: linear-gradient(180deg, #ffffff 0%, #f5fbff 100%);
    }

    :root[data-chat-bubble-theme="mint"] {
      --bubble-self: linear-gradient(180deg, #d9f6ec 0%, #c9efdf 100%);
      --bubble-other: linear-gradient(180deg, #ffffff 0%, #f4fdf8 100%);
    }

    :root[data-chat-bubble-theme="rose"] {
      --bubble-self: linear-gradient(180deg, #ffe0ea 0%, #ffd4e1 100%);
      --bubble-other: linear-gradient(180deg, #ffffff 0%, #fff6f9 100%);
    }

    :root[data-chat-bubble-theme="sand"] {
      --bubble-self: linear-gradient(180deg, #f9ead8 0%, #f2e0ca 100%);
      --bubble-other: linear-gradient(180deg, #fffdf8 0%, #faf5ec 100%);
    }

    html.theme-dark[data-chat-bubble-theme="ocean"] {
      --bubble-self: linear-gradient(180deg, rgba(18, 82, 138, 0.98) 0%, rgba(14, 63, 112, 0.98) 100%);
      --bubble-other: linear-gradient(180deg, rgba(19, 34, 50, 0.98) 0%, rgba(15, 27, 40, 0.98) 100%);
    }

    html.theme-dark[data-chat-bubble-theme="mint"] {
      --bubble-self: linear-gradient(180deg, rgba(17, 92, 78, 0.98) 0%, rgba(13, 70, 59, 0.98) 100%);
      --bubble-other: linear-gradient(180deg, rgba(18, 33, 30, 0.98) 0%, rgba(15, 27, 24, 0.98) 100%);
    }

    html.theme-dark[data-chat-bubble-theme="rose"] {
      --bubble-self: linear-gradient(180deg, rgba(118, 48, 80, 0.98) 0%, rgba(93, 37, 64, 0.98) 100%);
      --bubble-other: linear-gradient(180deg, rgba(38, 25, 34, 0.98) 0%, rgba(28, 19, 27, 0.98) 100%);
    }

    html.theme-dark[data-chat-bubble-theme="sand"] {
      --bubble-self: linear-gradient(180deg, rgba(110, 84, 46, 0.98) 0%, rgba(86, 64, 34, 0.98) 100%);
      --bubble-other: linear-gradient(180deg, rgba(36, 31, 24, 0.98) 0%, rgba(28, 24, 18, 0.98) 100%);
    }