Create styles.css

styles.css

@@ -0,0 +1,160 @@
+body {
+    font-family: Arial, sans-serif;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+    background-color: #121212;
+}
+
+.chat-container {
+    width: 360px;
+    height: 540px;
+    border: 1px solid #333;
+    border-radius: 12px;
+    background-color: #1e1e1e;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
+    animation: fadeIn 0.5s ease-in;
+}
+
+.chat-box {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+    padding: 15px;
+    border-bottom: 1px solid #333;
+    position: relative;
+}
+
+.messages {
+    display: flex;
+    flex-direction: column;
+    transition: opacity 0.3s ease-in-out;
+}
+
+.message {
+    padding: 10px 15px;
+    border-radius: 10px;
+    margin-bottom: 8px;
+    max-width: 80%;
+    word-wrap: break-word;
+    color: #f5f5f5;
+    opacity: 0;
+    animation: fadeInMessage 0.5s ease-in forwards;
+}
+
+.user-message {
+    align-self: flex-end;
+    background-color: #4caf50;
+    border: 1px solid #388e3c;
+}
+
+.bot-message {
+    align-self: flex-start;
+    background-color: #2196f3;
+    border: 1px solid #1976d2;
+}
+
+.input-area {
+    display: flex;
+    padding: 12px;
+    border-top: 1px solid #333;
+    background-color: #1e1e1e;
+}
+
+input[type="text"] {
+    flex: 1;
+    padding: 12px;
+    border: 1px solid #333;
+    border-radius: 20px;
+    margin-right: 12px;
+    background-color: #333;
+    color: #f5f5f5;
+    outline: none;
+    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
+    transition: border-color 0.3s ease;
+}
+
+input[type="text"]::placeholder {
+    color: #888;
+}
+
+input[type="text"]:focus {
+    border-color: #f5f5f5;
+}
+
+button {
+    padding: 12px 18px;
+    border: none;
+    border-radius: 20px;
+    background-color: #ff5722;
+    color: white;
+    cursor: pointer;
+    font-size: 16px;
+    transition: background-color 0.3s ease, transform 0.2s ease;
+}
+
+button:hover {
+    background-color: #e64a19;
+    transform: scale(1.05);
+}
+
+.typing-indicator {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 10px;
+}
+
+.typing-indicator .dot {
+    width: 10px;
+    height: 10px;
+    margin: 0 4px;
+    background-color: #888;
+    border-radius: 50%;
+    animation: typing 1.4s infinite ease-in-out;
+}
+
+.typing-indicator .dot:nth-child(2) {
+    animation-delay: 0.2s;
+}
+
+.typing-indicator .dot:nth-child(3) {
+    animation-delay: 0.4s;
+}
+
+@keyframes typing {
+    0%, 100% {
+        opacity: 0.2;
+    }
+    50% {
+        opacity: 1;
+    }
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes fadeInMessage {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}