/* ==========================================================
   GIOLABS CLINIC S.A.C.
   BOT ASISTENTE - DISEÑO PREMIUM COMPLETO
   ==========================================================
   Índice:
   1. Contenedor Principal
   2. Botón Flotante
   3. Ventana del Chat
   4. Header del Chat
   5. Cuerpo del Chat
   6. Mensaje de Bienvenida
   7. Preguntas Sugeridas
   8. Burbujas de Mensaje
   9. Indicador de Escritura
   10. Footer del Chat
   11. Elementos Flotantes (WhatsApp + Scroll Top)
   12. Responsive
   ========================================================== */

/* ==========================================================
   1. CONTENEDOR PRINCIPAL
   ========================================================== */

.bot-container {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 99999;
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end;
    gap: 14px;
    pointer-events: none;
}

.bot-container > * {
    pointer-events: auto;
}

/* ==========================================================
   2. BOTÓN FLOTANTE
   ========================================================== */

.bot-flotante {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0a1a2a 0%, #174c77 40%, #16a6a1 100%);
    border: 2px solid rgba(255, 255, 255, 0.15);
    box-shadow: 
        0 8px 32px rgba(23, 76, 119, 0.35),
        0 2px 8px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 26px;
    position: relative;
    flex-shrink: 0;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.bot-flotante:hover {
    transform: scale(1.08) rotate(-3deg);
    box-shadow: 
        0 14px 48px rgba(23, 76, 119, 0.50),
        0 4px 12px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.bot-flotante:active {
    transform: scale(0.95);
    box-shadow: 0 4px 16px rgba(23, 76, 119, 0.30);
}

/* Anillo pulsante alrededor del botón */
.bot-flotante::before {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    background: transparent;
    border: 2px solid rgba(22, 166, 161, 0.4);
    z-index: -1;
    animation: botRingPulse 2.5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes botRingPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.4;
    }
    50% {
        transform: scale(1.25);
        opacity: 0.1;
    }
}

/* Indicador de estado en línea */
.bot-flotante .bot-online {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 15px;
    height: 15px;
    background: #4ade80;
    border-radius: 50%;
    border: 2.5px solid #ffffff;
    animation: botOnlinePulse 2s ease-in-out infinite;
    box-shadow: 0 0 16px rgba(74, 222, 128, 0.5);
    z-index: 2;
}

@keyframes botOnlinePulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 16px rgba(74, 222, 128, 0.5);
    }
    50% {
        transform: scale(1.2);
        box-shadow: 0 0 28px rgba(74, 222, 128, 0.8);
    }
}

/* ==========================================================
   3. VENTANA DEL CHAT
   ========================================================== */

.bot-ventana {
    display: none;
    width: 400px;
    max-width: calc(100vw - 40px);
    max-height: 550px;
    height: 550px;
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 
        0 30px 90px rgba(0, 0, 0, 0.18),
        0 10px 30px rgba(23, 76, 119, 0.08);
    flex-direction: column;
    overflow: hidden;
    animation: botSlideUp 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 1px solid rgba(23, 76, 119, 0.06);
}

.bot-ventana.abierta {
    display: flex;
}

@keyframes botSlideUp {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.94);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ==========================================================
   4. HEADER DEL CHAT
   ========================================================== */

.bot-header {
    padding: 18px 22px;
    background: linear-gradient(135deg, #0a1a2a 0%, #174c77 45%, #1a5a8a 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

/* Línea shimmer animada en la parte inferior del header */
.bot-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #16a6a1, #4ade80, #fbbf24, #16a6a1);
    background-size: 300% 100%;
    animation: botShimmerLine 4s ease-in-out infinite;
}

@keyframes botShimmerLine {
    0%, 100% { background-position: 0% 0; }
    50% { background-position: 100% 0; }
}

/* Avatar del asistente */
.bot-header-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.06));
    border: 2px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
    position: relative;
}

/* Badge verde en el avatar */
.bot-header-avatar .avatar-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 14px;
    height: 14px;
    background: #4ade80;
    border-radius: 50%;
    border: 2.5px solid #174c77;
    animation: botOnlinePulse 2s ease-in-out infinite;
}

/* Información del header */
.bot-header-info {
    flex: 1;
    min-width: 0;
}

.bot-header-info h3 {
    font-size: 16px;
    margin: 0;
    font-weight: 700;
    letter-spacing: -0.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bot-header-info p {
    font-size: 12px;
    margin: 0;
    opacity: 0.85;
    display: flex;
    align-items: center;
    gap: 6px;
}

.bot-header-info p .status-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4ade80;
    animation: botOnlinePulse 2s ease-in-out infinite;
}

/* Botón cerrar */
.bot-header-close {
    margin-left: auto;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    outline: none;
}

.bot-header-close:hover {
    background: rgba(255, 255, 255, 0.22);
    transform: rotate(90deg) scale(1.05);
}

/* ==========================================================
   5. CUERPO DEL CHAT
   ========================================================== */

.bot-cuerpo {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 18px 16px;
    background: linear-gradient(180deg, #f0f6fa 0%, #f8fafc 50%, #f5f9fb 100%);
    scroll-behavior: smooth;
    overscroll-behavior: contain;
}

/* Scrollbar personalizado */
.bot-cuerpo::-webkit-scrollbar {
    width: 5px;
}

.bot-cuerpo::-webkit-scrollbar-track {
    background: transparent;
}

.bot-cuerpo::-webkit-scrollbar-thumb {
    background: #c0d0da;
    border-radius: 10px;
}

.bot-cuerpo::-webkit-scrollbar-thumb:hover {
    background: #a0b0bc;
}

/* ==========================================================
   6. MENSAJE DE BIENVENIDA
   ========================================================== */

.bienvenida-container {
    background: #ffffff;
    border-radius: 18px;
    padding: 22px 20px;
    margin-bottom: 12px;
    box-shadow: 0 4px 20px rgba(23, 76, 119, 0.06);
    border: 1px solid rgba(23, 76, 119, 0.04);
    animation: botFadeInUp 0.5s ease;
}

@keyframes botFadeInUp {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.bienvenida-titulo {
    font-size: 19px;
    font-weight: 700;
    color: #103a5c;
    margin: 0 0 4px;
    letter-spacing: -0.3px;
}

.bienvenida-titulo span {
    background: linear-gradient(135deg, #174c77, #16a6a1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.bienvenida-subtitulo {
    font-size: 13px;
    color: #6a7b87;
    margin: 0 0 16px;
    line-height: 1.5;
}

/* ==========================================================
   7. PREGUNTAS SUGERIDAS
   ========================================================== */

.bienvenida-preguntas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.pregunta-sugerida {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #f8fafc;
    border: 1.5px solid rgba(23, 76, 119, 0.06);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    font-size: 12px;
    color: #152b3a;
    font-weight: 500;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.pregunta-sugerida:hover {
    background: #ffffff;
    border-color: rgba(22, 166, 161, 0.3);
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 24px rgba(23, 76, 119, 0.08);
}

.pregunta-sugerida:active {
    transform: translateY(-1px) scale(0.98);
}

.pregunta-sugerida i {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.pregunta-sugerida:hover i {
    transform: scale(1.15) rotate(-5deg);
}

/* Colores de iconos */
.icon-azul { background: rgba(23, 76, 119, 0.08); color: #174c77; }
.icon-turquesa { background: rgba(22, 166, 161, 0.08); color: #16a6a1; }
.icon-naranja { background: rgba(230, 126, 34, 0.08); color: #e67e22; }
.icon-verde { background: rgba(22, 166, 161, 0.08); color: #16a6a1; }
.icon-rojo { background: rgba(226, 92, 92, 0.08); color: #e25c5c; }
.icon-morado { background: rgba(139, 92, 246, 0.08); color: #8b5cf6; }
.icon-rosa { background: rgba(236, 72, 153, 0.08); color: #ec4899; }
.icon-oro { background: rgba(245, 158, 11, 0.08); color: #f59e0b; }

/* ==========================================================
   8. BURBUJAS DE MENSAJE
   ========================================================== */

.bot-mensaje {
    margin-bottom: 14px;
    display: flex;
    flex-direction: column;
    animation: botMsgIn 0.35s ease;
}

@keyframes botMsgIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.bot-mensaje.bot {
    align-items: flex-start;
}

.bot-mensaje.usuario {
    align-items: flex-end;
}

.bot-mensaje .burbuja {
    max-width: 88%;
    padding: 12px 16px;
    border-radius: 16px;
    font-size: 13px;
    line-height: 1.6;
    word-wrap: break-word;
    position: relative;
}

/* Burbuja del bot (izquierda) */
.bot-mensaje.bot .burbuja {
    background: #ffffff;
    color: #152b3a;
    border-bottom-left-radius: 4px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(23, 76, 119, 0.05);
}

.bot-mensaje.bot .burbuja::before {
    content: '';
    position: absolute;
    top: 0;
    left: -7px;
    width: 12px;
    height: 12px;
    background: #ffffff;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    border-left: 1px solid rgba(23, 76, 119, 0.05);
    border-top: 1px solid rgba(23, 76, 119, 0.05);
}

/* Burbuja del usuario (derecha) */
.bot-mensaje.usuario .burbuja {
    background: linear-gradient(135deg, #174c77, #1a5a8a);
    color: #ffffff;
    border-bottom-right-radius: 4px;
    box-shadow: 0 4px 16px rgba(23, 76, 119, 0.18);
}

.bot-mensaje .hora {
    font-size: 10px;
    color: #a0b0bc;
    margin-top: 4px;
    padding: 0 4px;
    font-weight: 500;
    letter-spacing: 0.3px;
}

.bot-mensaje.usuario .hora {
    color: rgba(255, 255, 255, 0.5);
}

/* Formato de tablas dentro de burbujas */
.bot-mensaje .burbuja table {
    width: 100%;
    border-collapse: collapse;
    margin: 8px 0;
    font-size: 12px;
}

.bot-mensaje .burbuja table th {
    background: #f1f5f9;
    color: #174c77;
    font-weight: 700;
    padding: 6px 10px;
    text-align: left;
    border-bottom: 2px solid #dfe9ef;
}

.bot-mensaje .burbuja table td {
    padding: 6px 10px;
    border-bottom: 1px solid #e2e8f0;
    color: #152b3a;
}

.bot-mensaje .burbuja strong {
    color: #174c77;
    font-weight: 700;
}

.bot-mensaje .burbuja a {
    color: #174c77;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.bot-mensaje .burbuja code {
    background: #f1f5f9;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    color: #174c77;
}

/* ==========================================================
   9. INDICADOR DE ESCRITURA
   ========================================================== */

.bot-escribiendo {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 12px 16px;
    background: #ffffff;
    border-radius: 14px;
    border-bottom-left-radius: 4px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(23, 76, 119, 0.05);
    width: fit-content;
}

.bot-escribiendo span {
    width: 7px;
    height: 7px;
    background: #a0b0bc;
    border-radius: 50%;
    animation: botTypingDot 1.4s ease-in-out infinite;
}

.bot-escribiendo span:nth-child(2) { animation-delay: 0.2s; }
.bot-escribiendo span:nth-child(3) { animation-delay: 0.4s; }

@keyframes botTypingDot {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.4;
    }
    30% {
        transform: translateY(-7px);
        opacity: 1;
    }
}

/* ==========================================================
   10. FOOTER DEL CHAT
   ========================================================== */

.bot-footer {
    padding: 12px 16px;
    border-top: 1px solid #dfe9ef;
    background: #ffffff;
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.bot-footer input {
    flex: 1;
    padding: 11px 16px;
    border: 2px solid #dfe9ef;
    border-radius: 12px;
    font-size: 13px;
    outline: none;
    transition: all 0.3s ease;
    background: #f8fafc;
    color: #152b3a;
    min-width: 0;
}

.bot-footer input:focus {
    border-color: #174c77;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(23, 76, 119, 0.06);
}

.bot-footer input::placeholder {
    color: #a0b0bc;
    font-size: 13px;
}

.bot-footer button {
    padding: 11px 20px;
    background: linear-gradient(135deg, #174c77, #1a5a8a);
    color: #ffffff;
    border: none;
    border-radius: 12px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.bot-footer button:hover {
    transform: scale(1.04);
    box-shadow: 0 6px 20px rgba(23, 76, 119, 0.30);
}

.bot-footer button:active {
    transform: scale(0.95);
}

/* ==========================================================
   11. ELEMENTOS FLOTANTES - WHATSAPP Y SCROLL TOP
   ========================================================== */

/* WhatsApp - Esquina inferior izquierda */
.floating-whatsapp {
    position: fixed;
    bottom: 30px;
    left: 30px;
    z-index: 99998;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: #25d366;
    color: #ffffff;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.35);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.floating-whatsapp:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(37, 211, 102, 0.45);
}

.floating-whatsapp i {
    font-size: 20px;
}

/* Botón volver arriba - Arriba del bot asistente */
.scroll-top-button {
    position: fixed;
    bottom: 100px;
    right: 30px;
    z-index: 99997;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(23, 76, 119, 0.85);
    color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.3);
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    box-shadow: 0 8px 24px rgba(23, 76, 119, 0.3);
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.scroll-top-button.visible {
    display: flex;
}

.scroll-top-button:hover {
    background: #174c77;
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(23, 76, 119, 0.4);
}

/* ==========================================================
   12. RESPONSIVE
   ========================================================== */

@media (max-width: 768px) {
    .bot-ventana {
        width: 380px;
        max-height: 500px;
        height: 500px;
    }
    
    .bot-header {
        padding: 16px 18px;
    }
    
    .bot-header-avatar {
        width: 42px;
        height: 42px;
        font-size: 20px;
    }
    
    .bot-cuerpo {
        padding: 14px;
    }
}

@media (max-width: 620px) {
    .bot-container {
        bottom: 16px;
        right: 16px;
        gap: 10px;
    }
    
    .bot-flotante {
        width: 52px;
        height: 52px;
        font-size: 22px;
    }
    
    .bot-ventana {
        width: calc(100vw - 32px);
        max-height: 440px;
        height: 440px;
        border-radius: 18px;
    }
    
    .bot-header {
        padding: 14px 16px;
        gap: 10px;
    }
    
    .bot-header-avatar {
        width: 38px;
        height: 38px;
        font-size: 18px;
    }
    
    .bot-header-info h3 {
        font-size: 14px;
    }
    
    .bot-header-info p {
        font-size: 11px;
    }
    
    .bot-header-close {
        width: 32px;
        height: 32px;
        font-size: 16px;
    }
    
    .bot-cuerpo {
        padding: 12px;
        min-height: 200px;
    }
    
    .bienvenida-container {
        padding: 16px 14px;
    }
    
    .bienvenida-titulo {
        font-size: 16px;
    }
    
    .bienvenida-preguntas {
        grid-template-columns: 1fr;
        gap: 6px;
    }
    
    .pregunta-sugerida {
        font-size: 11px;
        padding: 8px 10px;
    }
    
    .pregunta-sugerida i {
        width: 26px;
        height: 26px;
        font-size: 11px;
    }
    
    .bot-mensaje .burbuja {
        font-size: 12px;
        padding: 10px 14px;
    }
    
    .bot-footer {
        padding: 10px 12px;
        gap: 8px;
    }
    
    .bot-footer input {
        padding: 10px 12px;
        font-size: 12px;
    }
    
    .bot-footer button {
        padding: 10px 14px;
        font-size: 12px;
    }
    
    .floating-whatsapp {
        bottom: 16px;
        left: 16px;
        width: 52px;
        height: 52px;
        padding: 0;
        justify-content: center;
        border-radius: 50%;
    }
    
    .floating-whatsapp span {
        display: none;
    }
    
    .floating-whatsapp i {
        font-size: 22px;
    }
    
    .scroll-top-button {
        bottom: 80px;
        right: 16px;
        width: 40px;
        height: 40px;
        font-size: 14px;
    }
}

@media (max-width: 400px) {
    .bot-ventana {
        max-height: 400px;
        height: 400px;
    }
    
    .bot-cuerpo {
        min-height: 180px;
        padding: 10px;
    }
    
    .bienvenida-container {
        padding: 14px 12px;
    }
    
    .bienvenida-titulo {
        font-size: 15px;
    }
    
    .bienvenida-subtitulo {
        font-size: 12px;
    }
}