/**
 * 现代交互层
 *
 * 集中处理：
 * 1. iOS 输入框自动缩放：font-size ≥ 16px 才能阻止 Safari 在聚焦时把页面放大
 * 2. 触摸设备点击高亮：用 -webkit-tap-highlight-color 关掉默认蓝色矩形，换成 :active 缩放
 * 3. Hover 仅给鼠标用：触屏上 :hover 会"粘"住到下一次 tap，挺别扭
 * 4. Touch target ≥ 44×44 CSS px（WCAG 2.5.5）：最常被点的按钮统一兜底
 * 5. iOS 安全区域：FAB / footer 留出 home indicator 空间
 * 6. 滚动条优化：webkit 滚动条收窄但保留可视，触屏 momentum 滚动
 *
 * 这是关键样式表，需要在所有模块 CSS 之后加载（最后定调）。
 * 体积 < 2KB，对首屏 LCP 没影响。
 */

/* === 1. iOS 输入框 auto-zoom 防御 === */
/* Safari 在 iOS 上聚焦 font-size < 16px 的 input 时会把页面放大到 16px 等效。
 * 把所有受影响的输入控件兜底到 16px，避免聚焦时整页缩放。
 * 触屏宽屏（iPad）也会触发，所以不放进 max-width media。 */
@media (hover: none) and (pointer: coarse) {
    input,
    textarea,
    select,
    .custom-select-trigger {
        font-size: 16px;
    }
}

/* === 2. 触摸设备点击高亮 === */
/* 默认的 -webkit-tap-highlight-color 是半透明蓝色矩形，在粉色主题里很跳。
 * 关掉默认高亮，配合现有的 :active scale 形成更现代的反馈。 */
html {
    -webkit-tap-highlight-color: transparent;
    /* 触屏 momentum 滚动 */
    -webkit-overflow-scrolling: touch;
}

/* === 3. Hover 仅鼠标 === */
/* 触屏 :hover 会粘住到下一次 tap：用户点完卡片回到首页，那张卡片的 hover 样式还在。
 * 在 modal/.tl-card / .list-card / .polaroid-card 等高频 hover 元素上，把 hover
 * 包到 hover-capable 媒体查询里。这里只补齐"模板级"的 hover 抑制，后续单独模块
 * 也应该按 polaroid.css 的 `@media (hover: hover)` 模式收拢。 */
@media (hover: none) {
    /* 卡片类：把 hover 时的 transform / shadow 抑制成 none，避免触屏粘连 */
    .list-card:hover,
    .tl-card:hover,
    .detail-card:hover,
    .polaroid-card:hover .polaroid-inner,
    .nav-link:hover,
    .footer-link:hover {
        transform: none !important;
        box-shadow: inherit;
    }
}

/* === 4. 触摸目标最小 44×44 === */
/* WCAG 2.5.5 要求点击目标 ≥ 44 CSS px。FAB / 关闭按钮 / 切换按钮等已达到，
 * 这里给"小按钮密集区"补底：评论操作 / 标签胶囊 / 翻页按钮。
 * 用 min-height + padding 兜底，不改视觉尺寸（padding 由现有规则覆盖）。 */
@media (hover: none) and (pointer: coarse) {
    .comment-action-btn,
    .footer-link,
    .toggle-btn,
    .modal-btn,
    .toast-action,
    .toast-close,
    .pagination-btn,
    .calendar-nav-btn,
    .nav-link {
        min-height: 36px;     /* 视觉尺寸保持 */
        position: relative;
    }
    /* 用伪元素扩大可点区域到 44px，不影响视觉 */
    .comment-action-btn::after,
    .toast-close::after,
    .calendar-nav-btn::after {
        content: '';
        position: absolute;
        inset: -6px;
        /* 不影响布局也不接收非点击事件 */
    }
}

/* === 5. iOS 安全区域 === */
/* 有刘海/Home Indicator 的设备需要给底部交互留出 env(safe-area-inset-bottom)。
 * FAB 和 footer 是最容易被遮的两个。 */
.fab-btn {
    bottom: max(20px, calc(20px + env(safe-area-inset-bottom)));
    right: max(20px, calc(20px + env(safe-area-inset-right)));
}

.site-footer {
    padding-bottom: max(28px, calc(28px + env(safe-area-inset-bottom)));
}

/* === 6. 表单原生控件染色 === */
/* checkbox / radio / range / progress 等用 accent-color 和系统主题色一致。
 * 现代浏览器普遍支持，老浏览器无视该属性，等同于不影响。 */
:root {
    accent-color: #d54793;
}

/* === 7. 默认按钮无障碍：disabled 状态 === */
button[disabled],
button:disabled,
.modal-btn[disabled],
.btn-primary[disabled],
.login-btn[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* === 8. 通用按钮加载态 ===
 * 给任何按钮加 `is-loading` class 即可：原文字隐藏、显示一个粉色小 spinner。
 * 配合 assets/js/interactions.js 的 setButtonLoading 助手使用。
 */
.is-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.is-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 18px;
    height: 18px;
    border: 2.5px solid rgba(213, 71, 147, 0.35);
    border-top-color: #d54793;
    border-radius: 50%;
    animation: btn-spin 0.7s linear infinite;
}

/* 主色按钮 loading 时把 spinner 调成白色，更显眼 */
.modal-btn-confirm.is-loading::after,
.btn-primary.is-loading::after,
.login-btn.is-loading::after,
.editor-publish.is-loading::after,
.edit-save.is-loading::after {
    border-color: rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
}

@keyframes btn-spin {
    to { transform: rotate(360deg); }
}

/* === 9. 平滑滚动（用户没拒绝动画时启用） === */
/* a11y.css 已经为 prefers-reduced-motion 留了豁免，这里默认开启即可。 */
html {
    scroll-behavior: smooth;
}

/* === 10. 内容选区高亮：和品牌色保持一致 === */
::selection {
    background: rgba(213, 71, 147, 0.25);
    color: #5a3e6f;
}


/* === 11. 移动端 modal 改为底部抽屉（bottom sheet） ===
 * < 720px 视口下，把 confirm / alert / 通用 modal 从中间浮窗改为从底部滑入：
 * - 大拇指可达：现代手机 UI 的事实标准（iOS / Android 都这么做）
 * - 不挤压键盘：键盘弹起时 sheet 自然往上推
 * - 视觉上有"拉手"暗示，可以下滑关闭
 *
 * 仅作用于 `.modal-overlay > .modal`，不影响 `.edit-overlay`（编辑器已经全屏）
 * 和 `.search-panel`（搜索弹窗已经在 640px 下走全屏）。
 */
@media (max-width: 720px) {
    .modal-overlay {
        align-items: flex-end !important;
        padding: 0 !important;
    }

    .modal-overlay .modal {
        width: 100%;
        max-width: 100%;
        border-radius: 24px 24px 0 0;
        border-bottom: none;
        max-height: 90vh;
        animation: modalSlideUp 0.32s cubic-bezier(0.22, 1, 0.36, 1);
        /* 安全区域：home indicator 留白 */
        padding-bottom: env(safe-area-inset-bottom);
    }

    /* 顶部"小拉手"暗示可滑动 */
    .modal-overlay .modal::before {
        content: '';
        display: block;
        width: 40px;
        height: 4px;
        margin: 8px auto 0;
        border-radius: 999px;
        background: rgba(213, 71, 147, 0.2);
    }
}

@keyframes modalSlideUp {
    from {
        transform: translateY(100%);
        opacity: 0.6;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* 用户偏好减少动画时，sheet 用 fade 而不是 slide，避免眩晕 */
@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
    .modal-overlay .modal {
        animation: modalFadeIn 0.2s ease;
    }
}


/* === E. View Transitions API 路由淡出/淡入 ===
 * 浏览器（Chrome 111+ / Edge 111+ / Safari 18+）原生支持。
 * 不支持的浏览器：CSS 规则被忽略，main.js 的 withViewTransition 直接跑回调。
 * reduced-motion 下缩短到接近瞬时，避免眩晕。 */
@media (prefers-reduced-motion: no-preference) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation-duration: 0.28s;
        animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    }
    ::view-transition-old(root) {
        animation-name: vt-fade-out;
    }
    ::view-transition-new(root) {
        animation-name: vt-fade-in;
    }
}

@keyframes vt-fade-out {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-6px); }
}
@keyframes vt-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}


/* === 12. 骨架屏（替代"加载中..."文字） ===
 * 用法：
 *   <div class="skeleton skeleton-card"></div>
 *   <div class="skeleton skeleton-line"></div>
 *   <div class="skeleton-stack" data-skeleton-rows="3"></div>
 *
 * 用 CSS 渐变 + 平移动画，灰色块"流光"效果，比静态灰块感知更好。
 * reduced-motion 下退化成静态灰块，不让动画让人不适。
 */
.skeleton {
    background: linear-gradient(
        90deg,
        rgba(255, 230, 240, 0.6) 0%,
        rgba(255, 245, 250, 0.95) 50%,
        rgba(255, 230, 240, 0.6) 100%
    );
    background-size: 200% 100%;
    background-repeat: no-repeat;
    border-radius: 10px;
    animation: skeleton-shimmer 1.4s linear infinite;
    color: transparent !important;
}

.skeleton-line {
    height: 0.9em;
    margin: 0.4em 0;
    border-radius: 999px;
}

.skeleton-line.is-short { width: 40%; }
.skeleton-line.is-mid   { width: 70%; }
.skeleton-line.is-full  { width: 100%; }

.skeleton-card {
    height: 100px;
    border-radius: var(--card-radius-md, 16px);
}

.skeleton-thumb {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    flex-shrink: 0;
}

/* 列表骨架：模拟 .list-card 形态（缩略图 + 两行文字 + 右侧时间）*/
.skeleton-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--card-bg, #fff);
    border-radius: var(--card-radius-sm, 12px);
    border: var(--card-border, 1.5px solid rgba(255, 142, 199, 0.08));
    box-shadow: var(--card-shadow, 0 2px 10px rgba(255, 142, 199, 0.06));
    margin-bottom: 8px;
}

.skeleton-list-item .skeleton-body {
    flex: 1;
    min-width: 0;
}

.skeleton-list-item .skeleton-side {
    width: 60px;
    flex-shrink: 0;
}

@keyframes skeleton-shimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .skeleton {
        animation: none;
        background: rgba(255, 230, 240, 0.6);
    }
}