/* assets/css/chat-khung.css — bố cục khung chat dùng chung (component vpath-khung-chat).
   Nạp ở gia-su-cong.html và tin-nhan.html. Chỉ chứa phần LƯỚI và bong bóng tin — màu chữ, nút,
   khoảng cách nhỏ đều là utility Tailwind viết thẳng trong template của component. */

.chat-khung {
    display: grid;
    grid-template-columns: 290px minmax(0, 1fr);
    /* Hàng lưới phải GHIM 100%, không để auto: hàng auto đo theo nội dung ô, mà hai cột con đều
       đã min-size 0 nên hàng auto lúc thì xẹp lúc thì phình theo tin nhắn. 100% = đúng chiều cao
       khung, mọi phần dư dồn vào vùng cuộn bên trong. Áp cho cả bố cục một cột dưới 860px. */
    grid-template-rows: 100%;
    height: min(680px, calc(100vh - 220px));
    min-height: 440px;
}

.chat-cot-ds {
    border-right: 1px solid var(--stone-300, #d6d3d1);
    overflow-y: auto;
    background: #fff;
}

.chat-hoi-thoai {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    padding: 12px 14px;
    border-bottom: 1px solid #f1efe9;
    transition: background .15s;
}
.chat-hoi-thoai:hover { background: #faf8f2; }
.chat-hoi-thoai.la-dang-mo { background: #f5f1e6; }

.chat-cot-tin {
    display: flex;
    flex-direction: column;
    min-width: 0;
    /* min-height: 0 là dòng giữ cho Ô GÕ TIN không biến mất. Đây là ô lưới overflow mặc định nên
       min-height:auto: danh sách tin dài quá chỗ là NỘI DUNG NONG CẢ CỘT cao hơn khung, thanh gửi
       tin bị đẩy xuống dưới viền và vẽ đè lên phần trang phía sau — cuộn trang cũng không với tới
       (tràn kiểu paint không cộng vào chiều cao tài liệu). Có min-height:0 thì cột bị ghim đúng
       chiều cao khung, phần dài dồn vào .chat-than vốn có overflow-y:auto. Chủ dự án dính đúng ca
       này ngày 30/08: nhắn dăm câu là mất hộp chat. Cột trái không cần dòng này vì chính nó mang
       overflow-y:auto (overflow khác visible thì trình duyệt tự coi min-size là 0). */
    min-height: 0;
    background: #fff;
}

.chat-than {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--paper, #FAF6EE);
}

/* Bong bóng tin nhắn */
.chat-tin {
    max-width: 78%;
    padding: 9px 13px;
    border-radius: 2px;
    font-size: 13.5px;
    line-height: 1.55;
}
.chat-tin.cua-toi {
    align-self: flex-end;
    background: var(--navy-800, #122840);
    color: #fff;
}
.chat-tin.cua-ho {
    align-self: flex-start;
    background: #fff;
    border: 1px solid #e5e1d8;
    color: #292524;
}
/* Tin của mình bị chặn: người nhận không thấy, nên vẽ như một lời báo chứ không như tin thường */
.chat-tin.bi-chan {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
}
.chat-luc {
    font-size: 10px;
    opacity: .65;
    margin-top: 4px;
}

.chat-anh {
    display: block;
    max-width: 260px;
    max-height: 320px;
    border-radius: 2px;
    margin-top: 6px;
    cursor: default;
}

.chat-tep {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    margin-top: 6px;
    padding: 8px 11px;
    border-radius: 2px;
    background: rgba(125, 125, 125, .12);
    font-size: 12px;
    font-weight: 700;
    text-align: left;
}
.chat-tin.cua-toi .chat-tep { background: rgba(255, 255, 255, .14); color: #fff; }

.chat-o-go {
    resize: none;
    max-height: 110px;
    min-height: 40px;
}

/* Nút quay lại danh sách chỉ có nghĩa trên màn hẹp một cột */
.chat-nut-lui { display: none; }

@media (max-width: 860px) {
    .chat-khung { grid-template-columns: 1fr; height: calc(100vh - 180px); }
    /* Một cột: danh sách và khung tin thay phiên nhau chiếm trọn */
    .chat-cot-tin { display: none; }
    .chat-khung.dang-mo-tin .chat-cot-tin { display: flex; }
    .chat-khung.dang-mo-tin .chat-cot-ds { display: none; }
    .chat-nut-lui { display: inline-flex; }
    .chat-tin { max-width: 88%; }
}