/* =========================================
   AI 助手整体样式 - 2024移动端终极优化版
   ========================================= */
#ai-hub-app { margin: 20px 0; }

/* 1. 顶部导航容器 */
.ai-hub-nav-wrapper {
    background-color: #ffffff;
    border-bottom: 1px solid #f0f0f0;
    box-shadow: 0 2px 7px 0 rgb(218 225 236 / 60%);
    padding: 20px;
    margin-bottom: 40px;
    margin-top: -80px; /* 向上浮动覆盖 Banner */
    position: relative;
    border-radius: 8px;
    z-index: 10;
}

.ai-hub-container {
    max-width: 1280px;
    margin: 0 auto;
}

/* 2. 选项卡布局：默认桌面端 */
.ai-hub-tabs {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 15px;
}

/* 单个选项卡项目 */
.ai-hub-tab-item {
    flex: 0 0 calc(33.33% - 10px); /* 三等分 */
    box-sizing: border-box;
    cursor: pointer;
    transition: transform 0.3s ease;
}

/* 图片盒子 */
.ai-hub-image-box {
    border: 3px solid transparent;
    border-radius: 12px;
    overflow: hidden;
    line-height: 0;
    background: #fff;
    transition: all 0.3s ease;
}

.ai-hub-image-box img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* 激活状态 */
.ai-hub-tab-item.is-active .ai-hub-image-box {
    border-color: #1890ff;
    box-shadow: 0 5px 15px rgba(24, 144, 255, 0.2);
}

.ai-hub-tab-item.is-active {
    transform: translateY(-5px);
}

/* 3. Tab 切换内容区头部 (教案/讲稿/总结 的子菜单) */
.ai-tab-header {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 30px;
}

.tab-item {
    padding: 12px 30px;
    background: #fff;
    border-radius: 30px;
    cursor: pointer;
    border: 1px solid #e0e0e0;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tab-item:hover,
.tab-item.active {
    background: #409eff;
    color: #fff;
    border-color: #409eff;
    box-shadow: 0 4px 12px rgba(64,158,255,0.2);
}

/* 4. 编辑器容器整体布局 */
.ai-editor-container {
    display: flex;
    background: #f0f4f9;
    border-radius: 20px;
    overflow: hidden;
    min-height: 700px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    margin-top: 20px;
}

/* 左侧侧边栏 */
.ai-sidebar {
    width: 260px;
    background: #ffffff;
    padding: 30px 20px;
    border-right: 1px solid #eef2f6;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.sidebar-header h3 {
    font-size: 1.2rem;
    color: #1a1a1a;
    margin-bottom: 30px;
    font-weight: 600;
}

.nav-group-title {
    font-size: 12px;
    color: #909399;
    margin-bottom: 12px;
    padding-left: 10px;
    text-transform: uppercase;
    font-weight: 500;
}

.sidebar-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s;
    color: #606266;
    margin-bottom: 5px;
    font-size: 14px;
}

.sidebar-item:hover {
    background: #f5f7fa;
    transform: translateX(3px);
}

.sidebar-item.active {
    background: #ecf5ff;
    color: #1890ff;
    font-weight: 600;
    box-shadow: 0 3px 10px rgba(24, 144, 255, 0.1);
}

.sidebar-item i {
    font-size: 18px;
    width: 20px;
    text-align: center;
}

/* 进度指示器 */
.step-indicator {
    padding: 10px;
    font-size: 14px;
    color: #c0c4cc;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
}

.step-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #f0f2f5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 500;
}

.step-indicator.processing { color: #1890ff; }
.step-indicator.processing .step-dot { background: #1890ff; color: #fff; box-shadow: 0 2px 8px rgba(24, 144, 255, 0.3); }
.step-indicator.finished { color: #67c23a; }
.step-indicator.finished .step-dot { background: #67c23a; color: #fff; }

.sidebar-footer { margin-top: auto; padding-top: 20px; border-top: 1px solid #eee; }

/* 右侧主内容区 */
.ai-main-content {
    flex: 1;
    background: #ffffff;
    margin: 15px;
    border-radius: 16px;
    padding: 40px;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.02);
    overflow-y: auto;
}

.content-title {
    margin-bottom: 30px;
    font-weight: 600;
    color: #1a1a1a;
    font-size: 1.4rem;
}
.content-subtitle { color: #606266; font-size: 14px; margin-bottom: 20px; }

/* 左右双栏布局 (用于结果编辑) */
.dual-editor-layout { display: flex; gap: 20px; height: 550px; }
.preview-panel {
    flex: 1;
    background: #fafafa;
    border-radius: 12px;
    border: 1px dashed #dcdfe6;
    display: flex; align-items: center; justify-content: center;
    color: #909399; font-size: 14px;
}
.edit-panel { flex: 2; display: flex; flex-direction: column; }
.edit-panel .editor-header {
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-weight: bold; color: #606266;
}
.edit-panel .el-textarea__inner {
    font-size: 15px; line-height: 1.8; padding: 15px; height: 100%; border-radius: 8px; border: 1px solid #e4e7ed; transition: border-color 0.3s;
}
.edit-panel .el-textarea__inner:focus { border-color: #1890ff; box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1); }

/* 教案主卡片 */
.ai-main-card { background: #fff; padding: 30px; border-radius: 12px; }

/* 模式选择器 (默认桌面端样式) */
.mode-selector-wrapper { display: flex; gap: 20px; justify-content: center; padding: 60px 0; }
.mode-box {
    width: 240px; padding: 25px; border: 2px solid #f0f0f0; border-radius: 12px; text-align: center; cursor: pointer; transition: all 0.3s; display: flex; flex-direction: column; align-items: center; background: #fff;
}
.mode-box:hover { transform: translateY(-5px); border-color: #409eff; box-shadow: 0 10px 30px rgba(0,0,0,0.08); }
.mode-box.active { border-color: #1890ff; background-color: #f0f7ff; box-shadow: 0 8px 25px rgba(24, 144, 255, 0.15); }
.mode-box i { font-size: 40px; color: #1890ff; margin-bottom: 10px; }
.mode-box h4 { margin: 10px 0; color: #1a1a1a; }
.mode-box p { color: #666; font-size: 13px; line-height: 1.5; }

/* 结果卡片 */
.ai-content-card { background: #fff; padding: 30px; border-radius: 12px; min-height: 500px; border: 1px solid #f0f0f0; }

/* 结果表格 */
.result-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #eee; }
.plan-table { width: 100%; border-collapse: collapse; border: 1px solid #ebeef5; border-radius: 8px; overflow: hidden; }
.plan-table th { background: #f5f7fa; padding: 12px; text-align: left; font-weight: 600; color: #303133; }
.plan-table td { padding: 15px; border-bottom: 1px solid #ebeef5; line-height: 1.6; color: #606266; }
.plan-table tr:hover { background-color: #fafafa; }
.plan-table tr:last-child td { border-bottom: none; }

/* 底部区域 */
.card-footer, .ai-footer { margin-top: 30px; padding-top: 20px; border-top: 1px solid #f0f0f0; text-align: right; }

/* 图片选项卡容器 */
.ai-tab-images li { cursor: pointer; transition: all 0.3s ease; padding: 10px; }
.tab-img-wrapper { border: 3px solid transparent; border-radius: 12px; overflow: hidden; transition: all 0.3s ease; }
.ai-tab-images li.active-tab .tab-img-wrapper { border-color: #409eff; box-shadow: 0 8px 20px rgba(64, 158, 255, 0.3); transform: translateY(-5px); }
.ai-tab-images li:not(.active-tab) { opacity: 0.7; filter: grayscale(0.3); }
.ai-tab-images li:hover { opacity: 1; filter: grayscale(0); }

/* 占位卡片 */
.ai-placeholder-card { background: #fff; padding: 80px; border-radius: 12px; text-align: center; color: #909399; font-size: 16px; border: 1px dashed #dcdfe6; }

/* 按钮样式 */
.action-button { padding: 10px 24px; border-radius: 8px; border: none; font-weight: 500; cursor: pointer; transition: all 0.3s; font-size: 14px; }
.primary-button { background: #1890ff; color: white; }
.primary-button:hover { background: #40a9ff; box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3); }
.secondary-button { background: #fff; color: #606266; border: 1px solid #dcdfe6; }
.secondary-button:hover { border-color: #1890ff; color: #1890ff; }

/* 输入框提示 */
.input-tip { font-size: 12px; color: #f56c6c; margin-top: 5px; }

/* Element Upload 样式覆盖 */
.custom-file-item { width: 100%; height: 100%; position: relative; display: flex; align-items: center; justify-content: center; }
.file-page-badge { position: absolute; top: 5px; left: 5px; background: rgba(64, 158, 255, 0.9); color: #fff; padding: 2px 8px; border-radius: 4px; font-size: 12px; z-index: 10; line-height: 1.5; }
.order-controls { position: absolute; bottom: 5px; left: 0; right: 0; display: flex; justify-content: center; gap: 10px; z-index: 10; opacity: 0.8; }
.custom-file-item:hover .order-controls { opacity: 1; }
.el-upload-list__item-actions { background-color: rgba(0, 0, 0, 0.3) !important; }

/* =========================================
   响应式设计 (Mobile Optimization) - 终极整合版
   ========================================= */

@media (max-width: 1200px) {
    .ai-editor-container { flex-direction: column; min-height: auto; }
    .ai-sidebar { width: 100%; border-right: none; border-bottom: 1px solid #eef2f6; padding: 20px; }
    .sidebar-footer { margin-top: 20px; }
}

@media (max-width: 992px) {
    .dual-editor-layout { flex-direction: column; height: auto; }
    .edit-panel, .preview-panel { flex: none; min-height: 300px; }
}

/* ★★★ 手机端核心修改区域 ( < 768px ) ★★★ */
@media (max-width: 768px) {
    
    /* ========== 1. 侧边栏：仅保留两个生成模式，并排显示 ========== */
    .ai-sidebar {
        padding: 10px 15px;
        background: #fff;
        border-bottom: 1px solid #f0f0f0;
        display: block; /* 确保容器正常 */
    }

    /* 隐藏不需要的元素 */
    .step-indicator,
    .sidebar-header h3,
    .nav-group-title,
    .sidebar-footer,
    /* 隐藏第3、第4个 sidebar-item：即“基础配置”和“修改素材” */
    .ai-sidebar .sidebar-item:nth-of-type(3),
    .ai-sidebar .sidebar-item:nth-of-type(4) {
        display: none !important;
    }

    /* 关键：将 nav-group-title 设置为 inline，不影响布局 */
    .ai-sidebar .nav-group-title {
        display: inline-block;
        font-size: 11px;
        color: #666;
        margin-bottom: 5px;
        margin-right: 10px;
        vertical-align: top;
    }

    /* 仅对前两个 li 进行并排处理 */
    .ai-sidebar .sidebar-item:nth-of-type(1),
    .ai-sidebar .sidebar-item:nth-of-type(2) {
        display: inline-block;
        width: 42%;
        margin: 0 5px;
        padding: 10px 12px;
        font-size: 13px;
        background: #f5f7fa;
        border-radius: 6px;
        text-align: center;
        white-space: nowrap;
        cursor: pointer;
        box-sizing: border-box;
    }

    /* 第二个 item 不要右边距 */
    .ai-sidebar .sidebar-item:nth-of-type(2) {
        margin-right: 0;
    }

    /* 激活状态 */
    .ai-sidebar .sidebar-item.active {
        background: #e6f7ff;
        color: #1890ff;
    }

    /* ========== 2. 顶部三大功能入口 (AI教案/讲稿/总结) ========== */
    .ai-hub-nav-wrapper {
        margin-top: -20px;
        padding: 0 !important;
        box-shadow: none;
        background: transparent;
        margin-bottom: 15px;
    }
    .ai-hub-container {
        padding: 10px; 
        margin: 0 5px;
    }
    .ai-hub-tabs {
        flex-direction: row !important;
        gap: 8px;
    }
    .ai-hub-tab-item {
        flex: 1;
        height: 55px;
    }
    .ai-hub-image-box {
        height: 100%;
        border-radius: 8px;
        border: 1px solid #eee;
    }
    .ai-hub-image-box img {
        height: 100%;
        width: 100%;
        object-fit: cover;
        object-position: center 20%;
    }
    .ai-hub-tab-item.is-active { transform: none; }
    .ai-hub-tab-item.is-active .ai-hub-image-box { border-color: #409eff; border-width: 2px; }

    /* ========== 3. 主内容区域 ========== */
    .ai-editor-container {
        margin-top: 0;
        border-radius: 12px;
        background: transparent;
        box-shadow: none;
    }
    .ai-main-content {
        margin: 0 10px 20px 10px;
        padding: 20px 15px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.03);
    }
    .content-title {
        font-size: 1.1rem;
        margin-bottom: 15px;
        text-align: center;
    }

    /* ========== 4. 【核心修复】两个大选项卡 (直接输入/上传图片) 强制并排 ========== */
    .mode-selector-wrapper {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        padding: 15px 10px !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }
    .mode-box {
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 15px 5px !important;
        min-height: 100px !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
    }
    .mode-box i {
        font-size: 24px !important;
        margin-bottom: 5px !important;
    }
    .mode-box h4 {
        font-size: 13px !important;
        margin: 0 0 5px 0 !important;
        white-space: nowrap !important;
    }
    .mode-box p {
        font-size: 11px !important;
        line-height: 1.2 !important;
        color: #999;
        margin: 0;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* ========== 5. 其他微调 ========== */
    .ai-tab-header {
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 5px;
    }
    .tab-item {
        padding: 6px 15px;
        font-size: 12px;
        white-space: nowrap;
    }
    .plan-table {
        display: block;
        overflow-x: auto;
    }
    .result-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
}

/* 超小屏适配 */
@media (max-width: 480px) {
    .ai-hub-tab-item { height: 50px; }
    .ai-sidebar .sidebar-item:nth-of-type(1),
    .ai-sidebar .sidebar-item:nth-of-type(2) {
        font-size: 12px;
        padding: 8px 10px;
        min-width: 70px;
    }
}
/* ★★★ 手机端：调整 template-card 高度与内边距 ★★★ */
@media (max-width: 768px) {
    .template-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 12px;
    }

    .template-card {
        height: 110px; /* 关键：控制整体高度 */
        padding: 8px 6px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        border-radius: 8px;
        position: relative;
        box-sizing: border-box;
    }

    .template-card .tpl-icon {
        font-size: 20px !important;
        margin-bottom: 4px;
    }

    .template-card .tpl-name {
        font-size: 12px;
        font-weight: 500;
        margin: 0 0 3px 0;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    .template-card .tpl-desc {
        font-size: 10px;
        color: #999;
        line-height: 1.2;
        height: 24px; /* 固定高度，避免抖动 */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin: 0;
    }

    .template-card .check-mark {
        position: absolute;
        top: 4px;
        right: 4px;
        font-size: 14px;
        color: #409eff;
    }

    /* 激活状态样式（可选加强） */
    .template-card.active {
        background-color: #f0f9ff;
        border: 1px solid #d9ecff;
    }
}

/* 超小屏进一步压缩 */
@media (max-width: 480px) {
    .template-card {
        height: 100px;
        padding: 6px 4px;
    }
    .template-card .tpl-icon {
        font-size: 18px !important;
    }
    .template-card .tpl-name {
        font-size: 11px;
    }
    .template-card .tpl-desc {
        font-size: 9px;
        height: 20px;
    }
}
/* =========================================
   PC端显示修复：解决模板卡片遮挡下方文字的问题
   ========================================= */

/* 1. 模板网格容器：强制撑开高度并增加底部安全距离 */
.template-grid {
    display: flex;           /* 启用 Flex 布局，自动撑开高度 */
    flex-wrap: wrap;         /* 允许换行 */
    gap: 15px;               /* 卡片之间的间距 */
    width: 100%;
    
    /* 【核心修复】给网格容器底部增加 30px 的外边距 */
    /* 这会将下面的“补充说明”推下去，而不会影响上面的“选择生成模板” */

    
    /* 辅助修复：防止高度为0 */
    min-height: 10px;        
}

/* 2. 单个卡片样式加强：确保高度计算正确 */
.template-card {
    flex: 1;                 /* 自动填充宽度 */
    min-width: 200px;        /* PC端卡片最小宽度 */
    background: #ffffff;
    border: 1px solid #dcdfe6;
    border-radius: 8px;
    padding: 15px;
    cursor: pointer;
    position: relative;
    box-sizing: border-box;  /* 确保边框算在高度内 */
    transition: all 0.3s;
}

/* 3. 选中状态样式（你截图中蓝色的那个框） */
.template-card.active {
    border-color: #409eff;
    background-color: #ecf5ff;
    box-shadow: 0 0 0 1px rgba(64, 158, 255, 0.2); /* 优化阴影，不占空间 */
    z-index: 1; /* 确保选中时在最上层 */
}

/* 4. 移动端适配保持不变（防止影响你刚才说没问题的手机端） */
@media (max-width: 768px) {
    .template-grid {
        flex-direction: column; /* 手机端竖排 */
    }
    .template-card {
        width: 100%;
        min-width: unset;
    }
}