/* webChat.css
   WebChat 대화창 전용 스타일
   Flutter chatBubble.dart 를 CSS로 변환
   UTF-8 인코딩
*/

/* ─── 대화 영역 전체 컨테이너 ─── */
.webchat-area {
  width: 100%;
  margin-top: 20px;
  box-sizing: border-box;
}

/* ─── 메시지 목록 (스크롤 영역) ─── */
.webchat-message-list {
  width: 100%;
  max-height: 60vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 0;
  box-sizing: border-box;
}

/* ─── ChatBubble 래퍼 ─── */
/* Flutter: Padding(horizontal: 2%, vertical: 4) */
.webchat-bubble-wrapper {
  padding: 4px 2%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

/* 우측 정렬 (isCurrentUser = true, 나) */
.webchat-bubble-right {
  align-items: flex-end;
}

/* 좌측 정렬 (isCurrentUser = false, 상대방) */
.webchat-bubble-left {
  align-items: flex-start;
}

/* ─── ChatBubble Row (말풍선 + read 상태) ─── */
/* Flutter: Row(mainAxisSize: MainAxisSize.min) */
.webchat-bubble-row {
  display: inline-flex;
  align-items: flex-end;
  gap: 8px;
  max-width: 50%;
  /* 요구사항: 화면 가로 사이즈의 절반 */
}

/* ─── 말풍선 본체 ─── */
/* Flutter: DecoratedBox with BoxShadow(blurRadius:5, offset:1,1, black26) */
.webchat-bubble {
  padding: 8px;
  word-break: break-word;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.26);
}

/* isCurrentUser = true (나): 파란색 배경 */
/* Flutter: Colors.blue[200] = #90CAF9 */
/* borderRadius: topLeft(10), bottomLeft(10), bottomRight(10) — 우상단만 각진 형태 */
.webchat-bubble-mine {
  background-color: #90CAF9;
  border-radius: 10px 0 10px 10px;
}

/* isCurrentUser = false (상대방): 연빨간색 배경 */
/* Flutter: Colors.red[50] = #FFEBEE */
/* borderRadius: topRight(10), bottomLeft(10), bottomRight(10) — 좌상단만 각진 형태 */
.webchat-bubble-other {
  background-color: #FFEBEE;
  border-radius: 0 10px 10px 10px;
}

/* ─── 말풍선 텍스트 ─── */
/* Flutter: Text(fontSize: 13, color: Colors.black, softWrap: true) */
.webchat-bubble-text {
  font-size: 13px;
  color: #000;
  line-height: 1.4;
  white-space: pre-wrap;
}

/* ─── read 상태 텍스트 ─── */
/* Flutter: Text(read, fontSize: 9, color: Colors.black54) */
.webchat-read-status {
  font-size: 9px;
  color: rgba(0, 0, 0, 0.54);
  flex-shrink: 0;
}

/* ─── 시간 표시 ─── */
/* Flutter chat_screen.dart: ChatBubble 아래에 시간 표시 */
/* fontSize: 9, color: Colors.black54 */
.webchat-time {
  font-size: 9px;
  color: rgba(0, 0, 0, 0.54);
  padding: 1px 10px 10px 10px;
}

.webchat-time-right {
  text-align: right;
}

.webchat-time-left {
  text-align: left;
}

.webchat-time-center {
  text-align: center;
}

/* ─── ty14 시스템 메시지 (삭제된 QR) ─── */
/* 가운데 정렬 회색 배경, 전체 폭 사용 */
.webchat-bubble-wrapper.webchat-bubble-system {
  justify-content: center;
}

.webchat-bubble-system-body {
  background-color: #eceff1;
  color: #c62828;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  max-width: 90%;
  text-align: center;
  border: 1px solid #cfd8dc;
}

/* 삭제된 QR 상태에서 채팅 입력창 비활성화 */
.webchat-deleted-qr-banner {
  background-color: #ffebee;
  color: #c62828;
  padding: 10px;
  text-align: center;
  font-size: 13px;
  border-bottom: 1px solid #ef9a9a;
}

/* ─── 작은 화면 대응 ─── */
@media (max-width: 520px) {
  .webchat-bubble-row {
    max-width: 70%;
    /* 작은 화면에서는 70%까지 확장 */
  }

  .webchat-message-list {
    max-height: 50vh;
  }
}