/* css/v5-chat.css */

/* ============================================================
   CHAT — специфика чата
   карточка, сообщения, бейджи
   ============================================================ */

/* ============================================================
   БЕЙДЖ НА КНОПКЕ ЧАТА (на иконке, в красном кружочке)
   ============================================================ */

#chatBtn {
    position: relative;
}

.v5-chat-badge {
    position: absolute;
    top: calc(-6px * var(--v5-scale));
    right: calc(-6px * var(--v5-scale));
    background: var(--v5-error-base);
    color: var(--v5-white);
    border-radius: 50%;
    min-width: calc(20px * var(--v5-scale));
    height: calc(20px * var(--v5-scale));
    padding: 0 var(--v5-gap-min);
    font-size: var(--v5-font-little);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: calc(2px * var(--v5-scale)) solid var(--v5-white);
    box-shadow: var(--v5-shadow);
    z-index: 10;
    pointer-events: none;
}

/* ============================================================
   КАРТОЧКА ПОЛЬЗОВАТЕЛЯ В СПИСКЕ
   ============================================================ */

.v5-chat-user-card {
    position: relative;
}

/* Бейдж непрочитанных в списке (inline, рядом с именем) */
.v5-chat-unread-badge {
    background: var(--v5-error-base);
    color: var(--v5-white);
    border-radius: 50%;
    min-width: calc(20px * var(--v5-scale));
    height: calc(20px * var(--v5-scale));
    padding: 0 var(--v5-gap-min);
    font-size: var(--v5-font-little);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    flex-shrink: 0;
}

/* ============================================================
   СООБЩЕНИЯ
   ============================================================ */

/* Свои сообщения — справа */
.v5-message-own {
    align-self: flex-end;
    max-width: 85%;
}

/* Чужие сообщения — слева */
.v5-message-other {
    align-self: flex-start;
    max-width: 85%;
}

/* Маркер для JS-скролла к первому непрочитанному (без стилей) */
.v5-message-unread {
    /* маркер */
}