body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    line-height: 1.6;
    color: #333;
    margin: 0;
    padding: 0;
    background-color: #ffffff;
    height: 100vh;
    display: flex;
    flex-direction: column;
    font-size: 14px;
}

.container {
    display: flex;
    flex-direction: row;
    /* 修改为横向布局 */
    max-width: 100%;
    width: 100%;
    height: 100vh;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

/* 添加左侧导航栏样式 */
.sidebar {
    width: 240px;
    background-color: #f9f9f9;
    border-right: 1px solid #e5e5e5;
    height: 100vh;
    padding: 15px 0;
    display: flex;
    flex-direction: column;
}

.sidebar-header {
    padding: 0 15px 15px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e5e5e5;
    margin-bottom: 15px;
}

.sidebar-logo {
    display: flex;
    align-items: center;
    font-size: 18px;
    font-weight: 600;
    color: #4a90e2;
    /* 蓝色 */
}

.sidebar-logo img {
    margin-right: 10px;
    width: 24px;
    height: 24px;
}

.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: #ffffff;
    border-bottom: 1px solid #e5e5e5;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    z-index: 100;
    color: #333;
}

.header-buttons {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mode-buttons {
    display: flex;
    align-items: center;
    background-color: #f5f5f7;
    border-radius: 8px;
    overflow: hidden;
    margin-right: 10px;
}

#writer-mode-button,
#editor-mode-button,
#drawer-mode-button {
    padding: 8px 12px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 0.9em;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 5px;
    color: #666;
}

#writer-mode-button:hover,
#editor-mode-button:hover,
#drawer-mode-button:hover {
    background-color: rgba(74, 144, 226, 0.1);
    color: #4a90e2;
}

#writer-mode-button.active {
    background-color: rgba(74, 144, 226, 0.15);
    color: #4a90e2;
    font-weight: 500;
}

#editor-mode-button.active {
    background-color: rgba(74, 144, 226, 0.15);
    color: #4a90e2;
    font-weight: 500;
}

#drawer-mode-button.active {
    background-color: rgba(74, 144, 226, 0.15);
    color: #4a90e2;
    font-weight: 500;
}

#writer-mode-button i,
#editor-mode-button i,
#drawer-mode-button i {
    font-size: 1.1em;
}

/* 添加作图模式按钮样式 */
#drawer-mode-button {
    padding: 8px 12px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 0.9em;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 5px;
    color: #666;
}

/* 作图模式指示器 */
.mode-indicator.drawer-mode {
    color: white;
    background-color: #4a90e2;
}

/* 作图模式激活时的样式 */
.drawer-mode-active #user-input {
    border: 1px solid #4a90e2;
    border-radius: 8px;
    box-shadow: 0 0 0 1px rgba(74, 144, 226, 0.2);
}

#clear-button {
    padding: 8px 12px;
    border: none;
    background-color: #f5f5f7;
    border-radius: 8px;
    color: #666;
    cursor: pointer;
    font-size: 0.9em;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 5px;
}

#clear-button:hover {
    background-color: rgba(255, 59, 48, 0.1);
    color: #ff3b30;
}

h1 {
    color: #4a90e2;
    /* 蓝色标题 */
    margin: 0;
    flex-grow: 1;
    font-size: 1.5em;
    text-align: left;
    /* 左对齐 */
}

.mode-indicator {
    text-align: center;
    font-size: 0.9em;
    color: #666;
    margin-bottom: 15px;
    padding: 5px;
    border-radius: 4px;
    background-color: #f7f7f7;
}

.mode-indicator.writer-mode {
    color: white;
    background-color: #4a90e2;
}

.chat-container {
    flex: 1;
    min-height: 0;
    background-color: #ffffff;
    overflow-y: auto;
    padding: 20px;
    margin: 0 auto;
    border-radius: 0;
    box-shadow: none;
    max-width: 100%;
    width: 100%;
}

.message {
    margin-bottom: 20px;
    padding: 15px;
    border-radius: 5px;
    max-width: 90%;
    /* 增加最大宽度 */
    font-size: 0.9em;
    box-shadow: none;
    border: none;
    /* white-space: pre-wrap; */
    /* 保留换行和空格 */
    word-break: break-word;
    /* 长单词换行 */
}

/* 修复段落和换行显示 */
.message p {
    margin-bottom: 0.8em;
    line-height: 1.8;
    margin-block-end: 0px;
    margin-block-start: 0px;
}

.message p:last-child {
    margin-bottom: 0;
}

.message br {
    display: block;
    /* 确保换行显示 */
    content: "";
    /* 清除任何内容 */
    margin-top: 0.5em;
    /* 添加上边距 */
}

.message p:empty {
    min-height: 1em;
    /* 确保空段落有高度 */
}

/* 消息内容容器样式 */
.message-content {
    width: 100%;
}

.message-content>*:first-child {
    margin-top: 0;
}

.message-content>*:last-child {
    margin-bottom: 0;
}

.user {
    background-color: #f7f7f7;
    /* Claude用户消息背景色 */
    color: #333;
    margin-right: 0;
    border-bottom-right-radius: 0;
}

.assistant {
    background-color: #f0f7ff;
    /* 浅蓝色背景 */
    color: #333;
    margin-right: auto;
    margin-left: 0;
    border-left: 3px solid #4a90e2;
    /* 蓝色左侧边框 */
    border-bottom-left-radius: 0;
    position: relative;
    padding-right: 45px;
    /* 为复制按钮留出空间 */
}

.assistant a {
    color: #4a90e2;
    /* 蓝色链接 */
    text-decoration: none;
}

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

.assistant h1 {
    font-size: 1em;
    margin: 0 0;
    text-align: left;
}

.assistant h2 {
    font-size: 1em;
    margin: 0 0;
    text-align: left;
}

.assistant h3 {
    font-size: 1em;
    margin: 0 0;
    text-align: left;
}

.assistant ul,
.assistant ol {
    margin: 0.5em 0;
    padding-left: 1.5em;
}

.assistant li {
    margin-bottom: 0.3em;
}

.input-area {
    position: sticky;
    bottom: 0;
    background-color: #fff;
    padding: 10px 20px;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
    z-index: 10;
}

.text-input-area {
    position: relative;
    display: flex;
    align-items: center;
    background-color: white;
    border-radius: 18px;
    padding: 0 50px 0 10px;
    /* 增加右侧内边距，确保足够空间放置发送按钮 */
    width: 90%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.3s;
}

#user-input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 8px;
    min-height: 24px;
    max-height: 150px;
    resize: none;
    outline: none;
    font-family: inherit;
    font-size: 1em;
    line-height: 1.4;
    overflow-y: auto;
}

#user-input:focus {
    border-color: hsl(14.67deg 55.56% 52.35%);
    /* Claude更准确的紫色 */
}

#send-button {
    position: absolute;
    right: 8px;
    /* 调整右侧位置 */
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    /* 统一大小 */
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: hsl(14.67deg 55.56% 52.35%);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
    z-index: 10;
    padding: 0;
    overflow: visible;
}

#send-button i {
    font-size: 16px;
    /* 确保图标大小合适 */
    position: relative;
    z-index: 2;
}

#send-button:hover {
    background-color: #4D3967;
    /* 深一点的紫色 */
}

#loading {
    display: none;
    text-align: center;
    color: #666;
    margin: 20px 0;
    font-size: 14px;
}

.typing {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: hsl(14.67deg 55.56% 52.35%);
    /* Claude更准确的紫色 */
    margin: 0 3px;
    animation: typing 1.4s infinite ease-in-out both;
}

.typing:nth-child(2) {
    animation-delay: 0.2s;
}

.typing:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typing {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

/* 简约思考过程显示样式 */
.thinking-container {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #e9ecef;
}

.thinking-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #6c757d;
}

.thinking-header i {
    font-size: 14px;
    color: #868e96;
    animation: pulse 2s infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

#thinking-text {
    font-size: 13px;
    color: #495057;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

pre {
    background-color: #f7f7f7;
    /* Claude代码块背景色 */
    padding: 15px;
    border-radius: 5px;
    overflow-x: auto;
    margin: 15px 0;
    border: none;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
    font-size: 0.9em;
}

code {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
    background-color: #f7f7f7;
    padding: 2px 4px;
    border-radius: 3px;
}

.file-upload-area {
    display: flex;
    align-items: center;
    margin-right: 10px;
    z-index: 5;
    position: relative;
}

.file-upload-button {
    background-color: transparent;
    color: hsl(14.67deg 55.56% 52.35%);
    /* Claude更准确的紫色 */
    border: none;
    padding: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.9em;
}

.file-upload-button:hover {
    color: #4D3967;
    /* 深一点的紫色 */
}

#file-upload {
    display: none;
}

.file-list {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 5px;
    border-radius: 5px;
    background-color: #f5f5f7;
    margin-bottom: 10px;
    display: none;
    /* 默认隐藏，有文件时显示 */
}

.file-item {
    display: flex;
    align-items: center;
    background-color: white;
    border: 1px solid #e0e0e0;
    border-radius: 15px;
    padding: 3px 10px;
    margin: 0;
    font-size: 0.85em;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
}

.file-item:hover {
    background-color: #f9f9f9;
    border-color: #ccc;
}

.file-item.selected {
    border-color: hsl(14.67deg 55.56% 52.35%);
    background-color: #f0f0ff;
}

.remove-file {
    margin-left: 8px;
    cursor: pointer;
    color: #ff3b30;
    font-weight: bold;
    transition: transform 0.2s ease;
}

.remove-file:hover {
    transform: scale(1.2);
}

#file-counter {
    color: #666;
    font-size: 0.9em;
}

.md-attachment {
    display: flex;
    align-items: center;
    background-color: #f0f0f0;
    border-radius: 8px;
    padding: 5px 10px;
    margin: 5px 0;
    max-width: fit-content;
}

.md-attachment i {
    margin-right: 8px;
    color: #666;
}

.system-message {
    text-align: center;
    color: #666;
    font-style: italic;
    margin: 10px 0;
    font-size: 0.9em;
}

/* 写手模式下的样式调整 */
.writer-mode-active #user-input {
    border-color: #4a90e2;
    box-shadow: 0 0 5px rgba(74, 144, 226, 0.3);
}

/* SVG预览相关样式 */
.svg-preview-container {
    margin: 20px 0;
    width: 100%;
}

.svg-preview {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.svg-title {
    margin: 0;
    padding: 8px 12px;
    background-color: #f5f5f7;
    border-bottom: 1px solid #e0e0e0;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    justify-content: space-between;
}

.svg-frame {
    padding: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
    background: repeating-conic-gradient(#f5f5f5 0% 25%, transparent 0% 50%) 50% / 20px 20px;
    overflow: auto;
    flex: 1;
}

.svg-preview.fullscreen-mode {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1000;
    border-radius: 0;
    background-color: rgba(255, 255, 255, 0.95);
    max-width: none;
    max-height: none;
    display: flex;
    flex-direction: column;
}

.fullscreen-mode .svg-frame {
    overflow: auto;
    height: 100%;
    min-height: 0;
    padding: 0;
    flex: 1 1 0%;
}

.fullscreen-mode .svg-embed {
    width: 100%;
    height: 100%;
    min-height: 0;
    min-width: 0;
    max-width: 100vw;
    max-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.fullscreen-mode .svg-embed svg {
    width: 100%;
    height: 100%;
    max-width: 100vw;
    max-height: 100vh;
    display: block;
}

.svg-controls {
    display: flex;
    justify-content: flex-end;
    gap: 5px;
    padding: 8px;
    background-color: #f5f5f7;
    border-top: 1px solid #e0e0e0;
}

.svg-controls button {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.svg-controls button:hover {
    background-color: #f0f0f0;
}

.svg-controls button i {
    font-size: 18px;
    color: #555;
}

/* 当SVG在用户消息中时的样式调整 */
.user .svg-preview {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
}

.user .svg-title {
    background-color: rgba(0, 0, 0, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.user .svg-frame {
    background: repeating-conic-gradient(rgba(255, 255, 255, 0.05) 0% 25%, rgba(255, 255, 255, 0.02) 0% 50%) 50% / 20px 20px;
}

/* Claude 主题样式 */
.chat-container {
    box-shadow: 0 4px 12px rgba(74, 144, 226, 0.1);
}

.assistant {
    border-left: 3px solid #4a90e2;
}

#send-button {
    background-color: #4a90e2;
}

.mode-indicator.writer-mode {
    background-color: #4a90e2;
}

#writer-mode-button.active {
    background-color: rgba(74, 144, 226, 0.15);
    color: #4a90e2;
}

#writer-mode-button.active:hover {
    background-color: rgba(74, 144, 226, 0.25);
}

/* 代码显示样式改进 */
pre {
    white-space: pre-wrap;
    word-wrap: break-word;
    background-color: #f9f9fb;
    padding: 10px;
    border-radius: 5px;
    overflow-x: auto;
    margin: 10px 0;
    border-left: 3px solid #4a90e2;
}

code {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
    background-color: #f7f7f7;
    padding: 2px 4px;
    border-radius: 3px;
}

/* 修正SVG代码块在pre中的显示问题 */
pre code svg {
    display: none;
}

/* 文档文件通用样式 */
.document-files {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 15px;
}

.document-file {
    background-color: #f5f5f7;
    border-radius: 8px;
    padding: 10px;
    transition: background-color 0.2s;
}

.document-file:hover {
    background-color: #e5e5ea;
}

.document-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #333;
}

.document-icon {
    font-size: 1.4em;
    margin-right: 10px;
}

.document-name {
    font-size: 0.9em;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* PDF文件特定样式 */
.pdf-file {
    border-left: 3px solid #FF5733;
}

/* 文本文件特定样式 */
.text-file {
    border-left: 3px solid #33A1FF;
}

/* Word文档特定样式 */
.doc-file {
    background-color: #E8F0FE;
    /* 淡蓝色背景 */
    border-color: #AECBFA;
}

.doc-file .document-icon {
    color: #4285F4;
    /* Google蓝色 */
}

.doc-file .document-name {
    color: #1A73E8;
    font-weight: 500;
}

/* 用户消息中文档样式的调整 */
.user .document-file {
    background-color: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.user .document-link {
    color: white;
}

/* 当拖放区域处于激活状态时的样式 */
.drag-over {
    background-color: rgba(93, 71, 119, 0.05) !important;
    border: 2px dashed hsl(14.67deg 55.56% 52.35%) !important;
}

.drag-over .text-input-area {
    border-color: hsl(14.67deg 55.56% 52.35%);
    background-color: rgba(93, 71, 119, 0.05);
}

/* 确保拖放状态下发送按钮仍然可见 */
.drag-over #send-button {
    z-index: 15;
}

.drop-zone-message {
    text-align: center;
    color: #666;
    font-size: 0.85em;
    margin: 5px 0;
    padding: 10px;
    border: 1px dashed #e5e5e5;
    border-radius: 8px;
    background-color: #f9f9f9;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    max-height: 40px;
    overflow: hidden;
}

.drop-zone-message:hover {
    border-color: hsl(14.67deg 55.56% 52.35%);
    background-color: rgba(88, 86, 214, 0.05);
}

.drop-zone-message i {
    display: block;
    font-size: 1.2em;
    margin-right: 10px;
    color: hsl(14.67deg 55.56% 52.35%);
}

.drop-zone-message p {
    margin: 0 10px 0 0;
    white-space: nowrap;
}

.drop-zone-message .hint {
    font-size: 0.8em;
    color: #888;
    display: none;
}

/* 在悬停时显示提示文本 */
.drop-zone-message:hover .hint {
    display: inline-block;
}


/* 文件预览容器 */
.file-preview-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
    max-height: 200px;
    overflow-y: auto;
    border-radius: 8px;
    background-color: #f9f9f9;
    padding: 10px;
}

.file-preview-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
}

/* 预览控制按钮 */
.preview-controls {
    position: absolute;
    top: 5px;
    right: 5px;
    display: flex;
    gap: 5px;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 4px;
    padding: 2px;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.preview-controls:hover {
    opacity: 1;
}

.preview-control-btn {
    cursor: pointer;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.7);
    transition: background-color 0.2s;
}

.preview-control-btn:hover {
    background-color: rgba(255, 255, 255, 1);
}

.remove-btn {
    color: #dc3545;
}

.view-btn,
.download-btn {
    color: #0275d8;
}

.file-item {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    background-color: #ffffff;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.file-type-icon {
    margin-right: 10px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
}

.file-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.file-name {
    font-weight: 500;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

.file-status {
    font-size: 11px;
    color: #666;
    margin-top: 2px;
}

.status-success {
    color: #28a745;
}

.file-delete {
    background: none;
    border: none;
    color: #dc3545;
    cursor: pointer;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-left: 10px;
    opacity: 0.7;
    transition: opacity 0.2s;
    border-radius: 50%;
}

.file-delete:hover {
    opacity: 1;
    background-color: rgba(220, 53, 69, 0.1);
}

/* 图片预览样式 */
.image-preview {
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    width: 150px;
    height: 150px;
    position: relative;
}

.image-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-preview .preview-name {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 4px 8px;
    font-size: 0.8em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* PDF预览样式 */
.pdf-preview {
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    width: 150px;
    height: 150px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #f9f9f9;
}

.pdf-preview-icon {
    font-size: 3em;
    color: #FF5733;
    margin-bottom: 10px;
}

.pdf-preview .preview-name {
    text-align: center;
    padding: 4px 8px;
    font-size: 0.8em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
}

/* Word文档预览样式 */
.doc-preview {
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    width: 150px;
    height: 150px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #f9f9f9;
}

.doc-preview-icon {
    font-size: 3em;
    color: #337DFF;
    margin-bottom: 10px;
}

.doc-preview .preview-name {
    text-align: center;
    padding: 4px 8px;
    font-size: 0.8em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
}

/* 文本文件预览样式 */
.text-preview {
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    width: 150px;
    height: 150px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #f9f9f9;
}

.text-preview-icon {
    font-size: 3em;
    color: #33A1FF;
    margin-bottom: 10px;
}

.text-preview .preview-name {
    text-align: center;
    padding: 4px 8px;
    font-size: 0.8em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
}

/* 小屏幕适配 */
@media (max-width: 600px) {
    .svg-preview {
        max-width: 100%;
    }

    .svg-frame {
        min-height: 150px;
    }

    .svg-embed {
        max-height: 200px;
    }

    .document-file,
    .pdf-file {
        padding: 8px;
    }

    .document-name,
    .pdf-name {
        font-size: 0.8em;
    }

    .drop-zone-message {
        padding: 8px;
        font-size: 0.8em;
        max-height: 36px;
    }

    .drop-zone-message i {
        font-size: 1em;
    }

    .text-input-area {
        flex-direction: row;
        /* 修改为行排列，确保输入框和发送按钮在同一行 */
        align-items: center;
        position: relative;
        padding-right: 45px;
        /* 确保输入框右侧有足够空间放置发送按钮 */
    }

    #user-input {
        margin-bottom: 0;
        /* 移除在移动设备上的底部外边距 */
        padding: 10px 8px;
        /* 增加垂直内边距，便于输入 */
        min-height: 40px;
        /* 确保在移动设备上有足够的触摸区域 */
    }

    #send-button {
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
        width: 36px;
        /* 在移动设备上略微增大发送按钮 */
        height: 36px;
        z-index: 10;
    }

    .image-preview,
    .pdf-preview,
    .doc-preview,
    .text-preview {
        width: 120px;
        height: 120px;
    }
}

/* 添加PDF嵌入预览框样式 */
.pdf-embed-preview {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.pdf-embed-container {
    width: 90%;
    height: 90%;
    background-color: white;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.pdf-embed-container iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.pdf-embed-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #ff3b30;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 1.2em;
    z-index: 1001;
}

/* 添加自动增高的输入框样式 */
.auto-growing-textarea {
    overflow: hidden;
    /* 隐藏滚动条 */
}


/* 图片文件容器 */
.image-files-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 15px;
}

/* 图片预览样式 */
.message .image-preview {
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    width: 200px;
    position: relative;
    background-color: #f5f5f7;
}

.message .image-preview img {
    width: 100%;
    display: block;
    max-height: 200px;
    object-fit: contain;
}

.message .image-preview .preview-name {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 4px 8px;
    font-size: 0.8em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 用户消息中的图片预览样式调整 */
.message.user .image-preview {
    border-color: rgba(255, 255, 255, 0.3);
    background-color: rgba(255, 255, 255, 0.1);
}

/* SVG容器样式优化 */
.svg-preview-container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 15px;
    max-width: 100%;
}

.svg-preview {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    width: 100%;
    max-width: 400px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* 文件附件通用样式增强 */
.document-files {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 15px;
}

.document-file {
    background-color: #f5f5f7;
    border-radius: 8px;
    padding: 8px 12px;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
}

.document-file:hover {
    background-color: #e5e5ea;
}

.document-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #333;
    width: 100%;
}

.document-icon {
    font-size: 1.2em;
    margin-right: 10px;
    flex-shrink: 0;
}

.document-name {
    font-size: 0.9em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 文件类型特定样式 */
.pdf-file {
    border-left: 3px solid #FF5733;
}

.text-file {
    border-left: 3px solid #33A1FF;
}

.doc-file {
    background-color: #E8F0FE;
    /* 淡蓝色背景 */
    border-color: #AECBFA;
}

.doc-file .document-icon {
    color: #4285F4;
    /* Google蓝色 */
}

.doc-file .document-name {
    color: #1A73E8;
    font-weight: 500;
}

/* 用户消息中文档样式的调整 */
.message.user .document-file {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgb(0 0 0);
}

.message.user .document-link {
    color: #000000;
}

/* React代码预览样式 */
.react-preview-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 15px;
    max-width: 100%;
}

.react-preview {
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    overflow: hidden;
    width: 100%;
    max-width: 800px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(88, 86, 214, 0.05);
}

.react-title {
    margin: 0;
    padding: 8px 12px;
    background-color: hsl(14.67deg 55.56% 52.35%);
    border-bottom: 1px solid #e0e0e0;
    font-size: 14px;
    font-weight: 500;
    color: white;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.react-code-frame {
    padding: 0;
    background-color: #282c34;
    max-height: 400px;
    overflow-y: auto;
}

.react-code {
    margin: 0;
    padding: 15px;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
    font-size: 13px;
    line-height: 1.5;
    color: #abb2bf;
    counter-reset: line;
    white-space: pre-wrap;
    /* 确保代码换行 */
    word-break: break-word;
    /* 处理长文本 */
}

/* 防止内容被意外解析为HTML */
.react-code code {
    display: block;
}

/* 代码高亮样式 */
.language-jsx {
    color: #333;
}

.token.keyword {
    color: hsl(14.67deg 55.56% 52.35%) !important;
}

.token.function {
    color: #007bff !important;
}

.token.string {
    color: #28a745 !important;
}

.token.tag {
    color: #dc3545 !important;
}

.token.attr-name {
    color: #d19a66 !important;
}

.token.number {
    color: #d19a66 !important;
}

.token.operator {
    color: #56b6c2 !important;
}

.token.punctuation {
    color: #abb2bf !important;
}

/* React组件预览按钮 */
.react-actions {
    padding: 10px 15px;
    background-color: #f9f9fb;
    border-top: 1px solid #e5e0e0;
    display: flex;
    justify-content: flex-end;
}

.react-view-btn {
    display: inline-block;
    padding: 6px 12px;
    background-color: hsl(14.67deg 55.56% 52.35%);
    color: white;
    border-radius: 4px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    transition: background-color 0.2s ease;
}

.react-view-btn:hover {
    background-color: #4D3967;
    text-decoration: none;
}


/* 用户消息中React预览样式调整 */
.user .react-preview {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
}

.user .react-title {
    background-color: rgba(97, 218, 251, 0.7);
    color: white;
    border-color: rgba(255, 255, 255, 0.2);
}

.user .react-code-frame {
    background-color: rgba(40, 44, 52, 0.8);
}

.user .react-actions {
    background-color: rgba(245, 245, 247, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.user .react-view-btn {
    background-color: rgba(97, 218, 251, 0.8);
    color: white;
}

/* 响应式设计调整 */
@media (max-width: 600px) {
    .react-preview {
        max-width: 100%;
    }

    .react-code {
        font-size: 12px;
    }

    .react-actions {
        padding: 8px;
    }

    .react-view-btn {
        padding: 4px 8px;
        font-size: 11px;
    }
}

/* 改进的React代码预览样式 */
.react-preview-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 15px;
    max-width: 100%;
}

.react-preview {
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    overflow: hidden;
    width: 100%;
    max-width: 800px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(88, 86, 214, 0.05);
}

.react-title {
    margin: 0;
    padding: 8px 12px;
    background-color: hsl(14.67deg 55.56% 52.35%);
    border-bottom: 1px solid #e0e0e0;
    font-size: 14px;
    font-weight: 500;
    color: white;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.react-code-frame {
    padding: 0;
    background-color: #282c34;
    max-height: 400px;
    overflow-y: auto;
}

.react-code {
    margin: 0;
    padding: 15px;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 13px;
    line-height: 1.5;
    color: #abb2bf;
    counter-reset: line;
    white-space: pre-wrap;
    /* 确保代码换行 */
    word-break: break-word;
    /* 确保长行正确折行 */
}

/* 代码语法高亮样式 */
.language-jsx {
    color: #333;
}

.token.keyword {
    color: hsl(14.67deg 55.56% 52.35%) !important;
}

.token.function {
    color: #007bff !important;
}

.token.string {
    color: #28a745 !important;
}

.token.tag {
    color: #dc3545 !important;
}

.token.attr-name {
    color: #d19a66 !important;
}

.token.number {
    color: #d19a66 !important;
}

.token.operator {
    color: #56b6c2 !important;
}

.token.punctuation {
    color: #abb2bf !important;
}

/* 确保高亮的标签显示正确 */
.token.tag::after,
.token.tag::before,
.token.attr-name::after,
.token.attr-name::before,
.token.string::after,
.token.string::before {
    color: inherit !important;
}

/* 改进预览按钮样式 */
.react-actions {
    padding: 10px 15px;
    background-color: #f9f9fb;
    border-top: 1px solid #e5e5e5;
    display: flex;
    justify-content: flex-end;
}

.react-view-btn {
    display: inline-block;
    padding: 6px 12px;
    background-color: hsl(14.67deg 55.56% 52.35%);
    color: white;
    border-radius: 4px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    transition: background-color 0.2s ease;
}

.react-view-btn:hover {
    background-color: #4D3967;
    text-decoration: none;
}

/* 防止HTML内容被误渲染 */
.react-code code {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 13px;
}

/* 文件上传进度条容器 */
.upload-progress-container {
    margin: 10px 0;
    display: none;
    /* 默认隐藏 */
    width: 100%;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.upload-progress-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
    color: hsl(14.67deg 55.56% 52.35%);
    font-size: 0.85em;
}

.upload-progress-bar {
    height: 8px;
    background-color: #f1f0ff;
    border-radius: 4px;
    overflow: hidden;
}

.upload-progress-fill {
    background-color: hsl(14.67deg 55.56% 52.35%);
    /* Claude更准确的紫色 */
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
    background-image: linear-gradient(45deg,
            rgba(255, 255, 255, 0.15) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, 0.15) 50%,
            rgba(255, 255, 255, 0.15) 75%,
            transparent 75%,
            transparent);
    background-size: 40px 40px;
    animation: progress-bar-stripes 2s linear infinite;
}

@keyframes progress-bar-stripes {
    from {
        background-position: 1rem 0;
    }

    to {
        background-position: 0 0;
    }
}

/* 上传中禁用按钮样式 */
#send-button:disabled,
#send-button.disabled,
#send-button.force-disabled {
    background-color: #cccccc;
    cursor: not-allowed;
    opacity: 0.7;
}

#send-button:not(.force-disabled) {
    opacity: 1;
}

/* 发送按钮的激活和悬停效果 */
#send-button:not(:disabled):hover,
#send-button:not(:disabled):focus,
#send-button:not(.disabled):hover,
#send-button:not(.force-disabled):hover {
    background-color: #4D3967;
    transform: translateY(-50%) scale(1.05);
}

#send-button:active {
    transform: translateY(-50%) scale(0.95);
}

/* 上传确认对话框样式 */
.upload-confirm-dialog {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.upload-confirm-content {
    background-color: white;
    border-radius: 10px;
    padding: 20px;
    width: 80%;
    max-width: 400px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.upload-confirm-content h3 {
    margin-top: 0;
    color: #333;
    font-size: 18px;
    font-weight: 500;
}

.upload-confirm-content p {
    margin: 15px 0;
    color: #555;
}

.upload-confirm-buttons {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}

.upload-confirm-button {
    background-color: hsl(14.67deg 55.56% 52.35%);
    /* Claude更准确的紫色 */
    color: white;
    border: none;
    border-radius: 5px;
    padding: 8px 16px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s;
}

.upload-confirm-button:hover {
    background-color: #4D3967;
    /* 深一点的紫色 */
}

/* 添加右侧知识库样式 */
.knowledge-panel {
    width: 280px;
    background-color: #ffffff;
    border-left: 1px solid #e5e5e5;
    height: 100vh;
    padding: 20px;
    overflow-y: auto;
}

.knowledge-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e5e5e5;
}

.knowledge-title {
    font-size: 16px;
    font-weight: 500;
    color: #333;
}

.knowledge-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-top: 100px;
    color: #888;
}

.knowledge-empty-icon {
    font-size: 32px;
    margin-bottom: 20px;
    color: #ddd;
}

/* 响应式布局调整 */
@media (max-width: 1200px) {
    .knowledge-panel {
        display: none;
    }
}

@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        height: auto;
        padding: 10px 0;
        flex-direction: row;
        justify-content: space-between;
        border-right: none;
        border-bottom: 1px solid #e5e5e5;
        position: sticky;
        top: 0;
        z-index: 100;
    }

    .sidebar-header {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .sidebar-menu {
        display: flex;
        align-items: center;
        padding-right: 15px;
    }

    .sidebar-item {
        margin-left: 15px;
    }

    .main-content {
        height: calc(100 * var(--vh) - 50px);
        overflow: hidden;
    }

    .chat-container {
        flex: 1;
        min-height: 0;
        padding: 10px;
        max-width: 100%;
        width: 100%;
    }

    .message {
        max-width: 90%;
    }

    .knowledge-panel {
        display: none;
        /* 在移动端隐藏知识面板 */
    }

    .header {
        padding: 12px;
        flex-direction: column;
        align-items: flex-start;
    }

    .header h1 {
        margin-bottom: 10px;
    }

    .header-buttons {
        width: 100%;
        justify-content: space-between;
    }

    .mode-buttons {
        flex-grow: 1;
        margin-right: 8px;
    }

    #writer-mode-button,
    #editor-mode-button {
        flex: 1;
        justify-content: center;
        padding: 6px 8px;
        font-size: 0.85em;
    }

    #clear-button {
        padding: 6px 8px;
        font-size: 0.85em;
    }
}

@media (max-width: 480px) {
    .sidebar-logo span {
        display: none;
    }

    .message {
        max-width: 95%;
        padding: 10px;
        margin-bottom: 15px;
    }

    .chat-container {
        flex: 1;
        min-height: 0;
        padding: 10px 5px;
        max-width: 100%;
        width: 100%;
    }

    .text-input-area {
        padding: 6px;
    }

    #writer-mode-button span,
    #editor-mode-button span,
    #clear-button span {
        display: none;
    }

    #writer-mode-button,
    #editor-mode-button,
    #clear-button {
        padding: 8px;
    }

    #writer-mode-button i,
    #editor-mode-button i,
    #clear-button i {
        margin: 0;
    }
}

/* 添加侧边栏菜单项样式 */
.sidebar-menu {
    display: flex;
    flex-direction: column;
    padding: 0 15px;
}

.sidebar-item {
    padding: 12px 15px;
    display: flex;
    align-items: center;
    color: #333;
    cursor: pointer;
    transition: background-color 0.3s;
    border-radius: 8px;
    margin: 4px 0;
}

.sidebar-item:hover {
    background-color: rgba(93, 71, 119, 0.1);
}

.sidebar-item.active {
    background-color: hsl(48deg 25% 92.16%);
    color: hsl(14.67deg 55.56% 52.35%);
    font-weight: 500;
}

.sidebar-item i {
    margin-right: 10px;
    font-size: 1.2em;
}

/* 知识库添加按钮样式 */
.knowledge-add-btn {
    background-color: transparent;
    border: none;
    color: hsl(14.67deg 55.56% 52.35%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.knowledge-add-btn:hover {
    background-color: rgba(93, 71, 119, 0.1);
}

/* 添加变量以便处理移动端屏幕 */
:root {
    --vh: 1vh;
}

/* 修复移动端视口高度问题 */
.container {
    height: calc(100 * var(--vh)) !important;
}

/* 移动端样式优化 */
@media (max-width: 768px) {
    body {
        font-size: 14px;
        overflow: hidden;
    }

    .main-content {
        height: calc(100 * var(--vh) - 50px);
        overflow: hidden;
    }

    .chat-container {
        flex: 1;
        min-height: 0;
        padding: 10px;
        max-width: 100%;
        width: 100%;
    }

    .file-upload-button {
        width: 32px;
        height: 32px;
    }

    #send-button {
        width: 36px;
        /* 增加按钮尺寸，确保在移动设备上更容易点击 */
        height: 36px;
        right: 8px;
        font-size: 16px;
        /* 确保图标大小合适 */
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* 确保发送按钮在UI层级最高，不会被其他元素遮挡 */
    #send-button i {
        position: relative;
        z-index: 10;
    }

    .text-input-area {
        border-radius: 16px;
        padding: 5px 40px 5px 35px;
    }

    .drag-over .text-input-area {
        background-color: rgba(93, 71, 119, 0.05);
    }

    .file-preview-container {
        max-height: 120px;
    }

    .upload-progress-container {
        margin: 5px 0;
    }
}

/* 确保上传按钮可点击 */
.file-upload-area {
    z-index: 5;
    position: relative;
}

/* 确保发送按钮正常工作 */
#send-button {
    z-index: 10;
    outline: none !important;
    transition: background-color 0.2s ease, transform 0.2s ease;
    padding: 0;
    overflow: visible;
}

#send-button:not(:disabled):hover,
#send-button:not(:disabled):focus {
    background-color: #4D3967;
}

/* 确保所有交互元素有明确的激活状态 */
button:active,
.file-upload-button:active,
#send-button:active {
    transform: scale(0.95);
}

/* 已上传文件的样式 */
.uploaded-file {
    position: relative;
}

.upload-status {
    position: absolute;
    top: 5px;
    left: 5px;
    background-color: rgba(40, 167, 69, 0.8);
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: bold;
}

/* 通用文件预览样式 */
.generic-preview {
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    width: 150px;
    height: 150px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #f9f9f9;
}

.generic-preview-icon {
    font-size: 3em;
    color: #666;
    margin-bottom: 10px;
}

.generic-preview .preview-name {
    text-align: center;
    padding: 4px 8px;
    font-size: 0.8em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
}

/* 知识面板文件显示区域样式 */
.knowledge-files-container {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.knowledge-file-item {
    display: flex;
    align-items: center;
    padding: 12px;
    background-color: #f9f9f9;
    border-radius: 8px;
    border: 1px solid #e5e5e5;
    transition: all 0.2s ease;
    position: relative;
}

.knowledge-file-item:hover {
    background-color: #f0f0f0;
    border-color: #d5d5d5;
}

.knowledge-file-icon {
    margin-right: 12px;
    font-size: 20px;
    color: hsl(14.67deg 55.56% 52.35%);
}

.knowledge-file-info {
    flex: 1;
    overflow: hidden;
    cursor: pointer;
}

.knowledge-file-name {
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #333;
    margin-bottom: 4px;
}

.knowledge-file-size {
    font-size: 12px;
    color: #888;
}

/* 知识面板文件删除按钮样式 */
.knowledge-file-delete {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    color: #666;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
    line-height: 1;
}

.knowledge-file-delete:hover {
    background-color: #e74c3c;
    color: white;
    border-color: #e74c3c;
}

/* 移动设备适配 */
@media (max-width: 768px) {
    #send-button {
        width: 28px;
        height: 28px;
        right: 8px;
    }

    .knowledge-file-item {
        padding: 8px;
    }

    .knowledge-file-icon {
        font-size: 16px;
    }

    .knowledge-file-delete {
        width: 20px;
        height: 20px;
        font-size: 14px;
    }
}

/* 用户信息和登出按钮样式 */
.sidebar-user-info {
    margin-top: auto;
    padding: 15px;
    border-top: 1px solid #e5e5e5;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.user-greeting {
    font-size: 14px;
    color: #666;
    margin-bottom: 5px;
}

.logout-button {
    display: flex;
    align-items: center;
    gap: 8px;
    color: hsl(14.67deg 55.56% 52.35%);
    text-decoration: none;
    padding: 8px 10px;
    border-radius: 8px;
    transition: background-color 0.3s;
    font-size: 14px;
}

.logout-button:hover {
    background-color: rgba(93, 71, 119, 0.1);
}

.logout-button i {
    font-size: 16px;
}

/* 适配不同设备尺寸 */
@media (max-width: 1200px) {
    .input-area {
        padding: 10px 15px;
        /* 减少宽屏设备上的水平内边距 */
    }
}

@media (max-width: 768px) {
    .input-area {
        padding: 10px;
        /* 进一步减少中等设备上的内边距 */
    }

    .text-input-area {
        border-radius: 14px;
        /* 略微减小边框圆角 */
    }
}

@media (max-width: 600px) {
    .input-area {
        padding: 8px;
        /* 减少移动设备上的内边距 */
    }

    .text-input-area {
        padding-right: 45px;
        /* 确保发送按钮有足够空间 */
        border-radius: 14px;
    }
}

/* 表格样式 */
/* 移除不再使用的 .table-container
.table-container {
    overflow-x: auto; 
    margin-bottom: 1em;
}
*/

/* 直接选择消息内容中的表格 */
.message .message-content table {
    border-collapse: collapse;
    width: auto;
    /* 改为 auto 或 max-content 避免宽度问题 */
    min-width: 60%;
    /* 设置一个最小宽度 */
    margin-bottom: 1em;
    border: 1px solid #ddd;
    font-size: 0.95em;
    /* 稍微调整字体大小 */
}

/* Dashboard Header Styles */
.header-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

.page-title {
    display: flex;
    align-items: center;
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

.page-title i {
    margin-right: 8px;
    font-size: 20px;
    color: #4a90e2;
}

.user-profile {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.user-info-display {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-right: 10px;
}

.user-vip-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    margin-top: 2px;
}

.user-vip-badge i {
    margin-right: 4px;
    font-size: 14px;
}

.vip-free {
    background-color: #f0f0f0;
    color: #666;
}

.vip-basic {
    background-color: #e6f7ff;
    color: #1890ff;
}

.vip-advanced {
    background-color: #f6ffed;
    color: #52c41a;
}

.vip-pro {
    background-color: #fff7e6;
    color: #fa8c16;
}


.message .message-content th,
.message .message-content td {
    border: 1px solid #ddd;
    padding: 8px 12px;
    /* 调整内边距 */
    text-align: left;
    line-height: 1.4;
    /* 调整行高 */
}

.message .message-content th {
    background-color: #f2f2f2;
    font-weight: 600;
    /* 加粗表头 */
}

.message .message-content tr:nth-child(even) {
    background-color: #f9f9f9;
}

.message .message-content tr:hover {
    background-color: #e9e9e9;
}

/* 修改流式输出的表格样式 */
.message .message-content pre {
    white-space: pre-wrap;
}

/* 修改使用+和-字符构成的ASCII表格样式 */
.message .message-content pre:has(code:contains("+----")) {
    font-family: monospace;
    line-height: 1.2;
}

/* 将用+和-字符组成的ASCII表格边框从虚线修改为实线 */
.message-table {
    border-collapse: collapse;
    width: auto;
    min-width: 60%;
    margin-bottom: 1em;
    font-family: monospace;
}

.message-table td {
    border: 1px solid #ddd;
    padding: 8px 12px;
    text-align: left;
}

.message-table th {
    border: 1px solid #ddd;
    padding: 8px 12px;
    text-align: left;
    background-color: #f2f2f2;
    font-weight: 600;
}

/* 用户消息中的表格样式（如果需要区分） */
.message.user .message-content table {
    /* 可以为用户消息中的表格添加特定样式 */
    border-color: #cce5ff;
    /* 示例：不同边框色 */
}

.message.user .message-content th {
    background-color: #e6f2ff;
    /* 示例：不同表头背景 */
}

.message.user .message-content td {
    /* 保持默认或添加其他样式 */
    margin-block-end: 0px;
}

.message.user .message-content tr:nth-child(even) {
    background-color: #f0f8ff;
    /* 示例：不同偶数行背景 */
}

.message.user .message-content tr:hover {
    background-color: #d9ecff;
    /* 示例：不同悬停背景 */
}


@media (max-width: 600px) {

    /* 在小屏幕上允许表格水平滚动 */
    .message .message-content table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        width: 100%;
        /* 确保可滚动 */
    }

    .message .message-content th,
    .message .message-content td {
        /* white-space: nowrap; */
        /* 允许内容换行可能更好 */
        padding: 6px 8px;
        /* 减小内边距 */
    }
}

/* Markdown格式化 - 加粗和斜体 */
.message strong,
.message b {
    font-weight: bold;
    color: inherit;
}

.message em,
.message i {
    font-style: italic;
    color: inherit;
}

/* 用户消息中的加粗和斜体 */
.message.user strong,
.message.user b,
.message.user em,
.message.user i {
    color: #fff;
}

.copy-button {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid #ddd;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.2s, background-color 0.2s;
    z-index: 10;
    pointer-events: auto;
}

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

.copy-button:hover {
    background-color: #f0f0f0;
    transform: scale(1.1);
    opacity: 1;
}

.copy-button i {
    font-size: 16px;
    color: hsl(14.67deg 55.56% 52.35%);
}

.copy-button i.ri-check-line {
    color: #28a745;
}

.error-message {
    background-color: #fff2f0;
    border-left: 4px solid #ff4d4f;
    color: #cf1322;
}

.error-message i {
    color: #ff4d4f;
    margin-right: 8px;
}

.error-title {
    font-weight: bold;
    margin-bottom: 5px;
}

.error-hint {
    margin-top: 8px;
    font-style: italic;
    opacity: 0.8;
}

/* 禁用输入框样式 */
.text-input-area .force-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

textarea:disabled {
    cursor: not-allowed;
    color: #999;
}

#stop-button {
    position: absolute;
    right: 8px;
    /* 或根据布局调整 */
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    background-color: #ff3b30;
    border: none;
    border-radius: 50%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.2em;
    transition: background-color 0.2s;
    z-index: 11;
    /* 确保在发送按钮之上 */
}

#stop-button:hover {
    background-color: #e02b21;
}

#stop-button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

/* 调整发送按钮位置以适应停止按钮 */
.text-input-area.streaming #send-button {
    right: 50px;
    /* 当停止按钮显示时，给发送按钮留出空间 */
}

/* 对话标题样式 */
.conversation-title-container {
    display: flex;
    align-items: center;
    margin-left: auto;
    background-color: #f5f5f7;
    border-radius: 8px;
    padding: 5px 10px;
    max-width: 200px;
    position: relative;
}

.conversation-title {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    margin-right: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    padding: 2px 5px;
    border-radius: 4px;
}

.conversation-title.editing {
    background-color: #fff;
    border: 1px solid #4a90e2;
    outline: none;
    padding: 2px 4px;
}

.edit-title-btn {
    background: transparent;
    border: none;
    color: #666;
    cursor: pointer;
    padding: 3px;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.edit-title-btn:hover {
    background-color: rgba(74, 144, 226, 0.1);
    color: #4a90e2;
}

.save-title-btn,
.cancel-title-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 3px;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    margin-left: 2px;
}

.save-title-btn {
    color: #4a90e2;
}

.save-title-btn:hover {
    background-color: rgba(74, 144, 226, 0.1);
}

.cancel-title-btn {
    color: #ff3b30;
}

.cancel-title-btn:hover {
    background-color: rgba(255, 59, 48, 0.1);
}

@media (max-width: 768px) {
    .conversation-title-container {
        max-width: 140px;
        padding: 3px 6px;
    }

    .conversation-title {
        font-size: 12px;
    }

    .edit-title-btn,
    .save-title-btn,
    .cancel-title-btn {
        padding: 2px;
        font-size: 12px;
    }
}

/* 增强移动端响应式设计 - 更新后的媒体查询 */
@media only screen and (max-width: 768px) {

    /* 基础容器布局 */
    body {
        font-size: 14px;
    }

    .container {
        flex-direction: column;
        width: 100%;
        height: 100vh;
        overflow-x: hidden;
    }

    /* 侧边栏适配 */
    .sidebar {
        height: auto;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 1000;
        background-color: #fff;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
        flex-direction: row;
        justify-content: space-around;
        padding: 10px 0;
        border-top: 1px solid #eee;
        border-right: none;
    }

    .sidebar-logo,
    .sidebar-search,
    .recents-header,
    .recent-chats-container {
        display: none;
    }

    .sidebar-menu {
        display: flex;
        flex-direction: row;
        width: 100%;
        padding: 0;
        justify-content: space-around;
        margin: 0;
    }

    .sidebar-item {
        flex-direction: column;
        font-size: 12px;
        padding: 8px;
        margin: 0;
        text-align: center;
        gap: 5px;
        width: auto;
        flex: 1;
    }

    .sidebar-item i {
        font-size: 20px;
        margin-right: 0;
    }

    .sidebar-user-info {
        display: none;
    }

    /* 主内容区适配 */
    .main-content {
        height: calc(100vh - 60px);
        width: 100%;
        padding-bottom: 60px;
        /* 为底部导航腾出空间 */
    }

    .header {
        padding: 10px;
    }

    .header-buttons {
        flex-wrap: wrap;
    }

    /* 聊天容器适配 */
    .chat-container {
        padding: 10px;
        height: calc(100vh - 120px);
    }

    .message {
        max-width: 92%;
        padding: 12px;
        margin-bottom: 15px;
    }

    /* 输入区域适配 */
    .input-area {
        padding: 8px;
        bottom: 60px;
        /* 为底部导航栏留出空间 */
    }

    .text-input-area {
        padding: 8px;
        border-radius: 18px;
    }

    #user-input {
        height: 40px;
        max-height: 80px;
        font-size: 14px;
    }

    #send-button {
        width: 40px;
        height: 40px;
    }

    /* 信息中心适配 */
    .dashboard-container {
        flex-direction: column;
        padding: 10px;
        height: calc(100vh - 120px);
    }

    .dashboard-main,
    .dashboard-sidebar {
        width: 100%;
    }

    .dashboard-sidebar {
        order: -1;
        /* 在移动端将侧边栏内容移到顶部 */
    }

    .info-card {
        margin-bottom: 15px;
    }

    /* 卡片内容适配 */
    .card-content {
        padding: 10px;
    }

    .quick-action-button {
        padding: 10px;
        font-size: 12px;
    }

    /* 表格和代码块适配 */
    .message-content pre,
    .message-content table {
        max-width: 100%;
        overflow-x: auto;
        font-size: 12px;
    }

    /* 图像和文件预览适配 */
    .image-preview,
    .pdf-preview,
    .doc-preview {
        max-width: 100%;
        margin-bottom: 10px;
    }

    /* 自定义滚动条 */
    ::-webkit-scrollbar {
        width: 4px;
        height: 4px;
    }

    /* 底部状态指示器 - 显示当前页面位置 */
    .mobile-status-indicator {
        display: flex;
        position: fixed;
        bottom: 5px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1001;
        gap: 4px;
    }

    .mobile-status-indicator .dot {
        width: 6px;
        height: 6px;
        background-color: rgba(0, 0, 0, 0.2);
        border-radius: 50%;
    }

    .mobile-status-indicator .dot.active {
        background-color: #4a90e2;
        width: 12px;
        border-radius: 6px;
    }
}

/* 额外的小屏幕设备适配 */
@media only screen and (max-width: 480px) {
    body {
        font-size: 13px;
    }

    .header-buttons {
        gap: 5px;
    }

    .message {
        max-width: 95%;
        padding: 10px;
    }

    /* 隐藏部分UI元素以简化界面 */
    .mode-buttons span {
        display: none;
    }

    #clear-button span {
        display: none;
    }

    /* 调整操作按钮大小 */
    .mode-buttons button,
    #clear-button {
        padding: 8px;
    }

    .quick-action-button {
        flex-basis: calc(50% - 10px);
        /* 一行两个按钮 */
    }

    /* 增强文本可读性 */
    .message p {
        line-height: 1.6;
    }
}

/* 处理极小屏幕设备 */
@media only screen and (max-width: 360px) {
    .sidebar-item {
        padding: 5px;
    }

    .sidebar-item i {
        font-size: 18px;
    }

    .text-input-area {
        padding: 6px;
    }

    #user-input {
        font-size: 13px;
    }
}

/* 处理横屏模式 */
@media screen and (orientation: landscape) and (max-height: 500px) {
    .sidebar {
        height: 50px;
    }

    .main-content {
        padding-bottom: 50px;
    }

    .input-area {
        bottom: 50px;
    }

    .sidebar-item i {
        font-size: 16px;
    }

    .sidebar-item span {
        font-size: 10px;
    }
}

/* 基于设备类型的样式切换 */
body.mobile-device .desktop-only {
    display: none !important;
}

body.desktop-device .mobile-only {
    display: none !important;
}

/* 移动设备布局调整 */
body.mobile-device {
    font-size: 14px;
    line-height: 1.5;
}

body.mobile-device .container {
    flex-direction: column;
    overflow-x: hidden;
}

body.mobile-device .sidebar {
    height: auto;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1000;
    background-color: #fff;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    flex-direction: row;
    justify-content: space-around;
    padding: 10px 0;
    border-top: 1px solid #eee;
    border-right: none;
}

body.mobile-device .sidebar-logo,
body.mobile-device .sidebar-search,
body.mobile-device .recents-header,
body.mobile-device .recent-chats-container {
    display: none;
}

body.mobile-device .sidebar-menu {
    display: flex;
    flex-direction: row;
    width: 100%;
    padding: 0;
    justify-content: space-around;
    margin: 0;
}

body.mobile-device .sidebar-item {
    flex-direction: column;
    font-size: 12px;
    padding: 8px;
    margin: 0;
    text-align: center;
    gap: 5px;
    width: auto;
    flex: 1;
}

body.mobile-device .sidebar-item i {
    font-size: 20px;
    margin-right: 0;
}

body.mobile-device .sidebar-user-info {
    display: none;
}

body.mobile-device .main-content {
    flex: none !important;
    /* 覆盖桌面版的 flex: 1 行为 */
    display: flex !important;
    /* 保持或确保其内部仍为flex布局（通常是列式） */
    flex-direction: column !important;
    /* 保持或确保其内部为列式布局 */
    width: 100% !important;
    /* 占据父容器（body.mobile-device .container）的全部宽度 */
    height: calc(100 * var(--vh)) !important;
    /* 有效地设置为视口高度 */
    box-sizing: border-box !important;
    /* padding 和 border 不会增加额外尺寸 */
    padding-top: 0 !important;
    /* 假设页面头部（如果有）在main-content内部或者独立处理 */
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 75px !important;
    /* 为底部导航栏留出空间 (假设底部导航栏高度为75px) */
    overflow-y: auto !important;
    /* 允许内容垂直滚动 */
    overflow-x: hidden !important;
    /* 禁止内容水平滚动 */
    /* display: flex and flex-direction: column should be inherited or re-added if necessary */
}

body.mobile-device .input-area {
    padding: 8px;
    bottom: 75px;
    /* Adjust to sit above the ~75px bottom nav bar */
    /* Ensure other properties like position: fixed/sticky are appropriate for mobile */
    /* position: fixed; width: 100%; box-sizing: border-box; left:0; might be needed if not already sticky correctly */
}

/* 聊天界面移动端优化 */
body.mobile-device .chat-container {
    padding: 10px;
    height: calc(100vh - 120px);
}

body.mobile-device .message {
    max-width: 92%;
    padding: 12px;
    margin-bottom: 15px;
}

/* 信息中心移动端优化 */
body.mobile-device .dashboard-container {
    flex-direction: column;
    padding: 10px;
    height: calc(100vh - 120px);
}

body.mobile-device .dashboard-main,
body.mobile-device .dashboard-sidebar {
    width: 100%;
}

body.mobile-device .dashboard-sidebar {
    order: -1;
}

/* 触摸优化 - 增大点击区域 */
body.mobile-device .quick-action-button,
body.mobile-device .form-group input,
body.mobile-device .form-group button,
body.mobile-device .nav-tab,
body.mobile-device .header-button {
    min-height: 44px;
    /* Apple推荐的最小触摸目标高度 */
}

/* 增强移动端响应式设计 - 更新后的媒体查询 */
/* 或者直接使用 body.mobile-device 选择器，如果已在用 */

body.mobile-device .sidebar {
    height: auto !important;
    /* 确保覆盖桌面版高度 */
    position: fixed !important;
    /* 强制固定定位 */
    bottom: 0 !important;
    /* 定位到底部 */
    left: 0 !important;
    /* 左侧延展 */
    right: 0 !important;
    /* 右侧延展 */
    width: 100% !important;
    /* 强制全宽 */
    z-index: 1000 !important;
    /* 确保在顶层 */
    background-color: #fff !important;
    /* 强制背景色 */
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1) !important;
    /* 强制阴影 */
    display: flex !important;
    /* 确保为flex容器 */
    flex-direction: row !important;
    /* 子元素横向排列 (主要指sidebar-menu) */
    justify-content: space-around !important;
    /* 子元素均匀分布 */
    padding: 8px 0 !important;
    /* 调整内边距 */
    border-top: 1px solid #eee !important;
    /* 顶部边框 */
    border-right: none !important;
    /* 移除桌面版右边框 */
}

body.mobile-device .sidebar-header {
    /* 新增：隐藏整个头部区域 */
    display: none !important;
}

/* 以下是已有的隐藏规则，保持，确保它们配合生效 */
body.mobile-device .sidebar-logo,
body.mobile-device .sidebar-search,
body.mobile-device .recents-header,
body.mobile-device .recent-chats-container {
    display: none !important;
}

/* 移动端底部导航菜单项的样式调整 */
body.mobile-device .sidebar-menu {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    justify-content: space-around !important;
    padding: 0 !important;
    /* 清除可能存在的内边距 */
}

body.mobile-device .sidebar-menu .sidebar-item {
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 5px 3px !important;
    /* 调整内边距 */
    margin-bottom: 0 !important;
    color: #555 !important;
    font-weight: normal !important;
    border-radius: 0 !important;
    /* 移除桌面版圆角 */
    background-color: transparent !important;
    /* 确保背景透明 */
}

body.mobile-device .sidebar-menu .sidebar-item.active {
    color: #4a90e2 !important;
    /* 移动端激活颜色 */
    background-color: transparent !important;
    /* 激活项通常无背景 */
}

body.mobile-device .sidebar-menu .sidebar-item.active i,
body.mobile-device .sidebar-menu .sidebar-item.active span {
    color: #4a90e2 !important;
    /* 确保激活状态下图标和文字都变色 */
}


body.mobile-device .sidebar-menu .sidebar-item i {
    font-size: 20px !important;
    /* 调整图标大小 */
    margin-right: 0 !important;
    margin-bottom: 2px !important;
    /* 图标和文字间距 */
    color: inherit;
    /* 继承父元素 .sidebar-item 的颜色 */
}

body.mobile-device .sidebar-menu .sidebar-item span {
    display: block !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
    color: inherit;
    /* 继承父元素 .sidebar-item 的颜色 */
}

/* 确保主内容区不会被底部导航遮挡 */
body.mobile-device .main-content {
    /* padding-bottom 应该已在之前的步骤中设置过，例如 70px 或 75px */
    /* 如果没有，可以在这里补充，例如： */
    /* padding-bottom: 75px !important; */
    /* height or min-height might need adjustment too */
    /* height: calc((var(--vh, 1vh) * 100) - 75px) !important; /* 75px是假设的底部导航高度 */
    /* overflow-y: auto !important; */
}

/* 如果聊天界面的输入框也需要调整位置 */
body.mobile-device .input-area {
    /* bottom 应该已在之前的步骤中设置过，例如 75px */
    /* bottom: 75px !important; */
}

/* =================================== */
/* MOBILE OVERRIDES (max-width: 768px) */
/* =================================== */

body.mobile-device {
    overflow-x: hidden;
    /* 防止水平滚动 */
    -webkit-overflow-scrolling: touch;
    /* 改善iOS上的滚动体验 */
}

/* --- 强制隐藏桌面版侧边栏，并确保底部导航栏样式 --- */
body.mobile-device .sidebar {
    display: flex !important;
    /* 确保底部导航是flex容器 */
    flex-direction: row !important;
    /* 水平排列项目 */
    justify-content: space-around !important;
    /* 均匀分布项目 */
    align-items: center !important;
    /* 垂直居中项目 */
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 65px !important;
    /* 固定的底部导航高度 */
    background-color: #ffffff !important;
    border-top: 1px solid #e0e0e0 !important;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08) !important;
    z-index: 1000 !important;
    padding: 0 !important;
    /* 移除内边距，让子元素控制 */
}

/* --- 隐藏桌面侧边栏的特定子元素 --- */
body.mobile-device .sidebar .sidebar-header,
body.mobile-device .sidebar .sidebar-search,
body.mobile-device .sidebar .recents-header,
body.mobile-device .sidebar .recent-chats-container,
body.mobile-device .sidebar .sidebar-user-info {
    display: none !important;
}

/* --- 调整底部导航栏菜单项 --- */
body.mobile-device .sidebar .sidebar-menu {
    display: flex !important;
    flex-direction: row !important;
    /* 确保菜单项水平排列 */
    justify-content: space-around !important;
    /* 在整个宽度上均匀分布 */
    align-items: center !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

body.mobile-device .sidebar .sidebar-menu .sidebar-item {
    flex: 1 !important;
    /* 让每个项目占据等宽空间 */
    display: flex !important;
    flex-direction: column !important;
    /* 图标和文字垂直排列 */
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    padding: 8px 5px !important;
    /* 调整内边距 */
    font-size: 10px !important;
    /* 减小字体大小 */
    color: #5f6368 !important;
    text-decoration: none !important;
    border-radius: 0 !important;
    /* 移除圆角 */
    background-color: transparent !important;
    /* 确保背景透明 */
    border: none !important;
    /* 移除边框 */
    margin: 0 !important;
    /* 移除外边距 */
}

body.mobile-device .sidebar .sidebar-menu .sidebar-item i {
    font-size: 20px !important;
    /* 调整图标大小 */
    margin-bottom: 2px !important;
    /* 图标和文字间距 */
    margin-right: 0 !important;
    /* 移除右边距 */
}

body.mobile-device .sidebar .sidebar-menu .sidebar-item span {
    display: block !important;
    /* 确保文字显示 */
    text-align: center;
}

body.mobile-device .sidebar .sidebar-menu .sidebar-item.active {
    color: #1a73e8 !important;
    /* 激活状态颜色 */
    background-color: transparent !important;
    /* 激活状态背景 */
}

body.mobile-device .sidebar .sidebar-menu .sidebar-item.active i {
    color: #1a73e8 !important;
}

/* --- 主内容区域调整，确保它不会被底部导航栏遮挡 --- */
body.mobile-device .container {
    flex-direction: column !important;
    /* 确保主容器是列布局 */
    width: 100% !important;
    height: 100% !important;
    /* 使用 JavaScript 设置的 --vh 变量 */
    padding-bottom: 65px !important;
    /* 为底部导航栏留出空间 */
    box-sizing: border-box !important;
}

body.mobile-device .main-content {
    flex: 1 !important;
    /* 占据剩余空间 */
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
    /* 填满父容器的可用高度 */
    overflow-y: auto !important;
    /* 内容超出时允许垂直滚动 */
    overflow-x: hidden !important;
    padding: 15px !important;
    /* 统一内边距 */
    box-sizing: border-box !important;
}

/* --- 首页 (index.html) 内容特定调整 --- */
body.mobile-device.page-index .dashboard-container {
    display: flex !important;
    flex-direction: column !important;
    /* 在手机上，信息中心内部也改为列布局 */
    padding: 0 !important;
    /* 移除dashboard-container的内边距，由子元素控制 */
    gap: 10px !important;
}

body.mobile-device.page-index .dashboard-main {
    flex: none !important;
    /* 取消flex增长 */
    width: 100% !important;
    max-height: none !important;
    /* 移除最大高度限制 */
    overflow-y: visible !important;
    /* 由main-content控制滚动 */
    padding-right: 0 !important;
}

body.mobile-device.page-index .dashboard-sidebar {
    display: flex !important;
    /* 在手机端首页显示右侧面板 */
    flex-direction: column !important;
    width: 100% !important;
    gap: 8px !important;
}

/* 显示首页的快速功能卡片 */
body.mobile-device.page-index .quick-actions-card {
    display: flex !important;
    flex-direction: column !important;
}

/* 修正 create_chat.html 模式选择区域的布局 */
body.mobile-device .mode-selection-area {
    padding: 20px 15px !important;
    /* 调整内边距 */
    justify-content: flex-start !important;
    /* 从顶部开始排列 */
    overflow-y: auto !important;
    /* 如果选项过多，允许滚动 */
}

body.mobile-device .mode-selection-title {
    font-size: 20px !important;
    margin-bottom: 20px !important;
}

body.mobile-device .mode-options {
    gap: 15px !important;
}

body.mobile-device .mode-option {
    padding: 15px !important;
    flex-direction: row !important;
    /* 确保图标和信息水平排列 */
}

body.mobile-device .mode-icon {
    width: 40px !important;
    height: 40px !important;
    margin-right: 15px !important;
}

body.mobile-device .mode-icon i {
    font-size: 20px !important;
}

body.mobile-device .mode-info h3 {
    font-size: 16px !important;
}

body.mobile-device .mode-info p {
    font-size: 13px !important;
}

/* 确保header在移动端也显示 */
body.mobile-device .header {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    /* 确保标题和可能的右侧元素分开 */
    padding: 0 15px !important;
    height: 50px !important;
    border-bottom: 1px solid #e0e0e0;
    background-color: #fff;
}

body.mobile-device .header .dashboard-title,
body.mobile-device .header h1 {
    /* 针对create_chat.html的标题 */
    font-size: 18px !important;
    font-weight: 500 !important;
    margin: 0 !important;
}

/* --- 针对特定页面的移动端主内容区调整 --- */
body.mobile-device.page-index .main-content,
body.mobile-device.page-create .main-content,
body.mobile-device.page-statistics .main-content {
    flex: 1 !important;
    /* 确保内容区填满剩余空间 */
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: calc(var(--vh, 1vh) * 100 - 65px) !important;
    /* 减去底部导航栏高度 */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 15px !important;
    /* 保持或调整通用内边距 */
    box-sizing: border-box !important;
    margin-top: 0 !important;
    /* 确保没有顶部外边距推开内容 */
}

/* 确保在非首页的移动端视图中，桌面侧边栏的占位效果被移除 */
body.mobile-device.page-create .sidebar,
body.mobile-device.page-statistics .sidebar {
    /* 这些页面在移动端不应该显示桌面版侧边栏的任何痕迹 */
    /* 底部导航栏的样式由通用的 body.mobile-device .sidebar 控制 */
    /* 这里主要是确保没有宽度或边距问题残留 */
    /* 如果 body.mobile-device .sidebar 的 display:flex !important; 等规则已足够，则无需额外添加 */
}

/* 如果主内容区在桌面端有特定布局，例如和侧边栏并排，需要重置 */
body.mobile-device.page-create .container,
body.mobile-device.page-statistics .container {
    display: flex !important;
    /* 确保是flex容器 */
    flex-direction: column !important;
    /* 强制列布局 */
    width: 100% !important;
    height: calc(var(--vh, 1vh) * 100) !important;
    padding-top: 0 !important;
    /* 移动端通常不需要为桌面侧边栏留空 */
}


/* 确保内容区域在 page-create 和 page-statistics 页面上不会被侧边栏挤压 */
/* 这部分可能需要根据实际HTML结构微调，确保 .main-content 是 .container的直接子元素，或者调整选择器 */
body.mobile-device.page-create .main-content,
body.mobile-device.page-statistics .main-content {
    margin-left: 0 !important;
    /* 移除桌面端侧边栏可能造成的左边距 */
    width: 100% !important;
}

/* 确保移动端聊天选择界面内容正确显示 */
body.mobile-device.page-create .chat-mode-selection {
    padding-top: 15px;
    /* 为页面顶部增加一些空间 */
    padding-bottom: 15px;
    /* 为页面底部增加一些空间 */
    height: auto;
    /* 让内容自然流动 */
    overflow-y: visible;
    /* 如果内容不多，不需要滚动条 */
}

body.mobile-device.page-create .chat-mode-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    /* 响应式列 */
    gap: 15px;
}

body.mobile-device.page-create .chat-mode-card {
    min-height: 120px;
    /* 调整卡片最小高度 */
}

/* ===================================================== */
/* MOBILE SPECIFIC PAGE LAYOUTS (max-width: 768px) */
/* ===================================================== */

/* --- General rules for non-index mobile pages --- */
body.mobile-device.page-create .container,
body.mobile-device.page-history .container,
body.mobile-device.page-statistics .container {
    display: flex !important;
    flex-direction: column !important;
    /* Force column layout */
    width: 100% !important;
    height: calc(var(--vh, 1vh) * 100) !important;
    /* Full viewport height */
    padding-top: 0 !important;
    /* Remove any top padding meant for desktop sidebar */
    padding-bottom: 65px !important;
    /* Space for the bottom navigation bar */
    box-sizing: border-box !important;
}

/* --- Main content for non-index mobile pages --- */
body.mobile-device.page-create .main-content,
body.mobile-device.page-history .main-content,
body.mobile-device.page-history-content .main-content,
/* Added page-history-content */
body.mobile-device.page-statistics .main-content {
    flex: 1 !important;
    /* Take available space */
    width: 100% !important;
    height: 100% !important;
    /* Fill the container space given by padding-bottom */
    margin-left: 0 !important;
    /* Remove desktop sidebar margin */
    padding: 15px !important;
    /* Consistent padding for content */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

/* --- Ensure desktop sidebar is NOT displayed as a left sidebar on these pages --- */
/* The .sidebar that is a direct child of .container should be the bottom nav */
/* This targets any .sidebar that might be incorrectly displayed as a left panel */
body.mobile-device.page-create>.container>.sidebar,
body.mobile-device.page-history>.container>.sidebar,
body.mobile-device.page-history-content>.container>.sidebar,
/* Added page-history-content */
body.mobile-device.page-statistics>.container>.sidebar {
    /* Styles for the BOTTOM navigation bar are already defined under body.mobile-device .sidebar */
    /* This is to ensure no conflicting styles from desktop view remain */
    width: 100% !important;
    /* Should be full width for bottom nav */
    height: 65px !important;
    /* Fixed height for bottom nav */
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    flex-direction: row !important;
    /* Add any other specific overrides if the generic bottom nav styles are not enough */
}

/* Hide any other elements that might be part of a desktop-only left sidebar structure */
body.mobile-device.page-create .desktop-left-sidebar-placeholder,
/* Example class */
body.mobile-device.page-history .desktop-left-sidebar-placeholder,
body.mobile-device.page-history-content .desktop-left-sidebar-placeholder,
/* Added page-history-content */
body.mobile-device.page-statistics .desktop-left-sidebar-placeholder {
    display: none !important;
}

/* --- Sidebar specific for non-index mobile pages (ensure it's hidden or properly transformed) --- */
body.mobile-device.page-create .sidebar,
body.mobile-device.page-history .sidebar,
body.mobile-device.page-history-content .sidebar,
/* Added page-history-content */
body.mobile-device.page-statistics .sidebar {
    display: none !important;
    /* Force hide desktop sidebar on these specific mobile pages */
    /* The bottom nav is handled by the general body.mobile-device .sidebar rule */
}

/* Ensure container for these pages allows main-content to take full width after sidebar is hidden */
body.mobile-device.page-create .container,
body.mobile-device.page-history .container,
body.mobile-device.page-history-content .container,
/* Added page-history-content */
body.mobile-device.page-statistics .container {
    padding-left: 0 !important;
    /* Remove padding intended for desktop sidebar */
}


/* Enhancements for specific page elements on mobile if needed */

/* --- Explicitly hide knowledge-panel on all mobile pages unless specified otherwise --- */
body.mobile-device .knowledge-panel {
    display: none !important;
}

/* EVEN STRONGER override for history content page, targeting by ID */
body.mobile-device.page-history-content div#knowledge-panel {
    display: none !important;
}

/* If a specific mobile page *should* show a knowledge panel (e.g., a modified one), */
/* then a more specific rule would be needed for that page to override this general hide. */


/* Hide any other elements that might be part of a desktop-only left sidebar structure */

/* 历史详情页特定移动端样式 */
body.mobile-device.page-history-content .main-content {
    padding-top: var(--header-height-mobile, 50px);
    /* 适应移动端顶部header */
    /* padding-bottom 已经由通用移动端样式处理，以适应底部导航栏 */
    height: calc(var(--vh, 1vh) * 100 - var(--header-height-mobile, 50px) - var(--bottom-nav-height, 60px));
    overflow-y: auto;
    /* 确保主内容区可滚动 */
}

body.mobile-device.page-history-content .header.mobile-page-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    height: var(--header-height-mobile, 50px);
}

body.mobile-device.page-history-content .header.mobile-page-header .header-buttons {
    justify-content: space-between;
    /* 让标题居中，用户信息靠右 */
    padding: 0 10px;
}

body.mobile-device.page-history-content .conversation-title-container {
    flex-grow: 1;
    text-align: center;
}

body.mobile-device.page-history-content .conversation-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    /* 移除JS可能会设置的 margin-left 以确保居中 */
    margin-left: 0 !important;
}

body.mobile-device.page-history-content .user-info-display-mobile {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

body.mobile-device.page-history-content .user-info-display-mobile .user-vip-badge-header {
    padding: 3px 8px;
    font-size: 10px;
}

body.mobile-device.page-history-content .knowledge-panel,
body.mobile-device.page-history-content div#knowledge-panel {
    display: none !important;
    /* 再次强调隐藏知识面板 */
}

body.mobile-device.page-history-content .content-area {
    height: 100%;
    /* 继承父级 main-content 计算好的高度 */
    /* padding-top: 0;  移除局部的padding-top，由main-content统一管理 */
}

body.mobile-device.page-history-content .chat-container {
    padding-bottom: 15px;
    /* 为输入区域留出一些空间，避免被遮挡 */
    /* height 和 overflow 由其父级 .content-area 控制 */
}


/* 确保底部输入区域在移动端历史详情页正常显示 */
body.mobile-device.page-history-content .input-area {
    /* position: fixed; /* 不再需要 fixed 定位，随内容滚动 */
    /* bottom: var(--bottom-nav-height, 60px); /* 调整到底部导航栏之上 */
    /* left: 0;
    right: 0; */
    padding-bottom: 0;
    /* 移除额外的padding，因为父级已有 */
}

/* ... existing code ... */
/* Hide any other elements that might be part of a desktop-only left sidebar structure */
// ... existing code ...

/* Styles for the mobile header on history_content.html */
body.mobile-device.page-history-content .header.mobile-page-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 50px !important;
    /* Fixed height */
    background-color: #ffffff !important;
    /* Forced white background */
    border-bottom: 1px solid #e0e0e0 !important;
    /* Add a border for visibility */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
    /* Forced shadow */
    z-index: 1000 !important;
    /* Ensure it's on top of other content, but below modals if any */
    display: flex !important;
    /* Use flex to align children */
    align-items: center !important;
    /* Vertically center children */
    padding: 0 15px !important;
    /* Horizontal padding for content within the header */
    box-sizing: border-box !important;
}

/* Ensure .header-buttons within this specific header behaves correctly */
body.mobile-device.page-history-content .header.mobile-page-header .header-buttons {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    /* Take full width of the padded header */
    height: 100% !important;
    /* Take full height */
}

/* Style for the conversation title container on mobile history page */
body.mobile-device.page-history-content .header.mobile-page-header .conversation-title-container {
    flex-grow: 1;
    /* Allow title to take available space */
    text-align: center;
    /* Center the title text */
    overflow: hidden;
    /* Prevent overflow issues */
}

/* Style for user info display on mobile history page */
body.mobile-device.page-history-content .header.mobile-page-header .user-info-display-mobile {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    flex-shrink: 0;
    /* Prevent user info from shrinking */
}

/* Style for user info display on mobile history page */
body.mobile-device.page-history-content .header.mobile-page-header .user-info-display-mobile .user-vip-badge-header {
    padding: 3px 8px;
    font-size: 10px;
}

/* Adjust main content area to account for the fixed top header and fixed bottom navbar */
body.mobile-device.page-history-content .main-content {
    padding-top: 50px !important;
    /* Space for the 50px fixed top header */
    /* padding-bottom is already handled by body.mobile-device.page-history-content .container for the 65px bottom nav */
    height: calc((var(--vh, 1vh) * 100) - 50px - 65px) !important;
    /* Full viewport height minus top header and bottom nav */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

/* Ensure the direct content area within main-content fills the space */
body.mobile-device.page-history-content .content-area {
    height: 100% !important;
    /* Fill the calculated height of .main-content */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Let chat-container handle its own scroll if needed */
}

body.mobile-device.page-history-content .chat-container {
    flex-grow: 1;
    /* Allow chat container to take up available space */
    overflow-y: auto;
    /* Allow chat messages to scroll */
    padding-bottom: 10px;
    /* Some padding at the bottom of chat messages */
}

/* Ensure input area is at the bottom of the scrollable main-content, not fixed independently */
body.mobile-device.page-history-content .input-area {
    position: relative !important;
    \
 bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    box-shadow: none !important;
    /* Remove shadow if it's part of scrollable content now */
    border-top: 1px solid #eee;
    background-color: #f9f9f9;
    padding: 8px;
    box-sizing: border-box;
}

/* Re-confirm hiding of knowledge panel */
body.mobile-device.page-history-content .knowledge-panel,
body.mobile-device.page-history-content div#knowledge-panel {
    display: none !important;
}

/* Styles for the mobile header on history.html (main history listing) */
body.mobile-device.page-history .header.mobile-page-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 65px !important;
    /* Changed from 50px to 65px to match bottom nav */
    background-color: #ffffff !important;
    border-bottom: 1px solid #e0e0e0 !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
    z-index: 1000 !important;
    display: flex !important;
    align-items: center !important;
    /* padding: 0 10px !important; /* Removed, as sidebar-menu should handle spacing */
    box-sizing: border-box !important;
}

/* Ensure the sidebar-menu inside this header takes full width and behaves like the bottom one */
body.mobile-device.page-history .header.mobile-page-header .sidebar-menu {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 100%;
}

/* Styles for sidebar-items within the top history header, copying from bottom nav */
body.mobile-device.page-history .header.mobile-page-header .sidebar-menu .sidebar-item {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    padding: 8px 5px !important;
    font-size: 10px !important;
    color: #5f6368 !important;
    text-decoration: none !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    border: none !important;
    margin: 0 !important;
}

body.mobile-device.page-history .header.mobile-page-header .sidebar-menu .sidebar-item i {
    font-size: 20px !important;
    margin-bottom: 2px !important;
    margin-right: 0 !important;
}

body.mobile-device.page-history .header.mobile-page-header .sidebar-menu .sidebar-item span {
    display: block !important;
    text-align: center;
}

body.mobile-device.page-history .header.mobile-page-header .sidebar-menu .sidebar-item.active {
    color: #1a73e8 !important;
}

body.mobile-device.page-history .header.mobile-page-header .sidebar-menu .sidebar-item.active i {
    color: #1a73e8 !important;
}


/* Adjust main content padding for the history page to account for the new fixed header */
body.mobile-device.page-history .main-content {
    padding-top: 65px !important;
    /* Account for 65px fixed top header */
    height: calc(var(--vh, 1vh) * 100 - 65px - 65px) !important;
    /* Top nav 65px, bottom nav 65px */
    overflow-y: hidden;
    /* The .history-container should scroll */
}

body.mobile-device.page-history .header.mobile-page-header .header-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

body.mobile-device.page-history .header.mobile-page-header .conversation-title-container {
    flex-grow: 1;
    text-align: center;
    /* margin-left will be implicitly handled by user-info if present and space-between */
}

body.mobile-device.page-history .header.mobile-page-header .conversation-title {
    font-size: 16px;
    font-weight: 500;
    color: #333;
}

body.mobile-device.page-history .header.mobile-page-header .user-info-display-mobile {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    /* position: absolute; right: 10px; if not using space-between on parent */
}

/* The .history-container within .main-content should be scrollable */
body.mobile-device.page-history .history-container {
    overflow-y: auto;
    height: 100%;
    /* Fill the adjusted .main-content space */
    padding-bottom: 20px;
    /* Add some padding at the bottom of the scrollable area */
}


/* Hide the original desktop-oriented history-header on mobile */
body.mobile-device.page-history .history-header.desktop-only {
    display: none !important;
}

/* Ensure user badge in header has consistent styling */
.mobile-page-header .user-vip-badge-header {
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 500;
    border: 1px solid transparent;
}

.mobile-page-header .user-vip-badge-header.free-vip {
    background-color: #f0f0f0;
    color: #555;
    border-color: #e0e0e0;
}

.mobile-page-header .user-vip-badge-header.basic-vip {
    background-color: #e6f7ff;
    color: #1890ff;
    border-color: #91d5ff;
}

.mobile-page-header .user-vip-badge-header.standard-vip {
    background-color: #fffbe6;
    color: #faad14;
    border-color: #ffe58f;
}

.mobile-page-header .user-vip-badge-header.premium-vip {
    background-color: #fff1f0;
    color: #f5222d;
    border-color: #ffa39e;
}

.mobile-page-header .user-vip-badge-header.permanent-vip {
    background-color: #f6e6ff;
    color: #722ed1;
    border-color: #d3adf7;
}


/* Ensure that the main-content and sidebar correctly adapt on the history page for mobile */
// ... existing code ...

/* Styles for the mobile header on mobile_profile.html */
body.mobile-device.page-mobile-profile .header.mobile-page-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 65px !important;
    /* Consistent with other mobile navs */
    background-color: #ffffff !important;
    border-bottom: 1px solid #e0e0e0 !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
    z-index: 1000 !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
}

body.mobile-device.page-mobile-profile .header.mobile-page-header .sidebar-menu {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 100%;
}

body.mobile-device.page-mobile-profile .header.mobile-page-header .sidebar-menu .sidebar-item {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    padding: 8px 5px !important;
    font-size: 10px !important;
    color: #5f6368 !important;
    /* Default color from bottom nav */
    text-decoration: none !important;
    background-color: transparent !important;
    border: none !important;
    margin: 0 !important;
}

body.mobile-device.page-mobile-profile .header.mobile-page-header .sidebar-menu .sidebar-item i {
    font-size: 20px !important;
    margin-bottom: 2px !important;
    margin-right: 0 !important;
}

body.mobile-device.page-mobile-profile .header.mobile-page-header .sidebar-menu .sidebar-item span {
    display: block !important;
    text-align: center;
}

/* Active state for top nav items on mobile_profile page is handled in the HTML's style block for now,
   but could be consolidated here if preferred and !important is used carefully. 
   The HTML style block currently has:
   body.mobile-device.page-mobile-profile .header.mobile-page-header .sidebar-item.active {
       color: #1a73e8 !important; 
   }
   body.mobile-device.page-mobile-profile .header.mobile-page-header .sidebar-item.active i {
       color: #1a73e8 !important;
   }
*/

/* Adjust main content padding for the mobile_profile page */
body.mobile-device.page-mobile-profile .main-content-mobile-profile {
    padding-top: 65px !important;
    /* Account for 65px fixed top header */
    /* padding-bottom is already 85px in its own style block, which accounts for bottom nav (65px) + some extra space (20px) */
    /* So height calculation should be: viewport - top_nav - bottom_nav_effective_space */
    /* If bottom nav is 65px, and padding-bottom on content is 85px, effective space used by bottom nav area is 85px */
    height: calc(var(--vh, 1vh) * 100 - 65px) !important;
    /* Let existing padding-bottom handle bottom spacing */
    overflow-y: auto !important;
    /* Ensure content scrolls */
}

// ... existing code ...

@media (max-width: 768px) {
    .chat-container {
        flex: 1;
        min-height: 0;
        padding: 10px;
        max-width: 100%;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .chat-container {
        flex: 1;
        min-height: 0;
        padding: 10px 5px;
        max-width: 100%;
        width: 100%;
    }
}

body.mobile-device.page-history-content .chat-container {
    flex-grow: 1;
    min-height: 0;
    overflow-y: auto;
    padding-bottom: 10px;
}

/* 聊天容器通用样式 */
.chat-container,
body.mobile-device .chat-container,
body.mobile-device.page-history-content .chat-container {
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto;
    padding-bottom: 10px;
    max-width: 100%;
    width: 100%;
}

/* 移除所有 .chat-container 的 height 设置 */
/* 移除 body.mobile-device .chat-container { height: ... } 及相关媒体查询下的 height */

/* 内容区flex布局 */
body.mobile-device.page-history-content .content-area {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* 输入区样式修正 */
body.mobile-device.page-history-content .input-area {
    position: relative !important;
    width: 100% !important;
    box-shadow: none !important;
    border-top: 1px solid #eee;
    background-color: #f9f9f9;
    padding: 8px;
    box-sizing: border-box;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
}

.word-button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    padding: 4px 12px;
    background: #eaf1fb;
    border: 1px solid #2b579a;
    border-radius: 5px;
    color: #2b579a;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border 0.2s;
    font-weight: 500;
}

.word-button i {
    font-size: 18px;
}

.word-button:hover {
    background: #2b579a;
    color: #fff;
    border: 1px solid #185abd;
}