@c8y/style 1023.0.0 → 1023.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@c8y/style",
-  "version": "1023.0.0",
+  "version": "1023.4.1",
   "license": "Apache-2.0",
   "author": "Cumulocity GmbH",
   "description": "Styles for Cumulocity IoT applications",

package/styles/_alerts.less

@@ -219,6 +219,7 @@
   right: 15px;
   left: 15px;
   z-index: 1035;
+  top: 50%;
   .alert {
     margin: 0 auto 10px;
   } // on data-explorer

package/styles/_buttons.less

@@ -18,13 +18,14 @@
   .user-select(none);
 
   // btns containing just an icon
-  > i {
+  >i {
     vertical-align: text-top;
   }
 
   &,
   &:active,
   &.active {
+
     &:focus,
     &.focus {
       outline: none;
@@ -44,23 +45,25 @@
   &.disabled,
   &[disabled],
   fieldset[disabled] & {
+
     &,
     &:hover,
     &:focus {
-      cursor: @cursor-disabled !important;
+      cursor: @cursor-disabled  !important;
       opacity: var(--c8y-root-component-opacity-disabled);
       .box-shadow(none);
     }
   }
 
   a & {
+
     &.disabled,
     fieldset[disabled] & {
       pointer-events: none; // Future-proof disabling of clicks on `<a>` elements
     }
   }
 
-  &:has(.badge){
+  &:has(.badge) {
     display: inline-flex;
     gap: 4px;
     align-items: center;
@@ -68,19 +71,19 @@
 }
 
 .btn-icon {
-  padding-left: @btn-padding-icon-horizontal!important;
-  padding-right: @btn-padding-icon-horizontal!important;
+  padding-left: @btn-padding-icon-horizontal  !important;
+  padding-right: @btn-padding-icon-horizontal  !important;
   height: @form-control-height-base;
 
   &:hover,
   &:focus,
   &:active {
-    outline: 2px solid @component-brand-primary !important;
+    outline: 2px solid @component-brand-primary  !important;
     outline-offset: -2px;
   }
 
   &:focus {
-    border-radius: @component-border-radius-focus !important;
+    border-radius: @component-border-radius-focus  !important;
     opacity: 1 !important;
   }
 }
@@ -111,27 +114,30 @@
   &.btn {
     height: @form-control-height-base;
     transition: none;
+
     .c8y-list__item &,
     .cdk-cell & {
-      height: calc(@margin-base * 5);
-      margin-top: -10px;
-      margin-bottom: -10px;
-      display: flex;
+      &:not(.c8y-list__item__body * *) {
+        height: calc(@margin-base * 5);
+        margin-top: -10px;
+        margin-bottom: -10px;
+        display: flex;
+      }
     }
   }
 
   &:hover,
   &:focus,
   &:active {
-    outline: 2px solid @component-brand-primary!important;
+    outline: 2px solid @component-brand-primary  !important;
     outline-offset: -2px;
   }
 
   &:focus {
-    border-radius: @component-border-radius-focus !important;
+    border-radius: @component-border-radius-focus  !important;
     opacity: 1 !important;
 
-    > * {
+    >* {
       outline: 0 !important;
     }
   }
@@ -195,27 +201,29 @@
       color: var(--c8y-palette-high);
     }
     &.aggregation{
-      background: var(--c8y-palette-status-warning-light);
+      background: var(--c8y-palette-status-warning-high);
       color: var(--c8y-palette-gray-10);
     }
   }
 }
 
 // spacing buttons outside btn-group
-.btn + .btn:not(.btn-block) {
+.btn+.btn:not(.btn-block) {
   margin-left: @margin-base;
 }
 
-.d-flex, .d-col{
-  > .btn + .btn:not(.btn-block) {
-    margin:0;
+.d-flex,
+.d-col {
+  >.btn+.btn:not(.btn-block) {
+    margin: 0;
   }
 }
 
 // Alternate buttons
 .btn-default {
   .button-variant(c8y-btn-default);
-  .datetime-picker &{
+
+  .datetime-picker & {
     --c8y-btn-default-background-default: var(--c8y-form-control-background-default);
   }
 }
@@ -226,13 +234,233 @@
 
 .btn-accent {
   .button-variant(c8y-btn-accent);
-  border-radius: @btn-border-radius-pill !important;
+  border-radius: @btn-border-radius-pill  !important;
 }
 
 .btn-danger {
   .button-variant(c8y-btn-danger);
 }
 
+.btn-ai {
+  .button-variant(c8y-btn-default);
+  position: relative;
+  overflow: hidden;
+  transition: all .2s ease;
+  border: 0;
+  color: @text-muted;
+
+  &::after {
+    content: "";
+    position: absolute;
+    left: 2px;
+    top: 2px;
+    width: calc(100% - 4px);
+    height: calc(100% - 4px);
+    background: var(--c8y-btn-default-background-default);
+    transition: all .2s ease;
+    border-radius: calc(@btn-border-radius-base * .8);
+  }
+
+  &::before {
+    content: "";
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: 150%;
+    aspect-ratio: 1;
+    background-color: var(--c8y-btn-default-background-default);
+    background-repeat: no-repeat;
+    background-size: 100% 100%, 50%50%;
+    background-position: 0 0, 100% 0, 100% 100%, 0 100%;
+    background-image: conic-gradient(@brand-primary, @status-danger, @status-warning, @status-info, @brand-primary);
+    transform: translate(-50%, -50%);
+    opacity: .7;
+  }
+
+  >* {
+    z-index: 10;
+    position: relative;
+  }
+
+  >span {
+    position: relative;
+    padding-left: @margin-16;
+    height: 100%;
+    overflow: visible;
+    opacity: 1;
+
+    &:empty {
+      padding-left: 0;
+      width: 100%;
+
+      &::before {
+        translate: 6px -50%;
+      }
+    }
+
+    &::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='24' height='24' fill='none'/%3E%3Cpath d='M9.03243 5.98167C9.1394 5.68167 9.54825 5.68167 9.65521 5.98167L11.4431 10.9961C11.4767 11.0904 11.5483 11.1648 11.6392 11.1997L16.4708 13.0552C16.7599 13.1662 16.7599 13.5905 16.4708 13.7015L11.6392 15.557C11.5483 15.5919 11.4767 15.6663 11.4431 15.7606L9.65521 20.775C9.54825 21.075 9.1394 21.075 9.03243 20.775L7.24458 15.7606C7.21095 15.6663 7.13929 15.5919 7.04841 15.557L2.2168 13.7015C1.92773 13.5905 1.92773 13.1662 2.2168 13.0552L7.04841 11.1997C7.13929 11.1648 7.21095 11.0904 7.24458 10.9961L9.03243 5.98167Z' fill='black' fill-opacity='1'/%3E%3Cpath d='M18.3291 3.225C18.436 2.925 18.8449 2.925 18.9518 3.225L19.6636 5.22123C19.6972 5.31555 19.7689 5.38992 19.8597 5.42482L21.7832 6.16349C22.0723 6.2745 22.0723 6.69882 21.7832 6.80983L19.8597 7.5485C19.7689 7.5834 19.6972 7.65776 19.6636 7.75208L18.9518 9.74831C18.8449 10.0483 18.436 10.0483 18.3291 9.74831L17.6173 7.75208C17.5837 7.65776 17.512 7.5834 17.4211 7.5485L15.4977 6.80983C15.2086 6.69882 15.2086 6.2745 15.4977 6.16349L17.4211 5.42482C17.512 5.38992 17.5837 5.31555 17.6173 5.22123L18.3291 3.225Z' fill='black' fill-opacity='1'/%3E%3Cpath d='M17.001 15.63C17.1079 15.33 17.5168 15.33 17.6237 15.63L17.9768 16.6202C18.0104 16.7145 18.0821 16.7889 18.1729 16.8238L19.127 17.1902C19.4161 17.3012 19.4161 17.7255 19.127 17.8365L18.1729 18.2029C18.0821 18.2378 18.0104 18.3122 17.9768 18.4065L17.6237 19.3967C17.5168 19.6967 17.1079 19.6967 17.001 19.3967L16.6479 18.4065C16.6143 18.3122 16.5426 18.2378 16.4518 18.2029L15.4977 17.8365C15.2086 17.7255 15.2086 17.3012 15.4977 17.1902L16.4518 16.8238C16.5426 16.7889 16.6143 16.7145 16.6479 16.6202L17.001 15.63Z' fill='black' fill-opacity='1'/%3E%3C/svg%3E%0A");
+      mask-size: 2ch;
+      mask-repeat: no-repeat;
+      mask-position: 0 center;
+      background-color: currentColor;
+      width: 2ch;
+      height: 2ch;
+      transform-origin: center;
+      transition: all .2s ease;
+      overflow: visible;
+      top: 50%;
+      translate: -6px -50%;
+    }
+  }
+
+  &.btn-lg {
+    &::after {
+      border-radius: calc(@btn-border-radius-large * .8);
+    }
+
+    >span {
+      padding-left: @btn-padding-large-horizontal;
+    }
+  }
+
+  &.btn-sm {
+    &::after {
+      border-radius: calc(@btn-border-radius-small * .8);
+    }
+
+    >span {
+      padding-left: @btn-padding-small-horizontal;
+    }
+  }
+
+  &.btn-xs {
+    &:after {
+      border-radius: calc(@btn-border-radius-xs * .8);
+    }
+
+    >span {
+      padding-left: @btn-padding-xs-horizontal;
+    }
+  }
+
+  &:not(.btn-ai-hint) {
+    &:hover,
+    &:focus {
+      box-shadow: none !important;
+      border-color: transparent;
+      color: @text-color;
+
+      &::before {
+        animation: borderRotate 1s linear infinite;
+        opacity: .85;
+      }
+
+      &::after {
+        left: 3px;
+        top: 3px;
+        width: calc(100% - 6px);
+        height: calc(100% - 6px);
+        transition: all .2s ease;
+      }
+
+      >span::before {
+        mask-size: 2.3ch;
+        mask-position: -1px center;
+        background-image: linear-gradient(90deg, @brand-primary, @status-danger, @status-warning, @status-info, @brand-primary);
+        background-size: 50px 50px;
+        animation: symbolAnimation 2s linear infinite;
+        animation-direction: alternate-reverse;
+      }
+    }
+
+    &:active {
+      &::after {
+        background-color: var(--c8y-btn-default-background-active);
+      }
+    }
+
+    &:focus {
+      outline: 2px solid var(--c8y-btn-default-border-color-focus);
+    }
+  }
+}
+
+.btn-ai-hint, .btn-ai-hint.btn-dot {
+  pointer-events: none;
+  border-radius: @margin-16  !important;
+  overflow: hidden;
+  color: @text-muted;
+  display: inline-flex;
+  align-items: center;
+  cursor: default !important;
+  border-color: transparent !important;
+  box-sizing: border-box;
+  box-shadow: none!important;
+  outline: 0!important;
+  flex-shrink: 0;
+  &::before{
+    animation: borderRotate 6s linear infinite;
+    opacity: .5!important;
+  }
+
+  &.working{
+    &::before{
+      animation: borderRotate .5s linear infinite;
+      opacity: 1!important;
+    }
+  }
+
+  &::after {
+    border-radius: @margin-16  !important;
+  }
+
+  &.btn-lg {
+    border-radius: calc(@btn-border-radius-large * 4) !important;
+
+    &::after {
+      border-radius: calc(@btn-border-radius-large * 3.8) !important;
+    }
+  }
+  &.btn-sm {
+    padding: @btn-padding-small-horizontal 7px;
+    >span:empty::before{
+      translate: 0 -50%;
+    }
+  }
+
+  >span {
+    color: @text-color;
+    display: flex;
+    align-items: center;
+    pointer-events: auto;
+  }
+}
+
+@keyframes borderRotate {
+  100% {
+    transform: translate(-50%, -50%) rotate(1turn);
+  }
+}
+
+@keyframes symbolAnimation {
+
+  50% {
+    transform: scale(1.2);
+    background-position: bottom right;
+  }
+
+  100% {
+    transform: scale(1);
+    background-position: top left;
+  }
+}
+
+
+
 // btn without any padding or styling
 .btn-clean {
   display: inline-block;
@@ -253,7 +481,7 @@
   .user-select(none);
   transition: all 0.25s ease;
 
-  &:not(.btn){
+  &:not(.btn) {
     padding: 0;
   }
 
@@ -272,6 +500,7 @@
   }
 
   &[disabled] {
+
     &,
     &:hover,
     &:focus {
@@ -282,14 +511,14 @@
   }
 }
 
-.btn-no-focus{
+.btn-no-focus {
   &:focus {
-    outline: none!important;
+    outline: none !important;
   }
 }
 
 // inside labels (e.g. for help icon)
-label > .btn-clean {
+label>.btn-clean {
   vertical-align: baseline;
 }
 
@@ -306,22 +535,23 @@ label > .btn-clean {
   .box-shadow(none) !important;
   transition: @btn-transition;
 
-  &.c8y-realtime{
+  &.c8y-realtime {
     color: inherit;
   }
+
   &:not(.btn-xs):not(.btn-sm) {
     padding: @btn-padding-vertical @btn-padding-horizontal;
     min-height: @form-control-height-base;
   }
 
-  [class^='dlt-c8y-icon-'] ~ span,
-  [class*=' dlt-c8y-icon-'] ~ span,
-  [class^='dlt-c8y-icon-'] ~ translate,
-  [class*=' dlt-c8y-icon-'] ~ translate {
+  [class^='dlt-c8y-icon-']~span,
+  [class*=' dlt-c8y-icon-']~span,
+  [class^='dlt-c8y-icon-']~translate,
+  [class*=' dlt-c8y-icon-']~translate {
     color: inherit;
   }
 
-  > i {
+  >i {
     vertical-align: text-top;
   }
 
@@ -356,6 +586,7 @@ label > .btn-clean {
 
   &[disabled],
   fieldset[disabled] & {
+
     &:hover,
     &:focus {
       color: @btn-link-disabled-color;
@@ -388,8 +619,8 @@ label > .btn-clean {
   --help-info-color: @status-info;
   color: @status-info;
 
-  > [class^='dlt-c8y-icon-'],
-  > [class*=' dlt-c8y-icon-'] {
+  >[class^='dlt-c8y-icon-'],
+  >[class*=' dlt-c8y-icon-'] {
     display: none;
   }
 
@@ -409,8 +640,9 @@ label > .btn-clean {
     --help-info-color: @palette-high;
     color: @palette-high;
   }
+
   .c8y-system-theme & {
-    @media (prefers-color-scheme: dark){
+    @media (prefers-color-scheme: dark) {
       outline: 1px solid @status-info;
       background-color: @status-info;
       --help-info-color: @palette-high;
@@ -440,17 +672,20 @@ label > .btn-clean {
     align-self: center;
     height: 14px;
     width: 14px;
+
     &::before {
       inset: 0;
     }
   }
 }
 
-label + .btn-help, label .btn-help {
+label+.btn-help,
+label .btn-help {
   display: inline;
   align-self: center;
   height: 14px;
   width: 14px;
+
   &::before {
     inset: 0;
   }
@@ -473,7 +708,7 @@ label + .btn-help, label .btn-help {
     @btn-line-height-xs; @btn-border-radius-xs; @checkbox-size );
   position: relative;
 
-  > .icon-spin {
+  >.icon-spin {
     line-height: 10px;
   }
 
@@ -507,7 +742,7 @@ label + .btn-help, label .btn-help {
 }
 
 // Vertically space out multiple block buttons
-.btn-block + .btn-block {
+.btn-block+.btn-block {
   margin: @margin-base 0 0 0;
 }
 
@@ -522,27 +757,32 @@ input[type='button'] {
 
 // BUTTON PENDING
 .btn-pending {
+
   &,
   &:hover,
   &:focus {
-    #gradient > .striped();
+    #gradient>.striped();
     background-size: 40px 40px;
     .animation(progress-bar-stripes 0.5s linear infinite);
     pointer-events: none !important;
     outline: none !important;
   }
+
   &.btn-default {
+
     &,
     &:hover,
     &:focus {
-      #gradient > .striped(var(--c8y-brand-70));
+      #gradient>.striped(var(--c8y-brand-70));
     }
   }
+
   &.btn-danger {
+
     &,
     &:hover,
     &:focus {
-      #gradient > .striped(var(--c8y-palette-status-danger-light));
+      #gradient>.striped(var(--c8y-palette-status-danger-light));
     }
   }
 }
@@ -587,11 +827,12 @@ input[type='button'] {
   .user-select(none);
   touch-action: manipulation;
   .transition(all 0.25s ease);
+
   &:not(.btn-dot) {
     font-size: 14px;
   }
 
-  > i {
+  >i {
     .transition(all 0.25s ease);
   }
 
@@ -613,8 +854,9 @@ input[type='button'] {
     color: @component-brand-primary;
     opacity: 1 !important;
 
-    > i {
+    >i {
       .rotate(180deg);
+
       &.dlt-c8y-icon-chevron-right {
         .rotate(90deg);
       }
@@ -655,7 +897,7 @@ input[type='button'] {
     text-decoration: none;
 
     .c8y-icon,
-    > [class^='dlt-c8y-icon-'],
+    >[class^='dlt-c8y-icon-'],
     [class*=' dlt-c8y-icon-'] {
       color: @action-bar-color-actions-hover;
       opacity: 1;
@@ -696,7 +938,7 @@ input[type='button'] {
   &:hover {
     box-shadow: @elevation-hover;
 
-    > [class^='dlt-c8y-icon-'],
+    >[class^='dlt-c8y-icon-'],
     [class*=' dlt-c8y-icon-'] {
       .scale(1.1);
     }
@@ -716,7 +958,7 @@ input[type='button'] {
     margin-top: @component-padding;
     min-height: 56px;
 
-    > [class^='dlt-c8y-icon-'],
+    >[class^='dlt-c8y-icon-'],
     [class*=' dlt-c8y-icon-'] {
       color: inherit;
     }
@@ -729,6 +971,7 @@ input[type='button'] {
 
 // btn checkbox
 .btn {
+
   &[btnCheckbox],
   &[uib-btn-checkbox],
   &.c8y-btn-checkbox {
@@ -834,7 +1077,7 @@ input[type='button'] {
   max-width: 100%;
   height: 45px;
 
-  > span,
+  >span,
   c8y-cell-renderer {
     white-space: nowrap;
     overflow: hidden;
@@ -859,7 +1102,7 @@ input[type='button'] {
   }
 
   .filtered & {
-    color: @brand-primary !important;
+    color: @brand-primary  !important;
   }
 
   &.c8y-dropdown {
@@ -879,7 +1122,7 @@ input[type='button'] {
 .btn-sort {
   opacity: 0;
 
-  > .dlt-c8y-icon-exchange {
+  >.dlt-c8y-icon-exchange {
     transform: rotate(90deg);
     margin-top: 4px;
   }
@@ -907,6 +1150,7 @@ input[type='button'] {
 }
 
 .btnbar {
+
   .btnbar-btn,
   .dropdown .c8y-dropdown {
     padding: calc(@margin-16 - 2px) @margin-base;
@@ -931,7 +1175,7 @@ input[type='button'] {
     }
 
     .c8y-icon,
-    > [class^='dlt-c8y-icon-'],
+    >[class^='dlt-c8y-icon-'],
     [class*=' dlt-c8y-icon-'] {
       opacity: 0.9;
     }
@@ -942,7 +1186,7 @@ input[type='button'] {
       text-decoration: none;
 
       .c8y-icon,
-      > [class^='dlt-c8y-icon-'],
+      >[class^='dlt-c8y-icon-'],
       [class*=' dlt-c8y-icon-'] {
         opacity: 1;
       }
@@ -951,7 +1195,7 @@ input[type='button'] {
     .table-data-grid-header-bulk-actions & {
       color: @component-background-active;
       border-radius: @btn-border-radius-base;
-      
+
       &:focus {
         .c8y-focus-inset();
         outline-color: @component-background-active;
@@ -962,8 +1206,9 @@ input[type='button'] {
         color: var(--c8y-brand-7);
         text-decoration: none;
         outline: 1px solid @component-background-active;
+
         .c8y-icon,
-        > [class^='dlt-c8y-icon-'],
+        >[class^='dlt-c8y-icon-'],
         [class*=' dlt-c8y-icon-'] {
           opacity: 1;
         }
@@ -975,7 +1220,8 @@ input[type='button'] {
 .btn--caret {
   display: flex;
   align-items: center;
-  > i {
+
+  >i {
     transform: translateX(-7px);
   }
 }

package/styles/_c8y-ai-chat.less

@@ -0,0 +1,194 @@
+c8y-widget-ai-chat-section{
+  display: flex;
+  max-height: calc(100vh - 400px);
+  min-height: 400px;
+  background-color: @component-background-default;
+  border: 1px solid var(--c8y-root-component-border-color);
+  border-radius: @margin-base;
+  padding: 0;
+  .chat-input{
+    border-bottom-left-radius: @margin-base;
+    border-bottom-right-radius: @margin-base;
+  }
+  
+}
+
+c8y-agent-chat{
+  width: 100%;
+}
+
+.chat-input{
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  gap: 8px;
+  padding: 16px 16px 4px 16px;
+  background-color: @component-background-default;
+  border-top: 1px solid var(--c8y-root-component-border-color);
+  margin-top: auto;
+  position: sticky;
+  bottom:0;
+  .chat-input-group{
+    position: relative;
+    width: 100%;
+    textarea{
+      border-radius: 20px!important;
+      min-height: 40px;
+      padding-top: 10px;
+      padding-right: 40px;
+      padding-bottom: 10px;
+      padding-left: 16px;
+
+      &::-webkit-scrollbar {
+        width: unset; /* for vertical scrollbars */
+        height: unset; /* for horizontal scrollbars */
+      }
+
+      &::-webkit-scrollbar-track {
+        background: unset;
+      }
+      &::-webkit-scrollbar-thumb {
+        width: unset;
+        border-radius: unset;
+        background: unset;
+      }
+      &:hover {
+        &::-webkit-scrollbar-thumb {
+          background: unset;
+        }
+      }
+    }
+    .chat-input-group-btn{
+      position: absolute;
+      right: 4px;
+      bottom: 4px;
+      .btn-dot{
+        margin: 0!important;
+        height: @form-control-height-base!important;
+        border-radius: 50%;
+      }
+    }
+  }
+}
+
+.chat-message {
+  line-height: 1.7;
+  .message-content{
+    overflow-wrap: break-word;
+    word-break: break-word;
+    max-width: 100%;
+    min-width: 0;
+    p{
+      margin-bottom: 8px;
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+}
+
+.agent-message {
+  align-self: flex-start;
+  min-width: 0;
+  width: 100%;
+  margin-top: @margin-16;
+  padding: @margin-16 @margin-24 @margin-16 @margin-16;
+  h1{
+    margin-top: @margin-24;
+    margin-bottom: @margin-16;
+    font-size: 2em;
+    font-weight: 600;
+  }
+  h2{
+    margin-top: @margin-24;
+    margin-bottom: @margin-16;
+    font-size: 1.5em;
+    font-weight: 600;
+  }
+  h3{
+    margin-top: @margin-16;
+    margin-bottom: @margin-16;
+    font-size: 1.2em;
+    font-weight: 600;
+  }
+}
+
+.user-message {
+  background-color: var(--c8y-brand-70);
+  color: var(--c8y-palette-low);
+  align-self: flex-end;
+  border-radius: @margin-base;
+  max-width: 85%;
+  min-width: 0;
+  padding: @margin-base @margin-16;
+  order: 2;
+}
+
+.message-action {
+  display: flex;
+  align-items: center;
+  gap: @margin-base;
+  padding: @margin-base 0 @margin-16 0;
+  &:empty{
+    display: none;
+  }
+  &.user-action {
+    display: inline-block;
+    align-self: flex-end;
+    width: auto;
+    padding: 0;
+    margin-top: 0;
+    margin-right: 0;
+    order: 1;
+    
+  }
+  &.agent-action {
+    justify-content: flex-start;
+    border-top: 1px dashed var(--c8y-root-component-border-color);
+  }
+
+  .btn-dot{
+    margin: 0!important;
+    height: @form-control-height-base!important;
+    border-radius: 50%!important;
+  }
+}
+
+.message-timestamp{
+  display: block;
+  font-size: @font-size-xs;
+  color: var(--c8y-text-muted);
+  .user-message &{
+    text-align: right;
+  }
+}
+
+
+.agent-step-feedback {
+  .c8y-list__group{
+    border-radius: 20px!important;
+    overflow: hidden;
+    border: 1px solid var(--c8y-root-component-border-color);
+    .c8y-list__item{
+      box-shadow: none;
+    }
+    .collapse-btn{
+      &, &:hover, &:focus{
+        border-top-right-radius: 20px!important;
+        border-bottom-right-radius: 20px!important;
+      }
+    }
+  }
+  .c8y-list__item.selectable.active{
+    color: @component-color-text-muted;
+  }
+  .c8y-list__item__actions, .c8y-list__item__icon{
+    height: 40px;
+    padding-top: 0!important;
+    padding-bottom: 0!important;
+  }
+  .c8y-list__item.selectable.active .c8y-list__item__body:after{
+    float: none;
+    color: @component-brand-primary;
+  }
+}

package/styles/_c8y-countdown-interval.less

@@ -36,6 +36,14 @@ c8y-countdown-interval {
     font-size: @font-size-xs;
     line-height: inherit;
   }
+  .form-group-sm &, .input-group-sm & {
+    min-width: 24px;
+    min-height: 24px;
+    svg {
+      padding-top: 2px;
+      padding-bottom: 2px;
+    }
+  }
 }
 
 .time-on {
@@ -62,6 +70,10 @@ c8y-countdown-interval {
   .time-elapsed {
     background-color: transparent;
   }
+  .input-group-sm &, .form-group-sm & {
+    min-height: @form-control-height-sm;
+    min-width: calc(@form-control-height-sm + @margin-base);
+  }
   &.vertical {
     padding: 0;
     min-width: revert;

package/styles/_input-groups.less

@@ -482,9 +482,9 @@ c8y-search-input.input-group-sm{
 .input-group-lg > .form-group{
   height: @form-control-height-lg!important;
 }
-.input-group-sm > .form-control,
-.input-group-sm > .input-group-addon,
-.input-group-sm > .input-group-btn > .btn {
+.input-group-sm .form-control,
+.input-group-sm  .input-group-addon,
+.input-group-sm  .input-group-btn > .btn {
   .input-sm();
 }
 .input-group-sm > .form-group{

package/styles/_page-tabs.less

@@ -220,12 +220,3 @@ body:not(:has(.app-main-header)) {
     }
   }
 }
-
-body:not(:has(.has-action-bar)){
-  .page-tabs-vertical{
-    .nav-tabs{
-      padding-top: 0;
-      border-top: 1px solid @component-border-color;
-    }
-  }
-}

package/styles/_resizable-grid.less

@@ -25,7 +25,7 @@ c8y-resizable-grid {
   .expanded {
     transition: all 0.3s ease;
     flex-grow: 1;
-    width: calc(100% - 8px)!important;
+    width: 100% !important;
   }
 
   &:has(.collapsed) {

package/styles/index.less

@@ -60,6 +60,7 @@
 @import '_static-assets-file-picker.less';
 @import '_asset-property-list.less';
 @import '_resizable-grid.less';
+@import '_c8y-ai-chat.less';
 
 @import '_panels.less';
 @import '_asset-table.less';

package/styles/utilities/_display.less

@@ -9,6 +9,10 @@
   display: flex !important;
   flex-direction: column !important;
 }
+.d-col-reverse {
+  display: flex !important;
+  flex-direction: column-reverse !important;
+}
 .d-block {
   display: block !important;
 }
@@ -41,6 +45,10 @@
     display: flex !important;
     flex-direction: column !important;
   }
+  .d-col-reverse-xs {
+    display: flex !important;
+    flex-direction: column-reverse !important;
+  }
   .d-block-xs {
     display: block !important;
   }
@@ -73,6 +81,10 @@
     display: flex !important;
     flex-direction: column !important;
   }
+  .d-col-reverse-sm {
+    display: flex !important;
+    flex-direction: column-reverse !important;
+  }
   .d-block-sm {
     display: block !important;
   }
@@ -104,6 +116,10 @@
     display: flex !important;
     flex-direction: column !important;
   }
+  .d-col-reverse-md {
+    display: flex !important;
+    flex-direction: column-reverse !important;
+  }
   .d-block-md {
     display: block !important;
   }
@@ -136,6 +152,10 @@
     display: flex !important;
     flex-direction: column !important;
   }
+  .d-col-reverse-lg {
+    display: flex !important;
+    flex-direction: column-reverse !important;
+  }
   .d-block-lg {
     display: block !important;
   }

package/variables/tokens/c8y-design-tokens-dark.less

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 10 Jul 2025 11:02:26 GMT
+// Generated on Wed, 03 Sep 2025 23:29:02 GMT
 
 .c8y-dark-theme {
 

package/variables/tokens/c8y-design-tokens.less

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 10 Jul 2025 11:02:26 GMT
+// Generated on Wed, 03 Sep 2025 23:29:02 GMT
 
 :root, .c8y-light-theme {
 
@@ -240,7 +240,7 @@
 
   /* SECTION: Button - Defaults */
   --c8y-btn-border-radius-base: 4;
-  --c8y-btn-border-radius-large: calc(var(--c8y-btn-border-radius-base) * 1.25);
+  --c8y-btn-border-radius-large: calc(var(--c8y-btn-border-radius-base) * 1.25px);
   --c8y-btn-border-radius-pill: calc(var(--c8y-unit-base) * 3px);
   --c8y-btn-border-radius-small: calc(var(--c8y-btn-border-radius-base) * 0.75 * 1px);
   --c8y-btn-border-radius-xs: 12px;
@@ -259,7 +259,7 @@
   --c8y-btn-padding-base-vertical: var(--c8y-root-component-padding-base-vertical);
   --c8y-btn-padding-icon-horizontal: 9px;
   --c8y-btn-padding-icon-vertical: var(--c8y-root-component-padding-base-vertical);
-  --c8y-btn-padding-large-horizontal: calc(var(--c8y-unit-base) * 2);
+  --c8y-btn-padding-large-horizontal: calc(var(--c8y-unit-base) * 3);
   --c8y-btn-padding-large-vertical: 9px;
   --c8y-btn-padding-small-horizontal: 14px;
   --c8y-btn-padding-small-vertical: 5px;