body{margin:0;font-family:'Microsoft YaHei',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:#f6f8fa;}
.layout{display:flex;height:100vh;min-height:0;}
.history-panel{
    width:20%;min-width:200px;max-width:300px;background:#f3f4f6;border-right:1px solid #d2d7e3;padding:0;display:flex;flex-direction:column;align-items:stretch;overflow-y:auto;max-height:100vh;
}
.history-actions{
    display:flex;flex-direction:column;gap:10px;padding:24px 18px 0 18px;
}
.logo-container {
    display: flex;
    align-items: center;
    /* 新增：固定宽度，防止右侧变化影响居中 */
    min-width: 180px;
    margin-bottom: 13px;
}
.site-name {
font-size: 22px;
font-weight: bold;
color: black;
}
.side-btn{
    display:inline-block;background:#fff;border:1px solid #e6eaf2;border-radius:8px;
    color:black;font-weight:550;font-size:15px;padding:8px 0;text-align:center;text-decoration:none;margin-bottom:0;transition:background .18s;box-shadow:0 2px 8px rgba(37,99,235,.06);cursor:pointer;
}
.side-btn:hover{background:#f1f5ff;}
.history-title{
    font-size:15px;
    font-weight:600;
    color:#2f3a4f;
    margin:20px 0 5px 0;
    padding:0 18px;
}
.history-list{
    display:flex;
    flex-direction:column;
    gap:8px;
    padding: 10px 18px;
    overflow-y:auto;
    flex:1 1 0;        /* 占满剩余空间，把用户栏挂到底部 */
    min-height:0;      /* 防止 flex 子项溢出 */
}

/* ===== 底部用户栏 ===== */
.user-bar{
    display:flex;
    align-items:center;
    gap:10px;
    width:100%;
    padding:6px 18px;
    background:transparent;
    border:none;
    border-top:1px solid #d2d7e3;
    text-align:left;
    flex-shrink:0;
}
.user-bar-avatar{
    width:34px;
    height:34px;
    border-radius:50%;
    object-fit:cover;
    border:2px solid #d2d7e3;
    flex-shrink:0;
    cursor:pointer;
    transition:border-color .15s, opacity .15s;
}

.user-bar-name{
    font-size:14px;
    font-weight:600;
    color:#2f3a4f;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:160px;
}
.history-item{
    padding:10px 12px;
    background:#fff;
    border:1px solid #e2e8f0;
    border-radius:8px;
    font-size:14px;
    color:#334155;
    cursor:pointer;
    transition:all 0.2s;
    text-align:left;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-shrink: 0;            /* 禁止被 flex 父容器压缩高度 */
    min-height: 40px;          /* 保证最小点击区域 */
}
.history-item:hover{
    background:#f1f5f9;
    border-color:#cbd5e1;
    transform:translateX(2px);
    color:#0f172a;
}
.history-item:focus{outline:none;box-shadow:0 0 0 3px rgba(37,99,235,.08);}
.history-item.active{
    background:#dbeafe;
    border-color:#3b82f6;
    color:#1e40af;
}
.history-item.active .history-item-label{font-weight:700;}
.history-item-apostrophe{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:16px;
    height:16px;
    padding:4px;
    border-radius:6px;
    transition:background .12s, transform .08s;
    cursor:pointer;
    flex-shrink:0;
}
.history-item-apostrophe:hover{
    background:rgba(37,99,235,0.06);
    transform:translateY(-1px);
}
.history-item-apostrophe img.history-item-apostrophe-icon{
    width:16px;
    height:16px;
    display:block;
}
.history-item .history-item-text {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
}
.history-item-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1 1 auto;
    display: inline-block;
    vertical-align: middle;
}
.history-item .history-item-apostrophe {
    flex-shrink: 0;
    margin-left: 0px;
}
.history-item .history-item-icon {
    flex-shrink: 0;
    margin: 0px;
}
.new-chat-btn{
    display:inline-block;
    background:#2563eb;
    border:1px solid #2563eb;
    border-radius:8px;
    color:#fff;
    font-weight:600;
    font-size:15px;
    padding:10px 0;
    text-align:center;
    text-decoration:none;
    margin-bottom: 0px;
    transition:background .18s;
    box-shadow:0 2px 8px rgba(37,99,235,.2);
    cursor:pointer;
}
.new-chat-btn:hover{
    background:#1d4ed8;
}
.main-area{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    position:relative;
    height:100vh;
    min-height:0;
}
.chat-area{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:18px;
    background:#ffffff;
    /* 左右 padding 与 input-bubble-container 同基准（均以 main-area 50% 为轴，±450px）
       scrollbar-gutter:stable 保留滚动条占位，防止不同浏览器滚动条宽度导致右边界漂移 */
    padding: 24px max(24px, calc(50% - 450px)) 24px max(24px, calc(50% - 450px));
    overflow-y:auto;
    scrollbar-gutter: stable;   /* Chrome/Edge 统一占位，消除右边界差异 */
    min-height:0;
    height:100%;
    position:relative;
}
.main-welcome-text{
    position:absolute;
    top:340px;
    left:50%;
    transform:translateX(-50%);
    color:#000;
    font-size:56px;
    font-weight:800;
    line-height:1.2;
    pointer-events:none;
    z-index:2;
    white-space:nowrap;
    overflow:hidden;
}
.main-welcome-text.mask-reveal::after{
    content:"";
    position:absolute;
    inset:0;
    background:#ffffff;
    pointer-events:none;
    transform:translateX(0);
    opacity:1;
    z-index:3;
    animation:welcomeMaskSlideOut 0.6s cubic-bezier(.22,.61,.61,1) forwards;
}
@keyframes welcomeMaskSlideOut{
    0%{
    transform:translateX(0);
    opacity:1;
    }
    88%{
    opacity:1;
    }
    100%{
    transform:translateX(104%);
    opacity:0;
    }
}
.bubble{
    max-width:100%;
    width: 100%;
    /* background:#f1f5ff;
    border-radius:14px; */
    padding:2px 2px;
    /* box-shadow:0 8px 24px rgba(37,99,235,.08); */
    font-size:17px;
    line-height:1.8;
    color:#0f172a;
    margin:0;              /* 由 chat-area padding 统一控制边距，不再用 margin 对齐 */
    align-self:flex-end;
    /* white-space:pre-wrap; */
    word-break:break-word;
    animation:popIn .32s cubic-bezier(.42,1.7,.62,1.01);
}
@keyframes popIn{
    0%{transform:scale(.85);opacity:0;}
    100%{transform:scale(1);opacity:1;}
}

/* Bubble 内 Markdown 渲染样式 - 可自定义间距 */
.bubble p {
    margin-bottom: 1.2em;  /* 段落下间距 */
    margin-top: 0;
    line-height: 1.8;      /* 段落行高 */
}

.bubble h1, .bubble h2, .bubble h3, .bubble h4, .bubble h5, .bubble h6 {
    margin-top: 1.2em;     /* 标题上间距 */
    margin-bottom: 0.8em;  /* 标题下间距 */
    line-height: 1.4;      /* 标题行高 */
    font-weight: 600;
    color: #0f172a;
}

.bubble h1 { font-size: 1.6em; }
.bubble h2 { font-size: 1.4em; }
.bubble h3 { font-size: 1.2em; }
.bubble h4 { font-size: 1.1em; }

.bubble ul, .bubble ol {
    margin-top: 0.8em;     /* 列表上间距 */
    margin-bottom: 1.2em;  /* 列表下间距 */
    padding-left: 2em;
    line-height: 1.8;      /* 列表行高 */
}

.bubble li {
    margin-bottom: 0.5em;  /* 列表项间距 */
}

.bubble ul li {
    list-style-type: disc;
}

.bubble ol li {
    list-style-type: decimal;
}

.bubble code {
    background: #f5f5f5;
    padding: 0.2em 0.4em;
    border-radius: 3px;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.9em;
}

.bubble pre {
    background: #f5f5f5;
    padding: 1em;
    border-radius: 8px;
    overflow-x: auto;
    margin-top: 0.8em;     /* 代码块上间距 */
    margin-bottom: 1.2em;  /* 代码块下间距 */
    line-height: 1.6;      /* 代码块行高 */
}

.bubble pre code {
    background: none;
    padding: 0;
}

.bubble blockquote {
    border-left: 4px solid #2563eb;
    padding-left: 1em;
    margin-left: 0;
    margin-top: 0.8em;     /* 引用上间距 */
    margin-bottom: 1.2em;  /* 引用下间距 */
    color: #64748b;
    font-style: italic;
}

.bubble strong {
    font-weight: 600;
    color: #0f172a;
}

.bubble hr {
    border: none;
    border-top: 1px solid #e2e8f0;
    margin-top: 1.5em;     /* 分隔线上间距 */
    margin-bottom: 1.5em;  /* 分隔线下间距 */
}

.bubble a {
    color: #2563eb;
    text-decoration: none;
}

.bubble a:hover {
    text-decoration: underline;
}

/* ===== Bubble 内表格样式 ===== */
.bubble .table-wrapper {
    width: 100%;
    overflow-x: auto;          /* 宽表格横向滚动 */
    margin: 1em 0 1.4em;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.bubble table {
    border-collapse: collapse;
    width: 100%;
    min-width: 420px;
    font-size: 0.93em;
    line-height: 1.6;
}
.bubble th,
.bubble td {
    border: 1px solid #d1d5db;
    padding: 9px 14px;
    text-align: left;
    vertical-align: top;
    word-break: break-word;
}
.bubble thead tr {
    background: #eef2ff;
}
.bubble th {
    font-weight: 700;
    color: #1e3a8a;
    white-space: nowrap;
}
.bubble tbody tr:nth-child(even) {
    background: #f8fafc;
}
.bubble tbody tr:hover {
    background: #eff6ff;
}

/* ===== 思考气泡 ===== */
.reasoning-bubble-wrap {
    max-width: 100%;
    width: 100%;
    margin: 0;             /* 由 chat-area padding 统一控制边距 */
    align-self: flex-end;
}
.reasoning-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 14px;
    color: #64748b;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 6px 14px;
    user-select: none;
    transition: background .15s;
    margin-bottom: 0;
}
.reasoning-toggle:hover { background: #e2e8f0; }
.reasoning-toggle .toggle-arrow {
    display: inline-block;
    transition: transform .25s;
    font-size: 12px;
}
.reasoning-toggle.expanded .toggle-arrow { transform: rotate(90deg); }
.reasoning-body {
    display: none;
    margin-top: 8px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 14px 18px;
    font-size: 14px;
    line-height: 1.8;
    color: #475569;
    word-break: break-word;
    white-space: pre-wrap;
    max-height: 400px;
    overflow-y: auto;
}
.reasoning-body.show { display: block; }

.user-bubble{
    max-width:450px;
    width: auto;
    background:#F5F5F5;
    border-radius:14px;
    padding:18px 22px;
    /* box-shadow:0 8px 24px rgba(37,99,235,.08); */
    font-size:17px;
    line-height:1.8;
    color:#0f172a;
    margin:0;              /* 由 chat-area padding 统一控制边距 */
    align-self:flex-end;
    white-space:pre-wrap;
    word-break:break-word;
    animation:popIn .32s cubic-bezier(.42,1.7,.62,1.01);
}
@keyframes popIn{
    0%{transform:scale(.85);opacity:0;}
    100%{transform:scale(1);opacity:1;}
}


.input-bubble-mask {
/* position: absolute; */
left: 0; right: 0; bottom: 0;
height: 190px;
box-shadow: 0 -10px 20px rgba(255, 255, 255, 1);
background: #ffffff;
z-index: 99;
pointer-events: none;
display: flex;
justify-content: center;
align-items: flex-end;
}

.input-bubble-container {
position: absolute;
width: 900px;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 100;
/* width: min(720px, 90vw); */
pointer-events: auto;
}

.input-bubble{
    background:#fff;
    border-radius:24px;
    box-shadow:0 12px 48px rgba(15,23,42,.15), 0 0 0 1px rgba(15,23,42,.08);
    padding:20px 24px;
    backdrop-filter:blur(10px);
}

.mode-tabs{
    display:flex;
    gap:20px;
    align-items:center;
}

.mode-tab{
    padding:0 18px;
    height:36px;
    border:1.5px solid #e2e8f0;
    background:#fff;
    border-radius:8px;
    font-size:15px;
    font-weight:500;
    color:#64748b;
    cursor:pointer;
    transition:all .2s;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
    white-space:nowrap;
}

.mode-tab:hover{
    border-color:#2563eb;
    color:#2563eb;
}

/* Mac/Safari 对 disabled button 有系统级灰化；追问模式下 tab 已通过 display:none 隐藏
   对唯一可见的 active tab 保持正常外观，避免 Safari 将其渲染为近乎不可见 */
.mode-tab:disabled,
.mode-tab[disabled] {
    opacity: 1 !important;
    -webkit-text-fill-color: inherit;   /* Safari 额外重置文字颜色 */
    -webkit-opacity: 1;
    cursor: not-allowed;
}

.mode-tab.active{
    background:#F0F6FF;
    color:#5566FF;
    border-color:#2563eb;
}

/* ===== 大模式色彩主题 ===== */
/* hover：仍用 data-mode 匹配（hover 时 data-mode 稳定） */
/* 智能审题 → 蓝色 */
.mode-tab[data-mode="smart"]:hover,
.mode-tab[data-mode="ai"]:hover,
.mode-tab[data-mode="review"]:hover {
    border-color:#2563eb; color:#2563eb; background:#f0f6ff;
}
/* 段落功能 → 紫色 */
.mode-tab[data-mode="para"]:hover,
.mode-tab[data-mode="para-generate"]:hover,
.mode-tab[data-mode="para-polish"]:hover {
    border-color:#7c3aed; color:#7c3aed; background:#f5f0ff;
}
/* 素材功能 → 青绿色 */
.mode-tab[data-mode="material"]:hover,
.mode-tab[data-mode="material-search"]:hover,
.mode-tab[data-mode="material-customize"]:hover {
    border-color:#0d9488; color:#0d9488; background:#f0fdfa;
}
/* 作文批改 → 琥珀色 */
.mode-tab[data-mode="composition-review"]:hover {
    border-color:#d97706; color:#d97706; background:#fffbeb;
}
/* 语言润色 → 玫瑰色 */
.mode-tab[data-mode="language-polish"]:hover {
    border-color:#db2777; color:#db2777; background:#fff1f4;
}

/* active：用 data-active-group（由 JS 明确写入，不受 disabled/动态属性影响） */
.mode-tab[data-active-group="smart"].active {
    background:#eef4ff; color:#2563eb; border-color:#2563eb;
}
.mode-tab[data-active-group="para"].active {
    background:#f5f0ff; color:#7c3aed; border-color:#7c3aed;
}
.mode-tab[data-active-group="material"].active {
    background:#f0fdfa; color:#0d9488; border-color:#0d9488;
}
.mode-tab[data-active-group="comp"].active {
    background:#fffbeb; color:#d97706; border-color:#d97706;
}
.mode-tab[data-active-group="lang"].active {
    background:#fff1f4; color:#db2777; border-color:#db2777;
}

.input-area{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-bottom:12px;
}

.input-row{
    display:flex;
    gap:12px;
    align-items:flex-start;
}

.input-field{
    display:none;
    flex:1;
}

.input-field.show{
    display:flex;
    flex-direction:column;
}

.input-label{
    font-size:13px;
    color:black;
    margin-bottom:6px;
    font-weight:500;
}

.input-box{
    width:100%;
    min-height:46px;
    max-height:120px;
    padding:12px 16px;
    border:1px solid #e2e8f0;
    border-radius:12px;
    font-size:15px;
    font-family:inherit;
    color:#0f172a;
    background:#fafbfc;
    resize:none;
    transition:all .2s;
    line-height:1.5;
}

.input-box:focus{
    outline:none;
    border-color:#2563eb;
    background:#fff;
    box-shadow:0 0 0 3px rgba(37,99,235,.1);
}

.input-box::placeholder{
    color:#94a3b8;
}

.submit-row{
    display:flex;
    align-items:center;
    flex-wrap:nowrap;
    gap:8px;
    margin-top:8px;
}

/* mode-tabs 可自由伸缩，submit-btn 紧靠右侧 */
.submit-row .mode-tabs{
    flex:1 1 0;
    min-width:0;
    flex-wrap:wrap;
    gap:14px;
}

.submit-btn{
    padding:0;
    margin-top: 0px;
    width:40px;
    height:40px;
    background:#e2e8f0;
    border:none;
    border-radius:50%;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
    flex-shrink:0;
    overflow:hidden;
    transition:none;
}

.submit-btn img{
    width:40px;
    height:40px;
    display:block;
    flex-shrink:0;
}

/* 生成中：小图标露出灰色圆形背景 */
.submit-btn.generating img{
    width:22px;
    height:22px;
}

.submit-btn:disabled{
    opacity:.7;
    cursor:not-allowed;
}

/* 更多按钮弹框 */
.more-modal{
    position:fixed;
    top:0;left:0;right:0;bottom:0;
    background:rgba(0,0,0,0.4);
    display:none;
    z-index:9999;
}
/* 全局提示（toast） */
#toast{
    position:fixed;
    left:50%;
    top:36px;
    bottom:auto;
    transform:translateX(-50%);
    background:rgba(0,0,0,0.8);
    color:#fff;
    padding:10px 16px;
    border-radius:8px;
    font-size:14px;
    z-index:10000;
    opacity:0;
    transition:opacity .2s, transform .2s;
    pointer-events:none;
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(6px);pointer-events:auto}
.more-modal.show{
    display:flex;
}
.more-modal-content{
    position:fixed;
    background:#fff;
    border-radius:12px;
    padding:24px;
    min-width:280px;
    box-shadow:0 12px 48px rgba(0,0,0,0.2);
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
}
.more-modal-title{
    font-size:16px;
    font-weight:600;
    color:#0f172a;
    margin-bottom:16px;
}
.more-option{
    padding: 11px 16px;
    border-radius: 10px;
    border: 1px solid #e8edf5;
    background: #f8fafc;
    font-size: 15px;
    font-weight: 500;
    color: #334155;
    cursor: pointer;
    margin-bottom: 8px;
    transition: all 0.18s ease;
    display: flex;
    align-items: center;
}
.more-option::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 16px;
    border-radius: 2px;
    background: #cbd5e1; /* 默认灰色左侧竖条 */
    margin-right: 10px;
    flex-shrink: 0;
    transition: background 0.18s;
}
.more-option:hover {
    transform: translateX(3px);
}
.more-option:last-child { margin-bottom: 0; }

/* 大模式着色（hover 时左侧竖条变色） */
.smart-option:hover   { background: #eef4ff; color: #2563eb; border-color: #bfdbfe; }
.smart-option:hover::before   { background: #2563eb; }

.para-option:hover    { background: #f5f0ff; color: #7c3aed; border-color: #ddd6fe; }
.para-option:hover::before    { background: #7c3aed; }

.material-option:hover{ background: #f0fdfa; color: #0d9488; border-color: #99f6e4; }
.material-option:hover::before{ background: #0d9488; }

/* ===== history-item 按大模式分组着色 ===== */
/* 智能审题 → 蓝色 */
.history-item[data-session-type="ai"]:hover,
.history-item[data-session-type="review"]:hover {
    background:#eef4ff; border-color:#93c5fd; color:#1d4ed8;
}
.history-item[data-session-type="ai"].active,
.history-item[data-session-type="review"].active {
    background:#dbeafe; border-color:#3b82f6; color:#1e40af;
}
/* 段落功能 → 紫色 */
.history-item[data-session-type="para-generate"]:hover,
.history-item[data-session-type="para-polish"]:hover {
    background:#f5f0ff; border-color:#d4b8fe; color:#6d28d9;
}
.history-item[data-session-type="para-generate"].active,
.history-item[data-session-type="para-polish"].active {
    background:#ede9fe; border-color:#7c3aed; color:#5b21b6;
}
/* 素材功能 → 青绿色 */
.history-item[data-session-type="material-search"]:hover,
.history-item[data-session-type="material-customize"]:hover {
    background:#f0fdfa; border-color:#5eead4; color:#0f766e;
}
.history-item[data-session-type="material-search"].active,
.history-item[data-session-type="material-customize"].active {
    background:#ccfbf1; border-color:#0d9488; color:#0f766e;
}
/* 作文批改 → 琥珀色 */
.history-item[data-session-type="composition-review"]:hover {
    background:#fffbeb; border-color:#fcd34d; color:#b45309;
}
.history-item[data-session-type="composition-review"].active {
    background:#fef3c7; border-color:#d97706; color:#92400e;
}
/* 语言润色 → 玫瑰色 */
.history-item[data-session-type="language-polish"]:hover {
    background:#fff1f4; border-color:#fca5c3; color:#be185d;
}
.history-item[data-session-type="language-polish"].active {
    background:#fce7f3; border-color:#db2777; color:#9d174d;
}
.close-icon{
    display:none;
    align-items:center;
    justify-content:center;
    width:20px;
    height:20px;
    margin-left:5px;
    cursor:pointer;
    color:#94a3b8;
    font-size:16px;
    transition:color 0.2s;
}
.close-icon:hover{
    color:#ef4444;
}
.mode-tab.has-close{
    display:inline-flex;
    align-items:center;
}
.mode-tab.has-close .close-icon{
    display:inline-flex;
}

.requirement-with-btn {
    position: relative;
    flex: 1;              /* 让整个包裹区域撑满 input-field */
    display: flex;
}

.requirement-with-btn .input-box {
    flex: 1;
    padding-right: 42px; /* 为右上角的图标按钮留出空间 */
}

/* ===== picker-btn：绝对定位嵌入 textarea 右上角 ===== */
.picker-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: none;
    border: none;
    padding: 4px;
    margin: 0;
    cursor: pointer;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.18s, transform 0.15s;
    z-index: 1;
    opacity: 0.55;       /* 默认半透明，降低存在感 */
}

.picker-btn img {
    width: 18px;
    height: 18px;
    display: block;
}

.picker-btn:hover {
    background: rgba(37, 99, 235, 0.1);
    opacity: 1;
    transform: scale(1.1);
}

.prompt-subtitle{
    font-size:13px;
    color:#64748b;
    margin-bottom:12px;
}
.prompt-options{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:18px;
}
.prompt-option{
    padding:10px 14px;
    border:1px solid #cfe0ff;
    border-radius:14px;
    background:#eef3ff;
    color:#1b3a57;
    cursor:pointer;
    font-size:14px;
}
.prompt-option.selected{
    background:#d9ebff;
    border-color:#8ec3ff;
    color:#0b3b6b;
}
.prompt-actions{
    display:flex;
    justify-content:flex-end;
    gap:10px;
}
.prompt-action-btn{
    border: none;
    border-radius: 8px;
    padding: 9px 22px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.18s ease;
}
.prompt-cancel-btn{
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}
.prompt-cancel-btn:hover{
    background: #e2e8f0;
    border-color: #cbd5e1;
}
.prompt-next-btn{
    background:#2563eb;
    color:#fff;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.30);
}
.prompt-next-btn:hover{
    background:#1d4ed8;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.42);
    transform: translateY(-1px);
}
.prompt-next-btn:active{
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(37, 99, 235, 0.25);
}

/* ===== 图片上传按钮 ===== */
.needle-btn{
    display:inline-flex;align-items:center;justify-content:center;
    padding:0 10px;height:36px;
    background:#fff;border:1.5px solid #e2e8f0;border-radius:8px;
    cursor:pointer;transition:all .2s;flex-shrink:0;
}
.needle-btn:hover{border-color:#2563eb;background:#f0f6ff;}
.needle-btn img{width:18px;height:18px;display:block;}

/* ===== 深度思考切换按钮 ===== */
.deep-think-btn{
    display:inline-flex;align-items:center;gap:5px;
    padding:0 12px;height:36px;
    background:#fff;border:1.5px solid #e2e8f0;border-radius:8px;
    font-size:14px;font-weight:500;color:#64748b;
    cursor:pointer;transition:all .2s;flex-shrink:0;white-space:nowrap;
}
.deep-think-btn img{width:16px;height:16px;display:block;flex-shrink:0;}
.deep-think-btn:hover{border-color:#2563eb;color:#2563eb;background:#eef4ff;}
.deep-think-btn.active{background:#eef4ff;color:#2563eb;border-color:#2563eb;font-weight:600;}

/* ===== 深度思考与模式栏之间的分隔线 ===== */
.mode-divider{width:1px;height:22px;background:#e2e8f0;flex-shrink:0;}

/* ===== 图片预览条（input上方） ===== */
#imagePreviewBar{
    display:none;flex-wrap:wrap;gap:8px;padding:0 4px 10px 4px;
}
.img-preview-item{position:relative;display:inline-block;}
.img-preview-thumb{
    width:64px;height:64px;object-fit:cover;
    border-radius:8px;display:block;border:1px solid #e2e8f0;
}
.img-remove-btn{
    position:absolute;top:-6px;right:-6px;
    width:18px;height:18px;
    background:#ef4444;border:2px solid #fff;border-radius:50%;
    color:#fff;font-size:11px;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    padding:0;line-height:1;z-index:1;transition:background .15s;
}
.img-remove-btn:hover{background:#dc2626;}

/* ===== 用户气泡中的图片缩略图 ===== */
.bubble-imgs{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
.bubble-imgs img{
    width:80px;height:80px;object-fit:cover;
    border-radius:8px;border:1px solid #e2e8f0;
    cursor:pointer;transition:opacity .15s;
}
.bubble-imgs img:hover{opacity:.85;}

/* ===== 自定义滚动条 =====
    调参说明：
    - width / height : 4px → 滚动条粗细，数值越大越粗
    - background (thumb) : rgba(0,0,0,0.18) → 滑块颜色与透明度
    - border-radius : 4px → 滑块圆角，设为 0 可改为直角
    - hover background : rgba(0,0,0,0.32) → 鼠标悬停时滑块加深程度
    - scrollbar-width: thin (Firefox) → 可选 auto / thin / none
===== */

/* 滚动条不应影响布局：始终为滚动槽保留宽度，但默认让 thumb 透明。
   当悬停、正在滚动或 JS 添加 show-scrollbar/scolling 类时，仅改变 thumb 的可见性（不改变宽度），从而避免布局抖动。 */
/* WebKit (Chrome / Edge / Safari) - 始终保留 8px 宽度槽位 */
.history-list::-webkit-scrollbar,
.chat-area::-webkit-scrollbar,
.reasoning-body::-webkit-scrollbar {
    width: 8px;          /* 始终保留宽度，防止出现/隐藏时布局变化 */
    height: 8px;
}
.history-list::-webkit-scrollbar-track,
.chat-area::-webkit-scrollbar-track,
.reasoning-body::-webkit-scrollbar-track {
    background: transparent; /* 轨道透明 */
}
/* 默认 thumb 透明（不可见），显示时仅修改背景色，不改变宽度 */
.history-list::-webkit-scrollbar-thumb,
.chat-area::-webkit-scrollbar-thumb,
.reasoning-body::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 6px;
}
.history-list:hover::-webkit-scrollbar-thumb,
.history-list.scrolling::-webkit-scrollbar-thumb,
.history-list.show-scrollbar::-webkit-scrollbar-thumb,
.chat-area:hover::-webkit-scrollbar-thumb,
.chat-area.scrolling::-webkit-scrollbar-thumb,
.chat-area.show-scrollbar::-webkit-scrollbar-thumb,
.reasoning-body:hover::-webkit-scrollbar-thumb,
.reasoning-body.scrolling::-webkit-scrollbar-thumb,
.reasoning-body.show-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.18);
}
.history-list:hover::-webkit-scrollbar-thumb:hover,
.history-list.scrolling::-webkit-scrollbar-thumb:hover,
.chat-area:hover::-webkit-scrollbar-thumb:hover,
.chat-area.scrolling::-webkit-scrollbar-thumb:hover,
.reasoning-body:hover::-webkit-scrollbar-thumb:hover,
.reasoning-body.scrolling::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,0.36);
}
/* 隐藏上下箭头按钮 */
.history-list::-webkit-scrollbar-button,
.chat-area::-webkit-scrollbar-button,
.reasoning-body::-webkit-scrollbar-button {
    display: none;
}

/* Firefox - 使用 scrollbar-width 保留槽位，默认 thumb 透明，通过 scrollbar-color 切换颜色 */
.history-list,
.chat-area,
.reasoning-body {
    scrollbar-width: thin; /* 保留较细的槽位 */
    scrollbar-color: transparent transparent; /* 默认不可见 */
}
.history-list:hover,
.history-list.scrolling,
.history-list.show-scrollbar,
.chat-area:hover,
.chat-area.scrolling,
.chat-area.show-scrollbar,
.reasoning-body:hover,
.reasoning-body.scrolling,
.reasoning-body.show-scrollbar {
    scrollbar-color: rgba(0,0,0,0.18) transparent; /* 显示 thumb 时设置颜色 */
}

@media(max-width:900px){
    .history-panel{display:none;}
    .input-bubble-container{width:calc(100vw - 32px);}
}

/* 遮罩层淡入 */
@keyframes modalOverlayIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* 内容区弹出 + 上浮 */
@keyframes modalContentIn {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.94) translateY(16px); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1)    translateY(0);    }
}

.more-modal.show {
    display: block;
    animation: modalOverlayIn 0.2s ease forwards;
}

.more-modal.show .more-modal-content {
    max-width: 750px;
    animation: modalContentIn 0.22s cubic-bezier(0.34, 1.26, 0.64, 1) forwards;
}