/* ===== Contact Us弹窗样式 ===== */

/* 弹窗遮罩层 */
.modal-overlay {
    position: fixed;
    /* 固定定位，相对于视窗 */
    top: 0;
    /* 顶部0距离 */
    left: 0;
    /* 左侧0距离 */
    right: 0;
    /* 右侧0距离 */
    bottom: 0;
    /* 底部0距离 */
    background: rgba(0, 0, 0, 0.7);
    /* 半透明黑色背景 */
    backdrop-filter: blur(5px);
    /* 背景模糊效果 */
    display: none;
    /* 默认隐藏 */
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
    z-index: 1000;
    /* 高层级，确保在其他元素之上 */
    opacity: 0;
    /* 初始透明度为0 */
    transition: opacity 0.3s ease;
    /* 透明度变化动画 */
}

/* 弹窗显示状态 */
.modal-overlay.show {
    display: flex;
    /* 显示为flex布局 */
    opacity: 1;
    /* 完全不透明 */
}

/* 弹窗主体容器 */
.modal-container {
    background: var(--card-bg);
    /* 使用项目统一的卡片背景色 */
    border-radius: 16px;
    /* 圆角16px，现代化设计 */
    border: 1px solid var(--border);
    /* 使用项目统一的边框颜色 */
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    /* 深度阴影效果 */
    max-width: 400px;
    /* 最大宽度400px */
    width: 90%;
    /* 宽度90%，响应式设计 */
    max-height: 80vh;
    /* 最大高度80%视窗高度 */
    overflow: auto;
    /* 内容溢出时滚动 */
    position: relative;
    /* 相对定位，用于关闭按钮定位 */
    transform: scale(0.8);
    /* 初始缩放为0.8 */
    transition: transform 0.3s ease;
    /* 缩放变化动画 */
}

/* 弹窗显示时的缩放效果 */
.modal-overlay.show .modal-container {
    transform: scale(1);
    /* 显示时恢复到正常大小 */
}

/* 弹窗头部 */
.modal-header {
    padding: 2rem 2rem 1rem 2rem;
    /* 内边距：上2rem，左右2rem，下1rem */
    text-align: center;
    /* 文本居中 */
    border-bottom: 1px solid var(--border);
    /* 底部分隔线 */
}

/* 弹窗标题 */
.modal-title {
    font-size: 1.5rem;
    /* 字体大小1.5rem */
    font-weight: 600;
    /* 字体粗细：半粗体 */
    color: var(--text-primary);
    /* 主文字颜色 */
    margin: 0;
    /* 移除默认外边距 */
    background: none;
    /* 纯色标题 */
    -webkit-text-fill-color: currentColor;
}

/* 关闭按钮 */
.modal-close {
    position: absolute;
    /* 绝对定位 */
    top: 1rem;
    /* 距离顶部1rem */
    right: 1rem;
    /* 距离右侧1rem */
    background: none;
    /* 无背景 */
    border: none;
    /* 无边框 */
    color: var(--text-secondary);
    /* 次要文字颜色 */
    font-size: 1.5rem;
    /* 字体大小1.5rem */
    cursor: pointer;
    /* 鼠标指针样式 */
    transition: all 0.3s ease;
    /* 所有属性平滑过渡 */
    width: 32px;
    /* 宽度32px */
    height: 32px;
    /* 高度32px */
    display: flex;
    /* flex布局 */
    align-items: center;
    /* 垂直居中 */
    justify-content: center;
    /* 水平居中 */
    border-radius: 50%;
    /* 圆形按钮 */
}

/* 关闭按钮悬停效果 */
.modal-close:hover {
    color: var(--text-primary);
    /* 悬停时文字变为主色 */
    background: color-mix(in srgb, var(--accent) 10%, var(--card-bg) 90%);
    /* 悬停时添加背景 */
    transform: rotate(8deg);
    /* 悬停时克制旋转 */
}

/* 弹窗内容区域 */
.modal-content {
    padding: 1.5rem 2rem 2rem 2rem;
    /* 内边距：上1.5rem，左右2rem，下2rem */
}

/* 联系方式列表 */
.contact-list {
    display: flex;
    /* flex布局 */
    flex-direction: column;
    /* 垂直排列 */
    gap: 1.5rem;
    /* 子元素间距1.5rem */
}

/* 单个联系方式项目 */
.contact-item {
    display: flex;
    /* flex布局 */
    align-items: center;
    /* 垂直居中 */
    gap: 1rem;
    /* 子元素间距1rem */
    padding: 1rem;
    /* 内边距1rem */
    background: rgba(255, 255, 255, 0.03);
    /* 半透明白色背景 */
    border-radius: 12px;
    /* 圆角12px */
    border: 1px solid rgba(255, 255, 255, 0.1);
    /* 轻微边框 */
    transition: all 0.3s ease;
    /* 所有属性平滑过渡 */
    cursor: pointer;
    /* 鼠标指针样式 */
    text-decoration: none;
    /* 移除链接下划线 */
    color: inherit;
    /* 继承文字颜色 */
}

/* 联系方式项目悬停效果 */
.contact-item:hover {
    background: color-mix(in srgb, var(--accent) 10%, var(--card-bg) 90%);
    /* 悬停时轻微亮度变化 */
    border-color: var(--accent);
    /* 悬停时边框变为强调色 */
    transform: none;
    /* 无位移动画 */
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
    /* 微妙阴影 */
}

/* 联系方式图标容器 */
.contact-icon {
    width: 48px;
    /* 宽度48px */
    height: 48px;
    /* 高度48px */
    display: flex;
    /* flex布局 */
    align-items: center;
    /* 垂直居中 */
    justify-content: center;
    /* 水平居中 */
    border-radius: 12px;
    /* 圆角12px */
    font-size: 1.5rem;
    /* 字体大小1.5rem */
    flex-shrink: 0;
    /* 不缩放，保持固定尺寸 */
    transition: all 0.3s ease;
    /* 所有属性平滑过渡 */
}

/* 邮箱图标样式 */
.contact-icon.email {
    background: rgba(79, 172, 254, 0.15);
    /* 蓝色半透明背景 */
    color: #4facfe;
    /* 蓝色文字 */
}

/* Telegram图标样式 */
.contact-icon.telegram {
    background: rgba(46, 137, 204, 0.15);
    /* Telegram蓝色半透明背景 */
    color: #2e89cc;
    /* Telegram蓝色文字 */
}

/* X(Twitter)图标样式 */
.contact-icon.twitter {
    background: rgba(29, 161, 242, 0.15);
    /* Twitter蓝色半透明背景 */
    color: #1da1f2;
    /* Twitter蓝色文字 */
}

/* 悬停时图标效果 */
.contact-item:hover .contact-icon {
    transform: scale(1.03);
    /* 轻微缩放 */
}

/* 联系方式信息 */
.contact-info {
    flex: 1;
    /* 占据剩余空间 */
    min-width: 0;
    /* 允许内容缩放 */
}

/* 联系方式标题 */
.contact-title {
    font-size: 1rem;
    /* 字体大小1rem */
    font-weight: 600;
    /* 字体粗细：半粗体 */
    color: var(--text-primary);
    /* 主文字颜色 */
    margin: 0 0 0.25rem 0;
    /* 底部外边距0.25rem */
}

/* 联系方式详情 */
.contact-detail {
    font-size: 0.9rem;
    /* 字体大小0.9rem */
    color: var(--text-secondary);
    /* 次要文字颜色 */
    margin: 0;
    /* 移除默认外边距 */
    word-break: break-all;
    /* 长文本换行 */
}

/* 外部链接指示器 */
.external-link-icon {
    width: 16px;
    /* 宽度16px */
    height: 16px;
    /* 高度16px */
    color: var(--text-secondary);
    /* 次要文字颜色 */
    opacity: 0;
    /* 初始透明 */
    transition: opacity 0.3s ease;
    /* 透明度变化动画 */
}

/* 悬停时显示外部链接指示器 */
.contact-item:hover .external-link-icon {
    opacity: 1;
    /* 悬停时显示 */
}

/* ===== 响应式设计 ===== */

/* 平板设备适配 */
@media (max-width: 768px) {
    .modal-container {
        margin: 1rem;
        /* 外边距1rem */
        width: calc(100% - 2rem);
        /* 宽度为100%减去左右边距 */
    }

    .modal-header {
        padding: 1.5rem 1.5rem 1rem 1.5rem;
        /* 减少内边距 */
    }

    .modal-content {
        padding: 1rem 1.5rem 1.5rem 1.5rem;
        /* 减少内边距 */
    }

    .contact-list {
        gap: 1rem;
        /* 减少间距 */
    }

    .contact-icon {
        width: 40px;
        /* 减少图标尺寸 */
        height: 40px;
        font-size: 1.2rem;
        /* 减少字体大小 */
    }
}

/* 手机设备适配 */
@media (max-width: 480px) {
    .modal-container {
        margin: 0.5rem;
        /* 进一步减少外边距 */
        width: calc(100% - 1rem);
        /* 调整宽度 */
    }

    .modal-header {
        padding: 1rem;
        /* 进一步减少内边距 */
    }

    .modal-content {
        padding: 1rem;
        /* 进一步减少内边距 */
    }

    .modal-title {
        font-size: 1.25rem;
        /* 减少标题字体大小 */
    }

    .contact-item {
        padding: 0.75rem;
        /* 减少项目内边距 */
        gap: 0.75rem;
        /* 减少间距 */
    }

    .contact-icon {
        width: 36px;
        /* 进一步减少图标尺寸 */
        height: 36px;
        font-size: 1.1rem;
        /* 进一步减少字体大小 */
    }

    .contact-title {
        font-size: 0.9rem;
        /* 减少标题字体大小 */
    }

    .contact-detail {
        font-size: 0.8rem;
        /* 减少详情字体大小 */
    }
}

/* ===== 主题兼容性 ===== */

/* 明亮主题适配 */
body.light-theme .modal-overlay {
    background: rgba(0, 0, 0, 0.4);
    /* 浅色遮罩 */
}

body.light-theme .modal-container {
    background: #fff;
    /* 白色背景 */
    border-color: #e5e5e5;
    /* 浅灰色边框 */
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    /* 浅色阴影 */
}

body.light-theme .modal-header {
    border-color: #e5e5e5;
    /* 浅灰色边框 */
}

body.light-theme .modal-close {
    color: #666;
    /* 灰色文字 */
}

body.light-theme .modal-close:hover {
    color: #333;
    /* 悬停时深灰色文字 */
    background: rgba(0, 0, 0, 0.05);
    /* 悬停时浅色背景 */
}

body.light-theme .contact-item {
    background: #f8f9fa;
    /* 浅灰色背景 */
    border-color: #e5e5e5;
    /* 浅灰色边框 */
}

body.light-theme .contact-item:hover {
    background: #e9ecef;
    /* 悬停时更深的浅色背景 */
    border-color: #00d4aa;
    /* 悬停时青绿色边框 */
    box-shadow: 0 4px 15px rgba(0, 212, 170, 0.2);
    /* 青绿色阴影 */
}

/* ===== 动画效果 ===== */

/* 弹窗进入动画 */
@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(-20px);
    }

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

/* 弹窗退出动画 */
@keyframes modalFadeOut {
    from {
        opacity: 1;
        transform: scale(1) translateY(0);
    }

    to {
        opacity: 0;
        transform: scale(0.8) translateY(-20px);
    }
}

/* 应用动画到弹窗容器 */
.modal-overlay.show .modal-container {
    animation: modalFadeIn 0.3s ease forwards;
}

.modal-overlay.hiding .modal-container {
    animation: modalFadeOut 0.3s ease forwards;
}

/* ===== 版本更新弹窗 ===== */

/* z-index 高于普通弹窗，确保在最上层 */
#versionModal.modal-overlay {
    z-index: 10000;
}

.version-update-container {
    text-align: center;
}

.version-update-container .modal-header {
    border-bottom: none;
    padding-bottom: 0;
}

.version-update-container .modal-title {
    font-size: 1.3rem;
}

.version-update-content {
    text-align: center;
    padding-top: 0.5rem;
}

.version-update-message {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin: 0 0 1.5rem 0;
    line-height: 1.6;
}

.version-refresh-btn {
    display: inline-block;
    padding: 12px 40px;
    font-size: 1rem;
    font-weight: 600;
    font-family: Inter, system-ui, sans-serif;
    color: #f8fafc;
    background: var(--accent);
    border: 1px solid color-mix(in srgb, var(--accent) 72%, #000000 28%);
    border-radius: 10px;
    cursor: pointer;
    transition: filter 0.2s ease, box-shadow 0.2s ease;
}

.version-refresh-btn:hover {
    filter: brightness(1.05);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.14);
}

.version-refresh-btn:active {
    filter: brightness(0.98);
}

/* 明亮主题下与暗色主题保持一致，均使用 --accent */
body.light-theme .version-update-message {
    color: #555;
}