/* style.css (V8.18 - 视觉与体验优化) */
/* 【终极修复】为所有元素设置正确的盒子模型，防止padding撑大布局 */
*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    /* -- 恢复了大部分原始颜色 -- */
    --primary-color: #007bff;
    --background-light: #f0f2f5;   /* 【已恢复】聊天背景恢复为浅灰色 */
    --background-white: #fff;
    --text-dark: #12262C;             /* 【已恢复】主要文字恢复为纯黑色 */
    --text-light: #fff;            /* 【已恢复】亮色文字恢复为纯白色 */
    --text-secondary: #8e8e93;
    --border-color: #dcdcdc;
    --shadow-color: rgba(0,0,0,0.1);

    /* 【【【核心修改：只把主题色换成你的湖蓝色】】】 */
    --qq-blue: #3B83A2;

    /* -- 星空主题颜色变量 -- */
    --qq-blue: #5097CD;
    --qq-light-blue: #CCE4F4;
    --qq-bg-light: #EFF7FB;
    --qq-dark: #2B3A4C;
    
    /* -- 毛玻璃效果变量 -- */
    --glass-bg: rgba(255, 255, 255, 0.8);
    --glass-border: rgba(255, 255, 255, 0.2);
    --glass-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
    
    /* -- 渐变变量 -- */
    --gradient-primary: linear-gradient(135deg, #5097CD 0%, #3b69a2 100%);
    --gradient-secondary: linear-gradient(135deg, #CCE4F4 0%, #EFF7FB 100%);
    
    /* -- 圆角变量 -- */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-full: 50%;

    /* -- 其他变量保持不变 -- */
    --bubble-gray: #e9e9eb;
    --header-height: 50px;
    --nav-height: 50px;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden; /* 防止意外的滚动条出现 */
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    /* 【核心】把浅灰色背景色移到body上，作为整个App的“墙纸” */
    background-color: #f0f2f5; 
    -webkit-tap-highlight-color: transparent;
    /* ▼▼▼ 全新添加的代码 ▼▼▼ */
    display: flex;
    flex-direction: column;
    /* ▲▲▲ 全新添加的代码 ▲▲▲ */
}

/* 星空背景装饰 */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(2px 2px at 20px 30px, #fff, transparent),
        radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 90px 40px, #fff, transparent),
        radial-gradient(1px 1px at 130px 80px, rgba(255,255,255,0.6), transparent),
        radial-gradient(2px 2px at 160px 30px, #fff, transparent);
    background-repeat: repeat;
    background-size: 200px 100px;
    animation: twinkle 4s ease-in-out infinite alternate;
    z-index: -1;
}

@keyframes twinkle {
    0% { opacity: 0.3; }
    100% { opacity: 1; }
}
#app-container {
    width: 100%;
    /* height: calc(100% - var(--nav-height)); 【【【核心修改：删除了这行冲突的命令】】】 */
    flex: 1; /* 【【【核心修改：换上了更智能的 flex 命令】】】 */
    min-height: 0; /* 一个专业技巧，防止 flex 布局在某些情况下溢出 */
    /* 【核心】让主容器变透明，这样才能看到body的“墙纸” */
    background-color: transparent;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative; 
}
.view {
    width: 100%;
    flex: 1 1 auto; /* 【核心修正】解除了强制占满空间的霸权 */
    display: flex;
    flex-direction: column;
    background-color: transparent;
    min-height: 0;
    overflow: hidden; /* 【核心修正】防止内容溢出视图 */
}
.hidden { display: none !important; }

#message-container::-webkit-scrollbar,
#chat-list-container::-webkit-scrollbar,
.moments-container::-webkit-scrollbar,
#settings-form::-webkit-scrollbar,
#ai-editor-form::-webkit-scrollbar,
.contact-settings-container::-webkit-scrollbar {
    display: none;
}
#message-container,
#chat-list-container,
.moments-container,
#settings-form,
#ai-editor-form,
.contact-settings-container {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* --- 通用头部 --- */
.header {
    height: var(--header-height);
    /* 毛玻璃效果头部 */
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    
    color: var(--text-light);
    padding: 0 15px;
    text-align: center;
    font-weight: bold;
    font-size: 18px;
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    z-index: 10;
}
#chat-header-normal, #chat-header-select {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.header-action-buttons {
    display: flex;
    align-items: center;
    gap: 5px; /* (可选) 增加按钮之间的微小间距 */
}
#chat-header-normal {
    justify-content: flex-start;
}
.header-button-text {
    background: none;
    border: none;
    color: white;
    font-size: 15px;
    cursor: pointer;
    padding: 5px 10px;
}
.header-button {
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    padding: 5px 10px;
    z-index: 5; 
    display: flex; /* 【核心新增】确保SVG图标居中 */
    align-items: center;
}
.back-button { 
    position: static;
}
#add-contact-button { position: absolute; right: 5px; top: 50%; transform: translateY(-50%);}
#chat-settings-button { 
    position: absolute; 
    right: 5px; 
    top: 50%;
    transform: translateY(-50%);
}
.avatar-sm { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
#current-user-avatar { position: static; }
.clickable { cursor: pointer; }
#chat-header-info {
    text-align: left;
    margin-left: 8px;
}
#chat-ai-status-line {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
}
.online-indicator {
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: #4CAF50;
    border-radius: 50%;
}

/* --- 视图1: 消息列表 --- */
#chat-list-container { 
    flex-grow: 1; 
    overflow-y: auto; 
    /* 【补色】确保消息列表本身是白色背景 */
    background-color: var(--background-white); 
}
.chat-list-item {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    gap: 15px;
    cursor: pointer;
    margin: 5px 12px; /* 上下外边距微调，左右外边距从15px减小到12px */
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}
/* 【新增】置顶聊天的特殊背景色 */
.chat-list-item.pinned {
    background-color: #f5f5f5;
}
.chat-list-item:hover {
    background-color: #e9e9e9;
}
.chat-list-item:hover { 
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(80, 151, 205, 0.2);
    background: rgba(255, 255, 255, 0.35);
}
.chat-list-item .avatar { 
    width: 48px; 
    height: 48px; 
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 12px rgba(80, 151, 205, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.3);
}
.chat-list-item-info { flex-grow: 1; overflow: hidden; }
.chat-list-item-top { display: flex; justify-content: space-between; align-items: center; }
.chat-list-item-name { font-weight: bold; font-size: 16px; color: var(--text-dark); }
.chat-list-item-time { font-size: 12px; color: var(--text-secondary); }
.chat-list-item-msg { font-size: 14px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 4px; }

/* --- 视图2: 聊天窗口 --- */
#chat-ai-name { display: block; font-size: 16px; font-weight: bold; }
#chat-ai-status { display: block; font-size: 12px; opacity: 0.8; }
#message-container { 
    flex-grow: 1; 
    padding: 15px 10px; 
    overflow-y: auto; 
    display: flex; 
    flex-direction: column; 
    gap: 15px; /* 【关键修改】把15px的间距缩小到10px，实现紧凑感！ */
    /* 【核心】移除背景色，让它彻底变透明！ */
    /* background-color: var(--background-light); */ 
}
.message-row { display: flex; gap: 10px; width: 100%; align-items: flex-start; padding-top: 5px; transition: background-color 0.2s; }
.avatar { 
    width: 40px; 
    height: 40px; 
    border-radius: var(--radius-full); 
    object-fit: cover; 
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 2px 8px rgba(80, 151, 205, 0.2);
}
.message-content { display: flex; flex-direction: column; gap: 3px; max-width: calc(100% - 100px); position: relative; }
.message { 
    padding: 8px 12px; /* 【关键修改】大幅缩小内部填充，让气泡紧紧包裹文字 */
    border-radius: var(--radius-lg); 
    line-height: 1.5; 
    word-break: break-word; 
    position: relative;
    box-shadow: 0 2px 8px rgba(80, 151, 205, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}
/* 【全新】语音气泡专属样式 */
.message-voice {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    min-width: 100px; /* 最小宽度，防止太短不好看 */
}
.play-icon-container {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.user-row .play-icon-container {
    background-color: rgba(255, 255, 255, 0.9);
}
.assistant-row .play-icon-container {
    background-color: var(--background-white); /* 改为白色背景 */
    /* 可选：添加一个细微的边框，让它在白色气泡上更清晰 */
    border: 1px solid #eeeeee; 
}
.play-icon-container svg {
    width: 16px;
    height: 16px;
}
.user-row .play-icon-container svg {
    fill: var(--qq-blue);
}
.assistant-row .play-icon-container svg {
    fill: var(--qq-blue); /* 图标颜色改为蓝色 */
}
.sound-wave {
    flex-grow: 1;
    height: 20px;
    display: flex;
    align-items: flex-end; /* 让柱子底部对齐 */
    gap: 2px;
    min-width: 30px; /* 【核心修复】确保声波区域至少有30px宽度，绝不会消失 */
}
.wave-bar {
    flex-grow: 1; /* 让柱子自动填满空间 */
    border-radius: 2px;
    animation-duration: 1.2s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}
.user-row .wave-bar { background-color: white; }
.assistant-row .wave-bar { background-color: #dcdcdc; }
.voice-duration {
    flex-shrink: 0;
    font-size: 14px;
    font-weight: bold;
}
.user-row .voice-duration { color: white; }
.assistant-row .voice-duration { color: #555; }

/* 播放动画 */
.message-voice.playing .wave-bar {
    animation-name: play-animation;
}
@keyframes play-animation {
    0% { transform: scaleY(0.3); }
    25% { transform: scaleY(1); }
    50% { transform: scaleY(0.5); }
    75% { transform: scaleY(0.8); }
    100% { transform: scaleY(0.3); }
}
.voice-text-content {
    background-color: var(--background-white);
    padding: 10px 12px;
    border-radius: 10px;
    margin-top: 5px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-dark);
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
    /* 默认隐藏 */
    display: none;
}
.user-row .voice-text-content {
    /* 用户侧的文字气泡颜色可以不同，但这里保持统一 */
    background-color: var(--background-white);
}
.assistant-row { justify-content: flex-start; }
.assistant-row .message { 
    background: var(--glass-bg);
    color: var(--text-dark); 
    align-self: flex-start;
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 2px 8px rgba(80, 151, 205, 0.1);
}

.assistant-row .message::before { 
    display: none; /* 【关键修改】让这个小尾巴彻底隐身 */
}
.user-row { justify-content: flex-end; }
.user-row .avatar { order: 2; }
.user-row .message-content { order: 1; align-items: flex-end;}
.user-row .message { 
    background: var(--gradient-primary); 
    color: var(--text-light); 
    align-self: flex-end;
    box-shadow: 0 4px 15px rgba(80, 151, 205, 0.3);
}
.user-row .message::after { 
    display: none; /* 【关键修改】同样，让这个小尾巴也彻底隐身 */
}
.select-checkbox { width: 18px; height: 18px; border: 1px solid var(--border-color); border-radius: 50%; flex-shrink: 0; transition: all 0.2s; }
.select-checkbox.checked { background-color: var(--qq-blue); border-color: var(--qq-blue); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3e%3cpath d='M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z'/%3e%3c/svg%3e"); }
.message-row.in-select-mode { cursor: pointer; padding: 5px; border-radius: 8px; }
.message-row.in-select-mode:hover { background-color: #e9e9e9; }
.timestamp-display {
    text-align: center;
    color: var(--text-secondary);
    font-size: 12px;
    padding: 8px 0;
}
.suggestion-panel { 
    flex-shrink: 0; 
    padding: 15px; 
    background: var(--glass-bg);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-top: 1px solid var(--glass-border); 
    display: flex; 
    flex-wrap: wrap; 
    gap: 10px;
    box-shadow: 0 -4px 20px rgba(80, 151, 205, 0.1);
}
.suggestion-button { 
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl); 
    padding: 8px 16px; 
    font-size: 13px; 
    cursor: pointer; 
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(80, 151, 205, 0.1);
}
.suggestion-button:hover { 
    background: var(--gradient-primary); 
    color: white; 
    border-color: var(--qq-blue);
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(80, 151, 205, 0.3);
}
.chat-input-area { 
    display: flex; 
    flex-direction: column; 
    flex-shrink: 0; 
    background-color: rgba(247, 247, 247, 0.85); 
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--border-color); 
    position: relative; /* 【关键】为内部面板提供定位基准 */
}
.chat-functions-toolbar {
    padding: 2px 15px;
    display: flex;
    justify-content: space-between; /* 从space-around改为space-between */
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    margin: 4px 12px 0; /* 左右外边距从15px减小到12px */
}
.input-row {
    padding: 8px 10px;
    display: flex;
    gap: 10px;
    align-items: flex-end; /* 核心修改：改回 flex-end (底部对齐) */
    margin: 0 12px; /* 左右外边距从40px减小到12px，与功能栏对齐 */
}
.tool-button { 
    background: none; 
    border: none; 
    cursor: pointer; 
    padding: 8px; 
    border-radius: var(--radius-sm); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    transition: all 0.3s ease;
}
.tool-button:hover { 
    background: rgba(80, 151, 205, 0.1);
    transform: scale(1.1);
}
.tool-button svg {
    width: 20px; /* 从22px改小到20px */
    height: 20px; /* 从22px改小到20px */
    stroke: var(--text-secondary);
    transition: all 0.3s ease;
}
.tool-button:hover svg { 
    stroke: var(--qq-blue);
    transform: scale(1.1);
}
#chat-input { 
    flex-grow: 1; 
    border: none; 
    background-color: var(--background-white); 
    border-radius: 12px; 
    padding: 2px 15px; /* 核心修改：大胆地把上下内边距压缩到 5px！ */
    font-size: 16px; 
    resize: none; 
    max-height: 100px; 
}
#send-button { 
    border: none; 
    background-color: var(--qq-blue); 
    color: var(--text-light); 
    border-radius: 8px; 
    cursor: pointer; 
    font-weight: bold; 
    padding: 10px 20px; /* 核心修改：恢复到原始的 10px 上下内边距！ */
    flex-shrink: 0; 
}

#send-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(80, 151, 205, 0.4);
}

/* --- 视图3: 动态页面 --- */
.moments-container { flex-grow: 1; overflow-y: auto; }
.moments-header { position: relative; height: 200px; }
.moments-banner { width: 100%; height: 100%; object-fit: cover; }
.moments-user-info { position: absolute; bottom: -15px; right: 20px; display: flex; align-items: flex-end; gap: 10px;}
#moments-user-name { color: white; text-shadow: 1px 1px 2px black; font-weight: bold; padding-bottom: 5px; }
.avatar-lg { width: 70px; height: 70px; border-radius: 10px; border: 2px solid white; object-fit: cover;}
.moments-nav { display: flex; justify-content: space-around; padding: 25px 10px 10px; background-color: white; border-bottom: 1px solid var(--border-color); }
.moments-feed { padding: 10px; background-color: white; }
.fab { position: fixed; bottom: 80px; right: 25px; width: 50px; height: 50px; background-color: var(--qq-blue); color: white; border-radius: 50%; border: none; font-size: 24px; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,0.2); }

/* --- 视图4: 设置页面 --- */
#settings-form { 
    padding: 25px; 
    overflow-y: auto; 
    flex-grow: 1; 
    background: var(--glass-bg);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}
.form-group { 
    margin-bottom: 25px;
}
.form-group label { 
    display: block; 
    margin-bottom: 10px; 
    font-weight: bold; 
    color: var(--text-dark);
    font-size: 15px;
}
.form-group input, .form-group select, .form-group textarea { 
    width: 100%; 
    padding: 12px 15px; 
    border: 1px solid var(--glass-border); 
    border-radius: var(--radius-md); 
    font-size: 14px; 
    box-sizing: border-box;
    background: var(--glass-bg);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transition: all 0.3s ease;
}

.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    outline: none;
    border-color: var(--qq-blue);
    box-shadow: 0 0 0 3px rgba(80, 151, 205, 0.1);
}
.model-selection-area { 
    display: flex; 
    gap: 15px; 
    align-items: center;
}
.search-bar-container {
    padding: 8px 15px; /* 【关键修改】上下内边距从10px缩小到8px */
    background-color: #fff;
    border-bottom: 1px solid #f0f0f0;
}
#fetch-models-button { 
    padding: 10px 20px; /* 关键：这行代码让按钮变高变胖 */
    border: none; 
    background-color: var(--qq-blue); 
    color: var(--text-light); 
    border-radius: 5px; 
    cursor: pointer; 
    flex-shrink: 0; 
    font-weight: bold; /* 让文字加粗，更有力 */
}
#fetch-models-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(80, 151, 205, 0.4);
}
#save-settings-button { 
    width: 100%; 
    padding: 15px; 
    border: none; 
    background: var(--gradient-primary); 
    color: white; 
    border-radius: var(--radius-md); 
    font-size: 16px; 
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(80, 151, 205, 0.3);
    transition: all 0.3s ease;
}

#save-settings-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(80, 151, 205, 0.4);
}
hr { 
    border: none; 
    border-top: 1px solid var(--glass-border); 
    margin: 25px 0;
    opacity: 0.6;
}
.placeholder-text { 
    color: var(--text-muted); 
    text-align: center;
    font-style: italic;
    opacity: 0.8;
}

/* --- 视图5: 聊天设置页面 --- */
.contact-settings-container { 
    flex-grow: 1; /* 【核心修复1】让这个主容器能自动伸展，填满屏幕 */
    overflow-y: auto; /* 【核心修复2】如果内容超长，允许它自己滚动 */
    padding: 20px 0; /* 【核心修复3】恢复上下内边距 */
    /* 【核心修复4】恢复最重要的毛玻璃背景效果！ */
    background: var(--glass-bg);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}
.settings-group { 
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg); 
    margin: 0 15px 15px; 
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(80, 151, 205, 0.1);
}
.settings-item { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 16px 20px; 
    font-size: 15px; 
    cursor: pointer; 
    transition: all 0.3s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
/* 【【【全新：设置项标签防挤压补丁】】】 */
.settings-item > span:first-child {
    flex-shrink: 0;      /* 指令1：禁止收缩！这是防止被挤压的核心。 */
    white-space: nowrap; /* 指令2：禁止文字内部换行，作为双重保险。 */
    margin-right: 15px;  /* (推荐) 同时增加一个右边距，确保和输入框有安全距离。 */
}
.settings-item:not(:last-child) { 
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.settings-item:hover { 
    background: rgba(255, 255, 255, 0.2);
    transform: translateX(2px);
}
.settings-item .arrow { 
    color: var(--text-secondary); 
    font-size: 18px; 
    font-weight: bold;
    transition: all 0.3s ease;
}

.settings-item:hover .arrow {
    color: var(--qq-blue);
    transform: translateX(2px);
}
.settings-item.contact-profile { 
    font-weight: bold; 
    font-size: 16px; 
    gap: 15px; 
    justify-content: flex-start;
    padding: 20px;
}

.settings-item.contact-profile .avatar {
    border: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 15px rgba(80, 151, 205, 0.3);
}
.settings-item.contact-profile .arrow { 
    margin-left: auto;
    font-size: 20px;
}
.settings-item .danger { 
    color: #e53935; 
    width: 100%; 
    text-align: center;
    font-weight: 600;
    transition: all 0.3s ease;
}

.settings-item:hover .danger {
    color: #f44336;
    transform: scale(1.02);
}
.switch { position: relative; display: inline-block; width: 44px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { 
    position: absolute; 
    cursor: pointer; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background: linear-gradient(135deg, #ccc, #ddd);
    transition: .4s; 
    border-radius: 34px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}
.slider:before { 
    position: absolute; 
    content: ""; 
    height: 20px; 
    width: 20px; 
    left: 2px; 
    bottom: 2px; 
    background: linear-gradient(135deg, #fff, #f5f5f5);
    transition: .4s; 
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
input:checked + .slider { 
    background: var(--gradient-primary);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1), 0 0 0 2px rgba(80, 151, 205, 0.2);
}
input:checked + .slider:before { 
    transform: translateX(20px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

/* --- 视图6: AI信息编辑页面 --- */
#ai-editor-form { 
    flex-grow: 1; 
    overflow-y: auto; 
    padding: 25px; 
    background: var(--glass-bg);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

/* 步骤1: 明确定义水平容器的行为 */
.form-group-horizontal {
    display: flex;           /* 启用 Flexbox 布局 */
    flex-direction: row;     /* 强制水平排列 (虽然是默认值，但写上更保险) */
    flex-wrap: nowrap;       /* 强制不换行 */
    align-items: flex-end;   /* 保持原有的底部对齐 */
    gap: 15px;               /* 保持间距 */
    margin-bottom: 20px;     /* 保持外边距 */
}

/* 步骤2: 用最严格的方式定义“AI头像”区域 */
.form-group.avatar-group {
    flex: 0 0 90px; /* 终极咒语1: 不准变大(0)，不准变小(0)，固定宽度90px */
}

/* 步骤3: 用最严格的方式定义“AI照片”区域，并加入解决问题的关键代码 */
.form-group.photo-group {
    flex: 1 1 auto; /* 终极咒语2: 可以变大(1)，可以变小(1)，尺寸随内容自适应 */
    min-width: 0;   /* 关键代码！解除内部内容的宽度限制，允许它被正确压缩 */
}

/* 【新增】头像上传区域样式 (这部分无需改动，保持原样) */
.image-upload-area.avatar-upload {
    width: 90px;
    height: 90px;
    border-radius: 50%; /* 圆形 */
}
/* 【新增】照片上传区域样式 (这部分无需改动，保持原样) */
.image-upload-area.photo-upload {
    width: 100%;
    height: 120px; /* 4:3 比例的高度 */
    border-radius: 8px; /* 方形 */
}
#ai-editor-form input[type="text"] {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    font-size: 14px;
    box-sizing: border-box;
    background: var(--glass-bg);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transition: all 0.3s ease;
}

#ai-editor-form input[type="text"]:focus {
    outline: none;
    border-color: var(--qq-blue);
    box-shadow: 0 0 0 3px rgba(80, 151, 205, 0.1);
}
/* 上面那行 .form-group-horizontal .form-group { ... } 已被彻底删除 */
.image-upload-area { 
    width: 100%; 
    height: 120px; 
    border: 2px dashed var(--glass-border); 
    border-radius: var(--radius-lg); 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    cursor: pointer; 
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position: relative; 
    overflow: hidden;
    transition: all 0.3s ease;
}
.image-upload-area:hover { 
    border-color: var(--qq-blue); 
    background: rgba(80, 151, 205, 0.1);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(80, 151, 205, 0.2);
}
.image-upload-area span { 
    color: var(--text-secondary); 
    font-size: 14px;
    transition: all 0.3s ease;
}

.image-upload-area:hover span {
    color: var(--qq-blue);
    font-weight: 600;
}
.image-preview { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    object-fit: cover;
    border-radius: inherit;
}
.hidden-file-input { display: none; }
#ai-editor-form .form-group label { 
    display: block; 
    margin-bottom: 10px; 
    font-weight: bold;
    color: var(--text-dark);
    font-size: 15px;
}
#ai-editor-form textarea { 
    width: 100%; 
    padding: 12px 15px; 
    border: 1px solid var(--glass-border); 
    border-radius: var(--radius-md); 
    font-size: 14px; 
    box-sizing: border-box;
    background: var(--glass-bg);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transition: all 0.3s ease;
}

#ai-editor-form textarea:focus {
    outline: none;
    border-color: var(--qq-blue);
    box-shadow: 0 0 0 3px rgba(80, 151, 205, 0.1);
}
#add-worldbook-entry-button { 
    width: 100%; 
    padding: 12px; 
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 2px dashed var(--glass-border); 
    border-radius: var(--radius-md); 
    cursor: pointer; 
    margin-top: 15px;
    transition: all 0.3s ease;
    color: var(--text-secondary);
}

#add-worldbook-entry-button:hover {
    border-color: var(--qq-blue);
    background: rgba(80, 151, 205, 0.1);
    color: var(--qq-blue);
    transform: translateY(-1px);
}
#save-ai-profile-button { 
    width: 100%; 
    padding: 15px; 
    margin-top: 25px; 
    background: var(--gradient-primary); 
    color: white; 
    border: none; 
    border-radius: var(--radius-md); 
    font-size: 16px; 
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(80, 151, 205, 0.3);
    transition: all 0.3s ease;
}

#save-ai-profile-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(80, 151, 205, 0.4);
}
.worldbook-entry { 
    display: flex; 
    flex-direction: column; 
    gap: 8px; 
    margin-bottom: 15px; 
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    padding: 15px; 
    border-radius: var(--radius-md);
    box-shadow: 0 2px 8px rgba(80, 151, 205, 0.1);
}
.worldbook-header { 
    display: flex; 
    gap: 12px;
    align-items: center;
}
.worldbook-entry .worldbook-key { 
    flex: 1; 
    padding: 10px; 
    border: 1px solid var(--glass-border); 
    border-radius: var(--radius-sm); 
    font-weight: bold;
    background: var(--glass-bg);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}
.worldbook-entry .worldbook-value { 
    width: 100%; 
    padding: 10px; 
    border: 1px solid var(--glass-border); 
    border-radius: var(--radius-sm); 
    min-height: 60px; 
    resize: vertical; 
    box-sizing: border-box; 
    font-family: inherit; 
    font-size: 14px;
    background: var(--glass-bg);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}
.worldbook-delete-btn { 
    background: linear-gradient(135deg, #f44336, #EF5350); 
    color: white; 
    border: none; 
    border-radius: var(--radius-sm); 
    cursor: pointer; 
    padding: 8px 12px; 
    font-size: 18px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(244, 67, 54, 0.3);
}

.worldbook-delete-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(244, 67, 54, 0.4);
}

/* --- 用户信息弹窗样式 --- */
/* ▼▼▼ 【【【终极修复：在这里解决键盘弹起时的白屏闪动问题】】】 ▼▼▼ */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    /* 核心修改：从“垂直居中”改为“从顶部开始对齐”，为键盘留出空间 */
    align-items: flex-start;
    /* 核心新增：给顶部增加一点安全距离，防止紧贴屏幕边缘 */
    padding-top: 5vh;
    /* 核心新增：为最外层容器也加上滚动能力，作为最后一道防线 */
    overflow-y: auto;
    z-index: 1000;
}
.modal-content {
    background: var(--glass-bg);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid var(--glass-border);
    padding: 20px;
    border-radius: 8px;
    width: 90%;
    max-width: 320px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.25);
    display: flex;
    flex-direction: column;
    max-height: 85vh; /* 设置一个“天花板”，防止弹窗过高 */
}

/* --- 【【【全新：为全屏日记查看器“开特例”】】】 --- */
.modal-content.modal-fullscreen {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    background-color: #fff; /* 给一个纯白底色，防止透明 */
}
/* --- 【【【真正解决问题的终极修复代码】】】 --- */
/* 这段代码的作用是：专门针对日记窗口的“外框”，命令它放弃居中对齐的特性 */
#diary-viewer-modal .modal-content,
#diary-editor-modal .modal-content {
    overflow-y: auto; /* (解释：核心魔法！命令整个“画框”变成可以滚动的“画卷”) */
}
#diary-viewer-modal,
#diary-editor-modal {
    display: block; 
    align-items: initial; 
    justify-content: initial; 
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.modal-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    border-bottom: 1px solid var(--glass-border); 
    padding-bottom: 15px; 
    margin-bottom: 20px;
}
.modal-header h3 { 
    margin: 0; 
    font-size: 18px; 
    font-weight: 600;
    color: var(--text-dark);
}
.close-button { 
    /* 步骤2：让关闭按钮“自由悬浮”，脱离父容器的束缚 */
    position: absolute; 

    /* 【【【这就是您要的遥控器！！！】】】 */
    top: 5px;    /* 这是按钮距离【弹窗顶部】的距离 */
    right: 15px;  /* 这是按钮距离【弹窗右侧】的距离 */

    /* --- 以下是按钮本身的美化样式，保持不变 --- */
    background: none; 
    border: none; 
    font-size: 24px; 
    cursor: pointer; 
    color: var(--text-secondary);
    transition: all 0.3s ease;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 2px; /* 这一行是我额外加的，为了让叉号在圆圈里更居中一点 */
}

.close-button:hover {
    background: rgba(80, 151, 205, 0.1);
    color: var(--qq-blue);
    transform: scale(1.1);
}
.modal-body .form-group { 
    margin-bottom: 20px;
}

.modal-body p {
    color: var(--text-secondary);
    line-height: 1.6;
}
.modal-footer { 
    margin-top: 20px;
}
.modal-footer button { 
    width: 100%; 
    padding: 12px; 
    border: none; 
    border-radius: var(--radius-md); 
    background: var(--gradient-primary); 
    color: white; 
    font-size: 16px; 
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(80, 151, 205, 0.3);
    transition: all 0.3s ease;
}

.modal-footer button:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(80, 151, 205, 0.4);
}
/* 【新增】左右分割的弹窗底部按钮样式 */
.modal-footer-split {
    display: flex;
    gap: 15px; /* 按钮之间的间距 */
    border-top: none;
    justify-content: center; /* 让按钮们在横向上居中 */
    align-items: center; /* 让按钮们在垂直方向上也对齐（如果高度不一的话） */
    padding-top: 15px; /* 增加一点上边距，让按钮和内容区有呼吸感 */
}

.modal-button {
    flex: 1; /* 魔法！让每个按钮都占据一份空间，实现均分 */
    max-width: 180px; /* 给按钮一个“最大宽度”上限，防止在宽屏上拉得太长 */
    padding: 12px; /* 稍微减小一点内边距，让按钮更精致 */
    border: none;
    background: none;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    transition: all 0.3s ease;
    white-space: nowrap;
    border-radius: 8px; /* 顺便给按钮加上一点圆角，更好看 */
    
    /* ▼▼▼ 【【【终极修复：安装“智能居中机器人”】】】 ▼▼▼ */
    display: flex;             /* 指令1：给按钮通电，让它变成一个Flexbox容器 */
    justify-content: center;   /* 指令2：命令它把内部所有东西都水平居中 */
    /* ▲▲▲ 【【【安装完毕！我们不再需要 text-align: center; 了】】】 ▲▲▲ */
}
.modal-button.secondary {
    color: var(--text-secondary);
    /* 【核心改造】把这条多余的右边框删掉 */
    /* border-right: 1px solid var(--glass-border); */
    transition: all 0.3s ease;
}
.modal-button.secondary:hover {
    background: rgba(80, 151, 205, 0.1);
    border-radius: var(--radius-sm);
}
.modal-button.primary {
    color: var(--qq-blue);
    font-weight: 600;
    transition: all 0.3s ease;
}

.modal-button.primary:hover {
    background: rgba(80, 151, 205, 0.1);
    border-radius: var(--radius-sm);
    transform: scale(1.02);
}
.image-upload-area.user-avatar-upload { 
    width: 80px; 
    height: 80px; 
    border-radius: var(--radius-full); 
    margin: 0 auto;
    border: 3px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 15px rgba(80, 151, 205, 0.3);
}

/* --- 底部导航栏 --- */
#app-nav { 
    position: relative; 
    flex-shrink: 0; 
    width: 100%; 
    height: var(--nav-height); 
    
    /* 毛玻璃效果导航栏 */
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--glass-border);
    box-shadow: 0 -4px 20px rgba(80, 151, 205, 0.1); 
    display: flex; 
    z-index: 10; 
}
.nav-button { 
    flex: 1; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    cursor: pointer; 
    color: var(--text-secondary); 
    font-size: 14px;
    padding: 8px 0;
    transition: all 0.3s ease;
    border-radius: var(--radius-sm);
    margin: 0 4px;
}

.nav-button:hover {
    background: rgba(80, 151, 205, 0.1);
    color: var(--qq-blue);
}
.nav-button.active { 
    color: var(--qq-blue); 
    background: rgba(80, 151, 205, 0.15);
    font-weight: 600;
}
/* --- 聊天时间戳样式 (请将此段代码粘贴到 style.css 文件末尾) --- */
.timestamp-display {
    text-align: center;
    color: var(--text-secondary);
    font-size: 12px;
    padding: 8px 0;
}
/* 用户发送的真实图片消息样式 */
.message-image-user {
    padding: 5px !important;
    background-color: transparent !important;
    max-width: 150px;
    box-shadow: none !important;
}
.message-image-user img {
    width: 100%;
    border-radius: 8px;
    display: block;
    cursor: pointer;
}
.user-row .message-image-user::after {
    display: none; /* 用户图片不需要聊天箭头 */
}

/* AI 发送的 “图片已被坐塌” 样式 */
.message-image-ai {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px !important;
    border: 2px solid #e0e0e0;
    cursor: pointer;
    background-color: #f9f9f9 !important;
    min-width: 180px;
    text-align: center;
}
.message-image-ai .placeholder-icon {
    width: 80px;
    height: auto;
    opacity: 0.6;
}
.message-image-ai .placeholder-text {
    margin-top: 10px;
    font-size: 14px;
    color: #555;
    font-weight: bold;
}

/* 上传弹窗里的预览区域微调 */
#user-image-upload-area {
    width: 100px;
    height: 100px;
}
/* --- (新增) 聊天图片上传预览框样式 --- */
#user-image-upload-area {
    width: 120px;
    height: 120px;
    border-radius: 8px; /* 方形带圆角 */
    margin: 0 auto 15px; /* 居中并与下方输入框拉开距离 */
}
/* --- (新增) AI 直接发送图片的样式 --- */
.message-image-ai-direct {
    padding: 5px !important; /* 只需要一点内边距 */
    background-color: transparent !important; /* 背景透明 */
    max-width: 150px; /* 限制最大宽度，防止图片过大 */
    box-shadow: none !important; /* 去掉默认的气泡阴影 */
    cursor: pointer; /* 鼠标悬停时显示为小手，提示可点击 */
    border-radius: 10px; /* 确保容器有圆角 */
    overflow: hidden; /* 隐藏内部图片溢出的部分 */
}

.message-image-ai-direct img {
    width: 100%; /* 图片宽度撑满容器 */
    display: block; /* 消除图片下方的微小间隙 */
    border-radius: 8px; /* 给图片本身也加个小圆角 */
}

/* 确保AI图片气泡的箭头也能正常显示 */
.assistant-row .message-image-ai-direct::before {
    content: ''; 
    position: absolute; 
    left: -8px;
    top: 12px; 
    width: 0; 
    height: 0; 
    border-style: solid; 
    border-width: 6px 8px 6px 0; 
    /* 箭头颜色应与聊天背景色一致，或白色 */
    border-color: transparent var(--background-white) transparent transparent; 
    z-index: 1;
}
/* --- (新增) 聊天设置页图标占位符样式 --- */
.settings-item-icon-placeholder {
    width: 40px;  /* 尺寸与聊天头像保持一致 */
    height: 40px; /* 尺寸与聊天头像保持一致 */
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    color: var(--qq-blue);
    background-color: #f0f2f5;
    border-radius: 50%; /* 核心修改：50% 即可变成完美的圆形 */
    /* margin-right: 12px; (这个间距由父元素的 gap 控制，可以省略) */
}
/* --- (全新) AI帮回/建议面板样式最终版 V4 --- */

/* (核心修改1) 给建议面板增加右内边距，为刷新按钮“预留”空间 */
#ai-suggestion-panel {
    padding: 10px 15px; /* (核心修复) 恢复左右对称的内边距 */
    background-color: var(--background-light);
    border-top: 1px solid var(--border-color);
    position: relative; 
}

.suggestion-buttons-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* 刷新按钮容器不再需要，可以删除其样式 */
/* #refresh-suggestions-container { ... } */

#refresh-suggestions-btn {
    position: absolute;
    bottom: 10px; /* 微调位置 */
    right: 10px;  /* 微调位置 */
    width: 36px;  /* 放大按钮 */
    height: 36px; /* 放大按钮 */
    border: none;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease, opacity 0.3s ease;
    opacity: 0.5;
}
/* (核心修改3) 鼠标悬停或点击时，完全不透明 */
#ai-suggestion-panel:hover #refresh-suggestions-btn,
#refresh-suggestions-btn:active {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.2);
}

#refresh-suggestions-btn svg {
    width: 20px;  /* 放大图标 */
    height: 20px; /* 放大图标 */
    stroke: white; /* 图标改为白色，在深色背景上更清晰 */
    stroke-width: 2.5;
}

#refresh-suggestions-btn.spinning {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
/* --- (新增) 删除按钮及自定义弹窗样式 --- */

/* 步骤1: 定义通用的危险文字样式（比如“清空聊天记录”），让它保持红色文字 */
.settings-item .danger {
    color: #e53935;
    width: 100%;
    text-align: center;
}

/* 步骤2: 专门为“删除角色”按钮本身设置红色的背景 */
#cs-delete-contact {
    background-color: #e53935; /* 核心修改：背景变为红色 */
    transition: background-color 0.2s; /* 让颜色变化更平滑 */
}

/* 步骤3: 覆盖“删除角色”按钮内部的文字颜色，让它变成白色 */
#cs-delete-contact .danger {
    color: white; /* 核心修改：文字变为白色 */
    font-weight: bold; /* 加粗文字，更醒目 */
}

/* (可选) 步骤4: 添加一个漂亮的鼠标悬停效果 */
#cs-delete-contact:hover {
    background-color: #d32f2f; /* 鼠标放上去时，背景变成更深的红色 */
}
/* --- 【全新】红包系统样式 --- */

/* 聊天气泡里的红包样式 */
.message-red-packet {
    background-color: #fa9d3b; /* 红包橙红色 */
    color: white;
    padding: 15px !important;
    width: 240px;
    cursor: pointer;
    border-radius: 8px !important;
    transition: background-color 0.2s;
    position: relative;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.message-red-packet:hover {
    background-color: #f98e22;
}

.message-red-packet.opened {
    background-color: #fcd7b6; /* 已领取后的颜色 */
    cursor: default;
}

.rp-bubble-content {
    display: flex;
    align-items: center;
    gap: 12px;
}
.rp-bubble-icon {
    font-size: 36px;
    flex-shrink: 0;
}
.rp-bubble-info p {
    margin: 0;
    font-size: 16px;
    font-weight: bold;
}
.rp-bubble-info span {
    font-size: 13px;
    opacity: 0.9;
}

/* 红包详情弹窗样式 */
.red-packet-content {
    background-color: #f7f7f7;
    width: 100%;
    max-width: 360px; /* 匹配app宽度 */
    height: 100%;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
}
.red-packet-content .close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #fff;
    font-size: 28px;
    z-index: 2;
}
.rp-header {
    background: linear-gradient(180deg, #e85a57 0%, #d94f4c 100%);
    text-align: center;
    padding: 40px 20px 20px;
    color: white;
    flex-shrink: 0;
}
.rp-header .avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    margin-bottom: 8px;
}
.rp-header p { margin: 4px 0; }
#rp-sender-name { font-size: 15px; opacity: 0.9; }
#rp-blessing { font-size: 18px; }
.rp-amount-line {
    font-size: 48px;
    font-weight: bold;
    margin: 15px 0;
}
.rp-currency { font-size: 30px; margin-right: 5px;}
.rp-status-text { font-size: 14px; color: #ffd76a; }

.rp-footer {
    flex-grow: 1;
    overflow-y: auto;
    background-color: white;
    padding: 10px 15px;
}
.receiver-item {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
}
.receiver-item .avatar { width: 40px; height: 40px; }
.receiver-info {
    flex-grow: 1;
    margin: 0 12px;
}
.receiver-name { display: block; font-size: 15px; color: #333; }
.receiver-time { display: block; font-size: 12px; color: #999; }
.receiver-amount { font-size: 15px; font-weight: bold; color: #333; }

/* 领取红包后的系统提示消息 */
.system-message {
    text-align: center;
    color: #999;
    font-size: 12px;
    padding: 8px 0;
    width: 100%;
}

/* 自定义弹窗内的文本样式 */
#custom-confirm-text, #custom-alert-text {
    line-height: 1.6;
    font-size: 15px;
    white-space: pre-wrap;
}
/* --- 【全新】红包系统样式 --- */

/* 聊天气泡里的红包样式 */
.message-red-packet {
    background-color: #fa9d3b; /* 红包橙红色 */
    color: white;
    padding: 15px !important;
    width: 240px;
    cursor: pointer;
    border-radius: 8px !important;
    transition: background-color 0.2s;
    position: relative;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.message-red-packet:hover {
    background-color: #f98e22;
}

/* 已领取的红包样式 */
.message-red-packet.opened {
    background-color: #fcd7b6; /* 已领取后的颜色 */
    cursor: default;
}

.rp-bubble-content {
    display: flex;
    align-items: center;
    gap: 12px;
}
.rp-bubble-icon {
    font-size: 36px;
    flex-shrink: 0;
}
.rp-bubble-info p {
    margin: 0;
    font-size: 16px;
    font-weight: bold;
}
.rp-bubble-info span {
    font-size: 13px;
    opacity: 0.9;
}

/* 红包详情弹窗样式 (全屏模态框) */
.red-packet-content {
    background-color: #f7f7f7;
    width: 100%;
    max-width: 360px; /* 匹配app宽度 */
    height: 100%;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
}
.red-packet-content .close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #fff;
    font-size: 28px;
    z-index: 2;
    background: none;
    border: none;
    cursor: pointer;
}
.rp-header {
    background: linear-gradient(180deg, #e85a57 0%, #d94f4c 100%);
    text-align: center;
    padding: 40px 20px 20px;
    color: white;
    flex-shrink: 0;
}
.rp-header .avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    margin-bottom: 8px;
}
.rp-header p { margin: 4px 0; }
#rp-sender-name { font-size: 15px; opacity: 0.9; }
#rp-blessing { font-size: 18px; font-weight: bold; }
.rp-amount-line {
    font-size: 48px;
    font-weight: bold;
    margin: 15px 0;
}
.rp-currency { font-size: 30px; margin-right: 5px;}
.rp-status-text { font-size: 14px; color: #ffd76a; }

.rp-footer {
    flex-grow: 1;
    overflow-y: auto;
    background-color: white;
    padding: 10px 15px;
}
.receiver-item {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
}
.receiver-item .avatar { width: 40px; height: 40px; }
.receiver-info {
    flex-grow: 1;
    margin: 0 12px;
}
.receiver-name { display: block; font-size: 15px; color: #333; }
.receiver-time { display: block; font-size: 12px; color: #999; }
.receiver-amount { font-size: 15px; font-weight: bold; color: #333; }

/* 领取红包后的系统提示消息 (参考图4) */
.system-message {
    text-align: center;
    color: #999;
    font-size: 12px;
    padding: 8px 0;
    width: 100%;
}
/* --- 【【【核心新增：表情包系统样式】】】 --- */

/* 聊天气泡中的表情包消息样式 */
.message-sticker {
    padding: 0 !important; /* 无内边距 */
    background-color: transparent !important; /* 背景透明 */
    box-shadow: none !important; /* 无阴影 */
    max-width: 120px; /* 限制最大宽度 */
    overflow: hidden;
}
.message-sticker img {
    width: 100%;
    display: block;
}
.user-row .message-sticker::after, .assistant-row .message-sticker::before {
    display: none; /* 表情包消息不需要聊天箭头 */
}

/* 底部滑出的表情包面板 */
.sticker-panel {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 220px; /* 面板高度 */
    background-color: #f0f2f5;
    border-top: 1px solid var(--border-color);
    overflow-y: auto;
    padding: 10px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); /* 响应式网格布局 */
    gap: 10px;
    z-index: 50;
    transition: transform 0.3s ease-in-out;
    transform: translateY(100%); /* 【修改1】默认状态就是隐藏在屏幕下方 */
}

/* 【修改2】新增一个 .is-open 类，当拥有它时，面板就会滑上来 */
.sticker-panel.is-open {
    transform: translateY(0);
}

/* 网格中的单个表情包样式 */
.sticker-item {
    width: 70px;
    height: 70px;
    background-color: white;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.sticker-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
/* 网格中的“添加”按钮 */
.sticker-add-btn {
    border: 2px dashed var(--border-color);
    background-color: #fafafa;
    font-size: 30px;
    color: var(--text-secondary);
}
/* --- (全新) AI表情包管理页面样式 --- */
#sticker-manager-container {
    flex-grow: 1;
    overflow-y: auto;
    padding: 15px;
    background-color: var(--background-light);
}
.sticker-group-card {
    background-color: white;
    border-radius: 8px;
    margin-bottom: 15px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.sticker-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    border-bottom: 1px solid #f0f0f0;
}
.sticker-group-header h4 {
    margin: 0;
    font-size: 16px;
}
.sticker-group-header .header-actions button {
    background: none;
    border: 1px solid var(--border-color);
    padding: 4px 8px;
    border-radius: 5px;
    cursor: pointer;
    margin-left: 8px;
    font-size: 13px;
}
.sticker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    gap: 10px;
    padding: 15px;
}
.sticker-manager-item {
    position: relative;
    width: 70px;
    height: 70px;
    background-color: #f0f2f5;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
}
.sticker-manager-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.sticker-delete-btn {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 20px;
    height: 20px;
    background-color: #e53935;
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    opacity: 0;
    transition: opacity 0.2s;
}
.sticker-manager-item:hover .sticker-delete-btn {
    opacity: 1;
}
.sticker-add-placeholder {
    border: 2px dashed var(--border-color);
    cursor: pointer;
    font-size: 24px;
    color: var(--text-secondary);
}
.button-like-label {
    display: inline-block;
    padding: 10px 15px;
    background-color: var(--qq-blue);
    color: white;
    border-radius: 5px;
    cursor: pointer;
    text-align: center;
}
.sticker-preview-area {
    width: 100px;
    height: 100px;
    margin: 0 auto 15px;
}
/* --- (全新) AI信息页-表情包分组选择样式 --- */
#ai-sticker-groups-container {
    display: flex;
    flex-direction: column; /* 让每个条目竖直排列 */
    gap: 12px; /* 增加条目之间的间距 */
}

.checkbox-item {
    display: flex; /* 启用flex布局，这是对齐的关键 */
    align-items: center; /* 垂直居中对齐 */
    cursor: pointer;
}

.checkbox-item input[type="checkbox"] {
    width: 20px; /* 放大复选框 */
    height: 20px; /* 放大复选框 */
    margin-right: 10px; /* 让复选框和文字之间有空隙 */
}

.checkbox-item label {
    font-size: 16px; /* 调整文字大小 */
}
/* --- (终极修复) AI信息页-表情包分组选择样式 --- */
#ai-sticker-groups-container {
    display: flex;
    flex-direction: column; 
    gap: 15px; /* 增加条目之间的上下间距 */
}

.checkbox-item {
    display: flex; 
    align-items: center; /* 垂直居中对齐 */
    cursor: pointer;
}

.checkbox-item input[type="checkbox"] {
    /* 重置默认样式，确保它不影响布局 */
    -webkit-appearance: none;
    appearance: none;
    margin: 0;

    /* 手动绘制方框 */
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    border-radius: 4px;
    
    /* 【【【魔法就在这里！！！】】】 */
    flex-shrink: 0; /* 命令它：绝对不许收缩！ */

    position: relative; 
    margin-right: 12px; /* 与文字的间距 */
    cursor: pointer;
}

/* 绘制“打勾”后的样式 */
.checkbox-item input[type="checkbox"]:checked {
    background-color: var(--qq-blue);
    border-color: var(--qq-blue);
}

/* 用伪元素绘制那个“√”号 */
.checkbox-item input[type="checkbox"]:checked::before {
    content: '✔';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 14px;
    font-weight: bold;
}

.checkbox-item label {
    font-size: 16px;
    /* 确保label本身没有多余的边距影响对齐 */
    margin: 0; 
    padding: 0;
}
/* --- (全新) AI实时状态显示样式 (V2 - 修复版) --- */
/* 步骤1: 让整行状态文字（包括“在线”和新状态）都变成普通字体 */
#chat-ai-status-line {
    font-weight: normal; 
}

/* 步骤2: 精细调整新状态的样式 */
#chat-ai-activity-status {
    font-size: 12px;     /* 保持你设置的小字号 */
    margin-left: 1px;    /* 采用你调整的间距 */
    opacity: 0.9;        
}

/* 步骤3: 保留自动添加“-”的小魔法 */
#chat-ai-activity-status:not(:empty)::before {
    content: "- ";
    margin-right: 2px;
}
/* --- (全新) 记忆总结功能区样式 --- */
.auto-summary-setting {
    display: flex;
    align-items: center;
    gap: 10px;
}
#cs-auto-summary-threshold {
    width: 60px;
    padding: 4px 8px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    text-align: center;
}
#cs-message-count {
    font-weight: bold;
    color: var(--qq-blue);
}

/* --- (全新) 记忆总结弹窗样式 --- */
.modal-content.modal-lg {
    max-width: 340px; /* 让弹窗更宽一点 */
}
#summary-editor-textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    font-family: 'Courier New', Courier, monospace; /* 使用等宽字体，方便看YAML */
    font-size: 13px;
    line-height: 1.6;
    resize: vertical;
}
.summary-status {
    font-size: 13px;
    color: #4CAF50;
    text-align: center;
    height: 15px; /* 预留高度防止跳动 */
    margin-top: 5px;
}
/* --- (全新) 自动总结UI交互样式 --- */
.summary-threshold-display {
    padding: 4px 12px;
    border: 1px solid transparent; /* 占位边框 */
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    color: var(--qq-blue);
    background-color: #f0f2f5;
}
.summary-threshold-display:hover {
    border-color: var(--border-color);
}
.summary-threshold-input {
    width: 60px;
    padding: 4px 8px;
    border: 1px solid var(--qq-blue); /* 显示时用醒目边框 */
    border-radius: 5px;
    text-align: center;
    -moz-appearance: textfield; /* 隐藏数字输入框的上下箭头 */
}
.summary-threshold-input::-webkit-outer-spin-button,
.summary-threshold-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* --- (全新) 模式选择弹窗样式 --- */
.mode-select-buttons {
    display: flex;
    flex-direction: column; /* 按钮竖直排列 */
    gap: 10px; /* 按钮之间的间距 */
    margin-top: 15px;
}
.mode-select-buttons .modal-button {
    width: 100%;
    padding: 12px;
    border-radius: 5px;
    border: 1px solid var(--border-color);
    font-weight: bold;
}
.mode-select-buttons .modal-button.primary {
    background-color: var(--qq-blue);
    color: white;
    border-color: var(--qq-blue);
}
.mode-select-buttons .modal-button.secondary {
    background-color: white;
    color: #333;
}
/* --- (全新) 全局Toast提示样式 --- */
#global-toast {
    position: fixed; /* 固定在屏幕上 */
    top: 0;
    left: 50%;
    transform: translate(-50%, -100%); /* 默认藏在屏幕顶上 */
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    color: var(--text-dark);
    padding: 15px 25px;
    border-radius: 0 0 var(--radius-xl) var(--radius-xl); /* 底部圆角 */
    z-index: 9999; /* 确保在最顶层 */
    font-size: 14px;
    transition: all 0.4s ease-in-out;
    box-shadow: var(--glass-shadow);
}

#global-toast.show {
    transform: translate(-50%, 20px); /* 滑入到屏幕内 */
}

#global-toast.success {
    background: linear-gradient(135deg, #4CAF50, #66BB6A);
    color: white;
}

#global-toast.error {
    background: linear-gradient(135deg, #f44336, #EF5350);
    color: white;
}
/* --- (全新) 情侣关系标志样式 --- */
.partner-icon {
    margin-left: 6px;
    font-size: 14px; /* 可以调整大小 */
    filter: drop-shadow(0 0 1px rgba(0,0,0,0.3)); /* 给图标一点立体感 */
}
/* --- (全新) 关系卡片 V2.0 样式 --- */
.message-relationship-card {
    background: var(--glass-bg);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 20px !important;
    width: 250px;
    box-shadow: 0 4px 20px rgba(80, 151, 205, 0.15);
}
.relationship-card-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.relationship-card-text h4 {
    margin: 0 0 5px 0;
    font-size: 16px;
}
.relationship-card-text p {
    margin: 0;
    font-size: 13px;
    color: #8e8e93;
}
.relationship-card-icon img {
    width: 50px;
    height: 50px;
}
.relationship-card-footer {
    border-top: 1px solid #e9e9eb;
    margin-top: 12px;
    padding-top: 8px;
    font-size: 12px;
    color: #b2b2b2;
}
.relationship-card-actions {
    margin-top: 15px;
    display: flex;
    gap: 10px;
}
.relationship-card-actions button {
    flex: 1;
    padding: 10px;
    border-radius: var(--radius-md);
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s ease;
}
.relationship-card-actions button.accept {
    background: var(--gradient-primary);
    color: white;
    border-color: var(--qq-blue);
    box-shadow: 0 4px 15px rgba(80, 151, 205, 0.3);
}
.relationship-card-actions button:disabled {
    background-color: #e0e0e0;
    color: #a0a0a0;
    cursor: not-allowed;
    border-color: #d0d0d0;
}
/* --- (全新 V2.2) 分手卡片样式 --- */
.message-breakup-card {
    background: var(--glass-bg);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 20px !important;
    width: 250px;
    box-shadow: 0 4px 20px rgba(80, 151, 205, 0.15);
}
.message-breakup-card h4 {
    margin: 0;
    color: #555;
}
/* --- (全新) 文本编辑弹窗样式 --- */
#text-editor-textarea {
    width: 100%;
    padding: 15px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    font-size: 15px;
    line-height: 1.6;
    resize: vertical;
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

#text-editor-textarea:focus {
    outline: none;
    border-color: var(--qq-blue);
    box-shadow: 0 0 0 3px rgba(80, 151, 205, 0.1);
}
/* --- 【全新】消息列表页专属顶部样式 --- */
.main-header {
    height: auto; /* 高度自适应 */
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--glass-border);
    color: var(--text-light); /* 【核心修正】文字颜色恢复为亮色 */
    padding: 15px 20px;
    flex-shrink: 0;
    display: flex;
    align-items: center; /* 垂直居中 */
    box-shadow: var(--glass-shadow);
    position: relative; /* 为了+号按钮定位 */
    z-index: 10;
}

.user-info-bar {
    display: flex;
    align-items: center;
    width: 100%;
    cursor: pointer;
}

.user-info-bar .avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    margin-right: 15px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 15px rgba(80, 151, 205, 0.3);
}

.user-details {
    display: flex;
    flex-direction: column;
}

#main-header-username {
    font-weight: bold;
    font-size: 16px;
}

.user-status {
    font-size: 12px;
    color: var(--text-light); /* 【核心修正】将颜色从深灰色改为亮色变量(白色) */
    display: flex;
    align-items: center;
}

.status-dot {
    width: 8px;
    height: 8px;
    background: linear-gradient(135deg, #4CAF50, #66BB6A);
    border-radius: 50%;
    margin-right: 6px;
    box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.3);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7); }
    70% { box-shadow: 0 0 0 6px rgba(76, 175, 80, 0); }
    100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0); }
}

#main-add-contact-button {
    color: var(--text-light); /* 加号按钮颜色改为亮色 */
    font-size: 32px;
    font-weight: bold;
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-full);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

#main-add-contact-button:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.search-bar-container {
    padding: 15px 20px;
    background: var(--glass-bg);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid var(--glass-border);
}

.search-input {
    width: 100%;
    padding: 12px 18px;
    border: none;
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    font-size: 15px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(80, 151, 205, 0.1);
}
.search-input::placeholder {
    color: var(--text-secondary);
    opacity: 0.7;
}


/* --- 【全新】侧滑菜单核心样式 --- */
#side-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 80%;
    max-width: 300px;
    height: 100%;
    background: var(--glass-bg);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border-right: 1px solid var(--glass-border);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    box-shadow: var(--glass-shadow);

    /* 核心：默认藏在左边屏幕外，并设置过渡动画 */
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
}

#side-menu.open {
    /* 核心：当有 .open 类时，滑入屏幕 */
    transform: translateX(0);
}

.side-menu-profile {
    padding: 30px 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
}

.side-menu-profile .avatar-large {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-full);
    border: 3px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 15px rgba(80, 151, 205, 0.3);
}

#side-menu-username {
    font-size: 18px;
    font-weight: bold;
    color: var(--text-dark);
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3);
}

.side-menu-list {
    padding: 0 15px;
    flex-grow: 1;
}

.side-menu-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 0;
    font-size: 16px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    border-radius: var(--radius-sm);
    margin: 0 10px;
    padding: 15px 10px;
}

.side-menu-item:last-child {
    border-bottom: none;
}

.side-menu-item:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateX(5px);
}

.side-menu-item .menu-icon {
    font-size: 20px;
    transition: all 0.3s ease;
}

.side-menu-item:hover .menu-icon {
    transform: scale(1.1);
}

.side-menu-footer {
    display: flex;
    justify-content: space-around;
    padding: 20px 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.05);
}

.side-menu-footer > span {
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 5px 10px;
    border-radius: var(--radius-sm);
}

.side-menu-footer > span:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--qq-blue);
}
/* --- 【全新】更多功能抽屉样式 --- */
.more-functions-drawer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 1500; /* 层级要比聊天界面高 */
    display: flex;
    justify-content: center;
    align-items: flex-end; /* 让内容从底部出现 */
    opacity: 0; /* 默认完全透明 */
    transition: opacity 0.3s ease-in-out;
}

/* 当抽屉显示时，改变透明度 */
.more-functions-drawer:not(.hidden) {
    opacity: 1;
}

.more-functions-content {
    background: var(--glass-bg);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid var(--glass-border);
    width: 100%;
    max-width: 360px; /* 限制最大宽度，和你的App主体一致 */
    padding: 25px 25px 15px;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0; /* 顶部圆角 */
    box-shadow: var(--glass-shadow);
    transform: translateY(100%); /* 默认藏在屏幕下方 */
    transition: transform 0.3s ease-in-out;
}

/* 当抽屉显示时，滑上来 */
.more-functions-drawer:not(.hidden) .more-functions-content {
    transform: translateY(0);
}

.more-functions-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4列网格布局 */
    gap: 25px; /*图标间距*/
    padding-bottom: 25px;
}

.function-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    text-align: center;
}

.function-icon {
    width: 56px;
    height: 56px;
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28px; /* Emoji图标大小 */
    box-shadow: 0 4px 15px rgba(80, 151, 205, 0.1);
    margin-bottom: 8px;
    transition: all 0.3s ease;
}

.function-item:hover .function-icon {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(80, 151, 205, 0.2);
    background: rgba(255, 255, 255, 0.3);
}

.function-label {
    font-size: 13px;
    color: var(--text-secondary);
    transition: all 0.3s ease;
}

.function-item:hover .function-label {
    color: var(--qq-blue);
    font-weight: 600;
}

.more-functions-footer {
    border-top: 1px solid var(--glass-border);
    margin: 0 -20px; /* 让分割线撑满宽度 */
    padding: 15px 20px 0;
    background: rgba(255, 255, 255, 0.05);
}

#close-functions-drawer-btn {
    width: 100%;
    padding: 15px;
    border: none;
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(80, 151, 205, 0.1);
}

#close-functions-drawer-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(80, 151, 205, 0.2);
}
/* --- 【全新 V2.0】扩展功能面板样式 --- */
#extended-functions-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--glass-border);
    max-height: 0;
    overflow: hidden; 
    transition: max-height 0.3s ease-in-out;
    box-shadow: 0 -4px 20px rgba(80, 151, 205, 0.15);
}

#extended-functions-panel.is-open {
    max-height: 250px; 
}

.more-functions-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    gap: 15px; /* 修改：缩小图标之间的间距 */
    row-gap: 20px; /* 稍微拉开上下行的距离 */
    padding: 20px; /* 修改：统一内边距，让布局更匀称 */
}

.function-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    text-align: center;
}

.function-icon {
    width: 48px;  /* 修改：将方框宽度从56px缩小到48px */
    height: 48px; /* 修改：将方框高度从56px缩小到48px */
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 15px rgba(80, 151, 205, 0.1);
    margin-bottom: 6px; /* 修改：缩小与下方文字的距离 */
    transition: all 0.3s ease;
}

.function-item:hover .function-icon {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(80, 151, 205, 0.2);
    background: rgba(255, 255, 255, 0.3);
}

.function-icon svg {
    width: 24px;  /* 修改：将图标宽度从28px缩小到24px */
    height: 24px; /* 修改：将图标高度从28px缩小到24px */
    stroke: var(--text-dark);
    transition: all 0.3s ease;
}

.function-item:hover .function-icon svg {
    stroke: var(--qq-blue);
    transform: scale(1.1);
}

.function-label {
    font-size: 12px; /* 修改：文字也稍微缩小一点，更协调 */
    color: var(--text-secondary);
    transition: all 0.3s ease;
}

.function-item:hover .function-label {
    color: var(--qq-blue);
    font-weight: 600;
}
/* --- 【全新】侧滑菜单遮罩层样式 --- */
.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 1999; /* 层级比内容高，但比侧边栏低 */
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

/* 当遮罩层需要显示时（即不再有.hidden类），让它淡入 */
.sidebar-overlay:not(.hidden) {
    opacity: 1;
}

/* --- 【全新】侧滑菜单SVG图标样式微调 --- */
.side-menu-item .menu-icon svg {
    width: 24px;
    height: 24px;
    stroke: var(--text-secondary);
    stroke-width: 2;
    transition: all 0.3s ease;
}

.side-menu-item:hover .menu-icon svg {
    stroke: var(--qq-blue);
    transform: scale(1.1);
}
/* --- 【【【布局微调：完美对齐侧边栏图标与文字】】】 --- */
.side-menu-item .menu-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    transition: all 0.3s ease;
}

.side-menu-item:hover .menu-icon {
    background: rgba(255, 255, 255, 0.1);
}
/* --- 【全新V2.0：搜索栏布局终极修复】 --- */
.search-bar {
    display: flex;
    align-items: center;
    position: relative;
    width: auto;
    background: var(--glass-bg);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    padding: 5px 15px;
    margin: 1px 2px 1px; /* 上下边距缩小，左右边距改为15px与列表对齐 */
    box-shadow: 0 4px 20px rgba(80, 151, 205, 0.15);
    transition: all 0.3s ease;
}
.search-bar:focus-within {
    box-shadow: 0 6px 25px rgba(80, 151, 205, 0.25);
    transform: translateY(-1px);
}

.search-icon {
    /* 移除所有定位代码 */
    flex-shrink: 0; /* 防止被压缩 */
    margin: 0 8px 0 12px; /* 设置外边距 */
    width: 20px;
    height: 20px;
    stroke: var(--text-secondary);
    opacity: 0.7;
}

.search-input {
    width: 100%;
    padding: 8px 15px;
    border: none;
    background-color: #f0f2f5;
    border-radius: 8px;
    font-size: 14px;
    text-align: center;
}
.search-input::placeholder {
    color: var(--text-secondary);
    opacity: 0.7;
}

/* 覆盖掉全局的 input 样式，确保搜索框没边框 */
#chat-list-view .search-input {
    border: none;
    padding-left: 0;
}
/* --- 【全新】搜索结果高亮 & 标签样式 --- */
.message-row--highlighted {
    background-color: #fff8e1 !important; /* 一个淡黄色作为高亮背景 */
    transition: background-color 0.5s ease;
}

.search-match-tag {
    background-color: #e0e0e0;
    color: #555;
    font-size: 10px;
    padding: 1px 4px;
    border-radius: 4px;
    margin-right: 4px;
}
/* --- 【全新】高级搜索筛选器样式 --- */
#toggle-filters-btn {
    position: absolute;
    right: 15px; /* 【关键修改】将5px增加到15px，按钮就向左移动了 */
    top: 50%;
    transform: translateY(-50%);
}
#toggle-filters-btn svg {
    stroke: var(--text-secondary);
    transition: all 0.3s ease;
}

#toggle-filters-btn:hover svg {
    stroke: var(--qq-blue);
    transform: scale(1.1);
}

.search-filters-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid var(--glass-border);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
    box-shadow: 0 4px 20px rgba(80, 151, 205, 0.1);
}
.filters-content {
    padding: 15px 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
/* 【全新】为筛选操作按钮添加样式 */
.filters-actions {
    display: flex;
    gap: 15px;
    padding: 15px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.filters-actions button {
    flex: 1;
    padding: 12px;
    border-radius: var(--radius-md);
    font-size: 14px;
    cursor: pointer;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(80, 151, 205, 0.1);
}

.filters-actions button:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(80, 151, 205, 0.2);
}
#apply-filters-btn {
    background: var(--gradient-primary);
    color: white;
    border-color: var(--qq-blue);
    box-shadow: 0 4px 15px rgba(80, 151, 205, 0.3);
}

.search-filters-panel.is-open {
    max-height: 270px; /* 【核心修复】将高度从150px增加到200px，确保按钮有足够空间显示 */
    padding-top: 10px;
    padding-bottom: 10px;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.filter-group label {
    font-size: 14px;
    color: var(--text-dark);
    font-weight: 600;
}
.filter-group select, .filter-group input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    font-size: 14px;
    background: var(--glass-bg);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transition: all 0.3s ease;
}

.filter-group select:focus, .filter-group input:focus {
    outline: none;
    border-color: var(--qq-blue);
    box-shadow: 0 0 0 3px rgba(80, 151, 205, 0.1);
}
/* --- 【全新】加载更多消息按钮样式 --- */
.load-more-btn {
    text-align: center;
    padding: 15px 0;
    font-size: 14px;
    color: var(--qq-blue);
    cursor: pointer;
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    margin: 10px 20px;
    opacity: 0.8;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(80, 151, 205, 0.1);
}
.load-more-btn:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(80, 151, 205, 0.2);
}
/* --- 【【【全新 V2.0：内置式AI思想气泡样式】】】 --- */

/* 1. 思想气泡消息行的特殊布局 */
.thought-bubble-row {
    justify-content: flex-start; /* 确保它出现在左边 */
    /* 【【【终极修复 V2.0】】】恢复合理的左右内边距，确保对称且不贴边 */
    padding-left: 40px; 
    padding-right: 40px;
    position: relative;
    margin: 10px 0;
    box-sizing: border-box; /* 确保内边距不会撑大布局 */
    width: 100%;
}

/* 2. 思想气泡本身 */
.thought-bubble-message {
    background: #f0f4f8; /* 一个淡淡的、特殊的背景色 */
    color: #555;
    padding: 15px 22px; 
    
    /* 【【【核心修复2】】】彻底删除最大宽度的限制！让它自由生长！ */
    /* max-width: calc(100% - 60px);  <-- 这行代码被我们删除了 */

    border-radius: 24px; 
    font-size: 14px;
    position: relative;
    border: 1px solid #e0e4e8;
    font-style: italic; /* 用斜体来区分心声和对话 */
    width: 100%; /* 【【【核心新增】】】让气泡主动撑满它的包装盒 */
    box-sizing: border-box; /* 确保padding不会让它溢出包装盒 */
}

.thought-bubble-message::before {
    content: '';
    position: absolute;
    bottom: -1px;
    left: -28px;
    width: 30px;
    height: 30px;
    /* 
       ↓ ↓ ↓ 在这里修改椭圆的参数！↓ ↓ ↓ 
       第一个 <ellipse> 是【大】椭圆 (更靠右下)
       第二个 <ellipse> 是【小】椭圆 (更靠左上)
    */
            background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cellipse cx='60' cy='50' rx='25' ry='18' fill='%23f0f4f8' stroke='%23e0e4e8' stroke-width='3'/%3E%3Cellipse cx='18' cy='80' rx='18' ry='13' fill='%23f0f4f8' stroke='%23e0e4e8' stroke-width='3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
}
/* 1. 让心声文字自然铺满整个气泡 */
.thought-bubble-message .thought-text {
    display: block;
    /* 【核心修正】移除这堵“无形的墙”，让文字自由流动！ */
    /* padding-right: 25px; */ /* <-- 我们把这行删掉或注释掉 */
}

/* 2. 思想气泡关闭按钮“瘦身美颜”计划 (终极对齐版) */
.thought-bubble-close-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 18px;
    height: 18px;
    background: rgba(0,0,0,0.1);
    border: none;
    border-radius: 50%;
    color: #aeaeae;
    font-size: 14px;
    font-weight: normal;

    /* --- 【核心修正：使用 Flexbox 实现完美居中】 --- */
    display: flex;             /* 1. 启用 Flexbox 布局 */
    justify-content: center;   /* 2. 水平居中 */
    align-items: center;       /* 3. 垂直居中 */
    /* 我们不再需要 line-height 和 text-align 了 */

    cursor: pointer;
    opacity: 0;
    transition: all 0.2s ease-in-out;
}

/* 3. 悬停时按钮浮现 (保持不变) */
.thought-bubble-row:hover .thought-bubble-close-btn {
    opacity: 1;
}

/* 4. (可选) 悬停在按钮本身上时，让它更明显一点 */
.thought-bubble-close-btn:hover {
    background: rgba(0,0,0,0.3);
    color: white; /* 悬停时叉号变白，更清晰 */
}
/* --- 【全新】记账卡片样式 --- */
.message-accounting-card {
    background: var(--glass-bg);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 20px !important;
    width: 250px;
    box-shadow: 0 4px 20px rgba(80, 151, 205, 0.15);
}

.accounting-card-header {
    display: flex;
    align-items: center;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.accounting-card-header .icon {
    /* --- 【终极对齐方案 V3.0：使用 transform 进行亚像素级微调】 --- */
    transform: translateY(2.5px); /* 把它往下平移 1.5个像素 */
}
.accounting-card-header h4 {
    margin: 0 0 0 10px;
    font-size: 16px;
    color: white;
}

.accounting-item-list {
    display: flex;
    flex-direction: column;
    gap: 12px; /* 增加每条账目之间的上下间距 */
}

/* 这是每一条账目的主容器，负责左右分离 */
.accounting-item {
    display: flex;
    justify-content: space-between; /* 让信息区和金额左右对齐 */
    align-items: flex-start; /* 顶部对齐，防止备注过长时金额也跟着往下跑 */
}
/* 这是左边的信息区，负责把项目和备注垂直堆叠 */
.accounting-item-info {
    display: flex;
    flex-direction: column;
    gap: 4px; /* 项目和备注之间的微小间距 */
}

.accounting-item .item-name {
    font-size: 15px; /* 可以微调字体大小 */
    color: white; 
    font-weight: 500;
}

.accounting-item .item-amount {
    font-weight: bold;
    font-size: 15px;
    flex-shrink: 0; /* 防止金额被压缩换行 */
    padding-left: 10px; /* 与信息区保持一点距离 */
}
.accounting-item .item-amount.income {
    color: #a5d6a7; /* 收入用更柔和的绿色 */
}
.accounting-item .item-amount:not(.income) {
    color: white; /* 支出也用白色，保持统一 */
}

/* 备注的样式 */
.accounting-item-remarks {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    font-style: italic;
    /* 无需再设置padding-left，因为它会自动对齐 */
}
/* --- 【全新】账本视图样式 --- */
#ledger-container {
    padding-top: 15px;
}

.ledger-item {
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    margin: 0 15px 15px;
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 15px rgba(80, 151, 205, 0.1);
}
/* ▼▼▼ 【【【核心修正：为列表底部增加“安全空间”】】】 ▼▼▼ */
#ledger-container {
    /* 增加100px的底部内边距，确保最后一条记录也能被完全滚动上来，不会被悬浮按钮遮挡 */
    padding-bottom: 100px; 
}

.ledger-item-details {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-grow: 1;
}

.ledger-item-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ledger-item-header .desc {
    font-size: 16px;
    font-weight: bold;
}

.ledger-item-header .amount {
    font-size: 16px;
    font-weight: bold;
    color: #e53935; /* 支出用红色突出 */
}

.ledger-item-meta {
    font-size: 12px;
    color: var(--text-secondary);
}

.ledger-item-meta .remarks {
    margin-left: 10px;
    font-style: italic;
}

.ledger-item-actions button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    color: var(--text-secondary);
}
/* --- 【全新】账本收入样式 & 类型选择器 --- */
.ledger-item-header .amount.income {
    color: #4CAF50; /* 收入用绿色突出 */
}

.type-selector {
    display: flex;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.type-selector .type-button {
    flex: 1;
    padding: 10px;
    border: none;
    background-color: transparent;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    color: var(--text-secondary);
    transition: all 0.2s ease-in-out;
}

.type-selector .type-button.active {
    background-color: var(--qq-blue);
    color: white;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}
/* --- 【全新】记账卡片备注样式 --- */
.accounting-entry {
    display: flex;
    flex-direction: column;
}
.accounting-item-remarks {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7); /* 半透明的白色 */
    padding-left: 5px;
    margin-top: 2px;
    font-style: italic;
}
/* --- 【全新】带标签页的表情包面板样式 --- */
.sticker-panel {
    padding: 0; /* 移除旧的内边距，由内部元素控制 */
    display: flex;
    flex-direction: column;
    height: 250px; /* 可以适当增加高度 */
}
.sticker-panel-tabs {
    display: flex;
    flex-shrink: 0;
    overflow-x: auto;
    border-bottom: 1px solid var(--border-color);
    background-color: #f8f8f8;
}
.sticker-tab-btn {
    padding: 10px 15px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-secondary);
    white-space: nowrap;
    position: relative;
}
.sticker-tab-btn.active {
    color: var(--qq-blue);
    font-weight: bold;
}
.sticker-tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 2px;
    background-color: var(--qq-blue);
}
.sticker-panel-content {
    flex-grow: 1;
    overflow-y: auto;
    position: relative;
}
.sticker-tab-content {
    display: none; /* 默认所有内容都隐藏 */
    padding: 10px; /* 统一给内容区加上内边距 */
}
.sticker-tab-content.active {
    display: grid; /* 只有激活的才显示为网格布局 */
}
/* --- 【全新】V3.0 超级上传弹窗样式 --- */
.upload-mode-tabs {
    display: flex;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
}
.tab-button {
    flex: 1;
    padding: 10px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 16px;
    color: var(--text-secondary);
    position: relative;
}
.tab-button.active {
    color: var(--qq-blue);
    font-weight: bold;
}
.tab-button.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--qq-blue);
}
.upload-panels-container {
    min-height: 200px;
}
.upload-panel {
    display: none; /* 默认所有面板都隐藏 */
}
.upload-panel.active {
    display: block; /* 只有激活的才显示 */
}

/* 本地上传面板样式 (图2) */
.local-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 15px;
    max-height: 300px;
    overflow-y: auto;
    padding: 5px;
}
.preview-item {
    position: relative;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 5px;
}
.preview-item img {
    width: 100%;
    height: 100px;
    object-fit: contain;
    display: block;
}
.preview-item .desc-input {
    width: 100%;
    margin-top: 5px;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: var(--radius-xs);
    font-size: 12px;
}
.preview-item .remove-preview-btn {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid #ccc;
    background-color: white;
    color: #555;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* URL上传面板样式 (图3) */
#url-input-pairs-container {
    max-height: 300px;
    overflow-y: auto;
}
.url-input-pair {
    margin-bottom: 15px;
    position: relative;
    padding-right: 30px; /* 为删除按钮留出空间 */
}
.url-input-pair input {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: var(--radius-sm);
}
.url-input-pair input:first-child {
    margin-bottom: 5px;
}
.remove-url-pair-btn {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border: none;
    background: none;
    font-size: 24px;
    color: #999;
    cursor: pointer;
}
.add-more-button {
    width: 100%;
    padding: 10px;
    margin-top: 10px;
    border: 1px dashed #ccc;
    background-color: #f9f9f9;
    cursor: pointer;
    border-radius: var(--radius-sm);
}
/* 【全新】智能粘贴区域样式 */
.smart-paste-area textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: var(--radius-sm);
    font-family: inherit; /* 继承字体，看起来更统一 */
}
/* --- 【【【终极修复：为超长弹窗添加滚动能力】】】 --- */

/* 步骤1: 改造弹窗的主体结构，让它成为一个能感知高度的“智能容器” */
.modal-content {
    display: flex; /* 启用Flex布局，这是实现内容滚动的关键 */
    flex-direction: column; /* 让内部元素垂直排列 */
    max-height: 85vh; /* 设置一个“天花板”，弹窗最大高度为屏幕高度的85% */
}

.modal-body {
    overflow-y: auto;
    flex-grow: 1;
    min-height: 0;
}


/* --- 【全新】心声Emoji气泡专属样式 --- */

/* 1. “包装盒”样式：负责占位和提供定位基准 */
.thought-bubble-wrapper {
    position: relative;
    padding-top: 30px;
    max-width: 100%; 
    /* 【【【终极修复 V2.0】】】删除最小宽度限制，让短气泡可以自由收缩！ */
    /* min-width: 160px; <-- 这行错误的限制被我们删除了 */
    display: inline-block; 
    vertical-align: top;
}
/* 2. Emoji小气泡核心样式 */
.thought-bubble-emoji {
    position: absolute; /* 开启“自由飞行”模式 */
    top: -8px; /* 修正后的最佳高度 */
    right: -20px; /* 【【【终极微调】】】使用负值，让气泡向右“出界”15像素 */
    
    /* 模仿大号心声气泡的外观，但所有尺寸都小一号 */
    background: #f0f4f8;
    border: 1px solid #e0e4e8;
    border-radius: 12px;
    padding: 6px 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    
    /* 让里面的Emoji更好看 */
    display: flex;
    gap: 3px;
    font-size: 14px; /* 控制Emoji的大小 */
    z-index: 5; /* 确保它显示在最前面 */
    
    /* 默认状态：完全透明，并且稍微往下、往小缩一点，为动画做准备 */
    opacity: 0;
    transform: translateY(10px) scale(0.8);
    transition: all 0.4s ease; /* 让所有变化都带上0.4秒的平滑动画 */
}

/* 3. 为Emoji小气泡也加上“思想的小尾巴” */
.thought-bubble-emoji::before {
    content: '';
    position: absolute;
    bottom: -1px;
    left: -22px; /* 修正后的最佳位置 */
    width: 20px;
    height: 20px;
    /* 我们复用原来的SVG背景图，但用background-size把它缩小 */
    background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cellipse cx='60' cy='50' rx='25' ry='18' fill='%23f0f4f8' stroke='%23e0e4e8' stroke-width='3'/%3E%3Cellipse cx='18' cy='80' rx='18' ry='13' fill='%23f0f4f8' stroke='%23e0e4e8' stroke-width='3'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

/* 4. “开灯”指令：当包装盒有 .has-emoji 这个类时，让小气泡优雅地浮现 */
.thought-bubble-wrapper.has-emoji .thought-bubble-emoji {
    opacity: 1;
    transform: translateY(0) scale(1); /* 恢复到正常状态 */
}
/* --- 【全新】日记系统专属样式 --- */
.diary-tabs {
    display: flex;
    flex-shrink: 0;
    background: var(--glass-bg);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid var(--glass-border);
    padding: 5px 20px 0;
}
.diary-tab-btn {
    flex: 1;
    padding: 12px 10px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-secondary);
    position: relative;
    transition: all 0.3s ease;
}
.diary-tab-btn.active {
    color: var(--qq-blue);
}
.diary-tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 15%;
    width: 70%;
    height: 3px;
    background-color: var(--qq-blue);
    border-radius: 3px 3px 0 0;
}
.diary-container {
    flex-grow: 1;
    overflow-y: auto;
    background-color: var(--background-light);
    padding: 15px;
}
.diary-tab-content {
    display: none;
}
.diary-tab-content.active {
    display: block;
}
/* 单篇日记卡片样式 */
.diary-entry-card {
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    margin-bottom: 15px;
    padding: 18px 22px;
    box-shadow: 0 4px 15px rgba(80, 151, 205, 0.1);
}
.diary-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.diary-meta {
    font-size: 13px;
    color: var(--text-secondary);
    /* 【核心修复】给日期右边增加40px的“安全距离”，防止被按钮遮挡 */
    padding-right: 40px; 
}
.diary-author {
    font-weight: bold;
    color: var(--text-dark);
}
.diary-content {
    line-height: 1.8;
    font-size: 15px;
    color: inherit;
    word-break: break-word;
}
.diary-content img {
    max-width: 100%;
    border-radius: var(--radius-md);
    margin: 10px 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* 日记编辑器样式 */
.diary-toolbar {
    margin-bottom: 10px;
    border-bottom: 1px solid var(--glass-border);
    padding-bottom: 10px;
}
.diary-toolbar .tool-btn {
    padding: 8px 12px;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    cursor: pointer;
    border-radius: var(--radius-sm);
    margin-right: 5px;
    transition: all 0.2s ease;
}
.diary-toolbar .tool-btn:hover {
    background: rgba(80, 151, 205, 0.1);
    border-color: var(--qq-blue);
}

.diary-editor-area {
    width: 100%;
    min-height: 200px;
    padding: 15px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    background: var(--glass-bg);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    font-size: 15px;
    line-height: 1.6;
    outline: none;
    overflow-y: auto;
}
.diary-editor-area:focus {
    border-color: var(--qq-blue);
    box-shadow: 0 0 0 3px rgba(80, 151, 205, 0.1);
}
.diary-editor-area:empty::before {
    content: attr(placeholder);
    color: var(--text-secondary);
    opacity: 0.7;
}

/* --- 【全新】日记编辑器工具栏 V2.0 样式 --- */
.diary-toolbar {
    display: flex;
    flex-wrap: wrap; /* 允许换行 */
    gap: 8px; /* 按钮间距 */
}
/* 针对文字颜色选择器的特殊样式 */
.color-picker-label {
    position: relative;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.color-picker-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0; /* 隐藏原始的颜色选择器UI */
    cursor: pointer;
}
.color-picker-label b {
    /* 在字母A下面画一条线，这条线的颜色会由JS动态改变 */
    border-bottom: 3px solid #333; 
}
/* 针对对齐按钮的微调，让图标看起来不一样 */
.tool-btn[data-format="justifyLeft"] { text-align: left; }
.tool-btn[data-format="justifyCenter"] { text-align: center; }
.tool-btn[data-format="justifyRight"] { text-align: right; }

/* --- 【全新】为高亮和字号定义样式 --- */
/* 注意：这里我们只是定义了高亮样式，但实际高亮会通过行内style实现 */
.text-highlight {
    background-color: #FFEB3B; /* 一个明亮的黄色 */
}
/* 定义可用的字号 */
.diary-font-size-1 { font-size: 12px; }
.diary-font-size-2 { font-size: 14px; }
.diary-font-size-3 { font-size: 16px; /* 默认 */ }
.diary-font-size-4 { font-size: 18px; }
.diary-font-size-5 { font-size: 22px; }
.diary-font-size-6 { font-size: 26px; }
/* --- 【全新】日记编辑器工具栏 V3.0 样式 --- */
.diary-toolbar {
    display: flex;
    flex-wrap: nowrap; /* 强制不换行 */
    gap: 8px;
    padding-bottom: 10px;
    overflow-x: auto; /* 【核心】当按钮太多时，允许水平滚动 */
    -webkit-overflow-scrolling: touch; /* 在移动端实现平滑滚动 */
}
/* 为SVG图标设置统一样式 */
.tool-btn svg {
    width: 20px;
    height: 20px;
    stroke: var(--text-dark);
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* 针对文字颜色选择器的特殊样式 */
.color-picker-label {
    position: relative;
    padding: 8px 10px; /* 调整内边距适应图标 */
    display: flex;
    align-items: center;
    justify-content: center;
}
.color-picker-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
/* 高亮按钮图标的颜色会动态变化 */
#diary-highlight-color-picker + svg {
    fill: #FFEB3B; /* 默认显示黄色填充 */
    stroke: none; /* 填充模式下通常不需要描边 */
}
/* 文字颜色按钮图标的颜色会动态变化 */
#diary-text-color-picker + svg {
    stroke: #333333; /* 默认显示黑色 */
}

/* 【【【重要】】】我们不再需要 .text-highlight 和 .diary-font-size-X 这些类了 */
/* 因为新功能会直接把样式写在HTML元素上，更加灵活 */
/* --- 【全新 V2.0】日记系统豪华版样式 --- */

/* 1. 赋予“全屏身份证”真正的力量 */
.modal-fullscreen {
    width: 100%; /* (解释：我们不再使用可能导致问题的vw/vh，而是用100%来继承父元素的全部宽度) */
    height: 100%;
    max-width: none !important; 
    max-height: none !important; 
    border-radius: 0 !important; 
    padding: 0 !important; 
    margin: 0 !important;
    display: flex; /* (解释：重新启用Flex布局，为下一步做准备) */
    flex-direction: column; /* (解释：确保内部的“版头”和“内容区”是垂直排列的) */
}
.modal-fullscreen .modal-header {
    padding: 10px 15px;
    border-radius: 0;
    height: auto;
    min-height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.modal-fullscreen .modal-body {
    padding: 0; /* body也不需要内边距了 */
    display: flex; /* 启用flex，让工具栏和编辑器可以垂直排列 */
    flex-direction: column;
}
.modal-fullscreen .modal-footer-split {
    border-radius: 0;
}

/* --- 【终极修复 V4.0】恢复工具栏滚动条并进行美化 --- */

/* (解释：我们不再需要单独隐藏滚动条了，因为滚动任务已经完全交给了 .modal-content) */

/* 2. 【核心】我们为“工具栏”专门设计一个纤细、漂亮的水平滚动条 */
.diary-toolbar::-webkit-scrollbar {
    height: 6px;
}
.diary-toolbar::-webkit-scrollbar-track {
    background-color: rgba(0,0,0,0.05);
    border-radius: 10px;
}
.diary-toolbar::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 10px;
    transition: background-color 0.2s ease;
}
.diary-toolbar::-webkit-scrollbar-thumb:hover {
    background-color: #999;
}

/* 3. 日记查看器专属样式 */
.diary-viewer-area {
    flex-grow: 1;
    padding: 20px;
    overflow-y: auto;
    font-size: 16px;
    line-height: 1.8;
    background-color: transparent; /* 【核心修复】命令“内墙”必须是透明的！ */
}

/* 4. 图片尺寸调节器样式 */
#image-resize-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}
#image-size-slider {
    width: 120px;
}

/* 5. 让被选中的图片有一个特殊标记，方便识别 */
.diary-editor-area img.resizable-image {
    outline: 3px solid var(--qq-blue);
    outline-offset: 2px;
    cursor: pointer;
}
/* --- 【终极修复 V3.0】确保日记查看器也能完美全屏 --- */
.diary-viewer-modal .modal-body {
    padding: 0;
}
.diary-viewer-area {
    /* 【核心】我们现在把背景应用到这里，而不是编辑器上 */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
/* 【核心终极修复】让编辑器和查看器的内容区真正撑满屏幕 */
.modal-fullscreen .modal-body {
    flex-grow: 1; /* (解释：命令“内容区”占据所有剩余的垂直空间) */
    overflow-y: auto; /* (解释：核心魔法！命令“内容区”自己负责滚动，这样版头就不在滚动范围内了) */
    -webkit-overflow-scrolling: touch; /* (解释：在手机上开启流畅的滚动效果) */
}
.diary-editor-area,
.diary-viewer-area {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* (解释：我们不再需要这里的 flex-grow 和 overflow-y 了，因为它的父级 .modal-body 已经接管了这些任务) */
    padding: 20px;
}
/* --- 【全新 V4.0】图片对齐样式 --- */

/* 定义三种“盘子”的摆放方式 */
.diary-image-wrap {
    /* 清除浏览器可能给P标签带来的默认边距 */
    margin: 10px 0;
    padding: 0;
}
.diary-image-wrap[align="center"] {
    text-align: center;
}
.diary-image-wrap[align="right"] {
    text-align: right;
}
.diary-image-wrap[align="left"] {
    text-align: left;
}

/* 图片在“盘子”里要表现得像一个文字，才能被text-align影响 */
.diary-image-wrap img {
    display: inline-block;
    max-width: 100%; /* 确保在右对齐或居中时，过大的图片不会把盘子撑破 */
}
/* --- 【全新 V5.0】日记卡片删除按钮样式 --- */
.diary-delete-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 32px;
    height: 32px;
    background-color: rgba(0,0,0,0.05);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.5;
    transition: all 0.2s ease;
}
.diary-entry-card:hover .diary-delete-btn {
    opacity: 1;
}
.diary-delete-btn:hover {
    background-color: rgba(229, 57, 53, 0.2); /* 悬停时显示淡淡的红色 */
}
.diary-delete-btn svg {
    width: 18px;
    height: 18px;
    stroke: var(--text-secondary);
}
.diary-delete-btn:hover svg {
    stroke: #e53935; /* 悬停时图标变红 */
}
/*
 ===============================================
  V30.0 - 日记系统UI/UX终极优化 (两端定位最终版)
 ===============================================
*/

/* 1. 强制全屏：使用left:0和right:0，自动适应滚动条 */
#diary-viewer-modal .modal-content,
#diary-editor-modal .modal-content {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%; /* <-- 【【【真正解决问题的关键代码】】】 */
    
    max-width: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    overflow: hidden;
    z-index: 1001;
    box-sizing: border-box; /* 加上这个属性，让内外边距更可控 */
}

/* 2. 头部布局：加入安全边距 */
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: env(safe-area-inset-top, 0px);
    padding-left: 16px;
    padding-right: 10px;
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0;
    height: calc(56px + env(safe-area-inset-top, 0px));
    box-sizing: border-box;
    background-color: #fff;
    z-index: 2;
}
.header-title-group {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
}
.header-title-group h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.header-button-inline {
    background: none; border: none; padding: 4px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: #999;
}
.header-button-inline:hover { color: #333; }
.header-button-inline svg { width: 20px; height: 20px; }
.close-button { 
    /* 步骤2：让关闭按钮“自由悬浮”，脱离父容器的束缚 */
    position: absolute; 

    /* 【【【这就是您要的遥控器！！！】】】 */
    top: 5px;    /* 这是按钮距离【弹窗顶部】的距离 */
    right: 15px;  /* 这是按钮距离【弹窗右侧】的距离 */

    /* --- 以下是按钮本身的美化样式，保持不变 --- */
    background: none; 
    border: none; 
    font-size: 24px; 
    cursor: pointer; 
    color: var(--text-secondary);
    transition: all 0.3s ease;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 2px; /* 这一行是我额外加的，为了让叉号在圆圈里更居中一点 */
}

.close-button:hover {
    background: rgba(80, 151, 205, 0.1);
    color: var(--qq-blue);
    transform: scale(1.1);
}

.modal-header .close-button:hover {
    background: rgba(0, 0, 0, 0.1); /* 鼠标悬停时加深背景 */
    transform: scale(1.1); /* 轻微放大 */
}


/* 3. 内容区和输入框最大化 (保持不变) */
#diary-viewer-modal .modal-body,
#diary-editor-modal .modal-body {
    flex-grow: 1;
    overflow: hidden;
    padding: 0;
    display: flex;
    flex-direction: column;
}
#diary-editor-content.diary-editor-area,
#diary-viewer-content.diary-viewer-area {
    flex-grow: 1;
    padding: 15px;
    overflow-y: auto;
    background-size: cover;
    background-position: center;
    border: none; outline: none; font-size: 16px;
}
.diary-toolbar {
    overflow-x: auto;
    flex-shrink: 0;
}

/* 4. 底部栏布局 (保持不变) */
.modal-footer-combined {
    flex-shrink: 0;
    background-color: #f7f8fa;
    padding: 15px 15px calc(15px + env(safe-area-inset-bottom, 0px)) 15px;
    border-top: 1px solid #eee;
    z-index: 2;
}
.visibility-selector {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    background-color: #fff;
    padding: 12px 15px;
    border-radius: 8px;
}
.visibility-selector label {
    font-size: 15px; color: #333; flex-shrink: 0;
    white-space: nowrap; margin-right: 10px;
}
.visibility-selector select {
    border: none; background: none; font-size: 15px;
    color: #888; text-align: right; direction: rtl; 
}
.footer-actions { display: flex; gap: 10px; }
.footer-actions .modal-button { flex: 1; }
/*
================================================================
 V-ULTIMATE-FIX-2: 日记全屏终极修复补丁 (最强硬版本)
================================================================
*/

/* 步骤 1: 强制外框铺满屏幕，不留任何余地 */
/* 这条规则只在日记窗口“没有” .hidden 类的时候生效 */
#diary-viewer-modal:not(.hidden),
#diary-editor-modal:not(.hidden) {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important; /* 强制取消 flex 居中 */
    background-color: transparent; /* 【【【终极核心修正！！！】】】 */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    z-index: 1001 !important; /* 确保在最顶层 */
}

/* 步骤 2: 强制内层内容填满外框 */
/* 这条规则同样只在日记窗口可见时生效 */
#diary-viewer-modal:not(.hidden) .modal-content,
#diary-editor-modal:not(.hidden) .modal-content {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    position: relative !important; /* 使用 relative 让它在正常的文档流中填充父元素 */
    
    /* 保持内部的 flex 布局以正确排列 header/body/footer */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: transparent;
}
/*
============================================================
 V-FINAL-UI: 日记编辑器布局紧凑化终极补丁
============================================================
*/

/* 步骤 1: 大幅压缩现在已经变空的“头部”区域的高度 */
#diary-editor-modal .modal-header {
    padding: 5px 15px; /* 极大地减少内边距 */
    min-height: auto;  /* 取消最小高度限制 */
    height: auto;      /* 高度自适应 */
    border-bottom: none; /* 去掉它和工具栏之间的分割线 */
    justify-content: flex-end; /* 让内部可能存在的元素（如图片缩放条）靠右对齐 */
}

/* 步骤 2: 重新“装修”工具栏，让它看起来像一个新的、紧凑的顶部栏 */
#diary-editor-modal .diary-toolbar {
    margin-bottom: 0; /* 移除和下方输入框的间距 */
    padding: 10px 15px; /* 增加合适的内边距，让它看起来更舒服 */
    border-bottom: 1px solid #f0f0f0; /* 添加一条分割线，将它与内容区分开 */
}

/* 步骤 3: 微调我们之前添加的“标题输入框”，让它和新布局更协调 */
#diary-editor-modal #diary-editor-title {
    padding: 10px 0; /* 减少上下的内边距 */
    font-size: 16px; /* 适当减小字号 */
}
/*
============================================================
 V-FINAL-UI-2: 日记编辑器布局重塑终极补丁
============================================================
*/

/* 步骤 1: 将“头部”重塑为一个灵活、紧凑的“超级工具栏” */
#diary-editor-modal .modal-header {
    flex-direction: column; /* 让内部元素（工具栏、缩放条）垂直排列 */
    align-items: stretch;   /* 让内部元素宽度撑满 */
    padding: 10px 0 0 0;  /* 调整内边距，顶部留空，其他方向为0 */
    height: auto;           /* 高度完全自适应 */
    min-height: auto;
    border-bottom: 1px solid #f0f0f0; /* 在整个头部下方添加分割线 */
}

/* 步骤 2: 确保工具栏本身干净、无多余样式 */
#diary-editor-modal .diary-toolbar {
    padding: 0 15px 10px 15px; /* 为工具栏按钮设置左右和底部内边距 */
    border-bottom: none; /* 移除它自己多余的分割线 */
}

/* 步骤 3: 确保图片缩放条也能正确显示 */
#diary-editor-modal #image-resize-controls {
    padding: 5px 15px;
    background-color: #f7f8fa; /* 给它一个淡淡的背景色以示区分 */
}

/* 步骤 4: 确保“身体”部分（包含标题和内容）能最大化地利用空间 */
#diary-editor-modal .modal-body {
    padding-top: 5px; /* 稍微增加一点标题和顶部工具栏的间距 */
}
/*
================================================================
 V-ULTIMATE-FIX-3: 日记编辑器布局终极修复补丁 (Flexbox 垂直增长版)
================================================================
*/

/* 步骤 1: 压缩“头部”的高度，只让它包裹标题文字 */
#diary-editor-modal .modal-header {
    height: auto;
    min-height: auto;
    padding: 15px 20px; /* 给标题一个舒适的内边距 */
}

/* 步骤 2: 【【【最核心的修复】】】 */
/* 命令“身体”部分成为一个新的、垂直的、可以伸缩的容器 */
#diary-editor-modal .modal-body {
    display: flex;
    flex-direction: column; /* 内部元素垂直排列 */
    padding: 0; /* 移除它自身多余的内边距 */
    flex-grow: 1; /* 命令它占据所有可用的垂直空间！ */
    min-height: 0; /* 一个专业技巧，防止flex布局在某些浏览器上溢出 */
}

/* 步骤 3: 让工具栏和标题框的高度固定，不参与伸缩 */
#diary-editor-modal .diary-toolbar,
#diary-editor-modal .form-group {
    flex-shrink: 0; /* 禁止它们被压缩 */
}

/* 步骤 4: 【【【第二核心修复】】】 */
/* 命令真正的内容输入框“野蛮生长”，填满“身体”部分所有剩余的空间 */
#diary-editor-modal #diary-editor-content {
    flex-grow: 1; /* 命令它占据所有可用的垂直空间！ */
    border: none; /* 移除它自己的边框，看起来更干净 */
}
/*
================================================================
 V-ULTIMATE-FIX-3: 日记编辑器布局终极修复补丁 (Flexbox 垂直增长版)
================================================================
*/

/* 步骤 1: 压缩“头部”的高度，只让它包裹标题文字 */
#diary-editor-modal .modal-header {
    height: auto;
    min-height: auto;
    padding: 15px 20px; /* 给标题一个舒适的内边距 */
}

/* 步骤 2: 【【【最核心的修复】】】 */
/* 命令“身体”部分成为一个新的、垂直的、可以伸缩的容器 */
#diary-editor-modal .modal-body {
    display: flex;
    flex-direction: column; /* 内部元素垂直排列 */
    padding: 0; /* 移除它自身多余的内边距 */
    flex-grow: 1; /* 命令它占据所有可用的垂直空间！ */
    min-height: 0; /* 一个专业技巧，防止flex布局在某些浏览器上溢出 */
}

/* 步骤 3: 让工具栏和标题框的高度固定，不参与伸缩 */
#diary-editor-modal .diary-toolbar,
#diary-editor-modal .form-group {
    flex-shrink: 0; /* 禁止它们被压缩 */
}

/* 步骤 4: 【【【第二核心修复】】】 */
/* 命令真正的内容输入框“野蛮生长”，填满“身体”部分所有剩余的空间 */
#diary-editor-modal #diary-editor-content {
    flex-grow: 1; /* 命令它占据所有可用的垂直空间！ */
    border: none; /* 移除它自己的边框，看起来更干净 */
}
/*
================================================================
 V-ULTIMATE-FIX-3: 日记编辑器布局终极修复补丁 (Flexbox 垂直增长版)
================================================================
*/

/* 步骤 1: 压缩“头部”的高度，只让它包裹标题文字 */
#diary-editor-modal .modal-header {
    height: auto;
    min-height: auto;
    padding: 10px 15px; /* 给一个紧凑的内边距 */
    justify-content: flex-end; /* 让内部的缩放条靠右 */
}

/* 步骤 2: 【【【最核心的修复】】】 */
/* 命令“身体”部分成为一个新的、垂直的、可以伸缩的容器 */
#diary-editor-modal .modal-body {
    display: flex;
    flex-direction: column; /* 内部元素垂直排列 */
    padding: 0; /* 移除它自身多余的内边距 */
    flex-grow: 1; /* 命令它占据所有可用的垂直空间！ */
    min-height: 0; /* 一个专业技巧，防止flex布局在某些浏览器上溢出 */
}

/* 步骤 3: 让工具栏和标题框的高度固定，不参与伸缩 */
#diary-editor-modal .diary-toolbar,
#diary-editor-modal .form-group {
    flex-shrink: 0; /* 禁止它们被压缩 */
}

/* 步骤 4: 【【【第二核心修复】】】 */
/* 命令真正的内容输入框“野蛮生长”，填满“身体”部分所有剩余的空间 */
#diary-editor-modal #diary-editor-content {
    flex-grow: 1; /* 命令它占据所有可用的垂直空间！ */
    border: none; /* 移除它自己的边框，看起来更干净 */
}

/* 步骤 5: 【【【图片缩放功能视觉样式】】】 */
/* 让被选中的图片有一个特殊标记，方便识别 */
.diary-editor-area img.resizable-image {
    outline: 3px solid var(--qq-blue);
    outline-offset: 2px;
    cursor: pointer;
}
/*
================================================================
 V-ULTIMATE-FIX-3: 日记编辑器布局终极修复补丁 (Flexbox 垂直增长版)
================================================================
*/

/* 步骤 1: 压缩“头部”的高度 */
#diary-editor-modal .modal-header {
    height: auto;
    min-height: auto;
    padding: 10px 15px;
    border-bottom: none; /* 移除和工具栏之间的分割线 */
}

/* 步骤 2: 【【【最核心的修复】】】 */
#diary-editor-modal .modal-body {
    display: flex;
    flex-direction: column;
    padding: 0;
    flex-grow: 1;
    min-height: 0;
}

/* 步骤 3: 让工具栏和标题框的高度固定 */
#diary-editor-modal .diary-toolbar,
#diary-editor-modal .form-group {
    flex-shrink: 0;
}

/* 步骤 4: 【【【第二核心修复】】】 */
#diary-editor-modal #diary-editor-content {
    flex-grow: 1;
    border: none;
    padding: 15px; /* 给内容区一点内边距，让文字不贴边 */
}

/* 步骤 5: 【【【图片缩放功能视觉样式】】】 */
.diary-editor-area img.resizable-image {
    outline: 3px solid var(--qq-blue);
    outline-offset: 2px;
    cursor: pointer;
}
/*
============================================================
 V-ULTIMATE-FIX-5: 日记编辑器P图效果还原补丁
============================================================
*/

/* 1. 整体布局：命令“身体”部分成为可伸缩的容器 */
#diary-editor-modal .modal-body {
    display: flex;
    flex-direction: column;
    padding: 0;
    flex-grow: 1;
    min-height: 0; /* 防止flex溢出 */
}

/* 2. 内容区包裹层：命令它“野蛮生长” */
#diary-editor-content-wrapper {
    flex-grow: 1; /* 占据所有剩余的垂直空间 */
    display: flex; /* 让内部的内容区也能100%填满它 */
}
#diary-editor-content.diary-editor-area {
    flex-grow: 1; /* 确保内容区本身也填满包裹层 */
    border: none;
    padding: 15px;
    height: 100%; /* 高度撑满 */
}

/* 3. 图片缩放条：变身“悬浮弹窗” */
#image-resize-controls {
    position: absolute; /* 开启“自由飞行”模式 */
    top: 20px; /* 距离顶部20px */
    left: 50%; /* 先移动到中线 */
    transform: translateX(-50%); /* 再向左移动自身宽度的一半，实现完美居中 */
    
    background-color: rgba(255, 255, 255, 0.9); /* 半透明背景 */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 8px 15px;
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,0.1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 10; /* 确保它浮在最上层 */
    
    display: flex; /* 让内部的文字和滑块能对齐 */
    align-items: center;
    gap: 10px;
}

/* 4. 图片被选中时的视觉效果 */
.diary-editor-area img.resizable-image {
    outline: 3px solid #3B83A2; /* 你的主题色高亮 */
    outline-offset: 2px;
    cursor: pointer;
}

/*
============================================================
 V-ULTIMATE-FIX-7: 日记查看器滚动与全屏终极修复
============================================================
*/
/* 步骤1: 命令整个弹窗变成一个可滚动的容器 */
#diary-viewer-modal .modal-content {
    overflow-y: auto;
}
/* 步骤2: 解除内容区自己的滚动能力，防止冲突 */
#diary-viewer-modal .modal-body {
    overflow-y: visible;
}

/*
============================================================
 V-ULTIMATE-FIX-6: 日记编辑器最终布局&缩放条样式补丁
============================================================
*/

/* 1. 强制“头部”空盒子彻底消失，解决顶部空白问题 */
#diary-editor-modal .modal-header {
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: none !important;
    margin: 0 !important;
}

/* 2. 【核心】让内容区的包裹层成为缩放条的“定位锚点” */
#diary-editor-content-wrapper {
    position: relative; /* 确保缩放条是相对于它来定位的 */
}

/* 3. 图片缩放条：变身“右上角迷你悬浮窗” */
#image-resize-controls {
    position: absolute; /* 开启“自由飞行”模式 */
    top: 15px;          /* 距离内容区顶部15px */
    right: 15px;         /* 距离内容区右侧15px */
    
    /* 移除之前错误的居中代码 */
    left: auto;
    transform: none;
    
    /* 变小！大幅缩小样式 */
    padding: 5px 10px; /* 缩小内边距 */
    font-size: 12px;   /* 缩小文字 */
    gap: 8px;          /* 缩小内部间距 */
    border-radius: 6px; /* 圆角也变小一点 */

    /* 其他样式保持不变，让它依然好看 */
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(0,0,0,0.1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    z-index: 10;
    display: flex;
    align-items: center;
}

/* 4. 把滑块本身也变小 */
#image-resize-controls input[type=range] {
    width: 80px; /* 将滑块的长度缩短 */
}
/* --- 【全新】生活作息编辑器样式 --- */
.schedule-item-card {
    background: #f7f8fa;
    border: 1px solid #e0e4e8;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 10px;
}
.schedule-item-card .form-control {
    width: 100%;
    margin-bottom: 10px;
}
.schedule-time-range {
    display: flex;
    align-items: center;
    gap: 10px;
}
.schedule-time-range input[type="time"] {
    flex: 1;
    min-width: 0; /* 【核心修复】允许输入框在空间不足时收缩到比内容更窄 */
}
.schedule-days-selector {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}
.schedule-days-selector label {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    font-size: 12px;
}
.probability-slider-group {
    display: flex;
    align-items: center;
    gap: 10px;
}
.probability-slider-group input[type="range"] {
    flex-grow: 1;
}
.add-schedule-item-btn {
    width: 100%;
    padding: 10px;
    border: 1px dashed #ccc;
    background-color: #f9f9f9;
    cursor: pointer;
    border-radius: 8px;
    font-weight: bold;
    color: #555;
}
.delete-schedule-item-btn {
    background: #fbe9e7;
    color: #c62828;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
}
/* 1. 垂直容器的布局 */
.schedule-time-range.vertical {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 15px;
}

/* 2. 定义每一行（标签+输入框）的样式 */
.time-input-row {
    display: flex;
    justify-content: space-between; /* 两端对齐保持不变 */
    align-items: baseline; /* 【【【终极修复】】】使用基线对齐，完美解决文字错位！ */
}

/* 3. 标签的样式 */
.time-input-row label {
    font-size: 14px;
    color: #555;
    font-weight: 600;
    padding-right: 15px; /* 【核心修复】为标签增加右内边距，强制创造出呼吸空间 */
    flex-shrink: 0;      /* (推荐) 防止标签文字在极端狭窄的情况下被压缩换行 */
}

/* 4. 【核心】让时间输入框恢复到最基础、最原始的带边框样式 */
.settings-item input[type="time"],
#schedule-editor-modal .time-input-row input[type="time"] {
    /* 我们不再修改它的外观，只规定一下尺寸和对齐 */
    padding: 5px 8px;
    border-radius: 6px;
    border: 1px solid #ddd;
    text-align: center;
}
/* --- 【全新 V4.0】作息编辑器易用性UI样式 --- */
.schedule-days-selector {
    display: flex;
    justify-content: space-around; /* 让星期均匀分布 */
    padding: 10px 0;
}
.day-checkbox-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    font-size: 13px;
    gap: 4px; /* 图标和文字的间距 */
}
.day-checkbox-label input[type="checkbox"] {
    width: 18px; /* 放大复选框，方便点击 */
    height: 18px;
}

.probability-input-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
}
.probability-input-group label {
    font-size: 14px;
    color: #555;
    font-weight: 600;
}
.probability-input-group input[type="number"] {
    width: 80px;
    padding: 8px;
    border-radius: 6px;
    border: 1px solid #ddd;
    text-align: center;
    font-weight: bold;
}
/* 隐藏数字输入框自带的上下箭头 */
.probability-input-group input[type="number"]::-webkit-outer-spin-button,
.probability-input-group input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.probability-input-group input[type="number"] {
  -moz-appearance: textfield;
}
.probability-input-group span {
    font-size: 16px;
    font-weight: bold;
    padding-left: 5px;
}
/* --- 【全新 V5.0】作息编辑器弹窗交互UI样式 --- */
.schedule-display-btn {
    cursor: pointer;
    background-color: #f0f2f5;
    padding: 8px 12px;
    border-radius: 6px;
    font-weight: 500;
    color: #3B83A2;
    border: 1px solid #e0e4e8;
    text-align: right;
    flex-grow: 1; /* 让按钮占据可用空间 */
}
.time-input-row {
    padding: 8px 0;
}
.time-input-row label {
    white-space: nowrap; /* 防止标签换行 */
}
/* 星期选择弹窗里的按钮样式 */
.day-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #ccc;
    background-color: #fff;
    cursor: pointer;
    font-weight: bold;
}
.day-btn.active {
    background-color: var(--qq-blue, #3B83A2);
    color: white;
    border-color: var(--qq-blue, #3B83A2);
}
/* --- 【全新】弹窗层级修复补丁 --- */
/* 这张“VIP通行证”拥有更高的z-index，可以确保它显示在最顶层 */
.modal-overlay.modal-on-top {
    z-index: 1005; 
}
/* --- 【全新 V6.0】作息编辑器按钮列表样式 --- */
.schedule-item-button {
    width: 100%;
    padding: 12px 15px;
    margin-bottom: 10px;
    border: 1px solid #e0e4e8;
    background-color: #fff;
    border-radius: 8px;
    text-align: left;
    font-size: 15px;
    cursor: pointer;
    transition: background-color 0.2s;
}
.schedule-item-button:hover {
    background-color: #f7f8fa;
}

/* 确保按钮和“添加”按钮之间有间距 */
#schedule-work-list, #schedule-leisure-list {
    margin-bottom: 15px;
}
/* --- 【全新】作息编辑器时间输入框美化补丁 (V2 - 简化版) --- */
/* 这段CSS现在只负责让原始的时间输入框看起来更协调 */
#schedule-item-editor-modal .time-input-row input[type="time"] {
    width: 120px;
    padding: 8px;
    border-radius: 6px;
    border: 1px solid #ddd;
    text-align: center;
}

/* 让删除按钮看起来更醒目 */
#delete-item-editor-btn {
    padding: 12px;
    font-size: 15px;
}
/*
============================================================
 V-OFFLINE-MODE: 线下模式专属样式
============================================================
*/

/* 为包含线下模式内容的消息气泡添加一个总开关 */
.message.offline-message {
    /* 增加行高，让富文本格式看起来不那么拥挤 */
    line-height: 1.8; 
}

/* 1. 高亮样式：双引号内的内容 */
.offline-message .highlight {
    background-color: rgba(204, 228, 244, 0.8);
    padding: 1px 4px;
    border-radius: 4px;
    color: #3b69a2; /* 【核心改造】字体颜色改为比背景更深的蓝色 */
    font-weight: 500;
}
/* 用户气泡里的高亮颜色可以深一些 */
.user-row .offline-message .highlight {
    background-color: rgba(255, 255, 255, 0.3);
    color: #fff;
}


/* 2. 斜体样式：内心想法 */
.offline-message .italic {
    font-style: italic;
    color: #5097CD; /* 【核心改造】字体颜色改为主题浅蓝色 */
    opacity: 0.9; 
}
/* 3. 粗体样式：重要内容 */
.offline-message .bold {
    font-weight: bold;
}
/* --- 【【【全新：修复标题和悬浮按钮的样式】】】 --- */

/* 1. 让标题栏支持绝对定位 */
.view-header {
    position: relative;
    display: flex;
    align-items: center;
}

/* 2. 让标题脱离文档流，在父容器内绝对居中 */
.view-header .header-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    /* 为了防止标题过长时与返回按钮重叠 */
    padding: 0 50px; 
    box-sizing: border-box;
    width: 100%;
    text-align: center;
}

/* 3. 【魔法】让悬浮按钮(FAB)内部的图标完美居中 */
.fab {
    display: flex;
    justify-content: center;
    align-items: center;
}
/* --- 【【【全新：为设置页面添加通用白色背景容器样式】】】 --- */
.settings-container {
    flex-grow: 1; /* 核心！让这个容器自动伸展，填满所有剩余的垂直空间 */
    background-color: var(--color-background-light); /* 使用你主题里的浅色背景 */
    overflow-y: auto; /* 如果内容超长，允许独立滚动 */
    width: 100%;
}
/* --- 【【【终极修复V3.0：模仿账本页面的标准布局样式】】】 --- */

/* 1. 为账本页和剧情线管理页的列表容器，应用完全相同的样式 */
#ledger-container,
#storyline-list-container {
    flex-grow: 1; /* 核心：让它自动伸展，填满所有剩余的垂直空间 */
    background-color: var(--color-background-light); /* 核心：给它刷上白色背景 */
    overflow-y: auto; /* 核心：如果内容超长，允许滚动 */
    padding: 15px;    /* 增加一些内边距，让内容更好看 */
    box-sizing: border-box;
}

/* 2. 确保页面骨架(.view)是标准的垂直弹性布局 (这是所有布局的基础) */
.view {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

/* 3. 确保标题和悬浮按钮样式正确 (保持不变) */
.view-header {
    position: relative;
    display: flex;
    align-items: center;
}
.view-header .header-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    padding: 0 50px; 
    box-sizing: border-box;
    width: 100%;
    text-align: center;
}
.fab {
    display: flex;
    justify-content: center;
    align-items: center;
}
/* --- 【全新】剧情线管理页面专属样式微调 --- */
.ledger-item .delete-storyline-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    color: var(--text-secondary); /* 继承次要文字颜色，变成灰色 */
}

.ledger-item .delete-storyline-btn:hover {
    color: #333; /* 鼠标悬停时变黑 */
}
/* --- 【全新】剧情线选择弹窗列表样式 --- */
#storyline-select-options {
    display: flex;
    flex-direction: column; /* 核心：让内部的按钮垂直排列 */
    gap: 10px; /* 设置每个选项之间的上下间距 */
}

#storyline-select-options .settings-item {
    /* 直接复用设置页的列表项样式，省时又美观 */
    padding: 15px 20px !important;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    background-color: #f7f8fa;
    justify-content: center; /* 让文字居中 */
    text-align: center;
    font-weight: 600; /* 加粗文字 */
}

#storyline-select-options .settings-item:hover {
    border-color: var(--qq-blue);
    color: var(--qq-blue);
    background-color: #eef6fc;
}
/*
============================================================
 V-PROACTIVE-MSG: 主动消息通知 & 未读标记样式
============================================================
*/

/* 1. 顶部通知弹窗的核心样式 */
.notification-popup {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translate(-50%, -120%); /* 默认藏在屏幕正上方 */
    width: 95%;
    max-width: 350px; /* 最大宽度，防止在PC上太宽 */
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 20px; /* 使用更圆润的胶囊形状 */
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
    z-index: 9999;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); /* 更平滑的动画曲线 */
    cursor: pointer;
    padding: 12px 15px; /* 调整内边距 */
}

/* 当弹窗需要显示时，赋予它 .show 类 */
.notification-popup.show {
    /* 从顶部滑入到安全区域内 */
    transform: translate(-50%, calc(env(safe-area-inset-top, 0px) + 10px));
}

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

.notification-content .avatar {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.notification-text {
    display: flex;
    flex-direction: column;
    overflow: hidden; /* 防止文字过长溢出 */
}

.notification-text .sender-name {
    font-weight: bold;
    font-size: 15px;
    color: var(--text-dark);
}

.notification-text .message-preview {
    font-size: 14px;
    color: var(--text-secondary);
    white-space: nowrap; /* 强制不换行 */
    overflow: hidden;
    text-overflow: ellipsis; /* 超出部分显示省略号 */
}

/* 2. 聊天列表头像容器与未读红点 */
.avatar-container {
    position: relative; /* 为红点提供定位基准 */
    flex-shrink: 0;
}

.unread-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 20px; /* 核心修复1：把 min-width 改成固定的 width */
    height: 20px;
    background-color: #fa5151;
    color: white;
    border-radius: 50%;
    font-size: 12px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    /* 核心修复2：移除导致宽度被撑开的 padding */
    border: 2px solid white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    box-sizing: content-box; /* 核心修复3：改回 content-box，确保边框不会挤压内部空间 */
}
/*
================================================================
 V-LOGIN-REDESIGN: 登录页美学重塑终极补丁
================================================================
*/

/* 1. 隐藏旧的、不需要的元素 */
.login-logo,
.login-title,
.login-subtitle {
    display: none !important;
}

/* 2. 为登录页应用绝美的星空渐变背景 */
#login-view {
    background: linear-gradient(135deg, #EFF7FB 0%, #CCE4F4 50%, #5097CD 100%);
    position: relative; /* 为星空伪元素提供定位基准 */
    overflow: hidden; /* 防止星空溢出 */
}

/* 复制星空效果 */
#login-view::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(2px 2px at 20px 30px, #fff, transparent),
        radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 90px 40px, #fff, transparent),
        radial-gradient(1px 1px at 130px 80px, rgba(255,255,255,0.6), transparent),
        radial-gradient(2px 2px at 160px 30px, #fff, transparent);
    background-repeat: repeat;
    background-size: 200px 100px;
    animation: twinkle 4s ease-in-out infinite alternate;
    z-index: 0; /* 确保星空在内容下方 */
}

/* 3. 重新设计布局，让内容垂直居中 */
.login-container {
    position: relative; /* 确保内容在星空上方 */
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center; /* 垂直居中 */
    align-items: center; /* 水平居中 */
    height: 100%; /* 占满整个屏幕高度以实现居中 */
}

/* 4. 【核心】重新设计一个精致、小巧、现代的登录按钮 */
.login-button {
    max-width: 220px; /* 大幅缩小最大宽度 */
    padding: 14px 24px; /* 调整内边距，让它更协调 */
    border-radius: 50px; /* 【关键】使用超大圆角，变成优雅的胶囊形状 */
    font-size: 15px;
    font-weight: 500; /* 使用中等字重，看起来更清爽 */
    letter-spacing: 1px; /* 增加文字间距 */
    
    /* 应用漂亮的“玻璃拟态”效果 */
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #2B3A4C; /* 使用主题中的深蓝色文字，对比更清晰 */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.login-button:hover {
    background: rgba(255, 255, 255, 0.4);
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.login-button:active {
    transform: translateY(0);
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 5. 美化下方的“前往设置”链接 */
.login-settings-link {
    margin-top: 24px;
    color: rgba(43, 58, 76, 0.7); /* 半透明的深蓝色 */
    font-size: 13px;
}

.login-settings-link:hover {
    color: #2B3A4C; /* 悬停时变为不透明 */
}
/* --- 【全新】登录页底部品牌标识 --- */
.login-footer-branding {
    position: absolute;
    bottom: calc(15px + env(safe-area-inset-bottom, 0px)); /* 核心修正：从30px大幅缩小到15px，让其更贴近底部 */
    left: 0;
    right: 0;
    text-align: center;
    z-index: 1; /* 确保在星空背景之上 */
    pointer-events: none; /* 让这些文字不会干扰下方的点击操作 */
}

.login-footer-branding .branding-title {
    margin: 0;
    font-size: 13px;
    font-weight: bold; /* 确保加粗 */
    color: rgba(43, 58, 76, 0.7); /* 核心修正：颜色与链接保持一致 */
    letter-spacing: 5px; /* 增加字母间距，更有设计感 */
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.1); /* 添加微弱的亮色阴影，增加质感 */
}

.login-footer-branding .branding-subtitle {
    margin: 4px 0 0 0; /* 只设置顶部外边距 */
    font-size: 11px;
    color: rgba(43, 58, 76, 0.7); /* 核心修正：颜色与链接保持一致 */
    /* 我们不再需要独立的 opacity 属性，因为颜色本身就带透明度 */
}
/* --- 【全新】侧边栏天气展示区样式 --- */
/* 【核心改造1】升级“大管家”，让它强制所有孩子底部对齐 */
.side-menu-footer {
    display: flex;
    justify-content: space-around;
    align-items: flex-end; /* 魔法！所有项目都会以底部为基准对齐 */
    padding: 15px; /* 调整内边距，让布局更舒展 */
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
}

.side-menu-weather-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 5px;
    border-radius: var(--radius-sm);
    transition: all 0.3s ease;
    min-width: 50px; 
}

.side-menu-weather-item:hover {
    background: rgba(255, 255, 255, 0.1);
}

.weather-icon-container {
    width: 24px;
    height: 24px;
    margin-bottom: 4px; /* 【核心改造2】稍微增大图标和文字的间距 */
}

.weather-icon-container svg {
    width: 100%;
    height: 100%;
    /* 【核心改造1】默认情况下，所有图标都是“空心描边”风格 */
    stroke: var(--text-secondary);
    fill: none;
    stroke-width: 4; /* 你提供的图标描边宽度是4，我们在这里统一 */
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* 【核心改造2】我们专门为“设置”和“夜间”这两个按钮的图标，单独下达“填充”指令！ */
#side-menu-settings .weather-icon-container svg,
#side-menu-darkmode .weather-icon-container svg {
    fill: var(--text-secondary); /* 命令它们填充颜色 */
    stroke: none; /* 同时禁用描边，确保是纯实体图标 */
}

/* 【核心改造3】我们还可以为那两个图标内部的白色部分单独设置颜色 */
#side-menu-settings svg path:last-child,
#side-menu-darkmode svg path:last-child {
    fill: #FFF; /* 无论在日间还是夜间模式，都保持白色 */
    stroke: #FFF;
}

/* 【核心改造4】为所有文字创建一个统一的“制服” */
.side-menu-footer span {
    font-size: 13px; /* 统一字号 */
    font-weight: 500;
    color: var(--text-secondary);
}
/*
============================================================
 V-DARK-THEME: 夜间模式专属样式
============================================================
*/

/* 当body拥有.dark-theme这个类时，下面的所有样式就会生效 */
body.dark-theme {
    --background-light: #121212; /* 主背景变深黑 */
    --background-white: #1E1E1E; /* 卡片背景变深灰 */
    --text-dark: #E0E0E0;      /* 主要文字变浅灰 */
    --text-secondary: #8A8A8A;   /* 次要文字变暗灰 */
    --border-color: #333333;     /* 边框变深 */

    /* 毛玻璃效果在暗色模式下也需要调整 */
    --glass-bg: rgba(40, 40, 40, 0.7);
    --glass-border: rgba(255, 255, 255, 0.1);
}

/* --- 覆盖各个组件的颜色 --- */

body.dark-theme,
body.dark-theme #app-container {
    background-color: #121212; /* 确保最外层背景是深色 */
}

/* 聊天列表和设置页的背景 */
body.dark-theme #chat-list-container,
body.dark-theme .settings-container {
    background-color: #1E1E1E;
}

/* 聊天气泡 */
body.dark-theme .assistant-row .message {
    background: #2C2C2C; /* AI气泡背景 */
}

/* 聊天输入框区域 */
body.dark-theme .chat-input-area,
body.dark-theme #chat-input {
    background-color: #252525;
    color: var(--text-dark);
}
body.dark-theme #chat-input {
    border: 1px solid var(--border-color);
}

/* 顶部栏和底部导航 */
body.dark-theme .header,
body.dark-theme #app-nav,
body.dark-theme .main-header {
    background: var(--glass-bg);
    border-color: var(--glass-border);
}
body.dark-theme .header *,
body.dark-theme #app-nav *,
body.dark-theme .main-header * {
    color: var(--text-dark); /* 修正：让所有头部文字都变亮 */
}
body.dark-theme .nav-button.active {
    color: var(--qq-blue);
    background-color: rgba(90, 90, 90, 0.3);
}

/* 侧边栏 */
body.dark-theme #side-menu {
    background: var(--glass-bg);
    border-right-color: var(--glass-border);
}

/* SVG图标颜色 */
body.dark-theme .tool-button svg,
body.dark-theme .side-menu-item .menu-icon svg,
body.dark-theme .weather-icon-container svg {
    stroke: var(--text-secondary);
}
/* --- 【全新V4.0：AI天气预报弹窗精装修终极版】 --- */




/* 3. (保持不变) 8天预报列表的样式 */
#ai-weather-forecast-list {
    display: flex;
    flex-direction: column;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--glass-border);
}

/* 4. (保持不变) 8天预报中每一行的样式 */
.forecast-day-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}
.forecast-day-info {
    display: flex;
    align-items: center;
    gap: 15px;
}
.forecast-day-info .weather-icon-container {
    flex-shrink: 0;
}
.forecast-date-details .date-label {
    font-weight: bold;
    font-size: 15px;
}
.forecast-date-details .weather-desc {
    font-size: 13px;
    color: var(--text-secondary);
}
.forecast-temp {
    font-size: 16px;
    font-weight: 500;
    white-space: nowrap;
}

/* 5. (保持不变) “今日详情”网格布局的样式 */
#ai-weather-today-details {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 20px; 
    row-gap: 25px;
}
.detail-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.detail-icon {
    width: 28px;
    height: 28px;
    margin-bottom: 8px;
}
.detail-icon svg {
    width: 100%;
    height: 100%;
}
.detail-value {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-dark);
}
.detail-label {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 2px;
}
.forecast-day-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--glass-border);
}
.forecast-day-item:last-child {
    border-bottom: none;
}
.forecast-day-info {
    display: flex;
    align-items: center;
    gap: 15px;
}
.forecast-day-info .weather-icon-container {
    flex-shrink: 0;
}
.forecast-date-details .date-label {
    font-weight: bold;
    font-size: 15px;
}
.forecast-date-details .weather-desc {
    font-size: 13px;
    color: var(--text-secondary);
}
.forecast-temp {
    font-size: 16px;
    font-weight: 500;
    white-space: nowrap;
}
/* --- 【【【全新：设置子面板间距优化补丁】】】 --- */
.settings-sub-panel {
    margin-top: 20px; /* 为整个天气设置面板增加一个上外边距 */
    padding-top: 20px; /* 在面板内部顶部也增加一点内边距 */
    border-top: 1px solid var(--glass-border); /* 增加一条漂亮的分割线 */
}
/*
============================================================
 V-FINAL-FIX: 天气弹窗按钮终极对齐 & 布局重塑
============================================================
*/

/* 步骤1: 将标题栏升级为“智能指挥官”(Flexbox) */
#ai-weather-modal .modal-header {
    display: flex;                 /* 开启Flexbox布局 */
    justify-content: space-between; /* 命令子元素：一组靠左，一组靠右 */
    align-items: center;           /* 命令所有子元素在垂直方向上居中对齐 */
}

/* 步骤2: 让“标题和刷新按钮”这个小组内部也对齐 */
#ai-weather-modal .header-title-group {
    display: flex;
    align-items: center; /* 组内垂直居中 */
    gap: 8px;            /* 在标题和刷新按钮之间增加一点间距 */
}

/* 步骤3: 解除刷新按钮的“绝对定位”束缚，让它回归队伍 */
#ai-weather-modal #refresh-ai-weather-btn {
    /* 我们不再需要 position: absolute 和 top/right/transform */
    padding: 4px; 
    background: none; 
    border: none; 
    cursor: pointer; 
    display: flex;
    align-items: center; 
    justify-content: center; 
    border-radius: 50%;
    transition: all 0.2s;
}

#ai-weather-modal #refresh-ai-weather-btn {
    transform: translateY(1.5px); /* 新增：向下微调1.5像素，让它和文字更对齐 */
}

#ai-weather-modal #refresh-ai-weather-btn:hover {
    background-color: rgba(0,0,0,0.05);
    transform: translateY(1.5px) rotate(90deg); /* 修正：在微调的基础上再进行旋转 */
}

#ai-weather-modal #refresh-ai-weather-btn svg {
    width: 18px; 
    height: 18px; 
    stroke-width: 2.5; 
    stroke: #AAAAAA;
}

/* 步骤4: 解除关闭按钮的束缚，并对其进行【终极】向上微调 */
#ai-weather-modal #close-ai-weather-modal {
    transform: translateY(-5px); /* 终极修正：向上移动4个像素！ */
}

/* 【【【同步修正：确保鼠标悬停时，按钮不会“掉”下来】】】 */
#ai-weather-modal #close-ai-weather-modal:hover {
    /* 核心！在执行放大效果的同时，保持我们最终确定的向上移动指令 */
    transform: translateY(-5px) scale(1.1);
}


#ai-weather-modal .close-button:hover {
    /* 核心！同时执行“垂直居中”和“放大”两个指令，就不会打架了！*/
    transform: translateY(-50%) scale(1.1);
    background: rgba(80, 151, 205, 0.1);
    color: var(--qq-blue);
}
/* --- 【AI日记系统 V4.0】作者索引页与返回按钮样式 --- */
.author-card {
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.author-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(80, 151, 205, 0.2);
}

.diary-back-btn {
    display: inline-block;
    margin-bottom: 15px;
    padding: 8px 15px;
    border: 1px solid var(--border-color);
    background-color: white;
    border-radius: 20px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-secondary);
    font-weight: 500;
}
.diary-back-btn:hover {
    background-color: #f5f5f5;
    color: var(--text-dark);
}
.side-menu-item {
    align-items: center;
}
/*
============================================================
 V-FINAL-HEADER-ALIGNMENT: 标题栏居中终极修复补丁
============================================================
*/

/* 步骤1: 将日记本的头部变成一个“定位锚点” */
#diary-view .header {
    position: relative;
    /* 确保内部元素（如返回按钮）能垂直居中 */
    display: flex;
    align-items: center;
    /* 让返回按钮靠左，为居中标题腾出空间 */
    justify-content: flex-start; 
}

/* 步骤2: 【核心魔法】命令标题“自由飞行”，并绝对居中 */
#diary-view #diary-view-title {
    position: absolute; /* 开启“自由飞行”模式 */
    top: 50%;           /* 垂直方向先移动到中线 */
    left: 50%;          /* 水平方向也移动到中线 */
    
    /* 这是CSS中最经典的“完美居中”咒语 */
    transform: translate(-50%, -50%); 
    
    /* 为了防止标题过长时，与返回按钮重叠 */
    padding: 0 50px; 
    box-sizing: border-box;
    width: 100%;
    text-align: center;
}
/* --- 【全新】AI日记自定义格式样式 --- */

/* 引用框 (图片1) */
.diary-quote {
    background-color: #f7f7f7;
    border-left: 4px solid #dcdcdc;
    padding: 15px 20px;
    margin: 20px 0;
    font-style: italic;
    color: #555;
}

/* 居中单字/词框 (图片1) */
.diary-centerbox {
    text-align: center;
    margin: 25px 0;
}
.diary-centerbox::before, .diary-centerbox::after {
    content: '';
    display: inline-block;
    width: 25px;
    height: 1px;
    background-color: #ccc;
    vertical-align: middle;
    margin: 0 10px;
}

/* 大标题 (图片3) */
.diary-title {
    text-align: center;
    font-size: 2em;
    font-weight: bold;
    margin: 30px 0;
    letter-spacing: 2px;
}

/* 文本装饰 */
.diary-highlight {
    background-color: #fff4a3;
    padding: 0 4px;
    border-radius: 3px;
}
.diary-underline {
    text-decoration: underline;
}
.diary-wavy {
    text-decoration: underline wavy #ff6b6b;
}

/* 字体样式与变化 */
.diary-size-large { font-size: 1.25em; }
.diary-size-huge { font-size: 1.6em; }
.diary-size-small { font-size: 0.8em; }
.diary-blur {
    filter: blur(3px);
    transition: filter 0.3s ease;
}
.diary-blur:hover {
    filter: blur(0);
}
.diary-glow-pink { text-shadow: 0 0 8px #ff79c6; }
.diary-glow-cyan { text-shadow: 0 0 8px #8be9fd; }
.diary-glow-yellow { text-shadow: 0 0 8px #f1fa8c; }

/* -- 核心升级：为我们请来的字体设计师分配工作 -- */
.font-noto-serif-sc { font-family: 'Noto Serif SC', serif; }
.font-zcool-kuaile { font-family: 'ZCOOL KuaiLe', cursive; }
.font-great-vibes { font-family: 'Great Vibes', cursive, serif; font-size: 1.5em; /* 花体英文通常需要放大一点才好看 */ }
.font-pacifico { font-family: 'Pacifico', cursive; }
.font-press-start-2p { font-family: '"Press Start 2P"', cursive; line-height: 1.5; /* 像素字体需要更大行高 */ }
/* --- 【全新V2】AI日记高级格式样式 --- */

/* 涂黑效果 */
.diary-redacted {
    cursor: pointer;
    position: relative;
    display: inline-block;
}
.diary-redacted .cover {
    position: absolute;
    left: 0;
    right: 0;
    height: 1em; /* 核心修改：让方块的高度等于当前文字的大小 */
    top: 50%; /* 核心修改：先把它往下推一半 */
    transform: translateY(-50%); /* 核心修改：再把它自己高度的一半拉回来，实现完美居中 */
    background-color: #222;
    border-radius: 2px;
    transition: opacity 0.3s ease;
    opacity: 1;
}
.diary-redacted .text {
    opacity: 0;
    transition: opacity 0.3s ease;
}
.diary-redacted.revealed .cover {
    opacity: 0;
}
.diary-redacted.revealed .text {
    opacity: 1;
}


/* --- 【全新V3】日记主题系统 (精装修版) --- */



/* 主题1: 复古剪贴簿 (精装修) */
.modal-content.theme-scrapbook { /* 【核心修正】我们不再指定 .diary-viewer-area */
    background-image: url('https://www.transparenttextures.com/patterns/paper-fibers.png');
    background-color: #fdfaf4;
}
.modal-content.theme-scrapbook .diary-quote { /* 这条规则保持不变，因为它本身就是对的 */
    border-left-color: #c9bda7;
}

/* 主题2: 拍立得照片墙 */
.modal-content.theme-polaroid-light { /* 【核心修正】我们不再指定 .diary-viewer-area */
    border: none;
    background-image: url('https://www.transparenttextures.com/patterns/cork-wallet.png');
    background-color: #d8c9a8;
}

/* 主题3: 黑色终端 */
.modal-content.theme-terminal-dark {
    background-color: #1e1e1e;
    border: 1px solid #333;
}
/* 终端主题的内容区也需要透明 */
.modal-content.theme-terminal-dark .diary-viewer-area {
    background-color: transparent;
}
.modal-content.theme-terminal-dark .modal-header h3 {
    color: #569cd6;
}
.modal-content.theme-terminal-dark .diary-viewer-area {
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
    line-height: 1.8;
}
.modal-content.theme-terminal-dark .diary-viewer-area .diary-quote {
    background-color: #252526;
    border-left-color: #4ec9b0;
    color: #9cdcfe;
}


/* --- 【专业日记背景设计系列 V4.1 - 完整重构版】 --- */

/* 
   ================================================================
   核心结构设定：
   1. 主题 (.theme-xxx) -> 控制最外层弹窗 (.modal-content) 的基础底色。
   2. 背景 (.bg-xxx) -> 控制内容区 (.diary-viewer-area) 的纹理和复杂样式。
   ================================================================
*/

/* --- 基础设定 --- */
.diary-viewer-modal .modal-content {
    transition: background-color 0.6s ease, border-color 0.6s ease;
}
.diary-viewer-area {
    transition: background 0.6s ease;
    position: relative;
    box-sizing: border-box;
    /* 核心！命令它本身必须是透明的，这样才能透出后面的墙！ */
    background: transparent;
}
.diary-viewer-area::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    background: inherit;
    transition: background 0.6s ease;
}

/* --- 主题底色定义 --- */
.modal-content.theme-scrapbook,
.modal-content.theme-polaroid-light,
.modal-content.theme-terminal-dark {
    background: transparent; /* 【核心修正】让主题框架变透明，透出后面的背景！ */
}


/* --- 背景与配色方案 --- */

/* 配方 #1: 典雅羊皮纸 */
.diary-viewer-area.bg-parchment {
    --text-primary: #3e2723; --text-heading: #2e1a17; --text-accent: #5d4037; --text-secondary: #6d4c41; --text-quote: #4e342e;
    background: radial-gradient(ellipse at top, rgba(253, 245, 230, 0.9), rgba(248, 236, 209, 0.95)), url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><filter id="paper"><feTurbulence type="fractalNoise" baseFrequency="0.04" result="noise" /><feDiffuseLighting in="noise" lighting-color="white" surfaceScale="1"><feDistantLight azimuth="45" elevation="60" /></feDiffuseLighting></filter><rect width="100" height="100" filter="url(%23paper)" opacity="0.3"/></svg>');
}

/* 配方 #2: 深邃星空 */
.diary-viewer-area.bg-starry-night {
    --text-primary: #e8eaf6; --text-heading: #ffffff; --text-accent: #64b5f6; --text-secondary: #b39ddb; --text-quote: #9fa8da;
    background: radial-gradient(ellipse at bottom, #1a1a2e 0%, #0a0a15 100%), radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3), transparent 50%), radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.1), transparent 50%), radial-gradient(circle at 40% 40%, rgba(200, 200, 255, 0.05), transparent 50%);
    background-size: 100% 100%, 600px 600px, 800px 800px, 1000px 1000px;
}

/* 配方 #3: 水彩梦境 */
.diary-viewer-area.bg-watercolor {
    --text-primary: #37474f; --text-heading: #263238; --text-accent: #00acc1; --text-secondary: #546e7a; --text-quote: #607d8b;
    background: linear-gradient(120deg, rgba(224, 247, 250, 0.8) 0%, rgba(255, 227, 231, 0.5) 50%, rgba(230, 245, 255, 0.8) 100%), radial-gradient(circle at 30% 50%, rgba(255, 182, 193, 0.2), transparent 70%), radial-gradient(circle at 70% 70%, rgba(176, 224, 230, 0.2), transparent 60%);
}

/* (解释：这里是把 terminal-dark 主题的黑色背景，直接合并到了 cyber-grid 背景里) */
.diary-viewer-area.bg-cyber-grid {
    --text-primary: #00ffc8; --text-heading: #00ffff; --text-accent: #ff006e; --text-secondary: #00b4d8; --text-quote: #90e0ef;
    background-color: #1e1e1e; /* <-- 从 theme-terminal-dark 搬过来的黑色底色 */
    background-image: linear-gradient(rgba(0, 255, 255, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 255, 255, 0.1) 1px, transparent 1px), radial-gradient(circle at 50% 50%, rgba(0, 150, 255, 0.1), transparent 70%);
    background-size: 40px 40px, 40px 40px, 100% 100%;
}

/* 配方 #5: 黄昏余晖 */
.diary-viewer-area.bg-sunset-gradient {
    --text-primary: #5d2e46; --text-heading: #4a1942; --text-accent: #c9184a; --text-secondary: #7d4f68; --text-quote: #6f3d5e;
    background: linear-gradient(180deg, #fff5f5 0%, #ffe0e6 20%, #ffccd5 40%, #ffb3c1 60%, #ff8fa3 80%, #ff758f 100%);
}

/* 配方 #6: 晨光微露 */
.diary-viewer-area.bg-morning-mist {
    --text-primary: #5d4e37; --text-heading: #4a3c28; --text-accent: #f57c00; --text-secondary: #7d6d5d; --text-quote: #6d5d4d;
    background: linear-gradient(135deg, rgba(255, 251, 235, 0.9) 0%, rgba(255, 244, 214, 0.7) 50%, rgba(255, 237, 191, 0.9) 100%), radial-gradient(ellipse at top left, rgba(255, 255, 255, 0.4), transparent 70%), radial-gradient(ellipse at bottom right, rgba(255, 248, 220, 0.3), transparent 70%);
}

/* 配方 #7: 墨染宣纸 */
.diary-viewer-area.bg-ink-wash {
    --text-primary: #212121; --text-heading: #000000; --text-accent: #d32f2f; --text-secondary: #424242; --text-quote: #616161;
    background: radial-gradient(circle at 20% 50%, rgba(0, 0, 0, 0.06), transparent 50%), radial-gradient(circle at 80% 80%, rgba(0, 0, 0, 0.04), transparent 60%), radial-gradient(circle at 40% 20%, rgba(0, 0, 0, 0.03), transparent 40%), linear-gradient(to bottom, #fafafa, #f5f5f5);
}

/* 配方 #8: 森林秘境 */
.diary-viewer-area.bg-forest-whisper {
    --text-primary: #1b5e20; --text-heading: #0d3b0f; --text-accent: #2e7d32; --text-secondary: #388e3c; --text-quote: #43a047;
    background: linear-gradient(180deg, rgba(229, 243, 235, 0.9) 0%, rgba(194, 231, 206, 0.8) 100%), radial-gradient(ellipse at top right, rgba(165, 214, 167, 0.3), transparent 60%), radial-gradient(ellipse at bottom left, rgba(129, 199, 132, 0.2), transparent 70%);
}

/* 配方 #9: 复古打字机 */
.diary-viewer-area.bg-vintage-typewriter {
    --text-primary: #3e2e2e; --text-heading: #2c1810; --text-accent: #8b4513; --text-secondary: #5d4a4a; --text-quote: #6b5555;
    background: repeating-linear-gradient(0deg, #fefefe, #fefefe 20px, #f8f8f8 20px, #f8f8f8 21px), linear-gradient(90deg, transparent 79px, rgba(255, 182, 193, 0.1) 79px, rgba(255, 182, 193, 0.1) 81px, transparent 81px), linear-gradient(#f5f5f5, #f0f0f0);
    background-size: 100% 100%, 100% 100%, 100% 100%;
}

/* 配方 #10: 极光之夜 */
.diary-viewer-area.bg-aurora-nights {
    --text-primary: #b2fef7; --text-heading: #ffffff; --text-accent: #4fc3f7; --text-secondary: #81c9fa; --text-quote: #a8e6cf;
    background: linear-gradient(45deg, #0f2027 0%, #203a43 50%, #2c5364 100%), radial-gradient(ellipse at top, rgba(64, 224, 208, 0.3), transparent 60%), radial-gradient(ellipse at bottom, rgba(255, 0, 150, 0.2), transparent 70%);
}

/* 配方 #11: 咖啡时光 */
.diary-viewer-area.bg-coffee-time {
    --text-primary: #4e342e; --text-heading: #3e2723; --text-accent: #6f4e37; --text-secondary: #6d4c41; --text-quote: #795548;
    background: radial-gradient(circle at 30% 40%, rgba(215, 189, 155, 0.3), transparent 50%), radial-gradient(circle at 70% 60%, rgba(198, 164, 126, 0.2), transparent 60%), linear-gradient(135deg, #f7f3ed 0%, #ede7dc 50%, #e6ddd0 100%);
}

/* 配方 #12: 海洋深蓝 (饱和度微调版) */
.diary-viewer-area.bg-ocean-depth {
    /* 【核心】在原版鲜艳蓝色的基础上，微调了文字颜色，让它更柔和 */
    --text-primary: #1e6091; --text-heading: #1a537d; --text-accent: #1e7cb7; --text-secondary: #3b8ac1; --text-quote: #2a6f97;
    --text-shadow-color: rgba(0, 0, 0, 0.15);
    /* 【核心】为你重新调配的“清澈感”蓝色渐变，比原版淡雅，比雾霾蓝鲜艳 */
    background: linear-gradient(180deg, #e9f5ff 0%, #d4e9ff 50%, #abcfff 100%);
}

/* 配方 #13: 樱花飘落 */
.diary-viewer-area.bg-sakura-dream {
    --text-primary: #880e4f; --text-heading: #6a1b47; --text-accent: #e91e63; --text-secondary: #ad1457; --text-quote: #c2185b;
    background: radial-gradient(circle at 10% 20%, rgba(255, 183, 197, 0.3), transparent 40%), radial-gradient(circle at 80% 80%, rgba(255, 154, 179, 0.2), transparent 50%), radial-gradient(circle at 50% 50%, rgba(255, 213, 220, 0.2), transparent 60%), linear-gradient(to bottom, #fff5f7, #ffe4e9);
}

/* --- 【通用样式应用】 --- */
.diary-viewer-area[class*="bg-"] {
    color: var(--text-primary);
}

.diary-viewer-area[class*="bg-"] h1,
.diary-viewer-area[class*="bg-"] h2,
.diary-viewer-area[class*="bg-"] h3,
.diary-viewer-area[class*="bg-"] .diary-title {
    color: var(--text-heading);
}

.diary-viewer-area[class*="bg-"] .diary-quote {
    color: var(--text-quote);
    border-left-color: var(--text-accent);
}

.diary-viewer-area[class*="bg-"] ::selection {
    background-color: var(--text-accent);
    color: white;
}

.bg-starry-night *,
.bg-cyber-grid *,
.bg-aurora-nights * {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.diary-viewer-area.bg-starry-night *,
.diary-viewer-area.bg-cyber-grid *,
.diary-viewer-area.bg-aurora-nights * {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* --- 【毛玻璃效果】 --- */
.diary-viewer-area .diary-content {
    padding: 20px 22px; /* (解释：我们再次压缩了左右的内边距，让文字区域更宽) */
    margin: 12px; /* (解释：再次压缩了外边距，让毛玻璃几乎贴近屏幕边缘) */
    backdrop-filter: blur(4px) saturate(150%);
    -webkit-backdrop-filter: blur(4px) saturate(150%);
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.1);
}

/* 【【【终极修复补丁 V2.0！！！】】】 */
.diary-viewer-area[class*="bg-"] .diary-content {
    /* 1. 恢复毛玻璃效果，并让玻璃本身带一点点几乎看不见的白色，质感更好 */
    backdrop-filter: blur(4px) saturate(150%);
    -webkit-backdrop-filter: blur(4px) saturate(150%);
    background-color: rgba(255, 255, 255, 0.05);

    /* 2. 加上圆角和阴影，让它看起来像一个精致的卡片 */
    border-radius: 12px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.1);

    /* 3. 增加一点内外边距，让文字不会贴着玻璃边缘 */
    padding: 20px 25px;
    margin: 15px;
}
.theme-terminal-dark .diary-content {
    background-color: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.08);
}


/* --- 【特殊效果增强】 --- */
.diary-viewer-area.bg-starry-night::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: radial-gradient(1px 1px at 20% 30%, white, transparent), radial-gradient(1px 1px at 40% 70%, white, transparent), radial-gradient(1px 1px at 60% 40%, white, transparent), radial-gradient(1px 1px at 80% 90%, white, transparent);
    background-size: 200% 200%;
    animation: sparkle 20s linear infinite;
    opacity: 0.5;
    pointer-events: none;
}

@keyframes sparkle {
    from { transform: translateY(0); }
    to { transform: translateY(-100%); }
}

/* --- 【全新V4】AI日记高级图文组件样式 (布局修复版) --- */
.diary-image-pair {
    display: flex;
    flex-direction: column; /* 保持垂直堆叠 */
    align-items: center;    /* 保持水平居中 */
    gap: 0;                 /* 移除间距，为重叠做准备 */
    margin: 25px 0;
}

.diary-polaroid {
    padding: 10px 10px 20px 10px;
    background: white;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    border: 1px solid #ddd;
    text-align: center;
    transition: transform 0.2s ease-in-out;
}

.diary-polaroid:hover {
    transform: scale(1.05) !important; /* 统一的悬停放大效果 */
    z-index: 10;
}

/* 核心修复：单张照片的样式 */
.diary-viewer-area > .diary-polaroid {
    width: 60%;
    margin: 20px auto; /* 核心修复：让它水平居中 */
    transform: rotate(-2deg); /* 给它一个默认的轻微旋转 */
}

/* 【【【终极修复：双图布局的全新指令集】】】 */
.diary-image-pair .diary-polaroid {
    width: 85%; /* 1. 宽度大幅增加，达到“铺满”效果 */
    max-width: 300px; /* (可选) 限制一个最大宽度 */
}
.diary-image-pair .diary-polaroid:nth-child(1) {
    transform: rotate(-4deg); /* 2. 确保第一张照片向左歪斜 */
    z-index: 1; /* 确保它在下方 */
}
.diary-image-pair .diary-polaroid:nth-child(2) {
    transform: rotate(5deg); /* 3. 确保第二张照片向右歪斜 */
    /* 【核心魔法】减小负边距，让重叠效果更轻微、更自然 */
    margin-top: -10px;
    z-index: 2; /* 确保它在上方 */
}

.diary-polaroid-img {
    background:#f0f0f0; 
    border:1px solid #ddd; 
    padding: 20px; 
    text-align:center; 
    color:#888; 
    font-style:italic; 
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.diary-polaroid-caption {
    margin-top: 15px;
    font-family: 'ZCOOL KuaiLe', cursive;
    color: #555;
    font-size: 1.1em;
}
/* --- 【专业日记字体配色方案】(V2.0 - 智能阴影版) --- */

/* 
   ================================================================
   核心设定：
   现在，每个背景配方都自带一个 --text-shadow-color 变量。
   浅色背景使用半透明的黑色阴影，深色背景使用半透明的白色辉光。
   ================================================================
*/

/* 配方 #1: 典雅羊皮纸 (浅色) */
.bg-parchment {
    --text-primary: #3e2723; --text-heading: #2e1a17; --text-accent: #5d4037; --text-secondary: #6d4c41; --text-quote: #4e342e;
    --text-shadow-color: rgba(0, 0, 0, 0.15); /* (解释：为它指定了半透明的黑色阴影) */
    background: radial-gradient(ellipse at top, rgba(253, 245, 230, 0.9), rgba(248, 236, 209, 0.95)), url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><filter id="paper"><feTurbulence type="fractalNoise" baseFrequency="0.04" result="noise" /><feDiffuseLighting in="noise" lighting-color="white" surfaceScale="1"><feDistantLight azimuth="45" elevation="60" /></feDiffuseLighting></filter><rect width="100" height="100" filter="url(%23paper)" opacity="0.3"/></svg>');
}

/* 配方 #2: 深邃星空 (深色) */
.bg-starry-night {
    --text-primary: #e8eaf6; --text-heading: #ffffff; --text-accent: #64b5f6; --text-secondary: #b39ddb; --text-quote: #9fa8da;
    --text-shadow-color: rgba(255, 255, 255, 0.2); /* (解释：为它指定了半透明的白色辉光) */
    background: radial-gradient(ellipse at bottom, #1a1a2e 0%, #0a0a15 100%), radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3), transparent 50%), radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.1), transparent 50%), radial-gradient(circle at 40% 40%, rgba(200, 200, 255, 0.05), transparent 50%);
    background-size: 100% 100%, 600px 600px, 800px 800px, 1000px 1000px;
}

/* 配方 #3: 水彩梦境 (浅色) */
.bg-watercolor {
    --text-primary: #37474f; --text-heading: #263238; --text-accent: #00acc1; --text-secondary: #546e7a; --text-quote: #607d8b;
    --text-shadow-color: rgba(0, 0, 0, 0.1);
    background: linear-gradient(120deg, rgba(224, 247, 250, 0.8) 0%, rgba(255, 227, 231, 0.5) 50%, rgba(230, 245, 255, 0.8) 100%), radial-gradient(circle at 30% 50%, rgba(255, 182, 193, 0.2), transparent 70%), radial-gradient(circle at 70% 70%, rgba(176, 224, 230, 0.2), transparent 60%);
}

/* 配方 #4: 赛博矩阵 (深色) */
.diary-viewer-area.bg-cyber-grid {
    --text-primary: #00ffc8; --text-heading: #00ffff; --text-accent: #ff006e; --text-secondary: #00b4d8; --text-quote: #90e0ef;
    --text-shadow-color: rgba(0, 255, 255, 0.2);
    background-color: #1e1e1e;
    background-image: linear-gradient(rgba(0, 255, 255, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 255, 255, 0.1) 1px, transparent 1px), radial-gradient(circle at 50% 50%, rgba(0, 150, 255, 0.1), transparent 70%);
    background-size: 40px 40px, 40px 40px, 100% 100%;
}

/* 配方 #5: 黄昏余晖 (浅色) */
.diary-viewer-area.bg-sunset-gradient {
    --text-primary: #5d2e46; --text-heading: #4a1942; --text-accent: #c9184a; --text-secondary: #7d4f68; --text-quote: #6f3d5e;
    --text-shadow-color: rgba(0, 0, 0, 0.1); /* (解释：锦上添花！把阴影从白色改为非常淡的黑色，立体感更好) */
    /* (解释：为你重新调制了一套更清淡、更柔和的“黄昏余晖”配色) */
    background: linear-gradient(180deg, #fff9f9 0%, #fff0f3 30%, #ffe4e9 60%, #ffdde3 80%, #ffddd1 100%);
}

/* 配方 #6: 晨光微露 (浅色) */
.diary-viewer-area.bg-morning-mist {
    --text-primary: #5d4e37; --text-heading: #4a3c28; --text-accent: #f57c00; --text-secondary: #7d6d5d; --text-quote: #6d5d4d;
    --text-shadow-color: rgba(0, 0, 0, 0.15);
    background: linear-gradient(135deg, rgba(255, 251, 235, 0.9) 0%, rgba(255, 244, 214, 0.7) 50%, rgba(255, 237, 191, 0.9) 100%), radial-gradient(ellipse at top left, rgba(255, 255, 255, 0.4), transparent 70%), radial-gradient(ellipse at bottom right, rgba(255, 248, 220, 0.3), transparent 70%);
}

/* 配方 #7: 墨染宣纸 (浅色) */
.diary-viewer-area.bg-ink-wash {
    --text-primary: #212121; --text-heading: #000000; --text-accent: #d32f2f; --text-secondary: #424242; --text-quote: #616161;
    --text-shadow-color: rgba(0, 0, 0, 0.1);
    background: radial-gradient(circle at 20% 50%, rgba(0, 0, 0, 0.06), transparent 50%), radial-gradient(circle at 80% 80%, rgba(0, 0, 0, 0.04), transparent 60%), radial-gradient(circle at 40% 20%, rgba(0, 0, 0, 0.03), transparent 40%), linear-gradient(to bottom, #fafafa, #f5f5f5);
}

/* 配方 #8: 森林秘境 (浅色) */
.diary-viewer-area.bg-forest-whisper {
    --text-primary: #1b5e20; --text-heading: #0d3b0f; --text-accent: #2e7d32; --text-secondary: #388e3c; --text-quote: #43a047;
    --text-shadow-color: rgba(0, 0, 0, 0.2);
    background: linear-gradient(180deg, rgba(229, 243, 235, 0.9) 0%, rgba(194, 231, 206, 0.8) 100%), radial-gradient(ellipse at top right, rgba(165, 214, 167, 0.3), transparent 60%), radial-gradient(ellipse at bottom left, rgba(129, 199, 132, 0.2), transparent 70%);
}

/* 配方 #9: 复古打字机 (浅色) */
.diary-viewer-area.bg-vintage-typewriter {
    --text-primary: #3e2e2e; --text-heading: #2c1810; --text-accent: #8b4513; --text-secondary: #5d4a4a; --text-quote: #6b5555;
    --text-shadow-color: rgba(0, 0, 0, 0.1);
    background: repeating-linear-gradient(0deg, #fefefe, #fefefe 20px, #f8f8f8 20px, #f8f8f8 21px), linear-gradient(90deg, transparent 79px, rgba(255, 182, 193, 0.1) 79px, rgba(255, 182, 193, 0.1) 81px, transparent 81px), linear-gradient(#f5f5f5, #f0f0f0);
    background-size: 100% 100%, 100% 100%, 100% 100%;
}

/* 配方 #10: 极光之夜 (深色) */
.diary-viewer-area.bg-aurora-nights {
    --text-primary: #b2fef7; --text-heading: #ffffff; --text-accent: #4fc3f7; --text-secondary: #81c9fa; --text-quote: #a8e6cf;
    --text-shadow-color: rgba(255, 255, 255, 0.2);
    background: linear-gradient(45deg, #0f2027 0%, #203a43 50%, #2c5364 100%), radial-gradient(ellipse at top, rgba(64, 224, 208, 0.3), transparent 60%), radial-gradient(ellipse at bottom, rgba(255, 0, 150, 0.2), transparent 70%);
}

/* 配方 #11: 咖啡时光 (浅色) */
.diary-viewer-area.bg-coffee-time {
    --text-primary: #4e342e; --text-heading: #3e2723; --text-accent: #6f4e37; --text-secondary: #6d4c41; --text-quote: #795548;
    --text-shadow-color: rgba(0, 0, 0, 0.1);
    background: radial-gradient(circle at 30% 40%, rgba(215, 189, 155, 0.3), transparent 50%), radial-gradient(circle at 70% 60%, rgba(198, 164, 126, 0.2), transparent 60%), linear-gradient(135deg, #f7f3ed 0%, #ede7dc 50%, #e6ddd0 100%);
}

/* 配方 #12: 海洋深蓝 (饱和度微调版) */
.diary-viewer-area.bg-ocean-depth {
    /* 【核心】在原版鲜艳蓝色的基础上，微调了文字颜色，让它更柔和 */
    --text-primary: #1e6091; --text-heading: #1a537d; --text-accent: #1e7cb7; --text-secondary: #3b8ac1; --text-quote: #2a6f97;
    --text-shadow-color: rgba(0, 0, 0, 0.15);
    /* 【核心】为你重新调配的“清澈感”蓝色渐变，比原版淡雅，比雾霾蓝鲜艳 */
    background: linear-gradient(180deg, #e9f5ff 0%, #d4e9ff 50%, #abcfff 100%);
}

/* 配方 #13: 樱花飘落 (浅色) */
.diary-viewer-area.bg-sakura-dream {
    --text-primary: #880e4f; --text-heading: #6a1b47; --text-accent: #e91e63; --text-secondary: #ad1457; --text-quote: #c2185b;
    --text-shadow-color: rgba(255, 255, 255, 0.4); /* (解释：这也是一个特例，深粉色文字配白色辉光更好看) */
    background: radial-gradient(circle at 10% 20%, rgba(255, 183, 197, 0.3), transparent 40%), radial-gradient(circle at 80% 80%, rgba(255, 154, 179, 0.2), transparent 50%), radial-gradient(circle at 50% 50%, rgba(255, 213, 220, 0.2), transparent 60%), linear-gradient(to bottom, #fff5f7, #ffe4e9);
}

/* --- 【通用样式应用】 --- */
.diary-viewer-area[class*="bg-"] {
    color: var(--text-primary);
}

.diary-viewer-area[class*="bg-"] h1,
.diary-viewer-area[class*="bg-"] h2,
.diary-viewer-area[class*="bg-"] h3,
.diary-viewer-area[class*="bg-"] .diary-title {
    color: var(--text-heading);
}

.diary-viewer-area[class*="bg-"] .diary-quote {
    color: var(--text-quote);
    border-left-color: var(--text-accent);
}

.diary-viewer-area[class*="bg-"] ::selection {
    background-color: var(--text-accent);
    color: white;
}

/* (解释：这是全新的“万能阴影”规则，它会读取上面每个背景里定义的阴影颜色) */
.diary-viewer-area[class*="bg-"] * {
    text-shadow: 0 1px 3px var(--text-shadow-color);
}
/* --- 【【【终极修复：日记本弹窗强制居中补丁】】】 --- */
#custom-confirm-modal {
    align-items: center; /* 魔法！命令它垂直居中！ */
    padding-top: 0;      /* (推荐) 同时把顶部的安全距离也去掉，实现完美居中 */
}

/*
============================================================
 V-UI-FIX: AI日记列表精装修补丁
============================================================
*/

/* 1. 【核心】让日记卡片成为一个“定位锚点”，为删除按钮做准备 */
.diary-entry-card {
    position: relative;
}

/* 2. 【核心】将“版头”改造为“智能容器” */
.diary-entry-card .diary-header {
    display: flex;                 /* 开启Flexbox布局 */
    justify-content: space-between; /* 命令子元素两端对齐 */
    align-items: flex-start;       /* 顶部对齐，防止标题过长时日期也下移 */
    gap: 15px;                     /* 在标题和日期之间增加安全间距 */
}

/* 3. 【核心】为日期设置“铁律”，绝不换行 */
.diary-entry-card .diary-meta {
    flex-shrink: 0;      /* 禁止收缩！这是最重要的指令 */
    white-space: nowrap; /* 强制不换行，作为双重保险 */
    text-align: right;   /* 确保日期本身是右对齐的 */
}

/* 4. 【核心】为摘要文本“拨乱反正”，强制左对齐 */
.diary-entry-card .diary-preview-text {
    text-align: left; /* 无论父级如何，我必须左对齐 */
    margin: 0; /* 移除 p 标签可能自带的上下边距 */
    
    /* (可选) 增加一个渐变遮罩，让结尾更柔和 */
    max-height: 90px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}

/* 5. 【核心】“常驻”删除按钮的样式 */
.diary-delete-btn {
    position: absolute;
    top: 12px; /* <-- 就是这个数字！你可以自己微调它 */
    right: 15px;
    width: 32px;
    height: 32px;
    background-color: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.5;
    transition: all 0.2s ease;
}

/* 鼠标悬停在按钮本身上时，让它更清晰 */
.diary-delete-btn:hover {
    opacity: 1; /* 完全不透明 */
    background-color: rgba(0,0,0,0.08); /* 给一个淡淡的背景反馈 */
}

.diary-delete-btn:hover {
    background-color: rgba(229, 57, 53, 0.2); /* 悬停时显示淡淡的红色 */
}

.diary-delete-btn svg {
    width: 18px;
    height: 18px;
    stroke: var(--text-secondary);
}

.diary-delete-btn:hover svg {
    stroke: #e53935; /* 悬停时图标变红 */
}
/*
================================================================
 V-ULTIMATE-REWRITE-FINAL: 日记查看器终极重写补丁
================================================================
*/

/* 1. 【核心】命令“别墅”本身铺满整个屏幕，并且自己负责滚动 */
.diary-viewer-container {
    position: absolute; /* 让它脱离 overlay 的居中控制 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff; /* 【【【终极修复！！！】】】我们把日记本的底色恢复为不透明的白色！ */
    overflow-y: auto; /* 魔法！命令整栋别墅自己滚动 */
    -webkit-overflow-scrolling: touch; /* 适配移动端流畅滚动 */
    z-index: 1002; /* 确保它在半透明遮罩之上 */
}

/* 2. 【核心】当我们打开日记时，让后面的黑色半透明遮罩也变透明，防止颜色叠加 */
#diary-viewer-modal:not(.hidden) {
    background-color: transparent !important;
}

#diary-viewer-modal .modal-header {
    position: sticky; /* 开启粘性定位 */
    top: 0;           /* 当滚动到顶部时就粘住 */
    background: none !important; /* 【【【终极指令！！！】】】背景彻底消失，不留任何痕迹！ */
    backdrop-filter: none !important; /* 确保模糊效果也一起消失 */
    -webkit-backdrop-filter: none !important;
    z-index: 10;      /* 确保它在最上层 */
    
    /* 以下是美化样式 */
    padding: 15px;
    padding-top: calc(15px + env(safe-area-inset-top)); /* 适配 iPhone 刘海屏 */
    border-bottom: none; /* 【核心】既然版头都透明了，这条分割线也就不需要了 */
}

/* 【【【终极修复：在这里为关闭按钮下达绝对指令！】】】 */
#diary-viewer-modal .modal-header .close-button {
    background: transparent !important; /* 指令1：背景必须透明！ */
    border: none !important;            /* 指令2：不能有边框！ */
    box-shadow: none !important;        /* 指令3：不能有阴影！ */
    width: 44px;  /* 扩大可点击区域 */
    height: 44px; /* 扩大可点击区域 */
}

#diary-viewer-modal .modal-header .close-button:hover {
    background: rgba(0,0,0,0.08) !important; /* 指令4：鼠标放上去时，也只能有一个淡淡的背景 */
}
    


/* 4. 【核心】为“日记内容区”设置舒适的阅读边距 */
.diary-viewer-container .diary-viewer-area {
    padding: 20px;
    padding-bottom: calc(20px + env(safe-area-inset-bottom)); /* 适配 iPhone 底部安全区 */
}
/* --- 【全新】日记查看器标题美化 --- */
#diary-viewer-author {
    font-family: 'Noto Serif SC', serif; /* 使用一个优雅的衬线字体 */
    font-weight: 700; /* 加粗 */
    font-size: 18px; /* 稍微放大一点 */
    color: #333; /* 确保文字是深色 */
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5); /* 【关键】加上一层微弱的白色阴影，确保在任何深色背景下都清晰可读 */
}
/*
================================================================
 V-ULTIMATE-FIX-FINAL: 日记关闭按钮专属“隐身衣” (精准制导版)
================================================================
*/
/* 核心：我们在选择器里，把 .close-button 换成了更精确的 ID 选择器 */
#diary-viewer-modal #close-diary-viewer-btn {
    background: transparent !important;
    box-shadow: none !important;
    position: absolute;
    top: calc(10px + env(safe-area-inset-top)); /* 适配刘海屏 */
    right: 10px;
}

#diary-viewer-modal #close-diary-viewer-btn:hover {
    background: rgba(0,0,0,0.1) !important; /* 悬停时也只显示一个极淡的背景 */
}
/*
============================================================
 V-STATUS-BUBBLE: AI状态管理气泡样式
============================================================
*/
/* 1. 让标题栏的信息区成为气泡的“定位锚点” */
#chat-header-info {
    position: relative; /* 这是让气泡相对于它定位的关键 */
}

/* 2. 气泡本身的核心样式 */
.status-bubble {
    position: absolute;
    top: 100%; /* 从父元素的底部开始 */
    left: 0;
    margin-top: 8px; /* 与状态栏之间留出一点空隙 */
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 100;
    display: flex; /* 让内部按钮横向排列 */
    overflow: hidden; /* 确保内部按钮不会超出圆角 */
    border: 1px solid #eee;
}

/* 3. 气泡内部按钮的样式 */
.status-bubble button {
    background: none;
    border: none;
    padding: 8px 16px;
    cursor: pointer;
    font-size: 14px;
    color: #333;
    transition: background-color 0.2s;
}

.status-bubble button:hover {
    background-color: #f5f5f5;
}

/* 4. 按钮之间的分割线 */
.status-bubble button:first-child {
    border-right: 1px solid #eee;
}
/*
================================================================
 V-HTML-THEATER: HTML小剧场专属适配补丁 (最终通用版)
================================================================
*/

/* 
   这是为我们在JS里创建的那个专属容器 .message-html-container 设定的规则
*/
.message-html-container {
    /* 
       【魔法】使用负外边距，让这个容器向外扩张，
       从而完美抵消掉父级气泡(.message)自带的内边距(padding)。
       这会让内部的小剧场看起来像是无缝地充满了整个气泡。
    */
    margin: -8px -12px;
}

/* 
   这是为小剧场本身（容器里的第一个div）设定的规则
*/
.message-html-container > div {
    width: 100% !important; /* 强制宽度撑满 */
    max-width: 100% !important;
    border-radius: var(--radius-lg); /* 继承和气泡一样的圆角 */
    overflow: hidden; /* 裁剪掉所有超出圆角的内容 */
    border: none !important; /* 移除小剧场可能自带的边框 */
}
/* --- 全新：小剧场“添加”按钮的专属样式 (终极修复版) --- */

/* 基础样式：让它看起来像个占位符 */
.suggestion-button.add-placeholder {
    background: transparent;                 /* 1. 背景必须是透明的 */
    color: var(--text-secondary);            /* 2. 使用你已定义的次要文字颜色 (灰色) */
    border: 2px dashed var(--border-color);  /* 3. 使用你已定义的边框颜色，并设为虚线 */
    box-shadow: none;                        /* 4. 【关键】移除普通按钮自带的阴影，让它更扁平 */
    transition: all 0.2s ease-in-out;
}

/* 鼠标悬停时的样式 */
.suggestion-button.add-placeholder:hover {
    background: rgba(80, 151, 205, 0.1);  /* 5. 悬停时给一个淡淡的主题色背景 */
    color: var(--qq-blue);                   /* 6. 文字颜色变为你的主题色 */
    border-color: var(--qq-blue);            /* 7. 虚线框颜色也变为你的主题色 */
}
/* --- 全新：为小剧场编辑页的顶部操作按钮，进行终极美化 (V2.0) --- */

/* 1. 指挥“展示柜”，让按钮们横向排队 (保持不变) */
.modal-header .header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 2. 【核心改造】美化每一个按钮本身 */
.header-actions .header-button {
    width: 32px;  /* 强制宽度，让它变小 */
    height: 32px; /* 强制高度，确保是正方形 */
    padding: 0;   /* 移除内边距，防止变形 */
    background: none;
    border: none;
    border-radius: 50%; /* 正方形+50%圆角=完美圆形 */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
    color: #8e8e93; /* 设置一个默认的图标颜色 */
}

/* 3. 【核心改造】美化按钮里的SVG图标 */
.header-actions .header-button svg {
    width: 20px;
    height: 20px;
}
.header-actions .header-button svg path {
    stroke: currentColor;
}

/* ▼▼▼ 【【【全新植入：删除按钮专属“像素级校准”补丁】】】 ▼▼▼ */
.header-actions #delete-little-theater-btn svg {
    position: relative; /* 指令1：解锁微调能力 */
    top: 1px;           /* 指令2：向下移动1个像素！ */
}

/* 4. 添加漂亮的鼠标悬停效果 (保持不变) */
.header-actions .header-button:hover {
    background-color: rgba(0, 0, 0, 0.08);
}

/* 5. (锦上添花) 为删除按钮添加一个危险警告的悬停效果 */
.header-actions #delete-little-theater-btn:hover {
    background-color: rgba(229, 57, 53, 0.1);
    color: #e53935; /* 悬停时，按钮的颜色变为红色 */
}
/* --- 【全新】弹窗层级修复补丁 --- */
/* 这张“VIP通行证”拥有更高的z-index，可以确保它显示在最顶层 */
.modal-overlay.modal-on-top {
    z-index: 1005; 
}
/* --- 【全新】小剧场列表弹窗居中修复补丁 --- */
#little-theater-list-modal.modal-overlay {
    align-items: center; /* 魔法！命令它垂直居中！ */
    padding-top: 0;      /* (推荐) 同时把顶部的安全距离也去掉，实现完美居中 */
}
/* --- 【全新 V3.0】HTML小剧场气泡圆角裁剪 --- */
/* 我们现在只需要保留裁剪功能，让内边距恢复默认！ */
.message.message-html-widget {
    overflow: hidden;
}
/* --- 【【【全新V9.0：AI天气详情“精细间距”终极补丁】】】 --- */

/* 1. 压缩“今日详情”区域与上方七日天气的距离 */
#ai-weather-today-details {
    display: flex;
    flex-direction: column;
    margin-top: 7px;   /* 【瘦身】从 25px 缩小到 15px */
    padding-top: 7px;  /* 【瘦身】从 25px 缩小到 15px */
    border-top: 1px solid var(--glass-border);
}

/* 2. 压缩“标题栏”与下方六宫格的距离 */
.details-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px; /* 【瘦身】从 25px 缩小到 20px */
    padding: 0 5px;
}
.details-header span {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-dark);
}

/* 3. “六宫格”的装修图纸 (这个保持不变，它本身是正确的) */
.details-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    row-gap: 25px;
}

/* 4. 每个“小格子”内部的样式 (这个也保持不变) */
.detail-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.detail-icon {
    width: 28px;
    height: 28px;
    margin-bottom: 8px;
}
.detail-icon svg {
    width: 100%;
    height: 100%;
}
.detail-value {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-dark);
}
.detail-label {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 2px;
}
/*
================================================================
 V-ULTIMATE-FIX-V5: HTML小剧场宽度还原与居中终极补丁
================================================================
*/

/* 步骤1: 命令小剧场消息行，将内部所有内容都水平居中 */
.message-row--html-widget {
    justify-content: center !important;
}

/* 步骤2: 隐藏AI头像 */
.message-row--html-widget .avatar {
    display: none;
}

/* 步骤3: 【【【最核心！】】】为内容区解除宽度限制，让HTML恢复其自然宽度 */
.message-row--html-widget .message-content {
    max-width: none;
}

/* 步骤4: 让“气泡”变得透明隐形 */
.message-row--html-widget .message {
    padding: 0 !important;
    background: none !important;
    box-shadow: none !important;
}

/* 步骤5: 确保iframe本身能正确显示 */
.message-row--html-widget iframe {
    border: none;
    display: block; /* 消除iframe底部可能出现的微小空隙 */
}