/* 看板娘挂件 —— moesora 主题配套样式
 *
 * 移植自 JZClient 托管平台的 platform.css（.kanban-bubble / .kanban-free 两段）。
 * 改动只有一处：配色从平台的 --bg-elevated/--on-card 换成 moesora 的
 * --moe-card/--moe-text，深色主题不用另写一套。
 *
 * 每个变量都带兜底值：万一主题改了变量名，气泡也还是能看，不会变成透明框。
 */

/* ---------- 说话气泡 ---------- */
/* 气泡是 #kanban-widget 的绝对定位子节点，位置在挂件上方。
   z-index 50：库里的角色图是 40，气泡要压住它。 */
.kanban-bubble{
  position:absolute;left:50%;bottom:calc(100% + 4px);
  z-index:50;
  /* width:max-content 是必须的：绝对定位 + left:50% 时，浏览器会把「可用宽度」
     算成容器的一半（220px 的挂件只剩 110px），一句话会被压成两三行窄条。
     显式给 max-content 才拿得到内容宽度，再由 max-width 兜住。 */
  width:max-content;max-width:200px;min-width:48px;
  padding:8px 12px;border-radius:12px;
  background:var(--moe-card,#fff);
  color:var(--moe-text,#3a3340);
  border:1px solid var(--moe-border,rgba(0,0,0,.12));
  box-shadow:var(--moe-shadow,0 8px 24px rgba(0,0,0,.16));
  font-size:13px;line-height:1.55;text-align:center;
  white-space:pre-wrap;word-break:break-word;
  pointer-events:none;
  opacity:0;transform:translate(-50%,6px) scale(.94);transform-origin:50% 100%;
  transition:opacity .16s cubic-bezier(.4,0,.2,1),transform .22s cubic-bezier(.34,1.56,.64,1);
}
.kanban-bubble.on{opacity:1;transform:translate(-50%,0) scale(1)}
/* 小三角：一个旋转 45° 的方块，只留右下两条边 */
.kanban-bubble::after{
  content:'';position:absolute;left:50%;top:100%;
  width:9px;height:9px;margin:-5px 0 0 -5px;
  background:var(--moe-card,#fff);
  border-right:1px solid var(--moe-border,rgba(0,0,0,.12));
  border-bottom:1px solid var(--moe-border,rgba(0,0,0,.12));
  transform:rotate(45deg);
}
/* 挂件被拖到屏幕上半部分时，气泡翻到下方（否则跑出视口看不见） */
.kanban-bubble.below{bottom:auto;top:calc(100% + 4px);transform-origin:50% 0;transform:translate(-50%,-6px) scale(.94)}
.kanban-bubble.below.on{transform:translate(-50%,0) scale(1)}
.kanban-bubble.below::after{
  top:auto;bottom:100%;margin:0 0 -5px -5px;
  border:0;border-left:1px solid var(--moe-border,rgba(0,0,0,.12));border-top:1px solid var(--moe-border,rgba(0,0,0,.12));
}
/* 手机上气泡更窄一点，别顶到屏幕边 */
@media (max-width:640px){
  .kanban-bubble{max-width:150px;font-size:12.5px;padding:7px 10px}
}

/* ---------- 看板娘：被拽下来之后 ---------- */
/* 外层只负责「在哪」：fixed + translate3d，由 JS 每帧写 transform。
   旋转放在内层 —— 气泡挂在外层，这样字不会被一起转歪。 */
.kanban-free{
  position:fixed;left:0;top:0;
  /* 190 是挂件本身，这里高一层：人掉出来之后要压在自己那根空杆上面 */
  z-index:191;
  transform-origin:50% 50%;
  will-change:transform;
  cursor:grab;
  touch-action:none;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
}
.kanban-free-img{
  width:100%;height:100%;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  transform-origin:50% 50%;
  will-change:transform;
  /* drop-shadow 认透明像素，跟着角色轮廓走 */
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.18));
}
.kanban-free:active{cursor:grabbing}