body,html,#root{margin:0;padding:0;width:100%;height:100%;overflow-x:hidden;font-family:Poppins,sans-serif;background-color:#f5f5f5}.app-container{width:100%;min-height:100vh;margin:0;padding:20px;display:flex;flex-direction:column;box-sizing:border-box}.session-card{background-color:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a;padding:16px;margin-bottom:16px;transition:transform .2s ease-in-out}.session-card:hover{transform:translateY(-3px);box-shadow:0 4px 15px #00000026}.pulse-animation{animation:pulse 1.5s infinite}@keyframes pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@media (max-width: 768px){.app-container{padding:16px}}@media (max-width: 480px){.app-container{padding:12px}}.svgContainer{display:flex;gap:20px}.svgContainer2{display:flex;gap:20px;justify-content:center}.svgItem{display:flex;align-items:center;gap:10px}.svgItem2{display:flex;flex-direction:column;align-items:center;margin:0 15px}.iconLabel{font-size:12px;color:#333;white-space:nowrap;margin-right:20px}.iconLabel2{margin-top:10px;font-size:12px;color:#333;text-align:center}.chartContainer{width:100%;max-width:800px;margin:20px auto;padding:20px;background-color:#f5f5f5;border-radius:8px;box-shadow:0 2px 4px #0000001a}.femaleSvg,.maleSvg{margin-top:10%}.svg-container svg{width:80%;height:auto}@media (max-width: 768px){.svg-container svg{width:200%;height:auto}.svg-item{margin:5% 0}.femaleDiv{translate:-15%}.maleDiv{translate:-5%}}.femaleDiv{translate:-25%}:root{--primary-color: #7366ff;--primary-light: rgba(115, 102, 255, .1);--primary-medium: rgba(115, 102, 255, .3);--primary-dark: #5d52cc;--secondary-color: #ff8559;--secondary-light: rgba(255, 133, 89, .1);--secondary-medium: rgba(255, 133, 89, .3);--accent-color: #2ccdea;--accent-light: rgba(44, 205, 234, .1);--accent-medium: rgba(44, 205, 234, .3);--success-color: #4caf50;--warning-color: #ff9800;--error-color: #f44336;--info-color: #673ab7;--distance-color: #673ab7;--concentration-color: #4caf50;--tension-color: #ff9800;--x-angle-color: rgba(255, 99, 132, .9);--y-angle-color: rgba(75, 192, 192, .9);--z-angle-color: rgba(54, 162, 235, .9);--eye-color: rgba(153, 102, 255, .9);--background-color: #f5f7fa;--card-background: #ffffff;--card-header-bg: #fcfcff;--dark-background: #000000;--text-color: #333;--text-secondary: #666;--border-color: rgba(0, 0, 0, .08);--card-border-radius: 16px;--chip-border-radius: 20px;--video-border-radius: 20px;--button-border-radius: 50px;--shadow-sm: 0 4px 6px rgba(0, 0, 0, .05);--shadow-md: 0 6px 16px rgba(0, 0, 0, .08);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .12);--shadow-glow: 0 0 15px rgba(115, 102, 255, .3);--transition-speed: .3s}.recording-container{position:relative;overflow:hidden;border-radius:20px!important;background-color:#000;box-shadow:var(--shadow-lg);margin:0 auto;transition:all var(--transition-speed) ease;border:3px solid var(--primary-color)}.recording-container.recording{box-shadow:0 0 15px #7366ff66,var(--shadow-lg);border:3px solid var(--error-color);border-radius:20px!important}.recording-video{width:100%;height:100%;object-fit:cover}.recording-canvas{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:20px!important}.recording-status{position:absolute;top:16px;left:16px;background-color:#000000b3;color:#fff;padding:8px 16px;border-radius:var(--chip-border-radius);display:flex;align-items:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);box-shadow:var(--shadow-sm);z-index:10;animation:fadeIn .5s ease-out;border:1px solid rgba(255,255,255,.1)}.recording-status-indicator{width:12px;height:12px;border-radius:50%;background-color:var(--error-color);margin-right:8px;animation:pulse 1.5s infinite}.metrics-panel{position:absolute;top:16px;right:16px;display:flex;flex-direction:column;gap:8px;z-index:10;animation:slideInRight .5s ease-out;max-width:220px}.metrics-row{display:flex;gap:4px;justify-content:flex-end}.info-chip{border-radius:var(--chip-border-radius)!important;font-weight:600!important;padding:0 12px!important;box-shadow:var(--shadow-sm)!important;-webkit-backdrop-filter:blur(4px)!important;backdrop-filter:blur(4px)!important;border:1px solid rgba(255,255,255,.15)!important;color:#fff!important;transition:all var(--transition-speed) ease!important}.info-chip:hover{transform:translateY(-2px)!important;box-shadow:var(--shadow-md)!important}.info-chip .MuiChip-icon{color:#fff!important;opacity:.9!important}.metric-chip{font-size:.8rem!important;height:24px!important;border-radius:var(--chip-border-radius)!important;font-weight:600!important;color:#fff!important;box-shadow:var(--shadow-sm)!important;border:1px solid rgba(255,255,255,.15)!important}.distance-chip{background-color:var(--distance-color)!important}.concentration-chip{background-color:var(--concentration-color)!important}.tension-chip{background-color:var(--tension-color)!important}.x-angle-chip{background-color:var(--x-angle-color)!important}.y-angle-chip{background-color:var(--y-angle-color)!important}.z-angle-chip{background-color:var(--z-angle-color)!important}.eye-chip{background-color:var(--eye-color)!important}.timer-container{position:absolute;bottom:0;left:0;width:100%;z-index:10}.timer-progress{height:6px!important;border-radius:0!important;background-color:#fff3!important}.timer-progress .MuiLinearProgress-bar{background-color:var(--error-color)!important}.timer-info{position:absolute;bottom:16px;right:16px;background-color:#000000b3;color:#fff;padding:6px 12px;border-radius:var(--chip-border-radius);display:flex;align-items:center;font-size:.85rem;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);box-shadow:var(--shadow-sm);border:1px solid rgba(255,255,255,.1)}.message-overlay{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:5;animation:fadeIn .5s ease-out;overflow:hidden}.ready-message{background-color:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);padding:24px;border-radius:var(--card-border-radius);text-align:center;max-width:80%;border:1px solid rgba(255,255,255,.1);box-shadow:var(--shadow-md);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.processing-message{background-color:#000000b3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:24px;border-radius:var(--card-border-radius);text-align:center;max-width:80%;border:1px solid rgba(255,255,255,.1);box-shadow:var(--shadow-md);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.llm-container{width:90%;max-width:800px;max-height:90%;overflow-y:auto;border-radius:var(--card-border-radius);background-color:#fffffff2;box-shadow:var(--shadow-lg);animation:fadeIn .5s ease-out;margin:0 auto;scrollbar-width:thin;scrollbar-color:var(--primary-medium) transparent;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.llm-container::-webkit-scrollbar{width:8px}.llm-container::-webkit-scrollbar-track{background:transparent}.llm-container::-webkit-scrollbar-thumb{background-color:var(--primary-medium);border-radius:20px}.action-button{border-radius:var(--button-border-radius)!important;padding:10px 24px!important;font-weight:600!important;text-transform:none!important;box-shadow:var(--shadow-md)!important;transition:all var(--transition-speed) ease!important;letter-spacing:.5px!important}.start-button{background:linear-gradient(45deg,var(--primary-color),var(--primary-dark))!important}.start-button:hover{box-shadow:var(--shadow-glow)!important;transform:translateY(-2px)!important}.stop-button{background:linear-gradient(45deg,var(--error-color),#d32f2f)!important}.stop-button:hover{box-shadow:0 0 15px #f443364d!important;transform:translateY(-2px)!important}@keyframes pulse{0%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.1)}to{opacity:1;transform:scale(1)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideInRight{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@keyframes slideInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.ready-message{background-color:#7366ff26;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:24px;border-radius:var(--card-border-radius);text-align:center;max-width:80%;border:1px solid rgba(115,102,255,.3);box-shadow:var(--shadow-md),0 0 20px #7366ff33}@keyframes softPulse{0%{border-color:var(--primary-color);box-shadow:0 0 10px #7366ff4d,var(--shadow-lg)}50%{border-color:var(--primary-dark);box-shadow:0 0 20px #7366ff80,var(--shadow-lg)}to{border-color:var(--primary-color);box-shadow:0 0 10px #7366ff4d,var(--shadow-lg)}}.recording-container:not(.recording){animation:softPulse 3s infinite ease-in-out}@media (max-width: 900px){:root{--video-border-radius: 20px;--card-border-radius: 16px}.metrics-panel{max-width:180px}.recording-container{border-width:3px}}@media (max-width: 600px){:root{--video-border-radius: 20px;--card-border-radius: 14px;--chip-border-radius: 16px}.info-chip{font-size:.8rem!important;height:28px!important}.metric-chip{font-size:.7rem!important;height:22px!important}.metrics-panel{top:8px;right:8px;gap:4px;max-width:160px}.recording-status{top:8px;left:8px;padding:4px 12px;font-size:.8rem}.timer-info{bottom:8px;right:8px;font-size:.75rem}.action-button{padding:8px 20px!important;font-size:.9rem!important}.recording-container{border-width:2.5px}.llm-container{width:95%;max-height:95%;overflow-y:auto;max-width:none}.ready-message,.processing-message{width:90%;max-width:none;padding:18px}}@media (max-width: 480px){:root{--video-border-radius: 20px}.metrics-panel{max-width:140px}.metrics-row{justify-content:flex-end;flex-wrap:wrap}.info-chip{font-size:.75rem!important;padding:0 8px!important}.metric-chip{font-size:.65rem!important;height:20px!important}.ready-message,.processing-message{padding:16px}.recording-container{border-width:2px}}.chart-container{height:350px;margin-bottom:20px}.emotion-value{position:relative;height:20px;background-color:#f0f0f0;border-radius:10px;overflow:hidden;margin-top:4px}.emotion-value-bar{position:absolute;top:0;left:0;height:100%;border-radius:10px;transition:width .5s ease}.emotion-value-percentage{position:absolute;right:8px;top:0;line-height:20px;font-size:.75rem;color:#333;font-weight:500}.dominant-emotion{display:inline-flex;align-items:center;justify-content:center;padding:4px 12px;border-radius:12px;font-weight:500;font-size:.9rem;height:28px}.transcript-container{max-height:300px;overflow-y:auto;padding:16px;white-space:pre-wrap;font-size:.9rem;line-height:1.6;color:#333;background-color:#f9f9f9;border-radius:8px;border:1px solid rgba(0,0,0,.05)}.happy-color{background-color:#4bc0c01a;color:#4bc0c0;border:1px solid rgba(75,192,192,.3)}.sad-color{background-color:#36a2eb1a;color:#36a2eb;border:1px solid rgba(54,162,235,.3)}.angry-color{background-color:#ff63841a;color:#ff6384;border:1px solid rgba(255,99,132,.3)}.neutral-color{background-color:#c9cbcf1a;color:#646464;border:1px solid rgba(201,203,207,.3)}.disgust-color{background-color:#9966ff1a;color:#96f;border:1px solid rgba(153,102,255,.3)}.fear-color{background-color:#ff9f401a;color:#ff9f40;border:1px solid rgba(255,159,64,.3)}.surprise-color{background-color:#ffcd561a;color:#ffcd56;border:1px solid rgba(255,205,86,.3)}