/* ==========================================
   СТИЛИ ДИАЛОГОВ — слой поверх цветовых тем
   Используют CSS-переменные темы для контраста
   ========================================== */

/* --- Общие правила для всех стилей --- */
body[class*="chat-style-"] {
    font-family: var(--style-font, inherit);
}

body[class*="chat-style-"] .header,
body[class*="chat-style-"] .controls,
body[class*="chat-style-"] .input-area {
    color: var(--text-main) !important;
}

body[class*="chat-style-"] .contact-name {
    color: var(--text-main) !important;
}

body[class*="chat-style-"] .contact-sub {
    color: var(--text-main) !important;
    opacity: 0.72;
}

body[class*="chat-style-"] .modal {
    color: var(--text-main) !important;
}

body[class*="chat-style-"] input,
body[class*="chat-style-"] textarea,
body[class*="chat-style-"] #content {
    color: var(--text-main) !important;
}

body[class*="chat-style-"] .theme-bubbles .msg.out:not(.msg-sticker) .msg-meta,
body[class*="chat-style-"] .theme-bubbles .msg.in:not(.msg-sticker) .msg-meta,
body[class*="chat-style-"] .theme-bubbles .msg.out:not(.msg-sticker) small,
body[class*="chat-style-"] .theme-bubbles .msg.in:not(.msg-sticker) small {
    color: inherit !important;
    opacity: 0.82 !important;
}

/* ==========================================
   📜 ДРЕВНИЙ СВИТОК
   ========================================== */
body.chat-style-scroll {
    --style-font: 'Caveat', 'Segoe Script', cursive;
}

body.chat-style-scroll #chat {
    background-color: var(--bg-color) !important;
    background-image:
        repeating-linear-gradient(
            to bottom,
            transparent 0,
            transparent 27px,
            rgba(139, 90, 43, 0.12) 27px,
            rgba(139, 90, 43, 0.12) 28px
        ),
        radial-gradient(ellipse at center, transparent 55%, rgba(40, 25, 15, 0.18) 100%) !important;
}

body.chat-style-scroll .header {
    background: linear-gradient(180deg, #8b2500 0%, #a83232 50%, #8b2500 100%) !important;
    color: #f4e4c1 !important;
    border-bottom: 2px solid #5c1a0a !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

body.chat-style-scroll .header * {
    color: #f4e4c1 !important;
}

body.chat-style-scroll .controls,
body.chat-style-scroll .input-area {
    background: linear-gradient(0deg, var(--bg-panel) 0%, var(--bg-color) 65%) !important;
    border-top: 2px solid rgba(139, 90, 43, 0.35) !important;
}

body.chat-style-scroll.theme-bubbles .msg.out:not(.msg-sticker) {
    border-radius: 4px !important;
    box-shadow: 0 1px 3px rgba(26, 18, 11, 0.15) !important;
    font-family: 'Caveat', cursive !important;
    font-size: 1.05em !important;
}

body.chat-style-scroll.theme-bubbles .msg.in:not(.msg-sticker) {
    border-radius: 4px !important;
    box-shadow: 0 1px 3px rgba(26, 18, 11, 0.12) !important;
    font-family: 'Caveat', cursive !important;
    font-size: 1.05em !important;
}

body.chat-style-scroll #contact-list {
    background-image: radial-gradient(ellipse at center, transparent 50%, rgba(40, 25, 15, 0.12) 100%) !important;
}

/* ==========================================
   🚀 КОСМИЧЕСКАЯ СТАНЦИЯ
   ========================================== */
body.chat-style-space {
    --style-font: 'Exo 2', 'Segoe UI', sans-serif;
}

body.chat-style-space #chat {
    background-color: var(--bg-color) !important;
    background-image:
        linear-gradient(rgba(80, 160, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(80, 160, 255, 0.04) 1px, transparent 1px),
        radial-gradient(circle at 30% 20%, rgba(26, 37, 64, 0.9) 0%, transparent 55%) !important;
    background-size: 40px 40px, 40px 40px, 100% 100% !important;
}

body.chat-style-space .header,
body.chat-style-space .controls {
    background: rgba(12, 18, 36, 0.88) !important;
    border-color: rgba(0, 240, 255, 0.22) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 0 12px rgba(0, 240, 255, 0.08);
}

body.chat-style-space .input-area {
    background: var(--bg-color) !important;
    border-top: 1px solid rgba(0, 240, 255, 0.18) !important;
}

body.chat-style-space.theme-bubbles .msg.out:not(.msg-sticker),
body.chat-style-space.theme-bubbles .msg.in:not(.msg-sticker) {
    border: 1px solid rgba(0, 240, 255, 0.2) !important;
    box-shadow: 0 0 8px rgba(0, 240, 255, 0.12) !important;
}

body.chat-style-space .contact-card {
    border: 1px solid rgba(0, 240, 255, 0.1) !important;
}

body.chat-style-space .btn-primary {
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.25) !important;
}

/* ==========================================
   🎨 ГРАФФИТИ
   ========================================== */
body.chat-style-graffiti {
    --style-font: 'Bangers', 'Impact', 'Arial Black', sans-serif;
}

body.chat-style-graffiti #chat {
    background-color: var(--bg-color) !important;
    background-image:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 38px,
            rgba(0, 0, 0, 0.15) 38px,
            rgba(0, 0, 0, 0.15) 40px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 78px,
            rgba(0, 0, 0, 0.08) 78px,
            rgba(0, 0, 0, 0.08) 80px
        ) !important;
}

body.chat-style-graffiti .header {
    background: var(--bg-panel) !important;
    border-bottom: 4px solid var(--primary-color) !important;
}

body.chat-style-graffiti.theme-bubbles .msg.out:not(.msg-sticker) {
    border: 3px solid #111 !important;
    border-radius: 2px !important;
    transform: rotate(-1deg);
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5) !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px;
}

body.chat-style-graffiti.theme-bubbles .msg.in:not(.msg-sticker) {
    border: 3px solid #111 !important;
    border-radius: 2px !important;
    transform: rotate(0.8deg);
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.45) !important;
    font-weight: 700 !important;
}

body.chat-style-graffiti .controls {
    border-top: 3px solid var(--primary-color) !important;
}

/* ==========================================
   🐠 ПОДВОДНЫЙ МИР
   ========================================== */
body.chat-style-underwater {
    --style-font: 'Comfortaa', 'Segoe UI', sans-serif;
}

body.chat-style-underwater #chat {
    background: linear-gradient(to bottom, #001a33 0%, var(--bg-color) 45%, #000510 100%) !important;
}

body.chat-style-underwater .header,
body.chat-style-underwater .controls {
    background: rgba(0, 78, 146, 0.75) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-color: rgba(0, 168, 255, 0.25) !important;
}

body.chat-style-underwater.theme-bubbles .msg.out:not(.msg-sticker),
body.chat-style-underwater.theme-bubbles .msg.in:not(.msg-sticker) {
    border-radius: 18px !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 4px 12px rgba(0, 100, 180, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

body.chat-style-underwater .input-area {
    background: linear-gradient(0deg, rgba(0, 30, 60, 0.9), var(--bg-color)) !important;
}

/* ==========================================
   💻 ХАКЕРСКИЙ ТЕРМИНАЛ
   ========================================== */
body.chat-style-terminal {
    --style-font: 'VT323', 'Share Tech Mono', 'Courier New', monospace;
    font-size: 17px;
}

body.chat-style-terminal #chat {
    background-color: var(--bg-color) !important;
    background-image:
        linear-gradient(rgba(0, 255, 65, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 255, 65, 0.02) 1px, transparent 1px) !important;
    background-size: 100% 4px, 3px 100% !important;
}

body.chat-style-terminal .header,
body.chat-style-terminal .controls,
body.chat-style-terminal .input-area {
    background: #0d1a0d !important;
    border-color: rgba(0, 255, 65, 0.25) !important;
    text-shadow: 0 0 4px rgba(0, 255, 65, 0.35);
}

body.chat-style-terminal.theme-bubbles .msg.out:not(.msg-sticker),
body.chat-style-terminal.theme-bubbles .msg.in:not(.msg-sticker) {
    border: 1px solid rgba(0, 255, 65, 0.35) !important;
    border-radius: 2px !important;
    font-family: inherit !important;
    box-shadow: 0 0 6px rgba(0, 255, 65, 0.15) !important;
}

body.chat-style-terminal .contact-card {
    border: 1px solid rgba(0, 255, 65, 0.12) !important;
}

body.chat-style-terminal input,
body.chat-style-terminal textarea,
body.chat-style-terminal #content {
    font-family: inherit !important;
}

/* ==========================================
   🤠 САЛOON / ДЕРЕВЯННАЯ ДОСКА
   ========================================== */
body.chat-style-saloon {
    --style-font: 'Rye', Georgia, serif;
}

body.chat-style-saloon #chat {
    background-color: var(--bg-color) !important;
    background-image:
        repeating-linear-gradient(90deg, transparent 95%, rgba(0, 0, 0, 0.25) 95%),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.15), transparent) !important;
    background-size: 60px 100%, 100% 100% !important;
}

body.chat-style-saloon .header {
    background: linear-gradient(180deg, #4a2a12, #2b180b) !important;
    color: #f4e4c1 !important;
    border-bottom: 4px solid #1a0a00 !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45);
}

body.chat-style-saloon .header * {
    color: #f4e4c1 !important;
}

body.chat-style-saloon .controls,
body.chat-style-saloon .input-area {
    background: #2b180b !important;
    border-top: 3px solid #1a0a00 !important;
}

body.chat-style-saloon.theme-bubbles .msg.out:not(.msg-sticker),
body.chat-style-saloon.theme-bubbles .msg.in:not(.msg-sticker) {
    border: 2px solid #1a0a00 !important;
    border-radius: 6px !important;
    box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.35) !important;
}

/* ==========================================
   💥 КОМИКС / ПОП-АРТ
   ========================================== */
body.chat-style-comic {
    --style-font: 'Bangers', 'Comic Sans MS', cursive;
}

body.chat-style-comic #chat {
    background-color: var(--bg-color) !important;
    background-image: radial-gradient(circle, rgba(0, 0, 0, 0.08) 1px, transparent 1px) !important;
    background-size: 8px 8px !important;
}

body.chat-style-comic .header {
    background: var(--primary-color) !important;
    border-bottom: 4px solid #111 !important;
}

body.chat-style-comic.theme-bubbles .msg.out:not(.msg-sticker) {
    border: 3px solid #111 !important;
    border-radius: 14px !important;
    box-shadow: 4px 4px 0 #111 !important;
    font-weight: 700 !important;
    font-size: 1.02em !important;
}

body.chat-style-comic.theme-bubbles .msg.in:not(.msg-sticker) {
    border: 3px solid #111 !important;
    border-radius: 14px !important;
    box-shadow: 4px 4px 0 #111 !important;
    font-weight: 700 !important;
}

body.chat-style-comic .controls {
    border-top: 4px solid #111 !important;
}

/* ==========================================
   🗿 КАМЕННЫЕ ПЛИТЫ / РУНЫ
   ========================================== */
body.chat-style-runes {
    --style-font: 'IM Fell English', Georgia, serif;
}

body.chat-style-runes #chat {
    background-color: var(--bg-color) !important;
    background-image:
        radial-gradient(ellipse at 20% 80%, rgba(74, 90, 58, 0.2) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(58, 53, 48, 0.3) 0%, transparent 45%) !important;
}

body.chat-style-runes .header,
body.chat-style-runes .controls {
    background: var(--bg-panel) !important;
    border-color: rgba(200, 184, 168, 0.15) !important;
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.25);
}

body.chat-style-runes.theme-bubbles .msg.out:not(.msg-sticker),
body.chat-style-runes.theme-bubbles .msg.in:not(.msg-sticker) {
    border: 2px solid rgba(200, 184, 168, 0.25) !important;
    border-radius: 6px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 2px 6px rgba(0, 0, 0, 0.3) !important;
}

/* ==========================================
   🌃 КИБЕРПАНК
   ========================================== */
body.chat-style-cyberpunk {
    --style-font: 'Orbitron', 'Segoe UI', sans-serif;
}

body.chat-style-cyberpunk #chat {
    background-color: var(--bg-color) !important;
    background-image:
        linear-gradient(rgba(255, 0, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 255, 255, 0.03) 1px, transparent 1px) !important;
    background-size: 24px 24px !important;
}

body.chat-style-cyberpunk .header,
body.chat-style-cyberpunk .controls {
    background: rgba(26, 16, 37, 0.92) !important;
    border-color: rgba(255, 0, 255, 0.3) !important;
    box-shadow: 0 0 15px rgba(255, 0, 255, 0.12);
}

body.chat-style-cyberpunk.theme-bubbles .msg.out:not(.msg-sticker) {
    border: 1px solid rgba(255, 0, 255, 0.45) !important;
    box-shadow: 0 0 10px rgba(255, 0, 255, 0.2) !important;
}

body.chat-style-cyberpunk.theme-bubbles .msg.in:not(.msg-sticker) {
    border: 1px solid rgba(0, 255, 255, 0.35) !important;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.15) !important;
}

body.chat-style-cyberpunk .btn-primary {
    box-shadow: 0 0 12px rgba(255, 0, 255, 0.3) !important;
}

/* ==========================================
   🌳 БЕРЕСТЯНАЯ ГРАМОТА
   ========================================== */
body.chat-style-birch {
    --style-font: 'Caveat', 'Segoe Script', cursive;
}

body.chat-style-birch #chat {
    background-color: var(--bg-color) !important;
    background-image: repeating-linear-gradient(
        90deg,
        var(--bg-color) 0,
        var(--bg-color) 18px,
        rgba(184, 168, 122, 0.35) 18px,
        rgba(184, 168, 122, 0.35) 20px,
        var(--bg-color) 20px,
        var(--bg-color) 38px
    ) !important;
}

body.chat-style-birch .header {
    background: var(--bg-panel) !important;
    border-bottom: 2px solid rgba(107, 66, 38, 0.35) !important;
}

body.chat-style-birch.theme-bubbles .msg.out:not(.msg-sticker),
body.chat-style-birch.theme-bubbles .msg.in:not(.msg-sticker) {
    border: 1px dashed rgba(58, 42, 26, 0.35) !important;
    border-radius: 4px !important;
    font-family: 'Caveat', cursive !important;
    font-size: 1.08em !important;
}

body.chat-style-birch .controls,
body.chat-style-birch .input-area {
    background: var(--bg-panel) !important;
    border-top: 2px solid rgba(107, 66, 38, 0.25) !important;
}

/* ==========================================
   🧲 МАГНИТЫ НА ХОЛОДИЛЬНИКЕ
   ========================================== */
body.chat-style-fridge {
    --style-font: 'Fredoka', 'Comic Sans MS', sans-serif;
}

body.chat-style-fridge #chat {
    background: linear-gradient(145deg, var(--bg-color) 0%, var(--bg-panel) 100%) !important;
    box-shadow: inset 0 0 40px rgba(255, 255, 255, 0.25);
}

body.chat-style-fridge .header {
    background: linear-gradient(180deg, #dfe6e9, var(--bg-panel)) !important;
    border-bottom: 3px solid #95a5a6 !important;
}

body.chat-style-fridge.theme-bubbles .msg.out:not(.msg-sticker) {
    border-radius: 8px !important;
    border: 3px solid rgba(0, 0, 0, 0.12) !important;
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
    transform: rotate(-1.5deg);
}

body.chat-style-fridge.theme-bubbles .msg.in:not(.msg-sticker) {
    border-radius: 8px !important;
    border: 3px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
    transform: rotate(1.2deg);
}

body.chat-style-fridge .controls {
    border-top: 3px solid #95a5a6 !important;
    background: var(--bg-color) !important;
}

/* ==========================================
   🌲 ДЕРЕВО / ЛЕС — immersive forest chat
   ========================================== */
body.chat-style-tree {
    --style-font: 'Inter', system-ui, sans-serif;
    --forest-text: #e8f0e0;
    --forest-meta: rgba(232, 240, 224, 0.45);
}

body.chat-style-tree #chat {
    position: relative;
    background: linear-gradient(170deg, #0e180c 0%, #0a140a 45%, #061008 100%) !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    overflow-x: hidden;
}

/* SVG деревья и светлячки */
body.chat-style-tree #forest-tree-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: visible;
}

body.chat-style-tree #forest-fireflies {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

body.chat-style-tree .forest-firefly {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(180, 255, 120, 0.95) 0%, rgba(120, 220, 80, 0.4) 50%, transparent 70%);
    box-shadow: 0 0 8px rgba(160, 255, 100, 0.6), 0 0 16px rgba(120, 220, 80, 0.25);
    animation: forestFireflyPulse 3s ease-in-out infinite;
}

@keyframes forestFireflyPulse {
    0%, 100% { opacity: 0.15; transform: scale(0.7); }
    50% { opacity: 0.85; transform: scale(1.15); }
}

body.chat-style-tree .forest-leaf-particle {
    position: absolute;
    pointer-events: none;
    z-index: 1;
    width: 7px;
    height: 7px;
    border-radius: 0 50% 0 50%;
    opacity: 0;
    animation: forestLeafFloat 4s ease-in infinite;
}

@keyframes forestLeafFloat {
    0% { opacity: 0; transform: translateY(0) rotate(0deg); }
    12% { opacity: 0.45; }
    88% { opacity: 0.15; }
    100% { opacity: 0; transform: translateY(-110px) rotate(160deg) translateX(18px); }
}

/* Сообщения «на ветках» */
body.chat-style-tree #chat .msg {
    position: relative;
    z-index: 2;
    margin-bottom: 16px !important;
}

body.chat-style-tree #chat .msg.in:not(.msg-sticker) {
    margin-left: 58px !important;
    margin-right: 8px !important;
}

body.chat-style-tree #chat .msg.out:not(.msg-sticker) {
    margin-right: 58px !important;
    margin-left: 8px !important;
}

body.chat-style-tree .header {
    background: rgba(10, 20, 10, 0.94) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(122, 184, 90, 0.12) !important;
    color: var(--forest-text) !important;
}

body.chat-style-tree .header * {
    color: inherit;
}

body.chat-style-tree .controls,
body.chat-style-tree .input-area {
    background: linear-gradient(0deg, #0a140a 0%, #0a140a 55%, transparent 100%) !important;
    border-color: rgba(122, 184, 90, 0.1) !important;
}

body.chat-style-tree .input-area {
    padding-bottom: max(8px, env(safe-area-inset-bottom, 8px));
}

body.chat-style-tree #content {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(122, 184, 90, 0.15) !important;
    border-radius: 22px !important;
    color: var(--forest-text) !important;
}

body.chat-style-tree #content::placeholder {
    color: var(--forest-meta) !important;
}

body.chat-style-tree .controls > button,
body.chat-style-tree #send-btn {
    background: linear-gradient(135deg, #3a7a2a, #5a9a4a) !important;
    color: #0a140a !important;
    border: none !important;
    box-shadow: 0 2px 10px rgba(80, 160, 50, 0.3) !important;
}

body.chat-style-tree.theme-bubbles .msg.out:not(.msg-sticker) {
    background: rgba(38, 58, 32, 0.92) !important;
    color: var(--forest-text) !important;
    border: 1px solid rgba(122, 184, 90, 0.28) !important;
    border-radius: 16px !important;
    border-bottom-right-radius: 4px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

body.chat-style-tree.theme-bubbles .msg.in:not(.msg-sticker) {
    background: rgba(52, 72, 38, 0.88) !important;
    color: var(--forest-text) !important;
    border: 1px solid rgba(160, 140, 90, 0.15) !important;
    border-radius: 16px !important;
    border-bottom-left-radius: 4px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

body.chat-style-tree.theme-bubbles .msg.out:not(.msg-sticker) .msg-meta,
body.chat-style-tree.theme-bubbles .msg.out:not(.msg-sticker) small,
body.chat-style-tree.theme-bubbles .msg.out:not(.msg-sticker) .msg-ticks,
body.chat-style-tree.theme-bubbles .msg.in:not(.msg-sticker) .msg-meta,
body.chat-style-tree.theme-bubbles .msg.in:not(.msg-sticker) small,
body.chat-style-tree.theme-bubbles .msg.in:not(.msg-sticker) .msg-ticks {
    color: var(--forest-meta) !important;
    opacity: 1 !important;
}

body.chat-style-tree.theme-bubbles .msg.out:not(.msg-sticker) .msg-ticks.read-ticks,
body.chat-style-tree.theme-bubbles .msg.out:not(.msg-sticker) .msg-ticks.visible {
    color: var(--primary-color, #7ab85a) !important;
    opacity: 1 !important;
}

body.chat-style-tree.theme-bubbles .msg.out:not(.msg-sticker) a,
body.chat-style-tree.theme-bubbles .msg.in:not(.msg-sticker) a {
    color: #a8e080 !important;
}

body.chat-style-tree #chat .msg.msg-highlighted {
    outline: 3px solid var(--primary-color, #7ab85a) !important;
    outline-offset: 4px !important;
    box-shadow:
        0 0 0 7px rgba(122, 184, 90, 0.35),
        0 0 36px rgba(122, 184, 90, 0.62) !important;
}
body.chat-style-tree.theme-bubbles #chat .msg.msg-highlighted:not(.msg-sticker) {
    background: rgba(72, 108, 52, 0.96) !important;
    border-color: rgba(168, 224, 128, 0.75) !important;
}

body.chat-style-tree .contact-card {
    background: rgba(26, 36, 24, 0.85) !important;
    border: 1px solid rgba(122, 184, 90, 0.1) !important;
}

body.chat-style-tree #contact-list {
    background: linear-gradient(170deg, #0e180c 0%, #0a140a 100%) !important;
}

body.chat-style-tree .contact-name {
    color: var(--forest-text) !important;
}

body.chat-style-tree .contact-sub {
    color: var(--forest-meta) !important;
    opacity: 1 !important;
}

body.chat-style-tree .header-status,
body.chat-style-tree #typing-indicator {
    color: var(--primary-color, #7ab85a) !important;
}

body.chat-style-tree .modal {
    background: rgba(14, 24, 12, 0.97) !important;
    color: var(--forest-text) !important;
    border: 1px solid rgba(122, 184, 90, 0.15) !important;
}

body.chat-style-tree .modal h3 {
    color: var(--primary-color, #7ab85a) !important;
}

body.chat-style-tree .msg.msg-sticker {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* ==========================================
   ⚔️ ПРОКЛЯТЫЕ РЫЦАРИ (dark fantasy / anime)
   ========================================== */
body.chat-style-cursed-knights {
    --style-font: 'Cinzel', 'Georgia', 'Times New Roman', serif;
}

body.chat-style-cursed-knights #chat {
    background-color: var(--bg-color) !important;
    background-image:
        radial-gradient(ellipse at 50% 0%, rgba(201, 162, 39, 0.12) 0%, transparent 55%),
        radial-gradient(circle at 15% 85%, rgba(120, 20, 60, 0.22) 0%, transparent 45%),
        radial-gradient(circle at 85% 75%, rgba(60, 20, 90, 0.25) 0%, transparent 40%),
        repeating-conic-gradient(from 0deg at 50% 50%, rgba(201, 162, 39, 0.03) 0deg 8deg, transparent 8deg 16deg) !important;
    background-size: 100% 100%, 100% 100%, 100% 100%, 120px 120px !important;
}

body.chat-style-cursed-knights #contact-list {
    background:
        radial-gradient(ellipse at 50% 0%, rgba(201, 162, 39, 0.08) 0%, transparent 50%),
        var(--bg-color) !important;
}

body.chat-style-cursed-knights .header,
body.chat-style-cursed-knights .controls {
    background: rgba(42, 16, 40, 0.94) !important;
    border-color: rgba(201, 162, 39, 0.28) !important;
    box-shadow: inset 0 -1px 0 rgba(201, 162, 39, 0.12), 0 0 18px rgba(90, 20, 50, 0.25);
}

body.chat-style-cursed-knights .input-area {
    background: linear-gradient(0deg, rgba(18, 8, 16, 0.95), var(--bg-color)) !important;
    border-top: 1px solid rgba(201, 162, 39, 0.18) !important;
}

body.chat-style-cursed-knights.theme-bubbles .msg.out:not(.msg-sticker) {
    border: 1px solid rgba(201, 162, 39, 0.45) !important;
    box-shadow: 0 0 12px rgba(201, 162, 39, 0.18), inset 0 1px 0 rgba(255, 235, 190, 0.08) !important;
}

body.chat-style-cursed-knights.theme-bubbles .msg.in:not(.msg-sticker) {
    border: 1px solid rgba(140, 60, 120, 0.4) !important;
    box-shadow: 0 0 10px rgba(100, 30, 80, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

body.chat-style-cursed-knights .btn-primary {
    box-shadow: 0 0 14px rgba(201, 162, 39, 0.28) !important;
}

/* ==========================================
   🪼 ОКЕАНСКАЯ БЕЗДНА
   ========================================== */
body.chat-style-abyss {
    --style-font: 'Inter', 'Segoe UI', sans-serif;
}

body.chat-style-abyss #chat {
    background-color: var(--bg-color) !important;
    background-image:
        radial-gradient(ellipse at 50% -10%, rgba(105, 220, 255, 0.2) 0%, transparent 42%),
        radial-gradient(circle at 20% 78%, rgba(50, 170, 210, 0.14) 0%, transparent 32%),
        radial-gradient(circle at 82% 68%, rgba(110, 70, 190, 0.16) 0%, transparent 36%),
        linear-gradient(180deg, rgba(18, 78, 120, 0.38) 0%, rgba(3, 16, 31, 0.95) 58%, #010710 100%),
        radial-gradient(circle, rgba(130, 240, 255, 0.16) 1px, transparent 2px) !important;
    background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 46px 46px !important;
}

body.chat-style-abyss #contact-list {
    background:
        radial-gradient(ellipse at 50% 0%, rgba(73, 216, 255, 0.13) 0%, transparent 46%),
        linear-gradient(180deg, #061a2e 0%, #020814 100%) !important;
}

body.chat-style-abyss .header,
body.chat-style-abyss .controls {
    background: rgba(8, 36, 58, 0.88) !important;
    border-color: rgba(73, 216, 255, 0.24) !important;
    box-shadow: inset 0 -1px 0 rgba(190, 250, 255, 0.08), 0 0 22px rgba(20, 160, 210, 0.16);
    backdrop-filter: blur(10px) saturate(130%);
    -webkit-backdrop-filter: blur(10px) saturate(130%);
}

body.chat-style-abyss .input-area {
    background: linear-gradient(0deg, rgba(2, 8, 18, 0.96), rgba(8, 36, 58, 0.82)) !important;
    border-top: 1px solid rgba(73, 216, 255, 0.18) !important;
}

body.chat-style-abyss .contact-card {
    border: 1px solid rgba(73, 216, 255, 0.12) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

body.chat-style-abyss.theme-bubbles .msg.out:not(.msg-sticker) {
    background: linear-gradient(145deg, rgba(30, 142, 190, 0.92), rgba(9, 80, 128, 0.94)) !important;
    border: 1px solid rgba(155, 245, 255, 0.34) !important;
    box-shadow: 0 8px 18px rgba(0, 30, 70, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

body.chat-style-abyss.theme-bubbles .msg.in:not(.msg-sticker) {
    background: rgba(4, 24, 42, 0.86) !important;
    border: 1px solid rgba(95, 210, 235, 0.22) !important;
    box-shadow: 0 8px 18px rgba(0, 10, 30, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}

body.chat-style-abyss .btn-primary {
    box-shadow: 0 0 16px rgba(73, 216, 255, 0.32) !important;
}

/* ==========================================
   🕯️ ВЕДЬМИН ЧЕРДАК
   ========================================== */
body.chat-style-witch-attic {
    --style-font: 'Caveat', 'Georgia', 'Times New Roman', serif;
}

body.chat-style-witch-attic #chat {
    background-color: var(--bg-color) !important;
    background-image:
        radial-gradient(circle at 12% 18%, rgba(216, 154, 74, 0.18) 0%, transparent 26%),
        radial-gradient(circle at 88% 14%, rgba(145, 80, 180, 0.16) 0%, transparent 28%),
        linear-gradient(120deg, rgba(216, 154, 74, 0.07) 0 1px, transparent 1px 22px),
        linear-gradient(60deg, rgba(242, 215, 166, 0.035) 0 1px, transparent 1px 26px),
        radial-gradient(circle, rgba(242, 215, 166, 0.13) 1px, transparent 2px),
        linear-gradient(180deg, #24102d 0%, #160d1c 55%, #0d0712 100%) !important;
    background-size: 100% 100%, 100% 100%, 64px 64px, 72px 72px, 38px 38px, 100% 100% !important;
}

body.chat-style-witch-attic #contact-list {
    background:
        radial-gradient(circle at 18% 18%, rgba(216, 154, 74, 0.16) 0%, transparent 30%),
        linear-gradient(180deg, #2b1838 0%, #140b1b 100%) !important;
}

body.chat-style-witch-attic .header,
body.chat-style-witch-attic .controls {
    background: rgba(43, 24, 56, 0.94) !important;
    border-color: rgba(216, 154, 74, 0.26) !important;
    box-shadow: inset 0 -1px 0 rgba(242, 215, 166, 0.08), 0 0 20px rgba(216, 116, 45, 0.12);
}

body.chat-style-witch-attic .input-area {
    background: linear-gradient(0deg, rgba(17, 9, 23, 0.96), rgba(43, 24, 56, 0.88)) !important;
    border-top: 1px solid rgba(216, 154, 74, 0.18) !important;
}

body.chat-style-witch-attic .contact-card {
    border: 1px solid rgba(216, 154, 74, 0.14) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18) !important;
}

body.chat-style-witch-attic.theme-bubbles .msg.out:not(.msg-sticker) {
    background: linear-gradient(145deg, rgba(120, 66, 132, 0.94), rgba(76, 38, 96, 0.96)) !important;
    border: 1px solid rgba(216, 154, 74, 0.36) !important;
    border-radius: 12px 18px 12px 18px !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(242, 215, 166, 0.1) !important;
}

body.chat-style-witch-attic.theme-bubbles .msg.in:not(.msg-sticker) {
    background: rgba(36, 20, 45, 0.9) !important;
    border: 1px solid rgba(242, 215, 166, 0.2) !important;
    border-radius: 18px 12px 18px 12px !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

body.chat-style-witch-attic .btn-primary {
    box-shadow: 0 0 15px rgba(216, 154, 74, 0.28) !important;
}

/* ==========================================
   🪵 БРЕВНА / СРУБ
   ========================================== */
body.chat-style-logs {
    --style-font: 'Inter', system-ui, sans-serif;
    --logs-text: #FBE5CE;
    --logs-meta: rgba(251, 229, 206, 0.55);
}

body.chat-style-logs #chat {
    background-color: #1a0f0a !important;
    background-image: 
        repeating-linear-gradient(90deg, rgba(0,0,0,0.03) 0px, rgba(0,0,0,0.03) 1px, transparent 1px, transparent 15px),
        repeating-linear-gradient(to right, rgba(0,0,0,0.05) 0px, rgba(0,0,0,0.05) 2px, transparent 2px, transparent 30px),
        radial-gradient(ellipse at 50% 50%, rgba(20, 10, 5, 0) 0%, rgba(0, 0, 0, 0.4) 100%),
        linear-gradient(180deg, #1c0f08 0%, #0d0603 100%) !important;
}

body.chat-style-logs #contact-list {
    background-color: #1a0f0a !important;
    background-image: 
        repeating-linear-gradient(90deg, rgba(0,0,0,0.03) 0px, rgba(0,0,0,0.03) 1px, transparent 1px, transparent 15px),
        linear-gradient(180deg, #1c0f08 0%, #0d0603 100%) !important;
}

body.chat-style-logs .header,
body.chat-style-logs .controls {
    background: #1d100a !important;
    border-color: #0a0502 !important;
    box-shadow: inset 0 1px 1px rgba(255, 140, 50, 0.15), inset 0 -1px 2px rgba(0,0,0,0.8), 0 4px 15px rgba(0, 0, 0, 0.8);
}

body.chat-style-logs .header *,
body.chat-style-logs .contact-name {
    color: var(--logs-text) !important;
}

body.chat-style-logs .contact-sub {
    color: var(--logs-meta) !important;
}

body.chat-style-logs .input-area {
    background: #180d07 !important;
    border-top: 1px solid #0a0502 !important;
    box-shadow: inset 0 1px 1px rgba(255, 140, 50, 0.1), 0 -4px 10px rgba(0, 0, 0, 0.5) !important;
}

body.chat-style-logs.theme-bubbles .msg.out:not(.msg-sticker) {
    background: linear-gradient(180deg, #3d1b0c 0%, #260f06 100%) !important;
    color: var(--logs-text) !important;
    border: 1px solid #140803 !important;
    border-top: 1px solid #5e2c14 !important;
    border-left: 1px solid #4a210f !important;
    border-radius: 12px 12px 4px 12px !important;
    box-shadow: inset 0 1px 2px rgba(255, 170, 100, 0.3), inset -1px -1px 3px rgba(0,0,0,0.5), 0 6px 12px rgba(0, 0, 0, 0.4) !important;
    text-shadow: 0 1px 1px rgba(0,0,0,0.5);
}

body.chat-style-logs.theme-bubbles .msg.in:not(.msg-sticker) {
    background: linear-gradient(180deg, #2b170e 0%, #1a0d07 100%) !important;
    color: var(--logs-text) !important;
    border: 1px solid #0f0703 !important;
    border-top: 1px solid #3d2215 !important;
    border-left: 1px solid #331c11 !important;
    border-radius: 12px 12px 12px 4px !important;
    box-shadow: inset 0 1px 2px rgba(255, 170, 100, 0.15), inset -1px -1px 3px rgba(0,0,0,0.6), 0 6px 12px rgba(0, 0, 0, 0.4) !important;
    text-shadow: 0 1px 1px rgba(0,0,0,0.5);
}

body.chat-style-logs.theme-bubbles .msg.out:not(.msg-sticker) .msg-meta,
body.chat-style-logs.theme-bubbles .msg.out:not(.msg-sticker) small,
body.chat-style-logs.theme-bubbles .msg.in:not(.msg-sticker) .msg-meta,
body.chat-style-logs.theme-bubbles .msg.in:not(.msg-sticker) small {
    color: var(--logs-meta) !important;
}

body.chat-style-logs .contact-card {
    background: linear-gradient(180deg, #28150d 0%, #170b06 100%) !important;
    border: 1px solid #0f0703 !important;
    border-top: 1px solid #381e13 !important;
    border-left: 1px solid #30190f !important;
    border-radius: 14px !important;
    box-shadow: inset 0 1px 1px rgba(255, 170, 100, 0.1), inset -1px -1px 2px rgba(0,0,0,0.5), 0 4px 8px rgba(0,0,0,0.4) !important;
    margin-bottom: 8px !important;
}

body.chat-style-logs .controls > button,
body.chat-style-logs #send-btn {
    background: linear-gradient(180deg, #3d1b0c 0%, #260f06 100%) !important;
    border: 1px solid #140803 !important;
    border-top: 1px solid #5e2c14 !important;
    border-radius: 12px !important;
    box-shadow: inset 0 1px 2px rgba(255, 170, 100, 0.3), 0 4px 8px rgba(0, 0, 0, 0.4) !important;
    color: var(--logs-text) !important;
}

body.chat-style-logs #logs-sparks {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

body.chat-style-logs .logs-spark {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #ffcc55;
    box-shadow: 0 0 8px #ff6600, 0 0 14px #ff3300;
    animation: logsSparkFloat 4s ease-in infinite;
    opacity: 0;
}

@keyframes logsSparkFloat {
    0% { opacity: 0; transform: translateY(0) scale(1); }
    20% { opacity: 0.8; }
    80% { opacity: 0.5; }
    100% { opacity: 0; transform: translateY(-120px) scale(0.3); }
}

/* Универсальные GIF/WebP/WebM-пасхалки */
@keyframes chatEasterEggWalk {
    0% {
        transform: translateX(-140%) scale(0.95);
        opacity: 0;
    }
    8% {
        opacity: 1;
    }
    92% {
        opacity: 1;
    }
    100% {
        transform: translateX(calc(100vw + 140%)) scale(0.95);
        opacity: 0;
    }
}

@keyframes chatEasterEggFly {
    0% {
        transform: translate(-30vw, 110vh) rotate(-8deg) scale(0.85);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translate(110vw, -20vh) rotate(12deg) scale(1.05);
        opacity: 0;
    }
}

@keyframes chatEasterEggPeek {
    0%, 100% {
        transform: translateY(120%) scale(0.9);
        opacity: 0;
    }
    12%, 88% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

.chat-easter-egg-overlay {
    position: fixed;
    inset: 0;
    z-index: 10050;
    pointer-events: none;
    overflow: hidden;
}

.chat-easter-egg-media {
    position: absolute;
    display: block;
    max-width: none;
    object-fit: contain;
    user-select: none;
    -webkit-user-select: none;
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.35));
    animation-duration: var(--egg-duration, 7s);
    animation-fill-mode: forwards;
    animation-timing-function: linear;
}

.chat-easter-egg-walk {
    left: 0;
    bottom: max(76px, env(safe-area-inset-bottom));
    width: min(42vw, 220px);
    animation-name: chatEasterEggWalk;
}

.chat-easter-egg-fly {
    left: 0;
    top: 0;
    width: min(36vw, 180px);
    animation-name: chatEasterEggFly;
}

.chat-easter-egg-peek {
    right: max(12px, env(safe-area-inset-right));
    bottom: max(88px, env(safe-area-inset-bottom));
    width: min(34vw, 160px);
    animation-name: chatEasterEggPeek;
    animation-timing-function: ease-in-out;
}