wqxt-mobile-messenger {
  --wqxt-phone-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", STSong, serif;
  --wqxt-phone-sans: Inter, "PingFang SC", "Microsoft YaHei", sans-serif;
  --wqxt-phone-mono: "DM Mono", "SFMono-Regular", Consolas, monospace;
  --wqxt-phone-text: #f3f0eb;
  --wqxt-phone-soft: rgba(243, 240, 235, .62);
  --wqxt-phone-faint: rgba(243, 240, 235, .36);
  --wqxt-phone-line: rgba(255, 255, 255, .11);
  --wqxt-phone-gold: #e4bd71;
  position: fixed;
  z-index: 125;
  inset: 0;
  display: block;
  color: var(--wqxt-phone-text);
  font-family: var(--wqxt-phone-serif);
  pointer-events: none;
}

wqxt-mobile-messenger[hidden] { display: none !important; }

.wqxt-phone__scrim {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(3, 4, 7, .56);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

wqxt-mobile-messenger[position="left"] .wqxt-phone__scrim,
wqxt-mobile-messenger[position="right"] .wqxt-phone__scrim { background: rgba(3, 4, 7, .36); }

/* 接通后手机停靠右侧并与剧情对白共存：只保留剧情页自身的可读性渐变，并让非手机区域继续接收剧情输入。 */
wqxt-mobile-messenger[call-state="active"][position="right"],
wqxt-mobile-messenger[story-active][position="right"] { pointer-events: none; }
wqxt-mobile-messenger[call-state="active"][position="right"] .wqxt-phone__scrim,
wqxt-mobile-messenger[story-active][position="right"] .wqxt-phone__scrim {
  background: transparent;
  pointer-events: none;
}

.wqxt-phone__stage {
  position: absolute;
  inset:
    max(24px, env(safe-area-inset-top))
    max(28px, env(safe-area-inset-right))
    max(24px, env(safe-area-inset-bottom))
    max(28px, env(safe-area-inset-left));
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

wqxt-mobile-messenger[position="left"] .wqxt-phone__stage { justify-content: flex-start; }
wqxt-mobile-messenger[position="right"] .wqxt-phone__stage { justify-content: flex-end; }

.wqxt-phone__device {
  position: relative;
  width: min(382px, calc(100vw - 56px));
  height: min(682px, calc(100dvh - 48px));
  min-height: 520px;
  padding: 9px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 34px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .17), rgba(255, 255, 255, .025) 18%, rgba(0, 0, 0, .34) 72%),
    #17181d;
  box-shadow:
    0 34px 90px rgba(0, 0, 0, .62),
    inset 0 0 0 1px rgba(0, 0, 0, .65),
    inset 0 1px 0 rgba(255, 255, 255, .18);
  opacity: 0;
  transform: translateY(14px) scale(.985);
  pointer-events: auto;
  transition: opacity 220ms ease, transform 260ms cubic-bezier(.2,.75,.25,1);
}

wqxt-mobile-messenger[position="left"] .wqxt-phone__device { transform: translateX(-18px) scale(.985); }
wqxt-mobile-messenger[position="right"] .wqxt-phone__device { transform: translateX(18px) scale(.985); }

wqxt-mobile-messenger[open] { pointer-events: auto; }
wqxt-mobile-messenger[open] .wqxt-phone__scrim { opacity: 1; pointer-events: auto; }
wqxt-mobile-messenger[open] .wqxt-phone__device { opacity: 1; transform: none; }
wqxt-mobile-messenger[position-moving] .wqxt-phone__device { will-change: transform; }

.wqxt-phone__side-key {
  position: absolute;
  right: -4px;
  top: 116px;
  width: 3px;
  height: 66px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(#4b4d54, #17181d);
}

.wqxt-phone__side-key::before,
.wqxt-phone__side-key::after {
  position: absolute;
  left: -376px;
  width: 3px;
  border-radius: 3px 0 0 3px;
  background: linear-gradient(#4b4d54, #17181d);
  content: "";
}
.wqxt-phone__side-key::before { top: 14px; height: 40px; }
.wqxt-phone__side-key::after { top: 68px; height: 58px; }

.wqxt-phone__screen {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: 26px minmax(0, 1fr) 22px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .05);
  border-radius: 27px;
  background:
    radial-gradient(circle at 72% 6%, rgba(100, 113, 131, .11), transparent 30%),
    linear-gradient(165deg, #111319, #090a0e 60%, #0d0e13);
  box-shadow: inset 0 0 34px rgba(0, 0, 0, .34);
}

.wqxt-phone__hardware-top {
  position: relative;
  display: grid;
  place-items: center;
}
.wqxt-phone__hardware-top::before {
  width: 66px;
  height: 16px;
  border-radius: 0 0 12px 12px;
  background: #050608;
  content: "";
}
.wqxt-phone__hardware-top::after {
  position: absolute;
  top: 5px;
  width: 28px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .17);
  content: "";
}

.wqxt-phone__viewport { position: relative; min-height: 0; display: grid; overflow: hidden; }
.wqxt-phone__home { display: grid; place-items: center; }
.wqxt-phone__home::before {
  width: 92px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .34);
  content: "";
}

.wqxt-phone__page { min-height: 0; display: grid; overflow: hidden; }
.wqxt-phone__page[hidden] { display: none !important; }
.wqxt-phone__page--contacts { grid-template-rows: auto minmax(0, 1fr); }
.wqxt-phone__page--feed { grid-template-rows:auto minmax(0,1fr) auto; }
.wqxt-phone__feed-stream { min-height:0; overflow:auto; overscroll-behavior:contain; padding:16px; font:400 14px/1.7 var(--wqxt-phone-serif); }
.wqxt-phone__feed-stream h3 { margin:0 0 16px; font:600 16px/1.7 var(--wqxt-phone-serif); }
.wqxt-phone__feed-stream p { margin:0 0 16px; white-space:pre-wrap; }
.wqxt-phone__feed-entry { display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:44px;padding:12px 0;border:0;border-bottom:1px solid var(--wqxt-phone-line);background:none;color:inherit;text-align:left;font:inherit;cursor:pointer; }
.wqxt-phone__feed-entry small { flex:none;color:var(--wqxt-phone-soft);font:400 10px/1.7 var(--wqxt-phone-mono); }
.wqxt-phone__feed-footer { padding:8px 16px;border-top:1px solid var(--wqxt-phone-line); }
.wqxt-phone__feed-action { width:100%;min-height:44px;border:0;border-radius:6px;background:var(--wqxt-phone-gold);color:#29231a;font:600 14px/1.7 var(--wqxt-phone-serif);cursor:pointer; }
.wqxt-phone__feed-action:disabled { opacity:.5;cursor:default; }
.wqxt-phone__feed-entry:focus-visible,.wqxt-phone__feed-action:focus-visible,.wqxt-phone__feed-stream:focus-visible { outline:2px solid var(--wqxt-phone-gold);outline-offset:-2px; }
@media(max-width:1000px),(max-height:560px) { .wqxt-phone__feed-stream { padding:12px;font-size:13px; } .wqxt-phone__feed-stream h3 { font-size:15px;margin-bottom:12px; } .wqxt-phone__feed-stream p { margin-bottom:12px; } .wqxt-phone__feed-action { font-size:13px; } }

.wqxt-phone__titlebar,
.wqxt-phone__chatbar {
  min-height: 62px;
  padding: 8px 13px 8px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--wqxt-phone-line);
  background: rgba(13, 15, 20, .76);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.wqxt-phone__titlegroup { min-width: 0; flex: 1; display: grid; gap: 2px; }
.wqxt-phone__eyebrow {
  color: var(--wqxt-phone-gold);
  font: 600 8px/1.2 var(--wqxt-phone-mono);
  letter-spacing: .2em;
}
.wqxt-phone__titlebar h2,
.wqxt-phone__chatbar strong {
  margin: 0;
  overflow: hidden;
  color: var(--wqxt-phone-text);
  font: 600 16px/1.25 var(--wqxt-phone-serif);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wqxt-phone__icon-button {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--wqxt-phone-soft);
  cursor: pointer;
}
.wqxt-phone__icon-button:hover,
.wqxt-phone__icon-button:focus-visible {
  background: rgba(255, 255, 255, .055);
  color: var(--wqxt-phone-text);
  outline: 1px solid rgba(228, 189, 113, .42);
  outline-offset: -2px;
}
.wqxt-phone__icon-button > svg {
  width: 20px;
  height: 20px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.wqxt-phone__icon-button--close::before,
.wqxt-phone__icon-button--close::after {
  grid-area: 1 / 1;
  width: 18px;
  height: 1px;
  background: currentColor;
  content: "";
}
.wqxt-phone__icon-button--close::before { transform: rotate(45deg); }
.wqxt-phone__icon-button--close::after { transform: rotate(-45deg); }
.wqxt-phone__icon-button--back:empty::before {
  width: 10px;
  height: 10px;
  border-bottom: 1px solid currentColor;
  border-left: 1px solid currentColor;
  transform: rotate(45deg) translate(2px, -2px);
  content: "";
}

.wqxt-phone__contact-list { margin: 0; padding: 4px 12px 12px; overflow: auto; overscroll-behavior: contain; }
.wqxt-phone__contact {
  width: 100%;
  min-height: 70px;
  padding: 10px 4px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .075);
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.wqxt-phone__contact:hover,
.wqxt-phone__contact:focus-visible { background: rgba(255, 255, 255, .035); outline: 0; }
.wqxt-phone__avatar {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 50%;
  background: linear-gradient(145deg, #4c505b, #22252c);
  color: rgba(255, 255, 255, .86);
  font: 600 13px/1 var(--wqxt-phone-serif);
}
.wqxt-phone__avatar img { width: 100%; height: 100%; object-fit: cover; }
.wqxt-phone__contact-copy { min-width: 0; display: grid; gap: 5px; }
.wqxt-phone__contact-copy strong { font: 600 15px/1.2 var(--wqxt-phone-serif); }
.wqxt-phone__contact-copy span {
  overflow: hidden;
  color: var(--wqxt-phone-soft);
  font: 400 12px/1.35 var(--wqxt-phone-serif);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wqxt-phone__contact-meta { align-self: stretch; display: grid; justify-items: end; align-content: center; gap: 8px; }
.wqxt-phone__contact-meta time,
.wqxt-phone__message-meta,
.wqxt-phone__status { color: var(--wqxt-phone-faint); font: 500 10px/1.2 var(--wqxt-phone-mono); }
.wqxt-phone__unread {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--wqxt-phone-gold);
  color: #17130c;
  font: 700 9px/1 var(--wqxt-phone-mono);
}

.wqxt-phone__page--chat { grid-template-rows: auto minmax(0, 1fr) auto; }
.wqxt-phone__chatbar { padding-left: 6px; }
.wqxt-phone__chatbar .wqxt-phone__avatar { width: 32px; height: 32px; flex: 0 0 32px; font-size: 12px; }
.wqxt-phone__identity { min-width: 0; flex: 1; display: grid; gap: 3px; }
.wqxt-phone__status { color: rgba(174, 201, 185, .7); }

.wqxt-phone__messages {
  min-height: 0;
  padding: 18px 14px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .16) transparent;
}
.wqxt-phone__day {
  align-self: center;
  margin: 0;
  color: var(--wqxt-phone-faint);
  font: 500 9px/1.2 var(--wqxt-phone-mono);
  letter-spacing: .08em;
}
.wqxt-phone__message-group { max-width: 100%; display: flex; align-items: flex-start; gap: 8px; }
.wqxt-phone__message-group--self { justify-content: flex-end; }
.wqxt-phone__message-group .wqxt-phone__avatar { width: 32px; height: 32px; flex: 0 0 32px; }
.wqxt-phone__message-stack { max-width: 72%; display: grid; gap: 4px; }
.wqxt-phone__bubble {
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px 12px 12px 4px;
  background: #292c33;
  color: #f0efec;
  font: 400 14px/1.7 var(--wqxt-phone-serif);
  text-align: left;
  overflow-wrap: anywhere;
}
.wqxt-phone__message-group--self .wqxt-phone__bubble {
  border-radius: 12px 12px 4px 12px;
  background: #d9d7d2;
  color: #24252a;
}
.wqxt-phone__message-group--self .wqxt-phone__message-meta { text-align: right; }
.wqxt-phone__message-group.is-entering { animation: wqxt-phone-message-in 180ms ease-out both; }
.wqxt-phone__typing { min-width: 48px; display: flex; gap: 4px; align-items: center; }
.wqxt-phone__typing i { width: 4px; height: 4px; border-radius: 50%; background: rgba(255, 255, 255, .52); animation: wqxt-phone-typing 800ms ease-in-out infinite; }
.wqxt-phone__typing i:nth-child(2) { animation-delay: 120ms; }
.wqxt-phone__typing i:nth-child(3) { animation-delay: 240ms; }

.wqxt-phone__composer {
  padding: 10px 12px 12px;
  display: grid;
  gap: 10px;
  border-top: 1px solid var(--wqxt-phone-line);
  background: rgba(10, 11, 15, .92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.wqxt-phone__replies { display: grid; gap: 8px; }
.wqxt-phone__reply {
  min-height: 44px;
  padding: 9px 12px;
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 6px;
  background: rgba(255, 255, 255, .018);
  color: var(--wqxt-phone-text);
  font: 400 14px/1.5 var(--wqxt-phone-serif);
  text-align: left;
  cursor: pointer;
}
.wqxt-phone__reply::before {
  width: 7px;
  height: 7px;
  border: 1px solid rgba(228, 189, 113, .66);
  transform: rotate(45deg);
  content: "";
}
.wqxt-phone__reply small { grid-column: 2; display: block; margin-top: -5px; color: var(--wqxt-phone-gold); font: 500 9px/1.35 var(--wqxt-phone-sans); }
.wqxt-phone__reply:disabled { opacity: .42; cursor: not-allowed; }
.wqxt-phone__reply:disabled::before { border-color: rgba(255, 255, 255, .22); }
.wqxt-phone__reply:hover,
.wqxt-phone__reply:focus-visible,
.wqxt-phone__reply[aria-selected="true"] {
  border-color: rgba(228, 189, 113, .72);
  background: rgba(228, 189, 113, .045);
  outline: 1px solid rgba(228, 189, 113, .28);
  outline-offset: 2px;
}
.wqxt-phone__reply:disabled:hover { border-color: rgba(255, 255, 255, .13); background: rgba(255, 255, 255, .018); outline: 0; }
.wqxt-phone__input-row { min-height: 44px; display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 8px; align-items: center; }
.wqxt-phone__input-placeholder {
  height: 40px;
  padding: 0 13px;
  display: flex;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 20px;
  color: var(--wqxt-phone-faint);
  font: 400 12px/1 var(--wqxt-phone-sans);
}

.wqxt-phone__draft {
  flex: 1;
  min-width: 0;
  resize: none;
  border: 0;
  outline: 0;
  background: transparent;
  color: rgba(249, 246, 240, .94);
  font: inherit;
  line-height: 1.45;
  scrollbar-width: none;
}

.wqxt-phone__draft::placeholder { color: rgba(249, 246, 240, .34); }
.wqxt-phone__send { color: rgba(228, 189, 113, .7); }
.wqxt-phone__send::before {
  width: 15px;
  height: 15px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(-45deg) translate(-2px, 2px);
  content: "";
}

.wqxt-phone__page--call {
  position: absolute;
  z-index: 5;
  inset: 0;
  display: grid;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 30%, rgba(102, 114, 132, .24), transparent 38%),
    linear-gradient(180deg, #181b22, #090a0f 76%);
}
.wqxt-phone__call-background {
  position: absolute;
  z-index: -2;
  inset: -28px;
  background-position: 50% 18%;
  background-size: cover;
  filter: blur(18px) saturate(.65);
  opacity: .3;
  transform: scale(1.08);
}
.wqxt-phone__page--call::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(9, 10, 14, .2), rgba(9, 10, 14, .56) 56%, rgba(6, 7, 10, .96)),
    radial-gradient(circle at 50% 28%, transparent, rgba(5, 6, 9, .46) 70%);
  content: "";
}
.wqxt-phone__call-content {
  min-height: 0;
  padding: 58px 24px 36px;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
}
.wqxt-phone__page--call.is-outgoing .wqxt-phone__call-content { grid-template-rows: minmax(0, 1fr); }
.wqxt-phone__call-identity {
  align-self: center;
  display: grid;
  justify-items: center;
  gap: 24px;
  text-align: center;
}
.wqxt-phone__call-portrait {
  position: relative;
  width: 132px;
  height: 132px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 50%;
  background: linear-gradient(145deg, #454b56, #1c1f26);
  box-shadow: 0 18px 45px rgba(0, 0, 0, .34), inset 0 0 0 5px rgba(255, 255, 255, .035);
  color: rgba(255, 255, 255, .88);
  font: 600 34px/1 var(--wqxt-phone-serif);
}
.wqxt-phone__call-portrait img {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 16%;
}
.wqxt-phone__page--call.is-incoming .wqxt-phone__call-portrait::before,
.wqxt-phone__page--call.is-incoming .wqxt-phone__call-portrait::after {
  position: absolute;
  inset: -10px;
  border: 1px solid rgba(228, 189, 113, .24);
  border-radius: 50%;
  content: "";
  animation: wqxt-phone-ring 2.2s ease-out infinite;
}
.wqxt-phone__page--call.is-incoming .wqxt-phone__call-portrait::after { animation-delay: 1.1s; }
.wqxt-phone__call-copy { display: grid; justify-items: center; gap: 8px; }
.wqxt-phone__call-copy > span {
  color: rgba(228, 189, 113, .72);
  font: 600 11px/1.2 var(--wqxt-phone-mono);
  letter-spacing: .24em;
}
.wqxt-phone__call-copy h2 {
  margin: 0;
  color: var(--wqxt-phone-text);
  font: 600 26px/1.3 var(--wqxt-phone-serif);
  letter-spacing: .12em;
}
.wqxt-phone__call-duration {
  min-height: 14px;
  color: var(--wqxt-phone-soft);
  font: 500 13px/1.2 var(--wqxt-phone-mono);
  letter-spacing: .08em;
}
.wqxt-phone__call-actions { display: grid; justify-content: center; align-items: start; gap: 32px; }
.wqxt-phone__call-actions.is-incoming { grid-template-columns: repeat(2, 78px); }
.wqxt-phone__call-actions.is-active { grid-template-columns: 82px; gap: 0; }
.wqxt-phone__call-action {
  min-width: 0;
  min-height: 88px;
  padding: 0;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 9px;
  border: 0;
  background: transparent;
  color: rgba(243, 240, 235, .72);
  font: 500 11px/1.2 var(--wqxt-phone-sans);
  cursor: pointer;
}
.wqxt-phone__call-action-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: #f7f6f2;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}
.wqxt-phone__call-action-icon svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.wqxt-phone__call-action.is-answer .wqxt-phone__call-action-icon { border-color: rgba(139, 213, 174, .76); background: #4b876a; box-shadow: 0 8px 24px rgba(42, 111, 76, .2); }
.wqxt-phone__call-action.is-decline .wqxt-phone__call-action-icon,
.wqxt-phone__call-action.is-hangup .wqxt-phone__call-action-icon { border-color: rgba(225, 126, 128, .76); background: #985052; box-shadow: 0 8px 24px rgba(132, 50, 53, .18); }
.wqxt-phone__call-action.is-decline .wqxt-phone__call-action-icon svg,
.wqxt-phone__call-action.is-hangup .wqxt-phone__call-action-icon svg { transform: rotate(135deg); }
.wqxt-phone__call-action:hover .wqxt-phone__call-action-icon,
.wqxt-phone__call-action:focus-visible .wqxt-phone__call-action-icon { transform: translateY(-2px); border-color: rgba(255, 255, 255, .54); }
.wqxt-phone__call-action:focus-visible { outline: 0; }
.wqxt-phone__call-action:focus-visible .wqxt-phone__call-action-icon { outline: 2px solid rgba(228, 189, 113, .62); outline-offset: 3px; }
.wqxt-phone__call-action[aria-pressed="true"] .wqxt-phone__call-action-icon { border-color: var(--wqxt-phone-gold); background: rgba(228, 189, 113, .18); color: #f4d995; }

@keyframes wqxt-phone-message-in {
  from { opacity: 0; transform: translateY(8px); }
}
@keyframes wqxt-phone-typing {
  0%, 60%, 100% { opacity: .28; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-2px); }
}
@keyframes wqxt-phone-ring {
  0% { opacity: 0; transform: scale(.92); }
  35% { opacity: .65; }
  100% { opacity: 0; transform: scale(1.22); }
}

@media (max-width: 1000px), (max-height: 560px) {
  .wqxt-phone__stage {
    inset:
      max(12px, env(safe-area-inset-top))
      max(18px, env(safe-area-inset-right))
      max(12px, env(safe-area-inset-bottom))
      max(18px, env(safe-area-inset-left));
  }
  .wqxt-phone__device {
    width: min(304px, calc(100vw - 36px));
    height: calc(100dvh - max(24px, env(safe-area-inset-top) + env(safe-area-inset-bottom)));
    min-height: 0;
    padding: 6px;
    border-radius: 24px;
  }
  .wqxt-phone__side-key { display: none; }
  .wqxt-phone__screen { grid-template-rows: 14px minmax(0, 1fr) 12px; border-radius: 19px; }
  .wqxt-phone__hardware-top::before { width: 48px; height: 10px; border-radius: 0 0 8px 8px; }
  .wqxt-phone__hardware-top::after { top: 3px; width: 20px; height: 2px; }
  .wqxt-phone__home::before { width: 64px; height: 2px; }
  .wqxt-phone__titlebar,
  .wqxt-phone__chatbar { min-height: 48px; padding-top: 2px; padding-bottom: 2px; }
  .wqxt-phone__titlebar h2,
  .wqxt-phone__chatbar strong { font-size: 15px; }
  .wqxt-phone__eyebrow { font-size: 7px; }
  .wqxt-phone__icon-button { width: 44px; height: 44px; flex-basis: 44px; }
  .wqxt-phone__contact-list { padding-top: 0; }
  .wqxt-phone__contact { min-height: 58px; padding-top: 7px; padding-bottom: 7px; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 8px; }
  .wqxt-phone__contact-copy strong { font-size: 14px; }
  .wqxt-phone__contact-copy span { font-size: 11px; }
  .wqxt-phone__messages { padding: 10px 12px 12px; gap: 12px; }
  .wqxt-phone__message-group .wqxt-phone__avatar { width: 28px; height: 28px; flex-basis: 28px; font-size: 10px; }
  .wqxt-phone__bubble { padding: 8px 10px; font-size: 13px; line-height: 1.6; }
  .wqxt-phone__composer { padding: 7px 10px 8px; gap: 7px; }
  .wqxt-phone__replies { gap: 6px; }
  .wqxt-phone__reply { min-height: 44px; padding-top: 7px; padding-bottom: 7px; font-size: 13px; }
  .wqxt-phone__input-row { display: none; }
  .wqxt-phone__call-content { padding: 18px 18px 13px; gap: 10px; }
  .wqxt-phone__call-identity { grid-template-columns: 82px minmax(0, 1fr); align-self: center; gap: 18px; text-align: left; }
  .wqxt-phone__call-portrait { width: 82px; height: 82px; font-size: 24px; }
  .wqxt-phone__call-copy { justify-items: start; gap: 5px; }
  .wqxt-phone__call-copy h2 { font-size: 20px; }
  .wqxt-phone__call-copy > span { font-size: 10px; }
  .wqxt-phone__call-duration { font-size: 12px; }
  .wqxt-phone__call-actions { gap: 14px; }
  .wqxt-phone__call-actions.is-incoming { grid-template-columns: repeat(2, 72px); }
  .wqxt-phone__call-actions.is-active { grid-template-columns: 70px; gap: 0; }
  .wqxt-phone__call-action { min-height: 72px; gap: 5px; font-size: 10px; }
  .wqxt-phone__call-action-icon { width: 50px; height: 50px; }
  .wqxt-phone__call-action-icon svg { width: 21px; height: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  .wqxt-phone__scrim,
  .wqxt-phone__device { transition-duration: .01ms; }
  .wqxt-phone__message-group.is-entering { animation: none; }
  .wqxt-phone__typing i { animation: none; opacity: .62; }
  .wqxt-phone__page--call.is-incoming .wqxt-phone__call-portrait::before,
  .wqxt-phone__page--call.is-incoming .wqxt-phone__call-portrait::after { animation: none; opacity: .35; }
}
.wqxt-phone__icon-button:disabled{opacity:.35;cursor:default}