/* ================================================================
   Viewer.js —— 表情包图片预览插件补充样式
   说明：在 static/dep/viewer/viewer.min.css 基础上针对表情包场景微调，
   Viewer 通过 JS 内联 style 计算图片尺寸并上下左右居中展示，
   天然满足「随切换图片大小自适应」。
   ================================================================ */

/* 自定义工具栏按钮：下载 / 复制链接
   图标用内联 SVG data URI：命中 CSP 的 img-src 'self' data:，不引外部图标库
   基线：第三方 .viewer-toolbar>ul>li:before 只给了 margin:2px，内容与尺寸需自行补 */
.viewer-toolbar > ul > li.viewer-download:before,
.viewer-toolbar > ul > li.viewer-copy-link:before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 60%;
}
.viewer-toolbar > ul > li.viewer-download:before {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2015v4a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2v-4%22%2F%3E%3Cpolyline%20points%3D%227%2010%2012%2015%2017%2010%22%2F%3E%3Cline%20x1%3D%2212%22%20y1%3D%2215%22%20x2%3D%2212%22%20y2%3D%223%22%2F%3E%3C%2Fsvg%3E");
}
.viewer-toolbar > ul > li.viewer-copy-link:before {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%229%22%20y%3D%229%22%20width%3D%2213%22%20height%3D%2213%22%20rx%3D%222%22%20ry%3D%222%22%2F%3E%3Cpath%20d%3D%22M5%2015H4a2%202%200%200%201-2-2V4a2%202%200%200%201%202-2h9a2%202%200%200%201%202%202v1%22%2F%3E%3C%2Fsvg%3E");
}

/* 预览计数标题：第三方默认 12px / #ccc，这里放大加粗提亮，在更深的幕布上更醒目 */
.viewer-title {
    color: #e6e6e6;
    font-size: var(--fs-14);
    font-weight: 600;
}

/* 预览黑色玻璃底：比默认 rgba(0,0,0,.5) 更沉，图片更突出 */
.viewer-container.viewer-backdrop {
    background-color: rgba(0, 0, 0, 0.88);
}
/* 画布显式透明：黑底只由 .viewer-backdrop 一层提供（插件默认本就没给画布底色） */
.viewer-canvas {
    background: transparent;
}

/* 工具栏底部留白，避免贴边 */
.viewer-footer {
    padding-bottom: var(--space-4);
}


/* ================================================================
   兜底防呆：无论缩略图是否带 loading="lazy"（common.css 会把它隐藏），
   Viewer 预览画布内的大图都必须完整可见——
   修复「点击图片后预览图没有出来」：inheritedAttributes 已不再复制 lazy，
   这里再加一层高优先级规则，防止其他全局 img 规则误伤画布大图。
   ================================================================ */
.viewer-canvas img[loading="lazy"] {
    opacity: 1 !important;
}