/* Hide default Cognigy launcher */
.webchat-toggle-button {
  opacity: 0;
  visibility: hidden;
}

/* Push chat window above the custom button */
#webchatWindow {
  bottom: 6.2em !important;
}

/* Reduce bottom padding inside the input bar */
.webchat-input {
  padding-bottom: 4px !important;
}

/* ===== Button base ===== */
.btn-chat {
  font-family: "LindeDax", "Calibri", sans-serif;
  font-size: 1rem;
  cursor: pointer;
  z-index: 9999;
  position: fixed;

  bottom: 1.2em; /* move UP/DOWN */
  right: 2em;   /* move LEFT/RIGHT */

  outline: none;
  background: transparent;
  appearance: none;
  border: none;

  color: white;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 4.3em;
  height: 4.3em;

  /* Slide-in animation */
  transform: translateY(calc(100% + 2.1em));
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);

  /* Keep button inside viewport */
  max-width: calc(100vw - 3.5em);
  overflow: hidden;
  white-space: nowrap;
  flex-wrap: nowrap;
}

/* Button visible after init */
.btn-chat.is-init {
  transform: translateY(0);
}

/* Background layer */
.btn-chat__bg {
  background-color: #006497;
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: block;
  box-shadow: 0.25em 0.25em 1em 0.1em rgba(0, 0, 0, 0.1);
}

.btn-chat__bg::before,
.btn-chat__bg::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Circle on small */
.btn-chat__bg,
.btn-chat__bg::after,
.btn-chat__bg::before {
  border-radius: 50%;
}

.btn-chat__bg::after {
  opacity: 0;
  background: linear-gradient(to bottom, #007ab9, #00a0e1);
}

.btn-chat__bg::before {
  background: linear-gradient(to bottom, #00a0e1, #007ab9);
}

.btn-chat:hover .btn-chat__bg::before,
.btn-chat:focus .btn-chat__bg::before {
  opacity: 0;
}

.btn-chat:hover .btn-chat__bg::after,
.btn-chat:focus .btn-chat__bg::after {
  opacity: 1;
}

.btn-chat.is-open .btn-chat__bg::before,
.btn-chat.is-open .btn-chat__bg::after,
.btn-chat:active .btn-chat__bg::after,
.btn-chat:active .btn-chat__bg::before {
  opacity: 0;
}

/* Ensure icon and label are above bg */
.btn-chat__icon,
.btn-chat__copy {
  position: relative;
  z-index: 2;
}

/* Center icon perfectly inside circle */
.btn-chat__icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* SVG sizing */
.btn-chat__svg {
  width: 1.75em;
  height: 1.75em;
  display: block;
}

.btn-chat__svg-line,
.btn-chat__svg-outer {
  stroke-width: 6;
  stroke: white;
}

.btn-chat__svg-line {
  will-change: stroke-dasharray, stroke-dashoffset;
  transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
              stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Right line */
.btn-chat__svg-line--right {
  stroke-dasharray: 0 112.59208679199219;
  stroke-dashoffset: 0;
}
.btn-chat.is-init .btn-chat__svg-line--right {
  stroke-dasharray: 12.7 112.59208679199219;
  stroke-dashoffset: 0;
  transition-delay: 0.5s;
}
.btn-chat.is-open .btn-chat__svg-line--right {
  stroke-dasharray: 24.5 112.59208679199219 !important;
  stroke-dashoffset: -80.2 !important;
  transition-delay: 0s;
}
.btn-chat.is-close .btn-chat__svg-line--right {
  transition-delay: 0s;
}
.btn-chat:hover .btn-chat__svg-line--right,
.btn-chat:focus .btn-chat__svg-line--right {
  stroke-dasharray: 20.7 112.59208679199219;
  stroke-dashoffset: 0;
  transition-delay: 0s;
}

/* Left line */
.btn-chat__svg-line--left {
  stroke-dasharray: 0 112.59208679199219;
  stroke-dashoffset: 0;
}
.btn-chat.is-init .btn-chat__svg-line--left {
  stroke-dasharray: 12.592087 112.59208679199219;
  stroke-dashoffset: 0;
  transition-delay: 0.5s;
}
.btn-chat.is-open .btn-chat__svg-line--left {
  stroke-dasharray: 24.5 112.59208679199219 !important;
  stroke-dashoffset: -80.2 !important;
  transition-delay: 0s;
}
.btn-chat.is-close .btn-chat__svg-line--left {
  transition-delay: 0s;
}
.btn-chat:hover .btn-chat__svg-line--left,
.btn-chat:focus .btn-chat__svg-line--left {
  stroke-dasharray: 19.592087 112.59208679199219;
  stroke-dashoffset: 0;
  transition-delay: 0s;
}

.btn-chat__svg-eye {
  opacity: 0;
  visibility: hidden;
}

/* ===== Label (single correct definition) ===== */
.btn-chat__copy {
  display: inline-block;
  margin-left: 0.5em;

  /* Important for ellipsis inside flex */
  min-width: 0;
  flex: 1 1 auto;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Hide copy on small screens */
.btn-chat__copy,
.btn-chat__copy-open > span:last-of-type {
  display: none;
}

.btn-chat__copy-open,
.btn-chat__copy-close {
  white-space: nowrap;
  transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1),
              visibility 300ms cubic-bezier(0.4, 0, 0.2, 1),
              transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform, visibility;
}

.btn-chat__copy-open {
  opacity: 1;
  display: inline-block;
  visibility: visible;
  transform: translateY(0em);
}

.btn-chat__copy-close {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  text-align: left;
  transform: translateY(0.5em);
  opacity: 0;
  visibility: hidden;
}

.btn-chat.is-open .btn-chat__copy-open {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.5em);
}

.btn-chat.is-open .btn-chat__copy-close {
  transform: translateY(0em);
  opacity: 1;
  visibility: visible;
}

/* Button is always a circle — no pill on desktop */

/* =========================================================
   MOBILE
   - hide the custom button when chat is open so it never blocks input
========================================================= */
@media (max-width: 575px) {

  /* hide button when chat is open (your JS already toggles .is-open) */
  .btn-chat.is-open {
    display: none !important;
  }
}

/*Force LindeDax inside Cognigy Webchat */
[data-cognigy-webchat-root],
[data-cognigy-webchat-root] * {
  font-family: "LindeDax", "Calibri", sans-serif !important;
  font-size: 15px !important;
}