:root {
  --bg: #F2F3F5;
  --panel: #FFFFFF;
  --line: #E3E5E8;
  --text: #1F2328;
  --muted: #5F6670;
  --accent: #7F77DD;
  --accent-soft: #EEEDFE;
  --danger: #D85A30;
  --radius: 8px;

  /* 品牌色（与 Logo 一致）与语义色 */
  --brand: #5B8DEF;
  --brand-dark: #4A7BD6;
  --brand-soft: #E8F0FE;
  --c-cyan: #2FA9B8;
  --c-cyan-soft: #E4F6F8;
  --c-green: #2FA36B;
  --c-green-soft: #E4F5EC;
  --c-orange: #E08A3C;
  --c-orange-soft: #FDF1E3;
  --c-purple: #8A6BD8;
  --c-purple-soft: #F0EBFB;
  --c-pink: #C86BD8;
  --c-pink-soft: #F8EAFB;
  --c-red: #D9534F;
  --c-red-soft: #FCECEB;
  --c-slate: #6B7480;
  --c-slate-soft: #EEF1F4;

  --phone-w: 750px;
  --phone-h: 1624px;

  --line-green: #8DE055;
  --line-bubble: #FFFFFF;
  --line-header: #FFFFFF;
  --line-footer: #FFFFFF;
  --line-sys: #8E8E93;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; height: 100%; }

body {
  font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Noto Sans CJK SC", sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- 图标 ---------- */
.ico { display: inline-flex; align-items: center; justify-content: center; }
.ico svg { width: 16px; height: 16px; display: block; }
.btn .ico svg { width: 14px; height: 14px; margin-right: 4px; }
.btn-mini .ico svg { width: 12px; height: 12px; margin-right: 3px; }
[data-icon] { display: inline-flex; align-items: center; }
[data-icon] svg { width: 16px; height: 16px; }

/* ---------- 顶栏 ---------- */
.topbar {
  flex: 0 0 auto;
  min-height: 50px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  row-gap: 6px;
  padding: 6px 12px;
}

.brand { font-size: 15px; font-weight: 600; white-space: nowrap; display: flex; align-items: center; gap: 8px; }
.brand-icon { width: 26px; height: 26px; flex: 0 0 26px; display: block; }

.tool-group { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.tool-group > label { font-size: 12px; color: var(--muted); }

/* 顶栏右侧操作区。
   ★ 必须自带 flex-wrap + min-width:0 + max-width:100%：
   它是一整排约 1100px 的按钮，本身不换行时，min-width:auto 会让它的
   「最小宽度」就等于内容宽，父级 .topbar 换行也救不了它 —— 它会被整块丢到
   独立一行，然后向右溢出，右端按钮被推出视口。
   实测（_cdp_topwrap.js）：只用「≤560px 才补 flex-wrap」时，
   1100px ~ 561px 整段整页横向溢出 21→560px，右端按钮全部看不见，
   要一直缩到 ≤560 才恢复。
   写进基础规则后，任何宽度下它都会「先在自己内部换行」，不再有裸露区间；
   ≤560px 与 .is-narrow 两处仍然只负责「缩小尺寸 + 独占整行」。 */
.topbar-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  row-gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
  max-width: 100%;
}

/* ---------- 顶栏分组框（v1.4）----------
   把语义相关的控件框成一个区域，靠「分组」而不是「分隔竖线」来区分：
   导出是一组（清晰度 + 三种导出）、播放是一组（播放 + 节奏参数）、
   工具是一组（主题 + 使用说明）。这样每一组内部才有边框，整条顶栏不再是一长串
   平铺按钮 —— 找东西靠区块，不靠读文字。
   注：原 .divider（装饰竖线）随分组框上线后已无任何引用，规则一并删除（同 §14.2 的做法）。 */
.tb-box {
  display: flex; align-items: center; gap: 6px;
  /* ★ 与 .topbar-actions 同理（见 §17）：不换行的 flex 容器，min-width:auto 会
     等于内容宽，「导出」框本身就有约 400px，在 ≤390px 视口下比屏幕还宽 → 整页横向溢出。
     所以框内部也要能换行。实测：不加这两条时 390/360/320px 整页溢出、导出区被裁掉 22px。 */
  flex-wrap: wrap; row-gap: 6px; min-width: 0;
  padding: 3px 6px;
  border: 1px solid var(--line); border-radius: 10px;
  background: #FAFBFC;
}
.tb-box > label { font-size: 12px; color: var(--muted); }
/* 导出区：主按钮（导出屏幕）最显眼，其次是导出视频，导出所选最弱 —— 按使用频率排优先级 */
.tb-box-export { border-color: #CBD8EE; background: #F3F7FD; }
.tb-box-label {
  font-size: 11px; font-weight: 600; letter-spacing: .5px;
  color: var(--brand); padding: 0 2px 0 4px;
}
/* 工具区推到最右，且不参与「被挤扁」：图标按钮与说明都保持原尺寸 */
.tb-box-tool { margin-left: auto; }

/* 圆形图标按钮（主题切换）：只有一个图标，做成正圆更好认、也更像「开关」 */
.btn-icon-round {
  flex: 0 0 auto;
  width: 30px; height: 30px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 50%;
  background: #FFFFFF; color: var(--text);
  cursor: pointer; font-family: inherit;
  transition: background .15s, color .15s, border-color .15s, transform .15s;
}
.btn-icon-round svg { width: 16px; height: 16px; }
.btn-icon-round:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.btn-icon-round:active { transform: scale(.94); }
.btn-icon-round:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

.spacer { flex: 1 1 auto; }

.unit { font-size: 12px; color: var(--muted); }
.topbar-actions input[type=number] {
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px 6px;
  outline: none;
  width: 56px;
  text-align: center;
}
.topbar-actions input[type=number]:focus { border-color: var(--accent); }

/* ---------- 控件 ---------- */
input[type=text], select, textarea {
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px 8px;
  outline: none;
}
input[type=text]:focus, select:focus, textarea:focus { border-color: var(--accent); }
textarea { resize: vertical; width: 100%; line-height: 1.6; }

input[type=color] {
  width: 26px; height: 26px; padding: 0;
  border: 1px solid var(--line); border-radius: 6px;
  background: none; cursor: pointer;
}

.btn {
  font-family: inherit; font-size: 13px; color: var(--text);
  background: #FFFFFF; border: 1px solid var(--line); border-radius: 6px;
  padding: 6px 10px; cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; line-height: 1.2;
}
.btn:hover { border-color: #C9CDD3; background: #FAFBFC; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #FFFFFF; }
.btn-primary:hover { background: #6E66D0; border-color: #6E66D0; color: #FFFFFF; }
.btn-ghost { color: var(--muted); }
.btn-mini { padding: 4px 7px; font-size: 12px; }
.btn-danger { color: var(--danger); border-color: #F0D6CC; }
.btn-danger:hover { background: #FDF3F0; border-color: var(--danger); }
.btn-icon { padding: 4px; border: none; background: none; color: var(--muted); }
.btn-icon:hover { background: #EDEFF2; color: var(--text); border: none; }

.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
/* （原 .seg-btn 死规则已删除：HTML 实际用 <div class="seg"><button>，正确选择器为 .seg button） */
.chk { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); cursor: pointer; user-select: none; }
.chk input { cursor: pointer; margin: 0; }

/* ---------- 工作区 ---------- */
.workspace {
  flex: 1 1 auto; min-height: 0;
  display: grid;
  grid-template-columns: 300px minmax(360px, 1fr) 280px;
  gap: 10px; padding: 10px;
}

.panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  display: flex; flex-direction: column; min-height: 0; overflow: hidden;
}

.panel-head {
  flex: 0 0 auto; padding: 7px 10px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
}
.panel-head-sub { border-top: 1px solid var(--line); }
.panel-head h2 { margin: 0; font-size: 13px; font-weight: 500; }
.add-row { display: flex; gap: 4px; flex-wrap: wrap; }

.panel-foot {
  flex: 0 0 auto; padding: 8px 12px; border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 6px;
}

.hint { font-size: 12px; color: var(--muted); }
.hint-block { padding: 8px 12px 12px; margin: 0; line-height: 1.6; }
.empty { color: var(--muted); font-size: 12px; padding: 16px 12px; margin: 0; }
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px 12px; gap: 8px; text-align: center; }
.empty-state .empty { padding: 0; }

/* ---------- 时间线 ---------- */
.timeline { flex: 1 1 auto; overflow-y: auto; padding: 10px 14px; }

.msg-item {
  display: flex; align-items: flex-start; gap: 5px;
  padding: 5px 7px; border: 1px solid transparent; border-radius: 6px;
  cursor: pointer; margin: 0 8px 4px; background: #FAFBFC;
  transition: background .12s, border-color .12s;
}
.msg-item:hover { border-color: var(--line); background: #FFFFFF; }
.msg-item.selected { border-color: var(--accent); background: var(--accent-soft); }
.msg-item.dragging { opacity: .45; }
.msg-item.drop-before { box-shadow: inset 0 3px 0 var(--accent); }
.msg-item.drop-after { box-shadow: inset 0 -3px 0 var(--accent); }

.drag-handle {
  flex: 0 0 auto; color: #C4C8CE; cursor: grab;
  display: flex; align-items: center; padding-top: 2px;
}
.drag-handle svg { width: 14px; height: 14px; }
.msg-item:hover .drag-handle { color: var(--muted); }
.drag-handle:active { cursor: grabbing; }

.msg-item input[type=checkbox] { margin-top: 3px; cursor: pointer; flex: 0 0 auto; }
.msg-item-body { flex: 1 1 auto; min-width: 0; }

.msg-item-top {
  display: flex; align-items: center; gap: 6px; margin-bottom: 3px;
}
.dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.msg-item-name { font-size: 12px; font-weight: 500; }
.msg-item-time { font-size: 12px; color: var(--muted); margin-left: auto; }

.msg-item-text {
  font-size: 13px; color: #1F2328; line-height: 1.45; word-break: break-word;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.msg-item-thumb { margin-top: 4px; max-width: 100%; max-height: 56px; border-radius: 4px; display: block; }

.tag { font-size: 11px; padding: 1px 6px; border-radius: 4px; background: #EEF0F2; color: var(--muted); }
.tag-join { background: #E1F5EE; color: #0F6E56; }
.tag-leave { background: #FCEBEB; color: #A32D2D; }
.tag-image { background: #E6F1FB; color: #185FA5; }
.tag-pat { background: #EEEDFE; color: #534AB7; }

.msg-item-ops { flex: 0 0 auto; display: flex; flex-direction: column; gap: 1px; }

/* ---------- 预览 ---------- */
.preview-stage {
  position: relative;
  flex: 1 1 auto; overflow: auto;
  display: flex; justify-content: center; align-items: flex-start;
  padding: 16px; background: #EDEFF2;
}

.float-ctl { background: rgba(255,255,255,.94); border: 1px solid var(--line); border-radius: 10px; padding: 5px 9px; box-shadow: 0 2px 8px rgba(0,0,0,.10); }
.float-ctl .chk { font-size: 12px; }
/* 窄栏里让「显示时间 / 名字 / 人数」自然折行，而不是撑破浮层 */
.float-ctl { display: flex; flex-wrap: wrap; gap: 2px 10px; }

/* ---------- 预览区左侧浮层栏（v1.4）----------
   原先 .float-ctl（top:10px）与 .member-float（top:52px、固定 168px 宽）各自绝对定位，
   在预览栏偏窄时会压住手机内容：3 栏布局的 1000~1400px 区间、以及 ≤560px 手机宽度下都会命中。
   现在两者统一收进这一栏，宽度由脚本按「手机左缘到预览区左缘的实测空隙」设置
   （--pv-rail-w，见 app.js 的 syncPreviewFit）—— 手机永远水平居中，
   所以「贴左边缘 + 按空隙限宽」在任何屏幕比例下都不会压到它。 */
.pv-left {
  position: absolute; left: 12px; top: 10px; bottom: 10px; z-index: 6;
  width: var(--pv-rail-w, 176px);
  display: flex; flex-direction: column; align-items: stretch; gap: 8px;
  /* 整栏不吃鼠标事件，只有栏内浮层可点：否则这条贯穿上下的空栏会挡住手机边缘的点击 */
  pointer-events: none;
}
.pv-left > * { pointer-events: auto; }

/* ---------- 空隙不足时改纵向排布（手机让到下面）----------
   手机居中且两侧没有余量时，浮层再怎么缩也会压住它，只能改成上下排。
   触发由脚本实测决定（不写死媒体查询阈值，避免又一个会失效的魔数）。 */
.preview-stage.pv-tight { flex-direction: column; align-items: center; justify-content: flex-start; }
.preview-stage.pv-tight .pv-left {
  position: static; left: auto; top: auto; bottom: auto;
  width: 100%; max-width: 460px; margin: 0 0 10px; gap: 6px;
}
.preview-stage.pv-tight .float-ctl { margin: 0; }
.preview-stage.pv-tight .member-float { max-height: 26vh; }
/* 舞台改成纵向 flex 后，.phone 的 flex-basis 会作用在「高度」上，必须显式复位，
   否则手机会被压扁（这个坑 ≤560px 的规则里已经踩过一次）。 */
.preview-stage.pv-tight .phone { flex: 0 0 auto; width: var(--phone-w); height: var(--phone-h); }
.preview-stage.pv-tight .phone.is-long { height: auto; min-height: var(--phone-h); }
.preview-stage.pv-tight .phone.is-slab { flex: 0 0 auto; width: 840px; height: 1176px; }

.phone {
  width: var(--phone-w);
  flex: 0 0 var(--phone-w);
  height: var(--phone-h);
  background: #FFFFFF;
  border-radius: 68px;
  border: 2px solid #D5D8DC;
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .07);
}

/* 预览区等比缩回 50%：仅影响预览，导出用的 #offscreen 副本不含 .preview-stage */
.preview-stage .phone { zoom: .5; }

.phone.is-long { height: auto; min-height: var(--phone-h); }

.phone.is-slab { width: 840px; flex: 0 0 840px; height: 1176px; }

.phone-status {
  flex: 0 0 auto; height: 68px; padding: 0 40px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 22px; color: #2C2C2E; background: #FFFFFF;
}
.status-right { display: flex; align-items: center; gap: 10px; }
.sig { display: flex; align-items: flex-end; gap: 3px; }
.sig i { width: 5px; background: #2C2C2E; border-radius: 1px; }
.sig i:nth-child(1) { height: 8px; }
.sig i:nth-child(2) { height: 12px; }
.sig i:nth-child(3) { height: 16px; }
.sig i:nth-child(4) { height: 20px; }
.batt {
  width: 36px; height: 18px; border: 2px solid #2C2C2E;
  border-radius: 5px; padding: 2px; display: flex;
}
.batt i { display: block; width: 72%; height: 100%; background: #2C2C2E; border-radius: 1px; }

.phone-header {
  flex: 0 0 auto; height: 92px; padding: 0 24px;
  background: var(--line-header);
  border-bottom: 1px solid #EAEAEA;
  display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 12px;
}
.hd-left { color: #4A4A4C; display: flex; align-items: center; justify-content: center; }
.hd-left svg { width: 34px; height: 34px; }
.group-title {
  font-size: 30px; font-weight: 500; color: #1C1C1E; text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hd-right {
  display: flex; align-items: center; gap: 6px;
  font-size: 22px; color: var(--muted);
}
.hd-right svg { width: 26px; height: 26px; color: #9A9A9C; }
.phone-header { --muted: #8A9099; }

.chat {
  flex: 1 1 auto;
  padding: 24px 20px 28px;
  display: flex; flex-direction: column; gap: 18px;
  background: #F5F5F5;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.phone.is-long .chat { flex: 0 0 auto; overflow: visible; }

.phone-footer {
  flex: 0 0 auto; height: 108px; background: var(--line-footer);
  border-top: 1px solid #EAEAEA;
  display: flex; align-items: center; gap: 16px; padding: 0 20px;
}
.foot-btn { color: #8E8E93; display: flex; }
.foot-btn svg { width: 40px; height: 40px; }
.fake-input {
  flex: 1 1 auto; height: 68px; border-radius: 34px;
  background: #F4F4F4; color: #B0B0B3; font-size: 26px;
  display: flex; align-items: center; padding: 0 26px;
}
/* 发送按钮：Telegram 蓝（原为 LINE 绿 #8DE055）。
   改蓝的原因：录制绿幕抠像时，与 #00FF00 相近的绿色元素会被一起抠掉。 */
.send-dot {
  width: 60px; height: 60px; border-radius: 50%;
  background: #3390EC; color: #FFFFFF;
  display: flex; align-items: center; justify-content: center;
}
.send-dot svg { width: 32px; height: 32px; }

/* ---------- 消息气泡（LINE 风格） ---------- */
.row { display: flex; align-items: flex-start; gap: 14px; }
.row.mine { flex-direction: row-reverse; }

.avatar {
  width: 80px; height: 80px; border-radius: 50%;
  flex: 0 0 80px; object-fit: cover; display: block;
}
.avatar-placeholder {
  width: 80px; height: 80px; border-radius: 50%; flex: 0 0 80px;
  background: #DDD; color: #FFFFFF; font-size: 30px;
  display: flex; align-items: center; justify-content: center;
}

.bubble-wrap { max-width: 70%; display: flex; flex-direction: column; gap: 10px; }
.row.mine .bubble-wrap { align-items: flex-end; }

.bubble {
  padding: 18px 28px;
  border-radius: 40px;
  font-size: 30px; line-height: 1.5; color: #1C1C1E;
  background: var(--line-bubble);
  word-break: break-word; white-space: pre-wrap;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}
/* 气泡「尾巴」：名字移到气泡上方后，尖角朝上指向头像（原为朝下） */
.row.mine .bubble {
  background: var(--line-green);
  border-top-right-radius: 5px;
}
.row:not(.mine) .bubble { border-top-left-radius: 5px; }

.bubble-img {
  width: 400px; max-width: 100%; border-radius: 28px; display: block;
}

.msg-time { flex: 0 0 auto; align-self: flex-end; margin-bottom: 6px; font-size: 22px; color: #9A9A9C; }

/* 角色名：已移到气泡上方（LINE 群聊布局），宽度不再受头像列限制。
   字号 = 正文 30px 减两个 2px 档 = 26px。 */
.msg-name {
  font-size: 26px;
  font-weight: 400;
  color: #7A7A7C;
  line-height: 1.3;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 已废弃：名字不再与头像同列。保留空规则以免历史代码引用时无样式兜底，可安全删除。 */
.avatar-col {
  flex: 0 0 104px;
  width: 104px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.sys {
  display: inline-block;
  align-self: center; max-width: 86%; text-align: center;
  font-size: 24px; color: #FFFFFF;
  background: rgba(70, 70, 72, .45);
  border-radius: 28px;
  padding: 10px 24px; line-height: 1.5;
}

/* 顶对齐：与 .row 保持一致（名字移到气泡上方后，头像顶点应对齐名字顶部，避免播放时头像跳动） */
.typing { display: flex; align-items: flex-start; gap: 14px; }
.typing.mine { flex-direction: row-reverse; }
.typing.mine .typing-bubble { border-top-left-radius: 36px; border-top-right-radius: 10px; background: var(--line-green); }
.typing-bubble {
  background: var(--line-bubble); border-radius: 36px;
  border-top-left-radius: 10px; padding: 24px 30px;
  display: flex; gap: 8px; box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}
.typing-bubble i {
  width: 12px; height: 12px; border-radius: 50%;
  background: #B8B8BA; animation: blink 1.2s infinite;
}
.typing-bubble i:nth-child(2) { animation-delay: .2s; }
.typing-bubble i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 60%, 100% { opacity: .35; } 30% { opacity: 1; } }

/* ---------- 属性面板 ---------- */
.inspector {
  flex: 0 0 auto; padding: 10px;
  display: flex; flex-direction: column; gap: 8px;
  border-bottom: 1px solid var(--line);
}
.inspector label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.inspector select, .inspector input[type=text], .inspector textarea { width: 100%; }
.inspector-row { display: flex; gap: 8px; }
.inspector-row > div { flex: 1 1 0; min-width: 0; }

.img-drop {
  border: 1px dashed var(--line); border-radius: 6px;
  padding: 10px; text-align: center; color: var(--muted);
  font-size: 12px; cursor: pointer;
}
.img-drop:hover { border-color: var(--accent); color: var(--accent); }
.img-preview {
  max-width: 100%; max-height: 120px; border-radius: 6px;
  display: block; margin: 0 auto 8px;
}

/* ---------- 角色库 ---------- */
.char-list {
  flex: 1 1 auto; overflow-y: auto; padding: 6px;
  display: flex; flex-direction: column; gap: 2px;
}
.char-item {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 6px; border-radius: 6px; cursor: pointer;
  border: 1px solid transparent;
}
.char-item:hover { background: #F7F8FA; border-color: var(--line); }
.char-item img {
  width: 30px; height: 30px; border-radius: 50%;
  object-fit: cover; flex: 0 0 30px;
}
.char-meta { flex: 1 1 auto; min-width: 0; }
.char-name { font-size: 12px; font-weight: 500; }
.char-band { font-size: 11px; color: var(--muted); }
.char-upload {
  flex: 0 0 auto; font-size: 11px; color: var(--muted);
  border: 1px solid var(--line); border-radius: 4px;
  padding: 2px 6px; cursor: pointer; background: #FFFFFF;
  font-family: inherit;
}
.char-upload:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- 离屏导出容器 ---------- */
.offscreen {
  position: absolute; left: -10000px; top: 0;
  width: var(--phone-w); pointer-events: none;
}

/* ---------- 提示 ---------- */
.toast {
  position: fixed; left: 50%; bottom: 28px;
  transform: translateX(-50%) translateY(12px);
  background: rgba(31, 35, 40, .92); color: #FFFFFF;
  font-size: 13px; padding: 8px 16px; border-radius: 6px;
  opacity: 0; transition: opacity .18s, transform .18s;
  pointer-events: none; z-index: 99; max-width: 70vw;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.trash-zone {
  height: 56px; margin: 8px;
  border: 1.5px dashed var(--line); border-radius: 8px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  color: var(--muted); background: #FAFBFC;
}
.trash-zone [data-icon] svg { width: 22px; height: 22px; }
.trash-label { font-size: 12px; }
.trash-zone.drag-over {
  background: #FDECEA; border-color: var(--danger); color: var(--danger);
}
.trash-zone.drag-over [data-icon] svg {
  transform: scale(1.12); transition: transform .15s;
}

.char-group { margin-bottom: 6px; }
.char-group-title {
  font-size: 11px; color: var(--muted); padding: 4px 6px;
  font-weight: 500; letter-spacing: .3px;
}
.char-item.is-custom { box-shadow: inset 2px 0 0 var(--accent); }
.char-item.is-member { box-shadow: inset 3px 0 0 var(--accent); background: #F6F5FE; }
.char-item.is-secret { box-shadow: inset 3px 0 0 #EE77AA; background: #FFF5F9; }

.char-del {
  flex: 0 0 auto; border: none; background: transparent;
  color: var(--muted); padding: 2px 4px; cursor: pointer;
  font-size: 12px; font-family: inherit;
}
.char-del:hover { color: var(--danger); }

.modal {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .35);
  display: flex; align-items: center; justify-content: center; z-index: 50;
}
.modal[hidden] { display: none; }
.modal-card {
  background: #FFFFFF; border-radius: 12px; padding: 18px 20px;
  width: 380px; max-width: 90vw;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .18);
}
.modal-card h3 { font-size: 14px; font-weight: 500; margin: 0 0 14px; }

/* 快速输入（时间线顶部主操作之一：主色实心，便于一眼找到） */
#btnNewMsg, #btnScript {
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
}
#btnNewMsg { background: var(--brand); border-color: var(--brand); color: #FFFFFF; }
#btnNewMsg:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #FFFFFF; }
#btnScript {
  background: var(--accent);
  border-color: var(--accent);
  color: #FFFFFF;
}
#btnScript:hover { background: #6E66D0; border-color: #6E66D0; color: #FFFFFF; }
#btnNewMsg svg, #btnScript svg { width: 15px; height: 15px; }

/* 右侧属性面板：消息类型切换按钮组（替代原下拉菜单）
   —— 每种类型一个专属颜色：未选中用「同色浅底 + 同色文字」做区分，
      选中时实心填充 + 放大一圈 + 外围光晕，一眼看出当前是哪一种。 */
.type-switch { display: flex; flex-wrap: wrap; gap: 7px; padding: 3px 2px; }
.type-btn {
  height: 30px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 15px;
  background: var(--panel); color: var(--muted);
  font-size: 12px; font-family: inherit; cursor: pointer;
  transform-origin: center center;
  transition: transform .14s ease, box-shadow .14s ease,
              background .14s, border-color .14s, color .14s;
}
/* 未选中：各自的专属配色 */
.type-btn[data-type="text"]    { color: var(--brand);  border-color: #BFD8FA; background: #EAF2FE; }
.type-btn[data-type="image"]   { color: #2B8FA8;       border-color: #BFE6EB; background: #E6F5F8; }
.type-btn[data-type="sticker"] { color: var(--accent); border-color: #CFCBF3; background: #EEEDFE; }
.type-btn[data-type="pat"]     { color: #B4761F;       border-color: #F0D3AE; background: #FDF0DF; }
.type-btn[data-type="join"]    { color: #2E8B57;       border-color: #BEE3CE; background: #E7F5EC; }
.type-btn[data-type="leave"]   { color: var(--danger); border-color: #F0C4B4; background: #FCEDE7; }
.type-btn:hover { transform: translateY(-1px); }

/* 选中：实心 + 放大一圈 + 外围光晕 */
.type-btn.is-on { color: #FFFFFF; font-weight: 600; transform: scale(1.09); }
.type-btn[data-type="text"].is-on    { background: var(--brand);   border-color: var(--brand);   box-shadow: 0 0 0 3px rgba(91, 141, 239, .30); }
.type-btn[data-type="image"].is-on   { background: #3AA6C0;        border-color: #3AA6C0;        box-shadow: 0 0 0 3px rgba(58, 166, 192, .30); }
.type-btn[data-type="sticker"].is-on { background: var(--accent);  border-color: var(--accent);  box-shadow: 0 0 0 3px rgba(127, 119, 221, .30); }
.type-btn[data-type="pat"].is-on     { background: #D98E28;        border-color: #D98E28;        box-shadow: 0 0 0 3px rgba(217, 142, 40, .30); }
.type-btn[data-type="join"].is-on    { background: #3AA76D;        border-color: #3AA76D;        box-shadow: 0 0 0 3px rgba(58, 167, 109, .30); }
.type-btn[data-type="leave"].is-on   { background: var(--danger);  border-color: var(--danger);  box-shadow: 0 0 0 3px rgba(216, 90, 48, .30); }
.type-btn.is-on:hover { transform: scale(1.09); }

/* ---------- 批量导入剧本对话框 ---------- */
.modal-card-wide { width: 860px; max-width: 94vw; }
.script-hint { font-size: 12px; color: var(--muted); line-height: 1.75; margin: 0 0 10px; }
.script-hint code {
  background: var(--bg); border: 1px solid var(--line); border-radius: 4px;
  padding: 1px 5px; font-size: 11px;
}
.script-input {
  width: 100%; height: 190px; resize: vertical; box-sizing: border-box;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg); color: var(--text);
  font-family: "Microsoft YaHei", "PingFang SC", monospace;
  font-size: 13px; line-height: 1.75;
}
.script-input:focus { outline: none; border-color: var(--accent); }
.script-preview { margin-top: 12px; max-height: 250px; overflow-y: auto; }
.script-stat { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.script-map-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; font-size: 12px; }
.script-map-name {
  flex: 0 0 110px; width: 110px; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.script-map-arrow { color: var(--muted); }
.script-map-row select {
  flex: 1 1 auto; height: 30px; padding: 0 8px;
  border: 1px solid var(--line); border-radius: 6px;
  background: var(--panel); color: var(--text); font-size: 12px;
}
.script-map-count { color: var(--muted); flex: 0 0 auto; }
.script-list { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 10px; }
.script-list-item {
  font-size: 12px; line-height: 1.6; opacity: .82;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.script-list-item .who { color: var(--accent); font-weight: 500; }
.script-err { color: var(--danger); font-size: 12px; }
.script-ok { color: var(--c-green); font-size: 12px; }

/* 折叠式格式说明 */
.script-help { margin-top: 10px; font-size: 12px; }
.script-help > summary {
  cursor: pointer; color: var(--accent); font-size: 12px;
  padding: 4px 0; user-select: none; outline: none;
}
.script-help > summary:hover { text-decoration: underline; }
.script-help-body {
  margin-top: 8px; padding: 10px 12px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
  color: var(--muted); line-height: 1.8;
}
.script-help-body p { margin: 0 0 6px; }
.script-help-body p:last-child { margin-bottom: 0; }
.script-help-body b { color: var(--text); }
.script-help-body pre {
  margin: 6px 0; padding: 10px 12px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px;
  color: var(--text); font-size: 12px; line-height: 1.7;
  white-space: pre; overflow-x: auto;
  font-family: "Microsoft YaHei", "PingFang SC", monospace;
}
.modal-row {
  display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px;
}
.modal-row > label {
  flex: 0 0 40px; width: 40px; font-size: 12px; color: var(--muted);
  line-height: 28px;
}
.modal-row input, .modal-row .seg { flex: 1 1 auto; }
.modal-actions {
  display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px;
}
.modal-card .hint { font-size: 12px; color: var(--muted); margin: 0; }

.egg-body { text-align: center; padding: 12px 8px; font-size: 15px; line-height: 1.7; color: var(--text); }
.egg-umbrella { width: 96px; height: 96px; display: block; margin: 0 auto 10px; }

/* 单文件整合版开局的使用说明弹窗（内容由 app.js 的 README_HTML 填充） */
.readme-card { width: 540px; max-width: 92vw; }
.readme-body {
  max-height: 58vh; overflow-y: auto;
  font-size: 13px; line-height: 1.75; color: var(--text);
  padding-right: 8px;
}
.readme-body h4 {
  font-size: 13px; font-weight: 500; margin: 14px 0 6px; color: var(--accent);
}
.readme-body h4:first-child { margin-top: 0; }
.readme-body p { margin: 0 0 8px; }
.readme-body ul { margin: 0 0 8px; padding-left: 20px; }
.readme-body li { margin-bottom: 5px; }
.readme-body pre {
  margin: 6px 0 10px; padding: 10px 12px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
  color: var(--text); font-size: 12px; line-height: 1.75; white-space: pre; overflow-x: auto;
  font-family: "Microsoft YaHei", "PingFang SC", monospace;
}

/* ---------- 交互式引导（游戏式新手引导）----------
   遮罩 = 一个"洞"元素 + 超大 box-shadow 扩散，目标元素自然露出；
   洞是 pointer-events:none，用户可以直接点被高亮的元素。 */
/* 整层不接收点击：否则用户点被高亮的元素时会命中遮罩而误退出引导。
   遮罩视觉由 #tourHole 的超大 box-shadow 提供，气泡单独放开点击。 */
.tour-layer { position: fixed; inset: 0; z-index: 9996; pointer-events: none; }
.tour-hole {
  position: fixed; border-radius: 10px; z-index: 1;
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, .62);
  pointer-events: none;
  transition: left .18s ease, top .18s ease, width .18s ease, height .18s ease;
}
.tour-tip {
  position: fixed; z-index: 2;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; box-shadow: 0 12px 34px rgba(0, 0, 0, .3);
  font-size: 12.5px; line-height: 1.75;
  pointer-events: auto;   /* 气泡要能点（跳过/下一步） */
}
.tour-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.tour-head b { font-size: 13px; font-weight: 600; color: var(--accent); }
.tour-prog { flex: 0 0 auto; font-size: 11px; color: var(--muted); }
.tour-text { color: var(--muted); }
.tour-text b { color: var(--text); }
.tour-wait { color: var(--accent); font-size: 11.5px; }
.tour-acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.tour-skip, .tour-next {
  height: 28px; padding: 0 12px; border-radius: 14px;
  font-size: 12px; font-family: inherit; cursor: pointer;
}
.tour-skip { border: 1px solid var(--line); background: var(--panel); color: var(--muted); }
.tour-skip:hover { border-color: var(--muted); color: var(--text); }
.tour-next { border: 1px solid var(--accent); background: var(--accent); color: #FFFFFF; font-weight: 600; }
.tour-next:hover { background: #6E66D0; border-color: #6E66D0; }

/* 引导入口（帮助弹窗「上手指南」顶部） */
.tour-entries { margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px dashed var(--line); }
.tour-entries-hint { margin: 0 0 8px; font-size: 12px; color: var(--muted); }
.tour-entry {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 9px 12px; margin-bottom: 6px;
  border: 1px solid var(--line); border-radius: 9px;
  background: var(--bg); color: var(--text);
  font-size: 12.5px; font-family: inherit; cursor: pointer; text-align: left;
  transition: border-color .14s, background .14s;
}
.tour-entry:hover { border-color: var(--accent); background: var(--accent-soft); }
.tour-entry-play { font-size: 11px; color: var(--accent); }
.tour-entry b { font-weight: 600; }
.tour-entry-desc { margin-left: auto; font-size: 11.5px; color: var(--muted); }

/* ---------- 帮助弹窗：标签栏（关于 / 上手指南 / 常见问题） ---------- */
.help-tabs {
  display: flex; gap: 6px; margin: -4px 0 12px; padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.help-tab {
  height: 30px; padding: 0 14px; border-radius: 15px;
  border: 1px solid var(--line); background: var(--panel); color: var(--muted);
  font-size: 13px; font-family: inherit; cursor: pointer;
  transition: background .14s, border-color .14s, color .14s;
}
.help-tab:hover { border-color: var(--accent); color: var(--accent); }
.help-tab.is-on { background: var(--accent); border-color: var(--accent); color: #FFFFFF; font-weight: 600; }

/* ---------- 帮助弹窗：常见问题折叠项 ---------- */
.readme-body details {
  margin: 6px 0; border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg); overflow: hidden;
}
.readme-body details > summary {
  cursor: pointer; padding: 9px 30px 9px 12px; position: relative;
  font-size: 12.5px; font-weight: 500; color: var(--text); list-style: none;
}
.readme-body details > summary::-webkit-details-marker { display: none; }
.readme-body details > summary::after {
  content: '＋'; position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  color: var(--muted); font-size: 13px;
}
.readme-body details[open] > summary::after { content: '－'; }
.readme-body details[open] > summary { border-bottom: 1px solid var(--line); }
.readme-body details > p {
  margin: 0; padding: 9px 12px; font-size: 12px; line-height: 1.85; color: var(--muted);
}
.readme-body b { font-weight: 500; }
.readme-nomore {
  display: flex; align-items: center; gap: 6px; margin-top: 12px;
  font-size: 12px; color: var(--muted); cursor: pointer; user-select: none;
}
.readme-nomore input { margin: 0; cursor: pointer; }

.member-picker {
  display: flex; flex-wrap: wrap; gap: 6px;
  max-height: 190px; overflow-y: auto; padding: 2px;
}
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--line); border-radius: 14px;
  padding: 3px 9px 3px 3px; font-size: 12px; cursor: pointer;
  user-select: none; background: #FFFFFF;
}
.chip img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.chip.is-on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.chip.is-disabled { opacity: .4; cursor: not-allowed; }

.at-mention { color: #1B7ACC; font-weight: 500; }

.at-list { display:flex; flex-direction:column; gap:4px; max-height:320px; overflow-y:auto; padding:2px; }
.at-item { display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:6px; cursor:pointer; }
.at-item:hover { background:#F2F3F7; }
.at-item img { width:26px; height:26px; border-radius:50%; object-fit:cover; }
.at-item span { font-size:13px; color:var(--text); }

.person-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; max-height: 320px; overflow-y: auto; padding: 2px; }
.person-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.person-item:hover { border-color: var(--accent); background: #F7F8FA; }
.person-item.is-on { border-color: var(--accent); background: var(--accent-soft); }
.person-item img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.person-item .p-name { font-size: 13px; font-weight: 500; color: var(--text); }
.person-item .p-band { font-size: 11px; color: var(--muted); }
.person-select { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: #FFFFFF; cursor: pointer; font-size: 13px; color: var(--text); text-align: left; }
.person-select img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.person-select:hover { border-color: var(--accent); }
.drop-hover { outline: 2px dashed var(--accent); outline-offset: -3px; background: rgba(55, 138, 221, .06); }

.stamp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 8px;
  max-height: 320px;
  overflow-y: auto;
  padding: 2px;
}
.stamp-item {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px;
  cursor: pointer;
  background: #FFFFFF;
  transition: border-color .12s, background .12s;
}
.stamp-item img {
  max-width: 100%;
  max-height: 64px;
  object-fit: contain;
  display: block;
}
.stamp-item:hover { border-color: var(--accent); }
.stamp-item.is-on { border-color: var(--accent); background: var(--accent-soft); }
.bubble-wrap.has-stamp { max-width: none; }
.bubble-stamp {
  width: 400px;
  max-width: 100%;
  display: block;
  object-fit: contain;
}

.timeline { position: relative; }

.panel-foot [hidden] { display: none; }

.marquee {
  position: absolute;
  border: 1px solid #378ADD;
  background: rgba(55, 138, 221, .12);
  pointer-events: none;
  z-index: 5;
  border-radius: 2px;
}

.msg-item.multi-on { border-color: #378ADD; background: #E6F1FB; }

.char-reset {
  flex: 0 0 auto; font-size: 11px; color: var(--muted);
  border: 1px solid var(--line); border-radius: 4px;
  padding: 2px 6px; cursor: pointer; background: #FFFFFF;
  font-family: inherit;
}
.char-reset:hover { color: #378ADD; border-color: #378ADD; }

@media (max-width: 1400px) {
  .workspace { grid-template-columns: 280px minmax(360px, 1fr) 260px; }
}

@media (max-width: 1200px) {
  .workspace { grid-template-columns: 250px minmax(320px, 1fr) 240px; }
  .topbar { flex-wrap: wrap; height: auto; min-height: 52px; padding: 6px 10px; row-gap: 6px; }
}

@media (max-width: 1000px) {
  .workspace { grid-template-columns: 1fr 1fr; grid-template-areas: "preview preview" "timeline inspector"; grid-auto-rows: min-content; align-content: start; overflow-y: auto; }
  .panel-preview { grid-area: preview; max-height: 55vh; }
  .panel-timeline {
    grid-area: timeline; min-height: 320px;
    display: grid;
    grid-template-columns: 1fr 62px;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: "head trash" "timeline trash" "foot trash";
  }
  .panel-timeline > .panel-head { grid-area: head; }
  .panel-timeline > .timeline { grid-area: timeline; }
  .panel-timeline > .panel-foot { grid-area: foot; }
  .panel-timeline > .trash-zone { grid-area: trash; width: 62px; height: auto; flex-direction: column; gap: 6px; padding: 10px 4px; margin: 6px 6px 6px 0; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
  .panel-timeline > .trash-zone.drag-over { background: #FDECEA; border-color: var(--danger); color: var(--danger); }
  .trash-zone .trash-label { writing-mode: vertical-rl; letter-spacing: 2px; font-size: 11px; }
  .panel-inspector { grid-area: inspector; min-height: 320px; }
}

/* 561~800px（平板竖屏）：若沿用 1fr 1fr 两列，时间线与属性各只剩不到 400px，偏挤。
   改为单列纵向堆叠（预览 → 时间线 → 属性），各栏占满宽度。 */
@media (min-width: 561px) and (max-width: 800px) {
  .workspace {
    grid-template-columns: 1fr;
    grid-template-areas: "preview" "timeline" "inspector";
  }
  .panel-preview { max-height: 60vh; }
}

/* ---------- 暗色背景可读性：手机屏幕内的数字与人名加白色描边 ---------- */
.msg-time,
.msg-name,
.phone-status,
.phone-status span,
.group-title,
.hd-right,
.hd-right span {
  text-shadow: 0 0 2px rgba(255, 255, 255, .95), 0 0 3px rgba(255, 255, 255, .85), 0 1px 0 rgba(255, 255, 255, .9);
}

/* 图标与状态图形：暗色背景下的白色描边
   注：发送键(.send-dot)自带绿色圆形底衬，不需要发光，故不在此列 */
.hd-left svg,
.hd-right svg,
.foot-btn svg {
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, .95)) drop-shadow(0 0 3px rgba(255, 255, 255, .8));
}
.send-dot svg { filter: none; }
.sig i,
.batt {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .85);
}
.sys {
  text-shadow: 0 0 2px rgba(255, 255, 255, .9);
}

/* 角色名：白字 + 黑色描边（任何背景上都醒目）
   注：下方阴影版仅用于导出（#offscreen，html2canvas 不支持 text-stroke）；
   屏幕端见 .preview-stage .msg-name。
   粗细换算：text-stroke 居中描边，1px 的视觉外扩 = 0.5px（2x 坐标），
   故此处 text-shadow 偏移取 ±0.5px 与之对齐。 */
.msg-name {
  color: #FFFFFF;
  text-shadow:
    -0.5px 0 0 rgba(0, 0, 0, .95), 0.5px 0 0 rgba(0, 0, 0, .95),
    0 -0.5px 0 rgba(0, 0, 0, .95), 0 0.5px 0 rgba(0, 0, 0, .95),
    0 0 1px rgba(0, 0, 0, .95), 0 0 2px rgba(0, 0, 0, .8), 0 0 3px rgba(0, 0, 0, .6);
}

/* 屏幕端（主界面预览）：原生矢量描边替代阴影堆叠，消除颗粒/毛刺感。
   paint-order 让描边画在填充下层（否则 2px 居中描边会吞掉小字号的白芯）。
   导出路径 #offscreen 由 html2canvas 截图，它不支持 text-stroke，
   仍使用上方阴影版本——靠 .preview-stage 前缀把两个场景分开。 */
.preview-stage .msg-name {
  -webkit-text-stroke: 1px rgba(0, 0, 0, .9);
  paint-order: stroke fill;
  text-shadow: none;
}

/* html2canvas 中文断行修正：非 0 的 letter-spacing 会走字素切分路径，避免导出叠字。
   数值可以按字距观感调整（越大字越松），但**必须保持非 0**，否则导出会叠字。 */
.phone,
.phone * {
  letter-spacing: 1px;
}

/* ============================================================
   按钮系统（按语义用颜色区分）
   约定：实心=主行动；浅色底+同色描边=次级/类型；红色=破坏性
   ============================================================ */

/* 基础：统一圆角、过渡、按压缩放、键盘可见焦点 */
.btn {
  border-radius: 7px;
  border-color: #D8DCE2;
  font-weight: 500;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s, transform .06s;
}
.btn:hover { border-color: var(--brand); color: var(--brand-dark); background: var(--brand-soft); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.btn-mini { border-radius: 6px; }

/* 主行动：导出屏幕（品牌蓝实心） */
#btnExportAll.btn-primary {
  background: var(--brand); border-color: var(--brand); color: #FFFFFF;
}
#btnExportAll.btn-primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #FFFFFF; }

/* 导出视频（核心功能）：加大尺寸 + 主强调色，保证在顶栏里一眼可见。
   用紫色（--accent）与「导出屏幕」的品牌蓝区分开，避免两个蓝色按钮互相混淆。
   注：录制中会切到 #btnExportVideo.is-playing（橙色），那条规则特异性更高，会正常覆盖本条。 */
#btnExportVideo {
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 600;
  background: var(--accent);
  border-color: var(--accent);
  color: #FFFFFF;
}
#btnExportVideo:hover { background: #6E66D0; border-color: #6E66D0; color: #FFFFFF; }
#btnExportVideo svg { width: 16px; height: 16px; }

/* 次级导出：导出所选（青） */
#btnExportSelected { color: var(--c-cyan); border-color: #BFE6EB; background: var(--c-cyan-soft); }
#btnExportSelected:hover { border-color: var(--c-cyan); background: #D6EFF3; }

/* 播放：绿（播放中变橙 = 停止） */
#btnPlay { color: var(--c-green); border-color: #BEE3CE; background: var(--c-green-soft); }
#btnPlay:hover { border-color: var(--c-green); background: #D3EDE0; }
#btnPlay.is-playing { color: var(--c-orange); border-color: #F0D3AE; background: var(--c-orange-soft); }
#btnPlay.is-playing:hover { border-color: var(--c-orange); background: #FAE6CE; }
#btnExportVideo.is-playing { color: var(--c-orange); border-color: #F0D3AE; background: var(--c-orange-soft); }
#btnExportVideo.is-playing:hover { border-color: var(--c-orange); background: #FAE6CE; }

/* 对话管理：新建=蓝，重命名=中性，删除=红 */
#btnNewConv { color: var(--brand); border-color: #C3D7F7; background: var(--brand-soft); }
#btnNewConv:hover { border-color: var(--brand); }
#btnRenameConv { color: var(--c-slate); background: var(--c-slate-soft); border-color: #DDE2E8; }
#btnRenameConv:hover { color: var(--text); border-color: #C9CDD3; }
#btnDelConv { color: var(--c-red); border-color: #F2C9C7; background: var(--c-red-soft); }
#btnDelConv:hover { border-color: var(--c-red); background: #F9DFDE; }

/* 时间线：新增消息的五种类型，各用一种颜色 */
.add-row [data-add="text"]   { color: var(--c-slate);  background: var(--c-slate-soft);  border-color: #DDE2E8; }
.add-row [data-add="text"]:hover   { border-color: var(--c-slate); color: var(--text); }
.add-row [data-add="image"]  { color: var(--c-purple); background: var(--c-purple-soft); border-color: #DCD2F5; }
.add-row [data-add="image"]:hover  { border-color: var(--c-purple); }
.add-row [data-add="join"]   { color: var(--c-green);  background: var(--c-green-soft);  border-color: #BEE3CE; }
.add-row [data-add="join"]:hover   { border-color: var(--c-green); }
.add-row [data-add="leave"]  { color: var(--c-red);    background: var(--c-red-soft);    border-color: #F2C9C7; }
.add-row [data-add="leave"]:hover  { border-color: var(--c-red); }
.add-row [data-add="pat"]    { color: var(--c-pink);   background: var(--c-pink-soft);   border-color: #EED3F5; }
.add-row [data-add="pat"]:hover    { border-color: var(--c-pink); }

/* 时间线底部：勾选导出=蓝，删除所选=红，全选=中性，清空=灰 */
#btnMultiExport { color: var(--brand); border-color: #C3D7F7; background: var(--brand-soft); }
#btnMultiExport:hover { border-color: var(--brand); }
#btnMultiDel.btn-danger { color: #FFFFFF; background: var(--c-red); border-color: var(--c-red); }
#btnMultiDel.btn-danger:hover { background: #C94541; border-color: #C94541; color: #FFFFFF; }
#btnSelectAll { color: var(--c-slate); background: var(--c-slate-soft); border-color: #DDE2E8; }
#btnSelectAll:hover { color: var(--text); border-color: #C9CDD3; }
#btnSelectNone { color: var(--muted); background: #FFFFFF; border-color: #E3E5E8; }
#btnSelectNone:hover { color: var(--text); border-color: #C9CDD3; }

/* 破坏性：删除此条（红描边，hover 实心） */
.btn-danger { color: var(--c-red); border-color: #F2C9C7; }
.btn-danger:hover { background: var(--c-red-soft); border-color: var(--c-red); color: var(--c-red); }

/* 角色库：自定义角色=紫 */
#btnAddChar { color: var(--c-purple); border-color: #DCD2F5; background: var(--c-purple-soft); }
#btnAddChar:hover { border-color: var(--c-purple); }

/* 选人类控件（视角 / 发送者 / 被拍对象）统一浅蓝 */
#perspectivePick, .person-select {
  color: var(--brand-dark); border-color: #C3D7F7; background: var(--brand-soft);
}
#perspectivePick:hover, .person-select:hover { border-color: var(--brand); background: #DCEAFD; }

/* @ 艾特：蓝描边 */
#btnAt { color: var(--brand); border-color: #C3D7F7; background: var(--brand-soft); }
#btnAt:hover { border-color: var(--brand); }

/* 分段控件（手机 / 长图 / 阔直板；群聊 / 聊天）：选中=品牌蓝实心，更醒目
   注意：HTML 里用的是 <div class="seg"><button>，没有 .seg-btn 类，所以必须用 `.seg button` 选择器（旧样式写 .seg-btn 导致选中态一直无效） */
.seg { border-color: #D8DCE2; }
.seg button {
  font-family: inherit; font-size: 12px; color: var(--muted);
  background: #FFFFFF; border: none; border-right: 1px solid var(--line);
  padding: 5px 10px; cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 4px; line-height: 1.2;
  transition: background .15s, color .15s;
}
.seg button:last-child { border-right: none; }
.seg button svg { width: 13px; height: 13px; }
.seg button:hover { background: var(--brand-soft); color: var(--brand-dark); }
.seg button.is-active { background: var(--brand); color: #FFFFFF; }
.seg button.is-active:hover { background: var(--brand-dark); color: #FFFFFF; }
.seg button:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

/* 实时预览标题栏里的「比例切换」（v1.4 从顶栏搬来）。
   必须写在这里（.seg button 之后），否则同特异性的简写会被上面那条覆盖。
   预览栏在 3 栏布局下可能只有 260px 宽，所以标题栏允许换行，控件不参与被挤扁。 */
.panel-preview .panel-head { flex-wrap: wrap; row-gap: 6px; }
.panel-preview .panel-head .seg-mode { margin-left: auto; flex: 0 0 auto; }
.seg-mode button { padding: 4px 8px; font-size: 11.5px; }
.seg-mode button svg { width: 12px; height: 12px; }
.panel-preview .panel-head #playState { flex: 0 0 auto; }

/* 时间线条目上的小图标按钮：上移/下移=蓝，删除=红 */
.msg-item-ops .btn-icon:hover { background: var(--brand-soft); color: var(--brand-dark); }
.msg-item-ops .btn-icon[data-del]:hover { background: var(--c-red-soft); color: var(--c-red); }

/* 空状态主按钮（载入示例对话）用品牌蓝 */
.empty-state .btn-primary { background: var(--brand); border-color: var(--brand); }
.empty-state .btn-primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); }

/* 播放窗口按钮：深色底 + 语义色（开始=绿 / 暂停=橙 / 重播=蓝） */
.pw-btn { transition: background .15s, border-color .15s, color .15s; }
#pwPlay  { color: #7FE0AC; border-color: rgba(127, 224, 172, .45); }
#pwPlay:hover  { border-color: #7FE0AC; background: rgba(127, 224, 172, .14); }
#pwPause { color: #F3C07A; border-color: rgba(243, 192, 122, .45); }
#pwPause:hover { border-color: #F3C07A; background: rgba(243, 192, 122, .14); }
#pwReplay{ color: #9CC4FF; border-color: rgba(156, 196, 255, .45); }
#pwReplay:hover{ border-color: #9CC4FF; background: rgba(156, 196, 255, .14); }

/* ============================================================
   手机竖屏适配（≤560px）
   问题（实测 390×844 / 360×780）：
     · .topbar-actions 不换行 → 宽 738.6px，整页 scrollWidth 749，横向溢出 359/389px
     · @media(max-width:1000px) 的 1fr 1fr 两列 → 时间线/属性各只剩 180px / 165px
     · 删除区被改造成右侧竖列（62px 宽、1859px 高、竖排文字）
     · 预览 .phone zoom:.5 → 375px 宽，360px 视口放不下（stage 内溢出 35px）
     · 手机内置浏览器（微信/QQ/UC）常忽略 meta viewport，把布局视口当成 980px，
       此时 (max-width:560px) 不命中 → 页面按 980 渲染，只看到左上角四分之一
   方案：单列纵向堆叠（预览 → 时间线 → 属性）、顶栏换行、删除区回底部横条、预览再缩一档
   兜底：条件同时匹配「布局视口宽度」与「设备宽度」（逗号 = 或），
        另外由 app.js 给 <html> 加 .is-narrow（见本文件末尾同名规则副本）
   ============================================================ */
@media (max-width: 560px), (max-device-width: 560px) {

  /* ---------- 兜底：整页不产生横向滚动 ---------- */
  html { overflow-x: hidden; }

  /* ---------- 顶栏：允许换行、压缩间距与字号 ---------- */
  .topbar { padding: 6px 8px; gap: 5px; row-gap: 5px; min-height: 44px; }
  .brand { font-size: 12px; gap: 5px; }
  .brand-icon { width: 20px; height: 20px; flex: 0 0 20px; }
  .tool-group { gap: 4px; flex-wrap: wrap; min-width: 0; }
  .tool-group > label { font-size: 11px; }
  .topbar-actions {
    margin-left: 0;
    width: 100%;
    flex-wrap: wrap;
    gap: 6px;
    row-gap: 6px;
    min-width: 0;
  }
  .btn { font-size: 12px; padding: 6px 8px; }
  .btn-mini { font-size: 12px; padding: 5px 7px; }
  input[type=text], select, textarea { font-size: 12px; padding: 5px 6px; }
  .topbar-actions input[type=number] { width: 48px; font-size: 12px; padding: 5px 4px; }
  #convName { width: 108px; }
  #memberCount { width: 48px; }
  .unit { font-size: 11px; }

  /* 触摸目标：按钮/输入框不小于 28px 高；复选框本身 22px，外层 label/行提供 ≥28px 的可点区域 */
  .btn, .btn-mini, .seg button,
  input[type=text], input[type=number], select { min-height: 28px; }
  .btn-icon { min-height: 28px; min-width: 28px; }
  input[type=checkbox] { width: 22px; height: 22px; min-height: 0; }
  .chk { min-height: 28px; }
  input[type=color] { width: 30px; height: 30px; min-height: 30px; }
  .char-upload, .char-del, .char-reset { min-height: 28px; display: inline-flex; align-items: center; }

  /* ---------- 工作区：单列纵向堆叠（预览 → 时间线 → 属性） ---------- */
  .workspace {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .workspace > .panel { min-width: 0; width: 100%; flex: 0 0 auto; }
  .panel-preview { order: 1; grid-area: auto; max-height: none; }
  .panel-timeline { order: 2; }
  .panel-inspector { order: 3; max-height: 70vh; }

  /* ---------- 时间线：恢复纵向 flex，删除区回到底部横条 ---------- */
  .panel-timeline {
    display: flex;
    flex-direction: column;
    min-height: 320px;
    grid-template-columns: none;
    grid-template-rows: none;
    grid-template-areas: none;
  }
  .panel-timeline > .panel-head,
  .panel-timeline > .timeline,
  .panel-timeline > .panel-foot { grid-area: auto; }
  .panel-timeline > .timeline { flex: 1 1 auto; max-height: 46vh; }
  .panel-timeline > .trash-zone {
    grid-area: auto;
    width: auto;
    height: 48px;
    margin: 8px;
    padding: 0 8px;
    flex-direction: row;
    gap: 8px;
    border-radius: 8px;
  }
  .trash-zone .trash-label {
    writing-mode: horizontal-tb;
    letter-spacing: 0;
    font-size: 12px;
  }
  .trash-zone [data-icon] svg { width: 18px; height: 18px; }

  /* ---------- 预览：手机再缩一档，浮层改为上方横条不遮挡内容 ---------- */
  .preview-stage {
    padding: 8px;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
  }
  /* 舞台改为纵向 flex 后，.phone 的 flex-basis 会作用在「高度」上，必须显式复位，
     否则手机会被压成 750×750 的正方形 */
  .preview-stage .phone {
    zoom: .40;
    flex: 0 0 auto;
    width: var(--phone-w);
    height: var(--phone-h);
  }
  .preview-stage .phone.is-slab { zoom: .34; flex: 0 0 auto; width: 840px; height: 1176px; }
  .preview-stage .phone.is-long { height: auto; min-height: var(--phone-h); }
  .float-ctl {
    position: static;
    left: auto; top: auto;
    margin: 0 0 8px;
    padding: 3px 7px;
    border-radius: 8px;
    box-shadow: none;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    max-width: 100%;
  }
  .float-ctl .chk { font-size: 11px; gap: 3px; }

  /* ---------- 面板内控件 ---------- */
  .panel-foot { flex-wrap: wrap; padding: 8px; }
  .add-row { gap: 4px; }
  .char-item img { width: 26px; height: 26px; flex: 0 0 26px; }
  .modal-card { padding: 14px; }
  .toast { max-width: 88vw; }
}

/* ============================================================
   JS 兜底副本：手机内置浏览器忽略 meta viewport 时，布局视口可能被当成
   980px，上面那条媒体查询不会命中。app.js 在 screen.width<=560 时给 <html>
   加上 .is-narrow 类，这里用同款规则（选择器加 .is-narrow 前缀）再生效一次。
   规则与上方 @media 块逐条对应，改上面时请同步改这里。
   ============================================================ */
  /* ---------- 兜底：整页不产生横向滚动 ---------- */
  html.is-narrow { overflow-x: hidden; }
  /* ---------- 顶栏：允许换行、压缩间距与字号 ---------- */
  .is-narrow .topbar { padding: 6px 8px; gap: 5px; row-gap: 5px; min-height: 44px; }
  .is-narrow .brand { font-size: 12px; gap: 5px; }
  .is-narrow .brand-icon { width: 20px; height: 20px; flex: 0 0 20px; }
  .is-narrow .tool-group { gap: 4px; flex-wrap: wrap; min-width: 0; }
  .is-narrow .tool-group > label { font-size: 11px; }
  .is-narrow .topbar-actions {
    margin-left: 0;
    width: 100%;
    flex-wrap: wrap;
    gap: 6px;
    row-gap: 6px;
    min-width: 0;
  }
  .is-narrow .btn { font-size: 12px; padding: 6px 8px; }
  .is-narrow .btn-mini { font-size: 12px; padding: 5px 7px; }
  .is-narrow input[type=text], .is-narrow select, .is-narrow textarea { font-size: 12px; padding: 5px 6px; }
  .is-narrow .topbar-actions input[type=number] { width: 48px; font-size: 12px; padding: 5px 4px; }
  .is-narrow #convName { width: 108px; }
  .is-narrow #memberCount { width: 48px; }
  .is-narrow .unit { font-size: 11px; }
  /* 触摸目标：按钮/输入框不小于 28px 高；复选框本身 22px，外层 label/行提供 ≥28px 的可点区域 */
  .is-narrow .btn, .is-narrow .btn-mini, .is-narrow .seg button, .is-narrow input[type=text], .is-narrow input[type=number], .is-narrow select { min-height: 28px; }
  .is-narrow .btn-icon { min-height: 28px; min-width: 28px; }
  .is-narrow input[type=checkbox] { width: 22px; height: 22px; min-height: 0; }
  .is-narrow .chk { min-height: 28px; }
  .is-narrow input[type=color] { width: 30px; height: 30px; min-height: 30px; }
  .is-narrow .char-upload, .is-narrow .char-del, .is-narrow .char-reset { min-height: 28px; display: inline-flex; align-items: center; }
  /* ---------- 工作区：单列纵向堆叠（预览 → 时间线 → 属性） ---------- */
  .is-narrow .workspace {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .is-narrow .workspace > .panel { min-width: 0; width: 100%; flex: 0 0 auto; }
  .is-narrow .panel-preview { order: 1; grid-area: auto; max-height: none; }
  .is-narrow .panel-timeline { order: 2; }
  .is-narrow .panel-inspector { order: 3; max-height: 70vh; }
  /* ---------- 时间线：恢复纵向 flex，删除区回到底部横条 ---------- */
  .is-narrow .panel-timeline {
    display: flex;
    flex-direction: column;
    min-height: 320px;
    grid-template-columns: none;
    grid-template-rows: none;
    grid-template-areas: none;
  }
  .is-narrow .panel-timeline > .panel-head, .is-narrow .panel-timeline > .timeline, .is-narrow .panel-timeline > .panel-foot { grid-area: auto; }
  .is-narrow .panel-timeline > .timeline { flex: 1 1 auto; max-height: 46vh; }
  .is-narrow .panel-timeline > .trash-zone {
    grid-area: auto;
    width: auto;
    height: 48px;
    margin: 8px;
    padding: 0 8px;
    flex-direction: row;
    gap: 8px;
    border-radius: 8px;
  }
  .is-narrow .trash-zone .trash-label {
    writing-mode: horizontal-tb;
    letter-spacing: 0;
    font-size: 12px;
  }
  .is-narrow .trash-zone [data-icon] svg { width: 18px; height: 18px; }
  /* ---------- 预览：手机再缩一档，浮层改为上方横条不遮挡内容 ---------- */
  .is-narrow .preview-stage {
    padding: 8px;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
  }
  /* 舞台改为纵向 flex 后，.phone 的 flex-basis 会作用在「高度」上，必须显式复位，
     否则手机会被压成 750×750 的正方形 */
  .is-narrow .preview-stage .phone {
    zoom: .40;
    flex: 0 0 auto;
    width: var(--phone-w);
    height: var(--phone-h);
  }
  .is-narrow .preview-stage .phone.is-slab { zoom: .34; flex: 0 0 auto; width: 840px; height: 1176px; }
  .is-narrow .preview-stage .phone.is-long { height: auto; min-height: var(--phone-h); }
  .is-narrow .float-ctl {
    position: static;
    left: auto; top: auto;
    margin: 0 0 8px;
    padding: 3px 7px;
    border-radius: 8px;
    box-shadow: none;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    max-width: 100%;
  }
  .is-narrow .float-ctl .chk { font-size: 11px; gap: 3px; }
  /* ---------- 面板内控件 ---------- */
  .is-narrow .panel-foot { flex-wrap: wrap; padding: 8px; }
  .is-narrow .add-row { gap: 4px; }
  .is-narrow .char-item img { width: 26px; height: 26px; flex: 0 0 26px; }
  .is-narrow .modal-card { padding: 14px; }
  .is-narrow .toast { max-width: 88vw; }

/* ============================================================
   录制模式：整页切成「绿幕 + 手机屏」（#recOverlay）
   ------------------------------------------------------------
   用途：供 getDisplayMedia 捕获「本标签页」时得到干净画面。
   绿幕 #00FF00 铺满，圆角以外与周边留白一律纯绿，便于后期抠图。
   手机屏由 app.js 用 buildPhoneHTML() 注入 #recScale，并按视口自适应缩放。
   ============================================================ */
#recOverlay {
  position: fixed; inset: 0; z-index: 9990;
  background: #00FF00; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
#recOverlay[hidden] { display: none !important; }
#recScale { transform-origin: center center; flex: 0 0 auto; }
#recBar {
  position: fixed; left: 0; right: 0; top: 0; z-index: 9991;
  padding: 12px 14px; background: rgba(12, 14, 18, .92); color: #E8EAED;
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif; font-size: 13px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
#recBar b { font-weight: 500; font-size: 14px; }
#recGo, #recExit {
  height: 34px; padding: 0 16px; border-radius: 17px; font-size: 13px;
  cursor: pointer; font-family: inherit;
}
#recGo { border: 1px solid #7EE081; background: #17321C; color: #7EE081; }
#recGo:hover { background: #1D4023; }
#recExit { border: 1px solid rgba(255,255,255,.25); background: #1E2228; color: #E8EAED; }
#recExit:hover { border-color: #E8EAED; }
.rec-hint { color: #9AA0A6; font-size: 12px; }
.rec-msg { color: #F2C55C; font-size: 12px; }
.rec-out { color: #7EE081; font-size: 12px; font-weight: 500; }
.rec-orient { display: inline-flex; align-items: center; gap: 5px; color: #E8EAED; font-size: 12px; cursor: pointer; user-select: none; }
.rec-orient input { width: 15px; height: 15px; margin: 0; cursor: pointer; }
.rec-orient-tip { color: #9AA0A6; }
/* 录制模式下隐藏编辑器本体（只留覆盖层），避免被一起录进去 */
body.is-recording > .topbar,
body.is-recording > .workspace { visibility: hidden; }

/* ---------- 当前群聊角色悬浮窗（预览区左上） ---------- */
.member-float {
  /* 位置与宽度不再自己管：它现在住在 .pv-left 里（见上方），
     由那一栏统一决定宽度与堆叠方式。 */
  display: flex; flex-direction: column;
  width: 100%; max-height: 100%; min-height: 0; flex: 0 1 auto;
  background: rgba(255, 255, 255, .94); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .12); overflow: hidden;
  backdrop-filter: blur(3px);
}
.mf-head {
  flex: 0 0 auto; display: flex; align-items: center; gap: 5px;
  padding: 6px 8px; border-bottom: 1px solid var(--line);
  font-size: 12px; color: var(--muted);
}
.mf-head svg { width: 14px; height: 14px; }
.mf-title { flex: 1 1 auto; }
.mf-head b { color: var(--accent); font-size: 12px; }
.mf-btn {
  flex: 0 0 auto; width: 20px; height: 20px; line-height: 1;
  border: 1px solid var(--line); border-radius: 6px; background: var(--panel);
  color: var(--muted); font-size: 12px; cursor: pointer; padding: 0; font-family: inherit;
}
.mf-btn:hover { border-color: var(--accent); color: var(--accent); }
.mf-list { flex: 1 1 auto; overflow-y: auto; padding: 4px; }
.member-float.is-collapsed .mf-list { display: none; }
.mf-item {
  display: flex; align-items: center; gap: 6px;
  padding: 3px 4px; border-radius: 6px; font-size: 12px;
}
.mf-item:hover { background: var(--bg); }
.mf-item[draggable="true"] { cursor: grab; }
.mf-item[draggable="true"]:active { cursor: grabbing; }
.mf-item img { width: 22px; height: 22px; border-radius: 50%; flex: 0 0 22px; object-fit: cover; }
.mf-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.mf-del {
  flex: 0 0 auto; width: 18px; height: 18px; line-height: 1; padding: 0;
  border: none; background: transparent; color: var(--muted);
  font-size: 12px; cursor: pointer; border-radius: 4px;
}
.mf-del:hover { color: var(--danger); background: rgba(216, 90, 48, .12); }
.mf-empty { padding: 8px; font-size: 12px; color: var(--muted); text-align: center; }