/* =============================================================================
   KHUNG CHAT VỚI SHOP — lớp giao diện

   Khoác theo bản thiết kế "Chatbox" (canvas HL): đầu khung nền gradient vàng,
   thân nền kem, bong bóng khách vàng nằm phải / bong bóng shop trắng nằm trái,
   hàng câu hỏi nhanh cuộn ngang, ô soạn có nút ảnh + nút gửi tròn góc.

   Phân chia trách nhiệm: phần nhìn nằm ở theme (file này + partials/hl-chat.blade.php
   + js/hl-chat.js) vì nó phải dùng chung bộ biến màu --hl-* trong hl-theme.css và đi
   chung đường publish asset của theme. Phần dữ liệu (bảng, model, trang admin, route
   ajax) nằm ở plugin platform/plugins/hl-chat.

   Z-INDEX — đọc trước khi sửa:
   Widget Zalo của SDK dùng 2147483644, lớp phủ để kéo nút Zalo (js/hl-zalo-drag.js)
   dùng 2147483645. Khung chat phải nằm TRÊN cả hai, nếu không lớp phủ kéo-thả sẽ nuốt
   cú bấm của khách khi hai thứ chồng nhau ở góc dưới phải.
   ============================================================================= */

.hl-chat {
    position: fixed;
    inset-inline-end: 26px;
    bottom: 26px;
    z-index: 2147483646;
    width: 394px;
    max-width: calc(100vw - 32px);
    display: flex;
    flex-direction: column;
}

.hl-chat[hidden] { display: none; }

.hl-chat__panel {
    display: flex;
    flex-direction: column;
    height: 600px;
    max-height: calc(100vh - 120px);
    background: #fff;
    border: 1px solid #F3E6C8;
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(60, 44, 10, .28);
    overflow: hidden;
    transform-origin: bottom right;
    animation: hl-chat-in .32s cubic-bezier(.2, .9, .3, 1.15) both;
}

@keyframes hl-chat-in {
    from { opacity: 0; transform: translateY(16px) scale(.97); }
    to   { opacity: 1; transform: none; }
}

/* ---------- Đầu khung ---------- */

.hl-chat__head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: linear-gradient(135deg, #FFD874, #F4AE2A);
}

.hl-chat__avatar {
    position: relative;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 3px 10px rgba(120, 80, 0, .16);
    color: var(--hl-gold-ink, #8A4E06);
}
.hl-chat__avatar img { width: 28px; height: auto; display: block; }

/* Chấm xanh "đang trực" — viền trùng màu nền gradient để trông như khoét lỗ */
.hl-chat__avatar::after {
    content: '';
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 13px;
    height: 13px;
    border-radius: 999px;
    background: #B9A88A;
    border: 2.5px solid #FFD16A;
}
.hl-chat.is-open-hours .hl-chat__avatar::after { background: #2E7D5B; }

.hl-chat__titles { flex: 1 1 auto; min-width: 0; }

.hl-chat__title {
    display: block;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.3;
    color: #3D2C08;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hl-chat__status {
    display: block;
    padding-top: 2px;
    font-size: 11px;
    font-weight: 600;
    color: #6B4405;
}

/* Nút gọi + nút thu nhỏ ở đầu khung */
.hl-chat__act {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 11px;
    background: rgba(255, 255, 255, .6);
    color: #4A3208;
    display: grid;
    place-items: center;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s ease;
}
.hl-chat__act:hover { background: #fff; color: #4A3208; }

/* ---------- Thân khung ---------- */

.hl-chat__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 14px 14px 6px;
    display: flex;
    flex-direction: column;
    gap: 11px;
    background: var(--hl-surface-2, #FFFCF4);
}

/* Con lăn mảnh cho hợp khung nhỏ */
.hl-chat__body { scrollbar-width: thin; scrollbar-color: #E8DCC2 transparent; }
.hl-chat__body::-webkit-scrollbar { width: 6px; }
.hl-chat__body::-webkit-scrollbar-thumb { background: #E8DCC2; border-radius: 999px; }

.hl-chat__day {
    align-self: center;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--hl-bg, #F3EBDA);
    color: var(--hl-muted-2, #756B59);
    font-size: 10.5px;
    font-weight: 700;
}

/* Khối giới thiệu đầu hội thoại */
.hl-chat__note {
    display: flex;
    gap: 11px;
    padding: 13px 14px;
    border: 1px solid #F0DFB8;
    border-radius: 18px;
    background: var(--hl-gold-soft, #FFF3D6);
}
.hl-chat__note-ic {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 11px;
    background: #fff;
    display: grid;
    place-items: center;
    color: #C9970F;
}
/* display:block bắt buộc ở cả hai — cùng lỗi với .hl-chat__sender: hai span này nằm chung
   một thẻ bọc nên nếu để inline thì tiêu đề chảy tiếp vào đoạn nội dung thành một khối chữ
   liền ("Nhân viên đang trực Nhắn giúp shop nội dung…"), và padding-top cũng vô tác dụng. */
.hl-chat__note-tt { display: block; font-size: 12px; font-weight: 800; line-height: 1.45; color: var(--hl-gold-ink, #8A4E06); }
.hl-chat__note-tx { display: block; padding-top: 3px; font-size: 11.5px; line-height: 1.6; color: var(--hl-ink-3, #6E6455); }

/* ---------- Bong bóng tin nhắn ---------- */

.hl-chat__row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.hl-chat__row--guest { align-items: flex-end; }
.hl-chat__row--staff,
.hl-chat__row--system { align-items: flex-start; }

.hl-chat__msg {
    max-width: 290px;
    padding: 11px 13px;
    font-size: 12.5px;
    line-height: 1.7;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.hl-chat__row--guest .hl-chat__msg {
    border: 1px solid #F3C349;
    border-radius: 16px 16px 5px 16px;
    background: linear-gradient(135deg, #FFD874, #F7C047);
    color: #3D2C08;
}

.hl-chat__row--staff .hl-chat__msg {
    border: 1px solid var(--hl-line, #F0E7D5);
    border-radius: 16px 16px 16px 5px;
    background: #fff;
    color: #4A4132;
}

/* Câu tự động của hệ thống: trải ngang, viền đứt, nhạt hơn lời người thật */
.hl-chat__row--system { align-items: stretch; }
.hl-chat__row--system .hl-chat__msg {
    max-width: none;
    border: 1px dashed var(--hl-line-2, #E4DAC4);
    border-radius: 16px;
    background: #FFFDF6;
    color: var(--hl-ink-3, #6E6455);
    font-size: 11.5px;
    line-height: 1.65;
    text-align: center;
}

/* display:block là bắt buộc, không phải trang trí: thiếu nó thì tên nhân viên nằm chung
   dòng với nội dung tin ("HOÀNG LONGcó gì không anh") và margin-bottom cũng bị bỏ qua,
   vì margin dọc không có tác dụng trên phần tử inline. */
.hl-chat__sender {
    display: block;
    margin-bottom: 3px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--hl-link, #A8620A);
}

.hl-chat__text {
    display: block;
}

.hl-chat__meta {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 4px;
    font-size: 10px;
    color: var(--hl-muted-2, #756B59);
}
.hl-chat__meta svg { color: #2E7D5B; }

/* Ba chấm "đang gõ" */
.hl-chat__typing {
    align-self: flex-start;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 12px 15px;
    border: 1px solid var(--hl-line, #F0E7D5);
    border-radius: 16px 16px 16px 5px;
    background: #fff;
}
.hl-chat__typing span {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #C9970F;
    animation: hl-chat-dot 1.1s infinite;
}
.hl-chat__typing span:nth-child(2) { animation-delay: .15s; }
.hl-chat__typing span:nth-child(3) { animation-delay: .3s; }

@keyframes hl-chat-dot {
    0%, 60%, 100% { transform: translateY(0); opacity: .45; }
    30%           { transform: translateY(-4px); opacity: 1; }
}

/* ---------- Chân khung ---------- */

/* flex-shrink 1 + cuộn riêng: màn hình thấp (điện thoại cầm ngang, cửa sổ kéo thấp) thì
   chiều cao panel tụt xuống ~260px, mà riêng chân khung đã cần ~260px. Để 0 0 auto thì
   panel có overflow:hidden sẽ CẮT mất nút "Bắt đầu nhắn" và nút gửi, khách không bấm được
   và cũng không cuộn tới được. Cho nó co lại rồi tự cuộn thì tệ nhất cũng chỉ phải vuốt. */
.hl-chat__foot {
    flex: 0 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #fff;
    border-top: 1px solid #F5EBD3;
}

/* Ô báo lỗi đứng ngoài cả hai form nên lúc nào cũng hiện được — xem ghi chú ở blade.
   display:block bắt buộc: trước đây span này là flex-item của .hl-chat__intro nên được coi
   như block, ra ngoài .hl-chat__foot (block thường) thì nó trở lại inline và padding dọc
   không còn đẩy được gì. Hai form tự mang padding riêng, .hl-chat__foot thì không, nên ô
   lỗi phải tự thụt 12px cho thẳng hàng với chúng. */
.hl-chat__foot > .hl-chat__err {
    display: block;
    padding: 2px 12px 4px;
}

/* Hàng câu hỏi nhanh — cuộn ngang, giấu thanh cuộn */
.hl-chat__chips {
    display: flex;
    gap: 7px;
    padding: 10px 12px 4px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.hl-chat__chips::-webkit-scrollbar { display: none; }

.hl-chat__chip {
    flex: 0 0 auto;
    padding: 7px 13px;
    line-height: 1.35;
    border: 1px solid #F0D89A;
    border-radius: 11px;
    background: var(--hl-tile, #FFF7E3);
    color: var(--hl-gold-ink, #8A4E06);
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.hl-chat__chip:hover { background: #FFEFC7; border-color: #E8C87E; }

/* ---------- Form tên + số điện thoại ---------- */

.hl-chat__intro {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hl-chat__intro-note {
    margin: 0;
    font-size: 11.5px;
    line-height: 1.6;
    color: var(--hl-ink-3, #6E6455);
}

.hl-chat__field {
    width: 100%;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--hl-line, #F0E7D5);
    border-radius: 12px;
    background: var(--hl-surface-2, #FFFCF4);
    color: var(--hl-ink, #2B2418);
    font-family: inherit;
    font-size: 12.5px;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.hl-chat__field:focus { border-color: var(--hl-gold-2, #F0A202); box-shadow: 0 0 0 3px rgba(240, 162, 2, .16); }
.hl-chat__field.is-bad { border-color: var(--hl-price, #C4472F); box-shadow: 0 0 0 3px rgba(196, 71, 47, .14); }

.hl-chat__err {
    font-size: 11px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--hl-price, #C4472F);
}
.hl-chat__err:empty { display: none; }

.hl-chat__go {
    height: 40px;
    border: 0;
    border-radius: 13px;
    background: var(--hl-grad, linear-gradient(135deg, #FFC53D, #F0A202));
    color: #3D2C08;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(196, 145, 20, .3);
    transition: filter .15s ease;
}
.hl-chat__go:hover { filter: brightness(1.04); }
.hl-chat__go[disabled] { opacity: .6; cursor: default; box-shadow: none; }

/* ---------- Ô soạn tin ---------- */

.hl-chat__compose {
    display: flex;
    align-items: flex-end;
    gap: 9px;
    padding: 6px 12px 12px;
}

/* Nút gọi / nhắn Zalo cạnh ô nhập — thay cho nút ảnh trong bản vẽ, vì
   khung chat này chưa nhận tệp đính kèm, nút bấm không làm gì sẽ gây khó chịu. */
.hl-chat__tool {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border: 1px solid var(--hl-line, #F0E7D5);
    border-radius: 12px;
    background: var(--hl-surface-2, #FFFCF4);
    color: var(--hl-muted, #8A7A5E);
    display: grid;
    place-items: center;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}
.hl-chat__tool:hover { background: var(--hl-gold-soft, #FFF3D6); color: var(--hl-gold-ink, #8A4E06); }

.hl-chat__input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 38px;
    max-height: 110px;
    padding: 9px 13px;
    border: 1px solid var(--hl-line, #F0E7D5);
    border-radius: 13px;
    background: var(--hl-surface-2, #FFFCF4);
    color: var(--hl-ink, #2B2418);
    font-family: inherit;
    font-size: 12.5px;
    line-height: 1.55;
    resize: none;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.hl-chat__input:focus { border-color: var(--hl-gold-2, #F0A202); box-shadow: 0 0 0 3px rgba(240, 162, 2, .16); }

.hl-chat__send {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 13px;
    background: var(--hl-grad, linear-gradient(135deg, #FFC53D, #F0A202));
    color: #3D2C08;
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(196, 145, 20, .3);
    transition: filter .15s ease;
}
.hl-chat__send:hover { filter: brightness(1.04); }
.hl-chat__send[disabled] { opacity: .55; cursor: default; box-shadow: none; }

/* ---------- Máy nhỏ: trải hết màn ---------- */

@media (max-width: 575px) {
    .hl-chat {
        inset-inline-start: 0;
        inset-inline-end: 0;
        top: 0;
        bottom: 0;
        width: auto;
        max-width: none;
    }
    .hl-chat__panel {
        height: 100%;
        max-height: none;
        border: 0;
        border-radius: 0;
    }
    .hl-chat__msg { max-width: 265px; font-size: 12px; }
    .hl-chat__body { padding: 12px 12px 6px; gap: 10px; }
}

/* ---------- Màn hình thấp: điện thoại cầm ngang ---------- */

/* Cầm ngang thì bề NGANG ~740-850px nên không rơi vào luật máy nhỏ ở trên, mà chiều CAO chỉ
   còn ~380px → max-height: calc(100vh - 120px) ép panel xuống ~260px, ít hơn cả chiều cao
   chân khung. Ngưỡng 520px đủ thấp để không đụng laptop 1366x768 (vùng nhìn ~600-660px). */
@media (max-height: 520px) {
    .hl-chat {
        inset-inline-start: 0;
        inset-inline-end: 0;
        top: 0;
        bottom: 0;
        width: auto;
        max-width: none;
    }
    .hl-chat__panel {
        height: 100%;
        max-height: none;
        border: 0;
        border-radius: 0;
    }
    /* Ở đây khung đã trải hết màn nên chân khung (~110px) luôn vừa: cho nó giữ nguyên chiều
       cao và để MÌNH vùng tin nhắn co lại. Nếu để cả hai cùng co theo tỉ lệ như luật chung
       thì chân khung bị ép xuống ~86px và khách phải vuốt trong đó mới thấy nút gửi. */
    .hl-chat__foot { flex-shrink: 0; }

    /* Gọn lại để nhường chỗ cho vùng tin nhắn, vốn chỉ còn vài chục pixel */
    .hl-chat__head { padding: 9px 14px; }
    .hl-chat__avatar { flex-basis: 34px; width: 34px; height: 34px; }
    .hl-chat__body { padding: 10px 12px 4px; gap: 8px; }
    .hl-chat__chips { padding: 7px 12px 3px; }
    .hl-chat__intro { padding: 9px 12px; gap: 6px; }
    .hl-chat__compose { padding: 4px 12px 9px; }
}

@media (prefers-reduced-motion: reduce) {
    .hl-chat__panel { animation: none; }
    .hl-chat__typing span { animation: none; opacity: .6; }
}