/* Video controls return with a tap and hide after three seconds. */ #callVideoArea{--call-ink:#edf8ff;--call-cyan:#42d5ff;background:#041222;color:var(--call-ink);font-family:system-ui,-apple-system,sans-serif} /* Keep the video clear; connection verification remains in the call menu. */ #callVideoArea[data-call-type=video] #callEncryptionBadge{display:none!important} /* Keep actions inside the visible viewport while Android closes its keyboard. */ #callVideoArea.open,#incomingCallPanel.open{top:var(--vobix-visual-top,0px);bottom:auto;height:var(--vobix-visual-height,100dvh);box-sizing:border-box} #incomingCallPanel.open{overflow-y:auto;align-items:safe center} #callVideoArea .callHeader{position:absolute;z-index:40;top:calc(18px + var(--vobix-safe-top, env(safe-area-inset-top)));left:22px;right:86px;pointer-events:none;text-shadow:0 2px 12px #0009} #callVideoArea .callBrand{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;letter-spacing:.3px;color:#d0f3ff} #callVideoArea .callBrand img{width:26px;height:26px;border-radius:8px} #callVideoArea .callPeerName{font-size:clamp(22px,5.4vw,32px);font-weight:650;line-height:1.2;margin:12px 0 0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#fff} #callVideoArea .callStatus{position:absolute;z-index:40;top:calc(106px + var(--vobix-safe-top, env(safe-area-inset-top)));left:22px;max-width:calc(100% - 104px);transform:none;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none;font:500 13px system-ui;color:#e2f3ff;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 8px #000} #callVideoArea::after{content:'';pointer-events:none;position:absolute;inset:0;z-index:25;background:linear-gradient(#0313269e,transparent 26%,transparent 72%,#03132670);transition:opacity .2s} #callVideoArea .callControls{position:absolute!important;z-index:50!important;left:50%!important;right:auto!important;bottom:calc(18px + var(--vobix-safe-bottom, env(safe-area-inset-bottom)))!important;transform:translateX(-50%)!important;display:flex!important;flex-wrap:nowrap!important;align-items:center!important;justify-content:space-between!important;gap:clamp(8px,3vw,18px)!important;width:min(calc(100% - 28px),410px)!important;max-width:410px!important;padding:12px!important;border:1px solid #b9eaff26!important;border-radius:999px!important;background:#071e30ed!important;box-shadow:0 10px 42px #0006!important;overflow:visible!important;box-sizing:border-box;backdrop-filter:blur(18px)} #callVideoArea .callControls>.callControl,#callVideoArea .callSideActions>.callControl{position:relative!important;order:0!important;flex:0 1 56px!important;display:grid!important;place-items:center!important;width:56px!important;min-width:44px!important;height:56px!important;padding:0!important;border:1px solid #ffffff0c!important;border-radius:50%!important;background:#ffffff16!important;color:var(--call-ink)!important;font-size:0!important;box-shadow:none!important;touch-action:manipulation} #callVideoArea .callControls>.callControl::after,#callVideoArea #addCallParticipantButton::after{content:none!important} #callVideoArea .callControls>[aria-pressed=true]{background:#dff6ff!important;color:#06334a!important} #callVideoArea .callControls>#endCallButton{background:#3582e7!important;color:white!important;flex-basis:60px!important} #callVideoArea .callControls>#callMoreButton{background:#ffffff12!important;color:#a9eaff!important} .callGlyph{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;pointer-events:none} #callVideoArea .callControlCaption{display:none;pointer-events:none} #callVideoArea[data-call-type=audio] #toggleRemoteAudioButton{align-content:center;gap:2px} #callVideoArea[data-call-type=audio] #toggleRemoteAudioButton .callGlyph{width:20px;height:20px} #callVideoArea[data-call-type=audio] #toggleRemoteAudioButton .callControlCaption{display:block;font:600 10px/1.1 system-ui,-apple-system,sans-serif;letter-spacing:0;white-space:nowrap} #callVideoArea button:focus-visible{outline:3px solid #5edcff!important;outline-offset:4px} #callVideoArea button:disabled{opacity:.45;cursor:default} #callVideoArea .callSideActions{position:absolute;z-index:40;right:18px;top:calc(20px + var(--vobix-safe-top, env(safe-area-inset-top)));display:grid;gap:12px} #callVideoArea .callSideActions>.callControl{width:48px!important;height:48px!important;background:#082438b8!important} #callVideoArea .callSideActions>[hidden],#callVideoArea[data-call-type=audio] #switchCameraButton{display:none!important} #callVideoArea .callSheet{position:absolute;z-index:70;left:50%;bottom:calc(108px + var(--vobix-safe-bottom, env(safe-area-inset-bottom)));transform:translateX(-50%);width:min(calc(100% - 28px),410px);max-height:calc(100% - 170px - var(--vobix-safe-top, env(safe-area-inset-top)) - var(--vobix-safe-bottom, env(safe-area-inset-bottom)));overflow:auto;box-sizing:border-box;padding:18px 14px 14px;border:1px solid #9ae2ff36;border-radius:26px;background:#092337f5;color:#effaff;box-shadow:0 18px 60px #0008;backdrop-filter:blur(20px)} #callVideoArea .callSheet[hidden]{display:none!important} #callVideoArea .callSheetHeading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 4px 12px} #callVideoArea .callSheetHeading h3{margin:0;font:600 17px system-ui} #callVideoArea .callSheetHeading button{width:38px;height:38px;min-width:38px;flex:none;background:#ffffff0d;border-radius:50%;color:#c2edff} #callVideoArea .callOption{position:static!important;transform:none!important;display:flex;align-items:center;gap:14px;min-height:56px;width:100%!important;height:auto!important;margin:0!important;padding:12px!important;background:transparent!important;border:0!important;border-radius:16px!important;color:#e9f8ff!important;font:500 15px system-ui!important;box-shadow:none!important;text-align:left} #callVideoArea .callOption:hover{background:#ffffff0b!important} #callVideoArea .callOption[hidden],#callVideoArea[data-call-type=audio] #expandLocalVideoButton{display:none!important} #callVideoArea .callNoiseOption{background:#ffffff08!important;margin-bottom:8px!important} #callVideoArea .callNoiseOption>span:nth-child(2){flex:1;min-width:0} #callVideoArea .callNoiseOption strong{display:block;font-weight:600;font-size:15px} #callVideoArea .callNoiseOption small{display:block;margin-top:5px;color:#afd2e2;font-size:11px;line-height:1.4} #callVideoArea .callSwitch{flex:none;position:relative;width:43px;height:26px;border-radius:16px;background:#40576a;transition:background .2s} #callVideoArea .callSwitch::after{content:'';position:absolute;top:4px;left:4px;width:18px;height:18px;border-radius:50%;background:#e6f8ff;transition:transform .2s} #callVideoArea [aria-checked=true] .callSwitch{background:#039ed1} #callVideoArea [aria-checked=true] .callSwitch::after{transform:translateX(17px)} #callVideoArea .callSecondaryOptions{display:grid;gap:2px} #callVideoArea .callFilterStrip{display:flex;gap:6px;overflow:auto;padding:6px 1px 12px;scroll-snap-type:x proximity} #callVideoArea .callFilterChoice{border:0;flex:0 0 66px;background:transparent;padding:3px 2px;color:#d6eaf5;font:500 11px system-ui;scroll-snap-align:center;line-height:1.3} #callVideoArea .callFilterSwatch{display:block;width:48px;height:48px;margin:3px auto 10px;border-radius:50%;border:3px solid transparent;box-shadow:0 0 0 1px #ffffff25} #callVideoArea .callFilterChoice[aria-pressed=true] .callFilterSwatch{box-shadow:0 0 0 3px #58daff;border-color:#0a293e} #callVideoArea .callFilterChoice[aria-pressed=true]{color:#8be8ff} #callVideoArea .callFilterHint{margin:4px 6px;font:400 12px/1.5 system-ui;color:#afd2e2} #callOptionsFeedback{position:absolute;z-index:80;left:20px;right:20px;bottom:calc(115px + var(--vobix-safe-bottom, env(safe-area-inset-bottom)));padding:14px;border-radius:16px;background:#102f45;color:#fff;font:500 13px/1.5 system-ui;box-shadow:0 4px 20px #0007} #callOptionsFeedback[hidden]{display:none} #callVideoArea:not(.localVideoPrimary) .localVideo,#callVideoArea.localVideoPrimary .remoteVideo{top:auto;bottom:calc(125px + var(--vobix-safe-bottom, env(safe-area-inset-bottom)));right:18px;width:min(28vw,160px);border:1px solid #bceaff5c;border-radius:20px} #callVideoArea.localVideoPrimary .localVideo{inset:0!important;width:100%!important;height:100%!important;border:0!important} #callVideoArea.callLocalPreview .localVideo{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-height:none!important;aspect-ratio:auto!important;z-index:1!important;border:0!important;border-radius:0!important;transform:none!important;box-shadow:none!important;object-fit:cover;cursor:default} #callVideoArea.callLocalPreview .remoteVideo{visibility:hidden!important} #callVideoArea.callLocalPreview .remoteVideoWaiting,#callVideoArea.callLocalPreview #expandLocalVideoButton{display:none!important} #callVideoArea .audioCallIdentity{background:radial-gradient(ellipse at 50% 38%,#123f61 0,#071e34 44%,#030e1d 85%)} #callVideoArea .audioCallAvatar{width:140px;height:140px;border:1px solid #74d6ff59;box-shadow:0 0 0 12px #33beff09,0 0 0 26px #33beff04,0 18px 70px #001325;background:linear-gradient(140deg,#249dc4,#124d85);color:#effbff} #callVideoArea .audioCallName{font-weight:650;font-size:30px} #callVideoArea .audioCallType{color:#a6cfe6;font-size:14px;font-weight:400} #callVideoArea .groupRemoteMediaGrid{bottom:calc(114px + var(--vobix-safe-bottom, env(safe-area-inset-bottom)))!important} #callVideoArea .callHeader,#callVideoArea .callControls,#callVideoArea .callStatus,#callVideoArea .callSideActions{transition:opacity .2s ease,visibility .2s} #rejoinGroupCallButton:not([hidden]){position:fixed;z-index:1450;top:calc(74px + var(--vobix-safe-top, env(safe-area-inset-top)));left:50%;transform:translateX(-50%);width:auto;max-width:92vw;padding:12px 22px;border:1px solid #63d8ff;border-radius:24px;background:#0877a8;color:white;box-shadow:0 6px 24px #001b4080} body:has(#callVideoArea.open)>#rejoinGroupCallButton{display:none!important} @media(max-width:360px){#callVideoArea .callControls{gap:7px!important;padding:10px!important}#callVideoArea .callControls>.callControl{width:48px!important;height:48px!important}#callVideoArea .callHeader{left:16px}#callVideoArea .callStatus{left:16px}} @media(max-height:480px) and (orientation:landscape){#callVideoArea .callSheet{max-height:calc(100% - 100px);bottom:90px}#callVideoArea .callHeader{top:12px}#callVideoArea .callPeerName{font-size:20px;margin-top:4px}#callVideoArea .callStatus{top:82px}#callVideoArea .callControls{bottom:calc(10px + var(--vobix-safe-bottom, env(safe-area-inset-bottom)))!important;padding:8px 12px!important}#callVideoArea .callControls>.callControl{height:46px!important}#callVideoArea .audioCallAvatar{width:80px;height:80px;font-size:32px}#callVideoArea .audioCallIdentity{padding:20px 100px 80px}} @media(prefers-reduced-motion:reduce){#callVideoArea *{transition:none!important}} /* VobixChat 1.3.17: composición central para voz y vídeo. */ #callVideoArea{ --vobix-call-blue:#087fbd; --vobix-call-cyan:#45d7ff; background:radial-gradient(circle at 50% 35%,#143f64 0,#082440 44%,#031321 100%); } #callVideoArea .callHeader{ top:calc(24px + var(--vobix-safe-top, env(safe-area-inset-top))); left:50%; right:auto; width:min(calc(100% - 120px),420px); transform:translateX(-50%); text-align:center; } #callVideoArea .callBrand{justify-content:center} #callVideoArea .callPeerName{text-align:center} #callVideoArea .callStatus{ top:calc(28px + var(--vobix-safe-top, env(safe-area-inset-top))); left:50%; right:auto; max-width:min(calc(100% - 116px),360px); transform:translateX(-50%); padding:8px 14px; border:1px solid #bcecff2e; border-radius:999px; background:#06243ac7; color:#f3fbff; text-align:center; text-shadow:none; box-shadow:0 7px 24px #00132247; backdrop-filter:blur(14px); } #callVideoArea .audioCallIdentity{ padding:max(82px,calc(64px + var(--vobix-safe-top, env(safe-area-inset-top)))) 24px max(126px,calc(108px + var(--vobix-safe-bottom, env(safe-area-inset-bottom)))); background: radial-gradient(circle at 50% 37%,#1b6898 0,#0a3659 34%,#051d35 64%,#020d19 100%); } #callVideoArea .audioCallIdentity>div{ display:grid; justify-items:center; width:min(100%,420px); transform:translateY(-12px); } #callVideoArea .audioCallAvatar{ width:clamp(138px,38vw,178px); height:clamp(138px,38vw,178px); margin:0 auto 24px; border:4px solid #f8fdff; box-shadow:0 0 0 7px #4cd9ff42,0 0 0 18px #4cd9ff12,0 24px 70px #00111d99; background:linear-gradient(145deg,#39c8f3,#0876ba 55%,#0a4c86); font-size:clamp(46px,13vw,68px); } #callVideoArea .audioCallName{ max-width:100%; margin:0; color:#fff; font-size:clamp(27px,7vw,36px); line-height:1.15; text-align:center; overflow-wrap:anywhere; } #callVideoArea .audioCallType{ margin-top:11px; color:#ccefff; font-size:14px; letter-spacing:.02em; text-align:center; } #callVideoArea .callControls{ justify-content:center!important; gap:clamp(7px,2.6vw,15px)!important; border-color:#9ae8ff33!important; background:#061f34eb!important; } #callVideoArea .callControls>.callControl{ flex:0 0 clamp(46px,13vw,56px)!important; } #callVideoArea .callControls>#endCallButton{ background:#3887ee!important; box-shadow:0 8px 24px #1964c54d!important; } #callVideoArea[data-call-type=audio] .callControls{ width:min(calc(100% - 34px),370px)!important; } @media(max-width:360px){ #callVideoArea .callStatus{max-width:calc(100% - 92px);font-size:12px} #callVideoArea .audioCallIdentity>div{transform:translateY(-4px)} } /* VobixChat: solo cronómetro arriba; videollamada despejada, sin nombre superpuesto. */ #callVideoArea .callHeader, #callVideoArea .callBrand, #callVideoArea .callPeerName{display:none!important} #callVideoArea .audioCallType{display:none!important} #callVideoArea .callStatus{ top:calc(24px + var(--vobix-safe-top, env(safe-area-inset-top))); left:50%; right:auto; transform:translateX(-50%); } /* The controls own their small backgrounds. A full-screen scrim washes out the camera image whenever controls are revealed, especially in light mode. */ #callVideoArea[data-call-type=video]::after { content: none; display: none; } /* Android WebView can enlarge its native play poster over an empty full-screen video. Keep the clean call background visible until a real frame is decoded. */ #callVideoArea[data-call-type=video] :is(.remoteVideo,.localVideo,video[data-call-peer]):not(.vobixCallFrameReady){ opacity:0!important; } #callVideoArea[data-call-type=video] :is(.remoteVideo,.localVideo,video[data-call-peer])::-webkit-media-controls, #callVideoArea[data-call-type=video] :is(.remoteVideo,.localVideo,video[data-call-peer])::-webkit-media-controls-start-playback-button, #callVideoArea[data-call-type=video] :is(.remoteVideo,.localVideo,video[data-call-peer])::-webkit-media-controls-overlay-play-button{ display:none!important; -webkit-appearance:none; } /* Match each decoded camera, including tall Android captures and landscape. Limit row height so all four additional participants fit above controls. */ #callVideoArea .groupRemoteMediaTile{position:relative;flex:0 0 min(29vw,180px,calc(28vh * var(--group-frame-ratio,.75)));aspect-ratio:var(--group-frame-ratio,.75);border:0;border-radius:14px;background:#082438;overflow:hidden;pointer-events:auto} #callVideoArea .groupRemoteMediaTile video{position:absolute;inset:0;display:block;width:100%;height:100%;aspect-ratio:auto;border:0;border-radius:0;object-fit:contain} #callVideoArea .groupRemoteMediaStatus{position:absolute;inset:0;width:100%;height:100%;padding:10px;border:0;border-radius:0;background:#082438;color:#edf8ff;font:500 12px/1.4 system-ui;text-align:center;white-space:normal} #callVideoArea .groupRemoteMediaStatus:disabled{opacity:1;cursor:default;pointer-events:none} #callVideoArea .groupRemoteMediaStatus[hidden]{display:none!important} /* Every group image can leave the initial rows and move inside the call. */ #callVideoArea .groupRemoteMediaGrid{inset:0!important;bottom:0!important;z-index:35;display:flex;flex-wrap:wrap;align-items:flex-end;align-content:flex-end;justify-content:flex-start;box-sizing:border-box;padding:12px 12px calc(114px + var(--vobix-safe-bottom, env(safe-area-inset-bottom)));overflow:visible;pointer-events:none} #callVideoArea .groupRemoteMediaTile{touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab} #callVideoArea.callGroupMovable .remoteVideo{touch-action:none} #callVideoArea .groupRemoteMediaTile.groupFloating{position:absolute;flex:none;margin:0;box-sizing:border-box} #callVideoArea .remoteVideo.groupFloating{position:absolute;inset:auto;z-index:36;border-radius:14px;object-fit:contain;transform:none!important;touch-action:none;cursor:grab} #callVideoArea .groupDragging{z-index:39;cursor:grabbing;box-shadow:0 0 0 2px #42d5ff} @layer vobixLight { :where(body:not(.seniorHighContrast):not(.contrast)) #callVideoArea[data-call-type=video] .callStatus { background: #06243ae8 !important; color: #ffffff !important; text-shadow: none; } } #callVideoArea[data-call-type=audio] :is(.localVideo,.remoteVideo,.remoteVideoWaiting){display:none!important;visibility:hidden!important;pointer-events:none!important} #callVideoArea[data-call-type=audio] .callSideActions>:not(#addCallParticipantButton){display:none!important} /* Stack the clock and protection notices in flow, including enlarged text. Both use the same safe area so Android's top inset cannot cause overlap. */ #callVideoArea .callReadouts{ position:absolute; z-index:52; top:calc(18px + var(--vobix-safe-top, env(safe-area-inset-top))); left:50%; transform:translateX(-50%); width:min(calc(100% - 144px),420px); display:flex; flex-direction:column; align-items:center; gap:10px; pointer-events:none; } #callVideoArea .callReadouts>.callStatus{ position:static; transform:none; flex:none; max-width:100%; box-sizing:border-box; margin:0; padding:9px 18px; font:700 20px/1.3 system-ui,-apple-system,sans-serif; font-variant-numeric:tabular-nums; letter-spacing:.04em; background:#06243a; color:#fff; backdrop-filter:none; } #callVideoArea .callReadouts>.callAiStatus{ position:static; transform:none; flex:none; max-width:100%; box-sizing:border-box; margin:0; font-size:12px; overflow-wrap:anywhere; } @layer vobixLight{ :where(body:not(.seniorHighContrast):not(.contrast)) #callVideoArea[data-call-type=audio] .callStatus{ background:#ffffff!important; color:#12354d!important; border-color:#bedcff!important; text-shadow:none; } } /* The confirmation uses the browser top layer, above video and native insets. */ .callEndDialog{box-sizing:border-box;width:min(92vw,400px);max-height:calc(100dvh - 64px);overflow:auto;padding:24px;border:1px solid #67c8ec;border-radius:24px;background:#092337;color:#effaff;box-shadow:0 18px 60px #0009;font:16px/1.5 system-ui} .callEndDialog::backdrop{background:#00111db3} .callEndDialog h2{font-size:20px;margin:0 0 8px}.callEndDialog p{margin:0 0 22px;color:#c9e8f5} .callEndActions{display:grid;gap:10px}.callEndActions button{min-height:52px;padding:12px;border:0;border-radius:14px;font:600 16px system-ui;touch-action:manipulation;background:#dcf4ff;color:#12354d} .callEndActions [data-end]{background:#2b75d6;color:#fff}.callEndActions button:focus-visible{outline:3px solid #42d5ff;outline-offset:3px} /* Set the confirmation background and text together, including standalone calls. */ @layer vobixLight{ :where(body:not(.seniorHighContrast):not(.contrast)) .callEndDialog{background:#fff!important;color:#12354d!important} :where(body:not(.seniorHighContrast):not(.contrast)) .callEndDialog :is(h2,p){color:#12354d!important} :where(body:not(.seniorHighContrast):not(.contrast)) .callEndDialog .callEndActions button{background:#dcf4ff!important;color:#12354d!important} :where(body:not(.seniorHighContrast):not(.contrast)) .callEndDialog .callEndActions [data-end]{background:#2566bc!important;color:#fff!important} } #callVideoArea .callControls button:active{filter:brightness(1.3)} /* Keep frames upright and thumbnails complete. The main camera fills the screen. */ #callVideoArea[data-call-type=video] :is(.remoteVideo,.localVideo,.groupRemoteMediaTile video){object-fit:contain!important;transform:none!important;background:#e8f5ff} #callVideoArea[data-call-type=video]:not(.localVideoPrimary)>.remoteVideo:not(.groupFloating), #callVideoArea[data-call-type=video].localVideoPrimary>.localVideo:not(.groupFloating), #callVideoArea[data-call-type=video].callLocalPreview>.localVideo:not(.groupFloating){object-fit:cover!important;object-position:center} #callVideoArea[data-call-type=video] #localVideo.vobixSelfPreviewMirrored{transform:scaleX(-1)!important} #callVideoArea.callGroupMovable :is(.localVideo,.remoteVideo){touch-action:none;cursor:grab} #callVideoArea :is(.remoteVideo,.localVideo).groupFloating{position:absolute!important;inset:auto;z-index:36;border-radius:14px;max-height:none!important;transform:none!important;touch-action:none;cursor:grab} /* Tiles and main images share stacking, while controls stay above all of them. */ #callVideoArea .groupRemoteMediaGrid{z-index:auto} #callVideoArea .groupRemoteMediaTile{z-index:35} #callVideoArea .groupDragging{z-index:39!important} /* A finger near the edge must not lose its button to a shrinking animation. */ #callVideoArea .callControls{z-index:60!important;pointer-events:auto;touch-action:manipulation;isolation:isolate} #callVideoArea .callControls>button{pointer-events:auto;scale:1!important} #callVideoArea.callControlsHidden :is(.callControls,.callSideActions,.callReadouts,.callHeader,.audioCallName){opacity:0!important;visibility:hidden!important;pointer-events:none!important} #callVideoArea.callControlsHidden :is(.callControls,.callSideActions)>button{pointer-events:none!important} @layer vobixLight{ :where(body:not(.seniorHighContrast):not(.contrast)) #callVideoArea[data-call-type=video], :where(body:not(.seniorHighContrast):not(.contrast)) #callVideoArea[data-call-type=video] .remoteVideoWaiting{background:radial-gradient(ellipse at 50% 32%,#fff 0,#e8f5ff 48%,#bfdefa 100%)!important;color:#12354d!important} :where(body:not(.seniorHighContrast):not(.contrast)) #callVideoArea[data-call-type=video] :is(.remoteVideo,.localVideo,.groupRemoteMediaTile video){background:#e8f5ff!important;color:#12354d!important} :where(body:not(.seniorHighContrast):not(.contrast)) #callVideoArea[data-call-type=video] .callControls{background:#061f34eb!important;border-color:#9ae8ff33!important} :where(body:not(.seniorHighContrast):not(.contrast)) #callVideoArea[data-call-type=video] :is(.callControls,.callSideActions)>.callControl{background:#173d57!important;color:#edf8ff!important;border-color:#92d8f533!important} :where(body:not(.seniorHighContrast):not(.contrast)) #callVideoArea[data-call-type=video] .callControls>[aria-pressed=true]{background:#dff6ff!important;color:#06334a!important} :where(body:not(.seniorHighContrast):not(.contrast)) #callVideoArea[data-call-type=video] .callControls>#endCallButton{background:#2b75d6!important;color:#fff!important;border-color:#2b75d6!important} } /* A quiet, recognizable waiting screen instead of an empty dark video canvas. Identity is shown only before either camera has a usable frame. */ #callVideoArea[data-call-type=video][data-call-visual=waiting] .audioCallIdentity{display:grid;pointer-events:none;z-index:0} #callVideoArea[data-call-visual=waiting] .callReadouts>.callStatus{font-size:14px;letter-spacing:0;white-space:normal;overflow-wrap:anywhere} #callVideoArea .audioCallAvatar img{width:100%;height:100%;object-fit:cover} @media(max-height:480px) and (orientation:landscape){ #callVideoArea .audioCallIdentity{padding:calc(70px + var(--vobix-safe-top, env(safe-area-inset-top))) 96px calc(90px + var(--vobix-safe-bottom, env(safe-area-inset-bottom)))} #callVideoArea .audioCallIdentity>div{transform:none} #callVideoArea .audioCallAvatar{width:72px;height:72px;margin:0 auto 12px;font-size:30px} #callVideoArea .audioCallName{font-size:24px} } @layer vobixLight{ :where(body:not(.seniorHighContrast):not(.contrast)) #callVideoArea .audioCallIdentity{background:radial-gradient(ellipse at 50% 32%,#fff 0,#e8f5ff 48%,#bfdefa 100%)!important} :where(body:not(.seniorHighContrast):not(.contrast)) #callVideoArea .audioCallAvatar{background:#d5eeff!important;color:#087fbd!important;border:4px solid #fff!important;box-shadow:0 0 0 10px #0095ff12,0 18px 48px #127bb225!important} :where(body:not(.seniorHighContrast):not(.contrast)) #callVideoArea .audioCallName{color:#12354d!important} :where(body:not(.seniorHighContrast):not(.contrast)) #callVideoArea[data-call-visual=waiting] .callControls{background:#fffffff2!important;border-color:#bedcff!important;box-shadow:0 10px 32px #127bb21c!important} :where(body:not(.seniorHighContrast):not(.contrast)) #callVideoArea[data-call-visual=waiting] :is(.callControls,.callSideActions)>.callControl{background:#e4f3ff!important;color:#12354d!important;border-color:#bedcff!important} :where(body:not(.seniorHighContrast):not(.contrast)) #callVideoArea[data-call-visual=waiting] .callControls>[aria-pressed=true]{background:#bfe7ff!important;color:#12354d!important} :where(body:not(.seniorHighContrast):not(.contrast)) #callVideoArea[data-call-visual=waiting] .callControls>#endCallButton{background:#2b75d6!important;color:#fff!important;border-color:#2b75d6!important} } /* Vobix call surface: a clear voice identity and separate, labelled actions. */ #callVideoArea .callControls{border-radius:28px!important;padding:14px!important;gap:clamp(6px,2vw,14px)!important} #callVideoArea .callControls>.callControl{border-radius:18px!important;grid-template-rows:26px 14px!important;align-content:center!important;justify-items:center!important;gap:4px!important} #callVideoArea .callControls>.callControl .callGlyph{width:24px!important;height:24px!important} #callVideoArea .callControls>.callControl .callControlCaption{display:block!important;font:600 11px/14px system-ui,-apple-system,sans-serif!important;letter-spacing:0!important;white-space:nowrap;pointer-events:none;color:inherit} #callVideoArea .callSideActions>#addCallParticipantButton{width:54px!important;height:54px!important;grid-template-rows:24px 12px!important;gap:3px;align-content:center!important;border-radius:18px!important} #callVideoArea .callSideActions>#addCallParticipantButton .callControlCaption{display:block;font:600 10px/12px system-ui;color:inherit} #callVideoArea .callSheetHeading button{min-width:44px!important;min-height:44px!important} #callVideoArea .callVobixSignature{position:absolute;top:calc(24px + var(--vobix-safe-top,env(safe-area-inset-top)));left:24px;display:flex;align-items:center;gap:9px;margin:0;font:750 24px/1.2 system-ui,-apple-system,sans-serif;letter-spacing:-.8px;color:#fff;text-shadow:none} #callVideoArea .callVobixSignature img{width:36px;height:36px;border-radius:11px}.callVobixSignature b{font-weight:500} #callVideoArea[data-call-type=audio]::after{display:none} #callVideoArea[data-call-type=audio] .audioCallIdentity{padding:calc(150px + var(--vobix-safe-top,env(safe-area-inset-top))) 24px calc(265px + var(--vobix-safe-bottom,env(safe-area-inset-bottom)))} #callVideoArea[data-call-type=audio] .audioCallIdentity>div{transform:none;width:min(100%,500px)} #callVideoArea[data-call-type=audio] .audioCallAvatar{width:clamp(120px,36vw,164px);height:clamp(120px,36vw,164px);border-radius:38%;font-size:58px;margin:0 auto 25px} #callVideoArea[data-call-type=audio] .audioCallName{font-size:clamp(25px,6.4vw,36px);letter-spacing:-.7px;line-height:1.2;max-width:100%} #callVideoArea[data-call-type=audio] .callReadouts{top:calc(95px + var(--vobix-safe-top,env(safe-area-inset-top)));width:min(calc(100% - 50px),420px)} #callVideoArea[data-call-type=audio] .callReadouts>.callStatus{font-size:17px;letter-spacing:.04em;padding:8px 18px;border-radius:50px} #callVideoArea[data-call-type=audio] .callControls{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 10px!important;width:min(calc(100% - 32px),460px)!important;max-width:460px!important;bottom:calc(24px + var(--vobix-safe-bottom,env(safe-area-inset-bottom)))!important;padding:22px!important;border-radius:32px!important} #callVideoArea[data-call-type=audio] .callControls>.callControl{width:100%!important;min-width:44px!important;height:68px!important;border-radius:20px!important;gap:6px!important} #callVideoArea[data-call-type=audio] .callControls>#endCallButton{grid-column:1/-1;height:56px!important;display:flex!important;justify-content:center!important;align-items:center!important;gap:11px!important;border-radius:18px!important} #callVideoArea[data-call-type=audio] .callControls>#endCallButton .callControlCaption{font-size:14px!important} #callVideoArea[data-call-type=audio] .callSheet{bottom:calc(242px + var(--vobix-safe-bottom,env(safe-area-inset-bottom)));max-height:calc(100% - 300px - var(--vobix-safe-top,env(safe-area-inset-top)) - var(--vobix-safe-bottom,env(safe-area-inset-bottom)))} #callVideoArea[data-call-type=audio] #callOptionsFeedback{bottom:calc(240px + var(--vobix-safe-bottom,env(safe-area-inset-bottom)))} @layer vobixLight{ :where(body:not(.seniorHighContrast):not(.contrast)) #callVideoArea[data-call-type=audio] .audioCallIdentity{background:radial-gradient(ellipse 110% 67% at 50% 0%,#007fff 0%,#0863dc 61%,#eaf4ff 62%,#f4f8fc 100%)!important} :where(body:not(.seniorHighContrast):not(.contrast)) #callVideoArea[data-call-type=audio] .audioCallAvatar{background:linear-gradient(145deg,#f3fbff,#d6eaff)!important;color:#0963d4!important;border:5px solid #fff!important;box-shadow:0 16px 45px #064b9a33,0 0 0 9px #ffffff24!important} :where(body:not(.seniorHighContrast):not(.contrast)) #callVideoArea .audioCallName{color:#111f32!important;font-weight:750!important} :where(body:not(.seniorHighContrast):not(.contrast)) #callVideoArea[data-call-type=audio] .callStatus{background:#004daa80!important;color:#fff!important;border:1px solid #ffffff36!important;box-shadow:none!important} :where(body:not(.seniorHighContrast):not(.contrast)) #callVideoArea[data-call-type=audio] .callControls{background:#ffffff!important;border:1px solid #dbe8f5!important;box-shadow:0 14px 45px #11497612!important} :where(body:not(.seniorHighContrast):not(.contrast)) #callVideoArea[data-call-type=audio] .callControls>.callControl:not(#endCallButton){background:#eef4fc!important;color:#14345d!important;border:1px solid #e0eafa!important} :where(body:not(.seniorHighContrast):not(.contrast)) #callVideoArea[data-call-type=audio] .callControls>[aria-pressed=true]:not(#endCallButton){background:#076dee!important;color:#fff!important;border-color:#076dee!important} :where(body:not(.seniorHighContrast):not(.contrast)) #callVideoArea[data-call-type=audio] .callControls>#endCallButton{background:#3281e8!important;color:#fff!important;border-color:#3281e8!important;box-shadow:0 7px 18px #3281e824!important} :where(body:not(.seniorHighContrast):not(.contrast)) #callVideoArea[data-call-type=audio] .callSideActions>#addCallParticipantButton{background:#fff!important;color:#0A5CFF!important;border:1px solid #0A5CFF!important} } @media(max-width:360px){#callVideoArea .callControls{padding:10px!important;gap:6px!important}#callVideoArea[data-call-type=audio] .callControls{padding:16px!important;gap:14px 6px!important}.callVobixSignature{font-size:21px!important}} @media(max-height:650px){#callVideoArea[data-call-type=audio] .audioCallIdentity{padding-top:135px;padding-bottom:240px}#callVideoArea[data-call-type=audio] .audioCallAvatar{width:94px;height:94px;font-size:38px;margin-bottom:14px}#callVideoArea[data-call-type=audio] .audioCallName{font-size:24px}} @media(max-height:480px) and (orientation:landscape){ #callVideoArea .callVobixSignature{top:calc(12px + var(--vobix-safe-top,env(safe-area-inset-top)));left:22px;font-size:20px}#callVideoArea .callVobixSignature img{width:28px;height:28px} #callVideoArea[data-call-type=audio] .audioCallIdentity{padding:calc(75px + var(--vobix-safe-top,env(safe-area-inset-top))) 100px calc(108px + var(--vobix-safe-bottom,env(safe-area-inset-bottom)))} #callVideoArea[data-call-type=audio] .audioCallIdentity>div{grid-template-columns:72px minmax(0,1fr);align-items:center;gap:22px;width:min(100%,430px)}#callVideoArea[data-call-type=audio] .audioCallAvatar{width:72px;height:72px;font-size:32px;margin:0}#callVideoArea[data-call-type=audio] .audioCallName{text-align:left} #callVideoArea[data-call-type=audio] .callReadouts{top:calc(12px + var(--vobix-safe-top,env(safe-area-inset-top)));width:min(calc(100% - 330px),350px)} #callVideoArea[data-call-type=audio] .callControls{display:flex!important;width:min(calc(100% - 36px),440px)!important;padding:10px 16px!important;gap:12px!important;bottom:calc(12px + var(--vobix-safe-bottom,env(safe-area-inset-bottom)))!important} #callVideoArea[data-call-type=audio] .callControls>.callControl{width:60px!important;height:54px!important;flex:0 0 60px!important;border-radius:16px!important}#callVideoArea[data-call-type=audio] .callControls>#endCallButton{display:grid!important;gap:4px!important;height:54px!important}#callVideoArea[data-call-type=audio] .callControls>#endCallButton .callControlCaption{font-size:11px!important} #callVideoArea[data-call-type=audio] .callSheet{bottom:calc(105px + var(--vobix-safe-bottom,env(safe-area-inset-bottom)));max-height:calc(100% - 135px - var(--vobix-safe-top,env(safe-area-inset-top)) - var(--vobix-safe-bottom,env(safe-area-inset-bottom)))} #callVideoArea[data-call-type=audio] #callOptionsFeedback{bottom:calc(107px + var(--vobix-safe-bottom,env(safe-area-inset-bottom)))} } @media(max-width:360px){#callVideoArea[data-call-type=video] .callControls>.callControl .callControlCaption{font-size:10px!important}} #callVideoArea[data-call-type=video] .audioCallIdentity>div{display:flex;flex-direction:column;align-items:center;gap:14px;max-width:100%;transform:none} #callVideoArea[data-call-type=video] .callVobixSignature{position:static;order:3;transform:none;justify-content:center;gap:6px;margin:2px 0 0;font-size:16px;letter-spacing:0;color:#0863dc;white-space:nowrap} #callVideoArea[data-call-type=video] .callVobixSignature img{width:24px;height:24px;border-radius:7px} #callVideoArea[data-call-type=video] .audioCallAvatar{margin:0} #callVideoArea[data-call-type=video] .audioCallName{margin:0;overflow-wrap:anywhere;max-width:100%;font-size:clamp(22px,6vw,30px);line-height:1.2} @media(max-height:480px) and (orientation:landscape){#callVideoArea[data-call-type=video] .audioCallIdentity>div{gap:6px}#callVideoArea[data-call-type=video] .audioCallAvatar{width:64px;height:64px}#callVideoArea[data-call-type=video] .callVobixSignature{font-size:13px}#callVideoArea[data-call-type=video] .callVobixSignature img{width:18px;height:18px}} /* Owner-approved exception: red for rejecting and ending calls only. */ #callVideoArea .callControls>#endCallButton{background:#EF4444!important;color:#fff!important;border-color:#EF4444!important;box-shadow:0 7px 18px #EF444424!important} .callEndDialog .callEndActions [data-end]{background:#b91c1c;color:#fff} @layer vobixLight{ :where(body:not(.seniorHighContrast):not(.contrast)) #callVideoArea[data-call-visual=waiting] .callControls>#endCallButton, :where(body:not(.seniorHighContrast):not(.contrast)) #callVideoArea .callControls>#endCallButton, :where(body:not(.seniorHighContrast):not(.contrast)) #callVideoArea[data-call-type=audio] .callControls>#endCallButton, :where(body:not(.seniorHighContrast):not(.contrast)) #callVideoArea[data-call-type=video] .callControls>#endCallButton, :where(body:not(.seniorHighContrast):not(.contrast)) .callEndDialog .callEndActions [data-end]{background:#EF4444!important;color:#fff!important;border-color:#EF4444!important;box-shadow:0 7px 18px #EF444424!important} } /* Accessible confirmation text; primary call controls retain the requested shade. */ @layer vobixLight { :where(body:not(.seniorHighContrast):not(.contrast)) .callEndDialog .callEndActions [data-end]{background:#b91c1c!important;color:#fff!important;border-color:#b91c1c!important;box-shadow:none!important} } /* Self-view sizes live in call-start-preview.css beside the connected layout, so the later, more specific thumbnail rules cannot override idle sizing. */ /* Group cameras share equal cells, including the local participant. */ #callVideoArea.callGroupMovable[data-call-type=video]:has(.groupRemoteMediaTile){ display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr)); gap:8px;padding:calc(64px + var(--vobix-safe-top,env(safe-area-inset-top))) 8px calc(114px + var(--vobix-safe-bottom,env(safe-area-inset-bottom))); } #callVideoArea.callGroupMovable[data-call-type=video]:has(.groupRemoteMediaTile:nth-child(3)){ grid-template-rows:repeat(3,minmax(0,1fr)); } #callVideoArea.callGroupMovable[data-call-type=video]:has(.groupRemoteMediaTile) .groupRemoteMediaGrid{ display:contents!important; } #callVideoArea.callGroupMovable[data-call-type=video]:has(.groupRemoteMediaTile) :is(.localVideo,.remoteVideo,.groupRemoteMediaTile):not(.groupFloating){ position:relative!important;inset:auto!important;width:100%!important;height:100%!important; min-width:0!important;min-height:0!important;max-width:none!important;max-height:none!important; aspect-ratio:auto!important;margin:0!important;border:0!important;border-radius:14px!important; object-fit:contain!important;transform:none!important;box-sizing:border-box;z-index:35; }