/* ============================================================
 * 看板娘向导系统（guide.css，配合 guide.js）
 * - .kg：fixed 容器（右下角，可拖动），z 120 高于 header(100)、低于弹窗(200)，
 *   保证菜单弹出到 header 区域时仍可点击
 * - 气泡/菜单为容器子元素，随看板娘移动；拖到屏幕左半边时整体翻转（.kg-flip）
 * - 高亮圈 .kg-spot 独立 fixed 定位（z 105），随滚动/缩放跟随目标
 * - 全部使用 theme.css 的 MD3 变量与动效曲线
 * ============================================================ */

/* ---------- 看板娘容器 ---------- */
.kg{position:fixed;z-index:120;width:var(--kg-w);height:var(--kg-h);
  pointer-events:none;user-select:none;-webkit-user-select:none}
.kg-mascot{position:absolute;inset:0;margin:0;padding:0;border:none;background:none;
  cursor:grab;pointer-events:auto;touch-action:none;
  transition:transform var(--dur-2) var(--ease-standard),filter var(--dur-2) var(--ease-standard)}
.kg-mascot img{width:100%;height:100%;object-fit:contain;display:block;
  pointer-events:none;filter:drop-shadow(0 6px 14px rgba(0,0,0,.22))}
.kg-mascot:hover{transform:translateY(-3px)}
.kg-mascot:active,.kg-drag .kg-mascot{cursor:grabbing;transform:none;transition:none}
.kg-mascot:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:var(--r-lg)}
.kg-open .kg-mascot{filter:brightness(1.03)}
.kg.kg-drag,.kg.kg-resize{transition:none}   /* 高于 .kg 的 left/top 过渡（后者在文件末尾定义）：拖动/窗口调整时禁动画 */

/* ---------- 首次访问脉冲标记（头顶小圆点，guide.js 控制 .on） ---------- */
.kg-ping{position:absolute;top:2%;right:34%;width:12px;height:12px;border-radius:50%;
  background:var(--primary);border:2px solid var(--surface);
  opacity:0;transform:scale(.4);pointer-events:none}
.kg-ping.on{animation:kgPing 1.5s var(--ease-emphasized) infinite}
@keyframes kgPing{0%{opacity:0;transform:scale(.4)}
  35%{opacity:.95;transform:scale(1)}
  100%{opacity:0;transform:scale(2.4)}}

/* ---------- 气泡（容器子元素，位于看板娘左侧；.kg-flip 时翻到右侧） ---------- */
/* 投影用 drop-shadow 作用于「气泡+小三角」合成轮廓，尾巴与气泡投影连成一体；
   --elev-* 是逗号列表无法直接用于 drop-shadow，按 theme.css 明暗两套值镜像 */
:root{--kg-bubble-shadow:drop-shadow(0 10px 20px rgba(0,0,0,.19)) drop-shadow(0 6px 6px rgba(0,0,0,.23))}
html[data-dark="1"]{--kg-bubble-shadow:drop-shadow(0 10px 20px rgba(0,0,0,.60)) drop-shadow(0 6px 6px rgba(0,0,0,.45))}
.kg-bubble{position:absolute;right:calc(100% + 14px);bottom:86%;width:max-content;max-width:min(270px,calc(100vw - var(--kg-w) - 56px));
  background:var(--surface-container-high);border:1px solid var(--outline-variant);
  border-radius:var(--r-lg);padding:11px 14px;font-size:var(--fs-sm);line-height:1.65;
  color:var(--on-surface);filter:var(--kg-bubble-shadow);
  opacity:0;transform:translateX(10px) scale(.96);transform-origin:center right;
  transition:opacity var(--dur-2) var(--ease-emphasized),transform var(--dur-2) var(--ease-emphasized);
  pointer-events:none;z-index:1}
.kg-bubble.show{opacity:1;transform:none}
.kg-bubble.kg-clickable{pointer-events:auto}   /* 含登录等链接时开放点击 */
.kg-bubble .mi{font-size:1.1em;vertical-align:-2px}
/* 气泡尾巴（指向看板娘） */
.kg-bubble::after{content:"";position:absolute;right:-7px;bottom:20px;width:13px;height:13px;
  background:var(--surface-container-high);border-top:1px solid var(--outline-variant);
  border-right:1px solid var(--outline-variant);transform:rotate(45deg);border-radius:2px}
.kg-flip .kg-bubble{left:calc(100% + 14px);right:auto;
  transform:translateX(-10px) scale(.96);transform-origin:center left}
.kg-flip .kg-bubble::after{left:-7px;right:auto;border:none;
  border-bottom:1px solid var(--outline-variant);border-left:1px solid var(--outline-variant)}

/* ---------- 向导菜单（看板娘上方；.kg-flip 靠屏幕左边时左对齐；顶部空间不足时向下弹出） ---------- */
.kg-menu{position:absolute;right:-8px;bottom:calc(100% + 14px);width:min(320px,calc(100vw - 32px));
  max-height:min(62vh,440px);display:flex;flex-direction:column;
  background:var(--surface-container-high);border:1px solid var(--outline-variant);
  border-radius:var(--r-lg);box-shadow:var(--elev-4);overflow:hidden;
  opacity:0;transform:translateY(10px) scale(.97);transform-origin:bottom right;
  transition:opacity var(--dur-2) var(--ease-emphasized),transform var(--dur-2) var(--ease-emphasized);
  pointer-events:auto;visibility:hidden}
.kg-menu.open{opacity:1;transform:none;visibility:visible}
.kg-flip .kg-menu{left:-8px;right:auto;transform-origin:bottom left}
.kg-menu-down .kg-menu{bottom:auto;top:calc(100% + 14px);transform-origin:top right}
.kg-menu-down.kg-flip .kg-menu{transform-origin:top left}
.kg-menu-head{display:flex;align-items:flex-start;gap:10px;padding:13px 15px 10px;
  border-bottom:1px solid var(--outline-variant);flex:none}
.kg-menu-head .kg-menu-ico{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--primary-container);color:var(--on-primary-container);font-size:18px}
.kg-menu-head b{display:block;font-size:var(--fs-md);color:var(--on-surface)}
.kg-menu-head p{margin:3px 0 0;font-size:var(--fs-xs);line-height:1.5;color:var(--on-surface-variant)}
.kg-menu-close{flex:none;margin-left:auto;width:26px;height:26px;border:none;border-radius:50%;
  background:none;color:var(--on-surface-variant);cursor:pointer;display:grid;place-items:center;font-size:16px}
.kg-menu-close:hover{background:var(--state-hover)}
.kg-menu-list{overflow-y:auto;padding:8px;flex:1}
.kg-item{display:flex;align-items:flex-start;gap:10px;width:100%;padding:9px 10px;margin:0;
  border:none;background:none;border-radius:var(--r-md);cursor:pointer;text-align:left;
  color:var(--on-surface);font-size:var(--fs-sm);line-height:1.5;font-family:inherit}
.kg-item:hover{background:var(--state-hover)}
.kg-item .kg-item-ico{flex:none;color:var(--primary);font-size:17px;margin-top:1px}
.kg-item b{display:block;font-size:var(--fs-sm);color:var(--on-surface)}
.kg-item span{display:block;font-size:var(--fs-2xs);color:var(--on-surface-variant);margin-top:1px}
.kg-menu-foot{flex:none;display:flex;align-items:center;gap:8px;padding:9px 15px;
  border-top:1px solid var(--outline-variant);font-size:var(--fs-xs);color:var(--on-surface-variant)}
.kg-menu-foot .kg-foot-btn{border:none;background:none;color:var(--primary);cursor:pointer;
  font-size:var(--fs-xs);font-family:inherit;padding:4px 6px;border-radius:var(--r-xs)}
.kg-menu-foot .kg-foot-btn:hover{background:var(--state-hover)}
.kg-menu-foot .kg-foot-right{margin-left:auto;display:flex;align-items:center;gap:8px}
/* 提示开关（小号 MD3 switch） */
.kg-switch{display:inline-flex;align-items:center;gap:6px;cursor:pointer;user-select:none}
.kg-switch input{position:absolute;opacity:0;width:0;height:0}
.kg-switch i{width:30px;height:17px;border-radius:var(--r-pill);background:var(--outline);
  position:relative;transition:background var(--dur-1) var(--ease-standard);flex:none}
.kg-switch i::after{content:"";position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;
  background:#fff;box-shadow:var(--elev-1);transition:left var(--dur-1) var(--ease-standard)}
.kg-switch input:checked + i{background:var(--primary)}
.kg-switch input:checked + i::after{left:15px}
.kg-switch input:focus-visible + i{outline:2px solid var(--primary);outline-offset:2px}

/* ---------- 高亮圈（独立 fixed，随目标滚动/缩放，随气泡一起消失） ---------- */
.kg-spot{position:fixed;z-index:105;pointer-events:none;border:2px solid var(--primary);
  border-radius:var(--r-md);box-shadow:0 0 0 4px rgba(63,81,181,.22);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 22%,transparent);
  animation:kgSpotPulse 1.6s var(--ease-standard) infinite}
.kg-spot[hidden]{display:none}
@keyframes kgSpotPulse{0%,100%{box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 26%,transparent)}
  50%{box-shadow:0 0 0 10px color-mix(in srgb,var(--primary) 8%,transparent)}}

/* ---------- 响应式 ---------- */
:root{--kg-w:140px;--kg-h:210px}      /* 立绘 2:3（看板娘.png 1024×1536） */
@media (max-width:900px){
  :root{--kg-w:118px;--kg-h:177px}
  .kg-bubble{max-width:min(240px,calc(100vw - var(--kg-w) - 40px))}
}
@media (max-width:640px){
  :root{--kg-w:96px;--kg-h:144px}
  .kg-menu{max-height:min(56vh,380px)}
}
/* 位置变化（载入/拖动/窗口调整）带平滑过渡；拖动与窗口调整期间由 .kg-drag/.kg-resize 临时禁用 */
.kg{transition:left .15s var(--ease-standard),top .15s var(--ease-standard)}

/* ---------- 动效降级 ---------- */
@media (prefers-reduced-motion:reduce){
  .kg-ping.on{animation:none;opacity:0}
  .kg-spot{animation:none}
  .kg-bubble,.kg-menu{transition:none}
  .kg-mascot:hover{transform:none}
}

/* ---------- 页脚"显示看板娘"恢复按钮（看板娘被隐藏后） ---------- */
.kg-restore{margin-left:10px;padding:3px 10px;font-size:var(--fs-2xs);
  color:var(--txt-faint);background:transparent;border:1px solid var(--outline);
  border-radius:var(--r-pill);cursor:pointer;font-family:inherit;
  transition:color var(--dur-1) var(--ease-standard),border-color var(--dur-1) var(--ease-standard)}
.kg-restore:hover{color:var(--on-surface);border-color:var(--outline-strong)}