/* vAvtobyse CHAT FIX 1 HOTFIX — confirmed Android/PWA layout issues only.
   Does not redesign the header/theme; those stay for the visual block. */

@media (max-width:820px){
  /*
   * Fix confirmed short-word split (e.g. a 3-letter Cyrillic word breaking 2+1).
   * `overflow-wrap:anywhere` from the old shell participates in min-content sizing
   * and can make a fit-content bubble collapse to character width. `break-word`
   * still protects long URLs/tokens, but normal words keep their natural width.
   */
  html.vav-mobile-layout body.vav-shell-mode .message-bubble,
  html.vav-mobile-layout body.vav-shell-mode .message-text{
    overflow-wrap:break-word!important;
    word-break:normal!important;
    hyphens:none!important;
  }

  /* Hide global navigation as soon as the real message field has focus.
     :has() is the primary modern-Chrome path; JS classes below are fallbacks. */
  html.vav-mobile-layout body.vav-shell-mode:has(#messageInput:focus) .mobile-bottom-nav,
  html.vav-mobile-layout body.vav-shell-mode.vav-composer-focused .mobile-bottom-nav,
  html.vav-mobile-layout body.vav-shell-mode.vav-keyboard-open .mobile-bottom-nav{
    display:none!important;
  }

  /* The shell has stronger legacy selectors than CHAT FIX 1. Override them here
     with the same/higher specificity so the compact composer really wins. */
  html.vav-mobile-layout body.vav-shell-mode .composer{
    padding:4px 5px calc(4px + env(safe-area-inset-bottom))!important;
  }
  html.vav-mobile-layout body.vav-shell-mode .composer-row{
    grid-template-columns:minmax(0,1fr) 44px!important;
    gap:4px!important;
    padding:0!important;
    align-items:end!important;
  }
  html.vav-mobile-layout body.vav-shell-mode .composer-input-shell{
    grid-template-columns:31px minmax(0,1fr) 31px!important;
    min-height:44px!important;
    padding:2px!important;
    border-radius:22px!important;
    align-items:end!important;
  }
  html.vav-mobile-layout body.vav-shell-mode .mobile-composer-inline{
    width:31px!important;
    min-width:31px!important;
    height:40px!important;
    min-height:40px!important;
    padding:0!important;
  }
  html.vav-mobile-layout body.vav-shell-mode .mobile-composer-inline img{
    width:20px!important;
    height:20px!important;
  }
  html.vav-mobile-layout body.vav-shell-mode .composer textarea{
    box-sizing:border-box!important;
    width:100%!important;
    min-width:0!important;
    min-height:40px!important;
    height:40px;
    max-height:88px!important;
    margin:0!important;
    padding:9px 2px 8px!important;
    font-size:15px!important;
    line-height:20px!important;
    text-align:left!important;
    resize:none!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    scrollbar-width:none!important;
    -ms-overflow-style:none!important;
    overscroll-behavior:contain!important;
  }
  html.vav-mobile-layout body.vav-shell-mode .composer textarea::-webkit-scrollbar{
    display:none!important;
    width:0!important;
    height:0!important;
  }
  html.vav-mobile-layout body.vav-shell-mode .send-button,
  html.vav-mobile-layout body.vav-shell-mode .mobile-voice-button{
    width:44px!important;
    min-width:44px!important;
    height:44px!important;
    min-height:44px!important;
    flex-basis:44px!important;
  }
  html.vav-mobile-layout body.vav-shell-mode .send-icon-image,
  html.vav-mobile-layout body.vav-shell-mode .mobile-voice-button img{
    width:22px!important;
    height:22px!important;
  }
}

@media (max-width:370px){
  html.vav-mobile-layout body.vav-shell-mode .composer-row{
    grid-template-columns:minmax(0,1fr) 42px!important;
    gap:3px!important;
  }
  html.vav-mobile-layout body.vav-shell-mode .composer-input-shell{
    grid-template-columns:29px minmax(0,1fr) 29px!important;
  }
  html.vav-mobile-layout body.vav-shell-mode .mobile-composer-inline{
    width:29px!important;
    min-width:29px!important;
  }
  html.vav-mobile-layout body.vav-shell-mode .send-button,
  html.vav-mobile-layout body.vav-shell-mode .mobile-voice-button{
    width:42px!important;
    min-width:42px!important;
    height:42px!important;
    min-height:42px!important;
    flex-basis:42px!important;
  }
}