/* Dify chatbot window */
#dify-chatbot-bubble-window#dify-chatbot-bubble-window:not(.dify-chat-expanded) {
  position: fixed !important;
  width: 384px !important;
  height: 700px !important;
  max-width: calc(100vw - 32px) !important;
  max-height: calc(100vh - 36px) !important;
  max-height: calc(100dvh - 36px) !important;
  max-height: calc(var(--dify-viewport-height, 100dvh) - 36px) !important;
  inset: auto 16px 24px auto !important;
  clip-path: inset(0 0 60px 0 round 12px) !important;
}

#dify-chatbot-bubble-window#dify-chatbot-bubble-window.dify-chat-expanded {
  position: fixed !important;
  width: 48vw !important;
  min-width: 384px !important;
  max-width: min(640px, calc(100vw - 32px)) !important;
  height: calc(88vh + 60px) !important;
  height: calc(88dvh + 60px) !important;
  height: var(--dify-expanded-height, calc(88dvh + 60px)) !important;
  min-height: 0 !important;
  max-height: calc(100vh - 40px) !important;
  max-height: calc(100dvh - 40px) !important;
  max-height: calc(var(--dify-viewport-height, 100dvh) - 40px) !important;
  inset: auto 16px 24px auto !important;
  clip-path: inset(0 0 60px 0 round 16px) !important;
}

@media (max-width: 640px) {
  #dify-chatbot-bubble-window#dify-chatbot-bubble-window#dify-chatbot-bubble-window {
    top: var(--dify-viewport-offset-top, 0px) !important;
    right: 0 !important;
    bottom: auto !important;
    left: var(--dify-viewport-offset-left, 0px) !important;
    width: var(--dify-viewport-width, 100vw) !important;
    min-width: 0 !important;
    max-width: none !important;
    height: calc(100vh + 60px) !important;
    height: calc(100dvh + 60px) !important;
    height: calc(var(--dify-viewport-height, 100dvh) + 60px) !important;
    min-height: 0 !important;
    max-height: none !important;
    border-radius: 0 !important;
    clip-path: inset(0 0 60px 0) !important;
  }

  html.dify-chat-scroll-locked {
    overflow: hidden !important;
    overscroll-behavior: none;
  }

  body.dify-chat-scroll-locked {
    position: fixed !important;
    top: var(--dify-page-scroll-top, 0px) !important;
    left: var(--dify-page-scroll-left, 0px) !important;
    width: 100% !important;
    overflow: hidden !important;
    overscroll-behavior: none;
  }
}

/* Dify chatbot bubble */
#dify-chatbot-bubble-button {
  bottom: calc(var(--dify-chatbot-bubble-button-bottom, 1rem) + 70px) !important;
  width: 104px !important;
  height: 124px !important;
  border-radius: 0 !important;
  background: transparent url('/common/img/icon/chat_operator.png') center / contain no-repeat !important;
  box-shadow: none !important;
}

#dify-chatbot-bubble-button svg {
  display: none !important;
}

#dify-chatbot-bubble-button::before {
  content: 'お気軽にご質問ください！';
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  width: 170px;
  padding: 10px 12px;
  box-sizing: border-box;
  border-radius: 6px;
  background: #fff;
  color: #333;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  pointer-events: none;
}

#dify-chatbot-bubble-button::after {
  content: '';
  position: absolute;
  right: 46px;
  bottom: calc(100% + 4px);
  width: 12px;
  height: 12px;
  background: #fff;
  transform: rotate(45deg);
  pointer-events: none;
}

.dify-bubble-dismiss {
  position: fixed;
  top: var(--dify-dismiss-top, 8px);
  left: var(--dify-dismiss-left, auto);
  z-index: 2147483647;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid #d6d6d6;
  border-radius: 50%;
  background: #fff;
  color: #333;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  font-family: Arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.dify-bubble-dismiss[hidden] {
  display: none !important;
}

#dify-chatbot-bubble-button.dify-chat-open {
  top: var(--dify-chat-close-top, 16px) !important;
  right: var(--dify-chat-close-right, 10px) !important;
  bottom: auto !important;
  left: auto !important;
  width: 50px !important;
  height: 50px !important;
  border-radius: 50% !important;
  background: #1C64F2 !important;
  box-shadow: rgba(0, 0, 0, 0.2) 0 4px 8px !important;
}

#dify-chatbot-bubble-button.dify-chat-open #closeIcon {
  display: block !important;
}

#dify-chatbot-bubble-button.dify-chat-open::before,
#dify-chatbot-bubble-button.dify-chat-open::after {
  display: none;
}

@media (max-width: 640px) {
  #dify-chatbot-bubble-button.dify-chat-open {
    top: calc(var(--dify-viewport-offset-top, 0px) + 60px) !important;
    right: max(
      4px,
      calc(
        100vw
        - var(--dify-viewport-offset-left, 0px)
        - var(--dify-viewport-width, 100vw)
        + 4px
      )
    ) !important;
  }

  .dify-bubble-dismiss {
    width: 40px;
    height: 40px;
  }
}