/* ===== Phase F: 文脈連動インサイトカード ===== */

/* ── カード本体 ── */
.insight-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin: var(--space-3) var(--space-4);
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease;
}

/* 重要状態（GC/DC発生）はボーダーを強調 */
.insight-card[data-state="golden_cross"],
.insight-card[data-state="dead_cross"] {
  border-color: var(--color-brand);
  box-shadow: 0 0 0 1px var(--color-brand);
}

/* ── トグルボタン（折りたたみ時の1行表示） ── */
.insight-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: var(--fs-base);
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
  min-height: 48px;
  transition: background .15s ease;
}

.insight-toggle:active {
  background: var(--color-bg-subtle);
}

/* ── アイコン ── */
.insight-icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
}

/* ── 短文テキスト ── */
.insight-short {
  flex: 1;
  font-weight: var(--fw-medium);
  line-height: 1.4;
}

/* ── 層1のチラ見せ：シェブロン（展開できることを示す） ── */
.insight-chevron {
  color: var(--color-text-muted);
  font-size: 22px;
  line-height: 1;
  transition: transform .25s ease;
}

.insight-card[data-expanded="true"] .insight-chevron {
  transform: rotate(90deg);
}

/* ── 展開エリア ── */
.insight-detail {
  padding: 0 var(--space-4) var(--space-4);
  animation: insight-expand .3s ease;
}

.insight-detail[hidden] {
  display: none;
}

@keyframes insight-expand {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── 詳細テキスト ── */
.insight-desc {
  font-size: var(--fs-sm);
  color: var(--color-text-sub);
  line-height: 1.7;
  margin: 0 0 var(--space-3);
}

/* ── CTAボタン（層3: 報酬の予感） ── */
.insight-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--color-brand);
  color: var(--color-text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-decoration: none;
  border-radius: var(--radius-pill);
  transition: background .15s ease;
}

.insight-cta:active {
  background: var(--color-brand-hover);
}

/* ===== 層2: パルスアニメーション（状態変化時のみ） ===== */

.insight-card.is-new {
  animation: insight-pulse 0.6s ease;
}

@keyframes insight-pulse {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(255, 192, 79, 0); }
  30%  { transform: scale(1.02); box-shadow: 0 0 0 8px rgba(255, 192, 79, 0.3); }
  100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(255, 192, 79, 0); }
}

/* 重要状態（GC/DC）はより強くパルス */
.insight-card.is-new[data-state="golden_cross"],
.insight-card.is-new[data-state="dead_cross"] {
  animation: insight-pulse-strong 0.8s ease;
}

@keyframes insight-pulse-strong {
  0%   { transform: scale(1);    background: var(--color-bg-card); }
  30%  { transform: scale(1.04); background: var(--color-brand-light); }
  100% { transform: scale(1);    background: var(--color-bg-card); }
}

/* ===== 層2: アイコン微動（重要状態のみ・折りたたみ時） ===== */

.insight-card[data-state="golden_cross"] .insight-icon,
.insight-card[data-state="dead_cross"] .insight-icon,
.insight-card[data-state="gc_approaching"] .insight-icon,
.insight-card[data-state="dc_approaching"] .insight-icon,
.insight-card[data-state="volume_surge"] .insight-icon {
  animation: icon-glow 2s ease-in-out infinite;
}

@keyframes icon-glow {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.7; transform: scale(1.15); }
}

/* 展開中はアイコン微動を止める（うるさいので） */
.insight-card[data-expanded="true"] .insight-icon {
  animation: none;
}

/* ── 免責文言（常時表示） ── */
.insight-disclaimer {
  font-size: 10px;
  color: var(--color-text-muted);
  margin: var(--space-2) 0 0;
  line-height: 1.5;
}