/* 聊天页面布局 */
.header {
    height: 72px;
}

.chat-container {
    display: flex;
    height: calc(100vh - 72px);
}

/* 侧边栏样式 */
.chat-sidebar {
    width: 280px;
    background: #f8f9fa;
    border-right: 1px solid #e9ecef;
    box-shadow: 2px 0 8px rgba(0,0,0,0.03);
}
.conv-list {
    padding: 8px;
}

.history-list {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
    height: calc(100vh - 72px - 82px); /* 视口高度 - 头部高度 - 底部用户信息栏高度 */
}

.history-items {
    margin-top: 15px;
}

.history-item {
    display: block;
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 8px;
    color: #333;
    transition: background 0.2s;
}

.history-item:hover {
    background: #e9ecef;
    text-decoration: none;
}

.sidebar-footer {
    /*border-top: 1px solid #ddd;*/
    padding: 15px;
    background: #f8f9fa;
    position: sticky;
    bottom: 0;
    z-index: 1;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border-radius: 8px;
    transition: background 0.3s;
}

.user-info:hover {
    background: #f8f9fa;
}

/* 头像样式 */
.user-info .avatar {
    width: 36px;
    height: 36px;
    border: 2px solid #e9ecef;
}

/* 用户名样式 */
.user-info span {
    font-weight: 500;
    color: #2d2d2d;
    font-size: 14px;
}

.avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin-right: 10px;
}

/* 主对话区域 */
.chat-main {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.messages-container {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.messages-wrapper {
    max-width: 800px;
    margin: 0 auto;
    min-width: 280px; /* 防止移动端过窄 */
}

/* 消息气泡 */
.message {
    margin-bottom: 20px;
    display: flex;
}

.message-content {
    max-width: 80%;
    padding: 12px 16px;
    border-radius: 12px;
    line-height: 1.5;
}

.user-message {
    justify-content: flex-end;
}

.user-message .message-content {
    background: #007bff;
    color: white;
}

.bot-message .message-content {
    background: #f1f3f5;
    color: #333;
}

/* 输入框区域 */
.input-container {
    /*border-top: 1px solid #ddd;*/
    padding: 20px;
    background: #fff;
}

.input-group {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    gap: 10px;
}

textarea {
    flex: 1;
    resize: none;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    min-height: 44px;
    max-height: 200px;
}

.send-button {
    background: none;
    border: none;
    padding: 0 12px;
    cursor: pointer;
    width: 48px; /* 与输入框高度匹配 */
    height: 48px;
}

.send-button img {
    width: 42px;
    height: 42px;
    transition: 0.3s; /* 添加平滑过渡 */
}

/* 响应式布局 */
@media (max-width: 768px) {
    .chat-sidebar {
        width: 200px;
    }

    .messages-wrapper,
    .input-group {
        max-width: 90%;
    }
}

/* 补充样式 */
.loading-message .loading-dots {
    display: inline-block;
    margin-left: 8px;
}

.loading-dots span {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 0 2px;
    background: #ddd;
    border-radius: 50%;
    animation: dot-pulse 1.4s infinite ease-in-out;
}

.loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.loading-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes dot-pulse {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1); }
}

.text-danger {
    color: #dc3545;
}

/* 消息样式 */
.message {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

.assistant-message {
    justify-content: flex-start;
}

.user-message {
    justify-content: flex-end;
}

.message-content {
    max-width: 75%;
    padding: 12px 16px;
    border-radius: 12px;
    background: #f5f5f5;
}

.user-message .message-content {
    background: #007bff;
    color: white;
}

.avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

/* 加载动画 */
.loading-dots span {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin: 0 2px;
    background: #999;
    border-radius: 50%;
    animation: dot-bounce 1.4s infinite;
}

@keyframes dot-bounce {
    0%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-6px);
    }
}

/* 导航按钮 */
/* 修正导航按钮样式 */
.chat-nav {
    position: fixed;
    right: 30px;
    bottom: 120px;
    z-index: 9999; /* 确保在最顶层 */
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.nav-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #007bff;
    color: white;
    border: none;
    cursor: pointer;
    font-size: 18px;
    opacity: 0.9;
    transition: all 0.2s;
}

.nav-btn:hover {
    background: #0056b3;
    transform: scale(1.1);
}

/* 初始隐藏向下按钮 */
#scroll-bottom {
    opacity: 0;
    pointer-events: none;
}

/* 显示时的状态 */
#scroll-bottom.visible {
    opacity: 0.9;
    pointer-events: auto;
}

/* 确保消息容器可滚动 */
.messages-container {
    height: calc(100vh - 160px) !important;
    overflow-y: auto;
    padding-bottom: 20px;
}

.message-content {
    /* 原有样式保持不变 */
    max-width: 80%;
    padding: 12px 16px;
    border-radius: 12px;
    line-height: 1.5;

    /* 新增断词规则 */
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* 针对英文优化换行 */
.user-message .message-content {
    word-break: break-word;
}

/* 移动端优化 */
@media (max-width: 768px) {
    .message-content {
        max-width: 90%;
        word-break: break-all;
    }
}

.message-content pre code {
    white-space: pre-wrap;
    word-wrap: break-word;
}

.user-message .message-content {
    letter-spacing: 0.03em; /* 改善英文字母间距 */
}

.radio-item {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    /* 父级保持简单，不设置额外的边框背景 */
}


/* 隐藏默认的单选框 */
.radio-item input {
    display: none;
}
/* 选中状态：整个 label 变为蓝色 */
.radio-item input:checked + .radio-label {
    background: #dbebff;
    border-color: #dbebff;
    color: #4d6aff;
}

.radio-label {

    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background: #f1f1f1;
    font-size: 14px;
    color: #333;
    transition: background 0.3s, border-color 0.3s, color 0.3s;
}

/* 模式选择区域与输入框组保持一致宽度，并位于其下方 */
.model-selector {
    max-width: 800px;
    margin: 10px auto 0; /* 上边距分隔，左右自动居中 */
    display: flex;
    gap: 10px;
}

/* 图标样式 */
.radio-item img {
    margin-right: 6px;
    display: inline-flex;
    align-items: center;
    width: 24px;
    height: 24px;
}

/* 模型选择器动画 */
.model-selector {
    transition: transform 0.3s ease;
}

.radio-item {
    transition: all 0.3s ease;
}

.radio-item:hover {
    transform: translateY(-2px);
}

input[type="radio"]:checked + .radio-label {
    animation: modelSelect 0.5s ease;
}

@keyframes modelSelect {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* 添加Markdown渲染样式 */
.streaming-content {
    overflow-x: auto;
}

.streaming-content h1, .streaming-content h2 {
    border-bottom: 1px solid #eee;
    padding-bottom: 0.3em;
}

.streaming-content pre {
    background: #f6f8fa;
    padding: 1em;
    border-radius: 6px;
    overflow-x: auto;
}

.streaming-content code {
    font-family: Monaco, Consolas, "Courier New", monospace;
    background: rgba(175,184,193,0.2);
    padding: 0.2em 0.4em;
    border-radius: 3px;
}

.streaming-content table {
    border-collapse: collapse;
    margin: 1em 0;
}

.streaming-content td, .streaming-content th {
    border: 1px solid #dfe2e5;
    padding: 0.6em 1em;
}


/* 添加推理过程特殊样式 */
.reasoning-block {
    margin: 10px 0;
    padding: 12px;
    background: #f8f9fa;
    border-left: 3px solid #007bff;
    border-radius: 4px;
}

.streaming-content {
    line-height: 1.7;
}

.streaming-content > div + div {
    margin-top: 15px;
}

/* 思维链容器 */

.reasoning-content {
    background: #f8fafc;
    border-radius: 8px;
    padding: 12px;
    margin: 8px 0;
    border-left: 3px solid #93c5fd;
    position: relative;
    transition: opacity 0.3s ease;
}

/* 空内容自动隐藏 */
.reasoning-content:empty {
    display: none;
}

/* 思维链时间显示 */
.reasoning-time {
    position: absolute;
    right: 12px;
    bottom: 8px;
    font-size: 12px;
    color: #6b7280;
    background: rgba(255,255,255,0.9);
    padding: 2px 6px;
    border-radius: 4px;
}

.reasoning-summary {
    margin-top: 8px;
    padding: 8px;
    background: #f8f9fa;
    border-radius: 4px;
    border: 1px solid #eee;
}

.reasoning-summary details {
    cursor: pointer;
    color: #666;
}

.reasoning-summary summary {
    outline: none;
    font-size: 0.9em;
}

.reasoning-summary pre {
    white-space: pre-wrap;
    background: white;
    padding: 10px;
}

.conv-item {
    position: relative;
    padding: 12px;
    margin: 4px 0;
    border-radius: 8px;
    transition: all 0.2s ease;
    background: white;
    border: 1px solid #e9ecef;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    white-space: normal !important; /* 强制换行 */
    word-break: break-word; /* 允许单词内换行 */
    overflow-wrap: anywhere; /* 紧急换行 */
    hyphens: auto; /* 连字符换行 */
}

.conv-item:hover {
    transform: translateX(4px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    border-color: #007bff;
}

.conv-item.active {
    border-left: 4px solid #007bff;
    background: #f8fbff;
}

/* 消息加载提示 */
.loading-indicator {
    text-align: center;
    padding: 10px;
    color: #666;
}

/* 自动保存提示 */
.toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #333;
    color: white;
    padding: 12px 24px;
    border-radius: 4px;
    display: none;
}

/* 对话标题 */
.conv-title {
    flex: 1;
    font-weight: 500;
    color: #212529;
    font-size: 14px;
    line-height: 1.4;
    padding-right: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal !important;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 限制两行显示 */
    -webkit-box-orient: vertical;
}

/* 时间样式 */
.conv-meta {
    font-size: 12px;
    color: #6c757d;
    margin-top: 4px;
}

/* 操作按钮容器 */
.conv-actions {
    display: none; /* 默认隐藏 */
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: white;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    padding: 4px;
}

.conv-item:hover .conv-actions {
    display: block;
}

/* 操作按钮 */
.btn-rename,
.btn-delete {
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    padding: 6px;
    border-radius: 50%;
    color: #6c757d;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-rename:hover {
    background: #e7f5ff;
    color: #228be6;
}

.btn-delete:hover {
    background: #fff5f5;
    color: #ff6b6b;
}

/* 加载更多按钮优化 */
.btn-load-more {
    width: 100%;
    padding: 10px;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    color: #495057;
    transition: all 0.2s;
}

.btn-load-more:hover {
    background: #e9ecef;
    transform: translateY(-1px);
}

/* ================== 操作冲突修复 ================== */
/* 添加按钮间距防止误触 */
.conv-actions {
    gap: 4px;
}

/* ================== 1. 新建按钮样式优化 ================== */
.btn-new-conv {
    background: #007bff;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 4px rgba(0,123,255,0.2);
}

.btn-new-conv:hover {
    background: #0056b3;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,123,255,0.25);
}

.btn-new-conv::before {
    content: "+";
    font-size: 20px;
    line-height: 1;
}

/* ================== 2. 加载更多按钮优化 ================== */
.btn-load-more {
    width: 100%;
    padding: 10px;
    background: transparent;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    color: #6c757d;
    font-size: 14px;
    transition: all 0.3s ease;
    margin-top: 12px;
}

.btn-load-more:hover {
    background: #f8f9fa;
    border-color: #dee2e6;
    color: #495057;
    transform: none;
}

.btn-load-more:active {
    background: #e9ecef;
}

/* 加载状态样式 */
.btn-load-more.loading {
    position: relative;
    color: transparent;
    pointer-events: none;
}

.btn-load-more.loading::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 20px;
    height: 20px;
    border: 2px solid #007bff;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    transform: translate(-50%, -50%);
}

@keyframes spin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* 防止横向滚动 */
.history-list {
    overflow-x: hidden !important;
}

/* 历史标题栏样式 */
.history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 12px;
}

.history-header h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #2d2d2d;
}
/* 保持滚动条美观 */
.history-list::-webkit-scrollbar {
    width: 6px;
    background: transparent;
}

.history-list::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.2);
    border-radius: 3px;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .history-list {
        height: calc(100vh - 72px - 80px); /* 移动端底部留更多空间 */
    }
}

/* 保持滚动条美观 */
.messages-container::-webkit-scrollbar {
    width: 6px;
    background: transparent;
}

.messages-container::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.2);
    border-radius: 3px;
}

/* 新增AI中心样式 */
.ai-center-container {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
}

.config-title {
    color: #2d2d2d;
    border-bottom: 2px solid #007bff;
    padding-bottom: 12px;
    margin-bottom: 40px;
}

.model-config-section {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    padding: 24px;
    margin-bottom: 30px;
    border: 1px solid #e9ecef;
}

.section-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
}

.model-icon {
    width: 40px;
    height: 40px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #495057;
}

.form-control {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #ced4da;
    border-radius: 8px;
    transition: border-color 0.3s;
    height: 40px;
}

.form-control:focus {
    border-color: #007bff;
    outline: none;
    box-shadow: 0 0 0 5px rgba(0,123,255,0.25);
}

.input-with-action {
    position: relative;
}

.btn-toggle-visibility {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}

.slider-container {
    display: flex;
    align-items: center;
    gap: 15px;
}

.form-range {
    flex: 1;
    height: 6px;
}

.slider-value {
    min-width: 40px;
    text-align: center;
}

.form-tip {
    font-size: 12px;
    color: #6c757d;
    margin-top: 6px;
}

.required {
    color: #dc3545;
    margin-left: 3px;
}

.form-actions {
    text-align: center;
    margin-top: 40px;
}

.btn-save-config {
    background: #007bff;
    color: white;
    padding: 12px 40px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s;
}

.btn-save-config:hover {
    background: #0056b3;
    transform: translateY(-2px);
}

.btn-save-config img {
    width: 20px;
    height: 20px;
}

.save-tip {
    font-size: 12px;
    color: #6c757d;
    margin-top: 12px;
}

.config-toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    animation: slideUp 0.3s ease;
}

.config-toast.success {
    background: #28a745;
}

.config-toast.error {
    background: #dc3545;
}

@keyframes slideUp {
    from { bottom: -50px; }
    to { bottom: 30px; }
}

@media (max-width: 768px) {
    .ai-center-container {
        padding: 0 15px;
    }

    .model-config-section {
        padding: 18px;
    }
}

.btn-add {
    display: inline-block;
    margin-left: 20px;
    padding: 6px 12px;
    font-size: 14px;
    border-radius: 6px;
    background-color: #007bff;
    color: #fff;
    text-decoration: none;
    transition: background 0.3s;
}
.btn-add:hover {
    background-color: #0056b3;
}
.config-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.animated-delete {
    position: relative;
    padding-right: 2em;
    transition: opacity 0.3s ease;
}

.animated-delete.loading::after {
    content: "";
    position: absolute;
    right: 0.5em;
    top: 50%;
    width: 1em;
    height: 1em;
    margin-top: -0.5em;
    border: 2px solid #ccc;
    border-top: 2px solid #000;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

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

.fade-out {
    opacity: 0;
    transition: opacity 0.5s ease;
}