body{background-color:transparent;color:#d4d4d4;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;margin:0;padding:20px;height:100vh;overflow:hidden;position:relative}.video-call-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:linear-gradient(180deg,#0f172a 0%,#1e293b 100%);z-index:-1}.video-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:40px;height:calc(100vh - 140px)}.video-participant{position:relative;background:#000;border-radius:0;overflow:hidden;border:none;transition:border-color 0.3s ease}.video-participant.speaking{border-color:#00ff88;box-shadow:0 0 20px rgba(0,255,136,0.3)}.video-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;background:linear-gradient(135deg,#2a2a2a 0%,#1a1a1a 100%)}.profile-avatar{width:120px;height:120px;border-radius:50%;margin-bottom:1rem;background-size:cover;background-position:center;border:3px solid rgba(255,255,255,0.2);box-shadow:0 4px 12px rgba(0,0,0,0.3)}.interviewer-avatar{background-image:linear-gradient(135deg,#667eea 0%,#764ba2 100%),radial-gradient(circle at 30% 30%,#4facfe 0%,#00f2fe 100%);background-blend-mode:multiply;position:relative}.interviewer-avatar::before{content:'SC';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:white;font-size:2.5rem;font-weight:600;text-shadow:0 2px 4px rgba(0,0,0,0.3)}.user-avatar{background-image:linear-gradient(135deg,#11998e 0%,#38ef7d 100%),radial-gradient(circle at 70% 30%,#4facfe 0%,#00f2fe 100%);background-blend-mode:multiply;position:relative}.user-avatar::before{content:'YOU';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:white;font-size:1.8rem;font-weight:600;text-shadow:0 2px 4px rgba(0,0,0,0.3)}.participant-name{color:#fff;font-weight:600;font-size:1.1rem;background:rgba(0,0,0,0.7);padding:8px 16px;border-radius:20px}.speaking-indicator{position:absolute;top:15px;left:15px;width:12px;height:12px;border-radius:50%;background:#666;transition:all 0.3s ease}.speaking-indicator.active{background:#00ff88;box-shadow:0 0 10px rgba(0,255,136,0.5);animation:pulse-speaking 1.5s infinite}.video-controls{position:fixed;bottom:30px;left:50%;transform:translateX(-50%);display:flex;gap:12px;background:rgba(60,64,67,0.95);padding:12px 20px;border-radius:28px;backdrop-filter:blur(15px);box-shadow:0 1px 3px rgba(60,64,67,0.3),0 4px 8px rgba(60,64,67,0.15);border:1px solid rgba(255,255,255,0.1)}.video-btn{width:48px;height:48px;border-radius:50%;border:none;cursor:pointer;transition:all 0.2s cubic-bezier(0.2,0,0,1);background:rgba(255,255,255,0.1);color:#ffffff;display:flex;align-items:center;justify-content:center;position:relative;backdrop-filter:blur(10px)}.video-btn:hover{background:rgba(255,255,255,0.2);transform:scale(1.08)}.video-btn:active{transform:scale(0.96)}.mic-btn,.camera-btn,.leave-btn{background:rgba(255,255,255,0.1)}.mic-btn:hover,.camera-btn:hover,.leave-btn:hover{background:rgba(255,255,255,0.2)}.video-btn.active{background:rgba(255,255,255,0.25)}.video-btn svg{width:20px;height:20px;opacity:0.9}.demo-container{position:relative;z-index:10;display:flex;flex-direction:column;align-items:center;gap:16px;max-width:1200px;margin:0 auto;padding-top:50px}.product-bar{display:inline-flex;align-items:center;gap:8px;background-color:rgba(45,45,45,0.95);padding:8px;border:none;border-radius:0;backdrop-filter:blur(15px);box-shadow:none}.logo-container{padding:4px}.logo{height:24px;display:block}button{background-color:transparent;color:#d4d4d4;border:none;padding:6px 12px;border-radius:8px;cursor:pointer;font-size:14px;display:flex;align-items:center;transition:all 0.3s ease}button:hover{background-color:#3c3c3c}.shortcut{color:#ffffff;margin-left:6px;opacity:0.9}button.listen{background-color:#4b4b4b;transition:all 0.3s ease}button.listen.listening{background-color:#dc3545;animation:pulse-recording 2s infinite}.icon{margin-right:8px}.answer{background-color:#007acc;color:white}.screenshot{background-color:#28a745;color:white}.menu-icon{cursor:pointer}.ai-panels{display:grid;grid-template-columns:1fr 1fr;gap:16px;width:100%;max-width:1200px;opacity:0;transform:translateY(20px);transition:all 0.8s ease}@media (min-width:769px){.ai-panels{display:grid;grid-template-columns:1fr 1fr;gap:16px}}.ai-panels.show{opacity:1;transform:translateY(0)}.ai-answer-panel,.transcript-panel{background-color:rgba(37,37,38,0.95);border:none;border-radius:0;overflow:hidden;backdrop-filter:blur(15px);box-shadow:none}.ai-answer-panel{display:flex;flex-direction:column;max-height:70vh}.ai-answer-panel .panel-title-bar{flex:0 0 auto}.ai-answer-panel .panel-content{flex:1 1 auto;overflow-y:auto;height:auto;max-height:none}.panel-title-bar{background-color:#3c3c3c;padding:8px 12px;font-weight:bold;font-size:14px}.panel-content{padding:16px;height:300px;overflow-y:auto}.thinking{color:#ffd700;font-style:italic;animation:thinking-dots 1.5s infinite}.ai-response{color:#87ceeb;line-height:1.5;margin-bottom:12px}.ai-code{background-color:#1e1e1e;border:1px solid #333;border-radius:6px;padding:12px;font-family:'Monaco','Menlo',monospace;font-size:13px;color:#ce9178;margin:12px 0;overflow-x:auto;max-width:100%;white-space:pre-wrap;word-break:break-word}.transcript-placeholder{color:#888;font-style:italic;text-align:center;padding:50px 0}.transcript-entry{margin-bottom:12px;padding:8px 0;border-bottom:1px solid #333}.transcript-entry:last-child{border-bottom:none}.speaker-self{color:#4fc3f7;font-weight:600}.speaker-interviewer{color:#d4d4d4;font-weight:600}.transcript-text{margin-top:4px;line-height:1.4}.transcript-entry.self .transcript-text{color:#4fc3f7}.transcript-entry.interviewer .transcript-text{color:#d4d4d4}.transcript-timestamp{font-size:11px;color:#666;margin-left:8px}@keyframes pulse-speaking{0%{transform:scale(1);opacity:1}50%{transform:scale(1.2);opacity:0.7}100%{transform:scale(1);opacity:1}}@keyframes pulse-recording{0%{box-shadow:0 0 0 0 rgba(220,53,69,0.7)}70%{box-shadow:0 0 0 10px rgba(220,53,69,0)}100%{box-shadow:0 0 0 0 rgba(220,53,69,0)}}@keyframes thinking-dots{0%,20%{content:'Analyzing question...'}40%{content:'Analyzing question..'}60%{content:'Analyzing question.'}80%,100%{content:'Analyzing question...'}}[data-tooltip]{position:relative}[data-tooltip]:hover::before{content:attr(data-tooltip);position:absolute;bottom:125%;left:50%;transform:translateX(-50%);background:rgba(0,0,0,0.9);color:white;padding:6px 10px;border-radius:6px;font-size:12px;white-space:nowrap;z-index:1000;opacity:0;animation:tooltipFadeIn 0.3s forwards}[data-tooltip]:hover::after{content:'';position:absolute;bottom:115%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:rgba(0,0,0,0.9);z-index:1000;opacity:0;animation:tooltipFadeIn 0.3s forwards}@keyframes tooltipFadeIn{from{opacity:0;transform:translateX(-50%) translateY(5px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}@keyframes pulse-answer{0%{transform:scale(1);box-shadow:0 0 0 0 rgba(30,64,175,0.7)}70%{transform:scale(1.05);box-shadow:0 0 0 10px rgba(30,64,175,0)}100%{transform:scale(1);box-shadow:0 0 0 0 rgba(30,64,175,0)}}.answer.highlighted{background-color:#1e40af !important;border-color:#1e40af !important;color:white !important;font-weight:bold}.answer.clicked{background-color:#1e40af !important;border-color:#1e40af !important;color:white !important;font-weight:bold;animation:pulse-answer-clicked 3s infinite}@keyframes pulse-answer-clicked{0%{box-shadow:0 0 0 0 rgba(30,64,175,0.7)}70%{box-shadow:0 0 0 10px rgba(30,64,175,0)}100%{box-shadow:0 0 0 0 rgba(30,64,175,0)}}@media (max-width:768px){:root{--product-bar-height:60px}body{padding:0;background:#000}.video-call-overlay{background:linear-gradient(180deg,#0f172a 0%,#1e293b 50%,#1e293b 100%)}.video-grid{display:flex;flex-direction:column;gap:6px;padding:8px;flex:1 1 auto;margin-bottom:auto;margin-top:40px}.video-participant{border-radius:0;border:none}.video-participant.interviewer{flex:1;min-height:160px}.video-participant.user{flex:1;min-height:160px}.profile-avatar{width:60px;height:60px}.interviewer-avatar{width:80px;height:80px}.interviewer-avatar::before{font-size:1.6rem}.user-avatar::before{font-size:1.2rem}.participant-name{font-size:0.8rem;margin-top:0.5rem}.video-controls{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,0.8);border-radius:25px;padding:8px 16px;gap:20px;backdrop-filter:blur(10px)}.video-btn{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2)}.leave-btn{background:rgba(220,38,38,0.8)}.demo-container{position:fixed;top:0;left:50%;transform:translateX(-50%);padding:0;z-index:2000;width:calc(100% - 20px);max-width:500px}.product-bar{background:rgba(30,30,30,0.95);border-bottom:1px solid rgba(255,255,255,0.1);border-radius:0 0 12px 12px;padding:12px 16px;gap:12px;width:100%;display:flex;justify-content:space-between;align-items:center}.logo-container{order:1;flex-shrink:0}.listen,.answer,.screenshot{border-radius:8px;font-size:0.8rem;padding:8px 12px;font-weight:600;display:flex;align-items:center;justify-content:center;flex:0 0 auto;min-width:70px;height:36px}.listen{order:2;background:linear-gradient(135deg,#10b981 0%,#059669 100%);color:white;border:none}.answer{order:3;background:linear-gradient(135deg,#3b82f6 0%,#1d4ed8 100%);color:white;border:none}.screenshot{order:4;background:linear-gradient(135deg,#10b981 0%,#059669 100%);color:white;border:none}.menu-icon{order:5;width:20px;height:20px;flex-shrink:0}.shortcut{display:none}.ai-panels{display:flex !important;flex-direction:column;align-items:stretch;gap:8px;width:calc(100% - 24px);left:50%;transform:translateX(-50%) translateY(20px);max-width:480px;position:fixed;top:75px;z-index:500;max-height:calc(100dvh - (10px+var(--product-bar-height)+20px));overflow-y:auto;opacity:0;transition:all 0.8s ease}.ai-answer-panel{order:1;flex:1 1 auto;min-height:35vh;background:rgba(0,0,0,0.85);border:none;border-radius:0;backdrop-filter:blur(15px)}.transcript-panel{order:2;flex:1 1 auto;min-height:20vh;background:rgba(0,0,0,0.85);border:none;border-radius:0;backdrop-filter:blur(15px)}.ai-answer-panel,.ai-answer-panel *,.transcript-panel,.transcript-panel *{overflow-wrap:anywhere;word-wrap:break-word}.ai-answer-panel .ai-code{font-size:0.75rem;line-height:1.3;padding:8px;margin:8px 0;white-space:pre-wrap;word-break:break-word;max-width:calc(100% - 16px);box-sizing:border-box}.ai-panels.show{opacity:1;transform:translateX(-50%) translateY(0)}.panel-title-bar{background:rgba(255,255,255,0.05);padding:8px 12px;font-size:0.8rem;border-bottom:1px solid rgba(255,255,255,0.1)}.panel-content{font-size:0.85rem;padding:14px;overflow-y:auto;max-height:calc(100dvh - 140px);line-height:1.4}.listen.active,.answer.active{transform:scale(0.95);transition:transform 0.1s ease}.video-participant.speaking{border-color:#10b981;box-shadow:0 0 15px rgba(16,185,129,0.4)}}@media (max-width:480px){:root{--product-bar-height:52px}.video-grid{padding:10px;gap:8px}.profile-avatar{width:60px;height:60px}.interviewer-avatar::before{font-size:1.4rem}.user-avatar::before{font-size:1.1rem}.ai-panels{top:65px;width:calc(100% - 20px);max-width:420px;gap:6px}.demo-container{padding:0;width:calc(100% - 10px)}.product-bar{padding:8px 12px}.listen,.answer,.screenshot{font-size:0.7rem;padding:6px 8px;min-width:60px;height:32px}.listen .icon,.screenshot .icon{width:14px;height:14px;margin:0}.ai-answer-panel{flex:1 1 auto;min-height:30vh}.transcript-panel{flex:1 1 auto;min-height:18vh}}