Update chat.css

update

Author: science64

css/chat.css

@@ -977,46 +977,78 @@ select {
 
 /* Updated Chat Input Styles */
 .chat-input {
+    bottom: 0;
+    width: 100%;
+    text-align: center;
     padding: 15px 0;
+    margin: 0;
+    border: 0;
     position: relative;
 }
 
+/* Improved chat wrap sizing */
 .chat-input .chat_wrap {
     width: 90%; /* Increased from 87% */
-    margin: 0 auto; /* Centered */
-    display: flex;
+    margin: 0 auto; /* Centered instead of left-aligned */
+    box-sizing: border-box;
+    display: flex; /* Use flexbox for better alignment */
     align-items: center;
     justify-content: center;
 }
 
 /* Enhanced textarea styling */
 .chat-input textarea {
-    padding: 16px 18px; /* More horizontal padding */
+    padding: 16px 18px; /* Slightly more horizontal padding */
+    color: var(--textarea-color);
+    border: 1px solid var(--textarea-border);
+    border-right: none !important;
+    display: block;
     width: 80%; /* Increased width */
-    min-height: 55px; /* Fixed height that won't change unless JS is working */
-    font-weight: 500; /* Better readability */
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-    font-size: 15px;
-    line-height: 1.5;
+    float: left;
+    border-bottom-left-radius: 24px;
+    border-top-left-radius: 24px;
+    min-height: 55px; /* Increased base height */
+    max-height: 150px; /* Set maximum height */
+    box-sizing: border-box;
+    font-weight: 500; /* Reduced from 600 for better readability */
+    background-color: var(--textarea-bg);
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; /* Improved font stack */
+    font-size: 15px; /* Explicit font size */
+    line-height: 1.5; /* Better line spacing */
+    resize: vertical; /* Allow only vertical resizing */
+    overflow-y: auto; /* Add scrollbar when needed */
+    transition: min-height 0.2s ease; /* Smooth height transition */
 }
 
 /* Better focus state */
 .chat-input textarea:focus {
-    outline: none;
-    box-shadow: 0 0 0 2px rgba(117, 120, 225, 0.3);
+    min-height: 80px; /* Slightly taller when focused */
+}
+
+.chat-input textarea[style*="height"] {
+    transition: height 0.2s ease;
 }
 
 /* Placeholder styling */
 textarea#ta_chat::placeholder {
+    color: var(--textarea-placeholder-color);
+    font-weight: 400; /* Lighter weight for placeholder */
     opacity: 0.8;
-    font-weight: 400;
 }
 
 /* Make the records and upload container match */
 .wrap_rec_and_up {
-    min-height: 55px;
+    border: 1px solid var(--textarea-border);
+    float: left;
+    border-left: none;
+    border-bottom-right-radius: 24px;
+    border-top-right-radius: 24px;
+    min-height: 55px; /* Match textarea height */
     display: flex;
     align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    background-color: var(--textarea-bg);
 }
 
 .upload_picture {