.flash-update {
  animation: flash-background 1s ease-out;
}

@keyframes flash-background {
  0% {
    background-color: #e0f7fa; /* A light blue/green color */
  }
  100% {
    background-color: transparent;
  }
}

.reaction-card {
  border: 1px solid #b0e0e6; /* パウダーブルーのボーダー */
  border-radius: 5px; /* 角を少し丸く */
  background-color: #f8faff; /* 非常に淡い水色の背景 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* 控えめな影 */
  transition: transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
}

.reaction-card:hover {
  transform: translateY(-1px); /* ホバーでわずかに浮き上がる */
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
}

.reaction-card .card-body {
  padding: 1px 4px; /* パディングをさらに最小限に */
  display: flex; /* Flexboxを適用 */
  flex-direction: row; /* 横並び */
  align-items: center; /* 垂直方向中央揃え */
}

.reaction-card .card-subtitle {
  font-size: 0.75em; /* フォントサイズを維持 */
  font-weight: bold; /* 太字 */
  color: #ff7f50; /* コーラル色（オレンジ系） */
  margin-bottom: 0; /* 下マージンをなくす */
  margin-top: 0; /* 上マージンをなくす */
}

.reaction-card .text-muted {
  font-size: 0.55em; /* タイムスタンプを維持 */
  color: #888; /* グレー */
  margin-top: 0; /* 上マージンをなくす */
}

.reaction-card .card-text {
  font-size: 0.7em; /* コメントのフォントサイズを維持 */
  color: #333; /* 濃いめの色で読みやすく */
  line-height: 1.0; /* 行の高さを維持 */
  margin-bottom: 0; /* 下マージンをなくす */
  margin-top: 0; /* 上マージンをなくす */
}

.reaction-icon {
  font-size: 1.2em; /* アイコンのサイズを維持 */
  margin-right: 4px; /* テキストとの間隔をさらに詰める */
  flex-shrink: 0; /* 縮小させない */
}

.reaction-card .flex-grow-1 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* 名前・コメント・時間を垂直方向上部に配置 */
  align-items: flex-start; /* 左寄せ */
}

/* リアクションを取り消すボタンのスタイル */
.btn-warning-custom {
  background-color: #ffc107; /* オレンジ色 */
  border-color: #ffc107;
  color: #212529; /* 文字色を黒に */
  margin-top: 8px;
  margin-bottom: 8px;
}

/* リアクションを取り消すボタンのホバー時のスタイル */
.btn-warning-custom:hover {
  background-color: #e0a800;
  border-color: #e0a800;
}

/* 画像をボタンにするためのスタイル */
.reaction-image-button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px; /* ボタンの幅 */
  height: 60px; /* ボタンの高さ */
}

.reaction-image-button img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* リアクションカード内のアイコン画像スタイル */
.reaction-icon-image {
  width: 40px; /* 画像の幅 */
  height: 40px; /* 画像の高さ */
  object-fit: contain; /* 画像がコンテナに収まるように調整 */
}

/* リアクションボタンを囲むdivのスタイル */
.d-flex.justify-content-around.mt-3 {
  display: flex; /* Flexboxを適用 */
  flex-direction: row; /* 横並び */
  gap: 1rem; /* ギャップを適用 */
}