/* ============================================================================
 * live2d-local.css — Stage 2G-04E (toolbar + tips redo).
 * Parent style.css provides base .prpr/#live2d positioning + responsive scale. Here:
 *  - Toolbar: ToryXie-style COMPACT vertical icon column (4 glass round buttons:
 *    Talk/Switch/Save/Hide). On the model's RIGHT side, inside the container's visual area
 *    (NOT at the browser edge). Low-opacity resident on desktop, full on hover/tap; all 4
 *    show together. Overrides the parent's fixed/edge-park/vertical-text .live2d-tool rules.
 *  - Tips: ABOVE the model (upper area), arrow points DOWN at the model head (NOT at the
 *    right-side toolbar). Frosted glass + arrow. Costume-aware offset hooks (.prpr[data-costume]).
 *  - Tips/toolbar/model never overlap; tips and tools are children of .prpr so they follow drag.
 * No external resources. No display:none on the widget (except the session Hide toggle).
 * ========================================================================== */
.prpr { z-index: 99; overflow: visible; touch-action: pan-y;
        --ww-tip-left: 40px; --ww-tip-bottom: 192px; --ww-tip-rot: -1.6deg; --ww-tip-arrow-left: 60%; }
#live2d { z-index: 99; position: relative; }

/* 2G-04H: disable text selection ONLY inside the Live2D UI. Fast/double clicks on the toolbar
   were selecting the .mashiro-tips speech text -> a black "selected text" bar that lingered.
   Scoped to .prpr + the restore badge; does NOT touch article/comment/body text. */
.prpr,
.prpr *,
.mashiro-tips,
.ww-l2d-tools,
.ww-l2d-tools *,
#ww-l2d-restore,
#ww-l2d-restore *,
#live2d {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.ww-l2d-tools .ww-l2d-btn,
#ww-l2d-restore { -webkit-touch-callout: none; }

/* neutralise the parent's old text toolbar entirely (it stacked 3 fixed divs at the edge) */
.prpr .live2d-tool { all: unset; }

/* ===== Toolbar: compact round glass icon buttons, vertical, model's right side ===== */
.prpr .ww-l2d-tools {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 9px;
    z-index: 101;
    opacity: 0.32;                 /* desktop: low-opacity resident (not hidden, not edge) */
    transition: opacity .25s ease;
}
.prpr:hover .ww-l2d-tools,
.prpr.ww-l2d-open .ww-l2d-tools { opacity: 1; }

.prpr .ww-l2d-tools .ww-l2d-btn {
    box-sizing: border-box;
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    cursor: pointer; user-select: none;
    color: #3a3e49;                 /* 2G-04F: line-SVG icon color (currentColor) */
    background: rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    backdrop-filter: blur(10px) saturate(1.2);
    box-shadow: 0 4px 12px rgba(31, 35, 48, .18), inset 0 1px 0 rgba(255, 255, 255, .6);
    transition: background .15s ease, transform .1s ease;
}
.prpr .ww-l2d-tools .ww-l2d-btn:hover { background: rgba(255, 255, 255, .9); transform: scale(1.08); color: #1c2026; }
.prpr .ww-l2d-tools .ww-l2d-btn:active { transform: scale(.92); }
.prpr .ww-l2d-tools .ww-l2d-btn:focus-visible { outline: 2px solid rgba(60,64,75,.55); outline-offset: 1px; color: #1c2026; }
.prpr .ww-l2d-tools .ww-l2d-ico { display: flex; align-items: center; justify-content: center; line-height: 0; }
.prpr .ww-l2d-tools .ww-l2d-svg { width: 17px; height: 17px; display: block; }
@supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
    .prpr .ww-l2d-tools .ww-l2d-btn { background: rgba(255, 255, 255, .92); }
}

/* Hide toggle -> collapse model+tips, keep a tiny restore button */
/* 2G-04G: collapse WITHOUT display:none on the WebGL canvas (display:none corrupted the model
   on restore -> only eyes+wings). Opacity keeps canvas size + GL context + draw loop alive. */
/* 2G-04I: hide/show 动画由 JS(live2d-local.js)用 getBoundingClientRect 实时驱动 —— 所以
   即使看板娘被【拖动】过、或在【不同屏幕尺寸/缩放】下,也能精准"吸进"左下角还原按钮。
   CSS 只标记折叠态不可交互;transform/opacity 由 JS 内联设置(WebGL 画布保持存活,绝不 display:none)。 */
.prpr { will-change: transform, opacity; }
.prpr.ww-l2d-collapsed { pointer-events: none !important; }
#ww-l2d-restore {
    position: fixed; left: 10px; bottom: 10px; z-index: 102;
    width: 38px; height: 38px; border-radius: 50%;
    display: none; align-items: center; justify-content: center; cursor: pointer;
    font-size: 18px;
    background: rgba(255, 255, 255, 0.6);
    -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2);
    box-shadow: 0 6px 16px rgba(31, 35, 48, .2), inset 0 1px 0 rgba(255, 255, 255, .6);
}
#ww-l2d-restore { color: #3a3e49; }
#ww-l2d-restore:hover { color: #1c2026; }
#ww-l2d-restore .ww-l2d-svg { width: 19px; height: 19px; display: block; }
#ww-l2d-restore.show { display: flex; }
#ww-l2d-restore { overflow: visible; }
#ww-l2d-restore:hover { transform: scale(1.06); }
#ww-l2d-restore .ww-l2d-restore-icon { display: flex; align-items: center; justify-content: center;
    animation: ww-l2d-restore-bob 3.6s ease-in-out infinite; }
#ww-l2d-restore .ww-l2d-restore-icon svg { width: 22px; height: 22px; display: block; }
@keyframes ww-l2d-restore-bob {
    0%, 100% { transform: translateY(0) rotate(-4deg); }
    50%      { transform: translateY(-2.5px) rotate(4deg); }
}
@media (prefers-reduced-motion: reduce) {
    #ww-l2d-restore .ww-l2d-restore-icon { animation: none; transform: none; }
}

/* ===== Tips: comic speech bubble above the head, gentle float, slanted tail ===== */
.prpr .mashiro-tips {
    position: absolute;
    left: var(--ww-tip-left, 40px);
    bottom: var(--ww-tip-bottom, 192px);
    top: auto; right: auto; margin: 0;
    width: auto !important;
    max-width: min(220px, calc(100vw - 32px));
    min-height: 0 !important; height: auto !important;
    padding: 10px 14px;
    border-radius: 18px 20px 16px 22px;            /* comic, slightly irregular */
    background: rgba(255, 255, 255, 0.7);
    -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
    border: 1px solid rgba(255, 255, 255, 0.66);
    box-shadow: 0 14px 30px rgba(31, 35, 48, 0.16), 0 4px 12px rgba(31, 35, 48, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.75);
    color: rgba(45, 48, 58, 0.96);
    line-height: 1.5; font-size: 13px;
    box-sizing: border-box; overflow: visible;
    text-align: left; z-index: 100;
    transform-origin: 62% 115%;                    /* pivot near the tail/head side */
    animation: ww-l2d-tip-float 4.2s ease-in-out infinite;   /* follows the character, gentle */
}
@supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
    .prpr .mashiro-tips { background: rgba(255, 255, 255, 0.93); }
}
/* slanted tail at the bubble's lower area pointing DOWN-LEFT toward the head/face (center),
   not straight down at the left hand, and not toward the right-side toolbar */
.prpr .mashiro-tips::after {
    content: ""; position: absolute;
    left: var(--ww-tip-arrow-left, 60%); bottom: -7px;
    width: 14px; height: 14px;
    background: inherit;
    border-right: 1px solid rgba(255, 255, 255, 0.55);
    border-bottom: 1px solid rgba(255, 255, 255, 0.55);
    transform: rotate(38deg);                      /* tilt so the tip aims to the head */
    -webkit-backdrop-filter: inherit; backdrop-filter: inherit;
}
@keyframes ww-l2d-tip-float {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(var(--ww-tip-rot, -1.6deg)); }
    50%      { transform: translate3d(0, -4px, 0) rotate(calc(var(--ww-tip-rot, -1.6deg) + .5deg)); }
}
@media (prefers-reduced-motion: reduce) {
    .prpr .mashiro-tips { animation: none; transform: rotate(var(--ww-tip-rot, -1.6deg)); }
}

/* ===== Costume-aware offset hooks (model.moc is shared, so default is uniform; tunable) ===== */
/* 2G-04G: per-costume tip position is driven by JS CSS-vars (--ww-tip-*) on .prpr;
   model.moc is shared so the silhouette is identical across the 6 costumes. */

/* ===== Mobile / touch: tools resident + tappable, tips fits ===== */
@media (max-width: 860px) {
    .prpr .ww-l2d-tools { opacity: 0.92; gap: 10px; }
    .prpr .ww-l2d-tools .ww-l2d-btn { width: 34px; height: 34px; }
    .prpr .ww-l2d-tools .ww-l2d-svg { width: 18px; height: 18px; }
}
@media (max-width: 600px) {
    .prpr .mashiro-tips { max-width: min(180px, calc(100vw - 24px)); font-size: 12px; padding: 8px 11px; }
    .prpr .ww-l2d-tools .ww-l2d-btn { width: 36px; height: 36px; }
}