@media print {
    html, body {
      height: auto !important;
      overflow: visible !important;
    }
  }

/* 全局样式 */
html, body {
    height: 100%;
    display: flex;
    flex-direction: column; /* 让子元素沿着主轴（垂直方向）排列 */
    overscroll-behavior: none;
}

body {
    display: flex;
    flex-direction: column;
}

html, body {
  /*position: fixed;*/
  overflow: hidden;
}

img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

/* 保持录音按钮和语音转录文本框在底部 */

/* 添加AI消息中图片的特定样式 */
.ai-message img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 10px auto;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
/* 保持录音按钮和语音转录文本框在底部 */
.voice-box {
    margin-top: auto; /* 将它们推到底部 */
}

body, h1, input, button, textarea {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

/* 页面 heading 样式 */
.h1 {
    font-size: 18px;
    color: #333;
    text-align: center;
    margin-top: 0;
    margin-bottom: 0;
    padding: 5px 0;
}

hr {
    border: none;
    height: 1px;
    background-color: #eaeaea;
    margin-bottom: 20px;
}

.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    background-color: #ffffff;    /*#f2f4f8*/
    border-bottom: 1px solid #e1e4e8;
    margin-bottom: 10px;
}

.search-container {
    padding: 0px; /* 根据您的设计需求进行调整 */
    margin-bottom: 5px; /* 可以根据需要设置一定的间距 */
    margin-top: 5px;
    margin-left: 5px;
    width: 90%;
    height: 40px;
   
}

h4.title {
    margin: 0;
    margin-right: 1%;
    font-size: 16px; /* 更新标题字号为20px */
    color: #333;
}

/* 媒体查询：当屏幕宽度小于768像素时隐藏标题 */
@media (max-width: 768px) {
    .title {
        display: none;
    }
}

span.version {
    margin-left: 3px;
    font-size: 12px;
    color: #666;
}



.version {
    font-size: 0.3em; /* Smaller font size for version */
    color: #aaa; /* Light grey color for the version number */
    margin-left: 1px; /* Space between title and version number */
    margin-right: 2px;
    position: relative; /* Position it in relation to the title */
    top: -0.2em; /* Adjust vertical alignment */
}



/* AI响应区域样式 */

.ai-response-box {
    z-index: 1;
    position: relative; 
    display: flex; /* 启用flex布局 */
    flex-direction: column; /* 设置主轴方向为垂直 */
    justify-content: center;
    flex: 1; /* 占据所有剩余空间 */
    overflow: visible; /* 如果内容过多，则允许滚动 */
    min-height: 0; /* 修正flex子项在IE中的溢出问题 */
    align-items: center;
    gap: 10px;
    padding: 0 0px 5px;
    margin-bottom: 2px;
}


element.style {
    margin-bottom: 0px;
    padding-left: 10px;
    padding-top: 1px;
    padding-bottom: 1px;
    padding-right: 5px;
    margin-left: 5px;
}

/* 移除ai-response的textarea样式，改为div的容器样式 */
#ai-response {
    z-index: 1;
    position: relative;
    display: flex;
    width: calc(100% - 10px); /* 减去左右各20px的padding */
    flex-direction: column;
    flex-grow: 1; /* 使其填充容器剩余空间 */
    overflow-y: auto; /* 允许内容超出时滚动 */
    padding: 10px 5px;
    margin: 5px;
    border: 0px solid #ffffff;
    background: linear-gradient(to bottom, #f8f9fa 0%, #ffffff 100%);
    font-size: 15px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    border-top: 1px solid #e1e4e8;
    border-bottom: 1px solid #e1e4e8;
    gap: 6px;
    /* 移除height: 350px; 使用flex-grow来代替 */
}

/* 美化滚动条样式 */
#ai-response::-webkit-scrollbar {
    width: 8px;
}

#ai-response::-webkit-scrollbar-track {
    background: transparent;
}

#ai-response::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #cbd5e1, #94a3b8);
    border-radius: 10px;
    transition: background 0.2s ease;
}

#ai-response::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, #94a3b8, #64748b);
}

/* Firefox滚动条 */
#ai-response {
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 transparent;
}


/* 消息通用样式 */
.message {
    width: fit-content; /* 让div的宽度根据内容调整，但不超过父元素宽度 */
    padding: 5px 5px 5px;
    border-radius: 10px;
    margin-bottom: 10px; /* 消息间距 */
    word-wrap: break-word; /* 超出最大宽度时进行换行 */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); /* 可选的阴影效果 */
}

/* 用户消息样式 - 现代化蓝色气泡 */
.user-message {
    position: relative; /* 为复制按钮提供定位参考 */
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #ffffff;
    margin-right: 10px;
    padding: 10px 14px;
    margin-bottom: 2px;
    width: max-content; /* 根据内容撑开，不收缩 */
    max-width: 85%;
    border-radius: 18px;
    border-top-right-radius: 4px;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25);
    font-size: 15px;
    line-height: 1.5;
    word-wrap: break-word;
    transition: all 0.2s ease;
}

/* 用户消息hover效果 */
.user-message:hover {
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.35);
    transform: translateY(-1px);
}

/* 用户消息内的复制按钮 */
.user-message > .copy-button {
    position: absolute;
    top: -8px;
    right: 2px;
    width: 28px;
    height: 28px;
    padding: 0;
    margin: 0;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.user-message > .copy-button svg {
    width: 14px !important;
    height: 14px !important;
}

.user-message:hover > .copy-button {
    opacity: 1;
}

.user-message-container {
    align-self: flex-end;
    margin: 0;
    padding: 0;
    width: 100%; /* 撑满父容器，让子元素的百分比宽度正确计算 */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    animation: fadeIn 0.2s ease-out;
    gap: 4px;
}

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

/* 用户消息时间戳样式 - 现代化设计 */
.user-message-container .message_time {
    width: fit-content;
    max-width: 80%;
    padding: 4px 8px;
    border-radius: 6px;
    margin-bottom: 0;
    margin-right: 10px;
    color: #9ca3af;
    font-size: 12px;
    align-self: flex-end;
    cursor: default;
    background: rgba(243, 244, 246, 0.4);
}

/* AI 消息样式 - 现代化白色气泡 */
.ai-message {
    position: relative; /* 为复制按钮提供定位参考 */
    background-color: #FFFFFF;
    color: #1a1a1a;
    margin-left: 10px;
    margin-right: 10px;
    padding: 10px 14px;
    margin-bottom: 2px;
    width: max-content; /* 根据内容撑开，不收缩 */
    max-width: 85%;
    border-radius: 18px;
    border-top-left-radius: 4px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    font-size: 15px;
    line-height: 1.6;
    word-wrap: break-word;
    transition: all 0.2s ease;
}

/* 重置消息气泡内所有块级元素的margin */
.user-message p,
.user-message h1,
.user-message h2,
.user-message h3,
.user-message h4,
.user-message h5,
.user-message h6,
.user-message ul,
.user-message ol,
.ai-message p,
.ai-message h1,
.ai-message h2,
.ai-message h3,
.ai-message h4,
.ai-message h5,
.ai-message h6,
.ai-message ul,
.ai-message ol {
    margin: 0;
    margin-bottom: 0.5em;
}

/* 最后一个元素不需要底部margin */
.user-message p:last-child,
.user-message h1:last-child,
.user-message h2:last-child,
.user-message h3:last-child,
.user-message h4:last-child,
.user-message h5:last-child,
.user-message h6:last-child,
.user-message ul:last-child,
.user-message ol:last-child,
.ai-message p:last-child,
.ai-message h1:last-child,
.ai-message h2:last-child,
.ai-message h3:last-child,
.ai-message h4:last-child,
.ai-message h5:last-child,
.ai-message h6:last-child,
.ai-message ul:last-child,
.ai-message ol:last-child {
    margin-bottom: 0;
}

.ai-message:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    border-color: #d1d5db;
}

/* AI消息内的复制按钮 */
.ai-message > .copy-button {
    position: absolute;
    top: 6px;
    right: 6px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.ai-message:hover > .copy-button {
    opacity: 1;
}

/* AI消息操作按钮容器 */
.ai-message-actions {
    position: absolute;
    top: -8px;
    right: 6px;
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 10;
}

/* AI消息底部操作按钮容器 */
.ai-message-actions-bottom {
    position: relative;
    top: auto;
    right: auto;
    margin-top: 6px;
    margin-right: -6px;
    margin-bottom: -6px;
    margin-left: auto;
    justify-content: flex-end;
}

.ai-message:hover > .ai-message-actions {
    opacity: 1;
}

/* 底部操作按钮容器hover样式 */
.ai-message:hover > .ai-message-actions-bottom {
    opacity: 1;
}

/* 操作按钮通用样式 */
.ai-message-actions .action-button {
    width: 28px;
    height: 28px;
    padding: 0;
    margin: 0;
    border: none;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ai-message-actions .action-button:hover {
    background-color: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.ai-message-actions .action-button svg {
    display: block;
    width: 14px !important;
    height: 14px !important;
    color: #6b7280;
    flex-shrink: 0;
}

.ai-message-actions .action-button:hover svg {
    color: #374151;
}

/* PDF按钮特殊样式 */
.pdf-button:hover svg {
    color: #059669;
}

/* 打印按钮特殊样式 */
.print-button:hover svg {
    color: #8b5cf6;
}

/* 旋转动画 */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 手机端消息边距减小 */
@media (max-width: 768px) {
    .user-message {
        margin-right: 3px;
        padding: 6px;
        width: fit-content; /* 手机端用 fit-content，会受 max-width 限制 */
        max-width: 95%;
    }
    .user-message-container .message_time {
        margin-right: 3px;
    }
    .ai-message {
        margin-left: 3px;
        margin-right: 3px;
        padding: 6px;
        width: fit-content; /* 手机端用 fit-content，会受 max-width 限制 */
        max-width: 95%;
    }
    .ai-message_time {
        margin-left: 3px;
    }
}

/* AI消息容器 - 添加动画效果 */
.ai-message-container {
    align-self: flex-start;
    margin: 0;
    padding: 0;
    width: 100%; /* 撑满父容器，让子元素的百分比宽度正确计算 */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    animation: fadeIn 0.2s ease-out;
    gap: 4px;
}

/* AI消息时间戳样式 - 现代化设计 */
.ai-message_time {
    display: flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    max-width: 95%;
    padding: 4px 8px;
    border-radius: 6px;
    margin-bottom: 0;
    margin-left: 10px;
    color: #6b7280;
    font-size: 12px;
    align-self: flex-start;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: default;
    background: rgba(243, 244, 246, 0.6);
}

/* 模型名称样式 */
.ai-message_time .model-name-text {
    font-weight: 500;
    color: #4b5563;
}

.ai-message_time .time-separator {
    color: #d1d5db;
}

.ai-message_time .time-text {
    color: #9ca3af;
}


/* AI模型选择区域的样式 */
.ai-model-box {
    display: flex;
    align-items: center; /* 保持垂直居中 */
    justify-content: space-between; /*开关和下拉菜单两端对齐 */
    padding: 1px; /* 维持之前的内边距 */
    background-color: #ffffff /*f7f7f7*/;
    /* box-shadow: -2px 0 3px rgba(0, 0, 0, 0.185), 0 2px 3px rgba(0, 0, 0, 0.113); */
    border-bottom: 0px solid #e0e0e0;
    height: 30px;
    width: 100%;
    min-height: 0; /* 修正flex子项在IE中的溢出问题 */
    gap: 2px;
    padding: 0 1px 0px;
    padding-bottom: 7px;
    padding-top: 10px;
    margin-top: 0px;
    margin-right: 0px;
}

/* 下拉框悬停和焦点样式 */
#aiModelSelect:hover,
#aiModelSelect:focus {
    border-color: #007bff; /* 悬停或焦点时的边框颜色 */
}

/* 下拉选项样式 */
#aiModelSelect option {
    padding: 8px; /* 增加填充以改善触感 */
    height: 29px;
}

/* 下拉选项样式 */
#aiModelSelect {
    height: 29px;
    margin-right: 15px;
    width: 150px;
}

/* 设置分组标签（optgroup）的样式 */
optgroup {
  font-weight: bold;
  font-size: 1em; /* 可根据实际需要调整大小 */
}

/* 设置下拉选项（option）的样式 */
option {
  font-size: 1em;  /* 可根据实际需要调整大小 */
  padding: 4px; /* 提供足够的间距 */
}


.switch {
    position: relative;
    display: inline-block;  /* 使用inline-block来保持元素在一行 */
    width: auto;  /* 设置宽度为自动，根据内容调整 */
    padding: 0px 0px;  /* 添加一些内边距 */
    margin-right: 0px;  /* 与其他元素的间隔 */
    vertical-align: middle;  /* 垂直对齐 */
    font-size: 13px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: relative;  /* 更改为相对位置 */
    display: inline-block;  /* 使用inline-block确保与文本在同一行 */
    width: 40px;  /* 滑块的宽度 */
    height: 24px;  /* 滑块的高度 */
    background-color: #ccc;
    border-radius: 24px;
    vertical-align: middle;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: '';
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    border-radius: 50%;
    transition: .4s;
}

input:checked + .slider {
    background-color: #5D5CDE;
}

input:checked + .slider:before {
    transform: translateX(17px);  /* 根据滑块宽度调整 */
}

.switch span {
    display: inline-block;
    margin-left: 1px;  /* 文本与滑块之间的间隔 */
    vertical-align: middle;
    white-space: nowrap;  /* 防止文本换行 */
}

.thumbnail-container {
    position: relative;
    display: inline-block;
    border: 0px solid #ccc;
    padding: 5px;
  }
  
  .thumbnail-image {
    max-height: 366px; /* 添加px单位 */
    max-width: 366px; /* 添加px单位 */
    height: auto; /* 高度自动，以保持宽高比 */
    object-fit: contain; /* 防止图片变形，保持原图比例 */
    display: block; /* 将图像显示为块级元素 */
    border-radius: 8px;
    margin: 0 auto 5px; /* 上0 左右auto 下5px，使图片居中 */
    }

    .thumbnail-container:hover .delete-icon {
        display: block; /* 鼠标悬停时显示删除图标 */
    }

    /* 添加媒体查询，针对小屏幕设备调整图片大小 */
    @media (max-width: 768px) {
        .thumbnail-image {
            max-height: 250px;
            max-width: 95%;
        }
        
        /* 检测是否有多个缩略图容器 */
        #thumbnails-container:has(.thumbnail-container + .thumbnail-container) .thumbnail-image {
            max-height: 250px;
            max-width: 95%;
            width: 150px;
            margin: 5px;
        }
        
        /* 当有多个缩略图容器时，调整父容器布局 */
        #thumbnails-container:has(.thumbnail-container + .thumbnail-container) {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }
    }

  
  .delete-icon {
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 20px;
    color: red;
    cursor: pointer;
    display: none; /* 初始状态隐藏删除图标 */
  }

  
.dalle3-img {
    max-width: 366px;
    max-height: 366px;
}



/* 复制按钮样式 */
.copy-button {
    width: 32px;
    height: 32px;
    padding: 4px;
    border: 0px;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.copy-button:hover {
    background-color: #f3f4f6;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    transform: scale(1.05);
}

.copy-button svg {
    display: block;
    color: #6b7280;
}

.copy-button:hover svg {
    color: #374151;
}

status-icon{
    background-color: #0056b3; /* 鼠标悬浮时按钮的背景颜色变暗 */
    color: #666;
}

.history_button {
    display: flex;
    align-items: left;
    padding: 2px;
    padding-right: 0px;
    background-color: transparent;
    border: 0;
    background-image: url('../img/history_1.png');
    background-size: contain; /* 调整背景图片的大小 */
    background-repeat: no-repeat; /* 防止背景图片重复 */
    background-position: center; /* 将背景图片居中 */
    width: 22px;
    height: 22px;
    margin-left: 10px;
}

.history_button, button {
    cursor: pointer;
}

.history_button button img {
    width: 24px;
    height: 24px;
}

/* 容器默认隐藏，浮动在其他元素之上 */
.vendors-container {
    position: fixed;
    top: 20px;
    right: -100%; /* 初始状态在屏幕右侧之外 */
    height: 83%;
    width: 230px; /* 或您想要的宽度 */
    background-color: #fff;
    overflow-y:hidden; /* 如果内容超出高度，允许滚动 */
    transition: right 0.5s; /* 平滑过渡效果 */
    z-index: 1000; /* 确保在顶部 */
    box-shadow: -2px 0 5px rgba(0,0,0,0.5); /* 添加一些阴影以增强立体感 */
    font-size: 13.5px;
    border-radius: 4px;
    padding: 10px;
    padding-bottom: 10px;
}

/* 显示状态的样式 */
.vendors-container-visible {
    right: 0; /* 移动到可视区域内 */
}

/* 双模型开关行 */
.dual-model-toggle-row {
    padding: 8px 10px;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 6px 6px 0 0;
}

.dual-model-toggle-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.dual-model-checkbox {
    width: 16px;
    height: 16px;
    accent-color: #6366f1;
    cursor: pointer;
}

.dual-model-toggle-text {
    font-size: 13px;
    color: #4b5563;
    font-weight: 500;
}

.dual-model-checkbox:checked + .dual-model-toggle-text {
    color: #4f46e5;
    font-weight: 600;
}

.vendors-list,
.models-list {
    list-style: none;
    padding: 0;
    margin: 0;
    border: 0px solid #ddd;
    overflow-y: auto; /* 允许垂直滚动 */
    max-height: 80vh; /* 设置最大高度，50vh表示视口高度的50% */
}

.vendor-name {
    font-weight: bold;
    margin: 10px 5px;
}

.model-item {
    padding: 5px 10px;
    border: 0px solid #ddd;
    margin: 5px 0;
    cursor: pointer;
}

.model-item:hover {
    background-color: #f0f0f0;
}

.model-btn-wrapper {
    width: 150px; /* 设置为需要的固定宽度 */
    display: inline-block; /* 让包装器作为内联块级元素排列，这样才能和文本或其他按钮一起水平排列 */
    /* 如果需要可以添加其他样式，如内边距、外边距等 */
  }
  
  .model_button {
    text-align: left; /* 使按钮文本左对齐 */
    width: auto; /* 让按钮撑满其父容器的宽度 */
    /* 可以根据需要添加其他样式，如字体大小、背景色等 */
    /* 如果希望按钮看起来更像普通文本,可能需要去掉一些默认的按钮样式，如以下示例: */
    border: none;
    background:#f0f3f578; /* 透明背景 */
    padding: 5px; /* 去掉内边距 */
    margin: 0; /* 去掉外边距 */
    border-radius: 5px;
    display: flex; /* 使用 flex 布局 */
    align-items: center; /* 垂直居中对齐 */
    gap: 6px; /* 图标和文字之间的间距 */
    color: #333; /* 设置文本颜色，这也会影响 SVG 的 currentColor */

    /* 如果要响应鼠标悬停等状态，需要添加相应的 :hover 样式 */
  }

  /* 供应商图标样式 */
  .vendor-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
    flex-shrink: 0; /* 防止图标被压缩 */
    vertical-align: middle;
  }

  /* SVG 图标特殊处理 */
  .vendor-icon-svg {
    display: inline-block;
    filter: none; /* 确保 SVG 不被滤镜影响 */
  }
  
/* 仅在非触摸设备上应用悬停效果 */
@media (hover: hover) and (pointer: fine) {
  .model_button:hover {
    background-color: #f0f3f5e0; /* 稍微加深的背景色 */
    color: #000; /* 悬停时文字颜色变深 */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 添加轻微阴影效果 */
    cursor: pointer;
  }
}

/* 为触摸设备提供替代交互方式 */
@media (hover: none) and (pointer: coarse) {
  .model_button:active {
    background-color: #f0f3f5e0; /* 与悬停效果相同的背景色 */
    color: #000; /* 与悬停效果相同的文字颜色 */
  }
}



.model_setting_button {
    display: flex;
    align-items: right;
    padding: 2px;
    padding-left: 0px;
    background-color: transparent;
    border: 0;
    background-image: url('../img/settings.png');
    background-size: contain; /* 调整背景图片的大小 */
    background-repeat: no-repeat; /* 防止背景图片重复 */
    background-position: center; /* 将背景图片居中 */
    width: 18px;
    height: 18px;
    margin-right: 12px;
        /* 添加滤镜效果 */
        filter: opacity(80%) brightness(1.5);
        /* 或者只使用 opacity */
        /* opacity: 0.6; */
        
        /* 添加悬停效果 */
        transition: filter 0.3s ease, opacity 0.3s ease;
    }
    
    /* 悬停时恢复原始颜色 */
    .model_setting_button:hover {
        filter: none;
        /* 或者如果使用 opacity */
        /* opacity: 1; */
    }
.model_setting_button, button {
    cursor: pointer;
}

.model_setting_button button img {
    width: 24px;
    height: 24px;
}

h3 {
    font-weight: bold;
    margin: 10px 5px;
}

.preview-button, .open-button {
    margin-bottom: 0px;
    padding: 5px 10px;
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    margin-right: 10px;
    width: 115px;
}

.preview-button:hover, .open-button:hover {
    background-color: #e0e0e0;
}

pre[class*="language-"] {
    scrollbar-width: thin;  /* Firefox */
    scrollbar-color: rgba(155, 155, 155, 0.7) transparent;  /* Firefox */
}

pre[class*="language-"]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

pre[class*="language-"]::-webkit-scrollbar-track {
    background: transparent;
}

pre[class*="language-"]::-webkit-scrollbar-thumb {
    background-color: rgba(155, 155, 155, 0.7);
    border-radius: 20px;
    border: transparent;
}

.svg-preview {
    margin: 10px 0;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px;
    background-color: #f9f9f9;
}

.code-preview-wrapper .content-wrapper .code-container {
    max-height: none !important;
    height: auto !important;
}

/* 思考过程样式 - 简化设计，按钮在时间戳行 */
.reasoning-wrapper {
    margin-bottom: 12px;
    border-radius: 8px;
    background: linear-gradient(to right, #f8f9fa, #ffffff);
    overflow: hidden;
}

/* 思考内容包装器 - 默认折叠，展开时显示全部 */
.reasoning-content-wrapper {
    max-height: none;
    overflow-y: auto;
    transition: max-height 0.3s ease, padding 0.3s ease, opacity 0.3s ease;
}

.reasoning-wrapper.collapsed .reasoning-content-wrapper {
    max-height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
}

.reasoning-content {
    padding: 10px 12px;
    padding-left: 16px;
    border-left: 3px solid #e5e7eb;
    margin-left: 12px;
    font-size: 0.85em;
    color: #6b7280;
    line-height: 1.5;
    white-space: pre-wrap;
}

/* 时间戳行的思考按钮 */
.thinking-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    padding: 2px 8px;
    background: #f3f4f6;
    border-radius: 12px;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
    font-size: 12px;
    color: #6b7280;
}

.thinking-toggle-btn:hover {
    background: #e5e7eb;
    color: #374151;
}

.thinking-toggle-icon {
    transition: transform 0.3s ease;
}

.thinking-toggle-text {
    white-space: nowrap;
}

/* 兼容旧版 reasoning-header 样式（用于历史数据显示） */
.reasoning-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #f3f4f6;
    border-bottom: 1px solid #e5e7eb;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s ease;
}

.reasoning-header:hover {
    background: #e5e7eb;
}

.reasoning-toggle-icon {
    width: 16px;
    height: 16px;
    color: #6b7280;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.reasoning-wrapper.collapsed .reasoning-toggle-icon {
    transform: rotate(-90deg);
}

.reasoning-header-text {
    font-size: 13px;
    color: #6b7280;
    font-weight: 500;
}

/* 展开按钮（保留兼容，默认隐藏） */
.reasoning-expand-btn {
    display: none;
}

/* 兼容旧版简单样式（流式传输中使用） */
.reasoning-text {
    font-size: 0.85em;
    color: #6b7280;
    font-style: italic;
    white-space: pre-wrap;
    padding-left: 12px;
    border-left: 3px solid #e5e7eb;
    margin: 8px 0;
    line-height: 1.5;
}

/* 选中文本浮动菜单样式 */
.selection-floating-menu {
    position: fixed;
    display: none;
    flex-direction: column;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    z-index: 10000;
    padding: 4px;
    gap: 2px;
}

.selection-menu-content {
    display: flex;
    align-items: center;
    gap: 2px;
}

.selection-menu-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border: none;
    background: transparent;
    color: #333;
    font-size: 13px;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.selection-menu-btn:hover {
    background: #f0f0f0;
}

.selection-menu-btn:active {
    background: #e0e0e0;
}

.selection-menu-btn svg {
    flex-shrink: 0;
}

/* 绘图按钮 */
.selection-menu-draw {
    border-left: 1px solid #e0e0e0;
    margin-left: 2px;
}

.selection-menu-draw:hover {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

/* 菜单箭头（指向下方选中文本） */
.selection-menu-arrow {
    position: absolute;
    bottom: -6px;
    width: 12px;
    height: 12px;
    background: #fff;
    transform: rotate(45deg);
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    z-index: -1;
}

/* 菜单在文本下方时，箭头指向上方 */
.selection-floating-menu.arrow-top .selection-menu-arrow {
    bottom: auto;
    top: -6px;
    box-shadow: -2px -2px 4px rgba(0, 0, 0, 0.1);
}

/* Toast 提示样式 */
.selection-toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: rgba(0, 0, 0, 0.75);
    color: white;
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 14px;
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
    z-index: 10001;
    pointer-events: none;
}

.selection-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ==================== 双模型对比模式样式 ==================== */

/* 双模型切换按钮 */
.dual-mode-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 16px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.dual-mode-toggle:hover {
    transform: scale(1.02);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
}

.dual-mode-toggle.active {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.dual-mode-toggle svg {
    width: 14px;
    height: 14px;
}

/* 双模型选择chips */
.dual-model-chips {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.model-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: #f3f4f6;
    border-radius: 12px;
    font-size: 12px;
    color: #374151;
    border: 1px solid #e5e7eb;
}

.model-chip .vendor-icon-small {
    width: 14px;
    height: 14px;
    object-fit: contain;
}

.model-chip .chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: 2px;
    background: #9ca3af;
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.2s;
}

.model-chip .chip-remove:hover {
    background: #ef4444;
}

.model-chip-placeholder {
    color: #9ca3af;
    font-size: 12px;
    font-style: italic;
}

.vs-divider {
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    padding: 0 4px;
}

.dual-mode-hint {
    color: #9ca3af;
    font-size: 12px;
}

/* 双模型消息容器 */
.dual-model-container {
    display: flex;
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.dual-model-col {
    flex: 1;
    min-width: 0;  /* 关键：防止 flex 子元素超出 */
    max-width: 50%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.dual-model-col .ai-message-container {
    width: 100%;
}

.dual-model-col .ai-message {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* 双模型模式下代码块样式 */
.dual-model-col .ai-message pre {
    max-width: 100%;
    overflow-x: auto;
}

.dual-model-col .ai-message pre code {
    white-space: pre-wrap;
    word-break: break-all;
}

/* 双模型模式下的模型名称行样式 */
.dual-model-col .ai-message_time {
    margin-left: 0;
    margin-bottom: 4px;
}

.dual-model-col .ai-message_time .vendor-icon-inline {
    width: 16px;
    height: 16px;
    margin-right: 4px;
    vertical-align: middle;
}

.dual-model-col .thinking-toggle-btn {
    display: none;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    padding: 2px 8px;
    font-size: 12px;
    color: #6366f1;
    background: rgba(99, 102, 241, 0.1);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.dual-model-col .thinking-toggle-btn:hover {
    background: rgba(99, 102, 241, 0.2);
}

.dual-model-col .thinking-toggle-icon {
    transition: transform 0.2s ease;
}

/* 移动端双模型布局 */
@media (max-width: 768px) {
    .dual-model-container {
        flex-direction: column;
        gap: 8px;
    }

    .dual-model-col {
        width: 100%;
        max-width: 100%;
    }

    .dual-model-chips {
        flex-direction: column;
        align-items: flex-start;
    }

    .vs-divider {
        display: none;
    }
}