/* 대사 맛집 카드의 첫 대사(행동/대사) + 대사 좋아요 버튼 (메인 카드 · 채팅방 첫 메시지) — best_lines.py, line_like.js
   카드는 다크·라이트 모두 같은 분홍 바탕(ch_grid.css .best-line-card)이라 카드 안 색은 테마와 무관하게 고정.
   채팅방 버튼은 토큰(--accent, --accent-text, --text-dim, --border)을 써서 라이트 테마에서도 맞는다. 모서리는 각지게. */

/* ── 카드 첫 대사: 행동은 흐린 기울임, 대사는 보통 글자. 넘치면 아래를 잘라 좋아요 버튼 자리를 남김 ── */
.best-line-card .best-line-text {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 14;
  line-clamp: 14;
  margin-bottom: 8px;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
/* 행동·대사 조각은 줄을 나눠 (조각 안의 줄바꿈도 그대로) */
.best-line-text .bl-act,
.best-line-text .bl-say {
  display: block;
  white-space: pre-line;
}
.best-line-text .bl-act + .bl-say,
.best-line-text .bl-say + .bl-act { margin-top: 4px; }
.best-line-text .bl-act {
  color: rgba(0, 0, 0, 0.52);
  font-style: italic;
}
.best-line-text .bl-say {
  color: #000;
}

/* ── 버튼 공통 ── */
.line-like-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 0;
  cursor: pointer;
  font: inherit;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
.line-like-btn .line-like-icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  flex-shrink: 0;
}
.line-like-btn.is-on .line-like-icon { fill: currentColor; }
.line-like-btn .line-like-count { font-variant-numeric: tabular-nums; }

/* 메인 카드 오른쪽 아래 — 카드 전체 링크(.best-line-link, z-index 2) 위에 떠 있어 눌러도 이동하지 않음 */
.best-line-card > .best-line-like {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 3;
  min-height: 32px;
  padding: 7px 10px;
  font-size: 12px;
  color: #1a1a1a;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(0, 0, 0, 0.18);
}
.best-line-card > .best-line-like.is-on {
  background: var(--accent, #FFA178);
  border-color: var(--accent, #FFA178);
  color: var(--on-accent, #1a1a1a);
}
.best-line-card { padding-bottom: 52px; }

/* 채팅방 첫 메시지 아래 '이 첫 대사 좋아요' */
.greeting-like-row {
  display: flex;
  justify-content: flex-start;
  margin-top: 6px;
}
.greeting-like {
  min-height: 30px;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--text-dim, #a8a8ad);
  background: transparent;
  border: 1px solid var(--border, #3a3a3e);
}
.greeting-like.is-on {
  color: var(--accent-text, #FFA178);
  border-color: var(--accent, #FFA178);
}

/* 눌렀을 때 살짝 튀는 효과 (동작 줄이기 설정과 상관없이 항상) */
@keyframes line-like-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.12); }
  100% { transform: scale(1); }
}
.line-like-btn.line-like-pop { animation: line-like-pop 0.32s ease-out; }