/* Native geometric characters: one matte dot, two eyes, a little curiosity. */
.dot-character { display: block; position: relative; width: 100%; height: 100%; border-radius: 50%; background: var(--tone,#d9e8bd); box-shadow: inset 0 -3px 8px #53613b06; }
.dot-eyes { position: absolute; top: 44%; left: 50%; display: flex; gap: .14em; font-size: inherit; transform: translate(calc(-50% + var(--look-x,0px)),var(--look-y,0px)); transition: transform .45s var(--ease); }
.dot-eyes i { display: block; width: .052em; height: .075em; border-radius: 4px; background: #3a4034; }
.character-icon { display: block; flex-shrink: 0; width: 28px; height: 28px; font-size: 28px; }
.trade-row .character-icon { margin-top: 3px; }
.agent-card-head .character-icon { width: 42px; height: 42px; font-size: 42px; }
.detail-identity .character-icon { width: 64px; height: 64px; font-size: 64px; }
.character-icon .dot-eyes { gap: .15em; }
.character-icon .dot-eyes i { width: .06em; height: .08em; }
.floor-agent { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; min-width: 0; padding: 5px 5px 8px; background: transparent; border-radius: 18px; color: #637456; --look-x: 0px; --look-y: 0px; }
.character-stage { position: relative; display: block; width: 104px; height: 100px; pointer-events: none; }
.character-float { position: absolute; width: 76px; height: 76px; top: 3px; left: 14px; font-size: 76px; animation: quiet-float var(--float-duration,8s) ease-in-out infinite; animation-delay: var(--delay,0s); }
.floor-agent .dot-eyes i { animation: quiet-blink var(--blink-duration,9s) infinite; animation-delay: var(--delay,0s); }
.character-shadow { position: absolute; width: 40px; height: 6px; bottom: 5px; left: 32px; border-radius: 50%; background: #6e7a5720; filter: blur(3px); animation: quiet-shadow var(--float-duration,8s) ease-in-out infinite; animation-delay: var(--delay,0s); }
.agent-bubble { display: flex; align-items: center; justify-content: center; gap: 8px; max-width: 100%; margin-top: 4px; font-size: 14px; font-weight: 600; }
.agent-bubble>span { display: block; max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #627257; }
.agent-bubble b { font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; color: #677559; }
.agent-state { font-size: 12px; color: #6d7366; margin-top: 5px; white-space: nowrap; }
.floor-agent:hover .dot-character, .floor-agent:focus-visible .dot-character { transform: translateY(-3px); box-shadow: inset 0 -3px 8px #53613b06,0 4px 14px #52663808; }
.floor-agent .dot-character { transition: transform .45s var(--ease), box-shadow .45s; }
.floor-agent.holding .agent-state { color: #62794f; }
.floor-agent.paused .character-float, .floor-agent.paused .dot-eyes i, .floor-agent.paused .character-shadow { animation-play-state: paused; }
.floor-agent.paused .dot-character { opacity: .65; }
.floor-agent.paused .dot-eyes i { height: .025em; transform: none; margin-top: .025em; }
.floor-agent.paused .character-reaction { display: none; }
.floor-agent.paused .agent-state { color: #797065; }
.character-reaction { position: absolute; top: -15px; left: 50%; transform: translate(-50%,0); opacity: 0; background: #fff; border: 1px solid #e4eadd; padding: 4px 8px; border-radius: 15px; font-size: 12px; color: #677559; white-space: nowrap; z-index: 2; box-shadow: 0 2px 8px #46563406; }
@keyframes quiet-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes quiet-shadow { 0%,100% { opacity: .55; transform: scaleX(1); } 50% { opacity: .35; transform: scaleX(.88); } }
@keyframes quiet-blink { 0%,44%,47%,100% { transform: scaleY(1); } 45.5% { transform: scaleY(.15); } }
@media(max-width: 1200px) and (min-width: 1051px) {
  .floor-visual.dense .character-stage { width: 88px; height: 90px; }
  .floor-visual.dense .character-float { width: 65px; height: 65px; left: 11.5px; font-size: 65px; }
  .floor-visual.dense .character-shadow { left: 26px; width: 36px; }
  .floor-visual.dense .agent-bubble { flex-direction: column; gap: 0; }
  .floor-visual.dense .agent-state { white-space: normal; line-height: 1.4; }
}
@media(max-width: 560px) {
  .character-stage { width: 102px; height: 96px; }
  .character-float { width: 74px; height: 74px; left: 14px; font-size: 74px; }
  .character-shadow { bottom: 3px; left: 31px; }
  .agent-bubble>span { max-width: 83px; }
  .floor-agent { padding-left: 0; padding-right: 0; }
  .agent-state { font-size: 12px; }
}
@media(max-width: 360px) {
  .agent-bubble { flex-direction: column; gap: 1px; }
  .agent-bubble>span { max-width: 110px; }
  .agent-state { white-space: normal; min-height: 18px; line-height: 1.4; }
}
/* The animation control and system preference cover every character layer. */
.motion-off .floor-agent *, .motion-off .floor-agent *::before, .motion-off .floor-agent *::after { animation-play-state: paused !important; transition: none !important; }
.motion-off .floor-agent .dot-character { transform: none !important; }
.motion-off .floor-agent .dot-eyes { transform: translate(-50%,0) !important; }
.motion-off .character-reaction { display: none !important; }
@media(prefers-reduced-motion: reduce) {
  .floor-agent *, .floor-agent *::before, .floor-agent *::after { animation: none !important; transition: none !important; }
  .floor-agent .dot-character { transform: none !important; }
  .floor-agent .dot-eyes { transform: translate(-50%,0) !important; }
  .character-reaction { display: none !important; }
}