@import '../../variables.scss';

$tag-width: 56px; // 数字人状态标签
$image-width: 168px;
$image-height: 240px;
$gap: 16px;

.robotWrap {
    display: flex;
    flex-direction: column;
    padding: 12px;
    border: 1px solid var(--borderColor);
    border-radius: 8px;
    background-color: #fff;
    color: #000;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;

    .robotContent {
        display: flex;

        .robotImage {
            width: $image-width;
            height: $image-height;
            border-radius: 8px;
            overflow: hidden;
            padding-bottom: 40px;
            position: relative;

            .robotTips {
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 35px;
                border-radius: 12px;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 10px;
                background-color: rgb(234, 206, 236);
                border: 2px solid rgb(226, 120, 234);
                color: #3d0e3f;
                font-size: 14px;
            }

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }

        .robotMessage {
            display: flex;
            flex-direction: column;
            width: calc(100% - #{$image-width});
            padding-left: 20px;
            gap: $gap;

            .robotMessageRow {
                display: flex;
                align-items: center;

                .copyText {
                    display: flex;
                    align-items: center;
                    gap: 4px;
                    width: 100%;
                }

                .copyText svg {
                    color: #773fbf;
                    transition: color 0.4s;
                }

                .copyText svg:hover {
                    color: #3a1e5e;
                }
            }

            .name {
                display: flex;
                align-items: center;
                width: 100%;

                .nameText {
                    max-width: calc(100% - #{$tag-width});
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    font-size: 16px;
                    font-weight: 500;
                    padding-right: 10px;
                }

                .tag {
                    width: $tag-width;
                    height: 20px;
                    border-radius: 3px;
                    font-size: 12px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
            }

            .line {
                width: 100%;
                height: 1px;
                background-color: #ebebeb;

            }
        }
    }

    .robotList {
        display: flex;
        flex-direction: column;
        gap: 4px;
        margin-top: $gap;

        .mediaWrap {
            display: flex;
            align-items: center;
            gap: $gap;
            max-width: 100%;
            overflow-x: auto;

            .mediaImage {
                width: 40px;
                height: 40px;
                border-radius: 50%;
                overflow: hidden;
                cursor: pointer;
                object-fit: cover;
                flex-shrink: 0;
            }

            .mediaItem {
                font-size: 14px;
                display: flex;
                align-items: center;
                gap: 4px;
            }
        }
    }
}

// 单行文本溢出隐藏
.ellipsis {
    max-width: var(--width);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}