/* ════════════════════════════════════════════════════════════════════
   v1 — Mini chip (CSS2DRenderer overlay)  ·  DESIGN.md §8.4.B
   ────────────────────────────────────────────────────────────────────
   Per-PM 22px pill anchored to device 3D position (top-center +12px up).
   Shows primary reading (`P · 4.83 W`). Click toggles the Measurements
   floating panel. JS adds [data-warn] / [data-error] / [data-selected]
   / [data-offscreen] attributes.
   ════════════════════════════════════════════════════════════════════ */

.css2d-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 100;
  /* CSS2DRenderer replaces innerHTML on first render; this empty div is
     a placeholder so the renderer can mount into a known location. */
}

/* ── Overhead chip skin（读数 chip + ⚙ 行动药丸共用，DESIGN §6.4 玻璃 / §8.4.B）──
   单一皮肤源 → 同器件上方的浮窗设计「同步」（user 2026-06-15）。瞬态玻璃档、墨字、
   1px 发丝边；被 .overhead-stack 的 align-items:stretch 撑等宽时内容居中。
   药丸不再用反主题实底（弃 §3.5 禁的钴蓝/反色），与读数 chip 视觉一致。 */
.overhead-chip {
  pointer-events: auto;
  box-sizing: border-box;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;              /* stretch 等宽后内容居中 */
  gap: 6px;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--glass-transient);   /* UX-10：chip = 瞬态玻璃档（0.72） */
  backdrop-filter: blur(var(--float-blur)) saturate(var(--float-sat));
  -webkit-backdrop-filter: blur(var(--float-blur)) saturate(var(--float-sat));
  border: 1px solid var(--line-1);
  box-shadow: var(--chip-shadow);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-1);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition:
    background-color var(--dur-micro) var(--ease-out),
    border-color var(--dur-micro) var(--ease-out),
    box-shadow var(--dur-exit) var(--ease-out),
    opacity var(--dur-exit) var(--ease-out),
    transform var(--dur-exit) var(--ease-out);
}

.overhead-chip:hover {
  background: var(--surface-1);
  border-color: var(--ink-3-v1);
  box-shadow: var(--chip-shadow-hover);   /* UX-10：顶缘高光边扫亮 */
}

/* ⚙ Assemble/Adjust 药丸：纯图标（2026-06-30 去文字），悬空件显示 Assemble，
   已装配件显示 Adjust。
   2026-07-06（user「装配按钮太不显眼，请改」→ 选「accent 色让它跳出，纯图标」）：撤掉旧的
   rest 0.55 淡出，改 **accent 青（--sig-select）描边 + 图标**（§3.3 功能色只着边/图标，不实底），
   rest 即满不透明 + 淡青底 wash → 从褪色读数 chip 里跳出、仍纯图标。hover 加深青底。 */
.overhead-chip.aa-pill {
  opacity: 1;
  padding: 0 2px;
  min-width: 22px;
  font-size: 13px;       /* 齿轮单字符稍放大保可点 */
  display: inline-flex;
  align-items: center;
  color: var(--sig-select, #0AA5C2);                    /* ⚙/☰ 图标 = accent 青（半钮 color:inherit）*/
  border-color: var(--sig-select, #0AA5C2);             /* accent 描边跳出 */
  background-color: color-mix(in srgb, var(--sig-select, #0AA5C2) 14%, var(--surface-1));
}
.overhead-chip.aa-pill:hover,
.overhead-chip.aa-pill:focus-within {
  opacity: 1;
  border-color: var(--sig-select, #0AA5C2);
  background-color: color-mix(in srgb, var(--sig-select, #0AA5C2) 24%, var(--surface-1));
}
.aa-pill-half {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 100%;
  padding: 0 5px;
  background: none; border: none; border-radius: 999px;
  font: inherit; color: inherit; cursor: pointer;
  transition: background-color 120ms ease;
}
.aa-pill-half:hover { background: var(--overlay-1); }
.aa-pill-half svg { display: block; }
.aa-pill-half[hidden] { display: none; }
.aa-pill-half + .aa-pill-half:not([hidden]) { border-left: 1px solid var(--line-1); border-radius: 0 999px 999px 0; }

/* 电子接线 hover 芯片（2026-07-06 user）：复用 overhead-chip 玻璃皮肤；SVG 图标钮
   ＋ Add cable / 👁 Hide·Show / 🗑 Delete。青色 accent 呼应 3D 电缆信号色（cable-view.js
   CABLE_CORE #36c5d6）；删除钮 hover 转危险红。base 半透（同 aa-pill），hover/focus 复实。 */
.overhead-chip.pn-cable-chip {
  padding: 0 3px;
  gap: 2px;
  min-width: 22px;
  opacity: 0.88;
}
.overhead-chip.pn-cable-chip:hover,
.overhead-chip.pn-cable-chip:focus-within { opacity: 1; }
.pn-cable-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 20px; padding: 0 5px;
  background: none; border: none; border-radius: 999px;
  color: var(--ink-1); cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}
.pn-cable-btn:hover { background: var(--overlay-1); color: var(--sig-select, #36c5d6); }
.pn-cable-btn[data-act="del"]:hover { color: var(--fault-bad, #e5484d); }
.pn-cable-btn + .pn-cable-btn { border-left: 1px solid var(--line-1); border-radius: 0; }
.pn-cable-btn svg { display: block; }

/* 连线态遮罩 + 合法目标光环（cable-targeting.js，2026-07-06 user）：进入连线态铺一层
   淡蓝 veil 盖住视口（点击穿透 → 相机/画布照常），只有合法目标器件上方的脉冲光环露在
   veil 之上供点选。veil 在器件之上、hover 芯片/dock 之下。 */
.pn-cable-veil {
  position: absolute; inset: 0; z-index: 20;
  background: rgba(90, 165, 210, 0.30);
  pointer-events: none;                 /* 穿透：画布 orbit / 点击器件照常 */
}
.pn-cable-veil[hidden] { display: none; }
.pn-cable-halos { position: absolute; inset: 0; z-index: 21; pointer-events: none; }
.pn-cable-halo {
  position: absolute; transform: translate(-50%, -50%);
  width: 46px; height: 46px; border-radius: 50%;
  border: 2px solid var(--sig-select, #36c5d6);
  background: rgba(54, 197, 214, 0.16);
  box-shadow: 0 0 14px rgba(54, 197, 214, 0.9), inset 0 0 8px rgba(54, 197, 214, 0.5);
  cursor: pointer; pointer-events: auto;
  animation: pn-cable-halo-pulse 1.2s ease-in-out infinite;
}
.pn-cable-halo:hover { background: rgba(54, 197, 214, 0.32); }
@keyframes pn-cable-halo-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1);    opacity: 0.95; }
  50%      { transform: translate(-50%, -50%) scale(1.18); opacity: 0.55; }
}

/* 顶部锁定气泡（DESIGN 锁定功能）：复用 overhead-chip 玻璃皮肤 + 黄色锁定修饰
   （--sig-warn 边/图标，DESIGN §3.3 功能色只着色小图标/边；label 仍用 --ink-1 保对比）。
   点击解锁。lock-indicator.js 对所有锁定件常驻挂这枚 chip。
   user 2026-06-30：透明度对齐 ⚙ 齿轮药丸（base 0.55，hover/focus → 1）—— 锁定 chip
   和齿轮 chip 都是"控制类"提示，让信息层（测量读数）视觉优先级最高。 */
.overhead-chip.overhead-lock {
  color: var(--ink-1);
  border-color: var(--sig-warn);
  opacity: 0.55;
}
.overhead-chip.overhead-lock svg { color: var(--sig-warn); }
.overhead-chip.overhead-lock:hover,
.overhead-chip.overhead-lock:focus-visible {
  border-color: var(--sig-warn);
  opacity: 1;
}

/* 选中态不高亮读数 chip（user 2026-06-15：选中测量器件后读数窗高亮不需要）——
   data-selected 规则已移除；仅保留 warn/error 告警边色。 */
.chip-measurement[data-warn="true"] {
  border-color: var(--sig-warn);
}

.chip-measurement[data-error="true"] {
  border-color: var(--sig-error);
}

.chip-measurement[data-offscreen="true"] {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}

/* user 2026-06-30：chip 去掉 "P · " 前缀，仅留 .chip-measurement-value；
   .chip-measurement-key / .chip-measurement-sep 旧规则已废。 */
.chip-measurement-value {
  color: var(--ink);
  font-weight: 500;
}

/* Overhead composer: one bubble group per device. The stack keeps the projected
   anchor; the group owns BOM identity plus READOUT/ACTION/CABLE/LOCK zones. */
.overhead-stack {
  display: block;
}

.overhead-bubble-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  pointer-events: none;
}

.overhead-bom-badge {
  display: inline-flex;
  justify-content: center;
  pointer-events: none;
}

.overhead-bom-badge > .balloon-badge {
  align-self: center;
}

.overhead-function-bubble {
  --overhead-zone-size: 24px;
  --overhead-readout-width: 52px;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  overflow: hidden;
  pointer-events: auto;
  border-radius: 999px;
  background: color-mix(in srgb, var(--glass-transient) 82%, transparent);
  backdrop-filter: blur(var(--float-blur)) saturate(var(--float-sat));
  -webkit-backdrop-filter: blur(var(--float-blur)) saturate(var(--float-sat));
  border: 1px solid color-mix(in srgb, var(--line-1) 70%, transparent);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.20);
}

.overhead-function-bubble[data-layout="4"] {
  display: grid;
  grid-template-columns: var(--overhead-readout-width) var(--overhead-zone-size);
  grid-auto-rows: var(--overhead-zone-size);
  border-radius: 6px;
}

.overhead-function-bubble[data-level="secondary"] {
  overflow: visible;
}

.overhead-function-zone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--overhead-zone-size);
  min-height: var(--overhead-zone-size);
  pointer-events: auto;
}

.overhead-function-bubble[data-layout="1"] .overhead-function-zone {
  min-width: 42px;
}

.overhead-zone-readout,
.overhead-zone-action,
.overhead-zone-cable,
.overhead-zone-lock {
  min-width: 0;
}

.overhead-zone-readout {
  min-width: var(--overhead-readout-width);
}

.overhead-function-bubble:not([data-layout="4"]) .overhead-function-zone + .overhead-function-zone {
  border-left: 1px solid var(--line-1);
}

.overhead-function-bubble[data-layout="4"] .overhead-function-zone:nth-child(odd) {
  border-right: 1px solid var(--line-1);
}

.overhead-function-bubble[data-layout="4"] .overhead-function-zone:nth-child(-n+2) {
  border-bottom: 1px solid var(--line-1);
}

.overhead-function-zone > * {
  pointer-events: auto;
}

.overhead-function-zone > .overhead-chip,
.overhead-function-zone > .aa-pill,
.overhead-function-zone > .pn-cable-chip,
.overhead-lock-button {
  height: var(--overhead-zone-size);
  min-width: var(--overhead-zone-size);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.overhead-zone-readout > .chip-measurement {
  min-width: var(--overhead-readout-width);
  padding: 0 6px;
}

.overhead-lock-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--sig-warn);
  cursor: pointer;
}

.overhead-function-zone:hover,
.overhead-function-zone:focus-within,
.pn-cable-btn:hover,
.pn-cable-btn:focus-visible,
.aa-pill-half:hover,
.overhead-lock-button:hover,
.overhead-lock-button:focus-visible {
  background: var(--overlay-1);
}

.overhead-function-zone.is-secondary {
  display: contents;
}

.overhead-zone-cable > .pn-cable-chip[data-overhead-level="secondary"] {
  display: contents;
}

.overhead-function-bubble[data-level="secondary"] .pn-cable-btn {
  width: var(--overhead-zone-size);
  height: var(--overhead-zone-size);
  min-width: var(--overhead-zone-size);
  padding: 0;
  border-radius: 0;
  border-left: 1px solid var(--line-1);
}

.overhead-function-bubble[data-level="secondary"] .pn-cable-btn:first-child {
  border-left: 0;
}

.overhead-function-bubble[data-level="secondary"] .pn-cable-back {
  margin-left: 4px;
  border-left: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--glass-transient) 82%, transparent);
  border: 1px solid color-mix(in srgb, var(--line-1) 70%, transparent);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.20);
}

.pn-cable-btn[data-act="del"]:hover,
.pn-cable-btn[data-act="del"]:focus-visible {
  color: var(--fault-bad, #e5484d);
}