/* layout.css */

/* 引入基础骨架 */
@import url("layout_base.css");

/* 引入三面板与Tab布局 */
@import url("layout_panels.css");

/* 引入 Gemini 风格直播脚本组件 */
@import url("layout_prompter.css");

/* 通用辅助样式（如滚动条） */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-thumb { background: #e0e0e0; border-radius: 10px; }

.content-area { 
    padding: 15px 20px; 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    min-height: 0; 
    overflow: hidden; 
}


/* ================================================= */
/* 🔴 移动端全局“嵌套”修复逻辑 (max-width: 768px)   */
/* ================================================= */

@media screen and (max-width: 768px) {
    /* 1. 强制所有大容器从“左右”变为“上下” */
    .container, 
    .main-wrapper, 
    #prompter-result-box, 
    .content-area {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        overflow-x: hidden !important;
    }

    /* 2. 修复左侧弹幕区和右侧内容区的比例 */
    #left, #right, .prompter-sidebar, .prompter-main {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        height: auto !important;
    }

    /* 3. 针对“直播内容”侧边栏的特殊处理：变成顶部小滑块 */
    .prompter-sidebar {
        height: 150px !important;
        border-right: none !important;
        border-bottom: 1px solid #eee !important;
    }
    .sidebar-list {
        max-height: 100px !important;
    }

    /* 4. 修复顶部导航/Tab 栏：允许换行 */
    .tabs, .nav-header {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 5px !important;
    }
    
    .tab-btn {
        padding: 8px 12px !important;
        font-size: 13px !important;
        flex: 1 1 30% !important; /* 让 Tab 在手机上一行显示三个 */
        text-align: center;
    }

    /* 5. 核心：全局内边距修正 */
    body, .prompter-content-scroll, #result-box {
        padding: 10px !important;
    }

    /* 6. 浮动按钮与输入框：确保不遮挡内容 */
    .prompter-input-container {
        position: relative !important; /* 手机端先设为相对，防止盖住文字 */
        bottom: 0 !important;
        left: 0 !important;
        transform: none !important;
        width: 100% !important;
        margin-top: 20px;
    }

    .prompter-textarea {
        min-height: 300px !important; /* 保证手机端有足够书写空间 */
    }

    /* 7. 隐藏在手机端没用的装饰性元素 */
    .icon-btn, .desktop-only {
        display: none !important;
    }
}