/*
 * pio.css - Live2D 看板娘样式表
 * 
 * 包含：
 * 1. 容器基础布局与定位
 * 2. 交互组件（按钮、气泡）样式
 * 3. 状态样式（隐藏、显示、左右对齐）
 * 4. 响应式适配
 * 5. 模型个性化参数微调
 */

/* ==========================================================================
   1. 基础容器布局
   ========================================================================== */

/* 主容器：固定定位，层级控制 */
.pio-container {
    position: fixed;
    bottom: 0;
    z-index: 100;
    color: #666;
    user-select: none; /* 禁止选中文本 */
}

/* 状态：左对齐 */
.pio-container.left {
    left: 0;
}

/* 状态：右对齐 */
.pio-container.right {
    right: 0;
}

/* 状态：可拖拽 (激活鼠标手势) */
.pio-container.active {
    cursor: move;
}

/* 状态：静态 (禁止鼠标事件) */
.pio-container.static {
    pointer-events: none;
}

/* ==========================================================================
   2. 唤醒按钮 (隐藏状态下显示)
   ========================================================================== */

.pio-container .pio-show {
    display: none; /* 默认隐藏 */
    position: relative;
    width: 6.0em;
    height: 6.0em;
    margin-top: 144px;
    margin-left: -2.5em;
    cursor: pointer;
    opacity: 0.7;
    transition: all .3s;
    background: url(/live2d/Duo.png) center/contain;
}

/* 容器隐藏时 -> 显示唤醒按钮 */
.pio-container.hidden .pio-show {
    display: block;
}

/* 容器隐藏时 -> 隐藏主体元素 */
.pio-container.hidden #pio,
.pio-container.hidden .pio-action,
.pio-container.hidden .pio-dialog {
    display: none;
}

/* 右对齐时的镜像翻转 */
.pio-container.right .pio-show {
    margin-left: 7.0em;
    margin-right: -2.5em;
    transform: scaleX(-1);
}

/* 悬停交互效果 */
.pio-container.hidden .pio-show:hover {
    opacity: 1.0;
    transform: translateX(2.0em);
}
.pio-container.right.hidden .pio-show:hover {
    transform: scaleX(-1) translateX(2.0em);
}

/* ==========================================================================
   3. 功能菜单 (Action Buttons)
   ========================================================================== */

.pio-container .pio-action {
    position: absolute;
    top: 3em;
    z-index: 1;
    opacity: 0;
    transition: opacity .3s;
    cursor: default;
    user-select: none;
}

/* 左对齐 -> 菜单居右 */
.pio-container.left .pio-action {
    right: 0;
}

/* 右对齐 -> 菜单居左 */
.pio-container.right .pio-action {
    left: 0;
}

/* 悬停或激活状态 -> 显示菜单 */
.pio-container:hover .pio-action,
.pio-container.show-action .pio-action {
    opacity: 1;
}

/* 按钮通用样式 */
.pio-action span {
    display: block;
    width: 1.8em;
    height: 1.8em;
    margin-bottom: .5em;
    color: #fff;
    text-align: center;
    cursor: pointer;
    background-size: 100%;
}

/* 按钮图标定义 */
.pio-action .pio-touch { background-image: url("/live2d/SVG/touch.svg"); }
.pio-action .pio-home  { background-image: url("/live2d/SVG/home.svg"); }
.pio-action .pio-close { background-image: url("/live2d/SVG/close.svg"); }
.pio-action .pio-skin  { background-image: url("/live2d/SVG/skin.svg"); }
.pio-action .pio-info  { background-image: url("/live2d/SVG/info.svg"); }
.pio-action .pio-night { background-image: url("/live2d/SVG/night.svg"); }

/* 拖拽按钮文字 */
.pio-action .pio-touch::after {
    content: "移";
    font-size: 18px;
    line-height: 30px;
    color: #fff;
}

/* 夜间模式适配 */
.darkmode .pio-action .pio-night {
    background-image: url("/live2d/SVG/light.svg");
}

/* 左右切换图标适配 */
.pio-container.right .pio-action .pio-tran { background-image: url("/live2d/SVG/right.svg"); }
.pio-container.left .pio-action .pio-tran  { background-image: url("/live2d/SVG/left.svg"); }

/* ==========================================================================
   4. 对话气泡 (Dialog)
   ========================================================================== */

.pio-container .pio-dialog {
    position: absolute;
    top: -2em;
    z-index: 1;
    min-width: 12em;
    padding: .75em 1em;
    border: 1px solid #eee;
    border-radius: 1em;
    background: #fff;
    font-size: .8em;
    word-break: break-all;
    
    /* 显隐动画 */
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s, visibility .3s;
}

/* 激活状态 */
.pio-container .pio-dialog.active {
    opacity: 1;
    visibility: visible;
}

/* 位置适配 */
.pio-container.left .pio-dialog { left: 1em; }
.pio-container.right .pio-dialog { right: 1em; }

/* ==========================================================================
   5. Canvas 画布
   ========================================================================== */

#pio {
    width: 170px;
    vertical-align: middle;
}

/* ==========================================================================
   6. 响应式适配 (移动端)
   ========================================================================== */

@media screen and (max-width: 768px) {
    /* 移动端上移菜单，防止遮挡 */
    .pio-container .pio-action {
        transform: translateY(-2em);
    }
}

/* ==========================================================================
   7. 模型个性化参数微调
   说明：针对不同模型的尺寸和重心进行 CSS 修正
   ========================================================================== */

/* 模板 */
#pio-container[data-model="你的模型名字"] #pio {
    position: relative;
    transform: scale(1.0); /* 缩放 */
    bottom: 114px;         /* 垂直位移 */
    margin-left: 514px;    /* 水平位移 */
}
#pio-container[data-model="你的模型名字"] .pio-dialog {
    margin-top: -233px;    /* 气泡垂直位移 */
}

/* 模型: aolianfei */
#pio-container[data-model="aolianfei"] #pio {
    position: relative;
    transform: scale(1.5);
    bottom: 4px;
}
#pio-container[data-model="aolianfei"] .pio-dialog { margin-top: -100px; }
#pio-container[data-model="aolianfei"] .pio-action { top: 2em; }

/* 模型: bu */
#pio-container[data-model="bu"] #pio {
    position: relative;
    bottom: -23px;
}
#pio-container[data-model="bu"] .pio-dialog { margin-top: -20px; }
#pio-container[data-model="bu"] .pio-action { top: 1.4em; }

/* 模型: smallmita */
#pio-container[data-model="smallmita"] #pio {
    position: relative;
    transform: scale(1.2);
    bottom: 15px;
}
#pio-container[data-model="smallmita"] .pio-dialog { margin-top: -100px; }
#pio-container[data-model="smallmita"] .pio-action { top: 2.9em; }

/* 模型: MiTa */
#pio-container[data-model="MiTa"] #pio {
    position: relative;
    bottom: -23px;
}
#pio-container[data-model="MiTa"] .pio-dialog { margin-top: -10px; }
#pio-container[data-model="MiTa"] .pio-action { top: 7.3em; }

/* 模型: yang */
#pio-container[data-model="yang"] #pio {
    position: relative;
    bottom: -9px;
}
#pio-container[data-model="yang"] .pio-dialog { margin-top: -10px; }
#pio-container[data-model="yang"] .pio-action { top: 8.7em; }

/* 模型: 37 */
#pio-container[data-model="37"] #pio {
    position: relative;
    bottom: -11px;
}
#pio-container[data-model="37"] .pio-dialog { margin-top: -30px; }
#pio-container[data-model="37"] .pio-action { top: 5.2em; }

/* 模型: jane */
#pio-container[data-model="jane"] #pio {
    position: relative;
    bottom: -17px;
}
#pio-container[data-model="jane"] .pio-dialog { margin-top: -10px; }
#pio-container[data-model="jane"] .pio-action { top: 8.8em; }

/* 模型: Nicole */
#pio-container[data-model="Nicole"] #pio {
    position: relative;
    bottom: -11px;
}
#pio-container[data-model="Nicole"] .pio-dialog { margin-top: -10px; }
#pio-container[data-model="Nicole"] .pio-action { top: 6.8em; }

/* 模型: vva */
#pio-container[data-model="vva"] #pio {
    position: relative;
    bottom: -20px;
}
#pio-container[data-model="vva"] .pio-dialog { margin-top: -10px; }