.action-drawer-mask {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: flex-end;
  background: rgba(15, 23, 42, 0.34);
  animation: actionDrawerMaskIn 180ms ease-out both;
}

.action-drawer-mask.is-closing {
  pointer-events: none;
  animation: actionDrawerMaskOut 180ms ease both;
}

.action-drawer {
  width: 100%;
  max-height: 78vh;
  padding: 0 48rpx calc(34rpx + env(safe-area-inset-bottom));
  overflow: hidden;
  border-radius: 34rpx 34rpx 0 0;
  background: #ffffff;
  box-shadow: 0 -22rpx 48rpx rgba(15, 23, 42, 0.14);
  box-sizing: border-box;
  animation: actionDrawerIn 240ms cubic-bezier(0.16, 1, 0.3, 1) both;
  transform: translate3d(0, 0, 0);
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1), max-height 260ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.action-drawer-mask.is-closing .action-drawer {
  animation: actionDrawerOut 190ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.action-drawer.dragging {
  transition: none;
}

.action-drawer.expanded {
  max-height: 92vh;
}

.action-drawer__drag-zone {
  padding-top: 18rpx;
}

.action-drawer__handle {
  width: 80rpx;
  height: 8rpx;
  margin: 0 auto 26rpx;
  border-radius: 999rpx;
  background: #d7deea;
  transition: transform 160ms ease, background 160ms ease;
}

.action-drawer__drag-zone:active .action-drawer__handle {
  transform: scaleX(1.16);
  background: #bfc8d8;
}

.action-drawer__mark {
  width: 104rpx;
  height: 104rpx;
  margin: 2rpx auto 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4rpx solid rgba(111, 153, 126, 0.5);
  border-radius: 999rpx;
  background: rgba(111, 153, 126, 0.1);
  color: #6f997e;
  font-size: 54rpx;
  font-weight: 850;
  line-height: 1;
}

.action-drawer--danger .action-drawer__mark {
  border-color: rgba(220, 38, 38, 0.28);
  background: #fff7f7;
  color: #dc2626;
}

.action-drawer__title {
  display: block;
  color: #111827;
  font-size: 34rpx;
  font-weight: 850;
  line-height: 1.38;
  text-align: center;
}

.action-drawer__content-wrap {
  max-height: 260rpx;
  margin-top: 18rpx;
}

.action-drawer__content {
  display: block;
  color: #667085;
  font-size: 26rpx;
  line-height: 1.65;
  text-align: center;
  white-space: pre-wrap;
}

.action-drawer__actions {
  margin-top: 34rpx;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18rpx;
}

.action-drawer__actions.is-single {
  grid-template-columns: 1fr;
}

.action-drawer__btn {
  min-height: 82rpx;
  padding: 0 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18rpx;
  font-size: 28rpx;
  font-weight: 850;
  transition: transform 120ms ease, opacity 120ms ease, box-shadow 120ms ease;
}

.action-drawer__btn:active {
  transform: scale(0.985);
}

.action-drawer__btn--cancel {
  border: 1rpx solid #d7e2f1;
  background: #ffffff;
  color: #667085;
}

.action-drawer__btn--confirm {
  color: #ffffff;
}

.action-drawer__btn--primary {
  background: #123e7c;
  box-shadow: 0 12rpx 26rpx rgba(18, 62, 124, 0.18);
}

.action-drawer__btn--danger {
  background: #dc2626;
  box-shadow: 0 12rpx 26rpx rgba(220, 38, 38, 0.16);
}

@keyframes actionDrawerMaskIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes actionDrawerMaskOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes actionDrawerIn {
  from { transform: translate3d(0, 100%, 0); }
  to { transform: translate3d(0, 0, 0); }
}

@keyframes actionDrawerOut {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, 100%, 0); }
}
