@import url("../../assets/fonts/material-symbols-outlined.css");

/* --- Shared Avatar Frame System --- */
.avatar-container {
  --avatar-frame-size: 100px;
  --avatar-main-size: 100%;
  --avatar-main-bg: #ffffff;
  --avatar-main-border: 0;
  --avatar-main-shadow: none;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--avatar-frame-size);
  height: var(--avatar-frame-size);
  padding: 0;
  border: 0;
  background: transparent;
  flex: 0 0 auto;
  line-height: 0;
  overflow: visible;
  isolation: isolate;
  text-decoration: none;
  font-size: var(--avatar-frame-size);
}

.avatar-main {
  position: relative;
  width: var(--avatar-main-size);
  height: var(--avatar-main-size);
  box-sizing: border-box;
  border-radius: 50%;
  overflow: hidden;
  background: var(--avatar-main-bg);
  border: var(--avatar-main-border);
  box-shadow: var(--avatar-main-shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

/* Allow themes to use pseudo-elements for decorations */
.avatar-container.pb-theme-avatar-imported .avatar-main,
.avatar-container[data-avatar-theme] .avatar-main {
  overflow: visible;
}

.avatar-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.avatar-badge {
  position: absolute;
  z-index: 10;
  display: none;
}


.avatar-container[data-avatar-theme="doggy-friend"]:not(.pb-theme-avatar-imported) {
  --avatar-main-size: 80%;
}

.avatar-container[data-avatar-theme="doggy-friend"]:not(.pb-theme-avatar-imported)::before,
.avatar-container[data-avatar-theme="doggy-friend"]:not(.pb-theme-avatar-imported)::after {
  content: "";
  position: absolute;
  top: -0.04em;
  z-index: 1;
  width: 0.28em;
  height: 0.36em;
  border: max(2px, 0.035em) solid #78350f;
  border-radius: 50% 50% 20% 20%;
  background: #b45309;
  transition: transform 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  animation: avatar-frame-doggy-ears-idle 4s infinite ease-in-out;
}

.avatar-container[data-avatar-theme="doggy-friend"]:not(.pb-theme-avatar-imported)::before {
  left: 0.02em;
  transform: rotate(-25deg);
  transform-origin: bottom right;
}

.avatar-container[data-avatar-theme="doggy-friend"]:not(.pb-theme-avatar-imported)::after {
  right: 0.02em;
  transform: rotate(25deg);
  transform-origin: bottom left;
}

.avatar-container[data-avatar-theme="doggy-friend"]:not(.pb-theme-avatar-imported):hover::before,
.avatar-container[data-avatar-theme="doggy-friend"]:not(.pb-theme-avatar-imported).is-avatar-interacting::before {
  transform: rotate(-10deg) translateY(-0.04em) scale(1.1);
}

.avatar-container[data-avatar-theme="doggy-friend"]:not(.pb-theme-avatar-imported):hover::after,
.avatar-container[data-avatar-theme="doggy-friend"]:not(.pb-theme-avatar-imported).is-avatar-interacting::after {
  transform: rotate(10deg) translateY(-0.04em) scale(1.1);
}

.avatar-container[data-avatar-theme="doggy-friend"]:not(.pb-theme-avatar-imported) .avatar-main {
  border: max(2px, 0.04em) solid #facc15;
  background: #ffffff;
  box-shadow: 0 0.04em 0.12em rgba(180, 83, 9, 0.16);
}

.avatar-container[data-avatar-theme="doggy-friend"]:not(.pb-theme-avatar-imported) .avatar-main::before,
.avatar-container[data-avatar-theme="doggy-friend"]:not(.pb-theme-avatar-imported) .avatar-main::after {
  content: "pets";
  position: absolute;
  bottom: -0.02em;
  z-index: 10;
  color: #78350f;
  font-family: "Material Symbols Outlined";
  font-size: clamp(10px, 0.16em, 18px);
  line-height: 1;
  transition: transform 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.avatar-container[data-avatar-theme="doggy-friend"]:not(.pb-theme-avatar-imported) .avatar-main::before {
  left: 0.05em;
  transform: rotate(-15deg);
}

.avatar-container[data-avatar-theme="doggy-friend"]:not(.pb-theme-avatar-imported) .avatar-main::after {
  right: 0.05em;
  transform: rotate(15deg);
}

.avatar-container[data-avatar-theme="doggy-friend"]:not(.pb-theme-avatar-imported):hover .avatar-main::before,
.avatar-container[data-avatar-theme="doggy-friend"]:not(.pb-theme-avatar-imported).is-avatar-interacting .avatar-main::before {
  transform: rotate(0deg) scale(1.3) translateY(-0.02em);
}

.avatar-container[data-avatar-theme="doggy-friend"]:not(.pb-theme-avatar-imported):hover .avatar-main::after,
.avatar-container[data-avatar-theme="doggy-friend"]:not(.pb-theme-avatar-imported).is-avatar-interacting .avatar-main::after {
  filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.2));
  transform: rotate(-10deg) scale(1.5) translate(-0.12em, -0.12em);
}

.avatar-container[data-avatar-theme="doggy-friend"]:not(.pb-theme-avatar-imported) .avatar-badge {
  right: -0.04em;
  bottom: 0.16em;
  display: block;
  width: 0.22em;
  height: 0.13em;
  min-width: 8px;
  min-height: 5px;
  border: max(2px, 0.026em) solid #b45309;
  border-radius: 0 999px 999px 0;
  background: #d97706;
  transform-origin: left center;
  animation: avatar-frame-doggy-tail-wag 1.5s infinite ease-in-out;
}

.avatar-container[data-avatar-theme="doggy-friend"]:not(.pb-theme-avatar-imported):hover .avatar-badge,
.avatar-container[data-avatar-theme="doggy-friend"]:not(.pb-theme-avatar-imported).is-avatar-interacting .avatar-badge {
  background: #f59e0b;
  animation-duration: 400ms;
}

/* --- Kitty Meow (喵星来客) --- */
.avatar-container[data-avatar-theme="kitty-meow"]:not(.pb-theme-avatar-imported) {
  --avatar-main-size: 82%;
  --avatar-main-bg: #1e1b4b;
}

/* Alien Cat */
.avatar-container[data-avatar-theme="kitty-meow"]:not(.pb-theme-avatar-imported)::before {
  content: "";
  position: absolute;
  top: -0.28em;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  width: 0.55em;
  height: 0.5em;
  /* Normal Alien Cat */
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 90' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='50' y1='25' x2='50' y2='5' stroke='%23f472b6' stroke-width='3'/%3E%3Ccircle cx='50' cy='5' r='5' fill='%23facc15'/%3E%3Cpath d='M15,90 L15,40 L25,15 L40,35 L60,35 L75,15 L85,40 L85,90 Z' fill='%23ffffff' stroke='%23f472b6' stroke-width='4' stroke-linejoin='round'/%3E%3Cpolygon points='25,25 22,40 35,35' fill='%23fce7f3'/%3E%3Cpolygon points='75,25 78,40 65,35' fill='%23fce7f3'/%3E%3Cellipse cx='35' cy='55' rx='6' ry='8' fill='%231e293b'/%3E%3Cellipse cx='65' cy='55' rx='6' ry='8' fill='%231e293b'/%3E%3Ccircle cx='33' cy='52' r='2' fill='%23fff'/%3E%3Ccircle cx='63' cy='52' r='2' fill='%23fff'/%3E%3Cpath d='M48,65 Q50,67 52,65' fill='none' stroke='%23ec4899' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center bottom;
  background-size: contain;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  animation: cosmic-cat-float 4s infinite ease-in-out;
}

/* Hover: Glowing Eyes Cat */
.avatar-container[data-avatar-theme="kitty-meow"]:not(.pb-theme-avatar-imported):hover::before,
.avatar-container[data-avatar-theme="kitty-meow"]:not(.pb-theme-avatar-imported).is-avatar-interacting::before {
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 90' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='50' y1='25' x2='50' y2='5' stroke='%23facc15' stroke-width='4'/%3E%3Ccircle cx='50' cy='5' r='7' fill='%23facc15'/%3E%3Cpath d='M15,90 L15,40 L25,15 L40,35 L60,35 L75,15 L85,40 L85,90 Z' fill='%23ffffff' stroke='%23f472b6' stroke-width='4' stroke-linejoin='round'/%3E%3Cpolygon points='25,25 22,40 35,35' fill='%23fce7f3'/%3E%3Cpolygon points='75,25 78,40 65,35' fill='%23fce7f3'/%3E%3Cellipse cx='35' cy='55' rx='7' ry='9' fill='%23facc15'/%3E%3Cellipse cx='65' cy='55' rx='7' ry='9' fill='%23facc15'/%3E%3Ccircle cx='35' cy='55' r='3' fill='%23fff'/%3E%3Ccircle cx='65' cy='55' r='3' fill='%23fff'/%3E%3Cpath d='M48,65 Q50,67 52,65' fill='none' stroke='%23ec4899' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center bottom;
  background-size: contain;
  transform: translateX(-50%) translateY(-0.08em);
}

/* Tractor Beam Intrusion */
.avatar-container[data-avatar-theme="kitty-meow"]:not(.pb-theme-avatar-imported)::after {
  content: "";
  position: absolute;
  top: 0.1em;
  left: 50%;
  transform: translateX(-50%);
  width: 0.3em;
  height: 0;
  background: linear-gradient(to bottom, rgba(244, 114, 182, 0.8), rgba(244, 114, 182, 0.1));
  clip-path: polygon(30% 0, 70% 0, 100% 100%, 0% 100%);
  z-index: 15;
  pointer-events: none;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.avatar-container[data-avatar-theme="kitty-meow"]:not(.pb-theme-avatar-imported):hover::after,
.avatar-container[data-avatar-theme="kitty-meow"]:not(.pb-theme-avatar-imported).is-avatar-interacting::after {
  height: 1.0em;
  width: 0.9em;
  filter: drop-shadow(0 0 0.1em rgba(244, 114, 182, 0.8));
}

/* Main ring */
.avatar-container[data-avatar-theme="kitty-meow"]:not(.pb-theme-avatar-imported) .avatar-main {
  border: max(2px, 0.03em) solid #f472b6;
  box-shadow: 
    0 0 0.1em rgba(244, 114, 182, 0.5),
    inset 0 0 0.1em rgba(244, 114, 182, 0.3);
  transition: all 0.4s ease;
}

.avatar-container[data-avatar-theme="kitty-meow"]:not(.pb-theme-avatar-imported):hover .avatar-main,
.avatar-container[data-avatar-theme="kitty-meow"]:not(.pb-theme-avatar-imported).is-avatar-interacting .avatar-main {
  transform: scale(0.95);
  box-shadow: 0 0 0.25em rgba(244, 114, 182, 0.8), inset 0 0 0.15em rgba(244, 114, 182, 0.5);
  border-color: #facc15;
}

/* Floating Stars */
.avatar-container[data-avatar-theme="kitty-meow"]:not(.pb-theme-avatar-imported) .avatar-main::before {
  content: "✨";
  position: absolute;
  top: 0.1em;
  left: 0.05em;
  font-size: clamp(10px, 0.15em, 20px);
  z-index: 10;
  animation: cosmic-star-twinkle 3s infinite alternate;
}

.avatar-container[data-avatar-theme="kitty-meow"]:not(.pb-theme-avatar-imported) .avatar-main::after {
  content: "✨";
  position: absolute;
  bottom: 0.1em;
  right: 0.05em;
  font-size: clamp(8px, 0.12em, 16px);
  z-index: 10;
  animation: cosmic-star-twinkle 2s infinite alternate-reverse;
}

/* UFO Badge */
.avatar-container[data-avatar-theme="kitty-meow"]:not(.pb-theme-avatar-imported) .avatar-badge {
  display: block;
  width: 0.35em;
  height: 0.25em;
  bottom: -0.02em;
  right: -0.08em;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 40 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cellipse cx='20' cy='20' rx='18' ry='6' fill='%23f472b6'/%3E%3Cpath d='M8,20 Q20,5 32,20 Z' fill='%23fce7f3'/%3E%3Ccircle cx='10' cy='20' r='2' fill='%23fff'/%3E%3Ccircle cx='20' cy='20' r='2' fill='%23fff'/%3E%3Ccircle cx='30' cy='20' r='2' fill='%23fff'/%3E%3C/svg%3E") no-repeat center center;
  background-size: contain;
  animation: cosmic-ufo-orbit 4s infinite ease-in-out;
  transform-origin: center center;
}

.avatar-container[data-avatar-theme="kitty-meow"]:not(.pb-theme-avatar-imported):hover .avatar-badge,
.avatar-container[data-avatar-theme="kitty-meow"]:not(.pb-theme-avatar-imported).is-avatar-interacting .avatar-badge {
  animation: cosmic-ufo-zoom 0.5s infinite alternate;
}

@keyframes cosmic-cat-float {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-0.04em); }
}

@keyframes cosmic-star-twinkle {
  0% { opacity: 0.3; transform: scale(0.8) rotate(0deg); }
  100% { opacity: 1; transform: scale(1.2) rotate(15deg); }
}

@keyframes cosmic-ufo-orbit {
  0%, 100% { transform: translateY(0) rotate(-10deg); }
  50% { transform: translateY(-0.08em) rotate(10deg); }
}

@keyframes cosmic-ufo-zoom {
  0% { transform: scale(1) rotate(0deg); }
  100% { transform: scale(1.2) rotate(5deg); }
}

@keyframes avatar-frame-doggy-ears-idle {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.08); }
}

@keyframes avatar-frame-doggy-tail-wag {
  0%, 100% { transform: rotate(-10deg); }
  50% { transform: rotate(40deg); }
}