/* ============================================================
   Пилюли шапки: онлайн, уведомления, рубли, монеты, профиль.

   Общий ритм из макета: высота 34px, радиус 9px, отступы 0 13px,
   текст 13px/700. Фон — цвет с прозрачностью .12, рамка — он же на .3,
   текст — светлый оттенок того же цвета. Меняешь цвет — получаешь
   новую пилюлю в том же ритме, ничего больше править не нужно.

   Старые правила этих элементов вырезаны из style.css и top.css —
   здесь единственное описание, а не слой поверх предыдущего.
   ============================================================ */

.header-actions { gap: 10px; }

/* ---------- общий каркас пилюли ---------- */
.navbar__logo-monitoring,
.navbar__missions-link,
.navbar__webrtc-link,
.mini-balance-wrapper,
.btn-head-meatcoin,
.header-profile {
    display: flex;
    align-items: center;
    height: 34px;
    padding: 0 13px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 700;
    line-height: 32px;
    white-space: nowrap;
}

/* ---------- онлайн на серверах ---------- */
.navbar__logo-monitoring {
    gap: 7px;
    background: rgba(61, 220, 132, .12);
    border: 1px solid rgba(61, 220, 132, .28);
    color: #5ce39a;
    cursor: pointer;
    transition: background 140ms ease, border-color 140ms ease;
}

.navbar__logo-monitoring:hover {
    background: rgba(61, 220, 132, .18);
    border-color: rgba(61, 220, 132, .45);
    color: #5ce39a;
}

.navbar__logo-monitoring .navbar__logo-monitoring-indicator {
    width: 7px;
    height: 7px;
    margin: 0;
    border-radius: 50%;
    background: #3ddc84;
    box-shadow: none;
    animation: pulse-green 2.4s ease-out infinite;
}

/* Волна вместо мигания: заметно, но не дёргает глаз */
@keyframes pulse-green {
    0%, 100% { box-shadow: 0 0 0 0 rgba(61, 220, 132, .55); }
    70%      { box-shadow: 0 0 0 8px rgba(61, 220, 132, 0); }
}

/* ---------- колокольчик ---------- */
.heaader-notification-btn {
    position: relative;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 9px;
    background: #16161c;
    border: 1px solid rgba(255, 255, 255, .08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b6b6c2;
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease;
}

.heaader-notification-btn:hover { background: #22222a; color: #fff; }
.heaader-notification-btn i { font-size: 18px; }

/* Счётчик непрочитанных: обводка цветом шапки вырезает кружок из фона */
.heaader-notification-btn .unread-notifications-count {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    border: 2px solid var(--bg-color);
    background: #ff3b2f;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 13px;
    text-align: center;
}

/* ---------- баланс в рублях ---------- */
.mini-balance-wrapper {
    gap: 9px;
    padding: 0 6px 0 13px;
    width: auto;
    background: linear-gradient(90deg, rgba(255, 59, 47, .14), rgba(255, 59, 47, .06));
    border: 1px solid rgba(255, 59, 47, .3);
    color: #fff;
}

.mini-balance-info { flex: 0 0 auto; }

.mini-balance-amount {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
}

/* Вся пилюля рублей одним кеглем: и «RUB», и сумма. Раньше сумма
   тянула размер из var(--h6) и была заметно крупнее соседней MC */
.mini-balance-currency,
.mini-balance-value {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
}

.mini-balance-btn {
    width: 22px;
    height: 22px;
    padding: 0;
    flex: 0 0 auto;
    border: 0;
    border-radius: 7px;
    background: #ff3b2f;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
    transition: transform 140ms ease;
}

.mini-balance-btn:hover { transform: scale(1.12); }

/* Плюс рисуем текстом, как в макете. Иконка .ic-plus — маска с линиями
   толщиной 16 на холсте 256: на кнопке в 22px это меньше пикселя,
   поэтому плюс и пропадал */
.mini-balance-btn .ic-plus { display: none; }

.mini-balance-btn::after {
    content: '+';
    font-size: 17px;
    font-weight: 700;
    line-height: 20px;
    color: #fff;
}

/* ---------- монеты ---------- */
.btn-head-meatcoin {
    gap: 8px;
    background: rgba(255, 193, 7, .12);
    border: 1px solid rgba(255, 193, 7, .3);
    color: #ffd257;
    text-decoration: none;
    transition: background 140ms ease, border-color 140ms ease;
}

.btn-head-meatcoin:hover {
    background: rgba(255, 193, 7, .18);
    border-color: rgba(255, 193, 7, .45);
    color: #ffd257;
    text-decoration: none;
}

/* Монетка своей картинкой — размер под ритм пилюли */
/* Монета ровно того же размера, что точка онлайна и кружок в макете:
   исходник квадратный 1000x1000, поэтому просто фиксируем сторону */
.btn-head-meatcoin img {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    display: block;
    object-fit: contain;
}

/* Сумма и «MC» — тем же кеглем и весом, что и в пилюле рублей */
.btn-head-meatcoin,
.btn-head-meatcoin span {
    font-size: 13px;
    font-weight: 700;
}

/* ---------- профиль ---------- */
.header-profile {
    gap: 8px;
    padding: 0 10px 0 4px;
    background: #16161c;
    border: 1px solid rgba(255, 255, 255, .08);
    cursor: pointer;
    transition: background 140ms ease;
}

.header-profile:hover { background: #22222a; }

.header-profile img {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    object-fit: cover;
    background: #101014;
}

/* Маска красится background-color, свойство color на неё не влияет */
.header-profile .ic-chevron-down {
    background-color: #b6b6c2;
    transition: transform 180ms ease, background-color 140ms ease;
}

.header-profile:hover .ic-chevron-down { background-color: #fff; }

/* Шеврон разворачивается вместе с выпадашкой */
.dropdown.show-drd .header-profile { background: #22222a; }
.dropdown.show-drd .header-profile .ic-chevron-down { transform: rotate(180deg); }

/* ---------- миссии и голосовой чат ---------- */
/* Та же пилюля, что у онлайна, только другого цвета: жёлтая у миссий,
   красная у голосового. Ритм и размеры общие */
.navbar__missions-link,
.navbar__webrtc-link {
    gap: 7px;
    text-decoration: none;
    transition: background 140ms ease, border-color 140ms ease;
}

.navbar__missions-link,
.navbar__missions-link:visited {
    background: rgba(232, 168, 60, .12);
    border: 1px solid rgba(232, 168, 60, .3);
    color: #ffc965;
}

.navbar__missions-link:hover {
    background: rgba(232, 168, 60, .18);
    border-color: rgba(232, 168, 60, .45);
    color: #ffc965;
    text-decoration: none;
}

.navbar__webrtc-link,
.navbar__webrtc-link:visited {
    background: rgba(241, 73, 73, .12);
    border: 1px solid rgba(241, 73, 73, .3);
    color: #ff7070;
}

.navbar__webrtc-link:hover {
    background: rgba(241, 73, 73, .18);
    border-color: rgba(241, 73, 73, .45);
    color: #ff7070;
    text-decoration: none;
}

.navbar__missions-link i,
.navbar__webrtc-link i { font-size: 14px; line-height: 1; }

/* Счётчик в голосовом: точка с волной, как у онлайна на серверах */
.navbar__webrtc-online {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 700;
    color: #ff7070;
}

.navbar__webrtc-online-indicator {
    width: 7px;
    height: 7px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #f14949;
    animation: pulse-red 2.4s ease-out infinite;
}

@keyframes pulse-red {
    0%, 100% { box-shadow: 0 0 0 0 rgba(241, 73, 73, .55); }
    70%      { box-shadow: 0 0 0 8px rgba(241, 73, 73, 0); }
}

/* Обёртки выпадашек в шапке не тянутся по высоте: раньше у профиля стояла
   инлайновая height:100%, пилюля прилипала к верху блока и выглядела выше
   соседних */
.header-actions > .dropdown {
    display: flex;
    align-items: center;
    height: auto;
}