.pio-container{
    bottom: 0;
    z-index: 52;
    color: #666;
    position: fixed;
    user-select: none;
}
.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-container.hidden .pio-show{
    display: block;
}
.pio-container.hidden .pio-show:hover{
    transform: translateX(.5em);
}
.pio-container.hidden #pio,
.pio-container.hidden .pio-action,
.pio-container.hidden .pio-dialog{
    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 #666;
    background: #fff center/70% no-repeat;
}
.pio-action .pio-home{
    background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTg5My43IDUwNS45SDEyOS4zYy0xMyAwLTI0LjgtNy45LTI5LjgtMTkuOS01LTEyLTIuMi0yNS45IDctMzUuMmwzMDctMzA3YzI2LjEtMjYuMSA2MC45LTQwLjUgOTgtNDAuNXM3MS45IDE0LjQgOTggNDAuNWwzMDcgMzA3YzkuMiA5LjIgMTIgMjMuMSA3IDM1LjItNSAxMi4xLTE2LjcgMTkuOS0yOS44IDE5Ljl6TTY3My4yIDkxOS45aC0zMS41Yy0xNy44IDAtMzIuMy0xNC40LTMyLjMtMzIuM3YtNzcuNGMwLTIzLjEtMTguOC00Mi4xLTQxLjktNDIuNC0yMi4zIDAuMy00MS4xIDE5LjMtNDEuMSA0Mi40djc3LjRjMCAxNy44LTE0LjQgMzIuMy0zMi4zIDMyLjNIMzQ5LjhjLTcwLjkgMC0xMjguNy02My43LTEyOC43LTE0MS45VjU4MS45YzAtMTcuOCAxNC40LTMyLjMgMzIuMy0zMi4zaDUxNi4yYzE3LjggMCAzMi4zIDE0LjQgMzIuMyAzMi4zVjc3OGMtMC4xIDc4LjMtNTcuOCAxNDEuOS0xMjguNyAxNDEuOXoiPjwvcGF0aD48L3N2Zz4=);
}
.pio-action .pio-close{
    background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTE1NS4yNTIgOTQzLjgyNWMtMTkuMjEzIDAtMzguNDI5LTcuMzMyLTUzLjA4OS0yMS45ODgtMjkuMzE3LTI5LjMyMS0yOS4zMTctNzYuODU1IDAtMTA2LjE3NWw3MTMuNDk0LTcxMy40OTRjMjkuMzE3LTI5LjMyMSA3Ni44NTMtMjkuMzIxIDEwNi4xNzUgMCAyOS4zMTcgMjkuMzE3IDI5LjMxNyA3Ni44NTUgMCAxMDYuMTc1bC03MTMuNDk0IDcxMy40OTRjLTE0LjY2IDE0LjY2LTMzLjg3NCAyMS45ODgtNTMuMDg5IDIxLjk4OHoiIGZpbGw9IiI+PC9wYXRoPjxwYXRoIGQ9Ik04NjguNzQ5IDk0My44MjRjLTE5LjIxMyAwLTM4LjQyOC03LjMzMi01My4wODktMjEuOTg4bC03MTMuNDk0LTcxMy40OTNjLTI5LjMxNy0yOS4zMTctMjkuMzE3LTc2Ljg1NyAwLTEwNi4xNzUgMjkuMzE2LTI5LjMxNyA3Ni44NTUtMjkuMzIxIDEwNi4xNzQgMGw3MTMuNDk0IDcxMy40OTJjMjkuMzE3IDI5LjMyMSAyOS4zMTcgNzYuODU1IDAgMTA2LjE3NS0xNC42NTcgMTQuNjYxLTMzLjg3MSAyMS45OTMtNTMuMDg3IDIxLjk5M3oiIGZpbGw9IiI+PC9wYXRoPjwvc3ZnPg==);
}
.pio-action .pio-skin{
    background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTk2NS45MTEgMzEwLjUzMWwtMTc0LjQtMTc0LjM5OGMtMTMuMDIyLTEzLjAyMS0zMC45MzMtMTkuNjQ5LTQ5LjM4MS0xOC4yMjgtMS43NC0wLjE1LTMuNDIyLTAuMjI0LTUuMDctMC4yMjRsLTkyLjkxNCAwLTYuNTE3IDMuNjI1Yy0zNC40MjEgMTkuMTQ2LTc4LjM0MSAyOS42ODktMTIzLjY2OCAyOS42ODktNDUuMzI4IDAtODkuMjQ2LTEwLjU0My0xMjMuNjY3LTI5LjY4OWwtNi41MTgtMy42MjVMMjkwLjg2IDExNy42ODFjLTIzLjY5MSAwLTQ0Ljk4NiAxMi45MjQtNTUuOTk1IDMzLjQ1MUw2Mi40NzcgMzIzLjUyMWMtMTEuOSAxMS44OTktMTguNDU0IDI3LjcyLTE4LjQ1NCA0NC41NDggMCAxNi44MjkgNi41NTQgMzIuNjQ5IDE4LjQ1MyA0NC41NDlsMTI1Ljk1MyAxMjUuOTU1YzEwLjU0IDEwLjUzOCAyNC4xNTcgMTYuODc4IDM4LjgyNiAxOC4xODFsMCAzMDQuMzk5YzAgMzUuMDczIDI4LjUzMyA2My42MDYgNjMuNjA0IDYzLjYwNmw0NDYuMTk5IDBjMzUuMDc0IDAgNjMuNjA3LTI4LjUzMyA2My42MDctNjMuNjA2bC0wLjAwMS0zMTcuMzQ1YzE0Ljg0NC0xLjIxMSAyOC42MzktNy41NzcgMzkuMjg4LTE4LjIyNEw5NjUuOTEgMzk5LjYyOEM5OTAuNDc1IDM3NS4wNjQgOTkwLjQ3NSAzMzUuMDk1IDk2NS45MTEgMzEwLjUzMXoiPjwvcGF0aD48L3N2Zz4=);
}
.pio-action .pio-info{
    background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTY4Mi45IDgyNS45SDI2Ny44Yy0yMS44IDAtMzkuNS0xNy43LTM5LjUtMzkuNXMxNy43LTM5LjUgMzkuNS0zOS41aDQxNS4xYzIxLjggMCAzOS41IDE3LjcgMzkuNSAzOS41cy0xNy43IDM5LjUtMzkuNSAzOS41ek04NjQuNyAxMDAuNGMtMTguNSAzLjctMzEuMyAyMC45LTMxLjMgMzkuN3Y2NDUuOGMwIDQ4LTM4LjkgODctODcgODdIMjE5LjNjLTE2LjQgMC0yOS42LTEzLjMtMjkuNi0yOS42VjczMi43YzAtMTYuMSAxMy4xLTI5LjIgMjkuMi0yOS4yaDM3NS45Yzg4LjEgMCAxNTkuNS03MS40IDE1OS41LTE1OS41VjE4NS41YzAtNjYuMi01My43LTExOS45LTExOS45LTExOS45aC00MDRjLTY2LjIgMC0xMTkuOSA1My43LTExOS45IDExOS45djY1Ny44YzAgNjAgNDguNyAxMDguNyAxMDguNyAxMDguN2g1MjcuMWM5MS43IDAgMTY2LjEtNzQuMyAxNjYuMS0xNjYuMVYxMzkuMWMwLjEtMjQuNi0yMi4yLTQzLjktNDcuNy0zOC43eiI+PC9wYXRoPjwvc3ZnPg==);
}
.pio-action .pio-night{
    background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTUxMiAyMDkuNDAzMjQxYy0yMDEuNzMxNTE0IDAtMzc0LjAwOTIwNiAxMjUuNDc2NzgzLTQ0My44MDg5MjIgMzAyLjU5Njc1OSA2OS43OTg2OTIgMTc3LjExOTk3NyAyNDIuMDc3NDA4IDMwMi41OTY3NTkgNDQzLjgwODkyMiAzMDIuNTk2NzU5IDIwMS45MzMxMDUgMCAzNzQuMDEwMjI5LTEyNS40NzY3ODMgNDQzLjgwODkyMi0zMDIuNTk2NzU5Qzg4Ni4wMDkyMDYgMzM0Ljg4MDAyMyA3MTMuOTMzMTA5IDIwOS40MDMyNDEgNTEyIDIwOS40MDMyNDF6TTUxMiA3MTMuNzMxNTE0Yy0xMTEuMzU1MTU3IDAtMjAxLjczMTUxNC05MC4zNzUzMzQtMjAxLjczMTUxNC0yMDEuNzMxNTE0czkwLjM3NTMzNC0yMDEuNzMxNTE0IDIwMS43MzE1MTQtMjAxLjczMTUxNCAyMDEuNzMxNTE0IDkwLjM3NTMzNCAyMDEuNzMxNTE0IDIwMS43MzE1MTRTNjIzLjM1NTE1NyA3MTMuNzMxNTE0IDUxMiA3MTMuNzMxNTE0ek01MTIgMzkwLjk2MTI5NmMtNjYuNzcyNzc2IDAtMTIxLjAzODcwNCA1NC4yNjU5MjgtMTIxLjAzODcwNCAxMjEuMDM4NzA0czU0LjI2NTkyOCAxMjEuMDM4NzA0IDEyMS4wMzg3MDQgMTIxLjAzODcwNCAxMjEuMDM4NzA0LTU0LjI2NTkyOCAxMjEuMDM4NzA0LTEyMS4wMzg3MDRTNTc4Ljc3Mjc3NiAzOTAuOTYxMjk2IDUxMiAzOTAuOTYxMjk2eiI+PC9wYXRoPjwvc3ZnPg==);
}
.pio-container .pio-dialog{
    bottom: auto !important;
    top: 20px !important;
    margin-bottom: 0 !important;
    transform: translateX(-60%) translateY(-100%) !important;
    opacity: 0;
    z-index: -1;
    font-size: 1em;
    min-width: 8em;
    max-width: 10em;
    width: auto;
    background: transparent;
    padding: .75em 1em;
    border-radius: 1em;
    visibility: hidden;
    position: absolute;
    word-break: break-all;
    white-space: normal;
    word-wrap: break-word;
    border: none;
    color: #ff69b4;
    font-family: "楷体", KaiTi, serif;
    font-weight: normal;
    transition: opacity .3s, visibility .3s;
    left: 50% !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column-reverse !important;
}
.pio-container .pio-dialog.active{
    opacity: 1;
    visibility: visible;
}
.pio-container.left .pio-dialog{ /* left: 1em */ }
.pio-container.right .pio-dialog{ /* right: 3em !important */ }
#pio{ 
    vertical-align: middle;
    z-index: 99;
    opacity: 1;
    visibility: visible;
}

/* 确保容器可见 */
.pio-container {
    pointer-events: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
}

@media screen and (max-width: 768px) and (min-width: 481px) {
    /* 平板设备 - 缩小1/3 */
    #pio{ 
        width: 80px !important; /* 原来120px的2/3 */
        height: 166px !important; /* 原来250px的2/3 */
        opacity: 1 !important; /* 确保始终可见 */
        visibility: visible !important;
    }
    /* 调整位置，避免遮挡其他元素 */
    .pio-container.right {
        right: 5px;
        bottom: 5px;
        z-index: 99;
        pointer-events: auto !important;
    }
}

@media screen and (max-width: 480px) {
    /* 手机设备 - 缩小1/2 */
    #pio{ 
        width: 60px !important; /* 原来120px的1/2 */
        height: 125px !important; /* 原来250px的1/2 */
        opacity: 1 !important; /* 确保始终可见 */
        visibility: visible !important;
    }
    /* 调整位置，避免遮挡其他元素 */
    .pio-container.right {
        right: 0;
        bottom: 0;
        z-index: 99;
        pointer-events: auto !important;
    }
    /* 对话框位置调整 */
    .pio-container .pio-dialog {
        transform: translateX(-50%) translateY(-110%) !important;
        min-width: 6em;
        max-width: 8em;
        font-size: 0.9em;
    }
}

/* 添加文字跳动动画 */
@keyframes textBounce {
    0%, 100% { transform: translateY(0); }
    25% { transform: translateY(-3px); }
    50% { transform: translateY(0); }
    75% { transform: translateY(3px); }
}

.pio-container .pio-dialog.active span {
    display: inline-block;
    animation: textBounce 1s infinite;
}

/* 让每个字的动画有延迟，产生波浪效果 */
.pio-container .pio-dialog.active span:nth-child(1) { animation-delay: 0s; }
.pio-container .pio-dialog.active span:nth-child(2) { animation-delay: 0.1s; }
.pio-container .pio-dialog.active span:nth-child(3) { animation-delay: 0.2s; }
.pio-container .pio-dialog.active span:nth-child(4) { animation-delay: 0.3s; }
.pio-container .pio-dialog.active span:nth-child(5) { animation-delay: 0.4s; }
.pio-container .pio-dialog.active span:nth-child(6) { animation-delay: 0.5s; }
.pio-container .pio-dialog.active span:nth-child(7) { animation-delay: 0.6s; }
.pio-container .pio-dialog.active span:nth-child(8) { animation-delay: 0.7s; }

/* 行样式，使每行有合理间距 */
.pio-container .pio-dialog .dialog-line {
    margin-bottom: 5px;
    width: 100%;
    font-weight: normal;
}

/* 让每行文字也有动画，但与字符动画略有不同 */
@keyframes lineFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}

.pio-container .pio-dialog.active .dialog-line {
    animation: lineFloat 1.5s infinite;
}

/* 按行设置不同延迟，增加活力感 */
.pio-container .pio-dialog.active .dialog-line:nth-child(1) { animation-delay: 0.1s; }
.pio-container .pio-dialog.active .dialog-line:nth-child(2) { animation-delay: 0.3s; }
.pio-container .pio-dialog.active .dialog-line:nth-child(3) { animation-delay: 0.5s; }