/* =========================================
   ESTILOS DEL CHATBOT (SIKU)
   ========================================= */

/* Colores clave: Dorado/Amarillo (#d4af37), Fondo de chat (#313131) */

/* 1. Contenedor del Widget y Ventana */
.chat-widget {
    position: fixed; bottom: 20px; right: 20px; z-index: 20000 !important;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    transform: translateY(100px); opacity: 0; visibility: hidden;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out, visibility 0.3s;
}

.chat-widget.active { transform: translateY(0); opacity: 1; visibility: visible; }

.chat-window {
    width: 320px; height: 500px; background: rgb(49, 49, 49);
    border-radius: 10px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: flex; flex-direction: column; overflow: hidden;
}

/* 2. Ícono Flotante de Apertura */
.chat-toggle {
    position: fixed; bottom: 30px; right: 30px; width: 60px; height: 60px;
    border-radius: 50%; padding: 0; overflow: hidden;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4); border: 2px solid #d4af37;
    background-color: #fff; z-index: 20000 !important; cursor: pointer; transition: all 0.3s ease;
    display: flex; align-items: center; justify-content: center;
}

.chat-toggle:hover { transform: scale(1.1); box-shadow: 0 6px 20px rgba(212, 175, 55, 0.6); }

.chat-toggle img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}

/* Oculta el ícono cuando la ventana está activa */
.chat-widget.active + .chat-toggle { display: none; }

/* 3. Encabezado y Cuerpo del Chat */
.chat-header {
    background-color: #d4af37; color: rgb(0, 0, 0); padding: 15px;
    font-size: 16px; font-weight: bold; display: flex;
    justify-content: space-between; align-items: center; flex-shrink: 0;
    /* Transición suave para el cambio de color */
    transition: background-color 0.5s ease, color 0.5s ease, border-bottom 0.5s ease;
    border-bottom: 2px solid transparent; 
}

.header-actions { display: flex; align-items: center; gap: 15px; }

.reset-btn {
    background: none; border: none; color: inherit; /* Hereda el color del header */
    font-size: 22px; cursor: pointer; line-height: 1; transition: transform 0.4s ease; padding: 0;
}
.reset-btn:hover { transform: rotate(-180deg); }

.close-btn {
    background: none; border: none; color: inherit; /* Hereda el color del header */
    font-size: 20px; cursor: pointer; line-height: 1;
}

.chat-body {
    flex-grow: 1; padding: 10px; overflow-y: auto; background-color: #494949;
}

/* 4. Estilos de Burbujas de Mensajes */
.message {
    max-width: 80%; padding: 10px 12px; border-radius: 18px; margin-bottom: 8px;
    line-height: 1.4; word-wrap: break-word; font-size: 14px;
}
.incoming {
    background-color: #e0e0e0; color: #000; border-top-left-radius: 2px; margin-right: auto;
}
.outgoing {
    background-color: #d4af37; color: rgb(0, 0, 0); border-top-right-radius: 2px; margin-left: auto;
}

/* 5. Contenedor de Opciones */
#chatOptions, .chat-options-container {
    padding: 10px; border-top: 1px solid #666; background-color: #3b3b3b;
    display: flex; flex-direction: column; gap: 8px;
    max-height: 170px; overflow-y: auto; flex-shrink: 0;
}

.option-button {
    background-color: transparent; color: #d4af37; border: 1px solid #d4af37;
    padding: 10px 15px; border-radius: 15px; cursor: pointer; transition: all 0.2s;
    white-space: normal; height: auto; text-align: left; font-size: 13px; line-height: 1.3; width: 100%;
}
.option-button:hover { background-color: #d4af37; color: #000; }

#chatOptions::-webkit-scrollbar { width: 6px; }
#chatOptions::-webkit-scrollbar-thumb { background-color: #d4af37; border-radius: 3px; }
#chatOptions::-webkit-scrollbar-track { background: #333; }

.no-options { text-align: center; color: #ccc; font-size: 13px; padding: 10px; }
.swal2-container { z-index: 30000 !important; }


/* =========================================
   NUEVAS ANIMACIONES Y ESTILOS DE TRANSICIÓN
   ========================================= */

/* Animación de entrada deslizante */
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Clase que se activa con JS para animar el cuerpo del chat */
.chat-body.transitioning {
    animation: slideInRight 0.4s ease-out;
}

/* Estilo para el header cuando se selecciona un restaurante */
.chat-header.restaurant-mode {
    background-color: #1a1a1a; /* Negro elegante */
    color: #d4af37; /* Texto dorado */
    border-bottom: 2px solid #d4af37; /* Borde inferior dorado */
}

/* Indicador de "Escribiendo..." */
.typing-indicator {
    font-size: 12px;
    color: #bbb;
    padding: 5px 15px;
    font-style: italic;
    display: none;
    margin-bottom: 10px;
    animation: blink 1.5s infinite;
}

@keyframes blink {
    0% { opacity: 0.5; }
    50% { opacity: 1; }
    100% { opacity: 0.5; }
}

/* =========================================
   NOTIFICACIÓN FLOTANTE GLOBAL (TOAST)
   ========================================= */

.context-toast {
    position: fixed; /* IMPORTANTE: Fixed para que sea global en la pantalla */
    top: 30px;       /* Distancia desde el techo de la página */
    left: 50%;       /* Centrado horizontalmente */
    transform: translateX(-50%) translateY(-100px); /* Empieza escondido arriba */
    
    background-color: rgba(10, 10, 10, 0.95); /* Negro profundo */
    color: #d4af37; /* Dorado */
    padding: 12px 30px; /* Un poco más grande para que se lea bien en la web */
    border-radius: 50px;
    font-size: 14px;
    font-weight: bold;
    border: 2px solid #d4af37;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5); /* Sombra más fuerte */
    
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Efecto rebote */
    z-index: 100000; /* ¡Por encima de todo (navbar, modal, chat)! */
    white-space: nowrap;
    pointer-events: none;
    
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Clase para mostrar la notificación */
.context-toast.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0); /* Baja a su posición visible */
}

/* ... (El resto de estilos del chat-widget, chat-window, etc. se mantiene igual) ... */

/* Animación para llamar la atención cuando el chat se minimiza */
@keyframes pulseGold {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.7); }
    50% { transform: scale(1.15); box-shadow: 0 0 0 15px rgba(212, 175, 55, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(212, 175, 55, 0); }
}

.chat-toggle.attention {
    animation: pulseGold 2s infinite;
    border: 2px solid #d4af37; /* Borde dorado extra */
}