/* ===== 页面缩放支持 ===== */

/* 基础缩放适配 */
html {
    /* 使用视口单位确保缩放时正确响应 */
    font-size: clamp(14px, 1vw, 18px);
}

/* 容器缩放响应 */
.container {
    width: 100%;
    max-width: min(1536px, 95vw);
    margin: 0 auto;
    padding-left: clamp(1rem, 2vw, 2rem);
    padding-right: clamp(1rem, 2vw, 2rem);
}

/* 侧边栏缩放适配 */
.sidebar {
    width: clamp(220px, 18vw, 280px);
    font-size: clamp(0.875rem, 0.9vw, 1rem);
}

.sidebar.collapsed {
    width: clamp(60px, 5vw, 80px);
}

/* 主内容区域缩放 */
.main-content {
    margin-left: clamp(220px, 18vw, 280px);
    padding: clamp(1rem, 2vw, 2rem);
}

.sidebar.collapsed + .main-content {
    margin-left: clamp(60px, 5vw, 80px);
}

/* 文字大小缩放适配 */
h1 { font-size: clamp(1.5rem, 2.5vw, 2.5rem); }
h2 { font-size: clamp(1.25rem, 2vw, 2rem); }
h3 { font-size: clamp(1.125rem, 1.5vw, 1.5rem); }
h4 { font-size: clamp(1rem, 1.25vw, 1.25rem); }
p, .text-base { font-size: clamp(0.875rem, 1vw, 1.125rem); }
.text-sm { font-size: clamp(0.75rem, 0.875vw, 1rem); }
.text-xs { font-size: clamp(0.625rem, 0.75vw, 0.875rem); }

/* 输入框缩放适配 */
.input-area {
    padding: clamp(1rem, 2vw, 2rem);
    border-radius: clamp(16px, 1.5vw, 24px);
}

.input-area textarea {
    font-size: clamp(14px, 1vw, 16px);
    min-height: clamp(40px, 5vh, 60px);
    max-height: clamp(120px, 15vh, 200px);
    padding: clamp(0.5rem, 1vw, 1rem);
}

/* 按钮缩放适配 */
button, .btn {
    padding: clamp(0.5rem, 0.75vw, 0.75rem) clamp(1rem, 1.5vw, 1.5rem);
    font-size: clamp(0.75rem, 0.9vw, 1rem);
    border-radius: clamp(0.375rem, 0.5vw, 0.5rem);
    min-height: clamp(36px, 3.5vh, 48px);
}

.feature-btn {
    padding: clamp(0.75rem, 1vw, 1rem) clamp(1rem, 1.5vw, 1.5rem);
    font-size: clamp(0.75rem, 0.875vw, 0.875rem);
}

.feature-btn i {
    font-size: clamp(1rem, 1.25vw, 1.5rem);
}

/* 聊天消息缩放 */
.chat-messages {
    height: clamp(300px, 50vh, 600px);
    padding: clamp(0.75rem, 1.5vw, 1.5rem);
}

.message-item {
    margin-bottom: clamp(0.5rem, 1vw, 1rem);
}

.user-message,
.ai-message {
    padding: clamp(0.625rem, 1vw, 1rem) clamp(0.875rem, 1.25vw, 1.25rem);
    font-size: clamp(0.813rem, 0.95vw, 1rem);
    border-radius: clamp(12px, 1vw, 18px);
    max-width: min(600px, 70%);
}

/* 3D新闻卡片样式已移至image-size-fix.css处理 */
/* .ticker-* 相关样式已被image-size-fix.css覆盖 */

.news-content {
    font-size: clamp(11px, 0.8vw, 14px);
}

/* 菜单项缩放 */
.menu-item {
    padding: clamp(0.5rem, 0.75vw, 0.75rem) clamp(0.625rem, 1vw, 1rem);
    font-size: clamp(0.75rem, 0.875vw, 0.875rem);
}

.menu-icon {
    width: clamp(24px, 2vw, 30px);
    height: clamp(24px, 2vw, 30px);
    font-size: clamp(1.125rem, 1.5vw, 1.5rem);
}

/* 聊天历史项缩放 */
.chat-history-item {
    padding: clamp(0.5rem, 0.75vw, 0.75rem) clamp(0.75rem, 1vw, 1rem);
}

.chat-title {
    font-size: clamp(0.75rem, 0.875vw, 0.875rem);
}

/* 深度研究控制面板缩放 */
.deep-research-controls {
    padding: clamp(0.75rem, 1vw, 1rem);
    margin-top: clamp(0.5rem, 0.75vw, 0.75rem);
    border-radius: clamp(0.5rem, 0.75vw, 0.75rem);
}

.toggle-switch {
    width: clamp(40px, 3vw, 48px);
    height: clamp(20px, 1.5vw, 24px);
}

.toggle-slider span {
    width: clamp(16px, 1.2vw, 20px);
    height: clamp(16px, 1.2vw, 20px);
}

/* 工具提示缩放 */
.tooltip-text {
    font-size: clamp(11px, 0.8vw, 13px);
    padding: clamp(4px, 0.5vw, 6px) clamp(8px, 1vw, 10px);
}

/* Markdown内容缩放 */
.markdown-content {
    font-size: clamp(0.813rem, 0.95vw, 1rem);
    line-height: clamp(1.4, 1.6vw, 1.8);
}

.markdown-content h1 { font-size: clamp(1.25rem, 1.75vw, 1.75rem); }
.markdown-content h2 { font-size: clamp(1.125rem, 1.5vw, 1.5rem); }
.markdown-content h3 { font-size: clamp(1rem, 1.25vw, 1.25rem); }

.markdown-content code {
    font-size: clamp(0.75rem, 0.875vw, 0.875rem);
    padding: clamp(0.125rem, 0.2vw, 0.25rem) clamp(0.25rem, 0.4vw, 0.5rem);
}

.markdown-content pre {
    padding: clamp(0.75rem, 1vw, 1rem);
    font-size: clamp(0.75rem, 0.875vw, 0.875rem);
}

/* 视口单位限制 - 防止过度缩放 */
@media (min-width: 1920px) {
    html { font-size: 16px; }
}

@media (max-width: 1280px) {
    html { font-size: 15px; }
}

@media (max-width: 1024px) {
    html { font-size: 14px; }
}

/* 浏览器缩放级别适配 */
@media (min-resolution: 120dpi) {
    /* 125% 缩放 */
    .container { max-width: 1280px; }
}

@media (min-resolution: 144dpi) {
    /* 150% 缩放 */
    .container { max-width: 1024px; }
    
    .sidebar { width: 240px; }
    .main-content { margin-left: 240px; }
}

@media (min-resolution: 192dpi) {
    /* 200% 缩放 */
    .container { max-width: 768px; }
    
    .sidebar { width: 220px; }
    .main-content { margin-left: 220px; }
    
    /* 调整间距 */
    .message-item { margin-bottom: 0.75rem; }
    .feature-btn { margin: 0.25rem; }
}

/* 页面缩放时保持比例 */
* {
    /* 使用相对单位 */
    line-height: inherit;
    letter-spacing: inherit;
}

/* 图片和媒体缩放 */
img, video, iframe {
    max-width: 100%;
    height: auto;
}

/* 固定定位元素缩放 */
.fixed {
    /* 使用视口单位定位 */
}

#chatModeInput {
    padding: clamp(0.5rem, 1vw, 1rem);
}

/* 滚动条缩放 */
::-webkit-scrollbar {
    width: clamp(4px, 0.5vw, 8px);
}

/* 动画时间缩放适配 */
@media (prefers-reduced-motion: no-preference) {
    * {
        animation-duration: inherit;
        transition-duration: inherit;
    }
}

/* 确保缩放时不出现水平滚动条 */
body {
    overflow-x: hidden;
    min-width: 320px;
}

/* 响应式网格缩放 */
.grid {
    gap: clamp(0.5rem, 1vw, 1rem);
}

/* 阴影缩放 */
.shadow-sm { box-shadow: 0 clamp(1px, 0.1vw, 2px) clamp(2px, 0.2vw, 4px) rgba(0, 0, 0, 0.05); }
.shadow { box-shadow: 0 clamp(1px, 0.1vw, 2px) clamp(3px, 0.3vw, 6px) rgba(0, 0, 0, 0.1); }
.shadow-md { box-shadow: 0 clamp(4px, 0.4vw, 8px) clamp(6px, 0.6vw, 12px) rgba(0, 0, 0, 0.1); }
.shadow-lg { box-shadow: 0 clamp(10px, 1vw, 20px) clamp(15px, 1.5vw, 30px) rgba(0, 0, 0, 0.1); }

/* 边框缩放 */
.border { border-width: clamp(1px, 0.1vw, 2px); }
.border-2 { border-width: clamp(2px, 0.2vw, 3px); }

/* 圆角缩放 */
.rounded { border-radius: clamp(0.25rem, 0.4vw, 0.5rem); }
.rounded-md { border-radius: clamp(0.375rem, 0.5vw, 0.75rem); }
.rounded-lg { border-radius: clamp(0.5rem, 0.75vw, 1rem); }
.rounded-xl { border-radius: clamp(0.75rem, 1vw, 1.5rem); }
.rounded-2xl { border-radius: clamp(1rem, 1.5vw, 2rem); }

/* 确保最小可读性 */
@supports (font-size: clamp(1rem, 1vw, 2rem)) {
    /* 现代浏览器使用 clamp */
}

@supports not (font-size: clamp(1rem, 1vw, 2rem)) {
    /* 旧浏览器回退方案 */
    html { font-size: 16px; }
    
    @media (max-width: 1200px) {
        html { font-size: 15px; }
    }
    
    @media (max-width: 768px) {
        html { font-size: 14px; }
    }
}