/* ─────────────────────────────────────────────────────────────
   問い合わせチャット。商品ページと法人LPで共通。
   ⚠ 追従CTA（.sticky-buy）は狭い画面で下に固定される。重ねない。
   ───────────────────────────────────────────────────────────── */
.chat { position: fixed; right: clamp(14px, 3vw, 28px); bottom: clamp(14px, 3vw, 28px); z-index: 60;
        display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }

.chat-fab {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 18px 12px 15px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.22); background: rgba(18,18,20,.86);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  color: #fff; font: inherit; font-size: 13px; letter-spacing: .04em;
  box-shadow: 0 10px 34px rgba(0,0,0,.55);
  transition: border-color .25s, background .25s, transform .25s;
}
.chat-fab:hover { border-color: rgba(255,255,255,.5); transform: translateY(-1px); }
.chat-fab:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.chat-fab-ic { width: 15px; height: 15px; border: 1.6px solid currentColor; border-radius: 4px 4px 4px 1px; flex: none; }
/* 開いている間はボタンを出さない。閉じるのはパネルの × なので、
   両方出しておくと同じ役目のものが2つ並んで見える */
.chat[data-open="1"] .chat-fab { display: none; }
@media (max-width: 420px) { .chat-fab-tx { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } }

.chat-panel {
  /* 既定はゆとりを持たせる。--chat-w / --chat-h は chat.js が上書きする（つまみで調整） */
  width: var(--chat-w, min(440px, calc(100vw - 28px)));
  height: var(--chat-h, min(640px, min(78vh, calc(100vh - 130px))));
  display: flex; flex-direction: column;
  border: 1px solid rgba(255,255,255,.14); border-radius: 16px; overflow: hidden;
  background: rgba(14,14,16,.94); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 24px 70px rgba(0,0,0,.7);
}
.chat-panel[hidden] { display: none; }

/* 大きさを変えるつまみ。⚠ 右下は画面の角。左上に置かないと外へ伸びる */
.chat-grip { position: absolute; top: 0; left: 0; width: 26px; height: 26px; z-index: 2;
             border: 0; background: transparent; padding: 0; cursor: nwse-resize; touch-action: none; }
.chat-grip::before, .chat-grip::after { content: ""; position: absolute; background: rgba(255,255,255,.28); }
.chat-grip::before { left: 8px; top: 8px; width: 9px; height: 1px; transform: rotate(-45deg); }
.chat-grip::after  { left: 7px; top: 12px; width: 13px; height: 1px; transform: rotate(-45deg); }
.chat-grip:hover::before, .chat-grip:hover::after { background: rgba(255,255,255,.7); }
.chat-grip:focus-visible { outline: 2px solid #fff; outline-offset: -2px; border-radius: 8px; }
.chat[data-resizing="1"] .chat-panel { transition: none; user-select: none; }
.chat[data-resizing="1"] { cursor: nwse-resize; }

.chat-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
             padding: 16px 16px 13px 30px; border-bottom: 1px solid rgba(255,255,255,.09); }
.chat-title { margin: 0; font-size: 14px; color: #fff; }
.chat-sub { margin: 4px 0 0; font-size: 11px; color: #7a7a84; line-height: 1.7; }
.chat-x { width: 26px; height: 26px; flex: none; border: 0; border-radius: 7px; cursor: pointer;
          background: transparent; position: relative; }
.chat-x::before, .chat-x::after { content: ""; position: absolute; inset: 50% 6px auto 6px; height: 1px;
                                  background: #9a9aa4; transform: rotate(45deg); }
.chat-x::after { transform: rotate(-45deg); }
.chat-x:hover::before, .chat-x:hover::after { background: #fff; }
.chat-x:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }

.chat-log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px;
            overscroll-behavior: contain; }
.chat-msg { margin: 0; max-width: 88%; padding: 10px 13px; border-radius: 13px; font-size: 13px; line-height: 1.8;
            white-space: pre-wrap; word-break: break-word; }
.chat-bot { align-self: flex-start; background: rgba(255,255,255,.07); color: #e6e6ea; border-bottom-left-radius: 4px; }
.chat-you { align-self: flex-end; background: #fff; color: #111214; border-bottom-right-radius: 4px; }
.chat-wait { color: #7a7a84; letter-spacing: .3em; }

.chat-form { display: flex; gap: 8px; padding: 12px 12px 10px; border-top: 1px solid rgba(255,255,255,.09); }
.chat-in { flex: 1; min-width: 0; padding: 11px 13px; border-radius: 10px; font: inherit; font-size: 13px;
           color: #fff; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
.chat-in::placeholder { color: #6c6c76; }
.chat-in:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.chat-send { width: 40px; flex: none; border: 0; border-radius: 10px; background: #fff; cursor: pointer; position: relative; }
/* 送信の矢印。文字を置くと言語ごとに幅が変わるので図形で描く */
.chat-send::before { content: ""; position: absolute; inset: 0; margin: auto; width: 8px; height: 8px;
                     border-top: 1.6px solid #111214; border-right: 1.6px solid #111214; transform: translateX(-2px) rotate(45deg); }
.chat-send:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.chat-form[data-busy="1"] .chat-send { opacity: .4; pointer-events: none; }

.chat-note { margin: 0; padding: 0 16px 14px; font-size: 10.5px; color: #63636c; line-height: 1.7; }

/* 追従CTAが出ているあいだは、その上へ逃がす */
@media (max-width: 720px) {
  body:has(.sticky-buy[data-on="1"]) .chat { bottom: calc(clamp(14px, 3vw, 28px) + 76px); }
}
@media (prefers-reduced-motion: reduce) { .chat-fab { transition: none; } }