Update static/css/style.css

static/css/style.css

@@ -20,48 +20,54 @@ body { font-family: 'Vazirmatn', 'Inter', sans-serif; -webkit-tap-highlight-colo
 .typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
 @keyframes typing-blink { 0% { opacity: 0.2; } 20% { opacity: 1; } 100% { opacity: 0.2; } }
 
+/* === استایل بلوک کد === */
 .prose pre {
     position: relative;
     background-color: #282c34;
     border-radius: 0.75rem;
-    padding-top: 2.5rem;
+    padding-top: 2.8rem;
     overflow-x: auto;
+    margin-top: 1em;
+    margin-bottom: 1em;
 }
 .prose pre code {
     white-space: pre;
     word-break: normal;
     display: block;
-    padding: 0.5rem 0.75rem;
+    padding: 0.75rem 1rem;
     direction: ltr;
     text-align: left;
 }
-
 .code-button-container {
     position: absolute;
-    top: 0.5rem;
-    right: 0.5rem;
+    top: 0.75rem;
+    right: 0.75rem;
     display: flex;
     gap: 0.5rem;
     opacity: 0;
     transition: opacity 0.2s;
 }
-.prose pre:hover .code-button-container { opacity: 1; }
+.prose pre:hover .code-button-container {
+    opacity: 1;
+}
 .code-button {
-    padding: 0.25rem 0.5rem;
+    padding: 0.25rem 0.6rem;
     background-color: rgba(75, 85, 99, 0.8);
     color: white;
     border: none;
     border-radius: 0.375rem;
-    font-size: 0.75rem;
+    font-size: 0.8rem;
+    font-family: 'Vazirmatn', sans-serif;
     cursor: pointer;
     display: flex;
     align-items: center;
-    gap: 0.25rem;
+    gap: 0.3rem;
     transition: background-color 0.2s;
 }
 .code-button:hover { background-color: rgba(107, 114, 128, 0.8); }
 .code-button:active { background-color: #4b5563; }
 
+/* === استایل دکمه‌های اکشن پیام === */
 .message-actions { opacity: 0; transition: opacity 0.3s ease-in-out; position: absolute; bottom: -1rem; left: 0; display: flex; align-items: center; }
 .group:hover .message-actions { opacity: 1; }
 .action-button { padding: 0.375rem; border-radius: 9999px; background-color: rgba(255, 255, 255, 0.7); backdrop-filter: blur(4px); border: 1px solid #e5e7eb; color: #6b7280; transition: all 0.2s; box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }
@@ -198,6 +204,7 @@ body { font-family: 'Vazirmatn', 'Inter', sans-serif; -webkit-tap-highlight-colo
     color: #cbd5e1;
 }
 
+/* === استایل‌های صفحه خوش‌آمدگویی === */
 .welcome-screen {
     position: absolute;
     top: 0;
@@ -211,10 +218,7 @@ body { font-family: 'Vazirmatn', 'Inter', sans-serif; -webkit-tap-highlight-colo
     padding: 40px 20px;
     overflow-x: hidden;
     box-sizing: border-box;
-    background-color: #f8f9fa;
-    color: #333;
 }
-.dark .welcome-screen { background-color: #111827; color: #d1d5db; }
 
 .welcome-container {
     max-width: 500px;
@@ -248,7 +252,7 @@ body { font-family: 'Vazirmatn', 'Inter', sans-serif; -webkit-tap-highlight-colo
 .main-title {
     font-size: 1.8rem;
     font-weight: 600;
-    margin-bottom: 3rem;
+    margin-bottom: 2rem;
     color: #2c3e50;
     line-height: 1.5;
     opacity: 0;
@@ -256,70 +260,64 @@ body { font-family: 'Vazirmatn', 'Inter', sans-serif; -webkit-tap-highlight-colo
 }
 .dark .main-title { color: #e5e7eb; }
 
-.buttons-grid {
+/* === استایل‌های جدید برای دکمه‌های پیشنهادی (بدون کارت پس‌زمینه) === */
+.suggestions-container {
     display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 1rem;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 16px;
     margin-top: 2rem;
+    opacity: 0;
+    transform: translateY(20px);
+    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
 }
 
-.action-button-welcome {
+.suggestion-button {
     display: flex;
-    flex-direction: row;
+    flex-direction: row-reverse;
     align-items: center;
-    justify-content: space-between;
-    padding: 1.5rem 1.5rem;
-    background: #ffffff;
-    border: 1px solid #e9ecef;
-    border-radius: 25px;
-    color: #495057;
-    text-decoration: none;
-    font-size: 0.95rem;
+    justify-content: center;
+    background-color: #ffffff;
+    border: 1px solid #eef0f2;
+    border-radius: 40px;
+    padding: 12px 18px;
+    font-size: 15px;
     font-weight: 500;
-    transition: all 0.2s ease;
+    color: #333;
+    white-space: nowrap;
     cursor: pointer;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
-    min-height: 70px;
-    opacity: 0;
-    transform: translateY(20px);
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
+    transition: all 0.2s ease-in-out;
 }
-.dark .action-button-welcome { background: #1f2937; border-color: #374151; color: #d1d5db; }
-
-.action-button-welcome:hover {
-    background: #f8f9fa;
-    border-color: #dee2e6;
-    transform: translateY(-1px);
-    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+.dark .suggestion-button {
+    background-color: #374151;
+    border-color: #4b5563;
+    color: #e5e7eb;
 }
-.dark .action-button-welcome:hover { background: #374151; border-color: #4b5563; }
 
-.button-icon {
-    width: 40px;
-    height: 40px;
-    border-radius: 8px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 1.5rem;
-    font-weight: bold;
+.suggestion-button:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
+    border-color: #e0e2e5;
+}
+.dark .suggestion-button:hover {
+    background-color: #4b5563;
+    border-color: #6b7280;
+}
+        
+.suggestion-button:active {
+    transform: translateY(-1px) scale(0.98);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
 }
 
-.orange-icon { background: #fd7e14; color: white; }
-.green-icon { background: #20c997; color: white; }
-.purple-icon { background: #6f42c1; color: white; }
-.blue-icon { background: #0ea5e9; color: white; }
-
-.button-text {
-    text-align: right;
-    line-height: 1.3;
-    flex: 1;
-    margin-right: 1rem;
+.suggestion-button svg {
+    width: 20px;
+    height: 20px;
+    margin-left: 10px;
 }
 
 @media (max-width: 480px) {
     .chatbot-name, .main-title { font-size: 1.5rem; }
-    .action-button-welcome { padding: 1.2rem; font-size: 0.85rem; min-height: 60px; }
-    .button-icon { width: 36px; height: 36px; font-size: 1.2rem; }
+    .suggestion-button { padding: 10px 14px; font-size: 14px; }
 }
 
 #image-gallery-modal {
@@ -1277,7 +1275,6 @@ input:checked + .slider:before {
     to { opacity: 1; transform: translateY(0); }
 }
 
-/* START: New Loading Animation for Free WS Chat */
 .ws-loading-container .dots {
   display: flex;
   gap: 8px;
@@ -1308,4 +1305,49 @@ input:checked + .slider:before {
     transform: translateY(-8px);
   }
 }
-/* END: New Loading Animation for Free WS Chat */
+
+/* Premium Feature Animation */
+@keyframes premium-glow-pulse {
+  0%, 100% {
+    transform: scale(1);
+    box-shadow: 0 0 8px rgba(167, 139, 250, 0.4);
+  }
+  50% {
+    transform: scale(1.05);
+    box-shadow: 0 0 20px rgba(167, 139, 250, 0.8);
+  }
+}
+
+.animate-premium-lock > * {
+  animation: premium-glow-pulse 0.8s ease-in-out;
+}
+
+.premium-locked-item {
+  position: relative;
+}
+
+.premium-required-notice {
+    position: absolute;
+    bottom: -28px;
+    left: 50%;
+    transform: translateX(-50%) translateY(10px);
+    background-color: #1f2937;
+    color: #f9fafb;
+    padding: 4px 10px;
+    border-radius: 6px;
+    font-size: 0.75rem;
+    white-space: nowrap;
+    opacity: 0;
+    transition: all 0.3s ease-out;
+    pointer-events: none;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+}
+.dark .premium-required-notice {
+    background-color: #f9fafb;
+    color: #1f2937;
+}
+
+.premium-locked-item.show-notice .premium-required-notice {
+  opacity: 1;
+  transform: translateX(-50%) translateY(0);
+}