full screen chat for iphone

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

@@ -69,6 +69,59 @@
   width: min(100%, 25rem);
 }
 
+.conversation-modal-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 1230;
+  display: grid;
+  place-items: center;
+  padding: 0.75rem;
+  background: rgba(3, 8, 14, 0.56);
+  backdrop-filter: blur(8px);
+}
+
+.conversation-modal {
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+  width: min(100%, 96rem);
+  height: min(100dvh - 1.5rem, 100%);
+  max-height: 100dvh;
+}
+
+.conversation-modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid var(--surface-border-soft);
+}
+
+.conversation-modal-eyebrow {
+  font-size: 0.78rem;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--page-text-soft);
+}
+
+.conversation-modal-close {
+  width: 2.5rem;
+  height: 2.5rem;
+  padding: 0;
+  border: 0;
+  border-radius: 999px;
+  color: var(--page-text);
+  background: var(--badge-background);
+  font-size: 1.35rem;
+  line-height: 1;
+}
+
+.conversation-modal-body {
+  min-height: 0;
+  max-height: none;
+  padding-top: 1rem;
+}
+
 .call-choice-eyebrow {
   margin-bottom: 0.45rem;
   font-size: 0.78rem;
@@ -159,6 +212,11 @@
   opacity: 1;
 }
 
+.expand-action-icon {
+  font-size: 1.9rem;
+  line-height: 1;
+}
+
 .status-led {
   width: 0.8rem;
   height: 0.8rem;
@@ -187,32 +245,36 @@
 }
 
 .peer-sidebar {
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
   padding:1rem;
   border-radius: 1.3rem;
   border: 1px solid var(--surface-border-soft);
   background: var(--panel-soft-background);
+  align-self: start;
 }
 
-.peer-count {
-  display: inline-flex;
-  min-width: 2rem;
-  justify-content: center;
-  padding: 0.35rem 0.65rem;
-  border-radius: 999px;
-  font-size: 0.85rem;
-  background: var(--badge-background);
+.peer-dropdown {
+  position: relative;
 }
 
-.peer-list {
+.peer-dropdown-trigger {
+  width: 100%;
+}
+
+.peer-dropdown-menu {
+  position: absolute;
+  top: calc(100% + 0.65rem);
+  left: 0;
+  right: 0;
+  z-index: 4;
   display: grid;
-  align-content: start;
-  flex: 1 1 auto;
   gap: 0.75rem;
-  min-height: 0;
+  max-height: calc(3 * 4.55rem + 1.5rem);
   overflow: auto;
+  padding: 0.75rem;
+  border: 1px solid var(--surface-border);
+  border-radius: 1rem;
+  background: var(--panel-background);
+  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.18);
 }
 
 .peer-tile {
@@ -230,6 +292,7 @@
 }
 
 .peer-tile-main {
+  display: block;
   min-width: 0;
   padding: 0;
   border: 0;
@@ -237,6 +300,23 @@
   background: transparent;
 }
 
+.peer-tile-indicators {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.55rem;
+  flex: 0 0 auto;
+}
+
+.peer-dropdown-caret {
+  font-size: 0.95rem;
+  line-height: 1;
+  transition: transform 160ms ease;
+}
+
+.peer-dropdown-caret-open {
+  transform: rotate(180deg);
+}
+
 .peer-tile-delete {
   width: 2.2rem;
   height: 2.2rem;
@@ -673,6 +753,16 @@
     margin-left: 0;
   }
 
+  .conversation-modal-backdrop {
+    padding: 0;
+  }
+
+  .conversation-modal {
+    width: 100vw;
+    height: 100dvh;
+    border-radius: 0;
+  }
+
   .bubble {
     max-width: 88%;
   }