Upload style.css

css/style.css

@@ -6,9 +6,20 @@
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
 }
 
+:root {
+    --primary-color: #0084ff;
+    --secondary-color: #e7f2ff;
+    --text-color: #333;
+    --text-light: #777;
+    --bg-color: #fff;
+    --bg-light: #f5f7f9;
+    --border-color: #eaeaea;
+    --shadow-color: rgba(0, 0, 0, 0.1);
+}
+
 body {
-    background-color: #fff;
-    color: #333;
+    background-color: var(--bg-light);
+    color: var(--text-color);
     line-height: 1.6;
 }
 
@@ -18,29 +29,9 @@ body {
     height: 100vh;
     display: flex;
     flex-direction: column;
-    background-color: #fff;
-}
-
-/* Status Bar */
-.status-bar {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 4px 16px;
-    background-color: #fff;
-    font-size: 14px;
-    height: 24px;
-}
-
-.status-icons {
-    display: flex;
-    gap: 8px;
-    align-items: center;
-}
-
-.network {
-    font-size: 12px;
-    color: #666;
+    background-color: var(--bg-color);
+    position: relative;
+    box-shadow: 0 0 20px var(--shadow-color);
 }
 
 /* Chat Header */
@@ -48,45 +39,61 @@ body {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 16px;
-    background-color: #fff;
-    border-bottom: 1px solid #eee;
+    padding: 16px 20px;
+    background-color: var(--bg-color);
+    border-bottom: 1px solid var(--border-color);
+    box-shadow: 0 2px 8px var(--shadow-color);
+    z-index: 10;
 }
 
 .chat-header h1 {
     font-size: 18px;
     font-weight: 600;
+    color: var(--text-color);
 }
 
-.menu-btn, .new-chat-btn {
+.header-actions {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.menu-btn, .new-chat-btn, .theme-toggle-btn {
     background: none;
     border: none;
-    font-size: 20px;
-    color: #666;
+    font-size: 18px;
+    color: var(--text-light);
     cursor: pointer;
     padding: 8px;
-}
-
-/* Chat Messages */
-.chat-messages {
-    flex: 1;
-    overflow-y: auto;
-    padding: 16px;
+    border-radius: 50%;
     display: flex;
-    flex-direction: column;
     align-items: center;
     justify-content: center;
+    width: 36px;
+    height: 36px;
+    transition: all 0.2s ease;
 }
 
+.menu-btn:hover, .new-chat-btn:hover, .theme-toggle-btn:hover {
+    background-color: var(--bg-light);
+    color: var(--text-color);
+}
+
+/* Welcome Message */
 .welcome-message {
     text-align: center;
-    max-width: 300px;
+    max-width: 400px;
+    padding: 24px;
+    background-color: var(--bg-color);
+    border-radius: 12px;
+    box-shadow: 0 2px 12px var(--shadow-color);
+    margin: auto;
 }
 
 .welcome-logo {
-    width: 80px;
-    height: 80px;
-    margin-bottom: 16px;
+    width: 90px;
+    height: 90px;
+    margin-bottom: 20px;
     border-radius: 50%;
     object-fit: cover;
     box-shadow: 0 2px 8px var(--shadow-color);
@@ -94,36 +101,104 @@ body {
 
 .welcome-message h2 {
     font-size: 24px;
-    margin-bottom: 8px;
-    color: #333;
+    margin-bottom: 12px;
+    color: var(--text-color);
 }
 
 .welcome-message p {
-    color: #666;
+    color: var(--text-light);
     font-size: 16px;
+    margin-bottom: 16px;
+}
+
+.context-info {
+    font-size: 13px;
+    color: var(--text-light);
+    background-color: var(--bg-light);
+    padding: 8px 12px;
+    border-radius: 8px;
+    margin-top: 16px;
+}
+
+/* Dark Theme */
+[data-theme="dark"] {
+    --primary-color: #1a91ff;
+    --secondary-color: #2c4763;
+    --text-color: #e1e1e1;
+    --text-light: #999;
+    --bg-color: #1a1a1a;
+    --bg-light: #2c2c2c;
+    --border-color: #333;
+    --shadow-color: rgba(0, 0, 0, 0.3);
+}
+
+/* Status Bar */
+.status-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 4px 16px;
+    background-color: #fff;
+    font-size: 14px;
+    height: 24px;
+}
+
+.status-icons {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+}
+
+.network {
+    font-size: 12px;
+    color: #666;
+}
+
+/* Chat Messages */
+.chat-messages {
+    flex: 1;
+    overflow-y: auto;
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+    background-color: #f5f7f9;
 }
 
 /* Chat Input */
 .chat-input {
     padding: 16px;
-    background-color: #f8f8f8;
-    border-top: 1px solid #eee;
+    background-color: #fff;
+    border-top: 1px solid #eaeaea;
+    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
 }
 
 .input-container {
-    background-color: #fff;
+    background-color: #f5f7f9;
     border-radius: 24px;
-    padding: 8px 16px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    padding: 10px 16px;
+    display: flex;
+    align-items: center;
+    transition: all 0.3s ease;
+}
+
+.input-container:focus-within {
+    background-color: #fff;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+    border: 1px solid #d0e3ff;
 }
 
 #message-input {
     width: 100%;
     border: none;
     outline: none;
-    font-size: 16px;
+    font-size: 15px;
     padding: 8px 0;
     background: transparent;
+    color: #333;
+}
+
+#message-input::placeholder {
+    color: #999;
 }
 
 .input-actions {
@@ -131,80 +206,137 @@ body {
     align-items: center;
     justify-content: flex-end;
     gap: 12px;
-    margin-top: 8px;
-    padding-top: 8px;
-    border-top: 1px solid #eee;
+    margin-left: 10px;
 }
 
 .more-btn, .send-btn {
     background: none;
     border: none;
     padding: 8px;
-    color: #666;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 14px;
+    border-radius: 50%;
+    transition: all 0.2s ease;
 }
 
-.send-btn {
-    background-color: #4285f4;
-    color: white;
-    border-radius: 50%;
+.more-btn {
+    color: #666;
     width: 32px;
     height: 32px;
 }
 
+.more-btn:hover {
+    background-color: #eaeaea;
+    color: #333;
+}
+
+.send-btn {
+    background-color: #0084ff;
+    color: white;
+    width: 36px;
+    height: 36px;
+}
+
+.send-btn:hover {
+    background-color: #0078e7;
+    transform: scale(1.05);
+}
+
+.send-btn:disabled {
+    background-color: #ccc;
+    cursor: not-allowed;
+    opacity: 0.7;
+    transform: none;
+}
+
 .send-btn i {
     font-size: 16px;
 }
 
-.more-btn {
-    color: #666;
-    transition: color 0.2s ease;
+/* Dark Theme Chat Input */
+[data-theme="dark"] .chat-input {
+    background-color: #1e1e1e;
+    border-color: #333;
+    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
 }
 
-.more-btn:hover {
-    color: #333;
+[data-theme="dark"] .input-container {
+    background-color: #2c2c2c;
+}
+
+[data-theme="dark"] .input-container:focus-within {
+    background-color: #333;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
+    border-color: #555;
+}
+
+[data-theme="dark"] #message-input {
+    color: #e1e1e1;
+}
+
+[data-theme="dark"] #message-input::placeholder {
+    color: #777;
+}
+
+[data-theme="dark"] .more-btn {
+    color: #aaa;
+}
+
+[data-theme="dark"] .more-btn:hover {
+    background-color: #444;
+    color: #fff;
 }
 
 /* Message Bubbles */
 .message {
-    margin: 16px;
-    max-width: 80%;
+    margin: 16px 0;
+    max-width: 85%;
     animation: fadeIn 0.3s ease;
+    position: relative;
+}
+
+/* User Message Styling */
+.message.user-message {
+    align-self: flex-start;
 }
 
-/* User message (question) styling */
 .question-bubble {
-    background-color: #e3f2fd;
+    background-color: #fff;
     color: #1a1a1a;
-    padding: 12px 20px;
-    border-radius: 20px;
-    margin-left: auto;
+    padding: 12px 16px;
+    border-radius: 18px;
+    border-top-left-radius: 4px;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
     font-size: 15px;
     line-height: 1.5;
+    position: relative;
+}
+
+/* Bot Message Styling */
+.message.bot-message {
+    align-self: flex-end;
 }
 
-/* Bot message (answer) styling */
 .answer-container {
     display: flex;
-    gap: 16px;
-    margin-right: auto;
-    width: 100%;
+    gap: 12px;
+    align-items: flex-start;
+    margin-left: auto;
 }
 
 .bot-icon {
     flex-shrink: 0;
-    width: 32px;
-    height: 32px;
+    width: 36px;
+    height: 36px;
     border-radius: 50%;
     overflow: hidden;
     background-color: transparent;
     display: flex;
     align-items: center;
     justify-content: center;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
 .bot-icon img {
@@ -215,25 +347,34 @@ body {
 }
 
 .answer-content {
-    flex-grow: 1;
+    background-color: #e7f2ff;
+    padding: 16px;
+    border-radius: 18px;
+    border-top-right-radius: 4px;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+    color: #333;
     font-size: 15px;
     line-height: 1.6;
-    color: #333;
+    max-width: calc(100% - 48px);
 }
 
+/* Response Formatting */
 .response-heading {
-    font-size: 24px;
+    font-size: 20px;
     font-weight: 600;
-    margin: 20px 0 15px;
+    margin: 16px 0 12px;
     color: #1a1a1a;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    padding-bottom: 8px;
 }
 
 .definition {
-    margin: 15px 0;
+    margin: 12px 0;
+    line-height: 1.6;
 }
 
 .term {
-    font-weight: 500;
+    font-weight: 600;
     color: #1a1a1a;
 }
 
@@ -242,7 +383,7 @@ body {
 }
 
 .numbered-list {
-    margin: 15px 0;
+    margin: 12px 0;
 }
 
 .list-item {
@@ -263,12 +404,14 @@ body {
 }
 
 .list-term {
-    font-weight: 500;
+    font-weight: 600;
     color: #1a1a1a;
 }
 
 .list-definition {
     color: #444;
+    display: block;
+    margin-top: 4px;
 }
 
 .response-paragraph {
@@ -276,6 +419,14 @@ body {
     color: #333;
 }
 
+/* Message Timestamp */
+.message-time {
+    font-size: 11px;
+    color: #999;
+    margin-top: 4px;
+    text-align: right;
+}
+
 /* Animations */
 @keyframes fadeIn {
     from {
@@ -288,17 +439,27 @@ body {
     }
 }
 
-/* Dark theme adjustments */
+/* Dark Theme Adjustments */
+[data-theme="dark"] .chat-messages {
+    background-color: #1a1a1a;
+}
+
 [data-theme="dark"] .question-bubble {
     background-color: #2c2c2c;
-    color: #ffffff;
+    color: #e1e1e1;
 }
 
 [data-theme="dark"] .answer-content {
+    background-color: #383838;
+    color: #e1e1e1;
+    border-color: #444;
+}
+
+[data-theme="dark"] .response-heading {
     color: #e1e1e1;
+    border-color: rgba(255, 255, 255, 0.1);
 }
 
-[data-theme="dark"] .response-heading,
 [data-theme="dark"] .term,
 [data-theme="dark"] .number,
 [data-theme="dark"] .list-term {
@@ -311,6 +472,10 @@ body {
     color: #b4b4b4;
 }
 
+[data-theme="dark"] .message-time {
+    color: #777;
+}
+
 /* Typing indicator adjustments */
 .typing-indicator {
     background: transparent !important;
@@ -522,126 +687,6 @@ body {
     margin: 8px 0;
 }
 
-/* Theme Variables */
-:root {
-    --bg-color: #fff;
-    --text-color: #333;
-    --header-bg: #fff;
-    --input-bg: #f8f8f8;
-    --border-color: #eee;
-    --message-bg: #f1f3f4;
-    --message-text: #333;
-    --user-message-bg: #4285f4;
-    --user-message-text: #fff;
-    --hover-bg: #f5f5f5;
-    --icon-color: #666;
-    --secondary-text: #666;
-    --error-bg: #ffebee;
-    --error-border: #ffcdd2;
-    --error-text: #c62828;
-    --shadow-color: rgba(0, 0, 0, 0.1);
-    --overlay-bg: rgba(0, 0, 0, 0.5);
-}
-
-/* Dark Theme */
-[data-theme="dark"] {
-    --bg-color: #1a1a1a;
-    --text-color: #fff;
-    --header-bg: #2d2d2d;
-    --input-bg: #2d2d2d;
-    --border-color: #404040;
-    --message-bg: #383838;
-    --message-text: #fff;
-    --user-message-bg: #4285f4;
-    --user-message-text: #fff;
-    --hover-bg: #404040;
-    --icon-color: #aaa;
-    --secondary-text: #aaa;
-    --error-bg: #421c1c;
-    --error-border: #692727;
-    --error-text: #ff8a8a;
-    --shadow-color: rgba(0, 0, 0, 0.3);
-    --overlay-bg: rgba(0, 0, 0, 0.7);
-}
-
-/* Apply Theme Variables */
-body {
-    background-color: var(--bg-color);
-    color: var(--text-color);
-}
-
-.chat-header {
-    background-color: var(--header-bg);
-    border-bottom: 1px solid var(--border-color);
-}
-
-.chat-input {
-    background-color: var(--input-bg);
-    border-top: 1px solid var(--border-color);
-}
-
-.input-container {
-    background-color: var(--bg-color);
-    box-shadow: 0 2px 8px var(--shadow-color);
-}
-
-#message-input {
-    color: var(--text-color);
-}
-
-.bot-message {
-    background-color: var(--message-bg);
-    color: var(--message-text);
-}
-
-.menu-content {
-    background-color: var(--bg-color);
-}
-
-/* Header Actions */
-.header-actions {
-    display: flex;
-    gap: 8px;
-    align-items: center;
-}
-
-.theme-toggle-btn {
-    background: none;
-    border: none;
-    font-size: 20px;
-    color: var(--icon-color);
-    cursor: pointer;
-    padding: 8px;
-    transition: color 0.2s ease;
-}
-
-.theme-toggle-btn:hover {
-    color: var(--text-color);
-}
-
-/* Update existing styles to use variables */
-.menu-btn, .new-chat-btn {
-    color: var(--icon-color);
-}
-
-.menu-btn:hover, .new-chat-btn:hover {
-    color: var(--text-color);
-}
-
-.welcome-message h2 {
-    color: var(--text-color);
-}
-
-.welcome-message p {
-    color: var(--secondary-text);
-}
-
-.error-message {
-    background-color: var(--error-bg);
-    color: var(--error-text);
-    border-color: var(--error-border);
-}
-
 /* Conversation Overlay Styles */
 .conversation-overlay {
     position: fixed;