/* ===== 修复输入框遮挡消息的问题 ===== */

/* 设置输入框高度变量 */
:root {
    --chat-input-height: 160px; /* 聊天输入框的默认高度（包含padding） */
}

/* 方案B：fixed定位的输入框需要为消息列表预留空间 */

/* 聊天消息区域 - 添加底部内边距避免被fixed输入框遮挡 */
#chatMessages {
    padding-bottom: calc(var(--chat-input-height) + 10px) !important; /* 输入框高度 + 小间距 */
    box-sizing: border-box !important;
}

/* 确保在各种选择器下都生效 - 使用更强的选择器 */
body .chat-messages,
body div#chatMessages,
body #chatContainer #chatMessages,
html body #chatMessages.chat-messages {
    padding-bottom: calc(var(--chat-input-height) + 10px) !important;
    box-sizing: border-box !important;
}

/* 处理iOS安全区域 */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    #chatMessages {
        padding-bottom: calc(var(--chat-input-height) + env(safe-area-inset-bottom) + 10px) !important;
    }
}

/* 聊天输入框保持fixed定位 */
#chatModeInput {
    position: fixed !important;
    bottom: 0 !important;
    z-index: 30 !important;
    /* 其他样式保持不变 */
}

/* 响应式调整 */
@media (max-width: 768px) {
    :root {
        --chat-input-height: 120px; /* 移动端输入框高度 */
    }
}

/* 当输入框展开时（多行文本）的处理 */
#chatModeMessageInput:focus {
    /* 输入框获得焦点时可能需要更多空间 */
}

/* 覆盖任何内联样式 */
#chatMessages[style*="padding-bottom"] {
    padding-bottom: calc(var(--chat-input-height) + 20px) !important;
}

/* 使用伪元素创建底部空间 */
#chatMessages::after {
    content: '';
    display: block;
    height: var(--chat-input-height);
    min-height: 160px;
    width: 100%;
    pointer-events: none;
}

/* 确保最后一个消息有适当的底部间距 */
#chatMessages > *:last-child {
    margin-bottom: 10px !important; /* 只留10px的小间距 */
}