.emotionEntry { font-size:.8em; padding:10px 14px; white-space:nowrap; }
.bot-character-wrap { flex-direction:column; }
.bot-state-source { color:var(--muted); font-size:.6em; line-height:1.5; padding:2px 8px; text-align:center; }
.care-basis { color:var(--muted); font-size:.6em; line-height:1.55; margin-top:8px; }
.emotionDialog { color:var(--text); background:#f7fafc; border:1px solid var(--stroke); border-radius:24px; width:min(1120px,96vw); max-height:94dvh; padding:0; box-shadow:0 24px 80px #0f172a44; }
.emotionDialog::backdrop { background:#0f172a66; }
.emotionDialog header { display:flex; justify-content:space-between; align-items:center; padding:18px 24px; gap:12px; border-bottom:1px solid var(--stroke); }
.emotionDialog h2 { font-size:1.15em; margin:0; }
.emotionDialog h3 { font-size:1em; margin:0; }
.emotionDialog .emotionHint { color:var(--muted); font-size:.72em; line-height:1.55; margin:6px 0; }
.emotionBody { padding:20px 24px; }
.emotionGrid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.emotionCard { background:white; padding:18px; border:1px solid var(--stroke); border-radius:18px; min-width:0; }
.emotionHeading { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.emotionBadge { font-size:.65em; padding:5px 9px; border-radius:20px; background:#edf2f7; }
.emotionBadge[data-ready="true"] { background:#d1fae5; color:#065f46; }
.emotionStage { aspect-ratio:4/3; background:#e7eef4; border-radius:14px; overflow:hidden; margin:14px 0; position:relative; }
.emotionStage video,.emotionStage img,.emotionStage canvas { width:100%; height:100%; object-fit:contain; position:absolute; inset:0; }
.emotionStage[data-live="true"] video,.emotionStage[data-live="true"] canvas { transform:scaleX(-1); }
.emotionPlaceholder { display:grid; place-content:center; position:absolute; inset:0; text-align:center; color:#4b6074; font-size:.8em; padding:20px; }
.emotionActions { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0; }
.emotionDialog button { min-height:44px; cursor:pointer; }
.emotionDialog button:disabled { cursor:wait; opacity:.5; }
.emotionDialog .emotionSecondary { background:white; color:var(--text); border:1px solid var(--stroke); border-radius:12px; padding:8px 12px; font:inherit; font-size:.75em; }
.emotionResult { min-height:3.4em; font-size:.8em; line-height:1.5; margin:10px 0; }
.emotionResult strong { font-size:1.2em; }
.emotionScores { display:grid; gap:6px; }
.emotionScore { display:grid; grid-template-columns:3.5em 1fr 3em; gap:8px; font-size:.65em; align-items:center; }
.emotionTrack { height:8px; background:#eef2f6; border-radius:8px; overflow:hidden; }
.emotionTrack span { display:block; height:100%; background:#84c5d9; border-radius:8px; }
.emotionAudioViz { background:#f3f7fa; border-radius:12px; padding:12px; margin:14px 0; }
.emotionAudioViz canvas { display:block; width:100%; height:78px; }
.emotionAudioViz .emotionMel { height:118px; margin-top:10px; border-radius:8px; background:#e5edf2; image-rendering:pixelated; }
.emotionAudioViz small { font-size:.6em; color:var(--muted); }
.emotionFusion { margin-top:18px; padding:16px 18px; background:#e5f5f2; border:1px solid #c8e5df; border-radius:16px; }
.emotionFusion p { margin:8px 0; font-size:.8em; }
.emotionConsent { display:flex; gap:8px; align-items:center; font-size:.72em; margin-top:14px; }
.emotionConsent input { width:20px; height:20px; }
.chatEmotion { border:1px solid var(--stroke); border-radius:14px; padding:10px 14px; margin-bottom:8px; background:var(--card); font-size:.65em; line-height:1.5; }
.chatEmotionControls { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; margin-bottom:5px; }
.chatCameraVideo:not([hidden]) { display:block; width:160px; max-width:100%; aspect-ratio:4/3; object-fit:contain; transform:scaleX(-1); background:#e7eef4; border:1px solid var(--stroke); border-radius:10px; margin:8px 0; }
#chatCameraStatus { color:var(--muted); padding:3px 0; }
.chatEmotionControls label { display:flex; align-items:center; gap:6px; font-weight:650; }
.chatEmotionControls input { width:18px; height:18px; }
.chatEmotionControls button { border:1px solid var(--stroke); background:white; border-radius:8px; padding:6px 10px; font:inherit; color:var(--text); cursor:pointer; }
.poseSection { border-top:1px solid var(--stroke); margin-top:12px; padding-top:6px; }
.poseAlert { background:#fff7ed; border:1px solid #fdba74; border-radius:12px; padding:12px; font-size:.75em; color:#9a3412; line-height:1.5; margin:8px 0; }
#chatPoseFeedback { padding:5px 0; font-weight:650; }
#chatPoseFeedback[data-alert="true"] { color:#9a3412; }
.emotionDialog details { font-size:.7em; margin-top:14px; line-height:1.6; color:var(--muted); }
@media(max-width:720px) { .emotionGrid { grid-template-columns:1fr; } .emotionBody { padding:14px; } .emotionDialog header { padding:14px; } .emotionEntry { font-size:.65em; padding:8px; } }

#emotionMicDevice { width:100%; padding:10px; border:1px solid var(--stroke); border-radius:10px; background:white; color:var(--text); font:inherit; font-size:.7em; }
.poseOverlay { position:absolute; top:8px; left:8px; right:8px; background:rgba(255,255,255,.92); border-radius:8px; padding:7px 10px; font-size:.6em; color:#173d56; z-index:2; pointer-events:none; }

#poseOverlay[data-alert="true"] { color:#9a3412; background:#fff7ed; border:2px solid #fb923c; font-weight:700; }