feat: Implement core chat application UI, including chat, voice, members, DMs, and shared components.

packages/shared/src/index.css

@@ -28,9 +28,14 @@
   font-style: normal;
 }
 
+html {
+  height: 100%;
+}
+
 body {
   margin: 0;
   padding: 0;
+  height: 100%;
   font-family: "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
   background-color: var(--bg-primary);
   color: var(--text-normal);
@@ -1220,15 +1225,15 @@ body {
 }
 
 .context-menu-item:hover {
-  background-color: hsl(240 calc(1*4%) 60.784% /0.0784313725490196);
+  background-color: hsla(240, 4%, 60.784%, 0.078);
 }
 
 .context-menu-item-danger {
-  color: color-mix(in oklab, hsl(1.353 calc(1*82.609%) 68.431% /1) 100%, #000 0%);
+  color: hsl(1.353, 82.609%, 68.431%);
 }
 
 .context-menu-item-danger:hover {
-  background-color: color-mix(in oklab,hsl(355.636 calc(1*64.706%) 50% /0.0784313725490196) 100%,hsl(0 0% 0% /0.0784313725490196) 0%);
+  background-color: hsla(355.636, 64.706%, 50%, 0.078);
 }
 
 .context-menu-checkbox-item {
@@ -1255,8 +1260,8 @@ body {
 }
 
 .context-menu-checkbox-indicator.checked {
-  background-color: hsl(235 86% 65%);
-  border-color: hsl(235 86% 65%);
+  background-color: hsl(235, 86%, 65%);
+  border-color: hsl(235, 86%, 65%);
 }
 
 .context-menu-separator {
@@ -1465,6 +1470,7 @@ body {
   align-items: center;
   justify-content: center;
   width: 100%;
+  margin-top: 8px;
   margin-bottom: 8px;
 }
 
@@ -3085,4 +3091,104 @@ body {
   background-color: rgba(88, 101, 242, 0.15) !important;
   outline: 2px dashed var(--brand-experiment);
   border-radius: 4px;
+}
+
+/* ============================================
+   MOBILE BACK BUTTON
+   ============================================ */
+.mobile-back-btn {
+  background: none;
+  border: none;
+  color: var(--header-secondary);
+  cursor: pointer;
+  padding: 4px;
+  margin-right: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+}
+
+.mobile-back-btn:hover {
+  color: var(--header-primary);
+}
+
+/* ============================================
+   MOBILE RESPONSIVE (max-width: 768px)
+   ============================================ */
+@media (max-width: 768px) {
+  /* App container: full dynamic viewport, no titlebar gap */
+  .app-container.is-mobile {
+    height: 100dvh;
+    padding-bottom: env(safe-area-inset-bottom, 0px);
+    box-sizing: border-box;
+  }
+
+  /* Sidebar fills entire screen on mobile */
+  .is-mobile .sidebar {
+    width: 100vw;
+    min-width: 100vw;
+  }
+
+  /* Hide members list on mobile (also enforced in JS) */
+  .is-mobile .members-list {
+    display: none !important;
+  }
+
+  /* Auth box responsive */
+  .auth-box {
+    width: calc(100vw - 32px);
+    max-width: 480px;
+  }
+
+  /* Pinned panel full-width on mobile */
+  .is-mobile .pinned-panel {
+    width: 100vw;
+    right: 0;
+    border-radius: 0;
+  }
+
+  /* Toast container centered on mobile */
+  .is-mobile .toast-container {
+    right: auto;
+    left: 50%;
+    transform: translateX(-50%);
+    bottom: 16px;
+  }
+
+  .is-mobile .toast {
+    min-width: 260px;
+  }
+
+  /* Responsive modals */
+  .create-channel-modal {
+    width: calc(100vw - 32px);
+  }
+
+  .theme-selector-modal {
+    width: calc(100vw - 32px);
+  }
+
+  .avatar-crop-dialog {
+    width: calc(100vw - 32px);
+  }
+
+  .forced-update-modal {
+    width: calc(100vw - 32px);
+  }
+
+  /* Chat container takes full width */
+  .is-mobile .chat-container {
+    width: 100vw;
+  }
+
+  /* Channel topic - hide on very small screens (also hidden via JS) */
+  .is-mobile .chat-header-topic {
+    display: none;
+  }
+
+  /* FriendsView takes full width */
+  .is-mobile .friends-view {
+    width: 100vw;
+  }
 }