/* チャット（わたぼう）の見た目。旧テーマ apricot-2026 の common.css の Chat widget をそのまま移し、色の名前だけ新しいテーマに合わせた（2026-11-07） */
.chat-widget{--c-black:var(--ink);--c-text:var(--ink);--c-sub:var(--ink-2);--c-line:var(--line);--c-bg:var(--paper-2);--font-jp:var(--font);}
/* =========================================================
   Chat widget — 画面右下のゆるっと相談（雑談）チャット
   AIっぽく見せかけているが、内部はキーワードマッチの返答。
========================================================= */
.chat-widget {
  position: fixed;
  right: clamp(20px, 3vw, 32px);
  bottom: clamp(20px, 3vh, 32px);
  z-index: 90;
  font-family: var(--font-jp);
}

/* FAB（折りたたみ時のボタン） */
.chat-fab {
  appearance: none;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  padding: 8px 18px 8px 8px;
  display: inline-flex; align-items: center; gap: 12px;
  cursor: pointer;
  box-shadow: 0 12px 32px rgba(20, 20, 20, 0.08);
  transition: transform .25s ease, box-shadow .25s ease, opacity .3s ease;
  color: var(--c-black);
  position: relative;
}
.chat-fab:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(20,20,20,0.12); }
.chat-fab-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--c-bg);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  color: var(--c-black);
  flex-shrink: 0;
}
.chat-fab-avatar svg { width: 36px; height: auto; max-height: 44px; }
.chat-fab-avatar img { width: 100%; height: 100%; object-fit: contain; }
.chat-fab-avatar .chat-character-svg { display: block; }
.chat-fab-label {
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--c-text);
}
.chat-fab-bubble {
  position: absolute;
  top: -6px; right: -6px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--c-black);
  color: #fff;
  font-size: 12px;
  font-family: var(--font-en);
  display: flex; align-items: center; justify-content: center;
  letter-spacing: 0;
  animation: chat-bubble-pulse 2.4s ease-in-out infinite;
}
@keyframes chat-bubble-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.12); }
}
.chat-widget.is-open .chat-fab { opacity: 0; pointer-events: none; transform: translateY(8px); }

/* パネル */
.chat-panel {
  position: absolute;
  right: 0; bottom: 0;
  width: min(360px, calc(100vw - 32px));
  height: min(540px, calc(100vh - 160px));
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 16px;
  box-shadow: 0 18px 48px rgba(20, 20, 20, 0.12);
  display: flex; flex-direction: column;
  overflow: hidden;
  opacity: 0; pointer-events: none;
  transform: translateY(12px) scale(0.98);
  transition: opacity .3s ease, transform .3s cubic-bezier(.2,.8,.2,1);
}
.chat-widget.is-open .chat-panel {
  opacity: 1; pointer-events: auto;
  transform: translateY(0) scale(1);
}

.chat-head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 14px 16px 18px;
  border-bottom: 1px solid var(--c-line);
}
.chat-head-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--c-bg);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  color: var(--c-black);
  flex-shrink: 0;
}
.chat-head-avatar svg { width: 30px; height: auto; max-height: 38px; }
.chat-head-avatar img { width: 100%; height: 100%; object-fit: contain; }
.chat-head-meta { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.chat-head-meta .name {
  font-size: 14px; font-weight: 500;
  color: var(--c-black); letter-spacing: 0.06em;
}
.chat-head-meta .role {
  font-size: 12px; color: var(--c-sub);
  letter-spacing: 0.08em;
}
.chat-close {
  appearance: none;
  background: transparent; border: none;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  color: var(--c-sub);
  cursor: pointer;
  transition: color .25s ease;
}
.chat-close:hover { color: var(--c-black); }
.chat-close svg { width: 18px; height: 18px; }

.chat-log {
  flex: 1;
  overflow-y: auto;
  padding: 18px 16px;
  display: flex; flex-direction: column; gap: 14px;
  background: var(--c-bg);
  scrollbar-width: thin;
}
.chat-log::-webkit-scrollbar { width: 6px; }
.chat-log::-webkit-scrollbar-thumb { background: var(--c-line); border-radius: 3px; }

.chat-msg {
  display: flex; gap: 10px;
  align-items: flex-end;
  max-width: 100%;
  opacity: 0;
  transform: translateY(8px);
  animation: chat-msg-in .35s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes chat-msg-in {
  to { opacity: 1; transform: translateY(0); }
}
.chat-msg .av {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--c-line);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  color: var(--c-black);
}
.chat-msg .av svg { width: 22px; height: auto; max-height: 28px; }
.chat-msg .av img { width: 100%; height: 100%; object-fit: contain; }
.chat-msg .bubble {
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.85;
  letter-spacing: 0.04em;
  color: var(--c-text);
  background: #fff;
  border-radius: 14px 14px 14px 4px;
  border: 1px solid var(--c-line);
  max-width: calc(100% - 38px);
  min-width: 0;
  word-break: keep-all;
  overflow-wrap: anywhere;
  line-break: strict;
}
.chat-msg.user {
  flex-direction: row-reverse;
}
.chat-msg.user .av { display: none; }
.chat-msg.user .bubble {
  background: var(--c-black);
  color: #fff;
  border-color: var(--c-black);
  border-radius: 14px 14px 4px 14px;
}

.chat-msg.typing .bubble {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.chat-msg.typing .bubble span {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--c-sub);
  animation: chat-typing 1s infinite ease-in-out;
}
.chat-msg.typing .bubble span:nth-child(2) { animation-delay: 0.15s; }
.chat-msg.typing .bubble span:nth-child(3) { animation-delay: 0.3s; }
@keyframes chat-typing {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30%           { opacity: 1;   transform: translateY(-3px); }
}

.chat-form {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 12px 14px;
  border-top: 1px solid var(--c-line);
  background: #fff;
}
.chat-form input {
  flex: 1;
  appearance: none;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 13px;
  font-family: inherit;
  color: var(--c-text);
  background: var(--c-bg);
  letter-spacing: 0.04em;
  transition: border-color .25s ease;
}
.chat-form input:focus {
  outline: none;
  border-color: var(--c-black);
}
.chat-form button {
  appearance: none;
  background: var(--c-black);
  color: #fff;
  border: none;
  width: 40px; height: 40px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: opacity .2s ease, transform .2s ease;
}
.chat-form button:hover { opacity: 0.85; }
.chat-form button:active { transform: scale(0.94); }
.chat-form button svg { width: 18px; height: 18px; }

/* スマホでは画面ほぼ全面のパネル。viewport から fixed で位置指定して
   chat-widget の position に依存しないようにする */
@media (max-width: 600px) {
  .chat-widget {
    right: 12px;
    bottom: 16px;
  }
  /* SP: 開いている間はヘッダー(ハンバーガー z:10000)より前面に＝×が押せるように */
  .chat-widget.is-open { z-index: 10001; }
  .chat-panel {
    position: fixed;
    inset: 16px 12px 76px 12px;
    width: auto;
    height: auto;
    max-height: none;
    border-radius: 14px;
  }
  .chat-fab-label { display: none; }
  .chat-fab { padding: 6px; }
  .chat-fab-avatar { width: 44px; height: 44px; }
  .chat-fab-avatar svg { width: 30px; }
  .chat-head { padding: 14px 12px 14px 16px; }
  .chat-head-avatar { width: 36px; height: 36px; }
  .chat-head-meta .name { font-size: 13px; }
  .chat-head-meta .role { font-size: 12px; }
  .chat-log { padding: 14px 12px; gap: 12px; }
  .chat-msg .bubble { font-size: 13px; padding: 9px 13px; }
  .chat-form { padding: 10px 10px 12px; gap: 8px; }
  .chat-form input {
    padding: 9px 14px;
    font-size: 13px;
    min-width: 0;
  }
  .chat-form button {
    width: 42px;
    height: 42px;
    min-width: 42px;
    flex: 0 0 42px;
    padding: 0;
    aspect-ratio: 1 / 1;
  }
  .chat-form button svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
  }
  /* メッセージバブルが SP で内側 padding 不足にならないよう */
  .chat-msg .bubble {
    max-width: calc(100% - 34px);
    padding: 10px 13px;
    font-size: 13px;
    line-height: 1.8;
  }
  .chat-msg.user .bubble {
    max-width: calc(100% - 12px);
  }
}  /* 旧テーマから切り出したときに閉じかっこが欠けていた（2026-11-07） */

/* =========================================================
   チャットのリデザイン（2026-11-07）：サイトの部品にそろえる
   閉じたボタン＝右上の MENU ボタンを上下に返した形（黒・右下の角にぴったり・左上だけ丸い）／
   見出し＝絞り込みの窓と同じ濃い帯／会話の地＝#f7f7f7・わたぼう＝白・自分＝黒／入力＝四角い枠と黒い四角の送るボタン
   ========================================================= */
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.chat-widget{right:0;bottom:0;font-family:var(--font);}
.chat-fab{display:flex;align-items:center;gap:14px;height:auto;padding:14px 26px 14px 14px;border:0;border-radius:28px 0 0 0;background:var(--ink);color:#fff;box-shadow:none;transition:background .3s var(--ease),opacity .3s,transform .3s;}
.chat-fab:hover{background:#333;transform:none;box-shadow:none;}
.chat-fab-avatar{width:50px;height:50px;border-radius:50%;background:#fff;color:var(--ink);}
.chat-fab-label{display:flex;flex-direction:column;gap:4px;color:#fff;font-size:11px;font-weight:500;letter-spacing:.1em;line-height:1.2;text-align:left;}
.chat-fab-label b{font-family:var(--font-en);font-size:15px;font-weight:700;letter-spacing:.14em;}
.chat-fab-bubble{top:8px;right:10px;left:auto;width:20px;height:20px;border:0;background:#fff;color:var(--ink);font-size:11px;font-weight:700;box-shadow:none;}
.chat-panel{right:clamp(12px,2vw,24px);bottom:clamp(12px,2vw,24px);width:min(380px,calc(100vw - 24px));height:min(580px,calc(100vh - 140px));border:0;border-radius:0 0 0 28px;box-shadow:0 24px 60px rgba(0,0,0,.18);}
.chat-head{gap:14px;padding:18px 16px 18px 20px;border-bottom:0;background:#3A3A3A;color:#fff;}
.chat-head-avatar{width:44px;height:44px;background:#fff;color:var(--ink);}
.chat-head-meta .name{display:flex;align-items:baseline;gap:10px;color:#fff;font-size:15px;font-weight:700;letter-spacing:.06em;}
.chat-head-meta .name b{font-family:var(--font-en);font-size:12px;font-weight:700;letter-spacing:.14em;opacity:.7;}
.chat-head-meta .role{color:rgba(255,255,255,.7);font-size:12px;letter-spacing:.06em;}
.chat-close{color:#fff;border-radius:0;}
.chat-close:hover{background:rgba(255,255,255,.12);}
.chat-log{background:#f7f7f7;padding:20px 16px;}
.chat-msg .av{background:#fff;border:1px solid var(--line);}
.chat-msg .bubble{background:#fff;border:0;border-radius:0 14px 14px 14px;color:var(--ink);font-size:14px;line-height:1.9;letter-spacing:.03em;box-shadow:none;}
.chat-msg.user .bubble{background:var(--ink);color:#fff;border-radius:14px 0 14px 14px;}
.chat-form{gap:8px;padding:12px;border-top:1px solid var(--line);background:#fff;}
.chat-form input{height:46px;padding:0 14px;border:1px solid var(--line);border-radius:0;background:#fff;font-size:14px;}
.chat-form input:focus{border-color:var(--ink);outline:none;box-shadow:none;}
.chat-form button{flex:0 0 46px;width:46px;height:46px;border-radius:0;background:var(--ink);color:#fff;}
.chat-form button:hover{background:#333;}
@media (max-width:600px){
  .chat-widget{right:0;bottom:0;}
  .chat-fab{padding:10px 18px 10px 10px;gap:10px;border-radius:22px 0 0 0;}
  .chat-fab-label{display:flex;}
  .chat-fab-avatar{width:40px;height:40px;}
  .chat-panel{inset:12px;border-radius:0 0 0 22px;}
}
/* 「?」の印はわたぼうの丸の右上に（SP で CHAT の文字にかぶっていた） */
.chat-fab-bubble{top:8px;right:auto;left:50px;}
@media (max-width:600px){ .chat-fab-bubble{top:4px;left:38px;width:18px;height:18px;font-size:10px;} }

/* =========================================================
   右下のチャットのボタン：gooone.help の右下の組み（2026-11-07）
   わたぼうが右下の角から半分のぞき、左上に形の不ぞろいな黒い吹き出し＋「？」。少しスクロールしたら弾んで出てくる
   ========================================================= */
.chat-widget{right:0;bottom:0;}
.chat-fab{position:relative;display:block;width:200px;height:170px;padding:0;border:0;border-radius:0;background:none;box-shadow:none;cursor:pointer;
  transform:translate3d(0,110%,0);transition:transform .5s cubic-bezier(.175,.885,.32,1.275),opacity .3s;}
.chat-widget.is-shown .chat-fab{transform:none;}
.chat-fab:hover{background:none;box-shadow:none;transform:none;}
.chat-widget.is-shown .chat-fab:hover .chat-fab-avatar{transform:translate3d(0,-10px,0) rotate(-4deg);}
.chat-fab-avatar{position:absolute;right:-18px;bottom:-34px;width:118px;height:140px;border-radius:0;background:none;overflow:visible;color:var(--ink);transition:transform .4s cubic-bezier(.175,.885,.32,1.275);}
.chat-fab-avatar svg,.chat-fab-avatar img{width:100%;height:100%;}
.chat-fab-label{position:absolute;left:0;top:6px;display:flex;align-items:center;justify-content:center;width:112px;height:92px;padding:6px 10px;background:var(--ink);color:#fff;border-radius:58% 42% 52% 48% / 52% 58% 42% 48%;font-family:var(--font);font-size:12px;font-weight:700;letter-spacing:.06em;line-height:1.6;text-align:center;}
.chat-fab-label b{display:none;}
.chat-fab-bubble{top:-4px;left:104px;right:auto;width:30px;height:30px;border:0;background:none;color:var(--ink);font-family:var(--font-en);font-size:30px;font-weight:700;line-height:1;box-shadow:none;}
@media (max-width:600px){
  .chat-fab{width:150px;height:128px;}
  .chat-fab-avatar{width:86px;height:104px;right:-12px;bottom:-26px;}
  .chat-fab-label{width:84px;height:70px;font-size:10px;top:4px;}
  .chat-fab-bubble{left:78px;font-size:22px;width:22px;height:22px;}
}
@media (prefers-reduced-motion:reduce){ .chat-fab{transition:none;} }
.chat-widget .chat-fab .chat-fab-avatar svg,.chat-widget .chat-fab .chat-fab-avatar .chat-character-svg,.chat-widget .chat-fab .chat-fab-avatar img{width:100%;height:100%;max-width:none;max-height:none;}
.chat-widget .chat-fab-avatar{bottom:-12px;}
@media (max-width:600px){ .chat-widget .chat-fab-avatar{bottom:-8px;} }