/* ==========================================================================
   CSKH Agent — bảng điều khiển vận hành TikTok Shop
   Nền sáng, nhấn xanh lá đậm. Mật độ cao: nhân viên ngồi nhìn cả ngày nên ưu tiên
   đọc nhanh, tương phản đủ mạnh, không chói. Không build, không framework.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Token
   -------------------------------------------------------------------------- */
:root {
  /* Bề mặt — card trắng nổi trên nền ngả xanh rất nhạt, mỗi bậc đậm hơn một chút */
  --bg:       #f1f6f2;
  --panel:    #ffffff;
  --panel-2:  #eef3ef;
  --panel-3:  #e1eae4;
  --line:     #dde6e0;
  --line-2:   #c2d0c7;
  /* Viền khi rê chuột: phải đậm hơn --line-2 mới thấy được trên nền trắng. */
  --line-3:   #a3b6a9;

  /* Chữ — xanh lá ngả đen, không dùng đen tuyền cho đỡ gắt */
  --text:   #12241a;
  --text-2: #3a4f43;
  --muted:  #63786c;
  --faint:  #8da096;

  /* Nhấn: xanh lá đậm. Hover ĐẬM hơn chứ không sáng lên — nền sáng thì sáng thêm là mất chữ. */
  --accent:   #15803d;
  --accent-h: #116331;
  --accent-d: #0c4a25;
  --accent-2: #0f766e;

  /* Trạng thái. --ok cố tình trùng --accent: "đã nối", "đang chạy" chính là màu thương hiệu. */
  --ok:     #15803d;
  --warn:   #b45309;
  --danger: #be123c;

  /* Nền mờ + viền cho nhãn trạng thái. Tách riêng để nhãn nào cũng cùng công thức.
     Trên nền trắng thì alpha phải nhỉnh hơn bản nền tối mới nhìn ra. */
  --ok-bg:         rgba(21, 128, 61, .10);
  --ok-line:       rgba(21, 128, 61, .30);
  --warn-bg:       rgba(180, 83, 9, .10);
  --warn-line:     rgba(180, 83, 9, .30);
  --danger-bg:     rgba(190, 18, 60, .09);
  --danger-line:   rgba(190, 18, 60, .28);
  --accent2-bg:    rgba(15, 118, 110, .09);
  --accent2-line:  rgba(15, 118, 110, .28);
  --accent-bg:     rgba(21, 128, 61, .10);
  --accent-line:   rgba(21, 128, 61, .32);

  /* Bong bóng chat: tin khách / nhân viên gõ tay / bot gửi phải khác nhau liếc là thấy. */
  --bubble-shop: #d6ecdd;
  --bubble-bot:  #e2edfa;
  /* Cột "khách gửi" trong biểu đồ — xám ngả xanh, không tranh chỗ với hai màu nhấn. */
  --chart-plain: #9ab0a3;

  /* Thang chữ */
  --fs-micro: 11px;
  --fs-meta:  12px;
  --fs-body:  13px;
  --fs-lg:    14px;
  --fs-h:     15px;
  --fs-xl:    20px;
  --fs-stat:  26px;

  /* Thang khoảng cách — mọi margin/padding bám theo bội số 4 */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;

  /* Bo góc */
  --r-xs:   5px;
  --r-sm:   7px;
  --r-md:   9px;
  --r-lg:   12px;
  --r-full: 999px;
  --radius: var(--r-md);

  --shadow-1: 0 1px 2px rgba(17, 45, 30, .07);
  --shadow-2: 0 10px 30px rgba(17, 45, 30, .13);
  --ring: 0 0 0 3px rgba(21, 128, 61, .20);

  --t: .14s ease;

  --font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
          Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
               'Liberation Mono', monospace;
}

/* --------------------------------------------------------------------------
   2. Nền tảng
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; }

/* Khai báo rõ là giao diện sáng để thanh cuộn, ô chọn ngày và nền autofill do trình
   duyệt tự vẽ không lạc tông sang nền tối. */
html { -webkit-text-size-adjust: 100%; color-scheme: light; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: var(--fs-body)/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button, input, select, textarea { font: inherit; color: inherit; }

b, strong { font-weight: 600; }

code {
  font: 0.92em var(--font-mono);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  padding: 1px 5px;
  color: var(--accent-2);
}

::selection { background: rgba(21, 128, 61, .26); color: var(--text); }

/* Thanh cuộn mảnh, chìm vào nền — không cắt ngang bố cục khi danh sách dài. */
* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line-2);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: var(--r-full);
}
::-webkit-scrollbar-thumb:hover { background: var(--line-3); background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* Vòng focus chung: chỉ hiện khi đi bằng bàn phím, không nhảy khi bấm chuột. */
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-xs); }

/* Tiện ích bố cục */
.grow   { flex: 1; min-width: 0; }
.spacer { flex: 1; }

/* --------------------------------------------------------------------------
   3. Khung chung
   -------------------------------------------------------------------------- */
.shell { display: grid; grid-template-columns: 216px 1fr; height: 100vh; }

.sidebar {
  background: var(--panel);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  padding: var(--sp-4) var(--sp-3);
  gap: 2px;
  overflow: hidden;
}

.brand {
  font-weight: 700;
  font-size: var(--fs-h);
  padding: var(--sp-1) var(--sp-2) var(--sp-5);
  letter-spacing: -0.2px;
}
.brand span { color: var(--accent); }

.nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: 8px 10px;
  border-radius: var(--r-sm);
  cursor: pointer;
  color: var(--muted);
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-size: var(--fs-body);
  font-weight: 500;
  position: relative;
  transition: background var(--t), color var(--t);
}
.nav-item:hover { background: var(--panel-2); color: var(--text-2); }
.nav-item.active { background: var(--panel-2); color: var(--text); font-weight: 600; }
/* Vạch hồng mảnh bên trái cho mục đang mở — biết mình đang ở đâu mà không cần đọc. */
.nav-item.active::before {
  content: '';
  position: absolute;
  inset-block: 7px;
  left: -12px;
  width: 2px;
  border-radius: 0 2px 2px 0;
  background: var(--accent);
}

.nav-spacer { flex: 1; }

.nav-foot {
  border-top: 1px solid var(--line);
  padding-top: var(--sp-3);
  margin-top: var(--sp-2);
  font-size: var(--fs-meta);
  color: var(--text-2);
}
.nav-foot > div:first-child {
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-role {
  margin: 2px 0 10px;
  font-size: var(--fs-micro);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .6px;
}

.main { overflow: hidden; display: flex; flex-direction: column; min-width: 0; }

.topbar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  flex-wrap: wrap;
  min-height: 53px;
}
.topbar h1 {
  font-size: var(--fs-h);
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.2px;
}
/* Select trong topbar co theo nội dung, không kéo dài hết hàng như trong form. */
.topbar select { width: auto; min-width: 148px; }

.content { flex: 1; overflow: auto; padding: var(--sp-5); }
.content.flush { padding: 0; }

/* --------------------------------------------------------------------------
   4. Nút & ô nhập
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  padding: 7px 13px;
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--text-2);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t), border-color var(--t), color var(--t);
}
.btn:hover:not(:disabled) { background: var(--panel-3); border-color: var(--line-3); color: var(--text); }
.btn:active:not(:disabled) { background: var(--line); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}
.btn.primary:hover:not(:disabled) { background: var(--accent-h); border-color: var(--accent-h); color: #fff; }
.btn.primary:active:not(:disabled) { background: var(--accent-d); }

.btn.ghost { background: none; border-color: var(--line); }
.btn.ghost:hover:not(:disabled) { background: var(--panel-2); }

.btn.danger { color: var(--danger); border-color: var(--danger-line); background: none; }
.btn.danger:hover:not(:disabled) { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); }

.btn.sm { padding: 4px 9px; font-size: var(--fs-meta); border-radius: var(--r-xs); }
.btn.block { width: 100%; }
.btn + .btn { margin-left: var(--sp-2); }

a.btn { text-decoration: none; }

input[type=text], input[type=email], input[type=password], input[type=number], select, textarea {
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  padding: 7px 10px;
  width: 100%;
  outline: none;
  color: var(--text);
  transition: border-color var(--t), box-shadow var(--t);
}
input::placeholder, textarea::placeholder { color: var(--faint); }
input:hover:not(:focus), select:hover:not(:focus), textarea:hover:not(:focus) { border-color: var(--line-3); }
input:focus, select:focus, textarea:focus { border-color: var(--accent-2); box-shadow: var(--ring); }

select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 15px) calc(50% + 1px), calc(100% - 10px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 28px;
  cursor: pointer;
}
select[multiple] { background-image: none; padding-right: 10px; }

textarea { resize: vertical; min-height: 72px; font-family: inherit; line-height: 1.55; }

input[type=checkbox] { accent-color: var(--accent); width: 15px; height: 15px; cursor: pointer; }

label {
  display: block;
  font-size: var(--fs-meta);
  color: var(--muted);
  margin-bottom: 5px;
  font-weight: 500;
}

.field { margin-bottom: var(--sp-3); }
.field.grow-1 { flex: 1; }
.field.grow-3 { flex: 3; }

/* Câu giải thích nằm dưới một ô nhập — mờ và nhỏ, không giành chú ý với cái nhãn. */
.hint {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: var(--fs-meta);
  line-height: 1.5;
}
.hint code { font-size: 0.92em; padding: 0 4px; }

.row { display: flex; gap: var(--sp-3); }
.row > * { flex: 1; min-width: 0; }

/* Hàng tuỳ chọn có ô tích — vùng bấm rộng cả dòng, không chỉ cái ô vuông. */
.check {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  margin-bottom: 2px;
  padding: 7px 9px;
  border-radius: var(--r-sm);
  color: var(--text-2);
  font-size: var(--fs-body);
  font-weight: 400;
  cursor: pointer;
  transition: background var(--t), color var(--t);
}
.check:hover { background: var(--panel-2); color: var(--text); }
.check input { flex: none; }

/* --------------------------------------------------------------------------
   5. Nhãn trạng thái
   -------------------------------------------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-micro);
  font-weight: 500;
  line-height: 1.5;
  padding: 2px 8px;
  border-radius: var(--r-full);
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  color: var(--muted);
  white-space: nowrap;
}
.pill.ok     { color: var(--ok);       border-color: var(--ok-line);     background: var(--ok-bg); }
.pill.warn   { color: var(--warn);     border-color: var(--warn-line);   background: var(--warn-bg); }
.pill.danger { color: var(--danger);   border-color: var(--danger-line); background: var(--danger-bg); }
.pill.accent { color: var(--accent-2); border-color: var(--accent2-line);   background: var(--accent2-bg); }

/* Chế độ bot. Auto = bot tự gửi (xanh), copilot = chờ người duyệt (hồng),
   off = bot im (xám). Ba màu khác hẳn nhau để liếc một cái là biết. */
.pill.mode-auto    { color: var(--accent-2); border-color: var(--accent2-line); background: var(--accent2-bg); font-weight: 600; }
.pill.mode-copilot { color: var(--accent);   border-color: var(--accent-line); background: var(--accent-bg); font-weight: 600; }
.pill.mode-off     { color: var(--faint);    border-color: var(--line);      background: transparent; }

/* Độ tự tin của gợi ý — cao thì xanh, lừng chừng thì vàng, thấp thì đỏ. */
.pill.conf-high { color: var(--ok);     border-color: var(--ok-line);     background: var(--ok-bg); }
.pill.conf-mid  { color: var(--warn);   border-color: var(--warn-line);   background: var(--warn-bg); }
.pill.conf-low  { color: var(--danger); border-color: var(--danger-line); background: var(--danger-bg); }

/* Chấm tròn nhỏ dẫn đầu nhãn, dùng cho nhãn cần nổi hơn chữ. */
.pill.dot::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.pill-row { display: flex; flex-wrap: wrap; gap: 5px; }
.pill-row.gap-above { margin-top: var(--sp-3); }
.pill-row.gap-below { margin-bottom: var(--sp-3); }

/* --------------------------------------------------------------------------
   6. Thẻ, lưới, bảng
   -------------------------------------------------------------------------- */
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.card > :last-child { margin-bottom: 0; }
.card h2 {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: -0.1px;
}
.card h2 small { color: var(--muted); font-weight: 400; margin-left: 6px; font-size: var(--fs-meta); }

.card.wide  { grid-column: 1 / -1; }
.card.warn  { border-color: var(--warn-line);   background: linear-gradient(var(--warn-bg), var(--warn-bg)), var(--panel); }
.card.error { border-color: var(--danger-line); background: linear-gradient(var(--danger-bg), var(--danger-bg)), var(--panel); color: var(--danger); }

/* Dòng giải thích dưới tiêu đề thẻ. */
.card-note { color: var(--muted); font-size: var(--fs-meta); line-height: 1.65; margin: 0 0 var(--sp-3); }
.card-note.after { margin: var(--sp-3) 0 0; }

.grid { display: grid; gap: var(--sp-3); }
.grid.c2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid.c4 { grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); }
/* Trong lưới thì khoảng cách do gap lo, bỏ margin của thẻ kẻo hở gấp đôi. */
.grid > .card { margin-bottom: 0; }
.grid + .btn { margin-top: var(--sp-4); }

.stat {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
}
.stat .n {
  font-size: var(--fs-stat);
  font-weight: 650;
  letter-spacing: -0.6px;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.stat .l { font-size: var(--fs-meta); color: var(--muted); margin-top: 3px; }

.kpi-row   { margin-bottom: var(--sp-5); }
.sug-stats { gap: var(--sp-2); margin-bottom: var(--sp-3); }
/* Ô số bên trong thẻ nhỏ hơn ô số ở hàng KPI trên cùng. */
.sug-stats .stat { background: var(--panel-2); padding: var(--sp-2) var(--sp-3); }
.sug-stats .stat .n { font-size: var(--fs-xl); }

table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th {
  color: var(--muted);
  font-weight: 600;
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: .5px;
  white-space: nowrap;
}
tr:last-child td { border-bottom: none; }
tbody tr:hover td, table tr:hover td { background: rgba(21, 128, 61, .045); }
td b { color: var(--text); }

/* Bảng nhiều cột (vd "Theo từng shop" 7 cột) rộng hơn card khi cửa sổ hẹp.
   Cho nó cuộn ngang trong card thay vì lòi hẳn ra ngoài. Màn rộng không đổi gì. */
.card > table { display: block; overflow-x: auto; }

/* Ô phụ trong bảng: id shop, ngày hết hạn token, danh sách shop được giao... */
.cell-muted { font-size: var(--fs-meta); color: var(--muted); }
.cell-sub   { font-size: var(--fs-micro); color: var(--faint); margin-top: 2px; }
.td-content {
  color: var(--muted);
  font-size: var(--fs-meta);
  max-width: 440px;
  line-height: 1.6;
}

.empty {
  color: var(--muted);
  text-align: center;
  padding: 44px var(--sp-5);
  font-size: var(--fs-body);
  line-height: 1.75;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.empty b { color: var(--text-2); font-weight: 600; }
.card .empty { padding: 26px var(--sp-4); }
.thread > .empty, .messages > .empty { flex: 1; }

/* --------------------------------------------------------------------------
   7. Đăng nhập
   -------------------------------------------------------------------------- */
.auth-wrap {
  display: grid;
  /* Cột phải khai rõ minmax(0, 1fr). Để track tự co theo nội dung thì nó rộng đúng
     368px của .auth-box, khiến `max-width: 100%` của hộp cũng bằng 368px và không
     kẹp được gì — ở khổ điện thoại 375px hộp tràn khỏi lề, mép phải bị cắt mất. */
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  height: 100vh;
  padding: var(--sp-5);
  /* Hai quầng sáng rất mờ cho trang trống đỡ phẳng. */
  background:
    radial-gradient(760px 420px at 50% -8%, rgba(21, 128, 61, .13), transparent 70%),
    radial-gradient(620px 380px at 50% 108%, rgba(15, 118, 110, .09), transparent 70%),
    var(--bg);
}
.auth-box {
  width: 368px;
  max-width: 100%;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-8) var(--sp-6) var(--sp-6);
  box-shadow: var(--shadow-2);
}
.auth-box h1 { font-size: var(--fs-xl); margin: 0 0 var(--sp-1); letter-spacing: -0.4px; }
.auth-box h1 span { color: var(--accent); }
.auth-box p.sub { color: var(--muted); margin: 0 0 var(--sp-5); font-size: var(--fs-body); line-height: 1.6; }
.auth-box .btn { margin-top: var(--sp-1); padding: 9px 13px; }

/* --------------------------------------------------------------------------
   8. Inbox — danh sách hội thoại
   -------------------------------------------------------------------------- */
.inbox { display: grid; grid-template-columns: 332px 1fr 300px; height: 100%; overflow: hidden; }

.conv-list { border-right: 1px solid var(--line); overflow: auto; background: var(--panel); }

.conv-filters {
  display: flex;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: var(--panel);
  z-index: 2;
}
.conv-filters select { padding: 5px 24px 5px 9px; font-size: var(--fs-meta); background-position: calc(100% - 13px) calc(50% + 1px), calc(100% - 9px) calc(50% + 1px); }

.conv-item {
  padding: 10px 13px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  position: relative;
  transition: background var(--t);
}
.conv-item:hover { background: var(--panel-2); }
.conv-item.active { background: var(--panel-2); }
/* Vạch hồng dày bên trái = hội thoại đang mở. */
.conv-item.active::before {
  content: '';
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 3px;
  background: var(--accent);
}

/* Trạng thái hội thoại đọc được ngay trong danh sách, không cần mở ra:
   cần người = nền ửng đỏ, đã đóng = mờ đi, đang mở = bình thường. */
.conv-item.st-needs_human { background: linear-gradient(90deg, rgba(190, 18, 60, .08), transparent 62%); }
.conv-item.st-needs_human:hover, .conv-item.st-needs_human.active { background: var(--panel-2); }
.conv-item.st-closed { opacity: .62; }
.conv-item.st-closed:hover, .conv-item.st-closed.active { opacity: 1; }

.conv-head { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); margin-bottom: 2px; }
.conv-name {
  font-weight: 600;
  font-size: var(--fs-body);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.conv-shop { font-size: var(--fs-micro); color: var(--accent-2); opacity: .85; }
.conv-last {
  font-size: var(--fs-meta);
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 3px;
}
.conv-meta { display: flex; gap: 5px; margin-top: 7px; flex-wrap: wrap; }

.unread-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(21, 128, 61, .16);
}

/* --------------------------------------------------------------------------
   9. Inbox — khung tin nhắn
   -------------------------------------------------------------------------- */
.thread { display: flex; flex-direction: column; overflow: hidden; min-width: 0; }

.thread-head {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  background: var(--panel);
  min-height: 53px;
}
.thread-head > b { font-size: var(--fs-lg); letter-spacing: -0.1px; }

/* Chỉ có nghĩa trên màn hẹp, lúc danh sách và hội thoại thay nhau chiếm hết màn.
   Màn rộng thì hai cái nằm cạnh nhau sẵn, không có gì để quay lại. */
.back-btn { display: none; }

.messages {
  flex: 1;
  overflow: auto;
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: 7px;
  background:
    radial-gradient(900px 300px at 50% 0%, rgba(21, 128, 61, .05), transparent 70%),
    var(--bg);
}

.bubble {
  max-width: 68%;
  padding: 8px 13px 7px;
  border-radius: 14px;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: var(--fs-body);
  line-height: 1.55;
  box-shadow: var(--shadow-1);
}
/* Tin khách để trắng có viền: nền khung chat đã ngả xanh, mà tin nhân viên cũng xanh,
   nên bong bóng khách phải là màu khác hẳn mới liếc một cái là biết ai đang nói. */
.bubble.customer {
  background: var(--panel);
  border: 1px solid var(--line);
  border-bottom-left-radius: 4px;
  align-self: flex-start;
}
.bubble.shop { background: var(--bubble-shop); border-bottom-right-radius: 4px; align-self: flex-end; }
/* Tin do bot gửi phải phân biệt được với tin nhân viên gõ tay — khác nền + viền teal. */
.bubble.shop.bot { background: var(--bubble-bot); box-shadow: var(--shadow-1), inset 0 0 0 1px rgba(15, 118, 110, .28); }

.bubble-time {
  font-size: 10px;
  color: var(--muted);
  margin-top: 3px;
  opacity: .8;
  letter-spacing: .2px;
}

/* --------------------------------------------------------------------------
   10. Inbox — ô soạn tin & gợi ý AI
   -------------------------------------------------------------------------- */
.composer { border-top: 1px solid var(--line); padding: var(--sp-3) var(--sp-4) var(--sp-4); background: var(--panel); }

.suggestion {
  background: linear-gradient(var(--accent2-bg), var(--accent2-bg)), var(--panel-2);
  border: 1px solid var(--accent2-line);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.suggestion-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
  font-size: var(--fs-meta);
  color: var(--muted);
}
.suggestion-head > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.sug-bubble {
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  padding: 8px 11px;
  margin-bottom: 5px;
  white-space: pre-wrap;
  font-size: var(--fs-body);
  line-height: 1.55;
  transition: border-color var(--t), box-shadow var(--t);
}
.sug-bubble:last-child { margin-bottom: 0; }
.sug-bubble[contenteditable]:hover { border-color: var(--line-3); }
.sug-bubble[contenteditable]:focus { outline: none; border-color: var(--accent-2); box-shadow: var(--ring); }

.composer-actions { display: flex; gap: var(--sp-2); align-items: center; margin-top: var(--sp-2); }
.composer-actions .btn + .btn { margin-left: 0; }

.status-select { width: 152px; flex: none; }

/* Ba nút chế độ bot. Mỗi chế độ một màu riêng, trùng với màu nhãn ở danh sách. */
.mode-toggle {
  display: flex;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  overflow: hidden;
  width: 216px;
  flex: none;
}
.mode-toggle button {
  flex: 1;
  background: none;
  border: none;
  padding: 6px 4px;
  cursor: pointer;
  color: var(--muted);
  font-size: var(--fs-meta);
  font-weight: 500;
  transition: background var(--t), color var(--t);
}
.mode-toggle button + button { border-left: 1px solid var(--line-2); }
.mode-toggle button:hover:not(.on) { background: var(--panel-2); color: var(--text); }
.mode-toggle button.on { background: var(--accent); color: #fff; font-weight: 600; }
.mode-toggle button[data-mode=auto].on { background: var(--accent-2); color: #fff; }
.mode-toggle button[data-mode=off].on  { background: var(--panel-3); color: var(--text); }

/* --------------------------------------------------------------------------
   11. Inbox — cột phải (AI đọc được gì)
   -------------------------------------------------------------------------- */
.side { border-left: 1px solid var(--line); overflow: auto; padding: var(--sp-4); background: var(--panel); }
.side h3 {
  font-size: var(--fs-micro);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .7px;
  margin: 0 0 var(--sp-2);
  font-weight: 600;
}
.side section { margin-bottom: var(--sp-5); }
.side section:last-child { margin-bottom: 0; }
.side-sub { color: var(--muted); font-size: var(--fs-meta); margin-top: 1px; word-break: break-all; }
.side textarea { min-height: 86px; font-size: var(--fs-meta); }
.side textarea + .btn { margin-top: var(--sp-2); }

/* "Fact" = một dòng dữ kiện ngắn AI rút ra. Dùng chung cho món hàng, câu
   hiểu lại, tâm lý khách, gợi ý chiến thuật — ở cả cột phải lẫn Phòng thử. */
.fact {
  font-size: var(--fs-meta);
  line-height: 1.6;
  color: var(--text-2);
  margin-bottom: var(--sp-2);
}
.fact:last-child { margin-bottom: 0; }
.fact b { color: var(--text); }
.fact.muted { color: var(--muted); }
.fact.warn  { color: var(--warn); }

/* Dạng hộp: dùng cho dữ kiện mà sai là hỏng cả câu trả lời (món đang nói đến). */
.fact.box {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 7px 10px;
}
.fact.box.warn { background: var(--warn-bg); border-color: var(--warn-line); }

/* Gợi ý chiến thuật cho nhân viên — tông xanh, tách khỏi dữ kiện thuần. */
.fact.tip {
  background: var(--accent2-bg);
  border: 1px solid var(--accent2-line);
  border-radius: var(--r-sm);
  padding: 7px 10px;
  color: var(--text-2);
  margin-top: var(--sp-2);
}

/* --- Bảng đơn hàng tra được -------------------------------------------- */
/* Nhân viên phải phân biệt được bot đang dựa vào đơn thật hay trả lời chay. */
.orders { margin-bottom: var(--sp-2); }
.orders-head {
  font-size: var(--fs-micro);
  color: var(--muted);
  font-weight: 600;
  letter-spacing: .4px;
  margin-bottom: 5px;
}
.order {
  font-size: var(--fs-meta);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-left: 2px solid var(--ok);
  border-radius: var(--r-sm);
  padding: 7px 10px;
  margin-bottom: 5px;
  line-height: 1.55;
}
.order:last-child { margin-bottom: 0; }
.order-top { color: var(--muted); }
.order-status { color: var(--text); font-weight: 600; }
.order-date { color: var(--text-2); }
.order-id { color: var(--faint); font-family: var(--font-mono); font-size: 10.5px; }
.order-items { color: var(--muted); margin-top: 2px; }
.order-flag { color: var(--warn); margin-top: 3px; font-weight: 500; }
.orders-note { font-size: var(--fs-meta); color: var(--warn); margin-top: 5px; }

/* Tra hụt / lỗi API — cảnh báo rõ, vì bot sẽ đang trả lời mà không có đơn. */
.orders-miss {
  font-size: var(--fs-meta);
  color: var(--warn);
  background: var(--warn-bg);
  border: 1px solid var(--warn-line);
  border-radius: var(--r-sm);
  padding: 7px 10px;
  margin-bottom: var(--sp-2);
  line-height: 1.55;
}

/* --------------------------------------------------------------------------
   12. Báo cáo
   -------------------------------------------------------------------------- */
.chart { display: flex; align-items: flex-end; gap: 3px; height: 170px; }
.chart.sm { height: 110px; }
.chart .col {
  flex: 1;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
  border-radius: 3px;
  transition: background var(--t);
}
.chart .col:hover { background: rgba(21, 128, 61, .07); }
.chart .seg { border-radius: 2px; transition: filter var(--t); }
.chart .col .seg:first-child { border-radius: 3px 3px 2px 2px; }
.chart .seg.plain { background: var(--chart-plain); }
.chart .seg.bot { background: var(--accent-2); }
.chart .seg.human { background: var(--accent); }
/* Ngày không có tin vẫn cần một vạch mờ, không thì cột trống trông như lỗi hiển thị. */
.chart .seg.zero { height: 2px; background: var(--line-2); }
/* Nền sáng thì rê chuột phải làm cột ĐẬM lại; sáng thêm là cột biến mất vào nền. */
.chart .col:hover .seg { filter: brightness(.85); }

.chart-x { display: flex; gap: 3px; margin-top: 7px; }
.chart-x span {
  flex: 1;
  min-width: 0;
  text-align: center;
  font-size: 10px;
  color: var(--faint);
  white-space: nowrap;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  font-size: var(--fs-meta);
  color: var(--muted);
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
  line-height: 1.6;
}
.legend b { color: var(--text); }
.legend i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; margin-right: 6px; }
/* Ô màu chú giải — trùng màu với cột trong biểu đồ. */
.legend i.sw-plain { background: var(--chart-plain); }
.legend i.sw-bot   { background: var(--accent-2); }
.legend i.sw-human { background: var(--accent); }

.barrow {
  display: grid;
  grid-template-columns: 128px 1fr 42px;
  align-items: center;
  gap: var(--sp-3);
  padding: 5px 0;
  font-size: var(--fs-meta);
}
.barrow > span:first-child { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barrow .track { background: var(--panel-2); border-radius: var(--r-full); height: 7px; overflow: hidden; }
.barrow .fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent-d), var(--accent));
  border-radius: var(--r-full);
}
.barrow b { text-align: right; font-variant-numeric: tabular-nums; color: var(--text); }

/* --------------------------------------------------------------------------
   13. Phòng thử
   -------------------------------------------------------------------------- */
.sim-facts { margin-top: var(--sp-2); }
.sim-reason { color: var(--muted); font-size: var(--fs-meta); margin-top: var(--sp-2); line-height: 1.6; }

/* --------------------------------------------------------------------------
   14. Toast & vòng quay chờ
   -------------------------------------------------------------------------- */
.toast {
  position: fixed;
  bottom: var(--sp-6);
  left: 50%;
  transform: translateX(-50%) translateY(14px);
  background: var(--panel-3);
  border: 1px solid var(--line-2);
  padding: 9px 18px;
  border-radius: var(--r-md);
  font-size: var(--fs-body);
  box-shadow: var(--shadow-2);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 100;
  max-width: 80vw;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.err { border-color: var(--danger-line); background: linear-gradient(var(--danger-bg), var(--danger-bg)), var(--panel); color: var(--danger); }

.spinner {
  display: inline-block;
  width: 13px;
  height: 13px;
  border: 2px solid var(--line-2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  vertical-align: -2px;
  margin-right: 6px;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* --------------------------------------------------------------------------
   15. Màn hình hẹp
   -------------------------------------------------------------------------- */
@media (max-width: 1240px) {
  .inbox { grid-template-columns: 300px 1fr 276px; }
}
@media (max-width: 1100px) {
  .inbox { grid-template-columns: 296px 1fr; }
  .side { display: none; }
}
@media (max-width: 760px) {
  /*
   * `grid-template-rows` là BẮT BUỘC, không phải cho đẹp.
   *
   * `.shell` cao 100vh. Khai mỗi `grid-template-columns: 1fr` thì hai hàng (sidebar,
   * main) đều là `auto` và tự chia nhau chiều cao — sidebar ngốn 337/812px, tức 41%
   * màn hình chỉ để hiện thanh nav. `auto 1fr` ép sidebar chỉ lấy đúng phần nó cần.
   */
  .shell { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }

  /*
   * `align-items: center` cũng vậy: sidebar đổi sang hàng ngang thì trục phụ thành
   * chiều dọc, mà mặc định flex là `stretch` — mỗi nút nav bị kéo cao bằng cả thanh.
   * Viền cũng phải xoay theo: giờ nó là thanh trên cùng, không còn là cột bên trái.
   */
  .sidebar {
    flex-direction: row;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    padding: var(--sp-2);
    gap: var(--sp-1);
    border-right: none;
    border-bottom: 1px solid var(--line);
  }

  /* `flex: 0 0 auto` để nút không bị bóp lại; `nowrap` để "Cấu hình bot" không gãy hai dòng. */
  .nav-item { width: auto; flex: 0 0 auto; white-space: nowrap; }
  .nav-item.active::before { display: none; }
  .brand, .nav-foot, .nav-spacer { display: none; }
  .inbox { grid-template-columns: 1fr; }
  .conv-list { display: none; }
  .inbox.show-list .conv-list { display: block; }
  .inbox.show-list .thread { display: none; }
  .back-btn { display: inline-flex; }
  .content { padding: var(--sp-3); }
  .bubble { max-width: 86%; }
}