:root {
    --primary-color: #f16c6c;
    --background-color: #ffffff;
    --text-color: #333;
    --message-bg-user: #d1ffbed8;
    --message-bg-ai: #ffffffd0;
    --message-border-user: #bad1a6;
    --message-border-ai: #e8e8e8;    
    --border-radius: 15px;
    --box-shadow: 0 3px 3px rgba(0,0,0,0.08);
}

/* 你原来的 body 样式全部删掉或注释就行 */
html, body {
    height: 100dvh;                     /* 2025年最正确的全屏写法 */
    margin: 0;
    padding: 0;
    overflow: hidden;
    overscroll-behavior: none;
}

body {
    display: flex;
    flex-direction: column;
    background: url('wallpaper.jpg') center/cover no-repeat fixed;
}



/* --- Header 最终布局样式 --- */

/* 1. 修改 Header 容器，让它成为按钮定位的“锚点” */
.app-header {
    position: relative; /* 关键！为内部的绝对定位元素提供参考系 */
    padding: 12px 24px; /* 上下 padding 可以稍微给多一点，更好看 */
    border-bottom: 1px solid #e0e0e0;
    text-align: center;
    flex-shrink: 0;
}


/* 这两部分的样式保持不变，确保文字垂直居中 */
.app-header h1 {
    margin: 0;
    font-size: 1.2em;
    color: var(--primary-color);
}

.app-header p {
    margin: 2px 0 0;
    font-size: 0.8em;
    color: #666;
}


#clear-button:hover {
    background-color: #f5f5f5; /* 鼠标悬停时给一个淡淡的背景色 */
    border-color: #aaaaaa;     /* 边框颜色也加深一点 */
}


#chat-messages {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.message {
    padding: 12px 18px;
    border-radius: var(--border-radius);
    max-width: 80%;
    line-height: 1.5;
    word-wrap: break-word;
}

.message.user {
    background-color: var(--message-bg-user);
    color: var(--text-color);
    align-self: flex-end;
}

.message.ai {
    background-color: var(--message-bg-ai);
    color: var(--text-color);
    align-self: flex-start;
}

.app-footer {
    padding: 8px 16px;
    border-top: 1px solid #e0e0e0;
    display: flex;
    gap: 9px;
    flex-shrink: 0;
}

#task-input {
    flex-grow: 1;
    padding: 5px 16px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 1em;
    background: rgba(255, 255, 255, 0.6) !important;   /* 重点！ */
}

#task-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(0,0,0,0.1);
    background: rgba(255, 255, 255, 0.88) !important;
}

#send-button {
    padding: 5px 12px;
    border: none;
    background-color: var(--primary-color);
    color: white;
    border-radius: 8px;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.2s;
}

#reroll-footer-btn {
    padding: 5px 9px;
    border:1px solid rgba(127, 127, 127, 0.816);
    cursor: pointer;
    border-radius: 8px;
    font-size: 1em;
    flex-shrink: 0;
    transition: background-color 0.2s;
    background: rgba(251, 251, 251, 0.5);
    color: rgb(131, 131, 131);
}



@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.hidden {
    display: none !important;
}

/* 格式化AI回复 */
.message.ai ul {
    padding-left: 20px;
    margin-top: 8px;
    margin-bottom: 0;
}
.message.ai li {
    margin-bottom: 4px;
}

/* 原有变量保持不变…… */

/* ========= 1. 恢复横向布局（头像和气泡并排） ========= */
.message-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 3px;                /* 头像和气泡间距 */
    margin-bottom: 12px;
    max-width: 93%;
    opacity: 0;
    animation: slideInUp 0.35s ease-out 0.05s forwards;
}

.message-wrapper.user {
    flex-direction: row-reverse;
    align-self: flex-end;     /* 整体右对齐 */
}

.message-wrapper.ai {
    align-self: flex-start;   /* 整体左对齐 */
}



/* --- 头像样式调整 --- */
.avatar-container {
    width: 40px;
    height: 40px;
    flex-shrink: 0; /* 防止被挤压 */
    margin: 0 10px; /* 头像左右留白 */
}

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


/* ========= 3. 气泡收紧（文字更密集好看） ========= */
.message-bubble {
    padding: 9px 14px;        /* 原来12-18 → 9-14 */
    border-radius: 12px;
    max-width: 100%;
    font-size: 16px;
    line-height: 1.3;        /* 关键！行距从1.6 → 1.42 超清爽 */
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.message-wrapper.user .message-bubble {
    background: var(--message-bg-user);
    border: 0.7px solid var(--message-border-user);
    border-top-right-radius: 3px;
}

.message-wrapper.ai .message-bubble {
    background: var(--message-bg-ai);
    border: 1.3px solid var(--message-border-ai);
    border-top-left-radius: 3px;
}

/* --- 新增：消息气泡入场动画 --- */

/* 
  定义一个动画，名叫 "slideInUp"
  它会让元素从下方20像素的位置、完全透明的状态，
  平滑地移动到原始位置（transform: translateY(0)）并且完全不透明。
*/
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 
  我们给新出现的消息气泡一个特殊的 class，名叫 "newly-added"
  只要有这个 class，就会播放上面定义的 slideInUp 动画。
  - 动画时长 0.3秒
  - 动画曲线是 ease-out，有一种“先快后慢”的缓动感，更自然
  - forwards 会让动画停留在结束时的状态
*/

@keyframes slideInUp {
    to { opacity: 1; transform: translateY(0); }
}


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

/* ======== 2. app-container 现在就是真正的 flex 爸爸 ======== */
#app-container {
    display: flex;
    flex-direction: column;
    flex: 1;                     /* 占满 body 所有剩余空间 */
    min-height: 0;               /* 关键！允许 chat-window 里的 overflow-y 正常滚动 */
}

/* ======== 3. 三个孩子的高度行为（原来就写对了，保留）======== */
.app-header {
    flex-shrink: 0;              /* 顶栏不被压缩 */
    /* 你原来的毛玻璃样式全部保留，超级好看 */
    padding: 12px 20px;
    border-bottom: 1px solid rgba(220,220,220,0.9);
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    border-radius: 0;
}

#chat-window {
    flex: 1;                     /* 中间聊天区域吃掉所有剩余空间 */
    overflow-y: auto;            /* 只有这里能滚动 */
    min-height: 0;               /* 同样关键！ */
    padding: 10px;
    display: flex;
    flex-direction: column;
}

.app-footer {
    flex-shrink: 0;              /* 输入框永远贴底 */
    /* 你原来的毛玻璃样式也保留 */
    padding: 10px 16px;
    border-top: 1px solid rgba(220,220,220,0.9);
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    border-radius: 0;
}

/* 正在输入 */
#typing-status {
    margin: 4px 0 0;
    font-size: 0.8em;
    color: #999;
    min-height: 1.2em;   /* 防止文字变了布局跳动 */
}

.typing {
    font-style: normal !important;
}
.typing::after {
    content: '';
    animation: ellipsis 1.5s infinite;
}
@keyframes ellipsis {
    0%   { content: ''; }
    25%  { content: '.'; }
    50%  { content: '..'; }
    75%  { content: '...'; }
    100% { content: ''; }
}


/* 好友列表 */

:root {
    --primary-color: #f16c6c;
    --background-color: #ffffff;
    --text-color: #333;
    --message-bg-user: #d1ffbed8;
    --message-bg-ai: #ffffffd0;
    --message-border-user: #96b37c;
    --message-border-ai: #e8e8e8;    
    --border-radius: 15px;
    --box-shadow: 0 3px 3px rgba(0,0,0,0.08);
}

body {
    display: flex;
    flex-direction: column;
    background: url('wallpaper.jpg') center/cover no-repeat fixed;
    /* 如果没有wallpaper.jpg，用这个备用色，防止一片白 */
    background-color: #f2f2f2; 
}

.app-header {
    position: relative;
    padding: 12px 24px;
    border-bottom: 1px solid rgba(220,220,220,0.9);
    text-align: center;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
}

.app-header h1 {
    margin: 0;
    font-size: 1.2em;
    color: var(--primary-color);
}

.app-header p {
    margin: 2px 0 0;
    font-size: 0.8em;
    color: #666;
}

#chat-messages {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.app-footer {
    padding: 8px 16px;
    border-top: 1px solid rgba(220,220,220,0.9);
    display: flex;
    gap: 9px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
}

#task-input {
    flex-grow: 1;
    padding: 5px 16px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 1em;
    background: rgba(255, 255, 255, 0.6) !important;
}

#task-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(0,0,0,0.1);
    background: rgba(255, 255, 255, 0.88) !important;
}

#send-button {
    padding: 5px 12px;
    border: none;
    background-color: var(--primary-color);
    color: white;
    border-radius: 8px;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.2s;
}

#reroll-footer-btn {
    padding: 5px 9px;
    border:1px solid rgba(127, 127, 127, 0.816);
    cursor: pointer;
    border-radius: 8px;
    font-size: 1em;
    flex-shrink: 0;
    transition: background-color 0.2s;
    background: rgba(251, 251, 251, 0.5);
    color: rgb(131, 131, 131);
}

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

.typing::after {
    content: '';
    animation: ellipsis 1.5s infinite;
}
@keyframes ellipsis {
    0%   { content: ''; }
    25%  { content: '.'; }
    50%  { content: '..'; }
    75%  { content: '...'; }
    100% { content: ''; }
}

#app-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}





/* ============================================== */
/* PART 2: 新增样式 (多角色、列表、弹窗) */
/* ============================================== */

/* 1. 视图切换容器 */
#view-contact-list, #view-chat {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}
.hidden { display: none !important; }

/* 2. Header 里的新按钮 (统一样式) */
.header-icon-btn {
    position: absolute;
    top: 50%;
    /* 修正垂直居中，考虑padding */
    transform: translateY(-50%); 
    background: none;
    border: none;
    font-size: 24px;
    color: var(--primary-color); /* 用你的主题色 */
    cursor: pointer;
    padding: 0 10px;
    height: 100%; /* 增加点击区域 */
    display: flex;
    align-items: center;
}
/* 因为你的header有padding-top(刘海屏)，所以上面的 top:50% 可能不准。
   我们改为用 bottom定位，或者依赖 flex 布局。
   为了不破坏你原本的布局，我们用绝对定位微调：
*/
.header-icon-btn.left { left: 10px; bottom: 0px; top: auto; transform: none; }
.header-icon-btn.right { right: 10px; bottom: 5px; top: auto; transform: none; }

/* 2. 全新设计的“清空”按钮样式 */
.header-icon-btn.right {
    /* --- 定位保持不变 --- */
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    
    /* --- 1. 核心修复：强制盒子模型 --- */
    box-sizing: border-box; 
    
    /* --- 2. 尺寸设定 --- */
    /* 建议稍微给大丢丢到 26px 或 28px，手指更好点，这里保持你想要的 25px */
    width: 28px !important;
    height: 28px !important;
    min-width: 28px;
    min-height: 28px;
    border-radius: 50%;
    
    /* --- 3. 完美的 Flex 居中 (关键！) --- */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;       /* 重点：一定要把 padding 归零！ */
    
    /* --- 4. 字体微调 --- */
    font-size: 16px;  /* 字体必须比盒子小，icon 才会居中且不拥挤 */
    line-height: 1;   /* 消除文字默认行高，防止垂直偏移 */
    font-weight: 300; /*稍微细一点点更像现代App */
    color: #818181;
    
    /* --- 外观样式 --- */
    border: 1px solid #71717181;
    background: rgba(236, 236, 236, 0.568);
    
    /* --- 5. iOS 专用修复 (防止苹果手机加默认按钮样式) --- */
    -webkit-appearance: none;
    appearance: none;
    outline: none;
}

.header-icon-btn.left {
    /* --- 定位保持不变 --- */
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    
    /* --- 1. 核心修复：强制盒子模型 --- */
    box-sizing: border-box; 
    
    /* --- 2. 尺寸设定 --- */
    /* 建议稍微给大丢丢到 26px 或 28px，手指更好点，这里保持你想要的 25px */
    width: 28px !important;
    height: 28px !important;
    min-width: 28px;
    min-height: 28px;
    border-radius: 50%;
    
    /* --- 3. 完美的 Flex 居中 (关键！) --- */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;       /* 重点：一定要把 padding 归零！ */
    
    /* --- 4. 字体微调 --- */
    font-size: 16px;  /* 字体必须比盒子小，icon 才会居中且不拥挤 */
    line-height: 1;   /* 消除文字默认行高，防止垂直偏移 */
    font-weight: 300; /*稍微细一点点更像现代App */
    color: #818181;
    
    /* --- 外观样式 --- */
    border: 1px solid #71717181;
    background: rgba(236, 236, 236, 0.568);
    
    /* --- 5. iOS 专用修复 (防止苹果手机加默认按钮样式) --- */
    -webkit-appearance: none;
    appearance: none;
    outline: none;
}


/* 3. 通讯录列表样式 */
#view-contact-list {
    display: flex;
    flex-direction: column;
    background: transparent;    /* 背景是壁纸，所以透明 */
}

/* 核心：悬浮的毛玻璃大卡片（固定 85% 大小，自动居中） */
#contact-list-wrapper {
    width: 90vw;
    max-width: 520px;          /* 手机/平板不会太宽 */
    height: 90vh;
    max-height: 820px;
    margin: auto;              /* 上下左右自动居中 */
    background: rgba(255, 255, 255, 0.72);     /* 亮色壁纸推荐 0.72 */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 15px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.5);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* 列表容器：只负责滚动和内边距 */
#contact-list-container {
    flex: 1;
    overflow-y: auto;
    padding: 0 20px;           /* 左右留白，文字不贴边 */
    
    /* 美化滚动条（可选但强烈推荐） */
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.2) transparent;
}
#contact-list-container::-webkit-scrollbar {
    width: 6px;
}
#contact-list-container::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.25);
    border-radius: 3px;
}

/* ======================= 联系人每一项（纯列表风格） ======================= */
.contact-item {
    display: flex;
    align-items: center;
    padding: 12px 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    transition: background 0.2s ease;
    cursor: pointer;
}

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

/* 按下和高亮反馈 */
.contact-item:active {
    background: rgba(0, 0, 0, 0.1) !important;
}

.contact-item:hover {
    background: rgba(0, 0, 0, 0.04) !important;
}

@media (hover: hover) {
    .contact-item:hover {
        background: rgba(0, 0, 0, 0.04);
    }
}

/* 头像和文字保持原来的好看样式 */
.contact-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #e0e0e0;
    margin-right: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

.contact-info {
    flex: 1;
    min-width: 0;                     /* 防止文字溢出 */
}

.contact-info h3 {
    margin: 0 0 5px 0;
    font-size: 16.5px;
    color: #222;
    font-weight: 600;
}

.contact-info p {
    margin: 0;
    font-size: 13.5px;
    color: #777;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* 4. 弹窗样式 (继承你的毛玻璃) */
#modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.4); /* 背景黑一点 */
    z-index: 10000;
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(5px);
}


.modal {
    width: 85%;
    max-width: 400px;
    background: rgba(255, 255, 255, 0.95);
    padding: 24px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    display: flex; flex-direction: column;
    animation: modalPop 0.3s ease-out;
}

@keyframes modalPop {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

.modal h2 { margin: 0 0 20px 0; color: var(--primary-color); font-size: 18px; text-align: center; }

.input-group { margin-bottom: 15px; }
.input-group label { display: block; font-size: 12px; color: #666; margin-bottom: 5px; font-weight: bold; }
.input-group input, .input-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-size: 14px;
    background: #f9f9f9;
    box-sizing: border-box; /* 关键 */
}
.input-group textarea { resize: none; font-family: inherit; }

.modal-buttons {
    display: flex;
    justify-content: center;    /* 水平居中 */
    align-items: center;        /* 如果还需要垂直居中也加上这一行 */
    gap: 12px;                  /* 如果有多个按钮，控制间距 */
}

/* 按钮本身的样式保持不变 */
.modal-buttons button {
    padding: 7px 66px;
    border-radius: 8px;
    border: none;
    font-size: 12px;
    cursor: pointer;
}

#main-cancel { background: #d0d0d0; color: #666; }
#main-confirm { background: var(--primary-color); color: white; }
#modal-cancel { background: #d0d0d0; color: #666; }
#modal-save { background: var(--primary-color); color: white; }

.modal-danger-zone {
    margin-top: 25px;
    padding-top: 15px;
    border-top: 1px dashed #ddd;
    display: flex; flex-direction: column; gap: 8px;
}
.danger-btn {
    background: #ffc8c8; color: #d93025; border: none;
    padding: 5px; border-radius: 8px; font-size: 13px; cursor: pointer; width: 100%;
}
.danger-btn.outline { background: transparent; border: 1px solid #ff8d8d; }

/* ============= 新增样式：头像上传预览 ============= */
.avatar-upload-group .avatar-preview-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.avatar-preview {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    background: #f0f0f0;
    flex-shrink: 0;
}

.avatar-preview[src^="data:"],
.avatar-preview:not([src=""]),
.avatar-preview[src$=".png"],
.avatar-preview[src$=".jpg"],
.avatar-preview[src$=".jpeg"],
.avatar-preview[src$=".webp"] {
    background: transparent;
}

/* emoji 头像特殊处理（保持居中） */
.avatar-preview[alt]:not([src*="http"]):not([src^="data:"]) {
    font-size: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eee;
}

.small-btn {
    padding: 6px 10px;
    font-size: 12px;
    background: #ededed;
    color: rgb(82, 82, 82);
    border: 1px solid rgba(100, 100, 100, 0.6);
    border-radius: 8px;
    cursor: pointer;
}
/* ============= 全局弹窗蒙版统一样式（重要！两个弹窗都用这个）============= */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s ease;
}

.modal-overlay:not(.hidden) {
    opacity: 1;
    visibility: visible;
}

/* 你原来的编辑角色弹窗还是用这个 id */
#modal-overlay { z-index: 10000; }

/* 新壁纸弹窗直接复用上面的类！ */
#main-modal {
    z-index: 10001;   /* 比编辑弹窗高一点，防止被盖住 */
}

/* ============= 毛玻璃面板（两个弹窗公用）============= */
.modal.glass-panel {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 18px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
    width: 90%;
    max-width: 420px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 24px;
    box-sizing: border-box;
    animation: modalPop 0.3s ease;
}

@keyframes modalPop {
    from { transform: scale(0.9); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

/* ============= 壁纸弹窗专属美化 ============= */
#main-modal .modal h2 {
    margin: 5px 0 10px 0;
    text-align: center;
    font-size: 20px;
    color: #333;
}

.main-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0px 0 0px;
}

.main-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 15px;
    color: #444;
    border: 1px solid rgba(0,0,0,0.08);
}

.main-option:hover {
    background: rgba(255, 255, 255, 1);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.main-option input[type="radio"] {
    margin: 0;
    width: 18px;
    height: 18px;
    accent-color: #636363;
}

.wallpaper-option.upload {
    border: 2.5px dashed rgba(122, 122, 122, 0.707);
    justify-content: center;
    color: #7d7d7d;
    font-weight: 500;
    position: relative;
    background: rgb(255, 255, 255);
    padding: 10px;
    border-radius: 10px;
}

.wallpaper-option.upload:hover {
    background: rgba(218, 218, 218, 0.9);
    border-color: #8e8e8e;
}

/* 隐藏原生文件输入框，但保持可点击 */
.wallpaper-option.upload input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

/* 预览图 */
#wallpaper-preview {
    margin: 5px auto;
    text-align: center;
    padding: 8px;
    border-radius: 14px;
    background: rgba(0,0,0,0.05);
    max-width: 100%;    
}

#wallpaper-preview img {
    max-width: 100%;
    max-height: 20vh;
    border-radius: 12px;
    box-shadow: 0 8px 8px rgba(0,0,0,0.2);
}

/* 按钮统一美化（你原项目肯定已经有，这里补全） */
.modal-buttons button {
    padding: 10px 20px;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s;
}

/* 导入导出 */
/* 隐藏原生的文件输入框，但保持可点击 */
#file { display: none; }

/* 可选：给上传壁纸的卡片加个小图标更好看 */

.main-options .main-option[onclick]::before {
    font-size: 18px;
    margin-right: 8px;
}
.main-options label[for="file"] span::before,
.main-options .main-option:has(input[type="file"]) span::before {
    font-size: 18px;
    margin-right: 8px;
}

/* ========== 设置中心标题美化 ========== */
.settings-title {
    margin: 5px 0 20px 0;
    text-align: center;
    font-size: 22px;
    color: #333;
    font-weight: 600;
}

.settings-section-title {
    margin: 28px 0 12px 0;
    font-size: 17px;
    color: #555;
    font-weight: 500;
    padding-left: 4px;
}

/* ========== API 设置区通用卡片 ========== */
.api-input-card {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px;
    padding: 16px 18px !important;
}

.api-label {
    font-size: 14.5px;
    color: #555;
    font-weight: 500;
    width: 80px;
}

/* 输入框统一样式 */
.setting-input {
    padding: 12px 14px;
    border: 1.5px solid rgba(0,0,0,0.12);
    border-radius: 12px;
    font-size: 15px;
    background: rgba(255,255,255,0.9);
    transition: all 0.2s;
}

.setting-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0,102,255,0.15);
    background: white;
}

/* ========== 模型选择那一行 ========== */
/* 5. 模型选择卡片样式 (修正对齐问题) */

.main-option.model-card {
    background: rgba(255, 255, 255, 0.95);
    padding: 20px 24px;
    border-radius: 20px;
    display: flex; /* 确保它是一个flex容器 */
    flex-direction: column; /* 将主轴改为垂直方向 */
    align-items: flex-start; /* 新增：让所有子项在水平方向上从左侧开始对齐 */
    gap: 12px; /* 可以用 gap 来控制子项之间的垂直间距 */
}


/* “模型”标签的样式 */
.api-label2 {
    font-size: 14.5px;
    color: #555;
    font-weight: 500;
    /* width: 80px; 可以保留也可以移除，因为现在对齐了，宽度不再是问题 */
    /* align-items: flex-start; 这个属性在这里无效，可以删除 */
    box-sizing: border-box; /* 加上这个是个好习惯 */
    padding-right: 12px; /* 可以加一点右内边距，让它和下面的输入框左侧对齐得更舒服 */
}


/* 下拉框和按钮所在的行 */
.model-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center; /* 垂直居中对齐下拉框和按钮 */
    width: 100%; /* 让这一行撑满整个卡片宽度 */
}

/* 下拉框样式，让它可以伸展 */
#custom-model-select.model-select {
    flex-grow: 1; /* 占据 .model-row 里的剩余空间 */
    /* width: 100%; 在 flex-grow: 1 的情况下，这个可以省略 */
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-size: 14px;
    background: #f9f9f9;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    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='%23343a40' 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 10px center;
    background-size: 16px 12px;
}

/* 按钮样式 */
#fetch-models-btn.fetch-models-btn {
    padding: 10px 20px;
    border-radius: 8px;
    border: none;
    font-size: 14px;
    cursor: pointer;
    background: #ea656d;
    color: white;
    flex-shrink: 0; /* 防止按钮在空间不足时被压缩 */
    transition: background-color 0.2s ease;
}

#fetch-models-btn.fetch-models-btn:hover {
    background: #d9535b;
}


/* =========================================
   消息列表布局优化
   ========================================= */

/* --- 时间戳样式 (重点) --- */
.msg-time {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.9); /* 亮白色文字 */
    margin: 0 3px; /* 距离气泡的间距 */
    
    /* 核心：发光效果，防止背景太乱看不清 */
    text-shadow: 
        0 0 2px rgba(0,0,0,0.8),  /* 第一层黑阴影 */
        0 0 4px rgba(0,0,0,0.5);  /* 第二层晕染 */
    
    white-space: nowrap; /* 防止时间换行 */
    opacity: 0.8;
    align-items: flex-end;
}