/* Popover, scrim, dialog, Dropdown menu */
/* ============ overlays ============ */
.scrim{
  position:absolute; inset:0; background:var(--color-overlay-scrim);
  opacity:0; pointer-events:none; transition:opacity .16s ease; z-index:30;
}
.scrim.on{opacity:1;pointer-events:auto}
/* Figma: Dropdown menu — 240px, bo 16, padding 8, không viền */
.dropdown-menu{
  position:absolute; top:calc(100% + 6px); left:var(--spacing-12); z-index:40;
  width:240px; max-width:calc(100vw - 2 * var(--spacing-12));
  background:var(--color-background-primary);
  border-radius:var(--radius-16); padding:var(--spacing-8);
  box-shadow:var(--elevation-dropdown);
  display:none;
}
.dropdown-menu.on{display:block;animation:drop .14s ease-out}
@keyframes drop{from{opacity:0;transform:translateY(-6px)}}
/* Figma: Project switch rộng hơn để tên dự án dài ít bị cắt */
.dropdown-menu--project-switch{width:300px}
.acc-btn{padding:0}
/* Figma: Avatar medium 40px, viền mảnh border/subtle */
.acc-btn .av{width:40px; height:40px; border:1px solid var(--color-border-subtle)}
/* Figma: .Seperator — sát hai mép, đệm dọc 2px; riêng Project switch thụt 12px, đệm 8px */
.dropdown-menu__separator{height:1px;background:var(--color-separator-non-opaque);margin:var(--spacing-2) 0}
.dropdown-menu__separator[hidden]{display:none}
.dropdown-menu--project-switch .dropdown-menu__separator{margin:var(--spacing-8) var(--spacing-12)}
@keyframes nudge{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
/* Figma: Dialog — lớp phủ đen 50%, hộp 300px bo 24, padding 24 */
.dialog-wrap{
  position:fixed; inset:0; z-index:70;
  display:grid; place-items:center; padding:var(--spacing-24);
  background:rgba(0,0,0,.5);
  animation:dlgFade .16s ease both;
}
.dialog-wrap[hidden]{display:none}
.dialog{
  width:100%; max-width:300px; padding:var(--spacing-24);
  display:flex; flex-direction:column; gap:var(--spacing-24);
  background:var(--color-background-primary); border-radius:var(--radius-24);
  animation:dlgPop .2s cubic-bezier(.2,.9,.25,1.2) both;
}
/* hộp được focus bằng code khi mở (để Escape/Tab bắt đầu từ trong dialog),
   không phải do người dùng chọn — không vẽ viền; các nút bên trong vẫn có */
.dialog:focus-visible{outline:none}
.dialog__content{display:flex; flex-direction:column; gap:var(--spacing-8)}
/* Title 3 */
.dialog h3{font:var(--text-title-3); letter-spacing:var(--tracking-title-3); margin:0; color:var(--color-text-primary)}
/* Body/Small */
.dialog__message{font:var(--text-subheadline); letter-spacing:var(--tracking-subheadline); margin:0; color:var(--color-text-secondary)}
.dialog__message[hidden]{display:none}
.dialog__buttons{display:flex; gap:var(--spacing-12)}
.dialog__buttons .btn{flex:1 1 0}
@keyframes dlgFade{from{opacity:0} to{opacity:1}}
@keyframes dlgPop{from{opacity:0; transform:scale(.94)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){
  .dialog-wrap,.dialog{animation:none}
}
/* stats */
.pop-tag{font:var(--text-caption); letter-spacing:var(--tracking-caption); color:var(--color-text-tertiary);}
.dropdown-menu.dropdown-menu--right{left:auto;right:var(--spacing-12)}
/* ---- mention menu ---- */
/* Figma: Dropdown menu/Tag Member — cách mép 12, cao tối đa 180, bo 16 */
.tag-member-menu{
  position:absolute;left:var(--spacing-12);right:var(--spacing-12);bottom:calc(100% - 4px);
  z-index:25;max-height:180px;overflow-y:auto;
  background:var(--color-background-primary);border-radius:var(--radius-16);
  padding:var(--spacing-8);box-shadow:var(--elevation-dropdown);
}
.tag-member-menu[hidden]{display:none}

/* Lớp chờ khi áp dụng ngôn ngữ / đồng mặc định (account.js): phủ toàn app,
   trắng 50% + làm mờ nền 20px, vòng xoay ở giữa. Chặn mọi cú chạm trong lúc chờ. */
.busy-overlay{
  position:fixed; inset:0; z-index:120;
  display:grid; place-items:center;
  background:rgb(255 255 255 / .5);
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  color:var(--color-accent-primary);
}
.busy-overlay[hidden]{display:none}
.busy-overlay .icon{animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}