/* ============================================================
   Выпадающий профиль в шапке (аватар → меню).

   Оформление общее с остальным сайтом: карточка на --card-color, рамка
   в 7% белого, радиус 20px, акцент var(--accent). Сверху — человек,
   ниже — кошелёк с кнопкой пополнения, затем пункты меню с значками из
   общего спрайта и счётчиками, «Выйти» отдельно внизу.

   Разметка: tpl/home/top.tpl. Без изменений остались то, за что цепляются
   скрипты: #balance, #messages_count, #friends_count, .notif-count,
   data-openmodal="purse" и сам .dropdown-content-miniprofile (открывается
   через data-opendrop у .header-profile).

   Приставка mp-.
   ============================================================ */

.dropdown-content-new.dropdown-content-miniprofile {
    right: 0 !important;
    left: auto !important;
    width: 320px;
    min-width: 320px;
    padding: 10px !important;
    border: 1px solid rgba(255, 255, 255, .07) !important;
    border-radius: 20px !important;
    background: var(--card-color) !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .55);

    /* Цвет человека — первый цвет оформления его группы (--mp-hex задаёт
       шапка). Если цвета нет — фирменный акцент. Второй вариант чуть
       светлее: у тёмных групп (чёрный, тёмно-зелёный) кольцо и значки на
       тёмной карточке иначе пропадали бы. Старые браузеры без color-mix
       останутся на первом значении. */
    --g: var(--mp-hex, var(--accent));
    --g: color-mix(in srgb, var(--mp-hex, var(--accent)) 70%, #fff);
}

.dropdown-content-miniprofile .ic {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* ---------- человек ---------- */
.mp-user {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 10px 10px 14px;
    border-radius: 14px;
    color: #fff;
    text-decoration: none;
    transition: background 140ms ease;
}

.mp-user:hover { background: rgba(255, 255, 255, .05); color: #fff; text-decoration: none; }

/* Аватар: кольцо цвета группы. Если у человека есть рамка — рисуем её, как в
   чате (64px вокруг 48px), а кольцо убираем: две обводки подряд — лишнее */
.mp-avatar {
    position: relative;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
}

.mp-avatar__img {
    display: block;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 2px var(--g);
}

.mp-avatar.has-frame .mp-avatar__img { box-shadow: none; }

.mp-frame {
    position: absolute;
    left: -8px;
    top: -8px;
    width: 64px;
    height: 64px;
    max-width: none;
    pointer-events: none;
}

.mp-who {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    gap: 2px;
}

.mp-name {
    overflow: hidden;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Название группы выводится её собственным оформлением из админки (цвет,
   градиентный текст, свечение, фон-гиф) — его отдаёт inline-style из шапки,
   так же как в чате. Здесь только размер и межстрочный интервал */
.mp-group {
    align-self: flex-start;
    max-width: 100%;
    overflow: hidden;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mp-go { display: flex; color: #6f6f7c; transition: color 140ms ease, transform 140ms ease; }
.mp-user:hover .mp-go { color: var(--g); transform: translateX(2px); }

/* ---------- кошелёк ---------- */
.mp-wallet {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 6px 0 8px;
    padding: 12px 12px 12px 14px;
    border: 1px solid rgba(95, 101, 220, .38);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(95, 101, 220, .3), rgba(95, 101, 220, .08));
    color: #fff;
    cursor: pointer;
    text-decoration: none;
    transition: border-color 140ms ease, filter 140ms ease;
}

.mp-wallet:hover { border-color: rgba(95, 101, 220, .7); color: #fff; text-decoration: none; }

.mp-wallet__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

.mp-wallet__icon .ic { width: 20px; height: 20px; }

.mp-wallet__body { display: flex; flex: 1; flex-direction: column; gap: 1px; min-width: 0; }

.mp-wallet__label {
    color: #b9bcff;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.mp-wallet__sum {
    font-family: Oswald, sans-serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: .02em;
}

.mp-wallet__btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 12px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    transition: filter 140ms ease;
}

.mp-wallet__btn .ic { width: 14px; height: 14px; }
.mp-wallet:hover .mp-wallet__btn { filter: brightness(1.12); }

/* ---------- пункты меню ---------- */
.mp-menu { display: flex; flex-direction: column; gap: 2px; }

.mp-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 7px 10px;
    border-radius: 12px;
    color: #d5d5de;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background 140ms ease, color 140ms ease;
}

.mp-item:hover { background: rgba(255, 255, 255, .06); color: #fff; text-decoration: none; }

.mp-item__ic {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .05);
    color: #9ba0ff;
    color: var(--g);
    transition: background 140ms ease, color 140ms ease;
}

.mp-item:hover .mp-item__ic { background: rgba(95, 101, 220, .28); color: #fff; }
.mp-item:hover .mp-item__ic { background: color-mix(in srgb, var(--g) 28%, transparent); }

.mp-item__t { flex: 1; min-width: 0; }

/* Счётчики. #messages_count и #friends_count скрипт то показывает
   (display: block), то прячет — поэтому форма задана не через flex */
.mp-item .notif-count {
    min-width: 22px;
    height: 20px;
    padding: 0 7px;
    border-radius: 10px;
    background: var(--accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}

.mp-sep { height: 1px; margin: 6px 8px; background: rgba(255, 255, 255, .07); }

.mp-item--exit { color: #ff9a9a; }
.mp-item--exit .mp-item__ic { background: rgba(255, 92, 92, .12); color: #ff8b8b; }
.mp-item--exit:hover { background: rgba(255, 92, 92, .1); color: #ffb3b3; }
.mp-item--exit:hover .mp-item__ic { background: rgba(255, 92, 92, .22); color: #ffb3b3; }

@media (max-width: 420px) {
    .dropdown-content-new.dropdown-content-miniprofile { width: calc(100vw - 20px); min-width: 0; }
}