.personal-qr-page {
  position: fixed;
  inset: 0;
  z-index: 90;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #ededed;
}
.personal-qr-page > header {
  border-bottom: 1px solid #e0e1e3;
}
.personal-qr-page-body {
  padding: 24px 16px calc(24px + var(--safe-bottom));
}
.personal-link-host {
  background: #ededed;
}
.me-subpage-body.personal-link-host {
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}
.personal-link-settings {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  color: #202124;
}
.personal-link-card {
  background: #fff;
  padding: 24px 20px 20px;
}
.personal-link-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(100%, 224px);
  margin: 0 auto 16px;
  overflow-wrap: anywhere;
}
.personal-link-identity > .avatar {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 6px;
  background-color: #ededed;
  color: #555;
}
.personal-link-identity > strong {
  font-size: 17px;
  font-weight: 600;
}
.personal-link-qr {
  display: block;
  width: min(100%, 224px);
  height: auto;
  margin: 0 auto;
  image-rendering: pixelated;
}
.personal-link-settings .personal-link-caption {
  margin: 8px 0 0;
  text-align: center;
  color: #666;
  font-size: 13px;
  line-height: 1.6;
}
.personal-link-group {
  margin: 10px 0 0;
  padding: 0 20px;
  background: #fff;
}
.personal-link-settings .personal-link-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 12px 0;
  border: 0;
  border-radius: 0;
  background: #fff;
  color: #202124;
  font: inherit;
  font-size: 15px;
  text-align: left;
}
.personal-link-group > * + * {
  border-top: 1px solid #eee;
}
.personal-link-group > .personal-link-row ~ .personal-link-row {
  border-top: 1px solid #eee;
}
button.personal-link-row:not(:disabled):active {
  background: #f5f5f5;
}
.personal-link-row > span + span {
  color: #666;
  font-size: 13px;
}
.personal-link-copy {
  width: 100%;
  margin: 8px 0;
}
.personal-link-row > svg {
  flex: none;
  width: 16px;
  height: 16px;
  color: #777;
}
.personal-link-chevron {
  width: 7px;
  height: 7px;
  margin-right: 3px;
  border-right: 1px solid #777;
  border-bottom: 1px solid #777;
  transform: rotate(-45deg);
}
[aria-expanded="true"] > .personal-link-chevron {
  transform: rotate(45deg);
}
.personal-link-details.is-expanded {
  padding-bottom: 14px;
}
.personal-link-details > .personal-link-url {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #f5f5f5;
  color: #333;
  font-size: 16px;
  user-select: text;
}
.personal-link-settings .personal-link-help {
  margin: 10px 20px 0;
  color: #666;
  font-size: 13px;
  line-height: 1.7;
}
.personal-link-confirm {
  padding: 14px 0 16px;
}
.personal-link-confirm .button-row {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 12px;
}
.personal-link-settings button:disabled {
  opacity: .5;
}
.personal-link-settings button:focus-visible {
  outline: 2px solid #555;
  outline-offset: -2px;
}

.modal:has(.personal-link-dialog-body) {
  width: min(620px, calc(100vw - 28px));
}
.personal-link-dialog-body.personal-link-host {
  container-type: inline-size;
  background: #fff;
}
.personal-link-dialog-body .personal-link-group {
  border-top: 1px solid #eee;
}
@container (min-width: 440px) {
  .personal-link-dialog-body .personal-link-settings:has(.personal-link-card) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 20px;
    align-items: start;
    max-width: none;
  }
  .personal-link-dialog-body .personal-link-card {
    grid-column: 1;
    grid-row: 1 / span 5;
    padding: 18px 16px;
    border-right: 1px solid #eee;
  }
  .personal-link-dialog-body .personal-link-settings > :not(.personal-link-card) {
    grid-column: 2;
  }
  .personal-link-dialog-body .personal-link-group {
    padding-inline: 8px;
  }
  .personal-link-dialog-body .personal-link-help {
    margin-inline: 8px;
  }
}


.toast.copy-feedback {
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: min(380px, calc(100vw - 32px));
  max-width: none;
  padding: 0;
  overflow: hidden;
  background: #fff;
  color: #303640;
  border: 1px solid #e5e8ec;
  border-radius: 14px;
  box-shadow: 0 20px 90px #2225;
  animation: copy-feedback-enter .16s ease-out, copy-feedback-leave .15s 1.6s ease-in forwards;
}
html.keyboard-open .toast.copy-feedback {
  top: calc(var(--vv-top) + var(--vv-height) / 2);
}
.copy-feedback > header {
  padding: 18px 22px;
  border-bottom: 1px solid #eceff2;
  text-align: left;
  font-size: 15px;
  font-weight: 600;
}
.copy-feedback-body {
  padding: 10px 14px 20px;
  background: #f8f9fa;
}
.copy-feedback-body > p {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.6;
  font-weight: 500;
}
.copy-feedback .copy-feedback-pad {
  display: grid;
  place-items: center;
  color: #fff;
  animation: copy-feedback-pad .55s ease-out forwards;
}
.copy-feedback-pad svg {
  width: 23px;
  height: 23px;
  stroke: currentColor;
  stroke-width: 1.6;
  fill: none;
}
.copy-feedback-chain {
  position: absolute;
  top: 54px;
  left: calc(50% - 10px);
  width: 20px;
  height: 14px;
  color: #fff;
  animation: copy-feedback-chain .45s ease-in-out forwards;
}
.copy-feedback-chain::before, .copy-feedback-chain::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 6px;
  border: 1.5px solid currentColor;
  border-radius: 8px;
  transform: rotate(-38deg);
}
.copy-feedback-chain::before { left: 0; top: 6px; }
.copy-feedback-chain::after { right: 0; top: 1px; }
.copy-feedback .copy-feedback-result {
  animation: reminder-delivered .15s .4s ease-out forwards;
}
@keyframes copy-feedback-enter { from { opacity: 0; translate: 0 8px; } }
@keyframes copy-feedback-leave { to { opacity: 0; } }
@keyframes copy-feedback-pad {
  0%, 54% { opacity: 1; scale: 1; }
  67% { opacity: 1; scale: .92; }
  88%, 100% { opacity: 0; scale: 1; }
}
@keyframes copy-feedback-chain {
  0% { opacity: 0; translate: -30px -22px; color: #292d33; }
  23% { opacity: 1; color: #292d33; }
  78% { opacity: 1; translate: 0 0; color: #fff; }
  100% { opacity: 0; translate: 0 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .copy-feedback .copy-feedback-pad, .copy-feedback-chain { display: none; }
  .copy-feedback .copy-feedback-result { opacity: 1; transform: none; }
}


.toast.friend-feedback{animation:copy-feedback-enter .16s ease-out,copy-feedback-leave .15s 2s ease-in forwards}
.friend-flight-stage{position:relative;display:grid;place-items:center;width:164px;height:88px;margin:0 auto 8px}
.friend-flight-stage::before{content:'';position:absolute;inset:50% 10px auto;border-top:1px dashed #a9b0b8}
.friend-flight-plane,.friend-flight-result{position:absolute;display:grid;place-items:center;border-radius:50%}
.friend-flight-plane{width:32px;height:32px;background:#e7eaf0;color:#343b46}
.friend-flight-left{left:2px;top:15px}
.friend-flight-right{right:2px;bottom:15px;rotate:180deg}
.friend-flight-result{width:44px;height:44px;background:#292d35;color:#fff;box-shadow:0 0 0 7px #f8f9fa}
.friend-flight-stage svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7}
.friend-flight-result svg{width:22px;height:22px}
@media(prefers-reduced-motion:no-preference){
 .friend-flight-left{--friend-start:-14px -4px;--friend-cross:55px 13px}
 .friend-flight-right{--friend-start:14px 4px;--friend-cross:-55px -13px}
 .friend-flight-plane{animation:friend-flight-in .36s ease-out both}
 .friend-flight-result{animation:friend-flight-check .36s ease-out both}
}
@keyframes friend-flight-in{
 from{translate:var(--friend-start);opacity:.4}
 72%{translate:var(--friend-cross);opacity:1}
 to{translate:0;opacity:1}
}
@keyframes friend-flight-check{
 0%,55%{scale:.86;opacity:.45}
 to{scale:1;opacity:1}
}