/* VOICE AI 1.5 - Premium Fixed Chat UI */
#atiVoicePanel{
  display:none!important;
  flex-direction:column!important;
  overflow:hidden!important;
  height:min(760px,calc(100vh - 125px))!important;
  max-height:calc(100vh - 125px)!important;
  width:min(460px,calc(100vw - 28px))!important;
}
body.ati-voice-open #atiVoicePanel{
  display:flex!important;
}

/* Header always visible */
#atiVoicePanel .voice-head{
  flex:0 0 auto!important;
  position:relative!important;
  z-index:20!important;
}

/* Only this part scrolls */
#atiVoiceLog{
  flex:1 1 auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch!important;
  padding:14px 14px 10px!important;
  scroll-behavior:smooth!important;
}

/* Actions + controls never disappear */
#atiVoiceActions,
#atiVoiceControls{
  flex:0 0 auto!important;
  position:relative!important;
  z-index:25!important;
  background:linear-gradient(145deg,rgba(7,23,42,.99),rgba(18,31,67,.99))!important;
}

#atiVoiceActions{
  border-top:1px solid rgba(101,213,255,.12)!important;
  padding:10px 14px!important;
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:9px!important;
}

#atiVoiceControls{
  border-top:1px solid rgba(101,213,255,.16)!important;
  padding:12px 14px 14px!important;
  display:grid!important;
  gap:9px!important;
}

#atiVoiceText{
  min-height:46px!important;
  height:46px!important;
  border-radius:16px!important;
}

.voice-buttons{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:9px!important;
}

.voice-buttons button,
#atiSpeakBtn{
  min-height:46px!important;
  height:46px!important;
  border-radius:16px!important;
}

#atiSpeakBtn{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  margin:0!important;
}

/* Better icon cards */
#atiVoiceActions a{
  gap:6px!important;
  min-height:43px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)!important;
}
#atiVoiceActions a:nth-child(1)::before{content:"🚀";}
#atiVoiceActions a:nth-child(2)::before{content:"💳";}
#atiVoiceActions a:nth-child(3)::before{content:"📅";}
#atiVoiceActions a:nth-child(4)::before{content:"🤝";}

/* Message polish */
.ati-msg{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045)!important;
}
.ati-user::before{
  content:"👤 ";
  opacity:.85;
}
.ati-ai::before{
  content:"🤖 ";
  opacity:.9;
}

/* Small status bar */
#atiVoiceStatus{
  display:flex!important;
  align-items:center!important;
  gap:6px!important;
}
#atiVoiceStatus::before{
  content:"●";
  color:#3cffb1;
  text-shadow:0 0 8px rgba(60,255,177,.8);
}

/* On mobile leave room for bottom nav */
@media(max-width:760px){
  #atiVoicePanel{
    left:10px!important;
    right:10px!important;
    bottom:104px!important;
    width:auto!important;
    height:min(650px,calc(100vh - 122px))!important;
    max-height:calc(100vh - 122px)!important;
    border-radius:24px!important;
  }
  #atiVoiceFab{
    right:14px!important;
    bottom:22px!important;
    width:60px!important;
    height:60px!important;
    border-radius:20px!important;
  }
  #atiVoicePanel .voice-head{
    padding:12px!important;
  }
  #atiVoicePanel .voice-avatar{
    width:42px!important;
    height:42px!important;
    border-radius:14px!important;
  }
  #atiVoicePanel .voice-title strong{
    font-size:15px!important;
  }
  #atiVoicePanel .voice-title span{
    font-size:11px!important;
  }
  #atiVoiceClose{
    width:38px!important;
    height:38px!important;
  }
  #atiVoiceActions{
    padding:9px 12px!important;
    gap:8px!important;
  }
  #atiVoiceActions a{
    min-height:40px!important;
    font-size:12.5px!important;
    border-radius:14px!important;
  }
  #atiVoiceControls{
    padding:10px 12px 12px!important;
    gap:8px!important;
  }
  #atiVoiceText{
    min-height:43px!important;
    height:43px!important;
  }
  .voice-buttons button,
  #atiSpeakBtn{
    min-height:43px!important;
    height:43px!important;
    font-size:14px!important;
  }
}

/* Very small height screens */
@media(max-height:690px){
  #atiVoicePanel{
    bottom:88px!important;
    height:calc(100vh - 98px)!important;
    max-height:calc(100vh - 98px)!important;
  }
  #atiVoiceFab{bottom:14px!important;}
  #atiVoiceLog{padding-top:10px!important;}
  .ati-msg{padding:10px 12px!important;font-size:13.5px!important;}
  #atiVoiceActions a{min-height:38px!important;}
  #atiVoiceText,.voice-buttons button,#atiSpeakBtn{height:40px!important;min-height:40px!important;}
}

/* Avoid hidden behind client bottom app nav if present */
body:has(.client-bottom-nav) #atiVoicePanel,
body:has(#atiClientBottomNav) #atiVoicePanel,
body:has(.bottom-nav) #atiVoicePanel{
  bottom:112px!important;
}