/* chatbot_v2_lang_mobilefix_v2.css – v2.6.2
   Fixes:
   - Mobile: send button fully visible (no clipping)
   - Footer uses safe widths and prevents overflow
   Include AFTER your main chatbot CSS.
*/

@media (max-width: 480px){
  #ggw-wrap .ggw-card{
    top: max(8px, env(safe-area-inset-top)) !important;
    left: 8px !important;
    right: 8px !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;

    width: auto !important;
    height: auto !important;
    max-height: none !important;

    border-radius: 14px !important;
  }

  #ggw-wrap .ggw-head{
    padding: 8px 10px !important;
  }

  #ggw-wrap .ggw-body{
    padding: 10px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* ✅ Footer layout: no clipping */
  #ggw-wrap .ggw-foot{
    padding: 8px !important;
    gap: 8px !important;
    min-height: 58px !important;

    display: flex !important;
    align-items: center !important;

    box-sizing: border-box !important;
  }

  #ggw-wrap .ggw-in{
    flex: 1 1 auto !important;
    min-width: 0 !important;         /* allows shrinking without overflow */
    height: 42px !important;
    font-size: 16px !important;      /* prevents iOS zoom */
    box-sizing: border-box !important;
  }

  #ggw-wrap .ggw-send{
    flex: 0 0 auto !important;
    height: 42px !important;
    padding: 0 14px !important;

    min-width: 86px !important;      /* keeps it visible */
    white-space: nowrap !important;
    box-sizing: border-box !important;
  }
}