/* ============================================================================
 * botui-card.css — 2G-06B: make the biography BotUI a floating, pop-in card with
 * QQ-style chat bubbles (instead of a flat inline "patch"). Loaded only on the
 * biography page (with the botui assets). LOCAL only.
 * ========================================================================== */

/* floating card */
.moe-botui { max-width: 660px; margin: 30px auto 40px; }
.moe-botui .poptitle {
    width: 100% !important;
    background: rgba(255,255,255,.5) !important;
    border: 1px solid rgba(255,255,255,.75);
    border-radius: 22px;
    padding: 20px 18px 24px;
    box-shadow: 0 18px 50px -14px rgba(0,0,0,.34), 0 3px 10px -3px rgba(0,0,0,.12);
    -webkit-backdrop-filter: blur(13px) saturate(1.12); backdrop-filter: blur(13px) saturate(1.12);
    animation: ww-botui-pop .58s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes ww-botui-pop { 0% { transform: translateY(28px) scale(.93); opacity: 0; } 100% { transform: translateY(0) scale(1); opacity: 1; } }
.moe-botui .popcontainer > center h3, .moe-botui .poptitle h3 {
    margin: 0 0 10px; font-size: 14px; font-weight: 600; color: #8a808f; letter-spacing: .3px;
}
.moe-botui .popcontainer > center h3 ruby rt { color: #b39; }

/* chat bubbles — QQ-ish: bot on the left (soft grey-lilac), you on the right (blue), each pops in */
.moe-botui .botui-message { margin: 12px 0 !important; }
.moe-botui .botui-message-content {
    max-width: 82% !important; padding: 10px 15px !important; line-height: 1.6;
    border-radius: 16px !important; box-shadow: 0 3px 12px -4px rgba(0,0,0,.16);
    background: #f3eef7 !important; color: #333 !important;
    animation: ww-bubble-in .34s cubic-bezier(.34,1.56,.64,1) both;
}
.moe-botui .botui-message-content.text::selection { background: #ffd9e6; }
.moe-botui .botui-message-content.human {
    background: linear-gradient(135deg,#7fb2ff,#5c8be6) !important; color: #fff !important;
    border-bottom-right-radius: 5px !important;
}
.moe-botui .botui-message-content:not(.human) { border-bottom-left-radius: 5px !important; }
.moe-botui .botui-message-content-image { border-radius: 12px; max-width: 160px !important; box-shadow: 0 4px 14px -4px rgba(0,0,0,.25); }
@keyframes ww-bubble-in { 0% { transform: scale(.82) translateY(8px); opacity: 0; } 100% { transform: scale(1) translateY(0); opacity: 1; } }

/* input / action row */
.moe-botui .botui-actions { margin-top: 10px; }
.moe-botui .botui-actions-text-input {
    border: 1px solid #e3dbe9 !important; border-radius: 14px !important; padding: 9px 14px !important;
    background: #fff; transition: border-color .2s ease, box-shadow .2s ease;
}
.moe-botui .botui-actions-text-input:focus { border-color: #b79ecf !important; box-shadow: 0 0 0 3px rgba(183,158,207,.18) !important; outline: none; }
.moe-botui .botui-actions-text-submit, .moe-botui .botui-actions-buttons-button {
    border-radius: 13px !important; border: none !important; padding: 9px 16px !important;
    background: linear-gradient(135deg,#8f7bd6,#6f5bc0) !important; color: #fff !important; cursor: pointer;
    box-shadow: 0 4px 14px -4px rgba(111,91,192,.5); transition: transform .12s ease, box-shadow .2s ease;
}
.moe-botui .botui-actions-text-submit:hover, .moe-botui .botui-actions-buttons-button:hover { transform: translateY(-1px); box-shadow: 0 6px 18px -4px rgba(111,91,192,.6); }

@media (prefers-reduced-motion: reduce) {
    .moe-botui .poptitle, .moe-botui .botui-message-content { animation: none !important; }
}

/* night mode */
body.dark .moe-botui .poptitle { background: rgba(42,46,52,.55) !important; border-color: rgba(255,255,255,.08); }
body.dark .moe-botui .botui-message-content:not(.human) { background: rgba(70,66,78,.95) !important; color: #e6e2ea !important; }
body.dark .moe-botui .popcontainer > center h3 { color: #b9b1c2; }

/* ---------- name-art on a frosted-glass panel (transparent PNG floats on 毛玻璃) ---------- */
/* name-art = washi-tape sticky note (warm paper), SAME paper as the 简介 card below (one paper family). */
.ww-name-art {
    position: relative; max-width: 720px; margin: 30px auto 6px; padding: 26px 30px 20px; text-align: center;
    background: #fffdf7; border-radius: 5px;
    box-shadow: 0 12px 30px -14px rgba(0,0,0,.26), 0 2px 6px -3px rgba(0,0,0,.12);
    transform: rotate(-0.7deg);
    animation: ww-note-float 5.5s ease-in-out infinite;
}
@keyframes ww-note-float { 0%,100% { transform: rotate(-0.7deg) translateY(0); } 50% { transform: rotate(-0.2deg) translateY(-5px); } }
@media (prefers-reduced-motion: reduce) { .ww-name-art { animation: none; } }
.ww-name-art::before, .ww-name-art::after {
    content: ""; position: absolute; top: -11px; width: 84px; height: 26px;
    box-shadow: 0 2px 5px rgba(0,0,0,.1); opacity: .82; border-radius: 1px;
}
.ww-name-art::before { left: 30px; transform: rotate(-7deg);
    background: repeating-linear-gradient(45deg, rgba(255,182,193,.78), rgba(255,182,193,.78) 6px, rgba(255,160,178,.78) 6px, rgba(255,160,178,.78) 12px); }
.ww-name-art::after { right: 30px; transform: rotate(6deg);
    background: repeating-linear-gradient(45deg, rgba(165,216,232,.72), rgba(165,216,232,.72) 6px, rgba(142,200,225,.72) 6px, rgba(142,200,225,.72) 12px); }
.ww-name-art img { max-width: 100%; height: auto; display: inline-block; vertical-align: middle; }
body.dark .ww-name-art { background: #2f2b27; box-shadow: 0 12px 30px -14px rgba(0,0,0,.5); }
body.dark .ww-name-art img { filter: invert(1) hue-rotate(180deg) brightness(1.05); }

/* 简介 (bio body text) = solid warm-paper card + slim sakura accent (grounded contrast to the glass) */
body.page-template-page-biography-php .entry-content {
    background: #fffdf7; border-radius: 16px; padding: clamp(24px, 3vw, 40px);
    box-shadow: 0 14px 34px -16px rgba(0,0,0,.16), 0 3px 10px -6px rgba(0,0,0,.08);
    border-left: 4px solid #5c6470; margin-top: 8px;
}
body.dark.page-template-page-biography-php .entry-content { background: #2b2825; color: #e7e2db; border-left-color: #8b95a3; box-shadow: 0 14px 34px -16px rgba(0,0,0,.5); }

/* bio: outer article is NOT a card here — let the name-art + chat panels float on the pattern so the
   background shows faintly through them. (Bio body is just the chat; no long text sits bare.) */
body.page-template-page-biography-php #content article.page {
    background: transparent !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;   /* kill the leftover narrow frosted strip */
    box-shadow: none !important;
}

/* the name-art image is decorative — no drag-to-save, no context menu, no selection */
.ww-name-art img { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; pointer-events: none; }