/** 修改自定义的关闭和最小化图标的样式 */
:deep(.hover-box) {
  @apply w-28px h24px flex-center hover:bg-#e7e7e7;
  svg {
    color: #404040;
  }
}
:deep(.action-close) {
  svg {
    color: #404040;
  }
}
/** 改变输入框中的位置 */
:deep(.n-input .n-input__input, .n-input .n-input__textarea) {
  margin-left: 22px;
}

/** 隐藏naive UI的滚动条 */
:deep(
    .n-scrollbar > .n-scrollbar-rail.n-scrollbar-rail--vertical > .n-scrollbar-rail__scrollbar,
    .n-scrollbar + .n-scrollbar-rail.n-scrollbar-rail--vertical > .n-scrollbar-rail__scrollbar
  ) {
  display: none;
}

// 登录页面的头像容器     @author mint
.avatar-container {
  position: relative;
  width: 80px;
  height: 80px;
  margin: 0 auto;
  
  &::after {
    content: '';
    position: absolute;
    inset: -10px;
    background: rgba(107, 78, 171, 0.25);
    border-radius: 50%;
    z-index: -1;
    filter: blur(10px);
    animation: subtle-pulse 3s ease-in-out infinite;
  }

  .n-avatar {
    position: relative;
    z-index: 1;
    transform: translateY(0);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(107, 78, 171, 0.2);
    background: linear-gradient(135deg, #ffffff 0%, #f8f6ff 100%);
    border: 2px solid rgba(255, 255, 255, 0.9);

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 16px rgba(107, 78, 171, 0.25);
    }
  }
}

@keyframes subtle-pulse {
  0%, 100% {
    opacity: 0.8;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

// 输入框动画
.input-container {
  position: relative;
  transition: all 0.3s ease;

  .n-input {
    backdrop-filter: blur(8px);
    background: rgba(255, 255, 255, 0.8);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(107, 78, 171, 0.1);
    
    &:hover, &:focus {
      background: rgba(255, 255, 255, 0.95);
      transform: translateY(-1px);
      border-color: rgba(107, 78, 171, 0.3);
      box-shadow: 0 4px 12px rgba(107, 78, 171, 0.1);
    }
  }
}

// 按钮动画
.login-button {
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.2),
      transparent
    );
    transition: 0.5s;
  }

  &:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(107, 78, 171, 0.2);
    
    &::before {
      left: 100%;
    }
  }

  &:active {
    transform: translateY(1px);
  }
}

// 底部链接动画
.bottom-link {
  position: relative;
  
  &::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: currentColor;
    transition: width 0.3s ease;
  }
  
  &:hover::after {
    width: 100%;
  }
}

// 账号选择框动画
.account-box {
  animation: slide-in 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  
  .account-item {
    transition: all 0.2s ease;
    
    &:hover {
      background: rgba(107, 78, 171, 0.1);
      transform: translateX(4px);
    }
  }
}

@keyframes slide-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}