/* overlay-tooltip-1.css */

/* =============================================
   デモコンテナ：2パターンを縦並びに表示
   ============================================= */
.demo-container {
  flex-direction: column;
  align-items: stretch;
  padding: 24px;
  gap: 32px;
}

.tp-pattern {
  max-width: 520px;
}

.tp-pattern-label {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 700;
  color: #2B7FE8;
  letter-spacing: 0.04em;
}

/* =============================================
   Pattern 1: CSSのみ — アイコンボタン
   ============================================= */

.tp-buttons {
  display: flex;
  gap: 12px;
}

.tp-btn {
  /* ★ position: relative が必須
     ::before / ::after の配置基点になる。
     このボタン自身に relative がないとページ全体が基点になり、左上に飛ぶ。 */
  position: relative;
  width: 48px;
  height: 48px;
  font-size: 20px;
  background: #fff;
  border: 1.5px solid #D0D7E0;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  font-family: sans-serif;
}

.tp-btn:hover {
  background: #F0F4FF;
  border-color: #2B7FE8;
}

/* ★ ::before でツールチップ本体
   content: attr(data-tooltip) で属性値を取り出して表示。
   bottom: calc(100% + 8px) でボタン真上 8px に配置。
   transform で左右中央揃え。 */
.tp-btn::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: #1A2332;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: 6px;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s, visibility 0.15s;
}

/* ★ ::after で下向き三角矢印（border トリック）
   上辺だけ色をつけ、左右を透明にすると三角形に見える。 */
.tp-btn::after {
  content: '';
  position: absolute;
  bottom: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #1A2332;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s, visibility 0.15s;
}

/* ★ ホバー時に表示
   visibility: hidden も併用する理由：opacity: 0 だけだと
   要素が残ったまま pointer-events が生きているため
   隣要素のホバー判定に影響することがある。 */
.tp-btn:hover::before,
.tp-btn:hover::after {
  opacity: 1;
  visibility: visible;
}

/* =============================================
   Pattern 2: JS版 — テキスト省略補完
   ============================================= */

.tp-list-desc {
  font-size: 13px;
  color: #5A6A7A;
  margin: 0 0 10px;
}

.tp-list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 280px;
  border: 1.5px solid #D0D7E0;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

.tp-list-item {
  padding: 10px 14px;
  font-size: 14px;
  color: #1A2332;
  border-bottom: 1px solid #EEF1F5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: default;
  transition: background 0.1s;
}

.tp-list-item:last-child {
  border-bottom: none;
}

.tp-list-item.is-truncated:hover {
  background: #F8FAFC;
}

/* =============================================
   JS が生成するツールチップボックス
   ============================================= */
.tp-tooltip-box {
  position: fixed;
  background: #1A2332;
  color: #fff;
  font-size: 12px;
  font-family: sans-serif;
  padding: 6px 12px;
  border-radius: 6px;
  pointer-events: none;
  white-space: nowrap;
  z-index: 9999;
  transform: translateX(-50%) translateY(calc(-100% - 8px));
}

.tp-tooltip-box::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #1A2332;
}

/* =============================================
   プロンプトブロック（複数パターン）
   ============================================= */
.prompt-block {
  margin-bottom: 20px;
}

.prompt-block:last-child {
  margin-bottom: 0;
}

.prompt-block-label {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  color: #2B7FE8;
  letter-spacing: 0.04em;
}