/* ============================================
   SISTEMA DE CHAT - ESTILO WHATSAPP
   ============================================ */

/* ---- Sidebar de contactos ---- */
.chat-sidebar {
    width: 360px;
    min-width: 360px;
    background: #ffffff;
    transition: all 0.2s ease;
}

.chat-sidebar-header {
    background: #f0f2f5;
    min-height: 56px;
}

/* ---- Panel principal ---- */
.chat-main {
    background-color: #e5ddd5;
    background-image: url('https://user-images.githubusercontent.com/15075759/28719144-86dc0f70-73b1-11e7-911d-60d70fcded21.png');
    background-repeat: repeat;
}

/* ---- Burbujas de mensaje ---- */
.msg-received {
    background: #ffffff !important;
    color: #111111 !important;
    border-radius: 0 10px 10px 10px !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.12);
}

    .msg-received p,
    .msg-received small,
    .msg-received span,
    .msg-received div {
        color: #111111 !important;
    }

.msg-sent {
    background: #d9fdd3 !important;
    color: #111111 !important;
    border-radius: 10px 0 10px 10px !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.12);
}

    .msg-sent p,
    .msg-sent small,
    .msg-sent span,
    .msg-sent div {
        color: #111111 !important;
    }

/* Excepción: el nombre del sender en grupos va en verde */
.msg-sender-name {
    color: #00897b !important;
}

/* El timestamp siempre gris oscuro */
.msg-received .msg-time,
.msg-sent .msg-time {
    color: #667781 !important;
}

/* ---- Barra superior del chat activo ---- */
.chat-top-bar {
    background: #f0f2f5 !important;
    min-height: 56px;
}

    .chat-top-bar .fw-semibold {
        color: #111111 !important;
    }

    .chat-top-bar .text-muted {
        color: #667781 !important;
    }

/* ---- Sidebar header ---- */
.chat-sidebar-header {
    background: #f0f2f5 !important;
    min-height: 56px;
}

    .chat-sidebar-header .fw-semibold {
        color: #111111 !important;
    }

/* ---- Sidebar contactos: texto siempre oscuro ---- */
.contact-item .fw-semibold,
.contact-item .contact-name {
    color: #111111 !important;
}

.contact-item .text-muted {
    color: #667781 !important;
}

/* ---- Input bar inferior ---- */
.chat-input-bar {
    background: #f0f2f5 !important;
    min-height: 56px;
}

.chat-msg-input,
.chat-msg-input::placeholder {
    color: #111111 !important;
}

    .chat-msg-input:focus {
        box-shadow: none;
        background: #fff !important;
        color: #111111 !important;
        outline: none;
    }

/* ---- Search input ---- */
.chat-search,
.chat-search::placeholder {
    color: #667781 !important;
}

    .chat-search:focus {
        box-shadow: none;
        background: #e8eaed !important;
        color: #111111 !important;
        outline: none;
    }

/* ---- Items de contactos ---- */
.contact-item {
    border-radius: 0 !important;
    border-bottom: 1px solid #f0f0f0 !important;
    transition: background 0.1s;
    cursor: pointer;
}

    .contact-item:hover {
        background: #f5f5f5 !important;
    }

.contact-active,
.contact-active:hover {
    background: #f0f2f5 !important;
}

/* ---- Botones de filtro ---- */
.chat-filter-btn {
    border: 1px solid #d0d0d0;
    color: #555;
    font-size: 0.78rem;
    padding: 3px 14px;
    background: transparent;
    transition: all 0.15s;
}

    .chat-filter-btn.active {
        background: #d9fdd3;
        border-color: #25d366;
        color: #128c7e;
        font-weight: 600;
    }

/* ---- Scrollbar fino ---- */
#contactList::-webkit-scrollbar,
#messagesContainer::-webkit-scrollbar,
#modalMessages::-webkit-scrollbar {
    width: 5px;
}

#contactList::-webkit-scrollbar-thumb,
#messagesContainer::-webkit-scrollbar-thumb,
#modalMessages::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}

/* ---- Responsive: ocultar sidebar en mobile ---- */
@media (max-width: 767px) {
    .chat-sidebar {
        position: absolute;
        z-index: 10;
        height: 100%;
        width: 100% !important;
        min-width: 100% !important;
    }

        .chat-sidebar.d-none-mobile {
            display: none !important;
        }
}

/* ---- Nombre del contacto en la lista ---- */
.contact-name {
    max-width: 180px;
}

/* ---- Dark mode support ---- */
[data-bs-theme="dark"] .chat-sidebar,
[data-bs-theme="dark"] .chat-sidebar-header,
[data-bs-theme="dark"] .chat-top-bar,
[data-bs-theme="dark"] .chat-input-bar {
    background: #1f2c34 !important;
}

[data-bs-theme="dark"] .contact-item {
    border-bottom-color: #2a3942 !important;
    color: #e9edef;
}

    [data-bs-theme="dark"] .contact-item:hover,
    [data-bs-theme="dark"] .contact-active {
        background: #2a3942 !important;
    }

[data-bs-theme="dark"] .chat-filter-btn {
    border-color: #3a4a52;
    color: #adb5bd;
    background: transparent;
}

    [data-bs-theme="dark"] .chat-filter-btn.active {
        background: #1a3b2a;
        border-color: #25d366;
        color: #25d366;
    }

[data-bs-theme="dark"] .msg-received {
    background: #202c33;
    color: #e9edef;
}

[data-bs-theme="dark"] .msg-sent {
    background: #005c4b;
    color: #e9edef;
}

[data-bs-theme="dark"] .chat-search,
[data-bs-theme="dark"] .chat-msg-input {
    background: #2a3942 !important;
    color: #e9edef;
}

[data-bs-theme="dark"] .chat-main {
    background-color: #0b141a;
}

[data-bs-theme="dark"] #emptyState {
    background: #0b141a;
}

[data-bs-theme="dark"] #modalEmptyState {
    background: #0b141a;
}