ENH - unify phone notifications as popups

Replace the central Konsta notification banner with the shared Sky UI popup across phone and preview surfaces. Add light and dark materials, app icons, timestamps, routed opening, swipe dismissal, and contract coverage.

frontend/src/ui/overlays.css

@@ -690,15 +690,17 @@
   box-sizing: border-box;
   position: absolute;
   z-index: 50;
-  top: calc(var(--sky-safe-area-top, 0px) + 8px);
-  right: 8px;
-  left: 8px;
+  top: calc(var(--sky-safe-area-top, 0px) + 6px);
+  right: 10px;
+  left: 10px;
+  min-height: 72px;
   display: flex;
   align-items: center;
-  gap: 16px;
-  padding: 16px;
-  border: 0;
-  border-radius: 24px;
+  gap: 10px;
+  padding: 10px 12px;
+  overflow: hidden;
+  border: 1px solid var(--sky-hairline);
+  border-radius: 18px;
   color: var(--sky-text);
   box-shadow: var(--sky-shadow-glass);
   touch-action: none;
@@ -732,8 +734,8 @@
 .sky-notification__time,
 .sky-notification__subtitle,
 .sky-notification__text {
-  font-size: 14px;
-  line-height: 20px;
+  font-size: 12px;
+  line-height: 16px;
 }
 
 .sky-notification__title,
@@ -742,17 +744,29 @@
 }
 
 .sky-notification__title {
+  min-width: 0;
+  overflow: hidden;
+  font-size: 13px;
   font-weight: 700;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .sky-notification__time {
   margin-inline-start: auto;
-  margin-inline-end: 4px;
+  margin-inline-end: 0;
+  flex: none;
   color: var(--sky-notification-meta);
+  font-size: 10px;
+  line-height: 14px;
 }
 
 .sky-notification__text {
   color: var(--sky-text);
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
 }
 
 .sky-notification__close {
@@ -790,14 +804,14 @@
 .sky-notification-slide-enter-active,
 .sky-notification-slide-leave-active {
   transition:
-    opacity 500ms cubic-bezier(0.4, 0, 0.2, 1),
-    transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
+    opacity 300ms ease,
+    transform 380ms var(--sky-ease-out, ease-out);
 }
 
 .sky-notification-slide-enter-from,
 .sky-notification-slide-leave-to {
   opacity: 0;
-  transform: translateY(-100%);
+  transform: translateY(-32px) scale(0.97);
 }
 
 .sky-panel__panel,

frontend/src/ui/overlays/SkyNotification.test.ts

@@ -21,13 +21,13 @@ async function renderNotification(
 }
 
 describe('SkyNotification', () => {
-  it('renders the complete Konsta iOS notification structure', async () => {
+  it('renders the complete Sky popup notification structure', async () => {
     const html = await renderNotification({
       button: 'Close notification',
       opened: true,
       subtitle: 'Notification with close button',
       text: 'Click (x) button to close me',
-      title: 'Konsta UI',
+      title: 'Sky Phone',
       titleRightText: 'now',
     })
 
@@ -50,7 +50,7 @@ describe('SkyNotification', () => {
     expect(html).not.toContain('Hidden')
   })
 
-  it('locks the Konsta iOS glass, typography, and close geometry', () => {
+  it('locks the compact popup glass, typography, and close geometry', () => {
     const overlays = readFileSync(
       new URL('../overlays.css', import.meta.url),
       'utf8',
@@ -66,19 +66,23 @@ describe('SkyNotification', () => {
     expect(notificationRule).toBeDefined()
     expect(notificationRule).toMatch(/z-index:\s*50;/)
     expect(notificationRule).toMatch(
-      /top:\s*calc\(var\(--sky-safe-area-top, 0px\) \+ 8px\);/,
+      /top:\s*calc\(var\(--sky-safe-area-top, 0px\) \+ 6px\);/,
     )
-    expect(notificationRule).toMatch(/right:\s*8px;[\s\S]*left:\s*8px;/)
-    expect(notificationRule).toMatch(/gap:\s*16px;[\s\S]*padding:\s*16px;/)
+    expect(notificationRule).toMatch(/right:\s*10px;[\s\S]*left:\s*10px;/)
+    expect(notificationRule).toMatch(/min-height:\s*72px;/)
+    expect(notificationRule).toMatch(/gap:\s*10px;[\s\S]*padding:\s*10px 12px;/)
     expect(notificationRule).toMatch(
-      /border:\s*0;[\s\S]*border-radius:\s*24px;/,
+      /border:\s*1px solid var\(--sky-hairline\);[\s\S]*border-radius:\s*18px;/,
     )
-    expect(notificationRule).not.toMatch(/min-height|background:/)
+    expect(notificationRule).not.toMatch(/background:/)
     expect(overlays).toMatch(
-      /\.sky-notification__title,[\s\S]*?font-size:\s*14px;[\s\S]*?line-height:\s*20px;/,
+      /\.sky-notification__title,[\s\S]*?font-size:\s*12px;[\s\S]*?line-height:\s*16px;/,
     )
     expect(overlays).toMatch(
-      /\.sky-notification__time\s*\{[\s\S]*?margin-inline-start:\s*auto;[\s\S]*?margin-inline-end:\s*4px;[\s\S]*?color:\s*var\(--sky-notification-meta\);/,
+      /\.sky-notification__title\s*\{[\s\S]*?font-size:\s*13px;[\s\S]*?text-overflow:\s*ellipsis;/,
+    )
+    expect(overlays).toMatch(
+      /\.sky-notification__time\s*\{[\s\S]*?margin-inline-start:\s*auto;[\s\S]*?margin-inline-end:\s*0;[\s\S]*?color:\s*var\(--sky-notification-meta\);/,
     )
     expect(overlays).toMatch(
       /\.sky-notification__close\s*\{[\s\S]*?width:\s*var\(--sky-touch-target, 44px\);[\s\S]*?height:\s*var\(--sky-touch-target, 44px\);[\s\S]*?position:\s*absolute;[\s\S]*?right:\s*-8px;/,
@@ -87,7 +91,7 @@ describe('SkyNotification', () => {
       /\.sky-notification__close-icon\s*\{\s*width:\s*20px;\s*height:\s*20px;/,
     )
     expect(overlays).toMatch(
-      /\.sky-notification-slide-enter-from,[\s\S]*?transform:\s*translateY\(-100%\);/,
+      /\.sky-notification-slide-enter-from,[\s\S]*?transform:\s*translateY\(-32px\) scale\(0\.97\);/,
     )
     expect(tokens).toContain('--sky-notification-meta: rgba(0, 0, 0, 0.45)')
     expect(tokens).toContain(