/* =============================================================
   AI チャットサポート（全ページ共通、右下固定）
   - PC: ai-support_chat.svg (365×275)
   - SP: ai-support_chat-sp.svg (111×84)
   - 右下の back-to-top（60×60 / 40×40、右下 20px）の真上に配置
   - 右上の × でセッション中だけ非表示（ページ更新で再表示、永続化なし）
   ============================================================= */
.ai-chat {
  position: fixed;
  right: 30px;
  bottom: 96px; /* back-to-top (20 + 60) + 16px gap */
  z-index: 49; /* back-to-top (50) より下、ただしページ上のほぼ全要素より上 */
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.15));
}

.ai-chat[hidden] {
  display: none;
}

.ai-chat__image {
  display: block;
}

.ai-chat__image img {
  display: block;
  width: 365px;
  height: auto;
}

/* 右上の × ボタン
   画像の右上に半分はみ出して配置（top/right 共に -16px = サイズの半分）*/
.ai-chat__close {
  position: absolute;
  top: -16px;
  right: -16px;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: opacity 200ms ease;
  z-index: 1;
}

.ai-chat__close:hover,
.ai-chat__close:focus-visible {
  opacity: 0.7;
}

.ai-chat__close img {
  display: block;
  width: 100%;
  height: 100%;
}

/* lampchat ウィジェット側の close ボタンも同じ ai-chat_close.svg を使用
   ※ widget が動的に挿入する要素を後追いで上書きするため !important を付与 */
.lampchat-wrapper-close,
#lampchat-wrapper-close {
  background-image: url("../../img/common/ai-chat_close.svg") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/* SP（≤ 768px）：サイズ縮小 + back-to-top SP サイズに合わせて位置調整 */
@media (max-width: 768px) {
  .ai-chat {
    right: 20px;
    bottom: 72px; /* back-to-top SP (20 + 40) + 12px gap */
  }

  .ai-chat__image img {
    width: 111px;
  }

  .ai-chat__close {
    top: -11px;
    right: -11px;
    width: 22px;
    height: 22px;
  }
}