.recent-character-chip, .classic-recent-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  overflow: visible;
  border-radius: 14px;
  margin-block-start: 8px;
  padding-inline-end: 10px;
}
.recent-character-chip .recent-character-load,
.classic-recent-chip [data-recent-index] {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 4px 7px 4px 4px;
  border-radius: 14px 0 0 14px;
}
.recent-character-avatar { width: 32px; height: 32px; object-fit: cover; border-radius: 10px; flex-shrink: 0; }
.recent-character-name { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-character-chip .recent-character-remove,
.classic-recent-chip .recent-character-remove {
  position: absolute;
  inset-block-start: -8px;
  inset-inline-end: -5px;
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  min-height: 23px;
  border: 1px solid #77958b;
  border-radius: 50%;
  padding: 0;
  background: #0c1715;
  color: #eaf6ed;
  font: 700 16px/1 Inter, sans-serif;
}
.recent-character-remove:hover { background: #552521 !important; }
.recent-character-chip button:focus-visible, .classic-recent-chip button:focus-visible { outline: 2px solid #b7f2df; outline-offset: 2px; }
@media (pointer: coarse) {
  .recent-character-chip button, .classic-recent-chip button { min-height: 44px; }
  .recent-character-chip .recent-character-remove, .classic-recent-chip .recent-character-remove { width: 30px; height: 30px; min-height: 30px; inset-block-start: -12px; }
}