/* TalkKS — karta e animuar e profilit të të tjerëve (.pf-other): ngjyrat e animuara, statistikat, të dhënat
 * dhe butonat. My own profile (.pf without .pf-other) keeps the base styles.css look.
 * Markup: public/js/app.js buildProfile (+ gifts.js themeProfile). Loaded after roles.css: the palette vars
 * (--r1 --r2 --r3 --rt --rglow --rtint) come from .pf-role-<k>; profiles without a level get the teal default. */

.pf-other:not(.pf-role) {
  --r1: #c4fff4;
  --r2: #3fd1bc;
  --r3: #2b9fe0;
  --rt: #031b17;
  --ri: #e3fffa;
  --rglow: rgba(63, 209, 188, 0.4);
  --rtint: rgba(30, 140, 125, 0.28);
}

.pf-other {
  --pf-accent: var(--r2);
  --pf-btn-bg: linear-gradient(110deg, var(--r1), var(--r2) 45%, var(--r1) 90%);
  --pf-btn-fg: var(--rt);
  position: relative;
  isolation: isolate;
  gap: 14px;
  margin-top: 4px;
  padding: 0 12px 16px;
  border-radius: 26px;
  background:
    radial-gradient(120% 40% at 50% 100%, var(--rtint), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.018));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 24px 60px -34px var(--rglow);
  animation: none;
}

.pf-other:not(.pf-role) {
  --pf-btn-bg: linear-gradient(110deg, #62e8d2, #2fbfa8 40%, #34a6e6 75%, #62e8d2);
}
.pf-other.pf-role-diamant {
  --pf-btn-bg: linear-gradient(110deg, #7c6cff, #b06bff 45%, #5f8bff 90%);
  --pf-btn-fg: #fff;
}
.pf-other.pf-role-legjende {
  --pf-btn-bg: linear-gradient(110deg, #ff9a3c, #f5c542 45%, #ff7a4d 90%);
}
.pf-other.pf-role-argjend {
  --pf-accent: #d5dbe3;
}

/* ---------- animated border around the whole card (transform only) ---------- */
.pf-ring {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  padding: 1.5px;
  border-radius: inherit;
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

.pf-ring i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 320%;
  aspect-ratio: 1;
  background: conic-gradient(
    transparent 0 6%,
    var(--r2) 16%,
    var(--r1) 22%,
    transparent 32% 56%,
    var(--r3) 66%,
    var(--r2) 72%,
    transparent 82%
  );
  transform: translate(-50%, -50%);
  animation: pfRing 9s linear infinite;
}

/* ---------- hero: aurora cover ---------- */
.pf-other .pf-hero {
  padding-top: 30px;
}

.pf-other .pf-cover {
  top: 0;
  left: -12px;
  right: -12px;
  height: 210px;
  overflow: hidden;
  border-radius: 26px 26px 0 0;
  background:
    radial-gradient(110% 80% at 50% -12%, var(--rglow), transparent 70%),
    linear-gradient(180deg, var(--rtint), transparent 92%);
  -webkit-mask-image: linear-gradient(#000 55%, transparent);
  mask-image: linear-gradient(#000 55%, transparent);
}

.pf-other .pf-cover::before,
.pf-other .pf-cover::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -55%;
  width: 78%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle closest-side, var(--r2), transparent);
  opacity: 0.5;
  will-change: transform;
}

.pf-other .pf-cover::before {
  left: -22%;
  animation: pfAuroraA 13s ease-in-out infinite alternate;
}

.pf-other .pf-cover::after {
  right: -22%;
  background: radial-gradient(circle closest-side, var(--r3), transparent);
  opacity: 0.45;
  animation: pfAuroraB 16s ease-in-out infinite alternate;
}

.pf-other .pf-avatar-box::before {
  content: "";
  position: absolute;
  inset: -20px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle closest-side, var(--rglow), transparent);
  animation: pfHalo 4.2s ease-in-out infinite;
}

.pf-other .pf-hero::after {
  content: "";
  width: 66%;
  height: 1px;
  margin-top: 16px;
  background: linear-gradient(90deg, transparent, var(--r2) 30%, #fff 50%, var(--r2) 70%, transparent);
  background-size: 200% 100%;
  opacity: 0.55;
  animation: pfLine 5s linear infinite;
}

.pf-other .pf-handle-pill {
  background: rgba(0, 0, 0, 0.22);
  border-color: rgba(255, 255, 255, 0.1);
  color: #b4b4ba;
}

/* ---------- stats: three mini cards ---------- */
.pf-other .pf-stats {
  max-width: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

.pf-other .pf-stat {
  overflow: hidden;
  gap: 4px;
  padding: 13px 4px 11px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
  transition: transform 0.12s ease, background 0.15s ease;
}

.pf-other .pf-stat + .pf-stat::before {
  display: none;
}

.pf-other .pf-stat::after {
  content: "";
  position: absolute;
  top: 0;
  left: 24%;
  right: 24%;
  height: 2px;
  border-radius: 0 0 2px 2px;
  background: linear-gradient(90deg, transparent, var(--pf-accent), transparent);
}

.pf-other button.pf-stat:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04));
}

.pf-other button.pf-stat:active {
  transform: scale(0.95);
}

.pf-other .pf-stat-val {
  font-size: 1.28rem;
  letter-spacing: -0.02em;
}

.pf-other .pf-stat-lbl {
  color: #9a9aa0;
  font-size: 0.72rem;
  font-weight: 650;
}

/* ---------- bio ---------- */
.pf-other .pf-bio {
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(255, 255, 255, 0.07);
}

/* ---------- action buttons: follow sizes to its label, Mesazh takes the rest ---------- */
.pf-other .pf-actions.is-other {
  grid-template-columns: minmax(max-content, 1fr) minmax(0, 1fr) 46px;
  gap: 8px;
}

.pf-other .pf-actions.is-other:has(.gf-pf-send) {
  grid-template-columns: minmax(max-content, 1fr) minmax(0, 1fr) 46px 46px;
}

.pf-other .pf-btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  height: 46px;
  gap: 7px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.04));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  font-size: 0.9rem;
  font-weight: 750;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.pf-other .pf-btn .sx-i {
  flex: 0 0 auto;
  color: var(--pf-accent);
}

.pf-other .pf-btn-txt {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pf-other .pf-btn:hover:not(:disabled) {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06));
  border-color: rgba(255, 255, 255, 0.16);
}

.pf-other .pf-btn:active:not(:disabled) {
  transform: scale(0.95);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.35);
}

.pf-other .pf-btn:focus-visible {
  outline: 2px solid var(--pf-accent);
  outline-offset: 2px;
}

.pf-other .pf-btn.primary {
  border-color: rgba(255, 255, 255, 0.3);
  background: var(--pf-btn-bg);
  background-size: 220% 100%;
  color: var(--pf-btn-fg);
  font-weight: 850;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -2px 0 rgba(0, 0, 0, 0.14),
    0 10px 24px -10px var(--rglow);
  animation: pfBtnFlow 5s ease-in-out infinite alternate;
}

.pf-other .pf-btn.primary .sx-i {
  color: inherit;
}

.pf-other .pf-btn.primary::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.55) 50%, transparent 65%);
  transform: translateX(-130%);
  animation: rlSweep 3.6s ease-in-out infinite;
  pointer-events: none;
}

.pf-other .pf-btn.primary:hover:not(:disabled) {
  background: var(--pf-btn-bg);
  background-size: 220% 100%;
  filter: none;
}

.pf-other .pf-btn.primary:active:not(:disabled) {
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.25), 0 4px 12px -8px var(--rglow);
}

.pf-other .pf-follow.is-following .sx-i {
  color: #30d158;
}

.pf-other .pf-follow.is-requested {
  border-style: dashed;
  border-color: rgba(255, 196, 80, 0.45);
  color: #ffd27a;
}

.pf-other .pf-follow.is-requested .sx-i {
  color: inherit;
}

.pf-other .pf-btn.icon {
  padding: 0;
}

.pf-other .pf-btn.icon .sx-i svg {
  width: 20px;
  height: 20px;
}

.pf-other .gf-pf-send {
  border-color: rgba(255, 200, 80, 0.38);
  background: linear-gradient(145deg, rgba(255, 207, 74, 0.22), rgba(232, 69, 124, 0.16));
  color: #ffd25e;
}

.pf-other .gf-pf-send svg {
  width: 21px;
  height: 21px;
  transform-origin: 50% 85%;
  animation: pfGift 4s ease-in-out infinite;
}

.pf-other .pf-actions.is-other > .pf-btn.icon:last-child:not(:disabled) {
  border-color: rgba(48, 209, 88, 0.35);
  background: linear-gradient(180deg, rgba(48, 209, 88, 0.2), rgba(48, 209, 88, 0.08));
}

.pf-other .pf-actions.is-other > .pf-btn.icon:last-child:not(:disabled) .sx-i {
  color: #4ade80;
}

.pf-other .pf-btn:disabled {
  opacity: 0.42;
}

/* ---------- info sections ---------- */
.pf-other .pf-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 4px 0;
  color: var(--pf-accent);
}

.pf-other .pf-section-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--pf-accent), transparent);
  opacity: 0.35;
}

.pf-other .pf-card {
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.025));
  border-color: rgba(255, 255, 255, 0.07);
}

.pf-other .pf-row {
  min-height: 50px;
}

.pf-other .pf-row:not(.is-link) .pf-row-label {
  color: #a1a1a6;
}

.pf-other .pf-row:not(.is-link) .pf-row-value {
  color: #f2f2f4;
  font-weight: 650;
}

.pf-other .pf-row-ico {
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* ---------- entrance: card, then hero → stats → actions → sections ---------- */
.pf-other.pf-enter {
  animation: pfCardIn 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: var(--pf-t, 0ms);
}

.pf-other.pf-enter > :not(.pf-ring) {
  animation: pfIn 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(var(--pf-d, 0) * 70ms + 60ms + var(--pf-t, 0ms));
}

.pf-other.pf-enter > .sx-req-banner { --pf-d: 1; }
.pf-other.pf-enter > .pf-stats { --pf-d: 2; }
.pf-other.pf-enter > .pf-bio { --pf-d: 3; }
.pf-other.pf-enter > .pf-actions { --pf-d: 4; }
.pf-other.pf-enter > .pf-section { --pf-d: 5; }
.pf-other.pf-enter > .pf-section ~ .pf-section { --pf-d: 6; }

.pf-other.pf-enter .pf-avatar-box {
  animation: pfPop 0.65s cubic-bezier(0.3, 1.45, 0.5, 1) both;
  animation-delay: calc(120ms + var(--pf-t, 0ms));
}

.pf-other.pf-enter .pf-name-line,
.pf-other.pf-enter .pf-handle-pill {
  animation: pfIn 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(200ms + var(--pf-t, 0ms));
}

/* phones: the card bleeds a little into the sheet padding so "Duke ndjekur" + "Mesazh" fit next to the icons */
@media (max-width: 420px) {
  .pf-other {
    margin-inline: -6px;
    padding-inline: 10px;
  }
  .pf-other .pf-cover {
    left: -10px;
    right: -10px;
  }
  .pf-other .pf-btn {
    gap: 5px;
    padding: 0 8px;
    font-size: 0.86rem;
  }
  .pf-other .pf-actions.is-other,
  .pf-other .pf-actions.is-other:has(.gf-pf-send) {
    gap: 6px;
  }
  .pf-other .pf-actions.is-other {
    grid-template-columns: minmax(max-content, 1fr) minmax(0, 1fr) 42px;
  }
  .pf-other .pf-actions.is-other:has(.gf-pf-send) {
    grid-template-columns: minmax(max-content, 1fr) minmax(0, 1fr) 42px 42px;
  }
}

@media (max-width: 350px) {
  .pf-other .pf-actions.is-other > .pf-btn:not(.icon) .sx-i {
    display: none;
  }
}

/* ---------- keyframes ---------- */
@keyframes pfRing {
  to {
    transform: translate(-50%, -50%) rotate(1turn);
  }
}

@keyframes pfAuroraA {
  0% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(38%, 10%) scale(1.18);
  }
  100% {
    transform: translate(70%, -4%) scale(0.92);
  }
}

@keyframes pfAuroraB {
  0% {
    transform: translate(0, 6%) scale(1.1);
  }
  50% {
    transform: translate(-40%, -8%) scale(0.9);
  }
  100% {
    transform: translate(-72%, 4%) scale(1.08);
  }
}

@keyframes pfHalo {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(0.92);
  }
  50% {
    opacity: 1;
    transform: scale(1.06);
  }
}

@keyframes pfLine {
  to {
    background-position: -200% 0;
  }
}

@keyframes pfBtnFlow {
  to {
    background-position: 100% 0;
  }
}

@keyframes pfGift {
  0%,
  72%,
  100% {
    transform: none;
  }
  78% {
    transform: rotate(-12deg) scale(1.08);
  }
  86% {
    transform: rotate(10deg) scale(1.08);
  }
  93% {
    transform: rotate(-4deg);
  }
}

@keyframes pfCardIn {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
  }
}

@keyframes pfIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

@keyframes pfPop {
  from {
    opacity: 0;
    transform: scale(0.7);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pf-other.pf-enter,
  .pf-other.pf-enter > *,
  .pf-other.pf-enter .pf-avatar-box,
  .pf-other.pf-enter .pf-name-line,
  .pf-other.pf-enter .pf-handle-pill,
  .pf-ring i,
  .pf-other .pf-cover::before,
  .pf-other .pf-cover::after,
  .pf-other .pf-avatar-box::before,
  .pf-other .pf-hero::after,
  .pf-other .pf-btn.primary,
  .pf-other .gf-pf-send svg {
    animation: none !important;
  }
  .pf-other .pf-btn.primary::after {
    display: none;
  }
}