/**
 * Live2D 看板娘样式表 - nc 前缀版
 * 已适配主题配色
 */

/* ================= 基础容器 ================= */
.nc-live2d {
    --nc-live2d-offset-x: 24px;
    --nc-live2d-offset-y: 24px;
    --nc-live2d-width: 280px;
    --nc-live2d-height: 360px;

    position: fixed;
    bottom: var(--nc-live2d-offset-y);
    width: var(--nc-live2d-width);
    height: var(--nc-live2d-height);
    pointer-events: auto;
    isolation: isolate;
    z-index: 9999;
}

.nc-live2d [hidden],
.nc-live2d[hidden] {
    display: none !important;
}

.nc-live2d-left { left: var(--nc-live2d-offset-x); }
.nc-live2d-right { right: var(--nc-live2d-offset-x); }
.nc-live2d-returning { transition: inset 0.24s ease; }

/* ================= Canvas 与 拖拽交互 ================= */
.nc-live2d-canvas {
    display: block;
    width: 100%;
    height: 100%;
    cursor: grab;
    pointer-events: auto;
    touch-action: none;
}
.nc-live2d-dragging .nc-live2d-canvas { cursor: grabbing; }
.nc-live2d-page-dragging,
.nc-live2d-page-dragging * {
    cursor: grabbing !important;
    user-select: none !important;
}

/* ================= 气泡提示 ================= */
.nc-live2d-bubble {
    position: absolute;
    bottom: calc(100% - 20px);
    width: max-content;
    max-width: min(320px, calc(100vw - 32px));
    padding: 10px 14px;
    border: 1px solid rgba(240, 221, 213, 0.8); /* line_color */
    border-radius: 10px;
    background: rgba(255, 240, 232, 0.72); /* board_color 半透明 */
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    box-shadow: 0 8px 24px rgba(64, 58, 56, 0.08);
    color: #403A38; /* text_color */
    font-size: 14px;
    line-height: 1.5;
    word-break: break-word;
    white-space: pre-wrap;
    pointer-events: none;
    transform: translateZ(0);
}
.nc-live2d-left .nc-live2d-bubble { left: 0; }
.nc-live2d-right .nc-live2d-bubble { right: 0; }

/* ================= 右侧控制栏 ================= */
.nc-live2d-controls {
    position: absolute;
    top: 50%;
    right: -14px;
    transform: translate(12px, -50%);
    display: flex;
    flex-direction: column;
    gap: 8px;
    opacity: 0;
    z-index: 5;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.nc-live2d:hover .nc-live2d-controls,
.nc-live2d:focus-within .nc-live2d-controls,
.nc-live2d.nc-live2d-dragging .nc-live2d-controls,
.nc-live2d.nc-live2d-controls-open .nc-live2d-controls {
    opacity: 1;
    transform: translate(0, -50%);
}

/* 统一拟态按钮外观 */
.nc-live2d-icon,
.nc-live2d-panel-item {
    border: 1px solid rgba(240, 221, 213, 0.85);
    background: rgba(255, 240, 232, 0.65);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    box-shadow: 0 4px 12px rgba(64, 58, 56, 0.08);
    color: #80736E; /* sec_text_color */
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.nc-live2d-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
}

.nc-live2d-icon:hover,
.nc-live2d-panel-item:hover {
    background: rgba(255, 233, 225, 0.95); /* button_hover_bg_color */
    color: #E47F62; /* post_link_color / 强调色 */
    border-color: rgba(228, 127, 98, 0.35);
}

/* SVG 图标属性 */
.nc-live2d-icon-svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ================= 衣柜面板 ================= */
.nc-live2d-panel {
    position: absolute;
    right: 46px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 220px;
    padding: 8px;
    border: 1px solid rgba(240, 221, 213, 0.8);
    border-radius: 12px;
    background: rgba(255, 240, 232, 0.78);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    box-shadow: 0 8px 24px rgba(64, 58, 56, 0.1);
    overflow-y: auto;
}

.nc-live2d-panel-item {
    min-width: 120px;
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 12px;
    text-align: left;
}

/* ================= 暗色模式 (主题联动) ================= */
.nc-live2d-theme-icon-sun { display: none; }
.nc-live2d-theme-icon-moon { fill: currentColor; stroke: none; }

.nc-live2d-theme-dark .nc-live2d-theme-icon-sun { display: block; }
.nc-live2d-theme-dark .nc-live2d-theme-icon-moon { display: none; }

.nc-live2d.nc-live2d-theme-dark .nc-live2d-bubble,
.nc-live2d.nc-live2d-theme-dark .nc-live2d-panel {
    border-color: rgba(70, 61, 58, 0.9); /* line_color_dark */
    background: rgba(40, 35, 35, 0.82); /* board_color_dark */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    color: #D8D1CE; /* text_color_dark */
}

.nc-live2d.nc-live2d-theme-dark .nc-live2d-icon,
.nc-live2d.nc-live2d-theme-dark .nc-live2d-panel-item {
    border-color: rgba(70, 61, 58, 0.85);
    background: rgba(58, 45, 45, 0.75); /* 接近 button_hover_bg_color_dark */
    color: #AFA6A2; /* sec_text_color_dark */
}

.nc-live2d.nc-live2d-theme-dark .nc-live2d-icon:hover,
.nc-live2d.nc-live2d-theme-dark .nc-live2d-panel-item:hover {
    background: rgba(58, 45, 45, 0.95);
    color: #F2B6A0; /* post_link_color_dark / navbar_text_color */
    border-color: rgba(242, 182, 160, 0.4);
}

/* ================= 移动端适配 ================= */
@media (max-width: 640px) {
    .nc-live2d {
        --nc-live2d-width: 220px;
        --nc-live2d-height: 280px;
    }
    .nc-live2d-bubble {
        max-width: calc(100vw - 32px);
        font-size: 13px;
    }
    .nc-live2d-panel {
        right: 40px;
        max-height: 180px;
    }
}