#block-cci-chatbot {
  z-index: 200; /* in front of all other content */
  position: fixed; right: 0; bottom: 0;
}

#block-cci-chatbot > div {
  position: absolute; right: 0; bottom: 0;
  margin: 2em;

  box-shadow: 0 0.5rem 1rem 0 #00000073;
}

/* Common to Minimized and Expanded versions */

#block-cci-chatbot .shrunk .fa-comments,
#block-cci-chatbot .expanded .dialog-header .fa-comments {
  padding: 0.6rem 0.5rem;
  margin-right: 0.5rem;

  color: #a518e2; background: white;
  border-radius: 2rem;

  font-size: 0.8rem;
}

/* Minimized */

#block-cci-chatbot .shrunk {
  display: flex;
  flex-direction: row;
  align-items: center;

  cursor: pointer;
  padding: 0.5rem 1rem 0.5rem 0.5rem;

  color: white; background: #a518e2;
  border: solid 1px white; border-radius: 2.25rem;

  font-size: 1.125rem; font-weight: 700; white-space: nowrap;
}

#block-cci-chatbot .shrunk:hover {
  background: #9416cb;
}

/* Expanded */

#block-cci-chatbot .expanded {
  display: none;
  flex-direction: column;
  opacity: 0;
  width: 400px;
  height: 520px; /* Let ChatBot decide which height to use */

  background: white;
  border: solid 1px white; border-radius: 0.5rem;

  transition: opacity 1s ease-in;
}

#block-cci-chatbot .expanded .dialog-header {
  display: flex;
  flex-direction: row;
  align-items: center;

  padding: 0.4rem 1rem 0.4rem 0.4rem;

  color: white; background: #a518e2;
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;

  font-size: 1.125rem; font-weight: 700; white-space: nowrap;
}

#block-cci-chatbot .expanded .dialog-header .fa-xmark {
  cursor: pointer;
  margin-left: auto;
  padding: 0.5rem 0 0.5rem 0.5rem;

  font-size: 0.875rem;
  font-weight: 300;
}

/* Generic */
#webchat {
  height: 100%;
  overflow-y: scroll;
  padding: 1rem;
}

#webchat * {
  font-family: "Fira Sans", sans-serif;
  line-height: 20px;
}

#webchat .webchat__stacked-layout__status .webchat__activity-status--slotted {
  margin-bottom: 0.25rem;
  font-size: 0.75rem;
}

/* Chatbot */
#webchat article .webchat__bubble--nub-on-top .webchat__bubble__content {
  color: #222222; background: #f2f2f2;
  border-color: #f2f2f2;
  border-radius: 10px 10px 0 10px;
}
#webchat article .webchat__bubble--nub-on-top .webchat__bubble__content .webchat__text-content {
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
}
#webchat article .webchat__bubble--nub-on-top .webchat__bubble__content .webchat__link-definitions__list-item-box {
  background: transparent;
  border: none;
  border-radius: 0;
}
#webchat article .webchat__bubble--nub-on-top .webchat__bubble__content .webchat__link-definitions__badge {
  border: none;
}
#webchat article .webchat__bubble--nub-on-top .webchat__bubble__content .webchat__link-definitions,
#webchat article .webchat__bubble--nub-on-top .webchat__bubble__content .webchat__link-definitions .webchat__link-definitions__list {
  gap: 0;
  margin: 0;
}
#webchat article .webchat__bubble--nub-on-top .webchat__bubble__content .webchat__link-definitions .webchat__link-definitions__list .webchat__link-definitions__list-item-body {
  padding: 0;
}
#webchat article .webchat__bubble--nub-on-top .webchat__bubble__content .webchat__link-definitions .webchat__link-definitions__list .webchat__link-definitions__badge {
  margin: 2px;
}

/* User */
#webchat article .webchat__bubble--from-user .webchat__bubble__content {
  color: white; background: #6877ff;
  border-color: #6877ff;
  border-radius: 0 10px 10px 10px;
}
#webchat article .webchat__bubble--from-user .webchat__bubble__content p {
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
}

/* Send box */
#webchat .webchat__send-box__main {
  display: block;
  padding: 0 0.25rem 0.25rem 0;

  color: #222222;
  border: solid 1px #e6e6e6;
  border-radius: 10px;
}
#webchat .webchat__send-box__main form {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
}
#webchat .webchat__send-box__main form input {
  border-radius: 0;
}
#webchat .webchat__send-box__main form input::placeholder {
  color: #919191;
}
#webchat .webchat__send-box__main form textarea {
  border-radius: 0;
}
#webchat .webchat__send-box__main form textarea::placeholder {
  color: #919191;
}

#webchat .webchat__send-box__main .webchat__icon-button {
  fill: #373cf5;
  margin-left: auto;
}

#webchat .webchat__suggested-actions .react-film__flipper {
  display: none;
}

#webchat .webchat__suggested-actions .react-film__filmstrip {
  overflow: visible;
}

#webchat .webchat__suggested-actions .react-film__filmstrip__list {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
}

#webchat .webchat__suggested-actions .react-film__filmstrip__item {
  padding: 0;
}

#webchat .webchat__suggested-actions .webchat__suggested-actions__item-box {
  padding: 0.5rem 0 0 0.5rem;
}

#webchat .webchat__suggested-actions .webchat__suggested-actions__item-box button {
  height: auto;
  padding: 0.25rem 0.5rem;
  font-size: 0.8rem;
  color: #222222;
  border-width: 1px;
  border-radius: 0.5rem;
}

/** Mobile **/
@media (max-width: 768px) {
  #block-cci-chatbot {
    width: 100%;
  }

  #block-cci-chatbot .shrunk {
    margin: 1.25em;
    padding: 0.5em;
    border-width: 2px;
  }

  .page-node-type-formation #block-cci-chatbot .shrunk {
    margin-bottom: 3em;
  }

  #block-cci-chatbot .shrunk > span {
    display: none;
  }

  #block-cci-chatbot .shrunk .fa-comments {
    margin-right: 0;
    padding: 0.6rem 0.4rem;
    font-size: 1.75rem;

    color: white; background: #a518e2;
  }

  #block-cci-chatbot .expanded {
    width: 100%;
    margin: 0;

    border: none;
    box-shadow: none;
  }
}