/* 웹 대화방 — 연결 상태 배너 · 전송 중/실패 임시 말풍선 (2026-09-05)
   general_chat_room_controller.js 의 _setConnState / _insertPending 가 그리는 요소.
   ⚠규칙 10: 배경·글자색을 함께 지정한다(브라우저 강제 다크 대응). */

.general-chat-conn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ord-tint-amber-fg);
  background: var(--ord-tint-amber-bg);
  border-bottom: 1px solid var(--ord-tint-amber-line);
}
.general-chat-conn small { color: var(--ord-tint-amber-fg); opacity: .85; }
.general-chat-conn.is-rejected { color: var(--ord-tint-red-fg); background: var(--ord-tint-red-bg); border-bottom-color: var(--ord-tint-red-line); }
.general-chat-conn-dot {
  flex: 0 0 auto;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ord-solid-orange);
  animation: general-chat-conn-blink 1.2s ease-in-out infinite;
}
.general-chat-conn.is-rejected .general-chat-conn-dot { background: var(--ord-badge); animation: none; }
@keyframes general-chat-conn-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* 전송 중 — 반투명. 실패 — 상태줄 빨강 + 버튼 2개 */
.general-chat-message.is-pending .general-chat-message-bubble { opacity: .65; }
.general-chat-message.is-pending.is-failed .general-chat-message-bubble { opacity: 1; outline: 1px dashed var(--ord-tint-red-line); outline-offset: 1px; }
.general-chat-pending-status { font-size: 11px; color: var(--ord-text-3); }
.general-chat-pending-status.is-error { color: var(--ord-tint-red-fg); }
.general-chat-pending-actions { display: inline-flex; gap: 6px; margin-left: 6px; }
.general-chat-pending-actions button {
  font-size: 11px;
  line-height: 1;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--ord-line-2);
  background: var(--ord-panel);
  color: var(--ord-text-2);
  cursor: pointer;
}
.general-chat-pending-actions button:hover { background: var(--ord-band); }
.general-chat-pending-actions button[data-pending-retry] { border-color: var(--ord-accent); color: var(--ord-accent); }

/* 문의채팅(support) 공용 — utils/chat_delivery.js 가 붙이는 임시 말풍선 상태줄 */
.support-chat-message.is-pending .support-chat-message-bubble { opacity: .65; }
.support-chat-message.is-pending.is-failed .support-chat-message-bubble { opacity: 1; outline: 1px dashed var(--ord-tint-red-line); outline-offset: 1px; }
.chat-pending-status { font-size: 11px; color: var(--ord-text-3); margin-top: 2px; }
.chat-pending-text.is-error { color: var(--ord-tint-red-fg); }
.chat-pending-actions { display: inline-flex; gap: 6px; margin-left: 6px; }
.chat-pending-actions button {
  font-size: 11px; line-height: 1; padding: 3px 8px; border-radius: 999px;
  border: 1px solid var(--ord-line-2); background: var(--ord-panel); color: var(--ord-text-2); cursor: pointer;
}
.chat-pending-actions button:hover { background: var(--ord-band); }
.chat-pending-actions button[data-pending-retry] { border-color: var(--ord-accent); color: var(--ord-accent); }