Update style.css

style.css

@@ -11,14 +11,14 @@ body {
   flex-direction: column;
 }
 
-/* Auth container */
+/* Authentication screen */
 #auth-container {
   background: white;
   border-radius: 12px;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
   padding: 40px 30px;
   text-align: center;
-  width: 320px;
+  width: 340px;
 }
 
 #auth-container h2 {
@@ -45,6 +45,19 @@ body {
   background: #0056b3;
 }
 
+#auth-status {
+  text-align: left;
+  font-size: 12px;
+  color: #333;
+  margin-top: 15px;
+  background: #f9f9f9;
+  border: 1px solid #ddd;
+  padding: 10px;
+  border-radius: 8px;
+  max-height: 200px;
+  overflow-y: auto;
+}
+
 /* Chat container */
 #chat-container {
   width: 80%;
@@ -69,7 +82,7 @@ body {
   flex-direction: column;
 }
 
-/* Individual message styles */
+/* Message styles */
 .message {
   margin: 8px 0;
   padding: 10px 14px;
@@ -93,7 +106,7 @@ body {
   border-bottom-left-radius: 2px;
 }
 
-/* Chat input area */
+/* Chat input */
 #chat-input {
   display: flex;
   gap: 10px;
@@ -144,7 +157,7 @@ button:hover {
   border-radius: 3px;
 }
 
-/* Simple fade-in animation */
+/* Animation */
 @keyframes fadeIn {
   from { opacity: 0; transform: translateY(5px); }
   to { opacity: 1; transform: translateY(0); }