/* 草稿箱页面样式 */
.draft-box {
    min-height: 100vh;
    background-color: #f5f5f5;
    display: flex;
    flex-direction: column;
  
    &-navbar {
      background-color: #1a6fb8 !important; /* 保持与个人中心一致的顶部颜色 */
      .am-navbar-title {
        color: #fff !important; /* 确保标题是白色 */
      }
      .am-navbar-left-icon {
        color: #fff !important; /* 确保返回箭头是白色 */
      }
      flex-shrink: 0; // 防止导航栏被压缩
    }
  
    .am-navbar-content { // 尝试 targeting NavBarPage 的内容区 (需要验证) 
        display: flex;
        flex-direction: column;
        flex: 1; // 占据剩余空间
        overflow: hidden; // 防止内容溢出
    }
  
    /* 搜索区域 - 外层容器 */
    &-search {
      padding: 16px;
      background-color: #fff;
      border-bottom: 1px solid #f0f0f0;
      flex-shrink: 0; // 防止搜索区被压缩
    }

    /* 搜索区域 - 内层容器 */
    .search-inner-container {
      display: flex;
      align-items: center;
      background: #f2f3f5; // 内层容器灰色背景
      border-radius: 5px; // 内层容器圆角
      height: 36px;
      padding: 0 8px; // 内层容器左右内边距
      box-sizing: border-box;

      .search-input {
        flex: 1;
        margin-right: 8px;
        border: none;
        background: transparent;
        height: 100%;
        padding-left: 0; // 重置之前的 padding

        // 去除 antd input 的 focus 效果
        .ant-input,
        .ant-input:focus,
        .ant-input-focused {
            background: transparent;
            box-shadow: none !important;
            border-color: transparent !important;
            outline: none !important;
        }
        .ant-input-affix-wrapper,
        .ant-input-affix-wrapper:focus,
        .ant-input-affix-wrapper-focused {
            background: transparent !important;
            border-color: transparent !important;
            box-shadow: none !important;
            outline: none !important;
        }

        .ant-input-prefix {
           margin-right: 4px;
           color: #999;
        }
      }

      .search-button {
        position: relative; // 为了定位伪元素
        padding: 0 8px; // 按钮左右内边距，给文字和竖线空间
        width: auto; // 让宽度自适应内容
        height: auto; // 让高度自适应内容
        border: none;
        background: none !important; // 强制去除背景
        color: #1a6fb8;
        font-weight: 500;
        font-size: 15px;
        line-height: 36px;
        box-shadow: none !important; // 强制去除点击阴影
        cursor: pointer; // 保持指针样式

        // 添加左侧竖线
        &::before {
          content: '';
          position: absolute;
          left: 0; // 定位到按钮的左边
          top: 50%;
          transform: translateY(-50%);
          width: 1px;
          height: 14px; // 竖线高度
          background-color: #d9d9d9; // 竖线颜色
        }
      }
    }
  
    /* 记录总数 */
    &-summary {
    padding-left: 12px;
    padding-top: 12px;
    padding-bottom: 12px;
      font-size: 15px;
      color: #000;
      font-weight: 400;
      flex-shrink: 0; // 防止摘要区被压缩

      .summary-total {
        color: #1a6fb8;
        font-weight: 500;
      }
    }
  
    /* 草稿列表 */
    &-list {
      flex: 1; // 占据剩余的垂直空间
      background-color: #f5f5f5;
      padding: 0 12px;
      overflow-y: auto; // 内容超出时滚动
  
      .ant-list-item {
        background-color: #fff;
        margin-bottom: 12px;
        border-radius: 8px;
        padding: 16px;
        border: none; // 移除默认边框
        display: flex; // 使用flex布局排列内容和按钮
        justify-content: space-between;
        align-items: flex-start; // 顶部对齐
      }
    }

    /* 列表项内容 */
    .draft-item-content {
        flex: 1; // 占据主要空间
    }

    /* 列表项标题 */
    .draft-item-title {
        font-size: 16px;
        color: #333;
        margin-bottom: 8px;
        font-weight: 500;
    }

    /* 标签区域 */
    .draft-item-tags {
        margin-bottom: 8px;
    }

    /* 标签样式 */
    .draft-item-tag {
        background-color: #e6f7ff;
        border-color: #91d5ff;
        color: #1890ff;
        font-size: 12px;
        font-weight: 400;
        margin-right: 8px;
        margin-bottom: 4px; // 标签换行时的间距
        padding: 2px 6px;
        border-radius: 4px;
    }

    /* 保存时间 + 操作按钮的容器 */
    .draft-item-bottom {
        display: flex;
        justify-content: space-between; // 时间靠左，按钮靠右
        align-items: center; // 垂直居中
        margin-top: 12px; // 与上方内容的间距
        padding-top: 12px; // 虚线上方的间距
        border-top: 1px dotted #ccc; // 添加虚线上边框
    }

    /* 保存时间 */
    .draft-item-time {
        font-size: 14px;
        color: #999;
        white-space: nowrap; // 防止时间换行
        margin-right: 8px; // 与按钮组的最小间距
    }

    /* 操作按钮区域 */
    .draft-item-actions {
        display: flex;
        align-items: center; // 垂直居中按钮
        gap: 8px; // 按钮之间的间距
    }

    /* 删除按钮 */
    .draft-item-delete-btn {
        border-color: #ff4d4f;
        color: #ff4d4f;
        border-radius: 16px;
        height: 32px;
        padding: 0 12px;
        font-size: 14px;

        &:hover, &:focus {
            border-color: #ff7875;
            color: #ff7875;
        }
    }

    /* 修改按钮 */
    .draft-item-modify-btn {
        border-radius: 16px;
        height: 32px;
        padding: 0 12px;
        font-size: 14px;
        background-color: #1A6FB8; // 修改背景色
        border-color: #1A6FB8; // 同时修改边框色

        &:hover,
        &:focus {
            background-color: #155a9b; // 添加 hover 效果
            border-color: #155a9b;
        }
    }
  
    /* 列表底部提示 */
    &-footer {
      text-align: center;
      color: #999;
      padding-top: 0px;
      padding-bottom: 12px;
      flex-shrink: 0; // 防止页脚被压缩
      background-color: #f5f5f5; // 确保背景色一致
      font-size: 14px;
      font-weight: 400;
      line-height: 22px;
    }

    /* 适配小屏幕 */
    @media screen and (max-width: 375px) {
        &-search { // 外层
            padding: 12px;
        }
        .search-inner-container { // 内层
            height: 32px;
            padding: 0 6px;
            .search-input {
                .ant-input-prefix {
                    margin-right: 2px;
                }
            }
            .search-button {
                font-size: 14px;
                line-height: 32px;
                padding: 0 6px; // 调整小屏幕下的 padding
                &::before {
                     height: 12px; // 调整小屏幕下的竖线高度
                }
            }
        }
        &-summary {
            padding-left: 12px;
            padding-top: 10px;
            padding-bottom: 10px;
            font-size: 13px;
            .summary-total {
               // margin: 0 2px; // 移除外边距
            }
        }
        &-list {
            padding: 0 12px;
            .ant-list-item {
                padding: 12px;
                margin-bottom: 10px;
            }
        }
        .draft-item-title {
            font-size: 15px;
        }
        .draft-item-tag {
            font-size: 12px;
        }
        .draft-item-bottom {
            margin-top: 10px;
            padding-top: 10px;
        }
        .draft-item-time {
            font-size: 14px;
        }
        .draft-item-delete-btn,
        .draft-item-modify-btn {
            height: 28px;
            padding: 0 10px;
            font-size: 13px;
        }
        &-footer {
            padding: 12px 0;
        }
        .am-navbar-content { // 如果目标类名正确
            // 小屏幕下的 flex 调整（如果需要）
        }
    }
  }