:root {
  /* Mobile bottom navigation control row. Keep in sync with
     mobileNavigationRowHeight in blocks/dashboard/src/mobileNavigationLayout.web.ts */
  --app-tabbar-height: 56px;
  /* Home-indicator clearance below that row. A browser's own bottom chrome
     already covers the indicator, so this stays 0 there and the feed keeps the
     height; only a chrome-less (installed) window reserves the real inset. */
  --eb-mobile-nav-safe-area: 0px;
}

@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) {
  :root {
    --eb-mobile-nav-safe-area: env(safe-area-inset-bottom, 0px);
  }
}

html,
body,
#root,
#root > div {
  width: 100%;
  height: 100%;
  height: 100dvh; /* Use dynamic viewport height for better mobile support */
  min-height: 100vh; /* Fallback for older browsers */
}

/* iPhone specific fixes */
@supports (-webkit-touch-callout: none) {
  html,
  body,
  #root,
  #root > div {
    height: 100%;
    height: 100dvh;
    min-height: 100vh;
  }
}
/* @media screen and (max-width: 768px) {
  html,
  body,
  #root,
  #root > div {
    height: 100vh;
    height: 100dvh;
    min-height: -webkit-fill-available;
  }
} */


body {
  font-family: Inter, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button,
input,
textarea,
select {
  font-family: inherit;
}

/* Legacy component styles sometimes name Inter without a fallback (or a
   different UI font). Keep application controls consistent even while the
   webfont is loading, including dialogs and tooltips outside #root.
   The attribute selectors also match suffixed MUI class names
   ("MuiTypography-root-42"), which MUI v4 generates under a nested
   ThemeProvider. The app has a single theme (components/src/theme), so class
   names are plain, but these rules do not depend on that. */
[class*="MuiTypography-root"],
[class*="MuiButton-root"],
[class*="MuiInputBase-root"],
[class*="MuiTooltip-tooltip"],
[class*="MuiBottomNavigationAction-label"] {
  font-family: Inter, sans-serif !important;
}

body > iframe {
  display: none!important;
  z-index: -99999 !important;
}

.custom-slider{
  width: 100% !important;
}

/* Mobile viewport fixes */
@media screen and (max-width: 768px) {
  html,
  body,
  #root,
  #root > div {
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: -webkit-fill-available;
  }
  
  /* Ensure full screen on mobile */
  body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
  }

  /* Hide the native scrollbar on mobile — content still scrolls via touch,
     it just doesn't render the visible track/thumb. */
  html,
  body {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  html::-webkit-scrollbar,
  body::-webkit-scrollbar {
    display: none;
  }


  /* Prevent mobile zoom on input focus */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="url"],
  input[type="search"],
  textarea,
  select {
    font-size: 16px !important;
  }
  
  /* Material-UI specific selectors */
  .MuiInputBase-input,
  .MuiOutlinedInput-input,
  .MuiFilledInput-input,
  .MuiInput-input {
    font-size: 16px !important;
  }
  
  /* React-phone-number-input specific */
  .PhoneInputInput {
    font-size: 16px !important;
  }
}

/* One avatar crop rule for the whole app. Many screens render
   <Avatar><img class="fallbackAvatar" /></Avatar> with an image size that
   differs from the circle (e.g. a 56px image in a 32px avatar), which crops
   the photo off-centre. Whatever the circle's size, its photo fills it and is
   cropped around the centre. The attribute selector is doubled to outrank
   per-component JSS (and matches suffixed names too, see the font rule). */
[class*="MuiAvatar-root"][class*="MuiAvatar-root"] > img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}