// 导入全局样式变量
@import '@/styles/variables.scss';

// ===== Drawer 表单样式 =====

.rag-drawer {
    .ant-drawer-header {
        padding: $spacing-4 $spacing-lg;
        border-bottom: 1px solid $border-light;

        .ant-drawer-title {
            font-size: $font-2xl;
            font-weight: $font-weight-bold;
            color: $text-primary;
        }
    }

    .ant-drawer-body {
        padding: 0;
        overflow: hidden;
        height: 100%;
        display: flex;
        flex-direction: column;
    }
}

.drawer-form-container {
    height: 100%;
    padding: $spacing-lg;
    overflow-y: auto;

    // 表单区域
    .form-section {
        // 表单项样式由全局 .ant-form-item 控制
    }

    // 图标选择区域
    .icon-select-section {
        display: flex;
        align-items: center;
        gap: $spacing-xl;
        padding: $spacing-lg;
        background: $bg-tertiary;
        border-radius: $radius-xl;
        margin-bottom: $spacing-md;

        .icon-preview-wrapper {
            flex-shrink: 0;

            .icon-preview-box {
                width: $font-3xl * 4;  // 80px
                height: $font-3xl * 4;
                border-radius: $radius-xl;
                display: flex;
                align-items: center;
                justify-content: center;
                border: 1px solid $border-base;
                transition: all 0.3s ease;

                .icon-preview-placeholder {
                    color: $text-hint;
                    font-size: $font-sm;
                }
            }
        }

        .icon-actions {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: $spacing-md;

            .color-label {
                font-size: $font-sm;
                color: $text-secondary;
            }
        }
    }

    // 分割线
    .section-divider {
        margin: $spacing-lg 0 $spacing-lg 0;

        &::before {
            content: '';
            display: inline-block;
            width: 4px;
            height: 16px;
            background: $primary-color;
            border-radius: 2px;
            margin-right: $spacing-2;
            vertical-align: middle;
        }

        span {
            font-size: $font-lg;
            font-weight: $font-weight-semibold;
            color: $text-primary;
        }
    }

    // 标签信息区域
    .tags-info {
        border: 1px solid $border-base;
        border-radius: $radius-md;
        padding: $spacing-sm $spacing-lg;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: $spacing-md;
        min-height: 46px;
        background: $bg-secondary;

        .tags-list {
            flex: 1;
            display: flex;
            flex-wrap: wrap;
            gap: $spacing-1;
            min-width: 0;

            .ant-tag {
                margin: 0;
            }
        }

        .clear-all {
            cursor: pointer;
            color: $text-secondary;
            font-size: $icon-lg;
            transition: color 0.2s ease;

            &:hover {
                color: $error-color;
            }
        }
    }

    // 预设问题区域
    .preset-questions {
        margin-top: $spacing-md;

        .questions-list {
            display: flex;
            flex-direction: column;
            gap: $spacing-sm;
        }

        .question-item {
            display: flex;
            align-items: center;
            gap: $spacing-md;

            label {
                min-width: 70px;
                color: $text-secondary;
                font-size: $font-md;
                font-weight: $font-weight-medium;
            }

            .question-input {
                flex: 1;
            }

            .question-actions {
                display: flex;
                gap: $spacing-2;
                flex-shrink: 0;

                .question-icon {
                    font-size: $icon-lg;
                    cursor: pointer;
                    transition: all 0.2s ease;

                    &.add {
                        color: $success-color;

                        &:hover {
                            color: $success-dark;
                            transform: scale(1.1);
                        }
                    }

                    &.del {
                        color: $error-color;

                        &:hover {
                            color: $error-dark;
                            transform: scale(1.1);
                        }
                    }
                }
            }
        }
    }
}

// 表单样式优化
.drawer-form-container {
    .ant-form {
        .ant-form-item {
            margin-bottom: $spacing-md;

            .ant-form-item-label {
                > label {
                    font-size: $font-base;
                    font-weight: $font-weight-medium;
                    color: $text-primary;
                }
            }

            .ant-form-item-extra {
                font-size: $font-base;
                color: $text-hint;
                margin-top: $spacing-1;
            }

            .ant-input,
            .ant-select,
            .ant-cascader,
            .ant-input-number {
                width: 100%;
            }

            .ant-input-affix-wrapper,
            .ant-select-selector,
            .ant-input-number-input-wrap {
                border-radius: $radius-md;
                transition: all 0.2s ease;
            }

            .ant-input:focus,
            .ant-input-affix-wrapper:focus-within {
                border-color: $primary-color;
                box-shadow: 0 0 0 2px rgba($primary-color, 0.1);
            }
        }
    }
}

// 滚动条样式
.drawer-form-container {
    &::-webkit-scrollbar {
        width: 6px;
    }

    &::-webkit-scrollbar-track {
        background: transparent;
    }

    &::-webkit-scrollbar-thumb {
        background: rgba($text-disabled, 0.5);
        border-radius: $spacing-1;

        &:hover {
            background: rgba($text-disabled, 0.8);
        }
    }
}

// 可见性单选样式
.visibility-radio {
    display: flex;
    width: 100%;

    .ant-radio-button-wrapper {
        flex: 1;
        text-align: center;
        height: $search-height - 8;  // 40px
        line-height: $search-height - 10;
        border-radius: $radius-md;

        &:first-child {
            border-radius: $radius-md 0 0 $radius-md;
        }

        &:last-child {
            border-radius: 0 $radius-md $radius-md 0;
        }

        &::before {
            display: none;
        }
    }
}
