/* The link's display-mode query limits this sheet to the installed TEAMilo app.
   iOS home-screen apps and the native TEAMilo clients can enable the same link. */
@layer teamiloMobileChrome {
  :root {
    --tm-layout-safe-top: env(safe-area-inset-top, 0px);
    --tm-layout-safe-bottom: env(safe-area-inset-bottom, 0px);
    --tm-layout-safe-left: env(safe-area-inset-left, 0px);
    --tm-layout-safe-right: env(safe-area-inset-right, 0px);
    --tm-layout-top: 3px;
  }
  /* The Android wrapper already fits the native surface to its cutout. */
  html:not([data-tm-native-insets]) body {
    padding-block-start: var(--tm-layout-safe-top) !important;
  }
  html[data-tm-native-insets] body,
  html[data-tm-android-standalone] body { padding-block-start: 0 !important; }

  #app .frame > main.main:not(:has(.tm-chat-detail)) {
    padding-block-start: var(--tm-layout-top) !important;
  }
  #app main.main.tm-org-position #org-top-link {
    top: var(--tm-layout-top) !important;
  }
  @media (min-width: 801px) {
    #app main.tm-org-position > .top {
      padding-block-start: 0 !important;
      padding-right: 156px !important;
      min-height: 44px;
      box-sizing: border-box;
    }
  }
  @media (max-width: 800px) {
    :root { --tm-layout-top: 1px; }
    #app, #app > .app, #app > .app > .frame {
      padding-block-start: 0 !important;
      margin-block-start: 0 !important;
    }
    #app main.main:not(:has(.tm-chat-detail)) > .top {
      align-self: start;
      margin-block-start: 0 !important;
      padding-block-start: 0 !important;
    }
    #app .top > .tm-section-identity,
    #app .top .tm-org-logo-row {
      margin-block-start: 0 !important;
      padding-block-start: 0 !important;
    }
    #app .top .tm-org-logo-row {
      align-items: flex-start !important;
      margin-block-end: 4px !important;
    }
    #app .top .tm-org-logo-row > :is(.mobile-top-logo, .tm-hig-brand--mobile, .tm-landing-brand--mobile) {
      align-self: flex-start !important;
    }

  }
  html[data-tm-android-app] #teamilo-go-fullscreen { display: none !important; }
  #app nav.bottom {
    --tm-corner-gutter: clamp(12px, calc((100vw - 248px) / 2), 28px);
    box-sizing: border-box;
    padding-left: max(var(--tm-corner-gutter), calc(var(--tm-layout-safe-left) + 8px)) !important;
    padding-right: max(var(--tm-corner-gutter), calc(var(--tm-layout-safe-right) + 8px)) !important;
    padding-bottom: max(18px, calc(var(--tm-layout-safe-bottom) + 8px)) !important;
  }
  #app nav.bottom > button[data-nav] { min-width: 0 !important; flex: 1 1 0; }
  html:not([data-teamilo-hig]) #app nav.bottom > button[data-nav] { min-height: 44px; }
}