/* ===== 布局修复和位置调整 ===== */
/* 合并了input-position-fix.css和layout-override.css的功能 */

/* ===== 通用布局修复 ===== */

/* 欢迎模式布局修复 */
#welcomeMode {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    position: relative;
}

/* 欢迎内容容器居中 */
.welcome-content-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(100vh - 460px); /* 调整为适应上移后的布局 */
    width: 100%;
    padding: 2rem;
}

/* 确保容器内的内容居中 */
.welcome-content-wrapper > .container {
    position: relative;
    top: auto !important;
    left: auto !important;
    transform: none !important;
}

/* 主聊天区域调整 */
.chat-section {
    position: relative;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

/* 保持适当的间距 */
.deepseek-input-section {
    position: relative;
    z-index: 20;
}

/* 确保输入框不被3D图片遮挡 */
.input-wrapper {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(20px) !important;
}

/* 确保聊天内容不被输入框遮挡 */
.chat-messages {
    scroll-padding-bottom: 100px;
}

/* 消息项样式 */
.message-item {
    max-width: 100%;
    margin: 0 0 1rem 0;
    width: 100%;
    position: relative;
}

/* 用户消息右对齐 */
.message-item .flex.justify-end {
    justify-content: flex-end !important;
}

/* AI消息左对齐 */
.message-item .flex.justify-start {
    justify-content: flex-start !important;
}

/* 消息项添加底部间距 */
.chat-messages > :last-child {
    margin-bottom: 20px;
}

/* 控制面板在欢迎模式的位置 */
#welcomeMode .deep-research-controls {
    margin-bottom: 15px !important;
}

/* ticker-section显示控制 - 尺寸由image-size-fix.css控制 */
.ticker-section {
    display: block !important;
}

/* ===== 输入框位置修复 ===== */

/* 欢迎模式输入框位置 - 使用固定定位精确控制 */
body:not(.chat-mode) .deepseek-input-section {
    position: fixed !important;
    bottom: 410px !important;  /* 距离底部410px */
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100% !important;
    max-width: 1020px !important;
    margin-bottom: 0 !important;
    z-index: 15 !important;
}

/* 欢迎栏同步移动 */
body:not(.chat-mode) .deepseek-welcome-section {
    position: fixed !important;
    bottom: 770px !important;  /* 距离底部770px */
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100% !important;
    text-align: center !important;
    z-index: 15 !important;
}

/* 聊天模式固定输入框位置修复 */
#chatModeInput {
    position: fixed !important;
    bottom: 0 !important; /* 固定在最底部 */
    left: 260px !important; /* 从侧边栏后开始 */
    right: 20px !important; /* 留出更多滚动条空间 */
    z-index: 30;
    padding: 0 !important;
    transition: left 0.3s ease;
    border: none !important; /* 移除边框 */
    border-top: none !important; /* 确保没有顶部边框 */
    box-shadow: none !important; /* 移除阴影 */
    max-width: calc(100vw - 280px) !important; /* 限制最大宽度 */
}

/* 侧边栏折叠时调整输入框位置 */
body.sidebar-collapsed #chatModeInput {
    left: 70px !important;
    right: 20px !important; /* 保持右边距 */
    max-width: calc(100vw - 90px) !important;
}

/* 内部容器样式 - 确保居中并统一宽度 */
#chatModeInput .container {
    background: transparent !important;
    padding: 1rem;
    margin: 0 auto !important;
    max-width: 1020px !important;  /* 与欢迎模式保持一致 */
    width: 100% !important;
}

/* 确保聊天输入框容器有足够高度 */
#chatModeInput {
    min-height: 140px !important; /* 设置最小高度 */
}

/* 强制聊天模式下的容器宽度 */
body.chat-mode #chatModeInput .container,
body #chatModeInput .container[style],
body #chatModeInput div[class*="container"] {
    max-width: 1020px !important;
    width: 100% !important;
    margin: 0 auto !important;
}

/* 确保输入框wrapper也有正确的宽度 */
body #chatModeInput .input-wrapper {
    max-width: 100% !important;
    width: 100% !important;
}

/* 移除任何可能的白色背景 */
#chatModeInput::before,
#chatModeInput::after {
    display: none !important;
}

/* 聊天容器高度调整 - flex布局占满视口 */
#chatContainer {
    position: fixed !important;
    top: 0 !important;
    left: 260px !important; /* 从侧边栏后开始 */
    right: 0 !important;
    bottom: 0 !important;
    z-index: 15 !important;
    display: none;
    overflow-y: auto !important; /* 整个容器可滚动 */
    height: 100vh !important;
    transition: left 0.3s ease;
}

/* 侧边栏折叠时调整 */
body.sidebar-collapsed #chatContainer {
    left: 70px !important;
}

/* 聊天包装器 - flex布局 */
.chat-wrapper {
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    background: transparent !important; /* 透明，显示容器背景 */
}

/* 聊天消息区域调整 - flex自动填充 */
#chatMessages {
    flex: 1 !important;
    max-width: 1020px !important;  /* 与输入框宽度一致 */
    width: 100% !important;
    margin: 0 auto !important;
    padding: 20px 1rem 250px 1rem !important; /* 充足的底部空间避免遮挡 */
    padding-bottom: 250px !important; /* 强制底部padding */
    position: relative !important;
    overflow: visible !important; /* 不要内部滚动条 */
    overflow-y: visible !important; /* 确保不显示Y轴滚动条 */
    overflow-x: visible !important; /* 确保不显示X轴滚动条 */
}

/* 使用更强的选择器确保生效 */
body .chat-container #chatMessages,
body #chatContainer #chatMessages,
body div#chatMessages.chat-messages {
    padding-bottom: 250px !important;
}

/* 内联样式覆盖 */
#chatMessages[style] {
    padding-bottom: 250px !important;
}

/* 强制移除overflow-y-auto类的效果 */
#chatMessages.overflow-y-auto,
.chat-messages.overflow-y-auto {
    overflow-y: visible !important;
    overflow: visible !important;
}

/* 覆盖内联样式 - 使用更强的选择器 */
body div[style*="margin-bottom"].deepseek-input-section,
html body .deepseek-input-section[style*="margin-bottom"],
#welcomeMode div.deepseek-input-section[style] {
    margin-bottom: 80px !important;
}

/* ===== 底部图片区域位置调整 ===== */

/* 底部图片区域强制上移 - 仅在欢迎模式 */
body .ticker-section,
html body .ticker-section,
div[class*="ticker-section"],
section div.ticker-section,
[style*="bottom"].ticker-section {
    bottom: 50px !important;  /* 距离底部50px */
}

/* 聊天模式时隐藏底部图片 */
body.chat-mode .ticker-section {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
}

/* 聊天模式时显示容器 */
body.chat-mode #chatContainer {
    display: block !important;
}

/* 聊天模式时显示输入框 */
body.chat-mode #chatModeInput {
    display: block !important;
}

/* ===== 响应式布局调整 ===== */

/* 移动端适配 */
@media (max-width: 768px) {
    #chatModeInput {
        bottom: 0 !important;
    }
    
    #chatContainer {
        bottom: 0;
        padding-bottom: 60px;
    }
    
    #chatMessages {
        height: calc(100% - 80px);
    }
    
    .welcome-content-wrapper {
        min-height: 100vh;
        padding: 1rem;
    }
}

/* 高度不足时的处理 */
@media (max-height: 700px) {
    #chatModeInput {
        bottom: 0 !important;
    }
    
    .welcome-content-wrapper {
        min-height: 100vh;
    }
}

@media (max-height: 600px) {
    #chatModeInput {
        bottom: 0 !important;
    }
    
    #chatContainer {
        bottom: 0;
    }
}

/* 全屏幕尺寸统一规则 */
@media all {
    body .ticker-section {
        bottom: 50px !important;
    }
    
    body .deepseek-input-section {
        margin-bottom: 80px !important;  /* 欢迎模式 */
    }
    
    body #chatModeInput {
        bottom: 0 !important;  /* 聊天模式沉底 */
    }
    
    body.chat-mode .ticker-section {
        display: none !important;
    }
    
    body #chatModeInput .container,
    body #chatModeInput div[class*="container"],
    body #chatMessages {
        max-width: 1020px !important;
        width: 100% !important;
        margin: 0 auto !important;
    }
}