/* 웹 대화방 — 연결 상태 배너 · 전송 중/실패 임시 말풍선 (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: #7c2d12;
  background: #fff7ed;
  border-bottom: 1px solid #fed7aa;
}
.general-chat-conn small { color: #9a3412; opacity: .85; }
.general-chat-conn.is-rejected { color: #7f1d1d; background: #fef2f2; border-bottom-color: #fecaca; }
.general-chat-conn-dot {
  flex: 0 0 auto;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #f97316;
  animation: general-chat-conn-blink 1.2s ease-in-out infinite;
}
.general-chat-conn.is-rejected .general-chat-conn-dot { background: #dc2626; 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 #f87171; outline-offset: 1px; }
.general-chat-pending-status { font-size: 11px; color: #6b7280; }
.general-chat-pending-status.is-error { color: #dc2626; }
.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 #d1d5db;
  background: #ffffff;
  color: #374151;
  cursor: pointer;
}
.general-chat-pending-actions button:hover { background: #f3f4f6; }
.general-chat-pending-actions button[data-pending-retry] { border-color: #3e6187; color: #3e6187; }