/*!
 * mascot.css — 藏羚羊吉祥物样式（作用域全部在 .mk-mascot 内）
 * 与 mascot.js 配套；改配色只动 .mk-mascot 上的变量即可。
 */
.mk-mascot,
.mk-mascot *{ box-sizing:border-box; }

.mk-mascot{
  --mk-right:22px;
  --mk-bottom:22px;
  --mk-w:118px;
  --mk-h:132px;
  --mk-run-w:132px;
  --mk-run-h:148px;
  --mk-z:9999;

  --mk-surface:#fff;
  --mk-line:#dfe7e2;
  --mk-ink:#16231c;
  --mk-ink-2:#5b6b62;
  --mk-green:#1f7a4d;
  --mk-green-d:#155c39;
  --mk-amber:#9a6b00;
  --mk-shadow:0 1px 3px rgba(20,40,30,.06),0 10px 30px rgba(20,40,30,.06);
  --mk-r:14px;
  --mk-font:"Segoe UI","Microsoft YaHei","PingFang SC",system-ui,sans-serif;

  position:fixed;
  right:var(--mk-right);
  bottom:var(--mk-bottom);
  z-index:var(--mk-z);
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:8px;
  font-family:var(--mk-font);
  font-size:13px;
  line-height:1.6;
  color:var(--mk-ink);
  -webkit-font-smoothing:antialiased;
}

.mk-mascot[data-side="left"]{
  right:auto;
  left:var(--mk-right);
  align-items:flex-start;
}

/* 深色：宿主用 html[data-theme=dark] 或 html.dark（叶护卫用 class），或给实例传 theme:'dark' */
html[data-theme="dark"] .mk-mascot,
html.dark .mk-mascot,
.mk-mascot[data-theme="dark"]{
  --mk-surface:#16211b;
  --mk-line:#28382e;
  --mk-ink:#e9f1ec;
  --mk-ink-2:#9fb2a7;
  --mk-green:#3fb27c;
  --mk-green-d:#8fe0b6;
  --mk-amber:#e6bb63;
  --mk-shadow:0 1px 3px rgba(0,0,0,.4),0 12px 32px rgba(0,0,0,.35);
}
.mk-mascot[data-theme="light"]{
  --mk-surface:#fff;
  --mk-line:#dfe7e2;
  --mk-ink:#16231c;
  --mk-ink-2:#5b6b62;
  --mk-green:#1f7a4d;
  --mk-green-d:#155c39;
  --mk-amber:#9a6b00;
  --mk-shadow:0 1px 3px rgba(20,40,30,.06),0 10px 30px rgba(20,40,30,.06);
}

/* ---- 气泡 ---- */
.mk-mascot__bubble{
  max-width:290px;
  background:var(--mk-surface);
  border:1px solid var(--mk-line);
  border-radius:var(--mk-r);
  padding:10px 13px;
  font-size:13px;
  color:var(--mk-ink);
  box-shadow:var(--mk-shadow);
  position:relative;
  display:none;
  word-break:break-word;
  pointer-events:none;   /* 气泡纯展示：不挡住下方可交互内容（曾盖住答题选项） */
}
.mk-mascot__bubble.is-show{ display:block; animation:mk-pop .18s ease-out; }
@keyframes mk-pop{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }
.mk-mascot__bubble:after{
  content:"";
  position:absolute;
  right:34px;
  bottom:-7px;
  width:12px;
  height:12px;
  background:var(--mk-surface);
  border-right:1px solid var(--mk-line);
  border-bottom:1px solid var(--mk-line);
  transform:rotate(45deg);
}
.mk-mascot[data-side="left"] .mk-mascot__bubble:after{ right:auto; left:34px; }

.mk-mascot__tag{
  display:block;
  font-size:11px;
  line-height:1.4;
  color:var(--mk-ink-2);
  margin-bottom:3px;
}
.mk-mascot__tag:empty{ display:none; }
.mk-mascot__tag.is-warn{ color:var(--mk-amber); }

/* ---- 角色 ---- */
.mk-mascot__pet{
  width:var(--mk-w);
  height:var(--mk-h);
  cursor:pointer;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  filter:drop-shadow(0 4px 10px rgba(20,50,35,.18));
  transition:transform .18s;
  outline:none;
}
.mk-mascot__pet:hover{ transform:translateY(-3px); }
.mk-mascot__pet:focus-visible{ outline:2px solid var(--mk-green); outline-offset:4px; border-radius:10px; }

.mk-mascot__img{
  width:100%;
  height:100%;
  min-height:0;
  flex:1;
  object-fit:contain;
  display:block;
  -webkit-user-drag:none;   /* Safari/Chrome：禁掉原生图片拖拽（会掐断指针拖拽流） */
  user-select:none;
  -webkit-user-select:none;
}
/* 待机时轻微起伏，避免"贴一张图"的死板感；奔跑帧自带起伏，不再叠加 */
.mk-mascot:not(.is-running) .mk-mascot__img{ animation:mk-breathe 3.4s ease-in-out infinite; }
@keyframes mk-breathe{
  0%,100%{ transform:translateY(0) scale(1); }
  50%{ transform:translateY(-3px) scale(1.02); }
}

.mk-mascot__cap{
  font-size:11px;
  line-height:1.35;
  color:var(--mk-green-d);
  text-align:center;
  padding:2px 10px 0;
  flex:0 0 auto;
}
.mk-mascot__cap:empty{ display:none; }
.mk-mascot.is-missing .mk-mascot__img{ display:none; }
.mk-mascot.is-missing .mk-mascot__cap{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  padding:0 10px;
}

/* ---- 按钮 ---- */
.mk-mascot__ctl{
  display:flex;
  gap:8px;
  align-items:center;
  font-size:11px;
  color:var(--mk-ink-2);
  flex-wrap:wrap;
}
.mk-mascot__btn{
  appearance:none;
  font:inherit;
  font-size:11px;
  line-height:1.4;
  padding:5px 11px;
  border-radius:8px;
  border:1px solid var(--mk-line);
  background:var(--mk-surface);
  color:var(--mk-ink-2);
  cursor:pointer;
}
.mk-mascot__btn:hover{ border-color:var(--mk-green); color:var(--mk-green-d); }
.mk-mascot__btn:focus-visible{ outline:2px solid var(--mk-green); outline-offset:2px; }
.mk-mascot__btn.is-on{
  background:var(--mk-green);
  border-color:var(--mk-green);
  color:#fff;
}

/* ---- 奔跑模式：容器铺满视口，角色由 JS 逐帧定位 ----
   ★ !important 压过 .is-docked（拖拽停靠的定位）：否则拖过小灵之后
     is-docked（文件更靠后）会覆盖铺满定位，奔跑时容器宽 0 角色消失。 */
.mk-mascot.is-running{
  left:0 !important;
  right:0 !important;
  top:0 !important;
  bottom:0 !important;
  display:block;
  pointer-events:none;
}
.mk-mascot.is-running .mk-mascot__bubble,
.mk-mascot.is-running .mk-mascot__cap{ display:none !important; }
.mk-mascot.is-running .mk-mascot__pet{
  position:absolute;
  left:0;
  top:0;
  width:var(--mk-run-w);
  height:var(--mk-run-h);
  transition:none;
  pointer-events:auto;
  transform:none;
}
.mk-mascot.is-running .mk-mascot__pet:hover{ transform:none; }
.mk-mascot.is-running .mk-mascot__ctl{
  position:fixed;
  left:50%;
  bottom:16px;
  transform:translateX(-50%);
  background:var(--mk-surface);
  border:1px solid var(--mk-line);
  border-radius:99px;
  padding:6px 8px;
  box-shadow:var(--mk-shadow);
  pointer-events:auto;
  justify-content:center;
  flex-wrap:nowrap;
}

/* ---- 收起状态：只留一个"显示吉祥物"按钮 ---- */
.mk-mascot.is-hidden .mk-mascot__pet,
.mk-mascot.is-hidden .mk-mascot__bubble{ display:none !important; }
.mk-mascot.is-hidden .mk-mascot__btn[data-mk="tts"],
.mk-mascot.is-hidden .mk-mascot__btn[data-mk="run"]{ display:none !important; }

/* ---- v2.1 拖拽停靠 ---- */
.mk-mascot__pet{ touch-action:none; }            /* 在角色上拖动不滚动页面 */
.mk-mascot.is-docked .mk-mascot__pet{ cursor:grab; }
.mk-mascot.is-docked{
  right:auto;
  bottom:auto;
  left:var(--mk-x);
  top:var(--mk-y);
}
.mk-mascot.is-dragging{ opacity:.95; }
.mk-mascot.is-dragging .mk-mascot__pet{
  cursor:grabbing;
  transform:scale(1.05);
  filter:drop-shadow(0 10px 24px rgba(10,30,20,.35));
}
.mk-mascot.is-dragging .mk-mascot__img{ animation:none; }


/* 角色被拖到上半屏：气泡改到角色下方，尾巴朝上 */
.mk-mascot.is-bubble-below{ flex-direction:column-reverse; }
.mk-mascot.is-bubble-below .mk-mascot__bubble:after{
  bottom:auto;
  top:-7px;
  transform:rotate(225deg);
}
.mk-mascot[data-side="left"].is-bubble-below .mk-mascot__bubble:after{ right:34px; }
.mk-mascot[data-side="right"].is-bubble-below .mk-mascot__bubble:after{ right:auto; left:34px; }

/* ---- 等级徽章（叶护卫集成：与 me.html 的 7 段头像框同口径）----
   由 leaf-mascot.js 按「用户等级」写入 data-rank；未达 3 级无徽章。 */
.mk-mascot__pet::after{
  content:""; position:absolute; right:10px; bottom:4px;
  width:18px; height:18px; border-radius:50%;
  border:2px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.28);
  opacity:0; transition:opacity .3s; z-index:2; pointer-events:none;
}
.mk-mascot[data-rank] .mk-mascot__pet::after{ opacity:1; }
.mk-mascot[data-rank="bronze"] .mk-mascot__pet::after{
  background:linear-gradient(135deg,#b87333,#e6a86b); }
.mk-mascot[data-rank="gold"] .mk-mascot__pet::after{
  background:linear-gradient(135deg,#d4a017,#ffd700); }
.mk-mascot[data-rank="diamond"] .mk-mascot__pet::after{
  background:linear-gradient(135deg,#5ec8e5,#b8f0ff); }
.mk-mascot[data-rank="king"] .mk-mascot__pet::after{
  background:linear-gradient(135deg,#8a2be2,#ffd700);
  box-shadow:0 0 10px rgba(255,215,0,.85),0 1px 4px rgba(0,0,0,.28); }

/* ---- 窄屏 ---- */
@media (max-width:720px){
  .mk-mascot{
    --mk-right:12px;
    --mk-bottom:12px;
    --mk-w:88px;
    --mk-h:98px;
    --mk-run-w:104px;
    --mk-run-h:117px;
    max-width:calc(100vw - 24px);
  }
  .mk-mascot__bubble{ max-width:200px; }
  .mk-mascot__ctl{ justify-content:flex-end; gap:6px; }
  .mk-mascot__btn{ font-size:10px; padding:4px 9px; }
}

@media (prefers-reduced-motion:reduce){
  .mk-mascot:not(.is-running) .mk-mascot__img{ animation:none; }
  .mk-mascot__pet{ transition:none; }
  .mk-mascot__bubble.is-show{ animation:none; }
}