From 67edb404c6c24721daf1c72a8be7d6954d2a4302 Mon Sep 17 00:00:00 2001
From: "smx.pusha" <139338836+smxpusha@users.noreply.github.com>
Date: Tue, 11 Aug 2026 12:51:41 +0200
Subject: [PATCH] ENH - expand phone app experience

---
 frontend/src/App.vue                       |   11 +
 frontend/src/assets/main.css               |   41 +
 frontend/src/components/PhoneStatusBar.vue |   36 +-
 frontend/src/stores/calls.test.ts          |   50 +
 frontend/src/stores/calls.ts               |   50 +-
 frontend/src/stores/phone.ts               |   52 +
 frontend/src/types/phone.ts                |    5 +
 frontend/src/views/apps/BillingApp.vue     |   18 +-
 frontend/src/views/apps/CameraApp.vue      |   56 +-
 frontend/src/views/apps/MessagesApp.vue    |    2 +
 frontend/src/views/apps/PhoneApp.vue       | 3790 ++++++++++++++++++--
 frontend/testserver/index.cjs              |  609 +++-
 sky_phone/config/config.lua                |    1 +
 sky_phone/config/locales/en.lua            |   14 +-
 sky_phone/source/client/main.lua           |    2 +
 sky_phone/source/server/calls.lua          |  137 +-
 sky_phone/source/server/db_migrate.lua     |    6 +
 sky_phone/sql/install.sql                  |   18 +-
 18 files changed, 4548 insertions(+), 350 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index acb24ba..996483d 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -226,6 +226,9 @@ const notifications = useNotificationsStore()
 const route = useRoute()
 const router = useRouter()
 const isAppRoute = computed(() => route.name === 'app')
+const showActiveCallReturn = computed(
+  () => Boolean(calls.activeCall) && route.params.appId !== 'phone',
+)
 const appTransitionName = computed(() =>
   route.query.transition === 'app-switch' ? 'app-switch' : 'app-window',
 )
@@ -818,6 +821,12 @@ function lockPhone(): void {
   isLocked.value = true
 }
 
+function returnToActiveCall(): void {
+  if (!calls.activeCall) return
+  controlCenterOpened.value = false
+  void router.push('/apps/phone')
+}
+
 function unlockCamera(): void {
   if (phone.security.enabled) {
     pendingUnlockRoute.value = '/apps/camera'
@@ -1044,8 +1053,10 @@ onBeforeUnmount(() => {
               >
                 <PhoneStatusBar
                   v-if="!isLocked"
+                  :active-call-return="showActiveCallReturn"
                   :control-center-opened="controlCenterOpened"
                   lockable
+                  @active-call="returnToActiveCall"
                   @control-center="toggleControlCenter"
                   @lock="lockPhone"
                 />
diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index 6006bb2..0ec360e 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -467,6 +467,47 @@ button {
   cursor: pointer;
   pointer-events: auto;
 }
+.phone-status-bar__time-button--active-call {
+  isolation: isolate;
+  text-shadow: none;
+}
+.phone-status-bar__time-button--active-call::before {
+  position: absolute;
+  z-index: -1;
+  top: 19px;
+  left: calc(50% - 3px);
+  width: 90px;
+  height: 30px;
+  border-radius: 15px;
+  background: #34c759;
+  box-shadow: 0 2px 8px #0b6f2b66;
+  animation: phone-active-call-pill-in 220ms cubic-bezier(0.22, 1, 0.36, 1);
+  content: '';
+  transform-origin: center;
+  transform: translateX(-50%);
+  transition: transform 140ms ease;
+}
+.phone-status-bar__time-button--active-call:active::before {
+  transform: translateX(-50%) scale(0.94);
+}
+.phone-status-bar__active-call-icon {
+  position: absolute;
+  top: 27px;
+  left: calc(50% - 39px);
+  width: 13px;
+  height: 13px;
+  stroke-width: 2.5;
+}
+@keyframes phone-active-call-pill-in {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) scale(0.82);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-50%) scale(1);
+  }
+}
 .phone-status-bar__indicators {
   position: absolute;
   top: 0;
diff --git a/frontend/src/components/PhoneStatusBar.vue b/frontend/src/components/PhoneStatusBar.vue
index 78d6706..99c7902 100644
--- a/frontend/src/components/PhoneStatusBar.vue
+++ b/frontend/src/components/PhoneStatusBar.vue
@@ -1,17 +1,23 @@
 <script setup lang="ts">
+import { PhoneCall } from 'lucide-vue-next'
 import { onBeforeUnmount, onMounted, ref } from 'vue'
 import PhoneStatusIndicators from '@/components/PhoneStatusIndicators.vue'
 import { usePhoneStore } from '@/stores/phone'
 
 const phone = usePhoneStore()
-withDefaults(
-  defineProps<{ controlCenterOpened?: boolean; lockable?: boolean }>(),
+const props = withDefaults(
+  defineProps<{
+    activeCallReturn?: boolean
+    controlCenterOpened?: boolean
+    lockable?: boolean
+  }>(),
   {
+    activeCallReturn: false,
     controlCenterOpened: false,
     lockable: false,
   },
 )
-const emit = defineEmits<{ controlCenter: []; lock: [] }>()
+const emit = defineEmits<{ activeCall: []; controlCenter: []; lock: [] }>()
 const time = ref('')
 let intervalId: number | undefined
 
@@ -23,6 +29,14 @@ function updateTime(): void {
   }).format(new Date())
 }
 
+function handleTimeClick(): void {
+  if (props.activeCallReturn) {
+    emit('activeCall')
+    return
+  }
+  emit('lock')
+}
+
 onMounted(() => {
   updateTime()
   intervalId = window.setInterval(updateTime, 30_000)
@@ -38,10 +52,22 @@ onBeforeUnmount(() => {
     <button
       v-if="lockable"
       class="phone-status-bar__time phone-status-bar__time-button"
+      :class="{
+        'phone-status-bar__time-button--active-call': activeCallReturn,
+      }"
       type="button"
-      :aria-label="phone.t('LockScreen.label')"
-      @click.stop="emit('lock')"
+      :aria-label="
+        phone.t(
+          activeCallReturn ? 'Apps.phone.returnToCall' : 'LockScreen.label',
+        )
+      "
+      @click.stop="handleTimeClick"
     >
+      <PhoneCall
+        v-if="activeCallReturn"
+        class="phone-status-bar__active-call-icon"
+        aria-hidden="true"
+      />
       <time>{{ time }}</time>
     </button>
     <time v-else class="phone-status-bar__time">{{ time }}</time>
diff --git a/frontend/src/stores/calls.test.ts b/frontend/src/stores/calls.test.ts
index e737010..2b5c16c 100644
--- a/frontend/src/stores/calls.test.ts
+++ b/frontend/src/stores/calls.test.ts
@@ -68,4 +68,54 @@ describe('calls store', () => {
     expect(calls.activeCall).toBeNull()
     expect(nuiCall).toHaveBeenCalledWith('calls:recents')
   })
+
+  it('blocks the active caller and closes the call screen', async () => {
+    const calls = useCallsStore()
+    calls.applyCallState({
+      direction: 'incoming',
+      id: 'call-3',
+      otherNumber: '5551110025',
+      startedAt: 1,
+      state: 'ringing',
+    })
+
+    const response = await calls.blockNumber('5551110025')
+
+    expect(response.success).toBe(true)
+    expect(nuiCall).toHaveBeenCalledWith('calls:block', {
+      phoneNumber: '5551110025',
+    })
+    expect(calls.activeCall).toBeNull()
+    expect(nuiCall).toHaveBeenCalledWith('calls:recents')
+  })
+
+  it('updates a contact favorite and refreshes the contact list', async () => {
+    vi.mocked(nuiCall)
+      .mockResolvedValueOnce({
+        success: true,
+        data: { favorite: true, id: 'contact-alex' },
+      })
+      .mockResolvedValueOnce({
+        success: true,
+        data: [
+          {
+            favorite: true,
+            id: 'contact-alex',
+            name: 'Alex Rivera',
+            phone_number: '5551110001',
+          },
+        ],
+      })
+    const calls = useCallsStore()
+
+    const response = await calls.setContactFavorite('contact-alex', true)
+
+    expect(response.success).toBe(true)
+    expect(nuiCall).toHaveBeenNthCalledWith(1, 'contacts:favorite', {
+      favorite: true,
+      id: 'contact-alex',
+    })
+    expect(nuiCall).toHaveBeenNthCalledWith(2, 'contacts:list')
+    expect(calls.contacts[0]?.favorite).toBe(true)
+  })
 })
diff --git a/frontend/src/stores/calls.ts b/frontend/src/stores/calls.ts
index 992ad86..5ac0ca3 100644
--- a/frontend/src/stores/calls.ts
+++ b/frontend/src/stores/calls.ts
@@ -35,8 +35,11 @@ export const useCallsStore = defineStore('calls', () => {
   }
 
   async function saveContact(contact: {
+    avatarMediaId?: number | null
     id?: string
     name: string
+    notes?: string
+    organization?: string
     phoneNumber: string
   }): Promise<NuiResponse<PhoneContact>> {
     const response = await nuiCall<PhoneContact>('contacts:save', contact)
@@ -58,17 +61,56 @@ export const useCallsStore = defineStore('calls', () => {
 
   async function answer(): Promise<NuiResponse> {
     if (!activeCall.value) return { success: false, error: 'call_not_found' }
-    return nuiCall('calls:answer', { id: activeCall.value.id })
+    const response = await nuiCall('calls:answer', { id: activeCall.value.id })
+    if (response.success && activeCall.value) {
+      activeCall.value = {
+        ...activeCall.value,
+        answeredAt: activeCall.value.answeredAt ?? Date.now(),
+        state: 'connected',
+      }
+    }
+    return response
   }
 
   async function decline(): Promise<boolean> {
     if (!activeCall.value) return false
-    return (await nuiCall('calls:decline', { id: activeCall.value.id })).success
+    const response = await nuiCall('calls:decline', { id: activeCall.value.id })
+    if (response.success) activeCall.value = null
+    return response.success
+  }
+
+  async function setContactFavorite(
+    id: string,
+    favorite: boolean,
+  ): Promise<NuiResponse<{ favorite: boolean; id: string }>> {
+    const response = await nuiCall<{ favorite: boolean; id: string }>(
+      'contacts:favorite',
+      { favorite, id },
+    )
+    if (response.success) await loadContacts()
+    return response
   }
 
   async function hangup(): Promise<boolean> {
     if (!activeCall.value) return false
-    return (await nuiCall('calls:hangup', { id: activeCall.value.id })).success
+    const response = await nuiCall('calls:hangup', { id: activeCall.value.id })
+    if (response.success) {
+      activeCall.value = null
+      await loadRecents()
+    }
+    return response.success
+  }
+
+  async function blockNumber(phoneNumber: string): Promise<NuiResponse> {
+    const response = await nuiCall('calls:block', { phoneNumber })
+    if (
+      response.success &&
+      activeCall.value?.otherNumber === phoneNumber
+    ) {
+      activeCall.value = null
+      await loadRecents()
+    }
+    return response
   }
 
   function applyCallState(call: PhoneCall): void {
@@ -95,6 +137,7 @@ export const useCallsStore = defineStore('calls', () => {
     answer,
     applyCallState,
     bootstrap,
+    blockNumber,
     contacts,
     decline,
     deleteContact,
@@ -104,5 +147,6 @@ export const useCallsStore = defineStore('calls', () => {
     loadRecents,
     recents,
     saveContact,
+    setContactFavorite,
   }
 })
diff --git a/frontend/src/stores/phone.ts b/frontend/src/stores/phone.ts
index e9288b9..14cb968 100644
--- a/frontend/src/stores/phone.ts
+++ b/frontend/src/stores/phone.ts
@@ -1007,6 +1007,7 @@ const defaultLocales: LocaleTree = {
       addContact: 'Add Contact',
       contactSaved: 'Contact saved',
       removeContact: 'Remove Contact',
+      returnToCall: 'Return to Call',
       block: 'Block User',
       unblock: 'Unblock User',
       clearChat: 'Clear Chat',
@@ -1164,13 +1165,59 @@ const defaultLocales: LocaleTree = {
       noSim: 'No SIM',
       noSimBody: 'Insert a SIM card in Settings to make calls.',
       noRecents: 'No Recent Calls',
+      allCalls: 'All',
+      missedCalls: 'Missed',
+      searchRecents: 'Search Calls',
+      contactDetails: 'Contact Details',
+      unknownCaller: 'Unknown Caller',
+      callHistory: 'Call History',
+      noCallHistory: 'No calls with this number yet.',
       noContacts: 'No Contacts',
+      favorites: 'Favorites',
       searchContacts: 'Search Contacts',
+      myCard: 'My Card',
+      myNumber: 'My Number',
+      device: 'Device',
+      contactIndex: 'Contact Index',
       addContact: 'New Contact',
+      newContact: 'New',
       editContact: 'Edit Contact',
       contactName: 'Name',
+      firstName: 'First Name',
+      lastName: 'Last Name',
+      companyOrGroup: 'Company or Group',
       phoneNumber: 'Phone Number',
+      choosePhoto: 'Choose Contact Photo',
+      chooseGallery: 'Gallery',
+      takePhoto: 'Camera',
+      removePhoto: 'Remove Photo',
       call: 'Call',
+      message: 'Message',
+      video: 'Video',
+      mail: 'Mail',
+      defaultLabel: 'Default',
+      privateLabel: 'Private',
+      contactCard: 'Contact Card',
+      removeContact: 'Remove Contact',
+      mobile: 'Mobile',
+      messagesProfile: 'Messages',
+      notes: 'Notes',
+      sendMessage: 'Send Message',
+      shareContact: 'Share Contact',
+      addFavorite: 'Add to Favorites',
+      removeFavorite: 'Remove from Favorites',
+      addEmergency: 'Add to Emergency Contacts',
+      blockContact: 'Block Contact',
+      block: 'Block',
+      blockCaller: 'Block Caller',
+      blockCallerTitle: 'Block this caller?',
+      blockCallerBody: '{number} will no longer be able to call this SIM.',
+      faceTime: 'FaceTime',
+      hideKeypad: 'Hide Keypad',
+      more: 'More',
+      mute: 'Mute',
+      speaker: 'Speaker',
+      viewContact: 'View Contact',
       calling: 'calling...',
       incoming: 'Incoming Call',
       incomingDirection: 'Incoming',
@@ -1198,9 +1245,14 @@ const defaultLocales: LocaleTree = {
       errors: {
         invalid_contact: 'Enter a name and valid phone number.',
         invalid_number: 'Enter a valid phone number.',
+        message_unavailable: 'The conversation could not be opened.',
+        contact_remove_failed: 'The contact could not be removed.',
+        contact_favorite_failed: 'The favorite could not be updated.',
         no_sim: 'This phone has no SIM card.',
         airplane_mode: 'Turn off Airplane Mode to make calls.',
         self_call: 'You cannot call your own number.',
+        blocked: 'This number is blocked.',
+        recipient_not_found: 'This number is not known.',
         busy: 'The line is busy.',
         rate_limited: 'Too many calls. Try again in a minute.',
         voice_unavailable: 'The configured phone voice service is unavailable.',
diff --git a/frontend/src/types/phone.ts b/frontend/src/types/phone.ts
index 3d4e9de..1527126 100644
--- a/frontend/src/types/phone.ts
+++ b/frontend/src/types/phone.ts
@@ -9,9 +9,14 @@ export type PhoneSim = {
 }
 
 export type PhoneContact = {
+  avatar_media_id?: number | null
+  avatar_url?: string | null
   created_at?: string
+  favorite?: boolean | number
   id: string
   name: string
+  notes?: string | null
+  organization?: string | null
   phone_number: string
   updated_at?: string
 }
diff --git a/frontend/src/views/apps/BillingApp.vue b/frontend/src/views/apps/BillingApp.vue
index 25c40b0..5e5ef30 100644
--- a/frontend/src/views/apps/BillingApp.vue
+++ b/frontend/src/views/apps/BillingApp.vue
@@ -286,6 +286,7 @@ onBeforeUnmount(() => {
       </div>
       <template v-else-if="billing.detail">
         <kGlass
+          :highlight="false"
           class="billing-detail__hero"
           :class="{
             'billing-detail__hero--paid': billing.detail.status === 'paid',
@@ -439,17 +440,26 @@ onBeforeUnmount(() => {
 
       <template v-else-if="tab === 'overview' && billing.overview">
         <div class="billing-summary">
-          <kGlass class="billing-summary__item billing-summary__item--open">
+          <kGlass
+            :highlight="false"
+            class="billing-summary__item billing-summary__item--open"
+          >
             <ReceiptText :size="19" />
             <span>{{ t('summary.open') }}</span>
             <strong>{{ billing.overview.openCount }}</strong>
           </kGlass>
-          <kGlass class="billing-summary__item billing-summary__item--due">
+          <kGlass
+            :highlight="false"
+            class="billing-summary__item billing-summary__item--due"
+          >
             <CalendarDays :size="19" />
             <span>{{ t('summary.due') }}</span>
             <strong>{{ formatMoney(billing.overview.openTotal) }}</strong>
           </kGlass>
-          <kGlass class="billing-summary__item billing-summary__item--overdue">
+          <kGlass
+            :highlight="false"
+            class="billing-summary__item billing-summary__item--overdue"
+          >
             <AlertTriangle :size="19" />
             <span>{{ t('summary.overdue') }}</span>
             <strong>{{ billing.overview.overdueCount }}</strong>
@@ -741,7 +751,7 @@ onBeforeUnmount(() => {
         /></span>
         <h2>{{ t('payment.title') }}</h2>
         <p>{{ t('payment.body', { issuer: billing.detail.issuerLabel }) }}</p>
-        <kGlass class="billing-payment-total">
+        <kGlass :highlight="false" class="billing-payment-total">
           <span>{{ billing.detail.title }}</span>
           <strong>{{
             formatMoney(billing.detail.amount, billing.detail.currency)
diff --git a/frontend/src/views/apps/CameraApp.vue b/frontend/src/views/apps/CameraApp.vue
index c1e604e..e840f08 100644
--- a/frontend/src/views/apps/CameraApp.vue
+++ b/frontend/src/views/apps/CameraApp.vue
@@ -117,14 +117,24 @@ function queueCapture(id: string, mediaType: MediaType): void {
   captures.value = captures.value.slice(0, 6)
 }
 
-function devMedia(id: string, mediaType: MediaType): PhoneMedia {
-  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="900" height="1600"><defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop stop-color="#19354f"/><stop offset="1" stop-color="#d78357"/></linearGradient></defs><rect width="900" height="1600" fill="url(#g)"/><circle cx="680" cy="380" r="210" fill="#ffffff22"/><path d="M0 1200 260 840l180 220 170-170 290 310v400H0z" fill="#102331aa"/></svg>`
-  return {
-    createdAt: Date.now(),
-    id: Number(Date.now()),
-    mediaType,
-    url: `data:image/svg+xml,${encodeURIComponent(svg)}#${id}`,
-  }
+async function completeDevelopmentCapture(
+  correlationId: string,
+  mediaType: MediaType,
+): Promise<void> {
+  const response = await nuiCall<PhoneMedia>('media:devCapture', { mediaType })
+  window.dispatchEvent(
+    new MessageEvent('message', {
+      data: {
+        data: {
+          correlationId,
+          error: response.error,
+          media: response.data,
+          success: response.success,
+        },
+        type: 'media:uploadResult',
+      },
+    }),
+  )
 }
 
 async function requestPhoto(): Promise<void> {
@@ -137,20 +147,7 @@ async function requestPhoto(): Promise<void> {
     shutterActive.value = false
   }, 280)
   if (isDevelopment) {
-    window.setTimeout(() => {
-      window.dispatchEvent(
-        new MessageEvent('message', {
-          data: {
-            data: {
-              correlationId: id,
-              media: devMedia(id, 'photo'),
-              success: true,
-            },
-            type: 'media:uploadResult',
-          },
-        }),
-      )
-    }, 700)
+    window.setTimeout(() => void completeDevelopmentCapture(id, 'photo'), 700)
     return
   }
   await nuiCall('media:requestUpload', {
@@ -195,20 +192,7 @@ function stopRecording(): void {
     savingVideo.value = true
     if (recordingTimer !== undefined) window.clearInterval(recordingTimer)
     recordingTimer = undefined
-    window.setTimeout(() => {
-      window.dispatchEvent(
-        new MessageEvent('message', {
-          data: {
-            data: {
-              correlationId: id,
-              media: devMedia(id, 'video'),
-              success: true,
-            },
-            type: 'media:uploadResult',
-          },
-        }),
-      )
-    }, 900)
+    window.setTimeout(() => void completeDevelopmentCapture(id, 'video'), 900)
     return
   }
   window.postMessage(
diff --git a/frontend/src/views/apps/MessagesApp.vue b/frontend/src/views/apps/MessagesApp.vue
index 6eaa0a8..836ffd5 100644
--- a/frontend/src/views/apps/MessagesApp.vue
+++ b/frontend/src/views/apps/MessagesApp.vue
@@ -390,6 +390,8 @@ async function saveContactDetails(): Promise<void> {
   const response = await calls.saveContact({
     id: activeContact.value?.id,
     name: contactNameDraft.value.trim(),
+    notes: activeContact.value?.notes ?? '',
+    organization: activeContact.value?.organization ?? '',
     phoneNumber: contactNumberDraft.value,
   })
   if (!response.success) {
diff --git a/frontend/src/views/apps/PhoneApp.vue b/frontend/src/views/apps/PhoneApp.vue
index dc77326..34fab17 100644
--- a/frontend/src/views/apps/PhoneApp.vue
+++ b/frontend/src/views/apps/PhoneApp.vue
@@ -4,52 +4,132 @@ import {
   kButton,
   kDialog,
   kDialogButton,
+  kGlass,
   kList,
   kListInput,
-  kListItem,
   kNavbar,
   kPage,
-  kSearchbar,
   kSegmented,
   kSegmentedButton,
+  kSheet,
 } from 'konsta/vue'
 import {
+  Camera,
+  Check,
+  ChevronRight,
+  ChevronLeft,
   Clock3,
   ContactRound,
   Delete,
+  Info,
+  Images,
+  Grid3X3,
+  Mail,
+  MessageCircle,
+  MicOff,
+  MoreHorizontal,
   Phone,
-  PhoneCall,
   PhoneIncoming,
   PhoneOff,
+  PhoneOutgoing,
   Plus,
+  Search,
+  Smartphone,
+  Star,
+  UserRound,
+  Video,
+  Volume2,
+  X,
 } from 'lucide-vue-next'
-import { computed, onMounted, ref } from 'vue'
+import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
 
 import { useCallsStore } from '@/stores/calls'
+import { useMessageMediaStore } from '@/stores/messageMedia'
+import { useMessagesStore } from '@/stores/messages'
 import { usePhoneStore } from '@/stores/phone'
 import type { PhoneContact, RecentCall } from '@/types/phone'
 import { formatPhoneNumber, normalizePhoneNumber } from '@/utils/phone'
 
 type PhoneTab = 'recents' | 'contacts' | 'keypad'
+type RecentFilter = 'all' | 'missed'
+type ContactProfileAction = 'message' | 'call' | 'video' | 'mail'
+type ContactPhotoContext = {
+  avatarMediaId: number | null
+  avatarUrl: string
+  contactId?: string
+  firstName: string
+  lastName: string
+  notes: string
+  organization: string
+  phoneNumber: string
+}
 
 const phone = usePhoneStore()
 const calls = useCallsStore()
+const mediaPicker = useMessageMediaStore()
+const messages = useMessagesStore()
+const router = useRouter()
 const tab = ref<PhoneTab>('recents')
 const query = ref('')
+const recentQuery = ref('')
+const recentFilter = ref<RecentFilter>('all')
+const selectedNumber = ref('')
+const viewingOwnCard = ref(false)
+const phoneContent = ref<HTMLElement | null>(null)
+const contactDetailCompact = ref(false)
 const keypad = ref('')
 const editorOpened = ref(false)
 const editingContact = ref<PhoneContact | null>(null)
-const contactName = ref('')
+const contactFirstName = ref('')
+const contactLastName = ref('')
+const contactOrganization = ref('')
+const contactNotes = ref('')
 const contactNumber = ref('')
+const contactAvatarMediaId = ref<number | null>(null)
+const contactAvatarUrl = ref('')
 const error = ref('')
+const callMoreOpened = ref(false)
+const callKeypadOpened = ref(false)
+const inCallKeypad = ref('')
+const blockDialogOpened = ref(false)
+const blockTargetNumber = ref('')
+const callSpeakerEnabled = ref(false)
+const callMuted = ref(false)
+const callElapsedSeconds = ref(0)
+let callClock: number | null = null
 const tabs = [
   { id: 'recents', icon: Clock3 },
   { id: 'contacts', icon: ContactRound },
   { id: 'keypad', icon: Phone },
 ] as const
+const keypadKeys = [
+  { digit: '1', letters: '' },
+  { digit: '2', letters: 'ABC' },
+  { digit: '3', letters: 'DEF' },
+  { digit: '4', letters: 'GHI' },
+  { digit: '5', letters: 'JKL' },
+  { digit: '6', letters: 'MNO' },
+  { digit: '7', letters: 'PQRS' },
+  { digit: '8', letters: 'TUV' },
+  { digit: '9', letters: 'WXYZ' },
+  { digit: '*', letters: '' },
+  { digit: '0', letters: '+' },
+  { digit: '#', letters: '' },
+] as const
+const contactProfileActions = [
+  { id: 'message', icon: MessageCircle },
+  { id: 'call', icon: Phone },
+  { id: 'video', icon: Video },
+  { id: 'mail', icon: Mail },
+] as const
+const contactAlphabet = [...'ABCDEFGHIJKLMNOPQRSTUVWXYZ', '#']
 const tabBarColors = {
   strongHighlightBgIos: 'bg-[#e5e5ea] dark:bg-[#2c2c2e]',
 }
+const profileNavbarColors = {
+  bgIos: 'bg-transparent',
+}
 const callButtonColors = {
   fillBgIos: 'bg-[#34c759] active:bg-[#30b350]',
   fillTextIos: 'text-white',
@@ -58,7 +138,6 @@ const endButtonColors = {
   fillBgIos: 'bg-[#ff3b30] active:bg-[#e6352b]',
   fillTextIos: 'text-white',
 }
-
 const visibleContacts = computed(() => {
   const needle = query.value.trim().toLowerCase()
   if (!needle) return calls.contacts
@@ -68,6 +147,86 @@ const visibleContacts = computed(() => {
       contact.phone_number.includes(needle.replace(/\D/g, '')),
   )
 })
+const contactsByNumber = computed(
+  () =>
+    new Map(calls.contacts.map((contact) => [contact.phone_number, contact])),
+)
+const groupedContacts = computed(() => {
+  const groups = new Map<string, PhoneContact[]>()
+  const sorted = [...visibleContacts.value].sort((left, right) =>
+    left.name.localeCompare(right.name, phone.lang, { sensitivity: 'base' }),
+  )
+  for (const contact of sorted) {
+    const firstCharacter = contact.name.trim().charAt(0).toUpperCase()
+    const letter = /^[A-Z]$/.test(firstCharacter) ? firstCharacter : '#'
+    const group = groups.get(letter) ?? []
+    group.push(contact)
+    groups.set(letter, group)
+  }
+  return contactAlphabet
+    .filter((letter) => groups.has(letter))
+    .map((letter) => ({ contacts: groups.get(letter) ?? [], letter }))
+})
+const favoriteContacts = computed(() =>
+  calls.contacts
+    .filter((contact) => Boolean(contact.favorite))
+    .sort((left, right) =>
+      left.name.localeCompare(right.name, phone.lang, { sensitivity: 'base' }),
+    ),
+)
+const visibleRecents = computed(() => {
+  const needle = recentQuery.value.trim().toLowerCase()
+  return calls.recents.filter((recent) => {
+    const contact = calls.contacts.find(
+      (entry) => entry.phone_number === recent.other_number,
+    )
+    const matchesFilter =
+      recentFilter.value === 'all' ||
+      ['missed', 'no_answer'].includes(recent.status)
+    const matchesQuery =
+      !needle ||
+      recent.other_number.includes(needle.replace(/\D/g, '')) ||
+      contact?.name.toLowerCase().includes(needle)
+    return matchesFilter && matchesQuery
+  })
+})
+const selectedContact = computed(
+  () =>
+    calls.contacts.find(
+      (contact) => contact.phone_number === selectedNumber.value,
+    ) ?? null,
+)
+const selectedHistory = computed(() =>
+  calls.recents.filter(
+    (recent) => recent.other_number === selectedNumber.value,
+  ),
+)
+const selectedDisplayName = computed(() => {
+  if (viewingOwnCard.value) return phone.t('Apps.phone.myCard')
+  return selectedContact.value?.name ?? formatPhoneNumber(selectedNumber.value)
+})
+const keypadDisplay = computed(() => {
+  if (!keypad.value) return ''
+  return /[*#]/.test(keypad.value)
+    ? keypad.value
+    : formatPhoneNumber(keypad.value)
+})
+const keypadSuggestions = computed(() => {
+  const enteredDigits = keypad.value.replace(/\D/g, '')
+  if (enteredDigits.length < 2 || /[*#]/.test(keypad.value)) return []
+  return calls.contacts
+    .filter((contact) =>
+      contact.phone_number.replace(/\D/g, '').startsWith(enteredDigits),
+    )
+    .sort((left, right) => {
+      const leftExact = left.phone_number.replace(/\D/g, '') === enteredDigits
+      const rightExact = right.phone_number.replace(/\D/g, '') === enteredDigits
+      if (leftExact !== rightExact) return leftExact ? -1 : 1
+      return left.name.localeCompare(right.name, phone.lang, {
+        sensitivity: 'base',
+      })
+    })
+})
 const activeCallLabel = computed(() => {
   const call = calls.activeCall
   if (!call) return ''
@@ -81,35 +240,188 @@ const activeCallLabel = computed(() => {
   const key = call.state === 'no_answer' ? 'noAnswer' : call.state
   return phone.t(`Apps.phone.${key}`)
 })
+const activeCallStatus = computed(() => {
+  if (calls.activeCall?.state !== 'connected') return activeCallLabel.value
+  const minutes = Math.floor(callElapsedSeconds.value / 60)
+  const seconds = String(callElapsedSeconds.value % 60).padStart(2, '0')
+  return `${String(minutes).padStart(2, '0')}:${seconds}`
+})
+const activeCallContact = computed(
+  () =>
+    calls.contacts.find(
+      (contact) => contact.phone_number === calls.activeCall?.otherNumber,
+    ) ?? null,
+)
+const contactEditorInitials = computed(() =>
+  [contactFirstName.value, contactLastName.value]
+    .map((part) => part.trim().charAt(0).toUpperCase())
+    .filter(Boolean)
+    .join(''),
+)
 
 function eventValue(event: Event): string {
   return (event.target as HTMLInputElement).value
 }
 
 function contactNameFor(number: string): string {
-  return (
-    calls.contacts.find((contact) => contact.phone_number === number)?.name ??
-    formatPhoneNumber(number)
-  )
+  return contactsByNumber.value.get(number)?.name ?? formatPhoneNumber(number)
 }
 
 function openContact(contact?: PhoneContact, number = ''): void {
   editingContact.value = contact ?? null
-  contactName.value = contact?.name ?? ''
+  const nameParts = contact?.name.trim().split(/\s+/) ?? []
+  contactFirstName.value = nameParts.shift() ?? ''
+  contactLastName.value = nameParts.join(' ')
+  contactOrganization.value = contact?.organization ?? ''
+  contactNotes.value = contact?.notes ?? ''
   contactNumber.value = contact?.phone_number ?? number
+  contactAvatarMediaId.value = contact?.avatar_media_id ?? null
+  contactAvatarUrl.value = contact?.avatar_url ?? ''
   error.value = ''
   editorOpened.value = true
 }
 
+function openContactPhotoPicker(source: 'camera' | 'photos'): void {
+  mediaPicker.begin(
+    'phone:contact-photo',
+    'photo',
+    '/apps/phone',
+    1,
+    {
+      avatarMediaId: contactAvatarMediaId.value,
+      avatarUrl: contactAvatarUrl.value,
+      contactId: editingContact.value?.id,
+      firstName: contactFirstName.value,
+      lastName: contactLastName.value,
+      notes: contactNotes.value,
+      organization: contactOrganization.value,
+      phoneNumber: contactNumber.value,
+    } satisfies ContactPhotoContext,
+  )
+  editorOpened.value = false
+  void router.push({
+    path: `/apps/${source}`,
+    query: { mediaAttachment: 'photo' },
+  })
+}
+
+function removeContactPhoto(): void {
+  contactAvatarMediaId.value = null
+  contactAvatarUrl.value = ''
+}
+
+function openRecentDetail(number: string): void {
+  viewingOwnCard.value = false
+  selectedNumber.value = number
+  contactDetailCompact.value = false
+  error.value = ''
+  void nextTick(() => phoneContent.value?.scrollTo({ top: 0 }))
+}
+
+function openMyCard(): void {
+  if (!phone.device?.sim) return
+  viewingOwnCard.value = true
+  selectedNumber.value = phone.device.sim.number
+  contactDetailCompact.value = false
+  error.value = ''
+  void nextTick(() => phoneContent.value?.scrollTo({ top: 0 }))
+}
+
+function closeRecentDetail(): void {
+  viewingOwnCard.value = false
+  selectedNumber.value = ''
+  contactDetailCompact.value = false
+}
+
+function selectTab(nextTab: PhoneTab): void {
+  viewingOwnCard.value = false
+  selectedNumber.value = ''
+  contactDetailCompact.value = false
+  tab.value = nextTab
+}
+
+function handlePhoneContentScroll(): void {
+  if (!selectedNumber.value) {
+    contactDetailCompact.value = false
+    return
+  }
+  const scrollTop = phoneContent.value?.scrollTop ?? 0
+  contactDetailCompact.value = contactDetailCompact.value
+    ? scrollTop > 110
+    : scrollTop > 165
+}
+
+function scrollToContactGroup(letter: string): void {
+  const scroller = phoneContent.value
+  if (letter === 'favorites') {
+    const target = document.getElementById('phone-contact-group-favorites')
+    if (!scroller || !target) return
+    const scrollTop =
+      scroller.scrollTop +
+      target.getBoundingClientRect().top -
+      scroller.getBoundingClientRect().top -
+      8
+    scroller.scrollTo({ behavior: 'smooth', top: scrollTop })
+    return
+  }
+  const availableLetters = new Set(
+    groupedContacts.value.map((group) => group.letter),
+  )
+  let targetLetter = letter
+  if (!availableLetters.has(targetLetter)) {
+    const requestedIndex = contactAlphabet.indexOf(letter)
+    for (let distance = 1; distance < contactAlphabet.length; distance += 1) {
+      const nextLetter = contactAlphabet[requestedIndex + distance]
+      if (nextLetter && availableLetters.has(nextLetter)) {
+        targetLetter = nextLetter
+        break
+      }
+      const previousLetter = contactAlphabet[requestedIndex - distance]
+      if (previousLetter && availableLetters.has(previousLetter)) {
+        targetLetter = previousLetter
+        break
+      }
+    }
+  }
+  const suffix = targetLetter === '#' ? 'other' : targetLetter.toLowerCase()
+  const target = document.getElementById(`phone-contact-group-${suffix}`)
+  if (!scroller || !target) return
+  const scrollTop =
+    scroller.scrollTop +
+    target.getBoundingClientRect().top -
+    scroller.getBoundingClientRect().top -
+    8
+  scroller.scrollTo({ behavior: 'smooth', top: scrollTop })
+}
+
+async function toggleSelectedFavorite(): Promise<void> {
+  const contact = selectedContact.value
+  if (!contact) return
+  const response = await calls.setContactFavorite(
+    contact.id,
+    !Boolean(contact.favorite),
+  )
+  if (!response.success) {
+    error.value = phone.t('Apps.phone.errors.contact_favorite_failed')
+  }
+}
+
 async function saveContact(): Promise<void> {
   const number = normalizePhoneNumber(contactNumber.value)
-  if (!contactName.value.trim() || !number) {
+  const name = [contactFirstName.value, contactLastName.value]
+    .map((part) => part.trim())
+    .filter(Boolean)
+    .join(' ')
+  if (!name || !number) {
     error.value = phone.t('Apps.phone.errors.invalid_contact')
     return
   }
   const response = await calls.saveContact({
+    avatarMediaId: contactAvatarMediaId.value,
     id: editingContact.value?.id,
-    name: contactName.value.trim(),
+    name,
+    notes: contactNotes.value.trim(),
+    organization: contactOrganization.value.trim(),
     phoneNumber: number,
   })
   if (!response.success) {
@@ -117,6 +429,27 @@ async function saveContact(): Promise<void> {
     return
   }
   editorOpened.value = false
+  viewingOwnCard.value = false
+  selectedNumber.value = number
+  contactDetailCompact.value = false
+  void nextTick(() => phoneContent.value?.scrollTo({ top: 0 }))
+}
+
+async function openMessage(number: string): Promise<void> {
+  error.value = ''
+  if (await messages.openThread(number)) {
+    void router.push('/apps/messages')
+    return
+  }
+  error.value = phone.t('Apps.phone.errors.message_unavailable')
+}
+
+function triggerContactAction(action: ContactProfileAction): void {
+  if (action === 'call') {
+    void startCall(selectedNumber.value)
+    return
+  }
+  if (action === 'message') void openMessage(selectedNumber.value)
 }
 
 async function startCall(number: string): Promise<void> {
@@ -135,6 +468,69 @@ async function answerCall(): Promise<void> {
   }
 }
 
+function updateCallElapsed(): void {
+  const call = calls.activeCall
+  if (!call || call.state !== 'connected') {
+    callElapsedSeconds.value = 0
+    return
+  }
+  const timestamp = call.answeredAt ?? call.startedAt
+  const startedAt = timestamp < 1_000_000_000_000 ? timestamp * 1000 : timestamp
+  callElapsedSeconds.value = Math.max(
+    0,
+    Math.floor((Date.now() - startedAt) / 1000),
+  )
+}
+
+function openCallContact(): void {
+  const call = calls.activeCall
+  if (!call) return
+  callMoreOpened.value = false
+  openContact(activeCallContact.value ?? undefined, call.otherNumber)
+}
+
+function messageActiveCaller(): void {
+  const number = calls.activeCall?.otherNumber
+  callMoreOpened.value = false
+  if (number) void openMessage(number)
+}
+
+async function removeActiveCallerContact(): Promise<void> {
+  const contact = activeCallContact.value
+  if (!contact) return
+  if (await calls.deleteContact(contact.id)) {
+    callMoreOpened.value = false
+    return
+  }
+  error.value = phone.t('Apps.phone.errors.contact_remove_failed')
+}
+
+function confirmBlockNumber(number: string): void {
+  callMoreOpened.value = false
+  blockTargetNumber.value = number
+  blockDialogOpened.value = true
+}
+
+async function blockNumber(): Promise<void> {
+  const number = blockTargetNumber.value
+  blockDialogOpened.value = false
+  error.value = ''
+  const response = await calls.blockNumber(number)
+  if (!response.success) {
+    error.value = phone.t(`Apps.phone.errors.${response.error ?? 'default'}`)
+  }
+}
+
+function openCallKeypad(): void {
+  callMoreOpened.value = false
+  inCallKeypad.value = ''
+  callKeypadOpened.value = true
+}
+
+function addInCallDigit(digit: string): void {
+  if (inCallKeypad.value.length < 24) inCallKeypad.value += digit
+}
+
 async function deleteEditedContact(): Promise<void> {
   if (!editingContact.value) return
   if (await calls.deleteContact(editingContact.value.id)) {
@@ -146,6 +542,10 @@ function addDigit(digit: string): void {
   if (keypad.value.length < 10) keypad.value += digit
 }
 
+function chooseKeypadSuggestion(contact: PhoneContact): void {
+  keypad.value = contact.phone_number.replace(/\D/g, '').slice(0, 10)
+}
+
 function recentStatus(recent: RecentCall): string {
   const key = recent.status === 'no_answer' ? 'noAnswer' : recent.status
   return phone.t(`Apps.phone.${key}`)
@@ -162,229 +562,796 @@ function recentSubtitle(recent: RecentCall): string {
   return `${direction} · ${status} · ${minutes}:${seconds}`
 }
 
-onMounted(() => {
-  void calls.bootstrap()
+function contactInitials(number: string): string {
+  const contact = calls.contacts.find((entry) => entry.phone_number === number)
+  if (!contact) return ''
+  return contact.name
+    .split(/\s+/)
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((part) => part[0]?.toUpperCase())
+    .join('')
+}
+
+function formatRecentDate(value: string): string {
+  const date = new Date(value)
+  const now = new Date()
+  const sameDay =
+    date.getFullYear() === now.getFullYear() &&
+    date.getMonth() === now.getMonth() &&
+    date.getDate() === now.getDate()
+  if (sameDay) {
+    return new Intl.DateTimeFormat(phone.lang, {
+      hour: '2-digit',
+      minute: '2-digit',
+    }).format(date)
+  }
+  const daysAgo = Math.floor(
+    (new Date(now.getFullYear(), now.getMonth(), now.getDate()).getTime() -
+      new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime()) /
+      86_400_000,
+  )
+  if (daysAgo < 7) {
+    return new Intl.DateTimeFormat(phone.lang, { weekday: 'long' }).format(date)
+  }
+  return new Intl.DateTimeFormat(phone.lang, {
+    day: '2-digit',
+    month: '2-digit',
+    year: '2-digit',
+  }).format(date)
+}
+
+onMounted(async () => {
+  await calls.bootstrap()
+  const photoSelection = mediaPicker.consumeMany<ContactPhotoContext>(
+    'phone:contact-photo',
+  )
+  if (photoSelection) {
+    const context = photoSelection.context
+    editingContact.value = context?.contactId
+      ? (calls.contacts.find((contact) => contact.id === context.contactId) ??
+        null)
+      : null
+    contactFirstName.value = context?.firstName ?? ''
+    contactLastName.value = context?.lastName ?? ''
+    contactNotes.value = context?.notes ?? ''
+    contactOrganization.value = context?.organization ?? ''
+    contactNumber.value = context?.phoneNumber ?? ''
+    contactAvatarMediaId.value = context?.avatarMediaId ?? null
+    contactAvatarUrl.value = context?.avatarUrl ?? ''
+    if (photoSelection.media[0]) {
+      contactAvatarMediaId.value = photoSelection.media[0].id
+      contactAvatarUrl.value = photoSelection.media[0].url
+    }
+    tab.value = 'contacts'
+    editorOpened.value = true
+  }
+  callClock = window.setInterval(updateCallElapsed, 500)
+})
+
+onBeforeUnmount(() => {
+  if (callClock !== null) window.clearInterval(callClock)
 })
 </script>
 
 <template>
   <k-page
     class="native-app phone-calls-app"
-    :class="{ 'phone-app--light': !phone.isDarkMode }"
+    :class="{
+      'phone-app--light': !phone.isDarkMode,
+      'phone-calls-app--profile': Boolean(selectedNumber),
+    }"
   >
     <template v-if="calls.activeCall">
-      <k-navbar :title="phone.t('Apps.phone.name')" transparent />
-      <k-block
-        class="flex h-full flex-col items-center justify-center text-center"
+      <section
+        class="phone-active-call"
+        :class="{ 'phone-active-call--more': callMoreOpened }"
       >
-        <div
-          class="mb-3 flex h-20 w-20 items-center justify-center rounded-full bg-[#007aff] text-white"
-        >
-          <PhoneIncoming
-            v-if="calls.activeCall.direction === 'incoming'"
-            class="h-9 w-9"
-          />
-          <PhoneCall v-else class="h-9 w-9" />
-        </div>
-        <h2 class="m-0 text-2xl font-semibold">
-          {{ contactNameFor(calls.activeCall.otherNumber) }}
-        </h2>
-        <p class="mt-2 text-[#8e8e93]">{{ activeCallLabel }}</p>
-        <p v-if="error" class="mt-2 text-sm text-[#ff3b30]">{{ error }}</p>
-        <div class="mt-10 flex gap-5">
-          <k-button
-            v-if="
-              calls.activeCall.state === 'ringing' &&
-              calls.activeCall.direction === 'incoming'
-            "
-            rounded
-            large
-            :colors="callButtonColors"
-            @click="answerCall"
+        <header class="phone-active-call__identity">
+          <div class="phone-active-call__status">
+            <span>P</span>
+            {{ activeCallStatus }}
+          </div>
+          <h1>
+            {{ contactNameFor(calls.activeCall.otherNumber) }}
+          </h1>
+          <p v-if="error" class="phone-active-call__error">{{ error }}</p>
+        </header>
+
+        <Transition name="call-panel" mode="out-in">
+          <div
+            v-if="callKeypadOpened"
+            key="keypad"
+            class="phone-in-call-keypad"
           >
-            <Phone class="mr-2 h-5 w-5" />{{ phone.t('Apps.phone.answer') }}
-          </k-button>
-          <k-button
-            v-if="
-              calls.activeCall.state === 'ringing' &&
-              calls.activeCall.direction === 'incoming'
-            "
-            rounded
-            large
-            :colors="endButtonColors"
-            @click="calls.decline()"
+            <div class="phone-in-call-keypad__grid">
+              <button
+                v-for="key in keypadKeys"
+                :key="key.digit"
+                type="button"
+                @click="addInCallDigit(key.digit)"
+              >
+                <span>{{ key.digit }}</span>
+                <small>{{ key.letters }}</small>
+              </button>
+            </div>
+            <div class="phone-in-call-keypad__footer">
+              <k-button
+                rounded
+                class="phone-in-call-keypad__end"
+                :colors="endButtonColors"
+                @click="calls.hangup()"
+              >
+                <PhoneOff />
+              </k-button>
+              <k-button
+                clear
+                class="phone-in-call-keypad__hide"
+                @click="callKeypadOpened = false"
+                >{{ phone.t('Apps.phone.hideKeypad') }}</k-button
+              >
+            </div>
+          </div>
+
+          <div
+            v-else-if="callMoreOpened"
+            key="more"
+            class="phone-call-more"
+            @click.self="callMoreOpened = false"
           >
-            <PhoneOff class="mr-2 h-5 w-5" />{{ phone.t('Apps.phone.decline') }}
-          </k-button>
-          <k-button
-            v-else-if="
-              ['ringing', 'connected'].includes(calls.activeCall.state)
-            "
-            rounded
-            large
-            :colors="endButtonColors"
-            @click="calls.hangup()"
-          >
-            <PhoneOff class="mr-2 h-5 w-5" />{{ phone.t('Apps.phone.hangup') }}
-          </k-button>
-        </div>
-      </k-block>
+            <div class="phone-call-more__list">
+              <k-button
+                class="phone-call-more__item phone-call-more__contact-card"
+                @click="openCallContact"
+              >
+                <span class="phone-call-more__avatar">
+                  <span v-if="contactInitials(calls.activeCall.otherNumber)">
+                    {{ contactInitials(calls.activeCall.otherNumber) }}
+                  </span>
+                  <UserRound v-else />
+                </span>
+                <strong>{{
+                  phone.t(
+                    activeCallContact
+                      ? 'Apps.phone.contactCard'
+                      : 'Apps.phone.addToContacts',
+                  )
+                }}</strong>
+              </k-button>
+
+              <k-button
+                class="phone-call-more__item"
+                @click="messageActiveCaller"
+              >
+                <MessageCircle />
+                <strong>{{ phone.t('Apps.phone.sendMessage') }}</strong>
+              </k-button>
+
+              <k-button
+                v-if="activeCallContact"
+                class="phone-call-more__item phone-call-more__item--danger"
+                @click="removeActiveCallerContact"
+              >
+                <Delete />
+                <strong>{{ phone.t('Apps.phone.removeContact') }}</strong>
+              </k-button>
+
+              <k-button
+                class="phone-call-more__item phone-call-more__item--danger"
+                @click="confirmBlockNumber(calls.activeCall.otherNumber)"
+              >
+                <PhoneOff />
+                <strong>{{ phone.t('Apps.phone.blockCaller') }}</strong>
+              </k-button>
+            </div>
+          </div>
+
+          <div v-else key="actions" class="phone-active-call__actions">
+            <k-button
+              rounded
+              class="phone-call-action"
+              :class="{ 'is-active': callSpeakerEnabled }"
+              @click="callSpeakerEnabled = !callSpeakerEnabled"
+            >
+              <Volume2 />
+              <span>{{ phone.t('Apps.phone.speaker') }}</span>
+            </k-button>
+            <k-button rounded class="phone-call-action is-disabled" disabled>
+              <Video />
+              <span>{{ phone.t('Apps.phone.faceTime') }}</span>
+            </k-button>
+            <k-button
+              rounded
+              class="phone-call-action"
+              :class="{ 'is-active': callMuted }"
+              @click="callMuted = !callMuted"
+            >
+              <MicOff />
+              <span>{{ phone.t('Apps.phone.mute') }}</span>
+            </k-button>
+
+            <div class="phone-call-action-anchor">
+              <k-button
+                rounded
+                class="phone-call-action"
+                @click="callMoreOpened = !callMoreOpened"
+              >
+                <MoreHorizontal />
+                <span>{{ phone.t('Apps.phone.more') }}</span>
+              </k-button>
+            </div>
+            <k-button
+              rounded
+              class="phone-call-action phone-call-action--end"
+              :colors="endButtonColors"
+              @click="
+                calls.activeCall.direction === 'incoming' &&
+                calls.activeCall.state === 'ringing'
+                  ? calls.decline()
+                  : calls.hangup()
+              "
+            >
+              <PhoneOff />
+              <span>{{
+                phone.t(
+                  calls.activeCall.direction === 'incoming' &&
+                    calls.activeCall.state === 'ringing'
+                    ? 'Apps.phone.decline'
+                    : 'Apps.phone.hangup',
+                )
+              }}</span>
+            </k-button>
+            <k-button
+              v-if="
+                calls.activeCall.direction === 'incoming' &&
+                calls.activeCall.state === 'ringing'
+              "
+              rounded
+              class="phone-call-action phone-call-action--answer"
+              :colors="callButtonColors"
+              @click="answerCall"
+            >
+              <Phone />
+              <span>{{ phone.t('Apps.phone.answer') }}</span>
+            </k-button>
+            <k-button
+              v-else
+              rounded
+              class="phone-call-action"
+              @click="openCallKeypad"
+            >
+              <Grid3X3 />
+              <span>{{ phone.t('Apps.phone.keypad') }}</span>
+            </k-button>
+          </div>
+        </Transition>
+      </section>
     </template>
 
     <template v-else>
-      <k-navbar :title="phone.t(`Apps.phone.${tab}`)" large transparent>
-        <template #right>
-          <k-button
-            v-if="tab === 'contacts'"
-            clear
-            rounded
-            @click="openContact()"
-          >
-            <Plus class="h-5 w-5" />
-          </k-button>
-        </template>
-      </k-navbar>
-
-      <div class="phone-call-content">
+      <div
+        ref="phoneContent"
+        class="phone-call-content"
+        :class="{ 'phone-call-content--profile': selectedNumber }"
+        @scroll.passive="handlePhoneContentScroll"
+      >
         <k-block v-if="!phone.device?.sim" class="text-center">
           <h2>{{ phone.t('Apps.phone.noSim') }}</h2>
           <p class="text-[#8e8e93]">{{ phone.t('Apps.phone.noSimBody') }}</p>
         </k-block>
 
-        <template v-else-if="tab === 'recents'">
-          <k-list v-if="calls.recents.length" strong inset>
-            <k-list-item
-              v-for="recent in calls.recents"
-              :key="recent.id"
-              :title="contactNameFor(recent.other_number)"
-              :subtitle="recentSubtitle(recent)"
-              link
-              @click="startCall(recent.other_number)"
-            >
-              <template #after>
-                <span class="flex flex-col items-end gap-1 text-xs">
-                  {{ new Date(recent.created_at).toLocaleString(phone.lang) }}
+        <template v-else-if="selectedNumber">
+          <section
+            class="phone-contact-detail"
+            :class="{ 'phone-contact-detail--compact': contactDetailCompact }"
+          >
+            <header class="phone-detail-header">
+              <k-button
+                rounded
+                class="phone-detail-header-button phone-detail-back"
+                :aria-label="phone.t('Common.back')"
+                @click="closeRecentDetail"
+              >
+                <ChevronLeft :size="29" :stroke-width="2.4" />
+              </k-button>
+
+              <div class="phone-detail-compact-center">
+                <h2 class="phone-detail-compact-title">
+                  {{ selectedDisplayName }}
+                </h2>
+                <div class="phone-detail-compact-actions">
                   <k-button
-                    v-if="
-                      !calls.contacts.some(
-                        (contact) =>
-                          contact.phone_number === recent.other_number,
-                      )
-                    "
-                    clear
+                    v-for="action in contactProfileActions"
+                    :key="action.id"
                     rounded
-                    :aria-label="phone.t('Apps.phone.addToContacts')"
-                    @click.stop="openContact(undefined, recent.other_number)"
+                    class="phone-profile-action phone-profile-action--compact"
+                    :disabled="
+                      viewingOwnCard || ['video', 'mail'].includes(action.id)
+                    "
+                    :aria-label="phone.t(`Apps.phone.${action.id}`)"
+                    @click="triggerContactAction(action.id)"
                   >
-                    <Plus class="h-5 w-5" />
+                    <component
+                      :is="action.icon"
+                      :size="24"
+                      fill="currentColor"
+                    />
                   </k-button>
-                </span>
-              </template>
-            </k-list-item>
-          </k-list>
-          <k-block v-else class="text-center text-[#8e8e93]">{{
-            phone.t('Apps.phone.noRecents')
-          }}</k-block>
+                </div>
+              </div>
+
+              <k-button
+                v-if="!viewingOwnCard"
+                rounded
+                class="phone-detail-edit"
+                @click="
+                  openContact(selectedContact ?? undefined, selectedNumber)
+                "
+              >
+                {{
+                  phone.t(
+                    selectedContact ? 'Common.edit' : 'Apps.phone.addContact',
+                  )
+                }}
+              </k-button>
+              <span v-else class="phone-detail-edit-spacer" />
+            </header>
+
+            <div class="phone-contact-hero">
+              <div class="phone-contact-avatar phone-contact-avatar--large">
+                <img
+                  v-if="selectedContact?.avatar_url"
+                  :src="selectedContact.avatar_url"
+                  alt=""
+                />
+                <span v-else-if="contactInitials(selectedNumber)">{{
+                  contactInitials(selectedNumber)
+                }}</span>
+                <UserRound v-else :size="48" :stroke-width="1.8" />
+              </div>
+              <h2>{{ selectedDisplayName }}</h2>
+              <p
+                v-if="selectedContact?.organization"
+                class="phone-contact-organization"
+              >
+                {{ selectedContact.organization }}
+              </p>
+              <p v-if="!selectedContact && !viewingOwnCard">
+                {{ phone.t('Apps.phone.unknownCaller') }}
+              </p>
+
+              <div class="phone-contact-actions">
+                <k-button
+                  v-for="action in contactProfileActions"
+                  :key="action.id"
+                  rounded
+                  class="phone-profile-action"
+                  :disabled="
+                    viewingOwnCard || ['video', 'mail'].includes(action.id)
+                  "
+                  :aria-label="phone.t(`Apps.phone.${action.id}`)"
+                  @click="triggerContactAction(action.id)"
+                >
+                  <component :is="action.icon" :size="23" fill="currentColor" />
+                </k-button>
+              </div>
+            </div>
+
+            <section v-if="viewingOwnCard" class="phone-profile-content">
+              <k-glass class="phone-own-profile-card">
+                <div>
+                  <span><Phone :size="19" /></span>
+                  <p>
+                    <small>{{ phone.t('Apps.phone.myNumber') }}</small>
+                    <strong>{{ formatPhoneNumber(selectedNumber) }}</strong>
+                  </p>
+                </div>
+                <div>
+                  <span><Smartphone :size="19" /></span>
+                  <p>
+                    <small>{{ phone.t('Apps.phone.device') }}</small>
+                    <strong>{{ phone.device?.name }}</strong>
+                  </p>
+                </div>
+              </k-glass>
+            </section>
+
+            <section v-else class="phone-profile-content">
+              <k-glass class="phone-profile-card phone-profile-info-card">
+                <button type="button" @click="startCall(selectedNumber)">
+                  <span>
+                    <small>{{ phone.t('Apps.phone.mobile') }}</small>
+                    <strong>{{ formatPhoneNumber(selectedNumber) }}</strong>
+                  </span>
+                  <Phone :size="21" fill="currentColor" />
+                </button>
+                <button type="button" @click="openMessage(selectedNumber)">
+                  <span>
+                    <small>{{ phone.t('Apps.phone.messagesProfile') }}</small>
+                    <strong>{{ selectedDisplayName }}</strong>
+                  </span>
+                  <ChevronRight :size="23" />
+                </button>
+                <div class="phone-profile-notes">
+                  <span>{{ phone.t('Apps.phone.notes') }}</span>
+                  <p v-if="selectedContact?.notes">
+                    {{ selectedContact.notes }}
+                  </p>
+                </div>
+              </k-glass>
+
+              <k-glass class="phone-profile-card phone-profile-options-card">
+                <button type="button" @click="openMessage(selectedNumber)">
+                  <span>{{ phone.t('Apps.phone.sendMessage') }}</span>
+                </button>
+                <button type="button" disabled>
+                  <span>{{ phone.t('Apps.phone.shareContact') }}</span>
+                </button>
+                <button
+                  type="button"
+                  :disabled="!selectedContact"
+                  @click="toggleSelectedFavorite"
+                >
+                  <span>{{
+                    phone.t(
+                      selectedContact?.favorite
+                        ? 'Apps.phone.removeFavorite'
+                        : 'Apps.phone.addFavorite',
+                    )
+                  }}</span>
+                </button>
+              </k-glass>
+
+              <k-glass class="phone-profile-card phone-profile-single-option">
+                <button
+                  type="button"
+                  @click="confirmBlockNumber(selectedNumber)"
+                >
+                  <span>{{ phone.t('Apps.phone.blockContact') }}</span>
+                </button>
+              </k-glass>
+
+              <k-glass class="phone-history-card">
+                <h3>{{ phone.t('Apps.phone.callHistory') }}</h3>
+                <div
+                  v-for="recent in selectedHistory"
+                  :key="recent.id"
+                  class="phone-history-row"
+                >
+                  <span
+                    class="phone-history-direction"
+                    :class="{
+                      'phone-history-direction--missed': [
+                        'missed',
+                        'no_answer',
+                      ].includes(recent.status),
+                    }"
+                  >
+                    <PhoneIncoming
+                      v-if="recent.direction === 'incoming'"
+                      :size="17"
+                    />
+                    <PhoneOutgoing v-else :size="17" />
+                  </span>
+                  <span class="phone-history-copy">
+                    <strong>{{ recentStatus(recent) }}</strong>
+                    <small>{{ recentSubtitle(recent) }}</small>
+                  </span>
+                  <time>{{ formatRecentDate(recent.created_at) }}</time>
+                </div>
+                <p v-if="!selectedHistory.length" class="phone-history-empty">
+                  {{ phone.t('Apps.phone.noCallHistory') }}
+                </p>
+              </k-glass>
+            </section>
+          </section>
+        </template>
+
+        <template v-else-if="tab === 'recents'">
+          <section class="phone-recents">
+            <header class="phone-recents-header">
+              <div class="phone-recents-filter" role="group">
+                <button
+                  type="button"
+                  :class="{ active: recentFilter === 'all' }"
+                  @click="recentFilter = 'all'"
+                >
+                  {{ phone.t('Apps.phone.allCalls') }}
+                </button>
+                <button
+                  type="button"
+                  :class="{ active: recentFilter === 'missed' }"
+                  @click="recentFilter = 'missed'"
+                >
+                  {{ phone.t('Apps.phone.missedCalls') }}
+                </button>
+              </div>
+              <h1>{{ phone.t('Apps.phone.recents') }}</h1>
+              <label class="phone-recents-search">
+                <Search :size="21" />
+                <input
+                  :value="recentQuery"
+                  :placeholder="phone.t('Apps.phone.searchRecents')"
+                  type="search"
+                  @input="recentQuery = eventValue($event)"
+                />
+              </label>
+            </header>
+
+            <div v-if="visibleRecents.length" class="phone-recents-list">
+              <article
+                v-for="recent in visibleRecents"
+                :key="recent.id"
+                class="phone-recent-row"
+              >
+                <div class="phone-contact-avatar">
+                  <img
+                    v-if="contactsByNumber.get(recent.other_number)?.avatar_url"
+                    :src="contactsByNumber.get(recent.other_number)?.avatar_url ?? ''"
+                    alt=""
+                  />
+                  <span v-else-if="contactInitials(recent.other_number)">{{
+                    contactInitials(recent.other_number)
+                  }}</span>
+                  <UserRound v-else :size="30" :stroke-width="1.8" />
+                </div>
+                <button
+                  class="phone-recent-call"
+                  type="button"
+                  @click="startCall(recent.other_number)"
+                >
+                  <span
+                    class="phone-recent-name"
+                    :class="{
+                      'phone-recent-name--missed': [
+                        'missed',
+                        'no_answer',
+                      ].includes(recent.status),
+                    }"
+                  >
+                    {{ contactNameFor(recent.other_number) }}
+                  </span>
+                  <span class="phone-recent-meta">
+                    <PhoneIncoming
+                      v-if="recent.direction === 'incoming'"
+                      :size="14"
+                    />
+                    <PhoneOutgoing v-else :size="14" />
+                    {{ recentStatus(recent) }}
+                  </span>
+                </button>
+                <time class="phone-recent-date">{{
+                  formatRecentDate(recent.created_at)
+                }}</time>
+                <button
+                  class="phone-recent-info"
+                  type="button"
+                  :aria-label="phone.t('Apps.phone.contactDetails')"
+                  @click="openRecentDetail(recent.other_number)"
+                >
+                  <Info :size="21" />
+                </button>
+              </article>
+            </div>
+            <k-block v-else class="text-center text-[#8e8e93]">{{
+              phone.t('Apps.phone.noRecents')
+            }}</k-block>
+          </section>
         </template>
 
         <template v-else-if="tab === 'contacts'">
-          <k-searchbar
-            :value="query"
-            :placeholder="phone.t('Apps.phone.searchContacts')"
-            @input="query = eventValue($event)"
-            @clear="query = ''"
-          />
-          <k-list v-if="visibleContacts.length" strong inset>
-            <k-list-item
-              v-for="contact in visibleContacts"
-              :key="contact.id"
-              :title="contact.name"
-              :subtitle="formatPhoneNumber(contact.phone_number)"
-              link
-              @click="openContact(contact)"
+          <section class="phone-contacts">
+            <header class="phone-contacts-header">
+              <div class="phone-contacts-toolbar">
+                <span aria-hidden="true" />
+                <h1>{{ phone.t('Apps.phone.contacts') }}</h1>
+                <button
+                  class="phone-contacts-add"
+                  type="button"
+                  :aria-label="phone.t('Apps.phone.addContact')"
+                  @click="openContact()"
+                >
+                  <Plus :size="28" />
+                </button>
+              </div>
+
+              <label class="phone-contacts-search">
+                <Search :size="21" />
+                <input
+                  :value="query"
+                  :placeholder="phone.t('Common.search')"
+                  type="search"
+                  @input="query = eventValue($event)"
+                />
+              </label>
+            </header>
+
+            <button class="phone-my-card" type="button" @click="openMyCard">
+              <div class="phone-contact-avatar">
+                <UserRound :size="30" :stroke-width="1.8" />
+              </div>
+              <span>
+                <strong>{{ phone.t('Apps.phone.myCard') }}</strong>
+                <small v-if="phone.device?.sim">{{
+                  formatPhoneNumber(phone.device.sim.number)
+                }}</small>
+              </span>
+            </button>
+
+            <div v-if="groupedContacts.length" class="phone-contact-groups">
+              <section
+                v-if="!query && favoriteContacts.length"
+                id="phone-contact-group-favorites"
+                class="phone-contact-group phone-contact-group--favorites"
+              >
+                <h2>
+                  <Star :size="13" fill="currentColor" />
+                  {{ phone.t('Apps.phone.favorites') }}
+                </h2>
+                <button
+                  v-for="contact in favoriteContacts"
+                  :key="`favorite-${contact.id}`"
+                  class="phone-contact-row"
+                  type="button"
+                  @click="openRecentDetail(contact.phone_number)"
+                >
+                  <span class="phone-contact-avatar">
+                    <img v-if="contact.avatar_url" :src="contact.avatar_url" alt="" />
+                    <template v-else>{{ contactInitials(contact.phone_number) }}</template>
+                  </span>
+                  <span class="phone-contact-name">{{ contact.name }}</span>
+                </button>
+              </section>
+              <section
+                v-for="group in groupedContacts"
+                :id="`phone-contact-group-${
+                  group.letter === '#' ? 'other' : group.letter.toLowerCase()
+                }`"
+                :key="group.letter"
+                class="phone-contact-group"
+              >
+                <h2>{{ group.letter }}</h2>
+                <button
+                  v-for="contact in group.contacts"
+                  :key="contact.id"
+                  class="phone-contact-row"
+                  type="button"
+                  @click="openRecentDetail(contact.phone_number)"
+                >
+                  <span class="phone-contact-avatar">
+                    <img v-if="contact.avatar_url" :src="contact.avatar_url" alt="" />
+                    <template v-else>{{ contactInitials(contact.phone_number) }}</template>
+                  </span>
+                  <span class="phone-contact-name">{{ contact.name }}</span>
+                </button>
+              </section>
+            </div>
+            <k-block v-else class="text-center text-[#8e8e93]">{{
+              phone.t('Apps.phone.noContacts')
+            }}</k-block>
+
+            <nav
+              v-if="!query"
+              class="phone-contact-index"
+              :aria-label="phone.t('Apps.phone.contactIndex')"
             >
-              <template #after>
-                <k-button
-                  clear
-                  rounded
-                  @click.stop="startCall(contact.phone_number)"
-                  ><Phone class="h-5 w-5"
-                /></k-button>
-              </template>
-            </k-list-item>
-          </k-list>
-          <k-block v-else class="text-center text-[#8e8e93]">{{
-            phone.t('Apps.phone.noContacts')
-          }}</k-block>
+              <button
+                v-if="favoriteContacts.length"
+                type="button"
+                :aria-label="phone.t('Apps.phone.favorites')"
+                @click="scrollToContactGroup('favorites')"
+              >
+                <Star :size="9" fill="currentColor" />
+              </button>
+              <button
+                v-for="letter in contactAlphabet"
+                :key="letter"
+                type="button"
+                @click="scrollToContactGroup(letter)"
+              >
+                {{ letter }}
+              </button>
+            </nav>
+          </section>
         </template>
 
         <template v-else>
-          <k-block class="text-center">
-            <div class="mb-5 min-h-10 text-2xl font-medium">
-              {{ formatPhoneNumber(keypad) }}
-            </div>
-            <div class="mx-auto grid max-w-[240px] grid-cols-3 gap-3">
-              <k-button
-                v-for="digit in [
-                  '1',
-                  '2',
-                  '3',
-                  '4',
-                  '5',
-                  '6',
-                  '7',
-                  '8',
-                  '9',
-                  '*',
-                  '0',
-                  '#',
-                ]"
-                :key="digit"
-                tonal
-                rounded
-                large
-                @click="addDigit(digit)"
+          <section class="phone-keypad">
+            <Transition name="keypad-suggestions">
+              <div
+                v-if="keypadSuggestions.length"
+                class="phone-keypad-suggestions"
+                aria-live="polite"
               >
-                {{ digit }}
-              </k-button>
+                <button
+                  v-for="contact in keypadSuggestions"
+                  :key="contact.id"
+                  class="phone-keypad-suggestion"
+                  type="button"
+                  @click="chooseKeypadSuggestion(contact)"
+                >
+                  <span class="phone-keypad-suggestion__avatar">
+                    <img
+                      v-if="contact.avatar_url"
+                      :src="contact.avatar_url"
+                      alt=""
+                    />
+                    <template v-else>{{
+                      contactInitials(contact.phone_number)
+                    }}</template>
+                  </span>
+                  <span class="phone-keypad-suggestion__copy">
+                    <strong>{{ contact.name }}</strong>
+                    <small>{{ formatPhoneNumber(contact.phone_number) }}</small>
+                  </span>
+                </button>
+              </div>
+            </Transition>
+            <div class="phone-keypad-number" aria-live="polite">
+              {{ keypadDisplay }}
             </div>
-            <div class="mt-5 flex justify-center gap-4">
-              <k-button
-                :disabled="keypad.length !== 10"
-                rounded
-                large
-                :colors="callButtonColors"
+            <div class="phone-keypad-grid">
+              <button
+                v-for="key in keypadKeys"
+                :key="key.digit"
+                class="phone-keypad-key"
+                type="button"
+                @click="addDigit(key.digit)"
+              >
+                <span>{{ key.digit }}</span>
+                <small :class="{ 'phone-keypad-plus': key.digit === '0' }">
+                  {{ key.letters }}
+                </small>
+              </button>
+            </div>
+            <div class="phone-keypad-actions">
+              <button
+                class="phone-keypad-call"
+                type="button"
                 @click="startCall(keypad)"
               >
-                <Phone class="h-6 w-6" />
-              </k-button>
-              <k-button
-                tonal
-                rounded
-                large
-                :disabled="!keypad"
+                <Phone :size="31" fill="currentColor" />
+              </button>
+              <button
+                v-if="keypad"
+                class="phone-keypad-delete"
+                type="button"
+                :aria-label="phone.t('Common.delete')"
                 @click="keypad = keypad.slice(0, -1)"
               >
-                <Delete class="h-6 w-6" />
-              </k-button>
+                <Delete :size="27" />
+              </button>
             </div>
-          </k-block>
+          </section>
         </template>
 
         <p v-if="error" class="px-5 text-center text-sm text-[#ff3b30]">
           {{ error }}
         </p>
       </div>
-      <k-navbar component="nav" :aria-label="phone.t('Apps.phone.name')">
+      <k-navbar
+        component="nav"
+        class="phone-bottom-navbar"
+        inner-class="hidden"
+        :colors="selectedNumber ? profileNavbarColors : undefined"
+        :aria-label="phone.t('Apps.phone.name')"
+      >
         <template #subnavbar>
-          <k-segmented strong rounded :colors="tabBarColors">
+          <k-segmented
+            strong
+            rounded
+            :colors="tabBarColors"
+            :data-active-tab="tab"
+          >
             <k-segmented-button
               v-for="item in tabs"
               :key="item.id"
               large
               :active="tab === item.id"
               :class="tab === item.id ? 'text-[#007aff]' : 'text-[#8e8e93]'"
-              @click="tab = item.id"
+              :aria-label="phone.t(`Apps.phone.${item.id}`)"
+              :aria-pressed="tab === item.id"
+              @click="selectTab(item.id)"
             >
               <span
                 class="flex flex-col items-center gap-0.5 text-[10px] leading-none"
@@ -399,36 +1366,2435 @@ onMounted(() => {
     </template>
   </k-page>
 
-  <k-dialog :opened="editorOpened" @backdropclick="editorOpened = false">
-    <template #title>{{
-      phone.t(
-        editingContact ? 'Apps.phone.editContact' : 'Apps.phone.addContact',
-      )
-    }}</template>
-    <k-list strong inset>
-      <k-list-input
-        :value="contactName"
-        :label="phone.t('Apps.phone.contactName')"
-        @input="contactName = eventValue($event)"
-      />
-      <k-list-input
-        :value="contactNumber"
-        :label="phone.t('Apps.phone.phoneNumber')"
-        inputmode="numeric"
-        @input="contactNumber = eventValue($event)"
-      />
-    </k-list>
-    <p v-if="error" class="text-sm text-[#ff3b30]">{{ error }}</p>
+  <k-sheet
+    :opened="editorOpened"
+    class="phone-contact-editor-sheet"
+    @backdropclick="editorOpened = false"
+  >
+    <section
+      class="phone-contact-editor"
+      :class="{ 'phone-contact-editor--light': !phone.isDarkMode }"
+      role="dialog"
+      aria-modal="true"
+      :aria-label="
+        phone.t(
+          editingContact ? 'Apps.phone.editContact' : 'Apps.phone.addContact',
+        )
+      "
+    >
+      <header class="phone-contact-editor__header">
+        <k-button
+          rounded
+          class="phone-contact-editor__header-button"
+          :aria-label="phone.t('Common.cancel')"
+          @click="editorOpened = false"
+        >
+          <X :size="27" />
+        </k-button>
+        <h2>
+          {{
+            phone.t(
+              editingContact
+                ? 'Apps.phone.editContact'
+                : 'Apps.phone.newContact',
+            )
+          }}
+        </h2>
+        <k-button
+          rounded
+          class="phone-contact-editor__header-button"
+          :aria-label="phone.t('Common.save')"
+          @click="saveContact"
+        >
+          <Check :size="28" :stroke-width="2.2" />
+        </k-button>
+      </header>
+
+      <div class="phone-contact-editor__scroll">
+        <div class="phone-contact-editor__photo">
+          <div
+            class="phone-contact-editor__avatar-wrap"
+            :class="{
+              'phone-contact-editor__avatar-wrap--has-photo': contactAvatarUrl,
+            }"
+          >
+            <button
+              class="phone-contact-editor__avatar"
+              type="button"
+              :aria-label="phone.t('Apps.phone.choosePhoto')"
+              @click="openContactPhotoPicker('photos')"
+            >
+              <img v-if="contactAvatarUrl" :src="contactAvatarUrl" alt="" />
+              <span v-else-if="contactEditorInitials">{{
+                contactEditorInitials
+              }}</span>
+              <UserRound v-else :size="72" :stroke-width="1.35" />
+            </button>
+            <k-button
+              v-if="contactAvatarUrl"
+              rounded
+              class="phone-contact-editor__remove-photo"
+              :aria-label="phone.t('Apps.phone.removePhoto')"
+              @click="removeContactPhoto"
+            >
+              <Delete :size="25" />
+              <span>{{ phone.t('Apps.phone.removePhoto') }}</span>
+            </k-button>
+          </div>
+          <div class="phone-contact-editor__photo-actions">
+            <k-button
+              small
+              rounded
+              tonal
+              @click="openContactPhotoPicker('photos')"
+            >
+              <Images :size="18" />
+              {{ phone.t('Apps.phone.chooseGallery') }}
+            </k-button>
+            <k-button
+              small
+              rounded
+              tonal
+              @click="openContactPhotoPicker('camera')"
+            >
+              <Camera :size="18" />
+              {{ phone.t('Apps.phone.takePhoto') }}
+            </k-button>
+          </div>
+        </div>
+
+        <k-list strong inset class="phone-contact-editor__name-list">
+          <k-list-input
+            :value="contactFirstName"
+            :placeholder="phone.t('Apps.phone.firstName')"
+            autocomplete="given-name"
+            @input="contactFirstName = eventValue($event)"
+          />
+          <k-list-input
+            :value="contactLastName"
+            :placeholder="phone.t('Apps.phone.lastName')"
+            autocomplete="family-name"
+            @input="contactLastName = eventValue($event)"
+          />
+          <k-list-input
+            :value="contactOrganization"
+            :placeholder="phone.t('Apps.phone.companyOrGroup')"
+            autocomplete="organization"
+            @input="contactOrganization = eventValue($event)"
+          />
+        </k-list>
+
+        <k-list strong inset class="phone-contact-editor__number-list">
+          <k-list-input
+            :value="contactNumber"
+            :label="phone.t('Apps.phone.mobile')"
+            :placeholder="phone.t('Apps.phone.phoneNumber')"
+            inputmode="tel"
+            autocomplete="tel"
+            @input="contactNumber = eventValue($event)"
+          >
+            <template #media>
+              <span class="phone-contact-editor__add-icon"
+                ><Plus :size="19"
+              /></span>
+            </template>
+          </k-list-input>
+        </k-list>
+
+        <k-list strong inset class="phone-contact-editor__notes-list">
+          <k-list-input
+            :value="contactNotes"
+            type="textarea"
+            :placeholder="phone.t('Apps.phone.notes')"
+            :maxlength="500"
+            autocapitalize="sentences"
+            @input="contactNotes = eventValue($event)"
+          />
+        </k-list>
+
+        <p v-if="error" class="phone-contact-editor__error">{{ error }}</p>
+
+        <k-button
+          v-if="editingContact"
+          class="phone-contact-editor__delete"
+          @click="deleteEditedContact"
+        >
+          {{ phone.t('Apps.phone.deleteContact') }}
+        </k-button>
+      </div>
+    </section>
+  </k-sheet>
+
+  <k-dialog
+    :opened="blockDialogOpened"
+    @backdropclick="blockDialogOpened = false"
+  >
+    <template #title>{{ phone.t('Apps.phone.blockCallerTitle') }}</template>
+    <p>
+      {{
+        phone.t('Apps.phone.blockCallerBody', {
+          number: contactNameFor(blockTargetNumber),
+        })
+      }}
+    </p>
     <template #buttons>
-      <k-dialog-button @click="editorOpened = false">{{
+      <k-dialog-button @click="blockDialogOpened = false">{{
         phone.t('Common.cancel')
       }}</k-dialog-button>
-      <k-dialog-button v-if="editingContact" @click="deleteEditedContact">{{
-        phone.t('Common.delete')
-      }}</k-dialog-button>
-      <k-dialog-button strong @click="saveContact">{{
-        phone.t('Common.save')
+      <k-dialog-button strong @click="blockNumber">{{
+        phone.t('Apps.phone.block')
       }}</k-dialog-button>
     </template>
   </k-dialog>
 </template>
+
+<style scoped>
+.phone-active-call {
+  position: absolute;
+  z-index: 30;
+  inset: 0;
+  display: flex;
+  min-height: 0;
+  flex-direction: column;
+  overflow: hidden;
+  background: linear-gradient(180deg, #2f4a98 0%, #2a468f 44%, #293044 100%);
+  color: white;
+  text-align: center;
+}
+
+.phone-active-call::before {
+  position: absolute;
+  z-index: 0;
+  inset: 0;
+  background: rgba(4, 12, 30, 0.48);
+  content: '';
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 260ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.phone-active-call > * {
+  position: relative;
+  z-index: 1;
+}
+
+.phone-active-call--more::before {
+  opacity: 1;
+}
+
+.phone-active-call--more .phone-active-call__identity {
+  opacity: 0.48;
+}
+
+.phone-active-call__identity {
+  padding: 112px 24px 0;
+  transition: opacity 240ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.call-panel-enter-active {
+  transition:
+    opacity 240ms ease-out,
+    transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
+  will-change: opacity, transform;
+}
+
+.call-panel-leave-active {
+  transition:
+    opacity 150ms ease-in,
+    transform 190ms cubic-bezier(0.4, 0, 1, 1);
+  will-change: opacity, transform;
+}
+
+.call-panel-enter-from,
+.call-panel-leave-to {
+  opacity: 0;
+}
+
+.phone-active-call__actions.call-panel-enter-from,
+.phone-active-call__actions.call-panel-leave-to {
+  transform: translateY(18px) scale(0.985);
+}
+
+.phone-call-more.call-panel-enter-from,
+.phone-call-more.call-panel-leave-to {
+  transform: translateY(38px);
+}
+
+.phone-in-call-keypad.call-panel-enter-from,
+.phone-in-call-keypad.call-panel-leave-to {
+  transform: translateY(24px) scale(0.97);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .phone-active-call::before,
+  .phone-active-call__identity,
+  .call-panel-enter-active,
+  .call-panel-leave-active {
+    transition-duration: 1ms !important;
+  }
+}
+
+.phone-active-call__status {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  color: rgba(224, 230, 255, 0.66);
+  font-size: 25px;
+  font-variant-numeric: tabular-nums;
+  font-weight: 500;
+  line-height: 28px;
+}
+
+.phone-active-call__status span {
+  display: grid;
+  width: 16px;
+  height: 16px;
+  place-items: center;
+  border-radius: 3px;
+  background: white;
+  color: #172758;
+  font-size: 10px;
+  font-weight: 800;
+  line-height: 1;
+}
+
+.phone-active-call__identity h1 {
+  max-width: 100%;
+  margin: 9px 0 0;
+  overflow: hidden;
+  font-size: 32px;
+  font-weight: 700;
+  letter-spacing: -0.8px;
+  line-height: 1.08;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.phone-active-call__error {
+  margin: 10px 0 0;
+  color: #ffb4ae;
+  font-size: 12px;
+}
+
+.phone-active-call__actions {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 11px 19px;
+  width: 100%;
+  margin-top: auto;
+  padding: 0 28px 48px;
+}
+
+.phone-call-action {
+  position: relative;
+  display: flex !important;
+  width: 100% !important;
+  height: 108px !important;
+  flex-direction: column !important;
+  align-items: center !important;
+  justify-content: flex-start !important;
+  gap: 13px !important;
+  padding: 24px 0 0 !important;
+  border: 0 !important;
+  background: transparent !important;
+  box-shadow: none !important;
+  color: white !important;
+  overflow: visible !important;
+  font-size: 14px !important;
+  font-weight: 400 !important;
+  line-height: 17px !important;
+  white-space: nowrap;
+}
+
+.phone-call-action-anchor {
+  min-width: 0;
+  height: 108px;
+}
+
+.phone-call-action::before {
+  position: absolute;
+  z-index: 0;
+  top: 0;
+  left: 50%;
+  width: 80px;
+  height: 80px;
+  border: 1px solid rgba(215, 225, 255, 0.72);
+  border-radius: 50%;
+  background: rgba(145, 164, 215, 0.22);
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
+  content: '';
+  transform: translateX(-50%);
+  transition:
+    background-color 140ms ease,
+    transform 140ms ease;
+}
+
+.phone-call-action:active::before {
+  transform: translateX(-50%) scale(0.94);
+}
+
+.phone-call-action > svg,
+.phone-call-action > span {
+  position: relative;
+  z-index: 1;
+}
+
+.phone-call-action > svg {
+  width: 32px;
+  height: 32px;
+  flex: none;
+  stroke-width: 2.2;
+}
+
+.phone-call-action > span {
+  position: absolute;
+  top: 89px;
+  display: block;
+  width: 112px;
+  overflow: hidden;
+  color: #fff;
+  line-height: 18px;
+  text-overflow: ellipsis;
+  transition: none;
+}
+
+.phone-call-action.is-active {
+  color: #25458e !important;
+}
+
+.phone-call-action.is-active::before {
+  background: white;
+}
+
+.phone-call-action.is-disabled {
+  color: rgba(232, 236, 250, 0.56) !important;
+  opacity: 1 !important;
+}
+
+.phone-call-action.is-disabled > span {
+  color: rgba(232, 236, 250, 0.56);
+}
+
+.phone-call-action--end::before {
+  border-color: rgba(255, 186, 181, 0.72);
+  background: #d92d22;
+}
+
+.phone-call-action--answer::before {
+  border-color: rgba(190, 255, 198, 0.72);
+  background: #34a853;
+}
+
+.phone-call-more {
+  display: flex;
+  min-height: 0;
+  flex: 1;
+  align-items: flex-end;
+  padding: 0 34px 34px;
+}
+
+.phone-call-more__list {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  gap: 9px;
+}
+
+.phone-call-more__item {
+  display: flex !important;
+  width: 100% !important;
+  height: 58px !important;
+  align-items: center !important;
+  justify-content: flex-start !important;
+  gap: 13px !important;
+  padding: 0 27px !important;
+  border: 1px solid rgba(118, 137, 191, 0.38) !important;
+  border-radius: 30px !important;
+  background: rgba(20, 23, 39, 0.55) !important;
+  color: white !important;
+  box-shadow: none !important;
+  text-transform: none !important;
+}
+
+.phone-call-more__item:active {
+  background: rgba(49, 57, 84, 0.68) !important;
+}
+
+.phone-call-more__contact-card {
+  height: 72px !important;
+  padding: 0 33px !important;
+  border-radius: 38px !important;
+}
+
+.phone-call-more__item > svg {
+  width: 24px;
+  height: 24px;
+  flex: none;
+}
+
+.phone-call-more__item--danger {
+  color: #ff6961 !important;
+}
+
+.phone-call-more__avatar {
+  display: grid;
+  width: 45px;
+  height: 45px;
+  flex: none;
+  place-items: center;
+  border-radius: 50%;
+  background: linear-gradient(145deg, #4b92d1, #195287);
+  font-size: 17px;
+  font-weight: 700;
+}
+
+.phone-call-more__avatar svg {
+  width: 24px;
+  height: 24px;
+}
+
+.phone-call-more__item strong {
+  overflow: hidden;
+  font-size: 16px;
+  font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.phone-in-call-keypad {
+  display: flex;
+  min-height: 0;
+  flex: 1;
+  flex-direction: column;
+  padding: 0 28px 42px;
+}
+
+.phone-in-call-keypad__grid {
+  display: grid;
+  grid-template-columns: repeat(3, 74px);
+  justify-content: center;
+  gap: 18px 40px;
+  margin-top: auto;
+}
+
+.phone-in-call-keypad__grid button {
+  display: flex;
+  width: 74px;
+  height: 74px;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid rgba(255, 255, 255, 0.16);
+  border-radius: 50%;
+  background: linear-gradient(
+    180deg,
+    rgba(255, 255, 255, 0.16),
+    rgba(255, 255, 255, 0.09)
+  );
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.14),
+    0 5px 14px rgba(8, 20, 55, 0.2);
+  backdrop-filter: blur(18px) saturate(145%);
+  -webkit-backdrop-filter: blur(18px) saturate(145%);
+  color: white;
+  transition:
+    background-color 120ms ease,
+    border-color 120ms ease,
+    box-shadow 120ms ease,
+    transform 120ms ease;
+}
+
+.phone-in-call-keypad__grid button:active {
+  background: rgba(151, 176, 231, 0.44);
+  transform: scale(0.95);
+}
+
+.phone-in-call-keypad__grid span {
+  font-size: 32px;
+  line-height: 31px;
+}
+
+.phone-in-call-keypad__grid small {
+  min-height: 10px;
+  margin-top: 2px;
+  font-size: 8px;
+  font-weight: 800;
+  letter-spacing: 1.5px;
+}
+
+.phone-in-call-keypad__footer {
+  display: grid;
+  grid-template-columns: repeat(3, 74px);
+  align-items: center;
+  justify-content: center;
+  gap: 40px;
+  margin-top: 42px;
+}
+
+.phone-in-call-keypad__end {
+  grid-column: 2;
+  width: 74px !important;
+  height: 74px !important;
+  padding: 0 !important;
+  border: 1px solid rgba(255, 178, 172, 0.78) !important;
+  border-radius: 50% !important;
+  background: #cf3027 !important;
+  color: white !important;
+}
+
+.phone-in-call-keypad__end svg {
+  width: 30px;
+  height: 30px;
+}
+
+.phone-in-call-keypad__hide {
+  grid-column: 3;
+  width: 96px !important;
+  margin-left: -11px;
+  padding: 0 !important;
+  color: white !important;
+  font-size: 14px !important;
+  font-weight: 400 !important;
+  line-height: 18px !important;
+  text-align: left;
+  white-space: normal !important;
+}
+
+@media (max-height: 700px) {
+  .phone-active-call__identity {
+    padding-top: 86px;
+  }
+
+  .phone-active-call__actions {
+    gap: 4px 15px;
+    padding-bottom: 28px;
+  }
+
+  .phone-call-action {
+    height: 97px !important;
+    padding-top: 20px !important;
+  }
+
+  .phone-call-action-anchor {
+    height: 97px;
+  }
+
+  .phone-call-action::before {
+    width: 70px;
+    height: 70px;
+  }
+
+  .phone-call-action > svg {
+    width: 29px;
+    height: 29px;
+  }
+
+  .phone-call-action > span {
+    top: 79px;
+  }
+
+  .phone-in-call-keypad {
+    padding-bottom: 24px;
+  }
+
+  .phone-in-call-keypad__grid {
+    grid-template-columns: repeat(3, 64px);
+    gap: 10px 34px;
+  }
+
+  .phone-in-call-keypad__grid button {
+    width: 64px;
+    height: 64px;
+  }
+
+  .phone-in-call-keypad__footer {
+    grid-template-columns: repeat(3, 64px);
+    gap: 34px;
+    margin-top: 20px;
+  }
+
+  .phone-in-call-keypad__end {
+    width: 64px !important;
+    height: 64px !important;
+  }
+}
+
+.phone-call-content {
+  min-height: 0;
+}
+
+.phone-bottom-navbar {
+  padding-top: 6px !important;
+}
+
+.phone-recents,
+.phone-contacts,
+.phone-contact-detail {
+  min-height: 100%;
+  padding: 8px 15px 16px;
+}
+
+.phone-contacts {
+  position: relative;
+  padding-top: 6px;
+  padding-right: 24px;
+  padding-bottom: 20px;
+}
+
+.phone-contacts-header {
+  padding-bottom: 16px;
+}
+
+.phone-contacts-toolbar {
+  display: grid;
+  grid-template-columns: 42px 1fr 42px;
+  align-items: center;
+  margin-bottom: 13px;
+}
+
+.phone-contacts-toolbar h1 {
+  margin: 0;
+  font-size: 17px;
+  text-align: center;
+}
+
+.phone-contacts-add {
+  display: flex;
+  width: 42px;
+  height: 42px;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid rgba(142, 142, 147, 0.18);
+  border-radius: 50%;
+  background: rgba(118, 118, 128, 0.14);
+  color: inherit;
+}
+
+.phone-contacts-search {
+  display: flex;
+  min-height: 42px;
+  align-items: center;
+  gap: 9px;
+  padding: 0 14px;
+  border-radius: 16px;
+  background: rgba(118, 118, 128, 0.16);
+  color: #8e8e93;
+}
+
+.phone-contacts-search input {
+  width: 100%;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: 16px;
+}
+
+.phone-my-card {
+  display: flex;
+  width: 100%;
+  min-height: 72px;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 8px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+}
+
+.phone-my-card > span {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+}
+
+.phone-my-card strong {
+  font-size: 16px;
+}
+
+.phone-my-card small {
+  margin-top: 2px;
+  color: #8e8e93;
+  font-size: 12px;
+}
+
+.phone-contact-group {
+  scroll-margin-top: 10px;
+}
+
+.phone-contact-group h2 {
+  height: 28px;
+  margin: 0;
+  padding-top: 4px;
+  border-bottom: 1px solid rgba(142, 142, 147, 0.23);
+  color: #8e8e93;
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.phone-contact-group--favorites h2 {
+  display: flex;
+  align-items: flex-start;
+  gap: 5px;
+  color: #ffcc00;
+}
+
+.phone-contact-row {
+  display: grid;
+  grid-template-columns: 52px minmax(0, 1fr);
+  width: 100%;
+  min-height: 68px;
+  align-items: center;
+  gap: 10px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+}
+
+.phone-contact-row:not(:last-child) .phone-contact-name {
+  border-bottom: 1px solid rgba(142, 142, 147, 0.2);
+}
+
+.phone-contact-name {
+  display: flex;
+  min-width: 0;
+  min-height: 68px;
+  align-items: center;
+  overflow: hidden;
+  font-size: 16px;
+  font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.phone-contact-index {
+  position: fixed;
+  z-index: 40;
+  top: 50%;
+  right: 5px;
+  display: flex;
+  flex-direction: column;
+  pointer-events: auto;
+  transform: translateY(-42%);
+}
+
+.phone-contact-index button {
+  width: 24px;
+  height: 14px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: #0a84ff;
+  font: inherit;
+  font-size: 9px;
+  font-weight: 700;
+  line-height: 14px;
+  cursor: pointer;
+  touch-action: manipulation;
+}
+
+.phone-contact-index button svg {
+  display: block;
+  margin: auto;
+}
+
+.phone-contact-index button:active {
+  border-radius: 7px;
+  background: rgba(10, 132, 255, 0.2);
+}
+
+.phone-keypad {
+  position: relative;
+  display: flex;
+  min-height: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 56px 24px 24px;
+}
+
+.phone-keypad-number {
+  display: flex;
+  width: 100%;
+  min-height: 50px;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 14px;
+  overflow: hidden;
+  font-size: 25px;
+  font-weight: 500;
+  letter-spacing: 0.4px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.phone-keypad-suggestions {
+  position: absolute;
+  z-index: 5;
+  top: 18px;
+  right: 24px;
+  left: 24px;
+  display: grid;
+  width: auto;
+  max-height: 132px;
+  gap: 6px;
+  margin: 0 auto;
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-width: none;
+  touch-action: pan-y;
+  -webkit-overflow-scrolling: touch;
+}
+
+.phone-keypad-suggestions::-webkit-scrollbar {
+  display: none;
+}
+
+.phone-keypad-suggestion {
+  display: grid;
+  min-height: 46px;
+  grid-template-columns: 36px minmax(0, 1fr);
+  align-items: center;
+  gap: 10px;
+  padding: 5px 12px 5px 6px;
+  border: 1px solid rgba(255, 255, 255, 0.09);
+  border-radius: 18px;
+  color: #fff;
+  background: rgba(44, 44, 46, 0.82);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.07),
+    0 4px 12px rgba(0, 0, 0, 0.16);
+  font: inherit;
+  text-align: left;
+  backdrop-filter: blur(16px) saturate(140%);
+  -webkit-backdrop-filter: blur(16px) saturate(140%);
+  transition:
+    background-color 160ms ease-out,
+    border-color 160ms ease-out,
+    transform 160ms ease-out;
+}
+
+.phone-keypad-suggestion__avatar {
+  display: grid;
+  width: 36px;
+  height: 36px;
+  place-items: center;
+  overflow: hidden;
+  border-radius: 50%;
+  background: linear-gradient(145deg, #4b92d1, #195287);
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.phone-keypad-suggestion__avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.phone-keypad-suggestion__copy {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+}
+
+.phone-keypad-suggestion__copy strong,
+.phone-keypad-suggestion__copy small {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.phone-keypad-suggestion__copy strong {
+  font-size: 14px;
+  font-weight: 600;
+  transition: color 160ms ease-out;
+}
+
+.phone-keypad-suggestion__copy small {
+  margin-top: 1px;
+  color: #a5a5aa;
+  font-size: 11px;
+}
+
+.keypad-suggestions-enter-active,
+.keypad-suggestions-leave-active {
+  transition:
+    opacity 180ms ease,
+    transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.keypad-suggestions-enter-from,
+.keypad-suggestions-leave-to {
+  opacity: 0;
+  transform: translateY(-8px);
+}
+
+.phone-keypad-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 78px);
+  gap: 18px 22px;
+}
+
+.phone-keypad-key {
+  display: flex;
+  width: 78px;
+  height: 78px;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 50%;
+  background: linear-gradient(
+    180deg,
+    rgba(58, 58, 60, 0.92),
+    rgba(28, 28, 30, 0.88)
+  );
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.1),
+    0 5px 14px rgba(0, 0, 0, 0.24);
+  backdrop-filter: blur(18px) saturate(145%);
+  -webkit-backdrop-filter: blur(18px) saturate(145%);
+  color: white;
+  font: inherit;
+  transition:
+    background-color 120ms ease,
+    border-color 120ms ease,
+    box-shadow 120ms ease,
+    transform 120ms ease;
+}
+
+.phone-keypad-key:active {
+  background: #3a3a3c;
+  transform: scale(0.96);
+}
+
+.phone-keypad-key > span {
+  font-size: 36px;
+  font-weight: 400;
+  line-height: 34px;
+}
+
+.phone-keypad-key > small {
+  min-height: 13px;
+  margin-top: 3px;
+  font-size: 9px;
+  font-weight: 800;
+  letter-spacing: 2.4px;
+  line-height: 10px;
+}
+
+.phone-keypad-key > small.phone-keypad-plus {
+  font-size: 15px;
+  letter-spacing: 0;
+}
+
+.phone-keypad-actions {
+  position: relative;
+  display: flex;
+  width: 100%;
+  min-height: 82px;
+  align-items: center;
+  justify-content: center;
+  margin-top: 20px;
+}
+
+.phone-keypad-call,
+.phone-keypad-delete {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  color: white;
+}
+
+.phone-keypad-call {
+  width: 78px;
+  height: 78px;
+  border: 1px solid rgba(133, 235, 143, 0.78);
+  background: linear-gradient(180deg, #3e9a49, #2f7d39);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.2),
+    0 5px 14px rgba(23, 101, 35, 0.3);
+}
+
+.phone-keypad-call:active {
+  background: #2d7336;
+  transform: scale(0.96);
+}
+
+.phone-keypad-delete {
+  position: absolute;
+  left: calc(50% + 62px);
+  width: 48px;
+  height: 48px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  background: linear-gradient(
+    180deg,
+    rgba(58, 58, 60, 0.92),
+    rgba(28, 28, 30, 0.88)
+  );
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.1),
+    0 5px 14px rgba(0, 0, 0, 0.24);
+  backdrop-filter: blur(18px) saturate(145%);
+  -webkit-backdrop-filter: blur(18px) saturate(145%);
+  color: #d1d1d6;
+}
+
+.phone-keypad-delete:active {
+  background: #3a3a3c;
+  transform: scale(0.96);
+}
+
+@media (max-height: 690px) {
+  .phone-keypad {
+    padding-top: 20px;
+    padding-bottom: 12px;
+  }
+
+  .phone-keypad-suggestions {
+    top: 6px;
+    max-height: 104px;
+  }
+
+  .phone-keypad-grid {
+    grid-template-columns: repeat(3, 70px);
+    gap: 12px 18px;
+  }
+
+  .phone-keypad-key {
+    width: 70px;
+    height: 70px;
+  }
+
+  .phone-keypad-actions {
+    min-height: 70px;
+    margin-top: 14px;
+  }
+
+  .phone-keypad-suggestion:nth-child(n + 2) {
+    display: none;
+  }
+
+  .phone-keypad-call {
+    width: 68px;
+    height: 68px;
+  }
+}
+
+.phone-recents-header {
+  padding: 4px 0 14px;
+}
+
+.phone-recents-filter {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  width: 174px;
+  margin: 0 auto 14px;
+  padding: 3px;
+  border: 1px solid rgba(142, 142, 147, 0.25);
+  border-radius: 15px;
+  background: rgba(118, 118, 128, 0.14);
+}
+
+.phone-recents-filter button {
+  min-height: 30px;
+  border: 0;
+  border-radius: 12px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.phone-recents-filter button.active {
+  background: rgba(118, 118, 128, 0.34);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
+}
+
+.phone-recents-header h1 {
+  margin: 0 0 13px;
+  font-size: 30px;
+  line-height: 1.06;
+  letter-spacing: -0.8px;
+}
+
+.phone-recents-search {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  min-height: 42px;
+  padding: 0 14px;
+  border-radius: 16px;
+  background: rgba(118, 118, 128, 0.16);
+  color: #8e8e93;
+}
+
+.phone-recents-search input {
+  width: 100%;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: 16px;
+}
+
+.phone-recents-list {
+  overflow: hidden;
+}
+
+.phone-recent-row {
+  display: grid;
+  grid-template-columns: 52px minmax(0, 1fr) auto 38px;
+  align-items: center;
+  min-height: 76px;
+  column-gap: 10px;
+}
+
+.phone-recent-row:not(:last-child) {
+  border-bottom: 1px solid rgba(142, 142, 147, 0.2);
+}
+
+.phone-contact-avatar {
+  display: flex;
+  width: 52px;
+  height: 52px;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  border-radius: 50%;
+  background: linear-gradient(145deg, #5b91c2, #22527d);
+  color: white;
+  font-size: 19px;
+  font-weight: 700;
+  letter-spacing: -0.4px;
+  overflow: hidden;
+}
+
+.phone-contact-avatar img,
+.phone-contact-editor__avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.phone-recent-call {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  align-self: stretch;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  text-align: left;
+}
+
+.phone-recent-name {
+  overflow: hidden;
+  max-width: 100%;
+  font-size: 16px;
+  font-weight: 700;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.phone-recent-name--missed {
+  color: #ff453a;
+}
+
+.phone-recent-meta {
+  display: flex;
+  align-items: center;
+  gap: 3px;
+  overflow: hidden;
+  max-width: 100%;
+  margin-top: 2px;
+  color: #8e8e93;
+  font-size: 13px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.phone-recent-date {
+  color: #8e8e93;
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+.phone-recent-info {
+  display: flex;
+  width: 36px;
+  height: 36px;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  border-radius: 50%;
+  background: rgba(118, 118, 128, 0.14);
+  color: #0a84ff;
+}
+
+.phone-detail-header {
+  display: flex;
+  min-height: 38px;
+  align-items: center;
+}
+
+.phone-detail-back {
+  display: flex;
+  align-items: center;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: #0a84ff;
+  font: inherit;
+  font-size: 15px;
+}
+
+.phone-contact-hero {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 6px 0 22px;
+  text-align: center;
+}
+
+.phone-contact-avatar--large {
+  width: 92px;
+  height: 92px;
+  font-size: 32px;
+}
+
+.phone-contact-hero h2 {
+  max-width: 100%;
+  margin: 12px 0 2px;
+  overflow: hidden;
+  font-size: 24px;
+  letter-spacing: -0.45px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.phone-contact-hero p {
+  margin: 0;
+  color: #8e8e93;
+  font-size: 14px;
+}
+
+.phone-contact-hero .phone-contact-organization {
+  margin-top: 2px;
+  color: rgba(255, 255, 255, 0.72);
+  font-size: 15px;
+  font-weight: 500;
+}
+
+.phone-contact-actions {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+  width: 100%;
+  margin-top: 20px;
+}
+
+.phone-contact-actions button {
+  display: flex;
+  min-width: 0;
+  min-height: 70px;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  border: 0;
+  border-radius: 14px;
+  background: rgba(118, 118, 128, 0.15);
+  color: #0a84ff;
+  font: inherit;
+  font-size: 12px;
+}
+
+.phone-contact-actions button > span {
+  display: flex;
+  min-height: 25px;
+  align-items: center;
+}
+
+.phone-own-profile-card {
+  overflow: hidden;
+  border-radius: 16px;
+  background: rgba(118, 118, 128, 0.12);
+}
+
+.phone-own-profile-card > div {
+  display: grid;
+  grid-template-columns: 32px minmax(0, 1fr);
+  min-height: 62px;
+  align-items: center;
+  gap: 8px;
+  margin-left: 14px;
+  padding-right: 14px;
+}
+
+.phone-own-profile-card > div:not(:last-child) {
+  border-bottom: 1px solid rgba(142, 142, 147, 0.2);
+}
+
+.phone-own-profile-card > div > span {
+  display: flex;
+  width: 30px;
+  height: 30px;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background: #0a84ff;
+  color: white;
+}
+
+.phone-own-profile-card p {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  margin: 0;
+}
+
+.phone-own-profile-card small {
+  color: #8e8e93;
+  font-size: 11px;
+}
+
+.phone-own-profile-card strong {
+  overflow: hidden;
+  margin-top: 2px;
+  font-size: 14px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.phone-history-card {
+  overflow: hidden;
+  border-radius: 16px;
+  background: rgba(118, 118, 128, 0.12);
+}
+
+.phone-history-card h3 {
+  margin: 0;
+  padding: 13px 14px 10px;
+  font-size: 15px;
+}
+
+.phone-history-row {
+  display: grid;
+  grid-template-columns: 26px minmax(0, 1fr) auto;
+  align-items: center;
+  min-height: 58px;
+  gap: 8px;
+  margin-left: 14px;
+  padding-right: 14px;
+  border-top: 1px solid rgba(142, 142, 147, 0.2);
+}
+
+.phone-history-direction {
+  color: #0a84ff;
+}
+
+.phone-history-direction--missed {
+  color: #ff453a;
+}
+
+.phone-history-copy {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+}
+
+.phone-history-copy strong {
+  font-size: 14px;
+}
+
+.phone-history-copy small,
+.phone-history-row time,
+.phone-history-empty {
+  color: #8e8e93;
+  font-size: 11px;
+}
+
+.phone-history-row time {
+  white-space: nowrap;
+}
+
+.phone-history-empty {
+  margin: 0;
+  padding: 18px 14px;
+  text-align: center;
+}
+
+.phone-call-content--profile {
+  background: transparent;
+  color: #fff;
+  scroll-behavior: smooth;
+}
+
+.phone-calls-app--profile {
+  background: linear-gradient(
+    180deg,
+    #a8b3b7 0,
+    #8991a2 18%,
+    #172f50 55%,
+    #061426 100%
+  ) !important;
+  color: #fff;
+}
+
+.phone-contact-detail {
+  position: relative;
+  padding: 0 15px 112px;
+}
+
+.phone-detail-header {
+  position: sticky;
+  z-index: 12;
+  top: 0;
+  display: grid;
+  height: 58px;
+  grid-template-columns: 48px minmax(0, 1fr) minmax(48px, auto);
+  align-items: start;
+  gap: 8px;
+  margin: 0 -15px;
+  padding: 7px 15px;
+  overflow: visible;
+  transition:
+    height 360ms cubic-bezier(0.22, 1, 0.36, 1),
+    background 260ms ease,
+    border-color 260ms ease,
+    border-radius 260ms ease,
+    box-shadow 260ms ease,
+    backdrop-filter 260ms ease;
+}
+
+.phone-contact-detail--compact .phone-detail-header {
+  height: 156px;
+  border-bottom: 1px solid rgba(100, 168, 255, 0.2);
+  border-radius: 0 0 22px 22px;
+  background: linear-gradient(
+    180deg,
+    rgba(32, 41, 51, 0.97) 0%,
+    rgba(31, 34, 51, 0.96) 56%,
+    rgba(19, 47, 78, 0.94) 100%
+  );
+  box-shadow:
+    inset 0 -1px 0 rgba(255, 255, 255, 0.05),
+    0 14px 30px rgba(9, 7, 25, 0.28);
+  backdrop-filter: blur(30px) saturate(155%);
+  -webkit-backdrop-filter: blur(30px) saturate(155%);
+}
+
+.phone-detail-header-button,
+.phone-detail-edit {
+  min-width: 0;
+  height: 44px;
+  padding: 0;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  color: #fff;
+  background: rgba(21, 35, 45, 0.88);
+  box-shadow: 0 2px 9px rgba(7, 12, 20, 0.16);
+}
+
+.phone-detail-header-button {
+  width: 44px;
+}
+
+.phone-detail-edit {
+  justify-self: end;
+  width: auto;
+  min-width: 86px;
+  padding: 0 17px;
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.phone-detail-edit-spacer {
+  width: 44px;
+}
+
+.phone-detail-compact-center {
+  position: static;
+  min-width: 0;
+  height: 44px;
+}
+
+.phone-detail-compact-title {
+  display: -webkit-box;
+  max-width: 190px;
+  margin: 1px auto 0;
+  overflow: hidden;
+  color: #fff;
+  font-size: 19px;
+  font-weight: 700;
+  letter-spacing: -0.25px;
+  line-height: 1.12;
+  opacity: 0;
+  text-align: center;
+  text-overflow: ellipsis;
+  text-shadow: 0 1px 3px rgba(20, 25, 35, 0.12);
+  transform: translateY(-10px) scale(0.94);
+  transition:
+    opacity 180ms ease,
+    transform 340ms cubic-bezier(0.22, 1, 0.36, 1);
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.phone-contact-detail--compact .phone-detail-compact-title {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+  transition-delay: 55ms;
+}
+
+.phone-detail-compact-actions {
+  position: absolute;
+  top: 60px;
+  left: 50%;
+  display: grid;
+  width: max-content;
+  grid-template-columns: repeat(4, 62px);
+  justify-content: center;
+  gap: 12px;
+  opacity: 0;
+  pointer-events: none;
+  transform: translate(-50%, -18px) scale(0.9);
+  transform-origin: top center;
+  transition:
+    opacity 180ms ease,
+    transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.phone-contact-detail--compact .phone-detail-compact-actions {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translate(-50%, 0) scale(1);
+  transition-delay: 80ms;
+}
+
+.phone-contact-hero {
+  padding: 31px 0 19px;
+}
+
+.phone-contact-avatar--large {
+  width: 148px;
+  height: 148px;
+  border: 1px solid rgba(255, 255, 255, 0.28);
+  background: linear-gradient(
+    155deg,
+    rgba(176, 188, 195, 0.74),
+    rgba(45, 105, 158, 0.66)
+  );
+  box-shadow:
+    inset 0 1px 2px rgba(255, 255, 255, 0.38),
+    0 2px 3px rgba(18, 15, 43, 0.25);
+  font-size: 64px;
+  font-weight: 400;
+}
+
+.phone-contact-hero h2 {
+  margin: 14px 0 0;
+  color: #fff;
+  font-size: 29px;
+  font-weight: 700;
+  letter-spacing: -0.65px;
+}
+
+.phone-contact-actions {
+  display: grid;
+  width: 100%;
+  grid-template-columns: repeat(4, 62px);
+  justify-content: center;
+  gap: 12px;
+  margin-top: 22px;
+}
+
+.phone-profile-action {
+  width: 62px;
+  min-width: 62px;
+  height: 62px;
+  min-height: 62px;
+  padding: 0;
+  border: 1px solid rgba(10, 132, 255, 0.58);
+  color: #fff;
+  background: rgba(18, 82, 145, 0.72);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.08),
+    0 4px 14px rgba(13, 9, 33, 0.18);
+}
+
+.phone-profile-action:disabled {
+  color: rgba(255, 255, 255, 0.32);
+  opacity: 1;
+}
+
+.phone-profile-action--compact {
+  width: 62px;
+  min-width: 62px;
+  height: 62px;
+  min-height: 62px;
+  border-color: rgba(255, 255, 255, 0.26);
+  background: rgba(24, 35, 45, 0.82);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.1),
+    0 5px 15px rgba(20, 24, 37, 0.16);
+  transition:
+    background-color 140ms ease,
+    transform 140ms ease;
+}
+
+.phone-profile-action--compact:active {
+  background: rgba(40, 55, 67, 0.9);
+  transform: scale(0.92);
+}
+
+.phone-profile-content {
+  display: grid;
+  gap: 12px;
+}
+
+.phone-profile-card,
+.phone-own-profile-card,
+.phone-history-card {
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.035);
+  border-radius: 24px;
+  color: #fff;
+  background: rgba(18, 43, 69, 0.8);
+  box-shadow: 0 8px 22px rgba(5, 4, 20, 0.12);
+  backdrop-filter: blur(20px) saturate(125%);
+  -webkit-backdrop-filter: blur(20px) saturate(125%);
+}
+
+.phone-profile-info-card > button,
+.phone-profile-options-card > button,
+.phone-profile-single-option > button {
+  display: flex;
+  width: calc(100% - 30px);
+  min-height: 66px;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  margin: 0 15px;
+  padding: 0;
+  border: 0;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.17);
+  color: inherit;
+  background: transparent;
+  font: inherit;
+  text-align: left;
+}
+
+.phone-profile-info-card > button:last-of-type,
+.phone-profile-options-card > button:last-child,
+.phone-profile-single-option > button:last-child {
+  border-bottom: 0;
+}
+
+.phone-profile-info-card > button > span {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+}
+
+.phone-profile-info-card small {
+  color: #64a8ff;
+  font-size: 13px;
+}
+
+.phone-profile-info-card strong {
+  margin-top: 2px;
+  overflow: hidden;
+  font-size: 15px;
+  font-weight: 400;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.phone-profile-info-card > button > svg {
+  flex: none;
+  color: #0a84ff;
+  transition:
+    color 160ms ease-out,
+    filter 160ms ease-out,
+    transform 160ms ease-out;
+}
+
+.phone-profile-notes {
+  min-height: 105px;
+  margin: 0 15px;
+  padding: 17px 0;
+  border-top: 1px solid rgba(255, 255, 255, 0.17);
+  font-size: 15px;
+}
+
+.phone-profile-notes > span {
+  display: block;
+  color: #fff;
+}
+
+.phone-profile-notes > p {
+  margin: 8px 0 0;
+  color: rgba(255, 255, 255, 0.72);
+  line-height: 1.4;
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+}
+
+.phone-profile-options-card > button,
+.phone-profile-single-option > button {
+  min-height: 54px;
+  font-size: 15px;
+}
+
+.phone-profile-options-card > button > span,
+.phone-profile-single-option > button > span {
+  transition:
+    color 160ms ease-out,
+    transform 160ms ease-out;
+}
+
+.phone-profile-options-card > button:disabled,
+.phone-profile-single-option > button:disabled {
+  color: inherit;
+  opacity: 1;
+}
+
+.phone-history-card h3 {
+  padding: 15px 16px 11px;
+  color: #fff;
+}
+
+.phone-history-row {
+  margin-left: 15px;
+  padding-right: 15px;
+  border-top-color: rgba(255, 255, 255, 0.17);
+}
+
+.phone-history-copy small,
+.phone-history-row time,
+.phone-history-empty {
+  color: rgba(255, 255, 255, 0.62);
+}
+
+.phone-contact-editor-sheet {
+  width: 100%;
+  height: calc(100% - 52px);
+  max-height: calc(100% - 52px);
+  border-radius: 30px 30px 0 0;
+  background: #3a3a3c;
+  box-shadow: 0 -10px 35px rgba(0, 0, 0, 0.28);
+}
+
+.phone-contact-editor {
+  position: relative;
+  display: flex;
+  height: 100%;
+  min-height: 0;
+  flex-direction: column;
+  overflow: hidden;
+  border-radius: inherit;
+  color: #fff;
+  background: #3a3a3c;
+}
+
+.phone-contact-editor::before {
+  position: absolute;
+  z-index: 3;
+  top: 7px;
+  left: 50%;
+  width: 44px;
+  height: 5px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.38);
+  content: '';
+  transform: translateX(-50%);
+}
+
+.phone-contact-editor__header {
+  position: relative;
+  z-index: 2;
+  display: grid;
+  height: 78px;
+  padding: 18px 18px 6px;
+  grid-template-columns: 52px 1fr 52px;
+  align-items: center;
+  flex: 0 0 78px;
+  background: linear-gradient(180deg, #3a3a3c 72%, rgba(58, 58, 60, 0));
+}
+
+.phone-contact-editor__header h2 {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 700;
+  text-align: center;
+}
+
+.phone-contact-editor__header-button {
+  width: 46px;
+  min-width: 46px;
+  height: 46px;
+  min-height: 46px;
+  padding: 0;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  color: #fff;
+  background: rgba(28, 28, 30, 0.58);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
+}
+
+.phone-contact-editor__header-button:last-child {
+  justify-self: end;
+  background: rgba(72, 72, 74, 0.76);
+}
+
+.phone-contact-editor__scroll {
+  min-height: 0;
+  flex: 1;
+  padding: 2px 14px 42px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-width: none;
+  touch-action: pan-y;
+  -webkit-overflow-scrolling: touch;
+}
+
+.phone-contact-editor__scroll::-webkit-scrollbar {
+  display: none;
+}
+
+.phone-contact-editor__avatar {
+  display: grid;
+  width: 154px;
+  height: 154px;
+  margin: 0;
+  padding: 0;
+  place-items: center;
+  border: 1px solid rgba(255, 255, 255, 0.11);
+  border-radius: 50%;
+  color: #fff;
+  background: linear-gradient(155deg, #4b92d1 0%, #195287 100%);
+  box-shadow:
+    inset 0 1px 1px rgba(255, 255, 255, 0.16),
+    0 8px 18px rgba(5, 42, 78, 0.24);
+  cursor: pointer;
+  overflow: hidden;
+}
+
+.phone-contact-editor__avatar-wrap {
+  position: relative;
+  width: 154px;
+  height: 154px;
+  margin: 4px auto 12px;
+  border-radius: 50%;
+}
+
+.phone-contact-editor__remove-photo {
+  position: absolute !important;
+  z-index: 2;
+  inset: 0;
+  display: flex !important;
+  width: 100% !important;
+  height: 100% !important;
+  flex-direction: column !important;
+  gap: 7px !important;
+  padding: 0 !important;
+  border: 0 !important;
+  border-radius: 50% !important;
+  color: #fff !important;
+  background: rgba(7, 35, 62, 0.7) !important;
+  opacity: 0;
+  pointer-events: none;
+  transform: scale(0.96);
+  transition:
+    opacity 170ms ease,
+    transform 170ms ease !important;
+}
+
+.phone-contact-editor__remove-photo > span {
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.phone-contact-editor__avatar-wrap--has-photo:hover
+  .phone-contact-editor__remove-photo,
+.phone-contact-editor__remove-photo:focus-visible {
+  opacity: 1;
+  pointer-events: auto;
+  transform: scale(1);
+}
+
+.phone-contact-editor__avatar img {
+  transition:
+    filter 170ms ease,
+    transform 170ms ease;
+}
+
+.phone-contact-editor__avatar-wrap--has-photo:hover
+  .phone-contact-editor__avatar img {
+  filter: brightness(0.58);
+  transform: scale(1.015);
+}
+
+.phone-contact-editor__avatar span {
+  font-size: 53px;
+  font-weight: 600;
+  letter-spacing: -2px;
+}
+
+.phone-contact-editor__photo {
+  margin-bottom: 22px;
+  text-align: center;
+}
+
+.phone-contact-editor__photo-actions {
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+}
+
+.phone-contact-editor__photo-actions :deep(button) {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 34px;
+  padding-inline: 16px;
+  color: #0a84ff;
+}
+
+.phone-contact-editor__name-list,
+.phone-contact-editor__number-list,
+.phone-contact-editor__notes-list {
+  margin: 0 0 16px;
+  color: #fff;
+}
+
+.phone-contact-editor__name-list :deep(ul),
+.phone-contact-editor__number-list :deep(ul),
+.phone-contact-editor__notes-list :deep(ul) {
+  overflow: hidden;
+  border-radius: 24px;
+  background: #2c2c2e;
+}
+
+.phone-contact-editor__name-list :deep(li),
+.phone-contact-editor__number-list :deep(li),
+.phone-contact-editor__notes-list :deep(li) {
+  min-height: 58px;
+  background: transparent;
+}
+
+.phone-contact-editor__name-list :deep(input),
+.phone-contact-editor__number-list :deep(input),
+.phone-contact-editor__notes-list :deep(textarea) {
+  color: #fff;
+  font-size: 17px;
+}
+
+.phone-contact-editor__name-list :deep(input::placeholder),
+.phone-contact-editor__number-list :deep(input::placeholder),
+.phone-contact-editor__notes-list :deep(textarea::placeholder) {
+  color: #a7a7ac;
+  opacity: 1;
+}
+
+.phone-contact-editor__notes-list :deep(textarea) {
+  min-height: 112px;
+  resize: none;
+  line-height: 1.35;
+}
+
+.phone-contact-editor__add-icon {
+  display: grid;
+  width: 25px;
+  height: 25px;
+  place-items: center;
+  border-radius: 50%;
+  color: #fff;
+  background: #30d158;
+}
+
+.phone-contact-editor__error {
+  margin: -4px 14px 16px;
+  color: #ff6961;
+  font-size: 13px;
+  text-align: center;
+}
+
+.phone-contact-editor__delete {
+  width: 100%;
+  min-height: 56px;
+  border-radius: 22px;
+  color: #ff453a;
+  background: #2c2c2e;
+  font-size: 16px;
+}
+
+.phone-contact-editor--light {
+  color: #111;
+  background: #e5e5ea;
+}
+
+.phone-contact-editor--light .phone-contact-editor__header {
+  background: linear-gradient(180deg, #e5e5ea 72%, rgba(229, 229, 234, 0));
+}
+
+.phone-contact-editor--light .phone-contact-editor__header-button {
+  border-color: rgba(60, 60, 67, 0.18);
+  color: #111;
+  background: rgba(255, 255, 255, 0.62);
+}
+
+.phone-contact-editor--light .phone-contact-editor__name-list,
+.phone-contact-editor--light .phone-contact-editor__number-list,
+.phone-contact-editor--light .phone-contact-editor__notes-list {
+  color: #111;
+}
+
+.phone-contact-editor--light .phone-contact-editor__name-list :deep(ul),
+.phone-contact-editor--light .phone-contact-editor__number-list :deep(ul),
+.phone-contact-editor--light .phone-contact-editor__notes-list :deep(ul),
+.phone-contact-editor--light .phone-contact-editor__delete {
+  background: rgba(255, 255, 255, 0.72);
+}
+
+.phone-contact-editor--light .phone-contact-editor__name-list :deep(input),
+.phone-contact-editor--light .phone-contact-editor__number-list :deep(input),
+.phone-contact-editor--light .phone-contact-editor__notes-list :deep(textarea) {
+  color: #111;
+}
+
+@media (max-width: 360px) {
+  .phone-detail-header {
+    grid-template-columns: 44px minmax(0, 1fr) minmax(44px, auto);
+    gap: 5px;
+  }
+
+  .phone-detail-edit {
+    min-width: 74px;
+    padding: 0 12px;
+    font-size: 14px;
+  }
+
+  .phone-profile-action--compact {
+    width: 54px;
+    min-width: 54px;
+    height: 54px;
+    min-height: 54px;
+  }
+
+  .phone-detail-compact-actions {
+    grid-template-columns: repeat(4, 54px);
+    gap: 9px;
+  }
+
+  .phone-detail-compact-title {
+    max-width: 150px;
+  }
+
+  .phone-contact-actions {
+    grid-template-columns: repeat(4, 56px);
+    gap: 9px;
+  }
+
+  .phone-profile-action:not(.phone-profile-action--compact) {
+    width: 56px;
+    min-width: 56px;
+    height: 56px;
+    min-height: 56px;
+  }
+}
+
+.phone-calls-app button:not(:disabled),
+.phone-contact-editor button:not(:disabled) {
+  cursor: pointer;
+}
+
+.phone-recents-filter button,
+.phone-recents-search,
+.phone-contacts-search,
+.phone-recent-row,
+.phone-recent-info,
+.phone-contacts-add,
+.phone-my-card,
+.phone-contact-row,
+.phone-contact-index button,
+.phone-keypad-call,
+.phone-profile-action,
+.phone-detail-header-button,
+.phone-detail-edit,
+.phone-profile-info-card > button,
+.phone-profile-options-card > button,
+.phone-profile-single-option > button,
+.phone-call-more__item,
+.phone-contact-editor__avatar,
+.phone-contact-editor__header-button,
+.phone-contact-editor__delete,
+.phone-contact-editor__photo-actions :deep(button) {
+  transition:
+    color 160ms ease-out,
+    background-color 160ms ease-out,
+    border-color 160ms ease-out,
+    box-shadow 160ms ease-out,
+    filter 160ms ease-out,
+    transform 160ms ease-out;
+}
+
+.phone-calls-app button:focus-visible,
+.phone-contact-editor button:focus-visible {
+  outline: 2px solid #64a8ff;
+  outline-offset: 2px;
+}
+
+.phone-keypad-key:hover,
+.phone-keypad-delete:hover {
+  border-color: rgba(255, 255, 255, 0.14);
+  background: linear-gradient(
+    180deg,
+    rgba(68, 68, 70, 0.94),
+    rgba(38, 38, 40, 0.9)
+  );
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.08),
+    0 3px 9px rgba(0, 0, 0, 0.2);
+  transform: translateY(-1px);
+}
+
+.phone-keypad-call:hover {
+  border-color: rgba(151, 245, 161, 0.9);
+  background: linear-gradient(180deg, #48aa54, #378c42);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.26),
+    0 6px 16px rgba(52, 199, 89, 0.3);
+  transform: translateY(-2px) scale(1.015);
+}
+
+.phone-in-call-keypad__grid button:hover {
+  border-color: rgba(255, 255, 255, 0.22);
+  background: linear-gradient(
+    180deg,
+    rgba(255, 255, 255, 0.2),
+    rgba(255, 255, 255, 0.12)
+  );
+  box-shadow: 0 3px 9px rgba(10, 30, 80, 0.15);
+  transform: translateY(-1px);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .phone-keypad-suggestion:hover .phone-keypad-suggestion__copy strong {
+    color: #68adff;
+  }
+
+  .phone-recents-filter button:not(.active):hover {
+    background: rgba(118, 118, 128, 0.22);
+  }
+
+  .phone-recents-search:hover,
+  .phone-contacts-search:hover {
+    background: rgba(118, 118, 128, 0.24);
+    box-shadow: inset 0 0 0 1px rgba(142, 142, 147, 0.18);
+  }
+
+  .phone-recent-row:has(button:hover),
+  .phone-my-card:hover,
+  .phone-contact-row:hover {
+    border-radius: 14px;
+    background: rgba(118, 118, 128, 0.12);
+    box-shadow: inset 0 0 0 1px rgba(142, 142, 147, 0.08);
+  }
+
+  .phone-recent-info:hover,
+  .phone-contacts-add:hover,
+  .phone-contact-index button:hover {
+    background: rgba(10, 132, 255, 0.16);
+    color: #55aaff;
+    transform: translateY(-1px);
+  }
+
+  .phone-call-action:not(:disabled):not(.phone-call-action--end):not(
+      .phone-call-action--answer
+    ):hover::before {
+    background: rgba(170, 187, 231, 0.32);
+    box-shadow:
+      inset 0 1px 0 rgba(255, 255, 255, 0.12),
+      0 4px 12px rgba(11, 23, 62, 0.16);
+    transform: translateX(-50%) translateY(-1px) scale(1.012);
+  }
+
+  .phone-call-action--end:not(:disabled):hover::before {
+    border-color: rgba(255, 190, 185, 0.92);
+    background: #ff3b30;
+    box-shadow:
+      inset 0 1px 0 rgba(255, 255, 255, 0.2),
+      0 5px 14px rgba(215, 45, 34, 0.34);
+    transform: translateX(-50%) translateY(-1px) scale(1.012);
+  }
+
+  .phone-call-action--answer:not(:disabled):hover::before {
+    border-color: rgba(190, 255, 198, 0.9);
+    background: #3bc45d;
+    box-shadow:
+      inset 0 1px 0 rgba(255, 255, 255, 0.2),
+      0 5px 14px rgba(52, 168, 83, 0.3);
+    transform: translateX(-50%) translateY(-1px) scale(1.012);
+  }
+
+  .phone-call-more__item:not(:disabled):hover {
+    border-color: rgba(140, 165, 229, 0.66) !important;
+    background: rgba(49, 57, 84, 0.68) !important;
+    transform: translateY(-1px);
+  }
+
+  .phone-detail-header-button:not(:disabled):hover,
+  .phone-detail-edit:not(:disabled):hover {
+    border-color: rgba(255, 255, 255, 0.22);
+    background: rgba(37, 54, 66, 0.96);
+    transform: translateY(-1px);
+  }
+
+  .phone-profile-action:not(:disabled):hover {
+    border-color: rgba(100, 168, 255, 0.7);
+    background: rgba(22, 92, 158, 0.84);
+    box-shadow:
+      inset 0 1px 0 rgba(255, 255, 255, 0.1),
+      0 4px 12px rgba(5, 42, 78, 0.2);
+    transform: translateY(-1px);
+  }
+
+  .phone-profile-options-card > button:not(:disabled):hover > span,
+  .phone-profile-single-option > button:not(:disabled):hover > span {
+    color: #64a8ff;
+    transform: translateX(2px);
+  }
+
+  .phone-profile-info-card > button:not(:disabled):hover > svg {
+    color: #64a8ff;
+    filter: brightness(1.08);
+    transform: translateX(1px);
+  }
+
+  .phone-contact-editor__avatar-wrap:not(
+      .phone-contact-editor__avatar-wrap--has-photo
+    ):hover
+    .phone-contact-editor__avatar {
+    border-color: rgba(255, 255, 255, 0.22);
+    filter: brightness(1.06);
+    transform: scale(1.012);
+  }
+
+  .phone-contact-editor__header-button:not(:disabled):hover,
+  .phone-contact-editor__photo-actions :deep(button:not(:disabled):hover) {
+    filter: brightness(1.08);
+    transform: translateY(-1px);
+  }
+
+  .phone-contact-editor__delete:not(:disabled):hover {
+    background: #38383a;
+  }
+
+  .phone-calls-app :deep([data-active-tab] button[aria-pressed='false']:hover) {
+    background: rgba(118, 118, 128, 0.14);
+    transform: translateY(-1px);
+  }
+
+}
+
+@media (hover: none) {
+  .phone-contact-editor__remove-photo {
+    inset: auto 5px 5px auto;
+    width: 44px !important;
+    height: 44px !important;
+    background: rgba(7, 35, 62, 0.86) !important;
+    opacity: 1;
+    pointer-events: auto;
+    transform: none;
+  }
+
+  .phone-contact-editor__remove-photo > span {
+    display: none;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .phone-detail-header,
+  .phone-detail-compact-title,
+  .phone-detail-compact-actions,
+  .phone-profile-action--compact,
+  .phone-calls-app button,
+  .phone-contact-editor button {
+    transition-duration: 1ms;
+    transition-delay: 0ms;
+  }
+}
+
+.phone-app--light .phone-recents-filter,
+.phone-app--light .phone-recents-search,
+.phone-app--light .phone-contacts-add,
+.phone-app--light .phone-contacts-search,
+.phone-app--light .phone-recent-info,
+.phone-app--light .phone-contact-actions button,
+.phone-app--light .phone-own-profile-card,
+.phone-app--light .phone-history-card {
+  background: rgba(118, 118, 128, 0.1);
+}
+
+.phone-app--light .phone-keypad-suggestion {
+  border-color: rgba(60, 60, 67, 0.1);
+  color: #111;
+  background: rgba(229, 229, 234, 0.88);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.72),
+    0 4px 12px rgba(60, 60, 67, 0.12);
+}
+
+.phone-app--light .phone-keypad-suggestion__copy small {
+  color: #6e6e73;
+}
+
+.phone-app--light .phone-keypad-key,
+.phone-app--light .phone-keypad-delete {
+  border-color: rgba(60, 60, 67, 0.1);
+  background: linear-gradient(
+    180deg,
+    rgba(255, 255, 255, 0.9),
+    rgba(229, 229, 234, 0.88)
+  );
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.72),
+    0 5px 14px rgba(60, 60, 67, 0.14);
+  color: #000;
+}
+
+.phone-app--light .phone-keypad-key:active,
+.phone-app--light .phone-keypad-delete:active {
+  background: #d1d1d6;
+}
+
+.phone-app--light .phone-keypad-key:hover,
+.phone-app--light .phone-keypad-delete:hover {
+  border-color: rgba(60, 60, 67, 0.12);
+  background: linear-gradient(
+    180deg,
+    rgba(248, 248, 250, 0.94),
+    rgba(222, 222, 227, 0.9)
+  );
+}
+</style>
diff --git a/frontend/testserver/index.cjs b/frontend/testserver/index.cjs
index ff47641..137bbda 100644
--- a/frontend/testserver/index.cjs
+++ b/frontend/testserver/index.cjs
@@ -1045,8 +1045,60 @@ const mockHousingOverview = {
   ],
 }
 
-let contactSequence = 2
+let contactSequence = 40
 const contacts = [
+  {
+    avatar_media_id: 1,
+    avatar_url: 'https://picsum.photos/seed/sky-phone-1/600/800',
+    created_at: isoTime(-42 * 86_400_000),
+    favorite: true,
+    id: 'contact-alex',
+    name: 'Alex Rivera',
+    notes: 'Meeting on Friday at 18:00 near the bank.',
+    organization: 'Maze Bank',
+    phone_number: '5551110001',
+    updated_at: isoTime(-6 * 86_400_000),
+  },
+  {
+    created_at: isoTime(-38 * 86_400_000),
+    id: 'contact-alexander',
+    name: 'Alexander Stone',
+    phone_number: '5551110002',
+    updated_at: isoTime(-8 * 86_400_000),
+  },
+  {
+    created_at: isoTime(-21 * 86_400_000),
+    id: 'contact-andre',
+    name: 'Andre Heinicke',
+    phone_number: '5551110003',
+    updated_at: isoTime(-4 * 86_400_000),
+  },
+  {
+    created_at: isoTime(-34 * 86_400_000),
+    favorite: true,
+    id: 'contact-benni',
+    name: 'Benni Parker',
+    notes: 'Call about the Sultan RS repair estimate.',
+    organization: "Benny's Motor Works",
+    phone_number: '5551110004',
+    updated_at: isoTime(-12 * 86_400_000),
+  },
+  {
+    avatar_media_id: 3,
+    avatar_url: 'https://picsum.photos/seed/sky-phone-3/800/600',
+    created_at: isoTime(-18 * 86_400_000),
+    id: 'contact-bryce',
+    name: 'Bryce Walker',
+    phone_number: '5551110005',
+    updated_at: isoTime(-7 * 86_400_000),
+  },
+  {
+    created_at: isoTime(-27 * 86_400_000),
+    id: 'contact-charlie',
+    name: 'Charlie Davis',
+    phone_number: '5551110006',
+    updated_at: isoTime(-11 * 86_400_000),
+  },
   {
     created_at: '2026-08-04 12:00:00',
     id: 'contact-1',
@@ -1054,6 +1106,185 @@ const contacts = [
     phone_number: '5558675309',
     updated_at: '2026-08-04 12:00:00',
   },
+  {
+    created_at: isoTime(-14 * 86_400_000),
+    id: 'contact-morgan',
+    name: 'Morgan Reed',
+    phone_number: '5550192847',
+    updated_at: isoTime(-2 * 86_400_000),
+  },
+  {
+    created_at: isoTime(-30 * 86_400_000),
+    id: 'contact-jamie',
+    name: 'Jamie Chen',
+    phone_number: '5559876543',
+    updated_at: isoTime(-30 * 86_400_000),
+  },
+  {
+    created_at: isoTime(-5 * 86_400_000),
+    id: 'contact-mechanic',
+    name: 'Downtown Customs',
+    phone_number: '5550100101',
+    updated_at: isoTime(-5 * 86_400_000),
+  },
+  {
+    avatar_media_id: 4,
+    avatar_url: 'https://picsum.photos/seed/sky-phone-4/800/600',
+    created_at: isoTime(-3 * 86_400_000),
+    favorite: true,
+    id: 'contact-taxi',
+    name: 'Los Santos Taxi',
+    organization: 'Los Santos Taxi Co.',
+    phone_number: '5552222222',
+    updated_at: isoTime(-3 * 86_400_000),
+  },
+  {
+    created_at: isoTime(-22 * 86_400_000),
+    id: 'contact-daniel',
+    name: 'Daniel Price',
+    phone_number: '5551110007',
+    updated_at: isoTime(-3 * 86_400_000),
+  },
+  {
+    created_at: isoTime(-20 * 86_400_000),
+    id: 'contact-emily',
+    name: 'Emily Hart',
+    phone_number: '5551110008',
+    updated_at: isoTime(-2 * 86_400_000),
+  },
+  {
+    created_at: isoTime(-31 * 86_400_000),
+    id: 'contact-franklin',
+    name: 'Franklin Miles',
+    phone_number: '5551110009',
+    updated_at: isoTime(-9 * 86_400_000),
+  },
+  {
+    created_at: isoTime(-25 * 86_400_000),
+    id: 'contact-grace',
+    name: 'Grace Carter',
+    phone_number: '5551110010',
+    updated_at: isoTime(-4 * 86_400_000),
+  },
+  {
+    created_at: isoTime(-19 * 86_400_000),
+    id: 'contact-hannah',
+    name: 'Hannah Brooks',
+    phone_number: '5551110011',
+    updated_at: isoTime(-5 * 86_400_000),
+  },
+  {
+    created_at: isoTime(-17 * 86_400_000),
+    id: 'contact-ivan',
+    name: 'Ivan Petrov',
+    phone_number: '5551110012',
+    updated_at: isoTime(-6 * 86_400_000),
+  },
+  {
+    created_at: isoTime(-16 * 86_400_000),
+    id: 'contact-kevin',
+    name: 'Kevin Adams',
+    phone_number: '5551110013',
+    updated_at: isoTime(-2 * 86_400_000),
+  },
+  {
+    created_at: isoTime(-15 * 86_400_000),
+    id: 'contact-naomi',
+    name: 'Naomi King',
+    phone_number: '5551110014',
+    updated_at: isoTime(-2 * 86_400_000),
+  },
+  {
+    created_at: isoTime(-13 * 86_400_000),
+    id: 'contact-olivia',
+    name: 'Olivia Moore',
+    phone_number: '5551110015',
+    updated_at: isoTime(-2 * 86_400_000),
+  },
+  {
+    created_at: isoTime(-12 * 86_400_000),
+    id: 'contact-paul',
+    name: 'Paul Walker',
+    phone_number: '5551110016',
+    updated_at: isoTime(-4 * 86_400_000),
+  },
+  {
+    created_at: isoTime(-11 * 86_400_000),
+    id: 'contact-quinn',
+    name: 'Quinn Bailey',
+    phone_number: '5551110017',
+    updated_at: isoTime(-3 * 86_400_000),
+  },
+  {
+    created_at: isoTime(-10 * 86_400_000),
+    id: 'contact-riley',
+    name: 'Riley Cooper',
+    phone_number: '5551110018',
+    updated_at: isoTime(-2 * 86_400_000),
+  },
+  {
+    created_at: isoTime(-9 * 86_400_000),
+    id: 'contact-sofia',
+    name: 'Sofia Bennett',
+    phone_number: '5551110019',
+    updated_at: isoTime(-2 * 86_400_000),
+  },
+  {
+    created_at: isoTime(-8 * 86_400_000),
+    id: 'contact-thomas',
+    name: 'Thomas Reed',
+    phone_number: '5551110020',
+    updated_at: isoTime(-2 * 86_400_000),
+  },
+  {
+    created_at: isoTime(-7 * 86_400_000),
+    id: 'contact-ursula',
+    name: 'Ursula Grant',
+    phone_number: '5551110021',
+    updated_at: isoTime(-2 * 86_400_000),
+  },
+  {
+    created_at: isoTime(-6 * 86_400_000),
+    id: 'contact-victor',
+    name: 'Victor Young',
+    phone_number: '5551110022',
+    updated_at: isoTime(-2 * 86_400_000),
+  },
+  {
+    created_at: isoTime(-5 * 86_400_000),
+    id: 'contact-wendy',
+    name: 'Wendy Clark',
+    phone_number: '5551110023',
+    updated_at: isoTime(-2 * 86_400_000),
+  },
+  {
+    created_at: isoTime(-4 * 86_400_000),
+    id: 'contact-xavier',
+    name: 'Xavier Cole',
+    phone_number: '5551110024',
+    updated_at: isoTime(-2 * 86_400_000),
+  },
+  {
+    created_at: isoTime(-3 * 86_400_000),
+    id: 'contact-yakup',
+    name: 'Yakup Broooooo',
+    phone_number: '5551110025',
+    updated_at: isoTime(-86_400_000),
+  },
+  {
+    created_at: isoTime(-2 * 86_400_000),
+    id: 'contact-zoe',
+    name: 'Zoe Martinez',
+    phone_number: '5551110026',
+    updated_at: isoTime(-86_400_000),
+  },
+  {
+    created_at: isoTime(-86_400_000),
+    id: 'contact-market',
+    name: '24/7 Supermarket',
+    phone_number: '5552470000',
+    updated_at: isoTime(-3_600_000),
+  },
 ]
 const attachmentAssets = {
   gif: new Set(['celebrate', 'hearts', 'party', 'thumbs_up', 'wow']),
@@ -1183,6 +1414,126 @@ const smsMessages = [
     recipient_number: '5558675309',
     sender_number: '5551234567',
   },
+  {
+    body: 'Das Fahrzeug ist fertig. Du kannst es jederzeit abholen.',
+    created_at: isoTime(-26 * 60 * 60_000),
+    direction: 'received',
+    id: 'sms-customs-1',
+    media_duration_ms: null,
+    media_mime: null,
+    media_payload: null,
+    media_waveform: null,
+    message_type: 'text',
+    media_asset_id: null,
+    read_at: isoTime(-25 * 60 * 60_000),
+    recipient_number: '5551234567',
+    sender_number: '5550100101',
+  },
+  {
+    body: 'Perfekt, ich komme heute Abend vorbei.',
+    created_at: isoTime(-25 * 60 * 60_000),
+    direction: 'sent',
+    id: 'sms-customs-2',
+    media_duration_ms: null,
+    media_mime: null,
+    media_payload: null,
+    media_waveform: null,
+    message_type: 'text',
+    media_asset_id: null,
+    read_at: isoTime(-25 * 60 * 60_000),
+    recipient_number: '5550100101',
+    sender_number: '5551234567',
+  },
+  {
+    body: 'Treffen wir uns um 20 Uhr am Casino?',
+    created_at: isoTime(-7 * 60 * 60_000),
+    direction: 'received',
+    id: 'sms-morgan-1',
+    media_duration_ms: null,
+    media_mime: null,
+    media_payload: null,
+    media_waveform: null,
+    message_type: 'text',
+    media_asset_id: null,
+    read_at: isoTime(-6 * 60 * 60_000),
+    recipient_number: '5551234567',
+    sender_number: '5550192847',
+  },
+  {
+    body: 'Ja, passt. Ich bin puenktlich da.',
+    created_at: isoTime(-6 * 60 * 60_000),
+    direction: 'sent',
+    id: 'sms-morgan-2',
+    media_duration_ms: null,
+    media_mime: null,
+    media_payload: null,
+    media_waveform: null,
+    message_type: 'text',
+    media_asset_id: null,
+    read_at: isoTime(-6 * 60 * 60_000),
+    recipient_number: '5550192847',
+    sender_number: '5551234567',
+  },
+  {
+    body: 'Bin in zehn Minuten bei dir.',
+    created_at: isoTime(-95 * 60_000),
+    direction: 'received',
+    id: 'sms-jamie-1',
+    media_duration_ms: null,
+    media_mime: null,
+    media_payload: null,
+    media_waveform: null,
+    message_type: 'text',
+    media_asset_id: null,
+    read_at: null,
+    recipient_number: '5551234567',
+    sender_number: '5559876543',
+  },
+  {
+    body: 'Dein Taxi wartet vor dem Haupteingang.',
+    created_at: isoTime(-38 * 60_000),
+    direction: 'received',
+    id: 'sms-taxi-1',
+    media_duration_ms: null,
+    media_mime: null,
+    media_payload: null,
+    media_waveform: null,
+    message_type: 'text',
+    media_asset_id: null,
+    read_at: null,
+    recipient_number: '5551234567',
+    sender_number: '5552222222',
+  },
+  {
+    body: 'Danke, ich komme sofort raus.',
+    created_at: isoTime(-36 * 60_000),
+    direction: 'sent',
+    id: 'sms-taxi-2',
+    media_duration_ms: null,
+    media_mime: null,
+    media_payload: null,
+    media_waveform: null,
+    message_type: 'text',
+    media_asset_id: null,
+    read_at: isoTime(-35 * 60_000),
+    recipient_number: '5552222222',
+    sender_number: '5551234567',
+  },
+  {
+    body: 'Denk bitte an die Unterlagen fuer morgen.',
+    created_at: isoTime(-12 * 60_000),
+    direction: 'received',
+    id: 'sms-alex-1',
+    media_duration_ms: null,
+    media_mime: null,
+    media_payload: null,
+    media_waveform: null,
+    message_type: 'text',
+    media_asset_id: null,
+    read_at: null,
+    recipient_number: '5551234567',
+    sender_number: '5551110001',
+  },
 ]
 const darkChatProfile = {
   id: 1,
@@ -1627,73 +1978,143 @@ const deviceData = {
 }
 let mockPasscode = ''
 let mockSecurity = { enabled: false, length: null, lockedUntil: 0 }
-let mockContacts = [
-  {
-    created_at: isoTime(-14 * 86_400_000),
-    id: 'contact-morgan',
-    name: 'Morgan Reed',
-    phone_number: '5550192847',
-    updated_at: isoTime(-2 * 86_400_000),
-  },
-  {
-    created_at: isoTime(-30 * 86_400_000),
-    id: 'contact-jamie',
-    name: 'Jamie Chen',
-    phone_number: '5559876543',
-    updated_at: isoTime(-30 * 86_400_000),
-  },
-  {
-    created_at: isoTime(-5 * 86_400_000),
-    id: 'contact-mechanic',
-    name: 'Downtown Customs',
-    phone_number: '5550100101',
-    updated_at: isoTime(-5 * 86_400_000),
-  },
-  {
-    created_at: isoTime(-3 * 86_400_000),
-    id: 'contact-taxi',
-    name: 'Los Santos Taxi',
-    phone_number: '5552222222',
-    updated_at: isoTime(-3 * 86_400_000),
-  },
-]
+const blockedCallNumbers = new Set()
 let recentCalls = [
+  {
+    call_id: 'call-alex-incoming',
+    created_at: isoTime(-8 * 60_000),
+    direction: 'incoming',
+    duration_seconds: 184,
+    id: 1,
+    other_number: '5551110001',
+    status: 'completed',
+  },
   {
     call_id: 'call-morgan-incoming',
     created_at: isoTime(-18 * 60_000),
     direction: 'incoming',
     duration_seconds: 246,
-    id: 1,
+    id: 2,
     other_number: '5550192847',
     status: 'completed',
   },
+  {
+    call_id: 'call-taxi-outgoing',
+    created_at: isoTime(-42 * 60_000),
+    direction: 'outgoing',
+    duration_seconds: 39,
+    id: 3,
+    other_number: '5552222222',
+    status: 'completed',
+  },
   {
     call_id: 'call-jamie-missed',
     created_at: isoTime(-95 * 60_000),
     direction: 'incoming',
     duration_seconds: 0,
-    id: 2,
+    id: 4,
     other_number: '5559876543',
     status: 'missed',
   },
+  {
+    call_id: 'call-emily-no-answer',
+    created_at: isoTime(-4 * 60 * 60_000),
+    direction: 'outgoing',
+    duration_seconds: 0,
+    id: 5,
+    other_number: '5551110008',
+    status: 'no_answer',
+  },
+  {
+    call_id: 'call-yakup-incoming',
+    created_at: isoTime(-8 * 60 * 60_000),
+    direction: 'incoming',
+    duration_seconds: 521,
+    id: 6,
+    other_number: '5551110025',
+    status: 'completed',
+  },
   {
     call_id: 'call-customs-outgoing',
     created_at: isoTime(-25 * 60 * 60_000),
     direction: 'outgoing',
     duration_seconds: 83,
-    id: 3,
+    id: 7,
     other_number: '5550100101',
     status: 'completed',
   },
   {
     call_id: 'call-unknown-declined',
-    created_at: isoTime(-2 * 86_400_000),
+    created_at: isoTime(-27 * 60 * 60_000),
     direction: 'incoming',
     duration_seconds: 0,
-    id: 4,
+    id: 8,
     other_number: '5554040404',
     status: 'declined',
   },
+  {
+    call_id: 'call-morgan-outgoing',
+    created_at: isoTime(-2 * 86_400_000),
+    direction: 'outgoing',
+    duration_seconds: 72,
+    id: 9,
+    other_number: '5550192847',
+    status: 'completed',
+  },
+  {
+    call_id: 'call-alex-missed',
+    created_at: isoTime(-3 * 86_400_000),
+    direction: 'incoming',
+    duration_seconds: 0,
+    id: 10,
+    other_number: '5551110001',
+    status: 'missed',
+  },
+  {
+    call_id: 'call-benni-busy',
+    created_at: isoTime(-4 * 86_400_000),
+    direction: 'outgoing',
+    duration_seconds: 0,
+    id: 11,
+    other_number: '5551110004',
+    status: 'busy',
+  },
+  {
+    call_id: 'call-sofia-incoming',
+    created_at: isoTime(-5 * 86_400_000),
+    direction: 'incoming',
+    duration_seconds: 116,
+    id: 12,
+    other_number: '5551110019',
+    status: 'completed',
+  },
+  {
+    call_id: 'call-xavier-unavailable',
+    created_at: isoTime(-6 * 86_400_000),
+    direction: 'outgoing',
+    duration_seconds: 0,
+    id: 13,
+    other_number: '5551110024',
+    status: 'unavailable',
+  },
+  {
+    call_id: 'call-market-outgoing',
+    created_at: isoTime(-7 * 86_400_000),
+    direction: 'outgoing',
+    duration_seconds: 51,
+    id: 14,
+    other_number: '5552470000',
+    status: 'completed',
+  },
+  {
+    call_id: 'call-unknown-missed',
+    created_at: isoTime(-8 * 86_400_000),
+    direction: 'incoming',
+    duration_seconds: 0,
+    id: 15,
+    other_number: '5559090909',
+    status: 'missed',
+  },
 ]
 let mockMedia = [
   {
@@ -5238,15 +5659,27 @@ app.post('/api/:endpoint', (request, response) => {
   }
   if (endpoint === 'contacts:save') {
     const name = String(request.body.name ?? '').trim()
+    const notes = String(request.body.notes ?? '').trim().slice(0, 500)
+    const organization = String(request.body.organization ?? '').trim().slice(0, 80)
     const phoneNumber = String(request.body.phoneNumber ?? '').trim()
-    if (!name || !phoneNumber) {
+    const avatarMediaId = Number(request.body.avatarMediaId) || 0
+    const avatarMedia = avatarMediaId
+      ? mockMedia.find(
+          (item) => item.id === avatarMediaId && item.mediaType === 'photo',
+        )
+      : null
+    if (!name || !phoneNumber || (avatarMediaId && !avatarMedia)) {
       response.json({ success: false, error: 'invalid_contact' })
       return
     }
     let contact = contacts.find((item) => item.id === request.body.id)
     if (contact) {
       contact.name = name
+      contact.notes = notes || null
+      contact.organization = organization || null
       contact.phone_number = phoneNumber
+      contact.avatar_media_id = avatarMedia?.id ?? null
+      contact.avatar_url = avatarMedia?.url ?? null
       contact.updated_at = new Date()
         .toISOString()
         .slice(0, 19)
@@ -5255,9 +5688,14 @@ app.post('/api/:endpoint', (request, response) => {
       const now = new Date().toISOString().slice(0, 19).replace('T', ' ')
       contact = {
         created_at: now,
+        favorite: false,
         id: `contact-${contactSequence++}`,
         name,
+        notes: notes || null,
+        organization: organization || null,
         phone_number: phoneNumber,
+        avatar_media_id: avatarMedia?.id ?? null,
+        avatar_url: avatarMedia?.url ?? null,
         updated_at: now,
       }
       contacts.push(contact)
@@ -5265,6 +5703,20 @@ app.post('/api/:endpoint', (request, response) => {
     response.json({ success: true, data: contact })
     return
   }
+  if (endpoint === 'contacts:favorite') {
+    const contact = contacts.find((item) => item.id === request.body.id)
+    if (!contact || typeof request.body.favorite !== 'boolean') {
+      response.json({ success: false, error: 'contact_not_found' })
+      return
+    }
+    contact.favorite = request.body.favorite
+    contact.updated_at = new Date().toISOString().slice(0, 19).replace('T', ' ')
+    response.json({
+      success: true,
+      data: { favorite: contact.favorite, id: contact.id },
+    })
+    return
+  }
   if (endpoint === 'contacts:delete') {
     const index = contacts.findIndex((item) => item.id === request.body.id)
     if (index >= 0) contacts.splice(index, 1)
@@ -5275,6 +5727,27 @@ app.post('/api/:endpoint', (request, response) => {
     response.json({ success: true, data: { videoBitrateKbps: 1500 } })
     return
   }
+  if (endpoint === 'media:devCapture') {
+    const mediaType = request.body.mediaType === 'video' ? 'video' : 'photo'
+    const id = Math.max(0, ...mockMedia.map((item) => Number(item.id) || 0)) + 1
+    const fallbackVideo = mockMedia.find((item) => item.mediaType === 'video')
+    const media = {
+      createdAt: Date.now(),
+      id,
+      mediaType,
+      url:
+        mediaType === 'photo'
+          ? `https://picsum.photos/seed/sky-camera-${id}/900/1600`
+          : fallbackVideo?.url,
+    }
+    if (!media.url) {
+      response.json({ success: false, error: 'unsupported' })
+      return
+    }
+    mockMedia.unshift(media)
+    response.json({ success: true, data: media })
+    return
+  }
   if (endpoint === 'gallery:list') {
     if (request.body.mockState === 'error') {
       response.json({ success: false, error: 'service_unavailable' })
@@ -5399,55 +5872,29 @@ app.post('/api/:endpoint', (request, response) => {
     response.json({ success: true })
     return
   }
-  if (endpoint === 'contacts:list') {
-    response.json({ success: true, data: mockContacts })
-    return
-  }
-  if (endpoint === 'contacts:save') {
-    const now = new Date().toISOString()
-    const existing = mockContacts.find(
-      (contact) => contact.id === request.body.id,
-    )
-    if (existing) {
-      Object.assign(existing, {
-        name: request.body.name,
-        phone_number: request.body.phoneNumber,
-        updated_at: now,
-      })
-      response.json({ success: true, data: existing })
-      return
-    }
-    const contact = {
-      created_at: now,
-      id: `contact-${Date.now()}`,
-      name: request.body.name,
-      phone_number: request.body.phoneNumber,
-      updated_at: now,
-    }
-    mockContacts.push(contact)
-    response.json({ success: true, data: contact })
-    return
-  }
-  if (endpoint === 'contacts:delete') {
-    mockContacts = mockContacts.filter(
-      (contact) => contact.id !== request.body.id,
-    )
-    response.json({ success: true })
-    return
-  }
   if (endpoint === 'calls:recents') {
     response.json({ success: true, data: recentCalls })
     return
   }
   if (endpoint === 'calls:dial') {
+    const phoneNumber = String(request.body.phoneNumber ?? '').replace(/\D/g, '')
+    if (phoneNumber.length !== 10) {
+      response.json({ success: false, error: 'invalid_number' })
+      return
+    }
+    if (!contacts.some((contact) => contact.phone_number === phoneNumber)) {
+      response.json({ success: false, error: 'recipient_not_found' })
+      return
+    }
     const id = `call-${Date.now()}`
+    const startedAt = Date.now()
     recentCalls.unshift({
       call_id: id,
       created_at: Date.now(),
       direction: 'outgoing',
       duration_seconds: 0,
       id: recentCalls.length + 1,
-      other_number: request.body.phoneNumber,
+      other_number: phoneNumber,
       status: 'completed',
     })
     response.json({
@@ -5455,13 +5902,23 @@ app.post('/api/:endpoint', (request, response) => {
       data: {
         direction: 'outgoing',
         id,
-        otherNumber: request.body.phoneNumber,
-        startedAt: Date.now(),
+        otherNumber: phoneNumber,
+        startedAt,
         state: 'ringing',
       },
     })
     return
   }
+  if (endpoint === 'calls:block') {
+    const phoneNumber = String(request.body.phoneNumber ?? '').replace(/\D/g, '')
+    if (!phoneNumber) {
+      response.json({ success: false, error: 'invalid_number' })
+      return
+    }
+    blockedCallNumbers.add(phoneNumber)
+    response.json({ success: true, data: { blocked: true, phoneNumber } })
+    return
+  }
   if (
     endpoint === 'calls:answer' ||
     endpoint === 'calls:decline' ||
diff --git a/sky_phone/config/config.lua b/sky_phone/config/config.lua
index 56570ec..e83c384 100644
--- a/sky_phone/config/config.lua
+++ b/sky_phone/config/config.lua
@@ -40,6 +40,7 @@ Config.Calls = {
     VoiceProvider = "pma",
     RingSeconds = 30,
     ContactNameMaxLength = 80,
+    ContactNotesMaxLength = 500,
     RecentPageSize = 100,
 }
 
diff --git a/sky_phone/config/locales/en.lua b/sky_phone/config/locales/en.lua
index c7fd8dd..6a2bf49 100644
--- a/sky_phone/config/locales/en.lua
+++ b/sky_phone/config/locales/en.lua
@@ -377,8 +377,16 @@ Locales["en"] = {
             phone = {
                 name = "Phone", recents = "Recents", contacts = "Contacts", keypad = "Keypad",
                 noSim = "No SIM", noSimBody = "Insert a SIM card in Settings to make calls.",
-                noRecents = "No Recent Calls", noContacts = "No Contacts", searchContacts = "Search Contacts",
-                addContact = "New Contact", editContact = "Edit Contact", contactName = "Name", phoneNumber = "Phone Number",
+            noRecents = "No Recent Calls", noContacts = "No Contacts", searchContacts = "Search Contacts", favorites = "Favorites",
+                addContact = "New Contact", newContact = "New", editContact = "Edit Contact", contactName = "Name", firstName = "First Name", lastName = "Last Name", companyOrGroup = "Company or Group", phoneNumber = "Phone Number",
+                choosePhoto = "Choose Contact Photo", chooseGallery = "Gallery", takePhoto = "Camera", removePhoto = "Remove Photo",
+                message = "Message", video = "Video", mail = "Mail", defaultLabel = "Default", privateLabel = "Private",
+                contactCard = "Contact Card", removeContact = "Remove Contact", returnToCall = "Return to Call", mobile = "Mobile", messagesProfile = "Messages", notes = "Notes",
+            sendMessage = "Send Message", shareContact = "Share Contact", addFavorite = "Add to Favorites", removeFavorite = "Remove from Favorites",
+                addEmergency = "Add to Emergency Contacts", blockContact = "Block Contact",
+                block = "Block", blockCaller = "Block Caller", blockCallerTitle = "Block this caller?",
+                blockCallerBody = "{number} will no longer be able to call this SIM.",
+                faceTime = "FaceTime", hideKeypad = "Hide Keypad", more = "More", mute = "Mute", speaker = "Speaker", viewContact = "View Contact",
                 call = "Call", calling = "calling...", incoming = "Incoming Call", incomingDirection = "Incoming", outgoingDirection = "Outgoing", connected = "Connected",
                 missed = "Missed", declined = "Declined", busy = "Busy", unavailable = "Unavailable",
                 noAnswer = "No Answer", cancelled = "Cancelled", disconnected = "Disconnected", sim_removed = "SIM Removed", completed = "Call Ended",
@@ -388,8 +396,10 @@ Locales["en"] = {
                 choosePhoneBody = "Select the phone that should receive {number}.", emptyPhone = "No SIM inserted",
                 errors = {
                     invalid_contact = "Enter a name and valid phone number.", invalid_number = "Enter a valid phone number.",
+                message_unavailable = "The conversation could not be opened.", contact_remove_failed = "The contact could not be removed.", contact_favorite_failed = "The favorite could not be updated.",
                     no_sim = "This phone has no SIM card.", airplane_mode = "Turn off Airplane Mode to make calls.",
                     self_call = "You cannot call your own number.", busy = "The line is busy.",
+                blocked = "This number is blocked.", recipient_not_found = "This number is not known.",
                     rate_limited = "Too many calls. Try again in a minute.", voice_unavailable = "The configured phone voice service is unavailable.",
                     inventory_full = "There is no room for the ejected SIM card.", request_failed = "The phone request failed.",
                     operation_in_progress = "Another phone operation is already in progress.", sim_request_expired = "The SIM selection expired. Use the SIM card again.",
diff --git a/sky_phone/source/client/main.lua b/sky_phone/source/client/main.lua
index 7162d64..370fab0 100644
--- a/sky_phone/source/client/main.lua
+++ b/sky_phone/source/client/main.lua
@@ -171,11 +171,13 @@ local server_callbacks = {
     "contacts:list",
     "contacts:save",
     "contacts:delete",
+    "contacts:favorite",
     "calls:recents",
     "calls:dial",
     "calls:answer",
     "calls:decline",
     "calls:hangup",
+    "calls:block",
     "banking:overview",
     "banking:transfer",
     "billing:overview",
diff --git a/sky_phone/source/server/calls.lua b/sky_phone/source/server/calls.lua
index e1f7f5b..01a9049 100644
--- a/sky_phone/source/server/calls.lua
+++ b/sky_phone/source/server/calls.lua
@@ -318,8 +318,8 @@ function SkyPhoneCalls.CopyCloudToDevice(account_id, imei)
         {
             query = [[
                 INSERT INTO `sky_phone_contacts`
-                    (`id`, `contact_id`, `device_imei`, `name`, `phone_number`, `created_at`, `updated_at`)
-                SELECT UUID(), `contact_id`, ?, `name`, `phone_number`, `created_at`, `updated_at`
+                    (`id`, `contact_id`, `device_imei`, `name`, `notes`, `organization`, `phone_number`, `avatar_media_id`, `favorite`, `created_at`, `updated_at`)
+                SELECT UUID(), `contact_id`, ?, `name`, `notes`, `organization`, `phone_number`, NULL, `favorite`, `created_at`, `updated_at`
                 FROM `sky_phone_contacts` WHERE `account_id` = ?
             ]],
             params = { imei, account_id },
@@ -343,7 +343,9 @@ Bridge.Callbacks.Register("sky_phone:contacts:list", function(source)
     end
     local condition, params = scope_condition(scope)
     local rows = Bridge.Database.Query(([[
-        SELECT `contact_id` AS `id`, `name`, `phone_number`, `created_at`, `updated_at`
+        SELECT `contact_id` AS `id`, `name`, `notes`, `organization`, `phone_number`, `avatar_media_id`, `favorite`,
+            (SELECT media.`url` FROM `sky_phone_media` media WHERE media.`id` = `avatar_media_id`) AS `avatar_url`,
+            `created_at`, `updated_at`
         FROM `sky_phone_contacts` WHERE %s ORDER BY LOWER(`name`), `phone_number`
     ]]):format(condition), params)
     return { success = true, data = rows }
@@ -358,10 +360,24 @@ Bridge.Callbacks.Register("sky_phone:contacts:save", function(source, data)
         return error_response
     end
     local name = trim(data.name)
+    local notes = trim(data.notes) or ""
+    local organization = trim(data.organization) or ""
     local number = SkyPhoneSimNumber.Normalize(data.phoneNumber, Config.Sim.NumberLength, Config.Sim.NumberPrefix)
-    if not name or name == "" or #name > Config.Calls.ContactNameMaxLength or not number then
+    local avatar_media_id = tonumber(data.avatarMediaId) or 0
+    if not name or name == "" or #name > Config.Calls.ContactNameMaxLength or #notes > Config.Calls.ContactNotesMaxLength or #organization > Config.Calls.ContactNameMaxLength or not number then
         return { success = false, error = "invalid_contact" }
     end
+    if avatar_media_id < 0 or avatar_media_id ~= math.floor(avatar_media_id) then
+        return { success = false, error = "invalid_contact" }
+    end
+    local avatar_url
+    if avatar_media_id > 0 then
+        local media_error
+        avatar_url, media_error = SkyPhoneMedia.ResolveOwnedMedia(source, tostring(avatar_media_id), "photo")
+        if not avatar_url then
+            return { success = false, error = media_error }
+        end
+    end
     local condition, condition_params = scope_condition(scope)
     local id = type(data.id) == "string" and data.id or uuid()
     if data.id then
@@ -373,24 +389,63 @@ Bridge.Callbacks.Register("sky_phone:contacts:save", function(source, data)
         if not owned[1] then
             return { success = false, error = "contact_not_found" }
         end
-        local params = { name, number, id }
+        local params = { name, notes, organization, number, avatar_media_id, id }
         for _, value in ipairs(condition_params) do
             params[#params + 1] = value
         end
         Bridge.Database.Query(([[
-            UPDATE `sky_phone_contacts` SET `name` = ?, `phone_number` = ?
+            UPDATE `sky_phone_contacts` SET `name` = ?, `notes` = NULLIF(?, ''), `organization` = NULLIF(?, ''), `phone_number` = ?, `avatar_media_id` = NULLIF(?, 0)
             WHERE `contact_id` = ? AND %s
         ]]):format(condition), params)
     else
         Bridge.Database.Query([[
-            INSERT INTO `sky_phone_contacts` (`id`, `contact_id`, `account_id`, `device_imei`, `name`, `phone_number`)
-            VALUES (?, ?, ?, ?, ?, ?)
-        ]], { uuid(), id, scope.account_id, scope.device_imei, name, number })
+            INSERT INTO `sky_phone_contacts` (`id`, `contact_id`, `account_id`, `device_imei`, `name`, `notes`, `organization`, `phone_number`, `avatar_media_id`)
+            VALUES (?, ?, ?, ?, ?, NULLIF(?, ''), NULLIF(?, ''), ?, NULLIF(?, 0))
+        ]], { uuid(), id, scope.account_id, scope.device_imei, name, notes, organization, number, avatar_media_id })
     end
     if scope.account_id then
         SkyPhone.NotifyAccount(scope.account_id, "sky_phone:contacts:changed", {})
     end
-    return { success = true, data = { id = id, name = name, phone_number = number } }
+    return {
+        success = true,
+        data = {
+            id = id,
+            name = name,
+            notes = notes ~= "" and notes or nil,
+            organization = organization ~= "" and organization or nil,
+            phone_number = number,
+            avatar_media_id = avatar_media_id > 0 and avatar_media_id or nil,
+            avatar_url = avatar_url,
+        },
+    }
+end)
+
+Bridge.Callbacks.Register("sky_phone:contacts:favorite", function(source, data)
+    if not SkyPhone.AllowOperation(source, "contact_favorite", 60, 60) or type(data) ~= "table" or type(data.id) ~= "string" or type(data.favorite) ~= "boolean" then
+        return { success = false, error = "invalid_request" }
+    end
+    local scope, error_response = current_scope(source)
+    if not scope then
+        return error_response
+    end
+    local condition, condition_params = scope_condition(scope)
+    local owned_params = { data.id }
+    for _, value in ipairs(condition_params) do
+        owned_params[#owned_params + 1] = value
+    end
+    local owned = Bridge.Database.Query(("SELECT `id` FROM `sky_phone_contacts` WHERE `contact_id` = ? AND %s LIMIT 1"):format(condition), owned_params)
+    if not owned[1] then
+        return { success = false, error = "contact_not_found" }
+    end
+    local params = { data.favorite and 1 or 0, data.id }
+    for _, value in ipairs(condition_params) do
+        params[#params + 1] = value
+    end
+    Bridge.Database.Query(("UPDATE `sky_phone_contacts` SET `favorite` = ? WHERE `contact_id` = ? AND %s"):format(condition), params)
+    if scope.account_id then
+        SkyPhone.NotifyAccount(scope.account_id, "sky_phone:contacts:changed", {})
+    end
+    return { success = true, data = { id = data.id, favorite = data.favorite } }
 end)
 
 Bridge.Callbacks.Register("sky_phone:contacts:delete", function(source, data)
@@ -492,12 +547,27 @@ Bridge.Callbacks.Register("sky_phone:calls:dial", function(source, data)
         WHERE s.`phone_number` = ? LIMIT 1
     ]], { number })
     local target = targets[1]
-    if not target or not target.imei then
+    if not target then
+        dialing_by_sim[scope.device.sim_id] = nil
+        dial_locks[source] = nil
+        return { success = false, error = "recipient_not_found" }
+    end
+    if not target.imei then
         local terminal = create_terminal_call(scope, number, target, "unavailable")
         dialing_by_sim[scope.device.sim_id] = nil
         dial_locks[source] = nil
         return { success = true, data = terminal }
     end
+    local blocks = Bridge.Database.Query([[
+        SELECT 1 FROM `sky_phone_call_blocks`
+        WHERE `blocker_sim_id` = ? AND `blocked_sim_id` = ? LIMIT 1
+    ]], { target.id, scope.device.sim_id })
+    if blocks[1] then
+        local terminal = create_terminal_call(scope, number, target, "declined")
+        dialing_by_sim[scope.device.sim_id] = nil
+        dial_locks[source] = nil
+        return { success = true, data = terminal }
+    end
     local callee_source = find_device_holder(target.imei)
     if not callee_source or airplane_mode(target.imei) then
         local terminal = create_terminal_call(scope, number, target, "unavailable")
@@ -751,6 +821,51 @@ Bridge.Callbacks.Register("sky_phone:calls:hangup", function(source, data)
     return { success = true }
 end)
 
+Bridge.Callbacks.Register("sky_phone:calls:block", function(source, data)
+    if not SkyPhone.AllowOperation(source, "call_block", 10, 60) then
+        return { success = false, error = "rate_limited" }
+    end
+    local scope, error_response = current_scope(source)
+    if not scope then
+        return error_response
+    end
+    if not scope.device.sim_id then
+        return { success = false, error = "no_sim" }
+    end
+    local number = type(data) == "table" and SkyPhoneSimNumber.Normalize(
+        data.phoneNumber,
+        Config.Sim.NumberLength,
+        Config.Sim.NumberPrefix
+    ) or nil
+    if not number then
+        return { success = false, error = "invalid_number" }
+    end
+    if number == scope.device.phone_number then
+        return { success = false, error = "self_call" }
+    end
+    local rows = Bridge.Database.Query(
+        "SELECT `id` FROM `sky_phone_sims` WHERE `phone_number` = ? LIMIT 1",
+        { number }
+    )
+    if not rows[1] then
+        return { success = false, error = "recipient_not_found" }
+    end
+    Bridge.Database.Query([[
+        INSERT IGNORE INTO `sky_phone_call_blocks` (`blocker_sim_id`, `blocked_sim_id`)
+        VALUES (?, ?)
+    ]], { scope.device.sim_id, rows[1].id })
+
+    local call_id = active_by_source[source]
+    local call = call_id and calls[call_id] or nil
+    if call then
+        local other_number = source == call.caller_source and call.callee_number or call.caller_number
+        if other_number == number then
+            finish_call(call, call.answered_at and "completed" or "declined")
+        end
+    end
+    return { success = true }
+end)
+
 Bridge.Callbacks.Register("sky_phone:payphone:hangup", function(source, data)
     local call_id = active_by_source[source]
     local call = call_id and calls[call_id] or nil
diff --git a/sky_phone/source/server/db_migrate.lua b/sky_phone/source/server/db_migrate.lua
index 4443c41..8877db2 100644
--- a/sky_phone/source/server/db_migrate.lua
+++ b/sky_phone/source/server/db_migrate.lua
@@ -354,7 +354,11 @@ local schema = {
             { name = "account_id", type = "BIGINT UNSIGNED NULL" },
             { name = "device_imei", type = "CHAR(15) NULL", characterSet = "ascii", collation = "ascii_bin" },
             { name = "name", type = "VARCHAR(80) NOT NULL" },
+            { name = "notes", type = "VARCHAR(500) NULL" },
+            { name = "organization", type = "VARCHAR(80) NULL" },
             { name = "phone_number", type = "VARCHAR(24) NOT NULL", characterSet = "ascii", collation = "ascii_bin" },
+            { name = "avatar_media_id", type = "BIGINT UNSIGNED NULL" },
+            { name = "favorite", type = "TINYINT(1) NOT NULL DEFAULT 0" },
             { name = "created_at", type = "DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP" },
             { name = "updated_at", type = "DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP" },
         },
@@ -362,10 +366,12 @@ local schema = {
         indexes = {
             { name = "idx_sky_phone_contacts_account", columns = "(`account_id`, `name`)" },
             { name = "idx_sky_phone_contacts_device", columns = "(`device_imei`, `name`)" },
+            { name = "idx_sky_phone_contacts_avatar", columns = "(`avatar_media_id`)" },
         },
         foreignKeys = {
             { column = "account_id", references = "`sky_phone_accounts` (`id`) ON DELETE CASCADE" },
             { column = "device_imei", references = "`sky_phone_devices` (`imei`) ON DELETE CASCADE" },
+            { column = "avatar_media_id", references = "`sky_phone_media` (`id`) ON DELETE SET NULL" },
         },
         tableOptions = "ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci",
     },
diff --git a/sky_phone/sql/install.sql b/sky_phone/sql/install.sql
index 2a0e4c9..5049d78 100644
--- a/sky_phone/sql/install.sql
+++ b/sky_phone/sql/install.sql
@@ -153,7 +153,11 @@ CREATE TABLE IF NOT EXISTS `sky_phone_contacts` (
     `account_id` BIGINT UNSIGNED NULL,
     `device_imei` CHAR(15) CHARACTER SET ascii COLLATE ascii_bin NULL,
     `name` VARCHAR(80) NOT NULL,
+    `notes` VARCHAR(500) NULL,
+    `organization` VARCHAR(80) NULL,
     `phone_number` VARCHAR(24) CHARACTER SET ascii COLLATE ascii_bin NOT NULL,
+    `avatar_media_id` BIGINT UNSIGNED NULL,
+    `favorite` TINYINT(1) NOT NULL DEFAULT 0,
     `created_at` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
     `updated_at` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
     PRIMARY KEY (`id`),
@@ -161,8 +165,10 @@ CREATE TABLE IF NOT EXISTS `sky_phone_contacts` (
     UNIQUE KEY `uniq_sky_phone_contacts_device_contact` (`device_imei`, `contact_id`),
     KEY `idx_sky_phone_contacts_account` (`account_id`, `name`),
     KEY `idx_sky_phone_contacts_device` (`device_imei`, `name`),
+    KEY `idx_sky_phone_contacts_avatar` (`avatar_media_id`),
     FOREIGN KEY (`account_id`) REFERENCES `sky_phone_accounts` (`id`) ON DELETE CASCADE,
-    FOREIGN KEY (`device_imei`) REFERENCES `sky_phone_devices` (`imei`) ON DELETE CASCADE
+    FOREIGN KEY (`device_imei`) REFERENCES `sky_phone_devices` (`imei`) ON DELETE CASCADE,
+    FOREIGN KEY (`avatar_media_id`) REFERENCES `sky_phone_media` (`id`) ON DELETE SET NULL
 ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
 
 CREATE TABLE IF NOT EXISTS `sky_phone_calls` (
@@ -183,6 +189,16 @@ CREATE TABLE IF NOT EXISTS `sky_phone_calls` (
     FOREIGN KEY (`callee_sim_id`) REFERENCES `sky_phone_sims` (`id`) ON DELETE SET NULL
 ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
 
+CREATE TABLE IF NOT EXISTS `sky_phone_call_blocks` (
+    `blocker_sim_id` CHAR(36) CHARACTER SET ascii COLLATE ascii_bin NOT NULL,
+    `blocked_sim_id` CHAR(36) CHARACTER SET ascii COLLATE ascii_bin NOT NULL,
+    `created_at` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    PRIMARY KEY (`blocker_sim_id`, `blocked_sim_id`),
+    KEY `idx_sky_phone_call_blocks_blocked` (`blocked_sim_id`),
+    FOREIGN KEY (`blocker_sim_id`) REFERENCES `sky_phone_sims` (`id`) ON DELETE CASCADE,
+    FOREIGN KEY (`blocked_sim_id`) REFERENCES `sky_phone_sims` (`id`) ON DELETE CASCADE
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
+
 CREATE TABLE IF NOT EXISTS `sky_phone_call_entries` (
     `id` BIGINT UNSIGNED NOT NULL AUTO_INCREMENT,
     `call_id` CHAR(36) CHARACTER SET ascii COLLATE ascii_bin NOT NULL,