/* 1v1 视频通话 — 样式（PC + H5 响应式） */
:root{
  --call-bg:#12131a;
  --call-card:#1c1e27;
  --call-line:#2b2e3b;
  --call-text:#eef0f6;
  --call-sub:#9aa1b4;
  --call-main:#ff4d7d;
  --call-main2:#ff7aa2;
  --call-gold:#ffc247;
}
*{box-sizing:border-box;}
body.call-page{margin:0;background:#f3f3f3;color:#222;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;}

/* ============ 板块页 ============ */
.call-wrap{max-width:1080px;margin:0 auto;padding:16px;}
.call-banner{background:linear-gradient(135deg,#ff4d7d,#ff8f5a);border-radius:14px;padding:18px 20px;color:#fff;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:16px;}
.call-banner h1{margin:0;font-size:20px;font-weight:600;}
.call-banner p{margin:6px 0 0;font-size:13px;opacity:.92;}
.call-wallet{background:rgba(0,0,0,.18);border-radius:20px;padding:8px 16px;font-size:13px;}
.call-wallet b{color:var(--call-gold);font-size:16px;}

.call-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:10px;flex-wrap:wrap;}
.call-toolbar .ttl{font-size:16px;font-weight:600;color:#333;}
.call-switch-box{display:flex;align-items:center;gap:8px;font-size:13px;color:#666;}
.call-switch{position:relative;width:46px;height:24px;border-radius:12px;background:#ccc;cursor:pointer;transition:.2s;}
.call-switch.on{background:#2ecc71;}
.call-switch i{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;transition:.2s;}
.call-switch.on i{left:24px;}

.call-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;}
.call-card{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.06);transition:.2s;}
.call-card:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.12);}
.call-card .cover{position:relative;width:100%;height:130px;background:#222 center/cover no-repeat;display:flex;align-items:center;justify-content:center;}
.call-card .cover img.av{width:64px;height:64px;border-radius:50%;border:2px solid rgba(255,255,255,.8);object-fit:cover;}
.call-card .live-tag{position:absolute;left:8px;top:8px;background:var(--call-main);color:#fff;font-size:11px;padding:2px 7px;border-radius:9px;display:flex;align-items:center;gap:4px;}
.call-card .live-tag i{width:6px;height:6px;border-radius:50%;background:#fff;display:inline-block;animation:callblink 1.2s infinite;}
@keyframes callblink{50%{opacity:.25}}
.call-card .busy-tag{position:absolute;right:8px;top:8px;background:rgba(0,0,0,.55);color:#ffd7a1;font-size:11px;padding:2px 7px;border-radius:9px;}
.call-card .info{padding:10px 12px;}
.call-card .nm{font-size:14px;font-weight:600;color:#222;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.call-card .lb{font-size:12px;color:#999;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.call-card .row{display:flex;align-items:center;justify-content:space-between;margin-top:9px;}
.call-card .pr{color:var(--call-main);font-size:12px;}
.call-card .pr b{font-size:15px;}
.call-btn{border:0;background:linear-gradient(135deg,#ff4d7d,#ff7a5a);color:#fff;border-radius:16px;padding:6px 14px;font-size:13px;cursor:pointer;}
.call-btn[disabled]{background:#ddd;color:#999;cursor:not-allowed;}
.call-empty{background:#fff;border-radius:12px;padding:48px 20px;text-align:center;color:#999;font-size:14px;}

/* ============ 通话页 ============ */
.call-room{position:fixed;inset:0;background:var(--call-bg);display:flex;flex-direction:column;color:var(--call-text);}
.cr-stage{flex:1;position:relative;overflow:hidden;background:#000;}
.cr-remote{position:absolute;inset:0;}
.cr-remote video{width:100%!important;height:100%!important;object-fit:cover;}
.cr-local{position:absolute;right:14px;bottom:14px;width:110px;height:150px;border-radius:10px;overflow:hidden;border:2px solid rgba(255,255,255,.35);background:#111;z-index:5;}
.cr-local video{width:100%!important;height:100%!important;object-fit:cover;}
.cr-wait{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:radial-gradient(circle at 50% 35%,#262a38,#12131a);}
.cr-wait .ava{width:96px;height:96px;border-radius:50%;object-fit:cover;border:3px solid rgba(255,255,255,.25);animation:callpulse 1.8s infinite;}
@keyframes callpulse{0%{box-shadow:0 0 0 0 rgba(255,77,125,.5)}70%{box-shadow:0 0 0 22px rgba(255,77,125,0)}100%{box-shadow:0 0 0 0 rgba(255,77,125,0)}}
.cr-wait .nm{font-size:17px;font-weight:600;}
.cr-wait .st{font-size:13px;color:var(--call-sub);}
.cr-wait .cd{font-size:13px;color:var(--call-gold);}

.cr-top{position:absolute;left:0;right:0;top:0;padding:12px 14px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(180deg,rgba(0,0,0,.55),transparent);z-index:6;}
.cr-peer{display:flex;align-items:center;gap:8px;font-size:14px;}
.cr-peer img{width:30px;height:30px;border-radius:50%;object-fit:cover;}
.cr-stat{font-size:12px;color:var(--call-sub);}
.cr-stat b{color:var(--call-gold);}

.cr-bar{padding:14px 16px 22px;display:flex;align-items:center;justify-content:center;gap:26px;background:#171923;}
.cr-act{width:58px;height:58px;border-radius:50%;border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:22px;color:#fff;background:#2a2e3c;position:relative;}
.cr-act.hang{background:#ff3b52;}
.cr-act.on{background:var(--call-main);}
.cr-act.off{background:#3a3f52;color:#8d94a8;}
.cr-act .tip{position:absolute;bottom:-18px;left:50%;transform:translateX(-50%);font-size:11px;color:var(--call-sub);white-space:nowrap;}
.cr-meta{position:absolute;left:0;right:0;bottom:96px;text-align:center;font-size:12px;color:var(--call-sub);z-index:6;}

.cr-over{position:absolute;inset:0;background:rgba(8,9,13,.9);display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px;z-index:20;padding:24px;text-align:center;}
.cr-over.show{display:flex;}
.cr-over h3{margin:0;font-size:18px;}
.cr-over .big{font-size:26px;color:var(--call-gold);font-weight:700;}
.cr-over .sub{font-size:13px;color:var(--call-sub);}
.cr-over button{border:0;border-radius:20px;padding:9px 26px;font-size:14px;background:linear-gradient(135deg,#ff4d7d,#ff7a5a);color:#fff;cursor:pointer;}

/* 主播来电弹窗 */
.call-ring{position:fixed;inset:0;background:rgba(6,7,11,.72);display:flex;align-items:center;justify-content:center;z-index:99999;}
.call-ring .box{width:300px;background:var(--call-card);border-radius:16px;padding:22px 18px;text-align:center;color:var(--call-text);box-shadow:0 18px 50px rgba(0,0,0,.5);}
.call-ring .box img{width:72px;height:72px;border-radius:50%;object-fit:cover;border:3px solid rgba(255,255,255,.2);}
.call-ring .box .nm{margin-top:10px;font-size:16px;font-weight:600;}
.call-ring .box .tx{font-size:12px;color:var(--call-sub);margin-top:4px;}
.call-ring .box .cd{font-size:12px;color:var(--call-gold);margin-top:6px;}
.call-ring .acts{display:flex;gap:14px;margin-top:18px;}
.call-ring .acts button{flex:1;border:0;border-radius:22px;padding:10px 0;font-size:14px;cursor:pointer;color:#fff;}
.call-ring .acts .no{background:#3a3f52;}
.call-ring .acts .yes{background:linear-gradient(135deg,#28c76f,#1fa85c);}

/* 直播间悬浮入口 */
.call-float{position:fixed;right:16px;bottom:120px;z-index:9000;display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;user-select:none;}
.call-float .ic{width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,#ff4d7d,#ff8f5a);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(255,77,125,.45);animation:callfloat 2.4s ease-in-out infinite;}
.call-float .ic svg{width:26px;height:26px;fill:#fff;}
.call-float .tt{font-size:11px;color:#fff;background:rgba(0,0,0,.5);padding:1px 7px;border-radius:8px;white-space:nowrap;}
@keyframes callfloat{50%{transform:translateY(-4px)}}

@media (max-width:768px){
  .call-wrap{padding:10px;}
  .call-banner{padding:14px;}
  .call-banner h1{font-size:17px;}
  .call-grid{grid-template-columns:repeat(2,1fr);gap:10px;}
  .call-card .cover{height:104px;}
  .cr-local{width:86px;height:120px;right:10px;bottom:10px;}
  .cr-bar{gap:20px;padding:12px 12px 18px;}
  .cr-act{width:54px;height:54px;}
  .call-float{bottom:100px;right:12px;}
}