/* 详情页公共：写评论面板 / 分享面板 / 分享图预览 / 微信引导 / toast（图文页、视频页共用）
   依赖 style.css 的 :root 颜色变量和 .report-wrap / .report-body 底部弹层 */

/* ===== 写评论面板 ===== */
.composer textarea { width: 100%; height: 96px; padding: 10px 12px; border: 0; border-radius: 10px; resize: none; outline: none;
  background: var(--surface-2); color: var(--ink); font-family: inherit; font-size: 15px; line-height: 1.6; }
.composer-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; font-size: 12px; color: var(--ink-3); }
.composer-foot button { height: 34px; padding: 0 20px; border-radius: 17px; background: var(--brand); color: #fff; font-size: 14px; font-weight: 600; }
.composer-foot button:disabled { opacity: .4; }

/* ===== 微信内分享引导 ===== */
.wx-guide { position: fixed; inset: 0; z-index: 30; background: rgba(0, 0, 0, .72); color: #fff; animation: fadeIn .18s forwards; opacity: 0; }
.wx-guide svg { position: absolute; top: 8px; right: 18px; width: 90px; height: 110px; }
.wx-guide p { position: absolute; top: 124px; right: 24px; left: 24px; text-align: right; font-size: 17px; line-height: 1.7; }
.wx-guide p em { font-style: normal; display: inline-block; padding: 0 6px; border-radius: 4px; background: rgba(255, 255, 255, .2); }

/* ===== 分享面板 ===== */
.share-sheet { padding-top: 16px; }
.sh-title { font-size: 15px; font-weight: 600; text-align: center; }
/* 分享卡片预览：让用户知道朋友收到的是什么样 */
.sh-card { display: flex; gap: 10px; margin-top: 14px; padding: 10px; border-radius: 10px; background: var(--surface-2); }
.sh-card-main { flex: 1; min-width: 0; }
.sh-card-t { font-size: 14px; line-height: 1.45; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sh-card-d { margin-top: 3px; font-size: 12px; line-height: 1.5; color: var(--ink-3); }
.sh-card-img { flex: none; width: 54px; height: 54px; border-radius: 6px; background: var(--line) center / cover no-repeat; }
.sh-targets { display: grid; grid-template-columns: repeat(auto-fit, minmax(48px, 1fr)); gap: 6px; margin-top: 18px; }
.sh-t { display: flex; flex-direction: column; align-items: center; gap: 7px; font-size: 12px; color: var(--ink-2); }
.sh-t i { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.sh-t svg { width: 25px; height: 25px; }
.ic-wx { background: #07C160; }
.ic-pyq { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.ic-pyq svg { width: 32px; height: 32px; }
.ic-wb { background: #E6162D; }
.ic-link, .ic-more, .ic-save { background: var(--surface-2); color: var(--ink) !important; }
.sheet-cancel { width: 100%; height: 46px; margin-top: 18px; border-top: 1px solid var(--line); font-size: 15px; color: var(--ink-2); }

/* 分享图缩略图：分享面板和分享图页面共用 */
.sh-sub { margin-top: 20px; font-size: 13px; color: var(--ink-3); }
.sh-posters { display: flex; gap: 12px; margin-top: 10px; overflow-x: auto; scrollbar-width: none; padding: 3px 3px 2px; }
.sh-posters::-webkit-scrollbar { display: none; }
.sh-poster { position: relative; flex: none; width: 84px; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); }
.sh-poster em { font-style: normal; }
.sh-poster-img { display: block; width: 84px; height: 126px; border-radius: 6px; overflow: hidden; background: var(--surface-2);
  box-shadow: 0 0 0 1px var(--line); }
/* 缩略图要完整展示整张海报：纯文字版标题行数多时画布更高，cover 会把底部的二维码和文案切掉 */
.sh-poster-img img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center top; background: #fff; }
.sh-poster-load { display: block; width: 100%; height: 100%;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%) var(--surface-2);
  background-size: 200% 100%; animation: shimmer 1.2s linear infinite; }
@keyframes shimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }
.sh-poster-fail { display: grid; place-items: center; height: 100%; font-style: normal; font-size: 11px; color: var(--ink-3); }
.sh-check { position: absolute; top: -5px; right: -5px; display: none; width: 20px; height: 20px; border-radius: 50%; background: var(--brand);
  place-items: center; box-shadow: 0 0 0 2px var(--surface); }
.sh-check svg { width: 12px; height: 12px; }
.sh-poster.on .sh-poster-img { box-shadow: 0 0 0 2px var(--brand); }
.sh-poster.on .sh-check { display: grid; }
.sh-poster.on em { color: var(--brand); font-weight: 600; }
.sh-poster.disabled { opacity: .45; }

/* ===== 分享图页面：上面大图预览，下面选样式 + 保存 / 发送 ===== */
.poster-wrap { position: fixed; inset: 0; z-index: 25; display: flex; flex-direction: column; background: rgba(18, 18, 18, .94);
  padding-top: calc(20px + env(safe-area-inset-top)); animation: fadeIn .18s forwards; opacity: 0; }
/* flex 而不是 grid：grid 隐式行高度不确定，图片 max-height:100% 不生效会把下面的面板压住 */
.poster-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 40px 16px; }
.poster-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; box-shadow: 0 8px 30px rgba(0, 0, 0, .45);
  -webkit-touch-callout: default; user-select: auto; }
.poster-loading { color: rgba(255, 255, 255, .7); font-size: 14px; }
.poster-panel { flex: none; padding: 16px 16px env(safe-area-inset-bottom); border-radius: 16px 16px 0 0; background: var(--surface); color: var(--ink);
  animation: slideUp .22s cubic-bezier(.32, .02, .24, 1); }
.pp-title { font-size: 15px; font-weight: 600; }
.pp-thumbs { margin-top: 12px; }
.pp-tip { margin-top: 12px; padding: 8px 12px; border-radius: 8px; background: var(--surface-2); font-size: 13px; color: var(--ink-2); }
.pp-acts { margin-top: 16px; }

/* ===== toast ===== */
.toast { position: fixed; left: 50%; top: 45%; z-index: 40; transform: translateX(-50%); max-width: 80%;
  padding: 10px 16px; border-radius: 8px; background: rgba(0, 0, 0, .78); color: #fff; font-size: 14px; text-align: center; }