/*!
 * web/assets/css/index/72-feedback.css —— 全站悬浮反馈入口与提交面板（任务 #416 / #417）
 *
 * 层级契约（tools/check_zindex_tiers.py A1）：悬浮按钮是**页面级常驻 chrome**，
 * 必须待在弹层之下（<2000），这里钉 1950 —— 写 2003..49999 会被门禁判红，
 * 因为弹层基准由 core/52-ep-shims.js 的 _nextZ() 单调递增，写死的数字迟早被越过；
 * 1950 同时压过 .gp-offbar(1900) 与手机页签(99)，见 .fb-fab 里那条对照。
 * 面板本体走 el-dialog（由递增计数器管层级，这里不参与）。
 * 颜色一律带浅色兜底：变量没定义时界面不能变成白字白底（D1/D2 档）。
 */
.fb-fab {
  position: fixed;
  /* 档位契约（tools/check_zindex_tiers.py A1）：页面级常驻 chrome 必须 <2000。
     1950 这个数不是随手挑的：要**高于** .mobile-tab(99) / .ord-detail-bottom(60) / .pick-bar(10)，
     也要高于 .gp-offbar(1900) —— 离线提示条与按钮同档时，谁在后面谁盖住谁，
     表现就是"断网那几分钟右下角没有反馈按钮"；又要**低于** 2000 起的弹层档（面板必须在按钮之上）。 */
  z-index: 1950;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0 14px;
  border: 1px solid var(--bd, #dcdfe6);
  border-radius: 999px;
  /* 面色用卡片色 --cd 而不是页面底色 --bg：底色等于背景时，按钮就只是"屏幕上少一块"，
     暗黑档（--bg:#000 / --cd:#1C1C1E）与浅色档（--bg:#F2F2F7 / --cd:#FFF）两套都自证看得见。
     文字走 --pci（墨色主色），品牌色 --pc 只做描边/焦点，不当墨水用（§112.3、#364）。 */
  background: var(--cd, #fff);
  color: var(--pci, #303133);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .14);
  font-size: 14px;
  line-height: 1;
  cursor: grab;
  user-select: none;
  touch-action: none;      /* 拖动手势不能被浏览器当成滚动 */
}
:root.dark .fb-fab { border-color: var(--bd); box-shadow: 0 4px 14px rgba(0, 0, 0, .55); }
.fb-fab:active { cursor: grabbing; }
.fb-fab:focus-visible { outline: 2px solid var(--pci, #409eff); outline-offset: 2px; }
.fb-fab__t { white-space: nowrap; }
/* 异步壳没拿到真组件时的兜底位（#423）：占同一颗按钮的位置、同一套尺寸，
   点它 = 刷新；不许让"入口没装载"退化成界面上安静地少一颗按钮。 */
.fb-fab--dead { cursor: pointer; border-style: dashed; opacity: 1; text-decoration: none; }
.fb-fab__dot {
  min-width: 18px;
  height: 18px;
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--el-color-danger, #f56c6c);
  color: #fff;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
}

.fb-panel { display: flex; flex-direction: column; gap: 10px; }
.fb-page { color: var(--text-sub, #909399); font-size: 12px; word-break: break-all; }
.fb-ta {
  width: 100%;
  min-height: 108px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid var(--bd, #dcdfe6);
  border-radius: 8px;
  background: var(--bg, #fafafa);
  color: var(--pci, #303133);
  font-size: 15px;
  line-height: 1.5;
  resize: vertical;
}
.fb-ta:focus { outline: 2px solid var(--el-color-primary, #409eff); outline-offset: 1px; }
.fb-count { align-self: flex-end; color: var(--text-sub, #909399); font-size: 12px; }
.fb-imgs { display: flex; flex-wrap: wrap; gap: 10px; }
.fb-thumb { position: relative; width: 88px; height: 88px; border-radius: 8px; overflow: hidden; border: 1px solid var(--bd, #dcdfe6); }
.fb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fb-thumb__badge {
  position: absolute; left: 4px; top: 4px;
  padding: 1px 6px; border-radius: 6px;
  background: rgba(0, 0, 0, .58); color: #fff; font-size: 11px;
}
/* 缩略图操作带（#438）：底部整条 44px，两颗图标按钮各占一半 ——
   44px 是全站触摸下限（$tap-min=92rpx 那一档的 web 对应值），
   旧的 30×30 角标既不够大、又装不下六语种的整句文字（竖排盖满缩略图）。
   不做 hover 才出现：触屏没有 hover，藏起来等于没有（#327/#331 同一条教训）。 */
.fb-thumb__acts { position: absolute; left: 0; right: 0; bottom: 0; display: flex; }
.fb-thumb__act {
  flex: 1 1 0;
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-top: 1px solid rgba(255, 255, 255, .22);
  background: rgba(0, 0, 0, .55); color: #fff;
  font-size: 18px; line-height: 1; cursor: pointer; padding: 0;
}
.fb-thumb__act + .fb-thumb__act { border-left: 1px solid rgba(255, 255, 255, .22); }
.fb-thumb__act:active { background: rgba(0, 0, 0, .72); }
.fb-add {
  width: 88px; height: 88px;
  border: 1px dashed var(--bd, #dcdfe6); border-radius: 8px;
  background: var(--bg, #fafafa); color: var(--text-sub, #909399);
  font-size: 13px; cursor: pointer;
}
.fb-add:hover { color: var(--el-color-primary, #409eff); border-color: var(--el-color-primary, #409eff); }
.fb-acts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fb-link { border: none; background: none; color: var(--el-color-primary, #409eff); font-size: 14px; cursor: pointer; min-height: 44px; }
.fb-err { margin: 0; color: var(--el-color-danger, #f56c6c); font-size: 13px; }
.fb-hint { margin: 0; color: var(--text-sub, #909399); font-size: 12px; }

/* 图片标注编辑器（fb-mark-editor.js）：舞台用 aspect-ratio 而不是固定宽度（#296 内联宽度棘轮） */
.fb-edit { display: flex; flex-direction: column; gap: 10px; }
/* #424：与遮罩编辑器同一条把手（宽度可拖 + 44px 命中区），预览出的是标注合成后的真图 */
.fb-edit__pvbox { margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fb-edit__pvlbl { font-size: 12px; color: var(--ts); }
.fb-edit__pv { max-width: 220px; max-height: 150px; border: 1px solid var(--bd); border-radius: 6px; }
.fb-edit__stage {
  position: relative;
  width: 100%;
  max-height: 58vh;
  overflow: auto;
  background: var(--bg, #f5f7fa);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fb-edit__img { max-width: 100%; max-height: 58vh; display: block; user-select: none; }
.fb-edit__view { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.fb-edit__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.fb-edit__tools { display: flex; gap: 6px; }
.fb-edit__tool {
  min-height: 44px; min-width: 56px;
  padding: 0 10px;
  border: 1px solid var(--bd, #dcdfe6); border-radius: 8px;
  background: var(--bg, #fff); color: var(--pci, #303133); font-size: 14px; cursor: pointer;
}
.fb-edit__tool.is-on { border-color: var(--el-color-primary, #409eff); color: var(--el-color-primary, #409eff); font-weight: 600; }
.fb-edit__txtin {
  flex: 1 1 140px; min-width: 120px; max-width: 220px;
  min-height: 44px; padding: 0 10px;
  border: 1px solid var(--bd, #dcdfe6); border-radius: 8px;
  background: var(--bg, #fafafa); color: var(--pci, #303133); font-size: 14px;
}
.fb-edit__colors { display: flex; gap: 6px; }
.fb-edit__sw {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid var(--bd, #dcdfe6); cursor: pointer; padding: 0;
}
.fb-edit__sw.is-on { border-color: var(--el-color-primary, #409eff); box-shadow: 0 0 0 2px rgba(64, 158, 255, .3); }
.fb-edit__lab { color: var(--text-sub, #909399); font-size: 13px; }
.fb-edit__hint, .fb-edit__err { margin: 0; font-size: 12px; }
.fb-edit__hint { color: var(--text-sub, #909399); }
.fb-edit__err { color: var(--el-color-danger, #f56c6c); }

@media (max-width: 640px) {
  /* 窄屏：工具条换行后仍要每颗 ≥44px，缩略图按比例排满整行。
     宽度不能小于 88px —— 底部操作带是两颗 min-width:44px 的图标按钮，
     76px 的缩略图装不下（会被 overflow:hidden 裁掉半颗删除键，又变成"点了没反应"）。 */
  .fb-edit__bar { gap: 8px; }
  .fb-edit__txtin { max-width: none; flex-basis: 100%; }
  .fb-thumb, .fb-add { width: 96px; height: 96px; }
}

/* ============ #419 提交回执：溯源码就地显示 + 复制 ============
   只用语义变量 + 兜底字面量（D1 判据不许引用未定义 token），文字色不用主色当墨水（#364）。 */
.fb-done { padding: 4px 0 2px; }
.fb-done__t { margin: 0; color: var(--pci, #303133); font-size: 15px; font-weight: 600; line-height: 1.6; }
.fb-done__c { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin: 10px 0 0; }
.fb-done__lab { flex: 0 0 auto; color: var(--text-sub, #909399); font-size: 12px; }
.fb-done__v {
  flex: 1 1 auto; min-width: 0; padding: 6px 10px; border: 1px solid var(--bd, #dcdfe6); border-radius: 8px;
  background: var(--bg, #fff); color: var(--pci, #303133);
  font-size: 13px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  overflow-wrap: anywhere;
}
.fb-done__tip { margin: 8px 0 0; color: var(--text-sub, #909399); font-size: 12px; line-height: 1.7; }

/* #563 框选截图那一层从 pages/feedback.css 搬进来：本表由 index.html 静态引入，
   每一页都载 —— <feedback-fab> 挂在壳层上，样式跟着它走才叫每一页都能框。
   整屏盖层四件套一个都不能少：fixed+inset:0 才盖得住、z-index 才压得过页面里的弹层计数、
   touch-action:none 才不会被触摸滚动抢走这一下（§42.3 同一条）。 */
.fb-region { position: fixed; inset: 0; z-index: calc(var(--gp-ztop,2000) + 60) !important;
  cursor: crosshair; touch-action: none; background: rgba(0,0,0,.06); outline: 0; }
.fb-region__tip { position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  padding: 8px 14px; border-radius: 999px; background: rgba(0,0,0,.72); color: #fff; font-size: 13px; line-height: 1.4; }
.fb-region__box { position: absolute; border: 2px solid var(--pci, #1677ff);
  background: rgba(22,119,255,.12); box-sizing: border-box; pointer-events: none; min-width: 0; min-height: 0; }