/*
 * FAQ のページのチャットサポート（ChatPlus）の、チャット画面の中の見た目。読み込みは functions.php が出す。
 * チャット画面の位置と大きさ、閉じているときのアイコンは chatsupport.css が決めるので、ここには書かない。
 * ChatPlus のチャット画面は iframe ではなくこのページの DOM（#chatplusview）に描かれるので、ページの CSS で変えられる。
 * ChatPlus の管理画面の独自CSS には何も登録しない（chatplus/README.md）。ChatPlus のテーマは「modern」の前提で書いている。
 *
 * ChatPlus の CSS は、このファイルより後に読み込まれ、セレクタも長い（ID 5 つとクラス 5 つのものもある）。
 * ルールごとに強さを合わせると漏れるので、ID を 2 回重ねた #chatplusview#chatplusview から書いて、常に上回るようにする。
 * !important は、管理画面のデザイン設定から作られる CSS が !important を付けている所だけに使う
 */

#chatplusview#chatplusview.chatplusview-modern {
  --cs-kinari: #ffffec;
  --cs-kogecha: #591400;
  --cs-mizuiro: #c9f5ff;
  --cs-usukin: #e5d6c6;
  --cs-gray: #c1c5cd;
  --cs-pink: #ff9ece;
  --cs-brown: #ccac8d;
  --cs-font: "Montserrat", "Zen Kaku Gothic New", sans-serif;
}
/* ChatPlus の CSS は中の要素ごとにフォント（Hiragino Kaku Gothic ProN の太さ 400）を指定し直していて、親に指定しても引き継がれないので、要素ごとに指定する */
#chatplusview#chatplusview.chatplusview-modern :is(div, p, span, a, label, ul, li, h2, button, textarea, input, select) {
  font-family: var(--cs-font);
  font-weight: 500;
}

/* ---------- 全体 ---------- */

#chatplusview#chatplusview.chatplusview-modern #outline {
  border: 1px solid var(--cs-kogecha);
  border-radius: 12px;
  background-color: var(--cs-kinari);
  box-shadow: 0 4px 16px rgba(89, 20, 0, 0.25);
  overflow: hidden;
}
#chatplusview#chatplusview.chatplusview-modern #outline #chatpluscontent #body {
  height: calc(100% - 98px);
  background-color: transparent;
}

/* ---------- ヘッダー ---------- */

/* タイトルはシステムのフォントでは出せないので、地色・きらめき・波ごと画像にしている（デザインの指定） */
#chatplusview#chatplusview.chatplusview-modern #outline #chatpluscontent #chatplusheader {
  height: 98px;
  padding: 0;
  border: none;
  border-radius: 11px 11px 0 0;
  background-image: url("../img/chatsupport/header.webp");
  background-position: center top;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-color: var(--cs-kinari) !important;
}
/* タイトルの文字は画像と重なるので見せず、読み上げには残す */
#chatplusview#chatplusview.chatplusview-modern #outline #chatpluscontent #chatplusheader .title {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* 右上のボタン。デザインは「閉じる（×）」の下に「戻る（↻）」を縦に並べる */
#chatplusview#chatplusview.chatplusview-modern #outline #chatpluscontent #chatplusheader .operate {
  top: 11px;
  right: 15px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
#chatplusview#chatplusview.chatplusview-modern #outline #chatpluscontent #chatplusheader .operate > a {
  float: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 28px;
  margin: 0;
  border-radius: 50%;
  background-color: var(--cs-kinari);
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  color: var(--cs-kogecha);
}
#chatplusview#chatplusview.chatplusview-modern #outline #chatpluscontent #chatplusheader .operate > a i {
  top: 0;
  font-size: 14px;
  line-height: 1;
  color: var(--cs-kogecha);
}
/* 「閉じる」は ChatPlus の「最小化」（会話は残る）、「戻る」は「初回メッセージに遷移」に当てる */
#chatplusview#chatplusview.chatplusview-modern #outline #chatpluscontent #chatplusheader .operate > a.button-close {
  order: 1;
  background-color: transparent;
  background-image: url("../img/chatsupport/btn_close.webp");
}
#chatplusview#chatplusview.chatplusview-modern #outline #chatpluscontent #chatplusheader .operate > a.button-home {
  order: 2;
  background-color: transparent;
  background-image: url("../img/chatsupport/btn_home.webp");
}
#chatplusview#chatplusview.chatplusview-modern #outline #chatpluscontent #chatplusheader .operate > a.button-close i,
#chatplusview#chatplusview.chatplusview-modern #outline #chatpluscontent #chatplusheader .operate > a.button-home i {
  display: none;
}
/* 「チャットを終了」と、終了後の「非表示」は、デザインに無い。「閉じる」と見分けがつかない×が並ぶのを避ける */
#chatplusview#chatplusview.chatplusview-modern #outline #chatpluscontent #chatplusheader .operate > a.button-remove,
#chatplusview#chatplusview.chatplusview-modern #outline #chatpluscontent #chatplusheader .operate > a.button-hide {
  display: none;
}
/*
 * 拡大・縮小（スマホ・タブレットとして開いたときだけ出る）も、デザインに無い。
 * 幅 769px 以上では HP 側でチャット画面の大きさを固定していて押しても効かないので、ここで消す。
 * スマホでは消すと縮小したまま広げられなくなるので、管理画面でスマホの高さの設定を切って出さないようにする（chatplus/README.md）
 */
@media screen and (min-width: 769px) {
  #chatplusview#chatplusview.chatplusview-modern #outline #chatpluscontent #chatplusheader .operate > a.button-expand,
  #chatplusview#chatplusview.chatplusview-modern #outline #chatpluscontent #chatplusheader .operate > a.button-compress {
    display: none;
  }
}

/* ---------- 会話 ---------- */

/* 本文の共通: Zen Kaku Gothic New と Montserrat の Medium、14px、行間 8px */
#chatplusview#chatplusview.chatplusview-modern #outline #chatpluscontent #body #messages {
  height: calc(100% - 80px);
  padding: 20px 0 30px;
  background-color: transparent;
  font-size: 14px;
  scrollbar-color: var(--cs-brown) transparent;
  scrollbar-width: thin;
}
/* 入力欄が出ない場面（選択肢だけで進むとき）は、入力欄の分も会話に使う */
#chatplusview#chatplusview.chatplusview-modern.no_prompt #outline #chatpluscontent #body #messages {
  height: 100%;
}
/*
 * 吹き出しの横幅は 350px。公式側は左、ユーザー側は右に、外側から 20px 離して置く。
 * 吹き出しと吹き出しの間は 50px あけ、その間の吹き出しから 8px の所に送信日時を置く
 */
#chatplusview#chatplusview.chatplusview-modern #outline #chatpluscontent #body #messages .view .msg {
  min-width: 0;
  max-width: none;
  margin: 0 0 50px;
}
#chatplusview#chatplusview.chatplusview-modern #outline #chatpluscontent #body #messages .view .msg.ope {
  width: min(350px, calc(100% - 40px));
  margin-left: 20px;
  margin-right: 0;
}
#chatplusview#chatplusview.chatplusview-modern #outline #chatpluscontent #body #messages .view .msg.user {
  max-width: min(350px, calc(100% - 40px));
  margin-left: 0;
  margin-right: 20px;
}
#chatplusview#chatplusview.chatplusview-modern #outline #chatpluscontent #body #messages .view .msg .name,
#chatplusview#chatplusview.chatplusview-modern #outline #chatpluscontent #body #messages .view .msg img.icon {
  display: none;
}
#chatplusview#chatplusview.chatplusview-modern #outline #chatpluscontent #body #messages .view .msg .text {
  margin: 0;
  padding: 20px;
  border: 1px solid var(--cs-gray);
  border-radius: 8px;
  font-family: var(--cs-font);
  font-weight: 500;
  font-size: 14px;
  line-height: 22px;
  color: var(--cs-kogecha);
}
#chatplusview#chatplusview.chatplusview-modern #outline #chatpluscontent #body #messages .view .msg .text::before {
  display: none;
}
#chatplusview#chatplusview.chatplusview-modern #outline #chatpluscontent #body #messages .view .msg .text a {
  color: inherit;
  text-decoration: underline;
}
#chatplusview#chatplusview.chatplusview-modern #outline #chatpluscontent #body #messages .view .msg.ope .text {
  background-color: var(--cs-mizuiro);
}
/* ユーザー側は 1 行で収まるときに文字の幅まで縮むよう、選択肢と同じ高さ 36px の余白にする */
#chatplusview#chatplusview.chatplusview-modern #outline #chatpluscontent #body #messages .view .msg.user .text {
  padding: 6px 20px;
  background-color: var(--cs-usukin);
}
#chatplusview#chatplusview.chatplusview-modern #outline #chatpluscontent #body #messages .view .msg .time {
  top: 100%;
  bottom: auto;
  left: 0;
  right: auto;
  margin-top: 8px;
  font-family: var(--cs-font);
  font-size: 12px;
  line-height: 1;
  color: var(--cs-kogecha);
}
#chatplusview#chatplusview.chatplusview-modern #outline #chatpluscontent #body #messages .view .msg.user .time {
  left: auto;
  right: 0;
}
#chatplusview#chatplusview.chatplusview-modern #outline #chatpluscontent #body #messages .view .msg .time timestampclient {
  color: inherit;
}
#chatplusview#chatplusview.chatplusview-modern #outline #chatpluscontent #body #messages .view .datestamp {
  padding: 0 0 20px;
  font-size: 12px;
  color: var(--cs-kogecha);
}

/*
 * 選択肢。ChatPlus は選択肢を公式側の吹き出しの中に入れて出すが、デザインでは吹き出しの下に 10px あけて並べる。
 * 選択肢の欄を吹き出しの枠の外側まで広げて吹き出しの下側を地色で覆い、欄の先頭（::before）で吹き出しの下端（余白 20px と枠線、角丸）を描き直す
 */
#chatplusview#chatplusview.chatplusview-modern #outline #chatpluscontent #body #messages .view .msg.ope .text ul.chat-ques {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 -21px -21px;
  padding: 0;
  background-color: var(--cs-kinari);
}
#chatplusview#chatplusview.chatplusview-modern #outline #chatpluscontent #body #messages .view .msg.ope .text ul.chat-ques::before {
  content: "";
  display: block;
  height: 21px;
  border: 1px solid var(--cs-gray);
  border-top: none;
  border-radius: 0 0 8px 8px;
  background-color: var(--cs-mizuiro);
}
#chatplusview#chatplusview.chatplusview-modern #outline #chatpluscontent #body #messages .view ul.chat-ques li label {
  min-height: 36px;
  margin: 0;
  padding: 6px 20px;
  border: 1px solid var(--cs-gray);
  border-radius: 8px;
  background-color: #fff;
  font-family: var(--cs-font);
  font-weight: 500;
  font-size: 14px;
  line-height: 22px;
  text-align: left;
  color: var(--cs-kogecha);
}
#chatplusview#chatplusview.chatplusview-modern #outline #chatpluscontent #body #messages .view ul.chat-ques li input:not(:disabled) + label:hover,
#chatplusview#chatplusview.chatplusview-modern #outline #chatpluscontent #body #messages .view ul.chat-ques li input:not(:disabled) + label:focus-visible,
#chatplusview#chatplusview.chatplusview-modern #outline #chatpluscontent #body #messages .view ul.chat-ques li input:checked + label {
  background-color: var(--cs-pink) !important;
  color: #fff;
}
/*
 * 選んだ後の、選ばなかった選択肢。押せないことが分かるよう薄くする（デザインに指定は無い）。
 * 管理画面の設定によっては、マウスを乗せたときの文字色が !important で白になるので、色も !important で戻す
 */
#chatplusview#chatplusview.chatplusview-modern #outline #chatpluscontent #body #messages .view ul.chat-ques li input:not(:checked):disabled + label {
  background-color: #fff !important;
  color: var(--cs-kogecha) !important;
  opacity: 0.5;
  cursor: default;
}

/* ---------- 入力欄 ---------- */

#chatplusview#chatplusview.chatplusview-modern #outline #chatpluscontent #textarea {
  height: 80px;
  border-top: 1px solid var(--cs-brown);
  background-color: var(--cs-kinari);
  font-family: var(--cs-font);
}
#chatplusview#chatplusview.chatplusview-modern #outline #chatpluscontent #textarea #textarea-wrapper {
  padding: 15px 15px 0 20px;
  background-color: transparent;
}
#chatplusview#chatplusview.chatplusview-modern #outline #chatpluscontent #textarea #message-wrapper textarea {
  width: calc(100% - 85px);
  height: 48px;
  max-height: 48px;
  padding: 4px 0 0;
  font-family: var(--cs-font);
  font-weight: 500;
  font-size: 14px;
  line-height: 22px;
  color: var(--cs-kogecha);
}
#chatplusview#chatplusview.chatplusview-modern #outline #chatpluscontent #textarea #message-wrapper textarea::placeholder {
  color: var(--cs-brown);
  opacity: 1;
}
/* 入力中に下に出る線（ChatPlus の青）は、デザインに無い */
#chatplusview#chatplusview.chatplusview-modern #outline #chatpluscontent #textarea #message-wrapper textarea + span {
  display: none;
}
#chatplusview#chatplusview.chatplusview-modern #outline #chatpluscontent #textarea #operate {
  width: 73px;
  height: 48px;
  padding: 0;
}
/* 送信ボタン。文字はシステムのフォントでは出せないので画像にし、楕円の地色だけをマウスを乗せたとき・押したときにピンクへ変える */
#chatplusview#chatplusview.chatplusview-modern #outline #chatpluscontent #textarea #operate button#submit_btn {
  width: 73px;
  height: 48px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: var(--cs-brown);
  background-image: url("../img/chatsupport/send_text.webp");
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  font-size: 0;
  opacity: 1;
}
/* 文字は画像で見せるので隠すが、ボタンの名前として読み上げに残す */
#chatplusview#chatplusview.chatplusview-modern #outline #chatpluscontent #textarea #operate button#submit_btn > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
#chatplusview#chatplusview.chatplusview-modern #outline #chatpluscontent #textarea #operate button#submit_btn:hover,
#chatplusview#chatplusview.chatplusview-modern #outline #chatpluscontent #textarea #operate button#submit_btn:active,
#chatplusview#chatplusview.chatplusview-modern #outline #chatpluscontent #textarea #operate button#submit_btn:focus-visible {
  background-color: var(--cs-pink);
}

/* ---------- そのほか ---------- */

/* 「もう一度はじめる」など、ChatPlus が出すボタン。送信ボタンと同じ色にする */
#chatplusview#chatplusview.chatplusview-modern .btn {
  border-radius: 18px;
  background-color: var(--cs-brown);
  color: var(--cs-kogecha);
  font-family: var(--cs-font);
}
#chatplusview#chatplusview.chatplusview-modern .btn > span {
  color: inherit;
}
#chatplusview#chatplusview.chatplusview-modern .btn:hover,
#chatplusview#chatplusview.chatplusview-modern .btn:focus-visible {
  background-color: var(--cs-pink);
  opacity: 1;
}
/*
 * チャットの終了後。ChatPlus は「チャットを終了しました」と「もう一度はじめる」の帯を会話の下端に重ね、送信ボタンの欄を畳む。
 * 上の送信ボタンの欄の大きさの指定が、畳む指定より強くなってしまうので、ここで畳み直す
 */
#chatplusview#chatplusview.chatplusview-modern.end #outline #chatpluscontent .info-closed {
  border-top: 1px solid var(--cs-brown);
  background-color: var(--cs-kinari);
  font-family: var(--cs-font);
  font-size: 14px;
  color: var(--cs-kogecha);
}
#chatplusview#chatplusview.chatplusview-modern.end #outline #chatpluscontent .info-closed p {
  color: inherit;
}
#chatplusview#chatplusview.chatplusview-modern.end #outline #chatpluscontent #body #messages {
  padding-bottom: 50px;
}
#chatplusview#chatplusview.chatplusview-modern.end #outline #chatpluscontent #textarea #operate {
  height: 0;
  padding: 0;
}
/* 下端の欄（「Powered by Chat Plus」と「オプション」）は、デザインに無いので出さない */
#chatplusview#chatplusview.chatplusview-modern #chatplusfooter {
  display: none;
}