/* XO Radar waiting screen - compact mobile-first connection state. */
:root{
  --xo-wait-accent:#28d7eb;
  --xo-wait-success:#41dda0;
  --xo-wait-text:#f3fbff;
  --xo-wait-muted:#9eb2bf;
  --xo-wait-line:rgba(131,205,221,.2);
  --xo-wait-panel:#0b141b;
}

body.xo-waiting-active .ui-screen-content{
  min-height:100vh;
  min-height:100dvh;
  box-sizing:border-box;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 50% 28%,rgba(40,215,235,.1),transparent 38%),
    linear-gradient(180deg,#071017 0%,#05090d 100%)!important;
}

body.xo-waiting-active .ui-screen-content::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.28;
  background-image:
    linear-gradient(rgba(92,165,180,.12) 1px,transparent 1px),
    linear-gradient(90deg,rgba(92,165,180,.12) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.75),transparent 78%);
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.75),transparent 78%);
}

body.xo-waiting-active .ui-screen-content::after{
  display:none!important;
}

body.xo-waiting-active .ui-screen-content-box{
  position:relative;
  z-index:1;
  width:min(420px,calc(100vw - 24px));
  min-height:0;
  margin:auto!important;
  padding:26px 22px 22px;
  box-sizing:border-box;
  text-align:center;
  border:1px solid var(--xo-wait-line);
  border-radius:22px;
  background:rgba(11,20,27,.94);
  box-shadow:0 16px 50px rgba(0,0,0,.32);
}

body.xo-waiting-active .ui-screen-content-box::before{
  content:"等待连接";
  display:block;
  margin-bottom:18px;
  color:var(--xo-wait-muted);
  font:700 12px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",sans-serif;
  letter-spacing:2px;
}

body.xo-waiting-active .ui-screen-content-box::after{
  display:none!important;
}

body.xo-waiting-active .ui-screen-content-box[data-xo-waiting="1"] .ui-loader{
  display:none!important;
}

.xo-wait-radar{
  position:relative;
  width:156px;
  height:156px;
  margin:0 auto 22px;
  overflow:hidden;
  border:1px solid rgba(40,215,235,.44);
  border-radius:50%;
  background:
    linear-gradient(transparent calc(50% - .5px),rgba(40,215,235,.22) 50%,transparent calc(50% + .5px)),
    linear-gradient(90deg,transparent calc(50% - .5px),rgba(40,215,235,.22) 50%,transparent calc(50% + .5px)),
    repeating-radial-gradient(circle at center,transparent 0 25px,rgba(40,215,235,.16) 26px,transparent 27px);
  box-shadow:inset 0 0 28px rgba(40,215,235,.08),0 0 30px rgba(40,215,235,.08);
}

.xo-wait-ring{
  position:absolute;
  inset:13px;
  border:1px dashed rgba(40,215,235,.24);
  border-radius:50%;
}

.xo-wait-sweep{
  position:absolute;
  left:50%;
  top:50%;
  width:50%;
  height:50%;
  transform-origin:0 0;
  background:conic-gradient(from -14deg,rgba(65,221,160,.6),rgba(40,215,235,.14) 28deg,transparent 68deg);
  clip-path:polygon(0 0,100% 0,100% 14%,0 100%);
  animation:xoWaitSweep 2.4s linear infinite;
}

.xo-wait-core{
  position:absolute;
  left:50%;
  top:50%;
  width:34px;
  height:34px;
  transform:translate(-50%,-50%);
  border:1px solid rgba(40,215,235,.64);
  border-radius:50%;
  background:#0b171e;
  box-shadow:0 0 0 6px rgba(40,215,235,.04),0 0 18px rgba(40,215,235,.2);
}

.xo-wait-core::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:7px;
  height:7px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:var(--xo-wait-success);
  box-shadow:0 0 10px rgba(65,221,160,.72);
}

.xo-wait-blip{
  position:absolute;
  z-index:2;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--xo-wait-success);
  box-shadow:0 0 9px rgba(65,221,160,.78);
}

.xo-wait-blip.b1{left:67%;top:31%}
.xo-wait-blip.b2{left:30%;top:63%;background:var(--xo-wait-accent);box-shadow:0 0 9px rgba(40,215,235,.72)}

body.xo-waiting-active .ui-desc{
  margin:0!important;
  color:var(--xo-wait-text)!important;
  font:800 clamp(24px,7vw,30px)/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",sans-serif!important;
  letter-spacing:.5px;
  text-shadow:none!important;
}

body.xo-waiting-active .ui-desc::before,
body.xo-waiting-active .ui-desc::after{
  display:none!important;
}

body.xo-waiting-active .ui-sm{
  margin:8px 0 0!important;
  color:var(--xo-wait-muted)!important;
  font:500 14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",sans-serif!important;
  letter-spacing:0;
  opacity:1!important;
  text-shadow:none!important;
}

.xo-wait-summary{
  display:grid;
  gap:10px;
  margin-top:22px;
}

.xo-wait-state{
  min-height:48px;
  box-sizing:border-box;
  border:1px solid var(--xo-wait-line);
  border-radius:14px;
  background:rgba(255,255,255,.025);
}

.xo-wait-state{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:11px 14px;
  color:#d8e6ec;
  font:600 13px/1.35 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",sans-serif;
}

.xo-wait-state i{
  flex:0 0 auto;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--xo-wait-success);
  box-shadow:0 0 10px rgba(65,221,160,.55);
}

.xo-wait-notice{
  margin-top:14px;
  padding:15px 16px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:14px;
  background:rgba(255,255,255,.02);
  text-align:left;
}

.xo-wait-notice strong{
  display:block;
  margin-bottom:9px;
  color:#dce9ee;
  font:700 13px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",sans-serif;
}

.xo-wait-notice ul{
  margin:0;
  padding:0;
  list-style:none;
}

.xo-wait-notice li{
  position:relative;
  margin-top:6px;
  padding-left:14px;
  color:var(--xo-wait-muted);
  font:500 12px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",sans-serif;
}

.xo-wait-notice li::before{
  content:"";
  position:absolute;
  left:1px;
  top:.62em;
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--xo-wait-accent);
}

@keyframes xoWaitSweep{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}

@media screen and (max-width:374px){
  body.xo-waiting-active .ui-screen-content{padding-left:8px;padding-right:8px}
  body.xo-waiting-active .ui-screen-content-box{
    width:calc(100vw - 16px);
    padding:22px 16px 18px;
    border-radius:18px;
  }
  .xo-wait-radar{width:140px;height:140px;margin-bottom:18px}
  .xo-wait-summary{margin-top:18px}
  .xo-wait-notice{padding:13px 14px}
}

@media screen and (orientation:landscape) and (max-height:500px){
  body.xo-waiting-active .ui-screen-content{
    padding:6px max(8px,env(safe-area-inset-right)) 6px max(8px,env(safe-area-inset-left));
  }
  body.xo-waiting-active .ui-screen-content-box{
    display:grid;
    grid-template-columns:170px minmax(0,1fr);
    grid-template-areas:
      "radar label"
      "radar title"
      "radar subtitle"
      "radar summary"
      "notice notice";
    align-content:center;
    column-gap:22px;
    width:min(720px,calc(100vw - 16px));
    height:auto;
    max-height:calc(100vh - 12px);
    max-height:calc(100dvh - 12px);
    padding:18px 20px;
    overflow:auto;
    border-radius:18px;
  }
  body.xo-waiting-active .ui-screen-content-box::before{
    grid-area:label;
    margin:0 0 7px;
    text-align:left;
  }
  .xo-wait-radar{
    grid-area:radar;
    width:150px;
    height:150px;
    margin:0 auto;
  }
  body.xo-waiting-active .ui-desc{
    grid-area:title;
    text-align:left;
    font-size:25px!important;
  }
  body.xo-waiting-active .ui-sm{
    grid-area:subtitle;
    margin-top:4px!important;
    text-align:left;
    font-size:13px!important;
  }
  .xo-wait-summary{
    grid-area:summary;
    grid-template-columns:minmax(0,1fr) minmax(132px,.65fr);
    gap:8px;
    margin-top:12px;
  }
  .xo-wait-state,.xo-wait-room{min-height:44px}
  .xo-wait-state{padding:8px 10px;font-size:12px}
  .xo-wait-room{padding:8px 10px}
  .xo-wait-room strong{font-size:14px}
  .xo-wait-notice{
    grid-area:notice;
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    align-items:start;
    gap:14px;
    margin-top:12px;
    padding:11px 13px;
  }
  .xo-wait-notice strong{margin:2px 0 0;white-space:nowrap}
  .xo-wait-notice ul{display:flex;flex-wrap:wrap;column-gap:16px}
  .xo-wait-notice li{flex:1 1 190px;margin-top:0;font-size:11px}
}

@media (prefers-reduced-motion:reduce){
  .xo-wait-sweep{animation:none;transform:rotate(36deg)}
}