/* Контейнер чата */
#wxl-chat-container {
    background: #f0f0f1;
    border: 1px solid #ccd0d4;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    max-height: 600px;
}

.wxl-chat-messages {
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Общий стиль сообщения */
.wxl-chat-msg {
    max-width: 80%;
    padding: 10px 15px;
    border-radius: 10px;
    position: relative;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.msg-header {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    margin-bottom: 5px;
    font-weight: bold;
    text-transform: uppercase;
}

/* 1. ОТ КЛИЕНТА (Желтый) */
.msg-from-client {
    align-self: flex-start;
    background-color: #fff9c4; /* Желтый */
    border: 1px solid #fbc02d;
    color: #5d4037;
}

/* 2. АДМИНИСТРАТОР (Зеленый) */
.msg-to-client {
    align-self: flex-end;
    background-color: #e8f5e9; /* Зеленый */
    border: 1px solid #81c784;
    color: #1b5e20;
}

/* 3. СТАТУС / СИСТЕМА (Голубой) */
.msg-system {
    align-self: center;
    background-color: #e3f2fd;
    border: 1px solid #90caf9;
    color: #1565c0;
    max-width: 95%;
    font-style: italic;
    text-align: center;
}

.wxl-chat-input-area {
    padding: 15px;
    background: #fff;
    border-top: 1px solid #ccd0d4;
}

.wxl-chat-input-area textarea {
    width: 100%;
    height: 70px;
    margin-bottom: 10px;
    resize: none;
}
/* Стиль для сообщений об оплате (Montonio) — Розовый нежный */
.msg-montonio, 
.wxl-chat-item.msg-montonio {
    background-color: #fff0f5 !important; /* Нежно-розовый (LavenderBlush) */
    border-left: 4px solid #e91e63 !important; /* Яркий розовый акцент слева */
    color: #333 !important;
    border-radius: 4px;
}

/* Настраиваем цвет заголовка в розовом блоке для лучшей читаемости */
.msg-montonio .msg-header .sender,
.wxl-chat-item.msg-montonio .wxl-chat-meta {
    color: #c2185b !important; /* Темно-розовый текст заголовка */
    font-weight: bold;
}

/* Иконка удаления в розовом блоке (для админки) */
.msg-montonio .wxl-delete-note {
    color: #c2185b;
}

/* Общий стиль для всех бабблов */
.wxl-chat-item { 
    margin-bottom: 10px !important; 
    padding: 12px 15px !important; 
    border-radius: 4px !important; 
    width: 100% !important; /* Теперь все сообщения на всю ширину */
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
    clear: both !important;
}

/* Системные уведомления (Голубой) - теперь тоже на всю ширину */
.msg-system { 
    background: #e3f2fd !important; 
    border: 1px solid #bbdefb !important; 
    text-align: center; 
    color: #1565c0 !important;
}

/* От Магазина (Зеленый) */
.msg-to-client { 
    background: #e8f5e9 !important; 
    border: 1px solid #c8e6c9 !important; 
    color: #2e7d32 !important; 
}

/* От Клиента (Желтый) */
.msg-from-client { 
    background: #fff9c4 !important; 
    border: 1px solid #fff176 !important; 
    color: #5d4037 !important; 
}

.wxl-chat-meta { font-size: 11px; font-weight: bold; margin-bottom: 5px; opacity: 0.8; }