/* ════════════════════════════════════════════════════════════════════
   v1 — Floating panels  ·  DESIGN.md §8.4.A
   ────────────────────────────────────────────────────────────────────
   Inspector and Measurements live inside #viewport as overlays.
   - Drag handle = the header (cursor: grab); JS clamps to viewport.
   - Pin button toggles `[data-pinned="true"]`; pinned panels survive
     deselect + Esc and only close via × or Clear UI.
   - Hidden when [hidden]; fade 120ms in/out (translateX 8 → 0 on enter).
   - Backdrop-filter blur so Canvas shows through faintly.
   - Z-index 1000+ stacks over canvas/CSS2D chips, below modals (3000).
   ════════════════════════════════════════════════════════════════════ */

.panel-floating {
  position: absolute;
  /* Default landing zone — bottom-right of viewport. JS overrides per
     §8.4.A "intelligent default" once it knows device screen position. */
  top: auto;
  right: 16px;
  bottom: 16px;
  left: auto;
  width: var(--float-w);
  max-width: min(var(--float-max-w), 40vw);
  max-height: var(--float-max-h);
  display: flex;
  flex-direction: column;
  background: var(--float-bg);
  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);
  border-radius: var(--float-radius);
  box-shadow: var(--float-shadow), var(--float-edge);
  z-index: 1000;
  color: var(--ink-1);
  overflow: hidden;
  /* UX-1 v2（用户反馈"窗口突兀弹出，菜单手感好"）：入场改成与菜单同机制 ——
     display:none → flex 时 CSS animation 自动重放（panel-pop），不再依赖
     JS 的 is-entering 类编排（时序脆、易被跳过）。幅度也加大一档：
     10px 上浮 + 3.5% scale + 全淡入，--dur-panel 200ms（面板比菜单大，略慢）。 */
  animation: panel-pop var(--dur-panel) var(--ease-out);
  /* 离场仍走 transition（leaveThenHide 的 .is-leaving 协议，已验证可靠）。 */
  transition:
    opacity var(--dur-exit) var(--ease-out),
    transform var(--dur-exit) var(--ease-out);
  /* Children re-enable pointer events; container default is pass-through
     when hidden so #viewport pointer events (raycaster) aren't blocked. */
}

@keyframes panel-pop {
  from { opacity: 0; transform: translateY(10px) scale(0.965); }
  to   { opacity: 1; transform: none; }
}

.panel-floating[hidden] {
  display: none !important;
}

/* UX-1 exit — fade + sink, shorter than entry (ui/motion.js leaveThenHide). */
.panel-floating.is-leaving {
  opacity: 0;
  transform: translateY(6px) scale(0.98);
  pointer-events: none;
  animation: none;   /* 离场期间不许入场动画残留 */
}

/* UX-3 — bottom-right resize grip (≥22px hit, two mono diagonal strokes).
   Hidden affordance until hover-darkened; double-click resets (JS). */
.panel-floating-resize {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 0 4px 4px 0;
  color: var(--ink-3);   /* v2 affordance ↑ ink-4→ink-3：resize grip 静止可辨（U10）*/
  cursor: nwse-resize;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  z-index: 2;
}
.panel-floating-resize:hover { color: var(--ink-1); }
/* Suspend enter/exit transitions while the pointer drives size (UX-3). */
.panel-floating.is-resizing {
  transition: none !important;
}

/* Pin visual — 1px outline + filled icon background. */
.panel-floating[data-pinned="true"] {
  outline: 1px solid var(--ink);
  outline-offset: -1px;
}

.panel-floating-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 36px;
  padding: 0 8px 0 12px;
  border-bottom: 1px solid var(--line-hard);   /* v2 affordance：面板页眉 = 唯一线索 → --line-hard(≥3:1)；旧 --line-soft 实测隐形（U11）*/
  cursor: grab;
  user-select: none;
  flex: 0 0 auto;
}

.panel-floating-header:active {
  cursor: grabbing;
}

.panel-floating-header.is-dragging {
  cursor: grabbing;
}

.panel-floating-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.panel-floating-eyebrow {
  font-family: var(--font-mono);   /* UX-10：eyebrow 统一 mono（§4.4 0.08em 不变） */
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.panel-floating-id {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}

.panel-floating-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
}

.panel-floating-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;   /* ↑ from 24 (DESIGN.md §8.1) */
  height: 32px;
  padding: 0;
  background: transparent;   /* user 2026-07-04：撤回静止淡底座（难看背景阴影），hover 再 fill */
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--ink-2);
  cursor: pointer;
  transition:
    background-color 80ms ease,
    border-color 80ms ease,
    color 80ms ease;
}

.panel-floating-btn:hover {
  background: var(--hover-bg);
  color: var(--ink);
  border-color: var(--hover-border);
}

.panel-floating-btn[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--surface);
}

.panel-floating-btn[aria-pressed="true"]:hover {
  background: var(--ink);
  color: var(--surface);
}

.panel-floating-btn.is-on {
  background: var(--sig-warn, #d97706);
  border-color: var(--sig-warn, #d97706);
  color: var(--surface);
}
.panel-floating-btn.is-on:hover {
  background: var(--sig-warn, #d97706);
  color: var(--surface);
}

.panel-floating-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  /* Body owns its scrolling so the header stays fixed. */
}

/* 锁定件只读（user V3「Lock 后双击也要出参数」）：面板照常显示参数，但 body 内一切可交互控件
   置只读 —— 锁定 = 不可改 / 不可移，仅查看。头部 Lock/Pin/Close 钮在 header（非 body）→ 仍可点，
   用户据 Lock 钮解锁。 */
.panel-floating.is-locked .panel-floating-body input,
.panel-floating.is-locked .panel-floating-body select,
.panel-floating.is-locked .panel-floating-body button,
.panel-floating.is-locked .panel-floating-body .ins-swap-menu {
  pointer-events: none;
  opacity: 0.55;
}

/* Inner legacy ins-* / m-* layout fixes since they no longer live inside
   the sidebar with its own flex column. Restore comfortable padding. */
.panel-floating .ins-top {
  padding: 0;
}

.panel-floating #ins-empty,
.panel-floating .ins-empty {
  padding: 24px 18px 28px;
}

.panel-floating .ins-readings {
  padding: 8px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}