/* ==========================================================================
   フローティングCTAボタン（あしびもちゃん）
   ========================================================================== */

/* --- 1. 全体のコンテナと表示/非表示アニメーション --- */
.floating-cta {
  /* 位置と重なり順 */
  position: fixed;
  right: 15px;
  bottom: 15px;
  z-index: 999;
  cursor: pointer; /* マウスカーソルを指の形にする */
  display: block;

  /* 表示/非表示アニメーションの初期状態（隠れている状態） */
  opacity: 0;
  transform: translateY(100px);
  visibility: hidden;
  transition: opacity 0.5s ease, transform 0.5s ease, visibility 0.5s;
}

/* 表示状態（JSで.is-visibleクラスが付与される） */
.floating-cta.is-visible {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  /* 登場時にバウンドするアニメーションを適用 */
  animation: bounce-in 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 登場時のバウンドアニメーション定義 */
@keyframes bounce-in {
  0%   { transform: scale(0.5) translateY(50px); }
  100% { transform: scale(1) translateY(0); }
}


/* --- 2. ボタン内部のレイアウト（吹き出しとキャラクター） --- */

.cta-content {
  /* Flexboxで中身（吹き出しとキャラ）を横並びに */
  display: flex;
  align-items: flex-end;   /* 下揃え */
  justify-content: flex-end; /* 右寄せ */
  gap: 10px;               /* 要素間の隙間 */

  /* ホバー時に上に浮き上がる動き */
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.floating-cta:hover .cta-content {
  transform: translateY(-10px);
}


/* --- 3. 吹き出しのデザイン --- */

.cta-speech-bubble {
  position: relative; /* しっぽ(::after)の位置の基準 */
  background-color: #fff;
  border-radius: 50px;
  padding: 10px 25px;
  box-shadow: 0 5px 20px rgba(70, 130, 180, 0.2);
  margin-bottom: 25px; /* キャラクターより少し上に配置するための余白 */
}

/* 吹き出しのしっぽ部分 */
.cta-speech-bubble::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  background-color: #fff;
  transform: rotate(45deg);
  top: 50%;
  margin-top: -7px;
  right: -6px;
  z-index: -1; /* 吹き出し本体の背面に配置 */
}

/* 吹き出し内のテキスト */
.cta-text {
  color: #008c9e;
  font-size: 1.1rem;
  font-weight: bold;
  white-space: nowrap;
  
  /* セリフが切り替わる時のフェードアニメーション */
  transition: opacity 0.2s ease-in-out;
}

/* JSでセリフ変更中に付与されるクラス */
.cta-text.is-changing {
  opacity: 0;
}


/* --- 4. キャラクターのデザインとアニメーション --- */

/* キャラクターのラッパー（背景と画像をまとめる） */
.char-wrapper {
  position: relative;
  /* ★ サイズ調整はここで行う */
  width: 110px; 
  height: 110px;
  
  /* 傾きや震えるアニメーションを滑らかにする */
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* キャラクターの背景（円形） */
.char-background {
  position: absolute;
  top: 15px;
  left: 10px;
  width: 81%;
  height: 81%;
  background-color: #fff; /* ★ 背景色はここで変更 */
  border-radius: 50%;
  z-index: 1;
}

/* キャラクター画像 */
.cta-char {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2; /* 背景より手前 */
  
  /* ★ 画像のサイズと位置の微調整はここで行う */
  width: 100px;
  height: auto;
  bottom: 0; 
}


/* --- 5. インタラクティブな動き（傾き・ぷるぷる） --- */

/* スクロール時の傾き */
.floating-cta.scroll-down .char-wrapper {
  transform: rotate(7deg);
}
.floating-cta.scroll-up .char-wrapper {
  transform: rotate(-7deg);
}

/* ホバー時のぷるぷる震える動き */
.floating-cta:hover .char-wrapper {
  animation: shake 0.8s cubic-bezier(.36,.07,.19,.97) both;
}

/* ぷるぷるアニメーションの定義 */
@keyframes shake {
  10%, 90% { transform: rotate(-2deg); }
  20%, 80% { transform: rotate(3deg); }
  30%, 50%, 70% { transform: rotate(-4deg); }
  40%, 60% { transform: rotate(4deg); }
  100% { transform: rotate(0); }
}







/* AIチャットウィンドウ */
.ai-chat-window {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 350px;
  max-width: 90%;
  height: 500px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
  display: flex;
  flex-direction: column;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
}

/* 表示状態のクラス */
.ai-chat-window.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.chat-header {
  background-color: #00a0b8;
  color: white;
  padding: 10px 15px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chat-header .header-content {
  display: flex;
  align-items: center;
  gap: 10px; /* アイコンとテキストの間の余白 */
}

.chat-header .header-icon {
  width: 45px;
  height: 45px;
  border-radius: 50%; /* アイコンを丸くする */
  background-color: white; /* 必要に応じて背景色を追加 */
}

.header-title-area {
  display: flex;
  flex-direction: column;
}

/* メインタイトルのスタイル */
.main-title {
  font-size: 16px; /* 元のサイズ */
  font-weight: bold;
}

/* ページタイトルのスタイル */
.page-title {
  font-size: 12px;
  opacity: 0.9;
  line-height: 1.2;
  font-weight: normal;
}

.chat-close-btn {
  position: absolute; /* 親要素を基準に絶対配置する */
  top: 5px;           /* 上から5pxの位置 */
  right: 10px;        /* 右から10pxの位置 */
  
  padding: 5px;
  line-height: 1; /* 行の高さを調整して中央に */

  background: none;
  border: none;
  color: white;
  font-size: 24px;
  cursor: pointer;
  transition: opacity 0.2s;
  opacity: 0.7;
}
.chat-messages {
  flex: 1;
  padding: 15px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.message-wrapper {
  display: flex;
}
.message {
  padding: 8px 12px;
  border-radius: 15px;
  max-width: 80%;
  line-height: 1.5;
}
.ai-message {
  background-color: #f1f1f1;
  border-top-left-radius: 0;
  margin-right: auto;
}
.user-message {
  background-color: #d1ecf1;
  border-top-right-radius: 0;
  margin-left: auto;
}
.chat-input-area {
  display: flex;
  flex-direction: column; /* 縦並びに変更 */
  padding: 10px;
  border-top: 1px solid #eee;
}

.chat-input-row {
  display: flex;
  width: 100%;
}

.chat-disclaimer {
  font-size: 11px;
  color: #777; /* 少し薄いグレーで見やすく */
  text-align: left;
  margin: 8px 0 0 0; /* 上に余白、下は余白なし */
  padding: 0 5px; /* 左右に少し余白 */
  line-height: 1.2;
}

.chat-input {
  flex: 1;
  border: 1px solid #ccc !important;
  border-radius: 5px !important;
  padding: 8px !important;
}
.chat-send-btn {
  margin-left: 10px;
  border: none;
  background-color: #0073aa;
  color: white;
  padding: 8px 15px;
  border-radius: 5px;
  cursor: pointer;
}


/* --- トピック選択ボタンのスタイル --- */
.topic-selection {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
}

.topic-selection-title {
  font-size: 14px;
  color: #333;
  margin: 0 0 5px 0;
  text-align: center;
}

.topic-button {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #00a0b8;
  border-radius: 8px;
  background-color: #fff;
  color: #00a0b8;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.2s, color 0.2s;
}

.topic-button:hover {
  background-color: #e0f7fa;
}

/* 最初のボタン（すべて）を少し目立たせる */
.topic-button:first-of-type {
  background-color: #00a0b8;
  color: #fff;
}
.topic-button:first-of-type:hover {
  background-color: #008c9e;
}

/* 戻るボタンのスタイル */
.chat-back-btn {
  display: none; /* ★普段は非表示にしておく */
  background: none;
  border: none;
  color: white;
  font-size: 22px;
  font-weight: bold;
  cursor: pointer;
  padding: 0 10px 0 0;
  opacity: 0.8;
  transition: opacity 0.2s;
}

.chat-back-btn:hover {
  opacity: 1;
}

/* ヘッダーアイコンとの間に余白がない場合は調整 */
.header-content .header-icon {
  margin-left: 0; /* 必要に応じて調整 */
}

.chat-input-area {
  display: none;
  flex-direction: column;
  padding: 10px;
  border-top: 1px solid #eee;
}

.ai-chat-window.is-topic-selected .chat-input-area {
  display: flex;
}