.lx-call-root {
  position: absolute;
  inset: 0;
  z-index: 1800;
  display: none;
  overflow: hidden;
  color: #fff;
  background: #090b0d;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}
.lx-call-root.show { display: block; }
.lx-call-root.preset-open { display:block;background:transparent; }
.lx-call-root.preset-open .lx-call-bg,
.lx-call-root.preset-open .lx-call-shade,
.lx-call-root.preset-open .lx-call-main,
.lx-call-root.preset-open .lx-call-float { display:none; }
.lx-call-preset {
  position:absolute;
  inset:0;
  z-index:8;
  display:none;
  align-items:flex-end;
  justify-content:center;
  padding:20px 14px calc(18px + env(safe-area-inset-bottom));
  box-sizing:border-box;
  background:rgba(5,7,8,.48);
  color:#191b1d;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.lx-call-root.preset-open .lx-call-preset { display:flex; }
.lx-call-preset-card {
  position:relative;
  width:min(100%,460px);
  padding:26px 20px 18px;
  box-sizing:border-box;
  border-radius:26px;
  background:#fff;
  box-shadow:0 22px 70px rgba(0,0,0,.28);
}
.lx-call-preset-close { position:absolute;right:14px;top:12px;width:34px;height:34px;border:0;border-radius:50%;background:#f1f2f3;color:#6d7175;font-size:24px;line-height:1; }
.lx-call-preset-kicker { display:block;margin-bottom:7px;color:#33ad68;font-size:12px;font-weight:650;letter-spacing:.5px; }
.lx-call-preset-card h3 { margin:0;padding-right:34px;color:#17191b;font-size:21px;line-height:1.35;font-weight:700; }
.lx-call-preset-card p { margin:9px 0 15px;color:#777d82;font-size:13px;line-height:1.55; }
.lx-call-preset-card textarea { width:100%;min-height:116px;padding:14px 15px;box-sizing:border-box;resize:none;border:1px solid #e4e7e8;border-radius:16px;outline:0;background:#f7f8f8;color:#202326;font:15px/1.6 inherit; }
.lx-call-preset-card textarea:focus { border-color:#57c986;background:#fff;box-shadow:0 0 0 3px rgba(63,195,119,.1); }
.lx-call-preset-card textarea::placeholder { color:#a5aaae; }
.lx-call-preset-meta { min-height:34px;display:flex;align-items:center;justify-content:space-between;gap:12px;color:#92979b;font-size:11px; }
.lx-call-preset-meta b { flex:0 0 auto;font-weight:500; }
.lx-call-preset-meta i { font-style:normal; }
.lx-call-preset-actions { display:grid;grid-template-columns:.82fr 1.18fr;gap:10px;margin-top:5px; }
.lx-call-preset-actions button { min-height:48px;border:0;border-radius:15px;background:#eef0f1;color:#555b60;font-size:15px;font-weight:650; }
.lx-call-preset-actions button:last-child { background:#37c776;color:#fff;box-shadow:0 8px 20px rgba(55,199,118,.22); }
html.auto-night .lx-call-preset-card { background:#181a1c;color:#f5f6f7; }
html.auto-night .lx-call-preset-card h3 { color:#f5f6f7; }
html.auto-night .lx-call-preset-card textarea { border-color:#32363a;background:#222529;color:#f5f6f7; }
html.auto-night .lx-call-preset-actions button { background:#2b2f32;color:#d8dcdf; }
html.auto-night .lx-call-preset-actions button:last-child { background:#37c776;color:#fff; }
.lx-call-root.minimized { pointer-events:none;background:transparent;overflow:visible; }
.lx-call-root.minimized .lx-call-bg,
.lx-call-root.minimized .lx-call-shade,
.lx-call-root.minimized .lx-call-main { display:none; }
.lx-call-bg {
  position: absolute;
  inset: -30px;
  background-position: center;
  background-size: cover;
  filter: blur(28px) saturate(.8);
  opacity: .34;
  transform: scale(1.12);
}
.lx-call-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5,8,10,.52), rgba(6,8,10,.9) 68%, #07090b);
}
.lx-call-main {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(24px + env(safe-area-inset-top)) 22px calc(20px + env(safe-area-inset-bottom));
}
.lx-call-top { position:relative;width:100%;min-height:42px;display:flex;justify-content:center;align-items:center; }
.lx-call-top span { color: rgba(255,255,255,.62); font-size: 13px; letter-spacing: .5px; }
.lx-call-minimize { position:absolute;left:0;top:0;width:42px;height:42px;display:grid;place-items:center;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:34px;font-weight:300;line-height:1; }
.lx-call-profile { margin-top: min(9vh, 76px); text-align: center; }
.lx-call-avatar {
  width: 112px;
  height: 112px;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.36);
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  box-shadow: 0 14px 44px rgba(0,0,0,.42), 0 0 0 8px rgba(255,255,255,.035);
  color: #fff;
  font-size: 42px;
}
.lx-call-avatar img { width:100%;height:100%;object-fit:cover; }
.lx-call-profile h2 { margin:0;color:#fff;font-size:27px;font-weight:650; }
.lx-call-profile p { min-height: 20px;margin:8px 0 0;color:rgba(255,255,255,.62);font-size:13px; }
.lx-call-profile.speaking .lx-call-avatar { animation: lxCallPulse 1.35s ease-in-out infinite; }
@keyframes lxCallPulse { 50% { box-shadow:0 14px 44px rgba(0,0,0,.42),0 0 0 15px rgba(79,220,145,.12); } }
.lx-call-caption {
  width: min(100%, 420px);
  min-height: 76px;
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  text-align: center;
}
.lx-call-caption.hidden { opacity:0; pointer-events:none; }
.lx-call-caption b { color:rgba(255,255,255,.48);font-size:11px;font-weight:500; }
.lx-call-caption span { color:rgba(255,255,255,.9);font-size:16px;line-height:1.55; }
.lx-call-hint { margin-top:auto;min-height:20px;color:rgba(255,255,255,.55);font-size:12px;text-align:center; }
.lx-call-controls { width:100%;display:flex;justify-content:center;align-items:center;gap:30px;margin-top:20px; }
.lx-call-control { width:64px;border:0;background:transparent;color:#fff;text-align:center; }
.lx-call-control i { width:58px;height:58px;margin:0 auto 8px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.14);font-style:normal;font-size:23px; }
.lx-call-control span { display:block;color:rgba(255,255,255,.76);font-size:11px; }
.lx-call-control.active i { background:#fff;color:#111; }
.lx-call-control:disabled { opacity:.42; }
.lx-call-talk i { width:72px;height:72px;background:#eef2f0;color:#111;font-size:28px;box-shadow:0 7px 25px rgba(0,0,0,.3); }
.lx-call-talk.recording i { background:#44d17e;color:#fff;animation:lxCallRecord .85s ease-in-out infinite; }
@keyframes lxCallRecord { 50% { transform:scale(.92); } }
.lx-call-hangup { width:76px;height:76px;margin-top:24px;display:grid;place-items:center;border:0;border-radius:50%;background:#ed4b4b;color:#fff;font-size:28px;transform:rotate(135deg);box-shadow:0 8px 24px rgba(237,75,75,.25); }
.lx-call-float {
  position:absolute;
  z-index:3;
  right:14px;
  top:calc(72px + env(safe-area-inset-top));
  width:auto;
  min-width:88px;
  height:58px;
  padding:5px 11px 5px 5px;
  display:none;
  align-items:center;
  gap:8px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:30px;
  background:rgba(18,23,22,.94);
  color:#fff;
  box-shadow:0 7px 24px rgba(0,0,0,.34);
  pointer-events:auto;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.lx-call-root.show.minimized .lx-call-float { display:flex; }
.lx-call-float-avatar { width:46px;height:46px;display:grid;place-items:center;overflow:hidden;flex:0 0 auto;border-radius:50%;background:#35c878;color:#fff;font-size:18px; }
.lx-call-float-avatar img { width:100%;height:100%;object-fit:cover; }
.lx-call-float-copy { min-width:35px;display:flex;flex-direction:column;align-items:flex-start;gap:2px; }
.lx-call-float-copy strong { max-width:70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:600; }
.lx-call-float-copy small { color:#59db91;font-size:11px;font-variant-numeric:tabular-nums; }
.lx-call-error { color:#ffb1b1 !important; }
html.auto-night .lx-call-root { background:#070809; }
@media (max-height: 650px) {
  .lx-call-profile { margin-top: 18px; }
  .lx-call-avatar { width:86px;height:86px;margin-bottom:12px; }
  .lx-call-caption { margin-top:14px;min-height:58px; }
  .lx-call-hangup { margin-top:12px;width:66px;height:66px; }
}
