UI: Telegram-стиль, синий акцент, bubble-карточки

client/src/index.css

@@ -1,134 +1,117 @@
 @import "tailwindcss";
 @plugin "tailwindcss-animate";
 
-@custom-variant dark (&:is(.dark *));
-
 :root {
-  --background: #faf7f3;
-  --foreground: #1c1613;
+  --background: #f5f5f5;
+  --foreground: #000000;
   --card: #ffffff;
-  --card-foreground: #1c1613;
+  --card-foreground: #000000;
   --popover: #ffffff;
-  --popover-foreground: #1c1613;
-  --primary: #e85d3a;
+  --popover-foreground: #000000;
+  --primary: #2aabee;
   --primary-foreground: #ffffff;
-  --secondary: #fff0eb;
-  --secondary-foreground: #e85d3a;
-  --muted: #f5f0ec;
-  --muted-foreground: #8a7f75;
-  --accent: #fceae3;
-  --accent-foreground: #1c1613;
-  --destructive: #e03e2f;
+  --secondary: #eff2f5;
+  --secondary-foreground: #000000;
+  --muted: #f0f0f0;
+  --muted-foreground: #8e8e93;
+  --accent: #e8f5ff;
+  --accent-foreground: #2aabee;
+  --destructive: #ff3b30;
   --destructive-foreground: #ffffff;
-  --border: #e8e0d8;
-  --input: #e8e0d8;
-  --ring: #e85d3a;
-  --radius: 0.75rem;
+  --border: #e5e5ea;
+  --input: #e5e5ea;
+  --ring: #2aabee;
+  --radius: 0;
 
-  --shadow-sm: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.04);
-  --shadow-md: 0 4px 12px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04);
-  --shadow-lg: 0 12px 32px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.04);
+  --tg-blue: #2aabee;
+  --tg-blue-light: #e8f5ff;
+  --tg-separator: #e5e5ea;
+  --tg-bg: #f5f5f5;
+  --tg-bubble: #ffffff;
+  --tg-muted: #8e8e93;
 }
 
-* {
-  border-color: var(--border);
-}
+* { border-color: var(--tg-separator); }
 
 body {
-  background-color: var(--background);
+  background-color: var(--tg-bg);
   color: var(--foreground);
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
   -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
 }
 
-::selection {
-  background: #e85d3a;
-  color: white;
-}
+::selection { background: var(--tg-blue); color: white; }
 
 /* Heart animation */
 @keyframes heart-pop {
   0% { transform: scale(1); }
-  25% { transform: scale(1.3); }
-  50% { transform: scale(0.9); }
-  75% { transform: scale(1.1); }
+  40% { transform: scale(1.2); }
   100% { transform: scale(1); }
 }
-
-.heart-animate {
-  animation: heart-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
-}
-
-/* Double tap heart */
-@keyframes heart-burst {
-  0% { transform: scale(0) rotate(-12deg); opacity: 1; }
-  55% { transform: scale(1.2) rotate(3deg); opacity: 0.8; }
-  100% { transform: scale(1.6) rotate(0deg); opacity: 0; }
-}
-
-.heart-burst {
-  animation: heart-burst 0.5s ease-out forwards;
-}
+.heart-animate { animation: heart-pop 0.3s ease-out; }
 
 /* Fade in */
 @keyframes fade-in {
-  from { opacity: 0; transform: translateY(8px); }
+  from { opacity: 0; transform: translateY(4px); }
   to { opacity: 1; transform: translateY(0); }
 }
-
-.animate-fade-in {
-  animation: fade-in 0.35s ease-out;
-}
+.animate-fade-in { animation: fade-in 0.25s ease-out; }
 
 /* Scale in */
 @keyframes scale-in {
-  from { opacity: 0; transform: scale(0.95); }
+  from { opacity: 0; transform: scale(0.97); }
   to { opacity: 1; transform: scale(1); }
 }
+.animate-scale-in { animation: scale-in 0.15s ease-out; }
 
-.animate-scale-in {
-  animation: scale-in 0.2s ease-out;
-}
-
-/* Slide up */
+/* Slide up for toasts */
 @keyframes slide-up {
-  from { opacity: 0; transform: translateY(10px); }
+  from { opacity: 0; transform: translateY(8px); }
   to { opacity: 1; transform: translateY(0); }
 }
-
-.animate-slide-up {
-  animation: slide-up 0.25s ease-out;
-}
+.animate-slide-up { animation: slide-up 0.2s ease-out; }
 
 /* Shimmer */
 @keyframes shimmer {
   0% { background-position: -200% 0; }
   100% { background-position: 200% 0; }
 }
-
 .skeleton-shimmer {
-  background: linear-gradient(90deg, #f0e8e2 25%, #faf7f3 50%, #f0e8e2 75%);
+  background: linear-gradient(90deg, #e8e8e8 25%, #f5f5f5 50%, #e8e8e8 75%);
   background-size: 200% 100%;
   animation: shimmer 1.2s ease-in-out infinite;
 }
 
 /* Page transition */
-.page-enter {
-  opacity: 0;
-}
-.page-enter-active {
-  opacity: 1;
-  transition: opacity 0.18s ease-out;
+.page-enter { opacity: 0; }
+.page-enter-active { opacity: 1; transition: opacity 0.12s ease-out; }
+
+/* Like button */
+.like-btn { transition: transform 0.08s; cursor: pointer; }
+.like-btn:active { transform: scale(0.82); }
+
+/* Telegram-style avatar ring */
+.tg-avatar {
+  border-radius: 50%;
+  background: var(--tg-blue);
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
 }
 
-/* Like button press */
-.like-btn {
-  transition: transform 0.1s;
-  cursor: pointer;
+/* Telegram-style bubble */
+.tg-bubble {
+  background: white;
+  border-radius: 12px;
+  overflow: hidden;
 }
-.like-btn:active {
-  transform: scale(0.8);
+
+/* Telegram-style separator */
+.tg-divider {
+  height: 1px;
+  background: var(--tg-separator);
 }
 
 /* Scrollbar hide */