/* ===== Live Feed (浮遊するリアルタイム取得通知) =====
   既存スタイルには一切手を入れず、この 1 ファイルだけで完結させる追加レイヤー。
   z-index の序列は toast(150) > modal(120) > floating-cta(110) > live-feed(105) > noise(99) > header(60)。
   - デスクトップ：左下（フローティング CTA は右下なので衝突しない）
   - モバイル：画面下部の常駐 CTA バーの「上」に逃がす
   - モーダル表示中（body.modal-open）と toast 表示中（.is-muted）は自動で退避する */
.live-feed{
  position:fixed;
  left:24px;
  bottom:24px;
  z-index:105;
  width:min(330px,calc(100vw - 48px));
  opacity:0;
  visibility:hidden;
  transform:translate3d(-10px,12px,0);
  transition:opacity .38s ease,transform .42s cubic-bezier(.22,.75,.3,1),visibility .42s;
  pointer-events:none;
}
.live-feed.is-visible{
  opacity:1;
  visibility:visible;
  transform:translate3d(0,0,0);
  pointer-events:auto;
}

.live-feed-card{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:11px 36px 11px 12px;
  border-radius:14px;
  /* 常時ブラー（backdrop-filter）はスクロール負荷が高いため使わず、不透明度で同じ質感を出す */
  background:linear-gradient(180deg,rgba(23,29,40,.985),rgba(14,18,26,.985));
  border:1px solid #2b3543;
  box-shadow:0 18px 40px rgba(0,0,0,.44),0 2px 8px rgba(0,0,0,.3);
  text-align:left;
}

/* LIVE インジケーター。騰落色ではなく通知用の控えめな緑を使う */
.live-feed-pulse{
  position:relative;
  flex:0 0 auto;
  width:8px;
  height:8px;
  margin-top:6px;
  border-radius:50%;
  background:var(--down);
}
.live-feed-pulse:before{
  content:"";
  position:absolute;
  inset:-4px;
  border-radius:50%;
  border:1px solid var(--down-line);
  animation:liveFeedPulse 2.4s ease-out infinite;
}
@keyframes liveFeedPulse{
  0%{transform:scale(.7);opacity:.85}
  70%{transform:scale(1.5);opacity:0}
  100%{transform:scale(1.5);opacity:0}
}

.live-feed-body{min-width:0;flex:1 1 auto}
.live-feed-text{
  margin:0;
  font-size:13px;
  line-height:1.55;
  color:var(--text);
  overflow-wrap:anywhere;
}
.live-feed-text b{color:var(--up);font-weight:700}
.live-feed-meta{
  display:flex;
  align-items:center;
  gap:7px;
  margin-top:4px;
  font-size:10.5px;
  letter-spacing:.09em;
  color:#8d99ab;
}
.live-feed-meta span{white-space:nowrap}
.live-feed-meta i{
  width:1px;
  height:9px;
  background:var(--line);
  flex:0 0 auto;
}

.live-feed-close{
  position:absolute;
  right:6px;
  top:6px;
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid #2c3542;
  background:#0d1117;
  color:#8994a5;
  font-size:13px;
  line-height:1;
  padding:0;
  transition:color .2s ease,border-color .2s ease;
}
.live-feed-close:hover{color:var(--text);border-color:#3c4757}
.live-feed-close:focus-visible{outline:2px solid var(--up);outline-offset:2px}

/* 分析モーダル・トースト表示中は重ならないよう退避 */
body.modal-open .live-feed,
.live-feed.is-muted{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

/* 幅の狭いデスクトップではカードを小さくして本文カラムに被りにくくする */
@media (max-width:1240px){
  .live-feed{left:14px;bottom:18px;width:min(280px,calc(100vw - 28px))}
  .live-feed-text{font-size:12px}
}

/* モバイル：常駐 CTA バーは長文コピーで 2 行になったため（高さ約 66px）、
   従来より高い位置に逃がす。数値は market-extras.css の .floating-cta と対応。 */
@media (max-width:680px){
  .live-feed{
    left:10px;
    right:10px;
    width:auto;
    max-width:calc(100% - 20px);
    bottom:calc(max(12px,env(safe-area-inset-bottom)) + 80px);
    transform:translate3d(0,12px,0);
  }
  .live-feed-card{padding:9px 32px 9px 10px;border-radius:12px}
  .live-feed-text{font-size:11.5px;line-height:1.45}
  .live-feed-meta{font-size:9.5px;margin-top:3px}
}

@media (max-width:380px){
  .live-feed{bottom:calc(max(12px,env(safe-area-inset-bottom)) + 78px)}
  .live-feed-card{padding:8px 30px 8px 9px}
  .live-feed-text{font-size:11px}
}

@media (prefers-reduced-motion:reduce){
  .live-feed{transform:none!important}
  .live-feed-pulse:before{animation:none}
}