/* 原站 Tailwind 产物里没有的小工具类 / 动画兜底 */
.text-s { font-size: 0.875rem; line-height: 1.25rem; }

.scrollbar-thin { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.25) transparent; }
.scrollbar-thin::-webkit-scrollbar { width: 6px; height: 6px; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.25); border-radius: 9999px; }
.scrollbar-thin::-webkit-scrollbar-track { background: transparent; }

/* 语音录制时的呼吸光圈与跳动点（对应原站 animate-[voice-breathe] / animate-[voice-dot]） */
@keyframes voice-breathe {
  0%, 100% { transform: scale(0.95); opacity: 0.55; }
  50% { transform: scale(1.12); opacity: 0.25; }
}
@keyframes voice-dot {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50% { transform: translateY(-4px); opacity: 1; }
}
.animate-\[voice-breathe_1\.5s_ease-in-out_infinite\] { animation: voice-breathe 1.5s ease-in-out infinite; }
.animate-\[voice-dot_0\.8s_ease-in-out_infinite\] { animation: voice-dot 0.8s ease-in-out infinite; }
.animate-\[voice-dot_0\.8s_ease-in-out_0\.2s_infinite\] { animation: voice-dot 0.8s ease-in-out 0.2s infinite; }
.animate-\[voice-dot_0\.8s_ease-in-out_0\.4s_infinite\] { animation: voice-dot 0.8s ease-in-out 0.4s infinite; }

/* 消息气泡里的图片 */
.bubble-img { max-width: 100%; border-radius: 0.5rem; display: block; }

/* 圆形头像：从全身立绘里裁出头部 */
.avatar-crop { object-fit: cover; object-position: 50% 14%; }

.voice-input { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 24px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(12px); }
.voice-input.hidden { display: none; }
.voice-record { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; padding: 5px 8px; color: white; border-radius: 18px; text-align: left; cursor: pointer; touch-action: manipulation; }
.voice-mic-icon, .voice-stop-icon, .voice-spinner { width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #6ea8ff; }
.voice-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
#voiceHint { font-size: 14px; font-weight: 600; }
#voiceDetail { color: rgba(255,255,255,.55); font-size: 11px; }
.voice-stop-icon, .voice-spinner { display: none; }
.voice-stop-icon { background: #fb7185; }
.voice-stop-icon::after { content: ''; width: 13px; height: 13px; background: white; border-radius: 3px; }
.voice-clock { font-size: 11px; margin-left: auto; color: #fda4af; font-variant-numeric: tabular-nums; white-space: nowrap; }
.voice-clock[hidden], .voice-cancel[hidden] { display: none; }
.voice-cancel { color: rgba(255,255,255,.8); font-size: 12px; padding: 10px 5px; border-radius: 8px; }
.voice-record:focus-visible, .voice-cancel:focus-visible { outline: 2px solid #93c5fd; outline-offset: 2px; }
.voice-record:disabled { cursor: wait; }
.voice-status { margin-top: 8px; text-align: center; min-height: 18px; overflow-wrap: anywhere; }
.voice-input[data-voice-state="recording"] { border-color: rgba(251,113,133,.6); background: rgba(159,18,57,.18); }
.voice-input[data-voice-state="recording"] .voice-mic-icon { display: none; }
.voice-input[data-voice-state="recording"] .voice-stop-icon { display: flex; box-shadow: 0 0 0 5px rgba(251,113,133,.12); }
.voice-input[data-voice-state="recognizing"] .voice-mic-icon, .voice-input[data-voice-state="permission"] .voice-mic-icon { display: none; }
.voice-input[data-voice-state="recognizing"] .voice-spinner, .voice-input[data-voice-state="permission"] .voice-spinner { display: flex; background: transparent; border: 3px solid rgba(147,197,253,.2); border-top-color: #93c5fd; animation: voice-spin 1s linear infinite; }
.voice-input[data-voice-state="error"] { border-color: rgba(251,113,133,.55); }
@keyframes voice-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .voice-spinner { animation: none !important; } }
@media (max-width: 480px) { .voice-record { gap: 7px; padding-left: 2px; } .voice-clock { font-size: 10px; } #voiceDetail { font-size: 10px; } }

/* 可读性遮罩：原站背景是深色影棚，这里数字人多为浅色水墨底，需要压暗才看得清气泡 */
.dh-scrim {
  background-image: linear-gradient(90deg, rgba(4, 10, 20, 0.10) 0%, rgba(4, 10, 20, 0.45) 45%, rgba(4, 10, 20, 0.78) 100%);
}
.dh-scrim-top {
  background-image: linear-gradient(180deg, rgba(4, 10, 20, 0.65) 0%, rgba(4, 10, 20, 0) 100%);
}

/* 设置页：桌面双栏（左系统提示词 / 右其余设置），移动端单列时提示词放最后 */
.settings-layout { display: flex; flex-direction: column; max-width: 1560px; margin: 0 auto; }
.settings-col-left { order: 2; padding: 0 16px 24px; }
.settings-col-right { order: 1; padding: 16px; }
.prompt-textarea { min-height: 220px; }

@media (min-width: 768px) {
  .settings-layout {
    display: grid;
    grid-template-columns: minmax(320px, 42%) 1fr;
    align-items: start;
    gap: 4px;
  }
  .settings-col-left {
    order: 0;
    position: sticky;
    top: 12px;
    height: calc(100vh - 96px);
    padding: 16px 8px 16px 16px;
  }
  .settings-col-right { order: 0; padding: 16px 16px 48px 8px; }
  .prompt-card { height: 100%; display: flex; flex-direction: column; }
  .prompt-textarea { flex: 1 1 auto; min-height: 0; }
}