.interactive-character {
    --look-x: 0px;
    --look-y: 0px;
    --look-r: 0deg;
    --look-scale-x: 1;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    position: fixed;
    z-index: 2147483000;
    width: var(--character-width);
    color: #654e48;
    font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
    pointer-events: none;
    isolation: isolate;
    overflow: visible;
    transition: opacity .25s ease, visibility .25s ease;
}

.interactive-character.is-left:not(.is-custom-position) {
    left: 8px;
    left: max(8px, env(safe-area-inset-left));
    right: auto;
    top: auto;
    bottom: 0;
    bottom: max(0px, env(safe-area-inset-bottom));
}

.interactive-character.is-right:not(.is-custom-position) {
    right: 8px;
    right: max(8px, env(safe-area-inset-right));
    left: auto;
    top: auto;
    bottom: 0;
    bottom: max(0px, env(safe-area-inset-bottom));
}

.interactive-character.mode-half.is-left:not(.is-custom-position) {
    transform: translateX(12%);
}

.interactive-character.mode-half.is-right:not(.is-custom-position) {
    transform: translateX(-12%);
}

.interactive-character.is-top:not(.is-custom-position) {
    left: calc(50% - var(--character-width) / 2);
    right: auto;
    top: 8px;
    top: max(8px, env(safe-area-inset-top));
    bottom: auto;
}

.interactive-character.is-hidden {
    visibility: hidden;
    opacity: 0;
}

.interactive-character__stage {
    position: relative;
    width: 100%;
    height: var(--character-height);
    overflow: visible;
    cursor: grab;
    outline: none;
    pointer-events: auto;
    z-index: 1;
    touch-action: none;
    filter: drop-shadow(0 18px 16px rgba(86, 59, 50, .16));
}

.interactive-character.mode-half .interactive-character__stage {
    height: var(--character-half-height);
    overflow: visible;
    border-radius: 46% 46% 0 0 / 12% 12% 0 0;
}

.interactive-character__stage:focus-visible {
    filter: drop-shadow(0 18px 18px rgba(86, 59, 50, .2))
        drop-shadow(0 0 5px rgba(217, 172, 163, .8));
}

.interactive-character.is-dragging .interactive-character__stage {
    cursor: grabbing;
    filter: drop-shadow(0 22px 20px rgba(86, 59, 50, .24));
}

.interactive-character__figure,
.interactive-character__look {
    position: absolute;
    inset: 0;
    transform-origin: 50% 85%;
}

.interactive-character__look {
    pointer-events: none;
    animation: interactive-character-breathe 4.6s ease-in-out infinite;
}

.interactive-character__figure {
    transform: translateZ(0);
    transform-origin: 50% 82%;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    will-change: transform;
}

.interactive-character__pose,
.interactive-character__motion,
.interactive-character__sprite {
    position: absolute;
    inset: 0;
}

.interactive-character__pose {
    z-index: 1;
    opacity: 0;
    transition: opacity .14s ease;
}

.interactive-character__pose.is-active {
    opacity: 1;
}

.interactive-character__motion {
    z-index: 2;
    visibility: hidden;
    opacity: 0;
}

.interactive-character__motion.is-active {
    visibility: visible;
    opacity: 1;
}

.interactive-character.is-pose-sequence .interactive-character__pose {
    visibility: hidden;
    opacity: 0;
    transition: none;
}

.interactive-character__sprite {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    user-select: none;
    -webkit-user-drag: none;
    backface-visibility: hidden;
}

.interactive-character.mode-half .interactive-character__figure {
    top: 0;
    right: auto;
    bottom: auto;
    left: -30%;
    width: 160%;
    height: var(--character-half-height);
    overflow: hidden;
}

.interactive-character.mode-half .interactive-character__look {
    top: 0;
    left: 5%;
    width: 90%;
    height: var(--character-half-puppet-height);
    right: auto;
    bottom: auto;
}

.interactive-character__bubble {
    position: fixed;
    z-index: 30;
    width: min(250px, 66vw);
    min-height: 42px;
    padding: 12px 15px;
    border: 1px solid rgba(202, 162, 151, .5);
    border-radius: 16px 16px 16px 5px;
    color: #604944;
    background:
        linear-gradient(145deg, rgba(255, 253, 248, .98), rgba(255, 244, 239, .96));
    box-shadow: 0 12px 30px rgba(100, 68, 61, .16);
    font-size: 14px;
    line-height: 1.65;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease;
    pointer-events: none;
}

.interactive-character__bubble.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.interactive-character__bubble:after {
    position: absolute;
    top: 30px;
    width: 14px;
    height: 14px;
    border-top: 1px solid rgba(202, 162, 151, .5);
    border-right: 1px solid rgba(202, 162, 151, .5);
    background: #fff8f4;
    content: "";
}

.interactive-character__bubble.is-side-left:after {
    right: -8px;
    transform: rotate(45deg);
}

.interactive-character__bubble.is-side-right:after {
    left: -8px;
    transform: rotate(-135deg);
}

.interactive-character__bubble.is-above:after {
    top: auto;
    right: auto;
    bottom: -8px;
    left: calc(50% - 7px);
    transform: rotate(135deg);
}

.interactive-character__bubble.is-below:after {
    top: -8px;
    right: auto;
    left: calc(50% - 7px);
    transform: rotate(-45deg);
}

.interactive-character__tools {
    position: absolute;
    z-index: 40;
    bottom: 16px;
    display: flex;
    gap: 6px;
    opacity: 0;
    transform: translateY(5px);
    transition: opacity .2s ease, transform .2s ease;
    pointer-events: auto;
}

.interactive-character.is-right .interactive-character__tools {
    right: 10px;
}

.interactive-character.is-left .interactive-character__tools {
    left: 10px;
}

.interactive-character.is-top .interactive-character__tools {
    left: calc(50% - 35px);
}

.interactive-character:hover .interactive-character__tools,
.interactive-character:focus-within .interactive-character__tools {
    opacity: 1;
    transform: translateY(0);
}

.interactive-character__tool,
.interactive-character__restore {
    border: 1px solid rgba(193, 150, 141, .42);
    color: #76564f;
    background: rgba(255, 250, 246, .92);
    box-shadow: 0 6px 16px rgba(91, 61, 55, .14);
    cursor: pointer;
    font: 600 12px/1 "Microsoft YaHei", sans-serif;
    backdrop-filter: blur(8px);
}

.interactive-character__tool {
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 50%;
}

.interactive-character__tool:hover,
.interactive-character__tool:focus-visible,
.interactive-character__restore:hover,
.interactive-character__restore:focus-visible {
    border-color: #d6a49a;
    color: #9b5e53;
    background: #fff;
    outline: none;
    transform: translateY(-1px);
}

.interactive-character__restore {
    position: fixed;
    z-index: 2147482999;
    bottom: 18px;
    display: none;
    padding: 10px 14px;
    border-radius: 999px;
}

.interactive-character__restore.is-left {
    left: 18px;
}

.interactive-character__restore.is-right {
    right: 18px;
}

.interactive-character__restore.is-top {
    top: 12px;
    top: max(12px, env(safe-area-inset-top));
    bottom: auto;
    left: 50%;
    transform: translateX(-50%);
}

.interactive-character__restore.is-top:hover,
.interactive-character__restore.is-top:focus-visible {
    transform: translate(-50%, -1px);
}

.interactive-character__restore.is-visible {
    display: block;
}

/*
 * 旧版 live2d-widget 将对话框放在 canvas 前面创建，却没有设置兄弟层级；
 * canvas 作为后绘制元素会遮住对话框。以下规则与 show.js 的位置类配合，
 * 同时解决遮挡、容器裁切和桌面端气泡压在人物脸上的问题。
 */
#live2d-widget.live2d-widget-container {
    overflow: visible !important;
    isolation: isolate;
}

#live2d-widget #live2dcanvas {
    z-index: 1 !important;
}

#live2d-widget .live2d-widget-dialog-container {
    z-index: 3 !important;
    width: 300px !important;
    max-width: calc(100vw - 24px);
    overflow: visible !important;
    pointer-events: none !important;
}

/*
 * 旧组件异步写入 absolute/right/bottom。JS 会在每次显示时改为 fixed，
 * 以下仅在脚本尚未完成定位时提供贴近头肩区域的兜底坐标。
 */
@media (min-width: 641px) {
    #live2d-widget.live2d-position-right .live2d-widget-dialog-container {
        top: auto !important;
        right: 55% !important;
        bottom: 42% !important;
        left: auto !important;
    }

    #live2d-widget.live2d-position-left .live2d-widget-dialog-container {
        top: auto !important;
        right: auto !important;
        bottom: 42% !important;
        left: 55% !important;
    }
}

.interactive-character__figure.action-nod {
    animation: interactive-character-nod 1.1s cubic-bezier(.45, 0, .2, 1) both;
}

.interactive-character__figure.action-shake {
    animation: interactive-character-shake 1.35s cubic-bezier(.45, 0, .2, 1) both;
}

.interactive-character__figure.action-head-tilt {
    animation: interactive-character-head-tilt 1.8s cubic-bezier(.4, 0, .2, 1) both;
}

.interactive-character__figure.action-sway {
    animation: interactive-character-sway 2.6s cubic-bezier(.4, 0, .2, 1) both;
}

.interactive-character__figure.action-bounce {
    animation: interactive-character-bounce .95s cubic-bezier(.22, 1, .36, 1) both;
}

.interactive-character__figure.action-lean {
    animation: interactive-character-lean 2.2s cubic-bezier(.4, 0, .2, 1) both;
}

.interactive-character__figure.action-startled {
    animation: interactive-character-startled .85s cubic-bezier(.22, 1, .36, 1) both;
}

.interactive-character__figure.action-turn-left {
    animation: interactive-character-frame-turn-left 1.3s cubic-bezier(.4, 0, .2, 1) both;
}

.interactive-character__figure.action-turn-right {
    animation: interactive-character-frame-turn-right 1.3s cubic-bezier(.4, 0, .2, 1) both;
}

.interactive-character__figure.action-shift-weight {
    animation: interactive-character-shift-weight 2.4s cubic-bezier(.4, 0, .2, 1) both;
}

.interactive-character__figure.action-wave {
    animation: interactive-character-frame-wave 1.42s cubic-bezier(.4, 0, .2, 1) both;
}

.interactive-character__figure.action-hands-chest {
    animation: interactive-character-frame-hands-chest 1.62s cubic-bezier(.4, 0, .2, 1) both;
}

@keyframes interactive-character-breathe {
    0%, 100% {
        transform: translate3d(var(--look-x), var(--look-y), 0)
            rotate(var(--look-r)) scaleX(var(--look-scale-x)) scaleY(1);
    }
    50% {
        transform: translate3d(var(--look-x), calc(var(--look-y) - 1.8px), 0)
            rotate(var(--look-r)) scaleX(var(--look-scale-x)) scaleY(1.004);
    }
}

@keyframes interactive-character-nod {
    0%, 100% { transform: translateY(0) rotate(0); }
    38% { transform: translateY(2.5px) rotate(.45deg); }
    68% { transform: translateY(-1px) rotate(-.25deg); }
}

@keyframes interactive-character-shake {
    0%, 100% { transform: translateX(0) rotate(0); }
    24% { transform: translateX(-2.4px) rotate(-.35deg); }
    52% { transform: translateX(2.4px) rotate(.35deg); }
    76% { transform: translateX(-1.4px) rotate(-.2deg); }
}

@keyframes interactive-character-head-tilt {
    0%, 100% { transform: translateX(0) rotate(0); }
    34%, 70% { transform: translateX(1.5px) rotate(1.05deg); }
}

@keyframes interactive-character-frame-turn-left {
    0%, 100% { transform: translateX(0) rotate(0); }
    28%, 72% { transform: translateX(1.5px) rotate(.12deg); }
}

@keyframes interactive-character-frame-turn-right {
    0%, 100% { transform: translateX(0) rotate(0); }
    28%, 72% { transform: translateX(-1.5px) rotate(-.12deg); }
}

@keyframes interactive-character-frame-wave {
    0%, 100% { transform: translateY(0) rotate(0); }
    38% { transform: translateY(-1.5px) rotate(-.15deg); }
    72% { transform: translateY(-.5px) rotate(.08deg); }
}

@keyframes interactive-character-frame-hands-chest {
    0%, 100% { transform: translateY(0) scale(1); }
    36%, 72% { transform: translateY(-1px) scale(1.002); }
}

@keyframes interactive-character-sway {
    0%, 100% { transform: rotate(0); }
    25% { transform: rotate(-.75deg) translateX(-1px); }
    50% { transform: rotate(0) translateX(0); }
    75% { transform: rotate(.75deg) translateX(1px); }
}

@keyframes interactive-character-shift-weight {
    0%, 100% { transform: translateX(0) rotate(0) scaleY(1); }
    26%, 46% { transform: translateX(-2px) rotate(-.35deg) scaleY(.999); }
    68%, 84% { transform: translateX(2px) rotate(.35deg) scaleY(1.001); }
}

@keyframes interactive-character-bounce {
    0%, 100% { transform: translateY(0) scale(1); }
    35% { transform: translateY(-8px) scale(1.006, .994); }
    65% { transform: translateY(2px) scale(.995, 1.008); }
}

@keyframes interactive-character-lean {
    0%, 100% { transform: rotate(0) translateX(0); }
    45%, 65% { transform: rotate(-1.25deg) translateX(-2px); }
}

@keyframes interactive-character-startled {
    0%, 100% { transform: translateY(0) scale(1); }
    25% { transform: translateY(-10px) scale(1.025); }
    55% { transform: translateY(1px) scale(.99, 1.015); }
}

@media (max-width: 760px) {
    #live2d-widget .live2d-widget-dialog-container {
        width: 46vw !important;
        min-width: 140px;
        max-width: 220px;
        transform: none !important;
    }

    #live2d-widget .live2d-widget-dialog {
        padding: 10px !important;
        border-width: 1px !important;
        font-size: 14px !important;
        line-height: 1.5 !important;
    }

    .interactive-character__bubble {
        width: min(220px, calc(100vw - 24px));
        max-height: min(36vh, 168px);
        overflow: hidden;
        padding: 10px 12px;
        font-size: 12px;
        line-height: 1.6;
    }

    .interactive-character__stage {
        touch-action: pan-y;
    }

    .interactive-character__tools {
        gap: 8px;
        opacity: .8;
        transform: none;
    }

    .interactive-character__tool {
        width: 42px;
        height: 42px;
        font-size: 13px;
    }

    .interactive-character__restore {
        min-width: 48px;
        min-height: 44px;
        padding: 11px 15px;
    }
}

@media (max-width: 640px) {
    #live2d-widget.live2d-position-right .live2d-widget-dialog-container {
        top: auto !important;
        right: 10% !important;
        bottom: 78% !important;
        left: auto !important;
    }

    #live2d-widget.live2d-position-left .live2d-widget-dialog-container {
        top: auto !important;
        right: auto !important;
        bottom: 78% !important;
        left: 10% !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .interactive-character *,
    .interactive-character *:before,
    .interactive-character *:after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}