Update static/styles.css

static/styles.css

@@ -1,234 +1,205 @@
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
-
-
-
-body {
-    font-family: Arial, sans-serif;
-    background-color: #181818; /* Dark background */
-    color: #e0e0e0; /* Light text color */
-    height: 100vh;
-
-
-}
-.Luna{
-    padding: 10px;
-    margin-left: 35px;
- }
- a:link, a:visited {
-    text-decoration: none;
-    color: #e0e0e0;
-    display: inline-block;
-  }
-  
-  a:hover, a:active {
-    color:blueviolet;
-  }
-.chat-container {
-
-    margin: 10px 20px 30px 40px;
-    height: 89vh;
-    width: 192vh;
-    background-color: #242424; /* Dark background */
-    border-radius: 12px;
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
-    display: flex;
-    flex-direction: column;
-}
-
-.chat-header {
-    padding: 1rem;
-    border-bottom: 1px solid #444; /* Darker separator */
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.bot-profile {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-}
-
-.bot-avatar {
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-}
-
-.bot-name {
-    font-weight: bold;
-    font-size: 1.1rem;
-    color: #f0f2f5; /* Light text */
-}
-
-.voice-controls {
-    display: flex;
-    gap: 10px;
-}
-
-.voice-button {
-    background: none;
-    border: none;
-    cursor: pointer;
-    padding: 8px;
-    border-radius: 50%;
-    transition: background-color 0.3s;
-    color: #f0f2f5; /* Light text */
-}
-
-.voice-button:hover {
-    background-color: #444; /* Dark hover */
-}
-
-.chat-messages {
-    flex: 1;
-    overflow-y: auto;
-    padding: 1rem;
-}
-
-.message {
-    margin-bottom: 1rem;
-    display: flex;
-    align-items: flex-start;
-    gap: 10px;
-}
-
-.message.user {
-    flex-direction: row-reverse;
-}
-
-.message-content {
-    max-width: 70%;
-    padding: 0.8rem;
-    border-radius: 12px;
-    position: relative;
-    font-size: 20px;
-}
-
-.user .message-content {
-    background-color: #006acc; /* Blue background */
-    color: white;
-    border-radius: 18px 18px 4px 18px;
-}
-
-.bot .message-content {
-    background-color: #333; /* Dark message background */
-    color: #f0f2f5; /* Light text */
-    border-radius: 18px 18px 18px 4px;
-}
-
-.chat-input-container {
-    padding: 1rem;
-    border-top: 1px solid #444; /* Dark separator */
-    position: relative;
-}
-
-.chat-input-container textarea {
-    width: 100%;
-    padding: 0.8rem 80px 0.8rem 1rem;
-    border: 1px solid #444; /* Dark border */
-    border-radius: 20px;
-    resize: none;
-    height: 50px;
-    font-size: 1rem;
-    background-color: #333; /* Dark background for input */
-    color: #f0f2f5; /* Light text */
-}
-
-.input-buttons {
-    position: absolute;
-    right: 1.5rem;
-    bottom: 1.7rem;
-    display: flex;
-    gap: 8px;
-}
-
-.voice-input-button, .send-button {
-    background: none;
-    border: none;
-    cursor: pointer;
-    padding: 8px;
-    color: #006acc; /* Blue color */
-    transition: color 0.3s;
-}
-
-.voice-input-button:hover, .send-button:hover {
-    color: #004a77; /* Darker blue on hover */
-}
-
-.message-avatar {
-    width: 36px;
-    height: 36px;
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    float: right;
-    display: none;
-}
-
-.message-avatar i {
-    font-size: 1.2rem;
-    color: #006acc; /* Blue icon */
-}
-
-/* Add these styles to your existing CSS */
-.message-speaker {
-    background: none;
-    border: none;
-    color: #006acc;
-    cursor: pointer;
-    padding: 4px;
-    margin-left: 8px;
-    transition: color 0.3s;
-}
-
-.message-speaker:hover {
-    color: #004a77;
-}
-
-.message-speaker.speaking i {
-    color: #ff4444;
-}
-
-.user-message .message-avatar i {
-    color: #f0f2f5; /* Light icon for user messages */
-}
-
-.listening .fa-microphone {
-    color: #ff4444;
-    animation: pulse 1.5s infinite;
-}
-
-@keyframes pulse {
-    0% { transform: scale(1); }
-    50% { transform: scale(1.2); }
-    100% { transform: scale(1); }
-}
-
-.typing-indicator {
-    display: flex;
-    gap: 4px;
-    padding: 8px;
-}
-
-.typing-dot {
-    width: 8px;
-    height: 8px;
-    background-color: #90949c; /* Gray typing dots */
-    border-radius: 50%;
-    animation: typing 1.4s infinite ease-in-out;
-}
-
-.typing-dot:nth-child(1) { animation-delay: 200ms; }
-.typing-dot:nth-child(2) { animation-delay: 300ms; }
-.typing-dot:nth-child(3) { animation-delay: 400ms; }
-
-@keyframes typing {
-    0%, 100% { transform: translateY(0); }
-    50% { transform: translateY(-10px); }
-}
+/* Base styles */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: Arial, sans-serif;
+    background-color: #181818;
+    color: #e0e0e0;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+/* Chat container */
+.chat-container {
+    margin: 20px auto;
+    width: 95%;
+    max-width: 1200px;
+    height: 90vh;
+    background-color: #242424;
+    border-radius: 12px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+    display: flex;
+    flex-direction: column;
+}
+
+/* Messages section */
+.chat-messages {
+    flex: 1;
+    overflow-y: auto;
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+}
+
+.message {
+    display: flex;
+    align-items: flex-start;
+    margin-bottom: 1rem;
+    width: 100%;
+}
+
+.message.user {
+    justify-content: flex-end;
+}
+
+.message-content {
+    max-width: 70%;
+    padding: 0.8rem;
+    border-radius: 12px;
+    font-size: clamp(14px, 2vw, 20px);
+    word-wrap: break-word;
+}
+
+.user .message-content {
+    background-color: #006acc;
+    color: white;
+    border-radius: 18px 18px 4px 18px;
+}
+
+.bot .message-content {
+    background-color: #333;
+    color: #f0f2f5;
+    border-radius: 18px 18px 18px 4px;
+}
+
+/* Input section */
+.chat-input-container {
+    padding: 1rem;
+    border-top: 1px solid #444;
+    position: relative;
+}
+
+.chat-input-container textarea {
+    width: 100%;
+    padding: 0.8rem 60px 0.8rem 1rem;
+    border: 1px solid #444;
+    border-radius: 20px;
+    resize: none;
+    height: 50px;
+    font-size: clamp(14px, 1.5vw, 16px);
+    background-color: #333;
+    color: #f0f2f5;
+}
+
+/* Header section */
+.chat-header {
+    padding: 1rem;
+    border-bottom: 1px solid #444;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.bot-profile {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.bot-avatar {
+    width: clamp(30px, 4vw, 40px);
+    height: clamp(30px, 4vw, 40px);
+    border-radius: 50%;
+}
+
+.bot-name {
+    font-weight: bold;
+    font-size: clamp(16px, 2vw, 1.1rem);
+    color: #f0f2f5;
+}
+
+/* Responsive adjustments */
+@media screen and (max-width: 768px) {
+    .chat-container {
+        margin: 10px;
+        width: calc(100% - 20px);
+        height: calc(100vh - 20px);
+    }
+
+    .message-content {
+        max-width: 85%;
+    }
+
+    .input-buttons {
+        right: 1rem;
+        bottom: 1.5rem;
+    }
+}
+
+@media screen and (max-width: 480px) {
+    .chat-container {
+        margin: 5px;
+        width: calc(100% - 10px);
+        border-radius: 8px;
+    }
+
+    .message-content {
+        max-width: 90%;
+        padding: 0.6rem;
+    }
+
+    .chat-header {
+        padding: 0.8rem;
+    }
+
+    .chat-input-container {
+        padding: 0.8rem;
+    }
+
+    .voice-controls {
+        gap: 5px;
+    }
+
+    .input-buttons {
+        gap: 5px;
+    }
+}
+
+/* Button styles */
+.input-buttons {
+    position: absolute;
+    right: 1.5rem;
+    bottom: 1.7rem;
+    display: flex;
+    gap: 8px;
+}
+
+.voice-input-button, 
+.send-button {
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 8px;
+    color: #006acc;
+    transition: color 0.3s;
+}
+
+.voice-input-button:hover, 
+.send-button:hover {
+    color: #004a77;
+}
+
+/* Animation styles */
+.typing-indicator {
+    display: flex;
+    gap: 4px;
+    padding: 8px;
+}
+
+.typing-dot {
+    width: 8px;
+    height: 8px;
+    background-color: #90949c;
+    border-radius: 50%;
+    animation: typing 1.4s infinite ease-in-out;
+}
+
+@keyframes typing {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-10px); }
+}