/* css/dock.css */
#dock {
    position: fixed;
    bottom: 6px; /* Slightly less gap from bottom */
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(255, 255, 255, 0.22); /* Maintained translucency */
    backdrop-filter: blur(22px) saturate(180%); 
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    border-radius: 18px; /* Slightly smaller radius for a tighter look */
    padding: 4px 8px; /* Reduced padding for more compact single icon */
    display: flex;
    align-items: center; 
    justify-content: center;
    gap: 2px; /* Gap between regular icons */
    z-index: 9999;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.18), 0 0 0 0.5px rgba(0,0,0,0.07); /* Adjusted shadow */
    height: auto; /* Let content (icons + padding) determine height */
    
    /* Allow overflow to prevent clipping during magnification */
    overflow: visible;
    
    /* Touch device optimizations from old website */
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
}

.dock-item {
    display: flex; 
    align-items: center;
    justify-content: center; 
    position: relative; /* For .dock-label positioning */
    cursor: pointer;
    padding: 1px; /* Minimal padding around icon wrapper */
    
    /* Magnification transition properties */
    transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform-origin: center bottom; /* Scale from center bottom */
    z-index: 1; /* Base z-index */
    
    /* Touch optimizations */
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    min-width: 44px; /* Minimum touch target for accessibility */
    min-height: 44px; /* Minimum touch target for accessibility */
}

/* Magnification states */
.dock-item.magnify-large {
    transform: scale(1.3); /* Reduced from 1.5 */
    z-index: 10; /* Highest priority for hovered item */
}

.dock-item.magnify-medium {
    transform: scale(1.1); /* Reduced from 1.3 */
    z-index: 8; /* Medium priority for adjacent items */
}

.dock-item-icon-wrapper {
    width: 58px; /* Slightly increased icon size */
    height: 58px; /* Slightly increased icon size */
    position: relative; /* Anchor for the label */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Ensure wrapper doesn't interfere with magnification */
    transform-origin: center;
}

.dock-item img {
    max-width: 100%; 
    max-height: 100%;
    object-fit: contain; 
    transform: none; 
    transition: none; 
    
    /* Ensure image doesn't interfere with parent scaling */
    transform-origin: center;
}

.dock-separator {
    width: 1px;
    height: 30px; /* Adjust height based on visual preference relative to icons */
    background-color: rgba(0, 0, 0, 0.2); /* Subtle dark line */
    margin: 0 2px; /* Separator now has 2px horizontal margin on each side */
    
    /* Exclude separators from magnification */
    pointer-events: none;
    z-index: 0; /* Keep separators below dock items */
}

.dock-label { /* This is the tooltip */
    /* Visibility & Animation */
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.1s ease-in-out, visibility 0s linear 0.1s;
    
    /* Positioning */
    position: absolute;
    bottom: 100%; /* Position above the .dock-item-icon-wrapper */
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 8px; /* Space between icon and tooltip */
    z-index: 10000; /* Ensure tooltip is above other dock items */

    /* Box Styling */
    display: block; /* Keep as block */
    background-color: #E3E3E3;
    border-radius: 6px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
    padding: 4px 8px;
    white-space: nowrap;
    pointer-events: none; /* Allow hover on icon below */
    min-width: 10px; /* Force minimum dimensions */
    min-height: 10px; /* Force minimum dimensions */
    overflow: visible; /* Ensure content isn't clipped if box collapses */

    /* Text Styling */
    color: #000000; /* Explicitly black text */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; /* system-ui or SF Pro */
    font-size: 13px;
    line-height: normal; /* Ensure default line height */
    text-align: center; /* Ensure text is centered if it wraps (though nowrap is on) */
}

.dock-label::after { /* Downward pointer triangle */
    content: ""; /* Ensure content is an empty string */
    position: absolute;
    top: 100%; /* Position at the bottom of the tooltip */
    left: 50%;
    transform: translateX(-50%);
    width: 0; 
    height: 0; 
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #E3E3E3; /* Same color as tooltip background */
}

.dock-item:hover .dock-label {
    visibility: visible;
    opacity: 1;
}

.dock-item::after { /* Active app indicator (styling for the small dot below active app) */
    content: '';
    position: absolute;
    bottom: -1px; 
    left: 50%;
    transform: translateX(-50%); /* Center the dot */
    width: 4px;
    height: 4px;
    background-color: rgba(255, 255, 255, 0.85);
    border-radius: 50%;
    opacity: 0; 
    transition: opacity 0.2s;
}

.dock-item.active::after {
    opacity: 1;
}

/* Responsive dock adjustments - smoother transitions */
@media (max-width: 768px) {
    #dock {
        border-radius: 17px; /* Gradual radius reduction */
        padding: 3.5px 4.5px; /* Gradual padding reduction */
        gap: 1.5px; /* Gradual gap reduction */
    }
    
    .dock-item-icon-wrapper {
        width: 58px; /* Keep same size as default to prevent jump */
        height: 58px;
    }
    
    .dock-separator {
        height: 28px; /* Gradual separator height adjustment */
    }
    
    .dock-label {
        font-size: 12.5px; /* Gradual text size reduction */
        padding: 3.5px 7px;
    }
}

@media (max-width: 600px) {
    #dock {
        border-radius: 15px;
        padding: 3px 4px;
        gap: 1px;
    }
    
    .dock-item-icon-wrapper {
        width: 50px; /* Intermediate size */
        height: 50px;
    }
    
    .dock-separator {
        height: 25px;
    }
    
    .dock-label {
        font-size: 12px;
        padding: 3px 6px;
    }
}

@media (max-width: 480px) { /* New intermediate breakpoint */
    #dock {
        border-radius: 14.5px; /* Start gradual transition */
        padding: 2.5px 3.5px;
        gap: 0.5px;
        bottom: 9px; /* Start reducing bottom margin */
    }
    
    .dock-item-icon-wrapper {
        width: 47px; /* Gradual size reduction */
        height: 47px;
    }
    
    .dock-separator {
        height: 23.5px; /* Gradual separator height */
        margin: 0 1.5px; /* Gradual margin reduction */
    }
    
    .dock-label {
        font-size: 11.5px;
        padding: 2.5px 5px;
    }
}

@media (max-width: 470px) { /* Another intermediate breakpoint */
    #dock {
        border-radius: 14.2px;
        padding: 2.2px 3.2px;
        gap: 0.2px;
        bottom: 8.5px;
    }
    
    .dock-item-icon-wrapper {
        width: 45px;
        height: 45px;
    }
    
    .dock-separator {
        height: 22.5px;
        margin: 0 1.2px;
    }
    
    .dock-label {
        font-size: 11.2px;
        padding: 2.2px 4.5px;
    }
}

@media (max-width: 460px) { /* Final step in transition */
    #dock {
        border-radius: 14px;
        padding: 2px 3px;
        gap: 0px;
        bottom: 8px; /* Final bottom margin */
    }
    
    .dock-item-icon-wrapper {
        width: 44px; /* Final mobile size */
        height: 44px;
    }
    
    .dock-separator {
        height: 22px; /* Final separator height */
        margin: 0 1px; /* Final separator margin */
    }
    
    .dock-label {
        font-size: 11px;
        padding: 2px 4px;
    }
}

@media (max-width: 360px) { /* Added intermediate breakpoint */
    #dock {
        padding: 2px;
    }
    
    .dock-item-icon-wrapper {
        width: 42px;
        height: 42px;
    }
    
    .dock-separator {
        height: 21px;
    }
    
    .dock-label {
        font-size: 10.5px;
        padding: 2px 4.5px;
        bottom: 46px;
    }
}

@media (max-width: 320px) {
    #dock {
        padding: 2px; /* Minimal padding for very small screens */
    }
    
    .dock-item-icon-wrapper {
        width: 40px; /* Very small icons */
        height: 40px;
    }
    
    .dock-separator {
        height: 20px;
    }
    
    .dock-label {
        font-size: 10px;
        padding: 2px 4px;
        bottom: 44px;
    }
}

/* Reset state for items outside magnification range */
.dock-item.magnify-none {
    transform: scale(1);
    z-index: 1; /* Base z-index */
}

/* Responsive dock icon management - progressive hiding from center outward */

/* Phase 1: Start hiding less essential icons at 1420px */
@media (max-width: 1420px) {
    .dock-item[data-app="Discord"],
    .dock-item[data-app="WhatsApp"],
    .dock-item[data-app="Telegram"] {
        display: none;
    }
}

/* Phase 2: Hide more icons at 1200px */
@media (max-width: 1200px) {
    .dock-item[data-app="Figma"],
    .dock-item[data-app="Notion"],
    .dock-item[data-app="Claude"],
    .dock-item[data-app="Xcode"],
    .dock-item[data-app="Cursor"] {
        display: none;
    }
}

/* Phase 3: Hide additional icons at 1000px */
@media (max-width: 1000px) {
    .dock-item[data-app="PowerPoint"],
    .dock-item[data-app="Excel"],
    .dock-item[data-app="Word"],
    .dock-item[data-app="System Preferences"],
    .dock-item[data-app="Home Folder"] {
        display: none;
    }
}

/* Phase 4: Keep only essential apps at 900px */
@media (max-width: 900px) {
    .dock-item[data-app="Firefox"],
    .dock-item[data-app="Chess"],
    .dock-item[data-app="Calendar"] {
        display: none;
    }
}

/* Phase 4.5: Keep only core essential apps at 850px */
@media (max-width: 850px) {
    .dock-item[data-app="Trash"] {
        display: none;
    }
    
    /* Hide dock separator at same breakpoint */
    .dock-separator {
        display: none;
    }
}

/* Phase 5: Replace all icons with Launchpad at 800px */
@media (max-width: 800px) {
    /* Hide all existing dock items */
    .dock-item {
        display: none !important;
    }
    
    /* Show only Launchpad icon */
    .dock-item[data-app="Launchpad"] {
        display: flex !important;
    }
    
    /* Ensure dock remains centered with single icon */
    #dock {
        padding: 4px 8px; /* Reduced padding for more compact single icon */
    }
}

/* Phase 6: Hide entire dock under 600px */
@media (max-width: 600px) {
    #dock {
        display: none !important;
    }
}