/* Chatbot */

/* Variables de configuración */
:root{
  --chat-container-height: 400px;
  --chat-container-font-family: "DM Sans", sans-serif;
  --chat-container-border: #7F756F;
  --chat-container-bg: #FFF;
  --chat-description-color: #737376;
  --chat-message-color: #343541;
  --chat-inner-border-color: #ACACBE;
  --chat-textarea-bg: #F7F7F8;
  --chat-submit-default-color: #a0a5aa;
  --chat-submit-enabled-color: #000;
  --chat-submit-disabled-color: #d63638;
  --chat-submit-hover-color: #0073aa;
}

/* Contenedor principal */
.chatbot-container{
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid var(--chat-container-border);
  background-color: var(--chat-container-bg);
  height: var(--chat-container-height);
  max-height: 80vh;
  font-family: var(--chat-container-font-family);
}
  /* Contenedores secundarios */
  .chatbot-container .chatbot-toolbar,
  .chatbot-container .chatbot-history,
  .chatbot-container .chatbot-actions{
    width: 100%;
  }
  /* Top toolbar */
  .chatbot-container .chatbot-toolbar{
    display: flex;
    border-bottom: 1px solid var(--chat-inner-border-color);
  }
  @media (max-width: 600px) {
    .chatbot-container .chatbot-toolbar {
      flex-direction: column;
    }
  }
    .chatbot-container .chatbot-toolbar .left,
    .chatbot-container .chatbot-toolbar .right{
      flex: 1;
      align-content: end;
    }
    .chatbot-container .chatbot-toolbar .left{
      text-align: left;
    }
      @media (max-width: 600px) {
        .chatbot-container .chatbot-toolbar .left {
          display: none;
        }
      }
    .chatbot-container .chatbot-toolbar .center{
      flex: 3;
      text-align: center;
    }
      @media (max-width: 600px) {
        .chatbot-container .chatbot-toolbar .center {
          display: none;
        }
      }
      .chatbot-container .chatbot-toolbar .center .logo{
          text-align: center;
          margin: 1rem;
        }
      .chatbot-container .chatbot-toolbar .center .description{
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px;
        letter-spacing: 0.5px;
        text-align: center;
        color: var(--chat-description-color);
        margin: 1rem;
      }
    .chatbot-container .chatbot-toolbar .right{
      text-align: right;
    }

  /* Chat history */
  .chatbot-container .chatbot-history{
    flex-grow: 1;
    overflow-y: scroll;
    scroll-behavior: smooth;
  }
    .chatbot-container .chatbot-history .response{
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      padding: 1rem 2rem;
    }
    .chatbot-container .chatbot-history .response:not(:last-child){
      border-bottom: 1px dotted var(--chat-inner-border-color);
    }

    .chatbot-container .chatbot-history .response.system-response{
      background-color: #F9F3F5;
    }
      .chatbot-container .chatbot-history .response .profile{
        padding-right: 1rem;
      }
      .chatbot-container .chatbot-history .response .message{
        color: var(---chat-message-color);
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 25px;
      }

        /* Formato de salida de respuestas */
        .chatbot-container .chatbot-history .response .message p{
          color: var(---chat-message-color);
          font-size: 16px;
          font-style: normal;
          font-weight: 400;
          line-height: 25px;
        }
        .chatbot-container .chatbot-history .response .message a {
          text-decoration: underline;
          color: #4169e1;
        }
        .chatbot-container .chatbot-history .response .message h1 {
          font-size: 22px;
        }
        .chatbot-container .chatbot-history .response .message h2 {
          font-size: 20px;
        }
        .chatbot-container .chatbot-history .response .message h3 {
          font-size: 18px;
        }
        .chatbot-container .chatbot-history .response .message p:first-of-type {
          margin-top: 0;
        }
        .chatbot-container .chatbot-history .response .message p:last-of-type {
          margin-bottom: 0;
        }
        .chatbot-container .chatbot-history .response .message .loaderSpinner{
          font-weight: 800;
          font-size: 24px;
        }

    /* Formato de notices para avisos y errores */
    .chatbot-container .chatbot-history .notice{
      background: #fff;
      border: 1px solid #c3c4c7;
      border-radius: 10px;
      border-left-width: 4px;
      box-shadow: 0 1px 1px rgba(0, 0, 0, .04);
      margin: 5px 15px 2px;
      padding: 1rem 2rem;
      font-size: 15px;
    }
      .chatbot-container .chatbot-history .notice.error{
        border-color: #d63638;
      }
      .chatbot-container .chatbot-history .notice.error-alt{
        border-color: #d63638;
        background-color: #fcf0f1;
      }
      .chatbot-container .chatbot-history .notice.warning{
        border-color: #dba617;
      }
      .chatbot-container .chatbot-history .notice.warning-alt{
        border-color: #dba617;
        background-color: #fcf9e8;
      }
      .chatbot-container .chatbot-history .notice.success{
        border-color: #00a32a;
      }
      .chatbot-container .chatbot-history .notice.success-alt{
        border-color: #00a32a;
        background-color: #edfaef;
      }
      .chatbot-container .chatbot-history .notice.info{
        border-color: #72aee6;
      }
      .chatbot-container .chatbot-history .notice.info-alt{
        border-color: #72aee6;
        background-color: #f0f6fc;
      }

  /* Chatbot prompt, actions y footer */
  .chatbot-container .chatbot-actions{
    border-top: 1px solid var(--chat-inner-border-color);
  }
    .chatbot-container .chatbot-actions .action-content:first-of-type{
      padding-top: 1rem;
    }
    .chatbot-container .chatbot-actions .action-content{
      padding: 0rem 2rem 1rem 2rem;
    }
      .chatbot-container .chatbot-actions .typing-textarea{
        position: relative;
      }
        .chatbot-container .chatbot-actions .typing-textarea textarea{
          resize: none;
          height: 42px;
          width: 100%;
          border: none;
          padding: 10px 35px 10px 10px;
          color: #32373c;
          font-size: 1rem;
          border-radius: 4px;
          max-height: 250px;
          overflow-y: auto;
          background: var(--chat-textarea-bg);
          outline: 1px solid #D9D9E3;
          line-height: 1.3rem;
        }
        .chatbot-container .chatbot-actions button {
          display: flex;
          align-items: center;
          cursor: pointer;
          background: none;
          border: none;
          padding: 0;
          margin: 0;
          font-family: var(--chat-container-font-family);
          transition: all .3s;
        }
        .chatbot-container .chatbot-actions button{
          color: var(--chat-submit-default-color);
        }
        .chatbot-container .chatbot-actions button:disabled{
          color: var(--chat-submit-disabled-color);
        }
        .chatbot-container .chatbot-actions button:not(:disabled):hover {
          color: var(--chat-submit-hover-color);
        }
        .chatbot-container .chatbot-actions .typing-textarea button#chatbot-submit {
          position: absolute;
          right: 1px;
          top: 0px;
          width: 43px;
          height: 40px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        textarea:not(:placeholder-shown) + button#chatbot-submit svg {
          color: var(--chat-submit-enabled-color);
        }
    .chatbot-container .chatbot-actions button#new-chat{
      font-weight: bold;
    }
    .chatbot-container .chatbot-actions p{
      color: #444654;
      text-align: center;
      font-size: 12px;
      font-style: normal;
      font-weight: 400;
      line-height: 16px; /* 133.333% */
      margin: 1em 0;
    }

  /* Botones y enlaces para nuevo chat y actualizar */
  .chatbot-container .action-btn{
    display: inline-flex;
    align-items: center;
    text-transform: none;
    padding: 10px 12px;
    font-family: inherit;
    font-weight: 700;
    font-size: 0.875rem;
    line-height: 1em;
  }
    .chatbot-container .action-btn.disabled,
    .chatbot-container .action-btn.disabled:hover,
    .chatbot-container .action-btn.disabled:focus{
      cursor: default;
      color: #a0a5aa;
    }
    .chatbot-container .action-btn svg{
      margin-right: 0.25rem;
    }
  .chatbot-container button.action-btn,
  .chatbot-container button.action-btn:active{
    border-radius: 4px;
    border-color: #bdbdbd;
    color: #1a1e00;
    border-width: 1px;
  }
  .chatbot-container .chatbot-history button.action-btn:hover,
  .chatbot-container .chatbot-history button.action-btn:focus{
    color: #1a1e00;
    background-color: #E2E7B0;
    border-color: #bdbdbd;
  }

/* CSS endless rotation animation */
.rotating {
  -webkit-animation: rotating 2s linear infinite;
  -moz-animation: rotating 2s linear infinite;
  -ms-animation: rotating 2s linear infinite;
  -o-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
}
@-webkit-keyframes rotating /* Safari and Chrome */ {
  from {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* CSS skeleton animation */
:root{
  --skeleton-bg-color: #edeef1;
  --skeleton-shine-color: #f6f7f8;
}
.skeleton {
  background-size: 200% 100% !important;
  background: linear-gradient(90deg, var(--skeleton-bg-color) 0px, var(--skeleton-shine-color) 50px, var(--skeleton-bg-color) 150px);
  animation: shine 2s linear infinite;
}
@keyframes shine {
  0% { background-position-x: -100px; }
  100% { background-position-x: -100%; }
}