/* ============================================================ */
/* 🔥 ПЛАМЕННЫЙ FAB — КНОПКА «ПЛЮС»                             */
/* Стилизуем только внешний вид. Позиция — из styles.css.        */
/* ============================================================ */

/* ⭐ ЖЁСТКОЕ ПОЗИЦИОНИРОВАНИЕ (без !important для transform) */
.publish-fab {
    position: fixed !important;
    bottom: 100px !important;
    right: 24px !important;
    left: auto !important;
    top: auto !important;
    width: 76px !important;
    height: 76px !important;
    border-radius: 50% !important;
    z-index: 9999 !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    font-size: 34px !important;

    /* ⭐ Внешний вид */
    background: linear-gradient(135deg, #FFD700 0%, #FF9800 35%, #FF3D00 100%) !important;
    border: 2px solid rgba(255, 220, 120, 0.6) !important;
    color: #FFF !important;

    /* ⭐ Базовое свечение (исходное состояние fireBreath) */
    box-shadow:
        0 0 0 0 rgba(255, 87, 34, 0.55),
        0 8px 28px rgba(255, 87, 34, 0.5),
        0 4px 14px rgba(255, 152, 0, 0.4),
        0 1px 0 rgba(255, 255, 255, 0.5) inset !important;

    /* ⭐ ДЫХАНИЕ + свечение в такт */
    animation: fireBreath 2.6s ease-in-out infinite;

    transition:
        background 0.3s ease,
        box-shadow 0.3s ease,
        width 0.25s ease,
        height 0.25s ease;

    overflow: visible;
}

.publish-fab.visible {
    display: flex !important;
}

/* ⭐ Языки пламени вокруг кнопки — дышат синхронно */
.publish-fab::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 60%,
        rgba(255, 200, 60, 0.55) 0%,
        rgba(255, 100, 0, 0.35) 35%,
        rgba(255, 60, 0, 0) 70%);
    z-index: -1;
    pointer-events: none;
    animation: fireGlowBreath 2.6s ease-in-out infinite;
    filter: blur(6px);
}

/* ⭐ Внутренний блик — искры (независимые) */
.publish-fab::after {
    content: '';
    position: absolute;
    top: 8%;
    left: 14%;
    width: 40%;
    height: 40%;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(255, 255, 255, 0.65) 0%,
        rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
    filter: blur(2px);
    animation: fireSpark 2.4s ease-in-out infinite;
}

/* ⭐ Иконка плюса — белая с тёплым свечением */
.publish-fab i {
    color: #FFFFFF !important;
    text-shadow: 0 0 12px rgba(255, 235, 120, 0.9),
                 0 2px 6px rgba(180, 30, 0, 0.4);
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease;
}

/* ⭐ Hover — усиление огня, дыхание ЗАМИРАЕТ */
.publish-fab:hover {
    background: linear-gradient(135deg, #FFEB3B 0%, #FF6D00 45%, #D50000 100%) !important;
    animation: fireBreathHover 0.6s ease-in-out infinite;
    box-shadow:
        0 0 0 6px rgba(255, 87, 34, 0.18),
        0 0 40px rgba(255, 87, 34, 0.85),
        0 12px 40px rgba(255, 60, 0, 0.55),
        0 1px 0 rgba(255, 255, 255, 0.6) inset !important;
}

.publish-fab:hover::before {
    inset: -16px;
    filter: blur(10px);
    animation-duration: 1.2s;
}

.publish-fab:hover i {
    transform: rotate(90deg);
    color: #FFFDE7 !important;
}

/* ⭐ Нажатие */
.publish-fab:active {
    background: linear-gradient(135deg, #FF3D00 0%, #D50000 100%) !important;
    animation: none;
    box-shadow:
        0 0 0 4px rgba(255, 87, 34, 0.25),
        0 4px 18px rgba(255, 60, 0, 0.7),
        0 1px 0 rgba(255, 255, 255, 0.4) inset !important;
}

/* ═══════════════════════════════════════════════════════════ */
/* 🔥 АНИМАЦИИ                                                 */
/* ═══════════════════════════════════════════════════════════ */

/* ⭐ ДЫХАНИЕ — плавное увеличение/уменьшение */
@keyframes fireBreath {
    0%, 100% {
        transform: scale(1);
        box-shadow:
            0 0 0 0 rgba(255, 87, 34, 0.55),
            0 8px 28px rgba(255, 87, 34, 0.5),
            0 4px 14px rgba(255, 152, 0, 0.4),
            0 1px 0 rgba(255, 255, 255, 0.5) inset;
    }
    50% {
        transform: scale(1.08);
        box-shadow:
            0 0 0 14px rgba(255, 87, 34, 0),
            0 14px 40px rgba(255, 87, 34, 0.75),
            0 8px 26px rgba(255, 152, 0, 0.65),
            0 1px 0 rgba(255, 255, 255, 0.65) inset;
    }
}

/* ⭐ Дыхание при hover — более частое и мелкое */
@keyframes fireBreathHover {
    0%, 100% { transform: scale(1.12); }
    50%      { transform: scale(1.18); }
}

/* ⭐ Свечение дышит В ТАКТ с кнопкой */
@keyframes fireGlowBreath {
    0%, 100% {
        opacity: 0.7;
        transform: scale(1);
        filter: blur(6px);
    }
    50% {
        opacity: 1;
        transform: scale(1.25);
        filter: blur(9px);
    }
}

/* ⭐ Искры — независимое мерцание */
@keyframes fireSpark {
    0%, 100% { opacity: 0.7;  transform: translate(0, 0) scale(1); }
    40%      { opacity: 1;    transform: translate(2px, -2px) scale(1.15); }
    70%      { opacity: 0.55; transform: translate(-1px, 1px) scale(0.95); }
}

/* ═══════════════════════════════════════════════════════════ */
/* 📱 МОБИЛЬНАЯ ОПТИМИЗАЦИЯ                                    */
/* ═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .publish-fab {
        bottom: calc(var(--bottom-nav-height, 74px) + env(safe-area-inset-bottom, 0px) + 20px) !important;
        right: 16px !important;
        width: 68px !important;
        height: 68px !important;
        font-size: 30px !important;

        /* На мобильном — без "дыхания" кнопки, только свечение */
        animation: none;
        box-shadow:
            0 10px 36px rgba(255, 87, 34, 0.6),
            0 4px 14px rgba(255, 152, 0, 0.45),
            0 1px 0 rgba(255, 255, 255, 0.5) inset !important;
    }

    .publish-fab::before {
        animation: fireGlowBreath 2.6s ease-in-out infinite;
        filter: blur(5px);
        opacity: 0.7;
    }

    .publish-fab::after {
        animation: none;
    }

    /* На мобильном hover не нужен, но если сработает — без дыхания */
    .publish-fab:hover,
    .publish-fab:active {
        animation: none;
    }
}

/* ⭐ Уважение к системным настройкам */
@media (prefers-reduced-motion: reduce) {
    .publish-fab,
    .publish-fab::before,
    .publish-fab::after {
        animation: none !important;
    }
}