/* ============================================
   MESSAGES - STYLES
   ============================================ */

/* ============================================
   1. MESSAGE BUBBLES
   ============================================ */

.message-item {
    display: flex;
    flex-direction: column;
}

.message-item.sent {
    align-items: flex-end;
}

.message-item.received {
    align-items: flex-start;
}

.message-bubble {
    max-width: 75%;
    word-wrap: break-word;
}

.message-item.sent .message-bubble {
    background: #1a3b8a;
    color: white;
    border-radius: 12px 12px 4px 12px;
}

.message-item.received .message-bubble {
    background: #f1f3f5;
    color: #212529;
    border-radius: 12px 12px 12px 4px;
}

.message-item.sent .message-bubble .text-muted {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* ============================================
   2. MESSAGES CONTAINER
   ============================================ */

.messages-container {
    scroll-behavior: smooth;
}

.messages-container::-webkit-scrollbar {
    width: 6px;
}

.messages-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.messages-container::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 10px;
}

.messages-container::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* ============================================
   3. CONVERSATION LIST
   ============================================ */

.conversation-item {
    transition: all 0.3s ease;
}

.conversation-item:hover {
    background: #f8f9fa;
}

.conversation-item .unread-badge {
    background: #dc3545;
    color: white;
    padding: 0.15rem 0.5rem;
    border-radius: 20px;
    font-size: 0.7rem;
}

/* ============================================
   4. EMPTY STATE
   ============================================ */

.empty-state {
    padding: 2rem;
    background: white;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.empty-state i {
    color: #6c757d;
}

/* ============================================
   5. RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    .message-bubble {
        max-width: 85%;
    }
    
    .message-item .message-bubble {
        padding: 0.75rem !important;
    }
    
    .message-item .message-bubble .fw-bold {
        font-size: 0.8rem;
    }
    
    .message-item .message-bubble p {
        font-size: 0.9rem;
    }
}

@media (max-width: 576px) {
    .message-bubble {
        max-width: 90%;
    }
    
    .messages-container {
        max-height: 400px !important;
    }
}