/* ===== 自适应尺寸系统 - 基于视口比例 ===== */
/* 
 * 仅处理尺寸比例，不改变任何布局逻辑
 * 基准分辨率：1920x1080
 * 原始尺寸：图片380x200px，输入框1020px
 * 底部间距：50px → 自适应
 */

/* ===== 底部新闻图片自适应尺寸 ===== */
/* 380px ÷ 1920px = 19.8vw */
/* 200px ÷ 1080px = 18.5vh */
.news-image,
.ticker-flip-card img,
.flip-card-front img,
.flip-card-back img,
img[src*="新闻"] {
    /* 宽度：基于视口宽度，限制最小和最大值 */
    width: min(max(19.8vw, 280px), 380px) !important;
    /* 高度：保持宽高比 380:200 = 1.9:1 */
    height: min(max(10.4vw, 147px), 200px) !important;
    min-width: min(max(19.8vw, 280px), 380px) !important;
    min-height: min(max(10.4vw, 147px), 200px) !important;
    max-width: min(max(19.8vw, 280px), 380px) !important;
    max-height: min(max(10.4vw, 147px), 200px) !important;
}

/* 翻转卡片容器 - 匹配图片尺寸 */
.ticker-flip-card,
.flip-card-inner,
.flip-card-front,
.flip-card-back {
    width: min(max(19.8vw, 280px), 380px) !important;
    height: min(max(10.4vw, 147px), 200px) !important;
    min-width: min(max(19.8vw, 280px), 380px) !important;
    min-height: min(max(10.4vw, 147px), 200px) !important;
    max-width: min(max(19.8vw, 280px), 380px) !important;
    max-height: min(max(10.4vw, 147px), 200px) !important;
}

/* ===== 图片容器布局设置 ===== */
/* 保持原始的居中逻辑，调整间距让3张图片整体居中对齐 */
.ticker-carousel {
    gap: min(max(4.2vw, 60px), 80px) !important; /* 80px ÷ 1920px = 4.2vw，增大间距让3张图片分布更均匀 */
}

/* 确保ticker-carousel使用原始的居中方式 */
.ticker-3d-container .ticker-carousel,
#tickerCarousel,
body .ticker-carousel {
    position: absolute !important;
    top: 50% !important;
    left: calc(50% - 40px - 1%) !important; /* 向左偏移40px + 1% */
    transform: translate(-50%, -50%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important; /* 让宽度自适应内容 */
    max-width: 100% !important;
}

/* 侧边栏折叠时的偏移 */
body.sidebar-collapsed .ticker-carousel {
    left: calc(50% - 40px - 1%) !important; /* 向左偏移40px + 1% */
    transform: translate(-50%, -50%) !important;
}

/* 侧边栏展开时的偏移 */
body:not(.chat-mode):not(.sidebar-collapsed) .ticker-carousel {
    left: calc(50% - 130px - 2%) !important; /* 向左偏移130px + 2% */
    transform: translate(-50%, -50%) !important;
}

/* ===== 输入框自适应宽度 ===== */
/* 调整为 1200px ÷ 1920px = 62.5vw，更宽的输入框 */
.deepseek-input-section .input-area,
#welcomeMode .input-area,
#chatModeInput .container {
    max-width: min(max(62.5vw, 600px), 1200px) !important;
}

.input-wrapper {
    /* 在大屏幕上自适应，小屏幕保持最小值 */
    max-width: min(max(62.5vw, 600px), 1200px) !important;
}

/* ===== 聊天消息容器宽度 ===== */
.chat-messages {
    /* 移除限制，由layout-fixes.css控制 */
}

/* ===== 聊天模式输入框宽度 ===== */
#chatModeInput .container,
#chatModeInput .input-wrapper {
    max-width: min(max(62.5vw, 600px), 1200px) !important; /* 与主页输入框一致 */
    margin: 0 auto !important;
}

/* ===== 聊天消息项宽度 ===== */
.chat-message,
.message-content {
    /* 消息项宽度由容器控制 */
}

/* ===== 侧边栏字体大小调整 ===== */
/* 调整侧边栏菜单项文字大小，与聊天内容区一致 */
.menu-item,
.menu-text,
.sidebar .menu-item {
    font-size: 16px !important; /* 与聊天内容保持一致 */
}

/* 增加侧边栏内边距，防止图标被遮挡 */
.sidebar,
#sidebar {
    padding-left: 8px !important;  /* 增加左内边距 */
    padding-right: 8px !important; /* 增加右内边距 */
}

/* 侧边栏内容区域调整 */
.sidebar-content {
    padding: 0 4px !important; /* 给内容增加一点内边距 */
}

/* 历史记录标题 */
.chat-history-title {
    font-size: 16px !important;
    font-weight: 600 !important;
}

/* 历史记录项 */
.chat-history-item,
.chat-history-item .chat-title,
.chat-history-list .chat-history-item {
    font-size: 16px !important;
    line-height: 1.5 !important;
}

/* 历史记录区域整体 */
.chat-history-section {
    font-size: 16px !important;
}

/* 确保所有历史记录文字统一 */
.sidebar .chat-history-item,
#sidebar .chat-history-item {
    font-size: 16px !important;
}

/* 侧边栏底部菜单项 */
.sidebar-bottom-items .menu-item {
    font-size: 16px !important;
}

/* ===== 自定义滚动条样式 ===== */
/* Webkit浏览器（Chrome, Safari, Edge）*/
::-webkit-scrollbar {
    width: 8px !important;  /* 滚动条宽度 */
    height: 8px !important; /* 水平滚动条高度 */
}

::-webkit-scrollbar-track {
    background: transparent !important; /* 轨道透明 */
    border-radius: 4px !important;
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2) !important; /* 滑块颜色 */
    border-radius: 4px !important;
    transition: background 0.2s !important;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3) !important; /* 悬停时颜色加深 */
}

/* Firefox浏览器 */
* {
    scrollbar-width: thin !important; /* 细滚动条 */
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent !important;
}

/* 聊天区域特定的滚动条样式 */
.chat-messages::-webkit-scrollbar,
.chat-container::-webkit-scrollbar,
.overflow-y-auto::-webkit-scrollbar {
    width: 6px !important; /* 更细的滚动条 */
}

.chat-messages::-webkit-scrollbar-thumb,
.chat-container::-webkit-scrollbar-thumb,
.overflow-y-auto::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15) !important;
}

.chat-messages::-webkit-scrollbar-thumb:hover,
.chat-container::-webkit-scrollbar-thumb:hover,
.overflow-y-auto::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.25) !important;
}

/* ===== 欢迎文字自适应大小 ===== */
.deepseek-welcome-section h2,
.text-4xl {
    /* 4rem = 64px，64px ÷ 1080px = 5.9vh */
    font-size: min(max(3.3vw, 2rem), 4rem) !important;
}

/* ===== 底部图片区域位置自适应 ===== */
/* 50px ÷ 1080px = 4.6vh，但这太大了，改为 2.6vh (约28px在1080p) */
.ticker-section,
body .ticker-section,
html body .ticker-section {
    /* 底部间距：基于视口高度，最小20px，最大40px */
    bottom: min(max(2.6vh, 20px), 40px) !important;
    /* 确保3D翻转有足够空间 */
    overflow: visible !important;
    z-index: 10 !important;
    /* 确保使用全屏宽度 */
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
}

/* 强制覆盖侧边栏响应式设置 */
body:not(.chat-mode) .ticker-section,
body:not(.chat-mode):not(.sidebar-collapsed) .ticker-section {
    left: 0 !important;
    width: 100% !important;
}

/* ===== 欢迎栏和输入框位置自适应 ===== */
/* 欢迎栏文字位置 - 垂直居中偏上 */
.deepseek-welcome-section {
    /* 使用绝对定位，基于视口 */
    position: absolute !important;
    top: max(23vh, 140px) !important; /* 距顶部23%视口高度（原25% - 2%） */
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100% !important;
    text-align: center !important;
}

/* 输入框位置 - 紧贴欢迎栏下方 */
body:not(.chat-mode) .deepseek-input-section {
    position: fixed !important;
    /* 紧贴欢迎栏，只留小间距 */
    top: max(35vh, 220px) !important; /* 欢迎栏25vh + 文字高度约8vh + 小间距2vh = 35vh */
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100% !important;
    max-width: min(max(62.5vw, 600px), 1200px) !important; /* 更宽的输入框 */
    z-index: 20 !important;
}

/* 小窗口时的特殊处理 */
@media (max-height: 700px) {
    .deepseek-welcome-section {
        top: 70px !important; /* 固定位置，更靠上（原80px - 10px） */
    }
    
    body:not(.chat-mode) .deepseek-input-section {
        top: 160px !important; /* 紧贴欢迎栏下方 */
    }
    
    .deepseek-welcome-section h2 {
        font-size: 1.8rem !important; /* 进一步缩小文字 */
    }
}

/* ===== 不同分辨率优化 ===== */

/* 2K屏幕 (2560x1440) */
@media (min-width: 2560px) {
    /* 在2K屏幕上限制最大尺寸，防止过大 */
    .news-image,
    .ticker-flip-card img {
        width: 420px !important;  /* 380 × 1.1 */
        height: 221px !important; /* 200 × 1.1 */
    }
    
    .ticker-flip-card,
    .flip-card-inner,
    .flip-card-front,
    .flip-card-back {
        width: 420px !important;
        height: 221px !important;
    }
    
    .input-wrapper,
    .deepseek-input-section .input-area,
    #chatModeInput .container,
    .chat-messages,
    .chat-message {
        max-width: 1320px !important; /* 1200 × 1.1 */
    }
    
    .ticker-section {
        bottom: 35px !important; /* 适度增加底部间距 */
    }
}

/* 4K屏幕 (3840x2160) */
@media (min-width: 3840px) {
    /* 在4K屏幕上进一步限制，防止元素过大 */
    .news-image,
    .ticker-flip-card img {
        width: 480px !important;  /* 380 × 1.26 */
        height: 253px !important; /* 200 × 1.26 */
    }
    
    .ticker-flip-card,
    .flip-card-inner,
    .flip-card-front,
    .flip-card-back {
        width: 480px !important;
        height: 253px !important;
    }
    
    .input-wrapper,
    .deepseek-input-section .input-area,
    #chatModeInput .container,
    .chat-messages,
    .chat-message {
        max-width: 1500px !important; /* 1200 × 1.25 */
    }
    
    .deepseek-welcome-section h2 {
        font-size: 5rem !important;
    }
    
    .ticker-section {
        bottom: 40px !important; /* 4K屏幕保持合理间距 */
    }
}

/* 小屏幕笔记本 (1366x768) */
@media (max-width: 1366px) {
    /* 使用vw单位自动缩放 */
    /* 图片会自动变为约270px宽 (19.8vw × 1366px) */
    /* 输入框会自动变为约725px宽 (53.1vw × 1366px) */
    
    /* 调整欢迎栏和输入框位置 */
    .deepseek-welcome-section {
        top: max(18vh, 110px) !important; /* 上移2% */
    }
    
    body:not(.chat-mode) .deepseek-input-section {
        top: max(30vh, 190px) !important; /* 紧贴欢迎栏 */
    }
}

/* 更小屏幕 (1280x720) */
@media (max-width: 1280px) {
    /* 确保最小尺寸 */
    .news-image,
    .ticker-flip-card img {
        width: max(19.8vw, 250px) !important;
        height: max(10.4vw, 132px) !important;
    }
}

/* 平板和移动设备保持原有逻辑 */
@media (max-width: 768px) {
    /* 平板设备使用固定小尺寸 */
    .news-image,
    .ticker-flip-card img {
        width: 250px !important;
        height: 132px !important;
    }
    
    .ticker-flip-card,
    .flip-card-inner,
    .flip-card-front,
    .flip-card-back {
        width: 250px !important;
        height: 132px !important;
    }
    
    .input-wrapper {
        max-width: 90vw !important;
    }
    
    /* 平板上调整位置 */
    .deepseek-welcome-section {
        top: 60px !important; /* 固定位置 */
    }
    
    body:not(.chat-mode) .deepseek-input-section {
        top: 140px !important; /* 紧贴欢迎栏 */
    }
}

@media (max-width: 480px) {
    /* 手机设备隐藏底部图片 */
    .ticker-section {
        display: none !important;
    }
    
    .input-wrapper {
        max-width: 95vw !important;
    }
    
    .deepseek-welcome-section h2 {
        font-size: 1.8rem !important;
    }
    
    /* 手机上调整位置 */
    .deepseek-welcome-section {
        top: 40px !important; /* 固定位置 */
    }
    
    body:not(.chat-mode) .deepseek-input-section {
        top: 110px !important; /* 紧贴欢迎栏 */
    }
}