/* CS AIチャットボット */

/* テーマ側のCSSに左右されないよう、ウィジェット内の箱モデルを固定する */
.cschat, .cschat *, .cschat *::before, .cschat *::after {box-sizing:border-box}

/* #top_btn（上へ戻る）と重ならない位置に配置する */
.cschat {position:fixed;right:20px;bottom:60px;z-index:9000;font-size:14px;line-height:1.6}

/* 起動ボタン */
.cschat-launcher {display:flex;align-items:center;justify-content:center;width:56px;height:56px;border:0;-webkit-appearance:none;appearance:none;border-radius:50%;background:var(--bs-primary,#0d6efd);color:#fff;font-size:1.4em;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.25);transition:transform .15s ease}
.cschat-launcher:hover {transform:scale(1.06)}
.cschat.is-open .cschat-launcher {display:none}

/* パネル */
.cschat-panel {display:flex;flex-direction:column;width:360px;max-width:calc(100vw - 40px);height:520px;max-height:calc(100vh - 100px);background:var(--body-bg,#fff);border:1px solid var(--bs-gray-200,#e9ecef);border-radius:12px;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,.2)}
.cschat-panel[hidden] {display:none}

.cschat-head {display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:var(--bs-primary,#0d6efd);color:#fff}
.cschat-head-btns {display:flex;align-items:center;gap:2px}
#cschat .cschat-close,
#cschat .cschat-clear {display:flex;align-items:center;justify-content:center;width:30px;height:30px;border:0;-webkit-appearance:none;appearance:none;background:transparent;color:#fff;font-size:1.05em;line-height:1;padding:0;margin:0;border-radius:50%;cursor:pointer;opacity:.85}
#cschat .cschat-close:hover,
#cschat .cschat-clear:hover {opacity:1;background:rgba(255,255,255,.18)}
#cschat .cschat-clear {font-size:.95em}

/* 会話ログ */
.cschat-log {flex:1;overflow-y:auto;padding:16px;background:var(--bs-gray-100,#f8f9fa)}
.cschat-msg {margin-bottom:14px;max-width:85%;padding:10px 14px;border-radius:12px;word-break:break-word}
/* 改行の保持は p の中だけに限定する。
   .cschat-msg に指定すると widget.php のHTMLの字下げ・改行まで余白として描画されてしまう */
.cschat-msg p {margin:0 0 6px;white-space:pre-wrap}
.cschat-msg p:last-child {margin-bottom:0}
.cschat-bot {background:var(--bg-box,#fff);color:var(--body-color,#212529);border:1px solid var(--bs-gray-200,#e9ecef);border-top-left-radius:2px}
.cschat-user {margin-left:auto;background:var(--bs-primary,#0d6efd);color:#fff;border-top-right-radius:2px}
.cschat-note {font-size:.85em;color:var(--bs-gray-600,#6c757d);margin-top:8px}
.cschat-user .cschat-note {color:rgba(255,255,255,.8)}

/* 使用言語の指定欄。入力欄のすぐ上に 1 行で収める。
   折り返すと入力欄の上に段が増えて会話が見える範囲が狭くなるため、
   ラベルと入力欄だけを置き、説明は入力欄の title に持たせる。 */
.cschat-langbar {display:flex;align-items:center;gap:6px;flex-wrap:nowrap;padding:6px 12px;border-top:1px solid var(--bs-gray-200,#e9ecef);background:var(--body-bg,#fff);font-size:.85em;color:var(--bs-gray-600,#6c757d)}
.cschat-langbar label {white-space:nowrap;flex:0 0 auto;margin:0}
.cschat-langbar .cschat-reply-lang {flex:1 1 auto;min-width:0;width:auto;padding:3px 8px;border:1px solid var(--bs-gray-300,#dee2e6);border-radius:6px;font-size:1em;line-height:1.5;background:var(--bg-input,#fff);color:var(--body-color,#212529)}

/* 回答の中に差し込む商品ページへのリンク
   テーマ側の a タグの色指定に負けないよう、ID セレクタで詳細度を上げる */
#cschat .cschat-link,
#cschat .cschat-link:link,
#cschat .cschat-link:visited {color:var(--bs-primary,#0d6efd);text-decoration:underline}
#cschat .cschat-link:hover,
#cschat .cschat-link:active {color:var(--bs-primary,#0d6efd);text-decoration:underline;opacity:.8}

/* 有人対応への案内
   テーマ側の a タグの色指定に負けないよう、ID セレクタで詳細度を上げる */
#cschat .cschat-handoff {display:inline-block;margin-top:10px;padding:8px 16px;background:var(--bs-primary,#0d6efd);color:#fff;border-radius:5em;text-decoration:none;font-size:.92em}
#cschat .cschat-handoff:link,
#cschat .cschat-handoff:visited,
#cschat .cschat-handoff:hover,
#cschat .cschat-handoff:active {color:#fff;text-decoration:none}
#cschat .cschat-handoff:hover {opacity:.9}

/* 入力中インジケータ */
.cschat-typing span {display:inline-block;width:7px;height:7px;margin-right:3px;border-radius:50%;background:var(--bs-gray-600,#6c757d);animation:cschat-blink 1.2s infinite}
.cschat-typing span:nth-child(2) {animation-delay:.2s}
.cschat-typing span:nth-child(3) {animation-delay:.4s}
@keyframes cschat-blink {0%,60%,100%{opacity:.25} 30%{opacity:1}}

/* 入力欄 */
#cschat .cschat-form {display:flex;align-items:flex-end;gap:8px;padding:12px;margin:0;border-top:1px solid var(--bs-gray-200,#e9ecef);background:var(--body-bg,#fff)}
/* min-width:0 が無いと textarea の既定幅(cols)より縮まず、送信ボタンが枠外へ押し出される */
/* textarea は既定で baseline 揃えのため、下に数pxの余白が生まれてボタンとずれる。
   display:block と vertical-align:bottom でその余白を消す。
   高さは送信ボタンと同じ40pxに揃える */
#cschat .cschat-input {flex:1 1 auto;align-self:flex-end;display:block;vertical-align:bottom;float:none;min-width:0;width:100%;box-sizing:border-box;height:40px;min-height:40px;max-height:120px;margin:0;padding:8px 14px;border:1px solid var(--bs-gray-300,#dee2e6);border-radius:20px;background:var(--bg-input,#f8f9fa);color:var(--body-color,#212529);resize:none;font-family:inherit;font-size:1em;line-height:1.5}
.cschat-input:focus {outline:2px solid var(--bs-primary,#0d6efd);outline-offset:-1px}
/* align-self を要素側にも指定し、テーマCSSの影響を受けても入力欄と底辺が揃うようにする。
   内側は flex 中央寄せにして、アイコンの baseline による下方向のずれを消す */
#cschat .cschat-send {flex:0 0 40px;align-self:flex-end;vertical-align:bottom;display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;margin:0;border:0;-webkit-appearance:none;appearance:none;border-radius:50%;background:var(--bs-primary,#0d6efd);color:#fff;line-height:1;cursor:pointer}
#cschat .cschat-send:disabled {opacity:.5;cursor:default}

/* モバイル */
@media (max-width:480px) {
    .cschat {right:12px;bottom:60px}
    .cschat-panel {width:calc(100vw - 24px);height:calc(100vh - 100px)}
}

/* 印刷時は非表示 */
@media print {
    .cschat {display:none}
}