.voice-state.modern-call-panel{margin:8px;padding:0;overflow:hidden;border:1px solid #3d4048;border-radius:12px;background:linear-gradient(180deg,#27292f,#202126);box-shadow:0 8px 24px #1115;color:#c8cbd1}
.call-panel-head{display:flex;align-items:center;justify-content:space-between;padding:12px 12px 10px;border-bottom:1px solid #393b42}.call-panel-head>div,.call-offline{display:flex;align-items:center;gap:8px}.call-panel-head strong{display:inline;margin:0;color:#f2f3f5;font-size:12px}.call-panel-head small{padding:3px 7px;border-radius:999px;background:#353840;color:#b9bdc7;font-size:10px}.call-status-dot{width:8px;height:8px;border-radius:50%;background:#23a559;box-shadow:0 0 0 3px #23a55922,0 0 10px #23a55988}
.call-primary-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:10px 10px 6px}.call-action{height:auto!important;min-width:0!important;padding:8px 4px!important;border:1px solid transparent!important;border-radius:8px!important;background:#35373e!important;color:#c8cbd1!important;display:flex;flex-direction:column;align-items:center;gap:5px;font-size:10px!important;line-height:1.15;transition:background .15s,border-color .15s,transform .15s}.call-action:hover{background:#40434c!important;transform:translateY(-1px)}.call-action:focus-visible{outline:2px solid #8c94ff;outline-offset:2px}.call-action.is-active{border-color:#23a55955!important;background:#214034!important;color:#bff9d2!important}.call-action.is-danger{background:#41272b!important;color:#ffb7bd!important}.call-action-icon{font-size:17px;line-height:1}
.call-screen-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(82px,auto);gap:6px;padding:0 10px 10px}.call-screen-row .call-action{height:38px!important;flex-direction:row;justify-content:center;font-size:11px!important}.call-status-dot.is-connecting{background:#f0b232;box-shadow:0 0 0 3px #f0b23222,0 0 10px #f0b23288}.stream-settings{padding:10px;border-top:1px solid #393b42;background:#1e2024}.stream-settings-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px;color:#dbdee1;font-size:11px;font-weight:700}.stream-settings-head small{color:#858b96;font-size:9px;font-weight:600}.quality-choices{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}.quality-choices button{height:28px;border:1px solid #41444d;border-radius:6px;background:#2d2f35;color:#aeb2bb;font-size:10px;cursor:pointer}.quality-choices button:hover{border-color:#6c75df;color:white}.quality-choices button.selected{border-color:#7c86ff;background:#5865f2;color:white;box-shadow:0 3px 10px #5865f244}.quality-choices button:disabled{cursor:default;opacity:.55}
.stream-audio-toggle{display:flex;align-items:center;gap:8px;margin-top:9px;cursor:pointer}.stream-audio-toggle>span:first-child{display:flex;flex:1;min-width:0;flex-direction:column}.stream-audio-toggle strong{margin:0;color:#dfe1e5;font-size:11px}.stream-audio-toggle small{margin-top:2px;color:#858b96;font-size:9px;line-height:1.25}.stream-audio-toggle input{position:absolute;opacity:0;pointer-events:none}.stream-audio-toggle .switch{position:relative;width:30px;height:17px;flex:none;border-radius:999px;background:#4a4d55;transition:.18s}.stream-audio-toggle .switch::after{content:"";position:absolute;top:3px;left:3px;width:11px;height:11px;border-radius:50%;background:white;transition:.18s}.stream-audio-toggle input:checked+.switch{background:#5865f2}.stream-audio-toggle input:checked+.switch::after{transform:translateX(13px)}.stream-audio-toggle input:disabled+.switch{opacity:.45}.call-offline{padding:12px}.call-offline .call-status-dot{background:#737985;box-shadow:none}.call-offline strong,.call-offline small{display:block}.call-offline strong{margin:0;color:#d4d7dc;font-size:11px}.call-offline small{margin-top:2px;color:#858b96;font-size:9px}
.connection-ping{display:flex;align-items:flex-end;gap:6px;margin-left:auto;padding:4px 7px;border:1px solid #41444d;border-radius:7px;background:#1e2024;color:#b5bac1;font-size:10px;line-height:1;cursor:pointer}.connection-ping:hover,.connection-ping.is-open{background:#30333a}.connection-ping strong{display:inline;margin:0;color:inherit;font-size:10px;font-variant-numeric:tabular-nums}.connection-bars{height:12px;display:flex;align-items:flex-end;gap:2px}.connection-bars i{display:block;width:3px;border-radius:2px;background:currentColor}.connection-bars i:nth-child(1){height:4px}.connection-bars i:nth-child(2){height:8px}.connection-bars i:nth-child(3){height:12px}.connection-ping.is-excellent,.connection-ping.is-good{border-color:#23a55955;color:#45d483}.connection-ping.is-fair{border-color:#f0b23266;color:#f0b232}.connection-ping.is-poor{border-color:#da373c66;color:#ff6b72}.connection-ping.is-unknown .connection-bars i:nth-child(n+2){opacity:.28}.connection-details{margin:0 10px 10px;padding:10px;border:1px solid #41444d;border-radius:8px;background:#191a1e;box-shadow:0 8px 20px #0004}.connection-details-head,.connection-route{display:flex;align-items:center;justify-content:space-between}.connection-details-head strong{margin:0;color:#f2f3f5;font-size:11px}.connection-details-head span{font-size:9px;font-weight:700}.connection-details-head .is-excellent,.connection-details-head .is-good{color:#45d483}.connection-details-head .is-fair{color:#f0b232}.connection-details-head .is-poor{color:#ff6b72}.connection-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin:9px 0}.connection-metrics div{padding:7px 5px;border-radius:6px;background:#24262b;text-align:center}.connection-metrics small{display:block;color:#858b96;font-size:8px}.connection-metrics strong{margin:3px 0 0;color:#e5e7eb;font-size:12px;font-variant-numeric:tabular-nums}.connection-route{padding-top:8px;border-top:1px solid #303238;color:#949ba4;font-size:10px}.connection-route strong{display:inline;margin:0;color:#d7d9de;font-size:10px}.connection-details p{margin:7px 0 0;color:#777d87;font-size:9px;line-height:1.35}
@media(max-width:600px){.voice-state.modern-call-panel{border-radius:10px}.stream-settings{padding-bottom:calc(10px + env(safe-area-inset-bottom))}}