/**
 * Estilos customizados para o sistema de mensageria
 */

/* Estrutura do chat com cabeçalho e rodapé fixos */
.conversation-avatar,
.message-avatar,
.chat-avatar {
    border-radius: 50%;
    object-fit: cover;
}

.conversation-avatar {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
}

.conversation-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--bs-primary);
    color: #fff;
    flex-shrink: 0;
    font-size: 1.25rem;
    line-height: 1;
}

.conversation-avatar-fallback i {
    display: block;
    margin: 0;
    padding: 0;
    line-height: 1;
}

.message-avatar {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}

.chat-avatar {
    width: 44px;
    height: 44px;
    border: 2px solid var(--bs-primary);
    flex-shrink: 0;
}

#chatArea {
    height: 100%;
}

#chatArea:not(.d-none) {
    display: flex;
    flex-direction: column;
}

#chatArea>.border-bottom {
    flex-shrink: 0;
    /* Cabeçalho fixo */
}

#chatArea>.border-top {
    flex-shrink: 0;
    /* Rodapé fixo */
}

/* Área de mensagens */
#messagesArea {
    flex: 1 1 auto;
    overflow-y: auto !important;
    min-height: 0;
    /* Importante para flex funcionar corretamente */
    background-image:
        linear-gradient(45deg, rgba(0, 0, 0, .02) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(0, 0, 0, .02) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, .02) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(0, 0, 0, .02) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

/* Bolhas de mensagem */
.message-bubble {
    word-wrap: break-word;
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Lista de conversas */
#conversationsListContent .list-group-item {
    transition: background-color 0.2s;
    border-left: 3px solid transparent;
}

#conversationsListContent .list-group-item:hover {
    background-color: #f8f9fa;
    border-left-color: var(--bs-primary);
}

/* Badge de mensagens não lidas */
#conversationsListContent .badge {
    min-width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
}

/* Input de mensagem */
#messageInput {
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
}

#messageInput:focus {
    outline: none;
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
}

/* Scroll customizado para área de mensagens */
#messagesArea::-webkit-scrollbar {
    width: 6px;
}

#messagesArea::-webkit-scrollbar-track {
    background: transparent;
}

#messagesArea::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 3px;
}

#messagesArea::-webkit-scrollbar-thumb:hover {
    background: #a0aec0;
}

/* Responsivo */
@media (max-width: 576px) {
    #offMensagens {
        width: 100% !important;
    }
}

/* Tema escuro */
[data-bs-theme="dark"] #messagesArea {
    background-color: #1a1d20;
    background-image:
        linear-gradient(45deg, rgba(255, 255, 255, .02) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(255, 255, 255, .02) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, .02) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, .02) 75%);
}

[data-bs-theme="dark"] .message-bubble.bg-white {
    background-color: #2b3035 !important;
    color: #dee2e6;
}

[data-bs-theme="dark"] .message-bubble.bg-primary {
    background-color: #0d6efd !important;
    color: #fff;
}

[data-bs-theme="dark"] .conversation-avatar-fallback {
    background-color: #0d6efd;
    color: #fff;
}

[data-bs-theme="dark"] #conversationsListContent .list-group-item:hover {
    background-color: #2b3035;
}

[data-bs-theme="dark"] .offcanvas-header,
[data-bs-theme="dark"] .p-3.border-bottom.bg-light,
[data-bs-theme="dark"] .p-2.border-bottom.bg-light {
    background-color: #212529 !important;
}

[data-bs-theme="dark"] .p-3.border-top.bg-white {
    background-color: #212529 !important;
}

[data-bs-theme="dark"] #messageInput {
    background-color: #2b3035;
    border-color: #495057;
    color: #dee2e6;
}

[data-bs-theme="dark"] #messageInput:focus {
    background-color: #2b3035;
    border-color: var(--bs-primary);
    color: #dee2e6;
}