@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

*{ 
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", serif;
  }

  :root {
    /* Dark theme colors */
    --text-color: #edf3ff;
    --subheading-color: #97a7ca;
    --placeholder-color: #c3cdde;
    --primary-color:  #101623;
    --secondary-color: #283045;
    --secondary-hover-color: #333e58;
    --scrollbar-color: #626a7f;
    }


    body.light-theme{
      /* Light theme colors */
      --text-color: #090c13;
      --subheading-color: #7b8cae;
      --placeholder-color: #606982;
      --primary-color:  #f3f7ff;
      --secondary-color: #dce6f9;
      --secondary-hover-color: #d2ddf2;
      --scrollbar-color: #a2aac2;

    }
    body {
      color: var(--text-color);
      background: var(--primary-color);
      }
      .container {
        padding: 32px 0 60px; 
        overflow-y: auto;
        max-height: calc(100vh - 127px);
        scrollbar-color: var(--scrollbar-color) transparent;
        }
        .container :where(.app-header, .suggestions, .message, .prompt-wrapper, .disclaimer-text) {
        margin: 0 auto;
        width: 100%; 
        padding: 0;
        max-width: 980px;
        } 


        /*App header Styling*/
        .container .app-header {
          margin-top: 4vh;
        }
        .app-header .heading {
          font-size: 3rem;
          width: fit-content;
          background: linear-gradient(to right, #1d7efd,
          #8f6fff);
          background-clip: text;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          }
          .app-header .sub-heading{
            font-size: 2.6rem;
            margin-top: - 5px;
            color:var(--subheading-color);
            }
    
            /* suggestions list stylings */
      .container .suggestions {
        display: flex;
        gap: 15px;
        margin-top: 9.5vh;
        list-style: none;
        overflow-x: auto;
        scrollbar-width: none;
      }

      body.chats-active .container :where(.app-header, .suggestions){
        display: none; 
      }
      .suggestions .suggestions-item {
        width: 228px;
        padding: 18px;
        flex-shrink: 0;
        display:flex;
        flex-direction:column;
        align-items: flex-end;
        cursor: pointer;
        justify-content: space-between;
        border-radius: 12px;
        background: var(--secondary-color);
        transition: 0.3s ease;
        }
        .suggestions .suggestions-item:hover{
          background: var(--secondary-hover-color);
        }
        .suggestions .suggestions-item .text {
          font-size: 1.1rem;
        }

        .suggestions .suggestions-item span{
          height: 45px;
          width: 45px;
          margin-top: 35px;
          display: flex;
          align-self: flex-end;
          align-items: center;
          justify-content: center;
          border-radius: 50%;
          color:#1d7efd;
          background: var( --primary-color);
        }

        .suggestions .suggestions-item:nth-child(2) span{
          color:#28a745;
                  }
               .suggestions .suggestions-item:nth-child(3) span {
          color:#ffc107;
               }
              .suggestions .suggestions-item:nth-child(4) span{
          color:#6f42c1;
              }

/*Chats container styles*/

.container .chats-container{
  display: flex;
  gap: 20px;
  flex-direction: column;
}
.chats-container .message {
  display: flex;
  gap: 11px;
  align-items: center;
}

.chats-container .bot-message .avatar{
  height: 43px;
  width: 43px;
  flex-shrink: 0;
  padding: 6px;
  align-self: flex-start;
  margin-right: - 7px;
  border-radius: 50%;
  background: var( -- secondary-color);
  border: 1px solid var( --secondary-hover-color);
    }

    .chats-container .bot-message.loading .avatar{
      animation: rotate 3s linear infinite;
     }
     @keyframes rotate{
      100% {
        transform: rotate(360deg);
      }
     }

    .chats-container.bot-message{
      margin :9px auto;
    }
.chats-container .message .message-text {
  padding: 3px 16px;
  word-wrap: break-word;
  white-space: pre-line;
  }
  .chats-container .user-message{
    flex-direction: column;
    align-items: flex-end;
      }
  .chats-container .user-message .message-text{
    padding: 12px 16px;
    max-width: 75%;
    border-radius: 13px 13px 3px 13px;
    background: var(--secondary-color);
  }


  .chats-container .user-message .img-attachment{
    width:50%;
    margin-top: -7px;
    border-radius:13px 3px 13px 13px;
  }
  .chats-container .user-message .file-attachment{
    
    display: flex;
    gap: 6px;
    align-items: center;
    padding:10px;
    margin-top: -7px;
    border-radius:13px 3px 13px 13px;
    background: var(--secondary-color);
  }

  .chats-container .user-message .file-attachment span{
    color:#1d7efd;

  }
 /* Prompt container stylings */
 .prompt-container{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 16px 0;
  background: var(--primary-color);
    }

    .prompt-container :where( .prompt-wrapper, .prompt-form, .prompt-actions) {
      display: flex;
      gap: 12px;
      height: 56px;
      align-items: center;
      }

      .prompt-wrapper .prompt-form {
        width: 100%;
        height: 100%;
        border-radius: 130px;
        background: var( --secondary-color);
      }

      .prompt-form .prompt-input{
        height: 100%;
        width: 100%;
        background: none;
        outline: none;
        border: none;
        font-size: 1rem;
        padding-left: 24px;
        color: var(--text-color);
        }

        .prompt-form .prompt-input::placeholder {
          color: var(--placeholder-color);
        }
        .prompt-wrapper button {
          width: 56px;
          height: 100%;
          border: none;
          cursor: pointer;
          border-radius: 50%;
          font-size: 1.4rem;
          flex-shrink: 0;
          color: var(--text-color);
          background: var( --secondary-color);
          transition: var(--secondary-hover-color);
          transition: 0.3s ease;
        }
        .prompt-wrapper button:is(button:hover, .file-icon, #cancel-file-btn) {
          background: var(--secondary-hover-color);
        }

        .prompt-form .prompt-actions{
          gap: 5px;
          margin-right: 7px;
        }
        .prompt-wrapper .prompt-form :where(.file-upload-wrapper, button, img)
        {
          position: relative;
          height: 45px;
          width: 45px;
          }
          

     
          .prompt-form #send-prompt-btn{
            color: #fff;
            background:#1d7efd;
            display: none;
            }
            .prompt-form .prompt-input:valid ~ .prompt-actions
            #send-prompt-btn {
            display: block;
            }
            .prompt-form #send-prompt-btn:hover{
              background: #0264e3;
            }

            .prompt-form .file-upload-wrapper :where(button,img){
              position: absolute;
              border-radius: 50%;
              object-fit: cover;
              display: none;

            }

            .prompt-form .file-upload-wrapper #add-file-btn,
            .prompt-form .file-upload-wrapper.active.img-attached img,
            .prompt-form .file-upload-wrapper.active.file-attached .file-icon,
            .prompt-form .file-upload-wrapper.active:hover
            #cancel-file-btn{
              display: block;
            }

            .prompt-form .file-upload-wrapper.active #add-file-btn{
              display: none;
            }
            .prompt-form #cancel-file-btn{
              color:#d62939;
            }
            .prompt-form :is(#cancel-file-btn,#stop-response-btn:hover){
              color:#d62939;
            }

            .prompt-form .file-icon{
              color:#1d7efd;
            }.prompt-form #stop-response-btn,
            body.bot-responding .prompt-form .file-upload-wrapper{ 
              display: none;
            }
            body.bot-responding .prompt-form #stop-response-btn{
              display: block;
            }

            .prompt-container .disclaimer-text {
              text-align: center;
              font-size: 0.9rem;
              padding: 16px 20px 0;
              color: var( --placeholder-color);
              }
              
              body::before {
                content: "";
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: url('a-logo.png') no-repeat center / auto;
                opacity: 0.3; /* Adjust this value for more/less fade */
                z-index: -1; /* Keeps it behind content */
              }