@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {

    .dark {
        --accent: 0 0% 100% / 8%; /* hsl(210 30% 96%) */
    }
}

@layer base {
    * {
        @apply border-border;
    }

    body {
        @apply bg-background text-foreground;
        font-feature-settings: "rlig" 1, "calt" 1;
    }
}

@layer components {
    .knowledge-header{
        margin-bottom: 18px;
        line-height: 35px;
        height: 35px;

        .knowledge-title{
            font-weight: 600;
            font-size: 18px;
            color: #FEFEFE;
            display: inline-block;

            .title-list{
                display: inline-block;

                .title-item{
                    display: inline-block;

                    & span {
                        padding: 0px 15px;
                    }

                    & label{
                        cursor: pointer;
                    }
                }

                .title-item:last-child label{
                    cursor: unset;
                }
            }
        }

        .knowledge-create-box{
            float: right;
            .knowledge-create{
                padding: 0px 14px;
                line-height: 35px;
                height: 35px;
                border-radius: 18px;
                border: 1px solid #E6B71E;
                background: transparent;
                font-weight: 400;
                font-size: 13px;
                color: #E6B71E;
                letter-spacing: 5px;
                cursor: pointer;

                .create-icon{
                    width: 14px;
                    height: 14px;
                    display: inline-block;
                    margin-right: 8px;
                    margin-bottom: 4px;
                }

                & label{
                    cursor: pointer;
                }
            }
        }

    }

    .folder-list{
        margin-left: -35px;

        .folder-item{
            width: calc(25% - 35px);
            display: inline-block;
            margin-left: 35px;
            margin-bottom: 30px;
            background: #1A1A1A;
            border-radius: 14px;
            padding: 1px;
            cursor: pointer;

            .folder-content-item{
                padding: 19px;
                background: #1A1A1A;
                border-radius: 14px;

                .folder-header{
                    display: flex;
                    height: 35px;
                    line-height: 35px;

                    .knowledge-img{
                        width: 35px;
                        border-radius: 7px;
                        margin-right: 14px;
                        height: 35px;
                        display: inline-block;
                    }

                    & label{
                        flex: 1;
                        font-weight: 400;
                        font-size: 14px;
                        color: #FFFFFF;
                        cursor: pointer;
                    }

                    .more-button{
                        width: 20px;
                        height: 4px;
                        margin-bottom: 15px;
                        margin-left: 15px;
                        cursor: pointer;
                    }
                }

                .folder-description{
                    margin: 14px 0 18px 0;
                    font-weight: 300;
                    font-size: 13px;
                    color: #CCCCCC;
                    overflow: hidden; /* 确保超出的内容会被隐藏 */
                    display: -webkit-box; /* 用于弹性盒子布局模型 */
                    -webkit-line-clamp: 3; /* 限制在3行 */
                    -webkit-box-orient: vertical; /* 垂直方向的子元素排列 */
                    text-overflow: ellipsis; /* 多行时显示省略号 */
                    white-space: normal; /* 允许文本换行 */
                    height: 75px; /* 设置最大高度以适应3行文本 */
                    line-height: 25px; /* 设置行高以便计算最大高度 */
                    box-sizing: border-box; /* 防止padding影响最大高度 */
                }

                .folder-type{
                    font-weight: 400;
                    font-size: 11px;
                    color: #666666;
                    width: 100%;
                    text-align: right;
                }
            }
        }

        .third-item{
            width: calc(33.33% - 28px);
            margin-left: 28px;
            margin-bottom: 20px;
            .folder-description{
                -webkit-line-clamp: 1!important;
                height: 25px!important;
            }
        }

        .folder-item:hover{
            background: linear-gradient(150deg, rgba(0,0,0,0.6), rgba(255,255,255,0.6));
        }

        .folder-item-active,.folder-item-active:hover{
            background: #FFD025;
        }
    }

    .third-list{
        margin-left: -28px;
    }

    .no-folder{
        & img {
            width: 147px;
            height: 70px;
            margin: 15% auto 0 auto;
        }

        & p {
            font-weight: 400;
            font-size: 13px;
            color: #666666;
            width: 100%;
            text-align: center;
            margin-top: 20px;
        }
    }


    .file-content{
        display: flex;
        height:100%;

        .file-info{
            width: 211px;
            box-shadow: 0px 0px 35px 0px rgba(255,255,255,0.2);

            .file-name{
                margin: 1.5em 30px 15px 30px;
                height: 35px;
                line-height: 35px;
                display: flex;

                & label{
                    flex: 1;
                    font-weight: 400;
                    font-size: 15px;
                    color: #FFFEFE;
                }
            }

            .folder-type{
                font-weight: 400;
                font-size: 13px;
                color: #666666;
                margin: 0px 13px 15px 13px;
            }

            .file-menu{
                margin: 0px 21px 0 7px;
                height: 42px;
                line-height: 42px;
                padding: 0px 21px;
                font-weight: 400;
                font-size: 14px;
                color: #999999;
                cursor: pointer;
                & img{
                    width: 14px;
                    height: 14px;
                    margin-right: 13px;
                    display: inline-block;
                }
            }

            .file-menu-active{
                margin: 0px 21px 0 7px;
                height: 42px;
                line-height: 42px;
                padding: 0px 21px;
                font-weight: 400;
                font-size: 14px;
                color: #FFD54C;
                background-color: rgba(255, 225, 128, 0.1);
                border-radius: 7px;
                cursor: pointer;
                & img{
                    width: 14px;
                    height: 14px;
                    margin-right: 13px;
                    display: inline-block;
                    margin-bottom: 2px;
                }
            }

            .back-knowledge{
                position: absolute;
                left: 21px;
                right: 21px;
                bottom: 28px;
                background: #1A1A1A;
                border-radius: 21px;
                height: 42px;
                line-height: 42px;
                font-weight: 400;
                font-size: 14px;
                color: #FEFEFE;
                text-align: center;
                cursor: pointer;

                & img{
                    width: 14px;
                    height: 14px;
                    margin-right: 13px;
                    display: inline-block;
                    margin-bottom: 2px;
                }
            }
        }

        .file-list{
            flex: 1;

            .search-box{
                position: relative;
                float: right;
                margin-right: 21px;
                margin-bottom: 20px;

                & img{
                    position: absolute;
                    left: 14px;
                    width: 14px;
                    height: 14px;
                    z-index: 99;
                    top:10px;
                }

                .form-input{
                    background: #1A1A1A;
                    border-radius: 18px;
                    border: unset;
                    height: 35px;
                    line-height: 35px;
                    border-radius: 18px;
                    width: 432px;
                    padding: 0px 70px 0px 40px;
                    font-weight: 400;
                    font-size: 13px;
                    color: #FFFFFF;
                }

                .search-btn{
                    width: 56px;
                    height: 35px;
                    line-height: 35px;
                    text-align: center;
                    background: #E6B71E;
                    border-radius: 18px;
                    font-weight: 400;
                    font-size: 14px;
                    color: #010101;
                    position: absolute;
                    right: 0px;
                }


            }

            .text-muted-foreground{
                font-weight: 400;
                font-size: 14px;
                color: #FFFFFF!important;
            }

            .more-button{
                width: 20px;
                height: 4px;
                margin-left: 15px;
                cursor: pointer;
            }

            .file-row td{
                color: #CCCCCC;
            }

            & tr{
                border-color: #333333;
            }

            .img-icon{
                width: 13px;
                height: 13px;
                display: inline-block;
                margin-right: 8px;
            }

            .config-item{
                display: flex;
                margin-bottom: 30px;

                .config-item-title{
                    width:200px;
                    text-align: right;
                    margin-right: 36px;
                    font-size: 12px;
                    color: #FFFFFF;
                    line-height: 34px;
                }

                .config-item-value{
                    width: 500px;
                    font-weight: 300;
                    font-size: 12px;
                    color: #CCCCCC;
                    line-height: 34px;

                    .form-input{
                        background: #1A1A1A;
                        border-radius: 7px;
                        width: 100%;
                        font-weight: 300;
                        font-size: 12px;
                        border:unset;
                    }
                }
            }

            .config-button-box{
                text-align: right;
                width: 736px;
                position: absolute;
                bottom: 50px;

                .delete-button{
                    width: 34px;
                    height: 34px;
                    background: rgba(255, 96, 96, 0.3);
                    border-radius: 100%;

                    .delete-icon{
                        width: 15px;
                        height: 15px;
                        margin: 0 0 0 10px;
                    }
                }

                .save-button{
                    width: 95px;
                    height: 34px;
                    line-height: 34px;
                    text-align: center;
                    background: #FFD025;
                    border-radius: 17px;
                    font-weight: 400;
                    font-size: 14px;
                    color: #010101;
                    margin-left: 20px;
                }
            }

        }
    }
}

.dialog-box{
    background-color: #262626!important;
    border-radius: 14px;
    max-width: 1000px!important;

    .dialog-title{
        font-weight: 600;
        font-size: 17px;
        color: #FFFFFF;
        margin-bottom: 20px;
        .dialog-title-icon{
            width: 17px;
            height: 17px;
            margin-right: 14px;
            display: inline-block;
        }
    }

    .dialog-content{
        .dialog-item-title{
            font-weight: 400;
            font-size: 14px;
            color: #FFFFFF;
        }

        .select-item{
            cursor: pointer;
            background: #1A1A1A;
            border-radius: 7px;
            border: 1px solid transparent;
            padding: 14px 22px;
            margin-top: 15px;

            & label {
                color: #FFFFFF;
            }
        }
        .select-item-active{
            cursor: pointer;
            background: #1A170D;
            border-radius: 7px;
            border: 1px solid #FFD025;
            padding: 14px 22px;
            margin-top: 15px;

            & label {
                color: #FFD54C;
            }
        }

        .select-item,.select-item-active{
            & img {
                display: inline-block;
                width: 14px;
                height: 14px;
                margin-right: 13px;
            }

            & label {
                font-weight: 400;
                font-size: 14px;
            }

            & p{
                font-weight: 400;
                font-size: 13px;
                color: #999999;
                margin-top: 13px;
                margin-left: 28px;
            }
        }

        .setting-content{
            background: #1A1A1A;
            border-radius: 7px;
            padding: 14px 14px 20px 14px;
            margin-top: 14px;
            margin-bottom: 17px;

            .form-item{
                display: flex;
                margin-top: 14px;
                width: 100%;
                height: 35px;
                justify-content: space-between;

                .form-title{
                    font-weight: 400;
                    font-size: 14px;
                    color: #FFFFFF;
                    margin-right: 15px;
                    height: 35px;
                    line-height: 35px;
                }

                .form-input{
                    height: 35px;
                    background: #262626;
                    border-radius: 7px;
                    padding: 0 14px;
                    border: unset;
                    font-weight: 400;
                    font-size: 13px;
                    color: #ffffff;
                    flex: 1;
                }

                .form-input::placeholder{
                    color: #666666;
                }

                .form-dropdown{
                    flex: 1;

                    & button {
                        background: #262626;
                        width: 100%;
                        border: unset;
                        color: #FFFFFF;
                        min-height: 35px!important;
                        padding: 0px 14px;
                    }

                }

                .dropdown-component-display{
                    background: #262626;
                }

                .form-radio-group{
                    height: 35px;
                    line-height: 35px;
                }

                .change-button{
                    padding: 0px 12px;
                    height: 28px;
                    line-height: 28px;
                    text-align: center;
                    background: #262626;
                    border-radius: 14px;
                    font-weight: 400;
                    font-size: 11px;
                    color: #999999;
                    display: inline-block;
                    vertical-align: top;
                    margin-top: 4px;

                    & img{
                        display:inline-block;
                        width: 11px;
                        height: 11px;
                        margin-right: 6px;
                    }
                }
            }
        }
    }

    .tip-title{
        font-weight: 600;
        font-size: 17px;
        color: #FFFFFF;
        width: 100%;
        text-align: center;
        margin-bottom: 20px;

        .tip-title-icon{
            width: 15px;
            height: 15px;
            margin-right: 13px;
            display: inline-block;
            vertical-align: baseline;
        }
    }

    .tip-title-left{
        text-align: left;
    }

    .tip-message{
        font-weight: 400;
        font-size: 13px;
        color: #FFFFFF;
        text-align: center;
        white-space: pre;
        line-height: 25px;
    }

    .tip-input{
        height: 35px;
        background: #1A1A1A;
        border-radius: 7px;
        width: 100%;
        font-weight: 400;
        font-size: 14px;
        color: #ffffff;
        padding: 0px 14px;
    }

    .tip-input::placeholder{
        color: #666666;
    }

    .button-box{
        width: 100%;
        text-align: center;

        .cancel-button{
            width: 127px;
            height: 35px;
            background: #404040;
            border-radius: 18px;
            line-height: 35px;
            text-align: center;
            font-weight: 400;
            font-size: 14px;
            color: #FEFEFE;
        }

        .confirm-button{
            width: 127px;
            height: 35px;
            background: #FFD025;
            border-radius: 18px;
            font-weight: 400;
            font-size: 14px;
            color: #010101;
            margin-left: 77px;
        }

        .tip-button{
            width: 100px;
            margin-top: 28px;
        }

        .tip-button-margin{
            margin-left: 28px;
            margin-top: 28px;
        }

        .delete-button{
            width: 100px;
            margin-top: 28px;
            background: rgba(255, 96, 96, 0.2);
            font-weight: 400;
            font-size: 14px;
            color: #FF6060;
        }
    }

    .right-button-box{
        text-align: right;

        .yellow-button{
            width: 98px;
            height: 35px;
            border-radius: 18px;
            border: 1px solid #FFD025;
            text-align:center;
            line-height: 35px;
            font-weight: 400;
            font-size: 14px;
            color: #FFD025;
        }
    }
}

.knowledge-img-bg {
    width: 35px;
    background: #000000;
    border-radius: 7px;
    margin-right: 14px;
    height: 35px;
    display: inline-block;

    & img{
        width: 21px;
        height: 21px;
        margin: 7px 0 0 7px;
    }
}

/*dropdown*/
.bg-popover{
    background-color: #2C2C2C!important;
    box-shadow: 0px 2px 7px 0px rgba(51,51,51,0.5)!important;
    border-radius: 7px!important;
    padding: 7px!important;
}

.text-popover-foreground{
    font-weight: 400!important;
    font-size: 13px!important;
    color: #CCCCCC!important;
}

.focus\:bg-accent:focus{
    border-radius: 6px;
}