/*
 * thread_page.css
 *
 * このファイルは、スレッド詳細ページ（`/thread/<id>`）および
 * スレッド編集ページにのみ適用される固有のスタイルを定義します。
 */


/* スレッドのタグ・別名表示セクション */
/* コメント投稿フォームセクション */
.thread-section,
.tag-section,
.category-sesction,
.alias-section,
.comment-section,
.about-page,
.index-page {
  margin-top: 1rem;
  margin-bottom: 1.5rem;
  padding: 1rem;
  background-color: var(
    --bs-tertiary-bg
  ); /* Bootstrapのテーマに合わせた背景色 */
  border-radius: 0.375rem;
}

.tag-selection-area {
  margin-top: 1rem;
  margin-bottom: 1.5rem;
  padding: 1rem;
  background-color: var(--bs-body-bg);
  border-radius: 0.375rem;
}

/* 現在設定されているタグ・別名の一覧 */
.current-tags,
.current-aliases {
  margin-bottom: 0.75rem;
}

/* タグ・別名の追加フォーム */
.add-tag-form,
.add-alias-form {
  display: flex;
  gap: 0.5rem;
}

/* いいねボタン */
.like-btn.liked {
  /* いいね済みの状態のスタイル */
  background-color: #dc3545; /* 背景色を赤に */
  color: white; /* 文字色を白に */
}

/* スレッド一覧のバッジコンテナ */
.thread-list .list-group-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap; /* 画面幅が狭い場合にタイトルとバッジが縦に並ぶように */
}

.thread-list .badges {
  display: flex;
  flex-wrap: wrap; /* タグが多い場合に折り返す */
  gap: 0.3rem; /* バッジ間の隙間 */
  margin-left: auto; /* バッジを右寄せにする */
  padding-left: 1rem; /* タイトルとの間に余白を確保 */
  justify-content: flex-end; /* 右寄せを確実にする */
}

/* 投稿ヘッダーのスタイル */
.post-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  font-size: 0.9rem;
  color: var(--bs-secondary-color);
  width: 100%;
  margin-bottom: 0.5rem;
}

.post-id-display {
  font-family: monospace;
  font-size: 0.85rem;
}

/* 投稿フッターのスタイル */
.post-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.action-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* フォーム内のタグ選択エリア */
.tag-selection-area {
  max-height: 150px;
  overflow-y: auto;
}

/* 汎用的なマージン */
.my-32 {
  margin-top: 32px;
  margin-bottom: 32px;
}

/* --- Post Preview Tooltip --- */
.post-tooltip {
  display: none; /* Initially hidden */
  position: absolute; /* Position relative to the viewport */
  border: 1px solid var(--bs-border-color);
  background-color: var(--bs-body-bg);
  padding: 0.75rem;
  border-radius: 0.5rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  max-width: 450px;
  width: auto;
  z-index: 1080; /* Higher than most other elements */
  pointer-events: none; /* Tooltip should not be interactive */
  opacity: 0;
  transition: opacity 0.15s ease-in-out;
}

.post-tooltip.visible {
  display: block;
  opacity: 1;
}

/* Style for the content inside the tooltip to match the original post */
.post-tooltip article {
  font-size: 0.9rem;
}
.post-tooltip article footer {
  opacity: 0.8;
  margin-bottom: 0.5rem;
}
.post-tooltip article p {
  margin-bottom: 0;
}