@rtsee/ngx 0.0.111 → 0.0.113

package/dist/ngx/src/lib/theme/messenger/create-chat.scss

@@ -68,6 +68,77 @@
     padding: $rtsu-space-sm 0;
   }
 
+  .rts-chat-info-call-actions {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: $rtsu-space-sm;
+    padding: $rtsu-space-xs 0 $rtsu-space-sm;
+
+    .rts-call-btn {
+      flex: 1;
+      max-width: 140px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: $rtsu-space-xs;
+      padding: 8px 16px;
+      background: rgba(255, 255, 255, 0.05);
+      border: 1px solid var(--rts-border-med);
+      border-radius: $rtsu-radius-md;
+      color: var(--rts-text-primary);
+      font-family: $rtsu-font-family;
+      font-size: $rtsu-font-size-sm;
+      font-weight: $rtsu-font-weight-medium;
+      cursor: pointer;
+      transition: background $rtsu-transition-fast,
+                  border-color $rtsu-transition-fast,
+                  transform $rtsu-transition-fast,
+                  box-shadow $rtsu-transition-fast;
+
+      .material-icons-outlined,
+      .pi {
+        font-size: 18px;
+        color: var(--rts-accent-light, #a29bfe);
+        transition: color $rtsu-transition-fast;
+      }
+
+      &:hover {
+        background: rgba(108, 92, 231, 0.15);
+        border-color: rgba(108, 92, 231, 0.4);
+        transform: translateY(-1px);
+        box-shadow: 0 4px 12px rgba(108, 92, 231, 0.15);
+
+        .material-icons-outlined,
+        .pi {
+          color: #c4b5fd;
+        }
+      }
+
+      &:active {
+        transform: translateY(0);
+      }
+
+      &.rts-call-btn-video {
+        .material-icons-outlined,
+        .pi {
+          color: #10b981;
+        }
+
+        &:hover {
+          background: rgba(16, 185, 129, 0.15);
+          border-color: rgba(16, 185, 129, 0.4);
+          box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
+
+          .material-icons-outlined,
+          .pi {
+            color: #34d399;
+          }
+        }
+      }
+    }
+  }
+
   .rts-divider {
     border: none;
     border-top: 1px solid var(--rts-border-dim);

package/dist/ngx/src/lib/theme/messenger/message.scss

@@ -28,15 +28,21 @@
   &.rts-message-from-me {
     .rts-messenger-message {
       float: right;
-      background: linear-gradient(
-        135deg,
-        $rtsu-accent-purple 0%,
-        $rtsu-accent-purple-light 100%
-      );
-      color: #fff;
-      border-bottom-right-radius: $rtsu-radius-xs;
-      box-shadow: $rtsu-shadow-accent-sm;
     }
+
+    &:not(.rts-message-is-widget) {
+      .rts-messenger-message {
+        background: linear-gradient(
+            135deg,
+            $rtsu-accent-purple 0%,
+            $rtsu-accent-purple-light 100%
+        );
+        color: #fff;
+        border-bottom-right-radius: $rtsu-radius-xs;
+        box-shadow: $rtsu-shadow-accent-sm;
+      }
+    }
+
   }
 
   // ── Message Bubble ──

package/dist/ngx/src/lib/theme/messenger/messages-list.scss

@@ -73,6 +73,19 @@
   background-color: transparent;
   border-top: 1px solid transparent;
 
+  .rts-messages-list-inner {
+    display: flex;
+    flex-direction: column;
+    min-height: 100%;
+  }
+
+  .rts-messages-list-bottom-anchor {
+    height: 1px;
+    width: 100%;
+    pointer-events: none;
+    visibility: hidden;
+  }
+
   .rts-messenger-message-wrapper {
     margin-bottom: $rtsu-space-sm;
     position: relative;
@@ -126,7 +139,8 @@
       }
     }
 
-    &:last-child {
+    &:last-child,
+    &:last-of-type {
       margin-bottom: $rtsu-bottom-nav-height;
     }
   }
@@ -160,7 +174,8 @@
     overscroll-behavior-y: contain;
 
     .rts-messenger-message-wrapper {
-      &:last-child {
+      &:last-child,
+      &:last-of-type {
         margin-bottom: 0;
       }
 

package/dist/ngx/src/lib/theme/messenger/messenger-header.scss

@@ -49,7 +49,7 @@
     }
   }
 
-  // ── My Profile Mode ──
+  // ── My Profile Mode (State 2: Centered circle) ──
   &.rts-messenger-header-my-profile-mode {
     background-color: var(--rts-bg-primary);
     border-bottom-color: var(--rts-border-dim);
@@ -66,12 +66,20 @@
       width: 100%;
       height: auto;
       position: static;
+      display: flex;
+      justify-content: center;
+      padding: $rtsu-space-lg $rtsu-space-md 0;
 
       .rts-messenger-header-avatar {
         padding: 0;
+        width: 160px;
+        height: 160px;
+        flex-shrink: 0;
 
         .rts-messenger-header-avatar-image {
-          border-radius: 0;
+          border-radius: 50%;
+          border: 3px solid var(--rts-border-med);
+          box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
         }
       }
     }
@@ -79,6 +87,13 @@
     .rts-messenger-header-right {
       display: none;
     }
+
+    .rts-messenger-header-chat-title {
+      text-align: center;
+      margin: $rtsu-space-sm 0;
+      font-size: $rtsu-font-size-lg;
+      font-weight: $rtsu-font-weight-bold;
+    }
   }
 
   // ── Create Chat Mode ──
@@ -102,7 +117,7 @@
     }
   }
 
-  // ── Chat Info Mode ──
+  // ── Chat Info Mode (State 2: Centered circle) ──
   &.rts-messenger-header-chat-info-mode {
     .rts-messenger-header-right {
       width: 100%;
@@ -110,17 +125,18 @@
       position: static;
       display: flex;
       justify-content: center;
-      padding: $rtsu-space-lg $rtsu-space-md;
+      padding: $rtsu-space-lg $rtsu-space-md 0;
 
       .rts-messenger-header-avatar {
         padding: 0;
-        width: 120px;
-        height: 120px;
+        width: 160px;
+        height: 160px;
         flex-shrink: 0;
 
         .rts-messenger-header-avatar-image {
           border-radius: 50%;
-          border: 2px solid var(--rts-border-med);
+          border: 3px solid var(--rts-border-med);
+          box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
         }
       }
     }
@@ -131,12 +147,17 @@
 
     .rts-messenger-header-chat-title {
       text-align: center;
+      margin: $rtsu-space-sm 0;
+      font-size: $rtsu-font-size-lg;
+      font-weight: $rtsu-font-weight-bold;
     }
   }
 
-  // ── Chat Image Expanded (full-width square on second click) ──
+  // ── State 3: Image Expanded to Square (full-width container on double-click) ──
+  &.rts-messenger-header-image-square,
   &.rts-messenger-header-chat-image-expanded {
-    .rts-messenger-header-right {
+    &.rts-messenger-header-my-profile-mode .rts-messenger-header-left,
+    &.rts-messenger-header-chat-info-mode .rts-messenger-header-right {
       padding: 0;
       display: block;
 
@@ -147,6 +168,7 @@
         .rts-messenger-header-avatar-image {
           border-radius: 0;
           border: none;
+          box-shadow: none;
         }
       }
     }
@@ -179,6 +201,9 @@
   .rts-messenger-header-avatar {
     padding: $rtsu-space-sm;
     cursor: pointer;
+    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
+                height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
+                padding 0.35s cubic-bezier(0.4, 0, 0.2, 1);
 
     .rts-messenger-header-avatar-image {
       width: 100%;
@@ -186,7 +211,10 @@
       background-position: center;
       padding-top: 100%;
       border-radius: 50%;
-      transition: border-radius $rtsu-transition-fast;
+      transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
+                  border-radius 0.35s cubic-bezier(0.4, 0, 0.2, 1),
+                  box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1),
+                  border 0.35s ease;
 
       &:hover {
         outline: 3px solid rgba(108, 92, 231, 0.3);
@@ -200,6 +228,7 @@
     position: fixed;
     left: $rtsu-space-sm;
     top: $rtsu-space-sm;
+    z-index: 20;
     color: #fff;
     background-color: rgba(0, 0, 0, 0.35);
     backdrop-filter: $rtsu-glass-blur;
@@ -230,8 +259,9 @@
     left: 0;
     width: $rts-messenger-header-height;
     height: $rts-messenger-header-height;
-    transition: width $rtsu-transition-fast,
-                height $rtsu-transition-fast;
+    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
+                height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
+                padding 0.35s cubic-bezier(0.4, 0, 0.2, 1);
   }
 
   .rts-messenger-header-right {
@@ -241,8 +271,9 @@
     right: 0;
     width: $rts-messenger-header-height;
     height: $rts-messenger-header-height;
-    transition: width $rtsu-transition-fast,
-                height $rtsu-transition-fast;
+    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
+                height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
+                padding 0.35s cubic-bezier(0.4, 0, 0.2, 1);
   }
 
   // ── Center Content ──

package/dist/ngx/src/lib/theme/messenger/profile.scss

@@ -1,302 +1,111 @@
 // ═══════════════════════════════════════════════════════════════════
-// MESSENGER — Profile
+// MESSENGER — Profile (Aligned with Chat Info)
 // ═══════════════════════════════════════════════════════════════════
 @import "./variables";
+@import "./create-chat";
 
 .rts-messenger-profile {
-  padding: $rtsu-space-sm;
-  background-color: var(--rts-bg-primary);
+  padding: $rtsu-space-md;
   color: var(--rts-text-primary);
   font-family: $rtsu-font-family;
   min-height: 100%;
+  overflow-y: auto;
+  max-height: calc(100vh - #{$rts-messenger-header-height});
+  -webkit-overflow-scrolling: touch;
 
-  /* ── GLASS CARD ───────────────────────────────────────────── */
 
-  .rts-messenger-profile-glass-card {
-    background: linear-gradient(
-      135deg,
-      var(--rts-card-bg-start) 0%,
-      var(--rts-card-bg-end) 100%
-    );
-    border: 1px solid var(--rts-border-dim);
-    border-radius: $rtsu-radius-lg;
-    backdrop-filter: $rtsu-glass-blur;
-    padding: $rtsu-space-md;
-    margin-bottom: $rtsu-space-md;
-    transition: transform $rtsu-transition-base,
-                border-color $rtsu-transition-base,
-                box-shadow $rtsu-transition-base;
-    animation: rts-fade-up 0.6s ease-out both;
-
-    &:hover {
-      border-color: rgba(108, 92, 231, 0.2);
-      box-shadow: 0 6px 24px rgba(108, 92, 231, 0.08);
-    }
-  }
-
-  /* ── PROFILE INFO ─────────────────────────────────────────── */
-
-  .rts-messenger-profile-info {
-    .rts-messenger-profile-info-name {
-      margin: 0 0 $rtsu-space-md;
-      font-size: $rtsu-font-size-xl;
-      font-weight: $rtsu-font-weight-bold;
-      color: var(--rts-text-primary);
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      letter-spacing: $rtsu-tracking-tight;
-      line-height: $rtsu-line-height-tight;
-    }
 
-    .rts-messenger-profile-info-language {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      justify-content: space-between;
-      padding: $rtsu-space-sm 0;
+  /* ── SECTIONS & FIELDS ────────────────────────────────────── */
 
-      .rts-messenger-profile-info-language-label {
-        font-size: $rtsu-font-size-base;
-        font-weight: $rtsu-font-weight-medium;
-        color: var(--rts-text-secondary);
-        margin: 0;
-      }
-    }
+  .rts-profile-section {
+    padding: $rtsu-space-xs 0;
   }
 
-  /* ── EDIT PROFILE / MANAGE PLAN BUTTONS ───────────────────── */
+  .rts-profile-field-row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    gap: $rtsu-space-md;
 
-  .rts-messenger-profile-edit-btn {
-    padding-top: $rtsu-space-sm;
+    .rts-profile-field-label {
+      font-size: $rtsu-font-size-sm;
+      font-weight: $rtsu-font-weight-medium;
+      color: var(--rts-text-secondary);
+      margin: 0;
+    }
   }
 
-  .rts-messenger-profile-edit-btn,
-  .rts-messenger-profile-manage-plan-btn {
-    margin-top: $rtsu-space-sm;
-    text-align: right;
+  .rts-profile-language-select {
+    min-width: 140px;
 
-    ::ng-deep .p-button {
-      width: 100%;
-      background: transparent;
-      border: 1px solid var(--rts-border-bright);
+    ::ng-deep .p-select {
+      background: var(--rts-bg-surface);
+      border: 1px solid var(--rts-border-med);
+      border-radius: $rtsu-radius-sm;
       color: var(--rts-text-primary);
-      border-radius: $rtsu-radius-sm + 2px;
-      font-weight: $rtsu-font-weight-semibold;
-      font-size: 0.88rem;
-      padding: 10px 20px;
-      transition: background $rtsu-transition-fast,
-                  border-color $rtsu-transition-fast,
-                  transform $rtsu-transition-fast;
-
-      &:hover {
-        background: var(--rts-bg-surface-hover);
-        border-color: rgba(108, 92, 231, 0.4);
-        transform: translateY(-1px);
-      }
 
-      &:active {
-        transform: translateY(0);
+      .p-select-label {
+        font-size: $rtsu-font-size-sm;
+        padding: 6px 12px;
       }
     }
   }
 
-  /* ── PLAN STATUS ──────────────────────────────────────────── */
+  /* ── PLAN BADGE ───────────────────────────────────────────── */
 
-  .rts-messenger-profile-plan-status {
+  .rts-profile-plan-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: $rtsu-space-xs;
+    padding: 6px 12px;
+    background: rgba(16, 185, 129, 0.12);
+    border: 1px solid rgba(16, 185, 129, 0.25);
+    border-radius: $rtsu-radius-md;
+    color: #10b981;
+    font-size: $rtsu-font-size-sm;
+    font-weight: $rtsu-font-weight-semibold;
     margin-bottom: $rtsu-space-sm;
-  }
-
-  /* ── SUBSCRIBE BUTTON — PRIMARY CTA ───────────────────────── */
 
-  .rts-messenger-profile-subscribe-btn {
-    animation: rts-fade-up 0.7s ease-out both;
-    animation-delay: 0.1s;
-    text-align: right;
-
-    ::ng-deep .p-button {
-      width: 100%;
-      background: linear-gradient(
-        135deg,
-        $rtsu-accent-purple 0%,
-        $rtsu-accent-purple-light 100%
-      );
-      border: none;
-      color: #fff;
-      border-radius: $rtsu-radius-md;
-      font-weight: $rtsu-font-weight-bold;
-      font-size: 1rem;
-      padding: 14px 28px;
-      letter-spacing: $rtsu-tracking-wide;
-      box-shadow: $rtsu-shadow-accent-md;
-      transition: transform $rtsu-transition-base,
-                  box-shadow $rtsu-transition-base;
-      position: relative;
-      overflow: hidden;
-
-      &::before {
-        content: '';
-        position: absolute;
-        inset: 0;
-        background: linear-gradient(
-          105deg,
-          transparent 40%,
-          rgba(255, 255, 255, 0.15) 50%,
-          transparent 60%
-        );
-        animation: rts-shimmer 3s ease-in-out infinite;
-      }
-
-      &:hover {
-        transform: translateY(-2px);
-        box-shadow: $rtsu-shadow-accent-lg;
-      }
-
-      &:active {
-        transform: translateY(0);
-        box-shadow: $rtsu-shadow-accent-sm;
-      }
+    .material-icons-outlined {
+      font-size: 18px;
     }
   }
 
-  /* ── CALL/VIDEO ACTIONS (other profile) ───────────────────── */
+  /* ── ANONYMOUS ALERT ──────────────────────────────────────── */
 
-  .rts-messenger-profile-actions {
-    list-style-type: none;
-    padding-left: 0;
-    margin: 0 0 $rtsu-space-md 0;
-    gap: $rtsu-space-md;
+  .rts-profile-anon-box {
     display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-
-    .rts-messenger-profile-actions-item {
-      ::ng-deep .p-button {
-        background: rgba(255, 255, 255, 0.06);
-        border: 1px solid var(--rts-border-med);
-        color: var(--rts-accent-light, #a29bfe);
-        border-radius: 50%;
-        width: 52px;
-        height: 52px;
-        transition: background $rtsu-transition-fast,
-                    transform $rtsu-transition-fast,
-                    box-shadow $rtsu-transition-fast;
-
-        &:hover {
-          background: rgba(108, 92, 231, 0.15);
-          transform: translateY(-2px);
-          box-shadow: 0 4px 16px rgba(108, 92, 231, 0.2);
-        }
-
-        &:active {
-          transform: translateY(0);
-        }
-      }
-    }
-  }
-
-  /* ── LOGOUT BUTTON — DANGER GHOST ─────────────────────────── */
-
-  .rts-messenger-profile-logout-btn {
-    margin-top: $rtsu-space-sm;
-    animation: rts-fade-up 0.7s ease-out both;
-    animation-delay: 0.15s;
-    text-align: right;
-
-    ::ng-deep .p-button {
-      width: 100%;
-      background: var(--rts-danger-bg);
-      border: 1px solid var(--rts-danger-border);
-      color: var(--rts-danger, #e84118);
-      border-radius: $rtsu-radius-sm + 2px;
-      font-weight: $rtsu-font-weight-semibold;
-      font-size: 0.88rem;
-      padding: 10px 20px;
-      transition: background $rtsu-transition-fast,
-                  border-color $rtsu-transition-fast,
-                  transform $rtsu-transition-fast;
+    align-items: flex-start;
+    gap: $rtsu-space-sm;
+    padding: $rtsu-space-sm $rtsu-space-md;
+    background: rgba(245, 158, 11, 0.1);
+    border: 1px solid rgba(245, 158, 11, 0.25);
+    border-radius: $rtsu-radius-md;
+    margin-bottom: $rtsu-space-md;
 
-      &:hover {
-        background: rgba(232, 65, 24, 0.2);
-        border-color: rgba(232, 65, 24, 0.4);
-        transform: translateY(-1px);
-      }
+    .rts-profile-anon-icon {
+      color: #f59e0b;
+      margin-top: 2px;
 
-      &:active {
-        transform: translateY(0);
+      .material-icons-outlined {
+        font-size: 20px;
       }
     }
-  }
 
-  /* ── AUTH SECTION (ANONYMOUS USERS) ───────────────────────── */
-
-  .rts-messenger-profile-auth {
-    .rts-messenger-profile-anon-message {
-      margin-bottom: $rtsu-space-md;
-    }
-
-    .rts-messenger-profile-auth-buttons {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      justify-content: center;
-      gap: $rtsu-space-md;
-      margin-bottom: $rtsu-space-md;
-
-      .rts-messenger-profile-auth-button {
-        flex: 1;
-
-        ::ng-deep .p-button {
-          width: 100%;
-          border-radius: $rtsu-radius-sm + 2px;
-          font-weight: $rtsu-font-weight-semibold;
-          padding: 10px 20px;
-          transition: transform $rtsu-transition-fast,
-                      box-shadow $rtsu-transition-fast;
-
-          &:hover {
-            transform: translateY(-1px);
-          }
-
-          &:active {
-            transform: translateY(0);
-          }
-        }
-
-        // Sign Up — primary CTA
-        &:first-child ::ng-deep .p-button {
-          background: linear-gradient(
-            135deg,
-            $rtsu-accent-purple 0%,
-            $rtsu-accent-purple-light 100%
-          );
-          border: none;
-          color: #fff;
-          box-shadow: $rtsu-shadow-accent-md;
-
-          &:hover {
-            box-shadow: $rtsu-shadow-accent-lg;
-          }
-        }
-
-        // Sign In — secondary ghost
-        &:last-child ::ng-deep .p-button {
-          background: transparent;
-          border: 1px solid var(--rts-border-bright);
-          color: var(--rts-text-primary);
-
-          &:hover {
-            background: var(--rts-bg-surface-hover);
-            border-color: rgba(108, 92, 231, 0.4);
-          }
-        }
+    .rts-profile-anon-text {
+      p {
+        margin: 0;
+        font-size: $rtsu-font-size-xs;
+        color: var(--rts-text-secondary);
+        line-height: $rtsu-line-height-snug;
       }
     }
   }
 
-  @media screen and (min-width: $rtsu-break-md) {
-    max-width: 560px;
-    margin: 0 auto;
+  .rts-profile-auth-actions {
+    display: flex;
+    flex-direction: column;
+    gap: $rtsu-space-xs;
   }
 }