/* ===== Achau Work Command Center — Clickflow-style design system (v17) =====
   Visual language matched to Clickflow: pure-black icon rail, white canvas,
   near-black CTA buttons, blue/green/red functional status colors, 6px radii,
   system font stack, uppercase status chips. */
:root{
  /* Canvas — true white content area like Clickflow */
  --bg:#ffffff; --bg-subtle:#f8f8f8; --panel:#ffffff;
  --border:#e8e8e8; --border-strong:#d7d7d7;
  /* --text-3 nâng 8c8c8c → 767676: 8c trên nền trắng chỉ đạt 3.9:1, dưới AA 4.5:1
     cho cỡ chữ 11-12px mà token này hay gánh (meta, hint). 767676 = 4.54:1, vừa đủ. */
  --text:#202020; --text-2:#5f5f5f; --text-3:#767676;
  --hover:#f4f4f4;
  /* Viền gradient + quầng sáng ô nhập Bộ não AI. Hai đầu pastel, KHÚC GIỮA trùng màu
     nền viền thường — màu chỉ chạm hai góc chéo, thân viền đọc như border bình thường.
     Đây là chỗ ClickUp Brain khác hẳn: quầng sáng nằm ở bóng đổ, không nằm ở nét viền. */
  --brain-edge-1:#f0a6d8; --brain-edge-mid:#ececec; --brain-edge-2:#8fd9e8;
  --brain-halo-1:rgba(240,166,216,.34); --brain-halo-2:rgba(143,217,232,.30);
  /* Accent — chuyển sang tím ClickUp #7b68ee (thay xanh) cho link/focus/active/nút chọn;
     CTA vẫn đen (đã đúng chất ClickUp). --primary dùng cho fill/border/focus-ring (chỉ
     cần 3:1 theo WCAG cho thành phần UI); --primary-text ĐẬM HƠN dành riêng cho CHỮ
     (link, badge text) — #7b68ee trên nền trắng chỉ 4.15:1, hụt AA cho text thường. */
  --primary:#7b68ee; --primary-text:#6a56e0; --primary-hover:#6a56e0; --primary-weak:#f1eefe; --primary-ring:rgba(123,104,238,.20);
  --cta:#202020; --cta-hover:#000000;
  /* Icon rail (pure black) — the signature Clickflow surface */
  --rail:#000000; --rail-2:#0a0a0a; --rail-line:#242424;
  /* rail-muted 6e→8a: chữ nhóm 10px in hoa trên rail đen chỉ đạt ~4:1 với 6e6e6e. */
  --rail-text:#b0b0b0; --rail-text-strong:#ffffff; --rail-muted:#8a8a8a;
  --rail-hover:rgba(255,255,255,.08); --rail-active:rgba(255,255,255,.12); --rail-accent:#ffffff;
  /* Status — sampled directly from the live Clickflow app (To Do gray / In Progress blue / Complete green) */
  --st-backlog:#8c8c8c; --st-open:#87909e; --st-progress:#1090e0; --st-pending:#f59e0b;
  --st-done:#008844; --st-completed:#12a06a; --st-verified:#7b68ee; --st-returned:#e5484d; --st-blocked:#e2445c;
  --pr-urgent:#f50000; --pr-high:#f8ae00; --pr-medium:#6fddff; --pr-low:#d8d8d8;
  --radius:6px; --radius-sm:6px; --row-h:40px;
  --shadow:0 1px 2px rgba(0,0,0,.04);
  --shadow-md:0 8px 24px -6px rgba(0,0,0,.18), 0 2px 6px -2px rgba(0,0,0,.08);
  --shadow-rail:0 0 0 1px rgba(0,0,0,.04);
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
/* Base fallback for every inline Lucide icon: without an explicit width/height, an SVG that
   only declares a viewBox collapses to 0×0 in a plain <span>. Every icon-bearing container
   normally gets its own sizing rule (.nav-item svg, .btn svg, …) which — being a more specific
   selector — always wins over this; this is only a safety net for spots that don't. Found via
   audit: the activity-log row-icon span had no class and its icon was silently invisible. */
svg{width:16px;height:16px}
html,body{margin:0;padding:0}
body{
  font-family:var(--font);
  font-size:13px; line-height:1.5;
  color:var(--text); background:var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-feature-settings:"cv02","cv03","cv04","ss01";
}
button{font-family:inherit}
a{color:inherit;text-decoration:none}
/* numeric displays align in columns — an ops-console detail */
.stat .v,.co-mini .n,.gd-counts .n,.ts-total-v,.kpi-vals .cur,.score .n,.chip .cv,.wl-count{
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#cdd4e0;border-radius:8px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:#b6bece}

:focus-visible{outline:2px solid var(--primary);outline-offset:1px;border-radius:4px}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ===== Dark mode ===== */
[data-theme="dark"]{
  --bg:#0b0b0b; --bg-subtle:#141414; --panel:#1a1a1a; --hover:#232323;
  --border:#2e2e2e; --border-strong:#404040;
  --text:#f0f0f0; --text-2:#a8a8a8; --text-3:#8a8a8a;
  /* Nền tối: khúc giữa hạ về đúng --border, pastel hai đầu tối lại kẻo cháy sáng;
     halo mờ hơn vì bóng màu trên nền đen nổi mạnh hơn nhiều so với nền trắng. */
  --brain-edge-1:#8c5f86; --brain-edge-mid:#2e2e2e; --brain-edge-2:#3f6b78;
  --brain-halo-1:rgba(200,120,180,.20); --brain-halo-2:rgba(110,190,210,.16);
  /* #a599f5 trên nền #0b0b0b đạt 7.94:1 — an toàn cho cả chữ, nên dark theme không cần
     token --primary-text riêng như bản sáng (primary tự nó đã đủ đậm/sáng để làm chữ). */
  --primary:#a599f5; --primary-text:#a599f5; --primary-hover:#b6acf7; --primary-weak:#241f3d; --primary-ring:rgba(165,153,245,.28);
  --cta:#f0f0f0; --cta-hover:#ffffff;
  --rail:#000000; --rail-2:#0a0a0a; --rail-line:#242424;
  --shadow:0 1px 2px rgba(0,0,0,.5);
  --shadow-md:0 16px 40px -10px rgba(0,0,0,.7),0 2px 10px -2px rgba(0,0,0,.5);
}
/* CTA buttons flip to light in dark mode (still "the opposite of canvas", Clickflow-authentic) */
[data-theme="dark"] .btn-primary,[data-theme="dark"] .cmdk-pill kbd{color:#0a0a0a}
/* re-map the most visible hardcoded light surfaces so dark reads cleanly */
[data-theme="dark"] .row{border-bottom-color:#1c2740}
[data-theme="dark"] .kanban .kcard-cells,[data-theme="dark"] .peek-sub,[data-theme="dark"] .kr,
[data-theme="dark"] .report-item,[data-theme="dark"] .gd-kpi,[data-theme="dark"] .gd-kr,
[data-theme="dark"] .peek-rel-row,[data-theme="dark"] .notif-item,[data-theme="dark"] .cmd-detail,
[data-theme="dark"] .r-expand,[data-theme="dark"] .peek-cmt-h{border-color:#243049}
[data-theme="dark"] .badge-muted,[data-theme="dark"] .subchip,[data-theme="dark"] .peek-tag,
[data-theme="dark"] .due,[data-theme="dark"] .v-pending,[data-theme="dark"] .sp-draft,
[data-theme="dark"] .grp-count,[data-theme="dark"] .nav-item .count,[data-theme="dark"] .wl-count,
[data-theme="dark"] .cell-h,[data-theme="dark"] .mine-co,[data-theme="dark"] .row-tag.more{
  background:#1c2740;color:var(--text-2)}
[data-theme="dark"] .grp-h,[data-theme="dark"] .list-head,[data-theme="dark"] .tbl th,
[data-theme="dark"] .cal-wd,[data-theme="dark"] .tl-head,[data-theme="dark"] .tl-corner,
[data-theme="dark"] .tl-daycol.tl-today,[data-theme="dark"] .cal-cell.cal-blank{background:var(--bg-subtle)}
[data-theme="dark"] .chk{background:var(--panel);border-color:var(--border-strong)}
[data-theme="dark"] .toast{background:#1c2740}
[data-theme="dark"] .cmd-pre,[data-theme="dark"] .peek-ai-body,[data-theme="dark"] .peek-cmt,
[data-theme="dark"] .peek-kpi,[data-theme="dark"] .peek-3l-row,[data-theme="dark"] .gd-obj,
[data-theme="dark"] .chip,[data-theme="dark"] .auto-pill,[data-theme="dark"] .wl-chip,
[data-theme="dark"] .ext-link,[data-theme="dark"] .intg-ic{background:var(--bg-subtle);border-color:var(--border)}
[data-theme="dark"] .stat .v.good{color:#34d399}
[data-theme="dark"] .login-wrap{background:linear-gradient(180deg,#0b1018,#0f1626)}
[data-theme="dark"] .theme-toggle .sun{display:none}
.theme-toggle .moon{display:none}
[data-theme="dark"] .theme-toggle .moon{display:inline-flex}

/* ===== Buttons ===== */
.btn{
  display:inline-flex;align-items:center;gap:6px;justify-content:center;
  height:30px;padding:0 12px;border-radius:var(--radius);
  border:1px solid var(--border-strong);background:var(--panel);color:var(--text);
  font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap;
  transition:background .12s,border-color .12s,box-shadow .12s;
}
.btn:hover{background:var(--hover);border-color:var(--border-strong)}
.btn:active{transform:translateY(.5px)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn svg{width:15px;height:15px}
.btn-primary{background:var(--cta);border-color:var(--cta);color:#fff}
.btn-primary:hover{background:var(--cta-hover);border-color:var(--cta-hover)}
.btn-sm{height:26px;padding:0 9px;font-size:12px}
.btn-xs{height:22px;padding:0 7px;font-size:12px;border-radius:5px}
.btn-ghost{border-color:transparent;background:transparent}
.btn-ghost:hover{background:var(--hover)}
.btn-danger{color:#b91c1c}
.btn-block{width:100%}

/* ===== Login ===== */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#f7f8fb,#eef1f8);padding:20px}
.login-card{width:100%;max-width:380px;background:var(--panel);border:1px solid var(--border);
  border-radius:10px;box-shadow:var(--shadow-md);padding:32px 28px}
.login-brand{display:flex;align-items:center;gap:10px;margin-bottom:22px}
.login-brand .sq{width:30px;height:30px;border-radius:7px;background:var(--primary);
  color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px}
.login-title{font-size:18px;font-weight:600;letter-spacing:-.2px}
.login-sub{font-size:12px;color:var(--text-2);margin:2px 0 22px}
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;font-weight:550;color:var(--text-2);margin-bottom:6px}
.input{width:100%;height:36px;padding:0 11px;border:1px solid var(--border-strong);
  border-radius:var(--radius);font-size:13px;background:var(--panel);color:var(--text)}
.input:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 3px var(--primary-weak)}
textarea.input{height:auto;min-height:64px;padding:8px 11px;resize:vertical;line-height:1.5}
select.input{cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235c5c66' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;background-position:right 9px center;padding-right:30px}
.login-err{background:#fef2f2;border:1px solid #fecaca;color:#b91c1c;font-size:12px;
  padding:8px 11px;border-radius:var(--radius);margin-bottom:14px}
.login-hint{margin-top:16px;font-size:12px;color:var(--text-3);text-align:center;line-height:1.6}

/* ===== App shell ===== */
.app{display:flex;height:100vh;overflow:hidden}
.sidebar{width:240px;flex:0 0 240px;background:var(--rail);color:var(--rail-text);
  display:flex;flex-direction:column;height:100vh;position:relative}
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--bg)}

/* Sidebar — command rail */
.ws-header{padding:14px 12px 8px;position:relative}
.ws-btn{width:100%;display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:var(--radius);
  cursor:pointer;border:1px solid transparent;background:transparent;transition:background .12s}
.ws-btn:hover{background:var(--rail-hover)}
.ws-btn .sq{width:28px;height:28px;border-radius:8px;color:#fff;display:flex;align-items:center;
  justify-content:center;font-weight:700;font-size:11px;flex:0 0 28px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 1px 2px rgba(0,0,0,.3)}
.ws-meta{min-width:0;text-align:left;flex:1}
.ws-name{font-weight:600;font-size:13.5px;color:var(--rail-text-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ws-role{font-size:11px;color:var(--rail-muted)}
.ws-caret{color:var(--rail-muted);flex:0 0 auto}

.switcher{position:absolute;top:52px;left:12px;right:12px;z-index:60;background:var(--panel);
  border:1px solid var(--border-strong);border-radius:8px;box-shadow:var(--shadow-md);
  padding:5px;max-height:60vh;overflow:auto}
.switcher .sw-item{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:var(--radius);
  cursor:pointer}
.switcher .sw-item:hover{background:var(--hover)}
.switcher .sw-item.active{background:var(--primary-weak)}
.switcher .sq{width:22px;height:22px;border-radius:5px;color:#fff;display:flex;align-items:center;
  justify-content:center;font-weight:700;font-size:11px;flex:0 0 22px}
.sw-all .sq{background:#1c1c1e}
.sw-name{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.nav{flex:1;overflow:auto;padding:6px 8px}
.nav-sec{font-size:11px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;
  color:var(--rail-muted);padding:14px 8px 5px}
.nav-item{display:flex;align-items:center;gap:11px;padding:7px 9px;border-radius:var(--radius);
  cursor:pointer;color:var(--rail-text);font-weight:500;font-size:13px;border:none;background:none;width:100%;
  text-align:left;position:relative;transition:background .12s,color .12s}
.nav-item:hover{background:var(--rail-hover);color:var(--rail-text-strong)}
.nav-item.active{background:var(--rail-active);color:var(--rail-text-strong);font-weight:600}
.nav-item.active svg{color:var(--rail-text-strong)}
.nav-item svg{width:16px;height:16px;flex:0 0 16px;stroke-width:1.8;color:var(--rail-muted);transition:color .12s}
.nav-item:hover svg{color:var(--rail-text)}
.nav-item .count{margin-left:auto;font-size:11px;color:var(--rail-text);background:rgba(255,255,255,.08);
  padding:1px 7px;border-radius:20px;font-weight:600}

.side-user{border-top:1px solid var(--rail-line);padding:11px 10px;display:flex;align-items:center;gap:10px}
.avatar{width:28px;height:28px;border-radius:50%;background:var(--primary);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:600;font-size:11px;flex:0 0 28px}
.side-user .avatar{box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.side-user .meta{min-width:0;flex:1}
.side-user .u-name{font-size:12px;font-weight:600;color:var(--rail-text-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-user .u-role{font-size:11px;color:var(--rail-muted)}
.side-user .icon-btn{background:transparent;border-color:var(--rail-line);color:var(--rail-muted)}
.side-user .icon-btn:hover{background:var(--rail-hover);color:var(--rail-text-strong)}

/* Header bar — never let overflow wrap/overlap; crumbs truncate before anything breaks */
.header{min-height:52px;flex:0 0 auto;border-bottom:1px solid var(--border);display:flex;
  align-items:center;padding:8px 18px;gap:12px;background:var(--panel);flex-wrap:wrap;row-gap:6px}
.crumbs{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text-2);
  min-width:110px;flex:2 1 180px;white-space:nowrap;overflow:hidden}
.crumbs .sep{color:var(--text-3);flex:0 0 auto;margin:0 2px}
.crumbs .crumb-link{color:var(--primary-text);cursor:pointer;text-decoration:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crumbs .crumb-link:hover{text-decoration:underline;color:var(--primary-hover)}
.crumbs span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crumbs .cur{color:var(--text);font-weight:600;letter-spacing:-.1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.header-actions{margin-left:auto;display:flex;align-items:center;gap:8px;flex:0 1 auto;
  flex-wrap:wrap;justify-content:flex-end;row-gap:6px}
.hamburger{display:none}

/* View toggle — Clickflow-style flat tabs with a bottom-border indicator (not a segmented pill) */
.seg{display:inline-flex;flex-wrap:wrap;border:none;border-radius:0;overflow:visible;gap:0;
  border-bottom:1px solid var(--border)}
.seg button{height:30px;padding:0 8px;border:none;background:transparent;cursor:pointer;
  font-size:12px;font-weight:500;color:var(--text-2);display:flex;align-items:center;gap:5px;
  border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .12s,border-color .12s;
  white-space:nowrap}
.seg button:hover{color:var(--text)}
.seg button + button{border-left:none}
.seg button.active{background:transparent;color:var(--text);font-weight:600;border-bottom-color:var(--text)}
.seg svg{width:14px;height:14px}

.content{flex:1;overflow:auto;padding:20px 24px 40px}
.page-title{font-size:19px;font-weight:700;letter-spacing:-.4px;margin:0 0 3px}
.page-sub{font-size:12px;color:var(--text-2);margin:0 0 18px}
.section-h{font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--text-3);
  margin:24px 0 11px;display:flex;align-items:center;gap:8px}

/* ===== Cards / dashboard ===== */
/* UIUX fix: the generic ".card" wrapper (Social Growth's #1 layout primitive —
   context header, list rows, detail panels, settings sections: 300+ call
   sites) had NO rule at all in this file (verified back to the initial
   commit) — every el(..,{class:"card"}) rendered with zero border/background/
   radius/shadow, relying on whatever ad hoc inline style the call site
   happened to add. Matches the sibling card-family classes below
   (.stat/.co-card/.kpi-card/.panel-card) so "card" finally looks like one. */
.card{background:var(--panel);border:1px solid var(--border);border-radius:8px;
  padding:14px 16px;box-shadow:var(--shadow)}
/* Generic drag affordance for any .card used as a draggable/droppable tile
   outside the .kcard/.kcol kanban family (e.g. the Social Calendar's
   draggable day items + drop-target day cells) — same visual language as
   .kcard.drag / .kcol.dragover below, so drag feedback isn't kanban-only. */
.card.drag{opacity:.4}
.card.dragover{outline:2px dashed var(--primary);outline-offset:-3px}
.grid{display:grid;gap:14px}
/* auto-fit (not auto-fill): auto-fill reserves phantom empty tracks past the
   item count, splitting the row's width across them too — cards stay pinned
   near the 155px min even when the row has plenty of spare width. auto-fit
   collapses those empty tracks so the real cards stretch to fill. */
.stat-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.stat{background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:14px 16px;
  box-shadow:var(--shadow);transition:box-shadow .14s,border-color .14s}
.stat:hover{box-shadow:var(--shadow-md);border-color:var(--border-strong)}
.stat .k{font-size:11px;font-weight:600;letter-spacing:.2px;color:var(--text-2);text-transform:uppercase;display:flex;align-items:center;gap:6px}
.stat .v{font-size:26px;font-weight:750;letter-spacing:-.6px;margin-top:6px}
.stat .v.warn{color:var(--st-progress)}
.stat .v.bad{color:var(--st-blocked)}
.stat .v.good{color:var(--st-done)}

.co-grid{grid-template-columns:repeat(auto-fill,minmax(270px,1fr));align-items:stretch}
.co-card{background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:15px;
  cursor:pointer;box-shadow:var(--shadow);transition:box-shadow .12s,transform .12s,border-color .12s;
  min-height:180px;display:flex;flex-direction:column}
.co-card:hover{box-shadow:var(--shadow-md);border-color:var(--border-strong);transform:translateY(-1px)}
.co-top{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.co-top .sq{width:34px;height:34px;border-radius:8px;color:#fff;display:flex;align-items:center;
  justify-content:center;font-weight:700;font-size:13px;flex:0 0 34px}
.co-name{font-weight:600;font-size:14px}
.co-code{font-size:11px;color:var(--text-3)}
.co-mini{display:flex;gap:14px;margin-bottom:10px}
.co-mini .m .n{font-size:17px;font-weight:700}
.co-mini .m .l{font-size:11px;color:var(--text-3)}
.progress{height:6px;border-radius:6px;background:#ececef;overflow:hidden}
.progress > span{display:block;height:100%;border-radius:6px}
.co-foot{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:12px;color:var(--text-2);
  flex-wrap:wrap}

/* Badges — Clickflow-style: 6px radius, uppercase functional-status chips */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;
  padding:2px 8px;border-radius:6px;line-height:1.6;white-space:nowrap;
  text-transform:uppercase;letter-spacing:.3px}
.badge .dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.badge-flag{background:#fff4e5;color:#8a5400}
.badge-ok{background:#e7f6ee;color:#1a7d4f}
.badge-muted{background:rgba(0,0,0,.06);color:var(--text-2)}
/* UIUX fix: badge text contrast measured against WCAG 2.1 AA (4.5:1, these
   badges are 10.5px bold — under the 18.66px-bold "large text" cutoff, so
   they need the full ratio, not the 3:1 large-text one). Original colors
   (kept as comments) measured BELOW 4.5:1 against their own badge
   background: badge-flag #b06000 -> 4.27:1, badge-ai #5237c9 (đổi từ #0880ea theo palette tím) -> 6.69:1,
   badge-danger (below) #e2445c -> 3.53:1 light / 3.58:1 dark. Same hue
   family, darkened just enough to clear 4.5:1 with margin; --primary/
   --st-blocked themselves are untouched (used everywhere else — buttons,
   links, focus rings — outside this pass's scope). */
.badge-ai{background:var(--primary-weak);color:#5237c9}
[data-theme="dark"] .badge-ai{color:var(--primary-text)}
.btn-ai{background:var(--primary-weak);border-color:var(--primary-weak);color:#5237c9}
.btn-ai:hover{background:var(--primary);border-color:var(--primary);color:#fff}
[data-theme="dark"] .btn-ai{color:var(--primary-text)}
[data-theme="dark"] .btn-ai:hover{color:#fff}

/* ===== Task board (list) ===== */
.board{background:var(--panel);border:1px solid var(--border);border-radius:8px;overflow:hidden}
.grp{border-bottom:1px solid var(--border)}
.grp:last-child{border-bottom:none}
.grp-h{display:flex;align-items:center;gap:9px;padding:9px 14px;cursor:pointer;background:var(--bg-subtle);
  user-select:none}
.grp-h:hover{background:var(--hover)}
.grp-h .chev{color:var(--text-3);transition:transform .15s}
.grp-h.collapsed .chev{transform:rotate(-90deg)}
.grp-dot{width:9px;height:9px;border-radius:50%}
.grp-name{font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.3px}
.grp-count{font-size:11px;color:var(--text-3);background:rgba(0,0,0,.06);padding:1px 7px;border-radius:20px;font-weight:600}
.grp-add{margin-left:auto;color:var(--text-3);opacity:0;transition:opacity .1s}
.grp-h:hover .grp-add{opacity:1}

.list-head{display:flex;align-items:center;padding:6px 14px;font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.3px;color:var(--text-3);border-bottom:1px solid var(--border);
  background:var(--panel)}
.row{display:flex;align-items:center;gap:10px;min-height:var(--row-h);padding:6px 14px;
  border-bottom:1px solid #f0f0f2;transition:background .1s}
.row:last-child{border-bottom:none}
.row:hover{background:var(--hover)}
.row .pri{flex:0 0 16px;display:flex;align-items:center;justify-content:center}
.pri-bars{display:flex;align-items:flex-end;gap:1.5px;height:12px}
.pri-bars i{width:3px;border-radius:1px;background:#d5d5d8;display:block}
.pri-bars i.on{background:var(--c)}
.pri-sq{width:13px;height:13px;border-radius:3px;display:flex;align-items:center;justify-content:center}
.row .r-title{flex:1;min-width:0;font-size:13px;font-weight:500;display:flex;align-items:center;gap:8px}
.row .r-title .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tag-ai{font-size:9.5px;font-weight:700;background:var(--primary-weak);color:var(--primary-text);
  padding:1px 5px;border-radius:4px;letter-spacing:.3px;flex:0 0 auto}
.r-assignee{display:flex;align-items:center;gap:6px;flex:0 0 auto;width:150px;min-width:0;color:var(--text-2);font-size:12px}
.r-assignee .avatar{width:20px;height:20px;font-size:9px}
.r-assignee .an{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.due{font-size:12px;color:var(--text-2);flex:0 0 auto;display:inline-flex;align-items:center;gap:4px;
  padding:2px 7px;border-radius:5px;background:#f1f1f3;width:96px;justify-content:center}
.due.overdue{background:#fef2f2;color:#dc2626;font-weight:600}
.due.none{color:var(--text-3);background:transparent}

/* Three check cells */
.cells{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.cell{width:96px;display:flex;align-items:center;justify-content:center}
.chk{width:18px;height:18px;border:1.6px solid var(--border-strong);border-radius:5px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;background:var(--panel);transition:all .12s;flex:0 0 18px}
.chk:hover:not(:disabled){border-color:var(--primary)}
.chk.on{background:var(--st-done);border-color:var(--st-done);color:#fff}
.chk.on.mgr{background:var(--primary);border-color:var(--primary)}
.chk:disabled{cursor:not-allowed;opacity:.55}
.chk svg{width:12px;height:12px}
.ai-cell{display:flex;align-items:center;gap:5px}
.verdict{font-size:11px;font-weight:600;padding:2px 7px;border-radius:5px;white-space:nowrap}
.v-pending{background:#f1f1f3;color:var(--text-2)}
.v-pass{background:#f0fdf4;color:#15803d}
.v-warn{background:#fff7ed;color:#c2410c}
.v-fail{background:#fef2f2;color:#dc2626}
.icon-btn{width:24px;height:24px;border:1px solid var(--border-strong);border-radius:5px;background:var(--panel);
  cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-2);flex:0 0 24px}
.icon-btn:hover{background:var(--hover);color:var(--primary-text)}
.icon-btn svg{width:13px;height:13px}
.cell-h{width:96px;text-align:center}

.r-expand{padding:2px 14px 12px 56px;background:var(--bg-subtle);border-bottom:1px solid #f0f0f2;
  font-size:12px;color:var(--text-2);display:grid;gap:6px}
.r-expand .lab{font-weight:600;color:var(--text);font-size:11px}
.r-expand .box{background:var(--panel);border:1px solid var(--border);border-radius:6px;padding:8px 10px}

/* ===== Kanban — Clickflow board: white canvas, chip column headers ===== */
.kanban{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;align-items:flex-start}
.kcol{flex:0 0 276px;width:276px;background:transparent;border:none;border-radius:8px;
  display:flex;flex-direction:column;max-height:100%}
.kcol-h{display:flex;align-items:center;gap:7px;font-weight:700;font-size:11px;
  text-transform:uppercase;letter-spacing:.3px;padding:5px 10px;border-radius:6px;
  background:rgba(0,0,0,.045);width:fit-content;margin-bottom:10px}
.kcol-h .grp-count{margin-left:auto;font-weight:700}
.kcards{padding:0 2px 10px;display:flex;flex-direction:column;gap:8px;overflow:auto}
.kcard{background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:10px 11px;
  box-shadow:none;cursor:grab;transition:box-shadow .12s,border-color .12s}
.kcard:hover{box-shadow:var(--shadow-md);border-color:var(--border-strong)}
.kcard-accent{border-left:3px solid var(--border-strong);padding-left:9px}
.kcard.drag{opacity:.4}
.kcol.dragover{outline:2px dashed var(--primary);outline-offset:-3px;border-radius:8px}
.kcard-title{font-size:12px;font-weight:550;margin-bottom:8px;display:flex;gap:6px;align-items:flex-start}
.kcard-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.kcard-cells{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:9px;padding-top:9px;border-top:1px solid #f0f0f2}
.qadd-trigger{display:flex;align-items:center;gap:6px;width:100%;padding:7px 8px;background:transparent;
  border:1px dashed transparent;border-radius:6px;color:var(--text-3);font-size:12px;font-weight:500;
  cursor:pointer;text-align:left;transition:background .12s,border-color .12s,color .12s}
.qadd-trigger:hover{background:var(--hover);border-color:var(--border);color:var(--text-2)}
.qadd-trigger svg{opacity:.7;flex:0 0 auto}
.qadd-input{width:100%;height:30px;font-size:12px}
.kanban-qadd{padding:0 2px;flex:0 0 auto}
.list-qadd{padding:6px 14px 8px 34px}
.kchk{display:flex;align-items:center;gap:3px;font-size:11px;font-weight:700;letter-spacing:.2px;color:var(--text-3);
  background:var(--bg-subtle);padding:2px 6px;border-radius:5px;transition:background .12s,color .12s;white-space:nowrap}
.kchk svg{width:10px;height:10px}
.kchk.kchk-on{color:#15803d;background:#f0fdf4}
.kchk.kchk-on.mgr{color:var(--primary-text);background:var(--primary-weak)}
[data-theme="dark"] .kchk{background:rgba(255,255,255,.06)}
[data-theme="dark"] .kchk.kchk-on{background:rgba(41,151,100,.18)}
[data-theme="dark"] .kchk.kchk-on.mgr{background:rgba(8,128,234,.18)}

/* ===== Tables ===== */
.tbl{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--border);border-radius:8px;
  overflow:hidden;font-size:12px}
.tbl th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.3px;color:var(--text-3);
  font-weight:600;padding:9px 12px;border-bottom:1px solid var(--border);background:var(--bg-subtle)}
.tbl td{padding:9px 12px;border-bottom:1px solid #f0f0f2}
.tbl tr:last-child td{border-bottom:none}
.tbl tr:hover td{background:var(--hover)}
.tbl .tbl-user{display:flex;align-items:center;gap:8px}

/* ===== KPI / OKR ===== */
.kpi-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.kpi-card{background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:14px;box-shadow:var(--shadow)}
.kpi-name{font-weight:600;font-size:13px}
.kpi-vals{display:flex;align-items:baseline;gap:6px;margin:8px 0 4px}
.kpi-vals .cur{font-size:20px;font-weight:700}
.kpi-vals .tgt{font-size:12px;color:var(--text-3)}
/* float bị flex cha nuốt ⇒ % dính sát tên KPI ("Doanh thu tháng64%"); hàng cha giờ
   tự dàn space-between nên pill chỉ cần đứng yên. */
.kpi-ach{font-size:12px;font-weight:700;flex:0 0 auto}
.okr{background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:15px;margin-bottom:14px;
  box-shadow:var(--shadow)}
.okr-h{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.okr-title{font-weight:600;font-size:14px;flex:1}
.kr{display:flex;align-items:center;gap:12px;padding:8px 0;border-top:1px solid #f0f0f2}
.kr-title{flex:1;font-size:12px}
.kr-prog{width:130px}
.kr-pct{font-size:12px;font-weight:600;width:42px;text-align:right}

/* ===== AI Report ===== */
.airep{background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:16px;margin-bottom:14px;
  box-shadow:var(--shadow)}
.airep-h{display:flex;align-items:flex-start;gap:10px;margin-bottom:8px}
.airep-title{font-weight:600;font-size:14.5px;flex:1}
.airep-period{font-size:12px;color:var(--text-3)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.chip{background:var(--bg-subtle);border:1px solid var(--border);border-radius:7px;padding:6px 10px;font-size:12px}
.chip .cv{font-weight:700;font-size:14px;display:block}
.chip .cl{color:var(--text-3);font-size:11px}
.tpl-chip{background:var(--panel);border:1px solid var(--border-strong);border-radius:20px;padding:4px 12px;font-size:12px;
  font-weight:500;color:var(--text-2);cursor:pointer;white-space:nowrap;transition:background .12s,border-color .12s,color .12s}
.tpl-chip:hover{background:var(--hover)}
.tpl-chip.active{background:var(--primary-weak);border-color:var(--primary);color:var(--primary-text);font-weight:600}
.recs{margin:8px 0 0;padding-left:18px;font-size:12px;color:var(--text-2)}
.recs li{margin:3px 0}
.risk-low{background:#f0fdf4;color:#15803d}
.risk-medium{background:#fff7ed;color:#c2410c}
.risk-high{background:#fef2f2;color:#dc2626}
.risk-critical{background:#fef2f2;color:#991b1b}

/* ===== Integrations ===== */
.intg-grid{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.intg{background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:13px;box-shadow:var(--shadow)}
.intg-top{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.intg-ic{width:32px;height:32px;border-radius:8px;background:var(--bg-subtle);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;color:var(--text-2);flex:0 0 32px}
.intg-ic svg{width:17px;height:17px}
.intg-name{font-weight:600;font-size:13px}
.intg-cat{font-size:11px;color:var(--text-3)}

/* ===== Daily report ===== */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.panel-card{background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:16px;
  box-shadow:var(--shadow)}
.status-pill{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;padding:3px 10px;
  border-radius:6px;text-transform:uppercase;letter-spacing:.3px}
.sp-draft{background:rgba(0,0,0,.06);color:var(--text-2)}
.sp-submitted{background:var(--primary-weak);color:var(--primary-text)}
.sp-ai{background:#f1edff;color:#7b68ee}
.sp-approved{background:#e7f6ee;color:#1a7d4f}
.sp-revise{background:#fff4e5;color:#b06000}
.ai-review{background:linear-gradient(180deg,#faf7ff,#f4f0ff);border:1px solid #e9ddff;border-radius:8px;
  padding:13px;margin-top:12px}
.ai-review-h{display:flex;align-items:center;gap:8px;font-weight:600;color:#7c3aed;margin-bottom:8px;font-size:12px}
.score-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.score{background:var(--panel);border:1px solid var(--border);border-radius:7px;padding:6px 10px;text-align:center}
.score .n{font-size:16px;font-weight:700}
.score .l{font-size:11px;color:var(--text-3)}
.report-item{display:flex;gap:10px;padding:8px 0;border-top:1px solid #f0f0f2;font-size:12px}
.report-item .ri-res{color:var(--text-2)}

/* ===== Modal ===== */
.overlay{position:fixed;inset:0;background:rgba(20,22,30,.4);z-index:100;display:flex;align-items:flex-start;
  justify-content:center;padding:60px 20px;overflow:auto;backdrop-filter:blur(1px);animation:overlayFade .15s ease}
.modal{width:100%;max-width:520px;background:var(--panel);border-radius:10px;box-shadow:var(--shadow-md);
  border:1px solid var(--border);animation:modalPop .16s cubic-bezier(.2,.9,.32,1.1)}
@keyframes overlayFade{from{opacity:0}to{opacity:1}}
@keyframes modalPop{from{opacity:0;transform:scale(.96) translateY(4px)}to{opacity:1;transform:scale(1) translateY(0)}}
.modal-h{display:flex;align-items:center;padding:15px 18px;border-bottom:1px solid var(--border)}
.modal-h .mt{font-weight:600;font-size:15px}
.modal-h .x{margin-left:auto;cursor:pointer;color:var(--text-3);border:none;background:none;padding:4px}
.modal-h .x:hover{color:var(--text)}
.modal-b{padding:18px;max-height:70vh;overflow-y:auto}
.modal-f{padding:13px 18px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:9px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* ===== Toasts ===== */
.toasts{position:fixed;bottom:20px;right:20px;z-index:200;display:flex;flex-direction:column;gap:9px}
.toast{background:#1c1c1e;color:#fff;padding:11px 15px;border-radius:8px;font-size:12px;box-shadow:var(--shadow-md);
  display:flex;align-items:center;gap:9px;max-width:340px;animation:slideIn .18s ease}
.toast.err{background:#b91c1c}
.toast.ok{background:#15803d}
.toast.warn{background:#b45309}
@keyframes slideIn{from{transform:translateX(20px);opacity:0}to{transform:translateX(0);opacity:1}}

/* ===== States ===== */
.loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;
  color:var(--text-3);gap:12px}
.spinner{width:26px;height:26px;border:3px solid #e6e6e8;border-top-color:var(--primary);border-radius:50%;
  animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.empty{text-align:center;padding:44px 20px;color:var(--text-3)}
.empty svg{width:34px;height:34px;margin-bottom:10px;opacity:.5}
.empty .et{font-size:13.5px;font-weight:600;color:var(--text-2)}
.mt10{margin-top:10px}.mt16{margin-top:16px}.mb8{margin-bottom:8px}
.muted{color:var(--text-3)}
.hint{font-size:12px;color:var(--text-3);margin-top:4px}
.agent-run-model{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--text-2);background:var(--bg-subtle);border:1px solid var(--border);border-radius:8px;padding:8px 11px;margin-bottom:12px}
.agent-run-model svg{width:15px;height:15px;flex:0 0 auto;color:var(--primary-text)}
/* Catalog admin — nút ẩn mẫu (hover mới hiện) */
.brain-tpl-card{position:relative}
.tpl-hide-btn{position:absolute;top:6px;right:6px;width:20px;height:20px;border:none;border-radius:5px;
  background:transparent;color:var(--text-3);cursor:pointer;display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .12s}
.brain-tpl-card:hover .tpl-hide-btn,.ext-card:hover .tpl-hide-btn{opacity:1}
.tpl-hide-btn:hover{background:var(--hover);color:var(--st-blocked)}
.tpl-hide-btn svg{width:12px;height:12px}
/* Billing */
.plan-current{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}
/* ===== All Settings (đo trực tiếp từ Clickflow thật: sidebar 260px #fcfcfc, item 28px/14px,
   active rgba(0,0,0,.09) radius 7px, tiêu đề 16/600, content title 24/600) ===== */
.setx{display:flex;align-items:stretch;margin:-20px -24px -40px;height:calc(100vh - 52px);overflow:hidden}
.setx-nav{flex:0 0 260px;width:260px;background:#fcfcfc;border-right:1px solid var(--border);
  padding:14px 10px 18px;overflow-y:auto;display:flex;flex-direction:column}
[data-theme="dark"] .setx-nav{background:#111111}
.setx-title{font-size:16px;font-weight:600;padding:2px 8px 10px;letter-spacing:-.2px}
.setx-sec{font-size:11px;font-weight:600;color:var(--text-3);margin:13px 8px 3px}
.setx-item{display:flex;align-items:center;gap:8px;height:28px;flex:0 0 28px;padding:0 7px;
  border-radius:7px;border:none;background:none;cursor:pointer;font-size:13.5px;color:var(--text-2);
  width:100%;text-align:left;white-space:nowrap;overflow:hidden;transition:background .1s,color .1s}
/* setx-nav là flex column bị giới hạn chiều cao — không cho mục co lại khi màn thấp
   (flex-shrink mặc định 1 nén item còn ~12px; sidebar phải scroll thay vì nén) */
.setx-title,.setx-sec,.setx-foot{flex:0 0 auto}
.setx-item:hover{background:var(--hover);color:var(--text)}
.setx-item.active{background:rgba(0,0,0,.09);color:var(--text);font-weight:550}
[data-theme="dark"] .setx-item.active{background:rgba(255,255,255,.12)}
.setx-ic{display:inline-flex;flex:0 0 auto;color:inherit}
.setx-ic svg{width:16px;height:16px}
.setx-foot{border-top:1px solid var(--border);margin-top:14px;padding-top:10px}
.setx-main{flex:1;min-width:0;overflow-y:auto;overflow-x:hidden}
.setx-main-in{max-width:860px;padding:26px 30px 48px}
.setx-main-in .page-title{font-size:24px;font-weight:600;letter-spacing:-.3px}
/* S0.1 — thanh tab con dùng chung của Settings (settingsTabGroup). Trước đây
   khai báo inline trong JS nên "component dùng chung" không có kiểu nào trong
   stylesheet; giờ là nơi DUY NHẤT định kiểu tab con cho mọi mục Settings. */
.setx-tabbar{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px}
@media (max-width:900px){
  .setx{flex-direction:column;height:auto;overflow:visible;margin:-12px -12px -40px}
  .setx-nav{width:100%;flex:0 0 auto;max-height:none;border-right:none;border-bottom:1px solid var(--border)}
  .setx-main{overflow:visible}
  .setx-main-in{padding:18px 14px 40px}
}
/* Autopilot chip — nổi bật hơn chip thường (gradient nhẹ như brain-glow) */
.chip-autopilot{display:inline-flex;align-items:center;gap:5px;border:1px solid transparent;
  background:linear-gradient(var(--panel),var(--panel)) padding-box,linear-gradient(135deg,#ff6ec4,#7873f5,#4adede) border-box;
  font-weight:600}
.chip-autopilot svg{width:13px;height:13px;color:#7873f5}
/* Bulk actions — checkbox chọn hàng loạt trên từng dòng + thanh hành động nổi */
.row-sel{flex:0 0 14px;width:14px;height:14px;accent-color:var(--primary);cursor:pointer;opacity:.35;transition:opacity .1s}
.row:hover .row-sel,.row-sel:checked{opacity:1}
.bulk-bar{
  position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:60;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;max-width:94vw;
  background:var(--panel);border:1px solid var(--border-strong);border-radius:12px;
  box-shadow:var(--shadow-md);padding:10px 14px;
}
.bulk-count{font-weight:700;font-size:12px;white-space:nowrap}
.bulk-in{width:auto;height:30px;font-size:12px}
/* Báo cáo dòng tiền — thanh bar mini so sánh thu/chi giữa các tháng */
.cf-bar{display:inline-block;height:10px;border-radius:3px;margin-right:7px;vertical-align:middle}
.cf-bar.cf-in{background:var(--st-done)}
.cf-bar.cf-out{background:var(--st-blocked)}
.cf-val{vertical-align:middle;font-variant-numeric:tabular-nums}

/* ===== Company config (settings) ===== */
.set-form{max-width:960px}
.set-sec{background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:16px 18px;
  margin-bottom:14px;box-shadow:var(--shadow)}
.set-sec-h{font-weight:600;font-size:13px;margin:0 0 12px;display:flex;align-items:center;gap:8px}
.set-sec-h svg{width:15px;height:15px;color:var(--text-2)}
.set-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
.set-grid .field{margin-bottom:0}
.set-grid .field.full{grid-column:1 / -1}
.set-color{display:flex;align-items:center;gap:9px}
.set-color input[type=color]{width:38px;height:36px;padding:2px;border:1px solid var(--border-strong);
  border-radius:var(--radius);background:var(--panel);cursor:pointer;flex:0 0 38px}
.set-color .set-hex{width:110px}
.set-ro{opacity:.7}
.set-bar{position:sticky;bottom:0;background:var(--bg);padding:12px 0 4px;display:flex;align-items:center;
  gap:10px;border-top:1px solid var(--border);margin-top:2px}

/* ===== Full-page task view (Clickflow "expanded" mode) =====
   Dùng lại MỌI style .peek-* của section; chỉ khung ngoài khác slide-over. Selector con
   (.task-page .peek-b …) có độ ưu tiên cao hơn .peek-b nên override được không cần !important. */
.task-page{max-width:860px;margin:0 auto;background:var(--panel);border:1px solid var(--border);
  border-radius:12px;box-shadow:0 1px 3px rgba(20,22,30,.06),0 8px 24px -18px rgba(20,22,30,.25);
  overflow:hidden}
.task-page .peek-h{padding:13px 22px}
.task-page .peek-b{padding:24px 30px 46px}
.task-page .peek-title{font-size:24px;font-weight:700;line-height:1.28;margin-bottom:14px}
.task-page .peek-meta{margin-bottom:18px}
@media (max-width:640px){
  .task-page{max-width:none;border:none;border-radius:0;box-shadow:none}
  .task-page .peek-b{padding:16px}
}

/* ===== Task peek panel (Plane slide-over) ===== */
.peek-ov{position:fixed;inset:0;background:rgba(20,22,30,.4);z-index:150;backdrop-filter:blur(1px);
  animation:peekFade .15s ease}
@keyframes peekFade{from{opacity:0}to{opacity:1}}
.peek{position:fixed;top:0;right:0;bottom:0;width:460px;max-width:100vw;background:var(--panel);
  border-left:1px solid var(--border);box-shadow:var(--shadow-md);z-index:151;display:flex;
  flex-direction:column;animation:peekIn .2s ease}
@keyframes peekIn{from{transform:translateX(30px);opacity:.4}to{transform:translateX(0);opacity:1}}
.peek-h{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--border);
  flex:0 0 auto}
.peek-h .peek-crumb{font-size:12px;color:var(--text-3);flex:1;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;display:flex;align-items:center;gap:6px}
.peek-h .peek-crumb .dot{width:8px;height:8px;border-radius:50%;flex:0 0 8px}
.peek-b{flex:1;overflow:auto;padding:16px 18px}
.peek-title{width:100%;border:1px solid transparent;border-radius:6px;font-size:16px;font-weight:600;
  color:var(--text);padding:5px 7px;margin:0 0 10px -7px;background:transparent;font-family:inherit;
  line-height:1.35;resize:none;letter-spacing:-.2px}
.peek-title:hover{background:var(--hover)}
.peek-title:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 3px var(--primary-weak);background:var(--panel)}
.peek-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px}
.peek-props{display:grid;grid-template-columns:auto 1fr;gap:9px 14px;align-items:center;margin-bottom:6px;
  font-size:12px}
.peek-props .pk{color:var(--text-3);display:flex;align-items:center;gap:7px}
.peek-props .pv{color:var(--text);display:flex;align-items:center;gap:6px;min-width:0}
.peek-sec{margin-top:20px}
.peek-sec-h{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--text-3);
  margin:0 0 9px;display:flex;align-items:center;gap:8px}
.peek-sec-h .cnt{background:#ececef;color:var(--text-2);padding:0 6px;border-radius:20px;font-size:11px;
  letter-spacing:0}
.peek-desc{width:100%;min-height:60px;border:1px solid var(--border-strong);border-radius:6px;padding:8px 10px;
  font-size:13px;font-family:inherit;line-height:1.5;resize:vertical;color:var(--text);background:var(--panel)}
.peek-desc:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 3px var(--primary-weak)}
.peek-3l-row{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--border);
  border-radius:8px;margin-bottom:8px;background:var(--bg-subtle)}
.peek-3l-row .lab{font-size:12px;font-weight:600;flex:1}
.peek-sub{display:flex;align-items:center;gap:9px;padding:6px 0;border-top:1px solid #f0f0f2;font-size:12px}
.peek-sub:first-child{border-top:none}
.peek-sub .st{flex:1;min-width:0}
.peek-sub.done .st{color:var(--text-3);text-decoration:line-through}
.peek-add{display:flex;gap:7px;margin-top:9px}
.peek-add .input{height:30px}
.peek-kpi{border:1px solid var(--border);border-radius:8px;padding:10px 11px;margin-bottom:9px;background:var(--bg-subtle)}
.peek-kpi-h{display:flex;align-items:center;gap:8px;margin-bottom:6px;flex-wrap:wrap}
.peek-kpi-h .kn{font-weight:600;font-size:12px}
.peek-kpi-h .kv{margin-left:auto;font-size:12px;font-weight:700}
.peek-kpi-vals{font-size:12px;color:var(--text-2);margin-bottom:5px}
/* KR rows trong goal card — tên + thanh tiến độ + % trên một hàng gọn */
.gc-krs{margin-top:10px;display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--border);padding-top:8px}
.gc-kr{display:flex;align-items:center;gap:8px;font-size:12px}
.gc-kr-name{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-2)}
.gc-kr-bar{flex:0 0 90px}
.gc-kr-bar .progress{margin:0}
.gc-kr-pct{flex:0 0 34px;text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.gc-kr-more{font-size:11px;color:var(--text-3)}
/* OKR tổng quan trên trang KPI — một hàng một mục tiêu, chi tiết nằm ở Goal */
.okr-mini{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:8px;background:var(--panel);overflow:hidden}
.okr-mini-row{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;border-bottom:1px solid var(--border)}
.okr-mini-row:last-child{border-bottom:none}
.okr-mini-row:hover{background:var(--hover)}
.okr-mini-name{flex:1 1 auto;min-width:0;font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Dashboard: preview widget trong card + lưới mẫu khi tạo (kiểu ClickUp template picker) */
.dash-wprev{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.dash-wpill{font-size:11px;font-weight:600;color:var(--text-2);background:var(--bg-subtle);
  border:1px solid var(--border);border-radius:20px;padding:1px 8px;white-space:nowrap;
  max-width:150px;overflow:hidden;text-overflow:ellipsis}
.dash-wmore{color:var(--text-3)}
.dtpl-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dtpl-card{text-align:left;background:var(--panel);border:1px solid var(--border);border-radius:8px;
  padding:12px 14px;cursor:pointer;font-family:var(--font)}
.dtpl-card:hover{border-color:var(--primary);box-shadow:var(--shadow-md)}
.dtpl-card:disabled{opacity:.6;cursor:wait}
.dtpl-name{font-weight:700;font-size:13.5px;margin-bottom:2px}
.dtpl-desc{font-size:12px;color:var(--text-2);line-height:1.45}
.dtpl-blank{border-style:dashed}
/* Trang trống của Dashboard — phòng trưng bày mẫu toàn phần, canh giữa kiểu ClickUp */
.dtpl-hero{max-width:760px;margin:36px auto 0;text-align:center}
.dtpl-hero-title{font-size:22px;font-weight:700;margin:0 0 6px;letter-spacing:-.2px}
.dtpl-hero-sub{font-size:13px;color:var(--text-2);margin:0 auto 22px;max-width:52ch}
.dtpl-hero .dtpl-grid{text-align:left}
/* Chế độ chỉnh sửa dashboard: viền đứt nhạt báo "card đang sửa được" (kiểu ClickUp) */
.dash-widget.dw-editing{outline:1px dashed var(--border-strong);outline-offset:2px}
.peek-kpi-log{display:flex;gap:6px;margin-top:8px}
.peek-kpi-log .input{height:28px}
.tt-badge{font-size:11px;font-weight:600;padding:1px 6px;border-radius:5px;background:#eef2ff;color:#4256c7;
  white-space:nowrap}
.tt-daily{background:#e0f2fe;color:#0369a1}
.tt-range{background:#ede9fe;color:#6d28d9}
.tt-milestone{background:#fef3c7;color:#b45309}
.tt-total{background:#e8ebf5;color:var(--primary-text)}
.peek-mini{height:5px;border-radius:6px;background:#ececef;overflow:hidden;margin-top:2px}
.peek-mini > span{display:block;height:100%;border-radius:6px}
.peek-empty{font-size:12px;color:var(--text-3);padding:4px 0}

/* ===== Board group-by toggle + subtask chip ===== */
.subchip{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:600;color:var(--text-2);
  background:#f1f1f3;padding:1px 6px;border-radius:20px;flex:0 0 auto}
.subchip svg{width:10px;height:10px}
.subchip.full{background:#f0fdf4;color:#15803d}
.grp-h .grp-code{font-size:11px;color:var(--text-3);background:#ececef;padding:1px 6px;border-radius:5px;font-weight:600}

/* ===== Groups / OKR dashboard ===== */
.gd-card{background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:16px 18px;
  margin-bottom:14px;box-shadow:var(--shadow)}
.gd-h{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.gd-dot{width:11px;height:11px;border-radius:50%;flex:0 0 11px}
.gd-name{font-weight:600;font-size:14.5px}
.gd-code{font-size:11px;color:var(--text-3);background:#ececef;padding:1px 7px;border-radius:5px;font-weight:600}
.gd-counts{margin-left:auto;display:flex;gap:14px;text-align:center}
.gd-counts .m .n{font-size:16px;font-weight:700;line-height:1.1}
.gd-counts .m .l{font-size:11px;color:var(--text-3)}
.gd-prog-row{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.gd-prog-row .pct{font-size:12px;font-weight:700;width:44px;text-align:right}
.gd-block-h{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--text-3);
  margin:14px 0 8px;display:flex;align-items:center;gap:8px}
.gd-kpi{display:flex;align-items:center;gap:12px;padding:7px 0;border-top:1px solid #f0f0f2;font-size:12px}
.gd-kpi:first-of-type{border-top:none}
.gd-kpi .kn{flex:1;min-width:0;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.gd-kpi .kvals{width:150px;font-size:12px;color:var(--text-2);text-align:right;flex:0 0 auto}
.gd-kpi .kbar{width:120px;flex:0 0 120px}
.gd-kpi .kpct{width:42px;text-align:right;font-weight:600;font-size:12px;flex:0 0 42px}
.gd-obj{border:1px solid var(--border);border-radius:8px;padding:12px 13px;margin-bottom:10px;background:var(--bg-subtle)}
.gd-obj-h{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.gd-obj-t{font-weight:600;font-size:13px;flex:1}
.gd-obj-pct{font-weight:700;font-size:12px}
.gd-kr{display:flex;align-items:center;gap:10px;padding:6px 0;border-top:1px solid #eceef2;font-size:12px}
.gd-kr .krt{flex:1;min-width:0}
.gd-kr .krbar{width:110px;flex:0 0 110px}
.gd-kr .krin{width:88px;height:26px;flex:0 0 88px}
.gd-kr .krpct{width:40px;text-align:right;font-weight:600;flex:0 0 40px}
.gd-period{font-size:11px;color:var(--text-3)}

/* ===== Integrations actions + connector modal ===== */
.intg-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.intg-actions .btn{flex:0 0 auto}
.intg-err{font-size:11px;color:#b91c1c;background:#fef2f2;border:1px solid #fecaca;border-radius:6px;
  padding:5px 8px;margin-top:6px;word-break:break-word}

/* ===== AI Command Console ===== */
.cmd-grid{display:grid;grid-template-columns:minmax(320px,1fr) minmax(320px,1.15fr);gap:16px;align-items:start}
.cmd-compose{position:sticky;top:0}
.cmd-result{margin-top:14px;border-top:1px solid var(--border);padding-top:12px}
.cmd-result-h{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-weight:600;font-size:12px}
.cmd-result-h .status-pill{margin-left:auto}
.cmd-pre{white-space:pre-wrap;word-break:break-word;background:var(--bg-subtle);border:1px solid var(--border);
  border-radius:8px;padding:10px 12px;font-size:12px;line-height:1.55;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:var(--text);margin:0;overflow:auto;max-height:340px}
.cmd-hint{font-size:12px;background:#fff7ed;border:1px solid #fed7aa;border-radius:7px;padding:8px 10px;margin-bottom:8px;color:#9a3412}
.cmd-err{font-size:12px;background:#fef2f2;border:1px solid #fecaca;border-radius:7px;padding:8px 10px;margin-bottom:8px;color:#b91c1c;white-space:pre-wrap;word-break:break-word}
.cmd-task{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:12px;color:var(--st-done);font-weight:600}
.cmd-task svg{width:13px;height:13px}
.cmd-history{min-width:0}
.cmd-item{background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:11px 13px;margin-bottom:10px;box-shadow:var(--shadow)}
.cmd-item-h{display:flex;align-items:center;gap:9px;min-width:0}
.cmd-target{font-size:11px;font-weight:700;background:#faf5ff;color:#7c3aed;padding:2px 7px;border-radius:5px;flex:0 0 auto;white-space:nowrap}
.cmd-instr{flex:1;min-width:0;font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmd-item-h .status-pill{flex:0 0 auto}
.cmd-meta{font-size:11px;color:var(--text-3);margin-top:5px}
.cmd-detail{margin-top:10px;padding-top:10px;border-top:1px solid #f0f0f2}
.cmd-sub{font-size:12px;color:var(--text-2);margin-bottom:8px}

/* ===== Extension screens (forms/docs cards) ===== */
.ext-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.ext-card{background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:14px;box-shadow:var(--shadow);
  transition:box-shadow .12s,border-color .12s}
.ext-card.doc-card{cursor:pointer}
.ext-card.doc-card:hover{box-shadow:var(--shadow-md);border-color:var(--border-strong)}
.ext-top{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.ext-name{font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ext-sub{font-size:11px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ext-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.ext-link{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text-2);background:var(--bg-subtle);
  border:1px solid var(--border);border-radius:6px;padding:5px 8px;overflow:hidden}
.ext-link code{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:ui-monospace,Consolas,monospace}
.ext-link svg{flex:0 0 auto;color:var(--text-3)}
.doc-excerpt{font-size:12px;color:var(--text-2);line-height:1.5;margin-bottom:8px}
.doc-tags{display:flex;flex-wrap:wrap;gap:5px}

/* ===== Automations ===== */
.auto-card{background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:14px;margin-bottom:12px;box-shadow:var(--shadow)}
.auto-h{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.auto-flow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.auto-pill{font-size:12px;padding:4px 9px;border-radius:6px;background:var(--bg-subtle);border:1px solid var(--border);color:var(--text-2)}
.auto-pill b{color:var(--text);font-weight:700}
.auto-when{background:#eef2ff;border-color:#dbe3ff;color:#3949ab}
.auto-if{background:#fff7ed;border-color:#fed7aa;color:#9a3412}
.auto-then{background:#f0fdf4;border-color:#bbf7d0;color:#15803d}

/* ===== Calendar view (board) ===== */
.cal-bar{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.cal-title{font-weight:600;font-size:14px;min-width:118px;text-align:center}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--border);
  border:1px solid var(--border);border-radius:8px;overflow:hidden}
.cal-wd{background:var(--bg-subtle);text-align:center;font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.3px;color:var(--text-3);padding:7px 0}
.cal-cell{background:var(--panel);min-height:96px;padding:5px 6px 7px;display:flex;flex-direction:column;gap:4px}
.cal-cell.cal-blank{background:var(--bg-subtle)}
.cal-cell.cal-today{background:var(--primary-weak)}
.cal-daynum{font-size:12px;font-weight:600;color:var(--text-2);align-self:flex-start}
.cal-cell.cal-today .cal-daynum{color:var(--primary-text)}
.cal-chips{display:flex;flex-direction:column;gap:3px;overflow:hidden}
.cal-chip{display:flex;align-items:center;gap:5px;width:100%;text-align:left;border:1px solid var(--border);
  background:var(--panel);border-left:3px solid var(--cc,var(--primary));border-radius:5px;padding:2px 6px;
  font-size:11px;color:var(--text);cursor:pointer;font-family:inherit;line-height:1.4}
.cal-chip:hover{background:var(--hover)}
.cal-chip-dot{width:6px;height:6px;border-radius:50%;flex:0 0 6px}
.cal-chip-t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.cal-more{font-size:11px;color:var(--text-3);padding:1px 4px;font-weight:600}
.cal-nodue{display:flex;flex-wrap:wrap;gap:6px;background:var(--panel);border:1px solid var(--border);
  border-radius:8px;padding:12px}
.cal-nodue .cal-chip{width:auto;max-width:220px}
.cal-qadd{margin-top:auto}
.qadd-trigger-compact{display:flex;align-items:center;justify-content:center;width:18px;height:18px;padding:0;
  background:transparent;border:1px solid transparent;border-radius:4px;color:var(--text-3);cursor:pointer;
  opacity:0;transition:opacity .12s,background .12s,color .12s}
.cal-cell:hover .qadd-trigger-compact{opacity:1}
.qadd-trigger-compact:hover{background:var(--hover);border-color:var(--border);color:var(--text-2)}
.cal-qadd .qadd-input{height:22px;font-size:11px;padding:0 6px}
@media (max-width:560px){
  .cal-cell{min-height:72px}
  .cal-chip-t{font-size:11px}
}

/* ===== Toggle switch ===== */
.toggle{width:38px;height:22px;border-radius:20px;background:#d5d5d8;border:none;cursor:pointer;position:relative;
  flex:0 0 38px;transition:background .15s;padding:0}
.toggle.on{background:var(--st-done)}
.toggle:disabled{opacity:.5;cursor:not-allowed}
.toggle-knob{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s}
.toggle.on .toggle-knob{transform:translateX(16px)}

/* ===== Field builder (form/custom-field modal) ===== */
.fb-rows{display:flex;flex-direction:column;gap:8px}
.fb-row{display:grid;grid-template-columns:1fr 1.3fr 1fr auto auto;gap:6px;align-items:center}
.fb-row .input{height:30px}
.fb-req{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--text-2);font-weight:600;cursor:pointer;white-space:nowrap}
.fb-req input{width:15px;height:15px;cursor:pointer}

/* ===== Notifications bell ===== */
.notif-wrap{position:relative}
.notif-btn{width:30px;height:30px}
.notif-btn svg{width:16px;height:16px}
.notif-badge{position:absolute;top:-5px;right:-5px;min-width:16px;height:16px;padding:0 4px;border-radius:20px;
  background:var(--st-blocked);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;
  pointer-events:none;box-shadow:0 0 0 2px var(--panel)}
.notif-drop{position:absolute;top:38px;right:0;width:340px;max-width:88vw;background:var(--panel);border:1px solid var(--border-strong);
  border-radius:8px;box-shadow:var(--shadow-md);z-index:120;overflow:hidden}
.notif-h{display:flex;align-items:center;padding:11px 13px;border-bottom:1px solid var(--border);font-weight:600;font-size:13px}
.notif-h .btn{margin-left:auto}
.notif-list{max-height:60vh;overflow:auto}
.notif-item{display:flex;gap:9px;padding:10px 13px;border-bottom:1px solid #f0f0f2;align-items:flex-start}
.notif-item:last-child{border-bottom:none}
.notif-item .notif-dot{width:7px;height:7px;border-radius:50%;background:transparent;margin-top:5px;flex:0 0 7px}
.notif-item.unread{background:var(--primary-weak)}
.notif-item.unread .notif-dot{background:var(--primary)}
.notif-title{font-size:12px;font-weight:600;line-height:1.4}
.notif-body{font-size:12px;color:var(--text-2);margin-top:2px;line-height:1.45}
.notif-time{font-size:11px;color:var(--text-3);margin-top:3px}
.notif-empty{padding:22px 14px;text-align:center;color:var(--text-3);font-size:12px}

/* ===== Export dropdown ===== */
.export-wrap{position:relative;display:inline-block}
.export-wrap .btn svg:last-child{margin-left:-1px}
.export-menu{position:absolute;top:calc(100% + 4px);right:0;min-width:170px;background:var(--panel);
  border:1px solid var(--border-strong);border-radius:8px;box-shadow:var(--shadow-md);padding:5px;z-index:70}
.export-item{display:block;width:100%;text-align:left;padding:7px 10px;border:none;background:none;cursor:pointer;
  font-size:13px;color:var(--text);border-radius:6px;font-family:inherit}
.export-item:hover{background:var(--hover);color:var(--primary-text)}

/* ===== Dashboard date-range selector ===== */
.dash-range{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 16px}
.dash-range > .muted svg{width:16px;height:16px}
.dash-custom{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.dash-range-lab{font-size:12px;color:var(--text-3);font-weight:600;margin-left:auto}

/* ===== Timeline (Gantt-lite) view ===== */
.tl-scroll{overflow-x:auto;border:1px solid var(--border);border-radius:8px;background:var(--panel)}
.tl-head{display:grid;position:sticky;top:0;z-index:2;background:var(--bg-subtle);border-bottom:1px solid var(--border)}
.tl-corner{padding:8px 12px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;
  color:var(--text-3);position:sticky;left:0;background:var(--bg-subtle);z-index:3;border-right:1px solid var(--border)}
.tl-daycol{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:5px 0;
  border-left:1px solid #f0f0f2}
.tl-daycol.tl-wk{border-left:1px solid var(--border-strong)}
.tl-daycol.tl-today{background:var(--primary-weak)}
.tl-dow{font-size:9px;font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:.2px}
.tl-dnum{font-size:11px;font-weight:600;color:var(--text-2)}
.tl-daycol.tl-today .tl-dnum{color:var(--primary-text)}
.tl-body{position:relative}
.tl-row{display:grid;min-height:36px;align-items:center;border-bottom:1px solid #f0f0f2}
.tl-row:last-child{border-bottom:none}
.tl-label{display:flex;align-items:center;gap:7px;padding:0 12px;position:sticky;left:0;background:var(--panel);
  z-index:1;border-right:1px solid var(--border);height:100%;cursor:pointer;overflow:hidden}
.tl-label:hover{background:var(--hover)}
.tl-label-t{font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-track{position:relative;height:24px;margin:0 4px}
.tl-bar{position:absolute;top:2px;height:20px;border-radius:5px;background:var(--bc,var(--primary));border:none;
  cursor:pointer;display:flex;align-items:center;padding:0 7px;overflow:hidden;min-width:6px;
  box-shadow:0 1px 2px rgba(16,24,40,.12)}
.tl-bar:hover{filter:brightness(1.05)}
.tl-bar-t{font-size:11px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-shadow:0 1px 1px rgba(0,0,0,.15)}
.tl-point{position:absolute;top:4px;width:16px;height:16px;border-radius:50%;background:var(--bc,var(--primary));
  border:2px solid var(--panel);cursor:pointer;transform:translateX(-8px);box-shadow:0 1px 2px rgba(16,24,40,.2);padding:0}
.tl-point:hover{filter:brightness(1.05)}
.tl-outside,.tl-empty{font-size:11px;color:var(--text-3);padding:6px 12px}
.tl-empty{padding:20px 14px;text-align:center}

/* ===== Workload view ===== */
.wl-list{display:flex;flex-direction:column;gap:12px}
.wl-row{background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:14px 16px;box-shadow:var(--shadow)}
.wl-person{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.wl-person .avatar{width:32px;height:32px;font-size:11px;flex:0 0 32px}
.wl-name{font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wl-break{font-size:12px;color:var(--text-3);margin-top:1px}
.wl-count{margin-left:auto;font-size:11px;font-weight:700;background:#ececef;color:var(--text-2);
  padding:2px 9px;border-radius:20px;flex:0 0 auto}
.wl-barwrap{position:relative;margin-bottom:10px}
.wl-bar{display:flex;height:8px;border-radius:6px;background:#ececef;overflow:hidden}
.wl-seg{display:block;height:100%}
.wl-load{display:block;height:2px;border-radius:2px;background:var(--primary);margin-top:3px;opacity:.35}
.wl-items{display:flex;flex-wrap:wrap;gap:6px}
.wl-chip{display:inline-flex;align-items:center;gap:6px;max-width:230px;border:1px solid var(--border);
  background:var(--bg-subtle);border-radius:6px;padding:3px 8px;font-size:11px;color:var(--text);cursor:pointer;
  font-family:inherit}
.wl-chip:hover{background:var(--hover)}
.wl-chip-t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wl-more{font-size:11px;color:var(--text-3);font-weight:600;align-self:center}

/* ===== Task peek: custom fields ===== */
.peek-cf{margin-bottom:10px}
.peek-cf-lab{display:block;font-size:12px;font-weight:600;color:var(--text-2);margin-bottom:5px}
.peek-cf .input{height:32px}

/* ===== Report schedules ===== */
.sched-meta{display:flex;gap:16px;flex-wrap:wrap;margin-top:8px;font-size:12px}

/* ===== Permissions matrix ===== */
.perm-tabs{display:inline-flex;border:1px solid var(--border-strong);border-radius:var(--radius);overflow:hidden;margin-bottom:14px}
.perm-tab{height:30px;padding:0 16px;border:none;background:var(--panel);cursor:pointer;font-size:12px;
  color:var(--text-2);font-weight:500}
.perm-tab + .perm-tab{border-left:1px solid var(--border-strong)}
.perm-tab.active{background:var(--primary-weak);color:var(--primary-text);font-weight:600}
.perm-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:8px}
.perm-tbl{border:none;border-radius:0;min-width:640px}
.perm-tbl th.perm-act{text-align:center;white-space:nowrap}
.perm-tbl .perm-scope{font-weight:600;color:var(--text);white-space:nowrap;background:var(--bg-subtle);
  position:sticky;left:0;z-index:1}
.perm-tbl .perm-cell{text-align:center}
.perm-chkwrap{display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.perm-chkwrap input{width:16px;height:16px;cursor:pointer}
.perm-na{color:var(--text-3)}

/* ===== Enriched create-task modal ===== */
.modal-sec-h{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text-3);
  margin:18px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--border)}
.modal-sec-h:first-child{margin-top:0}
.seg-exec{width:100%;display:flex}
.seg-exec button{flex:1;justify-content:center;height:34px}

/* ===== Task panel enrichments ===== */
.peek-inline{height:30px;font-size:12px;padding:0 8px}
.peek-props select.peek-inline,.peek-props input.peek-inline{width:auto;min-width:0;max-width:170px}
.peek-tags{display:flex;flex-wrap:wrap;gap:6px}
.peek-tag{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--text-2);
  background:#f1f1f3;padding:2px 4px 2px 8px;border-radius:20px}
.peek-tag .tag-x{border:none;background:none;cursor:pointer;color:var(--text-3);font-size:14px;line-height:1;
  padding:0 3px;border-radius:50%}
.peek-tag .tag-x:hover{color:#dc2626;background:#fee2e2}
.peek-time-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px}
.tt-total-lab{font-weight:700;font-size:13px;color:var(--text)}
.peek-ai-result{margin-top:9px}
.peek-ai-body{background:var(--bg-subtle);border:1px solid var(--border);border-radius:8px;padding:9px 11px;
  font-size:12px;line-height:1.5;color:var(--text-2);white-space:pre-wrap}
.peek-cmts{display:flex;flex-direction:column;gap:10px;margin-bottom:4px}
.peek-cmt{border:1px solid var(--border);border-radius:8px;padding:8px 10px;background:var(--bg-subtle)}
.peek-cmt-h{display:flex;align-items:center;gap:7px;margin-bottom:5px}
.peek-cmt-h .cmt-name{font-weight:600;font-size:12px}
.peek-cmt-h .cmt-time{margin-left:auto;font-size:11px;color:var(--text-3)}
.peek-cmt-body{font-size:13px;line-height:1.5;color:var(--text);white-space:pre-wrap}

/* ===== Board row chips (tags / comments / time) ===== */
.row-tag{display:inline-flex;align-items:center;font-size:11px;font-weight:600;color:var(--text-2);
  background:#eef2ff;padding:1px 6px;border-radius:20px;flex:0 0 auto;max-width:110px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.row-tag.more{background:#f1f1f3;color:var(--text-3)}
.row-meta{font-size:11px;color:var(--text-3);flex:0 0 auto;white-space:nowrap}

/* ===== "Việc của tôi" (My Work) grouped view ===== */
.mine-groups{display:flex;flex-direction:column;gap:12px}
.mine-grp{background:var(--panel);border:1px solid var(--border);border-radius:8px;overflow:hidden;box-shadow:var(--shadow)}
.mine-grp .grp-h{border-bottom:1px solid var(--border)}
.mine-grp .grp-h.collapsed{border-bottom:none}
.mine-grp-muted .grp-name{color:var(--text-2)}
.mine-grp-muted .mine-row{opacity:.72}
.mine-row .r-title{gap:8px}
.mine-co{font-size:11px;font-weight:600;color:var(--text-2);background:var(--bg-subtle);border:1px solid var(--border);
  padding:1px 7px;border-radius:20px;flex:0 0 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.mine-st{flex:0 0 auto}
.mine-row.mine-done .r-title .t{color:var(--text-3);text-decoration:line-through}

/* ===== Board filter bar ===== */
.filter-bar{display:flex;flex-direction:column;gap:8px;margin:0 0 14px}
.filter-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.filter-lab{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--text-2)}
.filter-lab svg{width:14px;height:14px}
.filter-chips{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.filter-chip{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:var(--primary-text);
  background:var(--primary-weak);border:1px solid #d6e0ff;padding:2px 4px 2px 9px;border-radius:20px}
.filter-chip .chip-x{border:none;background:none;cursor:pointer;color:var(--primary-text);font-size:14px;line-height:1;
  padding:0 3px;border-radius:50%}
.filter-chip .chip-x:hover{color:#fff;background:var(--primary)}
.filter-clear{margin-left:2px}

/* ===== Task panel: relationships / dependencies ===== */
.peek-rel-row{display:flex;align-items:center;gap:9px;padding:7px 0;border-top:1px solid #f0f0f2;font-size:12px}
.peek-rel-row:first-child{border-top:none}
.peek-rel-type{font-size:11px;font-weight:700;background:#eef2ff;color:#4256c7;padding:2px 8px;border-radius:5px;
  flex:0 0 auto;white-space:nowrap}
.peek-rel-title{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.peek-rel-add{margin-top:9px;border-top:1px solid var(--border);padding-top:9px}
.peek-rel-add-row{display:flex;align-items:center;gap:7px}
.peek-rel-add-row select:first-child{flex:0 0 auto}

/* ===== Timesheet (Bảng chấm công) ===== */
.ts-total{background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:16px 18px;
  box-shadow:var(--shadow);display:flex;flex-direction:column;gap:4px;margin-bottom:6px}
.ts-total-k{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--text-2);font-weight:600}
.ts-total-k svg{width:16px;height:16px}
.ts-total-v{font-size:30px;font-weight:700;letter-spacing:-.5px;color:var(--text)}
.ts-grid th,.ts-grid td{padding:7px 8px}
.ts-grid .ts-grid-today{background:var(--bg-subtle)}
.ts-grid thead .ts-grid-today{background:var(--hover)}
.ts-grid .ts-grid-cell:hover{background:var(--hover)}
.ts-grid tfoot .ts-grid-foot td{border-top:1.5px solid var(--border);border-bottom:none;background:var(--bg-subtle)}

/* ===== Responsive ===== */
.backdrop{display:none}
@media (max-width:900px){
  .sidebar{position:fixed;left:0;top:0;bottom:0;z-index:90;transform:translateX(-100%);
    transition:transform .2s;box-shadow:var(--shadow-md)}
  .app.nav-open .sidebar{transform:translateX(0)}
  .app.nav-open .backdrop{display:block;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:80}
  .hamburger{display:inline-flex}
  .two-col{grid-template-columns:1fr}
  .content{padding:14px}
  .r-assignee{display:none}
  .cell,.cell-h{width:auto}
  .due{width:auto}
  .set-grid{grid-template-columns:1fr}
  .cmd-grid{grid-template-columns:1fr}
  .cmd-compose{position:static}
}
@media (max-width:560px){
  .row2,.score-row{grid-template-columns:1fr}
  .list-head{display:none}
  .peek{width:100vw}
  .gd-kpi{flex-wrap:wrap}
  .gd-kpi .kbar{width:100%;flex:1 1 100%;order:3}
  .gd-counts{gap:10px}
  .fb-row{grid-template-columns:1fr 1fr;gap:6px}
  .fb-row .fb-req{grid-column:1}
  .notif-drop{right:-40px}
  .dash-range-lab{margin-left:0;width:100%}
  .sched-meta{gap:8px}
}

/* ===== Bộ não AI — unified hub (compose box, quick actions, agent gallery) ===== */
/* ── Tab Hỏi/Agents/Kỹ năng/Bộ nhớ — GẤP MÉP dính nóc composer (kiểu Notion AI) ──
   JS chèn seg ngay TRƯỚC .brain-compose-wrap trong .brain-chat-main (app.js, marker
   BRAIN_TABS). Đây là NƠI DUY NHẤT tạo kiểu cụm tab này: hợp nhất 3 block cũ
   (.brain-seg ở đây + hai .seg.brain-seg vá nối đuôi ở EOF). Kiểu vá cũ để lọt
   border-color 4 cạnh của block pill xuống .active, tab active thành HỘP KÍN nên
   đọc ra "tab rời + ô nhập rời" thay vì một khối liền.
   Mọi rule dùng .seg.brain-seg (0,2,0) nên thắng block .seg pill khai báo sau ở
   phần Clickflow polish — thêm rule mới cứ đặt ngay đây, không cần bám cuối file. */
.seg.brain-seg{
  display:flex;justify-content:flex-start;align-items:flex-end;gap:2px;
  background:transparent;border:none;border-radius:0;
  /* Thụt trái 18px = đúng bán kính bo của ô nhập/panel bên dưới: thụt ít hơn thì chân
     tab đứng đè lên khúc CONG của góc, hở một mẩu hình lưỡi liềm ngay chỗ cần liền. */
  max-width:820px;width:100%;padding:0 0 0 18px;
  /* .brain-chat-main là flex column gap:10px — muốn tab CHẠM nóc khối bên dưới phải trừ
     hết khoảng gap đó rồi đè thêm 2px (ô nhập ở tab Hỏi/Agents, .brain-tabpanel ở tab
     Kỹ năng/Bộ nhớ vì hai tab đó ẩn hẳn composer). */
  margin:0 auto -12px;
  /* z:2 < .brain-compose-wrap z:3 là CỐ Ý: flyout .bm-fly nằm trong compose-wrap,
     seg cao hơn thì chữ tab xuyên qua panel flyout. Giá phải trả: viền gradient
     1.5px vẽ đè chân tab active. */
  position:relative;z-index:2;
}
.seg.brain-seg button{
  height:32px;padding:6px 16px 8px;margin-bottom:0;
  font-size:12px;font-weight:600;color:var(--text-2);background:transparent;
  /* 12px khớp thang bo mới của ô nhập (18px) — tab bo 10 cạnh ô bo 18 lệch thấy rõ. */
  border:1px solid transparent;border-radius:12px 12px 0 0;
}
.seg.brain-seg button:hover{background:var(--hover);color:var(--text)}
.seg.brain-seg button.active{
  background:var(--panel);color:var(--text);
  /* CHỈ tô viền trên + hai bên, đáy để trong suốt: đáy có màu là tab đóng kín khung,
     mất hiệu ứng gấp mép liền ô nhập. */
  border-color:var(--border) var(--border) transparent;
  box-shadow:0 -2px 10px -6px rgba(120,115,245,.4);
}

/* ── Tấm panel ruột 3 tab phụ (Agents / Kỹ năng / Bộ nhớ) ──
   Cùng bề rộng, bo góc và bóng đổ với ô nhập nên hai thứ đọc ra một hệ. KHÔNG dùng
   viền gradient: gradient là dấu hiệu "chỗ gõ vào", panel chỉ là mặt phẳng chứa nội
   dung — dùng lại thì mất hẳn ý nghĩa của nó.
   Tab Kỹ năng/Bộ nhớ ẩn composer (app.js paintComposerVisibility) nên panel là thứ
   đỡ mép -12px của cụm tab; tab Agents thì composer vẫn hiện, panel là thẻ riêng nằm
   dưới. Cả hai trường hợp đều KHÔNG đặt margin-top — gap 10px của .brain-chat-main lo,
   thêm margin vào là cộng dồn rồi phá mối hàn tab. */
.brain-tabpanel{
  max-width:820px;width:100%;margin:0 auto;
  background:var(--panel);border:1px solid var(--border);border-radius:18px;
  padding:20px;box-shadow:0 10px 34px -18px rgba(0,0,0,.20);
  position:relative;z-index:1;
}
/* Tiêu đề đầu tiên trong panel không cần margin trên — padding của panel đã đủ. */
.brain-tabpanel>:first-child{margin-top:0}

/* Gradient-glow compose box: a wrapping div with a soft multi-color border, achieved via padding
   (no JS/animation needed) + a subtle low-opacity glow shadow in the same hues. */
/* z:3 > seg z:2 — dropdown/flyout dựng bên trong composer phải đè lên tab (xem
   ghi chú stacking ở block .seg.brain-seg trên). */
.brain-compose-wrap{margin-bottom:6px;position:relative;z-index:3}
.brain-glow{
  /* 18px chứ không 14: ô cao ~150px với bo 14 đọc ra "ô nhập form"; bo lớn mới ra
     "mặt phẳng/card" như composer ClickUp. Inner = 18 − 1.5 padding = 16.5. */
  border-radius:18px;padding:1.5px;
  /* Bốn chặng, HAI chặng giữa cùng màu → dải trung tính chiếm 42-58%, sắc độ dồn hết
     về hai góc. Bản cũ (#ff6ec4,#7873f5,#4adede) bão hoà suốt chu vi nên nét viền
     đọc như vòng focus/báo lỗi thay vì quầng sáng trang trí. */
  background:linear-gradient(115deg,
    var(--brain-edge-1) 0%,var(--brain-edge-mid) 42%,
    var(--brain-edge-mid) 58%,var(--brain-edge-2) 100%);
  /* Quầng ôm sát mép (spread âm nhỏ, blur lớn) — đây mới là phần "phát sáng";
     lớp thứ ba là bóng đổ trung tính giữ ô có trọng lượng trên nền trắng. */
  box-shadow:
    0 0 22px -2px var(--brain-halo-1),
    0 0 26px -2px var(--brain-halo-2),
    0 10px 34px -18px rgba(0,0,0,.20);
}
.brain-glow-inner{
  /* position:relative là mốc neo cho .brain-mention-drop (C3.2) — thiếu nó dropdown
     bám vào tổ tiên có position gần nhất và trôi khỏi khung soạn. */
  position:relative;
  background:var(--panel);border-radius:16.5px;padding:16px 18px 12px;
}
.brain-textarea{
  width:100%;border:none;outline:none;resize:none;background:transparent;color:var(--text);
  font-family:inherit;font-size:14px;line-height:1.55;min-height:44px;max-height:220px;
  padding:0;margin:0;
}
.brain-textarea::placeholder{color:var(--text-3)}
/* KHÔNG kẻ vạch ngăn ở đây. Ô nhập đã có viền gradient bao ngoài; thêm một nét ngang
   bên trong là cạnh thứ hai trong cùng một khối nhỏ, mắt đọc thành hai ngăn rời.
   ClickUp để trống hoàn toàn — khoảng cách làm nốt việc phân tách. */
.brain-box-bottom{display:flex;align-items:center;gap:8px;margin-top:16px}
.brain-attach-btn,.brain-send-btn{
  width:28px;height:28px;border-radius:50%;border:1px solid var(--border-strong);background:var(--panel);
  color:var(--text-2);cursor:pointer;display:flex;align-items:center;justify-content:center;flex:0 0 28px;
  transition:background .12s,color .12s;
}
.brain-attach-btn:hover:not(:disabled),.brain-send-btn:hover{background:var(--hover);color:var(--text)}
.brain-attach-btn:disabled{opacity:.45;cursor:not-allowed}
.brain-send-btn{background:var(--cta);border-color:var(--cta);color:#fff}
.brain-send-btn:hover{background:var(--cta-hover);border-color:var(--cta-hover);color:#fff}
/* F3.4 — nút gửi hoá nút Dừng khi đang stream. Đỏ để phân biệt hẳn với "gửi": hai hành
   động ngược nhau mà dùng chung một chỗ bấm thì màu là thứ duy nhất tách chúng ra. */
.brain-send-btn.is-stop,.brain-send-btn.is-stop:hover{background:#b8283f;border-color:#b8283f;color:#fff}
.brain-send-btn.is-stop:disabled{opacity:1;cursor:pointer}
.brain-model-wrap{position:relative;flex:0 0 auto}
.brain-model-pill{
  display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:20px;
  border:1px solid var(--border-strong);background:var(--bg-subtle);color:var(--text-2);font-size:12px;
  font-weight:600;cursor:pointer;white-space:nowrap;flex:0 0 auto;
}
.brain-model-pill:hover{background:var(--hover);color:var(--text)}
.brain-model-pill .bm-caret{opacity:.55;display:inline-flex}
.brain-model-pill .bm-caret svg{width:11px;height:11px}
/* .brain-thinking-pill đã gỡ (2026-08-01) cùng nút Thinking ngoài thanh composer —
   bật/tắt nay nằm trong flyout Tuỳ chọn của bộ chọn model (.bm-fly-row + .bm-switch). */
.brain-model-drop{
  position:absolute;bottom:34px;right:0;width:300px;max-width:80vw;background:var(--panel);
  border:1px solid var(--border-strong);border-radius:10px;box-shadow:var(--shadow-md);z-index:40;
  overflow:hidden;
}
.bm-empty{padding:14px 13px;font-size:12px;color:var(--text-3)}
.bm-item{display:flex;align-items:center;gap:8px;padding:9px 13px;cursor:pointer;border-bottom:1px solid var(--border)}
.bm-item:last-of-type{border-bottom:none}
.bm-item:hover{background:var(--hover)}
.bm-item.active{background:var(--primary-weak)}
.bm-name{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.bm-title{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bm-sub{font-size:11px;color:var(--text-3)}
.bm-check{flex:0 0 auto;color:var(--primary-text);display:inline-flex}
.bm-check svg{width:15px;height:15px}
.bm-manage{
  display:flex;align-items:center;gap:7px;padding:10px 13px;font-size:12px;font-weight:600;
  color:var(--text-2);cursor:pointer;border-top:1px solid var(--border);background:var(--bg-subtle);
}
.bm-manage:hover{color:var(--text);background:var(--hover)}
.bm-manage svg{width:14px;height:14px}
.bm-search{
  display:flex;align-items:center;gap:7px;padding:8px 12px;border-bottom:1px solid var(--border);
  background:var(--bg-subtle);
}
.bm-search input{
  flex:1;border:none;background:transparent;font-size:13px;color:var(--text);outline:none;
  font-family:inherit;
}
.bm-search input::placeholder{color:var(--text-3)}
.bm-search svg{width:14px;height:14px;color:var(--text-3);flex:0 0 auto}
.bm-group{padding:6px 13px 3px;font-size:11px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.5px}
.bm-badge{
  display:inline-flex;align-items:center;padding:1px 6px;border-radius:4px;font-size:11px;
  font-weight:600;background:var(--primary-weak);color:var(--primary-text);flex:0 0 auto;
}
/* Run-mode picker (manual / credit / plan / auto / bypass) — reuses the model pill's
   look; only the dropdown anchors left (it sits at the start of the bottom row). */
.brain-mode-wrap .brain-model-drop{left:0;right:auto;width:340px}
.bmode-dot{width:8px;height:8px;border-radius:50%;background:var(--text-3);flex:0 0 8px}
.brain-mode-wrap .bm-item{align-items:flex-start}
.brain-mode-wrap .bm-item .bmode-dot{margin-top:5px}
.brain-mode-wrap .bm-sub{white-space:normal;line-height:1.35}

/* Secondary mode chips (Tóm tắt / Báo cáo / Rút việc cần làm) below the compose box. */
.brain-sec-modes{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.brain-sec-modes .chip{cursor:pointer;padding:5px 12px;transition:background .12s,border-color .12s}
.brain-sec-modes .chip:hover{background:var(--hover);border-color:var(--border-strong)}

/* Quick-action suggestion cards (Ask mode). */
.brain-quick-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.brain-quick-card{
  display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;
  background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:12px 13px;
  cursor:pointer;font-family:inherit;box-shadow:var(--shadow);transition:box-shadow .12s,border-color .12s,transform .12s;
}
.brain-quick-card:hover{box-shadow:var(--shadow-md);border-color:var(--border-strong);transform:translateY(-1px)}
.brain-quick-card .bq-icon{color:var(--primary-text);width:18px;height:18px}
.brain-quick-card .bq-icon svg{width:18px;height:18px}
.brain-quick-card .bq-title{font-weight:600;font-size:13px;color:var(--text)}
.brain-quick-card .bq-desc{font-size:12px;color:var(--text-2);line-height:1.4}

/* Industry focus pill-tabs (Agents tab). */
.brain-industry-pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:4px}
.brain-pill{
  display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 13px;border-radius:20px;
  border:1px solid var(--border-strong);background:var(--panel);color:var(--text-2);font-size:12px;
  font-weight:600;cursor:pointer;white-space:nowrap;transition:background .12s,border-color .12s,color .12s;
}
.brain-pill:hover{background:var(--hover)}
/* Active = pill đen đặc như ClickUp (hợp nhất từ luật override cũ ở cuối file —
   hai luật cùng selector, luật sau thắng, nên gộp về một chỗ; giao diện không đổi). */
.brain-pill.active{background:#1d1f27;border-color:#1d1f27;color:#fff}

/* Agent template gallery cards. */
.brain-tpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.brain-tpl-card{
  display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--border);border-radius:8px;
  padding:13px 14px;box-shadow:var(--shadow);transition:box-shadow .12s,border-color .12s;
}
.brain-tpl-card:hover{box-shadow:var(--shadow-md);border-color:var(--border-strong)}
.bt-top{display:flex;align-items:flex-start;gap:10px;margin-bottom:8px}
.bt-avatar{font-size:28px;line-height:1;flex:0 0 auto}
.bt-name{font-weight:600;font-size:13.5px;margin-bottom:4px}
.bt-desc{font-size:12px;color:var(--text-2);line-height:1.5;margin-bottom:8px}
.bt-skills-link{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--primary-text);cursor:pointer;margin-bottom:10px}
.bt-skills-link svg{width:12px;height:12px}
.bt-skills-link:hover{text-decoration:underline}
.bt-foot{margin-top:auto;display:flex;justify-content:flex-end}

/* Skill library cards (Kỹ năng tab) — same visual language as agent template cards, but the
   title IS the skill (a concrete, immediately runnable capability), not the agent. */
.brain-skill-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.brain-skill-card{
  display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--border);border-radius:8px;
  padding:13px 14px;box-shadow:var(--shadow);transition:box-shadow .12s,border-color .12s;
}
.brain-skill-card:hover{box-shadow:var(--shadow-md);border-color:var(--border-strong)}
.bs-top{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px}
.bs-avatar{
  font-size:17px;line-height:1;flex:0 0 auto;width:32px;height:32px;border-radius:8px;
  background:var(--bg-subtle);display:flex;align-items:center;justify-content:center;
}
.bs-name{font-weight:600;font-size:13px;line-height:1.4}
.bs-agent{font-size:11px;color:var(--text-3)}
.bs-foot{margin-top:auto;display:flex;justify-content:flex-end}

/* "Agent của bạn" quick-run chips. */
.brain-myagents-row{display:flex;flex-wrap:wrap;gap:8px}
.brain-myagent-chip{
  display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px 0 8px;border-radius:20px;
  border:1px solid var(--border);background:var(--panel);color:var(--text);font-size:13px;font-weight:600;
  cursor:pointer;font-family:inherit;transition:background .12s,border-color .12s;
}
.brain-myagent-chip:hover{background:var(--hover);border-color:var(--border-strong)}
.brain-myagent-chip .bm-avatar{font-size:15px;line-height:1}
@media (max-width:560px){
  .brain-glow-inner{padding:11px 12px 8px}
  .brain-quick-grid{grid-template-columns:1fr}
  /* Màn hẹp: padding 20px hai bên ăn mất 40px của ~360px bề ngang. Bo góc hạ theo
     để tab (bo 12) không lệch thang với panel. Thụt trái cụm tab hạ khớp bán kính. */
  .brain-tabpanel{padding:14px;border-radius:14px}
  .seg.brain-seg{padding-left:14px}
}

/* ═══════════════════════════════════════════════════════════════════
   PIXEL POLISH v2 (đợt 30) — Home/Board/CRM theo ngôn ngữ Clickflow 4.0.
   Khối override cuối file: tinh chỉnh type-scale, spacing 4px-grid,
   hover/focus, scrollbar, card language — không đổi DOM nên an toàn.
   ═══════════════════════════════════════════════════════════════════ */

/* — Scrollbar mảnh (chữ ký Clickflow) — */
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:rgba(0,0,0,.16);border-radius:4px;border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.3);border:2px solid transparent;background-clip:content-box}
[data-theme="dark"] *::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);background-clip:content-box;border:2px solid transparent}

/* — Page header: title 20/700 −0.3, sub 13 muted, khoảng thở 4px-grid — */
.page-title{font-size:20px;font-weight:700;letter-spacing:-.3px;line-height:1.25;margin:2px 0 4px}
.page-sub{font-size:13px;color:var(--text-2);margin:0 0 14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* — Stat cards (Home/CRM/Finance): số to hơn, nhãn nén, lift khi hover — */
.stat{border-radius:10px;padding:14px 16px 13px;transition:box-shadow .14s,border-color .14s,transform .14s}
.stat:hover{transform:translateY(-1px)}
.stat .k{font-size:11px;letter-spacing:.5px;color:var(--text-3)}
.stat .v{font-size:27px;letter-spacing:-.8px;margin-top:5px;line-height:1.1;font-variant-numeric:tabular-nums}

/* — Company cards (Home) — */
.co-card{border-radius:10px;transition:box-shadow .14s,border-color .14s,transform .14s}
.co-card:hover{transform:translateY(-2px)}

/* — List view: hàng 40px, cột đầu thoáng, hover lộ hành động — */
.row{padding:5px 14px;border-bottom:1px solid var(--border)}
.row .t{font-size:13px;font-weight:520}
.row .due{font-size:12px;font-variant-numeric:tabular-nums}
.row .r-assignee .an{font-size:12px}
.list-head{letter-spacing:.5px;color:var(--text-3);border-bottom:1px solid var(--border);background:var(--bg)}
.grp-h{background:var(--bg);border-bottom:1px solid var(--border)}
.grp-h .grp-name{font-size:12px;font-weight:700;letter-spacing:.2px;text-transform:uppercase}
.grp-h .grp-count{font-size:11px;color:var(--text-3);background:var(--bg-subtle);border:1px solid var(--border);
  padding:1px 7px;border-radius:9px;font-variant-numeric:tabular-nums}
.grp-dot{width:8px;height:8px;border-radius:3px}   /* vuông bo nhẹ như status Clickflow */

/* — Kanban: cột nền xám nhạt, header sticky-cảm, card nổi khi hover — */
.kanban{gap:14px}
.kcol{flex:0 0 280px;width:280px;background:var(--bg-subtle);border-radius:10px;padding:6px}
.kcol-h{padding:8px 8px 6px;letter-spacing:.5px}
.kcards{padding:2px 4px 8px;gap:8px}
.kcard{border-radius:9px;padding:11px 12px;transition:box-shadow .13s,border-color .13s,transform .13s;cursor:pointer}
.kcard:hover{transform:translateY(-1px);box-shadow:0 6px 18px -6px rgba(0,0,0,.16),0 2px 5px -2px rgba(0,0,0,.08)}
.kcard-title{font-size:13px;font-weight:560;line-height:1.4}
.kcard-meta{font-size:12px;color:var(--text-3)}

/* — Bảng dữ liệu (CRM/Finance/Users…): header nén, hover hàng, số tabular — */
.tbl th{font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--text-3);
  padding:8px 12px;border-bottom:1px solid var(--border-strong)}
.tbl td{font-size:13px;padding:9px 12px;font-variant-numeric:tabular-nums}
.tbl tbody tr{transition:background .1s}
.tbl tbody tr:hover{background:var(--hover)}
.tbl tfoot td{font-size:12px;background:var(--bg-subtle)}

/* — Nút & input: cao nhất quán, focus ring 2px primary — */
.btn{transition:background .12s,border-color .12s,box-shadow .12s,color .12s}
.btn:focus-visible,.input:focus-visible,.nav-item:focus-visible{outline:2px solid var(--primary-ring);outline-offset:1px}
.input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-ring)}

/* — Badge: pill nén kiểu Clickflow — */
.badge{font-size:11px;font-weight:600;letter-spacing:.4px;padding:2px 8px;border-radius:9px;text-transform:uppercase}

/* — Empty & loading: gọn, đúng tông — */
.empty{padding:44px 16px;color:var(--text-3)}
.empty .et{font-size:13.5px;font-weight:600;color:var(--text-2);margin-top:10px}
.empty svg{width:36px;height:36px;opacity:.4}
.loading{padding:28px;color:var(--text-3);font-size:12px}
.spinner{width:18px;height:18px;border-width:2px}

/* — Modal: bo 12, header rõ, backdrop mờ hơn — */
.overlay{background:rgba(16,20,28,.42);backdrop-filter:blur(2px)}
.modal{border-radius:12px;box-shadow:0 24px 64px -16px rgba(0,0,0,.32),0 4px 16px -6px rgba(0,0,0,.14)}
.modal-h .mt{font-size:14.5px;font-weight:700;letter-spacing:-.2px}

/* — Segmented control: nền chìm, nút active trắng nổi (Clickflow view switcher) — */
.seg{background:var(--bg-subtle);border:1px solid var(--border);border-radius:8px;padding:2px;gap:2px}
.seg button{border-radius:6px;font-size:12px;font-weight:600;padding:5px 12px;color:var(--text-2)}
.seg button.active{background:var(--panel);color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,.08);border:1px solid var(--border)}

/* — CRM pipeline dùng chung kanban class → tự hưởng polish; deal amount nổi — */
.kcard .kc-amount,.kcard b{font-variant-numeric:tabular-nums}

/* — Sidebar nav: item 30px, active đậm hơn (đúng Clickflow rail) — */
.nav-item{border-radius:7px;font-size:12px;padding:6px 10px}
.nav-sec{font-size:11px;letter-spacing:.7px}

/* — Team View (CU4-041) — */
.team-list{display:flex;flex-direction:column;gap:8px}
.team-row{display:grid;grid-template-columns:220px 160px 1fr;gap:14px;align-items:center;
  background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:11px 14px}
.team-row:hover{border-color:var(--border-strong);box-shadow:var(--shadow-md)}
.team-who{display:flex;align-items:center;gap:9px;min-width:0}
.team-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.team-sub{font-size:11px;color:var(--text-3)}
.team-load{display:flex;align-items:center;gap:8px}
.team-load-bar{flex:1;height:8px;border-radius:4px;background:var(--bg-subtle);overflow:hidden}
.team-load-fill{height:100%;background:var(--primary);border-radius:4px}
.team-load-fill.has-overdue{background:var(--st-blocked)}
.team-load-n{font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;min-width:18px;text-align:right}
.team-load-n.has-overdue{color:var(--st-blocked)}
.team-overdue-n{color:var(--st-blocked);font-weight:600}
/* "Chưa giao" / "AI phụ trách" không phải nhân sự — nền chìm để không đọc nhầm là thành viên */
.team-row-none,.team-row-ai{background:var(--bg-subtle)}
.team-row-none .team-name{color:var(--text-3)}
.team-chips{display:flex;gap:6px;flex-wrap:wrap;min-width:0}
.team-chip{display:inline-flex;align-items:center;gap:5px;max-width:210px;padding:3px 9px;border-radius:12px;
  border:1px solid var(--border);background:var(--bg-subtle);font-size:12px;cursor:pointer}
.team-chip:hover{border-color:var(--border-strong);background:var(--hover)}
.team-chip.overdue{border-color:var(--st-blocked);color:var(--st-blocked)}
.team-chip .tc-t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.team-more{font-size:11px;color:var(--text-3);align-self:center}
@media (max-width:880px){.team-row{grid-template-columns:1fr;gap:8px}}

/* — Goals chi tiết (đợt 32) — */
.goal-card .okr-h{gap:10px;align-items:center}
.kr-type{font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--text-3);
  background:var(--bg-subtle);border:1px solid var(--border);border-radius:8px;padding:1px 6px;margin-left:7px}
.kr-actions{display:inline-flex;gap:4px;opacity:0;transition:opacity .12s}
.kr:hover .kr-actions{opacity:1}
.badge-danger{background:#fdecec;color:#b8283f}
[data-theme="dark"] .badge-danger{background:rgba(226,68,92,.18);color:#ff6b7f}

/* — Stat card v2 (đợt 33): icon tile màu theo ngữ nghĩa, layout ngang Clickflow — */
.stat{display:flex;align-items:center;gap:12px}
.stat-ic{flex:0 0 34px;width:34px;height:34px;border-radius:9px;display:inline-flex;align-items:center;
  justify-content:center;background:var(--bg-subtle);color:var(--text-2);border:1px solid var(--border)}
.stat-ic svg{width:17px;height:17px}
.stat-ic.good{background:#e7f6ee;color:var(--st-done);border-color:#cdeeda}
.stat-ic.bad{background:#fdecee;color:var(--st-blocked);border-color:#f8d3d9}
.stat-ic.warn{background:#fff4e0;color:#b06000;border-color:#f8e3bd}
.stat-ic.ai{background:#f1edff;color:var(--st-verified);border-color:#e2daf9}
[data-theme="dark"] .stat-ic{background:var(--bg-subtle);border-color:var(--border)}
[data-theme="dark"] .stat-ic.good{background:rgba(0,136,68,.16);border-color:rgba(0,136,68,.3)}
[data-theme="dark"] .stat-ic.bad{background:rgba(226,68,92,.14);border-color:rgba(226,68,92,.3)}
[data-theme="dark"] .stat-ic.warn{background:rgba(248,174,0,.12);border-color:rgba(248,174,0,.28)}
[data-theme="dark"] .stat-ic.ai{background:rgba(123,104,238,.14);border-color:rgba(123,104,238,.3)}
.stat-tx{min-width:0}
.stat-tx .v{margin-top:2px}

/* — CRM deal card v2 (đợt 33): panel click-mở, select giai đoạn chỉ hiện khi hover — */
.deal-card{cursor:pointer}
.deal-amount{font-size:13.5px;font-weight:700;color:var(--primary-text);margin:3px 0 2px;font-variant-numeric:tabular-nums}
.deal-contact{font-size:12px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.deal-ref{margin-left:auto;font-size:9.5px;flex:0 0 auto;max-width:55%;overflow:hidden;text-overflow:ellipsis}
.deal-prob{display:flex;align-items:center;gap:7px;margin-top:7px}
.deal-prob-bar{flex:1;height:4px;border-radius:3px;background:var(--bg-subtle);overflow:hidden;border:1px solid var(--border)}
.deal-prob-bar>span{display:block;height:100%;border-radius:3px}
.deal-prob-n{font-size:11px;font-weight:600;color:var(--text-3);font-variant-numeric:tabular-nums}
.deal-foot{display:flex;align-items:center;gap:7px;margin-top:8px;padding-top:8px;border-top:1px solid var(--border)}
.deal-foot .avatar{width:20px;height:20px;font-size:9px;flex:0 0 20px}
.deal-foot .due{font-size:11px}
.deal-foot-spacer{flex:1}
.deal-stage-sel{width:auto;max-width:112px;height:24px;font-size:11px;padding:0 4px;opacity:0;transition:opacity .12s}
.deal-card:hover .deal-stage-sel{opacity:1}

/* — Báo cáo công việc AI (đợt 33): AI làm → tự check → người duyệt lại — */
.aiw-sum{display:flex;gap:8px;margin:2px 0 8px;flex-wrap:wrap}
.aiw-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--border);
  border-radius:9px;margin-bottom:7px;background:var(--panel);transition:border-color .12s,box-shadow .12s}
.aiw-row:hover{border-color:var(--border-strong);box-shadow:var(--shadow)}
.aiw-av{width:26px;height:26px;font-size:11px;flex:0 0 26px;background:#7c3aed}
.aiw-main{flex:1;min-width:0}
.aiw-title{display:block;max-width:100%;background:none;border:none;padding:0;cursor:pointer;
  font-size:13px;font-weight:600;color:var(--text);text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aiw-title:hover{color:var(--primary-text)}
.aiw-meta{display:flex;align-items:center;gap:7px;margin-top:2px;min-width:0}
.aiw-meta .muted{font-size:11px;flex:0 0 auto}
.aiw-prev{font-size:11px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.aiw-cells{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.aiw-cell{display:inline-flex;flex-direction:column;align-items:center;gap:2px}
.aiw-cl{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;color:var(--text-3)}
@media (max-width:760px){
  .aiw-row{flex-wrap:wrap}
  .aiw-cells{width:100%;justify-content:flex-end}
}

/* — Home widgets (Tiện ích của tôi) polish (đợt 33) — */
.hw-card{border-radius:10px;transition:box-shadow .13s,border-color .13s}
.hw-card:hover{border-color:var(--border-strong);box-shadow:var(--shadow-md)}
.hw-card .hw-h svg{width:15px;height:15px;color:var(--text-2)}
.hw-line:hover{background:var(--hover);border-radius:6px}
.hw-line:last-child{border-bottom:none!important}
.badge svg{width:11px;height:11px}

/* — Gantt dependency arrows (CU4-038, đợt 33d) — */
.tl-arrow{fill:none;stroke:var(--text-3);stroke-width:1.6;opacity:.75}
.tl-arrow.blocks{stroke:var(--st-blocked)}
.tl-bar,.tl-point{position:relative;z-index:2}

/* ── Đợt 38: menu hồ sơ Clickflow-style ── */
.profile-menu-overlay{position:fixed;inset:0;z-index:960;background:transparent}
.profile-menu{position:fixed;width:320px;max-height:78vh;overflow:auto;background:var(--bg-card,#fff);border:1px solid var(--border);border-radius:12px;box-shadow:0 18px 50px rgba(15,23,42,.22);padding:8px;z-index:961}
[data-theme="dark"] .profile-menu{background:#101827;box-shadow:0 18px 50px rgba(0,0,0,.55)}
.pm-head{display:flex;gap:10px;align-items:center;padding:8px 10px 10px;border-bottom:1px solid var(--border);margin-bottom:6px}
.pm-head .u-name{font-weight:600;font-size:13.5px}
.pm-head .u-role{font-size:12px}
.pm-item{display:flex;gap:9px;align-items:center;padding:7px 10px;border-radius:8px;cursor:pointer;font-size:13px}
.pm-item:hover{background:var(--bg-subtle,#f2f4f9)}
[data-theme="dark"] .pm-item:hover{background:#1b2740}
.pm-ic{width:18px;display:inline-flex;justify-content:center}
.pm-ic svg{width:15px;height:15px}
.pm-right{margin-left:auto;font-size:11px;color:var(--text-3);border:1px solid var(--border);border-radius:5px;padding:0 5px}
.pm-danger{color:#dc2626}
.pm-sec{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);padding:8px 10px 3px}
.pm-div{height:1px;background:var(--border);margin:6px 4px}
.pm-status{display:flex;gap:6px;align-items:center;padding:4px 8px 8px}
.pm-mute{display:flex;gap:5px;flex-wrap:wrap;padding:2px 8px 8px}
.presence-dot{position:absolute;right:-2px;bottom:-2px;width:9px;height:9px;border-radius:50%;border:2px solid var(--bg-card,#fff)}
.side-user:hover{background:var(--bg-subtle,rgba(255,255,255,.06))}

/* ── Đợt 38: login SSO ── */
.login-sso{margin-top:14px}
.login-divider{display:flex;align-items:center;gap:10px;color:var(--text-3);font-size:11px;margin:12px 0 10px}
.login-divider:before,.login-divider:after{content:"";flex:1;height:1px;background:var(--border)}
.sso-row{display:flex;gap:8px}
.sso-btn{flex:1;display:inline-flex;gap:7px;align-items:center;justify-content:center;height:36px;font-size:12px}

/* ── Đợt 38: badge nguồn việc (Nguồn: người/AI/agent ngoài/import/form) ── */
.src-badge{font-size:9.5px;padding:1px 6px;border-radius:5px;font-weight:600;white-space:nowrap}

/* ── Đợt 41: Brain Chat v2 kiểu Claude ── */
.brain-chat-wrap{display:flex;gap:14px;margin-top:12px;align-items:stretch;min-height:420px}
/* align-self:flex-start = cột phiên cao theo NỘI DUNG (danh sách ngắn thì cột
   ngắn), không kéo giãn theo chiều cao khung chat như align-items:stretch cũ. */
.brain-sess-col{flex:0 0 218px;max-width:218px;border:1px solid var(--border);border-radius:12px;background:var(--bg-card,#fff);padding:8px;overflow-y:auto;max-height:66vh;align-self:flex-start}
[data-theme="dark"] .brain-sess-col{background:#101827}
.brain-sess-item{position:relative;padding:7px 26px 7px 9px;border-radius:8px;cursor:pointer;margin-bottom:2px}
.brain-sess-item:hover{background:var(--bg-subtle,#f2f4f9)}
[data-theme="dark"] .brain-sess-item:hover{background:#1b2740}
.brain-sess-item.active{background:rgba(43,84,230,.09);border:1px solid rgba(43,84,230,.25)}
.brain-sess-item .bs-title{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brain-sess-item .bs-sub{font-size:11px;color:var(--text-3)}
.brain-sess-item .bs-del{position:absolute;right:4px;top:8px;opacity:0;width:18px;height:18px}
.brain-sess-item:hover .bs-del{opacity:.7}
.brain-chat-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px}
.brain-transcript{flex:1;min-height:300px;max-height:56vh;overflow-y:auto;border:1px solid var(--border);border-radius:12px;background:var(--bg-card,#fff);padding:16px 18px}
[data-theme="dark"] .brain-transcript{background:#0d1420}
.chat-b{display:flex;gap:10px;margin-bottom:14px}
.chat-user{flex-direction:row-reverse}
.chat-avatar{flex:0 0 30px;width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,rgba(37,99,235,.14),rgba(124,58,237,.14));display:flex;align-items:center;justify-content:center;font-size:15px}
.chat-body{max-width:76%;min-width:0}
.chat-user .chat-body{margin-left:auto}
.chat-content{white-space:pre-wrap;font-size:13.5px;line-height:1.55;border-radius:12px;padding:9px 13px;background:var(--bg-subtle,#f4f6fb);border:1px solid var(--border)}
.chat-user .chat-content{background:var(--primary,#2b54e6);color:#fff;border-color:transparent;border-bottom-right-radius:4px}
.chat-ai .chat-content{border-bottom-left-radius:4px}
[data-theme="dark"] .chat-content{background:#16203a}
[data-theme="dark"] .chat-user .chat-content{background:var(--primary,#2b54e6)}
.chat-meta{font-size:11px;color:var(--text-3);margin-top:3px;padding:0 4px}
.chat-user .chat-meta{text-align:right}
.chat-typing{color:var(--text-3);font-style:italic;animation:chatpulse 1.4s infinite}
@keyframes chatpulse{50%{opacity:.45}}
.chat-tasks{margin-top:8px;border:1px solid rgba(124,58,237,.35);border-radius:10px;padding:10px 12px;background:rgba(124,58,237,.05)}
.chat-tasks .ct-head{font-weight:700;font-size:12px;margin-bottom:7px}
.chat-tasks .ct-row{display:flex;gap:7px;align-items:center;padding:3px 0;flex-wrap:wrap}
.chat-tasks .ct-sub{font-size:12px;color:var(--text-3);padding-left:26px}
/* F2 — thẻ kết quả công cụ ("AI vừa làm gì"), đứng trên bóng chat trả lời. Viền xám
   trung tính để không tranh chú ý với .chat-tasks (tím = đề xuất việc cần bấm). */
.chat-tools{margin-bottom:7px;border:1px solid var(--border);border-radius:10px;padding:8px 11px;background:var(--bg-subtle)}
.chat-tools .ct-head{font-weight:700;font-size:12px;margin-bottom:5px}
/* display:block là cách duy nhất bỏ hẳn marker mặc định trên cả Chromium lẫn Safari —
   list-style:none một mình vẫn để lọt dấu chấm ở Chromium mới. */
.chat-tools .ct-fold>summary{cursor:pointer;display:block;list-style:none;margin-bottom:5px}
.chat-tools .ct-fold>summary::-webkit-details-marker{display:none}
.chat-tools .ct-fold>summary::marker{content:""}
.chat-tools .ct-fold>summary::before{content:"▸ ";font-size:11px;color:var(--text-3);vertical-align:1px}
.chat-tools .ct-fold[open]>summary::before{content:"▾ "}
.chat-tools .ct-item{padding:4px 0;border-top:1px solid var(--border)}
.chat-tools .ct-item:first-child{border-top:0;padding-top:0}
.chat-tools .ct-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.chat-tools .ct-ic{font-size:12px;line-height:1}
.chat-tools .ct-name{font-size:12px;font-weight:600}
.chat-tools .ct-sum{font-size:12px;color:var(--text-3);padding-left:19px;margin-top:2px;overflow-wrap:anywhere}
.chat-tools .ct-reason{color:#b8283f}
[data-theme="dark"] .chat-tools .ct-reason{color:#ff6b7f}
.chat-tools .ct-open{margin-left:auto;font-size:12px;font-weight:600;background:none;border:0;padding:0;
  color:var(--primary-text);cursor:pointer;text-decoration:underline;white-space:nowrap}
/* C3 — @-mention: chip nguồn trong bóng chat + dropdown/chip trong khung soạn */
.chat-refs{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin-top:6px}
.chat-refs .cr-lead{font-size:11px;color:var(--text-3);font-weight:600}
.chat-ref{max-width:230px;text-transform:none;letter-spacing:0;gap:4px}
.chat-ref .brc-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-ref.is-link{cursor:pointer}
.chat-ref.is-link:hover{background:var(--primary-weak);color:var(--primary-text)}
.brain-ref-chips{display:flex;flex-wrap:wrap;gap:6px;padding:0 12px 8px}
.brain-ref-chip{max-width:240px;text-transform:none;letter-spacing:0;gap:5px;align-items:center}
.brain-ref-chip .brc-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Mở LÊN trên (bottom:100%) chứ không xuống dưới: khung soạn nằm sát đáy vùng chat,
   dropdown đi xuống sẽ chạy ra ngoài khung nhìn ngay khi có 3-4 kết quả. */
.brain-mention-drop{position:absolute;left:12px;right:12px;bottom:100%;margin-bottom:6px;z-index:45;
  max-height:260px;overflow:auto;border:1px solid var(--border-strong);border-radius:10px;
  background:var(--panel);box-shadow:0 8px 24px rgba(0,0,0,.14)}
.brain-mention-drop .bm-item{display:flex;align-items:center;gap:8px;padding:7px 11px;cursor:pointer;font-size:13px}
.brain-mention-drop .bm-item:hover,.brain-mention-drop .bm-item.active{background:var(--primary-weak)}
.brain-mention-drop .bm-empty{padding:10px 12px;font-size:12px;color:var(--text-3)}
.brain-scope-sel{height:26px;border-radius:20px;border:1px solid var(--border-strong);
  background:var(--bg-subtle);color:var(--text-2);font-size:12px;font-weight:600;
  padding:0 8px;cursor:pointer;max-width:130px;flex:0 0 auto}
.brain-empty{text-align:center;padding:26px 8px}
.brain-empty-title{font-weight:800;font-size:17px;margin-bottom:14px;letter-spacing:-.3px}
.brain-empty .brain-quick-grid{text-align:left}
@media(max-width:880px){.brain-chat-wrap{flex-direction:column}.brain-sess-col{flex:none;max-width:none;max-height:150px}}

/* Fix C2: password strength meter + Fix D1: typing indicator */
.pw-weak{color:#e4483d}.pw-med{color:#f59e0b}.pw-strong{color:#22c55e}
.typing-dots span{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--text-3);animation:blink 1.4s infinite both;margin:0 2px}
.typing-dots span:nth-child(2){animation-delay:.2s}
.typing-dots span:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.2}40%{opacity:1}}

/* ===== INPUT COMPONENTS (Phase 1-3) ===== */

/* 1. Input with icon — wrapper chứa input + SVG icon prefix/suffix */
.input-wrap{position:relative;display:flex;align-items:center;flex:1}
.input-wrap .input-ic-left{position:absolute;left:10px;color:var(--text-3,#8c8c8c);pointer-events:none;display:flex;align-items:center;z-index:1}
.input-wrap .input-ic-right{position:absolute;right:10px;color:var(--text-3,#8c8c8c);pointer-events:none;display:flex;align-items:center;z-index:1}
.input-wrap .input-ic-left+input,.input-wrap .input.has-ic-left{padding-left:34px}
.input-wrap .input.has-ic-right,.input-wrap .input-ic-right~input{padding-right:34px}
.input-wrap .input-ic-left svg,.input-wrap .input-ic-right svg{width:16px;height:16px}
.input-wrap.input-wrap-clear .input{padding-right:30px}

/* 2. Clear button — nút × trong input */
.input-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);cursor:pointer;
  color:var(--text-3,#8c8c8c);background:none;border:none;font-size:16px;line-height:1;
  display:none;z-index:1;padding:2px;border-radius:4px}
.input-clear:hover{color:var(--text,#333);background:var(--hover,#f0f0f5)}
.input-wrap.has-value .input-clear{display:block}

/* 3. Char count — counter dưới textarea */
.input-counter{font-size:11px;color:var(--text-3,#8c8c8c);text-align:right;margin-top:4px;transition:color .15s}
.input-counter.over{color:var(--st-blocked,#e4483d);font-weight:600}
.input-counter.warn{color:#f59e0b}

/* 4. Validation states — border + message */
.input-error{border-color:var(--st-blocked,#e4483d)!important;box-shadow:0 0 0 3px rgba(228,72,61,.12)!important}
.input-ok{border-color:var(--st-done,#22c55e)!important;box-shadow:0 0 0 3px rgba(34,197,94,.12)!important}
.field-msg{font-size:12px;margin-top:4px;display:none;line-height:1.4}
.field-msg.err{color:var(--st-blocked,#e4483d);display:block}
.field-msg.ok{color:var(--st-done,#22c55e);display:block}

/* 5. Floating label — label nổi lên khi focus/có value */
.field-floating{position:relative;margin-bottom:14px}
.field-floating label{position:absolute;left:10px;top:50%;transform:translateY(-50%);
  font-size:13px;color:var(--text-3,#8c8c8c);pointer-events:none;transition:.15s ease;
  background:var(--panel,#fff);padding:0 4px;z-index:1}
.field-floating textarea+label{top:12px;transform:none}
.field-floating input:focus+label,.field-floating input:not(:placeholder-shown)+label,
.field-floating textarea:focus+label,.field-floating textarea:not(:placeholder-shown)+label{
  top:0;font-size:11px;color:var(--primary,#2b54e6);font-weight:600}
.field-floating .input{padding-top:2px}

/* 6. Checkbox card — card clickable chứa checkbox + label + desc */
.chk-card{display:flex;align-items:flex-start;gap:10px;padding:12px;border:1px solid var(--border,#e6e9f0);
  border-radius:var(--radius,8px);cursor:pointer;transition:.12s;background:var(--panel,#fff)}
.chk-card:hover{border-color:var(--primary,#2b54e6);background:var(--primary-weak,rgba(43,84,230,.06))}
.chk-card.checked{border-color:var(--primary,#2b54e6);background:var(--primary-weak,rgba(43,84,230,.06))}
.chk-card .chk-card-ic{flex:0 0 20px;margin-top:1px}
.chk-card .chk-card-body{flex:1;min-width:0}
.chk-card-title{font-weight:600;font-size:13px;color:var(--text,#1a1a2e)}
.chk-card-desc{font-size:12px;color:var(--text-3,#8c8c8c);margin-top:2px;line-height:1.4}

/* 7. Select with search — custom dropdown với hiệu ứng */
.select-search{position:relative;display:block;width:100%}
.select-search-input{width:100%;height:36px;padding:0 30px 0 11px;border:1px solid var(--border-strong,#d5d5d8);
  border-radius:var(--radius,8px);font-size:13px;background:var(--panel,#fff);color:var(--text,#1a1a2e);
  cursor:pointer;display:flex;align-items:center;gap:6px;overflow:hidden;white-space:nowrap;transition:border-color .15s,box-shadow .15s}
.select-search-input:hover{border-color:var(--primary,#2b54e6)}
.select-search.open .select-search-input{border-color:var(--primary,#2b54e6);box-shadow:0 0 0 3px rgba(43,84,230,.1)}
.select-search-input .ss-arrow{position:absolute;right:10px;color:var(--text-3,#8c8c8c);pointer-events:none;transition:transform .2s cubic-bezier(.4,0,.2,1)}
.select-search.open .ss-arrow{transform:rotate(180deg)}
.select-search-input .ss-placeholder{color:var(--text-3,#8c8c8c)}
.select-search-input .ss-tags{display:flex;gap:4px;flex-wrap:wrap;overflow:hidden}
.select-search-input .ss-tag{background:var(--primary-weak,rgba(43,84,230,.08));color:var(--primary,#2b54e6);
  padding:2px 8px;border-radius:4px;font-size:12px;font-weight:500}

/* Dropdown — animation scale + fade */
.select-search-drop{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:60;
  background:var(--panel,#fff);border:1px solid var(--border,#e6e9f0);border-radius:var(--radius,8px);
  box-shadow:0 8px 32px rgba(0,0,0,.12),0 1px 4px rgba(0,0,0,.04);max-height:280px;overflow:auto;
  display:block;padding:6px;opacity:0;transform:translateY(-4px) scale(.97);pointer-events:none;
  transition:opacity .18s ease,transform .18s cubic-bezier(.34,1.56,.64,1)}
.select-search.open .select-search-drop{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}

/* Filter input thanh lịch */
.select-search-filter{padding:6px 6px 8px;border-bottom:1px solid var(--border,#e6e9f0);position:sticky;
  top:0;background:var(--panel,#fff);z-index:1}
.select-search-filter input{width:100%;height:32px;padding:0 10px 0 30px;border:1px solid var(--border,#e6e9f0);
  border-radius:8px;font-size:12px;background:var(--bg,#f5f7fb);transition:border-color .15s,box-shadow .15s}
.select-search-filter input:focus{border-color:var(--primary,#2b54e6);box-shadow:0 0 0 2px rgba(43,84,230,.08);outline:none}
.select-search-filter::before{content:"";position:absolute;left:14px;top:15px;width:14px;height:14px;
  background:var(--text-3,#8c8c8c);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") center/contain no-repeat;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") center/contain no-repeat;
  mask-size:contain;-webkit-mask-size:contain;pointer-events:none;z-index:2}

/* Option item — sang trọng, có left accent */
.select-search-opt{padding:9px 12px;cursor:pointer;font-size:13px;display:flex;align-items:center;gap:10px;
  border-radius:6px;transition:background .1s,padding-left .12s;margin-bottom:2px;position:relative;
  border-left:3px solid transparent;line-height:1.35}
.select-search-opt:last-child{margin-bottom:0}
.select-search-opt:hover{background:var(--primary-weak,rgba(43,84,230,.06));border-left-color:var(--primary,#2b54e6);padding-left:15px}
.select-search-opt:active{background:var(--primary-weak,rgba(43,84,230,.12))}
.select-search-opt.selected{font-weight:550;color:var(--primary,#2b54e6);background:rgba(43,84,230,.05);border-left-color:var(--primary,#2b54e6)}
.select-search-opt .ss-check{flex:0 0 18px;width:18px;height:18px;margin-left:auto;border-radius:50%;
  background:var(--border,#e6e9f0);color:#fff;display:flex;align-items:center;justify-content:center;
  transition:all .15s;font-size:11px;line-height:1;opacity:0;transform:scale(.7)}
.select-search-opt.selected .ss-check{opacity:1;transform:scale(1);background:var(--primary,#2b54e6)}

/* Empty state */
.select-search-empty{padding:20px 16px;text-align:center;color:var(--text-3,#8c8c8c);font-size:12px;
  display:flex;flex-direction:column;gap:6px;align-items:center}
.select-search-empty::before{content:"";width:32px;height:32px;opacity:.35;
  background:var(--text-3,#8c8c8c);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") center/contain no-repeat;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") center/contain no-repeat;
  mask-size:contain;-webkit-mask-size:contain}

/* Custom scrollbar cho dropdown */
.select-search-drop::-webkit-scrollbar{width:5px}
.select-search-drop::-webkit-scrollbar-track{background:transparent}
.select-search-drop::-webkit-scrollbar-thumb{background:var(--border,#e6e9f0);border-radius:4px}
.select-search-drop::-webkit-scrollbar-thumb:hover{background:var(--text-3,#8c8c8c)}

/* Floating label cho select-with-search */
.field-floating .select-search-input{padding-top:10px;height:40px}
.field-floating .select-search.filled ~ label,
.field-floating .select-search.open ~ label{top:0;font-size:11px;color:var(--primary,#2b54e6);font-weight:600}

/* 8. Toggle switch variants — sm/lg cho mọi settings */
.toggle-sm{width:32px;height:18px}
.toggle-sm .toggle-knob{width:14px;height:14px}
.toggle-sm.on .toggle-knob{transform:translateX(14px)}
.toggle-lg{width:48px;height:28px}
.toggle-lg .toggle-knob{width:24px;height:24px}
.toggle-lg.on .toggle-knob{transform:translateX(20px)}
.toggle-row{display:flex;align-items:center;gap:10px}
.toggle-label{font-size:13px;color:var(--text,#1a1a2e);font-weight:500}

/* =====================================================================
   SGH-WAVE-uiux — Social Growth state additions (spec 15)
   Skeleton state + inline bulk bar. Same tokens as the rest of the app —
   no new visual language, only missing STATE affordances.
   ===================================================================== */
/* Skeleton (spec 15 "Skeleton"): các khối xám shimmer theo hình dạng nội dung */
.skel{position:relative;overflow:hidden;background:var(--hover);border-radius:5px}
.skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  animation:skel-shimmer 1.2s infinite}
[data-theme="dark"] .skel::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent)}
@keyframes skel-shimmer{100%{transform:translateX(100%)}}
.skel-line{height:13px;margin:5px 0}
.skel-line.sm{height:10px}
.skel-card{padding:12px 14px;margin-bottom:10px}
/* Bulk bar hiển thị trong luồng nội dung (tự dọn khi màn hình re-render) —
   cùng look .bulk-bar nổi của Bảng công việc */
.bulk-bar-inline{position:static;left:auto;bottom:auto;transform:none;
  margin:0 0 12px;z-index:auto;box-shadow:var(--shadow)}
/* SGH-18 (wave/secobs splice): kv-row metric lines in the deep-health console */
.kv-row{display:flex;justify-content:space-between;gap:12px;padding:2px 0}
.kv-row>span:last-child{font-variant-numeric:tabular-nums;text-align:right}

/* ===== Bộ não AI — reskin kiểu ClickUp Brain (hero + aurora + tab pill + tooltip model) ===== */
/* Hero (phiên trống): logo hoa + wordmark giữa trang, aurora mờ phía trên, composer và
   gợi ý gom về giữa. Có tin nhắn đầu tiên là .brain-hero rơi ra, layout chat cũ giữ nguyên. */
.brain-chat-main.brain-hero{position:relative}
.brain-chat-main.brain-hero::before{
  content:"";position:absolute;left:-16px;right:-16px;top:-20px;height:300px;
  pointer-events:none;z-index:0;
  /* Không filter:blur — radial-gradient đã tự mềm; thêm blur chỉ tốn một lượt raster. */
  background:
    radial-gradient(420px 190px at 18% 0%,rgba(255,110,196,.15),transparent 70%),
    radial-gradient(560px 220px at 52% -12%,rgba(120,115,245,.16),transparent 72%),
    radial-gradient(420px 190px at 86% 0%,rgba(74,222,222,.14),transparent 70%);
}
.brain-hero .brain-transcript{flex:0 0 auto;max-height:none;overflow:visible;position:relative;z-index:1}
.brain-hero .brain-empty{padding:44px 8px 20px}
.brain-hero .brain-compose-wrap,.brain-hero .brain-suggest-wrap{
  max-width:820px;width:100%;margin-left:auto;margin-right:auto;position:relative;z-index:1;
}
/* Selector trên (0,2,0) thắng .brain-compose-wrap{z-index:3} (0,1,0), kéo composer
   xuống dưới seg ở màn hero → chữ tab xuyên qua flyout model. Trả lại z:3 đúng specificity. */
.brain-hero .brain-compose-wrap{z-index:3}
.brain-hero-brand{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:8px}
.brain-hero-logo{display:inline-flex}
.brain-hero-brand .bh-word{font-size:34px;font-weight:800;letter-spacing:-.8px;color:var(--text)}
.brain-hero-sub{font-size:13.5px;color:var(--text-3);max-width:520px;margin:0 auto}
.brain-suggest-wrap{margin-top:12px}

/* Tab cụm Bộ não AI: xem block .seg.brain-seg duy nhất ở phần "Bộ não AI — unified hub". */

/* Glow composer: box-shadow đã gộp về block .brain-glow gốc (2026-07-31) — override
   rời ở đây từng đè mất quầng sáng khai báo trên, sửa một chỗ mà không ăn thua. */

/* Flyout Tuỳ chọn/Effort của bộ chọn model (kiểu VS Code) — đứng TRÁI dropdown vì
   dropdown neo mép phải composer, bên phải không còn chỗ. Tương tác được (toggle
   Thinking, chọn Effort) nên KHÔNG pointer-events:none như tooltip cũ. */
.bm-fly{
  position:absolute;right:308px;bottom:34px;width:225px;background:var(--panel);
  border:1px solid var(--border-strong);border-radius:10px;box-shadow:var(--shadow-md);
  z-index:41;overflow:hidden;padding-bottom:4px;
}
.bm-fly .bm-fly-head{padding:9px 13px 5px;border-bottom:1px solid var(--border)}
.bm-fly .bm-fly-name{font-weight:700;font-size:13px;color:var(--text)}
.bm-fly .bm-fly-sub{font-size:11px;color:var(--text-3)}
.bm-fly .bm-fly-group{
  padding:7px 13px 3px;font-size:10.5px;font-weight:700;color:var(--text-3);
  text-transform:uppercase;letter-spacing:.5px
}
.bm-fly .bm-fly-row{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:6px 13px;font-size:13px;color:var(--text);cursor:pointer
}
.bm-fly .bm-fly-row:hover{background:var(--hover)}
.bm-fly .bm-fly-row.disabled{opacity:.45;cursor:not-allowed}
.bm-fly .bm-fly-row.disabled:hover{background:transparent}
.bm-fly .bm-fly-sep{height:1px;background:var(--border);margin:4px 0}
.bm-switch{
  width:30px;height:17px;border-radius:9px;background:var(--border-strong);
  position:relative;flex:0 0 auto;transition:background .12s
}
.bm-switch::after{
  content:"";position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;
  background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:left .12s
}
.bm-switch.on{background:var(--primary)}
.bm-switch.on::after{left:15px}
/* Danh sách model cuộn riêng giữa search và footer. */
.bm-list{max-height:min(48vh,340px);overflow-y:auto}
/* Đuôi effort mờ trên từng item ("Med", "High"). */
.bm-effort{font-size:11px;color:var(--text-3);flex:0 0 auto}

/* Card gợi ý dưới hero — bo 10, hover nổi nhẹ (đã có transform ở .brain-quick-card). */
.brain-quick-card{border-radius:10px}

/* ── Điều hướng bàn phím dropdown (model/mode/+): item đang chọn bằng phím tên nổi
   viền, tách biệt với .active (giá trị đang chọn thật sự) — hai trạng thái khác nghĩa. */
.bm-item.kbd-active,.bc-item.kbd-active{background:var(--hover);outline:2px solid var(--primary);outline-offset:-2px}

/* Menu lệnh nhanh "/" — dùng chung khung .brain-mention-drop, chỉ khác nội dung item. */
.brain-slash-drop .bm-item{display:flex;align-items:center;gap:8px;padding:7px 11px;cursor:pointer}

/* "Tự động (Max)" — ghim đầu bộ chọn model, viền gradient nhạt tách biệt khỏi
   danh sách model thường bên dưới (giống pill "Max" của ClickUp Brain²). */
.bm-item.bm-item-auto{
  border-bottom:1px solid var(--border);
  background:linear-gradient(90deg,rgba(255,110,196,.06),rgba(120,115,245,.06));
}
.bm-item.bm-item-auto:hover{background:linear-gradient(90deg,rgba(255,110,196,.12),rgba(120,115,245,.12))}
.bm-item.bm-item-auto.active{background:var(--primary-weak)}

/* ── A1/A2/A6 — menu ngữ cảnh của composer Bộ não ─────────────────────────────
   Dùng lại token màu/viền/bóng của .brain-model-drop thay vì tự đặt số: hai
   dropdown đứng cạnh nhau trên cùng một hàng, lệch một pixel là thấy ngay. */
.brain-ctx-wrap{position:relative;display:inline-flex}
.brain-ctx-menu{
  position:absolute;bottom:34px;left:0;width:290px;max-width:84vw;background:var(--panel);
  border:1px solid var(--border-strong);border-radius:10px;box-shadow:var(--shadow-md);z-index:40;
  overflow:hidden auto;max-height:min(60vh,420px);
}
.brain-ctx-menu .bc-head{
  padding:9px 13px 5px;font-size:11px;font-weight:700;letter-spacing:.03em;
  text-transform:uppercase;color:var(--text-3)
}
.brain-ctx-menu .bc-sep{height:1px;background:var(--border);margin:4px 0}
.brain-ctx-menu .bc-item{display:flex;align-items:center;gap:9px;padding:8px 13px;cursor:pointer}
.brain-ctx-menu .bc-item:hover{background:var(--hover)}
.brain-ctx-menu .bc-ico{display:inline-flex;width:16px;color:var(--text-3);flex:0 0 auto}
.brain-ctx-menu .bc-ico svg{width:15px;height:15px}
.brain-ctx-menu .bc-txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.brain-ctx-menu .bc-label{font-size:13px;font-weight:600;color:var(--text)}
.brain-ctx-menu .bc-sub{
  font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.brain-ctx-menu .bc-empty{padding:10px 13px;font-size:12px;color:var(--text-3)}
.brain-ctx-menu .bc-apps{padding:2px 0}
.brain-ctx-menu .bc-app{
  display:flex;align-items:center;gap:8px;padding:6px 13px;font-size:12px;color:var(--text-2)
}
/* Chấm trạng thái, KHÔNG phải chữ: hàng ứng dụng đọc lướt, và "đã nối/chưa nối"
   viết ra mỗi dòng làm menu dày lên mà không thêm thông tin nào. */
.brain-ctx-menu .bc-dot{
  width:7px;height:7px;border-radius:50%;background:var(--text-3);opacity:.4;flex:0 0 auto
}
.brain-ctx-menu .bc-app.on .bc-dot{background:var(--ok,#16a34a);opacity:1}
.brain-ctx-menu .bc-app-st{margin-left:auto;font-size:11px;color:var(--text-3)}
.brain-ctx-menu .bc-more{color:var(--primary-text)}
.brain-ctx-menu .bc-more .bc-label{color:var(--primary-text)}

/* Kéo-thả: viền sáng lên để người dùng biết khung NÀY nhận tệp — thả nhầm ra
   ngoài thì trình duyệt mở luôn tệp và mất cả câu đang gõ. */
.brain-glow.is-dragging{outline:2px dashed var(--primary);outline-offset:3px}
.brain-glow.is-dragging .brain-glow-inner{background:var(--primary-weak)}

/* ── D1 — cảnh báo việc trùng trong bản xem trước kế hoạch ────────────────────
   Vàng-hổ phách chứ không đỏ: đây là ĐIỀU CẦN XEM LẠI, không phải lỗi. Đỏ dành cho
   thứ đã hỏng; dùng đỏ ở đây thì khi có lỗi thật người dùng không phân biệt được. */
.plan-dup{
  margin-top:8px;border:1px solid var(--warn-border,#fcd34d);border-radius:8px;
  background:var(--warn-weak,#fffbeb);padding:8px 10px
}
.plan-dup-head{
  display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;
  color:var(--warn-text,#92400e);margin-bottom:6px
}
.plan-dup-head svg{width:14px;height:14px}
.plan-dup-list{display:flex;flex-direction:column;gap:4px}
.plan-dup-row{display:flex;align-items:center;gap:6px;font-size:12px;flex-wrap:wrap}
.plan-dup-link{
  color:var(--text);text-decoration:none;border-bottom:1px dashed var(--text-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:min(420px,60vw)
}
.plan-dup-link:hover{color:var(--primary-text);border-bottom-color:var(--primary)}
.plan-dup-skip{
  display:flex;align-items:center;gap:6px;margin-top:7px;font-size:12px;
  color:var(--warn-text,#92400e);cursor:pointer;user-select:none
}
.plan-dup-skip input{margin:0;cursor:pointer}
/* Thẻ bị bỏ qua mờ đi nhưng VẪN ĐỌC ĐƯỢC — ẩn hẳn thì người dùng mất dấu vì sao
   số việc sắp tạo ít hơn số việc AI đề xuất. */
.plan-dup-skipped{opacity:.55}
.plan-dup-skipped .plan-dup{opacity:1}

@media (prefers-color-scheme: dark){
  .plan-dup{border-color:#78350f;background:rgba(120,53,15,.18)}
  .plan-dup-head,.plan-dup-skip{color:#fcd34d}
}
:root[data-theme="dark"] .plan-dup{border-color:#78350f;background:rgba(120,53,15,.18)}
:root[data-theme="dark"] .plan-dup-head,
:root[data-theme="dark"] .plan-dup-skip{color:#fcd34d}

/* ── A4 — thẻ mở đầu dưới ô hỏi ───────────────────────────────────────────── */
.brain-starters{
  display:grid;gap:10px;margin-top:14px;
  grid-template-columns:repeat(auto-fit,minmax(168px,1fr))
}
.brain-starter{
  display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  padding:12px 13px;text-align:left;cursor:pointer;
  background:var(--panel);border:1px solid var(--border);border-radius:11px;
  transition:border-color .12s,box-shadow .12s,transform .12s
}
.brain-starter:hover{
  border-color:var(--primary);box-shadow:var(--shadow-sm);transform:translateY(-1px)
}
.brain-starter:active{transform:none}
.brain-starter .bs-ico{display:inline-flex;color:var(--primary-text);margin-bottom:3px}
.brain-starter .bs-ico svg{width:16px;height:16px}
.brain-starter .bs-title{font-size:13px;font-weight:600;color:var(--text)}
.brain-starter .bs-sub{
  font-size:12px;color:var(--text-3);line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}
/* Dưới 420px bốn thẻ xếp dọc thành một cột dài đẩy ô hỏi lên khỏi màn hình —
   hai cột giữ chúng trong tầm mắt. */
@media (max-width:520px){
  .brain-starters{grid-template-columns:1fr 1fr;gap:8px}
  .brain-starter{padding:10px}
  .brain-starter .bs-sub{-webkit-line-clamp:1}
}

/* ── A5/A7 — prompt đã lưu + ghi chú ước lượng trên tooltip model ───────────── */
/* Neo cho promptDrop: nó mở từ menu "+" nên không có nút riêng, nhưng vẫn cần một
   phần tử position:relative để định vị. Rộng 0 để không chiếm chỗ trên hàng. */
.brain-ctx-anchor{width:0;overflow:visible}
.brain-ctx-menu .bc-item{position:relative}
.brain-ctx-menu .bc-del{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  border:none;background:none;color:var(--text-3);cursor:pointer;padding:4px;
  border-radius:6px;opacity:0;transition:opacity .12s
}
.brain-ctx-menu .bc-item:hover .bc-del{opacity:1}
.brain-ctx-menu .bc-del:hover{background:var(--hover);color:var(--danger,#dc2626)}
.brain-ctx-menu .bc-del svg{width:12px;height:12px}
/* Chừa chỗ cho nút xoá, nếu không chữ dài chui xuống dưới nó. */
.brain-ctx-menu .bc-item:has(.bc-del) .bc-txt{padding-right:22px}


/* ═══════════════════════════════════════════════════════════════════
   B1–B4 — khu Agent của Bộ não AI: sub-nav, hai trục lọc, dải ứng
   dụng, danh sách kết nối, bảng hoạt động.

   Khối này cố ý nằm CUỐI FILE và chỉ dùng class mới có tiền tố riêng:
   phần hero/composer ở trên đang được sửa song song, và một selector
   dùng chung sẽ biến hai thay đổi độc lập thành một xung đột.
   ═══════════════════════════════════════════════════════════════════ */

.brain-subnav{
  display:flex;gap:4px;flex-wrap:wrap;padding:4px;margin-bottom:14px;
  background:var(--bg-subtle);border:1px solid var(--border);border-radius:10px;
}
.brain-subnav-btn{
  display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 13px;border-radius:7px;
  border:1px solid transparent;background:transparent;color:var(--text-2);
  font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;
  transition:background .12s,color .12s,border-color .12s;
}
.brain-subnav-btn:hover{background:var(--hover);color:var(--text)}
.brain-subnav-btn.active{background:var(--panel);border-color:var(--border);color:var(--text);box-shadow:var(--shadow)}
.brain-subnav-btn .bsn-ic{display:inline-flex;width:15px;height:15px}
.brain-subnav-btn .bsn-ic svg{width:15px;height:15px}

.brain-inline-link{color:var(--primary-text);font-weight:600;cursor:pointer}
.brain-inline-link:hover{text-decoration:underline}

/* Hai trục lọc. Nhãn trục nằm BÊN TRÁI hàng pill chứ không phải phía trên:
   hai hàng pill không nhãn trông như một hàng bị xuống dòng, và người dùng
   không đoán được vì sao "Marketing" xuất hiện hai lần với hai nghĩa. */
.brain-axis{display:flex;align-items:center;gap:10px;margin:8px 0}
.brain-axis .bx-label{
  flex:0 0 auto;width:82px;font-size:12px;font-weight:700;color:var(--text-3);
  text-transform:uppercase;letter-spacing:.04em;
}
.brain-axis-track{
  display:flex;gap:6px;flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px;
  scrollbar-width:thin;
}
.brain-axis-track::-webkit-scrollbar{height:5px}
.brain-axis-track::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:3px}

/* B2 — dải ứng dụng. Strip = một hàng cuộn ngang (thanh integrations kiểu
   ClickUp Agents Hub, đứng cuối trang); grid cũ giữ lại cho nơi khác dùng. */
.brain-app-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.brain-app-strip{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}
.brain-app-strip::-webkit-scrollbar{height:5px}
.brain-app-strip::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:3px}
.brain-app-strip .brain-app-card{flex:0 0 230px}
.brain-app-strip .bac-count{white-space:nowrap}

/* Thẻ danh mục ngành (Agents Hub): mỗi ngành một thẻ, agent bên trong là hàng
   có nút thêm nhanh — nút chỉ hiện khi hover, nhưng máy không có hover (điện
   thoại) thì hiện luôn, không thì không ai thêm được. */
.brain-cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;align-items:start}
.brain-cat-card{
  display:flex;flex-direction:column;gap:8px;padding:13px 14px;
  background:var(--panel);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow);
}
.brain-cat-card:hover{border-color:var(--border-strong)}
.brain-cat-head{
  display:flex;align-items:center;gap:8px;width:100%;padding:0;border:0;background:none;
  font:inherit;color:var(--text);text-align:left;cursor:pointer;
}
.brain-cat-head:hover .bcc-name{text-decoration:underline}
.brain-cat-head .bcc-ic{font-size:18px;line-height:1}
.brain-cat-head .bcc-name{flex:1;min-width:0;font-size:13.5px;font-weight:700}
.brain-cat-head .bcc-count{
  flex:0 0 auto;font-size:11.5px;font-weight:600;color:var(--text-2);
  background:var(--hover);border-radius:10px;padding:1px 8px;
}
.brain-cat-card .bcc-desc{font-size:12px;color:var(--text-2);line-height:1.4}
.brain-cat-rows{display:flex;flex-direction:column}
.brain-cat-row{display:flex;align-items:center;gap:8px;padding:5px 6px;border-radius:7px;font-size:12.5px}
.brain-cat-row:hover{background:var(--hover)}
.brain-cat-row .bca-av{flex:0 0 auto;font-size:15px;line-height:1}
.brain-cat-row .bca-nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}
.brain-cat-row .bcc-add{flex:0 0 auto;opacity:0}
.brain-cat-more{
  align-self:flex-start;margin-top:4px;padding:4px 6px;border:0;background:none;cursor:pointer;
  font:inherit;font-size:12px;font-weight:600;color:var(--primary-text,var(--text-2));
}
.brain-cat-more:hover{text-decoration:underline}

/* Tab Bộ nhớ — hai cột kiểu hub: Cá nhân hoá trái, bộ nhớ + kỹ năng phải. */
.brain-mem-grid{display:grid;grid-template-columns:minmax(300px,380px) 1fr;gap:18px;align-items:start}
@media (max-width:980px){.brain-mem-grid{grid-template-columns:1fr}}
.brain-cat-row:hover .bcc-add,.brain-cat-row .bcc-add:focus-visible,.brain-cat-row .bcc-add:disabled{opacity:1}
@media (hover:none){.brain-cat-row .bcc-add{opacity:1}}
.brain-app-card{
  display:flex;flex-direction:column;gap:5px;padding:12px 13px;
  background:var(--panel);border:1px solid var(--border);border-radius:9px;box-shadow:var(--shadow);
}
.brain-app-card.is-on{border-color:var(--border-strong)}
.brain-app-card .bac-name{font-size:13.5px;font-weight:600;color:var(--text)}
.brain-app-card .bac-desc{font-size:12px;color:var(--text-2);line-height:1.4;min-height:2.8em}
.brain-app-card .bac-foot{display:flex;align-items:center;gap:8px;margin-top:2px}
.brain-app-card .bac-count{font-size:12px;font-weight:600;color:var(--text-2);cursor:help}

/* Ô thống kê dùng chung cho Kết nối và Hoạt động. */
.brain-stat-row{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0 14px}
.brain-stat{
  min-width:132px;padding:10px 14px;background:var(--panel);
  border:1px solid var(--border);border-radius:9px;
}
.brain-stat .bs-val{font-size:19px;font-weight:700;color:var(--text);line-height:1.2}
.brain-stat .bs-lab{font-size:12px;color:var(--text-2);margin-top:2px}

/* B3 — danh sách kết nối. Hàng, không phải lưới: cột trạng thái phải thẳng
   nhau thì mới liếc một cái là thấy cái nào chưa nối. */
.brain-conn-list{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:9px;overflow:hidden}
.brain-conn-row{
  display:flex;align-items:center;gap:14px;padding:12px 14px;background:var(--panel);
  border-bottom:1px solid var(--border);
}
.brain-conn-row:last-child{border-bottom:none}
.brain-conn-row:hover{background:var(--hover)}
.brain-conn-row .bcr-main{flex:1;min-width:0}
.brain-conn-row .bcr-name{font-size:13.5px;font-weight:600;color:var(--text)}
.brain-conn-row .bcr-desc{font-size:12px;color:var(--text-2);margin-top:1px}
.brain-conn-row .bcr-status{
  display:flex;align-items:center;gap:7px;flex:0 0 auto;width:230px;
  font-size:12px;color:var(--text-2);
}
.bcr-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.bcr-dot-ok{background:#16a34a}
.bcr-dot-warn{background:#d97706}
.bcr-dot-off{background:var(--border-strong)}

/* B4 — hoạt động. */
.brain-act-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.brain-act-controls .brain-axis-track{flex:1;min-width:0}
.brain-act-days{width:auto;min-width:140px;flex:0 0 auto}
.brain-act-table td{vertical-align:top}
.brain-act-table .ba-when{white-space:nowrap;color:var(--text-2);font-size:12px}
.brain-act-table .ba-action{font-weight:600;color:var(--text)}
.brain-act-table .ba-reason{
  margin-top:3px;font-size:12px;line-height:1.4;color:var(--danger,#dc2626);opacity:.85;max-width:420px;
}
.brain-act-table .ba-tool{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;
  padding:2px 6px;border-radius:5px;background:var(--bg-subtle);color:var(--text-2);white-space:nowrap;
}
.brain-act-table .ba-who{white-space:nowrap;font-size:12px}
.brain-act-pager{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}
.brain-act-pager .bap-mid{margin-left:auto;font-size:12px;color:var(--text-2)}

@media (max-width:760px){
  .brain-axis{align-items:flex-start;flex-direction:column;gap:4px}
  .brain-axis .bx-label{width:auto}
  .brain-conn-row{flex-wrap:wrap}
  .brain-conn-row .bcr-status{width:auto;order:3;flex:1 0 100%}
  .brain-app-grid{grid-template-columns:1fr 1fr}
  .brain-cat-grid{grid-template-columns:1fr}
}

/* Ô tìm mẫu agent — nằm trong .brain-axis nên .input (width:100%) phải bị chặn
   lại, nếu không nó kéo dài hết hàng và nuốt cả nhãn trục. */
.brain-tpl-search{max-width:420px;height:32px}

/* C2 — đồng hồ lượt AI. */
.brain-quota{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px}
.brain-quota .bq-bar{width:150px;height:6px;border-radius:3px;background:var(--bg-subtle);overflow:hidden;flex:0 0 auto}
.brain-quota .bq-fill{height:100%;border-radius:3px;transition:width .2s}
.brain-quota .bq-fill.bq-ok{background:#16a34a}
.brain-quota .bq-fill.bq-warn{background:#d97706}
.brain-quota .bq-fill.bq-danger{background:#dc2626}
.brain-quota .bq-dot{width:8px;height:8px;border-radius:50%;background:#16a34a;flex:0 0 auto}
.brain-quota .bq-txt{font-size:12px;color:var(--text-2)}
.brain-quota .bq-left{font-weight:600;color:var(--text)}

/* ── UX polish 2026-07-29: nhóm Công cụ (email/docs/workspace/timesheet) ── */
.page-head-row{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.page-head-row .page-title{margin-bottom:2px}
.page-head-row .page-sub{margin:0}
.ux-banner{display:flex;align-items:center;gap:12px;border:1px solid #f8e3bd;background:#fff8ec;
  border-radius:10px;padding:10px 14px;margin:0 0 12px;flex-wrap:wrap}
.ux-banner-ic{display:grid;place-items:center;width:32px;height:32px;border-radius:8px;
  background:#fff;border:1px solid #f8e3bd;color:#b06000;flex:0 0 auto}
.ux-banner-ic svg{width:16px;height:16px}
[data-theme="dark"] .ux-banner{background:#2a2113;border-color:#5c452a}
[data-theme="dark"] .ux-banner-ic{background:#1d1a14;border-color:#5c452a;color:#f0a35c}
.ux-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:8px 0 4px}
.ux-step{background:var(--panel);border:1px solid var(--border);border-radius:10px;
  padding:14px 16px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.ux-step-n{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
  font-size:12px;font-weight:700;background:var(--bg-subtle);color:var(--primary-text)}
.ux-step-n svg{width:13px;height:13px}
.ux-step-done .ux-step-n{background:#e7f6ee;color:var(--st-done)}
[data-theme="dark"] .ux-step-done .ux-step-n{background:#15311f}

/* ===== Tài chính (Thu Chi / Voucher / Mã giảm giá) — tham chiếu ClickUp =====
   Scoped bằng tiền tố .cu- để không ảnh hưởng .seg/.badge/.filter-bar dùng ở
   chỗ khác trong app. --st-verified (#7b68ee) đã có sẵn trong palette, dùng
   làm accent tím thay vì thêm token mới. */
.cu-tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);margin:6px 0 12px;overflow-x:auto}
.cu-tabs button{appearance:none;background:none;border:none;font:inherit;font-size:12px;
  font-weight:600;color:var(--text-2);padding:8px 12px;border-bottom:2px solid transparent;
  margin-bottom:-1px;cursor:pointer;white-space:nowrap}
.cu-tabs button:hover{color:var(--text)}
.cu-tabs button.active{color:var(--st-verified);border-bottom-color:var(--st-verified)}
.cu-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.cu-toolbar .cu-sp{flex:1}
.cu-pill,.cu-pill-sel{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);
  border-radius:999px;padding:5px 12px;font-size:12px;font-weight:600;color:var(--text-2);
  background:var(--panel);cursor:pointer;height:auto;line-height:1.3}
.cu-pill:hover,.cu-pill-sel:hover{border-color:var(--border-strong);color:var(--text)}
.cu-pill-search{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);
  border-radius:999px;padding:5px 12px 5px 10px;font-size:12px;background:var(--panel);min-width:190px}
.cu-pill-search svg{width:13px;height:13px;color:var(--text-3);flex:none}
.cu-pill-search input{border:none;background:none;font:inherit;outline:none;flex:1;color:var(--text)}
.cu-btn-primary{background:var(--st-verified);border:1px solid var(--st-verified);color:#fff;
  border-radius:999px;padding:6px 15px;font-size:12px;font-weight:700;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px}
.cu-btn-primary:hover{filter:brightness(1.08)}
.cu-btn-primary svg{width:13px;height:13px}
.cu-group-h{display:flex;align-items:center;gap:10px;padding:11px 4px 7px;font-size:12px;color:var(--text-2)}
.cu-group-label{font-size:10px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;
  color:#fff;border-radius:5px;padding:3px 9px;white-space:nowrap}
.cu-group-agg{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:700;color:var(--text)}
.cu-inline-add{color:var(--text-3);font-size:12px;padding:7px 10px 10px;cursor:pointer}
.cu-inline-add:hover{color:var(--st-verified)}
.cu-avatar{display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;
  border-radius:50%;background:var(--primary-weak);color:var(--primary-text);font-size:9px;font-weight:800;
  margin-right:6px;vertical-align:-4px;flex:none}
.cu-status{display:inline-flex;align-items:center;font-size:10px;font-weight:800;letter-spacing:.4px;
  text-transform:uppercase;padding:3px 9px;border-radius:5px;color:#fff;white-space:nowrap}
.cu-status.ok{background:#12b76a}
.cu-status.part{background:#f59e0b}
.cu-status.muted{background:#98a1b0}
.cu-progress{height:6px;border-radius:999px;background:var(--bg-subtle);overflow:hidden;margin:8px 0 4px}
.cu-progress i{display:block;height:100%;background:#12b76a;border-radius:999px}
.cu-progress i.warn{background:#f59e0b}

/* D3 — cảnh báo việc trùng dưới ô tiêu đề. Nền hổ phách nhạt, KHÔNG đỏ: đây là
   lời nhắc kiểm tra, không phải lỗi chặn lưu. */
.task-dup{margin-top:8px;padding:8px 10px;border:1px solid #fcd34d;background:#fffbeb;border-radius:8px}
[data-theme="dark"] .task-dup{background:#2a2109;border-color:#78551a}
.task-dup .td-head{font-size:12px;font-weight:600;color:#92400e;margin-bottom:6px}
[data-theme="dark"] .task-dup .td-head{color:#fbbf24}
/* D4 — tiêu đề dải TƯƠNG TỰ. Nhạt hơn và có vạch ngăn: cùng một hộp nhưng phải
   đọc ra ngay là mức nhắc thấp hơn dải trùng ở trên, không thì hai dải hoà làm một. */
.task-dup .td-head-soft{color:var(--text-2);font-weight:500;margin-top:8px;padding-top:8px;
  border-top:1px solid rgba(146,64,14,.18)}
[data-theme="dark"] .task-dup .td-head-soft{color:var(--text-2);border-top-color:rgba(251,191,36,.22)}
.task-dup .td-row{display:flex;align-items:center;gap:8px;padding:4px 6px;border-radius:6px;font-size:12px}
.task-dup .td-row.is-link{cursor:pointer}
.task-dup .td-row.is-link:hover{background:rgba(0,0,0,.05)}
.task-dup .td-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}
.task-dup .td-who{color:var(--text-2);white-space:nowrap}

/* P0.1 — dải cảnh báo danh sách bị cắt. Hổ phách, không đỏ: dữ liệu đúng nhưng
   chưa đủ — việc của banner là nói thật con số và đưa đường lấy tiếp. */
.trunc-banner{display:flex;align-items:center;gap:10px;padding:9px 13px;margin:0 0 12px;
  border:1px solid #fcd34d;background:#fffbeb;border-radius:9px;font-size:13px;color:#92400e}
[data-theme="dark"] .trunc-banner{background:#2a2109;border-color:#78551a;color:#fbbf24}
.trunc-banner svg{width:16px;height:16px;flex:0 0 auto}
.trunc-banner .tb-txt{flex:1;min-width:0}

/* U13 — hộp nhấn trên Trang chủ: token hoá thay vì inline style rải rác, cùng
   ngôn ngữ với hệ B1–B4 (thẻ trắng, viền trái màu nghĩa). */
.panel-accent{margin:4px 0 10px;padding:12px 14px;border-left:3px solid var(--border-strong)}
.panel-accent-amber{border-left-color:#f59e0b}
.panel-accent-violet{border-left-color:#7c3aed}

/* Kho tài liệu — dropzone kéo-thả (task B2) */
.ws-dropzone{display:flex;align-items:center;gap:12px;border:1.5px dashed var(--border-strong);
  background:var(--bg-subtle);border-radius:10px;padding:16px 18px;margin:0 0 14px;cursor:pointer}
.ws-dropzone-ic{display:grid;place-items:center;width:36px;height:36px;border-radius:9px;
  background:var(--primary-weak);color:var(--primary-text);flex:0 0 auto}
.ws-dropzone-ic svg{width:17px;height:17px}
.ws-dropzone-over{border-color:var(--primary);background:var(--primary-weak)}

/* ===== UI/UX OPTIMIZATION (2026-07-29) ===== */

/* Enhanced Stat Cards — better spacing, modern design */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.stat {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 18px;
  transition: all 0.16s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.stat::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), #3b9bf2);
  opacity: 0;
  transition: opacity 0.16s;
}

.stat:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.12);
  border-color: var(--border-strong);
}

.stat:hover::before {
  opacity: 1;
}

.stat .k {
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: 0.4px;
  color: var(--text-2);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.stat .v {
  font-size: 28px;
  font-weight: 750;
  letter-spacing: -0.8px;
  line-height: 1.1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.stat .v.good { color: #10b981; }
.stat .v.warn { color: #f59e0b; }
.stat .v.bad { color: #ef4444; }

/* Filter Bar Improvements */
.filter-bar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
  padding: 12px;
  background: var(--bg-subtle);
  border-radius: 8px;
  border: 1px solid var(--border);
}

.filter-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.filter-lab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 650;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.2px;
}

/* Progress Bars */
.progress {
  height: 8px;
  border-radius: 4px;
  background: var(--border);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--border-strong);
}

.progress > span {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--primary), #3b9bf2);
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Empty State */
.empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
}

.empty svg {
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
  opacity: 0.3;
}

.empty .et {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 6px;
}

/* Section Headers */
.section-header {
  padding: 16px 0 12px;
  margin-top: 20px;
  border-bottom: 2px solid var(--border);
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.3px;
}

/* Responsive */
@media (max-width: 1024px) {
  .stat-grid {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  }
}

@media (max-width: 768px) {
  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .filter-bar {
    flex-direction: column;
  }

  .tbl th, .tbl td {
    padding: 10px 12px;
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .stat-grid {
    grid-template-columns: 1fr;
  }
}

/* BRAIN_TABS/3/3b đã gộp ngược lên phần "Bộ não AI — unified hub" (2026-07-31):
   ba lượt vá nối đuôi ở EOF cùng nhắm .seg.brain-seg, mỗi lượt chỉ đè vài thuộc
   tính nên phần còn lại rơi rớt từ block pill cũ. Sửa kiểu tab: sửa ở trên. */

/* BRAIN_TABS2 — tab phụ (Agents/Kỹ năng/Bộ nhớ) hiện DƯỚI ô chat: khung chat co lại
   còn cụm tab + composer (transcript/sidebar ẩn bằng JS), bỏ min-height để nội dung
   tab đổ ngay sát bên dưới, không chừa khoảng trống 420px của chế độ chat. */
/* .brain-dock đã gỡ (2026-07-31): nội dung 3 tab phụ nay nằm trong chatMain,
   cột phiên hiện ở mọi tab nên không còn trạng thái "khung co lại". */

/* ================================================================
   BRAIN_QA (C4+C5, QA 2026-07-30) — block EOF để commit chọn lọc không
   dính WIP khác trong file (mẫu BRAIN_TABS).
   C4: badge kỹ năng trên card Agent mẫu — .badge gốc white-space:nowrap
   nên trong grid in-chat minmax(230px) chữ bị CẮT CỤT không ellipsis
   (trang Cấu hình card rộng hơn nên thoát). Ellipsis thay vì wrap: badge
   2 dòng phá chiều cao card đều nhau.
   C5: hàng chip NGÀNH — nowrap + overflow-x:auto nhưng scrollbar mỏng bị
   macOS auto-hide, chip cuối vô hình. Chip ít → wrap 2 hàng thấy hết,
   khỏi scroll ngang không affordance.
   ================================================================ */
.brain-tpl-card .bt-top .badge{max-width:100%;overflow:hidden;text-overflow:ellipsis;display:inline-block}
.brain-axis-track{flex-wrap:wrap;overflow-x:visible}