/* 疊層與回饋元件：選單、骨架、對話框、Toast、空狀態。 */

/* ── 使用者選單 ───────────────────────────── */

.menu {
  position: relative;
}

.menu__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-2) var(--sp-1) var(--sp-1);
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.menu__trigger:hover,
.menu__trigger[aria-expanded='true'] {
  background: var(--bg-soft);
  border-color: var(--line);
}

.menu__avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--avatar-plate);
  object-fit: cover;
  flex: none;
}

.menu__name {
  font-size: var(--fs-sm);
  font-weight: 600;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu__panel {
  position: absolute;
  right: 0;
  top: calc(100% + var(--sp-2));
  min-width: 208px;
  padding: var(--sp-2);
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 50;
  animation: zf-fade-up var(--dur) var(--ease) both;
}

.menu__meta {
  padding: var(--sp-2) var(--sp-3) var(--sp-3);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--sp-2);
}

.menu__meta-name {
  font-weight: 650;
  font-size: var(--fs-sm);
}

.menu__meta-sub {
  color: var(--text-3);
  font-size: var(--fs-xs);
}

.menu__item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  color: var(--text);
  text-align: left;
  transition: background var(--dur-fast) var(--ease);
}

.menu__item:hover {
  background: var(--bg-soft);
  text-decoration: none;
}

.menu__item--danger {
  color: var(--danger);
}

/* ── 骨架載入 ─────────────────────────────── */

@keyframes zf-shimmer {
  from { background-position: -200% 0; }
  to { background-position: 200% 0; }
}

.skeleton {
  border-radius: var(--radius-sm);
  background: linear-gradient(
    90deg,
    var(--bg-soft) 25%,
    var(--bg-sunken) 37%,
    var(--bg-soft) 63%
  );
  background-size: 200% 100%;
  animation: zf-shimmer 1.4s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .skeleton {
    animation: none;
  }
}

/* ── 對話框 ───────────────────────────────── */

.modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: var(--sp-5);
  background: rgba(8, 10, 14, 0.55);
  backdrop-filter: blur(3px);
}

.modal__panel {
  width: min(440px, 100%);
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  animation: zf-fade-up var(--dur) var(--ease) both;
}

.modal__title {
  font-size: var(--fs-lg);
}

.modal__text {
  color: var(--text-2);
  font-size: var(--fs-sm);
}

.modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-3);
}

/* ── Toast ────────────────────────────────── */

.toasts {
  position: fixed;
  left: 50%;
  bottom: var(--sp-6);
  transform: translateX(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius-pill);
  background: var(--bg-elev);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-lg);
  font-size: var(--fs-sm);
  animation: zf-fade-up var(--dur) var(--ease) both;
}

.toast--ok { color: var(--ok); }
.toast--warn { color: var(--warn); }
.toast--danger { color: var(--danger); }

/* ── 空狀態 ───────────────────────────────── */

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-12) var(--sp-5);
  text-align: center;
}

.empty__icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  background: var(--bg-soft);
  color: var(--text-3);
}

.empty__title {
  font-weight: 650;
}

.empty__text {
  color: var(--text-2);
  font-size: var(--fs-sm);
  max-width: 40ch;
}