/* JP COMMUNITY v35: actual vertical centering of the mobile icon-only bar.
   Override legacy v14–v34 min-height / padding and keep iPhone inset INSIDE
   the full bar rather than as a second block underneath the buttons. */
:root { --v35-nav-height: calc(52px + env(safe-area-inset-bottom, 0px)); }
html body:not(.is-room23) .app > .nav:not(.hidden) {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  position: fixed !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 100% !important;
  max-width: 650px !important;
  height: var(--v35-nav-height) !important;
  min-height: var(--v35-nav-height) !important;
  max-height: var(--v35-nav-height) !important;
  padding: 0 6px !important;
  margin: 0 !important;
  align-items: stretch !important;
  justify-items: stretch !important;
  background: #fff !important;
  border-top: 1px solid #e4ebe5 !important;
  box-shadow: 0 -3px 12px rgba(25,55,35,.035) !important;
  z-index: 40 !important;
  overflow: visible !important;
}
html body:not(.is-room23) .app > .nav > button {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
  justify-self: stretch !important;
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  line-height: 0 !important;
  font-size: 0 !important;
  background: transparent !important;
}
html body:not(.is-room23) .app > .nav > button > .nav-icon {
  display: grid !important;
  place-items: center !important;
  position: relative !important;
  width: 40px !important;
  height: 37px !important;
  min-width: 40px !important;
  min-height: 37px !important;
  max-height: 37px !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  border-radius: 14px !important;
  overflow: visible !important;
}
html body:not(.is-room23) .app > .nav .nav-icon > svg {display:block!important;width:25px!important;height:25px!important;margin:0!important;flex:none!important;}
html body:not(.is-room23) .app > .nav > button.active > .nav-icon{background:#dff3e9!important;}
/* Attach unread number to the chat bubble rim, not the edge of the 4-column tab. */
html body:not(.is-room23) .app > .nav .nav-unread {
  position: absolute !important;
  top: 0px !important;
  right: 0px !important;
  left: auto !important;
  bottom: auto !important;
  transform: translate(14%, -12%) !important;
  z-index: 2 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 16px !important;
  height: 16px !important;
  padding: 0 3px !important;
  border: 1.5px solid #fff !important;
  border-radius: 999px !important;
  background: #ec5d4b !important;
  color: #fff !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  line-height: 14px !important;
  box-shadow: none !important;
}
html body:not(.is-room23) .app {padding-bottom:calc(62px + env(safe-area-inset-bottom, 0px))!important;}
/* Upload status: inline, never an intrusive extra modal. */
.attach-status-v20:not(.hidden){white-space:normal!important;word-break:keep-all!important;line-height:1.45!important;}