/* Trang Cây thư mục (BRIEF-07B) — chỉ bố cục riêng; màu/token lấy từ app.css. */

/* BRIEF-14B C: kính nhìn thấy được ở light mode. Biến cục bộ của /tree theo tiền lệ `--act-line`
   (BRIEF-06b §2) — KHÔNG sửa --glass-* dùng chung trong app.css: trên card trắng
   rgba(255,255,255,.66) + viền rgba(255,255,255,.78) gần như vô hình. */
:root {
  --tg-surface: rgba(255, 255, 255, .72);
  /* .20 đo được 1,42:1 so với card trắng → chìm trong ảnh 1440 light; nâng lên .28 (brief C cho phép). */
  --tg-border: rgba(60, 60, 67, .28);
  --tg-highlight: rgba(255, 255, 255, .95);
  --tg-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 12px 30px -20px rgba(0, 0, 0, .40);
}
@media (prefers-color-scheme: dark) {
  :root {
    --tg-surface: rgba(44, 44, 46, .62);
    --tg-border: rgba(255, 255, 255, .16);
    --tg-highlight: rgba(255, 255, 255, .22);
    --tg-shadow: 0 1px 0 rgba(255, 255, 255, .06), 0 18px 44px -22px rgba(0, 0, 0, .85);
  }
}

.sect { margin-bottom: 14px; padding: 0; overflow: hidden; }

.ch {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 14px; border-bottom: 1px solid var(--line); background: var(--tk);
}
.ch b { font-size: 12.5px; letter-spacing: .02em; text-transform: uppercase; color: var(--ink-2); }
.ch .n { margin-left: auto; font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* ---------- banner ---------- */
.banner {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; margin-bottom: 14px;
  border: 1px solid rgba(178, 80, 0, .35); border-radius: 10px;
  background: rgba(178, 80, 0, .08);
  font-size: 12.5px; line-height: 1.45; color: var(--ink-2);
}
.banner b { color: var(--warn); font-weight: 600; }
.banner.muted { background: var(--fill); border-color: var(--line); color: var(--ink-3); }
.banner.muted b { color: var(--ink-3); }
@media (prefers-color-scheme: dark) {
  .banner { border-color: rgba(255, 159, 10, .40); background: rgba(255, 159, 10, .10); }
  .banner.muted { border-color: var(--line); background: var(--fill); }
}

/* ---------- một dòng đề xuất ---------- */
.p { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-top: 1px solid var(--line); }
.p:first-child { border-top: 0; }
.pbody { min-width: 0; flex: 1 1 auto; }
.pname { font-size: 14px; font-weight: 600; letter-spacing: -.005em; }
.pmeta { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.pmeta .dot { margin: 0 5px; }
.psamples { font-size: 11px; color: var(--ink-3); margin-top: 6px; overflow: hidden; text-overflow: ellipsis; }
.psamples code { font: inherit; color: var(--ink-2); margin-left: 6px; }

.chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px; border: 0; border-radius: 7px;
  background: var(--accent-soft); color: var(--ink);
  font: inherit; font-size: 11.5px; line-height: 1.3; cursor: pointer;
  transition: background 160ms var(--ease), transform 120ms var(--ease);
}
.chip:hover { background: var(--fill-2); }
.chip:active { transform: scale(.97); }
.chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.chip .cx { color: var(--ink-3); font-size: 13px; line-height: 1; }
.chip.add { border: 1px dashed var(--line-strong); background: transparent; color: var(--ink-3); }
.chip.add:hover { color: var(--ink); background: var(--fill); }
.addi {
  height: 26px; width: 132px; max-width: 100%;
  padding: 0 8px; border: 1px solid var(--accent); border-radius: 7px;
  background: var(--surface); color: var(--ink); font: inherit; font-size: 11.5px; outline: none;
}

.asg { display: flex; align-items: center; gap: 7px; margin-top: 8px; font-size: 11.5px; line-height: 1.4; color: var(--ink-2); cursor: pointer; }
.asg input { width: 15px; height: 15px; accent-color: var(--accent); flex: none; }
.asg b { color: var(--ink); font-weight: 600; }

.pacts { display: flex; align-items: center; gap: 6px; flex: none; margin-left: auto; }
.perr { font-size: 11.5px; line-height: 1.35; color: var(--down); max-width: 180px; }

/* nút "Gán N domain vào Parent › Sub" dài hơn "Tạo nhóm": xuống dòng thay vì tràn ngang */
.p[data-kind="assign"] .btn.pri {
  height: auto; min-height: 34px; padding-top: 7px; padding-bottom: 7px;
  max-width: 360px; white-space: normal; text-align: left; line-height: 1.3;
}

/* nút chính: chiều rộng tối thiểu + spinner tuyệt đối nên lúc chờ không đẩy layout */
.btn.pri { position: relative; min-width: 116px; padding-right: 26px; }
.btn[aria-busy="true"]::after {
  content: ""; position: absolute; right: 9px; top: 50%;
  width: 11px; height: 11px; margin-top: -5.5px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: m-spin 700ms linear infinite;
}
@keyframes m-spin { to { transform: rotate(360deg); } }
.p.gone { opacity: 0; transform: translateY(-4px); transition: opacity 220ms var(--ease); }

/* ---------- cây hiện tại (BRIEF-14 §3: một grid cho hàng nhóm và hàng nhóm con) ---------- */
.tree { padding: 2px 14px 10px; --tree-name-col: 200px; }
.trow { border-bottom: 1px solid var(--line); }
.trow:last-child { border-bottom: 0; }

/* Cùng một template cho hai loại hàng: tên | số | (nút) | tag | xoá.
   Cột 1 cố định nên `tname.x` và `sitecount.x` trùng nhau ở mọi hàng, mọi nhóm.
   Hàng nhóm con không có padding-left (sẽ đẩy mép phải của × lệch khỏi Delete): tên thụt 12px
   bằng margin, nên `subname.x = tname.x + 12` mà cột 2 vẫn đứng yên. */
.tbig, .subhead {
  display: grid; align-items: center; column-gap: 8px;
  grid-template-columns: var(--tree-name-col) auto 1fr auto auto;
}
.tbig { min-height: 40px; font-size: 13.5px; font-weight: 600; }
.tname, .subname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbig .c { font-size: 11px; font-weight: 400; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tagnew {
  justify-self: end; padding: 2px 6px; border-radius: 5px;
  background: var(--up-soft); color: var(--up);
  font-size: 10px; font-weight: 600; letter-spacing: .02em; white-space: nowrap;
}
.del { justify-self: end; padding: 0 2px; border: 0; background: none; font: inherit; font-size: 11.5px; color: var(--down); cursor: pointer; }
.del:hover { text-decoration: underline; }
.del:focus-visible, .chipdel:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Hai nút của hàng nhóm: kính control, KHÔNG backdrop-filter cho từng nút (BRIEF-14 §4). */
.gacts { display: flex; align-items: center; gap: 6px; justify-self: start; min-width: 0; }
.lkbtn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; height: 26px; padding: 0 9px;
  /* BRIEF-14B C: --tg-* (đầu file) để viền/nền kính thấy được trên card trắng. */
  border: 1px solid var(--tg-border); border-radius: var(--r-control);
  background: var(--tg-surface); color: var(--ink-2);
  box-shadow: var(--shadow-card), inset 0 1px 0 var(--tg-highlight);
  font: inherit; font-size: 11.5px; line-height: 1; white-space: nowrap; cursor: pointer;
  transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out), transform 160ms var(--ease-out);
}
.lkbtn::after {                     /* specular quét: chỉ transform/opacity */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, var(--glass-highlight) 45%, transparent 60%);
  opacity: .30; transform: translateX(-28%) rotate(8deg);
  transition: transform 600ms var(--ease-out), opacity 300ms var(--ease-out);
}
.lkbtn:hover:not(:disabled) { background-color: var(--fill); color: var(--ink); transform: translateY(-1px); }
.lkbtn:hover:not(:disabled)::after { transform: translateX(28%) rotate(8deg); opacity: .48; }
.lkbtn:active:not(:disabled) { transform: scale(.97); transition-duration: 120ms; }
.lkbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Không viền đứt: viền đứt là quy ước "khoá" của trang Classify; ở đây là nút tắt thật. */
.lkbtn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- một nhóm con + site bên trong (BRIEF-12 §1-§3) ---------- */
.subrow + .subrow { margin-top: 8px; }
.subhead { height: 30px; }
.subname { margin-left: 12px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.sitecount { font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.chipdel { grid-column: 5; justify-self: end; padding: 0; border: 0; background: none; color: var(--ink-3); font: inherit; font-size: 14px; line-height: 1; cursor: pointer; }
.chipdel:hover { color: var(--down); }

/* BRIEF-14B B: mép HỘP chip trùng `subname.x` (subname lùi 12px bằng margin, xem trên), nên chip
   thuộc về nhóm con chứ không thò ra ngoài. Các dòng chip khi wrap cũng bắt đầu ở cùng x đó. */
.sitelist { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; padding-left: 12px; }
.sitechip {
  display: inline-flex; align-items: center; gap: 4px; height: 22px;
  padding: 0 8px; border: 1px solid transparent; border-radius: 7px;
  background: var(--fill); color: var(--ink-2);
  font: inherit; font-size: 11.5px; line-height: 1.3; cursor: pointer;
  transition: color 160ms var(--ease-out), background-color 160ms var(--ease-out);
}
.sitechip:hover { color: var(--ink); background: var(--fill-2); }
.sitechip.has-note { border-color: var(--line-strong); }
.sitechip .note-dot { color: var(--accent); font-size: 13px; line-height: 1; }
.sitemore {
  padding: 2px 8px; border: 0; border-radius: 7px;
  background: transparent; color: var(--accent);
  font: inherit; font-size: 11.5px; cursor: pointer;
}
.sitemore:hover { text-decoration: underline; }
.nosites { font-size: 11.5px; color: var(--ink-3); }
.sitechip:focus-visible, .sitemore:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---------- form thêm site + panel góp ý của hàng nhóm (BRIEF-14 §2.3-§2.4, BRIEF-14B A/C) ---------- */
.gbox:empty { display: none; }
.gpanel { margin: 0 0 10px; padding: 10px 12px; }
/* C: bề mặt kính của riêng /tree — --tg-* ở đầu file, không đụng --glass-* của app.css. */
.gpanel.glass {
  background: var(--tg-surface);
  -webkit-backdrop-filter: blur(var(--blur-card)) saturate(180%);
  backdrop-filter: blur(var(--blur-card)) saturate(180%);
  border: 1px solid var(--tg-border);
  box-shadow: var(--tg-shadow), inset 0 1px 0 var(--tg-highlight);
}
.gpanel > * { position: relative; z-index: 1; }
.gp-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.gp-label { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }

/* A: form thêm website là MỘT hàng cao 44px — 8px + 26px + 8px + 2px viền — sát mép card, phủ kín bề rộng. */
.addpanel {
  display: flex; flex-wrap: nowrap; align-items: center; gap: 8px;
  min-height: 44px; padding: 8px 12px; border-radius: var(--r-control);
}
.addpanel .addinput {
  flex: 1 1 auto; width: auto; max-width: 420px; min-width: 0;
  height: 26px; min-height: 26px; padding: 4px 9px;
  line-height: 16px; resize: none; overflow-y: auto;
}
/* Nhãn chữ thường, không uppercase (brief A). */
.addpanel .gp-label {
  flex: none; text-transform: none; letter-spacing: 0;
  font-size: 12px; font-weight: 400; color: var(--ink-3);
}
.addpanel .sel { flex: none; height: 26px; font-size: 12px; }
.addpanel .newsub { flex: none; height: 26px; padding: 0 8px; font-size: 12px; }
.addpanel .btn { flex: none; height: 26px; padding: 0 12px; font-size: 12px; }
.addpanel .btn.pri { min-width: 0; padding-right: 26px; }  /* chừa chỗ spinner như .btn.pri */
.addpanel .gpnote { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.gp-title { margin: 0; font-size: 12.5px; font-weight: 600; }
.addinput, .fbnote {
  display: block; width: 100%; min-height: 44px; padding: 7px 9px;
  border: 1px solid var(--line-strong); border-radius: var(--r-control);
  background: var(--surface); color: var(--ink); font: inherit; font-size: 12px;
  line-height: 1.4; resize: vertical; outline: none;
}
.fbnote { min-height: 34px; height: 34px; resize: none; overflow: hidden; }
.addinput:focus-visible, .fbnote:focus-visible, .newsub:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.newsub {
  height: 30px; width: 190px; max-width: 100%; padding: 0 9px;
  border: 1px solid var(--line-strong); border-radius: var(--r-control);
  background: var(--surface); color: var(--ink); font: inherit; font-size: 12px; outline: none;
}
.gp-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.gp-acts .btn { height: 30px; padding: 0 12px; font-size: 12px; }
.gpnote, .gphint { flex: 1 1 auto; font-size: 11.5px; line-height: 1.4; color: var(--ink-2); }
.gphint { color: var(--ink-3); }
.gpnote:empty, .gphint:empty { display: none; }
.fblist { display: grid; gap: 2px; margin-top: 6px; max-height: 220px; overflow: auto; }
.fbpick { display: flex; align-items: center; gap: 7px; min-height: 24px; font-size: 12px; cursor: pointer; }
.fbpick input { width: 15px; height: 15px; margin: 0; flex: none; accent-color: var(--accent); }
.fbname { color: var(--ink); }
.fbsub { color: var(--ink-3); font-size: 11px; }

/* panel "sai thư mục" của từng chip (BRIEF-12, giữ nguyên) */
.sitepanel {
  margin-top: 8px; padding: 10px;
  border: 1px solid var(--line-strong); border-radius: 10px;
  background: var(--surface);
}
.panelrow { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.panelname { font-size: 12px; font-weight: 600; }
.panel-sel { height: 30px; font-size: 12px; }
.panelnote {
  display: block; width: 100%; height: 32px; min-height: 0; margin-top: 8px;
  padding: 6px 9px; border: 1px solid var(--line-strong); border-radius: 8px;
  background: var(--tk); color: var(--ink); font: inherit; font-size: 12px;
  line-height: 1.3; resize: none; overflow: hidden; outline: none;
}
.panelnote:focus-visible, .panel-sel:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.panelacts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.panelacts .btn { height: 30px; padding: 0 12px; font-size: 12px; }
.panelerr { flex: 1 1 100%; font-size: 11.5px; line-height: 1.35; color: var(--down); }

/* ---------- cài đặt ---------- */
.set { padding: 12px 14px 14px; }
.sel {
  height: 34px; max-width: 100%; padding: 0 10px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); color: var(--ink); font: inherit; font-size: 12.5px; cursor: pointer;
}
.sel:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.set .note b { color: var(--ink); font-weight: 600; }

.note { font-size: 12px; line-height: 1.5; color: var(--ink-3); margin: 8px 2px 0; }
.pe { margin: 12px 14px 14px; }
.state { font-size: 12px; line-height: 1.45; color: var(--ink-2); margin: 8px 2px 0; }
.state.bad { color: var(--down); }

/* ---------- máy hẹp: vùng chạm ≥ 44px (BRIEF-07B §Motion) ---------- */
@media (max-width: 560px) {
  .p { flex-wrap: wrap; }
  .pbody { flex: 1 1 100%; }
  .pacts { width: 100%; justify-content: flex-end; margin-top: 10px; }
  .perr { flex: 1 1 100%; max-width: none; text-align: right; }
  .p[data-kind="assign"] .btn.pri { max-width: 100%; }
}
/* BRIEF-14: 5 cột không vừa 390px — hàng nhóm xếp lại thành 3 dòng, hàng nhóm con 3 cột. */
@media (max-width: 720px) {
  .tree { --tree-name-col: clamp(120px, 34vw, 180px); }
  .tbig {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: "name name del" "count tag tag" "acts acts acts";
    row-gap: 6px; min-height: 44px; padding: 8px 0;
  }
  .tname { grid-area: name; }
  .tbig .c { grid-area: count; }
  .tagnew { grid-area: tag; justify-self: end; }
  .del { grid-area: del; }
  .gacts { grid-area: acts; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .lkbtn { justify-content: center; height: 34px; }
  .subhead { grid-template-columns: minmax(0, 1fr) auto auto; }
  .chipdel { grid-column: 3; }
  /* BRIEF-14B A: chỉ từ 720px trở xuống mới cho hàng form wrap (ô tên nhóm con xuống dòng). */
  .addpanel { flex-wrap: wrap; min-height: 44px; }
}

@media (max-width: 520px) {
  .btn { height: 44px; padding: 0 14px; }
  .btn.pri { padding-right: 28px; }
  .chip { min-height: 44px; padding: 0 10px; font-size: 12px; }
  .addi { height: 44px; font-size: 12.5px; }
  .asg { min-height: 44px; font-size: 12px; }
  .asg input { width: 20px; height: 20px; }
  .del { min-height: 44px; min-width: 44px; padding: 0 8px; font-size: 12px; }
  .chipdel { width: 44px; height: 44px; font-size: 18px; }
  .sel { height: 44px; font-size: 13px; width: 100%; }
  .chips { gap: 6px; }
  /* BRIEF-12/BRIEF-14: every new control is a 44px touch target at phone width */
  .lkbtn { height: 44px; font-size: 12px; }
  .sitechip { min-height: 44px; padding: 0 10px; font-size: 12px; }
  .sitemore { min-height: 44px; font-size: 12px; }
  .subhead { height: auto; min-height: 30px; }
  .addinput, .fbnote { min-height: 44px; font-size: 13px; }
  .newsub { height: 44px; width: 100%; font-size: 13px; }
  /* BRIEF-14B A: ở phone hàng form giữ vùng chạm 44px; !important để thắng height inline của auto-grow. */
  .addpanel .addinput { flex: 1 1 100%; max-width: none; height: 44px !important; min-height: 44px; font-size: 13px; line-height: 1.4; }
  .addpanel .sel, .addpanel .newsub, .addpanel .btn { height: 44px; width: auto; }
  .addpanel .btn.pri { padding-right: 28px; }
  .fbpick { min-height: 44px; font-size: 13px; }
  .fbpick input { width: 20px; height: 20px; }
  .gp-acts .btn { height: 44px; }
  .panel-sel { height: 44px; font-size: 13px; }
  .panelnote { height: 44px; font-size: 13px; }
  .panelacts .btn { height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .btn[aria-busy="true"]::after { animation: none; border-right-color: currentColor; opacity: .5; }
  .p.gone { transition: none; }
}

/* ---------- badge "N to review" + panel check (BRIEF-15 §3) ---------- */
/* Cùng chiều cao với .lkbtn (26px) nên badge đứng chung hàng hai nút mà không đẩy hàng cao lên. */
.auditbadge {
  height: 26px; padding: 0 10px;
  border: 1px solid rgba(178, 80, 0, .38); border-radius: 999px;
  background: var(--warn-soft); color: var(--warn);
  font: inherit; font-size: 11.5px; font-weight: 600; line-height: 1;
  white-space: nowrap; cursor: pointer;
  transition: background-color 160ms var(--ease-out), transform 120ms var(--ease-out);
}
.auditbadge:hover { background: rgba(178, 80, 0, .20); transform: translateY(-1px); }
.auditbadge:active { transform: scale(.97); }
.auditbadge:focus-visible { outline: 2px solid var(--warn); outline-offset: 2px; }
@media (prefers-color-scheme: dark) {
  .auditbadge { border-color: rgba(255, 159, 10, .45); }
  .auditbadge:hover { background: rgba(255, 159, 10, .24); }
}

.aumerge { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); }
.aublock .gp-title { margin-bottom: 2px; }
.aurow { padding: 7px 0; border-top: 1px solid var(--line); }
.aublock .aurow:first-of-type { border-top: 0; }
.auhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.audomain { font-size: 12.5px; font-weight: 600; }
.ausub { font-size: 11.5px; color: var(--ink-3); }
.auto { font-size: 11.5px; color: var(--accent); }
.auwhy { margin: 2px 0 0; font-size: 12px; line-height: 1.45; color: var(--ink-3); }
/* cảnh báo uy tín trong panel audit (BRIEF-16 §3): cùng câu ⚠ của dòng lý do, màu --warn */
.auwarn { margin: 2px 0 0; font-size: 12px; line-height: 1.45; color: var(--warn); }
.aurow.warn { box-shadow: inset 2px 0 0 var(--warn); padding-left: 7px; }
.autext { margin: 4px 0 0; font-size: 12.5px; font-weight: 600; }
.auacts { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.auacts .btn { height: 26px; padding: 0 10px; font-size: 11.5px; }
.aumore {
  margin-top: 6px; padding: 2px 0; border: 0; background: none;
  color: var(--accent); font: inherit; font-size: 11.5px; cursor: pointer;
}
.aumore:hover { text-decoration: underline; }
.aumore:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.auerr { margin: 4px 0 0; font-size: 11.5px; line-height: 1.35; color: var(--down); }
.aunone { margin: 4px 0 0; font-size: 12px; color: var(--ink-3); }