/* 课程分享卡片：顶栏「分享」按钮弹出的尖角浮层 + 海报预览
   —— 详见 PRD-share-card.md。颜色一律走 learn 页的主题变量，深浅色自动跟随。

   尖角用两层伪元素叠出来（外层是描边色、内层是卡片底色），和 ask-alice.js 的
   会话浮层同一套做法；`--xsc-caret` 由 JS 按按钮中心现算，卡片贴右时尖角也能跟着走。 */

.xsc-pop{
  position:fixed;z-index:99998;box-sizing:border-box;
  width:288px;padding:13px 14px 14px;
  background:var(--side,#fff);
  border:1px solid var(--border,rgba(0,0,0,.07));
  border-radius:16px;
  box-shadow:0 16px 48px rgba(15,23,42,.18);
  animation:xsc-pop .16s cubic-bezier(.3,.9,.4,1);
}
.xsc-pop[hidden]{display:none;}
.xsc-pop::before,.xsc-pop::after{
  content:"";position:absolute;left:var(--xsc-caret,50%);
  width:0;height:0;
  border-left:7px solid transparent;border-right:7px solid transparent;
  margin-left:-7px;
}
.xsc-pop::before{top:-7px;border-bottom:7px solid var(--border,rgba(0,0,0,.12));}
.xsc-pop::after{top:-6px;border-bottom:7px solid var(--side,#fff);}
@keyframes xsc-pop{from{opacity:0;transform:translateY(-6px) scale(.97);}to{opacity:1;transform:none;}}

.xsc-head{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-size:13.5px;font-weight:800;color:var(--text-m,#111827);
  margin-bottom:10px;
}
.xsc-close{
  display:none;flex:none;width:28px;height:28px;
  align-items:center;justify-content:center;
  border:none;background:transparent;border-radius:8px;
  color:var(--text-faint,#9ca3af);cursor:pointer;
}
.xsc-close:hover{background:var(--hover2,rgba(0,0,0,.04));color:var(--text-m,#111827);}
.xsc-close svg{width:16px;height:16px;}

/* 海报是 3:4 竖图。高度由 JS 按可用空间下发，宽度跟着算，图片 contain 不变形 */
.xsc-preview{
  position:relative;
  height:var(--xsc-img-h,320px);
  width:calc(var(--xsc-img-h,320px) * 0.75);
  margin:0 auto;
  border-radius:12px;overflow:hidden;
  background:var(--hover,#f9fafb);
  border:1px solid var(--border,rgba(0,0,0,.07));
}
.xsc-img{display:block;width:100%;height:100%;object-fit:contain;}
/* 出图前的骨架：别让用户看到一块纯白然后突然跳出图 */
.xsc-preview.loading::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 20%,rgba(127,127,140,.13) 50%,transparent 80%);
  background-size:220% 100%;
  animation:xsc-shimmer 1.1s linear infinite;
}
@keyframes xsc-shimmer{from{background-position:120% 0;}to{background-position:-120% 0;}}

.xsc-hint{
  font-size:11.5px;font-weight:600;line-height:1.5;
  color:var(--text-faint,#9ca3af);
  text-align:center;margin:9px 2px 11px;
}

.xsc-acts{display:flex;gap:8px;}
.xsc-btn{
  flex:1;min-width:0;height:36px;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border-radius:10px;border:1px solid var(--border,rgba(0,0,0,.07));
  background:transparent;color:var(--text-sub,#4b5563);
  font-family:inherit;font-size:12.5px;font-weight:700;
  white-space:nowrap;cursor:pointer;transition:all .18s;
}
.xsc-btn:hover{border-color:var(--accent,#4f7bff);color:var(--accent,#4f7bff);}
.xsc-btn svg{width:14px;height:14px;flex:none;}
.xsc-btn.primary{
  border-color:transparent;background:var(--accent,#4f7bff);color:#fff;
  box-shadow:0 4px 14px rgba(79,123,255,.28);
}
.xsc-btn.primary:hover{background:var(--accent-hover,#3d6bff);color:#fff;}
.xsc-btn[hidden]{display:none;}
.xsc-btn:disabled{opacity:.5;cursor:not-allowed;}

/* 出图失败时降级成「只有复制链接」，别留一块空白预览框 */
.xsc-pop.no-poster .xsc-preview,
.xsc-pop.no-poster .xsc-btn[data-act="dl"]{display:none;}

.xsc-scrim{
  position:fixed;inset:0;z-index:99997;
  background:rgba(0,0,0,.5);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
}
.xsc-scrim[hidden]{display:none;}

/* ── 移动端：改成贴底全宽卡片，浮窗在小屏上又小又难点 ── */
@media(max-width:640px){
  .xsc-pop{
    left:0;right:0;top:auto;bottom:0;
    width:100%;
    padding:14px 16px calc(16px + env(safe-area-inset-bottom));
    border-radius:20px 20px 0 0;
    border-bottom:none;
    animation:xsc-sheet .22s cubic-bezier(.3,.9,.4,1);
  }
  /* 贴底卡片没有「从某个按钮长出来」的关系，尖角反而多余 */
  .xsc-pop::before,.xsc-pop::after{display:none;}
  .xsc-head{font-size:15px;}
  .xsc-close{display:inline-flex;}
  .xsc-hint{font-size:12.5px;}
  .xsc-btn{height:42px;font-size:13.5px;}
  @keyframes xsc-sheet{from{opacity:0;transform:translateY(100%);}to{opacity:1;transform:none;}}
}

@media (prefers-reduced-motion: reduce){
  .xsc-pop{animation:none;}
  .xsc-preview.loading::after{animation:none;}
}