button{transition:background .18s ease,transform .18s ease,opacity .18s ease}button:active{transform:scale(.96)}.user{transition:background .18s ease}.bubble{animation:message-in .18s ease-out}.profile-dialog[open]{animation:call-in .2s ease-out}
.call{inset:5vh max(16px,calc((100vw - 960px)/2));border:1px solid #373737;border-radius:20px;background:#1b1d20;box-shadow:0 24px 100px #000b;overflow:hidden;animation:call-in .24s ease-out}
.callinfo{transform:translateY(-40px);transition:opacity .2s ease}.callinfo .avatar.big{width:144px;height:144px;border-radius:50%;background:#3c3e42;font-size:56px;font-weight:400}.callinfo h2{font-size:23px;font-weight:500;margin:28px 0 10px}.callinfo p{font-size:14px;color:#a7aaae;margin:0}
.call .callbuttons{bottom:46px;gap:20px;align-items:flex-start;max-width:100%;padding:0 14px}.call .callbuttons button,.call.incoming .callbuttons button{position:relative;background:transparent!important;min-width:70px;width:82px;height:82px;padding:0!important;border:0;border-radius:0;color:#eee!important;font-size:11px;display:flex;flex-direction:column;align-items:center;gap:9px;text-decoration:none;line-height:16px;white-space:nowrap}
.call .callbuttons button:before{content:'';display:block;width:50px;height:50px;border-radius:50%;background:#36393d;flex-shrink:0;transition:background .2s,transform .2s;background-position:center;background-repeat:no-repeat;background-size:22px}
.call .callbuttons button:hover:before{background-color:#51555a}.call .callbuttons button[aria-pressed=true]:before{background-color:#73777c}.call .callbuttons #accept:before{content:'✓';background:#eee;color:#151515;font-size:25px;line-height:50px}.call .callbuttons #reject:before{content:'×';background:#e5e5e5;color:#171717;font-size:30px;line-height:48px}
.call .callbuttons #toggleMic:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='white' stroke-width='1.8' viewBox='0 0 24 24'%3E%3Crect x='9' y='2' width='6' height='12' rx='3'/%3E%3Cpath d='M5 10v2a7 7 0 0 0 14 0v-2M12 19v3M8 22h8'/%3E%3C/svg%3E")}
.call .callbuttons #toggleCam:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='white' stroke-width='1.8' viewBox='0 0 24 24'%3E%3Crect x='2' y='5' width='14' height='14' rx='3'/%3E%3Cpath d='m16 9 6-3v12l-6-3'/%3E%3C/svg%3E")}
.call .callbuttons #shareScreen:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='white' stroke-width='1.8' viewBox='0 0 24 24'%3E%3Crect x='2' y='3' width='20' height='14' rx='2'/%3E%3Cpath d='M12 17v4M7 21h10m-9-11 4-4 4 4m-4-4v8'/%3E%3C/svg%3E")}
.call #remoteVideo{object-fit:contain;height:calc(100% - 155px);top:0;background:#111}.call #localVideo{width:160px;height:100px;top:16px;right:16px;object-fit:contain;border:1px solid #444;border-radius:12px;background:#111}
.call.incoming video{display:none!important}.call.video-active .callinfo{transform:none;top:20px;left:20px;background:#111b;padding:8px 12px;border-radius:10px}.call.video-active .callinfo h2{font-size:14px;margin:0}.call.video-active .callinfo p{font-size:12px;margin:4px 0 0}
@keyframes call-in{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}@keyframes message-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media(max-width:700px){.call{inset:0;border:0;border-radius:0}.call .callbuttons{bottom:max(30px,env(safe-area-inset-bottom));gap:6px}.call .callbuttons button{width:70px;min-width:60px}.callinfo .avatar.big{width:128px;height:128px}.call #localVideo{width:100px;height:130px}}
@media(prefers-reduced-motion:reduce){button,.user,.callinfo{transition:none}.call,.bubble,.profile-dialog[open]{animation:none}}
.call{inset:50% auto auto 50%;width:min(620px,calc(100vw - 32px));height:min(540px,calc(100dvh - 40px));transform:translate(-50%,-50%);animation:compact-call-in .2s ease-out}.call.video-active{width:min(1000px,calc(100vw - 32px));height:min(720px,calc(100dvh - 40px))}
.call .callinfo .avatar.big{width:112px;height:112px;font-size:44px}.call .callbuttons{bottom:24px;gap:8px}.call .callbuttons button{width:76px;min-width:60px}
.call .callbuttons #toggleMic[aria-pressed=true]:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='white' stroke-width='1.8' viewBox='0 0 24 24'%3E%3Cpath d='M9 9V5a3 3 0 0 1 6 0v8M5 10v2a7 7 0 0 0 12 5M19 10v2M12 19v3M8 22h8M2 2l20 20'/%3E%3C/svg%3E")}
.call .callbuttons #noiseControl:before{content:'≋';font-size:30px;line-height:48px}.call .callbuttons #noiseControl:disabled{opacity:.45;cursor:not-allowed}
#fullscreenCall{position:absolute;right:16px;top:16px;z-index:6;border:1px solid #666;background:#222c;color:white;border-radius:8px;width:36px;height:36px;font-size:22px}.call #localVideo{top:64px}
.call:fullscreen,.call.expanded{inset:0;width:100vw;height:100dvh;transform:none;border-radius:0}.call:fullscreen #remoteVideo,.call.expanded #remoteVideo{height:calc(100% - 120px)}
@keyframes compact-call-in{from{opacity:0;transform:translate(-50%,-48%) scale(.98)}to{opacity:1;transform:translate(-50%,-50%)}}
@media(max-width:700px){.call,.call.video-active{width:calc(100vw - 16px);height:min(600px,calc(100dvh - 24px));border-radius:16px}.call .callbuttons{gap:0;padding:0 4px}.call .callbuttons button{width:64px;min-width:54px;font-size:10px}.call .callbuttons button:before{width:44px;height:44px}.call:fullscreen,.call.expanded{width:100vw;height:100dvh;border-radius:0}}