/* Phone layouts; desktop keeps its existing navigation and workspace. */
.mobile-more, .mobile-dm-back, .mobile-format-toggle { display: none; }
#mobile-menu {
  color: var(--md-sys-color-on-surface);
  background: var(--md-sys-color-surface);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 24px 24px 0 0;
  width: 100%; max-width: 600px; max-height: 85dvh;
  margin: auto auto 0; padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
  overscroll-behavior: contain;
}
#mobile-menu::backdrop { background: rgb(0 0 0 / .55); }
#mobile-menu header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
#mobile-menu h2 { margin: 0; font-size: 20px; }
.mobile-menu-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mobile-menu-grid .bottom-nav-item { min-height: 88px; font-size: 13px; border-radius: 14px; gap: 10px; background: var(--md-sys-color-surface-container); color: var(--md-sys-color-on-surface); position: relative; }
.mobile-menu-grid .nav-icon { font-size: 24px; }
body.mobile-menu-open { overflow: hidden; }

@media (max-width: 768px) {
  :root { --mobile-vh: 100dvh; --mobile-top: 0px; --bottom-nav-h: 64px; }
  body { --mobile-nav-space: calc(64px + env(safe-area-inset-bottom)); }
  #main-content { padding: 16px 12px calc(var(--mobile-nav-space) + 20px) !important; min-width: 0; }
  #view-container { min-width: 0; overflow-wrap: anywhere; }
  #bottom-nav { height: var(--mobile-nav-space); overflow: visible; padding-bottom: env(safe-area-inset-bottom); background: var(--md-sys-color-surface); }
  html.dark #bottom-nav { background: #131a2b; }
  #bottom-nav > .bottom-nav-item { flex: 1 1 0; min-width: 0; font-size: 11px; gap: 5px; letter-spacing: 0; }
  #bottom-nav > .mobile-secondary { display: none !important; }
  #bottom-nav .nav-icon { font-size: 24px; }
  #bottom-nav .active { background: var(--md-sys-color-primary-container); border-radius: 16px; }
  .mobile-more { display: flex; }
  button, input, select, textarea { touch-action: manipulation; }
  .md-btn, button.md-chip, .rich-tool-btn, .rich-send-btn { min-height: 44px; min-width: 44px; }
  .md-input, input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea, .rich-editor-input {
    font-size: 16px !important; max-width: 100%; box-sizing: border-box;
  }
  .md-input, select { min-height: 46px; }
  #view-container [style*="grid-template-columns:repeat(auto-fill,minmax(320px"],
  #view-container [style*="grid-template-columns:repeat(auto-fill,minmax(280px"],
  #view-container [style*="grid-template-columns:repeat(auto-fit,minmax(280px"],
  #view-container [style*="grid-template-columns:repeat(auto-fit,minmax(260px"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  #view-container > div > div[style*="justify-content:space-between"] { flex-wrap: wrap; gap: 12px; }
  #proj-search { width: min(220px, 100%) !important; }
  .table-wrap, .md-table-wrap, .overflow-x-auto { max-width: 100%; overscroll-behavior-x: contain; }
  #modal-box { width: 100% !important; max-height: calc(var(--mobile-vh) - 16px); padding: 20px 16px; overflow-y: auto; }
  #modal-content [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: minmax(0, 1fr) !important; }
  #modal-content .md-btn { white-space: normal; }

  /* Inbox: list first, a full-width conversation after selection. */
  #dm-workspace { height: calc(var(--mobile-vh) - var(--mobile-nav-space) - 32px) !important; }
  #dm-sidebar { width: 100% !important; border-right: 0 !important; min-height: 0; }
  #dm-conversation { display: none !important; min-height: 0; }
  #dm-workspace.conversation-open #dm-sidebar { display: none !important; }
  #dm-workspace.conversation-open #dm-conversation { display: flex !important; }
  .mobile-dm-back { display: inline-flex; padding: 8px !important; flex-shrink: 0; }
  #dm-thread-header { padding: 8px !important; flex-shrink: 0; }
  #dm-main-feed { padding: 12px !important; min-height: 0; }
  #dm-composer-wrap { padding: 8px !important; flex-shrink: 0; }
  .dm-msg-body { max-width: 92% !important; font-size: 16px !important; }

  /* Team workspace uses all space above the bottom navigation. */
  #tw-root { height: calc(var(--mobile-vh) - var(--mobile-nav-space) - 32px) !important; }
  #tw-root > div:first-child { gap: 6px !important; padding: 8px 0 !important; }
  #tw-root > div:first-child > .material-symbols-rounded { display: none; }
  #tw-root > div:first-child .md-title-sm { font-size: 16px; }
  #tw-avatars { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
  #tw-avatars > div { display: none !important; }
  #tw-avatars::after { content: 'Members'; font-size: 12px; color: var(--md-sys-color-primary); }
  #tw-feed, #tw-thread-feed { min-height: 0; padding: 10px 4px !important; overscroll-behavior: contain; }
  #tw-thread.open { top: var(--mobile-top) !important; bottom: auto !important; height: var(--mobile-vh); }
  .tw-msg { gap: 6px !important; }
  .tw-msg > div:last-child { max-width: calc(100% - 42px) !important; }
  .tw-msg-body { font-size: 16px !important; overflow-wrap: anywhere; }
  .tw-act, .dm-act { display: inline-flex !important; min-height: 40px; align-items: center; }
  .tw-act { padding: 8px !important; }
  .tw-msg > div:last-child > div:first-child { flex-wrap: wrap; }
  .rich-editor-input { max-height: min(120px, 22dvh) !important; padding: 10px 12px !important; }
  .rich-toolbar { gap: 4px !important; }
  .mobile-format-toggle { display: inline-flex; font-size: 16px; font-weight: 700; }
  .rich-toolbar:not(.format-open) > [data-cmd], .rich-toolbar > span[style*="width:1px"] { display: none; }
  .rich-send-btn { width: 44px; height: 44px; }
  .rich-toolbar.format-open > [data-cmd] { display: inline-flex; }
  body.mobile-keyboard { --mobile-nav-space: 0px; }
  body.mobile-keyboard #bottom-nav { display: none !important; }
  body.mobile-keyboard[data-mobile-route="team"] #main-content,
  body.mobile-keyboard[data-mobile-route="messages"] #main-content {
    position: fixed; top: var(--mobile-top); left: 0; right: 0;
    height: var(--mobile-vh); min-height: 0 !important; padding: 8px !important;
  }
  body.mobile-keyboard #tw-root, body.mobile-keyboard #dm-workspace { height: calc(var(--mobile-vh) - 16px) !important; }

  /* Comfortable touch targets (>= 40px) for small icon buttons. */
  .tw-dm-btn, .tw-menu-btn {
    min-width: 40px; min-height: 40px; display: inline-flex !important;
    align-items: center; justify-content: center; padding: 8px !important;
  }
  .tw-dm-btn .material-symbols-rounded { font-size: 1.25rem !important; }
  .tw-menu-btn { font-size: 1.15rem !important; }
  .member-identity.member-name { min-height: 32px; display: inline-flex; align-items: center; }
  .task-checkbox { width: 24px !important; height: 24px !important; }
  #view-container button:has(> .material-symbols-rounded:only-child) { min-width: 40px; min-height: 40px; }
}
@media (max-width: 420px) {
  #view-container [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: minmax(0, 1fr) !important; }
  .mobile-menu-grid { gap: 8px; }
}