/* Giao diện chat kiểu Messenger — dùng chung cho khách và admin */
.kc { --kc-green: #3f6b4a; --kc-green-dark: #243c2b; --kc-bg: #f0f2f5; --kc-line: #e3d9c4;
    font-family: "Be Vietnam Pro", system-ui, sans-serif; color: #2f332c; }
.kc [hidden] { display: none !important; }
.kc button { font: inherit; cursor: pointer; }

.kc-thread { display: flex; flex-direction: column; gap: 3px; overflow-y: auto; padding: 12px; background: #fff; flex: 1; min-height: 0; }
.kc-empty { margin: auto; text-align: center; color: #6b7280; font-size: 14px; padding: 16px; }
.kc-row { display: flex; align-items: flex-end; gap: 6px; max-width: 100%; }
.kc-row.me { justify-content: flex-end; }
.kc-avatar { width: 28px; height: 28px; border-radius: 50%; flex: none; object-fit: cover; background: var(--kc-bg); }
.kc-avatar.ghost { visibility: hidden; }
.kc-bubble { max-width: 75%; padding: 8px 12px; border-radius: 18px; font-size: 14.5px; line-height: 1.4;
    background: var(--kc-bg); color: #1c1e21; white-space: pre-wrap; overflow-wrap: anywhere; }
.kc-row.me .kc-bubble { background: var(--kc-green); color: #fff; }
.kc-time { text-align: center; font-size: 11px; color: #8a8d91; margin: 8px 0 4px; }

.kc-form { display: flex; align-items: flex-end; gap: 8px; padding: 10px; border-top: 1px solid var(--kc-line); background: #fff; }
.kc-input { flex: 1; resize: none; max-height: 96px; border: none; background: var(--kc-bg); border-radius: 20px;
    padding: 9px 14px; font: inherit; font-size: 14.5px; outline: none; }
.kc-input:focus { box-shadow: 0 0 0 2px rgba(63, 107, 74, .35); }
.kc-send { width: 38px; height: 38px; flex: none; border: none; border-radius: 50%; background: var(--kc-green); color: #fff; display: grid; place-items: center; }
.kc-send:disabled { opacity: .4; cursor: default; }
.kc-send svg { width: 18px; height: 18px; fill: currentColor; }
.kc-error { color: #b3382c; font-size: 12px; padding: 0 12px 6px; background: #fff; }

/* Cửa sổ chat của khách */
.kc-fab { position: fixed; right: 18px; bottom: 18px; z-index: 900; width: 58px; height: 58px; border: none; border-radius: 50%;
    background: var(--kc-green); color: #fff; display: grid; place-items: center; box-shadow: 0 6px 18px rgba(0, 0, 0, .28); }
.kc-fab:hover { background: var(--kc-green-dark); }
.kc-fab svg { width: 28px; height: 28px; fill: currentColor; }
.kc-badge { position: absolute; top: -2px; right: -2px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
    background: #e0245e; color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.kc-panel { position: fixed; right: 18px; bottom: 90px; z-index: 901; width: 350px; height: min(520px, calc(100dvh - 110px));
    display: flex; flex-direction: column; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 10px 40px rgba(0, 0, 0, .28); }
.kc-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--kc-green-dark); color: #fff; }
.kc-head img { width: 38px; height: 38px; border-radius: 50%; }
.kc-head strong { display: block; font-size: 15px; }
.kc-head small { opacity: .8; font-size: 12px; }
.kc-head .kc-close { margin-left: auto; background: none; border: none; color: #fff; font-size: 24px; line-height: 1; padding: 4px 8px; }
.kc-name { padding: 8px 10px; background: #fffdf8; border-bottom: 1px solid var(--kc-line); }
.kc-name input { width: 100%; border: 1px solid var(--kc-line); border-radius: 16px; padding: 6px 12px; font: inherit; font-size: 13px; }
@media (max-width: 480px) {
    .kc-panel { right: 0; bottom: 0; width: 100%; height: 100dvh; border-radius: 0; }
    .kc-fab { right: 14px; bottom: 76px; }
}

/* Hộp thư của admin */
.kc-inbox { display: grid; grid-template-columns: 300px 1fr; height: min(640px, calc(100dvh - 190px)); min-height: 420px;
    background: #fff; border: 1px solid var(--kc-line); border-radius: 8px; overflow: hidden; }
.kc-list { overflow-y: auto; border-right: 1px solid var(--kc-line); }
.kc-conv { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: none; background: none; text-align: left; border-bottom: 1px solid #f1ece0; }
.kc-conv:hover { background: #f7f3e9; }
.kc-conv.active { background: #edf5ea; }
.kc-conv .kc-ava { width: 42px; height: 42px; border-radius: 50%; flex: none; background: var(--kc-green); color: #fff; display: grid; place-items: center; font-weight: 700; }
.kc-conv-main { min-width: 0; flex: 1; }
.kc-conv-top { display: flex; justify-content: space-between; gap: 6px; }
.kc-conv-name { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kc-conv-time { font-size: 11px; color: #8a8d91; flex: none; }
.kc-conv-last { font-size: 13px; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kc-conv.unread .kc-conv-name, .kc-conv.unread .kc-conv-last { color: #000; font-weight: 700; }
.kc-dot { width: 10px; height: 10px; border-radius: 50%; background: #1877f2; flex: none; }
.kc-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.kc-pane-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--kc-line); }
.kc-pane-head strong { flex: 1; }
.kc-back { display: none; background: none; border: none; font-size: 20px; padding: 0 6px; }
.kc-del { background: none; border: 1px solid var(--kc-line); border-radius: 6px; color: #b3382c; padding: 4px 10px; font-size: 13px; }
.kc-placeholder { margin: auto; color: #6b7280; padding: 16px; text-align: center; }
@media (max-width: 720px) {
    .kc-inbox { grid-template-columns: 1fr; }
    .kc-inbox .kc-pane { display: none; }
    .kc-inbox.open .kc-list { display: none; }
    .kc-inbox.open .kc-pane { display: flex; }
    .kc-back { display: block; }
}
.kc-tabs { display: flex; gap: 6px; margin-bottom: 16px; }
.kc-tab { padding: 8px 18px; border: 1px solid var(--kc-line); border-radius: 999px; background: #fff; font-weight: 600; color: #243c2b; }
.kc-tab.active { background: #3f6b4a; color: #fff; border-color: #3f6b4a; }
.kc-tab .kc-badge { position: static; display: inline-grid; margin-left: 6px; vertical-align: middle; }