/* ============================================================
   BoostX AI相談ウィジェット (bxai) — 全ページ共通
   SSOT: boostx-ai-consult/ai-consult.css
   デプロイ: scripts/deploy_ai_consult_widget.py → Code Snippets
   ============================================================ */

/* テーマ側の box-sizing に依存しない（1カラム崩れ・はみ出しの元） */
.bxai-root, .bxai-root *, .bxai-root *::before, .bxai-root *::after, .bxai-toast { box-sizing: border-box; }

.bxai-root {
  --bxai-navy: #0B1524;
  --bxai-blue: #1D4ED8;
  --bxai-blue-deep: #0B2FA8;
  --bxai-line: #E3E8F2;
  --bxai-muted: #5B6780;
  --bxai-bg: #FFFFFF;
  --bxai-chip: #F2F6FD;
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 99990;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", system-ui, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  line-height: 1.6;
}

/* モバイルの下部固定CTA(.bx-sticky-cta)と重ならないよう持ち上げる */
.bxai-root.is-lifted { bottom: calc(20px + var(--bxai-lift, 0px)); }

/* ---------- 起動ボタン ---------- */
.bxai-launcher {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 13px 20px 13px 17px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--bxai-blue) 0%, var(--bxai-blue-deep) 100%);
  color: #fff;
  /* button は既定でフォントを継承しないので明示（放置するとArialに落ちる） */
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: .02em;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(11, 47, 168, .34), 0 2px 6px rgba(11, 21, 36, .16);
  transition: transform .18s ease, box-shadow .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.bxai-launcher:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(11, 47, 168, .42), 0 2px 6px rgba(11, 21, 36, .16); }
.bxai-launcher:focus-visible { outline: 3px solid #93B4FF; outline-offset: 2px; }
.bxai-launcher svg { width: 19px; height: 19px; flex: none; }

/* 初回だけ静かに存在を知らせる */
.bxai-launcher.is-hinting { animation: bxai-hint 2.4s ease-in-out 1.2s 2; }
@keyframes bxai-hint {
  0%, 100% { transform: translateY(0); }
  8%  { transform: translateY(-5px); }
  16% { transform: translateY(0); }
  24% { transform: translateY(-3px); }
  32% { transform: translateY(0); }
}

/* ---------- パネル ---------- */
.bxai-panel {
  width: min(352px, calc(100vw - 32px));
  max-height: min(72vh, 620px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--bxai-bg);
  border: 1px solid var(--bxai-line);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(11, 21, 36, .22), 0 4px 14px rgba(11, 21, 36, .1);
  padding: 15px 16px 14px;
  color: var(--bxai-navy);
  animation: bxai-pop .2s cubic-bezier(.16, 1, .3, 1) both;
}
.bxai-panel[hidden] { display: none; }
@keyframes bxai-pop { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }

.bxai-head { display: flex; align-items: flex-start; gap: 10px; }
.bxai-title { margin: 0 0 8px; flex: 1; font-size: 14.5px; font-weight: 800; letter-spacing: .01em; }
.bxai-title span { color: var(--bxai-blue); }
.bxai-close {
  flex: none; width: 30px; height: 30px; margin: -4px -4px 0 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 8px; background: transparent;
  color: var(--bxai-muted); cursor: pointer; font-family: inherit;
}
.bxai-close:hover { background: #F1F4FA; color: var(--bxai-navy); }
.bxai-close:focus-visible { outline: 2px solid var(--bxai-blue); outline-offset: 1px; }
.bxai-close svg { width: 17px; height: 17px; }

.bxai-lead { display: none; }

.bxai-pagetag {
  display: flex; align-items: center; gap: 5px;
  max-width: 100%; margin-bottom: 10px; padding: 4px 10px;
  border-radius: 999px; background: var(--bxai-chip);
  color: #143A9E; font-size: 11.5px; font-weight: 700; white-space: nowrap;
}
.bxai-pagetag b { min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.bxai-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.bxai-chip {
  padding: 6px 11px; border: 1px solid var(--bxai-line); border-radius: 999px;
  background: #fff; color: #24324D; font-size: 12px; font-weight: 600;
  font-family: inherit; cursor: pointer; text-align: left;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.bxai-chip:hover { background: var(--bxai-chip); border-color: #C6D7F8; }
.bxai-chip.is-active { background: var(--bxai-blue); border-color: var(--bxai-blue); color: #fff; }
.bxai-chip:focus-visible { outline: 2px solid var(--bxai-blue); outline-offset: 1px; }

.bxai-label { display: block; margin-bottom: 6px; font-size: 11.5px; font-weight: 700; color: var(--bxai-muted); }
.bxai-textarea {
  width: 100%; box-sizing: border-box; padding: 11px 12px;
  border: 1px solid var(--bxai-line); border-radius: 10px;
  background: #FBFCFE; color: var(--bxai-navy);
  font-family: inherit; font-size: 13.5px; line-height: 1.6; resize: vertical; height: 60px;
}
.bxai-textarea:focus { outline: 0; border-color: var(--bxai-blue); background: #fff; box-shadow: 0 0 0 3px rgba(29, 78, 216, .12); }

.bxai-divider { margin: 10px 0 8px; border: 0; border-top: 1px solid var(--bxai-line); }

/* 4サービスは2×2のタイルに。縦積みだとパネルが画面を覆ってしまう */
.bxai-services { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.bxai-service {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 10px; border: 1px solid var(--bxai-line); border-radius: 10px;
  color: var(--bxai-navy); font-size: 12.5px; font-weight: 700; text-decoration: none;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.bxai-service:hover { background: #F7F9FE; border-color: #C6D7F8; transform: translateY(-1px); text-decoration: none; }
.bxai-service:focus-visible { outline: 2px solid var(--bxai-blue); outline-offset: 1px; }
.bxai-service.is-disabled { opacity: .45; pointer-events: none; }
.bxai-service-logo { flex: none; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; }
.bxai-service-logo svg { width: 100%; height: 100%; }
/* 公式SVGを img で読む。テーマ側の img 指定に負けないよう固定 */
.bxai-service-img {
  width: 18px !important; height: 18px !important;
  max-width: 18px !important; min-width: 18px !important;
  margin: 0 !important; padding: 0 !important; border: 0 !important;
  border-radius: 0 !important; box-shadow: none !important;
  object-fit: contain; display: block; background: none !important;
}
.bxai-service-name { flex: 1; }
.bxai-service-note { display: none; }
.bxai-service-arrow { display: none; }
.bxai-service-arrow svg { width: 100%; height: 100%; }

.bxai-note { margin: 8px 0 0; font-size: 10px; color: var(--bxai-muted); }

/* ---------- 無料相談への橋渡し ---------- */
.bxai-cta {
  display: block; margin-top: 10px; padding: 10px 12px;
  border-radius: 12px; background: #F2F6FD; border: 1px solid #D9E4FA;
  text-decoration: none; color: var(--bxai-navy);
  transition: background .15s ease, border-color .15s ease;
}
.bxai-cta:hover { background: #E8F0FE; border-color: #B9CFF7; text-decoration: none; }
.bxai-cta:focus-visible { outline: 2px solid var(--bxai-blue); outline-offset: 1px; }
.bxai-cta-title { display: block; font-size: 12.5px; font-weight: 800; }
.bxai-cta-desc { display: block; margin-top: 3px; font-size: 11px; color: var(--bxai-muted); }
.bxai-cta-title::after { content: " →"; color: var(--bxai-blue); }

/* AIに投げて戻ってきたとき（相談にいちばん近い瞬間）だけ強調する */
.bxai-cta.is-followup {
  background: linear-gradient(135deg, var(--bxai-blue) 0%, var(--bxai-blue-deep) 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 22px rgba(11, 47, 168, .28);
  animation: bxai-cta-in .34s cubic-bezier(.16, 1, .3, 1) both;
}
.bxai-cta.is-followup:hover { background: linear-gradient(135deg, #1B47C6 0%, #0A2A9B 100%); border-color: transparent; }
.bxai-cta.is-followup .bxai-cta-desc { color: rgba(255, 255, 255, .82); }
.bxai-cta.is-followup .bxai-cta-title::after { color: #fff; }
@keyframes bxai-cta-in { from { opacity: .4; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---------- トースト ---------- */
.bxai-toast {
  position: fixed; left: 50%; bottom: 96px; transform: translate(-50%, 14px);
  z-index: 99991; max-width: min(420px, calc(100vw - 32px));
  padding: 12px 18px; border-radius: 999px;
  background: rgba(11, 21, 36, .95); color: #fff;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", system-ui, sans-serif;
  font-size: 12.5px; font-weight: 700; text-align: center;
  box-shadow: 0 12px 32px rgba(11, 21, 36, .3);
  opacity: 0; pointer-events: none; transition: opacity .22s ease, transform .22s ease;
}
.bxai-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ---------- モバイル ---------- */
@media (max-width: 640px) {
  .bxai-root { right: 12px; left: 12px; bottom: 14px; align-items: flex-end; }
  .bxai-root.is-lifted { bottom: calc(14px + var(--bxai-lift, 0px)); }
  .bxai-panel { width: 100%; max-height: 78vh; padding: 15px 14px 13px; border-radius: 16px; }
  .bxai-launcher { padding: 12px 18px 12px 15px; font-size: 13.5px; }
  .bxai-toast { bottom: 84px; }
  /* 狭い画面では説明文を落として、無料相談CTAまで一画面に収める */
  .bxai-lead { display: none; }
  .bxai-textarea { height: 62px; }
  .bxai-note { margin-top: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .bxai-launcher, .bxai-panel, .bxai-service, .bxai-toast { transition: none !important; animation: none !important; }
}

@media print { .bxai-root, .bxai-toast { display: none !important; } }