a[data-v-0b2a8caf]{list-style:none;text-decoration:none;color:#fff}.install-btn[data-v-0b2a8caf]{display:inline-block;background-color:#006cb8;color:#fff;padding:12px 20px;border:none;border-radius:6px;text-decoration:none;transition:all .2s;animation:size-0b2a8caf 1s infinite ease-in-out}.install-btn[data-v-0b2a8caf]:hover{background-color:#0055a0}@keyframes size-0b2a8caf{0%,to{transform:scale(.9)}50%{transform:scale(1)}}:root{--primary-color: #2b5278;--primary-light: #3a6ea5;--secondary-color: #6c7a89;--accent-color: #5294e2;--text-color: #757575;--text-secondary: #666;--bg-color: #f5f5f5;--bg-secondary: #fff;--border-color: #e0e0e0;--shadow-color: rgba(0, 0, 0, .1);--message-sent: #e3f2fd;--message-received: #fff;--transition-speed: .3s;--success-color: #4caf50;--warning-color: #ff9800;--error-color: #f44336;--sidebar-width: 320px;--header-height: 60px;--footer-height: 60px;--safe-area-inset-bottom: env(safe-area-inset-bottom, 0px)}.dark-mode{--primary-color: #3a6ea5;--primary-light: #4a7eb5;--secondary-color: #8c9baa;--accent-color: #64b5f6;--text-color: #e0e0e0;--text-secondary: #aaa;--bg-color: #1a1a1a;--bg-secondary: #2a2a2a;--border-color: #444;--shadow-color: rgba(0, 0, 0, .3);--message-sent: #2b5278;--message-received: #333;--success-color: #81c784;--warning-color: #ffb74d;--error-color: #e57373}*{margin:0;padding:0;box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;-webkit-tap-highlight-color:transparent}html{font-size:16px;height:100vh;width:100%}body{background-color:var(--bg-color);color:var(--text-color);transition:background-color var(--transition-speed),color var(--transition-speed);height:100vh;width:100%;overflow:hidden;position:fixed;touch-action:manipulation}.app-container{display:flex;height:100vh;width:100%;overflow:hidden;position:relative;background-color:var(--bg-color)}.sidebar{width:var(--sidebar-width);background-color:var(--bg-secondary);border-right:1px solid var(--border-color);display:flex;flex-direction:column;transition:all var(--transition-speed);z-index:10}.sidebar-header{padding:15px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border-color);height:var(--header-height);min-height:var(--header-height)}.logo{display:flex;align-items:center;gap:10px;color:var(--primary-color)}.logo i{font-size:24px}.logo h1{font-size:18px;font-weight:600}.theme-toggle{background:none;border:none;color:var(--text-secondary);font-size:18px;cursor:pointer;transition:color .2s;padding:8px;border-radius:50%}.theme-toggle:hover{color:var(--primary-color);background-color:#0000000d}.connection-status-bar{padding:8px 15px;background-color:#0000000d;border-bottom:1px solid var(--border-color)}.status-text{font-size:12px;display:flex;align-items:center}.status-text:before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}.status-text.initializing:before{background-color:var(--warning-color);animation:pulse 1.5s infinite}.status-text.connected:before{background-color:var(--success-color)}.status-text.disconnected:before{background-color:var(--error-color)}.status-text.error:before{background-color:var(--error-color)}@keyframes pulse{0%{opacity:.6}50%{opacity:1}to{opacity:.6}}.sidebar-search{padding:15px}.search-container{display:flex;align-items:center;background-color:var(--bg-color);border-radius:20px;padding:8px 15px}.search-container i{color:var(--text-secondary);margin-right:10px}.search-container input{background:none;border:none;outline:none;color:var(--text-color);width:100%;font-size:14px}.chat-list{flex:1;overflow-y:auto;padding:10px 0;-webkit-overflow-scrolling:touch}.chat-item{display:flex;align-items:center;padding:12px 15px;cursor:pointer;transition:background-color .2s;border-bottom:1px solid var(--border-color)}.chat-item:hover{background-color:var(--bg-color)}.chat-item:active{background-color:#0000000d}.chat-item.active{background-color:#0000000d;border-left:3px solid var(--primary-color)}.chat-avatar{width:50px;height:50px;border-radius:50%;background-color:var(--primary-color);color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;margin-right:15px;flex-shrink:0}.chat-info{flex:1;min-width:0}.chat-name{font-weight:600;margin-bottom:5px;display:flex;align-items:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.connection-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-left:6px;flex-shrink:0}.connection-dot.connected{background-color:var(--success-color)}.connection-dot.disconnected{background-color:var(--error-color)}.chat-preview{font-size:13px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}.chat-meta{display:flex;flex-direction:column;align-items:flex-end;margin-left:10px;flex-shrink:0}.chat-time{font-size:12px;color:var(--text-secondary);margin-bottom:5px}.chat-badge{background-color:var(--primary-color);color:#fff;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:12px}.sidebar-footer{padding:15px;border-top:1px solid var(--border-color);display:flex;flex-direction:column;gap:10px;height:var(--footer-height);min-height:var(--footer-height);padding-bottom:calc(15px + var(--safe-area-inset-bottom))}.new-chat-btn,.create-connection-btn{display:flex;align-items:center;justify-content:center;gap:10px;border:none;border-radius:20px;padding:10px 20px;width:100%;cursor:pointer;transition:background-color .2s,transform .2s;font-weight:600}.new-chat-btn{background-color:var(--primary-color);color:#fff}.new-chat-btn:hover{background-color:var(--primary-light);transform:translateY(-2px)}.new-chat-btn:active{transform:translateY(0)}.create-connection-btn{background-color:var(--accent-color);color:#fff}.create-connection-btn:hover{background-color:var(--primary-light);transform:translateY(-2px)}.create-connection-btn:active{transform:translateY(0)}.create-chat-btn{background-color:var(--accent-color);color:#fff}.create-chat-btn:hover{background-color:var(--primary-light);transform:translateY(-2px)}.create-chat-btn:active{transform:translateY(0)}.chat-area{flex:1;display:flex;flex-direction:column;background-color:var(--bg-color);position:relative;width:calc(100% - var(--sidebar-width))}.chat-header{padding:15px;display:flex;justify-content:space-between;align-items:center;background-color:var(--bg-secondary);border-bottom:1px solid var(--border-color);height:var(--header-height);min-height:var(--header-height)}.chat-header .chat-info{display:flex;flex-direction:column}.chat-header h2{font-size:18px;margin-bottom:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.connection-status{font-size:13px;color:var(--text-secondary);display:flex;align-items:center}.connection-status:before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}.status-connecting{background-color:var(--warning-color);animation:pulse 1.5s infinite}.status-connected{background-color:var(--success-color)}.status-disconnected,.status-error{background-color:var(--error-color)}.chat-actions{display:flex;gap:15px}.action-btn{background:none;border:none;color:var(--text-secondary);font-size:18px;cursor:pointer;transition:color .2s;padding:8px;border-radius:50%}.action-btn:hover:not(:disabled){color:var(--primary-color);background-color:#0000000d}.action-btn:active:not(:disabled){background-color:#0000001a}.action-btn:disabled{opacity:.5;cursor:not-allowed}.messages-container{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;-webkit-overflow-scrolling:touch;background-color:var(--bg-color);position:relative;height:100vh;min-height:0}.welcome-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-align:center;color:var(--text-secondary);padding:20px}.welcome-icon{font-size:60px;color:var(--primary-color);margin-bottom:20px}.welcome-screen h2{margin-bottom:10px}.welcome-screen p{margin-bottom:15px}.connection-tip{background-color:#0000000d;border-left:3px solid var(--warning-color);padding:10px;margin-top:20px;font-size:13px;max-width:80%;text-align:left}.message{max-width:70%;margin-bottom:15px;padding:10px 15px;border-radius:18px;position:relative;animation:fadeIn .3s ease-in-out;word-wrap:break-word;overflow-wrap:break-word}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.message-sent{align-self:flex-end;background-color:var(--message-sent);border-bottom-right-radius:4px;margin-left:30%}.message-received{align-self:flex-start;background-color:var(--message-received);border-bottom-left-radius:4px;box-shadow:0 1px 2px var(--shadow-color);margin-right:30%}.message-content{margin-bottom:5px}.message-time{font-size:11px;color:var(--text-secondary);text-align:right;margin-top:4px}.message-input-container{display:flex;align-items:center;padding:10px 15px;background-color:var(--bg-secondary);border-top:1px solid var(--border-color);min-height:var(--footer-height);padding-bottom:calc(10px + var(--safe-area-inset-bottom));z-index:5}.attachment-btn{background:none;border:none;color:var(--text-secondary);font-size:18px;cursor:pointer;margin-right:10px;transition:color .2s;padding:8px;border-radius:50%}.attachment-btn:hover{color:var(--primary-color);background-color:#0000000d}.attachment-btn:active{background-color:#0000001a}.message-input{flex:1;background-color:var(--bg-color);border-radius:20px;padding:10px 15px;min-height:40px;display:flex;align-items:center}.message-input input{width:100%;background:none;border:none;outline:none;color:var(--text-color);font-size:15px}.send-btn{background:none;border:none;color:var(--primary-color);font-size:18px;cursor:pointer;margin-left:10px;transition:color .2s;padding:8px;border-radius:50%}.send-btn:hover:not(:disabled){color:var(--primary-light);background-color:#0000000d}.send-btn:active:not(:disabled){background-color:#0000001a}.send-btn:disabled{opacity:.5;cursor:not-allowed}.file-info{flex:1;margin-top:8px}.file-info a{display:flex;align-items:center;color:var(--primary-color);text-decoration:none;font-size:14px;padding:5px;border-radius:4px}.file-info a:hover{background-color:#0000000d}.file-info a i{margin-right:5px;font-size:16px}.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;z-index:1000;justify-content:center;align-items:center;padding:20px;box-sizing:border-box}.modal.active{display:flex;animation:fadeIn .3s ease-in-out}.modal-content{background-color:var(--bg-secondary);border-radius:10px;width:90%;max-width:500px;box-shadow:0 5px 15px var(--shadow-color);animation:slideIn .3s ease-in-out;max-height:90vh;display:flex;flex-direction:column;overflow:hidden}.call-modal-content{max-width:800px}@keyframes slideIn{0%{transform:translateY(-50px);opacity:0}to{transform:translateY(0);opacity:1}}.modal-header{padding:15px;border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;align-items:center}.close-btn{background:none;border:none;font-size:24px;cursor:pointer;color:var(--text-secondary);padding:5px;border-radius:50%;display:flex;align-items:center;justify-content:center;width:30px;height:30px}.close-btn:hover{background-color:#0000000d}.close-btn:active{background-color:#0000001a}.modal-body{padding:20px;overflow-y:auto;-webkit-overflow-scrolling:touch;flex:1}.connection-tabs{display:flex;margin-bottom:20px;border-bottom:1px solid var(--border-color)}.tab-btn{flex:1;background:none;border:none;padding:10px;cursor:pointer;color:var(--text-secondary);transition:color .2s;font-weight:600}.tab-btn.active{color:var(--primary-color);border-bottom:2px solid var(--primary-color)}.tab-content{margin-top:20px}.tab-content.hidden{display:none}.id-container{display:flex;margin:15px 0}.id-container input{flex:1;padding:10px;border:1px solid var(--border-color);border-radius:5px 0 0 5px;background-color:var(--bg-color);color:var(--text-color);font-size:15px}.peer-id-input{font-family:monospace!important;font-size:16px!important;font-weight:700!important;letter-spacing:.5px!important;background-color:var(--bg-color)!important;color:var(--text-color)!important;padding:12px!important;width:100%!important;border:2px solid var(--primary-color)!important;border-radius:5px 0 0 5px!important}.id-container{display:flex!important;margin:15px 0!important;width:100%!important}.id-container{display:flex;margin:15px 0;width:100%}.id-container input{font-size:16px!important;padding:12px;background-color:var(--bg-color)!important;color:var(--text-color)!important;border:1px solid var(--border-color);width:100%;font-family:monospace;letter-spacing:.5px}@media screen and (max-width: 768px){.id-container input{font-size:14px!important}}@supports (-webkit-appearance: none){.id-container input{-webkit-appearance:none;-moz-appearance:none;appearance:none}}.copy-btn{background-color:var(--primary-color);color:#fff;border:none;border-radius:0 5px 5px 0;padding:10px 15px;cursor:pointer;transition:background-color .2s}.copy-btn:hover{background-color:var(--primary-light)}.copy-btn:active{background-color:var(--primary-color)}.form-group{margin-bottom:15px}.form-group label{display:block;margin-bottom:5px;color:var(--text-secondary);font-weight:500}.form-group input{width:100%;padding:12px;border:1px solid var(--border-color);border-radius:5px;background-color:var(--bg-color);color:var(--text-color);font-size:15px}.primary-btn{background-color:var(--accent-color);color:#fff;border:none;border-radius:5px;padding:12px 15px;cursor:pointer;width:100%;transition:all .3s ease;font-weight:700;font-size:16px}.primary-btn:hover{background-color:var(--primary-light);transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}.primary-btn:active{transform:translateY(0);box-shadow:none}.primary-btn:disabled{opacity:.7;cursor:not-allowed;transform:none;box-shadow:none}.connection-progress{margin-top:15px;padding:10px;border-radius:5px;background-color:var(--bg-color)}.connection-progress.hidden{display:none}.progress-bar{height:4px;background-color:var(--accent-color);width:0%;border-radius:2px;animation:progress 15s linear forwards}@keyframes progress{0%{width:0%}to{width:100%}}.connection-help{margin-top:20px;padding:15px;background-color:#0000000d;border-radius:5px;font-size:13px}.connection-help p{margin-bottom:10px;font-weight:700;color:var(--accent-color);display:flex;align-items:center}.connection-help p i{margin-right:5px}.connection-help ul{padding-left:20px}.connection-help li{margin-bottom:5px}.video-container{display:flex;flex-direction:column;margin:20px 0;position:relative;height:400px;border-radius:10px;overflow:hidden}.remote-video-wrapper{width:100%;height:100%;background-color:#000;border-radius:10px;overflow:hidden}.local-video-wrapper{position:absolute;bottom:10px;right:10px;width:150px;height:100px;background-color:#333;border-radius:5px;overflow:hidden;border:2px solid white;box-shadow:0 2px 10px #0000004d}#remote-video,#local-video{width:100%;height:100%;object-fit:cover}.call-status-container{text-align:center;margin-bottom:10px}#call-status{font-weight:700;color:var(--primary-color)}.call-controls{display:flex;justify-content:center;gap:15px;margin-top:20px}.call-control-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:10px 20px;border:none;border-radius:5px;cursor:pointer;transition:all .2s}.call-control-btn i{font-size:20px}.end-call{background-color:var(--error-color);color:#fff}.end-call:hover{background-color:#d32f2f}.end-call:active{transform:scale(.95)}.answer-call{background-color:var(--success-color);color:#fff}.answer-call:hover{background-color:#388e3c}.answer-call:active{transform:scale(.95)}.reject-call{background-color:var(--error-color);color:#fff}.reject-call:hover{background-color:#d32f2f}.reject-call:active{transform:scale(.95)}.call-control-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.mobile-nav{display:none;position:fixed;bottom:0;left:0;width:0;height:0;background-color:var(--bg-secondary);border-top:1px solid var(--border-color);z-index:100;padding:10px 0;padding-bottom:calc(10px + var(--safe-area-inset-bottom))}.mobile-nav-inner{display:flex;justify-content:space-around}.mobile-nav-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px;color:var(--text-secondary);text-decoration:none;font-size:12px;border-radius:8px;transition:background-color .2s}.mobile-nav-btn i{font-size:20px;margin-bottom:5px}.mobile-nav-btn.active{color:var(--primary-color)}.mobile-nav-btn:active{background-color:#0000000d}.sidebar-toggle{display:none;background:none;border:none;color:var(--text-secondary);font-size:20px;cursor:pointer;padding:8px;border-radius:50%}.sidebar-toggle:hover{color:var(--primary-color);background-color:#0000000d}.sidebar-toggle:active{background-color:#0000001a}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;text-align:center;color:var(--text-secondary)}.sidebar-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;z-index:999}.sidebar-overlay.active{display:block}@media (max-width: 992px){:root{--sidebar-width: 280px}}@media (max-width: 768px){:root{--sidebar-width: 100%;--header-height: 56px;--footer-height: 56px}.app-container{flex-direction:column}.sidebar{position:fixed;top:0;left:0;height:100%;transform:translate(-100%);transition:transform .3s ease;z-index:1000}.sidebar.active{transform:translate(0)}.chat-area{width:100%;margin-left:0}.sidebar-toggle{display:block;margin-right:10px}.mobile-nav{display:block}.chat-header{padding:10px 15px}.chat-header h2{font-size:16px}.messages-container{padding:15px}.message{max-width:80%}.message-sent{margin-left:20%}.message-received{margin-right:20%}.welcome-screen{padding:15px}.welcome-icon{font-size:50px}.welcome-screen h2{font-size:20px}.connection-tip{max-width:100%}.modal-content{width:95%;max-height:80vh}.video-container{height:300px}.local-video-wrapper{width:100px;height:70px}.call-controls{flex-wrap:wrap}.messages-container{overflow-y:auto;-webkit-overflow-scrolling:touch;flex:1;min-height:0;height:auto;max-height:calc(100vh - var(--header-height) - var(--footer-height) - var(--safe-area-inset-bottom))}.chat-area{display:flex;flex-direction:column;height:100vh;overflow:hidden}.message-input-container{margin-bottom:15px}.mobile-nav-btn{opacity:1;visibility:visible}}@media (max-width: 480px){.message{max-width:90%}.app-container,.chat-area{height:100vh;width:100%}.message-sent{margin-left:10%}.message-received{margin-right:10%}.modal-content{width:100%;max-height:90vh;border-radius:10px 10px 0 0;margin-top:auto}.modal{align-items:flex-end;padding:0}.video-container{height:250px}.local-video-wrapper{width:80px;height:60px}.call-control-btn{padding:8px 15px}.call-control-btn i{font-size:18px}.call-control-btn span{font-size:12px}.id-container input{font-size:16px;padding:12px;background-color:var(--bg-color);color:var(--text-color);border:1px solid var(--border-color);width:100%}.message-input{min-height:44px}.message-input input{font-size:16px}}@supports (-webkit-touch-callout: none){.messages-container{padding-bottom:20px}.message-input-container,.mobile-nav{padding-bottom:calc(15px + var(--safe-area-inset-bottom))}.message-input input,.id-container input,.form-group input{font-size:16px}}.hidden{display:none}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border:0}.no-scroll{overflow:hidden}.connection-tips{margin-top:15px;padding:10px;background-color:#0000000d;border-radius:5px;font-size:13px}.connection-tips p{font-weight:700;margin-bottom:5px;display:flex;align-items:center}.connection-tips p i{margin-right:5px;color:var(--accent-color)}.connection-tips ul{padding-left:20px;margin-top:5px}.connection-tips li{margin-bottom:3px}.progress-bar{height:4px;background-color:var(--accent-color);width:0%;border-radius:2px;animation:progress 20s ease-in-out forwards}@keyframes progress{0%{width:0%}20%{width:20%}50%{width:50%}80%{width:70%}to{width:90%}}.connection-progress-text{font-size:12px;color:var(--text-secondary);margin-top:5px;text-align:center}@media (max-width: 768px){.primary-btn,.copy-btn,.form-group input,.tab-btn{min-height:44px}.peer-id-input{font-size:16px!important;letter-spacing:1px!important;padding:14px!important;background-color:rgba(var(--primary-color),.05)!important;border:2px solid var(--primary-color)!important}}