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

:root {
    /* ======================================================= */
    /* ============= 全局主题化遥控器 (V3.0 终极版) ============ */
    /* ======================================================= */

    /* --- 【【【全新植入：磨砂层文字颜色遥控器】】】 --- */
    --frosted-layer-text-color: #2B3A4C; /* 解释：这就是我们新增的遥控器，默认是深色 */
    
    /* --- 1. 全局基础 --- */
    --global-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    
    /* 【【【核心修复】】】 */
    /* 解释：我们在这里新增了三个遥控器，专门用来控制最终的背景！ */
    --global-background-image: none; /* 图片遥控器 */
    --global-background-start-color: #EFF7FB; /* 渐变起始色遥控器 */
    --global-background-end-color: #5097CD; /* 渐变结束色遥控器 */
    
    /* --- 2. 核心颜色遥控 (这是所有颜色的源头！) --- */
    --global-theme-color: #5097CD; /* 渐变起始色 */
    --global-theme-color-end: #3b69a2; /* 【【【全新】】】渐变结束色 */
    --global-theme-color-rgb: 80, 151, 205;
    --global-theme-color-end-rgb: 59, 105, 162; /* 【【【全新】】】 */

    /* --- 3. 智能衍生的颜色与效果 --- */
    --gradient-primary: linear-gradient(135deg, var(--global-theme-color) 0%, var(--global-theme-color-end) 100%);
    --gradient-background: linear-gradient(135deg, rgba(var(--global-theme-color-rgb), 0.2) 0%, rgba(var(--global-theme-color-end-rgb), 0.3) 100%);
    --shadow-primary: 0 4px 15px rgba(0, 0, 0, 0.15);
    --shadow-primary-hover: 0 6px 20px rgba(0, 0, 0, 0.2);
    --bg-primary-hover: rgba(var(--global-theme-color-rgb), 0.1);
    /* --- 4. 各个区域的遥控信号 --- */
    --header-background: var(--gradient-primary);
    --header-blur: 20px;
    --header-text-color: #ffffff;
    --chat-list-background-image: none;
    --chat-list-background-color: transparent;
    --chat-list-blur: 10px;
    --chat-window-background-image: none;
    --chat-window-background-color: transparent;
    --chat-window-blur: 0px;
    /* 【【【核心修复】】】 */
    /* 解释：我们将背景从“淡淡的主题色”换成了“半透明的乳白色”，
       这是实现精致毛玻璃质感的经典配方。同时，我们稍微加大了模糊的强度。*/
    /* ▼▼▼ 【【【全新植入：高级外观遥控器】】】 ▼▼▼ */
    --header-background-image: none;
    --header-opacity: 0.85; /* 默认透明度 */

    --input-area-opacity: 0.55; /* 默认透明度 */
    /* ▲▲▲▲▲ 植入完毕 ▲▲▲▲▲ */
    
    --input-area-background: rgba(255, 255, 255, 0.1); /* 【【【保留】】】这是控制整个区域的模糊背景色 */
    --input-area-blur: 15px;                           /* 【【【保留】】】这是控制整个区域的模糊度 */
    
    /* ▼▼▼ 【【【全新植入：聊天输入框本身专属遥控器】】】 ▼▼▼ */
    --input-box-bg-color-rgb: 255, 255, 255; /* 默认白色 */
    --input-box-bg-opacity: 1;              /* 默认完全不透明 */
    --input-box-bg-blur: 0px;               /* 默认不模糊 */
    --input-box-border-color: rgba(var(--global-theme-color-rgb), 0.2); /* 智能边框颜色 */
    --input-box-shadow: inset 0 1px 3px rgba(var(--global-theme-color-rgb), 0.1); /* 智能内阴影 */
    --input-box-bg-image: none; /* 【【【全新植入：输入框本身背景图遥控器】】】 */
    /* ▲▲▲▲▲ 植入完毕 ▲▲▲▲▲ */

    --user-bubble-text-color: #FFFFFF; /* 【【【全新植入：用户气泡文字颜色遥控器】】】 */
    /* --- 6. 功能图标 (P1) --- */
    /* (我们暂时不在这里设置图片，让默认的SVG图标显示出来) */
    --icon-voice-image: none;
    --icon-image-image: none;
    --icon-camera-image: none;
    --icon-red-packet-image: none;
    --icon-emoji-image: none;
    --icon-ai-helper-image: none;
    --icon-more-functions-image: none;
    --icon-send-image: none;

    /* --- 5. 其他旧变量 --- */
    --text-dark: #2B3A4C;
    --text-light: #fff;
    --text-secondary: #8e8e93;
    --border-color: rgba(var(--global-theme-color-rgb), 0.2);
    --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-full: 50%;
    --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;
    background-color: transparent !important; /* 试着改成透明 */
    -webkit-tap-highlight-color: transparent;
    
    /* 【【【终极核心修复 V2.0】】】 */
    display: flex;
    flex-direction: column;
    /* 核心：先设置一个兜底的100vh，然后用现代浏览器支持的 100dvh (动态视口高度) 来完美适配移动端地址栏 */
    height: 100vh; 
    height: 100dvh;
    overflow: hidden; /* 再次确保不会出现双重滚动条 */
}




@keyframes twinkle {
    0% { opacity: 0.3; }
    100% { opacity: 1; }
}
#app-container {
    flex: 1;
    min-height: 0;
    
    display: flex;
    flex-direction: column; 
    overflow: hidden; 
    position: relative; 
    background-color: transparent;
    height: 100%; 
    padding-top: 0 !important; /* 【核心修复】强制顶部无间距 */
    margin-top: 0 !important;  /* 【核心修复】强制顶部无间距 */
}
.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: none !important; 
    box-shadow: none !important;
    
    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: transparent;
}
/* 普通消息卡片 - 【精致磨砂风格】 */
.chat-list-item {
    display: flex;
    align-items: center;
    padding: 10px 15px !important; 
    min-height: 68px !important;
    margin: 8px 12px !important; /* 稍微加大间距，更透气 */
    gap: 12px !important;
    border-radius: 18px !important;
    
    /* 核心修复：改用不含图片的 background-color */
    background-color: rgba(255, 255, 255, 0.7) !important;
    
    /* 增强移动端模糊兼容性 */
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.2s ease !important;
    
    /* 解决部分手机上内容溢出遮挡模糊的问题 */
    overflow: hidden;
}
/* 【新增】置顶聊天的特殊背景色 */
.chat-list-item.pinned {
    /* 【【【核心修复】】】 */
    /* 解释：我们把之前从普通条目上“脱”下来的毛玻璃样式，完整地“穿”在了置顶条目上！*/
    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);
}
.chat-list-item:hover {
    /* 【【【核心修复】】】 */
    /* 解释：因为普通条目已经是透明的了，所以悬停时不应该再出现灰色背景。
       我们把这条规则删掉，或者用一个非常非常淡的、几乎看不见的颜色来提供反馈。*/
    background-color: rgba(255, 255, 255, 0.05) !important;
}
.chat-list-item:hover { 
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(var(--global-theme-color-rgb), 0.2);
    background: rgba(255, 255, 255, 0.35);
}
/* 列表头像 - 干净无框风格 */
.chat-list-item .avatar { 
    width: 46px; /* 稍微缩小一点点，看起来更精致 */
    height: 46px; 
    border-radius: 12px; /* 平滑的圆角 */
    
    /* 去掉有色边框，只留极细的白线增加层次 */
    border: 1px solid rgba(255, 255, 255, 0.6); 
    
    /* 阴影改为非常淡的黑色投影，立体感更强 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    
    object-fit: cover;
    flex-shrink: 0;
}
.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); }

/* 【【【王牌修复指令】】】 */
/* 解释：这条指令的优先级极高，它命令所有“不是置顶”的列表项，其姓名颜色必须是 #2B3A4C 这个深灰色！*/
.chat-list-item:not(.pinned) .chat-list-item-name {
    color: #2B3A4C !important;
}
.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;
overflow-x: hidden;
display: flex;
flex-direction: column;
gap: 15px;
/* 【遥控已接入】背景由CSS变量控制 */
background-image: var(--chat-window-bg-image);
background-color: var(--chat-window-background-color);
backdrop-filter: blur(var(--chat-window-blur));
-webkit-backdrop-filter: blur(var(--chat-window-blur));
background-size: cover;
background-position: center;
}
.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: var(--shadow-primary);
}
.message-content { display: flex; flex-direction: column; gap: 3px; max-width: calc(100% - 100px); position: relative; }
.message {
    /* 【【【终极修复：安装“智能居中对齐系统”】】】 */
    display: flex;       /* 指令1：命令气泡变成一个“智能容器” */
    align-items: center; /* 指令2：魔法！命令内部所有文字都垂直居中 */
    
    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; /* 最小宽度，防止太短不好看 */
}
/* 【【【终极修复！！！】】】通话时长记录气泡样式 */
.message-voice-call-record {
    display: flex;
    align-items: center;
    gap: 8px; /* 图标和文字的间距 */
    font-size: 15px;
    color: #333; /* 文字颜色 */
}

.vc-record-icon {
    display: flex; /* 【修复1】给图标的直接父容器加上flex，为居中做准备 */
    align-items: center; /* 【修复2】垂直居中对齐！ */
}

.vc-record-icon svg {
    width: 16px; /* 【修复2】把尺寸从20px缩小到16px，与文字大小更协调 */
    height: 16px;
    fill: #8e8e93; /* 默认颜色保持深灰色 (AI侧) */
    transform: translateY(1px); /* 【修复3】向下微调1个像素，实现完美视觉居中 */
}

/* 【【【终极修复！！！】】】为用户气泡里的图标单独设置颜色 */
.user-row .message-voice-call-record .vc-record-icon svg {
    fill: white; /* 指令1：颜色改为白色！ */
}
.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(--global-theme-color); /* <--- 已修复 */
}
.assistant-row .play-icon-container svg {
    fill: var(--global-theme-color); /* <--- 已修复 */
}
.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: #ffffff !important; /* <--- 已修复 */
    padding: 10px 12px;
    border-radius: 10px;
    margin-top: 5px;
    font-size: 15px;
    line-height: 1.5;
    color: #333333 !important; /* <--- 已修复 */
    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(--user-bubble-text-color); 
    align-self: flex-end;
    box-shadow: var(--shadow-primary);
}
.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(--global-theme-color); border-color: var(--global-theme-color); 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: rgba(0, 0, 0, 0.05); /* 【修复1】背景改为半透明的黑色，在任何背景下都清晰可见 */
    border-top: 1px solid rgba(0, 0, 0, 0.1); 
    display: flex; 
    flex-wrap: wrap; 
    gap: 10px;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05); /* 【修复2】阴影改为中性色 */
}
.suggestion-button { 
    background: rgba(255, 255, 255, 0.7); /* 【修复3】按钮背景改为半透明白色 */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-xl); 
    padding: 8px 16px; 
    font-size: 13px; 
    cursor: pointer; 
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* 【修复4】阴影改为更柔和的中性色 */
}
.suggestion-button:hover { 
    background: var(--gradient-primary); 
    color: white; 
    border-color: var(--global-theme-color);
    transform: translateY(-1px);
    box-shadow: var(--shadow-primary);
}
.chat-input-area { 
    display: flex; 
    flex-direction: column; 
    flex-shrink: 0; 
    /* 1. 核心修复：为输入框区域添加基础半透明背景 */
    background-color: rgba(255, 255, 255, var(--input-area-opacity, 0.55)) !important;
    
    /* 2. 应用模糊 */
    backdrop-filter: blur(var(--input-area-blur, 15px)) !important; 
    -webkit-backdrop-filter: blur(var(--input-area-blur, 15px)) !important;
    
    position: relative;
    box-shadow: 0 -2px 15px rgba(0,0,0,0.08);
    z-index: 10;
}
.chat-functions-toolbar {
    padding: 2px 15px;
    display: flex;
    justify-content: space-between; /* 从space-around改为space-between */
    background: transparent; /* (解释：将背景设为完全透明，图标的“底座”就消失了) */
    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: var(--bg-primary-hover); /* <--- 已修复 */
    transform: scale(1.1);
}
.tool-button svg {
    width: 20px;
    height: 20px;
    stroke: var(--toolbar-icon-color, #000); /* 【安装遥控接收器1】 */
    opacity: var(--toolbar-icon-opacity, 0.4); /* 【安装遥控接收器2】 */
    mix-blend-mode: var(--toolbar-icon-blend-mode, multiply); /* 【安装遥控接收器3】 */
    transition: all 0.3s ease;
}


/* 单独处理发送按钮 */
#send-button { 
    border: none; 
    background-color: var(--global-theme-color); 
    color: var(--text-light); 
    border-radius: 8px; 
    cursor: pointer; 
    font-weight: bold; 
    padding: 10px 20px;
    flex-shrink: 0; 
}
.tool-button:hover svg { 
    stroke: var(--global-theme-color);
    /* transform 已被父级控制，这里不再需要 */
}
#chat-input { 
    flex-grow: 1; 
    border: none; 
    background-color: var(--background-white); 
    border-radius: 12px; 
    padding: 0px 15px; /* 核心修改：大胆地把上下内边距压缩到 5px！ */
    font-size: 16px; 
    resize: none; 
    max-height: 100px; 
}
#send-button { 
    border: none; 
    background: var(--gradient-primary); /* 【修复】改用渐变背景 */
    color: var(--text-light); 
    border-radius: 8px; 
    cursor: pointer; 
    font-weight: bold; 
    padding: 10px 20px;
    flex-shrink: 0; 
    box-shadow: var(--shadow-primary); /* 【修复】加上统一的阴影 */
    transition: all 0.3s ease;
}

#send-button:hover {
    transform: translateY(-1px);
    /* 解释：我们把这里带颜色的阴影，换成了更柔和、更通用的无色阴影。 */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

/* 解释：这段全新的代码就是专门用来对付那个蓝色光环的！ */
#send-button:focus-visible {
    outline: none; /* 1. 移除浏览器默认的蓝色轮廓线 */
    /* 2. 给它一个和悬停时类似的、漂亮的无色阴影作为替代 */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); 
}

/* --- 视图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(--global-theme-color); /* <--- 已修复 */
    color: white;
    border-radius: 50%;
    border: none;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* --- 视图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; 
    background-color: transparent; /* (解释：背景改为透明) */
    border-bottom: none;          /* (解释：彻底移除底边框！) */
}
#fetch-models-button { 
    padding: 10px 20px;
    border: none; 
    background: var(--gradient-primary); /* 【修复】改用渐变背景 */
    color: var(--text-light); 
    border-radius: 5px; 
    cursor: pointer; 
    flex-shrink: 0; 
    font-weight: bold;
    box-shadow: var(--shadow-primary); /* 【修复】使用变量阴影 */
    transition: all 0.3s ease;
}
#fetch-models-button:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-primary-hover); /* 【修复】使用变量阴影 */
}
#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: var(--shadow-primary); /* (解释：换上主题遥控的阴影) */
    transition: all 0.3s ease;
}

#save-settings-button:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-primary-hover); /* (解释：悬停时的阴影也换上遥控) */
}
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); 
    /* ▼▼▼ 【核心修改】将左右外边距从 15px 缩小到 5px，极大拉宽卡片！ ▼▼▼ */
    margin: 0 5px 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(--global-theme-color); /* <--- 已修复 */
    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(var(--global-theme-color-rgb), 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(var(--global-theme-color-rgb), 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(--global-theme-color); 
    background: var(--bg-primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(var(--global-theme-color-rgb), 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(--global-theme-color); /* <--- 已修复 */
    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(--global-theme-color);     /* <--- 已修复 */
    background: var(--bg-primary-hover);       /* <--- 已修复 */
    color: var(--global-theme-color);            /* <--- 已修复 */
    transform: translateY(-1px);
}
#save-ai-profile-button,
#save-ai-weather-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: var(--shadow-primary);
    transition: all 0.3s ease;
}

#save-ai-profile-button:hover {
    transform: translateY(-1px);
    /* 【【【核心修复】】】 */
    /* 解释：悬停时的阴影也必须使用遥控器，才能同步变化！ */
    box-shadow: var(--shadow-primary-hover);
}
.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-overlay.modal-centered {
    align-items: center; /* 魔法！命令它垂直居中！ */
    padding-top: 0;      /* (推荐) 同时把顶部的安全距离也去掉，实现完美居中 */
}
.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(var(--global-theme-color-rgb), 0.3); /* <--- 已修复 */
}

/* --- 底部导航栏 --- */
#app-nav { 
    position: fixed; /* 魔法1: 也让导航栏悬浮 */
    bottom: 0;       /* 魔法2: 把它钉在屏幕最底部 */
    left: 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; 
    padding-bottom: env(safe-area-inset-bottom); /* 把安全区适配加到这里 */
}
.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: var(--bg-primary-hover); /* <--- 已修复 */
    color: var(--global-theme-color);    /* <--- 已修复 */
}
.nav-button.active { 
    color: var(--global-theme-color); 
    background: var(--bg-primary-hover);
    font-weight: 600;
}

/* 用户发送的真实图片消息样式 */
.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; /* 鼠标放上去时，背景变成更深的红色 */
}
/* --- 【全新】红包系统样式 --- */

/* --- 【全新V2.0】微信风格红包卡片样式 --- */
.message-red-packet {
    background-color: #FA9D3B !important; /* 1. 微信红包的经典亮橙色 */
    color: white !important;
    padding: 12px 15px !important; /* 调整内边距，让它更精致 */
    width: 240px;
    cursor: pointer;
    border-radius: 8px !important;
    transition: background-color 0.2s;
    position: relative;
    box-shadow: none !important; /* 移除多余的阴影 */
    border: none !important; /* 移除边框 */
}
.message-red-packet:hover {
    background-color: #F98E22 !important; /* 悬停时颜色稍微加深 */
}
.message-red-packet.opened {
    background-color: #FBE5D2 !important; /* 2. 已领取后，变成淡淡的、偏灰的橙色 */
    cursor: default;
}
/* 强制内部文字颜色 */
.user-row .message.message-red-packet * {
    color: white !important;
}
.assistant-row .message.message-red-packet .rp-bubble-info p {
    color: white !important;
}
.assistant-row .message.message-red-packet .rp-bubble-info span {
    color: rgba(255, 255, 255, 0.9) !important;
}
.message-red-packet.opened .rp-bubble-info p {
    color: #CEA886 !important; /* 3. 已领取后，祝福语文字变为深橙色 */
}
.message-red-packet.opened .rp-bubble-info span {
    color: #D6B99B !important; /* 4. 已领取后，状态文字用更浅的颜色 */
}
.rp-bubble-icon {
    font-size: 32px; /* 缩小红包图标，让它更协调 */
}

/* 红包详情弹窗样式 */
.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; }


/* 自定义弹窗内的文本样式 */
#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; }

/* --- 【【【全新 V8.0：系统提示终极美学修复版 (稳定版)】】】 --- */
.timestamp-display,
.system-message {
    /* 解释1：【终极修复】我们现在使用 Flexbox 布局，这是现代CSS中实现完美居中的“标准答案”！ */
    display: flex;
    align-items: center;
    justify-content: center;

    margin: 10px auto; 
    max-width: 80%;
    /* 【【【核心改造：接入全新的RGB遥控信号！】】】 */
    background-color: rgba(var(--header-text-color-rgb, 255, 255, 255), 0.2);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    /* 解释2：【终极修复】遵命！把圆角加大，让它更圆润。 */
    border-radius: 16px; 
    
    /* 解释3：【终极修复】遵命！调整内边距，上下增加了一点点（为了绝对居中），左右也相应调整，让它更像“圆角矩形”而不是“胶囊”！ */
    padding: 1px 5px;
    
    font-size: 12px;
    line-height: 1.4;
    /* 【【【核心改造：接入全新的RGB遥控信号！】】】 */
    color: rgba(var(--header-text-color-rgb, 255, 255, 255), 0.75);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); 
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    border: none; 
}
/* --- 【【【核心新增：表情包系统样式】】】 --- */

/* 聊天气泡中的表情包消息样式 */
.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: 45vh; /* <-- 核心修改在这里！我们将高度提升至屏幕的45% */
    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: 65px; /* <-- 核心修改：尺寸缩小，以适应新的网格规则 */
    height: 65px; /* <-- 核心修改：尺寸缩小，以适应新的网格规则 */
    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(--global-theme-color); /* <--- 已修复 */
    border-color: var(--global-theme-color);     /* <--- 已修复 */
}

/* 用伪元素绘制那个“√”号 */
.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(--global-theme-color); /* <--- 已修复 */
}

/* --- (全新) 记忆总结弹窗样式 --- */
.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(--global-theme-color); /* <--- 已修复 */
    background-color: #f0f2f5;
}
.summary-threshold-display:hover {
    border-color: var(--border-color);
}
.summary-threshold-input {
    width: 60px;
    padding: 4px 8px;
    border: 1px solid var(--global-theme-color); /* <--- 已修复 */
    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 容器 --- */
#toast-container {
    position: fixed;
    top: 20px; /* 距离顶部的位置 */
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column; /* 垂直堆叠 */
    align-items: center;
    gap: 10px; /* 弹窗之间的间距 */
    width: auto;
    pointer-events: none; /* 让点击穿透容器空白处 */
}

/* --- 单个 Toast 条目 (完美复刻您的 fix-colors.css 样式) --- */
.global-toast-item {
    /* 布局与动画 */
    pointer-events: auto;
    min-width: 200px;
    max-width: 80vw;
    padding: 15px 25px;
    font-size: 14px;
    text-align: center;
    border-radius: 12px; /* 稍微圆润一点，适合悬浮条 */
    
    /* 进出场动画 */
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);

    /* --- 强制应用您喜欢的视觉样式 (来自您的 fix-colors.css) --- */
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #333 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
}

/* 显示状态 */
.global-toast-item.show {
    opacity: 1;
    transform: translateY(0);
}

/* 成功/失败状态 (用左侧边框颜色区分，因为背景被强制为白色了) */
.global-toast-item.success {
    border-left: 5px solid #4CAF50 !important;
}
.global-toast-item.error {
    border-left: 5px solid #f44336 !important;
}
/* --- (全新) 情侣关系标志样式 --- */
.partner-icon {
    margin-left: 6px;
    font-size: 14px; /* 可以调整大小 */
    filter: drop-shadow(0 0 1px rgba(0,0,0,0.3)); /* 给图标一点立体感 */
}
/* --- 【全新 V2.2】关系/分手卡片精装修样式 (空间压缩终极版) --- */
.message-relationship-card,
.message-breakup-card {
    background: #fff !important;
    border-radius: 12px !important;
    padding: 18px 18px 10px 18px !important; /* 【瘦身手术1】大幅减少卡片底部的内边距！ */
    width: 280px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    border: 1px solid #f0f0f0;
    cursor: pointer;
}
.relationship-card-content,
.message-breakup-card > div:first-child {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 15px;
    padding-bottom: 10px; /* 【瘦身手术2】在内容区和分割线之间也增加一个明确的、较小的间距 */
}
.relationship-card-text h4,
.message-breakup-card h4 {
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: bold;
    color: #000 !important;
}
.relationship-card-text p,
.message-breakup-card p {
    margin: 0;
    font-size: 14px;
    color: #888 !important;
}
.relationship-card-icon img {
    width: 48px;
    height: 48px;
    border-radius: 8px;
}
.relationship-card-footer,
.message-breakup-card .relationship-card-footer {
    border-top: 1px solid #f0f0f0;
    margin-top: 0;      /* 【瘦身手术3】彻底移除多余的外边距 */
    padding-top: 8px;   /* 【瘦身手术4】只保留分割线上方一个很小的内边距 */
    font-size: 12px;
    color: #aaa !important;
}
.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: transparent; /* 既然body有背景，header可以更通透 */
    /* 移除底部边框，让视觉更连贯 */
    border-bottom: none; 
    color: var(--text-light);
    /* 增加顶部内边距，避免贴着手机状态栏 */
    padding: 15px 16px 5px 16px; 
    flex-shrink: 0;
    display: flex;
    align-items: center;
    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: var(--shadow-primary); /* <--- 已修复 */
}

.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: var(--shadow-primary); /* <--- 已修复 */
}

#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(--global-theme-color); /* <--- 已修复 */
}
/* --- 【全新】更多功能抽屉样式 --- */
.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(--global-theme-color); /* <--- 已修复 */
    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);
}

/* --- 【终极重写：单页固定网格扩展功能面板】 --- */

/* 1. 主面板：现在它自己就是网格容器！ */
#extended-functions-panel {
    background-color: #f7f8fa;
    
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 1fr);
    
    /* 核心修正1：默认状态下，移除上下的内边距“砖头” */
    padding: 0px 10px;
    
    box-sizing: border-box;
    gap: 12px 8px;
    
    /* 核心修正2：把 padding 也加入到过渡动画中，让变化更平滑 */
    transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out;
    max-height: 0;
    overflow: hidden;
}

/* 核心改造2：增加展开后的高度，以容纳三行图标 */
#extended-functions-panel.is-open {
    max-height: 330px; 
    
    /* 核心修正3：只在展开时，才把上下15像素的内边距“砖头”放回去 */
    padding: 15px 10px;
}

/* 2. 图标本身（Item）：样式保持不变 */
.function-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-align: center;
}
.function-icon {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    background-color: #ffffff;
    border-radius: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 6px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.04);
}
.function-icon svg {
    width: 22px;
    height: 22px;
}
.function-label {
    font-size: 12px;
    color: #666;
}
/* --- 【全新】侧滑菜单遮罩层样式 --- */
.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(--global-theme-color); /* <--- 已修复 */
    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: 12px 18px;
    border: none;
    background-color: rgba(255, 255, 255, 0.7); /* 【【【终极修复】】】 */
    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(--global-theme-color); /* <--- 已修复 */
    transform: scale(1.1);
}
.search-filters-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: none !important; 
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
    box-shadow: 0 4px 20px rgba(80, 151, 205, 0.1);
    /* (解释：我们把这条制造“假阴影”的底边框也彻底删掉了！) */
    border-bottom: none !important;
}
.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: var(--shadow-primary);
}
.load-more-btn:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(var(--global-theme-color-rgb), 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; /* 悬停时叉号变白，更清晰 */
}
/* --- 【全新V3】手账风格记账卡片 (账本页) --- */
.message-accounting-card {
    background-color: #FDFCF9 !important; /* 1. 模拟账本纸张的米白色 */
    /* 2. 用渐变画出淡淡的横线，核心魔法！ */
    background-image: repeating-linear-gradient(
        to bottom,
        transparent,
        transparent 20px,
        #f0ebe5 21px,
        #f0ebe5 21px
    ) !important;
    background-size: 100% 21px; /* 每条线的高度 */
    background-position-y: 10px; /* 让第一条线从合适的位置开始 */

    border-radius: 12px !important;
    padding: 15px 18px !important; /* 统一设置内边距 */
    width: 280px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    border: 1px solid #EAE6E1;
    overflow: hidden;
}
.accounting-card-header {
    display: flex;
    align-items: center;
    padding: 0 0 12px 0; /* 只需要底部和内容的间距 */
    gap: 10px;
    border-bottom: 2px solid #E0D8CC; /* 更粗的分割线，像账本的表头 */
}
/* 3. 为图标和标题创建了一个专属的“包厢” */
.accounting-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}
.accounting-card-icon svg {
    /* 4. 让SVG图标的颜色变得和谐 */
    stroke: #A89B8C !important; 
    fill: #A89B8C !important;
}
.accounting-card-header h4 {
    margin: 0;
    font-size: 16px;
    font-weight: bold;
    color: #5D4037 !important; /* 5. 使用沉稳的棕色作为标题色 */
}
.accounting-item-list {
    padding: 12px 0 0 0; /* 列表离表头有一点距离 */
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.accounting-item {
    display: flex;
    justify-content: space-between;
    align-items: center; /* 垂直居中，让排版更整齐 */
}
.accounting-item-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.accounting-item .item-name {
    font-size: 14px;
    color: #4E342E !important; /* 6. 项目名用深棕色 */
    font-weight: 500;
}
.accounting-item-remarks {
    font-size: 11px;
    color: #9E9E9E !important; /* 7. 备注用更浅的灰色 */
    font-style: normal; /* 取消斜体，让它更像手写备注 */
}
.accounting-item .item-amount {
    font-size: 14px;
    color: #4E342E !important;
    font-weight: bold;
    flex-shrink: 0;
    padding-left: 10px;
}
.accounting-item .item-amount.income {
    color: #4CAF50 !important; /* 8. 收入用更鲜明的绿色 */
}
/* --- 【全新】账本视图样式 --- */
#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: rgba(0, 0, 0, 0.04); /* (解释：给没选中的按钮一个淡淡的灰色背景) */
    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(--global-theme-color); /* <--- 已修复 */
    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: 45vh; /* <-- 核心修改在这里！我们将高度提升至屏幕的45% */
}
.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：智能响应式网格布局】】】 */
    /* 解释：创建尽可能多的列，每列宽度在65px到1fr之间智能调整 */
    grid-template-columns: repeat(auto-fill, minmax(65px, 1fr));
    
    /* 为网格中的项目之间增加更紧凑的间隙 */
    gap: 8px;
    
    /* 我们不再需要 justify-content: center 了，因为1fr会自动处理空间分配 */
}
/* --- 【全新】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;
    position: relative; /* 【【【修复二：为本地上传预览区派发图纸】】】 */
}
.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;
    position: relative; /* 【【【修复三：为URL上传区也派发图纸】】】 */
}
.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;
    /* 关键：给一个极淡的背景色作为模糊载体 */
    background-color: rgba(255, 255, 255, 0.05) !important;
    /* 关键：允许模糊效果，并增加 Webkit 兼容 */
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !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; 

    /* 【【【终极修复V4：维度打击 - 建立独立布局结界】】】 */
    /* 解释：我们不再尝试对抗分栏指令，而是直接改变这个气泡的
       “物理法则”！通过将它声明为 display: grid，我们为它创建了
       一个独立的“布局结界”。在这个结界里，所有外部的分栏指令
       都会自动失效，从而从根本上解决问题。*/
    display: grid !important;
}
/* 1. 高亮样式：双引号内的内容 */
.offline-message .highlight {
background-color: rgba(var(--global-theme-color-rgb), 0.15); /* <--- 已修复 /
padding: 1px 4px;
border-radius: 4px;
color: var(--global-theme-color-dark); / <--- 已修复 */
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: var(--global-theme-color); /* <--- 已修复 */
    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 {
    /* (解释：我们把这里写死的背景删掉了，这样它就会自动使用我们在 body 上设置的全局主题渐变背景了！) */
    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 * {
    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 .side-menu-item .menu-icon svg,
body.dark-theme .weather-icon-container svg {
    stroke: var(--text-secondary);
}

/* 【【【核心修复：为功能栏图标单独下达“深色模式”指令】】】 */
body.dark-theme .tool-button svg {
    mix-blend-mode: normal !important; /* 指令1：关闭正片叠底！ */
    stroke: white !important;          /* 指令2：颜色变为纯白！ */
    opacity: 0.7 !important;           /* 指令3：调整透明度以适应深色背景 */
}
/* --- 【全新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%; 
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
    
    /* 【核心修复】默认颜色改为深灰色，确保在白底上可见 */
    color: #555 !important; 
}


/* 3. 【核心改造】美化按钮里的SVG图标 */
.header-actions .header-button svg {
    width: 20px;
    height: 20px;
    /* 强制使用当前文字颜色 */
    stroke: currentColor !important;
    fill: none;
}
/* 确保 path 也是这个颜色 */
.header-actions .header-button svg path {
    stroke: currentColor !important;
}


/* ▼▼▼ 【【【全新植入：删除按钮专属“像素级校准”补丁】】】 ▼▼▼ */
.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; /* 确保内容居中 */
    padding: 0 !important;
    width: 100% !important;
}

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

/* 步骤3: 【【【最核心！】】】为内容区解除宽度限制，让HTML恢复其自然宽度 */
.message-row--html-widget .message-content {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    display: flex;           /* 新增：开启 flex */
    justify-content: center; /* 新增：确保内部气泡居中 */
}

/* 步骤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底部可能出现的微小空隙 */
}
/*
================================================================
 V-VOICE-CALL: 语音通话功能专属样式
================================================================
*/

/* 1. 通话视图总布局 */
#voice-call-view {
    background-color: #808080; /* 你图片中的灰色背景 */
    color: white;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* 【核心修复】将 overflow-x 改为 overflow，同时隐藏水平和垂直的意外滚动条 */
    height: 100%; /* 【核心新增】强制它的高度撑满整个父容器 */
}

/* 2. 顶部栏 */
.voice-call-header {
    padding: calc(10px + env(safe-area-inset-top)) 15px 10px;
    display: flex;
    justify-content: flex-end; /* 让设置按钮靠右 */
    flex-shrink: 0;
}
.vc-header-btn {
    background: rgba(0,0,0,0.2);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.vc-header-btn svg {
    width: 24px;
    height: 24px;
}
.vc-header-btn svg path {
    fill: white;
}
.vc-header-btn svg path:last-child {
    fill: #1E1E1E; /* 图标中心的小圆点用深色 */
}

/* 3. 中间主体区域 */
.voice-call-main {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 15px;
    overflow-y: auto; /* 如果对话过长，允许滚动 */
}
.vc-profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
}
.vc-profile .avatar-large {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    margin-bottom: 15px;
}
#vc-name {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 8px;
}
#vc-status {
    font-size: 16px;
    color: rgba(255,255,255,0.8);
}

/* 4. 模拟对话容器 */
#vc-conversation-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px; /* 对话气泡之间的间距 */
    margin-top: auto; /* 核心！让对话内容始终“沉”在底部 */
}

/* 5. 特殊的环境音气泡 */
.vc-ambient-bubble {
    background: rgba(0,0,0,0.15);
    border-radius: 12px;
    padding: 12px 15px;
    font-size: 14px;
    color: rgba(255,255,255,0.7);
    font-style: italic;
    position: relative;
    cursor: pointer;
    width: 100%; /* 【新增】命令环境音框的宽度撑满它的容器 */
    box-sizing: border-box; /* (专业技巧) 确保padding不会让它溢出 */
}
.vc-ambient-switch-btn {
    position: absolute;
    bottom: 5px;
    right: 5px;
    background: rgba(0,0,0,0.3);
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.vc-ambient-switch-btn svg {
    width: 18px;
    height: 18px;
}
.vc-ambient-switch-btn svg path {
    stroke: white;
}


/* 6. 底部控制栏 (终极悬浮修复版) */
.voice-call-footer {
    z-index: 10;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 20px;
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
    flex-shrink: 0; /* 高度固定，禁止收缩 */
    background-color: #737373; /* 终极颜色校准：P3区域 */
}
.vc-control-btn {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.2);
}
.vc-control-btn.hangup {
    background-color: #ff3b30; /* 红色挂断按钮 */
}
.vc-control-btn svg {
    width: 32px;
    height: 32px;
    stroke: white;
}
.vc-control-btn.muted {
    background: rgba(255,255,255,0.3); /* 静音后的按钮背景色 */
}
/*
================================================================
 V-VOICE-CALL-V2: 语音通话界面重构样式
================================================================
*/

/* 1. 灰色背景上的半透明黑色遮罩 */
.voice-call-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.1); /* 在灰色背景上再叠加一层淡淡的黑色，增加层次感 */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* 【【【终极修复：安装金刚门！】】】 */
    box-sizing: border-box; /* 【【【终极核心修复！！！】】】 */
    /* 【核心修复】我们把多余的 padding-bottom 删掉了 */
}

/* 2. 主体内容区现在占据所有可用空间 */
#voice-call-view .voice-call-main {
    flex-grow: 1;
    min-height: 0; /* 防止flex布局溢出的关键 */
    padding: 10px 10px 0; /* 核心修复：上10px，左右10px，下0 */
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* 让内容从底部开始堆叠 */
}

/* 3. 【核心】可滚动的聊天记录容器，即P2中的圆角矩形 */
.vc-chat-history {
    background: rgba(0,0,0,0.15);
    border-radius: 16px;
    padding: 15px;
    width: 100%;
    max-height: 100%; /* 高度不能超过父容器 */
    overflow-y: auto; /* 内容超出时，允许滚动 */
    display: flex;
    flex-direction: column;
    gap: 15px; /* 气泡间距 */
}
.vc-chat-history::-webkit-scrollbar { display: none; } /* 隐藏滚动条 */
.vc-chat-history { -ms-overflow-style: none; scrollbar-width: none; }


/* 4. 底部输入区域重构 */
#voice-call-view .voice-call-footer {
    padding: 10px calc(10px + env(safe-area-inset-bottom));
    flex-shrink: 0;
}
.vc-input-area {
    display: flex;
    align-items: flex-end; /* 底部对齐 */
    gap: 10px;
    background: rgba(0,0,0,0.2);
    padding: 8px;
    border-radius: 24px;
}
#vc-chat-input {
    flex-grow: 1;
    border: none;
    background: transparent;
    color: white;
    padding: 8px 10px;
    font-size: 16px;
    resize: none;
    max-height: 80px;
    line-height: 1.5;
}
#vc-chat-input::placeholder {
    color: rgba(255,255,255,0.5);
}

/* 5. 缩小版的控制按钮 */
.vc-control-btn.small {
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.2);
}
.vc-control-btn.small svg {
    width: 20px;
    height: 20px;
}
.vc-control-btn.small.hangup {
    background-color: #ff3b30;
}
/*
================================================================
 V-VOICE-CALL-V3: 语音通话UI终极重构
================================================================
*/

/* 1. 主体内容区布局调整 */
#voice-call-view .voice-call-main {
    justify-content: flex-start; /* 默认状态：从顶部开始排列 */
    padding: 20px;
    display: flex;
    flex-direction: column;
    transition: justify-content 0.4s ease; /* 新增：让布局切换时有平滑的动画效果 */
    width: 100%; /* 【【【修复二：校准房间宽度】】】 */
    box-sizing: border-box; /* 【【【修复三：确保内边距不捣乱】】】 */
}
/* 【【【终极修复！！！】】】为“呼叫中”状态添加专属居中指令 */
#voice-call-view .voice-call-main.calling-phase {
    justify-content: center !important; /* 魔法！当有这个class时，所有内容将垂直居中！ */
    padding-bottom: 0 !important; /* 居中时，取消底部的安全区 */
}
.vc-profile {
    margin-bottom: 25px; /* 加大与下方对话框的距离 */
}

.vc-conversation-window {
    width: 100%;
    flex-grow: 1;
    min-height: 0;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    /* 【核心修复】我们把导致页面左右滑动的 margin 彻底删除了！ */
}
/* 3. 【全新】环境音容器回归正常布局 */
.vc-ambient-container {
    padding-top: 15px;
    padding-bottom: 10px;
    padding-left: 15px;  /* 【全新植入】为它补上左边距 */
    padding-right: 15px; /* 【全新植入】为它补上右边距 */
    box-sizing: border-box;
    flex-shrink: 0;
    z-index: 5;
}

/* 4. 【全新】聊天记录区域智能伸缩 */
.vc-chat-history {
    flex-grow: 1;
    min-height: 0;
    overflow-y: auto;
    /* padding: 0 15px; <-- 【修改4】移除它自己的左右内边距 */
    gap: 15px;
    display: flex;
    flex-direction: column;
}
/* 隐藏对话气泡中的头像 */
#voice-call-view .message-row .avatar {
    display: none;
}
/* 调整对话气泡最大宽度 */
#voice-call-view .message-content {
    max-width: 90%;
}
/* 【核心修复】为通话中的AI气泡，强制应用截图中看到的亮白色样式 */
#voice-call-view .assistant-row .message {
    background: #F5F5F5 !important;
    color: #1E1E1E !important;
    box-shadow: none !important;
    background-image: none !important;
}

/* 【核心修复】为通话中的用户气泡，强制应用一个对比鲜明的深灰色 */
#voice-call-view .user-row .message {
    background: #4A5568 !important; /* 【修改】换上一个更深、带有蓝色调的“深海灰蓝” */
    color: #FFFFFF !important; 
    box-shadow: none !important; 
    background-image: none !important;
}


.vc-input-area {
    z-index: 10;
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding: 10px 15px;
    padding-bottom: 15px;
    flex-shrink: 0;
    border-radius: 0;
    background-color: #626262 !important; /* 终极颜色校准：P1区域 */
}
#vc-chat-input {
    background: #4e4e4e; /* 终极颜色校准：P2区域 */
    border-radius: 24px;
    padding: 8px 15px;
}
.vc-send-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: #4A4A4A; /* 发送按钮默认背景 */
}
.vc-send-btn svg {
    width: 20px;
    height: 20px;
}
.vc-send-btn svg path {
    fill: none;
    stroke: white;
}

/* 4. 底部独立控制栏重构 */
#voice-call-view .voice-call-footer {
    padding: 15px calc(20px + env(safe-area-inset-bottom));
}
.vc-control-btn {
    width: 60px; /* 稍微缩小按钮尺寸 */
    height: 60px;
}
.vc-control-btn svg {
    width: 28px;
    height: 28px;
}
/*
================================================================
 V-VOICE-CALL-V4: 语音通话UI终极美化补丁
================================================================
*/

/* 1. 缩小并上移头像区域 - 解决问题6 */
.vc-profile {
    margin-bottom: 15px; /* 缩小与对话框的距离 */
}
.vc-profile .avatar-large {
    width: 100px; /* 缩小头像 */
    height: 100px;
    margin-bottom: 12px;
}
#vc-name {
    font-size: 20px; /* 缩小昵称 */
}
#vc-status {
    font-size: 14px; /* 缩小状态文字 */
}

/* 2. 【核心】固定环境音气泡 - 解决问题3 */
.vc-conversation-window {
    position: relative; /* 为内部的绝对定位提供基准 */
}
.vc-ambient-container {
    padding: 15px;
    box-sizing: border-box;
    flex-shrink: 0;
    z-index: 5;
    background: transparent;
}
.vc-chat-history {
    flex-grow: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 15px;
    /* display: flex; <-- 彻底放弃flex */
    /* flex-direction: column; <-- 彻底放弃flex */
    box-sizing: border-box;
    position: relative;
    transform: translateZ(0);
    will-change: transform;
}

.vc-chat-history .message-row:not(:last-child) {
    margin-bottom: 1px; /* 【瘦身】从15px缩小到12px */
}
/* 3. 调整输入框高度 - 解决问题4 */
#vc-chat-input {
    line-height: 1.4; /* 调整行高，让单行文字也好看 */
}

/* 4. 修复底部控制按钮SVG颜色 - 解决问题5 */
.vc-control-btn svg path, .vc-control-btn svg rect {
    stroke: white; /* 【修改】命令所有SVG的线条都用白色描边 */
}
.vc-control-btn.hangup svg {
    /* 挂断图标的SVG有点特殊，需要描边才好看 */
    fill: none;
    stroke: white;
}
/* 底部控制栏现在只有两个按钮，让它们居中 */
#voice-call-view .voice-call-footer {
    justify-content: center;
    gap: 90px; /* 拉开两个按钮的距离 */
}

#voice-call-view .user-row .message {
    background: #78a7d4 !important; /* 【【【终极修复】】】颜色已精确替换为您指定的 #78a7d4 */
    color: #FFFFFF !important; 
    box-shadow: none !important; 
    background-image: none !important;
}

/* 6. 【核心】为通话专用的弹窗添加样式 - 解决问题1 */
.vc-alert-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}
.vc-alert-content {
    background: rgba(40, 40, 40, 0.85); /* 深灰色半透明背景 */
    border-radius: 14px;
    padding: 20px;
    width: 85%;
    max-width: 300px;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.1);
}
.vc-alert-content h4 {
    margin: 0 0 10px 0;
    color: white;
    font-size: 17px;
}
.vc-alert-content p {
    margin: 0 0 20px 0;
    color: rgba(255,255,255,0.8);
    font-size: 14px;
    line-height: 1.6;
}
#vc-alert-ok-btn {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 8px;
    background: rgba(255,255,255,0.2);
    color: white;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
}
/* 【【【终极修复：为双按钮弹窗的底部进行布局】】】 */
.vc-confirm-footer {
    margin-top: 20px;
    display: flex;
    gap: 10px; /* 两个按钮之间的间距 */
}

.vc-confirm-footer button {
    flex: 1; /* 让两个按钮平分宽度 */
    padding: 12px;
    border: none;
    border-radius: 8px;
    background: rgba(255,255,255,0.2);
    color: white;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
}
/* 【【【终极修复 V2：为深灰色输入弹窗添加专属样式】】】 */
#vc-prompt-input {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 8px;
    background: rgba(0,0,0,0.2); /* 和输入框一样的深色背景 */
    color: white; /* 输入的文字是白色 */
    font-size: 15px;
    margin: 15px 0; /* 和上下文字、按钮拉开距离 */
    box-sizing: border-box; /* 确保padding不会撑大输入框 */
}

#vc-prompt-input:focus {
    outline: none; /* 移除点击时的蓝色边框 */
    background: rgba(0,0,0,0.3); /* 点击时背景稍微变深一点 */
}

/* 7. (可选) 美化输入框的滚动条 */
#vc-chat-input::-webkit-scrollbar { display: none; }
#vc-chat-input { -ms-overflow-style: none; scrollbar-width: none; }
/* --- 【全新】加载中气泡的动态省略号样式 --- */
.message.loading-dots::after {
    content: '...';
    position: absolute;
    bottom: 8px;
    right: 12px;
    animation: dots-animation 1.4s infinite;
}

@keyframes dots-animation {
    0% { content: '.'; }
    33% { content: '..'; }
    66% { content: '...'; }
    100% { content: '.'; }
}
/*
============================================================
 V-BUBBLE-DELETE: 气泡长按删除功能专属样式
============================================================
*/

/* 1. 让每个消息行都成为一个“定位锚点”，为按钮提供坐标系 */
.message-row {
    position: relative;
}

/* 2. 设计“隐形”的删除按钮本身 */
.message-delete-btn {
    position: absolute; /* 开启“自由飞行”模式 */
    top: 50%;           /* 先把它垂直居中 */
    transform: translateY(-50%); /* 完美的垂直居中校准 */
    
    width: 32px;
    height: 32px;
    background-color: rgba(0,0,0,0.1);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    
    display: flex; /* 让内部的SVG图标也完美居中 */
    align-items: center;
    justify-content: center;
    
    opacity: 0; /* 核心魔法1：默认完全透明，看不见 */
    pointer-events: none; /* 核心魔法2：看不见时也点不着 */
    transition: opacity 0.2s ease-in-out; /* 让它出现和消失时有淡入淡出效果 */
    z-index: 5; /* 确保它在气泡上方 */
}

/* 3. 为不同方向的气泡，设置按钮的不同位置 */
.assistant-row .message-delete-btn {
    left: -42px; /* AI气泡在左边，按钮就出现在更左边 */
}
.user-row .message-delete-btn {
    right: -42px; /* 用户气泡在右边，按钮就出现在更右边 */
}

/* 4. 设计按钮里的SVG图标样式 */
.message-delete-btn svg {
    width: 18px;
    height: 18px;
}
.message-delete-btn svg path {
    stroke: #fff; /* 让图标描边是白色，在深色按钮上更清晰 */
}

/* 5. 【关键】这就是解除“隐形衣”的咒语！ */
.message-row.show-delete-btn .message-delete-btn {
    opacity: 1; /* 完全不透明，现身！ */
    pointer-events: auto; /* 现在可以被点击了 */
}
/*
============================================================
 V-VOICE-CALL-MULTISELECT: 语音通话多选UI样式
============================================================
*/

/* 1. 让通话界面的顶部栏也能容纳操作栏 */
#voice-call-view .voice-call-header {
    justify-content: center; /* 让内部的操作栏居中 */
}

/* 2. 让通话中的消息行也能进入“选择模式” */
#vc-chat-history .message-row.in-select-mode {
    cursor: pointer;
    background-color: rgba(0,0,0,0.1);
    border-radius: 8px;
}

/* 3. 确保复选框在深色背景下也清晰可见 */
#vc-chat-history .select-checkbox {
    border-color: rgba(255,255,255,0.5);
}
#vc-chat-history .select-checkbox.checked {
    background-color: #fff;
    border-color: #fff;
    /* 沿用主界面的打勾SVG，但把颜色改成深色 */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23333'%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");
}
/*
============================================================
 V-VOICE-CALL-STEALTH-MULTISELECT: 语音通话多选UI终极修复
============================================================
*/

/* 1. 全新的“隐形工具栏”样式 */
.vc-multiselect-toolbar {
    position: absolute; /* 开启“自由飞行”模式 */
    top: 0;
    left: 0;
    right: 0;
    padding: calc(15px + env(safe-area-inset-top)) 20px 0; /* 适配刘海屏，并设置左右边距 */
    display: flex;
    justify-content: space-between; /* 让两个按钮分布在左右两端 */
    z-index: 10; /* 确保它在最顶层 */
    pointer-events: none; /* 默认状态下，它和它的子元素都不能被点击 */
}

/* 当工具栏显示时，才允许点击 */
.vc-multiselect-toolbar:not(.hidden) {
    pointer-events: auto;
}

/* 2. 工具栏内部按钮的样式 */
.vc-toolbar-btn {
    background: rgba(0,0,0,0.3);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
}
.vc-toolbar-btn:hover {
    background: rgba(0,0,0,0.5);
}
.vc-toolbar-btn svg {
    width: 20px;
    height: 20px;
}

/* 3. 【【【核心】】】重写多选模式下的气泡样式，取消所有多余效果 */
#vc-chat-history .message-row.in-select-mode {
    background-color: transparent !important; /* 取消高亮背景 */
    padding: 0 !important; /* 移除多余的内边距 */
    cursor: pointer;
}

/* 4. 确保复选框在深色背景下也清晰可见 (这段和上次一样) */
#vc-chat-history .select-checkbox {
    border-color: rgba(255,255,255,0.5);
}
#vc-chat-history .select-checkbox.checked {
    background-color: #fff;
    border-color: #fff;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23333'%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");
}
/* --- 临时的视觉调试器 --- */

.functions-film-strip {
    border: 2px solid green !important; /* 绿色：装着所有页面的“胶卷” */
}
/*
================================================================
 V-CALL-LOG: 通话记录功能专属样式
================================================================
*/

/* 1. 列表页容器 */
.call-log-list-container {
    flex-grow: 1;
    overflow-y: auto;
    background-color: #fff; /* 白色背景 */
}

/* 2. 列表中的每一行 */
.call-log-item {
    display: flex;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
}

.call-log-item:hover {
    background-color: #f9f9f9;
}

/* 3. 左侧的播放图标 */
.call-log-play-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #f0f2f5;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    flex-shrink: 0;
}

.call-log-play-icon::before {
    content: '';
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 10px solid #8e8e93; /* 灰色三角 */
    margin-left: 3px;
}

/* 4. 中间的标题和日期 */
.call-log-info {
    flex-grow: 1;
    overflow: hidden;
}

.call-log-title {
    font-size: 16px;
    color: #000;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: text; /* 提示标题可以编辑 */
}

.call-log-date {
    font-size: 13px;
    color: #8e8e93;
    margin-top: 4px;
}

/* 5. 右侧的时长 */
.call-log-duration {
    font-size: 14px;
    color: #8e8e93;
    flex-shrink: 0;
}

/* 6. 详情页容器 (深灰色背景) */
.transcript-container {
    flex-grow: 1;
    overflow-y: auto;
    background-color: #363636; /* 模仿通话界面的深灰色 */
    padding: 15px 10px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    /* 【【【核心修复！！！】】】 */
    padding-top: 60px; /* 在顶部增加一个60px的内边距，把所有内容往下推 */
}
/*
================================================================
 V-CALL-TRANSCRIPT-UI: 通话记录详情页美化补丁
================================================================
*/

/* 1. 【核心】让头部“隐形”，只留下返回按钮 */
#call-transcript-view .header {
    background: transparent !important; /* 背景完全透明 */
    border-bottom: none !important;      /* 去掉底部分割线 */
    box-shadow: none !important;         /* 去掉阴影 */
    position: absolute; /* 让它浮在内容之上，不占空间 */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
}

/* 2. 美化“孤零零”的返回按钮，让它在深色背景下可见 */
#call-transcript-view .header .back-button {
    color: white; /* 按钮颜色变白 */
    background-color: rgba(0,0,0,0.2); /* 加一个淡淡的黑色背景，让它更明显 */
    border-radius: 50%;
    width: 36px;
    height: 36px;
    padding: 0;
    margin: 5px;
    justify-content: center; /* 确保图标居中 */
}

/* 3. 【核心】隐藏所有头像 */
#call-transcript-view .transcript-container .avatar {
    display: none;
}

/* 4. 【核心】为用户气泡换上【正确的】“通话灰蓝”皮肤 */
#call-transcript-view .transcript-container .user-row .message {
    background: #78a7d4 !important; /* <-- 这就是你想要的那个漂亮的灰蓝色！ */
    color: #FFFFFF !important; 
    box-shadow: none !important; 
    background-image: none !important;
}

/* 6. 【全新】提亮详情页的时间戳，让它清晰可见 */
#call-transcript-view .transcript-container .timestamp-display {
    color: rgba(255, 255, 255, 0.6); /* 半透明的白色 */
}

/* 5. 【核心】为AI气泡换上“亮白色”皮肤 */
#call-transcript-view .transcript-container .assistant-row .message {
    background: #F5F5F5 !important;
    color: #1E1E1E !important;
    box-shadow: none !important;
    background-image: none !important;
}
/* --- 【全新】通话记录标题编辑图标样式 --- */
.call-log-edit-icon {
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px; /* 图标与标题的间距 */
    width: 20px;
    height: 20px;
    opacity: 0.4; /* 默认半透明 */
    transition: opacity 0.2s;
    cursor: pointer;
}
.call-log-item:hover .call-log-edit-icon {
    opacity: 1; /* 鼠标悬停在整行上时，图标完全显示 */
}
.call-log-edit-icon svg {
    width: 100%;
    height: 100%;
    stroke: #8e8e93; /* 图标颜色 */
    stroke-width: 2;
}
/*
================================================================
 V-CALL-TRANSCRIPT-TIMESTAMP: 通话记录详情页时间戳终极美化
================================================================
*/

/* 1. 让每一行都成为一个能灵活对齐的“智能容器” */
#call-transcript-view .message-row {
    align-items: flex-end; /* 核心！让气泡和时间戳底部对齐 */
}

/* 2. 设计小时间戳的统一样式 */
#call-transcript-view .bubble-timestamp {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5); /* 半透明的白色 */
    flex-shrink: 0; /* 禁止它被压缩换行 */
    margin: 0 8px; /* 和气泡之间保持8px的间距 */
    padding-bottom: 5px; /* 向上微调，让它和气泡文字的底部更对齐 */
}

/* 3. 【AI气泡】的布局：内容在左，时间在右 */
#call-transcript-view .assistant-row .message-content {
    order: 0; /* 内容排第一 */
}
#call-transcript-view .assistant-row .bubble-timestamp {
    order: 1; /* 时间戳排第二 */
}

/* 4. 【用户气泡】的布局：时间在左，内容在右 */
#call-transcript-view .user-row .message-content {
    order: 1; /* 内容排第二 */
}
#call-transcript-view .user-row .bubble-timestamp {
    order: 0; /* 时间戳排第一 */
}
/* --- 【全新】通话/记录界面时间戳距离微调 --- */
#call-transcript-view .bubble-timestamp,
#voice-call-view .bubble-timestamp {
    margin: 0 0px; /* 再次缩小间距，现在只有4px */
    position: relative; /* 解锁微调能力 */
    top: 7px; /* 【【【终极魔法！！！】】】将时间戳整体向上移动2个像素！*/
}
/* --- 【全新】通话/记录界面气泡圆角升级 --- */
#call-transcript-view .message,
#voice-call-view .message { /* 同样，同时为两个界面应用此规则 */
    border-radius: 20px !important; /* 核心！将圆角从16px增大到20px，更像胶囊 */
}
/* --- 【全新】通话/记录界面用户气泡颜色终极修正 --- */
#call-transcript-view .user-row .message,
#voice-call-view .user-row .message { /* 再次，同时为两个界面应用此规则 */
    background: #8ad3fae6 !important; /* 核心！精确替换为你指定的颜色代码 */
}
/* --- 【全新】通话/记录界面气泡文字垂直居中补丁 --- */
#call-transcript-view .message,
#voice-call-view .message {
    display: flex; /* 核心！将气泡本身也变成一个flex容器 */
    align-items: center; /* 魔法！命令内部的文字垂直居中 */
    padding: 8px 13px;    /* 【瘦身】将内边距统一设置为 上下8px，左右13px */
    font-size: 15px;      /* 【瘦身】明确指定一个更小的字体大小 */
}
/* --- 【全新】通话记录删除按钮样式 --- */
.call-log-delete-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    margin-left: 8px; /* 与编辑图标的间距 */
    opacity: 0.4;
    transition: opacity 0.2s;
}
.call-log-item:hover .call-log-delete-btn {
    opacity: 1;
}
.call-log-delete-btn svg {
    width: 20px;
    height: 20px;
    stroke: #8e8e93;
    stroke-width: 2;
}
.call-log-delete-btn:hover svg {
    stroke: #e53935; /* 悬停时变红 */
}
/*
================================================================
 V-ULTIMATE-FIX-V7: HTML小剧场全屏施工与样式覆盖
================================================================
*/
/* 1. 将“中央广场”本身变成一个纯黑色的、能居中的舞台 */
#html-widget-modal {
    background-color: #000000; /* 纯黑背景 */
    padding: 0;
    z-index: 2000; /* 确保它在最顶层 */
    /* 我们不再需要 flex 布局来居中一个绝对定位的 iframe */
    /* display: flex;
    align-items: center;
    justify-content: center; */
}

/* 2. 【【【终极修复】】】让iframe直接铺满整个黑色舞台 */
#html-widget-modal iframe {
    /* 核心修复：移除让它变成“幽灵”的绝对定位命令 */
    /* position: absolute; */ 
    /* top: 0; */
    /* left: 0; */
    
    /* 直接命令它的大小撑满父容器 */
    width: 100%;
    height: 100%;
    border: none;
    display: block; /* (可选但推荐) 确保它是一个标准的块级元素，消除可能的微小边距 */
}

/* 4. 设计一个独立的、悬浮在右上角的关闭按钮 */
.widget-close-btn {
    position: fixed; /* 使用fixed定位，确保它永远在右上角 */
    top: calc(20px + env(safe-area-inset-top)); /* 适配刘海屏 */
    right: 20px;
    width: 32px;
    height: 32px;
    background-color: rgba(128, 128, 128, 0.5); /* 半透明的灰色背景 */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: white;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2001; /* 比舞台层级更高 */
    transition: transform 0.2s, background-color 0.2s;
}
.widget-close-btn:hover {
    transform: scale(1.1);
    background-color: rgba(100, 100, 100, 0.7);
}
/*
================================================================
 V-INCOMING-CALL: AI主动来电界面专属样式
================================================================
*/

/* 1. 弹窗主体内容 */
.incoming-call-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
    text-align: center;
}

/* 2. 来电者头像 */
.incoming-call-content .avatar-large {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, 0.5);
    margin-bottom: 20px;
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
}

/* 3. 来电者昵称 */
.incoming-call-content #caller-name {
    font-size: 28px;
    font-weight: 500;
    margin: 0 0 10px 0;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

/* 4. "正在呼叫..." 状态文字 */
.incoming-call-content .caller-status {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 80px 0; /* 加大与下方按钮的距离 */
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* 5. 底部按钮容器 */
.call-actions {
    display: flex;
    justify-content: center;
    gap: 100px; /* 拉开两个按钮的距离 */
}

.action-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px; /* 按钮和文字的距离 */
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
}

/* 6. 接听按钮的专属绿色 */
.vc-control-btn.answer {
    background-color: #4cd964;
}

/* 7. 为两个按钮里的SVG图标设置统一样式 */
.vc-control-btn.small {
    /* 直接复用你已有的样式，无需新增 */
}
.vc-control-btn.small svg {
    /* 直接复用你已有的样式，无需新增 */
}
/*
================================================================
 V-NSFW-COMPASS: 性爱罗盘专属样式
================================================================
*/

/* 1. 全屏弹窗的整体布局 */
#sex-compass-modal {
    background-color: rgba(0, 0, 0, 0.85); /* 更深的背景，更有沉浸感 */
    padding: 0;
    align-items: stretch; /* 让内容区从上到下撑满 */
    justify-content: stretch;
}

.sex-compass-content {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    border-radius: 0;
    background-color: transparent; /* 内容区本身透明 */
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); /* 适配iPhone安全区 */
    display: flex;
    flex-direction: column;
}

/* 2. 顶部的剧本预览区 */
.sex-compass-script-preview {
    background-color: rgba(255, 0, 0, 0.1);
    border: 1px solid rgba(255, 0, 0, 0.3);
    border-radius: 8px;
    padding: 15px;
    margin: 15px;
    color: #ffcdd2;
    font-size: 14px;
    line-height: 1.6;
    max-height: 25vh; /* 预览区最高占屏幕的25% */
    overflow-y: auto;
    flex-shrink: 0; /* 防止被压缩 */
}

/* 3. 中间的选项容器 */
.sex-compass-options-container {
    flex-grow: 1; /* 占据所有剩余空间 */
    overflow-y: auto;
    padding: 0 15px;
}
.sex-compass-options-container::-webkit-scrollbar {
    width: 4px;
}
.sex-compass-options-container::-webkit-scrollbar-thumb {
    background: #c62828;
}

/* 4. 每个身体部位的区块 */
.body-part-group {
    margin-bottom: 20px;
}
.body-part-group h4 {
    color: #ff8a80;
    margin: 0 0 10px 0;
    font-size: 16px;
    border-bottom: 1px solid rgba(255, 138, 128, 0.3);
    padding-bottom: 5px;
}

/* 5. 每个选项的样式 */
.compass-option {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    color: #e0e0e0;
}
.compass-option input[type="radio"] {
    margin-right: 10px;
    accent-color: #e53935; /* 让选中的圆点是红色 */
}

/* 6. 底部的操作栏 */
.sex-compass-footer {
    padding: 15px;
    background-color: #1a1a1a;
    border-top: 1px solid #444;
    flex-shrink: 0;
}
.arousal-meters {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 15px;
}
.arousal-bar-container {
    display: flex;
    align-items: center;
    gap: 8px;
    color: white;
    font-size: 13px;
}
.arousal-bar {
    flex-grow: 1;
    height: 10px;
    background-color: #444;
    border-radius: 5px;
    overflow: hidden;
}
#user-arousal-fill, #char-arousal-fill {
    height: 100%;
    background: linear-gradient(90deg, #ff8a80 0%, #ff5252 100%);
    border-radius: 5px;
    transition: width 0.5s ease;
}

.sex-compass-actions {
    display: flex;
    gap: 10px;
}
.sex-compass-actions button {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
}
#sex-compass-end-btn {
    background-color: #555;
    color: #ccc;
    flex: 0.8; /* 让它比另外两个按钮窄一点 */
}
#sex-compass-confirm-btn {
    background-color: #777; /* 把“生成剧本”改成中性灰色 */
    color: #fff;
}
#sex-compass-continue-btn {
    background-color: #c62828;
    color: white;
}
/* --- 【全新】性别认同自定义输入框样式 --- */
.gender-identity-container {
    display: flex;
    flex-direction: column; /* 核心改造：从水平排列改为垂直堆叠 */
    gap: 10px; /* 现在这是上下两个元素之间的间距 */
}
/* --- 【全新】AI行动提议展示区样式 --- */
.ai-action-preview {
    background-color: rgba(0, 150, 255, 0.1); /* 一个淡淡的蓝色背景 */
    border: 1px solid rgba(0, 150, 255, 0.3);
    border-radius: 8px;
    padding: 10px 15px;
    margin: 10px 15px 15px; /* 与其他元素的间距 */
    color: #ade8f4;
}
.ai-action-preview h4 {
    margin: 0 0 5px 0;
    font-size: 14px;
    color: #48cae4;
    font-weight: bold;
}
.ai-action-preview p {
    margin: 0;
    font-size: 15px;
}

/* --- 【全新】剧本预览区颜色区分 --- */
.script-user-action {
    color: #ffcdd2; /* 你的动作，保持淡红色 */
}
.script-char-action {
    color: #ade8f4; /* AI的动作，使用淡蓝色 */
}
/* --- 【全新】罗盘刷新按钮样式 --- */
.ai-action-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}
#refresh-compass-options-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
}
#refresh-compass-options-btn svg {
    width: 16px;
    height: 16px;
    stroke: #48cae4;
}
#refresh-compass-options-btn:hover svg {
    transform: rotate(90deg);
}
/*
============================================================
 V-API-PRESETS: API 预设功能专属样式
============================================================
*/

.preset-controls {
    display: flex; /* 核心：让内部的下拉菜单和按钮横向排列 */
    align-items: center; /* 垂直居中对齐 */
    gap: 10px; /* 在元素之间增加一点间距 */
}

.preset-controls select {
    flex-grow: 1; /* 保持拉伸特性 */

    /* ▼▼▼ 【【【全新植入：下拉菜单美化“三件套”】】】 ▼▼▼ */
    
    /* 1. 核心：增加上下内边距，强行把它“撑高”！*/
    padding: 11px 16px; 
    
    /* 2. 移除浏览器默认的、丑丑的外观 */
    -webkit-appearance: none;
    appearance: none;
    
    /* 3. 把它伪装成一个和其他输入框一样的“卡片” */
    border: 1px solid var(--glass-border); 
    border-radius: 8px; /* 和旁边的按钮使用一样的圆角 */
    background-color: rgba(240, 242, 245, 0.7); /* 给一个淡淡的背景色 */
    font-size: 14px;
    font-weight: 500;
    color: #333;
    cursor: pointer;

    /* ▼▼▼ 【【【全新植入：手动绘制一个漂亮的下拉箭头】】】 ▼▼▼ */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23333' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1em;
}

/* 美化“保存”和“删除”按钮 */
.preset-controls button {
    flex-shrink: 0; /* 禁止按钮被压缩变形 */
    width: 42px; /* 固定宽度 */
    height: 42px; /* 固定高度，与输入框保持一致 */
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 24px;
    font-weight: bold;
    transition: all 0.2s ease;
}

#save-api-preset-btn {
    background-color: var(--global-theme-color); /* 使用你的主题色 */
    color: white;
}
#save-api-preset-btn:hover {
    opacity: 0.8;
}

#delete-api-preset-btn {
    background-color: #fbe9e7; /* 一个淡淡的危险红色 */
    color: #c62828;
}
#delete-api-preset-btn:hover {
    background-color: #ffcdd2;
}
/*
============================================================
 V-MOVIE-MODE: 一起看电影功能专属样式
============================================================
*/

/* 1. 整体布局：命令“屏幕”和“聊天区”垂直排列 */
#movie-view {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: #f0f2f5; /* 给一个浅灰色底色 */
}

/* 2. 电影屏幕容器 */
.movie-screen-container {
    flex-shrink: 0; /* 高度固定，不被压缩 */
    padding: 15px;
    background-color: #000; /* 屏幕背景为黑色 */
    color: #fff; /* 文字为白色 */
    box-shadow: inset 0 -5px 15px rgba(255, 255, 255, 0.1);
}

/* 3. 真正的“屏幕”内容区 */
#movie-screen-content {
    height: 35vh; /* 屏幕高度占屏幕的35% */
    overflow-y: auto; /* 如果文字太多，允许滚动 */
    font-size: 15px;
    line-height: 1.8;
    padding-right: 10px; /* 为滚动条留出空间 */
    font-family: 'Noto Serif SC', serif; /* 使用一个更适合阅读的字体 */
}
#movie-screen-content::-webkit-scrollbar {
    width: 4px;
}
#movie-screen-content::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 2px;
}
#movie-screen-content .placeholder-text {
    color: #888;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 4. 屏幕下方的导航控制按钮 */
.movie-nav-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 15px;
    margin-top: 10px;
    border-top: 1px solid #444;
}
.movie-nav-controls button {
    background: #333;
    border: 1px solid #555;
    color: #eee;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
}
.movie-nav-controls button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
#scene-indicator {
    font-size: 14px;
    color: #999;
}

/* 5. 底部聊天区 */
.movie-chat-area {
    flex-grow: 1; /* 占据所有剩余空间 */
    display: flex;
    flex-direction: column;
    min-height: 0; /* 防止flex布局溢出 */
    background-color: #fff;
}
#movie-chat-container {
    flex-grow: 1;
    overflow-y: auto;
    padding: 15px 10px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* 复用主聊天窗口的输入框样式 */
#movie-chat-area .chat-input-area {
    border-top: 1px solid #e0e0e0;
}
/*
============================================================
 V-MOVIE-CHAT-UI: 观影聊天区沉浸式UI改造
============================================================
*/

/* 1. 【核心】为整个聊天区换上深色背景 */
#movie-view .movie-chat-area {
    background-color: #2d2d2d; /* 一个柔和的深灰色，比纯黑更舒服 */
}

/* 2. 【核心】让聊天记录容器的背景也变成深色 */
#movie-view #movie-chat-container {
    background-color: #2d2d2d;
}

/* 3. 【核心】隐藏所有头像 */
#movie-view #movie-chat-container .avatar {
    display: none;
}

/* 4. 【核心】重写气泡样式，取消外边框和阴影 */
#movie-view #movie-chat-container .message {
    box-shadow: none !important;
    border: none !important;
    background-image: none !important;
    border-radius: 20px !important; /* 使用更圆润的胶囊形状 */
}

/* 5. 【核心】AI气泡样式 (亮灰色) */
#movie-view #movie-chat-container .assistant-row .message {
    background: #F5F5F5 !important;
    color: #1E1E1E !important;
}

/* 6. 【核心】用户气泡样式 (你指定的紫色) */
#movie-view #movie-chat-container .user-row .message {
    background: #7B68EE !important; /* 一个漂亮的紫罗兰色 */
    color: #FFFFFF !important;
}

/* 7. 【核心】调整气泡最大宽度，因为没有头像了，可以更宽一点 */
#movie-view #movie-chat-container .message-content {
    max-width: 90%;
}

/* 8. 【核心】改造输入框区域，使其完美融入深色背景 */
#movie-view .chat-input-area {
    background-color: #3a3a3a; /* 比背景稍亮一点的灰色 */
    border-top: 1px solid #4a4a4a;
}
#movie-view #movie-chat-input {
    background: #4e4e4e;
    border-radius: 20px;
    padding: 10px 15px;
    color: white;
    line-height: 1.4;
    border: none;
}
#movie-view #movie-chat-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

/* 9. 【核心】改造发送按钮 */
#movie-view #movie-send-button {
    background: #7B68EE; /* 按钮颜色与用户气泡保持一致 */
    border-radius: 18px; /* 匹配输入框的圆润感 */
    padding: 8px 18px;
    font-size: 15px;
}
/*
============================================================
 V-MOVIE-CHAT-UI-V2: 观影聊天区沉浸式UI终极改造
============================================================
*/

/* 1. 【核心】为整个聊天区换上与屏幕一致的纯黑背景 */
#movie-view .movie-chat-area {
    background-color: #000000;
}

#movie-view #movie-chat-container {
    background-color: #000000;
}

/* 2. 【核心】改造输入框区域 */
#movie-view .chat-input-area {
    background-color: #000000; /* 背景也改为纯黑 */
    border-top: 1px solid #222; /* 一条淡淡的深灰色分割线 */
    padding: 10px 15px; /* 调整内边距 */
}

/* 3. 【核心】改造输入框本身，让它变窄 */
#movie-view #movie-chat-input {
    background: #222; /* 深灰色背景 */
    border-radius: 18px; /* 匹配发送键的圆角 */
    padding: 8px 15px; /* 【关键】减少上下内边距，让它变窄 */
    color: white;
    border: none;
    height: 36px; /* 强制高度与按钮一致 */
    line-height: 20px; /* 确保文字垂直居中 */
}

/* 4. 【核心】改造发送按钮，移除描边，文字变白 */
#movie-view #movie-send-button {
    background: #7B68EE; /* 保持漂亮的紫色 */
    border-radius: 18px;
    padding: 8px 18px; /* 匹配输入框的高度 */
    font-size: 15px;
    height: 36px;
    border: none; /* 移除描边 */
    color: white; /* 文字变白 */
}

/* 5. 【全新】为新增的“AI评论”按钮设计样式 */
#movie-ai-comment-btn {
    background: none;
    border: none;
    padding: 6px;
    cursor: pointer;
}

#movie-ai-comment-btn svg {
    width: 24px;
    height: 24px;
}

/* 6. 【全新】命令按钮里的SVG图标变白 */
#movie-ai-comment-btn svg path {
    stroke: white;
}
/* --- 【全新】电影设置弹窗-字幕链接样式 --- */
.subtitle-link-note {
    text-align: center; /* 文字居中 */
    margin-top: 10px;   /* 与上方的上传框拉开一点距离 */
}

.subtitle-link-note a {
    font-size: 12px;         /* 字体小一点，像个提示 */
    color: var(--text-secondary); /* 使用次要文字的颜色 (灰色) */
    text-decoration: none;   /* 去掉下划线 */
    transition: color 0.2s;  /* 添加一个平滑的颜色过渡效果 */
}

.subtitle-link-note a:hover {
    color: var(--qq-blue); /* 鼠标悬停时，文字颜色变为你的主题色 */
    text-decoration: underline; /* 悬停时再显示下划线 */
}
/*
============================================================
 V-MOVIE-CHAT-UI-V4: 观影聊天区UI终极修复
============================================================
*/

/* 1. 简化版顶部栏：透明背景，白色按钮 (保持不变) */
.movie-header-simple {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding-top: env(safe-area-inset-top);
    z-index: 10;
    display: flex;
    align-items: center;
}
.movie-header-simple .back-button {
    color: white;
}
.movie-header-simple #movie-title {
    color: white;
    font-size: 16px;
    font-weight: bold;
    margin-left: 10px;
}

/* 2. 电影屏幕容器与编辑按钮 (保持不变) */
.movie-screen-container {
    position: relative;
}
#movie-view #edit-movie-script-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    color: white;
    background-color: rgba(0,0,0,0.3);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    padding: 0;
}
#movie-view #edit-movie-script-btn svg {
    width: 20px;
    height: 20px;
}

/* 3. 聊天区：深灰色背景 (保持不变) */
#movie-view .movie-chat-area,
#movie-view #movie-chat-container {
    background-color: #2d2d2d;
}

/* 4. 【【【核心修复】】】输入区容器：黑色背景 */
#movie-view .movie-input-area {
    background-color: #000000;
    border-top: 1px solid #222;
}

/* 5. 【【【核心修复】】】为 input-row 容器应用Flexbox布局 */
#movie-view .movie-input-area .input-row {
    display: flex;       /* 开启Flexbox，让内部元素横向排列 */
    align-items: flex-end; /* 确保所有元素底部对齐 */
    gap: 8px;          /* 设置元素之间的间距 */
    padding: 8px 12px;   /* 调整整个输入条的内边距 */
}

/* 6. 【【【核心修复】】】输入框：背景黑化 & 自动拉伸 */
#movie-view #movie-chat-input {
    flex-grow: 1;         /* 魔法！命令输入框占据所有可用的剩余空间 */
    background: #222 !important; /* 用 !important 强制覆盖默认的白色背景 */
    color: white;         /* 文字颜色为白色 */
    border: none;
    border-radius: 18px;
    padding: 8px 15px;
    height: 36px;
    line-height: 20px;
    resize: none;
}
#movie-view #movie-chat-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

/* 7. 两个按钮的样式 */
#movie-ai-comment-btn {
    flex-shrink: 0; /* 禁止按钮被压缩 */
    width: 36px;
    height: 36px;
    border-radius: 18px;
    background-color: #5a4a9c; /* 一个比发送键更深的紫色 */
    display: flex;
    align-items: center;
    justify-content: center;
}
#movie-ai-comment-btn svg path {
    stroke: white;
}

#movie-view #movie-send-button {
    flex-shrink: 0; /* 禁止按钮被压缩 */
    background: #7B68EE;
    border-radius: 18px;
    padding: 8px 18px;
    font-size: 15px;
    height: 36px;
    border: none;
    color: white;
}
/*
============================================================
 V-MUSIC-MODE: 一起听歌功能专属样式 (地基)
============================================================
*/

/* 1. 音乐页面的主容器 */
.music-container {
    flex-grow: 1;
    overflow-y: auto;
    background-color: #fff;
    padding: 15px;
}

/* 2. 【V2.0】搜索框样式 */
.music-search-bar {
    position: relative;
    margin-bottom: 20px; /* 保持与下方结果的间距 */
}
.music-search-bar .search-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
}
#music-search-input {
    width: 100%;
    padding: 12px 20px 12px 50px; /* 【核心修复】大幅增加左内边距 */
    border: none;
    background-color: #f0f2f5;
    border-radius: 20px;
    font-size: 15px;
    box-sizing: border-box;
}
#music-search-input:focus {
    outline: 2px solid var(--global-theme-color); /* <--- 已修复 */
}
/* --- 修复点 6.2: 音乐快捷入口的悬停效果 (这里需要新增一个规则) --- */
.quick-nav-item:hover span, 
.quick-nav-item:hover svg {
    color: var(--global-theme-color); /* <--- 新增修复 */
    stroke: var(--global-theme-color); /* <--- 新增修复 */
}
/* 3. 【V2.0】快捷入口导航 */
.music-quick-nav {
    display: flex;
    justify-content: space-around;
    padding: 15px 0; /* 减小垂直内边距，让整体更紧凑 */
    background-color: #fff;
    margin: 15px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.quick-nav-item {
    flex: 1; /* 让每个项目平分宽度 */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #555;
    cursor: pointer;
    position: relative; /* 为分割线定位做准备 */
}

/* 【核心】为你建议的分割线添加样式 */
.quick-nav-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 30px; /* 分割线高度 */
    background-color: #eee; /* 分割线颜色 */
}

.quick-nav-icon-wrapper {
    /* 我们不再需要固定尺寸，让图标自然大小即可 */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 【核心】直接控制SVG图标本身的样式 */
.quick-nav-icon-wrapper svg {
    width: 28px;
    height: 28px;
    stroke: #8e8e93; /* 核心修改1：将描边颜色统一改为灰色 */
    stroke-width: 2; /* 核心修改2：统一设置描边宽度，让图标看起来更协调 */
    fill: none;
}


.quick-nav-item span:last-child {
    font-size: 13px;
    color: var(--text-secondary);
}

/* 4. 音乐列表容器 */
.music-results-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
/*
============================================================
 V-MUSIC-PLAYER: 音乐播放器专属样式 (终极修复版 V4)
============================================================
*/

/* 1. 播放器整体背景和布局 (保持不变) */
#music-player-view {
    background: linear-gradient(135deg, #4a4a4a 0%, #2a2a2a 100%);
    color: white;
}
.music-player-header {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.music-player-header .song-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
#player-song-title {
    font-size: 16px;
    font-weight: bold;
}
#player-song-artist {
    font-size: 13px;
    color: rgba(255,255,255,0.7);
}

/* 2. 【【【终极修复：重塑播放器主体结构】】】 */
.music-player-body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 25px;
    position: relative; /* 为唱臂提供定位基准 */
}



/* 4. 黑胶唱片核心样式 */
.vinyl-record {
    width: 250px;
    height: 250px;
    background-image: url('https://i.postimg.cc/RV8sjBtd/image.png');
    background-size: cover;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: spin 20s linear infinite;
    animation-play-state: paused;
    box-shadow: 0 0 30px rgba(0,0,0,0.5);
    margin: 15px auto 0;
}
.vinyl-record.playing {
    animation-play-state: running; /* 播放时旋转 */
}
/* 当唱片在播放时，唱臂落下 */
.vinyl-record.playing + .vinyl-arm {
    transform: rotate(0deg);
}


@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

#album-art {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 10px rgba(0,0,0,0.8);
}

/* 5. 【【【终极修复：让所有操作按钮都“沉”到底部】】】 */
.player-controls-wrapper {
    margin-top: auto; /* 魔法！命令这个容器把自己推到最底部 */
    width: 100%;
    padding-bottom: 15px; /* 与底部留出一些安全距离 */
}

/* 6. 播放器操作按钮 (样式保持不变) */
.player-actions {
    display: flex;
    justify-content: space-around;
    width: 100%;
}
.player-action-btn {
    background: none;
    border: none;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    padding: 10px;
}
.player-action-btn:hover {
    color: white;
}
.player-action-btn svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}
#player-fav-btn svg.icon-heart-filled {
    fill: #ff3b30;
    stroke: #ff3b30;
}

/* 7. 进度条样式 (样式保持不变) */
.progress-bar-container {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 15px;
    margin: 15px 0; /* 在操作按钮和主控制按钮之间留出间距 */
}
.progress-bar-container span {
    font-size: 12px;
    color: rgba(255,255,255,0.5);
}
#song-progress {
    -webkit-appearance: none;
    flex-grow: 1;
    height: 4px;
    background: rgba(255,255,255,0.2);
    border-radius: 2px;
    outline: none;
}
#song-progress::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    background: white;
    border-radius: 50%;
    cursor: pointer;
}

/* 8. 主控制按钮 (样式保持不变) */
.main-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.player-main-btn {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.player-main-btn svg {
    width: 28px;
    height: 28px;
    fill: white;
    stroke: white;
    stroke-width: 1;
}
.player-main-btn.small svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke-width: 2;
}
.player-main-btn.large {
    width: 60px;
    height: 60px;
    border: 2px solid white;
    border-radius: 50%;
}
.player-main-btn.large svg {
    width: 24px;
    height: 24px;
    margin-left: 4px;
}
.player-main-btn.large .icon-pause {
    margin-left: 0;
}
/*
============================================================
 V-MUSIC-RESULTS: 音乐搜索结果列表专属样式
============================================================
*/
.music-result-item {
    display: flex;
    align-items: center;
    padding: 10px;
    border-radius: 8px;
    transition: background-color 0.2s;
}
.music-result-item:hover {
    background-color: #f5f5f5;
}

.music-result-item .album-cover {
    width: 50px;
    height: 50px;
    border-radius: 6px;
    margin-right: 15px;
    flex-shrink: 0;
}

.music-result-item .song-details {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.song-details .song-title {
    font-size: 16px;
    font-weight: 500;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.song-details .song-artist {
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 4px;
}

.song-actions {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-left: 15px;
    flex-shrink: 0;
}

.song-action-btn {
    background: none;
    border: 1px solid #ccc;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    cursor: pointer;
    font-size: 16px;
    color: #888;
    display: flex;
    align-items: center;
    justify-content: center;
}
.song-action-btn.play {
    border-color: var(--global-theme-color); /* <--- 已修复 */
    color: var(--global-theme-color); /* <--- 已修复 */
    font-size: 12px;
}
/* 【【【全新：已收藏的爱心按钮样式】】】 */
.song-action-btn.favorite.active {
    color: #ff3b30; /* 红色 */
    border-color: #ff3b30;
    font-weight: bold; /* 加粗，变成实心❤的感觉 */
}
/*

/*
============================================================
 V-MUSIC-FADE-SWITCH: 播放器淡入淡出布局 (终极修复版 V4)
============================================================
*/

/* 1. 堆叠容器 (保持不变) */
.music-player-stack {
    flex-grow: 1;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    width: 100%; /* 【【【终极核心修复！！！】】】 */
}

/* 2. 唱片和歌词容器的统一样式 (保持不变) */
.vinyl-container, .lyrics-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    transition: opacity 0.4s ease-in-out;
}

/* 3. 唱片容器的布局 (保持不变) */
.vinyl-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* 4. 【【【终极修复：唯一且清晰的歌词容器图纸】】】 */
.lyrics-container {
    /* 我们不再需要 display:flex 和 align-items 这些冲突的指令了 */
    /* 核心指令：为歌词的上下留出足够的“呼吸空间”，这会让歌词自然地显示在中间区域 */
    padding: 30vh 25px; /* 上下各留出30%的屏幕高度，左右留出25px的边距 */
    overflow-y: auto;   /* 魔法！命令这个容器自己负责滚动！ */

    /* 美化滚动条，让它变得纤细且优雅 */
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.3) transparent;
}
.lyrics-container::-webkit-scrollbar {
    width: 4px;
}
.lyrics-container::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.3);
    border-radius: 2px;
}

/* 5. 默认状态 (保持不变) */
.vinyl-container {
    opacity: 1;
    pointer-events: auto;
    z-index: 2;
}
.lyrics-container {
    opacity: 0;
    pointer-events: none;
    z-index: 1;
}

/* 6. 切换状态 (保持不变) */
.music-player-stack.show-lyrics .vinyl-container {
    opacity: 0;
    pointer-events: none;
}
.music-player-stack.show-lyrics .lyrics-container {
    opacity: 1;
    pointer-events: auto;
}

/*
============================================================
 V-MUSIC-LYRICS: 滚动歌词专属样式 (终极修复版 V4)
============================================================
*/

/* 1. 【【【终极修复：歌词列表的唯一职责就是“显示内容”】】】 */
.lyrics-list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
    /* (解释：我们把所有关于高度、滚动、遮罩的指令都删掉了，
       因为这些工作现在全部由它的上级 .lyrics-container 负责了！) */
}

/* 2. 每一句歌词的样式 (保持不变) */
.lyric-line {
    padding: 12px 20px;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.5);
    transition: all 0.3s ease;
    line-height: 1.6;
}

/* 3. 当前播放歌词的高亮样式 (保持不变) */
.lyric-line.active {
    color: white;
    font-weight: bold;
    font-size: 18px;
    transform: scale(1.05);
}
/*
================================================================
 V-NOW-PLAYING-BAR: 一起听歌迷你播放条专属样式 (V2.0 极简版)
================================================================
*/
.now-playing-bar {
    display: flex;
    align-items: center;
    gap: 8px; /* 缩小元素间距 */
    padding: 12px 15px; /* 调整内边距，让它更高一点 */
    background-color: #f7f7f7; /* 使用一个更简洁的浅灰色 */
    border-bottom: 1px solid #e0e0e0;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.2s;
}
.now-playing-bar:hover {
    background-color: #efefef;
}

.now-playing-icon {
    flex-shrink: 0;
    /* 【核心】为图标容器设置一个固定的尺寸 */
    width: 24px;
    height: 24px;
    display: flex; /* 让内部的SVG能居中 */
    align-items: center;
    justify-content: center;
}

.now-playing-icon svg {
    width: 18px; /* 用精确的像素值控制SVG本身的大小 */
    height: 18px;
    transform: translateY(1px); /* 【魔法】将图标整体向下微调1个像素，实现视觉上的完美居中 */
}

.now-playing-text {
    flex-grow: 1;
    font-size: 14px;
    color: #555; /* 文字颜色变深一点 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.now-playing-arrow {
    font-size: 16px;
    color: #aaa; /* 箭头用更浅的灰色 */
    font-weight: bold;
    flex-shrink: 0;
}
/*
============================================================
 V-PLAYER-HEADER-BUTTONS: 播放器头部按钮终极美化 (V3.0 终极ID修复)
============================================================
*/
/* 1. 让header成为智能布局容器 (保持不变) */
.music-player-header {
    justify-content: space-between;
}

/* 2. 为按钮组设置样式 (保持不变) */
.music-player-header .header-action-buttons {
    display: flex;
    gap: 8px;
}

/* 3. 【【【终极核心修复：通过ID直接下达最高指令！】】】 */
#player-minimize-btn,
#player-end-btn {
    width: 32px !important;  /* 使用 !important 作为双重保险，确保尺寸正确 */
    height: 32px !important;
    padding: 0 !important;
    background-color: rgba(0, 0, 0, 0.25) !important;
    border-radius: 8px !important; /* 强制指定8px的圆角！ */
    justify-content: center !important;
    transition: background-color 0.2s;
}

/* 4. 悬停效果 */
#player-minimize-btn:hover,
#player-end-btn:hover {
    background-color: rgba(0, 0, 0, 0.4) !important;
}

/* 5. SVG图标样式 */
#player-minimize-btn svg,
#player-end-btn svg {
    width: 18px;
    height: 18px;
    stroke: white;
}
/*
============================================================
 V-PLAYLIST-V2: 底部滑出式播放列表专属样式
============================================================
*/

/* 1. 让弹窗从底部出现，而不是中间 */
#playlist-modal.modal-overlay {
    align-items: flex-end; /* 核心！让内容物在底部对齐 */
}

/* 2. 抽屉本身的样式和滑出动画 */
.playlist-sheet {
    width: 100%;
    max-width: 360px; /* 和你的App主容器一样宽 */
    max-height: 60vh; /* 最高占屏幕60% */
    background-color: #fff;
    border-radius: 16px 16px 0 0; /* 顶部圆角 */
    box-shadow: 0 -5px 20px rgba(0,0,0,0.1);
    
    display: flex;
    flex-direction: column;
    
    /* 核心动画：默认藏在屏幕下方 */
    transform: translateY(100%);
    transition: transform 0.3s ease-in-out;
}

/* 当弹窗显示时，滑上来 */
#playlist-modal:not(.hidden) .playlist-sheet {
    transform: translateY(0);
}

/* 3. 抽屉的头部 */
.playlist-header {
    flex-shrink: 0; /* 高度固定，不压缩 */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #f0f0f0;
}
.playlist-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}
.playlist-close-btn {
    background: #f0f2f5;
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 16px;
    color: #888;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 4. 可滚动的列表主体 */
.playlist-body {
    flex-grow: 1; /* 占据所有剩余空间 */
    overflow-y: auto;
}
.playlist-body::-webkit-scrollbar {
    width: 4px;
}
.playlist-body::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 2px;
}

/* 5. 列表中的每一行 (和上次基本相同，微调) */
.playlist-item {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid #f5f5f5;
    cursor: pointer;
}
.playlist-item:hover {
    background-color: #f9f9f9;
}
.playlist-item.playing .playlist-item-info .playlist-song-title,
.playlist-item.playing .playlist-item-info .playlist-song-artist {
    color: var(--global-theme-color); /* <--- 已修复 */
}
.playlist-item-info {
    flex-grow: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.playlist-song-title {
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.playlist-song-artist {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.playlist-remove-btn {
    background: none;
    border: none;
    font-size: 20px;
    color: #aaa;
    cursor: pointer;
    padding: 5px;
    margin-left: 10px;
}
/*
================================================================
 V-MUSIC-MINI-PLAYER: 音乐功能迷你播放器专属样式
================================================================
*/
.music-mini-player {
    position: fixed; /* 魔法1: 让它悬浮 */
    bottom: 0; /* 魔法2: 命令它永远贴在屏幕最底部 */
    left: 0;
    width: 100%;
    z-index: 10; /* 确保它在内容之上 */

    flex-shrink: 0;
    
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 15px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom)); /* 自己负责适配iPhone底部安全区 */
    background-color: #fff;

    border-radius: 0;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
    border-top: 1px solid #f0f0f0;

    cursor: pointer;
    overflow: hidden;
}

.mini-player-cover {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    flex-shrink: 0;
}

.mini-player-info {
    flex-grow: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.mini-player-title {
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mini-player-artist {
    font-size: 12px;
    color: var(--text-secondary);
}

.mini-player-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.mini-player-btn {
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555;
}
.mini-player-btn:hover {
    background-color: #f0f0f0;
}
.mini-player-btn svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
    stroke: currentColor;
}
#mini-player-playlist-btn svg {
    stroke-width: 2; /* 将画笔加粗一点，看起来更清晰 */
    stroke: currentColor;
    fill: none;
}

.mini-player-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    background-color: var(--global-theme-color); /* <--- 已修复 */
    width: 0%; 
}
/*
============================================================
 V-LISTEN-TOGETHER: 一起听歌计时器 & 播放器布局优化
============================================================
*/

/* 1. 【核心】为计时器模块设计样式 */
.listen-together-timer {
    display: flex;
    flex-direction: column; /* 核心：命令它垂直堆叠 */
    align-items: center;    /* 核心：让所有内容水平居中 */
    gap: 8px;               /* 这是上下两行之间的间距 */
    padding: 10px 0 20px;
    width: 100%;
    flex-shrink: 0;
}
/* 【【【全新】】】为上半部分的头像行添加样式 */
.timer-avatars-row {
    display: flex;
    align-items: center;
    gap: 8px; /* 这是头像和心跳线之间的间距 */
}
.timer-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.3);
}
.timer-icon-wrapper {
    width: 40px;
    height: 20px;
}
.timer-duration {
    font-size: 13px;
    color: rgba(255,255,255,0.7);
    min-width: 40px; /* 确保时间显示不会跳动 */
}

/* 2. 缩小唱片和唱臂的尺寸，并向下移动 */
.vinyl-record {
    width: 250px; /* 从 280px 缩小 */
    height: 250px; /* 从 280px 缩小 */
    margin: 15px auto 0; /* 核心修复：使用 auto 强制水平居中 */
}
#album-art {
    width: 160px; /* 内部专辑封面也等比缩小 */
    height: 160px;
}


/* 3. 【魔法】命令底部的控制台把自己推到底部 */
.player-controls-wrapper {
    margin-top: auto; /* 这行代码会自动计算并填充所有可用的垂直空间！ */
    width: 100%;
    padding-bottom: 15px;
}
/*
============================================================
 V-VINYL-ARM-FINAL: 唱臂定位与动画终极修复版
============================================================
*/

/* 这是唱臂唯一的、最终的样式定义 */
.vinyl-arm {
    width: 70px;
    height: 240px;
    background-image: url('https://i.postimg.cc/6prP6NJ7/image.png');
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    z-index: 10;
    opacity: 1;
    pointer-events: none; /* 确保它不会挡住下方的点击 */

    /* 
       ============== ▼▼▼ 你的专属遥控器 ▼▼▼ ==============
    */

    /* 【遥控器按钮1：上下移动】 */
    top: 100px; 
    /* 说明：增大数字，唱臂向下；减小数字，唱臂向上。*/

    /* 【遥控器按钮2：左右移动】 */
    left: 50%;
    margin-left: 0px; 
    /* 说明：增大数字，唱臂向右；减小数字，唱臂向左。*/
    
    /* 【遥控器按钮3：旋转轴心（关节）】 */
    transform-origin: 90% 15%; 
    /* 说明：这是动画的关键，通常微调即可。*/
    
    /* 【遥控器按钮4：抬起时的角度】 */
    transform: rotate(-30deg); 
    
    /* 【遥控器按钮5：动画速度】 */
    transition: transform 0.5s ease, opacity 0.4s ease-in-out;

    /* ============== ▲▲▲ 遥控器结束 ▲▲▲ ============== */
}

/* 这是唱臂动画唯一的、最终的触发指令 */
.vinyl-record.playing + .vinyl-arm {
    transform: rotate(0deg); /* 当唱片播放时，让唱臂旋转到0度（落下） */
}
/*
================================================================
 V-MARQUEE-TITLE: 播放器滚动标题专属样式
================================================================
*/

/* 1. 这是“跑道”的外框，负责把超出部分隐藏起来 */
.song-info-marquee {
    /* 【核心】我们把它变成一个Flex容器，是为了让内部的span在垂直方向上能完美居中 */
    display: flex;
    align-items: center;
    
    width: 180px; /* 限制一个固定的宽度 */
    overflow: hidden; /* 魔法！超出这个宽度的所有内容都会被隐藏 */
    white-space: nowrap; /* 强制内部的文字不换行 */
}

/* 2. 这是真正滚动的文字本身 */
.song-info-marquee span {
    display: inline-block; /* 让 span 能够应用动画 */
    padding-left: 100%; /* 从容器的最右边开始滚动 */
    animation: marquee 10s linear infinite; /* 应用我们下面定义的动画 */
}

/* 3. 这就是滚动的动画本身 */
@keyframes marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}
/*
============================================================
 V-LISTEN-TOGETHER-CARD: 一起听歌卡片专属样式 (V5.0 终极纯白版)
============================================================
*/

/* 1. 强制用户气泡中的卡片背景为白色 */
.user-row .message-listen-together-card {
    background: #fff !important;
}

/* 2. 卡片消息气泡的整体样式 - 纯白、更小、更精致 */
.message-listen-together-card {
    background-color: #fff;
    border-radius: 12px;
    padding: 0 !important;
    width: 220px; /* 【终极瘦身】宽度再次缩小到 220px */
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.message-listen-together-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.1);
}

/* 3. 卡片内部的容器，负责所有内容的布局 */
.listen-card-inner-content {
    padding: 12px;
}

/* 4. 歌曲信息样式 */
.listen-card-song-info {
    font-size: 15px;
    font-weight: 500;
    color: #555; /* 深灰色文字 */
    margin-bottom: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 5. 封面图片的“窗口”容器 */
.listen-card-cover-wrapper {
    width: 100%;
    height: 100px;
    border-radius: 8px;
    overflow: hidden;
}

/* 6. 封面图片本身的样式 */
.listen-card-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 7. 底部标签样式 */
.listen-card-footer-label {
    padding: 8px 12px;
    background-color: #fff;
    font-size: 12px;
    color: #aaa;
    border-top: 1px solid #f0f0f0;
}
/*
================================================================
 V-MUSIC-SHARE-CARD: 音乐分享卡片专属样式
================================================================
*/

/* 1. 卡片消息气泡的整体样式 */
.message-music-share-card {
    background-color: #f7f7f7;
    border-radius: 12px;
    padding: 15px 15px 8px !important; /* <-- 【瘦身手术1】 */
    width: 280px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid #eee;
}
.message-music-share-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.1);
}

/* 2. 卡片上半部分 (歌曲信息) */
.music-share-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding-bottom: 8px; /* <-- 【瘦身手术2】 */
    border-bottom: 1px solid #eee;
}

.music-share-info {
    flex-grow: 1;
    overflow: hidden;
}

.music-share-title {
    font-size: 16px;
    font-weight: 500;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.music-share-artist {
    font-size: 13px;
    color: #888;
    margin-top: 5px;
}

.music-share-cover {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    flex-shrink: 0;
    position: relative;
}
.music-share-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}
.music-share-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 28px;
    height: 28px;
    background-color: rgba(0,0,0,0.4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.music-share-play-icon svg {
    width: 14px;
    height: 14px;
    fill: white;
}

/* 3. 卡片下半部分 (来源) */
.music-share-footer {
    padding-top: 6px; /* <-- 【瘦身手术3】 */
    font-size: 12px;
    color: #999;
}
/*
============================================================
 V-MUSIC-SHARE-CARD-FIX-V2: 音乐分享卡片用户侧样式终极修复
============================================================
*/

/* 1. 【终极修复】强制用户侧的分享卡片背景为白色，并覆盖渐变 */
.user-row .message.message-music-share-card {
    background: #f7f7f7 !important; /* 使用 background 属性，而不是 background-color，以覆盖掉渐变背景 */
}

/* 2. 强制卡片内的文字颜色变为深色 */
.user-row .message-music-share-card .music-share-title {
    color: #333;
}
.user-row .message-music-share-card .music-share-artist,
.user-row .message-music-share-card .music-share-footer {
    color: #888;
}
/*
============================================================
 V-VOLUME-SLIDER: 播放器音量滑块专属样式
============================================================
*/
.player-action-btn {
    position: relative; /* 为弹窗提供定位基准 */
}

.volume-slider-popup {
    position: fixed; /* 【核心】使用fixed定位，相对于整个屏幕 */
    bottom: 160px;   /* 【核心】精确计算它距离屏幕底部的高度 */
    left: 50%;
    transform: translateX(-50%);
    
    background-color: rgba(40, 40, 40, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 15px 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 -4px 15px rgba(0,0,0,0.2);
    z-index: 101; /* 确保它在播放器UI之上 */
}
    


.volume-slider-popup input[type="range"] {
    -webkit-appearance: slider-vertical; /* 在 Webkit 浏览器中（如Chrome）显示为垂直 */
    width: 8px; /* 滑块轨道的宽度 */
    height: 120px; /* 滑块的高度 */
    cursor: pointer;
}
/*
============================================================
 V-AI-MUSIC-PROFILE-REDESIGN-V3: AI音乐主页UI终极重塑
============================================================
*/
/* 1. 【核心】让页面主容器成为“总指挥”和“滚动条” */
.ai-profile-container {
    flex-grow: 1;
    overflow-y: auto; /* 魔法！命令这个容器自己负责滚动！ */
    background-color: #f8f8f8;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* 2. 【核心】版头区域：增高并成为头像的“定位锚点” */
.ai-profile-header {
    position: relative;
    height: 300px;
    background-color: #ccc;
    cursor: pointer;
}
.ai-profile-banner {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 3. 【核心】信息浮层与渐变蒙版 */
.ai-profile-info-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    padding-top: 80px;
    box-sizing: border-box;
    background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 100%);
    color: white;
}
/* 4. 【【【头像定位终极修复】】】 */
.ai-profile-info {
    position: absolute;
    bottom: 20px; /* 定位在版头底部，并留出20px间距 */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.ai-profile-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    cursor: pointer;
    margin-bottom: 12px;
}
#ai-profile-name, .ai-profile-stats, #ai-profile-description {
    text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}
#ai-profile-name { margin: 0; font-size: 20px; font-weight: bold; }
.ai-profile-stats { margin: 5px 0; font-size: 13px; color: rgba(255,255,255,0.8); }
.stats-divider { margin: 0 8px; color: rgba(255,255,255,0.5); }
#ai-profile-description { margin: 8px 0 0 0; font-size: 12px; color: rgba(255,255,255,0.9); }

/* 4. 【核心改造】悬浮头部按钮样式 */
.profile-header-btn {
    color: white !important;
    background: none !important;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7));
    width: 40px !important; /* 固定尺寸 */
    height: 40px !important;
    border-radius: 50% !important; /* 强制圆形 */
}
.profile-header-btn:hover {
    background-color: rgba(0,0,0,0.2) !important;
}

/* 5. 标签页导航 (已升级) */
.ai-profile-tabs {
    display: flex;
    background-color: #fff;
    border-bottom: 1px solid #f0f0f0;
    position: sticky; 
    top: 0; 
    z-index: 20; /* 【核心修复1】提高层级，确保它不会被任何东西遮挡！ */
    flex-shrink: 0; /* 【核心修复2】禁止它被压缩，确保高度固定 */
}
.ai-profile-tab-btn {
    flex: 1; padding: 12px 10px; border: none; background: none;
    font-size: 15px; font-weight: 500; color: #666; cursor: pointer; position: relative;
}
.ai-profile-tab-btn.active { color: var(--qq-blue); font-weight: bold; }
.ai-profile-tab-btn.active::after {
    content: ''; position: absolute; bottom: 0; left: 50%;
    transform: translateX(-50%); width: 30px; height: 3px;
    background-color: var(--qq-blue); border-radius: 2px;
}

/* 6. 【核心改造】现在，让内容区“退休”，不再负责滚动 */
.ai-profile-content {
    padding: 10px;
    /* 我们不再需要 flex-grow 和 overflow-y 了，让它自然地被内容撑开即可 */
}
.ai-history-item {
    background-color: #fff;
    border-radius: 12px;
    margin-bottom: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    overflow: hidden;
}
.ai-history-item .music-result-item {
    padding: 12px;
    cursor: pointer;
    transition: background-color 0.2s;
}
.ai-history-item .music-result-item:hover { background-color: #f9f9f9; }

/* 【【【字体修复】】】 */
.ai-history-item .song-title {
    font-size: 15px !important; /* 强制使用更小的字号 */
    font-weight: 500 !important;
    color: #333 !important;
}
.ai-history-item .play-count {
    font-size: 12px !important; /* 强制使用小字号 */
    color: #aaa !important; /* 强制使用灰色 */
    font-weight: normal !important; /* 取消可能存在的加粗 */
    margin-left: auto;
    padding-right: 10px;
}
/* (以下部分保持不变) */
.ai-history-details { max-height: 0; overflow: hidden; transition: max-height 0.4s ease-in-out; }
.ai-history-details.expanded { max-height: 500px; }
.ai-history-context {
    margin: 0 12px 12px; padding: 10px; background-color: #f9f9f9;
    border-radius: 6px; border-top: 1px solid #f0f0f0;
    font-size: 13px; line-height: 1.6; color: #666;
}
.ai-history-context p { margin: 0 0 5px 0; }
.ai-history-context p:last-child { margin-bottom: 0; }
.ai-history-context strong { color: #444; }
/*
============================================================
 V-SONG-CREATION: AI原创歌曲工作室专属样式
============================================================
*/
.creation-panel.hidden {
    display: none;
}

#song-creation-lyrics,
#song-creation-prompt {
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
}
/*
============================================================
 V-AUDITION-RESULT: 海选结果弹窗专属样式
============================================================
*/
#audition-clips-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 15px;
}
.audition-clip-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border: 1px solid #eee;
    border-radius: 8px;
    cursor: pointer;
}
.audition-clip-item input[type="radio"] {
    flex-shrink: 0;
}
.audition-clip-info {
    flex-grow: 1;
    overflow: hidden;
}
.audition-clip-info .title {
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.audition-clip-info .tags {
    font-size: 12px;
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.audition-play-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #ccc;
    background-color: #f5f5f5;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.audition-play-btn svg {
    width: 16px;
    height: 16px;
}
/*
============================================================
 V-AUDITION-LIBRARY: 试音库与创作按钮专属样式
============================================================
*/

/* 1. 创作新歌悬浮按钮 */
#add-original-song-fab {
    z-index: 100; /* 确保它在内容之上 */
}

/* 2. 试音库弹窗内容区 */
#audition-library-container {
    max-height: 60vh; /* 限制最大高度，防止弹窗过高 */
}

/* 3. 试音库中的歌曲条目 */
#audition-library-container .music-result-item .song-artist {
    color: #c62828; /* 用特殊的红色来标记“试音歌手” */
    font-style: italic;
}
/* 【【【全新植入：AI音乐主页UI控制核心】】】 */

/* 1. 默认情况下，所有标签页的内容都先藏起来 */
.ai-profile-tab-content {
    display: none;
}

/* 2. 只有被激活的那个标签页内容才显示出来 */
.ai-profile-tab-content.active {
    display: block;
}

/* 3. 默认情况下，卡片里的详情区域是折叠的（高度为0） */
.ai-history-details {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out; /* 添加平滑的过渡动画 */
    padding: 0 15px; /* 折叠时没有内边距 */
    opacity: 0;
}

/* 4. 当详情区域被“展开”时，给它一个最大高度，并恢复内边距 */
.ai-history-details.expanded {
    max-height: 500px; /* 一个足够大的高度，让内容能完全显示 */
    padding: 10px 15px 15px; /* 展开后恢复内边距 */
    opacity: 1;
}
/* 【【【全新修复：用户侧语音气泡背景】】】 */
.user-row .message-voice {
    background: var(--gradient-primary); /* <--- 已修复 */
}
/* 【【【全新修复：用户侧所有卡片/特殊气泡的背景】】】 */
.user-row .message-voice-call-record,
.user-row .message-red-packet,
.user-row .message-relationship-card,
.user-row .message-accounting-card {
    background: var(--gradient-primary) !important;
    box-shadow: var(--shadow-primary) !important;
}
/*
============================================================
 V-CUSTOM-FONT-CSS: 自定义字体CSS功能专属样式 (V3 - 布局重塑版)
============================================================
*/
#global-font-css-input {
    width: 100%;
    padding: 12px 15px !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-md) !important;
    font-family: 'Courier New', monospace;
    font-size: 13px !important;
    box-sizing: border-box !important;
    background: var(--glass-bg) !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
    color: var(--text-dark) !important;
    resize: vertical;
}

/* ▼▼▼ 【【【全新植入：底部容器的布局指令】】】 ▼▼▼ */
.font-css-footer {
    display: flex;                 /* 1. 开启Flexbox，让内部元素横向排列 */
    justify-content: space-between; /* 2. 魔法！命令内部元素：一个靠左，一个靠右 */
    align-items: center;           /* 3. 让链接和按钮在垂直方向上居中对齐 */
    margin-top: 10px;              /* 4. 在整个容器和上方的输入框之间，保留10px的舒适间距 */
}
/* ▲▲▲▲▲ 植入完毕 ▲▲▲▲▲ */

.settings-item-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    /* 【核心修复】移除这里多余的 margin-top，因为它会导致双重间距 */
}

.settings-item-actions button {
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--glass-border);
    transition: all 0.2s ease;
}

#apply-custom-font-btn {
    background-color: var(--global-theme-color);
    color: white;
    border-color: var(--global-theme-color);
}

/* 【【【全新：恢复默认按钮的普通样式】】】 */
/* (我们不再需要为 #reset-custom-font-btn 设置特殊的红色样式了) */
/*
============================================================
 V-UI-COLOR-FIX: 统一UI颜色终极补丁 (V2.0 强制修正版)
============================================================
*/

/* 
  解释：我们在这里使用 var(--header-text-color)，而不是 --text-dark。
  因为你的需求是“跟版头字体颜色保持一致”，而 --header-text-color 
  正是版头文字的遥控器。
*/

/*
============================================================
 V-UI-COLOR-FIX: 统一UI颜色终极补丁 (V4.0 王牌修正版)
============================================================
*/

/* 
  解释：我们现在分两步走，确保万无一失。
*/

/* 步骤1：为所有非置顶的列表项，下达“必须是纯黑色”的最高指令！*/
/* 这个选择器精确地选中了“非置顶卡片”里的“姓名” span 元素 */
.chat-list-item:not(.pinned) .chat-list-item-info .chat-list-item-top .chat-list-item-name {
    color: #3B3B3B !important; /* 使用你的 --text-dark 变量对应的纯色值 */
}
/* 步骤2：为所有置顶的列表项，下达“必须跟随磨砂层遥控器”的最高指令！*/
.chat-list-item.pinned .chat-list-item-name {
    /* 解释：我们把遥控器从“版头颜色”换成了刚刚新建的“磨砂层颜色” */
    color: var(--frosted-layer-text-color) !important;
}

/* 步骤3：强制所有日记卡片的标题和摘要颜色，也都听从全新的磨砂层遥控器指挥 */
.diary-entry-card .diary-author,
.diary-entry-card .diary-preview-text {
    /* 解释：同样，我们也把这里的遥控器换成了我们全新的“磨砂层颜色”遥控器。 */
    color: var(--frosted-layer-text-color) !important;
}
/*
============================================================
 V-GPS-MAP: GPS地图功能专属样式 (V3.0 交互终极版)
============================================================
*/

/* 1. 地图容器 */
#gps-map-container {
    flex-grow: 1;
    position: relative;
    background-color: #e0e0e0;
    overflow: hidden;
    cursor: grab; /* 默认显示抓取手势 */
}
#gps-map-container:active {
    cursor: grabbing; /* 按下时显示抓紧手势 */
}

/* 2. SVG地图本身 */
#gps-map-container svg {
    width: 100%;
    height: 100%;
    display: block; /* 移除SVG底部可能出现的微小空隙 */
}

/* 3. 【V3.0 终极修复】角色图钉HTML元素的样式 */
#char-location-pin {
    cursor: pointer;
    filter: drop-shadow(0px 4px 6px rgba(0,0,0,0.4));
    animation: gps-bobbing 2s infinite ease-in-out; 
    /* 我们把 position, z-index, pointer-events, width, height 都删掉了，因为它们不再需要了 */
}
/* Y轴偏移的动画 */
@keyframes gps-bobbing {
    0% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
    100% { transform: translateY(0); }
}

#char-location-pin svg {
    width: 100%;
    height: 100%;
}

/* --- 【【【全新植入：行动轨迹悬浮按钮美化】】】 --- */
#show-schedule-panel-btn {
    background-color: rgba(var(--global-theme-color-rgb), 0.5) !important; /* 核心：使用带50%透明度的主题色 */
    backdrop-filter: blur(5px); /* 增加一点毛玻璃质感 */
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.2); /* 加一个淡淡的亮边 */
    transition: all 0.3s ease;
}

#show-schedule-panel-btn:hover {
    background-color: rgba(var(--global-theme-color-rgb), 0.8) !important; /* 悬停时不透明 */
    transform: scale(1.1); /* 悬停时放大一点 */
}

/* 5. 【全新】GPS信息弹窗样式 */
.gps-popup {
    position: fixed; /* 【【【终极修复】】】使用fixed定位，相对于整个屏幕，弹窗再也不会被地图边缘裁切了！ */
    background-color: rgba(40, 40, 40, 0.85);
    color: white;
    padding: 10px 15px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    z-index: 20; 
    font-size: 13px;
    max-width: 200px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transform: translate(-50%, -120%); /* 定位在目标点的正上方再往上一点 */
    pointer-events: none;
    opacity: 0; /* 默认透明 */
    transition: opacity 0.2s, top 0.1s linear, left 0.1s linear; /* 【【【终极修复】】】为位置变化也加上平滑过渡 */
}
.gps-popup:not(.hidden) {
    opacity: 1; /* 显示时淡入 */
}
/* --- 【全新】GPS行动轨迹操作菜单样式 --- */
.gps-action-menu {
    position: absolute; /* 开启“自由飞行”模式，相对于父容器定位 */
    z-index: 40; /* 确保它在日程列表之上 */
    width: 100px; /* 给一个固定的宽度 */
    
    /* 毛玻璃效果 */
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    
    border-radius: 10px; /* 圆角 */
    box-shadow: 0 4px 15px rgba(0,0,0,0.15); /* 阴影 */
    
    display: flex; /* 让内部按钮垂直排列 */
    flex-direction: column;
    padding: 5px; /* 内部留一点边距 */
    
    /* 默认隐藏，并带有优雅的出现动画 */
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none; /* 隐藏时不可点击 */
}
.gps-action-menu:not(.hidden) {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}
.gps-action-menu button {
    background: none;
    border: none;
    padding: 10px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    border-radius: 6px;
    transition: background-color 0.2s;
}
.gps-action-menu button:hover {
    background-color: rgba(0,0,0,0.05);
}
.gps-action-menu .menu-divider {
    height: 1px;
    background-color: rgba(0,0,0,0.1);
    margin: 4px 8px; /* 分割线上下的间距 */
}
/* --- 【全新】GPS日程专用编辑器样式 --- */
#gps-item-editor-modal .modal-content {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.2);
}
#gps-item-editor-modal .modal-input,
#gps-item-editor-modal input[type="time"] {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.8);
    font-size: 15px;
    box-sizing: border-box;
}
#gps-item-editor-modal .time-input-row {
    padding: 8px 0;
}
.gps-popup-arrow {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0; 
    height: 0; 
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid rgba(40, 40, 40, 0.85);
}
/*
============================================================
 V-GPS-HEADER-FIX-V2: GPS地图页头部终极布局修复
============================================================
*/

/* 1. 让头部成为一个标准的Flex容器，并让所有子元素垂直居中 */
#gps-view .header {
    display: flex;
    align-items: center;
    justify-content: space-between; /* 核心！让标题组和按钮组两端对齐 */
}

/* 2. 【核心修复】移除所有居中定位，让标题回归正常文档流，并给它和返回按钮一点间距 */
#gps-view #gps-view-title {
    margin-left: 8px; /* 在标题和返回按钮之间增加一点间距 */
}

/* 3. 【核心修复】命令“按钮小盒子”自己移动到最右边 */
#gps-view .header .header-action-buttons {
    margin-left: auto; /* 魔法！自动把这组按钮推到最右边 */
    display: flex;
    align-items: center;
    gap: 0; /* 【核心修复】间距设置为0，让按钮紧紧挨着 */
}

/* 4. 【全新】为这三个特殊的按钮定制“隐形”外观和紧凑的内边距 */
#gps-view .header .header-action-buttons .header-button {
    padding: 6px; /* 极大地缩小内边距，让按钮变得紧凑 */
    border-radius: 50%; /* 让悬停效果是圆形的 */
    background-color: transparent !important; /* 强制背景透明 */
}
/* --- 【全新植入：校准按钮图标颜色校准】 --- */
#gps-view #recalibrate-location-btn svg path {
    stroke: var(--header-text-color) !important; /* 魔法！命令SVG的线条颜色，跟其他头部按钮的文字颜色保持一致 */
}

/* 5. (可选) 为按钮添加一个极其低调的悬停效果，提升交互体验 */
#gps-view .header .header-action-buttons .header-button:hover {
    background-color: rgba(255, 255, 255, 0.15) !important; /* 悬停时才显示一个淡淡的圆形背景 */
}

/*
============================================================
 V-GPS-BUTTON-LOCK: GPS添加地图按钮禁用样式
============================================================
*/

/* 1. 为“添加地图”按钮设置半透明和禁用鼠标样式 */
#add-city-map-btn {
    opacity: 0.5;       /* 让它看起来有点褪色 */
    cursor: not-allowed; /* 鼠标放上去时，显示“禁止”图标 */
}

/* 2. (可选) 移除它多余的悬停效果 */
#add-city-map-btn:hover {
    background-color: transparent !important; /* 确保悬停时背景也不会有任何变化 */
}

/*
================================================================
 V-GPS-SCHEDULE-PANEL: GPS行动轨迹面板专属样式
================================================================
*/

/* 1. 抽屉面板的主体样式 */
.gps-schedule-panel {
    position: absolute; /* 相对于地图视图定位 */
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: 50vh; /* 最高占屏幕一半 */
    
    /* 【【【核心改造】】】 */
    background: rgba(255, 255, 255, 0.7); /* 1. 将背景从深色变量改为半透明的白色 */
    backdrop-filter: blur(20px); /* 2. 保持毛玻璃效果 */
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.2); /* 3. 边框也换成更亮的半透明白色 */

    border-radius: 20px 20px 0 0;
    box-shadow: 0 -5px 20px rgba(0,0,0,0.15);
    z-index: 30;
    
    display: flex;
    flex-direction: column;
    
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 当面板有 .is-open 类时，滑上来 */
.gps-schedule-panel.is-open {
    transform: translateY(0);
}

/* 2. 面板头部 */
.gps-schedule-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid var(--glass-border);
}
.gps-schedule-header h3 {
    margin: 0;
    font-size: 16px;
    color: #333; /* 核心改造：将颜色从变量改为固定的深灰色 */
}

/* --- 【全新植入：行动轨迹关闭按钮终极美化补丁】 --- */
#close-gps-schedule-btn {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    
    /* 核心改造：尺寸与定位 */
    font-size: 28px !important;  /* 1. 放大叉号本身 */
    width: auto !important;     /* 2. 移除固定的圆形尺寸 */
    height: auto !important;
    top: 12px !important;       /* 3. 向上移动，离顶部更近 */
    right: 18px !important;     /* 4. 向左移动一点，离边缘更舒服 */
    
    /* 核心改造：颜色与交互 */
    color: #aaa !important; /* 5. 设置一个更柔和的灰色 */
    transition: color 0.2s ease !important; /* 6. 让颜色变化更平滑 */
}

#close-gps-schedule-btn:hover {
    background: none !important; /* 7. 悬停时背景依然透明 */
    color: #555 !important;      /* 8. 悬停时只让叉号颜色变深 */
    transform: none !important; /* 9. 取消多余的放大效果 */
}
/* --- 【全新植入：行动轨迹刷新按钮图标颜色校准】 --- */
#refresh-gps-schedule-btn svg {
    stroke: var(--text-dark) !important; /* 命令它跟标题文字颜色保持一致 */
}
.gps-schedule-header .header-button-inline {
    margin-left: 10px;
}
/* --- 【全新植入：行动轨迹刷新按钮美化补丁 V2.0】 --- */
#refresh-gps-schedule-btn svg {
    width: 16px !important;  /* 核心：再次瘦身，从18px缩小到16px */
    height: 16px !important;
    stroke: var(--text-secondary) !important; /* 核心：颜色改为更柔和的次要文字灰色 */
    transform: translateY(1px);
    transition: transform 0.3s ease; /* 为旋转增加平滑动画 */
}

/* (解释：我们把悬停效果从JS移到了CSS，更高效) */
#refresh-gps-schedule-btn:hover svg {
    transform: translateY(1px) rotate(90deg);
}
.gps-schedule-header .close-button {
    margin-left: auto; /* 让关闭按钮自动靠右 */
}

/* 3. 可滚动的日程列表 */
.gps-schedule-list {
    flex-grow: 1;
    overflow-y: auto;
    padding: 15px 20px;
}
.gps-schedule-list::-webkit-scrollbar {
    display: none;
}
.gps-schedule-item {
    padding: 12px 0;
    border-bottom: 1px solid var(--glass-border);
    display: flex;
    gap: 15px;
}
.schedule-item-time {
    flex-shrink: 0;
    font-size: 14px;
    font-weight: bold;
    color: #333; /* 核心改造：将颜色从变量改为固定的深灰色 */
    width: 100px; /* 固定时间区域的宽度 */
}
.schedule-item-details {
    font-size: 14px;
    line-height: 1.6;
}
.schedule-item-details strong {
    color: var(--qq-blue);
}
/* 当前活动的高亮样式 */
.gps-schedule-item.current {
    background-color: rgba(var(--global-theme-color-rgb), 0.1);
    margin: -12px -20px; /* 让高亮背景撑满整行 */
    padding: 12px 20px;
    border-radius: 8px;
}
/* --- 【全新V2.0：GPS日程项“编辑模式”专属样式】 --- */

/* 1. 让每一个日程项都成为一个“定位锚点” */
.gps-schedule-item {
    position: relative;
    transition: background-color 0.3s ease;
}

/* 2. 【全新V4.0】设计“亮色磨砂玻璃”操作蒙版 */
.schedule-item-actions-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* 【核心改造】背景换成你想要的、带有毛玻璃效果的半透明亮色 */
    background-color: rgba(240, 240, 245, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* 3. 【核心魔法】当父级日程项拥有 .is-editing 类时，让蒙版浮现 */
.gps-schedule-item.is-editing .schedule-item-actions-overlay {
    opacity: 1;
    pointer-events: auto;
}


/* 4. 【全新V4.0】设计更简洁、对比度更高的圆形按钮 */
.schedule-action-btn {
    width: 52px;
    height: 52px;
    
    /* 【核心改造】背景变为几乎不透明的纯白色，营造实体感 */
    background-color: rgba(255, 255, 255, 0.9);
    
    /* 【核心改造】边框改为极细的、淡淡的灰色，增加精致感 */
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08); /* 添加一点阴影 */
    
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.schedule-action-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.schedule-action-btn svg {
    width: 24px;
    height: 24px;
    /* 【核心改造】图标颜色变为深灰色，与白色背景形成清晰对比 */
    stroke: #555;
    stroke-width: 2.5;
}
/*
============================================================
 V-ICON-STUDIO: 图标工作室专属样式
============================================================
*/
.icon-setting-item {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid #f0f0f0;
}
.icon-preview-wrapper {
    width: 40px;
    height: 40px;
    background-color: #f0f2f5;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    flex-shrink: 0;
    overflow: hidden; /* 确保上传的图片不会超出预览框 */
}
.icon-preview-wrapper svg,
.icon-preview-wrapper img {
    /* 核心修复：命令图片的最大宽高不能超过容器的100% */
    max-width: 100%;
    max-height: 100%;
    /* 解释：我们把固定的24px尺寸删掉了，让图片在40px的容器内自由缩放。
       同时，保留 object-fit 来防止图片变形。 */
    object-fit: contain; 
}
.icon-setting-label {
    flex-grow: 1;
    font-size: 15px;
}
.icon-setting-actions {
    display: flex;
    gap: 8px;
}
.icon-setting-actions button {
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid #ddd;
    background-color: #fff;
    cursor: pointer;
}
/*
============================================================
 V-ICON-STUDIO-FIX-V2: 所有自定义图标尺寸自适应终极修复
============================================================
*/

/* 
  核心：为任何拥有“自定义图标”身份的按钮，
  都穿上这件统一的“隐形衣”。
*/
.has-custom-icon {
    /* 步骤1: 脱掉所有旧衣服（背景、边框、内边距、阴影）*/
    background: none !important;
    border: none !important;
    padding: 0 !important; 
    box-shadow: none !important;
    
    /* 步骤2: 规定一个统一的、标准的图标尺寸 */
    width: 36px !important; 
    height: 36px !important;

    /* 步骤3 (锦上添花): 使用Flexbox确保图片能完美居中 */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 
  核心：命令所有“自定义图标”内部的图片，
  必须在规定尺寸的“画框”内进行自我缩放。
*/
.has-custom-icon img {
    /* 步骤4: 命令图片的最大宽高不能超过它的容器 */
    max-width: 100%;
    max-height: 100%;

    /* 
      步骤5: object-fit 是关键！它告诉图片如何缩放。
      'contain' 能确保整个图片都被完整显示，不会被裁剪，这是最安全的选择。
    */
    object-fit: contain; 
}

/* 
   特殊修复：由于 header 区域的按钮有特殊圆形背景效果，
   我们需要确保自定义图标时，这个圆形效果也被正确应用。
*/
.header-action-buttons .has-custom-icon {
    border-radius: 50% !important;
    background-color: rgba(255, 255, 255, 0.15) !important;
}

.header-action-buttons .has-custom-icon:hover {
    background-color: rgba(255, 255, 255, 0.3) !important;
}

.header-action-buttons .has-custom-icon img {
    /* 对于圆形按钮，让图片稍微小一点，留出边距更好看 */
    max-width: 65%;
    max-height: 65%;
}
/* --- 【全新】系统提示行的居中对齐 --- */
.message-row.system-row {
    justify-content: center;
    padding: 0; /* 移除这一行可能带有的默认内边距 */
}
/*
================================================================
 V-CARD-ULTIMATE-FIX-V4: 卡片样式与布局终极重建
================================================================
*/

/* --- 豁免令 #1: 关系/分手卡片 (保持白底 + 修复布局) --- */
.user-row .message.message-relationship-card,
.user-row .message.message-breakup-card {
    background: #fff !important; 
    display: block !important;
}
.user-row .message.message-relationship-card .relationship-card-content,
.user-row .message.message-breakup-card > div:first-child {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
}
/* (以下是关系卡片的颜色修复，保持不变) */
.user-row .message.message-relationship-card *,
.user-row .message.message-breakup-card * { color: initial !important; }
.user-row .message.message-relationship-card p,
.user-row .message.message-breakup-card p { color: #888 !important; }
.user-row .message.message-relationship-card .relationship-card-footer,
.user-row .message.message-breakup-card .relationship-card-footer { color: #aaa !important; }


/* --- 【【【特赦令 #2 V2.0: 记账卡片终极修复 (精确制导版)】】】 --- */
.user-row .message.message-accounting-card {
    /* 1. 强制应用“米黄色账本”背景和横线 */
    background-color: #FDFCF9 !important;
    background-image: repeating-linear-gradient(
        to bottom, transparent, transparent 20px,
        #f0ebe5 21px, #f0ebe5 21px
    ) !important;
    border-color: #EAE6E1 !important;
    display: block !important;
}
/* 2. 强制内部布局正确 */
.user-row .message.message-accounting-card .accounting-card-header {
    display: flex !important;
    border-bottom-color: #E0D8CC !important;
}
.user-row .message.message-accounting-card .accounting-item-list {
    display: block !important;
}
.user-row .message.message-accounting-card .accounting-item {
    display: flex !important;
    justify-content: space-between !important;
}
/* 3. 【【【核心：精确制导颜色】】】 */
/* 指令A: 为SVG图标下达【绝对的、专门的】颜色指令！*/
.user-row .message.message-accounting-card .accounting-card-icon svg * {
    stroke: #A89B8C !important; /* 核心1：保持描边为和谐的棕褐色 */
    fill: none !important;      /* 核心2：【【【终极修复！】】】强制禁止任何填充颜色！ */
}
/* 指令B: 为所有文字下达颜色指令 */
.user-row .message.message-accounting-card h4 { color: #5D4037 !important; }
.user-row .message.message-accounting-card .item-name { color: #4E342E !important; }
.user-row .message.message-accounting-card .item-amount { color: #4E342E !important; }
.user-row .message.message-accounting-card .item-amount.income { color: #4CAF50 !important; }
.user-row .message.message-accounting-card .accounting-item-remarks { color: #9E9E9E !important; }
/* --- 【【【特赦令 #3 V3.0: 红包卡片终极豁免令 (双向修复版)】】】 --- */

/* 1. 未被领取的红包 (橙色) - 同时修复用户和AI */
.user-row .message.message-red-packet,
.assistant-row .message.message-red-packet {
    /* 核心！强制覆盖掉默认的气泡颜色（无论是用户的蓝色还是AI的白色） */
    background: #FA9D3B !important; 
    border: none !important; /* 移除AI气泡可能存在的边框 */
}

/* 2. 已被领取的红包 (淡橙色) - 同时修复用户和AI */
.user-row .message.message-red-packet.opened,
.assistant-row .message.message-red-packet.opened {
    background: #FBE5D2 !important;
}

/* 3. 未领取时的文字颜色 (白色) */
.user-row .message.message-red-packet .rp-bubble-info *,
.assistant-row .message.message-red-packet .rp-bubble-info * {
    color: white !important;
}

/* 4. 已领取时的文字颜色 (深色) */
.user-row .message.message-red-packet.opened .rp-bubble-info *,
.assistant-row .message.message-red-packet.opened .rp-bubble-info * {
    color: #CEA886 !important;
}

.user-row .message.message-red-packet.opened .rp-bubble-info span,
.assistant-row .message.message-red-packet.opened .rp-bubble-info span {
    color: #D6B99B !important;
}
/*
============================================================
 V-MUSIC-SHARE-CARD-FIX-V3: 音乐分享卡片【双侧】样式终极修复
============================================================
*/

/* 1. 【【【核心】】】为所有音乐分享卡片（无论AI或用户）补发“布局豁免权” */
.message.message-music-share-card {
    display: block !important; /* 魔法！覆盖掉父级的flex居中，让卡片内部可以自由布局 */
}

/* 2. 【终极修复】强制用户侧的分享卡片背景为浅灰色，并覆盖蓝色渐变 */
.user-row .message.message-music-share-card {
    background: #f7f7f7 !important; /* 使用 background 属性，而不是 background-color，以覆盖掉渐变背景 */
}

/* 3. 强制用户侧卡片内的文字颜色变为深色 */
.user-row .message.message-music-share-card .music-share-title {
    color: #333 !important; /* 增加 !important 确保最高优先级 */
}
.user-row .message.message-music-share-card .music-share-artist,
.user-row .message-music-share-card .music-share-footer {
    color: #888 !important; /* 增加 !important 确保最高优先级 */
}
/*
================================================================
 V-ULTIMATE-FIX-V8: 一起听歌卡片【双侧】样式终极豁免令
================================================================
*/

/* 
  解释：这道指令就像一张“豁免通行证”，它同时对“用户侧”和“AI侧”的
  “一起听歌卡片”下达了两条不可违抗的命令。
*/
.user-row .message.message-listen-together-card,
.assistant-row .message.message-listen-together-card {
    /* 命令1：脱掉所有制服，必须换上纯白礼服！*/
    background: #fff !important; 
    
    /* 命令2：别在中间傻站着了，恢复正常的块级排版！*/
    display: block !important;
}
/*
================================================================
 V-ULTIMATE-FIX-V9: “智能粘贴”按钮颜色终极修复
================================================================
*/

/* 
  解释：这道指令就像一张“特赦令”，它的ID选择器优先级非常高，
  专门为“智能粘贴”按钮下达了独立的、不可违抗的样式命令！
*/
#parse-paste-btn {
    /* 命令1：背景必须换上和“开始上传”一样的蓝色渐变！*/
    background: var(--gradient-primary) !important; 
    
    /* 命令2：文字必须是白色！*/
    color: white !important;

    /* 命令3：不能有任何边框！*/
    border: none !important;

    /* (可选，但推荐) 在它和上面的输入框之间，增加一点间距，让它呼吸更顺畅 */
    margin-top: 10px;
}

/* (锦上添花) 为它也加上一个漂亮的悬停效果 */
#parse-paste-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary-hover) !important;
}
/* --- 【全新】颜色数值输入框样式 --- */
.color-hex-input {
    width: 80px !important;      /* 固定宽度 */
    padding: 8px !important;     /* 内边距 */
    margin-left: 10px;           /* 与左边的颜色盘拉开距离 */
    border: 1px solid #ddd !important;
    border-radius: 6px !important;
    font-family: 'Courier New', monospace !important; /* 等宽字体，适合显示代码 */
    font-size: 14px !important;
    text-transform: uppercase;   /* 强制大写 */
    text-align: center;
    color: #333 !important;
    background: rgba(255, 255, 255, 0.8) !important;
}

.color-hex-input:focus {
    border-color: var(--global-theme-color) !important;
    outline: none;
}
/* --- 人生模拟器专属样式 --- */
.status-tag {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    background-color: #e0f7fa;
    color: #006064;
    font-weight: bold;
}

.goal-progress-container {
    width: 100%;
    height: 8px;
    background-color: #f0f0f0;
    border-radius: 4px;
    overflow: hidden;
}

.goal-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #5097CD, #63a4ff);
    border-radius: 4px;
    transition: width 0.5s ease;
}

.buff-tag {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid transparent;
}

/* --- Buff 状态颜色 V2 --- */

/* 1. 过期状态 (优先级最高，统一灰色) */
.buff-tag.expired {
    background-color: #f5f5f5;
    color: #9e9e9e;
    border-color: #e0e0e0;
    opacity: 0.8;
}

/* 2. 当前状态 - 正面 (绿色) */
.buff-tag.current.positive {
    background-color: #e8f5e9;
    color: #2e7d32;
    border-color: #c8e6c9;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(46, 125, 50, 0.1);
}

/* 3. 当前状态 - 负面 (红色) */
.buff-tag.current.negative {
    background-color: #ffebee;
    color: #c62828;
    border-color: #ffcdd2;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(198, 40, 40, 0.1);
}

/* 4. 当前状态 - 中性 (蓝色) */
.buff-tag.current.neutral {
    background-color: #e3f2fd;
    color: #1565c0;
    border-color: #bbdefb;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(21, 101, 192, 0.1);
}

.life-event-item {
    background-color: rgba(255, 255, 255, 0.5);
    border-left: 3px solid #ccc;
    padding: 8px 12px;
    border-radius: 0 8px 8px 0;
    font-size: 13px;
    line-height: 1.5;
}
/* --- 人生模拟器时间轴样式 V3 (左移 + 动态色) --- */
.life-timeline-node {
    padding: 10px 0;
    border-left: 2px solid #e0e0e0;
    /* 【修改】大幅减少左边距，让整体向左移动 */
    margin-left: 2px; 
    padding-left: 15px;
    position: relative;
}

.life-timeline-node::before {
    content: '';
    position: absolute;
    /* 【修改】微调圆点位置，使其对齐线条 */
    left: -6px; 
    top: 16px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #ccc;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px #e0e0e0; /* 增加一点层次感 */
}

.life-timeline-node.happened::before {
    background-color: #5097CD;
    border-color: #e3f2fd;
    box-shadow: none;
}

.life-timeline-time {
    font-size: 12px;
    color: #999;
    margin-bottom: 4px;
    font-family: monospace; /* 等宽字体显示时间更整齐 */
}

.life-timeline-content {
    font-size: 14px;
    color: #333;
    line-height: 1.6;
    text-align: justify; /* 两端对齐，阅读更舒适 */
}

/* Buff 基础样式 */
.life-timeline-buff {
    font-size: 12px;
    margin-left: 6px;
    font-weight: bold;
    padding: 1px 4px;
    border-radius: 4px;
    background-color: rgba(0,0,0,0.03);
}

/* 正面 Buff (绿色) */
.life-timeline-buff.positive {
    color: #2e7d32;
    background-color: #e8f5e9;
}

/* 负面 Buff (红色) */
.life-timeline-buff.negative {
    color: #c62828;
    background-color: #ffebee;
}

/* 中性 Buff (灰色/蓝色) */
.life-timeline-buff.neutral {
    color: #1565c0;
    background-color: #e3f2fd;
}

/* 历史记录卡片样式 */
.life-history-card {
    background-color: #fff;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    border: 1px solid #eee;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}

.life-history-date {
    font-weight: bold;
    font-size: 16px;
    color: #333;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f5f5f5;
}
/* --- Buff 标签颜色定义 (配合 JS 逻辑) --- */

/* 基础样式 (胶囊形状) */
.buff-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    margin-right: 5px;
    margin-bottom: 5px;
    border: 1px solid transparent;
}

/* 1. 负面状态 (negative) -> 红色 */
.buff-tag.negative {
    background-color: rgba(244, 67, 54, 0.1);
    color: #e53935;
    border-color: rgba(244, 67, 54, 0.3);
}

/* 2. 正面状态 (positive) -> 绿色 */
.buff-tag.positive {
    background-color: rgba(76, 175, 80, 0.1);
    color: #43a047;
    border-color: rgba(76, 175, 80, 0.3);
}

/* 3. 中性状态 (neutral) -> 蓝色 (默认) */
.buff-tag.neutral {
    background-color: rgba(80, 151, 205, 0.1);
    color: var(--global-theme-color);
    border-color: rgba(80, 151, 205, 0.3);
}

/* 4. 过期状态 (expired) -> 灰色 */
.buff-tag.expired {
    background-color: #f0f0f0;
    color: #999;
    border-color: #ddd;
}
/* --- Buff 颜色补丁 (必须添加这些才能变色) --- */

/* 1. 负面状态 (红色) - 使用 !important 确保覆盖默认蓝色 */
.buff-tag.negative {
    background-color: rgba(255, 59, 48, 0.1) !important;
    color: #ff3b30 !important;
    border-color: rgba(255, 59, 48, 0.3) !important;
}

/* 2. 正面状态 (绿色) - 使用 !important 确保覆盖默认蓝色 */
.buff-tag.positive {
    background-color: rgba(52, 199, 89, 0.1) !important;
    color: #34c759 !important;
    border-color: rgba(52, 199, 89, 0.3) !important;
}

/* 3. 过期状态 (灰色) - 保持你原有的逻辑 */
.buff-tag.expired {
    background-color: #f0f0f0 !important;
    color: #999 !important;
    border-color: #ddd !important;
    opacity: 0.8;
}
/* 时间轴节点基础样式 */
.life-timeline-node {
    display: flex;
    flex-direction: column;
    padding: 10px;
    margin-bottom: 10px;
    border-left: 2px solid #eee;
    margin-left: 10px;
    position: relative;
    transition: all 0.3s ease;
}

/* ⏳ 未发生：半透明，灰色，看起来像“待办” */
.life-timeline-node.pending {
    opacity: 0.6;
    background-color: #f9f9f9;
    border-left-color: #ccc;
}

/* ✅ 已发生：不透明，背景变亮，边框变色 */
.life-timeline-node.happened {
    opacity: 1;
    background-color: #fff;
    /* 【修改】把绿色 #4CAF50 改成灰色 #ccc 或者更浅的 #e0e0e0 */
    border-left-color: #ccc; 
    box-shadow: 0 2px 8px rgba(0,0,0,0.05); 
}

/* 时间和图标 */
.life-timeline-time {
    font-size: 12px;
    color: #888;
    margin-bottom: 4px;
    font-weight: bold;
}

/* 内容文字 */
.life-timeline-content {
    font-size: 14px;
    color: #333;
    line-height: 1.5;
}

/* 已发生的内容文字颜色加深 */
.life-timeline-node.happened .life-timeline-content {
    color: #000;
}
/* --- 蝴蝶效应历史记录 (极简版) --- */

/* 1. 弹窗容器微调：去除多余内边距，让列表撑满 */
#butterfly-history-modal .modal-body {
    padding: 0 !important; /* 移除默认内边距 */
    background-color: #f7f7f7; /* 浅灰底色 */
}

/* 2. 卡片容器 */
.history-drawer-item {
    background: white;
    margin-bottom: 1px; /* 只有1px间距，像列表一样 */
    border-bottom: 1px solid #eee;
}

/* 3. 头部设计 (简洁明了) */
.drawer-header {
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    background: #fff;
    transition: background 0.2s;
}
.drawer-header:active {
    background-color: #fafafa;
}

.drawer-main-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.drawer-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.drawer-meta {
    font-size: 12px;
    color: #999;
    display: flex;
    gap: 8px;
    align-items: center;
}

/* 4. 操作区 (删除键 + 箭头) */
.drawer-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* SVG删除按钮 */
.drawer-delete-btn {
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.4;
    transition: opacity 0.2s;
}
.drawer-delete-btn:hover {
    opacity: 1;
}
.drawer-delete-btn svg {
    width: 18px;
    height: 18px;
    /* 注意：颜色在SVG内部或这里控制 */
}

/* 箭头 */
.drawer-arrow {
    font-size: 12px;
    color: #ccc;
    transition: transform 0.3s;
}
.history-drawer-item.open .drawer-arrow {
    transform: rotate(180deg);
}

/* 5. 内容区 (放弃时间轴，改为纯文本块) */
.drawer-content {
    display: none;
    padding: 15px 20px 25px 20px;
    background-color: #fff;
    border-top: 1px solid #f0f0f0;
}
.history-drawer-item.open .drawer-content {
    display: block;
}

/* 单个节点样式 */
.simple-node {
    margin-bottom: 15px;
    line-height: 1.6;
    font-size: 14px;
    color: #444;
}
.simple-node:last-child {
    margin-bottom: 0;
}
.simple-node-time {
    font-weight: bold;
    color: #5097CD; /* 主题色 */
    margin-right: 8px;
    font-size: 13px;
}
.simple-node-buff {
    display: inline-block;
    font-size: 11px;
    padding: 1px 5px;
    border-radius: 4px;
    margin-left: 5px;
    background-color: #f0f0f0;
    color: #888;
}
.simple-node-buff.positive { color: #4CAF50; background: rgba(76, 175, 80, 0.1); }
.simple-node-buff.negative { color: #e53935; background: rgba(229, 57, 53, 0.1); }
/* --- 🦋 蝴蝶效应历史记录入口按钮 (精装修版) --- */
.view-history-btn {
    /* 1. 移除浏览器默认的丑陋样式 */
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    border: none;

    /* 2. 布局与尺寸 */
    width: 100%;
    padding: 16px;       /* 增加内边距，让它更像一个卡片 */
    margin-top: 15px;    /* 与上方内容的间距 */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;            /* 图标和文字的间距 */

    /* 3. 视觉皮肤 */
    background-color: #ffffff;
    border: 1px solid #f0f0f0; /* 极淡的边框 */
    border-radius: 16px;       /* 大圆角，看起来更现代 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03); /* 悬浮感的柔和阴影 */
    
    /* 4. 文字样式 */
    color: #555;
    font-size: 15px;
    font-weight: 600;     /* 稍微加粗 */
    font-family: inherit; /* 继承全局字体 */
    
    /* 5. 动画过渡 */
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 悬停效果：上浮 + 变色 */
.view-history-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(80, 151, 205, 0.15); /* 阴影变成淡淡的主题色 */
    border-color: var(--global-theme-color);       /* 边框变色 */
    color: var(--global-theme-color);              /* 文字变色 */
    background-color: #fcfdff;
}

/* 点击效果：微缩 */
.view-history-btn:active {
    transform: scale(0.98);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}
/* --- 晨间唤醒迷你面板 (V2.0) --- */
.morning-panel {
    position: fixed;
    top: 80px; /* 避开顶部栏 */
    right: 20px;
    width: 260px; /* 小巧宽度 */
    background: rgba(255, 255, 255, 0.85); /* 亮色毛玻璃 */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    z-index: 9000;
    padding: 15px;
    transition: height 0.3s ease, opacity 0.3s ease; /* 增加高度过渡 */
    overflow: hidden; /* 折叠时隐藏内容 */
}
/* 折叠状态：只保留标题栏高度 */
.morning-panel.collapsed {
    height: 48px !important; /* 微调高度 */
    padding: 0 15px !important; /* 移除上下内边距，只留左右 */
    display: flex; /* 关键：启用 Flexbox */
    align-items: center; /* 关键：垂直居中 */
    justify-content: space-between; /* 确保标题和按钮两端对齐 */
}
.morning-panel.collapsed .morning-panel-header {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
    width: 100%; /* 占满宽度 */
}
.morning-panel.collapsed .morning-grid-mini {
    display: none; /* 直接不显示，防止占位 */
}
.morning-panel.collapsed #minimize-routine-btn svg {
    transform: rotate(-90deg); /* 箭头旋转 */
}

.morning-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    font-size: 14px;
    font-weight: bold;
    color: #333;
    cursor: move; /* 【关键】鼠标放上去变成十字箭头，提示可拖拽 */
    user-select: none; /* 防止拖拽时选中文字 */
}

#minimize-routine-btn {
    background: none;
    border: none;
    font-size: 18px;
    color: #999;
    cursor: pointer;
    padding: 0 5px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center; /* 确保SVG居中 */
}
#minimize-routine-btn svg {
    transition: transform 0.3s ease; /* 箭头旋转动画 */
}

.morning-grid-mini {
    display: flex;
    flex-direction: column; /* 垂直排列，更像一个列表 */
    gap: 12px;
}

/* 迷你卡片样式 */
.routine-card-mini {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 迷你进度环 */
.mini-ring-container {
    position: relative;
    width: 40px; /* 容器稍微大一点，容纳圆环 */
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mini-avatar {
    width: 28px; /* 头像尺寸 */
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    
    /* 核心居中代码 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
    z-index: 1;
}

.mini-ring-svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-90deg); /* 居中并旋转起始点 */
    width: 36px; /* SVG尺寸 */
    height: 36px;
    z-index: 2;
    pointer-events: none; /* 防止遮挡头像点击 */
}

.mini-ring-circle {
    stroke: var(--global-theme-color);
    stroke-width: 3;
    fill: none;
    stroke-dasharray: 113; /* 2 * PI * 18 */
    stroke-dashoffset: 113;
    transition: stroke-dashoffset 0.5s ease;
    stroke-linecap: round;
}

.mini-info {
    flex-grow: 1;
    overflow: hidden;
}

.mini-name {
    font-size: 13px;
    font-weight: 600;
    color: #333;
}

.mini-status {
    font-size: 11px;
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 状态颜色 */
.routine-card-mini.success .mini-ring-circle { stroke: #4CAF50; }
.routine-card-mini.error .mini-ring-circle { stroke: #f44336; }
.routine-card-mini.error .mini-status { color: #f44336; }
/* --- HTML 小剧场专属特权样式 (终极全屏版) --- */

/* 1. 针对包裹小剧场的消息行，解除宽度限制 */
.message-row--html-widget .message-content {
    max-width: 100% !important; /* 允许撑满整行 */
    width: 100% !important;
    padding: 0 !important; /* 移除内边距 */
}

/* 2. 针对小剧场气泡本身，移除所有装饰 (核弹级特赦令版) */
/* 【核心修改】我们在最前面加了 "html body"，这是CSS里提升权重的终极手段 */
html body #message-container .message-row .message.message-html-widget {
    /* --- 1. 脱掉“白底制服” --- */
    background: transparent !important;        /* 覆盖背景色 */
    background-color: transparent !important;  /* 双重保险 */
    background-image: none !important;         /* 覆盖可能存在的渐变背景或图片背景 */
    box-shadow: none !important;               /* 移除阴影 */
    border: none !important;                   /* 移除边框 */
    
    /* --- 2. 解除“圆角枷锁” --- */
    border-radius: 0 !important;               /* 变回直角，防止四个角被切 */
    
    /* --- 3. 解决“头部被裁” (关键！) --- */
    overflow: visible !important;              /* 【核心】允许内容溢出容器！这样你那个突出的标题就能显示了 */
    
    /* --- 4. 布局微调 --- */
    padding: 0 !important;                     /* 移除气泡内边距，让HTML撑满 */
    margin: 10px auto !important;              /* 上下留点空隙，左右居中 */
    width: 95% !important;                     /* 宽度稍微宽一点，更像一个卡片 */
    max-width: 100% !important;
    
    /* --- 5. 清除毛玻璃 --- */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* 3. 针对 iframe 内部容器 */
.message-html-container {
    margin: 0 !important; /* 移除之前的负边距 hack */
    width: 100% !important;
}

/* 4. 针对 iframe 本身 */
.message-html-widget iframe {
    display: block !important;
    width: 100% !important;
    /* 移除 iframe 默认边框 */
    border: none !important; 
    /* 确保没有圆角 */
    border-radius: 0 !important;
}
/* --- 【全新】游戏中心与狼人杀样式 --- */

/* 游戏入口卡片 */
.game-entry-card {
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    cursor: pointer;
    transition: transform 0.2s;
    border: 1px solid #f0f0f0;
}
.game-entry-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}
.game-icon-large {
    font-size: 40px;
    width: 60px;
    height: 60px;
    background: #f0f2f5;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.game-tags span {
    font-size: 12px;
    color: #5097CD;
    background: #e3f2fd;
    padding: 2px 6px;
    border-radius: 4px;
    margin-right: 5px;
}

/* 邀请列表网格 */
.invite-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    padding: 5px;
    border-radius: 8px;
    border: 2px solid transparent;
    transition: all 0.2s;
}
.invite-item.selected {
    background: rgba(80, 151, 205, 0.1);
    border-color: #5097CD;
}
.invite-item img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 4px;
}
.invite-item span {
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* --- 狼人杀游戏界面 --- */
.werewolf-header {
    height: 60px;
    background: linear-gradient(180deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 10;
}
/* 2. 顶部状态条背景去除图片 */
.game-status-badge {
    /* 使用半透明黑底 */
    background-color: rgba(0,0,0,0.6);
    color: #ffd700;
    padding: 5px 15px;
    border-radius: 20px;
    font-weight: bold;
    border: 1px solid #ffd700;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.2;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.2);
}
#game-day-count { font-size: 14px; }
#game-phase-text { font-size: 12px; color: #fff; }

#werewolf-table-area {
    flex-grow: 1;
    position: relative;
    background-image: url('https://i.postimg.cc/k4X6x58R/werewolf-bg-night.jpg'); /* 夜晚背景图，你可以换 */
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

/* 座位样式 (核心) */
.ww-seat {
    position: absolute;
    width: 60px;
    height: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.3s;
}
.ww-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    object-fit: cover;
    background: #333;
}
.ww-seat.dead .ww-avatar {
    filter: grayscale(100%);
    border-color: #555;
}
.ww-number {
    position: absolute;
    top: 40px;
    background: #333;
    color: #fff;
    font-size: 12px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    text-align: center;
    line-height: 18px;
    border: 1px solid #fff;
}
.ww-role-badge {
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 20px;
    background: #673AB7;
    color: #fff;
    font-size: 12px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #fff;
    z-index: 2;
}
/* 发言气泡 */
.ww-speech-bubble {
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255,255,255,0.9);
    color: #000;
    padding: 8px;
    border-radius: 8px;
    font-size: 12px;
    width: 120px;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 5;
}
.ww-speech-bubble::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid rgba(255,255,255,0.9);
}
.ww-speech-bubble.show { opacity: 1; }

/* 1. 底部控制台 (默认隐藏，需要时才显示) */
.werewolf-controls {
    /* 【核心修复】默认不显示，避免开局占位 */
    display: none; 
    
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    /* 稍微加高一点，让按钮不贴底 */
    padding: 15px 0 25px 0;
    background: linear-gradient(to top, rgba(0,0,0,0.9), rgba(0,0,0,0));
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 50;
    pointer-events: auto; /* 确保按钮可点 */
}

/* 当有内容时，通过 JS 添加 .show 类来显示 */
.werewolf-controls.show {
    display: flex;
}
#ww-action-prompt {
    color: #eee;
    font-size: 14px;
    margin-bottom: 15px;
    text-shadow: 0 1px 2px black;
    font-weight: 500;
}
.ww-action-buttons {
    display: flex;
    gap: 15px;
}
.ww-btn {
    padding: 10px 25px;
    border-radius: 20px;
    border: none;
    font-weight: bold;
    cursor: pointer;
    color: #fff;
    font-size: 16px;
}
.ww-btn.primary {
    background: linear-gradient(to right, #f857a6, #ff5858);
    box-shadow: 0 4px 15px rgba(255, 88, 88, 0.4);
}
.ww-btn.secondary {
    background: rgba(255,255,255,0.2);
    border: 1px solid rgba(255,255,255,0.3);
}
/* --- 狼人杀游戏界面布局优化 (左右列版) --- */

/* 1. 背景改为深色径向渐变，模拟深夜氛围，不再使用外链图片 */
#werewolf-table-area {
    flex-grow: 1;
    position: relative;
    /* 深夜蓝黑渐变 */
    background: radial-gradient(circle at 50% 30%, #2c3e50 0%, #000000 100%);
    overflow: hidden;
}

/* --- 座位核心样式 (修复序号遮挡问题) --- */
.ww-seat {
    position: absolute;
    width: 60px; 
    /* 高度设为 auto，让内容自然堆叠，防止挤压 */
    height: auto; 
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 20;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
/* 当前发言的玩家高亮 */
.ww-seat.speaking .ww-avatar {
    border-color: #ffd700;
    box-shadow: 0 0 15px #ffd700;
    transform: scale(1.1);
}

/* 死亡状态 */
.ww-seat.dead {
    opacity: 0.6;
    filter: grayscale(100%);
}
.ww-seat.dead .ww-role-badge {
    background-color: #333; /* 死亡标记变黑 */
}
/* 头像容器 */
.ww-avatar-wrapper {
    position: relative;
    width: 54px;
    height: 54px;
    margin-bottom: 5px; /* 给下方的序号留出距离 */
}
/* 头像 */
.ww-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.6);
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    object-fit: cover;
    background: #333; /* 图片加载失败时的底色 */
}

/* 身份标记 (右上角小圆标) - 保持绝对定位在头像上 */
.ww-role-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 22px;
    height: 22px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    z-index: 3;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}
/* 狼人身份特殊色 */
.ww-role-badge.wolf { background: linear-gradient(135deg, #ff416c, #ff4b2b); }
/* 预言家身份特殊色 */
.ww-role-badge.seer { background: linear-gradient(135deg, #f093fb, #f5576c); }
/* 女巫身份特殊色 */
.ww-role-badge.witch { background: linear-gradient(135deg, #4facfe, #00f2fe); }



/* 序号 (底部) - 【核心修复】改为相对定位，不再挡脸 */
.ww-number {
    position: relative; /* 改回相对定位 */
    margin-top: -8px;   /* 稍微向上提一点点，压在头像边缘，但不要挡住脸 */
    background: #222;
    color: #fff;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.3);
    z-index: 4;
    line-height: 1;
}

/* --- 中间舞台区域 --- */
#ww-center-stage {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* 让点击穿透 */
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 5;
}

/* 发言状态条 */
#ww-stage-status-bar {
    margin-top: 35%; /* 大约在屏幕中间偏上 */
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(5px);
    padding: 8px 20px;
    border-radius: 30px;
    color: #fff;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(255,255,255,0.2);
    animation: fadeIn 0.5s ease;
}

/* 实时字幕气泡 */
#ww-stage-subtitle {
    margin-top: 15px;
    background: rgba(255, 255, 255, 0.95);
    color: #333;
    padding: 12px 18px;
    border-radius: 16px;
    border-bottom-left-radius: 2px; /* 像气泡一样 */
    max-width: 70%;
    font-size: 14px;
    line-height: 1.5;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    animation: floatUp 0.3s ease;
    text-align: left;
}

/* --- 底部立绘展示区 --- */
#ww-active-character-portrait {
    position: absolute;
    bottom: 0;
    /* 立绘放在屏幕中间偏右一点，或者正中间，看素材风格 */
    /* 这里我们放中间 */
    left: 50%;
    transform: translateX(-50%); 
    width: 280px; /* 限制最大宽度 */
    height: 350px; /* 限制高度 */
    z-index: 1; /* 在座位下面，背景上面 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    pointer-events: none;
    
    /* 渐变遮罩，让立绘底部融入背景 */
    -webkit-mask-image: linear-gradient(to top, transparent 0%, black 20%, black 100%);
}

#ww-portrait-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 0 10px rgba(0,0,0,0.5));
    transition: all 0.3s ease;
}

.ww-portrait-name-tag {
    background: linear-gradient(90deg, transparent, rgba(0,0,0,0.8), transparent);
    color: #fff;
    padding: 5px 30px;
    margin-bottom: 10px; /* 稍微离底边一点 */
    text-shadow: 0 1px 2px black;
    font-size: 16px;
    font-weight: bold;
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
}

/* 动画 */
@keyframes floatUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
/* --- 狼人杀游戏界面布局优化 (纯CSS版 V3.0 - 紧凑修正) --- */

/* 1. 背景 */
#werewolf-table-area {
    flex-grow: 1;
    position: relative;
    background: radial-gradient(circle at 50% 30%, #2c3e50 0%, #000000 100%);
    overflow: hidden;
}

/* 2. 顶部状态条 */
.game-status-badge {
    background-color: rgba(0,0,0,0.6);
    color: #ffd700;
    padding: 5px 15px;
    border-radius: 20px;
    font-weight: bold;
    border: 1px solid #ffd700;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.2;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.2);
}

/* --- 座位核心样式 (紧凑堆叠) --- */
.ww-seat {
    position: absolute;
    width: 70px; /* 限制宽度 */
    height: auto; 
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 20;
    transition: all 0.3s ease;
}

/* 头像容器 (包含头像、身份标、序号) */
.ww-avatar-wrapper {
    position: relative;
    width: 54px;
    height: 54px;
    margin-bottom: 12px; /* 底部留出空间给半悬浮的序号 */
}

/* 头像 */
.ww-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.6);
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    object-fit: cover;
    background: #333;
    display: block;
}

/* 身份标记 (右上角) */
.ww-role-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 20px;
    height: 20px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    z-index: 3;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}
.ww-role-badge.wolf { background: linear-gradient(135deg, #ff416c, #ff4b2b); }
.ww-role-badge.seer { background: linear-gradient(135deg, #f093fb, #f5576c); }
.ww-role-badge.witch { background: linear-gradient(135deg, #4facfe, #00f2fe); }

/* 序号 (头像正下方半悬浮 - 胶囊样式) */
.ww-number {
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    
    background: rgba(0, 0, 0, 0.8); /* 半透明黑底 */
    color: #fff;
    font-size: 10px; /* 稍微缩小字号 */
    
    /* 【核心修复】让它变成宽一点的胶囊，而不是圆 */
    padding: 1px 6px; 
    border-radius: 10px; 
    min-width: 24px; /* 保证最小宽度 */
    text-align: center;
    
    border: 1px solid rgba(255, 255, 255, 0.6);
    z-index: 4;
    line-height: 14px;
    white-space: nowrap; /* 强制不换行，确保“号”字在里面 */
    box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

/* 名字 (最下方) */
.ww-name {
    font-size: 11px;
    color: rgba(255,255,255,0.9);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    text-shadow: 0 1px 2px #000;
    margin-top: 2px;
}

/* 当前发言高亮 */
.ww-seat.speaking .ww-avatar {
    border-color: #ffd700;
    box-shadow: 0 0 15px #ffd700;
    transform: scale(1.05);
}
.ww-seat.speaking .ww-number {
    background: #ffd700;
    color: #000;
    border-color: #ffd700;
    font-weight: bold;
}
.ww-seat.speaking .ww-name {
    color: #ffd700;
    font-weight: bold;
}

/* 死亡样式 */
.ww-seat.dead {
    opacity: 0.6;
    filter: grayscale(100%);
}

/* --- 狼人杀中间舞台 (聊天室流式布局) --- */

#ww-center-stage {
    position: absolute;
    /* 避开顶部Header(60px) 和 底部立绘区域(约150px保留空间) */
    top: 70px;
    bottom: 140px; 
    /* 限制宽度，使其位于左右两列座位中间 */
    left: 90px; 
    right: 90px;
    width: auto; /* 自动适应左右边距 */
    height: auto;
    
    display: flex;
    flex-direction: column;
    z-index: 15; /* 低于座位(20)，但高于背景 */
    pointer-events: none; /* 容器本身穿透 */
}

/* 顶部状态条 (悬浮) */
#ww-stage-status-bar {
    flex-shrink: 0;
    align-self: center;
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid #ffd700;
    color: #ffd700;
    padding: 4px 15px;
    border-radius: 20px;
    font-size: 12px;
    margin-bottom: 10px;
    pointer-events: auto;
    box-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

/* 游戏历史记录容器 */
#ww-game-log {
    flex-grow: 1;
    background: rgba(0, 0, 0, 0.5); /* 半透明黑底 */
    backdrop-filter: blur(5px);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 10px;
    overflow-y: auto;
    pointer-events: auto; /* 允许滚动 */
    display: flex;
    flex-direction: column;
    gap: 8px;
    
    /* 隐藏滚动条但允许滚动 */
    scrollbar-width: none; 
}
#ww-game-log::-webkit-scrollbar { display: none; }

/* 单条日志样式 */
.ww-log-item {
    font-size: 13px;
    line-height: 1.5;
    padding: 8px;
    border-radius: 8px;
    color: #ddd;
    word-wrap: break-word;
    animation: fadeIn 0.3s ease;
}

/* 不同类型的日志颜色 */
.ww-log-item.system {
    background: rgba(255, 255, 255, 0.1);
    color: #aaa;
    text-align: center;
    font-size: 12px;
}
.ww-log-item.speech {
    background: rgba(80, 151, 205, 0.15);
    border-left: 3px solid #5097CD;
}
.ww-log-item.speech b {
    color: #5097CD;
    margin-right: 5px;
}
.ww-log-item.vote {
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.3);
    color: #ffd700;
}

/* --- 输入框区域 (悬浮、居中、变窄) --- */
#ww-user-speech-input {
    /* 【核心修复】定位到底部，不遮挡上面的日志 */
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    
    /* 【核心修复】进一步限制最大宽度，左右留出空隙 */
    width: 90%; /* 不占满 */
    max-width: 260px; /* 限制死宽度，确保不碰头像 */
    
    display: flex;
    align-items: center;
    gap: 8px;
    pointer-events: auto;
    
    background: transparent;
    padding: 0 0 15px 0; /* 底部留一点距离 */
    z-index: 50; 
}
/* 输入框本体 */
#ww-speech-text {
    flex-grow: 1;
    height: 38px; /* 稍微增高 */
    /* 【核心修复】深色毛玻璃风格 */
    background: rgba(20, 20, 20, 0.8); 
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    border-radius: 20px;
    padding: 0 15px;
    font-size: 14px;
    outline: none;
    backdrop-filter: blur(5px);
    transition: all 0.2s;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
#ww-speech-text:focus {
    border-color: rgba(255, 255, 255, 0.6);
    background: rgba(40, 40, 40, 0.9);
}
#ww-speech-text::placeholder {
    color: rgba(255, 255, 255, 0.5);
}


/* 发送按钮 */
#ww-speech-send-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    
    /* 【核心修复】深色圆形按钮 */
    background: rgba(40, 40, 40, 0.8);
    backdrop-filter: blur(5px);
    
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
    color: transparent; 
    font-size: 0; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
#ww-speech-send-btn:hover {
    background: rgba(60, 60, 60, 0.9);
    transform: scale(1.05);
}

#ww-speech-send-btn:active {
    transform: scale(0.95);
}
#ww-speech-send-btn::after {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background-color: #ccc; /* 图标颜色改淡一点 */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.01 21L23 12 2.01 3 2 10l15 2-15 2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.01 21L23 12 2.01 3 2 10l15 2-15 2z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}
#ww-active-character-portrait {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%); 
    width: 280px;
    height: 350px;
    z-index: 1; 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to top, transparent 0%, black 20%, black 100%);
}
#ww-portrait-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 0 10px rgba(0,0,0,0.5));
    transition: all 0.3s ease;
}
.ww-portrait-name-tag {
    background: linear-gradient(90deg, transparent, rgba(0,0,0,0.8), transparent);
    color: #fff;
    padding: 5px 30px;
    margin-bottom: 10px;
    text-shadow: 0 1px 2px black;
    font-size: 16px;
    font-weight: bold;
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
}
@keyframes floatUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
/* --- 游戏交互状态样式 (阶段二新增) --- */

/* 1. 可交互状态：当轮到用户操作时，别人的座位变成可点击 */
.ww-seat.interactive {
    cursor: pointer;
    animation: pulse-border 1.5s infinite;
}
.ww-seat.interactive:hover .ww-avatar {
    border-color: #ff4b2b; /* 悬停变红 */
    box-shadow: 0 0 20px rgba(255, 75, 43, 0.6);
    transform: scale(1.1);
}

/* 2. 选中状态：用户选中了某人 */
.ww-seat.selected .ww-avatar {
    border-color: #ff0000;
    box-shadow: 0 0 30px #ff0000;
    transform: scale(1.15);
}
/* 选中标记 */
.ww-seat.selected::after {
    content: '🎯';
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 24px;
    animation: bounce 0.5s infinite alternate;
}

/* 3. 预言家查验结果样式 */
.ww-identity-reveal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.9);
    padding: 15px 25px;
    border-radius: 12px;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    border: 2px solid #ffd700;
    z-index: 100;
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.5);
    animation: popIn 0.3s ease;
    text-align: center;
}
.ww-identity-reveal span {
    display: block;
    font-size: 14px;
    color: #ccc;
    margin-top: 5px;
}

/* 呼吸动画 */
@keyframes pulse-border {
    0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}
@keyframes bounce {
    from { transform: translateX(-50%) translateY(0); }
    to { transform: translateX(-50%) translateY(-5px); }
}
@keyframes popIn {
    from { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
    to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
/* --- 投票阶段样式 (阶段三新增) --- */

/* 投票结果列表容器 */
.vote-result-list {
    width: 100%;
    max-height: 300px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

/* 单条投票记录 */
.vote-result-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.1);
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    color: #ddd;
}

/* 投票箭头 */
.vote-arrow {
    color: #ffd700;
    font-weight: bold;
    margin: 0 10px;
}

/* 被放逐者的高亮动画 */
.ww-seat.exiled .ww-avatar {
    border-color: #ff3b30;
    box-shadow: 0 0 20px #ff3b30;
    filter: grayscale(100%);
    transition: all 1s ease;
}
.ww-seat.exiled::after {
    content: '❌';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 40px;
    z-index: 100;
}
/* 1. 外层容器：加上 overflow: hidden 防止子元素漏边 */
.wolf-channel-content {
    width: 90%;
    max-width: 350px;
    background: #1a1a1a;
    border: 2px solid #e53935; /* 血红色边框 */
    border-radius: 16px; /* 大圆角 */
    padding: 0;
    display: flex;
    flex-direction: column;
    height: 60vh;
    box-shadow: 0 0 30px rgba(229, 57, 53, 0.3);
    overflow: hidden; /* 【核心修复】裁剪掉子元素多余的直角！ */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* 添加平滑过渡动画 */
}

/* 2. 头部：移除背景色，改由外层容器控制，或者确保顶部有圆角 */
.wolf-channel-header {
    padding: 12px 15px;
    /* 使用带透明度的渐变，这样看起来更高级 */
    background: linear-gradient(90deg, rgba(142, 14, 0, 0.9), rgba(31, 28, 24, 0.9));
    color: #fff;
    font-weight: bold;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    flex-shrink: 0;
    /* 【核心修复】防止头部背景遮挡外层的圆角 */
    /* 虽然外层加了 overflow: hidden，但这行加上双重保险 */
    border-radius: 14px 14px 0 0; 
}


/* 2. 新增：头部右侧的按钮组容器 */
.wolf-header-controls {
    display: flex;
    align-items: center;
    gap: 10px; /* 按钮之间的间距 */
}

/* 3. 头部按钮优化 */
.wolf-header-btn {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    width: 32px; /* 稍微加大一点，更好点 */
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.2s;
    padding: 0;
    position: static !important;
    line-height: 1; /* 确保字符垂直居中 */
}
.wolf-header-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}


/* 4. 最小化模式样式 (位置改为屏幕正中) */
#wolf-channel-modal.minimized {
    background-color: transparent !important;
    pointer-events: none;
    /* 改为 Flex 居中布局 */
    align-items: center !important; 
    justify-content: center !important;
}
#wolf-channel-modal.minimized .wolf-channel-content {
    pointer-events: auto;
    width: 220px !important; /* 宽度适中 */
    height: auto !important;
    /* 【核心修复】不再贴底，而是居中显示 */
    margin: 0 !important; 
    border-width: 1px !important;
    /* 最小化时，背景稍微透明一点，不遮挡视线 */
    background: rgba(26, 26, 26, 0.9);
    box-shadow: 0 5px 20px rgba(0,0,0,0.5);
}

/* 5. 最小化时隐藏聊天记录和底部按钮，只留标题栏 */
#wolf-channel-modal.minimized #wolf-chat-history,
#wolf-channel-modal.minimized .wolf-chat-actions {
    display: none !important;
}

#wolf-chat-history {
    flex-grow: 1;
    overflow-y: auto;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    background-image: url('https://www.transparenttextures.com/patterns/dark-matter.png');
}

/* 狼人消息气泡 */
.wolf-msg {
    display: flex;
    gap: 10px;
    align-items: flex-end;
}
.wolf-msg.user { flex-direction: row-reverse; }

.wolf-msg .wolf-avatar img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #e53935;
}

.wolf-msg .wolf-bubble {
    background: #333;
    color: #ddd;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.5;
    max-width: 75%;
    position: relative;
}
.wolf-msg.ai .wolf-bubble { border-bottom-left-radius: 2px; border: 1px solid #444; }
.wolf-msg.user .wolf-bubble { 
    background: #e53935; 
    color: #fff; 
    border-bottom-right-radius: 2px; 
}

/* 底部区域 */
.wolf-chat-actions {
    padding: 15px;
    background: #111;
    border-top: 1px solid #333;
}

.wolf-btn-group {
    display: flex;
    gap: 10px;
}
.wolf-btn-group button { flex: 1; }

.wolf-input-area {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
#wolf-chat-input {
    flex-grow: 1;
    background: #222;
    border: 1px solid #444;
    color: #fff;
    padding: 10px;
    border-radius: 8px;
}
#wolf-send-btn {
    background: #444;
    color: #fff;
    border: none;
    padding: 0 15px;
    border-radius: 8px;
    cursor: pointer;
}
/* --- 狼人杀游戏界面布局优化 (V4.0 - 宽屏沉浸版) --- */

/* 1. 背景 */
#werewolf-table-area {
    flex-grow: 1;
    position: relative;
    background: radial-gradient(circle at 50% 30%, #1a1a2e 0%, #000000 100%);
    overflow: hidden;
}

/* --- 缩小头像，腾出中间空间 --- */
.ww-seat {
    position: absolute;
    width: 60px; /* 缩小整体宽度 */
    height: auto; 
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 20;
    transition: all 0.3s ease;
}

.ww-avatar-wrapper {
    position: relative;
    width: 44px; /* 头像缩小到 44px */
    height: 44px;
    margin-bottom: 8px; 
}

.ww-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.5);
    box-shadow: 0 2px 8px rgba(0,0,0,0.6);
    object-fit: cover;
    background: #222;
}

.ww-role-badge {
    width: 16px; /* 标记也稍微缩小 */
    height: 16px;
    font-size: 9px;
    top: -2px;
    right: -2px;
}

/* 2. 序号修复 (完美居中) */
.ww-number {
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%); /* 核心：基于自身宽度居中 */
    
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    font-size: 11px; /* 字号微调 */
    
    /* 【核心修复】Flex布局保证文字在胶囊里绝对居中 */
    display: flex;
    align-items: center;
    justify-content: center;
    
    padding: 2px 8px; /* 左右留出空间 */
    border-radius: 10px; 
    min-width: 32px; /* 保证最小宽度，放下"X号" */
    height: 18px; /* 固定高度 */
    
    border: 1px solid rgba(255, 255, 255, 0.5);
    z-index: 4;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.ww-name {
    font-size: 10px;
    margin-top: 2px;
    max-width: 70px; /* 限制名字宽度 */
}

/* 左右定位微调：更靠边一点 */
/* (这部分由 JS 的 renderSeatsLayout 控制，稍后我们去 JS 里改) */

/* --- 中间舞台 (加宽、上移、防遮挡) --- */
#ww-center-stage {
    position: absolute;
    /* 【核心修复】大幅减小顶部距离，消除空白 */
    top: 55px; 
    
    /* 【核心修复】加大底部距离，给输入框腾出位置，不让输入框盖住字 */
    bottom: 70px; 
    
    /* 【核心修复】左右边距微调，让它不要贴着头像 */
    left: 60px; 
    right: 60px;
    
    display: flex;
    flex-direction: column;
    z-index: 15;
    pointer-events: none; 
}

/* 顶部状态条 (如：第1天 自由讨论) */
#ww-stage-status-bar {
    flex-shrink: 0;
    align-self: center;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 215, 0, 0.3);
    color: #ffd700;
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 11px;
    margin-bottom: 8px;
    pointer-events: auto;
    backdrop-filter: blur(4px);
}

/* 游戏日志容器 */
#ww-game-log {
    flex-grow: 1;
    background: transparent; 
    border: none;
    box-shadow: none;
    /* 【核心修复】减少内边距，让文字更紧凑 */
    /* 上左右为5px，底部增加到 60px，防止被输入框挡住最后一行字 */
    padding: 5px 5px 60px 5px; 
    
    overflow-y: auto;
    pointer-events: auto; 
    display: flex;
    flex-direction: column;
    gap: 8px;
    
    scrollbar-width: none; 
}
#ww-game-log::-webkit-scrollbar { display: none; }

/* 日志条目 (通用基础样式) */
.ww-log-item {
    font-size: 13px;
    line-height: 1.5;
    padding: 10px 14px; /* 稍微加大内边距，更像气泡 */
    border-radius: 16px; /* 更圆润 */
    color: #eee; /* 文字颜色 */
    word-wrap: break-word;
    animation: fadeIn 0.3s ease;
    
    /* 【核心修复】默认使用高级黑透底 + 毛玻璃 */
    background: rgba(30, 30, 30, 0.7);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.1); /* 极细的白边 */
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    
    align-self: flex-start; 
    max-width: 100%;
    margin-bottom: 4px;
}

/* 玩家发言气泡 (放弃蓝色，改用略微不同的深色或边框区分) */
.ww-log-item.speech {
    /* 【核心修复】不再用蓝色底，改用深灰底 + 亮一点的边框 */
    background: rgba(50, 50, 50, 0.8); 
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}

/* 名字高亮 (保持一点点颜色用来区分是谁说的) */
.ww-log-item.speech b { 
    color: #ffd700; /* 金色名字，清晰且高级 */
    margin-right: 4px; 
    font-weight: bold;
}
/* 系统消息 (居中、更透) */
.ww-log-item.system, .ww-log-item.vote {
    align-self: center;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 20px;
    font-size: 12px;
    padding: 4px 12px;
    color: #ccc;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
}
/* --- 实时发言气泡 (恢复弹窗) --- */
.ww-speech-bubble {
    position: absolute;
    /* 位于头像上方 */
    bottom: 65px; 
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.95);
    color: #000;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    width: 140px; /* 气泡宽度 */
    text-align: left;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 100; /* 最上层 */
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}
.ww-speech-bubble::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid rgba(255, 255, 255, 0.95);
}
.ww-speech-bubble.show { opacity: 1; }
/* --- 修复补丁：顶部信息栏 & 底部输入框位置 --- */

/* 1. 顶部个人信息展示板样式 */
#ww-top-info-hud {
    width: 90%;
    background: rgba(0, 0, 0, 0.6); /* 半透明黑底 */
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    padding: 10px;
    margin-top: 15px; /* 距离顶部一点距离 */
    text-align: center;
    color: #fff;
    font-size: 13px;
    line-height: 1.6;
    backdrop-filter: blur(4px);
    pointer-events: auto;
    animation: fadeIn 0.5s ease;
    z-index: 20; /* 确保显示在最上层 */
}

#ww-my-role-display {
    font-weight: bold;
    color: #ffd700; /* 金色字体显示身份 */
    font-size: 15px;
    margin-bottom: 4px;
}

#ww-night-info-display {
    color: #ddd;
    font-size: 12px;
}

/* 2. 修复输入框位置 & 分离按钮 */
#ww-user-speech-input {
    /* 强制绝对定位 */
    position: absolute !important;
    
    /* 【核心修改】把 bottom 改为 0，让它沉到底部与头像平齐 */
    bottom: 0px !important; 
    
    /* 左右居中 */
    left: 50% !important;
    transform: translateX(-50%) !important;
    
    /* 宽度调整 */
    width: 100% !important; 
    max-width: 340px !important;
    
    /* 【核心修改】背景设为透明，因为我们要给输入框和按钮单独设背景 */
    background: transparent !important;
    
    /* 使用 Flex 布局让输入框和按钮左右排开 */
    display: flex !important;
    align-items: center !important;
    gap: 10px !important; /* 输入框和按钮之间的空隙 */
    
    padding: 10px 15px !important;
    z-index: 100 !important;
}

/* 输入框本体 (左边长的那个) */
#ww-speech-text {
    /* 给输入框单独加深色背景和圆角 */
    background: rgba(0, 0, 0, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 24px !important;
    padding: 10px 15px !important;
    height: 44px !important;
    color: white !important;
    box-shadow: none !important;
    flex-grow: 1 !important; /* 让它占满剩余空间 */
}

/* 发送按钮 (右边圆的那个) */
#ww-speech-send-btn {
    /* 给按钮单独加背景 */
    background: rgba(255, 255, 255, 0.2) !important;
    border: none !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important; /* 圆形 */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important; /* 防止被挤扁 */
}

/* 3. 调整中间状态条的位置，给顶部信息栏让路 */
#ww-stage-status-bar {
    margin-top: 10px !important; /* 减小原来的巨大间距 */
}
/* ============================================================
   V-PROFILE-CARD: AI个人资料名片专属样式
   ============================================================ */

/* 1. 弹窗容器调整：让它更像一张卡片 */
.profile-card-content {
    padding: 0 !important; /* 移除默认内边距，我们需要全屏背景 */
    background-color: #fff !important;
    overflow: hidden !important;
    border-radius: 20px !important;
    max-width: 340px !important;
    height: 80vh !important; /* 占据屏幕高度的80% */
    max-height: 650px !important;
}

/* 2. 顶部背景区 */
.profile-card-header {
    height: 200px;
    background-color: #ccc; /* 默认灰色，JS会修改它 */
    background-size: cover;
    background-position: center;
    position: relative;
    flex-shrink: 0;
}

/* 渐变遮罩：让文字更清晰，且让头像下方有过渡 */
.profile-header-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 60%, rgba(255,255,255,1) 100%);
}

/* 3. 头像容器 (悬浮在背景和白色区域交界处) */
.profile-avatar-container {
    position: absolute;
    bottom: -35px; /* 下沉效果 */
    left: 20px;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    border: 4px solid #fff; /* 白色描边 */
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 2;
    background: #fff;
}

.profile-avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

/* 刷新按钮 (右上角悬浮) */
.refresh-profile-btn {
    position: absolute;
    bottom: 10px;
    right: 15px;
    background: rgba(255,255,255,0.3);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #333;
    z-index: 5;
    transition: transform 0.3s;
}
.refresh-profile-btn:hover {
    transform: rotate(90deg);
    background: rgba(255,255,255,0.6);
}

/* 4. 信息展示区 */
.profile-info-section {
    padding: 40px 20px 10px 20px; /* 顶部留出空间给头像 */
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.profile-names {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

#profile-nickname {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    color: #333;
}

.profile-tag {
    font-size: 12px;
    color: #999;
    background: #f0f0f0;
    padding: 2px 6px;
    border-radius: 4px;
}

.profile-signature {
    margin: 5px 0 10px 0;
    font-size: 14px;
    color: #666;
    line-height: 1.5;
    font-style: italic;
}

.profile-tags-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.info-badge {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 12px;
    background-color: #e3f2fd; /* 默认蓝色，JS会改 */
    color: #1565c0;
    font-weight: 500;
}

/* 5. QQ秀占位区 */
.profile-qq-show-area {
    flex-grow: 1;
    margin: 10px 20px;
    background-color: #f7f9fc;
    border-radius: 12px;
    border: 2px dashed #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 150px;
}

.qq-show-placeholder {
    text-align: center;
    color: #aaa;
    font-size: 13px;
}

/* 6. 底部按钮区 */
.profile-footer {
    padding: 15px 20px;
    display: flex;
    gap: 10px;
    border-top: 1px solid #f0f0f0;
}
/* --- 【修复】名片弹窗关闭按钮位置 --- */
#ai-profile-card-modal .close-button {
    /* 1. 强制定位到右上角 */
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    
    /* 2. 【核心】取消之前的垂直居中位移！ */
    transform: none !important; 
    
    /* 3. 美化：因为背景可能是深色或浅色，加一个半透明黑底背景，确保能看清 */
    background-color: rgba(0, 0, 0, 0.3) !important;
    color: white !important;
    width: 30px !important;
    height: 30px !important;
    z-index: 20 !important; /* 确保在最上层 */
}

#ai-profile-card-modal .close-button:hover {
    background-color: rgba(0, 0, 0, 0.6) !important;
    transform: scale(1.1) !important; /* 悬停时稍微放大 */
}

/* --- 【新增】背景区域可点击样式 --- */
.profile-card-header {
    cursor: pointer; /* 鼠标放上去变小手 */
}
/* 给个提示，告诉用户这里可以点 */
.profile-card-header:hover::after {
    content: '点击更换背景';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgba(255,255,255,0.9);
    font-size: 14px;
    font-weight: bold;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
    pointer-events: none;
}
/* ============================================================
   V-PROFILE-FIX-FINAL: 个人资料卡按钮终极统一 (全透明版)
   ============================================================ */

/* 0. 容器定位基准 */
.profile-card-content {
    position: relative !important;
    height: auto !important; 
    min-height: 600px !important; 
    padding-bottom: 40px !important; 
}

/* --- 1. 按钮容器通用样式 (两个按钮完全共用) --- */
#ai-profile-card-modal .close-button,
.refresh-profile-btn {
    position: absolute !important;
    top: 15px !important;
    width: 32px !important;
    height: 32px !important;
    z-index: 20 !important;
    
    /* 布局居中 */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* 【核心】平时完全透明，无边框无阴影 */
    background-color: transparent !important; 
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    padding: 0 !important;
    border-radius: 50% !important;
    
    /* 图标颜色：统一为半透明白色 */
    color: rgba(255, 255, 255, 0.8) !important; 
    
    /* 动画过渡 */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* --- 2. SVG 图标通用样式 (强制统一大小) --- */
#ai-profile-card-modal .close-button svg,
.refresh-profile-btn svg {
    width: 18px !important; 
    height: 18px !important; 
    stroke-width: 2.5 !important;
    stroke: currentColor !important;
}

/* --- 3. 独立定位 --- */
/* 关闭按钮：靠右 */
#ai-profile-card-modal .close-button {
    right: 15px !important;
    transform: none !important;
}

/* 刷新按钮：在关闭按钮左侧 */
.refresh-profile-btn {
    right: 55px !important; 
    bottom: auto !important;
}

/* --- 4. 鼠标悬停效果 (统一加个淡淡的底) --- */
#ai-profile-card-modal .close-button:hover,
.refresh-profile-btn:hover {
    background-color: rgba(0, 0, 0, 0.2) !important; /* 鼠标放上去时，显示淡淡黑底 */
    color: white !important; /* 图标变亮 */
}

/* 刷新键特有的旋转 */
.refresh-profile-btn:hover {
    transform: rotate(180deg) scale(1.15) !important;
}
/* 关闭键特有的放大 */
#ai-profile-card-modal .close-button:hover {
    transform: scale(1.15) !important;
}

/* --- 其他辅助样式 --- */
#profile-realname-tag { display: none !important; }
.profile-qq-show-area { margin-top: 20px !important; margin-bottom: 0 !important; flex-grow: 1 !important; }
/* --- 用户资料卡专属样式 --- */
.status-preset-btn {
    padding: 5px 10px;
    border: 1px solid #eee;
    background: #f9f9f9;
    border-radius: 15px;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}
.status-preset-btn:hover {
    background: #e3f2fd;
    color: #1565c0;
    border-color: #bbdefb;
}

.user-tag-item {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: #e3f2fd;
    color: #1565c0;
    border-radius: 12px;
    font-size: 12px;
    margin-right: 5px;
    margin-bottom: 5px;
}
.user-tag-delete {
    margin-left: 5px;
    cursor: pointer;
    opacity: 0.6;
    font-weight: bold;
}
.user-tag-delete:hover {
    opacity: 1;
    color: #c62828;
}
/* 让侧边栏的个人信息区域显示为可点击 */
.side-menu-profile {
    cursor: pointer;
    transition: background-color 0.2s;
}
.side-menu-profile:hover {
    background-color: rgba(255, 255, 255, 0.1); /* 鼠标放上去稍微变亮一点 */
}
/* 【核心修复】将用户资料弹窗的层级提至最高，确保盖住侧边栏 */
#user-profile-card-modal {
    z-index: 99999 !important; /* 比侧边栏(2000)高很多 */
}

/* 让侧边栏头部的鼠标变成手型，提示可点击 */
.side-menu-profile {
    cursor: pointer;
    transition: background-color 0.2s;
}
.side-menu-profile:hover {
    background-color: rgba(255, 255, 255, 0.1);
}
/* 【核心修复】强制侧边栏头部可点击 */
.side-menu-profile {
    pointer-events: auto !important; /* 强制允许鼠标事件 */
    z-index: 2005 !important;        /* 确保层级比普通内容高 */
    position: relative !important;   /* 确保 z-index 生效 */
    cursor: pointer !important;      /* 强制显示手型光标 */
    /* 加一个明显的点击反馈，帮你确认是否点到了 */
}

.side-menu-profile:active {
    background-color: rgba(0, 0, 0, 0.2) !important; /* 点击时变深色，作为视觉反馈 */
}
/* =========================================
   QQ风格资料卡重构样式 (V3.0 精致版)
   ========================================= */

/* 1. 弹窗容器 */
.qq-profile-card {
    width: 100%;
    height: 100%;
    background-color: #f7f8fa; /* 稍微带点灰的背景，更有质感 */
    position: relative;
    overflow: hidden; 
    display: flex;
    flex-direction: column;
}

/* 2. 滚动区域 */
.qq-profile-scroll-area {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    z-index: 1; /* 确保在保存按钮下面 */
}

/* 3. 顶部大背景 */
.qq-header-bg {
    height: 260px;
    background-color: #ccc;
    background-size: cover;
    background-position: center;
    position: relative;
    cursor: pointer;
}
.qq-header-bg::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 60%, rgba(0,0,0,0.1) 100%); /* 底部微阴影 */
}

/* 4. 内容白底区域 (解决遮挡问题的核心) */
.qq-content-body {
    background-color: #fff;
    border-radius: 24px 24px 0 0; 
    margin-top: -24px; /* 稍微覆盖背景 */
    position: relative; /* 建立层叠上下文 */
    z-index: 10;        /* 确保内容盖住背景图 */
    padding: 0 24px;
    min-height: 500px;  /* 撑开高度 */
    box-shadow: 0 -5px 20px rgba(0,0,0,0.02);
}

/* 5. 悬浮头像 */
.qq-avatar-wrapper {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    border: 3px solid #fff; 
    position: absolute;
    top: -42px; /* 完美骑在边界上 */
    left: 24px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    cursor: pointer;
    overflow: hidden;
    z-index: 20; /* 确保头像在最上层 */
}
.qq-avatar-img { width: 100%; height: 100%; object-fit: cover; }

/* 6. 昵称输入 (去标签化) */
.qq-nickname-section {
    padding-top: 50px;
    margin-bottom: 8px;
}
.qq-nickname-input {
    font-size: 22px;
    font-weight: 700;
    color: #333;
    border: none;
    background: transparent;
    width: 100%;
    outline: none;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.qq-nickname-input::placeholder { color: #ccc; }

/* 7. 状态栏 (胶囊样式) */
.qq-status-section {
    margin-bottom: 25px;
    display: flex;
}
.qq-status-pill {
    display: inline-flex;
    align-items: center;
    background: #f2f2f2;
    padding: 4px 12px;
    border-radius: 100px;
    font-size: 12px;
    color: #666;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid transparent;
}
.qq-status-pill:hover {
    background: #e8e8e8;
}
.qq-status-pill .status-dot {
    width: 6px; height: 6px; background: #4CAF50;
    border-radius: 50%; margin-right: 6px;
}

/* 8. 通用字段行 (图标对齐) */
.qq-field-group {
    display: flex;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid #f5f5f5;
}
.qq-field-group.vertical {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 5px; /* 标签区域底部留白少一点 */
}
.qq-label-row {
    display: flex;
    align-items: center;
    width: 100%;
}
/* 图标容器：固定宽度，确保对齐 */
.qq-field-icon {
    width: 24px;
    height: 24px;
    margin-right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* 输入框 */
.qq-field-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 15px;
    color: #333;
    outline: none;
}
.qq-field-input::placeholder { color: #bbb; }

/* 9. 标签样式 (小剧场风格) */
.qq-tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    /* 取消左侧留白，铺满 */
    padding-left: 0; 
}

/* 标签本体 */
.qq-tag-item {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 20px; /* 胶囊圆角 */
    font-size: 13px;
    color: #333 !important; /* 强制深灰色 */
    transition: all 0.2s;
}
.qq-tag-item:hover {
    border-color: #ccc;
    background-color: #fafafa;
}

/* 删除小叉号 */
.qq-tag-delete {
    margin-left: 6px;
    color: #ccc;
    font-size: 14px;
    cursor: pointer;
    line-height: 1;
}
.qq-tag-delete:hover { color: #ff4d4f; }

/* 虚线添加按钮 */
.qq-tag-add-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    background-color: #f9f9f9;
    border: 1px dashed #ccc; /* 虚线边框 */
    border-radius: 20px;
    font-size: 13px;
    color: #888;
    cursor: pointer;
    transition: all 0.2s;
}
.qq-tag-add-btn:hover {
    border-color: #999;
    color: #555;
    background-color: #f0f0f0;
}

/* 标签输入框 */
.qq-tag-input {
    background: #f5f5f5;
    border: none;
    padding: 10px 15px;
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    transition: box-shadow 0.2s;
}
.qq-tag-input:focus {
    box-shadow: 0 0 0 2px rgba(0,0,0,0.05);
}

/* 10. 底部悬浮保存按钮 (居中、美化) */
.qq-footer-fixed {
    position: absolute;
    bottom: 30px; /* 距离底部有距离，悬浮感 */
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    z-index: 50;
    pointer-events: none; /* 让容器穿透，只让按钮可点 */
}
.qq-save-btn {
    pointer-events: auto;
    width: 200px; /* 固定宽度，不大不小 */
    height: 48px;
    background: var(--gradient-primary); /* 主题渐变 */
    color: white;
    border: none;
    border-radius: 24px; /* 圆润 */
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(80, 151, 205, 0.25); /* 漂亮的投影 */
    transition: transform 0.2s, box-shadow 0.2s;
    letter-spacing: 1px;
}
.qq-save-btn:hover { 
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(80, 151, 205, 0.35);
}
.qq-save-btn:active { 
    transform: translateY(0);
    box-shadow: 0 4px 10px rgba(80, 151, 205, 0.2);
}

/* 12. 状态选择弹窗 (底部滑出) */
.qq-status-popup {
    position: absolute;
    bottom: 0; left: 0; width: 100%;
    background: #fff;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -5px 50px rgba(0,0,0,0.2);
    z-index: 100;
    padding: 20px;
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
.qq-status-popup.show { transform: translateY(0); }

.qq-status-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.qq-status-item {
    padding: 12px;
    background: #f7f8fa;
    border-radius: 12px;
    text-align: center;
    font-size: 14px;
    cursor: pointer;
    border: 1px solid transparent;
}
.qq-status-item:hover {
    background: #e3f2fd;
    color: var(--global-theme-color);
    border-color: var(--global-theme-color);
}
.qq-status-custom {
    grid-column: span 2;
    display: flex;
    gap: 10px;
    margin-top: 10px;
}
.qq-status-custom input {
    flex: 1;
    background: #f7f8fa;
    border: 1px solid #eee;
    padding: 10px;
    border-radius: 8px;
}
.qq-status-custom button {
    background: var(--global-theme-color);
    color: white;
    border: none;
    padding: 0 20px;
    border-radius: 8px;
    cursor: pointer;
}
/* 【核心修复】强制用户资料卡内的所有元素都能响应鼠标点击 */
#user-profile-card-modal,
.qq-profile-card,
.qq-save-btn,
.close-button-floating,
.qq-add-btn,
.qq-status-pill {
    pointer-events: auto !important;
    cursor: pointer;
}

/* 确保输入框可以输入 */
.qq-nickname-input,
.qq-field-input,
#user-tag-input {
    pointer-events: auto !important;
    cursor: text !important;
    z-index: 50 !important; /* 提高输入框层级 */
}
/* =========================================
   V-UI-FIX-FINAL: 资料卡细节终极修复
   ========================================= */

/* 1. 修复关闭按钮：强制绝对定位 + 透明背景 */
#close-user-profile-card-btn.close-button-floating {
    position: absolute !important; /* 核心：脱离文档流，飞到右上角 */
    top: 15px !important;
    right: 15px !important;
    width: 32px !important;
    height: 32px !important;
    
    /* 外观：透明底 + 白色图标 */
    background: transparent !important; 
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    color: rgba(255, 255, 255, 0.9) !important; /* 稍微带点透明的白色 */
    text-shadow: 0 1px 3px rgba(0,0,0,0.5); /* 加点阴影，防止背景太亮看不清 */
    
    font-size: 28px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    z-index: 100 !important; /* 确保在最上层 */
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
}

/* 悬停效果：微微放大 */
#close-user-profile-card-btn.close-button-floating:hover {
    transform: scale(1.1);
    color: #fff !important;
}

/* 2. 修复保存按钮阴影：改为灰色 */
.qq-save-btn {
    /* 保持按钮本身的渐变色 */
    background: var(--gradient-primary) !important; 
    
    /* 【核心修改】将阴影颜色从蓝色 (rgba 80, 151, 205) 改为 灰色黑色 (rgba 0, 0, 0) */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important; 
}

.qq-save-btn:hover {
    /* 悬停时的阴影也加深为灰色 */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25) !important;
    transform: translateY(-2px);
}
/* =========================================
   V-TAG-ALIGN-ULTIMATE: 标签对齐像素级终极修复
   ========================================= */

/* 1. 标签整体容器 */
.qq-tag-item, 
.qq-tag-add-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* 固定高度，为居中提供基准 */
    height: 32px !important;
    line-height: 1 !important;
    padding: 0 12px !important;
    
    /* 消除字体基线干扰 */
    vertical-align: middle !important;
}

/* 2. 删除叉号 "×" (向下拉一点) */
.qq-tag-delete {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    margin-left: 4px !important;
    
    /* 使用 Arial 字体，它的符号渲染位置比较正 */
    font-family: Arial, sans-serif !important;
    font-size: 20px !important; /* 放大一点 */
    font-weight: 400 !important;

}

/* 3. 添加按钮里的 "+" 号 (向上提一点) */
.qq-tag-add-symbol {
    display: inline-flex !important;
    align-items: center !important;
    font-family: Arial, sans-serif !important;
    font-size: 22px !important;
    font-weight: 300 !important;
    margin-right: 2px !important;
    

}

/* 4. "添加标签" 文字 (向上提一点) */
.qq-tag-add-text {
    display: inline-block !important;
    font-size: 13px !important;
    
    /* 【视觉微调】中文字体通常偏下，我们把它向上提 1px */
    transform: translateY(-1px) !important;
}
/* --- 【全新】钱包系统样式 --- */
.wallet-container {
    flex-grow: 1;
    overflow-y: auto;
    padding: 20px;

    /* 【核心修复】背景改为高浓度的白色毛玻璃，遮挡花哨壁纸 */
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    
    /* 稍微加一点阴影增加层次感 */
    box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.5);
}

/* 【顺便加上夜间模式适配】防止夜间模式下也是大白底刺眼 */
body.dark-theme .wallet-container {
    background: rgba(30, 30, 30, 0.95) !important;
    color: #eee;
}

/* 余额卡片 */
/* --- 【全新】高级感钱包卡片 (极光流光风格) --- */
.wallet-card {
    position: relative;
    width: 100%;
    height: 200px;
    border-radius: 24px;
    overflow: hidden;
    margin-bottom: 25px;
    box-shadow: 0 15px 35px rgba(35, 14, 107, 0.35); /* 深邃的投影 */
    transform: translateZ(0); /* 开启GPU加速 */
    border: 1px solid rgba(255, 255, 255, 0.1); /* 极细的边框 */
}

/* 1. 动态极光背景 */
.card-glow {
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: radial-gradient(circle at 50% 50%, 
        #4facfe 0%, 
        #00f2fe 30%, 
        #43e97b 60%, 
        #38f9d7 100%);
    /* 使用深色混合模式，营造深邃感 */
    background: conic-gradient(
        from 180deg at 50% 50%,
        #1A1A40 0deg,
        #4C2A85 60deg,
        #2A5298 120deg,
        #1A1A40 180deg,
        #4C2A85 240deg,
        #2A5298 300deg,
        #1A1A40 360deg
    );
    filter: blur(40px);
    animation: aurora-spin 15s linear infinite;
    z-index: 0;
}

@keyframes aurora-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 2. 噪点纹理 (增加实体质感) */
.card-noise {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
    opacity: 0.4;
    mix-blend-mode: overlay;
    z-index: 1;
}

/* 3. 内容层布局 */
.card-content {
    position: relative;
    z-index: 5;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 25px;
    color: white;
}

/* 顶部 */
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.wallet-label {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 500;
}
.chip-icon {
    width: 36px;
    height: 24px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
}

/* 中部余额 */
.balance-row {
    display: flex;
    /* 【核心修复】从 baseline 改为 center，让它们垂直居中对齐 */
    align-items: center; 
    gap: 12px; /* 稍微拉开一点间距 */
    margin-top: 5px; /* 微调与顶部的距离 */
}

.currency-symbol {
    font-size: 32px; /* 稍微放大图标，让比例更协调 */
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.6);
    /* 【视觉补偿】因为Emoji有时候视觉重心偏高，我们手动把它往下按 2像素 */
    transform: translateY(2px); 
    line-height: 1; /* 消除行高带来的额外间隙 */
}

.wallet-balance {
    font-size: 60px; /* 数字再加大一点点，更有冲击力 */
    font-weight: 700;
    line-height: 1; /* 【重要】紧贴文字边缘，防止上下留白影响对齐 */
    font-family: 'DIN Alternate', 'Roboto Mono', monospace; 
    letter-spacing: -2px; /* 让数字紧凑一点 */
    
    /* 文字渐变填充 (保持不变) */
    background: linear-gradient(to bottom, #ffffff 30%, #a8c0ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.2));
}

/* 底部信息 */
.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.card-id {
    font-family: 'Courier New', monospace;
    font-size: 12px;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.6);
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.card-type {
    font-size: 12px;
    font-weight: bold;
    font-style: italic;
    color: #ffd700; /* 金色 */
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

/* 4. 背景大图标装饰 */
.wallet-icon-bg {
    position: absolute;
    right: -20px;
    bottom: -40px;
    font-size: 180px;
    opacity: 0.08; /* 非常淡 */
    transform: rotate(-15deg);
    pointer-events: none;
    z-index: 2;
    filter: blur(2px);
    mix-blend-mode: overlay; /* 混合模式，让它融入背景 */
}

/* 转换入口 */
.wallet-convert-box {
    background: #fff8e1;
    border: 1px solid #ffe082;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 8px rgba(255, 193, 7, 0.15);
}
.convert-info h4 { margin: 0 0 5px 0; color: #f57f17; font-size: 15px; }
.convert-info p { margin: 0; font-size: 13px; color: #8d6e63; }
.convert-btn {
    background: #ffca28;
    color: #5d4037;
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 13px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(255, 202, 40, 0.3);
    white-space: nowrap;
}
.convert-btn:hover { background: #ffc107; transform: translateY(-1px); }

/* 账单列表 */
.wallet-history-section h3 {
    font-size: 16px;
    color: var(--text-dark);
    margin: 0 0 15px 0;
    padding-left: 5px;
    border-left: 4px solid var(--global-theme-color);
}
.wallet-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 50px;
}
.wallet-item {
    background: #fff;
    border-radius: 12px;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
    border: 1px solid #f0f0f0;
}
.wallet-item-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.wallet-item-reason {
    font-size: 15px;
    font-weight: 500;
    color: #333;
}
.wallet-item-time {
    font-size: 12px;
    color: #999;
}
.wallet-item-amount {
    font-size: 18px;
    font-weight: bold;
}
.wallet-item-amount.income { color: #4CAF50; } /* 绿色 */
.wallet-item-amount.expense { color: #F44336; } /* 红色 */
/* --- 音乐上传弹窗专属样式 --- */
#music-upload-modal .upload-panel {
    display: none;
    animation: fadeIn 0.3s ease;
}
#music-upload-modal .upload-panel.active {
    display: block;
}

/* 简单的音频文件选择框样式 */
#audio-file-area {
    border: 2px dashed var(--border-color);
    background: var(--background-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-size: 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
}
#audio-file-area:hover {
    border-color: var(--global-theme-color);
    color: var(--global-theme-color);
    background: rgba(80, 151, 205, 0.05);
}
/* ================================================================
   ▼▼▼ 【补丁】音乐上传弹窗 & 列表终极修复 ▼▼▼
   ================================================================ */

/* 1. 拓宽弹窗：让带有 modal-lg 类的弹窗变宽 */
.modal-content.modal-lg {
    max-width: 500px !important; /* 从 340px 增加到 500px */
    width: 95% !important;       /* 在手机上几乎占满宽度 */
    height: 85vh !important;     /* 增加高度 */
}

/* 2. 修复上传表单的留白 */
#music-upload-modal .modal-body {
    padding: 0 !important; /* 移除多余的内边距，让标签页贴边 */
    background-color: #fff !important; /* 确保背景纯白 */
}

#panel-upload-new {
    padding: 20px 25px !important; /* 给表单内部舒适的间距 */
}

/* 3. 修复已上传列表的布局 */
#uploaded-music-list {
    padding: 15px !important;
    display: flex;
    flex-direction: column;
    gap: 10px; /* 列表项之间的间距缩小 */
}

/* 4. 重塑列表项样式 (卡片化 + 强制深色文字) */
#uploaded-music-list .music-result-item {
    background-color: #f7f9fc !important; /* 给每个条目一个浅灰背景，区分彼此 */
    border: 1px solid #e0e0e0 !important;
    border-radius: 12px !important;
    padding: 12px !important;
    margin: 0 !important; /* 移除旧的 margin */
    
    display: flex !important;
    align-items: center !important;
    gap: 15px !important; /* 图片、文字、按钮之间的间距 */
}

/* 5. 强制显示文字颜色 (解决看不见的问题) */
#uploaded-music-list .song-title {
    color: #333 !important; /* 强制深黑色 */
    font-size: 16px !important;
    font-weight: 600 !important;
    margin-bottom: 4px !important;
    display: block !important;
}

#uploaded-music-list .song-artist {
    color: #666 !important; /* 强制深灰色 */
    font-size: 13px !important;
    display: block !important;
}

/* 6. 确保中间的文字区域撑开 */
#uploaded-music-list .song-details {
    flex-grow: 1 !important; /* 占据剩余空间 */
    min-width: 0 !important; /* 防止文字过长撑破布局 */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

/* 7. 调整封面图大小 */
#uploaded-music-list .album-cover {
    width: 56px !important;
    height: 56px !important;
    border-radius: 8px !important;
    object-fit: cover !important;
    background-color: #eee; /* 图片加载失败时的底色 */
}

/* 8. 调整右侧按钮组 */
#uploaded-music-list .song-actions {
    gap: 8px !important; /* 按钮之间的间距 */
    margin-left: 0 !important; /* 移除旧的左边距 */
}

#uploaded-music-list .song-action-btn {
    width: 36px !important;
    height: 36px !important;
    border: 1px solid #ddd !important;
    background: #fff !important;
    color: #555 !important;
}

/* 9. 修复上传封面的预览区域大小 */
#upload-cover-area {
    width: 100% !important; /* 让上传框宽度撑满 */
    height: 120px !important;
    margin-top: 5px;
}
/* ================================================================
   ▼▼▼ 【补丁 V2】已上传列表排版 & 图标修复 ▼▼▼
   ================================================================ */

/* 1. 列表项容器修复：防止被撑大 */
#uploaded-music-list .music-result-item {
    height: 70px !important; /* 固定高度，防止被文字撑高 */
    padding: 10px 15px !important;
    align-items: center !important;
    gap: 15px !important;
    overflow: hidden !important; /* 隐藏溢出内容 */
}

/* 2. 文字区域修复：强制不换行 */
#uploaded-music-list .song-details {
    flex: 1 !important; /* 占据中间所有空间 */
    min-width: 0 !important; /* 【核心】允许压缩，防止撑破布局 */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 4px !important; /* 减小行间距 */
}

/* 3. 歌名和歌手：强制单行显示，超出省略 */
#uploaded-music-list .song-title,
#uploaded-music-list .song-artist {
    white-space: nowrap !important; /* 【核心】禁止文字换行 */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 100% !important;
    display: block !important;
}

#uploaded-music-list .song-title {
    font-size: 16px !important;
    color: #333 !important;
    line-height: 1.2 !important;
}

#uploaded-music-list .song-artist {
    font-size: 13px !important;
    color: #666 !important;
    line-height: 1.2 !important;
}

/* 4. 【全新】音频来源标签样式 (SVG图标版) */
.song-source-badge {
    display: flex;
    align-items: center;
    gap: 4px; /* 图标和文字的间距 */
    font-size: 11px;
    color: #999; /* 默认灰色 */
    margin-top: 2px;
}

/* 定义SVG图标的大小和颜色 */
.song-source-badge svg {
    width: 14px;
    height: 14px;
    stroke: currentColor; /* 让图标颜色跟随文字颜色 */
    fill: none;
}

/* 5. 修复右侧按钮组不换行 */
#uploaded-music-list .song-actions {
    flex-shrink: 0 !important; /* 禁止被压缩 */
    white-space: nowrap !important;
}
/* ================================================================
   ▼▼▼ 【修正 V4】已上传列表：极简紧凑版 (去除背景框，缩小按钮) ▼▼▼
   ================================================================ */

/* 1. 列表容器：去除多余内边距，让列表贴边 */
#uploaded-music-list {
    padding: 0 15px !important; /* 左右留一点白 */
    display: flex;
    flex-direction: column;
    gap: 0 !important; /* 移除列表项之间的大间距 */
    width: 100%;
    box-sizing: border-box;
}

/* 2. 单个列表项：【核心】去除卡片样式，回归纯净列表 */
#uploaded-music-list .music-result-item {
    background-color: transparent !important; /* 去除蓝色/灰色背景 */
    border: none !important; /* 去除边框 */
    border-bottom: 1px solid #f0f0f0 !important; /* 仅保留底部分割线 */
    border-radius: 0 !important; /* 去除圆角 */
    margin: 0 !important; /* 去除外边距 */
    padding: 12px 0 !important; /* 紧凑的上下内边距 */
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
}

/* 3. 中间文字区域：撑开宽度 */
#uploaded-music-list .song-details {
    flex: 1 !important; 
    min-width: 0 !important; /* 防止文字撑开 */
    padding: 0 10px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

/* 4. 歌名和歌手：样式微调 */
#uploaded-music-list .song-title {
    color: #333 !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    margin-bottom: 3px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
}

#uploaded-music-list .song-artist {
    color: #888 !important; /* 稍微淡一点的灰色 */
    font-size: 12px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
}

/* 5. 封面图：保持小巧 */
#uploaded-music-list .album-cover {
    width: 44px !important; /* 稍微缩小一点 */
    height: 44px !important;
    border-radius: 6px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
}

/* 6. 【核心】按钮组：缩小尺寸，紧凑排列 */
#uploaded-music-list .song-actions {
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important; /* 缩小按钮之间的间距 */
    margin-left: 5px !important;
}

/* 7. 【核心】按钮本体：大幅缩小，去除粗边框 */
#uploaded-music-list .song-action-btn {
    width: 28px !important; /* 从36px缩小到28px */
    height: 28px !important;
    padding: 0 !important; 
    border: 1px solid #eee !important; /* 极淡的边框 */
    background: transparent !important; /* 透明背景 */
    color: #999 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 8. 按钮内的图标适配 */
#uploaded-music-list .song-action-btn svg {
    width: 14px !important;
    height: 14px !important;
    stroke-width: 2px !important;
}

/* 9. 按钮悬停效果 */
#uploaded-music-list .song-action-btn:hover {
    background-color: #f5f5f5 !important;
    color: #333 !important;
    border-color: #ccc !important;
}

/* 特殊：播放按钮稍微突出一点点 */
#uploaded-music-list .song-action-btn.play-upload {
    border-color: var(--global-theme-color) !important;
    color: var(--global-theme-color) !important;
}

/* 10. 隐藏之前添加的来源图标文字，只留纯净的歌名歌手 */
#uploaded-music-list .song-source-badge {
    display: none !important;
}
/* ================================================================
   ▼▼▼ 【补丁】上传按钮居中修复 ▼▼▼
   ================================================================ */

#confirm-upload-music-btn {
    display: block !important;       /* 1. 变为块级元素，才能使用 margin: auto 居中 */
    margin: 20px auto 0 auto !important; /* 2. 上边距20px，左右自动(居中) */
    width: 90% !important;           /* 3. 宽度设为容器的 90% */
    max-width: 320px !important;     /* 4. 覆盖掉之前 180px 的限制，让它更宽 */
}
/* ================================================================
   V-VIDEO-CALL: 视频通话沉浸式 UI (V5.0 视觉终极优化)
   ================================================================ */
#video-call-view {
    background-color: #000;
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.video-remote-container {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 1;
}
.video-remote-photo {
    width: 100%; height: 100%; 
    object-fit: cover; 
    object-position: center top; 
}

/* 【核心】更深的黑色渐变遮罩，确保文字清晰 */
.video-immersive-gradient-dark {
    position: absolute;
    bottom: 0; left: 0; width: 100%; 
    height: 60%; /* 覆盖高度 */
    background: linear-gradient(to bottom, 
        rgba(0,0,0,0) 0%, 
        rgba(0,0,0,0.4) 20%, 
        rgba(0,0,0,0.8) 50%, 
        rgba(0,0,0,0.95) 100%);
    pointer-events: none;
    z-index: 2;
}

.video-local-container {
    position: absolute;
    top: 60px; right: 20px;
    width: 90px; height: 120px; 
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.3);
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    z-index: 10;
}
#local-video-stream {
    width: 100%; height: 100%;
    object-fit: cover; 
    transform: scaleX(-1); 
}

.video-immersive-layer {
    position: absolute;
    bottom: 0; left: 0; width: 100%;
    height: 50%; 
    z-index: 20;
    padding: 0 20px 20px 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    box-sizing: border-box;
    pointer-events: none; 
}
.video-immersive-layer > * { pointer-events: auto; }

/* --- A. 环境描写 (无Emoji，不透明度提高) --- */
.immersive-text.environment {
    align-self: flex-start;
    background: transparent !important;
    border: none !important;
    backdrop-filter: none !important;
    
    color: rgba(255, 255, 255, 0.85); /* 【修改】提高亮度 */
    font-size: 13px;
    line-height: 1.5;
    
    margin-bottom: auto; 
    margin-top: 10px;
    width: 100%;
    
    white-space: normal; 
    word-wrap: break-word;
    text-shadow: 0 1px 3px rgba(0,0,0,1); /* 强阴影 */
}
/* 通话时长计时器 */
.video-timer {
    align-self: center; /* 居中 */
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    margin-bottom: 5px; /* 与环境描写拉开一点距离 */
    letter-spacing: 1px;
    font-variant-numeric: tabular-nums; /* 防止数字跳动 */
    opacity: 0.8;
}
/* --- B. 聊天流容器 --- */
.immersive-chat-stream {
    flex-grow: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    /* 【核心修改】将间距从 15px 缩小到 4px，让对话非常紧凑 */
    gap: 4px; 
    
    margin-bottom: 20px;
    mask-image: none; 
    -webkit-mask-image: none;
    scrollbar-width: none; 
}
.immersive-chat-stream::-webkit-scrollbar { display: none; }

/* 消息行 (通用) */
.video-msg-row {
    display: flex;
    flex-direction: column;
    width: 100%;
    animation: slideUpFade 0.3s ease;
    transition: background-color 0.2s; /* 选中动画 */
    border-radius: 8px; /* 选中时的高亮圆角 */
}

/* 多选模式下的样式 */
.video-msg-row.in-select-mode {
    cursor: pointer;
    border: 1px solid rgba(255,255,255,0.1);
    padding: 5px;
    background: rgba(0,0,0,0.2);
}
/* 【核心】选中高亮：红色半透明背景 */
.video-msg-row.selected {
    background: rgba(229, 57, 53, 0.3) !important;
    border: 1px solid rgba(229, 57, 53, 0.5);
}

/* 动作描写 */
.video-action-text {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7); 
    font-style: italic;
    margin-bottom: 4px; 
    text-shadow: 0 1px 2px rgba(0,0,0,0.9);
    line-height: 1.4;
    text-align: left; 
    width: 100%;
    margin-top: 6px;
}

/* 对话文字 (通用) */
.video-bubble {
    font-size: 16px;
    line-height: 1.6; /* 增加行高 */
    text-shadow: 0 1px 3px rgba(0,0,0,1);
    font-weight: 500;
    max-width: 100%;
    padding: 0;
    word-wrap: break-word;
}

/* AI 说话 (左对齐 + 两端对齐) */
.video-msg-row.ai { 
    align-items: flex-start; 
    text-align: justify; /* 【核心】两端对齐 */
    text-align-last: left; /* 最后一行左对齐 */
}
.video-msg-row.ai .video-bubble { color: #fff; }

/* User 说话 (容器右对齐，文字左对齐，淡蓝) */
.video-msg-row.user { 
    align-items: flex-end; /* 靠右排列 */
    text-align: right;     /* 默认文本右对齐 */
}
.video-msg-row.user .video-bubble { 
    color: #aaddff; /* 淡蓝色 */
    text-align: left; /* 【核心】文字内容左对齐，像气泡一样 */
    display: inline-block; /* 收缩宽度 */
}


/* --- C. 底部控制区 --- */
.video-immersive-controls {
    display: flex;
    flex-direction: column;
    gap: 20px; 
    padding-bottom: env(safe-area-inset-bottom);
}

.immersive-input-box {
    display: flex;
    align-items: center;
    background: transparent !important; 
    border: none !important;
    border-radius: 0;
    padding: 0;
    backdrop-filter: none;
    box-shadow: none;
}

#video-chat-input {
    flex-grow: 1;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5); /* 加亮下划线 */
    border-radius: 0;
    color: white;
    font-size: 15px;
    padding: 8px 0;
    outline: none;
    transition: border-color 0.3s;
}
#video-chat-input:focus {
    border-bottom-color: rgba(255, 255, 255, 1);
}
#video-chat-input::placeholder { color: rgba(255,255,255,0.5); }

#video-send-btn {
    background: transparent;
    border: none;
    padding: 0 0 0 10px;
    cursor: pointer;
    opacity: 0.9;
    display: flex;
    align-items: center;
}
#video-send-btn svg {
    width: 28px; height: 28px; stroke: white !important; 
}

.immersive-buttons-compact {
    display: flex;
    justify-content: space-between;
    gap: 15px;
}

.video-capsule-btn {
    flex: 1; 
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 38px; 
    border-radius: 19px; 
    border: none;
    backdrop-filter: blur(10px);
    font-size: 13px; 
    font-weight: 500;
    color: white;
    cursor: pointer;
    transition: transform 0.2s, background 0.2s;
}
.video-capsule-btn:active { transform: scale(0.96); }

.video-capsule-btn.secondary {
    background: rgba(80, 80, 80, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.video-capsule-btn.danger {
    background: rgba(229, 57, 53, 0.9); /* 更红一点 */
    box-shadow: 0 2px 10px rgba(229, 57, 53, 0.4);
}

@keyframes slideUpFade {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
/* 输入框内通用功能按钮 (发送、拍照、设置) */
.input-icon-btn {
    background: transparent;
    border: none;
    padding: 4px; 
    width: 32px;  
    height: 32px; 
    cursor: pointer;
    /* 【修改】取消透明度，直接全白 */
    opacity: 1; 
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s;
    margin-left: 2px;
}

/* 【修改】移除 hover 变色，只保留点击微缩 */
.input-icon-btn:hover {
    filter: drop-shadow(0 0 2px rgba(255,255,255,0.5)); 
}
.input-icon-btn svg {
    width: 24px;
    height: 24px;
    stroke: white !important; /* 【核心】强制白色 */
}

/* 2. 拍照闪光灯特效 */
@keyframes camera-flash {
    0% { background-color: rgba(255, 255, 255, 0); }
    10% { background-color: rgba(255, 255, 255, 0.8); }
    100% { background-color: rgba(255, 255, 255, 0); }
}
.flash-effect {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 1000;
    pointer-events: none;
    animation: camera-flash 0.3s ease-out;
}

/* 3. 调整输入框内边距，容纳新按钮 */
.immersive-input-box {
    padding-left: 15px; /* 左边留出空间 */
}

/* 4. 加载中省略号气泡 */
.video-bubble.pending {
    color: rgba(255,255,255,0.6) !important;
    font-style: italic;
    font-size: 14px;
}
/* 1. 加载气泡左对齐 (AI侧) */
.video-msg-row.ai .video-bubble.pending {
    text-align: left;
    color: rgba(255,255,255,0.6) !important;
    background: transparent !important;
    font-style: italic;
    font-size: 14px;
}

/* 2. 闪光灯特效 (局限于小窗口) */
.video-local-container {
    position: absolute; /* 确保是定位父级 */
}
.flash-effect {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 100;
    pointer-events: none;
    background-color: white;
    animation: flash-fade 0.3s ease-out forwards;
}
@keyframes flash-fade {
    0% { opacity: 0; }
    10% { opacity: 0.8; }
    100% { opacity: 0; }
}

/* 3. 输入框分割线 */
.input-divider {
    width: 1px;
    height: 20px;
    background-color: rgba(255,255,255,0.2);
    margin: 0 5px;
}

/* 4. 输入框内按钮间距微调 */
.input-icon-btn {
    padding: 0 5px;
}
#video-chat-input {
    padding-left: 10px; /* 文字离左边按钮远点 */
}

/* 5. 暗黑设置弹窗专属样式 */
.blink-setting-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 10px;
}
.blink-setting-item .setting-label {
    text-align: left;
    display: flex;
    flex-direction: column;
}
.blink-setting-item .setting-label span {
    font-size: 14px;
    color: white;
    font-weight: bold;
}
.blink-setting-item .setting-label small {
    font-size: 11px;
    color: #aaa;
}
.vc-dark-input {
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.2);
    color: white;
    border-radius: 6px;
    padding: 5px;
    width: 60px;
    text-align: center;
}
/* 输入框内通用功能按钮 (发送、拍照、设置) */
.input-action-btn {
    background: transparent;
    border: none;
    padding: 4px; /* 统一内边距 */
    width: 32px;  /* 统一宽度 */
    height: 32px; /* 统一高度 */
    cursor: pointer;
    opacity: 0.7; /* 默认稍微暗一点 */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s, transform 0.1s;
    margin-left: 2px; /* 按钮之间的微小间距 */
}

/* 悬停变亮 */
.input-action-btn:hover {
    opacity: 1; 
    filter: drop-shadow(0 0 2px rgba(255,255,255,0.5)); /* 发光效果 */
}

/* 点击微缩 */
.input-action-btn:active {
    transform: scale(0.9);
}

.input-action-btn svg {
    width: 24px;
    height: 24px;
    stroke: white; /* 强制白色 */
}

/* 移除旧的 ID 样式干扰 */
#video-send-btn {
    background: transparent !important; /* 覆盖旧样式 */
    padding: 4px !important;
}
/* 视频通话结束气泡 (复用语音气泡布局，换图标) */
.message-video-call-record {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    color: #333;
}
.user-row .message-video-call-record {
    color: white; /* 用户侧白色文字 */
}
.vc-record-icon svg {
    width: 16px;
    height: 16px;
    /* 删除 fill: #8e8e93; 让它继承 HTML 里的 currentColor */
    /* fill: #8e8e93; <-- 删掉这行 */
    transform: translateY(1px);
}
/* 用户侧气泡强制白色 */
.user-row .message-voice-call-record .vc-record-icon svg {
    fill: white; 
}

/* 针对你提供的填充型图标微调 */
.message-video-call-record .vc-record-icon svg path {
    fill: currentColor;
    stroke: none;
}
.message-video-call-record .vc-record-icon svg circle {
    fill: var(--background-white); /* 圆点反色 */
    stroke: none;
}
/* ================================================================
   V-VIDEO-TRANSCRIPT: 视频通话详情页专属样式 (沉浸版)
   ================================================================ */

/* 1. 全屏容器 (深色) */
#video-transcript-view {
    background-color: #000;
    position: relative;
    height: 100%;
}

/* 2. 背景层 (AI照片 + 蒙版) */
#video-transcript-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 1;
}
#video-transcript-bg img {
    width: 100%; height: 100%; object-fit: cover;
    filter: blur(20px); /* 详情页模糊一点，突出文字 */
    transform: scale(1.1); /* 放大一点防止模糊白边 */
}
#video-transcript-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.7); /* 深色蒙版 */
    z-index: 2;
}

/* 3. 头部导航 (透明) */
#video-transcript-view .header {
    position: absolute;
    top: 0; left: 0; width: 100%;
    z-index: 10;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding-top: env(safe-area-inset-top);
}
#video-transcript-view .header span {
    color: rgba(255,255,255,0.9);
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
#video-transcript-view .back-button {
    color: white !important;
    background: rgba(0,0,0,0.2);
    border-radius: 50%;
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
}

/* 4. 内容容器 */
#video-transcript-container {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 5;
    overflow-y: auto;
    padding: 80px 20px 40px 20px; /* 避开头部 */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 10px; /* 紧凑间距 */
    scrollbar-width: none;
}
#video-transcript-container::-webkit-scrollbar { display: none; }

/* 5. 环境描写 (纯文字，居中或靠左) */
.transcript-env {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    margin-bottom: 10px;
    font-style: italic;
    text-align: center;
    line-height: 1.4;
}

/* 6. 消息行 (无气泡) */
.transcript-row {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 5px; /* 紧凑 */
}

/* 动作描写 */
.transcript-action {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    font-style: italic;
    margin-bottom: 4px;
}

/* 对话内容 */
.transcript-text {
    font-size: 14px; /* 稍微小一点 */
    line-height: 1.4;
    word-wrap: break-word;
    max-width: 95%;
}

/* AI 样式 */
.transcript-row.ai { align-items: flex-start; text-align: left; }
.transcript-row.ai .transcript-text { color: #fff; }

/* User 样式 */
.transcript-row.user { align-items: flex-end; text-align: right; }
.transcript-row.user .transcript-text { color: #aaddff; }
/* 按钮容器 */
.vc-control-btn {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.2); /* 默认半透明白 */
    transition: transform 0.2s;
}
.vc-control-btn:active { transform: scale(0.9); }

/* 挂断 (红) */
.vc-control-btn.hangup {
    background-color: #ff3b30;
}

/* 接听 (绿) */
.vc-control-btn.answer {
    background-color: #4cd964;
}

/* 图标 */
.vc-control-btn svg {
    width: 32px;
    height: 32px;
    fill: white; /* 强制填充白色 */
    stroke: none; /* 无描边 */
}
/* ================================================================
   V-INCOMING-CALL-FIX: 来电界面布局微调
   ================================================================ */

/* 1. 确保弹窗容器强制垂直居中 */
#incoming-call-modal:not(.hidden) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 2. 内容容器：占满高度，利用 Flex 居中内容 */
.incoming-call-content {
    width: 100%;
    height: 100%; /* 占满全屏 */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important; /* 【核心】让内部所有元素在屏幕正中间抱团 */
    
    /* 【视觉补偿】因为人眼对“居中”的感知偏上，我们加一点底部内边距，
       把整体内容稍微往上顶一点点，看起来更平衡 */
    padding-bottom: 60px !important; 
}

/* 3. 头像与名字的间距 */
.incoming-call-content .avatar-large {
    margin-bottom: 20px !important; /* 保持适中 */
    box-shadow: 0 5px 30px rgba(0,0,0,0.5) !important; /* 加深阴影，增加立体感 */
}

/* 4. 状态文字与按钮的间距 (收紧) */
.incoming-call-content .caller-status {
    margin: 0 0 60px 0 !important; /* 【核心修改】从 80px 减小到 60px，拉近距离 */
    opacity: 0.8;
}

/* 5. 按钮尺寸调整 (缩小) */
.vc-control-btn.incoming {
    width: 64px !important;  /* 【核心修改】从 80px 缩小到 64px */
    height: 64px !important;
    animation: pulse-call-btn 2s infinite;
}

/* 6. 图标尺寸调整 */
.vc-control-btn.incoming svg {
    width: 32px !important; /* 配合按钮缩小 */
    height: 32px !important;
}

/* 7. 呼吸动画微调 (适配新尺寸) */
@keyframes pulse-call-btn {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4); }
    70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); } /* 阴影范围减小 */
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

/* 8. 按钮下方文字 */
.action-item span {
    margin-top: 12px !important;
    font-size: 14px !important;
    opacity: 0.9;
}
/* --- 隐私声明弹窗样式 (宽屏修复版) --- */
.privacy-body {
    /* 【核心修复】将左右内边距从 30px 减少到 15px */
    /* 这样在手机上文字就能铺得更满了 */
    padding: 20px 15px !important; 
    line-height: 1.6;
    color: #333;
}

/* 标题样式 */
.privacy-text h3 {
    font-size: 20px;
    margin-bottom: 20px;
    color: var(--global-theme-color);
    text-align: center;
}

.privacy-text h4, .code-disclosure h4 {
    font-size: 16px;
    margin-top: 25px;
    margin-bottom: 10px;
    color: #333;
    border-left: 4px solid var(--global-theme-color);
    padding-left: 10px;
}

/* 列表样式 (优化空间) */
.privacy-text ul, .privacy-text ol {
    /* 【核心修复】减小列表的左侧缩进，进一步节省空间 */
    padding-left: 18px; 
    margin-bottom: 15px;
}
.privacy-text li {
    margin-bottom: 8px;
    font-size: 14px;
}
.privacy-text p {
    font-size: 14px;
    margin-bottom: 10px;
}
.privacy-text strong {
    color: #000;
    font-weight: 600;
}

/* 代码块样式 (模拟编辑器) */
.proxy-code {
    background-color: #1e1e1e; /* 深色背景 */
    color: #d4d4d4;            /* 浅色代码 */
    padding: 15px;
    border-radius: 8px;
    overflow-x: auto;          /* 允许横向滚动 */
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 12px;
    line-height: 1.5;
    border: 1px solid #333;
}
.proxy-code code {
    white-space: pre; /* 保持代码格式 */
}

/* ============================================================
   V-HEADER-RESTORE: 版头功能恢复补丁 (终极兼容版)
   ============================================================ */
.header, .main-header {
    /* 1. 恢复模糊遥控，并强制加上 Webkit 前缀 */
    backdrop-filter: blur(var(--header-blur, 10px)) !important;
    -webkit-backdrop-filter: blur(var(--header-blur, 10px)) !important;

    /* 2. 恢复颜色遥控 */
    color: var(--header-text-color, #ffffff) !important;

    /* 3. 核心修复：绝对禁止使用 transparent！
       使用 rgba 且 alpha 为 0.01 即可实现透明视觉+毛玻璃效果 */
    background-color: rgba(255, 255, 255, 0.01); 

    /* 4. 去除边框干扰 */
    border: none !important;
    box-shadow: none !important;
    z-index: 100 !important;
}
/* 概率设置弹窗专属样式 */
.prob-slider-row {
    margin-bottom: 12px;
}
.prob-slider-row label {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    margin-bottom: 5px;
    color: #555;
}
.prob-slider-row label span {
    font-weight: bold;
    color: #333;
}
.prob-slider-row input[type=range] {
    width: 100%;
    height: 4px;
    background: #e0e0e0;
    border-radius: 2px;
    -webkit-appearance: none;
}
.prob-slider-row input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    background: var(--global-theme-color);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
/* --- 概率设置弹窗专属极简样式 (V2.0) --- */

/* 头部排版：标题和数值左右对齐 */
.prob-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 10px;
}
.prob-header h4 {
    margin: 0;
    font-size: 16px;
    color: #333;
    font-weight: 600;
}
.highlight-val {
    color: var(--global-theme-color);
    font-weight: bold;
    font-size: 16px;
}

/* 描述文字：灰色小字 */
.prob-desc {
    font-size: 13px;
    color: #888;
    margin: 5px 0 0 0;
    line-height: 1.4;
}

/* 分割线：淡淡的 */
.prob-divider {
    border: none;
    border-top: 1px solid #eee;
    margin: 20px 0;
}

/* 每一行：左边标签，右边滑块+数值 */
.prob-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px; /* 行间距 */
}
.prob-row label {
    font-size: 14px;
    color: #555;
    width: 80px; /* 固定标签宽度，保证右边对齐 */
    flex-shrink: 0;
}

/* 滑块容器：占据剩余空间 */
.prob-control {
    flex-grow: 1;
    display: flex;
    align-items: center;
    gap: 10px;
}
.prob-control span {
    width: 25px; /* 固定数值宽度，防止数字变动时滑块抖动 */
    text-align: right;
    font-size: 13px;
    color: #333;
    font-weight: 500;
}

/* 滑块本体美化 */
input[type=range].prob-range,
input[type=range].luck-slider,
input[type=range].schedule-luck-slider {
    width: 100%; /* 撑满容器 */
    height: 4px;
    background: #e0e0e0;
    border-radius: 2px;
    -webkit-appearance: none;
    margin: 0;
}
/* 滑块圆钮 */
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    background: #fff;
    border: 2px solid var(--global-theme-color);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    margin-top: -7px; /* 垂直居中 */
}
/* 滑块轨道 (Chrome) */
input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    cursor: pointer;
    background: #e0e0e0;
    border-radius: 2px;
}
/* --- 去八股管理弹窗专属样式 --- */

/* 1. 折叠面板 (角色选择) */
.accordion-header {
    background-color: var(--bg-color-2, #f5f7fa);
    padding: 12px 15px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    color: var(--text-color, #333);
    transition: background-color 0.2s;
    user-select: none;
    border: 1px solid var(--border-color, #e0e0e0);
}
.accordion-header:hover {
    background-color: var(--hover-color, #eef2f6);
}
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    padding: 0 5px;
}
.accordion-content.open {
    max-height: 500px; /* 足够展示所有角色 */
    padding: 15px 5px;
    overflow-y: auto;
}
/* 角色复选框美化 */
.role-checkbox-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    margin: 4px;
    background: var(--bg-color, #fff);
    border: 1px solid var(--border-color, #ddd);
    border-radius: 20px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s;
}
.role-checkbox-wrapper:hover {
    border-color: var(--global-theme-color, #5097CD);
}
.role-checkbox-wrapper.checked {
    background-color: rgba(80, 151, 205, 0.1); /* 主题色淡背景 */
    border-color: var(--global-theme-color, #5097CD);
    color: var(--global-theme-color, #5097CD);
    font-weight: 500;
}
.role-checkbox-wrapper input {
    display: none; /* 隐藏原生 checkbox */
}

.baggu-table-container {
    width: 100%;
    /* 【核心修复】限制最大高度，超出部分显示滚动条 */
    max-height: 60vh; 
    overflow-y: auto; 
    overflow-x: auto;
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
    background: var(--bg-color, #fff);
    margin-bottom: 20px;
    -webkit-overflow-scrolling: touch;
}
.baggu-table {
    width: 100%; 
    /* 【核心修改1】使用固定布局算法，让列宽严格按照百分比分配，不被文字撑开 */
    table-layout: fixed; 
    border-collapse: collapse;
}


.baggu-table th, .baggu-table td {
    padding: 10px 4px; /* 减小左右内边距，为了省空间 */
    text-align: left;
    border-bottom: 1px solid var(--border-color, #eee);
    vertical-align: top; /* 文字多了之后，顶端对齐比较好看 */
    
    /* 【核心修改2】允许自动换行，且强制打断长单词 */
    white-space: normal !important; 
    word-wrap: break-word !important;
    word-break: break-all !important;
    
    font-size: 12px; /* 手机上字体稍微小一点，能显示更多内容 */
    line-height: 1.4;
}

.baggu-table th {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: var(--bg-color-2, #f8f9fa); /* 必须有背景色，不然会透明 */
    background-color: var(--bg-color-2, #f8f9fa);
    font-weight: 600;
    color: #555;
    white-space: nowrap !important; /* 表头保持不换行，整洁一点 */
    font-weight: 600;
    color: #555;
    white-space: nowrap !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1); /* 加个阴影更好看 */
}

/* 特殊列处理：让八股词和替换词可以稍微长一点 */
.baggu-table td:nth-child(2), /* 八股词列 */
.baggu-table td:nth-child(3) { /* 替换词列 */
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis; /* 太长显示省略号 */
}
/* 列宽定义 */
.col-keyword { width: 20%; }
.col-phrase { width: 30%; }
.col-replace { width: 25%; }
.col-reason { width: 15%; }
.col-actions { width: 10%; text-align: center !important; }

.baggu-table tr:last-child td { border-bottom: none; }
.baggu-table tr:hover { background-color: var(--hover-color, #f5f7fa); }

/* 表格内按钮 */
.table-action-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    border-radius: 4px;
    color: #666;
    transition: all 0.2s;
}
.table-action-btn:hover {
    background-color: rgba(0,0,0,0.05);
    color: var(--global-theme-color, #5097CD);
}

.table-action-btn.delete:hover {
    color: #ff5252;
    background-color: #ffebee;
}
.search-bar-wrapper {
    position: relative;
    width: 100%;
}
.search-bar-input {
    width: 100%;
    height: 40px;
    padding-left: 40px !important; /* 强制留出图标位置 */
    border: 1px solid var(--border-color, #ddd);
    border-radius: 8px;
    font-size: 14px;
    background: var(--bg-color, #fff);
    color: var(--text-color, #333);
}
.search-bar-input:focus {
    border-color: var(--global-theme-color, #5097CD);
}
.search-icon-svg {
    position: absolute;
    left: 12px; /* 调整图标位置 */
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    pointer-events: none;
    z-index: 10; /* 确保在文字上面 */
}

/* 4. 弹窗内通用修复 */
.modal-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-color, #333);
}
.modal-close-btn {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #999;
    line-height: 1;
    padding: 0 5px;
}
.modal-close-btn:hover { color: #666; }

/* 按钮组美化 */
.modal-actions-bar {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    align-items: center;
}
.modal-button {
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    border: 1px solid transparent;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s;
}
.modal-button.secondary {
    background-color: #fff;
    border-color: var(--border-color, #ddd);
    color: #666;
}
.modal-button.secondary:hover {
    background-color: #f5f5f5;
    border-color: #ccc;
}
.modal-button.primary {
    background-color: var(--global-theme-color, #5097CD);
    color: #fff;
}
.modal-button.primary:hover {
    filter: brightness(0.9);
}
/* --- 去八股功能专属样式优化 --- */

/* 1. 顶部操作栏按钮美化 (解决太挤的问题) */
.baggu-action-bar {
    display: flex;
    gap: 10px; /* 按钮之间的间距 */
    margin-bottom: 20px;
    flex-wrap: wrap; /* 手机上自动换行 */
}

/* 导入导出按钮：变成次要按钮样式 */
.baggu-action-bar button {
    flex: 1; /* 让按钮平均分配空间 */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 10px 15px;
    border-radius: 8px;
    border: none;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

/* 具体的按钮样式 */
#baggu-import-btn, #baggu-export-btn {
    background-color: #fff;
    border: 1px solid #ddd;
    color: #666;
}
#baggu-import-btn:hover, #baggu-export-btn:hover {
    background-color: #f5f5f5;
    border-color: #ccc;
    transform: translateY(-1px);
}

/* 替换日志按钮 */
#baggu-history-btn {
    background-color: #fff;
    border: 1px solid #ddd;
    color: #666;
}
#baggu-history-btn:hover {
    background-color: #f5f5f5;
    color: #333;
    border-color: #ccc;
}

/* 新增规则按钮 (主要按钮) */
#baggu-add-btn {
    background-color: var(--global-theme-color, #5097CD);
    color: white;
    font-weight: 500;
    box-shadow: 0 2px 5px rgba(80, 151, 205, 0.3);
}
#baggu-add-btn:hover {
    filter: brightness(0.95);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(80, 151, 205, 0.4);
}

/* 2. 弹窗输入框间距优化 (解决太窄的问题) */
/* 注意：我在上面的 JS 代码里已经直接给 HTML 加了 style="margin-bottom: 15px;" */
/* 这里是为了双重保险 */
#baggu-edit-modal .input-group {
    margin-bottom: 15px !important;
}

/* 【核心修改3】重新分配列宽 (总和 100%) */
/* 关键词 (短) */
.baggu-table th:nth-child(1), .baggu-table td:nth-child(1) { width: 15%; }
/* 原句 (中) */
.baggu-table th:nth-child(2), .baggu-table td:nth-child(2) { width: 25%; }
/* 替换为 (中) */
.baggu-table th:nth-child(3), .baggu-table td:nth-child(3) { width: 20%; }
/* 原因 (长，给它最大空间换行) */
.baggu-table th:nth-child(4), .baggu-table td:nth-child(4) { width: 25%; }
/* 操作 (固定宽度) */
.baggu-table th:nth-child(5), .baggu-table td:nth-child(5) { 
    width: 15%; 
    min-width: 70px; /* 保证按钮放得下 */
    text-align: center !important;
    white-space: nowrap !important; /* 按钮不要换行 */
}

/* 按钮样式微调 */
.table-action-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px; /* 稍微减小点击区域防误触 */
    margin: 0 2px;
    border-radius: 4px;
    color: #666;
}
.table-action-btn svg {
    width: 16px;
    height: 16px;
}
/* ================= 外卖系统样式 ================= */

/* 1. 分类 Tab */
.food-tabs {
    display: flex;
    background: #fff;
    padding: 10px;
    gap: 10px;
    overflow-x: auto;
    border-bottom: 1px solid #eee;
}
.food-tab {
    padding: 6px 12px;
    border-radius: 15px;
    border: none;
    background: #f5f5f5;
    color: #666;
    font-size: 13px;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s;
}
.food-tab.active {
    background: #FF9800;
    color: white;
    font-weight: bold;
}

/* 2. 菜品列表 */
.food-list-container {
    flex-grow: 1;
    overflow-y: auto;
    padding: 10px;
    display: grid;
    grid-template-columns: 1fr; /* 单列列表 */
    gap: 10px;
    padding-bottom: 80px; /* 留出底部购物车空间 */
}

.food-item-card {
    background: #fff;
    border-radius: 12px;
    padding: 10px;
    display: flex;
    gap: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}
.food-img {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    object-fit: cover;
    background: #eee;
}
.food-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.food-name { font-weight: bold; font-size: 15px; color: #333; }
.food-tags { display: flex; gap: 5px; margin-top: 4px; flex-wrap: wrap;}
.food-tag { 
    font-size: 10px; padding: 2px 4px; border-radius: 4px; 
    background: #f0f0f0; color: #888; 
}
.food-tag.spicy { background: #ffebee; color: #d32f2f; }
.food-price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 5px;
}
.food-price { color: #f44336; font-weight: bold; font-size: 16px; }
.food-add-btn {
    width: 24px; height: 24px;
    background: #FF9800; color: white;
    border-radius: 50%; border: none;
    display: flex; align-items: center; justify-content: center;
    font-weight: bold; cursor: pointer;
}

/* 3. 底部购物车 */
.food-cart-bar {
    position: absolute;
    bottom: 0; left: 0; width: 100%;
    height: 60px;
    background: #fff;
    border-top: 1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
    z-index: 10;
}
#cart-total-price { font-size: 20px; font-weight: bold; color: #333; }
.cart-btn {
    background: #FF9800; color: white;
    border: none; padding: 10px 25px;
    border-radius: 20px; font-weight: bold;
    cursor: pointer;
}

/* 4. 拆箱动画相关 */
.unboxing-content {
    width: 100%; height: 100%;
    display: flex;
    align-items: center; justify-content: center;
    perspective: 1000px;
}
.unboxing-bag {
    text-align: center;
    animation: float 3s ease-in-out infinite;
    cursor: pointer;
    /* 核心修复：放大袋子Emoji */
    font-size: 80px; 
    line-height: 1.2;
}
.unboxing-bag .bag-icon {
    font-size: 100px; /* 单独控制图标大小 */
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.3)); /* 增加立体感 */
}
/* 拆外卖提示文字 */
.click-hint {
    color: #fff;
    margin-top: 15px;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 2px;
    /* 去除可能存在的边框 */
    border: none !important;
    outline: none !important;
    
    /* 发光特效 */
    text-shadow: 0 0 10px rgba(255, 192, 203, 0.8), 0 0 20px rgba(255, 192, 203, 0.6);
    animation: glow-pulse 2s infinite alternate;
}

/* 拆开时的抖动动画 */
.unboxing-bag.shake {
    animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}

/* 结果卡片 */
.unboxing-result {
    background: #fff;
    width: 85%; max-width: 320px;
    border-radius: 20px;
    overflow: hidden;
    animation: popIn 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    position: relative;
    padding-bottom: 20px;
    display: flex; flex-direction: column; align-items: center;
}
.food-result-img {
    width: 100%; height: 200px; object-fit: cover;
}
.quality-badge {
    position: absolute; top: 15px; right: 15px;
    background: rgba(0,0,0,0.7); color: #FFD700;
    padding: 5px 10px; border-radius: 4px;
    font-weight: bold; font-size: 14px;
    border: 1px solid #FFD700;
}
.food-card-body { padding: 20px; text-align: center; width: 100%; box-sizing: border-box; }
.food-real-desc { 
    font-size: 14px; color: #666; margin-top: 10px; 
    text-align: left; line-height: 1.6; background: #f9f9f9; padding: 10px; border-radius: 8px;
}

/* AI便利贴 */
.ai-note {
    margin-top: 15px;
    background: #fff9c4; /* 浅黄色便利贴 */
    padding: 15px;
    border-radius: 2px 2px 10px 2px;
    position: relative;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
    transform: rotate(-2deg);
}
.note-pin {
    position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
    font-size: 20px;
}
#food-ai-thought {
    font-family: 'Courier New', cursive;
    font-size: 13px; color: #555; text-align: left;
}

@keyframes shake {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
  40%, 60% { transform: translate3d(4px, 0, 0); }
}
/* 外卖新样式 */
.food-sub-tabs {
    display: flex;
    gap: 8px;
    padding: 10px;
    background: #fff;
    overflow-x: auto;
    border-bottom: 1px solid #f0f0f0;
}
.food-sub-tab {
    font-size: 12px;
    padding: 4px 10px;
    border: 1px solid #eee;
    border-radius: 12px;
    background: #fff;
    color: #666;
    white-space: nowrap;
    cursor: pointer;
}
.food-sub-tab.active {
    color: #FF9800;
    border-color: #FF9800;
    background: #fff3e0;
}

.food-filter-container {
    background: #f9f9f9;
    padding: 10px;
    border-radius: 8px;
    margin-top: 5px;
    border: 1px solid #eee;
}
.filter-section { margin-bottom: 10px; }
.filter-label { font-size: 12px; font-weight: bold; color: #333; display: block; margin-bottom: 5px; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 5px; }

/* 标签样式 (用于筛选和添加) */
.chip {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 4px;
    background: #fff;
    border: 1px solid #ddd;
    color: #666;
    cursor: pointer;
    user-select: none;
}
.chip.selected {
    background: #FF9800;
    color: white;
    border-color: #FF9800;
}

/* 历史订单卡片 */
.order-history-card {
    background: #fff;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 10px;
    border: 1px solid #eee;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.order-history-header {
    display: flex; justify-content: space-between; font-size: 12px; color: #999; margin-bottom: 5px;
}
.order-history-content {
    display: flex; gap: 10px; margin-bottom: 8px;
}
.order-history-img { width: 50px; height: 50px; border-radius: 4px; object-fit: cover; }
.order-history-details h4 { margin: 0; font-size: 14px; color: #333; }
.order-history-details p { margin: 2px 0 0 0; font-size: 12px; color: #666; }
.order-history-footer {
    border-top: 1px dashed #eee; padding-top: 8px; font-size: 12px; color: #555;
}
.ai-thought-box {
    background: #fff9c4; padding: 5px 8px; border-radius: 4px; margin-top: 5px; font-style: italic; color: #666;
}
/* Emoji 占位符样式 */
.emoji-placeholder {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    background-color: #f0f0f0; /* 浅灰背景 */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px; /* 大 Emoji */
    flex-shrink: 0;
    transition: all 0.3s;
}

/* 当真的图片加载出来后，img 标签会自动替换掉这个 div，或者 img 标签会移除这个 class */
/* ================= 外卖 V3.0 橙色主题 UI ================= */

/* 1. 橙色顶部区域 (V4.0 下移版) */
.food-top-bar {
    position: relative;
    left: 0;
    width: 100%;
    z-index: 10;
    background: linear-gradient(to right, #FF8000, #FF9800);
    
    /* 【核心修改】padding-top 从 10px 增加到 40px，把所有内容往下顶 */
    padding: 40px 15px 50px 15px; 
    
    display: flex;
    justify-content: space-between;
    align-items: center; 
    color: white;
    flex-shrink: 0;
}

/* 左侧容器：包含返回键、标题、地址 */
.food-header-left-group {
    display: flex;
    align-items: center;
    overflow: hidden; /* 防止地址过长溢出 */
    flex: 1; /* 占据左侧空间 */
}

/* 页面标题 "外卖" */
.food-page-title {
    font-size: 18px; /* 字体比地址大 */
    font-weight: bold;
    margin-right: 8px;
    flex-shrink: 0;
    letter-spacing: 1px;
}

/* 地址区域 */
.food-address-container {
    display: flex;
    align-items: center;
    max-width: 100%;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.1); /* 稍微加点底色增加层次 */
    padding: 2px 8px;
    border-radius: 15px;
}

.address-icon { 
    display: flex; 
    align-items: center; 
    margin-right: 2px; 
}
.address-text {
    font-size: 14px; /* 字体比标题小 */
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px; /* 限制地址最大宽度 */
}
.address-arrow { 
    display: flex; 
    align-items: center; 
    margin-left: 2px;
    opacity: 0.8; 
}

/* 右侧图标按钮组 */
.food-top-actions {
    display: flex;
    gap: 15px;
    align-items: center;
    flex-shrink: 0;
}
.food-icon-btn {
    background: none;
    border: none;
    color: white;
    padding: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.food-icon-btn:active {
    opacity: 0.7;
    transform: scale(0.95);
}

/* 2. 搜索框 (悬浮嵌入 + 吸顶) */
.food-search-wrapper {
    /* 吸附在屏幕最顶端 */
    position: sticky; 
    top: 0px; 
    z-index: 100; 
    
    /* 这里的 margin-top 保持负数，是为了产生嵌入橙色背景的效果 */
    margin-top: -35px; 
    
    padding: 10px 15px; 
    background: #f7f7f7; /* 必须有背景色遮挡 */
    pointer-events: none; 
}
.food-search-box {
    background: white;
    border-radius: 25px;
    height: 44px;
    display: flex;
    align-items: center;
    padding: 0 5px 0 15px;
    box-shadow: 0 4px 15px rgba(255, 128, 0, 0.2);
    
    /* 【核心修复】必须显式开启交互，否则会继承父级的 none */
    pointer-events: auto; 
}
.food-search-input {
    border: none;
    outline: none;
    flex-grow: 1;
    font-size: 14px;
    color: #333;
    background: transparent;
    margin: 0 10px;
}
.search-divider {
    width: 1px;
    height: 20px;
    background: #eee;
}
.filter-trigger-btn {
    background: none;
    border: none;
    color: #666;
    font-size: 13px;
    padding: 0 10px;
    cursor: pointer;
    white-space: nowrap;
    
    /* Flex 布局让文字和图标对齐 */
    display: flex;
    align-items: center;
}
.search-confirm-btn {
    background: #FFD161; 
    color: #333;
    border: none;
    border-radius: 20px;
    padding: 6px 15px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    
    /* 【核心修复】强制文字不换行 */
    white-space: nowrap; 
    flex-shrink: 0; /* 防止被压缩 */
    
    /* 确保文字居中 */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 筛选面板 */
.food-filter-panel {
    background: white;
    margin-top: 10px;
    padding: 15px;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    
    /* 【核心修复】这就解决了标签点不动的问题！ */
    /* 告诉浏览器：这个面板是可以点击的，不要穿透下去 */
    pointer-events: auto; 
}

/* 3. 金刚区 (分类网格) */
.food-kingkong-grid {
    position: relative; /* 改回默认 */
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px 5px;
    padding: 20px 15px;
    background: white;
    margin: 10px 15px;
    border-radius: 12px;
}
.kingkong-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}
.kingkong-icon {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 5px;
    background: #f5f5f5; /* 默认底色，JS会改 */
}
.kingkong-text {
    font-size: 11px;
    color: #333;
    font-weight: 500;
}
.kingkong-item.active .kingkong-text {
    color: #FF8000;
    font-weight: bold;
}
.kingkong-item.active .kingkong-icon {
    border: 2px solid #FF8000; /* 选中状态加个圈 */
}

/* 4. 小分类 Tabs (吸顶 + 左滑 + 下拉面板) */
.food-sub-tabs-container {
    position: sticky; 
    
    /* 【核心计算】top = 搜索框的高度 (约 64px) */
    /* 当搜索框吸顶后，这个分类栏会紧贴在搜索框下面 */
    top: 64px; 
    
    z-index: 90; 
    background: #f7f7f7; 
    width: 100%;
    display: flex;
    align-items: center;
    padding: 5px 0;
    overflow: visible; 
}

/* 横向滚动列表 */
.food-sub-tabs {
    flex: 1;
    width: 0;
    display: flex;
    gap: 8px;
    overflow-x: auto !important; 
    overflow-y: hidden;
    white-space: nowrap;
    padding-left: 15px; 
    padding-right: 5px; 
    scrollbar-width: none; 
    -ms-overflow-style: none;
}
.food-sub-tabs::-webkit-scrollbar { display: none; }

/* 右侧展开按钮 (柔和阴影版) */
.food-tabs-expand-btn {
    flex-shrink: 0;
    width: 40px; /* 稍微加宽 */
    height: 100%;
    min-height: 28px;
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* 【核心修改】背景设为纯实色，但配合左侧阴影实现“渐隐”效果 */
    background: #f7f7f7;
    color: #666;
    cursor: pointer;
    
    /* 去掉之前的 border-left */
    border-left: none;
    
    /* 【核心修改】使用长阴影遮挡左侧文字，消除“方块感” */
    box-shadow: -15px 0 15px -5px #f7f7f7; 
    
    margin-left: 0; 
    z-index: 5;
}

/* 展开时的箭头旋转 */
.food-tabs-expand-btn.open svg {
    transform: rotate(180deg);
}
/* ▼▼▼ 【核心新增】下拉面板样式 ▼▼▼ */
.food-sub-tabs-dropdown {
    position: absolute;
    top: 100%; /* 在容器正下方 */
    left: 0;
    width: 100%;
    background: #fff;
    padding: 15px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    z-index: 29; /* 比顶栏稍微低一点，但比列表高 */
    
    /* 默认隐藏 */
    display: none; 
    
    /* 网格布局：一行4个 */
    grid-template-columns: repeat(4, 1fr); 
    gap: 10px;
    box-sizing: border-box;
    border-top: 1px solid #eee;
}

/* 面板显示时的状态 */
.food-sub-tabs-dropdown.show {
    display: grid;
}

/* 面板里的标签样式 */
.food-dropdown-item {
    background: #f5f5f5;
    color: #666;
    padding: 8px 0;
    border-radius: 8px;
    text-align: center;
    font-size: 13px;
    cursor: pointer;
    border: 1px solid transparent;
}
/* 选中状态 */
.food-dropdown-item.active {
    background: #FFF0E0;
    color: #FF8000;
    border-color: #FF8000;
    font-weight: bold;
}
/* 管理按钮特殊样式 */
.food-dropdown-item.manage {
    color: #5097CD;
    background: #e3f2fd;
}
/* ▲▲▲▲▲ */
.food-sub-tabs::-webkit-scrollbar {
    display: none; 
}

/* 确保每个 tab 不会被压缩 */
.food-sub-tab {
    flex-shrink: 0 !important; 
}
.food-sub-tab.active {
    background: #FFF0E0; /* 浅橙色背景 */
    color: #FF8000;
    border-color: #FF8000;
    font-weight: bold;
}

/* 5. 列表容器 */
.food-list-container {
    /* 【核心修复】强制不限制高度，让内容撑开父容器 */
    flex-grow: 0 !important; 
    height: auto !important;
    overflow: visible !important; /* 禁止内部产生滚动条 */
    
    padding: 10px 15px 80px 15px; 
}
.food-item-card {
    margin-bottom: 10px;
    box-shadow: none;
    border: 1px solid #fff; /* 默认白边 */
}
.food-add-btn {
    background: #FFD161; /* 按钮改为黄色系 */
    color: #333;
    border-radius: 8px; /* 方圆角 */
    width: auto;
    height: auto;
    padding: 4px 12px;
    font-size: 12px;
}

/* 6. 悬浮回顶按钮 (橙色版) */
.fab-draggable {
    position: fixed; 
    bottom: 120px;   
    right: 20px;
    width: 48px;
    height: 48px;
    
    /* 【核心修改】背景改为橙色，文字改为白色 */
    background: #FF9800; 
    color: white;
    
    backdrop-filter: blur(5px);
    /* 移除边框，因为有颜色了 */
    border: none; 
    border-radius: 50%;
    
    display: flex;
    align-items: center;     
    justify-content: center; 
    
    cursor: grab;
    z-index: 99999 !important; 
    box-shadow: 0 4px 15px rgba(255, 152, 0, 0.4); /* 阴影也带点橙色 */
    transition: transform 0.2s;
}
/* 图标大小 */
.fab-draggable svg {
    width: 28px;
    height: 28px;
}
.fab-draggable:hover {
    transform: scale(1.1);
}
.fab-draggable:active {
    cursor: grabbing;
}
/* 外卖主视图容器 (全局滚动核心) */
#food-delivery-view {
    position: relative;
    background-color: #f7f7f7;
    
    /* 【核心修复】取消 Flex 布局的限制，让它回归普通文档流 */
    display: block; 
    
    /* 让这个容器负责整个页面的滚动 */
    height: 100%;
    overflow-y: auto !important; 
    overflow-x: hidden;
    
    /* 增加平滑滚动效果 */
    scroll-behavior: smooth;
}
/* 【核心修复】强制外卖个人中心页面的样式 */
#food-profile-view {
    position: relative;
    z-index: 200; /* 层级高一点，防止被其他层遮挡 */
    background-color: #f5f5f5 !important; /* 强制背景色，防止透明 */
    display: flex; /* 确保是 Flex 布局 */
    flex-direction: column;
    height: 100%;
    overflow: hidden; /* 防止双重滚动 */
}

/* 确保里面的滚动容器有高度 */
#food-profile-view .contact-settings-container {
    flex-grow: 1;
    overflow-y: auto;
    height: auto;
    display: block; /* 防止被其他 Flex 属性影响 */
    background: transparent; /* 背景由父级控制 */
}
/* 【核弹修复】强制外卖个人中心可见 */
#food-profile-view {
    /* 1. 强制背景色 (覆盖默认的透明) */
    background-color: #f5f5f5 !important;
    background-image: none !important;
    
    /* 2. 强制布局 (防止被 hidden 压制，配合 JS 切换) */
    display: flex; 
    flex-direction: column;
    
    /* 3. 强制尺寸和层级 */
    width: 100% !important;
    height: 100% !important;
    position: absolute; /* 覆盖在原位置 */
    top: 0;
    left: 0;
    z-index: 200; /* 比普通页面高 */
    
    /* 4. 允许滚动 */
    overflow: hidden; 
}

/* 隐藏状态 (必须比上面的 display 优先级高，或者由 JS 控制移除这个类) */
#food-profile-view.hidden {
    display: none !important;
}

/* 内容区域 */
#food-profile-view .contact-settings-container {
    background: transparent !important;
    padding: 15px !important;
    flex-grow: 1;
    overflow-y: auto;
}
/* --- 外卖个人中心新UI --- */

.food-profile-header-new {
    background: #fff;
    padding: 30px 20px 20px 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    /* 简单的白色背景，不需要阴影，保持干净 */
}

.food-profile-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.food-profile-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.food-profile-name {
    font-size: 18px;
    font-weight: bold;
    color: #333;
}

.food-profile-balance-badge {
    display: inline-block;
    background: #f0f0f0;
    color: #999;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 10px;
    align-self: flex-start; /* 靠左对齐 */
}

.food-menu-title {
    font-size: 13px;
    color: #666;
    margin: 10px 15px 5px 15px;
}

.food-menu-card {
    background: #fff;
    margin: 0 15px 15px 15px;
    border-radius: 12px;
    display: flex;
    padding: 15px 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.02);
}

.food-menu-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    position: relative;
}
.food-menu-item:active {
    opacity: 0.7;
}

.food-menu-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.food-menu-icon svg {
    width: 100%;
    height: 100%;
}

.food-menu-text {
    font-size: 12px;
    color: #333;
    font-weight: 500;
}

/* 订单卡片样式优化 */
.food-order-card {
    background: #fff;
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 10px;
    position: relative;
}
.food-order-header {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #999;
    margin-bottom: 8px;
    border-bottom: 1px solid #f9f9f9;
    padding-bottom: 5px;
}
.food-order-content {
    display: flex;
    gap: 10px;
}
.food-order-img {
    width: 60px;
    height: 60px;
    border-radius: 6px;
    object-fit: cover;
    background: #eee;
}
.food-order-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.food-order-name { font-weight: bold; font-size: 15px; color: #333; }
.food-order-desc { font-size: 12px; color: #666; margin-top: 4px; }
.food-order-extra { 
    background: #fff8e1; color: #f57f17; 
    font-size: 11px; padding: 4px; margin-top: 5px; 
    border-radius: 4px;
}
.food-fav-btn {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: none;
    border: none;
    cursor: pointer;
    color: #ccc; /* 未收藏颜色 */
}
.food-fav-btn.active {
    color: #FFC107; /* 已收藏颜色 */
}
/* --- 外卖地址弹窗样式 --- */
.address-item-card {
    background: #f9f9f9;
    border: 1px solid #eee;
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.address-item-card:hover {
    background: #e3f2fd;
    border-color: #2196F3;
}
.address-item-card.active {
    background: #e3f2fd;
    border-color: #2196F3;
    box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2);
}
.addr-info { font-size: 13px; color: #333; }
.addr-tag { 
    font-size: 10px; padding: 2px 6px; border-radius: 4px; 
    background: #eee; color: #666; margin-right: 5px; 
}

/* --- 骑手通知条样式 (模拟iOS/Android顶部推送) --- */
.rider-notification {
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 360px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    padding: 12px 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 100000; /* 最高层级 */
    animation: slideDown 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
}
.rider-notification.hidden {
    display: none;
}
@keyframes slideDown {
    from { transform: translate(-50%, -100%); opacity: 0; }
    to { transform: translate(-50%, 0); opacity: 1; }
}
.rider-icon {
    width: 40px; height: 40px;
    background: #FF9800;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px;
    color: white;
    flex-shrink: 0;
}
.rider-content { flex-grow: 1; overflow: hidden; }
.rider-title { font-size: 14px; font-weight: bold; color: #333; margin-bottom: 2px; }
.rider-msg { font-size: 12px; color: #666; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rider-time { font-size: 11px; color: #999; flex-shrink: 0; }
/* --- 修复：让所有弹窗的层级高于回顶按钮(99999) --- */
.modal-overlay {
    z-index: 100000 !important; /* 10万 > 9万9 */
}

/* --- 全新：胶囊样式单选标签 --- */
.capsule-radio-group {
    display: flex;
    gap: 10px;
}
/* 隐藏原生圆圈 */
.capsule-radio-group input[type="radio"] {
    display: none;
}
/* --- 修复：地址标签胶囊 --- */
.capsule-radio-group label {
    padding: 8px 16px; /* 稍微加高一点 */
    background-color: #f5f5f5;
    color: #666;
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.2s;
    
    /* 【核心修复】强制不换行，保持胶囊形状 */
    white-space: nowrap; 
    display: inline-block;
}

/* --- 新增：忌口复选框胶囊样式 (复用上面的逻辑) --- */
.garnish-capsule-group {
    display: flex;
    gap: 15px; /* 间距 */
}
/* 隐藏原生复选框 */
.garnish-capsule-group input[type="checkbox"] {
    display: none;
}
/* 复选框胶囊外观 */
.garnish-capsule-group label {
    padding: 8px 16px;
    background-color: #f5f5f5;
    color: #666;
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.2s;
    white-space: nowrap; /* 强制不换行 */
    
    /* 让文字和可能的图标居中 */
    display: flex;
    align-items: center;
    justify-content: center;
}
/* 复选框选中状态 (绿色边框，类似美团/饿了么选中效果) */
.garnish-capsule-group input[type="checkbox"]:checked + label {
    background-color: #e8f5e9; /* 淡绿背景 */
    color: #4CAF50;            /* 深绿文字 */
    border-color: #4CAF50;     /* 深绿边框 */
    font-weight: bold;
}
/* 选中状态 */
.capsule-radio-group input[type="radio"]:checked + label {
    background-color: #FFF0E0;
    color: #FF9800;
    border-color: #FF9800;
    font-weight: bold;
}

/* --- 修复：地址列表里的删除按钮位置 --- */
.address-item-card {
    position: relative; /* 为绝对定位做准备 */
}
.address-item-card .delete-btn {
    font-size: 20px !important;
    padding: 5px 10px !important;
}
/* --- 全局修复：让输入框的提示文字(例子)变浅 --- */
input::placeholder, 
textarea::placeholder {
    color: rgba(0, 0, 0, 0.25) !important; /* 使用高透明度的黑色，看起来就是很浅的灰色 */
    opacity: 1; /* 修复火狐浏览器默认半透明的问题 */
}

/* 针对深色模式的适配 (如果开启了夜间模式，提示字变浅白) */
body.dark-theme input::placeholder, 
body.dark-theme textarea::placeholder {
    color: rgba(255, 255, 255, 0.25) !important;
}
/* --- 修复：让全局提示条永远在最顶层 --- */
#toast-container {
    z-index: 2147483647 !important; /* CSS允许的最大整数值，确保谁也盖不住它 */
}

/* 确保自定义 Alert 弹窗也足够高 */
#custom-alert-modal, 
#custom-confirm-modal {
    z-index: 200000 !important;
}
/* --- 1. 完整状态栏 (Bar Mode) --- */
.eating-status-bar {
    position: absolute;
    top: 65px;
    left: 50%;
    transform: translateX(-50%);
    width: 92%;
    max-width: 380px;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.6);
    z-index: 95;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.eating-status-bar.hidden {
    top: -150px;
    opacity: 0;
    pointer-events: none;
}

/* 头部摘要区 */
.eating-header {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    gap: 12px;
    cursor: pointer; /* 点击头部也可以展开 */
}

.eating-icon-wrapper {
    width: 36px;
    height: 36px;
    background: #FFF3E0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.eating-summary {
    flex-grow: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.eating-title {
    font-size: 14px;
    font-weight: bold;
    color: #333;
}

.eating-meta {
    display: flex;
    align-items: center;
    gap: 10px;
}

#eating-phase-text {
    font-size: 12px;
    color: #FF9800;
    font-weight: 600;
    background: #FFF8E1;
    padding: 2px 6px;
    border-radius: 6px;
}

.eating-control-btn {
    background: #f0f0f0;
    border: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
    cursor: pointer;
    transition: background 0.2s;
}
.eating-control-btn:hover {
    background: #e0e0e0;
    color: #333;
}

/* 进度条 (细条) */
.eating-progress-track {
    width: 100%;
    height: 3px;
    background: #f0f0f0;
    position: relative;
}
.eating-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #FF9800, #FF5722);
    width: 0%;
    transition: width 0.5s linear;
}

/* 详情抽屉区 */
.eating-details {
    background: #FAFAFA;
    padding: 0 15px; /* 初始不给上下padding，靠height控制 */
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
}

/* 收起状态 */
.eating-details.collapsed {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
}

/* 展开状态 */
.eating-details.expanded {
    max-height: 200px; /* 足够容纳长文本 */
    padding-top: 12px;
    padding-bottom: 12px;
    opacity: 1;
    border-top: 1px solid #f0f0f0;
}

.eating-detail-text {
    font-size: 13px;
    color: #555;
    line-height: 1.6;
    /* 允许换行！ */
    white-space: normal; 
    word-wrap: break-word;
}

/* 展开提示箭头 */
.eating-expand-hint {
    text-align: center;
    color: #ccc;
    margin-top: 5px;
    display: none; 
}


/* --- 2. 迷你悬浮球 (Mini Mode) --- */
.eating-mini-fab {
    position: fixed;
    top: 120px;
    right: 20px;
    width: 50px;
    height: 50px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    z-index: 96; /* 比 Bar 高一点 */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    transition: transform 0.2s;
}

.eating-mini-fab:active {
    cursor: grabbing;
    transform: scale(0.95);
}

.eating-mini-fab.hidden {
    opacity: 0;
    pointer-events: none;
    transform: scale(0);
}

.mini-progress-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; 
    height: 100%; 
    transform: rotate(-90deg);
    pointer-events: none; 
}

.mini-ring-fill {
    stroke-dasharray: 125.6; 
    stroke-dashoffset: 125.6; 
    transition: stroke-dashoffset 0.5s linear;
    stroke-linecap: round;
}

.mini-icon {
    position: absolute; 
    top: 50%;           
    left: 50%;          
    transform: translate(-50%, -50%); 
    
    font-size: 24px;   
    z-index: 2;         
    line-height: 1;
    
    animation: none !important; 
    margin: 0 !important;       
    padding-bottom: 2px;        
}
/* --- 【全新】美团风格代付卡片 (极简纯净版) --- */

/* 1. 外层容器：美团橙色背景 */
.user-row .message.message-payment-request,
.assistant-row .message.message-payment-request {
    display: block !important;
    background: #FFC300 !important; 
    background-color: #FFC300 !important; 
    background-image: none !important;
    color: #333 !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 12px 12px 8px 12px !important; /* 紧凑内边距 */
    width: 240px !important;
    max-width: 240px !important;
    box-shadow: 0 4px 12px rgba(255, 195, 0, 0.3) !important;
    position: relative !important;
    overflow: hidden !important;
}

/* 2. 顶部文案 */
.mt-header-text {
    font-size: 13px;
    font-weight: bold;
    color: #333;
    margin-bottom: 8px !important;
    line-height: 1.4;
    padding-left: 4px;
}

/* 3. 内部白色卡片 (Flex布局：左图右文) */
.mt-white-card.simple-mode {
    background: #fff !important;
    border-radius: 8px;
    padding: 10px !important;
    display: flex !important; /* 横向排列 */
    align-items: center !important;
    gap: 12px !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

/* 左侧：真实图片样式 */
.mt-real-img {
    width: 60px;
    height: 60px;
    border-radius: 6px;
    object-fit: cover;
    background-color: #f5f5f5;
    flex-shrink: 0;
}

/* 左侧：Emoji占位符样式 */
.mt-emoji-placeholder {
    width: 60px;
    height: 60px;
    border-radius: 6px;
    background-color: #FFF8E1; /* 浅黄色底 */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    flex-shrink: 0;
}

/* 右侧：文字信息区 */
.mt-info-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1;
    overflow: hidden;
}

.mt-sub-title {
    font-size: 14px;
    font-weight: bold;
    color: #333;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mt-food-info {
    font-size: 12px;
    color: #888;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mt-price {
    font-size: 16px;
    font-weight: 800;
    color: #FF3B30; /* 价格红 */
}

/* 4. 底部品牌小字 */
.mt-footer-label {
    font-size: 10px;
    color: rgba(51, 51, 51, 0.5); /* 半透明黑色 */
    margin-top: 6px;
    padding-left: 4px;
    font-weight: 500;
}

/* 5. 已支付状态：变灰 */
.user-row .message.message-payment-request.accepted,
.assistant-row .message.message-payment-request.accepted {
    background: #e0e0e0 !important; /* 整体变灰 */
    box-shadow: none !important;
}

/* --- 信封系统样式 (V2.0 精修版) --- */

/* 1. 容器：确保绝对居中，无偏移 */
.envelope-container {
    perspective: 1000px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    position: relative;
    overflow: hidden; /* 防止动画溢出 */
}

/* 2. 信封主体 */
.envelope-wrapper {
    position: relative;
    width: 320px;
    height: 200px;
    background-color: #f0f0f0;
    box-shadow: 0 20px 40px rgba(0,0,0,0.6);
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
    /* 核心修复：移除之前的 margin/transform 偏移 */
}

/* 背面 */
.envelope-back {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: #dcdcdc;
    z-index: 1;
}

/* 3. 信纸 (直角，复古) */
.envelope-paper {
    position: absolute;
    /* 初始状态：藏在信封里 */
    top: 10px; left: 10px; right: 10px; bottom: 10px;
    background-color: #fffdf5; /* 米白纸张 */
    z-index: 2;
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 30px 25px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 -2px 5px rgba(0,0,0,0.05);
    border-radius: 0 !important; /* 【要求】直角 */
    
    /* 纸张纹理 */
    background-image: 
        linear-gradient(to right, rgba(0,0,0,0.02) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0,0,0,0.02) 1px, transparent 1px);
    background-size: 20px 20px;
}

/* 4. 信封正面 (三角形) */
.envelope-front {
    position: absolute;
    bottom: 0; left: 0; width: 0; height: 0;
    /* 核心修复：宽度必须正好是信封的一半 (320/2 = 160) */
    border-left: 160px solid transparent;
    border-right: 160px solid transparent;
    border-bottom: 140px solid #ececec;
    z-index: 10;
    filter: drop-shadow(0 -1px 2px rgba(0,0,0,0.1));
    pointer-events: none; /* 让点击穿透到按钮 */
}

/* 5. 信封盖子 */
.envelope-flap {
    position: absolute;
    top: 0; left: 0; width: 0; height: 0;
    border-left: 160px solid transparent;
    border-right: 160px solid transparent;
    border-top: 130px solid #e0e0e0;
    transform-origin: top;
    transition: transform 0.6s ease-in-out, z-index 0.2s;
    z-index: 20;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.1));
}

/* --- 开启状态动画 (修复：大幅增加尺寸，完美居中) --- */
.envelope-wrapper.open .envelope-flap {
    transform: rotateX(180deg);
    z-index: 1;
}

.envelope-wrapper.open .envelope-paper {
    /* 【核心修复1】尺寸直接基于屏幕大小 (红框区域) */
    width: 90vw;       /* 占据屏幕宽度的 90% */
    height: 70vh;      /* 占据屏幕高度的 70% */
    max-width: 600px;  /* 电脑端限制最大宽度 */
    
    /* 【核心修复2】强制绝对居中 */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 无论信封在哪，信纸都在屏幕正中间 */
    
    z-index: 30;
    border-radius: 4px; /* 直角微调 */
    box-shadow: 0 15px 50px rgba(0,0,0,0.5); /* 加深阴影 */
    border: 1px solid #e0e0e0;
}

/* --- 交互文字与按钮 --- */
.envelope-overlay-content {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 50;
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

/* 加载文字 (白色粗体+粉光) */
.envelope-msg {
    font-family: 'Noto Serif SC', serif;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    letter-spacing: 3px;
    text-shadow: 0 0 10px rgba(255, 192, 203, 0.8), 0 0 20px rgba(255, 192, 203, 0.6);
    animation: glow-pulse 2s infinite alternate;
    margin: 0;
}

/* 开启按钮 */
.envelope-btn {
    background: transparent;
    border: none;
    font-family: 'Noto Serif SC', serif;
    font-size: 28px;
    font-weight: 800;
    color: #fff;
    letter-spacing: 5px;
    cursor: pointer;
    text-shadow: 0 0 15px rgba(255, 105, 180, 0.8), 0 0 30px rgba(255, 105, 180, 0.6);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    padding: 10px 30px;
    white-space: nowrap;
}

.envelope-btn:hover {
    transform: scale(1.3);
}

@keyframes glow-pulse {
    from { opacity: 0.7; text-shadow: 0 0 10px rgba(255, 192, 203, 0.5); }
    to { opacity: 1; text-shadow: 0 0 20px rgba(255, 192, 203, 1); }
}

/* --- 信纸内容布局 --- */
.paper-content {
    flex-grow: 1;
    overflow-y: auto;
    font-family: 'Noto Serif SC', serif;
    color: #333;
    line-height: 1.8;
    opacity: 0;
    transition: opacity 1s 0.8s;
    padding: 10px; /* 内容留白 */
}
.envelope-wrapper.open .paper-content {
    opacity: 1;
}
.paper-content::-webkit-scrollbar { display: none; }


/* 底部操作栏 */
.paper-footer {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 10px;
    opacity: 0;
    transition: opacity 1s 1s;
    padding-bottom: 5px;
}
.envelope-wrapper.open .paper-footer {
    opacity: 1;
}

/* 收起按钮 (手写风) */
#close-envelope-btn {
    background: none;
    border: none;
    font-family: 'ZCOOL KuaiLe', cursive;
    font-size: 18px; /* 稍微放大 */
    color: #aaa;
    cursor: pointer;
    padding: 5px 10px;
}
#close-envelope-btn:hover { color: #555; }


/* 全屏按钮 (SVG) */
#fullscreen-envelope-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    opacity: 0.5;
    display: flex;
    align-items: center;
}
#fullscreen-envelope-btn:hover { opacity: 1; }


/* 全屏时的关闭按钮 (右上角) */
#envelope-fullscreen-close {
    position: absolute;
    top: max(15px, env(safe-area-inset-top)); /* 适配刘海屏 */
    right: 20px;
    background: none;
    border: none;
    font-size: 32px;
    color: #ccc;
    cursor: pointer;
    z-index: 2147483647 !important; /* 确保按钮在最上层 */
    line-height: 1;
    padding: 10px;
}
#envelope-fullscreen-close:hover { color: #555; }
/* --- 【核心修复】全屏模式下隐藏底部操作栏 --- */
.envelope-paper.fullscreen-mode .paper-footer {
    display: none !important;
}
/* --- 外卖详细卡片样式 --- */
.food-detail-card {
    background: #fff;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 15px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    border: 1px solid #eee;
}

.food-card-top {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #999;
    margin-bottom: 10px;
    border-bottom: 1px solid #f9f9f9;
    padding-bottom: 5px;
}

.food-card-main {
    display: flex;
    gap: 12px;
}
.fc-img {
    width: 70px; height: 70px;
    border-radius: 8px;
    object-fit: cover;
    background: #eee;
}
.fc-info { flex: 1; display: flex; flex-direction: column; gap: 4px; }

.fc-name-row { display: flex; justify-content: space-between; align-items: center; }
.fc-name { font-weight: bold; font-size: 15px; color: #333; }
.fc-quality { font-size: 12px; padding: 1px 4px; border-radius: 4px; }
.fc-quality.q-4 { color: #FFD700; border: 1px solid #FFD700; } /* S级 */
.fc-quality.q-3 { color: #4CAF50; border: 1px solid #4CAF50; } /* A级 */
.fc-quality.q-2 { color: #2196F3; border: 1px solid #2196F3; } /* B级 */
.fc-quality.q-0, .fc-quality.q-1 { color: #F44336; border: 1px solid #F44336; } /* D/C级 */

.fc-desc {
    font-size: 12px; color: #666;
    background: #f5f5f5; padding: 5px; border-radius: 4px;
    margin-top: 5px;
}

.food-card-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #eee;
}

.fc-action-btn {
    padding: 5px 10px;
    border-radius: 15px;
    border: 1px solid #ddd;
    background: #fff;
    font-size: 12px;
    cursor: pointer;
    color: #555;
}
.fc-action-btn.view-scene {
    color: #FF9800; border-color: #FF9800; background: #fff3e0;
}
.fc-action-btn.view-thought {
    color: #E91E63; border-color: #E91E63; background: #fce4ec;
}

.fc-fav-btn {
    background: none; border: none; cursor: pointer; padding: 5px;
    display: flex; align-items: center;
}
.fc-fav-btn svg { width: 24px; height: 24px; }
/* --- 【核心修复】全屏阅读模式 (纯净 HTML 模式) --- */
.envelope-paper.fullscreen-mode {
    /* 1. 强制固定定位，铺满视口 */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    
    /* 2. 强制宽高 100% */
    width: 100% !important;
    height: 100% !important;
    height: 100dvh !important; 
    max-width: none !important;
    max-height: none !important;
    
    /* 3. 移除所有位移和边距 */
    transform: none !important; 
    margin: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    
    /* 4. 去除信纸特征，变成纯白画布 */
    background-color: #ffffff !important; 
    background-image: none !important;
    box-shadow: none !important;
    
    /* 5. 移除内边距，让 HTML 内容贴边撑满 */
    padding: 0 !important; 
    box-sizing: border-box !important;
    
    /* 6. 允许滚动 */
    overflow-y: auto !important; 
    -webkit-overflow-scrolling: touch;
    
    /* 7. 层级最高 */
    z-index: 2147483647 !important; 
    
    /* 8. 布局重置 */
    display: block !important; 
}

/* 【【【关键修复】】】强制内部内容可见！解决白屏问题 */
.envelope-paper.fullscreen-mode .paper-content {
    opacity: 1 !important; /* 强制不透明！ */
    transition: none !important; /* 移除过渡动画，防止闪烁 */
    padding: 0 !important; /* 移除内容内边距 */
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
}

/* 确保内部容器撑满 */
.envelope-paper.fullscreen-mode #envelope-content {
    width: 100% !important;
    min-height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
}

/* 强制全屏时的内容区宽度 */
html body .envelope-paper.fullscreen-mode #envelope-content {
    width: 100% !important;
    max-width: 800px !important; /* 限制最大阅读宽度 */
    margin: 0 auto !important;
    padding: 0 !important;
    
    /* 【核心修复】强制撑开高度，防止内容塌陷 */
    flex-grow: 1 !important; 
    height: auto !important;
    min-height: 0 !important;
    display: block !important; /* 确保内部元素正常堆叠 */
    overflow: visible !important; /* 让内容自然延伸 */
}

/* 额外修复：确保全屏模式下信纸本身恢复 Flex 布局以支持内部滚动 */
html body .envelope-paper.fullscreen-mode {
    display: flex !important;
    flex-direction: column !important;
}

/* 强制全屏时的关闭按钮位置 */
html body .envelope-paper.fullscreen-mode #envelope-fullscreen-close {
    position: fixed !important;
    top: max(15px, env(safe-area-inset-top)) !important; /* 适配刘海屏 */
    right: 20px !important;
    z-index: 2147483647 !important;
    background: rgba(0,0,0,0.05) !important; /* 给个淡淡的圆底 */
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
/* ============================================================
   V-THOUGHT-NOTE: 心声便利贴专属样式
   ============================================================ */

.note-paper-container {
    background-color: #fff9c4; 
    background-image: linear-gradient(#fcf6c9 1px, transparent 1px); 
    background-size: 100% 24px; 
    
    width: 280px;
    min-height: 300px;
    padding: 30px 20px 20px 20px;
    
    position: relative;
    transform: rotate(-2deg); 
    box-shadow: 5px 5px 15px rgba(0,0,0,0.2);
    
    /* 【核心修改】全部改成 2px，变成直角 */
    border-radius: 2px !important; 
    
    font-family: 'ZCOOL KuaiLe', cursive; 
    color: #555;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 顶部的胶带装饰 */
.note-tape {
    width: 100px;
    height: 30px;
    background-color: rgba(255, 255, 255, 0.4);
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%) rotate(2deg);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    backdrop-filter: blur(1px);
}

.note-title {
    font-size: 20px;
    margin: 10px 0 20px 0;
    border-bottom: 2px dashed #d7ccc8;
    padding-bottom: 5px;
    width: 100%;
    text-align: center;
    color: #5d4037;
}

.note-body {
    flex-grow: 1;
    width: 100%;
    line-height: 24px; /* 匹配背景线的行高 */
    font-size: 18px; /* 手写字通常大一点 */
    white-space: pre-wrap; /* 保留换行 */
}

.note-confirm-btn {
    margin-top: 20px;
    background: none;
    border: 2px solid #8d6e63;
    color: #8d6e63;
    padding: 5px 20px;
    border-radius: 20px;
    font-family: 'ZCOOL KuaiLe', cursive;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s;
}
.note-confirm-btn:hover {
    background: #8d6e63;
    color: #fff9c4;
}