Initial commit

2026-07-08 21:01:18 +03:30
parent 78decbba05
commit d2d3398471
1210 changed files with 9645 additions and 2522 deletions
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -286,26 +286,117 @@ select {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
-  border: 1px solid rgba(255, 255, 255, 0.45);
+  border: none;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
 }
 .dark .glass-panel {
  background: rgba(28, 28, 30, 0.78);
-  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
 }

+.chat-header-glass {
+  background: rgba(255, 255, 255, 0.62);
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  border: none;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+}
+.dark .chat-header-glass {
+  background: rgba(28, 28, 30, 0.72);
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
+}
+
+.chat-header-status-dot {
+  width: 10px;
+  height: 10px;
+  flex-shrink: 0;
+  border-radius: 9999px;
+}
+.chat-header-status-dot--online {
+  background: #22c55e;
+}
+.chat-header-status-dot--offline {
+  background: #9ca3af;
+}
+.dark .chat-header-status-dot--offline {
+  background: #6b7280;
+}
+
+.chat-timer-glass {
+  background: rgba(255, 255, 255, 0.58);
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  border: none;
+  box-shadow: 0 2px 14px rgba(36, 140, 200, 0.12);
+}
+.dark .chat-timer-glass {
+  background: rgba(24, 37, 51, 0.72);
+  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.3);
+}
+.chat-timer-glass--active {
+  background: rgba(42, 171, 238, 0.18);
+  color: #248cc8;
+  box-shadow: 0 2px 14px rgba(42, 171, 238, 0.2);
+}
+.dark .chat-timer-glass--active {
+  background: rgba(42, 171, 238, 0.22);
+  color: #2aabee;
+}
+
+.chat-timer-badge-glass {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  padding: 1px 6px;
+  border-radius: 9999px;
+  background: rgba(255, 255, 255, 0.42);
+  backdrop-filter: blur(10px) saturate(160%);
+  -webkit-backdrop-filter: blur(10px) saturate(160%);
+  border: none;
+  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
+  font-size: 10px;
+  font-weight: 600;
+  line-height: 1.2;
+}
+.chat-bubble-out .chat-timer-badge-glass {
+  background: rgba(255, 255, 255, 0.22);
+  color: inherit;
+}
+.chat-bubble-in .chat-timer-badge-glass {
+  color: #248cc8;
+}
+.dark .chat-timer-badge-glass {
+  background: rgba(255, 255, 255, 0.12);
+}
+.dark .chat-bubble-in .chat-timer-badge-glass {
+  color: #2aabee;
+}
+
+.chat-message-highlight {
+  animation: message-highlight-flash 1.6s ease-out;
+  border-radius: 1rem;
+}
+@keyframes message-highlight-flash {
+  0%,
+  100% {
+    box-shadow: 0 0 0 0 rgba(42, 171, 238, 0);
+  }
+  25%,
+  65% {
+    box-shadow: 0 0 0 3px rgba(42, 171, 238, 0.55);
+  }
+}
+
 .glass-chat-input {
-  background: rgba(255, 255, 255, 0.85);
+  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(24px) saturate(200%);
  -webkit-backdrop-filter: blur(24px) saturate(200%);
-  border: 1px solid rgba(255, 255, 255, 0.5);
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), 0 1px 0 rgba(255, 255, 255, 0.6) inset;
+  border: none;
+  box-shadow: 0 4px 20px rgba(15, 45, 70, 0.08);
 }
 .dark .glass-chat-input {
-  background: rgba(44, 44, 46, 0.88);
-  border-color: rgba(255, 255, 255, 0.1);
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+  background: rgba(24, 37, 51, 0.78);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
 }

 /* ─── Gentle transitions ─── */
@@ -330,38 +421,90 @@ select {
  max-width: min(100% - 2rem, 22rem);
 }

-/* ─── Instagram DM chat theme ─── */
-.chat-page-bg {
-  background: #ffffff;
-}
-.dark .chat-page-bg {
-  background: #000000;
+/* ─── Chat theme — Modstagram: modeling · makeup · beauty · photography ─── */
+:root {
+  --chat-accent: #2aabee;
+  /* Studio light: warm key + soft fill */
+  --chat-bg: #f3ece6;
+  --chat-bg-pattern: url("/images/chat/wallpaper-light.svg"),
+    radial-gradient(ellipse 90% 70% at 8% 12%, rgba(214, 164, 176, 0.32) 0%, transparent 58%),
+    radial-gradient(ellipse 85% 65% at 92% 88%, rgba(141, 175, 205, 0.26) 0%, transparent 55%),
+    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(255, 248, 242, 0.5) 0%, transparent 70%),
+    linear-gradient(168deg, #faf4ef 0%, #f0e8f0 38%, #e8eef4 100%);
+  --chat-bg-pattern-size: 480px 480px, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
+  --chat-bubble-out: #248cc8;
+  --chat-bubble-out-fg: #ffffff;
+  --chat-bubble-out-meta: rgba(255, 255, 255, 0.78);
+  --chat-bubble-in: #fffdfb;
+  --chat-bubble-in-fg: #1c1520;
+  --chat-bubble-in-meta: rgba(28, 21, 32, 0.46);
+}
+
+.dark {
+  --chat-accent: #2aabee;
+  /* Dark studio: tungsten key + cool rim */
+  --chat-bg: #0e1014;
+  --chat-bg-pattern: url("/images/chat/wallpaper-dark.svg"),
+    radial-gradient(ellipse 80% 55% at 10% 15%, rgba(196, 149, 127, 0.14) 0%, transparent 58%),
+    radial-gradient(ellipse 75% 50% at 88% 82%, rgba(42, 171, 238, 0.11) 0%, transparent 52%),
+    radial-gradient(ellipse 50% 40% at 50% 45%, rgba(180, 140, 170, 0.06) 0%, transparent 65%),
+    linear-gradient(168deg, #121018 0%, #0e1014 45%, #0a0c12 100%);
+  --chat-bg-pattern-size: 480px 480px, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
+  --chat-bubble-out: #2aabee;
+  --chat-bubble-out-fg: #ffffff;
+  --chat-bubble-out-meta: rgba(255, 255, 255, 0.76);
+  --chat-bubble-in: #1a2029;
+  --chat-bubble-in-fg: #eceef3;
+  --chat-bubble-in-meta: rgba(236, 238, 243, 0.55);
+}
+
+.chat-page-bg {
+  position: relative;
+  background: transparent;
+  isolation: isolate;
+}
+
+.chat-page-bg::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  background-color: var(--chat-bg);
+  background-image: var(--chat-bg-pattern);
+  background-size: var(--chat-bg-pattern-size);
+}
+
+/* فقط لیست پیام‌ها — بدون position:relative تا fixed هدر/فوتر خراب نشود */
+.chat-page-bg > .chat-thread-messages {
+  z-index: 1;
 }

-/* Outgoing — Instagram DM (RTL: tail bottom-left / outer edge) */
 .chat-bubble-out,
 .ig-dm-out {
-  background: linear-gradient(135deg, #5b51d8 0%, #c13584 45%, #e1306c 100%);
-  color: #fff;
+  background: var(--chat-bubble-out);
+  color: var(--chat-bubble-out-fg);
 }
-.bubble-tail-out .chat-bubble-out,
-.bubble-tail-out .chat-text-bubble.chat-bubble-out {
-  border-radius: 18px 18px 18px 4px;
+.chat-bubble-out .message-time-inline,
+.chat-text-bubble.chat-bubble-out .message-time-inline,
+.chat-bubble-out .message-time-below {
+  color: var(--chat-bubble-out-meta);
 }
-/* Incoming — tail bottom-right */
+
 .chat-bubble-in,
 .ig-dm-in {
-  background: #efefef;
-  color: #000;
-}
-.bubble-tail-in .chat-bubble-in,
-.bubble-tail-in .chat-text-bubble.chat-bubble-in {
-  border-radius: 18px 18px 4px 18px;
+  background: var(--chat-bubble-in);
+  color: var(--chat-bubble-in-fg);
+  box-shadow: 0 1px 2px rgba(26, 21, 32, 0.08);
 }
 .dark .chat-bubble-in,
 .dark .ig-dm-in {
-  background: #262626;
-  color: #f5f5f5;
+  box-shadow: none;
+}
+.chat-bubble-in .message-time-inline,
+.chat-text-bubble.chat-bubble-in .message-time-inline,
+.chat-bubble-in .message-time-below {
+  color: var(--chat-bubble-in-meta);
 }

 .chat-text-bubble {
@@ -384,12 +527,15 @@ select {
  display: inline-flex;
  align-items: center;
  gap: 2px;
+  white-space: nowrap;
 }
-.bubble-tail-out .message-time-inline {
+.chat-bubble-out .message-time-inline,
+.chat-text-bubble.chat-bubble-out .message-time-inline {
  left: auto;
  right: 8px;
 }
-.bubble-tail-in .message-time-inline {
+.chat-bubble-in .message-time-inline,
+.chat-text-bubble.chat-bubble-in .message-time-inline {
  left: 8px;
  right: auto;
 }
@@ -416,6 +562,17 @@ select {
  box-shadow: 0 4px 14px rgba(0, 122, 255, 0.35);
 }

+.chat-forward-btn {
+  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
+  color: #fff;
+  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35);
+}
+
+.dark .chat-forward-btn {
+  background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%);
+  box-shadow: 0 4px 14px rgba(139, 92, 246, 0.4);
+}
+
 .header-offline {
  background: linear-gradient(180deg, rgba(220, 38, 38, 0.92) 0%, rgba(185, 28, 28, 0.88) 100%) !important;
  backdrop-filter: blur(12px);
@@ -448,7 +605,8 @@ select {
 }

 .ig-dm-send-btn {
-  background: linear-gradient(135deg, #5b51d8 0%, #c13584 50%, #e1306c 100%);
+  background: var(--chat-bubble-out);
+  color: var(--chat-bubble-out-fg);
 }

 /* ─── Instagram-style typing dots ─── */
@@ -472,14 +630,7 @@ select {
  animation: check-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
 }

-/* ─── Message enter animation ─── */
-@keyframes message-in {
-  from { opacity: 0; transform: translateY(12px) scale(0.96); }
-  to { opacity: 1; transform: translateY(0) scale(1); }
-}
-.message-enter {
-  animation: message-in 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
-}
+/* Message enter — handled by framer-motion in ChatMessageCard */

 /* ─── Shrink header ─── */
 .header-shrink {
@@ -502,7 +653,7 @@ select {
  filter: invert(1) hue-rotate(180deg) brightness(1.2);
 }

-/* حذف پس‌زمینه سفید اضافی در برخی مرورگرها */
-.custom-audio-player::-webkit-media-controls-panel {
-  background-color: transparent;
-} 
+.profile-avatar {
+  aspect-ratio: 1 / 1;
+  object-fit: cover;
+}