/* 构建加速：不在此跑 Tailwind JIT；index.html 已引入 cdn.tailwindcss.com 提供工具类 */
.text-shadow { text-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.transition-all-300 { transition: all 300ms ease-in-out; }
.bg-gradient-primary { background: linear-gradient(135deg, #1a73e8 0%, #185abc 100%); }
.bg-gradient-secondary { background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%); }
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* 自定义样式 */
body { font-family: 'Inter', system-ui, sans-serif; }

/* 镜像效果样式类，具有高特异性 */
#localVideo.mirrored {
    transform: scaleX(-1) !important;
    transform-origin: center center !important;
    -webkit-transform: scaleX(-1) !important;
    -moz-transform: scaleX(-1) !important;
    -o-transform: scaleX(-1) !important;
}

.emotion-circle {
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: conic-gradient(
        #4caf50 0deg 72deg,    /* 快乐 20% */
        #ff9800 72deg 144deg,  /* 惊讶 20% */
        #f44336 144deg 180deg, /* 愤怒 10% */
        #9c27b0 180deg 216deg, /* 恐惧 10% */
        #3f51b5 216deg 252deg, /* 悲伤 10% */
        #00bcd4 252deg 288deg, /* 厌恶 10% */
        #9e9e9e 288deg 360deg  /* 中性 20% */
    );
}

.emotion-circle::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 140px; height: 140px;
    background-color: white;
    border-radius: 50%;
}

.emotion-indicator {
    position: absolute;
    width: 10px; height: 10px;
    background-color: white;
    border-radius: 50%;
    transform-origin: center;
    box-shadow: 0 0 0 3px #1a73e8;
}

.video-container {
    position: relative;
    width: 100%; height: 0;
    padding-bottom: 56.25%; /* 16:9 比例 */
    overflow: hidden;
}

.video-container video {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}

/* 视频咨询室：本地 / 远端画面区域（人脸框 canvas 叠在上方） */
#localVideoContainer,
#peerVideoContainer {
    position: relative;
    background-color: #000;
    overflow: hidden;
}

#localVideo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.emotion-label { transition: all 0.3s ease; }
.emotion-label.active { transform: scale(1.05); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.emotion-value { transition: all 0.3s ease; font-weight: 600; }
.emotion-label.active .emotion-value { font-size: 1.1rem; color: inherit; }

.pulse-animation { animation: pulse 2s infinite; }

/* 情绪仪表盘 */
.s-gauge-wrapper { position: relative; font-family: system-ui, sans-serif; }
.s-gauge-svg { width: 100%; max-width: 200px; height: auto; }
.s-gauge-value { text-align: center; font-size: 1.1rem; font-weight: 700; color: #1f2937; margin-top: 4px; }
.s-gauge-label { text-align: center; font-size: 0.75rem; color: #6b7280; }
.s-gauge-warning { text-align: center; font-size: 0.7rem; color: #dc2626; margin-top: 4px; }
.s-gauge-warning.hidden { display: none !important; }
.emotion-tab { cursor: pointer; transition: all 0.2s; }
.emotion-tab.active { color: var(--therapy-primary, #1a73e8); }
.emotion-panel { display: block; }
.emotion-panel.hidden { display: none !important; }
@keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
}

.fade-in { animation: fadeIn 0.5s ease-in-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.slide-in { animation: slideIn 0.3s ease-in-out; }
@keyframes slideIn { from { transform: translateX(-20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

.scale-in { animation: scaleIn 0.3s ease-in-out; }
@keyframes scaleIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }