.vg-root {
    --voice-level: 0;
    --vg-avatar-width: 180px;
    --vg-avatar-height: 225px;
    --vg-figure-height: calc(var(--vg-avatar-height) - 72px);
    --vg-figure-width: calc(var(--vg-figure-height) * .8);
    --vg-safe-top: env(safe-area-inset-top);
    --vg-safe-right: env(safe-area-inset-right);
    --vg-safe-bottom: env(safe-area-inset-bottom);
    --vg-safe-left: env(safe-area-inset-left);
    position: fixed;
    box-sizing: border-box;
    container-type: inline-size;
    inset: 0;
    z-index: 10;
    pointer-events: none;
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
    color: #f8f8f6;
    font-size: 14px;
    letter-spacing: 0;
    text-align: left;
    padding: max(12px, var(--vg-safe-top)) max(12px, var(--vg-safe-right))
        max(12px, var(--vg-safe-bottom)) max(12px, var(--vg-safe-left));
}
.vg-root[data-game-frame="true"] { position: absolute; }
.vg-tour {
    position: absolute;
    left: 5.5%;
    top: 22%;
    width: 58%;
    max-width: 630px;
    pointer-events: auto;
    text-shadow: 0 1px 3px #0006;
}
.vg-tour[hidden] { display: none; }
.vg-tour h1 { margin: 0 0 18px; font-size: 26px; line-height: 1.35; font-weight: 600; color: #f5faf7; }
.vg-tour-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.vg-root .vg-tour-choice {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    height: 80px;
    padding: 9px;
    border: 1px solid #c7dfd22b;
    border-radius: 6px;
    background: #101c1bd1;
    text-align: left;
    transition: background 160ms ease, border-color 160ms ease;
}
.vg-tour-thumbnail { position: relative; flex: 0 0 66px; height: 60px; overflow: hidden; border-radius: 3px; }
.vg-tour-thumbnail > img:first-child { display: block; width: 100%; height: 100%; object-fit: cover; }
.vg-tour-thumbnail .vg-tour-play {
    position: absolute; right: 4px; bottom: 4px; width: 21px; height: 21px;
    padding: 4px; border: 1px solid #ffffff80; border-radius: 50%; background: #07100dc9;
}
.vg-tour-copy { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.vg-tour-choice strong { font-size: 16px; line-height: 1.4; font-weight: 500; color: #f5faf7; }
.vg-tour-choice small { font-size: 11px; line-height: 1.45; color: #bfcdc7; }
.vg-root .vg-tour-choice:hover, .vg-root .vg-tour-choice:focus-visible {
    background: #20362ef0; border-color: #f0d77c;
}
.vg-root .vg-tour-choice:active { background: #294337; }
.vg-root .vg-tour-browse {
    display: flex; justify-content: flex-start; gap: 8px; min-height: 44px;
    margin-top: 8px; font-size: 12px; color: #dce5e0;
}
.vg-tour-browse img { width: 14px; height: 14px; opacity: .8; }
.vg-tour-browse:hover { color: #f0d77c; }
.vg-root[data-short="true"] .vg-tour { top: 19%; }
.vg-root[data-short="true"] .vg-tour h1 { font-size: 22px; margin-bottom: 12px; }
.vg-root[data-short="true"] .vg-tour-choice { height: 70px; }
.vg-root[data-short="true"] .vg-tour-thumbnail { height: 50px; }
.vg-root[data-short="true"] .vg-tour-browse { margin-top: 2px; }
@container (max-width: 719px) {
    .vg-root .vg-tour-choice { gap: 8px; }
    .vg-root .vg-tour-thumbnail { flex-basis: 48px; }
    .vg-root .vg-tour-choice strong { font-size: 14px; }
}
.vg-root[data-compact="true"] .vg-tour { width: 54%; }
.vg-root[data-compact="true"] .vg-tour-choices { gap: 8px; }
.vg-root[data-compact="true"] .vg-tour-choice { gap: 7px; padding: 7px; }
.vg-root[data-compact="true"] .vg-tour-thumbnail { flex-basis: 44px; }
.vg-root[data-compact="true"] .vg-tour-choice strong { font-size: 13px; }
.vg-root[data-compact="true"] .vg-tour-choice small { font-size: 10px; }
.vg-root[data-spacious="true"] .vg-tour h1 { font-size: 32px; margin-bottom: 24px; }
.vg-root[data-spacious="true"] .vg-tour-choice { height: 106px; padding: 12px; gap: 16px; }
.vg-root[data-spacious="true"] .vg-tour-thumbnail { flex-basis: 90px; height: 80px; }
.vg-root[data-spacious="true"] .vg-tour-choice strong { font-size: 18px; }
.vg-root[data-spacious="true"] .vg-tour-choice small { font-size: 12px; }
.vg-root * { box-sizing: border-box; }
.vg-root button, .vg-root input {
    font: inherit;
    color: inherit;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
}
.vg-root button {
    border: 0;
    cursor: pointer;
    padding: 0;
    display: grid;
    place-items: center;
    background: transparent;
}
.vg-root button:focus-visible, .vg-root input:focus-visible {
    outline: 2px solid #ffdf48;
    outline-offset: 3px;
}
.vg-root button:disabled { opacity: .45; cursor: default; }
.vg-tour-welcome { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.vg-tour-welcome[hidden], .vg-tour-title[hidden] { display: none; }
.vg-root .vg-tour-welcome h1 { margin: 0; font-size: 22px; }
.vg-root .vg-tour .vg-tour-welcome h1 { margin: 0; }
.vg-tour-welcome-copy { min-width: 0; }
.vg-tour-welcome-copy p { margin: 5px 0 0; font-size: 12px; line-height: 1.4; color: #d4dfd9; }
.vg-root .vg-tour-start {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    flex: 0 0 auto; min-height: 44px; padding: 10px 14px;
    border: 1px solid #f2db96; border-radius: 6px;
    background: #f0d77c; color: #18271f; font-size: 14px; font-weight: 600;
    white-space: nowrap; text-shadow: none;
}
.vg-tour-start img { width: 18px; height: 18px; filter: brightness(.18); }
.vg-root .vg-tour-start:hover { background: #ffe79b; }
.vg-root[data-short="true"] .vg-tour-welcome { margin-bottom: 10px; }
.vg-root[data-compact="true"] .vg-tour-welcome { gap: 8px; }
.vg-root[data-compact="true"] .vg-tour-welcome h1 { font-size: 17px; }
.vg-root[data-compact="true"] .vg-tour-welcome-copy p { font-size: 10px; }
.vg-root[data-compact="true"] .vg-tour-start { gap: 5px; padding: 8px; font-size: 12px; }
.vg-root[data-spacious="true"] .vg-tour-welcome { margin-bottom: 24px; }
.vg-root[data-spacious="true"] .vg-tour-welcome h1 { font-size: 28px; }
.vg-dock {
    position: absolute;
    right: max(22px, var(--vg-safe-right));
    bottom: 122px;
    width: calc(var(--vg-avatar-width) + 72px);
    height: calc(var(--vg-avatar-height) + 56px);
}
.vg-caption {
    position: absolute;
    top: 0;
    padding: 6px 10px;
    border-radius: 6px;
    background: #111a1852;
    color: #fff;
    font-size: 12px;
    line-height: 17px;
    text-align: center;
    overflow-wrap: anywhere;
    text-shadow: 0 1px 3px #000;
    pointer-events: none;
}
.vg-caption[hidden] { display: none; }
.vg-root[data-state="idle"] .vg-caption:not([hidden]) {
    animation: vg-caption-fade 4s linear forwards;
}
@keyframes vg-caption-fade {
    0%, 90% { opacity: 1; }
    100% { opacity: 0; }
}
.vg-root .vg-launch {
    position: absolute;
    left: 0;
    bottom: 70px;
    width: var(--vg-avatar-width);
    height: calc(var(--vg-figure-height) + 6px);
    filter: drop-shadow(0 3px 12px #0008);
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    cursor: grab;
}
.vg-dock[data-dragging="true"] .vg-launch { cursor: grabbing; }
.vg-avatar-stage { position: relative; display: block; width: var(--vg-figure-width); height: var(--vg-figure-height); pointer-events: none; }
.vg-avatar-loading {
    display: none;
    position: absolute;
    z-index: 1;
    left: 12px;
    right: 12px;
    bottom: 16px;
    padding: 6px 4px;
    border-radius: 6px;
    background: #17191de8;
    color: #f8f8f6;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
}
.vg-avatar-stage[data-avatar-status="loading"] .vg-avatar-loading,
.vg-avatar-stage[data-avatar-status="error"] .vg-avatar-loading { display: block; }
.vg-avatar {
    display: block;
    width: var(--vg-figure-width);
    height: var(--vg-figure-height);
    object-fit: contain;
    padding: 4px;
}
.vg-avatar-stage canvas {
    position: absolute;
    inset: 0;
    width: var(--vg-figure-width) !important;
    height: var(--vg-figure-height) !important;
    pointer-events: none;
    opacity: 0;
}
.vg-avatar-stage[data-avatar-ready="true"] canvas { opacity: 1; }
.vg-avatar-stage[data-avatar-ready="true"] .vg-avatar { opacity: 0; }
.vg-root .vg-badge {
    position: absolute;
    left: calc((var(--vg-avatar-width) - 128px) / 2);
    bottom: 0;
    width: 128px;
    height: 66px;
    isolation: isolate;
    grid-template-rows: 46px 20px;
    border-radius: 24px 24px 8px 8px;
    touch-action: manipulation;
}
.vg-root .vg-badge::before {
    content: "";
    position: absolute;
    top: 0;
    left: 41px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #152c31;
    border: 1px solid #b4e8ed;
    border-left-color: #b7b8e5;
    border-right-color: #9cecff;
    box-shadow: -2px 0 10px #a261ff40, 2px 0 12px #5cceff55, inset 0 0 8px #8c94ff22;
    transition: background 150ms ease, transform 150ms ease;
    z-index: -1;
}
.vg-badge img {
    grid-row: 1;
    width: 22px;
    height: 22px;
    filter: drop-shadow(0 0 3px #adcaff);
}
.vg-badge-label {
    grid-row: 2;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    line-height: 20px;
    white-space: nowrap;
    text-shadow: 0 1px 3px #000, 0 0 6px #000;
}
.vg-badge-label::before,
.vg-badge-label::after {
    content: "";
    position: absolute;
    top: 5px;
    width: 30px;
    height: 28px;
    pointer-events: none;
    background: linear-gradient(90deg, #9670ff, #f4eaff 75%, #bea1ff);
    clip-path: polygon(0 48%, 8% 45%, 14% 29%, 20% 48%, 28% 44%, 35% 12%, 42% 47%, 49% 39%, 58% 0, 66% 43%, 73% 45%, 83% 20%, 89% 46%, 100% 48%, 100% 52%, 89% 54%, 83% 80%, 73% 55%, 66% 57%, 58% 100%, 49% 61%, 42% 53%, 35% 88%, 28% 56%, 20% 52%, 14% 71%, 8% 55%, 0 52%);
    transform: scaleY(.6);
    opacity: .5;
    transition: transform 90ms linear;
}
.vg-badge-label::before { left: 5px; }
.vg-badge-label::after {
    right: 5px;
    background: linear-gradient(90deg, #a1c4ff, #edfaff 25%, #5bbcff);
    transform: scale(-1, .6);
}
.vg-root[data-state="listening"] .vg-badge-label::before,
.vg-root[data-state="speaking"] .vg-badge-label::before {
    transform: scaleY(calc(.25 + var(--voice-level) * 1.3));
    opacity: 1;
}
.vg-root[data-state="listening"] .vg-badge-label::after,
.vg-root[data-state="speaking"] .vg-badge-label::after {
    transform: scale(-1, calc(.25 + var(--voice-level) * 1.3));
    opacity: 1;
}
.vg-root .vg-text-launch,
.vg-root .vg-minimize {
    position: absolute;
    left: calc(var(--vg-avatar-width) + 12px);
    right: auto;
    width: 44px;
    height: 44px;
    background: transparent;
    isolation: isolate;
    touch-action: manipulation;
}
.vg-root .vg-text-launch::before,
.vg-root .vg-minimize::before {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: #13211ed9;
    border: 1px solid #cae2d633;
    z-index: -1;
}
.vg-root .vg-text-launch img,
.vg-root .vg-minimize img {
    width: 16px;
    height: 16px;
}
.vg-root .vg-minimize {
    top: 56px;
    bottom: auto;
}
.vg-root .vg-text-launch {
    top: 104px;
    bottom: auto;
}
.vg-root .vg-text-launch img { width: 17px; height: 17px; }
.vg-root .vg-text-launch[aria-expanded="true"]::before {
    background: #28473b;
    border: 1px solid #c2d5cb;
}
@media (hover: hover) {
    .vg-root .vg-badge:hover::before { transform: scale(1.06); }
    .vg-root .vg-text-launch:hover::before,
    .vg-root .vg-minimize:hover::before { background: #30433a; }
}
.vg-compact-icon { display: none; }
.vg-root[data-expanded="false"] .vg-dock { width: 44px; height: 44px; }
.vg-root[data-expanded="false"] .vg-launch {
    bottom: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #17191de8;
    border: 1px solid #ffdf48a0;
}
.vg-root[data-expanded="false"] .vg-avatar-stage,
.vg-root[data-expanded="false"] .vg-badge,
.vg-root[data-expanded="false"] .vg-text-launch,
.vg-root[data-expanded="false"] .vg-minimize { display: none; }
.vg-root[data-expanded="false"] .vg-feedback { display: none; }
.vg-root .vg-welcome {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--vg-avatar-width);
    min-height: 44px;
    padding: 5px 8px;
    display: flex;
    justify-content: center;
    gap: 8px;
    border: 1px solid #c7dfd22b;
    border-radius: 6px;
    background: #13211eb3;
    font-size: 12px;
    line-height: 16px;
}
.vg-welcome img { width: 16px; height: 16px; }
.vg-root .vg-welcome[hidden],
.vg-root[data-expanded="false"] .vg-welcome { display: none; }
.vg-root[data-expanded="false"] .vg-compact-icon { display: block; }
.vg-root[data-state="listening"] .vg-badge::before {
    background: #32172e;
    border-color: #ffd9eb;
    box-shadow: -3px 0 8px #c979ff99, 3px 0 8px #5cceff99, 0 0 0 calc(1px + var(--voice-level) * 3px) #ed506b55;
}
.vg-root[data-state="listening"] .vg-badge-label { color: #fff; }
.vg-root[data-state="listening"] .vg-badge img { display: none; }
.vg-root[data-state="listening"] .vg-badge::after {
    content: "";
    position: absolute;
    top: 16px;
    left: 57px;
    width: 14px;
    height: 14px;
    background: #fff;
    border-radius: 2px;
}
.vg-root[data-state="listening"] .vg-panel form button[aria-pressed="true"] {
    background: #b62d39;
    border-radius: 6px;
}
.vg-feedback {
    position: absolute;
    top: 0;
    left: calc((var(--vg-avatar-width) - 144px) / 2);
    width: 144px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid #c7dfd24d;
    border-radius: 8px;
    background: #13211ef5;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
}
.vg-feedback[hidden] { display: none; }
.vg-feedback::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 66px;
    width: 8px;
    height: 8px;
    transform: rotate(45deg);
    background: #13211e;
    border-right: 1px solid #c7dfd24d;
    border-bottom: 1px solid #c7dfd24d;
}
.vg-root[data-state="listening"] .vg-feedback {
    background: #143e35;
    border-color: #64e9ba;
    color: #e5fff5;
}
.vg-root[data-state="listening"] .vg-feedback::after {
    background: #143e35;
    border-color: #64e9ba;
}
.vg-listening-meter, .vg-thinking-dots { display: none; align-items: center; gap: 3px; height: 20px; }
.vg-root[data-state="listening"] .vg-listening-meter { display: flex; }
.vg-listening-meter i {
    display: block;
    width: 3px;
    height: 18px;
    border-radius: 2px;
    background: #64e9ba;
    transform: scaleY(calc(.22 + var(--voice-level) * .78));
    transition: transform 80ms linear;
}
.vg-listening-meter i:nth-child(2n) { height: 12px; }
.vg-listening-meter i:nth-child(3) { height: 20px; }
.vg-root[data-state="connecting"] .vg-thinking-dots,
.vg-root[data-state="finishing"] .vg-thinking-dots,
.vg-root[data-state="thinking"] .vg-thinking-dots,
.vg-root[data-state="synthesizing"] .vg-thinking-dots { display: flex; }
.vg-thinking-dots i {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #ffdf48;
    animation: vg-think 1.1s ease-in-out infinite;
}
.vg-thinking-dots i:nth-child(2) { animation-delay: .16s; }
.vg-thinking-dots i:nth-child(3) { animation-delay: .32s; }
@keyframes vg-think {
    0%, 65%, 100% { transform: translateY(0); opacity: .45; }
    30% { transform: translateY(-4px); opacity: 1; }
}
.vg-panel {
    pointer-events: auto;
    position: absolute;
    right: max(122px, calc(var(--vg-safe-right) + 108px));
    top: max(22px, var(--vg-safe-top));
    bottom: max(22px, var(--vg-safe-bottom));
    width: 316px;
    max-height: 380px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: #111a1852;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    text-shadow: 0 1px 3px #000, 0 0 4px #0008;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.vg-panel[hidden] { display: none; }
.vg-panel header {
    flex: 0 0 48px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding-left: 16px;
    border-bottom: 1px solid #ffffff0d;
}
.vg-panel header strong { min-width: 0; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.vg-panel header span { flex: 1; min-width: 0; font-size: 11px; color: #d6d8dd; }
.vg-panel header button { flex-shrink: 0; width: 44px; height: 44px; }
.vg-messages { flex: 1; min-height: 0; overflow-y: auto; padding: 15px 17px; }
.vg-messages small { color: #dcd1a0; font-size: 11px; }
.vg-messages p { font-size: 14px; line-height: 1.7; margin: 5px 0 16px; overflow-wrap: anywhere; }
.vg-panel form {
    flex: 0 0 54px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 7px;
    border-top: 1px solid #ffffff0d;
}
.vg-panel form button { width: 40px; height: 40px; flex-shrink: 0; }
.vg-panel form button[type="submit"] { background: #ead78c; border-radius: 6px; }
.vg-panel form button[type="submit"] img { filter: brightness(0); }
.vg-panel input {
    min-width: 0;
    width: 100%;
    height: 38px;
    padding: 0 8px;
    border: none;
    outline: none;
    background: transparent;
    user-select: text;
    -webkit-user-select: text;
}
.vg-panel input::placeholder { color: #bfc3cb; }
.vg-credit { flex: 0 0 22px; color: #bfc3cb; font-size: 10px; text-align: center; line-height: 22px; }
.vg-root[data-compact="true"] .vg-panel {
    width: min(316px, calc(100% - 32px));
    left: max(16px, var(--vg-safe-left));
    right: auto;
    top: max(16px, var(--vg-safe-top));
    bottom: max(16px, var(--vg-safe-bottom));
    max-height: 380px;
    min-height: 0;
}
@media (prefers-reduced-transparency: reduce) {
    .vg-panel {
        background: #17191df5;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    .vg-root .vg-tour-choice { transition: none; }
    .vg-root .vg-caption { animation: none; }
    .vg-root .vg-badge::before { transition: none; }
    .vg-badge-label::before, .vg-badge-label::after { transition: none; }
    .vg-thinking-dots i { animation: none; opacity: 1; }
    .vg-listening-meter i { transition: none; }
    .vg-root .vg-avatar { opacity: 1; }
    .vg-root .vg-avatar-stage canvas { display: none; }
}