/* ========================================
   粗放主义 - 响应式层：断点、移动端适配
   ======================================== */

/* ===== 大屏断点 ===== */
@media (max-width: 1200px) {
    .left-panel {
        width: 35%;
    }

    .right-panel {
        width: 65%;
    }
}

/* ===== 平板/移动端：单栏布局 ===== */
@media (max-width: 900px) {
    /* 移动端：单栏布局 */
    /* 允许移动端页面滚动 */
    html,
    body {
        overflow-y: auto;
        height: auto;
    }

    .container {
        flex-direction: column;
        overflow-y: auto;
        overflow-x: hidden;
        height: auto;
        min-height: 100vh;
    }

    .left-panel {
        width: 100%;
        min-width: 100%;
        height: 100svh;
        min-height: 100svh;
        flex-shrink: 0;
        border-right-width: 0;
        border-bottom: 1px solid var(--panel-border);
        padding: var(--space-lg);
        overflow-y: visible;
        justify-content: center;
    }

    /* No wallpaper on mobile: the frosted-glass tint is meaningless here (the
       sticky hero is solid anyway), so drop the extra layer. */
    .left-panel::before {
        display: none;
    }

    .page-transition-surface {
        padding: 2.5rem 1rem;
    }

    /* 移动端为左侧胶囊预留顶部空间，避免遮挡文章 H1 */
    .page-transition-surface[data-shell-mode='article'] {
        padding-top: calc(56px + 1.5rem + env(safe-area-inset-top, 0px));
    }

    .page-transition-surface[data-shell-mode='blog'],
    .page-transition-surface[data-shell-mode='error'] {
        padding-top: calc(56px + 1rem + env(safe-area-inset-top, 0px));
    }

    .hero-sticky {
        height: 100svh;
        min-height: 100svh;
    }

    /* The widget rail is a desktop-only enhancement. Mobile keeps the full hero content. */
    .hero-marquee,
    .hero-marquee-defocus {
        display: none;
    }

    .hero {
        position: sticky;
        top: 0;
        /* Solid, not blurred: a backdrop-filter on a sticky header re-samples
           the scrolling content beneath it on every scroll frame — a classic
           mobile scroll-jank source. The opaque background keeps the header
           legible at zero per-frame cost. */
        background-color: var(--bg, #fffef7);
        z-index: 10;
        padding: var(--space-sm) 0;
        margin: calc(var(--space-sm) * -1) 0;
    }

    .bio-container {
        margin-bottom: var(--space-lg);
        padding: var(--space-md);
        min-height: auto;
    }

    .avatar-box {
        margin-bottom: var(--space-md);
    }

    .name {
        margin-bottom: var(--space-sm);
    }

    .status-bar {
        margin-bottom: var(--space-lg);
    }

    /* 头像缩小效果 - 使用全局细腻曲线 */
    .avatar-box {
        transition:
            width var(--transition-delicate),
            height var(--transition-delicate),
            transform var(--transition-delicate),
            box-shadow var(--transition-delicate),
            border-color var(--transition-delicate);
        cursor: pointer;
    }

    .avatar-box.scrolled {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px;
        margin-bottom: var(--space-sm);
        /* 复用全局绽放光晕变量 */
        box-shadow:
            0 4px 10px rgba(0, 0, 0, 0.1),
            0 0 15px color-mix(in srgb, var(--avatar-glow) 15%, transparent);
    }

    .avatar-box.scrolled:hover {
        transform: var(--lift-sm);
        box-shadow:
            0 8px 20px rgba(0, 0, 0, 0.15),
            0 0 25px color-mix(in srgb, var(--avatar-glow) 40%, transparent),
            0 0 50px color-mix(in srgb, var(--avatar-glow) 15%, transparent);
    }

    .right-panel {
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        z-index: var(--z-dock);
        width: 100vw;
        min-width: 0;
        height: 0;
        flex: 0 0 0;
        overflow: visible;
        pointer-events: none;
    }

    .right-panel .nav-dock {
        pointer-events: auto;
    }

    .wallpaper-scroll-area,
    .right-panel .right-panel-shadow,
    .right-panel .info-panel {
        display: none;
    }

    .social-links {
        flex-wrap: wrap;
    }

    @supports (display: grid) {
        .social-links {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    .social-link {
        flex: 0 0 calc(50% - 0.5rem);
        max-width: calc(50% - 0.5rem);
    }

    @supports (display: grid) {
        .social-link {
            flex: none;
            max-width: none;
        }
    }

    /* 手机端隐藏壁纸切换按钮 */
    .wallpaper-toggle {
        display: none !important;
    }
}

@media (max-width: 900px) {
    /* Full-width first screen: strip spans the screen and sits above the panel. */
    :root {
        --ticket-height: 6.4rem;
        --marquee-bottom: calc(0.85rem + env(safe-area-inset-bottom, 0px));
        --marquee-defocus-height: calc(var(--ticket-height) + 4.5rem);
    }

    .hero-marquee {
        left: 0;
        bottom: var(--marquee-bottom);
        padding: 0 0.85rem;
        z-index: 5;
    }

    .hero-marquee-defocus {
        left: 0;
        height: var(--marquee-defocus-height);
    }

    .hero-marquee__viewport {
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
        mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
    }

    .hero-ticket {
        width: 15.5rem;
    }

    .hero-ticket--clock {
        width: 12.75rem;
    }

    .hero-ticket--search,
    .hero-ticket--archive {
        width: 12.5rem;
    }

    .hero-ticket--slogan {
        width: 16.25rem;
    }

    .hero-ticket--stats {
        width: 16.5rem;
    }

    .hero-ticket--post,
    .hero-ticket--updated {
        width: 17.5rem;
    }

    .hero-ticket__hit--post {
        grid-template-columns: 4.25rem 1fr;
    }

    .hero-ticket__title {
        font-size: 1rem;
    }

    .hero-ticket__stat-value {
        font-size: 1.28rem;
    }

    .time-widget--compact .weekday {
        font-size: 1.08rem;
    }

    .time-widget--compact .clock {
        font-size: 1.2rem;
    }

    .left-panel {
        padding-bottom: var(--space-lg);
    }
}

/* ===== 小屏断点 ===== */
@media (max-width: 600px) {
    .left-panel {
        padding: var(--space-md);
    }

    :root {
        --ticket-height: 6rem;
        --marquee-bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px));
        --marquee-defocus-height: calc(var(--ticket-height) + 4rem);
    }

    .hero-marquee {
        bottom: var(--marquee-bottom);
        padding: 0 0.55rem;
    }

    .hero-marquee-defocus {
        height: var(--marquee-defocus-height);
    }

    .hero-ticket {
        width: 14.25rem;
    }

    .hero-ticket--clock {
        width: 11.75rem;
    }

    .hero-ticket--post,
    .hero-ticket--updated {
        width: 15.75rem;
    }

    .hero-ticket--stats {
        width: 15rem;
    }

    .hero-ticket__body {
        padding: 0.55rem 0.9rem;
    }

    .bio-container {
        margin-bottom: var(--space-md);
        padding: var(--space-sm);
    }

    .avatar-box {
        margin-bottom: var(--space-md);
    }

    .status-bar {
        margin-bottom: var(--space-md);
    }

    .info-panel {
        padding: var(--space-md);
    }

    .weekday {
        font-size: 2.5rem;
    }

    .clock {
        font-size: 1.5rem;
    }

    .wallpaper-toggle {
        display: none !important;
    }

    .close-panel {
        display: none !important;
    }

    .nav-dock {
        top: var(--space-md);
        right: var(--space-md);
    }
}

/* ===== 响应式：hover 热区 ===== */
@media (max-width: 900px) {
    .avatar-box.scrolled:hover::before {
        transform: translate(2px, 2px);
    }
}

/* ===== 短视口高度适配：避免 hero 内容被左面板裁切 ===== */
/* 笔记本（约 768px 可视高度）下 hero 内容会超出左面板并被 overflow:hidden 切掉底部社交链接，
   这里仅在矮视口收紧间距/缩小头像，标准高度（>=880px）完全不受影响。 */
@media (max-height: 880px) {
    .avatar-box {
        margin-bottom: var(--space-md, 1.5rem);
    }
    .bio-container {
        margin-bottom: var(--space-lg, 2rem);
        padding: var(--space-sm, 1rem);
    }
    .social-links-page {
        gap: var(--space-xs, 0.75rem);
    }
    .social-links-page .social-link {
        padding: 0.75rem 0.5rem;
    }
}

@media (max-height: 760px) {
    .left-panel {
        padding-top: var(--space-md, 1.5rem);
        padding-bottom: var(--space-md, 1.5rem);
    }
    .avatar-box {
        width: clamp(84px, 10vw, 112px);
        height: clamp(84px, 10vw, 112px);
        margin-bottom: var(--space-sm, 1rem);
    }
    .name {
        margin-bottom: var(--space-xs, 0.75rem);
    }
    .bio-container {
        min-height: 64px;
        padding: 0.75rem;
    }
    .social-links-page .social-link {
        padding: 0.5rem 0.25rem;
    }
}