/* These values describe the usable app surface, in CSS pixels. */
html[data-tm-app-layout] {
  --tm-content-top: 12px;
  --tm-safe-top: env(safe-area-inset-top, 0px);
  --tm-safe-bottom: env(safe-area-inset-bottom, 0px);
  --tm-safe-left: env(safe-area-inset-left, 0px);
  --tm-safe-right: env(safe-area-inset-right, 0px);
}

/* The Android wrapper already fits its native window to the cutout. */
html[data-tm-app-layout="web-app"] body,
html[data-tm-app-layout="ios-webview"] body {
  padding-top: var(--tm-safe-top);
}
html[data-tm-app-layout] #app main.main:not(:has(.tm-chat-detail)) {
  padding-top: var(--tm-content-top) !important;
}
html[data-tm-app-layout] body #app main.tm-org-position #org-top-link {
  top: var(--tm-content-top) !important;
}

@media (max-width: 800px) {
  html[data-tm-app-layout] { --tm-content-top: 6px; }
}
/* On wider screens the existing organisation shortcut may sit beside the
   identity instead of reserving another empty row above the heading. */
@media (min-width: 801px) {
  html[data-tm-app-layout][data-teamilo-hig] body #app main.tm-org-position > .top {
    padding-top: 0 !important;
    padding-right: 156px !important;
    min-height: 44px;
    box-sizing: border-box;
  }
}

html[data-tm-app-layout] body #app nav.bottom {
  /* Many rounded Android screens report zero CSS side insets. Keep an
     independent gutter, making it smaller only on exceptionally narrow screens. */
  --tm-corner-gutter: clamp(12px, calc((100vw - 248px) / 2), 28px);
  box-sizing: border-box;
  padding-left: max(var(--tm-corner-gutter), calc(var(--tm-safe-left) + 8px)) !important;
  padding-right: max(var(--tm-corner-gutter), calc(var(--tm-safe-right) + 8px)) !important;
  padding-bottom: max(18px, calc(var(--tm-safe-bottom) + 8px)) !important;
}
html[data-tm-app-layout] body #app nav.bottom > button[data-nav] {
  min-width: 0 !important;
  flex: 1 1 0;
}
html[data-tm-app-layout]:not([data-teamilo-hig]) body #app nav.bottom > button[data-nav] {
  min-height: 44px;
}