/* ===== 基本設定 ===== */
:root { --page-max: 980px; }
:root { --offset: 0px; }
:root { --kb: 0px; --footer-h: 56px; }
html, body { height: 100lvh; }

/* 背景は常に最背面（動画/画像用） */
.bg-layer { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

/* UI層は前面へ */
.ui-layer { position: relative; z-index: 10; }

/* ===== ヘッダー（ロゴ） ===== */
.header {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: clamp(12px, 2.5vw, 24px) clamp(12px, 3vw, 24px);
}
.logo {
  display: block;
  margin-inline: auto;
  width: clamp(180px, 40vw, 320px);
  height: auto;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.12));
}

/* ★ グローバルで img: width:100% を打ってしまった場合の上書き */
img { width: auto !important; max-width: 100% !important; height: auto !important; }

/* ===== チャット領域 ===== */
.chat-shell {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 clamp(12px, 3vw, 24px);
}
.chat-panel {
  height: clamp(360px, 52dvh, 620px); /* 固定し過ぎない高さ */
  overflow: auto;
  border-radius: 16px;
  backdrop-filter: blur(2px);
}
.bubble { max-width: min(90%, 560px); }

/* 入力行（テキスト＋送信） */
.input-row {
  display: flex; gap: 8px; align-items: stretch; margin-top: 10px;
}
.input-row input[type="text"],
.input-row textarea { flex: 1 1 auto; min-height: 44px; }
.input-row button { flex: 0 0 auto; padding-inline: 16px; }

/* ===== 下部の丸いボタン（履歴／✨／サウンド） ===== */
.footer {
  position: sticky; bottom: 0;
  background: rgba(255,255,255,.25); backdrop-filter: blur(6px);
}
.controls {
  max-width: var(--page-max);
  margin: 8px auto 14px;
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
}
.controls .pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: 999px;
  box-shadow: 0 2px 10px rgba(0,0,0,.12); white-space: nowrap;
}

/* ==== mascot: 画面上部中央に固定 & 丸バッジ ==== */
:root{
  /* バッジの大きさと余白（好みで数値だけ変えてOK） */
  --mascot-size: clamp(96px, 18vw, 140px);
  --mascot-top: max(8px, env(safe-area-inset-top)); /* iPhoneノッチ配慮 */
  --mascot-gap: 18px;                               /* バッジ下の余白 */
}

/* 以前の無効化ルールがあっても確実に上書き */
.mascot{
  position: fixed !important;            /* 画面の上中央に固定 */
  left: 50%;
  top: calc(var(--mascot-top) + 6px);
  transform: translateX(-50%);
  width:  var(--mascot-size);
  height: var(--mascot-size);
  border-radius: 9999px;
  /* 丸バッジ（やさしい白＋薄い縁＋ぼかし） */
  background: rgba(255,255,255,.92);
  border: 2px solid rgba(110,160,120,.22);
  box-shadow: 0 6px 18px rgba(0,0,0,.10);
  backdrop-filter: blur(6px);
  padding: 10px;
  display: grid;
  place-items: center;
  z-index: 1502;
  pointer-events: none;                  /* クリックを邪魔しない */
}
.mascot img{ width: 80%; height: auto; }

/* チャットエリアを“少し”下げて、バッジに重ならないように */
.chat-area{
  margin-top: calc(var(--mascot-top) + var(--mascot-size) + var(--mascot-gap));
}

/* 右上固定用の旧クラスは無効化（残っていても安全にする） */
.corner-icon{ display: none !important; }


/* モバイル微調整 */
@media (max-width: 480px){
  .controls { gap: 8px; }
  .controls .pill { padding: 8px 12px; font-size: 14px; }
  .chat-panel { height: 50dvh; }
}

/* レイヤ分離で衝突を防ぐ */
.header, .chat-shell, .footer { contain: layout style; }


/* --- ephemeral（流して消える）アニメーション --- */
.float-away{
  pointer-events: none;
  animation: bubble-float-out 120s ease-out forwards;
}
@keyframes bubble-float-out{
  0%   { opacity: 1; transform: translateY(0) }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-28px) }
}

/* ===== chat: container no-scroll / bubbles-only scroll ===== */

/* === FINAL: viewport-safe chat sizing ======================= */
/* 端末により下側に必要な余白（入力欄・フッター・安全域）を見積もる */
:root{
  --below-pc: 140px;  /* PCで下に確保したい余白の目安 */
  --below-sp: 140px;  /* SPで下に確保したい余白の目安（キーボードも考慮） */
}

/* 箱は“はみ出さない高さ”にする（= 画面高 － マスコット － 下余白） */
.chat-area{
  /* 既存の margin-top はそのまま活かす */
  height: min(
    var(--chat-height-pc),
    calc(80dvh - (var(--mascot-top) + var(--mascot-size) + var(--mascot-gap)) - var(--below-pc))
  );
  display: flex;
  flex-direction: column;
  overflow: visible !important; /* ← 箱はスクロールしない */
}

/* 吹き出し箱だけスクロール */
.chat-track{
  flex: 1 1 auto;
  min-height: calc(100svh - 56px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable both-edges;
}

/* モバイルは高さ式をSP用に切替 */
@media (max-width: 600px){
  .chat-area{
    height: min(
      var(--chat-height-sp),
      calc(100dvh - (var(--mascot-top) + var(--mascot-size) + var(--mascot-gap)) - var(--below-sp))
    );
  }
}
/* ========== FINAL OVERRIDES: viewport-safe chat ========== */

/* ページは基本スクロールさせない（PC/モバイル共通） */
html, body{
  height: 100dvh;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
}

/* 丸バッジとチャット高さの計算に使う値（必要に応じて数字だけ調整） */
:root{
  /* 既存の --mascot-size / --mascot-top / --mascot-gap があればそのままでOK */
  --mascot-top: max(12px, env(safe-area-inset-top));
  --mascot-gap: 16px;    /* バッジの下にあける余白 */
  --below-pc: 180px;     /* 入力欄＋フッターぶんの見込み（PC） */
  --below-sp: 230px;     /* 入力欄＋フッターぶんの見込み（SP） */
  --track-top-pad: 18px; /* 吹き出しリストの上側クッション */
}

/* マスコットの下端までの高さ（＝チャットをここから開始する） */
:root{ --mascot-clear: calc(var(--mascot-top) + var(--mascot-size, 120px) + var(--mascot-gap)); }

/* チャット箱は“はみ出さない高さ”で固定。箱自体はスクロールしない */
.chat-area{
  margin-top: var(--mascot-clear) !important;
  height: calc(100dvh - var(--mascot-clear) - var(--below-pc)) !important;
  display: flex;
  flex-direction: column;
  overflow: visible !important;   /* ← 箱は非スクロール */
}

/* 吹き出しだけスクロール。先頭がマスコットに触れないように上にパディング */
.chat-track{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable both-edges;
  padding-top: var(--track-top-pad);
}

/* 入力段は固定配置のまま下側に置く */
.input-row{ flex: 0 0 auto; }

/* モバイルは下側見込みを大きめにしてさらに収める */
@media (max-width: 600px){
  :root{
    --mascot-gap: 10px;     /* バッジの下の余白を少し増やす */
    --below-sp: 280px;      /* 入力欄＋フッターの高さ見込みを増やす */
    --track-top-pad: 20px;  /* 先頭吹き出しのクッションも増やす */
  }
  .chat-area{
    height: calc(100dvh - var(--mascot-clear) - var(--below-sp)) !important;
  }
}

/* 念のため：mascot を absolute に戻す旧ルールが残っても無効化 */
.chat-area > .mascot{ position: fixed !important; left: 50% !important; transform: translateX(-50%) !important; }

/* === FINAL PATCH 2025-09-07-16 ================================= */

/* 0) ページ自体はスクロールさせない（はみ出しの元を断つ） */
html, body, html:root body {
  height: 100dvh;
  overflow: hidden !important;
}
body { padding-bottom: 0 !important; }

/* 1) マスコット周りのクリアランスと先頭吹き出しのクッションを増やす */
:root{
  --mascot-gap: 10px;     /* マスコット下の空き */
  --track-top-pad: 28px;  /* 吹き出しリストの上パディング */
  --below-pc: 180px;      /* PCで下に見込むUI高さ */
  --below-sp: 230px;      /* SPで下に見込むUI高さ */
}
@media (max-width: 600px){
  :root{ --mascot-gap: 20px; --track-top-pad: 32px; --below-sp: 240px; }
}

/* マスコットの下端を基準にチャットを開始 */
:root{ --mascot-clear: calc(var(--mascot-top) + var(--mascot-size, 120px) + var(--mascot-gap)); }

.chat-area{
  margin-top: var(--mascot-clear) !important;
  height: calc(100dvh - var(--mascot-clear) - var(--below-pc)) !important;  /* PC */
  display:flex; flex-direction:column;
  overflow: visible !important;   /* 箱はスクロールさせない */
}
@media (max-width: 600px){
  .chat-area{ height: calc(100dvh - var(--mascot-clear) - var(--below-sp)) !important; } /* SP */
}

/* 吹き出しだけスクロール。上端にクッションを追加 */
.chat-track{
  flex:1 1 auto; min-height:0;
  overflow-y:auto;
  padding-top: var(--track-top-pad) !important;
  overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  scrollbar-gutter:stable both-edges;
}

/* 2) PCでフォームがボタンに隠れないように“下に退避スペース”を確保 */
@media (min-width: 601px){
  #chatform{
    margin: 16px auto calc(var(--footer-h) + 96px) !important; /* ← フォームを少し上へ */
  }
}

/* 3) 旧ルールで .mascot が absolute に戻されないように固定 */
.chat-area > .mascot{
  position: fixed !important; left:50% !important; transform: translateX(-50%) !important;
}
/* 末尾あたりに追記（または既存のモバイル調整の近くに） */
@media (max-width: 600px){
  /* フッターを通常フローで見せるため、ページ自体はスクロール可 */
  html, body { overflow-y: auto !important; }

  /* 念のためフッターは画面下に“吸着”させる */
  .credits-footer{
    position: sticky !important;
    bottom: env(safe-area-inset-bottom, 0);
  }

  /* 入力欄＋フッター分の余白を多めに見積もって、チャット箱を少し低めに */
  .chat-area{
    height: calc(
      100dvh - (var(--mascot-top) + var(--mascot-size) + var(--mascot-gap)) - 240px
    ) !important;
    min-height: 360px;
  }
}
@media (max-width: 600px){
  :root{ --track-side-pad: 12px; } /* ← 端の余白。10〜16pxで好みに調整 */
  .chat-track{ padding-inline: var(--track-side-pad); }
  .chat-track .msg.greet,
  .chat-track .bubble.greet{
    max-width: calc(100% - (var(--track-side-pad) * 2)) !important;
    margin-inline: auto;
  }
}
/* ==== SP: 入力Boxがフッターに隠れないようにする 最終上書き ==== */
@media (max-width: 600px){

  /* ページはスクロール可（フッターを普通に見せる） */
  html, body { overflow-y: auto !important; }

  /* フッターは最下部に吸着。入力行より z を低くする */
  .credits-footer{
    position: sticky !important;
    bottom: env(safe-area-inset-bottom, 0);
    z-index: 5; /* 入力行(10)より下に */
  }

  /* 入力行を確実に表示＆前面へ。フッターぶんの退避マージンも付ける */
  #chatform,
  .input-row{
    display: flex !important;
    position: relative;
    z-index: 10;                     /* ← フッターより前面 */
    margin-bottom: 96px !important;  /* ← フッターの高さ見込み。90〜120で調整可 */
  }

  /* 吹き出しの最下段がフッターに隠れないように、スクロール面の底上げ */
  .chat-track{
    padding-bottom: 120px !important; /* chatformのmargin-bottomより少し大きく */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
}
/* ==== SP: 入力Boxがフッターに隠れたり重ならないための最終上書き ==== */
@media (max-width: 600px){

  /* ページはスクロール可 + “sticky フッターの分だけ”下に空間を確保 */
  html, body{
    overflow-y: auto !important;
    padding-bottom: calc(160px + env(safe-area-inset-bottom, 0)) !important;
    /* ↑ 132px は履歴/✨/サウンド + コピーライトの見込み。端末に合わせて±10〜20pxで調整OK */
  }

  /* フッターは最下部に吸着（重ね順は低めのまま） */
  .credits-footer{
    position: sticky !important;
    bottom: env(safe-area-inset-bottom, 0);
    z-index: 5;
  }

  /* 入力Boxは前面に出すだけで “レイアウト上は”通常フローのまま */
  #chatform,
  .input-row{
    position: relative;
    z-index: 10;             /* ← フッターより前面だが、レイアウトで被らないよう下に余白を持たせる */
    margin-bottom: 16px !important;
  }

  /* 吹き出し末端がフッターに隠れないよう、リスト側も底上げ */
  .chat-track{
    padding-bottom: calc(32px + env(safe-area-inset-bottom, 0)) !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
}
/* === SP: 送信ボックスがフッターに重ならないための最終上書き === */
@media (max-width: 600px){
  /* フッターは sticky（前面に出しすぎない） */
  .credits-footer{
    position: sticky !important;
    bottom: env(safe-area-inset-bottom, 0) !important;
    z-index: 5 !important;
  }

  /* 送信フォームは通常フロー + 前面。下に十分な退避スペースを確保 */
  #chatform, .input-row{
    position: relative !important;
    z-index: 10 !important;
    margin: 12px auto calc(160px + env(safe-area-inset-bottom, 0)) !important;
    /* 140px は端末により 120〜160 で微調整可 */
  }

  /* 吹き出しの最下段が隠れないようにスクロール面の底上げ */
  .chat-track{
    padding-bottom: calc(180px + env(safe-area-inset-bottom, 0)) !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
}

/* ======== SP最終パッチ：送信ボックスとフッターの重なりを完全解消 ======== */
@media (max-width: 600px){

  /* 1) ページは普通にスクロール可（fix-1410の固定指定を打ち消す） */
  html, body{
    height: auto !important;
    overflow-y: auto !important;
  }

  /* 2) フッターは sticky（重ね順は“低め”にして前に出過ぎない） */
  .credits-footer{
    position: fixed !important;
    bottom: env(safe-area-inset-bottom, 0) !important;
    z-index: 5 !important;
    /* 3ボタンを載せる行が無いケースでも安全にスペース確保 */
    padding-bottom: max(8px, env(safe-area-inset-bottom, 0)) !important;
  }

  /* 3) 3ボタンは“フッター内の通常フロー”へ（固定/transform など全解除） */
  .footer-actions{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px; align-items: center; justify-items: center;
    margin-bottom: 6px; width: 100%;
  }
  .footer-actions > #historyBtn,
  .footer-actions > #thanksBtn,
  .footer-actions > #soundBtn,
  .footer-actions > .floating,
  .footer-actions > .thanks-fab-center,
  .footer-actions > .unmute{
    position: static !important;
    transform: none !important;
    left:auto !important; right:auto !important; bottom:auto !important;
    width:100% !important; min-width:0 !important; height:40px !important;
    padding:8px 10px !important; font-size:14px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.12);
  }

  /* 4) 送信フォームは“前面だけどレイアウトは通常フロー”＋十分な下余白を確保 */
  #chatform, .input-row{
    bottom: 100px;
    position: fixed !important;
    z-index: 10 !important;                 /* ← フッター(z=5)より前 */
    margin: 12px auto calc(0px + env(safe-area-inset-bottom, 0)) !important;
    /* ↑ 150pxは機種差のバッファ。まだ当たるなら 160〜180 に上げる */
    width: var( --track-w);
  }

  /* 5) 吹き出し面の底上げ（最下段がフッターに隠れないようにする） */
  .chat-track{
    padding-bottom: calc(100px + env(safe-area-inset-bottom, 0)) !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* 6) チャット箱とフォームの“見た目のスキマ”をぎゅっと詰める */
  .chat-area{ margin-bottom: 6px !important; }
}

/* === SP: チャットエリアを 2px だけ短くして送信ボックスとの被りを防ぐ === */
@media (max-width: 600px){
  .chat-area{
    height: calc(100dvh - var(--mascot-clear) - var(--below-sp) - 15px) !important;
  }
}

@media (max-width: 600px){
  .chat-track{
    /* 例: 既存より -8px 詰める（数値はお好みで） */
    padding-bottom: calc(100px + env(safe-area-inset-bottom, 0)) !important;
    /* ↑ 190 → 182 にする等。2pxだけなら 188 に。 */
  }
}
@media (max-width: 600px){
  html, body{
    /* 例: 160px → 152px（2〜12px 好みで調整） */
    padding-bottom: calc(100px + env(safe-area-inset-bottom, 0)) !important;
  }
}
/* SPだけ：枠は据え置き。見た目だけ下端を2px切る（中身はそのまま） */
@media (max-width: 600px){
  .chat-area{
    overflow: clip !important;                     /* はみ出し描画を止める（枠は動かない） */
    clip-path: inset(0 0 10px 0 round 24px);        /* 下を5pxだけカットして“かぶり感”を消す */
  }

  /* 最下行までスクロールした時にちょうど止まるよう保険 */
  .chat-track { scroll-margin-bottom: 10px; }
}
/* SP：.chat-area のクリップを解除（見えなくなった原因を戻す） */
@media (max-width: 600px){
  .chat-area{
    overflow: visible !important;
    clip-path: none !important;
  }
}
.mascot.icon{
  position: absolute;   /* 既定どおりでOK */
  z-index: 1000;        /* チャット枠より手前に */
  pointer-events: none; /* タップを邪魔しない（必要なら） */
}