video call

client/src/app/chat-page.component.scss

@@ -33,6 +33,63 @@
   backdrop-filter: blur(8px);
 }
 
+.call-choice-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 1240;
+  display: grid;
+  place-items: center;
+  padding: 1rem;
+  background: rgba(3, 8, 14, 0.46);
+  backdrop-filter: blur(6px);
+}
+
+.call-choice-card {
+  width: min(100%, 25rem);
+}
+
+.call-choice-eyebrow {
+  margin-bottom: 0.45rem;
+  font-size: 0.78rem;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: var(--page-text-soft);
+}
+
+.call-choice-actions {
+  display: grid;
+  gap: 0.85rem;
+}
+
+.call-choice-button {
+  display: flex;
+  align-items: center;
+  gap: 0.85rem;
+  width: 100%;
+  padding: 1rem 1.1rem;
+  border: 1px solid var(--surface-border);
+  border-radius: 1rem;
+  color: var(--page-text);
+  background: var(--surface-background);
+  text-align: left;
+}
+
+.call-choice-button:hover,
+.call-choice-button:focus-visible {
+  border-color: color-mix(in srgb, var(--accent-color) 35%, transparent);
+  background: var(--surface-hover-background);
+}
+
+.call-choice-icon {
+  display: inline-grid;
+  place-items: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 999px;
+  background: var(--badge-background);
+  font-size: 1.2rem;
+}
+
 .back-link {
   color: var(--link-color);
   text-decoration: none;