/* 星空通话 UI — 仿微信（图三语音 / 图四视频） */

.fl-call {
  /* 高于应用锁 (.app-lock-mask:200)，来电时即使上锁也要能接听 */
  position: fixed; inset: 0; z-index: 520;
  display: flex; flex-direction: column;
  color: #fff;
  background: #0b0b0b;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", sans-serif;
}
.fl-call.voice {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(40,55,75,.55), transparent 55%),
    linear-gradient(180deg, #1a222c 0%, #0a0c10 55%, #050607 100%);
}
.fl-call.video {
  background: #000;
}
/* 对方头像虚化背景（等待接通时更华丽，避免空白） */
.fl-call-portrait {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden; pointer-events: none;
}
.fl-call-portrait-bg {
  position: absolute; inset: -40px;
  background-size: cover;
  background-position: center;
  filter: blur(36px) saturate(1.25) brightness(.55);
  transform: scale(1.2);
}
.fl-call-portrait-bg.fl-call-portrait-plain {
  background:
    radial-gradient(80% 60% at 50% 20%, rgba(70,100,140,.55), transparent 60%),
    linear-gradient(180deg, #1a2430 0%, #0a0c10 70%);
  filter: none;
  inset: 0;
  transform: none;
}
.fl-call-portrait-shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.55) 100%);
}
.fl-call.video.is-connected .fl-call-portrait { opacity: 0; transition: opacity .25s; }

/* 远端全屏 + 本地小窗（仿微信）；用 div 容器给 TRTC 挂载 video */
.fl-call-stage {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden; background: transparent;
}
.fl-call-stage.is-on { background: #111; }
.fl-call-stage video,
.fl-call-local-pip video,
.fl-call-remote-tile video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  background: #111;
  image-rendering: auto;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  pointer-events: none;
}
/* 仅本地「前置」预览镜像；后置不镜像（否则左右颠倒，像 ON 看成 NO） */
.fl-call-stage.is-local-preview.is-front-cam video,
.fl-call-local-pip.is-local-preview.is-front-cam video {
  transform: scaleX(-1) translateZ(0);
}
.fl-call-stage.is-local-preview:not(.is-front-cam) video,
.fl-call-local-pip.is-local-preview:not(.is-front-cam) video {
  transform: none;
}
.fl-call-pip-wrap {
  position: absolute;
  right: 14px;
  top: calc(52px + var(--sat, 0px));
  width: 96px;
  height: 128px;
  border-radius: 10px;
  overflow: hidden;
  z-index: 12;
  box-shadow: 0 4px 16px rgba(0,0,0,.45);
  display: none;
  touch-action: none;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
  background: #222;
}
.fl-call-pip-wrap.is-on { display: block; }
.fl-call-local-pip {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  overflow: hidden;
  background: #222;
  display: block;
  box-shadow: none;
  z-index: 1;
}
.fl-call-pip-hit {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: transparent;
  touch-action: none;
}
.fl-call.video:not(.is-connected) .fl-call-pip-wrap.is-on {
  right: 14px; top: calc(52px + var(--sat, 0px));
  width: 96px; height: 128px;
}
.fl-call.video.is-connected .fl-call-main .fl-call-avatar,
.fl-call.video.is-connected .fl-call-main .fl-call-name {
  opacity: 0;
  pointer-events: none;
}
.fl-call.video:not(.is-connected) .fl-call-main .fl-call-avatar,
.fl-call.video:not(.is-connected) .fl-call-main .fl-call-name {
  opacity: 1;
}
.fl-call.video.is-connected .fl-call-main {
  justify-content: flex-start;
  padding-top: calc(14px + var(--sat, 0px));
}
.fl-call.video.is-connected #fl-call-status {
  margin-top: 0;
  font-size: 15px;
  color: rgba(255,255,255,.92);
}

/* 缩小为悬浮小窗（可拖动）——勿用 inset:!important，否则拖动 left/top 无效 */
.fl-call.is-mini {
  top: calc(88px + var(--sat, 0px));
  right: 12px;
  bottom: auto;
  left: auto;
  width: 108px;
  height: 152px;
  border-radius: 14px;
  overflow: hidden;
  z-index: 9999;
  box-shadow: 0 10px 32px rgba(0,0,0,.45);
  touch-action: none !important;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: auto !important;
}
.fl-call.is-mini:active { cursor: grabbing; }
.fl-call-mini-hit {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 100;
  background: transparent;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.fl-call.is-mini .fl-call-mini-hit {
  display: block;
}
.fl-call.is-mini .fl-call-stage,
.fl-call.is-mini .fl-call-stage *,
.fl-call.is-mini .fl-call-main,
.fl-call.is-mini .fl-call-main * {
  pointer-events: none !important;
}
.fl-call.is-mini .fl-call-top,
.fl-call.is-mini .fl-call-bottom { display: none !important; }
.fl-call.is-mini.video .fl-call-main { display: none !important; }
.fl-call.is-mini.video .fl-call-local-pip,
.fl-call.is-mini.video .fl-call-pip-wrap { display: none !important; }
.fl-call.is-mini.video .fl-call-stage {
  position: absolute; inset: 0; z-index: 1;
}
.fl-call.is-mini.voice {
  width: 152px;
  height: 58px;
  border-radius: 29px;
  flex-direction: row;
  align-items: center;
}
.fl-call.is-mini.voice .fl-call-main {
  display: flex !important;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: 0 12px;
  flex: 1;
  text-align: left;
}
.fl-call.is-mini.voice .fl-call-avatar {
  width: 36px; height: 36px; margin: 0 8px 0 0; font-size: 14px;
  border-radius: 8px; box-shadow: none;
}
.fl-call.is-mini.voice .fl-call-name { font-size: 13px; }
.fl-call.is-mini.voice .fl-call-status { font-size: 11px; margin-top: 2px; }

.fl-call-stage.is-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}
.fl-call-remote-tile {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 120px;
  overflow: hidden;
  background: #111;
}
.fl-call-remote-tile video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* ========== 多人群通话网格（仿微信） ========== */
.fl-call.group {
  background: #0a0a0a;
}
.fl-call.group .fl-call-top {
  position: absolute; left: 0; right: 0; top: 0; z-index: 6;
  padding: calc(10px + var(--sat, 0px)) 12px 8px;
}
.fl-call.group .fl-call-top-center {
  flex: 1; text-align: center; padding: 0 8px; min-width: 0;
}
.fl-call.group .fl-call-top-center .fl-call-status {
  margin: 0; font-size: 15px; color: rgba(255,255,255,.92);
  min-height: 22px;
}
.fl-call.group .fl-call-stage.is-grid {
  position: absolute;
  left: 0; right: 0;
  top: calc(48px + var(--sat, 0px));
  bottom: calc(200px + var(--sab, 0px));
  display: grid;
  gap: 3px;
  padding: 2px 3px 0;
  align-content: start;
  background: #0a0a0a;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.fl-call.group .fl-call-stage.is-grid[data-count="1"] {
  grid-template-columns: 1fr;
  justify-items: center;
}
.fl-call.group .fl-call-stage.is-grid[data-count="1"] .fl-call-remote-tile {
  width: min(72vw, 280px);
}
.fl-call.group .fl-call-stage.is-grid[data-count="2"] {
  grid-template-columns: 1fr 1fr;
}
.fl-call.group .fl-call-stage.is-grid[data-count="3"] {
  grid-template-columns: 1fr 1fr;
}
.fl-call.group .fl-call-stage.is-grid[data-count="3"] .fl-call-remote-tile:last-child {
  grid-column: 1 / -1;
  justify-self: center;
  width: 50%;
}
.fl-call.group .fl-call-stage.is-grid[data-count="4"],
.fl-call.group .fl-call-stage.is-grid[data-count="5"],
.fl-call.group .fl-call-stage.is-grid[data-count="6"],
.fl-call.group .fl-call-stage.is-grid[data-count="7"],
.fl-call.group .fl-call-stage.is-grid[data-count="8"],
.fl-call.group .fl-call-stage.is-grid[data-count="9"] {
  grid-template-columns: 1fr 1fr;
}
.fl-call.group .fl-call-remote-tile {
  aspect-ratio: 1 / 1;
  min-height: 0;
  background: #1c1c1c;
  border-radius: 2px;
}
.fl-call.group .fl-tile-face {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: #222;
  z-index: 1;
}
.fl-call.group .fl-tile-face img,
.fl-call.group .fl-tile-face .avatar {
  width: 56% !important; height: 56% !important; max-width: 120px; max-height: 120px;
  border-radius: 12px !important; object-fit: cover;
}
.fl-call.group .fl-tile-face span {
  font-size: 36px; font-weight: 600; color: #eee;
}
.fl-call.group .fl-call-remote-tile.has-video .fl-tile-face {
  opacity: 0; pointer-events: none;
}
.fl-call.group .fl-tile-wait {
  position: absolute; inset: 0; z-index: 3;
  display: none; align-items: center; justify-content: center; gap: 7px;
  background: rgba(0,0,0,.18);
}
.fl-call.group .fl-call-remote-tile.is-wait .fl-tile-wait { display: flex; }
.fl-call.group .fl-tile-wait i {
  width: 7px; height: 7px; border-radius: 50%; background: #fff;
  opacity: .85;
  animation: fl-tile-dot 1.05s ease-in-out infinite;
}
.fl-call.group .fl-tile-wait i:nth-child(2) { animation-delay: .15s; }
.fl-call.group .fl-tile-wait i:nth-child(3) { animation-delay: .3s; }
@keyframes fl-tile-dot {
  0%, 80%, 100% { transform: scale(.7); opacity: .35; }
  40% { transform: scale(1); opacity: 1; }
}
.fl-call.group .fl-tile-name {
  position: absolute; left: 8px; bottom: 8px; z-index: 4;
  font-size: 12px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6);
  max-width: 80%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fl-call.group .fl-call-pip-wrap,
.fl-call.group .fl-call-main,
.fl-call.group .fl-call-portrait { display: none !important; }
.fl-call.group .fl-call-bottom {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 6;
  padding: 8px 24px calc(22px + var(--sab, 0px));
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.55) 30%, rgba(0,0,0,.85));
}
.fl-call.group .fl-call-row.secondary { margin-bottom: 0; }
.fl-call.group.is-mini .fl-call-stage.is-grid {
  top: 0; bottom: 0; padding: 0; gap: 1px;
}
.fl-call.group.is-mini .fl-tile-wait,
.fl-call.group.is-mini .fl-tile-name { display: none !important; }

/* 邀请好友加入通话 */
.fl-call-invite-mask {
  position: fixed; inset: 0; z-index: 530;
  background: rgba(0,0,0,.45);
  display: flex; align-items: flex-end; justify-content: center;
}
.fl-call-invite-sheet {
  width: 100%; max-width: 480px;
  background: #1c1c1e; color: #fff;
  border-radius: 16px 16px 0 0;
  padding: 16px 16px calc(16px + var(--sab, 0px));
  max-height: 70vh; display: flex; flex-direction: column;
}
.fl-call-invite-title {
  font-size: 16px; font-weight: 600; text-align: center; margin-bottom: 12px;
}
.fl-call-invite-list {
  overflow: auto; flex: 1; margin-bottom: 12px;
}
.fl-call-invite-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 4px; border-bottom: 1px solid rgba(255,255,255,.08);
  cursor: pointer;
}
.fl-call-invite-row .ck {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35);
  flex-shrink: 0;
}
.fl-call-invite-row.on .ck {
  background: #07c160; border-color: #07c160;
  box-shadow: inset 0 0 0 3px #1c1c1e;
}
.fl-call-invite-row .nm { font-size: 16px; }
.fl-call-invite-actions {
  display: flex; gap: 10px;
}
.fl-call-invite-cancel,
.fl-call-invite-ok {
  flex: 1; height: 44px; border: 0; border-radius: 10px;
  font-size: 16px; cursor: pointer;
}
.fl-call-invite-cancel { background: rgba(255,255,255,.12); color: #fff; }
.fl-call-invite-ok { background: #07c160; color: #fff; font-weight: 600; }

.fl-call-top {
  position: relative; z-index: 4;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(10px + var(--sat, 0px)) 16px 8px;
}
.fl-call-icon-btn {
  width: 36px; height: 36px; border: 0; border-radius: 10px;
  background: rgba(255,255,255,.12); color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.fl-call-icon-btn svg { width: 20px; height: 20px; fill: currentColor; }
.fl-call-png {
  width: 22px; height: 22px; object-fit: contain; display: block;
  filter: brightness(0) invert(1);
}
.disc .fl-call-png {
  width: 28px; height: 28px;
  filter: brightness(0) invert(1);
}

.fl-call-main {
  position: relative; z-index: 2;
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 0 24px 24px; text-align: center;
}
.fl-call.video .fl-call-main {
  justify-content: flex-start;
  padding-top: 72px;
}
.fl-call-avatar {
  width: 112px; height: 112px; border-radius: 18px;
  overflow: hidden; background: #3a3a3a;
  display: flex; align-items: center; justify-content: center;
  font-size: 44px; font-weight: 600; margin-bottom: 16px;
  box-shadow: 0 10px 36px rgba(0,0,0,.4);
}
.fl-call-avatar.pulse {
  animation: flCallPulse 2.4s ease-in-out infinite;
}
.fl-call-avatar.letter {
  background: linear-gradient(145deg, #4a6fa5, #2c3e5a);
}
.fl-call-avatar img,
.fl-call-avatar .avatar,
.fl-call-avatar .avatar.sm,
.fl-call-avatar .avatar.lg {
  width: 100% !important; height: 100% !important; border-radius: 18px !important;
  font-size: 44px !important; object-fit: cover;
}
@keyframes flCallPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 10px 36px rgba(0,0,0,.4); }
  50% { transform: scale(1.04); box-shadow: 0 14px 44px rgba(7,193,96,.22); }
}
.fl-call.video .fl-call-avatar { width: 96px; height: 96px; font-size: 36px; border-radius: 16px; }
.fl-call-name {
  font-size: 22px; font-weight: 600; letter-spacing: .2px;
  text-shadow: 0 1px 4px rgba(0,0,0,.45);
}
.fl-call-ring {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 86%;
  border: 0;
  cursor: pointer;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,.38);
  color: rgba(255,255,255,.92);
  font-size: 13px;
  line-height: 1.2;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.fl-call-ring.hidden { display: none !important; }
.fl-call-ring-ico {
  font-size: 12px;
  opacity: .9;
}
.fl-call-ring-txt {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
}
.fl-call.video.is-connected .fl-call-ring { display: none !important; }

/* 通话页：对方铃声详情底板（仿微信） */
.fl-ring-sheet-mask {
  position: fixed; inset: 0; z-index: 540;
  background: rgba(0,0,0,.45);
  display: flex; align-items: flex-end; justify-content: center;
}
.fl-ring-sheet {
  width: 100%; max-width: 480px;
  background: #1c1c1e;
  border-radius: 14px 14px 0 0;
  padding: 8px 16px calc(14px + var(--sab, 0px));
  color: #f2f2f2;
  animation: flRingUp .22s ease-out;
}
@keyframes flRingUp {
  from { transform: translateY(36%); opacity: .7; }
  to { transform: translateY(0); opacity: 1; }
}
.fl-ring-sheet-grab {
  width: 36px; height: 4px; border-radius: 2px;
  background: rgba(255,255,255,.22);
  margin: 4px auto 12px;
}
.fl-ring-sheet-title {
  text-align: center; font-size: 17px; font-weight: 600; margin-bottom: 8px;
}
.fl-ring-sheet-desc {
  text-align: center; font-size: 12.5px; line-height: 1.55;
  color: rgba(255,255,255,.55); padding: 0 8px 14px;
}
.fl-ring-sheet-card {
  width: 100%; border: 0; border-radius: 12px;
  background: #2c2c2e; color: inherit;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; text-align: left; cursor: pointer;
}
.fl-ring-sheet-thumb {
  width: 44px; height: 44px; border-radius: 8px;
  background: linear-gradient(145deg, #3a3a3c, #1f1f21);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: #e8c56a; flex-shrink: 0;
}
.fl-ring-sheet-meta { flex: 1; min-width: 0; }
.fl-ring-sheet-label { font-size: 12px; color: rgba(255,255,255,.5); }
.fl-ring-sheet-name {
  margin-top: 3px; font-size: 15px; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fl-ring-sheet-arr { color: rgba(255,255,255,.35); font-size: 20px; }
.fl-ring-sheet-check {
  display: flex; align-items: center; gap: 8px;
  margin: 14px 2px 6px; font-size: 14px; color: rgba(255,255,255,.78);
  user-select: none; cursor: pointer;
}
.fl-ring-sheet-check.hidden { display: none !important; }
.fl-ring-sheet-check input { display: none; }
.fl-ring-sheet-check .box {
  width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.35);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.fl-ring-sheet-check input:checked + .box {
  background: #07c160; border-color: #07c160;
}
.fl-ring-sheet-check input:checked + .box::after {
  content: '✓'; color: #fff; font-size: 12px; font-weight: 700; line-height: 1;
}
.fl-ring-sheet-primary {
  width: 100%; height: 46px; margin-top: 12px; border: 0; border-radius: 10px;
  background: #07c160; color: #fff; font-size: 16px; font-weight: 600; cursor: pointer;
}
.fl-ring-sheet-primary:active { opacity: .88; }
.fl-ring-sheet-link {
  display: block; width: 100%; margin-top: 14px; border: 0; background: transparent;
  color: #fff; font-size: 15px; text-align: center; cursor: pointer; padding: 6px;
}
.fl-ring-sheet-cancel {
  display: block; width: 100%; margin-top: 8px; border: 0; background: transparent;
  color: rgba(255,255,255,.55); font-size: 14px; text-align: center; cursor: pointer; padding: 10px;
}
body.light .fl-ring-sheet {
  background: #f7f7f7; color: #111;
}
body.light .fl-ring-sheet-grab { background: rgba(0,0,0,.18); }
body.light .fl-ring-sheet-desc { color: #888; }
body.light .fl-ring-sheet-card { background: #fff; color: #111; }
body.light .fl-ring-sheet-label { color: #888; }
body.light .fl-ring-sheet-arr { color: #bbb; }
body.light .fl-ring-sheet-check { color: #333; }
body.light .fl-ring-sheet-check .box { border-color: #ccc; }
body.light .fl-ring-sheet-link { color: #111; }
body.light .fl-ring-sheet-cancel { color: #888; }

.fl-call-status {
  margin-top: 10px; font-size: 14px; color: rgba(255,255,255,.72);
  min-height: 20px; text-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.fl-call-dots::after {
  content: '';
  animation: flCallDots 1.2s steps(4, end) infinite;
}
@keyframes flCallDots {
  0% { content: ''; }
  25% { content: '.'; }
  50% { content: '..'; }
  75% { content: '...'; }
}

.fl-call-bottom {
  position: relative; z-index: 4;
  padding: 12px 28px calc(28px + var(--sab, 0px));
}
.fl-call-row {
  display: flex; align-items: flex-start; justify-content: space-around;
  gap: 8px; margin-bottom: 22px;
}
.fl-call-audio-row {
  margin-bottom: 14px;
  align-items: flex-end;
}
.fl-call-audio-row .fl-call-flip-btn .disc.sm {
  width: 64px; height: 64px;
}
.fl-call-audio-row .fl-call-flip-btn .disc.sm svg {
  width: 26px; height: 26px;
}
.fl-call-row.secondary {
  align-items: center; margin-bottom: 8px;
}
.fl-call-ctrl {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  min-width: 76px; background: none; border: 0; color: #fff; cursor: pointer;
  padding: 0;
}
.fl-call-ctrl .disc {
  width: 64px; height: 64px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #fff; color: #111;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
.fl-call-ctrl .disc svg { width: 26px; height: 26px; fill: currentColor; }
.fl-call-ctrl .disc.dark {
  background: rgba(255,255,255,.16); color: #fff;
  backdrop-filter: blur(8px);
}
.fl-call-ctrl .disc.off {
  background: rgba(255,255,255,.14); color: #fff;
}
.fl-call-ctrl .disc.hang {
  width: 72px; height: 72px; background: #fa5151; color: #fff;
}
.fl-call-ctrl .disc.sm {
  width: 48px; height: 48px;
}
.fl-call-ctrl .disc.sm svg { width: 22px; height: 22px; }
.fl-call-ctrl .lab {
  font-size: 12px; color: rgba(255,255,255,.88);
  text-shadow: 0 1px 3px rgba(0,0,0,.35);
  white-space: nowrap;
}
.fl-call-ctrl.accept .disc { background: #07c160; color: #fff; }

/* 接通后只保留 live 控件：拨号行麦克风/听筒/摄像头必须消失，避免「又弹出多个按钮」 */
.fl-call.video.is-connected .fl-call-audio-row,
.fl-call.video.is-connected .fl-call-wait-ctrls {
  display: none !important;
}
.fl-call.video:not(.is-connected) .fl-call-live-ctrls {
  display: none !important;
}
.fl-call.video.is-connected .fl-call-live-ctrls {
  display: block !important;
}

/* 上排：麦克风 | 挂断 | 听筒↔扬声器；接通后下排：模糊 | 翻转 */
.fl-call-live-ctrls {
  position: relative;
}
.fl-call-row-live {
  align-items: flex-start;
  justify-content: space-around;
  margin-bottom: 18px;
}
.fl-call-row-live > .fl-call-ctrl {
  flex: 0 0 auto;
}
.fl-call-cam-stack,
.fl-call-side-stack {
  display: none !important;
}
.fl-call-row-live {
  align-items: flex-end;
  position: relative;
}
.fl-call-cam-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  min-width: 76px;
  position: relative;
  z-index: 2;
}
.fl-call-side-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  min-width: 76px;
  position: relative;
  z-index: 2;
}
.fl-call-side-stack > .fl-call-ctrl,
.fl-call-cam-stack > .fl-call-ctrl {
  position: relative;
  z-index: 1;
}
.fl-call-ctrl.is-on .disc.dark,
.fl-call-ctrl.is-on .disc.is-active {
  background: rgba(7, 193, 96, .92);
}
.fl-call-blur-disc.is-active,
#fl-call-blur-disc.is-active {
  background: rgba(7, 193, 96, .92);
}
.fl-call-flip-btn .lab { font-size: 11px; }
.fl-call-side-stack .lab { font-size: 11px; }
.fl-call-more-pop {
  position: absolute;
  left: 10px;
  bottom: calc(100% + 10px);
  min-width: 188px;
  padding: 6px 0;
  border-radius: 12px;
  background: rgba(30, 30, 30, .92);
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 28px rgba(0,0,0,.4);
  z-index: 8;
}
.fl-call-more-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
}
.fl-call-more-item:active { background: rgba(255,255,255,.08); }
.fl-call-more-item.is-on { color: #7ee0a8; }
.fl-call-more-ico {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.fl-call-more-ico svg { width: 22px; height: 22px; fill: currentColor; }

/* 旧版浮动翻转/模糊已移除，避免叠在底部摄像头上 */
.fl-call-vtools { display: none !important; }

/* 模糊：强虚化，切换时靠 CSS 盖住，避免黑屏 */
.fl-call.is-bg-blur .fl-call-local-pip video,
.fl-call.is-bg-blur .fl-call-stage.is-local-preview video,
.fl-call.is-bg-blur .fl-call-tile.is-me.has-video video {
  filter: blur(28px) saturate(1.05) brightness(1.02) !important;
  transform: scale(1.08);
}
.fl-call.is-bg-blur .fl-call-local-pip,
.fl-call.is-bg-blur .fl-call-stage.is-local-preview,
.fl-call.is-bg-blur .fl-call-tile.is-me.has-video {
  overflow: hidden;
}
.fl-call.is-bg-blur .fl-call-local-pip::after,
.fl-call.is-bg-blur .fl-call-stage.is-local-preview::after,
.fl-call.is-bg-blur .fl-call-tile.is-me.has-video::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* 横屏模式：竖屏设备强制横屏布局 */
.fl-call.is-landscape:not(.is-mini) {
  width: 100vh !important;
  height: 100vw !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) rotate(90deg) !important;
  transform-origin: center center;
}
.fl-call.group .fl-call-vtools {
  display: none !important;
}

/* 网页桌面端：控件区居中，小窗靠边（仿微信网页版） */
@media (min-width: 768px) {
  .fl-call-bottom {
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    box-sizing: border-box;
  }
  .fl-call-top {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    box-sizing: border-box;
  }
}

/* 通话气泡：谁拨打就在谁那边；颜色与普通消息一致
   我发起 → 我右边绿泡「已取消」
   对方发起 → 我左边白泡「已取消」 */
.bubble.call {
  display: inline-flex; align-items: center; gap: 8px;
  min-width: 0; padding: 10px 12px; cursor: pointer;
  font-size: 16px; line-height: 1.25;
}
.bubble.call:active { opacity: .75; }
.bubble.call .call-ico {
  width: 18px; height: 18px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.bubble.call .call-ico svg { width: 18px; height: 18px; fill: currentColor; }
.bubble.call .call-ico-img {
  width: 18px; height: 18px; object-fit: contain; display: block;
}

/* 我发起：绿泡（右边） */
.msg-row.me .bubble.call {
  background: #95ec69 !important;
  color: #121212 !important;
}
body.light .msg-row.me .bubble.call {
  background: #95ec69 !important;
  color: #121212 !important;
}

/* 对方发起：白泡（左边） */
.msg-row:not(.me) .bubble.call {
  background: #ffffff !important;
  color: #121212 !important;
}
body.light .msg-row:not(.me) .bubble.call {
  background: #ffffff !important;
  color: #121212 !important;
}

/* 普通（浅色）皮肤：来电 / 等待接通页用白底，仿微信白天来电 */
body.light .fl-call.voice.is-incoming,
body.light .fl-call.voice:not(.is-connected),
body.light .fl-call.video.is-incoming:not(.is-connected) {
  color: #191919;
  background: #f2f2f2 !important;
}
body.light .fl-call.voice.is-incoming .fl-call-portrait-bg,
body.light .fl-call.voice:not(.is-connected) .fl-call-portrait-bg,
body.light .fl-call.video.is-incoming:not(.is-connected) .fl-call-portrait-bg {
  filter: blur(40px) saturate(1.05) brightness(1.15);
  opacity: .55;
}
body.light .fl-call.voice.is-incoming .fl-call-portrait-bg.fl-call-portrait-plain,
body.light .fl-call.voice:not(.is-connected) .fl-call-portrait-bg.fl-call-portrait-plain,
body.light .fl-call.video.is-incoming:not(.is-connected) .fl-call-portrait-bg.fl-call-portrait-plain {
  background: linear-gradient(180deg, #fafafa 0%, #f0f0f0 55%, #eaeaea 100%);
  filter: none;
  opacity: 1;
}
body.light .fl-call.voice.is-incoming .fl-call-portrait-shade,
body.light .fl-call.voice:not(.is-connected) .fl-call-portrait-shade,
body.light .fl-call.video.is-incoming:not(.is-connected) .fl-call-portrait-shade {
  background: linear-gradient(180deg, rgba(255,255,255,.35) 0%, rgba(242,242,242,.75) 100%);
}
body.light .fl-call.voice.is-incoming .fl-call-name,
body.light .fl-call.voice:not(.is-connected) .fl-call-name,
body.light .fl-call.video.is-incoming:not(.is-connected) .fl-call-name {
  color: #111;
  text-shadow: none;
}
body.light .fl-call.voice.is-incoming .fl-call-status,
body.light .fl-call.voice:not(.is-connected) .fl-call-status,
body.light .fl-call.video.is-incoming:not(.is-connected) .fl-call-status {
  color: #888;
  text-shadow: none;
}
body.light .fl-call.voice.is-incoming .fl-call-icon-btn,
body.light .fl-call.voice:not(.is-connected) .fl-call-icon-btn,
body.light .fl-call.video.is-incoming:not(.is-connected) .fl-call-icon-btn {
  color: #333;
}
body.light .fl-call.voice.is-incoming .fl-call-ctrl,
body.light .fl-call.voice:not(.is-connected) .fl-call-ctrl,
body.light .fl-call.video.is-incoming:not(.is-connected) .fl-call-ctrl {
  color: #333;
}
body.light .fl-call.voice.is-incoming .fl-call-ctrl .lab,
body.light .fl-call.voice:not(.is-connected) .fl-call-ctrl .lab,
body.light .fl-call.video.is-incoming:not(.is-connected) .fl-call-ctrl .lab {
  color: #666;
}
body.light .fl-call.voice.is-incoming .fl-call-ring,
body.light .fl-call.voice:not(.is-connected) .fl-call-ring,
body.light .fl-call.video.is-incoming:not(.is-connected) .fl-call-ring {
  background: rgba(0,0,0,.06);
  color: #666;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.light .fl-call.voice.is-incoming .fl-call-ctrl .disc.dark,
body.light .fl-call.voice:not(.is-connected) .fl-call-ctrl .disc.dark,
body.light .fl-call.voice.is-incoming .fl-call-ctrl .disc.off,
body.light .fl-call.voice:not(.is-connected) .fl-call-ctrl .disc.off {
  background: rgba(0,0,0,.08);
  color: #222;
}

#fl-rtc-remote-audio {
  position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none;
}