/*
 * 웹 대화방 말풍선 — 오다스챗(PC·안드로이드)과 같은 화면 규칙 (2026-10-08)
 *  - 날짜 칩(.general-chat-date) · 상대 프로필 칸(.gcm-av, 32px) · 연속 묶기(.is-grouped, 3분)
 *  - 이름 첫 글자 아바타 색 .ord-avc-N = --ord-av-N (_theme_tokens.css, 앱 avatarColor 와 같은 12색)
 *  - 테마 색(--gct-*)은 chat_theme_apply 가 테마를 고른 회원에게만 주입 — 없으면 토큰 기본값
 *  ⚠옛 인라인 스타일(_general_chat_modal)보다 뒤에 있지 않으므로 셀렉터 앞에 .rmm-modal 을 붙여 특이도를 높인다.
 */

/* 날짜 칩 — 날짜가 바뀌는 곳 «2026년 10월 8일» */
.rmm-modal [id^="general-chat-room-content-"] .general-chat-date {
  align-self: center;
  display: flex;
  justify-content: center;
  margin: 2px 0;
}
.rmm-modal [id^="general-chat-room-content-"] .general-chat-date > span {
  padding: 2px 12px;
  border-radius: 10px;
  font-size: 11px;
  background: var(--gct-datechip-bg, var(--ord-band));
  color: var(--gct-datechip-fg, var(--ord-text-3));
}

/* 폭 — 프로필·시각 칸이 생겨 종전 80% 묶음으로는 말풍선이 일찍 줄바꿈된다. PC 처럼 남는 폭을 쓰고 말풍선만 420px 상한 */
.rmm-modal [id^="general-chat-room-content-"] .general-chat-message.theirs { max-width: calc(100% - 12px); }
.rmm-modal [id^="general-chat-room-content-"] .general-chat-message.mine { max-width: calc(100% - 44px); }
.rmm-modal [id^="general-chat-room-content-"] .general-chat-message-row > .general-chat-message-bubble { max-width: 420px; }

/* 상대 메시지 — 왼쪽 프로필 칸 + 오른쪽(이름·말풍선·공감·메모) */
.rmm-modal [id^="general-chat-room-content-"] .general-chat-message.theirs {
  display: grid;
  grid-template-columns: 32px minmax(0, auto);
  column-gap: 8px;
  align-items: start;
  justify-items: start;
}
.rmm-modal [id^="general-chat-room-content-"] .general-chat-message.theirs > * { grid-column: 2; }
.rmm-modal [id^="general-chat-room-content-"] .general-chat-message.theirs > .gcm-av { grid-column: 1; grid-row: 1 / span 4; }

.rmm-modal [id^="general-chat-room-content-"] .gcm-av {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  background: var(--ord-band);
  color: var(--ord-text-2);
}

/* 연속 묶기 — 같은 사람이 3분 안에 이어 보낸 말: 이름·프로필 생략, 간격 좁게(목록 gap 10px → 4px) */
.rmm-modal [id^="general-chat-room-content-"] .general-chat-message.is-grouped { margin-top: -6px; }
.rmm-modal [id^="general-chat-room-content-"] .general-chat-message.is-grouped > .general-chat-message-sender { display: none; }
.rmm-modal [id^="general-chat-room-content-"] .general-chat-message.theirs.is-grouped > .gcm-av { visibility: hidden; height: 0; }

/* 이름 첫 글자 아바타 색 — 번호 클래스는 변수만 정하고, 칠하기는 아래 규칙 하나가(참여자 띠의 나·거래처 색 규칙보다 특이도 높게) */
.ord-avc-0 { --avc: var(--ord-av-0); }
.ord-avc-1 { --avc: var(--ord-av-1); }
.ord-avc-2 { --avc: var(--ord-av-2); }
.ord-avc-3 { --avc: var(--ord-av-3); }
.ord-avc-4 { --avc: var(--ord-av-4); }
.ord-avc-5 { --avc: var(--ord-av-5); }
.ord-avc-6 { --avc: var(--ord-av-6); }
.ord-avc-7 { --avc: var(--ord-av-7); }
.ord-avc-8 { --avc: var(--ord-av-8); }
.ord-avc-9 { --avc: var(--ord-av-9); }
.ord-avc-10 { --avc: var(--ord-av-10); }
.ord-avc-11 { --avc: var(--ord-av-11); }
.rmm-modal .general-chat-room-participant .general-chat-room-participant-avatar.ord-avc,
.rmm-modal [id^="general-chat-room-content-"] .general-chat-message .gcm-av.ord-avc {
  background: var(--avc, var(--ord-av-11));
  color: var(--ord-on-solid);
  border-color: transparent;
}

/* 전송 실패 안내·버튼은 말풍선 옆 좁은 칸에서 줄바꿈 */
.rmm-modal [id^="general-chat-room-content-"] .general-chat-message.is-failed .general-chat-message-meta { white-space: normal; max-width: 150px; }