/* 대화방: 메시지 목록과 말풍선 */

.messages {
  flex: 1;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

/* 날짜 구분선 */
.day-divider {
  align-self: center;
  margin: 12px 0;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 12px;
  color: var(--text-dim);
  background: var(--surface);
  border: 1px solid var(--border);
}

/* 메시지 한 줄: [아바타] [이름 / 말풍선 + 시간] */
.msg {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  max-width: 75%;
  align-self: flex-start;
  animation: pop 0.15s ease-out;
}
.msg.continued { margin-top: 3px; }
.msg.continued .avatar { visibility: hidden; height: 0; } /* 같은 사람이 이어 쓰면 아바타·이름 생략 */
.msg.continued .sender { display: none; }

.msg-body { display: flex; flex-direction: column; min-width: 0; }
.sender { font-size: 12px; color: var(--text-dim); margin: 0 0 3px 2px; }

.msg-line { display: flex; align-items: flex-end; gap: 6px; }
.msg time { flex: none; font-size: 11px; color: var(--text-dim); }

.bubble {
  padding: 9px 13px;
  border-radius: 4px 16px 16px 16px;
  background: var(--theirs);
  border: 1px solid var(--border);
  white-space: pre-wrap;
  word-break: break-word;
}

/* 내 메시지: 오른쪽, 아바타 없음, 시간은 말풍선 왼쪽 */
.msg.mine { align-self: flex-end; }
.msg.mine .avatar, .msg.mine .sender { display: none; }
.msg.mine .msg-line { flex-direction: row-reverse; }
.msg.mine .bubble {
  border-radius: 16px 4px 16px 16px;
  background: var(--mine);
  border-color: var(--mine);
  color: var(--mine-text);
}

/* 보내는 중 / 실패 */
.msg.pending .bubble { opacity: 0.55; }
.msg.pending time::after { content: ' · 보내는 중'; }
.msg.failed .bubble { background: var(--danger); border-color: var(--danger); }
.msg.failed time::after { content: ' · 실패'; color: var(--danger); }

.send { padding: 9px 14px; }

@keyframes pop {
  from { opacity: 0; transform: translateY(4px); }
}