/* 全局样式和变量定义  */
:root {
    --bg-color: #FDF6F0; 
    --text-color: #4A4A4A;
    --heading-color: #2D2D2D;
    --primary-color: #F28B82; /* 珊瑚色 */
    --secondary-color: #A8E6CF; /* 薄荷绿 */
    --card-bg: #FFFFFF;
    --shadow-color: rgba(0, 0, 0, 0.1);
    --font-heading: 'Poppins', sans-serif;
    --font-body: 'Noto Sans SC', sans-serif;
}

html {
    scrollbar-gutter: stable;/*滚动条*/
}
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    font-family: var(--font-body);
    background-color:  #f8f2ea;
    color: var(--text-color);
    line-height: 1.7;
}
/* 首屏区域 */
.hero {
    height: 28vh;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    /* background-color: var(--primary-color);  */
    /* box-shadow: 0 2px 4px rgba(0,0,0,0.05);  */
    margin-bottom: 0.2rem; /* 增加一点和下方内容的间距 */
    position: relative;
    /* clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%); */

    /* background: linear-gradient(45deg, #f28b82, #a8e6cf, #fdf6f0, #f28b82);
    background-size: 400% 400%;
    animation: gradientFlow 15s ease infinite; */
    background-color: #f8f2ea;

    -webkit-mask-image: linear-gradient(to bottom, black 90%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 90%, transparent 100%);
}
@keyframes gradientFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* 2. 为联系方式容器添加定位和样式 */
.contact-info-header {
    position: absolute;
    bottom: 20px;
    right: 30px;
    text-align: right;
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 0.5rem;
}
.contact-info-header p {
    margin: 0;
}
.profile-pic {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--secondary-color);
    margin-bottom: 1rem;
    box-shadow: 0 4px 10px var(--shadow-color);
}
.name {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    color: var(--heading-color);
    margin-bottom: 0.25rem;
}
.slogan {
    font-size: 1.1rem;
    color: var(--text-color);
    font-weight: 400;
}
/* 主体内容布局 */
.container {
    display: grid;
    grid-template-columns: 1.5fr 3fr 1.5fr; /* 分成三列，中间部分更宽 */
    max-width: 100%;
    margin: 0 auto;
    padding: 1rem;
    gap: 4rem;
    /* padding-top: 50px; */
}
/* 2. 为新的留言板添加样式 */
.message-column {
    margin-top: 0.5rem;
}
.message-column h2 {
    /* 复用 left-column 的标题样式 */
    font-family: var(--font-heading);
    color: var(--heading-color);
    font-size: 1.8rem;
    margin-bottom: 1rem;
    position: relative;
    padding-bottom: 0.5rem;
}
.message-column h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 4px;
    background-color: var(--secondary-color); /* 可以换个颜色区分 */
    border-radius: 2px;
}

#message-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
#message-input {
    width: 100%;
    min-height: 150px;
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid #ddd;
    font-family: var(--font-body);
    font-size: 1rem;
    resize: vertical; /* 允许用户纵向调整大小 */
}
.submit-button {
    padding: 0.8rem 1.5rem;
    border: none;
    background-color: var(--primary-color);
    color: white;
    font-family: var(--font-heading);
    font-size: 1rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease; /* 让所有变化都变得平滑 */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* 添加一个默认的小阴影 */
}
.submit-button:hover {
    background-color: #d87068; /* 一个稍深的颜色 */
    transform: translateY(-3px); /* 向上移动一点 */
    box-shadow: 0 7px 14px rgba(0,0,0,0.15); /* 阴影变得更深更广 */
}

.left-column {
    max-height: 600px; /* 设定一个最大高度*/
    overflow-y: auto;  /* 当内容超出高度时，在Y轴(垂直方向)显示滚动条 */
    padding-right: 15px; /* 增加一点右内边距，防止滚动条和文字挤在一起 */
    margin-top: 0.5rem; 
}
.left-column h2 {
    font-family: var(--font-heading);
    color: var(--heading-color);
    font-size: 1.8rem;
    margin-bottom: 1rem;
    position: relative;
    padding-bottom: 0.5rem;
}
.left-column h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 4px;
    background-color: var(--primary-color);
    border-radius: 2px;
}
.left-column p {
    margin-bottom: 1rem;
}
/* 卡片网格 */
.card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    padding: 4rem 0rem;
}
.card {
    background-color: var(--card-bg);
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 4px 6px var(--shadow-color);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 200px;
    margin-top: 1.0rem;
    /*touch-action: manipulation; */
}

.card h3 {
    font-family: var(--font-heading);
    color: var(--heading-color);
    font-size: 1.2rem;
}

/* 遮罩层样式 */
#modal-overlay {
  position: fixed;
  opacity: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  pointer-events: none;
  transition: 0.3s ease-in-out;
  z-index: 100; /* 比弹窗低 */
}

#modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}


.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    background-color: white;
    padding: 2.5rem;
    border-radius: 15px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
    width: 90%;
    max-width: 1000px;
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    z-index: 101;
    max-height: 90vh; /* 使用 vh 单位更好，表示视窗高度的90% */
    overflow-y: auto;  /* 当内容超出高度时，在Y轴(垂直方向)显示滚动条 */
    padding-right: 15px; /* 增加一点右内边距，防止滚动条和文字挤在一起 */
}
.modal.active {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    pointer-events: auto;
}
.modal-content h2 {
    font-family: var(--font-heading);
    color: var(--heading-color);
    margin-bottom: 1.5rem;
}
.close-button {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 2rem;
    font-weight: bold;
    color: #aaa;
    cursor: pointer;
    transition: color 0.2s;
}
.close-button:hover {
    color: var(--primary-color);
}
/* =============================== */
/* AI 问答窗口特定样式    */
/* =============================== */
.ai-modal {
    width: 90%; /* 宽度占屏幕的 90% */
    max-width: 1000px; /* 最大宽度为 1000px */
    height: 85%; /* 高度占屏幕的 85% */
    max-height: 800px; /* 最大高度为 800px */
}

.ai-modal .modal-content {
    display: flex;
    flex-direction: column;
    /* 设定一个高度，让Dify容器可以填充 */
    height: 100%; /* 让内容填满模态框 */
    padding: 2rem; /* 调整内边距 */
}

.ai-modal h2 {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #eee;
    text-align: center;
}

#dify-chat-container {
    flex-grow: 1; /* 占据剩余的所有空间 */
    width: 100%;
    height: 100%;
    overflow: hidden; /* Dify iframe 会自己处理滚动 */
}

/* 响应式设计 (无变动) */
@media (max-width: 768px) {
    .container {
        flex-direction: column;
        padding: 1rem 2rem;
    }
    .name {
        font-size: 2rem;
    }
    .modal {
        width: 95%;
    }
}
/* --- 动画效果代码 --- */

/* 步骤 2: 当页面加载完成后 (body.page-loaded)，再触发动画 */
.page-loaded .profile-pic,
.page-loaded .name,
/* .page-loaded .slogan, */
.page-loaded .contact-info-header {
    /* 定义最终状态 */
    opacity: 0;
    visibility: visible;
    transform: translateY(0); /* 确保最终位置正确 */
    /* 依然需要 forwards 来平滑处理动画延迟期间的状态 */
    animation-fill-mode: forwards; 
}
/* 步骤 3: 具体的动画应用 (选择器同样需要修改) */
.page-loaded .profile-pic {
    animation-name: fadeInUp;
    animation-duration: 1.2s;
    animation-timing-function: ease-out;
    animation-delay: 0.1s;
}
.page-loaded .name {
    animation-name: fadeInUp;
    animation-duration: 1.2s;
    animation-timing-function: ease-out;
    animation-delay: 0.2s;
}

.page-loaded .contact-info-header {
    animation-name: fadeInUp;
    animation-duration: 1.2s;
    animation-timing-function: ease-out;
    animation-delay: 0.4s;
}
/*.page-loaded .left-column {*/
/*    animation-name: fadeInUp;*/
/*    animation-duration: 1.2s;*/
/*    animation-timing-function: ease-out;*/
/*    animation-delay: 0.5s;*/
/*}*/
/*.page-loaded .right-column {*/
/*    animation-name: fadeInUp;*/
/*    animation-duration: 1.2s;*/
/*    animation-timing-function: ease-out;*/
/*    animation-delay: 0.6s;*/
/*}*/
/*.page-loaded .message-column {*/
/*    animation-name: fadeInUp;*/
/*    animation-duration: 1.2s;*/
/*    animation-timing-function: ease-out;*/
/*    animation-delay: 0.7s;*/
/*}*/

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
        visibility: visible; /* 关键：在动画开始时，让元素变得可见 */
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* =============================== */
/* 页脚样式 (Footer Styles)         */
/* =============================== */
.site-footer {
    width: 100%;
    padding: 2rem 1rem; /* 上下内边距为2rem，左右为1rem */
    margin-top: 4rem; /* 与上方内容保持4rem的外边距 */
    text-align: center;
    color: #888; /* 使用一种柔和的灰色文字 */
    font-size: 0.9rem;
    border-top: 1px solid #eee; /* 在页脚上方添加一条细线，以示区分 */
}

.site-footer .footer-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; /* 在小屏幕上换行 */
    gap: 0.5rem 1rem; /* 行间距0.5rem，列间距1rem */
    margin-bottom: 0.5rem;
}

.site-footer a {
    color: inherit; /* 继承父元素的颜色 (#888) */
    text-decoration: none; /* 去掉下划线 */
    transition: color 0.3s ease;
}

.site-footer a:hover {
    color: var(--primary-color); /* 鼠标悬停时使用主题色 */
    text-decoration: underline;
}

.site-footer .police-beian {
    display: inline-flex; /* 使用flex布局让图标和文字对齐 */
    align-items: center;
}

.site-footer .police-beian img {
    width: 16px; /* 调整图标大小 */
    height: 16px;
    margin-right: 6px; /* 图标和文字之间的间距 */
}

.site-footer .separator {
    margin: 0 0.5rem;
}

.site-footer .copyright {
    font-size: 0.8rem;
    color: #aaa;
}

/* --- 获奖经历卡片样式 --- */
.awards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.award-card {
    background-color: #fdfaf6;
    border: 1px solid #f0e9e0;
    border-radius: 12px;
    padding: 1.5rem;
    /*touch-action: manipulation; */
}

.award-header {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    color: var(--accent-color);
}

.award-header svg {
    margin-right: 0.75rem;
}

.award-header h3 {
    margin: 0;
    font-family: var(--font-heading);
    color: var(--heading-color);
    font-size: 1.25rem;
}

.award-card ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
    font-size: 0.95rem;
}

.award-card li {
    padding-left: 1.2em;
    position: relative;
    margin-bottom: 0.6rem;
    color: #555;
}

/* 自定义列表符号 */
.award-card li::before {
    content: '🏆';
    position: absolute;
    left: 0;
    top: 0;
    font-size: 0.9em;
}

.award-card li strong {
    color: #333;
}

/* 去掉链接的默认样式，让它继承父元素的颜色和文本装饰 */
.project-link-wrapper {
  text-decoration: none;
  color: inherit;
  display: block; /* 让 a 标签像块级元素一样占据整行 */
}


/* 给提示文字一点样式，让它不那么显眼 */
.project-link-hint {
  font-size: 0.9em;
  color: #777;
  margin-top: 10px;
  margin-bottom: 15px;
}

/* --- 获奖等级突出显示样式 --- */
.award-level {
    font-weight: 700; /* 字体加粗 */
    color: var(--primary-color); /* 使用主题珊瑚色，非常醒目 */
    margin-left: 8px; /* 与前面的文字稍微拉开一点距离 */
}

/* 为不同等级设置不同颜色 */
.award-level.award-first {
    color: #E53935; /* 更鲜艳的红色，突出最高奖项 */
}

.award-level.award-second {
    color: #FB8C00; /* 温暖的橙色 */
}

.award-level.award-third {
    color: #e5d010; 
}

/* --- 自学经历时间线样式 --- */
.learning-intro {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 2.5rem auto;
    font-size: 1.1rem;
    color: #555;
    line-height: 1.8;
}

.timeline-container {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 0;
}

/* 中央时间线 */
.timeline-container::after {
    content: '';
    position: absolute;
    width: 4px;
    background-color: var(--secondary-color);
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -2px;
    border-radius: 2px;
}

.timeline-item {
    padding: 10px 40px;
    position: relative;
    width: 50%;
}

/* 时间点圆圈 */
.timeline-item::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    right: -12px;
    background-color: var(--bg-color);
    border: 4px solid var(--primary-color);
    top: 28px;
    border-radius: 50%;
    z-index: 1;
}

/* 左侧条目 */
.timeline-item.left {
    left: 0;
}

/* 右侧条目 */
.timeline-item.right {
    left: 50%;
}

/* 右侧条目的圆圈位置 */
.timeline-item.right::after {
    left: -8px;
}

/* 内容卡片 */
.timeline-content {
    padding: 1.5rem;
    background-color: #fff;
    border: 1px solid #f0e9e0;
    position: relative;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.timeline-content h2 {
    font-family: var(--font-heading);
    color: var(--heading-color);
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
}

.timeline-content h3 {
    font-size: 1.1rem;
    color: var(--primary-color);
    border-bottom: 2px solid var(--secondary-color);
    padding-bottom: 0.5rem;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}

.timeline-content ul {
    list-style-type: none;
    padding-left: 0;
}

.timeline-content li {
    padding-left: 1.5em;
    position: relative;
    margin-bottom: 0.5rem;
}

.timeline-content li::before {
    content: '✓'; /* 使用对勾作为列表符号 */
    color: var(--primary-color);
    font-weight: bold;
    position: absolute;
    left: 0;
}

.outcome {
    margin-top: 1rem;
    padding: 0.8rem;
    background-color: #fdfaf6;
    border-left: 4px solid var(--secondary-color);
    font-size: 0.95rem;
    font-style: italic;
}

.outcome strong {
    font-style: normal;
}

/* 响应式设计 */
@media screen and (max-width: 768px) {
    .timeline-container::after {
        left: 31px;
    }
    .timeline-item {
        width: 100%;
        padding-left: 70px;
        padding-right: 25px;
    }
    .timeline-item.left, .timeline-item.right {
        left: 0;
    }
    .timeline-item::after {
        left: 21px; /* 调整圆圈位置 */
    }
}

/* 项目展示 */
.project-grid {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    margin-top: 1.5rem;
}
.project-card {
    background-color: #f9f9f9;
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid #eee;
    /*touch-action: manipulation; */
}

.project-card h3 {
    font-family: var(--font-heading);
    color: var(--heading-color);
    margin-bottom: 0.5rem;
}
.project-card .overview {
    font-size: 0.95rem;
    color: #555;
    margin-bottom: 1rem;
}
.tech-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.2rem;
}
.tech-tag {
    background-color: var(--secondary-color);
    color: var(--heading-color);
    padding: 0.25rem 0.75rem;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 500;
}
.project-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: center;
}
.project-details ul {
    padding-left: 20px;
    font-size: 0.9rem;
}
.project-details li {
    margin-bottom: 0.5rem;
}
.project-diagram {
    background: #fff;
    border-radius: 8px;
    padding: 1rem;
    border: 1px solid #e0e0e0;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* 响应式调整 */
@media (max-width: 768px) {
    .project-details {
        grid-template-columns: 1fr;
    }
}

/* --- 学生工作角色履历卡片样式 --- */
.work-intro-roles {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 2.5rem auto;
    font-size: 1.1rem;
    color: #555;
    line-height: 1.8;
}

.roles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
}

.role-card {
    background-color: #fff;
    border: 1px solid #f0e9e0;
    border-radius: 12px;
    padding: 1.5rem 2rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    /*touch-action: manipulation; */
}

.role-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.role-icon {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-top: -5px;
}

.role-title-group {
    flex-grow: 1;
}

.role-title {
    font-family: var(--font-heading);
    color: var(--heading-color);
    margin: 0 0 0.25rem 0;
    font-size: 1.3rem;
}

.role-status {
    display: inline-block;
    padding: 0.2em 0.6em;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
}

.role-status.current {
    background-color: #ffebee;
    color: #c62828;
}

.role-status.former {
    background-color: #f5f5f5;
    color: #757575;
}

.role-duties {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
    font-size: 0.95rem;
    color: #555;
    line-height: 1.7;
}

.role-duties li {
    padding-left: 1.5em;
    position: relative;
    margin-bottom: 0.5rem;
}

.role-duties li::before {
    content: '▪';
    position: absolute;
    left: 0;
    color: var(--primary-color);
}

/* 现任职位的特殊样式 */
.role-card.current-role {
    background-color: #fff8f5;
    border-color: var(--primary-color);
}

/* --- 统一的自定义滚动条样式 --- */
.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: var(--primary-color);
    border-radius: 10px;
    border: 2px solid var(--bg-color); /* 你的页面背景色 */
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: #d87068;
}
/* 兼容 Firefox */
.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: var(--primary-color) rgba(0, 0, 0, 0.05);
}

/* ======================================================= */
/*          最终版 · 移动端适配 (Media Query)          */
/* ======================================================= */
@media (max-width: 768px) {

    /* --- 1. 整体布局：从三栏变为单栏垂直堆叠 --- */
    .container {
        grid-template-columns: 1fr; /* 关键！将三栏网格变为单栏 */
        padding: 0 20px;            /* 调整左右内边距 */
        gap: 40px;                  /* 调整栏目之间的垂直间距 */
    }

    /* --- 2. 顶部 Hero 区域 --- */
    .hero {
        padding: 50px 20px 30px; /* 调整内边距 */
        height: auto;            /* 高度自适应 */
    }
    .profile-pic {
        width: 120px;            /* 缩小头像 */
        height: 120px;
    }
    .name {
        font-size: 2.2rem;       /* 缩小名字字体 */
    }

    /* --- 3. 联系方式：从右上角移到名字下方 --- */
    .contact-info-header {
        position: static;        /* 关键！取消绝对定位 */
        text-align: center;      /* 文本居中 */
        margin-top: 15px;        /* 与上方标语拉开距离 */
        width: 100%;
    }

    /* --- 4. “关于我”和“留言板”区域 --- */
    .left-column, .message-column {
        padding-right: 0;        /* 移除右侧内边距 */
        max-height: none;        /* 取消最大高度限制 */
        overflow-y: visible;     /* 取消滚动条 */
    }
    
    /* 标题改为水平显示 */
    .left-column h2, .message-column h2 {
        writing-mode: horizontal-tb !important; /* 强制水平 */
        text-align: center; /* 居中显示更美观 */
    }
    .left-column h2::after, .message-column h2::after {
        left: 50%; /* 让下划线也居中 */
        transform: translateX(-50%);
    }

    /* --- 5. 卡片网格：从三列变为一列 --- */
    .card-grid {
        grid-template-columns: 1fr; /* 关键！网格变为单列 */
        gap: 20px;
        padding: 20px 0;
    }

    /* 修正卡片内文字方向 */
    .card h3 {
        writing-mode: horizontal-tb;
    }
    
    .card {
        min-height: 120px;
    }

    /* --- 6. 弹窗和时间线等其他组件的适配 --- */
    .modal {
        width: 95%;
        padding: 1.5rem;
    }
    .timeline-container::after {
        left: 31px;
    }
    .timeline-item {
        width: 100%;
        padding-left: 70px;
        padding-right: 25px;
    }
    .timeline-item.left, .timeline-item.right {
        left: 0;
    }
    .timeline-item::after {
        left: 21px;
    }
    .project-details {
        grid-template-columns: 1fr;
    }
    /* --- 7. 适配所有弹窗 (Modal) 内容 --- */
    .modal {
        width: 92%; /* 弹窗宽度占屏幕的92% */
        padding: 1.5rem 1rem; /* 调整内边距，左右边距小一点 */
        max-height: 85vh; /* 最大高度不超过屏幕的85% */
    }
    .modal-content {
        line-height: 1.8; /* 增加行高，让文字不拥挤 */
    }
    .modal-content h2 {
        font-size: 1.5rem; /* 缩小标题字体 */
        margin-bottom: 1rem;
    }
    /* 缩小关闭按钮的点击区域，防止误触 */
    .close-button {
        top: 8px;
        right: 12px;
        font-size: 1.8rem;
    }
    /* --- 特别适配 AI 聊天弹窗 --- */
    .ai-modal .modal-content {
        padding: 1rem 0.5rem; /* 进一步减小内边距，给聊天框留出空间 */
        height: 100%;
        box-sizing: border-box;
    }
    
    .ai-modal h2 {
        padding-bottom: 0.8rem;
        margin-bottom: 0.8rem;
    }
    /* 确保Dify聊天容器能正确缩放 */
    #dify-chat-container {
        width: 100%;
        height: 100%;
        min-height: 400px; /* 给一个最小高度，防止被压缩 */
    }
}

/* ======================================================= */
/*          仅在非触摸屏/宽屏设备上应用悬停效果          */
/* ======================================================= */
@media (hover: hover) and (min-width: 769px) {
    /* 
     *  这个新类 (.interactive-card) 将专门用于
     *  那些我们希望在电脑上有“磁吸”和“抬起”效果的元素。
     */
    .interactive-card {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        cursor: pointer; 
    }
    .interactive-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px var(--shadow-color);
    }
    /* 
     *  对于弹窗内的项目卡片，我们只改变阴影和鼠标指针，
     *  不让它们“抬起”，因为它们已经是可点击的链接了。
     */
    .project-card,
    .role-card {
        transition: box-shadow 0.3s ease;
        cursor: pointer;
    }
    .project-card:hover,
    .role-card:hover {
        box-shadow: 0 10px 20px var(--shadow-color);
    }
}