/* =========================================================
   themes.css — темы оформления
   Подключается ПОСЛЕ main.css и chat.css.

   Работает ТОЛЬКО когда на <body> есть класс theme-XXX.
   Если класса нет — работает исходная тема из main.css.
   ========================================================= */

/* ---------- БАЗА (используется всеми темами) ---------- */
body[class*="theme-"] {
    --th-1: #00f0ff;
    --th-2: #8a2be2;
    --th-3: #ff007f;
    --th-green: #00ff88;
    --th-text: #e8ecf5;
    --th-text-muted: #8892b0;
    --th-border: rgba(0, 240, 255, 0.15);
    --th-border-hot: rgba(0, 240, 255, 0.4);
    --th-bubble-in: rgba(30, 42, 74, 0.75);
    --th-bubble-in-text: #e8ecf5;
    --th-bubble-out: linear-gradient(135deg, #8a2be2, #ff007f);
    --th-bubble-out-text: #ffffff;
    --th-header-bg: rgba(13, 11, 26, 0.85);
    --th-composer-bg: rgba(13, 11, 26, 0.85);
    --th-input-bg: rgba(0,0,0,0.25);
    --th-radius: 12px;
    --th-clip: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
    --th-shadow-in: 0 0 18px rgba(0, 240, 255, 0.08);
    --th-shadow-out: 0 0 22px rgba(255, 0, 127, 0.3);
    --th-shadow-send: 0 0 22px rgba(255, 0, 127, 0.5);
    --th-shadow-avatar: 0 0 12px rgba(0, 240, 255, 0.3);
}body.theme-lavender {
    --th-1: #8b5cf6; --th-2: #7c3aed; --th-3: #c4b5fd;
    --th-green: #10b981;
    --th-text: #2d2444; --th-text-muted: #8078a0;
    --th-border: rgba(139, 92, 246, 0.18); --th-border-hot: rgba(139, 92, 246, 0.5);
    --th-bubble-in: #ffffff; --th-bubble-in-text: #2d2444;
    --th-bubble-out: #B39DFA; --th-bubble-out-text: #2D2444;
    --th-header-bg: rgba(248, 245, 255, 0.95);
    --th-composer-bg: rgba(248, 245, 255, 0.95);
    --th-input-bg: #ffffff;
    --th-clip: none; --th-radius: 24px;
    --th-shadow-in: 0 2px 10px rgba(139, 92, 246, 0.08);
    --th-shadow-out: 0 4px 16px rgba(139, 92, 246, 0.3);
    --th-shadow-send: 0 4px 16px rgba(139, 92, 246, 0.4);
    --th-shadow-avatar: 0 2px 10px rgba(139, 92, 246, 0.25);
}body.theme-lavender,
body.theme-lavender .wa-bg-chat {
    background:
        radial-gradient(circle at 20% 15%, rgba(196, 181, 253, 0.35), transparent 50%),
        radial-gradient(circle at 85% 85%, rgba(139, 92, 246, 0.15), transparent 50%),
        linear-gradient(135deg, #f8f5ff, #ede6fa, #ddd0f3);
    background-attachment: fixed;
    color: var(--th-text);
}body.theme-sky {
    --th-1: #0284c7; --th-2: #0369a1; --th-3: #38bdf8;
    --th-green: #10b981;
    --th-text: #0c2a3d; --th-text-muted: #6b8ba0;
    --th-border: rgba(2, 132, 199, 0.18); --th-border-hot: rgba(2, 132, 199, 0.5);
    --th-bubble-in: #ffffff; --th-bubble-in-text: #0c2a3d;
    --th-bubble-out: linear-gradient(135deg, #38bdf8, #0284c7); --th-bubble-out-text: #fff;
    --th-header-bg: rgba(240, 249, 255, 0.95);
    --th-composer-bg: rgba(240, 249, 255, 0.95);
    --th-input-bg: #ffffff;
    --th-clip: none; --th-radius: 20px;
    --th-shadow-in: 0 2px 10px rgba(2, 132, 199, 0.08);
    --th-shadow-out: 0 4px 16px rgba(2, 132, 199, 0.3);
    --th-shadow-send: 0 4px 16px rgba(2, 132, 199, 0.4);
    --th-shadow-avatar: 0 2px 10px rgba(2, 132, 199, 0.25);
}body.theme-sky,
body.theme-sky .wa-bg-chat {
    background:
        radial-gradient(circle at 20% 15%, rgba(56, 189, 248, 0.3), transparent 50%),
        radial-gradient(circle at 85% 85%, rgba(2, 132, 199, 0.12), transparent 50%),
        linear-gradient(135deg, #f0f9ff, #e0f2fe, #bae6fd);
    background-attachment: fixed;
    color: var(--th-text);
}body.theme-sakura {
    --th-1: #ec4899; --th-2: #db2777; --th-3: #f9a8d4;
    --th-green: #10b981;
    --th-text: #4a1f33; --th-text-muted: #a07085;
    --th-border: rgba(236, 72, 153, 0.18); --th-border-hot: rgba(236, 72, 153, 0.5);
    --th-bubble-in: #ffffff; --th-bubble-in-text: #4a1f33;
    --th-bubble-out: linear-gradient(135deg, #f9a8d4, #ec4899); --th-bubble-out-text: #fff;
    --th-header-bg: rgba(255, 245, 247, 0.95);
    --th-composer-bg: rgba(255, 245, 247, 0.95);
    --th-input-bg: #ffffff;
    --th-clip: none; --th-radius: 24px;
    --th-shadow-in: 0 2px 10px rgba(236, 72, 153, 0.08);
    --th-shadow-out: 0 4px 16px rgba(236, 72, 153, 0.3);
    --th-shadow-send: 0 4px 16px rgba(236, 72, 153, 0.4);
    --th-shadow-avatar: 0 2px 10px rgba(236, 72, 153, 0.25);
}body.theme-sakura,
body.theme-sakura .wa-bg-chat {
    background:
        radial-gradient(circle at 20% 20%, rgba(249, 168, 212, 0.4), transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(236, 72, 153, 0.15), transparent 50%),
        linear-gradient(135deg, #fff5f7, #ffe4ea, #ffc9d4);
    background-attachment: fixed;
    color: var(--th-text);
}/* =========================================================
   РИСОВАННЫЕ (7 тем)
   ========================================================= */

/* --- 12. SUNNY MEADOW (по умолчанию) --- */
body.theme-meadow {
    --th-1: #E85A2A;
    --th-2: #F2B705;
    --th-3: #7BB661;
    --th-green: #4CAF50;
    --th-text: #3B2F1E;
    --th-text-muted: #7A6A55;
    --th-border: #3B2F1E;
    --th-bubble-in: #FFF9E8;
    --th-bubble-in-text: #3B2F1E;
    --th-bubble-out: #FFD44D;
    --th-bubble-out-text: #3B2F1E;
    --th-header-bg: #FFF9E8;
    --th-composer-bg: #FFF9E8;
    --th-input-bg: #FFFFFF;
    --th-clip: none; --th-radius: 22px;
    --th-shadow-in:  0 4px 0 #3B2F1E, 0 8px 14px rgba(59,47,30,0.15);
    --th-shadow-out: 0 4px 0 #3B2F1E, 0 8px 14px rgba(232,90,42,0.25);
    --th-shadow-send: 0 4px 0 #3B2F1E;
    --th-shadow-avatar: 0 3px 0 #3B2F1E;
}body.theme-meadow,
body.theme-meadow .wa-bg-chat {
    background:
        radial-gradient(circle at 88% 8%, #FFF1A8 0 48px, #FFD44D 48px 62px, transparent 64px),
        radial-gradient(circle at 18% 14%, rgba(255,255,255,0.95) 0 32px, transparent 34px),
        radial-gradient(circle at 24% 16%, rgba(255,255,255,0.95) 0 44px, transparent 46px),
        radial-gradient(circle at 30% 13%, rgba(255,255,255,0.95) 0 36px, transparent 38px),
        radial-gradient(circle at 72% 38%, rgba(255,255,255,0.9) 0 40px, transparent 42px),
        radial-gradient(circle at 78% 40%, rgba(255,255,255,0.9) 0 52px, transparent 54px),
        radial-gradient(circle at 84% 37%, rgba(255,255,255,0.9) 0 44px, transparent 46px),
        linear-gradient(180deg, #9BD9F5 0%, #C9ECF9 45%, #E8F6D8 70%, #A8D96B 88%, #7BB661 100%);
    background-attachment: fixed;
    color: var(--th-text);
}/* --- 14. DESERT ADVENTURE --- */
body.theme-desert {
    --th-1: #C4622B;
    --th-2: #F4A340;
    --th-3: #8B9A5B;
    --th-green: #7B9E5A;
    --th-text: #4A2E15;
    --th-text-muted: #8B6A48;
    --th-border: #4A2E15;
    --th-bubble-in: #FFF3DC;
    --th-bubble-in-text: #4A2E15;
    --th-bubble-out: #F4A340;
    --th-bubble-out-text: #4A2E15;
    --th-header-bg: #FFF3DC;
    --th-composer-bg: #FFF3DC;
    --th-input-bg: #FFFFFF;
    --th-clip: none; --th-radius: 22px;
    --th-shadow-in:  0 4px 0 #4A2E15, 0 8px 14px rgba(74,46,21,0.2);
    --th-shadow-out: 0 4px 0 #4A2E15, 0 8px 14px rgba(196,98,43,0.3);
    --th-shadow-send: 0 4px 0 #4A2E15;
    --th-shadow-avatar: 0 3px 0 #4A2E15;
}body.theme-desert,
body.theme-desert .wa-bg-chat {
    background:
        radial-gradient(circle at 50% 68%, #FFE0A8 0 60px, #F4A340 60px 82px, rgba(244,163,64,0.4) 82px 110px, transparent 112px),
        radial-gradient(ellipse 100px 14px at 20% 22%, rgba(255,200,140,0.6), transparent),
        radial-gradient(ellipse 130px 18px at 75% 30%, rgba(255,180,110,0.5), transparent),
        radial-gradient(ellipse 80px 12px at 45% 38%, rgba(255,210,150,0.5), transparent),
        radial-gradient(ellipse 8px 40px at 12% 90%, #5C7A3C, transparent),
        radial-gradient(ellipse 10px 55px at 90% 88%, #5C7A3C, transparent),
        linear-gradient(180deg, #F9D9B0 0%, #F4A340 45%, #E8853B 60%, #D9A570 75%, #C49060 88%, #A87548 100%);
    background-attachment: fixed;
    color: var(--th-text);
}/* --- 15. FROSTY PEAKS --- */
body.theme-frosty {
    --th-1: #5BA8D8;
    --th-2: #A8D8F0;
    --th-3: #C9E8FF;
    --th-green: #7BCFB1;
    --th-text: #1A3050;
    --th-text-muted: #6A88A8;
    --th-border: #1A3050;
    --th-bubble-in: #F5FBFF;
    --th-bubble-in-text: #1A3050;
    --th-bubble-out: #A8D8F0;
    --th-bubble-out-text: #1A3050;
    --th-header-bg: #F5FBFF;
    --th-composer-bg: #F5FBFF;
    --th-input-bg: #FFFFFF;
    --th-clip: none; --th-radius: 22px;
    --th-shadow-in:  0 4px 0 #1A3050, 0 8px 14px rgba(26,48,80,0.15);
    --th-shadow-out: 0 4px 0 #1A3050, 0 8px 14px rgba(91,168,216,0.3);
    --th-shadow-send: 0 4px 0 #1A3050;
    --th-shadow-avatar: 0 3px 0 #1A3050;
}body.theme-frosty,
body.theme-frosty .wa-bg-chat {
    background:
        radial-gradient(circle at 15% 20%, #fff 0 2px, transparent 3px),
        radial-gradient(circle at 35% 12%, #fff 0 2px, transparent 3px),
        radial-gradient(circle at 55% 25%, #fff 0 2px, transparent 3px),
        radial-gradient(circle at 75% 15%, #fff 0 2px, transparent 3px),
        radial-gradient(circle at 88% 35%, #fff 0 2px, transparent 3px),
        radial-gradient(circle at 25% 45%, #fff 0 2px, transparent 3px),
        radial-gradient(circle at 65% 50%, #fff 0 2px, transparent 3px),
        radial-gradient(circle at 45% 70%, #fff 0 2px, transparent 3px),
        radial-gradient(circle at 82% 72%, #fff 0 2px, transparent 3px),
        radial-gradient(ellipse 180px 60px at 30% 20%, rgba(123,207,177,0.35), transparent),
        radial-gradient(ellipse 200px 70px at 70% 25%, rgba(168,216,240,0.4), transparent),
        linear-gradient(180deg, #6BB5DE 0%, #8FC9E8 40%, #B8DCF0 65%, #E0F0FA 85%, #FFFFFF 100%);
    background-attachment: fixed;
    color: var(--th-text);
}

/* =========================================================
   ПРИМЕНЕНИЕ ТЕМЫ К ЭЛЕМЕНТАМ
   ========================================================= */

body[class*="theme-"] .wa-header {
    background: var(--th-header-bg) !important;
    border-bottom: 1px solid var(--th-border);
    color: var(--th-text);
    box-shadow: none;
}
body[class*="theme-"] .wa-header h1,
body[class*="theme-"] .wa-header .header-title {
    color: var(--th-text);
    background: none;
    -webkit-text-fill-color: initial;
    text-shadow: none;
}
body[class*="theme-"] .wa-header .icon-btn { color: var(--th-1); text-shadow: none; }
body[class*="theme-"] .wa-header .header-sub { color: var(--th-text-muted); }
body[class*="theme-"] .wa-header .header-sub.online {
    color: var(--th-green);
    text-shadow: none;
    font-weight: 700;
}

body[class*="theme-"] .composer {
    background: var(--th-composer-bg) !important;
    border-top: 1px solid var(--th-border);
}
body[class*="theme-"] .composer-input-wrap {
    background: var(--th-input-bg);
    border: 1px solid var(--th-border);
}
body[class*="theme-"] .composer textarea { color: var(--th-text); }
body[class*="theme-"] .composer textarea::placeholder { color: var(--th-text-muted); }
body[class*="theme-"] .composer-btn { color: var(--th-1); text-shadow: none; }
body[class*="theme-"] .composer-btn.send {
    background: var(--th-bubble-out);
    color: var(--th-bubble-out-text);
    box-shadow: var(--th-shadow-send);
    text-shadow: none;
}

body[class*="theme-"] .bubble {
    clip-path: var(--th-clip);
    border-radius: var(--th-radius);
}
body[class*="theme-"] .bubble.out {
    background: var(--th-bubble-out);
    color: var(--th-bubble-out-text);
    box-shadow: var(--th-shadow-out);
}
body[class*="theme-"] .bubble.in {
    background: var(--th-bubble-in);
    color: var(--th-bubble-in-text);
    border: 1px solid var(--th-border);
    box-shadow: var(--th-shadow-in);
}
body[class*="theme-"] .msg-meta { color: var(--th-text-muted); opacity: 0.85; }
body[class*="theme-"] .bubble.out .msg-meta {
    color: var(--th-bubble-out-text);
    opacity: 0.75;
}
body[class*="theme-"] .ticks.read { color: var(--th-1); }

body[class*="theme-"] { color: var(--th-text); }

body[class*="theme-"] .wa-panel {
    background: var(--th-input-bg);
    border: 1px solid var(--th-border);
}
body[class*="theme-"] .wa-panel h2 { color: var(--th-1); text-shadow: none; }

body[class*="theme-"] .tabs-bar {
    background: var(--th-header-bg);
    border-bottom: 1px solid var(--th-border);
}
body[class*="theme-"] .tab-btn { color: var(--th-text-muted); }
body[class*="theme-"] .tab-btn.active {
    color: var(--th-1);
    border-bottom-color: var(--th-1);
    text-shadow: none;
}
body[class*="theme-"] .chat-item { border-bottom: 1px solid var(--th-border); }
body[class*="theme-"] .chat-name { color: var(--th-text); }
body[class*="theme-"] .chat-preview,
body[class*="theme-"] .chat-time { color: var(--th-text-muted); }

body[class*="theme-"] .avatar {
    border: 1px solid var(--th-border-hot);
    box-shadow: var(--th-shadow-avatar);
}
body[class*="theme-"] .online-dot { border-color: var(--th-header-bg); }

body[class*="theme-"] button.success,
body[class*="theme-"] .btn-primary {
    background: var(--th-bubble-out);
    color: var(--th-bubble-out-text);
}
body[class*="theme-"] button.gray {
    background: var(--th-input-bg);
    color: var(--th-text-muted);
    border: 1px solid var(--th-border);
}

body[class*="theme-"] input[type="text"],
body[class*="theme-"] input[type="password"],
body[class*="theme-"] input[type="number"],
body[class*="theme-"] select,
body[class*="theme-"] textarea {
    background: var(--th-input-bg);
    color: var(--th-text);
    border-color: var(--th-border);
}
body[class*="theme-"] input::placeholder { color: var(--th-text-muted); }

body[class*="theme-"] .sheet {
    background: var(--th-header-bg);
    border-top: 1px solid var(--th-border-hot);
}
body[class*="theme-"] .sheet-title {
    color: var(--th-1);
    border-bottom-color: var(--th-border);
}
body[class*="theme-"] .sheet-btn {
    background: var(--th-input-bg);
    color: var(--th-text);
}
body[class*="theme-"] .sheet-btn.gray { color: var(--th-text-muted); }/* =========================================================
   ОСОБЕННОСТИ РИСОВАННЫХ ТЕМ (толстая обводка и хвостики)
   ========================================================= */

body.theme-meadow .bubble,
body.theme-desert .bubble,
body.theme-frosty .bubble,
body.theme-cosmos .bubble {
    border-width: 3px;
    border-style: solid;
    padding: 12px 18px;
    font-weight: 500;
}body.theme-meadow .bubble.out,
body.theme-desert .bubble.out,
body.theme-frosty .bubble.out,
body.theme-cosmos .bubble.out {
    border-bottom-right-radius: 6px;
}body.theme-meadow .bubble.in,
body.theme-desert .bubble.in,
body.theme-frosty .bubble.in,
body.theme-cosmos .bubble.in {
    border-bottom-left-radius: 6px;
}/* Хвостики */
body.theme-meadow .bubble.out::after,
body.theme-desert .bubble.out::after,
body.theme-frosty .bubble.out::after,
body.theme-cosmos .bubble.out::after,
body.theme-meadow .bubble.in::after,
body.theme-desert .bubble.in::after,
body.theme-frosty .bubble.in::after,
body.theme-cosmos .bubble.in::after {
    content: '';
    position: absolute;
    bottom: -3px;
    width: 16px;
    height: 16px;
    background: inherit;
    border: 3px solid var(--th-border);
    border-top: none;
}body.theme-meadow .bubble.out::after,
body.theme-desert .bubble.out::after,
body.theme-frosty .bubble.out::after,
body.theme-cosmos .bubble.out::after {
    right: -4px;
    border-left: none;
    border-radius: 0 0 8px 0;
    transform: skewX(-12deg) rotate(4deg);
}body.theme-meadow .bubble.in::after,
body.theme-desert .bubble.in::after,
body.theme-frosty .bubble.in::after,
body.theme-cosmos .bubble.in::after {
    left: -4px;
    border-right: none;
    border-radius: 0 0 0 8px;
    transform: skewX(12deg) rotate(-4deg);
}/* Выпуклые кнопки в шапке для рисованных тем */
body.theme-meadow .wa-header .icon-btn,
body.theme-desert .wa-header .icon-btn,
body.theme-frosty .wa-header .icon-btn {
    border: 2px solid var(--th-border);
    background: var(--th-input-bg);
    width: 38px; height: 38px;
    box-shadow: 0 3px 0 var(--th-border);
}body.theme-meadow .wa-header .icon-btn:hover,
body.theme-desert .wa-header .icon-btn:hover,
body.theme-frosty .wa-header .icon-btn:hover {
    background: var(--th-3);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 0 var(--th-border);
}body.theme-meadow .wa-header .icon-btn:active,
body.theme-desert .wa-header .icon-btn:active,
body.theme-frosty .wa-header .icon-btn:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 var(--th-border);
}

/* =========================================================
   АВАТАРКИ-ЗАГЛУШКИ (круглые кружки с буквой)
   Перекраска под активную тему.
   Покрывает: список чатов, контакты, группы, участников,
   профиль, шапку, поиск, приглашения.
   ========================================================= */

/* Основной случай — .avatar.placeholder (с буквой внутри) */
body[class*="theme-"] .avatar.placeholder {
    background: linear-gradient(135deg, var(--th-2, #8a2be2), var(--th-1, #00f0ff)) !important;
    color: #fff !important;
    border: 1px solid var(--th-border, rgba(0,240,255,0.15));
    box-shadow: var(--th-shadow-avatar, none);
    text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

/* Большие аватарки в профиле */
body[class*="theme-"] .avatar.big.placeholder {
    background: linear-gradient(135deg, var(--th-2, #8a2be2), var(--th-1, #00f0ff)) !important;
    color: #fff !important;
}

/* Маленькие аватарки в шапке */
body[class*="theme-"] .avatar-sm.placeholder {
    background: linear-gradient(135deg, var(--th-2, #8a2be2), var(--th-1, #00f0ff)) !important;
    color: #fff !important;
    border: 1px solid var(--th-border, rgba(0,240,255,0.15));
    box-shadow: var(--th-shadow-avatar, none);
}

/* Аватарки в карточке профиля (модалка) */
body[class*="theme-"] .profile-avatar.placeholder {
    background: linear-gradient(135deg, var(--th-2, #8a2be2), var(--th-1, #00f0ff)) !important;
    color: #fff !important;
}

/* На всякий случай — любой .placeholder внутри тем */
body[class*="theme-"] .placeholder {
    background: linear-gradient(135deg, var(--th-2, #8a2be2), var(--th-1, #00f0ff)) !important;
    color: #fff !important;
}/* =========================================================
   🛰 КОСМОС — тёмная тема,
как в приложении на телефоне
   =========================================================
   ⚠️ Первая по-настоящему тёмная тема. Цвета взяты из
   `ThemePalette.Cosmos`,
чтобы вид совпадал с телефоном:

     свои пузыри   #3C4C96
     чужие пузыри  #242C52
     текст в них   #EDF1FF
     шапка         #111831,
текст #E6ECFF
     обводка       #8FA3E0

   Надпись «СССР» идёт **по дуге шара**: в SVG это `textPath`,
поэтому буквы изогнуты,
а не лежат ровной строкой.
   ========================================================= */

body.theme-cosmos {
    --th-1: #7C5CFF;
    --th-2: #FFC857;
    --th-3: #4FD1C5;
    --th-green: #4FD1C5;
    --th-text: #E6ECFF;
    --th-text-muted: #9AA6C8;
    --th-border: #8FA3E0;
    --th-border-hot: #B9C6F2;
    --th-bubble-in: #242C52;
    --th-bubble-in-text: #EDF1FF;
    --th-bubble-out: #3C4C96;
    --th-bubble-out-text: #EDF1FF;
    --th-header-bg: #111831;
    --th-composer-bg: #111831;
    --th-input-bg: #1B2244;
    --th-clip: none; --th-radius: 22px;
    --th-shadow-in:  0 4px 0 #05070F, 0 8px 14px rgba(0, 0, 0, 0.45);
    --th-shadow-out: 0 4px 0 #05070F, 0 8px 16px rgba(124, 92, 255, 0.35);
    --th-shadow-send: 0 4px 0 #05070F;
    --th-shadow-avatar: 0 3px 0 #05070F;
}body.theme-cosmos,
body.theme-cosmos .wa-bg-chat {
    background:
        /* Спутник с надписью «СССР» */
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'><g stroke='%23BFC8E8' stroke-width='2'><line x1='80' y1='80' x2='28' y2='112'/><line x1='80' y1='80' x2='18' y2='95'/><line x1='80' y1='80' x2='25' y2='70'/><line x1='80' y1='80' x2='45' y2='48'/></g><g fill='%23FFC857'><circle cx='28' cy='112' r='4'/><circle cx='18' cy='95' r='4'/><circle cx='25' cy='70' r='4'/><circle cx='45' cy='48' r='4'/></g><circle cx='92' cy='80' r='34' fill='%2393A0C8'/><circle cx='83' cy='71' r='17' fill='%23E9EFFF'/><path id='ussrArc' d='M 70 84 A 24 24 0 0 1 114 84' fill='none'/><text font-family='sans-serif' font-size='15' font-weight='bold' fill='%23E23A3A'><textPath href='%23ussrArc' startOffset='50%' text-anchor='middle'>СССР</textPath></text></svg>") no-repeat 78% 14% / 118px 118px,
        /* Планета внизу слева: светлый шар и тёмная «ночь» поверх */
        radial-gradient(circle at 14% 96%, #4FD1C5 0 30%, rgba(79, 209, 197, 0.18) 31% 34%, transparent 35%),
        radial-gradient(circle at 20% 91%, #04060E 0 27%, transparent 28%),
        /* Звёзды */
        radial-gradient(circle at 7% 12%, #fff 0 1px, transparent 2px),
        radial-gradient(circle at 15% 33%, #fff 0 1px, transparent 2px),
        radial-gradient(circle at 22% 8%, #fff 0 2px, transparent 3px),
        radial-gradient(circle at 29% 51%, #fff 0 1px, transparent 2px),
        radial-gradient(circle at 36% 19%, #fff 0 1px, transparent 2px),
        radial-gradient(circle at 44% 40%, #fff 0 1px, transparent 2px),
        radial-gradient(circle at 51% 11%, #fff 0 1px, transparent 2px),
        radial-gradient(circle at 58% 28%, #fff 0 2px, transparent 3px),
        radial-gradient(circle at 64% 47%, #fff 0 1px, transparent 2px),
        radial-gradient(circle at 71% 9%, #fff 0 1px, transparent 2px),
        radial-gradient(circle at 78% 36%, #fff 0 1px, transparent 2px),
        radial-gradient(circle at 85% 21%, #fff 0 2px, transparent 3px),
        radial-gradient(circle at 92% 44%, #fff 0 1px, transparent 2px),
        radial-gradient(circle at 96% 13%, #fff 0 1px, transparent 2px),
        radial-gradient(circle at 11% 62%, #fff 0 1px, transparent 2px),
        radial-gradient(circle at 26% 71%, #fff 0 1px, transparent 2px),
        radial-gradient(circle at 39% 65%, #fff 0 2px, transparent 3px),
        radial-gradient(circle at 53% 74%, #fff 0 1px, transparent 2px),
        radial-gradient(circle at 68% 68%, #fff 0 1px, transparent 2px),
        radial-gradient(circle at 83% 61%, #fff 0 1px, transparent 2px),
        radial-gradient(circle at 94% 73%, #fff 0 2px, transparent 3px),
        radial-gradient(circle at 18% 85%, #fff 0 1px, transparent 2px),
        radial-gradient(circle at 33% 91%, #fff 0 1px, transparent 2px),
        radial-gradient(circle at 48% 83%, #fff 0 1px, transparent 2px),
        radial-gradient(circle at 62% 95%, #fff 0 1px, transparent 2px),
        radial-gradient(circle at 76% 88%, #fff 0 1px, transparent 2px),
        radial-gradient(circle at 88% 93%, #fff 0 1px, transparent 2px),
        radial-gradient(circle at 5% 46%, #fff 0 1px, transparent 2px),
        radial-gradient(circle at 42% 25%, #fff 0 1px, transparent 2px),
        radial-gradient(circle at 57% 59%, #fff 0 1px, transparent 2px),
        /* Небо и туманность */
        linear-gradient(180deg, #04060E 0%, #0A1130 45%, #182252 70%, #2A2050 88%, #3B2A6B 100%);
    background-attachment: fixed;
    color: var(--th-text);
}/* ---- «Космос»: панели настроек тоже тёмные ----
   ⚠️ Без этого пункты настроек оставались светлыми панелями с **тёмным**
   текстом,
а часть подписей наследовала светлый цвет темы — буквы терялись.
   Владелец: «в настройках буквы пунктов и подпунктов не очень видно».
   Теперь панели тёмные,
а текст светлый — как в остальной теме. */
body.theme-cosmos .wa-panel,
body.theme-cosmos .acc {
    background: #131A33;
    color: #E6ECFF;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}body.theme-cosmos .wa-panel h2,
body.theme-cosmos .acc-title,
body.theme-cosmos .net-check,
body.theme-cosmos .net-radio,
body.theme-cosmos .appearance-row > label,
body.theme-cosmos .swatch-name {
    color: #E6ECFF;
}body.theme-cosmos .priv-label,
body.theme-cosmos .acc-arrow,
body.theme-cosmos .theme-section-title {
    color: #B9C6F2;
}body.theme-cosmos .acc-hint {
    background: #1B2244;
    color: #B9C6F2;
}body.theme-cosmos .acc-head:hover { background: #1B2244; }body.theme-cosmos .acc.open .acc-head { border-bottom-color: #2A3A6B; }body.theme-cosmos .acc-link {
    color: #B9C6F2;
    border-bottom-color: #2A3A6B;
}body.theme-cosmos .net-row input,
body.theme-cosmos .net-select {
    background: #1B2244;
    color: #E6ECFF;
    border-color: #8FA3E0;
}body.theme-cosmos .sheet,
body.theme-cosmos .sheet-cancel {
    background: #131A33;
    color: #E6ECFF;
}body.theme-cosmos .sheet-title,
body.theme-cosmos .sheet-item { color: #E6ECFF; }body.theme-cosmos .sheet-item:hover { background: #1B2244; }body.theme-cosmos .sheet-input {
    background: #1B2244;
    color: #E6ECFF;
    border-color: #8FA3E0;
}/* ---- «Космос»: строки списка чатов тоже тёмные ----
   ⚠️ В `chats.html` у списка жёстко прописан белый фон (`.chat-list`),
и на
   тёмной теме он выглядел светлыми плашками. Точность селектора здесь выше,
поэтому правило побеждает независимо от порядка файлов. */
body.theme-cosmos .chat-list {
    background: #131A33;
}body.theme-cosmos .chat-item {
    border-bottom-color: #2A3A6B;
}body.theme-cosmos .chat-link:hover,
body.theme-cosmos .chat-link:active {
    background: #1B2244;
}body.theme-cosmos .chat-name {
    color: #E6ECFF;
}body.theme-cosmos .chat-time,
body.theme-cosmos .chat-preview {
    color: #B9C6F2;
}body.theme-cosmos .wa-empty,
body.theme-cosmos .wa-empty div {
    color: #E6ECFF;
}body.theme-cosmos .tabs-bar {
    background: #131A33;
    border-bottom-color: #2A3A6B;
}/* =========================================================
   «СВЕТЛАЯ» (original) — светлые пузыри и панель ввода
   =========================================================
   ⚠️ Владелец: «цвет текста чёрный,
значит градиент посветлее — и у
   того,
кто пишет,
и у того,
кому пишут; нижняя плашка тоже чёрная,
сделай светлой,
синеватой,
как шапка».

   ⚠️ Блок стоит в КОНЦЕ файла и перекрывает общие тёмные значения,
которые доставались этой теме из правила `body[class*="theme-"]`.
   ========================================================= */
body.theme-original {
    /* Акцент: иконки, заголовки, галочки */
    --th-1: #2A6E9E;
    --th-2: #3D8FC9;
    --th-3: #4A9EDB;
    --th-green: #1E9E62;

    /* Текст: чёрный, как и был — поэтому пузыри светлые */
    --th-text: #111B21;
    --th-text-muted: #5E7180;
    --th-border: rgba(42, 110, 158, 0.16);
    --th-border-hot: rgba(42, 110, 158, 0.38);

    /* ⚠️ Пузыри: нежный голубой градиент у своих, почти белый у собеседника */
    --th-bubble-out: linear-gradient(135deg, #E6F4FD 0%, #CBE6F7 100%);
    --th-bubble-out-text: #10303F;
    --th-bubble-in: linear-gradient(135deg, #FFFFFF 0%, #F1F8FD 100%);
    --th-bubble-in-text: #111B21;

    /* ⚠️ Шапка и панель ввода — светлые и синеватые */
    --th-header-bg: #E2F0FA;
    --th-composer-bg: #EDF5FC;
    --th-input-bg: #FFFFFF;

    --th-radius: 16px;
    --th-clip: none;

    /* Тени мягкие: тёмные не нужны на светлом */
    --th-shadow-in: 0 1px 3px rgba(16, 48, 63, 0.07);
    --th-shadow-out: 0 1px 3px rgba(42, 110, 158, 0.12);
    --th-shadow-send: 0 2px 8px rgba(42, 110, 158, 0.22);
    --th-shadow-avatar: 0 1px 3px rgba(42, 110, 158, 0.18);
}/* ⚠️ Кнопка отправки на светлой теме: градиент есть,
но текст тёмный читается. */
body.theme-original .composer { box-shadow: 0 -1px 4px rgba(42, 110, 158, 0.06); }body.theme-original .bubble.out,
body.theme-original .bubble.in { border: 1px solid rgba(42, 110, 158, 0.10); }/* =========================================================
   «СВЕТЛАЯ» — прямые правила (поверх переменных)
   =========================================================
   ⚠️ Владелец: «ничего не изменилось». Переменных оказалось мало: часть
   правил перекрывала их. Здесь задаём цвета **напрямую** и с `!important`,
чтобы результат не зависел от порядка селекторов.
   ========================================================= */

/* ⚠️ Панель ввода: светлая,
синеватая — как шапка. */
body.theme-original .composer {
    background: #EDF5FC !important;
    border-top: 1px solid rgba(42, 110, 158, 0.16) !important;
}body.theme-original .composer-input-wrap {
    background: #FFFFFF !important;
    border: 1px solid rgba(42, 110, 158, 0.16) !important;
    box-shadow: 0 1px 3px rgba(16, 48, 63, 0.07) !important;
}body.theme-original .composer textarea,
body.theme-original .composer input {
    color: #111B21 !important;
    background: transparent !important;
}body.theme-original .composer textarea::placeholder { color: #5E7180 !important; }body.theme-original .composer-btn { color: #2A6E9E !important; }body.theme-original .composer-btn.send {
    background: linear-gradient(135deg, #E6F4FD 0%, #CBE6F7 100%) !important;
    color: #10303F !important;
    box-shadow: 0 2px 8px rgba(42, 110, 158, 0.22) !important;
}/* ⚠️ Пузыри: светлый градиент у своих,
белый у собеседника; текст тёмный. */
body.theme-original .bubble.out {
    background: linear-gradient(135deg, #E6F4FD 0%, #CBE6F7 100%) !important;
    color: #10303F !important;
    border: 1px solid rgba(42, 110, 158, 0.10);
}body.theme-original .bubble.in {
    background: linear-gradient(135deg, #FFFFFF 0%, #F1F8FD 100%) !important;
    color: #111B21 !important;
    border: 1px solid rgba(42, 110, 158, 0.10);
}body.theme-original .bubble.out .msg-meta { color: #3B6478 !important; }body.theme-original .msg-meta { color: #5E7180 !important; }/* ⚠️ Шапка — светло-синяя,
иконки и заголовок синие. */
body.theme-original .wa-header {
    background: #E2F0FA !important;
    color: #111B21 !important;
    border-bottom: 1px solid rgba(42, 110, 158, 0.16) !important;
}body.theme-original .wa-header h1,
body.theme-original .wa-header .header-title { color: #11313F !important; }body.theme-original .wa-header .icon-btn { color: #2A6E9E !important; }body.theme-original .wa-header .header-sub { color: #5E7180 !important; }body.theme-original .wa-header .header-sub.online { color: #1E9E62 !important; }/* ⚠️ Фон чата: та же фотография,
но светлее,
чтобы текст читался. */
body.theme-original.wa-bg-chat,
body.theme-original .wa-bg-chat {
    background:
        linear-gradient(rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.72)),
        url("/static/chat-bg.jpg") center / cover no-repeat !important;
    background-attachment: fixed !important;
}/* =========================================================
   «СВЕТЛАЯ»: подписи под значками в шапке — тёмные
   =========================================================
   ⚠️ Владелец: «надписи белым,
на светлой теме не видно».

   ⚠️ В `main.css` подпись задана белой для всех тем — на светлой шапке её
   не прочитать. Здесь перекрываем **только** для этой темы.
   ========================================================= */
body.theme-original .wa-header .icon-btn[data-label]::after {
    color: #1B3A4B;                 /* ⚠️ тёмно-синий, читается на светлом */
    font-weight: 600;
    text-shadow: none;
}body.theme-original .wa-header .icon-btn {
    color: #2A6E9E;                 /* ⚠️ сами значки — синие */
}/* ⚠️ Та же подпись встречается и вне шапки (панели,
листы). */
body.theme-original [data-label]::after { color: #1B3A4B; }/* =========================================================
   СВЕТЛЫЕ ТЕМЫ: подписи под значками — тёмные
   =========================================================
   ⚠️ Владелец: «для этих тем тоже сделай чёрные надписи для значков»
   (Луг,
Пустыня,
Зима,
Лаванда,
Небо,
Сакура,
Светлая).

   ⚠️ У этих тем шапка светлая,
а подпись в `main.css` — белая: не читается.
   ⚠️ Берём цвет текста самой темы (`--th-text`): у Луга коричневый,
у Неба
   синий — так подпись всегда контрастна шапке.
   ========================================================= */
body.theme-original .wa-header .icon-btn[data-label]::after,
body.theme-meadow .wa-header .icon-btn[data-label]::after,
body.theme-desert .wa-header .icon-btn[data-label]::after,
body.theme-frosty .wa-header .icon-btn[data-label]::after,
body.theme-lavender .wa-header .icon-btn[data-label]::after,
body.theme-sky .wa-header .icon-btn[data-label]::after,
body.theme-sakura .wa-header .icon-btn[data-label]::after {
    color: var(--th-text);
    font-weight: 600;
    text-shadow: none;
    /* ⚠️ Владелец: «опустим надписи ниже значков». В main.css стоит -4px;
       здесь +2px — подпись уходит вниз примерно на 6 пикселей и не липнет к значку. */
    margin-top: 2px;
}/* ⚠️ Такие же подписи встречаются вне шапки (панели,
листы). */
body.theme-original [data-label]::after,
body.theme-meadow [data-label]::after,
body.theme-desert [data-label]::after,
body.theme-frosty [data-label]::after,
body.theme-lavender [data-label]::after,
body.theme-sky [data-label]::after,
body.theme-sakura [data-label]::after {
    color: var(--th-text);
    margin-top: 2px;
}


/* =========================================================
   «ЛУГ»: подписи под значками — оранжевые с ореолом
   =========================================================
   ⚠️ Владелец: «там попадает и на белое, и на чёрное — не видно».

   ⚠️ Оранжевый — акцент этой темы. Светлый ореол вокруг букв нужен для
   тёмных участков, насыщенный цвет — для светлых. Так читается везде.
   ========================================================= */
body.theme-meadow .wa-header .icon-btn[data-label]::after {
    color: #E85A2A;
    font-weight: 700;
    text-shadow:
        0 0 2px #FFF9E8,
        0 0 2px #FFF9E8,
        0 1px 1px rgba(255, 249, 232, 0.9),
        0 -1px 1px rgba(255, 249, 232, 0.9);
}

/* ⚠️ Такие же подписи вне шапки — тем же цветом. */
body.theme-meadow [data-label]::after {
    color: #E85A2A;
    font-weight: 700;
    text-shadow: 0 0 2px #FFF9E8, 0 0 2px #FFF9E8;
}