structure adjustment

lib/app/communications/style.scss

@@ -1,5 +1,3 @@
-@import '../../../css/variables/definition.scss';
-
 .popup-mask .wrapper-edit-method {
     width: 100%;
 
@@ -46,11 +44,12 @@
             }
         }
 
-        &.disabled {
+        &.disabled,
+        &:disabled {
             fill: lightgray;
             background-color: transparent !important;
 
-            &:hover {
+            &:hover>svg {
                 opacity: unset;
             }
         }
@@ -95,7 +94,7 @@
         line-height: 24px;
         display: flex;
         align-items: center;
-        font-size: 1.2em;
+        font-size: var(--font-larger-size);
 
         >div {
             flex: 1 1 auto;
@@ -186,7 +185,7 @@
                 >span {
                     // flex: 1 1 auto;
                     color: var(--strong-color);
-                    font-size: var(--font-larger-size);
+                    font-size: var(--font-size);
                     white-space: nowrap;
                     overflow: hidden;
                     text-overflow: ellipsis;
@@ -216,6 +215,8 @@
             border: none;
             height: 70px;
             resize: none;
+            font-size: var(--font-smaller-size);
+            font-family: var(--font-family);
 
             &:focus,
             &:focus-visible {
@@ -226,9 +227,26 @@
         >div {
             padding: 0 10px 10px;
 
+            >.customer-name {
+                float: left;
+
+                >span {
+                    font-size: var(--font-smaller-size);
+                }
+
+                >.ui-input {
+                    margin-left: 4px;
+                    width: 150px;
+                    border-top: none;
+                    border-left: none;
+                    border-right: none;
+                }
+            }
+
             >.prompt-count {
                 display: inline-block;
                 color: var(--light-color);
+                font-size: var(--font-smaller-size);
             }
         }
     }
@@ -246,7 +264,7 @@
             white-space: normal;
             word-break: break-word;
             overflow: hidden;
-            font-size: .8125rem;
+            font-size: var(--font-size);
             color: #333;
             display: flex;
             flex-direction: column;
@@ -257,6 +275,7 @@
 
             .item-poster {
                 font-weight: bold;
+                font-size: var(--font-size);
                 align-self: flex-start;
 
                 .tooltip-wrapper>.tooltip-content {
@@ -293,7 +312,7 @@
                     margin-top: 3px;
                     font-weight: bold;
                     margin-right: -12px;
-                    font-size: 10px;
+                    font-size: .625rem;
                     float: right;
                 }
             }
@@ -301,7 +320,7 @@
             .item-time {
                 align-self: flex-end;
                 color: #aaa;
-                font-size: .7rem;
+                font-size: .6875rem;
             }
 
             &.item-other {