/* ============================================================
   АПС-МОНИТОР — нижняя панель-футер (полная ширина экрана)
   Тёмная тема: графит #1a1a1a + золото #aa9974 (unionsk.ru)
   Прямые углы (--radius: 0), TildaSans.
   ============================================================ */

/* --- Контейнер футера ---
   Полоса на всю ширину внизу экрана (зеркально .app-header сверху).
   z-index 1150: как у хедера, ниже контекстных меню (1200) и стека
   уведомлений (1250) — стек виден НАД футером, меню открываются поверх.
   Кнопка «Уведомления» стоит слева, правая часть футера свободна
   под будущие элементы. */
.app-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--footer-height, 48px);
    z-index: 1150;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 0 16px;
    background: var(--surface);
    border-top: 1px solid var(--border);
    border-radius: 0;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.4);
    pointer-events: auto;
}

/* --- Кнопка «Уведомления» внутри футера (слева) --- */
.footer-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    height: 100%;
    background: transparent;
    border: none;
    border-radius: 0;
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease;
}

.footer-btn:hover {
    color: var(--brand);
    background: var(--surface-hover);
}

.footer-btn:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: -2px;
}

/* Иконка-колокольчик */
.footer-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    stroke: currentColor;
}

/* Текстовая подпись кнопки */
.footer-label {
    font-family: var(--font-main);
}

/* --- Бейдж с числом активных уведомлений ---
   Позиционируется относительно кнопки (у кнопки position: relative),
   частично выступает за её границы — как классический counter-бейдж.
   Скрыт, когда 0: JS ставит атрибут hidden. */
.footer-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--brand);
    color: #1a1a1a;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    border-radius: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.footer-badge[hidden] {
    display: none;
}

/* --- Ссылка «Презентация» в футере ---
   Внешний вид — как у .footer-btn (классы footer-btn/footer-icon/footer-label),
   но это <a>, а не <button>: без подчёркивания, цвет как у текста кнопок,
   hover — как у кнопок. Ведёт на /static/presentation/ (новая вкладка). */
.footer-btn-link {
    text-decoration: none;
    color: var(--text);
}

.footer-btn-link:hover {
    text-decoration: none;
}

/* Свёрнутое состояние стека: бейдж «приглашает» развернуть уведомления.
   Класс .collapsed-state ставит bottom-bar.js из APS.setBottomBarCollapsedState. */
.footer-badge.collapsed-state {
    background: var(--brand-hover);
}

/* --- Кнопка «Эмуляция рабочей сессии» (справа в футере) ---
   Прижата к правому краю через margin-left: auto (футер — flex).
   idle: нейтральная кнопка в цветах футера с акцентной иконкой-часами;
   running (.running): красная рамка/подсветка + «Остановить эмуляцию»,
   справа от подписи — таймер MM:SS и счётчики заявок (создано/эскалировано/закрыто).
   Состояния переключает simulation.js. */
.footer-btn-simulation {
    margin-left: auto;
    gap: 8px;
    /* Прозрачная рамка в idle: при переключении в .running (border 1px)
       кнопка не меняет размер и не «прыгает». */
    border: 1px solid transparent;
}

.footer-btn-simulation:hover {
    color: var(--brand);
    background: var(--surface-hover);
}

/* Иконка-часы: в idle золотая, в running красная (наследует currentColor). */
.footer-icon-simulation {
    color: var(--brand);
}

/* Активное состояние (симуляция идёт): красная подсветка кнопки. */
.footer-btn-simulation.running {
    color: var(--danger);
    background: rgba(224, 85, 69, 0.08);
    border: 1px solid rgba(224, 85, 69, 0.45);
}

.footer-btn-simulation.running:hover {
    background: rgba(224, 85, 69, 0.16);
}

.footer-btn-simulation.running .footer-icon-simulation {
    color: var(--danger);
}

/* --- Блок статуса (таймер + счётчики), виден только в running ---
   Скрыт атрибутом hidden (simulation.js): отдельная строка, моноширинный
   таймер, счётчики — компактная статистика «созд./эскал./закр.». */
.simulation-status {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-left: 4px;
    padding-left: 12px;
    border-left: 1px solid var(--border);
    font-weight: 500;
}

.simulation-status[hidden] {
    display: none;
}

.simulation-timer {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 700;
    color: var(--danger);
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.simulation-counters {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* --- Пульсация бейджа при новом событии ---
   Класс .pulse добавляется JS-ом (bottom-bar.js) при показе нового
   уведомления и снимается по окончании анимации. Анимация перезапускается
   повторным добавлением класса (убираем/добавляем через reflow). */
@keyframes footerBadgePulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.15);
    }
    100% {
        transform: scale(1);
    }
}

.footer-badge.pulse {
    animation: footerBadgePulse 1.2s ease;
}

/* Уважение к prefers-reduced-motion: без пульсации. */
@media (prefers-reduced-motion: reduce) {
    .footer-badge.pulse {
        animation: none;
    }
}

/* --- Узкие экраны: только иконка + бейдж ---
   Подпись «Уведомления» скрываем, чтобы кнопка занимала меньше места. */
@media (max-width: 700px) {
    .footer-label {
        display: none;
    }

    .footer-btn {
        padding: 0 8px;
    }
}

/* Средние экраны: длинная строка счётчиков скрывается, остаются
   подпись кнопки + таймер (running). */
@media (max-width: 900px) {
    .simulation-counters {
        display: none;
    }
}

/* Очень узкие экраны: у кнопки эмуляции скрываем разделитель статуса,
   чтобы не занимал место, когда подпись уже скрыта (max-width: 700px). */
@media (max-width: 480px) {
    .simulation-status {
        padding-left: 8px;
        gap: 6px;
    }
}