Upload style.css with huggingface_hub

style.css

@@ -6,7 +6,7 @@
 
 body {
     font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    background: #f0f2f5;
     min-height: 100vh;
     display: flex;
     align-items: center;
@@ -18,8 +18,8 @@ body {
     width: 100%;
     max-width: 900px;
     background: white;
-    border-radius: 20px;
-    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     overflow: hidden;
     display: flex;
     flex-direction: column;
@@ -28,17 +28,19 @@ body {
 }
 
 header {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    color: white;
-    padding: 20px;
+    background: white;
+    color: #1c1e21;
+    padding: 16px 20px;
     display: flex;
     justify-content: space-between;
     align-items: center;
+    border-bottom: 1px solid #e4e6eb;
 }
 
 header h1 {
-    font-size: 24px;
-    font-weight: 600;
+    font-size: 20px;
+    font-weight: 700;
+    color: #1877f2;
 }
 
 .model-info {
@@ -48,11 +50,12 @@ header h1 {
 }
 
 .model-badge {
-    background: rgba(255, 255, 255, 0.2);
+    background: #e7f3ff;
+    color: #1877f2;
     padding: 5px 12px;
-    border-radius: 20px;
+    border-radius: 16px;
     font-size: 12px;
-    font-weight: 500;
+    font-weight: 600;
 }
 
 .device-toggle {
@@ -80,7 +83,7 @@ header h1 {
     left: 0;
     right: 0;
     bottom: 0;
-    background-color: rgba(255, 255, 255, 0.3);
+    background-color: #b0b3b8;
     transition: 0.3s;
     border-radius: 24px;
 }
@@ -98,7 +101,7 @@ header h1 {
 }
 
 input:checked + .slider {
-    background-color: #4CAF50;
+    background-color: #1877f2;
 }
 
 input:checked + .slider:before {
@@ -112,7 +115,8 @@ input:disabled + .slider {
 
 #deviceLabel {
     font-size: 12px;
-    font-weight: 500;
+    font-weight: 600;
+    color: #65676b;
 }
 
 .chat-container {
@@ -131,7 +135,7 @@ input:disabled + .slider {
 .welcome-message {
     text-align: center;
     padding: 40px 20px;
-    color: #666;
+    color: #65676b;
 }
 
 .welcome-icon {
@@ -140,8 +144,9 @@ input:disabled + .slider {
 }
 
 .welcome-message h2 {
-    color: #333;
+    color: #1c1e21;
     margin-bottom: 10px;
+    font-weight: 700;
 }
 
 .message {
@@ -156,32 +161,34 @@ input:disabled + .slider {
 }
 
 .avatar {
-    width: 36px;
-    height: 36px;
+    width: 32px;
+    height: 32px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 20px;
+    font-size: 18px;
     flex-shrink: 0;
+    background: #e4e6eb;
 }
 
 .message-content {
     max-width: 70%;
-    padding: 12px 16px;
+    padding: 8px 12px;
     border-radius: 18px;
-    line-height: 1.5;
+    line-height: 1.4;
     word-wrap: break-word;
+    font-size: 15px;
 }
 
 .message.user .message-content {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    background: #1877f2;
     color: white;
 }
 
 .message.assistant .message-content {
-    background: #f1f3f5;
-    color: #333;
+    background: #e4e6eb;
+    color: #1c1e21;
 }
 
 .message.error .message-content {
@@ -200,8 +207,8 @@ input:disabled + .slider {
 .typing-dots {
     display: flex;
     gap: 4px;
-    padding: 12px 16px;
-    background: #f1f3f5;
+    padding: 8px 12px;
+    background: #e4e6eb;
     border-radius: 18px;
     width: fit-content;
 }
@@ -209,7 +216,7 @@ input:disabled + .slider {
 .typing-dots span {
     width: 8px;
     height: 8px;
-    background: #999;
+    background: #65676b;
     border-radius: 50%;
     animation: typing 1.4s infinite;
 }
@@ -223,8 +230,8 @@ input:disabled + .slider {
 }
 
 .input-container {
-    padding: 20px;
-    border-top: 1px solid #e0e0e0;
+    padding: 16px 20px;
+    border-top: 1px solid #e4e6eb;
     background: white;
 }
 
@@ -236,37 +243,39 @@ input:disabled + .slider {
 
 #userInput {
     flex: 1;
-    padding: 12px;
-    border: 2px solid #e0e0e0;
-    border-radius: 12px;
+    padding: 10px 12px;
+    border: 1px solid #ccd0d5;
+    border-radius: 20px;
     font-size: 15px;
     resize: none;
     outline: none;
-    transition: border-color 0.3s;
+    transition: border-color 0.2s;
     max-height: 120px;
-    line-height: 1.5;
+    line-height: 1.4;
+    background: #f0f2f5;
 }
 
 #userInput:focus {
-    border-color: #667eea;
+    border-color: #1877f2;
+    background: white;
 }
 
 .send-button {
-    width: 44px;
-    height: 44px;
+    width: 36px;
+    height: 36px;
     border-radius: 50%;
     border: none;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    background: #1877f2;
     color: white;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
-    transition: transform 0.2s, opacity 0.2s;
+    transition: background 0.2s, opacity 0.2s;
 }
 
 .send-button:hover:not(:disabled) {
-    transform: scale(1.05);
+    background: #166fe5;
 }
 
 .send-button:disabled {
@@ -284,22 +293,23 @@ input:disabled + .slider {
 
 #charCount {
     font-size: 12px;
-    color: #999;
+    color: #65676b;
 }
 
 .clear-button {
     font-size: 12px;
-    color: #666;
+    color: #1877f2;
     background: none;
     border: none;
     cursor: pointer;
     padding: 4px 8px;
-    border-radius: 4px;
+    border-radius: 6px;
     transition: background 0.2s;
+    font-weight: 600;
 }
 
 .clear-button:hover {
-    background: #f1f3f5;
+    background: #e7f3ff;
 }
 
 .init-loader {
@@ -318,36 +328,39 @@ input:disabled + .slider {
 }
 
 .spinner {
-    width: 50px;
-    height: 50px;
-    border: 4px solid #f3f3f3;
-    border-top: 4px solid #667eea;
+    width: 48px;
+    height: 48px;
+    border: 3px solid #e4e6eb;
+    border-top: 3px solid #1877f2;
     border-radius: 50%;
     animation: spin 1s linear infinite;
     margin: 0 auto 20px;
 }
 
 .loader-content p {
-    color: #333;
+    color: #1c1e21;
     margin-bottom: 8px;
+    font-weight: 600;
 }
 
 .loader-subtext {
-    font-size: 14px;
-    color: #666;
+    font-size: 13px;
+    color: #65676b;
+    font-weight: 400;
 }
 
 .notification {
     position: fixed;
     top: 20px;
     right: 20px;
-    padding: 12px 20px;
+    padding: 12px 16px;
     border-radius: 8px;
     background: white;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.1);
     transform: translateX(400px);
     transition: transform 0.3s;
     z-index: 2000;
+    font-size: 14px;
 }
 
 .notification.show {
@@ -355,15 +368,15 @@ input:disabled + .slider {
 }
 
 .notification.success {
-    border-left: 4px solid #4CAF50;
+    border-left: 4px solid #42b883;
 }
 
 .notification.error {
-    border-left: 4px solid #f44336;
+    border-left: 4px solid #f02849;
 }
 
 .notification.info {
-    border-left: 4px solid #2196F3;
+    border-left: 4px solid #1877f2;
 }
 
 @keyframes fadeIn {