/*
 * Archivo: css/movil-style.css
 * Descripción: Estilos DEFINITIVOS para la vista móvil (estilo WhatsApp).
 * Integrado con chat-style.css v3.4
 */

/* ======================================================= */
/* --- Estilos para dispositivos móviles (hasta 768px) --- */
/* ======================================================= */
@media (max-width: 768px) {

    /* 1. Visibilidad y Layout */
    /* --------------------------------------------------- */

    /* Oculta elementos que no se deben ver en móvil */
    .hidden,
    .nav-bar {
        display: none !important;
    }

    /* Resetea propiedades que pueden causar conflictos */
    .conversation-footer,
    .conversation-footer *,
    .message-input-container,
    .message-input-container * {
        transform: none !important;
        margin: 0 !important;
        /*
         * Nota: Las propiedades 'position' y 'padding' se han eliminado de este reset global
         * para permitir que los estilos específicos del nuevo footer de conversación (Ventana 1)
         * se apliquen correctamente y habiliten la funcionalidad del menú de adjuntos.
         */
    }

    /* Contenedor principal para la vista móvil */
    .app-container {
        flex-direction: column;
        overflow: hidden;
    }

    /* Contenedor de contenido principal a pantalla completa */
    .main-content {
        width: 100vw;
        height: 100vh;
        position: relative;
        overflow: hidden;
    }

    /* 2. Lógica de Paneles */
    /* --------------------------------------------------- */

    /* Paneles de chat y conversación por defecto ocultos */
    .chat-list-panel,
    .conversation-panel {
        display: none;
        width: 100vw;
        height: 100vh;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 100;
        background-color: var(--bg-color);
    }

    /* Muestra el panel activo en móvil */
    .visible-mobile {
        display: flex !important;
        flex-direction: column !important;
    }

    /* 3. Estilos del Panel de Lista de Chats */
    /* --------------------------------------------------- */

    .chat-list-header {
        background-color: #075E54;
        color: white;
        padding: 15px;
        flex-shrink: 0;
    }

    /* 4. Estilos del Panel de Conversación */
    /* --------------------------------------------------- */

    .conversation-panel.visible-mobile {
        position: relative !important;
        height: 100vh !important;
        width: 100vw !important;
    }

    /* Encabezado de la conversación */
    .conversation-panel .conversation-header {
        background-color: #075E54 !important;
        color: white !important;
        padding: 15px !important;
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
        border-bottom: none !important;
        position: relative !important;
        z-index: 101 !important;
    }

    .conversation-header .header-info h5,
    .conversation-header .header-icons {
        color: white !important;
    }

    .conversation-header .header-info p {
        color: rgba(255, 255, 255, 0.8) !important;
    }

    /* Botón de regreso */
    .back-button {
        display: flex !important;
        align-items: center !important;
        color: white !important;
        background: none !important;
        border: none !important;
        font-size: 24px !important;
        cursor: pointer !important;
        padding: 0 15px 0 0 !important;
        margin-right: 10px !important;
    }

    /* Área de mensajes con espacio para el footer */
    .conversation-panel.visible-mobile .message-area {
        flex: 1 !important;
        overflow-y: auto !important;
        padding: 15px !important;
        padding-bottom: 80px !important;
        background-color: #e5ddd5 !important;
        position: relative !important;
        z-index: 1 !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Ocultar la barra de desplazamiento en el área de mensajes */
    .message-area::-webkit-scrollbar {
        display: none !important;
    }

    /* 5. Footer de la Conversación */
    /* --------------------------------------------------- */
    /* ======================================================= */
    /* --- 5. Footer de la Conversación (Versión Mejorada) --- */
    /* ======================================================= */
    .conversation-footer {
        position: relative; /* Para el menú de adjuntos */
        background-color: var(--panel-color);
        padding: 8px;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        align-items: flex-end;
    }

    .message-input-wrapper {
        display: flex;
        align-items: flex-end;
        width: 100%;
        gap: 8px;
    }

    .message-input-container {
        display: flex;
        align-items: flex-end;
        flex-grow: 1;
        background-color: var(--input-bg-color);
        border-radius: 24px;
        padding: 4px 8px;
    }

    .message-input {
        flex-grow: 1;
        border: none;
        background: transparent;
        color: var(--text-color);
        font-size: 16px;
        padding: 10px 0;
        line-height: 1.4;
        resize: none;
        max-height: 120px;
        overflow-y: auto;
        white-space: pre-wrap;
        word-wrap: break-word;
        scrollbar-width: none;
        min-height: 20px;
        outline: none;
    }

    .message-input::-webkit-scrollbar {
        display: none;
    }

    .message-input:empty::before {
        content: attr(placeholder);
        color: var(--text-secondary-color);
        pointer-events: none;
        display: block;
    }

    .icon-btn {
        background: none;
        border: none;
        color: var(--text-secondary-color);
        cursor: pointer;
        padding: 8px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background-color 0.2s;
        flex-shrink: 0;
    }

    .icon-btn:hover {
        background-color: var(--button-secondary-hover);
    }

    .attachment-btn {
        color: var(--text-secondary-color);
    }

    .emoji-btn {
        color: var(--text-secondary-color);
    }

    .voice-send-btn {
        background-color: var(--accent-color);
        color: var(--accent-text-color);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        width: 50px;
        height: 50px;
        border-radius: 50%;
    }

    .voice-send-btn .material-icons {
        font-size: 24px;
    }

    /* --- Estilos para la barra de adjuntos --- */
    .attachment-menu {
        position: absolute;
        bottom: 60px; /* Ajusta la posición para que esté encima del input */
        left: 8px;
        right: 8px;
        background-color: var(--panel-secondary-color);
        border-radius: 12px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        z-index: 50;
        opacity: 0;
        transform: translateY(10px) scale(0.98);
        pointer-events: none;
        transition: opacity 0.2s ease-out, transform 0.2s ease-out;
        padding: 10px;
    }

    .attachment-menu.visible {
        opacity: 1;
        transform: translateY(0) scale(1);
        pointer-events: auto;
    }

    .attachment-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 15px;
        text-align: center;
    }

    .attachment-item {
        cursor: pointer;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
        color: var(--text-secondary-color);
        font-size: 12px;
    }

    .attachment-item i {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 5px;
        transition: transform 0.2s;
        color: white;
        font-size: 24px;
    }

    /* Asegurar que el footer sea interactivo */
    .conversation-panel.visible-mobile .conversation-footer,
    .conversation-panel.visible-mobile .conversation-footer * {
        pointer-events: auto !important;
        touch-action: auto !important;
        user-select: auto !important;
    }

    /* 6. Mensajes Estilo WhatsApp */
    /* --------------------------------------------------- */

    .mensaje {
        max-width: 85% !important;
        margin-bottom: 8px !important;
        word-wrap: break-word !important;
        font-size: 14px !important;
    }

    .mensaje.recibido {
        background-color: white !important;
        color: #000 !important;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    }

    .mensaje.enviado {
        background-color: #dcf8c6 !important;
        color: #000 !important;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    }

    /* 7. Navegación Inferior y Botón Flotante (FAB) */
    /* --------------------------------------------------- */

    .bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 60px;
        background-color: var(--panel-color);
        border-top: 1px solid var(--border-color);
        display: flex;
        justify-content: space-around;
        align-items: center;
        z-index: 1000;
    }

    .nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        color: var(--text-secondary-color);
        font-size: 0.7rem;
        gap: 4px;
        cursor: pointer;
        padding: 8px;
    }

    .nav-item.active {
        color: #25D366;
    }

    .nav-item .material-icons {
        font-size: 22px;
    }

    .fab {
        position: fixed;
        bottom: 80px;
        right: 20px;
        width: 56px;
        height: 56px;
        background-color: #25D366;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 24px;
        box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
        cursor: pointer;
        z-index: 1001;
        border: none;
        transition: transform 0.2s ease;
    }

    .fab:hover {
        transform: scale(1.05);
    }

    /* 8. Modales y Elementos Desplegables */
    /* --------------------------------------------------- */

    /* Ocultar completamente elementos de archivo y modales por defecto */
    .conversation-footer input[type="file"],
    .conversation-footer input[type="file"]+label,
    .conversation-footer .file-upload,
    .conversation-footer .file-input-wrapper,
    input[type="file"],
    input[type="file"]+*,
    .modal,
    .attachment-modal,
    .emoji-picker,
    .sticker-picker,
    .sticker-panel,
    /* .attachment-menu, */ /* Eliminado para permitir que la lógica de visibilidad de la Ventana 1 lo controle. */
    #attachment-modal,
    [id*="modal"],
    [class*="modal"]:not(.modal-backdrop),
    .modal-backdrop,
    div[style*="position: fixed"],
    div[style*="position: absolute"][style*="z-index"] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        position: absolute !important;
        left: -9999px !important;
        top: -9999px !important;
        width: 0 !important;
        height: 0 !important;
        z-index: -999 !important;
    }

    /* Muestra modales solo cuando tienen la clase 'show' o 'visible' */
    .modal.show,
    .modal.active,
    .modal.visible,
    .attachment-modal.show.user-activated,
    .modal-backdrop.visible.user-activated {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        z-index: 2000 !important;
    }

    /* Ajustes específicos para modales */
    .modal-backdrop {
        z-index: 2000 !important;
    }

    .modal-generic,
    .modal-panel-view,
    .preview-modal {
        width: 95% !important;
        max-width: 400px !important;
        max-height: 85vh !important;
    }

    .preview-modal .modal-body {
        min-height: 200px;
        max-height: 60vh;
        overflow-y: auto;
    }

    /* --- INSERCIÓN DEL CÓDIGO ACTUALIZADO --- */
    .preview-modal .modal-footer {
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 10px 15px !important;
    }

    .preview-modal .modal-footer .message-input {
        width: 100% !important;
        margin-bottom: 5px !important;
    }

    .preview-buttons-container {
        display: flex;
        width: 100%;
        gap: 10px;
        justify-content: flex-end; /* Para que los botones se peguen al lado derecho */
    }

    .preview-modal .modal-footer .modal-btn.cancel,
    .preview-modal .modal-footer .modal-btn.send {
        flex-grow: 1; /* Para que los botones ocupen el mismo espacio */
        padding: 10px !important;
        text-align: center;
        border-radius: 20px !important;
    }
    /* --- FIN DE LA INSERCIÓN DEL CÓDIGO ACTUALIZADO --- */

    /* Paneles desplegables sobre el footer */
    .sticker-panel { /* .attachment-menu eliminado de este selector */
        bottom: 70px !important;
        left: 10px !important;
        right: 10px !important;
        max-height: 300px !important;
        overflow-y: auto !important;
    }
    /*
     * Nota: El selector '.attachment-menu' ha sido separado de este bloque
     * para permitir que los estilos de posicionamiento del nuevo footer (Ventana 1)
     * se apliquen sin conflictos y con los valores deseados (ej. bottom: 60px).
     */

    /* 9. Búsqueda y Elementos de UI Ocultos */
    /* --------------------------------------------------- */

    /* Posiciona la barra de búsqueda dentro del chat */
    #in-chat-search-bar.visible {
        position: sticky !important;
        top: 0 !important;
        z-index: 101 !important;
    }

    /* Oculta el botón de menú y su contenedor */
    #menu-toggle-button,
    .menu-container .dropdown-menu {
        display: none !important;
    }

    /* 10. Compatibilidad con Temas */
    /* --------------------------------------------------- */

    /* Tema Claro */
    body.light-theme .conversation-footer {
        background-color: #f0f0f0 !important;
        border-top-color: #d1d7db !important;
    }
    body.light-theme .conversation-footer .message-input,
    body.light-theme .conversation-footer .message-input-container {
        background-color: white !important;
        border-color: #ddd !important;
        color: #000 !important;
    }
    body.light-theme .message-area {
        background-color: #e5ddd5 !important;
    }

    /* Tema Oscuro */
    body.dark-theme .conversation-footer {
        background-color: #2a2f32 !important;
        border-top-color: #3e4245 !important;
    }
    body.dark-theme .conversation-footer .message-input-container {
        background-color: #3e4245 !important;
        border-color: #5a5f63 !important;
    }
    body.dark-theme .conversation-footer .message-input,
    body.dark-theme .conversation-footer .message-input::placeholder {
        color: white !important;
    }
    body.dark-theme .message-area {
        background-color: #0b141a !important;
    }
    body.dark-theme .mensaje.recibido {
        background-color: #262d31 !important;
        color: #e9edef !important;
    }
    body.dark-theme .mensaje.enviado {
        background-color: #005c4b !important;
        color: #e9edef !important;
    }
}