/* 聊天组件容器 - 继承侧边栏样式 */
.chat-widget-container {
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Arial", "PingFang SC", "Hiragino Sans GB", "STHeiti", "Microsoft YaHei", "Microsoft JhengHei", "Source Han Sans SC", "Noto Sans CJK SC", "Source Han Sans CN", "Noto Sans SC", "Source Han Sans TC", "Noto Sans CJK TC", "WenQuanYi Micro Hei", SimSun, sans-serif;
    color: #bfbfbf;
    font-size: 14px;
    line-height: 1.7;
}

/* 聊天组件标题样式 */
.chat-widget-container h5 {
    color: #a3a3a3;
    padding-bottom: 1em;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 10px;
}

/* 聊天组件主体 */
.chat-widget {
    width: 100%;
    height: 300px;
    border-radius: 0; /* 默认不显示圆角 */
    border: 1px solid transparent; /* 默认边框透明 */
    display: flex;
    flex-direction: column;
    margin-top: 10px;
    opacity: 0;
    transition: all 0.3s ease;
    box-shadow: none; /* 默认不显示阴影 */
}

/* 鼠标悬停时显示边框、圆角和阴影 */
.chat-widget:hover {
    border-color: #eee;
    border-radius: 8px; /* 悬停时显示圆角 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.chat-widget-loaded {
    opacity: 1;
}

/* 聊天消息区域 */
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    -webkit-overflow-scrolling: touch;
    border-radius: 0; /* 默认不显示圆角 */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

/* 鼠标悬停时显示消息区域圆角 */
.chat-widget:hover .chat-messages {
    border-radius: 8px 8px 0 0;
}

/* 隐藏滚动条 */
.chat-messages::-webkit-scrollbar {
    display: none;
}

/* 消息样式 */
.message {
    margin-bottom: 10px;
    max-width: 85%;
    clear: both;
    word-wrap: break-word;
}

.user-message {
    float: right;
    background: #0085a1;
    color: white;
    padding: 8px 12px;
    border-radius: 12px 12px 0 12px;
    font-size: 13px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.ai-message {
    float: left;
    background: #f5f5f5;
    color: #404040;
    padding: 8px 12px;
    border-radius: 12px 12px 12px 0;
    font-size: 13px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Markdown样式 */
.ai-message p {
    margin: 0 0 8px 0;
}

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

.ai-message h1, .ai-message h2, .ai-message h3, 
.ai-message h4, .ai-message h5, .ai-message h6 {
    margin: 8px 0;
    font-weight: 600;
    line-height: 1.25;
}

.ai-message h1 {
    font-size: 16px;
}

.ai-message h2 {
    font-size: 15px;
}

.ai-message h3, .ai-message h4, .ai-message h5, .ai-message h6 {
    font-size: 14px;
}

.ai-message code {
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 3px;
    padding: 2px 4px;
    font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 12px;
}

.ai-message pre {
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 3px;
    padding: 8px;
    overflow-x: auto;
    margin: 8px 0;
}

.ai-message pre code {
    background-color: transparent;
    padding: 0;
    white-space: pre;
}

.ai-message ul, .ai-message ol {
    margin: 8px 0;
    padding-left: 20px;
}

.ai-message blockquote {
    margin: 8px 0;
    padding-left: 10px;
    border-left: 3px solid #ddd;
    color: #666;
}

.ai-message a {
    color: #0085a1;
    text-decoration: none;
}

.ai-message a:hover {
    text-decoration: underline;
}

.ai-message img {
    max-width: 100%;
    border-radius: 3px;
}

.ai-message table {
    border-collapse: collapse;
    margin: 8px 0;
    font-size: 12px;
}

.ai-message table th, .ai-message table td {
    border: 1px solid #ddd;
    padding: 4px 8px;
}

.ai-message table th {
    background-color: rgba(0, 0, 0, 0.05);
}

/* 输入区域 */
.chat-input {
    padding: 8px 10px;
    border-top: 1px solid transparent; /* 默认边框透明 */
    display: flex;
    gap: 6px;
    border-radius: 0; /* 默认不显示圆角 */
    background-color: transparent;
    transition: all 0.3s ease;
}

/* 鼠标悬停时显示输入区域边框和圆角 */
.chat-widget:hover .chat-input {
    border-top-color: #eee;
    background-color: #f9f9f9;
    border-radius: 0 0 8px 8px;
}

.chat-input textarea {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 18px;
    resize: none;
    height: 36px; /* 更矮的输入框 */
    font-size: 14px;
    color: #404040;
    font-family: inherit;
    transition: all 0.3s ease;
    overflow: hidden; /* 隐藏滚动条 */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) inset;
}

.chat-input textarea:focus {
    outline: none;
    border-color: #0085a1;
    box-shadow: 0 0 0 2px rgba(0, 133, 161, 0.2);
}

.chat-input button {
    padding: 6px 14px; /* 更小的按钮 */
    background: #0085a1;
    color: white;
    border: none;
    border-radius: 18px;
    cursor: pointer;
    font-size: 13px; /* 更小的字体 */
    font-weight: 500;
    transition: all 0.2s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    min-width: 60px; /* 确保按钮不会太小 */
}

.chat-input button:hover {
    background-color: #006f8a;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.chat-input button:disabled {
    background-color: #bfbfbf;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* 打字机效果 */
.typing-effect {
    display: inline-block;
    min-width: 4px;
}

.typing-cursor {
    display: inline-block;
    width: 2px;
    height: 14px;
    background: #404040;
    animation: blink 1s infinite;
    vertical-align: middle;
}

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

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

/* 思考中动画 */
.thinking-dots {
    display: inline-block;
    margin-left: 4px;
}

.thinking-dots::after {
    content: '...';
    animation: thinking 1.5s infinite;
    display: inline-block;
    width: 12px;
    text-align: left;
}

@keyframes thinking {
    0% { content: '.'; }
    33% { content: '..'; }
    66% { content: '...'; }
    100% { content: '.'; }
}

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

/* 淡入效果 */
.fade-in {
    animation: fadeIn 0.5s ease forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 响应式设计 */
/* @media screen and (max-width: 767px) {
    .chat-widget {
        height: 250px;
    }
    
    .chat-input textarea {
        font-size: 16px; /* 防止iOS自动缩放 */
    /* }
    
    .message {
        max-width: 90%;
    }
} */ 

/* 适配深色模式 */
/* @media (prefers-color-scheme: dark) {
    .chat-widget {
        border-color: transparent;
    }
    
    .chat-widget:hover {
        border-color: #333;
        border-radius: 8px;
    }
    
    .chat-messages {
        background-color: #222;
    }
    
    .ai-message {
        background-color: #333;
        color: #f5f5f5;
    }
    
    .chat-input {
        background-color: transparent;
        border-top-color: transparent;
    }
    
    .chat-widget:hover .chat-input {
        background-color: #222;
        border-top-color: #333;
    }
    
    .chat-input textarea {
        background-color: #333;
        color: #f5f5f5;
        border-color: #444;
    }
} */