/* V1.1.212: keyboard-safe editing and Android embedded viewport corrections.
 * The client must not use a WebView native gesture bar as application content. */
:root{
  --chat-native-safe-bottom:0px;
  --chat-effective-safe-bottom:max(env(safe-area-inset-bottom,0px), var(--chat-native-safe-bottom));
}
/* WebView's CSS env() can be 0 even with an Android navigation overlay.
 * This modest fallback is only for recognized Android in-app WebViews. The
 * native app can set --chat-native-safe-bottom from WindowInsets at runtime. */
:root.chat-android-webview{--chat-native-safe-bottom:18px}
@media(max-width:760px){
  body:not(.in-chat) #member-app.app:not(.hidden){height:var(--chat-app-height,100dvh);max-height:var(--chat-app-height,100dvh);min-height:0}
  #member-app .mobile-tabs{
    box-sizing:border-box!important;display:flex!important;align-items:flex-start!important;
    justify-content:space-around!important;overflow:hidden!important;
    height:calc(58px + var(--chat-effective-safe-bottom))!important;
    min-height:calc(58px + var(--chat-effective-safe-bottom))!important;
    flex:0 0 calc(58px + var(--chat-effective-safe-bottom))!important;
    padding:4px max(12px,env(safe-area-inset-right,0px))
      calc(4px + var(--chat-effective-safe-bottom))
      max(12px,env(safe-area-inset-left,0px))!important;
    background:#f7f6fc!important;
  }
  #member-app .mobile-tabs button{
    flex:1 1 0!important;min-width:0!important;max-width:none;
    height:48px!important;min-height:48px!important;max-height:48px!important;
    margin:0!important;padding:2px!important;
    display:flex!important;flex-direction:column;align-items:center;justify-content:center;
    gap:3px;line-height:1.1;
  }
  #member-app .mobile-tabs svg{flex:none;width:22px;height:22px}
  /* The edit state is explicit: unlike :has(), this also works in older iOS
   * WebViews and doesn't allow the composer to wrap beneath an IME overlay. */
  body.in-chat #member-app .compose.tg-editing-active{
    display:flex!important;flex-direction:column!important;flex-wrap:nowrap!important;
    align-items:stretch!important;justify-content:flex-end!important;
    gap:0!important;max-height:min(225px,48dvh);min-height:0!important;
    padding:6px 12px calc(7px + var(--chat-effective-safe-bottom))!important;
    overflow:visible!important;
  }
  body.keyboard-open.in-chat #member-app .compose.tg-editing-active{
    padding-bottom:7px!important;
  }
  body.in-chat #member-app .compose.tg-editing-active .compose-tools{display:none!important}
  body.in-chat #member-app .compose.tg-editing-active .tg-edit-bar{
    display:grid;order:0;flex:0 0 auto;align-self:stretch;
    min-width:0;width:100%;padding:7px 10px;
    margin:0;border-radius:12px 12px 0 0;
    background:#e9eefb;box-shadow:none;
  }
  body.in-chat #member-app .compose.tg-editing-active #send-form{
    display:flex!important;flex:0 0 auto!important;order:1!important;
    width:100%!important;max-width:100%;min-width:0!important;
    margin:0!important;padding:4px 0 2px!important;
    gap:8px!important;min-height:48px!important;
    background:transparent!important;
  }
  body.in-chat #member-app .compose.tg-editing-active #send-form .compose-voice,
  body.in-chat #member-app .compose.tg-editing-active #send-form .compose-more{display:none!important}
  body.in-chat #member-app .compose.tg-editing-active #send-form .compose-mobile-actions{
    flex:0 0 auto;margin:0!important;gap:4px!important
  }
  body.in-chat #member-app #send-form.tg-is-editing #send-button{
    display:flex!important;flex:0 0 40px;align-items:center;justify-content:center;
    width:40px;min-width:40px!important;height:40px;
    margin:0!important;padding:0!important;border-radius:50%!important;
    background:#287fe1!important;color:#fff!important;font-size:24px!important;
  }
  body.in-chat #member-app .compose.tg-editing-active #message-text{
    flex:1 1 auto!important;min-width:0!important;max-width:none!important;
    height:40px;max-height:96px!important;
  }
  body.in-chat #member-app .compose.tg-editing-active .tg-edit-summary{min-width:0}
  body.in-chat #member-app .compose.tg-editing-active .tg-edit-summary span{
    white-space:nowrap;text-overflow:ellipsis;overflow:hidden;
  }
}
/* Desktop: keep editing summary and input in predictable vertical rows too. */
@media(min-width:761px){
  #member-app .compose.tg-editing-active{display:flex;flex-direction:column;flex-wrap:nowrap!important;align-items:stretch;gap:0}
  #member-app .compose.tg-editing-active .tg-edit-bar{order:-1;width:100%;flex:0 0 auto}
  #member-app .compose.tg-editing-active .compose-tools{display:none!important}
  #member-app .compose.tg-editing-active #send-form{width:100%;min-width:0;flex:0 0 auto}
}