/* Linboo 智能体形象 · 动态头像组件
 * 依赖同目录：linboo-sprite.webp（96px）、linboo-sprite-192.webp（192px，可选）、portal-ring.webp
 *
 * 基本用法： <span class="linboo" style="--lb-size:32px"><i></i></span>
 * 高清头像： class="linboo lb-hd"            显示尺寸 ≥ 56px 时使用
 * 传送门光环：class="linboo lb-portal"        只用于「工作中」，同屏一处
 * 状态：     data-state="working | rest | alert"
 */
.linboo {
  --lb-size: 32px;
  --lb-ring: rgba(123, 140, 255, .5);
  position: relative;
  display: inline-block;
  flex: none;
  width: var(--lb-size);
  height: var(--lb-size);
  border-radius: 50%;
  vertical-align: middle;
}
/* 尺寸保护：防止外部 flex、宽高等通用规则把头像拉伸变形 */
.linboo {
  flex: 0 0 auto !important;
  width: var(--lb-size) !important;
  height: var(--lb-size) !important;
  min-width: 0 !important;
  max-width: none !important;
  aspect-ratio: 1 !important;
}
.linboo > i {
  display: block !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 50%;
  background: #0b0b26 url(linboo-sprite.webp) 0 0 / 6000% 100% no-repeat;
  box-shadow: 0 0 0 1px var(--lb-ring), 0 0 calc(var(--lb-size) * .35) rgba(95, 110, 255, .35);
  animation: lb-play 6.08s steps(60, jump-none) infinite;
}
.linboo.lb-hd > i { background-image: url(linboo-sprite-192.webp); }
@keyframes lb-play { to { background-position: 100% 0; } }

/* 传送门光环：深色界面专用，以滤色叠在背景上 */
.linboo.lb-portal::before {
  content: "";
  position: absolute;
  inset: -34%;
  z-index: 0;
  border-radius: 50%;
  background: url(portal-ring.webp) center / cover no-repeat;
  mix-blend-mode: screen;
  animation: lb-spin 7s linear infinite;
  pointer-events: none;
}
@keyframes lb-spin { to { transform: rotate(-360deg); } }

/* 状态 */
.linboo[data-state="working"] { --lb-ring: rgba(53, 208, 200, .8); }
.linboo[data-state="working"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 50%;
  border: 1px solid rgba(53, 208, 200, .7);
  animation: lb-ripple 2.8s ease-out infinite;
  pointer-events: none;
}
@keyframes lb-ripple { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.75); opacity: 0; } }
.linboo[data-state="rest"] > i { filter: grayscale(.9) brightness(.65); animation-play-state: paused; }
.linboo[data-state="rest"]::before,
.linboo[data-state="alert"]::before { display: none; }
.linboo[data-state="alert"] { --lb-ring: rgba(240, 184, 75, .95); }
.linboo[data-state="alert"] > i { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .linboo > i, .linboo::before, .linboo::after { animation: none; }
}