/* VOICE AI 1.3 - Premium Sales Agent */
:root{
  --ati-va-bg:#07172a;
  --ati-va-bg2:#101f40;
  --ati-va-line:rgba(101,213,255,.22);
  --ati-va-text:#eaf5ff;
  --ati-va-muted:#bcd0e8;
  --ati-va-blue:#2cc9ff;
  --ati-va-purple:#7357ff;
}
#atiVoiceFab{
  position:fixed!important;
  right:18px!important;
  bottom:108px!important;
  z-index:2147482600!important;
  width:68px!important;
  height:68px!important;
  border-radius:24px!important;
  border:1px solid rgba(101,213,255,.32)!important;
  background:linear-gradient(135deg,var(--ati-va-blue),var(--ati-va-purple))!important;
  color:#061121!important;
  display:grid!important;
  place-items:center!important;
  font-size:30px!important;
  font-weight:950!important;
  box-shadow:0 22px 64px rgba(0,0,0,.48),0 0 0 8px rgba(44,201,255,.08)!important;
  cursor:pointer!important;
  transition:transform .18s ease, box-shadow .18s ease!important;
}
#atiVoiceFab:hover{transform:translateY(-2px) scale(1.02)!important}
#atiVoiceFab.speaking{animation:atiPulse 1.15s ease-in-out infinite}
@keyframes atiPulse{0%,100%{box-shadow:0 22px 64px rgba(0,0,0,.48),0 0 0 6px rgba(44,201,255,.08)}50%{box-shadow:0 22px 64px rgba(0,0,0,.48),0 0 0 16px rgba(44,201,255,.16)}}

#atiVoicePanel{
  position:fixed!important;
  right:18px!important;
  bottom:190px!important;
  z-index:2147482601!important;
  width:min(440px,calc(100vw - 32px))!important;
  max-height:76vh!important;
  display:none!important;
  overflow:hidden!important;
  border-radius:30px!important;
  background:linear-gradient(145deg,rgba(7,23,42,.98),rgba(18,31,67,.98))!important;
  border:1px solid rgba(101,213,255,.26)!important;
  box-shadow:0 30px 94px rgba(0,0,0,.66)!important;
  color:var(--ati-va-text)!important;
  font-family:Arial,Helvetica,sans-serif!important;
}
body.ati-voice-open #atiVoicePanel{display:block!important}

#atiVoicePanel .voice-head{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  padding:16px!important;
  border-bottom:1px solid rgba(101,213,255,.14)!important;
  background:linear-gradient(135deg,rgba(44,201,255,.10),rgba(115,87,255,.08))!important;
}
#atiVoicePanel .voice-avatar{
  width:46px!important;
  height:46px!important;
  border-radius:16px!important;
  display:grid!important;
  place-items:center!important;
  background:linear-gradient(135deg,var(--ati-va-blue),var(--ati-va-purple))!important;
  box-shadow:0 10px 26px rgba(44,201,255,.16)!important;
  color:#061121!important;
  font-size:23px!important;
  flex:0 0 auto!important;
}
#atiVoicePanel .voice-title{min-width:0!important;flex:1!important}
#atiVoicePanel .voice-title strong{
  display:block!important;
  color:#fff!important;
  font-size:17px!important;
  line-height:1.15!important;
}
#atiVoicePanel .voice-title span{
  display:flex!important;
  align-items:center!important;
  gap:6px!important;
  margin-top:4px!important;
  color:#9ff1ff!important;
  font-size:12px!important;
  font-weight:800!important;
}
#atiVoicePanel .voice-dot{
  width:8px!important;
  height:8px!important;
  border-radius:50%!important;
  background:#3cffb1!important;
  display:inline-block!important;
  box-shadow:0 0 12px rgba(60,255,177,.8)!important;
}
#atiVoiceClose{
  width:42px!important;
  height:42px!important;
  border-radius:16px!important;
  border:1px solid rgba(101,213,255,.18)!important;
  background:rgba(255,255,255,.055)!important;
  color:#eaf5ff!important;
  font-weight:950!important;
  font-size:20px!important;
  cursor:pointer!important;
  flex:0 0 auto!important;
}

#atiVoiceLog{
  min-height:210px!important;
  max-height:330px!important;
  overflow:auto!important;
  padding:14px!important;
  background:rgba(0,0,0,.10)!important;
}
.ati-msg{
  margin:0 0 10px!important;
  padding:12px 14px!important;
  border-radius:18px!important;
  line-height:1.48!important;
  font-size:14.5px!important;
  word-break:break-word!important;
  overflow-wrap:anywhere!important;
}
.ati-user{
  background:rgba(44,201,255,.13)!important;
  border:1px solid rgba(44,201,255,.20)!important;
  margin-left:38px!important;
}
.ati-ai{
  background:rgba(255,255,255,.055)!important;
  border:1px solid rgba(101,213,255,.13)!important;
  margin-right:28px!important;
}
.ati-typing{
  display:none!important;
  align-items:center!important;
  gap:6px!important;
  color:#a8c4e3!important;
  font-size:13px!important;
  padding:0 14px 10px!important;
}
body.ati-thinking .ati-typing{display:flex!important}
.ati-typing i{
  width:6px!important;
  height:6px!important;
  border-radius:50%!important;
  background:#8ee7ff!important;
  animation:atiBlink 1s infinite ease-in-out!important;
}
.ati-typing i:nth-child(2){animation-delay:.15s!important}
.ati-typing i:nth-child(3){animation-delay:.3s!important}
@keyframes atiBlink{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}

#atiVoiceActions{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:9px!important;
  padding:12px 14px!important;
  background:rgba(6,17,31,.38)!important;
  border-top:1px solid rgba(101,213,255,.10)!important;
  border-bottom:1px solid rgba(101,213,255,.10)!important;
}
#atiVoiceActions a{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:44px!important;
  padding:10px!important;
  border-radius:16px!important;
  background:rgba(255,255,255,.055)!important;
  border:1px solid rgba(101,213,255,.15)!important;
  color:#eaf5ff!important;
  text-decoration:none!important;
  font-weight:950!important;
  text-align:center!important;
  font-size:13px!important;
  white-space:normal!important;
  line-height:1.12!important;
}
#atiVoiceActions a.primary{
  background:linear-gradient(135deg,var(--ati-va-blue),var(--ati-va-purple))!important;
  color:#061121!important;
  border:0!important;
}
#atiVoiceActions a:hover{filter:brightness(1.08)!important}

#atiVoiceControls{
  padding:14px!important;
  display:grid!important;
  gap:10px!important;
}
#atiVoiceText{
  width:100%!important;
  min-height:48px!important;
  border-radius:17px!important;
  border:1px solid rgba(101,213,255,.18)!important;
  background:#06111f!important;
  color:#eaf5ff!important;
  padding:12px 14px!important;
  font-size:16px!important;
  outline:none!important;
}
#atiVoiceText:focus{border-color:rgba(44,201,255,.42)!important}
.voice-buttons{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:10px!important;
}
.voice-buttons button,#atiSpeakBtn{
  min-height:48px!important;
  border-radius:17px!important;
  border:1px solid rgba(101,213,255,.18)!important;
  font-weight:950!important;
  cursor:pointer!important;
  font-size:15px!important;
}
#atiTalkBtn{
  background:linear-gradient(135deg,var(--ati-va-blue),var(--ati-va-purple))!important;
  color:#061121!important;
  border:0!important;
}
#atiSendBtn,#atiSpeakBtn{
  background:rgba(255,255,255,.055)!important;
  color:#eaf5ff!important;
}
#atiSpeakBtn{width:100%!important}
#atiVoiceStatus{
  color:#a8c4e3!important;
  font-size:12.5px!important;
  line-height:1.45!important;
  min-height:18px!important;
}

@media(max-width:760px){
  #atiVoiceFab{
    right:14px!important;
    bottom:96px!important;
    width:62px!important;
    height:62px!important;
    border-radius:21px!important;
  }
  #atiVoicePanel{
    left:12px!important;
    right:12px!important;
    bottom:168px!important;
    width:auto!important;
    max-height:72vh!important;
    border-radius:26px!important;
  }
  #atiVoiceActions{grid-template-columns:1fr 1fr!important}
  #atiVoiceLog{max-height:285px!important}
}