@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&display=swap');

.voice-wave{
    position:absolute;
    bottom:80px;
    right:75px;
    display:flex;
    gap:4px;
    align-items:flex-end;
    height:30px;
}

.voice-wave span{
    width:4px;
    border-radius:10px;
    background:#D4AF37;
    animation:voiceBars .8s infinite ease-in-out;
}

.voice-wave span:nth-child(1){ animation-delay:.1s; }
.voice-wave span:nth-child(2){ animation-delay:.2s; }
.voice-wave span:nth-child(3){ animation-delay:.3s; }
.voice-wave span:nth-child(4){ animation-delay:.4s; }
.voice-wave span:nth-child(5){ animation-delay:.5s; }

@keyframes voiceBars{
    0%{ height:8px; }
    50%{ height:28px; }
    100%{ height:8px; }
}

/* ===========================
   MAIN SYSTEM
=========================== */

.ai-bot-wrapper{
    position:fixed;
    right:15px;
    bottom:80px;
    z-index:999999;
    font-family:'Cairo',sans-serif;
    direction:rtl;
}

/* ===========================
   LAUNCHER
=========================== */

#bot-launcher{
    width:75px;
    height:75px;
    border-radius:50%;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    background: radial-gradient(circle,#1b1b1b,#000);
    border:2px solid #D4AF37;
    box-shadow: 0 0 15px rgba(212,175,55,.6), 0 0 30px rgba(212,175,55,.3);
    transition:.3s;
}

#bot-launcher:hover{
    transform:scale(1.08);
}

#bot-launcher img{
    width:45px;
    height:45px;
}

.online-indicator-glow{
    position:absolute;
    top:4px;
    right:4px;
    width:12px;
    height:12px;
    background:#00ff55;
    border-radius:50%;
    box-shadow: 0 0 10px #00ff55, 0 0 20px #00ff55;
    animation:pulse 1.5s infinite;
}

/* ===========================
   CHAT PANEL
=========================== */

.ai-panel{
    position:fixed;
    right:25px;
    bottom:110px;
    width:420px;
    height:min(700px,calc(100vh - 140px));
    background:#0a0a0a;
    border:1px solid #D4AF37;
    border-radius:20px;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    box-shadow: 0 0 40px rgba(212,175,55,.25);
    animation:chatOpen .25s ease;
}

.ai-panel.expanded{
    width:min(1400px,96vw) !important;
    height:94vh !important;
    top:3vh !important;
    bottom:auto !important;
    left:50% !important;
    right:auto !important;
    transform:translateX(-50%) !important;
    border-radius:22px;
}

/* ===========================
   HEADER
=========================== */

.ai-header{
    background: linear-gradient(180deg, #171717, #000);
    padding:14px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    border-bottom: 1px solid rgba(212,175,55,.25);
}

.profile-section{
    display:flex;
    align-items:center;
    gap:12px;
}

.chat-profile-img{
    width:45px;
    height:45px;
    border-radius:50%;
    border:2px solid #D4AF37;
    box-shadow: 0 0 10px rgba(212,175,55,.3);
}

.bot-info{
    display:flex;
    flex-direction:column;
}

.bot-name{
    color:#D4AF37;
    font-size:15px;
    font-weight:800;
}

.ai-status-text{
    color:#00ff55;
    font-size:11px;
    display:flex;
    align-items:center;
    gap:6px;
}

.ai-status-text::before{
    content:'';
    width:8px;
    height:8px;
    border-radius:50%;
    background:#00ff55;
    box-shadow: 0 0 10px #00ff55;
    animation:pulse 1.5s infinite;
}

.header-buttons{
    display:flex;
    gap:6px;
}

/* ===========================
   HEADER BUTTONS
=========================== */

#chat-expand-btn,
#lang-btn,
.ai-close{
    width:32px;
    height:32px;
    border-radius:50%;
    border:none;
    cursor:pointer;
    color:#D4AF37;
    background:#121212;
    border:1px solid rgba(212,175,55,.25);
    transition:.25s;
}

#chat-expand-btn:hover,
#lang-btn:hover,
.ai-close:hover{
    background:#D4AF37;
    color:#000;
    transform:scale(1.1);
    box-shadow: 0 0 12px rgba(212,175,55,.8);
}

/* ===========================
   MESSAGES
=========================== */

.ai-messages{
    flex:1;
    padding:18px;
    overflow-y:auto;
    display:flex;
    flex-direction:column;
    gap:12px;
    background: radial-gradient(circle at top,#141414,#050505);
}

.ai-messages::-webkit-scrollbar{
    width:6px;
}

.ai-messages::-webkit-scrollbar-thumb{
    background:#D4AF37;
    border-radius:20px;
}

.ai-msg{
    max-width:85%;
    padding:13px 16px;
    border-radius:16px;
    font-size:15px;
    line-height:1.9;
    animation:msgFade .25s ease;
}

.ai-msg.bot{
    background: linear-gradient(145deg, #1f1f1f, #101010);
    color:#fff;
    border:1px solid rgba(212,175,55,.15);
    box-shadow: 0 4px 15px rgba(0,0,0,.35);
    align-self:flex-start;
}

.ai-msg.user{
    background: linear-gradient(145deg, #D4AF37, #FFD700);
    color:#000;
    font-weight:700;
    align-self:flex-end;
    box-shadow: 0 4px 15px rgba(212,175,55,.35);
}

/* ===========================
   QUICK BUTTONS
=========================== */

.bot-options{
    display:grid;
    grid-template-columns: repeat(3,1fr);
    gap:6px;
    margin-top:8px;
}

.bot-options button{
    background:#111;
    border:1px solid #D4AF37;
    color:#D4AF37;
    padding:6px 2px;
    border-radius:6px;
    font-size:10px;
    cursor:pointer;
}

.bot-options button:hover{
    background:#D4AF37;
    color:#000;
    font-weight:bold;
}

/* ===========================
   TYPING
=========================== */

#ai-typing{
    padding:0 15px 12px;
}

.typing-bubble{
    display:inline-flex;
    gap:5px;
    padding:10px 14px;
    border-radius:18px;
    background:#151515;
    border:1px solid rgba(212,175,55,.15);
}

.typing-bubble span{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#D4AF37;
    animation:typingDots 1.2s infinite;
}

/* ===========================
   FOOTER
=========================== */

.ai-footer{
    padding:10px;
    background:#000;
    display:flex;
    gap:5px;
    border-top:1px solid #D4AF37;
}

#ai-input{
    flex:1;
    background:#111;
    border:1px solid #444;
    color:#fff;
    padding:10px;
    border-radius:10px;
    transition:0.3s;
}

#ai-input:focus{
    border-color:#D4AF37;
    box-shadow: 0 0 10px #D4AF37;
    outline:none;
}

#voice-btn,
#ai-send-btn{
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:.25s;
}

#voice-btn{
    border-radius:50%;
    background:#111;
    color:#D4AF37;
    border:1px solid #D4AF37;
}

#voice-btn:hover{
    background:#D4AF37;
    color:#000;
}

#ai-send-btn{
    background:#D4AF37;
    color:#000;
    border:none;
    padding:0 15px;
    border-radius:10px;
    cursor:pointer;
    font-weight:bold;
}

.voice-status{
    position:absolute;
    bottom:120px;
    right:70px;
    background:#111;
    color:#FFD700;
    border:1px solid #D4AF37;
    border-radius:20px;
    padding:8px 14px;
    display:none;
    font-size:12px;
    box-shadow: 0 0 15px rgba(212,175,55,.35);
}

/* ===========================
   MOBILE
=========================== */

@media(max-width:768px){
    .ai-panel{
        width:96vw;
        height:85vh;
        right:2vw;
        bottom:10px;
    }

    .ai-panel.expanded{
        width:98vw !important;
        height:96vh !important;
        left:1vw !important;
        right:auto !important;
        transform:none !important;
        top:2vh !important;
    }
}

/* ===========================
   ANIMATION
=========================== */

@keyframes pulse{
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.6; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes chatOpen{
    from{
        opacity:0;
        transform:translateY(20px) scale(.95);
    }
    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

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

@keyframes typingDots{
    0%,60%,100%{
        transform:translateY(0);
        opacity:.3;
    }
    30%{
        transform:translateY(-5px);
        opacity:1;
    }
}

.ai-hidden { display: none !important; }