/* Lớp chuyển động của vỏ WCC — token của Animate UI
   (https://github.com/imskyleen/animate-ui, packages/react/src/utils/motion).

   App không có React, Tailwind hay bước build (PRODUCT.md), nên token được
   viết lại bằng CSS thuần. Tệp này nạp SAU style.css: cùng độ ưu tiên thì
   luật ở đây thắng.

   Đường cong có điểm điều khiển vượt 1 bị bỏ. ease.drawer của thư viện nảy
   (tung độ điều khiển lớn hơn 1). DESIGN.md cấm easing đàn hồi, nên ngăn kéo
   dùng ease.soft của sheet. Không hoạt hoạ width/height.
   prefers-reduced-motion ở style.css đưa mọi duration về .001ms, trừ spinner. */

:root {
  --aui-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --aui-ease-soft: cubic-bezier(0.215, 0.61, 0.355, 1);
  --aui-ease-enter: cubic-bezier(0.25, 0.1, 0.35, 1);
  --aui-ease-leave: cubic-bezier(0, 0, 0.58, 1);
  --aui-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --aui-ease-away: cubic-bezier(0.33, 0.17, 0.67, 0.5);
  --aui-ease-color: cubic-bezier(0.25, 0.1, 0.25, 1);
  --aui-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --aui-press: 0.97;
  --aui-menu: 0.9;
  --aui-dialog: 0.8;
  --aui-toast: 0.96;
  --aui-overlay: 400ms;
  --aui-sheet: 400ms;
  --aui-menu-dur: 220ms;
  --aui-fade: 200ms;
  --aui-dismiss: 200ms;
  --aui-panel: 300ms;
  --aui-press-dur: 433ms;
  --aui-toast-dur: 500ms;
  --aui-spring-dialog: 783ms;
  --aui-tip: 340ms;
  --aui-tip-out: 130ms;
  --aui-row: 300ms;
  --aui-stagger: 33ms;
  --aui-shift: 8px;
  --aui-blur: 4px;
  --aui-tip-blur: 6px;
  --aui-tip-scale: 0.7;
  /* Lò xo lấy đúng stiffness/damping của Animate UI (mass 1), lấy mẫu tới khi
     gần đứng. Dialog gần tắt hẳn (đỉnh 0.998). Toast/nhấn vượt đích một chút
     đúng lò xo của thư viện, không phải cubic-bezier nảy mà DESIGN.md cấm. */
  --aui-ease-spring-dialog: linear(0 0%, 0.219 8%, 0.497 17%, 0.698 25%, 0.824 33%, 0.899 42%, 0.942 50%, 0.967 58%, 0.981 67%, 0.989 75%, 0.994 83%, 0.997 92%, 0.998 100%);
  --aui-ease-spring-toast: linear(0 0%, 0.214 8%, 0.531 17%, 0.781 25%, 0.932 33%, 1.003 42%, 1.025 50%, 1.024 58%, 1.017 67%, 1.009 75%, 1.004 83%, 1.001 92%, 1 100%);
  --aui-ease-spring-press: linear(0 0%, 0.313 8%, 0.706 17%, 0.950 25%, 1.041 33%, 1.050 42%, 1.030 50%, 1.011 58%, 1.001 67%, 0.997 75%, 0.998 83%, 0.999 92%, 1 100%);
}

/* ===== Nhấn (spring.press → scale 0.97, kèm 0.5px của DESIGN.md) ===== */
.btn,
.chip,
.nav-item,
.pm-item,
[role="tab"],
[role="menuitem"] {
  transition:
    background 200ms var(--aui-ease-color),
    background-color 200ms var(--aui-ease-color),
    border-color 200ms var(--aui-ease-color),
    box-shadow 200ms var(--aui-ease-color),
    color 200ms var(--aui-ease-color),
    opacity 200ms var(--aui-ease-color),
    transform var(--aui-press-dur) var(--aui-ease-spring-press);
}
.btn:active:not(:disabled):not([aria-disabled="true"]),
.chip:active,
.pm-item:active,
[role="tab"]:active,
[role="menuitem"]:active {
  transform: translateY(0.5px) scale(var(--aui-press));
}
.nav-item:active { transform: scale(var(--aui-press)); }

.input, select, textarea {
  transition:
    border-color var(--aui-fade) var(--aui-ease-color),
    box-shadow var(--aui-fade) var(--aui-ease-color),
    background-color var(--aui-fade) var(--aui-ease-color);
}

.row, .kcard, .co-card, .stat.clickable, .tbl tr {
  transition-duration: var(--aui-fade);
  transition-timing-function: var(--aui-ease-color);
}

.grp-h .chev, .nav-sec-caret, .setx-title-btn .caret, .sg-fold .sg-caret {
  transition: transform 350ms var(--aui-ease-soft);
}
/* Cài đặt: mục trái và tab con đặc hiệu hơn rule 0.1s/0.12s trong style.css. */
.setx-nav .setx-item,
.setx-tabbar .setx-subtab,
.seg button {
  transition:
    background 200ms var(--aui-ease-color),
    background-color 200ms var(--aui-ease-color),
    border-color 200ms var(--aui-ease-color),
    color 200ms var(--aui-ease-color),
    box-shadow 200ms var(--aui-ease-color),
    transform var(--aui-press-dur) var(--aui-ease-spring-press);
}
.setx-nav .setx-item:active,
.setx-tabbar .setx-subtab:active,
.seg button:active {
  transform: translateY(0.5px) scale(var(--aui-press));
}
.sg-row, .sg-row6, .sg-split {
  transition: background-color 200ms var(--aui-ease-color);
}
.setx-main-in.aui-vao,
.aui-vao {
  animation: aui-page-in var(--aui-panel) var(--aui-ease-enter) backwards;
}

/* ===== Đổi trang (panelIn 300ms + shift 8px). Cạnh bàn không nằm trong #content. ===== */
@keyframes aui-page-in {
  from { opacity: 0; transform: translateY(var(--aui-shift)); }
  to { opacity: 1; transform: none; }
}
#content.aui-page { animation: aui-page-in var(--aui-panel) var(--aui-ease-enter) backwards; }
.login-card { animation: aui-page-in var(--aui-panel) var(--aui-ease-enter) backwards; }

@keyframes aui-rise {
  from { opacity: 0; transform: translateY(var(--aui-shift)); }
  to { opacity: 1; transform: none; }
}
.empty { animation: aui-rise var(--aui-panel) var(--aui-ease-out) backwards; }

/* ===== Lớp phủ + hội thoại (overlay 400ms soft; dialog scale 0.8, blur 4px, rotateX 20deg) ===== */
@keyframes aui-overlay-in {
  from { background-color: transparent; backdrop-filter: blur(0); }
  to { background-color: rgba(20, 22, 30, .4); backdrop-filter: blur(1px); }
}
@keyframes aui-overlay-out {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes aui-dialog-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes aui-dialog-in {
  from {
    filter: blur(var(--aui-blur));
    transform: perspective(500px) rotateX(-20deg) scale(var(--aui-dialog));
  }
  to {
    filter: blur(0);
    transform: perspective(500px) rotateX(0deg) scale(1);
  }
}
@keyframes aui-dialog-out {
  from {
    opacity: 1;
    filter: blur(0);
    transform: perspective(500px) rotateX(0deg) scale(1);
  }
  to {
    opacity: 0;
    filter: blur(var(--aui-blur));
    transform: perspective(500px) rotateX(-20deg) scale(var(--aui-dialog));
  }
}
.overlay { animation: aui-overlay-in var(--aui-overlay) var(--aui-ease-soft) backwards; }
.modal {
  animation:
    aui-dialog-fade var(--aui-overlay) var(--aui-ease-soft) backwards,
    aui-dialog-in var(--aui-spring-dialog) var(--aui-ease-spring-dialog) backwards;
}

/* ===== Ngăn kéo / sheet (translate 100%, 400ms soft — không dùng ease.drawer) ===== */
@keyframes aui-sheet-in {
  from { opacity: 0; transform: translateX(100%); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes aui-sheet-out {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(100%); }
}
.peek-ov { animation: aui-overlay-in var(--aui-sheet) var(--aui-ease-soft) backwards; }
.peek { animation: aui-sheet-in var(--aui-sheet) var(--aui-ease-soft) backwards; }
@media (max-width: 900px) {
  .sidebar { transition: transform var(--aui-sheet) var(--aui-ease-soft); }
  .app.nav-open .backdrop { animation: aui-overlay-in var(--aui-overlay) var(--aui-ease-soft) backwards; }
}

/* ===== Toast (scale 0.96, trượt vào) ===== */
@keyframes aui-toast-in {
  from { opacity: 0; transform: translateX(16px) scale(var(--aui-toast)); }
  to { opacity: 1; transform: none; }
}
@keyframes aui-toast-out {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateX(16px) scale(var(--aui-toast)); }
}
.toast { animation: aui-toast-in var(--aui-toast-dur) var(--aui-ease-spring-toast) backwards; }

/* ===== Menu (scale 0.9, 220ms soft) + hàng trễ 33ms ===== */
@keyframes aui-menu-in {
  from { opacity: 0; filter: blur(var(--aui-blur)); transform: scale(var(--aui-menu)); }
  to { opacity: 1; filter: blur(0); transform: none; }
}
@keyframes aui-menu-out {
  from { opacity: 1; filter: blur(0); transform: scale(1); }
  to { opacity: 0; filter: blur(var(--aui-blur)); transform: scale(var(--aui-menu)); }
}
@keyframes aui-row-in {
  from { opacity: 0; filter: blur(var(--aui-blur)); transform: translateX(var(--aui-shift)); }
  to { opacity: 1; filter: blur(0); transform: none; }
}
.profile-menu, .st-menu, .switcher { transform-origin: top left; animation: aui-menu-in var(--aui-menu-dur) var(--aui-ease-soft) backwards; }
.export-menu, .qa-menu, .brain-ctx-menu, .dv2-menu, .notif-drop { transform-origin: top right; animation: aui-menu-in var(--aui-menu-dur) var(--aui-ease-soft) backwards; }
.brain-model-drop, .brain-mention-drop { transform-origin: bottom left; animation: aui-menu-in var(--aui-menu-dur) var(--aui-ease-soft) backwards; }
[role="menu"] { animation: aui-menu-in var(--aui-menu-dur) var(--aui-ease-soft) backwards; }

.profile-menu .pm-item,
.st-menu > [role="menuitem"],
.st-menu .st-menu-i,
.brain-ctx-menu .bc-item,
.brain-model-drop .bm-item,
.brain-mention-drop .bm-item,
.export-menu .export-item,
.qa-menu .qa-item,
.dv2-menu .dv2-menu-i,
.switcher .sw-item,
[role="menu"] > [role="menuitem"] {
  animation: aui-row-in var(--aui-row) var(--aui-ease-soft) backwards;
}
[dir="rtl"] .profile-menu .pm-item,
[dir="rtl"] .st-menu > [role="menuitem"],
[dir="rtl"] [role="menu"] > [role="menuitem"] {
  animation-name: aui-row-in-rtl;
}

/* Tooltip: scale 0.7, blur 6px, vào 340ms ease.enter, ra 130ms ease.leave.
   Dịch 8px (shift của hàng), không phải 40px — tooltip của app đã được đặt
   toạ độ; 40px làm nó bay khỏi chỗ neo. */
@keyframes aui-tip-in {
  from { opacity: 0; filter: blur(var(--aui-tip-blur)); transform: translateY(var(--aui-shift)) scale(var(--aui-tip-scale)); }
  to { opacity: 1; filter: blur(0); transform: none; }
}
@keyframes aui-tip-out {
  from { opacity: 1; filter: blur(0); transform: none; }
  to { opacity: 0; filter: blur(var(--aui-tip-blur)); transform: translateY(var(--aui-shift)) scale(var(--aui-tip-scale)); }
}
[role="tooltip"],
.st-tip {
  transform-origin: center bottom;
  animation: aui-tip-in var(--aui-tip) var(--aui-ease-enter) backwards;
}
@keyframes aui-row-in-rtl {
  from { opacity: 0; filter: blur(var(--aui-blur)); transform: translateX(calc(var(--aui-shift) * -1)); }
  to { opacity: 1; filter: blur(0); transform: none; }
}

/* ===== Bản rời khi đóng — không còn lớp .overlay/.modal/.peek/.toast để querySelector khỏi thấy hộp ma ===== */
.aui-overlay, .aui-peek, .aui-menu-overlay {
  pointer-events: none;
}
.aui-overlay {
  position: fixed; inset: 0; z-index: 180;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 60px 20px; overflow: auto;
  background: rgba(20, 22, 30, .4);
  backdrop-filter: blur(1px);
}
.aui-modal {
  width: 100%; max-width: 520px;
  background: var(--panel); border-radius: 10px;
  box-shadow: var(--shadow-md); border: 1px solid var(--border);
}
.aui-modal.modal-lg { max-width: 920px; }
.aui-modal-h {
  display: flex; align-items: center; padding: 15px 18px;
  border-bottom: 1px solid var(--border);
}
.aui-modal-h .mt { font-weight: 600; font-size: 15px; }
.aui-modal-b { padding: 18px; max-height: 70vh; overflow: auto; }
.aui-modal-f {
  padding: 13px 18px; border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end; gap: 9px;
}
.aui-peek {
  position: fixed; inset: 0; z-index: 150;
  background: rgba(20, 22, 30, .4); backdrop-filter: blur(1px);
}
.aui-sheet {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 151;
  width: 460px; max-width: 100vw;
  background: var(--panel); border-left: 1px solid var(--border);
  box-shadow: var(--shadow-md); display: flex; flex-direction: column;
}
.brain-rail-peek.aui-sheet { width: 440px; }
@media (max-width: 900px) {
  .aui-sheet, .brain-rail-peek.aui-sheet { width: 100vw; }
}
.aui-toast {
  background: #1c1c1e; color: #fff; padding: 11px 15px; border-radius: 8px;
  font-size: 12px; box-shadow: var(--shadow-md);
  display: flex; align-items: center; gap: 9px; max-width: 340px;
  pointer-events: none;
}
.aui-toast.err { background: #b91c1c; }
.aui-toast.ok { background: #15803d; }
.aui-toast.warn { background: #b45309; }
[data-theme="dark"] .aui-toast { background: #1c2740; }
[data-theme="dark"] .aui-toast.err { background: #b91c1c; }
[data-theme="dark"] .aui-toast.ok { background: #15803d; }
[data-theme="dark"] .aui-toast.warn { background: #b45309; }
.aui-menu-overlay {
  position: fixed; inset: 0; z-index: 960; background: transparent;
}
.aui-menu {
  position: fixed; width: 320px; max-height: 78vh; overflow: auto;
  background: var(--bg-card, #fff); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 18px 50px rgba(15, 23, 42, .22);
  padding: 8px; z-index: 961; transform-origin: center;
}
.aui-pop {
  pointer-events: none;
  z-index: 2000;
}
[data-theme="dark"] .aui-menu {
  background: #101827; box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
}

/* ===== Phần còn lại của app — cùng token, không chỉ vỏ ===== */
button:not(.toggle),
[role="button"],
.icon-btn,
.notif-btn {
  transition:
    background 200ms var(--aui-ease-color),
    background-color 200ms var(--aui-ease-color),
    border-color 200ms var(--aui-ease-color),
    box-shadow 200ms var(--aui-ease-color),
    color 200ms var(--aui-ease-color),
    opacity 200ms var(--aui-ease-color),
    transform var(--aui-press-dur) var(--aui-ease-spring-press);
}
button:not(.toggle):not(.input-clear):not(:disabled):active,
[role="button"]:not(.input-clear):active,
.icon-btn:active,
.notif-btn:active {
  transform: translateY(0.5px) scale(var(--aui-press));
}

.chk {
  transition:
    background-color 200ms var(--aui-ease-color),
    border-color 200ms var(--aui-ease-color),
    color 200ms var(--aui-ease-color),
    transform var(--aui-press-dur) var(--aui-ease-spring-press);
}
.chk:active:not(:disabled) { transform: scale(var(--aui-press)); }
.chk.on svg { animation: aui-check-pop 300ms var(--aui-ease-out) backwards; }
@keyframes aui-check-pop {
  from { transform: scale(0.5); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.toggle { transition: background-color 200ms var(--aui-ease-color); }
.toggle-knob { transition: transform var(--aui-toast-dur) var(--aui-ease-spring-toast); }

.select-search-drop {
  transform: translateY(4px) scale(0.8);
  transition: opacity var(--aui-menu-dur) var(--aui-ease-soft), transform var(--aui-menu-dur) var(--aui-ease-soft);
}
.select-search.open .select-search-drop { opacity: 1; transform: none; }
.select-search-input .ss-arrow { transition: transform 350ms var(--aui-ease-soft); }

.panel-card, .card, .sg-fold {
  transition: box-shadow var(--aui-fade) var(--aui-ease-color), border-color var(--aui-fade) var(--aui-ease-color);
}
.card:hover, .panel-card:hover, .sg-fold:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}
details[open] > :not(summary) { animation: aui-rise 350ms var(--aui-ease-soft) backwards; }
.progress > span { transition: width var(--aui-toast-dur) var(--aui-ease-spring-toast); }

/* Dashboard, CRM, Thu Chi và mọi màn cùng họ — đè nhịp 0.1–0.14s cũ. */
.stat, .co-card, .kcard, .hw-card, .kpi-card {
  transition: box-shadow 200ms var(--aui-ease-color), border-color 200ms var(--aui-ease-color), transform 200ms var(--aui-ease-out), background-color 200ms var(--aui-ease-color);
}
.row, .tbl tbody tr, .nav-item, .crm-row, .fin-row {
  transition: background-color 200ms var(--aui-ease-color), color 200ms var(--aui-ease-color), border-color 200ms var(--aui-ease-color);
}
.cu-tabs button, .cu-pill, .cu-btn-primary {
  transition: color 200ms var(--aui-ease-color), background-color 200ms var(--aui-ease-color), border-color 200ms var(--aui-ease-color), filter 200ms var(--aui-ease-color), transform var(--aui-press-dur) var(--aui-ease-spring-press);
}
.cu-tabs button:active, .cu-pill:active, .cu-btn-primary:active {
  transform: translateY(0.5px) scale(var(--aui-press));
}
.stat-grid > *, .co-grid > * {
  animation: aui-rise var(--aui-panel) var(--aui-ease-out) backwards;
}
.stat-grid > *:nth-child(2), .co-grid > *:nth-child(2) { animation-delay: 33ms; }
.stat-grid > *:nth-child(3), .co-grid > *:nth-child(3) { animation-delay: 66ms; }
.stat-grid > *:nth-child(4), .co-grid > *:nth-child(4) { animation-delay: 99ms; }
.stat-grid > *:nth-child(5), .co-grid > *:nth-child(5) { animation-delay: 132ms; }
.stat-grid > *:nth-child(n + 6), .co-grid > *:nth-child(n + 6) { animation-delay: 165ms; }

/* Từng dòng dữ liệu của mọi màn: việc, CRM, thu chi (bảng), hộp thư, quầy. */
:is(.row:not(.row-hdr), .kcard, .crm-hn-row, .crm-gkq, .tbl tbody tr, .ibx-row, .pos-item) {
  animation: aui-rise 280ms var(--aui-ease-out) backwards;
}
:is(.row:not(.row-hdr), .kcard, .crm-hn-row, .crm-gkq, .tbl tbody tr, .ibx-row, .pos-item):nth-child(2) { animation-delay: 33ms; }
:is(.row:not(.row-hdr), .kcard, .crm-hn-row, .crm-gkq, .tbl tbody tr, .ibx-row, .pos-item):nth-child(3) { animation-delay: 66ms; }
:is(.row:not(.row-hdr), .kcard, .crm-hn-row, .crm-gkq, .tbl tbody tr, .ibx-row, .pos-item):nth-child(4) { animation-delay: 99ms; }
:is(.row:not(.row-hdr), .kcard, .crm-hn-row, .crm-gkq, .tbl tbody tr, .ibx-row, .pos-item):nth-child(5) { animation-delay: 132ms; }
:is(.row:not(.row-hdr), .kcard, .crm-hn-row, .crm-gkq, .tbl tbody tr, .ibx-row, .pos-item):nth-child(6) { animation-delay: 165ms; }
:is(.row:not(.row-hdr), .kcard, .crm-hn-row, .crm-gkq, .tbl tbody tr, .ibx-row, .pos-item):nth-child(7) { animation-delay: 198ms; }
:is(.row:not(.row-hdr), .kcard, .crm-hn-row, .crm-gkq, .tbl tbody tr, .ibx-row, .pos-item):nth-child(n + 8) { animation-delay: 231ms; }
.ibx-nav-item { transition: background-color 200ms var(--aui-ease-color), color 200ms var(--aui-ease-color); }