3.0 Beta 2

src/app/chat/elements/message-box/message-box.scss

@@ -48,72 +48,115 @@
     }
   }
 
-  #message-box {
-    transition: all 0.2s ease-in-out;
-    width: 60%;
-    background: var(--tui-background-base-alt);
-    min-height: 75px;
-    max-height: 200px;
-    border: 2px solid var(--tui-border-normal);
-    display: grid;
-    grid-template-columns: 85px 1fr 100px;
+  main {
+    width: 100%;
+    display: flex;
     align-items: center;
-    padding: 0 10px;
+    flex-direction: column;
+    gap: 5px;
 
-    .items-left, .items-middle, .items-right {
-      display: flex;
-      align-items: center;
-    }
+    #message-box-extension {
+      transition: all 0.2s ease-in-out;
+      width: 50%;
+      border-radius: 20px;
+      background: var(--tui-background-base-alt);
+      border: 2px solid var(--tui-border-normal);
+      transform: translateY(50px);
+      display: grid;
+      grid-template-columns: 1fr 40px;
+      justify-content: center;
+      height: 0;
+
+      #content {
+        padding-left: 10px;
+        display: flex;
+        gap: 5px;
+        align-items: center;
+      }
+
+      tui-icon {
+        font-size: 13px;
+      }
 
-    .items-left, .items-right {
       button {
-        height: 30px;
+        height: 26px;
         width: 30px;
+      }
 
-        tui-icon {
-          font-size: 20px;
-        }
+      &.shown {
+        transform: translateY(0);
+        height: 30px;
       }
     }
 
-    .items-middle {
-      ::-webkit-scrollbar-thumb {
-        background: transparent;
-        border-radius: 10px;
+    #message-box {
+      z-index: 5;
+      transition: all 0.2s ease-in-out;
+      width: 60%;
+      background: var(--tui-background-base-alt);
+      min-height: 75px;
+      max-height: 200px;
+      border: 2px solid var(--tui-border-normal);
+      display: grid;
+      grid-template-columns: 85px 1fr 100px;
+      align-items: center;
+      padding: 0 10px;
+
+      .items-left, .items-middle, .items-right {
+        display: flex;
+        align-items: center;
       }
 
-      position: relative;
+      .items-left, .items-right {
+        button {
+          height: 30px;
+          width: 30px;
 
-      textarea {
-        width: 100%;
-        background: transparent;
-        border: none;
-        outline: none;
-        resize: none;
-        color: var(--tui-text-01);
-        font-size: 16px;
-        z-index: 1;
-      }
-
-      .placeholder {
-        position: absolute;
-        font-size: 16px;
-        height: 25px;
-        top: 2px;
-        left: 2px;
-        color: gray;
-        transition: all 0.2s ease-in-out;
-
-        &.hidden {
-          margin-left: 10px;
-          opacity: 0;
+          tui-icon {
+            font-size: 20px;
+          }
         }
       }
-    }
 
-    .items-right {
-      display: flex;
-      justify-content: end;
+      .items-middle {
+        ::-webkit-scrollbar-thumb {
+          background: transparent;
+          border-radius: 10px;
+        }
+
+        position: relative;
+
+        textarea {
+          width: 100%;
+          background: transparent;
+          border: none;
+          outline: none;
+          resize: none;
+          color: var(--tui-text-01);
+          font-size: 16px;
+          z-index: 1;
+        }
+
+        .placeholder {
+          position: absolute;
+          font-size: 16px;
+          height: 25px;
+          top: 2px;
+          left: 2px;
+          color: gray;
+          transition: all 0.2s ease-in-out;
+
+          &.hidden {
+            margin-left: 10px;
+            opacity: 0;
+          }
+        }
+      }
+
+      .items-right {
+        display: flex;
+        justify-content: end;
+      }
     }
   }
 }