/* Finik-inspired floating mobile dock. No desktop/classic/print overrides. */
@media screen and (max-width:850px) {
  html[data-interface="modern"][data-mobile-bottom-nav="true"] {
    --mobile-dock-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    --mobile-dock-clearance: calc(98px + env(safe-area-inset-bottom, 0px));
    scroll-padding-bottom: var(--mobile-dock-clearance);
  }
  html[data-interface="modern"][data-mobile-bottom-nav="true"] main {
    padding-bottom: var(--mobile-dock-clearance)!important;
    scroll-margin-bottom: var(--mobile-dock-clearance);
  }
  html[data-interface="modern"][data-mobile-bottom-nav="true"] #redesignMobileNav {
    display: flex; position: fixed; z-index: 80; top: auto;
    bottom: var(--mobile-dock-bottom);
    left: max(10px, env(safe-area-inset-left, 0px));
    right: max(10px, env(safe-area-inset-right, 0px));
    width: auto; max-width: 610px; margin: 0 auto; min-width: 0;
    height: 76px; box-sizing: border-box; padding: 5px; gap: 2px;
    align-items: stretch; overflow-x: auto; overflow-y: hidden;
    overscroll-behavior-x: contain; scrollbar-width: none;
    scroll-padding-inline: 8px; -webkit-overflow-scrolling: touch;
    border: 1px solid #ffffffed; border-radius: 40px;
    background: linear-gradient(155deg,#fffffff0,#ffffffb8 48%,#ffffffdc);
    backdrop-filter: blur(24px) saturate(150%);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    box-shadow: 0 10px 38px var(--cabinet-shadow,#224b3626), inset 0 1px 1px #fff, inset 0 -1px 1px #a0b7aa40;
    isolation: isolate;
  }
  html[data-interface="modern"][data-mobile-bottom-nav="true"] #redesignMobileNav button {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
    flex: 0 0 84px; min-width: 0; min-height: 64px; padding: 5px 3px; gap: 4px;
    border: 1px solid transparent; border-radius: 34px; background: transparent;
    box-shadow: none; color: var(--cabinet-muted,#526c5e);
    font: 500 10px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
    letter-spacing: -.015em; white-space: nowrap; -webkit-tap-highlight-color: transparent;
    transition: background .18s ease, box-shadow .18s ease, color .18s ease, transform .18s ease;
  }
  html[data-interface="modern"][data-mobile-bottom-nav="true"] #redesignMobileNav button .nav-symbol {
    display: block; flex: 0 0 24px; width: 24px; height: 24px; stroke-width: 1.65;
  }
  html[data-interface="modern"][data-mobile-bottom-nav="true"] #redesignMobileNav button.active {
    color: var(--accent); font-weight: 650; border-color: #ffffffef;
    background: radial-gradient(ellipse at 25% 0%,#fffffffa,transparent 68%),linear-gradient(145deg,var(--accent-soft),#ffffff9e 56%,var(--accent-soft));
    box-shadow: inset 1px 2px 4px #fff,inset -1px -2px 4px #ffffffed,0 2px 8px var(--cabinet-shadow,#224b361c);
  }
  html[data-interface="modern"][data-mobile-bottom-nav="true"] #redesignMobileNav button:active { transform: scale(.95); }
  html[data-interface="modern"][data-mobile-bottom-nav="true"] #redesignMobileNav button:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
  html[data-interface="modern"][data-mobile-bottom-nav="true"] #redesignMobileNav[data-dock-hidden="true"] { visibility: hidden; pointer-events: none; }
  html[data-interface="modern"][data-mobile-bottom-nav="true"] #appHeader.mobile-nav-ready #redesignModelNav { grid-row: 2; }
  html[data-interface="modern"][data-mobile-bottom-nav="true"] #appHeader.mobile-profile-open .top-actions { max-height: calc(100dvh - 166px - env(safe-area-inset-bottom,0px)); }
  html[data-interface="modern"][data-mobile-bottom-nav="true"] #toast { bottom: var(--mobile-dock-clearance); }
}
@media screen and (max-width:360px) {
  html[data-interface="modern"][data-mobile-bottom-nav="true"] #redesignMobileNav button { flex-basis: 79px; font-size: 9px; }
}
@media screen and (max-width:850px) and (max-height:500px) and (orientation:landscape) {
  html[data-interface="modern"][data-mobile-bottom-nav="true"] { --mobile-dock-clearance: calc(82px + env(safe-area-inset-bottom,0px)); }
  html[data-interface="modern"][data-mobile-bottom-nav="true"] #redesignMobileNav { height: 62px; }
  html[data-interface="modern"][data-mobile-bottom-nav="true"] #redesignMobileNav button { min-height: 50px; gap: 2px; }
  html[data-interface="modern"][data-mobile-bottom-nav="true"] #redesignMobileNav button .nav-symbol { width: 21px; height: 21px; flex-basis: 21px; }
}
@media screen and (max-width:850px) and (prefers-reduced-motion:reduce) {
  html[data-interface="modern"][data-mobile-bottom-nav="true"] #redesignMobileNav button { transition: none; transform: none; }
}
@media screen and (max-width:850px) and (prefers-contrast:more), screen and (max-width:850px) and (prefers-reduced-transparency:reduce) {
  html[data-interface="modern"][data-mobile-bottom-nav="true"] #redesignMobileNav { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; border-color: var(--accent); }
  html[data-interface="modern"][data-mobile-bottom-nav="true"] #redesignMobileNav button.active { color: #fff; background: var(--accent); box-shadow: none; }
}
@media print { #redesignMobileNav { display: none!important; } }
/* The sanitized R4 archive contains this exact app icon; its older JPG alias
   is absent. Use the existing asset, with no logo redrawing or recolouring. */
@media screen and (max-width:760px) {
  html[data-interface="modern"][data-mobile-bottom-nav="true"] #appHeader .brand-logo { content: url('/mobile-icon-512.png'); object-fit: contain; }
}