/**
 * @file chat.css
 * @description
 * Estilos globales del sistema de chat de Chicky Gallery.
 *
 * Incluye:
 * - Sidebar de conversaciones
 * - Búsqueda e invitaciones
 * - Estados de conexión
 * - Mensajes enviados y recibidos
 * - Acciones del chat
 * - Campo de escritura
 * - Diseño responsive
 * - Compatibilidad con modo oscuro
 */

/* ============================================= */
/* == 1. BASE                                 == */
/* ============================================= */

* {
    box-sizing: border-box;
}

.chat-page {
    width: 100%;
    height: calc(100vh - 70px);
    min-height: 0;
    background: #f8f5f9;
    overflow: hidden;
}

.chat-container {
    display: flex;
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: #ffffff;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.oculto {
    display: none !important;
}

button,
input {
    font-family: inherit;
}

/* ============================================= */
/* == 2. SIDEBAR                              == */
/* ============================================= */

.conversations-sidebar {
    width: 360px;
    flex: 0 0 360px;
    min-width: 0;

    display: flex;
    flex-direction: column;

    background: var(--bg-panel);
    border-right: 1px solid var(--border);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

/* ============================================= */
/* == 3. HEADER SIDEBAR                       == */
/* ============================================= */

.sidebar-header {
    display: flex;
    flex-direction: column;
    gap: 16px;

    padding: 24px 20px 20px;

    background:
        linear-gradient(
            180deg,
            var(--bg-panel-soft) 0%,
            var(--bg-panel) 100%
        );

    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.sidebar-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sidebar-title-row h3 {
    margin: 0;

    color: var(--primary-color);
    font-size: 1.45rem;
    font-weight: 900;
    letter-spacing: -0.02em;
}

.sidebar-title-row span {
    display: block;
    max-width: 290px;

    margin-top: 6px;

    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.45;
}

/* ============================================= */
/* == 4. BUSCADOR                             == */
/* ============================================= */

.chat-invite-form {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

#input-invitar-usuario {
    flex: 1;
    min-width: 0;
    height: 44px;

    border: 1px solid var(--border);
    border-radius: 13px;

    padding: 0 14px;

    background: var(--bg-input);
    color: var(--text-main);

    font-size: 0.92rem;
    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

#input-invitar-usuario::placeholder {
    color: var(--text-muted);
}

#input-invitar-usuario:focus {
    border-color: var(--primary-color);

    box-shadow:
        0 0 0 3px rgba(175, 0, 161, 0.10);
}

#btn-invitar-usuario {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;

    border: 0;
    border-radius: 13px;

    background: var(--primary-color);
    color: #ffffff;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    box-shadow:
        0 5px 14px rgba(175, 0, 161, 0.20);

    transition:
        background-color 0.2s ease,
        transform 0.15s ease,
        box-shadow 0.2s ease;
}

#btn-invitar-usuario:hover {
    background: var(--primary-hover-color);

    transform: translateY(-1px);

    box-shadow:
        0 7px 18px rgba(175, 0, 161, 0.26);
}

#btn-invitar-usuario:active {
    transform: translateY(0);
}

#btn-invitar-usuario:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

#btn-invitar-usuario i {
    color: #ffffff;
    font-size: 0.95rem;
}

.invite-status {
    display: block;
    min-height: 16px;

    color: var(--text-muted);
    font-size: 0.78rem;
}

/* ============================================= */
/* == 5. RESULTADOS DE BUSQUEDA               == */
/* ============================================= */

.invite-results {
    display: flex;
    flex-direction: column;
    gap: 8px;

    margin-top: 2px;

    max-height: 260px;
    overflow-y: auto;
}

.invite-result-item {
    width: 100%;

    border: 1px solid var(--border);
    border-radius: 13px;

    background: var(--bg-panel);

    padding: 10px;

    display: flex;
    align-items: center;
    gap: 10px;

    cursor: pointer;
    text-align: left;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.15s ease;
}

.invite-result-item:hover {
    background: var(--bg-panel-soft);
    border-color: rgba(175, 0, 161, 0.25);
    transform: translateY(-1px);
}

.invite-result-item:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.invite-result-item img {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    border-radius: 50%;
    object-fit: cover;

    background: var(--bg-panel-soft);
    border: 1px solid var(--border);
}

.invite-result-item span {
    display: flex;
    flex-direction: column;

    min-width: 0;
}

.invite-result-item strong {
    color: var(--text-main);
    font-size: 0.87rem;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.invite-result-item small {
    margin-top: 2px;

    color: var(--text-muted);
    font-size: 0.74rem;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================= */
/* == 6. SECCIONES SIDEBAR                    == */
/* ============================================= */

.chat-sidebar-section {
    padding: 12px 10px;

    border-bottom: 1px solid var(--border);

    flex-shrink: 0;
}

.conversations-section {
    flex: 1;
    min-height: 0;

    display: flex;
    flex-direction: column;
}

.chat-sidebar-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 7px 10px 9px;
}

.chat-sidebar-section-header h4 {
    margin: 0;

    color: var(--text-main);
    font-size: 0.84rem;
    font-weight: 900;

    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.chat-sidebar-section-header span {
    min-width: 23px;
    height: 23px;

    padding: 0 7px;

    border-radius: 999px;

    background: var(--bg-panel-soft);
    color: var(--primary-color);

    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-size: 0.7rem;
    font-weight: 900;
}

/* ============================================= */
/* == 7. INVITACIONES                         == */
/* ============================================= */

.pending-invitations-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.empty-invitations-item {
    padding: 10px;

    color: var(--text-muted);
    font-size: 0.82rem;

    text-align: center;
}

.invitation-item {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 10px;

    margin-bottom: 7px;

    background: var(--bg-panel-soft);
    border: 1px solid var(--border);
    border-radius: 13px;
}

.invitation-item .avatar {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
}

.invitation-info {
    flex: 1;
    min-width: 0;
}

.invitation-name {
    display: block;

    color: var(--text-main);
    font-size: 0.86rem;
    font-weight: 900;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.invitation-preview {
    display: block;

    margin-top: 2px;

    color: var(--text-muted);
    font-size: 0.74rem;
}

.invitation-actions {
    display: flex;
    gap: 5px;
}

.btn-accept-invitation,
.btn-decline-invitation {
    border: 0;
    border-radius: 9px;

    padding: 7px 10px;

    font-size: 0.76rem;
    font-weight: 800;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        transform 0.15s ease;
}

.btn-accept-invitation {
    background: var(--primary-color);
    color: #ffffff;
}

.btn-decline-invitation {
    background: var(--bg-panel);
    color: var(--text-muted);
    border: 1px solid var(--border);
}

.btn-accept-invitation:hover {
    background: var(--primary-hover-color);
    transform: translateY(-1px);
}

.btn-decline-invitation:hover {
    background: var(--bg-panel-soft);
    color: var(--text-main);
}

.btn-accept-invitation:focus-visible,
.btn-decline-invitation:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* ============================================= */
/* == 8. CONVERSACIONES                       == */
/* ============================================= */

.conversations-list {
    list-style: none;

    margin: 0;
    padding: 6px;

    overflow-y: auto;

    flex: 1;
    min-height: 0;
}

.conversation-item {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 12px;

    margin-bottom: 4px;

    border-radius: 14px;
    border: 1px solid transparent;

    cursor: pointer;

    background: transparent;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.15s ease;
}

.conversation-item:hover {
    background: var(--bg-panel-soft);
}

.conversation-item.active {
    background: rgba(175, 0, 161, 0.07);
    border-color: rgba(175, 0, 161, 0.16);
}

.conversation-item.active::before {
    content: "";

    width: 3px;
    height: 28px;

    position: absolute;

    margin-left: -12px;

    border-radius: 999px;

    background: var(--primary-color);
}

.conversation-item:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.avatar {
    width: 48px;
    height: 48px;

    flex: 0 0 48px;

    margin: 0;

    border-radius: 50%;

    object-fit: cover;

    background: var(--bg-panel-soft);

    border: 2px solid var(--border);
}

.conversation-item.active .avatar {
    border-color: var(--primary-color);
}

.conversation-info {
    min-width: 0;
    flex: 1;
}

.conversation-name {
    display: block;

    color: var(--text-main);

    font-weight: 850;
    font-size: 0.95rem;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.conversation-preview {
    display: block;

    margin-top: 4px;

    color: var(--text-muted);
    font-size: 0.81rem;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================= */
/* == 9. VENTANA DE CHAT                      == */
/* ============================================= */

.chat-window {
    flex: 1;
    min-width: 0;

    display: flex;
    flex-direction: column;

    position: relative;

    background: var(--bg-main);
}

/* ============================================= */
/* == 10. HEADER DEL CHAT                     == */
/* ============================================= */

.chat-header {
    min-height: 78px;
    height: 78px;

    padding: 0 24px;

    display: flex;
    align-items: center;

    gap: 14px;

    background: var(--bg-panel);

    border-bottom: 1px solid var(--border);

    flex-shrink: 0;
}

.chat-header-info {
    min-width: 0;
    flex: 1;
}

.chat-header-info h3 {
    margin: 0;

    color: var(--text-main);

    font-size: 1.08rem;
    font-weight: 850;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-status,
.connection-status {
    display: flex;
    align-items: center;
    gap: 6px;

    margin-top: 5px;

    color: var(--text-muted);

    font-size: 0.76rem;
    font-weight: 600;
}

.chat-status.connected::before,
.connection-status.connected::before {
    content: "";

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--success-color);
}

.chat-status.reconnecting::before,
.connection-status.reconnecting::before {
    content: "";

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--warning-color);
}

.chat-status.disconnected::before,
.connection-status.disconnected::before {
    content: "";

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--error-color);
}

/* ============================================= */
/* == 11. ACCIONES DEL CHAT                  == */
/* ============================================= */

.chat-header-actions {
    display: flex;
    align-items: center;
    gap: 7px;

    flex-shrink: 0;
}

.btn-chat-back,
.btn-chat-jump,
.btn-chat-danger {
    width: 40px;
    height: 40px;

    border: 1px solid var(--border);
    border-radius: 11px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.15s ease;
}

.btn-chat-back,
.btn-chat-jump {
    background: var(--bg-panel-soft);
    color: var(--text-main);
}

.btn-chat-back:hover,
.btn-chat-jump:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #ffffff;
    transform: translateY(-1px);
}

.btn-chat-danger {
    background: rgba(231, 76, 60, 0.08);
    color: var(--error-color);
    border-color: rgba(231, 76, 60, 0.18);
}

.btn-chat-danger:hover {
    background: rgba(231, 76, 60, 0.16);
    border-color: rgba(231, 76, 60, 0.3);
    transform: translateY(-1px);
}

.btn-chat-back:focus-visible,
.btn-chat-jump:focus-visible,
.btn-chat-danger:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Tooltips para botones de acción */
.btn-chat-back,
.btn-chat-jump,
.btn-chat-danger {
    position: relative;
}

.btn-chat-back::after,
.btn-chat-jump::after,
.btn-chat-danger::after {
    position: absolute;

    top: calc(100% + 8px);
    right: 0;

    padding: 6px 9px;

    border-radius: 7px;

    background: var(--text-main);
    color: var(--bg-panel);

    font-size: 0.7rem;
    font-weight: 700;

    white-space: nowrap;

    opacity: 0;
    pointer-events: none;

    transform: translateY(-3px);

    transition:
        opacity 0.15s ease,
        transform 0.15s ease;

    z-index: 5000;
}

.btn-chat-back::after {
    content: "Volver";
}

.btn-chat-jump::after {
    content: "Último mensaje";
}

#btn-eliminar-chat::after {
    content: "Eliminar chat";
}

#btn-bloquear-usuario::after {
    content: "Bloquear usuario";
}

.btn-chat-back:hover::after,
.btn-chat-jump:hover::after,
.btn-chat-danger:hover::after {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================= */
/* == 12. BANNER DE INVITACIÓN                == */
/* ============================================= */

.chat-invitation-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 18px;

    padding: 13px 20px;

    background: var(--bg-panel-soft);

    border-bottom: 1px solid var(--border);
}

.chat-invitation-info {
    display: flex;
    flex-direction: column;
    gap: 3px;

    color: var(--text-muted);

    font-size: 0.86rem;
}

.chat-invitation-info strong {
    color: var(--primary-color);
}

.chat-invitation-actions {
    display: flex;
    gap: 8px;

    flex-shrink: 0;
}

/* ============================================= */
/* == 13. MENSAJES                            == */
/* ============================================= */

.sr-only {
    position: absolute;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;
}

.chat-messages {
    flex: 1;

    overflow-y: auto;

    padding: 26px 30px;

    display: flex;
    flex-direction: column;

    gap: 12px;

    background:
        radial-gradient(
            circle at top left,
            rgba(175, 0, 161, 0.045),
            transparent 32%
        ),
        var(--bg-main);
}

.chat-empty-state {
    margin: auto;

    max-width: 360px;

    color: var(--text-muted);

    font-weight: 700;
    text-align: center;
}

/* ============================================= */
/* == 14. BURBUJAS DE MENSAJES               == */
/* ============================================= */

.message,
.message-bubble {
    max-width: min(72%, 650px);

    width: fit-content;

    display: flex;
    flex-direction: column;

    position: relative;
}

.message p,
.message-bubble p {
    margin: 0;

    padding: 12px 16px;

    border-radius: 17px;

    line-height: 1.5;

    font-size: 0.94rem;

    word-break: break-word;
    overflow-wrap: break-word;

    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.055);
}

.message.sent,
.message-bubble.sent {
    align-self: flex-end;
}

.message.sent p,
.message-bubble.sent p {
    background: var(--primary-color);

    color: #ffffff;

    border-bottom-right-radius: 5px;

    box-shadow:
        0 5px 16px rgba(175, 0, 161, 0.18);
}

.message.received,
.message-bubble.received {
    align-self: flex-start;
}

.message.received p,
.message-bubble.received p {
    background: var(--bg-panel);

    color: var(--text-main);

    border: 1px solid var(--border);

    border-bottom-left-radius: 5px;
}

.message.pending p,
.message-bubble.pending p {
    opacity: 0.68;
}

.message.failed p,
.message-bubble.failed p {
    background: rgba(231, 76, 60, 0.09);

    color: var(--error-color);

    border: 1px solid rgba(231, 76, 60, 0.30);
}

.message-time {
    margin-top: 4px;

    font-size: 0.7rem;

    color: var(--text-muted);

    align-self: flex-end;
}


.message.received .message-time,
.message-bubble.received .message-time {
    align-self: flex-start;
}

/* =========================================
   MENÚ DE OPCIONES DEL MENSAJE
   ========================================= */

.message-actions {
    position: absolute;

    top: 50%;
    right: -38px;

    transform: translateY(-50%);

    display: flex;
    align-items: center;

    opacity: 0;

    pointer-events: none;

    transition:
        opacity .15s ease;
}

.message.sent .message-actions {
    right: -38px;
}

.message.received .message-actions {
    left: -38px;
    right: auto;
}

.message:hover .message-actions,
.message:focus-within .message-actions {
    opacity: 1;

    pointer-events: auto;
}


.message-menu-wrapper {
    position: relative;
}


.message-menu-button {
    width: 30px;
    height: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 1px solid var(--border);

    border-radius: 50%;

    background: var(--bg-panel);

    color: var(--text-muted);

    cursor: pointer;

    box-shadow:
        0 3px 10px rgba(0, 0, 0, .08);

    transition:
        background-color .15s ease,
        color .15s ease;
}

.message-menu-button:hover {
    background: var(--bg-main);

    color: var(--text-main);
}

.message-menu-button i {
    font-size: .72rem;
}


/* =========================================
   MENÚ DESPLEGABLE
   ========================================= */

.message-options-menu {
    position: absolute;

    top: calc(100% + 6px);

    right: 0;

    width: 175px;

    padding: 5px;

    display: none;

    background: var(--bg-panel);

    border: 1px solid var(--border);

    border-radius: 12px;

    box-shadow:
        0 12px 30px rgba(0, 0, 0, .14);

    z-index: 5000;
}

.message-options-menu.open {
    display: flex;

    flex-direction: column;
}


.message-option {
    width: 100%;

    min-height: 38px;

    display: flex;
    align-items: center;

    gap: 9px;

    padding: 8px 10px;

    border: 0;

    border-radius: 8px;

    background: transparent;

    color: var(--text-main);

    font-family: inherit;

    font-size: .78rem;

    font-weight: 600;

    text-align: left;

    cursor: pointer;
}

.message-option:hover {
    background: var(--bg-main);
}

.message-option i {
    width: 17px;

    color: var(--text-muted);

    text-align: center;
}

.message-option.danger {
    color: #d64545;
}

.message-option.danger i {
    color: #d64545;
}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 768px) {

    .message-actions {
        /*
         * En móvil no mostramos el botón
         * permanentemente.
         */
        opacity: 1;

        pointer-events: auto;

        right: 4px;

        top: -10px;

        transform: none;
    }

    .message.received .message-actions {
        left: auto;

        right: 4px;
    }

    .message-menu-button {
        width: 28px;
        height: 28px;

        background: var(--bg-panel);

        box-shadow:
            0 2px 8px rgba(0, 0, 0, .12);
    }

    .message-options-menu {
        position: fixed;

        width: 190px;

        right: 12px;

        bottom: 70px;

        top: auto;
    }

}

.message-delete-btn:hover {
    color: var(--error-color);
    background: rgba(231, 76, 60, 0.08);
}

.message-delete-btn:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* ============================================= */
/* == 15. INPUT DE MENSAJE                    == */
/* ============================================= */

.chat-input-area {
    padding: 15px 22px;

    background: var(--bg-panel);

    border-top: 1px solid var(--border);

    flex-shrink: 0;

    position: sticky;
    bottom: 0;

    z-index: 50;
}

.message-form {
    display: flex;
    align-items: center;

    gap: 10px;

    max-width: 1100px;

    margin: 0 auto;
}

#input-mensaje {
    flex: 1;

    min-width: 0;

    height: 48px;

    border: 1px solid var(--border);

    border-radius: 14px;

    padding: 0 17px;

    font-size: 0.96rem;

    outline: none;

    background: var(--bg-input);
    color: var(--text-main);

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

#input-mensaje::placeholder {
    color: var(--text-muted);
}

#input-mensaje:focus {
    border-color: var(--primary-color);

    box-shadow:
        0 0 0 3px rgba(175, 0, 161, 0.10);
}

#btn-enviar {
    width: 48px;
    height: 48px;

    flex: 0 0 48px;

    border: 0;
    border-radius: 14px;

    background: var(--primary-color);
    color: #ffffff;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    box-shadow:
        0 5px 15px rgba(175, 0, 161, 0.20);

    transition:
        background-color 0.2s ease,
        transform 0.15s ease,
        box-shadow 0.2s ease;
}

#btn-enviar:hover {
    background: var(--primary-hover-color);

    transform: translateY(-1px);

    box-shadow:
        0 7px 18px rgba(175, 0, 161, 0.27);
}

#btn-enviar:active {
    transform: translateY(0);
}

#btn-enviar:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

#btn-enviar:disabled,
#input-mensaje:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ============================================= */
/* == 16. BOTÓN MOSTRAR INPUT                == */
/* ============================================= */

.btn-toggle-chat-input {
    display: none;
}

/* ============================================= */
/* == 17. SCROLLBARS                         == */
/* ============================================= */

.conversations-list,
.chat-messages,
.invite-results {
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

.conversations-list::-webkit-scrollbar,
.chat-messages::-webkit-scrollbar,
.invite-results::-webkit-scrollbar {
    width: 7px;
}

.conversations-list::-webkit-scrollbar-track,
.chat-messages::-webkit-scrollbar-track,
.invite-results::-webkit-scrollbar-track {
    background: transparent;
}

.conversations-list::-webkit-scrollbar-thumb,
.chat-messages::-webkit-scrollbar-thumb,
.invite-results::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 999px;
}

/* ============================================= */
/* == 18. DESKTOP                            == */
/* ============================================= */

@media (min-width: 769px) {

    .btn-chat-back {
        display: none;
    }

}

/* ============================================= */
/* == 19. TABLET / MOBILE                    == */
/* ============================================= */

@media (max-width: 768px) {

    .chat-page {
    height: calc(100vh - 70px);
    min-height: 0;
    overflow: hidden;
    }   

    .chat-container {
    height: 100%;
    position: relative;
}

    /* ------------------------- */
    /* Sidebar                   */
    /* ------------------------- */

    .conversations-sidebar {
        position: absolute;

        inset: 0;

        width: 100%;
        flex: none;

        z-index: 20;

        transform: translateX(0);
    }

    .conversations-sidebar.oculto-movil {
        transform: translateX(-100%);
    }

    /* ------------------------- */
    /* Chat                      */
    /* ------------------------- */

    .chat-window {
        width: 100%;

        height: calc(100vh - 70px);

        z-index: 10;

        overflow: hidden;
    }

    .chat-header {
        min-height: 68px;
        height: 68px;

        padding: 0 12px;

        gap: 9px;
    }

    .chat-header-info h3 {
        font-size: 1rem;
    }

    .chat-status,
    .connection-status {
        font-size: 0.72rem;
    }

    .chat-header-actions {
        gap: 5px;
    }

    .btn-chat-back,
    .btn-chat-jump,
    .btn-chat-danger {
        width: 36px;
        height: 36px;

        border-radius: 10px;
    }

    /* ------------------------- */
    /* Tooltips mobile           */
    /* ------------------------- */

    .btn-chat-back::after,
    .btn-chat-jump::after,
    .btn-chat-danger::after {
        display: none;
    }

    /* ------------------------- */
    /* Messages                  */
    /* ------------------------- */

    .chat-messages {
        padding: 15px;

        padding-bottom: 95px;
    }

    .message,
    .message-bubble {
        max-width: 88%;
    }

    .message p,
    .message-bubble p {
        padding: 10px 13px;
        font-size: 0.92rem;
    }

    /* ------------------------- */
    /* Invitation                */
    /* ------------------------- */

    .chat-invitation-banner {
        align-items: flex-start;

        flex-direction: column;

        padding: 12px 14px;

        gap: 10px;
    }

    .chat-invitation-actions {
        width: 100%;
    }

    .btn-accept-invitation,
    .btn-decline-invitation {
        flex: 1;
    }

    /* ------------------------- */
    /* Input                    */
    /* ------------------------- */

    .chat-input-area {
        position: fixed;

        left: 0;
        right: 0;
        bottom: 0;

        z-index: 2300;

        padding: 9px 11px;

        background: var(--bg-panel);

        border-top: 1px solid var(--border);

        box-shadow:
            0 -7px 20px rgba(0, 0, 0, 0.08);

        transform: translateY(0);

        transition: transform 0.25s ease;
    }

    .chat-input-area.input-hidden {
        transform: translateY(calc(100% + 12px));
    }

    .message-form {
        max-width: none;

        padding: 5px;

        background: var(--bg-main);

        border: 1px solid var(--border);

        border-radius: 15px;

        gap: 6px;
    }

    #input-mensaje {
        height: 40px;

        border: 0;

        background: transparent;

        box-shadow: none;

        padding: 0 10px;
    }

    #input-mensaje:focus {
        border: 0;
        outline: none;
        box-shadow: none;
    }

    #btn-enviar {
        width: 40px;
        height: 40px;

        flex: 0 0 40px;

        border-radius: 11px;
    }

    /* ------------------------- */
    /* Toggle                   */
    /* ------------------------- */

    .btn-toggle-chat-input {
        position: fixed;

        right: 14px;
        bottom: 15px;

        z-index: 2350;

        width: 46px;
        height: 46px;

        border: 0;

        border-radius: 13px;

        background: var(--primary-color);
        color: #ffffff;

        align-items: center;
        justify-content: center;

        box-shadow:
            0 7px 20px rgba(175, 0, 161, 0.28);

        cursor: pointer;
    }

    .btn-toggle-chat-input.show-toggle {
        display: inline-flex;
    }

    .btn-toggle-chat-input:not(.show-toggle) {
        display: none;
    }

    .btn-toggle-chat-input:hover {
        background: var(--primary-hover-color);
    }

    .btn-toggle-chat-input:focus-visible {
        outline: 2px solid #ffffff;
        outline-offset: 2px;
    }

}

/* ============================================= */
/* == 20. TELEFONOS PEQUEÑOS                == */
/* ============================================= */

@media (max-width: 420px) {

    .sidebar-header {
        padding: 18px 14px 16px;
    }

    .sidebar-title-row h3 {
        font-size: 1.25rem;
    }

    .sidebar-title-row span {
        font-size: 0.78rem;
    }

    .chat-header {
        padding: 0 9px;
    }

    .chat-header-actions {
        gap: 3px;
    }

    .btn-chat-back,
    .btn-chat-jump,
    .btn-chat-danger {
        width: 34px;
        height: 34px;
    }

    .chat-messages {
        padding-left: 11px;
        padding-right: 11px;
    }

    .message,
    .message-bubble {
        max-width: 92%;
    }


    

}


/* ============================================= */
/* == FOOTER EN CHAT                           == */
/* ============================================= */

.chat-page ~ .site-footer {
    display: none;
}


/* =========================================================
   DROPDOWN DEL CHAT
   ========================================================= */

.chat-actions-dropdown-wrapper {
    position: relative;
}

.btn-chat-action {
    width: 40px;
    height: 40px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid var(--border, #e5e5e5);
    border-radius: 10px;

    background: var(--bg-panel, #fff);
    color: var(--text-main, #333);

    cursor: pointer;
}

.chat-actions-dropdown {
    position: absolute;

    top: calc(100% + 8px);
    right: 0;

    width: 205px;

    padding: 6px;

    display: none;

    background: var(--bg-panel, #fff);

    border: 1px solid var(--border, #e5e5e5);
    border-radius: 13px;

    box-shadow: 0 15px 40px rgba(0, 0, 0, .15);

    z-index: 5000;
}

.chat-actions-dropdown.open {
    display: block;
}

.chat-dropdown-item {
    width: 100%;

    min-height: 40px;

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 8px 10px;

    border: 0;
    border-radius: 9px;

    background: transparent;

    color: var(--text-main, #333);

    cursor: pointer;

    text-align: left;
}

.chat-dropdown-item:hover {
    background: var(--bg-main, #f5f5f5);
}

.chat-dropdown-item i {
    width: 18px;

    text-align: center;

    color: var(--text-muted, #888);
}

.chat-dropdown-item.danger,
.chat-dropdown-item.danger i {
    color: var(--error-color, #e74c3c);
}

.chat-dropdown-divider {
    height: 1px;

    margin: 5px 3px;

    background: var(--border, #e5e5e5);
}


/* =========================================================
   MOBILE — FIX DEL BOTÓN ENVIAR
   ========================================================= */

@media (max-width: 768px) {

    .chat-page {
        height: calc(100vh - 70px);
        height: calc(100dvh - 70px);

        overflow: hidden;
    }

    .chat-container {
        height: 100%;
        overflow: hidden;
    }

    .chat-window {
        height: 100%;
        min-height: 0;

        display: flex;
        flex-direction: column;

        overflow: hidden;
    }

    .chat-messages {
        flex: 1;

        min-height: 0;

        overflow-y: auto;
        overflow-x: hidden;

        padding-bottom: 10px;

        -webkit-overflow-scrolling: touch;
    }

    /*
     * IMPORTANTE:
     * El input ya NO queda fixed.
     * Forma parte del flex del chat.
     */
    .chat-input-area {
        position: relative;

        left: auto;
        right: auto;
        bottom: auto;

        width: 100%;

        flex: 0 0 auto;

        padding:
            7px
            8px
            calc(7px + env(safe-area-inset-bottom));

        z-index: 100;

        background: var(--bg-panel, #fff);

        border-top: 1px solid var(--border, #e5e5e5);
    }

    .message-form {
        width: 100%;

        display: flex;
        align-items: center;

        gap: 5px;
    }

    .chat-message-input,
    #input-mensaje {
        flex: 1;

        min-width: 0;

        height: 42px;

        /*
         * 16px evita zoom automático en iPhone.
         */
        font-size: 16px;

        padding: 0 11px;

        border-radius: 12px;
    }

    .chat-send-button,
    #btn-enviar {
        position: relative;

        width: 42px;
        min-width: 42px;
        height: 42px;

        flex: 0 0 42px;

        display: flex;
        align-items: center;
        justify-content: center;

        padding: 0;

        border: 0;
        border-radius: 12px;

        z-index: 10;

        cursor: pointer;

        touch-action: manipulation;

        pointer-events: auto;
    }

    .chat-send-button i,
    #btn-enviar i {
        pointer-events: none;
    }

    /*
     * Evita que algún elemento antiguo tape el botón.
     */
    .chat-input-area *,
    .message-form {
        pointer-events: auto;
    }

    .chat-input-area .chat-send-button,
    .chat-input-area #btn-enviar {
        pointer-events: auto !important;
    }


    /* Dropdown en móvil */

    .chat-actions-dropdown {
        right: 0;
        width: 190px;

        z-index: 9999;
    }
}


/* =========================================================
   BORRAR MENSAJE — ICONO
   ========================================================= */

.message-delete-btn {
    width: 28px;
    height: 28px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 0;
    border-radius: 8px;

    background: rgba(0, 0, 0, .08);

    color: var(--text-muted, #777);

    cursor: pointer;
}

.message-delete-btn:hover {
    color: var(--error-color, #e74c3c);
    background: rgba(231, 76, 60, .12);
}


/* =========================================================
   MOBILE: ELIMINAR CHAT YA NO QUEDA AFUERA
   ========================================================= */

@media (max-width: 768px) {

    .btn-chat-danger {
        display: none !important;
    }

}

/* =========================================================
   MENÚ DE MENSAJE
   ========================================================= */

.message {
    position: relative;
    cursor: pointer;
}

.message-bubble {
    position: relative;
    cursor: pointer;
}

/* Menú que aparece al tocar el mensaje */
.message-context-menu {
    position: absolute;

    top: calc(100% + 6px);

    min-width: 155px;

    padding: 5px;

    display: none;

    background: var(--bg-panel, #fff);

    border: 1px solid var(--border, #e5e5e5);

    border-radius: 12px;

    box-shadow:
        0 12px 35px rgba(0, 0, 0, .16);

    z-index: 5000;
}

.message-context-menu.open {
    display: block;
}

.message.sent .message-context-menu,
.message-bubble.sent .message-context-menu {
    right: 0;
}

.message.received .message-context-menu,
.message-bubble.received .message-context-menu {
    left: 0;
}


/* Opciones */

.message-context-option {
    width: 100%;

    min-height: 37px;

    display: flex;
    align-items: center;

    gap: 9px;

    padding: 8px 10px;

    border: 0;
    border-radius: 8px;

    background: transparent;

    color: var(--text-main, #333);

    font-size: .78rem;
    font-weight: 600;

    text-align: left;

    cursor: pointer;
}

.message-context-option:hover {
    background: var(--bg-main, #f5f5f5);
}

.message-context-option i {
    width: 17px;

    color: var(--text-muted, #888);

    text-align: center;
}

.message-context-option.danger {
    color: var(--error-color, #e74c3c);
}

.message-context-option.danger i {
    color: var(--error-color, #e74c3c);
}


/* =========================================================
   BOTONES DEL HEADER — MÁS LIMPIOS
   ========================================================= */

.btn-chat-action,
.btn-chat-back {
    width: 36px;
    height: 36px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 0;

    border-radius: 50%;

    background: transparent;

    color: var(--text-muted, #777);

    cursor: pointer;

    transition:
        background-color .18s ease,
        color .18s ease;
}

.btn-chat-action:hover,
.btn-chat-back:hover {
    background: var(--bg-main, #f3f3f3);

    color: var(--text-main, #333);

    transform: none;
}


/* =========================================================
   DROPDOWN DEL HEADER — MÁS ELEGANTE
   ========================================================= */

.chat-actions-dropdown {
    width: 190px;

    padding: 6px;

    border-radius: 14px;

    box-shadow:
        0 14px 35px rgba(0, 0, 0, .14);
}

.chat-dropdown-item {
    min-height: 38px;

    padding: 8px 10px;

    border-radius: 9px;

    font-size: .79rem;
    font-weight: 600;
}

.chat-dropdown-item i {
    font-size: .78rem;
}

.chat-dropdown-divider {
    margin: 5px 6px;
}


/* =========================================================
   INPUT — MÁS LIMPIO
   ========================================================= */

.chat-input-area {
    padding-top: 9px;
    padding-bottom: 9px;
}

.message-form {
    border-radius: 15px;
}

#btn-enviar {
    border-radius: 50%;
}

.input-extra-button {
    border-radius: 50%;
}