Update

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

@@ -3,27 +3,117 @@
   display: flex;
   justify-content: center;
 
+  #dragOverlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.2s ease-in-out;
+
+    &.show {
+      opacity: 1;
+      pointer-events: all;
+    }
+
+    .method {
+      width: 800px;
+      height: 200px;
+      background: var(--tui-background-accent-1-hover);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+      gap: 15px;
+
+      .icon-holder {
+        border-radius: 50%;
+        background: var(--tui-background-accent-1);
+        padding: 20px;
+
+        tui-icon {
+          font-size: 50px;
+        }
+      }
+
+      span {
+        font-size: 20px;
+        font-weight: 600;
+      }
+    }
+  }
+
   #message-box {
+    transition: all 0.2s ease-in-out;
     width: 60%;
     background: var(--tui-background-base-alt);
-    height: 75px;
-    border-radius: 200px;
+    min-height: 75px;
+    max-height: 200px;
     border: 2px solid var(--tui-border-normal);
     display: grid;
-    grid-template-columns: 10% 80% 10%;
+    grid-template-columns: 85px 1fr 100px;
     align-items: center;
     padding: 0 10px;
 
+    .items-left, .items-middle, .items-right {
+      display: flex;
+      align-items: center;
+    }
+
+    .items-left, .items-right {
+      button {
+        height: 30px;
+        width: 30px;
+
+        tui-icon {
+          font-size: 20px;
+        }
+      }
+    }
+
     .items-middle {
+      ::-webkit-scrollbar-thumb {
+        background: transparent;
+        border-radius: 10px;
+      }
+
+      position: relative;
+
       textarea {
         width: 100%;
-        height: 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;
     }
   }
 }