/* ========== Shared Character Portrait / Live2D Component ========== */

.char-portrait-component {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: auto;
  padding-bottom: 0;
  box-sizing: border-box;
}

/* Static portrait image */
.char-portrait-component .char-portrait-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  filter: none;
  display: block;
  transform-origin: center bottom;
  will-change: transform;
  /* 待机：以脚为支点，上半身左右轻微摆动（脚不动） */
  animation: cp-idle-sway 6s ease-in-out infinite;
}

/* 仅在静图可见（非 Live2D）时播放动画；Live2D 模式下静图隐藏，动画不生效 */
.char-portrait-component.is-static .char-portrait-img {
  animation-play-state: running;
}
.char-portrait-component:not(.is-static) .char-portrait-img {
  animation: none;
}

@keyframes cp-idle-sway {
  0%, 100% { transform: rotate(-0.6deg) scale(1); }
  50%      { transform: rotate(0.6deg) scale(1.012); }
}

/* 说话时（.speaking）：摆动稍快，增强“在回应你”的活人感 */
.char-portrait-component.is-static.speaking .char-portrait-img {
  animation: cp-idle-sway 4s ease-in-out infinite;
}

/* 尊重系统“减少动态效果”偏好 */
@media (prefers-reduced-motion: reduce) {
  .char-portrait-component .char-portrait-img {
    animation: none;
  }
}

/* Live2D canvas container */
.char-portrait-component .char-live2d-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  z-index: 3;
}

.char-portrait-component .char-live2d-canvas canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Live2D status overlay */
.char-portrait-component .live2d-overlay {
  display: none;
}

/* ========== 模型加载环形进度条 ========== */
/* 加载环常驻 body 末尾（由 JS 控制），fixed 全屏覆盖，天然处于最上层 */
.model-loading-ring {
  position: fixed;
  inset: 0;
  min-height: 100vh;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: rgba(10, 14, 32, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 2147483647;
  transition: opacity 0.35s ease;
}
.model-loading-ring.show {
  display: flex;
}
.model-loading-ring.fade-out {
  opacity: 0;
  pointer-events: none;
}
/* 圆环 + 百分比的包裹层：固定 140x140，百分比绝对居中于圆环中心 */
.model-loading-ring .ring-stage {
  position: relative;
  width: 140px;
  height: 140px;
  flex: 0 0 auto;
}
.model-loading-ring .ring-svg {
  transform: rotate(-90deg);
  display: block;
}
.model-loading-ring .ring-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.12);
}
.model-loading-ring .ring-fg {
  fill: none;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.2s linear;
}
/* 圆心百分比：绝对定位于 ring-stage(140x140) 中心 = 圆环中心，保证上下左右都居中 */
.model-loading-ring .ring-percent {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 0 12px rgba(90, 140, 255, 0.6);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px;
}
.model-loading-ring .ring-label {
  position: relative;
  font-size: 13px;
  opacity: 0.78;
  letter-spacing: 1px;
  color: #e6ecff;
  text-align: center;
}
.model-loading-ring .ring-label.error {
  color: #ff8b8b;
  opacity: 1;
}

/* 手机版：确保立绘区与进度环在首屏布局未稳时也有确定高度，避免进度环因父容器塌缩而不可见（白屏） */
@media (max-width: 640px) {
  .clp-portrait-wrap {
    min-height: 50vh;
  }
  /* 加载环已全局 fixed 全屏最高层，此处保留手机端最小高度兜底 */
  .model-loading-ring {
    min-height: 100vh;
  }
}

/* Optional name badge */
.char-portrait-component .char-portrait-name {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 16px;
  font-weight: 700;
  color: var(--primary-dark);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  white-space: nowrap;
  z-index: 5;
}

/* Optional thinking bubble above the model */
.char-portrait-component .thinking-bubble-model {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  animation: cp-thinking-pulse 0.4s ease-out;
  pointer-events: none;
}

.char-portrait-component .thinking-bubble-model .thinking-content {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 8px 16px;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  font-size: 16px;
  color: var(--text-light);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.char-portrait-component .thinking-bubble-model .thinking-dots {
  display: inline-flex;
  gap: 3px;
}

.char-portrait-component .thinking-bubble-model .thinking-dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--primary);
  animation: cp-thinking-bounce 1.4s infinite ease-in-out both;
}

.char-portrait-component .thinking-bubble-model .thinking-dots i:nth-child(1) { animation-delay: -0.32s; }
.char-portrait-component .thinking-bubble-model .thinking-dots i:nth-child(2) { animation-delay: -0.16s; }

@keyframes cp-thinking-bounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

@keyframes cp-thinking-pulse {
  0% { opacity: 0; transform: translateX(-50%) translateY(8px); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0); }
}