/* chat 캐스케이드 6/6 — 멘션 칩·멘션 자동완성·답장 액션/인용/컴포저 바·이모지 반응 칩과 피커.
   chat-work-cards.css 바로 다음에 로드된다. 로드 순서가 곧 캐스케이드다. */

/* ===== 멘션 칩 (Phase 4 — P5가 실제 메시지 렌더에서 이 클래스 언어를 소비) ===== */
.mention {
  display: inline-block;
  padding: 0 5px;
  border-radius: var(--radius-sm);
  background: var(--accent-light);
  color: var(--accent);
  font-weight: 600;
}
.mention.agent { background: var(--accent-pink-light); color: var(--accent-pink); }
.mention.me { background: var(--warn-100); color: var(--warn-800); }

/* ===== 멘션 자동완성 팝업 — .cmd-autocomplete 형태를 따름 ===== */
.mention-ac {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  max-height: 268px;
  overflow-y: auto;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 6px;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12); /* token-exempt: one-off */
  z-index: 200;
  scrollbar-width: thin;
}

.mention-ac-group {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 9px 12px 4px;
  background: var(--bg-primary);
  position: sticky;
  top: 0;
}

.mention-ac-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 12px;
  cursor: pointer;
  font-size: 13px;
  transition: background 80ms ease;
}

.mention-ac-item.selected,
.mention-ac-item:hover {
  background: var(--accent-light);
}

.mention-ac-avatar {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-full);
  display: grid;
  place-items: center;
  background: var(--accent-light);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

.mention-ac-name {
  font-weight: 600;
  color: var(--text-primary);
}

.mention-ac-desc {
  font-size: 12px;
  color: var(--text-muted);
  margin-left: auto;
  white-space: nowrap;
}

.mention-ac-state {
  padding: 12px;
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
}

/* ===== 답장(↪) 액션 행 + 인용 블록 + 컴포저 바 (Phase 7, bigtionax-chat-mention-reply-reaction) =====
   .bubble-line을 재사용하지 않는다 — 그쪽은 align-items: flex-start가 명시적 의도(스트리밍 × 버튼
   고정, :819 위 주석). 액션 행은 버블 하단에 붙어야 하므로 새 래퍼로 감싼다(§E). 스트리밍 버블은
   .bubble-row > .bubble-line > .bubble로 중첩된다. */
.bubble-row {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  min-width: 0;
}

.message.user .bubble-row { flex-direction: row-reverse; }

/* opacity로만 나타난다(display 토글 금지) — 호버 시 레이아웃이 흔들리지 않는다. 대신 액션
   거터만큼 긴 말풍선의 줄바꿈 지점이 앞당겨진다(기록되는 결과). */
.msg-actions {
  flex-shrink: 0;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 120ms ease;
}

.message:hover .msg-actions,
.msg-actions.pinned {
  opacity: 1;
}

/* 앵커(P2 data-msg-seq) 없는 말풍선에는 액션이 없다 — 스트리밍 중/자기 방금 보낸 에코. */
.message:not([data-msg-seq]) .msg-actions { display: none; }

/* 목업의 box-shadow: var(--shadow-md)는 쓰지 않는다 — .message-content의 overflow: hidden이
   그림자를 잘라 반쪽으로 보인다. 대신 같은 자리의 기존 형제(.stream-cancel-btn, :836)와 동일한
   테두리+표면 처리를 미러한다(의도된 목업 편차 1건). */
.msg-act {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--bg-primary);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 150ms ease;
}

.msg-act:hover {
  background: var(--accent-light);
  border-color: var(--accent);
  color: var(--accent);
}

/* 인용 블록 — .bubble 안 맨 위, 원문은 옅은 회색(surface-subtle/wash)으로, 새 내용은 그 아래로. */
.quote {
  display: block;
  margin-bottom: 6px;
  padding: 4px 8px;
  border-left: 3px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  cursor: pointer;
}

.quote-name {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-secondary);
}

.quote-text {
  display: block;
  font-size: 12.5px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 인용 클릭 점프 강조 — prefers-reduced-motion에서는 비활성화(목업 :163). */
@keyframes flash {
  0%, 100% { background: transparent; }
  30% { background: var(--accent-light); }
}

.message.flash .bubble {
  animation: flash 1.2s ease;
}

@media (prefers-reduced-motion: reduce) {
  .message.flash .bubble { animation: none; }
}

/* 컴포저 답장 바 — showSidecarModelLoading(chat.ts) 삽입 선례와 동일하게 inputArea 앞에 붙는다. */
.reply-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-top: 1px solid var(--border);
  background: var(--bg-tertiary);
  font-size: 12.5px;
}

.rb-title {
  font-weight: 600;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.rb-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-muted);
}

.rb-x {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12px;
  border-radius: var(--radius-full);
}

.rb-x:hover {
  background: var(--bg-hover);
  color: var(--text-secondary);
}

/* ===== 이모지 반응 칩 · 피커 (Phase 10, bigtionax-chat-mention-reply-reaction, §설계I) =====
   .work-badge-popover(:1749) 포지셔닝 관례를 참고하되, 그쪽은 position: fixed인 반면 이 피커는
   스크롤 시 닫으므로(§설계E) .chat-area 기준 position: absolute다. */
.msg-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.msg-reactions:empty { display: none; }

.message.user .msg-reactions { justify-content: flex-end; }

/* 안 읽은 사람 수 — 보낸 시각과 같은 줄이 아니라 .bubble-row 안에서 말풍선 바깥쪽에 붙는다.
   좌/우는 위 `.message.user .bubble-row { flex-direction: row-reverse; }`가 정한다:
   자기 메시지는 말풍선 왼쪽, 상대 메시지는 오른쪽. 발신자별 분기 규칙이 따로 필요 없다.
   눈에 띄어야 하므로 채움 배지로 둔다 — --orange-500을 배경으로 쓰는 것은 이 코드베이스의
   기존 역할과 같고(components.css), 글씨를 --text-primary로 두면 대비 8.76:1로 읽힌다.
   같은 주황을 글자색으로 쓰면 2.16:1이라 11px에서 안 읽힌다. */
.message-read-count {
  flex-shrink: 0;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  background: var(--orange-500);
  color: var(--text-primary);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

.msg-reaction {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-family: var(--font-family);
  font-size: 12px;
  line-height: 1.5;
  cursor: pointer;
}

.msg-reaction:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.msg-reaction:hover {
  background: var(--bg-hover);
}

.msg-reaction.mine {
  background: var(--accent-light);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

.msg-reaction[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.55;
}

.msg-reaction-count {
  font-variant-numeric: tabular-nums;
}

.reaction-actors-popover {
  position: fixed;
  z-index: 320;
  max-width: min(320px, calc(100vw - 16px));
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-primary);
  color: var(--text-primary);
  box-shadow: var(--shadow-card);
  font-size: 12px;
  line-height: 1.45;
  pointer-events: none;
}

.reaction-picker {
  position: absolute;
  z-index: 60;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
  padding: 6px;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.reaction-picker[hidden] { display: none; }

.reaction-picker-btn {
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  border-radius: var(--radius-md);
  background: none;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}

.reaction-picker-btn:hover {
  background: var(--bg-hover);
}

.reaction-participant-popover {
  position: absolute;
  z-index: 61;
  min-width: 156px;
  max-width: min(240px, calc(100vw - 24px));
  padding: 8px;
  display: grid;
  gap: 6px;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.reaction-participant-popover[hidden] { display: none; }

.reaction-participant-popover-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}

.reaction-participant-popover-list {
  display: grid;
  gap: 4px;
}

.reaction-participant-popover-name,
.reaction-participant-popover-state,
.reaction-participant-popover-hidden {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-secondary);
}

.reaction-participant-popover-hidden {
  color: var(--text-muted);
}

.reaction-participant-popover-retry {
  width: fit-content;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 12px;
  line-height: 1.2;
  cursor: pointer;
}

.reaction-participant-popover-retry:hover,
.reaction-participant-popover-retry:focus-visible {
  background: var(--accent-light);
  border-color: var(--accent);
  color: var(--accent);
  outline: none;
}