.finder-window {
    position: absolute;
    min-width: 360px;
    min-height: 240px;
    width: 600px;
    height: 400px;
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 13px;
    color: #000;
    z-index: 100;
    
    /* Touch device optimizations from old website */
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation; /* Improve touch responsiveness */
    user-select: none;
    -webkit-user-select: none;
}

.title-bar {
    height: 32px;
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    cursor: default;
    position: relative;
    
    /* Touch optimizations for dragging */
    touch-action: none; /* Prevent default touch behaviors during drag */
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none; /* Disable callout on long press */
}

.traffic-lights {
    display: flex;
    align-items: center;
    position: relative; 
    z-index: 10; 
}

.dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    margin-right: 8px;
    border: 0.5px solid rgba(0,0,0,0.15);
    cursor: default;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative; /* Needed for pseudo-element */
}

/* Invisible hit area expansion using pseudo-element */
.dot::before {
    content: '';
    position: absolute;
    top: -4px; /* Extend 4px above */
    left: -4px; /* Extend 4px left */
    right: -4px; /* Extend 4px right */
    bottom: -4px; /* Extend 4px below */
    /* Make it effectively 22x22px (14px + 4px*2) */
    /* No background, purely for interaction */
}

.dot svg {
    display: none;
}
.dot:hover svg {
    display: block;
}

.dot-symbol {
    display: none; 
    color: black;
    font-weight: bold;
    font-size: 10px; 
    line-height: 1; 
}

.dot:hover .dot-symbol {
    display: inline; 
}

.dot.red {
    background-color: #ff5f57;
}
.dot.yellow {
    background-color: #febc2e;
}
.dot.green {
    background-color: #28c840;
}

.title-text {
    position: absolute; 
    left: 50%;          
    transform: translateX(-50%); 
    font-size: 14px;
    font-weight: 600; 
    user-select: none; 
    z-index: 10;
    /* Truncation and centering assist for all window titles */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Left: 12px(pad) + 58px(lights) + 10px(pad) = 80px */
    /* Right: 12px(pad) */
    /* Total reserved: 92px approx. */
    max-width: calc(100% - 92px);
    display: inline-block; /* Needed for max-width to work with transform */
    vertical-align: middle; /* Helps alignment with absolute positioning and transform */
}

/* Generic content area within a window, if not overridden by specific types */
.window-content {
    flex: 1;
    padding: 15px 20px 20px; /* top left/right bottom */
    overflow-y: auto;
    overflow-x: hidden;
    line-height: 1.4;
    /* Override specific window type styling if needed */
}

/* --- Focus State Styling --- */

/* Non-focused window: Title text */
.finder-window:not(.focused) .title-text,
.photo-gallery-window:not(.focused) .title-text,
.notes-window:not(.focused) .title-text,
.chess-window:not(.focused) .title-text,
.quran-window:not(.focused) .title-text,
.calendar-window:not(.focused) .title-text,
.microsoft-window:not(.focused) .title-text,
.firefox-window:not(.focused) .title-text,
.item-window:not(.focused) .title-text,
.pdf-window:not(.focused) .title-text {
    color: rgb(112, 112, 112);
}

/* Non-focused window: Traffic lights */
/* Individual dot styling to override specific colors when not focused */
.finder-window:not(.focused) .traffic-lights .dot.red,
.finder-window:not(.focused) .traffic-lights .dot.yellow,
.finder-window:not(.focused) .traffic-lights .dot.green,
.photo-gallery-window:not(.focused) .traffic-lights .dot.red,
.photo-gallery-window:not(.focused) .traffic-lights .dot.yellow,
.photo-gallery-window:not(.focused) .traffic-lights .dot.green,
.notes-window:not(.focused) .traffic-lights .dot.red,
.notes-window:not(.focused) .traffic-lights .dot.yellow,
.notes-window:not(.focused) .traffic-lights .dot.green,
.chess-window:not(.focused) .traffic-lights .dot.red,
.chess-window:not(.focused) .traffic-lights .dot.yellow,
.chess-window:not(.focused) .traffic-lights .dot.green,
.quran-window:not(.focused) .traffic-lights .dot.red,
.quran-window:not(.focused) .traffic-lights .dot.yellow,
.quran-window:not(.focused) .traffic-lights .dot.green,
.calendar-window:not(.focused) .traffic-lights .dot.red,
.calendar-window:not(.focused) .traffic-lights .dot.yellow,
.calendar-window:not(.focused) .traffic-lights .dot.green,
.microsoft-window:not(.focused) .traffic-lights .dot.red,
.microsoft-window:not(.focused) .traffic-lights .dot.yellow,
.microsoft-window:not(.focused) .traffic-lights .dot.green,
.firefox-window:not(.focused) .traffic-lights .dot.red,
.firefox-window:not(.focused) .traffic-lights .dot.yellow,
.firefox-window:not(.focused) .traffic-lights .dot.green,
.item-window:not(.focused) .traffic-lights .dot.red,
.item-window:not(.focused) .traffic-lights .dot.yellow,
.item-window:not(.focused) .traffic-lights .dot.green,
.pdf-window:not(.focused) .traffic-lights .dot.red,
.pdf-window:not(.focused) .traffic-lights .dot.yellow,
.pdf-window:not(.focused) .traffic-lights .dot.green {
    background-color: rgb(177, 177, 177);
}

/* Non-focused window: Hide SVG symbols inside traffic lights */
.finder-window:not(.focused) .traffic-lights .dot .dot-symbol,
.photo-gallery-window:not(.focused) .traffic-lights .dot .dot-symbol,
.notes-window:not(.focused) .traffic-lights .dot .dot-symbol,
.chess-window:not(.focused) .traffic-lights .dot .dot-symbol,
.quran-window:not(.focused) .traffic-lights .dot .dot-symbol,
.calendar-window:not(.focused) .traffic-lights .dot .dot-symbol,
.microsoft-window:not(.focused) .traffic-lights .dot .dot-symbol,
.firefox-window:not(.focused) .traffic-lights .dot .dot-symbol,
.item-window:not(.focused) .traffic-lights .dot .dot-symbol,
.pdf-window:not(.focused) .traffic-lights .dot .dot-symbol {
    display: none;
}

/* Ensure focused styles are explicit if needed, though defaults might suffice */
.finder-window.focused .title-text,
.photo-gallery-window.focused .title-text,
.notes-window.focused .title-text,
.chess-window.focused .title-text,
.quran-window.focused .title-text,
.calendar-window.focused .title-text,
.microsoft-window.focused .title-text,
.firefox-window.focused .title-text,
.item-window.focused .title-text,
.pdf-window.focused .title-text {
    /* Default color (e.g., #333 or as previously defined) */
    /* color: initial; or specific color */
}

.finder-window.focused .traffic-lights .dot.red,
.photo-gallery-window.focused .traffic-lights .dot.red,
.notes-window.focused .traffic-lights .dot.red,
.chess-window.focused .traffic-lights .dot.red,
.quran-window.focused .traffic-lights .dot.red,
.calendar-window.focused .traffic-lights .dot.red,
.microsoft-window.focused .traffic-lights .dot.red,
.firefox-window.focused .traffic-lights .dot.red,
.item-window.focused .traffic-lights .dot.red,
.pdf-window.focused .traffic-lights .dot.red {
    background-color: #ff5f57 !important; /* Default red */
}
.finder-window.focused .traffic-lights .dot.yellow,
.photo-gallery-window.focused .traffic-lights .dot.yellow,
.notes-window.focused .traffic-lights .dot.yellow,
.chess-window.focused .traffic-lights .dot.yellow,
.quran-window.focused .traffic-lights .dot.yellow,
.calendar-window.focused .traffic-lights .dot.yellow,
.microsoft-window.focused .traffic-lights .dot.yellow,
.firefox-window.focused .traffic-lights .dot.yellow,
.item-window.focused .traffic-lights .dot.yellow,
.pdf-window.focused .traffic-lights .dot.yellow {
    background-color: #febc2e !important; /* Default yellow - fixed to match base color */
}
.finder-window.focused .traffic-lights .dot.green,
.photo-gallery-window.focused .traffic-lights .dot.green,
.notes-window.focused .traffic-lights .dot.green,
.chess-window.focused .traffic-lights .dot.green,
.quran-window.focused .traffic-lights .dot.green,
.calendar-window.focused .traffic-lights .dot.green,
.microsoft-window.focused .traffic-lights .dot.green,
.firefox-window.focused .traffic-lights .dot.green,
.item-window.focused .traffic-lights .dot.green,
.pdf-window.focused .traffic-lights .dot.green {
    background-color: #28c840 !important; /* Default green - fixed to match base color exactly */
}
.finder-window.focused .traffic-lights .dot .dot-symbol,
.photo-gallery-window.focused .traffic-lights .dot .dot-symbol,
.notes-window.focused .traffic-lights .dot .dot-symbol,
.chess-window.focused .traffic-lights .dot .dot-symbol,
.quran-window.focused .traffic-lights .dot .dot-symbol,
.calendar-window.focused .traffic-lights .dot .dot-symbol,
.microsoft-window.focused .traffic-lights .dot .dot-symbol,
.firefox-window.focused .traffic-lights .dot .dot-symbol,
.item-window.focused .traffic-lights .dot .dot-symbol,
.pdf-window.focused .traffic-lights .dot .dot-symbol {
    display: block; /* Or inline, inline-block, depending on original styling */
}

/* Responsive window adjustments */
@media (max-width: 768px) {
    .finder-window:not(.firefox-window) {
        min-width: 300px; /* Reduce minimum width for tablets */
        min-height: 250px; /* Reduce minimum height */
        max-width: calc(100vw - 20px); /* Prevent overflow with margin */
        max-height: calc(100vh - 60px); /* Account for menu bar and dock */
    }
    
    .title-bar {
        height: 28px; /* Slightly smaller title bar but not too small */
        padding: 0 10px; /* Reduce padding */
    }
    
    .traffic-lights {
        gap: 7px; /* Maintain decent gap */
    }
    
    .dot {
        width: 12px; /* Keep reasonable size for tablet */
        height: 12px;
    }
    
    .dot::before {
        width: 22px; /* Larger hit area for touch */
        height: 22px;
        top: -5px;
        left: -5px;
    }
    
    .title-text {
        font-size: 13px; /* Keep readable title */
        max-width: calc(100% - 100px); /* Adjust for larger traffic lights */
    }
    
    .window-content {
        padding: 10px 15px 15px; /* Reduce content padding */
    }
}

@media (max-width: 540px) {
    .finder-window:not(.firefox-window) {
        min-width: 280px; /* Mobile optimization */
        min-height: 220px;
        max-width: calc(100vw - 12px); /* Minimal margins for more space */
        max-height: calc(100vh - 52px);
        border-radius: 8px; /* Smaller border radius */
    }
    
    .title-bar {
        height: 32px; /* Larger title bar for better touch targets */
        padding: 0 12px; /* More padding for touch comfort */
    }
    
    .traffic-lights {
        gap: 8px; /* Comfortable gap for touch */
    }
    
    .dot {
        width: 14px; /* Maintain visible size for touch */
        height: 14px;
    }
    
    .dot::before {
        width: 32px; /* Large touch target (44px recommended minimum) */
        height: 32px;
        top: -9px;
        left: -9px;
    }
    
    .title-text {
        font-size: 12px; /* Readable title */
        max-width: calc(100% - 110px); /* Account for larger traffic lights */
    }
    
    .window-content {
        padding: 12px 16px 16px; /* Comfortable touch padding */
        font-size: 14px; /* Readable content text */
    }
}

@media (max-width: 400px) {
    .finder-window:not(.firefox-window) {
        min-width: 260px; /* Very small screens */
        min-height: 200px;
        max-width: calc(100vw - 8px);
        max-height: calc(100vh - 48px);
    }
    
    .title-bar {
        height: 34px; /* Even larger for small screens */
        padding: 0 8px;
    }
    
    .traffic-lights {
        gap: 6px; /* Tight but usable spacing */
    }
    
    .dot {
        width: 12px; /* Still visible */
        height: 12px;
    }
    
    .dot::before {
        width: 36px; /* Very large touch target */
        height: 36px;
        top: -12px;
        left: -12px;
    }
    
    .title-text {
        font-size: 11px;
        max-width: calc(100% - 90px);
    }
    
    .window-content {
        padding: 10px 12px 12px;
        font-size: 13px;
    }
}