body{
font-family:Segoe UI;
}

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

#ai-launcher{
position:fixed;
bottom:25px;
right:25px;
width:60px;
height:60px;
border-radius:50%;
background:linear-gradient(135deg,#4CAF50,#00e676);
display:flex;
align-items:center;
justify-content:center;
font-size:26px;
color:white;
cursor:pointer;
box-shadow:0 10px 30px rgba(0,0,0,.4);
transition:.3s;
z-index:999;
}

#ai-launcher:hover{
transform:scale(1.1);
}

/* ======================
WIDGET PANEL
====================== */

#ai-widget{
position:fixed;
bottom:100px;
right:25px;
width:320px;
background:linear-gradient(
145deg,
rgba(40,40,70,.9),
rgba(15,15,25,.9)
);
border:1px solid rgba(255,255,255,.08);
backdrop-filter:blur(18px);
border-radius:20px;
padding:20px;
color:white;
box-shadow:0 20px 40px rgba(0,0,0,.5);
animation:widgetOpen .3s ease;
z-index:999;
}

#call-btn:active,
#end-btn:active{
transform:scale(.9);
}
@keyframes widgetOpen{
from{
opacity:0;
transform:translateY(20px);
}
to{
opacity:1;
transform:translateY(0);
}
}

.hidden{
display:none;
}

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

#ai-header{
display:flex;
justify-content:space-between;
align-items:center;
font-weight:600;
margin-bottom:15px;
}

#close-btn{
cursor:pointer;
opacity:.7;
}

/* ======================
BOT AVATAR
====================== */

.bot-avatar{
width:90px;
height:90px;
margin:auto;
border-radius:50%;
background:radial-gradient(circle at 30% 30%, #00ffb7, #4CAF50, #003b2f);
box-shadow:0 0 30px rgba(0,255,183,.8);
position:relative;
animation:orbGlow 3s ease-in-out infinite;
}

@keyframes orbGlow{
0%{box-shadow:0 0 20px rgba(0,255,183,.5)}
50%{box-shadow:0 0 45px rgba(0,255,183,1)}
100%{box-shadow:0 0 20px rgba(0,255,183,.5)}
}



@keyframes launcherPulse{
0%{box-shadow:0 0 0 rgba(0,230,118,0.7)}
70%{box-shadow:0 0 25px rgba(0,230,118,0)}
100%{box-shadow:0 0 0 rgba(0,230,118,0)}
}

.bot-speaking{
animation:orbSpeak 1s infinite alternate;
}

@keyframes orbSpeak{
0%{
transform:scale(1);
box-shadow:0 0 30px #00ffc3;
}
100%{
transform:scale(1.15);
box-shadow:0 0 60px #00ffc3;
}
}

.bot-avatar::after{
content:'';
position:absolute;
width:100%;
height:100%;
border-radius:50%;
background:#00e676;
animation:pulse 2s infinite;
opacity:.4;
}

@keyframes pulse{
0%{transform:scale(1)}
70%{transform:scale(1.7);opacity:0}
100%{opacity:0}
}

/* ======================
VOICE WAVE
====================== */

#voice-wave{
display:none;
justify-content:center;
gap:5px;
margin:15px 0;
height:40px;
}

#voice-wave span{
width:6px;
background:linear-gradient(to top,#00e676,#00ffc3);
border-radius:4px;
box-shadow:0 0 8px #00e676;
animation:wave 1s infinite ease-in-out;
}



#voice-wave span:nth-child(1){height:10px}
#voice-wave span:nth-child(2){height:20px}
#voice-wave span:nth-child(3){height:30px}
#voice-wave span:nth-child(4){height:20px}
#voice-wave span:nth-child(5){height:10px}

@keyframes wave{
0%{transform:scaleY(.4)}
50%{transform:scaleY(1.3)}
100%{transform:scaleY(.4)}
}
.mic-active{
color:#00ffc3;
animation:micPulse 1.5s infinite;
}

@keyframes micPulse{
0%{text-shadow:0 0 5px #00ffc3}
50%{text-shadow:0 0 18px #00ffc3}
100%{text-shadow:0 0 5px #00ffc3}
}

/* ======================
STATUS
====================== */

#bot-status{
text-align:center;
font-size:14px;
color:#ccc;
}

#mic-indicator{
text-align:center;
font-size:30px;
margin-top:10px;
}

/* ======================
CALL BUTTONS
====================== */

.call-controls{
display:flex;
justify-content:center;
gap:20px;
margin-top:20px;
}

#call-btn{
width:65px;
height:65px;
border-radius:50%;
border:none;
background:linear-gradient(135deg,#4CAF50,#00e676);
font-size:26px;
cursor:pointer;
color:white;
box-shadow:0 0 20px rgba(0,230,118,.7);
transition:.3s;
}

#call-btn:hover{
transform:scale(1.1);
}

#end-btn{
width:65px;
height:65px;
border-radius:50%;
border:none;
background:#ff3b30;
font-size:22px;
cursor:pointer;
color:white;
box-shadow:0 0 20px rgba(255,59,48,.7);
transition:.3s;
}

#end-btn:hover{
transform:scale(1.1);
}