/* 定义页面的所有视觉样式，如颜色、字体、布局等 */
:root {
    --bg-app: #0d1117;       /* 类似 GitHub Dark Dimmed */
    --bg-sidebar: #1e1f20;   /* Gemini 风格稍微亮一点点的黑 */
    --bg-panel: #131314;     /* 主面板深色 */
    --bg-input: #1e1f20;     /* 输入框背景 */
    --bg-hover: #333537;     /* 悬停 */
    --bg-tertiary: #2a2a2a;  /* 第三级背景 */
    --border-color: #444746; /* 边框 */
    --text-primary: #e3e3e3;
    --text-secondary: #c4c7c5;
    --accent-primary: #7c3aed;
    --accent-glow: rgba(124, 58, 237, 0.5);
    --accent-gradient: linear-gradient(135deg, #a855f7 0%, #c561fb 100%);
    --header-height: 80px;
}

* { margin: 0;               /* 全局重置所有元素的默认外边距，避免浏览器差异导致布局错位 */
    padding: 0;              /* 重置所有元素默认内边距 */
    box-sizing: border-box;  /* 让宽度和高度计算更直观：padding 和 border 不再额外增加尺寸 */
}

/* ============================================================================
   全局滚动条样式 - 深色主题适配，无白色边框
   ============================================================================ */

/* Webkit浏览器（Chrome, Safari, Edge）滚动条样式 */
*::-webkit-scrollbar {
    width: 8px;              /* 滚动条宽度 */
    height: 8px;             /* 水平滚动条高度 */
}

*::-webkit-scrollbar-track {
    background: var(--bg-panel);  /* 滚动条轨道背景色，使用主题面板色 */
    border: none;             /* 无边框 */
}

*::-webkit-scrollbar-thumb {
    background: #444746;      /* 滚动条滑块颜色，使用主题边框色 */
    border-radius: 4px;       /* 圆角 */
    border: none;             /* 无边框 */
}

*::-webkit-scrollbar-thumb:hover {
    background: #555758;      /* 悬停时稍亮一些 */
}

*::-webkit-scrollbar-corner {
    background: var(--bg-panel);  /* 滚动条角落背景色 */
    border: none;             /* 无边框 */
}

/* Firefox 滚动条样式 */
* {
    scrollbar-width: thin;    /* 细滚动条 */
    scrollbar-color: #444746 var(--bg-panel);  /* 滑块颜色 轨道颜色 */
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Google Sans", Helvetica, Arial, sans-serif;
        /* 设置整个页面的默认字体，包含主流系统的现代 UI 字体：
        - macOS / iOS：San Francisco（-apple-system）
        - Windows：Segoe UI
        - Android：Google Sans
        - 其它：Helvetica / Arial
         */
    background-color: var(--bg-app);         /* 页面背景色使用 CSS 变量，让深色/浅色模式可统一切换 */
    color: var(--text-primary);              /* 默认文字颜色使用主文本色（白或深黑） */
    height: 100vh;                           /* body 高度占满整个可视区域viewport height，在全屏应用布局 */
    overflow: hidden;                        /* 隐藏页面滚动条，使主内容内部自己管理滚动 */
    display: flex;                           /* 让 body 作为 Flex 容器，内部内容可以用 flex 布局排列 */
}

/* === 1. 侧边栏 === (已改好) */
.sidebar {
    width: 320px;                            /* 侧边栏固定宽度 376px */
    background-color: var(--bg-sidebar);     /* 背景颜色使用 CSS 变量，方便一键切换浅色/深色主题 */
    display: flex;                           /* 使用 flex 布局，使侧边栏能轻松分成上下：头部、内容区 */
    flex-direction: column;                  /* 让子元素 header、content、footer 从上到下排列 */
    position: absolute;                      /* 侧边栏"滑出/滑入"动画 */
    left: 0; top: 0; bottom: 0;              /* 将其固定在屏幕左侧，从上到下完全贴边 */
    transform: translateX(-100%);            /* 初始位置：整体左移 100%，完全隐藏在屏幕外 */
    transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1); /* 侧边栏平滑缓动动画 */
    z-index: 100;                            /* 提升侧边栏层级，确保遮挡主内容 */
    padding: 12px;                           /* 边栏内部的元素与边缘内边距 12px */
}

.sidebar.show { transform: translateX(0); }  /* 当加入 .show 类时，让侧栏从左侧滑入位置 */

.sidebar-header {
    padding: 6px 4px 20px 4px;               /* 上6px，下20px，内容区与 header 分离 */
    display: flex;
    flex-direction: column;                  /* header 内元素从上到下排列 */
    gap: 16px;                               /* header 内各大部分之间垂直间隔 16px*/
    align-items: flex-start;                 /* header 内所有左对齐 */
}

/* 侧边栏内部的关闭按钮 (已改好) */
.menu-toggle-sidebar {
    background: none;               /* 移除默认背景，按钮透明 */
    border: none;                   /* 去掉默认边框 */
    color: var(--text-secondary);   /* 默认图标/文字颜色使用次级文本色（通常是灰色） */
    padding: 8px;                   /* 让按钮区域更大，增强点击范围 */
    cursor: pointer;                /* 鼠标悬停时显示手型 */
    border-radius: 40%;             /* 让按钮近似圆形 */
}

/* 按钮悬停高亮反馈 (已改好) */
.menu-toggle-sidebar:hover {
    background: var(--bg-hover);    /* 悬停时淡色突出按钮 */
    color: var(--text-primary); }   /* 悬停时使用主文本色，让图标文字更显眼 */

/* 新对话按钮 (已改好) */
.btn-new-chat {
    width: 100%;              /* 按钮宽度占满容器侧边栏 */
    padding: 12px 16px;       /* 内边距，上下12px，左右16px，增强可点击性 */
    background: #282a2c;      /* 深灰色背景 */
    border: none;             /* 去掉默认边框 */
    border-radius: 24px;      /* 圆角 24px，制造圆润"胶囊"效果 */
    color: #e3e3e3;           /* 文本颜色为浅灰 */
    display: flex;            /* flex让图标和文字横向排列 */
    align-items: center;      /* 垂直居中 */
    cursor: pointer;          /* 鼠标变为手型指针 */
    font-size: 18px;          /* 文本大小 */
    font-weight: 700;         /* 文本稍微加粗 */
    transition: all 0.2s;     /* 所有可动画属性以0.2秒过渡，例如背景色、颜色等 */
}

/* 悬停按钮时的样式 */
.btn-new-chat:hover {
    background: #37393b;      /* 稍亮一些，形成反馈 */
    color: white;             /* 文本颜色变纯白 */
}

/* 侧边栏内容区域（滚动区） */
.sidebar-content {
    flex: 1;                  /* 占据侧边栏的剩余全部可用空间，使内容区伸展填满高度 */
    overflow-y: auto;         /* 当内容超出高度时，垂直方向滚动 */
    padding: 10px 0;          /* 上下留白 10px，左右无 padding 交由内部组件控制 */
}

/* 历史记录分组标题Recent */
.history-label {
    font-size: 16px; font-weight: 700; /* 占满剩余空间，内容区可伸缩 */
    color: var(--text-primary);        /* 超出垂直方向时允许滚动 */
    margin: 16px 12px 10px 22px;       /* 上下留白 10px，让内容不贴边 */
}

.conversation-item {
    padding: 14px 20px;                /* 内边距：上下10px，左右16px */
    margin: 1px 0;                     /* 上下间距2px，使多个 item 不挤在一起 */
    border-radius: 20px;               /* 更大的圆角 */
    font-size: 18px;                   /* 文本大小 16px */
    color: var(--text-secondary);      /* 使用主题的次级文字颜色（偏淡） */
    cursor: pointer;
    white-space: nowrap;               /* 禁止换行，所有文字保持在一行 */
    overflow: hidden;                  /* 超出容器的文本部分隐藏 */
    text-overflow: ellipsis;           /* 文字太长时显示省略号 */
    transition: background 0.1s;       /* 背景色切换时做 0.1s 平滑过渡动画 */
}

.conversation-item:hover {
    background: var(--bg-hover);       /* 鼠标悬停时改变背景颜色（侧边栏的悬浮高亮色） */
    color: var(--text-primary);        /* 悬停时文本颜色变为主文本色更醒目 */
}

.sidebar-footer { padding-top: 20px; } /* 页脚与上方内容保持 20px 间距，不紧贴 */
.nav-item {
    width: 100%;
    background: none;
    border: none;
    color: var(--text-secondary);
    padding: 14px 20px;                /* 内边距 */
    text-align: left;
    display: flex;
    align-items: center;
    gap: 14px;                         /* 图标和文字之间留 14px 的间隔 */
    cursor: pointer; border-radius: 18px;
    font-size: 18px;                   /* 文本大小 14px，与侧栏一致 */
}
.nav-item:hover { background: var(--bg-hover); color: var(--text-primary); }


/* === 2. 顶部导航 (Gemini 风格) === */
.header {
    height: var(--header-height);           /* 顶部栏高度使用自定义变量，方便统一调整 */
    display: flex;                          /* 使用 flex 布局，使内容水平排列 */
    justify-content: space-between;         /* 左右两端对齐，中间自动拉开空间 */
    align-items: center;                    /* 垂直方向居中，使图标与文字对齐 */
    padding: 0 20px;                        /* 左右各留 20px 内边距 */
    background-color: var(--bg-app);
    position: relative; z-index: 50;        /* 设置层级，使顶部栏压住其他元素 */
}

/* 在 .header 样式之后添加这个 */

.header-right {
    display: flex;           /* 开启 Flex 布局，让子元素横向排列 */
    align-items: center;     /* 垂直居中对齐 */
    gap: 16px;              /* 元素之间的间距 */
    height: 100%;           /* 继承头部高度 */
}

.icon-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    padding: 8px;                           /* 扩大点击区域，保证易操作 */
    border-radius: 40%;
    cursor: pointer;
    transition: all 0.2s; }

.icon-btn:hover { /* 悬停 */
    color: var(--text-primary);
    background: var(--bg-hover);
}

/* 左上角小标题 AdGen */
.brand {
    font-weight: 700;          /* 中等字重，让品牌名称更醒目 */
    font-size: 24px;           /* 标题稍大字号 */
    margin-left: 16px;         /* 与左侧图标保持 12px 的空间 */
    color: #e3e3e3; }

.brand .badge {                /* AI小图标 */
    background: var(--accent-gradient);        /* 亮色渐变背景（用来做文字填充） */
    -webkit-background-clip: text;             /* 背景裁剪模式为文本形状 */
    color: transparent;                        /* 字体本身透明，只显示渐变颜色 */
    font-size: 11px;                           /* 小字号作为徽章 */
    border: 1px solid #db2777;                 /* 粉色边框，突出 badge */
    padding: 1px 6px;                          /* 内边距，让小徽章不显得拥挤 */
    border-radius: 12px;                       /* 胶囊状圆角 */
    margin-left: 6px;                          /* 徽章与品牌名之间留距离 */
    position: relative;
    top: -2px;                                 /* 徽章略微上移，让对齐更完美 */
}

/* 用户区域 - 只有头像 */
.user-profile-container {
    position: relative;
    display: flex;
    align-items: center; }
.user-avatar-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}
.user-avatar-btn img {
    width: 50px; height: 50px;       /* 头像大小固定为 36×36 像素 */
    border-radius: 50%;              /* 设置为圆形头像 */
    border: none;                    /* 去掉默认边框 */
    cursor: pointer;
    transition: transform 0.2s;
}
.user-avatar-btn:hover img { transform: scale(1.05); }       /* 悬停时头像放大 5%，增强交互感 */
/* ==================== 积分胶囊容器 (优化版) ==================== */

.credits-pill-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 38px;                        /* 高度稍微调小，更精致 */
    background: #1e1f20;                 /* 纯深色背景，去掉半透明杂质 */
    border: 1px solid #333;              /* 深灰边框 */
    border-radius: 19px;                 /* 胶囊圆角 */
    padding: 3px;                        /* 给内部元素留出边缘空隙 */
    margin-right: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2); /* 轻微阴影 */
    transition: all 0.3s ease;
    min-width: 140px;                    /* 保证最小宽度 */
}

/* 1. 左侧积分显示 (去掉白色背景，只留星星) */
.credits-display-section {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    height: 100%;
}

/* 修复星星图标：强制去掉背景，调整大小 */
.credits-display-section .credits-icon {
    width: 16px;                         /* 图标改小 */
    height: 16px;
    color: #fbbf24;                      /* 金色 */
    background: transparent !important;  /* 【关键】强制去掉那个丑陋的白色背景 */
    border-radius: 0;                    /* 去掉圆角 */
    box-shadow: none !important;         /* 去掉阴影 */
    filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.6)); /* 给星星加光晕 */
}

/* 积分数字 */
.credits-amount {
    color: #e3e3e3;
    font-weight: 700;
    font-size: 14px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    padding-top: 1px;                    /* 微调对齐 */
}

/* 2. 中间分隔线 (去掉或弱化) */
.credits-divider {
    display: none;                       /* 直接隐藏分隔线，用间距代替更自然 */
}

/* 3. 右侧充值按钮 (改成内嵌小胶囊) */
.recharge-button {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;                        /* 填满父容器高度 */
    padding: 0 14px;
    background: linear-gradient(135deg, #7c3aed 0%, #db2777 100%); /* 保持紫粉渐变 */
    border: none;
    border-radius: 16px;                 /* 内部圆角 */
    color: white;
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 6px rgba(124, 58, 237, 0.3); /* 按钮发光 */
}

.recharge-button span {
    position: relative;
    top: -0.5px; /* 文字微调垂直居中 */
}

/* 悬停效果 */
.recharge-button:hover {
    filter: brightness(1.1);
    transform: scale(1.02);
}

.recharge-button svg {
    display: none; /* 如果按钮里有图标觉得乱，可以隐藏，只留文字 */
}
/* 头像下拉菜单 */
.user-dropdown {
    position: absolute; top: 50px; right: 0; width: 260px;
    background: #1e1f20;
    border: none;
    border-radius: 12px;
    padding: 8px;
    display: none; flex-direction: column;
    box-shadow: 0 10px 40px rgba(0,0,0,0.6);
    z-index: 200;
}
.user-dropdown.show { display: flex; animation: fadeIn 0.1s ease-out; }
.dropdown-header { padding: 12px; display: flex; align-items: center; gap: 12px; }
.dropdown-avatar { width: 40px; height: 40px; background: var(--accent-gradient); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 16px; }
.dropdown-info .name { font-weight: 500; color: var(--text-primary); font-size: 14px; }
.dropdown-info .email { font-size: 12px; color: var(--text-secondary); }
.dropdown-divider { height: 1px; background: #333; margin: 8px 0; }
.dropdown-item {
    padding: 10px 12px;
    font-size: 14px;
    color: var(--text-primary);
    text-decoration: none;
    border-radius: 8px;
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.dropdown-item:hover { background: var(--bg-hover); }
.dropdown-item.logout { color: #ff8b8b; }
.dropdown-item svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
}


/* === 3. 工作区布局 === */
.app-container { /* app 主容器 */
    flex: 1;                         /* 占满剩余空间 */
    display: flex;
    flex-direction: column;          /* 子元素从上到下排列 */
    position: relative;              /* 允许子元素使用 absolute 定位 */
    background: var(--bg-panel); }
.workspace { /* 工作区（容纳聊天等） */
    flex: 1;                         /* 占满 app-container 剩余空间 */
    display: flex;
    overflow: hidden;                /* 隐藏溢出内容（避免滚动条） */
    position: relative;              /* 用于子元素 absolute 定位 */
}

.chat-panel { /* 聊天主面板 */
    width: 100%;                     /* 占满宽度 */
    height: 100%;                    /* 占满高度 */
    display: flex;
    flex-direction: column;          /* 垂直布局：消息区在上，输入框在下 */
    position: relative;
    background: var(--bg-panel);
}

.messages-container { /* 可滚动的消息总区域 */
    flex: 1; overflow-y: auto;
    padding: 20px;
    display: flex; flex-direction: column;
}
.messages-list { /* 实际消息列表容器 */
    width: 100%;                     /* 占满父容器宽度 */
    max-width: 800px;                /* 最大宽度 800px（类似 ChatGPT） */
    margin: 0 auto;                  /* 水平居中 */
    display: flex;
    flex-direction: column;          /* 竖向排列每条消息 */
}

/* ============================================================================
   修复与优化：Gemini 风格视频卡片组件
   ============================================================================ */

/* 1. 进度容器：重构为纯布局容器 (只负责位置和显隐，不负责视觉样式) */
.progress-container {
    width: 100%;
    max-width: 800px;           /* 与聊天气泡宽度对齐 */
    margin: 20px auto;          /* 居中 */
    display: none;              /* 默认隐藏，由 JS 控制显示 */
    animation: slideUpFade 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    /* 移除所有旧背景、边框和阴影 */
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}

/* 2. Gemini 风格卡片主体 (视觉核心) */
.gemini-video-card {
    background-color: #1e1f20;  /* 深灰底色，类似 Gemini */
    border: 1px solid #333;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
}

.gemini-video-card:hover {
    border-color: #555;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4); /* 悬浮时的深邃阴影 */
}

/* 3. 视觉区域 (16:9 比例) - 用于放视频或加载动画 */
.card-visual-area {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* 确保圆角不被内部内容撑破 */
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

/* 4. 生成中的占位动画背景 */
.generating-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1a1b1e 0%, #2a2b2e 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
}

/* 呼吸灯圆圈动画 */
.pulse-circle {
    width: 60px;
    height: 60px;
    background: rgba(124, 58, 237, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pulse-glow 2s infinite;
    margin-bottom: 16px;
}
.pulse-circle svg {
    color: var(--accent-primary);
    width: 30px;
    height: 30px;
    animation: spin 3s linear infinite;
}

@keyframes pulse-glow {
    0% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.4); }
    70% { box-shadow: 0 0 0 20px rgba(124, 58, 237, 0); }
    100% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0); }
}

/* 5. 底部状态栏 */
.card-status-bar {
    padding: 12px 16px;
    background: #1e1f20;
    border-top: 1px solid #333;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.status-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.status-text {
    font-size: 14px;
    font-weight: 500;
    color: #e3e3e3;
    display: flex;
    align-items: center;
    gap: 8px;
}

.status-subtext {
    font-size: 12px;
    color: #888;
}

/* 卡片内部的细长进度条 */
.card-progress-track {
    width: 100%;
    height: 4px;
    background: #333;
    border-radius: 2px;
    overflow: hidden;
    margin-top: 6px;
}

.card-progress-fill {
    height: 100%;
    background: var(--accent-gradient);
    border-radius: 2px;
    transition: width 0.3s ease;
}

/* 6. 右上角悬浮操作区 (新的叉号/展开按钮) */
.overlay-actions {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10;
    display: flex;
    gap: 8px;
}

.card-icon-btn {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.card-icon-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

/* 最终视频播放器样式 */
.final-video-player {
    width: 100%;
    height: 100%;
    object-fit: contain;
    outline: none;
}

/* 2. 关键逻辑：分屏时的显示控制 */
/* 当 app-container 拥有 .split-view 类时 */

/* (1) 强制隐藏主界面的进度条 */
.app-container.split-view .progress-container {
    display: none !important;
}

/* (2) 强制隐藏主界面的欢迎语 (防止重叠) */
.app-container.split-view .welcome-screen {
    display: none !important;
}

/* (3) 确保右侧面板显示 */
.app-container.split-view .preview-panel {
    display: flex !important;
}

/* (4) 确保左侧聊天面板变窄 */
.app-container.split-view .chat-panel {
    width: 45%;         /* 稍微宽一点，防止太窄 */
    min-width: 380px;
}

/* 动画定义 */
@keyframes slideUpFade {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* === 欢迎界面 === */
.welcome-screen {
    margin-top: 10vh;            /* 顶部留白 10% 视口高度 */
    text-align: center;          /* 内部文字水平居中 */
    transition: opacity 0.3s;    /* 渐隐渐显动画过渡效果 */
    display: flex;
    flex-direction: column;
    align-items: center;
}
.logo-glow { /* logo图样 */
    width: 100px; height: 100px;   /* 外框 72×72 像素 */
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.1), rgba(219, 39, 119, 0.1));
    border-radius: 30px;         /* 圆角 30px，使背景柔和 */
    margin-bottom: 32px;         /* 下方间距 32px，与标题分开 */
    display: flex;
    align-items: center;
    justify-content: center;     /* 内部元素水平垂直居中 */
    color: #d8b4fe;
    box-shadow: 0 0 50px rgba(124, 58, 237, 0.15);  /* 外发光效果，使 logo 有光晕 */
}

.logo-glow svg { width: 60px; height: 60px; }       /* svg 图标大小 40×40 像素 */

/* 字体放大 */
.welcome-screen h1 {
    font-size: 50px;             /* 有什么我可以帮你的吗？ */
    font-weight: 700;
    color: #e3e3e3;
    margin-bottom: 40px;         /* 下方间距，分隔 logo 和问题提示 */
    letter-spacing: 1px;         /* 字母间距略微收紧，使标题更紧凑 */
}

/* 建议胶囊 (Chips) */
.suggestion-cards {
    display: flex;
    gap: 12px;                /* 每个胶囊之间留 12px 间距 */
    flex-wrap: wrap;          /* 多行显示，超出一行自动换行 */
    justify-content: center;  /* 所有胶囊居中显示 */
    max-width: 700px;         /* 最大宽度 700px */
}

.suggestion-chip {
    background: #1e1f20;      /* 胶囊背景色，深色面板风格 */
    border: 1px solid #333;   /* 边框为深灰色，凸显轮廓 */
    color: var(--text-secondary);
    padding: 16px 20px;       /* 内边距上下 10px，左右 20px，保证触控舒适 */
    border-radius: 30px;      /* 圆角 20px，呈现胶囊/圆片风格 */
    font-size: 16px;          /* 文本大小 14px */
    cursor: pointer;
    transition: all 0.2s ease;
}
.suggestion-chip:hover {
    background: #2a2b2d;
    border-color: #7c3aed;                     /* 紫色边框，与主题紫光一致 */
    color: var(--text-primary);
    transform: translateY(-4px);               /* 胶囊上浮效果 */
    box-shadow: 0 4px 12px rgb(159, 119, 246); /* 悬停时边框发紫光 */
}


/* === 4. 输入区域 (高级光晕版) === */
.input-section-wrapper {
    width: 100%;
    padding: 20px;                /* 四周 20px 的内边距，防止贴边 */
    display: flex;
    flex-direction: column;
    align-items: center;
    background: transparent;      /* 去掉渐变，更干净 */
}

.input-section {
    width: 100%;
    max-width: 900px;              /* 限制最大宽度为 800px，防止在大屏上输入框过长，保持美观 */
    background: var(--bg-input);
    border-radius: 50px;           /* 更大的圆角 */
    padding: 14px 30px 30px 30px;  /* 内边距：上10px 右16px 下10px 左20px，左侧多一点是为了视觉平衡 */
    display: flex;
    flex-direction: column;
    gap: 12px;                     /* 内部元素之间的间距固定为 8px */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);   /* 设置所有属性变化的过渡动画 */
    position: relative;
    border: 1px solid transparent; /* 预先设置 1px 的透明边框，防止后面 focus 改变边框颜色时出现 1px 的布局跳动 */
}

/* 关键：高级光晕效果 */
.input-section:focus-within {
    background: #1e1f20;    /* 激活时背景色稍微加深，增加层次感 */
    border-color: var(--accent-primary); /* 将原本透明的边框变为主题色（紫色）*/
    box-shadow: 0 0 20px rgba(124, 58, 237, 0.25);
}

/* 上传预览图 */
.uploaded-files-area {
    display: flex;
    gap: 10px;              /* 子元素（即缩略图）间距为 10px */
    flex-wrap: wrap;        /* 如果上传了很多图片，允许换行 */
}

/* 图片预览容器 - 横向排列 */
#uploadedImages {
    display: flex;
    flex-direction: row;    /* 横向排列 */
    gap: 12px;              /* 图片之间的间距 */
    flex-wrap: wrap;        /* 如果图片太多，允许换行 */
    align-items: flex-start; /* 顶部对齐 */
}

/* 拖拽上传时的视觉反馈 */
.input-section.drag-over {
    background-color: rgba(124, 58, 237, 0.1) !important;
    border-color: var(--accent-primary) !important;
    transition: background-color 0.2s, border-color 0.2s;
}
.file-thumbnail {
    position: relative;
    width: 120px;            /* 图片固定宽度 */
    height: 120px;           /* 图片固定高度 */
    border-radius: 8px;      /* 图片 8px 的圆角 */
    overflow: hidden;        /* 隐藏图片直角溢出 */
    border: 1px solid #444;  /* 添加 1px 深灰色边框 */
}
.file-thumbnail img { /* 缩略图内的图片标签 */
    width: 100%;             /* 宽度撑满容器 */
    height: 100%;            /* 高度撑满容器 */
    object-fit: cover;
}

.file-remove-btn { /* 删除按钮（实际上是一个覆盖层） */
    position: absolute;            /* 绝对定位，浮在图片上方 */
    top: 0; right: 0; width: 100%; height: 100%; /* 组合让这个按钮铺满整个缩略图区域 */
    background: rgba(0,0,0,0.5);   /* 遮罩层背景色为半透明黑色 */
    opacity: 0;                    /* 默认透明度为 0 */
    transition: opacity 0.2s;
    display: flex; align-items: center; justify-content: center;
    color: white;                  /* 白色× */
    cursor: pointer;
}
.file-thumbnail:hover .file-remove-btn { opacity: 1; } /* 悬停时，透明度改为 1 */

/* 图片预览样式（JavaScript中使用的类名）- 修复大小问题 */
.image-preview {
    position: relative;
    width: 80px;             /* 图片固定宽度 80px */
    height: 80px;            /* 图片固定高度 80px */
    border-radius: 8px;      /* 圆角 8px */
    overflow: hidden;        /* 隐藏溢出部分 */
    border: 1px solid #444;  /* 深灰色边框 */
    flex-shrink: 0;          /* 防止被压缩 */
}

.image-preview img {
    width: 100%;             /* 宽度撑满容器 */
    height: 100%;            /* 高度撑满容器 */
    object-fit: cover;       /* 保持比例裁剪 */
    display: block;          /* 移除图片底部间隙 */
}

.image-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.image-preview:hover .image-remove {
    opacity: 1;
}

.image-remove:hover {
    background: rgba(255, 50, 50, 0.9);
    border-color: rgba(255, 50, 50, 0.5);
}

/* 控件栏 */
.smart-controls {
    display: flex;
    justify-content: space-between;  /* 左侧按钮靠左，右侧靠右，中间空白 */
    align-items: center;
    margin-bottom: 6px;              /* 底部与下方的输入框留出 6px 的间距 */
}
.control-group-left {
    display: flex;
    align-items: center;
    gap: 24px;                       /* 图片按钮与时长、比例按钮间距更大一些 */
}

.upload-img-btn { /* 上传图片的圆形按钮 */
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-primary); cursor: pointer; background: #2c2e30; border: none;
    transition: background 0.2s;
}

.upload-img-btn:hover { background: #3c3f42; } /* 上传按钮的悬停交互 */

.divider-vertical { width: 1px; height: 16px; background: #444; }/* 垂直分割线 (左侧上传按钮和右侧时长选项) */

/* 通用下拉选择样式（时长 / 比例） */
.dropdown-container {
    position: relative;
}

.dropdown-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid #444;
    background: transparent;
    color: var(--text-secondary);
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s;
}

.dropdown-button:hover {
    background: rgba(255,255,255,0.05);
    color: #fff;
}

.dropdown-button svg {
    transition: transform 0.15s ease;
}

.dropdown-button.open svg {
    transform: rotate(180deg);
}

.dropdown-menu { /* 上拉框形状 */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    min-width: 120px;
    padding: 5px;
    border-radius: 14px;
    background: #1e1f20;
    border: 1px solid #333; /* 加 1px 宽的深灰色实线边框 */
    box-shadow: 0 10px 30px rgba(0,0,0,0.6);
    z-index: 40;
    display: none;
}

/* 上拉效果：出现在按钮上方 */
.dropdown-menu-up {
    bottom: 100%; /* 紧贴按钮上方，消除中间空隙，便于鼠标移动 */
}

.dropdown-menu.show {
    display: block;
}

/* 悬浮在上拉框本身时也保持显示，避免从按钮移入菜单时闪烁 */
.dropdown-menu:hover {
    display: block;
}

/* 悬浮在按钮区域上方时自动显示上拉框，而无需点击 */
.dropdown-container:hover .dropdown-menu {
    display: block;
}

/* 悬浮时下拉箭头方向同步变化 */
.dropdown-container:hover .dropdown-button svg {
    transform: rotate(180deg);
}

.dropdown-option {
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 14px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.dropdown-option:hover {
    background: var(--bg-hover);
    color: #fff;
}

.dropdown-option-custom {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.custom-input-wrapper {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #131314;
    border-radius: 8px;
    padding: 6px 8px;
}

.custom-input-wrapper input {
    width: 70px;
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-size: 13px;
}

/* 自定义时长输入：隐藏浏览器默认的上下小箭头按钮，使样式更简洁 */
.custom-input-wrapper input[type="number"]::-webkit-outer-spin-button,
.custom-input-wrapper input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.custom-input-wrapper input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.custom-input-wrapper .unit {
    font-size: 13px;
    color: var(--text-secondary);
}

/* 输入框本体 */
.input-box-container {
    display: flex;
    align-items: flex-end; /* 底部对齐。当输入多行文字导致输入框变高时，右侧的发送按钮始终固定在底部 */
    gap: 12px;             /* 输入框和发送按钮间距 */
    margin-top: 0;       /* 顶部留出 4px，与上方的控件栏间距 */
}

#messageInput {
    flex: 1;               /*输入框自动填满除了发送按钮以外的所有水平空间 */
    background: transparent; border: none; color: white;
    resize: none;
    max-height: 150px;     /* 限制最大高度。如果输入过多，内部有滚动条 */
    padding: 10px 0;       /* 上下 10px 内边距，左右为 0 */
    outline: none;
    font-size: 20px;       /* 字号 16px  */
    line-height: 1.5;      /* 文本段间距 1.5倍行高 */
}

#messageInput::placeholder { color: #908e8e; } /* "请输入..." 这种提示文字设为暗灰色 */

/* 发送按钮 (默认/禁用) */
.send-btn {
    width: 36px; height: 36px; /* 固定宽度、高度 */
    background: transparent;
    border-radius: 50%; border: none; color: #555; /* 深灰表示不可用 */
    display: flex; align-items: center; justify-content: center; cursor: not-allowed; /* 鼠标放上去显示"禁止"符号 */
    transition: all 0.2s;
}

.send-btn:not(:disabled) {
    /* 核心修复：强制使用主题的紫粉色渐变背景，覆盖掉可能的白色背景 */
    background: var(--accent-gradient) !important;
    /* 让按钮自带柔和的紫色光晕，增加立体感 */
    box-shadow: 0 4px 15px rgba(124, 58, 237, 0.5);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* 弹性过渡动画 */
    border: 1px solid rgba(255, 255, 255, 0.1); /* 加一个极细的亮边框提升质感 */

    /* 确保内部元素水平垂直居中 */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px; /* 如果内容较多，稍微给点内边距 */
    /* 如果是纯数字显示，取消固定宽高，改为自适应，保持圆形或胶囊形 */
    width: auto;
    height: 36px;
    min-width: 36px; /* 保证至少是个圆 */
    border-radius: 18px; /* 半径为高度的一半，确保是圆角胶囊 */
}

/* 2. 激活状态下的悬停交互效果 */
.send-btn:not(:disabled):hover {
    transform: translateY(-2px) scale(1.05); /* 略微上浮并放大 */
    box-shadow: 0 8px 20px rgba(124, 58, 237, 0.7); /* 光晕增强，更有活力 */
    filter: brightness(1.1); /* 整体提亮 */
}

/* 3. 激活状态下，点击时的效果 */
.send-btn:not(:disabled):active {
    transform: translateY(0) scale(0.95); /* 按下时回弹缩小 */
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.4);
}

/* =================================================================
   专门针对按钮内部 "星星 + 数字" 的样式优化
   ================================================================= */

/* 修复内部的星星图标 (假设是个 svg 或用样式控制的元素) */
.send-btn:not(:disabled) .credits-icon, /* 匹配可能的类名 */
.send-btn:not(:disabled) svg {
    width: 16px;
    height: 16px;
    color: #fbbf24 !important; /* 强制星星为金色 */
    fill: currentColor;        /* 如果是SVG，填充当前颜色 */
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3)); /* 给星星加一点点投影，更有层次 */
    margin-right: 4px;         /* 星星和数字之间拉开点距离 */
}

/* 修复内部的数字文本 */
.send-btn:not(:disabled) span, /* 匹配 span 包裹的数字 */
.send-btn:not(:disabled) {     /* 匹配直接位于按钮内的文本 */
    color: white !important;   /* 核心修复：数字必须是白色，才能在深色渐变上看不清楚 */
    font-weight: 700;          /* 字体加粗 */
    font-size: 15px;           /* 字号微调 */
    text-shadow: 0 1px 2px rgba(0,0,0,0.2); /* 文字轻微投影，增加可读性 */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
/* 底部免责声明 */
.footer-info {
    font-size: 18px;        /* 字号 */
    color: #928e8e;
    margin-top: 30px;       /* 与上方的输入框间距 */
    text-align: center;
}


/* === 5. 消息气泡 (修正版) === */
.chat-message {
    display: flex;
    gap: 16px;              /* 头像和消息内容间距 */
    width: 100%;
    margin-bottom: 24px;    /* 消息之间的间距 */
    animation: fadeIn 0.3s cubic-bezier(0.25, 1, 0.5, 1); /* 更自然的淡入动画 */
}

/* 用户消息：反转方向 (头像在右，气泡在左) */
.chat-message.user { 
    flex-direction: row-reverse; 
}

/* 头像通用样式 */
.msg-avatar { 
    width: 36px;            /* 稍微调小一点，更精致 */
    height: 36px; 
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #333; 
    flex-shrink: 0;
    font-size: 16px; 
    margin-top: 4px;        /* 顶部微调，与第一行文字对齐 */
}

/* AI 头像特有样式 */
.ai .msg-avatar {
    background: var(--accent-gradient);
    color: white;
}

/* 消息内容容器 */
.msg-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 85%;         /* 限制气泡最大宽度 */
    font-size: 16px;        /* 调整回 16px，20px 太大了 */
    line-height: 1.6;
    color: var(--text-primary);
}

/* === AI 消息样式 (透明背景，直接显示文字) === */
.chat-message:not(.user) .msg-content {
    padding: 8px 0 0 0;
    background: transparent;
}

/* === 用户消息样式 (类似于 Claude/Gemini 的深色气泡) === */
.chat-message.user .msg-content {
    background: #2a2a2a;    /* 深灰色背景 */
    padding: 12px 16px;
    border-radius: 16px 4px 16px 16px; /* 右上角圆角变小，形成气泡指向感 */
    color: #ececec;
}

/* === 消息中的图片容器 === */
.msg-images {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 4px;
}

/* 如果是用户发送的图片，且有多张，让它们右对齐 */
.chat-message.user .msg-images {
    justify-content: flex-end;
}

/* 图片包装器 */
.msg-img-wrapper {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

/* 单张图片时的尺寸 */
.msg-img-wrapper:only-child {
    max-width: 280px;
    max-height: 280px;
}

/* 多张图片时的尺寸 */
.msg-img-wrapper:not(:only-child) {
    width: 140px;
    height: 140px;
}

/* 消息中的单张图片 */
.msg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    cursor: pointer;
    transition: transform 0.2s;
}

.msg-img:hover {
    transform: scale(1.05);
}

/* 消息文本处理 */
.msg-text {
    word-wrap: break-word;
    white-space: pre-wrap;
    font-family: inherit;
}

/* === 6. 分屏 & 预览面板 === */
.resizer {/* 分隔条 (拖拽) */
    width: 2px; background: #333;
    cursor: col-resize;                /* 鼠标放上去变成"左右箭头"图标 */
    display: none; z-index: 20; position: relative; /* 层级较高，确保不会被其他内容遮挡 */
    align-items: center; justify-content: center;
    transition: background 0.2s;
}

/* 分隔条交互体验 */
.resizer:hover {
    background: var(--accent-primary);
    width: 3px; /* 悬停时稍微变宽一点点 */
}

/* 右侧预览面板容器 */
.preview-panel {
    display: none; flex-direction: column; background: #0b0c0d;
    border-left: 1px solid #333; /* 左侧加一条分割线 */
    min-width: 300px; /* 限制最小宽度 */
}

/* 预览区顶部导航栏 */
.preview-navbar {
    height: 56px; /* 固定高度 */
    border-bottom: 1px solid #333; /* 底部边框，与内容区分隔 */
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 20px;/* 左右内边距 */
}

/* 预览标题 */
.preview-title {
    font-size: 20px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #e3e3e3;
}

.status-indicator { width: 8px; height: 8px; background: #3fb950; border-radius: 50%; box-shadow: 0 0 8px rgba(63, 185, 80, 0.4); } /* 状态指示点 (那个绿色的呼吸灯) */

/* 预览内容区 (放视频的地方) */
.preview-content { flex: 1; display: flex; align-items: center; justify-content: center; padding: 20px; }

/* 分屏激活 */
.split-view .chat-panel {
    width: 40%; /* 左侧缩小到 40% 宽度 */
    min-width: 350px; /* 保证左侧最少 350px，防止太窄无法输入 */
}
.split-view .resizer { display: flex; } /* 显示分隔条 */
.split-view .preview-panel { display: flex; flex: 1; } /* 右侧面板自动占满剩下的所有宽度 */
.split-view .welcome-screen { display: none; } /* 隐藏原本的"欢迎来到 AdGen" */
.split-view .input-section { max-width: 100%; border-radius: 20px; } /* 分屏时圆角稍微变小 */
/* 简单的淡入动画定义 */
@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

/* === 认证模态框样式 === */
.auth-modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease-out;
}

.auth-modal.hidden {
    display: none;
}

.auth-modal-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
}

.auth-modal-content {
    position: relative;
    background: rgba(30, 31, 32, 0.95);
    backdrop-filter: blur(40px) saturate(180%);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    width: 90%;
    max-width: 450px;
    max-height: 90vh;
    overflow-y: auto;
    animation: slideInModal 0.3s ease-out;
}

@keyframes slideInModal {
    from {
        opacity: 0;
        transform: translateY(-50px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.auth-modal-inner {
    padding: 40px;
}

.auth-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.2s;
    z-index: 10;
}

.auth-modal-close:hover {
    background: rgba(255, 255, 255, 0.2);
    color: var(--text-primary);
    transform: rotate(90deg);
}

/* Logo区域 */
.logo {
    text-align: center;
    margin-bottom: 35px;
}

.logo h1 {
    font-size: 1.4em;
    color: #e3e3e3;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

.logo p {
    color: var(--text-secondary);
    font-size: 0.95em;
    font-weight: 500;
}

/* 表单容器 */
.form-container {
    position: relative;
}

/* 表单组 */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.95em;
}

.form-group input {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #444746;
    border-radius: 10px;
    font-size: 1em;
    transition: all 0.3s ease;
    font-family: inherit;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
}

.form-group input:focus {
    outline: none;
    border-color: var(--accent-primary);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}

.form-group input::placeholder {
    color: #86868b;
}

.password-hint, .email-hint {
    font-size: 0.85em;
    color: var(--text-secondary);
    margin-top: 5px;
}

/* 主按钮 */
.form-container button[type="submit"] {
    width: 100%;
    padding: 14px;
    background: var(--accent-primary);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 1.05em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}

.form-container button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(124, 58, 237, 0.4);
    background: #8b4bef;
}

.form-container button[type="submit"]:active {
    transform: translateY(0);
}

.form-container button[type="submit"]:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* 切换表单链接区 */
.toggle-form {
    text-align: center;
    margin-top: 25px;
    color: var(--text-secondary);
    font-size: 0.95em;
}

.toggle-form a {
    color: var(--accent-primary);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.toggle-form a:hover {
    color: #a855f7;
    text-decoration: underline;
}

/* 消息框 */
.message {
    padding: 12px 15px;
    border-radius: 10px;
    margin-bottom: 20px;
    display: none;
    font-size: 0.95em;
}

.message.success {
    background: rgba(63, 185, 80, 0.15);
    color: #3fb950;
    border: 1px solid rgba(63, 185, 80, 0.3);
}

.message.error {
    background: rgba(248, 81, 73, 0.15);
    color: #f85149;
    border: 1px solid rgba(248, 81, 73, 0.3);
}

.message.show {
    display: block;
}

/* 表单标题 */
.form-title {
    font-size: 1.5em;
    color: var(--text-primary);
    margin-bottom: 25px;
    text-align: center;
    font-weight: 600;
}

/* 加载动画 */
.loading-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    border-top-color: transparent;
    animation: spin 0.8s linear infinite;
    margin-left: 8px;
    vertical-align: middle;
}

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

/* 隐藏类 */
.hidden {
    display: none !important;
}

/* 输入验证样式 */
.form-group input.valid {
    border-color: #3fb950;
}

.form-group input.invalid {
    border-color: #f85149;
}

.validation-message {
    font-size: 0.85em;
    color: #f85149;
    margin-top: 5px;
    display: none;
}

.validation-message.show {
    display: block;
}

/* 验证码输入组 */
.verification-group {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.verification-group input {
    flex: 1;
}

.verification-group .send-code-btn {
    width: auto;
    padding: 12px 20px;
    white-space: nowrap;
    font-size: 0.9em;
    flex-shrink: 0;
    margin-top: 0;
    background: var(--accent-primary);
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s;
}

.verification-group .send-code-btn:hover {
    background: #8b4bef;
    transform: translateY(-2px);
}

.verification-group .send-code-btn:disabled {
    background: #555;
    cursor: not-allowed;
    transform: none;
    opacity: 0.7;
}

/* 游客下拉菜单 */
.guest-dropdown {
    display: block;
}

.user-dropdown-content {
    display: block;
}

.user-dropdown-content.hidden {
    display: none;
}

/* ============================================================================
   视频历史模态框样式
   ============================================================================ */

/* 模态框遮罩层 */
.video-history-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease;
}

.video-history-modal.hidden {
    display: none;
}

.video-history-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
}

/* 模态框主体 */
.video-history-content {
    position: relative;
    background: var(--bg-sidebar);
    border-radius: 16px;
    width: 90%;
    max-width: 1000px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

/* 模态框头部 */
.video-history-header {
    padding: 24px 28px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.video-history-header h2 {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.video-history-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-history-close:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* 筛选栏 */
.video-history-filters {
    padding: 16px 28px;
    display: flex;
    gap: 12px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-panel);
}

.filter-btn {
    padding: 8px 16px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
    font-family: inherit;
}

.filter-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.filter-btn.active {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: white;
}

/* 历史记录列表 */
.video-history-list {
    flex: 1;
    overflow-y: auto;
    padding: 20px 28px;
}

.loading-spinner-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: var(--text-secondary);
}

.loading-spinner-container .spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-color);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-bottom: 16px;
}

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

/* 历史记录卡片 */
.history-card {
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
    transition: all 0.2s;
}

.history-card:hover {
    border-color: var(--accent-primary);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.1);
}

.history-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.history-card-title {
    flex: 1;
    margin-right: 16px;
}

.history-card-description {
    font-size: 15px;
    color: var(--text-primary);
    margin-bottom: 6px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.history-card-meta {
    display: flex;
    gap: 16px;
    font-size: 13px;
    color: var(--text-secondary);
    flex-wrap: wrap;
}

.history-card-meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.history-card-meta-item svg {
    width: 14px;
    height: 14px;
    opacity: 0.7;
}

.history-card-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

.history-card-status.completed {
    background: rgba(52, 211, 153, 0.15);
    color: #34d399;
}

.history-card-status.failed {
    background: rgba(248, 113, 113, 0.15);
    color: #f87171;
}

.history-card-status.processing {
    background: rgba(250, 204, 21, 0.15);
    color: #facc15;
}

.history-card-status.pending {
    background: rgba(156, 163, 175, 0.15);
    color: #9ca3af;
}

.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.status-dot.pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.history-card-actions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.history-card-btn {
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
}

.history-card-btn-primary {
    background: var(--accent-primary);
    color: white;
}

.history-card-btn-primary:hover {
    background: #8b4bef;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}

.history-card-btn-secondary {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.history-card-btn-secondary:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.history-card-btn svg {
    width: 16px;
    height: 16px;
}

/* 错误信息 */
.history-card-error {
    margin-top: 12px;
    padding: 12px;
    background: rgba(248, 113, 113, 0.1);
    border-left: 3px solid #f87171;
    border-radius: 6px;
    font-size: 13px;
    color: #f87171;
    line-height: 1.5;
}

/* 空状态 */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: var(--text-secondary);
}

.empty-state svg {
    width: 80px;
    height: 80px;
    margin-bottom: 24px;
    opacity: 0.3;
}

.empty-state h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.empty-state p {
    font-size: 14px;
    color: var(--text-secondary);
}

/* 分页控件 */
.video-history-pagination {
    padding: 20px 28px;
    border-top: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-panel);
}

.page-btn {
    padding: 8px 16px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 14px;
    font-family: inherit;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.page-btn:hover:not(:disabled) {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--accent-primary);
}

.page-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.page-btn svg {
    width: 16px;
    height: 16px;
}

.page-info {
    font-size: 14px;
    color: var(--text-secondary);
}

/* 动画 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}


/* ============================================================================
   右侧分屏预览面板专用样式 (Sidebar Layout)
   作用：确保无论视频比例如何(9:16/16:9)，都能在视口内完整显示，不溢出
   ============================================================================ */

/* 1. 右侧面板整体布局容器 */
.sidebar-layout {
    display: flex;
    flex-direction: column;
    height: 100%;           /* 占满右侧面板所有高度 */
    width: 100%;
    overflow: hidden;       /* 禁止出现滚动条 */
}

/* 2. 视频展示舞台 (黑色背景区域) */
.sidebar-visual-stage {
    flex: 1;                /* 【核心】自动占据除了底部按钮区以外的所有剩余空间 */
    background: #000;
    display: flex;
    align-items: center;    /* 垂直居中 */
    justify-content: center;/* 水平居中 */
    min-height: 0;          /* 【关键】Flex布局中，必须设为0防止内容撑破父容器高度 */
    padding: 20px;          /* 给视频四周留一点呼吸空间 */
    position: relative;
}

/* 3. 视频元素本身 */
.sidebar-visual-stage video {
    width: 100%;            /* 宽度最多100% */
    height: 100%;           /* 高度最多100% */
    object-fit: contain;    /* 【关键】保持比例缩放，确保完整显示在容器内，不裁剪 */
    max-height: 80vh;       /* 双重保险：限制最大高度为视口高度的80% */
    outline: none;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5); /* 给视频加点立体阴影 */
}

/* 4. 底部按钮操作区 */
.sidebar-actions {
    padding: 20px;
    background: var(--bg-panel);
    border-top: 1px solid #333;
    flex-shrink: 0;         /* 防止空间不足时按钮被压扁 */
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 优化右侧按钮样式 */
.btn-download-large {
    display: flex; 
    align-items: center; 
    justify-content: center; 
    width: 100%; 
    background: #e3e3e3; 
    color: #000; 
    padding: 12px; 
    border-radius: 12px; 
    text-decoration: none; 
    font-weight: 600; 
    transition: transform 0.2s;
}
.btn-download-large:hover {
    background: #fff;
    transform: translateY(-2px);
}

.btn-new-task-large {
    width: 100%;
    background: #333;
    color: white;
    border: 1px solid #444;
    padding: 12px;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 500;
    transition: background 0.2s;
}
.btn-new-task-large:hover {
    background: #444;
}

/* ============================================================================
   背景选择网格样式（聊天界面）
   ============================================================================ */

.background-selection-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 12px;
    width: 100%;
    max-width: 600px;
}

.background-option {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 3px solid transparent;
    background: var(--bg-tertiary);
}

.background-option:hover {
    border-color: var(--accent-primary);
    transform: scale(1.02);
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.3);
}

.background-preview {
    width: 100%;
    height: auto;
    display: block;
    transition: opacity 0.3s ease;
}

.background-option:hover .background-preview {
    opacity: 0.85;
}

.background-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.background-option:hover .background-overlay {
    opacity: 1;
}

.background-overlay span {
    color: white;
    font-weight: 600;
    font-size: 16px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* 响应式设计：小屏幕上单列显示 */
@media (max-width: 600px) {
    .background-selection-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================================
   广告结果展示样式（下载按钮在图片右上角）
   ============================================================================ */

.ad-result-card {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    background: var(--bg-tertiary);
}

.ad-result-image-wrapper {
    position: relative;
    overflow: hidden;
}

.ad-result-image {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

.ad-result-card:hover .ad-result-image {
    transform: scale(1.05);
}

.ad-download-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
    opacity: 0;
    transform: scale(0.8);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.ad-result-image-wrapper:hover .ad-download-btn {
    opacity: 1;
    transform: scale(1);
}

.ad-download-btn:hover {
    background: var(--accent-primary);
    box-shadow: 0 6px 20px rgba(124, 58, 237, 0.5);
    transform: scale(1.1);
}

/* 音效开关样式 */
.audio-toggle-container {
    position: relative;
}

.audio-toggle-btn {
    transition: all 0.3s ease;
}

.audio-toggle-btn.active {
    background: var(--accent-primary);
    color: white;
    border-color: var(--accent-primary);
}

.audio-toggle-btn.active:hover {
    background: #8b4bef;
    box-shadow: 0 0 12px rgba(124, 58, 237, 0.4);
}

/* 音效图标禁用状态 */
.audio-toggle-btn:not(.active) #audioWave1,
.audio-toggle-btn:not(.active) #audioWave2 {
    opacity: 0.3;
}

.ad-download-btn svg {
    display: block;
}