/**
 * Component - Kiara Bulle Proactive
 * Affichée avant ouverture du chat pour encourager l'engagement.
 * Design cohérent avec les bulles du chat (bg-light text-dark rounded-3).
 */

/* Conteneur principal — aligné au-dessus du launcher, même logique que .ka-window */
.ka-proactive {
    position: absolute;
    bottom: 72px;
    right: 0;
    width: 320px;
    z-index: var(--ka-z);
}

/* Animation d'entrée */
@keyframes ka-proactive-in {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ka-proactive:not([hidden]) {
    animation: ka-proactive-in 0.25s ease forwards;
}

/* Avatar — gradient identique au launcher et au header du chat */
.ka-proactive-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--kd-accent), var(--kd-amber));
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 15px;
}

/* Bouton fermeture — discret sur fond clair */
.ka-proactive-dismiss {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.07);
    border: none;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 11px;
    color: #555;
    padding: 0;
    line-height: 1;
    transition: background 0.15s ease;
    z-index: 1;
}

.ka-proactive-dismiss:hover {
    background: rgba(0, 0, 0, 0.15);
}

/* Zone cliquable — curseur pointeur pour indiquer l'interactivité */
.ka-proactive-body {
    cursor: pointer;
}

/* Texte du message */
.ka-proactive-message {
    font-size: 0.875rem;
    line-height: 1.5;
}

/* Dots animation — frappe en attente du message LLM */
@keyframes ka-proactive-dot {
    0%, 80%, 100% {
        opacity: 0.3;
        transform: scale(0.85);
    }
    40% {
        opacity: 1;
        transform: scale(1);
    }
}

.ka-proactive-dots {
    display: flex;
    gap: 5px;
    align-items: center;
    padding: 6px 0;
}

.ka-proactive-dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #6c757d;
    animation: ka-proactive-dot 1.2s infinite;
}

.ka-proactive-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.ka-proactive-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

/* Responsive mobile */
@media (max-width: 520px) {
    .ka-proactive {
        width: calc(100vw - 48px);
        right: 0;
    }
}