tab pane styles/handling mobile/portrait, smaller changes

* tab pane in portrait mode now covers the entire viewport
* tab pane X turned into a chevron
* added divider between tab pane header and content
* changed default tab pane state to open
* added code to scroll messages back to bottom after tab pane animation
  and message input resize

ChatTwo/Http/Frontend/static/static/start.css

@@ -1,4 +1,4 @@
-/* fonts */
+/* fonts */
 @font-face {
     font-family: Lodestone;
     src: url('/files/FFXIV_Lodestone_SSF.ttf') format('truetype');
@@ -125,8 +125,12 @@ aside#tabs {
     background-color: var(--bg-sidebar);
     transition: width 250ms ease;
 
-    width: 0px;
-    &.visible { width: 200px; }
+    width: 200px;
+    &.hidden { width: 0px; }
+
+    &.no-animation {
+        transition: none;
+    }
 
     div.inner {
         width: 200px;
@@ -137,7 +141,6 @@ aside#tabs {
         display: flex;
         align-items: flex-end;
         justify-content: space-between;
-        margin-bottom: 20px;
         font-size: 1.1rem;
         font-weight: 550;
 
@@ -148,6 +151,11 @@ aside#tabs {
         }
     }
 
+    hr {
+        margin: 0.6rem 0 0.75rem;
+        border-color: var(--fg-faint);
+    }
+
     ol#tabs-list {
         margin: 0 -5px;
         padding: 0;
@@ -157,6 +165,7 @@ aside#tabs {
     li {
         padding: 3px 5px;
         color: var(--fg-faint);
+        border-radius: 3px;
 
         button {
             width: 100%;
@@ -171,9 +180,13 @@ aside#tabs {
         margin-top: 3px;
     }
 
+    li:has(button:hover) {
+        color: var(--fg);
+        background-color: rgb(from var(--bg-input) r g b / 0.5);
+    }
+
     li.active {
         color: var(--fg);
-        border-radius: 3px;
         background-color: var(--bg-input);
     }
 
@@ -187,6 +200,7 @@ aside#tabs {
 section#messages {
     position: relative;
     flex: 1;
+    min-width: 0;
     min-height: 0;
     padding: 20px;
     line-height: 1.5;
@@ -444,4 +458,15 @@ section#input {
             height: 1.5rem;
         }
     }
+
+    aside#tabs {
+        position: fixed;
+        width: 100vw;
+        height: 100vh;
+        z-index: 1000;
+
+        div.inner {
+            width: 100vw;
+        }
+    }
 }