/* static/css/chat.css - Versión Tema Oscuro/Azul (MEJORADA) */

/* --- Variables (Copiar de style.css si no las tienes aquí) --- */
/* Asegúrate de tener las variables de color aquí o impórtalas si usas preprocesadores */
:root {
    --primary-blue: #4d94ff;
    --secondary-blue: #1a73e8;
    --dark-blue-bg: rgba(20, 30, 48, 0.95);
    --darker-blue-bg: #1a2a44;
    --deep-blue-bg: #0d1b2a;
    --light-blue-text: #b3ccff;
    --primary-text-color: #e6f0ff;
    --muted-text-color: #99b3ff;
    --accent-glow: rgba(77, 148, 255, 0.5);
    --border-radius-md: 0.5rem;
    --border-radius-lg: 0.8rem;
}

/* --- Contenedor Principal (Fijo) --- */
#chat-container {
    position: fixed;
    /* Mantiene el elemento fijo en la ventana */
    bottom: 30px;
    /* Ajustar distancia desde abajo */
    right: 30px;
    /* Ajustar distancia desde la derecha */
    z-index: 1050;
    /* Alto z-index para estar sobre otros elementos (ej. navbar fija) */
}

/* --- Botón Flotante (Toggle) --- */
#chat-toggle-button {
    /* -- Mantenemos Tamaño, Forma y Posicionamiento -- */
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    position: relative;
    z-index: 1051;
    padding: 0;
    background: transparent;

    /* -- QUITAMOS LA SOMBRA DE AQUÍ -- */
    /* box-shadow: 0 6px 18px rgba(0, 71, 171, 0.6); */
    /* <-- ELIMINADA */

    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    /* La transición de la sombra ya no es necesaria aquí */
}

/* --- Estilo para la IMAGEN dentro del botón --- */
#chat-toggle-button img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;

    /* --- ¡EL NUEVO RESPLANDOR! --- */
    /* drop-shadow(x y blur color) */
    filter: drop-shadow(0 0 10px rgba(75, 255, 150, 0.7));
    /* Un verde brillante */

    transition: transform 0.3s ease-out, filter 0.3s ease-out;
}

/* --- Mantenemos los EFECTOS en el botón contenedor --- */
#chat-toggle-button:hover {
    transform: scale(1.1) translateY(-3px);
    /* El box-shadow se quita de aquí */
}

#chat-toggle-button:hover img {
    filter: drop-shadow(0 0 18px rgba(120, 255, 180, 0.9));
    /* Más grande y brillante */
}

#chat-toggle-button:active {
    transform: scale(1.02) translateY(-1px);
}

/* --- NUEVO: Efecto visual para el estado "abierto" --- */
#chat-toggle-button.chat-open img {
    /* Mantenemos el resplandor para que se vea bien, pero quitamos la transformación */
    filter: drop-shadow(0 0 16px rgba(120, 255, 180, 0.9));
    /* Puedes ajustar el brillo si quieres */

    /* Opcional: Si usas la animación de pulso, es bueno detenerla aquí también */
    animation: none;
}

/* --- Animación de Pulso para el Resplandor --- */
@keyframes pulse-glow {
    0% {
        filter: drop-shadow(0 0 8px rgba(75, 255, 150, 0.6));
    }

    70% {
        filter: drop-shadow(0 0 16px rgba(120, 255, 180, 0.9));
    }

    100% {
        filter: drop-shadow(0 0 8px rgba(75, 255, 150, 0.6));
    }
}

/* Y ahora, modifica la regla de la imagen para que use esta animación */
#chat-toggle-button img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;

    /* Aplicamos la animación */
    animation: pulse-glow 3s infinite ease-in-out;

    transition: transform 0.3s ease-out, filter 0.3s ease-out;
}

/* Hacemos que el hover detenga la animación y ponga un brillo fijo más fuerte */
#chat-toggle-button:hover img {
    animation: none;
    /* Pausamos la animación al pasar el ratón */
    filter: drop-shadow(0 0 18px rgba(120, 255, 180, 0.95));
}


/* --- Ventana Principal del Chat --- */
#chat-window {
    /* -- Posicionamiento Relativo al Contenedor -- */
    position: absolute;
    bottom: calc(100% + 15px);
    /* Posicionarse encima del botón + 15px de margen */
    right: 0;
    /* Alineada a la derecha del contenedor */
    width: 340px;
    /* Ancho estándar */
    max-height: 500px;
    /* Altura máxima, permite scroll interno */
    z-index: 1050;
    /* Por debajo del botón toggle */

    /* -- Apariencia -- */
    background-color: var(--deep-blue-bg);
    /* Fondo muy oscuro */
    border: 1px solid rgba(77, 148, 255, 0.3);
    /* Borde sutil */
    border-radius: var(--border-radius-lg);
    /* Bordes redondeados consistentes */
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
    /* Sombra para destacar */
    color: var(--primary-text-color);

    /* -- Layout y Overflow -- */
    display: flex;
    /* Controlado por JS, pero definir por defecto */
    flex-direction: column;
    overflow: hidden;
    /* Esconder contenido que se salga */

    /* -- Animación (Opcional) -- */
    opacity: 0;
    /* Inicialmente invisible */
    transform: translateY(15px) scale(0.98);
    /* Inicialmente ligeramente abajo y pequeña */
    pointer-events: none;
    /* No interactuable cuando está oculta */
    transition: opacity 0.25s ease-out, transform 0.25s ease-out;
}

/* Estilo para cuando la ventana es visible (controlado por JS añadiendo/quitando display:flex/none) */
#chat-window[style*="display: flex;"] {
    /* Selector un poco frágil, mejor usar clases si es posible */
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    /* Hacerla interactuable */
}


/* --- Cabecera del Chat --- */
#chat-header {
    background-color: var(--darker-blue-bg);
    /* Fondo cabecera */
    color: var(--light-blue-text);
    padding: 0.6rem 1rem;
    /* Padding ajustado */
    border-bottom: 1px solid rgba(77, 148, 255, 0.2);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: grab;
    /* Indicar que se podría mover (aunque no implementado) */
}

#chat-header span {
    font-weight: 600;
    /* Un poco más de peso */
    font-size: 0.95rem;
    text-shadow: none;
    /* Quitar sombra si se ve mal */
}

#chat-close-button {
    /* Asegurar que usa btn-close-white de Bootstrap o añadir estilo manual */
    filter: brightness(1.5);
    /* Hacer el icono un poco más brillante */
    padding: 0.5rem;
    /* Área de click más grande */
}


/* --- Área de Mensajes --- */
#chat-messages {
    flex-grow: 1;
    overflow-y: auto;
    padding: 1rem;
    /* Más padding */
    background-color: var(--deep-blue-bg);
    /* Fondo consistente con ventana */
    /* Estilos scrollbar (como antes) */
    scrollbar-width: thin;
    scrollbar-color: var(--primary-blue) var(--darker-blue-bg);
}

#chat-messages::-webkit-scrollbar {
    width: 8px;
}

#chat-messages::-webkit-scrollbar-track {
    background: var(--darker-blue-bg);
    border-radius: 4px;
}

#chat-messages::-webkit-scrollbar-thumb {
    background-color: var(--primary-blue);
    border-radius: 4px;
    border: 2px solid var(--darker-blue-bg);
}


/* --- Estilos Mensajes --- */
.message {
    max-width: 88%;
    /* Permitir un poco más de ancho */
    padding: 0.6rem 1rem;
    /* Padding ajustado */
    margin-bottom: 0.8rem;
    /* Espacio entre mensajes */
    border-radius: var(--border-radius-lg);
    /* Más redondeado */
    line-height: 1.5;
    /* Mejorar legibilidad */
    word-wrap: break-word;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    color: var(--primary-text-color);
    position: relative;
    /* Para posibles adornos */
    opacity: 0;
    /* Animación de entrada */
    transform: scale(0.95);
    animation: messageFadeIn 0.3s ease-out forwards;
}

@keyframes messageFadeIn {
    to {
        opacity: 1;
        transform: scale(1);
    }
}


/* Mensajes del Usuario */
.user-message {
    background-color: var(--primary-blue);
    /* Usar color primario */
    color: #fff;
    /* Asegurar texto blanco */
    align-self: flex-end;
    border-bottom-right-radius: 5px;
    margin-left: auto;
}

/* Mensajes de la IA */
.ai-message {
    background-color: var(--darker-blue-bg);
    /* Fondo más oscuro */
    border: 1px solid rgba(77, 148, 255, 0.15);
    /* Borde sutil */
    align-self: flex-start;
    border-bottom-left-radius: 5px;
    margin-right: auto;
}

/* Indicador de "pensando" (Spinner) - Usar spinner de Bootstrap desde JS */
.ai-message .spinner-grow {
    /* Estilo si se usa spinner */
    width: 0.8rem;
    height: 0.8rem;
    vertical-align: middle;
}


/* --- Área de Entrada de Texto --- */
#chat-input-area {
    padding: 0.7rem 1rem;
    /* Padding ajustado */
    border-top: 1px solid rgba(77, 148, 255, 0.2);
    background-color: var(--darker-blue-bg);
    /* Mismo fondo que cabecera */
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
    /* Sombra superior */
}

/* Input Group de Bootstrap debería funcionar bien */
#chat-input {
    background-color: var(--deep-blue-bg);
    /* Fondo input */
    color: var(--primary-text-color);
    border: 1px solid rgba(77, 148, 255, 0.3);
    border-right: none;
    /* Quitar borde derecho para unir con botón */
    /* Redondeado ya definido por .input-group de Bootstrap */
    padding: 0.5rem 1rem;
    /* Padding input */
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    min-height: 38px;
    /* Altura mínima consistente */
    font-size: 0.95rem;
}

#chat-input::placeholder {
    color: var(--muted-text-color);
    opacity: 0.7;
}

#chat-input:focus {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 0 0.2rem rgba(77, 148, 255, 0.2);
    background-color: var(--darker-blue-bg);
    z-index: 3;
    /* Poner sobre el botón al enfocar */
}

/* Botón de enviar */
#chat-send-button {
    background-color: var(--primary-blue);
    color: white;
    border: 1px solid var(--primary-blue);
    /* Redondeado ya definido por .input-group de Bootstrap */
    padding: 0.5rem 1rem;
    /* Padding botón */
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    min-height: 38px;
    display: flex;
    align-items: center;
}

#chat-send-button:hover {
    background-color: var(--secondary-blue);
    border-color: var(--secondary-blue);
}

#chat-send-button:active {
    background-color: #0052cc;
    /* Azul más oscuro al presionar */
    border-color: #0052cc;

    /* --- Estilos para Preview de Imagen en Chat --- */
    .chat-image-preview {
        background-color: rgba(77, 148, 255, 0.1);
        border: 1px solid rgba(77, 148, 255, 0.3);
    }

    .chat-image-preview img {
        border: 1px solid rgba(77, 148, 255, 0.2);
    }

    /* --- Estilos para Header Actions --- */
    .chat-header-actions {
        display: flex;
        align-items: center;
    }

    #download-chat-pdf-btn {
        opacity: 0.8;
        transition: opacity 0.2s ease;
    }

    #download-chat-pdf-btn:hover {
        opacity: 1;
    }

    /* --- Indicador de Límite de Imágenes --- */
    #chat-image-limit-indicator {
        background-color: rgba(0, 0, 0, 0.2);
        font-size: 0.75rem;
    }

    /* --- Botón de Adjuntar Imagen --- */
    #chat-attach-image-btn {
        background-color: var(--deep-blue-bg);
        color: var(--light-blue-text);
        border: 1px solid rgba(77, 148, 255, 0.3);
        border-right: none;
        transition: background-color 0.2s ease;
    }

    #chat-attach-image-btn:hover:not(:disabled) {
        background-color: var(--darker-blue-bg);
        color: var(--primary-blue);
    }

    #chat-attach-image-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    /* --- Estilos para Imágenes en Mensajes --- */
    .message img {
        max-width: 100%;
        border-radius: 8px;
        margin-top: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }
}

/* ========== User Messages Widget ========== */
#user-messages-container {
    position: fixed;
    bottom: 30px;
    right: 110px;
    /* Positioned to the left of Leafy chat */
    z-index: 1050;
}

#user-messages-toggle-button {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    position: relative;
    z-index: 1051;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(102, 126, 234, 0.6);
    transition: all 0.3s ease;
}

#user-messages-toggle-button:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.8);
}

#user-messages-toggle-button.chat-open {
    transform: scale(0.9);
}

#user-messages-window {
    position: fixed;
    bottom: 100px;
    right: 110px;
    width: 360px;
    height: 500px;
    background: var(--dark-blue-bg, rgba(20, 30, 48, 0.95));
    border-radius: var(--border-radius-lg, 0.8rem);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    z-index: 1049;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(77, 148, 255, 0.3);
}

#user-messages-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 15px 20px;
    border-radius: var(--border-radius-lg, 0.8rem) var(--border-radius-lg, 0.8rem) 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
}

#user-messages-username {
    font-size: 1.1rem;
}

#user-messages-content {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
    background: var(--deeper-blue-bg, #0d1b2a);
}

#user-messages-content .message {
    margin-bottom: 15px;
    display: flex;
}

#user-messages-content .message.sent {
    justify-content: flex-end;
}

#user-messages-content .message.received {
    justify-content: flex-start;
}

#user-messages-content .message-bubble {
    max-width: 70%;
    padding: 10px 15px;
    border-radius: 18px;
    word-wrap: break-word;
}

#user-messages-content .message.sent .message-bubble {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-bottom-right-radius: 5px;
}

#user-messages-content .message.received .message-bubble {
    background: var(--darker-blue-bg, #1a2a44);
    color: var(--primary-text-color, #e6f0ff);
    border-bottom-left-radius: 5px;
}

#user-messages-content .message-content {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.4;
}

#user-messages-content .message-timestamp {
    font-size: 0.75rem;
    opacity: 0.7;
    margin-top: 5px;
}

#user-messages-input-area {
    padding: 15px;
    background: var(--darker-blue-bg, #1a2a44);
    border-radius: 0 0 var(--border-radius-lg, 0.8rem) var(--border-radius-lg, 0.8rem);
    border-top: 1px solid rgba(77, 148, 255, 0.2);
}

#user-messages-input {
    background: var(--deep-blue-bg, #0d1b2a);
    color: var(--primary-text-color, #e6f0ff);
    border: 1px solid rgba(77, 148, 255, 0.3);
    border-radius: 25px;
    padding: 10px 20px;
}

#user-messages-input:focus {
    background: var(--deep-blue-bg, #0d1b2a);
    color: var(--primary-text-color, #e6f0ff);
    border-color: var(--primary-blue, #4d94ff);
    box-shadow: 0 0 0 0.2rem rgba(77, 148, 255, 0.25);
}

#user-messages-send-button {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 25px;
}

#user-messages-send-button:hover {
    background: linear-gradient(135deg, #5568d3 0%, #6a3f8f 100%);
}

/* Responsive */
@media (max-width: 768px) {
    #user-messages-container {
        right: 20px;
    }

    #user-messages-window {
        right: 20px;
        width: calc(100vw - 40px);
        max-width: 360px;
    }
}