/* ============================================================================
   Pancakes — hệ thống thiết kế

   Nguyên tắc:
   1. Nền trắng, chữ đen. Không dùng màu để trang trí — màu chỉ để BÁO TRẠNG THÁI
      (lỗi, cảnh báo), và cực kỳ tiết chế.
   2. Phân cấp bằng KÍCH THƯỚC và ĐỘ ĐẬM của chữ, không bằng màu sắc.
   3. Đường kẻ mảnh 1px thay cho đổ bóng. Bóng làm giao diện nặng và cũ.
   4. Khoảng trắng rộng rãi. Đây là thứ khiến giao diện trông đắt tiền.
   5. Bo góc nhỏ (4–6px). Bo tròn nhiều trông mềm yếu và thiếu chuyên nghiệp.

   Agent nhìn màn hình này 8 tiếng mỗi ngày — mọi thứ loè loẹt đều thành gánh nặng.
   ========================================================================== */

:root {
  /* ── Nền ─────────────────────────────────────────────────────────────── */
  --bg:            #ffffff;
  --bg-subtle:     #fafafa;   /* vùng nền phụ, danh sách */
  --bg-hover:      #f5f5f5;
  --bg-active:     #f0f0f0;
  --bg-inverse:    #0a0a0a;

  /* ── Chữ ─────────────────────────────────────────────────────────────── */
  --fg:            #0a0a0a;   /* chữ chính — gần đen, không đen tuyệt đối
                                 (#000 trên nền trắng gây mỏi mắt) */
  --fg-secondary:  #525252;
  --fg-muted:      #8a8a8a;
  --fg-faint:      #b4b4b4;
  --fg-inverse:    #ffffff;

  /* ── Đường kẻ ────────────────────────────────────────────────────────── */
  --border:        #e8e8e8;
  --border-strong: #d4d4d4;
  --border-focus:  #0a0a0a;

  /* ── Trạng thái — dùng RẤT tiết chế ──────────────────────────────────── */
  --danger:        #c0392b;
  --danger-bg:     #fdf2f0;
  --warning:       #a16207;
  --warning-bg:    #fefce8;
  --success:       #15803d;
  --success-bg:    #f0fdf4;

  /* ── Kích thước ──────────────────────────────────────────────────────── */
  --rail-w:        56px;
  --list-w:        340px;
  --panel-w:       300px;
  --topbar-h:      52px;

  /* ── Chữ ─────────────────────────────────────────────────────────────── */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", "Cascadia Code", Consolas, "Liberation Mono", monospace;

  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 13px;
  --text-md:   14px;
  --text-lg:   16px;
  --text-xl:   20px;
  --text-2xl:  26px;

  --radius:    5px;
  --radius-sm: 4px;
  --radius-lg: 8px;

  /* Chuyển động nhanh — chậm hơn 150ms là người dùng cảm thấy ì */
  --transition: 120ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Ghi đè Bootstrap ──────────────────────────────────────────────────── */
:root {
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--fg);
  --bs-body-font-family: var(--font);
  --bs-body-font-size: var(--text-base);
  --bs-border-color: var(--border);
  --bs-border-radius: var(--radius);
  --bs-primary: var(--fg);
  --bs-link-color: var(--fg);
  --bs-link-hover-color: var(--fg);
  --bs-focus-ring-color: rgba(10, 10, 10, 0.12);
  --bs-focus-ring-width: 3px;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  font-family: var(--font);
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Chữ số cùng bề rộng — cột số liệu và đồng hồ không bị nhảy */
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  /* Chữ càng to thì khoảng cách chữ càng phải chặt */
  letter-spacing: -0.018em;
  color: var(--fg);
  margin: 0;
}

a { color: var(--fg); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

::selection { background: var(--fg); color: var(--fg-inverse); }

:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Thanh cuộn mảnh — thanh cuộn mặc định của Windows quá dày và phá bố cục */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 4px;
  border: 2px solid var(--bg);
}
*::-webkit-scrollbar-thumb:hover { background: var(--fg-faint); }

/* ============================================================================
   Thành phần cơ bản
   ========================================================================== */

.btn {
  --bs-btn-font-size: var(--text-base);
  --bs-btn-border-radius: var(--radius);
  --bs-btn-padding-x: 14px;
  --bs-btn-padding-y: 6px;
  font-weight: 500;
  letter-spacing: -0.006em;
  transition: background var(--transition), border-color var(--transition);
}

.btn-dark {
  --bs-btn-bg: var(--fg);
  --bs-btn-border-color: var(--fg);
  --bs-btn-hover-bg: #262626;
  --bs-btn-hover-border-color: #262626;
  --bs-btn-active-bg: #000;
  --bs-btn-disabled-bg: var(--fg-faint);
  --bs-btn-disabled-border-color: var(--fg-faint);
}

.btn-outline-dark {
  --bs-btn-color: var(--fg);
  --bs-btn-border-color: var(--border-strong);
  --bs-btn-hover-bg: var(--bg-hover);
  --bs-btn-hover-color: var(--fg);
  --bs-btn-hover-border-color: var(--fg);
}

.btn-ghost {
  background: transparent;
  border: 1px solid transparent;
  color: var(--fg-secondary);
  padding: 5px 9px;
  border-radius: var(--radius);
  font-size: var(--text-base);
  line-height: 1;
  transition: background var(--transition), color var(--transition);
}
.btn-ghost:hover { background: var(--bg-hover); color: var(--fg); }
.btn-ghost:disabled { opacity: 0.4; cursor: not-allowed; }

.form-control, .form-select {
  font-size: var(--text-base);
  border-color: var(--border-strong);
  border-radius: var(--radius);
  padding: 7px 11px;
  color: var(--fg);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-control::placeholder { color: var(--fg-faint); }
.form-control:focus, .form-select:focus {
  border-color: var(--fg);
  box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.06);
}
.form-label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--fg-secondary);
  margin-bottom: 5px;
  letter-spacing: -0.004em;
}

/* Nhãn nhỏ — dùng cho trạng thái, kênh, phân loại */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 19px;
  padding: 0 7px;
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1;
  color: var(--fg-secondary);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 3px;
  white-space: nowrap;
}
.tag-solid { background: var(--fg); border-color: var(--fg); color: var(--fg-inverse); }
.tag-danger { background: var(--danger-bg); border-color: #f5d5d0; color: var(--danger); }
.tag-warning { background: var(--warning-bg); border-color: #f5ebc0; color: var(--warning); }
.tag-success { background: var(--success-bg); border-color: #ccebd6; color: var(--success); }

/* Chấm trạng thái kênh */
.dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--fg-faint);
}
.dot-ok { background: var(--success); }
.dot-warn { background: var(--warning); }
.dot-bad { background: var(--danger); }

.divider { height: 1px; background: var(--border); border: 0; margin: 0; }

/* Nhãn phần — chữ nhỏ, viết hoa, giãn cách rộng */
.section-label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.mono { font-family: var(--font-mono); font-size: var(--text-xs); }

/* ============================================================================
   Trang đăng nhập
   ========================================================================== */

.auth-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--bg);
}

.auth-card {
  width: 100%;
  max-width: 348px;
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 30px;
}
.auth-mark {
  width: 26px; height: 26px;
  border-radius: 6px;
  background: var(--fg);
  display: grid; place-items: center;
  color: var(--fg-inverse);
  font-size: 13px; font-weight: 700;
  letter-spacing: -0.03em;
}
.auth-title {
  font-size: var(--text-2xl);
  font-weight: 600;
  letter-spacing: -0.03em;
  margin-bottom: 5px;
}
.auth-sub {
  font-size: var(--text-md);
  color: var(--fg-muted);
  margin-bottom: 26px;
}
.auth-foot {
  margin-top: 22px;
  font-size: var(--text-sm);
  color: var(--fg-faint);
  text-align: center;
}

/* ============================================================================
   Trang có thanh trên (bảng điều khiển)
   ========================================================================== */

.page-shell { background: var(--bg-subtle); min-height: 100vh; }

.topbar {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 0 20px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 20;
}
.topbar-brand {
  display: flex; align-items: center; gap: 8px;
  font-weight: 600; letter-spacing: -0.018em;
  color: var(--fg); text-decoration: none;
}
.topbar-brand:hover { text-decoration: none; }
.topbar-nav { display: flex; gap: 2px; }
.topbar-link {
  padding: 5px 11px;
  border-radius: var(--radius);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--fg-muted);
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}
.topbar-link:hover { background: var(--bg-hover); color: var(--fg); text-decoration: none; }
.topbar-link.active { background: var(--bg-active); color: var(--fg); }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.topbar-user { font-size: var(--text-base); color: var(--fg-secondary); }

.page {
  max-width: 1180px;
  margin: 0 auto;
  padding: 20px 20px 48px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
}
.card-tight { padding: 6px 8px; }
.card-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 13px;
}
.card-title {
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.02em;
  flex: 1;
}
.card-actions { display: flex; align-items: center; gap: 7px; }

/* ── Trang pháp lý ─────────────────────────────────────────────────────
   Chữ to hơn và dòng thưa hơn phần còn lại: đây là văn bản để ĐỌC, không
   phải giao diện để thao tác nhanh. */
.legal { padding: 30px 34px; }
.legal-title {
  font-size: var(--text-2xl);
  font-weight: 600;
  letter-spacing: -0.028em;
  margin-bottom: 6px;
}
.legal-meta {
  font-size: var(--text-sm);
  color: var(--fg-muted);
  margin-bottom: 26px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.legal h2 {
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.018em;
  margin: 26px 0 9px;
  color: var(--fg);
}
.legal h2:first-of-type { margin-top: 0; }
.legal p,
.legal li {
  font-size: var(--text-md);
  line-height: 1.68;
  color: var(--fg-secondary);
}
.legal p { margin: 0 0 12px; }
.legal ul { margin: 0 0 14px; padding-left: 20px; }
.legal li { margin-bottom: 5px; }
.legal strong { color: var(--fg); font-weight: 600; }
.legal a { color: var(--fg); text-decoration: underline; text-underline-offset: 2px; }
.legal .lead { font-size: var(--text-lg); color: var(--fg); margin-bottom: 22px; }
.legal blockquote {
  margin: 0 0 14px;
  padding: 12px 16px;
  background: var(--bg-subtle);
  border-left: 3px solid var(--fg);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: var(--text-md);
  color: var(--fg);
}
.legal-foot {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--fg-muted);
  margin: 0;
}

/* ── Tab lọc theo nền tảng ─────────────────────────────────────────── */
.chan-tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.chan-tabs::-webkit-scrollbar { display: none; }

.chan-tab {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 13px;
  border: 0; background: transparent;
  border-radius: var(--radius);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--fg-secondary);
  cursor: pointer;
  position: relative;
  transition: background var(--transition), color var(--transition);
}
.chan-tab:hover { background: var(--bg-hover); color: var(--fg); }
.chan-tab.active { background: var(--bg-active); color: var(--fg); }
.chan-tab .count {
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  font-size: 10px; font-weight: 600;
  display: grid; place-items: center;
}
.chan-tab.active .count { background: var(--bg); }
/* Chấm báo có tin chưa đọc trên nền tảng đó */
.chan-tab[data-unread]:not([data-unread="0"])::after {
  content: "";
  position: absolute; top: 5px; right: 5px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--danger);
}

/* Biểu tượng nền tảng — chữ đơn sắc, không dùng logo màu.
   Logo màu của Facebook/TikTok/Zalo đặt cạnh nhau sẽ phá vỡ hoàn toàn
   tính tiết chế của bảng màu trắng đen. */
.chan-mark {
  width: 20px; height: 20px;
  border-radius: 5px;
  display: grid; place-items: center;
  font-size: 9px; font-weight: 700;
  letter-spacing: -0.02em;
  background: var(--fg);
  color: var(--fg-inverse);
  flex: 0 0 auto;
}
.chan-mark-lg { width: 30px; height: 30px; border-radius: 7px; font-size: 12px; }

/* ── Lưới kênh ─────────────────────────────────────────────────────── */
.conn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(292px, 1fr));
  gap: 10px;
}

.conn-card {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: border-color var(--transition), background var(--transition);
}
.conn-card:hover { border-color: var(--border-strong); background: var(--bg-subtle); }
.conn-avatar {
  width: 38px; height: 38px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  object-fit: cover;
  background: var(--bg-subtle);
  flex: 0 0 auto;
}
.conn-info { flex: 1; min-width: 0; }
.conn-name {
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: -0.008em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.conn-sub {
  display: flex; align-items: center; gap: 5px;
  margin-top: 3px;
  font-size: var(--text-sm);
  color: var(--fg-muted);
  min-width: 0;
}
.conn-sub span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ============================================================================
   Cửa sổ nổi
   ========================================================================== */

.modal-content {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 48px rgba(10, 10, 10, 0.14);
}
.modal-header {
  border-bottom: 1px solid var(--border);
  padding: 14px 18px;
}
.modal-title { font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.02em; }
.modal-body { padding: 16px 18px; }
.modal-footer {
  border-top: 1px solid var(--border);
  padding: 11px 18px;
  gap: 7px;
}
.modal-footer .composer-hint { margin-right: auto; }
.modal-backdrop.show { opacity: 0.28; }

.connect-split { display: grid; grid-template-columns: 186px 1fr; min-height: 428px; }

.connect-side {
  border-right: 1px solid var(--border);
  padding: 8px;
  overflow-y: auto;
  max-height: 520px;
}
.connect-item {
  display: flex; align-items: center; gap: 9px;
  width: 100%;
  padding: 8px 9px;
  border: 0; background: transparent;
  border-radius: var(--radius);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--fg-secondary);
  cursor: pointer;
  text-align: left;
  transition: background var(--transition), color var(--transition);
}
.connect-item:hover { background: var(--bg-hover); color: var(--fg); }
.connect-item.active { background: var(--bg-active); color: var(--fg); }
.connect-item .badge-count {
  margin-left: auto;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px;
  background: var(--fg); color: var(--fg-inverse);
  font-size: 10px; font-weight: 600;
  display: grid; place-items: center;
}

.connect-main { display: flex; flex-direction: column; min-width: 0; max-height: 520px; }
.connect-head {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
}
.connect-head .section-label { flex: 1; }
.connect-foot {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 16px;
  border-top: 1px solid var(--border);
  margin-top: auto;
}
.connect-foot .spacer { flex: 1; }

.pending-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 7px;
  align-content: start;
}

.pending-item {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  background: var(--bg);
  transition: border-color var(--transition), background var(--transition);
}
.pending-item:hover { border-color: var(--border-strong); }
.pending-item.sel { border-color: var(--fg); background: var(--bg-subtle); }
.pending-item img {
  width: 32px; height: 32px; border-radius: var(--radius);
  border: 1px solid var(--border); object-fit: cover; flex: 0 0 auto;
}
.pending-item .info { flex: 1; min-width: 0; }
.pending-item .nm {
  font-size: var(--text-base); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pending-item .id {
  font-size: var(--text-xs); color: var(--fg-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pending-item input[type="checkbox"] { flex: 0 0 auto; accent-color: var(--fg); }

.connect-empty {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 40px 30px; text-align: center;
}
.connect-logo {
  width: 46px; height: 46px;
  border-radius: 11px;
  background: var(--fg); color: var(--fg-inverse);
  display: grid; place-items: center;
  font-size: 16px; font-weight: 700;
  margin-bottom: 15px;
}
.connect-note {
  margin-top: 14px;
  font-size: var(--text-sm);
  color: var(--fg-faint);
  max-width: 340px;
  line-height: 1.55;
}

.merge-list {
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 5px;
}
.merge-item {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 8px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--transition);
}
.merge-item:hover { background: var(--bg-hover); }
.merge-item input[type="checkbox"] { accent-color: var(--fg); }
.merge-item .nm { flex: 1; font-size: var(--text-base); min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.merge-item.disabled { opacity: 0.45; cursor: not-allowed; }

.group-row {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 6px;
}
.group-row .nm { flex: 1; font-size: var(--text-base); font-weight: 500; }

/* ============================================================================
   Khung ứng dụng — 4 cột
   ========================================================================== */

.app {
  display: grid;
  grid-template-columns: var(--rail-w) var(--list-w) 1fr var(--panel-w);
  height: 100vh;
  overflow: hidden;
}
.app.panel-hidden { grid-template-columns: var(--rail-w) var(--list-w) 1fr 0; }

/* ── Cột 1: thanh điều hướng dọc ─────────────────────────────────────── */
.rail {
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0;
  gap: 3px;
  background: var(--bg);
}
.rail-mark {
  width: 28px; height: 28px;
  border-radius: 7px;
  background: var(--fg);
  color: var(--fg-inverse);
  display: grid; place-items: center;
  font-size: 13px; font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: 12px;
}
.rail-btn {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: var(--radius);
  color: var(--fg-muted);
  border: 0; background: transparent;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
  position: relative;
}
.rail-btn:hover { background: var(--bg-hover); color: var(--fg); }
.rail-btn.active { background: var(--bg-active); color: var(--fg); }
.rail-btn svg { width: 17px; height: 17px; }
.rail-spacer { flex: 1; }

/* Chấm báo có tin chưa đọc */
.rail-btn[data-badge]:not([data-badge=""])::after {
  content: "";
  position: absolute;
  top: 6px; right: 6px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--fg);
}

/* ── Cột 2: danh sách hội thoại ──────────────────────────────────────── */
.list-col {
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--bg);
}

.list-head {
  height: var(--topbar-h);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 12px 0 16px;
  border-bottom: 1px solid var(--border);
}
.list-title { font-size: var(--text-md); font-weight: 600; letter-spacing: -0.014em; }

.list-search { padding: 10px 12px; border-bottom: 1px solid var(--border); }
.list-search .form-control {
  font-size: var(--text-base);
  padding: 5px 10px;
  background: var(--bg-subtle);
  border-color: transparent;
}
.list-search .form-control:focus { background: var(--bg); border-color: var(--fg); }

.list-filters {
  display: flex;
  gap: 5px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}
.list-filters::-webkit-scrollbar { display: none; }
.filter-chip {
  flex: 0 0 auto;
  height: 24px;
  padding: 0 10px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--fg-secondary);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: all var(--transition);
}
.filter-chip:hover { border-color: var(--border-strong); color: var(--fg); }
.filter-chip.active {
  background: var(--fg);
  border-color: var(--fg);
  color: var(--fg-inverse);
}

/* ── Nhãn màu ──────────────────────────────────────────────────────────
   Đây là ngoại lệ DUY NHẤT của nguyên tắc "không dùng màu để trang trí":
   nhãn màu tồn tại chính là để phân biệt bằng mắt khi lướt danh sách dài.
   Vì vậy màu ở đây được giữ nhạt và nhỏ, không lấn át chữ. */
.swatch-row {
  display: flex;
  gap: 5px;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}
.chat-head .swatch-row { border-bottom: 0; padding: 0; margin-right: 4px; }

.swatch {
  width: 16px; height: 16px;
  border-radius: 4px;
  border: 1px solid rgba(10, 10, 10, 0.1);
  cursor: pointer;
  padding: 0;
  flex: 0 0 auto;
  transition: transform var(--transition), box-shadow var(--transition);
}
.swatch:hover { transform: scale(1.14); }
.swatch.active { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--fg); }

.swatch-gray   { background: #d4d4d4; }
.swatch-purple { background: #ddd0f0; }
.swatch-blue   { background: #c9dcf5; }
.swatch-green  { background: #cbe9d3; }
.swatch-cyan   { background: #c6e7ea; }
.swatch-red    { background: #f3cfc9; }
.swatch-clear {
  background: transparent;
  border: 1px dashed var(--border-strong);
  color: var(--fg-muted);
  font-size: 11px; line-height: 1;
  display: grid; place-items: center;
}
.swatch-clear:hover { border-color: var(--fg); color: var(--fg); }

/* Dải nhãn trên từng dòng hội thoại */
.conv-item[data-label] { border-left-width: 3px; }
.conv-item[data-label="gray"]   { border-left-color: #d4d4d4; }
.conv-item[data-label="purple"] { border-left-color: #c4a8e8; }
.conv-item[data-label="blue"]   { border-left-color: #9dc0ea; }
.conv-item[data-label="green"]  { border-left-color: #a3d9b4; }
.conv-item[data-label="cyan"]   { border-left-color: #9ad4d9; }
.conv-item[data-label="red"]    { border-left-color: #e5a99e; }
/* Đang chọn thì dải đen thắng, để luôn thấy rõ dòng nào đang mở */
.conv-item.active[data-label] { border-left-color: var(--fg); }

/* Huy hiệu kênh cạnh tên khách */
.conv-chan {
  display: inline-grid; place-items: center;
  width: 14px; height: 14px;
  border-radius: 3px;
  background: var(--fg);
  color: var(--fg-inverse);
  font-size: 8px; font-weight: 700;
  letter-spacing: -0.02em;
  flex: 0 0 auto;
  margin-right: 1px;
}

/* Biểu tượng cho biết khách đã có SĐT / email — nhìn là biết đủ thông tin
   để chốt đơn chưa, không phải mở từng hồ sơ ra xem */
.conv-has { display: inline-flex; gap: 3px; color: var(--fg-faint); }
.conv-has svg { width: 12px; height: 12px; }

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

.conv-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 11px 16px;
  border: 0;
  border-bottom: 1px solid var(--border);
  /* Dải chỉ báo bên trái, ẩn cho đến khi được chọn — tránh nhảy bố cục */
  border-left: 2px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: background var(--transition);
}
.conv-item:hover { background: var(--bg-hover); }
.conv-item.active { background: var(--bg-active); border-left-color: var(--fg); }

.conv-row { display: flex; align-items: baseline; gap: 8px; }
.conv-name {
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: -0.008em;
  color: var(--fg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1; min-width: 0;
}
.conv-time { font-size: var(--text-xs); color: var(--fg-faint); flex: 0 0 auto; }
.conv-preview {
  font-size: var(--text-sm);
  color: var(--fg-muted);
  margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.conv-meta { display: flex; align-items: center; gap: 6px; margin-top: 6px; }

.conv-unread .conv-name { font-weight: 700; }
.conv-unread .conv-preview { color: var(--fg-secondary); font-weight: 500; }
.conv-badge {
  min-width: 17px; height: 17px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--fg);
  color: var(--fg-inverse);
  font-size: 10px; font-weight: 600;
  display: grid; place-items: center;
  flex: 0 0 auto;
}

/* ── Cột 3: khung chat ───────────────────────────────────────────────── */
.chat-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--bg);
}

.chat-head {
  height: var(--topbar-h);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border-bottom: 1px solid var(--border);
}
.chat-who { min-width: 0; flex: 1; }
.chat-name {
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: -0.012em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-sub {
  font-size: var(--text-xs);
  color: var(--fg-muted);
  display: flex; align-items: center; gap: 6px;
}

.chat-body {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.day-sep {
  display: flex; align-items: center; gap: 12px;
  margin: 18px 0 14px;
  font-size: var(--text-xs);
  color: var(--fg-faint);
}
.day-sep::before, .day-sep::after {
  content: ""; flex: 1; height: 1px; background: var(--border);
}

/* Bong bóng tin nhắn.
   Tin của khách: nền xám nhạt, canh trái.
   Tin của mình:  nền đen,      canh phải.
   Chỉ hai mức tương phản, không dùng màu — dễ quét mắt hơn nhiều. */
.msg { display: flex; max-width: 100%; }
.msg-in  { justify-content: flex-start; }
.msg-out { justify-content: flex-end; }

.bubble {
  max-width: min(560px, 74%);
  padding: 8px 12px;
  border-radius: 14px;
  font-size: var(--text-md);
  line-height: 1.5;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.msg-in .bubble {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
  color: var(--fg);
}
.msg-out .bubble {
  background: var(--fg);
  color: var(--fg-inverse);
  border-bottom-right-radius: 4px;
}
/* Tin do bot gửi — viền đứt để phân biệt ngay với tin người thật gửi */
.msg-out.msg-bot .bubble {
  background: var(--bg);
  color: var(--fg);
  border: 1px dashed var(--border-strong);
}

/* Nhóm tin liên tiếp cùng người gửi thì bo góc liền mạch */
.msg.grouped { margin-top: -1px; }
.msg-in.grouped .bubble { border-top-left-radius: 4px; }
.msg-out.grouped .bubble { border-top-right-radius: 4px; }

.msg-foot {
  display: flex; align-items: center; gap: 5px;
  margin: 3px 2px 8px;
  font-size: var(--text-xs);
  color: var(--fg-faint);
}
.msg-out .msg-foot { justify-content: flex-end; }

.bubble-img {
  display: block;
  max-width: 260px;
  border-radius: 10px;
  margin-top: 6px;
}

/* Tin gửi lỗi — đây là lúc DUY NHẤT dùng màu đỏ */
.msg-error {
  align-self: flex-end;
  max-width: min(560px, 74%);
  margin: 2px 0 10px;
  padding: 9px 12px;
  background: var(--danger-bg);
  border: 1px solid #f0cfc9;
  border-radius: var(--radius);
  font-size: var(--text-sm);
  color: var(--danger);
}
.msg-error-title { font-weight: 600; margin-bottom: 2px; }
.msg-error-hint { color: #8f4034; margin-top: 3px; }
.msg-error-actions { display: flex; gap: 6px; margin-top: 8px; }

/* ── Ô soạn tin ──────────────────────────────────────────────────────── */
.composer {
  flex: 0 0 auto;
  border-top: 1px solid var(--border);
  padding: 10px 14px 12px;
  background: var(--bg);
  position: relative;
}
.composer-box {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition), box-shadow var(--transition);
  background: var(--bg);
}
.composer-box:focus-within {
  border-color: var(--fg);
  box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.05);
}
.composer textarea {
  width: 100%;
  border: 0;
  outline: 0;
  resize: none;
  padding: 10px 12px 4px;
  font-family: var(--font);
  font-size: var(--text-md);
  line-height: 1.5;
  color: var(--fg);
  background: transparent;
  max-height: 168px;
  overflow-y: auto;
}
.composer textarea::placeholder { color: var(--fg-faint); }
.composer-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px 7px 8px;
}
.composer-bar .spacer { flex: 1; }
.composer-hint { font-size: var(--text-xs); color: var(--fg-faint); }

.composer-blocked {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 12px;
  margin-bottom: 9px;
  background: var(--warning-bg);
  border: 1px solid #f0e6bc;
  border-radius: var(--radius);
  font-size: var(--text-sm);
  color: var(--warning);
}

/* Khay ảnh đính kèm chờ gửi */
.attach-tray { display: flex; flex-wrap: wrap; gap: 7px; padding: 8px 10px 0; }
.attach-item {
  position: relative;
  width: 52px; height: 52px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow: hidden;
  background: var(--bg-subtle);
}
.attach-item img { width: 100%; height: 100%; object-fit: cover; }
.attach-remove {
  position: absolute; top: 2px; right: 2px;
  width: 16px; height: 16px;
  border: 0; border-radius: 50%;
  background: rgba(10, 10, 10, 0.72);
  color: #fff;
  font-size: 10px; line-height: 1;
  display: grid; place-items: center;
  cursor: pointer;
}

/* ── Bảng lệnh gạch chéo ─────────────────────────────────────────────── */
.slash {
  position: absolute;
  left: 14px; right: 14px;
  bottom: calc(100% - 2px);
  max-height: 296px;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  /* Popover là chỗ DUY NHẤT dùng đổ bóng — nó thật sự nổi lên trên */
  box-shadow: 0 8px 28px rgba(10, 10, 10, 0.1), 0 1px 3px rgba(10, 10, 10, 0.06);
  overflow: hidden;
  display: none;
  z-index: 30;
}
.slash.open { display: flex; }
.slash-list { flex: 1 1 55%; overflow-y: auto; padding: 5px; min-width: 0; }
.slash-preview {
  flex: 1 1 45%;
  border-left: 1px solid var(--border);
  padding: 13px 15px;
  overflow-y: auto;
  background: var(--bg-subtle);
  min-width: 0;
}
.slash-empty { padding: 22px 16px; text-align: center; color: var(--fg-muted); font-size: var(--text-sm); }

.slash-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 7px 9px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: background var(--transition);
}
.slash-item:hover { background: var(--bg-hover); }
.slash-item.sel { background: var(--bg-active); }
.slash-key {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--fg);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 5px;
  flex: 0 0 auto;
}
.slash-item.sel .slash-key { background: var(--bg); }
.slash-title {
  font-size: var(--text-base);
  color: var(--fg-secondary);
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.slash-meta { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; }

.slash-preview-body {
  font-size: var(--text-base);
  line-height: 1.6;
  white-space: pre-wrap;
  word-wrap: break-word;
  color: var(--fg);
}
.slash-preview-imgs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.slash-preview-imgs img {
  width: 56px; height: 56px;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.slash-foot {
  display: flex; gap: 12px;
  padding: 7px 11px;
  border-top: 1px solid var(--border);
  font-size: var(--text-xs);
  color: var(--fg-faint);
  background: var(--bg);
}
kbd {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 1px 4px;
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: 3px;
  background: var(--bg);
  color: var(--fg-secondary);
}

/* ── Cột 4: thông tin khách ──────────────────────────────────────────── */
.panel-col {
  border-left: 1px solid var(--border);
  overflow-y: auto;
  background: var(--bg);
  min-height: 0;
}
.app.panel-hidden .panel-col { display: none; }

.panel-head {
  height: var(--topbar-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 12px 0 16px;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: var(--bg); z-index: 2;
}
.panel-sec { padding: 15px 16px; border-bottom: 1px solid var(--border); }
.panel-sec:last-child { border-bottom: 0; }

.field { margin-bottom: 11px; }
.field:last-child { margin-bottom: 0; }
.field-label {
  font-size: var(--text-xs);
  color: var(--fg-muted);
  margin-bottom: 2px;
}
.field-value {
  font-size: var(--text-base);
  color: var(--fg);
  display: flex; align-items: center; gap: 6px;
  word-break: break-word;
}
.field-empty { color: var(--fg-faint); }

/* Dữ liệu cá nhân bị che — dùng chữ đều để hàng dấu sao không nhảy */
.masked { font-family: var(--font-mono); letter-spacing: 0.02em; }
.reveal-btn {
  font-size: var(--text-xs);
  color: var(--fg-muted);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.reveal-btn:hover { color: var(--fg); }

/* ── Trạng thái rỗng ─────────────────────────────────────────────────── */
.empty {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 40px;
  text-align: center;
}
.empty-inner { max-width: 280px; }
.empty-mark {
  width: 40px; height: 40px;
  margin: 0 auto 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  display: grid; place-items: center;
  color: var(--fg-faint);
}
.empty-title { font-size: var(--text-md); font-weight: 600; margin-bottom: 4px; }
.empty-text { font-size: var(--text-base); color: var(--fg-muted); line-height: 1.55; }

/* ── Khung xương khi đang tải ────────────────────────────────────────── */
.skel {
  background: linear-gradient(90deg, var(--bg-subtle) 25%, #f0f0f0 37%, var(--bg-subtle) 63%);
  background-size: 400% 100%;
  animation: skel 1.3s ease-in-out infinite;
  border-radius: var(--radius-sm);
}
@keyframes skel { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ── Thông báo nổi ───────────────────────────────────────────────────── */
.toasts {
  position: fixed;
  bottom: 18px; right: 18px;
  display: flex; flex-direction: column; gap: 8px;
  z-index: 1080;
  max-width: 360px;
}
.toast-item {
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(10, 10, 10, 0.08);
  padding: 11px 13px;
  font-size: var(--text-base);
  animation: toast-in 180ms cubic-bezier(0.2, 0.9, 0.3, 1);
}
.toast-item.err { border-color: #f0cfc9; background: var(--danger-bg); color: var(--danger); }
.toast-title { font-weight: 600; margin-bottom: 2px; }
.toast-trace {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-faint);
  margin-top: 6px;
  cursor: pointer;
}
.toast-trace:hover { color: var(--fg-secondary); text-decoration: underline; }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ── Màn hình hẹp ────────────────────────────────────────────────────── */
@media (max-width: 1240px) {
  .app { grid-template-columns: var(--rail-w) var(--list-w) 1fr 0; }
  .panel-col { display: none; }
}
@media (max-width: 900px) {
  :root { --list-w: 280px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}