/* Headway Tools — motion (Chrome compositor-friendly)
 * Chỉ opacity + transform; duration đủ dài để nhận ra; GPU layer ổn định.
 */
:root {
  --hw-ease-in-out: cubic-bezier(0.25, 0.1, 0.25, 1);
  --hw-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --hw-ease-out: cubic-bezier(0.32, 0.72, 0, 1);
  --hw-ease-emphasized: cubic-bezier(0.22, 1, 0.36, 1);
  --hw-ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
  --hw-ease-bounce: cubic-bezier(0.34, 1.3, 0.64, 1);

  --hw-dur: 0.32s;
  --hw-dur-fast: 0.18s;
  --hw-dur-slow: 0.42s;
  --hw-dur-enter: 0.38s;
  --hw-dur-micro: 0.14s;
  --hw-dur-bounce: 0.55s;
  --hw-dur-loader: 0.32s;
}

@view-transition {
  navigation: none;
}

@keyframes hw-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes hw-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 12px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes hw-rise-soft {
  from {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes hw-float-in {
  from {
    opacity: 0;
    transform: translate3d(0, 14px, 0) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes hw-slide-in-left {
  from {
    opacity: 0;
    transform: translate3d(-10px, 0, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes hw-slide-in-right {
  from {
    opacity: 0;
    transform: translate3d(10px, 0, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes hw-pop {
  from {
    opacity: 0;
    transform: translate3d(0, 6px, 0) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes hw-scale-in {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes hw-drawer-in {
  from {
    opacity: 0;
    transform: translate3d(-12px, 0, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes hw-nudge {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(0, -1px, 0);
  }
}

@keyframes hw-shimmer {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

body.hw-shell:not(.hw-pending) .hw-tool-iframe {
  animation: none;
}

body.hw-shell .hw-view:not([hidden]):not(.hw-view-animating) {
  animation: none;
}

body.hw-tool-shell #hw-cursor-chat-panel,
body.hw-tool-shell #hw-cursor-chat-panel.open,
body.hw-tool-shell #hw-dbt-panel,
body.hw-tool-shell #hw-dbt-panel.open {
  animation: none !important;
}

.hw-grid > .hw-card {
  animation: hw-float-in var(--hw-dur-enter) var(--hw-ease) both;
  backface-visibility: hidden;
}

.hw-grid > .hw-card:nth-child(1) {
  animation-delay: 0.02s;
}
.hw-grid > .hw-card:nth-child(2) {
  animation-delay: 0.05s;
}
.hw-grid > .hw-card:nth-child(3) {
  animation-delay: 0.08s;
}
.hw-grid > .hw-card:nth-child(4) {
  animation-delay: 0.11s;
}
.hw-grid > .hw-card:nth-child(5) {
  animation-delay: 0.14s;
}

a.hw-card {
  transition:
    border-color var(--hw-dur-fast) var(--hw-ease-in-out),
    transform var(--hw-dur) var(--hw-ease),
    box-shadow var(--hw-dur) var(--hw-ease),
    background var(--hw-dur-fast) var(--hw-ease-in-out);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
}

a.hw-card:hover {
  border-color: rgba(13, 159, 144, 0.45);
  transform: translate3d(0, -4px, 0) scale(1.02);
  box-shadow: 0 16px 36px rgba(13, 159, 144, 0.16);
}

a.hw-card:active {
  transform: translate3d(0, 0, 0) scale(0.985);
}

.hw-card-ico {
  transition:
    transform var(--hw-dur) var(--hw-ease),
    background var(--hw-dur-fast) var(--hw-ease-in-out);
}

a.hw-card:hover .hw-card-ico {
  transform: scale(1.04);
}

.hw-nav-link {
  transition:
    background var(--hw-dur-fast) var(--hw-ease-in-out),
    color var(--hw-dur-fast) var(--hw-ease-in-out),
    transform var(--hw-dur-fast) var(--hw-ease),
    box-shadow var(--hw-dur-fast) var(--hw-ease);
}

.hw-nav-link:hover {
  transform: none;
}

.hw-nav-link:active {
  transform: scale(0.97);
}

.hw-nav-dock .hw-nav-link,
.hw-nav-dock .hw-nav-link:hover,
.hw-nav-dock .hw-nav-link:active {
  transform: translate3d(var(--hw-dock-shift, 0px), 0, 0);
}

.hw-nav-dock .hw-nav-link.is-bounce {
  transform: translate3d(var(--hw-dock-shift, 0px), 0, 0);
}

@keyframes hw-dock-bounce {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale3d(var(--hw-dock-scale, 1), var(--hw-dock-scale, 1), 1);
  }
  26% {
    transform: translate3d(0, 14px, 0) scale3d(var(--hw-dock-scale, 1), var(--hw-dock-scale, 1), 1);
  }
  48% {
    transform: translate3d(0, -5px, 0) scale3d(var(--hw-dock-scale, 1), var(--hw-dock-scale, 1), 1);
  }
  70% {
    transform: translate3d(0, 6px, 0) scale3d(var(--hw-dock-scale, 1), var(--hw-dock-scale, 1), 1);
  }
}

@keyframes hw-dock-dot-bounce {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  26% {
    transform: translate3d(0, 14px, 0);
  }
  48% {
    transform: translate3d(0, -5px, 0);
  }
  70% {
    transform: translate3d(0, 6px, 0);
  }
}

@keyframes hw-chrome-bounce {
  0%,
  100% {
    transform: scale(var(--hw-chrome-scale, 1)) translate3d(0, 0, 0);
  }
  28% {
    transform: scale(var(--hw-chrome-scale, 1)) translate3d(0, 8px, 0);
  }
  52% {
    transform: scale(var(--hw-chrome-scale, 1)) translate3d(0, -3px, 0);
  }
  74% {
    transform: scale(var(--hw-chrome-scale, 1)) translate3d(0, 4px, 0);
  }
}

html:not(.hw-glass-ready) .hw-brand:hover {
  transform: scale(1.04) translateY(-1px);
}

html:not(.hw-glass-ready) .hw-nav-autohide-btn:hover,
html:not(.hw-glass-ready) .hw-nav-notif:hover,
html:not(.hw-glass-ready) .hw-nav-user:hover,
html:not(.hw-glass-ready) .hw-nav-menu-btn:hover {
  transform: scale(1.08);
}

html:not(.hw-glass-ready) .hw-brand:active,
html:not(.hw-glass-ready) .hw-nav-autohide-btn:active,
html:not(.hw-glass-ready) .hw-nav-notif:active,
html:not(.hw-glass-ready) .hw-nav-user:active {
  transform: scale(0.97);
}

html:not(.hw-glass-ready) .hw-nav-link.is-active {
  box-shadow: 0 6px 14px rgba(13, 159, 144, 0.22);
}

.hw-btn,
.btn,
.tb-btn {
  transition:
    background var(--hw-dur-fast) var(--hw-ease-in-out),
    border-color var(--hw-dur-fast) var(--hw-ease-in-out),
    color var(--hw-dur-fast) var(--hw-ease-in-out),
    transform var(--hw-dur-fast) var(--hw-ease),
    box-shadow var(--hw-dur-fast) var(--hw-ease);
}

.hw-btn:hover:not(:disabled),
.btn:hover:not(:disabled) {
  transform: none;
}

.hw-btn:active:not(:disabled),
.btn:active:not(:disabled) {
  transform: scale(0.97);
}

html:not(.hw-in-hub) .app-shell,
html:not(.hw-in-hub) .hw-chat-shell,
html:not(.hw-in-hub) .hw-tasks-v-app,
html:not(.hw-in-hub) .hw-ui-app,
html:not(.hw-in-hub) .hw-design-shell {
  animation: hw-fade var(--hw-dur-slow) var(--hw-ease) both;
}

html:not(.hw-in-hub) .sidebar,
html:not(.hw-in-hub) .hw-chat-list,
html:not(.hw-in-hub) .hw-tasks-sidebar,
html:not(.hw-in-hub) .hw-page-list {
  animation: hw-slide-in-left var(--hw-dur-enter) var(--hw-ease) both;
}

html:not(.hw-in-hub) .editor-panel,
html:not(.hw-in-hub) .hw-chat-thread,
html:not(.hw-in-hub) .hw-tasks-main,
html:not(.hw-in-hub) .hw-ui-center {
  animation: hw-rise-soft var(--hw-dur-slow) var(--hw-ease) both;
  animation-delay: 0.04s;
}

html.hw-in-hub .app-shell,
html.hw-in-hub .hw-chat-shell,
html.hw-in-hub .hw-tasks-v-app,
html.hw-in-hub .hw-ui-app,
html.hw-in-hub .hw-design-shell,
html.hw-in-hub .sidebar,
html.hw-in-hub .hw-chat-list,
html.hw-in-hub .hw-tasks-sidebar,
html.hw-in-hub .hw-page-list,
html.hw-in-hub .editor-panel,
html.hw-in-hub .hw-chat-thread,
html.hw-in-hub .hw-tasks-main,
html.hw-in-hub .hw-ui-center {
  animation: none !important;
}

.file-row,
.dir-row,
.tree-row,
.doc-item button.doc-open,
.hw-chat-list-item,
.hw-task-row,
.hw-project-row,
.hw-page-list .hw-page-item,
.hw-issue-filter-tab,
.hw-cursor-chat-session,
.hw-cursor-chat-session-item,
.hw-dbt-table-item,
.tb-btn {
  transition:
    background var(--hw-dur-fast) var(--hw-ease-in-out),
    color var(--hw-dur-fast) var(--hw-ease-in-out),
    transform var(--hw-dur-fast) var(--hw-ease),
    border-color var(--hw-dur-fast) var(--hw-ease-in-out),
    box-shadow var(--hw-dur-fast) var(--hw-ease);
}

.file-row:hover,
.dir-row:hover,
.tree-row:hover,
.hw-chat-list-item:hover,
.hw-task-row:hover,
.hw-cursor-chat-session:hover,
.hw-cursor-chat-session-item:hover,
.hw-dbt-table-item:hover {
  transform: none;
}

.tree-row:active,
.file-row:active,
.hw-dbt-table-item:active,
.hw-cursor-chat-session-item:active,
.hw-task-row:active,
.hw-issue-filter-tab:active,
.tb-btn:active:not(:disabled) {
  transform: scale(0.985);
}

.doc-tree.root > .tree-node,
.hw-dbt-table-list > .hw-dbt-table-item,
.hw-cursor-chat-session-list > .hw-cursor-chat-session-item,
.hw-cursor-chat-session-list > .hw-cursor-chat-folder,
.hw-project-table tbody > .hw-project-row,
.hw-tasks-list > .hw-task-row {
  animation: hw-fade var(--hw-dur-fast) var(--hw-ease) both;
  backface-visibility: hidden;
}

.hw-nav-user-menu,
.hw-notif-panel,
.ctx-menu,
.modal,
.hw-dialog-panel {
  animation: hw-scale-in var(--hw-dur) var(--hw-ease) both;
}

.hw-cursor-chat-panel.open,
.hw-dbt-panel.open {
  animation: hw-pop var(--hw-dur-enter) var(--hw-ease) both;
}

.hw-cursor-chat-launcher,
.hw-dbt-launcher {
  transition: transform var(--hw-dur-fast) var(--hw-ease), box-shadow var(--hw-dur) var(--hw-ease);
}

.hw-cursor-chat-launcher:hover,
.hw-dbt-launcher:hover {
  transform: scale(1.04);
}

.hw-cursor-chat-launcher:active,
.hw-dbt-launcher:active {
  transform: scale(0.96);
}

/* Vuetify overlay / dialog / menu — sheet kính Apple */
.v-overlay__scrim {
  transition-duration: var(--hw-dur-enter) !important;
  transition-timing-function: var(--hw-ease) !important;
}

.dialog-transition-enter-active,
.dialog-bottom-transition-enter-active,
.dialog-top-transition-enter-active,
.scale-transition-enter-active {
  transition:
    transform var(--hw-dur) var(--hw-ease) !important,
    opacity var(--hw-dur-fast) var(--hw-ease) !important;
}

.dialog-transition-leave-active,
.dialog-bottom-transition-leave-active,
.dialog-top-transition-leave-active,
.scale-transition-leave-active {
  transition:
    transform var(--hw-dur) var(--hw-ease-out) !important,
    opacity var(--hw-dur-fast) var(--hw-ease-out) !important;
}

.dialog-transition-enter-from,
.dialog-transition-leave-to,
.scale-transition-enter-from,
.scale-transition-leave-to {
  opacity: 0 !important;
  transform: translate3d(0, 16px, 0) scale(0.96) !important;
}

.dialog-transition-enter-to,
.dialog-transition-leave-from,
.scale-transition-enter-to,
.scale-transition-leave-from {
  opacity: 1 !important;
  transform: none !important;
}

.fade-transition-enter-active,
.fade-transition-leave-active,
.scroll-y-transition-enter-active,
.scroll-y-transition-leave-active,
.slide-y-transition-enter-active,
.slide-y-transition-leave-active,
.menu-transition-enter-active,
.menu-transition-leave-active {
  transition-duration: var(--hw-dur) !important;
  transition-timing-function: var(--hw-ease) !important;
}

.tree-children {
  display: grid;
  grid-template-rows: 1fr;
}

.tree-children-clip {
  min-height: 0;
  overflow: hidden;
  contain: layout;
}

.hw-tree-fold-enter-active,
.hw-tree-fold-leave-active {
  display: grid;
  overflow: hidden;
  transition:
    grid-template-rows var(--hw-dur-fast) var(--hw-ease),
    opacity var(--hw-dur-micro) linear;
}

.hw-tree-fold-enter-from,
.hw-tree-fold-leave-to {
  grid-template-rows: 0fr;
  opacity: 0;
}

.hw-tree-fold-enter-to,
.hw-tree-fold-leave-from {
  grid-template-rows: 1fr;
  opacity: 1;
}

.tree-twist {
  transition: transform var(--hw-dur-fast) var(--hw-ease);
  transform-origin: 50% 55%;
  backface-visibility: hidden;
}

.tree-twist.open {
  transform: rotate(90deg);
}

.tree-icon.folder {
  transition:
    transform var(--hw-dur-fast) var(--hw-ease),
    color var(--hw-dur-fast) var(--hw-ease-in-out);
}

.tree-icon.folder.open {
  transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }

  .hw-grid > .hw-card,
  body.hw-shell .hw-view:not([hidden]),
  body.hw-shell:not(.hw-pending) .hw-tool-iframe,
  .app-shell,
  .hw-chat-shell,
  .hw-tasks-v-app,
  .hw-ui-app,
  .hw-design-shell,
  .sidebar,
  .hw-chat-list,
  .hw-tasks-sidebar,
  .hw-page-list,
  .editor-panel,
  .hw-chat-thread,
  .hw-tasks-main,
  .hw-ui-center,
  .hw-cursor-chat-panel.open,
  .hw-dbt-panel.open,
  .hw-nav-user-menu,
  .hw-notif-panel,
  .ctx-menu,
  .modal,
  .hw-dialog-panel,
  .v-overlay__scrim,
  .dialog-transition-enter-active,
  .dialog-transition-leave-active,
  .fade-transition-enter-active,
  .fade-transition-leave-active,
  .scale-transition-enter-active,
  .scale-transition-leave-active,
  .menu-transition-enter-active,
  .menu-transition-leave-active,
  .hw-view.hw-view-enter,
  .hw-view.hw-view-leave,
  .hw-issue-sheet-enter-active,
  .hw-issue-sheet-leave-active,
  .hw-issue-page-enter-active,
  .hw-issue-page-leave-active,
  .hw-layout-page-enter-active,
  .hw-layout-page-leave-active,
  .hw-tree-fold-enter-active,
  .hw-tree-fold-leave-active,
  .dialog-transition-enter-from,
  .dialog-transition-leave-to,
  .scale-transition-enter-from,
  .scale-transition-leave-to {
    animation: none !important;
    transition: none !important;
  }

  a.hw-card:hover,
  .hw-nav-link:hover,
  .hw-brand:hover,
  .hw-nav-autohide-btn:hover,
  .hw-nav-notif:hover,
  .hw-nav-user:hover,
  .file-row:hover,
  .dir-row:hover,
  .tree-row:hover,
  .hw-chat-list-item:hover,
  .hw-task-row:hover,
  .hw-cursor-chat-session:hover,
  .hw-cursor-chat-session-item:hover,
  .hw-dbt-table-item:hover,
  .hw-btn:hover:not(:disabled),
  .btn:hover:not(:disabled),
  .tb-btn:hover:not(:disabled),
  .hw-cursor-chat-launcher:hover,
  .hw-dbt-launcher:hover {
    transform: none;
  }

  .tree-row:active,
  .file-row:active,
  .hw-dbt-table-item:active,
  .hw-cursor-chat-session-item:active,
  .hw-task-row:active,
  .hw-issue-filter-tab:active,
  .tb-btn:active:not(:disabled) {
    transform: none;
  }

  .doc-tree.root > .tree-node,
  .hw-dbt-table-list > .hw-dbt-table-item,
  .hw-cursor-chat-session-list > .hw-cursor-chat-session-item,
  .hw-cursor-chat-session-list > .hw-cursor-chat-folder,
  .hw-project-table tbody > .hw-project-row,
  .hw-tasks-list > .hw-task-row {
    animation: none !important;
  }

  .hw-nav-dock .hw-nav-link.is-bounce .hw-nav-dock-icon,
  .hw-nav-dock .hw-nav-link.is-bounce.is-active::after,
  .hw-brand.is-bounce,
  .hw-nav-menu-btn.is-bounce,
  .hw-nav-right .is-bounce {
    animation: none !important;
  }
}