/* =========================================
   NUEVO MOTOR VISUAL CHAT NEXO (UNIFICADO)
========================================= */

/* Fondo oscuro borroso detrás del chat */
.chat-nexo-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    z-index: 99999; /* Blindaje contra botones flotantes */
    display: flex;
    justify-content: center;
    align-items: center; /* En PC se centra por defecto */
}

/* La caja principal del chat */
.chat-nexo-caja {
    background: var(--color-fondo);
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100dvh; /* Usa la altura real del celular */
    overflow: hidden;
}

/* --- REGLAS EXCLUSIVAS PARA PC --- */
@media (min-width: 1024px) {
    .chat-nexo-caja {
        width: 90%;
        max-width: 450px;
        height: 85vh;
        max-height: 800px;
        border-radius: 20px;
        border: 1px solid var(--color-borde);
        box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    }
}

/* Cabecera */
.chat-nexo-header {
    background: var(--color-tarjeta);
    border-bottom: 1px solid var(--color-borde);
    padding: calc(15px + env(safe-area-inset-top)) 15px 15px 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0; /* Nunca se aplasta */
}

.chat-nexo-btn-volver { background: none; border: none; color: var(--color-texto); font-size: 38px; cursor: pointer; padding: 0 5px; line-height: 0.8; }
.chat-nexo-avatar-espia { width: 40px; height: 40px; background: var(--color-hover); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.chat-nexo-info-titulos { flex-grow: 1; overflow: hidden; display: flex; flex-direction: column; gap: 2px; }
.chat-nexo-titulo { margin: 0; font-size: 15px; color: var(--color-texto); display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.chat-nexo-estado { font-size: 11px; color: #10b981; font-weight: bold; display: none; }
.chat-nexo-subtitulo { font-size: 11px; color: var(--color-texto-sec); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-nexo-miniatura { width: 42px; height: 42px; border-radius: 8px; overflow: hidden; display: none; cursor: pointer; border: 1px solid var(--color-borde); flex-shrink: 0; }
.chat-nexo-miniatura img { width: 100%; height: 100%; object-fit: cover; }

/* Cuerpo (Los mensajes) */
.chat-nexo-body {
    flex-grow: 1;
    background: var(--color-fondo);
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    min-height: 0; /* FIX: Evita el bug de colapso infinito de Flexbox */
}

/* Footer (Donde escribís y apretás botones) */
.chat-nexo-footer {
    background: var(--color-tarjeta);
    border-top: 1px solid var(--color-borde);
    padding: 12px 15px calc(12px + env(safe-area-inset-bottom)) 15px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Botoneras dinámicas de negociación */
.chat-nexo-opciones:empty { display: none; }
.chat-nexo-opciones {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    max-height: 180px;
    overflow-y: auto;
}

/* Input y fila de escritura */
.chat-nexo-input-row { display: flex; width: 100%; align-items: center; gap: 10px; flex-shrink: 0; }
.chat-textarea { flex-grow: 1; background: var(--color-fondo); color: var(--color-texto); border: 1px solid var(--color-borde); border-radius: 20px; padding: 10px 15px; font-size: 14px; resize: none; min-height: 42px; max-height: 100px; font-family: 'Inter', sans-serif; }
.chat-textarea:focus { outline: none; border-color: #8b5cf6; }
.chat-btn-accion { width: 42px; height: 42px; border-radius: 50%; border: none; color: white; display: flex; align-items: center; justify-content: center; font-size: 18px; cursor: pointer; flex-shrink: 0; transition: 0.2s; }
.chat-btn-accion.azul { background: #3b82f6; }
.chat-btn-accion.morado { background: #8b5cf6; }
.chat-btn-accion:active { transform: scale(0.95); }

/* =========================================
   DISEÑO PREMIUM CHAT NEXO (ESTILO APP NATIVA)
========================================= */

/* 1. Forzamos el fondo oscuro para matar el blanco del HTML viejo */
#modal-chat-ciego .modal-contenido,
#chat-ciego-mensajes {
    background: var(--color-fondo) !important;
}

/* 2. Animación de entrada fluida (Navegación tipo App) */
@keyframes slideInChat {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
}

#modal-chat-ciego {
    animation: slideInChat 0.25s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* 3. Burbujas estilo App moderna (Referencia Foto 1) */
.chat-burbuja {
    padding: 12px 16px !important;
    border-radius: 20px !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    max-width: 75% !important;
    position: relative !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
}

.chat-burbuja.mia {
    background: #0f172a !important; /* Azul/Gris muy oscuro como en tu foto */
    color: #ffffff !important;
    border: none !important;
    border-bottom-right-radius: 4px !important; /* El efecto de la "colita" */
}

.chat-burbuja.otra {
    background: var(--color-tarjeta) !important;
    color: var(--color-texto) !important;
    border: 1px solid var(--color-borde) !important;
    border-bottom-left-radius: 4px !important;
}

/* 4. Ajuste de la lista de chats para que quede limpia (Referencia Foto 2) */
.chat-row {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--color-borde) !important;
    border-radius: 0 !important;
    padding: 12px 5px !important;
    margin-bottom: 0 !important;
    box-shadow: none !important;
}

.chat-row:last-child {
    border-bottom: none !important;
}

.chat-row:hover {
    background: rgba(255,255,255,0.02) !important; /* Efecto sutil al tocar */
}