/* DiagnostiX v328 — identical smartphone toolbar composition in browser and installed PWA.
   Only the vertical anchor changes: browser mode stays above browser chrome, while the
   installed Home Screen app reaches the physical display edge. */
@media (max-width: 767px) {
  :root {
    --dx328-toolbar-h: 89px;
    --dx328-toolbar-radius: 30px;
    --dx328-toolbar-side: clamp(6px, 3.2vw, 15px);
    --dx328-toolbar-pad-x: clamp(9px, 3vw, 13px);
    --dx328-pwa-extension: 16px;
  }

  /* Shared 1:1 visual structure for normal mobile browser and installed app. */
  html.dx323-toolbar-browser #dxAndroidExactAppV303 .dx303-footer,
  body.dx323-toolbar-browser #dxAndroidExactAppV303 .dx303-footer,
  html.dx323-toolbar-app #dxAndroidExactAppV303 .dx303-footer,
  body.dx323-toolbar-app #dxAndroidExactAppV303 .dx303-footer {
    position: absolute !important;
    inset: auto var(--dx328-toolbar-side) auto var(--dx328-toolbar-side) !important;
    left: var(--dx328-toolbar-side) !important;
    right: var(--dx328-toolbar-side) !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    align-items: center !important;
    column-gap: 0 !important;
    box-sizing: border-box !important;
    z-index: 10 !important;
    transform: none !important;
    -webkit-transform: none !important;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  /* Browser: same pill, kept above Safari/Chrome controls. */
  html.dx323-toolbar-browser #dxAndroidExactAppV303 .dx303-footer,
  body.dx323-toolbar-browser #dxAndroidExactAppV303 .dx303-footer {
    bottom: calc(var(--dx303-footer-gap) + var(--dx303-safe-bottom)) !important;
    height: var(--dx328-toolbar-h) !important;
    min-height: var(--dx328-toolbar-h) !important;
    padding: 4px var(--dx328-toolbar-pad-x) !important;
    border-radius: var(--dx328-toolbar-radius) !important;
    background: #101b27 !important;
    box-shadow: 0 -10px 28px rgba(0, 0, 0, .24) !important;
    overflow: hidden !important;
    backdrop-filter: blur(20px) saturate(130%);
    -webkit-backdrop-filter: blur(20px) saturate(130%);
  }

  html.dx323-toolbar-browser #dxAndroidExactAppV303 .dx303-footer::before,
  body.dx323-toolbar-browser #dxAndroidExactAppV303 .dx303-footer::before {
    content: none !important;
  }

  /* Installed Home Screen app: preserve the exact same 89px pill and item layout.
     Only an invisible extension reaches through the iPhone safe area. */
  html.dx323-toolbar-app #dxAndroidExactAppV303 .dx303-footer,
  body.dx323-toolbar-app #dxAndroidExactAppV303 .dx303-footer {
    bottom: calc(0px - var(--dx303-safe-bottom) - var(--dx328-pwa-extension)) !important;
    height: calc(var(--dx328-toolbar-h) + var(--dx303-safe-bottom) + var(--dx328-pwa-extension)) !important;
    min-height: calc(var(--dx328-toolbar-h) + var(--dx303-safe-bottom) + var(--dx328-pwa-extension)) !important;
    padding: 4px var(--dx328-toolbar-pad-x) calc(4px + var(--dx303-safe-bottom) + var(--dx328-pwa-extension)) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    isolation: isolate;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  html.dx323-toolbar-app #dxAndroidExactAppV303 .dx303-footer::before,
  body.dx323-toolbar-app #dxAndroidExactAppV303 .dx303-footer::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: calc(var(--dx303-safe-bottom) + var(--dx328-pwa-extension));
    left: 0;
    z-index: 0;
    border-radius: var(--dx328-toolbar-radius) !important;
    background: #101b27 !important;
    box-shadow: 0 -10px 28px rgba(0, 0, 0, .24) !important;
    backdrop-filter: blur(20px) saturate(130%);
    -webkit-backdrop-filter: blur(20px) saturate(130%);
    pointer-events: none;
  }

  /* Identical icons, spacing and labels in both modes. */
  html:is(.dx323-toolbar-browser, .dx323-toolbar-app) #dxAndroidExactAppV303 .dx303-footer-item,
  body:is(.dx323-toolbar-browser, .dx323-toolbar-app) #dxAndroidExactAppV303 .dx303-footer-item {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    padding: 1px 1px 2px !important;
    border: 0 !important;
    background: transparent !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    transform: none !important;
    -webkit-transform: none !important;
  }

  html:is(.dx323-toolbar-browser, .dx323-toolbar-app) #dxAndroidExactAppV303 .dx303-footer-icon-shell,
  body:is(.dx323-toolbar-browser, .dx323-toolbar-app) #dxAndroidExactAppV303 .dx303-footer-icon-shell {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
    flex: 0 0 50px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 17px !important;
    background: #172634 !important;
  }

  html:is(.dx323-toolbar-browser, .dx323-toolbar-app) #dxAndroidExactAppV303 .dx303-footer-item.health .dx303-footer-icon-shell,
  body:is(.dx323-toolbar-browser, .dx323-toolbar-app) #dxAndroidExactAppV303 .dx303-footer-item.health .dx303-footer-icon-shell {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    flex-basis: 52px !important;
    border-radius: 18px !important;
  }

  html:is(.dx323-toolbar-browser, .dx323-toolbar-app) #dxAndroidExactAppV303 .dx303-footer-icon-shell img,
  body:is(.dx323-toolbar-browser, .dx323-toolbar-app) #dxAndroidExactAppV303 .dx303-footer-icon-shell img {
    width: 31px !important;
    height: 31px !important;
    max-width: 31px !important;
    max-height: 31px !important;
    object-fit: contain !important;
  }

  html:is(.dx323-toolbar-browser, .dx323-toolbar-app) #dxAndroidExactAppV303 .dx303-footer-label,
  body:is(.dx323-toolbar-browser, .dx323-toolbar-app) #dxAndroidExactAppV303 .dx303-footer-label {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 11px !important;
    min-height: 11px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    color: var(--dx303-text2) !important;
    font-size: clamp(8px, 2.35vw, 9.5px) !important;
    font-weight: 800 !important;
    line-height: 11px !important;
    letter-spacing: -0.10px !important;
    text-align: center !important;
  }

  /* The longest German label must stay clear of the lower-right pill curve. */
  html:is(.dx323-toolbar-browser, .dx323-toolbar-app) #dxAndroidExactAppV303 .dx303-footer-item[data-dx303-action="settings"] .dx303-footer-label,
  body:is(.dx323-toolbar-browser, .dx323-toolbar-app) #dxAndroidExactAppV303 .dx303-footer-item[data-dx303-action="settings"] .dx303-footer-label {
    font-size: clamp(7.2px, 2.12vw, 8.7px) !important;
    letter-spacing: -0.24px !important;
    transform: scaleX(.96) !important;
    -webkit-transform: scaleX(.96) !important;
    transform-origin: center center !important;
  }

  html.dx323-toolbar-browser #dxAndroidExactAppV303 .dx303-widget-scroll,
  body.dx323-toolbar-browser #dxAndroidExactAppV303 .dx303-widget-scroll {
    bottom: calc(var(--dx303-footer-gap) + var(--dx328-toolbar-h) + var(--dx303-safe-bottom) + 10px) !important;
  }

  html.dx323-toolbar-app #dxAndroidExactAppV303 .dx303-widget-scroll,
  body.dx323-toolbar-app #dxAndroidExactAppV303 .dx303-widget-scroll {
    bottom: calc(var(--dx328-toolbar-h) + 10px) !important;
  }
}

/* Immediate installed-mode fallback before the JavaScript mode class is applied. */
@media (max-width: 767px) and (display-mode: standalone),
       (max-width: 767px) and (display-mode: fullscreen) {
  #dxAndroidExactAppV303 .dx303-footer {
    position: absolute !important;
    inset: auto var(--dx328-toolbar-side) auto var(--dx328-toolbar-side) !important;
    left: var(--dx328-toolbar-side) !important;
    right: var(--dx328-toolbar-side) !important;
    bottom: calc(0px - var(--dx303-safe-bottom) - var(--dx328-pwa-extension)) !important;
    width: auto !important;
    max-width: none !important;
    height: calc(var(--dx328-toolbar-h) + var(--dx303-safe-bottom) + var(--dx328-pwa-extension)) !important;
    min-height: calc(var(--dx328-toolbar-h) + var(--dx303-safe-bottom) + var(--dx328-pwa-extension)) !important;
    margin: 0 !important;
    padding: 4px var(--dx328-toolbar-pad-x) calc(4px + var(--dx303-safe-bottom) + var(--dx328-pwa-extension)) !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    align-items: center !important;
    column-gap: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    isolation: isolate;
    box-sizing: border-box !important;
    transform: none !important;
    -webkit-transform: none !important;
  }

  #dxAndroidExactAppV303 .dx303-footer::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: calc(var(--dx303-safe-bottom) + var(--dx328-pwa-extension));
    left: 0;
    z-index: 0;
    border-radius: var(--dx328-toolbar-radius) !important;
    background: #101b27 !important;
    box-shadow: 0 -10px 28px rgba(0, 0, 0, .24) !important;
    pointer-events: none;
  }

  #dxAndroidExactAppV303 .dx303-footer-item {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    padding: 1px 1px 2px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  #dxAndroidExactAppV303 .dx303-footer-icon-shell {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
    flex: 0 0 50px !important;
    border-radius: 17px !important;
    background: #172634 !important;
  }

  #dxAndroidExactAppV303 .dx303-footer-item.health .dx303-footer-icon-shell {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    flex-basis: 52px !important;
    border-radius: 18px !important;
  }

  #dxAndroidExactAppV303 .dx303-footer-icon-shell img {
    width: 31px !important;
    height: 31px !important;
    max-width: 31px !important;
    max-height: 31px !important;
  }

  #dxAndroidExactAppV303 .dx303-footer-label {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 11px !important;
    min-height: 11px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    font-size: clamp(8px, 2.35vw, 9.5px) !important;
    font-weight: 800 !important;
    line-height: 11px !important;
    letter-spacing: -0.10px !important;
    text-align: center !important;
  }

  #dxAndroidExactAppV303 .dx303-footer-item[data-dx303-action="settings"] .dx303-footer-label {
    font-size: clamp(7.2px, 2.12vw, 8.7px) !important;
    letter-spacing: -0.24px !important;
    transform: scaleX(.96) !important;
    -webkit-transform: scaleX(.96) !important;
    transform-origin: center center !important;
  }

  #dxAndroidExactAppV303 .dx303-widget-scroll {
    bottom: calc(var(--dx328-toolbar-h) + 10px) !important;
  }
}