@layer legacy {
/* ==========================================================================
   Notics — Project Notes & Milestones (Style 1: Modern Seamless Split)
   Seamless Panes, Hairline Dividers, Unified Single-Line Toolbar, OneNote 2-Level

   Project and section colors are used only as ACCENTS (dots, rails, badges,
   via --notics-accent set inline per row). Surfaces and text keep the
   --sf-* theme tokens, so the page stays readable and on-brand across every
   design system (Fluent/Glass) and light/dark. Danger and Gantt
   status colors below are semantic (red always means danger, green always
   means done) rather than brand-accent-driven — that stays constant across
   design systems by convention, the same way Fluent/Apple HIG all
   keep a fixed semantic red regardless of brand accent — but they are still
   tokenized so every usage stays in sync and dark mode can lighten them for
   contrast the same way the rest of the app already does (e.g. the settings
   panel's dark-mode link/danger red at styles.css:2272). */
:root {
  --notics-danger: var(--ui-danger);
  --notics-danger-rgb: var(--ui-danger-rgb);
  --gantt-status-done: var(--ui-success);
  --gantt-status-progress: var(--ui-accent);
  --gantt-status-overdue: var(--notics-danger);
  --gantt-status-pending: var(--ui-text-muted);
  /* Mũi tên ô chọn và độ nổi thẻ khoá theo chế độ (không dùng được light-dark()). */
  --notics-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --notics-lock-card-shadow: var(--elev-3);
}
html[data-mode="dark"] {
  --notics-danger: var(--ui-danger);
  --notics-danger-rgb: var(--ui-danger-rgb);
  --notics-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --notics-lock-card-shadow: var(--elev-4);
}

.notics-page {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: var(--ui-space-2-5); /* Sửa thành 10px ở tất cả các viền để tách rời khỏi topbar */
  color: var(--ui-text-primary);
  background: var(--ux-base);
  border-radius: var(--ui-radius-panel);
  border: var(--ui-stroke-thin) solid var(--stroke);
  box-shadow: var(--elev-4);
  overflow: hidden;
  user-select: text;
}

/* Unified Top Header */
.notics-page-header {
  height: var(--app-header-height);
  padding: 0 var(--ui-space-4-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-3-5);
  border-bottom: var(--ui-stroke-thin) solid var(--stroke);
  background: rgba(var(--ui-surface-raised-rgb), 0.7);
  backdrop-filter: blur(var(--glass-blur));
  flex: 0 0 auto;
  z-index: var(--ui-layer-pane);
}
.notics-header-left {
  display: flex;
  align-items: center;
  gap: var(--ui-space-2-5);
  flex: 0 0 auto;
  min-width: 0;
}
.notics-header-toggles {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-1);
  padding: 0;
  box-shadow: none;
  backdrop-filter: none;}
.notics-header-toggle {
  min-width: var(--ui-header-control-size);
  max-width: var(--ui-header-control-size);
  max-height: var(--ui-header-control-size);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  transition: all var(--ui-duration-fast) var(--ui-ease);}
.notics-header-toggle:hover {
  box-shadow: none;}
.notics-header-toggle:not(.is-collapsed) {
  box-shadow: none;}
.notics-header-toggle.is-collapsed {
  opacity: 0.5;
  box-shadow: none;}
.notics-header-toggle.is-collapsed:hover {
  opacity: 0.9;}
.notics-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ui-space-2);
  line-height: var(--lh-flat);
}

.notics-eyebrow {
  color: var(--ui-text-primary);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  letter-spacing: normal;
  margin-bottom: 0;
}
/* Dấu "/" cùng cỡ với hai mảnh breadcrumb; mờ bằng màu chữ muted, không opacity (ARS-1). */
.notics-heading-separator { color: var(--ui-text-muted); font-size: var(--fs-body); font-weight: var(--fw-normal); margin: 0 var(--ui-space-0-5); }
.notics-project-filter { position: relative; }
.notics-project-filter-btn {
  height: var(--ui-size-md); max-width: min(var(--dt-dimension-layout-240), 25vw); min-width: auto;
  display: inline-flex; align-items: center; gap: var(--ui-space-1);
  padding: 0 var(--ui-space-1-5); border: var(--ui-stroke-thin) solid transparent; border-radius: var(--ui-radius-control);
  background: transparent; color: var(--ui-text-primary);
  /* Mảnh thứ hai của breadcrumb "Notebook / <phạm vi>": cùng cỡ chữ body 14 với tiêu đề
     (trước 12 → hai chữ lệch đường chân chữ, BA báo 10/10/2026). */
  font: var(--fw-medium) var(--fs-body)/var(--lh-none) var(--app-font); cursor: pointer;
  box-shadow: none;
  transition: all var(--ui-duration-fast) var(--ui-ease);
}
.notics-project-filter-btn:hover {
  background: var(--ui-hover);
  border-color: transparent;
  color: var(--ui-accent);
}
.notics-project-filter-btn[aria-expanded="true"] {
  background: color-mix(in srgb, var(--ui-accent) 12%, transparent);
  border-color: transparent;
  color: var(--ui-accent);
}
.notics-project-filter-btn:focus-visible { outline: none; border-color: var(--ui-accent); box-shadow: 0 0 0 var(--ui-focus-ring-width) color-mix(in srgb, var(--ui-accent) 20%, transparent); }
/* overflow:hidden (để có "…") cắt theo hộp dòng; line-height 1 của nút làm mất chân chữ
   g/y/p (BA báo 10/10/2026) — nhãn tự giữ line-height đủ chứa descender. */
.notics-project-filter-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: var(--lh-snug); }
.notics-project-filter-caret { flex: 0 0 auto; width: var(--ui-icon-xs); height: var(--ui-icon-xs); color: var(--ui-text-secondary); transition: transform var(--ui-duration-fast) var(--ui-ease); }
.notics-project-filter-btn[aria-expanded="true"] .notics-project-filter-caret { transform: rotate(180deg); }
.notics-project-filter-panel {
  position: absolute; top: calc(100% + var(--ui-space-1)); left: 0; z-index: var(--layer-popover);
  width: min(var(--dt-component-popover-project-picker-min-width), calc(100vw - var(--ui-space-6))); padding: var(--ui-space-2);
  border: var(--ui-stroke-thin) solid var(--stroke); border-radius: var(--ui-radius-panel); background: rgb(var(--ui-surface-raised-rgb));
  box-shadow: var(--elev-4);
}
.notics-project-filter-search-wrap { position: relative; display: flex; align-items: center; color: var(--ui-text-muted); }
.notics-project-filter-search-wrap svg { position: absolute; left: var(--ui-space-2-5); pointer-events: none; }
.notics-project-filter-search {
  /* Ô tự mang hộp (viền pill) — KHÔNG thuộc nhóm ô nhập không viền trong khung ở styles.css;
     rule cờ important ở đó từng xoá viền + vòng focus của ô (đo 01/10: không có dấu hiệu focus). */
  width: 100%; height: var(--ui-size-md); box-sizing: border-box; padding: 0 var(--ui-space-2-5) 0 var(--ui-space-8); border: var(--ui-stroke-thin) solid var(--stroke); border-radius: var(--ui-radius-control);
  background: rgba(var(--ink), .035); color: var(--ui-text-primary); font: var(--fs-body) var(--app-font);
}
.notics-project-filter-search:focus { outline: none; border-color: var(--ux-control-border-active); box-shadow: var(--ui-control-ring); }
/* Đây là bộ chọn phạm vi, không phải thư viện nội dung: danh sách một cột giúp
   quét tên nhanh, giữ đường dẫn Hạng mục đọc được và che ít màn hình hơn. */
.notics-project-filter-options {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-px);
  /* BA 2026-09-28: thu nhỏ — khoảng 8 hàng rồi cuộn, thay vì cao 360px. */
  max-height: min(calc(var(--ui-size-md) * 10), calc(100vh - var(--dt-dimension-layout-176)));
  margin-top: var(--ui-space-1-5);
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* Một dòng: tên bên trái, mã/đường dẫn mờ bên phải — kiểu menu Fluent/Linear (BA
   10/10/2026: 2 dòng + chữ đậm 700 dồn cục). Cao = mục menu chuẩn 32 (.ui-menu-item
   ở ui-components.css, layer components thắng rule này). */
.notics-project-filter-option {
  width: 100%; min-height: var(--ui-control-h-standard);
  display: flex; align-items: center; gap: var(--ui-space-2);
  padding: 0 var(--ui-space-2);
  border: 0; border-radius: var(--ui-radius-control);
  background: transparent; color: var(--ui-text-primary);
  font-family: var(--app-font); text-align: left; cursor: pointer;
  transition: background-color var(--ui-duration-fast) var(--ui-ease);
}
.notics-project-filter-option:hover, .notics-project-filter-option:focus-visible {
  outline: none;
  background: var(--ux-hover);
}
.notics-project-filter-option.is-selected {
  background: var(--ux-active);
  color: var(--ui-accent);
}
.notics-project-filter-option.is-section { padding-left: var(--ui-space-6); }
.notics-project-filter-swatch { width: var(--ui-space-2); height: var(--ui-space-2); flex: 0 0 auto; border-radius: var(--ui-radius-circle); }
.notics-project-filter-option-text { min-width: 0; flex: 1; display: flex; align-items: baseline; gap: var(--ui-space-2); }
.notics-project-filter-option-text strong { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-body); font-weight: var(--fw-normal); line-height: var(--lh-body-sm); }
.notics-project-filter-option.is-selected .notics-project-filter-option-text strong { font-weight: var(--fw-medium); }
.notics-project-filter-option-text small { flex: 0 1 auto; max-width: 45%; color: var(--ui-text-muted); font-size: var(--fs-caption); font-weight: var(--fw-normal); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notics-project-filter-check { display: inline-flex; flex: 0 0 auto; color: var(--ui-accent); }
.notics-project-filter-group {
  display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-2);
  margin-top: var(--ui-space-2); padding: var(--ui-space-1) var(--ui-space-2) var(--ui-space-1);
  color: var(--ui-text-muted);
  font: var(--fw-overline) var(--fs-caption)/var(--lh-overline) var(--app-font);
}
/* Dòng tên dự án trong popover "Chuyển tới…" — mốc cây, không bấm được (2026-09-13).
   AT-UI Rhythm (BA 10/10/2026): CÙNG hình dạng hàng dự án của bộ lọc phạm vi (cao 32,
   chấm · tên body · mã mờ bên phải) — chỉ khác là không có nền rê. Trước đây là nhãn
   caption đậm nhỏ, nên hai bộ chọn trông như hai component khác nhau. */
.notics-move-project-heading {
  width: 100%; min-height: var(--ui-size-md);
  display: flex; align-items: center; gap: var(--ui-space-2);
  padding: 0 var(--ui-space-2);
  color: var(--ui-text-primary);
  cursor: default;
}
/* Hàng không có màu riêng (Tất cả, QuickNote) vẫn giữ cột chấm để chữ thẳng hàng. */
.notics-project-filter-swatch.is-empty { background: transparent; }
.notics-project-filter-group:first-of-type { margin-top: var(--ui-space-1); }
.notics-project-filter-group small { font: var(--fw-normal) var(--fs-caption)/1 var(--app-font); letter-spacing: normal; }
.notics-project-filter-empty { margin: var(--ui-space-3) var(--ui-space-2); color: var(--ui-text-muted); font-size: var(--fs-caption); text-align: center; }
.notics-open-project-btn { width: var(--ui-size-sm); height: var(--ui-size-sm); min-width: var(--ui-size-sm); min-height: var(--ui-size-sm); display: inline-flex; align-items: center; justify-content: center; border: var(--ui-stroke-thin) solid var(--stroke); border-radius: var(--ui-radius-control); background: rgb(var(--ui-surface-raised-rgb)); color: var(--ui-text-secondary); cursor: pointer; box-shadow: none; transition: all var(--ui-duration-fast) var(--ui-ease); padding: 0; }
.notics-open-project-btn[hidden] { display: none; }
.notics-open-project-btn:hover, .notics-open-project-btn:focus-visible { color: var(--ui-accent); border-color: rgba(var(--ui-accent-rgb), 0.4); background: rgb(var(--ui-surface-fill-rgb)); outline: none; }
.notics-open-project-btn svg { width: var(--ui-icon-xs); height: var(--ui-icon-xs); }
/* Gộp chung với nhóm nút Khóa/+Ghi chú trong .notics-header-right — nằm cố
   định bên phải nên đổi dự án/hạng mục (breadcrumb ở header-left đổi độ dài)
   không kéo nó xê dịch theo. */
/* Khung + tab segmented: "SEGMENTED CHUẨN" (@layer components, ui-components.css) — GĐ3 lát 5.
   display giữ ở legacy để các rule responsive display: none vẫn ẩn được thanh này. */
.notics-segmented-control { display: inline-flex; }

 /* audit-keep: quầng sáng màu trạng thái (glow), không phải bậc độ nổi */
 /* audit-keep: quầng sáng màu trạng thái (glow), không phải bậc độ nổi */

.notics-icon-btn {
  width: var(--ui-size-sm);
  height: var(--ui-size-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--ui-radius-control);
  background: transparent;
  color: var(--ui-text-muted);
  cursor: pointer;
  font-size: var(--fs-body);
  line-height: var(--lh-none);
  font-family: inherit;
  transition-property: var(--tr-ui); transition-timing-function: var(--ui-ease); transition-duration: var(--ui-duration-fast);
  padding: 0;
}
.notics-icon-btn:hover { background: rgba(var(--ink), 0.08); color: var(--ui-text-primary); }
.notics-icon-btn:disabled { opacity: 0.35; cursor: default; }
/* Danger modifier for icon buttons that remove/delete rather than edit — used
   on both the tree's row-delete buttons and Gantt's unlink button, so the two
   share one hover treatment instead of each hand-rolling a red hover. */


/* Prominent, colorful Add button */

/* Styled, prominent Collapse arrow button */

/* Plan Today Button */
.notics-btn-today {
  background: rgba(var(--ink), 0.05);
  border-color: rgba(var(--ink), 0.1);
  color: var(--ui-text-secondary);
}
.notics-btn-today:hover {
  background: color-mix(in srgb, var(--ui-accent) 14%, transparent);
  color: var(--ui-accent);
  border-color: color-mix(in srgb, var(--ui-accent) 35%, transparent);
}

/* 2 cột: cây dự án + lưới thẻ ghi chú. Trước đây là 3 cột (dự án / danh sách
   ghi chú / editor) — editor giờ là popup riêng (#noticsEditorModal, xem
   openEditorModal), không còn nằm trong lưới này, nên cột "Ghi chú" tự lấp
   hết phần còn lại thay vì bị bó hẹp 260px. */
.notics-body {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;               /* mốc cho cột danh sách khi "peek" (workspaceListPane) */
  display: grid;
  grid-template-columns: var(--notics-projects-width, var(--ui-rail-w-expanded, 200px)) minmax(0, 1fr);
  gap: 0;
  /* Khoảng cách header→body đồng bộ với tab Task (giữa topbar và lưới lịch) —
     tránh khoảng trắng lệch giữa các tab. */
  padding-top: var(--ui-space-2);
  background: transparent;
  transition: grid-template-columns var(--ui-duration-standard) var(--ui-ease);
}
.notics-col {
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  overflow: hidden;
  position: relative;
}
.notics-resizer {
  position: absolute;
  top: 0;
  right: calc(-1 * var(--ui-space-1));
  width: var(--ui-space-2);
  bottom: 0;
  cursor: col-resize;
  z-index: var(--ui-layer-pane-top);
  touch-action: none;
  user-select: none;
}
/* GĐ2: màu nền của ba cột này chuyển hết sang class vai trò .ux-pane/.ux-canvas
   (ui-foundation.css). Ở đây chỉ còn hình học.
     .notics-col-projects  → .ux-pane   (cây dự án)
     .notics-col-notes     → .ux-pane ở QuickNote/Painting/Art Editor,
                             .ux-canvas ở Notebook — chính chỗ này là lý do
                             không thể tô nền theo tên component.
     .notics-col-editor    → ruột popup, nền do hợp đồng --surface-raised lo.
   .notics-col-plan đã xóa hẳn: không còn phần tử nào trong index.html mang
   class đó, nó chỉ là selector chết từ thời Notics có cột kế hoạch riêng. */
.notics-col-projects {
  border-right: var(--ui-resizer-line) solid var(--ux-divider);
}

/* Collapsed layout states (2 cột: dự án + ghi chú) */
.notics-page.is-projects-collapsed .notics-col-projects { display: none !important; }
.notics-page.is-projects-collapsed .notics-body { grid-template-columns: 1fr; }

.notics-page.is-notes-collapsed .notics-col-notes { display: none !important; }
.notics-page.is-notes-collapsed .notics-body { grid-template-columns: var(--notics-projects-width, var(--ui-rail-w-expanded, 200px)); }

.notics-page.is-projects-collapsed.is-notes-collapsed .notics-col-projects,
.notics-page.is-projects-collapsed.is-notes-collapsed .notics-col-notes { display: none !important; }
.notics-page.is-projects-collapsed.is-notes-collapsed .notics-body { grid-template-columns: 1fr; }

/* Bố cục co giãn của workspace (Notebook / QuickNote / AntiPaint / AntiScreenshot)
   nay do MỘT nguồn duy nhất lo: khối `@container workspace-layout` trong
   styles/responsive-layout.css. Ở đây từng có ba khối @media (max-width) từ thời
   Notics còn 3 cột — chúng ghi `grid-template-columns: 180px 240px 1fr` (cột thứ
   ba rỗng lộ hình nền) và `.notics-scroll { max-height: 180px }` (panel sập còn
   một dải, phần dưới lộ hình nền). @media bám VIEWPORT nên còn kích hoạt cả khi
   cột vẫn rộng; @container bám bề ngang THẬT của chính workspace, đúng bài. */

/* Pane Header */
.notics-col-head {
  height: var(--ui-pane-header-h);
  min-height: var(--ui-pane-header-h);
  box-sizing: border-box;
  padding: 0 var(--ui-space-3);
  display: flex;
  align-items: center;
  gap: var(--ui-space-1);
  border-bottom: var(--ui-resizer-line) solid var(--ux-divider);
  flex: 0 0 auto;
}
.notics-col-head[hidden] { display: none !important; }
.notics-col-head-title {
  font-size: var(--fs-title);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: normal;
  color: var(--ui-text-primary);
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-2);
}
.notics-col-head-actions {
  display: flex;
  align-items: center;
  gap: var(--ui-space-1-5);
  margin-left: auto;
}
/* Tiêu đề cột Dự án: 3 thẻ lọc "TẤT CẢ" (trái), "DỰ ÁN" (giữa), "RIÊNG TƯ" (phải) kèm box tròn đếm số */

.notics-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: var(--ui-space-1-5); }
.notics-side-empty { margin: var(--ui-space-2-5) var(--ui-space-3); color: var(--ui-text-secondary); font-size: var(--fs-caption); line-height: var(--lh-normal); }
/* Compact one-line variant: an inline icon + sentence, for hints nested
   inside an already-populated list (e.g. "no sections yet" under a project
   that does have other projects) where a full centered block would be too
   heavy. Shares color/size with .notics-side-empty, just adds the icon. */
.notics-side-empty--inline {
  display: flex;
  align-items: center;
  gap: var(--ui-space-1-5);
}
.notics-side-empty--inline svg { flex: 0 0 auto; opacity: 0.85; }

/* Nút "Tải thêm N mục" ở cuối lưới/bảng ghi chú (2026-09-13, mục 3 — phân
   trang client-side 50 dòng/lát để giảm loading với danh sách lớn). */
.notics-load-more-wrap {
  display: flex;
  justify-content: center;
  padding: var(--ui-space-4) 0;
}

/* Full empty-state block: icon + title + hint, centered. Used both for list
   columns (project tree, note list) and the editor's own empty panel. */
.notics-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--ui-space-1-5);
  margin: var(--ui-space-4-5) auto;
  padding: 0 var(--ui-space-4);
  max-width: var(--dt-dimension-layout-256);
}
.notics-empty-state-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ui-size-touch);
  height: var(--ui-size-touch);
  margin-bottom: var(--ui-space-1);
  border-radius: var(--ui-radius-circle);
  background: rgba(var(--ink), 0.05);
  color: var(--ui-text-muted);
}
.notics-empty-state .notics-empty-state-title {
  margin: 0;
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--ui-text-secondary);
  line-height: var(--lh-snug);
}
.notics-empty-state .notics-empty-state-hint {
  margin: 0;
  font-size: var(--fs-body);
  color: var(--ui-text-muted);
  line-height: var(--lh-relaxed);
}
/* Nút hành động duy nhất của màn trống (báo cáo UX 10/10/2026 X1). */
.notics-empty-state .notics-empty-state-action { margin-top: var(--ui-space-3); }

/* Tree column (OneNote 2-level: Projects -> Sections) */
.notics-create-wrap { position: relative; flex: 0 0 auto; }
.notics-create-btn {
  min-height: var(--ui-size-sm);
  height: var(--ui-size-sm);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ui-space-1);
  padding: 0 var(--ui-space-1-5);
  border: var(--ui-stroke-thin) solid transparent; border-radius: var(--ui-radius-control);
  background: transparent; color: var(--ui-text-secondary);
  font: var(--fw-medium) var(--fs-caption)/var(--lh-none) var(--app-font); cursor: pointer;
  transition: background-color var(--ui-duration-fast) var(--ui-ease),
              color var(--ui-duration-fast) var(--ui-ease);
}
.notics-create-btn:hover, .notics-create-btn[aria-expanded="true"] {
  border-color: transparent;
  background: var(--ui-hover);
  color: var(--ui-text-primary);
}
/* Nút tạo Dự án/Nhóm/Hạng mục trên header Notebook: nút PHỤ chỉ icon "thư mục +",
   không viền — màn hình chỉ còn một hành động chính là "+ Ghi chú" (BA 2026-10-08
   bớt nút trùng nhấn; 2026-10-09 bớt chữ). Vuông, cùng chiều cao nút mở Project. */
.topbar .notics-create-btn {
  width: var(--ui-control-h-toolbar-dense);
  height: var(--ui-control-h-toolbar-dense);
  min-height: var(--ui-control-h-toolbar-dense);
  padding: 0;
  border-color: transparent;
  -webkit-app-region: no-drag;
}
.notics-create-menu {
  position: absolute; top: calc(100% + var(--ui-space-1)); right: 0;
  width: min(var(--dt-dimension-layout-240), calc(100vw - var(--ui-space-6))); padding: var(--ui-space-1);
  border: var(--ui-stroke-thin) solid var(--stroke); border-radius: var(--ui-radius-panel);
  background: var(--ux-overlay); box-shadow: var(--elev-3);
  z-index: calc(var(--layer-popover) + 1);
}
.notics-create-menu.is-portaled { position: fixed; right: auto; -webkit-app-region: no-drag; }
.notics-create-menu button {
  width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: var(--ui-space-px);
  padding: var(--ui-space-2) var(--ui-space-2); border: 0; border-radius: var(--ui-radius-control);
  background: transparent; color: var(--ui-text-primary); text-align: left; cursor: pointer;
}
.notics-create-menu button:hover, .notics-create-menu button:focus-visible { outline: none; background: var(--ux-hover); }
.notics-create-menu button:disabled { cursor: not-allowed; opacity: .55; }
.notics-create-menu strong { font-size: var(--fs-body); font-weight: var(--fw-medium); }
.notics-create-menu small { color: var(--ui-text-muted); font-size: var(--fs-caption); }
.notics-tree { flex: 1 1 auto; min-height: 0; padding: var(--ui-space-1) var(--ui-space-2); }
.notics-tree-group { margin-bottom: var(--ui-space-0-5); }
/* Hàng dự án PHẲNG kiểu sidebar (Notion/Linear) — không vạch màu xé nhỏ,
   bo góc tròn nhẹ theo token. Nền chỉ hiện khi hover/active. */
.notics-tree-project {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--ui-space-1-5);
  padding: 0 var(--ui-space-2);
  min-height: var(--ui-list-row-dense);
  height: var(--ui-list-row-dense);
  margin-bottom: var(--ui-space-px);
  border: none;
  border-radius: var(--ui-radius-control);
  background: transparent;
  cursor: pointer;
  transition-property: var(--tr-ui); transition-timing-function: var(--ui-ease); transition-duration: var(--ui-duration-fast);
}
.notics-tree-project:hover {
  background: var(--ux-hover);
}
.notics-tree-project.is-active {
  background: var(--ux-active);
}
.notics-tree-caret {
  width: var(--ui-control-h-compact);
  height: var(--ui-control-h-compact);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--ui-text-muted);
  cursor: pointer;
  padding: 0;
  transition: transform var(--ui-duration-standard) var(--ui-ease), color var(--ui-duration-fast) var(--ui-ease);
  flex: 0 0 auto;
}
.notics-tree-caret:hover {
  color: var(--ui-accent);
  background: rgba(var(--ink), 0.08);
  border-radius: var(--ui-radius-control);
}
.notics-tree-caret.is-expanded {
  transform: rotate(90deg);
  color: var(--ui-text-primary);
}
.notics-project-dot {
  width: var(--ui-space-2);
  height: var(--ui-space-2);
  flex: 0 0 auto;
  border-radius: var(--ui-radius-circle);
  background: var(--notics-accent);
}
.notics-project-label {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-px);
}
.notics-project-label strong {
  /* Cùng vai với .ws-item-title (tên dự án ở QuickNote/Painting) — một vai,
     một hệ chữ: body-sm + medium. */
  font-size: var(--fs-body);
  /* Chữ thường như NavigationView Windows 11 / Notion, KỂ CẢ mục đang chọn (BA 12/10/2026:
     đậm lên khi chọn làm chữ giãn rộng → "bấm vào chữ bị chạy"). Đang chọn = nền + màu chữ chính. */
  font-weight: var(--fw-normal);
  line-height: var(--lh-body-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ui-text-primary);
}
.notics-project-label small {
  font-size: var(--list-sub-fs);
  color: var(--ui-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Small, elegant item edit and action buttons */
.notics-row-action, .notics-item-edit-btn {
  flex: 0 0 auto;
  width: var(--ui-size-sm);
  height: var(--ui-icon-md);
  border: 0;
  border-radius: var(--ui-radius-control);
  background: transparent;
  color: var(--ui-text-muted);
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition-property: var(--tr-ui); transition-timing-function: var(--ui-ease); transition-duration: var(--ui-duration-standard);
}
.notics-tree-project:hover .notics-row-action,
.notics-tree-project:focus-within .notics-row-action,
.notics-tree-project.is-menu-open .notics-row-action,
.notics-tree-section:hover .notics-item-edit-btn,
.notics-tree-section:focus-within .notics-item-edit-btn {
  display: inline-flex;
}
.notics-row-action:hover, .notics-item-edit-btn:hover {
  background: color-mix(in srgb, var(--ui-accent) 18%, transparent);
  color: var(--ui-accent);
  transform: none;
}

/* Danh sách dự án của một nhóm "Dự án"/"Nhóm" — trước đây caret của heading
   vẽ lại TOÀN CÂY để thêm/bớt khối này, khiến mọi heading/dự án/hạng mục
   khác giật/nhảy vị trí dù không liên quan (BA báo giật 2026-09-22, vòng 2).
   toggleTreeGroup() giờ chỉ thêm/bớt đúng khối .notics-tree-group-list này. */
.notics-tree-group-list { display: flex; flex-direction: column; }

/* Hiệu ứng xuất hiện nhẹ khi MỞ một dự án/nhóm (không áp cho lúc thu gọn —
   BA chỉ báo giật lúc "hiển thị thêm item", không phải lúc ẩn bớt). Áp cho cả
   khối hạng mục con của dự án lẫn khối danh sách dự án của nhóm. */
@keyframes notics-tree-enter {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: translateY(0); }
}
.notics-tree-children--entering,
.notics-tree-group-list--entering {
  animation: notics-tree-enter var(--ui-duration-standard) var(--ui-ease);
}

/* Hạng mục xếp thành lưới: mỗi hàng chứa 2–3 thẻ tùy bề rộng cột Dự án
   (auto-fill co giãn — cột hẹp thì về 1, kéo rộng ra thì 3). Gọn chiều dọc
   hơn hẳn so với danh sách một cột cũ. */
.notics-tree-children {
  /* Cây thật: hạng mục xếp DỌC, thụt vào dưới dự án cha, có vạch dẫn bên trái
     (giống file explorer). Trước đây là lưới chip nhiều cột — bỏ khung thẻ thì
     chip trôi ngang trông như chữ rời. */
  margin: var(--ui-space-px) 0 var(--ui-space-1-5) var(--ui-space-2);
  padding-left: var(--ui-space-2);
  border-left: var(--ui-resizer-line) solid var(--ux-divider);
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-px);
}
.notics-tree-hint { margin: var(--ui-space-1) var(--ui-space-1-5); }
/* Thẻ hóa hạng mục: cùng ngôn ngữ với thẻ dự án ở trên (viền + bo góc + nền
   trung tính) nhưng nhỏ và nhẹ hơn — hạng mục là cấp con, không cần nổi bật
   bằng dự án cha. */
.notics-tree-section {
  display: flex;
  align-items: center;
  gap: var(--ui-space-1);
  padding: var(--ui-space-0-5) var(--ui-space-2);
  min-height: var(--ui-size-dense);
  height: var(--ui-size-dense);
  min-width: 0;
  border: none;
  border-radius: var(--ui-radius-control);
  background: transparent;
  cursor: pointer;
  font-size: var(--fs-body);
  color: var(--ui-text-secondary);
  transition-property: var(--tr-ui); transition-timing-function: var(--ui-ease); transition-duration: var(--ui-duration-fast);
  position: relative;
}
.notics-tree-section:hover {
  background: var(--ux-hover);
  color: var(--ui-text-primary);
}
.notics-tree-section.is-active {
  background: var(--ux-active);
  color: var(--ui-text-primary);
}
.notics-tree-section-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Hạng mục chưa có ghi chú (BA 2026-10-08): vẫn hiện nhưng lùi về chữ mờ; rê/chọn
   thì về màu thường. Dùng màu chữ token, không hạ opacity (ARS-1). */
.notics-tree-section.is-empty:not(.is-active):not(:hover) .notics-tree-section-name {
  color: var(--ui-text-muted);
}
/* Slot đuôi của thẻ hạng mục — bề rộng KHÔNG đổi giữa trạng thái thường và
   hover: badge số và nút ⋯ chồng lên nhau trong cùng ô 24px. Nhờ vậy phần
   tên không co giãn, thẻ đứng yên khi rê chuột vào để bấm. */
.notics-tree-tail {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: var(--ui-control-h-compact);
  height: var(--ui-control-h-compact);
}
.notics-tree-section--virtual .notics-tree-tail {
  min-width: 0;
}
.notics-tree-count {
  /* Chữ số mờ trần, căn phải (kiểu Todoist/Notion) — bỏ pill để hàng phẳng. */
  flex: 0 0 auto;
  font-size: var(--list-sub-fs);
  font-weight: var(--fw-normal);
  color: var(--ui-text-muted);
  min-width: 1.25em;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  text-align: right;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  box-sizing: border-box;
  transition-property: var(--tr-ui); transition-timing-function: var(--ui-ease); transition-duration: var(--ui-duration-fast);
}
.notics-tree-count:empty {
  display: none;
}
/* Cây không số đếm (BA 10/10/2026, chuẩn hóa một giao diện với cây AntiNote — bỏ cả số
   ở QuickNote/hàng đang chọn của lượt Thoáng–Gọn trước). visibility (không display) để
   ô đuôi giữ chỗ cho nút ⋯ khi rê, hàng không xô. */
.notics-tree-section .notics-tree-count,
.notics-tree-heading .notics-tree-count { visibility: hidden; }
/* Khổ đọc (mặc định bật, AT-UI Rhythm 10/10/2026 — noticsNoteMenu.js): dòng tối đa
   --ui-reading-measure (720 / Lớn 900); "Mở rộng toàn khung" trong menu ⋯ tắt. BÁM TRÁI
   (BA 11/10/2026, thay căn giữa X6): chữ bắt đầu đúng lề trang, thẳng một mép với thanh
   công cụ/đếm từ; khung rộng thì phần thừa dồn sang phải (kiểu Evernote/OneNote). */
:is(#noticsEditorWrap, #pnpEditorWrap).is-reading-measure :is(#noticsEditor > .ql-editor, #noticsTitleField, #pnpEditor > .ql-editor, #pnpTitleField) {
  /* width 100% bắt buộc: trang soạn là flex cột, margin tự động không có width làm ô
     rỗng (ql-blank) co về rộng 0 — không bấm/gõ được vào ghi chú mới. */
  width: 100%;
  max-width: var(--ui-reading-measure);
  margin-inline: 0 auto;
}
.notics-tree-actions {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ui-space-0-5);
  opacity: 0;
  pointer-events: none;
}
.notics-tree-section:hover .notics-tree-actions,
.notics-tree-section:focus-within .notics-tree-actions,
.notics-tree-section.is-menu-open .notics-tree-actions {
  opacity: 1;
  pointer-events: auto;
}
/* Ẩn badge số bằng opacity (KHÔNG display:none) để nó vẫn giữ chỗ — đây
   chính là chỗ trước kia gây giật layout. */
.notics-tree-section:hover .notics-tree-count,
.notics-tree-section:focus-within .notics-tree-count,
.notics-tree-section.is-menu-open .notics-tree-count {
  opacity: 0;
}
.notics-tree-more-btn {
  flex: 0 0 auto;
  width: var(--ui-control-h-compact);
  height: var(--ui-control-h-compact);
  border: 0;
  border-radius: var(--ui-radius-control);
  background: transparent;
  color: var(--ui-text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition-property: var(--tr-ui);
  transition-timing-function: var(--ui-ease);
  transition-duration: var(--ui-duration-fast);
}
.notics-tree-more-btn:hover,
.notics-tree-more-btn[aria-expanded="true"] {
  background: color-mix(in srgb, var(--ui-accent) 18%, transparent);
  color: var(--ui-accent);
}

/* Drag & Drop indicators for Notics Tree (Projects and Sections) */
.notics-tree-project.is-dragging,
.notics-tree-section.is-dragging {
  opacity: 0.4;
}
.notics-tree-group.is-group-dragging {
  opacity: 0.5;
}
.notics-tree-project.drop-target-before,
.notics-tree-section.drop-target-before {
  position: relative;
}
.notics-tree-project.drop-target-before::before,
.notics-tree-section.drop-target-before::before {
  content: '';
  position: absolute;
  top: calc(-1 * var(--ui-space-0-5));
  left: 0;
  right: 0;
  height: var(--ui-space-0-5);
  background: var(--ui-accent);
  border-radius: var(--ui-radius-xs);
  box-shadow: 0 0 4px var(--ui-accent); /* audit-keep: quầng sáng màu trạng thái (glow), không phải bậc độ nổi */
  pointer-events: none;
  z-index: var(--ui-layer-pane);
}
.notics-tree-project.drop-target-after,
.notics-tree-section.drop-target-after {
  position: relative;
}
.notics-tree-project.drop-target-after::after,
.notics-tree-section.drop-target-after::after {
  content: '';
  position: absolute;
  bottom: calc(-1 * var(--ui-space-0-5));
  left: 0;
  right: 0;
  height: var(--ui-space-0-5);
  background: var(--ui-accent);
  border-radius: var(--ui-radius-xs);
  box-shadow: 0 0 4px var(--ui-accent); /* audit-keep: quầng sáng màu trạng thái (glow), không phải bậc độ nổi */
  pointer-events: none;
  z-index: var(--ui-layer-pane);
}
/* Hạng mục nằm trong lưới ngang → vạch chèn dựng đứng ở mép trái/phải thẻ,
   không phải mép trên/dưới. */
.notics-tree-section.drop-target-before::before {
  top: 0; bottom: 0; left: calc(-1 * var(--ui-space-1)); right: auto;
  width: var(--ui-space-0-5); height: auto;
}
.notics-tree-section.drop-target-after::after {
  top: 0; bottom: 0; right: calc(-1 * var(--ui-space-1)); left: auto;
  width: var(--ui-space-0-5); height: auto;
}

.notics-tree-project.is-drop-target,
.notics-tree-section.is-drop-target {
  outline: var(--ui-stroke-thick) dashed var(--ui-accent);
  outline-offset: calc(-1 * var(--ui-stroke-thick));}

/* Virtual 'Chung' Section — hạ nổi bật bằng màu chữ phụ, không opacity (ARS-1):
   opacity .9 từng kéo số đếm muted trên hàng đang chọn xuống 4.47:1 (< WCAG 1.4.3). */
.notics-tree-section--virtual .notics-tree-section-name {
  color: var(--ui-text-secondary);
}

/* Notics Tree Footer & Archive Button */

/* Archived Projects Right Drawer */
.notics-drawer-overlay {
  z-index: var(--ui-layer-modal);
}
.notics-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--dt-component-drawer-archive-width);
  max-width: 90vw;
  background: var(--ux-overlay);
  border-left: var(--ui-stroke-thin) solid var(--stroke, rgba(var(--ui-white-rgb),0.08));
  box-shadow: -8px 0 32px rgba(var(--ui-shadow-rgb), 0.35); /* audit-keep: bóng riêng của thành phần, không thuộc bậc elevation chuẩn */
  display: flex;
  flex-direction: column;
  transform: translateX(0);
  transition: transform var(--ui-duration-standard) var(--ui-ease);
  z-index: var(--ui-layer-modal);
}
.notics-drawer-overlay.hidden .notics-drawer {
  transform: translateX(100%);
}
.notics-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ui-space-3-5) var(--ui-space-4-5);
  border-bottom: var(--ui-stroke-thin) solid var(--stroke, rgba(var(--ui-white-rgb),0.08));
  background: rgba(var(--ink), 0.02);
}
.notics-drawer-title-wrap {
  display: flex;
  align-items: center;
  gap: var(--ui-space-2);
}
.notics-drawer-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ui-accent);
}
.notics-drawer-title {
  font-size: var(--fs-title);
  font-weight: var(--fw-semibold);
  color: var(--ui-text-primary);
  margin: 0;
}
.notics-drawer-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--ui-space-3-5);
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-2-5);
}

/* Archived Project Card */
.notics-archive-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-3);
  padding: var(--ui-space-3) var(--ui-space-3-5);
  background: rgba(var(--ink), 0.04);
  border: var(--ui-stroke-thin) solid var(--stroke, rgba(var(--ui-white-rgb),0.06));
  border-left: var(--ui-stroke-thicker) solid var(--notics-accent, var(--ui-accent));
  border-radius: var(--ui-radius-control);
  transition-property: var(--tr-ui); transition-timing-function: var(--ui-ease); transition-duration: var(--ui-duration-standard);
}
.notics-archive-card:hover {
  background: rgba(var(--ink), 0.07);
  border-color: var(--stroke, rgba(var(--ui-white-rgb),0.12));
}
.notics-archive-card-info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-1);
}
.notics-archive-card-header {
  display: flex;
  align-items: center;
  gap: var(--ui-space-1-5);
}
.notics-archive-card-header strong {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--ui-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.notics-archive-card-header small {
  font-size: var(--fs-micro);
  color: var(--ui-text-muted);
}
.notics-archive-card-date {
  font-size: var(--fs-caption);
  color: var(--ui-text-muted);
}
.notics-archive-card-actions {
  display: flex;
  align-items: center;
  gap: var(--ui-space-1-5);
  flex: 0 0 auto;
}
.notics-archive-restore-btn {
  padding: var(--ui-space-1) var(--ui-space-2-5);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
}
.notics-archive-delete-btn {
  width: var(--ui-size-sm);
  height: var(--ui-size-sm);
}

/* Notes Master-Detail List (Column 2) */

/* Nút ghim nổi góc trên-phải dòng, hiện khi hover (hoặc luôn hiện nếu đã
   ghim) — cùng khuôn .notespeed-all-card-pin-toggle/.project-note-card-pin-
   toggle: nền đặc + viền (không mờ theo --ink) để icon luôn thấy rõ, không bị
   lỗi "biến mất trên nền tối" như bản đầu tiên đã sửa. */
.notics-note-date,
.project-note-card-date {
  font-size: var(--list-sub-fs);
  color: var(--ui-text-muted);
  order: 99;
  margin-left: auto;
  flex-shrink: 0;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.notics-note-badge, .notics-note-origin {
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  padding: var(--ui-space-px) var(--ui-space-1-5);
  border-radius: var(--dt-dimension-radius-full);
  background: rgba(var(--ink), 0.08);
  color: var(--ui-text-secondary);
}
.notics-note-origin { background: rgba(var(--ui-accent-rgb), 0.16); color: var(--ui-accent); }
.notics-note-path {
  font-size: var(--list-sub-fs);
  color: var(--ui-accent);
  font-weight: var(--fw-semibold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 0 1 auto;
}

/* Editor & Plan (Column 3) */
.notics-col-editor { padding: 0; }
.notics-empty, .notics-antinote-view {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ui-space-6);
}
.notics-empty p {
  margin: 0;
  color: var(--ui-text-muted);
  font-size: var(--fs-body);
  text-align: center;
  max-width: var(--dt-dimension-layout-288);
  line-height: var(--lh-relaxed);
}
.notics-editor-wrap {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: rgb(var(--ui-surface-raised-rgb));
}
.notics-pin-btn {
  width: var(--ui-size-md);
  height: var(--ui-size-md);
  min-width: var(--ui-size-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: var(--ui-radius-control);
  color: var(--ui-text-muted);
  padding: 0;
  transition: color var(--ui-duration-fast) var(--ui-ease), background-color var(--ui-duration-fast) var(--ui-ease), transform var(--ui-duration-fast) var(--ui-ease);
}
.notics-pin-btn:hover {
  color: var(--ui-warning);
  background: rgba(var(--ink), 0.06);
}
.notics-pin-btn[data-pinned="true"] {
  color: var(--ui-warning);
}
.notics-pin-btn:active {
  transform: none;
}
.notics-note-title {
  width: 100%;
  flex: 1 1 auto;
  border: 0;
  background: transparent;
  color: var(--ui-text-primary);
  font-family: inherit;
  font-size: var(--fs-title);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
  padding: 0;
  margin: 0;
}
.notics-note-title:focus { outline: none; }
/* Tiêu đề TRONG TRANG (#noticsTitleField/#pnpTitleField): styles/note-editor-shell.css
   (.note-doc-title-field, dùng chung AntiNote). */

/* Thanh đầu duy nhất: vị trí (trái, co giãn) · thao tác · Mở rộng/Đóng. Ghi chú
   bị khóa/chưa mở (#noticsEditorWrap ẩn) thì ẩn vị trí và thao tác theo nó. */
/* Tạo lớp xếp chồng để bảng chọn màu nền/menu bung từ thanh đầu nổi trên thanh công cụ. */
.notics-doc-header {
  position: relative;
  z-index: var(--ui-layer-header, 20);
  align-items: center;
}
.notics-doc-header > .ui-dialog-controls {
  align-self: center;
  margin-inline-start: 0;
  padding-left: var(--ui-space-2);
}
.notics-doc-location {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--ui-space-2);
}
/* margin-left:auto: cụm thao tác (☆ · ⋯) luôn sát mép phải, cả khi thanh công cụ xuống hàng
   riêng (hàng 1 chỉ còn vị trí + thao tác) — BA 10/10/2026. */
.notics-doc-header > .notics-doc-actions { margin-left: auto; flex-wrap: nowrap; }.notics-col-editor:has(> #noticsEditorWrap.hidden) :is(.notics-doc-location, .notics-doc-actions, #noticsToolbar) { visibility: hidden; }
/* Popup Ghi chú dự án: màn khóa đang hiện thì ẩn thanh công cụ + thao tác (như Notebook). */
.pnp-card:has(> #pnpEditorWrap.hidden) :is(#pnpToolbar, .notics-doc-actions) { visibility: hidden; }
.notics-meta-right {
  display: flex;
  align-items: center;
  gap: var(--ui-space-1);
  margin-left: auto;
  flex-wrap: wrap;
}
.notics-meta-right > .notespeed-bg-control {
  position: relative;
  z-index: var(--ui-layer-popover, 100);
}
/* Nút ghim (sao) giữ công thức .ui-btn + màu vàng khi đã ghim ở @layer modules —
   loại khỏi khối ép màu !important này (GĐ2 đưa sao vào nhóm thao tác). */
.notics-meta-right > :is(button):not(.notics-pin-btn),
.notics-meta-right > .notespeed-bg-control > button.notespeed-bg-btn {
  width: var(--ui-size-sm);
  height: var(--ui-size-sm);
  min-width: var(--ui-size-sm);
  min-height: var(--ui-size-sm);
  max-width: var(--ui-size-sm);
  max-height: var(--ui-size-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ui-radius-control);
  transition: background-color var(--ui-duration-fast) var(--ui-ease),
              color var(--ui-duration-fast) var(--ui-ease);}
.notics-meta-right > :is(button)[hidden],
.notics-meta-right > :is(button).hidden,
.notics-meta-right > .notespeed-bg-control > button.notespeed-bg-btn[hidden] {
  display: none !important;
}
.notics-date-input {
  border: var(--ui-stroke-thin) solid var(--stroke);
  border-radius: var(--ui-radius-control);
  padding: var(--ui-space-1) var(--ui-space-2);
  background: rgba(var(--ui-surface-raised-rgb), 0.9);
  color: var(--ui-text-primary);
  font-family: inherit;
  font-size: var(--fs-caption);
}
.notics-updated-at {
  display: none !important;
}
/* Ô trạng thái lưu 24×24: styles/note-editor-shell.css (.note-doc-status). */
@keyframes notics-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
/* Màu trạng thái lưu, bảng chọn màu nền + ô màu: styles/note-editor-shell.css (dùng chung AntiNote). */

/* Màu nền trên trang soạn + thanh công cụ dải "fill": styles/note-editor-shell.css (.note-doc[data-note-bg] .note-doc-page, .note-doc-toolbar). */
.notics-toolbar .ql-formats { display: flex; align-items: center; gap: var(--ui-space-0-5); }
/* Nhóm nút tách bằng KHE, không vạch (BA 11/10/2026 tối thiểu viền; cùng AntiNote .sticky-toolbar). */
.notics-toolbar .ql-formats + .ql-formats { margin-left: var(--ui-space-2); }

/* Cơ chế nhóm "Định dạng khác" (bung bảng, bày thẳng khi đủ chỗ) dùng chung với
   AntiNote: styles/note-toolbar.css. */
.notics-toolbar button {
  width: var(--ui-editor-toolbar-control);
  height: var(--ui-editor-toolbar-control);
  padding: 0;
  border: 0;
  border-radius: var(--ui-radius-control);
  background: transparent;
  color: var(--ui-text-secondary);
  cursor: pointer;
  font-family: inherit;
  line-height: var(--lh-none);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition-property: var(--tr-ui); transition-timing-function: var(--ui-ease); transition-duration: var(--ui-duration-fast);
}
.notics-toolbar button:hover,
.notics-toolbar button.is-open { background: rgba(var(--ink), 0.08); color: var(--ui-text-primary); }
/* H1/H2/H3 bày thẳng trên toolbar thay cho dropdown "Kiểu" (BA 2026-09-23).
   Vẫn là nút vuông sm như mọi nút khác (chuẩn editorToolbarStandard), chữ
   nhỏ đậm để "H1" vừa ô. */
.notics-heading-group .ql-header {
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
}
.notics-toolbar button.ql-active { background: var(--ui-accent-solid); color: var(--ui-text-on-accent); }
.notics-toolbar select {
  height: var(--ui-control-h-compact);
  border: var(--ui-stroke-thin) solid transparent;
  border-radius: var(--ui-radius-control);
  background: color-mix(in srgb, var(--ui-text-primary) 5%, transparent);
  color: var(--ui-text-primary);
  font-family: inherit;
  font-size: var(--fs-caption);
  padding: 0 var(--ui-space-1);
  cursor: pointer;
  transition: all var(--ui-duration-fast) var(--ui-ease);
}
.notics-toolbar select:hover {
  border-color: transparent;
  background: var(--ui-hover);
}
.notics-editor {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* Lề trang (rộng/hẹp): .note-doc-page ở styles/note-editor-shell.css (chung AntiNote). */
  font-family: var(--app-font);
  /* Không có format size riêng nghĩa là dùng đúng cỡ chữ quản trị đã chọn
     trong Thiết lập ứng dụng. Cỡ cụ thể trong Delta vẫn được Quill ưu tiên. */
  font-size: var(--font-task);
  line-height: var(--lh-normal);
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
  contain: layout;
}
.notics-editor:focus { outline: none; }
.notics-editor .ql-editor {
  position: relative;
  font-family: var(--app-font);
  min-height: 100%;
  color: var(--ui-text-primary);
  counter-reset: list-0 list-1 list-2 list-3;
}
/* App không nạp quill.core.css nên phải tự vẽ placeholder: không có nó, ghi chú
   trống chỉ có ô tiêu đề và người dùng không biết gõ nội dung ở đâu. */
.notics-editor .ql-editor.ql-blank::before {
  content: attr(data-placeholder);
  position: absolute;
  left: 0;
  right: 0;
  color: var(--ui-text-muted);
  pointer-events: none;
}
/* Trước đây selector này chỉ đặt outline-offset mà không tắt outline-style —
   contenteditable của Chromium vẫn vẽ vòng focus mặc định của hệ điều hành
   (màu bám theo accent color của Windows), bị đẩy ra ngoài 3px trông như một
   viền lạ bọc quanh cả vùng soạn thảo. Vùng này đã có .notics-att-img và các
   phần tử con tự lo focus riêng khi cần, nên tắt hẳn ở đây là đúng ý. */
.notics-editor .ql-editor:focus,
.notics-editor .ql-editor:focus-visible {
  outline: none;
}
/* Bullet/numbered/checklist — Quill chỉ tạo attribute data-list, phần hiển thị
   (dấu chấm, số thứ tự, ô vuông check) hoàn toàn do CSS tự viết đảm nhiệm
   (app không nạp quill.core.css), giống hệt today-note-editor/linked-note-editor. */
.notics-editor .ql-editor :is(p, ol, ul) { margin: 0 0 .12em; padding: 0; }
/* Dấu đầu dòng, số thứ tự theo cấp, thụt lề .ql-indent-N và ô checklist: dùng chung
   với AntiNote ở styles/note-content.css (BA 2026-10-07). */

/* Zoom chỉ tác động nội dung tài liệu: đặt font-size gốc trên .notics-editor
   (KHÔNG dùng transform:scale — sẽ làm lệch vị trí con trỏ/selection của
   Quill so với điểm click chuột). Menu trái, danh sách note, toolbar chính,
   header ứng dụng đều ở ngoài .notics-editor nên không bị ảnh hưởng.
   Khung thu phóng (.note-doc-zoom) ở styles/note-editor-shell.css. */
/* Nút −/100%/+ là .ui-btn nhẹ sm (GĐ F 01/10/2026); dấu −/+ là ký tự nên giữ cỡ body (modules). */
#noticsZoomResetBtn { min-width: var(--ui-size-lg); font-variant-numeric: tabular-nums; }

/* Ảnh đính kèm (attachment blot) */
antinote-att {
  display: block;
  position: relative;
  max-width: none;
  margin: var(--ui-space-1-5) 0;
  line-height: 0;
}
antinote-att[data-align="left"] { text-align: left; }
antinote-att[data-align="center"] { text-align: center; }
antinote-att[data-align="right"] { text-align: right; }
.notics-att-img {
  width: calc(var(--att-w, min(var(--att-iw, 100%), 100%)) * var(--notics-zoom-factor, 1));
  max-width: none;
  height: auto;
  border-radius: var(--ui-radius-control);
  cursor: pointer;
  vertical-align: bottom;
  background: rgba(var(--ink), 0.05);
}
/* Trình duyệt tô xanh cả ảnh khi nó nằm trong vùng chọn native (do
   quill.setSelection(index, 1) ở richEditorAttachments.js giữ để Delete/
   Backspace bằng phím vẫn xóa được ảnh) — chặn màu tô, chỉ để outline
   .is-att-selected bên dưới làm dấu hiệu chọn. Ảnh nằm trong vùng bôi đen nhiều
   phần tử (Ctrl+A, kéo chọn qua ảnh — .is-att-in-range do
   clipboardAttachmentImages.js gắn) thì để trình duyệt tô như chữ, cho thấy
   ảnh cũng sẽ được copy (BA 2026-10-12). */
antinote-att:not(.is-att-in-range) .notics-att-img::selection { background: transparent; }
antinote-att.is-att-selected .notics-att-img {
  outline: var(--ui-stroke-thick) solid var(--ui-accent);
  outline-offset: var(--ui-stroke-thick);
}
/* Ảnh chưa có trên máy này (đang chờ đồng bộ): giấu icon ảnh vỡ, giữ khung
   theo kích thước gốc đã lưu (--att-iw/ih) và nói rõ trạng thái. */
antinote-att.is-att-loading { min-height: var(--ui-size-lg); }
antinote-att.is-att-loading .notics-att-img { visibility: hidden; }
antinote-att.is-att-loading::after {
  content: "Ảnh chưa có trên máy này — đang chờ đồng bộ";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--ui-space-2);
  border: var(--ui-stroke-thin) dashed var(--ux-border);
  border-radius: var(--ui-radius-control);
  background: var(--ux-sunken);
  color: var(--ui-text-muted);
  font-size: var(--fs-caption);
  line-height: var(--lh-normal);
  text-align: center;
}

/* Overlay kéo-resize + toolbar nổi khi chọn ảnh — 1 div dùng chung, định vị
   lại bằng JS mỗi lần chọn/scroll thay vì tạo mới mỗi lần (đỡ layout thrash
   khi note có nhiều ảnh). */
.notics-att-resize-layer {
  position: fixed;
  z-index: var(--ui-layer-dropdown);
  pointer-events: none;
}
/* Tạm ẩn trong lúc cuộn — xem onAttScroll() ở richEditorAttachments.js. */
.notics-att-resize-layer.is-scroll-hidden { visibility: hidden; }
.notics-att-handle {
  position: absolute;
  width: var(--ui-space-2-5);
  height: var(--ui-space-2-5);
  background: var(--ui-accent);
  border: var(--ui-stroke-thick) solid rgb(var(--ui-surface-raised-rgb));
  border-radius: var(--ui-radius-circle);
  pointer-events: auto;
  cursor: nwse-resize;
}
.notics-att-handle[data-corner="nw"] { top: calc(-1 * var(--ui-space-1)); left: calc(-1 * var(--ui-space-1)); cursor: nwse-resize; }
.notics-att-handle[data-corner="ne"] { top: calc(-1 * var(--ui-space-1)); right: calc(-1 * var(--ui-space-1)); cursor: nesw-resize; }
.notics-att-handle[data-corner="sw"] { bottom: calc(-1 * var(--ui-space-1)); left: calc(-1 * var(--ui-space-1)); cursor: nesw-resize; }
.notics-att-handle[data-corner="se"] { bottom: calc(-1 * var(--ui-space-1)); right: calc(-1 * var(--ui-space-1)); cursor: nwse-resize; }
.notics-att-toolbar {
  position: absolute;
  top: calc(-1 * var(--ui-space-8));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--ui-space-0-5);
  padding: var(--ui-space-1);
  background: rgb(var(--ui-surface-raised-rgb));
  border: var(--ui-stroke-thin) solid var(--stroke);
  border-radius: var(--ui-radius-control);
  box-shadow: var(--elev-3);
  pointer-events: auto;
  white-space: nowrap;
}
.notics-att-toolbar button {
  width: var(--ui-control-h-compact);
  height: var(--ui-control-h-compact);
  padding: 0;
  border: 0;
  border-radius: var(--ui-radius-control);
  background: transparent;
  color: var(--ui-text-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.notics-att-toolbar button:hover { background: rgba(var(--ink), 0.08); color: var(--ui-text-primary); }
.notics-att-toolbar button.is-active { background: var(--ui-accent-solid); color: var(--ui-text-on-accent); }
.notics-att-toolbar .notics-att-toolbar-sep { width: var(--ui-resizer-line); height: var(--ui-icon-sm); background: var(--stroke); margin: 0 var(--ui-space-0-5); }

/* Lightbox xem ảnh lớn */
.notics-att-lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--ui-layer-modal);
  align-items: center;
  justify-content: center;
  background: rgba(var(--ui-black-rgb), 0.82);
  cursor: zoom-out;
}
/* [hidden] mặc định có display:none trong UA stylesheet, nhưng "display: flex"
   ở trên cùng specificity (1 class) nên thắng theo thứ tự nạp CSS — phải khai
   báo display ở đây thay vì rule gốc, không thì .hidden=true không ẩn được gì. */
.notics-att-lightbox:not([hidden]) { display: flex; }
.notics-att-lightbox img {
  max-width: 90vw;
  max-height: 90vh;
  border-radius: var(--ui-radius-control);
  box-shadow: var(--elev-4);
  cursor: default;
}
.notics-att-lightbox-close {
  position: absolute;
  top: var(--ui-space-4-5);
  right: var(--ui-space-4-5);
  width: var(--ui-size-lg); /* --ui-control-h-spacious chưa từng tồn tại */
  height: var(--ui-size-lg);
  border-radius: var(--ui-radius-circle);
  border: 0;
  background: rgba(var(--ui-white-rgb), 0.12);
  color: var(--ui-text-on-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.notics-att-lightbox-close:hover { background: rgba(var(--ui-white-rgb), 0.22); }
.notics-editor.is-drag-over { outline: var(--ui-stroke-thick) dashed var(--ui-accent); outline-offset: calc(-1 * var(--ui-space-2)); }

/* Bảng — Quill chỉ tạo <table><tbody><tr><td>, không có viền/padding mặc
   định (app không nạp quill.core.css) nên phải tự viết toàn bộ hiển thị. */
.notics-editor .ql-editor table,
.project-weekly-editor .ql-editor table {
  border-collapse: collapse;
  margin: var(--ui-space-2) 0;
  max-width: 100%;
}
.notics-editor .ql-editor table td,
.project-weekly-editor .ql-editor table td {
  border: var(--ui-stroke-thin) solid light-dark(var(--stroke), var(--ux-border));
  padding: var(--ui-space-1-5) var(--ui-space-2-5);
  min-width: var(--dt-dimension-layout-64);
  vertical-align: top;
}
.notics-editor .ql-editor table tr:first-child td,
.project-weekly-editor .ql-editor table tr:first-child td { background: rgba(var(--ink), 0.03); }

/* Lưới chọn nhanh khi chèn bảng */
.notics-table-grid {
  position: fixed;
  z-index: var(--ui-layer-popover);
  padding: var(--ui-space-2);
  background: rgb(var(--ui-surface-raised-rgb));
  border: var(--ui-stroke-thin) solid var(--stroke);
  border-radius: var(--ui-radius-control);
  box-shadow: var(--elev-3);
}
.notics-table-grid-label { font-size: var(--fs-caption); color: var(--ui-text-muted); text-align: center; margin-bottom: var(--ui-space-1-5); }
.notics-table-grid-cells { display: grid; gap: var(--ui-space-0-5); }
.notics-table-grid-cell {
  width: var(--ui-icon-sm); height: var(--ui-icon-sm);
  border: var(--ui-stroke-thin) solid var(--stroke);
  border-radius: var(--ui-radius-xs);
  background: rgba(var(--ink), 0.03);
  cursor: pointer;
}
.notics-table-grid-cell.is-active { background: var(--ui-accent); border-color: var(--ui-accent); }

/* Toolbar nổi trên bảng — dùng lại style .notics-att-toolbar, chỉ khác vị trí.
   z-index bắt buộc phải khai báo riêng: overlay ảnh nằm bên trong
   .notics-att-resize-layer (z-index:40) nên "thừa hưởng" đúng tầng, còn
   toolbar bảng này gắn thẳng vào body — không có z-index riêng thì bị chính
   .notics-page (z-index:1, tạo stacking context riêng) vẽ đè lên trên. */
.notics-table-ctx-toolbar { position: fixed; z-index: var(--ui-layer-popover); transform: none; left: 0; top: 0; }

/* Menu chuột phải cho Notics/NoteSpeed. Gắn vào body nên phải có tầng riêng
   cao hơn editor nhưng thấp hơn modal, và tự giới hạn độ rộng để không tràn
   trên cửa sổ hẹp. */
.rich-editor-context-menu {
  position: fixed; z-index: var(--ui-layer-popover); width: min(var(--dt-dimension-layout-256), calc(100vw - var(--ui-space-5))); padding: var(--ui-space-1);
  border: var(--ui-stroke-thin) solid var(--stroke); border-radius: var(--ui-radius-control); background: rgb(var(--ui-surface-raised-rgb));
  box-shadow: var(--elev-4); color: var(--ui-text-primary);
}
.rich-editor-context-menu button {
  width: 100%; min-height: var(--ui-size-md); display: flex; align-items: center; gap: var(--ui-space-3); padding: var(--ui-space-1-5) var(--ui-space-2);
  border: 0; border-radius: var(--ui-radius-control); background: transparent; color: inherit; font: var(--fw-semibold) var(--fs-body)/var(--lh-tight) var(--app-font);
  text-align: left; cursor: pointer;
}
.rich-editor-context-icon { width: var(--ui-icon-sm); display: inline-flex; justify-content: center; flex: 0 0 auto; color: var(--ui-text-muted); }
.rich-editor-context-menu button:hover, .rich-editor-context-menu button:focus-visible { background: color-mix(in srgb, var(--ui-accent) 10%, transparent); outline: none; }
.rich-editor-context-menu kbd { margin-left: auto; color: var(--ui-text-muted); font: var(--fw-medium) var(--fs-micro)/var(--lh-none) var(--app-font); }
.rich-editor-context-title { padding: var(--ui-space-1) var(--ui-space-2) var(--ui-space-1); color: var(--ui-text-muted); font: var(--fw-overline) var(--fs-caption)/var(--lh-overline) var(--app-font); letter-spacing: var(--ls-overline); }
.rich-editor-context-separator { height: var(--ui-resizer-line); margin: var(--ui-space-1) var(--ui-space-1); background: var(--stroke); }
.rich-editor-context-arrow { margin-left: auto; color: var(--ui-text-muted); font-size: var(--fs-title-lg); line-height: 10px; }

/* Overlay kéo giãn cột — không đụng DOM bên trong <td>, chỉ set style.width
   trực tiếp trên phần tử td qua JS, tránh Quill optimize() dọn nhầm. */
.notics-table-col-layer { position: fixed; z-index: var(--ui-layer-dropdown); pointer-events: none; }
.notics-table-col-handle {
  position: absolute;
  width: var(--ui-space-2);
  margin-left: calc(-1 * var(--ui-space-1));
  cursor: col-resize;
  pointer-events: auto;
}
.notics-table-col-handle:hover { background: color-mix(in srgb, var(--ui-accent) 35%, transparent); }

/* ==================================================================
   Khung soạn thảo Notics — ribbon ẩn/hiện, tìm trong ghi chú, thanh
   trạng thái, thẻ tệp đính kèm, popover màu/liên kết, menu ghi chú.
   ================================================================== */

/* .notics-editor-stage bọc quanh vùng soạn thảo để thanh tìm kiếm bám dính
   phía trên nội dung. Nó phải tự là flex container và nhận flex:1 từ
   .notics-editor-wrap, nếu không #noticsEditor mất chiều cao và hết cuộn. */
.notics-editor-stage {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Thân editor: mục lục + #noticsEditor. Hàng flex để mục lục dạng cột nằm
   bên trái; position:relative để dạng popover neo góc trái trên. data-outline
   (none | popover | column) do richEditorOutline.js đặt trên .notics-editor-wrap. */
.notics-editor-body {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  display: flex;
}
.notics-editor-body > .notics-editor { min-width: 0; }
/* Trang soạn là một thẻ bo góc như thẻ ngày ở trang chủ (BA 2026-09-23): căn lề
   trái/phải thẳng hàng với thanh công cụ (--ui-space-4), chừa đáy trước thanh
   trạng thái; cột mục lục (nếu có) nằm ngoài thẻ, cách một khe. */
/* Thân + thẻ trang soạn: styles/note-editor-shell.css (.note-doc-body/.note-doc-page). */
.notics-outline {
  position: absolute;
  top: var(--ui-space-2);
  left: var(--ui-space-3);
  z-index: var(--ui-layer-dropdown);
  box-sizing: border-box;
  width: min(40em, calc(100% - 2 * var(--ui-space-3)));
  max-height: calc(100% - 2 * var(--ui-space-2));
  overflow-y: auto;
  padding: var(--ui-space-1);
  border: var(--ui-stroke-thin) solid var(--stroke);
  border-radius: var(--ui-radius-panel);
  background: rgb(var(--ui-surface-raised-rgb));
  box-shadow: var(--ui-elevation-3);
}
.notics-outline[hidden] { display: none; }
.notics-editor-wrap[data-outline="column"] .notics-outline {
  position: static;
  /* BA 2026-09-27: kích thước CỐ ĐỊNH thay vì tỉ lệ theo bề rộng popup (từng
     là min(26%, 20em)) — cột đổi bề rộng theo cửa sổ khiến mỗi lần bấm mở/đóng
     mục lục là một lượng dịch chuyển khác nhau, không "chuẩn hóa". 20em từng
     là mức trần cũ (BA 2026-09-23 lần 2), nay dùng luôn làm mức cố định duy
     nhất — panel chỉ ở dạng "column" khi vùng soạn thảo đã đủ rộng (≥48em,
     xem columnMinEm ở notics.js) nên 20em luôn còn dư chỗ cho nội dung. Mục
     dài vẫn cắt "…" và có tooltip. Đệm phải để chữ không sát thẻ trang. */
  flex: 0 0 var(--notics-outline-w, 20em);
  min-width: 0;
  width: auto;
  max-height: none;
  padding: var(--ui-space-2) var(--ui-space-3) var(--ui-space-2) 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
/* Thanh kéo đổi độ rộng cột mục lục (BA 2026-09-29). Chỉ hiện khi mục lục đang
   là cột và không bị ẩn; nằm giữa cột và thẻ trang (giữa khe gap). Bề rộng cột
   lưu ở --notics-outline-w trên .notics-editor-body (notics.js, bindPaneResizer). */
.notics-outline-resizer { display: none; }
.notics-editor-wrap[data-outline="column"][data-outline-collapsed="false"] .notics-outline-resizer {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--ui-space-4) + var(--notics-outline-w, 20em) + var(--ui-space-3) / 2 - var(--ui-resizer-hit) / 2);
  cursor: col-resize;
  z-index: var(--ui-layer-dropdown);
}
/* Lề PHẢI vùng soạn = đúng bề rộng cột mục lục đang hiện (BA 2026-09-29): nội
   dung gọn lại, cân đối với cột bên trái; lề trái giữ cố định để chữ không sát
   cột mục lục. Mục lục ẩn/popover thì về lề cố định hai bên. */
.notics-editor-wrap[data-outline="column"][data-outline-collapsed="false"] .notics-editor-body > .notics-editor {
  padding-right: var(--notics-outline-w, 20em);
}
/* Đầu mục lục: nhãn "Mục lục" + nút tìm trong ghi chú + nút ẩn cột. */
.notics-outline .rich-outline-head {
  display: flex;
  align-items: center;
  gap: var(--ui-space-0-5);
  padding: 0 0 var(--ui-space-1-5) var(--ui-space-2);
  margin-bottom: var(--ui-space-1);
  /* Không kẻ dưới nhãn "Mục lục" (BA 2026-10-08 bớt đường kẻ): nhãn mờ đủ tách. */
  border-bottom: 0;
}
/* Nhãn chữ thường mờ (BA 2026-10-09: bớt chữ HOA gây nặng mắt); nút tìm/ẩn cột
   chỉ hiện khi rê hoặc focus bàn phím (:focus-visible) trong cột mục lục — vị trí giữ nguyên nên không xô hàng. */
.notics-outline .rich-outline-title {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--ui-text-muted);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
}
.notics-outline .rich-outline-action[hidden] { display: none; }
.notics-outline:not(:hover, :has(:focus-visible)) .rich-outline-head .rich-outline-action { visibility: hidden; }
.notics-outline .rich-outline-list { list-style: none; margin: 0; padding: 0; }
.notics-outline .rich-outline-empty {
  margin: 0;
  padding: var(--ui-space-1) var(--ui-space-2);
  color: var(--ui-text-muted);
  font-size: var(--fs-caption);
  line-height: var(--lh-normal);
}
.notics-outline .rich-outline-item {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: var(--ui-size-sm);
  padding: var(--ui-space-0-5) var(--ui-space-2);
  border: 0;
  border-radius: var(--ui-radius-control);
  background: transparent;
  color: var(--ui-text-secondary);
  font: inherit;
  font-size: var(--fs-body);
  line-height: var(--lh-snug);
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--ui-duration-fast) var(--ui-ease), color var(--ui-duration-fast) var(--ui-ease);
}
.notics-outline .rich-outline-item[data-level="1"] { font-weight: var(--fw-semibold); color: var(--ui-text-primary); }
.notics-outline .rich-outline-item[data-level="2"] { padding-left: var(--ui-space-4); }
.notics-outline .rich-outline-item[data-level="3"] { padding-left: var(--ui-space-6); color: var(--ui-text-muted); }
.notics-outline .rich-outline-item:hover { background: var(--ui-hover); color: var(--ui-text-primary); }
/* Mục đang đọc: chữ accent + nền nhạt. Bỏ vạch trái (BA 2026-10-09): trên hàng bo góc
   vạch inset cong theo góc, trông như khung viền "(" quanh mục. */
.notics-outline .rich-outline-item.is-current {
  background: color-mix(in srgb, var(--ui-accent) 10%, transparent);
  color: var(--ui-accent);
}
/* Kéo-thả mục lục (richEditorOutline.js): vạch chèn trên/dưới mục đích. */
.notics-outline .rich-outline-item.is-dragging { background: var(--ui-hover); }
.notics-outline .rich-outline-item.is-drop-before { background: linear-gradient(var(--ui-accent), var(--ui-accent)) top / 100% var(--ui-stroke-thick) no-repeat; }
.notics-outline .rich-outline-item.is-drop-after { background: linear-gradient(var(--ui-accent), var(--ui-accent)) bottom / 100% var(--ui-stroke-thick) no-repeat; }

/* Bớt tín hiệu thường trực (BA 2026-10-09): cụm thu phóng ở 100% chỉ hiện khi rê/focus bàn phím
   vào thanh dưới (đang phóng ≠ 100% thì luôn hiện để biết đang lệch); dấu ✓ "đã lưu"
   chỉ hiện lúc đang lưu/vừa lưu/lỗi — yên thì ẩn (Google Docs). Ô trạng thái đứng
   đầu cụm nút canh phải nên ẩn/hiện không xô các nút còn lại. */
:is(#noticsEditorWrap, #pnpEditorWrap) .note-doc-statusbar:not(:hover, :has(:focus-visible)) .note-doc-zoom.is-default { visibility: hidden; }
#noticsDocActions .note-doc-status:not([data-state="pending"], [data-state="saved"], [data-state="error"]) { display: none; }

.notics-toolbar-spacer { flex: 1 1 auto; }

/* Ẩn ribbon bằng display:none chứ không gỡ khỏi DOM — module toolbar của Quill
   giữ tham chiếu tới container này và các listener gắn trên từng nút. Nút
   ẩn/hiện nằm ở thanh đầu (#noticsToolbarToggleBtn) nên ẩn cả hàng không chừa
   dòng trống mà nút vẫn còn. */
.notics-toolbar.is-collapsed { display: none; }

/* Chế độ tập trung: giấu hai cột bên trái và thanh tiêu đề của ghi chú, chỉ
   chừa lại chữ. Không đụng vào biến trạng thái của sidebar, nên thoát chế độ
   này là mọi thứ trở lại đúng như trước. */
.notics-page.is-focus-mode .notics-col-projects,
.notics-page.is-focus-mode .notics-col-notes,
.notics-page.is-focus-mode .notics-resizer { display: none; }
#noticsEditorModal.is-focus-mode .notics-editor { padding-left: max(var(--ui-space-6), calc((100% - 820px) / 2)); padding-right: max(var(--ui-space-6), calc((100% - 820px) / 2)); } /* audit-keep: chiều rộng dòng đọc/clamp theo viewport, không thuộc thang */

/* ── Dạng xem "Danh sách" (BA 2026-10-07, kiểu OneNote; mặc định) ──────────
   Cây | danh sách ghi chú | nội dung, cùng một trang. notics.js#applyNotesViewLayout
   chuyển #noticsEditorModal vào .notics-body và gắn .is-docked — vẫn đúng khung
   soạn thảo của popup (cùng thanh đầu/thanh công cụ/ô tiêu đề), chỉ không còn là
   lớp phủ. Flex thay grid: cột nào ẩn (thu gọn cây, tập trung) tự nhường chỗ. */
.notics-page[data-notes-view="reading"] .notics-body { display: flex; }
.notics-page[data-notes-view="reading"] .notics-col-projects {
  flex: 0 0 var(--notics-projects-width, var(--ui-rail-w-expanded));
}
/* Vạch mảnh dọc giữa danh sách và khung đọc (BA 11/10/2026: bỏ đi thì trống trải — giữ
   đúng MỘT vạch, cùng AntiNote #noteCardsPane). */
.notics-page[data-notes-view="reading"] .notics-col-notes {
  flex: 0 0 var(--notics-read-list-width, var(--dt-dimension-layout-320));
  border-right: var(--ui-resizer-line) solid var(--ux-divider);
}
.notics-col-notes > #noticsReadListResizer { display: none; }
.notics-page[data-notes-view="reading"] .notics-col-notes > #noticsReadListResizer { display: block; }
#noticsEditorModal.is-docked {
  position: relative;
  inset: auto;
  z-index: auto;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: stretch;
}
#noticsEditorModal.is-docked .notespeed-modal-scrim { display: none; }
/* Lề phải = bề rộng mục lục (cân trang) là cho popup gần kín màn hình. Khung neo
   hẹp hơn: giữ lề cố định như khi mục lục ẩn, để chữ không bị bóp còn vài chữ. */
#noticsEditorModal.is-docked .notics-editor-wrap[data-outline="column"][data-outline-collapsed="false"] .notics-editor-body > .notics-editor {
  padding-right: var(--ui-space-10);
}
#noticsEditorModal.is-docked .notespeed-modal-panel {
  width: 100%;
  height: 100%;
  max-height: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  animation: none;
}
/* Mở rộng ở dạng Danh sách = chế độ tập trung: chỉ ẩn cây + danh sách, giữ
   thanh công cụ (khác "Chế độ tập trung" trong menu ⋯ còn ẩn cả ribbon). */
.notics-page.is-reading-focus .notics-col-projects,
.notics-page.is-reading-focus .notics-col-notes { display: none; }

/* Danh sách ghi chú dạng hàng: tiêu đề 1 dòng + trích 2 dòng + ngày; thẻ đang mở
   tô nền chọn. Dùng lại chính thẻ .notespeed-all-card (bấm/ghim/chọn nhiều/kéo
   ra cây giữ nguyên), chỉ đổi hình. */
.notics-read-list {
  display: flex;
  flex-direction: column;
}
/* Da của hàng (nền/viền/đệm) nằm cuối file: @layer modules + overrides — xem
   "Dạng xem Danh sách — da hàng". */
.notics-read-list .notespeed-all-card-title { -webkit-line-clamp: 1; }
.notics-read-list .notespeed-all-card-snippet {
  overflow: hidden;
  -webkit-line-clamp: 2;
}

/* Hẹp (khung workspace ≤ 820px hoặc shell compact/tight): danh sách → nội dung
   như ứng dụng điện thoại. Đang mở ghi chú thì chỉ còn nội dung; nút Đóng (×)
   trên thanh đầu quay về danh sách. */
@container workspace-layout (max-width: 820px) {
  .notics-page[data-notes-view="reading"][data-has-note] :is(.notics-col-projects, .notics-col-notes) { display: none; }
  .notics-page[data-notes-view="reading"]:not([data-has-note]) #noticsEditorModal.is-docked { display: none; }
  .notics-page[data-notes-view="reading"]:not([data-has-note]) .notics-col-notes { flex: 1 1 0; border-right: 0; }
}
:is(html[data-layout-mode="compact"], html[data-layout-mode="tight"]) .notics-page[data-notes-view="reading"][data-has-note] :is(.notics-col-projects, .notics-col-notes) { display: none; }
:is(html[data-layout-mode="compact"], html[data-layout-mode="tight"]) .notics-page[data-notes-view="reading"]:not([data-has-note]) #noticsEditorModal.is-docked { display: none; }
:is(html[data-layout-mode="compact"], html[data-layout-mode="tight"]) .notics-page[data-notes-view="reading"]:not([data-has-note]) .notics-col-notes { flex: 1 1 0; border-right: 0; }

/* Chưa mở ghi chú (khung đọc cạnh danh sách): nút Mở rộng/Đóng không có gì để
   mở rộng/đóng — ẩn đi nhưng giữ chỗ để thanh đầu không nhảy khi chọn ghi chú
   (báo cáo UX 10/10/2026 §4.3). */
.notics-page:not([data-has-note]) #noticsEditorModal.is-docked .ui-dialog-controls { visibility: hidden; }

/* --- Thanh tìm trong ghi chú --- */
.notics-find-bar {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: var(--ui-space-1-5);
  padding: var(--ui-space-1-5) var(--ui-space-3);
  border-bottom: var(--ui-stroke-thin) solid var(--stroke);
  background: rgba(var(--ui-surface-raised-rgb), 0.96);
}
.notics-find-bar.hidden { display: none; }
.notics-find-icon { display: inline-flex; color: var(--ui-text-muted); }
.notics-find-input {
  flex: 1 1 auto; min-width: 0;
  border: 0; background: transparent; color: var(--ui-text-primary);
  font-family: inherit; font-size: var(--fs-body); padding: var(--ui-space-0-5) 0;
}
.notics-find-input:focus { outline: none; }
.notics-find-count {
  font-size: var(--fs-caption); color: var(--ui-text-muted);
  font-variant-numeric: tabular-nums; min-width: var(--ui-size-md); text-align: right;
}
.notics-find-bar.is-empty .notics-find-count { color: var(--ui-danger, var(--ui-danger)); }

/* Tô sáng kết quả bằng CSS Custom Highlight API: không chèn thẻ nào vào cây
   DOM của Quill nên tài liệu không hề bị coi là đã sửa. */
::highlight(notics-find) { background-color: var(--ui-warning-bg); color: var(--ui-text-primary); }
::highlight(notics-find-active) { background-color: var(--ui-warning); color: var(--ui-text-on-accent); }

/* --- Thanh trạng thái dưới cùng --- */
/* Thanh trạng thái + zoom: styles/note-editor-shell.css (.note-doc-statusbar/.note-doc-zoom). */

/* --- Cảnh báo xung đột đồng bộ --- */
.notics-conflict-bar {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: var(--ui-space-2); flex-wrap: wrap;
  padding: var(--ui-space-2) var(--ui-space-4);
  border-bottom: var(--ui-stroke-thin) solid color-mix(in srgb, var(--ui-warning) 40%, var(--stroke));
  background: color-mix(in srgb, var(--ui-warning) 12%, rgb(var(--ui-surface-raised-rgb)));
  color: var(--ui-text-primary); font-size: var(--fs-caption);
}
.notics-conflict-bar.hidden { display: none; }
.notics-conflict-icon { display: inline-flex; color: var(--ui-warning); }
.notics-conflict-text { flex: 1 1 var(--dt-dimension-layout-208); line-height: var(--lh-normal); }
.notics-conflict-btn {
  border: var(--ui-stroke-thin) solid var(--ui-warning); border-radius: var(--ui-radius-control);
  background: var(--ui-warning); color: var(--ui-text-on-accent);
  font-family: inherit; font-size: var(--fs-caption); padding: var(--ui-space-1) var(--ui-space-2-5); cursor: pointer;
}
.notics-conflict-btn.is-ghost { background: transparent; color: var(--ui-warning); }
.notics-conflict-btn:hover { filter: brightness(1.06); }

/* --- Thẻ tệp đính kèm (blot fileAttachment) --- */
antinote-file { display: block; margin: var(--ui-space-1-5) 0; }
.notics-file-card {
  display: inline-flex; align-items: center; gap: var(--ui-space-2-5);
  max-width: 100%;
  padding: var(--ui-space-2) var(--ui-space-2-5);
  border: var(--ui-stroke-thin) solid var(--stroke); border-radius: var(--ui-radius-panel);
  background: rgba(var(--ink), 0.03);
}
.notics-file-icon {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--ui-size-lg); height: var(--ui-icon-lg); padding: 0 var(--ui-space-1-5);
  border-radius: var(--ui-radius-control); background: var(--ui-accent-solid); color: var(--ui-text-on-accent);
  font-size: var(--fs-micro); font-weight: var(--fw-semibold); letter-spacing: var(--ls-caps);
}
.notics-file-main { display: flex; flex-direction: column; min-width: 0; }
.notics-file-name {
  font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--ui-text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: var(--dt-dimension-layout-320);
}
.notics-file-meta { font-size: var(--fs-caption); color: var(--ui-text-muted); }
.notics-file-actions { display: flex; gap: var(--ui-space-1); flex: 0 0 auto; }
.notics-file-btn {
  border: var(--ui-stroke-thin) solid var(--stroke); border-radius: var(--ui-radius-control);
  background: rgba(var(--ui-surface-raised-rgb), 0.9); color: var(--ui-text-secondary);
  font-family: inherit; font-size: var(--fs-caption); padding: var(--ui-space-0-5) var(--ui-space-2); cursor: pointer;
}
.notics-file-btn:hover { border-color: var(--ui-accent); color: var(--ui-accent); }

/* --- Popover chọn màu --- */
.notics-color-popover, .notics-link-popover, .notics-note-menu, .notics-section-menu {
  position: fixed;
  z-index: calc(var(--layer-modal, 1000) + 100);
  border: var(--ui-stroke-thin) solid var(--stroke); border-radius: var(--ui-radius-panel);
  background: var(--ux-overlay);
  box-shadow: var(--elev-3);
}

:is(.notics-color-popover, .notics-link-popover, .notics-note-menu, .notics-section-menu, .notics-create-menu, .rich-editor-context-menu):not([hidden]):not(.hidden) {
  animation: menuGravityDrop 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards; /* audit-keep: chuyển động biên đạo riêng (keyframes), không thuộc nhịp giao diện chuẩn */
  will-change: transform, opacity;
}
.notics-color-popover { padding: var(--ui-space-2-5) var(--ui-space-3); width: min(var(--dt-dimension-layout-240), calc(100vw - var(--ui-space-6))); box-sizing: border-box; }
.notics-color-title { font-size: var(--fs-micro); font-weight: var(--fw-semibold); letter-spacing: var(--ls-caps-xl); color: var(--ui-text-muted); margin-bottom: var(--ui-space-2); }
/* Ô "bỏ màu": gạch chéo đỏ, quy ước quen thuộc của mọi trình soạn thảo. */

/* --- Popover liên kết --- */
.notics-link-popover { padding: var(--ui-space-2-5) var(--ui-space-3); width: min(var(--dt-dimension-layout-304), calc(100vw - var(--ui-space-8))); }
.notics-link-label { display: block; font-size: var(--fs-micro); font-weight: var(--fw-semibold); letter-spacing: var(--ls-caps); color: var(--ui-text-muted); margin-bottom: var(--ui-space-1); }
.notics-link-input {
  width: 100%; box-sizing: border-box;
  border: var(--ui-stroke-thin) solid var(--stroke); border-radius: var(--ui-radius-control);
  background: rgba(var(--ui-surface-raised-rgb), 0.9); color: var(--ui-text-primary);
  font-family: inherit; font-size: var(--fs-body); padding: var(--ui-space-1) var(--ui-space-2);
}
.notics-link-input:focus { outline: none; border-color: var(--ux-control-border-active); box-shadow: var(--ui-control-ring); }
.notics-link-actions { display: flex; justify-content: flex-end; gap: var(--ui-space-1-5); margin-top: var(--ui-space-2); }

/* --- Menu "⋯" của ghi chú và hạng mục --- */
.notics-btn-note-menu {
  width: var(--ui-control-h-standard);
  height: var(--ui-control-h-standard);
  min-height: var(--ui-control-h-standard);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: var(--ui-stroke-thin) solid var(--stroke, rgba(var(--ink), 0.12));
  background: rgb(var(--ui-surface-raised-rgb));
  color: var(--ui-text-secondary);
  cursor: pointer;
  box-shadow: var(--ui-elevation-1);
  transition: all var(--ui-duration-standard) var(--ui-ease);}
.notics-btn-note-menu:hover {
  background: rgb(var(--ui-surface-fill-rgb));
  border-color: rgba(var(--ui-accent-rgb), 0.4);
  color: var(--ui-accent);
  transform: none;
  box-shadow: 0 2px 6px rgba(var(--ui-accent-rgb), 0.12); /* audit-keep: quầng sáng màu trạng thái (glow), không phải bậc độ nổi */
}
.notics-btn-note-menu:active {
  transform: none;
  box-shadow: none;
}
.notics-btn-note-menu[aria-expanded="true"] {
  background: rgba(var(--ui-accent-rgb), 0.12);
  border-color: var(--ui-accent);
  color: var(--ui-accent);
}
.notics-note-menu { padding: var(--ui-space-1-5); min-width: var(--dt-component-popover-note-menu-min-width); max-width: var(--dt-dimension-layout-304); }
.notics-section-menu { z-index: var(--ui-layer-popover); padding: var(--ui-space-1-5); min-width: var(--dt-component-popover-section-menu-min-width); max-width: var(--dt-dimension-layout-224); }
.notics-note-menu-group {
  font-size: var(--fs-micro); font-weight: var(--fw-semibold); letter-spacing: var(--ls-caps-xl);
  color: var(--ui-text-muted); padding: var(--ui-space-2) var(--ui-space-2) var(--ui-space-1);
}
.notics-note-menu-item, .notics-section-menu-item {
  display: flex; align-items: center; gap: var(--ui-space-2); width: 100%;
  padding: var(--ui-space-1-5) var(--ui-space-2); border: 0; border-radius: var(--ui-radius-control);
  background: transparent; color: var(--ui-text-primary);
  font-family: inherit; font-size: var(--fs-body); text-align: left; cursor: pointer;
  transition: background var(--ui-duration-fast) var(--ui-ease), color var(--ui-duration-fast) var(--ui-ease);
}
.notics-note-menu-item:hover, .notics-section-menu-item:hover { background: rgba(var(--ink), 0.07); }
.notics-note-menu-item.is-danger, .notics-section-menu-item.is-danger {
  color: var(--notics-danger, var(--ui-danger));
}
.notics-note-menu-item.is-danger .notics-note-menu-icon,
.notics-section-menu-item.is-danger .notics-section-menu-icon {
  color: var(--notics-danger, var(--ui-danger));
}
.notics-note-menu-item.is-danger:hover,
.notics-section-menu-item.is-danger:hover {
  background: rgba(var(--notics-danger-rgb), 0.12);
}
.notics-note-menu-icon, .notics-section-menu-icon { display: inline-flex; color: var(--ui-text-muted); flex: 0 0 auto; }
.notics-note-menu-label, .notics-section-menu-label { flex: 1 1 auto; white-space: nowrap; }
.notics-note-menu-hint { font-size: var(--fs-micro); color: var(--ui-text-muted); font-variant-numeric: tabular-nums; }
.notics-section-menu-sep { height: var(--ui-stroke-thin); margin: var(--ui-space-1) var(--ui-space-1-5); background: var(--ui-divider); }
/* Mục chưa dùng được (ghi chú đang khóa): chữ nhạt bằng màu token, không hạ opacity (ARS-1). */
.notics-section-menu-item:disabled { color: var(--ui-text-muted); cursor: not-allowed; }
.notics-section-menu-item:disabled:hover { background: transparent; }
.notics-section-menu-item.is-checked .notics-section-menu-icon { color: var(--ui-accent); }

/* --- Menu chuột phải dùng chung của Notebook (notics/noticsContextMenu.js) --- */
.notics-context-menu {
  max-width: var(--dt-dimension-layout-304);
  max-height: calc(100vh - var(--ui-space-6));
  overflow-y: auto;
}
.notics-context-swatches {
  display: flex; flex-wrap: wrap; gap: var(--ui-space-1-5);
  padding: var(--ui-space-1) var(--ui-space-2) var(--ui-space-1-5);
}
.notics-context-swatches .notics-bg-swatch { width: var(--ui-icon-md); height: var(--ui-icon-md); }
/* Đích đang mở menu: viền nhấn như focus để biết menu đang tác động lên dòng/thẻ nào. */
:is(.notics-page, .notics-drawer-overlay) .is-context-target {
  outline: var(--ui-focus-ring-width) solid color-mix(in srgb, var(--ui-accent) 55%, transparent);
  outline-offset: calc(-1 * var(--ui-focus-ring-width));
}

/* ─────────────────────────────────────────────────────────────
   Thao tác thông minh: bong bóng định dạng · slash menu · bảng lệnh
   (noticsSmartUi.js)
   ───────────────────────────────────────────────────────────── */

/* Bong bóng nổi khi bôi đen chữ.
   z-index trên --layer-modal (1000): popup Ghi chú dự án là .overlay z-1000,
   bong bóng/slash phải nổi trên nó. */
.notics-bubble-toolbar {
  position: fixed;
  z-index: var(--ui-layer-alert);
  display: flex;
  align-items: center;
  gap: var(--ui-space-px);
  padding: var(--ui-space-1);
  border: var(--ui-stroke-thin) solid var(--stroke);
  border-radius: var(--ui-radius-control);
  background: rgb(var(--ui-surface-raised-rgb));
  box-shadow: var(--ui-elevation-3);
}
.notics-bubble-toolbar[hidden] { display: none; }
.notics-bubble-toolbar button {
  min-width: var(--ui-size-sm);
  height: var(--ui-size-sm);
  padding: 0 var(--ui-space-2);
  border: 0;
  border-radius: var(--ui-radius-control);
  background: transparent;
  color: var(--ui-text-secondary);
  font: var(--fw-semibold) var(--fs-body) var(--app-font);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.notics-bubble-toolbar button:hover { background: rgba(var(--ink), 0.08); color: var(--ui-text-primary); }
.notics-bubble-toolbar button.is-on { background: var(--ui-accent-solid); color: var(--ui-text-on-accent); }

/* Slash menu "/" */
.notics-slash-menu {
  position: fixed;
  z-index: var(--ui-layer-alert);
  width: var(--dt-component-popover-command-width);
  max-height: var(--dt-dimension-layout-288);
  overflow-y: auto;
  padding: var(--ui-space-1);
  border: var(--ui-stroke-thin) solid var(--stroke);
  border-radius: var(--ui-radius-panel);
  background: rgb(var(--ui-surface-raised-rgb));
  box-shadow: var(--ui-elevation-3);
}
.notics-slash-menu[hidden] { display: none; }
.notics-slash-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-2-5);
  width: 100%;
  padding: var(--ui-space-2) var(--ui-space-2);
  border: 0;
  border-radius: var(--ui-radius-control);
  background: transparent;
  color: var(--ui-text-primary);
  font: var(--fs-body) var(--app-font);
  text-align: left;
  cursor: pointer;
}
.notics-slash-item small { color: var(--ui-text-muted); font-size: var(--fs-micro); flex: 0 0 auto; }
.notics-slash-item:hover,
.notics-slash-item.is-active { background: color-mix(in srgb, var(--ui-accent) 12%, transparent); }

/* Bảng lệnh Ctrl+Shift+P */
.notics-cmdk-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--ui-layer-system);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
  background: rgba(var(--ui-scrim-rgb), 0.34);
  backdrop-filter: blur(2px);
}
.notics-cmdk-overlay[hidden] { display: none; }
.notics-cmdk {
  width: min(var(--dt-dimension-layout-560), calc(100vw - var(--ui-space-8)));
  max-height: 62vh;
  display: flex;
  flex-direction: column;
  border: var(--ui-stroke-thin) solid var(--stroke);
  border-radius: var(--ui-radius-panel);
  background: var(--ux-overlay);
  box-shadow: var(--ui-elevation-4);
  overflow: hidden;
}
.notics-cmdk-input {
  flex: 0 0 auto;
  height: var(--ui-space-12);
  padding: 0 var(--ui-space-4);
  border: 0;
  border-bottom: var(--ui-stroke-thin) solid var(--stroke);
  background: transparent;
  color: var(--ui-text-primary);
  font: var(--fs-body) var(--app-font);
}
.notics-cmdk-input:focus { outline: none; }
.notics-cmdk-list { flex: 1 1 auto; overflow-y: auto; padding: var(--ui-space-1-5); }
.notics-cmdk-group {
  font-size: var(--fs-micro); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps-xl); color: var(--ui-text-muted);
  padding: var(--ui-space-2) var(--ui-space-2) var(--ui-space-1);
}
.notics-cmdk-item {
  display: flex;
  align-items: center;
  gap: var(--ui-space-2-5);
  width: 100%;
  padding: var(--ui-space-2) var(--ui-space-2);
  border: 0;
  border-radius: var(--ui-radius-control);
  background: transparent;
  color: var(--ui-text-primary);
  font: var(--fs-body) var(--app-font);
  text-align: left;
  cursor: pointer;
}
.notics-cmdk-icon { display: inline-flex; color: var(--ui-text-muted); flex: 0 0 auto; }
.notics-cmdk-label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notics-cmdk-hint { flex: 0 0 auto; color: var(--ui-text-muted); font-size: var(--fs-micro); }
.notics-cmdk-item:hover,
.notics-cmdk-item.is-active { background: color-mix(in srgb, var(--ui-accent) 12%, transparent); }
.notics-cmdk-empty { padding: var(--ui-space-4-5); text-align: center; color: var(--ui-text-muted); font-size: var(--fs-body); }

/* --- Hộp chọn dòng checklist để tạo công việc --- */
.notics-checklist-picker { max-height: var(--dt-dimension-layout-256); overflow-y: auto; display: flex; flex-direction: column; gap: var(--ui-space-0-5); }
.notics-checklist-row {
  display: flex; align-items: flex-start; gap: var(--ui-space-2);
  padding: var(--ui-space-1-5) var(--ui-space-2); border-radius: var(--ui-radius-control);
  font-size: var(--fs-body); line-height: var(--lh-normal); cursor: pointer;
}
.notics-checklist-row:hover { background: rgba(var(--ink), 0.05); }
.notics-checklist-row input { margin-top: var(--ui-space-0-5); flex: 0 0 auto; }

/* --- Định dạng khối mới trong vùng soạn thảo --- */
.notics-editor .ql-editor :is(h1, h2, h3) { font-weight: var(--fw-bold); line-height: var(--lh-snug); }
.notics-editor .ql-editor h1 { font-size: 1.7em; margin: .7em 0 .3em; }
.notics-editor .ql-editor h2 { font-size: 1.38em; margin: .65em 0 .28em; }
.notics-editor .ql-editor h3 { font-size: 1.15em; margin: .6em 0 .25em; }
.notics-editor .ql-editor blockquote {
  margin: .45em 0; padding: .15em 0 .15em var(--ui-space-3);
  border-left: var(--ui-stroke-thicker) solid var(--ui-accent); color: var(--ui-text-secondary);
}
.notics-editor .ql-editor .ql-code-block-container {
  margin: .5em 0; padding: var(--ui-space-2) var(--ui-space-3);
  border: var(--ui-stroke-thin) solid var(--stroke); border-radius: var(--ui-radius-panel);
  background: rgba(var(--ink), 0.05);
  font-family: Consolas, "Courier New", monospace; font-size: .92em;
}
.notics-editor .ql-editor .ql-code-block { white-space: pre-wrap; }
.notics-editor .ql-editor code {
  padding: var(--ui-space-px) var(--ui-space-1); border-radius: var(--ui-radius-control);
  background: rgba(var(--ink), 0.08);
  font-family: Consolas, "Courier New", monospace; font-size: .92em;
}
.notics-editor .ql-editor hr {
  border: 0; border-top: var(--ui-stroke-thin) solid var(--stroke); margin: 1em 0;
}
.notics-editor .ql-editor a { color: var(--ui-accent); text-decoration: underline; cursor: pointer; }

.notics-antinote-card {
  max-width: var(--dt-dimension-layout-440);
  padding: var(--ui-space-4) var(--ui-space-4-5);
  border: var(--ui-stroke-thin) solid var(--stroke);
  border-radius: var(--ui-radius-panel);
  background: rgba(var(--ui-surface-raised-rgb), 0.8);
}
.notics-antinote-eyebrow { font-size: var(--fs-caption); font-weight: var(--fw-overline); letter-spacing: var(--ls-overline); color: var(--ui-accent); }
.notics-antinote-text { margin: var(--ui-space-2) 0 var(--ui-space-1); font-size: var(--fs-body); line-height: var(--lh-relaxed); }
.notics-antinote-meta { margin: 0 0 var(--ui-space-2-5); font-size: var(--fs-caption); color: var(--ui-text-secondary); }
.notics-antinote-hint { margin: 0; font-size: var(--fs-caption); color: var(--ui-text-secondary); line-height: var(--lh-relaxed); }

/* Plan / Gantt Toolbar & Body */
.notics-plan-head { flex: 0 0 auto; }
.notics-plan-toolbar { display: flex; align-items: center; gap: var(--ui-space-2); }
.notics-plan-zoom {
  display: flex;
  border: var(--ui-stroke-thin) solid var(--stroke);
  border-radius: var(--ui-radius-control);
  overflow: hidden;
}
.notics-plan-zoom button {
  border: 0;
  background: transparent;
  padding: var(--ui-space-1) var(--ui-space-2-5);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  color: var(--ui-text-muted);
  cursor: pointer;
  font-family: inherit;
  transition-property: var(--tr-ui); transition-timing-function: var(--ui-ease); transition-duration: var(--ui-duration-fast);
}
.notics-plan-zoom button:hover { background: rgba(var(--ink), 0.08); }
/* Mục chọn của zoom Gantt: "SEGMENTED CHUẨN" (ô nổi trung tính) — GĐ4 Project. */
.notics-plan-body { flex: 1 1 auto; min-height: 0; }
.notics-plan-empty {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ui-space-5);
  color: var(--ui-text-muted);
  font-size: var(--fs-body);
  text-align: center;
  line-height: var(--lh-relaxed);
}

/* ---- Gantt widget (Style 1 Seamless) ---- */
.gantt { display: flex; height: 100%; min-height: 0; --gantt-label-w: 280px; }
.gantt-labels {
  width: var(--gantt-label-w, var(--dt-dimension-layout-288));
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  border-right: var(--ui-stroke-thin) solid var(--stroke);
  overflow: hidden;
  background: rgba(var(--ui-surface-raised-rgb), 0.2);
}
.gantt-label-head {
  flex: 0 0 auto;
  height: var(--gantt-header-h, var(--ui-space-12));
  border-bottom: var(--ui-stroke-thin) solid var(--stroke);
  display: flex;
  align-items: center;
  padding: 0 var(--ui-space-3);
  font-size: var(--fs-caption);
  font-weight: var(--fw-overline);
  line-height: var(--lh-overline);
  color: var(--ui-text-muted);
  background: rgba(var(--ink), 0.035);
}
.gantt-label-rows { flex: 1 1 auto; position: relative; will-change: transform; }
.gantt-label-row {
  height: var(--gantt-row-h, var(--ui-size-md));
  display: flex;
  align-items: center;
  gap: var(--ui-space-1-5);
  padding: 0 var(--ui-space-2) 0 var(--ui-space-3);
  border-bottom: var(--ui-stroke-thin) solid rgba(var(--ink), 0.05);
  font-size: var(--fs-body);
}
.gantt-label-row[data-row-kind="milestone"] { font-weight: var(--fw-semibold); cursor: pointer; color: var(--ui-text-primary); }
.gantt-label-row[data-row-kind="milestone"]:hover { background: rgba(var(--ink), 0.05); }
.gantt-label-row[data-row-kind="task"] { padding-left: var(--ui-space-6); color: var(--ui-text-secondary); cursor: default; }
.gantt-label-row[data-row-kind="task"]:hover { background: rgba(var(--ink), 0.03); color: var(--ui-text-primary); }
.gantt-label-row[data-row-kind="group"] {
  font-weight: var(--fw-semibold);
  color: var(--ui-text-muted);
  font-size: var(--fs-micro);
}
.gantt-label-row.is-drop-target { outline: var(--ui-stroke-thick) dashed var(--ui-accent); outline-offset: calc(-1 * var(--ui-stroke-thick)); }
.gantt-row-caret {
  width: var(--dt-dimension-icon-header);
  height: var(--dt-dimension-icon-header);
  flex: 0 0 auto;
  border: 0;
  border-radius: var(--ui-radius-control);
  background: transparent;
  color: var(--ui-text-muted);
  cursor: pointer;
  line-height: var(--lh-none);
  padding: 0;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--ui-duration-standard) var(--ui-ease), color var(--ui-duration-fast) var(--ui-ease), background-color var(--ui-duration-fast) var(--ui-ease);
}
.gantt-row-caret:hover { color: var(--ui-text-primary); background: rgba(var(--ink), 0.08); }
.gantt-row-caret.is-expanded { transform: rotate(90deg); }
.gantt-row-dot {
  width: var(--ui-space-2);
  height: var(--ui-space-2);
  flex: 0 0 auto;
  border-radius: var(--ui-radius-circle);
  background: var(--notics-accent, var(--ui-accent));
}
.gantt-row-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gantt-row-progress {
  flex: 0 0 auto;
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  color: var(--ui-text-secondary);
  background: rgba(var(--ink), 0.06);
  padding: var(--ui-space-px) var(--ui-space-1-5);
  border-radius: var(--dt-dimension-radius-full);
}
.gantt-row-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--ui-space-0-5);
  opacity: 0;
  transition: opacity var(--ui-duration-fast) var(--ui-ease);
}
.gantt-label-row:hover .gantt-row-actions,
.gantt-label-row:focus-within .gantt-row-actions { opacity: 1; }

.gantt-canvas-wrap {
  flex: 1 1 auto;
  min-width: 0;
  overflow: auto;
  position: relative;
  cursor: grab;
}
.gantt-canvas-wrap.is-panning { cursor: grabbing; }
.gantt-header {
  position: sticky;
  top: 0;
  z-index: var(--ui-layer-raised);
  background: rgb(var(--ui-surface-raised-rgb));
  box-shadow: var(--elev-1);
}
.gantt-header-months, .gantt-header-days { display: flex; }
.gantt-header-months { height: var(--ui-size-sm); border-bottom: var(--ui-stroke-thin) solid var(--stroke); background: rgba(var(--ink), 0.02); }
.gantt-header-days { height: var(--ui-size-sm); border-bottom: var(--ui-stroke-thin) solid var(--stroke); }

.gantt-month-cell {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--ui-space-2);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  color: var(--ui-text-secondary);
  border-right: var(--ui-stroke-thin) solid var(--stroke);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: var(--ls-wide);
}
.gantt-year-cell { font-weight: var(--fw-semibold); color: var(--ui-text-primary); }
.gantt-week-cell {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  color: var(--ui-text-secondary);
  border-right: var(--ui-stroke-thin) solid var(--stroke);
  overflow: hidden;
  white-space: nowrap;
  padding: 0 var(--ui-space-1);
}
.gantt-week-cell.is-current-week {
  background: color-mix(in srgb, var(--ui-accent) 12%, transparent);
  color: var(--ui-accent);
  font-weight: var(--fw-semibold);
}
.gantt-day-cell {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-micro);
  line-height: var(--lh-flat);
  color: var(--ui-text-muted);
  border-right: var(--ui-stroke-thin) solid rgba(var(--ink), 0.06);
  overflow: hidden;
}
.gantt-day-dow { font-size: var(--fs-micro); font-weight: var(--fw-semibold); text-transform: uppercase; opacity: 0.8; }
.gantt-day-dom { font-size: var(--fs-micro); font-weight: var(--fw-semibold); }
.gantt-day-cell.is-weekend { background: rgba(var(--ink), 0.035); }
.gantt-day-cell.is-today {
  background: color-mix(in srgb, var(--ui-accent) 18%, transparent);
  color: var(--ui-accent);
  font-weight: var(--fw-semibold);
}

.gantt-rows { position: relative; }
.gantt-row {
  position: relative;
  height: var(--gantt-row-h, var(--ui-size-md));
  border-bottom: var(--ui-stroke-thin) solid rgba(var(--ink), 0.05);
  background-image: repeating-linear-gradient(
    to right, transparent 0, transparent calc(var(--gantt-col-w) - 1px),
    rgba(var(--ink), 0.05) calc(var(--gantt-col-w) - 1px), rgba(var(--ink), 0.05) var(--gantt-col-w)
  );
}
.gantt-row.is-drop-target { outline: var(--ui-stroke-thick) dashed var(--ui-accent); outline-offset: calc(-1 * var(--ui-stroke-thick)); }
.gantt-row[data-row-kind="milestone"] { background-color: rgba(var(--ink), 0.018); }
.gantt-today-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--ui-space-0-5);
  /* Màu nhấn, không hồng/đỏ: trên Gantt đỏ chỉ còn nghĩa "trễ hạn" (báo cáo UX 10/10/2026). */
  background: var(--ui-accent);
  z-index: 1;
  pointer-events: none;
}
.gantt-today-line::after {
  content: '';
  position: absolute;
  top: calc(-1 * var(--ui-space-px));
  left: calc(-1 * var(--ui-space-1));
  width: var(--ui-space-2);
  height: var(--ui-space-2);
  border-radius: var(--ui-radius-circle);
  background: var(--ui-accent);
}

.gantt-bar {
  position: absolute;
  top: var(--ui-space-1);
  height: calc(var(--gantt-row-h, var(--ui-size-md)) - var(--ui-space-2-5));
  border-radius: var(--ui-radius-control);
  background: var(--bar-color, var(--ui-accent));
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--elev-1);
  transition: filter var(--ui-duration-fast) var(--ui-ease), box-shadow var(--ui-duration-fast) var(--ui-ease), transform var(--ui-duration-fast) var(--ui-ease);
}
.gantt-bar:hover {
  filter: brightness(1.08);
  box-shadow: var(--elev-2);
}
.gantt-bar-fill {
  position: absolute; inset: 0 auto 0 0; background: rgba(var(--ui-white-rgb), 0.38);
}
.gantt-bar-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 0 var(--ui-space-2);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  color: var(--ui-text-on-accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
.gantt-diamond {
  position: absolute;
  top: 50%;
  width: var(--ui-icon-xs);
  height: var(--ui-icon-xs);
  margin: calc(-1 * var(--ui-space-1-5)) 0 0 calc(-1 * var(--ui-space-1-5));
  background: var(--bar-color, var(--ui-accent));
  transform: rotate(45deg);
  border-radius: var(--ui-radius-sm);
  box-shadow: var(--elev-1);
  cursor: pointer;
  transition: filter var(--ui-duration-fast) var(--ui-ease), box-shadow var(--ui-duration-fast) var(--ui-ease);
}
.gantt-diamond:hover {
  filter: brightness(1.1);
  box-shadow: var(--elev-1);
}
.gantt-bar-task { top: var(--ui-space-1-5); height: calc(var(--gantt-row-h, var(--ui-size-md)) - var(--ui-space-3)); border-radius: var(--ui-radius-control); }
.gantt-bar-task[data-status="done"] { background: var(--gantt-status-done); }
.gantt-bar-task[data-status="in-progress"] { background: var(--gantt-status-progress); }
.gantt-bar-task[data-status="overdue"] { background: var(--gantt-status-overdue); }
.gantt-bar-task[data-status="not-started"] { background: var(--gantt-status-pending); }
.gantt-bar-task.is-single-day {
  top: 50%;
  width: var(--ui-icon-xs);
  height: var(--ui-icon-xs);
  margin: calc(-1 * var(--ui-space-1-5)) 0 0 calc(-1 * var(--ui-space-1-5));
  transform: rotate(45deg);
  border-radius: var(--ui-radius-sm);
}
/* Công việc nằm ngoài khoảng của milestone: cảnh báo mềm, không chặn. Viền đứt
   để nhìn cả biểu đồ là thấy thanh nào lệch, thay vì phải rê chuột từng thanh
   mới đọc được tooltip. */
.gantt-bar-task[data-outside="true"] {
  outline: var(--ui-stroke-thin) dashed var(--gantt-status-overdue);
  outline-offset: var(--ui-stroke-thin);
}
.gantt-row-dot[data-status="done"] { background: var(--gantt-status-done); }
.gantt-row-dot[data-status="in-progress"] { background: var(--gantt-status-progress); }
.gantt-row-dot[data-status="overdue"] { background: var(--gantt-status-overdue); }
.gantt-row-dot[data-status="not-started"] { background: var(--gantt-status-pending); }
.gantt-bar-task.is-dragging { opacity: 0.5; }

.gantt-quick-add {
  position: fixed;
  z-index: var(--layer-popover);
  width: var(--dt-component-popover-quick-action-width);
  border: var(--ui-stroke-thin) solid var(--stroke);
  border-radius: var(--ui-radius-panel);
  background: var(--ux-overlay);
  color: var(--ui-text-primary);
  box-shadow: var(--ui-shadow-geometry) rgba(var(--ui-shadow-rgb), var(--ui-shadow-alpha)); /* audit-keep: vật liệu kính: highlight và độ sâu nhiều lớp theo --t, không thuộc bậc elevation đơn */
  padding: var(--ui-space-3);
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-2-5);
}
.gantt-quick-add input[type="text"],
.gantt-quick-add input[type="date"] {
  border: var(--ui-stroke-thin) solid light-dark(var(--ux-input-border), rgba(var(--ui-white-rgb), 0.14));
  border-radius: var(--ui-radius-control);
  padding: var(--ui-space-2) var(--ui-space-2-5);
  font-size: var(--fs-body);
  background: var(--ux-input-bg);
  color: var(--ui-text-primary);
  font-family: inherit;
  outline: none;
  transition: border-color var(--ui-duration-fast) var(--ui-ease), box-shadow var(--ui-duration-fast) var(--ui-ease);
}
.gantt-quick-add input[type="text"]:focus,
.gantt-quick-add input[type="date"]:focus {
  border-color: var(--ux-control-border-active);
  box-shadow: var(--ui-control-ring);
}
.gantt-quick-add-actions { display: flex; justify-content: flex-end; gap: var(--ui-space-2); }

/* --- Notics Dialogs & Form Elements --- */
.notics-field {
  display: flex; flex-direction: column; gap: var(--ui-space-1-5); margin-bottom: var(--ui-space-3-5);
}
.notics-field:last-child { margin-bottom: 0; }
.notics-field > span {
  font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--ui-text-primary);
  display: flex; align-items: center; gap: var(--ui-space-1);
}
.notics-required-star {
  color: var(--ui-danger); font-style: normal; font-weight: var(--fw-semibold); margin-left: var(--ui-space-0-5);
}
.notics-field-hint {
  font-size: var(--fs-caption); color: var(--ui-text-secondary); line-height: var(--lh-normal); margin-top: var(--ui-space-1); display: block;
}
.notics-field code, .notics-check-card code {
  padding: var(--ui-space-px) var(--ui-space-1-5); border-radius: var(--ui-radius-control); background: rgba(var(--ink), 0.08); font-size: var(--fs-caption);
}

.notics-field input[type="text"],
.notics-field input[type="password"],
.notics-field input[type="date"] {
  width: 100%; height: var(--ui-size-lg); padding: 0 var(--ui-space-3);
  border: var(--ui-stroke-thin) solid var(--ux-input-border); border-radius: var(--ui-radius-control);
  background: var(--ux-input-bg); color: var(--ui-text-primary);
  font-family: inherit; font-size: var(--fs-body); outline: none;
  box-sizing: border-box; transition: border-color var(--ui-duration-fast) var(--ui-ease), box-shadow var(--ui-duration-fast) var(--ui-ease);
}
.notics-field input[type="text"]:focus,
.notics-field input[type="password"]:focus,
.notics-field input[type="date"]:focus {
  border-color: var(--ux-control-border-active);
  box-shadow: var(--ui-control-ring);
}
.notics-field input:disabled {
  opacity: 0.55; cursor: not-allowed;}

/* Fluent Dropdown Select */
.notics-field select {
  width: 100%; height: var(--ui-size-lg); padding: 0 var(--ui-space-8) 0 var(--ui-space-3);
  border: var(--ui-stroke-thin) solid var(--ux-input-border); border-radius: var(--ui-radius-control);
  background-color: var(--ux-input-bg); color: var(--ui-text-primary);
  font-family: inherit; font-size: var(--fs-body); outline: none;
  box-sizing: border-box; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: var(--notics-select-chevron);
  background-repeat: no-repeat; background-position: right 12px center; background-size: 14px;
  transition: border-color var(--ui-duration-fast) var(--ui-ease), box-shadow var(--ui-duration-fast) var(--ui-ease);
}
.notics-field select:focus {
  border-color: var(--ux-control-border-active);
  box-shadow: var(--ui-control-ring);
}

/* Color Swatches */
.notics-swatches { display: flex; flex-wrap: wrap; gap: var(--ui-space-2); margin-top: var(--ui-space-1); }
.notics-swatch {
  width: var(--ui-control-h-compact); height: var(--ui-control-h-compact); border-radius: var(--ui-radius-circle); cursor: pointer;
  border: var(--ui-stroke-thick) solid transparent; background: var(--notics-swatch); font-family: inherit;
  transition: transform var(--ui-duration-fast) var(--ui-ease);
}
.notics-swatch:hover { transform: var(--ui-interaction-stable-transform); }
.notics-swatch-inherit {
  background: transparent; border: var(--ui-stroke-thick) dashed var(--ui-text-muted); color: var(--ui-text-muted); font-size: var(--fs-caption);
  display: flex; align-items: center; justify-content: center;
}
.notics-swatch.is-selected {
  border-color: var(--ui-text-primary); box-shadow: 0 0 0 2px rgba(var(--ink), 0.15); transform: scale(1.12); /* audit-keep: bóng riêng của thành phần, không thuộc bậc elevation chuẩn */
}

/* Option Groups & Check Cards */
.notics-dialog-options {
  display: flex; flex-direction: column; gap: var(--ui-space-2);
  margin-top: var(--ui-space-4); padding-top: var(--ui-space-3-5); border-top: var(--ui-stroke-thin) solid var(--stroke);
}
.notics-options-title {
  font-size: var(--fs-caption); font-weight: var(--fw-overline);
  line-height: var(--lh-overline);  color: var(--ui-text-secondary);margin-bottom: var(--ui-space-0-5);
}
.notics-check-card {
  display: flex; align-items: center; gap: var(--ui-space-3);
  min-height: var(--ui-size-touch);
  padding: var(--ui-space-2) var(--ui-space-3); border-radius: var(--ui-radius-panel);
  border: var(--ui-stroke-thin) solid var(--ux-border); background: light-dark(var(--ux-card), rgba(var(--ui-white-rgb), 0.03));
  cursor: pointer; transition-property: var(--tr-ui); transition-timing-function: var(--ui-ease); transition-duration: var(--ui-duration-standard); user-select: none; border-color: light-dark(var(--ux-border), rgba(var(--ui-white-rgb), 0.08)); }
.notics-check-card:has(small) {
  align-items: flex-start;
}
.notics-check-card:hover {
  border-color: var(--ux-border-hover); background: rgba(var(--ui-black-rgb), 0.04);
}
.notics-check-card:has(input:checked) {
  border-color: rgba(var(--ui-accent-rgb), 0.35);
  background: rgba(var(--ui-accent-rgb), 0.04);
}
.notics-check-card input[type="checkbox"] {
  margin: 0; width: var(--ui-icon-sm); height: var(--ui-icon-sm); cursor: pointer;
  accent-color: var(--ui-accent); flex-shrink: 0;
}
.notics-check-card:has(small) input[type="checkbox"] {
  margin-top: var(--ui-space-0-5);
}
.notics-check-card-body {
  display: flex; flex-direction: column; gap: var(--ui-space-1); min-width: 0; flex: 1;
}
.notics-check-card-body strong {
  font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--ui-text-primary); line-height: var(--lh-snug);
}
.notics-check-card-body small {
  font-size: var(--fs-caption); color: var(--ui-text-secondary); line-height: var(--lh-normal);
}

/* Optimized popup sizing for Notics Project Dialog */
.overlay-panel.notics-project-dialog-panel {
  width: min(var(--dt-dimension-layout-480), calc(100vw - var(--ui-space-8)));
}
.notics-project-dialog-panel .overlay-foot-left {
  display: flex;
  align-items: center;
  gap: var(--ui-space-2);
}

.notics-dialog-divider {
  height: var(--ui-resizer-line); width: 100%; background: var(--ui-divider); margin: var(--ui-space-4) 0;
}
.notics-dialog-error:empty { display: none; }
.notics-dialog-error {
  margin: var(--ui-space-2-5) 0 0; padding: var(--ui-space-2) var(--ui-space-3); border-radius: var(--ui-radius-control);
  background: var(--ui-danger-bg); color: var(--ui-danger);
  font-size: var(--fs-body); line-height: var(--lh-normal);
}

/* --- Password Wrap & Eye Toggle --- */
.notics-pwd-wrap {
  position: relative; display: flex; align-items: center; width: 100%;
}
.notics-pwd-wrap input {
  width: 100%; height: var(--ui-field-h); padding: 0 var(--ui-space-10) 0 var(--ui-space-3);
  border: var(--ui-stroke-thin) solid var(--ux-input-border); border-radius: var(--ui-radius-control);
  background: var(--ux-input-bg); color: var(--ui-text-primary);
  font-family: inherit; font-size: var(--fs-body); outline: none;
  box-sizing: border-box; transition: border-color var(--ui-duration-fast) var(--ui-ease), box-shadow var(--ui-duration-fast) var(--ui-ease); border-color: var(--ux-input-border); }
.notics-pwd-wrap input:focus {
  border-color: var(--ux-control-border-active);
  box-shadow: var(--ui-control-ring);
}

/* --- Notics Security & Lock UI --- */
.notics-btn-lock {
  display: inline-flex; align-items: center; gap: var(--ui-space-1-5);
  padding: var(--ui-space-1) var(--ui-space-2-5); font-size: var(--fs-caption); font-weight: var(--fw-semibold);
  border-radius: var(--ui-radius-control); border: var(--ui-stroke-thin) solid var(--stroke);
  background: rgba(var(--ui-surface-raised-rgb), 0.7); color: var(--ui-text-primary);
  cursor: pointer; transition-property: var(--tr-ui); transition-timing-function: var(--ui-ease); transition-duration: var(--ui-duration-standard);
}
.notics-btn-lock:hover {
  background: rgba(var(--ui-surface-fill-rgb), 0.8); border-color: var(--ui-accent);
}
.notics-btn-lock.is-setup {
  border-color: var(--ui-accent); color: var(--ui-accent);
  background: rgba(var(--ui-accent-rgb), 0.08);
}
.notics-btn-lock.is-locked {
  border-color: var(--ui-warning); color: var(--ui-warning); background: light-dark(rgba(var(--ui-warning-rgb), 0.1), rgba(var(--ui-warning-rgb), 0.15));
}
.notics-btn-lock.is-unlocked {
  border-color: var(--ui-success); color: var(--ui-success); background: light-dark(rgba(var(--ui-success-rgb), 0.1), rgba(var(--ui-success-rgb), 0.15));
}

.notics-item-lock-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--ui-icon-lg); height: var(--ui-icon-md);
  color: var(--ui-warning); opacity: 0.85; margin-left: 0; flex: 0 0 auto;
}


.notics-btn-lock-toggle {
  display: inline-flex; align-items: center; gap: var(--ui-space-1);
  padding: var(--ui-space-1) var(--ui-space-2); font-size: var(--fs-caption); font-weight: var(--fw-semibold);
  border-radius: var(--ui-radius-control); border: var(--ui-stroke-thin) solid transparent;
  background: transparent; color: var(--ui-text-secondary); cursor: pointer;
  transition: all var(--ui-duration-fast) var(--ui-ease);
}
.notics-btn-lock-toggle:hover {
  border-color: transparent;
  background: var(--ui-hover); color: var(--ui-text-primary);
}
.notics-btn-lock-toggle.is-note-locked {
  border-color: var(--ui-warning); color: var(--ui-warning); background: rgba(var(--ui-warning-rgb), 0.1);
}

/* Editor Centered Lock Screen */
.notics-editor-lock-screen {
  flex: 1; min-height: 0; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: var(--ui-space-6); box-sizing: border-box;
}
.notics-lock-card {
  width: 100%; max-width: var(--dt-dimension-layout-360);
  background: rgb(var(--ui-surface-raised-rgb));
  border: var(--ui-stroke-thin) solid var(--stroke);
  border-radius: var(--ui-radius-panel);
  padding: 28px var(--ui-space-6); /* audit-keep: hình học riêng của khối, nằm giữa hai bậc thang (chênh hơn 2px) */
  text-align: center;
  box-shadow: var(--notics-lock-card-shadow);
}
.notics-lock-icon-wrap {
  width: var(--dt-dimension-layout-64); height: var(--dt-dimension-layout-64); margin: 0 auto var(--ui-space-4);
  border-radius: var(--ui-radius-circle);
  background: light-dark(rgba(var(--ui-warning-rgb), 0.12), rgba(var(--ui-warning-rgb), 0.18));
  color: var(--ui-warning);
  display: flex; align-items: center; justify-content: center;
}
.notics-lock-title {
  margin: 0 0 var(--ui-space-2); font-size: var(--fs-title); font-weight: var(--fw-semibold); color: var(--ui-text-primary);
}
.notics-lock-desc {
  margin: 0 0 var(--ui-space-4-5); font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--ui-text-secondary);
}
.notics-lock-form {
  display: flex; flex-direction: column; gap: var(--ui-space-2-5); text-align: left;
}
.notics-lock-input-wrap {
  position: relative; display: flex; align-items: center; width: 100%;
}
.notics-lock-input-wrap input {
  width: 100%; height: var(--ui-size-lg); padding: 0 var(--ui-space-10) 0 var(--ui-space-3);
  border: var(--ui-stroke-thin) solid var(--ux-input-border); border-radius: var(--ui-radius-control);
  background: var(--ux-input-bg); color: var(--ui-text-primary);
  font-family: inherit; font-size: var(--fs-body); outline: none;
  box-sizing: border-box; transition: border-color var(--ui-duration-fast) var(--ui-ease), box-shadow var(--ui-duration-fast) var(--ui-ease); border-color: var(--ux-input-border); }
.notics-lock-input-wrap input:focus {
  border-color: var(--ux-control-border-active);
  box-shadow: var(--ui-control-ring);
}
.notics-lock-error {
  margin: 0; min-height: var(--ui-icon-sm); font-size: var(--fs-caption); color: var(--notics-danger, var(--ui-danger)); text-align: center;
}
.notics-lock-error:empty { display: none; }
.notics-lock-submit-btn {
  width: 100%; justify-content: center; height: var(--ui-size-lg); font-size: var(--fs-body); font-weight: var(--fw-semibold);
}

/* Security Settings Card */
.notics-security-settings-card {
  background: light-dark(rgb(var(--ui-surface-fill-rgb)), rgba(var(--ui-white-rgb), 0.03));
  border: var(--ui-stroke-thin) solid var(--ux-border);
  border-radius: var(--ui-radius-panel);
  padding: var(--ui-space-3-5) var(--ui-space-4); border-color: light-dark(var(--ux-border), rgba(var(--ui-white-rgb), 0.08)); }
.notics-security-status-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-2-5);
}
.notics-status-badge {
  display: inline-flex; align-items: center; gap: var(--ui-space-1-5);
  font-size: var(--fs-body); font-weight: var(--fw-semibold);
}
.notics-status-badge.is-unlocked {
  color: var(--ui-success);
}

/* ==========================================================================
   NOTICS — cây hai nhóm DỰ ÁN / NHÓM (Phase 5)
   ==========================================================================
   Ranh giới là cờ Đồng bộ: nhóm trên có mặt ở Task/AntiNote/Project, nhóm dưới
   chỉ sống trong Notics. Tách nhóm để nhìn một tên là biết ngay nó có ảnh
   hưởng ra ngoài Notics hay không. */

.notics-tree-heading {
  display: flex; align-items: center; gap: var(--ui-space-0-5);
  width: 100%;
  margin: var(--ui-space-2-5) 0 var(--ui-space-1);
  border: 0; border-radius: var(--ui-radius-control);
  background: transparent;
  box-sizing: border-box;
}
.notics-tree-heading:first-child { margin-top: var(--ui-space-0-5); }
.notics-tree-heading-caret {
  flex: 0 0 auto;
  width: var(--ui-control-h-compact); height: var(--ui-control-h-compact);
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--ui-radius-control);
  background: transparent; color: var(--ui-text-muted);
  cursor: pointer; padding: 0;
}
.notics-tree-heading-caret:hover { background: color-mix(in srgb, var(--ui-accent) 12%, transparent); color: var(--ui-text-primary); }
.notics-tree-heading-caret svg { transition: transform var(--ui-duration-fast) var(--ui-ease); }
.notics-tree-heading.is-collapsed .notics-tree-heading-caret svg { transform: rotate(-90deg); }
.notics-tree-heading-pick {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: var(--ui-space-1-5);
  /* Lề TRÁI/PHẢI = 0 — outer .notics-tree-heading đã tự có padding-inline
     riêng (hợp đồng NavigationView chuẩn, ui-components.css#.ux-pane, GĐ4
     17/09/2026). Giữ nguyên padding ngang ở đây thì cộng dồn 2 lớp lề, kéo
     badge số của "Dự án"/"Nhóm" lệch vào trong so với cột số của các hàng
     khác (BA báo lệch 2026-09-22, vòng 2). Padding dọc vẫn giữ để đủ vùng
     bấm. */
  padding: var(--ui-space-1) 0;
  border: 0; border-radius: var(--ui-radius-control);
  background: transparent; color: var(--ui-text-secondary);
  font: var(--fw-semibold) var(--fs-body)/var(--lh-snug) var(--app-font);
  letter-spacing: 0.01em;
  cursor: pointer;
}
/* :not(.notics-tree-count) — badge số đếm dùng CHUNG class .notics-tree-count
   với mọi hàng khác trong cây; nếu không loại trừ, selector "span con trực
   tiếp" này đè flex:1 lên cả badge, kéo lệch cột số khỏi các hàng còn lại
   (BA báo lệch 2026-09-22, vòng 2). */
.notics-tree-heading-pick > span:not(.notics-tree-count) { flex: 1; min-width: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; }
/* Nền rê/đang chọn thuộc về HÀNG .notics-tree-heading (hợp đồng NavigationView chung,
   ui-components.css#.ux-pane: nền trung tính + vạch nhấn). Nút bên trong không tô nền
   riêng — trước đây nó tô thêm một lớp xanh 12%, chồng lên nền hàng thành hai mảng lệch
   nhau (mảng trong dừng trước ô mũi tên), chữ xanh khác mọi hàng chọn khác (BA 10/10/2026). */
.notics-tree-heading-pick:hover,
.notics-tree-heading.is-active .notics-tree-heading-pick { color: var(--ui-text-primary); }
/* Breadcrumb "NOTICS / <DỰ ÁN>" — bấm được khi dự án có mặt ở module Project. */
.notics-eyebrow.is-link { cursor: pointer; }
.notics-eyebrow.is-link:hover { color: var(--ui-accent); text-decoration: underline; text-underline-offset: 2px; }

/* Notics giờ chỉ còn ba cột (cây → danh sách ghi chú → trình soạn thảo);
   cột Tiến độ đã chuyển sang module Project. */
/* Header visibility handled globally */

/* Icon cho các mục hệ thống trên cây (QuickNote, Gần đây, Tất cả) */
.notics-tree-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--ui-icon-control);
  height: var(--ui-icon-control);
  color: var(--ui-text-secondary);
}
/* Glyph = token icon.sm (16) chung với AntiNote/menu Cài đặt; JS vẽ 14 cứng. */
.notics-tree-icon svg { width: var(--ui-icon-sm); height: var(--ui-icon-sm); }
.notics-tree-section.is-active .notics-tree-icon {
  color: var(--ui-accent);
}

/* Cây gọn nhẹ (BA 10/10/2026, so Notion / Windows 11 NavigationView): MỘT cột icon và MỘT
   cột chữ cho mọi hàng. Trước đây có 3 cột chữ (mục hệ thống 36 / tiêu đề nhóm 42 / dự án
   60, vì dự án xếp mũi tên + chấm màu trước tên), bước dự án 30 (lệch 28), và hạng mục con
   thụt lùi SAU tên dự án cha. */
.notics-tree-group { margin-bottom: 0; }
/* Dự án: chấm màu nằm giữa ô icon 16 như icon của QuickNote/Gần đây/Tất cả. */
.notics-tree-project { gap: var(--ui-space-1); }
.notics-tree-project .notics-project-dot {
  margin-inline: calc((var(--ui-icon-control) - var(--ui-space-2)) / 2);
}
/* Mũi tên mở/đóng đè lên ô icon, chỉ hiện khi rê/focus (kiểu Notion) — hàng nghỉ chỉ còn
   chấm màu + tên. Không dùng transform (đã dành cho xoay khi mở). */
.notics-tree-project .notics-tree-caret {
  position: absolute;
  left: calc(var(--ui-nav-item-pad) + (var(--ui-icon-control) - var(--ui-control-h-compact)) / 2);
  top: calc(50% - var(--ui-control-h-compact) / 2);
  visibility: hidden;
}
.notics-tree-project:is(:hover, :focus-within) .notics-tree-caret { visibility: visible; }
.notics-tree-project:is(:hover, :focus-within) .notics-project-dot { visibility: hidden; }
/* Một màu chữ lúc nghỉ cho mọi hàng; rê/đang chọn mới lên màu chính. */
.notics-tree-project .notics-project-label strong { color: var(--ui-text-secondary); }
.notics-tree-project:is(:hover, .is-active) .notics-project-label strong { color: var(--ui-text-primary); }
/* Tiêu đề nhóm "Dự án / Nhóm" = nhãn mục nhỏ, mờ (Notion "Private", Outlook "Thư mục"),
   chữ thẳng cột icon; mũi tên sang phải như NavigationView, hiện khi rê/focus hoặc
   khi nhóm đang thu (để còn thấy trạng thái). */
.notics-tree-heading-pick { font: var(--fw-semibold) var(--fs-caption)/var(--lh-snug) var(--app-font); color: var(--ui-text-muted); letter-spacing: normal; }
.notics-tree-heading-caret { order: 2; visibility: hidden; }
.notics-tree-heading:is(:hover, :focus-within, .is-collapsed) .notics-tree-heading-caret { visibility: visible; }
/* Hạng mục con: vạch dẫn thẳng tâm ô icon của dự án cha, chữ con thụt vào sau chữ cha. */
.notics-tree-children {
  margin: 0 0 var(--ui-space-1) calc(var(--ui-nav-item-pad) + var(--ui-icon-control) / 2);
  padding-left: var(--ui-space-2);
}
} /* @layer legacy */

/* ==========================================================================
   GĐ4 Notebook lát 2 — nút icon trong thân trang đã về .ui-btn--subtle --icon
   (ghim sao, "…" trên cây, xóa lưu trữ, nút hàng milestone Gantt, popup ghi chú
   Project). Công thức chuẩn ở layer components đặt màu chữ cho mọi trạng thái,
   nên trạng thái riêng của các nút này phải nêu lại ở layer modules.
   ========================================================================== */
@layer modules {
  /* Thanh đầu Notebook: .ui-dialog-controls có margin-inline-start:auto ở layer components
     (thắng layer legacy); hai lề auto chia đôi chỗ trống làm cụm ☆ ⋯ trôi giữa hàng khi thanh
     công cụ xuống hàng riêng. Bỏ lề auto của nhóm Mở rộng/Đóng để chỉ cụm thao tác đẩy phải. */
  .notics-doc-header > .ui-dialog-controls { margin-inline-start: 0; align-self: center; }
  /* Thanh đầu soạn thảo là header tầng pane (BA 10/10/2026): cao đúng --ui-pane-header-h
     như .notics-col-head (vạch dưới thẳng hàng), nút 32 căn giữa, không đệm dọc. Phải ở
     layer modules vì đệm dọc đến từ .ui-dialog-header (layer modules, ui-components.css).
     Chỉ khi thanh công cụ xuống hàng riêng mới thêm đệm dưới. AntiNote: antinote.css. */
  .ui-dialog-header.notics-doc-header {
    box-sizing: border-box;
    min-height: var(--ui-pane-header-h);
    padding-block: 0;
    /* Không kẻ dưới (BA 11/10/2026 tối thiểu viền): tách trang bằng sắc nền, như AntiNote
       (.note-doc-header ở note-editor-shell.css). Vạch đến từ .ui-dialog-header (components). */
    border-bottom: 0;
  }
  /* Đệm trên = phần căn giữa của hàng đơn (min-height − nút 32)/2: bấm ⚙ mở công cụ thì ô
     dự án + ⚙ ☆ ⋯ ĐỨNG YÊN, chỉ thanh công cụ xuống hàng dưới (BA 11/10/2026 "không bị chạy"). */
  .ui-dialog-header.notics-doc-header:has(> .note-doc-toolbar:is(.is-tools-expanded, [data-tb-own-row])) {
    padding-top: calc((var(--ui-pane-header-h) - var(--ui-size-md)) / 2);
    padding-bottom: var(--ui-space-1);
  }
  /* Trạng thái nút "Định dạng khác" (mở / ẩn khi bày thẳng): styles/note-toolbar.css. */
  /* Vị trí trên thanh đầu là breadcrumb dạng chữ + mũi tên (như Evernote/Notion),
     không còn chip màu — chip ".notics-note-path" trên thẻ danh sách giữ nguyên. */
  .notics-zoom-control .ui-btn--icon { font-size: var(--fs-body); }
  /* Breadcrumb là .ui-btn nhẹ md (nền rê/nhấn/focus do component); ở đây chữ + đệm. */
  .notics-doc-header button.notics-editor-path {
    gap: var(--ui-space-1-5);
    padding: 0 var(--ui-space-2);
    color: var(--ui-text-secondary);
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
  }
  .notics-doc-header button.notics-editor-path::after {
    content: "";
    flex: 0 0 auto;
    width: 0.4em;
    height: 0.4em;
    margin-top: -0.2em;
    border-right: var(--ui-focus-ring-width) solid currentColor;
    border-bottom: var(--ui-focus-ring-width) solid currentColor;
    transform: rotate(45deg);
  }
  .notics-doc-header button.notics-editor-path .notics-editor-path-icon {
    flex: 0 0 auto;
    width: var(--ui-icon-sm);
    height: var(--ui-icon-sm);
  }
  /* .ui-btn đặt line-height 1; nhãn cắt ellipsis (overflow hidden) thì mất phần chân
     chữ ("Chung" thành "Chunq") — trả về nhịp dòng chữ thường. */
  .notics-doc-header button.notics-editor-path .notics-editor-path-label {
    min-width: 0;
    line-height: var(--lh-body-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .notics-doc-header button.notics-editor-path:is(:hover, :focus-visible) {
    background: var(--ui-hover);
    color: var(--ui-text-primary);
  }
  /* Đã ghim: sao vàng (Notebook, popup Ghi chú dự án). */
  .ui-btn.notics-pin-btn[data-pinned="true"] { color: var(--ui-warning); }
  /* Nút hiện/ẩn mật khẩu: .ui-btn nhẹ, nằm trong ô nhập (mép phải, giữa dọc).
     Dùng translate riêng để không đè transform:scale khi nhấn của .ui-btn. */
  .ui-btn.notics-eye-btn {
    position: absolute;
    right: var(--ui-space-1-5);
    top: 50%;
    translate: 0 -50%;
  }
  /* Nút "…" đang mở menu giữ trạng thái nhấn. */
  .ui-btn.notics-tree-more-btn[aria-expanded="true"] {
    background: var(--ui-action-active);
    color: var(--ui-text-primary);
  }
}

/* Bút copy định dạng đang bật (richEditorFormatPainter.js): con trỏ báo sắp áp định dạng. */
@layer modules {
  .ql-editor.is-format-painting {
    cursor: copy;
  }
}

/* Khai báo từng là !important trong @layer legacy — chuyển sang layer cuối `overrides`
   (thắng mọi khai báo thường ở mọi layer, đúng như cờ important cũ), cùng selector, cùng
   thứ tự, cùng ngữ cảnh @media. Sinh tự động 01/10/2026 (KE-HOACH-DAT-CHUAN-QUOC-TE-UI GĐ B–E);
   thuộc tính ẩn/hiện/định vị giữ cờ important vì JS gắn nội tuyến. */
@layer overrides {
  .notics-header-toggles { border: none; background: transparent; }
  .notics-header-toggle { width: var(--ui-header-control-size); height: var(--ui-header-control-size); min-height: var(--ui-header-control-size); padding: 0; border: var(--ui-stroke-thin) solid transparent; border-radius: var(--ui-radius-control); background: transparent; color: var(--ui-text-secondary); }
  .notics-header-toggle:hover { background: var(--ui-hover); border-color: transparent; color: var(--ui-text-primary); }
  .notics-header-toggle:not(.is-collapsed) { background: color-mix(in srgb, var(--ui-accent) 12%, transparent); border-color: transparent; color: var(--ui-accent); }
  .notics-header-toggle.is-collapsed { color: var(--ui-text-muted); background: transparent; border-color: transparent; }
  .notics-header-toggle.is-collapsed:hover { border-color: transparent; background: var(--ui-hover); color: var(--ui-text-primary); box-shadow: none; }
  .notics-body.is-dragging, .notics-body.is-pane-resizing { transition: none; }
  .notics-tree-project.is-drop-target, .notics-tree-section.is-drop-target { background: color-mix(in srgb, var(--ui-accent) 30%, transparent); }
  .notics-meta-right > :is(button):not(.notics-pin-btn), .notics-meta-right > .notespeed-bg-control > button.notespeed-bg-btn { padding: 0; border: var(--ui-stroke-thin) solid transparent; background: transparent; color: var(--ui-text-secondary); box-shadow: none; }
  .notics-meta-right > :is(button):not(.notics-pin-btn):hover, .notics-meta-right > .notespeed-bg-control > button.notespeed-bg-btn:hover { background: var(--ui-hover); border-color: transparent; color: var(--ui-text-primary); }
  .notics-meta-right > :is(button):not(.notics-pin-btn):active, .notics-meta-right > .notespeed-bg-control > button.notespeed-bg-btn:active { background: var(--ui-action-active); }
  .notics-btn-note-menu { padding: 0; border-radius: var(--ui-radius-control); }
  .notics-field input:disabled { background: rgba(var(--ui-surface-fill-rgb), 0.5); }
}

/* GĐ B–E bổ sung: khai báo từng mang cờ important có chú thích đứng trước (lượt đầu bỏ sót). */
@layer overrides {
  .notics-header-toggle { /* box-sizing phải ép ở đây: khối chuẩn hoá header (~dòng 565) chỉ gán border-box cho ".topbar-section > .notics-header-toggle" (con TRỰC TIẾP). Ở tab NoteBook, hai nút này bị bọc trong .notics-header-toggles nên KHÔNG khớp selector đó -> giữ content-box -> 26px + viền 1px = 28px, cao hơn mọi control còn lại trong hàng (đều border-box = 26px). Đó là lỗi lệch chiều cao. Các tab khác (QuickNote/Painting…) đặt nút làm con trực tiếp nên không dính. */ box-sizing:border-box; }
}

/* ==========================================================================
   Dạng xem Danh sách — da hàng (BA 2026-10-07)
   Hàng gọn kiểu OneNote thay vì thẻ: không viền/bóng, nền trong suốt; rê = nền
   rê, đang mở = nền chọn + viền accent. Hình học ở modules (thắng
   paint-speed.css modules nhờ độ đặc hiệu); NỀN phải ở overrides vì Notebook
   ép nền mọi thẻ về --ux-card ngay tại layer đó (paint-speed.css).
   ========================================================================== */
@layer modules {
  /* Cột danh sách là MẶT ĐẶC của hệ thống (BA 2026-10-07: "không để vùng và ảnh
     nền", như OneNote) — cùng bề mặt với khung soạn thảo bên phải. --ux-canvas /
     --ux-raised đều mang alpha theo vật liệu kính nên ảnh nền vẫn xuyên qua;
     --ui-surface-raised là bề mặt nổi ĐỤC, tự đổi theo sáng/tối. Rule nền ở
     @layer overrides cuối file (.ux-canvas đặt nền tại layer đó). */
  .notics-page[data-notes-view="reading"] #noticsNoteList { padding-inline: 0; }
  .notics-page[data-notes-view="reading"] #noticsNoteList .notespeed-all-section-title {
    padding-inline: var(--ui-space-4);
  }
  /* Hàng không kẻ ngăn (BA 2026-10-09 bớt đường kẻ, kiểu Apple Notes/Notion): thụt
     vào hai bên, bo góc; khoảng đệm hàng đủ tách. Đang mở = nền chọn (lớp overrides
     cuối file), không vạch accent — hàng bo góc không mang vạch trái. */
  .notics-page[data-notes-view="reading"] .notics-read-list > .notespeed-all-card {
    gap: var(--ui-space-1);
    margin-inline: var(--ui-space-2);
    padding: var(--ui-space-2-5) var(--ui-space-2);
    border: 0;
    border-radius: var(--ui-radius-md);
    box-shadow: none;
    /* Bỏ trần bề rộng của thẻ lưới (--ui-note-card-w): hàng lấp hết cột trừ lề. */
    width: auto;
    max-width: none;
  }
  .notics-page[data-notes-view="reading"] .notics-read-list > .notespeed-all-card::after { display: none; }
  .notics-page[data-notes-view="reading"] .notics-read-list > .notespeed-all-card:hover { box-shadow: none; }
  /* Hàng dạng Danh sách dựng bằng components/noteListRow.js (chung AntiNote): hai
  dòng tự canh bằng note-list.css, ở đây chỉ bỏ gap của khuôn thẻ. */
  .notics-page[data-notes-view="reading"] .notics-read-list > .notics-read-row { gap: 0; position: relative; }
  /* Nút đổi dạng xem trên thanh đầu: menu neo dưới nút (cùng khuôn .view-mode-wrap của Task). */
  .notics-view-mode-wrap { position: relative; display: flex; align-items: center; flex: 0 0 auto; -webkit-app-region: no-drag; }
  .notics-view-mode-wrap .view-mode-option .view-mode-glyph {
    display: grid;
    place-items: center;
    width: var(--ui-icon-lg);
    height: var(--ui-icon-lg);
  }
}
/* Đổi dạng xem: tắt chuyển động trong nhịp dựng lại (notics.js#setNoticsViewMode). */
@layer overrides {
  .notics-page.is-view-switching :is(.notics-body, .notics-col, .notespeed-all-card),
  #noticsEditorModal.is-view-switching,
  #noticsEditorModal.is-view-switching :is(.notespeed-modal-panel, .notespeed-modal-scrim) {
    transition: none;
    animation: none;
  }
}
@layer overrides {
  /* Phải ở overrides: .ux-canvas (ui-foundation.css) đặt nền --ux-base tại chính layer này. */
  .notics-page[data-notes-view="reading"] .notics-col-notes { background: var(--ui-surface-raised); }
  .notics-page[data-notes-view="reading"] .notics-read-list > .notespeed-all-card[data-bg] { background: transparent; }
  .notics-page[data-notes-view="reading"] .notics-read-list > .notespeed-all-card[data-bg]:hover { background: var(--ui-action-hover); }
  .notics-page[data-notes-view="reading"] .notics-read-list > .notespeed-all-card[data-bg].is-active { background: var(--ui-action-active); }
}