/* Photo Gallery Window Styles */

/* Window styling */
.photo-gallery-window {
    width: 800px;
    height: 600px;
    min-width: 500px;
    min-height: 400px;
}

/* Title bar specific styling */
.photo-gallery-window .title-bar {
    background-color: rgb(249, 249, 249);
    position: relative;
}

.photo-gallery-window .title-bar .title-text {
    color: #333;
}

/* Right-side toolbar icons container */
.title-bar-icons {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 10;
}

/* Expand button positioned on the left side */
.expand-button-container {
    position: absolute;
    left: 100px; /* More space from traffic lights */
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px 4px;
    border-radius: 4px;
}

.expand-button-container:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

/* Icon transition animations */
.icon-transition-container {
    position: relative;
    width: 16px;
    height: 16px;
    z-index: 50; /* Ensure it's above other title bar elements */
}

.icon-transition-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: transform 0.2s, opacity 0.2s;
    object-fit: contain;
    cursor: pointer; /* Make sure the cursor shows this is clickable */
    z-index: 51; /* Ensure the icons are clickable */
}

.icon-transition-container img.active {
    transform: scale(1);
    opacity: 1;
}

.icon-transition-container img.inactive {
    transform: scale(0.7);
    opacity: 0;
}

.photo-gallery-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: #fff;
    overflow: hidden;
}

/* Toolbar styling */
.photo-toolbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 10px 15px;
    background-color: rgb(249, 249, 249);
    border-bottom: 1px solid #e0e0e0;
    flex-shrink: 0;
}

.toolbar-spacer {
    flex-grow: 1;
}

.toolbar-icons {
    display: flex;
    gap: 12px;
    align-items: center;
}

.toolbar-icon {
    width: 16px;
    height: 16px;
    cursor: pointer;
    opacity: 1;
    transition: opacity 0.2s;
    object-fit: contain;
}

/* Make specific icons even smaller */
.toolbar-icon[data-action="info"],
.toolbar-icon[data-action="heart"],
.toolbar-icon[data-action="search"] {
    width: 14px;
    height: 14px;
}

/* Hover effect for all control icons */
.toolbar-icon-wrapper {
    padding: 2px 4px;
    border-radius: 4px;
}

.toolbar-icon-wrapper:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

.toolbar-icon:hover {
    opacity: 0.8;
}

/* Unfocused window toolbar icons */
.finder-window:not(.focused) .toolbar-icon {
    opacity: 0.6;
}

/* Photo grid styling */
.photo-grid-container {
    flex-grow: 1;
    overflow-y: auto;
    padding: 15px;
    background-color: #fff;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.photo-grid-container::-webkit-scrollbar {
    display: none;
}

.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    padding-bottom: 20px;
}

.photo-item {
    position: relative;
    aspect-ratio: 1/1;
    overflow: hidden;
    border-radius: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: none;
}

.photo-item:hover {
    transform: none;
}

.photo-item:hover .photo-heart-icon {
    display: block;
}

.photo-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: object-fit 0.3s ease;
}

/* Expanded mode: images maintain aspect ratio within squares */
.photo-grid.expanded .photo-thumbnail {
    object-fit: contain;
}

.photo-thumbnail.loading {
    background-color: #f0f0f0;
    background-image: url('/assets/photo/gallery/loading.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 24px;
}

.no-images-message {
    width: 100%;
    text-align: center;
    padding: 40px;
    color: #666;
    font-size: 16px;
}

/* Heart icon on photo item */
.photo-heart-icon {
    position: absolute;
    bottom: 10px;
    left: 10px;
    width: 19px;
    height: 18.5px;
    cursor: pointer;
    display: none;
    z-index: 2;
}

/* Photo viewer overlay - confined to content area */
.photo-viewer-overlay {
    position: absolute;
    top: 32px; /* Height of the title bar */
    left: 0;
    width: 100%;
    height: calc(100% - 32px); /* Full height minus title bar height */
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    overflow: hidden; /* Prevent content from overflowing */
    pointer-events: auto;
}

/* Image container in photo viewer */
.image-container {
    position: relative;
    display: inline-block;
    max-width: 100%;
    max-height: 100%;
    /* Ensure container is clickable */
    cursor: default;
}

.photo-viewer-content {
    position: relative;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px; /* Add padding to ensure spacing from edges */
    box-sizing: border-box; /* Include padding in size calculation */
    height: 100%; /* Ensure content takes full height */
}

.photo-viewer-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block; /* Remove any extra spacing */
    height: auto; /* Allow natural height */
    /* No border-radius in normal mode */
    backface-visibility: visible;
    transform-style: preserve-3d;
}

.photo-viewer-img.rotated-90 {
    transform: rotate(-90deg);
}

.photo-viewer-img.rotated-180 {
    transform: rotate(-180deg);
}

.photo-viewer-img.rotated-270 {
    transform: rotate(-270deg);
}

/* Flip transition timing */
.photo-viewer-img[style*="rotateY"] {
    transition: transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1) !important;
}

/* Progressive blur effect for back face - contained within card boundaries */
.depth-effect-active .image-container {
    /* Ensure blur stays within card boundaries */
    overflow: hidden;
    border-radius: 12px; /* Match the image border radius */
}

/* Progressive dark overlay for back face - bottom to top gradient */
.image-flip-wrapper.flipped-back::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    border-radius: inherit;
    
    /* Progressive dark overlay - lighter layer */
    background: rgba(0, 0, 0, 0.25);
    
    /* Mask for progressive effect - max opacity at bottom, transparent at top */
    mask: linear-gradient(to top,
        black 0%,           /* Full opacity at bottom */
        black 25%,          /* Full opacity continues */
        rgba(0,0,0,0.9) 45%, /* Start fading */
        rgba(0,0,0,0.7) 65%, /* More fading */
        rgba(0,0,0,0.3) 80%, /* Almost transparent */
        transparent 100%     /* Transparent at top */
    );
    -webkit-mask: linear-gradient(to top,
        black 0%,           /* Full opacity at bottom */
        black 25%,          /* Full opacity continues */
        rgba(0,0,0,0.9) 45%, /* Start fading */
        rgba(0,0,0,0.7) 65%, /* More fading */
        rgba(0,0,0,0.3) 80%, /* Almost transparent */
        transparent 100%     /* Transparent at top */
    );
}

/* Strong dark layer for bottom portion */
.image-flip-wrapper.flipped-back::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 50%;
    pointer-events: none;
    z-index: 1;
    border-radius: inherit;
    
    /* Stronger dark overlay for bottom half */
    background: rgba(0, 0, 0, 0.6);
    
    /* Fade out towards middle */
    mask: linear-gradient(to top,
        black 0%,
        black 35%,
        rgba(0,0,0,0.8) 65%,
        rgba(0,0,0,0.4) 85%,
        transparent 100%
    );
    -webkit-mask: linear-gradient(to top,
        black 0%,
        black 35%,
        rgba(0,0,0,0.8) 65%,
        rgba(0,0,0,0.4) 85%,
        transparent 100%
    );
}

/* Image flip wrapper for rigid unit behavior */
.image-flip-wrapper {
    position: relative;
    display: inline-block;
    transform-style: preserve-3d;
    border-radius: 12px;
}

.image-flip-wrapper.flipped-back {
    overflow: visible;
}

/* LIVE badge */
.live-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    border-radius: 4px;
    padding: 4px 8px;
    z-index: 10; /* Below flip overlay (z-index: 15) */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: opacity 0.3s ease-out;
    /* Ensure badge inherits parent transforms (follows image rotation) */
    transform-style: preserve-3d;
}

.live-badge img {
    width: 14px;
    height: 14px;
    margin-right: 5px;
}

.live-badge span {
    color: black;
    font-size: 12px;
    font-weight: normal;
}

/* Badge visibility transitions */
.live-badge {
    transition: opacity 0.3s ease-out;
}

/* Navigation arrows */
.photo-nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    width: 30px;
    height: 30px; /* Same height as width for capsule */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s;
    box-shadow: none; /* Remove shadow */
}

.photo-nav-arrow.left {
    left: 15px;
}

.photo-nav-arrow.right {
    right: 15px;
}

.photo-viewer-overlay:hover .photo-nav-arrow {
    opacity: 1;
}

.photo-nav-arrow img {
    width: 16px;
    height: 16px;
}

.photo-viewer-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.2s;
}

.photo-viewer-close:hover {
    background-color: rgba(255, 255, 255, 0.7);
}

/* Make all control icons grey by default */
.toolbar-icon {
    opacity: 0.5;
    cursor: default;
}

/* Make expand/compress icons normal and clickable */
.toolbar-icon[data-action="expand"],
.toolbar-icon[data-action="expand-grey"],
.toolbar-icon[data-action="compress"],
.toolbar-icon[data-action="compress-grey"] {
    opacity: 1 !important;
    cursor: pointer !important;
    z-index: 100; /* Ensure icons are clickable */
}

/* Set rotate icon opacity specifically to 0.5 */
.toolbar-icon[data-action="rotate"] {
    opacity: 0.5 !important;
    cursor: pointer !important;
}

/* Prevent propagation of clicks inside photo viewer */
.photo-viewer-overlay {
    pointer-events: auto;
}

/* Make sure all interactive elements receive clicks */
.photo-viewer-close,
.photo-nav-arrow,
.image-container,
.photo-viewer-img {
    pointer-events: auto !important;
}

/* 3D mode images are always clickable */
.depth-effect-active .photo-viewer-img {
    transform: translateZ(40px) scale(0.95);
    box-shadow: 0 10px 30px -15px rgba(0, 0, 0, 0.3);
    /* Ensure image quality is preserved */
    image-rendering: optimizeQuality;
    /* Prevent content overflow */
    max-width: 95%;
    max-height: 95%;
    /* Add corner radius to image ONLY in 3D mode */
    border-radius: 12px;
    /* Ensure the badge is correctly positioned relative to image */
    position: relative;
    overflow: visible;
    /* Full click coverage */
    cursor: pointer;
    pointer-events: auto;
}

/* 3D Depth Effect Styles - Enhanced */
.depth-effect-active {
    transform-style: preserve-3d !important;
    perspective: 1200px !important;
    will-change: transform;
    transition-property: transform;
    transition-duration: 0.2s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    backface-visibility: hidden;
    transform: perspective(1200px) rotateX(0) rotateY(0);
    cursor: grab;
    /* Prevent content overflow */
    overflow: visible;
}

.depth-effect-active .photo-viewer-img,
.depth-effect-active .live-badge {
    will-change: transform;
    transition-property: transform;
    transition-duration: 0.2s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center center;
}

.depth-effect-active .live-badge {
    /* Position badge inside the image corner */
    top: 5%;
    left: 5%;
    transform: translateZ(45px) scale(0.98); /* Less Z distance from image */
    box-shadow: 0 10px 30px -15px rgba(0, 0, 0, 0.3);
    /* Ensure text remains visible */
    backface-visibility: visible;
    transform-style: flat;
    /* Fix text rendering issues */
    filter: none;
    text-rendering: optimizeLegibility;
}

/* Make container clickable in 3D mode */
.depth-effect-active.image-container {
    cursor: pointer !important;
    /* Ensure full click coverage */
    width: 100%;
    height: 100%;
    pointer-events: auto !important;
    transform-origin: center center;
    /* Ensure container fills available space */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Update existing styles to make sure the 3D effect works properly */
.photo-viewer-content {
    position: relative;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px; /* Add padding to ensure spacing from edges */
    box-sizing: border-box; /* Include padding in size calculation */
    height: 100%; /* Ensure content takes full height */
}

/* Override existing styles to prevent conflicts with 3D effect */
.photo-viewer-overlay .image-container {
    transform-style: preserve-3d;
    perspective: 1200px;
    transform: rotateX(0deg) rotateY(0deg);
    transition-property: transform;
    transition-duration: 0.2s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Simplified subtle glare effect that won't cause rendering issues */
.depth-effect-active::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.08) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    pointer-events: none;
    z-index: 2; /* Lower z-index to prevent layering issues */
    mix-blend-mode: overlay;
    border-radius: inherit;
    /* No animations to prevent rendering issues */
}