:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#f5f5f5;background-color:#696969;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}a{font-weight:500;color:#6495ed;text-decoration:inherit}a:hover{color:#4169e1}body{margin:0;padding:0;min-width:320px;min-height:100vh;overflow:hidden;display:flex;flex-direction:column}.call-status-indicator{position:fixed;top:20px;left:20px;background:#000000bf;color:#fff;padding:10px 16px;border-radius:20px;display:flex;align-items:center;gap:10px;z-index:1000;font-size:.9rem;opacity:.6;transition:opacity .3s ease}.call-status-indicator:hover{opacity:1}.call-status-indicator.active{background:#28a745e6;opacity:1}.status-dot{width:8px;height:8px;border-radius:50%;background:#ffffff80}.call-status-indicator.active .status-dot{background:#fff;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.status-text{white-space:nowrap;font-weight:500}h1{font-size:3.2em;line-height:1.1}h2{margin-top:2rem;margin-bottom:.5rem;color:#6495ed}h3{margin:.5rem 0}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em cornflowerblue)}.logo.vanilla:hover{filter:drop-shadow(0 0 2em gold)}.card{padding:2em}.read-the-docs{color:#a9a9a9}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#000;cursor:pointer;transition:border-color .25s}button:hover{border-color:#6495ed}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}.video-container{position:relative;width:100vw;height:calc(100vh - 60px);background-color:gray;overflow:hidden}.top-thumbnails{position:absolute;top:12px;left:50%;transform:translate(-50%);display:flex;gap:8px;align-items:center;justify-content:center;padding:6px 12px;border-radius:14px;background:#00000073;z-index:220;max-width:calc(100% - 6rem);overflow:visible}.thumb-slot{width:140px;height:96px;flex-shrink:0;border-radius:10px;background:#ffffff08;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.06)}.thumb-slot.active{box-shadow:0 4px 16px #646cffe6;border-color:#646cffe6}.thumb-slot.empty{opacity:.35;border-style:dashed}.thumb-slot .slot-name{position:absolute;bottom:6px;left:50%;transform:translate(-50%);z-index:25;font-size:.85rem;padding:.2rem .5rem;border-radius:6px;background:#0009;color:#fff;font-weight:500}.thumb-video{width:100%;height:100%;object-fit:cover;display:block}.thumb-slot .camera-off-overlay.small{position:absolute;top:0;left:0;width:100%;height:100%;z-index:25;display:none;align-items:center;justify-content:center;background:#323232e6;color:#fff;font-size:2rem;border-radius:10px}.thumb-slot .camera-off-overlay.small.active{display:flex}.thumb-slot .muted-indicator.small{position:absolute;top:6px;right:6px;z-index:25;display:none;align-items:center;justify-content:center;width:28px;height:28px;border-radius:6px;background:#0009;color:#fff;font-size:.9rem}.thumb-slot .muted-indicator.small.active{display:flex}.loading-spinner{position:absolute;top:0;left:0;width:100%;height:100%;background:#1e1e1ee6;display:flex;align-items:center;justify-content:center;z-index:20;border-radius:10px}.spinner{width:40px;height:40px;border:3px solid rgba(255,255,255,.1);border-top-color:#646cff;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.leaving-notification{position:absolute;top:0;left:0;width:100%;height:100%;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:30;border-radius:10px;animation:fadeIn .3s ease-in}.leaving-text{color:#fff;font-size:.85rem;font-weight:500;text-align:center;padding:.5rem}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.video-name-tag{position:absolute;bottom:10px;left:10px;background:#000000b3;color:#fff;padding:.4rem .8rem;border-radius:6px;font-size:.85rem;font-weight:500;z-index:20;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border:1px solid rgba(100,108,255,.5)}.video-name-tag.remote{bottom:100px;left:20px;font-size:1rem;padding:.5rem 1rem;display:none}.video-name-tag.remote.active{display:block}#remoteVideo{width:100%;height:100%;margin:0;object-fit:contain;background-color:gray;border-radius:0}.local-video-wrapper{display:none}.call-controls-overlay{position:absolute;bottom:20px;left:50%;transform:translate(-50%);display:flex;gap:1rem;align-items:center;background:#000000b3;padding:.75rem 1.5rem;border-radius:50px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:15}.control-btn{width:50px;height:50px;border-radius:50%;border:2px solid cornflowerblue;background-color:#00000080;color:#fff;font-size:1.5rem;cursor:pointer;transition:all .3s;display:flex;align-items:center;justify-content:center;padding:0}.control-btn:hover:not(:disabled){background-color:#6495ed;transform:scale(1.1)}.control-btn:disabled{opacity:.3;cursor:not-allowed;border-color:gray}.control-btn.muted,.control-btn.camera-off{background-color:#dc143c;border-color:#dc143c}.call-timer{color:#fff;font-size:1.2rem;font-weight:700;min-width:60px;text-align:center;font-variant-numeric:tabular-nums}.local-video{width:100%;height:100%;object-fit:cover;background-color:gray;border-radius:8px;border:2px solid cornflowerblue;box-shadow:0 4px 12px #00000080;cursor:default;-webkit-user-select:none;user-select:none}.camera-off-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#696969;display:none;flex-direction:column;align-items:center;justify-content:center;border-radius:8px;z-index:5}.camera-off-overlay.remote{border-radius:0}.camera-off-overlay.active{display:flex}.camera-off-icon{font-size:4rem;margin-bottom:1rem;opacity:.5}.camera-off-text{color:#f5f5f5;font-size:1.5rem;font-weight:500}.muted-indicator{position:absolute;bottom:10px;left:10px;background:#dc143ce6;color:#fff;padding:.5rem 1rem;border-radius:20px;font-size:.9rem;font-weight:500;display:none;align-items:center;gap:.3rem;z-index:20}.muted-indicator.remote{bottom:80px;left:50%;transform:translate(-50%);font-size:1.1rem;padding:.75rem 1.5rem}.muted-indicator.active{display:flex}.connection-indicator{position:absolute;top:20px;left:20px;background:#000000b3;padding:.5rem 1rem;border-radius:8px;display:none;align-items:center;gap:.5rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:15}.connection-indicator.active{display:flex}.signal-bars{display:flex;gap:2px;align-items:flex-end;height:16px}.signal-bars .bar{width:3px;background:#32cd32;border-radius:2px;transition:background-color .3s}.signal-bars .bar:nth-child(1){height:25%}.signal-bars .bar:nth-child(2){height:50%}.signal-bars .bar:nth-child(3){height:75%}.signal-bars .bar:nth-child(4){height:100%}.connection-indicator.poor .bar{background:#dc143c}.connection-indicator.fair .bar:nth-child(3),.connection-indicator.fair .bar:nth-child(4){background:gray}.connection-indicator.fair .bar{background:orange}.connection-text{color:#fff;font-size:.85rem;font-weight:500}.network-stats{position:absolute;top:60px;left:20px;background:#000c;padding:.75rem 1rem;border-radius:8px;display:none;flex-direction:column;gap:.3rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:15;font-size:.8rem;min-width:180px}.network-stats.active{display:flex}.stat-row{display:flex;justify-content:space-between;color:#fff}.stat-label{color:#d3d3d3;margin-right:.5rem}.chat-panel{position:fixed;right:-350px;top:0;width:350px;height:100vh;background:#000000f2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;flex-direction:column;transition:right .3s;z-index:150;border-left:1px solid cornflowerblue}.chat-panel.open{right:0}.chat-header{padding:1rem;border-bottom:1px solid cornflowerblue;display:flex;justify-content:space-between;align-items:center}.chat-header h4{margin:0;color:#6495ed;font-size:1.2rem}.chat-toggle-btn{background:none;border:none;color:#fff;font-size:1.5rem;cursor:pointer;padding:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center}.chat-toggle-btn:hover{color:#6495ed}.chat-messages{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.75rem}.message{padding:.75rem 1rem;border-radius:12px;max-width:80%;word-wrap:break-word;animation:slideIn .2s}.message-sender{font-size:.75rem;font-weight:600;margin-bottom:.25rem;opacity:.8}@keyframes slideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.message.sent{align-self:flex-end;background:#6495ed;color:#fff}.message.received{align-self:flex-start;background:#696969;color:#fff}.message-time{font-size:.7rem;opacity:.7;margin-top:.25rem;display:block}.chat-input-container{padding:1rem;border-top:1px solid cornflowerblue;display:flex;gap:.5rem}.chat-input-container input{flex:1;min-width:0}.chat-input-container button{padding:.6em 1.5em;white-space:nowrap}.open-chat-btn{position:fixed;right:20px;bottom:120px;width:60px;height:60px;border-radius:50%;background:#6495ed;color:#fff;border:none;font-size:1.8rem;cursor:pointer;display:none;align-items:center;justify-content:center;box-shadow:0 4px 12px #00000080;transition:all .3s;z-index:150}.open-chat-btn.active{display:flex}.open-chat-btn:hover{transform:scale(1.1);background:#4169e1}.chat-badge{position:absolute;top:-8px;right:-8px;background:#dc143c;color:#fff;border-radius:50%;min-width:20px;height:20px;display:none;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;padding:2px;border:2px solid black}.chat-badge.active{display:flex}@keyframes pulse{0%,to{box-shadow:0 4px 12px #00000080}50%{box-shadow:0 4px 20px #646cffcc}}.resize-handle,.video-tooltip{display:none}.controls{position:relative;width:100%;background:#000000f2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:.75rem 2.5rem;display:flex;flex-direction:row;gap:1rem;align-items:center;justify-content:space-between;border-top:1px solid cornflowerblue;z-index:100}.control-group{display:flex;gap:2rem;flex-wrap:wrap;align-items:center}#endCallButton{background:linear-gradient(135deg,#d32f2f,#c62828);color:#fff;font-weight:600;border:2px solid #b71c1c}#endCallButton:hover:not(:disabled){background:linear-gradient(135deg,#b71c1c,#a21919);border-color:#8b0000}#endCallButton:disabled{opacity:.4;cursor:not-allowed}.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#000c;z-index:200;align-items:center;justify-content:center}.modal.active{display:flex}.modal-content{background:#696969;padding:2rem;border-radius:8px;border:2px solid cornflowerblue;max-width:500px;width:90%}.modal-content h3{margin-top:0;color:#6495ed}.settings-section{margin-bottom:1.5rem;padding-bottom:1.5rem;border-bottom:1px solid rgba(100,108,255,.3)}.settings-section:last-of-type{border-bottom:none}.settings-section h4{margin:0 0 1rem;color:#f5f5f5;font-size:1rem;font-weight:600}.setting-group{margin:1rem 0;display:flex;flex-direction:column;gap:.5rem}.setting-group label{color:#f5f5f5;font-weight:500}.setting-group select{padding:.6em 1em;font-size:1em;border-radius:8px;border:1px solid cornflowerblue;background-color:#000;color:#f5f5f5;font-family:inherit;cursor:pointer}.setting-group select:focus{outline:2px solid cornflowerblue}.setting-group label{display:flex;align-items:center;gap:.5rem;cursor:pointer}.setting-group input[type=checkbox]{cursor:pointer;width:18px;height:18px}.call-id-display{display:flex;gap:.5rem;margin:1rem 0}.call-id-display input{flex:1;font-weight:700;text-align:center;font-size:1.1em}.share-buttons{display:flex;flex-direction:column;gap:.5rem;margin:1rem 0}.modal-buttons{display:flex;gap:1rem;margin-top:1rem}.modal-buttons button{flex:1}.call-info-section{margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid rgba(100,108,255,.3)}.call-info-section p{margin:.5rem 0}.participants-section{margin-top:1rem}.participants-section h4{margin:.5rem 0;color:#6495ed;font-size:1rem}.participants-list{max-height:200px;overflow-y:auto;margin:.75rem 0;padding:.5rem;background:#0003;border-radius:8px;border:1px solid rgba(100,108,255,.2)}.participant-item{display:flex;align-items:center;justify-content:space-between;padding:.6rem .75rem;margin:.25rem 0;background:#ffffff0d;border-radius:6px;border-left:3px solid cornflowerblue}.participant-name{font-weight:500;color:#fff}.participant-badge{background:linear-gradient(135deg,#646cff,#535bf2);color:#fff;padding:.2rem .6rem;border-radius:12px;font-size:.75rem;font-weight:600;text-transform:uppercase}input{padding:.6em 1em;font-size:1em;border-radius:8px;border:1px solid cornflowerblue;background-color:#000;color:#f5f5f5;font-family:inherit;min-width:250px}input:focus{outline:2px solid cornflowerblue}button:disabled{opacity:.5;cursor:not-allowed;border-color:gray}button:disabled:hover{border-color:gray}@media(max-width:768px){.local-video-wrapper{width:120px;height:90px;top:10px;right:10px}.controls{flex-direction:column;padding:1rem;margin-bottom:1rem}.control-group{gap:.5rem;flex-direction:column;width:100%}input{min-width:100%}button{padding:.5em 1em;font-size:.9em;width:100%}}@media(prefers-color-scheme:light){:root{color:#2f4f4f;background-color:#fff}a:hover{color:#4169e1}button{background-color:#f5f5f5}input{background-color:#f5f5f5;color:#2f4f4f}video{border-color:#4169e1}h2{color:#4169e1}}