/* Keep caller identity readable independently of the selected chat theme. */
#incomingCallPanel {
  padding: max(20px, env(safe-area-inset-top)) 18px max(20px, env(safe-area-inset-bottom));
  background: radial-gradient(ellipse at 50% 12%, #ffffff 0, #edf7f3 48%, #d3e9df 100%) !important;
  overflow-y: auto;
  color-scheme: light;
}
#incomingCallPanel .incomingCallCard {
  box-sizing: border-box;
  width: min(100%, 420px);
  padding: 32px 22px 26px;
  margin: auto;
  border: 1px solid #bed8cd;
  border-radius: 32px;
  background: #ffffff !important;
  box-shadow: 0 18px 60px #244b3d1f;
  color: #13382c !important;
}
#incomingCallPanel .incomingCallBrand {
  margin-bottom: 24px;
  font: 800 15px/1.3 system-ui, sans-serif;
  letter-spacing: .1em;
  color: #176346 !important;
}
#incomingCallPanel .incomingCallAvatar {
  position: relative;
  display: grid;
  place-items: center;
  width: 136px;
  height: 136px;
  margin: 0 auto 22px;
  overflow: hidden;
  border-radius: 50%;
  border: 5px solid #ffffff;
  outline: 2px solid #89bda5;
  background: #e0f0e8 !important;
  color: #18573e !important;
  font: 750 46px/1 system-ui, sans-serif;
}
#incomingCallPanel .incomingCallAvatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#incomingCallPanel #incomingCallIcon { display: none; }
#incomingCallPanel #incomingCallTitle {
  margin: 0 0 12px;
  color: #426254 !important;
  font: 650 18px/1.4 system-ui, sans-serif;
}
#incomingCallPanel #incomingCallSubtitle {
  margin: 0;
  color: #123629 !important;
  font: 800 clamp(28px, 7vw, 36px)/1.2 system-ui, sans-serif;
  overflow-wrap: anywhere;
  text-shadow: none;
}
#incomingCallPanel .incomingCallActions { gap: 12px; margin-top: 32px; }
#incomingCallPanel .incomingCallAction {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  min-height: 88px;
  padding: 14px 8px;
  border: 0;
  border-radius: 22px;
  color: #ffffff !important;
  font: 750 17px/1.3 system-ui, sans-serif;
  text-shadow: none;
  box-shadow: none;
}
#incomingCallPanel .incomingCallAction svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; }
#incomingCallPanel .incomingCallAction.accept { background: #0095ff !important; }
#incomingCallPanel .incomingCallAction.reject { background: #356fbc !important; }
#incomingCallPanel .incomingCallAction:focus-visible { outline: 3px solid #123629; outline-offset: 4px; }
#incomingCallPanel #seniorCallerSafety { color: #385444 !important; background: #edf5ef !important; border-color: #b6d2bd; }
@media (max-height: 560px) {
  #incomingCallPanel .incomingCallCard { padding: 18px; }
  #incomingCallPanel .incomingCallBrand { margin-bottom: 14px; }
  #incomingCallPanel .incomingCallAvatar { width: 88px; height: 88px; margin-bottom: 14px; font-size: 32px; }
  #incomingCallPanel .incomingCallActions { margin-top: 20px; }
}


/* VobixChat 1.3.17: llamada entrante clara, centrada y con identidad azul. */
#incomingCallPanel{
  display:none;
  place-items:center;
  padding:max(22px,env(safe-area-inset-top)) 18px max(22px,env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 50% 18%,#ffffff 0,#eef9ff 42%,#d8f0fb 100%)!important;
  color-scheme:light;
}
#incomingCallPanel.open{display:grid!important}
#incomingCallPanel .incomingCallCard{
  display:grid;
  justify-items:center;
  width:min(100%,410px);
  margin:auto;
  padding:30px 22px 24px;
  border:1px solid #b9e5f8;
  border-radius:34px;
  background:#ffffffed!important;
  box-shadow:0 22px 72px #075d8826;
  color:#063f66!important;
  text-align:center;
  backdrop-filter:blur(18px);
}
#incomingCallPanel .incomingCallBrand{
  margin:0 0 23px;
  color:#087fbd!important;
  font:800 14px/1.3 system-ui,sans-serif;
  letter-spacing:.12em;
}
#incomingCallPanel .incomingCallAvatar{
  width:clamp(124px,36vw,154px);
  height:clamp(124px,36vw,154px);
  margin:0 auto 22px;
  border:5px solid #fff;
  outline:3px solid #47cffa;
  background:linear-gradient(145deg,#dff7ff,#b9eaff)!important;
  color:#075f95!important;
  box-shadow:0 0 0 10px #3bd2ff14,0 18px 48px #087ab52b;
}
#incomingCallPanel #incomingCallTitle{
  margin:0 0 8px;
  color:#43809f!important;
  font:650 16px/1.35 system-ui,sans-serif;
}
#incomingCallPanel #incomingCallSubtitle{
  width:100%;
  color:#073f66!important;
  font:800 clamp(27px,7vw,36px)/1.15 system-ui,sans-serif;
  text-align:center;
}
#incomingCallPanel .incomingCallActions{
  display:grid;
  grid-template-columns:1fr 1fr;
  width:100%;
  gap:14px;
  margin-top:30px;
}
#incomingCallPanel .incomingCallAction{
  min-height:82px;
  border-radius:24px;
  font-size:16px;
}
#incomingCallPanel .incomingCallAction.accept{
  background:#0095ff!important;
  box-shadow:0 10px 28px #0095ff30;
}
#incomingCallPanel .incomingCallAction.reject{
  background:linear-gradient(145deg,#5397f1,#2f79d9)!important;
  box-shadow:0 10px 28px #2f79d92b;
}
#incomingCallPanel #seniorCallerSafety{
  width:100%;
  box-sizing:border-box;
  color:#28576d!important;
  background:#edf9ff!important;
  border-color:#bce7f8!important;
  text-align:center;
}
@media(max-height:560px){
  #incomingCallPanel .incomingCallCard{padding:16px 18px}
  #incomingCallPanel .incomingCallBrand{margin-bottom:10px}
  #incomingCallPanel .incomingCallAvatar{width:82px;height:82px;margin-bottom:10px}
  #incomingCallPanel .incomingCallActions{margin-top:14px}
}

/* Video invitations show the receiver's own camera full screen. */
#incomingCallVideo,
#incomingCallPanel .incomingCameraHint,
#incomingCallPanel .incomingCameraRetry {display:none;}
#incomingCallPanel[data-call-type=video] {
 padding:0;overflow:hidden;background:#082c49!important;
}
#incomingCallPanel[data-call-type=video] #incomingCallVideo {
 display:block;position:absolute;inset:0;width:100%;height:100%;
 object-fit:cover;object-position:center;transform:scaleX(-1);visibility:visible;opacity:0;
}
#incomingCallPanel[data-call-type=video].incomingCameraReady #incomingCallVideo {visibility:visible;opacity:1;}
#incomingCallPanel[data-call-type=video] .incomingCallCard {
 position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;
 box-sizing:border-box;width:100%;height:100%;min-height:0;max-width:none;
 margin:0;padding:calc(32px + var(--vobix-safe-top,env(safe-area-inset-top,0px))) 24px calc(32px + var(--vobix-safe-bottom,env(safe-area-inset-bottom,0px)));
 border:0;border-radius:0;box-shadow:none;backdrop-filter:none;
 background:linear-gradient(#031b35b8,transparent 45%,#031b35c9)!important;color:#fff!important;
}
#incomingCallPanel[data-call-type=video] .incomingCallBrand {
 color:#e4f7ff!important;letter-spacing:.04em;margin:0 0 14px;
}
#incomingCallPanel[data-call-type=video] #incomingCallTitle {
 color:#e4f7ff!important;font-weight:500;font-size:16px;
}
#incomingCallPanel[data-call-type=video] #incomingCallSubtitle {
 color:#fff!important;text-shadow:0 2px 10px #001b35aa;
}
#incomingCallPanel[data-call-type=video] .incomingCallAvatar {
 width:80px;height:80px;font-size:30px;margin:0 0 16px;border-width:3px;
}
#incomingCallPanel[data-call-type=video] .incomingCallAvatar {display:none;}
#incomingCallPanel[data-call-type=video] #seniorCallerSafety {
 width:auto;max-width:360px;background:#072b49ba!important;color:#e5f7ff!important;
 border:0;margin-top:12px;font-size:13px;
}
#incomingCallPanel[data-call-type=video] .incomingCameraHint {
 display:block;margin:auto 0 12px;padding-top:20px;
 font:500 13px/1.4 system-ui,sans-serif;color:#fff!important;text-shadow:0 1px 5px #000;
}
#incomingCallPanel[data-call-type=video] .incomingCameraRetry:not([hidden]) {
 display:block;padding:10px 16px;margin-bottom:12px;min-height:44px;
 border:1px solid #b4e3ff80;border-radius:24px;background:#075e9bcc;color:#fff;
}
#incomingCallPanel[data-call-type=video] .incomingCallActions {
 display:flex;justify-content:space-between;gap:32px;max-width:320px;margin:0;
}
#incomingCallPanel[data-call-type=video] .incomingCallAction {
 width:88px;min-height:96px;gap:10px;padding:0;background:transparent!important;
 box-shadow:none!important;color:#fff!important;font-size:15px;
}
#incomingCallPanel[data-call-type=video] .incomingCallAction svg {
 box-sizing:border-box;width:68px;height:68px;padding:21px;border-radius:50%;
 box-shadow:0 8px 28px #0003;stroke-width:2.3;
}
#incomingCallPanel[data-call-type=video] .incomingCallAction.reject svg {background:#3183ef;}
#incomingCallPanel[data-call-type=video] .incomingCallAction.accept svg {background:#0095ff;}
#incomingCallPanel[data-call-type=video] .incomingCallAction:focus-visible {outline-color:#fff;}
@media(max-height:540px) and (orientation:landscape) {
 #incomingCallPanel[data-call-type=video] .incomingCallCard {padding:16px 32px;}
 #incomingCallPanel[data-call-type=video] .incomingCallBrand {margin-bottom:4px;}
 #incomingCallPanel[data-call-type=video] .incomingCallAvatar {display:none;}
 #incomingCallPanel[data-call-type=video] #incomingCallSubtitle {font-size:26px;}
 #incomingCallPanel[data-call-type=video] #seniorCallerSafety {margin:4px 0;}
 #incomingCallPanel[data-call-type=video] .incomingCameraHint {padding-top:8px;margin-bottom:4px;}
 #incomingCallPanel[data-call-type=video] .incomingCallAction {min-height:76px;gap:5px;}
 #incomingCallPanel[data-call-type=video] .incomingCallAction svg {width:52px;height:52px;padding:14px;}
}
/* Match the shared theme's cascade layer so it cannot cover the camera with
   an opaque white dialog or change the text to black over live video. */
@layer vobixLight {
 #incomingCallPanel[data-call-type=video] {background:#082c49!important;}
 #incomingCallPanel[data-call-type=video] .incomingCallCard {
  background:linear-gradient(#031b35b8,transparent 45%,#031b35c9)!important;
  color:#fff!important;border:0!important;box-shadow:none!important;
 }
 #incomingCallPanel[data-call-type=video] #incomingCallSubtitle {
  color:#fff!important;text-shadow:0 2px 10px #001b35aa!important;
 }
 #incomingCallPanel[data-call-type=video] .incomingCallAction {
  color:#fff!important;background:transparent!important;box-shadow:none!important;
 }
 #incomingCallPanel[data-call-type=video] #seniorCallerSafety {
  background:#072b49ba!important;color:#e5f7ff!important;
 }
}

/* Floating answer controls support an upward drag without moving the camera. */
#incomingCallPanel #incomingSwipeHint{
 margin:12px 0 0;font:500 13px/1.4 system-ui,sans-serif;text-align:center;color:#176188;
}
#incomingCallPanel #acceptCallButton{touch-action:none;user-select:none;-webkit-user-select:none;overflow:visible;cursor:grab}
#incomingCallPanel #acceptCallButton.incomingAnswerDragging{cursor:grabbing}
#incomingCallPanel #acceptCallButton svg{transition:transform .18s ease;will-change:transform}
#incomingCallPanel #acceptCallButton.incomingAnswerDragging svg{transition:none}
#incomingCallPanel #acceptCallButton svg{box-shadow:0 0 0 7px #0095ff1c,0 10px 30px #00294740}
#incomingCallPanel[data-call-type=video] #incomingSwipeHint{color:#fff;text-shadow:0 1px 5px #000}
#incomingCallPanel[data-call-type=audio] .incomingCallActions{display:flex;justify-content:space-between;max-width:300px;gap:32px}
#incomingCallPanel[data-call-type=audio] .incomingCallAction{width:88px;min-height:96px;padding:0;gap:10px;background:transparent!important;box-shadow:none!important;color:#123d57!important}
#incomingCallPanel[data-call-type=audio] .incomingCallAction svg{box-sizing:border-box;width:68px;height:68px;padding:21px;border-radius:50%;color:#fff;stroke-width:2.3}
#incomingCallPanel[data-call-type=audio] .incomingCallAction.accept svg{background:#0095ff}
#incomingCallPanel[data-call-type=audio] .incomingCallAction.reject svg{background:#3183ef}
@media(max-height:540px) and (orientation:landscape){#incomingCallPanel #incomingSwipeHint{margin-top:4px;font-size:12px}}
@media(prefers-reduced-motion:reduce){#incomingCallPanel #acceptCallButton svg{transition:none}}

/* Live camera surfaces do not use the browser's movie-player overlay.
   Opacity keeps the receiver preview decoding while hiding its empty poster. */
:is(#incomingCallVideo,#localVideo,#remoteVideo,#callVideoArea video[data-call-peer])::-webkit-media-controls,
:is(#incomingCallVideo,#localVideo,#remoteVideo,#callVideoArea video[data-call-peer])::-webkit-media-controls-panel,
:is(#incomingCallVideo,#localVideo,#remoteVideo,#callVideoArea video[data-call-peer])::-webkit-media-controls-play-button,
:is(#incomingCallVideo,#localVideo,#remoteVideo,#callVideoArea video[data-call-peer])::-webkit-media-controls-start-playback-button,
:is(#incomingCallVideo,#localVideo,#remoteVideo,#callVideoArea video[data-call-peer])::-webkit-media-controls-overlay-play-button,
:is(#incomingCallVideo,#localVideo,#remoteVideo,#callVideoArea video[data-call-peer])::-webkit-media-controls-overlay-enclosure{
 display:none!important;opacity:0!important;pointer-events:none!important;-webkit-appearance:none;
}


/* Required call actions: answer green; reject red, in voice and video. */
#incomingCallPanel .incomingCallAction.accept,#incomingCallPanel[data-call-type=audio] .incomingCallAction.accept svg,#incomingCallPanel[data-call-type=video] .incomingCallAction.accept svg{background:#22C55E!important;color:#fff!important}
#incomingCallPanel .incomingCallAction.reject,#incomingCallPanel[data-call-type=audio] .incomingCallAction.reject svg,#incomingCallPanel[data-call-type=video] .incomingCallAction.reject svg{background:#EF4444!important;color:#fff!important}
@layer vobixLight{
 #incomingCallPanel .incomingCallAction.accept{background:#22C55E!important;color:#fff!important}
 #incomingCallPanel .incomingCallAction.reject{background:#EF4444!important;color:#fff!important}
}

/* Compact phone actions: only the circular handset carries the action color. */
#incomingCallPanel[data-call-type] .incomingCallActions{width:100%;max-width:280px;justify-content:space-between;gap:24px}
#incomingCallPanel[data-call-type] .incomingCallAction{width:88px;min-height:88px;gap:7px;padding:0;border-radius:0;background:transparent!important;box-shadow:none!important;font:500 13px/1.3 system-ui,sans-serif}
#incomingCallPanel[data-call-type] .incomingCallAction svg{box-sizing:border-box;width:64px;height:64px;padding:19px;border-radius:50%;box-shadow:none!important}
#incomingCallPanel #incomingSwipeHint{font-size:12px;margin-top:10px}
@layer vobixLight{
 #incomingCallPanel[data-call-type] .incomingCallAction{background:transparent!important;box-shadow:none!important;border:0!important;font-size:13px!important}
}


/* The locked Android surface keeps its original native buttons over this one
   live preview. Keep permission/retry feedback reachable in the clear center. */
html.vobix-native-video-controls #incomingCallPanel[data-call-type=video] .incomingCallCard {
 justify-content:center;padding:120px 24px 150px;background:transparent!important;
 pointer-events:none;
}
html.vobix-native-video-controls #incomingCallPanel[data-call-type=video] .incomingCallCard > :not(.incomingCameraHint):not(.incomingCameraRetry) {display:none!important;}
html.vobix-native-video-controls #incomingCallPanel[data-call-type=video] .incomingCameraHint {margin:0 0 12px;padding:0;}
html.vobix-native-video-controls #incomingCallPanel[data-call-type=video].incomingCameraReady .incomingCameraHint {visibility:hidden;}
html.vobix-native-video-controls #incomingCallPanel[data-call-type=video] .incomingCameraRetry {pointer-events:auto;}
@layer vobixLight {
 html.vobix-native-video-controls #incomingCallPanel[data-call-type=video] .incomingCallCard {background:transparent!important;}
 html.vobix-native-video-controls #incomingCallPanel[data-call-type=video] .incomingCallCard > :not(.incomingCameraHint):not(.incomingCameraRetry) {display:none!important;}
}