:root { --app-dock-safe-area: 112px; }

body.has-app-dock { padding-bottom: calc(var(--app-dock-safe-area) + env(safe-area-inset-bottom)); }

.app-dock { position: fixed; z-index: 1000; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); transform: translateX(-50%); max-width: calc(100vw - 20px); touch-action: none; }
.app-dock[hidden] { display: none; }
.app-dock__rail { display: flex; align-items: flex-end; justify-content: center; gap: 8px; min-height: 76px; padding: 10px 14px 8px; border: 1px solid rgba(255,255,255,.72); border-radius: 26px; background: rgba(247,239,226,.72); box-shadow: 0 15px 42px rgba(64,39,16,.24), inset 0 1px 0 rgba(255,255,255,.85); backdrop-filter: blur(20px) saturate(1.25); -webkit-backdrop-filter: blur(20px) saturate(1.25); }
.app-dock__item { --dock-x: 0px; --dock-y: 0px; --dock-scale: 1; position: relative; display: grid; place-items: center; flex: 0 0 58px; width: 58px; height: 58px; border-radius: 15px; transform: translate3d(var(--dock-x), var(--dock-y), 0) scale(var(--dock-scale)); transform-origin: center bottom; will-change: transform; cursor: pointer; -webkit-user-drag: none; user-select: none; outline: none; }
.app-dock__item:focus-visible { box-shadow: 0 0 0 3px #fff, 0 0 0 6px #8b5a25; }
.app-dock__item.is-placeholder { opacity: .18; }
.app-dock__icon { display: block; width: 58px; height: 58px; object-fit: cover; border-radius: 15px; box-shadow: 0 7px 15px rgba(50,28,10,.2); pointer-events: none; }
.app-dock__item.is-active::after { content: ''; position: absolute; left: 50%; bottom: -8px; width: 5px; height: 5px; border-radius: 50%; transform: translateX(-50%); background: #744719; }
.app-dock__tooltip { position: absolute; z-index: 2; left: 50%; bottom: calc(100% + 14px); transform: translate(-50%, 5px); padding: 6px 10px; border-radius: 9px; color: #fffaf2; background: rgba(49,31,17,.94); box-shadow: 0 8px 24px rgba(38,22,9,.2); font: 600 12px/1.2 Manrope, sans-serif; white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 120ms ease, transform 160ms ease, visibility 120ms; }
.app-dock__tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; border: 5px solid transparent; border-top-color: rgba(49,31,17,.94); transform: translateX(-50%); }
.app-dock__item:hover .app-dock__tooltip, .app-dock__item:focus-visible .app-dock__tooltip { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.app-dock__ghost { position: fixed; z-index: 1100; margin: -29px 0 0 -29px; pointer-events: none; transform: scale(1.14) rotate(-2deg); opacity: .92; filter: drop-shadow(0 15px 16px rgba(43,25,10,.3)); }

@media (max-width: 520px) {
    :root { --app-dock-safe-area: 92px; }
    .app-dock__rail { gap: 3px; min-height: 62px; padding: 8px 9px 7px; border-radius: 22px; }
    .app-dock__item, .app-dock__icon { width: 46px; height: 46px; }
    .app-dock__item { flex-basis: 46px; border-radius: 12px; }
    .app-dock__icon { border-radius: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .app-dock__item { transform: none !important; }
    .app-dock__tooltip { transition: none; }
}