#dock-container {
    position: fixed;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: flex-end;
    height: calc(var(--dock-item-size) * var(--max-scale) + 20px);
    padding: 0 20px;
    z-index: 9000;
    width: auto;
    max-width: 100%;
    pointer-events: none;
    /* Let clicks pass through container area */
}

@media (max-width: 768px) {
    #dock-container {
        width: 100%;
        left: 0;
        transform: none;
        padding: 0;
        bottom: 0;
        justify-content: center;
        /* keep center but allow overflow via dock margin */
    }

    #dock {
        margin: 0 auto;
        /* Ensure centering */
        max-width: 100%;
        padding-left: 10px;
        padding-right: 10px;
        justify-content: flex-start;
        /* Start alignment allows scrolling from start */
    }
}

#dock {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--dock-radius);
    padding: 20px var(--dock-padding) 10px;
    /* Increased top padding significantly */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    will-change: transform;
    pointer-events: auto;
    /* Re-enable pointer events for dock */
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    height: auto;
    /* Allow height to adjust */
}

/* Hide scrollbar for dock */
#dock::-webkit-scrollbar {
    display: none;
}

.dock-app {
    width: var(--dock-item-size);
    height: var(--dock-item-size);
    margin: 0 var(--dock-item-margin);
    margin-bottom: 5px;
    /* Slight bottom margin to avoid bottom clipping */
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    transition: all 0.15s cubic-bezier(0.25, 0.8, 0.25, 1);
    will-change: transform, width, height, margin;
    cursor: pointer;
    position: relative;
    /* For tooltip absolute positioning */
    flex-shrink: 0;
    /* Prevent shrinking */
}

/* Missing styles handled here */
.icon-box {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    font-size: 1.5rem;
    /* Icon size inside box */
}

.tooltip {
    position: absolute;
    top: -45px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(20, 20, 20, 0.8);
    backdrop-filter: blur(10px);
    color: white;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    white-space: nowrap;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.dock-app:hover .tooltip {
    opacity: 1;
}

.separator {
    width: 1px;
    height: calc(var(--dock-item-size) - 10px);
    background: rgba(255, 255, 255, 0.2);
    margin: 5px 12px;
}