/* Pixel-Link Premium Avatar Frames 2.2
   Profile + feed/chat compact CSS-rendered avatar shapes/gradients. No GIF/APNG/video assets. */
@property --pl-frame-angle{syntax:'<angle>';initial-value:0deg;inherits:false}

.pl-premium-avatar-frame{
  --pl-frame-c1:#ffb62e;--pl-frame-c2:#ff2442;--pl-frame-c3:#7856ff;--pl-frame-c4:#2dd4ff;
  --pl-frame-speed:8s;--pl-frame-angle:0deg;
  --pl-avatar-clip:circle(50% at 50% 50%);
  isolation:isolate;overflow:visible!important;
}
/* The profile avatar wrapper is already absolutely positioned by Pixel-Link.
   Do not change it to position:relative when a Premium frame is enabled. */
.profile-avatar-wrap.pl-premium-avatar-frame{position:absolute!important;}
/* Preview cards are standalone and do need their own positioning context. */
.pl-frame-preview.pl-premium-avatar-frame{position:relative;}
.pl-premium-avatar-frame.pl-avatar-shape-circle{--pl-avatar-clip:circle(50% at 50% 50%)}
.pl-premium-avatar-frame.pl-avatar-shape-hex{--pl-avatar-clip:polygon(29% 2%,71% 2%,75% 3%,80% 7%,86% 19%,94% 39%,96% 50%,94% 61%,86% 81%,80% 93%,75% 97%,71% 98%,29% 98%,25% 97%,20% 93%,14% 81%,6% 61%,4% 50%,6% 39%,14% 19%,20% 7%,25% 3%)}
.pl-premium-avatar-frame.pl-avatar-shape-rounded_hex{--pl-avatar-clip:polygon(31% 2%,69% 2%,74% 4%,79% 9%,85% 20%,92% 40%,94% 50%,92% 60%,85% 80%,79% 91%,74% 96%,69% 98%,31% 98%,26% 96%,21% 91%,15% 80%,8% 60%,6% 50%,8% 40%,15% 20%,21% 9%,26% 4%)}
.pl-premium-avatar-frame.pl-avatar-shape-pixel_hex{--pl-avatar-clip:polygon(22% 4%,68% 0%,91% 18%,100% 65%,82% 90%,58% 100%,10% 88%,0% 40%)}

.pl-premium-avatar-frame::before,
.pl-premium-avatar-frame::after{
  content:"";position:absolute;pointer-events:none;clip-path:var(--pl-avatar-clip);-webkit-clip-path:var(--pl-avatar-clip);
}
.pl-premium-avatar-frame::before{
  inset:-7px;z-index:1;
  background:conic-gradient(from var(--pl-frame-angle),var(--pl-frame-c1),var(--pl-frame-c2),var(--pl-frame-c3),var(--pl-frame-c4),var(--pl-frame-c1));
  background-size:180% 180%;background-position:50% 50%;
  box-shadow:0 4px 18px rgba(14,18,30,.16);
}
.pl-premium-avatar-frame.pl-frame-preset-minimal::before{inset:-4px;background:var(--pl-frame-c1)}
.pl-premium-avatar-frame.pl-frame-preset-none::before,
.pl-premium-avatar-frame.pl-frame-preset-none::after{display:none}
.pl-premium-avatar-frame.pl-frame-glow::after{
  inset:-10px;z-index:0;opacity:.55;filter:blur(12px);
  background:conic-gradient(from var(--pl-frame-angle),var(--pl-frame-c1),var(--pl-frame-c2),var(--pl-frame-c3),var(--pl-frame-c4),var(--pl-frame-c1));
  background-size:180% 180%;background-position:50% 50%;
}
.pl-premium-avatar-frame>.profile-avatar,
.pl-premium-avatar-frame>.pl-frame-preview-avatar,
.pl-premium-avatar-frame>.pl-frame-preview-fallback{
  position:relative;z-index:3;clip-path:var(--pl-avatar-clip);-webkit-clip-path:var(--pl-avatar-clip);border-radius:0!important;
}
.pl-premium-avatar-frame.pl-avatar-shape-circle>.profile-avatar,
.pl-premium-avatar-frame.pl-avatar-shape-circle>.pl-frame-preview-avatar,
.pl-premium-avatar-frame.pl-avatar-shape-circle>.pl-frame-preview-fallback{border-radius:50%!important}
.profile-avatar-wrap.pl-premium-avatar-frame>.profile-avatar{border:3px solid #fff!important;box-shadow:none!important}
body.dark .profile-avatar-wrap.pl-premium-avatar-frame>.profile-avatar{border-color:#181a1f!important}
.profile-avatar-wrap.pl-premium-avatar-frame>.profile-avatar-edit{z-index:15}
.profile-avatar-wrap.pl-premium-avatar-frame>.profile-avatar-online-dot{z-index:16}

/* Compact Premium avatars used in feed, comments, dialogs, guestbook and TV chat.
   The frame is drawn inside the original avatar box to avoid shifting existing layouts. */
.pl-premium-avatar-compact.pl-premium-avatar-frame{
  --pl-compact-gap:2px;
  position:relative!important;display:inline-block;box-sizing:border-box;flex:0 0 auto;
  line-height:0;vertical-align:middle;overflow:visible!important;isolation:isolate;
}
.pl-premium-avatar-compact.pl-premium-avatar-frame::before{inset:0;box-shadow:none}
.pl-premium-avatar-compact.pl-premium-avatar-frame.pl-frame-preset-minimal::before{inset:0}
.pl-premium-avatar-compact.pl-premium-avatar-frame.pl-frame-preset-none{--pl-compact-gap:0px}
.pl-premium-avatar-compact.pl-premium-avatar-frame.pl-frame-glow::after{inset:-2px;opacity:.46;filter:blur(5px)}
.pl-premium-avatar-compact.pl-premium-avatar-frame>img{
  position:relative;z-index:3;display:block!important;
  width:calc(100% - (var(--pl-compact-gap) * 2))!important;
  height:calc(100% - (var(--pl-compact-gap) * 2))!important;
  margin:var(--pl-compact-gap)!important;box-sizing:border-box;object-fit:cover!important;
  clip-path:var(--pl-avatar-clip)!important;-webkit-clip-path:var(--pl-avatar-clip)!important;
  border-radius:0!important;border:0!important;box-shadow:none!important;background:#eceff4;
}
.pl-premium-avatar-compact.pl-avatar-shape-circle>img{border-radius:50%!important}
body.dark .pl-premium-avatar-compact.pl-premium-avatar-frame>img{background:#24272e}

.pl-avatar-context-feed-mobile{width:38px;height:38px;flex-basis:38px!important}
.pl-avatar-context-feed{width:20px;height:20px;flex-basis:20px!important;--pl-compact-gap:1.5px!important}
.pl-avatar-context-chat-list{width:48px;height:48px;flex-basis:48px!important}
.pl-avatar-context-chat-header{width:40px;height:40px;flex-basis:40px!important}
.pl-avatar-context-mini-chat{width:34px;height:34px;flex-basis:34px!important}
.pl-avatar-context-mini-message{width:26px;height:26px;flex-basis:26px!important;--pl-compact-gap:1.5px!important}
.pl-avatar-context-post-detail{width:40px;height:40px;flex-basis:40px!important}
.pl-avatar-context-comment{width:32px;height:32px;flex-basis:32px!important}
.pl-avatar-context-chat-message{width:31px;height:31px;flex-basis:31px!important;align-self:flex-end;margin-bottom:2px;--pl-compact-gap:1.5px!important}
.pl-avatar-context-guest-message,.pl-avatar-context-tv-message{width:34px;height:34px;flex-basis:34px!important}

/* HOTFIX 2.2.5 — non-Premium peer avatars must keep compact message sizes.
   Premium avatars are wrapped and already sized by context classes; ordinary avatars
   stay as plain <img>, so these two classes need explicit dimensions too. */
.chat-message-row > img.chat-peer-message-avatar{
  width:31px!important;height:31px!important;min-width:31px!important;max-width:31px!important;
  flex:0 0 31px!important;display:block!important;object-fit:cover!important;
  border-radius:50%!important;align-self:flex-end;margin:0 0 2px 0!important;
  cursor:pointer;box-sizing:border-box;
}
.mini-chat-row > img.mini-chat-peer-avatar{
  width:26px!important;height:26px!important;min-width:26px!important;max-width:26px!important;
  flex:0 0 26px!important;display:block!important;object-fit:cover!important;
  border-radius:50%!important;margin:0!important;box-sizing:border-box;
}
.pl-premium-avatar-compact.pl-frame-offscreen::before,
.pl-premium-avatar-compact.pl-frame-offscreen::after{animation-play-state:paused!important}

/* Existing direct-child rules no longer match when a Premium wrapper is present. */
.comment-item>.pl-premium-avatar-compact{flex-shrink:0;cursor:pointer}
.post-detail-header>.pl-premium-avatar-compact,.chat-header>.pl-premium-avatar-compact{cursor:pointer}
.msg-item>.pl-premium-avatar-compact{flex-shrink:0}
.feed-mobile-author>.pl-premium-avatar-compact,.post-author>.pl-premium-avatar-compact{flex-shrink:0}
.guest-message-row>.pl-premium-avatar-compact{flex-shrink:0;cursor:pointer}

.pl-premium-avatar-frame.pl-frame-mode-animated.pl-frame-anim-flow::before,
.pl-premium-avatar-frame.pl-frame-mode-animated.pl-frame-anim-flow::after{animation:plFrameFlow var(--pl-frame-speed) linear infinite!important}
.pl-premium-avatar-frame.pl-frame-mode-animated.pl-frame-anim-rotate::before,
.pl-premium-avatar-frame.pl-frame-mode-animated.pl-frame-anim-rotate::after{animation:plFrameRotate var(--pl-frame-speed) linear infinite!important}
.pl-premium-avatar-frame.pl-frame-mode-animated.pl-frame-anim-pulse::before{animation:plFramePulse var(--pl-frame-speed) ease-in-out infinite!important}
.pl-premium-avatar-frame.pl-frame-mode-animated.pl-frame-anim-pulse::after{animation:plFramePulse var(--pl-frame-speed) ease-in-out infinite reverse!important}
.pl-premium-avatar-frame.pl-frame-mode-animated.pl-frame-anim-shimmer::before,
.pl-premium-avatar-frame.pl-frame-mode-animated.pl-frame-anim-shimmer::after{background:linear-gradient(120deg,var(--pl-frame-c1),var(--pl-frame-c2),var(--pl-frame-c3),var(--pl-frame-c4),var(--pl-frame-c1));background-size:320% 320%;animation:plFrameShimmer var(--pl-frame-speed) linear infinite!important}
/* Animate both the registered angle and background-position. Background movement is a visible
   fallback on browsers that do not interpolate registered custom properties reliably. */
@keyframes plFrameFlow{0%{--pl-frame-angle:0deg;background-position:50% 0%}25%{background-position:100% 50%}50%{--pl-frame-angle:180deg;background-position:50% 100%}75%{background-position:0% 50%}100%{--pl-frame-angle:360deg;background-position:50% 0%}}
@keyframes plFrameRotate{0%{--pl-frame-angle:360deg;background-position:0% 50%}25%{background-position:50% 100%}50%{--pl-frame-angle:180deg;background-position:100% 50%}75%{background-position:50% 0%}100%{--pl-frame-angle:0deg;background-position:0% 50%}}
@keyframes plFramePulse{0%,100%{opacity:.62;filter:saturate(1) brightness(.96)}50%{opacity:1;filter:saturate(1.55) brightness(1.22)}}
@keyframes plFrameShimmer{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

/* Premium frame customizer */
.pl-frame-customizer{overflow:hidden;margin-top:30px;background:var(--card-bg,#fff);border:1px solid rgba(145,150,160,.18);border-radius:22px;padding:20px;box-shadow:0 8px 25px rgba(28,31,40,.04)}
.pl-frame-customizer-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:14px}
.pl-frame-customizer-head h3{margin:0 0 5px;font-size:18px}.pl-frame-customizer-head p{margin:0;color:#858b95;font-size:12px;line-height:1.45;max-width:680px}
.pl-frame-new-badge{flex:0 0 auto;border-radius:999px;padding:6px 9px;background:linear-gradient(135deg,#7655ff,#ff2f97);color:#fff;font-size:10px;font-weight:900;letter-spacing:.04em}
.pl-frame-customizer-layout{display:grid;grid-template-columns:190px minmax(0,1fr);gap:18px;align-items:start}
.pl-frame-preview-panel{display:grid;place-items:center;min-height:210px;padding:18px;border-radius:20px;background:radial-gradient(circle at 50% 45%,rgba(119,87,255,.18),transparent 52%),linear-gradient(145deg,rgba(127,132,142,.08),rgba(127,132,142,.03));border:1px solid rgba(127,132,142,.12)}
.pl-frame-preview{width:126px;height:126px;display:grid;place-items:center}
.pl-frame-preview-avatar,.pl-frame-preview-fallback{width:126px;height:126px;box-sizing:border-box;border:5px solid var(--card-bg,#fff);object-fit:cover;background:#eceff4}
.pl-frame-preview-fallback{display:grid;place-items:center;font-size:34px;font-weight:900;background:linear-gradient(145deg,#ff5a76,#7655ff);color:#fff}
.pl-frame-preview-caption{margin-top:16px;text-align:center}.pl-frame-preview-caption b{display:block;font-size:13px}.pl-frame-preview-caption span{display:block;color:#8b9099;font-size:10px;margin-top:4px}
.pl-frame-controls{display:grid;gap:12px}.pl-frame-control-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pl-frame-field{display:grid;gap:6px}.pl-frame-field>span{font-size:11px;font-weight:850;color:#858b95}.pl-frame-field select,.pl-frame-field input[type="range"]{width:100%}.pl-frame-field select{height:44px;border:1px solid rgba(145,150,160,.28);border-radius:12px;background:var(--card-bg,#fff);color:inherit;padding:0 12px;box-sizing:border-box}
.pl-frame-color-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.pl-frame-color{display:grid;gap:5px}.pl-frame-color span{font-size:10px;color:#8a9099;font-weight:800}.pl-frame-color input{width:100%;height:42px;border:1px solid rgba(145,150,160,.24);border-radius:11px;padding:3px;background:transparent;cursor:pointer}
.pl-frame-range-row{display:flex;align-items:center;gap:10px}.pl-frame-range-row input{flex:1}.pl-frame-speed-value{min-width:40px;text-align:center;font-size:11px;font-weight:900}
.pl-frame-toggle{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:800;cursor:pointer}.pl-frame-toggle input{width:18px;height:18px;accent-color:#ff2442}
.pl-frame-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.pl-frame-save{height:44px;border:0;border-radius:12px;padding:0 17px;background:#ff2442;color:#fff;font-weight:900;cursor:pointer}.pl-frame-save:disabled{opacity:.6;cursor:default}.pl-frame-hint{font-size:10px;color:#8a9099;line-height:1.4}
body.dark .pl-frame-customizer{background:#1b1c21;border-color:#2d2f35;box-shadow:none}body.dark .pl-frame-preview-avatar{border-color:#181a1f}.dark .pl-frame-field select{background:#1e2127;border-color:#343943}.dark .pl-frame-color input{border-color:#343943}
@media(max-width:760px){.pl-frame-customizer{padding:15px;margin-top:24px}.pl-frame-customizer-layout{grid-template-columns:1fr}.pl-frame-preview-panel{min-height:180px}.pl-frame-control-grid{grid-template-columns:1fr}.pl-frame-color-row{grid-template-columns:repeat(2,minmax(0,1fr))}}