/* 三张素材共享 2880 × 1600 画布，按原始坐标叠放。 */
* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: #f8f9ff;
}

.workbench {
  position: relative;
  width: 100%;
  aspect-ratio: 2880 / 1600;
  overflow: hidden;
  isolation: isolate;
}

.layer {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  user-select: none;
  pointer-events: none;
}

.layer-base {
  z-index: 0;
}

.layer-character {
  z-index: 1;
}

/* 面板顶部带透明像素，补白底，避免人物透过页签区域。 */
.workbench::after {
  content: "";
  position: absolute;
  left: 65.555556%;
  top: 31.375%;
  width: 33.611111%;
  height: 67.125%;
  border-radius: 0.833333vw;
  background: white;
  z-index: 2;
  pointer-events: none;
}

/* 待办面板位于数字人前面，遮住人物下半身。 */
.layer-tasks {
  z-index: 3;
}


/* 序列帧共用固定裁切区域，避免逐帧定位引起人物抖动。
   按原静态人物的可见高度与中心位置对齐，随页面等比缩放。 */
.character-animation {
  position: absolute;
  left: 80.776089%;
  top: -0.459797%;
  width: 24.364114%;
  height: 65.839189%;
  z-index: 1;
  pointer-events: none;
}

[hidden] {
  display: none !important;
}


/* 热区固定在人物可见上半身，动作摆动不会反复触发移入。 */
.character-hotspot {
  position: absolute;
  left: 88.752065%;
  top: 10.8125%;
  width: 9.471471%;
  height: 20.5625%;
  z-index: 4;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 6px;
}

.character-hotspot:disabled { cursor: default; }
.character-hotspot:focus-visible {
  outline: 2px solid #8959ff;
  outline-offset: -2px;
}

.hover-controls {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 10;
  padding: 7px;
  border: 1px solid #e7e1f5;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 4px 20px #35224f12;
  font: 12px/1.5 -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  color: #777080;
}

.character-selectors { display: flex; align-items: center; gap: 12px; }
.character-field { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.character-field > span { color: #5e5669; font-weight: 500; }
.character-field select {
  min-width: 70px;
  min-height: 30px;
  padding: 4px 7px;
  border: 1px solid #e7e1f5;
  border-radius: 6px;
  background: #fff;
  color: #5e5669;
  cursor: pointer;
  font: inherit;
}
.character-field select:hover { border-color: #c6b3ed; }
.character-field select:focus-visible { outline: 2px solid #8959ff; outline-offset: 1px; }
.character-field option:disabled { color: #beb9c5; }
#hover-status { height: 17px; margin: 5px 2px 0; font-size: 11px; line-height: 17px; white-space: nowrap; }
#hover-status:empty { visibility: hidden; }