/* Estilos generales del cuerpo del iframe */
body {
    background-color: transparent; /* Fondo transparente para que se vea la página principal */
    margin: 0;
    padding: 0;
    font-family: 'Inter', sans-serif; /* Fuente principal */
    color: #1a202c;
    overflow: hidden; /* Oculta el scroll del body dentro del iframe */
    height: 100%;
    width: 100%;
}

/* Estilos del botón de la burbuja de chat (cuando el chat está cerrado) */
#chat-bubble-button {
    position: fixed; /* Posición fija en relación al viewport del iframe */
    bottom: 0rem; /* Alineado con la parte inferior del iframe */
    right: 0rem; /* Alineado con la parte derecha del iframe */
    background-color: #272e38; /* Color de fondo oscuro */
    color: white;
    width: 60px; /* Ancho de la burbuja */
    height: 60px; /* Alto de la burbuja */
    border-radius: 50%; /* Forma circular */
    display: flex; /* Para centrar el contenido (imagen) */
    align-items: center;
    justify-content: center;
    cursor: pointer; /* Indica que es clickeable */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Sombra para profundidad */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Transiciones suaves al interactuar */
    z-index: 999; /* Asegura que esté por encima de otros elementos */
    margin: 5px; /* Margen alrededor de la burbuja */
}
#chat-bubble-button:hover {
    background-color: #272e38; /* Color al pasar el ratón */
    transform: scale(1.1); /* Efecto de escala al pasar el ratón */
}
#chat-bubble-button svg {
    width: 30px;
    height: 30px;
}

/* Estilos de la ventana de chat (cuando está abierta) */
#chat-window {
    position: fixed; /* Posición fija en relación al viewport del iframe */
    bottom: calc(0rem + 70px); /* Posicionado encima de la burbuja (60px de alto + 10px de margen) */
    right: 0rem; /* Alineado con la burbuja */
    width: 370px; /* Ancho predeterminado de la ventana de chat */
    max-width: calc(100% - 10px); /* Asegura que se ajuste al ancho del iframe con margen */
    height: 650px; /* Alto predeterminado de la ventana de chat */
    max-height: calc(100% - 70px - 10px); /* Asegura que se ajuste al alto del iframe con margen y espacio de burbuja */
    background-color: #1f2937; /* Color de fondo de la ventana */
    color: #e5e7eb; /* Color de texto */
    border-radius: 0.75rem; /* Bordes redondeados */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); /* Sombra para profundidad */

    display: flex; /* Usa flexbox para el diseño interno */
    flex-direction: column; /* Organiza los elementos en columna */

    visibility: hidden; /* Inicialmente oculto */
    opacity: 0; /* Inicialmente transparente */
    transform: translateY(20px); /* Ligeramente desplazado hacia abajo */

    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s; /* Transiciones para abrir/cerrar */

    overflow: hidden; /* Oculta cualquier contenido que se desborde */
    z-index: 998; /* Un poco por debajo de la burbuja */
}

/* Estilos cuando la ventana de chat está abierta */
#chat-window.open {
    visibility: visible; /* Visible */
    opacity: 1; /* Opaco */
    transform: translateY(0); /* Vuelve a su posición original */

    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0s; /* Transiciones al abrir */
}

#chat-window.closed {
    /* Hereda los estilos base, no necesita cambios específicos */
}

/* Área de visualización del avatar */
#chat-avatar-display-area {
    width: 100%;
    height: 200px;
    background-color: #111827;
    position: relative;
    overflow: hidden;
    flex-shrink: 0; /* Evita que se encoja */
}
/* Estilos para la imagen y el video del avatar */
#chat-avatar-display-image,
#chat-avatar-display-video {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Ajusta el contenido sin recortar */
    position: absolute;
    top: 0;
    left: 0;
}
#chat-avatar-display-video {
    display: none; /* Video inicialmente oculto */
}

/* Encabezado de información del chat */
.chat-info-header {
    background-color: #374151;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid #4b5563;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0; /* Evita que se encoja */
}
.chat-info-details {
    flex-grow: 1; /* Ocupa el espacio restante */
}
.chat-info-name {
    font-weight: 600;
    font-size: 1rem;
    color: #f9fafb;
}
.chat-info-status {
    font-size: 0.75rem;
    color: #9ca3af;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.status-dot {
    width: 8px;
    height: 8px;
    background-color: #34d399;
    border-radius: 50%;
}
/* Botón de cerrar chat en el encabezado */
.chat-info-header .close-chat-button {
    background: none;
    border: none;
    color: #9ca3af;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
}
.chat-info-header .close-chat-button:hover {
    color: #f9fafb;
}

/* Contenedor del registro de chat (donde aparecen los mensajes) */
#chat-log-container {
    flex-grow: 1; /* Ocupa todo el espacio vertical disponible */
    background-color: #ffffff;
    padding: 0.75rem;
    overflow-y: auto; /* Permite scroll vertical si hay muchos mensajes */
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    word-wrap: break-word; /* Rompe palabras largas para evitar desbordamiento */
    min-height: 0; /* Permite que el contenedor se encoja si es necesario */
}
/* Estilos de un mensaje individual */
.chat-message {
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    max-width: 85%; /* Ancho máximo del mensaje */
    word-break: break-word;
    line-height: 1.4;
    color: white;
    /*display: flex;*/
    align-items: flex-end;
    gap: 0.5rem;
}
.message-text {
    flex-grow: 1;
    color: #000000;
}
/* Estilos para imágenes adjuntas */
.message-attachment img {
    max-width: 100%;
    max-height: 150px;
    border-radius: 0.25rem;
    margin-top: 0.25rem;
}
/* Estilos para información de archivo adjunto (no imagen) */
.message-attachment .file-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background-color: rgba(0,0,0,0.1);
    border-radius: 0.25rem;
    margin-top: 0.25rem;
}
.message-attachment .file-info svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

/* Mensajes del usuario */
.user-message {
    background-color: #e1dfdf;
    align-self: flex-end; /* Alinea a la derecha */
    margin-left: auto; /* Empuja el mensaje a la derecha */
}
/* Mensajes de la IA */
.ai-message {
    background-color: #e1dfdf;
    align-self: flex-start; /* Alinea a la izquierda */
    margin-right: auto; /* Empuja el mensaje a la izquierda */
}
/* Botón de reproducción de voz */
.speak-button {
    background: none;
    border: none;
    color: #cbd5e1;
    cursor: pointer;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    justify-self: right;
}
.speak-button:hover {
    color: #f9fafb;
    background-color: rgba(255, 255, 255, 0.1);
}
.speak-button svg {
    width: 16px;
    height: 16px;
}
.speak-button.speaking svg {
    fill: #34d399; /* Color cuando está hablando */
}

/* Área de entrada de texto y botones */
.chat-input-area {
    padding: 0.75rem;
    border-top: 1px solid #4b5563;
    background-color: #374151;
    display: flex;
    flex-direction: column; /* Elementos apilados en columna */
    gap: 0.5rem; /* Espacio entre elementos apilados */
    flex-shrink: 0;
}
/* Contenedor para el botón de adjuntar, input y botón de enviar */
.chat-input-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%; /* Ocupa todo el ancho disponible */
}
/* Campo de entrada de texto */
.chat-input-area input[type="text"] {
    flex-grow: 1; /* Ocupa el espacio restante */
    padding: 0.5rem 0.75rem;
    border: 1px solid #6b7280;
    border-radius: 0.375rem;
    background-color: #e1dfdf;
    color: #000000;
    min-width: 0; /* Permite que el input se encoja */
}
.chat-input-area input[type="text"]:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.5);
}
/* Estilos generales para botones en el área de entrada */
.chat-input-area button {
    color: white;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
    flex-shrink: 0;
}
/* Botón de adjuntar archivo */
.chat-input-area button#chat-attachment-button {
    padding: 0.5rem;
    background-color: transparent;
}
.chat-input-area button#chat-attachment-button:hover {
    background-color: #4b5563;
}
.chat-input-area button#chat-attachment-button svg {
    width: 20px;
    height: 20px;
    fill: #9ca3af;
}
.chat-input-area button#chat-attachment-button:hover svg {
    fill: #e5e7eb;
}

/* Estilos para el botón de grabación de voz */
#chat-record-button {
    background-color: #4b5563; /* Tailwind gray-600 */
    color: white;
    padding: 0.5rem;
    border-radius: 0.375rem;
    transition: background-color 0.3s ease;
}
#chat-record-button:hover {
    background-color: #6b7280; /* Tailwind gray-500 */
}
#chat-record-button svg {
    width: 20px;
    height: 20px;
}
/* Animación cuando está grabando */
#chat-record-button.recording {
    background-color: #ef4444; /* Rojo para grabar */
    animation: pulse-record 1.5s infinite;
}

/* Animación de pulso para el botón de grabación */
@keyframes pulse-record {
    0% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    }
}

/* Estilos al pasar el ratón y deshabilitar botones */
.chat-input-area button:hover {
    background-color: #4b5563;
}
.chat-input-area button:disabled {
    background-color: #6b7280;
    opacity: 0.7;
    cursor: not-allowed;
}

/* Ajustes para dispositivos móviles (media query) */
@media (max-width: 768px) {
    #chat-window {
        /* Ajusta para ser responsivo dentro del tamaño expandido del iframe */
        width: calc(100% - 10px); /* 10px de margen desde la derecha del iframe */
        height: calc(100% - 70px - 10px); /* 70px para la burbuja + 10px de margen desde la parte inferior del iframe */
        bottom: 70px; /* Posicionado encima de la burbuja (60px de alto + 10px de margen) */
        right: 0rem; /* Alineado con la burbuja */
        border-radius: 0.75rem; /* Mantiene los bordes redondeados */
    }
    #chat-bubble-button {
        display: flex; /* NO ocultar el botón de la burbuja en móvil */
    }
    /* Ajusta el padding para elementos internos en móvil para mejor uso del espacio */
    .chat-info-header,
    #chat-log-container,
    .chat-input-area {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    .chat-input-area {
        gap: 0.25rem; /* Espacio más pequeño */
    }
    .chat-input-area input[type="text"] {
        padding: 0.4rem 0.6rem; /* Padding ligeramente más pequeño para el input */
    }
    .chat-input-area button {
        padding: 0.4rem 0.8rem; /* Padding ligeramente más pequeño para los botones */
    }
    .chat-info-header {
        padding: 0.4rem 0.8rem; /* Ajusta el padding del encabezado */
    }
    #chat-log-container {
        padding: 0.5rem; /* Ajusta el padding del registro de chat */
    }
    #chat-avatar-display-area {
        height: 200px; /* Área del avatar más pequeña en móvil */
    }
}