/* 在你的样式文件中 */
.attach-file {
    display: flex;
    align-items: center;
    /* 垂直居中对齐 */
    gap: 10px;
    /* 文件名和删除按钮之间的间距 */
    padding: 8px 12px;
    border-radius: 4px;
    background-color: #f5f5f5;
    /* 背景颜色 */
    cursor: pointer;
    /* 鼠标悬停效果 */
    transition: background-color 0.2s;
    /* 平滑过渡效果 */
}

.attach-file:hover {
    background-color: #e9e9e9;
    /* 悬停时的背景颜色 */
}

.file-name {
    flex-grow: 1;
    /* 文件名占据剩余空间 */
    font-size: 14px;
    color: #333;
    overflow: hidden;
    /* 防止文件名过长溢出 */
    text-overflow: ellipsis;
    /* 超出部分显示省略号 */
    white-space: nowrap;
}

.delete-file {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    /* 圆形按钮 */
    background-color: #fff;
    cursor: pointer;
    transition: all 0.2s;
}

.delete-file:hover {
    background-color: #f0f0f0;
    /* 悬停时的按钮背景 */
    transform: scale(1.1);
    /* 悬停时轻微放大 */
}