/*
- 开发时间：2026-07-23
- 更新时间：2026-07-23
- 文件作用：cloudPrompt 提示词首页（index.html）专属样式，从 style.css 拆分（style.css 满 500 行 P0 上限，
            模仿 worklist.css→worklist_mobile.css 拆分先例），style.css 保留全页面共享样式
- 实现原理：根目录编辑栏、编辑器、主容器与布局切换、页签、按钮组、返回顶部、
            编辑公共模板页签（下拉+内容编辑框+撤回按钮）、输入页公共模块多选区域（分组快捷按钮+全选+折叠）、
            增加公共模块/类型管理页签（创建表单+列表含重命名删除）、分组按钮区等仅首页使用的样式；
            美术设计修正：页签按钮与按钮组按钮统一 13px 字号（原浏览器默认 16px 与周边 12px 不协调）+
            各操作按钮补充 transition 平滑 hover 变色
- 如何调用：由 index.html 通过 <link rel="stylesheet" href="style_index.css"> 引入（在 style.css 之后）
- 所属流程：cloudPrompt 前端展示流程
*/

/* 根目录编辑栏：纵向排列，第一行编辑区 + 第二行平台单选项 */
.root-dir-bar {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 10px;
}
/* 根目录编辑区：key 标签 + value 输入框 + 操作按钮 */
.root-dir-editor {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 1;
    min-width: 300px;
}
/* 根目录 key 输入框：只读标签，固定宽度 */
.root-dir-editor #root-key {
    width: 60px;
    text-align: center;
    background-color: #e0e0e0;
    font-weight: bold;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 8px;
    box-sizing: border-box;
    font-size: 12px;
}
/* 根目录 value 输入框：撑满剩余空间 */
.root-dir-editor #root-value {
    flex: 1;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 12px;
    box-sizing: border-box;
}
/* 根目录操作按钮（transition 平滑 hover 变色） */
.root-dir-editor button {
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #fff;
    cursor: pointer;
    font-size: 12px;
    white-space: nowrap;
    transition: background-color 0.15s, color 0.15s;
}
/* 根目录操作按钮悬停样式 */
.root-dir-editor button:hover {
    background-color: #e0e0e0;
}
/* 根目录平台单选项组 */
.root-dir-radios {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
/* 单选项 label 样式 */
.root-dir-radios label {
    cursor: pointer;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 3px;
}

/* 编辑器通用样式：宽度撑满、最小高度300px、禁止调整大小和滚动、默认隐藏 */
.editor {
    width: 100%; min-height: 300px; padding: 10px;
    box-sizing: border-box; border: 1px solid #ccc; border-radius: 5px;
    font-size: 12px; resize: none; overflow: hidden;
    color: #333; display: none;
}
/* 当前激活的编辑器显示为块级元素 */
.editor.active {
    display: block;
}
/* 个性模板编辑框：显式禁止内部滚动和手动调整大小，依赖 autoResize 跟随内容撑高完全展示 */
#template { overflow: hidden; resize: none; }
/* 输出区域专属样式：保留空白换行 */
#output {
    white-space: pre-wrap; word-wrap: break-word; font-family: inherit;
    margin: 0; background-color: #fff; padding: 10px; box-sizing: border-box;
}
/* 高亮填充内容样式 */
.highlight {
    background-color: #fff3cd; /* 高亮背景色 */
    padding: 2px 4px;
    border-radius: 3px;
}
/* 主容器：水平排列 */
.container {
    display: flex;
    flex: 1;
    gap: 10px;
}
/* 布局切换：左布局时反转容器顺序（按钮栏在左、编辑区在右） */
.container.layout-left {
    flex-direction: row-reverse;
}
/* 左侧容器：竖直排列 */
#left {
    flex-direction: column;
}
/* 页签面板 */
.tab-panel {
    flex: 1;
}
/* 按钮组：竖直排列 */
.btn-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
/* 按钮基础样式（美术修正：13px 字号与周边 UI 统一，原浏览器默认 16px；transition 平滑 hover） */
.btn-group button {
    padding: 10px 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #fff;
    cursor: pointer;
    min-width: 100px;
    font-size: 13px;
    transition: background-color 0.15s, color 0.15s;
}
/* 按钮悬停样式 */
.btn-group button:hover {
    background-color: #e0e0e0;
}
/* 页签条 */
.tabs {
    display: flex;
    gap: 0; /* 页签按钮之间无间距 */
}
/* 页签按钮（美术修正：13px 字号，原浏览器默认 16px 与 12px 内容区不协调） */
.tab-btn {
    padding: 10px 20px;
    border: 1px solid #ccc;
    border-bottom: none;
    background-color: #e0e0e0;
    cursor: pointer;
    border-radius: 5px 5px 0 0;
    font-size: 13px;
}
/* 当前激活的页签按钮 */
.tab-btn.active {
    background-color: #fff;
    border-bottom: 1px solid #fff;
}
/* 返回顶部按钮容器：位于编辑框正下方，宽度撑满 */
.back-to-top-bar {
    margin-top: 10px;
}
/* 返回顶部按钮：宽度撑满，与 .btn-group button 风格保持一致（transition 平滑 hover） */
.back-to-top-bar button {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #fff;
    cursor: pointer;
    font-size: 12px;
    box-sizing: border-box;
    transition: background-color 0.15s, color 0.15s;
}
/* 返回顶部按钮悬停样式 */
.back-to-top-bar button:hover {
    background-color: #e0e0e0;
}

/* ============================================================
   编辑公共模板页签样式：工具栏 + 内容编辑框
   ============================================================ */

/* 模块面板：覆盖 .editor 的 display:block，改为 flex 垂直布局（不限制高度，内容完全展示） */
.editor.module-panel.active {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
/* 模块工具栏：水平排列分类下拉和操作按钮 */
.module-toolbar {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
}
/* 工具栏下拉框和按钮统一样式（transition 平滑 hover） */
.module-toolbar select,
.module-toolbar button {
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    cursor: pointer;
    font-size: 12px;
    transition: background-color 0.15s, color 0.15s;
}
.module-toolbar button:hover {
    background-color: #e0e0e0;
}
/* 撤回按钮：橙色边框警示风格（区别于普通按钮，提示破坏性操作） */
.module-toolbar button.btn-undo-module {
    border-color: #f57c00;
    color: #f57c00;
}
.module-toolbar button.btn-undo-module:hover {
    background-color: #f57c00;
    color: #fff;
}
/* 模块内容 textarea：高度由 autoResize 跟随内容撑高，禁止内部滚动和手动调整大小 */
#module-content-textarea {
    min-height: 300px;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 12px;
    box-sizing: border-box;
    font-family: inherit;
    resize: none;
    overflow: hidden;
}

/* ============================================================
   输入页公共模块多选区域样式
   ============================================================ */

/* 公共模块多选区域容器：仅输入页签显示 */
.common-modules-bar {
    padding: 8px 10px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background-color: #fafafa;
    margin-bottom: 8px;
    font-size: 12px;
}
/* 标签文本：加粗 */
.common-modules-label {
    font-weight: bold;
    color: #1a237e;
    display: block;
    margin-bottom: 6px;
}
/* checkbox 容器：flex 换行 */
.common-modules-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    align-items: center;
}
/* 单个 checkbox 项：可点击 */
.common-module-item {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    border-radius: 3px;
    border: 1px solid transparent;
}
.common-module-item:hover {
    background-color: #fff8e1;
    border-color: #ffe082;
}
.common-module-item input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
}
.common-module-item span {
    font-size: 12px;
}

/* ============================================================
   增加公共模块页签样式：创建表单 + 模块列表（含删除）
   ============================================================ */

/* 增删面板：覆盖 .editor 的 display:block，改为 flex 垂直布局 */
.editor.module-manage-panel.active,
.editor.type-manage-panel.active {
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow: auto;
    max-height: 80vh;
}
/* 创建表单区域 */
.module-create-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background-color: #fafafa;
}
/* 区域标题 */
.module-section-header {
    font-weight: bold;
    color: #1a237e;
    font-size: 13px;
    border-bottom: 1px solid #eee;
    padding-bottom: 6px;
}
/* 模块名称输入框 */
.module-name-input {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 12px;
    box-sizing: border-box;
    font-family: inherit;
}
/* 模块内容输入框 */
.module-content-input {
    min-height: 150px;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 12px;
    box-sizing: border-box;
    font-family: inherit;
    resize: vertical;
}
/* 创建按钮（transition 平滑 hover） */
.btn-create-module {
    align-self: flex-start;
    padding: 8px 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    cursor: pointer;
    font-size: 12px;
    transition: background-color 0.15s, color 0.15s;
}
.btn-create-module:hover {
    background-color: #e0e0e0;
}
/* 模块列表区域 */
.module-list-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background-color: #fafafa;
}
/* 模块列表容器 */
.module-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
/* 模块列表项：水平排列，信息 + 按钮组（重命名+删除） */
.module-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fff;
}
/* 模块信息文本 */
.module-list-info {
    font-size: 12px;
    color: #333;
}
/* 模块按钮容器：水平排列重命名和删除按钮 */
.module-list-btns {
    display: flex;
    gap: 6px;
}
/* 重命名按钮：蓝色边框风格 */
.btn-rename-module {
    padding: 4px 12px;
    border: 1px solid #1976d2;
    border-radius: 4px;
    background-color: #fff;
    color: #1976d2;
    cursor: pointer;
    font-size: 12px;
    white-space: nowrap;
}
.btn-rename-module:hover {
    background-color: #1976d2;
    color: #fff;
}
/* 删除按钮 */
.btn-delete-module {
    padding: 4px 12px;
    border: 1px solid #dc3545;
    border-radius: 4px;
    background-color: #fff;
    color: #dc3545;
    cursor: pointer;
    font-size: 12px;
    white-space: nowrap;
}
.btn-delete-module:hover {
    background-color: #dc3545;
    color: #fff;
}
/* 空列表提示 */
.module-list-empty {
    color: #999;
    font-size: 12px;
    text-align: center;
    padding: 16px;
}

/* ============================================================
   输入页公共模块分组区域样式：分组按钮 + 全选 + 编辑模式 + 折叠
   ============================================================ */

/* 头部：标签 + 操作按钮水平排列（transition 平滑 hover） */
.common-modules-header { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.common-modules-header .common-modules-label { margin-bottom: 0; }
.common-modules-header button { padding: 3px 10px; border: 1px solid #ccc; border-radius: 3px; background: #fff; cursor: pointer; font-size: 12px; transition: background-color 0.15s, color 0.15s; }
.common-modules-header button:hover { background-color: #e0e0e0; }
/* 分组快捷按钮区 */
.group-buttons { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.group-buttons:empty { display: none; }
/* 分组按钮：蓝色边框风格，hover/active 高亮 */
.group-btn { position: relative; padding: 4px 12px; border: 1px solid #1976d2; border-radius: 4px; background: #fff; color: #1976d2; cursor: pointer; font-size: 12px; }
.group-btn:hover, .group-btn.active { background: #1976d2; color: #fff; }
/* 编辑模式叉标：右上角红色圆形删除按钮，仅 edit-mode 时显示 */
.group-btn-delete { position: absolute; top: -6px; right: -6px; width: 16px; height: 16px; border-radius: 50%; background: #dc3545; color: #fff; border: none; font-size: 10px; line-height: 16px; text-align: center; cursor: pointer; display: none; padding: 0; }
.group-buttons.edit-mode .group-btn-delete { display: block; }
/* 折叠切换条 + 折叠状态隐藏 checkbox 列表 */
.common-modules-toggle { cursor: pointer; color: #666; font-size: 12px; margin-bottom: 4px; user-select: none; }
.common-modules-toggle:hover { color: #1976d2; }
.common-modules-bar.collapsed .common-modules-checkboxes { display: none; }
/* 输出类型下拉（btn-group 内，与按钮风格一致，transition 平滑 hover） */
.btn-group select { padding: 10px 15px; border: 1px solid #ccc; border-radius: 5px; background-color: #fff; cursor: pointer; min-width: 100px; font-size: 12px; transition: background-color 0.15s, color 0.15s; }