/* Want Button */
  
  button  {
      border: none;
  }
    .wand-button {
        position: fixed;
        bottom: 32px; 
        right: 32px;
      background-color: var(--e-global-color-7a3858a);
      cursor: pointer;
     z-index: 499;
    }
    .wand-button:hover {
     background-color: #67CEFF !important;
    }
    .wand-icon {
        display: flex;
        justify-content: center;
        align-items: center;
        max-height: 32px;
      background-color: var(--e-global-color-7a3858a);
      border: none;
    }
    .wand-icon:hover {
        background-color: var(--e-global-color-7a3858a) !important;
    }
    /* Chat Modal */
    .chat-modal .show {
        display: flex;
    }
    .chat-modal .hide {
      display: none;
    }
    .chat-modal {
        display: flex;
        flex-direction: column;
        height: 100vh;
        width:100%;
    position:fixed;
    bottom: 0; 
    right: 0;
    z-index: 500;
      overflow: hidden;
      box-shadow: -4px 1px 44px 0 rgba(0, 0, 0, 0.09);
    }
    
    /* Chat Header*/
    .chat-header {
        display: flex;
        justify-content: space-between;
      border-bottom: 1px solid #ececec;
    }
    .chat-logo {
        display: flex;
        gap: 2;
        align-items: center;
    }
    .logo-wordmark {
      color: var(--e-global-color-7a3858a);
      font-weight: bold;
      margin: 0px;
    }
    #closeChat {
        display: flex;
        justify-content: center;
        align-items: center;
        max-height: 32px;
        max-width: 32px;
        border: none;
      cursor: pointer;
      color: #000000;
    }
        #closeChat:hover {
        background-color: #f2f2f2 !important;
    }
    /* Chat Body */
    .chat-body {
      flex: 1;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      min-height: 0;
    }

    .chat-container {
      padding: 16px;
      display: flex;
      flex-direction: column;
      min-height: 100%;
    }
    .chat-container > :first-child {
      margin-top: auto !important;
    }
    .chat-welcome {
      margin-bottom: 12px;
    }
    .chat-welcome h2 {
      font-weight: 500;
    }
    .chat-welcome p {
      font-size: 14px;
      color: #00000040;
      margin-bottom: 0px;
    }
    .chat-message {
      display: flex;
      flex-direction: column;
      margin-bottom: 12px;
    }
    .chat-message .timestamp {
      font-size: 12px;
      color: #00000040;
      margin-top: 4px;
      font-weight: 300;
    }
    .chat-message.user {
      display: flex;
      align-items: end;
    }
    .user .chat-text {
      display: flex;
      width: fit-content;
      max-width: 85%;
      padding: 8px 12px;
      flex-direction: column;
      align-items: flex-start;
      border-radius: 8px;
      border: 1px solid #C6ECF8;
      background: #E8F8FC;
      overflow-wrap: anywhere;
      word-break: break-word;
    }
    .assistant .chat-avatar {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 8px;
      color: var(--e-global-color-7a3858a);
      font-weight: 600;
    }
    .assistant .chat-text {
      padding: 8px 0px 8px 8px;
      overflow-wrap: anywhere;
      word-break: break-word;
      display: block;
      max-width: 85%;
    }
    .chat-text table {
      overflow-wrap: normal;
      word-break: keep-all;
      width: 100%;
      margin-bottom: 0px !important;
    }
    .chat-text table thead {
        border: none;
    }
    .chat-text table thead th {
      padding: 8px;
      text-align: left;
      font-size: 14px;
      background-color: #f9f9f9;
      border: none !important;
    }
    .chat-text table thead th:first-of-type {
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;
    }
    .chat-text table thead th:last-of-type {
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
    }
    .chat-text table tbody tr {
      border-bottom: 1px solid #ececec;
    }
    .chat-text table td {
        
    border: none !important;
    background-color: #FFFFFF !important;
      padding: 8px;
      text-align: left;
      font-size: 12px;
    }
    /* Chat Footer */
    .chat-footer {
      border-top: 1px solid #ececec;
      background-color: #ffffff;
    }
    .input-container {
    display: flex;
    flex-direction: row;
      border-radius: 8px;
      border: 2px solid #ececec;
      background: #fff;
      box-shadow: -2px 3px 14px 0 rgba(0, 0, 0, 0.05);
    }
    .input-container-focus {
      border: 2px solid #C6ECF8 !important;
      box-shadow:
        -1px 2px 4px 0 rgba(0, 0, 0, 0.08),
        -2px 3px 14px 0 rgba(0, 0, 0, 0.05),
        -1px 1px 4px 0 rgba(224, 245, 255, 0.05) inset;
    }
    .input-container form {
      display: flex;
      flex: 1;
      align-items: center;
    }
    .chat-input {
      width: 100%;
      resize: none;
      overflow-y: hidden;
      min-height: auto;
      max-height: 10em;
      line-height: 1.2em;
      box-sizing: border-box;
      border: none;
    }
    .chat-input:focus {
      border: none !important;
      box-shadow: none !important;
    }
    .chat-input:focus-visible {
      outline: none;
    }
    /* Enable scrolling when max-height is hit */
    .chat-input.scrolling {
      overflow-y: auto;
    }
    .textarea-btn-container {
        display: flex;
        justify-content: end;
        align-items: end;
    }
    .send-prompt {
        border: none;
    }
    textarea {
      width: 100%;
      field-sizing: content;
      min-height: fit-content;
      max-height: 10em;
      resize: none;
      text-wrap: auto;
      overflow-wrap: anywhere;
      word-break: auto-phrase;
    }
    .hide-scrollbar {
      scrollbar-width: none;

      -ms-overflow-style: none;

      &::-webkit-scrollbar {
        display: none;
      }
    }
    
    
        @media (min-width: 576px) {
    .chat-modal {
        width: 425px;
    }
    }