Update public/style.css

public/style.css

@@ -6,75 +6,71 @@
 
 body {
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
-    height: 100vh;
-    overflow: hidden;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    min-height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 20px;
 }
 
 .container {
-    display: flex;
-    height: 100vh;
-    max-width: 1400px;
-    margin: 0 auto;
+    max-width: 900px;
+    width: 100%;
     background: white;
-    box-shadow: 0 0 20px rgba(0,0,0,0.1);
+    border-radius: 20px;
+    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
+    overflow: hidden;
+    animation: fadeIn 0.5s ease;
 }
 
-/* الشريط الجانبي */
-.sidebar {
-    width: 280px;
-    background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);
-    border-left: 1px solid #dee2e6;
-    display: flex;
-    flex-direction: column;
-    padding: 20px;
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(-20px); }
+    to { opacity: 1; transform: translateY(0); }
 }
 
-.logo {
+.header {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    padding: 25px;
     text-align: center;
-    padding-bottom: 20px;
-    border-bottom: 2px solid #dee2e6;
-    margin-bottom: 20px;
 }
 
-.logo h2 {
-    color: #2c3e76;
+.header h1 {
+    font-size: 1.8em;
     margin-bottom: 5px;
 }
 
-.logo p {
-    color: #6c757d;
-    font-size: 12px;
+.header p {
+    opacity: 0.9;
+    font-size: 0.9em;
 }
 
-.mode-selector {
-    flex: 1;
-}
-
-.mode-selector h3 {
-    margin-bottom: 15px;
-    color: #495057;
-    font-size: 16px;
+.mode-buttons {
+    display: flex;
+    gap: 15px;
+    padding: 15px 20px;
+    background: #f8f9fa;
+    border-bottom: 1px solid #e0e0e0;
 }
 
 .mode-btn {
-    width: 100%;
+    flex: 1;
     padding: 12px;
-    margin-bottom: 10px;
     border: none;
-    border-radius: 10px;
+    border-radius: 12px;
     cursor: pointer;
-    transition: all 0.3s ease;
-    text-align: right;
     font-weight: bold;
+    font-size: 1em;
+    transition: all 0.3s ease;
     display: flex;
     flex-direction: column;
     gap: 5px;
+    align-items: center;
 }
 
 .mode-btn small {
-    font-size: 11px;
-    font-weight: normal;
+    font-size: 0.75em;
     opacity: 0.8;
 }
 
@@ -85,7 +81,7 @@ body {
 
 .mode-btn.flash:hover, .mode-btn.flash.active {
     background: #ffc107;
-    transform: translateX(-5px);
+    transform: translateY(-2px);
     box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);
 }
 
@@ -96,80 +92,37 @@ body {
 
 .mode-btn.pro:hover, .mode-btn.pro.active {
     background: #357abd;
-    transform: translateX(-5px);
+    transform: translateY(-2px);
     box-shadow: 0 4px 12px rgba(74, 144, 226, 0.3);
 }
 
-.info {
-    padding-top: 20px;
-    border-top: 1px solid #dee2e6;
-    font-size: 14px;
-}
-
-.mode-info, .token-info {
-    margin-bottom: 10px;
-    display: flex;
-    justify-content: space-between;
-}
-
-.token-info {
-    font-size: 12px;
-    color: #6c757d;
-}
-
-/* منطقة الشات */
-.chat-area {
-    flex: 1;
+.chat-container {
     display: flex;
     flex-direction: column;
-    background: white;
-}
-
-.chat-header {
-    padding: 15px 20px;
-    border-bottom: 1px solid #e0e0e0;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    background: #f8f9fa;
-}
-
-.clear-btn {
-    background: #dc3545;
-    color: white;
-    border: none;
-    padding: 8px 15px;
-    border-radius: 6px;
-    cursor: pointer;
-    transition: all 0.3s;
-}
-
-.clear-btn:hover {
-    background: #c82333;
-    transform: scale(0.95);
+    height: 500px;
 }
 
 .chat-messages {
     flex: 1;
     overflow-y: auto;
     padding: 20px;
-    background: #ffffff;
+    background: #f0f2f5;
 }
 
 .message {
     display: flex;
-    margin-bottom: 20px;
+    margin-bottom: 15px;
     animation: slideIn 0.3s ease;
 }
 
 @keyframes slideIn {
     from {
         opacity: 0;
-        transform: translateY(20px);
+        transform: translateX(20px);
     }
     to {
         opacity: 1;
-        transform: translateY(0);
+        transform: translateX(0);
     }
 }
 
@@ -177,62 +130,48 @@ body {
     flex-direction: row-reverse;
 }
 
-.message-avatar {
+.avatar {
     width: 40px;
     height: 40px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 24px;
+    font-size: 20px;
     margin: 0 10px;
 }
 
-.message.user .message-avatar {
+.message.user .avatar {
     background: #4a90e2;
+    color: white;
 }
 
-.message.bot .message-avatar {
-    background: #f0f0f0;
+.message.bot .avatar {
+    background: #e0e0e0;
 }
 
-.message-content {
+.content {
     max-width: 70%;
-    background: #f8f9fa;
-    border-radius: 15px;
+    background: white;
     padding: 12px 16px;
-    position: relative;
+    border-radius: 15px;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
+    line-height: 1.5;
 }
 
-.message.user .message-content {
+.message.user .content {
     background: #4a90e2;
     color: white;
 }
 
-.message-text {
-    line-height: 1.5;
-}
-
-/* حاوية التفكير */
 .thought-container {
     background: #fff3e0;
     border-right: 4px solid #ff9800;
     padding: 15px;
     margin: 10px 0;
     border-radius: 10px;
-    position: relative;
-    animation: fadeIn 0.5s ease;
-}
-
-@keyframes fadeIn {
-    from {
-        opacity: 0;
-        max-height: 0;
-    }
-    to {
-        opacity: 1;
-        max-height: 500px;
-    }
+    font-style: italic;
+    color: #5a3e1b;
 }
 
 .thought-header {
@@ -240,84 +179,78 @@ body {
     align-items: center;
     gap: 8px;
     margin-bottom: 10px;
-    color: #ff9800;
     font-weight: bold;
-    font-size: 14px;
-}
-
-.thought-icon {
-    font-size: 18px;
-}
-
-.thought-content {
-    color: #5a3e1b;
-    font-style: italic;
-    line-height: 1.6;
-    white-space: pre-wrap;
-}
-
-.regular-content {
-    white-space: pre-wrap;
-    line-height: 1.5;
+    color: #ff9800;
 }
 
-/* منطقة الإدخال */
 .input-area {
-    padding: 20px;
-    border-top: 1px solid #e0e0e0;
     display: flex;
     gap: 10px;
-    background: #f8f9fa;
+    padding: 15px 20px;
+    background: white;
+    border-top: 1px solid #e0e0e0;
 }
 
-#userInput {
+textarea {
     flex: 1;
     padding: 12px;
     border: 2px solid #e0e0e0;
-    border-radius: 10px;
+    border-radius: 12px;
     font-family: inherit;
     font-size: 14px;
     resize: none;
     transition: all 0.3s;
 }
 
-#userInput:focus {
+textarea:focus {
     outline: none;
-    border-color: #4a90e2;
-    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
+    border-color: #764ba2;
+    box-shadow: 0 0 0 3px rgba(118, 75, 162, 0.1);
 }
 
-.send-btn {
-    background: #4a90e2;
+button {
+    padding: 12px 24px;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     color: white;
     border: none;
-    padding: 0 20px;
-    border-radius: 10px;
+    border-radius: 12px;
     cursor: pointer;
     font-weight: bold;
     transition: all 0.3s;
-    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 8px;
 }
 
-.send-btn:hover {
-    background: #357abd;
+button:hover {
     transform: translateY(-2px);
-    box-shadow: 0 4px 12px rgba(74, 144, 226, 0.3);
-}
-
-.shortcut {
-    font-size: 12px;
-    opacity: 0.8;
-    margin-right: 8px;
+    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
 }
 
-.status {
+.status-bar {
     padding: 10px 20px;
-    font-size: 12px;
+    background: #f8f9fa;
+    font-size: 0.85em;
     color: #6c757d;
+    text-align: center;
     border-top: 1px solid #e0e0e0;
 }
 
+.loading {
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    border: 3px solid #f3f3f3;
+    border-top: 3px solid #764ba2;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
 /* شريط التمرير */
 .chat-messages::-webkit-scrollbar {
     width: 8px;
@@ -332,17 +265,12 @@ body {
     border-radius: 4px;
 }
 
-.chat-messages::-webkit-scrollbar-thumb:hover {
-    background: #555;
-}
-
-/* Responsive */
-@media (max-width: 768px) {
-    .sidebar {
-        width: 200px;
+@media (max-width: 600px) {
+    .content {
+        max-width: 85%;
     }
     
-    .message-content {
-        max-width: 85%;
+    .mode-btn small {
+        display: none;
     }
 }