diff --git a/webui-src/app/chat/chat.js b/webui-src/app/chat/chat.js
index 6f27b49..a3b214d 100644
--- a/webui-src/app/chat/chat.js
+++ b/webui-src/app/chat/chat.js
@@ -117,6 +117,53 @@ function scrollChatToBottom() {
   }, 50);
 }
 
+function renderUserTooltip(gxsId, name) {
+  const details = ChatHubState.gxsDetails[gxsId];
+  if (!details) return null;
+
+  const avatar = getSafeAvatar(details);
+  const firstLetter = (name || '?').slice(0, 1).toUpperCase();
+  const votes = details.mReputation
+    ? (details.mReputation.mFriendsPositiveVotes - details.mReputation.mFriendsNegativeVotes)
+    : 0;
+
+  const rect = ChatHubState.hoveredUser ? ChatHubState.hoveredUser.rect : null;
+  const tooltipWidth = 280;
+  let left = rect ? rect.left - tooltipWidth - 10 : window.innerWidth - 300;
+  if (left < 10 && rect) left = rect.right + 10;
+  let top = rect ? rect.top : 100;
+  if (top + 160 > window.innerHeight) top = window.innerHeight - 170;
+  if (top < 10) top = 10;
+
+  return m('.user-tooltip', {
+    style: {
+      position: 'fixed',
+      top: `${top}px`,
+      left: `${left}px`,
+      zIndex: 10000,
+    }
+  }, [
+    m('.tooltip-avatar', m(peopleUtil.UserAvatar, { avatar, firstLetter, identityId: gxsId, size: 56, isSquare: true })),
+    m('.tooltip-details', [
+      m('.tooltip-row', [m('span.tooltip-label', 'Identity name: '), m('span.tooltip-value', name)]),
+      m('.tooltip-row', [m('span.tooltip-label', 'Identity Id: '), m('span.tooltip-value.tooltip-id', gxsId)]),
+      details.mPgpId && details.mPgpId !== '0000000000000000' && m('.tooltip-row', [
+        m('span.tooltip-label', 'Node: '),
+        m('span.tooltip-value', `${rs.userList.username(details.mPgpId) || name} [${details.mPgpId}]`)
+      ]),
+      m('.tooltip-row', [
+        m('span.tooltip-label', 'Votes: '),
+        m('span.tooltip-value', {
+          style: {
+            color: votes >= 0 ? '#008000' : '#cc0000',
+            fontWeight: 'bold'
+          }
+        }, (votes >= 0 ? '+' : '') + votes)
+      ])
+    ])
+  ]);
+}
+
 function pollHashStatus(localpath) {
   rs.rsJsonApiRequest('/rsFiles/ExtraFileStatus', { localpath }, (data) => {
     if (data && data.retval && data.info && data.info.hash && data.info.hash !== '0000000000000000000000000000000000000000') {
@@ -641,12 +688,7 @@ const ChatConversationView = () => {
                 onmouseenter: (e) => {
                   if (ChatHubState.activeMenu) return;
                   const rect = e.currentTarget.getBoundingClientRect();
-                  const rightbar = document.querySelector('.chat-hub-rightbar');
-                  if (rightbar) {
-                    const parentRect = rightbar.getBoundingClientRect();
-                    const top = rect.top - parentRect.top + rect.height / 2;
-                    ChatHubState.hoveredUser = { gxsId, name, top };
-                  }
+                  ChatHubState.hoveredUser = { gxsId, name, rect };
                 },
                 onmouseleave: () => {
                   ChatHubState.hoveredUser = null;
@@ -717,46 +759,11 @@ const ChatConversationView = () => {
                     });
                   }
                   return null;
-                })()
+                })(),
               ]);
             });
           })()),
-          ChatHubState.hoveredUser && (() => {
-            const hUser = ChatHubState.hoveredUser;
-            const details = ChatHubState.gxsDetails[hUser.gxsId];
-            if (!details) return null;
-
-            const avatar = getSafeAvatar(details);
-            const firstLetter = (hUser.name || '?').slice(0, 1).toUpperCase();
-            const votes = details.mReputation
-              ? (details.mReputation.mFriendsPositiveVotes - details.mReputation.mFriendsNegativeVotes)
-              : 0;
-
-            return m('.user-tooltip', {
-              style: {
-                top: `${hUser.top}px`,
-              }
-            }, [
-              m('.tooltip-avatar', m(peopleUtil.UserAvatar, { avatar, firstLetter, identityId: hUser.gxsId, size: 64 })),
-              m('.tooltip-details', [
-                m('.tooltip-row', [m('span.tooltip-label', 'Identity name: '), m('span.tooltip-value', hUser.name)]),
-                m('.tooltip-row', [m('span.tooltip-label', 'Identity Id: '), m('span.tooltip-value.tooltip-id', hUser.gxsId)]),
-                details.mPgpId && details.mPgpId !== '0000000000000000' && m('.tooltip-row', [
-                  m('span.tooltip-label', 'Node: '),
-                  m('span.tooltip-value', `${rs.userList.username(details.mPgpId) || hUser.name} [${details.mPgpId}]`)
-                ]),
-                m('.tooltip-row', [
-                  m('span.tooltip-label', 'Votes: '),
-                  m('span.tooltip-value', {
-                    style: {
-                      color: votes >= 0 ? '#22c55e' : '#ef4444',
-                      fontWeight: 'bold'
-                    }
-                  }, (votes >= 0 ? '+' : '') + votes)
-                ])
-              ])
-            ]);
-          })(),
+          ChatHubState.hoveredUser && renderUserTooltip(ChatHubState.hoveredUser.gxsId, ChatHubState.hoveredUser.name),
           ChatHubState.activeMenu && (() => {
             const menu = ChatHubState.activeMenu;
             const isOwn = menu.gxsId === rs.idToHex(ChatLobbyModel.currentLobby.gxs_id || '');
diff --git a/webui-src/app/mail/mail_resolver.js b/webui-src/app/mail/mail_resolver.js
index de0648e..6784bcb 100644
--- a/webui-src/app/mail/mail_resolver.js
+++ b/webui-src/app/mail/mail_resolver.js
@@ -68,12 +68,12 @@ const sections = {
   drafts: require('mail/mail_draftbox'),
   sent: require('mail/mail_sentbox'),
   trash: require('mail/mail_trashbox'),
-};
-const sectionsquickview = {
   starred: require('mail/mail_starred'),
   system: require('mail/mail_system'),
   spam: require('mail/mail_spam'),
   attachment: require('mail/mail_attachment'),
+};
+const sectionsquickview = {
   important: require('mail/mail_important'),
   work: require('mail/mail_work'),
   todo: require('mail/mail_todo'),
@@ -81,8 +81,15 @@ const sectionsquickview = {
   personal: require('mail/mail_personal'),
 };
 const tagselect = {
-  showval: 'Tags',
-  opts: ['Tags', 'Important', 'Work', 'Personal'],
+  opts: [
+    { label: '🏷️ Filter by Tag...', val: '' },
+    { label: '📎 Attachments', val: 'attachment' },
+    { label: '🔴 Important', val: 'important' },
+    { label: '🟠 Work', val: 'work' },
+    { label: '🟢 Personal', val: 'personal' },
+    { label: '🔵 Todo', val: 'todo' },
+    { label: '🟣 Later', val: 'later' },
+  ],
 };
 const Layout = () => {
   let showCompose = false;
@@ -99,12 +106,12 @@ const Layout = () => {
         drafts: (Messages.drafts || []).length,
         sent: (Messages.sent || []).length,
         trash: (Messages.trash || []).length,
-      };
-      const sectionsQuickviewSize = {
         starred: (Messages.starred || []).length,
         system: (Messages.system || []).length,
         spam: (Messages.spam || []).length,
         attachment: (Messages.attachment || []).length,
+      };
+      const sectionsQuickviewSize = {
         important: (Messages.important || []).length,
         work: (Messages.work || []).length,
         todo: (Messages.todo || []).length,
@@ -141,16 +148,29 @@ const Layout = () => {
               m(
                 'select.mail-tag',
                 {
-                  value: tagselect.showval,
-                  onchange: (e) => (tagselect.showval = tagselect.opts[e.target.selectedIndex]),
+                  value: m.route.param().tab || '',
+                  onchange: (e) => {
+                    const selectedTag = e.target.value;
+                    if (selectedTag) {
+                      m.route.set('/mail/:tab', { tab: selectedTag });
+                    }
+                  },
                 },
-                [tagselect.opts.map((opt) => m('option', { value: opt }, opt.toLocaleString()))]
+                tagselect.opts.map((opt) => m('option', { value: opt.val }, opt.label))
               ),
               m(util.SearchBar, { list: {} }),
             ]),
             vnode.children,
           ])
         ),
+        m(
+          'button.mobile-fab-compose',
+          {
+            title: 'Compose Mail',
+            onclick: () => setShowCompose(true),
+          },
+          m('i.fas.fa-pen')
+        ),
         showCompose && m(
           '.composePopupOverlay#mailComposerPopup',
           m(
@@ -173,6 +193,7 @@ const tabConfig = {
   starred: { title: 'Starred', category: 'starred' },
   system: { title: 'System', category: 'system' },
   spam: { title: 'Spam', category: 'spam' },
+  attachment: { title: 'Attachments', category: 'attachment' },
   important: { title: 'Important', category: 'important' },
   work: { title: 'Work', category: 'work' },
   todo: { title: 'Todo', category: 'todo' },
@@ -216,7 +237,7 @@ module.exports = {
     if (tab === 'attachment') {
       return m(
         Layout,
-        m(sectionsquickview.attachment, {
+        m(sections.attachment, {
           list: util.sortList(Messages[tab]),
         })
       );
diff --git a/webui-src/app/mail/mail_util.js b/webui-src/app/mail/mail_util.js
index a46f073..c14549d 100644
--- a/webui-src/app/mail/mail_util.js
+++ b/webui-src/app/mail/mail_util.js
@@ -53,19 +53,19 @@ function renderMailUserTooltip() {
     ? ((details.mReputation.mFriendsPositiveVotes || 0) - (details.mReputation.mFriendsNegativeVotes || 0))
     : 0;
 
-  const top = hUser.rect.top - 10;
-  const left = Math.min(Math.max(hUser.rect.left, 140), window.innerWidth - 280);
+  const rect = hUser.rect;
+  const top = rect ? Math.max(10, Math.min(rect.bottom + 4, window.innerHeight - 185)) : 100;
+  const left = rect ? Math.min(Math.max(rect.left, 20), window.innerWidth - 300) : 100;
 
   return m('.user-tooltip', {
     style: {
       position: 'fixed',
       top: `${top}px`,
       left: `${left}px`,
-      transform: 'translateY(-100%)',
       zIndex: 10000,
     }
   }, [
-    m('.tooltip-avatar', m(peopleUtil.UserAvatar, { avatar, firstLetter, identityId: hUser.gxsId, size: 64 })),
+    m('.tooltip-avatar', m(peopleUtil.UserAvatar, { avatar, firstLetter, identityId: hUser.gxsId, size: 64, isSquare: true })),
     m('.tooltip-details', [
       m('.tooltip-row', [m('span.tooltip-label', 'Identity name: '), m('span.tooltip-value', hUser.name)]),
       m('.tooltip-row', [m('span.tooltip-label', 'Identity Id: '), m('span.tooltip-value.tooltip-id', hUser.gxsId)]),
@@ -77,7 +77,7 @@ function renderMailUserTooltip() {
         m('span.tooltip-label', 'Votes: '),
         m('span.tooltip-value', {
           style: {
-            color: votes >= 0 ? '#22c55e' : '#ef4444',
+            color: votes >= 0 ? '#008000' : '#cc0000',
             fontWeight: 'bold'
           }
         }, (votes >= 0 ? '+' : '') + votes)
@@ -113,6 +113,22 @@ function loadTagTypes() {
 }
 loadTagTypes();
 
+function formatMailDate(ts) {
+  if (!ts) return '';
+  const date = new Date(ts * 1000);
+  const now = new Date();
+  const isToday = date.toDateString() === now.toDateString();
+  if (isToday) {
+    return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+  }
+  const isThisYear = date.getFullYear() === now.getFullYear();
+  const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+  if (isThisYear) {
+    return `${date.getDate()} ${months[date.getMonth()]}`;
+  }
+  return `${date.getDate()}/${date.getMonth() + 1}/${date.getFullYear().toString().slice(2)}`;
+}
+
 // Utility functions
 const humanReadableSize = (fileSize) => {
   return fileSize / 1024 > 1024
@@ -179,7 +195,7 @@ const MessageSummary = () => {
         },
         [
           m(
-            'td',
+            'td.cell-star',
             m(`input.star-check[type=checkbox][id=msg-${v.attrs.details.msgId}]`, { checked: isStarred }),
             // Use label with  [for] to manipulate hidden checkbox
             m(
@@ -191,8 +207,8 @@ const MessageSummary = () => {
               m('i.fas.fa-star')
             )
           ),
-          files && m('td', files.length),
-          m('td', { style: 'border-bottom: inherit;' }, [
+          m('td.cell-attachment', files && files.length > 0 ? m('i.fas.fa-paperclip', { title: `${files.length} attachment(s)` }) : null),
+          m('td.cell-subject', [
             m('div', {
               style: {
                 display: 'flex',
@@ -213,7 +229,7 @@ const MessageSummary = () => {
             ])
           ]),
           m(
-            'td',
+            'td.cell-from',
             m(
               'div',
               {
@@ -257,7 +273,7 @@ const MessageSummary = () => {
               ]
             )
           ),
-          m('td', new Date(details.ts * 1000).toLocaleString()),
+          m('td.cell-date', { title: new Date(details.ts * 1000).toLocaleString() }, formatMailDate(details.ts)),
         ]
       ),
   };
@@ -265,7 +281,8 @@ const MessageSummary = () => {
 
 const AttachmentSection = () => {
   function handleAttachmentDownload(item) {
-    const { fname: fileName, hash, size: xstr64 } = item;
+    const { fname: fileName, hash, size } = item;
+    const xstr64 = typeof size === 'object' ? size.xstr64 : String(size);
     const flags = util.RS_FILE_REQ_ANONYMOUS_ROUTING;
     rs.rsJsonApiRequest(
       '/rsFiles/FileRequest',
@@ -279,26 +296,22 @@ const AttachmentSection = () => {
   }
   return {
     view: (v) =>
-      m('table.attachment-container', [
-        m('tr.attachment-header', [
-          m('th', 'File Name'),
-          m('th', 'From'),
-          m('th', 'Size'),
-          m('th', 'Date'),
-          m('th', 'Download'),
-        ]),
-        m(
-          'tbody',
-          v.attrs.files.map((file) =>
-            m('tr.attachment', [
-              m('td.attachment__name', [m('i.fas.fa-file'), m('span', file.fname)]),
-              m('td.attachment__from', rs.userList.userMap[file.from._addr_string] || '[Unknown]'),
-              m('td.attachment__size', humanReadableSize(file.size.xint64)),
-              m('td.attachment__date', new Date(file.ts * 1000).toLocaleString()),
-              m('td', m('button', { onclick: () => handleAttachmentDownload(file) }, 'Download')),
-            ])
-          )
-        ),
+      m('.attachments-wrapper', [
+        v.attrs.files.map((file) => {
+          const fileSizeNum = file.size ? (typeof file.size === 'object' ? file.size.xint64 || parseInt(file.size.xstr64) || 0 : Number(file.size) || 0) : 0;
+          return m('.attachment-card', [
+            m('.attachment-icon', m('i.fas.fa-paperclip')),
+            m('.attachment-info', [
+              m('.attachment-name', file.fname),
+              m('.attachment-size', humanReadableSize(fileSizeNum)),
+            ]),
+            m(
+              'button.btn-attachment-download',
+              { onclick: () => handleAttachmentDownload(file) },
+              [m('i.fas.fa-download'), m('span.btn-text', ' Download')]
+            ),
+          ]);
+        }),
       ]),
   };
 };
@@ -405,10 +418,10 @@ const MessageView = () => {
               m('i.fas.fa-arrow-left')
             ),
             m('.msg-view-nav__action', [
-              m('button', { onclick: () => { composeType = 'reply'; setShowCompose(true); } }, 'Reply'),
-              m('button', { onclick: () => { composeType = 'replyAll'; setShowCompose(true); } }, 'Reply All'),
-              m('button', { onclick: () => { composeType = 'forward'; setShowCompose(true); } }, 'Forward'),
-              m('button', { onclick: confirmMailDelete }, 'Delete'),
+              m('button', { onclick: () => { composeType = 'reply'; setShowCompose(true); } }, [m('i.fas.fa-reply'), m('span.btn-text', ' Reply')]),
+              m('button', { onclick: () => { composeType = 'replyAll'; setShowCompose(true); } }, [m('i.fas.fa-reply-all'), m('span.btn-text', ' Reply All')]),
+              m('button', { onclick: () => { composeType = 'forward'; setShowCompose(true); } }, [m('i.fas.fa-forward'), m('span.btn-text', ' Forward')]),
+              m('button.red', { onclick: confirmMailDelete }, [m('i.fas.fa-trash'), m('span.btn-text', ' Delete')]),
             ]),
           ]),
           m('.msg-view__header', [
@@ -741,7 +754,6 @@ const Sidebar = () => {
         '.sidebar',
         tabs.map((panelName, index) => {
           const displayName = panelName.charAt(0).toUpperCase() + panelName.slice(1);
-          const labelText = size[panelName] > 0 ? `${displayName} (${size[panelName]})` : displayName;
           return m(
             m.route.Link,
             {
@@ -755,7 +767,8 @@ const Sidebar = () => {
             },
             [
               sidebarIcons[panelName] || null,
-              labelText,
+              m('span.sidebar-link-text', displayName),
+              size[panelName] > 0 && m('span.sidebar-badge', size[panelName]),
             ]
           );
         })
@@ -772,7 +785,6 @@ const SidebarQuickView = () => {
         m('h6.bold', 'Quick View'),
         tabs.map((panelName, index) => {
           const displayName = panelName.charAt(0).toUpperCase() + panelName.slice(1);
-          const labelText = size[panelName] > 0 ? `${displayName} (${size[panelName]})` : displayName;
           return m(
             m.route.Link,
             {
@@ -787,7 +799,8 @@ const SidebarQuickView = () => {
             },
             [
               sidebarIcons[panelName] || null,
-              labelText,
+              m('span.sidebar-link-text', displayName),
+              size[panelName] > 0 && m('span.sidebar-badge', size[panelName]),
             ]
           );
         })
diff --git a/webui-src/app/people/people_util.js b/webui-src/app/people/people_util.js
index 95bd48c..c14e9a9 100644
--- a/webui-src/app/people/people_util.js
+++ b/webui-src/app/people/people_util.js
@@ -32,7 +32,12 @@ const UserAvatar = () => ({
         style: {
           width: sizeStr,
           height: sizeStr,
-          borderRadius: isSquare ? '0' : '',
+          minWidth: sizeStr,
+          minHeight: sizeStr,
+          flexShrink: '0',
+          aspectRatio: '1',
+          objectFit: 'cover',
+          borderRadius: isSquare ? '0' : '50%',
         }
       });
     }
@@ -41,9 +46,15 @@ const UserAvatar = () => ({
       const svgString = jdenticon.toSvg(identityId, pxSize);
       return m('div.jdenticon-avatar', {
         style: {
-          display: 'inline-block',
+          display: 'inline-flex',
+          alignItems: 'center',
+          justifyContent: 'center',
           width: sizeStr,
           height: sizeStr,
+          minWidth: sizeStr,
+          minHeight: sizeStr,
+          flexShrink: '0',
+          aspectRatio: '1',
           borderRadius: isSquare ? '0' : '50%',
           overflow: 'hidden',
           verticalAlign: 'middle',
@@ -67,8 +78,15 @@ const UserAvatar = () => ({
       'div.defaultAvatar',
       {
         style: {
+          display: 'inline-flex',
+          alignItems: 'center',
+          justifyContent: 'center',
           width: sizeStr,
           height: sizeStr,
+          minWidth: sizeStr,
+          minHeight: sizeStr,
+          flexShrink: '0',
+          aspectRatio: '1',
           borderRadius: isSquare ? '0' : '50%',
           backgroundColor: backgroundColor,
         }
diff --git a/webui-src/app/scss/pages/_chat.scss b/webui-src/app/scss/pages/_chat.scss
index b9dad5c..4bf5930 100644
--- a/webui-src/app/scss/pages/_chat.scss
+++ b/webui-src/app/scss/pages/_chat.scss
@@ -1,1180 +1,1260 @@
-@use '../abstracts' as *;
-
-.lobby {
-  margin: 10px;
-  border: 1px solid #aaa;
-  border-radius: 20px;
-}
-
-.lobby .mainname {
-  margin: 20px;
-  font-weight: 100;
-  font-size: 1.2em;
-}
-
-.topic {
-  color: #666;
-}
-
-.lobby>.topic {
-  font-size: 0.95em;
-  margin-left: 25px;
-  margin-bottom: 5px;
-}
-
-.lefttitle {
-  margin-top: 15px;
-  margin-bottom: 0;
-  font-weight: 100;
-  font-size: 1.2em;
-}
-
-.leftname {
-  margin-top: 5px;
-  margin-bottom: 5px;
-  padding: 5px;
-  font-weight: 100;
-  font-size: 1em;
-}
-
-.leftlobby>.topic {
-  font-size: 0.75em;
-  margin-left: 15px;
-  margin-bottom: 5px;
-}
-
-.subscribed,
-.public {
-  cursor: pointer;
-}
-
-.leftlobby {
-  border: 1px solid #aaa;
-  border-radius: 10px;
-  margin-top: 5px;
-  background-color: white;
-}
-
-.leftlobby.selected-lobby,
-.selectedidentity {
-  color: white;
-  background-color: #3ba4d7;
-}
-
-.rightbar {
-  position: absolute;
-  width: 185px;
-  background-color: white;
-  overflow: auto;
-  top: 130px;
-  bottom: 15px;
-  right: 15px;
-}
-
-.user {
-  padding: 5px;
-}
-
-.lobbyName {
-  padding: 15px;
-  margin-top: 2rem;
-}
-
-.lobbies {
-  position: absolute;
-  width: 185px;
-  left: 165px;
-  bottom: 15px;
-  top: 130px;
-  overflow: auto;
-}
-
-.messages,
-.setup {
-  position: absolute;
-  background-color: white;
-  top: 130px;
-  left: 360px;
-  right: 215px;
-  overflow: auto;
-}
-
-.messages {
-  bottom: 115px;
-}
-
-.messagetext {
-  white-space: break-spaces;
-  margin-right: 5px;
-}
-
-.message>* {
-  margin-left: 5px;
-}
-
-.username {
-  color: darkgreen;
-  font-weight: bolder;
-}
-
-.chatMessage {
-  position: absolute;
-  background-color: white;
-  height: 85px;
-  bottom: 15px;
-  right: 215px;
-  left: 360px;
-}
-
-textarea.chatMsg {
-  height: 100%;
-  width: 100%;
-}
-
-.chatatchar {
-  margin-left: 0.2em;
-  margin-right: 0.2em;
-  color: silver;
-}
-
-.setupicon {
-  margin-left: 1em;
-  cursor: pointer;
-}
-
-.leaveicon {
-  margin-left: 1em;
-  cursor: pointer;
-  color: #d40000;
-}
-
-.selectidentity {
-  margin: 15px;
-  font-size: 1.2em;
-}
-
-.setup>.identity {
-  cursor: pointer;
-}
-
-.setup {
-  bottom: 15px;
-}
-
-.createDistantChat {
-  margin-top: 1em;
-}
-
-.no-lobbies {
-
-  .messages,
-  .chatMessage,
-  .setup {
-    left: 165px;
-  }
-}
-
-/* CHAT ROOM (Single Chat) - Desktop Grid Layout */
-@media (min-width: 900px) {
-  .node-panel.chat-room {
-    display: grid !important;
-    grid-template-columns: 250px 1fr 200px !important;
-    /* Lobbies, Chat, Users */
-    grid-template-rows: auto 1fr auto !important;
-    /* Header, Messages, Input */
-    grid-template-areas:
-      "lobbies header rightbar"
-      "lobbies messages rightbar"
-      "lobbies input rightbar" !important;
-    padding: 0 !important;
-    height: 100% !important;
-  }
-
-  .node-panel.chat-room .lobbyName {
-    grid-area: header;
-    padding: 10px;
-    border-bottom: 1px solid #eee;
-    margin: 0;
-    z-index: 10;
-    background: white;
-  }
-
-  .node-panel.chat-room .lobbies {
-    grid-area: lobbies;
-    position: static !important;
-    width: auto !important;
-    height: auto !important;
-    border-right: 1px solid #ccc;
-    overflow-y: auto;
-    display: block !important;
-    top: auto !important;
-    bottom: auto !important;
-    left: auto !important;
-  }
-
-  .node-panel.chat-room .messages {
-    grid-area: messages;
-    position: static !important;
-    width: auto !important;
-    height: auto !important;
-    overflow-y: auto;
-    padding: 10px;
-    left: auto !important;
-    right: auto !important;
-    top: auto !important;
-    bottom: auto !important;
-    margin: 0 !important;
-  }
-
-  .node-panel.chat-room .rightbar {
-    grid-area: rightbar;
-    position: static !important;
-    width: auto !important;
-    border-left: 1px solid #ccc;
-    overflow-y: auto;
-    display: block !important;
-  }
-
-  .node-panel.chat-room .chatMessage {
-    grid-area: input;
-    position: static !important;
-    width: auto !important;
-    height: auto !important;
-    border-top: 1px solid #eee;
-    left: auto !important;
-    right: auto !important;
-    bottom: auto !important;
-    flex: 0 0 auto;
-    padding: 10px !important;
-    background: white;
-    z-index: 10;
-  }
-}
-
-/* Mobile Overrides - Ensure Flex Column */
-@media (max-width: 899px) {
-  .node-panel.chat-room {
-    display: flex !important;
-    flex-direction: column !important;
-    height: 100% !important;
-    position: relative !important;
-  }
-
-  .node-panel.chat-room .lobbyName {
-    flex: 0 0 auto;
-  }
-
-  .node-panel.chat-room .messages {
-    flex: 1 !important;
-    overflow-y: auto !important;
-    position: relative !important;
-    top: 0 !important;
-    bottom: 0 !important;
-    left: 0 !important;
-    right: 0 !important;
-    width: 100% !important;
-    height: auto !important;
-    margin: 0 !important;
-  }
-
-  .node-panel.chat-room .chatMessage {
-    flex: 0 0 auto !important;
-    position: relative !important;
-    bottom: 0 !important;
-    left: 0 !important;
-    right: 0 !important;
-    width: 100% !important;
-    height: auto !important;
-    z-index: 100;
-  }
-
-  .node-panel.chat-room .rightbar,
-  .node-panel.chat-room .lobbies {
-    display: none !important;
-    position: fixed !important;
-    top: 60px !important;
-    bottom: 0 !important;
-    width: 80% !important;
-    background: white !important;
-    z-index: 200 !important;
-    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2) !important;
-  }
-
-  .node-panel.chat-room.show-lobbies .lobbies {
-    display: block !important;
-    left: 0 !important;
-  }
-
-  .node-panel.chat-room.show-users .rightbar {
-    display: block !important;
-    right: 0 !important;
-  }
-
-  .chat-overlay {
-    display: none;
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: rgba(0, 0, 0, 0.4);
-    z-index: 150;
-  }
-
-  .show-lobbies .chat-overlay,
-  .show-users .chat-overlay {
-    display: block;
-  }
-
-  /* Mobile Icons in Header */
-  .mobile-menu-icons {
-    display: flex;
-    gap: 15px;
-    font-size: 1.2rem;
-  }
-
-  .mobile-menu-icons i {
-    cursor: pointer;
-    padding: 5px;
-  }
-}
-
-@media (min-width: 900px) {
-  .mobile-menu-icons {
-    display: none;
-  }
-}
-
-/* =====================================================
-   CHAT HUB - Two-Pane Layout (matching Network page)
-   ===================================================== */
-
-.chat-hub-container {
-  display: flex;
-  height: 100%;
-  width: 100%;
-  overflow: hidden;
-  background-color: #f1f5f9;
-}
-
-.chat-hub-left-pane {
-  width: 320px;
-  min-width: 300px;
-  max-width: 350px;
-  border-right: 1px solid #cbd5e1;
-  display: flex;
-  flex-direction: column;
-  background: #ffffff;
-  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.05);
-}
-
-.chat-own-profile-card {
-  padding: 0.85rem 1.25rem !important;
-  border-bottom: 1px solid #e2e8f0 !important;
-  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
-  display: flex !important;
-  align-items: center !important;
-  justify-content: space-between !important;
-  gap: 0.75rem !important;
-
-  .profile-header {
-    display: flex !important;
-    align-items: center !important;
-    gap: 0.75rem !important;
-    flex: 1 !important;
-    min-width: 0 !important;
-  }
-
-  .chat-create-lobby-btn {
-    display: flex !important;
-    align-items: center !important;
-    gap: 0.35rem !important;
-    padding: 0.4rem 0.85rem !important;
-    font-size: 0.85rem !important;
-    font-weight: 600 !important;
-    border-radius: 0.375rem !important;
-    cursor: pointer !important;
-    flex-shrink: 0 !important;
-    white-space: nowrap !important;
-  }
-
-  .profile-info {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    overflow: hidden;
-
-    .profile-name {
-      font-weight: 700;
-      color: #1e293b;
-      font-size: 1.1rem;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-
-    .profile-status {
-      font-size: 0.85rem;
-      color: #10b981;
-      font-weight: 500;
-      display: flex;
-      align-items: center;
-      gap: 0.35rem;
-
-      &::before {
-        content: '';
-        display: inline-block;
-        width: 8px;
-        height: 8px;
-        background-color: #10b981;
-        border-radius: 50%;
-      }
-    }
-  }
-}
-
-.chat-rooms-list-container {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-
-  .searchbar-container {
-    padding: 0.75rem 1rem;
-    border-bottom: 1px solid #e2e8f0;
-
-    input.searchbar {
-      width: 100%;
-      padding: 0.5rem 0.75rem;
-      font-size: 0.9rem;
-      border: 1px solid #cbd5e1;
-      border-radius: 0.375rem;
-      background-color: #f8fafc;
-      outline: none;
-      transition: all 0.2s;
-
-      &:focus {
-        background-color: #ffffff;
-        border-color: #3ba4d7;
-        box-shadow: 0 0 0 3px rgba(59, 164, 215, 0.15);
-      }
-    }
-  }
-
-  .rooms-scroll {
-    flex: 1;
-    overflow-y: auto;
-    padding: 0.5rem 0;
-  }
-}
-
-.rooms-section-title {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.75rem 1rem 0.375rem;
-  font-size: 0.75rem;
-  font-weight: 700;
-  color: #64748b;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-
-  i {
-    font-size: 0.7rem;
-    color: #94a3b8;
-  }
-}
-
-.chat-room-list-item {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 0.75rem 1rem;
-  margin: 0.125rem 0.5rem;
-  border-radius: 0.5rem;
-  cursor: pointer;
-  transition: all 0.2s;
-
-  &:hover {
-    background-color: #f1f5f9;
-  }
-
-  &.selected {
-    background-color: #e0f2fe;
-
-    .room-name {
-      color: #0369a1;
-      font-weight: 600;
-    }
-  }
-
-  .room-icon {
-    flex-shrink: 0;
-    width: 36px;
-    height: 36px;
-    border-radius: 0.5rem;
-    background: linear-gradient(135deg, #3ba4d7, #0ea5e9);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: #ffffff;
-    font-size: 1.35rem;
-  }
-
-  &.public-room .room-icon {
-    background: linear-gradient(135deg, #10b981, #059669);
-  }
-
-  .room-meta {
-    flex: 1;
-    min-width: 0;
-
-    .room-name {
-      font-size: 0.95rem;
-      color: #334155;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      transition: color 0.2s;
-    }
-
-    .room-topic {
-      font-size: 0.8rem;
-      color: #94a3b8;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-  }
-
-  .room-badge {
-    flex-shrink: 0;
-    min-width: 24px;
-    height: 24px;
-    border-radius: 12px;
-    background-color: #e2e8f0;
-    color: #475569;
-    font-size: 0.75rem;
-    font-weight: 700;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0 0.375rem;
-  }
-}
-
-.chat-hub-right-pane {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  background-color: #f8fafc;
-}
-
-.chat-pane-placeholder {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  color: #94a3b8;
-  gap: 1rem;
-  padding: 2rem;
-  text-align: center;
-
-  i {
-    font-size: 4rem;
-    color: #cbd5e1;
-  }
-
-  p {
-    font-size: 1.1rem;
-    max-width: 400px;
-  }
-}
-
-.chat-hub-tab-content {
-  flex: 1;
-  overflow-y: auto;
-  padding: 1.5rem;
-}
-
-.chat-room-detail-view {
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-
-  .detail-header {
-    display: flex;
-    align-items: flex-start;
-    gap: 1.5rem;
-    padding-bottom: 1.5rem;
-    border-bottom: 1px solid #e2e8f0;
-    flex-wrap: wrap;
-
-    .detail-title {
-      flex: 1;
-      min-width: 200px;
-
-      h2 {
-        font-size: 1.75rem;
-        font-weight: 800;
-        color: #1e293b;
-        margin-bottom: 0.25rem;
-      }
-
-      .detail-subtitle {
-        font-size: 0.9rem;
-        color: #64748b;
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-      }
-    }
-
-    .detail-actions {
-      display: flex;
-      gap: 0.75rem;
-      flex-wrap: wrap;
-
-      button {
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-        padding: 0.5rem 1rem;
-        font-size: 0.9rem;
-      }
-    }
-  }
-
-  .detail-section {
-    background-color: #ffffff;
-    border-radius: 0.5rem;
-    border: 1px solid #e2e8f0;
-    padding: 1.25rem;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
-
-    h3 {
-      font-size: 1.1rem;
-      font-weight: 700;
-      color: #334155;
-      margin-bottom: 1rem;
-      padding-bottom: 0.5rem;
-      border-bottom: 1px solid #f1f5f9;
-    }
-
-    .info-grid {
-      display: grid;
-      grid-template-columns: 130px 1fr;
-      row-gap: 0.75rem;
-      font-size: 0.9rem;
-
-      .info-label {
-        font-weight: 600;
-        color: #64748b;
-      }
-
-      .info-value {
-        color: #1e293b;
-        word-break: break-all;
-      }
-    }
-  }
-}
-
-.participants-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
-  gap: 0.5rem;
-}
-
-.participant-card {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.5rem 0.75rem;
-  background-color: #f8fafc;
-  border: 1px solid #e2e8f0;
-  border-radius: 0.375rem;
-
-  .participant-name {
-    font-size: 0.875rem;
-    color: #334155;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-}
-
-.no-participants {
-  color: #94a3b8;
-  font-size: 0.9rem;
-  font-style: italic;
-}
-
-.detail-actions-footer {
-  display: flex;
-  gap: 0.75rem;
-
-  button {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    padding: 0.5rem 1rem;
-    font-size: 0.9rem;
-  }
-}
-
-.join-description {
-  color: #64748b;
-  font-size: 0.9rem;
-  margin-bottom: 1rem;
-}
-
-.identities-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-  gap: 0.75rem;
-}
-
-.identity-card {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0.75rem 1rem;
-  background-color: #f8fafc;
-  border: 1px solid #e2e8f0;
-  border-radius: 0.5rem;
-  cursor: pointer;
-  transition: all 0.2s;
-
-  &:hover {
-    background-color: #e0f2fe;
-    border-color: #3ba4d7;
-  }
-
-  .identity-name {
-    font-size: 0.95rem;
-    font-weight: 600;
-    color: #334155;
-  }
-
-  i {
-    color: #3ba4d7;
-    font-size: 0.9rem;
-  }
-}
-
-.no-rooms {
-  padding: 1rem;
-  color: #94a3b8;
-  text-align: center;
-  font-style: italic;
-}
-
-/* Chat Hub Responsive - Mobile */
-@media (max-width: 899px) {
-  .chat-hub-container {
-    flex-direction: column;
-  }
-
-  .chat-hub-left-pane {
-    width: 100%;
-    min-width: 0;
-    max-width: none;
-    max-height: 45%;
-    border-right: none;
-    border-bottom: 1px solid #cbd5e1;
-  }
-
-  .chat-hub-right-pane {
-    flex: 1;
-    min-height: 0;
-  }
-}
-
-/* =====================================================
-   CHAT HUB - Right Pane Conversation & Tabs Styling
-   ===================================================== */
-
-.chat-hub-header-bar {
-  padding: 0.75rem 1.5rem;
-  background-color: #ffffff;
-  border-bottom: 1px solid #e2e8f0;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  height: 65px;
-  flex-shrink: 0;
-}
-
-.chat-hub-header-bar .chat-header-info {
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-.chat-hub-header-bar .chat-header-info .chat-header-name {
-  font-size: 1.15rem;
-  font-weight: 800;
-  color: #1e293b;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.chat-hub-header-bar .chat-header-info .chat-header-topic {
-  font-size: 0.85rem;
-  color: #64748b;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  margin-top: 0.125rem;
-}
-
-.chat-hub-header-bar .chat-header-actions {
-  display: flex;
-  gap: 0.5rem;
-}
-
-.chat-hub-header-bar .chat-header-actions button {
-  display: flex;
-  align-items: center;
-  gap: 0.35rem;
-  padding: 0.375rem 0.75rem;
-  font-size: 0.85rem;
-}
-
-.chat-hub-tabs-container {
-  background-color: #ffffff;
-  border-bottom: 1px solid #cbd5e1;
-  padding: 0.5rem 1.5rem 0;
-}
-
-.chat-hub-tabs {
-  display: flex;
-  gap: 0.5rem;
-}
-
-.chat-hub-tabs .tab-btn {
-  padding: 0.625rem 1.25rem;
-  font-size: 0.95rem;
-  font-weight: 600;
-  color: #64748b;
-  background: transparent;
-  border: none;
-  border-radius: 0.375rem 0.375rem 0 0;
-  border-bottom: 3px solid transparent;
-  cursor: pointer;
-  box-shadow: none;
-  transition: all 0.2s;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.chat-hub-tabs .tab-btn:hover {
-  color: #334155;
-  background-color: #f1f5f9;
-}
-
-.chat-hub-tabs .tab-btn.active {
-  color: #3ba4d7;
-  border-bottom-color: #3ba4d7;
-  background-color: transparent;
-}
-
-.chat-hub-tab-content {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  background-color: #f8fafc;
-}
-
-.chat-hub-conversation-layout {
-  display: flex;
-  flex-direction: row;
-  height: 100%;
-  width: 100%;
-  overflow: hidden;
-}
-
-.chat-hub-conversation-main {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  height: 100%;
-  overflow: hidden;
-}
-
-.chat-hub-rightbar {
-  width: 200px;
-  border-left: 1px solid #cbd5e1;
-  background-color: #ffffff;
-  display: flex;
-  flex-direction: column;
-  flex-shrink: 0;
-}
-
-.chat-hub-rightbar .rightbar-title {
-  padding: 0.75rem 1rem;
-  font-size: 0.85rem;
-  font-weight: 700;
-  color: #64748b;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  border-bottom: 1px solid #e2e8f0;
-}
-
-.chat-hub-rightbar .rightbar-users-list {
-  flex: 1;
-  overflow-y: auto;
-  padding: 0.5rem;
-}
-
-.chat-hub-rightbar .user {
-  padding: 0.5rem 0.75rem;
-  font-size: 0.9rem;
-  color: #334155;
-  border-radius: 0.375rem;
-  transition: all 0.2s;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.chat-hub-rightbar .user:hover {
-  background-color: #f1f5f9;
-  color: #0f172a;
-}
-
-.chat-hub-rightbar .user .defaultAvatar {
-  width: 2rem;
-  height: 2rem;
-  font-size: 0.9rem;
-  flex-shrink: 0;
-}
-
-.chat-hub-rightbar .user img.avatar {
-  width: 2rem;
-  height: 2rem;
-  flex-shrink: 0;
-}
-
-@media (max-width: 899px) {
-  .chat-hub-rightbar {
-    display: none;
-  }
-}
-
-.chat-hub-messages {
-  flex: 1;
-  overflow-y: auto;
-  padding: 1.25rem 1.5rem;
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-/* Chat bubble overrides for two-pane layout */
-.chat-hub-messages .message {
-  display: flex;
-  flex-direction: column;
-  max-width: 70%;
-  padding: 0.625rem 0.875rem;
-  border-radius: 0.75rem;
-  font-size: 0.925rem;
-  line-height: 1.4;
-  word-break: break-word;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-}
-
-.chat-hub-messages .message.incoming {
-  align-self: flex-start;
-  align-items: flex-start;
-  background-color: #ffffff;
-  color: #1e293b;
-  border: 1px solid #e2e8f0;
-  border-bottom-left-radius: 0.125rem;
-}
-
-.chat-hub-messages .message.outgoing {
-  align-self: flex-end;
-  align-items: flex-end;
-  background-color: #3ba4d7;
-  color: #ffffff;
-  border-bottom-right-radius: 0.125rem;
-}
-
-.chat-hub-messages .message .username {
-  font-size: 0.75rem;
-  margin-bottom: 0.25rem;
-  padding: 0 0.125rem;
-  font-weight: 700;
-}
-
-.chat-hub-messages .message.incoming .username {
-  color: #0369a1;
-}
-
-.chat-hub-messages .message.outgoing .username {
-  color: #e0f2fe;
-}
-
-.chat-hub-messages .message .messagetext {
-  white-space: break-spaces;
-  margin: 0;
-}
-
-.chat-hub-messages .message .datetime {
-  font-size: 0.7rem;
-  margin-top: 0.25rem;
-  padding: 0 0.125rem;
-  opacity: 0.8;
-}
-
-.chat-hub-messages .message.incoming .datetime {
-  color: #64748b;
-}
-
-.chat-hub-messages .message.outgoing .datetime {
-  color: #f1f5f9;
-}
-
-.chat-hub-input-area {
-  padding: 0.75rem 1.5rem;
-  background-color: #ffffff;
-  border-top: 1px solid #cbd5e1;
-  display: flex;
-  gap: 0.75rem;
-  align-items: flex-end;
-  flex-shrink: 0;
-}
-
-.chat-hub-input-area textarea.chat-hub-textarea {
-  flex: 1;
-  resize: vertical;
-  min-height: 40px;
-  max-height: 250px;
-  height: 40px;
-  padding: 0.5rem 0.75rem;
-  border: 1px solid #cbd5e1;
-  border-radius: 0.375rem;
-  font-size: 0.9rem;
-  outline: none;
-  transition: border-color 0.2s, box-shadow 0.2s;
-  background-color: #f8fafc;
-}
-
-.chat-hub-input-area textarea.chat-hub-textarea:focus {
-  background-color: #ffffff;
-  border-color: #3ba4d7;
-  box-shadow: 0 0 0 3px rgba(59, 164, 215, 0.15);
-}
-
-.chat-hub-input-area button.chat-hub-send-btn {
-  padding: 0.5rem 1.25rem;
-  font-size: 0.9rem;
-  height: 40px;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  border-radius: 0.375rem;
-}
-
-button.chat-hub-action-btn,
-label.chat-hub-action-btn,
-.chat-hub-action-btn {
-  display: inline-flex !important;
-  align-items: center !important;
-  justify-content: center !important;
-  width: 36px !important;
-  height: 36px !important;
-  min-width: 36px !important;
-  padding: 0 !important;
-  margin: 0 !important;
-  background: transparent !important;
-  border: none !important;
-  box-shadow: none !important;
-  color: #64748b !important;
-  font-size: 1.15rem !important;
-  border-radius: 0.375rem !important;
-  cursor: pointer !important;
-  transition: all 0.15s ease !important;
-  outline: none !important;
-
-  &:hover {
-    background-color: #e2e8f0 !important;
-    color: #3b82f6 !important;
-    box-shadow: none !important;
-  }
-
-  i {
-    font-size: 1.15rem !important;
-    color: inherit !important;
-  }
-}
-
-/* Compact Room Chat Style (No bubbles, unique nickname colors, IRC-style) */
-.chat-hub-messages.compact-container,
-.messages.compact-container {
-  gap: 0 !important;
-  padding: 0.75rem 1rem !important;
-  background-color: #ffffff !important;
-  display: flex !important;
-  flex-direction: column !important;
-
-  .message.compact {
-    display: block !important;
-    max-width: 100% !important;
-    padding: 0.1rem 0 !important;
-    border-radius: 0 !important;
-    background-color: transparent !important;
-    border: none !important;
-    box-shadow: none !important;
-    align-self: flex-start !important;
-    font-size: 0.875rem !important;
-    line-height: 1.45 !important;
-    margin: 0 !important;
-    white-space: nowrap !important;
-    // overflow: hidden !important;
-    // text-overflow: ellipsis !important;
-
-    &:hover {
-      background-color: #f8fafc !important;
-      overflow: visible !important;
-      white-space: normal !important;
-    }
-
-    .datetime {
-      color: #a0a0a0 !important;
-      margin-right: 0.4rem !important;
-      font-size: 0.78rem !important;
-      font-family: monospace !important;
-      opacity: 1 !important;
-      display: inline !important;
-    }
-
-    .username {
-      font-weight: bold !important;
-      margin-right: 0.2rem !important;
-      font-size: 0.875rem !important;
-      display: inline !important;
-    }
-
-    .messagetext {
-      color: #1e293b !important;
-      white-space: normal !important;
-      word-break: break-word !important;
-      display: inline !important;
-      margin: 0 !important;
-    }
-  }
-}
-
-
-

+@use '../abstracts' as *;
+
+.lobby {
+  margin: 10px;
+  border: 1px solid #aaa;
+  border-radius: 20px;
+}
+
+.lobby .mainname {
+  margin: 20px;
+  font-weight: 100;
+  font-size: 1.2em;
+}
+
+.topic {
+  color: #666;
+}
+
+.lobby>.topic {
+  font-size: 0.95em;
+  margin-left: 25px;
+  margin-bottom: 5px;
+}
+
+.lefttitle {
+  margin-top: 15px;
+  margin-bottom: 0;
+  font-weight: 100;
+  font-size: 1.2em;
+}
+
+.leftname {
+  margin-top: 5px;
+  margin-bottom: 5px;
+  padding: 5px;
+  font-weight: 100;
+  font-size: 1em;
+}
+
+.leftlobby>.topic {
+  font-size: 0.75em;
+  margin-left: 15px;
+  margin-bottom: 5px;
+}
+
+.subscribed,
+.public {
+  cursor: pointer;
+}
+
+.leftlobby {
+  border: 1px solid #aaa;
+  border-radius: 10px;
+  margin-top: 5px;
+  background-color: white;
+}
+
+.leftlobby.selected-lobby,
+.selectedidentity {
+  color: white;
+  background-color: #3ba4d7;
+}
+
+.rightbar {
+  position: absolute;
+  width: 185px;
+  background-color: white;
+  overflow: auto;
+  top: 130px;
+  bottom: 15px;
+  right: 15px;
+}
+
+.user {
+  padding: 5px;
+}
+
+.lobbyName {
+  padding: 15px;
+  margin-top: 2rem;
+}
+
+.lobbies {
+  position: absolute;
+  width: 185px;
+  left: 165px;
+  bottom: 15px;
+  top: 130px;
+  overflow: auto;
+}
+
+.messages,
+.setup {
+  position: absolute;
+  background-color: white;
+  top: 130px;
+  left: 360px;
+  right: 215px;
+  overflow: auto;
+}
+
+.messages {
+  bottom: 115px;
+}
+
+.messagetext {
+  white-space: break-spaces;
+  margin-right: 5px;
+}
+
+.message>* {
+  margin-left: 5px;
+}
+
+.username {
+  color: darkgreen;
+  font-weight: bolder;
+}
+
+.chatMessage {
+  position: absolute;
+  background-color: white;
+  height: 85px;
+  bottom: 15px;
+  right: 215px;
+  left: 360px;
+}
+
+textarea.chatMsg {
+  height: 100%;
+  width: 100%;
+}
+
+.chatatchar {
+  margin-left: 0.2em;
+  margin-right: 0.2em;
+  color: silver;
+}
+
+.setupicon {
+  margin-left: 1em;
+  cursor: pointer;
+}
+
+.leaveicon {
+  margin-left: 1em;
+  cursor: pointer;
+  color: #d40000;
+}
+
+.selectidentity {
+  margin: 15px;
+  font-size: 1.2em;
+}
+
+.setup>.identity {
+  cursor: pointer;
+}
+
+.setup {
+  bottom: 15px;
+}
+
+.createDistantChat {
+  margin-top: 1em;
+}
+
+.no-lobbies {
+
+  .messages,
+  .chatMessage,
+  .setup {
+    left: 165px;
+  }
+}
+
+/* CHAT ROOM (Single Chat) - Desktop Grid Layout */
+@media (min-width: 900px) {
+  .node-panel.chat-room {
+    display: grid !important;
+    grid-template-columns: 250px 1fr 200px !important;
+    /* Lobbies, Chat, Users */
+    grid-template-rows: auto 1fr auto !important;
+    /* Header, Messages, Input */
+    grid-template-areas:
+      "lobbies header rightbar"
+      "lobbies messages rightbar"
+      "lobbies input rightbar" !important;
+    padding: 0 !important;
+    height: 100% !important;
+  }
+
+  .node-panel.chat-room .lobbyName {
+    grid-area: header;
+    padding: 10px;
+    border-bottom: 1px solid #eee;
+    margin: 0;
+    z-index: 10;
+    background: white;
+  }
+
+  .node-panel.chat-room .lobbies {
+    grid-area: lobbies;
+    position: static !important;
+    width: auto !important;
+    height: auto !important;
+    border-right: 1px solid #ccc;
+    overflow-y: auto;
+    display: block !important;
+    top: auto !important;
+    bottom: auto !important;
+    left: auto !important;
+  }
+
+  .node-panel.chat-room .messages {
+    grid-area: messages;
+    position: static !important;
+    width: auto !important;
+    height: auto !important;
+    overflow-y: auto;
+    padding: 10px;
+    left: auto !important;
+    right: auto !important;
+    top: auto !important;
+    bottom: auto !important;
+    margin: 0 !important;
+  }
+
+  .node-panel.chat-room .rightbar {
+    grid-area: rightbar;
+    position: static !important;
+    width: auto !important;
+    border-left: 1px solid #ccc;
+    overflow-y: auto;
+    display: block !important;
+  }
+
+  .node-panel.chat-room .chatMessage {
+    grid-area: input;
+    position: static !important;
+    width: auto !important;
+    height: auto !important;
+    border-top: 1px solid #eee;
+    left: auto !important;
+    right: auto !important;
+    bottom: auto !important;
+    flex: 0 0 auto;
+    padding: 10px !important;
+    background: white;
+    z-index: 10;
+  }
+}
+
+/* Mobile Overrides - Ensure Flex Column */
+@media (max-width: 899px) {
+  .node-panel.chat-room {
+    display: flex !important;
+    flex-direction: column !important;
+    height: 100% !important;
+    position: relative !important;
+  }
+
+  .node-panel.chat-room .lobbyName {
+    flex: 0 0 auto;
+  }
+
+  .node-panel.chat-room .messages {
+    flex: 1 !important;
+    overflow-y: auto !important;
+    position: relative !important;
+    top: 0 !important;
+    bottom: 0 !important;
+    left: 0 !important;
+    right: 0 !important;
+    width: 100% !important;
+    height: auto !important;
+    margin: 0 !important;
+  }
+
+  .node-panel.chat-room .chatMessage {
+    flex: 0 0 auto !important;
+    position: relative !important;
+    bottom: 0 !important;
+    left: 0 !important;
+    right: 0 !important;
+    width: 100% !important;
+    height: auto !important;
+    z-index: 100;
+  }
+
+  .node-panel.chat-room .rightbar,
+  .node-panel.chat-room .lobbies {
+    display: none !important;
+    position: fixed !important;
+    top: 60px !important;
+    bottom: 0 !important;
+    width: 80% !important;
+    background: white !important;
+    z-index: 200 !important;
+    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2) !important;
+  }
+
+  .node-panel.chat-room.show-lobbies .lobbies {
+    display: block !important;
+    left: 0 !important;
+  }
+
+  .node-panel.chat-room.show-users .rightbar {
+    display: block !important;
+    right: 0 !important;
+  }
+
+  .chat-overlay {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.4);
+    z-index: 150;
+  }
+
+  .show-lobbies .chat-overlay,
+  .show-users .chat-overlay {
+    display: block;
+  }
+
+  /* Mobile Icons in Header */
+  .mobile-menu-icons {
+    display: flex;
+    gap: 15px;
+    font-size: 1.2rem;
+  }
+
+  .mobile-menu-icons i {
+    cursor: pointer;
+    padding: 5px;
+  }
+}
+
+@media (min-width: 900px) {
+  .mobile-menu-icons {
+    display: none;
+  }
+}
+
+/* =====================================================
+   CHAT HUB - Two-Pane Layout (matching Network page)
+   ===================================================== */
+
+.chat-hub-container {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  background-color: #f1f5f9;
+}
+
+.chat-hub-left-pane {
+  width: 320px;
+  min-width: 300px;
+  max-width: 350px;
+  border-right: 1px solid #cbd5e1;
+  display: flex;
+  flex-direction: column;
+  background: #ffffff;
+  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.05);
+}
+
+.chat-own-profile-card {
+  padding: 0.85rem 1.25rem !important;
+  border-bottom: 1px solid #e2e8f0 !important;
+  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: space-between !important;
+  gap: 0.75rem !important;
+
+  .profile-header {
+    display: flex !important;
+    align-items: center !important;
+    gap: 0.75rem !important;
+    flex: 1 !important;
+    min-width: 0 !important;
+  }
+
+  .chat-create-lobby-btn {
+    display: flex !important;
+    align-items: center !important;
+    gap: 0.35rem !important;
+    padding: 0.4rem 0.85rem !important;
+    font-size: 0.85rem !important;
+    font-weight: 600 !important;
+    border-radius: 0.375rem !important;
+    cursor: pointer !important;
+    flex-shrink: 0 !important;
+    white-space: nowrap !important;
+  }
+
+  .profile-info {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    overflow: hidden;
+
+    .profile-name {
+      font-weight: 700;
+      color: #1e293b;
+      font-size: 1.1rem;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .profile-status {
+      font-size: 0.85rem;
+      color: #10b981;
+      font-weight: 500;
+      display: flex;
+      align-items: center;
+      gap: 0.35rem;
+
+      &::before {
+        content: '';
+        display: inline-block;
+        width: 8px;
+        height: 8px;
+        background-color: #10b981;
+        border-radius: 50%;
+      }
+    }
+  }
+}
+
+.chat-rooms-list-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+
+  .searchbar-container {
+    padding: 0.75rem 1rem;
+    border-bottom: 1px solid #e2e8f0;
+
+    input.searchbar {
+      width: 100%;
+      padding: 0.5rem 0.75rem;
+      font-size: 0.9rem;
+      border: 1px solid #cbd5e1;
+      border-radius: 0.375rem;
+      background-color: #f8fafc;
+      outline: none;
+      transition: all 0.2s;
+
+      &:focus {
+        background-color: #ffffff;
+        border-color: #3ba4d7;
+        box-shadow: 0 0 0 3px rgba(59, 164, 215, 0.15);
+      }
+    }
+  }
+
+  .rooms-scroll {
+    flex: 1;
+    overflow-y: auto;
+    padding: 0.5rem 0;
+  }
+}
+
+.rooms-section-title {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem 0.375rem;
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: #64748b;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+
+  i {
+    font-size: 0.7rem;
+    color: #94a3b8;
+  }
+}
+
+.chat-room-list-item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  margin: 0.125rem 0.5rem;
+  border-radius: 0.5rem;
+  cursor: pointer;
+  transition: all 0.2s;
+
+  &:hover {
+    background-color: #f1f5f9;
+  }
+
+  &.selected {
+    background-color: #e0f2fe;
+
+    .room-name {
+      color: #0369a1;
+      font-weight: 600;
+    }
+  }
+
+  .room-icon {
+    flex-shrink: 0;
+    width: 36px;
+    height: 36px;
+    border-radius: 0.5rem;
+    background: linear-gradient(135deg, #3ba4d7, #0ea5e9);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #ffffff;
+    font-size: 1.35rem;
+  }
+
+  &.public-room .room-icon {
+    background: linear-gradient(135deg, #10b981, #059669);
+  }
+
+  .room-meta {
+    flex: 1;
+    min-width: 0;
+
+    .room-name {
+      font-size: 0.95rem;
+      color: #334155;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      transition: color 0.2s;
+    }
+
+    .room-topic {
+      font-size: 0.8rem;
+      color: #94a3b8;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  .room-badge {
+    flex-shrink: 0;
+    min-width: 24px;
+    height: 24px;
+    border-radius: 12px;
+    background-color: #e2e8f0;
+    color: #475569;
+    font-size: 0.75rem;
+    font-weight: 700;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 0.375rem;
+  }
+}
+
+.chat-hub-right-pane {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background-color: #f8fafc;
+}
+
+.chat-pane-placeholder {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: #94a3b8;
+  gap: 1rem;
+  padding: 2rem;
+  text-align: center;
+
+  i {
+    font-size: 4rem;
+    color: #cbd5e1;
+  }
+
+  p {
+    font-size: 1.1rem;
+    max-width: 400px;
+  }
+}
+
+.chat-hub-tab-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1.5rem;
+}
+
+.chat-room-detail-view {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+
+  .detail-header {
+    display: flex;
+    align-items: flex-start;
+    gap: 1.5rem;
+    padding-bottom: 1.5rem;
+    border-bottom: 1px solid #e2e8f0;
+    flex-wrap: wrap;
+
+    .detail-title {
+      flex: 1;
+      min-width: 200px;
+
+      h2 {
+        font-size: 1.75rem;
+        font-weight: 800;
+        color: #1e293b;
+        margin-bottom: 0.25rem;
+      }
+
+      .detail-subtitle {
+        font-size: 0.9rem;
+        color: #64748b;
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+      }
+    }
+
+    .detail-actions {
+      display: flex;
+      gap: 0.75rem;
+      flex-wrap: wrap;
+
+      button {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        padding: 0.5rem 1rem;
+        font-size: 0.9rem;
+      }
+    }
+  }
+
+  .detail-section {
+    background-color: #ffffff;
+    border-radius: 0.5rem;
+    border: 1px solid #e2e8f0;
+    padding: 1.25rem;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
+
+    h3 {
+      font-size: 1.1rem;
+      font-weight: 700;
+      color: #334155;
+      margin-bottom: 1rem;
+      padding-bottom: 0.5rem;
+      border-bottom: 1px solid #f1f5f9;
+    }
+
+    .info-grid {
+      display: grid;
+      grid-template-columns: 130px 1fr;
+      row-gap: 0.75rem;
+      font-size: 0.9rem;
+
+      .info-label {
+        font-weight: 600;
+        color: #64748b;
+      }
+
+      .info-value {
+        color: #1e293b;
+        word-break: break-all;
+      }
+    }
+  }
+}
+
+.participants-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  gap: 0.5rem;
+}
+
+.participant-card {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  background-color: #f8fafc;
+  border: 1px solid #e2e8f0;
+  border-radius: 0.375rem;
+
+  .participant-name {
+    font-size: 0.875rem;
+    color: #334155;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
+.no-participants {
+  color: #94a3b8;
+  font-size: 0.9rem;
+  font-style: italic;
+}
+
+.detail-actions-footer {
+  display: flex;
+  gap: 0.75rem;
+
+  button {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 1rem;
+    font-size: 0.9rem;
+  }
+}
+
+.join-description {
+  color: #64748b;
+  font-size: 0.9rem;
+  margin-bottom: 1rem;
+}
+
+.identities-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 0.75rem;
+}
+
+.identity-card {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1rem;
+  background-color: #f8fafc;
+  border: 1px solid #e2e8f0;
+  border-radius: 0.5rem;
+  cursor: pointer;
+  transition: all 0.2s;
+
+  &:hover {
+    background-color: #e0f2fe;
+    border-color: #3ba4d7;
+  }
+
+  .identity-name {
+    font-size: 0.95rem;
+    font-weight: 600;
+    color: #334155;
+  }
+
+  i {
+    color: #3ba4d7;
+    font-size: 0.9rem;
+  }
+}
+
+.no-rooms {
+  padding: 1rem;
+  color: #94a3b8;
+  text-align: center;
+  font-style: italic;
+}
+
+/* Chat Hub Responsive - Mobile */
+@media (max-width: 899px) {
+  .chat-hub-container {
+    flex-direction: column;
+  }
+
+  .chat-hub-left-pane {
+    width: 100%;
+    min-width: 0;
+    max-width: none;
+    max-height: 45%;
+    border-right: none;
+    border-bottom: 1px solid #cbd5e1;
+  }
+
+  .chat-hub-right-pane {
+    flex: 1;
+    min-height: 0;
+  }
+}
+
+/* =====================================================
+   CHAT HUB - Right Pane Conversation & Tabs Styling
+   ===================================================== */
+
+.chat-hub-header-bar {
+  padding: 0.75rem 1.5rem;
+  background-color: #ffffff;
+  border-bottom: 1px solid #e2e8f0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 65px;
+  flex-shrink: 0;
+}
+
+.chat-hub-header-bar .chat-header-info {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.chat-hub-header-bar .chat-header-info .chat-header-name {
+  font-size: 1.15rem;
+  font-weight: 800;
+  color: #1e293b;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.chat-hub-header-bar .chat-header-info .chat-header-topic {
+  font-size: 0.85rem;
+  color: #64748b;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-top: 0.125rem;
+}
+
+.chat-hub-header-bar .chat-header-actions {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.chat-hub-header-bar .chat-header-actions button {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 0.375rem 0.75rem;
+  font-size: 0.85rem;
+}
+
+.chat-hub-tabs-container {
+  background-color: #ffffff;
+  border-bottom: 1px solid #cbd5e1;
+  padding: 0.5rem 1.5rem 0;
+}
+
+.chat-hub-tabs {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.chat-hub-tabs .tab-btn {
+  padding: 0.625rem 1.25rem;
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: #64748b;
+  background: transparent;
+  border: none;
+  border-radius: 0.375rem 0.375rem 0 0;
+  border-bottom: 3px solid transparent;
+  cursor: pointer;
+  box-shadow: none;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.chat-hub-tabs .tab-btn:hover {
+  color: #334155;
+  background-color: #f1f5f9;
+}
+
+.chat-hub-tabs .tab-btn.active {
+  color: #3ba4d7;
+  border-bottom-color: #3ba4d7;
+  background-color: transparent;
+}
+
+.chat-hub-tab-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background-color: #f8fafc;
+}
+
+.chat-hub-conversation-layout {
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+}
+
+.chat-hub-conversation-main {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  height: 100%;
+  overflow: hidden;
+}
+
+.chat-hub-rightbar {
+  width: 200px;
+  border-left: 1px solid #cbd5e1;
+  background-color: #ffffff;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+}
+
+.chat-hub-rightbar .rightbar-title {
+  padding: 0.75rem 1rem;
+  font-size: 0.85rem;
+  font-weight: 700;
+  color: #64748b;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  border-bottom: 1px solid #e2e8f0;
+}
+
+.chat-hub-rightbar .rightbar-users-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0.5rem;
+}
+
+.chat-hub-rightbar .user {
+  padding: 0.5rem 0.75rem;
+  font-size: 0.9rem;
+  color: #334155;
+  border-radius: 0.375rem;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.chat-hub-rightbar .user:hover {
+  background-color: #f1f5f9;
+  color: #0f172a;
+}
+
+.chat-hub-rightbar .user .defaultAvatar {
+  width: 2rem;
+  height: 2rem;
+  font-size: 0.9rem;
+  flex-shrink: 0;
+}
+
+.chat-hub-rightbar .user img.avatar {
+  width: 2rem;
+  height: 2rem;
+  flex-shrink: 0;
+}
+
+@media (max-width: 899px) {
+  .chat-hub-rightbar {
+    display: none;
+  }
+}
+
+.chat-hub-messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1.25rem 1.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+/* Chat bubble overrides for two-pane layout */
+.chat-hub-messages .message {
+  display: flex;
+  flex-direction: column;
+  max-width: 70%;
+  padding: 0.625rem 0.875rem;
+  border-radius: 0.75rem;
+  font-size: 0.925rem;
+  line-height: 1.4;
+  word-break: break-word;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+.chat-hub-messages .message.incoming {
+  align-self: flex-start;
+  align-items: flex-start;
+  background-color: #ffffff;
+  color: #1e293b;
+  border: 1px solid #e2e8f0;
+  border-bottom-left-radius: 0.125rem;
+}
+
+.chat-hub-messages .message.outgoing {
+  align-self: flex-end;
+  align-items: flex-end;
+  background-color: #3ba4d7;
+  color: #ffffff;
+  border-bottom-right-radius: 0.125rem;
+}
+
+.chat-hub-messages .message .username {
+  font-size: 0.75rem;
+  margin-bottom: 0.25rem;
+  padding: 0 0.125rem;
+  font-weight: 700;
+}
+
+.chat-hub-messages .message.incoming .username {
+  color: #0369a1;
+}
+
+.chat-hub-messages .message.outgoing .username {
+  color: #e0f2fe;
+}
+
+.chat-hub-messages .message .messagetext {
+  white-space: break-spaces;
+  margin: 0;
+}
+
+.chat-hub-messages .message .datetime {
+  font-size: 0.7rem;
+  margin-top: 0.25rem;
+  padding: 0 0.125rem;
+  opacity: 0.8;
+}
+
+.chat-hub-messages .message.incoming .datetime {
+  color: #64748b;
+}
+
+.chat-hub-messages .message.outgoing .datetime {
+  color: #f1f5f9;
+}
+
+.chat-hub-input-area {
+  padding: 0.75rem 1.5rem;
+  background-color: #ffffff;
+  border-top: 1px solid #cbd5e1;
+  display: flex;
+  gap: 0.75rem;
+  align-items: flex-end;
+  flex-shrink: 0;
+}
+
+.chat-hub-input-area textarea.chat-hub-textarea {
+  flex: 1;
+  resize: vertical;
+  min-height: 40px;
+  max-height: 250px;
+  height: 40px;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid #cbd5e1;
+  border-radius: 0.375rem;
+  font-size: 0.9rem;
+  outline: none;
+  transition: border-color 0.2s, box-shadow 0.2s;
+  background-color: #f8fafc;
+}
+
+.chat-hub-input-area textarea.chat-hub-textarea:focus {
+  background-color: #ffffff;
+  border-color: #3ba4d7;
+  box-shadow: 0 0 0 3px rgba(59, 164, 215, 0.15);
+}
+
+.chat-hub-input-area button.chat-hub-send-btn {
+  padding: 0.5rem 1.25rem;
+  font-size: 0.9rem;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  border-radius: 0.375rem;
+}
+
+button.chat-hub-action-btn,
+label.chat-hub-action-btn,
+.chat-hub-action-btn {
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  width: 36px !important;
+  height: 36px !important;
+  min-width: 36px !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  background: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+  color: #64748b !important;
+  font-size: 1.15rem !important;
+  border-radius: 0.375rem !important;
+  cursor: pointer !important;
+  transition: all 0.15s ease !important;
+  outline: none !important;
+}
+
+button.chat-hub-action-btn:hover,
+label.chat-hub-action-btn:hover,
+.chat-hub-action-btn:hover {
+  background-color: #e2e8f0 !important;
+  color: #3b82f6 !important;
+  box-shadow: none !important;
+}
+
+button.chat-hub-action-btn i,
+label.chat-hub-action-btn i,
+.chat-hub-action-btn i {
+  font-size: 1.15rem !important;
+  color: inherit !important;
+}
+
+/* Compact Room Chat Style (No bubbles, unique nickname colors, IRC-style) */
+.chat-hub-messages.compact-container,
+.messages.compact-container {
+  gap: 0 !important;
+  padding: 0.75rem 1rem !important;
+  background-color: #ffffff !important;
+  display: flex !important;
+  flex-direction: column !important;
+}
+
+.chat-hub-messages.compact-container .message.compact,
+.messages.compact-container .message.compact {
+  display: block !important;
+  max-width: 100% !important;
+  padding: 0.1rem 0 !important;
+  border-radius: 0 !important;
+  background-color: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+  align-self: flex-start !important;
+  font-size: 0.875rem !important;
+  line-height: 1.45 !important;
+  margin: 0 !important;
+  white-space: nowrap !important;
+}
+
+.chat-hub-messages.compact-container .message.compact:hover,
+.messages.compact-container .message.compact:hover {
+  background-color: #f8fafc !important;
+  overflow: visible !important;
+  white-space: normal !important;
+}
+
+.chat-hub-messages.compact-container .message.compact .datetime,
+.messages.compact-container .message.compact .datetime {
+  color: #a0a0a0 !important;
+  margin-right: 0.4rem !important;
+  font-size: 0.78rem !important;
+  font-family: monospace !important;
+  opacity: 1 !important;
+  display: inline !important;
+}
+
+.chat-hub-messages.compact-container .message.compact .username,
+.messages.compact-container .message.compact .username {
+  font-weight: bold !important;
+  margin-right: 0.2rem !important;
+  font-size: 0.875rem !important;
+  display: inline !important;
+}
+
+.chat-hub-messages.compact-container .message.compact .messagetext,
+.messages.compact-container .message.compact .messagetext {
+  color: #1e293b !important;
+  white-space: normal !important;
+  word-break: break-word !important;
+  display: inline !important;
+  margin: 0 !important;
+}
+
+/* User Tooltip Styling (Standalone Fixed Floating Tooltip) */
+.user-tooltip {
+  position: fixed !important;
+  width: 280px !important;
+  background-color: #ffffe1 !important;
+  border: 1px solid #7f7f7f !important;
+  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.25) !important;
+  padding: 0.5rem !important;
+  border-radius: 0.25rem !important;
+  z-index: 10000 !important;
+  white-space: normal !important;
+  display: flex !important;
+  gap: 0.5rem !important;
+  align-items: flex-start !important;
+  color: #000000 !important;
+  font-size: 0.8rem !important;
+  text-align: left !important;
+  pointer-events: none !important;
+}
+
+.user-tooltip .tooltip-avatar {
+  flex-shrink: 0 !important;
+}
+
+.user-tooltip .tooltip-avatar .jdenticon-avatar,
+.user-tooltip .tooltip-avatar .defaultAvatar,
+.user-tooltip .tooltip-avatar img.avatar {
+  width: 56px !important;
+  height: 56px !important;
+  min-width: 56px !important;
+  min-height: 56px !important;
+  border-radius: 2px !important;
+  border: 1px solid #999999 !important;
+  box-shadow: none !important;
+  object-fit: cover !important;
+}
+
+.user-tooltip .tooltip-details {
+  display: flex !important;
+  flex-direction: column !important;
+  gap: 0.2rem !important;
+  min-width: 0 !important;
+  flex: 1 !important;
+}
+
+.user-tooltip .tooltip-details .tooltip-row {
+  line-height: 1.2 !important;
+  display: flex !important;
+  flex-direction: row !important;
+  align-items: baseline !important;
+  gap: 0.35rem !important;
+  white-space: normal !important;
+  word-break: break-all !important;
+}
+
+.user-tooltip .tooltip-details .tooltip-row .tooltip-label {
+  font-weight: bold !important;
+  color: #000000 !important;
+  font-size: 0.8rem !important;
+  flex-shrink: 0 !important;
+}
+
+.user-tooltip .tooltip-details .tooltip-row .tooltip-value {
+  font-weight: normal !important;
+  color: #000000 !important;
+  font-size: 0.8rem !important;
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+}
+
+.user-tooltip .tooltip-details .tooltip-row .tooltip-value.tooltip-id {
+  font-family: monospace !important;
+  font-size: 0.75rem !important;
+  color: #0000bb !important;
+}
diff --git a/webui-src/app/scss/pages/_mail.scss b/webui-src/app/scss/pages/_mail.scss
index 6149e30..aca71ec 100644
--- a/webui-src/app/scss/pages/_mail.scss
+++ b/webui-src/app/scss/pages/_mail.scss
@@ -375,3 +375,353 @@ table.attachment-container {
     }
   }
 }
+
+/* Modern Attachment Card Styling */
+.attachments-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin-top: 0.5rem;
+}
+
+.attachment-card {
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 0.5rem;
+  padding: 0.75rem 1rem;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
+
+  .attachment-icon {
+    width: 40px;
+    height: 40px;
+    border-radius: 0.5rem;
+    background: #eff6ff;
+    color: #3b82f6;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.2rem;
+    flex-shrink: 0;
+  }
+
+  .attachment-info {
+    flex: 1;
+    min-width: 0;
+
+    .attachment-name {
+      font-weight: 600;
+      font-size: 0.9rem;
+      color: #1e293b;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .attachment-size {
+      font-size: 0.75rem;
+      color: #64748b;
+    }
+  }
+
+  .btn-attachment-download {
+    padding: 0.4rem 0.75rem;
+    font-size: 0.8rem;
+    height: 34px;
+  }
+}
+
+.mobile-fab-compose {
+  display: none;
+}
+
+/* Mobile Responsiveness for Mail UI */
+@media (max-width: 768px) {
+  .side-bar {
+    width: 100% !important;
+    flex-direction: row !important;
+    overflow-x: auto !important;
+    overflow-y: hidden !important;
+    white-space: nowrap !important;
+    border-bottom: 1px solid #cbd5e1 !important;
+    padding: 0.5rem !important;
+    flex-shrink: 0 !important;
+    background: #ffffff !important;
+  }
+
+  .side-bar .mail-compose-btn {
+    display: none !important;
+  }
+
+  .side-bar .sidebar {
+    width: auto !important;
+    flex-direction: row !important;
+    gap: 0.25rem !important;
+  }
+
+  .side-bar .sidebar a {
+    padding: 0.5rem 0.75rem !important;
+    font-size: 0.85rem !important;
+    border-radius: 0.375rem !important;
+    border-left: none !important;
+    border-bottom: none !important;
+    display: inline-flex !important;
+    align-items: center !important;
+    gap: 0.35rem !important;
+  }
+
+  .side-bar .sidebar a .sidebar-link-text {
+    display: none !important;
+  }
+
+  .side-bar .sidebar a i {
+    margin-right: 0 !important;
+    font-size: 1.1rem !important;
+  }
+
+  .side-bar .sidebar a .sidebar-badge {
+    background: #3b82f6 !important;
+    color: #ffffff !important;
+    font-size: 0.7rem !important;
+    font-weight: 700 !important;
+    padding: 0.15rem 0.4rem !important;
+    border-radius: 999px !important;
+    line-height: 1 !important;
+  }
+
+  .side-bar .sidebar a.selected-sidebar-link {
+    background-color: #e0f2fe !important;
+    color: #0369a1 !important;
+    border-left: none !important;
+    font-weight: 600 !important;
+  }
+
+  .side-bar .sidebarquickview {
+    display: none !important; /* Hide quickview tags on mobile bar; filter via colored dropdown */
+  }
+
+  select.mail-tag {
+    padding: 0.45rem 0.75rem !important;
+    border-radius: 0.5rem !important;
+    border: 1px solid #cbd5e1 !important;
+    font-size: 0.85rem !important;
+    font-weight: 600 !important;
+    background-color: #ffffff !important;
+    color: #1e293b !important;
+    outline: none !important;
+    cursor: pointer !important;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
+  }
+
+  .node-panel {
+    width: 100% !important;
+    flex: 1 !important;
+    padding: 0.5rem !important;
+    overflow: auto !important;
+  }
+
+  /* Mail List Table -> Mobile Card List View */
+  .table-pagination-container table.mails {
+    display: block !important;
+    width: 100% !important;
+  }
+
+  .table-pagination-container table.mails tr:first-child {
+    display: none !important;
+  }
+
+  .table-pagination-container table.mails tbody {
+    display: flex !important;
+    flex-direction: column !important;
+    gap: 0.5rem !important;
+  }
+
+  .table-pagination-container table.mails tr.msgbody {
+    display: flex !important;
+    flex-direction: column !important;
+    padding: 0.85rem !important;
+    background: #ffffff !important;
+    border: 1px solid #e2e8f0 !important;
+    border-radius: 0.65rem !important;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
+    position: relative !important;
+    margin-bottom: 0.25rem !important;
+    transition: all 0.2s ease !important;
+  }
+
+  .table-pagination-container table.mails tr.msgbody.unread {
+    background: #f0f9ff !important;
+    border-color: #bae6fd !important;
+    border-left: 4px solid #0284c7 !important;
+  }
+
+  .table-pagination-container table.mails tr.msgbody td {
+    display: block !important;
+    padding: 0 !important;
+    border: none !important;
+  }
+
+  /* Top Row: Sender Info & Date */
+  .table-pagination-container table.mails tr.msgbody td.cell-from {
+    order: 1 !important;
+    margin-bottom: 0.35rem !important;
+    padding-right: 5rem !important;
+  }
+
+  .table-pagination-container table.mails tr.msgbody td.cell-from div {
+    display: flex !important;
+    align-items: center !important;
+    gap: 0.5rem !important;
+    width: 100% !important;
+  }
+
+  .table-pagination-container table.mails tr.msgbody td.cell-from div .jdenticon-avatar,
+  .table-pagination-container table.mails tr.msgbody td.cell-from div .defaultAvatar,
+  .table-pagination-container table.mails tr.msgbody td.cell-from div img.avatar {
+    flex-shrink: 0 !important;
+    width: 28px !important;
+    height: 28px !important;
+    min-width: 28px !important;
+    min-height: 28px !important;
+    aspect-ratio: 1 / 1 !important;
+    object-fit: cover !important;
+    border-radius: 50% !important;
+  }
+
+  .table-pagination-container table.mails tr.msgbody td.cell-from div span {
+    font-weight: 700 !important;
+    font-size: 0.95rem !important;
+    color: #1e293b !important;
+    white-space: nowrap !important;
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+  }
+
+  .table-pagination-container table.mails tr.msgbody td.cell-date {
+    order: 2 !important;
+    position: absolute !important;
+    top: 0.85rem !important;
+    right: 0.85rem !important;
+    font-size: 0.75rem !important;
+    font-weight: 600 !important;
+    color: #64748b !important;
+    white-space: nowrap !important;
+  }
+
+  /* Subject Row */
+  .table-pagination-container table.mails tr.msgbody td.cell-subject {
+    order: 3 !important;
+    margin-bottom: 0.25rem !important;
+    font-size: 0.9rem !important;
+    color: #334155 !important;
+  }
+
+  .table-pagination-container table.mails tr.msgbody td.cell-subject span {
+    font-weight: 600 !important;
+  }
+
+  /* Star & Attachments */
+  .table-pagination-container table.mails tr.msgbody td.cell-star {
+    order: 4 !important;
+    position: absolute !important;
+    bottom: 0.75rem !important;
+    right: 0.85rem !important;
+  }
+
+  .table-pagination-container table.mails tr.msgbody td.cell-attachment {
+    order: 5 !important;
+    position: absolute !important;
+    bottom: 0.75rem !important;
+    right: 2.5rem !important;
+    color: #64748b !important;
+  }
+
+  /* Mail Reader (MessageView) Mobile Layout */
+  .msg-view {
+    padding: 0.5rem !important;
+    gap: 0.75rem !important;
+  }
+
+  .msg-view .msg-view-nav {
+    background: #ffffff !important;
+    padding: 0.5rem 0.75rem !important;
+    border-radius: 0.5rem !important;
+    border: 1px solid #e2e8f0 !important;
+  }
+
+  .msg-view .msg-view-nav__action button {
+    padding: 0.45rem 0.65rem !important;
+    min-width: 38px !important;
+    height: 38px !important;
+    justify-content: center !important;
+  }
+
+  .msg-view .msg-view-nav__action button .btn-text {
+    display: none !important;
+  }
+
+  .msg-view .msg-view-nav__action button i {
+    margin: 0 !important;
+    font-size: 1rem !important;
+  }
+
+  .msg-view__header {
+    background: #ffffff !important;
+    padding: 1rem !important;
+    border-radius: 0.5rem !important;
+    border: 1px solid #e2e8f0 !important;
+  }
+
+  .msg-view__header h3 {
+    font-size: 1.25rem !important;
+    font-weight: 800 !important;
+    color: #0f172a !important;
+    line-height: 1.3 !important;
+  }
+
+  .msg-view__body {
+    background: #ffffff !important;
+    padding: 1rem !important;
+    border-radius: 0.5rem !important;
+    border: 1px solid #e2e8f0 !important;
+    font-size: 0.95rem !important;
+    line-height: 1.6 !important;
+    color: #1e293b !important;
+  }
+
+  .msg-view__attachment {
+    height: auto !important;
+  }
+
+  /* Floating Action Button (Compose Mail) */
+  .mobile-fab-compose {
+    position: fixed !important;
+    bottom: 1.75rem !important;
+    right: 1.5rem !important;
+    width: 54px !important;
+    height: 54px !important;
+    border-radius: 50% !important;
+    background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
+    color: #ffffff !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    font-size: 1.35rem !important;
+    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.45) !important;
+    border: none !important;
+    z-index: 1000 !important;
+    cursor: pointer !important;
+    transition: transform 0.2s ease !important;
+  }
+
+  .mobile-fab-compose:active {
+    transform: scale(0.92) !important;
+  }
+
+  .composePopupOverlay .composePopup {
+    width: 95% !important;
+    height: 95% !important;
+  }
+}
diff --git a/webui-src/make-src/build.ps1 b/webui-src/make-src/build.ps1
index b0916f4..6141d84 100644
--- a/webui-src/make-src/build.ps1
+++ b/webui-src/make-src/build.ps1
@@ -42,6 +42,9 @@ if (Test-Path "$src\app\scss\pages\_network.scss") {
 if (Test-Path "$src\app\scss\components\_statusbar.scss") {
     $extraCss += (Get-Content "$src\app\scss\components\_statusbar.scss" -Raw -Encoding UTF8) + "`n`n"
 }
+if (Test-Path "$src\app\scss\pages\_mail.scss") {
+    $extraCss += (Get-Content "$src\app\scss\pages\_mail.scss" -Raw -Encoding UTF8) + "`n`n"
+}
 
 $combinedCss = $cssBase + "`n`n" + $extraCss
 [System.IO.File]::WriteAllText("$dest\styles.css", $combinedCss, $utf8NoBom)
diff --git a/webui-src/make-src/build.sh b/webui-src/make-src/build.sh
index 9a7bef1..7c47240 100755
--- a/webui-src/make-src/build.sh
+++ b/webui-src/make-src/build.sh
@@ -33,8 +33,15 @@ if [ "$2" = "" ]||[ "$2" = "index.html" ]; then
 fi
 
 if [ "$2" = "" ]||[ "$2" = "styles.css" ]; then
-	echo copying css file
-	cp $src/styles.css $publicdest/
+	echo copying and assembling css file
+	cat $src/styles.css > $publicdest/styles.css
+	echo "" >> $publicdest/styles.css
+	for scssfile in $src/app/scss/pages/_*.scss $src/app/scss/components/_*.scss; do
+		if [ -f "$scssfile" ]; then
+			cat "$scssfile" >> $publicdest/styles.css
+			echo -e "\n\n" >> $publicdest/styles.css
+		fi
+	done
 fi
 
 if [ "$2" = "" ]||[ "$2" = "app.js" ]; then