.lbaic-settings-chats {
  &-container {
    width: 100%;
    height: 100%;
    max-width: 1000px;
    display: grid;
    grid-template-columns: 1fr;
    padding-inline: 0;

    @include min-width($lbaic-settings-wp-xl-breakpoint) {
      grid-template-columns: 265px minmax(0, 1fr) max-content;
      grid-template-rows: 1fr;
    }

    @include max-height(1080px) {
      max-height: calc(100dvh - 195px);
    }

    @include min-height(1080px) {
      max-height: 800px;
    }
    @include max-width($lbaic-settings-wp-breakpoint) {
      max-height: calc(100dvh - 239px);
    }
  }

  &-nav {
    --lbaic-settings-chats-desc: var(--lbaic-settings-chats-user-chat-desc-color);

    width: 100%;
    height: 100%;
    max-width: 265px;
    display: grid;
    grid-template-rows: auto 1fr;
    flex-shrink: 0;
    background-color: var(--lbaic-settings-chats-user-nav-color);
    border-right: 1px solid var(--lbaic-settings-chats-border-color);
    border-bottom-left-radius: 6px;

    @supports (color: color-mix(in lab, red, red)) {
      * {
        outline-color: color-mix(in oklab, var(--lbaic-settings-chats-mixin-color) 50%, transparent);
      }
    }

    &-header {
      --lbaic-settings-chats-action-i-w: 14px;

      padding: 10.5px;
      height: 91px;
      transition: height 300ms ease-in-out;

      &-actions {
        display: flex;
        gap: 3.5px;
      }

      &.active {
        height: 42px;
      }
    }

    &-search {
      padding-block-end: 10.5px;

      .lbaic-settings-search {
        height: 31.5px;
        padding-inline: 35px 10.5px;
        background-color: var(--lbaic-settings-chats-nav-accent);

        &-input {
          padding-block: 3.5px;
          font-size: var(--lbaic-settings-fs-12);
          line-height: calc(1.25 / .875);
          outline-style: none;
        }
      }
    }

    &-body {
      position: relative;
      height: 100%;
      flex: 1;
      overflow: hidden;

      &-in {
        --lbaic-settings-chats-action-i-w: 10.5px;
        width: 100%;
        height: 100%;
        scroll-behavior: smooth;
        border-radius: inherit;
        background-color: color-mix(in oklab, var(--lbaic-settings-chats-nav-accent) 50%, transparent);
      }

      .lbaic-settings-chats {
        &-user {
          --lbaic-settings-chats-action-i-w: 14px;
        }

        &-last-changes {
          --lbaic-settings-chats-action-i-w: 10.5px;
        }
      }
    }

    @include max-width($lbaic-settings-wp-xl-breakpoint) {
      display: none;
    }

    &.lbaic-settings-chats-active-tab {
      @include max-width($lbaic-settings-wp-xl-breakpoint) {
        width: 100%;
        max-width: 100%;
        display: grid;
      }
    }

    &-footer {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: var(--lbaic-settings-chats-nav-accent);

      &-in {
      }

      &-loading {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-block: 8px;
        padding-inline: 12px;
      }
    }
  }

  &-body {
    height: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;

    @include max-width($lbaic-settings-wp-xl-breakpoint) {
      display: none;
    }

    &.lbaic-settings-chats-active-tab {
      @include max-width($lbaic-settings-wp-xl-breakpoint) {
        width: 100%;
        max-width: 100%;
        display: flex;
      }
    }
  }

  &-column {
    &.lbaic-settings-chats-h-full {
      height: 100%;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
  }

  &-column {
    &.lbaic-settings-chats-h-full {
      height: 100%;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
  }

  &-details {
    --lbaic-settings-chats-avatar-w: 35px;
    --lbaic-settings-chats-avatar-h: 35px;
    --lbaic-settings-chats-action-i-w: 10.5px;
    --lbaic-settings-chats-action-i-h: 10.5px;
    --lbaic-settings-chats-avatar-off-size: 14px;
    width: var(--lbaic-settings-chats-details-width, 0);
    height: 100%;
    background-color: transparent;
    border-left: var(--lbaic-settings-details-border, none);
    transition: width 300ms ease-in-out;

    .lbaic-settings-divider {
      margin-block: 14px;
    }

    .lbaic-settings-chats-column {
      &.active {
        .lbaic-settings-chats-action {
          transform: rotate(180deg);
        }
      }
    }

    &-nested {
      --lbaic-settings-chats-card-display: block;
      --lbaic-settings-chats-card-mi: 0;
      --lbaic-settings-chats-card-pbs: 10.5px;
      --lbaic-settings-chats-card-pbe: 10.5px;
      --lbaic-settings-chats-card-pi: 10.5px;
      --lbaic-settings-chats-card-text-position: left;
      display: var(--lbaic-settings-display-block, none);

      .lbaic-settings-progress {
        background-color: color-mix(in oklab, var(--lbaic-settings-chats-progress-bar-done) 20%, transparent);
        height: 3.5px;

        &-bar {
          background-color: var(--lbaic-settings-chats-progress-bar-done);
        }

        &:not(:last-child) {
          margin-block-end: 7px;
        }
      }

      .lbaic-settings-chats-card {
        @include max-width($lbaic-settings-wp-xl-breakpoint) {
          max-width: 100%;
        }
      }
    }

    &-in {
      --lbaic-settings-column-horizontal-position: flex-start;
      width: 265px;
      max-height: 800px;
      padding: 10.5px;
      @include max-width($lbaic-settings-wp-xl-breakpoint) {
        width: 100%;
      }
    }

    @include max-width($lbaic-settings-wp-xl-breakpoint) {
      display: none;
    }

    &.lbaic-settings-chats-active-tab {
      --lbaic-settings-details-border: 1px solid var(--lbaic-settings-chats-border-color);
      @include max-width($lbaic-settings-wp-xl-breakpoint) {
        width: 100%;
        max-width: 100%;
        display: block;
      }
    }

    &-toggler {
      position: sticky;
      top: 0;
      padding-block: 10px;
      z-index: 1;
    }

    &-container.active {
      --lbaic-settings-chats-details-nested: rotate(180deg)
    }

    &-arrow {
      transform: var(--lbaic-settings-chats-details-nested);
    }
  }

  &-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;

    &-wrapper {
      flex: 1;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      min-height: 0;
    }

    &-body {
      flex: 1;
      overflow: hidden;
      min-height: 0;

      &-in {
        height: 100%;
        padding-inline: 24px;
        padding-block: 24px;
        min-height: 0;
        display: flex;
        flex-direction: column;
      }
    }

    &-footer {
      flex-shrink: 0;
      width: 100%;
      border-top: 1px solid var(--lbaic-settings-chats-border-color);
      background-color: var(--lbaic-settings-chats-user-nav-color);
      min-height: fit-content;

      &-in {
        padding: 14px;

        .lbaic-settings-button-primary {
          --lbaic-settings-button-height: 31.5px;
          --lbaic-settings-button-bg: var(--lbaic-settings-chats-card-color);
          --lbaic-settings-button-border: 1px solid var(--lbaic-settings-chats-card-color);
        }

      }

      @include max-width($lbaic-settings-wp-xl-breakpoint) {
        border-radius: 0 0 6px 6px;
        z-index: 2;
      }
    }
  }

  &-details {
    &-title {
      --lbaic-settings-chats-action-i-w: 14px;
      --lbaic-settings-chats-action-i-h: 14px;
    }

    &-action {
      --lbaic-settings-chats-action-i-w: 14px;
      --lbaic-settings-chats-action-i-h: 14px;
    }

    &-button {
      --lbaic-settings-chats-button-w: 28px;
      --lbaic-settings-chats-button-h: 28px;
      --lbaic-settings-chats-actions-primary-bg: #fff;
      --lbaic-settings-chats-button-box-shadow: 0 0 #0000, 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
      position: absolute;
      top: 5px;
      left: var(--lbaic-settings-chats-details-position-l);
      right: var(--lbaic-settings-chats-details-position-r);
      z-index: 1;

      .lbaic-settings-chats-action-i {
        transform: var(--lbaic-settings-chats-details-position-rotate);
      }

      &-left {
        --lbaic-settings-chats-details-position-l: 24px;
        --lbaic-settings-chats-details-position-rotate: rotate(270deg);

        @include min-width($lbaic-settings-wp-xl-breakpoint) {
          --lbaic-settings-column-display: none;
        }
      }

      &-right {
        --lbaic-settings-chats-details-position-r: 24px;
        --lbaic-settings-chats-details-position-rotate: rotate(90deg);

        &.right {
          --lbaic-settings-chats-details-position-rotate: rotate(270deg)
        }
      }
    }
  }

  &-card {
    max-width: 392px;
    flex-direction: column;
    margin-inline: var(--lbaic-settings-chats-card-mi, 14px);
    color: var(--lbaic-settings-chats-card-color);
    border: 1px solid var(--lbaic-settings-chats-user-muted);
    border-radius: 8px;

    &-ticket {
      --lbaic-settings-chats-desc: var(--lbaic-settings-chats-user-chat-desc-color);

      .lbaic-settings-badge {
        --lbaic-settings-badge-height: 20px;
        border-radius: 6px;
      }
    }

    &-ticket.open {
      .lbaic-settings-badge {
        --lbaic-settings-badge-bg: var(--lbaic-settings-chats-button-bg-red-active);
        --lbaic-settings-badge-color: var(--lbaic-settings-chats-ticket-open-color);
      }
    }

    &-ticket.pending {
      .lbaic-settings-badge {
        --lbaic-settings-badge-bg: var(--lbaic-settings-chats-ticket-pending-bg);
        --lbaic-settings-badge-color: var(--lbaic-settings-chats-ticket-pending-color)
      }
    }

    &-ticket.closed {
      .lbaic-settings-badge {
        --lbaic-settings-badge-bg: var(--lbaic-settings-chats-ticket-closed-bg);
        --lbaic-settings-badge-color: var(--lbaic-settings-chats-ticket-closed-color)
      }
    }

    &-in {
      padding-block-start: var(--lbaic-settings-chats-card-pbs, 28px);
      padding-block-end: var(--lbaic-settings-chats-card-pbe, 21px);
      padding-inline: var(--lbaic-settings-chats-card-pi, 28px);
      text-align: var(--lbaic-settings-chats-card-text-position, center);
    }

    &-header {
      display: flex;
      justify-content: center;
      margin-block-end: 14px;

      &-in {
        width: 56px;
        height: 56px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--lbaic-settings-chats-user-muted);
        border-radius: 50%;
      }

      &-i {
        --lbaic-settings-chats-action-i-w: 14px;
        --lbaic-settings-chats-action-i-h: 14px;
        width: 50%;
        height: 50%;
        flex: 0 0 28px;
        fill: var(--lbaic-settings-content-empty-icon-fill);;
      }
    }

    &-title {
      font-size: inherit;
      font-weight: inherit;
    }

    &-desc {
      color: var(--lbaic-settings-chats-user-chat-desc-color);
    }

  }

  &-avatar {
    width: var(--lbaic-settings-chats-avatar-w, 28px);
    height: var(--lbaic-settings-chats-avatar-h, 28px);
    position: relative;
    flex-shrink: 0;

    &-in {
      position: relative;
      width: 100%;
      height: 100%;
      display: var(--lbaic-settings-avatar-display, flex);
      justify-content: center;
      align-items: center;
      background-color: var(--lbaic-settings-message-bg, var(--lbaic-settings-chats-user-muted));
      border: var(--lbaic-settings-chats-message-border);
      border-radius: 50%;
      flex-shrink: 0;
    }

    &-pic {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      object-fit: cover;
    }

    &-badge {
      position: absolute;
      top: -3.5px;
      right: -3.5px;
      width: 7px;
      height: 7px;
      background-color: var(--lbaic-settings-primary);
      border-radius: 50%;
    }

    &-off {
      font-size: var(--lbaic-settings-chats-avatar-off-size, 10.5px);
      line-height: calc(1 / .75);
    }

    &-i {
      width: 12px;
      height: 12px;
      flex: 0 0 12px;
    }
  }

  &-user {
    --lbaic-settings-column-vertical-position: flex-start;
    padding: 7px;
    border-left: 2px solid var(--lbaic-settings-chats-user-chat-border-color, transparent);

    &-in {
      width: 100%;
    }

    &-name {
      --lbaic-settings-column-vertical-position: center;
      margin-block-end: 3.5px;
    }

    .lbaic-settings-chats-action {
      opacity: var(--lbaic-settings-chats-kebab-opacity, 0);
    }

    &:hover {
      --lbaic-settings-chats-kebab-opacity: 1;
      background-color: var(--lbaic-settings-chats-nav-accent);


      .lbaic-settings-chats-action {
        opacity: 1;
      }
    }

    &.active {
      --lbaic-settings-chats-user-chat-border-color: var(--lbaic-settings-primary);
      background-color: var(--lbaic-settings-chats-nav-accent);
    }

    &.selected {
      --lbaic-settings-chats-user-chat-border-color: var(--lbaic-settings-primary);
      background-color: var(--lbaic-settings-chats-nav-accent);
    }

    &-chat {
      &-title {
        &-icon {
          margin-inline-start: 3.5px;
          stroke: var(--lbaic-settings-chats-user-icon);
        }

        &-i {
          --lbaic-settings-chats-icon-color: #155dfc;
          --lbaic-settings-chats-action-i-w: 10.5px;
          --lbaic-settings-chats-action-i-h: 10.5px;
        }
      }
    }

    &:hover, &.active {
      --lbaic-settings-chats-selected-display: flex;
      --lbaic-settings-avatar-display: none;
    }
  }

  &-last-changes {
    color: var(--lbaic-settings-chats-user-chat-desc-color);
    font-size: var(--lbaic-settings-fs-11);
    line-height: calc(1 / .75);

    &-in {
      --lbaic-settings-column-vertical-position: center;
    }

    .lbaic-settings-chats-desc {
      line-height: normal;
    }
  }

  &-selected {
    width: 100%;
    height: 100%;
    display: var(--lbaic-settings-chats-selected-display, none);
    align-items: center;
    justify-content: center;

    .lbaic-settings-checkbox {
      &-in {
        width: 14px;
        height: 14px;
        min-width: 14px;
        border-radius: 4px;
        background-color: var(--lbaic-settings-chats-user-nav-color);
        border-color: var(--lbaic-settings-chats-mixin-color);
      }

      &-i {
        width: 12px;
        height: 12px;
        min-width: 12px;
        border-radius: 4px;
      }
    }
  }

  &-column {
    display: var(--lbaic-settings-column-display, flex);
    align-items: var(--lbaic-settings-column-vertical-position, center);
    justify-content: var(--lbaic-settings-column-horizontal-position, center);
    flex-direction: var(--lbaic-settings-column-reverse, row);
    gap: var(--lbaic-settings-column-gap, 0);

    &-jc-sb {
      --lbaic-settings-column-horizontal-position: space-between;
    }

    &-ai-start {
      align-items: flex-start;
    }

    &-jc-center {
      --lbaic-settings-column-horizontal-position: center;
    }

    &-jc-fs {
      --lbaic-settings-column-horizontal-position: flex-start;
    }

    &-fd-reverse {
      --lbaic-settings-column-reverse: var(--lbaic-settings-column-reverse, row-reverse);
    }

    &-gap {
      &-multyply-3 {
        --lbaic-settings-column-gap: calc(3.5px * 3);
      }

      &-3\.5 {
        --lbaic-settings-column-gap: 3.5px;
      }

      &-5\.25 {
        --lbaic-settings-column-gap: 5.25px;
      }

      &-10\.5 {
        --lbaic-settings-column-gap: 10.5px;
      }
    }

    .lbaic-settings-kebab-menu {
      --lbaic-settings-kebab-size: 21px;
      border-radius: 6px;
    }

    .lbaic-settings-tooltip {
      background-color: transparent;

      &:hover {
        background-color: transparent;
      }
    }
  }


  &-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 10.5px;
    line-height: calc(1 / .75);
    color: var(--lbaic-settings-chats-desc, currentColor);

    &.unseen {
      color: oklch(.145 0 0);
      font-weight: var(--lbaic-settings-fw-600);
    }

    &.no-viewed {
      color: #0a0a0a;
      font-weight: var(--lbaic-settings-fw-500);
    }

    & * {
      line-height: calc(1 / .75);
    }
  }

  &-text-break {
    text-overflow: ellipsis;
    word-break: break-word;
    overflow: hidden;
  }

  &-text-nowrap {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  &-mb-3\.5 {
    margin-block-end: 3.5px;
  }

  &-mb-7 {
    &:not(:last-child) {
      margin-block-end: 7px;
    }
  }

  &-mb-10\.5 {
    &:not(:last-child) {
      margin-block-end: 10.5px;
    }
  }


  &-inherit-font {
    font-size: inherit;
    font-weight: inherit;
  }

  &-input {
    display: block;

    &-in {
      --lbaic-settings-input-local-bg: var(--lbaic-settings-chats-input-bg);

      display: flex;
      align-items: center;
      gap: 7px;

      .lbaic-settings-input-holder-in, .lbaic-settings-input {
        height: 31.5px;
        border: var(--lbaic-settings-chats-input-bg);
      }

      .lbaic-settings-input {
        padding-block: 8px;
      }

      .lbaic-settings-emoji {
        width: 31.5px;
        height: 31.5px;
        flex: 0 0 31.5px;
      }
    }

    &-join {
      padding: 14px;
      border: 1px solid var(--lbaic-settings-chats-message-user-border-color);
      border-radius: 8.75px;
    }
  }

  &-add-file {
    --lbaic-settings-chats-button-w: 31.5px;
    --lbaic-settings-chats-button-h: 31.5px;

    &:hover {
      background-color: var(--lbaic-settings-chats-user-actions-hover);
    }
  }

  &-send {
    &-message {
      --lbaic-settings-chats-button-w: 31.5px;
      --lbaic-settings-chats-button-h: 31.5px;
      --lbaic-settings-chats-actions-primary-bg: var(--lbaic-settings-chats-actions-primary-color);
      color: var(--lbaic-settings-chats-user-actions-hover);
    }
  }

  &-message {
    --lbaic-settings-chats-avatar-w: 24px;
    --lbaic-settings-chats-avatar-h: 24px;

    width: 100%;
    flex-shrink: 0;

    &:not(:last-child) {
      margin-block-end: 28px;
    }

    &.ai {
      --lbaic-settings-message-bg: var(--lbaic-settings-chats-message-ai-bg);
      --lbaic-settings-message-color: var(--lbaic-settings-chats-message-ai-color);
      --lbaic-settings-chats-message-border-color: var(--lbaic-settings-chats-message-ai-border-color);
      --lbaic-settings-chats-message-border: 1px solid var(--lbaic-settings-chats-message-ai-border-color);
      --lbaic-settings-column-reverse: row-reverse;
      --lbaic-settings-chats-ms-auto: auto;
      --lbaic-settings-chats-message-actions-r: 9px;
      --lbaic-settings-chats-message-actions-b: -11px;
      --lbaic-settings-chats-message-display-position: flex-end;
    }

    &.human-assistant {
      --lbaic-settings-message-bg: var(--lbaic-settings-chats-message-human-assistant-bg);
      --lbaic-settings-message-color: var(--lbaic-settings-chats-message-human-assistant-color);
      --lbaic-settings-chats-message-border-color: var(--lbaic-settings-chats-message-human-assistant-border-color);
      --lbaic-settings-chats-message-border: 1px solid var(--lbaic-settings-chats-message-border-color);
      --lbaic-settings-column-reverse: row-reverse;
      --lbaic-settings-chats-ms-auto: auto;
      --lbaic-settings-chats-message-actions-r: 9px;
      --lbaic-settings-chats-message-actions-b: -11px;
      --lbaic-settings-chats-message-display-position: flex-end;
    }

    &.user {
      --lbaic-settings-message-bg: var(--lbaic-settings-chats-message-user-bg);
      --lbaic-settings-message-color: var(--lbaic-settings-chats-message-user-color);
      --lbaic-settings-chats-message-border-color: var(--lbaic-settings-chats-message-user-border-color);
      --lbaic-settings-chats-message-border: 1px solid var(--lbaic-settings-message-bg);
      --lbaic-settings-chats-message-actions-t: 80%;
      --lbaic-settings-chats-message-actions-l: 9px;
    }

    &-head {
      --lbaic-settings-column-horizontal-position: static;
      gap: 7px;
    }

    &-assistant-joined {
      display: flex;
      justify-content: center;
      margin-block-end: 28px;

      .lbaic-settings-badge {
        padding-block: 3.5px;
        padding-inline: 10.5px;
        background-color: var(--lbaic-settings-message-bg);
        border: 1px solid var(--lbaic-settings-chats-message-border-color);
        border-radius: 25px;

        &-label {
          display: flex;
          align-items: center;
          line-height: calc(1 / .75);
          gap: 3.5px;
          color: var(--lbaic-settings-message-color);

          &:before {
            content: "";
            width: 7px;
            height: 7px;
            display: block;
            background-color: var(--lbaic-settings-message-color);
            border-radius: 50%;
          }
        }
      }

      // Agent joined - green theme
      &.agent-joined .lbaic-settings-badge {
        --lbaic-settings-message-bg: rgba(var(--lbaic-settings-badge-green-rgb), 0.1);
        --lbaic-settings-message-color: rgba(var(--lbaic-settings-badge-green-rgb), 1);
        --lbaic-settings-chats-message-border-color: rgba(var(--lbaic-settings-badge-green-rgb), 0.2);
      }

      // Agent left - red theme
      &.agent-left .lbaic-settings-badge {
        --lbaic-settings-message-bg: rgba(var(--lbaic-settings-badge-red-rgb), 0.1);
        --lbaic-settings-message-color: rgba(var(--lbaic-settings-badge-red-rgb), 1);
        --lbaic-settings-chats-message-border-color: rgba(var(--lbaic-settings-badge-red-rgb), 0.2);
      }
    }

    &-title {
      cursor: pointer;

      &:hover {
        --lbaic-settings-chats-message-border: 1px solid var(--lbaic-settings-chats-message-border-color);
      }
    }

    &-body {
      &:not(:last-child) {
        margin-block-end: 28px;
      }

      &-in {
        position: relative;
        width: fit-content;
        max-width: 588px;
        margin-inline-start: var(--lbaic-settings-chats-ms-auto, inherit);
        background-color: var(--lbaic-settings-message-bg);
        color: var(--lbaic-settings-message-color);
        border: 1px solid var(--lbaic-settings-chats-message-border-color);
        border-radius: 8.75px;
        padding: 6px 10px;

        &:not(:last-child) {
          margin-block-end: 10.5px;
        }

        &:hover {
          --lbaic-settings-chats-message-display: flex;
        }
      }

    }

    &-actions {
      width: 100%;
      max-width: max-content;
      position: absolute;
      top: var(--lbaic-settings-chats-message-actions-t, inset);
      right: var(--lbaic-settings-chats-message-actions-r, inset);
      bottom: var(--lbaic-settings-chats-message-actions-b, inset);
      left: var(--lbaic-settings-chats-message-actions-l, inset);
      display: var(--lbaic-settings-chats-message-display, none);
      justify-content: var(--lbaic-settings-chats-message-display-position, flex-start);
      flex-wrap: wrap;
      gap: 3.5px;
      z-index: 10;

      &-in {
        --lbaic-settings-chats-button-w: max-content;
        --lbaic-settings-chats-actions-primary-bg: oklch(.95 .0058 264.53);
        --lbaic-settings-chats-button-border-radius: 6.75px;
        --lbaic-settings-chats-button-box-shadow: 0 0 rgba(0, 0, 0, 0), 0 1px 3px 0 rgba(0, 0, 0, .1019607843), 0 1px 2px -1px rgba(0, 0, 0, .1019607843);

        padding-inline: 8.750px;
        white-space: nowrap;

        &:hover {
          --lbaic-settings-chats-button-box-shadow: 0 0 #0000, 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
        }

        &:active {
          --lbaic-settings-chats-button-scale-x: 95%;
          --lbaic-settings-chats-button-scale-y: 95%;
          --lbaic-settings-chats-button-scale-z: 95%;
          scale: var(--lbaic-settings-chats-button-scale-x) var(--lbaic-settings-chats-button-scale-y);
          --lbaic-settings-chats-button-box-shadow: 0 0 #0000, 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
        }
      }
    }

    &-title {
      font-size: 15.75px;
      line-height: 1.625;
      color: var(--lbaic-settings-message-color);
    }

    &-desc {
      font-size: var(--lbaic-settings-fs-12);
      line-height: 1.625;
      white-space: pre-wrap;
      color: var(--lbaic-settings-message-color);
    }

    .lbaic-message {
      &-img {
        width: 100%;
        height: 100%;
        border-radius: 8.75px;
      }
    }

    &-text {
      & ol, ul {
        list-style-position: outside;
        margin-inline-start: 16px;
        padding-inline-start: 16px;

        &:only-child {
          margin-inline-start: 0;
        }
      }

      ul {
        list-style-type: disc;
      }

      ol {
        ul {
          margin-inline-start: 0;
        }
      }

      * {
        line-height: 1.75;
        font-size: var(--lbaic-settings-fs-13);
        color: var(--lbaic-settings-message-color);
      }

      h1 {
        font-size: var(--lbaic-settings-fs-22);
        line-height: normal;
      }

      h2 {
        font-size: var(--lbaic-settings-fs-22);
      }

      h3 {
        font-size: var(--lbaic-settings-fs-18);
      }

      h4 {
        font-size: var(--lbaic-settings-fs-16);
      }

      h5 {
        font-size: var(--lbaic-settings-fs-14);
      }

      h6 {
        font-size: var(--lbaic-settings-fs-12);
      }

      h1, h2, h3, h4, h5, h6 {
        color: currentColor;
        line-height: normal;
      }
      .lbaic-message-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: var(--lbaic-message-table-max-width);
        padding-block-end: 10px;

        table {
          border-collapse: collapse;
          width: 100%;
          min-width: 200px;

          thead tr {
            border-block-end: 1px solid var(--lbaic-settings-chats-message-border-color);
          }

          tr {
            border-block-end: 1px solid var(--lbaic-settings-chats-message-border-color);

            th {
              padding: 5px;
              width: max-content;
              font-size: 14px;
              font-weight: 500;
              text-align: left;
            }

            td {
              padding: 5px;
              font-size: 12px;
            }
          }

          td, th {
            min-width: 80px;
            vertical-align: middle;
            &:not(:last-child) {
              border-inline-end: 1px solid var(--lbaic-settings-chats-message-border-color);
            }
          }
        }
      }
    }

    &-action-submission {
      display: flex;
      gap: 8px;
      align-items: flex-start;

      &-status {
        &.success {
          .lbaic-settings-chats-message-action-submission-status-i {
            fill: var(--lbaic-settings-chats-message-action-submission-success);
          }
        }

        &.error {
          .lbaic-settings-chats-message-action-submission-status-i {
            fill: var(--lbaic-settings-chats-message-action-submission-error);
          }
        }

        &-i {
          width: 20px;
          height: 20px;
        }
      }

      &-content {
        flex: 1;
        min-width: 0;
      }
    }

    &-data {
      &-divider {
        height: 12px;
      }

      &-fields {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 4px 12px;
        font-size: var(--lbaic-fs-12);
        font-weight: var(--lbaic-fw-400);
        line-height: var(--lbaic-lh-24);
      }

      &-field {
        &-row {
          display: contents;
        }

        &-label {
          font-weight: var(--lbaic-fw-500);
          color: var(--lbaic-input-action-color);
          user-select: text;
          white-space: nowrap;
        }

        &-value {
          user-select: text;
          word-break: break-word;
        }
      }
    }
  }

  &-row {
    display: flex;
    align-items: var(--lbaic-settings-chats-row-align, center);
    gap: 3.5px;

    &-ai-start {
      --lbaic-settings-chats-row-align: flex-start;
    }

    &-in {
      font-size: var(--lbaic-settings-fs-12);
      font-weight: var(--lbaic-settings-fw-600);
      line-height: calc(1.25 / .875);
    }
  }

  &-action {
    --lbaic-settings-column-horizontal-position: center;

    width: var(--lbaic-settings-chats-button-w, 21px);
    height: var(--lbaic-settings-chats-button-h, 21px);
    flex: 0 0 var(--lbaic-settings-chats-button-w, 21px);
    max-width: var(--lbaic-settings-chats-button-w, 21px);
    background-color: var(--lbaic-settings-chats-actions-primary-bg, transparent);
    border-radius: var(--lbaic-settings-chats-button-border-radius, 6px);
    box-shadow: var(--lbaic-settings-chats-button-box-shadow, none);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);


    &:hover {
      --lbaic-settings-chats-actions-primary-bg: var(--lbaic-settings-chats-user-actions-hover);
    }

    &-close {
      --lbaic-settings-chats-button-w: 31.5px;
      --lbaic-settings-chats-button-h: 31.5px;
      --lbaic-settings-chats-action-i-w: 14px;
      --lbaic-settings-chats-action-i-h: 14px;

      &:hover {
        --lbaic-settings-chats-actions-primary-bg: var(--lbaic-settings-chats-button-bg-red-hover);
        --lbaic-settings-chats-actions-primary-color: var(--lbaic-settings-chats-button-color-red-hover);
      }

      &:active {
        --lbaic-settings-chats-actions-primary-bg: var(--lbaic-settings-chats-button-bg-red-active);
      }
    }

    &-i {
      width: var(--lbaic-settings-chats-action-i-w, 14px);
      height: auto;
      flex: 0 0 var(--lbaic-settings-chats-action-i-w, 14px);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

      &-fill {
        fill: var(--lbaic-settings-chats-actions-primary-color, currentColor);
      }

      &-stroke {
        stroke: var(--lbaic-settings-chats-icon-color, currentColor);
      }

      &-stroke-none {
        stroke: none;
      }
    }
  }

  &-title {
    font-weight: var(--lbaic-settings-fw-700, inherit);
    font-size: var(--lbaic-settings-fs-14, inherit);
  }

  &-popup {
    padding: 0;

    .lbaic-settings-button-primary {
      --lbaic-settings-button-bg: var(--lbaic-settings-chats-actions-primary-color);
      --lbaic-settings-button-border: 1px solid var(--lbaic-settings-chats-actions-primary-color);
      color: #fff;
    }

    .lbaic-settings-popup-header {
      padding: 21px;

      &-in {
        padding-block-end: 0;
      }

      &-label {
        font-size: var(--lbaic-settings-fs-16);
      }
    }

    .lbaic-settings-popup-body {
      padding-block: 21px 14px;
      padding-inline: 21px;

      &-in {
        padding: 0;

        .lbaic-settings-label {
          &-in {
            font-size: var(--lbaic-settings-fs-12);
          }
        }
      }
    }

    .lbaic-settings-popup-footer {
      padding-block: 0 21px;
      padding-inline: 21px;
    }
  }

  &-tooltip {
    &-content {
      --lbaic-settings-tooltip-width: max-content;
      --lbaic-settings-tooltip-bg: var(--lbaic-settings-chats-progress-bar-done);
      --lbaic-settings-tooltip-color: #fff;
      --lbaic-settings-chats-icon-color: #fff;

      .lbaic-settings-tooltip-content-in {
        gap: 5px;

        .lbaic-settings-chats-action-i-fill {
          fill: var(--lbaic-settings-tooltip-color, currentColor);
          color: var(--lbaic-settings-tooltip-color, currentColor);
        }
      }
    }
  }

  &-user-desc {
    & * {
      line-height: 1.45;
    }
  }

  &-h-full {
    height: 100%;
  }

  &-details-badge {
    line-height: 9px;
  }
}