/*
  if necessary, change this to use different colours
  Primary is the blue and success is the green
*/

:root {
  /* --hmx-color-primary: #081c42;
  --hmx-color-success: #6ac7b2; */
  --hmx-badgeavatar-size: calc(var(--hmx-badgecontainer-size) + 0.5rem);
  --hmx-badgecontainer-size: 55px;
  --hmx-color-primary: var(--color-secondary);
  --hmx-color-success: var(--color-secondary);
  --hmx-shadow-badge: 0 0 20px rgb(from var(--hmx-color-primary) r g b / 0.3), 10px 10px 20px rgb(from var(--hmx-color-primary) r g b / 0.3);
  --hmx-chatbot-color: linear-gradient(25deg, var(--color-secondary) 25%, var(--color-highlight2));
  --hmx-font-family: var(--base-font);

  --chatbot-offset: 30px;
  --chatbot-border-radius: 10px;
}

.hmx-chatbot-badge.hmx-button.hmx-button-primary {
  bottom: var(--chatbot-offset);
  right: var(--chatbot-offset);
  transition: scale var(--image-zoom-in-duration) var(--image-zoom-in-timing-function);
}

.hmx-chatbot-badge.hmx-button.hmx-button-primary:hover {
  scale: 1.1;
}

.hmx-chatbox {
  border-radius: calc(var(--chatbot-border-radius) * 1.5);
}

/* .hmx-chatbox-header {
  overflow: hidden;
} */

.hmx-chatbox-header .hmx-header-avatar {
  /* height: 100%;
  min-width: 90px; */
  justify-content: flex-end;
  align-items: center;
  padding-inline-start: 15px;
  padding-block-end: 15px;
  /* filter: drop-shadow(0 0 10px rgb(from var(--hmx-color-primary) r g b / 1)); */
  --outline-size: 2px;
  --outline-color: var(--color-secondary);
  filter: drop-shadow(var(--outline-size) var(--outline-size) 0 rgb(from var(--outline-color) r g b / 1))
    drop-shadow(calc(-1 * var(--outline-size)) var(--outline-size) 0 rgb(from var(--outline-color) r g b / 1))
    drop-shadow(var(--outline-size) calc(-1 * var(--outline-size)) 0 rgb(from var(--outline-color) r g b / 1))
    drop-shadow(calc(-1 * var(--outline-size)) calc(-1 * var(--outline-size)) 0 rgb(from var(--outline-color) r g b / 1));
}

/* .hmx-avatar-image {
  height: 80%;
  width: unset;
} */

.hmx-chatbox,
.hmx-chatbox .hmx-chatbox-footer {
  background: var(--hmx-color-background);
}

.humaitrix-chatbot .hmx-chatbox .hmx-chatbox-control {
  --control-margin: 12px;
  width: calc(100% - 2 * var(--control-margin));
  margin-inline: var(--control-margin);
  border-radius: var(--chatbot-border-radius);
  overflow: hidden;
  box-shadow: 0 0 2px var(--color-secondary);
}