/* ===== Widget container ===== */
#ai-widget {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    font-family: Arial, sans-serif;
}

/* ===== Floating button ===== */
#ai-button {
    position: fixed;
    bottom: 20px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0,0,0,.25);
    transition: transform 0.2s ease;
}
#ai-button:hover { transform: scale(1.1); }

/* English — default */
html[lang="en"] #ai-button { right: 20px; left: unset; }
/* Arabic */
html[lang="ar"] #ai-button { left: 20px; right: unset; }

#ai-button img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

/* smoother drag */
#ai-button,
#ai-popup {
    will-change: left, top;
}

/* ===== Popup ===== */
#ai-popup {
    position: fixed;
    width: 380px;
    max-width: 90%;
    height:420px;
    background: #0f172a;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0,0,0,.4);
    display: none;
    flex-direction: column;
    overflow: hidden;
    color: white;
    z-index: 10000;
    animation: popupFade 0.3s ease;
}

/* Popup fade animation */
@keyframes popupFade {
    0% { transform: translateY(20px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

/* ===== Popup header ===== */
.ai-header {
    background: #1e293b;
    padding: 12px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: move;
    user-select: none;
}

/* ===== Close button ===== */
#closeAI {
    background: none;
    border: none;
    color: white;
    font-size: 22px;
    cursor: pointer;
}

/* ===== Body ===== */
.ai-body {
    padding: 20px;
    text-align: center;
    flex: 1;
}

/* ===== Call status ===== */
#callStatus {
    font-size: 16px;
    margin-bottom: 10px;
    transition: opacity .5s ease;
    opacity: 1;
}
.status-fade { opacity: .3; }

/* ===== Buttons ===== */
.call-buttons {
    position: absolute;
    bottom: 20px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 20px;
}
button {
    border: none;
    padding: 12px 25px;
    border-radius: 30px;
    cursor: pointer;
    font-weight: bold;
    font-size: 16px;
}
.start { background: #22c55e; color: white; }
.end { background: #ef4444; color: white; display: none; }

/* ===== RTL Support ===== */
body.rtl #ai-button { left: 20px; right: unset; }

/* ===== Mobile bottom sheet ===== */
@media (max-width: 768px) {
    #ai-popup {
        width: 100vw !important;
        height: auto !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        border-radius: 16px 16px 0 0;
    }
    .ai-header { cursor: default; }
}
/* ===== Talking waves animation ===== */
.talking-waves {
    display: flex;
    justify-content: center; /* center horizontally */
    align-items: flex-end;   /* waves rise from bottom */
    gap: 6px;                /* space between bars */
    margin: 15px 0;          /* vertical spacing */
    height: 30px;            /* adjust height to match popup */
    width: 100%;             /* take full width of container */
}
.talking-waves span {
    width: 6px;
    background: #4ade80;
    display: inline-block;
    border-radius: 3px;
    animation: wave 1s infinite ease-in-out;
}
.talking-waves span:nth-child(1) { animation-delay: 0s; }
.talking-waves span:nth-child(2) { animation-delay: 0.2s; }
.talking-waves span:nth-child(3) { animation-delay: 0.4s; }

@keyframes wave {
    0%, 100% { height: 5px; }
    50% { height: 20px; }
}

/* Popup position RTL/EN */
html[lang="en"] #ai-popup { right: 20px; left: unset; }
html[lang="ar"] #ai-popup { left: 20px; right: unset; }