/* ─────────────────────────────────────────────────────────────────────────
 * 智合定制 Word 工具栏样式（配合 static/js/DocxToolbar.js）
 *
 * 规格取自 Figma 设计稿（Semi Design 令牌）：
 *   工具栏 h40 · gap8 · icon16 · 分隔线12 · 灰 hover（非蓝）· 按钮圆角6
 *   颜色：文本 #1C1F23 / 次级 62% / 三级 35% · 品牌 #0047BB · 边框 #E6E8EA
 *
 * 作用域：所有类名带 zt-/zv- 前缀，仅作用于本工具栏子树，不影响文档画布
 *（画布是微件内部独立 SECTION）。
 * ───────────────────────────────────────────────────────────────────────── */
.zt-toolbar-scope {
  --zt-tx1: #1C1F23;
  --zt-tx2: rgba(28, 31, 35, .62);
  --zt-tx3: rgba(28, 31, 35, .35);
  --zt-acc: #0047BB;
  --zt-hover: rgba(46, 49, 56, .05);
  --zt-active: rgba(46, 49, 56, .09);
  --zt-brd: #E6E8EA;
  --zt-sans: 'MiSans', 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --zt-shadow: 0 6px 24px rgba(28, 31, 35, .12), 0 2px 6px rgba(28, 31, 35, .08);
}

/* ═══ 工具栏行 ═══ */
.zt {
  display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 40px;
  background: #fff; border-bottom: 1px solid var(--zt-brd);
  flex-shrink: 0; overflow: hidden; white-space: nowrap;
  font-family: var(--zt-sans); color: var(--zt-tx1); box-sizing: border-box;
}
.zt * { box-sizing: border-box; }
.zt-div { width: 1px; height: 12px; background: var(--zt-brd); flex-shrink: 0; }
.zt-sp { flex: 1 1 auto; min-width: 8px; }

/* 可折叠工具组：只收缩不撑开，内容超出即裁切（由 JS 把裁掉的按钮收进 … 弹层） */
.zt-flow { display: flex; align-items: center; gap: 8px; flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; }
/* app 动作簇（AI 编辑 / 下载 / 保存）钉在最右、始终可见 */
.zt-app { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; margin-left: auto; }
/* … 溢出按钮：三点用实心 */
.zt-more { flex: 0 0 auto; }
.zt-more svg circle { fill: currentColor; stroke: none; }
/* 边缘分隔线视觉裁掉（收起后可能留在两侧，纯 CSS 隐藏、不动 DOM 便于还原） */
.zt-flow > .zt-div:last-child { display: none; }
.zt-overflow-pop > .zt-div:first-child { display: none; }

/* … 溢出弹层：body 级浮层，横向 wrap 承载被折叠的按钮（按钮元素本体，行为照旧） */
.zt-overflow-pop {
  position: fixed; z-index: 9998; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  max-width: min(560px, 92vw); padding: 8px 10px; background: #fff;
  border: 1px solid var(--zt-brd); border-radius: 10px; box-shadow: var(--zt-shadow);
  font-family: var(--zt-sans); color: var(--zt-tx1);
}
.zt-overflow-pop * { box-sizing: border-box; }
.zt-overflow-pop .zt-div { width: 1px; height: 16px; background: var(--zt-brd); flex-shrink: 0; }

.zt-b {
  display: inline-flex; align-items: center; justify-content: center; padding: 4px;
  border: 0; background: transparent; color: var(--zt-tx1); border-radius: 6px;
  cursor: pointer; flex-shrink: 0; transition: background .12s;
}
.zt-b:hover { background: var(--zt-hover); }
.zt-b.on { background: var(--zt-active); }
.zt-b:disabled { opacity: .4; cursor: default; }
.zt-b:disabled:hover { background: transparent; }
.zt-b svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* 上下文按钮（图片 / 表格）随选区切换成“图标 + 文字”形态：如选中图片→图片尺寸、
   光标在表格内→表格样式；否则回到纯图标的插入按钮。 */
.zt-b.zt-labelbtn.on { gap: 4px; padding: 2px 8px; }
.zt-b .zt-b-lbl { font-size: 14px; white-space: nowrap; }

.zt-sel {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 2px 2px 4px;
  border: 0; background: transparent; color: var(--zt-tx1); border-radius: 6px;
  cursor: pointer; font: inherit; font-size: 14px; flex-shrink: 0; transition: background .12s;
}
.zt-sel:hover { background: var(--zt-hover); }
.zt-sel .cv { width: 12px; height: 12px; stroke: var(--zt-tx3); fill: none; stroke-width: 2; }
.zt-sel.style { min-width: 64px; justify-content: space-between; }
.zt-sel.font { min-width: 56px; justify-content: space-between; }
.zt-sel.size { min-width: 56px; justify-content: space-between; }

/* 颜色按钮：图标(带当前色下划线) + 独立 ▾ */
.zt-b.color { gap: 4px; padding: 4px 2px 4px 4px; }
.zt-b.color .ci { position: relative; display: inline-flex; }
.zt-b.color .ci .bar { position: absolute; left: 1px; right: 1px; bottom: -1px; height: 3px; border-radius: 1px; }
.zt-b.color .cv { width: 12px; height: 12px; stroke: var(--zt-tx3); fill: none; stroke-width: 2; }

/* 文字+图标标签按钮（审阅 / 接受拒绝修订 / 批注 / AI 编辑） */
.zt-tab {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px;
  border: 0; background: transparent; color: var(--zt-tx1); border-radius: 6px;
  cursor: pointer; font: inherit; font-size: 14px; flex-shrink: 0; transition: background .12s;
}
.zt-tab:hover { background: var(--zt-hover); }
.zt-tab.on { background: var(--zt-active); }
.zt-tab svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* AI 编辑激活态：品牌蓝填充 */
.zt-tab.zt-ai.on { background: var(--zt-acc); color: #fff; }
.zt-tab.zt-ai.on svg { stroke: #fff; }

/* 审阅第二行 */
.zt-review { background: #fbfbfc; }
.zt-switch { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--zt-tx1); flex-shrink: 0; cursor: pointer; user-select: none; }
.zt-switch .track { width: 34px; height: 20px; border-radius: 10px; background: #c9cdd4; position: relative; transition: background .15s; flex-shrink: 0; }
.zt-switch .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.zt-switch.on .track { background: var(--zt-acc); }
.zt-switch.on .track::after { transform: translateX(14px); }

/* ═══ 底部视图栏 ═══ */
.zv {
  display: flex; align-items: center; gap: 16px; padding: 5px 14px;
  background: #fff; border-top: 1px solid var(--zt-brd); flex-shrink: 0;
  font-size: 12px; color: var(--zt-tx2); font-family: var(--zt-sans); box-sizing: border-box;
}
.zv .zv-fill { flex: 1; }
.zv .zv-msg { color: var(--zt-acc); }
.zv .zbtn {
  display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
  border: 0; background: transparent; color: var(--zt-tx2); border-radius: 5px; cursor: pointer; font-size: 15px;
}
.zv .zbtn:hover { background: var(--zt-hover); color: var(--zt-acc); }
.zv .zval { min-width: 44px; text-align: center; }

/* ═══ 弹出菜单（下拉 / 取色盘）═══ */
.zt-menu {
  position: fixed; z-index: 9999; background: #fff; border: 1px solid #E6E8EA; border-radius: 10px;
  box-shadow: 0 6px 24px rgba(28, 31, 35, .12), 0 2px 6px rgba(28, 31, 35, .08);
  padding: 6px; max-height: 340px; overflow: auto; min-width: 120px;
  font-family: 'MiSans', 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Microsoft YaHei', sans-serif;
}
.zt-menu .mi { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 6px; cursor: pointer; font-size: 13px; color: #1C1F23; white-space: nowrap; }
.zt-menu .mi:hover { background: rgba(46, 49, 56, .05); }
.zt-menu .mi.cur { color: #0047BB; font-weight: 600; }
.zt-menu .mi .ck { margin-left: auto; color: #0047BB; }
.zt-swatches { display: grid; grid-template-columns: repeat(8, 20px); gap: 6px; padding: 4px; }
.zt-swatch { width: 20px; height: 20px; border-radius: 4px; cursor: pointer; border: 1px solid rgba(0, 0, 0, .08); }
.zt-swatch:hover { transform: scale(1.12); box-shadow: 0 0 0 2px rgba(46, 49, 56, .05); }
.zt-swatch.none { position: relative; background: #fff; }
.zt-swatch.none::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top right, transparent 44%, #DB2828 45%, #DB2828 55%, transparent 56%); }

/* 菜单内小节标题（表格样式菜单：边框颜色 / 底纹） */
.zt-menu .zt-menu-sub { font-size: 11px; color: rgba(28, 31, 35, .45); padding: 8px 10px 3px; }
/* 自定义颜色行 */
.zt-custom-color { display: flex; align-items: center; gap: 6px; padding: 8px 10px 4px; }
.zt-custom-color .zt-cc-lbl { font-size: 12px; color: #4E5969; }
.zt-custom-color input[type="color"] { width: 26px; height: 24px; padding: 0; border: 1px solid #E6E8EA; border-radius: 4px; background: none; cursor: pointer; }
.zt-custom-color input[type="text"] { width: 78px; font-size: 12px; padding: 4px 6px; border: 1px solid #E6E8EA; border-radius: 5px; font-family: ui-monospace, Menlo, Consolas, monospace; }
.zt-custom-color button { font-size: 12px; padding: 4px 10px; border: 0; border-radius: 5px; background: #0047BB; color: #fff; cursor: pointer; }
/* ═══ 加载态：A4 纸骨架屏 ═══ */
.fp-docx-skel-wrap {
  flex: 1; min-height: 0; overflow: hidden; background: #F7F8FA;
  display: flex; flex-direction: column; align-items: center; padding: 32px 16px 0;
}
.fp-docx-skel-page {
  width: 100%; max-width: 720px; background: #fff; border: 1px solid #E6E8EA;
  border-radius: 2px; box-shadow: 0 2px 12px rgba(28, 31, 35, .06);
  padding: 56px 64px; box-sizing: border-box;
}
.fp-docx-skel-page .sk-line {
  height: 14px; border-radius: 4px; margin: 12px 0;
  background: linear-gradient(90deg, #EEF0F3 25%, #E3E6EA 37%, #EEF0F3 63%);
  background-size: 400% 100%; animation: fp-sk-shimmer 1.4s ease-in-out infinite;
}
.fp-docx-skel-page .sk-title { height: 24px; width: 55%; margin-bottom: 20px; }
.fp-docx-skel-page .sk-gap { height: 14px; }
.fp-docx-skel-page .sk-w40 { width: 40%; }
.fp-docx-skel-page .sk-w60 { width: 60%; }
.fp-docx-skel-page .sk-w70 { width: 70%; }
.fp-docx-skel-page .sk-w80 { width: 80%; }
.fp-docx-skel-page .sk-w90 { width: 90%; }
.fp-docx-skel-hint {
  margin-top: 18px; font-size: 12px; color: rgba(28, 31, 35, .45);
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'MiSans', 'PingFang SC', sans-serif;
}
@keyframes fp-sk-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }