/*
|--------------------------------------------------------------------------
| Phase 18.9.5.28.5.8.6.6
| AI Assistant Mobile Input Bar & Floating Button Legacy Match Fix
|--------------------------------------------------------------------------
| Scope: AI assistant public widget visual CSS only.
| Reference: old working Phase 175 floating assistant behavior.
*/

@media(max-width:640px){
  /* Keep root as a small fixed anchor. Never let responsive-system stretch it. */
  body.marketak-responsive-v18952858 #marketak-ai-widget.marketak-ai-widget{
    position:fixed!important;
    top:auto!important;
    inset-block-start:auto!important;
    bottom:max(16px,env(safe-area-inset-bottom))!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    display:block!important;
    z-index:2147483000!important;
  }

  body.marketak-responsive-v18952858 #marketak-ai-widget.marketak-ai-left{
    left:max(14px,env(safe-area-inset-left))!important;
    right:auto!important;
  }

  body.marketak-responsive-v18952858 #marketak-ai-widget.marketak-ai-right{
    right:max(14px,env(safe-area-inset-right))!important;
    left:auto!important;
  }

  body.marketak-responsive-v18952858 #marketak-ai-widget.is-open.marketak-ai-widget{
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
  }

  /* Legacy round icon: fixed size, no right/left drift caused by open state. */
  body.marketak-responsive-v18952858 #marketak-ai-toggle.marketak-ai-fab,
  body.marketak-responsive-v18952858 #marketak-ai-toggle.marketak-ai-fab[type="button"]{
    position:relative!important;
    z-index:2147483003!important;
    display:grid!important;
    place-items:center!important;
    width:62px!important;
    min-width:62px!important;
    max-width:62px!important;
    height:62px!important;
    min-height:62px!important;
    max-height:62px!important;
    padding:0!important;
    margin:0!important;
    border-radius:999px!important;
    flex:0 0 62px!important;
    transform:none!important;
    translate:none!important;
  }

  body.marketak-responsive-v18952858 #marketak-ai-toggle.marketak-ai-fab b{
    width:42px!important;
    min-width:42px!important;
    max-width:42px!important;
    height:42px!important;
    min-height:42px!important;
    max-height:42px!important;
    margin:0!important;
  }

  body.marketak-responsive-v18952858 #marketak-ai-toggle.marketak-ai-fab small{
    display:none!important;
  }

  /* Legacy floating panel above the icon. */
  body.marketak-responsive-v18952858 #marketak-ai-panel.marketak-ai-panel{
    position:fixed!important;
    top:auto!important;
    bottom:calc(max(16px,env(safe-area-inset-bottom)) + 76px)!important;
    width:min(372px,calc(100vw - 28px))!important;
    min-width:0!important;
    max-width:calc(100vw - 28px)!important;
    height:min(548px,calc(100dvh - 118px))!important;
    min-height:360px!important;
    max-height:calc(100dvh - 118px)!important;
    margin:0!important;
    overflow:hidden!important;
    transform:none!important;
    translate:none!important;
  }

  body.marketak-responsive-v18952858 #marketak-ai-widget.marketak-ai-left #marketak-ai-panel.marketak-ai-panel{
    left:max(14px,env(safe-area-inset-left))!important;
    right:auto!important;
  }

  body.marketak-responsive-v18952858 #marketak-ai-widget.marketak-ai-right #marketak-ai-panel.marketak-ai-panel{
    right:max(14px,env(safe-area-inset-right))!important;
    left:auto!important;
  }

  /* Critical fix from the screenshot: responsive-system sets all submit buttons to width:100%.
     This assistant button must stay compact so the input keeps the wide area. */
  body.marketak-responsive-v18952858 #marketak-ai-panel .marketak-ai-form{
    direction:rtl!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:8px!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    padding:10px!important;
    flex:0 0 auto!important;
  }

  body.marketak-responsive-v18952858 #marketak-ai-panel .marketak-ai-form input,
  body.marketak-responsive-v18952858 #marketak-ai-panel .marketak-ai-form input[type="text"]{
    order:1!important;
    flex:1 1 auto!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    height:46px!important;
    min-height:46px!important;
    max-height:46px!important;
    padding:0 13px!important;
    margin:0!important;
    border-radius:16px!important;
    box-sizing:border-box!important;
  }

  body.marketak-responsive-v18952858 #marketak-ai-panel .marketak-ai-form button,
  body.marketak-responsive-v18952858 #marketak-ai-panel .marketak-ai-form button[type="submit"]{
    order:2!important;
    flex:0 0 78px!important;
    width:78px!important;
    min-width:78px!important;
    max-width:78px!important;
    height:46px!important;
    min-height:46px!important;
    max-height:46px!important;
    padding:0!important;
    margin:0!important;
    border-radius:16px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    white-space:nowrap!important;
    box-sizing:border-box!important;
  }
}

@media(max-width:380px){
  body.marketak-responsive-v18952858 #marketak-ai-panel.marketak-ai-panel{
    width:calc(100vw - 22px)!important;
    max-width:calc(100vw - 22px)!important;
  }

  body.marketak-responsive-v18952858 #marketak-ai-widget.marketak-ai-left #marketak-ai-panel.marketak-ai-panel{
    left:11px!important;
  }

  body.marketak-responsive-v18952858 #marketak-ai-widget.marketak-ai-right #marketak-ai-panel.marketak-ai-panel{
    right:11px!important;
  }

  body.marketak-responsive-v18952858 #marketak-ai-panel .marketak-ai-form button,
  body.marketak-responsive-v18952858 #marketak-ai-panel .marketak-ai-form button[type="submit"]{
    flex-basis:72px!important;
    width:72px!important;
    min-width:72px!important;
    max-width:72px!important;
    font-size:13px!important;
  }
}

@supports not (height:100dvh){
  @media(max-width:640px){
    body.marketak-responsive-v18952858 #marketak-ai-panel.marketak-ai-panel{
      height:min(548px,calc(100vh - 118px))!important;
      max-height:calc(100vh - 118px)!important;
    }
  }
}
