#app,body,html{height:100%;margin:0}.page-index[data-v-2cc9e9af]{width:100vw;height:100vh;display:flex;align-items:center;justify-content:center}.resizable-drawer[data-v-2cc9e9af] .el-drawer__body{padding:0;position:relative;height:100%}.drawer-content[data-v-2cc9e9af]{position:relative;height:100%}.resize-handle[data-v-2cc9e9af]{position:absolute;top:0;left:0;width:6px;height:100%;cursor:col-resize;background:transparent}.resize-handle[data-v-2cc9e9af]:hover{background:rgba(0,0,0,.06)}.drawer-inner[data-v-2cc9e9af]{height:100%;display:flex;flex-direction:column}.drawer-header[data-v-2cc9e9af]{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid #ebeef5}.drawer-body[data-v-2cc9e9af]{flex:1;min-height:0;padding:16px;overflow:auto}.metric[data-v-2cc9e9af]{display:flex;align-items:baseline;justify-content:space-between}.metric .label[data-v-2cc9e9af]{color:#909399}.metric .value[data-v-2cc9e9af]{font-weight:600}.responsive-box[data-v-2cc9e9af]{margin-top:16px;display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px}.responsive-box .item[data-v-2cc9e9af]{background:#f5f7fa;border:1px solid #ebeef5;border-radius:4px;padding:12px;text-align:center}.meeting-btn[data-v-2cc9e9af]{width:100%;height:100%;display:flex;align-items:center;justify-content:center;gap:40px}.meeting-form[data-v-2cc9e9af]{width:100%;height:100%;display:flex;flex-direction:column}.controls[data-v-2cc9e9af]{max-width:500px;margin:0 auto}.meeting-form .call-panel[data-v-2cc9e9af],.meeting-form form[data-v-2cc9e9af]{flex:1 1 0%}.demo-drawer__footer[data-v-2cc9e9af]{display:flex}.demo-drawer__footer button[data-v-2cc9e9af]{flex:1 1 0%}.video-grid[data-v-2cc9e9af]{display:flex;gap:12px;align-items:flex-start}.video-grid.share[data-v-2cc9e9af]{display:block}.video-grid.column[data-v-2cc9e9af]{flex-direction:column}.video-card[data-v-2cc9e9af]{position:relative;background:#000;border-radius:8px;overflow:hidden;min-height:180px}.video-card video[data-v-2cc9e9af]{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;background:#000}.video-card.local.mirror video[data-v-2cc9e9af],.video-card.mirror video[data-v-2cc9e9af],.video-card.remote.mirror video[data-v-2cc9e9af],.video-card.share.mirror video[data-v-2cc9e9af]{transform:scaleX(-1)}.video-card video[data-v-2cc9e9af]{transition:transform .3s ease-in-out}@media (max-width:768px){.video-card.mirror video[data-v-2cc9e9af]{transform:scaleX(-1)}}.badge[data-v-2cc9e9af]{position:absolute;left:8px;bottom:8px;background:rgba(0,0,0,.5);color:#fff;padding:2px 6px;border-radius:4px;font-size:12px}.status[data-v-2cc9e9af]{position:absolute;right:8px;bottom:8px;display:flex;gap:8px}.status i[data-v-2cc9e9af]{color:#67c23a;background:rgba(0,0,0,.5);padding:2px 6px;border-radius:4px}.status i.off[data-v-2cc9e9af]{color:#e6a23c}@media (max-width:768px){.video-grid[data-v-2cc9e9af]{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}}.video-grid-item[data-v-2cc9e9af]{width:100%}.user-card[data-v-2cc9e9af]{text-align:center}.local[data-v-2cc9e9af]{position:fixed;top:80px;right:40px;width:200px;height:200px;z-index:9999}.share[data-v-2cc9e9af]{width:100%;height:100%}@media (max-width:768px){.drawer-content[data-v-2cc9e9af],.drawer-inner[data-v-2cc9e9af],.resizable-drawer .el-drawer__body[data-v-2cc9e9af],.resizable-drawer[data-v-2cc9e9af]{width:100vw!important;height:100vh!important}.drawer-header[data-v-2cc9e9af]{padding:16px 20px;font-size:18px}.drawer-body[data-v-2cc9e9af]{padding:20px}.meeting-btn[data-v-2cc9e9af]{flex-direction:column;gap:20px}.meeting-btn .el-button[data-v-2cc9e9af]{width:100%;height:50px;font-size:16px}.meeting-btn .el-button+.el-button[data-v-2cc9e9af]{margin-left:0}.video-grid[data-v-2cc9e9af]{width:100%;flex-direction:column;gap:16px}.video-grid-item[data-v-2cc9e9af]{width:100%}.video-card[data-v-2cc9e9af]{height:200px}.local[data-v-2cc9e9af]{position:fixed;top:20px;right:20px;width:120px;height:120px;z-index:9999}}.scroll[data-v-2cc9e9af]{width:100%;height:calc(100vh - 160px);overflow-y:auto}.video-panel[data-v-2cc9e9af]{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}.user-list[data-v-1329f89f]{max-width:500px;margin:0 auto}.card-header[data-v-1329f89f]{display:flex;justify-content:space-between;align-items:center}.empty-list[data-v-1329f89f]{padding:40px 0}.user-item[data-v-1329f89f]{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid #f0f0f0}.user-item[data-v-1329f89f]:last-child{border-bottom:none}.user-info[data-v-1329f89f]{min-width:200px;display:flex;align-items:center}.user-info i[data-v-1329f89f]{margin-right:8px;color:#409eff}.username[data-v-1329f89f]{font-weight:500}.user-actions[data-v-1329f89f]{display:flex;gap:8px}.page-index[data-v-1329f89f]{width:100vw;height:100vh;display:flex;align-items:center;justify-content:center}.resizable-drawer[data-v-1329f89f] .el-drawer__body{padding:0;position:relative;height:100%}.drawer-content[data-v-1329f89f]{position:relative;height:100%}.resize-handle[data-v-1329f89f]{position:absolute;top:0;left:0;width:6px;height:100%;cursor:col-resize;background:transparent}.resize-handle[data-v-1329f89f]:hover{background:rgba(0,0,0,.06)}.drawer-inner[data-v-1329f89f]{height:100%;display:flex;flex-direction:column}.drawer-header[data-v-1329f89f]{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid #ebeef5}.drawer-body[data-v-1329f89f]{flex:1;min-height:0;padding:16px;overflow:auto}.metric[data-v-1329f89f]{display:flex;align-items:baseline;justify-content:space-between}.metric .label[data-v-1329f89f]{color:#909399}.metric .value[data-v-1329f89f]{font-weight:600}.responsive-box[data-v-1329f89f]{margin-top:16px;display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px}.responsive-box .item[data-v-1329f89f]{background:#f5f7fa;border:1px solid #ebeef5;border-radius:4px;padding:12px;text-align:center}.meeting-btn[data-v-1329f89f]{width:100%;height:100%;display:flex;align-items:center;justify-content:center;gap:40px}.meeting-form[data-v-1329f89f]{width:100%;height:100%;display:flex;flex-direction:column}.controls[data-v-1329f89f]{max-width:500px;margin:0 auto}.meeting-form .call-panel[data-v-1329f89f],.meeting-form form[data-v-1329f89f]{flex:1 1 0%}.demo-drawer__footer[data-v-1329f89f]{display:flex}.demo-drawer__footer button[data-v-1329f89f]{flex:1 1 0%}.video-grid[data-v-1329f89f]{display:flex;gap:12px;align-items:flex-start}.video-grid.share[data-v-1329f89f]{display:block}.video-grid.column[data-v-1329f89f]{flex-direction:column}.video-card[data-v-1329f89f]{position:relative;background:#000;border-radius:8px;overflow:hidden;min-height:180px}.video-card video[data-v-1329f89f]{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;background:#000}.video-card.local.mirror video[data-v-1329f89f],.video-card.mirror video[data-v-1329f89f],.video-card.remote.mirror video[data-v-1329f89f],.video-card.share.mirror video[data-v-1329f89f]{transform:scaleX(-1)}.video-card video[data-v-1329f89f]{transition:transform .3s ease-in-out}@media (max-width:768px){.video-card.mirror video[data-v-1329f89f]{transform:scaleX(-1)}}.badge[data-v-1329f89f]{position:absolute;left:8px;bottom:8px;background:rgba(0,0,0,.5);color:#fff;padding:2px 6px;border-radius:4px;font-size:12px}.status[data-v-1329f89f]{position:absolute;right:8px;bottom:8px;display:flex;gap:8px}.status i[data-v-1329f89f]{color:#67c23a;background:rgba(0,0,0,.5);padding:2px 6px;border-radius:4px}.status i.off[data-v-1329f89f]{color:#e6a23c}@media (max-width:768px){.video-grid[data-v-1329f89f]{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}}.video-grid-item[data-v-1329f89f]{width:100%}.user-card[data-v-1329f89f]{text-align:center}.local[data-v-1329f89f]{position:fixed;top:80px;right:40px;width:200px;height:200px;z-index:9999}.share[data-v-1329f89f]{width:100%;height:100%}@media (max-width:768px){.drawer-content[data-v-1329f89f],.drawer-inner[data-v-1329f89f],.resizable-drawer .el-drawer__body[data-v-1329f89f],.resizable-drawer[data-v-1329f89f]{width:100vw!important;height:100vh!important}.drawer-header[data-v-1329f89f]{padding:16px 20px;font-size:18px}.drawer-body[data-v-1329f89f]{padding:20px}.meeting-btn[data-v-1329f89f]{flex-direction:column;gap:20px}.meeting-btn .el-button[data-v-1329f89f]{width:100%;height:50px;font-size:16px}.meeting-btn .el-button+.el-button[data-v-1329f89f]{margin-left:0}.video-grid[data-v-1329f89f]{width:100%;flex-direction:column;gap:16px}.video-grid-item[data-v-1329f89f]{width:100%}.video-card[data-v-1329f89f]{height:200px}.local[data-v-1329f89f]{position:fixed;top:20px;right:20px;width:120px;height:120px;z-index:9999}}.scroll[data-v-1329f89f]{width:100%;height:calc(100vh - 160px);overflow-y:auto}.video-panel[data-v-1329f89f]{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}.webrtc-component[data-v-75278962]{padding:20px}.video-container[data-v-75278962]{display:flex;gap:20px;margin-bottom:20px}.local-video[data-v-75278962]{flex:1;position:relative;background:#000;border-radius:8px;overflow:hidden}.remote-videos[data-v-75278962]{flex:2;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}.remote-video[data-v-75278962]{position:relative;background:#000;border-radius:8px;overflow:hidden}video[data-v-75278962]{width:100%;height:200px;-o-object-fit:cover;object-fit:cover}.video-label[data-v-75278962]{position:absolute;bottom:5px;left:5px;background:rgba(0,0,0,.7);color:#fff;padding:2px 6px;border-radius:3px;font-size:12px}.controls[data-v-75278962]{margin-bottom:20px;text-align:center}.controls .el-button[data-v-75278962]{margin:0 5px}.status-panel[data-v-75278962]{margin-bottom:20px}.status-item[data-v-75278962]{display:flex;align-items:center;margin-bottom:10px}.status-item span[data-v-75278962]:first-child{margin-right:10px;font-weight:700}.log-panel[data-v-75278962]{margin-bottom:20px}.log-content[data-v-75278962]{height:200px;overflow-y:auto;background:#f5f5f5;padding:10px;border-radius:4px}.log-item[data-v-75278962]{margin-bottom:5px;font-size:12px}.log-time[data-v-75278962]{color:#666;margin-right:10px}.log-message[data-v-75278962]{color:#333}.log-item[data-type=error] .log-message[data-v-75278962]{color:#f56c6c}.hidden{display:none}.container{width:100vw;height:100vh;background:linear-gradient(180deg,#1679e4,#021a71)}.header{width:100%;height:6rem;border-radius:0 0 1rem 1rem;background-color:#1979e1;box-shadow:0 5px 20px 0 rgba(0,0,0,.2)}.content{height:calc(100vh - 6rem - 50px);padding:20px;margin-top:10px}.content .text{color:#fff}.title-bar{position:relative;color:#fff;font-size:1rem;margin-top:1.2rem;margin-bottom:.8rem;padding-left:20px}.title-bar:before{content:"";position:absolute;top:9px;left:0;width:8px;height:8px;background-color:#fff;border-radius:50%}.cus-info{color:#fff;background-color:#033d9e;border-radius:8px;padding:20px}.video{height:calc(100vh - 196px);border-radius:10px;margin-top:10px}.buttons{width:80%;height:240px;margin:0 auto;position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:space-around}.button-item{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px}.button-item:first-child button{width:80px;height:80px}.button-item button{width:50px;height:50px;border-radius:50%}.button-item.hidden{display:none}.status[data-v-5e90c88e]{margin:10px 0;padding:5px 10px;border-radius:4px}.connected[data-v-5e90c88e]{color:green;background-color:#e8f5e8}.disconnected[data-v-5e90c88e]{color:red;background-color:#ffe8e8}.messages[data-v-5e90c88e]{max-height:400px;overflow-y:auto;border:1px solid #ddd;padding:10px;margin:10px 0}.message[data-v-5e90c88e]{padding:10px;margin:5px 0;border-radius:4px;border-left:4px solid #ddd}.message.connected[data-v-5e90c88e]{border-left-color:#28a745;background-color:#d4edda}.message.heartbeat[data-v-5e90c88e]{border-left-color:#17a2b8;background-color:#d1ecf1}.message.broadcast[data-v-5e90c88e]{border-left-color:#ffc107;background-color:#fff3cd}.message.direct[data-v-5e90c88e]{border-left-color:#007bff;background-color:#cce7ff}.message-header[data-v-5e90c88e]{display:flex;justify-content:space-between;font-size:12px;color:#666;margin-bottom:5px}.message-content[data-v-5e90c88e]{font-size:14px;word-break:break-word}.connection-id[data-v-5e90c88e]{font-size:11px;color:#999;margin-top:3px}button[data-v-5e90c88e]{padding:8px 16px;background-color:#007bff;color:#fff;border:none;border-radius:4px;cursor:pointer}button[data-v-5e90c88e]:hover{background-color:#0056b3}.optimization-demo[data-v-2dcf7ae3]{padding:20px;max-width:1200px;margin:0 auto}.demo-header[data-v-2dcf7ae3]{text-align:center;margin-bottom:30px}.demo-header h2[data-v-2dcf7ae3]{color:#303133;margin-bottom:10px}.demo-header p[data-v-2dcf7ae3]{color:#606266;font-size:14px}.demo-content[data-v-2dcf7ae3]{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:20px;margin-bottom:30px}.demo-card[data-v-2dcf7ae3]{margin-bottom:20px}.audio-control[data-v-2dcf7ae3],.bitrate-control[data-v-2dcf7ae3],.connection-stats[data-v-2dcf7ae3],.error-stats[data-v-2dcf7ae3],.network-stats[data-v-2dcf7ae3],.performance-stats[data-v-2dcf7ae3]{display:flex;flex-direction:column;gap:10px}.control-item[data-v-2dcf7ae3],.stat-item[data-v-2dcf7ae3]{display:flex;justify-content:space-between;align-items:center;padding:5px 0}.control-item label[data-v-2dcf7ae3],.stat-item label[data-v-2dcf7ae3]{font-weight:500;color:#606266;min-width:80px}.error-severities[data-v-2dcf7ae3],.error-types[data-v-2dcf7ae3]{display:flex;flex-wrap:wrap;gap:5px}.connection-actions[data-v-2dcf7ae3],.error-actions[data-v-2dcf7ae3],.performance-actions[data-v-2dcf7ae3]{display:flex;gap:10px;margin-top:15px}.log-container[data-v-2dcf7ae3]{max-height:300px;overflow-y:auto;border:1px solid #ebeef5;border-radius:4px;padding:10px;background-color:#fafafa}.log-item[data-v-2dcf7ae3]{display:flex;margin-bottom:5px;font-size:12px;font-family:Courier New,monospace}.log-time[data-v-2dcf7ae3]{color:#909399;margin-right:10px;min-width:80px}.log-message[data-v-2dcf7ae3]{flex:1}.log-item.success .log-message[data-v-2dcf7ae3]{color:#67c23a}.log-item.warning .log-message[data-v-2dcf7ae3]{color:#e6a23c}.log-item.error .log-message[data-v-2dcf7ae3]{color:#f56c6c}.log-item.info .log-message[data-v-2dcf7ae3]{color:#409eff}.success[data-v-2dcf7ae3]{color:#67c23a}.warning[data-v-2dcf7ae3]{color:#e6a23c}.error[data-v-2dcf7ae3]{color:#f56c6c}@media (max-width:768px){.demo-content[data-v-2dcf7ae3]{grid-template-columns:1fr}.connection-actions[data-v-2dcf7ae3],.error-actions[data-v-2dcf7ae3],.performance-actions[data-v-2dcf7ae3]{flex-direction:column}}