/* The installed app fills the screen, while controls stay clear of the notch
   and home indicator. Variables can also be overridden by local device QA. */
:root { --safe-top:env(safe-area-inset-top,0px); --safe-bottom:env(safe-area-inset-bottom,0px); --safe-left:env(safe-area-inset-left,0px); --safe-right:env(safe-area-inset-right,0px); }
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
button,a,input,select,textarea { touch-action:manipulation; }
.mobile-msg-more { display:none; }
@media(max-width:900px) {
  html,body { overscroll-behavior:none; }
  body { position:fixed; inset:0; width:100%; height:var(--app-height,100dvh); }
  .app,.app.hide-members { height:100%; min-height:0; padding:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left); }
  .chat { min-height:0; overflow:hidden; }
  .chat-head { min-height:56px; flex:0 0 56px; gap:2px; padding:0 6px; }
  .chat-head .conv-title { min-width:0; overflow:hidden; gap:6px; }
  .chat-head h2 { font-size:17px; }
  .head-actions { flex:none; gap:0; }
  .chat-head .icon-btn { width:40px; height:44px; min-width:40px; }
  .messages { min-height:0; overflow-x:hidden; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding-top:10px; overflow-wrap:anywhere; }
  .msg { grid-template-columns:44px minmax(0,1fr); padding-left:6px; }
  .msg .content { overflow-wrap:anywhere; }
  .msg-body { padding-right:28px; }
  .mobile-msg-more { display:grid; place-items:center; position:absolute; right:4px; top:0; width:36px; height:40px; font-size:24px; color:var(--mut); }
  .msg .msg-actions { display:none; }
  .msg[data-id^="pending_"] .mobile-msg-more { display:none; }
  .msg-actions { max-width:calc(100vw - 24px); }
  .composer { margin:0 6px 6px; min-width:0; }
  .composer-row { padding:4px; min-width:0; }
  .composer-row #msgInput { width:0; min-width:0; flex:1 1 0; font-size:16px; height:44px; }
  .composer-row .icon-btn { width:40px; min-width:40px; height:44px; }
  .composer-row .send { min-height:44px; padding:0 10px; font-size:13px; flex:none; }
  .composer-row #spoilerBtn { width:34px; min-width:34px; }
  input,textarea,select { font-size:max(16px,1rem)!important; }
  .rail,.sidebar,.members { top:0; bottom:auto; height:var(--app-height,100dvh); padding-top:var(--safe-top); padding-bottom:var(--safe-bottom); }
  .rail { width:calc(64px + var(--safe-left)); padding-left:var(--safe-left); }
  .sidebar { left:calc(64px + var(--safe-left)); width:min(300px,calc(100vw - 64px - var(--safe-left) - 24px)); }
  .members { padding-right:var(--safe-right); }
  .side-list { min-height:0; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
  .set-tab,.channel,.member,.menu-item { min-height:44px; }
  .settings { height:var(--app-height,100dvh); bottom:auto; padding:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left); min-height:0; }
  .set-main { min-height:0; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
  .set-nav-inner { padding:6px; }
  .set-nav { min-width:0; }
  .set-content { padding:58px 12px 24px; }
  .set-close { z-index:3; top:6px; right:10px; width:42px; height:42px; display:grid; place-items:center; }
  .profile-edit { gap:20px; }
  .profile-edit .preview-col { max-width:100%; }
  .profile-edit .save-bar { bottom:0; padding:10px; background:var(--bg2); }
  .profile-edit .set-block { padding:14px; }
  .profile-edit .row { flex-wrap:wrap; }
  .profile-edit form { min-width:0; width:100%; }
  .badge-grid { grid-template-columns:1fr; }
  .call-panel.stage { padding:10px 8px; overflow:hidden; }
  .call-grid { overscroll-behavior:contain; align-content:start; }
  .call-grid,.call-grid[data-count="1"],.call-grid[data-count="2"] { grid-template-columns:minmax(0,1fr); }
  .call-controls { flex-wrap:wrap; gap:8px; justify-content:center; }
  .call-controls .ctrl { min-width:44px; min-height:44px; }
  .tile { min-height:120px; max-width:100%; }
  .tile video { max-height:45vh; object-fit:contain; }
  .incoming { left:8px; right:8px; top:calc(var(--safe-top) + 8px); width:auto; max-width:none; }
  dialog { max-height:calc(var(--app-height,100dvh) - var(--safe-top) - var(--safe-bottom) - 20px); width:calc(100vw - var(--safe-left) - var(--safe-right) - 20px); }
  #modalForm { max-height:calc(var(--app-height,100dvh) - var(--safe-top) - var(--safe-bottom) - 22px); }
  .modal-body { overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
  .menu,.picker { max-height:calc(var(--app-height,100dvh) - var(--safe-top) - var(--safe-bottom) - 16px); max-width:calc(100vw - 16px); overflow-y:auto; }
  .auth { height:100%; min-height:0; padding:calc(var(--safe-top) + 16px) calc(var(--safe-right) + 12px) calc(var(--safe-bottom) + 16px) calc(var(--safe-left) + 12px); -webkit-overflow-scrolling:touch; }
  .auth-card { max-width:100%; min-width:0; }
  .auth-top { flex-wrap:wrap; gap:12px; }
  .toasts { bottom:calc(var(--safe-bottom) + 80px); max-width:calc(100vw - 20px); }
  .install-app-btn { position:fixed; top:auto; bottom:calc(var(--safe-bottom) + 12px); right:calc(var(--safe-right) + 12px); max-width:calc(100vw - 24px); }
  body:has(#auth[hidden]) .install-app-btn { display:none; }
  html[data-keyboard-open="true"] .app { padding-bottom:0; }
  html[data-keyboard-open="true"] .install-app-btn { display:none; }
}
@media(max-width:360px) { .chat-head .icon-btn { width:36px; min-width:36px; } .composer-row #spoilerBtn { display:none; } }
@media(max-width:900px) and (max-height:480px) { .call-controls { gap:4px; } .call-panel.stage { gap:6px; } .tile { min-height:90px; } .preview-col { display:none; } }

@media(max-width:900px){dialog[open]{top:calc(var(--safe-top) + 10px);bottom:auto;margin:0 auto}.composer-menu{left:0}}