Update static/style.css

static/style.css

@@ -104,15 +104,14 @@ html,body{
   display:flex;
   align-items:center;
   justify-content:center;
+  overflow:hidden;
   box-shadow:0 0 0 6px rgba(23,184,176,0.06);
 }
 
 .avatar_img{
-  font-size:1.7rem;
+  font-size:1.5rem;
+  line-height:1;
   color:var(--teal);
-  display:flex;
-  align-items:center;
-  justify-content:center;
 }
 
 .avatar_status{
@@ -360,6 +359,22 @@ html,body{
   padding:3px;
 }
 
+.user_avatar,
+.bot_avatar{
+  width:32px;
+  height:32px;
+  border-radius:50%;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  font-size:0.8rem;
+  background:var(--surface);
+  border:1px solid var(--border);
+}
+
+.user_avatar{ color:var(--text-dim); }
+.bot_avatar{ color:var(--teal); }
+
 .msg_cotainer,
 .msg_cotainer_send{
   max-width:68%;
@@ -446,6 +461,7 @@ html,body{
 
 .type_msg{
   flex:1 1 auto;
+  min-width:0;
   border:none;
   outline:none;
   background:transparent;
@@ -453,6 +469,7 @@ html,body{
   font-family:'Inter', sans-serif;
   color:var(--text);
   padding:12px 0;
+  text-overflow:ellipsis;
 }
 
 .type_msg::placeholder{ color:var(--text-faint); }
@@ -544,7 +561,7 @@ html,body{
   .welcome_block h3{ font-size:1rem; }
   .welcome_block p{ font-size:0.8rem; }
   .msg_cotainer, .msg_cotainer_send{ max-width:88%; padding:11px 14px; font-size:0.86rem; }
-  .img_cont_msg, .user_img_msg{ width:28px; height:28px; }
+  .img_cont_msg, .user_img_msg, .user_avatar, .bot_avatar{ width:28px; height:28px; }
   .card-footer{ padding:10px 10px max(10px, env(safe-area-inset-bottom)); }
   .input-group{ padding:4px 4px 4px 14px; }
   .send_btn{ width:38px; height:38px; }