bot/packages/bot-engine/src/assets/style.css

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --typebot-container-bg-image: none;
  --typebot-container-bg-color: #f7f8ff;
  --typebot-container-font-family: 'Inter';
  --typebot-chat-view-max-width: 700px;
  --typebot-chat-view-bg-color: #ffffff;
  --typebot-chat-view-color: #303235;

  --typebot-button-active-bg-color: #0042da;
  --typebot-button-active-color: #ffffff;
  --typebot-button-inactive-bg-color: #edf2f7;
  --typebot-button-inactive-color: #303235;
  --typebot-button-border: 1px solid var(--typebot-button-active-bg-color);
  --typebot-button-shadow: none;

  --typebot-host-bubble-bg-color: #f7f8ff;
  --typebot-host-bubble-color: #303235;
  --typebot-host-bubble-border: 1px solid var(--typebot-host-bubble-bg-color);
  --typebot-host-bubble-shadow: none;

  --typebot-guest-bubble-bg-color: #ff8e21;
  --typebot-guest-bubble-color: #ffffff;
  --typebot-guest-bubble-border: 1px solid var(--typebot-guest-bubble-bg-color);
  --typebot-guest-bubble-shadow: none;

  --typebot-input-bg-color: #ffffff;
  --typebot-input-color: #303235;
  --typebot-input-border: 1px solid var(--typebot-input-bg-color);
  --typebot-input-shadow: 0 2px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --typebot-input-placeholder-color: #9095a0;

  --typebot-header-bg-color: #ffffff;
  --typebot-header-color: #303235;
  --typebot-header-border: none;
  --typebot-header-shadow: none;
  --typebot-header-max-width: 1000px;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.scrollable-container::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.scrollable-container {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

.StripeElement {
  box-sizing: border-box;
  height: 40px;
  padding: 10px 12px;
}

/* Transitions */
.bubble-enter {
  opacity: 0;
}
.bubble-enter-active {
  opacity: 1;
  transition-property: opacity;
  transition-duration: 500ms;
  transition-timing-function: ease-out;
}
.bubble-exit {
  opacity: 1;
}
.bubble-exit-active {
  opacity: 0;
  transition-delay: 0ms !important;
  transition-property: opacity;
  transition-duration: 400ms;
  transition-timing-function: ease-out;
}

.bubble-typing {
  transition: width 400ms ease-out, height 400ms ease-out;
}

.content-opacity {
  transition: opacity 400ms ease-in 200ms;
}

.bubble1,
.bubble2,
.bubble3 {
  background-color: var(--typebot-host-bubble-color);
  opacity: 0.5;
}

.bubble1 {
  animation: chatBubbles 1s ease-in-out infinite;
}

.bubble2 {
  animation: chatBubbles 1s ease-in-out infinite;
  animation-delay: 0.3s;
}

.bubble3 {
  animation: chatBubbles 1s ease-in-out infinite;
  animation-delay: 0.5s;
}

@keyframes chatBubbles {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
  100% {
    transform: translateY(0);
  }
}

button,
input,
textarea {
  font-weight: 300;
}

.slate-a {
  text-decoration: underline;
}

.slate-html-container > div {
  min-height: 24px;
}

.slate-bold {
  font-weight: bold;
}

.slate-italic {
  font-style: oblique;
}

.slate-underline {
  text-decoration: underline;
}

.comp-input::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: var(--typebot-input-placeholder-color) !important;
  opacity: 1 !important;
}
.comp-input::-moz-placeholder {
  /* Firefox 19+ */
  color: var(--typebot-input-placeholder-color) !important;
  opacity: 1 !important;
}
.comp-input::placeholder {
  color: var(--typebot-input-placeholder-color) !important;
  opacity: 1 !important;
}

.PhoneInput {
  /* This is done to stretch the contents of this component. */
  display: flex;
  align-items: center;
}

.PhoneInput > input {
  color: var(--typebot-input-color);
  background-color: var(--typebot-input-bg-color);
}

.PhoneInput > input::placeholder {
  color: var(--typebot-input-placeholder-color) !important;
}

.PhoneInputInput {
  /* The phone number input stretches to fill all empty space */
  flex: 1;
  /* The phone number input should shrink
	   to make room for the extension input */
  min-width: 0;
  padding: 1rem 1rem 1rem 0;
}

.PhoneInputInput:focus {
  outline: none;
}

.PhoneInputCountryIcon {
  width: calc(
    var(--PhoneInputCountryFlag-height) *
      var(--PhoneInputCountryFlag-aspectRatio)
  );
  height: var(--PhoneInputCountryFlag-height);
  box-shadow: none;
}

.PhoneInputCountryIcon--square {
  width: var(--PhoneInputCountryFlag-height);
}

.PhoneInputCountryIcon--border {
  /* Removed `background-color` because when an `<img/>` was still loading
	   it would show a dark gray rectangle. */
  /* For some reason the `<img/>` is not stretched to 100% width and height
	   and sometime there can be seen white pixels of the background at top and bottom. */
  background-color: var(--PhoneInputCountryFlag-backgroundColor--loading);
  /* Border is added via `box-shadow` because `border` interferes with `width`/`height`. */
  /* For some reason the `<img/>` is not stretched to 100% width and height
	   and sometime there can be seen white pixels of the background at top and bottom,
	   so an additional "inset" border is added. */
  box-shadow: 0 0 0 var(--PhoneInputCountryFlag-borderWidth)
      var(--PhoneInputCountryFlag-borderColor),
    inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth)
      var(--PhoneInputCountryFlag-borderColor);
}

.PhoneInputCountryIconImg {
  /* Fixes weird vertical space above the flag icon. */
  /* https://gitlab.com/catamphetamine/react-phone-number-input/-/issues/7#note_348586559 */
  display: block;
  /* 3rd party <SVG/> flag icons won't stretch if they have `width` and `height`.
	   Also, if an <SVG/> icon's aspect ratio was different, it wouldn't fit too. */
  width: 100%;
  height: 100%;
  border-radius: 5px;
  border: none;
}

.PhoneInputInternationalIconPhone {
  opacity: var(--PhoneInputInternationalIconPhone-opacity);
}

.PhoneInputInternationalIconGlobe {
  opacity: var(--PhoneInputInternationalIconGlobe-opacity);
}

/* Styling native country `<select/>`. */

.PhoneInputCountry {
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
  padding: 0 1rem;
  margin-right: 0;
}

.PhoneInputCountrySelect {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 1;
  border: 0;
  opacity: 0;
  cursor: pointer;
}

.PhoneInputCountrySelect[disabled] {
  cursor: default;
}

.PhoneInputCountrySelectArrow {
  display: block;
  content: '';
  width: var(--PhoneInputCountrySelectArrow-width);
  height: var(--PhoneInputCountrySelectArrow-width);
  margin-left: var(--PhoneInputCountrySelectArrow-marginLeft);
  border-style: solid;
  border-color: var(--PhoneInputCountrySelectArrow-color);
  border-top-width: 0;
  border-bottom-width: var(--PhoneInputCountrySelectArrow-borderWidth);
  border-left-width: 0;
  border-right-width: var(--PhoneInputCountrySelectArrow-borderWidth);
  transform: var(--PhoneInputCountrySelectArrow-transform);
  opacity: var(--PhoneInputCountrySelectArrow-opacity);
}

.PhoneInputCountrySelect:focus
  + .PhoneInputCountryIcon
  + .PhoneInputCountrySelectArrow {
  opacity: 1;
  color: var(--PhoneInputCountrySelectArrow-color--focus);
}

.PhoneInputCountrySelect:focus + .PhoneInputCountryIcon--border {
  box-shadow: none;
}

.PhoneInputCountrySelect:focus
  + .PhoneInputCountryIcon
  .PhoneInputInternationalIconGlobe {
  opacity: 1;
  color: var(--PhoneInputCountrySelectArrow-color--focus);
}

.typebot-container {
  background-image: var(--typebot-container-bg-image);
  background-color: var(--typebot-container-bg-color);
  font-family: var(--typebot-container-font-family);
}

.custom-header {
  color: var(--typebot-header-color);
  background-color: var(--typebot-header-bg-color);
  border-bottom: var(--typebot-header-border);
  box-shadow: var(--typebot-header-shadow);
}

.custom-header-content {
  max-width: var(--typebot-header-max-width);
}

.typebot-chat-view {
  max-width: var(--typebot-chat-view-max-width);
  background-color: var(--typebot-chat-view-bg-color);
}

.typebot-button.active {
  color: var(--typebot-button-active-color);
  background-color: var(--typebot-button-active-bg-color);
}

.typebot-button {
  color: var(--typebot-button-inactive-color);
  background-color: var(--typebot-button-inactive-bg-color);
  border: var(--typebot-button-border);
  box-shadow: var(--typebot-button-shadow);
}

.typebot-host-bubble {
  color: var(--typebot-host-bubble-color);
}

.typebot-host-bubble > .bubble-typing {
  background-color: var(--typebot-host-bubble-bg-color);
  border: var(--typebot-host-bubble-border);
  box-shadow: var(--typebot-host-bubble-shadow);
}

.typebot-guest-bubble {
  color: var(--typebot-guest-bubble-color);
  background-color: var(--typebot-guest-bubble-bg-color);
  border: var(--typebot-guest-bubble-border);
  box-shadow: var(--typebot-guest-bubble-shadow);
}

.typebot-input {
  color: var(--typebot-input-color);
  background-color: var(--typebot-input-bg-color);
  border: var(--typebot-input-border);
  box-shadow: var(--typebot-input-shadow);
}

.typebot-button > .send-icon {
  fill: var(--typebot-button-active-color);
}

.text-on-chat {
  color: var(--typebot-chat-view-color);
}

.star-icon {
  cursor: pointer;
  fill: transparent;
  stroke-width: 30px;
  stroke: var(--typebot-button-active-bg-color);
}

.star-icon.active {
  fill: var(--typebot-button-active-bg-color);
}

.scale-labels {
  font-size: 13px;
  color: var(--typebot-button-active-bg-color);
  font-weight: 600;
  padding-right: 0.5rem;
}