@layer halo-v277-interaction {
body.call-active #call-screen .controls{justify-self:center!important;align-self:center!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;width:max-content!important;max-width:100%!important;height:84px!important;padding:6px 14px!important;box-sizing:border-box!important;border:1px solid #afddd51d!important;border-radius:28px!important;background:linear-gradient(120deg,#213740d9,#202c40dc)!important;box-shadow:inset 0 1px 0 #ffffff10,0 12px 30px #0002!important}
body.call-active #call-screen .controls>.control-button,body.call-active #call-screen .controls>div>button.control-button{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:6px!important;width:64px!important;height:72px!important;padding:2px!important;border:0!important;border-radius:18px!important;background:transparent!important;box-shadow:none!important;color:#cee1e5!important;font-size:10px!important;line-height:1.1!important}
body.call-active #call-screen .controls .control-icon{display:grid!important;place-items:center!important;flex:0 0 46px!important;width:46px!important;height:46px!important;padding:0!important;border:1px solid #d6edff27!important;border-radius:50%!important;background:linear-gradient(145deg,#4d657c55,#647c9f1a)!important;box-shadow:inset 0 1px 0 #ffffff1c,0 3px 9px #0002!important;color:#ecf8fc!important;box-sizing:border-box!important}
body.call-active #call-screen .controls .control-button>span:not(.control-icon),body.call-active #call-screen .controls .control-button>b{display:block!important;margin:0!important;color:inherit!important;font-size:10px!important;font-weight:500!important;letter-spacing:.1px!important}
body.call-active #call-screen .controls .control-icon svg{width:22px!important;height:22px!important;stroke-width:1.65!important}
body.call-active #call-screen .controls .control-button[aria-pressed=true]{background:transparent!important;color:#ffbec9!important}
body.call-active #call-screen .controls .control-button[aria-pressed=true] .control-icon{background:linear-gradient(145deg,#855063,#553747)!important;border-color:#f5a9bc77!important;color:#ffdeea!important}
body.call-active #call-screen #end-button{width:70px!important;background:transparent!important;border:0!important;box-shadow:none!important;color:#ffbbc5!important}
body.call-active #call-screen #end-button .control-icon{width:52px!important;height:46px!important;border-radius:23px!important;border-color:#ff99ae66!important;background:linear-gradient(140deg,#ff7b8e,#dc3e63)!important;color:#fff!important;box-shadow:0 5px 15px #df3c622b,inset 0 1px 0 #ffffff40!important}
body.call-active #call-screen .controls .control-button:hover .control-icon{border-color:#c3fff0a0!important;box-shadow:0 0 0 3px #a7f5e90b!important}
body.call-active #call-screen .controls .control-button:focus-visible{outline:2px solid #b3f8de!important;outline-offset:0!important}
body.call-active #call-screen :is(.halo-call-window-button,#sidebar-toggle,.halo-device-settings-button){border:1px solid #d6f4ff20!important;border-radius:50%!important;background:#b3d8f00a!important;box-shadow:none!important;color:#cce3eb!important}
body.call-active #call-screen .halo-call-quality button{border-radius:24px!important;background:#142535de!important;border-color:#a4cce535!important;box-shadow:inset 0 1px 0 #ffffff08!important}
body.call-active #call-screen .halo-call-quality [data-hq][aria-pressed=true]{background:linear-gradient(135deg,#1d6660,#2c4a68)!important;border-color:#b5f2e07a!important}
#halo-direct-call-layer .halo-direct-call-card{background:radial-gradient(ellipse at 20% 0%,#41656d88,transparent 65%),linear-gradient(150deg,#203442f5,#1b2338f5)!important;border:1px solid #d3ecfa26!important;border-radius:36px!important;box-shadow:0 35px 100px #0006,inset 0 1px 0 #ffffff1b!important;gap:18px!important}
#halo-direct-call-layer #halo-call-name{font-weight:650!important;letter-spacing:-.7px!important}
#halo-direct-call-layer .halo-call-pulse{border:1px solid #ccf3e74d!important;box-shadow:0 0 0 9px #beeff307,0 0 0 20px #beeff304,0 16px 38px #0003!important}
#halo-direct-call-layer :is(#halo-call-accept,#halo-call-decline){display:flex!important;flex-direction:column!important;gap:12px!important;width:116px!important;min-height:110px!important;padding:4px!important;border:0!important;background:transparent!important;box-shadow:none!important;color:#dcebf2!important;font-size:12px!important;font-weight:500!important;letter-spacing:0!important}
#halo-direct-call-layer .halo-ring-icon{display:grid!important;place-items:center!important;width:64px!important;height:64px!important;flex:none!important;border-radius:50%!important;background:linear-gradient(140deg,#e7768e,#ab3e61)!important;border:1px solid #ffc5d040!important;color:#fff!important;box-shadow:0 7px 20px #0002,inset 0 1px 0 #ffffff30!important}
#halo-direct-call-layer #halo-call-accept .halo-ring-icon{background:linear-gradient(140deg,#8ce7bf,#389b8e)!important;border-color:#ceffed70!important;color:#073f37!important;box-shadow:0 7px 24px #63d9b227,inset 0 1px 0 #ffffff60!important}
#halo-direct-call-layer .halo-ring-icon svg{width:26px!important;height:26px!important;stroke-width:1.8!important}
@media(max-width:600px){body.call-active #call-screen .controls{gap:4px!important;height:72px!important;padding:4px 7px!important;border-radius:24px!important}body.call-active #call-screen .controls>.control-button,body.call-active #call-screen .controls>div>button.control-button{width:49px!important;height:64px!important;gap:5px!important}body.call-active #call-screen .controls .control-icon{width:40px!important;height:40px!important;flex-basis:40px!important}body.call-active #call-screen .controls .control-button>span:not(.control-icon),body.call-active #call-screen .controls .control-button>b{font-size:9px!important}body.call-active #call-screen #end-button{width:52px!important}body.call-active #call-screen #end-button .control-icon{width:44px!important;height:40px!important}}
@media(max-height:480px){body.call-active #call-screen .controls{height:54px!important;padding:2px 10px!important;border-radius:22px!important}body.call-active #call-screen .controls>.control-button,body.call-active #call-screen .controls>div>button.control-button{height:48px!important;gap:3px!important}body.call-active #call-screen .controls .control-icon{width:32px!important;height:32px!important;flex-basis:32px!important}body.call-active #call-screen #end-button .control-icon{width:42px!important;height:32px!important}body.call-active #call-screen .controls .control-icon svg{width:19px!important;height:19px!important}body.call-active #call-screen .controls .control-button>span:not(.control-icon),body.call-active #call-screen .controls .control-button>b{font-size:8px!important}#halo-direct-call-layer :is(#halo-call-accept,#halo-call-decline){flex-direction:row!important;width:135px!important;min-height:56px!important}#halo-direct-call-layer .halo-ring-icon{width:44px!important;height:44px!important}}
body.halo-direct-call-floating:not(.halo-call-compact) #call-screen .controls{height:54px!important;padding:3px 8px!important;gap:5px!important}
body.halo-direct-call-floating:not(.halo-call-compact) #call-screen .controls .control-button{width:46px!important;height:44px!important}
body.halo-direct-call-floating:not(.halo-call-compact) #call-screen .controls .control-icon{width:36px!important;height:36px!important;flex-basis:36px!important}
body.halo-direct-call-floating:not(.halo-call-compact) #call-screen .controls .control-button>span:not(.control-icon){display:none!important}
}
.halo-mask-shield-toggle{display:flex;align-items:center;gap:8px;font-size:11px;color:#bcd3df;line-height:1.5;margin:14px 0 8px}.halo-mask-shield-toggle input{width:16px;height:16px;flex:none;accent-color:#8bd8bf}.halo-mask-picker>div{grid-template-columns:repeat(2,minmax(0,1fr))}.halo-mask-picker [data-mask]{min-height:76px;border-radius:18px;box-shadow:inset 0 1px 0 #ffffff0d}
@layer halo-v277-interaction {
body.halo-direct-call-floating:not(.halo-call-compact) #call-screen .controls>:not(#mute-button):not(#camera-button):not(#end-button):not(.call-language-control){display:none!important}
body.halo-direct-call-floating:not(.halo-call-compact) #call-screen .controls .control-button>b{display:none!important}
}
@layer halo-v277-interaction {
body.call-active #call-screen{grid-template-columns:minmax(0,1fr)!important;min-width:0!important;max-width:100%!important}
body.call-active #call-screen .call-header,body.call-active #call-screen .call-header-actions{min-width:0!important;max-width:100%!important;box-sizing:border-box!important}
body.call-active #call-screen .controls{min-width:0!important}
}
@layer halo-v277-interaction {
body.call-active #call-screen .controls .control-button[hidden],body.call-active #call-screen .controls>div[hidden]{display:none!important}
body.call-active #call-screen .media-column{grid-template-columns:minmax(0,1fr)!important;max-width:100%!important;min-width:0!important}
body.call-active #call-screen .call-workspace{min-width:0!important;max-width:100%!important}
}
@layer halo-v277-interaction {
body.call-active #call-screen .controls :is(#mute-button,#camera-button)[aria-pressed=true]{background:transparent!important;border:0!important;box-shadow:none!important}
body.call-active #call-screen .controls .control-button>span:not(.control-icon){position:static!important;inset:auto!important;width:auto!important;height:auto!important;max-width:none!important;overflow:visible!important;clip:auto!important;clip-path:none!important;visibility:visible!important;opacity:1!important;transform:none!important;text-indent:0!important;font-size:10px!important;line-height:1.1!important;white-space:nowrap!important}
@media(max-width:600px){body.call-active #call-screen .controls .control-button>span:not(.control-icon){font-size:9px!important}}
@media(max-height:480px){body.call-active #call-screen .controls .control-button>span:not(.control-icon){font-size:8px!important}}
body.halo-direct-call-floating:not(.halo-call-compact) #call-screen .controls .control-button>span:not(.control-icon){display:none!important}
}
