@syncfusion/blazor-themes 27.1.50 → 27.1.52

package/SCSS-Themes/material3.scss

@@ -35289,13 +35289,11 @@ $slider-button-vup-bg-image:  none !default;
           @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'Material3') {
             @include alignment(6px, calc(50% - 3px), 'vertical');
           }
-          @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' ) {
-            @if ($skin-name == 'tailwind') {
-              left: calc(50%);
-            }
-            @else {
-              @include alignment(4px, calc(50% - 2px), 'vertical');
-            }
+          @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' ) {
+            @include alignment(4px, calc(50% - 2px), 'vertical');
+          }
+          @if ($skin-name == 'tailwind') {
+            @include alignment(4px, calc(50%), 'vertical');
           }
           @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
             @include alignment(6px, calc(50% - 3px), 'vertical');
@@ -41003,7 +41001,7 @@ $radio-btn-focus-outline: $radio-btn-background-color 0 solid !default;
         }
 
         &::before {
-          @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
+          @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' {
             background-color: $radio-btn-disabled-not-checked-bg-color;
           }
           @else {
@@ -43110,6 +43108,10 @@ $listview-template-focused-multiline-content-color: rgba($content-text-color-sel
         }
       }
 
+      &.e-virtualization .e-list-container{
+        overflow: unset;
+      }
+
       & .e-list-container {
         overflow: hidden;
         position: relative;
@@ -66181,6 +66183,10 @@ $ddl-chip-bigger-content-padding: 0 !default;
   display: block;
 }
 
+.e-multiselect.e-input-group.e-control-wrapper:not(.e-control-container) .e-multi-select-wrapper.e-down-icon .e-chips-collection {
+  margin-right: 30px;
+}
+
 .e-multi-select-wrapper .e-multi-hidden {
   border: 0;
   height: 0;
@@ -83555,7 +83561,12 @@ $grid-checkmark-color: rgba($primary-text-color) !default;
       /* stylelint-enable */
 
       .e-dlg-content {
-        padding: 24px 27px;
+        @if $grid-skin == 'fluent2' {
+          padding: 24px 27px;
+        }
+        @else {
+          padding: 8px 16px 8px 8px;
+        }
         overflow-y: hidden;
       }
 
@@ -84410,7 +84421,7 @@ $grid-checkmark-color: rgba($primary-text-color) !default;
   }
 
   .e-grid-popup {
-    position: relative;
+    position: absolute;
   }
 
   #{&}.e-grid,
@@ -85455,6 +85466,7 @@ $grid-checkmark-color: rgba($primary-text-color) !default;
       .e-filterbarcell,
       .e-filterbarcelldisabled {
         border-width: $grid-filtercell-both-border-width;
+        border-top-width: 1px;
       }
     }
 
@@ -86730,6 +86742,12 @@ $grid-checkmark-color: rgba($primary-text-color) !default;
       padding: $grid-columnchooser-toolbardiv-padding;
     }
 
+    &:not(.sf-grid) .e-toolbar-item.e-cc.e-ccdiv.e-cc-toolbar {
+      @if $grid-skin == 'fluent' {
+        padding-bottom: 1px;
+      }
+    }
+
     .e-edit-dialog {
       min-height: 350px;
       .e-dlg-content {
@@ -87423,6 +87441,7 @@ $grid-checkmark-color: rgba($primary-text-color) !default;
         .e-filterbarcell,
         .e-filterbarcelldisabled {
           border-width: $grid-filtercell-both-border-width;
+          border-top-width: 1px;
         }
   
         .e-rowcell,
@@ -87544,14 +87563,17 @@ $grid-checkmark-color: rgba($primary-text-color) !default;
     }
 
     &.e-wrap {
-      & .e-gridheader .e-rowcell,
-      & .e-gridcontent .e-rowcell,
+      & .e-rowcell,
       & .e-columnheader .e-stackedheadercelldiv,
       & .e-columnheader .e-headercelldiv,
       & .e-columnheader .e-headercell.e-fltr-icon .e-headercelldiv {
         @include wrap-styles;
       }
 
+      & .e-cloneproperties.e-draganddrop.e-grid .e-rowcell {
+        white-space: nowrap;
+      }
+
       & .e-stackedheader .e-columnheader {
         .e-stackedheadercelldiv,
         .e-headercelldiv {
@@ -88109,7 +88131,8 @@ $grid-checkmark-color: rgba($primary-text-color) !default;
 }
 
 @if $grid-skin == 'fluent2' {
-  .e-grid-menu.e-grid-column-menu.e-contextmenu-wrapper .e-ul .e-menu-item {
+  .e-grid-menu.e-grid-column-menu.e-contextmenu-wrapper .e-ul .e-menu-item,
+  .e-grid-menu.e-contextmenu-container .e-ul .e-menu-item {
     padding: 0 6px;
   }
   .e-grid-menu.e-grid-column-menu .e-colmenu.e-contextmenu {
@@ -89023,7 +89046,8 @@ $grid-checkmark-color: rgba($primary-text-color) !default;
   }
 
   @if $grid-skin == 'fluent2' {
-    .e-grid-menu .e-menu-item.e-focused .e-css.e-checkbox-wrapper .e-label {
+    .e-grid-menu .e-menu-item.e-focused .e-css.e-checkbox-wrapper .e-label,
+    .e-grid-menu .e-menu-item.e-focused .e-wrapper.e-checkbox-wrapper .e-label {
       color: $flyout-text-color-hover;
     }
   }
@@ -92855,6 +92879,11 @@ $treegrid-rtl-rowdd-childborder-width: 2px 0 2px 0 !default;
       &.e-wrap .e-rowcell .e-treecolumn-container .e-treecell {
         @include grid-wrap;
       }
+      &.e-wrap .e-cloneproperties .e-rowcell .e-treecolumn-container .e-treecell {
+        display: inline-block;
+        white-space: nowrap;
+        word-wrap: break-word;
+      }
 
       &.e-wrap .e-rowcell .e-treecheckbox-container .e-treecheckbox {
         @include grid-wrap;
@@ -120217,13 +120246,17 @@ $pivotpager-string-maindiv-font-color: rgba($content-text-color-alt1) !default;
         background: $pivotgrid-grp-bg-color;
       }
 
-      .e-toolbar-item .e-tbar-btn.e-btn {
-
-        .e-icons.e-btn-icon {
-          @if ($skin-name !='bootstrap5') and ($skin-name !='tailwind') and ($skin-name !='FluentUI') and ($skin-name !='Material3') {
-            font-size: 16px;
+      .e-toolbar-item {
+        .e-tbar-btn.e-btn {
+          .e-icons.e-btn-icon {
+            @if ($skin-name !='bootstrap5') and ($skin-name !='tailwind') and ($skin-name !='FluentUI') and ($skin-name !='Material3') {
+              font-size: 16px;
+            }
           }
         }
+        &.e-disabled {
+          pointer-events: none;
+        }
       }
 
       .e-pivot-toolbar-menu {
@@ -137131,6 +137164,8 @@ $aiassist-header-height: 50px !default;
 $aiassist-icon-height: 30px !default;
 $aiassist-icon-width: 30px !default;
 $send-icon-size: 16px !default;
+$send-icon-bottom: 7px !default;
+$send-icon-bigger-bottom: 11px !default;
 $aiassist-bigger-header-height: 58px !default;
 $aiassist-bigger-icon-height: 40px !default;
 $aiassist-bigger-icon-width: 40px !default;
@@ -137171,63 +137206,86 @@ $rating-selected-bg-color: rgba($rating-selected-color) !default;
 $send-icon-color: rgba($icon-color) !default;
 $send-icon-disabled-color: $icon-color-disabled !default;
 $prompt-text-border-color: rgba($content-bg-color) !default;
+$tbar-header-btn-focus-box-shadow: $shadow-focus-ring1 !default;
+$tbar-header-hover-bg-color: transparent !default;
 
 @include export-module('aiassistview-bigger') {
   .e-bigger.e-aiassistview,
   .e-bigger .e-aiassistview {
     .e-view-header {
       height: $aiassist-bigger-header-height;
+      .e-toolbar {
+        .e-toolbar-items {
+          .e-toolbar-left {
+            height: calc($aiassist-bigger-header-height - 1px);
+          }
+          .e-toolbar-item {
+            &.e-assist-view-header,
+            &.e-custom-view-header {
+              @if ($skin-name == 'highcontrast') {
+                // To apply box-shadow styling during keyboard navigation
+                padding: 1.5px;
+              }
+              @else {
+                padding: 0;
+              }
+              .e-tbar-btn {
+                padding: 0;
+                .e-btn-icon {
+                  padding: 4px 4px 4px 2px;
+                }
+              }
+            }
+          }
+        }
+      }
     }
     .e-view-content {
       height: calc(100% - $aiassist-bigger-header-height);
     }
-    .e-views {
-      .e-prompt-icon {
-        min-height: $aiassist-bigger-icon-height;
-      }
-      .e-output-icon {
-        height: $aiassist-bigger-icon-height;
-      }
-      .e-prompt-icon,
-      .e-output-icon {
-        min-width: $aiassist-bigger-icon-width;
-      }
-      .e-loading-body,
-      .e-content-body,
-      .e-loading-footer {
-        padding: 2px 0 0 10px;
-      }
-      .e-content-container {
-        font-size: 16px;
-        .e-prompt-text {
-          padding: $prompt-text-bigger-padding;
-          line-height: 22px;
-        }
+    .e-prompt-icon {
+      min-height: $aiassist-bigger-icon-height;
+    }
+    .e-output-icon {
+      height: $aiassist-bigger-icon-height;
+    }
+    .e-prompt-icon,
+    .e-output-icon {
+      min-width: $aiassist-bigger-icon-width;
+    }
+    .e-loading-body,
+    .e-content-body,
+    .e-loading-footer {
+      padding: 6px 0 0 6px;
+    }
+    .e-prompt-text {
+      padding: $prompt-text-bigger-padding;
+      line-height: 22px;
+    }
+    .e-content-container {
+      font-size: 16px;
+    }
+    .e-suggestion-header {
+      font-size: 16px;
+      font-weight: $suggesstions-header-bigger-font-weight;
+      margin-bottom: 15px;
+    }
+    .e-suggestions {
+      &.e-suggestion-item-template ul li {
+        padding: 0;
       }
-      .e-suggestions {
-        &.e-suggestion-item-template ul li {
-          padding: 0;
-        }
-        .e-suggestion-header {
-          font-size: 16px;
-          font-weight: $suggesstions-header-bigger-font-weight;
-          margin-bottom: 15px;
-        }
-        ul {
-          li {
-            line-height: 22px;
-            font-weight: $suggesstions-bigger-font-weight;
-            padding: $suggesstions-bigger-list-padding;
-            margin: $suggesstions-bigger-list-margin;
-          }
-        }
+      li {
+        line-height: 22px;
+        font-weight: $suggesstions-bigger-font-weight;
+        padding: $suggesstions-bigger-list-padding;
+        margin: $suggesstions-bigger-list-margin;
       }
     }
+    .e-assist-send {
+      font-size: $send-icon-size-bigger;
+      bottom: $send-icon-bigger-bottom;
+    }
     .e-footer {
-      .e-assist-send {
-        font-size: $send-icon-size-bigger;
-        bottom: 9px;
-      }
       .e-input-group.e-control-wrapper.e-multi-line-input {
         .e-textarea {
           min-height: 38px;
@@ -137236,6 +137294,11 @@ $prompt-text-border-color: rgba($content-bg-color) !default;
             min-height: 28px;
           }
         }
+        &.e-rtl .e-textarea {
+          @if $theme-name == 'Material3' or $theme-name == 'material' or $theme-name == 'Material3-dark' or $theme-name == 'material-dark' {
+            padding: 6px 16px 6px 12px;
+          }
+        }
       }
     }
     .e-stop-response.e-btn-active {
@@ -137247,13 +137310,24 @@ $prompt-text-border-color: rgba($content-bg-color) !default;
       font-size: $response-stopper-bigger-font-size;
     }
     &.e-rtl {
-      .e-views {
-        .e-suggestions {
-          li {
-            margin: $suggesstions-bigger-list-margin-rtl;
+      .e-view-header .e-toolbar-item {
+        &.e-assist-view-header,
+        &.e-custom-view-header {
+          .e-tbar-btn .e-btn-icon {
+            padding: 4px 2px 4px 4px;
           }
         }
       }
+      .e-suggestions {
+        li {
+          margin: $suggesstions-bigger-list-margin-rtl;
+        }
+      }
+      .e-loading-body,
+      .e-content-body,
+      .e-loading-footer {
+        padding: 6px 6px 0 0;
+      }
     }
   }
 }
@@ -137281,14 +137355,29 @@ $prompt-text-border-color: rgba($content-bg-color) !default;
           width: 100%;
           border-radius: 4px;
         }
-        .e-tbar-btn {
-          padding: 0;
+        &.e-assist-view-header,
+        &.e-custom-view-header {
+          @if ($skin-name == 'highcontrast') {
+            // To apply box-shadow styling during keyboard navigation
+            padding: 1px;
+          }
+          @else {
+            padding: 0;
+          }
+          .e-tbar-btn {
+            padding: 0;
+            .e-btn-icon {
+              padding: 4px 4px 4px 2px;
+            }
+          }
+        }
+        &.e-active .e-btn {
+          cursor: pointer;
         }
       }
-    }
-    .e-view-header .e-toolbar-item.e-active .e-btn {
-      border-radius: 0;
-      cursor: pointer;
+      .e-toolbar .e-toolbar-items .e-toolbar-left {
+        height: calc($aiassist-header-height - 1px);
+      }
     }
     .e-view-container,
     .e-footer {
@@ -137338,36 +137427,94 @@ $prompt-text-border-color: rgba($content-bg-color) !default;
       }
       .e-toolbar .e-toolbar-item.e-assist-view-header .e-tbar-btn .e-tbar-btn-text,
       .e-toolbar .e-toolbar-item.e-custom-view-header .e-tbar-btn .e-tbar-btn-text {
-        @if $theme-name == 'highcontrast' {
-          padding: 6px 0 6px 5px;
-        }
-        @else {
-          padding: 6px 0 6px 2px;
-        }
+        padding: 6px 2px;
       }
     }
-    .e-views {
+    .e-output-container {
+      width: 90%;
       display: flex;
-      justify-content: space-around;
-      .e-output-container {
-        width: 90%;
-        display: flex;
-        align-self: flex-start;
-        margin: 10px 0;
+      align-self: flex-start;
+      margin: 10px 0;
+    }
+    .e-prompt-icon {
+      margin: 0 0 0 8px;
+      min-height: $aiassist-icon-height;
+    }
+    .e-output-icon {
+      height: $aiassist-icon-height;
+      margin: 0 4px 0 8px;
+    }
+    .e-prompt-icon,
+    .e-output-icon {
+      border-radius: 50%;
+      min-width: $aiassist-icon-width;
+    }
+    .e-loading-body,
+    .e-content-body,
+    .e-loading-footer {
+      padding: 2px 0 0 6px;
+    }
+    .e-content-container {
+      margin-top: 16px;
+      font-size: 14px;
+      justify-content: space-between;
+    }
+    .e-prompt-text {
+      white-space: pre-wrap;
+      height: fit-content;
+      border-radius: $prompt-text-border-radius;
+      padding: $prompt-text-padding;
+      line-height: 20px;
+    }
+    .e-content-footer,
+    .e-prompt-toolbar {
+      opacity: 0;
+    }
+    .e-prompt-container {
+      gap: 2px;
+      align-self: flex-end;
+      max-width: 70%;
+      margin-bottom: 5px;
+      flex-direction: column;
+      &:hover .e-assist-edit-icon {
+        opacity: 1;
+        cursor: pointer;
       }
-      .e-prompt-icon {
-        margin: 0 8px;
-        min-height: $aiassist-icon-height;
+    }
+    .e-suggestion-header {
+      font-size: 14px;
+      font-weight: $suggesstions-header-font-weight;
+      margin: 0 2px 8px 8px;
+      text-align: right;
+    }
+    .e-suggestions {
+      width: 100%;
+      &.e-suggestion-item-template li {
+        padding: 0;
       }
-      .e-output-icon {
-        height: $aiassist-icon-height;
-        margin-left: 10px;
+      ul {
+        list-style-type: none;
+        padding: 0;
+        margin: 0;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: end;
       }
-      .e-prompt-icon,
-      .e-output-icon {
-        border-radius: 50%;
-        min-width: $aiassist-icon-width;
+      li {
+        line-height: 20px;
+        font-weight: $suggesstions-font-weight;
+        padding: $suggesstions-list-padding;
+        margin: $suggesstions-list-margin;
+        border-radius: $suggesstions-list-border-radius;
+        cursor: pointer;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
+    }
+    .e-views {
+      display: flex;
+      justify-content: space-around;
       .e-content-body {
         line-height: 25px;
         border-radius: 4px;
@@ -137453,85 +137600,36 @@ $prompt-text-border-color: rgba($content-bg-color) !default;
       .e-content-body > *:first-child {
         margin-block-start: 0;
       }
-      .e-loading-body,
-      .e-content-body,
-      .e-loading-footer {
-        padding: 2px 0 0 8px;
-      }
-      .e-content-footer,
-      .e-prompt-toolbar {
-        opacity: 0;
-      }
-      .e-content-container {
-        margin-top: 16px;
-        font-size: 14px;
-        justify-content: space-between;
-        .e-prompt-text {
-          white-space: pre-wrap;
-          height: fit-content;
-          border-radius: $prompt-text-border-radius;
-          padding: $prompt-text-padding;
-          margin-right: 2px;
-          line-height: 20px;
-        }
-      }
-      .e-suggestions {
-        width: 100%;
-        &.e-suggestion-item-template li {
-          padding: 0;
-        }
-        .e-suggestion-header {
-          font-size: 14px;
-          font-weight: $suggesstions-header-font-weight;
-          margin: 0 2px 8px 8px;
-          text-align: right;
-        }
-        ul {
-          list-style-type: none;
-          padding: 0;
-          margin: 0;
-          display: flex;
-          flex-wrap: wrap;
-          justify-content: end;
-        }
-        li {
-          line-height: 20px;
-          font-weight: $suggesstions-font-weight;
-          padding: $suggesstions-list-padding;
-          margin: $suggesstions-list-margin;
-          border-radius: $suggesstions-list-border-radius;
-          cursor: pointer;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-        }
-      }
-      .e-prompt-container {
-        gap: 2px;
-        align-self: flex-end;
-        max-width: 70%;
-        margin-bottom: 5px;
-        flex-direction: column;
-        &:hover .e-assist-edit-icon {
-          opacity: 1;
-          cursor: pointer;
-        }
-      }
     }
     .e-views,
     .e-custom-view,
-    .e-aiassist-view-content-section {
+    .e-assistview-content-section {
       height: 100%;
-      overflow-y: scroll;
+      overflow: scroll;
       &::-webkit-scrollbar {
         width: $ai-assist-scrollbar-width;
+        height: $ai-assist-scrollbar-width;
       }
       &::-webkit-scrollbar-thumb {
         border-radius: 10px;
       }
     }
-    .e-content {
-      margin-right: 8px;
+    .e-assist-send {
+      position: absolute;
+      right: 20px;
+      font-size: $send-icon-size;
+      bottom: $send-icon-bottom;
+      padding-top: 2px;
+    }
+    .e-assist-send.disabled {
+      pointer-events: none;
+      opacity: .5;
+      cursor: not-allowed;
+    }
+    .e-assist-send.enabled {
+      pointer-events: auto;
+      opacity: 1;
+      cursor: pointer;
     }
     .e-footer {
       position: relative;
@@ -137550,23 +137648,6 @@ $prompt-text-border-color: rgba($content-bg-color) !default;
       .hide-scrollbar textarea {
         scrollbar-width: none;
       }
-      .e-assist-send {
-        position: absolute;
-        right: 20px;
-        font-size: $send-icon-size;
-        bottom: 8px;
-        padding-top: 2px;
-      }
-      .e-assist-send.disabled {
-        pointer-events: none;
-        opacity: .5;
-        cursor: not-allowed;
-      }
-      .e-assist-send.enabled {
-        pointer-events: auto;
-        opacity: 1;
-        cursor: pointer;
-      }
       &:has(.e-rtl) .e-assist-send {
         right: unset;
         left: 20px;
@@ -137578,6 +137659,13 @@ $prompt-text-border-color: rgba($content-bg-color) !default;
       .e-multi-line-input.e-rtl {
         padding-left: 35px;
         padding-right: unset;
+        &.e-input-group.e-control-wrapper {
+          .e-textarea {
+            @if $theme-name == 'Material3' or $theme-name == 'material' or $theme-name == 'Material3-dark' or $theme-name == 'material-dark' {
+              padding: 4px 12px 4px 8px;
+            }
+          }
+        }
       }
       .e-input-group.e-multi-line-input {
         @if $theme-name == 'Material3' or $theme-name == 'material' or $theme-name == 'Material3-dark' or $theme-name == 'material-dark' {
@@ -137659,16 +137747,24 @@ $prompt-text-border-color: rgba($content-bg-color) !default;
       outline: 1px solid;
     }
     &.e-rtl {
-      .e-views {
-        .e-suggestions {
-          .e-suggestion-header {
-            text-align: left;
-            margin: 0 8px 8px 2px;
-          }
-          li {
-            margin: $suggesstions-list-margin-rtl;
+      .e-view-header .e-toolbar-item {
+        &.e-assist-view-header,
+        &.e-custom-view-header {
+          .e-tbar-btn .e-btn-icon {
+            padding: 4px 2px 4px 4px;
           }
         }
+      }
+      .e-suggestion-header {
+        text-align: left;
+        margin: 0 8px 8px 2px;
+      }
+      .e-suggestions {
+        li {
+          margin: $suggesstions-list-margin-rtl;
+        }
+      }
+      .e-views {
         .e-content-body {
           blockquote {
             padding-left: unset;
@@ -137683,6 +137779,17 @@ $prompt-text-border-color: rgba($content-bg-color) !default;
           }
         }
       }
+      .e-loading-body,
+      .e-content-body,
+      .e-loading-footer {
+        padding: 2px 6px 0 0;
+      }
+      .e-prompt-icon {
+        margin: 0 8px 0 0;
+      }
+      .e-output-icon {
+        margin: 0 8px 0 4px;
+      }
     }
   }
   @media (max-width: 760px) {
@@ -137691,12 +137798,14 @@ $prompt-text-border-color: rgba($content-bg-color) !default;
       .e-footer {
         width: 100%;
       }
-      .e-view-container .e-suggestions {
+      .e-view-container .e-suggestions,
+      .e-prompt-content {
         padding-right: 8px;
       }
       &.e-rtl {
-        .e-view-container .e-suggestions {
-          padding-left: 8px;
+        .e-view-container .e-suggestions,
+        .e-prompt-content {
+          padding: 0 0 0 8px;
         }
       }
     }
@@ -137734,26 +137843,55 @@ $prompt-text-border-color: rgba($content-bg-color) !default;
         }
         .e-tbar-btn {
           background: transparent;
+          &:focus {
+            box-shadow: none;
+          }
+          &:focus-visible {
+            box-shadow: $tbar-header-btn-focus-box-shadow;
+            @if ($skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark') {
+              background: $tbar-header-hover-bg-color;
+            }
+          }
         }
       }
     }
-    .e-views {
-      .e-prompt-icon,
-      .e-output-icon {
-        border: 1px solid $icon-border-color;
-        color: $user-logo-color;
-        background-color: $user-logo-bg-color;
-      }
-      .e-prompt-text {
-        background: $suggested-content-bg-color;
+    .e-suggestion-header {
+      color: $suggesstions-header-color;
+    }
+    .e-suggestions {
+      li {
         color: $suggested-content-text-color;
+        box-shadow: $suggestion-li-box-shadow;
         @if ($skin-name == 'bootstrap5.3') {
           border: none;
         }
         @else {
-          border: 1px solid $prompt-text-border-color;
+          border: 1px solid $suggestion-li-border-color;
         }
       }
+    }
+    .e-prompt-icon,
+    .e-output-icon {
+      border: 1px solid $icon-border-color;
+      color: $user-logo-color;
+      @if ($skin-name == 'Material3' or $skin-name == 'Material3-dark') {
+        background: $user-logo-bg-color;
+      }
+      @else {
+        background-color: $user-logo-bg-color;
+      }
+    }
+    .e-prompt-text {
+      background: $suggested-content-bg-color;
+      color: $suggested-content-text-color;
+      @if ($skin-name == 'bootstrap5.3') {
+        border: none;
+      }
+      @else {
+        border: 1px solid $prompt-text-border-color;
+      }
+    }
+    .e-views {
       .e-content-body {
         color: $response-text-color;
         a {
@@ -137793,21 +137931,6 @@ $prompt-text-border-color: rgba($content-bg-color) !default;
           color: rgba(255, 212, 212, 1);
         }
       }
-      .e-suggestions {
-        .e-suggestion-header {
-          color: $suggesstions-header-color;
-        }
-        li {
-          color: $suggested-content-text-color;
-          box-shadow: $suggestion-li-box-shadow;
-          @if ($skin-name == 'bootstrap5.3') {
-            border: none;
-          }
-          @else {
-            border: 1px solid $suggestion-li-border-color;
-          }
-        }
-      }
     }
     .e-stop-response {
       border-color: $response-stopper-border-color;
@@ -137817,21 +137940,21 @@ $prompt-text-border-color: rgba($content-bg-color) !default;
     }
     .e-views,
     .e-custom-view,
-    .e-aiassist-view-content-section {
+    .e-assistview-content-section {
       &::-webkit-scrollbar-thumb {
         background: $scrollbar-color;
       }
     }
+    .e-assist-send {
+      color: $send-icon-color;
+      &.disabled {
+        color: $send-icon-disabled-color;
+      }
+    }
     .e-footer {
       textarea::-webkit-scrollbar-thumb {
         background: $scrollbar-color;
       }
-      .e-assist-send {
-        color: $send-icon-color;
-        &.disabled {
-          color: $send-icon-disabled-color;
-        }
-      }
       // To override the default border style of the textarea component for the Material and Material3 themes.
       .e-input-group.e-multi-line-input {
         @if $theme-name == 'Material3' or $theme-name == 'material' or $theme-name == 'Material3-dark' or $theme-name == 'material-dark' {