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}@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%}.recording-container{position:relative;overflow:hidden;border-radius:8px;background-color:#000;margin:0 auto}.recording-video{width:100%;height:100%;object-fit:cover}.recording-canvas{position:absolute;top:0;left:0;width:100%;height:100%}.recording-status{position:absolute;top:16px;left:16px;background-color:#0009;color:#fff;padding:4px 12px;border-radius:4px;display:flex;align-items:center}.recording-status-indicator{width:12px;height:12px;border-radius:50%;background-color:#f44336;margin-right:8px;animation:pulse 1.5s infinite}.emotion-indicator{box-shadow:0 2px 10px #0003}@keyframes emotionPulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}@keyframes pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.emotion-indicator.changed{animation:emotionPulse .5s ease-in-out}.session-details-container{padding:24px}.chart-container{width:100%;height:300px;margin:16px 0}.transcript-container{max-height:400px;overflow-y:auto;padding:16px;background-color:#f9f9f9;border-radius:4px;white-space:pre-wrap}.session-info-grid{margin-bottom:20px}.info-label{color:#777;font-size:.9rem;margin-bottom:4px}.info-value{font-size:1.1rem;font-weight:500}.back-button{margin-bottom:16px}.emotion-value{display:flex;align-items:center;margin-top:8px}.emotion-value-bar{height:8px;border-radius:4px;margin-right:8px}.emotion-value-percentage{font-size:.9rem;font-weight:500}.dominant-emotion{font-weight:600;padding:4px 8px;border-radius:4px;display:inline-block}.happy-color{background-color:#4bc0c033;border:1px solid rgba(75,192,192,.5);color:#2a9d8f}.sad-color{background-color:#36a2eb33;border:1px solid rgba(54,162,235,.5);color:#3a86ff}.angry-color{background-color:#ff638433;border:1px solid rgba(255,99,132,.5);color:#e76f51}.neutral-color{background-color:#c9cbcf33;border:1px solid rgba(201,203,207,.5);color:#6c757d}.disgust-color{background-color:#96f3;border:1px solid rgba(153,102,255,.5);color:#7b2cbf}.fear-color{background-color:#ff9f4033;border:1px solid rgba(255,159,64,.5);color:#ff9e00}.surprise-color{background-color:#ffcd5633;border:1px solid rgba(255,205,86,.5);color:#ffbe0b}@media (max-width: 600px){.session-details-container{padding:16px}.chart-container{height:250px}.transcript-container{max-height:300px}}