.home-page{display:flex;flex-direction:column;height:100vh;background:#fff;overflow:hidden}.home-bottom-section{flex:1;color:#131519;background:linear-gradient(180deg,#3f90a4 0,#041032);display:flex;align-items:center;justify-content:center}.branding{position:absolute;top:10px;left:10px;z-index:10}.logo{height:100px;width:auto}.home-content{flex:1;display:flex;align-items:center;padding:0 10rem;gap:4rem;z-index:5}.join-meeting-section{flex:1;max-width:500px}.join-title{color:#041032;font-size:24px;text-align:left;margin:0 0 10px}.join-subtitle{color:#041032;font-size:16px;text-align:left;margin:0 0 20px}.meeting-controls{border-radius:30px;border:1px solid #4fc0dc;padding:3px;display:flex;width:100%;color:#253858;overflow:hidden}.meeting-input{border:0;background:#fff;display:inline-block;height:50px;width:100%;font-size:1rem;padding-left:10px}.meeting-input:focus{outline:none}.start-meeting-btn{border:0;font-size:1rem;background:linear-gradient(180deg,#4fc0dc 0,#041032);border-radius:30px;color:#fff;cursor:pointer;padding:5px 40px;min-width:180px;transition:transform .2s ease,box-shadow .2s ease}.start-meeting-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #4fc0dc66}.start-meeting-btn:active{transform:translateY(0)}.home-illustration{flex:1;display:flex;justify-content:center;align-items:center;position:relative}.home-illustration-img{max-width:100%;max-height:100%;object-fit:contain}@media (max-width: 1024px){.home-content{padding:0 5rem;gap:2rem}.logo{height:80px}}@media (max-width: 768px){.home-content{flex-direction:column;padding:2rem;justify-content:center}.join-meeting-section{max-width:100%;width:100%}.home-illustration{display:none}.logo{height:60px}.branding{position:relative;top:0;left:0;text-align:center;margin-bottom:2rem}.home-page{background:#fff}.home-bottom-section{min-height:100px}}@media (max-width: 480px){.start-meeting-btn{min-width:120px;padding:5px 20px;font-size:.9rem}.meeting-input{font-size:.9rem;height:45px}.join-title{font-size:20px}.join-subtitle{font-size:14px}}.chat-panel{width:350px;background:#fff;display:flex;flex-direction:column;border-right:1px solid #e9ecef;z-index:20}.chat-panel.open{transform:translate(0)}.chat-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;background:#f8f9fa;border-bottom:1px solid #e9ecef}.chat-header h3{margin:0;font-size:1.1rem;font-weight:600;color:#343a40}.close-chat{background:transparent;border:1px solid #e9ecef;color:#343a40;width:34px;height:34px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s ease,transform .08s ease,box-shadow .2s ease}.close-chat:hover{background:#e9ecef;box-shadow:0 1px 2px #0000000f}.close-chat:active{transform:scale(.98)}.close-chat:focus-visible{outline:2px solid #60a5fa;outline-offset:2px}.chat-content{flex:1;overflow-y:auto;padding:1rem}.messages{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:8px}.no-messages{color:#6b7280;text-align:center;font-style:italic;padding:20px}.chat-message{display:flex;align-items:flex-end;gap:8px;margin-bottom:4px;width:100%}.chat-message-own{justify-content:flex-end}.chat-message-other{justify-content:flex-start}.chat-message-avatar{width:32px;height:32px;border-radius:50%;background:#25d366;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px;flex-shrink:0}.chat-message-bubble{max-width:70%;padding:8px 12px;border-radius:8px;word-wrap:break-word;font-size:14px;line-height:1.4}.chat-message-own .chat-message-bubble{background:#dcf8c6;color:#000;border-bottom-right-radius:2px}.chat-message-other .chat-message-bubble{background:#fff;color:#000;border:1px solid #e9e9e9;border-bottom-left-radius:2px}.message-input{display:flex;padding:1rem;border-top:1px solid #e9ecef;background:#fff}.message-field{flex:1;padding:.75rem;border:1px solid #e9ecef;border-radius:20px;font-size:.9rem;margin-right:.5rem}.message-field:focus{outline:none;border-color:#4fc0dc}.send-btn{background:#007bff;color:#fff;border:none;border-radius:50%;width:40px;height:40px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s ease}.send-btn:hover{background:#0056b3}.send-btn:active{transform:scale(.95)}@media (max-width: 768px){.chat-panel{width:100%;max-height:50vh}}.pre-join-screen{display:flex;height:100vh;background:#f8f9fa}.pre-join-sidebar{width:400px;background:#fff;padding:2rem;box-shadow:2px 0 10px #0000001a;display:flex;flex-direction:column}.pre-join-logo{height:80px;width:auto;margin-bottom:2rem}.pre-join-content{display:flex;flex-direction:column;justify-content:center;flex:1}.pre-join-title{font-size:2rem;font-weight:700;color:#041032;margin:0 0 1rem;text-align:center}.meeting-name{font-size:1rem;color:#6b7280;margin:0 0 2rem;text-align:center;font-weight:500}.name-input-container{display:flex;flex-direction:column;gap:1rem}.name-input{width:100%;padding:1rem;border:1px solid #4fc0dc;border-radius:30px;font-size:1rem;background:#fff;color:#041032}.name-input:focus{outline:none;border-color:#3f90a4;box-shadow:0 0 0 3px #4fc0dc1a}.join-meeting-btn{width:100%;padding:1rem;background:linear-gradient(180deg,#4fc0dc 0,#041032);color:#fff;border:none;border-radius:30px;font-size:1rem;font-weight:600;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.join-meeting-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #4fc0dc66}.join-meeting-btn:active{transform:translateY(0)}.pre-join-video-area{flex:1;background:linear-gradient(180deg,#3f90a4 0,#041032);display:flex;align-items:center;justify-content:center}.avatar-circle{width:200px;height:200px;border-radius:50%;background:#10b981;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px #0000004d}.avatar-letter{font-size:4rem;font-weight:700;color:#fff;text-transform:uppercase}.conference-page{display:flex;height:100vh;background:linear-gradient(180deg,#3f90a4 0,#041032)}.call-screen{width:100%;height:100vh;display:flex;flex-direction:column;background:#1a1a1a;color:#fff}.loading-screen{background:linear-gradient(180deg,#3f90a4 0,#041032)}.loading{display:flex;justify-content:center;align-items:center;height:100vh;font-size:24px;color:#fff}.main-video-area{flex:1;display:flex;flex-direction:column;position:relative;gap:16px}.video-container{flex:1;display:flex;align-items:center;justify-content:center;position:relative;background:#0d1117}.video-container.speaker-view{background:#000}.speaker-video-main{position:absolute;top:0;left:0;width:100%;height:100%;background:#0d1117;z-index:1}.no-remote-video,.no-video-placeholder{width:100%;height:100%;background:#0d1117;display:flex;align-items:center;justify-content:center}.remote-thumbnails-container{position:absolute;top:20px;left:20px;z-index:20;max-width:220px}.thumbnails-gallery{display:flex;flex-direction:column;gap:10px;max-height:calc(100vh - 200px);overflow-y:auto}.thumbnail-item{position:relative;width:200px;height:150px;background:#1a1a1a;border-radius:8px;overflow:hidden;border:2px solid rgba(255,255,255,.1);cursor:pointer;transition:border-color .3s ease,transform .2s ease}.thumbnail-item:hover{border-color:#ffffff4d;transform:scale(1.05)}.thumbnail-item video{width:100%;height:100%;object-fit:cover}.thumbnail-label{position:absolute;bottom:8px;left:8px;background:#000000b3;color:#fff;padding:4px 8px;border-radius:4px;font-size:12px;font-weight:600}.local-video-pip{position:absolute;bottom:80px;right:20px;width:200px;height:150px;background:#1a1a1a;border-radius:8px;overflow:hidden;border:2px solid rgba(255,255,255,.2);z-index:15;box-shadow:0 4px 12px #0006}.local-video-pip video{width:100%;height:100%;object-fit:cover}.control-bar{position:absolute;bottom:20px;left:50%;transform:translate(-50%);background:#000c;border-radius:25px;padding:8px 16px;border:1px solid rgba(255,255,255,.1);z-index:10;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.control-bar-content{display:flex;align-items:center;gap:8px;padding:4px 0}.duration-badge{display:flex;align-items:center;gap:6px;background:#3b82f633;padding:6px 10px;border-radius:15px;border:1px solid rgba(59,130,246,.3);margin-right:8px}.duration-text{color:#60a5fa;font-weight:600;font-size:12px}.control-btn{background:#fff3;color:#fff;border:none;border-radius:50%;width:44px;height:44px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s ease,transform .1s ease}.control-btn:hover{background:#ffffff4d}.control-btn:active{transform:scale(.95)}.control-btn.leave{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff}.control-btn.leave:hover{background:linear-gradient(135deg,#dc2626,#b91c1c)}.subtitle-content{position:fixed;top:16px;right:16px;max-width:56vw;background:#0009;color:#fff;border:1px solid rgba(255,255,255,.15);border-radius:12px;padding:10px 12px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 8px 24px #0003;z-index:30}.subtitle-text{font-size:14px;line-height:1.4;letter-spacing:.2px;color:#f3f4f6;text-shadow:0 1px 2px rgba(0,0,0,.5);word-break:break-word}.suggestion-content{position:fixed;bottom:100px;left:50%;transform:translate(-50%);background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:16px 24px;border-radius:12px;max-width:600px;z-index:1000;box-shadow:0 4px 20px #667eea66;animation:slideUp .3s ease-out}@keyframes slideUp{0%{opacity:0;transform:translate(-50%) translateY(20px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.suggestion-label{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;opacity:.9}.suggestion-text{font-size:15px;font-weight:500;line-height:1.5;text-align:center}@media (max-width: 768px){.pre-join-screen{flex-direction:column}.pre-join-sidebar{width:100%;padding:1.5rem}.pre-join-logo{height:60px}.pre-join-title{font-size:1.5rem}.pre-join-video-area{min-height:300px}.avatar-circle{width:150px;height:150px}.avatar-letter{font-size:3rem}.remote-thumbnails-container{top:10px;left:10px;max-width:150px}.thumbnail-item{width:150px;height:113px}.local-video-pip{bottom:100px;right:10px;width:150px;height:113px}.control-bar{bottom:10px}.control-bar-content{gap:4px}.control-btn{width:40px;height:40px}.subtitle-content{max-width:90vw;top:10px;right:10px}.subtitle-text{font-size:13px}}@media (max-width: 480px){.pre-join-sidebar{padding:1rem}.pre-join-logo{height:50px}.name-input,.join-meeting-btn{padding:.75rem;font-size:.9rem}.remote-thumbnails-container{max-width:120px}.thumbnail-item,.local-video-pip{width:120px;height:90px}.control-btn{width:36px;height:36px}.duration-badge{padding:4px 8px}.duration-text{font-size:11px}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;overflow:hidden}#root{width:100%;height:100vh}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#ffffff0d}::-webkit-scrollbar-thumb{background:#fff3;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#ffffff4d}@keyframes slideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.fade-in{animation:fadeIn .3s ease-in-out}.slide-in{animation:slideIn .3s ease-in-out}