/* ============================================================================
   COMPONENT: 3D MODEL VIEWER (Design System Token Version)
   说明：
   1. 严格使用全局 CSS Tokens (SSOT)，无任何硬编码颜色或间距。
   2. 完美继承暗黑模式：由于使用 --color-bg-surface，无需媒体查询或暗色类覆盖。
   3. 布局通过 var() 接收 portfolio.js 传来的 JSON 局部变量进行重写。
   ============================================================================ */

/* --- 1. 外层容器 (Block Container) ---
   接收 JSON 的局部变量，若无则使用 Token 默认值兜底
*/
.pj-block-3d {
    width: var(--v-width, 100%);
    max-width: var(--container-lg);
    height: var(--v-height, 80vh);
    border-radius: var(--v-radius, var(--radius-md));
    box-shadow: var(--v-shadow, none);
    border: var(--v-border, 1px solid var(--color-border));
    
    position: relative;
    overflow: hidden; /* 切割内部圆角 */
    transition: all 0.4s ease;
    
    /* 修复 iOS Safari 圆角 + overflow:hidden 渲染失效的 bug */
    -webkit-mask-image: -webkit-radial-gradient(white, black);
}

/* --- 2. 画布挂载点 (Canvas Area) --- */
.js-dynamic-3d-viewer {
    width: 100%;
    height: 100%;
    cursor: grab;
    background-color: transparent;
}

.js-dynamic-3d-viewer:active {
    cursor: grabbing;
}

/* --- 3. UI 布局层 (Layout Layer) --- */
.v-layer {
    position: absolute;
    z-index: var(--layer-sticky); /* 使用全局层级 Token */
    display: flex;
    gap: var(--space-xs); /* 使用 8px 的流体间距 */
    pointer-events: none; /* 让鼠标事件穿透到画布 */
}

.v-layer > * {
    pointer-events: auto; /* 恢复面板本身的点击能力 */
}

.v-top-left {
    top: var(--space-sm);
    left: var(--space-sm);
    flex-direction: column;
}

.v-top-right {
    top: var(--space-sm);
    right: var(--space-sm);
}

.v-bottom-right {
    bottom: var(--space-sm);
    right: var(--space-sm);
    flex-direction: column;
}

/* --- 4. 磨砂玻璃面板 (UI Panel) --- */
.v-panel {
    /*
      魔法：使用 color-mix() 结合你的 Token 生成磨砂背景。
      如果浏览器不支持，默认回退到实体表面色
    */
    background-color: var(--color-bg-surface);
    background-color: color-mix(in srgb, var(--color-bg-surface) 85%, transparent);
    
    color: var(--color-text-main);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm); /* 使用 Token 小圆角 */
    
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    
    display: flex;
    align-items: center;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* --- 5. 交互组件 (Buttons & Inputs) --- */
.v-btn {
    padding: var(--space-xs) var(--space-sm);
    font-family: var(--font-sans);
    font-size: var(--text-xs); /* 辅助文字大小 */
    font-weight: var(--weight-medium);
    
    cursor: pointer;
    border: none;
    background: transparent;
    color: inherit;
    transition: transform 0.1s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
}

.v-btn:hover {
    opacity: 0.8;
}

.v-btn:active {
    transform: scale(0.96);
}

/* 正方形缩放按钮 */
.v-zoom-btn {
    width: 44px;
    height: 44px;
    padding: 0;
    font-family: var(--font-sans);
    font-size: var(--text-lg); /* 放大加减号字号 */
    font-weight: var(--weight-light);
    border-radius: var(--radius-full); /* 使用胶囊形/圆形 Token */
    justify-content: center;
}

/* --- 6. 移动端微调 --- */
@media (max-width: 768px) {
    .v-layer {
        /* 在手机端稍微减小边距 */
        gap: var(--space-2xs);
    }
    .v-top-left { top: var(--space-xs); left: var(--space-xs); }
    .v-top-right { top: var(--space-xs); right: var(--space-xs); }
    .v-bottom-right { bottom: var(--space-xs); right: var(--space-xs); }
    
    .v-btn {
        padding: var(--space-2xs) var(--space-xs);
    }
    .pj-block-3d {
        /* 强制覆盖 JSON 传来的高度，最大不超过 55vh 或 400px */
        height: min(55vh, 400px) !important;
        /* 在手机上稍微缩减一点宽度，左右留出一点缝隙方便滑动 */
        width: calc(100% - var(--space-md) * 2) !important; 
        margin-left: auto !important;
        margin-right: auto !important;
    }
}