/* ═══════════════════════════════════════════════════════════════
   予想アドバイザー — 右下追従チャットUI（ナンバーズ4）
   配色は各テーマの --accent / --accent-dark を利用（サイト別で自動）
═══════════════════════════════════════════════════════════════ */
:root{
  --adv-accent: var(--accent, #2563eb);
  --adv-accent-dark: var(--accent-dark, #1e3a8a);
  --adv-white:#fff;
  --adv-ink:#1f2433;
  --adv-muted:#6b7280;
  --adv-line:#e7e9ef;
  --adv-bg:#f4f6fb;
  --adv-bot:#eef1f7;
  --adv-radius:16px;
  --adv-shadow:0 18px 48px rgba(17,24,39,.18), 0 4px 12px rgba(17,24,39,.08);
  --adv-launch:58px;
  --adv-z:9980;
}

/* 既存の追従フッターCTA（最大幅767pxのみ表示）と重ならないよう余白を取る */
.loto-advisor,
.loto-advisor *{box-sizing:border-box;}
.loto-advisor{
  font-family:'Noto Sans JP',-apple-system,BlinkMacSystemFont,'Hiragino Kaku Gothic ProN',Meiryo,sans-serif;
}

/* ───────── 起動ボタン ───────── */
.adv-launcher{
  position:fixed; right:24px; bottom:24px;
  width:var(--adv-launch); height:var(--adv-launch); border-radius:50%;
  background:linear-gradient(145deg,var(--adv-accent),var(--adv-accent-dark));
  color:#fff; border:none; cursor:pointer; z-index:var(--adv-z);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px rgba(17,24,39,.22); padding:0;
  transition:transform .18s ease, box-shadow .18s ease;
  -webkit-tap-highlight-color:transparent;
}
.adv-launcher:hover{transform:translateY(-3px); box-shadow:0 16px 34px rgba(17,24,39,.28);}
.adv-launcher:active{transform:translateY(-1px);}
.adv-launcher svg{width:28px; height:28px;}
.adv-launcher .adv-launcher-close{display:none;}
.adv-launcher .adv-dot{
  position:absolute; top:6px; right:7px; width:11px; height:11px; border-radius:50%;
  background:#ff5a5f; border:2px solid #fff;
}
/* 追従CTAが出るページ（SP）では、その上へ退避 */
@media (max-width:767px){
  .adv-launcher{ right:16px; bottom:16px; width:54px; height:54px; }
  .adv-launcher svg{width:26px; height:26px;}
  body.has-sticky-cta .adv-launcher{
    bottom:calc(66px + env(safe-area-inset-bottom,0px) + 14px);
  }
}

/* ───────── 吹き出し（スクロール後1回だけ） ───────── */
.adv-bubble{
  position:fixed; right:24px; bottom:calc(24px + var(--adv-launch) + 12px);
  max-width:252px; background:#fff; color:var(--adv-ink); z-index:var(--adv-z);
  border-radius:14px; padding:13px 34px 13px 15px; line-height:1.55; font-size:13.5px; font-weight:600;
  box-shadow:var(--adv-shadow); border:1px solid var(--adv-line);
  opacity:0; transform:translateY(8px); pointer-events:none;
  transition:opacity .3s ease, transform .3s ease;
}
.adv-bubble.show{opacity:1; transform:translateY(0); pointer-events:auto;}
.adv-bubble::after{
  content:""; position:absolute; right:26px; bottom:-8px; width:16px; height:16px; background:#fff;
  border-right:1px solid var(--adv-line); border-bottom:1px solid var(--adv-line);
  transform:rotate(45deg);
}
.adv-bubble b{color:var(--adv-accent-dark);}
.adv-bubble-x{
  position:absolute; top:6px; right:6px; width:22px; height:22px; border:none; background:transparent;
  color:var(--adv-muted); cursor:pointer; border-radius:50%; font-size:15px; line-height:1;
}
.adv-bubble-x:hover{background:var(--adv-bg);}
@media (max-width:767px){
  .adv-bubble{right:16px; bottom:calc(16px + 54px + 10px);}
  body.has-sticky-cta .adv-bubble{bottom:calc(66px + env(safe-area-inset-bottom,0px) + 14px + 54px + 10px);}
}

/* ───────── パネル（PC：右下フローティング） ───────── */
.adv-panel{
  position:fixed; right:24px; bottom:calc(24px + var(--adv-launch) + 14px);
  width:388px; max-width:calc(100vw - 32px);
  height:620px; max-height:85vh;
  background:var(--adv-bg); border-radius:var(--adv-radius); z-index:var(--adv-z);
  box-shadow:var(--adv-shadow); border:1px solid var(--adv-line);
  display:flex; flex-direction:column; overflow:hidden;
  opacity:0; transform:translateY(14px) scale(.98); transform-origin:bottom right;
  pointer-events:none; transition:opacity .22s ease, transform .22s ease;
}
.adv-panel.open{opacity:1; transform:translateY(0) scale(1); pointer-events:auto;}

/* ヘッダー */
.adv-head{
  background:linear-gradient(135deg,var(--adv-accent),var(--adv-accent-dark));
  color:#fff; padding:14px 16px; display:flex; align-items:center; gap:11px; flex:none;
}
.adv-head-avatar{
  width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.18);
  display:flex; align-items:center; justify-content:center; flex:none;
}
.adv-head-avatar svg{width:22px; height:22px;}
.adv-head-txt{flex:1; min-width:0;}
.adv-head-ttl{font-size:14.5px; font-weight:800; letter-spacing:.01em; display:flex; align-items:center; gap:7px;}
.adv-head-badge{font-size:10px; font-weight:700; background:rgba(255,255,255,.22); padding:2px 7px; border-radius:20px;}
.adv-head-sub{font-size:11.5px; opacity:.85; margin-top:1px;}
.adv-head-btns{display:flex; gap:4px;}
.adv-head-btn{
  width:30px; height:30px; border:none; background:rgba(255,255,255,.14); color:#fff; cursor:pointer;
  border-radius:9px; display:flex; align-items:center; justify-content:center;
}
.adv-head-btn:hover{background:rgba(255,255,255,.26);}
.adv-head-btn svg{width:17px; height:17px;}
.adv-head-btn.back{display:none;}

/* 本文（スクロール領域） */
.adv-body{
  flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:16px 14px 10px; display:flex; flex-direction:column; gap:12px; scroll-behavior:smooth;
}
.adv-body::-webkit-scrollbar{width:7px;}
.adv-body::-webkit-scrollbar-thumb{background:#d4d8e3; border-radius:7px;}

/* メッセージ行 */
.adv-row{display:flex; gap:9px; align-items:flex-end; animation:advIn .26s ease;}
.adv-row.bot{justify-content:flex-start;}
.adv-row.user{justify-content:flex-end;}
@keyframes advIn{from{opacity:0; transform:translateY(8px);}to{opacity:1; transform:translateY(0);}}
.adv-ava{
  width:28px; height:28px; border-radius:50%; flex:none;
  background:linear-gradient(145deg,var(--adv-accent),var(--adv-accent-dark));
  display:flex; align-items:center; justify-content:center; color:#fff;
}
.adv-ava svg{width:16px; height:16px;}
.adv-msg{
  max-width:80%; padding:10px 13px; border-radius:14px; font-size:13.5px; line-height:1.65;
  color:var(--adv-ink); box-shadow:0 1px 2px rgba(17,24,39,.05);
}
.adv-row.bot .adv-msg{background:#fff; border:1px solid var(--adv-line); border-bottom-left-radius:5px;}
.adv-row.user .adv-msg{
  background:linear-gradient(135deg,var(--adv-accent),var(--adv-accent-dark)); color:#fff; font-weight:600;
  border-bottom-right-radius:5px;
}

/* タイピング */
.adv-typing{display:inline-flex; gap:4px; padding:3px 2px;}
.adv-typing i{width:7px; height:7px; border-radius:50%; background:#c2c8d6; animation:advBounce 1s infinite;}
.adv-typing i:nth-child(2){animation-delay:.15s;}
.adv-typing i:nth-child(3){animation-delay:.3s;}
@keyframes advBounce{0%,60%,100%{transform:translateY(0); opacity:.5;}30%{transform:translateY(-5px); opacity:1;}}

/* 選択肢 */
.adv-opts{display:flex; flex-direction:column; gap:8px; margin:2px 0 4px auto; width:88%; max-width:88%;}
.adv-opt{
  text-align:left; background:#fff; border:1.5px solid var(--adv-line); color:var(--adv-ink);
  padding:11px 14px; border-radius:12px; font-size:13.5px; font-weight:600; cursor:pointer;
  display:flex; align-items:center; gap:9px; transition:border-color .15s, background .15s, transform .1s;
  font-family:inherit;
}
.adv-opt:hover{border-color:var(--adv-accent); background:var(--adv-bot);}
.adv-opt:active{transform:scale(.99);}
.adv-opt .adv-opt-ic{
  width:24px; height:24px; border-radius:7px; background:var(--adv-bot); color:var(--adv-accent-dark);
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; flex:none;
}
.adv-opt .adv-opt-sub{display:block; font-size:11px; font-weight:500; color:var(--adv-muted); margin-top:2px;}

/* プログレス（フッター） */
.adv-foot{
  flex:none; border-top:1px solid var(--adv-line); background:#fff; padding:9px 15px;
  display:flex; align-items:center; gap:10px;
}
.adv-prog{flex:1; height:6px; background:var(--adv-line); border-radius:6px; overflow:hidden;}
.adv-prog-bar{height:100%; width:0; background:linear-gradient(90deg,var(--adv-accent),var(--adv-accent-dark)); border-radius:6px; transition:width .35s ease;}
.adv-prog-txt{font-size:11px; font-weight:700; color:var(--adv-muted); white-space:nowrap;}
.adv-foot.hidden{display:none;}

/* ───────── 診断結果カード ───────── */
.adv-result{display:flex; flex-direction:column; gap:12px; width:100%; animation:advIn .3s ease;}
.adv-card{background:#fff; border:1px solid var(--adv-line); border-radius:14px; overflow:hidden; box-shadow:0 2px 8px rgba(17,24,39,.05);}
.adv-card-tag{
  font-size:10.5px; font-weight:800; letter-spacing:.06em; color:var(--adv-accent-dark);
  background:var(--adv-bot); padding:7px 13px; display:flex; align-items:center; gap:6px;
}
.adv-card-tag .n{
  width:17px; height:17px; border-radius:50%; background:var(--adv-accent); color:#fff;
  display:inline-flex; align-items:center; justify-content:center; font-size:10px;
}
.adv-card-in{padding:13px 14px;}
.adv-type-name{font-size:17px; font-weight:800; color:var(--adv-ink); margin-bottom:6px; line-height:1.4;}
.adv-type-desc{font-size:12.5px; color:#48506a; line-height:1.7;}
.adv-chiprow{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px;}
.adv-chip{font-size:11px; font-weight:700; color:var(--adv-accent-dark); background:var(--adv-bot); border-radius:20px; padding:3px 10px;}

/* 独自予想カード */
.adv-pred-name{font-size:15px; font-weight:800; color:var(--adv-ink); margin-bottom:4px;}
.adv-pred-desc{font-size:12px; color:#48506a; line-height:1.65; margin-bottom:11px;}
.adv-balls{display:flex; flex-wrap:wrap; gap:7px; margin-bottom:11px;}
.adv-ball{
  width:36px; height:36px; border-radius:50%; flex:none;
  background:linear-gradient(145deg,var(--adv-accent),var(--adv-accent-dark)); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:800;
  box-shadow:0 3px 8px rgba(17,24,39,.14);
}
.adv-ball.bonus{background:linear-gradient(145deg,#d97706,#b45309);}
.adv-balls-note{font-size:10.5px; color:var(--adv-muted); margin-bottom:11px;}

/* 購入スタイルカード */
.adv-buy-name{font-size:15px; font-weight:800; color:var(--adv-ink); margin-bottom:8px;}
.adv-buy-rows{display:flex; flex-direction:column; gap:7px;}
.adv-buy-row{display:flex; justify-content:space-between; gap:10px; font-size:12.5px; padding:7px 10px; background:var(--adv-bg); border-radius:9px;}
.adv-buy-row .k{color:var(--adv-muted); font-weight:600; flex:none;}
.adv-buy-row .v{color:var(--adv-ink); font-weight:700; text-align:right;}
.adv-buy-note{font-size:11px; color:var(--adv-muted); line-height:1.6; margin-top:9px; padding-left:16px; position:relative;}
.adv-buy-note::before{content:"※"; position:absolute; left:0;}

/* サービスカード */
.adv-svc{border:1px solid var(--adv-line); border-radius:12px; padding:12px; margin-bottom:9px; background:#fff;}
.adv-svc:last-child{margin-bottom:0;}
.adv-svc-top{display:flex; align-items:center; gap:10px; margin-bottom:9px;}
.adv-svc-logo{
  width:38px; height:38px; border-radius:10px; flex:none; background:var(--adv-bot);
  color:var(--adv-accent-dark); display:flex; align-items:center; justify-content:center;
  font-size:17px; font-weight:800; overflow:hidden;
}
.adv-svc-logo img{width:100%; height:100%; object-fit:cover;}
.adv-svc-id{flex:1; min-width:0;}
.adv-svc-name{font-size:13.5px; font-weight:800; color:var(--adv-ink); display:flex; align-items:center; gap:6px; flex-wrap:wrap;}
.adv-svc-free{font-size:10px; font-weight:700; color:#0d7a4f; background:#e4f6ee; border-radius:5px; padding:1px 6px;}
.adv-svc-rate{font-size:11.5px; color:var(--adv-muted); margin-top:2px;}
.adv-svc-rate b{color:#d97706;}
.adv-svc-reason{font-size:12px; color:#48506a; line-height:1.65; background:var(--adv-bg); border-radius:9px; padding:8px 10px; margin-bottom:9px;}
.adv-svc-reason b{color:var(--adv-accent-dark);}
.adv-svc-meta{display:flex; gap:7px; flex-wrap:wrap; margin-bottom:10px;}
.adv-svc-meta span{font-size:10.5px; font-weight:700; color:#56607a; background:var(--adv-bot); border-radius:6px; padding:3px 8px;}
.adv-svc-btn, .adv-pred-btn{
  display:flex; align-items:center; justify-content:center; gap:7px; width:100%;
  background:linear-gradient(135deg,var(--adv-accent),var(--adv-accent-dark)); color:#fff;
  font-size:13px; font-weight:800; padding:11px; border-radius:11px; text-decoration:none;
  transition:filter .15s, transform .1s; border:none; cursor:pointer; font-family:inherit;
}
.adv-svc-btn:hover, .adv-pred-btn:hover{filter:brightness(1.07);}
.adv-svc-btn:active, .adv-pred-btn:active{transform:scale(.99);}
.adv-svc-btn svg, .adv-pred-btn svg{width:16px; height:16px;}
.adv-pred-btn.ghost{background:#fff; color:var(--adv-accent-dark); border:1.5px solid var(--adv-accent);}
.adv-svc-more{
  width:100%; text-align:center; background:var(--adv-bg); border:1px dashed var(--adv-line);
  color:var(--adv-accent-dark); font-size:12.5px; font-weight:700; padding:10px; border-radius:11px;
  cursor:pointer; margin-top:2px; font-family:inherit;
}
.adv-svc-more:hover{background:var(--adv-bot);}
.adv-svc-hidden{display:none;}
.adv-svc-detail{display:block; text-align:center; font-size:11.5px; font-weight:700; color:var(--adv-muted); text-decoration:underline; margin-top:7px;}

.adv-result-foot{text-align:center; padding:4px 0 8px;}
.adv-restart{background:transparent; border:none; color:var(--adv-muted); font-size:12px; font-weight:700; cursor:pointer; text-decoration:underline; font-family:inherit;}
.adv-disc{font-size:10.5px; color:var(--adv-muted); line-height:1.6; margin-top:10px; padding:10px 12px; background:var(--adv-bg); border-radius:10px;}

/* ───────── SP：フルスクリーンに近いモーダル ───────── */
@media (max-width:767px){
  .adv-panel{
    right:0; left:0; bottom:0; top:0; width:100%; max-width:100%;
    height:100dvh; max-height:100dvh; border-radius:0; border:none;
    transform:translateY(100%); transform-origin:bottom center;
  }
  .adv-panel.open{transform:translateY(0);}
  .adv-head{padding:calc(12px + env(safe-area-inset-top,0px)) 15px 12px;}
  .adv-foot{padding-bottom:calc(9px + env(safe-area-inset-bottom,0px));}
}

/* チャット展開中：背景スクロール抑止＋追従CTAを隠す */
body.adv-open{overflow:hidden;}
body.adv-open .sticky-cta{opacity:0; pointer-events:none; visibility:hidden;}
@media (min-width:768px){ body.adv-open{overflow:auto;} } /* PCはパネルが浮くだけなので本体スクロール維持 */

/* ───────── バナー（設置3か所／診断を開くトリガ） ───────── */
.adv-banner{
  display:flex; align-items:center; gap:13px; width:100%; text-align:left;
  background:linear-gradient(135deg,var(--adv-accent-dark),var(--adv-accent));
  color:#fff; border:none; border-radius:14px; padding:15px 17px; cursor:pointer;
  margin:18px 0; font-family:inherit; box-shadow:0 8px 22px rgba(37,99,235,.18);
  transition:transform .15s, box-shadow .15s; position:relative; overflow:hidden;
}
.adv-banner:hover{transform:translateY(-2px); box-shadow:0 12px 28px rgba(37,99,235,.26);}
.adv-banner-ic{
  width:42px; height:42px; border-radius:12px; background:rgba(255,255,255,.18); flex:none;
  display:flex; align-items:center; justify-content:center;
}
.adv-banner-ic svg{width:24px; height:24px;}
.adv-banner-body{flex:1; min-width:0;}
.adv-banner-ttl{font-size:14.5px; font-weight:800; line-height:1.4;}
.adv-banner-sub{font-size:11.5px; opacity:.85; margin-top:2px;}
.adv-banner-act{
  font-size:11.5px; font-weight:800; background:#fff; color:var(--adv-accent-dark);
  padding:7px 12px; border-radius:20px; white-space:nowrap; flex:none;
  display:flex; align-items:center; gap:4px;
}
.adv-banner-act svg{width:12px; height:12px;}
@media (max-width:600px){
  .adv-banner{flex-wrap:wrap; gap:10px;}
  .adv-banner-act{width:100%; justify-content:center; order:3;}
}

/* reduce motion */
@media (prefers-reduced-motion:reduce){
  .adv-panel,.adv-launcher,.adv-bubble,.adv-row,.adv-result,.adv-banner{transition:none; animation:none;}
}

/* ─── ナンバーズ4：4桁セル表示 ─── */
.adv-n4digits{display:flex;gap:7px;margin-bottom:10px;flex-wrap:wrap;}
.adv-n4cell{width:40px;height:46px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  font-size:22px;font-weight:800;color:#fff;background:linear-gradient(145deg,var(--adv-accent),var(--adv-accent-dark));
  box-shadow:0 3px 8px rgba(17,24,39,.14);}
.adv-n4cell.green{background:linear-gradient(145deg,#1f9d55,#178047);}

/* ─── 独立ページ埋め込みモード ─── */
.adv-panel.adv-inline{
  position:static; width:100%; max-width:720px; height:620px; max-height:76vh;
  margin:0 auto; transform:none; opacity:1; pointer-events:auto; box-shadow:0 10px 30px rgba(17,24,39,.1);
}
@media (max-width:767px){
  .adv-panel.adv-inline{ height:78vh; max-height:78vh; border-radius:var(--adv-radius); }
}