/* --- Photos App Specific Styles --- */

/* 主照片库窗口的特殊样式 */
.photo-gallery-window {
    width: 600px;  /* 默认宽度 */
    height: 450px; /* 默认高度 */
    max-width: 90vw;
    max-height: 85vh;
}

/* 缩略图网格 */
.photo-grid {
    display: grid;
    /* 响应式网格布局：自动填充，每列最小100px，最大1fr (平均分配剩余空间) */
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 12px; /* 网格间距 */
    padding: 8px; /* 内边距 */
    height: 100%; /* 继承 .dialog-content 的高度 */
    overflow-y: auto; /* 内容超出时显示滚动条 */
}

/* 缩略图容器和图片 */
.photo-thumbnail {
    aspect-ratio: 1 / 1; /* 保持1:1的正方形比例 */
    border: 2px solid var(--win98-border-dark);
    border-right-color: var(--win98-border-light);
    border-bottom-color: var(--win98-border-light);
    background-color: #000;
    cursor: pointer;
    overflow: hidden; /* 隐藏超出部分的图片 */
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
    opacity: 0; /* 初始不可见，用于动画 */
    transform: translateY(10px); /* 初始位置偏下，用于动画 */
    animation: fadeInThumb 0.5s ease-out forwards; /* 应用入场动画 */
}

.photo-thumbnail:hover {
    transform: scale(1.08); /* 悬停时放大 */
    box-shadow: 0 0 0 3px var(--pale-blue), 0 0 10px rgba(0,0,0,0.5); /* 添加发光效果 */
    z-index: 10; /* 确保阴影在其他缩略图之上 */
    position: relative;
}

.photo-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 裁剪图片以填充容器，保持比例 */
    display: block;
    image-rendering: pixelated; /* 保持像素风格 */
}

/* 缩略图入场动画 */
@keyframes fadeInThumb {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* 照片库底部的状态栏 */
.photo-gallery-statusbar {
    display: flex;
    justify-content: space-between;
    padding: 3px 8px;
    font-size: 11px;
    background-color: var(--win98-bg);
    border-top: 1px solid var(--win98-border-dark);
    border-bottom: 1px solid var(--win98-border-light);
    color: var(--dark-text);
}

.status-section {
    padding: 0 10px;
    border-right: 1px solid var(--win98-border-dark);
    border-left: 1px solid var(--win98-border-light);
}
.status-section:first-child {
    border-left: none;
}
.status-section:last-child {
    border-right: none;
}


/* 单个图片查看器窗口 */
.image-viewer-window {
    width: 420px; /* 默认宽度 */
    max-width: 80vw;
}

/* 图片容器 */
.image-container {
    padding: 4px;
    background-color: #000;
    border: 1px solid var(--win98-border-dark);
    margin-bottom: 10px;
}

.full-size-photo {
    width: 100%;
    display: block;
    image-rendering: pixelated;
}

/* 照片信息 ("EXIF" 数据) */
.photo-info {
    font-family: var(--pixel-font-cjk);
    font-size: 11px;
    line-height: 1.6;
    color: #333;
}

.photo-info p {
    margin: 0;
}

.photo-info strong {
    display: inline-block;
    width: 80px; /* 对齐标签 */
    font-weight: normal;
    color: #000;
}

/* 为标题栏按钮组添加样式 */
.dialog-title-bar {
    /* 确保 dialog-title-bar 仍然是 flex 容器 */
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.title-bar-buttons {
    display: flex;
    align-items: center;
}

/* !!! 最大化按钮的样式 (仿照关闭按钮) !!! */
.dialog-maximize-button {
    font-family: 'Arial', sans-serif;
    font-weight: bold;
    font-size: 12px;
    line-height: 10px;
    background-color: var(--win98-bg);
    color: black;
    border-top: 1px solid var(--win98-border-light);
    border-left: 1px solid var(--win98-border-light);
    border-right: 1px solid var(--win98-border-dark);
    border-bottom: 1px solid var(--win98-border-dark);
    width: 16px;
    height: 14px;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 3px; /* 与关闭按钮的间距 */
}
.dialog-maximize-button:active {
    border-top: 1px solid var(--win98-border-dark);
    border-left: 1px solid var(--win98-border-dark);
    border-right: 1px solid var(--win98-border-light);
    border-bottom: 1px solid var(--win98-border-light);
}

/* 当 body 拥有 .gallery-maximized class 时... */
/* 1. Logo 缩小并移动到角落 */
body.gallery-maximized .main-logo {
    /* 使用 transform: scale() 来平滑缩小 */
    transform: scale(0.7);
    /* 调整位置以紧贴边缘 */
    top: 10px;
    left: 15px;
}

/* 2. Copyright 内容变得精简和透明 */
body.gallery-maximized .copyright {
    /* 增加透明度 */
    opacity: 0.3;
    /* 稍微向下移动，营造“让位”的感觉 */
    transform: translateY(9px);
}


/* 响应式调整 */
@media (max-width: 768px) {
    .photo-gallery-window {
        width: 90vw;
        height: 70vh;
    }
    .photo-grid {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
        gap: 8px;
    }
}