/* Warm and beautiful styling for the webmail application */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;700&family=Merriweather:ital,wght@0,300;0,400;0,700;1,300&display=swap');

:root {
    /* 主要颜色 - 奶黄色系 */
    --primary-bg: #f7f2e4;         /* 页面背景 */
    --content-bg: #fffdf8;         /* 容器背景 */
    --header-bg: #e0d2b4;          /* 头部背景 */
    
    /* 强调色 */
    --accent-1: #d2946a;           /* 暖橙色，用于强调和重要元素 */
    --accent-2: #88a979;           /* 柔和的绿色，用于成功状态和辅助元素 */
    
    /* 文本颜色 */
    --text-primary: #5d5348;       /* 主要文本颜色 */
    --text-secondary: #8d7d6a;     /* 次要文本颜色 */
    --text-on-accent: #4a3B31;     /* 在强调色上的文本 */
    
    /* 交互颜色 */
    --button-bg: #c9b693;          /* 按钮背景色 */
    --button-hover: #b9a683;       /* 按钮悬停色 */
    --button-text: #6a5d4d;        /* 按钮文本色 */
    
    /* 边框和阴影 */
    --border-light: #e0d8c7;       /* 轻边框 */
    --shadow-color: rgba(196, 176, 133, 0.18); /* 阴影颜色 */
    
    /* 移动端特定变量 */
    --mobile-spacing: 10px;        /* 移动端基础间距 */
    --mobile-padding: 8px;         /* 移动端基础内边距 */
    --mobile-font-size: 0.9em;     /* 移动端基础字体大小 */
}

body {
    font-family: 'Noto Sans SC', sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--primary-bg);
    color: var(--text-primary);
    line-height: 1.6;
}

.container {
    width: 85%;
    max-width: 1000px;
    margin: 30px auto;
    overflow: hidden;
    padding: 25px;
    background-color: var(--content-bg);
    border-radius: 12px; /* 增大圆角 */
    box-shadow: 0 8px 20px var(--shadow-color); /* 增强阴影效果 */
}

header {
    background: var(--header-bg);
    color: var(--button-text);
    padding: 1.2rem 0 0; /* 移除底部padding，与导航栏合并 */
    text-align: center;
    margin-bottom: 20px; /* 保留底部间距 */
    box-shadow: 0 2px 10px rgba(0,0,0,0.05); /* 添加微妙阴影增强层次感 */
    border-radius: 8px 8px 0 0; /* 顶部圆角 */
}

header h1 {
    margin: 0;
    font-size: 28px;
    font-family: 'Merriweather', serif;
    font-weight: 700;
    padding-bottom: 0.8rem; /* 为标题增加底部间距 */
}

nav ul {
    padding: 8px 0;
    list-style: none;
    text-align: center;
    background: var(--header-bg);
    margin: 0;
    border-radius: 0 0 8px 8px; /* 底部圆角与header顶部圆角对应 */
    border-top: 1px solid rgba(0,0,0,0.06); /* 添加微妙的分隔线 */
}

nav ul li {
    display: inline;
}

nav ul li a {
    color: var(--button-text);
    padding: 10px 20px;
    display: inline-block;
    text-decoration: none;
    font-weight: 400;
    transition: all 0.3s ease;
    border-radius: 6px; /* 增大圆角 */
    margin: 0 2px; /* 增加菜单项间隔 */
}

nav ul li a:hover, nav ul li a.active {
    background: var(--button-hover); /* 使用定义的悬停颜色 */
    color: var(--text-on-accent); /* 更深的文字颜色 */
    box-shadow: 0 1px 3px rgba(0,0,0,0.1); /* 添加微妙阴影 */
}

.flash-messages {
    list-style: none;
    padding: 0;
    margin: 15px 0;
}

.flash-messages li {
    padding: 14px 18px;
    margin-bottom: 15px;
    border-radius: 8px;
    font-size: 0.95em;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.flash-messages .success {
    background: #e8f5e9; /* 淡绿色 */
    color: #2e7d32;
    border-left: 4px solid #66bb6a;
}

.flash-messages .danger {
    background: #ffebee; /* 淡红色 */
    color: #c62828;
    border-left: 4px solid #ef5350;
}

.flash-messages .info {
    background: #e3f2fd; /* 淡蓝色 */
    color: #1565c0;
    border-left: 4px solid #42a5f5;
}

form div {
    margin-bottom: 18px;
}

form label {
    display: block;
    margin-bottom: 6px;
    font-weight: 400;
    color: var(--text-secondary); /* 使用次要文本颜色 */
}

form input[type="text"],
form input[type="password"],
form input[type="email"],
form textarea {
    width: 100%;
    padding: 12px; /* 增加内边距 */
    box-sizing: border-box;
    border: 1px solid var(--border-light);
    border-radius: 6px; /* 增大圆角 */
    background-color: #fff;
    color: var(--text-primary);
    font-family: 'Noto Sans SC', sans-serif;
    transition: all 0.3s ease;
}

form input[type="text"]:focus,
form input[type="password"]:focus,
form input[type="email"]:focus,
form textarea:focus {
    border-color: var(--button-bg); /* 使用按钮背景色作为聚焦边框 */
    outline: none;
    box-shadow: 0 0 8px rgba(201, 182, 147, 0.3); /* 增强聚焦效果 */
}

form textarea {
    min-height: 180px;
    resize: vertical;
}

form button {
    background: var(--button-bg);
    color: var(--button-text);
    border: none;
    padding: 12px 24px; /* 增加内边距 */
    cursor: pointer;
    border-radius: 6px; /* 增大圆角 */
    font-size: 1em;
    font-weight: 400;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08); /* 添加微妙阴影 */
}

form button:hover {
    background: var(--button-hover);
    box-shadow: 0 3px 6px rgba(0,0,0,0.1); /* 悬停时增强阴影 */
    transform: translateY(-1px); /* 添加微小上移效果 */
}

/* Mail Listing - Initial simple list, will be cards later */
.mail-list {
    list-style: none;
    padding: 0;
}

.mail-list li {
    padding: 14px 18px; /* 增加内边距 */
    border-bottom: 1px solid var(--border-light);
    transition: all 0.2s ease;
    border-radius: 6px; /* 添加圆角 */
    margin-bottom: 4px; /* 增加列表项间距 */
}
.mail-list li:hover {
    background-color: rgba(241, 232, 210, 0.5); /* 更微妙的背景过渡 */
    box-shadow: 0 2px 6px rgba(0,0,0,0.05); /* 悬停时添加阴影 */
    transform: translateY(-1px); /* 微小上移效果 */
}

.mail-list li:last-child {
    border-bottom: none;
}

.mail-list li a {
    text-decoration: none;
    color: var(--text-primary);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mail-list .mail-info {
    flex-grow: 1;
}

.mail-list .subject {
    font-weight: bold;
    font-size: 1.05em;
    margin-bottom: 5px;
    color: var(--text-on-accent); /* 使用深色增强对比度 */
}

.mail-list .sender, .mail-list .recipient {
    font-size: 0.9em;
    color: var(--text-secondary);
}

.mail-list .timestamp {
    font-size: 0.85em;
    color: var(--text-secondary);
    min-width: 120px;
    text-align: right;
}
.mail-list .unread-indicator {
    color: var(--accent-1); /* 使用温暖的橙色作为未读标记 */
    font-weight: bold;
    margin-left: 10px;
}


footer {
    text-align: center;
    margin-top: 30px;
    padding: 20px;
    font-size: 0.9em;
    color: #856748; /* Lighter brown for footer */
}

/* 联系人卡片样式优化 */
.user-card-list {
    display: grid; /* 使用网格布局 */
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* 响应式网格列 */
    gap: 25px; /* 调整间距 */
    padding: 20px 0 40px; /* 为列表容器添加内部填充 */
}

.user-card-link { /* 使整个卡片成为一个链接 */
    text-decoration: none;
    color: inherit;
    display: block; /* 重要的是让卡片占据链接的全部空间 */
    margin-bottom: 30px; /* 增加底部边距，远离页面边缘 */
    margin-top: 15px; /* 顶部边距 */
}

.user-card {
    background-color: #f9f3e4; /* 温柔的奶黄色背景 */
    border: 1px solid #e0d4b7; /* 柔和的边框 */
    border-radius: 8px;    /* 圆角 */
    padding: 20px;         /* 充足的内部空间 */
    box-shadow: 0 3px 8px rgba(201, 182, 147, 0.18); /* 柔和的阴影 */
    cursor: pointer;
    transition: all 0.3s ease; /* 平滑过渡效果 */
    display: flex;
    flex-direction: column;
    height: auto;          /* 自适应内容 */
    min-height: 180px;     /* 最小高度确保视觉一致性 */
    max-height: 280px;     /* 限制最大高度 */
    justify-content: flex-start; /* 将项目对齐到卡片的开始 */
}

/* 卡片悬停效果 */
.user-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(150, 120, 80, 0.25); /* 更温暖的阴影效果 */
    background-color: #f9f3e9; /* 悬停时的背景色更亮一些 */
}

/* 头像/图片容器 */
.avatar-placeholder {
    width: 90px;          /* 更大的头像 */
    height: 90px;         /* 更大的头像 */
    border-radius: 50%;   /* 圆形 */
    background-color: #a0734d; /* 更深的木棕色 */
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3em;       /* 调整为更大的头像 */
    font-weight: bold;
    margin-bottom: 12px;  /* 调整边距 */
    font-family: 'Merriweather', serif;
    flex-shrink: 0; /* 防止收缩 */
    align-self: center; /* 头像居中 */
}

/* 卡片内容区域 */
.user-card-info {
    flex-grow: 1; /* 允许此部分占用可用空间 */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* 如果卡片有额外的高度，将详细信息推下去 */
    width: 100%; /* 确保它占用文本对齐的全宽 */
    text-align: center; /* 默认情况下使文本元素如h3和p居中 */
}

/* 姓名样式 */
.user-card h3 {
    margin-top: 0;
    margin-bottom: 10px; /* 调整边距 */
    color: #7d4627; /* 更深的赭石红棕色 */
    font-size: 1.1rem;   /* 调整字体大小 */
    font-weight: 600;    /* 调整字体粗细 */
}

/* 详细信息样式 */
.user-card p {
    font-size: 0.95rem;  /* 调整字体大小 */
    color: #6d503c; /* 更深沉的暗棕色 */
    margin-bottom: 5px;
    line-height: 1.6;    /* 调整行高 */
}

/* 未读计数样式 */
.user-card p.unread-count {
    font-weight: bold; /* 为未读计数保留粗体 */
    color: #b33c20; /* 更深的砖红色 */
    font-size: 0.9em; /* 保持稍小或与 0.95rem 匹配 */
    margin-top: 8px; /* 未读计数上方的间距 */
}

.contact-status-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
}

.status-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 999px;
    background-color: #efe2c9;
    color: #7a5639;
    font-size: 0.88rem;
    font-weight: 600;
}

.status-chip.unread-chip {
    background-color: #f5d7cf;
    color: #a63b22;
}

/* 信件往来标题样式 */
.conversation-title {
    text-align: center;
    margin-bottom: 25px;
    color: var(--text-on-accent);
    font-family: 'Merriweather', serif;
    font-weight: 700;
    font-size: 1.8em;
}

/* 响应式时间线样式 - 针对移动设备 */
@media (max-width: 768px) {
    /* 保持时间线居中，但减小宽度 */
    .timeline:before {
        left: 50%;
        margin-left: -1.5px;
        width: 3px; /* 稍细一些 */
    }
    
    /* 保持圆点位置在中线上 */
    .timeline-item.received-by-me::after,
    .timeline-item.sent-by-me::after {
        left: calc(50% - 8px); /* 调整圆点位置 */
        width: 10px; /* 更小的圆点 */
        height: 10px;
    }
      /* 调整内容框尺寸 */
    .timeline-content {
        width: calc(44% - 10px); /* 略宽一些的内容框，便于居中显示 */
        padding: 10px 12px; /* 更小的内边距 */
        margin: 0 auto; /* 确保居中 */
    }
    
    /* 保持左右分列，更靠近时间轴 */
    .timeline-item.received-by-me .timeline-content {
        margin-right: auto;
        margin-left: 4%; /* 减小距离，使卡片更靠近时间轴 */
    }
    
    .timeline-item.sent-by-me .timeline-content {
        margin-left: calc(50% + 4%); /* 减小距离，使卡片更靠近时间轴 */
        margin-right: auto;
    }
    
    /* 保留箭头，但调整大小 */
    .timeline-item.received-by-me .timeline-content::before,
    .timeline-item.sent-by-me .timeline-content::before {
        display: block;
        border-width: 8px; /* 更小的箭头 */
    }
    
    .timeline-item.received-by-me .timeline-content::before {
        right: -8px;
        top: 15px;
        border-width: 8px 0 8px 8px;
    }
    
    .timeline-item.sent-by-me .timeline-content::before {
        left: -8px;
        top: 15px;
        border-width: 8px 8px 8px 0;
    }
    
    /* 缩减字体大小 */
    .timeline-content h4 {
        font-size: 0.95em;
        margin-bottom: 6px;
    }
    
    .timeline-content .meta {
        font-size: 0.75em;
        margin-bottom: 6px;
        padding-bottom: 5px;
    }
    
    .timeline-content .body {
        font-size: 0.85em;
        -webkit-line-clamp: 2; /* 减少显示行数 */
        line-clamp: 2;
        max-height: 3.2em;
    }
    
    /* 优化附件显示 */
    .attachments-in-timeline {
        margin-top: 6px;
        padding-top: 5px;
        padding-top: 6px;
        border-top-width: 1px;
    }
    
    .attachment-list-inline li {
        padding: 3px 6px;
        margin-bottom: 3px;
    }
    
    /* 减少相邻元素间距 */
    .timeline-item {
        margin-bottom: 25px; /* 减少时间线项目间距 */
    }
    
    /* 使图标和图片预览更小 */
    .timeline-attachment-preview {
        max-width: 18px;
        max-height: 18px;
    }
    
    /* 强制截断过长文件名 */    .attachment-list-inline li a {
        max-width: 180px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    /* 邮件详情链接也要更紧凑 */
    .view-full-mail-link {
        margin-top: 5px;
        font-size: 0.85em;
    }
    
    /* 确保整体时间轴元素居中 */
    .timeline {
        padding: 0 5px;
        box-sizing: border-box;
    }
    /* 使图标和图片预览更小 */
    .timeline-attachment-preview {
        max-width: 20px;
        max-height: 20px;
    }
    
    /* 强制截断过长文件名 */
    .attachment-list-inline li a {
        max-width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    /* 邮件详情链接也要更紧凑 */
    .view-full-mail-link {
        margin-top: 5px;
        font-size: 0.85em;
    }
}

/* 为更小的移动设备添加额外优化 */
@media (max-width: 480px) {
    /* 在非常小的屏幕上调整时间轴内容 */
    .timeline-content {
        width: calc(45% - 5px); /* 稍微宽一些的内容框 */
    }
    
    .timeline-item.received-by-me .timeline-content {
        margin-left: 3%; /* 进一步靠近时间轴 */
    }
    
    .timeline-item.sent-by-me .timeline-content {
        margin-left: calc(50% + 2%); /* 进一步靠近时间轴 */
    }
    
    /* 确保内容整体居中显示 */
    .timeline {
        padding: 0 10px;
        box-sizing: border-box;
    }
}

/* 为手机预览框内容优化 */
@media (max-width: 768px) {
    .timeline-content .meta br {
        display: none; /* 移除换行，使元数据更紧凑 */
    }
    
    .timeline-content .meta {
        font-size: 0.75em; /* 进一步缩小元数据字体 */
        padding-bottom: 4px;
        margin-bottom: 5px;
        line-height: 1.3;
    }
    
    /* 在左右分列模式下附件改为水平排列更合适 */
    .attachment-list-inline {
        flex-direction: row; /* 水平排列 */
        flex-wrap: wrap; /* 允许换行 */
        gap: 3px;
    }
    
    .attachment-list-inline li {
        width: auto; /* 自动宽度 */
        padding: 3px 6px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-bottom: 2px;
    }
    
    /* 更紧凑的邮件内容预览 */
    .letter-paper-inline {
        padding: 6px 8px;
        margin-top: 5px;
    }

    /* 为附件标题添加更紧凑的样式 */
    .attachments-in-timeline strong {
        font-size: 0.75em;
        margin-bottom: 3px;
        display: block;
    }
    
    /* 查看详情链接位置调整 */
    .view-full-mail-link {
        margin-top: 3px;
        font-size: 0.75em;
        padding: 2px 0;
        float: right;
    }
    
    /* 缩小附件图标和节省空间 */
    .attachment-icon {
        font-size: 0.95em;
        margin-right: 3px;
    }
    
    /* 压缩附件大小显示 */
    .filesize {
        font-size: 0.7em;
        margin-left: 2px;
    }
    
    /* 优化多附件提示显示 */
    .more-attachments-note {
        font-size: 0.7em;
        padding: 1px 3px;
        margin-left: 2px;
    }
}

/* 内容溢出处理 */
.user-card p {    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* 限制最多显示3行 */
    line-clamp: 3; /* 标准属性 */
    -webkit-box-orient: vertical;
    max-height: 4.8em; /* 近似 3 行的高度 */
}


/* Vertical Timeline */
/* 优化时间轴样式，确保在移动设备上居中显示 */
.timeline {
    position: relative;
    margin: 40px auto; /* 添加auto以确保水平居中 */
    padding: 0;
    list-style: none;
    max-width: 800px; /* 限制最大宽度，保持居中显示 */
}

.timeline:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 4px; /* 更粗一些 */
    background: var(--header-bg); /* 使用头部背景色 */
    left: 50%; /* 居中时间线 */
    margin-left: -2px;
    border-radius: 2px; /* 圆角时间线 */
}

.timeline-item {
    margin-bottom: 35px; /* 增加项目间距 */
    position: relative;
    width: 100%; /* 每个项目占据全宽 */
    box-sizing: border-box;
}

/* 所有项目的公共圆点，位于中心线上 */
.timeline-item::after {
    content: '';
    background: white;
    border: 4px solid var(--button-bg); /* 使用按钮背景色 */
    border-radius: 50%;
    display: block;
    position: absolute;
    width: 12px;
    height: 12px;
    z-index: 10;
    top: 20px;
    box-shadow: 0 0 0 4px rgba(201, 182, 147, 0.2); /* 添加光晕效果 */
    transition: all 0.3s ease;
}

/* 内容框样式 */
.timeline-content {
    background: #fffef5; /* 更柔和的背景色 */
    padding: 18px 22px; /* 增加内边距 */
    border-radius: 8px; /* 增大圆角 */
    border: 1px solid var(--border-light);
    box-shadow: 0 3px 8px rgba(0,0,0,0.08);
    position: relative;
    width: calc(50% - 50px); /* 内容框宽度小于一半，以便偏移 */
    box-sizing: border-box;
    transition: all 0.3s ease;
}
.timeline-content:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* 悬停时增强阴影 */
    transform: translateY(-2px); /* 微妙上移效果 */
}

/* 可点击的时间线内容 */
.timeline-content.clickable {
    cursor: pointer;
    position: relative;
}

.timeline-content.clickable:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.15); /* 增强悬停阴影 */
    transform: translateY(-3px); /* 增强上移效果 */
}

.timeline-content.clickable:active {
    transform: translateY(-1px); /* 点击时的反馈效果 */
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

/* 未送达邮件样式 - 不可点击 */
.timeline-content:not(.clickable) {
    cursor: default;
    opacity: 0.85;
    background-color: #f9f7f4; /* 浅灰色背景 */
    box-shadow: none;
}

/* 未送达邮件提示文字 */
.not-clickable-notice {
    margin-top: 10px;
    color: #aa6644;
    font-size: 0.9em;
    border-top: 1px dashed #ddd;
    padding-top: 8px;
}

/* 左侧(收到的)邮件样式 */
.timeline-item.received-by-me .timeline-content {
    margin-left: 0; /* 左对齐 */
    margin-right: auto; /* 推向左侧 */
    background-color: #fff8e1; /* 淡黄色背景 */
    border-color: #ffecb3;
}
.timeline-item.received-by-me::after {
    left: calc(50% - 10px); /* 点位于中心线上 */
}
.timeline-item.received-by-me .timeline-content::before {
    content: "";
    position: absolute;
    right: -10px;
    top: 20px;
    border-width: 10px 0 10px 10px;
    border-style: solid;
    border-color: transparent transparent transparent #fff8e1;
    filter: drop-shadow(2px 0px 1px rgba(0,0,0,0.05)); /* 为箭头添加微妙阴影 */
}

/* 右侧(发送的)邮件样式 */
.timeline-item.sent-by-me .timeline-content {
    margin-left: calc(50% + 50px); /* 推向中心线右侧 */
    margin-right: 0;
    background-color: #f0f5e9; /* 淡绿色背景区分发送邮件 */
    border-color: #ddeccd;
}
.timeline-item.sent-by-me::after {
    left: calc(50% - 10px); /* 点位于中心线上 */
}
.timeline-item.sent-by-me .timeline-content::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 20px;
    border-width: 10px 10px 10px 0;
    border-style: solid;
    border-color: transparent #f0f5e9 transparent transparent;
    filter: drop-shadow(-2px 0px 1px rgba(0,0,0,0.05)); /* 为箭头添加微妙阴影 */
}

/* 未送达邮件样式(使用更鲜明的绿色) */
.timeline-item.sent-by-me .timeline-content .pending-preview-timeline {
    background-color: #e7f0d9 !important; /* 更柔和的绿色背景 */
    border-color: #d4e7c0 !important;
    color: var(--text-on-accent) !important; /* 确保文字颜色清晰可读 */
}
/* 如果接收方看到预定发送的邮件也使用相同的绿色样式 */
.timeline-item.received-by-me .timeline-content .pending-preview-timeline {
    background-color: #e7f0d9 !important;
    border-color: #d4e7c0 !important;
    color: var(--text-on-accent) !important;
}


/* Clearfix for the main timeline container is not strictly needed if items are full width and not floated */
/* .timeline::after { ... } can be removed if not using floats for items */


.timeline-content h4 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.15em;
    color: var(--text-on-accent); /* 更深的标题颜色增强对比度 */
    font-weight: 700;
}
.timeline-content .meta {
    font-size: 0.85em;
    color: var(--text-secondary); /* 使用次要文本颜色 */
    margin-bottom: 12px;
    border-bottom: 1px dotted rgba(224, 216, 199, 0.5);
    padding-bottom: 8px;
}
.timeline-content .body {
    font-size: 0.95em;
    line-height: 1.7;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* 显示最多3行 */
    line-clamp: 3; /* 标准属性 */
    -webkit-box-orient: vertical;
    max-height: 4.845em; /* 约等于3行文字高度 */
}
.letter-paper-inline { /* For mail body inside timeline card */
    position: relative;
    background-color: #fffef7;
    padding: 15px 20px;
    border-radius: 6px;
    margin-top: 10px;
    font-family: "SimSun", "宋体", serif;
    color: #333;
    border: 1px solid #e8e3d3;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    line-height: 1.8;
}

/* Button-like links */
.button-like {
    display: inline-block;
    padding: 10px 18px; /* 增加内边距 */
    background-color: var(--button-bg);
    color: var(--button-text) !important;
    text-decoration: none;
    border-radius: 6px; /* 增大圆角 */
    font-size: 0.95em;
    transition: all 0.3s ease;
    border: 1px solid transparent;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* 添加阴影 */
    font-weight: 500; /* 稍微加粗 */
}
.button-like:hover {
    background-color: var(--button-hover);
    color: var(--text-on-accent) !important;
    border-color: rgba(168, 150, 122, 0.3);
    transform: translateY(-1px); /* 微小上移效果 */
    box-shadow: 0 3px 8px rgba(0,0,0,0.08); /* 加强阴影 */
}

/* Attachment Styling */
.attachment-list {
    list-style: none;
    padding-left: 0;
    margin-top: 10px;
}
.attachment-list li {
    margin-bottom: 8px;
    padding: 8px 12px;
    background-color: #fdf9f2; /* Very light cream */
    border: 1px solid #f0e8da;
    border-radius: 4px;
    font-size: 0.9em;
}
.attachment-list li a {
    text-decoration: none;
    color: #a0522d; /* Sienna */
    font-weight: 500; /* Slightly less bold than 'bold' */
}
.attachment-list li a:hover {
    text-decoration: underline;
}
.attachment-list li small {
    color: #856748; /* Lighter brown */
    margin-left: 5px;
}

.remove-file {
    margin-left: 10px;
    padding: 6px 12px;
    font-size: 0.85rem;
    border-radius: 999px;
    box-shadow: none;
}

.remove-file:hover {
    transform: none;
}

.attachment-preview {
    margin-top: 8px;
    max-width: 100%;
    overflow: hidden;
}
.attachment-preview img {
    max-width: 250px; /* Limit preview size */
    max-height: 180px;
    border-radius: 3px;
    border: 1px solid #e0d8c7;
    display: block; /* To avoid extra space below image */
}

/* Attachments in Timeline */
.attachments-in-timeline {
    margin-top: 15px;
    padding-top: 12px;
    border-top: 1px dashed var(--border-light);
}
.attachments-in-timeline strong {
    display: block; /* "附件:" 独占一行 */
    margin-bottom: 8px;
    color: var(--text-secondary);
    font-size: 0.9em;
}
.attachment-list-inline {
    list-style: none;
    padding-left: 0;
    font-size: 0.85em;
    display: flex; /* 水平排列附件 */
    flex-wrap: wrap; /* 允许换行 */
    gap: 6px; /* 附件间距 */
}
.attachment-list-inline li {
    margin-bottom: 4px;
    display: inline-block;
    padding: 5px 10px;
    background-color: rgba(253, 249, 242, 0.8);
    border-radius: 4px;
    border: 1px solid rgba(240, 232, 218, 0.8);
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.attachment-list-inline li:hover {
    background-color: rgba(250, 243, 227, 0.9);
    border-color: rgba(230, 215, 190, 0.9);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transform: translateY(-1px);
}
.attachment-list-inline li a {
    text-decoration: none;
    color: var(--accent-1); /* 使用强调色 */
    display: inline-flex; /* 对齐图标和文本 */
    align-items: center;
}
.attachment-list-inline li a:hover {
    text-decoration: underline;
}
.timeline-attachment-preview { /* 图片预览 */
    max-width: 28px;
    max-height: 28px;
    vertical-align: middle;
    margin-right: 8px; /* 图像和文本间的间距 */
    border-radius: 3px;
    border: 1px solid var(--border-light);
    object-fit: cover; /* 确保图像比例一致 */
}
.attachment-icon { /* 文件类型图标 */
    font-size: 1.2em; /* 略大的图标 */
    margin-right: 6px;
    display: inline-block;
    vertical-align: middle;
    color: var(--accent-1); /* 使用强调色 */
}
.more-attachments-note {
    font-style: italic;
    color: var(--text-secondary);
    margin-left: 8px;
    font-size: 0.85em;
    background-color: rgba(240, 232, 220, 0.5);
    padding: 3px 6px;
    border-radius: 3px;
    display: inline-block;
    margin-top: 5px;
}

.view-full-mail-link {
    color: var(--accent-1);
    text-decoration: none;
    font-size: 0.9em;
    margin-top: 10px;
    display: inline-block;
    padding: 3px 0;
    font-weight: 500;
    transition: all 0.2s ease;
}
.view-full-mail-link:hover {
    text-decoration: underline;
    color: var(--accent-1);
}

/* Input file styling */
form input[type="file"] {
    padding: 10px;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    background-color: #fff;
    font-family: 'Noto Sans SC', sans-serif;
    color: var(--text-secondary);
    width: auto;
    max-width: 100%;
    transition: all 0.3s ease;
}
form input[type="file"]:hover {
    border-color: var(--button-bg);
}
form input[type="file"]::file-selector-button {
    background: var(--button-bg); /* 使用变量 */
    color: var(--button-text);
    border: none;
    padding: 8px 14px;
    border-radius: 4px;
    cursor: pointer;
    margin-right: 12px;
    transition: all 0.3s ease;
    font-weight: 500;
}
form input[type="file"]::file-selector-button:hover {
    background: var(--button-hover);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

form select.form-control-select {
    width: 100%;
    padding: 12px;
    box-sizing: border-box;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    background-color: #fff;
    color: var(--text-primary);
    font-family: 'Noto Sans SC', sans-serif;
    transition: all 0.3s ease;
    height: auto; /* 覆盖可能的全局select高度 */
    appearance: none; /* 为自定义箭头做准备 */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 1em;
}
form select.form-control-select:focus {
    border-color: var(--button-bg);
    outline: none;
    box-shadow: 0 0 8px rgba(201, 182, 147, 0.3);
}

/* Styling for pending email previews */
.pending-preview-timeline {
    padding: 12px 18px;
    background-color: rgba(231, 240, 217, 0.7); /* 使用半透明浅绿色 */
    border: 1px dashed #d4e7c0;
    border-radius: 6px;
    font-style: italic;
    color: var(--text-on-accent);
    font-size: 0.95em;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
.pending-preview-timeline p {
    margin: 6px 0;
}

.pending-preview-full {
    padding: 25px;
    background-color: var(--content-bg);
    border: 1px dashed var(--border-light);
    border-radius: 8px;
    margin-top: 20px;
    margin-bottom: 20px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.05);
}

/* 管理员面板样式 */
.admin-panel {
    margin: 25px 0;
}

.admin-section {
    background-color: var(--content-bg);
    border-radius: 10px;
    box-shadow: 0 3px 12px var(--shadow-color);
    padding: 25px;
    margin-bottom: 30px;
}

.admin-section h3 {
    color: var(--accent-1);
    border-bottom: 2px solid var(--button-bg);
    padding-bottom: 12px;
    margin-top: 0;
    font-size: 1.4em;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    margin: 18px 0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.03);
    border-radius: 6px;
    overflow: hidden;
}

.admin-table th, .admin-table td {
    padding: 14px 18px;
    text-align: left;
    border-bottom: 1px solid rgba(224, 216, 199, 0.5);
}

.admin-table th {
    background-color: var(--header-bg);
    color: var(--text-on-accent);
    font-weight: 600;
}

.admin-table tr:last-child td {
    border-bottom: none;
}

.admin-table tr:hover td {
    background-color: rgba(249, 245, 235, 0.7);
}

.btn-small {
    padding: 5px 10px;
    font-size: 0.85em;
    border-radius: 4px;
    margin: 0 2px;
    display: inline-block;
    text-decoration: none;
    background-color: var(--button-bg);
    color: var(--button-text);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-small:hover {
    background-color: var(--button-hover);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transform: translateY(-1px);
}

.stats-list {
    list-style: none;
    padding: 0;
}

.stats-list li {
    padding: 10px 0;
    border-bottom: 1px dashed var(--border-light);
    color: var(--text-primary);
}

/* 个人资料页面样式 */
.profile-section {
    margin-top: 30px;
    background-color: var(--content-bg);
    border-radius: 8px;
    box-shadow: 0 3px 12px var(--shadow-color);
    padding: 25px;
}

.profile-section h3 {
    color: var(--accent-1);
    border-bottom: 2px solid var(--button-bg);
    padding-bottom: 12px;
    margin-top: 0;
    font-size: 1.3em;
}

.checkbox-group {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.checkbox-group input[type="checkbox"] {
    margin-right: 10px;
}

/* 管理员用户管理相关样式 */
.admin-links {
    margin-bottom: 20px;
    padding: 10px 0;
    border-bottom: 1px solid #e0d0b0;
}

.admin-links a {
    text-decoration: none;
    color: #8b5a2b;
    padding: 5px 10px;
    border-radius: 4px;
    transition: background-color 0.3s;
}

.admin-links a:hover {
    background-color: #f0e5d0;
    color: #654321;
}

.user-details {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.details-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.detail-row {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #f0e8d8;
}

.detail-label {
    font-weight: bold;
    color: #8b5a2b;
}

.user-statistics {
    margin-bottom: 20px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-top: 15px;
}

.stat-item {
    background-color: #fff;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.stat-value {
    font-size: 1.8rem;
    font-weight: bold;
    color: #8b5a2b;
}

.stat-label {
    font-size: 0.9rem;
    color: #777;
    margin-top: 5px;
}

.email-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.email-table th {
    background-color: #e0d0b0;
    color: #584022;
    padding: 12px;
    text-align: left;
}

.email-table td {
    padding: 10px 12px;
    border-top: 1px solid #f0e8d8;
}

.email-table tr:hover {
    background-color: #fcf8e3;
}

.empty-table {
    text-align: center;
    color: #888;
    padding: 20px !important;
}

.edit-user-form {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #584022;
}

.form-group input[type="text"],
.form-group input[type="email"],
form-group input[type="password"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #d2b48c;
    border-radius: 4px;
    font-size: 1rem;
}

.form-group small {
    display: block;
    color: #777;
    margin-top: 5px;
    font-size: 0.85rem;
}

.checkbox-group {
    display: flex;
    align-items: center;
}

.checkbox-group input[type="checkbox"] {
    margin-right: 10px;
}

.warning-text {
    color: #c94f4f;
    margin-left: 10px;
    font-size: 0.85rem;
}

.setting-group {
    margin-bottom: 12px;
}

.setting-toggle {
    display: inline-flex !important;
    align-items: center;
    gap: 12px;
    margin-bottom: 0 !important;
    cursor: pointer;
    flex-wrap: nowrap;
}

.setting-toggle input[type="checkbox"] {
    margin: 0;
    flex: 0 0 auto;
}

.setting-text {
    color: #584022;
    font-weight: 500;
    line-height: 1.4;
    white-space: normal;
}

.setting-group .warning-text {
    margin-left: 8px;
    line-height: 1.5;
}

.form-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.btn-primary {
    background-color: #8b5a2b;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.3s;
}

.btn-primary:hover {
    background-color: #704621;
}

.btn-secondary {
    background-color: #d2b48c;
    color: #584022;
    border: none;
    padding: 10px 15px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    text-decoration: none;
    transition: background-color 0.3s;
    text-align: center;
}

.btn-secondary:hover {
    background-color: #c0a070;
}

.user-info-summary {
    background-color: #f8f0e0;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    border-left: 4px solid #d2b48c;
}

.email-container {
    margin-top: 30px;
}

.full-width {
    width: 100%;
}

.email-content-cell {
    position: relative;
    max-width: 300px;
}

.email-content-preview,
.email-content-full {
    word-break: break-word;
}

.toggle-content-btn {
    background-color: #f0e5d0;
    border: none;
    color: #8b5a2b;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    cursor: pointer;
    margin-top: 5px;
}

.toggle-content-btn:hover {
    background-color: #e0d0b0;
}

.action-buttons {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.btn-small {
    padding: 5px 10px;
    font-size: 0.85em;
    border-radius: 4px;
    margin: 0 2px;
    display: inline-block;
    text-decoration: none;
    background-color: var(--button-bg);
    color: var(--button-text);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-small:hover {
    background-color: var(--button-hover);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transform: translateY(-1px);
}

/* 添加信件格式样式 - 从letter-format.css合并 */
.letter-format {
    margin: 20px 0;
    line-height: 1.8;
    position: relative;
}

.letter-format p {
    margin: 10px 0;
}

.letter-format #recipient-name {
    font-weight: bold;
}

.letter-format .editor-wrapper {
    margin: 15px 0;
}

.letter-format textarea {
    width: 100%;
    min-height: 250px;
    padding: 15px;
    border: 1px solid #d2c6b2;
    border-radius: 4px;
    background-color: #fffdf7;
    color: #584022;
    font-family: 'Noto Sans SC', sans-serif;
    line-height: 1.7;
    resize: vertical;
    font-size: 16px;
}

.letter-format .signature {
    text-align: right;
    margin-top: 20px;
    font-style: italic;
    line-height: 1.5;
}

.letter-format .signature .date {
    display: block;
    margin-top: 2px;
}

/* 信件查看格式样式 */
.letter-content {
    padding: 15px;
    line-height: 1.8;
    font-size: 16px;
}

.letter-content .greeting {
    margin-bottom: 1.5em;
    font-size: 17px;
    font-weight: normal;
}

.letter-content p {
    margin-bottom: 1em;
    text-indent: 2em; /* 中文段落首行缩进两个字符 */
}

.letter-content .signature {
    text-align: right;
    margin-top: 30px;
    line-height: 1.5;
}

.letter-content .signature .date {
    display: block;
    margin-top: 5px;
}

/* 中文信件格式 */
.body {
    line-height: 1.8;
    font-size: 16px;
    color: #333;
}

/* 为邮件内容处理格式 */
.body br {
    display: block;
    margin: 5px 0;
}

/* 确保段落间距合适 */
.body p {
    margin-bottom: 0.8em;
    text-indent: 2em;
}

/* 在手机设备上的调整 */
@media screen and (max-width: 768px) {
    .letter-format textarea {
        min-height: 200px;
    }
    
    .letter-content {
        padding: 10px;
    }
}

/* 实时更新收件人名称 */
#recipient_username {
    width: 100%;
    padding: 10px;
    border: 1px solid #d2c6b2;
    border-radius: 4px;
    background-color: #fffdf7;
    color: #584022;
}

.recipient-picker {
    position: relative;
    width: 100%;
}

.recipient-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 0;
}

.recipient-input-wrap #recipient_username {
    padding-right: 44px;
}

.recipient-toggle {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    background: #eadcc3;
    color: #755237;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    box-shadow: none;
    padding: 0;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.recipient-toggle:hover {
    background: #decdaa;
    transform: translateY(-50%);
}

.recipient-suggestions {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 20;
    background: #fffaf0;
    border: 1px solid #dbc9a9;
    border-radius: 10px;
    box-shadow: 0 12px 24px rgba(140, 112, 76, 0.16);
    padding: 8px;
    max-height: 220px;
    overflow-y: auto;
    margin-bottom: 0;
}

.recipient-option {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    color: #5f4834;
    border-radius: 8px;
    box-shadow: none;
    padding: 10px 12px;
    margin: 0;
    border: none;
}

.recipient-option:hover,
.recipient-option.is-active {
    background: #f1e1c3;
    color: #4d3827;
    transform: none;
    box-shadow: none;
}

.recipient-empty {
    padding: 10px 12px;
    color: #8b735d;
    font-size: 0.92rem;
}

.form-group .recipient-picker,
.form-group .recipient-input-wrap,
.form-group .recipient-suggestions {
    margin-bottom: 0;
}

.rich-editor-field {
    border: 1px solid var(--border-light);
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
    transition: all 0.3s ease;
}

.rich-editor-field:focus-within {
    border-color: var(--button-bg);
    box-shadow: 0 0 8px rgba(201, 182, 147, 0.3);
}

.rich-editor-field.has-error {
    border-color: #d32f2f;
    box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.1);
}

.rich-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    padding: 10px 12px;
    background: #faf6ef;
    border-top: 1px solid var(--border-light);
}

.rich-editor-button {
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid #d9c8ac;
    background: #fffdf8;
    color: #5d4230;
    box-shadow: none;
    font-size: 0.82rem;
    line-height: 1.2;
}

.rich-editor-button:hover {
    transform: none;
    box-shadow: none;
    background: #fff4dd;
}

.rich-editor-button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    background: #f7f1e7;
    color: #9b8a79;
}

.rich-editor-button:disabled:hover {
    background: #f7f1e7;
}

.rich-editor-button.is-active {
    background: #bc845f;
    color: #fffaf5;
    border-color: #bc845f;
}

.rich-editor-button.rich-editor-button-muted {
    background: #fff;
    color: #7b644f;
}

.rich-editor-surface {
    min-height: 280px;
    padding: 0;
    background: #fff;
    cursor: text;
}

.welcome-editor-field .rich-editor-surface {
    min-height: 240px;
}

.tiptap-surface {
    min-height: 280px;
    padding: 12px;
    color: #4f4338;
    line-height: 1.8;
    outline: none;
    word-break: break-word;
    cursor: text;
    caret-color: #5d4230;
    white-space: pre-wrap;
}

.tiptap-surface p.is-editor-empty:first-child::before {
    content: attr(data-placeholder);
    color: #b39b7d;
    float: left;
    height: 0;
    pointer-events: none;
}

.tiptap-surface p {
    margin: 0 0 1em;
}

.welcome-editor-field .tiptap-surface {
    min-height: 240px;
}

.tiptap-surface h2,
.rich-mail-content h2 {
    margin: 1.1em 0 0.6em;
    font-size: 1.3rem;
    color: #7a5233;
}

.tiptap-surface h3,
.rich-mail-content h3 {
    margin: 1em 0 0.55em;
    font-size: 1.14rem;
    color: #7a5233;
}

.tiptap-surface ul,
.tiptap-surface ol,
.rich-mail-content ul,
.rich-mail-content ol {
    margin: 0 0 1em 1.4em;
    padding: 0;
}

.tiptap-surface blockquote,
.rich-mail-content blockquote {
    margin: 1em 0;
    padding: 0.8em 1em;
    border-left: 4px solid #d3a37d;
    background: #fbf3e5;
    color: #6a5441;
}

.tiptap-surface a,
.rich-mail-content a {
    color: #98613d;
}

.tiptap-surface img,
.rich-mail-content img {
    display: block;
    width: auto;
    height: auto;
    max-width: min(100%, 520px);
    max-height: 420px;
    margin: 1em auto;
    border-radius: 12px;
    box-shadow: 0 10px 24px rgba(134, 102, 74, 0.14);
    object-fit: contain;
}

.rich-mail-content {
    padding: 24px 28px;
}

.rich-mail-content p {
    text-indent: 0 !important;
    margin-bottom: 1em !important;
}

.rich-mail-content hr {
    border: none;
    border-top: 1px solid #e1d0b3;
    margin: 1.4em 0;
}

/* 使用JS实时更新收件人名称 */
@media screen and (min-width: 768px) {
    .letter-format, .letter-format-view {
        padding: 0 20px;
    }
}

/* 响应式调整 */
@media (max-width: 768px) {
    /* 用户卡片响应式样式 */
    .user-card-list {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
    .user-card {
        min-height: 160px;
        padding: 15px;
        background-color: #f5f0e9; /* 确保响应式模式下颜色一致 */
    }
    .avatar-placeholder {
        width: 70px;
        height: 70px;
        font-size: 2.5em;
        background-color: #a0734d; /* 确保响应式模式下颜色一致 */
    }
    .user-card h3 {
        font-size: 1rem;
        color: #7d4627; /* 确保响应式模式下颜色一致 */
    }
    .user-card p {
        font-size: 0.9rem;
        color: #6d503c; /* 确保响应式模式下颜色一致 */
    }

    .rich-editor-toolbar {
        gap: 5px;
        padding: 8px 10px;
    }

    .rich-editor-button {
        padding: 5px 8px;
        font-size: 0.78rem;
    }

    .tiptap-surface,
    .rich-mail-content {
        padding: 16px;
    }

    .tiptap-surface img,
    .rich-mail-content img {
        max-width: 100%;
        max-height: 320px;
    }
}

/* 文件名优化样式 */
.filename-truncate {
    display: inline-block;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

.filesize {
    font-size: 0.85em;
    color: var(--text-secondary);
}

/* 移动端优化 */
@media (max-width: 768px) {
    .container {
        width: auto; /* Override the default 85% width */
        margin-top: 15px;
        margin-bottom: 15px;
        margin-left: var(--mobile-spacing, 10px); /* Use defined variable or fallback */
        margin-right: var(--mobile-spacing, 10px);
        padding-top: var(--mobile-padding, 8px);
        padding-bottom: var(--mobile-padding, 8px);
        padding-left: var(--mobile-padding, 8px); /* Use defined variable or fallback */
        padding-right: var(--mobile-padding, 8px);
        box-sizing: border-box; /* Ensure padding is included in width calculation */
    }
      /* 使信件往来标题在手机模式下居中 */
    .conversation-title {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-bottom: 20px;
        font-size: 1.4em;
        width: 100%;
        display: block;
    }
    
    header {
        padding: 0.8rem 0 0; /* 减小头部内边距 */
    }
    
    header h1 {
        font-size: 24px; /* 减小标题文字 */
        padding-bottom: 0.6rem;
    }
    
    nav ul li a {
        padding: 8px 12px; /* 减小导航链接内边距 */
        font-size: 0.9em; /* 减小导航文字大小 */
    }
    
    .filename-truncate {
        max-width: 55px; /* 在移动端进一步限制文件名长度，适应左右分列 */
    }
    
    .more-attachments-note {
        padding: 1px 4px;
        font-size: 0.7em;
    }
    
    /* 优化预览框内容 */
    .timeline-content h4 {
        font-size: 0.9em; /* 更小的标题 */
        line-height: 1.3;
        margin-bottom: 5px;
    }
    
    /* 更紧凑的元数据显示 */
    .timeline-content .meta {
        font-size: 0.75em; /* 更小的元数据字体 */
        margin-bottom: 5px;
        padding-bottom: 3px;
        line-height: 1.4;
    }
    
    /* 优化正文预览 */
    .body.letter-paper-inline {
        font-size: 0.8em;
        padding: 5px 7px;
        margin-top: 4px;
        line-height: 1.4;
    }
    
    /* 调整查看详情链接 */
    .view-full-mail-link {
        margin-top: 2px;
        font-size: 0.75em;
    }
    
    /* 时间线项目间距调整 */
    .timeline-item {
        margin-bottom: 25px; /* 适当减少项目间距 */
    }
    
    /* 极小屏幕上的额外优化 */
    @media (max-width: 350px) {
        .container {
            width: 98%;
            padding: 12px 10px;
            margin: 10px auto;
        }
        
        /* 进一步减少字体大小和间距 */
        body {
            font-size: 14px;
        }
        
        /* 极小屏幕也保持左右分列布局，但更紧凑 */
        .timeline-content {
            width: calc(40% - 5px); /* 进一步缩小内容框宽度，两侧留出更多空间 */
            padding: 8px 10px; /* 更小的内边距 */
        }
        
        .timeline-content h4 {
            font-size: 0.85em;
            margin-bottom: 4px;
        }
        
        .timeline:before {
            width: 2px; /* 更细的时间线 */
        }
        
        .timeline-item.received-by-me::after,
        .timeline-item.sent-by-me::after {
            width: 8px; /* 更小的圆点 */
            height: 8px;
        }
        
        .timeline-item.received-by-me .timeline-content {
            margin-left: 9%; /* 从时间轴左侧留出更多距离 */
        }
        
        .timeline-item.sent-by-me .timeline-content {
            margin-left: calc(50% + 9%); /* 从时间轴右侧留出更多距离 */
        }
        
        /* 调整箭头尺寸 */
        .timeline-item.received-by-me .timeline-content::before,
        .timeline-item.sent-by-me .timeline-content::before {
            border-width: 6px;
        }
        
        .timeline-item.received-by-me .timeline-content::before {
            right: -6px;
            top: 12px;
            border-width: 6px 0 6px 6px;
        }
        
        .timeline-item.sent-by-me .timeline-content::before {
            left: -6px;
            top: 12px;
            border-width: 6px 6px 6px 0;
        }
    }
}

/* 移动端元数据优化 */
.meta-time {
    font-size: 0.85em;
    margin-left: 5px;
    display: inline-block;
}

.pending-flag {
    font-size: 0.85em;
    color: #777;
    margin-left: 5px;
}

@media (max-width: 768px) {
    .meta-time {
        font-size: 0.8em;
        margin-left: 4px;
    }
    
    .pending-flag {
        font-size: 0.8em;
        display: inline-block;
        margin-left: 3px;
    }
}

/* 优化加载性能的样式 */
img, svg {
    max-width: 100%;
    height: auto;
}

/* 下拉刷新提示样式 */
.pull-to-refresh {
    text-align: center;
    height: 40px;
    line-height: 40px;
    color: var(--text-secondary);
    font-size: 0.85em;
    display: none;
}

/* 滚动优化样式 */
@media (max-width: 768px) {
    html, body {
        scroll-behavior: smooth; /* 平滑滚动 */
        -webkit-overflow-scrolling: touch; /* 改善iOS滚动体验 */
    }
    
    /* 减少hover效果在触摸屏上的延迟 */
    .mail-list li, .timeline-content, .user-card {
        transition: all 0.15s ease;
    }    /* 极小屏幕额外优化 */
    @media (max-width: 350px) {
        .container {
            width: 98%;
            padding: 12px 10px;
            margin: 10px auto;
        }
        
        /* 进一步减少字体大小和间距 */
        body {
            font-size: 14px;
        }
        
        /* 极小屏幕也保持左右分列布局，但更紧凑 */
        .timeline-content {
            width: calc(40% - 5px); /* 进一步缩小内容框宽度，两侧留出更多空间 */
            padding: 8px 10px; /* 更小的内边距 */
        }
        
        .timeline-content h4 {
            font-size: 0.85em;
            margin-bottom: 4px;
        }
        
        .timeline:before {
            width: 2px; /* 更细的时间线 */
        }
        
        .timeline-item.received-by-me::after,
        .timeline-item.sent-by-me::after {
            width: 8px; /* 更小的圆点 */
            height: 8px;
        }
        
        .timeline-item.received-by-me .timeline-content {
            margin-left: 9%; /* 从时间轴左侧留出更多距离 */
        }
        
        .timeline-item.sent-by-me .timeline-content {
            margin-left: calc(50% + 9%); /* 从时间轴右侧留出更多距离 */
        }
        
        /* 调整箭头尺寸 */
        .timeline-item.received-by-me .timeline-content::before,
        .timeline-item.sent-by-me .timeline-content::before {
            border-width: 6px;
        }
        
        .timeline-item.received-by-me .timeline-content::before {
            right: -6px;
            top: 12px;
            border-width: 6px 0 6px 6px;
        }
        
        .timeline-item.sent-by-me .timeline-content::before {
            left: -6px;
            top: 12px;
            border-width: 6px 6px 6px 0;
        }
    }
}

/* 加载优化 */
@media (max-width: 768px) {
    /* 懒加载优化 */
    img.lazy-load {
        opacity: 0;
        transition: opacity 0.3s;
    }
    
    img.lazy-load.loaded {
        opacity: 1;
    }
    
    /* 手势操作反馈 */
    .feedback {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0.8);
        background-color: rgba(70, 60, 40, 0.85);
        color: white;
        padding: 12px 25px;
        border-radius: 20px;
        font-size: 14px;
        opacity: 0;
        z-index: 1000;
        transition: all 0.25s ease;
        pointer-events: none; /* 让触摸事件穿透此元素 */
        text-align: center;
        min-width: 120px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    }
    
    .feedback.show {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    
    /* 附件的增强交互样式 */
    .attachment-list-inline li a,
    .attachment-list-inline .more-attachments-note {
        position: relative;
        z-index: 2; /* 确保附件链接在卡片之上 */
    }
    
    .attachment-list-inline li a:active,
    .more-attachments-note:active {
        opacity: 0.8;
        transform: scale(0.95);
    }
}

/* 确保卡片在移动端居中并靠近时间轴 */
@media (max-width: 768px) {
    .timeline-item.received-by-me .timeline-content,
    .timeline-item.sent-by-me .timeline-content {
        margin: 0 auto; /* 保证居中 */
    }
    
    /* 保持左右分列，更靠近时间轴 */
    .timeline-item.received-by-me .timeline-content {
        margin-right: auto;
        margin-left: 4%; /* 减小距离，使卡片更靠近时间轴 */
    }
    
    .timeline-item.sent-by-me .timeline-content {
        margin-left: calc(50% + 4%); /* 减小距离，使卡片更靠近时间轴 */
        margin-right: auto;
    }
    
    /* 调整内容框尺寸 */
    .timeline-content {
        width: calc(44% - 5px); /* 略宽一些的内容框，便于居中显示 */
    }
}

/* 强化左右分列邮件的视觉区分 */
@media (max-width: 768px) {
    /* 强化接收的邮件 */
    .timeline-item.received-by-me .timeline-content {
        border-left-width: 3px;
    }
    
    /* 强化发送的邮件 */
    .timeline-item.sent-by-me .timeline-content {
        border-right-width: 3px;
    }
    
    /* 确保内容不会被过度挤压 */
    .timeline-content {
        min-width: 130px;
    }
}

/* 在移动视图（max-width: 768px）下为 .letter-paper、.user-card-list 和 .user-card 调整内边距和外边距，使其内容向内缩进 */
@media (max-width: 768px) {
    /* ...existing mobile styles... */

    .container {
        width: auto;
        margin-top: 15px;
        margin-bottom: 15px;
        margin-left: var(--mobile-spacing, 10px);
        margin-right: var(--mobile-spacing, 10px);
        padding-top: var(--mobile-padding, 8px);
        padding-bottom: var(--mobile-padding, 8px);
        padding-left: var(--mobile-padding, 8px);
        padding-right: var(--mobile-padding, 8px);
        box-sizing: border-box;
    }    /* Adjust padding for letter-paper on mobile */
    .letter-paper {
        padding: 40px 30px; /* Maintained from your template */
        min-height: auto;
        margin-left: 0; 
        margin-right: 0;
    }
    
    .letter-paper::before {
        left: 50px;
    }

    /* Adjust user card list and items for mobile */
    .user-card-list {
        padding-left: 0; 
        padding-right: 0; 
        gap: var(--mobile-spacing, 10px); /* Reduced gap */
    }

    .user-card-link {
        margin-bottom: var(--mobile-spacing, 10px); /* Consistent bottom margin */
    }
    
    .user-card {
        padding: calc(var(--mobile-padding, 8px) + 4px); /* e.g., 12px padding */
        min-height: auto; 
    }

    /* ...other existing mobile styles... */
}

/* 信纸文本区域和表单元素的样式 */
.letter-paper textarea {
    width: 100%;
    min-height: 200px;
    padding: 0;
    border: none;
    background-color: transparent;
    color: #333;
    font-family: "SimSun", "宋体", serif;
    line-height: 1.8;
    resize: vertical;
    font-size: 16px;
    text-indent: 2em;
    outline: none;
}

.letter-paper textarea:focus {
    outline: none;
    box-shadow: none;
}

/* 隐藏信纸编辑界面中的表单元素，保持信纸的视觉美感 */
.compose-form-letter select,
.compose-form-letter input[type="file"] {
    background-color: #fffef7;
    border: 1px solid #e8e3d3;
    padding: 8px 12px;
    border-radius: 4px;
    font-family: "SimSun", "宋体", serif;
    color: #333;
}

.compose-form-letter button[type="submit"] {
    background-color: #8b5a2b;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s;
    font-family: "SimSun", "宋体", serif;
}

.compose-form-letter button[type="submit"]:hover {
    background-color: #704621;
}

.compose-form-letter label {
    font-family: "SimSun", "宋体", serif;
    color: #333;
    margin-right: 10px;
}

.compose-form-letter small {
    display: block;
    margin-top: 5px;
    color: #666;
    font-family: 'Noto Sans SC', sans-serif;
    font-size: 0.85em;
}

/* 危险按钮样式 */
.btn-danger {
    background-color: #d9534f !important;
    color: white !important;
    border: 1px solid #d43f3a !important;
}

.btn-danger:hover {
    background-color: #c9302c !important;
    border-color: #ac2925 !important;
}

/* 确认对话框样式 */
.confirm-dialog {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.confirm-dialog-content {
    background: white;
    padding: 20px;
    border-radius: 8px;
    max-width: 400px;
    width: 100%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* 管理员提示样式 */
.admin-note {
    margin-top: 20px;
    padding: 15px;
    background-color: #fff9e6;
    border-left: 4px solid #ffcc00;
    border-radius: 4px;
}

.admin-note p {
    margin: 5px 0;
    color: #856404;
}