/* /chat_interface.css */

/* Variables (ajustadas de tus otros archivos) */
:root {
    --custom-primary-teal: #61bdb0;
    --custom-primary-teal-dark: #4aa597;
    --custom-primary-teal-light: #7accc0;
    --custom-brand-purple: #684A7A;
    --custom-brand-purple-pale: #EAE5EE;
    --bs-light-rgb: 248, 249, 250;
    --bs-white: #fff;
    --bs-dark-rgb: 52, 58, 64;
}

/* 1. Contenedor principal del chat */
.chat-app {
    display: flex;

    /* --- ★ INICIO DE LA MODIFICACIÓN DE ALTURA ★ --- */
    /* * Altura base = 100% del viewport MENOS:
     * 72px (header principal - style.css)
     * 24px (margen superior .main-content (mt-4))
     * 74px (footer + enlaces legales - footer.php)
     * = 170px.
    */
    height: calc(100vh - 170px);
    /* --- FIN DE LA MODIFICACIÓN DE ALTURA ★ --- */

    min-height: 500px; /* Altura mínima */
    overflow: hidden;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    background: var(--bs-white);
}

/* 2. Barra lateral (Lista de conversaciones) */
.chat-sidebar {
    /* <<< CAMBIO: Ancho fijo y evitar que se encoja >>> */
    width: 300px;        /* Ancho fijo deseado */
    flex-shrink: 0;      /* No permitir que se encoja */
    /* ============================================== */
    border-right: 1px solid #dee2e6;
    display: flex;
    flex-direction: column;
    background-color: var(--bs-white);
    /* <<< CAMBIO: Altura para ocupar todo el .chat-app >>> */
    height: 100%;
    /* ================================================ */
}


.chat-sidebar-header {
    padding: 1rem;
    border-bottom: 1px solid #dee2e6;
    background-color: rgb(var(--bs-light-rgb));
    flex-shrink: 0; /* <<< CAMBIO: Evitar que el header se encoja */
}
.chat-sidebar-header .form-control,
#contactSearchInput {
    font-size: 0.9rem;
    border-radius: 1.5rem !important;
}

.chat-sidebar-content, /* <<< CAMBIO: .chat-sidebar-content puede no existir, aplicamos a la lista */
.chat-contacts-list {
    flex-grow: 1;
    overflow-y: auto;
    padding: 0;
    margin: 0;
    list-style: none;
}

/* Estilo para items de conversación (Paciente y Fisio) */
.conversation-item,
.chat-contact {
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    /* <<< CAMBIO: Evitar que el item se desborde si algo interno empuja */
    overflow: hidden;
    /* ============================================================= */
}
.conversation-item:last-child,
.chat-contact:last-child {
    border-bottom: none;
}

.conversation-item:hover,
.chat-contact:hover {
    background-color: #f8f9fa;
}

.conversation-item.active,
.chat-contact.active {
    background-color: var(--custom-brand-purple-pale) !important;
    color: var(--custom-brand-purple) !important;
    font-weight: bold;
}

.contact-info {
    flex-grow: 1; /* Permite que ocupe el espacio restante */
    /* <<< CAMBIO: Ocultar desbordamiento y min-width para truncado >>> */
    overflow: hidden;    /* Oculta cualquier contenido que se desborde */
    min-width: 0;        /* Necesario para truncado en flexbox */
    /* ============================================================ */
    margin-right: 10px; /* Separación antes de badges/botones */
}

.contact-info strong {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.contact-info .last-message,
.contact-info .text-muted { /* Aplicamos a ambos selectores por si acaso */
    font-size: 0.85rem;
    /* <<< CAMBIO: Truncado de texto >>> */
    white-space: nowrap;        /* No saltar línea */
    overflow: hidden;           /* Ocultar exceso */
    text-overflow: ellipsis;    /* Poner puntos suspensivos */
    /* ============================== */
    display: block; /* Asegurar que sea bloque para text-overflow */
    font-weight: normal; /* Mantener normal aunque el item esté activo */
}
.conversation-item.active .last-message,
.chat-contact.active .text-muted {
     color: var(--custom-brand-purple) !important;
     opacity: 0.8;
}

.unread-badge,
.chat-contact .badge {
    font-size: 0.7em;
    padding: 0.3em 0.6em;
    flex-shrink: 0; /* Evitar que el badge se encoja */
}

.initial-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--custom-brand-purple);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    flex-shrink: 0;
    font-size: 0.9rem;
    margin-right: 0.75rem; /* <<< CAMBIO: Añadido margen derecho */
}

/* 3. Ventana principal del chat */
.chat-main {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    background-color: #f8f9fa;
    /* <<< CAMBIO: Evitar que contenido interno empuje la sidebar >>> */
    min-width: 0;
    /* ======================================================== */
    height: 100%; /* <<< CAMBIO: Ocupar toda la altura del .chat-app */
}


.chat-header {
    padding: 1rem;
    border-bottom: 1px solid #dee2e6;
    background-color: var(--custom-brand-purple-pale);
    color: var(--custom-brand-purple);
    font-weight: 500;
    flex-shrink: 0; /* <<< CAMBIO: Evitar que el header se encoja */
}
.chat-header h5,
.chat-header strong {
    margin-bottom: 0;
    color: var(--custom-brand-purple);
}

.chat-body,
.chat-history {
    flex-grow: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
}

/* Pantalla de bienvenida (Fisio) */
.no-chat-selected {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    color: #6c757d;
}
.no-chat-selected i {
    font-size: 4rem;
}


/* 4. Burbujas de Mensajes */
.message {
    display: flex;
    flex-direction: column;
    margin-bottom: 0.75rem;
    max-width: 75%;
}

.message-body {
    padding: 0.6rem 1rem;
    border-radius: 1.25rem;
    word-wrap: break-word; /* Romper palabras largas si es necesario */
    background-color: var(--bs-white);
    border: 1px solid #eee;
    color: #212529;
}
.message-body p {
    margin-bottom: 0;
}

.message-meta {
    font-size: 0.75rem;
    color: #6c757d;
    margin-top: 0.2rem;
    display: flex;
    align-items: center;
}

/* Mensajes enviados */
.message-sent {
    align-self: flex-end;
    align-items: flex-end;
}
.message-sent .message-body {
    background-color: var(--custom-primary-teal-light);
    color: #fff;
    border: none;
    border-bottom-right-radius: 0.5rem;
}
.message-sent .message-meta {
    justify-content: flex-end;
}
.message-sent .timestamp {
    margin-right: 0.3rem;
}


/* Mensajes recibidos */
.message-received {
    align-self: flex-start;
    align-items: flex-start;
}
.message-received .message-body {
    background-color: var(--bs-white);
    border-bottom-left-radius: 0.5rem;
}
.message-received .timestamp {
    margin-left: 0.3rem;
}

/* Iconos de Ticks */
.status-icon,
.ticks {
    font-size: 1.1em;
    line-height: 1;
}
.ticks-delivered i, .status-icon .bi-check2-all { color: #6c757d; }
.ticks-read i, .status-icon .bi-check2-all.text-primary { color: #0d6efd !important; }
.ticks-sent i, .status-icon .bi-check2 { color: #6c757d; }
.status-icon .bi-exclamation-triangle-fill { color: #dc3545; }

/* 5. Pie de página (input de mensaje) */
.chat-footer,
.chat-input-area {
    padding: 0.75rem 1rem;
    border-top: 1px solid #dee2e6;
    background-color: rgb(var(--bs-light-rgb));
    flex-shrink: 0; /* <<< CAMBIO: Evitar que el footer se encoja */
}


#message-form,
#sendMessageFormFisio {
    display: flex;
}

#message-input,
#chat-message-input {
    flex-grow: 1;
    border-radius: 1.5rem;
    padding: 0.5rem 1rem;
}

#message-form button,
#sendMessageBtnFisio {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-left: 0.5rem;
}

/* Mensajes de error */
.message-error .message-body {
    background-color: #f8d7da;
    color: #721c24;
    border-color: #f5c6cb;
}

/* 4. Burbujas de Mensajes - Estilos para imágenes */

/* Contenedor del enlace que envuelve la imagen */
.chat-image-link {
    display: inline-block;
    max-width: 100%;
    /* Ajusta para que la imagen ocupe todo el espacio del message-body sin padding */
    margin: 0;
    line-height: 0;
    /* [NUEVO] Necesario para posicionar el botón de borrado */
    position: relative;
    /* [NUEVO] Asegurar que la redondez se aplica al contenedor */
    overflow: hidden;
    border-radius: 1.25rem;
}

/* Imagen en sí */
.chat-image-preview {
    max-width: 100%;
    height: auto;
    max-height: 250px; /* Limitar la altura para que el chat no se estire demasiado */
    display: block;
    cursor: pointer;
    object-fit: contain;
    /* [MODIFICADO] La redondez la maneja el <a> (chat-image-link) */
    /* border-radius: 1.25rem; */
}

/* Modificación del message-body cuando contiene una imagen */
.message-body:has(.chat-image-link) {
     padding: 0;
     /* Ajustar color de fondo para que el message-body no se vea si la imagen lo reemplaza */
     background-color: transparent !important;
     border: none !important;
}

/* Ajuste fino para la imagen dentro de burbujas enviadas */
.message-sent .chat-image-link .chat-image-preview {
     /* Quitar el borde si se quiere un look más limpio */
     border: none;
}
/* Aseguramos la redondez de la imagen misma si la burbuja tiene color */
.message-sent .message-body:has(.chat-image-link) {
     /* Opcional: Asegurar que el mensaje enviado de imagen tenga un fondo transparente si es necesario */
     background-color: transparent;
}


/* [NUEVO] Estilos para el botón de eliminar imagen */
.delete-image-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 10;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    padding: 0;
    font-size: 0.9rem;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    opacity: 0; /* Oculto por defecto */
    transition: opacity 0.2s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* [NUEVO] Mostrar al pasar el ratón por el *mensaje* (no solo el link) */
/* Se aplica solo a mensajes enviados que contienen el link de imagen */
.message-sent:hover .chat-image-link .delete-image-btn {
    opacity: 1;
}

.delete-image-btn:hover {
    background-color: rgba(220, 53, 69, 0.8); /* Rojo (danger) al pasar el ratón */
    color: white;
}

/* --- ARREGLO RESPONSIVE PARA CHAT EN MÓVIL (Versión Corregida) --- */

/* * Por defecto (en escritorio), ocultamos el botón de 'Volver'
 * que solo usaremos en móvil.
 */
.chat-header .back-to-list-btn {
    display: none;
}


/* * Aplicamos estos estilos SÓLO en pantallas pequeñas (768px o menos)
 */
@media (max-width: 768px) {

    /* * Hacemos que la app de chat ocupe toda la altura disponible
     * y quitamos la altura fija de escritorio.
     */
    .chat-app {
        height: 100%;
        min-height: none;
        /* Aseguramos que ocupe el espacio vertical que le deje la página */
        flex-grow: 1;
    }

    /* * 1. Hacemos que la lista (.chat-sidebar) ocupe el 100%
     * y que la conversación (.chat-main) se oculte.
     */
    .chat-app .chat-sidebar {
        display: flex; /* Aseguramos que se vea */
        width: 100% !important;
        max-width: 100%;
        border-right: none;
        height: 100%;
    }

    .chat-app .chat-main {
        display: none; /* Ocultamos la conversación por defecto */
        width: 100% !important;
        max-width: 100%;
        height: 100%;
    }

    /* * 2. Creamos una clase 'modo-conversacion' que se activará con JS.
     * Cuando el contenedor .chat-app tenga esta clase, invertimos la visibilidad.
     */
    .chat-app.modo-conversacion .chat-sidebar {
        display: none; /* Ocultamos la lista */
    }

    .chat-app.modo-conversacion .chat-main {
        display: flex; /* Mostramos la conversación (es flex por su CSS original) */
    }

    /* * 3. Mostramos el botón 'Volver' que está dentro de .chat-header
     */
    .chat-header .back-to-list-btn {
        display: inline-block;
        margin-right: 10px;
        font-size: 1.5rem;
        cursor: pointer;
    }

    /* * 4. Arreglos de la interfaz que se ve en la captura
     */

    /* La barra de suplantación (es una suposición, puede llamarse diferente) */
    .suplantar-alert {
        font-size: 0.8rem;
        padding: 8px;
        text-align: center;
        line-height: 1.2;
    }
}

/* --- ★ INICIO: NUEVO BLOQUE PARA SUPLANTACIÓN ★ --- */
/*
 * Esto se aplica cuando el body tiene el tag data-impersonating="true"
 * (que lo añade header_patient.php)
*/
body[data-impersonating="true"] .chat-app {
    /* Altura base (170px) + 50px de la barra de suplantación */
    height: calc(100vh - 220px);
}
