/* 窗口主题样式 - 与二次元动漫背景搭配 */

/* 全局透明度变量 - 修改这里的值可以统一调整所有窗口的透明度 */
:root {
    --window-opacity: 0;
    /* 基础窗口透明度 (0.2 = 80%透明) */
    --window-active-opacity: 0;
    /* 活动窗口透明度 (0.3 = 70%透明) */
    --window-content-opacity: 0;
    /* 窗口内容透明度 (0.7 = 30%透明) */
}

/* 窗口基本样式 */
.window {
    background-color: rgba(255, 255, 255, var(--window-opacity));
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.25);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    overflow: hidden;
    transition: background-color 0.3s ease;
}

/* 活动窗口稍微不透明一些，提高可读性 */
.window.active {
    background-color: rgba(255, 255, 255, var(--window-active-opacity));
}

/* 窗口标题栏 */
.window-header {
    background: linear-gradient(135deg, #8e44ad 0%, #9b59b6 100%);
    border-bottom: none;
    height: 40px;
    padding: 0 15px;
    color: white;
}

.window-title {
    font-weight: 600;
    font-size: 1em;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

/* 窗口控制按钮 */
.window-controls span {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    margin-left: 8px;
    transition: all 0.2s ease;
    background-color: rgba(255, 255, 255, 0.2);
}

.window-controls span:hover {
    transform: scale(1.1);
}

.window-controls .minimize:hover {
    background-color: #f1c40f;
}

.window-controls .maximize:hover {
    background-color: #2ecc71;
}

.window-controls .close:hover {
    background-color: #e74c3c;
}

/* 窗口内容区域 */
.window-content {
    padding: 15px;
    color: #333;
}

/* 博客窗口特殊样式 */
#blog-window .window-header {
    background: linear-gradient(135deg, #ff758c 0%, #ff7eb3 100%);
}

#blog-window .blog-post {
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    border-left: 4px solid #ff758c;
}

#blog-window .blog-post h2 {
    color: #d81b60;
}

#blog-window .read-more {
    color: #ff758c;
    font-weight: 600;
}

/* 关于我窗口特殊样式 */
#about-window .window-header {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
}

#about-window .about-content {
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

#about-window h2 {
    color: #2980b9;
}

#about-window .avatar {
    border: 4px solid #3498db;
    box-shadow: 0 0 15px rgba(52, 152, 219, 0.5);
}

#about-window .skills h3 {
    color: #2980b9;
    border-bottom: 2px solid #3498db;
}

/* 项目窗口特殊样式 */
#projects-window .window-header {
    background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
}

#projects-window .project-card {
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s, box-shadow 0.3s;
    border: none;
}

#projects-window .project-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.12);
}

#projects-window .project-card h3 {
    color: #27ae60;
}

#projects-window .project-link {
    background-color: #2ecc71;
    color: white;
    font-weight: 600;
    transition: background-color 0.3s;
}

#projects-window .project-link:hover {
    background-color: #27ae60;
    text-decoration: none;
}

/* 联系窗口特殊样式 */
#contact-window .window-header {
    background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
}

#contact-window .contact-form {
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

#contact-window h2 {
    color: #e67e22;
}

#contact-window .form-group label {
    color: #d35400;
}

#contact-window .form-group input,
#contact-window .form-group textarea {
    border: 2px solid rgba(243, 156, 18, 0.3);
    border-radius: 6px;
    transition: border-color 0.3s;
}

#contact-window .form-group input:focus,
#contact-window .form-group textarea:focus {
    border-color: #f39c12;
    outline: none;
    box-shadow: 0 0 0 3px rgba(243, 156, 18, 0.2);
}

#contact-window .submit-btn {
    background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
    border-radius: 6px;
    padding: 10px 25px;
    font-weight: 600;
    transition: transform 0.2s, box-shadow 0.2s;
}

#contact-window .submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

#contact-window .social-link {
    color: #e67e22;
    transition: transform 0.2s, color 0.2s;
}

#contact-window .social-link:hover {
    color: #d35400;
    transform: scale(1.2);
}

/* 窗口激活状态特殊效果 */
.window.active {
    box-shadow: 0 12px 40px rgba(31, 38, 135, 0.35);
}

/* 滚动条美化 */
.window-content::-webkit-scrollbar {
    width: 8px;
}

.window-content::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.5);
    border-radius: 10px;
}

.window-content::-webkit-scrollbar-thumb {
    background: rgba(142, 68, 173, 0.5);
    border-radius: 10px;
}

.window-content::-webkit-scrollbar-thumb:hover {
    background: rgba(142, 68, 173, 0.8);
}