/* LineMeet interface: base layout and components. */
:root{--ux-bg:#0d1119;--ux-panel:#171e2a;--ux-panel2:#1f2938;--ux-tile:#253044;--ux-line:#334155;--ux-text:#f1f5fb;--ux-sub:#a6b2c6;--ux-blue:#5989ff;--ux-green:#21c79b;--ux-danger:#eb6679;--ux-shadow:0 20px 80px rgba(0,0,0,.3);--ux-bar:80px;--ux-top:68px;font-family:Inter,'Segoe UI',system-ui,-apple-system,sans-serif!important}
html,body{height:100%;margin:0!important;overflow:hidden!important;background:var(--ux-bg)!important;color:var(--ux-text)!important;font-family:Inter,'Segoe UI',system-ui,sans-serif!important}
body *{box-sizing:border-box}
body button,body select,body input,body textarea{font-family:inherit}
body button:focus-visible,body a:focus-visible{outline:3px solid #8faaff!important;outline-offset:2px}
/* Fields already change their border on focus; a second orange/blue ring on
 * top of it looked like a double outline, so inputs never draw one. */
body input:focus-visible,body select:focus-visible,body textarea:focus-visible{outline:none!important}
#main{background:var(--ux-bg)!important;height:100dvh!important;min-height:0!important;width:100%!important;overflow:hidden!important}
#main>.row.full-height{height:100%!important;width:100%!important;display:block!important;margin:0!important}
#main>.row.full-height>.container{max-width:none!important;width:100%!important;height:100%!important;padding:0!important;margin:0!important;display:flex!important;flex-direction:column!important;min-width:0!important;background:transparent!important}
#main header,.topnav{height:0!important;min-height:0!important;overflow:hidden!important;padding:0!important;margin:0!important;border:0!important}
#mainrow{width:100%!important;min-height:0!important;height:calc(100dvh - var(--ux-top) - var(--ux-bar))!important;max-height:none!important;position:absolute!important;left:0!important;top:var(--ux-top)!important;bottom:var(--ux-bar)!important;display:block!important;margin:0!important;padding:0 20px 14px!important;background:var(--ux-bg)!important}
#right{position:relative!important;width:100%!important;height:100%!important;min-height:0!important;max-width:none!important;margin:0!important;padding:0!important;float:none!important;background:transparent!important}
#resizer,#show-video,#show-chat,#collapse-video,#close-chat{display:none!important}
#video-container{width:100%!important;height:100%!important;min-height:0!important;max-height:100%!important;margin:0!important;padding:0!important;border:0!important;border-radius:18px!important;overflow:hidden!important;background:#111723!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)!important;position:relative!important}
#video-container:not(.invisible) #expand-video{height:100%!important;width:100%!important;padding:10px!important;overflow:auto!important}
#peers{width:100%!important;height:100%!important;min-height:0!important;display:flex!important;align-items:center!important;justify-content:center!important;flex-wrap:wrap!important;gap:12px!important;padding:0!important}
#peers>*{max-width:100%!important;max-height:100%!important;border-radius:15px!important;overflow:hidden!important;background:#1b2330!important}
#peers video{max-width:100%!important;max-height:min(75vh,100%)!important;object-fit:contain!important;background:#111723!important;border-radius:12px!important}
#peers .video-controls,#peers .top-video-controls{opacity:0;transition:opacity .2s}
#peers>*:hover .video-controls,#peers>*:hover .top-video-controls{opacity:1}
/* Original participant list remains wired to all upstream moderation menus. */
#left-sidebar{position:fixed!important;display:none!important;right:18px!important;left:auto!important;top:calc(var(--ux-top) + 12px)!important;bottom:calc(var(--ux-bar) + 14px)!important;width:min(340px,calc(100vw - 36px))!important;height:auto!important;max-height:none!important;z-index:70!important;overflow:auto!important;float:none!important;padding:22px!important;border:1px solid var(--ux-line)!important;border-radius:18px!important;background:var(--ux-panel)!important;color:var(--ux-text)!important;box-shadow:var(--ux-shadow)!important}
#left-sidebar.ux-open{display:block!important}
#left-sidebar .users-header{background:transparent!important;color:var(--ux-text)!important}
#left-sidebar .galene-header{color:var(--ux-text)!important;font-size:17px!important;font-weight:700!important}
#left-sidebar #users{color:var(--ux-text)!important}
#left-sidebar a,#left-sidebar span,#left-sidebar label{color:inherit}
/* Original chat is kept intact, only changes location and surfaces. */
#left{position:fixed!important;display:none!important;right:18px!important;left:auto!important;top:calc(var(--ux-top) + 12px)!important;bottom:calc(var(--ux-bar) + 14px)!important;width:min(360px,calc(100vw - 36px))!important;height:auto!important;max-height:none!important;z-index:72!important;float:none!important;margin:0!important;padding:0!important;max-width:none!important;border-radius:18px!important;background:var(--ux-panel)!important;border:1px solid var(--ux-line)!important;box-shadow:var(--ux-shadow)!important;overflow:hidden!important}
#left.ux-open{display:flex!important;flex-direction:column!important}
#chat,#chatbox{width:100%!important;height:100%!important;min-height:0!important;display:flex!important;flex-direction:column!important;background:transparent!important;color:var(--ux-text)!important}
#box{flex:1!important;min-height:0!important;overflow:auto!important;padding:16px!important;color:var(--ux-text)!important;background:transparent!important}
#box *{color:inherit}
#chat .reply{padding:10px 12px 14px!important;border-top:1px solid var(--ux-line)!important;background:transparent!important;position:relative!important;bottom:auto!important}
#inputform{display:flex!important;align-items:flex-end!important;gap:8px!important;padding:0!important;margin:0!important}
#input{flex:1!important;min-width:0!important;min-height:40px!important;max-height:140px!important;padding:11px 12px!important;margin:0!important;border-radius:12px!important;border:1px solid #3c4b60!important;background:#101722!important;color:var(--ux-text)!important;resize:none!important;overflow-y:hidden!important;line-height:1.35!important}
#inputbutton{width:43px!important;height:43px!important;min-width:43px!important;border-radius:12px!important;border:0!important;background:var(--ux-blue)!important;color:white!important;padding:0!important}
/* Settings: old panel with working native controls, remixed into a popover */
#sidebarnav{position:fixed!important;display:none!important;right:18px!important;top:calc(var(--ux-top) + 12px)!important;bottom:calc(var(--ux-bar) + 14px)!important;height:auto!important;width:min(360px,calc(100vw - 36px))!important;max-width:none!important;left:auto!important;z-index:75!important;transform:none!important;border-radius:18px!important;box-shadow:var(--ux-shadow)!important;background:var(--ux-panel)!important;color:var(--ux-text)!important;border:1px solid var(--ux-line)!important;overflow-y:auto!important}
#sidebarnav.ux-open{display:block!important}
#sidebarnav .sidenav-header{background:transparent!important;border-bottom:1px solid var(--ux-line)!important;padding:18px 20px!important;color:var(--ux-text)!important}
#sidebarnav .sidenav-header h2{color:var(--ux-text)!important;font-size:18px!important;font-weight:700!important;margin:0!important}
#sidebarnav #optionsdiv{padding:12px 18px!important;color:var(--ux-text)!important;overflow:visible!important}
#sidebarnav fieldset{border:1px solid var(--ux-line)!important;border-radius:14px!important;margin:0 0 16px!important;padding:12px!important;color:var(--ux-text)!important}
#sidebarnav legend{font-size:12px!important;font-weight:700!important;color:var(--ux-sub)!important;padding:0 5px!important}
#sidebarnav label,#sidebarnav a,#sidebarnav .profile-info{color:var(--ux-text)!important}
#sidebarnav .select{background:#101722!important;color:var(--ux-text)!important;border:1px solid var(--ux-line)!important;border-radius:9px!important;padding:8px!important;max-width:100%!important}
#sidebarnav form{margin:8px 0!important}
#sidebarnav .closebtn{color:var(--ux-text)!important;cursor:pointer}
/* Prejoin stays native (original loginform JS runs unchanged). */
#login-container:not(.invisible){position:fixed!important;inset:var(--ux-top) 0 var(--ux-bar) 0!important;display:flex!important;align-items:center!important;justify-content:center!important;flex-direction:column!important;padding:16px!important;overflow-y:auto!important;background:radial-gradient(ellipse at 50% 25%,#273654 0%,#0d1119 68%)!important;z-index:24!important}
#login-container .login-box{display:block!important;flex:none!important;width:min(440px,100%)!important;max-width:440px!important;height:auto!important;min-height:0!important;padding:28px!important;border:1px solid #36445b!important;border-radius:22px!important;background:rgba(24,33,47,.96)!important;box-shadow:0 24px 84px rgba(0,0,0,.35)!important;color:var(--ux-text)!important}
body.ux-prejoin-join #login-container:not(.invisible){justify-content:flex-start!important;padding-top:22px!important}
#loginform{width:100%!important;padding:0!important;margin:0!important;color:var(--ux-text)!important}
#loginform label{color:#ccd6e5!important;font-size:13px!important;font-weight:600!important;margin-bottom:8px!important;display:block!important}
#loginform .form-control{height:46px!important;width:100%!important;border:1px solid #40506a!important;border-radius:12px!important;background:#111a29!important;color:#f4f7fc!important;padding:10px 13px!important;font-size:16px!important;margin:0 0 18px!important}
#loginform .form-control:focus{border-color:var(--ux-blue)!important}
#loginform .present-switch{display:flex!important;gap:6px!important;flex-wrap:wrap!important;padding:4px 0 12px!important}
#loginform .switch-radio{margin:0!important}
#loginform .switch-radio label{display:inline-block!important;background:#252f42!important;border:1px solid #354560!important;padding:9px 11px!important;border-radius:10px!important;font-weight:500!important;cursor:pointer!important}
#loginform .switch-radio input{accent-color:var(--ux-blue)!important}
#loginform .connect{width:100%!important;margin-top:14px!important}
#connectbutton{width:100%!important;height:46px!important;background:var(--ux-blue)!important;color:white!important;border:0!important;border-radius:12px!important;font-size:15px!important;font-weight:700!important;box-shadow:0 4px 18px rgba(89,137,255,.22)!important;cursor:pointer!important}
#test-camera{flex:none!important;margin:12px auto!important;width:min(440px,100%)!important;max-height:none!important;overflow:visible!important;color:var(--ux-sub)!important;padding:10px 16px!important;border-radius:12px!important;border:1px solid #36445b!important;background:#171e2a!important}
#test-camera summary{cursor:pointer!important;color:var(--ux-text)!important;font-size:13px!important}
#test-camera select{color:#1e293b!important;max-width:100%!important}
/* Galène renders vendor media controls on an empty <video>, which looked like
 * a stray player. Show it only after a real test stream is attached. */
#test-video{display:none!important;max-width:100%!important}
#test-video[data-live]{display:block!important;width:100%!important;height:auto!important;aspect-ratio:16/9!important;max-height:none!important;object-fit:cover!important;border-radius:12px!important;background:#0b1220!important}
/* The frequency diagram is noise in a pre-join check: the live level meter
 * below is enough. Keep the native canvas hidden. */
#test-fft{display:none!important}
#test-camera summary{display:none!important}
.ux-auth-note{margin:0 0 18px!important;color:#557265!important;font-size:12px!important;line-height:1.5!important}
/* Participant name and organizer login are separate fields in the DOM. */
#ux-guestform{display:block!important}
#ux-guestform[hidden]{display:none!important}
body.ux-participant-mode #userform{display:none!important}
body.ux-operator-mode #ux-guestform{display:none!important}
body.ux-prejoin-join #ux-guestform{display:none!important}

.ux-prejoin-heading{flex:none!important;width:min(440px,100%)!important;margin:4px auto 10px!important;font-size:14px!important;font-weight:750!important;color:#1e5548!important}
.ux-prejoin-heading span{display:block;margin-top:4px;font-size:11px;font-weight:500;color:#718b7c}
.ux-prejoin-back{margin:10px 0 0!important;border:0!important;background:none!important;color:#4c7566!important;font-size:12px!important;font-weight:650!important;text-decoration:underline!important;cursor:pointer!important;padding:4px!important}
body.ux-prejoin-auth .ux-prejoin-media,
body.ux-prejoin-auth #test-camera,
body.ux-prejoin-auth .ux-prejoin-heading,
body.ux-prejoin-auth #ux-prejoin-back{display:none!important}
body.ux-prejoin-join #userform,
body.ux-prejoin-join #passwordform,
body.ux-prejoin-join #ux-operator-login,
body.ux-prejoin-join #ux-guest-back,
body.ux-prejoin-join .ux-remember,
body.ux-prejoin-join #ux-auth-note{display:none!important}
/* LineMeet shell, injected after upstream scripts have attached handlers. */
.ux-topbar{height:var(--ux-top);position:fixed;inset:0 0 auto;z-index:44;background:#141c29;border-bottom:1px solid rgba(255,255,255,.075);padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--ux-text)}
.ux-brand{display:flex;align-items:center;gap:11px;min-width:0}
.ux-mark{width:35px;height:35px;border-radius:12px;background:linear-gradient(135deg,#6b98ff,#715cf4);display:grid;place-items:center;box-shadow:0 7px 22px rgba(89,137,255,.28);font-size:21px;color:#fff;font-weight:800}
.ux-title-wrap{min-width:0}.ux-brandname{font-size:15px;font-weight:760;letter-spacing:-.25px;line-height:1.2}.ux-roomname{font-size:11px;color:var(--ux-sub);margin-top:3px;max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ux-topright{display:flex;align-items:center;gap:12px;min-width:0}
.ux-live{font-size:11px;font-weight:600;color:#c4d2e5;padding:7px 11px;background:#222d3d;border:1px solid #334156;border-radius:999px;display:flex;align-items:center;gap:7px;white-space:nowrap}
.ux-dot{width:7px;height:7px;border-radius:50%;background:#6a7487}
.ux-dot.online{background:var(--ux-green);box-shadow:0 0 0 4px rgba(33,199,155,.1)}
.ux-duration{font-variant-numeric:tabular-nums;font-size:12px;color:#b6c3d7;min-width:50px;text-align:right}
.ux-invite{border:1px solid #3b4b64;background:#24334c;border-radius:10px;color:#e5efff;padding:10px 12px;display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;cursor:pointer;transition:background .2s,transform .2s}
.ux-invite:hover{background:#304567;transform:translateY(-1px)}
.ux-dock{position:fixed;bottom:0;left:0;right:0;min-height:var(--ux-bar);z-index:48;background:#141c29;border-top:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;padding:9px 18px max(9px,env(safe-area-inset-bottom));gap:6px;color:var(--ux-text)}
.ux-tool{border:1px solid transparent;min-width:72px;height:61px;padding:6px 10px;border-radius:14px;background:transparent;color:#c9d5e6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer;transition:background .18s,transform .18s,color .18s;white-space:nowrap;position:relative}
.ux-tool:hover{background:#273449;color:white;transform:translateY(-1px)}
.ux-tool svg{height:21px;width:21px;stroke-width:1.9}
.ux-tool span{font-size:11px;letter-spacing:.05px}
.ux-tool.active{background:rgba(89,137,255,.15);color:#a7c1ff}
.ux-tool.danger{background:#e9566d;color:#fff;min-width:98px;margin-left:8px}
.ux-tool.danger:hover{background:#f36b7e}
.ux-tool.muted .ux-icon{color:#ff9caa}
.ux-tool.screen{color:#79dabc}
.ux-divider{height:32px;width:1px;background:#344155;margin:0 8px}
.ux-banner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;gap:8px;pointer-events:none;z-index:0;color:var(--ux-sub)}
.ux-banner svg{opacity:.34;margin-bottom:8px}.ux-banner h2{font-size:20px;font-weight:700;margin:0;color:#dce6f4}.ux-banner p{font-size:13px;margin:0;line-height:1.6;color:#899ab0}
.ux-banner.hidden{display:none}
.ux-panelhead{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--ux-line);font-size:15px;font-weight:700;color:var(--ux-text)}
.ux-close{background:transparent;border:none;color:#a6b2c6;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;cursor:pointer}
.ux-close:hover{background:#29364a;color:#fff}
.ux-toastwrap{position:fixed;top:80px;left:50%;transform:translateX(-50%);display:grid;gap:8px;pointer-events:none;z-index:150;width:min(360px,calc(100vw - 32px))}
.ux-toast{background:#273651;color:#fff;border:1px solid #466086;padding:12px 14px;border-radius:12px;font-size:13px;box-shadow:var(--ux-shadow);display:flex;gap:8px;align-items:center;animation:uxDrop .22s ease-out}
@keyframes uxDrop{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
.ux-panelopen #video-container{box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.ux-noscript{position:fixed;top:75px;left:24px;color:red;z-index:9999}
#invite-dialog{color:var(--ux-text)!important;background:var(--ux-panel)!important;border:1px solid var(--ux-line)!important;border-radius:16px!important;box-shadow:var(--ux-shadow)!important;padding:22px!important;max-width:min(440px,90vw)!important}
#invite-dialog::backdrop{background:rgba(4,7,14,.7)}
#invite-dialog label{color:var(--ux-text)!important}
#invite-dialog input{background:#101722!important;color:var(--ux-text)!important;border:1px solid var(--ux-line)!important;border-radius:8px!important;padding:8px!important;max-width:100%!important}
#invite-dialog button{background:var(--ux-blue)!important;border:0!important;color:#fff!important;border-radius:8px!important;padding:10px 16px!important;margin:8px 5px 0 0!important}
/* On narrower displays keep stage maximally visible. */
@media(max-width:750px){:root{--ux-top:60px;--ux-bar:77px}.ux-topbar{padding:0 14px}.ux-mark{width:32px;height:32px;font-size:19px}.ux-brandname{font-size:14px}.ux-roomname{max-width:100px}.ux-live{display:none}.ux-invite{padding:9px;width:38px;height:38px;justify-content:center}.ux-invite .ux-invitetxt{display:none}.ux-dock{padding:8px 5px max(8px,env(safe-area-inset-bottom));gap:0;justify-content:space-evenly}.ux-tool{min-width:0;flex:1;height:58px;padding:4px 1px;border-radius:11px}.ux-tool span{font-size:9px}.ux-tool svg{height:20px;width:20px}.ux-divider{display:none}.ux-tool.danger{min-width:0;margin:0 2px 0 0;flex:1.12}.ux-tool.danger span{font-size:9px}#mainrow{padding:0 7px 9px!important}#video-container{border-radius:13px!important}#left,#left-sidebar,#sidebarnav{top:calc(var(--ux-top) + 5px)!important;right:7px!important;bottom:calc(var(--ux-bar) + 8px)!important;width:calc(100vw - 14px)!important;max-width:440px!important}#login-container .login-box{padding:22px!important}#loginform .present-switch{gap:4px!important}#loginform .switch-radio label{padding:8px!important;font-size:11px!important}.ux-banner h2{font-size:17px}.ux-banner p{font-size:12px}}
@media(max-width:390px){.ux-roomname{max-width:75px}.ux-tool span{font-size:8px}.ux-tool{gap:4px}.ux-duration{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.001ms!important;transition-duration:0.001ms!important;scroll-behavior:auto!important}}
/* Final polish for the original settings panel, which is created by upstream. */
#sidebarnav .sidenav-header{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important}
#sidebarnav .sidenav-header .closebtn{display:flex!important;align-items:center!important;justify-content:center!important;width:32px!important;height:32px!important;min-width:32px!important;border-radius:9px!important;float:none!important;margin:0!important;font-size:16px!important}
#sidebarnav .sidenav-header .closebtn:hover{background:#2a394e!important}
#sidebarnav #profile{border-bottom:1px solid var(--ux-line)!important;margin-bottom:16px!important;padding:0 0 14px!important;color:var(--ux-text)!important}
#sidebarnav .profile-user{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;background:#202c3e!important;border-radius:12px!important;padding:11px!important;margin:0!important}
#sidebarnav .profile-logo{display:none!important}
#sidebarnav .profile-info{min-width:0!important;display:flex!important;flex-direction:column!important;gap:3px!important;font-size:12px!important}
#sidebarnav #userspan{font-size:13px!important;font-weight:700!important;display:block!important}
#sidebarnav #permspan{display:block!important;font-size:11px!important;color:var(--ux-sub)!important}
#sidebarnav .user-logout{position:static!important;float:none!important;padding:0!important;margin:0!important}
#sidebarnav .user-logout a{display:flex!important;align-items:center!important;gap:5px!important;white-space:nowrap!important;background:#3a2b39!important;color:#ffacb6!important;border-radius:8px!important;font-size:12px!important;text-decoration:none!important;padding:8px 10px!important;cursor:pointer!important}
#sidebarnav #optionsdiv label{font-size:12px!important;line-height:1.5!important}
#sidebarnav #optionsdiv select{font-size:12px!important;min-height:34px!important}
#sidebarnav #optionsdiv fieldset>form{display:flex!important;align-items:center!important;gap:8px!important;flex-wrap:wrap!important}
#sidebarnav #optionsdiv fieldset>form input[type=checkbox]{accent-color:var(--ux-blue)!important}
.ux-prejoin{--ux-bar:0px}
.ux-prejoin .ux-dock{display:none!important}

#sidebarnav .ux-soundlabel{display:flex!important;align-items:center!important;gap:9px!important;background:#202c3e!important;border-radius:11px!important;padding:11px 12px!important;margin:2px 0 15px!important;font-size:12px!important;cursor:pointer!important;color:#d5e0f3!important}
#sidebarnav .ux-soundlabel input{accent-color:var(--ux-blue)!important}

/* Current palette, dialogs and responsive refinements. */
:root {
  --ux-bg:#eef2eb; --ux-panel:#fffdfa; --ux-panel2:#f5f7f1;
  --ux-tile:#e4ece4; --ux-line:#d7dfd5; --ux-text:#123e37;
  --ux-sub:#6c8077; --ux-blue:#14685b; --ux-green:#208772;
  --ux-danger:#b34f49; --ux-shadow:0 18px 56px rgba(29,61,49,.16);
  --ux-bar:100px; --ux-top:70px;
}
html,body{background:var(--ux-bg)!important;color:var(--ux-text)!important;}
body button:focus-visible,body a:focus-visible{outline:3px solid #e5a078!important;outline-offset:3px}
body input:focus-visible,body select:focus-visible,body textarea:focus-visible{outline:none!important}
/* Without the ring, focus stays visible by colouring the existing border. */
#sidebarnav select:focus,#sidebarnav input:focus,#sidebarnav textarea:focus{border-color:#8faaff!important}
.ux-invite-result input:focus{border-color:#1f806a!important}
#mainrow {background:var(--ux-bg)!important;padding:14px 20px 14px!important}
#video-container {background:#dfe8df!important;border:1px solid #c6d5ca!important;border-radius:20px!important;box-shadow:0 10px 40px rgba(28,67,53,.09)!important}
#video-container:not(.invisible) #expand-video{padding:16px!important}
#peers{gap:14px!important}
#peers>* {border-radius:16px!important;box-shadow:0 5px 18px rgba(28,60,48,.11)!important}
#peers video{background:#192923!important;border-radius:13px!important}
.ux-topbar {background:#fbfcf8;border-bottom:1px solid var(--ux-line);box-shadow:0 2px 12px rgba(27,59,46,.04)}
.ux-mark{background:linear-gradient(145deg,#0b5549,#28796b);border-radius:13px;box-shadow:0 7px 18px rgba(14,77,64,.16);font-size:22px}
.ux-brandname{font-size:17px;color:#124e43}.ux-brand-suffix{font-size:14px;color:#80928a;font-weight:500}
.ux-roomname{color:#778c80;font-size:11px}
.ux-live{color:#2c6d59;background:#edf6ef;border-color:#d9eadb}
.ux-dot.online{background:#20a17a;box-shadow:0 0 0 4px rgba(32,161,122,.12)}
.ux-duration{color:#70887c}
.ux-invite{background:#eaf4ec;color:#165e51;border-color:#c5dfcf;border-radius:999px;padding:10px 16px}
.ux-invite:hover{background:#dbebdf;color:#0d5546}
.ux-dock{background:#fffdfa;border-top:1px solid #dfe7da;box-shadow:0 -4px 22px rgba(24,70,51,.045);gap:20px;padding:10px 18px max(13px,env(safe-area-inset-bottom));}
.ux-tool{height:76px;min-width:66px;padding:3px 1px;gap:7px;background:transparent;border:0;border-radius:15px;color:#355c50;}
.ux-tool svg{width:46px;height:46px;padding:11px;border-radius:50%;background:#edf3ed;border:1px solid #dce7df;color:#315e50;box-shadow:0 2px 7px rgba(28,69,55,.03);transition:background .18s,transform .18s,box-shadow .18s}
.ux-tool:hover{background:transparent;color:#0e6655;transform:none}
.ux-tool:hover svg{background:#dceee2;box-shadow:0 5px 14px rgba(28,69,55,.12);transform:translateY(-2px)}
.ux-tool span{font-size:11px;font-weight:600;color:inherit}
.ux-tool.active{background:transparent;color:#116857}
.ux-tool.active svg{background:#cde6d6;border-color:#b1d5c0;color:#12624f}
.ux-tool.muted .ux-icon{color:#ad665d;background:#faf0ea;border-color:#f2d8cc}
.ux-tool.screen{color:#126857}
.ux-tool.danger{background:transparent;color:#a54943;min-width:66px;margin-left:0}
.ux-tool.danger svg{background:#b85550;border-color:#b85550;color:white}
.ux-tool.danger:hover{background:transparent;color:#8e3735}
.ux-tool.danger:hover svg{background:#9a413d}
.ux-divider{height:36px;background:#e0e7df;margin:0 2px}
.ux-more{display:none}
.ux-moremenu[hidden]{display:none!important}
.ux-moremenu{position:fixed;right:14px;bottom:calc(var(--ux-bar) + 5px);z-index:150;min-width:216px;border:1px solid var(--ux-line);background:#fffdfa;box-shadow:var(--ux-shadow);border-radius:18px;padding:8px;animation:uxDrop .17s ease-out}
.ux-moremenu button{display:flex;align-items:center;gap:12px;width:100%;background:none;border:0;text-align:left;padding:12px;border-radius:11px;color:#214c41;font-size:13px;font-weight:600;cursor:pointer}
.ux-moremenu button:hover{background:#ebf2eb}.ux-moremenu .ux-menu-danger{color:#a64c46}
.ux-moremenu button svg{flex:none}
.ux-banner{color:#769085}
.ux-banner h2{color:#214c3d}.ux-banner p{color:#7a8e7f}
.ux-toast{background:#fffefa;border:1px solid #d0dfd1;color:#184c3d}
#left-sidebar,#left,#sidebarnav{background:var(--ux-panel)!important;border-color:var(--ux-line)!important;border-radius:20px!important;box-shadow:var(--ux-shadow)!important;color:var(--ux-text)!important}
#left-sidebar .users-header,#left-sidebar .galene-header{color:var(--ux-text)!important}
#left-sidebar .users-header{border-color:var(--ux-line)!important}
#left-sidebar #users,#left-sidebar #users * {color:var(--ux-text)!important}
#chat,#chatbox,#box,#box * {color:#21473a!important}
#chat .reply{border-color:var(--ux-line)!important}
#input{background:#f6f9f5!important;color:#1a493e!important;border-color:#cbdccf!important}
#inputbutton{background:#14685b!important;color:#fff!important}
#sidebarnav .sidenav-header{border-color:var(--ux-line)!important;background:var(--ux-panel)!important}
#sidebarnav .sidenav-header h2,#sidebarnav label,#sidebarnav a,#sidebarnav .profile-info{color:#214b3e!important}
#sidebarnav .sidenav-header .closebtn:hover{background:#e8f1ea!important}
#sidebarnav #profile{border-color:var(--ux-line)!important}
#sidebarnav .profile-user{background:#f1f6ef!important;border:1px solid #e1eae1!important}
#sidebarnav #permspan{color:#72897c!important}
#sidebarnav .user-logout a{background:#faedea!important;color:#a3443d!important;border:1px solid #f2d9d3!important}
#sidebarnav fieldset{background:#fcfdfa!important;border:1px solid #d7e4d6!important;border-radius:16px!important;padding:16px!important;margin-bottom:18px!important;min-width:0!important;display:block!important}
#sidebarnav legend{color:#5c806d!important;font-size:12px!important;font-weight:750!important;padding:0 8px!important}
#sidebarnav #optionsdiv{padding:16px!important}
/* Key regression fix: device labels and selects always stack with genuine spacing. */
#sidebarnav #mediaoptions fieldset > label,
#sidebarnav #mediaoptions fieldset > select,
#test-camera > label,
#test-camera > select {display:block!important;position:static!important;float:none!important;width:100%!important;max-width:100%!important;clear:both!important;box-sizing:border-box!important}
#sidebarnav #mediaoptions fieldset > label,#test-camera > label{margin:0 0 7px!important;line-height:1.45!important;font-size:12px!important;font-weight:700!important}
#sidebarnav #mediaoptions fieldset > select,#test-camera > select{margin:0 0 17px!important;}
#sidebarnav #mediaoptions fieldset > select:last-of-type{margin-bottom:20px!important}
#sidebarnav #optionsdiv select,#test-camera select{display:block!important;width:100%!important;min-width:0!important;max-width:100%!important;min-height:43px!important;padding:9px 32px 9px 12px!important;font-size:13px!important;line-height:1.35!important;border:1px solid #cddbd1!important;border-radius:12px!important;background-color:#fff!important;color:#244e40!important;box-shadow:0 2px 7px rgba(28,69,55,.025)!important}
#sidebarnav #optionsdiv fieldset > form{display:flex!important;align-items:center!important;gap:10px!important;flex-wrap:wrap!important;margin:10px 0!important;min-width:0!important}
#sidebarnav #optionsdiv fieldset > form:has(select){display:block!important}
#sidebarnav #optionsdiv fieldset > form:has(select) label{display:block!important;margin-bottom:7px!important}
#sidebarnav #optionsdiv fieldset > form:has(select) select{margin:0!important}
#sidebarnav #optionsdiv input[type=checkbox],.ux-remember input,.ux-soundlabel input{accent-color:#1b7863!important;width:17px!important;height:17px!important;flex-shrink:0}
#sidebarnav .ux-soundlabel{background:#eef5ed!important;color:#315c4d!important;border:1px solid #e0e9dd!important;gap:12px!important}
/* Invite dialog belongs to same design system. */
#invite-dialog{background:#fffdfa!important;color:#17483b!important;border-color:#d6e3d6!important}
#invite-dialog::backdrop{background:rgba(19,42,34,.38)!important}
#invite-dialog input{background:#f8fbf8!important;color:#164c3d!important;border-color:#ccdacc!important;border-radius:11px!important}
#invite-dialog button{background:#176858!important;border-radius:10px!important}
#invite-dialog button#invite-cancel{background:#e9f2e9!important;color:#215d4b!important}
/* Prejoin: light sage backdrop with clean card. */
#login-container:not(.invisible){background:radial-gradient(ellipse 700px 560px at 80% 5%,#d9e8d7 0%,transparent 70%),linear-gradient(160deg,#f3f6ef,#e9eee4)!important}
#login-container .login-box{background:#fffdfa!important;border:1px solid #d4e1d3!important;box-shadow:0 22px 70px rgba(24,75,55,.14)!important;color:#16493e!important}
#loginform label{color:#345d4f!important}
#loginform .form-control{background:#f9fcf8!important;border:1px solid #d1dfd1!important;color:#164838!important;box-shadow:none!important}
#loginform .form-control:focus{border-color:#1f806a!important}
#loginform .present-switch{gap:8px!important;display:grid!important;grid-template-columns:1fr!important;padding:4px 0 13px!important}
#loginform .switch-radio {display:block!important;position:relative!important;margin:0!important}
#loginform .switch-radio input[type=radio]{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;left:16px!important;top:15px!important}
#loginform .switch-radio label {display:flex!important;align-items:center!important;gap:9px!important;min-height:42px!important;padding:10px 13px!important;border-radius:12px!important;border:1px solid #d8e4d9!important;background:#f9fbf7!important;color:#3a6053!important;font-size:13px!important;font-weight:600!important;margin:0!important;transition:background .18s,border .18s!important}
#loginform .switch-radio label::before{content:'';display:inline-block;width:17px;height:17px;border:2px solid #9cb2a3;background:white;border-radius:50%;box-sizing:border-box;flex:none}
#loginform .switch-radio input:checked+label{background:#e5f2e6!important;border-color:#75ac8c!important;color:#1b5949!important}
#loginform .switch-radio input:checked+label::before{border:5px solid #16745f}
#loginform .switch-radio input:focus-visible+label{outline:3px solid #e6ab88!important;outline-offset:2px}
#connectbutton{background:#126756!important;box-shadow:0 8px 24px rgba(16,103,85,.17)!important;border-radius:13px!important}
#connectbutton:hover{background:#095646!important}
.ux-remember{display:flex!important;gap:10px!important;align-items:center!important;margin-top:7px!important;padding:8px 1px!important;cursor:pointer!important;color:#46695a!important;font-size:12px!important;font-weight:500!important}
.ux-remember span{flex:1}
#test-camera{background:#fffdfa!important;border:1px solid #d4e1d3!important;color:#25574c!important;border-radius:16px!important;padding:12px 18px!important}
#test-camera summary{color:#23584d!important}
#test-camera label{color:#356555!important}
#test-camera select{color:#164c3d!important}
/* Mobile: only four spaced, circular buttons, secondary actions in More. */
@media(max-width:750px) {
 :root{--ux-top:62px;--ux-bar:98px}
 #mainrow{padding:9px 9px 11px!important}
 #video-container{border-radius:17px!important}
 #left,#left-sidebar,#sidebarnav {top:calc(var(--ux-top) + 6px)!important;right:8px!important;bottom:calc(var(--ux-bar) + 8px)!important;width:calc(100vw - 16px)!important;max-width:430px!important}
 .ux-topbar{padding:0 14px}
 .ux-brandname{font-size:15px}.ux-brand-suffix{font-size:11px}.ux-roomname{max-width:110px}
 .ux-mark{height:34px;width:34px}
 .ux-dock{min-height:var(--ux-bar);padding:9px 12px max(10px,env(safe-area-inset-bottom));gap:clamp(7px,2.6vw,16px);justify-content:space-around}
 .ux-tool{flex:1 1 0;min-width:0;height:76px;padding:2px 0;gap:7px;border-radius:12px}
 .ux-tool svg{width:46px;height:46px;flex:none;padding:11px}
 .ux-tool span{font-size:10px!important;line-height:1.2!important;white-space:nowrap}
 .ux-tool.danger{margin:0;min-width:0}
 .ux-divider,.ux-dock #ux-chat,.ux-dock #ux-people,.ux-dock #ux-settings,.ux-dock #ux-leave{display:none!important}
 .ux-dock #ux-more{display:flex!important}
 #login-container .login-box{width:min(410px,100%)!important;padding:22px!important}
 #loginform .present-switch{gap:8px!important}
 #loginform .switch-radio label{font-size:12px!important;padding:10px 12px!important}
}
@media(max-width:355px){.ux-dock{padding-left:8px;padding-right:8px;gap:7px}.ux-tool svg{height:44px;width:44px;padding:10px}.ux-tool span{font-size:9px!important}.ux-duration{display:none}}
@media(min-width:751px) and (max-width:1024px){.ux-dock{gap:10px}.ux-tool{min-width:60px}}
@media(prefers-reduced-motion:reduce){.ux-tool svg,.ux-moremenu{transition:none!important;animation:none!important}}
/* Offline showcase only: illustrated share slide in the same palette as specialist materials. */
.preview-screen{background:#fafaf4!important;border:1px solid #f3f3e8!important;box-shadow:0 13px 55px rgba(32,70,51,.13)!important}
.preview-bar{background:#edf2e9!important;border-bottom-color:#d7e2d3!important}
.preview-surface h3{color:#145348!important}.preview-surface p{color:#739081!important}
.preview-stat{border-color:#d9e9d9!important}.preview-stat strong{color:#165d50!important}.preview-stat span{color:#7f988a!important}
.preview-bars div{background:linear-gradient(0deg,#7d9d81,#bfd2b4)!important}.preview-bars div:nth-child(3n){background:linear-gradient(0deg,#dba68b,#f1ccaf)!important}
.preview-face{background:linear-gradient(150deg,#9bb8a0,#315c4d)!important}.preview-face .avatar{background:linear-gradient(145deg,#e3b5a4,#a3b9a5)!important;color:#184b42!important}

.ux-invite[hidden]{display:none!important}

/* LineMeet 2.2: automated throughput control stays in Galène; hide manual
 * rate/simulcast/filter controls from the simplified customer-facing UI. */
#sidebarnav #optionsdiv > fieldset { display:none!important; }
#sidebarnav #optionsdiv #mediaoptions fieldset > form:has(#hqaudiobox) { display:none!important; }
/* Speakers can still set default bitrate and music mode through official JS
 * if a future advanced-panel is desired; nothing changes server policy. */
/* Pre-join media: two round switches, like the in-meeting toolbar. The native
 * radio list stays in the DOM for Galène but is never shown. */
#loginform > label:not(.ux-remember),#loginform .present-switch{display:none!important}
.ux-prejoin-media{display:flex;justify-content:center;gap:22px;margin:4px 0 6px!important;width:100%}
.ux-prejoin-toggle{display:flex!important;flex-direction:column;align-items:center;gap:7px;width:80px;min-height:0!important;background:none!important;border:0!important;padding:0!important;color:#5d7369!important;font-size:11px!important;font-weight:600!important;cursor:pointer}
.ux-prejoin-toggle svg{width:54px;height:54px;padding:15px;box-sizing:border-box;border-radius:50%;background:#eef4ee;border:1px solid #d2e0d3;color:#2f5b4d;transition:background .18s,border-color .18s,color .18s}
.ux-prejoin-toggle:hover svg{background:#e3ece2}
.ux-prejoin-toggle.on{color:#14574a!important}
.ux-prejoin-toggle.on svg{background:#1f8a6d;border-color:#2aa384;color:#fff}
.ux-prejoin-toggle.on:hover svg{background:#23997a}
.ux-media-note{max-width:420px;margin:10px auto 0!important;color:#a9502f!important;font-size:12px!important;line-height:1.5!important;text-align:center}
/* Participants see only the name field; organizers reveal the password form
 * on the same page, so one link works for both roles. */
.ux-guest:not(.ux-operator-mode) #passwordform,
.ux-guest:not(.ux-operator-mode) #loginform .ux-remember {display:none!important;}
.ux-guest.ux-operator-mode #passwordform {display:block!important;}

@media(max-width:750px){
 .ux-dock{gap:clamp(9px,3vw,18px)!important;padding-left:12px!important;padding-right:12px!important;}
 .ux-tool{gap:5px!important;}
 .ux-tool span{padding:0 2px!important;letter-spacing:-.1px!important;}
}

/* Meeting links and early-arrival waiting experience. */
.ux-create{background:#ecf5ec!important;color:#145c4b!important}
.ux-create:hover{background:#dcebdd!important}
.ux-create[hidden],.ux-invite[hidden]{display:none!important}
.ux-invite-result{box-sizing:border-box;border:1px solid #d4e0d2;background:#fffefa;color:#154b3d;border-radius:21px;padding:24px;max-width:min(480px,calc(100vw - 32px));width:100%;box-shadow:0 18px 72px #163c292b}
.ux-invite-result::backdrop{background:#112c26a6}
.ux-invite-result h2{font-size:21px;margin:0 0 8px;color:#114d40}
.ux-invite-result p{color:#688274;font-size:13px;line-height:1.55;margin:0 0 18px}
.ux-invite-result label{display:block;font-size:12px;font-weight:700;margin:0 0 8px}
.ux-invite-result input{border:1px solid #cdddcf;border-radius:11px;padding:11px;box-sizing:border-box;width:100%;background:#f6f8f3;color:#154b3d;font-size:12px}
.ux-invite-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:15px}
.ux-invite-actions button{border:0;background:#126756;color:white;border-radius:11px;padding:10px 15px;font-size:13px;font-weight:700;cursor:pointer}
.ux-invite-actions button.ux-secondary{background:#edf1ea;color:#234d42}
#invite-dialog [for="invite-username"],#invite-dialog #invite-username{display:none!important}
.ux-banner.ux-waiting{position:absolute;inset:auto 50% calc(var(--ux-bar) + 20px) auto;transform:translateX(50%);height:auto;min-height:0;max-width:min(440px,calc(100% - 28px));width:max-content;border:1px solid #d1dfd0;border-radius:15px;background:#fffefaed;box-shadow:0 10px 30px #244a2818;padding:13px 20px;color:#195647;z-index:43}
.ux-banner.ux-waiting svg{display:none}
.ux-banner.ux-waiting h2{font-size:16px!important;color:#176753!important}
.ux-banner.ux-waiting p{font-size:12px!important;color:#5c776b!important}
@media(max-width:750px){.ux-create{padding:9px!important;width:38px;height:38px;justify-content:center}.ux-create .ux-invitetxt{display:none}.ux-topright{gap:6px!important}.ux-banner.ux-waiting{bottom:calc(var(--ux-bar) + 16px);padding:10px 14px}.ux-banner.ux-waiting h2{font-size:14px!important}}
/* Keep empty-room instructions visible even when Galène hides the media pane. */
.ux-banner:not(.ux-waiting){position:fixed;inset:calc(var(--ux-top) + 14px) 18px calc(var(--ux-bar) + 14px);z-index:4}

/* Browser-local conference history and the organizer switch on guest links. */
.ux-recent{background:#f4f6ee!important;color:#4e6455!important;border-color:#dce2d4!important}
.ux-recent:hover{background:#e9efe3!important;color:#315846!important}
.ux-recent[hidden]{display:none!important}
.ux-recent-dialog{box-sizing:border-box;border:1px solid #d4e0d2;background:#fffefa;color:#154b3d;border-radius:21px;padding:24px;max-width:min(560px,calc(100vw - 32px));width:100%;max-height:min(680px,calc(100vh - 40px));overflow:auto;box-shadow:0 18px 72px #163c292b}
.ux-recent-dialog::backdrop{background:#112c26a6}
.ux-recent-dialog h2{font-size:21px;margin:0 0 8px;color:#114d40}
.ux-recent-dialog h3{font-size:13px;margin:20px 0 8px;color:#557464;text-transform:uppercase;letter-spacing:.04em}
.ux-recent-note{color:#688274;font-size:12px;line-height:1.55;margin:0 0 8px}
.ux-recent-list{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.ux-recent-list li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid #dce7da;border-radius:11px;background:#f7faf4}
.ux-recent-list a{color:#17604f;font-weight:650;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ux-recent-list a:hover{text-decoration:underline}
.ux-recent-list span{color:#7b8f83;font-size:11px;white-space:nowrap}
.ux-recent-list .ux-recent-empty{display:block;color:#83958a;font-size:12px;background:transparent;border-style:dashed}
.ux-operator-login{margin:14px auto 0;display:block;background:none;border:0;color:#3c6e5e;font-size:12px;font-weight:650;text-decoration:underline;cursor:pointer}
.ux-operator-login[hidden]{display:none!important}
.ux-guest-back{margin-top:8px}
.ux-guest.ux-operator-mode #loginform .ux-remember{display:flex!important}
@media(max-width:750px){
  .ux-recent{padding:9px!important;width:38px;height:38px;justify-content:center}
  .ux-recent .ux-invitetxt{display:none}
  .ux-recent-list li{align-items:flex-start;flex-direction:column;gap:3px}
  .ux-recent-list span{white-space:normal}
}

/* Waiting room: guests cannot enter until an operator unlocks the group. */
.ux-waiting{position:fixed;inset:0;z-index:130;display:flex;align-items:center;justify-content:center;padding:18px;background:radial-gradient(ellipse 720px 520px at 70% 0%,#dcebda 0%,transparent 65%),linear-gradient(160deg,#f5f8f1,#e6ede1)}
.ux-waiting[hidden]{display:none!important}
.ux-waiting-card{width:min(430px,100%);background:#fffdfa;border:1px solid #d4e1d3;border-radius:22px;box-shadow:0 22px 70px rgba(24,75,55,.16);padding:30px 26px;text-align:center;color:#16493e}
.ux-waiting-card h2{font-size:21px;margin:14px 0 8px;color:#114d40}
.ux-waiting-card p{font-size:13px;line-height:1.6;color:#5d7a6c;margin:0 0 6px}
.ux-waiting-room{font-weight:600;color:#3f6153!important;word-break:break-all}
.ux-waiting-actions{display:flex;gap:10px;justify-content:center;margin-top:18px;flex-wrap:wrap}
.ux-waiting-actions button{border:0;border-radius:11px;padding:11px 16px;font-size:13px;font-weight:650;background:#14685b;color:#fff;cursor:pointer}
.ux-waiting-actions button.ux-secondary{background:#eaf2e9;color:#22594b;border:1px solid #d5e3d4}
.ux-spinner{width:40px;height:40px;margin:0 auto;border-radius:50%;border:3px solid #d9e7da;border-top-color:#1f8a6d;animation:uxspin 1s linear infinite}
@keyframes uxspin{to{transform:rotate(360deg)}}
body.ux-waiting-mode .ux-dock,body.ux-waiting-mode #video-container{filter:blur(1px)}

/* Operator-only destructive action in the settings panel. */
.ux-danger-button{border:0;border-radius:10px;padding:11px 14px;font-size:12px;font-weight:700;background:#b85550;color:#fff;cursor:pointer}
.ux-danger-button:hover{background:#a3443f}
#ux-end-meeting{width:100%;margin:6px 0 18px}
#ux-end-meeting[hidden]{display:none!important}
.ux-end-dialog{border:0;border-radius:18px;background:#fffdfa;color:#16493e;box-shadow:0 22px 70px rgba(24,75,55,.24);padding:24px;max-width:min(420px,92vw)}
.ux-end-dialog::backdrop{background:#0b201a80}
.ux-end-dialog h2{font-size:20px;margin:0 0 10px;color:#114d40}
.ux-end-dialog p{font-size:13px;line-height:1.6;color:#5d7a6c;margin:0 0 16px}
.ux-end-dialog .ux-invite-actions{display:flex;gap:10px;justify-content:flex-end}
.ux-end-dialog .ux-invite-actions button{border-radius:10px;padding:10px 15px;font-size:13px;font-weight:650;border:0;cursor:pointer;background:#14685b;color:#fff}
.ux-end-dialog .ux-invite-actions .ux-secondary{background:#eaf2e9;color:#22594b;border:1px solid #d5e3d4}

/* Camera test: level meter and echo check. */
.ux-mic-test{display:grid;gap:8px;margin-top:10px}
.ux-mic-row{display:flex;align-items:center;gap:10px;font-size:12px;color:#45665b}
.ux-meter{flex:1;height:9px;background:#e2ebe2;border-radius:99px;overflow:hidden;border:1px solid #cfdfd0}
#ux-mic-level{display:block;height:100%;width:0;background:linear-gradient(90deg,#2a9a78,#7cc86a);transition:width .08s linear}
#ux-echo-test{border:1px solid #cfe0d2;background:#eef5ed;color:#1d5b4c;border-radius:10px;padding:9px 12px;font-size:12px;font-weight:650;cursor:pointer;justify-self:start}
#ux-echo-test:hover{background:#e2eee1}
#ux-echo-test.on{background:#1f8a6d;border-color:#1f8a6d;color:#fff}
#ux-echo-test:disabled{opacity:.72;cursor:wait}
.ux-echo-audio{width:100%;height:36px;margin:2px 0;border-radius:9px;background:#eef5ed}
.ux-hint{font-size:11px;color:#7b8f83;margin:0;line-height:1.45}

/* Presentation: shared screen on stage, cameras in the corner, like Jitsi. */
body.ux-sharing #video-container{padding:0!important;background:#0a0f15!important}
body.ux-sharing #peers{display:block!important;position:absolute!important;inset:0!important;padding:0!important;overflow:hidden!important}
body.ux-sharing #peers .peer{position:absolute!important;top:auto!important;left:auto!important;right:12px!important;bottom:calc(12px + var(--ux-i,0) * 142px)!important;width:clamp(132px,17vw,210px)!important;height:clamp(88px,11vw,132px)!important;margin:0!important;border:1px solid rgba(255,255,255,.2)!important;border-radius:12px!important;overflow:hidden!important;background:#0b1220!important;box-shadow:0 8px 26px rgba(0,0,0,.38)!important;z-index:3!important}
body.ux-sharing #peers .peer.ux-screenshare{inset:0!important;width:auto!important;height:auto!important;border:0!important;border-radius:0!important;box-shadow:none!important;z-index:1!important}
body.ux-sharing #peers .peer .media{width:100%!important;height:100%!important;max-height:none!important;padding:0!important;margin:0!important;border-radius:0!important;background:#0b1220!important;object-fit:contain!important}
body.ux-sharing #peers .peer:not(.ux-screenshare) .media{object-fit:cover!important}
.ux-quality{display:grid;gap:8px;margin:0 0 14px}
.ux-qrow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;border:1px solid #d9e6d7;border-radius:12px;background:#f4f8f2;color:#22594b;font-size:13px;font-weight:650}
.ux-qrow select{border:1px solid #cfe0d2;border-radius:8px;background:#fff;color:#22594b;padding:6px 8px;font:inherit;font-weight:500;max-width:58%}
.ux-hqaudio{display:flex;align-items:center;gap:9px;padding:8px 12px;color:#22594b;font-size:12px;font-weight:600;cursor:pointer}
.ux-hqaudio[hidden]{display:none!important}
.ux-hqaudio input{accent-color:#1f8a6d;width:16px;height:16px}
.ux-nameedit{margin:0 0 14px;padding:10px 12px;border:1px solid #d9e6d7;border-radius:12px;background:#f4f8f2;color:#22594b}
.ux-nameedit label{display:block;font-size:12px;font-weight:700;margin-bottom:6px}
.ux-nameedit .ux-namerow{display:flex;gap:7px}
.ux-nameedit input{flex:1;min-width:0;border:1px solid #cfe0d2;border-radius:8px;background:#fff;color:#164c3d;padding:7px 9px;font:inherit;font-size:13px}
.ux-nameedit button{border:0;border-radius:8px;background:#1f8a6d;color:#fff;padding:7px 10px;font:inherit;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap}
.ux-nameedit p{margin:6px 0 0;color:#7b8f83;font-size:10px;line-height:1.4}
body.ux-sharing .ux-banner{display:none!important}

/* 150% browser zoom is roughly a 960x600 CSS viewport: keep the top bar and
 * the dock readable instead of letting buttons collide. */
@media(max-width:1100px){.ux-live{display:none}.ux-roomname{max-width:150px}.ux-invite{padding:9px 12px}}
@media(max-width:900px){.ux-brand-suffix{display:none}.ux-invite .ux-invitetxt{display:none}.ux-invite{width:38px;height:38px;justify-content:center;padding:0}.ux-dock{gap:10px}}
@media(max-height:680px){:root{--ux-top:60px;--ux-bar:86px}#login-container:not(.invisible){padding:10px!important}#login-container .login-box{padding:20px!important}#test-camera{padding:8px 12px!important}.ux-waiting-card{padding:22px 20px}}

/* ------------------------------------------------------------------ *
 * LineMeet 3: one auth form, one pre-join check, organizer dashboard. *
 * ------------------------------------------------------------------ */
body .ux-prejoin-media,
body .ux-prejoin-heading,
body #test-camera{display:none!important}
#login-container .login-box{width:min(520px,100%)!important;max-width:520px!important}
body.ux-prejoin-auth #login-container .login-box{width:min(440px,100%)!important;max-width:440px!important}
.ux-auth-note{color:#5d7a6b!important}
#loginform #passwordform[hidden]{display:none!important}
body.ux-participant-mode .ux-remember{display:none!important}
body.ux-participant-mode #passwordform{display:none!important}
.ux-operator-login{width:100%;margin:7px 0 0;padding:10px;border:1px solid #d1dfd1;border-radius:11px;background:#f2f8f1;color:#245c4c;font-size:13px;font-weight:650;cursor:pointer}
.ux-operator-login:hover{background:#e7f2e6}
.ux-guest-back{background:transparent;border-color:transparent;text-decoration:underline;color:#557b68}
.ux-remember{margin:4px 0 10px!important}
.ux-remember span{font-size:12px}
#ux-join-view{width:100%;margin:0 0 4px}
#ux-join-view[hidden]{display:none!important}
.ux-join-stage{position:relative;width:100%;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#13211d;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
#ux-join-video{display:block;width:100%;height:100%;object-fit:cover;background:#13211d}
#ux-join-video[hidden]{display:none!important}
#ux-join-video.mirror,#test-video.mirror{transform:scaleX(-1)!important}
.ux-join-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#b9cdbf;font-size:13px;font-weight:600;background:radial-gradient(circle at 50% 40%,#243c33,#101c18)}
.ux-join-placeholder[hidden]{display:none!important}
.ux-meter{flex:1;height:7px;border-radius:999px;background:#e1eadf;overflow:hidden}
.ux-meter i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#4aa584,#16745f);transition:width .08s linear}
.ux-join-toggles{display:flex;justify-content:center;gap:26px;margin:8px 0 12px}
.ux-join-toggle{display:flex;flex-direction:column;align-items:center;gap:5px;border:0;background:none;padding:2px;color:#617a6c;font-size:11px;font-weight:650;cursor:pointer}
/* The device-check buttons reuse the exact icon treatment of the in-call dock. */
.ux-join-toggle svg{width:46px;height:46px;padding:11px;border-radius:50%;background:#edf3ed;border:1px solid #dce7df;color:#315e50;box-sizing:border-box;box-shadow:0 2px 7px rgba(28,69,55,.03)}
.ux-join-toggle.on{color:#145d4c}
.ux-join-toggle.on svg{background:#edf3ed;border-color:#dce7df;color:#315e50}
.ux-device-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:4px 0 10px}
.ux-device-row label{display:flex!important;flex-direction:column;gap:5px;margin:0!important;font-size:11px!important;font-weight:650!important;color:#5b7667!important}
.ux-device-row select{width:100%;min-height:40px;padding:7px 30px 7px 10px;border:1px solid #d1dfd1;border-radius:10px;background:#fff;color:#1d4b3d;font-size:12px;text-overflow:ellipsis}
.ux-device-row select:disabled{opacity:.55}
.ux-join-hq{display:flex!important;align-items:center;gap:9px;margin:0 0 9px!important;font-size:12px!important;color:#3f6353!important;cursor:pointer}
.ux-join-hq input{accent-color:#16745f;width:16px;height:16px}
.ux-join-echo{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:6px}
.ux-join-echo .ux-secondary{padding:8px 12px;border-radius:9px;border:1px solid #cfe0ce;background:#f4faf3;color:#20614f;font-size:12px;font-weight:650;cursor:pointer}
.ux-join-echo .ux-secondary.on{opacity:.7;cursor:default}
#ux-join-playback{width:100%;height:34px;margin-top:4px}
#ux-join-playback[hidden]{display:none!important}
#ux-join-echo-hint{margin:4px 0 0;font-size:11px;line-height:1.45;color:#71887b}
#ux-join-warning{margin:4px 0 8px!important;text-align:left!important;max-width:none!important;background:#fff4ef;border:1px solid #f0d6c9;border-radius:10px;padding:8px 10px}
#ux-prejoin-back{display:block;margin:10px auto 0!important}
#ux-prejoin-back[hidden]{display:none!important}
.ux-leave-dialog .ux-invite-actions{flex-wrap:wrap}
#ux-leave-dialog #ux-end-for-all{background:#b85550!important;color:#fff!important;border:0!important}
#ux-leave-dialog #ux-leave-confirm{background:#eaf2e9!important;color:#22594b!important;border:1px solid #d5e3d4!important}
@media(max-width:520px){
  #login-container .login-box{padding:18px!important}
  .ux-device-row{grid-template-columns:1fr}
  .ux-join-toggle svg{width:46px;height:46px;padding:11px}
  .ux-join-toggles{gap:20px}
}

/* Organizer dashboard: a real cabinet, not the root auto-subgroup room. */
#ux-dashboard[hidden]{display:none!important}
.ux-dashboard{position:fixed;inset:var(--ux-top) 0 0 0;z-index:25;background:var(--ux-bg);overflow:auto;padding:28px clamp(16px,4vw,52px) 50px;color:var(--ux-text)}
.ux-dash-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin:0 auto 22px;max-width:1120px}
.ux-dash-head h1{margin:0;font-size:clamp(24px,3vw,34px);line-height:1.1;color:#124c3f}
.ux-dash-head p{margin:8px 0 0;max-width:620px;color:#6b8175;font-size:13px;line-height:1.55}
.ux-primary,.ux-secondary{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:11px;padding:11px 16px;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap}
.ux-primary{background:#14685b;border:1px solid #14685b;color:#fff}
.ux-primary:hover{background:#0c594c}
.ux-secondary{background:#f3f8f2;border:1px solid #d2e1d2;color:#23614f}
.ux-table-wrap{max-width:1120px;margin:0 auto;background:#fffdfa;border:1px solid var(--ux-line);border-radius:18px;box-shadow:0 12px 38px rgba(28,67,53,.08);overflow:auto}
.ux-meetings{width:100%;border-collapse:collapse;min-width:720px}
.ux-meetings th{text-align:left;padding:14px 16px;background:#f2f7f0;color:#5e7a6b;font-size:11px;font-weight:750;text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid #dfe8dc}
.ux-meetings td{padding:13px 16px;border-bottom:1px solid #edf1e9;font-size:13px;color:#36594b;vertical-align:middle}
.ux-meetings tr:last-child td{border-bottom:0}
.ux-meetings tr:hover td{background:#fbfdf9}
.ux-meetings a{color:#145f4f;font-weight:700;text-decoration:none}
.ux-meetings a:hover{text-decoration:underline}
.ux-actions-col{width:128px;text-align:right!important}
.ux-row-actions{display:flex;justify-content:flex-end;gap:6px}
.ux-iconbtn{display:grid;place-items:center;width:32px;height:32px;border:1px solid #d8e4d7;border-radius:9px;background:#f7faf5;color:#316c5b;cursor:pointer}
.ux-iconbtn:hover{background:#e8f2e6;color:#0f5c4b}
.ux-state-live{color:#13775c!important;font-weight:750}
.ux-state-live::before{content:'';display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;background:#1ca27c}
.ux-state-planned{color:#7b8e81!important}
.ux-empty-row td{text-align:center;padding:36px!important;color:#7d9285!important}
body.ux-dashboard-mode #login-container,
body.ux-dashboard-mode #mainrow,
body.ux-dashboard-mode .ux-dock,
body.ux-dashboard-mode .ux-banner,
body.ux-dashboard-mode #left,
body.ux-dashboard-mode #left-sidebar,
body.ux-dashboard-mode #sidebarnav,
body.ux-dashboard-mode #ux-new-meeting{display:none!important}
body.ux-dashboard-mode .ux-duration{display:none}
.ux-meeting-dialog{border:1px solid #d2e0d1!important;border-radius:20px!important;background:#fffdfa!important;color:#16493e!important;padding:0!important;width:min(460px,calc(100vw - 28px))!important;box-shadow:0 30px 90px rgba(14,52,40,.28)!important}
.ux-meeting-dialog::backdrop{background:rgba(19,42,34,.4)!important}
#ux-meeting-form{padding:24px!important;display:flex!important;flex-direction:column!important;gap:7px!important}
#ux-meeting-form h2{margin:0 0 10px;font-size:21px;color:#124c3f}
#ux-meeting-form label{font-size:12px;font-weight:700;color:#4b6d5d;margin-top:6px}
#ux-meeting-form label span{font-weight:500;color:#8a9e91}
#ux-meeting-form input,#ux-meeting-form select{width:100%;min-height:44px;border:1px solid #cfded0;border-radius:11px;background:#f9fcf8;color:#174838;padding:9px 12px;font-size:14px}
#ux-meeting-form input:focus,#ux-meeting-form select:focus{border-color:#1f806a}
.ux-dialog-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:16px}
.ux-form-error{margin:5px 0 0!important;color:#a3443d!important;font-size:12px!important}
@media(max-width:640px){.ux-dash-head{flex-direction:column}.ux-dashboard{padding:18px 12px 40px}.ux-dash-head .ux-primary{width:100%}}

/* Meeting surface polish requested after the first real call. */
#left-sidebar{width:min(400px,calc(100vw - 36px))!important;padding:0!important}
#left-sidebar .users-header,#left-sidebar .header-sep{display:none!important}
#left-sidebar #users{padding:10px!important;display:flex;flex-direction:column;gap:3px}
#left-sidebar #users .user-p{min-height:38px;display:flex;align-items:center;border-radius:9px;padding:7px 9px!important;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#left-sidebar #users .user-p:hover{background:#eef5ec}
body.ux-panelopen #left-sidebar{display:block!important}
#peers .label{left:0!important;right:auto!important;top:0!important;bottom:auto!important;width:auto!important;max-width:calc(100% - 8px);text-align:left!important;padding:2px 6px;border-radius:8px;background:rgba(12,28,23,.52);backdrop-filter:blur(5px);line-height:1.3!important}
.ux-dock{background:rgba(255,253,250,.78)!important;backdrop-filter:blur(18px) saturate(1.25);-webkit-backdrop-filter:blur(18px) saturate(1.25);border-top-color:rgba(255,255,255,.55)!important;box-shadow:0 -10px 36px rgba(24,70,51,.09)!important}
.ux-topbar{background:rgba(251,252,248,.88)!important;backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2)}
.ux-tool.active{color:#0b624f!important}
body.ux-sharing .ux-dock{background:rgba(18,31,27,.64)!important;border-top-color:rgba(255,255,255,.12)!important}
body.ux-sharing .ux-tool{color:#e5efe8}
body.ux-sharing .ux-tool svg{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.18);color:#fff}
body.ux-sharing .ux-tool span{color:#dbe9e1}
.ux-hand-active svg{background:#f4c35e!important;border-color:#e8b74f!important;color:#5b4308!important}

/* User context menu: same palette, Russian labels, no "Identify". */
.contextualMenu{border:1px solid var(--ux-line)!important;border-radius:14px!important;background:#fffdfa!important;box-shadow:var(--ux-shadow)!important;padding:6px!important;min-width:210px!important;z-index:200!important}
.contextualMenu .contextualMenuItem{border-radius:9px!important;padding:9px 11px!important;color:#245445!important;font-size:13px!important}
.contextualMenu .contextualMenuItem:hover{background:#eaf3e8!important}
.contextualMenu .contextualMenuItemTitle{color:inherit!important}
.contextualMenu .contextualMenuItemIcon{opacity:.45}
#ux-recent{display:none!important}
body.ux-prejoin-auth .ux-dock,
body.ux-prejoin-join .ux-dock,
body.ux-join-stage .ux-dock{display:none!important}
body.ux-organizer-lobby .ux-remember{display:flex!important}
body.ux-dashboard-mode .toastify{display:none!important}
/* Stable tiles: Galène's automatic layout used to change tile size with each
 * new activity, which looked like the camera zooming by itself. */
#peers{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))!important;grid-auto-rows:minmax(0,1fr);align-content:center!important;justify-content:stretch!important;align-items:stretch!important;gap:14px!important;padding:16px!important;overflow:hidden!important}
#peers>*{width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;max-width:none!important;max-height:none!important;display:flex!important;align-items:center!important;justify-content:center!important}
#peers video{width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:cover!important;border-radius:13px!important}
#peers .peer.ux-screenshare video{object-fit:contain!important}
@media(max-width:750px){#peers{grid-template-columns:1fr!important;padding:8px!important;gap:8px!important;grid-auto-rows:minmax(0,1fr)}}
/* The upstream player controls (play, PiP, fullscreen, stop) are not part of
 * this product. Fullscreen for a presentation has its own button. */
#peers .video-controls,#peers .top-video-controls{display:none!important}
#topvideo .video-controls,#topvideo .top-video-controls{display:none!important}
#peers .peer.ux-screenshare .label{display:none!important}
#peers .peer:fullscreen{background:#000;display:flex;align-items:center;justify-content:center}
#peers .peer:fullscreen video{width:100%!important;height:100%!important;object-fit:contain!important;border-radius:0!important}
button[hidden],.ux-tool[hidden]{display:none!important}
/* Round microphone level: fills bottom-up exactly like a hardware meter. */
#ux-mic svg{background:linear-gradient(to top,#9fd8bc 0 var(--ux-level,0%),#edf3ed var(--ux-level,0%) 100%)!important}
#ux-mic.muted svg{background:#faf0ea!important}
.ux-join-toggle svg{background:linear-gradient(to top,#9fd8bc 0 var(--ux-level,0%),#edf3ed var(--ux-level,0%) 100%)}
.ux-join-toggle.off svg,.ux-join-toggle[aria-pressed="false"] svg{background:#faf0ea!important;border-color:#f2d8cc!important;color:#ad665d!important}
/* The raw native settings block duplicated our simplified controls. */
#sidebarnav #mediaoptions{display:none!important}
/* On the device-check step the credentials and the native "enable at start"
 * radios are no longer relevant: keep only the video, switches and join. */
body.ux-join-stage #loginform #userform,
body.ux-join-stage #loginform #passwordform,
body.ux-join-stage #loginform > label,
body.ux-join-stage #loginform .present-switch,
body.ux-join-stage #login-container .ux-remember,
body.ux-join-stage #test-camera{display:none!important}
/* Three device selectors in the pre-join check. */
.ux-device-row{grid-template-columns:repeat(3,minmax(0,1fr))!important}
@media(max-width:750px){.ux-device-row{grid-template-columns:1fr!important}}
/* Make the pre-join mic button show the same bottom-up level as the room. */
#ux-join-mic.on svg{background:linear-gradient(to top,#9fd8bc 0 var(--ux-level,0%),#edf3ed var(--ux-level,0%) 100%)!important;border-color:#dce7df!important;color:#315e50}
#ux-join-mic[aria-pressed="false"] svg{background:#faf0ea!important;border-color:#f2d8cc!important;color:#ad665d!important}
/* HQ checkbox sits on the test row, right aligned, vertically centred. */
.ux-join-echo .ux-join-hq{margin:0 0 0 auto!important;align-self:center;white-space:nowrap}
.ux-join-hq input,.ux-hqaudio input{margin:0!important;align-self:center;flex:none}
.ux-hqaudio{line-height:1.2}
/* Recording state and the incoming-audio switch. */
#ux-record.active svg{background:#b85550!important;border-color:#b85550!important;color:#fff!important}
#ux-record.active{color:#a54943!important}
#ux-speaker.muted svg{background:#faf0ea;border-color:#f2d8cc;color:#ad665d}
/* Upstream forces labels to block; restore the checkbox row layout. */
#loginform .ux-join-echo .ux-join-hq{display:flex!important;align-items:center!important;gap:9px!important}

/* ------------------------------------------------------------------ *
 * Compact centered dock and Jitsi-style participant tiles.             *
 * ------------------------------------------------------------------ */
:root{--ux-bar:84px}
.ux-dock{left:50%!important;right:auto!important;transform:translateX(-50%);width:max-content;max-width:calc(100vw - 20px);min-height:0!important;padding:7px 12px max(8px,env(safe-area-inset-bottom))!important;gap:8px!important;border-radius:20px 20px 0 0!important}
.ux-tool{min-width:58px!important;height:66px!important;padding:3px 6px!important;gap:4px!important;border-radius:12px!important}
.ux-tool svg{width:42px!important;height:42px!important;padding:10px!important}
.ux-tool span{font-size:10px!important}
.ux-divider{height:30px!important;margin:0 4px!important}
.ux-tool.danger{min-width:66px!important;margin-left:4px!important}
#ux-cam.muted svg{background:#faf0ea!important;border-color:#f2d8cc!important;color:#ad665d!important}
#ux-cam.muted{color:#ad665d!important}

#peers > .peer{position:relative!important;overflow:hidden!important;border:0!important;background:#173028!important;border-radius:16px!important;box-shadow:none!important}
#peers > .peer.ux-avatar-mode{height:100%!important;width:auto!important;max-width:100%!important;max-height:100%!important;aspect-ratio:1/1!important;align-self:center!important;justify-self:center!important;background:#173028!important;border-radius:18px!important}
#peers > .peer.ux-avatar-mode > video{display:none!important}
#peers .ux-avatar{display:none;position:absolute;inset:0;align-items:center;justify-content:center;z-index:2;background:radial-gradient(circle at 50% 35%,#27483d,#13251f)}
#peers > .peer.ux-avatar-mode .ux-avatar{display:flex}
#peers .ux-avatar-circle{width:min(44%,132px);min-width:58px;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:clamp(20px,3.4vw,42px);letter-spacing:.02em;box-shadow:0 10px 30px rgba(0,0,0,.18);border:2px solid rgba(255,255,255,.22)}
#peers .ux-avatar-initials{line-height:1;transform:translateY(.02em)}
#peers .ux-micbadge{position:absolute;left:10px;bottom:10px;z-index:4;width:27px;height:27px;border-radius:50%;display:none;align-items:center;justify-content:center;color:#fff;box-shadow:0 3px 10px rgba(0,0,0,.18)}
#peers .ux-micbadge svg{width:15px!important;height:15px!important;stroke-width:2.2!important}
#peers .peer.ux-mic-on .ux-micbadge,#peers .peer.ux-mic-off .ux-micbadge{display:flex}
#peers .peer.ux-mic-on .ux-micbadge{background:#2b8e70}
#peers .peer.ux-mic-off .ux-micbadge{background:#b85550}
#peers > .peer.ux-avatar-mode .label{left:0!important;right:0!important;top:auto!important;bottom:10px!important;max-width:calc(100% - 64px)!important;margin:0 auto!important;text-align:center!important;background:transparent!important;backdrop-filter:none!important;font-size:13px!important;font-weight:650!important;color:#f1f7f3!important;text-shadow:0 1px 4px rgba(0,0,0,.5)}

/* Presentation: screen on stage, cameras in the rail. Clicking a camera puts
 * it on stage; clicking the screen returns to the presentation. */
body.ux-sharing #peers .peer.ux-avatar-mode{width:clamp(132px,17vw,210px)!important;height:clamp(88px,11vw,132px)!important;aspect-ratio:auto!important;max-width:none!important;max-height:none!important}
body.ux-sharing.ux-camera-stage #peers .peer.ux-pinned{inset:0!important;width:auto!important;height:auto!important;max-width:none!important;max-height:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;z-index:2!important;background:#0b1220!important}
body.ux-sharing.ux-camera-stage #peers .peer.ux-pinned .media{width:100%!important;height:100%!important;max-height:none!important;padding:0!important;object-fit:contain!important;border-radius:0!important}
body.ux-sharing.ux-camera-stage #peers .peer.ux-screenshare{top:auto!important;left:auto!important;right:12px!important;bottom:calc(12px + var(--ux-camera-count,1) * 142px)!important;width:clamp(132px,17vw,210px)!important;height:clamp(88px,11vw,132px)!important;border:1px solid rgba(255,255,255,.2)!important;border-radius:12px!important;overflow:hidden!important;z-index:3!important}
body.ux-sharing.ux-camera-stage #peers .peer.ux-avatar-mode .ux-avatar{background:radial-gradient(circle at 50% 35%,#27483d,#13251f)}
body.ux-sharing.ux-camera-stage #peers .peer.ux-avatar-mode .ux-avatar-circle{width:42px;min-width:42px;font-size:16px}
body.ux-sharing.ux-camera-stage #peers .peer.ux-avatar-mode .label{font-size:11px!important;bottom:5px!important;max-width:calc(100% - 46px)!important}

@media(max-width:750px){
  :root{--ux-bar:70px}
  .ux-dock{width:calc(100vw - 12px);gap:0!important;justify-content:space-around!important;padding:6px 4px max(8px,env(safe-area-inset-bottom))!important;border-radius:16px 16px 0 0!important}
  .ux-tool{height:58px!important;min-width:0!important;flex:1 1 0!important;padding:2px 0!important}
  .ux-tool svg{width:38px!important;height:38px!important;padding:8px!important}
  .ux-tool span{font-size:9px!important}
  body.ux-sharing.ux-camera-stage #peers .peer.ux-screenshare,body.ux-sharing #peers .peer:not(.ux-screenshare){width:112px!important;height:76px!important}
}

/* ------------------------------------------------------------------ *
 * Final presentation layout: dense gallery, local preview as a PIP, and *
 * a real stage + scrollable rail. Nothing is positioned over the screen.  *
 * ------------------------------------------------------------------ */
#peers{gap:6px!important;padding:8px!important;align-content:stretch!important}
#peers>.peer{border-radius:12px!important;box-shadow:none!important}
/* Jitsi fills the whole tile with the avatar background; a square tile left
 * visible empty gutters around it in the grid. */
#peers>.peer.ux-avatar-mode{width:100%!important;height:100%!important;aspect-ratio:auto!important;max-width:none!important;max-height:none!important;align-self:stretch!important;justify-self:stretch!important;border-radius:12px!important}
/* The local tile is deliberately smaller than the remote ones. The grid
 * reserves a column for it, so the preview never covers the other person. */


body.ux-sharing #peers{display:flex!important;flex-wrap:nowrap!important;justify-content:flex-start!important;position:absolute!important;inset:0!important;padding:8px!important;gap:8px!important;overflow:hidden!important;background:#0a0f15!important;box-sizing:border-box!important;align-items:stretch!important}
/* The participants panel is an overlay; during presentation reserve its
 * width so neither the screen nor the camera rail ends up underneath it. */
body.ux-sharing.ux-panelopen #peers{padding-right:calc(min(400px,34vw) + 16px)!important}
body.ux-sharing #peers>#ux-stage{position:relative!important;flex:1 1 auto!important;width:auto!important;min-width:0!important;min-height:0!important;display:flex!important;align-items:center!important;justify-content:center!important;background:#0b1220!important;border-radius:12px!important;overflow:hidden!important;box-shadow:none!important}
body.ux-sharing #peers>#ux-rail{flex:0 0 clamp(150px,18vw,230px)!important;width:clamp(150px,18vw,230px)!important;min-width:0!important;min-height:0!important;display:flex!important;flex-direction:column!important;justify-content:flex-start!important;align-items:stretch!important;gap:6px!important;overflow-y:auto!important;overflow-x:hidden!important;padding:0 4px 0 0!important;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.32) transparent;box-shadow:none!important}
body.ux-sharing #ux-rail:empty{display:none!important}
body.ux-sharing #ux-stage>.peer{position:relative!important;inset:auto!important;top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;aspect-ratio:auto!important;margin:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:#0b1220!important;display:block!important}
body.ux-sharing #ux-stage>.peer.ux-avatar-mode{align-self:stretch!important;justify-self:stretch!important}
body.ux-sharing #ux-rail>.peer{position:relative!important;inset:auto!important;top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;width:100%!important;height:auto!important;max-width:none!important;max-height:none!important;aspect-ratio:16/9!important;flex:0 0 auto!important;margin:0!important;border:1px solid rgba(255,255,255,.18)!important;border-radius:10px!important;overflow:hidden!important;background:#0b1220!important;box-shadow:0 5px 18px rgba(0,0,0,.24)!important}
body.ux-sharing #ux-rail>.peer.ux-self:not(.ux-screenshare){width:70%!important;align-self:flex-end!important}
body.ux-sharing #ux-rail>.peer.ux-avatar-mode.ux-self:not(.ux-screenshare){aspect-ratio:1/1!important}
body.ux-sharing #ux-stage>.peer.ux-screenshare,
body.ux-sharing #ux-stage>.peer.ux-pinned,
body.ux-sharing #ux-rail>.peer.ux-screenshare{position:relative!important;inset:auto!important;width:100%!important;height:100%!important;border:0!important;border-radius:0!important;box-shadow:none!important;z-index:auto!important;background:#0b1220!important}
body.ux-sharing #ux-rail>.peer.ux-screenshare{height:auto!important;aspect-ratio:16/9!important;border:1px solid rgba(255,255,255,.18)!important;border-radius:10px!important}
body.ux-sharing #peers .peer .media{width:100%!important;height:100%!important;max-height:none!important;padding:0!important;margin:0!important;border-radius:0!important;background:#0b1220!important;object-fit:contain!important}
body.ux-sharing #ux-rail .peer .media{object-fit:cover!important}
body.ux-sharing #ux-stage .peer.ux-avatar-mode .ux-avatar{background:radial-gradient(circle at 50% 35%,#27483d,#13251f)}
body.ux-sharing #ux-rail .peer.ux-avatar-mode .ux-avatar-circle{width:min(42%,44px)!important;min-width:30px!important;font-size:14px!important}
body.ux-sharing #ux-rail .peer.ux-avatar-mode .label{font-size:10px!important;bottom:5px!important;max-width:calc(100% - 42px)!important}
body.ux-sharing #ux-rail .peer .ux-micbadge{left:6px!important;bottom:6px!important;width:23px!important;height:23px!important}
/* Screen sharing is a broadcast: red while live, green while available. */
#ux-screen:not(.active) svg{background:#e4f2e8!important;border-color:#c9e2d2!important;color:#1c7a61!important}
#ux-screen.active svg,body.ux-sharing .ux-tool.screen svg{background:#b85550!important;border-color:#b85550!important;color:#fff!important}
#ux-screen.active,body.ux-sharing .ux-tool.screen{color:#a54943!important}

@media(max-width:750px){
  body.ux-sharing #peers{flex-direction:column!important;padding:6px!important;gap:6px!important}
  body.ux-sharing #peers>#ux-stage{flex:1 1 auto!important;width:100%!important;min-height:0!important}
  body.ux-sharing #peers>#ux-rail{flex:0 0 86px!important;width:100%!important;flex-direction:row!important;overflow-x:auto!important;overflow-y:hidden!important;padding:0 0 4px!important}
  body.ux-sharing #ux-rail>.peer{width:148px!important;height:auto!important;aspect-ratio:16/9!important}
  body.ux-sharing #ux-rail>.peer.ux-self:not(.ux-screenshare){width:112px!important;align-self:stretch!important}
  body.ux-sharing #ux-stage>.peer,body.ux-sharing #ux-stage>.peer.ux-screenshare,body.ux-sharing #ux-stage>.peer.ux-pinned{width:100%!important;height:100%!important;inset:auto!important}
}

/* ------------------------------------------------------------------ *
 * Final presentation surface and toolbar polish.                       *
 * ------------------------------------------------------------------ */
/* Names and avatars are labels, not selectable document text. */
#peers .peer,#peers .peer *,#ux-rail .peer,#ux-rail .peer *{user-select:none!important;-webkit-user-select:none!important}

/* The in-call toolbar keeps its normal light sage treatment in every mode;
 * only the screen-share button itself changes colour. */
body.ux-sharing .ux-dock{
  background:rgba(255,253,250,.78)!important;
  backdrop-filter:blur(18px) saturate(1.25)!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.25)!important;
  border-top-color:rgba(255,255,255,.55)!important;
  box-shadow:0 -10px 36px rgba(24,70,51,.09)!important
}
body.ux-sharing .ux-tool{color:#355c50!important}
body.ux-sharing .ux-tool span{color:inherit!important}
body.ux-sharing .ux-tool svg{background:#edf3ed!important;border-color:#dce7df!important;color:#315e50!important}
body.ux-sharing .ux-tool.active{color:#0b624f!important}
body.ux-sharing .ux-tool.active svg{background:#cde6d6!important;border-color:#b1d5c0!important;color:#12624f!important}
body.ux-sharing .ux-tool.danger{color:#a54943!important}
body.ux-sharing .ux-tool.danger svg{background:#b85550!important;border-color:#b85550!important;color:#fff!important}
body.ux-sharing #ux-hand.ux-hand-active svg{background:#f4c35e!important;border-color:#e8b74f!important;color:#5b4308!important}
body.ux-sharing #ux-screen:not(.active) svg{background:#e4f2e8!important;border-color:#c9e2d2!important;color:#1c7a61!important}
body.ux-sharing #ux-screen.active svg{background:#b85550!important;border-color:#b85550!important;color:#fff!important}
body.ux-sharing #ux-screen.active{color:#a54943!important}

/* The hand label needs two lines and must not collide with its neighbours. */
#ux-hand{min-width:74px!important;white-space:normal!important}
#ux-hand span{display:block!important;max-width:68px!important;white-space:normal!important;line-height:1.08!important;font-size:9.5px!important;text-align:center!important}

/* Presentation: screen fills all usable space above the dock. The camera rail
 * is a vertical overlay, not a second column that shrinks the picture. */
body.ux-sharing #mainrow{top:var(--ux-top)!important;bottom:var(--ux-bar)!important;height:calc(100dvh - var(--ux-top) - var(--ux-bar))!important;padding:0!important;background:#000!important}
body.ux-sharing #video-container{border:0!important;border-radius:0!important;box-shadow:none!important;background:#000!important}
body.ux-sharing #peers{position:absolute!important;inset:0!important;display:block!important;padding:0!important;gap:0!important;overflow:hidden!important;background:#000!important}
body.ux-sharing.ux-panelopen #peers{padding:0!important}
body.ux-sharing #peers>#ux-stage{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important;background:#000!important;border:0!important;border-radius:0!important;box-shadow:none!important}
body.ux-sharing #ux-stage>.peer{position:relative!important;inset:auto!important;top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;aspect-ratio:auto!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:#000!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important}
body.ux-sharing #ux-stage>.peer video,body.ux-sharing #ux-stage>.peer .media{width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:contain!important;border-radius:0!important;background:#000!important}
body.ux-sharing #peers>#ux-rail{position:absolute!important;top:10px!important;right:10px!important;bottom:10px!important;left:auto!important;width:clamp(170px,19vw,232px)!important;height:auto!important;display:flex!important;flex-direction:column!important;justify-content:flex-start!important;align-items:stretch!important;gap:7px!important;padding:0 5px 0 18px!important;overflow-y:auto!important;overflow-x:hidden!important;z-index:20!important;background:linear-gradient(90deg,rgba(0,0,0,0),rgba(0,0,0,.35) 20%,rgba(0,0,0,.55))!important;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.32) transparent}
body.ux-sharing #ux-rail:empty{display:none!important}
body.ux-sharing #ux-rail>.peer{position:relative!important;inset:auto!important;top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;width:100%!important;height:auto!important;max-width:none!important;max-height:none!important;aspect-ratio:16/9!important;flex:0 0 auto!important;margin:0!important;border:1px solid rgba(255,255,255,.22)!important;border-radius:10px!important;overflow:hidden!important;background:#0b1220!important;box-shadow:0 5px 18px rgba(0,0,0,.24)!important}
body.ux-sharing #ux-rail>.peer.ux-self:not(.ux-screenshare){width:100%!important;align-self:stretch!important}
body.ux-sharing #ux-rail .peer .media{object-fit:cover!important}

/* Fullscreen presentation: the stage owns the viewport, and the dock slides
 * away until the pointer reaches the bottom edge. */
body.ux-presentation-full .ux-topbar{display:none!important}
body.ux-presentation-full #mainrow{top:0!important;bottom:0!important;height:100dvh!important;padding:0!important}
body.ux-presentation-full #video-container{border-radius:0!important}
body.ux-presentation-full .ux-dock{transform:translate(-50%,calc(100% + 28px))!important;opacity:0!important;pointer-events:none!important;transition:transform .2s ease,opacity .2s ease!important}
body.ux-presentation-full.ux-dock-visible .ux-dock{transform:translate(-50%,0)!important;opacity:1!important;pointer-events:auto!important}

/* Narrow screens: exit is always present; screen, recording and fullscreen
 * move into the More menu. */
@media(max-width:750px){
  .ux-dock #ux-leave{display:flex!important}
  .ux-dock #ux-screen,.ux-dock #ux-record,.ux-dock #ux-fullscreen{display:none!important}
  .ux-dock #ux-more{display:flex!important}
  .ux-dock #ux-hand{min-width:0!important;flex:1 1 0!important}
  .ux-dock #ux-hand span{max-width:52px!important;font-size:8.5px!important}
  body.ux-sharing #mainrow{top:var(--ux-top)!important;bottom:var(--ux-bar)!important;height:calc(100dvh - var(--ux-top) - var(--ux-bar))!important}
  body.ux-sharing #peers>#ux-rail{top:auto!important;left:0!important;right:0!important;bottom:0!important;width:100%!important;height:88px!important;flex-direction:row!important;align-items:stretch!important;overflow-x:auto!important;overflow-y:hidden!important;padding:6px!important;background:linear-gradient(0deg,rgba(0,0,0,.78),rgba(0,0,0,0))!important;gap:6px!important}
  body.ux-sharing #ux-rail>.peer,body.ux-sharing #ux-rail>.peer.ux-self:not(.ux-screenshare){width:142px!important;height:auto!important;flex:0 0 142px!important;aspect-ratio:16/9!important}
  body.ux-sharing #ux-stage>.peer{width:100%!important;height:100%!important;inset:0!important}
}

@media(prefers-reduced-motion:reduce){
  body.ux-presentation-full .ux-dock{transition:none!important}
}

/* A muted device is muted in the whole control, not just its icon. */
#ux-mic.muted,#ux-cam.muted,.ux-tool.muted{color:#ad665d!important}
#ux-mic.muted span,#ux-cam.muted span,.ux-tool.muted span{color:#ad665d!important}
#ux-mic.muted svg,#ux-cam.muted svg,.ux-tool.muted svg{background:#faf0ea!important;border-color:#f2d8cc!important;color:#ad665d!important}
body.ux-sharing #ux-mic.muted,body.ux-sharing #ux-cam.muted,body.ux-sharing .ux-tool.muted{color:#ad665d!important}
body.ux-sharing #ux-mic.muted span,body.ux-sharing #ux-cam.muted span,body.ux-sharing .ux-tool.muted span{color:#ad665d!important}
body.ux-sharing #ux-mic.muted svg,body.ux-sharing #ux-cam.muted svg,body.ux-sharing .ux-tool.muted svg{background:#faf0ea!important;border-color:#f2d8cc!important;color:#ad665d!important}

/* Screen toggle: green while live, red when idle/closed. */
#ux-screen:not(.active),
body.ux-sharing #ux-screen:not(.active){color:#ad665d!important}
#ux-screen:not(.active) svg,
body.ux-sharing #ux-screen:not(.active) svg{background:#faf0ea!important;border-color:#f2d8cc!important;color:#ad665d!important}
#ux-screen.active,
body.ux-sharing #ux-screen.active{color:#0b624f!important}
#ux-screen.active svg,
body.ux-sharing #ux-screen.active svg{background:#cde6d6!important;border-color:#b1d5c0!important;color:#12624f!important}

/* Native participant pane is not part of this product. */
html body #left-sidebar,
html body.ux-panelopen #left-sidebar,
html body #left-sidebar.ux-open{display:none!important}

/* In-call layout: the selected participant or shared screen fills the stage
 * on the left, while a column of small square participant tiles sits on the
 * right. The stage stops at the dock (windowed) and the media is always
 * inscribed in its rectangle: a 4:3/narrow image gets green side padding, a
 * wide image gets green top/bottom padding. */
body.ux-inmeeting:not(.ux-dashboard-mode) .ux-topbar{display:none!important}
body.ux-inmeeting:not(.ux-dashboard-mode):not(.ux-presentation-full) #mainrow{
  top:0!important;
  bottom:var(--ux-bar,84px)!important;
  height:calc(100dvh - var(--ux-bar,84px))!important;
  padding:0!important;
  background:radial-gradient(circle at 50% 35%,#27483d,#13251f)!important
}
body.ux-inmeeting:not(.ux-dashboard-mode) #video-container{
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  background:transparent!important
}
body.ux-inmeeting:not(.ux-dashboard-mode) #peers{
  position:absolute!important;
  inset:0!important;
  display:flex!important;
  flex-wrap:nowrap!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  gap:0!important;
  padding:0!important;
  overflow:hidden!important;
  background:radial-gradient(circle at 50% 35%,#27483d,#13251f)!important
}
body.ux-inmeeting #peers>#ux-stage{
  position:relative!important;
  inset:auto!important;
  flex:1 1 auto!important;
  width:auto!important;
  min-width:0!important;
  height:100%!important;
  min-height:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  background:radial-gradient(circle at 50% 35%,#27483d,#13251f)!important
}
body.ux-inmeeting #ux-stage>.peer{
  position:relative!important;
  inset:auto!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  background:transparent!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important
}
body.ux-inmeeting #ux-stage>.peer.ux-avatar-mode .ux-avatar,
body.ux-inmeeting #ux-rail>.peer.ux-avatar-mode .ux-avatar{display:flex!important}
body.ux-inmeeting #ux-stage>.peer video,
body.ux-inmeeting #ux-stage>.peer .media{
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:contain!important;
  border-radius:0!important;
  background:transparent!important
}
body.ux-inmeeting:not(.ux-sharing) #peers>#ux-rail,
body.ux-sharing #peers>#ux-rail{
  position:relative!important;
  inset:auto!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  left:auto!important;
  flex:0 0 clamp(130px,12.5vw,185px)!important;
  width:clamp(130px,12.5vw,185px)!important;
  min-width:0!important;
  height:100%!important;
  min-height:0!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-start!important;
  align-items:stretch!important;
  gap:8px!important;
  padding:8px!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  background:transparent!important;
  box-shadow:none!important;
  z-index:auto!important
}
body.ux-inmeeting #peers>#ux-rail:empty{display:none!important}
body.ux-inmeeting #ux-rail>.peer,
body.ux-inmeeting #ux-rail>.peer.ux-self,
body.ux-inmeeting #ux-rail>.peer.ux-screenshare{
  position:relative!important;
  inset:auto!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  left:auto!important;
  width:100%!important;
  height:auto!important;
  max-width:none!important;
  max-height:none!important;
  aspect-ratio:1/1!important;
  flex:0 0 auto!important;
  align-self:stretch!important;
  margin:0!important;
  border:1px solid rgba(255,255,255,.16)!important;
  border-radius:12px!important;
  overflow:hidden!important;
  background:#173028!important;
  box-shadow:none!important
}
body.ux-inmeeting #ux-rail .peer video,
body.ux-inmeeting #ux-rail .peer .media{
  display:block!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  object-fit:cover!important;
  border-radius:0!important;
  background:#173028!important
}
body.ux-inmeeting #ux-rail .peer.ux-avatar-mode .ux-avatar-circle{
  width:min(46%,54px)!important;
  min-width:34px!important;
  font-size:16px!important
}
body.ux-inmeeting #ux-rail .peer .label{
  left:0!important;
  right:auto!important;
  top:0!important;
  bottom:auto!important;
  max-width:calc(100% - 6px)!important;
  font-size:10px!important;
  padding:2px 5px!important
}
body.ux-inmeeting #ux-rail .peer .ux-micbadge{left:6px!important;bottom:6px!important;width:22px!important;height:22px!important}
body.ux-inmeeting #ux-rail .peer,body.ux-inmeeting #ux-rail .peer *{user-select:none!important;-webkit-user-select:none!important}
body.ux-inmeeting #peers .peer.ux-speaking{box-shadow:inset 0 0 0 2px #5bd3a2!important}
body.ux-inmeeting #peers .peer.ux-speaking>.ux-micbadge{background:#2b8e70!important;box-shadow:0 0 0 3px rgba(43,142,112,.28),0 3px 10px rgba(0,0,0,.2)!important}
body.ux-inmeeting #peers .peer.ux-speaking>.ux-micbadge::after{content:'';position:absolute;inset:-4px;border:2px solid #64d4a8;border-radius:50%;animation:ux-speaking-pulse 1.15s ease-out infinite;pointer-events:none}
@keyframes ux-speaking-pulse{0%{transform:scale(.92);opacity:.9}70%{transform:scale(1.3);opacity:0}100%{transform:scale(1.3);opacity:0}}
/* The participant rail is a light panel, matching the dock instead of the
 * dark video stage. */
body.ux-inmeeting:not(.ux-sharing) #peers>#ux-rail{background:linear-gradient(180deg,#fbf8f2,#f1ede4)!important;border-left:1px solid rgba(28,67,53,.13)!important;box-shadow:inset 1px 0 0 rgba(255,255,255,.65)!important}
body.ux-inmeeting:not(.ux-sharing) #ux-rail>.peer{border-color:rgba(28,67,53,.14)!important}

/* Windowed calls: a full-width dock, so the stage never overlaps it and no
 * white band is left on either side. */
body.ux-inmeeting:not(.ux-dashboard-mode) .ux-dock{
  left:0!important;
  right:0!important;
  width:100%!important;
  max-width:none!important;
  transform:none!important;
  border-radius:0!important;
  justify-content:center!important;
  overflow:visible!important;
  padding-bottom:max(13px,env(safe-area-inset-bottom))!important
}

/* A two-line label must never lift its button. All dock actions are aligned
 * to the top, so the hand's second line can extend below the button box. */
.ux-dock .ux-tool,
.ux-dock .ux-tool.danger,
.ux-dock #ux-hand{
  justify-content:flex-start!important;
  align-items:center!important;
  overflow:visible!important
}
.ux-dock .ux-tool svg{flex:0 0 auto!important}
.ux-dock .ux-tool span,
.ux-dock #ux-hand span{display:block!important;margin-top:0!important;line-height:1.05!important}

@media(max-width:750px){
  body.ux-inmeeting:not(.ux-sharing) #peers>#ux-rail,
  body.ux-sharing #peers>#ux-rail{
    flex:0 0 min(28vw,104px)!important;
    width:min(28vw,104px)!important;
    padding:6px!important;
    gap:6px!important
  }
  body.ux-inmeeting #ux-rail>.peer,
  body.ux-inmeeting #ux-rail>.peer.ux-self,
  body.ux-inmeeting #ux-rail>.peer.ux-screenshare{border-radius:9px!important}
}

/* Every dock action is exactly the same box. The hand differs only by its
 * two-line label, never by width/height. */
.ux-dock .ux-tool,
.ux-dock .ux-tool.danger,
.ux-dock #ux-hand{
  width:58px!important;
  min-width:58px!important;
  max-width:58px!important;
  height:68px!important;
  flex:0 0 58px!important;
  padding:3px 3px!important;
  gap:4px!important;
  white-space:normal!important
}
.ux-dock .ux-tool span,
.ux-dock #ux-hand span{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  white-space:normal!important;
  overflow:visible!important;
  line-height:1.08!important;
  font-size:9px!important;
  text-align:center!important
}

/* The participant ribbon is always a right-side vertical column, including
 * on narrow screens. It overlays the presentation instead of becoming a
 * bottom filmstrip. */
@media(max-width:750px){
  .ux-dock .ux-tool,
  .ux-dock .ux-tool.danger,
  .ux-dock #ux-hand{
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    height:60px!important;
    flex:1 1 0!important;
    padding:2px 1px!important
  }
  body.ux-sharing #peers>#ux-rail{
    top:8px!important;
    left:auto!important;
    right:8px!important;
    bottom:8px!important;
    width:min(36vw,150px)!important;
    height:auto!important;
    flex-direction:column!important;
    align-items:stretch!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    padding:0 4px 0 10px!important;
    background:linear-gradient(90deg,rgba(0,0,0,0),rgba(0,0,0,.35) 20%,rgba(0,0,0,.55))!important;
    gap:7px!important
  }
  body.ux-sharing #ux-rail>.peer,
  body.ux-sharing #ux-rail>.peer.ux-self:not(.ux-screenshare){
    width:100%!important;
    height:auto!important;
    flex:0 0 auto!important;
    aspect-ratio:16/9!important
  }
}

/* ===================== Final layout and interaction fixes ===================== */
/* The native participant pane was replaced by the right-hand video rail. */
html body #left-sidebar,
html body.ux-panelopen #left-sidebar,
html body #left-sidebar.ux-open{display:none!important}

/* Settings: fixed title bar, only the options area scrolls. */
html body #sidebarnav{
  display:none!important;
  flex-direction:column!important;
  overflow:hidden!important;
  padding:0!important
}
html body #sidebarnav.ux-open{display:flex!important}
html body #sidebarnav .sidenav-header{
  position:relative!important;
  flex:0 0 auto!important;
  z-index:3!important
}
html body #sidebarnav #optionsdiv{
  flex:1 1 auto!important;
  min-height:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain
}

/* In-call stage: neutral frame, selected participant/screen in the stage,
 * square cameras in a right-hand rail. This block is deliberately last so it
 * also overrides every old desktop/mobile sharing rule. */
body.ux-inmeeting:not(.ux-dashboard-mode) .ux-topbar{display:none!important}
body.ux-inmeeting:not(.ux-dashboard-mode):not(.ux-presentation-full) #mainrow{
  top:0!important;
  bottom:var(--ux-bar,84px)!important;
  height:calc(100dvh - var(--ux-bar,84px))!important;
  padding:0!important;
  background:#0d1119!important
}
body.ux-inmeeting #video-container{
  position:relative!important;
  top:0!important;
  right:0!important;
  bottom:0!important;
  left:0!important;
  margin:0!important;
  height:100%!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  background:#0d1119!important
}
body.ux-inmeeting #peers{
  position:absolute!important;
  inset:0!important;
  display:flex!important;
  flex-wrap:nowrap!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  gap:0!important;
  padding:0!important;
  overflow:hidden!important;
  background:#0d1119!important
}
body.ux-inmeeting #peers>#ux-stage{
  position:relative!important;
  inset:auto!important;
  flex:1 1 auto!important;
  width:auto!important;
  min-width:0!important;
  height:100%!important;
  min-height:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  background:#0d1119!important
}
body.ux-inmeeting #ux-stage>.peer{
  position:relative!important;
  inset:auto!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  background:#0d1119!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important
}
body.ux-inmeeting #ux-stage>.peer.ux-avatar-mode{background:radial-gradient(circle at 50% 35%,#27483d,#13251f)!important}
body.ux-inmeeting #ux-stage>.peer video,
body.ux-inmeeting #ux-stage>.peer .media{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  object-fit:contain!important;
  border-radius:0!important;
  background:transparent!important;
  position:relative!important;
  z-index:1!important
}
/* Ambient blurred fill on the stage edges. The real video above keeps the
 * correct aspect ratio; the rail never gets a second video. */
body.ux-inmeeting #ux-stage>.peer>.ux-ambient{
  display:block!important;
  position:absolute!important;
  inset:-28px!important;
  width:calc(100% + 56px)!important;
  height:calc(100% + 56px)!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:cover!important;
  filter:blur(28px) saturate(1.08)!important;
  opacity:.62!important;
  transform:scale(1.04)!important;
  border-radius:0!important;
  pointer-events:none!important;
  z-index:0!important
}
body.ux-inmeeting #ux-rail .peer>.ux-ambient{display:none!important}
/* The outgoing canvas already contains the mirrored image. Suppress the
 * native CSS mirror for that tile so the local preview is not double-flipped. */
body.ux-inmeeting #peers .peer.ux-mirror-stream .media{transform:none!important}
body.ux-inmeeting #ux-stage>.peer>.ux-avatar{z-index:2!important}
body.ux-inmeeting #ux-stage>.peer>.label,
body.ux-inmeeting #ux-stage>.peer>.ux-micbadge,
body.ux-inmeeting #ux-stage>.peer>.ux-handbadge{z-index:5!important}
body.ux-inmeeting #ux-stage>.peer.ux-avatar-mode .ux-avatar{display:flex!important}
body.ux-inmeeting #ux-rail>.peer.ux-avatar-mode .ux-avatar{display:flex!important}
body.ux-inmeeting:not(.ux-sharing) #peers>#ux-rail,
body.ux-sharing #peers>#ux-rail{
  position:relative!important;
  inset:auto!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  left:auto!important;
  flex:0 0 clamp(130px,12.5vw,185px)!important;
  width:clamp(130px,12.5vw,185px)!important;
  min-width:0!important;
  height:100%!important;
  min-height:0!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-start!important;
  align-items:stretch!important;
  gap:8px!important;
  padding:8px!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  background:#0d1119!important;
  box-shadow:none!important;
  z-index:auto!important
}
body.ux-inmeeting #peers>#ux-rail:empty{display:none!important}
body.ux-inmeeting #ux-rail>.peer,
body.ux-inmeeting #ux-rail>.peer.ux-self,
body.ux-inmeeting #ux-rail>.peer.ux-screenshare{
  position:relative!important;
  inset:auto!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  left:auto!important;
  width:100%!important;
  height:auto!important;
  max-width:none!important;
  max-height:none!important;
  aspect-ratio:1/1!important;
  flex:0 0 auto!important;
  align-self:stretch!important;
  margin:0!important;
  border:1px solid rgba(255,255,255,.16)!important;
  border-radius:11px!important;
  overflow:hidden!important;
  background:#173028!important;
  box-shadow:none!important
}
body.ux-inmeeting #ux-rail .peer video,
body.ux-inmeeting #ux-rail .peer .media{
  display:block!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  object-fit:cover!important;
  border-radius:0!important;
  background:#173028!important
}
body.ux-inmeeting #ux-rail .peer .label{
  left:0!important;
  right:auto!important;
  top:0!important;
  bottom:auto!important;
  max-width:calc(100% - 6px)!important;
  font-size:10px!important;
  padding:2px 5px!important
}
body.ux-inmeeting #ux-rail .peer .ux-micbadge{left:6px!important;bottom:6px!important;width:22px!important;height:22px!important}
body.ux-inmeeting #ux-rail .peer .ux-handbadge{left:32px!important;bottom:6px!important;width:22px!important;height:22px!important}
body.ux-inmeeting #ux-rail .peer,body.ux-inmeeting #ux-rail .peer *{user-select:none!important;-webkit-user-select:none!important}
body.ux-inmeeting #peers .peer.ux-speaking{box-shadow:inset 0 0 0 2px #5bd3a2!important}
body.ux-inmeeting #peers .peer.ux-speaking>.ux-micbadge{background:#2b8e70!important;box-shadow:0 0 0 3px rgba(43,142,112,.28),0 3px 10px rgba(0,0,0,.2)!important}
body.ux-inmeeting #peers .peer.ux-speaking>.ux-micbadge::after{content:'';position:absolute;inset:-4px;border:2px solid #64d4a8;border-radius:50%;animation:ux-speaking-pulse 1.15s ease-out infinite;pointer-events:none}
@keyframes ux-speaking-pulse{0%{transform:scale(.92);opacity:.9}70%{transform:scale(1.3);opacity:0}100%{transform:scale(1.3);opacity:0}}
/* The participant rail is a light panel, matching the dock instead of the
 * dark video stage. */
body.ux-inmeeting:not(.ux-sharing) #peers>#ux-rail{background:linear-gradient(180deg,#fbf8f2,#f1ede4)!important;border-left:1px solid rgba(28,67,53,.13)!important;box-shadow:inset 1px 0 0 rgba(255,255,255,.65)!important}
body.ux-inmeeting:not(.ux-sharing) #ux-rail>.peer{border-color:rgba(28,67,53,.14)!important}

/* Full-width dock; JS measures its actual height into --ux-bar so the stage
 * stops exactly above it on every viewport. */
body.ux-inmeeting:not(.ux-dashboard-mode) .ux-dock{
  left:0!important;
  right:0!important;
  width:100%!important;
  max-width:none!important;
  transform:none!important;
  border-radius:0!important;
  justify-content:center!important;
  overflow:visible!important;
  padding-bottom:max(13px,env(safe-area-inset-bottom))!important
}
.ux-dock .ux-tool,
.ux-dock .ux-tool.danger,
.ux-dock #ux-hand{justify-content:flex-start!important;align-items:center!important;overflow:visible!important}
.ux-dock .ux-tool svg{flex:0 0 auto!important}
.ux-dock .ux-tool span,
.ux-dock #ux-hand span{display:block!important;margin-top:0!important;line-height:1.05!important}

/* Meeting-ended screen for participants. */
body.ux-meeting-ended .ux-topbar,
body.ux-meeting-ended .ux-dock,
body.ux-meeting-ended #login-container,
body.ux-meeting-ended #video-container,
body.ux-meeting-ended #sidebarnav,
body.ux-meeting-ended #left,
body.ux-meeting-ended #left-sidebar{display:none!important}
body.ux-meeting-ended{background:radial-gradient(ellipse at 50% 24%,#263e34 0%,#0d1119 70%)!important}
body.ux-meeting-ended #ux-meeting-ended{display:flex!important}
body.ux-meeting-ended{overflow:hidden!important;background:#0d1119!important}
.ux-meeting-ended{position:fixed!important;top:0!important;right:0!important;bottom:0!important;left:0!important;width:100vw!important;height:100dvh!important;margin:0!important;z-index:9999!important;align-items:center!important;justify-content:center!important;padding:24px!important;background:radial-gradient(ellipse at 50% 24%,#263e34 0%,#0d1119 70%)!important;color:#f1f5fb!important}
.ux-ended-card{max-width:460px;text-align:center;padding:36px 34px;border:1px solid rgba(255,255,255,.14);border-radius:22px;background:rgba(23,30,42,.92);box-shadow:0 30px 90px rgba(0,0,0,.35)}
.ux-ended-mark{width:56px;height:56px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;background:#1f8a6d;color:#fff;font-size:28px;font-weight:700}
.ux-ended-card h1{font-size:24px;margin:0 0 10px;color:#f1f5fb}.ux-ended-card p{font-size:14px;line-height:1.55;margin:0;color:#b6c6d9}

@media(max-width:750px){
  body.ux-inmeeting:not(.ux-sharing) #peers>#ux-rail,
  body.ux-sharing #peers>#ux-rail{
    flex:0 0 min(28vw,104px)!important;
    width:min(28vw,104px)!important;
    padding:6px!important;
    gap:6px!important
  }
  body.ux-inmeeting #ux-rail>.peer,
  body.ux-inmeeting #ux-rail>.peer.ux-self,
  body.ux-inmeeting #ux-rail>.peer.ux-screenshare{border-radius:9px!important}
  body.ux-inmeeting:not(.ux-dashboard-mode):not(.ux-presentation-full) #mainrow{top:0!important;padding:0!important}
  html body #sidebarnav{top:8px!important;right:8px!important;bottom:calc(var(--ux-bar,80px) + 8px)!important;width:calc(100vw - 16px)!important}
}

/* Final corrections after the presentation/camera switch. Older sharing
 * rules left the pinned camera at thumbnail width and gave the rail its own
 * rounded dark surface. The selected participant must own the stage, while
 * the rail is a seamless beige extension of the dock. */
body.ux-inmeeting.ux-sharing.ux-camera-stage #peers>#ux-stage>.peer.ux-pinned,
body.ux-inmeeting.ux-sharing.ux-camera-stage #ux-stage>.peer.ux-pinned{
  position:relative!important;
  inset:auto!important;
  flex:1 1 auto!important;
  width:100%!important;
  min-width:0!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  aspect-ratio:auto!important;
  align-self:stretch!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  background:radial-gradient(circle at 50% 35%,#27483d,#13251f)!important
}
body.ux-inmeeting.ux-sharing.ux-camera-stage #ux-stage>.peer.ux-pinned>.media,
body.ux-inmeeting.ux-sharing.ux-camera-stage #ux-stage>.peer.ux-pinned>video{
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:contain!important;
  border-radius:0!important
}
body.ux-inmeeting.ux-sharing.ux-camera-stage #ux-stage>.peer.ux-pinned>.ux-avatar{
  inset:0!important;
  width:100%!important;
  height:100%!important
}

/* The shared-screen thumbnail belongs to the rail and must fit inside it;
 * it must never cover the selected participant. */
body.ux-inmeeting.ux-sharing #peers>#ux-rail>.peer.ux-screenshare{
  position:relative!important;
  inset:auto!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  left:auto!important;
  width:100%!important;
  height:auto!important;
  max-width:none!important;
  max-height:none!important;
  aspect-ratio:16/9!important;
  flex:0 0 auto!important;
  margin:0!important
}
body.ux-inmeeting.ux-sharing #peers>#ux-rail>.peer.ux-screenshare .media,
body.ux-inmeeting.ux-sharing #peers>#ux-rail>.peer.ux-screenshare video{
  object-fit:contain!important;
  background:#0b1220!important
}

/* The participant ribbon uses the same beige surface as the dock: no gap,
 * no inset, no rounded floating cards. */
body.ux-inmeeting:not(.ux-dashboard-mode) #peers>#ux-rail{
  background:#e9e9e9!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  padding:0!important;
  gap:0!important
}
body.ux-inmeeting:not(.ux-dashboard-mode) #ux-rail>.peer,
body.ux-inmeeting:not(.ux-dashboard-mode) #ux-rail>.peer.ux-self,
body.ux-inmeeting:not(.ux-dashboard-mode) #ux-rail>.peer.ux-screenshare{
  width:100%!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  background:#e9e9e9!important
}

/* A rounded light-grey panel that wraps only its actions. It stays centered and
 * never stretches into a full-width strip. */
body.ux-inmeeting:not(.ux-dashboard-mode) .ux-dock,
body.ux-inmeeting:not(.ux-dashboard-mode).ux-sharing .ux-dock{
  left:50%!important;
  right:auto!important;
  width:max-content!important;
  max-width:calc(100vw - 20px)!important;
  transform:translateX(-50%)!important;
  box-sizing:border-box!important;
  background:#e9e9e9!important;
  border-top:1px solid #d6d6d6!important;
  border-radius:20px 20px 0 0!important;
  box-shadow:0 -4px 22px rgba(24,70,51,.09)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important
}
/* Fullscreen: glassy beige panel over the stage. It leaves and returns by
 * sliding behind the bottom edge; opacity is never animated. */
body.ux-presentation-full:not(.ux-dashboard-mode) .ux-dock{
  background:rgba(233,233,233,.4)!important;
  border-top-color:rgba(255,255,255,.45)!important;
  box-shadow:0 -8px 28px rgba(0,0,0,.18)!important;
  backdrop-filter:blur(6px)!important;
  -webkit-backdrop-filter:blur(6px)!important;
  opacity:1!important;
  pointer-events:none!important;
  transform:translate(-50%,calc(100% + 32px))!important;
  transition:transform .3s cubic-bezier(.22,.8,.32,1)!important
}
body.ux-presentation-full:not(.ux-dashboard-mode).ux-dock-visible .ux-dock{
  transform:translate(-50%,0)!important;
  opacity:1!important;
  pointer-events:auto!important
}
@media(prefers-reduced-motion:reduce){
  body.ux-presentation-full:not(.ux-dashboard-mode) .ux-dock{transition:none!important}
}

/* The selected stage tile is not a thumbnail: the same avatar sizing applies
 * in windowed and fullscreen calls. Rail thumbnails stay compact. */
#peers>#ux-stage>.peer.ux-avatar-mode .ux-avatar-circle{
  width:clamp(150px,30vmin,380px)!important;
  min-width:150px!important;
  max-width:none!important;
  flex:0 0 auto!important;
  font-size:clamp(48px,10vmin,132px)!important
}

/* Presentation thumbnail owner: a compact avatar and name in the lower-left. */
.ux-share-owner{
  display:none;
  position:absolute;
  left:6px;
  bottom:6px;
  z-index:7;
  align-items:center;
  gap:5px;
  max-width:calc(100% - 12px);
  padding:2px 8px 2px 2px;
  border-radius:999px;
  background:rgba(0,0,0,.52);
  color:#fff;
  pointer-events:none;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px)
}
#ux-rail>.peer.ux-screenshare .ux-share-owner{display:flex}
.ux-share-avatar{
  width:22px;
  height:22px;
  flex:0 0 22px;
  display:grid;
  place-items:center;
  border-radius:50%;
  font-size:9px;
  font-weight:700;
  line-height:1;
  border:1px solid rgba(255,255,255,.35)
}
.ux-share-name{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:10px;
  font-weight:650;
  text-shadow:0 1px 3px rgba(0,0,0,.45)
}
body.ux-presentation-full #ux-stage>.peer.ux-avatar-mode .label{
  font-size:clamp(14px,1.5vmin,20px)!important;
  bottom:clamp(14px,2vmin,28px)!important
}

/* A participant who is presenting gets a second, clickable screen badge
 * directly beside the microphone. */
#peers .ux-sharebadge{
  position:absolute;
  bottom:10px;
  z-index:7;
  width:22px;
  height:22px;
  padding:0;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.55);
  background:rgba(20,104,91,.9);
  color:#fff;
  display:none;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 3px 10px rgba(0,0,0,.2)
}
#peers .ux-sharebadge svg{width:13px!important;height:13px!important;stroke-width:2.2!important}
#peers .ux-sharebadge:hover{background:#0f5548}
#ux-rail .ux-sharebadge{bottom:6px}

/* The organizer's name gets the same outlined treatment as a role badge,
 * without covering the microphone or screen icons. */
#peers .peer.ux-organizer>.label{
  border:1px solid rgba(255,255,255,.9)!important;
  box-shadow:0 0 0 1px rgba(12,28,23,.35),0 2px 8px rgba(0,0,0,.25)!important
}

/* Readable labels over the translucent fullscreen dock. */
body.ux-presentation-full .ux-dock .ux-tool span,
body.ux-presentation-full .ux-dock #ux-hand span{
  background:#fff!important;
  color:#21473a!important;
  border-radius:999px!important;
  padding:2px 8px!important;
  text-shadow:none!important;
  box-shadow:0 1px 3px rgba(0,0,0,.18)
}

/* Chat bubbles: own messages are green and right-aligned, incoming messages
 * are grey and left-aligned. The small bottom corner forms the tail. */
#box .message-row{
  display:flex!important;
  justify-content:flex-start!important;
  align-items:flex-end!important;
  width:100%!important
}
#box .message-row::before,#box .message-row::after{display:none!important;content:none!important}
#box .message{
  position:relative!important;
  display:block!important;
  max-width:84%!important;
  margin:0 0 11px!important;
  padding:7px 10px 9px!important;
  border:1px solid #dce3dc!important;
  border-radius:14px 14px 14px 5px!important;
  background:#eef1ee!important;
  box-shadow:0 1px 2px rgba(28,69,55,.05)!important
}
#box .message-sender{
  margin-left:auto!important;
  border-color:#c4e4b0!important;
  border-radius:14px 14px 5px 14px!important;
  background:#d9f1c7!important
}
#box .message:not(.message-sender):not(.message-system)::after{
  content:''!important;
  position:absolute!important;
  left:-7px!important;
  bottom:0!important;
  width:0!important;
  height:0!important;
  border-top:8px solid #eef1ee!important;
  border-left:8px solid transparent!important
}
#box .message-sender::after{
  content:''!important;
  position:absolute!important;
  right:-7px!important;
  bottom:0!important;
  width:0!important;
  height:0!important;
  border-top:8px solid #d9f1c7!important;
  border-right:8px solid transparent!important
}
#box .message-private{background:#fff!important;border-style:dashed!important}
#box .message-private.message-sender::after{border-top-color:#fff!important}
#box .message-system{
  max-width:100%!important;
  background:#f2f4f1!important;
  border-color:#e4e8e2!important;
  color:#7a8d82!important;
  font-size:11px!important;
  border-radius:9px!important
}
#box .message-content{font-size:13px!important;color:#21473a!important;line-height:1.45!important}
#box .message-header{font-size:11px!important;color:#5d7c6d!important;font-style:normal!important;margin:0 0 3px!important}
#box .message-user{font-weight:700!important}
#box .message-time{margin-left:7px!important;font-size:10px!important;color:#8aa093!important}
#box .message-footer{margin:0!important;padding:0!important;color:#80968a!important;font-size:10px!important;line-height:1!important}

/* One warm canvas behind the call. The rail and the dock are transparent so
 * both show the same page-level gradient instead of two slightly different
 * flat greys. The gradient is fixed to the viewport, so it reads as one
 * continuous surface across the stage, the participant rail and the dock. */
html body.ux-inmeeting:not(.ux-dashboard-mode):not(.ux-sharing){
  background:
    radial-gradient(ellipse 1150px 760px at 7% -12%,rgba(255,255,252,.96) 0%,rgba(255,255,252,0) 64%),
    radial-gradient(ellipse 980px 720px at 104% 106%,rgba(226,199,164,.7) 0%,rgba(226,199,164,0) 68%),
    linear-gradient(128deg,#fbf6ec 0%,#f4eadb 48%,#eadbc7 100%)!important;
  background-attachment:fixed!important
}
html body.ux-inmeeting:not(.ux-dashboard-mode):not(.ux-sharing) #main,
html body.ux-inmeeting:not(.ux-dashboard-mode):not(.ux-sharing) #mainrow,
html body.ux-inmeeting:not(.ux-dashboard-mode):not(.ux-sharing) #video-container,
html body.ux-inmeeting:not(.ux-dashboard-mode):not(.ux-sharing) #peers,
html body.ux-inmeeting:not(.ux-dashboard-mode):not(.ux-sharing) #peers>#ux-stage,
html body.ux-inmeeting:not(.ux-dashboard-mode):not(.ux-sharing) #peers>#ux-stage>.peer{
  background:transparent!important;
  box-shadow:none!important
}
/* The blurred video edge used to paint a dark halo over the new canvas. */
html body.ux-inmeeting:not(.ux-dashboard-mode):not(.ux-sharing) #peers>#ux-stage>.peer>.ux-ambient{
  display:none!important
}
html body.ux-inmeeting:not(.ux-dashboard-mode):not(.ux-sharing) #peers>#ux-stage>.peer.ux-avatar-mode,
html body.ux-inmeeting:not(.ux-dashboard-mode):not(.ux-sharing) #peers>#ux-stage>.peer.ux-avatar-mode>.ux-avatar{
  background:radial-gradient(circle at 50% 32%,#fffaf2 0%,#f1e4d2 58%,#e4d3bc 100%)!important
}
html body.ux-inmeeting:not(.ux-dashboard-mode):not(.ux-sharing) #peers>#ux-rail{
  background:transparent!important;
  border:0!important;
  border-left:1px solid rgba(116,86,53,.13)!important;
  box-shadow:inset 1px 0 0 rgba(255,255,255,.55)!important;
  border-radius:0!important
}
html body.ux-inmeeting:not(.ux-dashboard-mode):not(.ux-sharing) #ux-rail>.peer,
html body.ux-inmeeting:not(.ux-dashboard-mode):not(.ux-sharing) #ux-rail>.peer.ux-self,
html body.ux-inmeeting:not(.ux-dashboard-mode):not(.ux-sharing) #ux-rail>.peer.ux-screenshare{
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important
}
html body.ux-inmeeting:not(.ux-dashboard-mode):not(.ux-sharing) #ux-rail .peer.ux-avatar-mode .ux-avatar{
  background:linear-gradient(150deg,#fbf4e9,#e6d4bd)!important
}
html body.ux-inmeeting:not(.ux-dashboard-mode):not(.ux-sharing) .ux-dock{
  background:transparent!important;
  border-top:1px solid rgba(116,86,53,.13)!important;
  border-radius:0!important;
  box-shadow:0 -12px 34px rgba(110,82,48,.08)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important
}
html body.ux-inmeeting:not(.ux-dashboard-mode):not(.ux-sharing) .ux-dock .ux-tool svg{
  box-shadow:0 4px 14px rgba(104,75,43,.09)!important
}

/* Fullscreen labels are a soft white glow, not a hard-edged white pill. The
 * shadow is a blurred pseudo-element behind the text; the text itself keeps
 * the full label width so "Настройки" cannot be clipped by the shadow. */
body.ux-presentation-full:not(.ux-dashboard-mode) .ux-dock .ux-tool span,
body.ux-presentation-full:not(.ux-dashboard-mode) .ux-dock #ux-hand span{
  position:relative!important;
  z-index:1!important;
  isolation:isolate!important;
  display:block!important;
  width:auto!important;
  max-width:none!important;
  padding:3px 4px!important;
  color:#21473a!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  text-shadow:none!important;
  white-space:nowrap!important
}
body.ux-presentation-full:not(.ux-dashboard-mode) .ux-dock .ux-tool span::before,
body.ux-presentation-full:not(.ux-dashboard-mode) .ux-dock #ux-hand span::before{
  content:''!important;
  position:absolute!important;
  z-index:-1!important;
  left:50%!important;
  top:50%!important;
  width:calc(100% + 18px)!important;
  height:calc(100% + 10px)!important;
  transform:translate(-50%,-50%)!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.92)!important;
  filter:blur(6px)!important;
  opacity:.96!important;
  pointer-events:none!important
}
body.ux-presentation-full:not(.ux-dashboard-mode) .ux-dock #ux-hand span{
  max-width:68px!important;
  white-space:normal!important
}
body.ux-presentation-full:not(.ux-dashboard-mode) .ux-dock #ux-settings{
  width:74px!important;
  min-width:74px!important;
  max-width:74px!important;
  flex-basis:74px!important
}
@media(max-width:750px){
  body.ux-presentation-full:not(.ux-dashboard-mode) .ux-dock #ux-settings{
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    flex:1 1 0!important
  }
}