/* =========================================================
   桌宠（蓝色大肥鱼，素材见 assets/pet/，逻辑见 js/pet.js）
   ========================================================= */

/* ---------------- 左侧看板娘把手 ----------------
   与 live2d-widget 的 #waifu-toggle 保持一致（写死在原版里的那套值）：
   #fa0 橙底、白字 12px 竖排、60px 宽、圆角 5px、bottom 66px，
   平时整条缩在屏幕外（-100px），收起看板娘后露 10px（-50px），hover 再滑出到 -30px。 */
.pet-toggle {
    background-color: #fa0;
    border-radius: 5px;
    bottom: 66px;
    color: #fff;
    cursor: pointer;
    font-size: 12px;
    left: 0;
    margin-left: -100px;
    padding: 5px 2px 5px 5px;
    position: fixed;
    transition: margin-left 1s;
    width: 60px;
    writing-mode: vertical-rl;
    z-index: 65;
    /* 以下三条只是为了贴近原版观感：竖排字别被系统字体挤歪、别被选中、别出蓝框 */
    line-height: 1;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* 看板娘收起来时露一条，鼠标移上去再滑出来（对应原版 .waifu-toggle-active） */
.pet-toggle.is-shown {
    margin-left: -50px;
}

.pet-toggle.is-shown:hover,
.pet-toggle.is-shown:focus-visible {
    margin-left: -30px;
    outline: none;
}

/* 竖屏（且还没横过屏）时把手整条不给，见 js/pet.js 的 syncHandle() */
.pet-toggle.is-off {
    display: none;
}

.pet {
    /* --fw 是「鱼身宽度」，其余尺寸按 640×360 画布里鱼的实际位置换算 */
    --fw: 152px;
    --fh: calc(var(--fw) * 310 / 260);
    /* 甩出去时的侧身角度，由 JS 写 */
    --pet-roll: 0deg;

    position: fixed;
    z-index: 60;
    width: var(--fw);
    height: var(--fh);
    left: 0;
    top: 0;
    /* 拖拽时靠 JS 写 left/top，这里只负责平滑移动 */
    transition: left .45s cubic-bezier(.32, .72, .35, 1),
        top .45s cubic-bezier(.32, .72, .35, 1),
        transform .4s cubic-bezier(.32, .72, .35, 1),
        opacity .3s ease;
    cursor: grab;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

.pet[hidden] {
    display: none !important;
}

.pet.is-dragging {
    cursor: grabbing;
    transition: none;
}

/* 收起时整条鱼滑到屏幕左边外面（入场时反过来，由 JS 摘掉这个类） */
.pet.is-out {
    transform: translateX(-135%);
    opacity: 0;
    pointer-events: none;
}

/* 飞行时位置由 rAF 逐帧写，不能有过渡 */
.pet.is-flying {
    transition: none;
    cursor: grab;
}

/* 鱼旁边的小工具列：跟 live2d 一样平时淡出，hover 才出现 */
.pet-tool {
    position: absolute;
    right: -6px;
    top: 6px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 4px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}

.pet:hover .pet-tool,
.pet:focus-within .pet-tool {
    opacity: 1;
    pointer-events: auto;
}

.pet-tool-btn {
    -webkit-appearance: none;
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(160, 200, 255, .22);
    border-radius: 50%;
    background: rgba(22, 28, 38, .88);
    color: #b9c9dd;
    font: inherit;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.pet-tool-btn:hover,
.pet-tool-btn:focus-visible {
    background: rgba(120, 178, 255, .28);
    border-color: rgba(160, 200, 255, .45);
    color: #fff;
    outline: none;
}

/* 触屏没有 hover：工具列常显一点，够点得到 */
@media (hover: none) {
    .pet-tool {
        opacity: .62;
        pointer-events: auto;
    }

    .pet:hover .pet-tool {
        opacity: .62;
    }
}

/* 侧身层：单独一层做旋转，翻转和位置都互不干扰 */
.pet-tilt {
    width: 100%;
    height: 100%;
    transform: rotate(var(--pet-roll, 0deg));
    transition: transform .45s cubic-bezier(.32, .72, .35, 1);
}

.pet.is-flying .pet-tilt {
    transition: none;
}

/* 镜像层：朝左走时整体翻转，鱼的锚点不会跑偏 */
.pet-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-origin: 50% 50%;
    /* 视频层叠加，单独成层避免透明视频合成出白底 */
    isolation: isolate;
}

.pet.is-left .pet-inner {
    transform: scaleX(-1);
}

/* 视频层：每个片段一层，新片有画面了才切显示，避免加载瞬间的白框/闪烁 */
.pet .pet-video {
    position: absolute;
    /* 把 640×360 画布偏移到「鱼正好落在容器里」 */
    left: calc(var(--fw) * -190 / 260);
    top: calc(var(--fh) * -19 / 310);
    width: calc(var(--fw) * 640 / 260);
    height: auto;
    pointer-events: none;
    background: transparent;
    /* 透明区域不挡页面点击 */
    -webkit-user-drag: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .13s linear;
}

.pet .pet-video.is-active {
    opacity: 1;
    visibility: visible;
}

/* 别让安卓/iOS 的原生播放控件冒出来 */
.pet .pet-video::-webkit-media-controls,
.pet .pet-video::-webkit-media-controls-panel {
    display: none !important;
    -webkit-appearance: none;
}

/* 走动时不要过渡（由 JS 按距离做线性移动） */
.pet.is-walking {
    transition: left var(--walk-ms, 3s) linear;
}

/* 被连点时抖一下 / 说话时轻轻一跳 */
.pet.is-shake .pet-tilt {
    animation: pet-shake .46s cubic-bezier(.36, .07, .19, .97);
}

.pet.is-pulse .pet-tilt {
    animation: pet-pulse .6s ease-out;
}

@keyframes pet-shake {
    0%, 100% { transform: rotate(0) translateX(0); }
    15% { transform: rotate(-3deg) translateX(-3px); }
    35% { transform: rotate(3deg) translateX(3px); }
    55% { transform: rotate(-2deg) translateX(-2px); }
    75% { transform: rotate(2deg) translateX(2px); }
}

@keyframes pet-pulse {
    0% { transform: translateY(0) scale(1); }
    35% { transform: translateY(-6px) scale(1.05); }
    70% { transform: translateY(0) scale(.99); }
    100% { transform: translateY(0) scale(1); }
}

/* ---------------- 台词气泡 ---------------- */
.pet-bubble {
    --bx: 0px;

    position: absolute;
    left: 50%;
    bottom: calc(100% - 6px);
    z-index: 2;
    max-width: 232px;
    padding: 7px 11px;
    border-radius: 12px;
    border: 1px solid rgba(160, 200, 255, .22);
    background: rgba(20, 25, 34, .94);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .42);
    color: #e9f1ff;
    font-size: 12.5px;
    line-height: 1.55;
    letter-spacing: .2px;
    text-align: left;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    word-break: break-word;
    pointer-events: none;
    opacity: 0;
    transform: translate(calc(-50% + var(--bx)), 6px) scale(.94);
    transform-origin: 50% 100%;
    transition: opacity .2s ease, transform .22s cubic-bezier(.34, 1.32, .64, 1);
}

.pet-bubble.show {
    opacity: 1;
    transform: translate(calc(-50% + var(--bx)), 0) scale(1);
}

/* 气泡小尖角 */
.pet-bubble::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -5px;
    width: 9px;
    height: 9px;
    margin-left: -4.5px;
    border-radius: 2px;
    background: inherit;
    box-shadow: 1px 1px 0 rgba(160, 200, 255, .22);
    transform: rotate(45deg);
}

/* 鱼在屏幕顶部时气泡翻到下方 */
.pet-bubble.is-below {
    bottom: auto;
    top: calc(100% - 6px);
    transform-origin: 50% 0;
}

.pet-bubble.is-below::after {
    bottom: auto;
    top: -5px;
    box-shadow: -1px -1px 0 rgba(160, 200, 255, .22);
}

/* ---------------- 长按动作菜单 ---------------- */
.pet-menu {
    position: fixed;
    z-index: 70;
    min-width: 138px;
    max-height: min(62vh, 430px);
    padding: 6px;
    border-radius: 13px;
    border: 1px solid rgba(160, 200, 255, .18);
    background: rgba(20, 25, 34, .97);
    box-shadow: 0 16px 36px rgba(0, 0, 0, .5);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    animation: pet-menu-in .16s ease-out;
    cursor: default;
    /* 动作多了会超出一屏，让菜单自己滚 */
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(160, 200, 255, .3) transparent;
}

.pet-menu::-webkit-scrollbar {
    width: 6px;
}

.pet-menu::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: rgba(160, 200, 255, .28);
}

@keyframes pet-menu-in {
    from { opacity: 0; transform: translateY(4px) scale(.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.pet-menu-title {
    margin: 2px 6px 5px;
    color: #7f8b9f;
    font-size: 11px;
    line-height: 1.4;
    white-space: nowrap;
}

/* 分组小标题 */
.pet-menu-group {
    margin: 7px 8px 3px;
    color: #62707f;
    font-size: 10.5px;
    line-height: 1.4;
    letter-spacing: .6px;
    white-space: nowrap;
}

.pet-menu-group:first-of-type {
    margin-top: 4px;
}

.pet-menu button {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    margin: 0;
    padding: 7px 10px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #dae4f6;
    font: inherit;
    font-size: 12.5px;
    line-height: 1.4;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.pet-menu button:hover,
.pet-menu button:focus-visible {
    background: rgba(120, 178, 255, .18);
    color: #fff;
    outline: none;
}

/* 手机：小一号，别挡住搜索框和页脚 */
@media (max-width: 767px) {
    .pet {
        --fw: 112px;
    }

    .pet-bubble {
        max-width: 180px;
        font-size: 12px;
        padding: 6px 10px;
    }
}

@media (max-width: 380px) {
    .pet {
        --fw: 96px;
    }

    .pet-bubble {
        max-width: 156px;
    }
}

/* 尊重系统「减少动态效果」：只留待机，不再自己走动 */
@media (prefers-reduced-motion: reduce) {
    .pet,
    .pet-tilt,
    .pet-toggle,
    .pet-tool {
        transition: none;
    }

    .pet .pet-video {
        transition: none;
    }

    .pet.is-shake .pet-tilt,
    .pet.is-pulse .pet-tilt {
        animation: none;
    }

    .pet-bubble {
        transition: opacity .2s linear;
        transform: translate(calc(-50% + var(--bx)), 0);
    }

    .pet-bubble.is-below {
        transform: translate(calc(-50% + var(--bx)), 0);
    }
}

@media print {
    .pet,
    .pet-bubble,
    .pet-menu {
        display: none !important;
    }
}