/* S2418-BALANCED-HOME-DATETIME-SPACING-20260822 */
:root {
  --smile-fixed-header-height: 70px;
}
.app-header {
  --smile-header-parent-padding-top: 16px;
  --smile-header-parent-padding-right: 14px;
  --smile-header-parent-padding-left: 14px;
  box-sizing: border-box !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  width: calc(100% + var(--smile-header-parent-padding-right) + var(--smile-header-parent-padding-left)) !important;
  min-height: var(--smile-fixed-header-height) !important;
  margin-top: calc(var(--smile-header-parent-padding-top) * -1) !important;
  margin-right: calc(var(--smile-header-parent-padding-right) * -1) !important;
  margin-bottom: 0 !important;
  margin-left: calc(var(--smile-header-parent-padding-left) * -1) !important;
  padding: 6px 14px !important;
  background: #0e8ebf !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  left: auto !important;
  right: auto !important;
  transform: translateZ(0);
}
.app-header .app-header-logo {
  order: 0 !important;
  margin: 0 !important;
}
.app-header .menu-button {
  order: 1 !important;
  margin: 0 !important;
  position: relative;
  z-index: 101;
  pointer-events: auto !important;
  touch-action: manipulation;
}
.fullscreen-menu {
  box-sizing: border-box !important;
  display: flex !important;
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100vh !important;
  height: 100dvh !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  overflow: hidden !important;
  z-index: 80 !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  clip-path: inset(0 0 100% 0) !important;
  transform: translate3d(0, -10px, 0) !important;
  transform-origin: top center;
  transition: clip-path 340ms cubic-bezier(.22,1,.36,1), transform 340ms cubic-bezier(.22,1,.36,1), opacity 180ms linear, visibility 0s linear 340ms !important;
  will-change: clip-path, transform, opacity;
  contain: layout paint;
  touch-action: pan-y !important;
}
.fullscreen-menu.is-open {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  clip-path: inset(0 0 0 0) !important;
  transform: translate3d(0, 0, 0) !important;
  transition-delay: 0s !important;
}
.fullscreen-menu .fullscreen-menu-head {
  display: none !important;
}
.fullscreen-menu .fullscreen-menu-links {
  box-sizing: border-box !important;
  margin-top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-top: var(--smile-fixed-header-height) !important;
  padding-bottom: max(28px, env(safe-area-inset-bottom)) !important;
  scroll-padding-top: var(--smile-fixed-header-height);
}
body.login-page { --smile-fixed-header-height: 58px; }
body.login-page .app-header {
  position: sticky !important;
  top: 0 !important;
  left: auto !important;
  right: auto !important;
}
body.package-chat-active .app-header,
body.package-keyboard-active .app-header {
  position: relative !important;
  top: auto !important;
}

/* The sticky header now participates in normal layout. The legacy home
   spacer was still reserving a second header height above the date row. */
body.public-home-active .public-home-main {
  padding-top: 8px !important;
}
body.public-home-active .public-home-main > .home-shared-date-time-v1 {
  margin-bottom: calc(0px - var(--guest-home-section-gap, 8px)) !important;
}
@media (max-width: 760px) {
  :root { --smile-fixed-header-height: 69px; }
}
@media (prefers-reduced-motion: reduce) {
  .fullscreen-menu {
    transition-duration: 1ms !important;
    transform: none !important;
  }
}