/* ----
# Pio Plugin
# By: Dreamer-Paul
# Last Update: 2021.3.3

一个支持更换 Live2D 模型的 Typecho 插件。
---- */

/* 定义从下往上的动画 */
@keyframes slide-up {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.pio-container{
    bottom: -20px;
    z-index: 52;
    color: #666;
    position: fixed;
    user-select: none;
    /* 添加动画属性 */
    animation: slide-up 3s ease-out; /* 1s为动画时长，ease-out为动画速度曲线 */
    margin-left: -20px;
}

.pio-container .pio-show{
    left: -1em;
    bottom: 1em;
    width: 3em;
    height: 3em;
    display: none;
    cursor: pointer;
    position: absolute;
    border-radius: 3em;
    border: 3px solid #fff;
    transition: transform .3s;
    background: url(avatar.jpg) center/contain;
}
#pio {
    cursor: grab;
    transition: opacity 1s ease-in-out;
}

#pio:active {
    cursor: grabbing;
}


.pio-container.hidden .pio-show{
    display: block;
}
.pio-container.hidden .pio-show:hover{
    transform: translateX(.5em);
}

.pio-container.hidden #pio{
    display: none;
}

.pio-container.left{ left: 0 }
.pio-container.right{ right: 0 }
.pio-container.active{ cursor: move }
.pio-container.static{ pointer-events: none }

.pio-container .pio-action{
    top: 3em;
    opacity: 0;
    position: absolute;
    transition: opacity .3s;
}
.pio-container.left .pio-action{ right: 0 }
.pio-container.right .pio-action{ left: 0 }
.pio-container:hover .pio-action{ opacity: 1 }

.pio-action span{
    color: #fff;
    width: 1.5em;
    height: 1.5em;
    display: block;
    cursor: pointer;
    text-align: center;
    border-radius: 66%;
    margin-bottom: .5em;
    border: 1px solid #FF6B9B;
    margin-top: 130px;
    background: #fff center/70% no-repeat;
    margin-right: 30px;
}

.pio-action .pio-skin{
    background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iI0ZGNjlCMyIgZD0iTTk2NS45MTEgMzEwLjUzMWwtMTc0LjQtMTc0LjM5OGMtMTMuMDIyLTEzLjAyMS0zMC45MzMtMTkuNjQ5LTQ5LjM4MS0xOC4yMjgtMS43NC0wLjE1LTMuNDIyLTAuMjI0LTUuMDctMC4yMjRsLTkyLjkxNCAwLTYuNTE3IDMuNjI1Yy0zNC40MjEgMTkuMTQ2LTc4LjM0MSAyOS42ODktMTIzLjY2OCAyOS42ODktNDUuMzI4IDAtODkuMjQ2LTEwLjU0My0xMjMuNjY3LTI5LjY4OWwtNi41MTgtMy42MjVMMjkwLjg2IDExNy42ODFjLTIzLjY5MSAwLTQ0Ljk4NiAxMi45MjQtNTUuOTk1IDMzLjQ1MUw2Mi40NzcgMzIzLjUyMWMtMTEuOSAxMS44OTktMTguNDU0IDI3LjcyLTE4LjQ1NCA0NC41NDggMCAxNi44MjkgNi41NTQgMzIuNjQ5IDE4LjQ1MyA0NC41NDlsMTI1Ljk1MyAxMjUuOTU1YzEwLjU0IDEwLjUzOCAyNC4xNTcgMTYuODc4IDM4LjgyNiAxOC4xODFsMCAzMDQuMzk5YzAgMzUuMDczIDI4LjUzMyA2My42MDYgNjMuNjA0IDYzLjYwNmw0NDYuMTk5IDBjMzUuMDc0IDAgNjMuNjA3LTI4LjUzMyA2My42MDctNjMuNjA2bC0wLjAwMS0zMTcuMzQ1YzE0Ljg0NC0xLjIxMSAyOC42MzktNy41NzcgMzkuMjg4LTE4LjIyNEw5NjUuOTExIDM5OS42MjhDOTkwLjQ3NSAzNzUuMDY0IDk5MC40NzUgMzM1LjA5NSA5NjUuOTExIDMxMC41MzF6Ij48L3BhdGg+PC9zdmc+);
}

.pio-container .pio-dialog{
    opacity: 0;
    z-index: 200;
    font-size: .8em;
    background-color: rgba(236, 217, 188, .5);
    padding: .75em 1em;
    border-radius: 1em;
    visibility: hidden;
    position: absolute;
    word-break: break-all;
    border: 1px solid #eee;
    transition: opacity .3s, visibility .3s;
    width: auto;                /* 宽度自适应内容 */
    display: inline-block;      /* 让宽度根据内容自适应 */
    max-width: 80vw;            /* 防止太宽 */
    min-width: 2em;             /* 防止太窄 */
    top: auto;                  /* 取消 top 定位 */
    bottom: 85%;               /* 锚定在角色上方 */
    left: 0;                    /* 可根据需要调整 */
    margin-bottom: 1em;         /* 与角色的间距 */
    margin-left: 20px;
}
.pio-container .pio-dialog.active{
    opacity: 1;
    visibility: visible;
}

.pio-container.left .pio-dialog{ left: 1em }
.pio-container.right .pio-dialog{ right: 1em }

#pio{ vertical-align: middle }

@media screen and (max-width: 768px){
    #pio{ width: 8em }
    /* .pio-container{ pointer-events: none } */
    .pio-container {
        bottom: -15px;
    }

    .pio-action span{

        margin-top: 65px;
        margin-right: 10px;
    
    }


}