/* ──────────────────────────────────────────────────────────
 * widgets.css · 通用工具控制面板 widget 库共用样式
 * P2+ 阶段 2 · 不依赖 base-design.css 内部规则，仅引用 CSS 变量
 *
 * 命名空间：.cas-w-* （cas widget），避免与 tool-render-to-3view.html
 * 里 page-level 的 .option-group/.opt 冲突
 * ────────────────────────────────────────────────────────── */

/* ── 字段壳子 ─────────────────────────────────────────── */
/* 对齐 base §32 .cas-tool-field-label：11px / 400 / text-muted（老 3view 工具页规范） */
.cas-w-field {
  display: flex; flex-direction: column; gap: 8px;
  font-size: 11px;
}
/* 行组：同一 row_group 的字段并排一行（如「参考视频 + 参考音频」），每格等宽 */
.cas-w-fieldrow {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.cas-w-fieldrow > * { flex: 1 1 0; min-width: 0; }
/* base §18.5 .cas-select-wrap 默认 inline-block；在工具页 field 内 / 归档目标行内
   强制块级 + 100% 宽，让 select trigger 撑满整行（对齐老 .model-trigger） */
.cas-w-field .cas-select-wrap,
.tw-archive-row .cas-select-wrap,
.tw-archive-target .cas-select-wrap { display: block; width: 100%; }

/* 工具页 select trigger 外观：背景/边框/圆角对齐老 .model-trigger。
   高度/字号/内边距由 base-design.css §18.5 统一（32px / 13px / 10px）。 */
.cas-w-field .cas-select-trigger,
.tw-archive-row .cas-select-trigger,
.tw-archive-target .cas-select-trigger {
  background: var(--cas-bg-tag);
  border: 1px solid var(--cas-border-mid);
  border-radius: var(--cas-radius-md);
}

/* 有值时（option:checked 不是空 value）trigger 加品牌色边框 + 浅品牌底（对齐老 .model-trigger.selected） */
.cas-w-field .cas-select-wrap:has(select.cas-select-native option:checked:not([value=""])) > .cas-select-trigger,
.tw-archive-row .cas-select-wrap:has(select.cas-select-native option:checked:not([value=""])) > .cas-select-trigger,
.tw-archive-target .cas-select-wrap:has(select.cas-select-native option:checked:not([value=""])) > .cas-select-trigger {
  border-color: var(--cas-accent);
  background: var(--cas-accent-soft);
}
.cas-w-field-label {
  font-size: 11px;
  color: var(--cas-text-muted);
  font-weight: 400;
}
.cas-w-field-label .cas-w-req {
  color: var(--cas-accent);    /* 必填星号 = 品牌色，不再用红色 danger */
  margin-left: 2px;
}
/* 字段 label 右侧动态副标签（form-renderer 用，如"生成精度"旁边的"2880×2880"） */
.cas-w-field-label .cas-w-field-aside {
  margin-left: 8px;
  font-size: 10px;
  color: var(--cas-text-muted);
  font-weight: 400;
}
.cas-w-field-help {
  color: var(--cas-text-muted);
  font-size: 11px;
}
.cas-w-field-error {
  color: var(--cas-danger);
  font-size: 11px;
}
.cas-w-field.disabled { opacity: .55; pointer-events: none; }
.cas-w-field.hidden { display: none; }

/* ── chip-single / chip-multi 共用（沿用老 3view .opt 视觉规范） ──
   关键：flex:1 让一行 N 个 chip 均分整行（视觉对齐感强），小圆角而非胶囊形 */
.cas-w-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.cas-w-chip {
  flex: 1;
  height: 32px; padding: 0 13px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--cas-border, rgba(0,0,0,.07));
  border-radius: var(--cas-radius-sm, 4px);
  background: var(--cas-bg-tag);
  color: var(--cas-text-secondary);
  cursor: pointer; user-select: none;
  font-size: 11px; line-height: 1.4;
  text-align: center; white-space: nowrap;
  transition: all 0.18s;
}
.cas-w-chip:hover {
  border-color: var(--cas-border-mid, rgba(0,0,0,.16));
  color: var(--cas-text-primary);
}
.cas-w-chip.active {
  /* 对齐老 .opt.active：半透明品牌色软底 + 白色文字（cas-text-primary 在 dark
     theme 下解析为白）*/
  border-color: var(--cas-accent, #E8A140);
  background: var(--cas-accent-soft, rgba(232,161,64,.08));
  color: var(--cas-text-primary);
}
.cas-w-chip.disabled {
  opacity: .45; cursor: not-allowed; pointer-events: none;
}

/* ── pill 变体（不平分整行，按内容宽度排列，适合长选项） ──── */
.cas-w-chips--pill { gap: 4px; }
.cas-w-chip--pill {
  flex: 0 0 auto;
  padding: 3px 12px;
  font-size: 11px;
  line-height: 1.4;
  border-radius: 999px;
}

/* ── aspect-ratio 变体（chip 内嵌示意小矩形 + 下方文字，对齐老 .ratio-pill） ──
   设计目标：任意数量 chip 都放在一行；控制面板宽度（tool-workspace.css
   .tw-control-panel）按 8 个 aspect chip 单行所需宽度反推。当前 400px 面板
   ÷ 8 chip ≈ 42px/chip，刚好容纳 min-content（rbox 28 + padding 12 ≈ 40）。 */
.cas-w-chips--aspect { gap: 6px; flex-wrap: nowrap; }
.cas-w-chip--aspect {
  flex: 1;
  min-width: 0;       /* 允许 flex 在窄容器下继续收缩，不被 min-content 锁住 */
  height: auto;       /* 特殊情况：aspect chip 纵向 rbox+label，按内容撑高，覆盖 .cas-w-chip 默认 32px */
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px;
  padding: 8px 6px;
  border-radius: var(--cas-radius-sm);
}
.cas-w-chip-rbox {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cas-w-chip-rrect {
  background: var(--cas-text-muted);
  border-radius: 2px;
  transition: background 0.18s;
}
.cas-w-chip--aspect.active .cas-w-chip-rrect { background: var(--cas-text-primary); }
.cas-w-chip-rlabel {
  font-size: 11px;
  color: var(--cas-text-secondary);
  transition: color 0.18s;
  white-space: nowrap;
}
.cas-w-chip--aspect.active .cas-w-chip-rlabel { color: var(--cas-text-primary); }

/* dark theme override：page 已有 .theme-dark 时自动适配 */
.theme-dark .cas-w-chip {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.10);
  color: #d4d4d6;
}
.theme-dark .cas-w-chip:hover { border-color: rgba(255,255,255,.20); }
/* 选中态：半透明品牌色软底 + 白色文字（cas-text-primary 在 dark 下=白）。
   对齐老 3view .opt.active 视觉规范 —— 半透明而非实色，文字是白色而非品牌色 */
.theme-dark .cas-w-chip.active {
  background: rgba(232,161,64,.18);
  border-color: var(--cas-accent, #E8A140);
  color: var(--cas-text-primary);
}

/* ── select / textarea / text(单行) / number 输入 ────────────────── */
.cas-w-input,
.cas-w-text,
.cas-w-textarea,
.cas-w-select {
  width: 100%;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--cas-border, rgba(0,0,0,.07));
  border-radius: var(--cas-radius-sm, 6px);
  background: var(--cas-bg-white, #fff);
  color: var(--cas-text-primary, #1a1a1a);
  font-size: 11px;        /* 跟 chip / input / label 全页统一 */
  font-family: inherit;
  outline: none;
  box-sizing: border-box;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.cas-w-input:hover,
.cas-w-text:hover,
.cas-w-textarea:hover,
.cas-w-select:hover { border-color: var(--cas-border-hover, rgba(0,0,0,.16)); }
.cas-w-input:focus,
.cas-w-text:focus,
.cas-w-textarea:focus,
.cas-w-select:focus {
  border-color: var(--cas-accent, #E8A140);
  box-shadow: 0 0 0 3px var(--cas-accent-soft, rgba(232,161,64,.08));
}
/* textarea 多行：覆盖上面统一的 height:32 */
.cas-w-textarea { height: auto; resize: vertical; min-height: 80px; padding: 8px 12px; line-height: 1.5; }
.theme-dark .cas-w-input,
.theme-dark .cas-w-text,
.theme-dark .cas-w-textarea,
.theme-dark .cas-w-select {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.10);
  color: #e4e4e6;
}
.theme-dark .cas-w-select option { background: #23272e; color: #e4e4e6; }

/* #fr-formbox 内的 cas-select 高度/字号已由 base §18.5 .cas-w-field 规则覆盖，无需重复 */

/* number 自带的 spinner 隐藏（保持自定义视觉） */
.cas-w-input[type="number"]::-webkit-outer-spin-button,
.cas-w-input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.cas-w-input[type="number"] { -moz-appearance: textfield; }

/* ── image-upload（1:1 沿用老 3view .upload-area 视觉规范） ─────── */
.cas-w-upload {
  display: flex; flex-direction: column; gap: 8px;
  outline: none;
}
.cas-w-upload:focus,
.cas-w-upload:focus-within { outline: none; }
.cas-w-upload-drop {
  background: var(--cas-bg-tag);
  border: 1.5px dashed rgba(255,255,255,0.10);
  border-radius: var(--cas-radius-lg);
  /* 空态 / 有图态 高度全锁定 140px：不因上传图片大小变化 */
  height: 140px;
  min-height: 140px;
  max-height: 140px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  cursor: pointer;
  transition: all 0.18s;
  padding: 22px 14px;
  font-size: 11px;
  color: var(--cas-text-muted);
  text-align: center;
}
.cas-w-upload-drop:hover {
  border-color: var(--cas-accent);
  background: var(--cas-accent-soft);
  color: var(--cas-accent);
}
.cas-w-upload-drop.dragging {
  border-color: var(--cas-accent);
  background: var(--cas-accent-soft);
  color: var(--cas-accent);
}
/* 图标层（对齐老 .upload-ico）+ 提示文字层（对齐老 .upload-hint） */
.cas-w-upload-ico {
  color: var(--cas-text-muted);
  transition: color 0.18s;
}
.cas-w-upload-drop:hover .cas-w-upload-ico,
.cas-w-upload-drop.dragging .cas-w-upload-ico { color: var(--cas-accent); }
.cas-w-upload-hint {
  font-size: 11px;
  color: var(--cas-text-muted);
  text-align: center;
  line-height: 1.55;
}
.cas-w-upload-drop.paste-hit {
  animation: cas-w-paste-flash .3s ease;
}
@keyframes cas-w-paste-flash {
  0%   { border-color: var(--cas-accent); background: var(--cas-accent-soft); }
  100% { border-color: var(--cas-border-mid, rgba(0,0,0,.10)); background: var(--cas-bg-sub-l3, #fbfbf9); }
}
/* 预览区：CSS Grid 自适应宫格 —— 一行最多 3 张，超过 3 张自动换行。
   - 列数由 JS 设 grid-template-columns: repeat(min(count,3), 1fr) 控制
   - 可见行数由 JS 设 grid-template-rows: repeat(min(ceil(count/3),2), 1fr)
   - 第 3 行起走 grid-auto-rows: calc((100% - 6px) / 2)，跟可见行同高
   - overflow-y: auto 让 >6 张时出现滚动条（drop 高度保持 140 不变）
   - 1 张全宽 / 2 张半宽 / 3 张三等分（单行）；4-6 张 → 2 行；7+ 张 → 滚动
*/
.cas-w-upload-preview {
  display: grid;
  grid-auto-rows: calc((100% - 6px) / 2);    /* 第 3+ 行的高度 = 跟可见 2 行一致 */
  justify-items: stretch;
  align-items: stretch;
  gap: 6px;
  width: 100%; height: 100%;
  overflow-y: auto;                           /* 超 6 张才会真出现滚动条 */
}
.cas-w-upload-preview:empty { display: none; }

/* 有图时：锁高度 = 空态 min-height + 上下 padding；padding 收紧；边框品牌色 */
.cas-w-upload-drop.has-files,
.cas-w-upload-drop.has-files:hover {
  padding: 6px;
  height: 140px;                             /* 96 min-height + 22*2 padding ≈ 140 */
  min-height: 140px;
  max-height: 140px;
  border-color: var(--cas-accent) !important;
  background: var(--cas-accent-soft);
  cursor: default;
}
/* tile：填满 grid 单元格，contain 保图片比例 */
.cas-w-upload-drop.has-files .cas-w-upload-tile {
  width: 100%; height: 100%;
  aspect-ratio: auto;
}
.cas-w-upload-drop.has-files .cas-w-upload-tile img {
  width: 100%; height: 100%;
  object-fit: contain;
}
.cas-w-upload-tile {
  position: relative;
  width: 100%; aspect-ratio: 1/1;
  border-radius: var(--cas-radius-sm, 6px);
  overflow: hidden;
  background: var(--cas-bg-tag, #f0f0ec);
  border: 1px solid var(--cas-border, rgba(0,0,0,.07));
}
.cas-w-upload-tile img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.cas-w-upload-tile-rm {
  position: absolute; top: 4px; right: 4px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(0,0,0,.5);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 14px; line-height: 1;
  border: none;
}
.cas-w-upload-tile-rm:hover { background: var(--cas-danger, #d94f4f); }
.theme-dark .cas-w-upload-drop {
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.10);
  color: #b0b0b0;
}

/* ── image-crop (P3 follow-up) ──────────────────────── */
.cas-w-imgcrop {
  display: flex; flex-direction: column; gap: 6px;
}
.cas-w-imgcrop-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: var(--cas-bg-tag, #f0f0ec);
  border: 1px solid var(--cas-border, rgba(0,0,0,.07));
  border-radius: var(--cas-radius-sm, 6px);
  overflow: hidden;
  user-select: none;
}
.cas-w-imgcrop-placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--cas-text-muted);
  font-size: 11px;
  text-align: center;
  padding: 12px;
}
.cas-w-imgcrop-img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
}
.cas-w-imgcrop-overlay {
  position: absolute;
  border: 2px solid var(--cas-accent, #E8A140);
  background: rgba(232, 161, 64, 0.18);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.32);
  cursor: move;
  box-sizing: border-box;
  opacity: 0.7;       /* 整框 + 边 + 4 角点统一 70% 不透明度 */
}
.cas-w-imgcrop-handle {
  position: absolute;
  width: 12px; height: 12px;
  background: #fff;
  border: 1.5px solid var(--cas-accent, #E8A140);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.cas-w-imgcrop-handle.handle-nw { top: -7px; left: -7px; cursor: nwse-resize; }
.cas-w-imgcrop-handle.handle-ne { top: -7px; right: -7px; cursor: nesw-resize; }
.cas-w-imgcrop-handle.handle-sw { bottom: -7px; left: -7px; cursor: nesw-resize; }
.cas-w-imgcrop-handle.handle-se { bottom: -7px; right: -7px; cursor: nwse-resize; }
.cas-w-imgcrop-readout {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  color: var(--cas-text-muted);
  padding: 2px 4px;
}
.theme-dark .cas-w-imgcrop-stage {
  background: rgba(0, 0, 0, 0.35);
  border-color: rgba(255, 255, 255, 0.08);
}