@use 'variables' as *;
@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: $toolbar-left-bigger-height;
          }
          .e-toolbar-item {
            &.e-assist-view-header,
            &.e-custom-view-header {
              @if ($skin-name == 'highcontrast') {
                // To apply box-shadow styling during keyboard navigation
                padding: $bigger-view-header-padding;
              }
              @else {
                padding: $bigger-view-header-padding;
              }
              .e-tbar-btn {
                padding: $bigger-tbar-btn-padding;
                .e-btn-icon {
                  padding: $bigger-btn-icon-padding;
                }
              }
            }
          }
        }
      }
    }

    .e-view-content {
      height: $view-content-bigger-height;
    }
    .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: $bigger-loading-footer-padding;
    }
    .e-prompt-text {
      padding: $prompt-text-bigger-padding;
      line-height: $bigger-prompt-text-line-height;
      min-height: 40px;
      box-sizing: border-box;
    }
    .e-content-container {
      font-size: $bigger-content-container-font-size;
    }
    .e-suggestion-header {
      font-size: $bigger-suggestion-header-font-size;
      font-weight: $suggesstions-header-bigger-font-weight;
      margin-bottom: $bigger-suggestion-header-margin-bottom;
    }
    .e-suggestions {
      &.e-suggestion-item-template ul li {
        padding: $bigger-suggestion-item-padding;
      }
      li {
        line-height: $bigger-suggestion-li-line-height;
        font-weight: $suggesstions-bigger-font-weight;
        padding: $suggesstions-bigger-list-padding;
        margin: $suggesstions-bigger-list-margin;
        height: $bigger-suggestion-li-height;
        box-sizing: border-box;
      }
    }
    .e-footer {
      .e-assist-stop {
        height: $response-stopper-bigger-height;
        width: $response-stopper-bigger-width;
        min-height: $response-stopper-bigger-height;
        padding: $assist-stop-padding-bigger;
        box-sizing: border-box;
        line-height: $response-stopper-bigger-line-height;
        font-weight: $response-stopper-bigger-font-weight;
        font-size: $response-stopper-bigger-font-size;
      }
      &:not(.e-footer-template) {
        .e-assist-send {
          font-size: $send-icon-size-bigger;
        }
        .e-assist-clear-icon:not(.e-assist-clear-icon-hide) {
          font-size: $clear-icon-size-bigger;
        }
        &.e-toolbar-bottom .e-textarea-icons-wrapper {
          .e-footer-icons-wrapper {
            padding: $assist-multirow-footer-icons-padding-bigger;
          }
        }
      }
      .e-footer-icons-wrapper {
        gap: $assist-footer-icons-gap-bigger;
        padding: $assist-footer-icons-padding-bigger;
        .e-toolbar {
          height: $assist-footer-tbar-min-height-bigger;
          min-height: $assist-footer-tbar-min-height-bigger;
          background: $assist-view-bg-color;
          border: none;
          box-shadow: none;
          .e-tbar-btn {
            min-height: $assist-footer-tbar-min-height-bigger;
            min-width: $assist-footer-tbar-min-height-bigger;
            max-width: $assist-footer-tbar-min-height-bigger;
          }
          .e-tbar-btn:has(.e-assist-stop) {
            max-width: $assist-footer-tbar-min-height-bigger;
            .e-btn-icon {
              min-width: $assist-footer-tbar-min-height-bigger;
            }
          }
          .e-toolbar-item {
            min-height: unset;
            min-width: unset;
            max-height: $assist-footer-tbar-min-height-bigger;
            .e-assistview-speech-to-text.e-tbar-btn.e-speech-to-text{
              border: none;
              box-shadow: none;
              width: auto;
              height: auto;
            }
            .e-assistview-speech-to-text.e-btn.e-speech-to-text {
              min-height: $assist-footer-tbar-min-height-bigger;
              min-width: $assist-footer-tbar-min-height-bigger;
            }
          }
          .e-toolbar-right .e-toolbar-item:last-child {
            margin-right: 0;
          }
        }
        .e-toolbar-items {
          background: $assist-view-bg-color;
          border: none;
          box-shadow: none;
        }
        .e-assist-attachment-icon {
          font-size: $assist-attachment-icon-font-size-bigger;
        }
      }
      .e-assist-textarea {
        min-height: $assist-textarea-min-height-bigger;
        line-height: $assist-textarea-line-height-bigger;
        padding: $assist-textarea-padding-bigger;
        font-size: $bigger-assist-textarea-font-size;
      }
    }
    
    &.e-rtl {
      .e-view-header .e-toolbar-item {
        &.e-assist-view-header,
        &.e-custom-view-header {
          .e-tbar-btn .e-btn-icon {
            padding: $bigger-rtl-btn-icon-padding;
          }
        }
      }
      .e-suggestions {
        li {
          margin: $suggesstions-bigger-list-margin-rtl;
        }
      }
      .e-loading-body,
      .e-content-body,
      .e-loading-footer {
        padding: $bigger-rtl-loading-footer-padding;
      }
      .e-footer {
        .e-footer-icons-wrapper {
          padding: $assist-footer-icons-rtl-padding-bigger;
          padding-right: $bigger-footer-icons-wrapper-right;
        }
      }
    }

    // Attachment support related styles
    .e-prompt-content .e-prompt-uploaded-files:has(.e-assist-uploaded-file-item) {
      border-radius: $bigger-prompt-uploded-file-border-radius;
      padding: $bigger-prompt-uploded-file-padding;
      gap: $prompt-uploaded-files-gap-bigger;
    }

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

    .e-footer .e-assist-drop-area {
      .e-assist-uploaded-file-item {
        margin: $bigger-prompt-files-margin;
      }
    }

    .e-footer .e-assist-drop-area,
    .e-prompt-content .e-prompt-uploaded-files {
      .e-assist-uploaded-file-item {
        &:not(:has(.e-assist-clear-icon)) .e-assist-file-details {
          padding-right: $bigger-assist-file-details-right;
        }
      }

      .e-assist-file-details {
        padding: $bigger-attached-file-details-padding;
      }

      .e-assist-clear-icon {
        padding: $bigger-attached-file-clear-icon-padding;
      }
    }

    .e-view-content {
      .e-upload-failure-alert {
        padding: $bigger-file-failure-padding;
        border-radius: $bigger-file-failure-border-radius;
        .e-assist-clear-icon {
          font-size: $bigger-file-failure-close-icon-font-size;
          line-height: $bigger-file-failure-close-icon-line-height;
        }
        .e-failure-message {
          font-size: $bigger-file-failure-msg-font-size;
          line-height: $bigger-file-failure-msg-line-height;
        }
        .e-assist-circle-close {
          font-size: $bigger-file-failure-circle-close-icon-font-size;
          margin-right: $bigger-file-failure-circle-close-icon-margin;
        }
      }
    }
    .e-response-navigation-container {
      .e-assist-next,
      .e-assist-previous {
        width: $assist-footer-tbar-min-height-bigger;
        height: $assist-footer-tbar-min-height-bigger;
        padding: 0;
        line-height: 0;
      }
    }
    //thinking styles
    .e-aiassist-thinking-toggle {
      font-size: 14px;
      line-height: 20px;
      .e-toggle-icon {
        line-height: 20px;
        font-size: 14px;
      }
    }

    .e-aiassist-thinking-toggle .e-active-spinner,
    .e-aiassist-thinking-timeline .e-thinking-timeline-item-container .indicator.e-stage-spinner {
      svg {
        padding: 2px;
        width: 20px !important; /* stylelint-disable-line declaration-no-important */
        height: 20px !important; /* stylelint-disable-line declaration-no-important */
      }
    }

    .e-thinking-title {
      font-size: 16px;
    }

    .e-thinking-description {
      font-size: 14px;
    }

    .e-inline-context-item {
      .e-context-icon {
        font-size: $aiassist-thinking-context-icon-font-size-bigger;
        line-height: $aiassist-thinking-context-icon-line-height-bigger;
      }

      .e-context-badge {
        font-size: $aiassist-thinking-context-badge-font-size-bigger;
        line-height: $aiassist-thinking-context-badge-line-height-bigger;
      }
    }

    .e-single-stage-container {
      font-size: 14px;
      .e-stage-icon {
        font-size: $aiassist-thinking-stage-icon-font-size-bigger;
        line-height: $aiassist-thinking-stage-icon-line-height-bigger;
      }

      &.e-timeline-expanded {
        margin-top: 8px;
      }
    }

    .e-aiassist-thinking-timeline {
      .e-thinking-timeline-item-container {
        .indicator {
          min-width: $thinking-timeline-progress-indicator-min-width-bigger;
          min-height: $thinking-timeline-progress-indicator-min-height-bigger;
          font-size: $thinking-timeline-progress-indicator-font-size-bigger;
        }
        .progress-line::after {
          top: $thinking-timeline-progress-indicator-min-height-bigger;
          height: $aiassist-thinking-progress-line-height-bigger;
        }
      }
    }
  }
}