/**
 * Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
 * SPDX-license-identifier: BSD-3-Clause
 */

.container {
    padding: 16px 8px;
    background: linear-gradient(0deg, #F0F2FF 0%, #E0E4FF 100%);

    :global {
        .arco-drawer-scroll {
            .arco-drawer-content {
                overflow-x: hidden;
                overflow-y: auto;

                scrollbar-width: thin; /* 设置滚动条宽度为细 */
                scrollbar-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0); /* 设置滚动条和轨道的颜色 */
            }

            ::-webkit-scrollbar {
                width: 0px;
                height: 0px;
            }
    
            ::-webkit-scrollbar-thumb {
                background: rgba(0,0,0,0);
                border-radius: 0px;
            }
    
            ::-webkit-scrollbar-track {
                background: rgba(0,0,0,0);
                border-radius: 0px;
            }
        }
    }

    .title {
        font-size: 20px;
        font-weight: 500;
        line-height: 28px;

        .special-text {
            background: linear-gradient(90deg, #004FFF 38.86%, #9865FF 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
    }

    .sub-title {
        font-size: 12px;
        font-weight: 400;
        line-height: 20px;
        color: var(--text-color-text-3, rgba(115, 122, 135, 1));
        margin-top: 6px;
    }

    .scenes {
        width: 100%;
        display: flex;
        flex-direction: row;
        gap: 14px;
        margin-top: 32px;
    }

    .scenes-mobile {
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 14px;
        margin-top: 32px;
        overflow-x: auto;
        padding-bottom: 8px;
    }

    .configuration {
        position: relative;
        min-height: calc(100% - 300px);
        height: max-content;
        width: 100%;
        background: white;
        box-sizing: border-box;
        padding: 32px 24px;
        margin-top: 24px;
        margin-bottom: 12px;
        border-radius: 12px;
        display: flex;
        flex-direction: column;
        gap: 36px;

        .anchor {
            position: absolute;
            border-bottom: 12px solid white;
            border-left: 12px solid transparent;
            border-right: 12px solid transparent;
            top: 0px;
            transform: translate(-50%, -99%);
        }

        .ai-settings {
            width: 100%;
            display: flex;
            flex-direction: row;
            gap: 24px;

            .ai-settings-wrapper {
                display: flex;
                width: 100%;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
            }

            .ai-settings-model {
                width: 100%;
                display: flex;
                flex-direction: column;
                align-items: flex-end;
                gap: 12px;
            }
        }

        :global {
            .arco-textarea {
                background: white !important;
                width: 100%;
                height: max-content;
            }
            .arco-textarea:focus {
                outline: none !important;
            }
        }

        textarea {
            border-radius: 4px;
            resize: none;
            -webkit-resizer: none;
            border: 0px;
            outline: none;
            box-shadow: none;
        }

        textarea:focus {
            border: 0px;
            outline: none;
            box-shadow: none;
        }
    }
}



.button {
    position: relative;
    width: max-content !important;
    height: 24px !important;
    margin-top: 8px;
    border-radius: 4px !important;
    font-size: 12px !important;
    background: linear-gradient(77.86deg, rgba(229, 242, 255, 0.5) -3.23%, rgba(217, 229, 255, 0.5) 51.11%, rgba(246, 226, 255, 0.5) 98.65%);
    cursor: pointer;

    .button-text {
        background: linear-gradient(77.86deg, #3384FF -3.23%, #014BDE 51.11%, #A945FB 98.65%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        font-weight: 500;
        line-height: 20px;
        text-align: center;
    }
}

.button::after {
    content: '';
    position: absolute;
    border-radius: 3px;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 22px;
    background: white;
    z-index: -1;
}

.button::before {
    content: '';
    position: absolute;
    border-radius: 5px;
    top: -2px;
    left: -2px;
    width: calc(100% + 4px);
    height: 26px;
    background: linear-gradient(90deg, rgba(0, 139, 255, 0.5) 0%, rgba(0, 98, 255, 0.5) 49.5%, rgba(207, 92, 255, 0.5) 100%);
    z-index: -2;
}

.button:hover {
    background: linear-gradient(77.86deg, rgba(200, 220, 255, 0.7) -3.23%, rgba(190, 210, 255, 0.7) 51.11%, rgba(230, 210, 255, 0.7) 98.65%);
}

.button:active {
    background: linear-gradient(77.86deg, rgba(170, 190, 255, 0.9) -3.23%, rgba(160, 180, 255, 0.9) 51.11%, rgba(210, 180, 255, 0.9) 98.65%);
}

.footer {
  width: calc(100% - 12px);
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  padding-bottom: 16px;
  gap: 12px;

  .suffix {
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    margin-right: 12px;
    color: var(--text-color-text-3, rgba(115, 122, 135, 1));
  }

  .cancel {
    width: 88px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid var(--line-color-border-3, rgba(221, 226, 233, 1));
    background-color: white !important;
  }

  .confirm {
    width: 88px;
    height: 32px;
    border-radius: 6px;
    background: linear-gradient(95.87deg, #1664FF 0%, #8040FF 97.7%);
    color: white !important;
  }

  .confirm:hover {
    opacity: .8;
  }

  .confirm:active {
    opacity: 1;
  }
}