/* ===== RESET & TOKENS ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg:       #f5f6fa;
  --surface:  #ffffff;
  --panel:    #f9fafb;
  --hover:    #f3f4f8;
  --line:     #e8eaef;
  --ink:      #111827;
  --sub:      #4b5563;
  --muted:    #9ca3af;
  --accent:   #dc2626;
  --accent-h: #b91c1c;
  --accent-s: #fef2f2;
  /* Màu riêng cho viền focus input/select — KHÔNG dùng đỏ (--accent) để tránh nhìn giống báo lỗi
     khi người dùng chỉ đang bấm vào 1 ô, chưa lưu/chưa có gì sai. */
  --focus:    #2563eb;
  --focus-s:  rgba(37,99,235,.12);
  --ok:       #16a34a;
  --ok-s:     #dcfce7;
  --warn:     #d97706;
  --warn-s:   #fef3c7;
  --danger:   #ea580c;
  --danger-s: #ffedd5;
  --bot-bg:   #fef2f2;
  --bot-ink:  #b91c1c;
  --r:        10px;
  --r-sm:     7px;
  --shadow-s: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
  --shadow:   0 4px 16px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04);
  --shadow-l: 0 8px 32px rgba(0,0,0,.1);
}
/* 100vh trên mobile tính theo viewport LỚN NHẤT có thể (không tính thanh địa chỉ/bàn phím ảo đang
   che) - khi bàn phím ảo mở lên (VD: đang gõ email/mật khẩu ở trang đăng nhập), phần dưới trang
   (nút "Đăng nhập") có thể bị đẩy ra ngoài vùng nhìn thấy/chạm được thật. 100dvh tính đúng theo
   viewport ĐANG hiển thị thật, sửa đúng lỗi "bấm nút không phản hồi" hay gặp trên điện thoại. Khai
   100vh trước làm fallback cho trình duyệt cũ chưa hỗ trợ dvh (sẽ bị 100dvh ghi đè nếu hỗ trợ). */
body { margin: 0; font-family: -apple-system, "Inter", "Segoe UI", sans-serif; background: var(--bg); color: var(--ink); height: 100vh; height: 100dvh; font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
#app { height: 100vh; height: 100dvh; display: flex; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
hr { border: none; border-top: 1px solid var(--line); }
::placeholder { color: var(--muted); }
::-webkit-scrollbar { width: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }

/* ===== ANIMATION ===== */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes fadeUpSm { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ===== MÀN HÌNH LOADING (loader "goo" 3 chấm) ===== */
.app-loader {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
  background: var(--bg);
  transition: opacity .45s ease, visibility .45s ease;
}
.app-loader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.goo-loader { position: relative; width: 200px; height: 200px; }
.goo-defs { position: absolute; width: 0; height: 0; }
.goo-container {
  width: 200px; height: 200px; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  filter: url("#goo");
  animation: goo-rotate 2s ease-in-out infinite;
}
.goo-dot { width: 70px; height: 70px; border-radius: 50%; position: absolute; inset: 0; margin: auto; }
.goo-dot-1 { background: #ffc400; animation: goo-1 2s ease infinite, goo-index 6s -2s ease infinite; }
.goo-dot-2 { background: #0051ff; animation: goo-2 2s ease infinite, goo-index 6s -4s ease infinite; }
.goo-dot-3 { background: #ff1717; animation: goo-3 2s ease infinite, goo-index 6s ease infinite; }
.app-loader-text { color: var(--muted); font-size: 14px; font-weight: 500; letter-spacing: .2px; }
@media (max-width: 480px) { .goo-loader { transform: scale(.75); } }

@keyframes goo-3 {
  20% { transform: scale(1); }
  45% { transform: translateY(-18px) scale(.45); }
  60% { transform: translateY(-90px) scale(.45); }
  80% { transform: translateY(-90px) scale(.45); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes goo-2 {
  20% { transform: scale(1); }
  45% { transform: translate(-16px, 12px) scale(.45); }
  60% { transform: translate(-80px, 60px) scale(.45); }
  80% { transform: translate(-80px, 60px) scale(.45); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes goo-1 {
  20% { transform: scale(1); }
  45% { transform: translate(16px, 12px) scale(.45); }
  60% { transform: translate(80px, 60px) scale(.45); }
  80% { transform: translate(80px, 60px) scale(.45); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes goo-rotate {
  55% { transform: translate(-50%, -50%) rotate(0deg); }
  80% { transform: translate(-50%, -50%) rotate(360deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes goo-index {
  0%, 100% { z-index: 3; }
  33.3% { z-index: 2; }
  66.6% { z-index: 1; }
}

/* ===== CHUYỂN TRANG & ENTRANCE ===== */
/* Nội dung chính fade nhẹ mỗi lần đổi trang (render() tạo lại .main-area). KHÔNG áp lên danh sách
   hội thoại / bong bóng tin nhắn vì chúng render lại khi có tin mới -> sẽ nhấp nháy. */
.main-area { animation: fadeIn .26s ease; }
.auth-card { animation: fadeUp .36s cubic-bezier(.2,.7,.3,1) both; }
.coming-soon, .empty-state, .empty-placeholder { animation: fadeUp .34s ease both; }

/* ===== BUTTONS ===== */
button { font: inherit; cursor: pointer; border: none; border-radius: var(--r-sm); padding: 8px 16px; background: var(--accent); color: #fff; font-size: 13px; font-weight: 500; transition: background .15s, box-shadow .15s, transform .08s; display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; flex-shrink: 0; }
button:hover { background: var(--accent-h); }
button:active:not(:disabled) { transform: scale(.96); }
button:disabled { opacity: .5; cursor: not-allowed; }
button.ghost { background: var(--surface); color: var(--sub); border: 1px solid var(--line); box-shadow: var(--shadow-s); }
button.ghost:hover { background: var(--hover); color: var(--ink); }
button.danger { background: var(--surface); color: var(--danger); border: 1px solid #fdba8c; box-shadow: var(--shadow-s); }
button.danger:hover { background: var(--danger-s); }
button.sm { padding: 5px 11px; font-size: 12px; }

/* ===== INPUTS ===== */
input, textarea, select {
  font: inherit; border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 9px 12px; width: 100%; background: var(--surface); color: var(--ink);
  transition: border-color .15s, box-shadow .15s; font-size: 13px;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px var(--focus-s); }
label { font-size: 12px; color: var(--sub); display: block; margin-bottom: 5px; font-weight: 500; }
.field { margin-bottom: 16px; }

/* ===== AUTH PAGES ===== */
.auth-bg {
  flex: 1; display: grid; place-items: center;
  /* grid-template-columns mặc định "none" -> track ngầm định tự co theo kích thước NỘI DUNG (auto/
     max-content), không theo container - khiến max-width:100% của .auth-card bên trong tham chiếu
     nhầm về chính kích thước tự nhiên của nó (vô tác dụng) thay vì viewport thật. minmax(0,1fr) ép
     track lấp đầy đúng chiều rộng container, để max-width:100% của card hoạt động đúng trên màn hình hẹp. */
  grid-template-columns: minmax(0, 1fr);
  background: linear-gradient(135deg, #fff0f0 0%, #fafafa 60%, #fff5f5 100%);
  /* Chừa lề 2 bên + cho cuộn dọc nếu nội dung cao hơn viewport (bàn phím ảo che bớt màn hình điện thoại) */
  padding: 20px 16px; box-sizing: border-box; overflow-y: auto;
  min-width: 0;
}
.auth-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  /* width cố định 400px tràn màn hình điện thoại (viewport phổ biến 360-390px) - giới hạn lại bằng
     max-width theo viewport, padding cũng giảm trên màn hình hẹp để không bị chật. */
  padding: 36px 40px; width: 400px; max-width: 100%; box-shadow: var(--shadow-l);
  box-sizing: border-box;
}
@media (max-width: 480px) {
  .auth-card { padding: 28px 20px; border-radius: 12px; }
}
.auth-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.auth-logo .logo-icon { width: 36px; height: 36px; border-radius: 9px; background: var(--accent); display: grid; place-items: center; font-size: 18px; box-shadow: 0 2px 8px rgba(220,38,38,.3); }
.auth-logo .logo-name { font-size: 20px; font-weight: 700; color: var(--ink); }
.auth-sub { color: var(--muted); font-size: 13px; margin-bottom: 28px; }
.auth-card button[type=submit] { width: 100%; padding: 11px; font-size: 14px; margin-top: 6px; border-radius: var(--r); box-shadow: 0 2px 8px rgba(220,38,38,.25); }
.auth-check { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: var(--sub); line-height: 1.5; margin-top: 14px; cursor: pointer; }
.auth-check input { width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; accent-color: var(--accent); }
.auth-check a { color: var(--accent); text-decoration: none; }
.auth-check a:hover { text-decoration: underline; }
.auth-err { background: var(--danger-s); border: 1px solid #fdba8c; color: var(--danger); font-size: 13px; padding: 10px 12px; border-radius: var(--r-sm); margin-top: 12px; }
.auth-footer { text-align: center; margin-top: 20px; color: var(--muted); font-size: 13px; }
.auth-divider { margin: 20px 0; }
.auth-ok-msg { background: #f0fdf4; border: 1px solid #86efac; color: #166534; font-size: 13px; padding: 10px 12px; border-radius: var(--r-sm); margin-top: 12px; }
.auth-hint { font-size: 12px; color: var(--muted); margin-top: 6px; }
.reset-link-copy { display: flex; gap: 8px; margin-top: 8px; }
.reset-link-copy input { flex: 1; font-size: 12px; padding: 8px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg); color: var(--ink); min-width: 0; }
.reset-link-copy button { padding: 8px 14px; font-size: 12px; white-space: nowrap; }
.reset-popup-overlay { position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1000;display:flex;align-items:center;justify-content:center;animation:fadeIn .15s ease;padding:20px;overflow-y:auto; }
/* max-height + overflow-y: modal có thể dài hơn màn hình (nhiều field, hoặc bàn phím ảo che bớt trên
   điện thoại) - không có 2 dòng này thì phần cuối modal (VD nút Gửi) có thể nằm ngoài vùng chạm được. */
.reset-popup { background:var(--surface);border-radius:var(--r);padding:24px;width:420px;max-width:90vw;max-height:calc(100vh - 40px);overflow-y:auto;box-shadow:0 8px 32px rgba(0,0,0,.18);animation:popIn .18s ease; }
/* font-size < 16px khiến Safari iOS tự zoom cả trang khi bấm vào ô nhập - riêng trang auth (nơi
   khách lạ/nhân viên mới hay vào lần đầu bằng điện thoại) tăng lên 16px để tránh zoom giật cục. */
.auth-card input { font-size: 16px; }
/* Nút hiện/ẩn mật khẩu - đỡ gõ mù trên điện thoại, dễ gõ sai không biết mình gõ gì. */
.pw-field { position: relative; }
.pw-field input { padding-right: 40px; }
.pw-toggle {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  background: transparent; box-shadow: none; color: var(--muted); padding: 6px; border-radius: 6px;
}
.pw-toggle:hover { background: var(--hover); color: var(--ink); }
.pw-toggle i { font-size: 16px; }

/* ===== SIDEBAR ===== */
.sidebar {
  width: 208px; flex-shrink: 0; background: var(--surface); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; height: 100vh; height: 100dvh;
  transition: width .22s cubic-bezier(.4, 0, .2, 1);
}
/* App desktop (Electron) ẩn titlebar mặc định — dùng vùng logo này để kéo cửa sổ thay thế. */
.sidebar-logo { padding: 13px 14px 11px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); -webkit-app-region: drag; }
.brand-badge { width: 24px; height: 24px; border-radius: 7px; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; flex-shrink: 0; }
.brand-bar-text { font-family: -apple-system, "Inter", "Segoe UI", sans-serif; font-size: 13.5px; font-weight: 600; letter-spacing: 0; color: var(--ink); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-nav { flex: 1; padding: 8px 8px; overflow-y: auto; }
.nav-item {
  display: flex; align-items: center; justify-content: flex-start; gap: 10px; padding: 7px 10px; border-radius: var(--r-sm);
  color: var(--sub); cursor: pointer; font-size: 13px; font-weight: 500; transition: background .12s, color .12s;
  margin-bottom: 1px; border: none; background: transparent; width: 100%; text-align: left;
}
.nav-item:hover { background: var(--hover); color: var(--ink); }
.nav-item.active { background: var(--accent-s); color: var(--accent); font-weight: 600; }
/* Khung cố định cho icon để cột icon thẳng hàng bất kể glyph. LƯU Ý: justify-content:flex-start ở
   trên KHÔNG được xoá - .nav-item là <button> nên bị dính rule "button { justify-content:center }"
   (căn giữa chữ cho nút thường), nếu thiếu dòng này thì icon+label bị căn giữa cả cụm trong hàng
   rộng 100%, khiến icon dịch trái nhiều/ít tùy độ dài tên mục (tên càng dài, icon càng lệch trái). */
.nav-item i { font-size: 16px; width: 18px; height: 18px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
.nav-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.soon-badge { font-size: 9px; font-weight: 700; color: var(--warn); background: var(--warn-s); padding: 1px 5px; border-radius: 8px; text-transform: uppercase; margin-left: 2px; }

/* ===== SIDEBAR THU GỌN ===== */
.sidebar-logo { position: relative; }
/* no-drag BẮT BUỘC: .sidebar-logo là vùng kéo cửa sổ (-webkit-app-region: drag) trong Electron;
   nếu không đặt no-drag thì click vào nút bị "nuốt" -> không mở rộng/thu gọn được trên app. */
.sidebar-collapse-btn { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: transparent; border: 1px solid var(--line); color: var(--muted); padding: 4px 6px; border-radius: 6px; box-shadow: none; -webkit-app-region: no-drag; }
.sidebar-collapse-btn:hover { background: var(--hover); color: var(--ink); }
.sidebar.collapsed { width: 64px; }
.sidebar.collapsed .brand-bar-text { display: none; }
.sidebar.collapsed .sidebar-logo { flex-direction: column; gap: 8px; justify-content: center; padding: 14px 8px 12px; }
.sidebar.collapsed .sidebar-collapse-btn { position: static; transform: none; margin: 0; }
.sidebar.collapsed .nav-item { justify-content: center; }
.sidebar.collapsed .nav-label { display: none; }
.sidebar.collapsed .user-card { justify-content: center; }
.sidebar.collapsed .user-info { display: none; }
.sidebar.collapsed .notif-btn, .sidebar.collapsed .logout-btn { display: none; }
/* Desktop (trên breakpoint tablet 1180px): khi thu gọn, xếp dọc avatar(Cài đặt) + chuông(thông báo)
   + đăng xuất thành các icon riêng để vẫn bấm được, thay vì ẩn đi. */
@media (min-width: 1181px) {
  .sidebar.collapsed .sidebar-user { padding: 8px 6px; }
  .sidebar.collapsed .user-card { flex-direction: column; gap: 6px; padding: 6px 4px; }
  .sidebar.collapsed .notif-btn,
  .sidebar.collapsed .logout-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 30px; padding: 0; font-size: 15px; }
}
.sidebar-user { padding: 7px 8px; border-top: 1px solid var(--line); }
.user-card { display: flex; align-items: center; gap: 8px; padding: 6px 9px; border-radius: var(--r-sm); }
.user-card.clickable { cursor: pointer; transition: background .12s; }
.user-card.clickable:hover { background: var(--hover); }
.user-card.active { background: var(--accent-s); }
.user-card.active .user-email { color: var(--accent); }
.user-email i { font-size: 11px; vertical-align: -1px; }

/* ===== KHU CÀI ĐẶT (hub) ===== */
.settings-hub { flex: 1; display: flex; overflow: hidden; }
.hub-nav { width: 200px; flex-shrink: 0; border-right: 1px solid var(--line); background: var(--surface); padding: 16px 8px; overflow-y: auto; }
.hub-title { font-size: 15px; font-weight: 700; padding: 4px 10px 12px; display: flex; align-items: center; gap: 7px; color: var(--ink); }
.hub-content { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.hub-content-inner { flex: 1; display: flex; overflow: hidden; min-width: 0; }
/* Chỉ hiện trên màn hình hẹp (xem @media cuối file) - quay lại danh sách tab từ nội dung 1 tab. */
.hub-back-btn { display: none; }

/* Trang Kịch bản: đánh số bước cho người mới làm theo tuần tự */
.step-chip { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 12px; font-weight: 700; margin-right: 6px; vertical-align: -4px; }
.adv-details summary { cursor: pointer; font-size: 13px; color: var(--sub); padding: 4px 0; list-style: none; }
.adv-details summary::-webkit-details-marker { display: none; }
.adv-details summary i { vertical-align: -2px; margin-right: 4px; }
.adv-details summary:hover { color: var(--ink); }
.adv-details { margin-bottom: 12px; }
.user-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.user-info { flex: 1; min-width: 0; }
.user-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-email { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.logout-btn { background: transparent; border: none; padding: 5px 7px; color: var(--muted); cursor: pointer; border-radius: 6px; font-size: 13px; flex-shrink: 0; }
.logout-btn:hover { background: var(--danger-s); color: var(--danger); }
.notif-btn { background: transparent; border: none; padding: 5px 7px; color: var(--accent); cursor: pointer; border-radius: 6px; font-size: 13px; flex-shrink: 0; }
.notif-btn:hover { background: var(--accent-s); }
.notif-btn.notif-off { color: var(--muted); }
#btn-mute-conv.notif-off { color: var(--danger); border-color: var(--danger-s); }

/* Nút tắt thông báo cho RIÊNG 1 hội thoại (mute per-conversation): sáng lên khi đang tắt để dễ thấy. */
.ghost.sm.muted-on { color: var(--warn); }
.cas-act.muted-on { color: var(--warn); font-weight: 600; }
.conv-muted-icon { color: var(--muted); font-size: 12px; vertical-align: -1px; }

/* Nút "đánh dấu đã đọc / không cần trả lời": xanh khi đã đánh dấu (đã chốt xử lý tay). */
.ghost.sm.read-marked { color: var(--ok); }
.cas-act.read-marked { color: var(--ok); font-weight: 600; }
/* Nút này để CẠNH công tắc bot (không gom vào hàng icon phụ hay nút "⋯") + có nhãn chữ + viền cho
   nổi bật, tránh bị lẫn/khuất khiến người dùng không thấy. */
.mark-read-btn { border: 1px solid var(--line); color: var(--sub); white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; }
.mark-read-btn:hover { background: var(--ok-s); color: var(--ok); border-color: var(--ok); }
.mark-read-btn.read-marked { color: var(--ok); border-color: var(--ok); background: var(--ok-s); }
.mark-read-btn i { font-size: 15px; }

/* ===== MAIN AREA ===== */
.main-area { flex: 1; display: flex; overflow: hidden; }
/* padding-top 40px: chỉ khi chạy trong app desktop (Electron ẩn titlebar, xem body.is-electron ở app.js)
   để chừa chỗ cho nút thu nhỏ/đóng của Windows — không áp dụng khi mở qua trình duyệt thường (link ngrok).
   Nền trắng (khớp màu titleBarOverlay) để dải trên cùng liền mạch, không bị rời thành khung nổi riêng. */
body.is-electron .main-area { padding-top: 40px; background: var(--surface); }

/* ===== INBOX ===== */
.inbox { flex: 1; display: flex; overflow: hidden; }
.conv-list { width: 300px; flex-shrink: 0; border-right: 1px solid var(--line); background: var(--surface); display: flex; flex-direction: column; }
.conv-list-header { padding: 14px 12px 10px; border-bottom: 1px solid var(--line); }
.conv-search-row { display: flex; align-items: center; gap: 8px; }
.search-wrap { position: relative; display: flex; align-items: center; flex: 1; }
.search-wrap i { position: absolute; left: 12px; color: var(--muted); font-size: 15px; pointer-events: none; }
.search-wrap input { padding-left: 34px; background: var(--panel); border-radius: 22px; }
/* Nút ⚙ mở panel "Lọc nâng cao" - nằm cuối hàng chip lọc nhanh, hiện ở MỌI cỡ màn. Chấm đỏ = đang
   có bộ lọc nâng cao khác mặc định (không hiện SỐ: hàng chip 2.3 ngay dưới đã liệt kê đủ). */
/* ⚙ là anh em của hàng chip, KHÔNG nằm trong nó: hàng chip cuộn ngang được, ⚙ thì phải luôn thấy. */
.quick-filter-row { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.quick-filter-row .quick-filter { flex: 1; min-width: 0; margin-top: 0; }
.filter-open-btn { display: flex; position: relative; flex-shrink: 0; width: 26px; height: 26px; padding: 0;
  align-items: center; justify-content: center; background: var(--panel); border: 1px solid var(--line);
  color: var(--sub); border-radius: 50%; box-shadow: none; }
.filter-open-btn i { font-size: 14px; }
.filter-open-btn.has-active { color: var(--accent); border-color: rgba(220,38,38,.25); background: var(--accent-s); }
.filter-open-btn.has-active::after { content: ""; position: absolute; top: -1px; right: -1px; width: 7px; height: 7px;
  background: var(--accent); border: 1.5px solid var(--surface); border-radius: 50%; }

/* ===== Panel "Lọc nâng cao" - popover neo dưới nút ⚙ (desktop); @media cuối file đổi thành bottom
   sheet trượt lên ở màn hẹp. Dùng chung markup, chỉ khác CSS. ===== */
.adv-filter-overlay { position: fixed; inset: 0; z-index: 900; opacity: 0; transition: opacity .18s; }
.adv-filter-overlay.open { opacity: 1; }
/* top/left/width được JS ghi đè theo rect thật của nút ⚙ lúc mở (xem openAdvancedFilter) - số ở đây
   chỉ là dự phòng khi không tìm thấy nút. */
.adv-filter-panel { position: absolute; top: 108px; left: 12px; width: 276px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 14px; padding: 14px; box-shadow: 0 12px 32px rgba(0,0,0,.18);
  transform: translateY(-6px); transition: transform .18s ease; max-height: 78vh; overflow-y: auto; }
.adv-filter-overlay.open .adv-filter-panel { transform: translateY(0); }
.adv-filter-head { font-size: 14px; margin-bottom: 14px; }
.adv-filter-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 4px; }
/* Segmented: 3 nút dính liền, loại trừ nhau - khác hẳn checkbox bên dưới để nhìn là biết chọn 1. */
.adv-seg { display: flex; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 2px; gap: 2px; }
.adv-seg-btn { flex: 1; background: transparent; color: var(--muted); border: none; padding: 5px 8px; font-size: 12px;
  font-weight: 600; border-radius: 6px; box-shadow: none; }
.adv-seg-btn:hover { color: var(--ink); }
.adv-seg-btn.active { background: var(--accent-s); color: var(--accent); }
.adv-checks { display: flex; flex-direction: column; gap: 2px; }
.adv-check { display: flex; align-items: center; gap: 8px; padding: 5px 4px; border-radius: 6px; cursor: pointer; font-size: 13px; color: var(--ink); }
.adv-check:hover { background: var(--hover); }
.adv-check input { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }
.adv-hint { margin-top: 8px; font-size: 11px; color: var(--muted); font-style: italic; }
/* ===== Bottom sheet dùng chung - còn openChatActionsSheet() (thao tác hội thoại trên mobile) xài,
   đừng gỡ theo panel lọc. ===== */
.filter-sheet-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 900; display: flex; align-items: flex-end; opacity: 0; transition: opacity .2s; }
.filter-sheet-overlay.open { opacity: 1; }
.filter-sheet { background: var(--surface); width: 100%; border-radius: 18px 18px 0 0; padding: 8px 16px calc(18px + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%); transition: transform .22s ease; max-height: 85vh; overflow-y: auto; }
.filter-sheet-overlay.open .filter-sheet { transform: translateY(0); }
.filter-sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; font-size: 15px; }
.filter-sheet-handle { width: 40px; height: 4px; border-radius: 2px; background: var(--line); margin: 6px auto 12px; }
/* Panel lọc ở desktop là popover, không phải sheet -> không có gì để kéo, giấu handle đi (màn hẹp
   bật lại ở @media cuối file). */
.adv-filter-panel .filter-sheet-handle { display: none; }
.filter-group { margin-bottom: 16px; }
.filter-group-label { font-size: 11px; font-weight: 700; color: var(--muted); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .4px; }
.conv-filter { display: flex; align-items: center; gap: 5px; margin-top: 8px; overflow-x: auto; scrollbar-width: none; }
.conv-filter::-webkit-scrollbar { display: none; }
/* 3 chip + ⚙ phải vừa đúng 1 hàng trong cột 300px, không phải cuộn ngang mới thấy hết số. Chỉ siết
   riêng hàng này (.filter-btn còn dùng ở trang khác, đổi chung sẽ lây). */
.quick-filter { gap: 4px; }
.quick-filter .filter-btn { padding: 4px 7px; }
/* Số trên chip lọc nhanh - ẩn khi n=0 (xem quickChip), >99 hiện "99+" kèm title số thật. */
.quick-count { font-weight: 700; opacity: .85; margin-left: 1px; }

/* Hàng chip "đang bật" (2.3) - chỉ mọc ra khi lọc nâng cao khác mặc định, mỗi chip gỡ được riêng. */
.active-filter-row { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.active-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--panel); color: var(--sub);
  border: 1px solid var(--line); padding: 2px 7px; font-size: 10px; font-weight: 500; border-radius: 20px; box-shadow: none; }
.active-chip:hover { background: var(--hover); color: var(--ink); }
.active-chip i { font-size: 10px; opacity: .6; }
.active-chip:hover i { opacity: 1; }
.active-chip-clear { margin-left: auto; background: none; border: none; box-shadow: none; color: var(--muted);
  font-size: 10px; font-weight: 600; padding: 2px 4px; text-decoration: underline; }
.active-chip-clear:hover { color: var(--accent); }
.conv-actions-row { display: flex; gap: 6px; margin-top: 8px; }
.conv-actions-row #btn-add-friend { flex: 1; justify-content: center; }
.filter-btn { background: transparent; color: var(--muted); border: 1px solid var(--line); padding: 4px 10px; font-size: 11px; border-radius: 20px; font-weight: 500; white-space: nowrap; flex-shrink: 0; }
.filter-btn:hover { background: var(--hover); color: var(--ink); }
.filter-btn.active { background: var(--accent-s); color: var(--accent); border-color: rgba(220,38,38,.25); }
.export-btn { margin-left: auto; padding: 4px 8px; text-decoration: none; }
/* Thanh chọn vai trò (nền tảng Vai trò - tab Vai trò & Kịch bản) */
.persona-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.persona-pill { background: var(--card); color: var(--muted); border: 1px solid var(--line); padding: 8px 14px; font-size: 13px; border-radius: 22px; font-weight: 600; white-space: nowrap; flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; }
.persona-pill:hover { background: var(--hover); color: var(--ink); }
.persona-pill.active { background: var(--accent-s); color: var(--accent); border-color: rgba(220,38,38,.25); }
.persona-pill.persona-add { border-style: dashed; }
.persona-default-badge { font-size: 10px; font-weight: 500; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 1px 7px; color: var(--muted); }
.conv-items { flex: 1; overflow-y: auto; }
.conv-item { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-bottom: 1px solid var(--line); cursor: pointer; transition: background .1s; }
.conv-item:hover { background: var(--hover); }
.conv-item.active { background: var(--accent-s); border-left: 2px solid var(--accent); }
/* Vừa trả lời xong nên đã rớt khỏi bộ lọc "Cần trả lời" - mờ đi báo "xong rồi" nhưng vẫn đứng yên
   tại chỗ để không đánh tụt cả danh sách dưới con trỏ (xem applySticky). */
.conv-item.fading { opacity: .5; }

/* Dòng cuối danh sách: spam đang bị ẩn / đang hiện (2.4) + dòng thu hẹp phạm vi tìm kiếm (4.3). */
.spam-note, .search-scope { padding: 10px 14px; font-size: 11px; color: var(--muted); text-align: center; }
.search-scope { text-align: left; border-bottom: 1px solid var(--line); background: var(--panel); }
.search-scope b { color: var(--sub); font-weight: 600; }
.linkish { background: none; border: none; box-shadow: none; padding: 0; font-size: inherit; font-weight: 600;
  color: var(--accent); text-decoration: underline; }

/* Toast + nút hoàn tác (5.1). */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 12px); z-index: 1000;
  display: flex; align-items: center; gap: 12px; background: var(--ink); color: var(--surface);
  padding: 10px 16px; border-radius: 10px; font-size: 13px; box-shadow: 0 8px 24px rgba(0,0,0,.24);
  opacity: 0; transition: opacity .2s, transform .2s; }
.toast.open { opacity: 1; transform: translate(-50%, 0); }
.toast-action { background: none; border: none; box-shadow: none; padding: 0; color: #fff; font-weight: 700;
  font-size: 13px; text-decoration: underline; }
/* Chat nhóm: danh sách đã bỏ badge chữ "Nhóm" nên icon góc avatar là thứ DUY NHẤT còn phân biệt
   nhóm với chat 1-1. Bọc ngoài vì .conv-avatar overflow:hidden (để cắt ảnh tròn) sẽ xén mất icon. */
.conv-avatar-wrap { position: relative; flex-shrink: 0; display: flex; }
.conv-avatar-group { position: absolute; right: -2px; bottom: -2px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--ok); color: #fff; border: 2px solid var(--surface); display: grid; place-items: center; }
.conv-avatar-group i { font-size: 8px; }
.conv-item.active .conv-avatar-group { border-color: var(--accent-s); }
.conv-avatar { position: relative; overflow: hidden; width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 15px; }
.conv-avatar-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.conv-item-main { flex: 1; min-width: 0; }
.conv-item-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3px; gap: 8px; }
.conv-item-name { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.conv-item-meta { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.conv-item-time { font-size: 11px; color: var(--muted); flex-shrink: 0; }
.conv-item-bottom { display: flex; align-items: center; gap: 6px; }
.conv-item-preview { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.conv-item-preview.typing { color: var(--accent); font-weight: 500; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.status-dot.bot { background: var(--focus); }
.status-dot.human { background: var(--warn); }
/* Dấu chấm "chưa đọc": chỉ hiện khi có tin khách mới hơn lần mở gần nhất; mở ra xem là mất. */
.status-dot.unread { background: var(--focus); }
.conv-item-channel { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 4px; }
.channel-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 20px; }
.channel-badge i { font-size: 11px; }
.channel-badge.oa { background: var(--accent-s); color: var(--accent); }
/* Tím riêng cho kênh "Cá nhân" - tránh trùng màu vàng/cam của nhãn trạng thái "Cần follow". */
.channel-badge.personal { background: #ede9fe; color: #7c3aed; }
.channel-badge.facebook { background: #e7f0ff; color: #1877f2; }
.channel-badge.group { background: var(--ok-s); color: var(--ok); }
.chat-header-info .name .channel-badge { vertical-align: 1px; margin-left: 4px; }

/* ===== CHAT ===== */
.chat-view { flex: 1; display: flex; flex-direction: column; background: var(--bg); }
.chat-empty { flex: 1; display: grid; place-items: center; }
.chat-empty-inner { text-align: center; color: var(--muted); }
.chat-empty-icon { font-size: 48px; margin-bottom: 12px; opacity: .4; line-height: 1; }
.chat-empty-icon i { font-size: 56px; }
.settings-section-title i, .connect-form-title i { margin-right: 6px; vertical-align: -2px; }
.logo-icon i { font-size: 18px; color: #fff; }
.logo-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.oa-avatar i { font-size: 20px; color: var(--accent); }
.empty-state .icon i, .empty-placeholder .icon i { font-size: 36px; opacity: .5; }
.chat-header { padding: 14px 20px; border-bottom: 1px solid var(--line); background: var(--surface); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; box-shadow: var(--shadow-s); }
/* nowrap giữ tên+badge và dòng ID mỗi thứ trên 1 hàng - ID Zalo dài 18 số hay bị xuống dòng khi vùng
   nút bên phải chiếm nhiều chỗ. KHÔNG đặt min-width:0 ở đây: để trình duyệt giữ đúng bề rộng tối thiểu
   bằng nội dung ID (min-content), cột này sẽ không co nhỏ hơn -> ID luôn hiện đủ trên 1 hàng, phần nút
   bên phải tự co/xuống hàng thay vì đè lên ID. */
.chat-header-info .name { font-weight: 600; font-size: 15px; white-space: nowrap; }
.chat-header-info .uid { font-size: 11px; color: var(--muted); margin-top: 1px; white-space: nowrap; }
.chat-header-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.contact-type-toggle { display: flex; background: var(--surface-2, var(--hover)); border-radius: var(--r-sm); padding: 2px; gap: 2px; flex-shrink: 0; }
.contact-type-toggle .ctt-btn { background: transparent; color: var(--sub); box-shadow: none; padding: 5px 10px; font-size: 12px; border-radius: calc(var(--r-sm) - 2px); white-space: nowrap; }
.contact-type-toggle .ctt-btn:hover { background: var(--hover); }
.contact-type-toggle .ctt-btn.active { background: var(--accent); color: #fff; }
/* Desktop: các thao tác phụ hiện inline như cũ (display:contents = bỏ wrapper khỏi layout); nút "⋯"
   ẩn. Mobile (xem @media): ẩn secondary, hiện "⋯" mở bottom sheet gom thao tác cho header gọn. */
.chat-actions-secondary { display: contents; }
.chat-more-btn { display: none; }
.cas-actions { display: flex; flex-direction: column; gap: 6px; }
.cas-act { width: 100%; justify-content: flex-start; gap: 10px; background: var(--panel); border: 1px solid var(--line); color: var(--ink); box-shadow: none; padding: 11px 14px; font-size: 14px; }
.cas-act:hover { background: var(--hover); }
.cas-act i { font-size: 17px; color: var(--muted); }
.bot-toggle-wrap { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--sub); margin-left: 8px; padding-left: 8px; border-left: 1px solid var(--line); white-space: nowrap; flex-shrink: 0; }
/* "Khóa cứng" hàng nút header chat: cố định bề rộng những phần tử đổi trạng thái để bấm nút KHÔNG làm
   hàng nút co giãn/dồn xuống dòng khác (renderChat dựng lại header mỗi lần bấm, header lại flex-wrap).
   - 2 select không co theo độ dài option đang chọn (bỏ width:auto ở JS, chốt cứng tại đây).
   - Nhãn mark-read & bot giữ nguyên chỗ dù đổi chữ ("Đánh dấu đã đọc"↔"Đã đọc", "Bot đang trả lời"↔
     "Người xử lý"). Ở tablet/mobile 2 select nằm trong .chat-actions-secondary vốn display:none, còn
     nhãn bot cũng bị media ẩn (display:none thắng) nên các rule này chỉ tác dụng ở desktop rộng. */
/* ===== Dropdown tự dựng cho 2 control "Bước pipeline" + "Vai trò AI" ở header chat =====
   Thay <select> gốc vì <select> gốc bị Windows/Chromium tự vẽ vệt DI CHUỘT/ĐANG CHỌN màu XANH, CSS
   không đè được. Dựng bằng div nên tô được vệt đó thành ĐỎ NHẠT (yêu cầu người dùng).
   Bề rộng cố định 168px để bấm KHÔNG làm hàng nút header co giãn (header flex-wrap, dựng lại mỗi lần bấm). */
.csel { position: relative; width: 168px; flex-shrink: 0; }
.csel-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 8px 11px; font: inherit; font-size: 13px; font-weight: 600; color: var(--accent);
  background: var(--surface); border: 1px solid rgba(220, 38, 38, .45); border-radius: var(--r-sm);
  cursor: pointer; box-shadow: none; }
.csel-btn:hover { background: var(--surface); }
.csel.open .csel-btn { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-s); }
.csel-cur { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csel-btn > i { font-size: 13px; flex-shrink: 0; color: var(--accent); transition: transform .15s ease; }
.csel.open .csel-btn > i { transform: rotate(180deg); }
.csel-menu { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 50;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
  box-shadow: var(--shadow); padding: 4px; max-height: 280px; overflow-y: auto; }
.csel-opt { padding: 8px 10px; border-radius: 6px; font-size: 13px; color: var(--ink);
  white-space: nowrap; cursor: pointer; }
/* Mọi mục nền TRẮNG; RÊ CHUỘT hoặc mục ĐANG CHỌN -> nền ĐỎ NHẠT + chữ đỏ (đúng yêu cầu). */
.csel-opt:hover { background: var(--accent-s); color: var(--accent); }
.csel-opt.selected { background: var(--accent-s); color: var(--accent); font-weight: 600; }
/* Bản thu gọn mobile vẫn dùng <select> gốc (bộ chọn OS tiện hơn khi chạm) - chỉ cho chữ đỏ đồng bộ. */
#cas-pipeline, #cas-persona { color: var(--accent); font-weight: 600; border-color: rgba(220, 38, 38, .45); }
#cas-pipeline option, #cas-persona option { color: var(--ink); font-weight: 500; }
#cas-pipeline option:checked, #cas-persona option:checked { color: var(--accent); font-weight: 600; }
.mark-read-label { display: inline-block; min-width: 92px; }
.bot-toggle-wrap span { display: inline-block; min-width: 96px; text-align: right; }
.switch { width: 38px; height: 21px; border-radius: 11px; background: var(--line); position: relative; cursor: pointer; transition: background .2s; flex-shrink: 0; }
.switch.on { background: var(--accent); }
.switch .dot { width: 15px; height: 15px; background: #fff; border-radius: 50%; position: absolute; top: 3px; left: 3px; transition: left .2s; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.switch.on .dot { left: 20px; }
/* Bong bóng chat theo phong cách app Zalo: khách bên trái nền trắng, mình bên phải nền xanh nhạt
   (#e5efff) chữ sẫm, nền khung chat xám xanh - để người quen dùng Zalo nhìn phát hiểu ngay. */
.bubble-wrap { display: flex; flex-direction: row; align-items: flex-end; gap: 8px; }
.bubble-wrap.user { justify-content: flex-start; }
.bubble-wrap.agent, .bubble-wrap.assistant { justify-content: flex-end; }
.bubble-wrap.group-first { margin-top: 8px; }
.bubble-col { display: flex; flex-direction: column; max-width: 68%; }
.bubble-wrap.user .bubble-col { align-items: flex-start; }
.bubble-wrap.agent .bubble-col, .bubble-wrap.assistant .bubble-col { align-items: flex-end; }
.msg-avatar { position: relative; overflow: hidden; width: 30px; height: 30px; border-radius: 50%; background: #7d96b5; color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 700; flex-shrink: 0; align-self: flex-start; }
.msg-avatar-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bubble { padding: 9px 13px; border-radius: 12px; font-size: 14px; line-height: 1.55; white-space: pre-wrap; word-wrap: break-word; box-shadow: 0 1px 1px rgba(0,0,0,.06); }
.bubble.user { background: #fff; color: #081b3a; border-top-left-radius: 4px; }
.bubble.assistant, .bubble.agent { background: #e5efff; color: #081b3a; border-top-right-radius: 4px; }
.bubble-meta { font-size: 11px; color: #8b9db3; margin-top: 3px; padding: 0 2px; }
.bubble-sender-name { font-size: 11.5px; font-weight: 600; color: #4a72c9; margin-bottom: 2px; padding: 0 2px; }
.bubble.bubble-img { padding: 4px; box-shadow: none; background: transparent; }
.bubble.bubble-img img { border: 1px solid var(--line); }
/* Bảng chọn sticker: ô tìm + lưới ảnh, cao cố định để không đẩy khung chat nhảy loạn khi có/không
   kết quả. Zalo không cho lấy bộ sticker của tài khoản nên bắt buộc phải tìm theo từ khóa. */
.sticker-picker { border: 1px solid var(--line); border-radius: 10px; background: #fff; margin-bottom: 8px; overflow: hidden; }
.sticker-picker-bar { display: flex; gap: 6px; align-items: center; padding: 8px; border-bottom: 1px solid var(--line); }
.sticker-picker-bar input { flex: 1; }
.sticker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; padding: 8px; height: 200px; overflow-y: auto; align-content: start; }
.sticker-hint { grid-column: 1 / -1; padding: 8px; font-size: 12.5px; color: #8b9db3; }
.sticker-hint.err { color: var(--danger); }
.sticker-item { padding: 4px; border: 1px solid transparent; border-radius: 8px; background: transparent; cursor: pointer; line-height: 0; }
.sticker-item:hover { border-color: var(--line); background: #f4f7fb; }
.sticker-item:disabled { opacity: .45; cursor: default; }
.sticker-item img { width: 100%; aspect-ratio: 1; object-fit: contain; }
/* Sticker: ảnh trần, không nền/viền/bóng - đúng kiểu Zalo (là biểu cảm, không phải ảnh gửi kèm). */
.bubble.bubble-sticker { padding: 0; box-shadow: none; background: transparent; }
.msg-sticker { width: 120px; height: 120px; object-fit: contain; display: block; }
/* Tin CHỈ gồm emoji: phóng to như Zalo/Messenger, bỏ nền bong bóng (xem bigEmojiCount). Cỡ giảm dần
   theo số emoji để 3 cái vẫn vừa khung. */
.bubble.bubble-emoji { padding: 0; box-shadow: none; background: transparent; }
.msg-bigemoji { display: inline-block; line-height: 1.15; }
.msg-bigemoji.e1 { font-size: 54px; }
.msg-bigemoji.e2 { font-size: 42px; }
.msg-bigemoji.e3 { font-size: 34px; }
/* "Nảy" khi sticker/emoji-lớn MỚI đến - chỉ chạy 1 lần cho tin mới (xem seenAnimKeys, class .pop-in chỉ
   gắn cho tin chưa nảy), không chạy lại mỗi lần renderMessages() dựng lại danh sách. */
@keyframes msgPopIn {
  0%   { transform: scale(.3);  opacity: 0; }
  55%  { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); }
}
.msg-sticker.pop-in, .msg-bigemoji.pop-in {
  animation: msgPopIn .38s cubic-bezier(.34, 1.56, .64, 1) both;
  transform-origin: center bottom;
}
/* Tôn trọng "giảm chuyển động" của hệ điều hành: tắt hẳn hiệu ứng nảy. */
@media (prefers-reduced-motion: reduce) {
  .msg-sticker.pop-in, .msg-bigemoji.pop-in { animation: none; }
}
/* Bảng chọn emoji: tabs nhóm + lưới emoji, chèn thẳng vào ô soạn. Dùng chung khu với bảng sticker. */
.emoji-picker { border: 1px solid var(--line); border-radius: 10px; background: #fff; margin-bottom: 8px; overflow: hidden; }
.emoji-picker-bar { display: flex; gap: 6px; align-items: center; justify-content: space-between; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.emoji-tabs { display: flex; gap: 2px; flex-wrap: wrap; }
.emoji-tab { border: none; background: transparent; font-size: 20px; line-height: 1; padding: 4px 7px; border-radius: 8px; cursor: pointer; }
.emoji-tab:hover { background: #f4f7fb; }
.emoji-tab.active { background: #e6f0ff; }
.emoji-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 2px; padding: 8px; height: 200px; overflow-y: auto; align-content: start; }
.emoji-item { border: none; background: transparent; font-size: 24px; line-height: 1; padding: 4px 0; border-radius: 8px; cursor: pointer; }
.emoji-item:hover { background: #f4f7fb; }
/* Tin đã thu hồi: chữ mờ, nghiêng - vẫn giữ chỗ để mạch hội thoại không bị hụt. */
.bubble.bubble-recalled { background: transparent; box-shadow: none; border: 1px dashed var(--line); }
.msg-recalled { display: inline-flex; align-items: center; gap: 5px; font-style: italic; color: #8b9db3; font-size: 13px; }
/* Nút thu hồi: ẩn cho tới khi rê chuột vào tin - thu hồi là thao tác hiếm và không thể hoàn tác,
   không đáng chiếm chỗ thường trực cạnh mọi bong bóng. */
.bubble-action { opacity: 0; padding: 4px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: transparent; border: none; color: #8b9db3; cursor: pointer; flex-shrink: 0; align-self: center; transition: opacity .15s, color .15s, background .15s; }
.bubble-action:hover { color: #d64545; background: rgba(214,69,69,.1); }
.bubble-wrap:hover .bubble-action { opacity: 1; }
.bubble-action:focus-visible { opacity: 1; }
/* Tin của mình nằm sát mép phải - nút phải nhảy sang TRÁI bong bóng, không thì lòi ra ngoài mép. */
.bubble-wrap.agent .bubble-action, .bubble-wrap.assistant .bubble-action { order: -1; }
.bubble.typing-bubble { padding: 12px 16px; }
.typing-dots { display: inline-flex; gap: 4px; align-items: center; }
.typing-dots span { width: 6px; height: 6px; border-radius: 50%; background: #6b8fc9; animation: typing-bounce 1.2s infinite ease-in-out; }
.typing-dots span:nth-child(2) { animation-delay: .15s; }
.typing-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes typing-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
.file-attachment-link { display: inline-flex; align-items: center; gap: 6px; text-decoration: underline; color: inherit; }
.chat-header-left { display: flex; align-items: center; gap: 10px; }
/* Chỉ hiện trên màn hình hẹp (xem @media cuối file) - quay lại danh sách hội thoại. */
.chat-back-btn { display: none; }
.chat-header-avatar { width: 40px; height: 40px; border-radius: 50%; background: #7d96b5; color: #fff; display: grid; place-items: center; font-size: 16px; font-weight: 700; flex-shrink: 0; }
.chat-composer { border-top: 1px solid var(--line); background: var(--surface); padding: 8px 16px 12px; position: relative; }
.composer-inner { display: flex; gap: 10px; align-items: flex-end; background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 8px 8px 8px 16px; transition: border-color .15s, box-shadow .15s; }
.composer-inner:focus-within { border-color: #0068ff; box-shadow: 0 0 0 3px rgba(0,104,255,.12); }
.composer-inner textarea { border: none; background: transparent; resize: none; height: 42px; padding: 6px 0 0; flex: 1; font-size: 14px; color: var(--ink); }
.composer-inner textarea:focus { outline: none; box-shadow: none; }
.composer-inner button { flex-shrink: 0; padding: 8px 16px; border-radius: 18px; background: #0068ff; }
.composer-inner button:hover { background: #0054d6; }
/* Thanh "Gợi ý trả lời của AI" trên ô soạn tin - chỉ hiện khi bot tắt & hội thoại có gợi ý (xem
   renderSuggestBar). Card nền nhạt viền accent, đủ nổi để nhân viên thấy nhưng không lấn ô soạn. */
.ai-suggest-bar { border: 1px solid rgba(220,38,38,.3); background: var(--accent-s); border-radius: 12px; padding: 8px 10px 10px; margin-bottom: 8px; }
.ai-suggest-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.ai-suggest-label { font-size: 12px; font-weight: 600; color: var(--accent); display: inline-flex; align-items: center; gap: 5px; }
.ai-suggest-x { background: transparent; border: none; color: var(--muted); cursor: pointer; padding: 2px 4px; border-radius: 6px; line-height: 0; font-size: 14px; }
.ai-suggest-x:hover { background: rgba(0,0,0,.06); color: var(--ink); }
.ai-suggest-text { font-size: 13.5px; line-height: 1.5; color: var(--ink); white-space: pre-wrap; word-wrap: break-word; max-height: 120px; overflow-y: auto; }
.ai-suggest-actions { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.ai-suggest-use { background: var(--accent); color: #fff; border: none; border-radius: 8px; padding: 6px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.ai-suggest-use:hover { background: #b91c1c; }
.ai-suggest-hint { font-size: 11.5px; color: var(--muted); }

/* ===== SETTINGS ===== */
.settings-page { flex: 1; overflow-y: auto; background: var(--bg); }
.settings-inner { max-width: 700px; margin: 0 auto; padding: 32px 24px; }
.page-hero { margin-bottom: 24px; }
.page-hero h1 { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.page-hero p { color: var(--muted); font-size: 13px; }
.settings-section { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 24px; margin-bottom: 16px; box-shadow: var(--shadow-s); }
.connection-card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.connection-card-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 20px; box-shadow: var(--shadow-s); flex-shrink: 0; }
.connection-card-title { font-size: 15px; font-weight: 700; }
.section-head { margin-bottom: 16px; }
.section-title { font-size: 14px; font-weight: 600; margin-bottom: 3px; }
.section-sub { font-size: 12px; color: var(--muted); }
.settings-section textarea { min-height: 280px; font-family: ui-monospace, Menlo, monospace; font-size: 12px; line-height: 1.65; background: var(--panel); }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.settings-section-title { font-size: 14px; font-weight: 600; margin-bottom: 3px; }
.settings-section-sub  { font-size: 12px; color: var(--muted); margin-bottom: 14px; }
select { appearance: auto; }
.save-bar { display: flex; align-items: center; gap: 12px; margin: 4px 0 24px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-s); }
.save-ok { font-size: 12px; color: var(--ok); display: flex; align-items: center; gap: 4px; background: var(--ok-s); padding: 6px 12px; border-radius: 20px; }
.gen-kb-section { border: 1.5px solid rgba(220,38,38,.2); background: linear-gradient(135deg,#fffafa 0%,#fff 100%); }
.gen-bar { display: flex; align-items: center; gap: 12px; margin-top: 4px; flex-wrap: wrap; }
.gen-bar button { background: linear-gradient(135deg, var(--accent) 0%, #f97316 100%); box-shadow: 0 2px 10px rgba(220,38,38,.3); }
.gen-bar button:hover { background: linear-gradient(135deg, var(--accent-h) 0%, #7c3aed 100%); }
.gen-bar #gen-status { font-size: 12px; }
/* Nút phụ (ghost) trong gen-bar giữ nền trắng - KHÔNG lấy gradient đỏ của nút chính (VD "nhập tay nhanh"). */
.gen-bar button.ghost { background: var(--surface); color: var(--sub); box-shadow: var(--shadow-s); }
.gen-bar button.ghost:hover { background: var(--hover); color: var(--ink); }
.req { color: var(--danger); }

/* ===== Bảng sản phẩm (tab Thông tin công ty) ===== */
.product-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 720px; }
.product-table th { text-align: left; font-size: 11px; color: var(--muted); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.product-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.product-table input { width: 100%; padding: 7px 9px; font-size: 13px; }
.product-empty { text-align: center; color: var(--muted); padding: 18px 8px; font-size: 13px; }
.product-img-cell { width: 152px; }
.product-thumb { width: 44px; height: 44px; border-radius: 8px; background: var(--panel); border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; margin-bottom: 5px; }
.product-thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-thumb i { font-size: 18px; color: var(--muted); }
.product-img-actions { display: flex; align-items: center; gap: 5px; }
.product-img-upload { flex-shrink: 0; }
.product-img-url { font-size: 11px !important; padding: 5px 7px !important; }
.product-row-actions { white-space: nowrap; width: 1%; }
.product-row-actions button { padding: 7px 9px; }

/* ===== COMING SOON PLACEHOLDER ===== */
.coming-soon { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--muted); gap: 6px; padding: 40px; }
.coming-soon-icon { font-size: 40px; color: var(--muted); margin-bottom: 6px; opacity: .6; }
.coming-soon h2 { font-size: 17px; font-weight: 700; color: var(--sub); }
.coming-soon p { font-size: 13px; }

/* ===== GUIDE PAGE ===== */
.guide-page { flex: 1; overflow-y: auto; background: var(--bg); }
.guide-inner { max-width: 780px; margin: 0 auto; padding: 32px 24px; }
.guide-tabs { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.guide-tab { background: var(--surface); border: 1px solid var(--line); color: var(--sub); border-radius: var(--r-sm); padding: 8px 16px; font-size: 13px; font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: all .15s; }
.guide-tab:hover { border-color: var(--accent); color: var(--accent); }
.guide-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 2px 8px rgba(220,38,38,.3); }
.badge-free { background: #dcfce7; color: #16a34a; font-size: 10px; padding: 2px 7px; border-radius: 10px; font-weight: 600; }
.guide-section { display: flex; flex-direction: column; gap: 2px; }
.guide-badge { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 12px 16px; border-radius: var(--r-sm); margin-bottom: 16px; font-weight: 500; background: var(--accent-s); color: var(--accent); border: 1px solid rgba(220,38,38,.2); }
.guide-badge.warn { background: var(--warn-s); color: var(--warn); border-color: rgba(217,119,6,.2); }
.guide-step { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.guide-step:last-of-type { border-bottom: none; }
.step-num { width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 700; flex-shrink: 0; margin-top: 2px; }
.step-body { flex: 1; }
.step-title { font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.step-body p { font-size: 13px; color: var(--sub); line-height: 1.6; margin-bottom: 8px; }
.step-body p:last-child { margin-bottom: 0; }
.code-block { background: #f8f8fc; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 14px; font-family: ui-monospace, Menlo, monospace; font-size: 12px; line-height: 1.7; color: var(--ink); white-space: pre-wrap; word-break: break-all; }
.guide-tip { display: flex; gap: 10px; align-items: flex-start; background: var(--ok-s); border: 1px solid #bbf7d0; border-radius: var(--r-sm); padding: 14px 16px; margin-top: 16px; font-size: 13px; color: #15803d; line-height: 1.6; }
.guide-tip i { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.guide-tip code { background: rgba(0,0,0,.06); padding: 1px 5px; border-radius: 4px; font-family: monospace; }
.guide-list { margin: 6px 0 0 16px; }
.guide-list li { font-size: 13px; color: var(--sub); margin-bottom: 4px; }
.guide-list code { background: var(--panel); padding: 1px 6px; border-radius: 4px; font-family: monospace; font-size: 12px; }
.step-body a { color: var(--accent); }
.step-body code { background: var(--panel); padding: 1px 6px; border-radius: 4px; font-family: monospace; font-size: 12px; }
/* ===== MARKDOWN BODY ===== */
.md-loading { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; padding: 32px 0; }
.md-body { font-size: 14px; line-height: 1.75; color: var(--ink); }
.md-body h1 { font-size: 22px; font-weight: 800; margin: 0 0 6px; padding-bottom: 12px; border-bottom: 2px solid var(--line); }
.md-body h2 { font-size: 17px; font-weight: 700; margin: 32px 0 12px; padding: 10px 14px; background: var(--accent-s); border-left: 3px solid var(--accent); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.md-body h3 { font-size: 14px; font-weight: 700; margin: 20px 0 8px; color: var(--ink); }
.md-body h4 { font-size: 13px; font-weight: 600; margin: 16px 0 6px; color: var(--sub); }
.md-body p { margin: 0 0 10px; color: var(--sub); }
.md-body strong { color: var(--ink); font-weight: 600; }
.md-body a { color: var(--accent); }
.md-body a:hover { text-decoration: underline; }
.md-body ul, .md-body ol { margin: 8px 0 12px 20px; }
.md-body li { margin-bottom: 5px; color: var(--sub); font-size: 13px; }
.md-body code { background: #fdf0f0; border: 1px solid #f5d5d5; padding: 2px 6px; border-radius: 4px; font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: #b91c1c; }
.md-body pre { background: #1e1e2e; border-radius: var(--r-sm); padding: 16px 18px; margin: 10px 0 16px; overflow-x: auto; position: relative; }
.md-body pre code { background: transparent; border: none; color: #cdd6f4; font-size: 12.5px; line-height: 1.7; padding: 0; }
.md-body table { width: 100%; border-collapse: collapse; margin: 12px 0 16px; font-size: 13px; }
.md-body th { background: var(--panel); font-weight: 600; padding: 9px 12px; text-align: left; border: 1px solid var(--line); }
.md-body td { padding: 8px 12px; border: 1px solid var(--line); color: var(--sub); }
.md-body tr:nth-child(even) td { background: var(--panel); }
.md-body hr { border: none; border-top: 1px solid var(--line); margin: 28px 0; }
.md-body blockquote { border-left: 3px solid var(--warn); background: var(--warn-s); margin: 10px 0; padding: 10px 14px; border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.md-body blockquote p { color: #92400e; margin: 0; }
.copy-btn { position: absolute; top: 10px; right: 10px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15); color: #cdd6f4; padding: 5px 8px; border-radius: 5px; font-size: 13px; cursor: pointer; transition: background .15s; }
.copy-btn:hover { background: rgba(255,255,255,.2); }

.guide-intro { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 14px 16px; font-size: 13px; color: var(--sub); line-height: 1.7; margin-bottom: 16px; }
.guide-note { display: flex; align-items: flex-start; gap: 8px; background: #fffbeb; border: 1px solid #fde68a; border-radius: var(--r-sm); padding: 10px 12px; font-size: 12px; color: #92400e; line-height: 1.6; margin-top: 8px; }
.guide-note i { flex-shrink: 0; margin-top: 1px; font-size: 14px; }
.guide-note a { color: #b45309; }
.guide-note code { background: rgba(0,0,0,.07); padding: 1px 5px; border-radius: 3px; font-family: monospace; }
@keyframes spin { to { transform: rotate(360deg); } }
.ph-spin { animation: spin 1s linear infinite; display: inline-block; }

/* ===== OA MANAGER ===== */
.oa-page { flex: 1; overflow-y: auto; background: var(--bg); }
.oa-inner { max-width: 700px; margin: 0 auto; padding: 32px 24px; }
/* Trang có nội dung dạng bảng/lịch rộng (VD thời khóa biểu Lịch hẹn) - dùng gần full chiều rộng cho dễ nhìn. */
.oa-inner.wide { max-width: 1400px; }
.oa-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 20px; margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; box-shadow: var(--shadow-s); transition: box-shadow .15s; }
.oa-card:hover { box-shadow: var(--shadow); }
.oa-card-info { display: flex; align-items: center; gap: 14px; }
.oa-avatar { width: 42px; height: 42px; border-radius: 10px; background: var(--accent-s); display: grid; place-items: center; font-size: 20px; flex-shrink: 0; }
.oa-name { font-weight: 600; font-size: 14px; }
.oa-id { font-size: 11px; color: var(--muted); margin-top: 2px; font-family: monospace; }
.status-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; padding: 3px 9px; border-radius: 20px; font-weight: 500; margin-top: 5px; }
.status-badge.connected { background: var(--ok-s); color: var(--ok); }
.status-badge.disconnected { background: var(--danger-s); color: var(--danger); }
.status-badge.scheduled { background: var(--accent-s); color: var(--accent); }
.status-badge.completed { background: var(--ok-s); color: var(--ok); }
.status-badge.cancelled { background: var(--danger-s); color: var(--danger); }
.status-badge.no_show { background: var(--warn-s); color: var(--warn); }
.friend-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; padding: 4px 9px; border-radius: 20px; font-weight: 500; white-space: nowrap; flex-shrink: 0; }
.friend-badge.is-friend { background: var(--ok-s); color: var(--ok); }
.friend-badge.is-pending { background: var(--warn-s); color: var(--warn); }
.friend-badge.is-none { background: var(--hover); color: var(--muted); }
.connect-form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 24px; box-shadow: var(--shadow-s); margin-top: 20px; }
.info-box { background: #fffbeb; border: 1px solid #fde68a; border-radius: var(--r-sm); padding: 12px 14px; font-size: 12px; color: #92400e; margin-top: 6px; line-height: 1.6; }
.info-box b { color: #78350f; }
.link-btn { background: none; border: none; padding: 0; margin: 0; font: inherit; font-weight: 600; color: inherit; text-decoration: underline; cursor: pointer; }
.link-btn:hover { opacity: .8; }
.sheets-log-list { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; max-height: 320px; overflow-y: auto; }
.sheets-log-row { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 8px; padding: 8px 10px; border-radius: var(--r-sm); font-size: 13px; }
.sheets-log-row:nth-child(odd) { background: var(--hover); }
.sheets-log-pager { display: flex; align-items: center; gap: 10px; margin-top: 10px; justify-content: flex-end; }
.bulk-grid-wrap { max-height: 320px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r-sm); margin-bottom: 10px; }
.bulk-grid { width: 100%; border-collapse: collapse; font-size: 13px; }
.bulk-grid thead th { position: sticky; top: 0; background: var(--surface-2, var(--hover)); text-align: left; padding: 6px 8px; font-weight: 600; color: var(--sub); border-bottom: 1px solid var(--line); z-index: 1; }
.bulk-grid td { border-bottom: 1px solid var(--line); padding: 0; }
.bulk-grid td.bulk-grid-idx { padding: 0 8px; color: var(--muted); text-align: center; width: 28px; }
.bulk-grid input.bulk-cell { width: 100%; border: none; background: transparent; padding: 7px 8px; font-size: 13px; border-radius: 0; }
.bulk-grid input.bulk-cell:focus { background: var(--accent-s); outline: none; }
.bulk-grid-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.bulk-source-tabs { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.bulk-source-tabs .filter-btn { padding: 6px 14px; }
.bulk-existing-list { max-height: 280px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r-sm); }
.bulk-existing-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; font-size: 13px; border-bottom: 1px solid var(--line); cursor: pointer; }
.bulk-existing-row:last-child { border-bottom: none; }
.bulk-existing-row:hover { background: var(--hover); }
.bulk-existing-row input[type="checkbox"] { width: auto; flex-shrink: 0; }
.bulk-existing-row .bulk-row-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge-warn { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 20px; flex-shrink: 0; background: var(--warn-s); color: var(--warn); }
.bulk-job-indicator { position: fixed; right: 20px; bottom: 20px; z-index: 500; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 12px 14px; max-width: 340px; font-size: 13px; }
.bulk-job-header { display: flex; align-items: center; gap: 8px; }
.bulk-job-header span { flex: 1; }
.bulk-job-bar { background: var(--line); border-radius: 6px; height: 6px; margin-top: 8px; overflow: hidden; }
.bulk-job-bar div { background: var(--accent); height: 100%; transition: width .3s; }
.workdays-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.workday-chip { display: flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 20px; font-size: 13px; font-weight: 400; cursor: pointer; user-select: none; }
.workday-chip input { width: auto; margin: 0; }
.workday-chip.on { background: var(--accent-s); border-color: var(--accent); color: var(--accent); font-weight: 500; }
.upcoming-meeting-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.upcoming-meeting-row:last-child { border-bottom: none; }

/* ===== View Lịch (month calendar giống Google Calendar) ===== */
.cal-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; gap: 10px; flex-wrap: wrap; }
.cal-nav { display: flex; align-items: center; gap: 6px; }
.cal-title { font-weight: 700; font-size: 15px; min-width: 130px; text-align: center; color: var(--ink); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.cal-weekday { background: var(--panel); text-align: center; font-size: 11px; font-weight: 600; color: var(--muted); padding: 8px 0; }
.cal-day { background: var(--surface); min-height: 96px; padding: 4px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; transition: background .1s; overflow: hidden; }
.cal-day:hover { background: var(--hover); }
.cal-day.other-month { background: var(--panel); }
.cal-day.other-month .cal-day-num { color: var(--muted); opacity: .55; }
.cal-day-num { font-size: 12px; font-weight: 600; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; flex-shrink: 0; color: var(--ink); }
.cal-day.today .cal-day-num { background: var(--accent); color: #fff; }
.cal-event { font-size: 10px; line-height: 1.5; padding: 1px 5px; border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-more { font-size: 10px; color: var(--muted); padding-left: 4px; }
.cal-evdots { display: none; gap: 3px; padding-left: 2px; }
.cal-evdot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.cal-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px; font-size: 12px; color: var(--muted); }
.cal-legend span { display: inline-flex; align-items: center; gap: 5px; }
.cal-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

/* ===== View Tuần (thời khóa biểu theo giờ) ===== */
.cw-head { display: flex; border: 1px solid var(--line); border-bottom: none; border-radius: var(--r) var(--r) 0 0; overflow: hidden; }
.cw-gutter-head { width: 52px; flex-shrink: 0; background: var(--panel); border-right: 1px solid var(--line); }
.cw-dayhead { flex: 1; text-align: center; padding: 7px 2px; background: var(--panel); border-right: 1px solid var(--line); cursor: pointer; min-width: 0; }
.cw-dayhead:last-child { border-right: none; }
.cw-dayhead:hover { background: var(--hover); }
.cw-dow { display: block; font-size: 11px; color: var(--muted); font-weight: 600; }
.cw-date { display: block; font-size: 13px; font-weight: 700; color: var(--ink); }
.cw-dayhead.today .cw-dow, .cw-dayhead.today .cw-date { color: var(--accent); }
.cw-body { display: flex; max-height: 60vh; overflow-y: auto; border: 1px solid var(--line); border-radius: 0 0 var(--r) var(--r); background: var(--surface); }
.cw-gutter { width: 52px; flex-shrink: 0; position: relative; border-right: 1px solid var(--line); }
.cw-hour { position: relative; }
.cw-hour span { position: absolute; top: -7px; right: 6px; font-size: 10px; color: var(--muted); }
.cw-col { flex: 1; position: relative; border-right: 1px solid var(--line); min-width: 0; }
.cw-col:last-child { border-right: none; }
.cw-line { position: absolute; left: 0; right: 0; border-top: 1px solid var(--line); }
.cw-now { position: absolute; left: 0; right: 0; border-top: 2px solid var(--accent); z-index: 3; }
.cw-now::before { content: ""; position: absolute; left: -4px; top: -5px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.cw-event { position: absolute; border-radius: 5px; padding: 3px 7px; overflow: hidden; cursor: pointer; font-size: 11px; line-height: 1.3; z-index: 2; box-shadow: var(--shadow-s); transition: box-shadow .12s ease; }
.cw-event:hover { box-shadow: var(--shadow); z-index: 5; }
.cw-ev-time { font-weight: 700; font-size: 10px; opacity: .8; }
/* Tên trên 1 dòng gọn, chỉ cắt "..." khi thật sự quá dài. Chiều cao ô đã đủ cho giờ + 1 dòng tên
   (xem min 34px ở drawCalWeek) nên không còn cảnh tên bị xén ngang giữa chữ như trước. */
.cw-ev-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.book-conv-result { padding: 8px 10px; border-radius: var(--r-sm); cursor: pointer; font-size: 13px; }
.book-conv-result:hover { background: var(--hover); }

/* ===== View Thống kê (tổng hợp cuộc họp) ===== */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.stat-card { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; box-shadow: var(--shadow-s); }
.stat-ico { width: 40px; height: 40px; border-radius: var(--r-sm); display: grid; place-items: center; font-size: 20px; flex-shrink: 0; }
.stat-value { font-size: 22px; font-weight: 700; color: var(--ink); line-height: 1.1; }
.stat-label { font-size: 12px; color: var(--sub); font-weight: 500; }

/* ===== Nhật ký thay đổi lịch hẹn (timeline) ===== */
.mlog-timeline { display: flex; flex-direction: column; gap: 2px; }
.mlog-item { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.mlog-item:last-child { border-bottom: none; }
.mlog-ico { width: 28px; height: 28px; border-radius: 50%; background: var(--hover); color: var(--sub); display: grid; place-items: center; font-size: 15px; flex-shrink: 0; }
.form-msg { font-size: 12px; padding: 8px 12px; border-radius: var(--r-sm); }
.form-msg.ok { background: var(--ok-s); color: var(--ok); }
.form-msg.err { background: var(--danger-s); color: var(--danger); }
.empty-placeholder { border: 2px dashed var(--line); border-radius: var(--r); padding: 32px; text-align: center; color: var(--muted); margin-bottom: 10px; }
.empty-placeholder .icon { font-size: 32px; margin-bottom: 8px; opacity: .5; }
.empty-placeholder p { font-size: 13px; }

/* Cảnh báo Zalo cá nhân - có thể ẩn/hiện lại */
.pz-warnings { position: relative; display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; padding-top: 6px; }
.pz-warnings .info-box { margin: 0; }
.pz-warnings-close { position: absolute; top: -8px; right: -8px; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid #fde68a; box-shadow: 0 2px 6px rgba(0,0,0,.15); color: #92400e; padding: 0; border-radius: 50%; z-index: 2; }
.pz-warnings-close:hover { background: #fef3c7; }

/* ===== TAGS ===== */
.conv-item-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.conv-tag { font-size: 10px; background: var(--accent-s); color: var(--accent); padding: 1px 6px; border-radius: 10px; font-weight: 500; }
.conv-tag.status-hint { display: inline-flex; align-items: center; gap: 3px; }
.conv-tag.status-hint.needs-reply { background: var(--danger-s); color: var(--danger); }
.conv-tag.status-hint.needs-follow { background: var(--warn-s); color: var(--warn); }
.conv-tag.status-hint.read-done { background: var(--hover); color: var(--muted); }
.tag-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--accent-s); color: var(--accent); padding: 3px 8px; border-radius: 14px; font-size: 12px; font-weight: 500; }
.tag-chip button { background: none; border: none; cursor: pointer; color: var(--accent); font-size: 14px; padding: 0; line-height: 1; }
.tags-current { display: flex; flex-wrap: wrap; gap: 6px; min-height: 28px; margin-bottom: 10px; }
.tag-add-row { display: flex; gap: 6px; }
.tag-add-row input { flex: 1; }
.muted-sm { font-size: 12px; color: var(--muted); }

/* ===== CHAT LAYOUT WITH SIDE PANEL ===== */
.chat-main-area { display: flex; flex: 1; overflow: hidden; position: relative; }
.chat-messages { flex: 1; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 2px; background: #e8eef5; }
.chat-side-panel { width: 280px; border-left: 1px solid var(--line); display: flex; flex-direction: column; background: var(--surface); overflow: hidden; flex-shrink: 0; }
.panel-header { padding: 12px 14px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; font-size: 13px; background: var(--panel); flex-shrink: 0; }
.panel-body { flex: 1; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.files-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.files-gallery-img { display: block; aspect-ratio: 1; border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--line); cursor: zoom-in; }
.files-gallery-img img { width: 100%; height: 100%; object-fit: cover; }
/* Lightbox xem ảnh trong app (bấm ảnh trong chat/gallery) - phủ toàn màn, trên mọi lớp khác (modal
   z-index 9999). Đóng: bấm nền tối / nút X / Esc (xem openImageLightbox). */
.img-lightbox { position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,.85); display: flex; align-items: center; justify-content: center; padding: 24px; cursor: zoom-out; animation: fadeIn .12s ease; }
.img-lightbox-img { max-width: 94vw; max-height: 94vh; object-fit: contain; border-radius: 6px; box-shadow: 0 10px 50px rgba(0,0,0,.5); cursor: default; }
.img-lightbox-close { position: fixed; top: 16px; right: 16px; width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.15); color: #fff; border: none; display: grid; place-items: center; cursor: pointer; font-size: 20px; }
.img-lightbox-close:hover { background: rgba(255,255,255,.3); }
.files-gallery-file { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-sm); font-size: 13px; color: var(--ink); text-decoration: none; }
.files-gallery-file:hover { background: var(--hover); }
.spin { text-align: center; padding: 20px; color: var(--muted); }

/* Notes */
.note-item { background: var(--panel); border-radius: var(--r-sm); padding: 10px 12px; position: relative; }
.note-meta { font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.note-content { font-size: 13px; white-space: pre-wrap; }
.note-item button[data-del-note] { position: absolute; top: 8px; right: 8px; opacity: .4; }
.note-item:hover button[data-del-note] { opacity: 1; }
.note-add { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--line); padding-top: 10px; margin-top: 4px; }
.note-add textarea { width: 100%; resize: vertical; }

/* CRM */
.crm-form { display: flex; flex-direction: column; gap: 10px; }
.crm-form .field { display: flex; flex-direction: column; gap: 4px; }
.crm-form .field label { font-size: 11px; font-weight: 600; color: var(--muted); display: flex; align-items: center; gap: 4px; }
.crm-form .field input, .crm-form .field textarea { font-size: 13px; }
.crm-detected { background: rgba(220,38,38,.15); color: var(--accent); font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 10px; margin-left: auto; }
.crm-other-channels { display: flex; flex-direction: column; gap: 4px; }
.crm-channel-row { display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: var(--panel); border-radius: var(--r-sm); font-size: 12px; cursor: pointer; }
.crm-channel-row:hover { background: var(--hover); }
.crm-channel-row span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-summary { background: var(--panel); border-radius: var(--r-sm); padding: 10px 12px; font-size: 12px; line-height: 1.6; border: 1px solid var(--line); }
.summary-line { padding: 2px 0; }
.summary-line:not(:last-child) { border-bottom: 1px solid var(--line); padding-bottom: 4px; margin-bottom: 4px; }

/* History */
.history-list { display: flex; flex-direction: column; gap: 8px; }
.history-item { background: var(--panel); border-radius: var(--r-sm); padding: 10px 12px; cursor: pointer; border: 2px solid transparent; }
.history-item:hover { border-color: var(--accent-s); }
.history-item.current { border-color: var(--accent); }
.history-date { font-size: 11px; color: var(--muted); margin-bottom: 3px; }
.history-preview { font-size: 12px; margin-bottom: 3px; }
.history-meta { font-size: 11px; color: var(--muted); }

/* Composer toolbar */
.composer-toolbar { padding: 0 0 6px; display: flex; gap: 6px; }
button.ghost.xs { padding: 3px 8px; font-size: 11px; }

/* Template picker */
.tmpl-picker { position: absolute; bottom: 100%; left: 0; right: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-l); max-height: 320px; overflow-y: auto; z-index: 100; animation: popIn .15s ease; transform-origin: bottom left; }
.tmpl-item { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.tmpl-item:hover { background: var(--hover); }
.tmpl-item:last-child { border-bottom: none; }
.tmpl-item-body { flex: 1; min-width: 0; cursor: pointer; }
.tmpl-item-body b { font-size: 13px; display: block; margin-bottom: 2px; }
.tmpl-item-body p { font-size: 12px; color: var(--muted); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tmpl-item-actions { display: flex; gap: 4px; flex-shrink: 0; }
.tmpl-add-row { cursor: pointer; justify-content: center; color: var(--accent); font-size: 13px; font-weight: 500; }
.tmpl-empty { padding: 16px; text-align: center; color: var(--muted); font-size: 12px; }
.tmpl-edit-form { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.tmpl-edit-form textarea { min-height: 70px; }
.tmpl-form-actions { display: flex; justify-content: flex-end; gap: 8px; }
.tmpl-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: var(--panel); border-radius: var(--r-sm); margin-bottom: 6px; font-size: 13px; }
/* Đính kèm ảnh/link cho Template + FAQ */
.tmpl-img-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tmpl-img-thumb { max-width: 56px; max-height: 56px; border-radius: 6px; object-fit: cover; vertical-align: middle; }
.tmpl-item-badges { display: flex; gap: 6px; margin-top: 4px; }
.tmpl-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--muted); background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; text-decoration: none; }

/* ===== STATS PAGE ===== */
.stats-page { flex: 1; overflow-y: auto; }
.stats-inner { max-width: 900px; margin: 0 auto; padding: 32px 24px; }
.stats-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; margin-bottom: 28px; }
.stat-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 16px; box-shadow: var(--shadow-s); }
.stat-card.blue { border-top: 3px solid var(--accent); }
.stat-card.green { border-top: 3px solid var(--ok); }
.stat-card.red { border-top: 3px solid var(--danger); }
.stat-val { font-size: 28px; font-weight: 700; color: var(--ink); }
.stat-label { font-size: 12px; color: var(--muted); margin-top: 4px; }
.stats-section { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; box-shadow: var(--shadow-s); }
.bar-chart { display: flex; align-items: flex-end; gap: 10px; height: 100px; padding-top: 10px; }
.bar-col { display: flex; flex-direction: column; align-items: center; flex: 1; }
.bar-fill { width: 100%; background: var(--accent); border-radius: 3px 3px 0 0; min-height: 4px; transition: height .3s; }
.bar-label { font-size: 10px; color: var(--muted); margin-top: 4px; }
.bar-val { font-size: 11px; font-weight: 600; color: var(--ink); }

/* ===== BROADCAST PAGE ===== */
.broadcast-page { flex: 1; overflow-y: auto; }
.broadcast-inner { max-width: 700px; margin: 0 auto; padding: 32px 24px; }

/* ===== TEAM PAGE ===== */
.team-page { flex: 1; overflow-y: auto; }
.team-inner { max-width: 700px; margin: 0 auto; padding: 32px 24px; }
.member-list { display: flex; flex-direction: column; gap: 10px; }
.member-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; display: flex; align-items: center; gap: 12px; box-shadow: var(--shadow-s); }
.member-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--accent-s); color: var(--accent); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex-shrink: 0; }
.member-info { flex: 1; }
.member-name { font-weight: 600; font-size: 13px; }
.member-email { font-size: 11px; color: var(--muted); }

/* CRM (Google Sheets) - thanh tiến độ mini theo dòng lead, gọn hơn checklist đầy đủ (xem ở modal chi tiết). */
.crmlead-progress { display: flex; align-items: center; gap: 6px; margin-top: 6px; max-width: 220px; }
.crmlead-progress-bar { flex: 1; height: 5px; border-radius: 4px; background: var(--panel); overflow: hidden; }
.crmlead-progress-fill { height: 100%; background: var(--ok); border-radius: 4px; transition: width .2s; }
.role-badge { font-size: 11px; padding: 2px 8px; border-radius: 10px; font-weight: 600; }
.role-badge.owner { background: #fef3c7; color: #92400e; }
.role-badge.manager { background: var(--bot-bg); color: var(--bot-ink); }
.role-badge.agent { background: var(--ok-s); color: var(--ok); }
.crm-row { cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.crm-row:hover { border-color: var(--accent); box-shadow: var(--shadow); }

/* ===== TRANG KHÁCH HÀNG (CRM) - dùng HẾT bề ngang màn hình (không bó 700px như broadcast) để bảng
   Kanban hiện được nhiều cột nhất có thể, đỡ phải cuộn ngang trên màn rộng ===== */
.crm-inner { width: 100%; margin: 0 auto; padding: 28px 26px; }

/* Kanban: khoá cả trang cao đúng bằng màn hình để đầu trang (tiêu đề + bộ lọc) KHÔNG cuộn đi mất -
   chỉ vùng board (#crm-body) chiếm phần còn lại, các cột tự cuộn bên trong. Không đặt chiều cao cứng
   (calc 100vh - Npx) vì phần đầu cao/thấp thay đổi -> dùng flex để board tự lấp đúng chỗ trống. */
.broadcast-page.crm-page-fixed { overflow: hidden; display: flex; flex-direction: column; }
.crm-page-fixed .crm-inner { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.crm-page-fixed #crm-body { flex: 1; min-height: 0; }
.crm-page-fixed .crm-kanban { height: 100%; }
.crm-page-fixed .kanban-col { height: 100%; }
.crm-view-toggle { display: inline-flex; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.cvt-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; font-size: 13px; font-weight: 500; color: var(--sub); background: transparent; border: none; cursor: pointer; }
.cvt-btn.active { background: var(--accent); color: #fff; }
.cvt-btn:not(.active):hover { background: var(--surface); }

/* ===== KANBAN ===== */
.crm-kanban { display: flex; gap: 14px; overflow-x: auto; overflow-y: hidden; padding-bottom: 10px; align-items: flex-start; scrollbar-width: thin; }
.kanban-col { flex: 0 0 256px; width: 256px; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); height: 100%; }
.kanban-col.drop-target { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-s); }
.kanban-col-head { display: flex; align-items: center; gap: 8px; padding: 11px 12px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.kanban-col-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.kanban-col-title { font-weight: 600; font-size: 13px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kanban-col-count { font-size: 12px; font-weight: 600; color: var(--muted); background: var(--surface); border-radius: 10px; padding: 1px 9px; flex-shrink: 0; }
.kanban-col-body { flex: 1; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 6px; min-height: 48px; }
.kanban-col-empty { text-align: center; color: var(--muted); font-size: 12px; padding: 14px 6px; border: 1px dashed var(--line); border-radius: var(--r-sm); }
.kanban-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 7px 9px; box-shadow: var(--shadow-s); cursor: pointer; display: flex; flex-direction: column; gap: 4px; transition: border-color .15s, box-shadow .15s;
  /* Cảm ứng: tắt menu "lưu/chia sẻ/in" khi nhấn giữ (long-press callout) + tắt chọn văn bản, để nhấn
     giữ = bắt đầu KÉO thẻ, không bị trình duyệt cướp thao tác. Xem thêm .kc-avatar-img (ảnh không nuốt chạm). */
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.kanban-card:hover { border-color: var(--accent); box-shadow: var(--shadow); }
/* touch-action: none = trình duyệt KHÔNG tự cuộn/zoom khi chạm lên thẻ -> cú kéo do JS toàn quyền,
   không bị hủy giữa chừng (pointercancel) như trên iOS Safari. Đổi lại, cuộn dọc/ngang khi vuốt trên
   thẻ do JS tự cuộn tay (xem onKanbanPointerMove: nhánh d.scrolling). */
.kanban-card[data-draggable="1"] { cursor: grab; touch-action: none; }
.kanban-card.dragging { opacity: .35; }
.kc-top { display: flex; align-items: center; gap: 7px; }
.kc-top .member-avatar { width: 24px; height: 24px; font-size: 11px; position: relative; overflow: hidden; }
/* pointer-events:none: chạm/giữ đi xuyên qua ảnh xuống thẻ -> long-press không mở menu ảnh, và cả thẻ
   nhận sự kiện kéo. user-drag/callout:none: chặn kéo ảnh + menu lưu ảnh trên desktop lẫn mobile. */
.kc-avatar-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; pointer-events: none; -webkit-user-drag: none; -webkit-touch-callout: none; }
.kc-name { font-weight: 600; font-size: 12.5px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kc-move { background: transparent; border: none; color: var(--muted); cursor: pointer; padding: 2px 3px; border-radius: 6px; flex-shrink: 0; line-height: 1; font-size: 13px; }
.kc-move:hover { background: var(--panel); color: var(--accent); }
.kc-badges { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.kc-badges:empty { display: none; }
.kc-contact { font-size: 11.5px; color: var(--sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kc-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.kc-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.kc-foot .muted-sm { font-size: 10.5px; white-space: nowrap; }
.kc-actions { display: flex; gap: 3px; flex-shrink: 0; }
.kc-actions .ghost.sm { padding: 3px 6px; font-size: 11px; }
.kanban-ghost { position: fixed; z-index: 9999; margin: 0; pointer-events: none; box-shadow: var(--shadow-l); transform: rotate(2deg); opacity: .95; }
body.kanban-dragging { cursor: grabbing !important; user-select: none; -webkit-user-select: none; touch-action: none; overflow: hidden; }
body.kanban-dragging .kanban-card { cursor: grabbing !important; }
body.kanban-dragging .kanban-col-body, body.kanban-dragging .crm-kanban { touch-action: none; }

/* Modal "Chuyển bước" (nút trên thẻ) - đổi cột không cần kéo, chủ yếu cho điện thoại */
.stage-picker { display: flex; flex-direction: column; gap: 6px; }
.stage-pick-btn { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; padding: 11px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); font-size: 14px; color: var(--ink); cursor: pointer; }
.stage-pick-btn:hover { border-color: var(--accent); background: var(--panel); }
.stage-pick-btn.active { border-color: var(--accent); background: var(--accent-s); font-weight: 600; }

/* ===== BILLING PAGE ===== */
.billing-page { flex: 1; overflow-y: auto; }
.billing-inner { max-width: 700px; margin: 0 auto; padding: 32px 24px; }
.plan-hero { text-align: center; margin-bottom: 28px; }
.plan-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 700; padding: 10px 24px; border-radius: 30px; }
.plan-badge.plan-free { background: var(--panel); color: var(--sub); border: 2px solid var(--line); }
.plan-badge.plan-starter { background: var(--bot-bg); color: var(--bot-ink); border: 2px solid var(--accent); }
.plan-badge.plan-pro { background: #fef3c7; color: #92400e; border: 2px solid #f59e0b; }
.plan-badge.plan-agency { background: #fdf4ff; color: #7c3aed; border: 2px solid #a855f7; }
.usage-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 24px; }
.usage-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; box-shadow: var(--shadow-s); }
.usage-label { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.usage-val { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.usage-bar { height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; }
.usage-fill { height: 100%; background: var(--accent); border-radius: 3px; transition: width .4s; }
.usage-fill.warn { background: var(--warn); }
.upgrade-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 24px; box-shadow: var(--shadow-s); }
.upgrade-title { font-size: 16px; font-weight: 700; margin-bottom: 20px; display: flex; align-items: center; gap: 8px; }
.upgrade-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
.upgrade-plan { border: 2px solid var(--line); border-radius: var(--r); padding: 16px; text-align: center; }
.upgrade-plan.featured { border-color: var(--accent); background: var(--accent-s); }
.up-name { font-weight: 700; font-size: 15px; margin-bottom: 6px; }
.up-price { color: var(--accent); font-weight: 600; font-size: 13px; margin-bottom: 10px; }
.upgrade-plan ul { list-style: none; font-size: 12px; color: var(--sub); text-align: left; }
.upgrade-plan ul li::before { content: "✓ "; color: var(--ok); font-weight: 700; }
.upgrade-plan ul li { margin-bottom: 4px; }
.btn-upgrade { display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: #fff; border-radius: var(--r); padding: 10px 24px; font-weight: 600; font-size: 14px; text-decoration: none; }
.btn-upgrade:hover { background: var(--accent-h); }

/* ===== TABLET / iPAD (769px - 1180px, gồm iPad dọc 768-834px* và iPad ngang 1024-1180px) =====
   (*iPad dọc 768px rơi vào block mobile bên dưới - block này bắt các cỡ 769px trở lên.)
   Layout desktop gốc cộng cứng 240px sidebar + 300px danh sách hội thoại + 280px panel Thông tin
   khách = 820px, trên iPad chỉ còn lại vài chục px cho khung chat. 3 chỉnh chính:
   1. Sidebar thu về icon-only 64px (giống trạng thái .collapsed, ẩn luôn nút thu gọn vì đã gọn sẵn).
   2. Danh sách hội thoại hẹp lại 260px.
   3. Panel "Thông tin khách" nổi ĐÈ lên khung chat thay vì chiếm cột riêng - JS bật/tắt qua
      style.display (toggleSidePanel) vẫn hoạt động nguyên, chỉ đổi cách chiếm chỗ. */
@media (min-width: 769px) and (max-width: 1180px) {
  .sidebar { width: 64px; }
  .sidebar .brand-bar-text, .sidebar .nav-label, .sidebar .user-info { display: none; }
  .sidebar-collapse-btn { display: none; }
  .sidebar-logo { justify-content: center; padding: 18px 8px 14px; }
  .sidebar .nav-item { justify-content: center; }
  /* Xếp dọc avatar/chuông/đăng xuất để vẫn dùng được trong cột 64px (khác .collapsed vốn ẩn hẳn
     2 nút này vì desktop còn nút mở rộng lại - ở đây CSS ép cứng, không có đường mở rộng). */
  .sidebar .user-card { flex-direction: column; gap: 4px; padding: 8px 4px; }

  .conv-list { width: 260px; }
  .chat-side-panel {
    position: absolute; top: 0; right: 0; bottom: 0; width: 320px; max-width: 85%;
    z-index: 20; box-shadow: var(--shadow-l);
  }

  .hub-nav { width: 176px; }
  .settings-inner, .guide-inner, .oa-inner, .stats-inner, .broadcast-inner, .team-inner, .billing-inner, .crm-inner {
    padding: 24px 18px;
  }
  /* iPad: cột hẹp lại + kéo-thả vẫn chạy (Pointer Events), cuộn ngang xem hết pipeline. */
  .kanban-col { flex-basis: 236px; width: 236px; }

  /* Header khung chat: ở tablet khung chat hẹp (sidebar 64px + list 260px) nên hàng nút đầy đủ (2
     select + kết bạn + 5 nút panel) wrap lộn xộn - tùy hội thoại ít/nhiều nút mà vừa hay vỡ. Gom thao
     tác phụ vào nút "⋯" như mobile: header chỉ còn phân loại (icon) + "⋯" + công tắc bot, gọn 1 hàng. */
  .chat-actions-secondary { display: none; }
  .chat-more-btn { display: inline-flex; }
  .contact-type-toggle .ctt-btn { font-size: 0; padding: 6px 9px; }
  .contact-type-toggle .ctt-btn i { font-size: 16px; }
  .bot-toggle-wrap span { display: none; }
}

/* ===== MOBILE (màn hình hẹp, chủ yếu khi nhân viên mở link ngrok trên điện thoại) =====
   3 mảng bị vỡ nặng nhất trên desktop-layout gốc (chia cột cố định) khi màn hẹp: sidebar bên trái,
   Hội thoại (danh sách + khung chat), khu Cài đặt (danh sách tab + nội dung) - đổi cả 3 sang kiểu
   "1 màn hình 1 lớp, có nút Quay lại" thay vì chia đôi màn hình chật cứng. */
@media (max-width: 768px) {
  /* input/textarea/select < 16px khiến Safari iOS tự zoom cả trang khi bấm vào ô - áp dụng 16px
     chung toàn app trên màn hẹp (trang đăng nhập đã tự làm riêng từ trước, xem .auth-card input). */
  input, textarea, select { font-size: 16px; }

  /* Sidebar trái -> thanh điều hướng dưới cùng, ngón tay cái bấm dễ hơn sidebar bên trái trên điện thoại. */
  #app { flex-direction: column; }
  .sidebar {
    width: 100%; height: auto; flex-direction: row; align-items: center;
    border-right: none; border-top: 1px solid var(--line); order: 2; flex-shrink: 0;
  }
  /* "Thu gọn" (.collapsed) là khái niệm CHỈ của sidebar dọc trên desktop và MẶC ĐỊNH bật (localStorage
     sidebarCollapsed mặc định "1") -> trình duyệt mobile mới luôn dính class này. Trên mobile sidebar
     là thanh dưới full-width nên phải VÔ HIỆU HOÁ collapsed: nếu không, .sidebar.collapsed{width:64px}
     (đặc hiệu 0,2,0 > rule mobile .sidebar{width:100%} 0,1,0, media query không cộng đặc hiệu) đè khiến
     cả thanh co còn 64px -> dồn hết icon về 1 cục bên trái, và nhãn tab bị ẩn. */
  .sidebar.collapsed { width: 100%; }
  .sidebar.collapsed .nav-label,
  .sidebar.collapsed .user-info { display: block; }
  .sidebar-logo, .sidebar-collapse-btn { display: none; }
  /* flex:4 cho 4 tab điều hướng + flex:1 cho ô "Cài đặt" bên dưới = 5 ô rộng bằng nhau, chia đều cả
     thanh (trước đây avatar bị dồn 1 cục ở góc phải, lệch nhịp với 4 tab). */
  .sidebar-nav { flex: 4; padding: 4px 2px; overflow: visible; }
  .sidebar-nav .nav-section { display: flex; justify-content: space-around; }
  /* Scope ".sidebar" bắt buộc: .nav-item còn được dùng cho danh sách tab khu Cài đặt (.hub-nav) -
     không scope thì tab Cài đặt cũng bị ép icon-trên-chữ-dưới căn giữa, nhìn như nút lạc chỗ. */
  .sidebar .nav-item { flex-direction: column; justify-content: center; align-items: center; gap: 2px; padding: 6px 2px; margin-bottom: 0; flex: 1; }
  .sidebar .nav-item i { font-size: 19px; width: auto; height: auto; }
  .sidebar .nav-label { font-size: 10px; text-align: center; }
  /* Ô "Cài đặt" = tab thứ 5: avatar nhỏ ở trên + nhãn "Cài đặt" ở dưới (giống icon+nhãn của 4 tab kia),
     chiếm 1/5 thanh - thay vì avatar tròn to đứng lẻ ở góc phải không nhãn. */
  .sidebar-user { border-top: none; padding: 0; flex: 1; position: relative; }
  .sidebar-user .user-card { position: relative; flex-direction: column; justify-content: center; align-items: center; gap: 2px; padding: 6px 2px; }
  .sidebar-user .user-avatar { width: 22px; height: 22px; font-size: 9px; }
  .sidebar-user .user-info { display: block; flex: none; text-align: center; }
  .sidebar-user .user-name { display: none; }
  .sidebar-user .user-email { font-size: 10px; color: var(--muted); }
  .sidebar-user .user-email i { display: none; }
  .sidebar-user .notif-btn, .sidebar-user .logout-btn { display: none; }
  /* Bottom nav: tab đang chọn nổi bật (icon màu thương hiệu + gạch nhỏ phía trên), tab khác xám nhạt
     - để nhận biết nhanh đang ở trang nào (trước đây các icon đậm nhạt gần như nhau). */
  .sidebar .nav-item { position: relative; color: var(--muted); }
  .sidebar .nav-item.active { background: transparent; color: var(--accent); font-weight: 600; }
  .sidebar .nav-item.active i { color: var(--accent); }
  .sidebar .nav-item.active::before,
  .sidebar-user .user-card.active::before { content: ""; position: absolute; top: -4px; left: 50%; transform: translateX(-50%); width: 26px; height: 3px; border-radius: 2px; background: var(--accent); }
  /* Ô Cài đặt khi đang mở: nhãn đỏ + gạch trên như các tab khác. */
  .sidebar-user .user-card.active { background: transparent; }
  .sidebar-user .user-card.active .user-email { color: var(--accent); font-weight: 600; }
  /* Chừa chỗ cho thanh home iPhone (safe area) - không có dòng này thì hàng nút dưới cùng bị thanh
     home đè lên, bấm trượt (cần viewport-fit=cover ở index.html để env() có giá trị). */
  .sidebar { padding-bottom: env(safe-area-inset-bottom, 0px); }

  /* Khu Cài đặt: hiện danh sách tab trước, bấm 1 tab mới hiện nội dung full màn (Quay lại để trở về). */
  .settings-hub { flex-direction: column; }
  .hub-nav { width: 100%; border-right: none; border-bottom: 1px solid var(--line); }
  .hub-content { display: none; width: 100%; }
  .settings-hub.hub-active .hub-nav { display: none; }
  .settings-hub.hub-active .hub-content { display: flex; }
  .hub-back-btn { display: flex; margin: 10px 12px 0; }

  /* Hội thoại: hiện danh sách khách trước, bấm vào 1 khách mới hiện khung chat full màn. */
  .conv-list { width: 100%; }
  .chat-view { display: none; width: 100%; }
  .inbox.chat-active .conv-list { display: none; }
  .inbox.chat-active .chat-view { display: flex; }
  .chat-back-btn { display: inline-flex; }

  /* Hàng chip lọc nhanh của inbox giờ chỉ còn 1 hàng nên để hiện luôn ở mobile. Các .conv-filter
     KHÁC (trang Khách hàng/Chiến dịch...) vẫn ẩn như trước - chúng nhiều hàng, chiếm hết màn. */
  .conv-filter:not(.quick-filter) { display: none; }
  /* Panel lọc nâng cao: bỏ kiểu popover, trượt lên từ đáy cho vừa tay. */
  .adv-filter-overlay { background: rgba(0,0,0,.4); display: flex; align-items: flex-end; }
  .adv-filter-panel { position: static; width: 100%; max-height: 85vh; border: none; border-radius: 18px 18px 0 0;
    padding: 8px 16px calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateY(100%); transition: transform .22s ease; }
  .adv-filter-overlay.open .adv-filter-panel { transform: translateY(0); }
  .adv-filter-panel .filter-sheet-handle { display: block; }
  /* Dòng hội thoại: badge dồn 1 hàng (không tràn đẩy dòng xem trước xuống) + ẩn nhãn tự do cho gọn. */
  .conv-item-channel { flex-wrap: nowrap; overflow: hidden; }
  .conv-item .conv-item-tags { display: none; }
  .chat-header { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
  .chat-header-actions { overflow-x: auto; flex-wrap: nowrap; width: 100%; scrollbar-width: none; }
  .chat-header-actions::-webkit-scrollbar { display: none; }
  .bot-toggle-wrap { border-left: none; padding-left: 0; margin-left: 0; }
  /* Header chat quá nhiều nút -> hàng cuộn ngang dài. Gọn lại cho vừa màn: toggle phân loại chỉ hiện
     ICON (font-size:0 giấu chữ, icon .ph vẫn hiện nhờ set lại cỡ), nút active vẫn đổi màu + có title
     để biết đang chọn gì; và ẩn nhãn "Bot đang trả lời/Người xử lý" (chỉ còn công tắc đỏ=bot bật). */
  .contact-type-toggle .ctt-btn { font-size: 0; padding: 6px 9px; }
  .contact-type-toggle .ctt-btn i { font-size: 16px; }
  .bot-toggle-wrap span { display: none; }
  /* Header khung chat gọn: giấu các thao tác phụ (2 select + kết bạn + 5 nút panel) khỏi hàng nút,
     đưa vào bottom sheet mở bằng nút "⋯" - header chỉ còn phân loại + "⋯" + công tắc bot, hết tràn. */
  .chat-actions-secondary { display: none; }
  .chat-more-btn { display: inline-flex; }
  .chat-header-info .uid { display: none; } /* bỏ dòng ID dài cho gọn hàng tên */
  /* Panel CRM/Nhãn/Ghi chú/Lịch sử: thay vì chia cột 280px cạnh khung chat (quá chật), che full màn
     hình chat khi mở - panel.style.display do JS bật/tắt (xem toggleSidePanel) vẫn giữ nguyên. */
  .chat-side-panel { position: absolute; inset: 0; width: 100%; border-left: none; z-index: 20; }

  /* Các trang dạng "-inner" (Cài đặt/Hướng dẫn/Zalo OA/Thống kê/Broadcast/Đội nhóm/Billing...) -
     giảm lề 2 bên, giảm padding khối card, gộp lưới 2-3 cột về 1 cột cho đỡ chật trên màn hẹp. */
  .settings-inner, .guide-inner, .oa-inner, .stats-inner, .broadcast-inner, .team-inner, .billing-inner, .crm-inner {
    padding: 20px 14px;
  }
  .settings-section, .connect-form, .stat-card, .stats-section, .upgrade-box {
    padding: 16px;
  }
  .settings-grid, .usage-cards, .upgrade-plans { grid-template-columns: 1fr; }

  /* Bong bóng chat: 68% của màn 375px chỉ còn ~250px, tin nhắn dài bị bẻ dòng liên tục - app chat
     mobile (Zalo/Messenger) đều dùng ~80-85%. Kèm giảm lề khung chat cho rộng chỗ. */
  .bubble-col { max-width: 85%; }
  .chat-messages { padding: 12px 10px; }

  /* Danh sách Khách hàng (CRM): 1 dòng gồm checkbox + avatar + thông tin + select bước pipeline +
     3 nút + thời gian - không thể đứng cùng 1 hàng trên màn 360-430px. Cho phép xuống dòng: hàng 1
     là checkbox/avatar/thông tin, cụm select + nút tự rơi xuống hàng 2. */
  .member-card.crm-row { flex-wrap: wrap; row-gap: 8px; }
  /* flex-basis lớn ép phần thông tin (inline style flex:1) chiếm trọn phần còn lại của hàng đầu,
     đẩy cụm thao tác xuống hàng riêng thay vì chen 1 nửa ở hàng trên 1 nửa ở hàng dưới. */
  .member-card.crm-row .member-info { flex-basis: 55%; }
  .upcoming-meeting-row { flex-wrap: wrap; }

  /* Kanban trên điện thoại: cột rộng ~72% màn -> luôn ló ~28% cột kế bên làm CHỖ THẢ nhìn thấy được,
     kéo thẻ sang phải một đoạn ngắn là thả vào cột sau (không phải kéo hết màn); các cột xa hơn thì
     kéo tới mép phải để bảng tự cuộn tới. Snap "proximity" (không "mandatory") để lúc kéo/cuộn tay
     không bị giật snap. Cách chắc ăn nhất vẫn là nút "⇅ Chuyển bước" trên thẻ -> chọn bước, khỏi kéo. */
  .crm-kanban { gap: 10px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
  .kanban-col { flex-basis: 72vw; width: 72vw; scroll-snap-align: start; }
  .crm-view-toggle { flex: 1; }
  .cvt-btn { flex: 1; justify-content: center; }
  /* Nút ⇅ và các nút thao tác trên thẻ: tăng vùng chạm cho ngón tay trên điện thoại. */
  .kc-move { padding: 6px 8px; font-size: 16px; }
  .kc-actions .ghost.sm { padding: 6px 9px; }

  /* Modal dùng chung: bớt padding cho rộng nội dung trên màn hẹp. */
  .reset-popup { padding: 18px 16px; }
  .reset-popup-overlay { padding: 12px; }

  /* Hộp tiến độ gửi hàng loạt (góc phải dưới): tránh đè lên thanh điều hướng dưới cùng. */
  .bulk-job-indicator {
    left: 12px; right: 12px; max-width: none;
    bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  }
  /* View Lịch: ô ngày hẹp trên mobile -> ẩn text sự kiện, thay bằng chấm màu; bấm ngày xem chi tiết. */
  .cal-day { min-height: 54px; padding: 3px 2px; }
  .cal-event, .cal-more { display: none; }
  .cal-evdots { display: flex; flex-wrap: wrap; }
  .cal-day-num { font-size: 11px; width: 20px; height: 20px; }
  .cal-title { min-width: 100px; font-size: 14px; }
  /* Thời khóa biểu tuần trên mobile: gutter + cột hẹp lại, khối chỉ hiện giờ (bấm xem chi tiết). */
  .cw-gutter, .cw-gutter-head { width: 34px; }
  .cw-hour span { font-size: 9px; right: 3px; }
  .cw-dayhead { padding: 6px 1px; }
  .cw-dow { font-size: 9px; }
  .cw-date { font-size: 11px; }
  .cw-event { font-size: 9px; padding: 1px 2px; }
  .cw-ev-name { display: none; }
}