From 9e0b24e29ac683c5b2a6a168b4eab27430d5bb4c Mon Sep 17 00:00:00 2001
From: dev <dev@noreply.git.backend-3.com>
Date: Sat, 31 Oct 2026 08:46:57 +0000
Subject: [PATCH] Update static/style.css

---
 static/style.css | 715 +++++++++++++++++++++++++++++++++++++++++------
 1 file changed, 626 insertions(+), 89 deletions(-)

diff --git a/static/style.css b/static/style.css
index abacb26..48ef4ca 100644
--- a/static/style.css
+++ b/static/style.css
@@ -36,6 +36,13 @@
   --radius: 7px;
   --radius-lg: 12px;
 
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+
   --safe-top: env(safe-area-inset-top, 0px);
   --safe-right: env(safe-area-inset-right, 0px);
   --safe-bottom: env(safe-area-inset-bottom, 0px);
@@ -168,7 +175,7 @@ select:disabled,
   display: flex;
   align-items: center;
   justify-content: space-between;
-  width: min(100%, 980px);
+  width: min(100%, 1080px);
   height: 60px;
   margin: 0 auto;
   gap: 12px;
@@ -232,10 +239,29 @@ select:disabled,
   display: flex;
   align-items: center;
   min-width: 0;
-  gap: 4px;
+  gap: 8px;
   flex-wrap: nowrap;
 }
 
+.header-nav-group,
+.header-context-group,
+.header-utility-group {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  gap: 4px;
+  padding: 0 4px;
+  border-radius: 999px;
+}
+
+.header-context-group {
+  background: color-mix(in srgb, var(--surface-raised) 70%, transparent);
+}
+
+.header-utility-group {
+  gap: 6px;
+}
+
 .header-account-wrap {
   display: flex;
   align-items: center;
@@ -574,6 +600,16 @@ select:disabled,
   flex: 0 0 auto;
   color: var(--muted);
   white-space: nowrap;
+  transition: opacity 0.16s ease;
+}
+
+.message-row.is-dm-view .message-time {
+  opacity: 0;
+}
+
+.message-row.is-dm-view:hover .message-time,
+.message-row.is-dm-view:focus-within .message-time {
+  opacity: 1;
 }
 
 .message-content-row {
@@ -656,6 +692,16 @@ body.theme-light .message-row.self .message-bubble {
   color: var(--text);
 }
 
+.message-text {
+  line-height: 1.45;
+}
+
+.message-media-section {
+  margin-top: 10px;
+  padding-top: 10px;
+  border-top: 1px solid var(--line);
+}
+
 .message-action,
 .admin-delete,
 .reaction-trigger {
@@ -688,6 +734,16 @@ body.theme-light .reaction-trigger {
   color: var(--muted);
 }
 
+.message-action.primary,
+.reaction-trigger.primary {
+  color: var(--text-soft);
+}
+
+.message-action.secondary,
+.admin-delete.secondary {
+  color: var(--muted);
+}
+
 .message-action:hover,
 .message-action:focus-visible,
 .admin-delete:hover,
@@ -797,13 +853,13 @@ body.theme-light .reaction-trigger:focus-visible {
   display: inline-flex;
   align-items: center;
   gap: 5px;
-  min-height: 28px;
-  padding: 0 10px;
+  min-height: 26px;
+  padding: 0 9px;
   border: 1px solid var(--line);
   border-radius: 999px;
   background: var(--surface-raised);
   color: var(--text-soft);
-  font-size: 12px;
+  font-size: 11px;
   font-weight: 650;
 }
 
@@ -822,25 +878,29 @@ body.theme-light .reaction-trigger:focus-visible {
 
 .feed-entry {
   max-width: 100%;
-  margin: 10px 0;
-  padding: 14px;
-  border: 1px solid var(--line);
-  border-radius: var(--radius);
-  background: var(--surface);
-  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.14);
+  margin: 8px 0;
+  padding: 12px 14px;
+  border: 1px solid transparent;
+  border-bottom-color: var(--line);
+  border-radius: 12px;
+  background: transparent;
   animation: message-in 160ms ease-out both;
 }
 
-.feed-entry.mention {
-  border-color: var(--accent);
-  background: var(--accent-soft);
+.feed-entry:hover,
+.feed-entry:focus-within {
+  background: color-mix(in srgb, var(--surface) 74%, transparent);
 }
 
-.feed-entry-heading {
+.feed-entry.mention {
+  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
+  background: color-mix(in srgb, var(--accent-soft) 80%, transparent);
+}
+
+.feed-entry-top {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  min-width: 0;
   gap: 12px;
 }
 
@@ -851,9 +911,9 @@ body.theme-light .reaction-trigger:focus-visible {
   border: 0;
   outline: none;
   background: transparent;
-  color: var(--accent-active);
+  color: var(--text-soft);
   font-family: inherit;
-  font-size: 13px;
+  font-size: 12px;
   font-weight: 700;
   letter-spacing: -0.01em;
   text-align: left;
@@ -876,40 +936,132 @@ body.theme-light .reaction-trigger:focus-visible {
 }
 
 .feed-entry-author {
+  display: inline-flex;
   margin-top: 6px;
   font-size: 12px;
   font-weight: 700;
 }
 
 .feed-entry-body {
-  margin-top: 7px;
+  margin-top: 6px;
   overflow-wrap: break-word;
   color: var(--text);
   line-height: 1.45;
   white-space: pre-wrap;
 }
 
+.clamp-2 {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.feed-entry-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  margin-top: 10px;
+}
+
+.feed-entry-meta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  flex-wrap: wrap;
+}
+
+.feed-attachment-summary {
+  color: var(--muted);
+}
+
 .feed-open-room {
-  min-height: 30px;
-  margin-top: 12px;
+  min-height: 28px;
+  margin-left: auto;
 }
 
 .feed-entry-reactions {
   display: flex;
   flex-wrap: wrap;
-  margin-top: 10px;
   gap: 6px;
 }
 
+.feed-entry-reactions.compact .reaction-chip {
+  min-height: 24px;
+  font-size: 10px;
+}
+
 /* DM list */
 
+.dm-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  margin-bottom: 14px;
+  gap: 8px;
+}
+
+.dm-toolbar-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
 .dm-list {
   display: grid;
   gap: 10px;
 }
 
+.dm-list.compact {
+  gap: 6px;
+}
+
 .dm-card {
   min-height: 0;
+  padding: 14px;
+}
+
+.dm-card.compact {
+  display: grid;
+  min-height: 0;
+  padding: 10px 12px;
+  gap: 4px;
+}
+
+.dm-card.unread {
+  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
+  box-shadow: inset 0 0 0 1px var(--accent-soft);
+}
+
+.dm-card-sender {
+  margin-top: 3px;
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.dm-card-preview {
+  margin-top: 8px !important;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.dm-list.compact .dm-card-preview {
+  margin-top: 2px !important;
+  -webkit-line-clamp: 1;
+}
+
+.dm-card-footer time {
+  opacity: 0;
+  transition: opacity 0.16s ease;
+}
+
+.dm-card:hover .dm-card-footer time,
+.dm-card:focus-within .dm-card-footer time {
+  opacity: 1;
 }
 
 /* Threads */
@@ -918,20 +1070,21 @@ body.theme-light .reaction-trigger:focus-visible {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 14px;
-  padding-bottom: 12px;
+  margin-bottom: 12px;
+  padding-bottom: 10px;
   border-bottom: 1px solid var(--line);
 }
 
 .thread-label {
   color: var(--text);
-  font-size: 15px;
+  font-size: 14px;
   font-weight: 750;
 }
 
 .thread-count {
   color: var(--muted);
   font-size: 12px;
+  font-weight: 700;
 }
 
 .thread-root {
@@ -939,7 +1092,7 @@ body.theme-light .reaction-trigger:focus-visible {
 }
 
 .thread-replies-label {
-  margin: 16px 0 10px;
+  margin: 14px 0 10px;
   color: var(--muted);
   font-size: 12px;
   font-weight: 700;
@@ -1005,8 +1158,13 @@ body.theme-light .reaction-trigger:focus-visible {
   gap: 7px;
 }
 
+.page-filters.compact {
+  margin-bottom: 14px;
+  gap: 6px;
+}
+
 .page-filter {
-  min-height: 31px;
+  min-height: 30px;
   padding: 0 10px;
   border: 1px solid var(--line);
   border-radius: 999px;
@@ -1032,7 +1190,7 @@ body.theme-light .reaction-trigger:focus-visible {
 
 .pages-list {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
   gap: 10px;
 }
 
@@ -1052,6 +1210,11 @@ body.theme-light .reaction-trigger:focus-visible {
     transform 120ms ease;
 }
 
+.page-card.compact {
+  min-height: 116px;
+  justify-content: space-between;
+}
+
 .page-card:hover,
 .page-card:focus-visible {
   border-color: var(--accent);
@@ -1109,23 +1272,12 @@ body.theme-light .reaction-trigger:focus-visible {
   letter-spacing: -0.02em;
 }
 
-.page-card-excerpt {
-  display: -webkit-box;
-  margin: 0;
-  overflow: hidden;
-  color: var(--muted);
-  font-size: 13px;
-  line-height: 1.45;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 3;
-}
-
 .page-card-footer {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-top: auto;
-  padding-top: 14px;
+  padding-top: 10px;
   gap: 8px;
   color: var(--muted-dark);
   font-size: 11px;
@@ -1171,6 +1323,7 @@ body.theme-light .reaction-trigger:focus-visible {
 
 .profile-box {
   display: block;
+  border-radius: 18px;
 }
 
 .profile-card {
@@ -1182,11 +1335,43 @@ body.theme-light .reaction-trigger:focus-visible {
 }
 
 .profile-banner {
+  position: relative;
   height: 140px;
   background:
     linear-gradient(135deg, var(--accent-soft), transparent 70%),
     linear-gradient(45deg, color-mix(in srgb, var(--accent) 40%, transparent), transparent 60%),
     var(--surface-active);
+  background-size: cover;
+  background-position: center;
+}
+
+.profile-banner-button {
+  width: 100%;
+  border: 0;
+  outline: none;
+  cursor: pointer;
+}
+
+.profile-banner-button:hover .profile-banner-hint,
+.profile-banner-button:focus-visible .profile-banner-hint {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.profile-banner-hint {
+  position: absolute;
+  right: 12px;
+  bottom: 12px;
+  padding: 6px 10px;
+  border: 1px solid var(--line-strong);
+  border-radius: 999px;
+  background: rgba(0, 0, 0, 0.42);
+  color: #fff;
+  font-size: 11px;
+  font-weight: 700;
+  opacity: 0.76;
+  transform: translateY(2px);
+  transition: opacity 0.16s ease, transform 0.16s ease;
 }
 
 .profile-content {
@@ -1216,6 +1401,19 @@ body.theme-light .reaction-trigger:focus-visible {
   box-shadow: var(--shadow-soft);
 }
 
+.profile-avatar-button {
+  border: 0;
+  outline: none;
+  cursor: pointer;
+  transition: transform 0.16s ease, box-shadow 0.16s ease;
+}
+
+.profile-avatar-button:hover,
+.profile-avatar-button:focus-visible {
+  transform: translateY(-1px);
+  box-shadow: 0 0 0 4px var(--accent-soft), var(--shadow-soft);
+}
+
 .profile-actions {
   display: flex;
   flex-wrap: wrap;
@@ -1223,7 +1421,7 @@ body.theme-light .reaction-trigger:focus-visible {
 }
 
 .profile-name {
-  margin: 14px 0 4px;
+  margin: 14px 0 2px;
   color: var(--text);
   font-size: 28px;
   font-weight: 800;
@@ -1255,6 +1453,35 @@ body.theme-light .reaction-trigger:focus-visible {
   font-weight: 700;
 }
 
+.profile-badge.role-admin {
+  border-color: rgba(255, 107, 107, 0.45);
+  background: rgba(255, 107, 107, 0.12);
+  color: #ffb1b1;
+}
+
+.profile-badge.role-moderator {
+  border-color: rgba(125, 211, 252, 0.42);
+  background: rgba(125, 211, 252, 0.12);
+  color: #b6e8ff;
+}
+
+.profile-badge.role-user {
+  color: var(--muted);
+  background: transparent;
+}
+
+.profile-badge.presence-online {
+  border-color: rgba(48, 209, 88, 0.34);
+  color: #8defa3;
+}
+
+.profile-badge.presence-offline,
+.profile-badge.presence-silent,
+.profile-badge.presence-focus,
+.profile-badge.presence-dnd {
+  color: var(--muted);
+}
+
 .profile-grid {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
@@ -1290,7 +1517,7 @@ body.theme-light .reaction-trigger:focus-visible {
 
 .profile-meta-list {
   display: grid;
-  grid-template-columns: 120px minmax(0, 1fr);
+  grid-template-columns: 92px minmax(0, 1fr);
   gap: 8px 10px;
   color: var(--text-soft);
   font-size: 13px;
@@ -1340,6 +1567,53 @@ body.theme-light .reaction-trigger:focus-visible {
   color: var(--accent-active);
 }
 
+.profile-upload-section {
+  display: grid;
+  gap: 8px;
+  padding: 12px;
+  border: 1px dashed var(--line-strong);
+  border-radius: 12px;
+}
+
+.profile-upload-title {
+  color: var(--text-soft);
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.profile-website-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 32px;
+  padding: 0 11px;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  color: var(--accent-active);
+  text-decoration: none;
+  background: var(--surface);
+}
+
+.profile-website-badge:hover,
+.profile-website-badge:focus-visible {
+  border-color: var(--accent);
+  background: var(--accent-soft);
+}
+
+.profile-website-badge-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 20px;
+  min-height: 20px;
+  border-radius: 999px;
+  background: var(--surface-raised);
+  color: var(--text-soft);
+  font-size: 10px;
+  font-weight: 800;
+  text-transform: lowercase;
+}
+
 /* Composer */
 
 .composer-wrap {
@@ -1357,12 +1631,47 @@ body.theme-light .reaction-trigger:focus-visible {
 
 .composer {
   display: flex;
-  align-items: flex-start;
+  align-items: stretch;
   width: min(100%, 980px);
   gap: 9px;
   margin: 0 auto;
 }
 
+.composer-stack {
+  display: grid;
+  gap: 6px;
+  width: 100%;
+}
+
+.composer-shell {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: end;
+  gap: 8px;
+  width: 100%;
+  padding: 8px;
+  border: 1px solid rgba(255, 255, 255, 0.16);
+  border-radius: 14px;
+  background: var(--surface-raised);
+  box-shadow: var(--shadow-soft);
+}
+
+body.theme-light .composer-shell {
+  border-color: rgba(0, 0, 0, 0.10);
+}
+
+.composer-shell:focus-within {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px var(--accent-soft);
+}
+
+.composer-shell-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  align-self: end;
+}
+
 .composer-field-wrap {
   flex: 1 1 auto;
   min-width: 0;
@@ -1385,12 +1694,15 @@ body.theme-light .field {
 
 .composer-input {
   display: block;
-  min-height: 44px;
+  min-height: 28px;
   max-height: 150px;
-  padding: 11px 13px;
+  padding: 7px 6px 7px 8px;
   resize: none;
   overflow: hidden;
   line-height: 1.35;
+  border: 0;
+  background: transparent;
+  box-shadow: none;
 }
 
 .composer-input:hover,
@@ -1409,6 +1721,11 @@ body.theme-light .field:hover {
   box-shadow: 0 0 0 3px var(--accent-soft);
 }
 
+.composer-shell .composer-input:focus {
+  box-shadow: none;
+  border-color: transparent;
+}
+
 .composer-input::placeholder,
 .field::placeholder {
   color: var(--muted);
@@ -1418,7 +1735,7 @@ body.theme-light .field:hover {
   display: flex;
   justify-content: space-between;
   min-height: 18px;
-  padding: 3px 3px 0;
+  padding: 0 3px;
   gap: 8px;
   color: var(--muted);
   font-size: 11px;
@@ -1463,15 +1780,15 @@ body.theme-light .small-button {
 
 .attachment-button,
 .send-button {
-  height: 44px;
-  min-height: 44px;
+  height: 40px;
+  min-height: 40px;
   align-self: flex-start;
 }
 
 .attachment-button {
-  width: 44px;
-  min-width: 44px;
-  flex: 0 0 44px;
+  width: 40px;
+  min-width: 40px;
+  flex: 0 0 40px;
   padding: 0 0 1px;
   font-size: 21px;
   line-height: 1;
@@ -1754,6 +2071,51 @@ body.theme-light .small-button {
   font-weight: 800;
 }
 
+.settings-save-panel {
+  position: fixed;
+  right: max(16px, calc(var(--safe-right) + 16px));
+  bottom: calc(18px + var(--safe-bottom));
+  z-index: 65;
+  width: min(420px, calc(100vw - 24px));
+}
+
+.settings-save-panel-inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 12px 14px;
+  border: 1px solid var(--line-strong);
+  border-radius: 16px;
+  background: color-mix(in srgb, var(--surface) 88%, transparent);
+  box-shadow: var(--shadow);
+  backdrop-filter: blur(18px) saturate(150%);
+  -webkit-backdrop-filter: blur(18px) saturate(150%);
+}
+
+.settings-save-copy {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+
+.settings-save-copy strong {
+  color: var(--text);
+  font-size: 13px;
+}
+
+.settings-save-copy small {
+  color: var(--muted);
+  font-size: 11px;
+}
+
+.settings-save-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 0 0 auto;
+}
+
 /* Team/room management cards */
 
 .manager-list {
@@ -1862,7 +2224,43 @@ body.theme-light .small-button {
 
 .admin-actions {
   flex-wrap: wrap;
-  margin: 15px 0;
+  margin: 15px 0 10px;
+}
+
+.admin-tabs {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+.admin-tab {
+  min-height: 34px;
+  padding: 0 12px;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  background: transparent;
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.admin-tab.active,
+.admin-tab[aria-selected="true"] {
+  border-color: var(--accent);
+  background: var(--accent-soft);
+  color: var(--accent-active);
+}
+
+.admin-tab-panels {
+  min-height: 0;
+  flex: 1 1 auto;
+  overflow: hidden;
+}
+
+.admin-tab-panel {
+  min-height: 0;
+  height: 100%;
+  overflow: auto;
 }
 
 .admin-users,
@@ -1877,7 +2275,8 @@ body.theme-light .small-button {
 }
 
 .admin-user,
-.admin-room {
+.admin-room,
+.admin-team-row {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
   gap: 12px;
@@ -1886,7 +2285,8 @@ body.theme-light .small-button {
 }
 
 .admin-user-name,
-.admin-room-name {
+.admin-room-name,
+.admin-team-name {
   overflow: hidden;
   color: var(--text-soft);
   font-weight: 700;
@@ -1896,6 +2296,7 @@ body.theme-light .small-button {
 
 .admin-user-info,
 .admin-room-info,
+.admin-team-info,
 .admin-empty {
   margin-top: 3px;
   color: var(--muted);
@@ -1903,7 +2304,8 @@ body.theme-light .small-button {
 }
 
 .admin-user-actions,
-.admin-room-actions {
+.admin-room-actions,
+.admin-team-actions {
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-end;
@@ -2050,28 +2452,36 @@ body.theme-light .small-button {
 
 .reaction-popup-card {
   width: min(440px, 100%);
+  padding: 18px;
+}
+
+.reaction-popup-header {
+  margin-bottom: 8px;
 }
 
 .reaction-popup-title {
-  margin: 0 0 10px;
-  font-size: 18px;
-  font-weight: 800;
+  margin: 0;
+  font-size: 15px;
+  font-weight: 750;
   color: var(--text);
 }
 
 .reaction-popup-grid {
   display: grid;
   grid-template-columns: repeat(6, minmax(0, 1fr));
-  gap: 8px;
+  gap: 6px;
+  max-height: 190px;
+  overflow: auto;
+  padding-right: 2px;
 }
 
 .reaction-popup-button {
-  min-height: 48px;
+  min-height: 42px;
   border: 1px solid var(--line);
-  border-radius: 12px;
+  border-radius: 10px;
   background: var(--surface-raised);
   color: var(--text);
-  font-size: 24px;
+  font-size: 20px;
 }
 
 .reaction-popup-button:hover,
@@ -2103,23 +2513,23 @@ body.theme-light .small-button {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  min-height: 34px;
+  min-height: 30px;
   padding: 0 2px;
   color: var(--text-soft);
-  font-size: 13px;
+  font-size: 12px;
 }
 
 /* Media modal */
 
 .media-overlay {
   z-index: 80;
-  padding: 18px;
+  padding: 12px;
 }
 
 .media-card {
-  width: min(1100px, 100%);
-  max-height: calc(100dvh - 36px);
-  padding: 14px;
+  width: min(1200px, 100%);
+  max-height: calc(100dvh - 24px);
+  padding: 10px;
 }
 
 .media-header {
@@ -2127,13 +2537,17 @@ body.theme-light .small-button {
   align-items: center;
   justify-content: space-between;
   gap: 10px;
-  margin-bottom: 10px;
+  margin-bottom: 8px;
+}
+
+.media-header.minimal {
+  margin-bottom: 6px;
 }
 
 .media-title {
   min-width: 0;
   color: var(--text-soft);
-  font-size: 13px;
+  font-size: 12px;
   font-weight: 700;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -2147,18 +2561,22 @@ body.theme-light .small-button {
   min-height: 180px;
 }
 
+.media-body.spacious {
+  min-height: calc(100dvh - 110px);
+}
+
 .media-body img,
 .media-body video {
   display: block;
   max-width: 100%;
-  max-height: calc(100dvh - 130px);
-  border-radius: 12px;
+  max-height: calc(100dvh - 110px);
+  border-radius: 10px;
   object-fit: contain;
-  background: var(--surface-raised);
+  background: transparent;
 }
 
 .media-body audio {
-  width: min(100%, 640px);
+  width: min(100%, 720px);
 }
 
 .media-file-fallback {
@@ -2168,6 +2586,41 @@ body.theme-light .small-button {
   text-align: center;
 }
 
+/* Crop modal */
+
+.crop-dialog-card {
+  width: min(100%, 640px);
+}
+
+.crop-dialog-body {
+  display: grid;
+  gap: 12px;
+}
+
+.crop-preview-area {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 260px;
+  border: 1px dashed var(--line-strong);
+  border-radius: 14px;
+  background: var(--surface-raised);
+  overflow: hidden;
+}
+
+.crop-preview-image {
+  display: block;
+  max-width: 100%;
+  max-height: 320px;
+  object-fit: contain;
+}
+
+.crop-toggle {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
 /* Call overlay */
 
 .call-overlay {
@@ -2178,6 +2631,20 @@ body.theme-light .small-button {
   width: min(100%, 460px);
 }
 
+.call-card.utility-panel {
+  width: min(100%, 420px);
+  padding-top: 14px;
+}
+
+.call-drag-handle {
+  width: 48px;
+  height: 5px;
+  margin: 0 auto 10px;
+  border-radius: 999px;
+  background: var(--line-strong);
+  cursor: grab;
+}
+
 .call-title-row {
   display: flex;
   align-items: flex-start;
@@ -2198,12 +2665,36 @@ body.theme-light .small-button {
 }
 
 .call-peer-label {
-  margin-top: 16px;
+  margin-top: 14px;
   color: var(--text-soft);
   font-size: 14px;
   font-weight: 700;
 }
 
+.call-summary-stats {
+  display: grid;
+  gap: 6px;
+  margin-top: 12px;
+  padding: 10px 12px;
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  background: var(--surface-raised);
+}
+
+.call-stat-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.call-stat-value {
+  color: var(--text-soft);
+  font-weight: 700;
+}
+
 .call-actions {
   display: flex;
   flex-wrap: wrap;
@@ -2286,6 +2777,14 @@ body.theme-light .small-button {
   .message-bubble {
     max-width: 72%;
   }
+
+  .message-row.is-dm-view .message-time {
+    opacity: 1;
+  }
+
+  .dm-card-footer time {
+    opacity: 1;
+  }
 }
 
 @media (max-width: 700px) {
@@ -2309,7 +2808,14 @@ body.theme-light .small-button {
   }
 
   .header-navigation {
-    gap: 2px;
+    gap: 4px;
+  }
+
+  .header-nav-group,
+  .header-context-group,
+  .header-utility-group {
+    padding: 0;
+    background: transparent;
   }
 
   .feed-button {
@@ -2362,8 +2868,9 @@ body.theme-light .small-button {
   }
 
   .feed-entry {
-    margin: 8px 0;
-    padding: 12px;
+    margin: 6px 0;
+    padding: 10px 0 12px;
+    border-radius: 0;
   }
 
   .composer-wrap {
@@ -2374,6 +2881,14 @@ body.theme-light .small-button {
       max(10px, calc(var(--safe-left) + 10px));
   }
 
+  .composer-shell {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .composer-shell-actions {
+    justify-content: flex-end;
+  }
+
   .typing-bar {
     left: max(12px, calc(var(--safe-left) + 12px));
     bottom: calc(75px + var(--safe-bottom));
@@ -2391,12 +2906,14 @@ body.theme-light .small-button {
 
   .admin-user,
   .admin-room,
+  .admin-team-row,
   .manager-card {
     grid-template-columns: 1fr;
   }
 
   .admin-user-actions,
   .admin-room-actions,
+  .admin-team-actions,
   .manager-card-actions {
     justify-content: flex-start;
   }
@@ -2442,6 +2959,25 @@ body.theme-light .small-button {
   .call-actions > * {
     width: 100%;
   }
+
+  .settings-save-panel {
+    left: 12px;
+    right: 12px;
+    width: auto;
+  }
+
+  .settings-save-panel-inner {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .settings-save-actions {
+    justify-content: stretch;
+  }
+
+  .settings-save-actions > * {
+    flex: 1 1 auto;
+  }
 }
 
 @media (max-width: 390px) {
@@ -2580,10 +3116,12 @@ body.theme-light .small-button {
 .composer-wrap.dragover {
   box-shadow: inset 0 0 0 2px var(--accent);
 }
+
 .message-row.pinned .message-bubble {
   border-color: var(--accent);
   box-shadow: 0 0 0 1px var(--accent-soft);
 }
+
 .message-pin-badge {
   display: inline-flex;
   align-items: center;
@@ -2595,22 +3133,25 @@ body.theme-light .small-button {
   font-size: 10px;
   font-weight: 700;
 }
+
 .bookmark-row {
   width: 100%;
   border: 0;
   background: transparent;
   text-align: left;
 }
+
 .emoji-autocomplete {
   display: grid;
   gap: 4px;
-  margin-top: 8px;
+  margin-top: 2px;
   padding: 8px;
   border: 1px solid var(--line);
-  border-radius: 10px;
-  background: var(--surface-raised);
+  border-radius: 12px;
+  background: var(--surface);
   box-shadow: var(--shadow-soft);
 }
+
 .emoji-suggestion {
   width: 100%;
   min-height: 34px;
@@ -2620,8 +3161,10 @@ body.theme-light .small-button {
   color: var(--text-soft);
   text-align: left;
 }
+
 .emoji-suggestion:hover,
-.emoji-suggestion:focus-visible {
+.emoji-suggestion:focus-visible,
+.emoji-suggestion.active {
   background: var(--surface-hover);
   color: var(--text);
 }
@@ -2632,13 +3175,7 @@ body.theme-light .small-button {
   font-size: 14px;
   line-height: 1.45;
 }
-.profile-box {
-  border-radius: 18px;
-}
-.profile-banner {
-  background-size: cover;
-  background-position: center;
-}
+
 .profile-links {
   display: grid;
   gap: 10px;