Improved cursor and multiline input field.

public/css/style.css

@@ -259,6 +259,7 @@ cap {
     transition: opacity 0.5s;
 }
 
+
 /*
   Class applied to all choices
   (Will always appear inside <p> element by default.)
@@ -579,6 +580,13 @@ ol.choice {
     width: 100%;
     position: relative;
     margin-top: 10px;
+    transition: opacity 0.5s ease; /* Add transition for fading effect */
+}
+
+/* Fade out command input when loading */
+#command_input.fading {
+    opacity: 0.3;
+    pointer-events: none; /* Prevent interaction while faded out */
 }
 
 /* Input wrapper for positioning cursor */
@@ -586,9 +594,12 @@ ol.choice {
     position: relative;
     width: 100%;
     display: inline-block;
+    min-height: 1.5em; /* Minimum height for one line */
+    max-height: 6em; /* Maximum height - about 4 lines */
+    overflow: visible; /* Changed from 'auto' to 'visible' to hide scrollbars when not needed */
 }
 
-/* Player input styling */
+/* Player input styling - now a textarea for multiline support */
 #player_input {
     width: 100%;
     background: transparent;
@@ -601,10 +612,11 @@ ol.choice {
     padding: 5px 0;
     caret-color: transparent; /* Hide the default caret */
     box-sizing: border-box;
-}
-
-#player_input:focus {
-    border-bottom-color: #333;
+    resize: none; /* Disable manual resizing */
+    overflow: hidden; /* Hide all scrollbars */
+    line-height: 1.2; /* Match paragraph line height */
+    height: auto; /* Allow height to adjust */
+    min-height: 1.5em; /* Ensure minimum height */
 }
 
 /* Custom cursor styling */
@@ -618,12 +630,14 @@ ol.choice {
     left: 0;
     animation: blink 1s step-end infinite;
     pointer-events: none; /* Allow clicks to pass through to the input */
+    z-index: 1; /* Ensure cursor appears above text */
 }
 
-/* Placeholder styling - lighter and italic */
+/* Placeholder styling - lighter and italic, with padding to avoid cursor overlap */
 #player_input::placeholder {
     color: #aaa;
     font-style: italic;
+    padding-left: 15px; /* Add padding to move placeholder text to the right */
 }
 
 /* Blinking animation */
@@ -631,3 +645,13 @@ ol.choice {
     0%, 100% { opacity: 1; }
     50% { opacity: 0; }
 }
+
+/* Fade-in animation for input area */
+@keyframes fadeInInput {
+    from { opacity: 0.3; }
+    to { opacity: 1; }
+}
+
+.fade-in-input {
+    animation: fadeInInput 0.5s ease forwards;
+}