[v-cloak] {
    display: none !important;
}

body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: #FFFFFF;
    color: #333;
    overflow: hidden; /* 防止页面滚动 */
    height: 100vh; /* 确保高度为视口高度 */
}

/* 侧边栏样式 */
.side-nav {
    position: fixed;
    left: 0;
    top: 0;
    width: 15%;
    height: 100vh;
    background-color: #FFFFFF;
    border-right: 1px solid #EAEAEA;
    overflow: hidden;
    z-index: 15; /* 提高z-index确保在顶层 */
    padding: 12px;
}

.sidebar-inner {
    background-color: transparent;
    border-radius: 16px;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.nav-logo {
    padding: 20px;
    border-bottom: 3px solid #EAEAEA;
    background-color: rgba(255, 255, 255, 0.7);
}

.text-logo {
    font-size: 20px;
    font-weight: bold;
    color: #FF4D4F;
}

.side-nav {
    display: flex;
    flex-direction: column;
}

.article-list {
    padding: 10px 0;
    flex: 1;
    overflow-y: auto;
    border-bottom: 3px solid #EAEAEA;
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: rgba(255, 150, 113, 0.3) rgba(0, 0, 0, 0.05); /* Firefox */
}

/* 侧边栏滚动条样式 - Webkit浏览器 */
.article-list::-webkit-scrollbar {
    width: 4px; /* 更细的滚动条宽度 */
}

.article-list::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.01); /* 几乎透明的轨道颜色 */
    border-radius: 10px;
}

.article-list::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, rgba(255, 77, 109, 0.15), rgba(255, 150, 113, 0.15)); /* 更淡的渐变色 */
    border-radius: 10px;
    height: 40px; /* 更短的滑块高度 */
}

.article-item {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.article-item:hover {
    background: #fef0f0;
    margin: 0 5px;
    border-radius: 10px;
}

.article-title {
    font-size: 14px;
    margin-bottom: 5px;
}

.article-date {
    font-size: 12px;
    color: #999;
}

.article-item:hover .article-date {
    color: #fff;
}

/* 内容区样式 - 固定高度，无滚动条 */
.content-area {
    width: 85%;
    margin-left: 15%;
    height: 100vh; /* 确保高度为视口高度 */
    overflow: hidden; /* 移除内容区滚动条 */
    position: relative;
    z-index: 5;
    display: flex;
    justify-content: center;
}

.ds-main {
    padding: 20px;
    max-width: 100%;
    margin: 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 首页内容居中 */
.ds-main > div:first-child {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: -150px; /* 更多上移内容区 */
    width: 100%;
    max-width: 850px;
    padding: 0 20px;
    box-sizing: border-box;
}

.hero-icon {
    text-align: center;
    margin: 20px 0 0; /* 减少底部边距，让logo和标题更近 */
}

.hero-icon img {
    width: 170px;
    height: auto;
}

.hero-title {
    text-align: center;
    font-size: 28px;
    margin-top: 0; /* 移除顶部外边距 */
    margin-bottom: 2px; /* 减少与下方介绍的距离 */
    font-weight: bold;
}

.hero-sub {
    text-align: center;
    font-size: 16px;
    color: #666;
    margin-bottom: 10px; /* 减少与输入框的距离 */
}

/* 图标样式 */
.icon-svg {
    vertical-align: middle;
    margin-right: 3px;
}

/* 自定义输入框 */
.input-with-cursor {
    position: relative;
    display: inline-block;
    width: calc(100% - 50px);
    /* 确保光标有足够的空间活动 */
    min-height: 80px; /* 增加输入框高度 */
}

/* 输入框本身 */
.input-with-cursor textarea {
    width: 100%;
    border: none;
    outline: none;
    resize: none;
    background: transparent;
    font-size: 16px;
    line-height: 1.5;
    padding: 15px 15px;
    min-height: 80px; /* 增加输入框高度 */
    overflow: hidden; /* 隐藏滚动条 */
    color: #333333;
    caret-color: #FF4D4F; /* 使用自定义颜色的原生光标 */
    font-family: inherit;
    box-sizing: border-box;
}

/* 搜索框整体样式调整 */
.search-bubble {
    background-color: #F9F9F9;
    border-radius: 20px; /* 增加圆角弧度 */
    padding: 0 16px 60px 16px; /* 进一步增加底部padding以便放置按钮 */
    box-shadow: none; /* 移除阴影 */
    margin: 5px auto; /* 减少上下外边距 */
    width: 850px; /* 固定宽度 */
    position: relative;
    text-align: left;
    border: 1px solid #EAEAEA; /* 添加边框 */
    box-sizing: border-box;
}

/* 标签样式 */
.quick-tags {
    position: absolute;
    bottom: 15px; /* 距离底部的距离 */
    left: 16px; /* 与左侧对齐 */
    display: flex;
    gap: 10px;
}

.tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background-color: #F0F0F0;
    border-radius: 12px;
    font-size: 13px;
    color: #666;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
}

.tag .icon-svg {
    margin-right: 4px;
}

.tag:hover {
    background-color: #E0E0E0;
}

.tag.active {
    background: linear-gradient(135deg, #1677FF, #69a7f3);
    color: white;
}

/* 发送按钮 */
.send-btn {
    position: absolute;
    bottom: 15px; /* 与标签按钮对齐 */
    right: 16px; /* 与右侧对齐 */
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #F0F0F0;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.send-btn:hover {
    background-color: #E0E0E0;
}

.send-btn.active {
    background: linear-gradient(135deg, #FF4D4F, #FF7875);
    color: white;
}

.send-btn.active svg {
    stroke: white;
}

/* 占位符文字样式 */
::placeholder {
    color: #888888;
    opacity: 0.7;
}

/* 对话页面顶部样式 */
.chat-header {
    max-width: 850px;
    margin: 0 auto 5px;
    padding-top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.chat-logo {
    margin-bottom: 15px;
}

/* 聊天区域样式 - 添加滚动条 */
.chat-area {
    max-width: 850px;
    width: 100%;
    margin: 0 auto;
    padding: 20px 0 150px 0; /* 上部加内边距，底部留足空间放置输入框 */
    background: #FFFFFF;
    overflow-y: auto; /* 垂直滚动条 */
    overflow-x: visible; /* 允许水平溢出 (缩略图弹窗) */
    height: 100vh; /* 全屏高度 */
    scrollbar-width: thin; /* Firefox 细滚动条 */
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent; /* Firefox 滚动条颜色 */
    box-sizing: border-box; /* 确保内边距不增加元素实际尺寸 */
    padding-right: 14px; /* 防止内容被滚动条遮挡 */
}

/* 聊天区域滚动条样式 - 半透明美化版 */
.chat-area::-webkit-scrollbar {
    width: 6px; /* 更细的滚动条 */
}

.chat-area::-webkit-scrollbar-track {
    background: transparent;
}

.chat-area::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
}

.chat-area::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.25);
}

/* 移除内容区域滚动条样式 */
.content-area::-webkit-scrollbar {
    width: 0;
    display: none;
}

/* 消息样式 */
.message {
    margin-bottom: 20px;
    max-width: 850px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* 用户消息样式 - 有气泡，无头像 */
.message.user {
    justify-content: flex-end; /* 将内容推向右侧 */
    padding-right: 20px; /* 右侧留出空间 */
    display: flex;
    text-align: right;
    max-width: 850px;
    margin-left: auto;
    margin-right: auto;
}

.message.user .message-content {
    display: inline-block;
    background: linear-gradient(135deg, #FF4D6D, #FF9671); /* 玫红色到橙色的渐变 */
    border: none;
    border-radius: 18px 4px 18px 18px;
    padding: 12px 16px;
    color: white; /* 白色文字更容易在渐变背景上阅读 */
    max-width: 80%;
    text-align: left;
    box-shadow: 0 2px 5px rgba(255, 77, 109, 0.2);
}

/* AI消息样式 */
.message.assistant {
    display: flex;
    align-items: flex-start;
    padding: 12px 0;
    position: relative;
}

/* AI头像样式 */
.message.assistant .avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FF4D6D, #FF9671);
    background-size: 100% 100%;
    margin-right: 12px;
    margin-left: 20px; /* 统一左边距为20px */
    flex-shrink: 0;
    background-image: url('/static/firesai/images/ai.png');
    background-size: cover;
    background-position: center;
    border: 2px solid #FF4D6D;
    box-shadow: 0 0 5px rgba(255, 77, 109, 0.3);
}

/* AI消息内容样式 - 确保与头像顶部对齐 */
.message.assistant .message-content {
    color: #333333;
    padding: 8px 0;
    max-width: 80%;
    margin-top: 0; /* 确保消息与头像顶部对齐 */
    display: flex;
    flex-direction: column;
    justify-content: center; /* 垂直居中内容 */
}

/* 确保消息内容中的第一个段落没有顶部边距 */
.message.assistant .message-content p:first-child {
    margin-top: 0;
}

/* 底部输入框容器 - 确保固定在底部 */
.bottom-search {
    position: fixed;
    bottom: 0;
    left: 15%; /* 与侧边栏宽度对应 */
    width: 85%; /* 与内容区域宽度一致 */
    background: rgba(255, 255, 255, 0.8); /* 添加半透明背景 */
    padding: 10px 0 0 0; /* 上边距10，下边距0，消除底部空隙 */
    z-index: 50; /* 确保在滚动区域之上 */
    border-top: 1px solid rgba(0, 0, 0, 0.06); /* 添加轻微的顶部边框 */
    box-sizing: border-box; /* 确保padding不会增加宽度 */
    display: flex; /* 使用弹性布局 */
    justify-content: flex-start; /* 左对齐 */
    padding-left: 0; /* 移除左侧内边距 */
}

/* 新对话按钮容器 */
/* "开启新对话"按钮样式 */
.new-chat-btn {
    background: linear-gradient(135deg, #E6F7FF, #BAE7FF);
    color: #1890ff;
    border: 1px solid #91D5FF;
    padding: 5px 12px 5px 10px;
    border-radius: 18px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
    z-index: 10;
    box-shadow: 0 2px 6px rgba(24, 144, 255, 0.1);
    display: flex;
    align-items: center;
}

/* 底部按钮特殊样式 */
.bottom-btn {
    position: absolute;
    right: 70px;
    top: 20px;
    z-index: 3; /* 确保在搜索气泡之上 */
}

.new-chat-btn:hover {
    background: linear-gradient(135deg, #D6F0FF, #A6DBFF);
    box-shadow: 0 3px 8px rgba(24, 144, 255, 0.2);
}

/* 底部搜索框样式 */
.bottom-search .search-bubble {
    margin-left: calc((100% - 850px)/2) !important; /* 与上方内容居中对齐 */
    width: 888px !important;
    max-width: 888px !important;
    position: relative;
    background-color: #fafafa;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

/* 打字指示器 */
.typing-indicator {
    display: flex;
    align-items: center;
}

.typing-indicator .message-content {
    display: flex;
    align-items: center;
    background: none !important;
    padding: 8px 0;
}

.typing-indicator span {
    height: 8px;
    width: 8px;
    border-radius: 50%;
    background-color: #ff4d4f;
    display: inline-block;
    margin: 0 2px;
    animation: wave 1.2s infinite ease-in-out;
}

.typing-indicator span:nth-of-type(2) {
    animation-delay: -1.0s;
}

.typing-indicator span:nth-of-type(3) {
    animation-delay: -0.8s;
}

@keyframes wave {
    0%, 60%, 100% {
        transform: initial;
    }
    30% {
        transform: translateY(-8px);
    }
}

/* 搜索结果提示 - 显示为按钮样式 */
.search-result-tip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid #ffe1e1;
    border-radius: 8px;
    background-color: #fff8f8;
    margin-left: 8px;
    font-size: 13px;
    width: fit-content; /* 使宽度适应内容 */
    max-width: 100%; /* 最大宽度限制 */
    box-sizing: border-box; /* 确保padding计入宽度 */
    white-space: nowrap; /* 保持在一行 */
}

/* 搜索图标垂直对齐 */
.search-result-tip .search-icon {
    display: inline-flex;
    vertical-align: middle;
    margin-right: 2px; /* 控制图标和文字的间距 */
}

/* 搜索结果容器 */
.search-results {
    margin-top: 15px; /* 与搜索提示之间的间距 */
    padding-top: 12px; /* 内部顶部间距 */
    border-top: 1px solid rgba(0, 0, 0, 0.05); /* 添加轻微分隔线 */
}

/* 立即显示的搜索结果特殊样式 */
.immediate-results {
    animation: fadeIn 0.3s ease-in-out;
}

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

/* 搜索结果中的段落样式 */
.search-results p {
    margin-top: 0;
    margin-bottom: 8px;
    line-height: 1.5;
}

/* 消息内容共有样式 */
.message-content {
    padding: 12px 16px; /* 统一内边距 */
    border-radius: 8px; /* 统一圆角 */
    max-width: 80%; /* 最大宽度 */
}

/* 性能优化 - 修改避免transform对fixed定位影响 */
.side-nav, .content-area, .chat-area {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
    will-change: transform;
}

/* 底部搜索框移除transform */
.bottom-search {
    transform: none;
    backface-visibility: visible;
    perspective: none;
    will-change: auto;
}

/* 预加载图片，避免首次加载延迟 */
body::after {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    z-index: -1;
    content: url('/static/firesai/images/ai.png');
}

/* 平滑滚动优化 */
html {
    scroll-behavior: smooth;
}

/* 资源推荐组件样式 */
.resource-recommendations {
    margin-top: 20px;
    background: transparent; /* 移除背景色 */
    border-radius: 10px;
    padding: 15px;
    border: 1px solid #e6e6ff;
}

.resource-recommendations h3 {
    font-size: 16px;
    color: #444;
    margin: 0 0 12px 0;
    padding-left: 8px;
    border-left: 3px solid #FF4D6D;
}

.resource-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.resource-item {
    display: flex;
    flex-direction: column;
    padding: 10px 12px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    border: 1px solid #eee;
    transition: all 0.2s ease;
}

.resource-item:hover {
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}

.resource-title {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 6px;
    color: #333;
}

.resource-meta {
    display: flex;
    gap: 8px;
    font-size: 12px;
    color: #666;
    margin-bottom: 8px;
}

.resource-type {
    background: #f4f4f4;
    padding: 2px 6px;
    border-radius: 4px;
}

.resource-link {
    align-self: flex-end;
    display: inline-block;
    background: linear-gradient(135deg, #FF4D6D, #FF9671);
    color: white;
    padding: 4px 10px;
    border-radius: 15px;
    font-size: 12px;
    text-decoration: none;
    transition: all 0.2s;
}

.resource-link:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(255, 77, 109, 0.3);
}

/* 资源卡片样式 - 让整个卡片可点击 */
.resource-card {
    margin-top:10px;
    padding:12px;
    background:#fff; /* 白色背景 */
    border-radius:8px;
    border:1px solid transparent; /* 由子类决定渐变边框 */
    box-shadow:0 2px 8px rgba(0,0,0,0.06);
    position:relative;
    cursor:pointer;
    transition:all 0.2s ease;
}

/* === 本地资源：玫红→橙色 渐变边框 === */
.resource-card.local{
    background:linear-gradient(#fff,#fff) padding-box,
              linear-gradient(135deg,#FF4D6D 0%,#FF9671 100%) border-box;
}

/* ===== 资源卡片缩略图悬浮弹窗 ===== */
/* 缩略图弹窗：在卡片左侧显示 */
.resource-card:hover .cover-popup {
    display: block;
    opacity: 1;
    transform: translateY(-50%);
}

/* 弹窗改到卡片右侧 */
.cover-popup {
    display: none;
    position: absolute;
    top: 50%;            /* 垂直居中 */
    left: calc(100% + 20px);
    transform: translateY(-50%);
    width: 120px;
    height: 180px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25);
    z-index: 1000;
    overflow: hidden;
    transition: all 0.2s ease-out;
    opacity: 0;
    border: 1px solid #eee;
}

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

/* 小三角指向卡片右侧中心 */
.cover-popup:after {
    content: '';
    position: absolute;
    top: 50%;
    left: -8px;
    transform: translateY(-50%);
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 8px solid #fff;
}

/* === API 在线资源：绿色→蓝色 渐变边框 === */
.resource-card.online{
    background:linear-gradient(#fff,#fff) padding-box,
              linear-gradient(135deg,#52c41a 0%,#40a9ff 100%) border-box;
}

/* 精确匹配卡片样式 - 添加玫红色到橙色渐变背景，更浅的颜色 */
.resource-card.exact-match {
    border-color: #ffb8b8;
    background: linear-gradient(135deg, #fff5f5 0%, #ffffff 100%);
}

/* 精确匹配卡片中的文字颜色为深色，而不是白色 */
.resource-card.exact-match .resource-title,
.resource-card.exact-match p {
    font-size: 16px;
    color: #333;
    margin-bottom: 12px;
    font-weight: bold; /* 标题加粗 */
}

/* 精确匹配卡片中的标签样式 */
.resource-card.exact-match .tag.local-tag,
.resource-card.exact-match .tag.online-tag {
    background: rgba(255, 77, 109, 0.1); /* 半透明背景 */
    color: #ff4d6d; /* 品牌红色文字 */
    border: 1px solid rgba(255, 77, 109, 0.3); /* 半透明边框 */
}

/* 精确匹配卡片中的查看详情按钮 */
.resource-card.exact-match a.resource-link {
    background: transparent;
    color: #ff4d6d; /* 品牌红色 */
    border: 1px solid rgba(255, 77, 109, 0.3); /* 半透明边框 */
}

.resource-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: #ff9494;
}

/* 确保卡片内的链接占满整个卡片 */
.resource-card .card-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    cursor: pointer; /* 确保鼠标悬停时显示为指针 */
}

/* 确保卡片标题也可以点击跳转 */
.resource-card .resource-title {
    position: relative;
    z-index: 2;
    cursor: pointer;
}

/* 标签样式修改 - 透明背景 */
.resource-card .tag.local-tag {
    background-color: #fff0f0;
    color: #ff4d4f;
    border: 1px solid #ffa39e;
}

/* 在线资源标签 */
.resource-card .tag.online-tag {
    background-color: #f0fff0;
    color: #52c41a;
    border: 1px solid #b7eb8f;
}

/* 查看详情按钮样式 - 改为透明背景 */
.resource-card a.resource-link {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #888;
    text-decoration: none;
    font-size: 14px;
    position: relative; /* 确保在链接之上 */
    z-index: 2;
}

.resource-card a.resource-link:hover {
    color: #ff4d4f;
    transform: translateX(3px);
    box-shadow: none; /* 移除阴影 */
}

/* 确保卡片内的其他元素在卡片链接之上，可以正常点击 */
.resource-card h3,
.resource-card .tag,
.resource-card .resource-footer {
    position: relative;
    z-index: 2;
}

/* 确保首屏没有滚动条 */
.ds-wrapper {
    height: 100vh;
    overflow: hidden;
}

.ds-main {
    height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* 打字指示器中的AI头像样式与普通AI消息保持一致 */
.message.assistant.typing-indicator .avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    margin-right: 12px;
    margin-left: 20px; /* 与其他AI消息头像左对齐 */
    flex-shrink: 0;
    background-image: url('/static/firesai/images/ai.png');
    background-size: cover;
    background-position: center;
    border: 2px solid #FF4D6D; /* 添加玫红色边框 */
    box-shadow: 0 0 5px rgba(255, 77, 109, 0.3); /* 添加柔和阴影效果 */
}

/* 资源卡片中的资源标签和查看详情按钮样式 */
.resource-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative; /* 确保footer内容在链接之上 */
    z-index: 2;
}

/* 资源卡片中的标签 */
.resource-card .tag {
    font-size: 12px;
    padding: 4px 10px; /* 与 quick tags 对齐，保持一致 */
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    margin-right: 6px;
    font-weight: 500; /* 半粗体，使两类标签更醒目 */
    line-height: 1; /* 垂直居中 */
}

/* 本地资源标签 – 仅颜色不同 */
.resource-card .tag.local-tag {
    background-color: #ffecec; /* 更淡的粉色背景 */
    color: #ff4d4f;           /* 品牌红色文字 */
    border: 1px solid #ffb3b3;
}

/* 在线资源标签 – 仅颜色不同 */
.resource-card .tag.online-tag {
    background-color: #eaffea; /* 更淡的绿色背景 */
    color: #52c41a;
    border: 1px solid #b7eb8f;
}

/* 资源链接按钮SVG图标 */
.resource-card a.resource-link svg {
    margin-left: 4px;
    vertical-align: middle;
}

/* 查看更多结果按钮样式 */
.view-more-results {
    display: flex;
    justify-content: center;
    margin: 15px 0;
}

.view-more-btn {
    background: linear-gradient(135deg, #FF4D6D, #FF9671);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px rgba(255, 77, 109, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.view-more-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(255, 77, 109, 0.3);
}

.view-more-btn .count {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    padding: 0 8px;
    margin-left: 6px;
    font-weight: bold;
}

/* 组合动画的容器 */
.typing-with-search {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

/* AI消息内容区域 */
.message.assistant .content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    position: relative; /* 确保footer内容在链接之上 */
    z-index: 2;
}

.resource-card .card-content-wrapper {
    position: relative;
    z-index: 2;
}

.resource-card .tag.local-tag {
    background-color: #fff0f0;
    color: #ff4d4f;
    align-items: center;
    gap: 4px;
    color: #888;
    text-decoration: none;
    font-size: 14px;
    position: relative; /* 确保在链接之上 */
    z-index: 2;
}

.resource-card a.resource-link:hover {
    color: #ff4d4f;
    transform: translateX(3px);
}

/* API资源分隔提示 */
.api-resource-separator {
    margin-top: 20px;
    margin-bottom: 10px;
    padding: 8px 12px;
    background-color: #f8f9ff;
    border-left: 3px solid #1677FF;
    border-radius: 4px;
}

.api-resource-separator p {
    margin: 0;
    font-size: 14px;
    color: #1677FF;
    font-weight: 500;
}

/* 本地搜索结果样式 */
.local-results {
    border-radius: 8px;
    margin-top: 15px;
    padding: 15px 10px;
    background-color: rgba(255,77,107,0.02);
    border-left: 3px solid rgba(255,77,107,0.2);
    animation: fadeIn 0.5s ease-in-out;
}

/* API搜索结果样式 */
.api-results {
    border-radius: 8px;
    margin-top: 10px;
    padding: 15px 10px;
    background-color: rgba(22,119,255,0.02);
    animation: slideUp 0.6s ease-in-out;
}

/* 添加向上滑入的动画 */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 保持原有的淡入动画 */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* 全网搜索按钮样式 */
.web-search-btn {
    background: linear-gradient(135deg, #1677FF, #3f95ff);
    color: white;
    border: none;
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 6px rgba(0, 80, 255, 0.2);
    transition: all 0.2s ease;
    margin: 10px 0;
}

.web-search-btn:hover {
    box-shadow: 0 4px 12px rgba(0, 80, 255, 0.3);
    transform: translateY(-2px);
}

.web-search-btn svg {
    width: 16px;
    height: 16px;
}

/* 无本地结果提示样式 */
.no-local-results {
    background-color: rgba(245, 246, 255, 0.5);
    border-radius: 10px;
    padding: 15px 20px;
    margin: 10px 0;
    text-align: center;
    border: 1px solid #e0e5ff;
}

.no-local-results p {
    color: #666;
    margin-bottom: 15px;
}

/* 更多搜索按钮容器 */
.more-search-container {
    display: flex;
    justify-content: center;
    margin: 10px 0 20px;
    padding-top: 10px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

/* API搜索中动画样式 */
.api-searching {
    display: flex;            /* 保持横向布局 */
    align-items: center;      /* 垂直居中 */
    width: 100%;              /* 占满宽度，避免父容器被压缩 */
    justify-content: center;  /* 居中显示点点动画 */
    margin-bottom: 10px;      /* 与下方卡片保持间距 */
}

.api-searching .typing-indicator {
    margin: 0;
}

.api-searching p {
    color: #1677FF;
    margin: 0;
    font-size: 14px;
}

/* 搜索错误样式 */
.search-error {
    background-color: #fff5f5;
    border-radius: 10px;
    padding: 15px 20px;
    margin: 10px 0;
    border: 1px solid #ffe0e0;
    text-align: center;
}

.search-error p {
    color: #ff4d4f;
    margin-bottom: 12px;
}

/* 脉冲动画效果 */
@keyframes pulse {
    from { opacity: 0.8; }
    to { opacity: 1; }
}

/* API搜索结果标题样式 */
.api-search-results {
    margin-top: 15px;
}

/* 没有API结果的提示 */
.no-api-results {
    background-color: #f6f6f6;
    border-radius: 10px;
    padding: 15px;
    text-align: center;
    margin: 10px 0;
}

.no-api-results p {
    color: #666;
    margin: 0;
}

/* 突出第一张卡片背景 */
.resource-list .resource-card.local:first-child {
    background: linear-gradient(135deg,#eccad6 0%, #ffffff 100%);
}

.resource-list .resource-card.online:first-child {
    background: linear-gradient(135deg,#b2e5e1 0%, #ffffff 100%);
}

/* 首条资源卡片标题加粗 */
.resource-list .resource-card:first-child .resource-title {
    font-weight: 700;
}

/* 查看详情按钮样式 – 背景色淡化 */
.resource-card a.resource-link {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    font-size: 13px;
    border-radius: 15px;
    text-decoration: none;
    background: rgba(255, 77, 109, 0.12); /* 淡粉半透明背景 */
    color: #ff4d4f; /* 与品牌色一致 */
    transition: all 0.2s ease;
}
.resource-card a.resource-link:hover {
    background: rgba(255, 77, 109, 0.2);
    transform: translateX(3px);
    box-shadow: none;
}

/* 分享者标签 */
.resource-card .tag.share-tag {
    background-color: transparent;
    color: #888;
    border: 1px solid #d9d9d9;
}

/* tags 容器确保多标签横向排列 */
.resource-footer .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

/* 查看详情链接颜色区分 */
.resource-card.local a.resource-link{color:#ff4d6d;border-color:#ff4d6d;}
.resource-card.local a.resource-link:hover{color:#ff4d6d;}

.resource-card.online a.resource-link{color:#40a9ff;border-color:#40a9ff;}
.resource-card.online a.resource-link:hover{color:#40a9ff;}

/* 让整卡可点：提高覆盖层 z-index */
.resource-card .card-link{z-index:5;}

/* ================= PC 专用覆盖 ================= */
@media screen and (min-width: 768px) {
  .bottom-search .search-bubble {
    width: 888px !important;
    max-width: 888px !important;
    margin: 0 0 20px 20px !important; /* 左 20px 对齐，右侧收窄 */
  }
}

/* --- UI Fixes (更新 2025-07-09) ------------------------------- */
/* 统一 API 搜索加载动画占位，不再压缩卡片 */
.api-searching {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0 0 10px 0; /* 与结果区域间隔 */
    gap: 12px;
    background: none;
    padding: 0;
    border-radius: 0;
}

/* 缩略图弹窗左移半宽(60px)，避免溢出 */
.cover-popup {
    left: calc(100% - 10px); /* 原来 100%+20 ，现在整体左移 80px (≈半宽) */
    transform: translateY(-50%); /* 只纵向偏移，横向已用 left 调整 */
}
/* ------------------------------------------------------------ */

/* —— 复制按钮 & Toast ——————————— */
.message-actions{
    display:flex;
    gap:10px;
    margin:6px 0 2px 0;
    flex-wrap:nowrap; /* 不允许换行 */
    overflow-x:auto;  /* 视口过小可横向滚动而不是换行 */
}
.message-actions .copy-btn{
    border:none;
    border-radius:14px;
    padding:4px 12px;
    font-size:12px;
    cursor:pointer;
    transition:all .2s;
    background:linear-gradient(135deg,#FF4D6D,#FF9671);
    color:#fff;
    white-space:nowrap;
    flex-shrink:0;
}
.message-actions .copy-btn:hover{filter:brightness(1.1);}
/* 提示文字样式，与复制按钮保持一致风格但更轻量 */
.message-actions .tip-text{
    display:inline-block;
    font-size:12px;
    color:#666;
    background:#f5f5f5;
    border:1px solid #d9d9d9;
    border-radius:14px;
    padding:4px 12px;
    line-height:1;
    white-space:nowrap;
    flex-shrink:0;
}

.toast-msg{
    position:fixed;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    background:rgba(0,0,0,.8);
    color:#fff;
    padding:8px 16px;
    border-radius:20px;
    font-size:14px;
    z-index:9999;
    transition:opacity .5s;
}
.toast-msg.fade-out{opacity:0;}
/* ——————————————————————— */