/* App-sized mobile conversations: one scrollable message pane, one bottom composer. */
@media(max-width:760px){
  html{scroll-padding-bottom:80px}
  input,textarea,select,.rich-composer .ql-editor{font-size:16px}
  .mobile-keyboard-open .mobile-navigation{position:static}
  .conversation-open #global-status:not([hidden]){padding-right:48px;font-size:13px;line-height:1.5}
  .mobile-notice-close{position:absolute;right:0;top:0;width:44px;min-height:44px;padding:4px;background:transparent;color:inherit;font-size:22px}
  body:has(#chats-view:not([hidden]) #chat-active:not([hidden])),body:has(#posts-view:not([hidden]) #post-detail:not([hidden])){overflow:hidden}
  #chats-view:not([hidden]) .chat-main:has(#chat-active:not([hidden])),#posts-view:not([hidden]) #post-detail:not([hidden]){
    position:fixed!important;inset:auto 0 auto 0;top:var(--mobile-visual-top,0px);height:var(--mobile-visual-height,100dvh);width:100%;max-width:none;margin:0;padding:0!important;border:0;border-radius:0;z-index:40;background:var(--paper);overflow:hidden;display:flex;flex-direction:column;
  }
  #chat-active:not([hidden]){display:flex;flex-direction:column;flex:1;min-height:0;position:relative}
  #post-detail>.toolbar{flex:none;padding:5px 10px;margin:0;border-bottom:1px solid var(--line);min-height:44px}
  #post-detail>.toolbar>.muted{display:none}
  #post-detail>.inquiry-conversation{display:flex;flex:1;flex-direction:column;min-height:0;width:100%;border:0;border-radius:0}
  #chat-active>.conversation-heading,#post-detail .conversation-heading{flex:none;padding:5px 10px;gap:6px;border-bottom:1px solid var(--line)}
  #chats-view.room-open #chat-active>.conversation-heading{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center}
  #chat-active .chat-back{grid-column:auto;grid-row:1;min-width:44px;min-height:44px;font-size:0!important;padding:0!important}
  #chat-active .chat-back::before{content:'←';font-size:23px}
  #chat-active .conversation-heading h2,#post-detail .conversation-heading h2{font-size:15px;line-height:1.4;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #chat-active #chat-members{font-size:12px;min-height:24px;padding:0}
  #chat-active #refresh-chat{font-size:11px;min-height:44px}
  #post-detail .post-meta{font-size:11px;margin:0}
  #post-detail #inquiry-actions .quiet{font-size:11px;min-height:36px}
  #chat-active>.chat-tools-bar{flex:none;padding:4px 10px;gap:6px;flex-wrap:nowrap;overflow-x:auto}
  #chat-active>.chat-tools-bar button{min-height:36px;font-size:12px;white-space:nowrap;padding:5px 9px}
  #chat-active .message-stream,#post-detail .inquiry-stream{height:auto!important;min-height:35px!important;max-height:none!important;flex:1 1 0;overflow-y:auto;overscroll-behavior:contain;padding:12px 10px;scroll-behavior:auto}
  #chat-active>.chat-pinned{flex:none;max-height:76px;overflow:auto;font-size:12px;padding:5px 10px}
  #chat-active>.history-button{flex:none;min-height:32px;padding:4px;font-size:12px}
  #chat-active>.message-composer,#post-detail .message-composer{position:relative;flex:none;margin:0;padding:7px 8px max(7px,env(safe-area-inset-bottom));gap:6px;align-items:end;max-height:60%;overflow-y:auto;overscroll-behavior:contain;background:var(--paper)}
  #chat-active .message-composer>.primary,#post-detail .message-composer>.primary{min-height:44px;min-width:52px;padding:8px;font-size:13px}
  #chat-active .compact-composer .editor-body .ql-editor,#post-detail .compact-composer .editor-body .ql-editor{min-height:44px;max-height:min(130px,25dvh);padding:9px 10px;line-height:1.5;font-size:16px}
  #chat-active .composer-options,#post-detail .composer-options{gap:5px;flex-wrap:nowrap;overflow-x:auto;padding:4px 6px;min-width:0}
  #chat-active .composer-options button,#chat-active .composer-options .upload-label,#post-detail .composer-options button,#post-detail .composer-options .upload-label{font-size:11px;min-height:32px;white-space:nowrap;padding:5px 7px;flex-shrink:0}
  #chat-active .upload-area:has(.upload-list:empty),#post-detail .upload-area:has(.upload-list:empty){display:none}
  #chat-active .upload-area:has(.upload-list:not(:empty)),#post-detail .upload-area:has(.upload-list:not(:empty)){max-height:90px;overflow:auto;padding:6px}
  #chat-active .upload-area>small,#post-detail .upload-area>small{font-size:10px}
  #chat-active .reply-mode,#post-detail .reply-mode{padding:5px 8px;font-size:12px;max-height:64px;overflow:auto}
  #chat-active .new-message-button,#post-detail .new-message-button{bottom:calc(var(--mobile-composer-height,140px) + 8px);right:12px;min-height:36px;font-size:12px;padding:6px 11px}
  .mobile-keyboard-open #chat-active>.chat-tools-bar{display:none}
  .mobile-keyboard-open #chat-active>.chat-pinned{max-height:40px}
  .announcement-edit,.resource-editor-panel,.compose-panel{padding:16px 12px}
  .announcement-edit .section-help,.resource-editor-panel .section-help,.compose-panel .section-help{font-size:12px;margin:8px 0 14px}
  .announcement-edit h2,.resource-editor-panel h2,.compose-panel h2{font-size:18px}
  .announcement-edit .form-grid,.resource-editor-panel .form-grid,#post-form .form-grid{grid-template-columns:1fr;gap:12px}
  .announcement-edit form,.resource-editor-panel form,#post-form{gap:14px}
  .rich-composer .editor-toolbar{max-height:110px;overflow:auto}
  .rich-composer:not(.compact-composer) .ql-editor{min-height:140px;max-height:45dvh;overflow:auto}
  dialog{max-height:calc(var(--mobile-visual-height,100dvh) - 16px);overscroll-behavior:contain}
}
@media(max-width:760px) and (max-height:450px){
  #chat-active>.chat-tools-bar,#chat-active>.chat-pinned{display:none}
  #chat-active .message-composer,#post-detail .message-composer{max-height:65%}
  #chat-active .compact-composer .ql-editor,#post-detail .compact-composer .ql-editor{max-height:70px!important}
}