Доработать UI уведомлений

shine-UI/styles/components.css

@@ -7453,6 +7453,19 @@ html, body { overflow-x: hidden; }
   border-color: rgba(230, 236, 245, 0.28);
 }
 
+.profile-head-menu-wrap {
+  margin-left: auto;
+}
+
+.profile-head-menu-item img {
+  width: 24px;
+  height: 24px;
+  flex: 0 0 auto;
+  display: block;
+  opacity: 0.94;
+  filter: drop-shadow(0 0 5px rgba(240, 184, 46, 0.18));
+}
+
 .profile-info-modal {
   padding: 16px;
   background: rgba(2, 5, 11, 0.7);
@@ -8042,3 +8055,161 @@ html, body { overflow-x: hidden; }
   pointer-events: auto;
   isolation: isolate;
 }
+
+/* ===== Notifications: social event cards ===== */
+.notifications-screen .notification-card {
+  gap: 10px;
+}
+
+.notification-identity {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
+
+.notification-avatar {
+  flex: 0 0 auto;
+}
+
+.notification-identity-text {
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+.notification-identity-primary {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  min-width: 0;
+  flex-wrap: wrap;
+}
+
+.notification-person-name {
+  color: rgba(255, 255, 255, 0.96);
+  font-weight: 700;
+  overflow-wrap: anywhere;
+}
+
+.notification-login,
+.notification-time-separator,
+.notification-time {
+  color: rgba(255, 255, 255, 0.5);
+  font-size: 12px;
+}
+
+.notification-action,
+.notification-content {
+  margin: 0;
+}
+
+.notification-action {
+  color: rgba(255, 255, 255, 0.66);
+  font-size: 13px;
+}
+
+.notification-content {
+  color: rgba(255, 255, 255, 0.94);
+  font-size: 15px;
+  line-height: 1.45;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.notification-engagement {
+  display: flex;
+  align-items: center;
+  gap: 18px;
+  flex-wrap: wrap;
+  padding-top: 2px;
+  color: rgba(255, 255, 255, 0.58);
+}
+
+.notification-engagement-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  min-width: 24px;
+  font-size: 12px;
+  line-height: 1;
+}
+
+.notification-engagement-icon {
+  font-size: 15px;
+}
+
+
+.notifications-screen .notification-card--clickable {
+  cursor: pointer;
+  transition: transform 120ms ease, border-color 120ms ease, background-color 120ms ease;
+}
+
+.notifications-screen .notification-card--clickable:hover,
+.notifications-screen .notification-card--clickable:focus-visible {
+  border-color: rgba(255, 255, 255, 0.2);
+  background: rgba(255, 255, 255, 0.055);
+  outline: none;
+}
+
+.notifications-screen .notification-card--clickable:active {
+  transform: scale(0.99);
+}
+
+/* ===== Shared scroll-to-bottom control ===== */
+.scroll-to-bottom-btn {
+  position: absolute;
+  right: 16px;
+  bottom: calc(var(--toolbar-height, 78px) + var(--composer-height, 0px) + 14px + env(safe-area-inset-bottom));
+  z-index: 28;
+  width: 44px;
+  height: 44px;
+  padding: 0;
+  display: grid;
+  place-items: center;
+  border-radius: 50%;
+  border: 1px solid rgba(212, 175, 55, 0.38);
+  background: rgba(15, 20, 31, 0.82);
+  color: rgba(255, 226, 143, 0.96);
+  box-shadow:
+    0 8px 26px rgba(0, 0, 0, 0.34),
+    0 0 18px rgba(212, 175, 55, 0.14),
+    inset 0 1px 0 rgba(255, 255, 255, 0.08);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(10px) scale(0.92);
+  transition: opacity 160ms ease, transform 160ms ease, border-color 160ms ease, background 160ms ease;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.scroll-to-bottom-btn.is-visible {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateY(0) scale(1);
+}
+
+.scroll-to-bottom-btn:hover,
+.scroll-to-bottom-btn:focus-visible {
+  border-color: rgba(255, 208, 82, 0.64);
+  background: rgba(24, 29, 43, 0.92);
+  outline: none;
+}
+
+.scroll-to-bottom-btn:active {
+  transform: translateY(1px) scale(0.96);
+}
+
+.scroll-to-bottom-btn__icon {
+  display: block;
+  margin-top: -2px;
+  font-size: 27px;
+  line-height: 1;
+  font-weight: 400;
+  text-shadow: 0 0 10px rgba(255, 201, 69, 0.34);
+}
+
+.app-shell.keyboard-open .scroll-to-bottom-btn {
+  bottom: calc(var(--keyboard-offset, 0px) + var(--composer-height, 0px) + 14px + env(safe-area-inset-bottom));
+}