@use 'ej2-base/styles/common/mixin' as *;
@include export-module('aiassistview-layout') {
  .e-aiassistview {
    border: $ai-assist-border solid;
    position: relative;
    &.e-assist-tab-header-disabled .e-view-header {
      display: none;
    }
    .e-view-header {
      height: $aiassist-header-height;
      border-bottom: $view-header-border-bottom solid;
      .e-toolbar-item {
        position: relative;
        &::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          height: $toolbar-item-height;
          width: 100%;
          border-radius: $toolbar-item-border-radius;
        }
        &.e-assist-view-header,
        &.e-custom-view-header {
          @if ($skin-name == 'highcontrast') {
            // To apply box-shadow styling during keyboard navigation
            padding: $custom-view-header-padding;
          }
          @else {
            padding: $custom-view-header-padding;
          }
          .e-tbar-btn {
            padding: $tbar-btn-padding;
            .e-btn-icon {
              padding: $assist-btn-icon-padding;
            }
          }
        }
        &.e-active .e-btn {
          cursor: pointer;
        }
      }
      .e-toolbar .e-toolbar-items .e-toolbar-left {
        height: $toolbar-left-height;
      }
    }
    .e-view-container,
    .e-footer,
    .e-upload-failure-alert {
      width: max(80%, 425px);
    }
    .e-view-container {
      margin: $view-container-margin;
      display: flex;
      flex-direction: column;
    }
    .e-prompt-content {
      display: flex;
      align-items: center;
      max-width: 100%;
    }
    .e-prompt-toolbar {
      width: 100%;
    }
    .e-view-content {
      height: $view-content-height;
      display: flex;
      flex-direction: column;
      .e-upload-failure-alert {
        transition: opacity .5s ease-in-out;
        opacity: 0;
        padding: $file-failure-padding;
        border-radius: $file-failure-border-radius;
        display: flex;
        align-items: center;
        align-self: center;
        justify-content: space-between;
        margin-bottom: $upload-failure-alert-bottom;
        .e-assist-clear-icon {
          font-size: $file-failure-close-icon-font-size;
          line-height: $file-failure-close-icon-line-height;
          cursor: pointer;
        }
        .e-failure-message {
          font-size: $file-failure-msg-font-size;
          line-height: $file-failure-msg-line-height;
          margin-right: auto;
        }
        .e-assist-circle-close {
          font-size: $file-failure-circle-close-icon-font-size;
          margin-right: $file-failure-circle-close-icon-margin;
        }
      }
      .e-upload-failure-alert.e-show {
        opacity: 1;
      }
    }
    .e-output {
      width: inherit;
    }
    .e-prompt-toolbar {
      .e-toolbar .e-toolbar-items:not(.e-tbar-pos):not(.e-toolbar-multirow) .e-toolbar-item:first-child {
        margin-left: $prompt-toolbar-margin-left;
      }
    }
    .e-view-header {
      .e-toolbar .e-toolbar-items .e-toolbar-item.e-assist-view-header,
      .e-toolbar .e-toolbar-items .e-toolbar-item.e-custom-view-header {
        margin-left: $custom-view-header-margin-left;
      }
      .e-toolbar.e-rtl .e-toolbar-items .e-toolbar-item.e-assist-view-header,
      .e-toolbar.e-rtl .e-toolbar-items .e-toolbar-item.e-custom-view-header {
        margin-right: $custom-view-header-margin-right;
        margin-left: $assist-view-header-margin-left;
      }
      .e-toolbar.e-rtl .e-toolbar-items:first-child > .e-toolbar-right .e-toolbar-item:last-child {
        margin-left: $toolbar-rtl-margin-left;
        margin-right: $toolbar-rtl-margin-right;
      }
      .e-toolbar.e-rtl .e-toolbar-items:first-child > .e-toolbar-item:last-child:last-child {
        margin-left: $toolbar-items-last-child-margin-left;
      }
      .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 {
        padding: $tbar-btn-text-padding;
      }
    }
    .e-toolbar {
      height: 32px;
      min-height: 32px;
      .e-toolbar-item:not(.e-separator):not(.e-spacer) {
        padding: unset;
      }
      .e-toolbar-item {
        .e-tbar-btn {
          @if ($theme-name == 'FluentUI' or $skin-name == 'fabric' or $skin-name == 'material') {
            min-height: 32px;
            min-width: 32px;
          }
        }
      }
    }
    .e-prompt-container,
    .e-output-container {
      .e-toolbar .e-toolbar-item:not(.e-separator):not(.e-spacer) {
        @if ($skin-name == 'Material3' or $skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'tailwind') {
          padding: 4px;
        }
      }
    }
    .e-output-container {
      width: 100%;
      display: flex;
      align-self: flex-start;
      margin: $output-container-margin;
    }
    .e-prompt-icon {
      margin: $prompt-icon-margin;
      min-height: $aiassist-icon-height;
    }
    .e-output-icon {
      height: $aiassist-icon-height;
      margin: $output-icon-margin;
    }
    .e-prompt-icon,
    .e-output-icon {
      border-radius: $prompt-output-icon-border-radius;
      min-width: $aiassist-icon-width;
    }
    .e-loading-body,
    .e-content-body,
    .e-loading-footer {
      padding: $loading-footer-padding;
    }
    .e-content-container {
      margin-top: $content-container-margin-top;
      position: relative;
      font-size: $content-container-font-size;
      justify-content: space-between;
      flex: 1 1 auto;
    }
    .e-scroll-down-btn {
      position: sticky;
      top: 0;
      align-self: flex-end;
    }
    .e-prompt-text {
      white-space: pre-wrap;
      height: $prompt-text-height;
      border-radius: $prompt-text-border-radius;
      padding: $prompt-text-padding;
      line-height: $prompt-text-line-height;
      min-height: $prompt-text-min-height;
      box-sizing: border-box;
    }
    .e-content-footer,
    .e-prompt-toolbar {
      opacity: 0;
    }
    .e-prompt-container {
      gap: $prompt-container-gap;
      align-self: flex-end;
      max-width: 70%;
      flex-direction: column;
      &:hover .e-assist-edit-icon {
        opacity: 1;
        cursor: pointer;
      }
    }
    .e-suggestion-header {
      font-size: $suggestion-header-font-size;
      font-weight: $suggesstions-header-font-weight;
      margin: $suggestion-header-margin;
      text-align: right;
    }
    .e-suggestions {
      width: 100%;
      &.e-suggestion-item-template li {
        padding: $suggestion-item-template-padding;
      }
      ul {
        list-style-type: none;
        padding: $suggestion-item-ul-padding;
        margin: $suggestion-item-ul-margin;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
      }
      li {
        line-height: $suggestion-li-line-height;
        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;
        height: $suggestion-li-height;
        box-sizing: border-box;
      }
    }
    .e-views {
      display: flex;
      justify-content: space-around;
      scroll-behavior: smooth;
      .e-content-body {
        line-height: $content-body-line-height;
        border-radius: $content-body-border-radius;
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
          font-weight: $content-body-font-weight;
        }
        h4,
        h5 {
          line-height: $h4-h5-line-height;
        }
        h1 {
          font-size: $h1-font-size;
          line-height: $h1-line-height;
        }
        h2 {
          font-size: $h2-font-size;
          line-height: $h2-line-height;
        }
        h3 {
          font-size: $h3-font-size;
          line-height: $h3-line-height;
        }
        h4 {
          font-size: $h4-font-size;
        }
        h5 {
          font-size: $h5-font-size;
        }
        h6 {
          font-size: $h6-font-size;
          line-height: $h6-line-height;
        }
        li {
          line-height: $content-body-li-line-height;
        }
        pre {
          padding: $content-body-pre-padding;
          white-space: pre-wrap;
          position: relative;
          span.e-code-copy {
            position: absolute;
            right: 10px;
            cursor: pointer;
          }
        }
        tbody,
        td,
        tfoot,
        th,
        thead,
        tr {
          padding: $content-body-tr-padding;
        }
        thead,
        td {
          text-align: center;
        }
        blockquote {
          font-style: italic;
          padding-left: $content-body-blockquote-padding-left;
        }
        img,
        svg {
          height: $content-body-svg-img-height;
          width: 100%;
          padding: $content-body-svg-img-padding;
          border-radius: $content-body-svg-img-border-radius;
        }
        table {
          border-collapse: collapse;
          border-spacing: 0;
        }
      }
      .e-content-body code:not(pre code) {
        border-radius: $content-body-code-border-radius;
        padding: $content-body-code-padding;
      }
      .e-content-body > *:first-child {
        margin-block-start: 0;
        margin-block-end: .5em;
      }
      .e-content-body > *:last-child,
      .e-content-body > *:only-child {
        margin-block-start: 0;
        margin-block-end: 0;
      }
    }
    .e-view-container .e-fab-hidden {
      display: none;
    }
    .e-views,
    .e-custom-view,
    .e-assistview-content-section {
      height: $assistview-content-section-height;
      overflow: scroll;
      &::-webkit-scrollbar {
        width: $ai-assist-scrollbar-width;
        height: $ai-assist-scrollbar-height;
      }
      &::-webkit-scrollbar-thumb {
        border-radius: $webkit-scrollbar-border-radius;
      }
      &::-webkit-scrollbar-corner {
        background-color: transparent;
      }
    }

    /* ======== Asssit Footer Styles ======== */
    .e-footer {
      position: relative;
      margin: $footer-margin;
      .e-assist-textarea::-webkit-scrollbar-thumb {
        border-radius: $assist-textarea-border-radius;
      }
      .e-assist-textarea::-webkit-scrollbar {
        width: 4px;
      }
      .hide-scrollbar .e-assist-textarea {
        scrollbar-width: none;
      }

      &.e-footer-expanded.e-toolbar-inline {
        .e-footer-icons-wrapper {
          .e-toolbar .e-toolbar-items.e-tbar-pos .e-toolbar-right {
            position: absolute;
          }
        }
      }

      &:not(.e-footer-expanded).e-toolbar-inline {
        .e-footer-icons-wrapper {
          width: fit-content;
          .e-toolbar-items.e-tbar-pos {
            .e-toolbar-right {
              position: unset;
            }
            .e-toolbar-center {
              position: absolute;
            }
          }
          
          .e-toolbar[style *= 'width:'][style *= 'px'] {
            & .e-toolbar[style *= 'px'] {
              .e-toolbar-items.e-tbar-pos {
                .e-toolbar-right {
                  position: absolute;
                }
                .e-toolbar-center {
                  position: unset;
                }
              }
            }
          }
        }
      }
      .e-footer-icons-wrapper {
        display: flex;
        align-items: center;
        gap: $assist-footer-icons-gap;
        padding: $assist-footer-icons-padding;
        .e-toolbar {
          width: 100%;
          min-height: $assist-footer-tbar-min-height;
          .e-tbar-btn {
            min-height: $assist-footer-tbar-min-height;
            min-width: $assist-footer-tbar-min-height;
            cursor: default;
            &:focus {
              padding: 0;
            }
          }
          .e-tbar-btn:has(.e-assist-stop) {
            max-width: $assist-footer-tbar-min-height;
            .e-btn-icon {
              min-width: $assist-footer-tbar-min-height;
            }
          }
          .e-toolbar-right .e-toolbar-item:last-child {
            margin-right: 0;
          }
          .e-toolbar-item {
            min-height: unset;
            min-width: unset;
            max-height: $assist-footer-tbar-min-height;
            .e-tbar-btn:focus-visible .e-icons:not(.disabled) {
              outline: 1px solid;
              padding: 4px;
            }
          }
        }
        .e-assist-attachment-icon {
          font-size: $assist-attachment-icon-font-size;
        }
        .e-icons {
          cursor: pointer;
        }
      }
      .e-assist-textarea {
        height: $assist-textarea-height;
        width: 100%;
        min-height: $assist-textarea-min-height;
        outline: none;
        overflow-y: auto;
        max-height: 280px;
        line-height: $assist-textarea-line-height;
        padding: $assist-textarea-padding;
        font-size: $assist-textarea-font-size;
      }
      .e-assist-textarea[placeholder]:empty::before {
        content: attr(placeholder);
        cursor: text;
      }
      &.e-footer-focus-wave-effect {
        @if ($skin-name == 'Material3' or $skin-name == 'fluent2' or $skin-name == 'material' or $skin-name == 'material-dark') {
          &::before,
          &::after {
            content: '';
            position: absolute;
            bottom: 0;
            height: $focus-wave-effect-height;
            width: 0;
            transition: width .2s ease-out;
          }
          &::before {
            left: 50%;
          }
          &::after {
            right: 50%;
          }
          &.e-footer-focused::before {
            width: 50%;
          }
          &.e-footer-focused::after {
            width: 50%;
          }
        }
      }

      &:not(.e-footer-template) {
        display: flex;
        flex-direction: column;
        border-radius: $assist-footer-border-radius;
        @if $theme-name == 'Material3' or $theme-name == 'material' or $theme-name == 'Material3-dark' or $theme-name == 'material-dark' {
          border-top-right-radius: $footer-border-top-right-radius;
          border-top-left-radius: $footer-border-top-left-radius;
        }
        &.e-footer-expanded .e-textarea-icons-wrapper {
          display: block;
          .e-footer-icons-wrapper {
            padding: $assist-multirow-footer-icons-padding;
            justify-content: end;
          }
          .e-assist-textarea {
            width: 100%;
          }
        }
        &.e-toolbar-bottom .e-textarea-icons-wrapper {
          display: block;
          .e-footer-icons-wrapper {
            padding: $assist-multirow-footer-icons-padding;
            .e-toolbar{
              width: 100%;
              .e-toolbar-left .e-toolbar-item:first-child {
                margin-left: unset;
              }
            }
          }
        }
        .e-assist-send {
          font-size: $send-icon-size;
        }
        .e-assist-clear-icon {
          font-size: $clear-icon-size;
        }
        .e-assist-send.disabled {
          pointer-events: none;
          opacity: .5;
          cursor: not-allowed;
        }
        .e-assist-send.enabled {
          pointer-events: auto;
          opacity: 1;
          cursor: pointer;
        }
        .e-textarea-icons-wrapper {
          display: flex;
          flex-direction: row;
        }
      }
      .e-hidden-textarea {
        display: none;
      }
    }
    .e-banner-view {
      margin-left: $banner-view-margin-left;
    }
    .e-header-icon,
    .e-prompt-icon,
    .e-output-icon {
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
    }
    .content-header,
    .e-content-container,
    .e-output,
    .e-content {
      display: flex;
      flex-direction: column;
    }
    .e-footer .e-assist-stop {
      height: $response-stopper-height;
      width: $response-stopper-width;
      padding: 6px;
      line-height: $response-stopper-line-height;
      font-weight: $response-stopper-font-weight;
      font-size: $response-stopper-font-size;
      opacity: 1;
      pointer-events: auto;
      cursor: pointer;
      justify-content: center;
      border-radius: $stop-response-border-radius;
      border: $stop-response-border;
    }
    .e-prompt-icon,
    .e-output-icon,
    .e-assist-edit-icon {
      justify-content: center;
    }
    .e-prompt-icon,
    .e-output-icon,
    .e-assist-edit-icon,
    .e-prompt-container,
    .e-assist-stop {
      display: flex;
      align-items: center;
    }
    .e-content-footer.e-assist-toolbar-active,
    .e-output-container:hover .e-content-footer,
    .e-output-container:has(:focus-visible) .e-content-footer,
    .e-prompt-container:hover .e-prompt-toolbar,
    .e-prompt-container:has(:focus-visible) .e-prompt-toolbar {
      opacity: 1;
      transition: opacity .3s;
    }
    .e-views .e-content-body:focus-visible,
    .e-views .e-content-container .e-prompt-text:focus-visible,
    .e-views .e-suggestions li:focus-visible,
    .e-footer:not(.e-footer-template) .e-assist-send:not(.disabled):focus-visible,
    .e-assist-stop:focus-visible {
      outline: 1px solid;
    }
    &.e-rtl {
      .e-view-header .e-toolbar-item {
        &.e-assist-view-header,
        &.e-custom-view-header {
          .e-tbar-btn .e-btn-icon {
            padding: $custom-view-header-btn-icon-padding;
          }
        }
      }
      .e-suggestion-header {
        text-align: left;
        margin: $rtl-suggestion-header-margin;
      }
      .e-suggestions {
        li {
          margin: $suggesstions-list-margin-rtl;
        }
      }
      .e-views {
        .e-content-body {
          blockquote {
            padding-left: $content-body-padding-left;
            border-left: $content-body-border-left;
            padding-right: $content-body-padding-right;
          }
          pre {
            span.e-code-copy {
              right: unset;
              left: 10px;
            }
          }
        }
      }
      .e-loading-body,
      .e-content-body,
      .e-loading-footer {
        padding: $rtl-loading-footer-padding;
      }
      .e-prompt-icon {
        margin: $rtl-prompt-icon-margin;
      }
      .e-output-icon {
        margin: $rtl-output-icon-margin;
      }
      .e-footer {
        .e-footer-icons-wrapper {
          padding: $assist-footer-icons-rtl-padding;
          padding-right: $rtl-footer-icons-wrapper-padding;
        }
      }
    }
    .e-footer-icons-wrapper .e-upload {
      display: none;
    }

    .e-prompt-content .e-prompt-uploaded-files:has(.e-assist-uploaded-file-item) {
      align-self: flex-end;
      border-radius: $prompt-uploded-file-border-radius;
      padding: $prompt-uploded-file-padding;
      margin-bottom: $uploaded-file-item-bottom;
      justify-content: flex-end;
      gap: $prompt-uploaded-files-gap;
    }

    .e-footer .e-assist-drop-area::-webkit-scrollbar,
    .e-prompt-content .e-prompt-uploaded-files::-webkit-scrollbar {
      display: none;
    }

    .e-footer .e-assist-drop-area:has(.e-assist-uploaded-file-item) {
      margin: $prompt-files-container-margin;
    }

    .e-footer .e-assist-drop-area {
      overflow-y: auto;
      overflow-x: hidden;
      white-space: normal;
      max-width: inherit;
      max-height: 225px;
      scrollbar-width: thin;
      row-gap: $assist-drop-area-gap;

      .e-assist-uploaded-file-item {
        margin: $prompt-files-margin;
      }
    }

    .e-footer .e-assist-drop-area,
    .e-prompt-content .e-prompt-uploaded-files {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      .e-assist-uploaded-file-item {
        display: flex;
        flex-direction: row;
        border-radius: $uploaded-file-item-border-radius;
        position: relative;
        align-items: center;
        width: 144px;
        max-width: 144px;
        min-width: 144px;
        &:not(:has(.e-assist-clear-icon)) .e-assist-file-details {
          padding-right: $file-details-padding-right;
        }
      }

      .e-assist-file-format-icon {
        padding: $file-format-icon-padding;
        font-size: $assist-file-document-icon-font-size;
      }
      .e-assist-file-details {
        display: flex;
        flex-direction: column;
        padding: $attached-file-details-padding;
        min-width: 0;
        flex: 1 1 auto;
      }

      .e-assist-file-name {
        font-weight: $attached-file-text-font-weight;
      }

      .e-assist-file-name,
      .e-assist-file-size {
        font-size: $attached-file-text-font-size;
        line-height: $attached-file-text-line-height;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .e-assist-clear-icon {
        cursor: pointer;
        font-weight: bold;
        padding: $attached-file-clear-icon-padding;
        border-radius: $assist-clear-icon-border-radius;
      }

      .e-assist-progress-bar {
        width: 100%;
        border-radius: $assist-progress-bar-border-radius;
        overflow: hidden;
        position: absolute;
        bottom: 0;
        left: 0;
      }
      .e-assist-progress-fill {
        height: $assist-progress-fill-height;
        width: 0;
        transition: width .3s;
      }
    }
    .e-prompt-details:has(.e-prompt-uploaded-files) {
      display: flex;
      flex-direction: column;
      .e-prompt-text {
        align-self: flex-end;
      }
    }
    .e-prompt-content:has(.e-prompt-uploaded-files):not(:has(.e-prompt-text)) {
      +.e-prompt-toolbar {
        display: none;
      }
    }

    .e-toolbar-item .e-assistview-speech-to-text {
      border: none;
      box-shadow: none;
    }

    .e-toolbar-item .e-assistview-speech-to-text:hover,
    .e-toolbar-item .e-assistview-speech-to-text:focus,
    .e-toolbar-item .e-assistview-speech-to-text:active {
      background: none;
      box-shadow: none;
    }
  }

  @media (max-width: 760px) {
    .e-aiassistview {
      .e-view-container {
        width: 100%;
      }
      .e-footer,
      .e-upload-failure-alert {
        width: calc(100% - 10px); //for margin space
      }
      .e-view-container .e-suggestions,
      .e-prompt-content {
        padding-right: $prompt-content-padding-right;
      }
      &.e-rtl {
        .e-view-container .e-suggestions,
        .e-prompt-content {
          padding: $rtl-prompt-content-padding;
        }
      }
    }
  }
}