/* Wuffi Dock Styles */

#wuffi-dock-container {
    position: fixed;
    bottom: 20px;
    left: 0;
    width: 100%;
    /* Spans full width */
    height: 0;
    /* Don't block clicks */
    display: flex;
    justify-content: center;
    /* True center */
    align-items: flex-end;
    /* Align to bottom */
    z-index: 99999;
    font-family: 'Inter', sans-serif;
    pointer-events: none;
    /* Pass clicks through empty space */
}

/* Main Bar */
/* Main Bar */
#wuffi-dock-bar {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 10px 15px;
    transition: all 0.3s ease;
    /* Background managed by Inline Styles */
}

/* THEME: GLASS (Buzlu Cam) */
.docky-theme-glass {
    backdrop-filter: blur(var(--dock-blur)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--dock-blur)) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.15);
}

/* Glass Readability Fixes */
.docky-theme-glass .dock-item {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    /* Shadow for text/icons */
}

.docky-theme-glass .dock-item i,
.docky-theme-glass .dock-item span {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

/* THEME: FLAT (Düz Renk) */
.docky-theme-flat {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.dock-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #636e72;
    font-size: 0.7rem;
    gap: 4px;
    cursor: pointer;
    transition: all 0.2s;
    width: 60px;
}

.dock-item i {
    font-size: 1.4rem;
    transition: all 0.2s;
}

.dock-item:hover,
.dock-item.active {
    color: var(--dock-active, #473273) !important;
}

/* Explicit Active Color Style from settings */
.dock-active-color .dock-item.active {
    color: var(--dock-active) !important;
}

.dock-item:hover i {
    transform: translateY(-2px);
}

/* Center Button */
.dock-center-btn {
    position: relative;
    top: -25px;
}

.dock-float-btn {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #473273, #6c5ce7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    /* Smart Shadow derived from Settings */
    box-shadow: var(--center-shadow, 0 5px 15px rgba(71, 50, 115, 0.4));
    border: 3px solid rgba(255, 255, 255, 0.8);
}

.dock-float-btn i {
    font-size: 1.5rem;
}

/* Popup Menu (Hidden by default) */
/* Popup Menu (Compact / Popover Style) */
#wuffi-dock-popup,
#wuffi-profile-popup,
.docky-custom-popup {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    width: 320px;
    background: var(--dock-bg, #ffffff);
    border-radius: 35px;
    padding: 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    display: none;
    z-index: 100000;
    pointer-events: auto;
    border: 1px solid rgba(255, 255, 255, 0.2);
    /* Improve Glass styling inside popup */
    backdrop-filter: blur(var(--dock-blur, 16px));
    -webkit-backdrop-filter: blur(var(--dock-blur, 16px));
}

#wuffi-padding-fix {
    height: 0;
}

/* Reset if exists */

.dock-popup-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-bottom: 5px;
}

/* Open Animation */
#wuffi-dock-popup.show,
#wuffi-profile-popup.show,
.docky-custom-popup.show {
    display: block;
    animation: popIn 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popIn {
    from {
        opacity: 0;
        transform: translateX(-50%) scale(0.9) translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) scale(1) translateY(0);
    }
}

.dock-popup-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #2d3436;
    font-size: 0.7rem;
    font-weight: 600;
    text-align: center;
    padding: 8px 4px;
    border-radius: 8px;
    transition: background 0.1s;
}

.dock-popup-item:hover {
    background: #f5f6fa;
}

.dock-icon-circle {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin-bottom: 6px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    font-size: 18px;
}

.dock-popup-footer {
    text-align: center;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    padding-top: 10px;
}

.dock-popup-footer a {
    color: #473273;
    font-weight: 700;
    text-decoration: none;
    font-size: 0.85rem;
}

/* Active Styles */
.dock-item {
    position: relative;
}

/* Ensure pseudo elements work */

/* Style: Dot */
.dock-active-dot .dock-item.active::after {
    content: '';
    position: absolute;
    bottom: -6px;
    width: 5px;
    height: 5px;
    background: var(--dock-active);
    border-radius: 50%;
}

/* Style: Underline */
.dock-active-underline .dock-item.active::after {
    content: '';
    position: absolute;
    bottom: -6px;
    width: 24px;
    height: 3px;
    background: var(--dock-active);
    border-radius: 2px;
}

/* Style: Pill */
.dock-active-pill .dock-item.active {
    background: var(--dock-pill-bg, rgba(0, 0, 0, 0.05));
    border-radius: 12px;
    padding: 2px 6px;
    /* Adjust spacing */
}

/* No Text Shadow Utility */
.dock-no-shadow .dock-item,
.dock-no-shadow .dock-item i,
.dock-no-shadow .dock-item span {
    text-shadow: none !important;
    filter: none !important;
}

/* Style: Glow */
.dock-active-glow .dock-item.active i {
    text-shadow: 0 0 10px var(--dock-active);
}

/* Hover Animations */
.dock-hover-zoom .dock-item:hover i {
    transform: scale(1.2);
}

.dock-hover-bounce .dock-item:hover i {
    animation: dockBounce 0.4s ease;
}

.dock-hover-glow .dock-item:hover i {
    text-shadow: 0 0 8px var(--dock-active);
}

@keyframes dockBounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

/* Entrance Animations on Bar */
.dock-entry-slide-up {
    animation: dockSlideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.dock-entry-pop-in {
    animation: dockPopIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.dock-entry-fade {
    animation: dockFade 0.8s ease;
}

@keyframes dockSlideUp {
    from {
        transform: translateY(100px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes dockPopIn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes dockFade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Hide on Scroll State */
.docky-menu {
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background 0.3s, border 0.3s, backdrop-filter 0.3s;
}

.docky-menu.dock-hidden {
    transform: translateY(150%) !important;
}

/* Notification Badges */
.dock-item-badge {
    position: absolute;
    top: -2px;
    right: 12px;
    background: #ff3b30;
    color: white;
    font-size: 10px;
    font-weight: 800;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--dock-bg, #fff);
    z-index: 10;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    padding: 0 4px;
}

.dock-item {
    position: relative;
}

/* Ensure positioning context */

/* Tooltip Styles (Option) */
.dock-has-tooltips .dock-item>span:not(.dock-item-badge) {
    display: none;
    position: absolute;
    bottom: 110%;
    /* Place above item */
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px !important;
    white-space: nowrap;
    z-index: 20;
    pointer-events: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.dock-has-tooltips .dock-item:hover>span:not(.dock-item-badge) {
    display: block;
    animation: dockFade 0.2s;
}

.dock-has-tooltips .dock-item>span:not(.dock-item-badge)::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent;
}

/* Mobile Optimization */
@media (max-width: 768px) {
    #wuffi-dock-container {
        bottom: 5px !important;
        /* Closer to bottom (User Request: 5px) */
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        /* CRITICAL FIX: Reset desktop shift */
        pointer-events: none;
        /* Flexbox Centering */
        display: flex !important;
        justify-content: center !important;
        align-items: flex-end !important;
    }

    /* Fix Inner Dock Bar Alignment */
    #wuffi-dock-bar {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;

        /* FINAL TWEAK MODE (User Request: 64px height) */
        padding: 5px 10px !important;
        /* Slightly more padding */
        min-height: 50px !important;
        height: 64px !important;
        /* Final Height */
        max-height: 64px !important;
        border-radius: 26px !important;
    }

    /* Compact Items */
    .dock-item {
        width: auto !important;
        min-width: 52px !important;
        /* Slightly wider */
        height: 100% !important;
        gap: 2px !important;
        font-size: 0.65rem !important;
        /* Slightly larger text */
        justify-content: center !important;
        padding: 0 !important;
    }

    .dock-item i {
        font-size: 1.25rem !important;
        /* Larger Icons */
        margin-bottom: 2px !important;
    }

    /* Compact Center Button */
    .dock-center-btn {
        top: -20px !important;
        /* Adjusted for taller bar */
        width: 48px !important;
        height: 48px !important;
    }

    .dock-float-btn {
        width: 48px !important;
        height: 48px !important;
        border-width: 3px !important;
    }

    .dock-float-btn i {
        font-size: 1.4rem !important;
    }

    #wuffi-dock-wrapper {
        margin: 0 !important;
        width: 95vw !important;
        /* Slightly wider */
        left: auto !important;
        right: auto !important;
        transform: none !important;
        position: relative !important;
    }

    /* Collapse State: Wrapper slides down */
    #wuffi-dock-wrapper.dock-collapsed {
        transform: translateY(120%) !important;
    }

    /* Toggle Button Mobile Positioning */
    .dock-toggle-btn {
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    /* When collapsed, button stays put relative to wrapper? 
       No, if wrapper slides down, button goes with it? 
       Ideally button stays up. 
       If button is inside wrapper, we need to counter-transform it or make it look like it stays.
       Usually we want button to peek up.
       If wrapper slides down, button is top: -40px.
       It will be hidden if we don't counter it.
       Let's assume default behavior is fine (button moves down with menu). 
       Wait, toggle button is usually for bringing it BACK. 
       If it moves down off screen, you can't click it.
       So we need button to stay visible.
    */
    #wuffi-dock-wrapper.dock-collapsed .dock-toggle-btn {
        transform: translateX(-50%) translateY(-130%) !important;
        /* Push it UP relative to the sunk ship */
        display: flex !important;
    }

    /* Popup: Switch to List View on Mobile */
    .dock-popup-grid {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    /* Popup Handling: Strict Mobile Centering */
    #wuffi-dock-popup,
    #wuffi-profile-popup,
    .docky-custom-popup {
        width: 90vw !important;
        /* Screen relative width */
        max-width: 380px;
        bottom: 90px;
        left: 50% !important;
        transform: translateX(-50%) !important;
        margin-left: 0 !important;
        border-radius: 24px;
        padding: 15px;
        max-height: 70vh;
        overflow-y: auto;
        position: fixed !important;
        /* Float above everything */
        z-index: 10000;
    }

    /* Item: Horizontal Row (Icon + Text) */
    .dock-popup-item {
        flex-direction: row;
        align-items: center;
        text-align: left;
        padding: 12px 15px;
        background: rgba(255, 255, 255, 0.08);
        /* Lighter glass fill */
        border-radius: 12px;
        justify-content: flex-start;
        width: 100%;
        box-sizing: border-box;
    }

    .dock-popup-item:active,
    .dock-popup-item:hover {
        background: rgba(255, 255, 255, 0.15);
    }

    /* Force Text Color on Mobile for readability (White for Dark Theme) */
    .dock-popup-item span {
        font-size: 14px;
        color: #ffffff !important;
        /* White text requested */
        font-weight: 500;
        margin-left: 12px;
    }

    .dock-popup-item:active span,
    .dock-popup-item:hover span {
        color: #ffffff !important;
    }

    .dock-icon-circle {
        width: 36px;
        height: 36px;
        min-width: 36px;
        font-size: 16px;
        box-shadow: none;
        margin-bottom: 0;
    }


}

/* Popup Handling */
#wuffi-dock-popup,
#wuffi-profile-popup,
.docky-custom-popup {
    width: 92%;
    /* Wider on mobile */
    max-width: 400px;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 24px;
    padding: 15px;
    max-height: 70vh;
    /* Prevent overflow */
    overflow-y: auto;
    /* Scrollable if long list */
}

.dock-item {
    min-width: 50px;
}

.dock-item-badge {
    right: 12px;
    top: 2px;
}
}

/* TOGGLE BUTTON (Hide/Show) */
.dock-toggle-btn {
    position: absolute;
    background: var(--dock-bg, #ffffff);
    color: var(--dock-icon, #9CA3AF);
    border: none;
    cursor: pointer;
    z-index: 10001;
    /* Above everything */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    /* Inherit Theme Styles */
    backdrop-filter: blur(var(--dock-blur, 16px));
    -webkit-backdrop-filter: blur(var(--dock-blur, 16px));
}

.docky-theme-glass+.dock-toggle-btn {
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.dock-toggle-btn:hover {
    color: var(--dock-active);
}

/* DESKTOP: Left Side Circle */
@media (min-width: 769px) {
    .dock-toggle-btn {
        top: 50%;
        left: -40px;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        transform: translateY(-50%);
    }
}

/* MOBILE: Top Notch */
@media (max-width: 768px) {
    .dock-toggle-btn {
        top: -18px;
        /* Slightly peek out */
        left: 50%;
        transform: translateX(-50%);
        width: 60px;
        height: 20px;
        border-radius: 12px 12px 0 0;
        /* Notch shape */
        padding-bottom: 2px;
    }

    .dock-toggle-btn i {
        font-size: 12px;
    }
}

/* COLLAPSED STATE (Applied to Wrapper) */
#wuffi-dock-wrapper.dock-collapsed {
    transform: translateY(100%) translateY(20px) !important;
    /* Push fully down */
}

/* Adjust Button when Collapsed */
#wuffi-dock-wrapper.dock-collapsed .dock-toggle-btn {
    top: 0;
    transform: translateX(-50%) translateY(-100%);
    /* Center Horizontal, Move Up Vertical */
    /* Sit on top edge of wrapper (now at bottom of screen) */
    left: 50%;
    /* Center it for visibility */
    border-radius: 12px 12px 0 0;
    /* Notch shape */
    width: 60px;
    height: 20px;
}

@media (min-width: 769px) {

    /* Special Desktop Collapsed State */
    #wuffi-dock-wrapper.dock-collapsed .dock-toggle-btn {
        /* Keep it notched up */
        left: 50%;
        transform: translateY(-100%) translateX(-50%);
    }
}

/* Arrow Rotation */
#wuffi-dock-wrapper.dock-collapsed .dock-toggle-btn i {
    transform: rotate(180deg);
}

.dock-toggle-btn {
    /* Existing Styles */
    position: absolute;
    background: var(--dock-bg, #ffffff);
    color: var(--dock-icon, #9CA3AF);
    border: none;
    cursor: pointer;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(var(--dock-blur, 16px));
    -webkit-backdrop-filter: blur(var(--dock-blur, 16px));
    pointer-events: auto;
    /* CRITICAL */
}