.chat-header {
  padding: 14px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 8px;
}
.chat-header-content { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; flex: 1; }
.chat-header .who { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.chat-header .who-text { min-width: 0; flex: 1; }
.chat-header .who-text strong { display: block; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-header .who-text .state { margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-header .header-tools { display: flex; align-items: center; gap: 2px; flex: none; }

.messages { padding: 20px; overflow: auto; display: flex; flex-direction: column; gap: 4px; background: #f3f5f8; flex: 1; }
.day-divider { display: flex; align-items: center; justify-content: center; margin: 14px 0 10px; }
.day-divider span { background: #e7edf5; color: #45566e; font-size: 11.5px; font-weight: 600; padding: 4px 12px; border-radius: 99px; }

.message { display: flex; gap: 8px; max-width: 72%; margin: 6px 0; align-items: flex-end; }
.message.in { align-self: flex-start; }
.message.out { align-self: flex-end; flex-direction: row-reverse; }
.message .bubble-col { min-width: 0; display: flex; flex-direction: column; }
.message.out .bubble-col { align-items: flex-end; }

.bubble {
  padding: 10px 13px; border-radius: 4px 12px 12px 12px; box-shadow: var(--shadow);
  line-height: 1.5; white-space: pre-wrap; word-break: break-word;
  background: var(--bubble-in); color: var(--bubble-in-text);
}
.message.out .bubble { background: var(--bubble-out); color: var(--bubble-out-text); border-radius: 12px 4px 12px 12px; }
.message.sending .bubble { opacity: .6; }
.message.error .bubble { outline: 1px solid var(--red); }
.retry-btn { background: none; border: none; color: var(--red); font-size: 11px; padding: 2px 0; text-decoration: underline; cursor: pointer; }

.sender { font-size: 12px; color: var(--muted); margin: 0 0 4px 3px; }
.time { font-size: 11px; color: var(--muted); margin: 5px 3px; }
.message.out .time { text-align: right; }
.attachment { margin-top: 8px; max-width: 280px; border-radius: 8px; display: block; }
.attachment.file-link { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; background: #eef2f8; color: var(--text); border-radius: 8px; text-decoration: none; font-size: 13px; }
.badge { display: inline-block; margin-top: 7px; padding: 3px 7px; border-radius: 99px; font-size: 11px; background: #e7edf5; color: #45566e; }
.confirmed { background: #daf5ea; color: #087a4e; }
.error { background: #ffe3e8; color: #b42342; }