.phone-fullscreen {
  background: #020609;
}

.phone-fullscreen .modal-backdrop {
  background: radial-gradient(circle at 50% 42%, rgba(20, 42, 54, .38), rgba(1, 4, 7, .94) 68%);
}

.phone-fullscreen-panel {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.phone-detail-view {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.phone-device-plane {
  position: relative;
  width: min(96vh, 96vw);
  aspect-ratio: 1;
  container-type: inline-size;
  filter: drop-shadow(0 2.2vh 3vh rgba(0, 0, 0, .72));
}

.phone-device-plane > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.phone-home-hotspot {
  position: absolute;
  top: 29.6%;
  width: 16%;
  height: 18.4%;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 18%;
  background: transparent;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.phone-home-hotspot.messages { left: 32.4%; }
.phone-home-hotspot.bank { left: 51.6%; }

.phone-home-hotspot:hover,
.phone-home-hotspot:focus-visible {
  border-color: rgba(159, 225, 255, .68);
  background: rgba(88, 188, 230, .12);
  box-shadow: 0 0 2.2cqw rgba(98, 202, 244, .32), inset 0 0 1.1cqw rgba(196, 239, 255, .18);
  outline: none;
}

.phone-app-window {
  position: absolute;
  left: 28.05%;
  top: 8.65%;
  width: 43.9%;
  height: 79.8%;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 5.7cqw;
  color: #edf4f7;
  background: linear-gradient(180deg, #101c24, #071016);
  font-family: "Galmuri14", sans-serif;
}

.phone-app-window header {
  display: flex;
  align-items: center;
  min-height: 15%;
  padding: 3.7cqw 4cqw 2.3cqw;
  border-bottom: 1px solid rgba(189, 216, 226, .15);
  background: rgba(5, 14, 20, .9);
}

.phone-app-window header button {
  flex: 0 0 auto;
  width: 6.5cqw;
  height: 6.5cqw;
  margin: 0 2.2cqw 0 0;
  padding: 0 0 .7cqw;
  border: 1px solid rgba(179, 220, 237, .35);
  border-radius: 50%;
  color: #d9f3ff;
  background: rgba(48, 105, 129, .28);
  font: 5cqw/1 "Galmuri14", sans-serif;
  cursor: pointer;
}

.phone-app-window header small,
.phone-app-window header h2 { display: block; margin: 0; }
.phone-app-window header small { color: #7f9ca8; font: 1.55cqw/1.3 "Galmuri11", sans-serif; letter-spacing: .08em; }
.phone-app-window header h2 { margin-top: .6cqw; color: #f4f9fb; font: 3.2cqw/1.2 "Galmuri14", sans-serif; }

.phone-message-list {
  height: 85%;
  overflow-y: auto;
  padding: 1.4cqw 0 6cqw;
}

.phone-message-list > button {
  position: relative;
  display: block;
  width: 100%;
  padding: 2.8cqw 4.5cqw 3cqw;
  border: 0;
  border-bottom: 1px solid rgba(177, 208, 220, .12);
  color: inherit;
  text-align: left;
  background: transparent;
  cursor: pointer;
}

.phone-message-list > button:hover,
.phone-message-list > button:focus-visible { background: rgba(70, 145, 176, .14); outline: none; }
.phone-message-list span { display: flex; justify-content: space-between; gap: 2cqw; align-items: baseline; }
.phone-message-list strong { color: #f1f6f8; font: 2.5cqw/1.35 "Galmuri14", sans-serif; }
.phone-message-list small { color: #77909a; font: 1.6cqw/1.3 "Galmuri11", sans-serif; }
.phone-message-list p { margin: 1.2cqw 0 0; color: #aebec5; font: 1.75cqw/1.65 "Galmuri14", sans-serif; overflow-wrap: anywhere; }
.phone-message-list em { position: absolute; right: 4.5cqw; bottom: 1.1cqw; color: #66818c; font: normal 1.35cqw/1 "Galmuri11", sans-serif; }

.phone-thread {
  height: 85%;
  box-sizing: border-box;
  padding: 5cqw 4.5cqw;
  background: linear-gradient(180deg, rgba(15, 29, 38, .96), rgba(8, 16, 22, .98));
}

.phone-thread time { display: block; margin-bottom: 3cqw; color: #728993; text-align: center; font: 1.55cqw/1.2 "Galmuri11", sans-serif; }
.phone-thread p {
  width: fit-content;
  max-width: 78%;
  margin: 0;
  padding: 2.5cqw 3cqw;
  border-radius: 2.8cqw;
  color: #f4f8fa;
  font: 2cqw/1.65 "Galmuri14", sans-serif;
  overflow-wrap: anywhere;
}
.phone-thread p.sent { margin-left: auto; border-bottom-right-radius: .7cqw; background: #245f7d; }
.phone-thread p.received { margin-right: auto; border-bottom-left-radius: .7cqw; background: #39474e; }
.phone-thread p + p { margin-top: 2.2cqw; }

.phone-account {
  margin: 4.5cqw 4cqw 2.7cqw;
  padding: 3.5cqw;
  border: 1px solid rgba(143, 190, 205, .18);
  border-radius: 2.4cqw;
  background: linear-gradient(145deg, #17313d, #0b2029);
}
.phone-account small,
.phone-account strong { display: block; }
.phone-account small { color: #8aa5af; font: 1.55cqw/1.4 "Galmuri11", sans-serif; }
.phone-account strong { margin-top: 2cqw; color: #eaf5f8; font: 3cqw/1.3 "Galmuri14", sans-serif; }

.phone-transfer-record {
  position: relative;
  margin: 0 4cqw;
  padding: 3.2cqw 3.4cqw 6cqw;
  border: 1px solid rgba(125, 184, 205, .18);
  border-radius: 2cqw;
  background: rgba(10, 26, 34, .9);
}
.phone-transfer-record time { color: #7e99a3; font: 1.45cqw/1.3 "Galmuri11", sans-serif; }
.phone-transfer-record h3 { margin: 1.5cqw 0 .6cqw; color: #f0f7f9; font: 2.6cqw/1.3 "Galmuri14", sans-serif; }
.phone-transfer-record p { margin: 0; color: #8fa5ae; font: 1.6cqw/1.4 "Galmuri14", sans-serif; }
.phone-transfer-record > strong { position: absolute; right: 3.4cqw; top: 5.1cqw; color: #77d4ef; font: 2.25cqw/1.3 "Galmuri14", sans-serif; }
.phone-transfer-record > span { position: absolute; left: 3.4cqw; bottom: 2.4cqw; color: #6fb58d; font: 1.45cqw/1.2 "Galmuri11", sans-serif; }

@media (prefers-reduced-motion: reduce) {
  .phone-home-hotspot { transition: none; }
}