/* VOICE AI 1.7 - Mobile Fit Fix
   Desktop stays normal. Mobile floats above bottom menu and fits full screen.
*/

/* Desktop: keep widget lower/right and normal size */
@media(min-width:761px){
  #atiVoiceFab{
    right:22px!important;
    bottom:24px!important;
    width:64px!important;
    height:64px!important;
    border-radius:22px!important;
  }
  #atiVoicePanel{
    right:22px!important;
    bottom:100px!important;
    width:min(430px,calc(100vw - 44px))!important;
    height:min(690px,calc(100vh - 118px))!important;
    max-height:calc(100vh - 118px)!important;
    transform:none!important;
  }
}

/* Mobile: panel must appear ABOVE footer nav and always show header + X + controls */
@media(max-width:760px){
  :root{
    --ati-mobile-footer-total: 118px;
    --ati-mobile-top-safe: max(8px, env(safe-area-inset-top));
    --ati-mobile-bottom-safe: max(8px, env(safe-area-inset-bottom));
  }

  #atiVoiceFab{
    position:fixed!important;
    right:16px!important;
    bottom:calc(var(--ati-mobile-footer-total) + 10px)!important;
    width:56px!important;
    height:56px!important;
    border-radius:19px!important;
    font-size:25px!important;
    z-index:2147482600!important;
  }

  #atiVoicePanel{
    position:fixed!important;
    left:8px!important;
    right:8px!important;
    top:calc(var(--ati-mobile-top-safe) + 6px)!important;
    bottom:calc(var(--ati-mobile-footer-total) + 10px)!important;
    width:auto!important;
    height:auto!important;
    max-height:none!important;
    min-height:0!important;
    transform:none!important;
    transform-origin:center!important;
    border-radius:22px!important;
    display:none!important;
    flex-direction:column!important;
    overflow:hidden!important;
    z-index:2147482601!important;
  }

  body.ati-voice-open #atiVoicePanel{
    display:flex!important;
  }

  #atiVoicePanel .voice-head{
    flex:0 0 auto!important;
    min-height:58px!important;
    padding:9px 10px!important;
    gap:9px!important;
  }

  #atiVoicePanel .voice-avatar{
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    border-radius:13px!important;
    font-size:20px!important;
  }

  #atiVoicePanel .voice-title{
    min-width:0!important;
    overflow:hidden!important;
  }

  #atiVoicePanel .voice-title strong{
    font-size:14px!important;
    line-height:1.1!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  #atiVoicePanel .voice-title strong:after{
    content:""!important;
  }

  #atiVoicePanel .voice-title span{
    font-size:10.8px!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  #atiVoiceClose{
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    border-radius:14px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    font-size:19px!important;
  }

  #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:10px!important;
  }

  .ati-msg{
    margin-bottom:8px!important;
    padding:9px 10px!important;
    font-size:13px!important;
    line-height:1.38!important;
    border-radius:14px!important;
  }

  .ati-user{
    margin-left:24px!important;
  }

  .ati-ai{
    margin-right:18px!important;
  }

  .ati-user::before,
  .ati-ai::before{
    content:""!important;
  }

  #atiVoiceActions{
    flex:0 0 auto!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:7px!important;
    padding:8px 10px!important;
    border-top:1px solid rgba(101,213,255,.12)!important;
    background:linear-gradient(145deg,rgba(7,23,42,.99),rgba(18,31,67,.99))!important;
  }

  #atiVoiceActions a{
    min-height:36px!important;
    height:36px!important;
    padding:7px!important;
    border-radius:13px!important;
    font-size:12px!important;
    line-height:1!important;
    gap:5px!important;
  }

  #atiVoiceActions a::before,
  #atiVoiceActions a:nth-child(1)::before,
  #atiVoiceActions a:nth-child(2)::before,
  #atiVoiceActions a:nth-child(3)::before,
  #atiVoiceActions a:nth-child(4)::before{
    content:""!important;
    display:none!important;
  }

  .ati-clean-icon{
    display:inline-flex!important;
    width:16px!important;
    min-width:16px!important;
    justify-content:center!important;
    font-size:13px!important;
    line-height:1!important;
  }

  #atiVoiceControls{
    flex:0 0 auto!important;
    padding:8px 10px 10px!important;
    gap:7px!important;
    border-top:1px solid rgba(101,213,255,.16)!important;
    background:linear-gradient(145deg,rgba(7,23,42,.99),rgba(18,31,67,.99))!important;
  }

  #atiVoiceText{
    height:38px!important;
    min-height:38px!important;
    border-radius:13px!important;
    font-size:13.5px!important;
    padding:8px 10px!important;
  }

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

  .voice-buttons button,
  #atiSpeakBtn{
    height:38px!important;
    min-height:38px!important;
    border-radius:13px!important;
    font-size:13.5px!important;
    padding:7px!important;
  }

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

  #atiVoiceStatus{
    font-size:11px!important;
    min-height:14px!important;
    line-height:1.2!important;
  }
}

/* Tiny screens and short Android Chrome windows */
@media(max-width:760px) and (max-height:700px){
  :root{
    --ati-mobile-footer-total: 96px;
  }

  #atiVoicePanel{
    left:6px!important;
    right:6px!important;
    top:6px!important;
    bottom:calc(var(--ati-mobile-footer-total) + 6px)!important;
    border-radius:20px!important;
  }

  #atiVoicePanel .voice-head{
    min-height:52px!important;
    padding:7px 9px!important;
  }

  #atiVoicePanel .voice-avatar{
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
  }

  #atiVoiceClose{
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
  }

  #atiVoiceLog{
    padding:8px!important;
  }

  .ati-msg{
    font-size:12.4px!important;
    padding:8px 9px!important;
    margin-bottom:6px!important;
  }

  #atiVoiceActions{
    padding:7px 9px!important;
    gap:6px!important;
  }

  #atiVoiceActions a{
    height:34px!important;
    min-height:34px!important;
    font-size:11.5px!important;
  }

  #atiVoiceControls{
    padding:7px 9px 8px!important;
    gap:6px!important;
  }

  #atiVoiceText,
  .voice-buttons button,
  #atiSpeakBtn{
    height:35px!important;
    min-height:35px!important;
    font-size:12.5px!important;
  }

  #atiVoiceStatus{
    display:none!important;
  }

  #atiVoiceFab{
    bottom:calc(var(--ati-mobile-footer-total) + 8px)!important;
    width:52px!important;
    height:52px!important;
  }
}

/* If page footer nav is lifted, still reserve safe space */
body.ati-has-lifted-bottom-nav #atiVoiceFab{
  bottom:calc(104px + env(safe-area-inset-bottom))!important;
}
body.ati-has-lifted-bottom-nav #atiVoicePanel{
  bottom:calc(104px + env(safe-area-inset-bottom))!important;
}