@syncfusion/blazor-themes 28.1.36 → 28.1.37

package/SCSS-Themes/interactive-chat/chat-ui/tailwind3-dark-lite.scss

@@ -20,8 +20,10 @@ $timebreak-font-weight: 500 !default;
 $timebreak-border-radius: 6px !default;
 $typing-user-font-size: 10px !default;
 $suggestion-border-radius: 6px !default;
+$chat-suggesstion-line-height: 16px !default;
 $chat-suggesstions-list-padding: 4px 8px !default;
 
+$chat-suggesstion-bigger-line-height: 20px !default;
 $chat-suggesstions-li-padding-bigger: 6px 12px !default;
 $typing-user-font-size-bigger: 12px !default;
 $chat-text-font-size-bigger: 16px !default;
@@ -367,7 +369,7 @@ $timestamp-border-color: $chip-secondary-border-color !default;
       }
       li {
         font-size: $timebreak-font-size;
-        line-height: 16px;
+        line-height: $chat-suggesstion-line-height;
         font-weight: $suggesstions-font-weight;
         padding: $chat-suggesstions-list-padding;
         margin: 8px 4px 0;
@@ -449,6 +451,9 @@ $timestamp-border-color: $chip-secondary-border-color !default;
         }
       }
     }
+    .e-empty-chat-template {
+      margin: auto;
+    }
   }
 }
 
@@ -545,6 +550,13 @@ $timestamp-border-color: $chip-secondary-border-color !default;
     }
     .e-header-icon,
     .e-message-icon,
+    .e-user-icon {
+      border-radius: 50%;
+      background-repeat: no-repeat;
+      background-position: center center;
+      background-size: cover;
+    }
+    .e-message-icon,
     .e-user-icon {
       color: $sender-icon-color;
       @if ($skin-name == 'Material3' or $theme-name == 'Material3-dark') {
@@ -553,10 +565,6 @@ $timestamp-border-color: $chip-secondary-border-color !default;
       @else {
         background-color: $sender-icon-bg-color;
       }
-      border-radius: 50%;
-      background-repeat: no-repeat;
-      background-position: center center;
-      background-size: cover;
     }
     .e-indicator {
       background: $chat-left-bg-color;

package/SCSS-Themes/interactive-chat/chat-ui/tailwind3-dark.scss

@@ -20,8 +20,10 @@ $timebreak-font-weight: 500 !default;
 $timebreak-border-radius: 6px !default;
 $typing-user-font-size: 10px !default;
 $suggestion-border-radius: 6px !default;
+$chat-suggesstion-line-height: 16px !default;
 $chat-suggesstions-list-padding: 4px 8px !default;
 
+$chat-suggesstion-bigger-line-height: 20px !default;
 $chat-suggesstions-li-padding-bigger: 6px 12px !default;
 $typing-user-font-size-bigger: 12px !default;
 $chat-text-font-size-bigger: 16px !default;
@@ -367,7 +369,7 @@ $timestamp-border-color: $chip-secondary-border-color !default;
       }
       li {
         font-size: $timebreak-font-size;
-        line-height: 16px;
+        line-height: $chat-suggesstion-line-height;
         font-weight: $suggesstions-font-weight;
         padding: $chat-suggesstions-list-padding;
         margin: 8px 4px 0;
@@ -449,6 +451,9 @@ $timestamp-border-color: $chip-secondary-border-color !default;
         }
       }
     }
+    .e-empty-chat-template {
+      margin: auto;
+    }
   }
 }
 
@@ -545,6 +550,13 @@ $timestamp-border-color: $chip-secondary-border-color !default;
     }
     .e-header-icon,
     .e-message-icon,
+    .e-user-icon {
+      border-radius: 50%;
+      background-repeat: no-repeat;
+      background-position: center center;
+      background-size: cover;
+    }
+    .e-message-icon,
     .e-user-icon {
       color: $sender-icon-color;
       @if ($skin-name == 'Material3' or $theme-name == 'Material3-dark') {
@@ -553,10 +565,6 @@ $timestamp-border-color: $chip-secondary-border-color !default;
       @else {
         background-color: $sender-icon-bg-color;
       }
-      border-radius: 50%;
-      background-repeat: no-repeat;
-      background-position: center center;
-      background-size: cover;
     }
     .e-indicator {
       background: $chat-left-bg-color;
@@ -749,6 +757,7 @@ $timestamp-border-color: $chip-secondary-border-color !default;
       li {
         font-size: $timebreak-font-size-bigger;
         padding: $chat-suggesstions-li-padding-bigger;
+        line-height: $chat-suggesstion-bigger-line-height;
       }
     }
     &.e-rtl {

package/SCSS-Themes/interactive-chat/chat-ui/tailwind3-lite.scss

@@ -20,8 +20,10 @@ $timebreak-font-weight: 500 !default;
 $timebreak-border-radius: 6px !default;
 $typing-user-font-size: 10px !default;
 $suggestion-border-radius: 6px !default;
+$chat-suggesstion-line-height: 16px !default;
 $chat-suggesstions-list-padding: 4px 8px !default;
 
+$chat-suggesstion-bigger-line-height: 20px !default;
 $chat-suggesstions-li-padding-bigger: 6px 12px !default;
 $typing-user-font-size-bigger: 12px !default;
 $chat-text-font-size-bigger: 16px !default;
@@ -367,7 +369,7 @@ $timestamp-border-color: $chip-secondary-border-color !default;
       }
       li {
         font-size: $timebreak-font-size;
-        line-height: 16px;
+        line-height: $chat-suggesstion-line-height;
         font-weight: $suggesstions-font-weight;
         padding: $chat-suggesstions-list-padding;
         margin: 8px 4px 0;
@@ -449,6 +451,9 @@ $timestamp-border-color: $chip-secondary-border-color !default;
         }
       }
     }
+    .e-empty-chat-template {
+      margin: auto;
+    }
   }
 }
 
@@ -545,6 +550,13 @@ $timestamp-border-color: $chip-secondary-border-color !default;
     }
     .e-header-icon,
     .e-message-icon,
+    .e-user-icon {
+      border-radius: 50%;
+      background-repeat: no-repeat;
+      background-position: center center;
+      background-size: cover;
+    }
+    .e-message-icon,
     .e-user-icon {
       color: $sender-icon-color;
       @if ($skin-name == 'Material3' or $theme-name == 'Material3-dark') {
@@ -553,10 +565,6 @@ $timestamp-border-color: $chip-secondary-border-color !default;
       @else {
         background-color: $sender-icon-bg-color;
       }
-      border-radius: 50%;
-      background-repeat: no-repeat;
-      background-position: center center;
-      background-size: cover;
     }
     .e-indicator {
       background: $chat-left-bg-color;

package/SCSS-Themes/interactive-chat/chat-ui/tailwind3.scss

@@ -20,8 +20,10 @@ $timebreak-font-weight: 500 !default;
 $timebreak-border-radius: 6px !default;
 $typing-user-font-size: 10px !default;
 $suggestion-border-radius: 6px !default;
+$chat-suggesstion-line-height: 16px !default;
 $chat-suggesstions-list-padding: 4px 8px !default;
 
+$chat-suggesstion-bigger-line-height: 20px !default;
 $chat-suggesstions-li-padding-bigger: 6px 12px !default;
 $typing-user-font-size-bigger: 12px !default;
 $chat-text-font-size-bigger: 16px !default;
@@ -367,7 +369,7 @@ $timestamp-border-color: $chip-secondary-border-color !default;
       }
       li {
         font-size: $timebreak-font-size;
-        line-height: 16px;
+        line-height: $chat-suggesstion-line-height;
         font-weight: $suggesstions-font-weight;
         padding: $chat-suggesstions-list-padding;
         margin: 8px 4px 0;
@@ -449,6 +451,9 @@ $timestamp-border-color: $chip-secondary-border-color !default;
         }
       }
     }
+    .e-empty-chat-template {
+      margin: auto;
+    }
   }
 }
 
@@ -545,6 +550,13 @@ $timestamp-border-color: $chip-secondary-border-color !default;
     }
     .e-header-icon,
     .e-message-icon,
+    .e-user-icon {
+      border-radius: 50%;
+      background-repeat: no-repeat;
+      background-position: center center;
+      background-size: cover;
+    }
+    .e-message-icon,
     .e-user-icon {
       color: $sender-icon-color;
       @if ($skin-name == 'Material3' or $theme-name == 'Material3-dark') {
@@ -553,10 +565,6 @@ $timestamp-border-color: $chip-secondary-border-color !default;
       @else {
         background-color: $sender-icon-bg-color;
       }
-      border-radius: 50%;
-      background-repeat: no-repeat;
-      background-position: center center;
-      background-size: cover;
     }
     .e-indicator {
       background: $chat-left-bg-color;
@@ -749,6 +757,7 @@ $timestamp-border-color: $chip-secondary-border-color !default;
       li {
         font-size: $timebreak-font-size-bigger;
         padding: $chat-suggesstions-li-padding-bigger;
+        line-height: $chat-suggesstion-bigger-line-height;
       }
     }
     &.e-rtl {

package/SCSS-Themes/material-dark-lite.scss

@@ -55116,7 +55116,7 @@ $de-column-presets-font-size: 60px !default;
             height: 20px;
             line-height: 20px;
             min-width: 44px;
-            max-width: 150px;
+            max-width: auto;
             padding: 0px 8px;
             text-overflow: ellipsis;
             white-space: nowrap;
@@ -64974,7 +64974,7 @@ $grid-checkmark-color: $accent-font !default;
         white-space: nowrap;
       }
 
-      & .e-stackedheader .e-columnheader {
+      & .e-stackedheader .e-columnheader :not(.e-columnsheader) {
         .e-stackedheadercelldiv,
         .e-headercelldiv {
           max-height: $grid-rowcell-wrap-max-height;
@@ -72562,7 +72562,7 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
         }
       }
 
-      @if $skin-name == 'bootstrap5' {
+      @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'tailwind3' {
         .e-toolbar-extended .e-toolbar-item.e-active .e-tbar-btn.e-btn {
           padding: 0 4px;
         }
@@ -74518,7 +74518,7 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
         background: $rte-tb-item-active-bg;
         border: $rte-tb-item-active-border;
   
-        @if $skin-name == 'bootstrap5' {
+        @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'tailwind3' {
           border: 0;
         }
       }
@@ -109018,8 +109018,10 @@ $timebreak-font-weight: 400 !default;
 $timebreak-border-radius: 2px !default;
 $typing-user-font-size: 12px !default;
 $suggestion-border-radius: 2px !default;
+$chat-suggesstion-line-height: 18px !default;
 $chat-suggesstions-list-padding: 3px 8px !default;
 
+$chat-suggesstion-bigger-line-height: 22px !default;
 $chat-suggesstions-li-padding-bigger: 5px 12px !default;
 $typing-user-font-size-bigger: 14px !default;
 $chat-text-font-size-bigger: 16px !default;
@@ -109365,7 +109367,7 @@ $timestamp-border-color: $grey-800 !default;
       }
       li {
         font-size: $timebreak-font-size;
-        line-height: 16px;
+        line-height: $chat-suggesstion-line-height;
         font-weight: $suggesstions-font-weight;
         padding: $chat-suggesstions-list-padding;
         margin: 8px 4px 0;
@@ -109447,6 +109449,9 @@ $timestamp-border-color: $grey-800 !default;
         }
       }
     }
+    .e-empty-chat-template {
+      margin: auto;
+    }
   }
 }
 
@@ -109543,6 +109548,13 @@ $timestamp-border-color: $grey-800 !default;
     }
     .e-header-icon,
     .e-message-icon,
+    .e-user-icon {
+      border-radius: 50%;
+      background-repeat: no-repeat;
+      background-position: center center;
+      background-size: cover;
+    }
+    .e-message-icon,
     .e-user-icon {
       color: $sender-icon-color;
       @if ($skin-name == 'Material3' or $theme-name == 'Material3-dark') {
@@ -109551,10 +109563,6 @@ $timestamp-border-color: $grey-800 !default;
       @else {
         background-color: $sender-icon-bg-color;
       }
-      border-radius: 50%;
-      background-repeat: no-repeat;
-      background-position: center center;
-      background-size: cover;
     }
     .e-indicator {
       background: $chat-left-bg-color;

package/SCSS-Themes/material-dark.scss

@@ -74543,7 +74543,7 @@ $de-column-presets-font-size: 60px !default;
             height: 20px;
             line-height: 20px;
             min-width: 44px;
-            max-width: 150px;
+            max-width: auto;
             padding: 0px 8px;
             text-overflow: ellipsis;
             white-space: nowrap;
@@ -87174,7 +87174,7 @@ $grid-checkmark-color: $accent-font !default;
         white-space: nowrap;
       }
 
-      & .e-stackedheader .e-columnheader {
+      & .e-stackedheader .e-columnheader :not(.e-columnsheader) {
         .e-stackedheadercelldiv,
         .e-headercelldiv {
           max-height: $grid-rowcell-wrap-max-height;
@@ -98337,7 +98337,7 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
         }
       }
 
-      @if $skin-name == 'bootstrap5' {
+      @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'tailwind3' {
         .e-toolbar-extended .e-toolbar-item.e-active .e-tbar-btn.e-btn {
           padding: 0 4px;
         }
@@ -100293,7 +100293,7 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
         background: $rte-tb-item-active-bg;
         border: $rte-tb-item-active-border;
   
-        @if $skin-name == 'bootstrap5' {
+        @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'tailwind3' {
           border: 0;
         }
       }
@@ -141439,8 +141439,10 @@ $timebreak-font-weight: 400 !default;
 $timebreak-border-radius: 2px !default;
 $typing-user-font-size: 12px !default;
 $suggestion-border-radius: 2px !default;
+$chat-suggesstion-line-height: 18px !default;
 $chat-suggesstions-list-padding: 3px 8px !default;
 
+$chat-suggesstion-bigger-line-height: 22px !default;
 $chat-suggesstions-li-padding-bigger: 5px 12px !default;
 $typing-user-font-size-bigger: 14px !default;
 $chat-text-font-size-bigger: 16px !default;
@@ -141786,7 +141788,7 @@ $timestamp-border-color: $grey-800 !default;
       }
       li {
         font-size: $timebreak-font-size;
-        line-height: 16px;
+        line-height: $chat-suggesstion-line-height;
         font-weight: $suggesstions-font-weight;
         padding: $chat-suggesstions-list-padding;
         margin: 8px 4px 0;
@@ -141868,6 +141870,9 @@ $timestamp-border-color: $grey-800 !default;
         }
       }
     }
+    .e-empty-chat-template {
+      margin: auto;
+    }
   }
 }
 
@@ -141964,6 +141969,13 @@ $timestamp-border-color: $grey-800 !default;
     }
     .e-header-icon,
     .e-message-icon,
+    .e-user-icon {
+      border-radius: 50%;
+      background-repeat: no-repeat;
+      background-position: center center;
+      background-size: cover;
+    }
+    .e-message-icon,
     .e-user-icon {
       color: $sender-icon-color;
       @if ($skin-name == 'Material3' or $theme-name == 'Material3-dark') {
@@ -141972,10 +141984,6 @@ $timestamp-border-color: $grey-800 !default;
       @else {
         background-color: $sender-icon-bg-color;
       }
-      border-radius: 50%;
-      background-repeat: no-repeat;
-      background-position: center center;
-      background-size: cover;
     }
     .e-indicator {
       background: $chat-left-bg-color;
@@ -142168,6 +142176,7 @@ $timestamp-border-color: $grey-800 !default;
       li {
         font-size: $timebreak-font-size-bigger;
         padding: $chat-suggesstions-li-padding-bigger;
+        line-height: $chat-suggesstion-bigger-line-height;
       }
     }
     &.e-rtl {

package/SCSS-Themes/material-lite.scss

@@ -54847,7 +54847,7 @@ $de-column-presets-font-size: 60px !default;
             height: 20px;
             line-height: 20px;
             min-width: 44px;
-            max-width: 150px;
+            max-width: auto;
             padding: 0px 8px;
             text-overflow: ellipsis;
             white-space: nowrap;
@@ -64701,7 +64701,7 @@ $grid-checkmark-color: $accent-font !default;
         white-space: nowrap;
       }
 
-      & .e-stackedheader .e-columnheader {
+      & .e-stackedheader .e-columnheader :not(.e-columnsheader) {
         .e-stackedheadercelldiv,
         .e-headercelldiv {
           max-height: $grid-rowcell-wrap-max-height;
@@ -72287,7 +72287,7 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
         }
       }
 
-      @if $skin-name == 'bootstrap5' {
+      @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'tailwind3' {
         .e-toolbar-extended .e-toolbar-item.e-active .e-tbar-btn.e-btn {
           padding: 0 4px;
         }
@@ -74243,7 +74243,7 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
         background: $rte-tb-item-active-bg;
         border: $rte-tb-item-active-border;
   
-        @if $skin-name == 'bootstrap5' {
+        @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'tailwind3' {
           border: 0;
         }
       }
@@ -108743,8 +108743,10 @@ $timebreak-font-weight: 400 !default;
 $timebreak-border-radius: 2px !default;
 $typing-user-font-size: 12px !default;
 $suggestion-border-radius: 2px !default;
+$chat-suggesstion-line-height: 18px !default;
 $chat-suggesstions-list-padding: 3px 8px !default;
 
+$chat-suggesstion-bigger-line-height: 22px !default;
 $chat-suggesstions-li-padding-bigger: 5px 12px !default;
 $typing-user-font-size-bigger: 14px !default;
 $chat-text-font-size-bigger: 16px !default;
@@ -109090,7 +109092,7 @@ $timestamp-border-color: $grey-300 !default;
       }
       li {
         font-size: $timebreak-font-size;
-        line-height: 16px;
+        line-height: $chat-suggesstion-line-height;
         font-weight: $suggesstions-font-weight;
         padding: $chat-suggesstions-list-padding;
         margin: 8px 4px 0;
@@ -109172,6 +109174,9 @@ $timestamp-border-color: $grey-300 !default;
         }
       }
     }
+    .e-empty-chat-template {
+      margin: auto;
+    }
   }
 }
 
@@ -109268,6 +109273,13 @@ $timestamp-border-color: $grey-300 !default;
     }
     .e-header-icon,
     .e-message-icon,
+    .e-user-icon {
+      border-radius: 50%;
+      background-repeat: no-repeat;
+      background-position: center center;
+      background-size: cover;
+    }
+    .e-message-icon,
     .e-user-icon {
       color: $sender-icon-color;
       @if ($skin-name == 'Material3' or $theme-name == 'Material3-dark') {
@@ -109276,10 +109288,6 @@ $timestamp-border-color: $grey-300 !default;
       @else {
         background-color: $sender-icon-bg-color;
       }
-      border-radius: 50%;
-      background-repeat: no-repeat;
-      background-position: center center;
-      background-size: cover;
     }
     .e-indicator {
       background: $chat-left-bg-color;

package/SCSS-Themes/material.scss

@@ -74274,7 +74274,7 @@ $de-column-presets-font-size: 60px !default;
             height: 20px;
             line-height: 20px;
             min-width: 44px;
-            max-width: 150px;
+            max-width: auto;
             padding: 0px 8px;
             text-overflow: ellipsis;
             white-space: nowrap;
@@ -86901,7 +86901,7 @@ $grid-checkmark-color: $accent-font !default;
         white-space: nowrap;
       }
 
-      & .e-stackedheader .e-columnheader {
+      & .e-stackedheader .e-columnheader :not(.e-columnsheader) {
         .e-stackedheadercelldiv,
         .e-headercelldiv {
           max-height: $grid-rowcell-wrap-max-height;
@@ -98062,7 +98062,7 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
         }
       }
 
-      @if $skin-name == 'bootstrap5' {
+      @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'tailwind3' {
         .e-toolbar-extended .e-toolbar-item.e-active .e-tbar-btn.e-btn {
           padding: 0 4px;
         }
@@ -100018,7 +100018,7 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
         background: $rte-tb-item-active-bg;
         border: $rte-tb-item-active-border;
   
-        @if $skin-name == 'bootstrap5' {
+        @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'tailwind3' {
           border: 0;
         }
       }
@@ -141164,8 +141164,10 @@ $timebreak-font-weight: 400 !default;
 $timebreak-border-radius: 2px !default;
 $typing-user-font-size: 12px !default;
 $suggestion-border-radius: 2px !default;
+$chat-suggesstion-line-height: 18px !default;
 $chat-suggesstions-list-padding: 3px 8px !default;
 
+$chat-suggesstion-bigger-line-height: 22px !default;
 $chat-suggesstions-li-padding-bigger: 5px 12px !default;
 $typing-user-font-size-bigger: 14px !default;
 $chat-text-font-size-bigger: 16px !default;
@@ -141511,7 +141513,7 @@ $timestamp-border-color: $grey-300 !default;
       }
       li {
         font-size: $timebreak-font-size;
-        line-height: 16px;
+        line-height: $chat-suggesstion-line-height;
         font-weight: $suggesstions-font-weight;
         padding: $chat-suggesstions-list-padding;
         margin: 8px 4px 0;
@@ -141593,6 +141595,9 @@ $timestamp-border-color: $grey-300 !default;
         }
       }
     }
+    .e-empty-chat-template {
+      margin: auto;
+    }
   }
 }
 
@@ -141689,6 +141694,13 @@ $timestamp-border-color: $grey-300 !default;
     }
     .e-header-icon,
     .e-message-icon,
+    .e-user-icon {
+      border-radius: 50%;
+      background-repeat: no-repeat;
+      background-position: center center;
+      background-size: cover;
+    }
+    .e-message-icon,
     .e-user-icon {
       color: $sender-icon-color;
       @if ($skin-name == 'Material3' or $theme-name == 'Material3-dark') {
@@ -141697,10 +141709,6 @@ $timestamp-border-color: $grey-300 !default;
       @else {
         background-color: $sender-icon-bg-color;
       }
-      border-radius: 50%;
-      background-repeat: no-repeat;
-      background-position: center center;
-      background-size: cover;
     }
     .e-indicator {
       background: $chat-left-bg-color;
@@ -141893,6 +141901,7 @@ $timestamp-border-color: $grey-300 !default;
       li {
         font-size: $timebreak-font-size-bigger;
         padding: $chat-suggesstions-li-padding-bigger;
+        line-height: $chat-suggesstion-bigger-line-height;
       }
     }
     &.e-rtl {

package/SCSS-Themes/material3-dark-lite.scss

@@ -54835,7 +54835,7 @@ $de-column-presets-font-size: 60px !default;
             height: 20px;
             line-height: 20px;
             min-width: 44px;
-            max-width: 150px;
+            max-width: auto;
             padding: 0px 8px;
             text-overflow: ellipsis;
             white-space: nowrap;
@@ -64797,7 +64797,7 @@ $grid-checkmark-color: rgba($primary-text-color) !default;
         white-space: nowrap;
       }
 
-      & .e-stackedheader .e-columnheader {
+      & .e-stackedheader .e-columnheader :not(.e-columnsheader) {
         .e-stackedheadercelldiv,
         .e-headercelldiv {
           max-height: $grid-rowcell-wrap-max-height;
@@ -72357,7 +72357,7 @@ $rte-dialog-upload-status-progress: $info;
         }
       }
 
-      @if $skin-name == 'bootstrap5' {
+      @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'tailwind3' {
         .e-toolbar-extended .e-toolbar-item.e-active .e-tbar-btn.e-btn {
           padding: 0 4px;
         }
@@ -74313,7 +74313,7 @@ $rte-dialog-upload-status-progress: $info;
         background: $rte-tb-item-active-bg;
         border: $rte-tb-item-active-border;
   
-        @if $skin-name == 'bootstrap5' {
+        @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'tailwind3' {
           border: 0;
         }
       }
@@ -108824,8 +108824,10 @@ $timebreak-font-weight: 500 !default;
 $timebreak-border-radius: 4px !default;
 $typing-user-font-size: 12px !default;
 $suggestion-border-radius: 4px !default;
+$chat-suggesstion-line-height: 14px !default;
 $chat-suggesstions-list-padding: 5px 8px !default;
 
+$chat-suggesstion-bigger-line-height: 20px !default;
 $chat-suggesstions-li-padding-bigger: 6px 10px !default;
 $typing-user-font-size-bigger: 16px !default;
 $chat-text-font-size-bigger: 16px !default;
@@ -109171,7 +109173,7 @@ $timestamp-border-color: transparent !default;
       }
       li {
         font-size: $timebreak-font-size;
-        line-height: 16px;
+        line-height: $chat-suggesstion-line-height;
         font-weight: $suggesstions-font-weight;
         padding: $chat-suggesstions-list-padding;
         margin: 8px 4px 0;
@@ -109253,6 +109255,9 @@ $timestamp-border-color: transparent !default;
         }
       }
     }
+    .e-empty-chat-template {
+      margin: auto;
+    }
   }
 }
 
@@ -109349,6 +109354,13 @@ $timestamp-border-color: transparent !default;
     }
     .e-header-icon,
     .e-message-icon,
+    .e-user-icon {
+      border-radius: 50%;
+      background-repeat: no-repeat;
+      background-position: center center;
+      background-size: cover;
+    }
+    .e-message-icon,
     .e-user-icon {
       color: $sender-icon-color;
       @if ($skin-name == 'Material3' or $theme-name == 'Material3-dark') {
@@ -109357,10 +109369,6 @@ $timestamp-border-color: transparent !default;
       @else {
         background-color: $sender-icon-bg-color;
       }
-      border-radius: 50%;
-      background-repeat: no-repeat;
-      background-position: center center;
-      background-size: cover;
     }
     .e-indicator {
       background: $chat-left-bg-color;