@charset "UTF-8";
/*
 * FAQ チャットウィジェット スタイル
 * 末尾に Arkhe テーマ側（.p-fixBtnWrap）の調整を含む。
 */
/*
 * ランチャーの寸法と位置。Arkhe の「トップへ戻る」ボタン（.p-fixBtnWrap）も
 * この値を基準に置くため、#kc-widget ではなく :root で定義している。
 * --kc-launcher-size を変えれば、パネルの位置・アイコンの大きさ・
 * トップへ戻るボタンの逃げ量がすべて追従する。
 */
:root{
  --kc-launcher-size:90px;
  --kc-offset-x:20px;
  --kc-offset-y:20px;
}

#kc-widget{
  --kc-deep:#0E5C63;
  --kc-deep-dark:#0C4E54;
  --kc-mid:#158A93;
  --kc-line:#CFE7E9;
  --kc-line-soft:#D9EEEF;
  --kc-bg:#F3F9FA;
  --kc-ink:#0F3236;
  --kc-mint:#EAFBFB;
  --kc-z:99990;
  position:fixed;
  right:var(--kc-offset-x);
  bottom:var(--kc-offset-y);
  z-index:var(--kc-z);
  font-family:'Noto Sans JP',sans-serif;
  line-height:1.6;
}
#kc-widget *,#kc-widget *::before,#kc-widget *::after{box-sizing:border-box;}

/* --- 開閉ボタン --- */
#kc-launcher{
  position:relative;
  width:var(--kc-launcher-size);height:var(--kc-launcher-size);
  margin-left:auto;
  border:none;border-radius:50%;
  background:linear-gradient(135deg,var(--kc-deep),var(--kc-mid));
  color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 22px rgba(14,92,99,0.34);
  transition:transform .2s ease,box-shadow .2s ease;
  padding:0;
}
#kc-launcher:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(14,92,99,0.42);}
#kc-launcher:focus-visible{outline:3px solid #7EE8C9;outline-offset:3px;}
#kc-launcher::after{
  content:'';position:absolute;inset:-4px;border-radius:50%;
  border:2px solid rgba(14,92,99,0.35);
  animation:kc-ring 2.6s ease-out infinite;pointer-events:none;
}
#kc-widget[data-open="true"] #kc-launcher::after{display:none;}
@keyframes kc-ring{0%{transform:scale(.9);opacity:.7;}70%{transform:scale(1.25);opacity:0;}100%{opacity:0;}}
.kc-launcher-icon{display:flex;align-items:center;justify-content:center;transition:opacity .18s ease,transform .18s ease;}
/* アイコンはランチャーに対する比率で置き、サイズ変更に追従させる（元の 26/60・22/60）。
   SVG に viewBox があるので height:auto で正方比が保たれる。 */
.kc-icon-chat svg{width:calc(var(--kc-launcher-size) * 0.43);height:auto;}
.kc-icon-close svg{width:calc(var(--kc-launcher-size) * 0.37);height:auto;}
.kc-icon-close{position:absolute;opacity:0;transform:rotate(-45deg) scale(.7);}
#kc-widget[data-open="true"] .kc-icon-chat{opacity:0;transform:rotate(45deg) scale(.7);}
#kc-widget[data-open="true"] .kc-icon-close{opacity:1;transform:rotate(0) scale(1);}

/* --- パネル --- */
#kc-panel{
  position:absolute;right:0;bottom:calc(var(--kc-launcher-size) + 14px);
  width:380px;max-width:calc(100vw - 32px);
  background:var(--kc-bg);
  border:1px solid var(--kc-line);
  border-radius:20px;overflow:hidden;
  box-shadow:0 12px 44px rgba(15,80,86,0.22);
  display:flex;flex-direction:column;
  opacity:0;transform:translateY(12px) scale(.97);
  transform-origin:bottom right;
  transition:opacity .22s ease,transform .22s ease;
}
#kc-panel[hidden]{display:none;}
#kc-widget[data-open="true"] #kc-panel{opacity:1;transform:translateY(0) scale(1);}

#kc-header{
  background:linear-gradient(135deg,var(--kc-deep),var(--kc-mid));
  padding:16px 16px 16px 18px;display:flex;align-items:center;gap:12px;flex-shrink:0;
}
.kc-avatar{
  width:38px;height:38px;border-radius:50% 50% 50% 6px;
  background:rgba(255,255,255,0.16);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.kc-header-text{flex:1;min-width:0;}
.kc-title{color:#fff;font-family:'Zen Kaku Gothic New',sans-serif;font-weight:700;font-size:15px;letter-spacing:.02em;}
.kc-status{display:flex;align-items:center;gap:6px;margin-top:2px;}
.kc-dot-live{width:6px;height:6px;border-radius:50%;background:#7EE8C9;display:inline-block;animation:kc-pulse 1.8s infinite;}
.kc-status-text{color:rgba(255,255,255,.8);font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.04em;}
#kc-close{
  width:30px;height:30px;flex-shrink:0;border:none;border-radius:50%;
  background:rgba(255,255,255,.14);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;transition:background .15s;
}
#kc-close:hover{background:rgba(255,255,255,.28);}
#kc-close:focus-visible{outline:2px solid #7EE8C9;outline-offset:2px;}

#kc-messages{
  height:360px;overflow-y:auto;padding:18px 16px;
  display:flex;flex-direction:column;gap:12px;
  overscroll-behavior:contain;
}
#kc-messages::-webkit-scrollbar{width:6px;}
#kc-messages::-webkit-scrollbar-thumb{background:#BFE0E2;border-radius:3px;}

#kc-product-label{
  display:none;padding:0 16px 6px;font-size:11.5px;font-weight:700;
  color:var(--kc-deep);letter-spacing:.02em;align-items:center;gap:6px;
}
#kc-chips{
  padding:0 16px 12px;display:flex;flex-wrap:wrap;gap:8px;
  max-height:168px;overflow-y:auto;overscroll-behavior:contain;
}
#kc-chips::-webkit-scrollbar{width:6px;}
#kc-chips::-webkit-scrollbar-thumb{background:#BFE0E2;border-radius:3px;}

#kc-inputbar{
  padding:14px 16px 14px;border-top:1px solid var(--kc-line-soft);
  background:#fff;display:flex;gap:8px;flex-shrink:0;
}
#kc-input{
  flex:1;min-width:0;border:1px solid var(--kc-line);border-radius:22px;
  padding:10px 16px;font-size:16px;font-family:inherit;outline:none;
  background:#F7FCFC;color:var(--kc-ink);
}
#kc-input:focus{border-color:var(--kc-deep);box-shadow:0 0 0 3px rgba(14,92,99,.12);}
#kc-send{
  width:42px;height:42px;border-radius:50%;border:none;background:var(--kc-deep);
  color:#fff;flex-shrink:0;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;
}
#kc-send:hover{background:var(--kc-deep-dark);}
#kc-send:focus-visible{outline:2px solid var(--kc-deep);outline-offset:2px;}

#kc-note{
  text-align:center;padding:0 12px 12px;font-size:10.5px;color:#8FA6A8;
  font-family:'JetBrains Mono',monospace;background:#fff;
}

/* --- 吹き出し・チップ --- */
@keyframes kc-pulse{0%,100%{opacity:1;}50%{opacity:.35;}}
@keyframes kc-rise{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
@keyframes kc-dot{0%,80%,100%{transform:scale(.6);opacity:.4;}40%{transform:scale(1);opacity:1;}}
#kc-widget .kc-bubble{animation:kc-rise .25s ease;}
#kc-widget .kc-chip{
  border:1px solid #BFE0E2;background:#fff;color:var(--kc-deep);
  border-radius:16px;padding:7px 13px;font-size:12.5px;font-family:inherit;
  cursor:pointer;transition:background .15s;text-align:left;line-height:1.5;
}
#kc-widget .kc-chip:hover{background:var(--kc-mint);}
#kc-widget .kc-chip:focus-visible{outline:2px solid var(--kc-deep);outline-offset:2px;}
#kc-widget .kc-chip-lv1{background:var(--kc-deep);color:#fff;border-color:var(--kc-deep);font-weight:500;}
#kc-widget .kc-chip-lv1:hover{background:var(--kc-deep-dark);}
#kc-widget .kc-chip-back{color:var(--kc-deep);background:var(--kc-mint);border:1.5px solid var(--kc-deep);font-weight:700;}
#kc-widget .kc-chip-back:hover{background:var(--kc-deep);color:#fff;}

/* --- スマホ：下からのシート表示 --- */
@media (max-width:600px){
  :root{--kc-offset-x:16px;--kc-offset-y:16px;--kc-launcher-size:84px;}
  #kc-panel{
    position:fixed;right:0;left:0;bottom:0;top:auto;
    width:100%;max-width:none;
    border-radius:18px 18px 0 0;border-left:none;border-right:none;border-bottom:none;
    transform-origin:bottom center;
  }
  #kc-messages{height:min(46vh,340px);}
  #kc-chips{max-height:132px;}
  #kc-widget[data-open="true"] #kc-launcher{opacity:0;pointer-events:none;}
}

@media (prefers-reduced-motion:reduce){
  #kc-widget *,#kc-widget *::after{animation:none!important;transition:none!important;}
}

/* --- Arkhe テーマ側の調整 ---
   Arkhe の「トップへ戻る」ボタン（.p-fixBtnWrap）は right:3% / bottom:6% にあり、
   このランチャーの真下に完全に重なる。z-index が 10 対 99990 なので、
   隠れて見えず押せなくなる。画面サイズで変わる % ではなく、ランチャーを
   基準にした距離に置き換え、ランチャーの真上に中心を揃えて並べる。
   pagetop は 42px 角。ランチャーの寸法・位置は :root の変数から取るので、
   SP でランチャーが小さくなっても同じ式のまま追従する（メディアクエリ不要）。
     bottom = offset-y + ランチャーの高さ + 隙間 12px
     right  = offset-x + (ランチャーの幅 - pagetop の幅 42px) / 2 */
.p-fixBtnWrap{
  right: calc(var(--kc-offset-x) + (var(--kc-launcher-size) - 42px) / 2);
  bottom: calc(var(--kc-offset-y) + var(--kc-launcher-size) + 12px);
  /* テーマは 1000px 未満で .p-fixBtnWrap に
     padding-bottom:calc(env(safe-area-inset-bottom)*.5) を当てている。iOS のホームバー
     環境ではその分（約17px）ボタンが内側へ押し上げられ、隙間が 12px より広く見える。
     上の bottom はホームバー（約34px）より十分上でこの回避余白は不要。
     テーマの境界 1000px は下の 600px と揃わないので、メディアクエリの外で打ち消す。 */
  padding-bottom: 0;
}