/* Аватарки */
.message-outer {
    display: flex;
    align-items: flex-start;
    margin-bottom: 16px;
}

.message-outer.user {
    flex-direction: row;           /* аватар слева */
}

.message-outer.support {
    flex-direction: row-reverse;   /* аватар справа */
    text-align: right;
}

.message-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    margin: 0 12px;
    object-fit: cover;
}

.message-body {
    max-width: 70%;
}

.message-author {
    font-weight: 600;
    margin-bottom: 4px;
}

.message-text {
    padding: 8px 12px;
    border-radius: 12px;
    display: inline-block;
}

.user .message-text {
    background: #e8f0fe;
}

.support .message-text {
    background: #fef3e2;
}

.message-meta {
    font-size: 0.8rem;
    color: #666;
    margin-top: 4px;
}

.typing-indicator {
    font-size: 0.9rem;
    padding: 4px 12px;
    color: #888;
    font-style: italic;
}

/* Убираем синий фон Bootstrap active, чтобы не перебивал наши цвета */
#ticketsList .list-group-item.active {
    background-color: inherit !important;
    border-color: inherit !important;
}

/* Новый тикет (выделенный) — бледно-красный */
#ticketsList .list-group-item.active.status-new {
    background-color: rgba(255, 0, 0, 0.1) !important;
}

/* Отвеченный тикет (выделенный) — бледно-зелёный */
#ticketsList .list-group-item.active.status-answered {
    background-color: rgba(0, 255, 0, 0.1) !important;
}

/* Закрытый тикет (выделенный) — бледно-серый */
#ticketsList .list-group-item.active.status-closed {
    background-color: rgba(128, 128, 128, 0.1) !important;
}