/* ==========================================================================
   KNET AI Chat Widget（プラグイン標準スタイル）

   ※ このファイルはプラグイン更新で上書きされます。直接編集しないでください。
   サイト別の調整は、プラグイン外の knet-ai-chat/custom.css（子テーマ → 親テーマ
   → uploads の順に探索）か、管理画面の「追加CSS」に書いてください。
   多くの調整は下記 CSS変数を .kc-chat-widget で上書きするだけで済みます。

   アプリタイプ別の指定は .kc-chat-widget--ai / .kc-chat-widget--faq で行えます。
   ========================================================================== */
.kc-chat-widget,
.kc-chat-widget * {
 font-family: var(--kc-font-family);
 box-sizing: border-box;
}

.kc-chat-widget {
 text-align: left;
 /* 色 */
 --kc-primary: #3BAAF6;
 --kc-primary-dark: #0682e2;
 --kc-bg: #ffffff;
 --kc-header-color: #ffffff;
 --kc-bot-bubble-bg: #f1f3f5;
 --kc-bot-bubble-color: #222222;
 --kc-user-bubble-bg: var(--kc-primary);
 --kc-user-bubble-color: #ffffff;
 --kc-error-bg: #fdecea;
 --kc-error-color: #b3261e;
 --kc-footer-color: #666666;
 /* 形 */
 --kc-radius: 16px;
 --kc-button-radius: 999px;
 /* 回答内FAQボタン（0 で角なし） */
 /* サイズ・位置 */
 --kc-bubble-size: clamp(6.25rem, 5.842rem + 2.04vw, 7.5rem);
 /* ルート基準（通常16px→112px）。テーマの文字サイズに左右されない */
 --kc-bubble-open-size: 4em;
 /* チャットを開いている間のバブル */
 --kc-bubble-icon-inset: 6px;
 /* バブルの縁からアイコンまでの余白（7rem=112px時にアイコン100px） */
 --kc-bubble-icon-size: contain;
 /* 余白の内側に比率を保って収める（固定したい場合は 4em 等） */
 --kc-header-icon-size: 40px;
 /* チャット窓ヘッダーのアイコン */
 --kc-tooltip-bottom: 11em;
 --kc-mobile-top: 66px;
 /* スマホ時：チャット窓の上端（固定ヘッダーの高さ） */
 --kc-mobile-bubble-bottom: 2.5rem;
 /* スマホ時：バブルの下端（固定フッターバー等を避ける） */
 --kc-mobile-bottom: calc(var(--kc-mobile-bubble-bottom) + var(--kc-bubble-open-size) + 8px);
 /* スマホ時：チャット窓の下端（開いたバブルと重ならない位置） */
 --kc-z-index: 989;
 --kc-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
}
.kc-chat-widget .kc-msg--user .kc-msg__content{background-color:var(--kc-primary-dark);}
.kc-chat-widget .kc-chat__tooltip {
 max-width: clamp(8rem, 7.347rem + 3.27vw, 10rem);}
.kc-chat-widget .kc-chat__tooltip::after {left: 53%;}
.kc-chat-widget .kc-chat__tooltip.is-visible {transform: translateY(clamp(-0.625rem, 1.033rem + -2.04vw, 0.625rem)) translateX(1vw);}
.kc-chat-widget .kc-chat {bottom: 40px;height: 75vh;}
@media(980px <= width){.kc-chat-widget .kc-chat{width: 28rem;}}
.kc-chat-widget .kc-msg__content button {border-radius: 0;}
.kc-chat-widget .kc-msg__content button.kcq-faq {font-weight: bold;}
.kc-chat-widget .kc-chat__messages { background-color: #fdfdfd;}
.kc-chat-widget .kc-msg__icon {width: 40px; height: 40px;}
.kc-chat__footer-note{ background-color:var(--kc-primary);}
.kc-chat-widget .kc-chat__footer-note{color:#fff;}
.kc-chat-widget .kc-msg--bot .kc-msg__content {border-bottom-left-radius: var(--kc-radius);border-top-left-radius: 4px;}
p.kc-msg__label.kcq-label[data-kcq="m-faq"] {
    color: var(--kc-bot-bubble-color);font-weight: bold;
    &::before{content: "■";display: inline-block;font-size: 0.8em;margin-inline-end: 0.25em;align-content: center;vertical-align: middle;}
}
button.kcq-q.kcq-star,.kc-chat-widget .kc-msg__content button.kcq-q {
   color: var(--kc-bot-bubble-color);border-inline: none;border-block-start: none;margin-inline-start: 0.25em;padding-block: 0.25em;padding-inline: unset;background-color: unset;width: 95%;transition: all 0.3s ease;display:inline-flex;align-items: center;
&::before{content:"→";font-weight: bold;font-size:0.75em;display:inline-bock;padding-inline:0.2em;transition: all 0.3s ease;}
   &:hover{opacity: 0.8;border-color:#8fb7d3;
   &::before{padding-inline-start:0.4em;}
   }
}
/* button.kcq-q.kcq-star:nth-last-child(1 of .kcq-q.kcq-star) {display: block;margin-block-end:2em;} */
.kc-chat-widget .kc-msg__content button.kcq-cat,
.kc-chat-widget .kc-msg__content button.kcq-sub {border-radius: 0;color: #fff;background-color: var(--kc-primary);padding-inline: 0.5em 1.5em;transition: all 0.3s ease;border: none;display: inline-flex;gap:0.5em;align-items: center;position: relative;
&::after{content:" ＞";font-weight: bold;font-size:0.75em;display:inline-block;position: absolute;right: 0.75em;transition: all 0.3s ease;}
&:hover{background-color: #61bdfd;&::after{right: 0.5em}}
}
.kc-chat-widget .kc-msg__content button.kcq-sub {background-color: #04bbda;}
.kc-chat-widget .kc-msg__content hr {border-top:none;}
button.kcq-q.kcq-star + p {font-weight: bold;margin-block-start:2em;}

.kc-chat-widget .kc-msg__content button.kcq-back {
   color: #fff;font-weight:bold;border-block-start: none;margin: 0.5em auto;padding-block:0.4em;padding-inline:0.5em 0.75em;width: 100%;transition: all 0.3s ease;display:inline-flex;align-items: center;background-color: #04bbda;border:1px solid transparent;
   &::before{content:"←";font-weight: bold;font-size:0.75em;display:inline-bock;transition: all 0.3s ease;}
   &:hover{opacity: 0.8;border-color:#04bbda; background-color: #fff;color: #04bbda;}
}

p.kc-msg__label.kcq-label[data-kcq="m-faq"] {font-weight: bold;}
.kc-chat-widget .kc-chat__footer-note {align-content: end;}
.kc-chat-widget .kc-msg__bubble .kc-msg__content p.kcq-contact {
width: fit-content;margin-inline: auto;padding-block-end: 0.5em;font-weight:normal;font-size:0.9em;
a{text-decoration: none;font-weight:bold;
&[href^="http"]{font-weight: bold;}}
}
button.kcq-home[data-kcq="m-home"] + hr {border-top: 1px solid #ccc;}