/* ===== 设计系统：统一配色与样式 ===== */
:root {
    /* 主色调 - 蓝紫渐变系 */
    --primary-color: #667eea;
    --primary-dark: #5568d3;
    --primary-light: #818cf8;
    --primary-bg: #eef2ff;
    
    /* 辅助色 */
    --secondary-color: #10b981;
    --secondary-dark: #059669;
    --danger-color: #ef4444;
    --danger-dark: #dc2626;
    --warning-color: #f59e0b;
    
    /* 中性色系 */
    --bg-primary: #ffffff;
    --bg-secondary: #f9fafb;
    --bg-tertiary: #f3f4f6;
    --border-color: #e5e7eb;
    --border-light: #f3f4f6;
    
    /* 文字色 */
    --text-primary: #111827;
    --text-secondary: #6b7280;
    --text-tertiary: #9ca3af;
    
    /* 阴影 */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    
    /* 圆角 */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;
    
    /* 过渡 */
    --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* General Body Styles */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    color: var(--text-primary);
}

/* Authentication Container */
#auth-container {
    background: var(--bg-primary);
    padding: 40px 48px 28px;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    width: 100%;
    max-width: 420px;
    backdrop-filter: blur(10px);
    position: relative;
}

/* 语言切换按钮 */
.language-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
}

.lang-btn {
    padding: 8px 16px;
    font-size: 14px;
    color: white;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: var(--transition);
}

.lang-btn:hover {
    opacity: 0.8;
}

.lang-option {
    font-weight: 400;
    transition: var(--transition);
    color: white;
}

.lang-option.active {
    font-weight: 700;
}

.lang-separator {
    margin: 0 4px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.6);
}

/* 下拉菜单内的语言项颜色覆盖，避免白底看不见 */
.user-dropdown .lang-option {
    color: var(--text-primary);
    font-weight: 400;
}
.user-dropdown .lang-option.active {
    font-weight: 700;
}
.user-dropdown .lang-separator {
    color: var(--text-secondary);
}
.user-dropdown .lang-check {
    margin-left: 6px;
    color: var(--primary-color);
    font-weight: 700;
    display: none;
}

/* 登录界面品牌标识 */
.auth-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 36px;
    padding-bottom: 0;  /* 移除下边距 */
    /* border-bottom: 2px solid var(--border-light); */  /* 移除分隔线 */
}

.auth-brand-logo {
    width: 42px;
    height: 42px;
    display: block;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.auth-brand-title {
    font-size: 28px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--primary-color) 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 42px;
}

/* Beta彩色标识 */
.beta-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    margin-left: 8px;
    margin-bottom: 0px;
    font-size: 12px;
    font-weight: 700;
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
    background: linear-gradient(135deg, var(--warning-color) 0%, var(--primary-color) 100%);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-sm);
    letter-spacing: 0.5px;
    vertical-align: baseline;
}

#auth-container h2 {
    margin-top: 0;
    margin-bottom: 24px;
    text-align: center;
    color: var(--text-primary);
    font-size: 28px;
    font-weight: 700;
}

#auth-container input {
    width: 100%;
    padding: 14px 16px;
    margin-bottom: 16px;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    box-sizing: border-box;
    font-size: 15px;
    transition: var(--transition);
    background: var(--bg-secondary);
}

#auth-container input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.12);
    background: white;
    transform: translateY(-1px);
}

#auth-container input::placeholder {
    color: var(--text-tertiary);
    font-size: 14px;
}

#auth-container button {
    width: 100%;
    padding: 15px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    transition: var(--transition);
    box-shadow: 0 4px 10px rgba(102, 126, 234, 0.25);
    letter-spacing: 0.3px;
    min-height: 52px;
}

#auth-container button:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(102, 126, 234, 0.35);
}

#auth-container button:active:not(:disabled) {
    transform: translateY(0);
}

#auth-container button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

#auth-container p {
    text-align: left;
    margin-top: 16px;
    margin-bottom: 0;
    color: var(--text-secondary);
    font-size: 14px;
}

#auth-container a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
    transition: var(--transition);
}

#auth-container a:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

/* 登录方式切换链接样式 */
.auth-switches {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: 16px;
    margin-bottom: 0;
    font-size: 14px;
}

.auth-switches .forgot-text {
    color: var(--text-secondary);
    font-weight: 400;
    font-size: 14px;
}

.auth-switches a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
    padding: 0;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    font-size: 14px;
}

.auth-switches a:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

/* 验证码输入行样式 */
.otp-row {
    display: flex;
    align-items: flex-start; /* 顶部对齐 */
    margin-bottom: 16px;
    flex-wrap: nowrap; /* 强制不换行 */
    width: 100%;
}

.otp-row input {
    flex: 618 0 0; /* 61.8% 宽度 */
    margin-bottom: 0; /* 覆盖#auth-container input的margin-bottom */
    margin-right: 12px;
    min-width: 0; /* 允许收缩 */
}

.otp-row button {
    flex: 382 0 0; /* 38.2% 宽度 */
    width: auto;
    padding: 14px 16px; /* 与输入框完全一致：上下14px、左右16px */
    white-space: nowrap;
    font-size: 15px; /* 与输入框一致 */
    line-height: normal; /* 与输入框保持一致 */
    font-weight: 600;
    background: linear-gradient(135deg, var(--secondary-color) 0%, var(--secondary-dark) 100%);
    border: 2px solid transparent; /* 与输入框相同的border宽度，但透明 */
    border-radius: var(--radius-md);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25);
    transition: var(--transition);
    min-width: 0;
    box-sizing: border-box; /* 与输入框一致 */
    color: white;
    cursor: pointer;
    margin-bottom: 0;
    height: 48.8px; /* 固定高度 */
}

.otp-row button:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
    filter: brightness(1.05);
}

.otp-row button:active:not(:disabled) {
    transform: translateY(0);
}

.otp-row button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    filter: grayscale(0.3);
}

/* 注册表单特殊样式优化 */
#register-form {
    animation: fadeIn 0.3s ease-out;
}

#register-form input[type="text"],
#register-form input[type="email"],
#register-form input[type="password"] {
    background: var(--bg-secondary);
    transition: all 0.3s ease;
}

#register-form input:focus {
    background: white;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.12);
    transform: translateY(-1px);
}

#register-form .otp-row input {
    background: var(--bg-secondary);
}

#register-form .otp-row input:focus {
    background: white;
}

/* 表单标题样式 */
.form-header {
    text-align: center;
    margin-bottom: 28px;
}

.form-header h2 {
    margin: 0 0 8px 0;
    font-size: 26px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--primary-color) 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.form-header p {
    margin: 0;
    font-size: 14px;
    color: var(--text-tertiary);
}

/* 输入框图标提示 */
.input-group {
    position: relative;
    margin-bottom: 16px;
}

.input-group input {
    margin-bottom: 0;
}

/* 注册按钮特殊样式 */
#register-btn {
    margin-top: 8px;
    padding: 16px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.5px;
    background: linear-gradient(135deg, var(--primary-color) 0%, #764ba2 100%);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

#register-btn:hover {
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
    transform: translateY(-3px);
}

#register-btn:active {
    transform: translateY(-1px);
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Main Application Container */
#main-container {
    width: 100vw;
    max-width: none;
    height: 100vh;
    background: var(--bg-secondary);
    border-radius: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
}

#header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 32px;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

#header h1 { 
    margin: 0; 
    font-size: 32px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--primary-color) 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.brand { 
    display: flex; 
    align-items: center; 
    gap: 12px;
}

.brand-logo { 
    width: 48px; 
    height: 48px; 
    display: block;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.brand-title { 
    line-height: 48px;
}

@media (max-width: 420px) {
  .brand-logo { width: 40px; height: 40px; }
  .brand-title { line-height: 40px; font-size: 24px; }
}

#user-info {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* 用户头像与设置下拉 */
.user-avatar-container {
    position: relative;
}

.user-avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--primary-color) 0%, #764ba2 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    position: relative;
}

.user-avatar img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.user-dropdown {
    position: absolute;
    top: 40px;
    right: 0;
    width: 240px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 8px;
    z-index: 1000;
}

.dropdown-header {
    padding: 8px 10px;
    font-weight: 600;
    color: var(--text-primary);
}

.dropdown-divider {
    height: 1px;
    background: var(--border-light);
    margin: 6px 0;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    color: var(--text-primary);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: var(--transition);
}

.dropdown-item:hover {
    background: var(--bg-secondary);
}

#user-info span {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 14px;
}

#logout-btn {
    padding: 10px 18px;
    background: linear-gradient(135deg, var(--danger-color) 0%, var(--danger-dark) 100%);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
}

#logout-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

#content-container {
    display: flex;
    padding: 24px;
    gap: 24px;
    flex: 1;
    overflow: hidden;
    overflow-x: auto;
    background: var(--bg-secondary);
}

/* 使用统计弹窗与贡献图 */
.stats-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

/* 使用统计弹窗样式 - 横向宽屏长方形 */
.stats-modal {
    max-width: 1300px;
    width: 88%;
    min-width: 1000px;
}

.stats-modal .modal-body {
    padding: 28px 32px;
}

/* 横向布局容器 */
.stats-layout {
    display: flex;
    gap: 36px;
    align-items: stretch;
}

/* 左侧区域 - 固定宽度 */
.stats-left {
    width: 300px;
    height: 602.95px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* 右侧区域 - 占据剩余空间，与左侧等高 */
.stats-right {
    flex: 0 0 600px;
    width: 600px;
    height: 602.95px;
    display: flex;
    flex-direction: column;
    min-width: 600px;
    --heat-gap: 4px;
}

.stats-controls {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: var(--radius-lg);
    border: none;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
    position: relative;
    overflow: hidden;
}

.stats-controls::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
}

.stats-controls label {
    font-weight: 600;
    color: #ffffff;
    font-size: 14px;
    letter-spacing: 0.5px;
    position: relative;
    z-index: 1;
}

.stats-controls input[type="month"] {
    width: 100%;
    padding: 14px 16px;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    background: #ffffff;
    color: #1e293b;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    letter-spacing: 0.5px;
    position: relative;
    z-index: 1;
}

.stats-controls input[type="month"]:hover {
    background: #ffffff;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

.stats-controls input[type="month"]:focus {
    outline: none;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.4), 0 6px 16px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

/* 月份选择器的日历图标 */
.stats-controls input[type="month"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.6;
    font-size: 18px;
    transition: all 0.2s ease;
    filter: brightness(0.5);
}

.stats-controls input[type="month"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
    filter: brightness(0.3);
    transform: scale(1.1);
}

/* 统计概览 - 左侧竖向布局 */
.stats-summary {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.stats-summary-item {
    background: var(--bg-primary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 16px;
    text-align: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-sm);
}

.stats-summary-item:hover {
    transform: translateX(4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-color);
}

.stats-summary-label {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 8px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.stats-summary-value {
    font-size: 28px;
    font-weight: 700;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-variant-numeric: tabular-nums;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* 热力图容器 - 占满右侧高度 */
.stats-grid-container {
    flex: 1;
    height: 100%;
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    padding: 0;
    border: 2px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* 星期标签 */
.stats-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 76px);
    gap: var(--heat-gap);
    margin-top: 14px;
    margin-bottom: 14px;
    width: fit-content;
    align-items: center;
}

.stats-weekday {
    font-size: 14px;
    color: var(--text-secondary);
    text-align: center;
    font-weight: 600;
    width: 76px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 热力图 - 固定76px方块，内容居中 */
.stats-grid {
    width: fit-content;
    display: grid;
    grid-template-columns: repeat(7, 76px);
    gap: var(--heat-gap);
    flex: 1;
    justify-content: center;
    align-content: center;
    align-items: center;
    justify-items: center;
}

 .stats-cell {
    aspect-ratio: 1;
    width: 76px;
    height: 76px;
    border-radius: 4px;
    background: var(--bg-tertiary);
    position: relative;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid transparent;
}

.stats-cell:hover {
    transform: scale(1.15);
    z-index: 10;
    box-shadow: 0 3px 10px rgba(102, 126, 234, 0.3);
    border-color: var(--primary-color);
}

/* 活跃等级颜色 - 适配项目主题色 */
.stats-cell.level-0 { 
    background: #ebedf0;
}

.stats-cell.level-1 { 
    background: #c7d2fe;
}

.stats-cell.level-2 { 
    background: #a5b4fc;
}

.stats-cell.level-3 { 
    background: #818cf8;
}

.stats-cell.level-4 { 
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* 暗色模式适配 */
@media (prefers-color-scheme: dark) {
    .stats-cell.level-0 { 
        background: #161b22;
    }
    
    .stats-cell.level-1 { 
        background: #0e4429;
    }
    
    .stats-cell.level-2 { 
        background: #006d32;
    }
    
    .stats-cell.level-3 { 
        background: #26a641;
    }
    
    .stats-cell.level-4 { 
        background: #39d353;
    }
}

/* 图例 - 固定在底部 */
.stats-legend {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    font-size: 12px;
    color: var(--text-secondary);
    padding: 14px 0 0 0;
    font-weight: 500;
    flex-shrink: 0;
}

.stats-legend-items {
    display: flex;
    gap: 10px;
    align-items: center;
}

.stats-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.stats-legend-item .stats-cell {
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
    cursor: default;
}

.stats-legend-item .stats-cell:hover {
    transform: none;
    box-shadow: none;
    border-color: transparent;
}

.stats-legend-item span {
    font-size: 12px;
    font-weight: 600;
}

/* Tooltip */
.stats-tooltip {
    position: fixed;
    padding: 10px 14px;
    font-size: 13px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 10000;
    pointer-events: none;
    white-space: nowrap;
    font-weight: 500;
}

.stats-tooltip::before {
    content: '';
    position: absolute;
    top: -4px;
    left: 12px;
    width: 8px;
    height: 8px;
    background: #667eea;
    transform: rotate(45deg);
}

/* 头像上传弹窗 */
.avatar-upload-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.avatar-preview {
    width: 200px;
    height: 200px;
    border-radius: var(--radius-full);
    background: var(--bg-secondary);
    border: 2px dashed var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    transition: var(--transition);
    position: relative;
}

.avatar-preview:hover {
    border-color: var(--primary-color);
    background: var(--bg-tertiary);
}

.avatar-preview img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.avatar-preview span {
    color: var(--text-secondary);
    font-size: 14px;
    text-align: center;
    padding: 20px;
}

.avatar-tips {
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    width: 100%;
}

.avatar-tips p {
    margin: 4px 0;
    font-size: 13px;
    color: var(--text-secondary);
}

/* 用户资料编辑表单 */
#profile-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#profile-form label {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 14px;
    margin-bottom: 4px;
}

#profile-form input {
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 14px;
    background: var(--bg-primary);
    color: var(--text-primary);
    transition: var(--transition);
}

#profile-form input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

#profile-form .modal-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 8px;
}

/* 信息显示行（只读+按钮） */
.info-display-row {
    display: flex;
    gap: 12px;
    align-items: center;
}

.info-display-row input[readonly] {
    pointer-events: none;
    color: var(--text-secondary);
}

.info-display-row button {
    white-space: nowrap;
    flex-shrink: 0;
}


.secondary-action {
    padding: 10px 20px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    transition: var(--transition);
}

.secondary-action:hover {
    background: var(--bg-tertiary);
    border-color: var(--border-dark);
}

.secondary-action:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Document Management - 1:1:1 等比例布局，自适应高度 */
#document-management {
    flex: 1 1 0;  /* 等比例伸缩，占据1份空间 */
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;  /* 允许高度自适应 */
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
}

/* 顶部标题栏 */
#document-management > div:first-child {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--border-light);
}

/* 文档内容包装器：用于包含文档列表和预览面板 - 自适应高度 */
.document-content-wrapper {
    flex: 1 1 0;  /* 自适应伸缩，填充剩余空间 */
    min-height: 0;  /* 允许高度自适应 */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin-bottom: 20px;  /* 固定20px间距 */
}

#document-management h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.5px;
}

/* 回收站面板 - 1:1:1 等比例布局，自适应高度 */
#trash-management {
    flex: 1 1 0;  /* 等比例伸缩，占据1份空间 */
    min-width: 0;
    min-height: 0;  /* 允许高度自适应 */
    display: none;
    flex-direction: column;
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow-md);
    position: relative;  /* 与#document-management保持一致 */
    overflow: hidden;  /* 与#document-management保持一致 */
}

/* 回收站顶部标题栏 */
#trash-management > div:first-child {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--border-light);
}

#trash-management h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.5px;
}

#document-list {
    display: block !important;  /* 强制优先级，防止内联样式干扰 */
    margin-bottom: 0;
    height: 100%;  /* 填充父容器固定高度 */
    overflow-y: auto;
    border: 2px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 12px;
    background: var(--bg-secondary);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
}

.document-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    margin-bottom: 6px;
    cursor: pointer;
    transition: var(--transition);
    background: var(--bg-primary);
}

.document-item:hover {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%);
    border-color: var(--primary-color);
    transform: translateX(4px);
    box-shadow: var(--shadow-sm);
}

.document-title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: -0.2px;
}

/* 垃圾桶图标：优雅的图标按钮风格 */
.delete-icon {
    margin-left: 12px;
    cursor: pointer;
    padding: 8px 12px;
    border: 2px solid var(--border-light);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    color: var(--text-tertiary);
    font-size: 14px;
    line-height: 1;
    opacity: 0;
    transition: var(--transition);
    font-weight: 400;
    box-shadow: none;
    position: relative;
}

/* 使用更优雅的删除图标 */
.delete-icon::before {
    content: '\1F5D1';  /* 🗑 废纸篓图标 */
    font-size: 16px;
}

.document-item:hover .delete-icon {
    opacity: 1;
    border-color: var(--danger-color);
    background: var(--bg-secondary);
    color: var(--danger-color);
    transform: translateX(2px);
}

#upload-form {
    display: block !important;  /* 强制优先级，防止内联样式干扰 */
    flex: 0 0 auto;  /* 不伸缩，保持内容高度 */
    padding: 20px 0 0 0;
    margin-top: 0;  /* 固定0，紧贴上方 */
    border-top: 2px solid var(--border-light);
    background: var(--bg-primary);
    box-shadow: none;
}

/* 回收站占位区域：与上传表单保持完全相同的样式和空间 */
.trash-placeholder {
    flex: 0 0 auto;  /* 不伸缩，保持内容高度 */
    padding: 20px 0 0 0;
    margin-top: 0;  /* 固定0，紧贴上方 */
    margin-bottom: 0;  /* 固定0 */
    border-top: 2px solid var(--border-light);
    background: var(--bg-primary);
    box-shadow: none;
    visibility: hidden;  /* 不显示内容，但占用空间 */
}

#upload-form h3 {
    margin: 0 0 16px 0;
    color: var(--text-primary);
    font-size: 20px;  /* 与Documents标题相同大小 */
    font-weight: 700;  /* 与Documents标题相同粗细 */
    letter-spacing: -0.5px;  /* 与Documents标题相同字间距 */
    padding-bottom: 16px;
    border-bottom: 2px solid var(--border-light);  /* 添加底部分隔线，与Documents一致 */
}

/* 选择文件按钮：简洁样式 */
#upload-form input[type="file"] {
    width: 100%;
    padding: 12px 14px;
    margin-bottom: 12px;
    margin-top: 4px;
    border: 2px solid var(--border-light);
    border-radius: var(--radius-md);
    box-sizing: border-box;
    font-size: 14px;
    transition: var(--transition);
    background: var(--bg-secondary);
    cursor: pointer;
}

#upload-form input[type="file"]:hover {
    border-color: var(--primary-color);
    background: var(--bg-primary);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.08);
}

#upload-form input[type="text"] {
    width: 100%;
    padding: 12px 14px;
    margin-bottom: 14px;
    border: 2px solid var(--border-light);
    border-radius: var(--radius-md);
    box-sizing: border-box;
    font-size: 14px;
    transition: var(--transition);
    background: var(--bg-secondary);
}

#upload-form input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* 上传按钮：保持绿色渐变风格 */
#upload-btn {
    width: 100%;
    padding: 12px 18px;
    background: linear-gradient(135deg, var(--secondary-color) 0%, var(--secondary-dark) 100%);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-weight: 600;
    font-size: 15px;
    transition: var(--transition);
    box-shadow: var(--shadow-md);
}

#upload-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

#upload-btn:active {
    transform: translateY(0);
}

/* 左栏内文档预览面板：与列表互斥显示 */
#document-viewer { 
    display: none; 
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
}

/* 当文档查看器显示时，隐藏文档列表 */
#document-viewer[style*="display: block"] ~ #document-list,
#document-viewer[style*="display:block"] ~ #document-list {
    display: none !important;
}

.doc-panel { 
    display: flex; 
    flex-direction: column; 
    height: 100%; 
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
}

.doc-panel-header { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-primary);
    font-weight: 600;
    color: var(--text-primary);
}

.doc-panel-body { 
    flex: 1; 
    overflow: auto; 
    padding: 16px;
    white-space: pre-wrap;
    line-height: 1.7;
    color: var(--text-primary);
}

/* 文档预览返回按钮：中性风格 */
#back-to-docs-btn {
    padding: 10px 20px;
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
}

#back-to-docs-btn::before {
    content: '← ';
    font-size: 14px;
}

#back-to-docs-btn:hover {
    background: var(--bg-secondary);
    border-color: var(--primary-color);
    color: var(--primary-color);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

#back-to-docs-btn:active {
    transform: translateY(0);
}

/* 回收站按钮：使用中性色调，不过于突出 */
#open-trash-btn {
    padding: 10px 20px;
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
}

#open-trash-btn::before {
    content: '🗑 ';
    font-size: 15px;
}

#open-trash-btn:hover {
    background: var(--bg-secondary);
    border-color: var(--primary-color);
    color: var(--primary-color);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

#open-trash-btn:active {
    transform: translateY(0);
}

/* 返回文档按钮：使用中性风格 */
#back-to-docs-from-trash-btn {
    padding: 10px 20px;
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
}

#back-to-docs-from-trash-btn::before {
    content: '← ';
    font-size: 14px;
}

#back-to-docs-from-trash-btn:hover {
    background: var(--bg-secondary);
    border-color: var(--primary-color);
    color: var(--primary-color);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

#back-to-docs-from-trash-btn:active {
    transform: translateY(0);
}

/* 已删除文档项样式 */
.deleted-document-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border: 2px solid var(--border-light);
    border-radius: var(--radius-md);
    margin-bottom: 8px;
    background: var(--bg-secondary);
    transition: var(--transition);
}

.deleted-document-item:hover {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-color: var(--primary-color);
    box-shadow: var(--shadow-sm);
}

/* 已删除文档操作按钮组 */
.deleted-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* 恢复按钮：使用绿色系，表示恢复操作 */
.restore-btn {
    padding: 8px 16px;
    background: var(--bg-primary);
    color: var(--secondary-color);
    border: 2px solid var(--secondary-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
}

.restore-btn::before {
    content: '↻ ';
    font-size: 14px;
}

.restore-btn:hover {
    background: var(--secondary-color);
    color: white;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.restore-btn:active {
    transform: translateY(0);
}

/* 彻底删除按钮：红色边框样式，不过于激进 */
.purge-btn {
    padding: 8px 16px;
    background: var(--bg-primary);
    color: var(--danger-color);
    border: 2px solid var(--danger-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
}

.purge-btn::before {
    content: '✕ ';
    font-size: 14px;
}

.purge-btn:hover {
    background: var(--danger-color);
    color: white;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.purge-btn:active {
    transform: translateY(0);
}

/* 已删除列表样式 - 与文档列表保持相同的固定高度 */
#deleted-document-list {
    height: 100%;  /* 填充父容器固定高度 */
    margin-top: 0;
    margin-bottom: 0;
    padding: 12px;
    border: 2px solid var(--border-light);
    border-radius: var(--radius-lg);
    background: var(--bg-secondary);
    overflow-y: auto;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
}

#deleted-document-list p {
    text-align: center;
    color: var(--text-secondary);
    padding: 40px 20px;
    font-style: italic;
}

#doc-view-content {
    white-space: pre-wrap;
    background: var(--bg-primary);
    padding: 20px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
    overflow-y: auto;
    line-height: 1.7;
    box-shadow: var(--shadow-sm);
    word-wrap: break-word;
}

/* Chat Container */
#chat-container {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    padding: 20px;
    box-shadow: var(--shadow-md);
    position: relative;  /* 为历史按钮提供定位上下文 */
}

#chat-window {
    position: relative;
    flex-grow: 1;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 16px;
    padding-top: 48px;
    margin-bottom: 16px;
    overflow-y: auto;
    background: var(--bg-secondary);
    min-height: 300px;
}

.chat-message {
    margin-bottom: 16px;
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.user-message {
    text-align: right;
}

.bot-message {
    text-align: left;
}

.message-content {
    display: inline-block;
    padding: 12px 16px;
    border-radius: var(--radius-lg);
    max-width: 80%;
    white-space: pre-wrap;
    box-shadow: var(--shadow-sm);
    line-height: 1.6;
}

.message-content p {
    margin: 0 0 8px 0;
}

.message-content p:last-child {
    margin-bottom: 0;
}

.user-message .message-content {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: white;
    text-align: justify;
    text-justify: inter-ideograph;
}

.bot-message .message-content {
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-light);
}

.bot-message .message-text {
    display: block;
}

#chat-input {
    display: flex;
    gap: 12px;
}

#chat-message {
    flex-grow: 1;
    padding: 14px 16px;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    text-align: left;
    font-size: 15px;
    transition: var(--transition);
}

#chat-message:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

#chat-message::placeholder {
    text-align: left;
    color: var(--text-tertiary);
}

#send-chat-btn {
    padding: 14px 24px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-weight: 600;
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
}

#send-chat-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* 模式滑块样式 */
.mode-toggle { 
    display: flex; 
    align-items: center; 
    gap: 12px; 
    margin: 8px 0 16px;
}

.mode-label { 
    font-size: 14px; 
    color: var(--text-secondary);
    font-weight: 500;
}

.mode-slider { 
    width: 160px;
}

.mode-scale { 
    display: flex; 
    justify-content: space-between; 
    width: 160px; 
    font-size: 12px; 
    color: var(--text-tertiary);
}

/* RAG Sources Toggle and Container */
.rag-toggle {
    display: block;
    width: fit-content;
    margin-top: 10px;
    padding: 8px 14px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
}

.rag-toggle:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.rag-sources {
    margin-top: 10px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 12px;
}

.bot-message .rag-sources {
    display: inline-block;
    max-width: 80%;
}

.rag-source-item {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-light);
}

.rag-source-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.rag-source-title {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
    font-size: 14px;
}

.rag-source-snippet {
    color: var(--text-secondary);
    line-height: 1.6;
    white-space: pre-wrap;
    font-size: 13px;
}

.rag-source-empty {
    color: var(--text-tertiary);
    font-style: italic;
}

/* ===== Studio面板与模式标签 ===== */
.primary-action {
    padding: 10px 16px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-weight: 600;
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
}

.primary-action:hover { 
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.chat-header { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-light);
}

.chat-title-row { 
    display: flex; 
    align-items: center; 
    gap: 16px;
}

/* 模式单选框样式（知识查询/知识梳理） */
.mode-tabs { 
    display: flex; 
    align-items: center; 
    gap: 12px;
}

.mode-tab {
    padding: 12px 20px;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-primary);
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: var(--text-primary);
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
}

.mode-tab:hover {
    background: var(--primary-bg);
    border-color: var(--primary-light);
    transform: translateY(-1px);
}

.mode-tab:focus-visible { 
    outline: none; 
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}

.mode-tab.active {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    border-color: var(--primary-dark);
    color: #ffffff;
    box-shadow: 
        0 0 0 3px rgba(102, 126, 234, 0.2),
        var(--shadow-md);
}

.mode-tab.active:hover { 
    filter: brightness(1.05);
    transform: translateY(-2px);
}

#studio-panel { 
    flex: 1 1 0; 
    min-width: 0; 
    display: flex; 
    flex-direction: column;
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    padding: 20px;
    box-shadow: var(--shadow-md);
}

.studio-header { 
    margin-bottom: 16px;
}

.studio-grid { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 16px;
}

.studio-card { 
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 16px;
    background: var(--bg-primary);
    transition: var(--transition);
    cursor: pointer;
}

.studio-card:hover {
    border-color: var(--primary-color);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.studio-card.disabled { 
    opacity: 0.5;
    cursor: not-allowed;
}

.studio-card.disabled:hover {
    transform: none;
    border-color: var(--border-color);
    box-shadow: none;
}

.studio-card-title { 
    font-weight: 600; 
    margin-bottom: 8px;
    color: var(--text-primary);
    font-size: 15px;
}

.studio-card-desc { 
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.5;
}

/* 模态框样式 */
.modal-overlay { 
    position: fixed; 
    inset: 0; 
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    display: flex; 
    align-items: center; 
    justify-content: center; 
    z-index: 1000;
    animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal { 
    width: 580px; 
    max-width: 90vw; 
    background: var(--bg-primary);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    animation: scaleIn 0.2s ease-out;
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.modal-header { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-secondary);
}

.modal-close { 
    border: none; 
    background: transparent;
    font-size: 24px;
    cursor: pointer;
    color: var(--text-secondary);
    transition: var(--transition);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
}

.modal-close:hover {
    background: var(--border-light);
    color: var(--text-primary);
}

.modal-tabs { 
    display: flex; 
    gap: 8px; 
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-secondary);
}

.modal-tabs .tab { 
    padding: 8px 16px;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    cursor: pointer;
    transition: var(--transition);
    font-weight: 500;
}

.modal-tabs .tab:hover {
    border-color: var(--primary-light);
    background: var(--primary-bg);
}

.modal-tabs .tab.active { 
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    border-color: var(--primary-dark);
    color: #fff;
}

.modal-body { 
    padding: 20px;
}

.modal-body label { 
    display: block; 
    margin-bottom: 8px;
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 600;
}

.modal-body input[type="text"], .modal-body input[type="file"] { 
    width: 100%; 
    box-sizing: border-box; 
    padding: 12px 14px;
    margin-bottom: 16px;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 14px;
    transition: var(--transition);
}

.modal-body input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.modal-actions { 
    display: flex; 
    justify-content: flex-end;
    gap: 12px;
}

.tip { 
    margin: 8px 0 16px;
    font-size: 13px;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--primary-color);
}

/* 抓取进度条样式 */
.progress { 
    position: relative; 
    width: 100%; 
    height: 12px; 
    background: var(--bg-tertiary);
    border-radius: var(--radius-full);
    margin: 10px 0 14px;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.progress-bar { 
    position: absolute; 
    left: 0; 
    top: 0; 
    height: 100%; 
    width: 0%; 
    background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
    transition: width 0.3s ease;
    border-radius: var(--radius-full);
}

.progress-label { 
    display: block; 
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-secondary);
}

.message-actions { 
    margin-top: 8px;
}

.message-actions button { 
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 13px;
    transition: var(--transition);
}

.message-actions button:hover { 
    background: var(--bg-secondary);
    border-color: var(--primary-color);
}

.bot-content-wrap {
    position: relative;
    display: inline-block;
    max-width: 80%;
    margin-bottom: 18px;
}

/* 历史会话边栏切换按钮与侧边栏 */
.history-toggle {
    /* 不使用绝对定位，让它自然融入标签页组 */
    width: auto;
    min-width: 44px;
    height: 44px;
    padding: 0 16px;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-primary);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
    font-weight: 600;
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
    margin-left: 12px;  /* 与"知识梳理"按钮的间距 */
}

.history-toggle:hover {
    background: var(--primary-bg);
    border-color: var(--primary-light);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.history-toggle:active {
    transform: translateY(0);
}

.query-history-btn {
    margin-left: 12px;
    height: 36px;
    padding: 0 14px;
    border-radius: var(--radius-md);
    border: 2px solid var(--border-color);
    background: var(--bg-primary);
    color: var(--text-primary);
    cursor: pointer;
    font-weight: 600;
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
}

.query-history-btn:hover { 
    background: var(--primary-bg);
    border-color: var(--primary-color);
    transform: translateY(-1px);
}

.history-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 340px;
    height: 100vh;
    overflow-y: auto;
    background: var(--bg-primary);
    border-right: 1px solid var(--border-color);
    box-shadow: var(--shadow-xl);
    padding: 0;
    display: none;
    z-index: 999;
}

.history-panel-header {
    position: sticky;
    top: 0;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: #fff;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    box-shadow: var(--shadow-md);
    z-index: 10;
}

.history-panel-title {
    font-size: 17px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}

.history-panel-close {
    background: rgba(255,255,255,0.15);
    border: none;
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: var(--transition);
}

.history-panel-close:hover {
    background: rgba(255,255,255,0.25);
    transform: rotate(90deg);
}

.history-panel-content {
    padding: 16px 12px;
}

/* 历史面板内的模式切换标签页 */
.history-mode-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    padding: 0 4px;
}

.history-mode-tab {
    flex: 1;
    padding: 10px 16px;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: var(--transition);
    text-align: center;
}

.history-mode-tab:hover {
    background: var(--primary-bg);
    border-color: var(--primary-light);
}

.history-mode-tab.active {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    border-color: var(--primary-dark);
    color: #ffffff;
    box-shadow: var(--shadow-sm);
}

.history-sessions-container {
    /* 会话列表容器 */
}

.new-chat-btn {
    margin: 0 12px 16px;
    width: calc(100% - 24px);
    padding: 12px 18px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: var(--shadow-md);
    transition: var(--transition);
    font-size: 14px;
}

.new-chat-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.history-panel .history-item {
    margin: 0 12px 10px;
    padding: 14px;
    border-radius: var(--radius-md);
    cursor: pointer;
    border: 2px solid var(--border-light);
    background: var(--bg-secondary);
    transition: var(--transition);
}

.history-panel .history-item:hover {
    background: var(--primary-bg);
    border-color: var(--primary-color);
    box-shadow: var(--shadow-md);
    transform: translateX(4px);
}

.history-panel .history-item.active {
    background: var(--primary-bg);
    border-color: var(--primary-color);
    box-shadow: var(--shadow-sm);
}

/* 选中的历史会话（点击后） */
.history-panel .history-item.selected {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-color: var(--primary-color);
    border-width: 2px;
    box-shadow: var(--shadow-md);
    font-weight: 600;
}

.history-panel .history-item .role {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
}

.history-panel .history-item .role .badge {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: #fff;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 700;
}

.history-panel .history-item .content {
    color: var(--text-secondary);
    line-height: 1.6;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.history-panel .history-item .meta {
    margin-top: 8px;
    font-size: 11px;
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    gap: 10px;
}

.history-panel .empty {
    color: var(--text-secondary);
    font-size: 14px;
    text-align: center;
    padding: 60px 20px;
    font-style: italic;
}

/* ===== 修改邮箱弹窗美化样式 ===== */
.email-change-modal {
    max-width: 500px;
}

.email-change-modal .modal-header h3 {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.email-info-box {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 2px solid #bae6fd;
    border-radius: var(--radius-md);
    padding: 18px 22px;
    margin-bottom: 28px;
}

.current-email-label {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.current-email-value {
    font-size: 15px;
    color: var(--primary-color);
    font-weight: 600;
    word-break: break-all;
}

.email-tip {
    background: #fffbeb;
    border-left: 4px solid var(--warning-color);
    border-radius: var(--radius-sm);
    padding: 14px 18px;
    margin-top: 20px;
    margin-bottom: 0;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.email-tip .tip-icon {
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 1px;
}

.email-tip .tip-text {
    font-size: 13px;
    color: #92400e;
    line-height: 1.6;
}

.email-change-modal label {
    display: block;
    font-weight: 600;
    color: var(--text-primary);
    font-size: 14px;
    margin-bottom: 8px;
    margin-top: 0;
}

/* 统一所有输入框样式 */
.email-change-modal input[type="email"],
.email-change-modal input[type="text"],
.email-change-modal input[type="password"] {
    width: 100%;
    height: 46px;
    padding: 12px 16px;
    font-size: 15px;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    color: var(--text-primary);
    transition: var(--transition);
    box-sizing: border-box;
    margin-bottom: 20px;
}

.email-change-modal input[type="email"]:focus,
.email-change-modal input[type="text"]:focus,
.email-change-modal input[type="password"]:focus {
    outline: none;
    border-color: var(--primary-color);
    background: var(--bg-primary);
}

/* 验证码行样式优化 */
.email-change-modal .otp-row {
    display: flex;
    gap: 12px;
    align-items: stretch;
    margin-bottom: 20px;
}

.email-change-modal .otp-row input {
    flex: 1;
    margin-bottom: 0;
    height: 46px;
}

/* 发送验证码按钮 - 蓝色渐变 */
.email-change-modal .otp-row button {
    flex: 0 0 auto;
    min-width: 130px;
    height: 46px;
    padding: 0 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: var(--radius-md);
    color: white;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.email-change-modal .otp-row button:hover {
    background: linear-gradient(135deg, #5a67d8 0%, #6b42a0 100%);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    transform: translateY(-1px);
}

.email-change-modal .otp-row button:active {
    transform: translateY(0);
}

.email-change-modal .otp-row button:disabled {
    background: linear-gradient(135deg, #a0aec0 0%, #718096 100%);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.email-change-modal .modal-actions {
    margin-top: 32px;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.email-change-modal .modal-actions button {
    min-width: 100px;
    height: 44px;
    padding: 0 24px;
    font-size: 15px;
}