.bot-btn__wrapper {
  --gs-margin: calc(1% - 2px);

  /* SM 600px ~ 1023px */
  @media (min-width: 600px) {
    --gs-margin: calc(1% - 2px);
  }

  /* MD 1024px ~ 1439px*/
  @media (min-width: 1024px) {
    --gs-margin: calc(1% - 2px);
  }

  /* LG 1440px up */
  @media (min-width: 1440px) {
    --gs-margin: calc(1% - 2px);
  }
  
  /*--bot-btn-bottom-offset: 20px;*/
  --bot-btn-bottom-offset: calc(4% + 80px);
    @media (min-width: 600px) {
    --bot-btn-bottom-offset: calc(4% + 80px);
  }

  @media (min-width: 1024px) {
    --bot-btn-size: 60px;
  }

  @media (min-width: 1440px) {
    --bot-btn-bottom-offset: calc(4% + 80px);
  }
  
  --bot-btn-size: 54px;
  width: fit-content;
  display: block;
  margin-left: auto;
  position: fixed;
  /*right: var(--gs-margin);*/
  bottom: var(--bot-btn-bottom-offset);
  /*right: calc(var(--gs-margin) + 40px);*/
  right: var(--gs-margin);
  /*bottom: 6%;*/
  text-decoration: none;
  outline: none;
  z-index: var(--z-chat-bot);
  -webkit-tap-highlight-color: transparent;
}

.bot-btn {
  width: var(--bot-btn-size);
  height: var(--bot-btn-size);
  border-radius: calc(var(--bot-btn-size) / 2);
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--Brand-Primary-Blue-600);
  flex-shrink: 0;
  position: absolute;
  top: 0;
  right: 0;

  .bot-btn__wrapper:focus-visible & {
    box-shadow:
      0px 0px 0px 2px var(--brand-bw-white),
      0px 0px 0px 4px var(--Brand-Primary-Blue-500);
  }
}

@keyframes robotIconDeg {
  0%   { transform: rotate(0deg); }
  20%  { transform: rotate(0deg); }
  21%  { transform: rotate(-1deg); }
  22%  { transform: rotate(-3deg); }
  24%  { transform: rotate(-3deg); }
  26%  { transform: rotate(-1deg); }
  28%  { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}

@keyframes robotIconImage {
  0%   { left: 0; }
  20%  { left: 0; }
  21%  { left: 0; }
  22%  { left: -200%; }
  24%  { left: -200%; }
  26%  { left: -100%; }
  28%  { left: -300%; }
  100% { left: -300%; }
}

.bot-btn__icon-deg {
  width: 28px;
  height: 28px;
  overflow: hidden;
  position: relative;
  animation: robotIconDeg 10s steps(1, end) infinite;

  @media (min-width: 1024px) {
    width: 36px;
    height: 36px;
  }
}

.bot-btn__icon-sprite {
  position: absolute;
  top: 0;
  width: 400%;
  animation: robotIconImage 10s steps(1, end) infinite;

  img {
    width: 100%;
    height: auto;
    display: block;
    pointer-events: none;
    user-select: none;
  }
}

.bot-btn__accordion {
  height: var(--bot-btn-size);
  border-radius: calc(var(--bot-btn-size) / 2);
  background-color: var(--transparent-white-60);
  display: grid;
  grid-template-columns: auto var(--bot-btn-size);
}

.bot-btn__overflow {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: auto;
  max-width: 0;
  transition: max-width 550ms var(--transition-timing-function);

  .bot-btn__wrapper:hover & {
    max-width: 170px;
  }
}

.bot-btn__label {
  flex-shrink: 0;
  padding: 0 12px 0 18px;
  box-sizing: border-box;
}