/*
 * FAQ のページのチャットサポート（ChatPlus）の、アイコンと開いたチャット画面の位置。HTML とこのファイルの読み込みは functions.php が出す。
 * チャット画面の中の見た目は chatplus.css が受け持ち、ここでは位置と大きさだけを決める
 */

/*
 * デザインの指定: アイコンと開いたチャット画面は、TOP に戻るボタン（#pagetopBtn）の 30px 上に置き、アイコンは中心をそろえる。
 * TOP に戻るボタンの位置と大きさは chatsupport.js が測って入れる。既定値は PC の値で、JS が動かなかったときに使う。
 * --chatsupport-scale は TOP に戻るボタンの幅のデザイン（87px）に対する比で、768px 以下で TOP に戻るボタンが画面の幅に合わせて変わる分を、アイコンと間隔にも掛ける
 */
:root {
  --chatsupport-top-right: 42px;
  --chatsupport-top-width: 87px;
  --chatsupport-top-edge: 316px;
  --chatsupport-scale: 1;
  /* ヘッダーの MENU ボタンの下端（画面の上端から）。開いたチャット画面で MENU ボタンを覆わないよう、chatsupport.js が測って入れる */
  --chatsupport-menu-bottom: 72px;
  /* 見えている画面の高さ。スマホやタブレットでは vh がツールバーを畳んだときの高さになり、見えている高さより大きいので、使えれば dvh を使う */
  --chatsupport-vh: 100vh;
}
/* カスタムプロパティは宣言のときに単位を検証しないので、dvh に対応しないブラウザ向けの切り替えは @supports で行う */
@supports (height: 100dvh) {
  :root {
    --chatsupport-vh: 100dvh;
  }
}

.chatsupportBtn {
  --chatsupport-btn-width: calc(103px * var(--chatsupport-scale));
  display: none;
  position: fixed;
  /* TOP に戻るボタンと同じ。開いたチャット画面（ChatPlus）はこれより上に出る */
  z-index: 30;
  right: calc(var(--chatsupport-top-right) + var(--chatsupport-top-width) / 2 - var(--chatsupport-btn-width) / 2);
  bottom: calc(var(--chatsupport-top-edge) + 30px * var(--chatsupport-scale));
  width: var(--chatsupport-btn-width);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.chatsupportBtn img {
  display: block;
  width: 100%;
  height: auto;
}
.chatsupportBtn:focus-visible {
  outline: 2px solid #d7bea3;
  outline-offset: 2px;
  border-radius: 50%;
}
/*
 * ChatPlus が読み込まれ、チャットが閉じているときだけ出す。開いている間は ChatPlus の画面が代わりに出る。
 * ChatPlus が読み込めないとき（広告ブロッカーなど）は出さず、押しても開かないアイコンを残さない
 */
body:has(#chatplusview.closed) .chatsupportBtn {
  display: block;
}

/*
 * ChatPlus の閉じているときのバーは使わない（上のアイコンで開く）。
 * display: none にすると、開くときの ChatPlus の処理が大きさを測れないことがあるので、見えなくするだけにする。
 * ChatPlus の CSS は中の要素ごとに visibility: visible を指定し直しているので、中の要素にも指定する。
 * アイコンと同じく :has() で書き、:has() が使えないブラウザではアイコンが出ない代わりにバーを残して、開く入口を無くさない
 */
body:has(#chatplusview) #chatplusview.closed,
body:has(#chatplusview) #chatplusview.closed * {
  visibility: hidden;
}

/*
 * 開いたチャット画面。幅と高さはデザインの 442 x 711px（1px の枠線を含む）。
 * 幅 769px 以上では、上端はヘッダーの MENU ボタンの 20px 下までにする。MENU ボタンを覆うと、チャットを開いたまま MENU を開けないため。
 * 画面が低いときは、そこからはみ出さないよう高さを縮める。それでも 400px を切るときは、TOP に戻るボタンに重なってでも下へ下げて 400px を保つ。
 * 画面そのものが低くて 400px も取れないとき（PC で 512px より低いときなど）は、MENU ボタンの 20px 下から画面の下端の 20px 上までに合わせる。入力欄が画面の下に出て使えなくならないようにするため。
 * 768px 以下では、ChatPlus のスマホ用の配置（幅 98%、右に 1%）にそろえる。ChatPlus は画面の幅ではなくブラウザの種類で
 * スマホを見分けるので、PC のブラウザを狭めたときは PC 用の幅 420px のまま出て、画面の左にはみ出すため。
 * ただし幅はデザインの 442px までにする。ヘッダーの画像は幅に合わせて縦も伸びるので、それより広いと下の波が切れる（タブレットの縦向きなど）。
 * left も指定すると width と right のどちらかが無視されるので、left は auto にする。
 * ChatPlus の CSS はあとから読み込まれるので、詳細度で上回るよう body から書く
 */
@media screen and (max-width: 768px) {
  body #chatplusview.chatplusview-modern:not(.closed) {
    left: auto;
    right: 1%;
    width: 98%;
    max-width: 442px;
    margin: 0;
  }
}
@media screen and (min-width: 769px) {
  body #chatplusview.chatplusview-modern:not(.closed) {
    /* 変数は ChatPlus の要素の中にも引き継がれ、ChatPlus の CSS も --height などの名前を使うので、接頭辞を付けて重ならないようにする */
    --chatsupport-height: min(711px, calc(var(--chatsupport-vh) - var(--chatsupport-menu-bottom) - 40px), max(400px, calc(var(--chatsupport-vh) - var(--chatsupport-top-edge) - 30px - var(--chatsupport-menu-bottom) - 20px)));
    right: var(--chatsupport-top-right);
    bottom: min(calc(var(--chatsupport-top-edge) + 30px), calc(var(--chatsupport-vh) - var(--chatsupport-menu-bottom) - 20px - var(--chatsupport-height)));
    width: 442px;
    height: var(--chatsupport-height);
    max-height: none;
    /* タブレットとして開くと、ChatPlus のスマホ用の CSS が左右に画面の幅の 1% の余白を付け、TOP に戻るボタンの右端からずれる */
    margin: 0;
  }
}

/*
 * MENU（#headerMenu）を開いている間は、開いたチャット画面を MENU の下に回す。
 * ChatPlus はチャット画面を z-index 100001 で出すので、そのままでは MENU（ヘッダーの z-index 50）の上に重なって MENU が見えない。
 * チャットは閉じずに後ろに残す。TOP に戻るボタン（z-index 30）よりは上に置く
 */
body:has(#headerMenu.is-open) #chatplusview {
  z-index: 40;
}