/* ========================================================
   X（旧Twitter）タイムライン ⇔ コンパクトカード 自動切り替えCSS
   サイトの共通CSSに追加して使用します。
   ======================================================== */

:root {
  /* テーマカラー設定（サイトに合わせて自由に変更可能） */
  --x-theme-color: #0088cc;            /* メインカラー（ボタン・リンク色） */
  --x-theme-hover: #0077b3;            /* ホバー時の濃い色 */
  --x-card-bg: #ffffff;                /* カード背景色 */
  --x-card-border: #e1e8ed;            /* 枠線色 */
  --x-text-title: #0f1419;             /* タイトル文字色 */
  --x-text-sub: #536471;               /* ID・サブ文字色 */
  --x-text-desc: #333333;              /* 本文文字色 */
}

/* 自動切り替えコンテナ */
.x-switch-container {
  box-sizing: border-box;
  width: 100%;
  min-height: 220px;
  position: relative;
  margin-bottom: 20px;
}

/* タイムライン埋め込み前の生テキストリンク非表示対策（青文字リンクのチラ見えを100%防止） */
.x-timeline-box .twitter-timeline {
  color: transparent !important;
  font-size: 0 !important;
  text-decoration: none !important;
  display: block;
}

/* タイムライン埋め込みエリア */
.x-timeline-wrap {
  width: 100%;
  transition: opacity 0.3s ease;
}

/* 裏で描画待機中の状態（初期状態：透明＆操作無効でカードの後ろで待機） */
.x-timeline-wrap.is-standby {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}

/* タイムラインが表示状態の時 */
.x-timeline-wrap.is-active {
  position: relative;
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
  display: block;
  animation: xCardFadeIn 0.3s ease;
}

/* タイムラインが完全非表示の時 */
.x-timeline-wrap.is-hidden {
  display: none !important;
}

.x-timeline-box {
  position: relative;
  min-height: 280px;
  background: #ffffff;
  border: 1px solid var(--x-card-border);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.x-timeline-box iframe {
  width: 100% !important;
}

/* コンパクト型 アカウント案内カード（初期表示：待ち時間0秒で即表示） */
.x-compact-card {
  box-sizing: border-box;
  width: 100%;
  background: var(--x-card-bg);
  border: 1px solid var(--x-card-border);
  border-radius: 12px;
  padding: 20px 18px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  position: relative;
  z-index: 2;
  transition: opacity 0.3s ease;
}

.x-compact-card.is-hidden {
  display: none !important;
}

/* アバター＆アカウント名ヘッダー */
.x-compact-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.x-compact-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.x-compact-icon svg {
  display: block;
}

.x-compact-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.x-compact-titles {
  display: flex;
  flex-direction: column;
}

.x-compact-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.x-compact-title {
  font-size: 16.5px;
  font-weight: 800;
  color: var(--x-text-title);
  line-height: 1.3;
  margin: 0;
}

.x-compact-id {
  font-size: 13px;
  color: var(--x-text-sub);
  font-weight: 500;
}

/* 紹介・発信内容テキスト */
.x-compact-desc {
  font-size: 13.5px;
  color: var(--x-text-desc);
  line-height: 1.55;
  margin: 0 0 16px 0;
}

/* メインCTAボタン（タイムラインを見る） */
.x-compact-btn {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background-color: var(--x-theme-color);
  color: #ffffff !important;
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
  padding: 12px 20px;
  border-radius: 8px;
  transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 136, 204, 0.25);
}

.x-compact-btn:hover {
  background-color: var(--x-theme-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 136, 204, 0.35);
}

.x-compact-btn .external-icon {
  font-size: 15px;
  font-weight: 800;
  transition: transform 0.2s ease;
}

.x-compact-btn:hover .external-icon {
  transform: translate(2px, -2px);
}

/* 下部詳細リンクボタン（任意） */
.sns-detail-link {
  text-align: center;
  margin-top: 10px;
}

.sns-detail-link a {
  box-sizing: border-box;
  display: inline-block;
  padding: 9px 28px;
  border: 1px solid var(--x-theme-color);
  border-radius: 6px;
  color: var(--x-theme-color);
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
  transition: all 0.2s ease;
  background-color: #ffffff;
}

.sns-detail-link a:hover {
  background-color: var(--x-theme-color);
  color: #ffffff !important;
}