/* Phone layout and typography follow the supplied Calls, Contacts and Keypad references. */
.phone-native-app { display: flex; padding-top: 56px; background: #fff; color: #000; font-family: -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Helvetica Neue",sans-serif; }
.phone-native-app button:disabled { opacity: 1; cursor: default; }
.phone-native-header { position: relative; z-index: 8; display: flex; align-items: flex-start; justify-content: space-between; flex-shrink: 0; height: 58px; padding: 3px 16px 0; background: #ffffffd9; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.phone-native-header h1 { position: absolute; top: 3px; left: 82px; right: 82px; height: 44px; display: grid; place-items: center; margin: 0; color: #000; font-size: 17px; line-height: 22px; font-weight: 750; letter-spacing: -.45px; pointer-events: none; }
.phone-native-app.phone-list-app { padding-top: 0; }
.phone-list-app .phone-native-header { position: absolute; top: 56px; left: 0; right: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.phone-top-material { position: absolute; z-index: 4; top: 0; left: 0; right: 0; height: 128px; pointer-events: none; background: #ffffffad; backdrop-filter: blur(17px); -webkit-backdrop-filter: blur(17px); mask-image: linear-gradient(#000 0%,#000 85%,transparent 100%); -webkit-mask-image: linear-gradient(#000 0%,#000 85%,transparent 100%); }
.phone-native-app .phone-glass { border: .8px solid #fff; background: #ffffffbc; box-shadow: inset 0 1px 1px #fff,0 8px 30px #16181c08; backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); }
.phone-native-header>.phone-edit-button { flex: 0 0 62px; width: 62px; height: 44px; border-radius: 25px; font-size: 17px; line-height: 22px; font-weight: 750; letter-spacing: -.5px; }
.phone-native-header>.phone-filter-button,.phone-header-back,.phone-add-contact { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; color: #18191b; }
.phone-native-header .icon { width: 24px; height: 24px; }
.phone-native-header .phone-header-back>.icon { width: 25px; height: 25px; }
.phone-native-app .phone-call-list { position: relative; inset: auto; z-index: 1; flex: 1; padding: 0 0 120px; }
.phone-native-app.phone-list-app .phone-call-list,.phone-native-app.phone-list-app .phone-contacts-list { padding-top: 114px; scroll-padding-top: 114px; }
.phone-list-app .phone-search-panel { position: absolute; top: 110px; left: 0; right: 0; }
.phone-native-app.phone-list-app.is-searching .phone-call-list,.phone-native-app.phone-list-app.is-searching .phone-contacts-list { padding-top: 164px; scroll-padding-top: 164px; }
.phone-list-app.is-searching .phone-top-material { height: 178px; }
.phone-native-app .phone-call-row { grid-template-columns: 50px minmax(0,1fr) auto 44px; gap: 10px; min-height: 74px; padding: 11px 16px; }
.phone-native-app .phone-call-row::after { left: 76px; right: 16px; background: #d8d8dc; }
.phone-native-app .phone-row-avatar,.phone-native-app .phone-row-avatar>.avatar { width: 50px; height: 50px; }
.phone-native-app .phone-row-avatar>.avatar { font-size: 24px; font-weight: 650; }
.phone-native-app .phone-call-main strong { font-size: 17px; line-height: 22px; font-weight: 750; letter-spacing: -.45px; }
.phone-native-app .phone-call-row.is-unsaved .phone-call-main strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 17px; font-weight: 750; letter-spacing: -.45px; font-variant-numeric: tabular-nums; }
.phone-native-app .phone-call-main>span { gap: 3px; color: #8e8e93; font-size: 15px; line-height: 20px; font-weight: 600; letter-spacing: -.4px; }
.phone-native-app .phone-call-main>span .icon { width: 12px; height: 12px; }
.phone-native-app .phone-call-row>time { color: #8e8e93; font-family: -apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif; font-size: 14.5px; line-height: 20px; font-weight: 600; letter-spacing: -.4px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.phone-call-button { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: #0088ff; background: #f3f3f5; }
.phone-call-button>.icon { width: 19px; height: 19px; }
.phone-native-app .phone-call-row.is-editing { grid-template-columns: 22px 40px minmax(0,1fr) auto 36px; gap: 7px; padding-left: 12px; }
.phone-native-app .phone-call-row.is-editing .phone-row-avatar,.phone-native-app .phone-call-row.is-editing .avatar { width: 40px; height: 40px; font-size: 21px; }
.phone-native-app .phone-call-row.is-editing .phone-call-main strong { font-size: 15px; }
.phone-native-app .phone-call-row.is-editing .phone-call-button { width: 36px; height: 36px; }
.phone-native-app .phone-call-row.is-editing::after { left: 88px; }
.phone-native-app .phone-filter-menu { top: 109px; font-weight: 600; }
.phone-search-panel { z-index: 7; display: flex; align-items: center; flex-shrink: 0; gap: 10px; padding: 0 16px 10px; }
.phone-search-panel .search-field { flex: 1; margin: 0; min-width: 0; height: 39px; padding: 8px 12px; border-radius: 22px; background: #efeff1; }
.phone-search-panel .search-field input { font-size: 16px; }
.phone-search-panel>button { color: #007aff; font-size: 15px; font-weight: 600; }
.phone-native-app .phone-contacts-list { flex: 1; padding: 0 16px 120px 18px; scroll-padding-top: 6px; }
.phone-my-card { display: flex; align-items: center; gap: 10px; min-height: 67px; padding: 8px 0 12px; }
.phone-my-card>.avatar { width: 40px; height: 40px; font-size: 22px; font-weight: 650; }
.phone-my-card>div { min-width: 0; }
.phone-my-card strong { display: block; color: #000; font-size: 17px; line-height: 23px; font-weight: 750; letter-spacing: -.45px; }
.phone-my-card>div>span { display: block; color: #8e8e93; font-size: 15px; line-height: 20px; font-weight: 600; }
.phone-contact-group h2 { height: 34px; margin: 0; padding: 0; border-bottom: .5px solid #d8d8dc; color: #8e8e93; font-size: 13px; line-height: 29px; font-weight: 650; }
.phone-native-app .phone-contact-group .contact-row { position: relative; gap: 10px; min-height: 60px; padding: 10px 14px 10px 0; border: 0; }
.phone-contact-group .contact-row::after { content: ""; position: absolute; left: 50px; right: 0; bottom: 0; height: .5px; background: #d8d8dc; }
.phone-native-app .phone-contact-group .avatar { width: 40px; height: 40px; font-size: 22px; font-weight: 650; }
.phone-native-app .phone-contact-group strong { font-size: 17px; line-height: 23px; font-weight: 700; letter-spacing: -.4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phone-contact-total { margin: 0; padding: 24px 0 15px; text-align: center; font-size: 17px; line-height: 24px; font-weight: 750; letter-spacing: -.5px; }
.phone-contact-index { position: absolute; z-index: 9; top: 155px; right: 2px; bottom: 125px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; width: 12px; color: #0088ff; font-size: 10px; line-height: 1; font-weight: 750; }
.phone-contact-index>* { display: grid; place-items: center; flex: 1; min-height: 0; max-height: 14px; width: 12px; }
.phone-native-app .phone-bottom-fade { z-index: 3; height: 122px; background: linear-gradient(transparent,#ffffffde 47%,#fff 95%); }
.phone-bottom-bar { position: absolute; z-index: 6; left: 20px; right: 20px; bottom: 20px; display: flex; align-items: center; gap: 7px; height: 62px; }
.phone-native-app .phone-tabs { position: static; inset: auto; display: flex; align-items: stretch; flex: 1; min-width: 0; height: 62px; padding: 3px; border-radius: 34px; border: .8px solid #fff; background: #ffffffc9; box-shadow: inset 0 1px 1px #fff,0 8px 30px #16181c08; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
.phone-native-app .phone-tabs button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 56px; gap: 3px; border-radius: 30px; font-size: 10.3px; line-height: 13px; font-weight: 750; letter-spacing: -.5px; color: #18191b; }
.phone-native-app .phone-tabs button.active { color: #0088ff; background: #e8e8eacc; box-shadow: none; }
.phone-native-app .phone-tabs .icon { width: 25px; height: 25px; }
.phone-search-button { display: grid; place-items: center; flex: 0 0 62px; width: 62px; height: 62px; border-radius: 50%; color: #18191b; }
.phone-search-button>.icon { width: 27px; height: 27px; }
.phone-native-app.phone-keypad-app { --dial-key-size: min(78px,20vw,9.6dvh); --dial-gap: clamp(12px,5.5vw,22px); }
.phone-native-app .phone-keypad-scroll { display: flex; flex-direction: column; align-items: center; padding: 0 20px 122px; }
.phone-keypad-content { flex-shrink: 0; width: 100%; margin-top: auto; }
.phone-native-app .dial-number { width: 100%; height: 64px; min-height: 64px; margin: 0 0 10px; padding: 0; color: #000; font-size: 31px; line-height: 40px; font-weight: 650; letter-spacing: -.8px; font-variant-numeric: tabular-nums; }
.phone-native-app .keypad { width: calc(var(--dial-key-size)*3 + var(--dial-gap)*2); margin: 0 auto; padding: 0; gap: var(--dial-gap); }
.phone-native-app .key { width: var(--dial-key-size); height: var(--dial-key-size); border-radius: 50%; line-height: 1; color: #000; }
.phone-native-app .key-digit { display: block; font-size: calc(var(--dial-key-size)*.49); line-height: 1.05; font-weight: 780; letter-spacing: -1px; }
.phone-native-app .key small { display: block; min-height: 12px; font-size: 10.5px; line-height: 12px; font-weight: 800; letter-spacing: 1.5px; }
.phone-native-app .key[data-key="*"] .key-digit { font-size: calc(var(--dial-key-size)*.65); line-height: .82; padding-top: 11px; }
.phone-native-app .key[data-key="#"] .key-digit { font-size: calc(var(--dial-key-size)*.5); padding-top: 8px; }
.phone-native-app .key[data-key="*"] small,.phone-native-app .key[data-key="#"] small { display: none; }
.phone-native-app .dial-actions { position: relative; width: calc(var(--dial-key-size)*3 + var(--dial-gap)*2); height: var(--dial-key-size); margin: 18px auto 0; gap: 0; }
.phone-native-app .call-green { width: var(--dial-key-size); height: var(--dial-key-size); background: #2bce4d; border: .7px solid #ffffff70; box-shadow: inset 0 1px 1px #ffffff66; }
.phone-native-app .call-green>.icon { width: 34px; height: 34px; }
.phone-native-app .dial-delete { position: absolute; top: 0; right: 0; display: grid; place-items: center; width: var(--dial-key-size); height: var(--dial-key-size); margin: 0; color: #18191b; }
.phone-native-app .dial-delete>.icon { width: 25px; height: 25px; }
.phone-native-app.phone-contact-app { padding-top: 0; color: #fff; background: radial-gradient(ellipse at 100% 5%,#b9dce0,transparent 66%),radial-gradient(ellipse at 0 0,#ded4eb,transparent 64%),linear-gradient(#b9becf,#767d9b 55%,#222946); }
.phone-profile-header { position: absolute; top: 59px; left: 16px; right: 16px; z-index: 10; display: flex; align-items: center; justify-content: space-between; height: 44px; color: #fff; }
.phone-profile-header>button { height: 44px; min-width: 62px; padding: 0 14px; border-radius: 28px; border: .8px solid #ffffff9e; background: #71879a26; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); color: #fff; font-size: 17px; font-weight: 700; }
.phone-profile-header>.phone-profile-back { display: grid; place-items: center; min-width: 44px; width: 44px; padding: 0; border-radius: 50%; }
.phone-profile-back>.icon { width: 26px; height: 26px; }
.phone-profile-header>strong { position: absolute; left: 60px; right: 76px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; opacity: 0; font-size: 25px; font-weight: 750; letter-spacing: -.7px; pointer-events: none; transition: opacity .15s; }
.phone-contact-app.is-collapsed .phone-profile-header>strong { opacity: 1; }
.phone-contact-app .phone-profile-scroll { padding: 0 16px 125px; }
.phone-contact-app .contact-profile { padding: 135px 0 0; text-align: center; }
.phone-contact-app .contact-profile>.avatar { width: 182px; height: 182px; margin: 0 auto; border: 1px solid #ffffff75; background: linear-gradient(145deg,#ccd0dc6e,#8699b35c); box-shadow: inset 0 2px 2px #ffffffc4,inset 2px -2px 4px #52637370; font-size: 100px; font-weight: 350; }
.phone-contact-app .contact-profile h2 { margin: 30px 0 20px; color: #fff; font-size: 38px; line-height: 48px; font-weight: 750; letter-spacing: -.8px; overflow-wrap: anywhere; }
.phone-contact-app .contact-profile.is-long-name h2 { font-size: 28px; line-height: 38px; }
.phone-contact-app .contact-actions { gap: 12px; margin-bottom: 15px; }
.phone-contact-app .contact-action { display: grid; place-items: center; flex-shrink: 0; min-width: 0; width: 64px; height: 64px; padding: 0; border-radius: 50%; border: .8px solid #ffffff90; background: #ffffff20; color: #fff; }
.phone-contact-app .contact-action:disabled { color: #ffffff40; }
.phone-contact-app .contact-action>.icon { width: 27px; height: 27px; }
.phone-profile-card { margin: 0 0 12px; padding: 15px 16px; border-radius: 27px; background: #c4c1ff32; color: #fff; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.phone-contact-poster { display: flex; align-items: center; gap: 9px; min-height: 74px; }
.phone-contact-poster>.avatar { width: 44px; height: 44px; font-size: 25px; font-weight: 650; }
.phone-contact-poster>strong { flex: 1; text-align: left; font-size: 16.5px; line-height: 23px; font-weight: 650; letter-spacing: -.4px; }
.phone-contact-poster>.icon { width: 17px; height: 21px; }
.phone-contact-number { display: flex; align-items: center; justify-content: space-between; width: 100%; text-align: left; padding: 0 0 14px; border-bottom: .5px solid #ffffff40; color: #fff; }
.phone-contact-number>span>strong,.phone-contact-number>span>span { display: block; font-size: 17px; line-height: 22px; font-weight: 650; letter-spacing: -.3px; }
.phone-contact-number>.icon { width: 17px; height: 17px; }
.phone-contact-memo { min-height: 91px; padding-top: 14px; text-align: left; font-size: 17px; line-height: 24px; font-weight: 600; }
.phone-profile-options { padding-top: 0; padding-bottom: 0; }
.phone-profile-options>button { display: block; width: 100%; min-height: 52px; padding: 12px 0; text-align: left; color: #fff; font-size: 17px; line-height: 24px; font-weight: 600; }
.phone-profile-options>button+button { border-top: .5px solid #ffffff40; }
.phone-contact-app .phone-tabs,.phone-contact-app .phone-search-button { background: #ddd6fb80; border-color: #ffffffb0; }
.phone-contact-app.is-collapsed .phone-tabs,.phone-contact-app.is-collapsed .phone-search-button { background: #20234180; border-color: #7875bfa0; color: #fff; }
.phone-contact-app.is-collapsed .phone-tabs button { color: #fff; }
.phone-contact-app.is-collapsed .phone-tabs button.active { color: #19b3ff; background: #a2a0d65e; }
@media (max-height:650px) {
  .phone-bottom-bar { bottom: 14px; height: 58px; }
  .phone-native-app .phone-tabs,.phone-search-button { height: 58px; }
  .phone-search-button { flex-basis: 58px; width: 58px; }
  .phone-native-app .phone-tabs button { height: 52px; }
  .phone-native-app .phone-keypad-scroll { padding-bottom: 105px; }
  .phone-contact-index { top: 140px; bottom: 107px; font-size: 9px; }
}
@media (max-width:350px) {
  .phone-bottom-bar { left: 13px; right: 13px; }
  .phone-native-app .phone-call-row { grid-template-columns: 44px minmax(0,1fr) auto 38px; gap: 8px; padding-left: 14px; padding-right: 14px; }
  .phone-native-app .phone-row-avatar,.phone-native-app .phone-row-avatar>.avatar { width: 44px; height: 44px; font-size: 22px; }
  .phone-native-app .phone-call-main strong { font-size: 16px; }
  .phone-native-app .phone-call-row.is-unsaved .phone-call-main strong { font-size: 13px; }
  .phone-native-app .phone-call-row>time { font-size: 12px; }
  .phone-call-button { width: 38px; height: 38px; }
  .phone-native-app .phone-call-row::after { left: 66px; right: 14px; }
}