/* Layout 3 cột chiếm trọn chiều cao còn lại của khung nội dung.
   Trừ đi phần chiếm chỗ phía trên: app bar 64px + padding trang 24px + hàng tiêu đề
   ("Trò chuyện" + 2 nút) 52px + margin 12px + padding đáy 24px. Thiếu phần này thì khung
   tràn khỏi màn hình và ô soạn tin bị đẩy xuống dưới đáy trang.
   dvh thay vh để thanh địa chỉ trên mobile không che mất. */
.chat-shell {
    display: flex;
    height: calc(100dvh - 176px);
    min-height: 360px;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
}

.chat-pane-list {
    width: 320px;
    flex: 0 0 320px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--mud-palette-lines-default);
    min-height: 0;
}

.chat-pane-thread {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.chat-pane-info {
    width: 300px;
    flex: 0 0 300px;
    border-left: 1px solid var(--mud-palette-lines-default);
    overflow-y: auto;
    min-height: 0;
}

/* Trên màn hẹp chỉ hiện MỘT cột: chưa chọn hội thoại thì thấy danh sách,
   chọn rồi thì thấy khung tin (nút quay lại ở header). */
@media (max-width: 960px) {
    .chat-pane-list { width: 100%; flex: 1 1 auto; border-right: none; }
    .chat-pane-info { display: none; }
    .chat-shell.mobile-thread .chat-pane-list { display: none; }
    .chat-shell.mobile-list .chat-pane-thread { display: none; }
}

/* MudBlazor đặt flex-grow:1 cho .mud-divider-fullwidth. Trong hai cột flex của chat,
   đường kẻ đó sẽ nở ra chiếm hết chỗ trống và đẩy nội dung xuống dưới — ghim lại. */
.chat-pane-list > hr.mud-divider,
.chat-pane-thread > hr.mud-divider {
    flex: 0 0 auto;
}

/* ─── Danh sách hội thoại ─── */
.chat-list-search { padding: 8px 12px; }

.chat-list-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
}

.chat-list-item {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    cursor: pointer;
    border-left: 3px solid transparent;
}

.chat-list-item:hover { background: var(--mud-palette-action-default-hover); }

.chat-list-item.active {
    background: var(--mud-palette-action-default-hover);
    border-left-color: var(--mud-palette-primary);
}

.chat-list-item .title-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}

.chat-list-item .conv-title {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-list-item.unread .conv-title { font-weight: 700; }

.chat-list-item .conv-preview {
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-list-item .conv-body { flex: 1 1 auto; min-width: 0; }

.chat-list-item .conv-time {
    font-size: 0.7rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

/* Chấm trạng thái online, ghim vào góc avatar */
.presence-wrap { position: relative; flex: 0 0 auto; }

.presence-dot {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 2px solid var(--mud-palette-surface);
    background: var(--mud-palette-text-disabled);
}

.presence-dot.online { background: var(--mud-palette-success); }

/* ─── Khung tin nhắn ─── */
.chat-thread-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    flex: 0 0 auto;
}

.chat-messages {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 0;
}

.chat-day-divider {
    align-self: center;
    margin: 12px 0 8px;
    padding: 2px 12px;
    border-radius: 999px;
    font-size: 0.72rem;
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-secondary);
}

.chat-system-message {
    align-self: center;
    margin: 6px 0;
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
    text-align: center;
}

.chat-row {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    max-width: 78%;
}

.chat-row.mine { align-self: flex-end; flex-direction: row-reverse; }
.chat-row.theirs { align-self: flex-start; }

/* Nhiều tin liên tiếp của cùng người: chỉ tin đầu có avatar, các tin sau thụt vào cho thẳng hàng */
.chat-row .avatar-slot { width: 32px; flex: 0 0 32px; }

.chat-bubble {
    padding: 8px 12px;
    border-radius: 14px;
    background: var(--mud-palette-action-default-hover);
    word-break: break-word;
    white-space: pre-wrap;
    position: relative;
}

.chat-row.mine .chat-bubble {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

/* Phải thắng cả .chat-row.mine .chat-bubble (3 class) nên chọn theo cả hai nhánh,
   nếu không tin đã thu hồi của mình vẫn giữ nền xanh. */
.chat-row .chat-bubble.recalled,
.chat-row.mine .chat-bubble.recalled {
    font-style: italic;
    opacity: 0.7;
    background: transparent;
    border: 1px dashed var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
}

.chat-sender-name {
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
    margin: 0 0 2px 4px;
}

.chat-meta {
    font-size: 0.68rem;
    opacity: 0.75;
    margin-top: 2px;
    display: flex;
    gap: 6px;
    align-items: center;
}

.chat-row.mine .chat-meta { justify-content: flex-end; }

/* Trích dẫn tin đang trả lời */
.chat-reply-quote {
    border-left: 3px solid currentColor;
    padding: 2px 8px;
    margin-bottom: 4px;
    opacity: 0.8;
    font-size: 0.78rem;
    cursor: pointer;
    border-radius: 4px;
    background: rgba(127, 127, 127, 0.12);
}

.chat-reply-quote .quote-name { font-weight: 600; }

.chat-attachment-image {
    max-width: 260px;
    max-height: 260px;
    border-radius: 10px;
    cursor: pointer;
    display: block;
}

.chat-attachment-file {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 8px;
    background: rgba(127, 127, 127, 0.12);
    text-decoration: none;
    color: inherit;
}

/* Nháy sáng khi nhảy tới một tin cụ thể */
.chat-message-highlight {
    animation: chat-flash 1.6s ease-out;
}

@keyframes chat-flash {
    0%   { background-color: var(--mud-palette-warning); border-radius: 14px; }
    100% { background-color: transparent; }
}

.chat-read-avatars {
    align-self: flex-end;
    display: flex;
    gap: 2px;
    margin-top: 2px;
}

.chat-typing {
    padding: 2px 16px 4px;
    font-size: 0.76rem;
    color: var(--mud-palette-text-secondary);
    flex: 0 0 auto;
    min-height: 20px;
}

/* ─── Ô soạn tin ─── */
.chat-composer {
    border-top: 1px solid var(--mud-palette-lines-default);
    padding: 8px 12px;
    flex: 0 0 auto;
}

.chat-composer-row {
    display: flex;
    align-items: flex-end;
    gap: 6px;
}

.chat-composer-input { flex: 1 1 auto; }

.chat-replying-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    margin-bottom: 6px;
    border-left: 3px solid var(--mud-palette-primary);
    background: var(--mud-palette-action-default-hover);
    border-radius: 4px;
    font-size: 0.8rem;
}

.chat-empty {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--mud-palette-text-secondary);
}