/**
 * message_actions.css
 * DEV-0422-DASHBOARD-CHAT-V3 — 액션바 스타일
 *
 * UX_Reviewer review 반영:
 *   C-01: @keyframes spin 추가 (regenerate 로딩 애니메이션)
 *   C-02: margin-top 8px (spec §3-1 "bubble 아래 8px" 기준)
 *   C-04: gap 4px (44dp×5 + gap → 360px 여백 128px 확보)
 */

/* ────────────────────────────────────────────────────
   액션바 컨테이너 (.message-actions)
   ──────────────────────────────────────────────────── */
.message-actions {
  display: flex;
  gap: 4px;                  /* C-04: 2px → 4px (fat-finger 방지) */
  margin-top: 8px;           /* C-02: 4px → 8px (spec §3-1 일치) */
  justify-content: flex-end; /* 데스크탑: bubble 우측 정렬 */
  opacity: 0.4;
  transform: scale(0.95);
  transition: opacity 0.15s, transform 0.15s;
}

/* bubble hover 또는 actions 포커스 시 완전 표시 */
.message:hover .message-actions,
.message-actions:focus-within {
  opacity: 1;
  transform: scale(1);
}

/* 모바일: 좌측 정렬, 항상 약간 보임 */
@media (max-width: 768px) {
  .message-actions {
    justify-content: flex-start;
    opacity: 0.7;
    transform: none;
    /* JS tap handler (C-03)가 opacity: 1로 전환 */
  }
}

/* ────────────────────────────────────────────────────
   액션 버튼 (.action-btn)
   design_spec.md §3-3 기준
   ──────────────────────────────────────────────────── */
.action-btn {
  width: 44px;
  height: 44px;
  min-width: 44px;     /* touch target AC-004 */
  min-height: 44px;
  border: none;
  background: transparent;
  border-radius: 8px;  /* --chat-radius */
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6B7280;      /* --chat-text-muted */
  transition: background 0.15s, color 0.15s, transform 0.1s;
  outline: none;
}

.action-btn:hover {
  background: rgba(14, 165, 160, 0.08); /* teal 8% */
  color: #0EA5A0;                        /* --chat-accent */
}

.action-btn:active {
  transform: scale(0.92);
}

/* 포커스 링 (접근성) */
.action-btn:focus-visible {
  outline: 2px solid #0EA5A0;
  outline-offset: 2px;
}

/* 활성 상태 — thumbs_up */
.action-btn.active-positive {
  color: #0EA5A0;
  background: rgba(14, 165, 160, 0.12);
}

/* 활성 상태 — thumbs_down */
.action-btn.active-negative {
  color: #C4918A;                        /* warm-FE_2 */
  background: rgba(196, 145, 138, 0.12);
}

/* 재생성 로딩 — C-01: @keyframes spin 정의 */
.action-btn.loading span {
  animation: spin 1s linear infinite;
}

/* C-01: spin keyframe (design_spec에 누락 → UX_Reviewer C-01 지적) */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ────────────────────────────────────────────────────
   경로 배지 (.path-badge)
   design_spec.md §5 기준
   ──────────────────────────────────────────────────── */
.path-badge {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  border-radius: 4px;
  font-family: 'Pretendard Variable', sans-serif;
  margin-left: 6px;
  vertical-align: middle;
  opacity: 0.8;
}

/* 경로별 색상 */
.path-badge[data-path="A"] {
  background: #0EA5A0;  /* DB — teal */
  color: #fff;
}
.path-badge[data-path="B"] {
  background: #4A4453;  /* AI — dark purple */
  color: #fff;
}
.path-badge[data-path="C"] {
  background: #C9A84C;  /* Opus — gold */
  color: #1A1A2E;
}
.path-badge[data-path="D"] {
  background: #6B7280;  /* CC — gray */
  color: #fff;
}