/* OurChat 编辑器暗色主题（modern）
   只覆盖编辑器 UI 变量；手机屏配色变量（--line-green / --line-bubble / --line-header /
   --line-footer / --line-sys）以及几何变量（--radius / --phone-w / --phone-h）刻意不覆盖，
   以保证预览、导出图、播放窗口始终为 LINE 亮色画布。

   本文件由 index.html 在 styles.css 之后引入（id="cssModern"），
   选择器 html[data-theme="modern"] 比 :root 多一个属性选择器、且加载更晚，故稳定胜出。
   切换逻辑见 app.js 的 applyTheme()：modern → 给 <html> 加 data-theme="modern"，
   classic（默认）→ 移除该属性。

   配色：深色分三层（底 --bg 最深，面板 --panel 稍亮，输入/浮层再用更亮一档的实色），
   正文 --text 与面板对比约 13:1，次要文字 --muted 约 6:1，均高于 4.5:1。 */
html[data-theme="modern"] {
  /* ---- 基础层 ---- */
  --bg: #14161A;          /* 应用底色（最深） */
  --panel: #1E2127;       /* 面板/浮层 */
  --line: #2E333B;        /* 分隔线与描边 */
  --text: #E7EAF0;        /* 正文：对面板 ≈ 13:1 */
  --muted: #9AA3AF;       /* 次要文字：对面板 ≈ 6:1 */
  --accent: #8179DE;      /* 主强调（白字实心按钮对比 3.67:1，≈ 经典主题的 3.76:1） */
  --accent-soft: #2A2740; /* 强调浅底（选中态） */
  --danger: #FF8A65;      /* 危险/删除：对面板 6.97:1 */

  /* ---- 品牌色（与 Logo 一致的蓝）---- */
  --brand: #5A8CE0;       /* 白字实心按钮对比 3.35:1，≥ 经典主题的 3.23:1 */
  --brand-dark: #8FB6F6;  /* 暗色下作前景文字用，需比 --brand 更亮 */
  --brand-soft: #1E2D45;

  /* ---- 语义色：主色提亮，浅底压暗（保持「同色系前景 + 深色底」的可读性）---- */
  --c-cyan: #4FC3D1;
  --c-cyan-soft: #123338;
  --c-green: #4FCB8A;
  --c-green-soft: #12332A;
  --c-orange: #F0A65C;
  --c-orange-soft: #35281A;
  --c-purple: #A88BE8;
  --c-purple-soft: #2A2445;
  --c-pink: #E08BE8;
  --c-pink-soft: #35223C;
  --c-red: #E4635E;
  --c-red-soft: #3A2424;
  --c-slate: #9AA6B4;
  --c-slate-soft: #262B33;
}

/* ============================================================
   暗色适配：styles.css 中写死为亮色的部件
   ------------------------------------------------------------
   这些部件在 styles.css 里直接写了 #FFFFFF / #FAFBFC / #EDEFF2 / rgba(255,…) 等，
   不走 CSS 变量，因此无法靠上面的变量覆盖解决，需按选择器逐条给出暗色版。
   范围严格限定在「编辑器 UI」——手机屏（.phone 及其内部）的任何规则都不在此列，
   故 styles.css 第 240/296/311 行的 #FFFFFF / #F5F5F5 / #F4F4F4（手机屏外壳、聊天底、
   假输入框）**刻意保持原样**，以保证画布始终为亮色。
   ============================================================ */

/* ---------- 表单控件 ---------- */
html[data-theme="modern"] input[type=text],
html[data-theme="modern"] input[type=number],
html[data-theme="modern"] select,
html[data-theme="modern"] textarea {
  background: #262A32;
  color: var(--text);
}
html[data-theme="modern"] input[type=text]:focus,
html[data-theme="modern"] input[type=number]:focus,
html[data-theme="modern"] select:focus,
html[data-theme="modern"] textarea:focus {
  border-color: var(--accent);
}

/* ---------- 按钮（.btn 默认白底） ---------- */
html[data-theme="modern"] .btn,
html[data-theme="modern"] .btn-mini,
html[data-theme="modern"] .char-upload,
html[data-theme="modern"] .char-del,
html[data-theme="modern"] .char-reset {
  background: #262A32;
  color: var(--text);
}
html[data-theme="modern"] .btn:hover,
html[data-theme="modern"] .char-upload:hover,
html[data-theme="modern"] .char-del:hover,
html[data-theme="modern"] .char-reset:hover {
  background: #2F343D;
}

/* ---------- 时间线条目 ---------- */
html[data-theme="modern"] .msg-item { background: #21242B; }
html[data-theme="modern"] .msg-item:hover { background: #2A2E37; }

/* ★ 时间线里的「台词」文本：styles.css 写死 color:#1F2328（浅色主题的正文色），
   在暗色面板上几乎不可见，必须显式改为 --text。 */
html[data-theme="modern"] .msg-item-text { color: var(--text); }

/* 多选态：styles.css 是浅蓝底 #E6F1FB，暗色下压成深蓝 */
html[data-theme="modern"] .msg-item.multi-on { background: #1E2D45; }

/* 拖拽手柄的硬编码浅灰在暗色下偏亮，压到 --muted */
html[data-theme="modern"] .drag-handle { color: #6B7280; }
html[data-theme="modern"] .msg-item:hover .drag-handle { color: var(--muted); }

/* ---------- 预览舞台 / 浮动控件 / 拖拽删除区 ---------- */
html[data-theme="modern"] .preview-stage { background: #0E1013; }
html[data-theme="modern"] .float-ctl { background: rgba(30, 33, 39, .94); }
html[data-theme="modern"] .trash-zone { background: #21242B; }
html[data-theme="modern"] .trash-zone.drag-over { background: #3A2424; }

/* ---------- 群聊角色悬浮窗（预览区左上，与 .float-ctl 同一层）----------
   漏网原因：.member-float 是后加的，styles.css 里写死了 rgba(255,255,255,.94) 不走变量，
   而这个文件里只覆盖了同层的 .float-ctl / .trash-zone，把它忘了。
   实测（_cdp_theme_mf.js）：暗色下容器仍是亮底 rgb(241,241,241)，而 --text/--muted
   已变成亮色 rgb(231,234,240)/rgb(154,163,175) → 文字对比度 1.06:1，几乎看不见，
   悬浮窗内 33 个元素里 30 个不合格。
   ★ 只修「底色 + 两处硬编码亮色」即可：其余子元素都走 var(--text)/--muted/--line，
     容器一变暗就自动达标 —— 覆盖率不能靠肉眼扫，要靠逐元素算对比度。 */
html[data-theme="modern"] .member-float { background: rgba(30, 33, 39, .94); }
/* .mf-btn 原本用 var(--panel)，暗色下与悬浮窗底色同值会糊成一片；
   按本文件「输入/浮层再用更亮一档的实色」的约定提到 #262A32。 */
html[data-theme="modern"] .mf-btn { background: #262A32; }
/* .mf-item:hover 原本用 var(--bg)（暗色下比面板更深），改成与其他列表一致的 #2A2E37。 */
html[data-theme="modern"] .mf-item:hover { background: #2A2E37; }

/* ---------- 角色列表 ---------- */
html[data-theme="modern"] .char-item:hover { background: #2A2E37; }
html[data-theme="modern"] .char-item.is-member { background: #2A2740; }

/* ---------- 弹窗 ---------- */
html[data-theme="modern"] .modal-card { background: #1E2127; }

/* ---------- 消息类型标签：保留色相，压暗底色、提亮文字 ---------- */
html[data-theme="modern"] .tag { background: #2A2E37; }
html[data-theme="modern"] .tag-join { background: #12332A; color: #4FCB8A; }
html[data-theme="modern"] .tag-leave { background: #3A2424; color: #FF8A65; }
html[data-theme="modern"] .tag-image { background: #1E2D45; color: #8FB6F6; }
html[data-theme="modern"] .tag-pat { background: #2A2740; color: #A88BE8; }

/* ---------- 贴图面板 / 角色选择 / 对话列表（打开后才出现的隐藏部件） ---------- */
html[data-theme="modern"] .stamp-item,
html[data-theme="modern"] .person-item {
  background: transparent;
  color: var(--text);
}
html[data-theme="modern"] .stamp-item:hover,
html[data-theme="modern"] .person-item:hover { background: #2A2E37; }
html[data-theme="modern"] .stamp-item.is-active,
html[data-theme="modern"] .person-item.is-active { background: var(--accent-soft); }

/* ---------- 分段控件（.seg button 写死白底）----------
   其 :hover / .is-active 用的是 var(--brand-soft) / var(--brand)，上面已覆盖变量，自动适配。 */
html[data-theme="modern"] .seg button { background: #262A32; color: var(--text); }

/* ---------- 顶栏分组框与圆形主题按钮（v1.4 新增）----------
   .tb-box 写死了 #FAFBFC（普通组）与 #F3F7FD + #CBD8EE（导出组，淡蓝），
   .btn-icon-round 写死白底 —— 都不走变量，必须逐条覆盖。
   .tb-box-label 原本用 var(--brand)（对深底约 3.4:1，偏紧），
   这里改用本文件专为「暗色下当前景文字」准备的 --brand-dark。 */
html[data-theme="modern"] .tb-box { background: #21242B; }
html[data-theme="modern"] .tb-box-export { border-color: #33415C; background: #1B2430; }
html[data-theme="modern"] .tb-box-label { color: var(--brand-dark); }
html[data-theme="modern"] .btn-icon-round { background: #262A32; color: var(--text); }
html[data-theme="modern"] .btn-icon-round:hover {
  background: var(--brand-soft); border-color: var(--brand-dark); color: var(--brand-dark);
}

/* ---------- 弹窗操作区的次要按钮（无类名，走浏览器原生按钮样式）----------
   用 :not(.btn-primary) 排除主色按钮，避免误伤「创建 / 确认」类按钮。 */
html[data-theme="modern"] .modal-actions button:not(.btn-primary) {
  background: #262A32;
  color: var(--text);
  border: 1px solid var(--line);
}
html[data-theme="modern"] .modal-actions button:not(.btn-primary):hover { background: #2F343D; }

/* ---------- 角色小徽章 ---------- */
html[data-theme="modern"] .chip { background: #262A32; color: var(--text); }

/* ---------- 危险按钮的描边（前景色已走 var(--danger)，此处只压暗写死的粉色描边） ---------- */
html[data-theme="modern"] .btn-danger { border-color: #5A322B; }

/* ---------- 角色选择器内的无头像占位 ----------
   注意：app.js（openPersonPicker）对「无头像」用的是**行内样式** `background:#C9CED6`，
   行内样式优先级最高，普通选择器无法覆盖，这里必须用 !important（这正是它的正当用途）。
   作用域限定在 .person-item 内：手机屏里的同名元素是无头像角色的消息头像，属画布内容，须保持原样。 */
html[data-theme="modern"] .person-item .avatar-placeholder {
  background: #3A4048 !important;
  color: #E7EAF0 !important;
}

/* ============================================================
   ID 级按钮（styles.css 的 #btn* 规则）
   ------------------------------------------------------------
   这些规则写在 styles.css 里、用 ID 选择器（特异性 1,0,0），
   高于上面 `.btn` 那条（0,2,1），所以必须在暗色文件里用
   「html[data-theme="modern"] + ID」这种更高特异性的写法才能覆盖。
   注：其中多数按钮的背景已走 var(--c-*-soft) 等变量（上面的变量覆盖已处理），
   这里只需处理**硬编码**的亮色：白色底、浅色描边、以及 hover 时的浅色底。
   ============================================================ */

/* 硬编码白底（全量按钮里唯一一处） */
html[data-theme="modern"] #btnSelectNone { background: #262A32; border-color: var(--line); }

/* 硬编码的浅色描边 → 统一压暗到分隔线色 */
html[data-theme="modern"] #btnExportSelected,
html[data-theme="modern"] #btnPlay,
html[data-theme="modern"] #btnNewConv,
html[data-theme="modern"] #btnRenameConv,
html[data-theme="modern"] #btnDelConv,
html[data-theme="modern"] #btnMultiExport,
html[data-theme="modern"] #btnMultiDel,
html[data-theme="modern"] #btnSelectAll,
html[data-theme="modern"] #btnSelectNone { border-color: var(--line); }

/* hover 态在 styles.css 里是硬编码浅色（#D6EFF3 / #D3EDE0 / #FAE6CE / #F9DFDE） */
html[data-theme="modern"] #btnExportSelected:hover,
html[data-theme="modern"] #btnPlay:hover,
html[data-theme="modern"] #btnPlay.is-playing:hover,
html[data-theme="modern"] #btnDelConv:hover { background: #2F343D; }

/* ---------- 图标按钮与角色选择按钮（同样写死了浅色） ---------- */
html[data-theme="modern"] .btn-icon:hover { background: #2F343D; }
html[data-theme="modern"] .person-select { background: #262A32; color: var(--text); }

/* ---------- 录制中按钮（与 #btnPlay.is-playing 同一套橙色警示配色，含硬编码亮色） ---------- */
html[data-theme="modern"] #btnExportVideo.is-playing { border-color: #6B4A22; }
html[data-theme="modern"] #btnExportVideo.is-playing:hover { background: #3A2A18; }

/* ---------- 导出视频按钮的 hover（styles.css 里是硬编码深紫，暗色下应变亮而非变暗） ---------- */
html[data-theme="modern"] #btnExportVideo:hover { background: #938BEA; border-color: #938BEA; }

/* ---------- 快速输入按钮 hover（styles.css 里是硬编码深紫，暗色下应变亮） ---------- */
html[data-theme="modern"] #btnScript:hover { background: #938BEA; border-color: #938BEA; }

/* ---------- 属性面板类型按钮：暗色下的 hover 应变亮（styles.css 里是硬编码深紫） ---------- */
/* ---------- 属性面板类型按钮：暗色下未选中改用「深底 + 亮色文字」，选中仍为实心 + 光晕 ---------- */
html[data-theme="modern"] .type-btn[data-type="text"]    { background: #1B2436; border-color: #2C4A7A; color: #8FB8F5; }
html[data-theme="modern"] .type-btn[data-type="image"]   { background: #16292F; border-color: #26505C; color: #6FC7DC; }
html[data-theme="modern"] .type-btn[data-type="sticker"] { background: #221F3A; border-color: #443F73; color: #A9A2F0; }
html[data-theme="modern"] .type-btn[data-type="pat"]     { background: #2B2317; border-color: #5A4520; color: #E0A94A; }
html[data-theme="modern"] .type-btn[data-type="join"]    { background: #16281E; border-color: #275B3C; color: #6FC79A; }
html[data-theme="modern"] .type-btn[data-type="leave"]   { background: #2B1D18; border-color: #6B3A28; color: #E88B6B; }
/* 选中态：暗色下把实心色略作提亮，保证与深色背景的对比 */
html[data-theme="modern"] .type-btn[data-type="text"].is-on    { background: #5B8DEF; border-color: #5B8DEF; color: #FFFFFF; }
html[data-theme="modern"] .type-btn[data-type="image"].is-on   { background: #3FA9C2; border-color: #3FA9C2; color: #FFFFFF; }
html[data-theme="modern"] .type-btn[data-type="sticker"].is-on { background: #8A82E4; border-color: #8A82E4; color: #FFFFFF; }
html[data-theme="modern"] .type-btn[data-type="pat"].is-on     { background: #DE9A38; border-color: #DE9A38; color: #2B2317; }
html[data-theme="modern"] .type-btn[data-type="join"].is-on    { background: #43AE75; border-color: #43AE75; color: #FFFFFF; }
html[data-theme="modern"] .type-btn[data-type="leave"].is-on   { background: #D9633C; border-color: #D9633C; color: #FFFFFF; }
html[data-theme="modern"] #btnNewMsg:hover { background: #7BA4F5; border-color: #7BA4F5; }