/* ============================================================
   ZAKERLI — مظهر الأصدقاء (إطارات الصور)
   الإطار بيتلبس على أي عنصر دايري (.msg-avatar في الشات، وصور المعاينة في المتجر)
   بكلاس زي: zframe zframe-gold
   ============================================================ */
.zframe{ border-radius:50%; }
.zframe-gold  { box-shadow:0 0 0 2px #D4AF37, 0 0 12px rgba(212,175,55,.65); }
.zframe-mint  { box-shadow:0 0 0 2px #4EBE96, 0 0 12px rgba(78,190,150,.6); }
.zframe-blue  { box-shadow:0 0 0 2px #5B8DEF, 0 0 12px rgba(91,141,239,.6); }
.zframe-rose  { box-shadow:0 0 0 2px #E86A6A, 0 0 12px rgba(232,106,106,.6); }
.zframe-violet{ box-shadow:0 0 0 2px #B98CE0, 0 0 4px #B98CE0, 0 0 14px rgba(185,140,224,.7); }
.zframe-ice   { box-shadow:0 0 0 2px #22D3EE, 0 0 0 4px rgba(34,211,238,.25), 0 0 14px rgba(34,211,238,.6); }
.zframe-fire  { box-shadow:0 0 0 2px #F59E42, 0 0 0 4px rgba(232,106,106,.35), 0 0 16px rgba(245,158,66,.8); animation:zframe-fire 1.8s ease-in-out infinite alternate; }
@keyframes zframe-fire{ from{ box-shadow:0 0 0 2px #F59E42, 0 0 0 4px rgba(232,106,106,.3), 0 0 10px rgba(245,158,66,.6); } to{ box-shadow:0 0 0 2px #F59E42, 0 0 0 4px rgba(232,106,106,.5), 0 0 20px rgba(245,158,66,.95); } }
/* إطار الإدارة: حلقة ذهبية مزدوجة بنبض هادي */
.zframe-admin{ box-shadow:0 0 0 2px #FFF1B8, 0 0 0 4px #D4AF37, 0 0 0 6px rgba(255,46,99,.55), 0 0 18px rgba(255,215,0,.85); animation:zframe-admin 2.2s ease-in-out infinite alternate; }
@keyframes zframe-admin{ from{ box-shadow:0 0 0 2px #FFF1B8, 0 0 0 4px #D4AF37, 0 0 0 6px rgba(255,46,99,.4), 0 0 10px rgba(255,215,0,.6); } to{ box-shadow:0 0 0 2px #FFF1B8, 0 0 0 4px #D4AF37, 0 0 0 6px rgba(255,46,99,.75), 0 0 24px rgba(255,215,0,1); } }
@media (prefers-reduced-motion: reduce){ .zframe-fire, .zframe-admin{ animation:none; } }

/* ============================================================
   إطارات جديدة للمتجر (كل قيمة لازم تطابق عمود value في shop_items)
   ============================================================ */
.zframe-sakura { box-shadow:0 0 0 2px #F4A6C8, 0 0 0 4px rgba(244,166,200,.28), 0 0 14px rgba(244,166,200,.65); }
.zframe-emerald{ box-shadow:0 0 0 2px #10B981, 0 0 0 4px rgba(16,185,129,.28), 0 0 14px rgba(16,185,129,.65); }
.zframe-silver { box-shadow:0 0 0 2px #E5E7EB, 0 0 0 4px #6B7280, 0 0 12px rgba(229,231,235,.5); }
.zframe-crimson{ box-shadow:0 0 0 2px #DC2626, 0 0 0 4px rgba(220,38,38,.3), 0 0 14px rgba(220,38,38,.7); animation:zframe-crimson 1.6s ease-in-out infinite alternate; }
@keyframes zframe-crimson{ from{ box-shadow:0 0 0 2px #DC2626, 0 0 0 4px rgba(220,38,38,.25), 0 0 8px rgba(220,38,38,.5); } to{ box-shadow:0 0 0 2px #DC2626, 0 0 0 4px rgba(220,38,38,.45), 0 0 18px rgba(220,38,38,.95); } }
/* ملكي: حلقة بنفسجي + حلقة دهبي */
.zframe-royal  { box-shadow:0 0 0 2px #7C3AED, 0 0 0 4px #D4AF37, 0 0 16px rgba(124,58,237,.6); }
/* نيون: سماوي + فوشيا بنبض */
.zframe-neon   { box-shadow:0 0 0 2px #22D3EE, 0 0 0 4px #E879F9, 0 0 16px rgba(34,211,238,.7); animation:zframe-neon 1.4s ease-in-out infinite alternate; }
@keyframes zframe-neon{ from{ box-shadow:0 0 0 2px #22D3EE, 0 0 0 4px #E879F9, 0 0 8px rgba(34,211,238,.5); } to{ box-shadow:0 0 0 2px #22D3EE, 0 0 0 4px #E879F9, 0 0 22px rgba(232,121,249,.95); } }
/* ألماس: حلقتين فاتحين بلمعة */
.zframe-diamond{ box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #9BE7FF, 0 0 14px rgba(155,231,255,.8); animation:zframe-diamond 2.4s ease-in-out infinite alternate; }
@keyframes zframe-diamond{ from{ box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #9BE7FF, 0 0 8px rgba(155,231,255,.5); } to{ box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #C4B5FD, 0 0 22px rgba(196,181,253,.95); } }
/* قوس قزح: لون الحلقة بيتنقل بين ٥ ألوان */
.zframe-rainbow{ box-shadow:0 0 0 2px #EF4444, 0 0 0 4px rgba(239,68,68,.3), 0 0 14px rgba(239,68,68,.7); animation:zframe-rainbow 5s linear infinite; }
@keyframes zframe-rainbow{
  0%,100%{ box-shadow:0 0 0 2px #EF4444, 0 0 0 4px rgba(239,68,68,.3), 0 0 14px rgba(239,68,68,.7); }
  20%{ box-shadow:0 0 0 2px #F59E0B, 0 0 0 4px rgba(245,158,11,.3), 0 0 14px rgba(245,158,11,.7); }
  40%{ box-shadow:0 0 0 2px #10B981, 0 0 0 4px rgba(16,185,129,.3), 0 0 14px rgba(16,185,129,.7); }
  60%{ box-shadow:0 0 0 2px #3B82F6, 0 0 0 4px rgba(59,130,246,.3), 0 0 14px rgba(59,130,246,.7); }
  80%{ box-shadow:0 0 0 2px #A855F7, 0 0 0 4px rgba(168,85,247,.3), 0 0 14px rgba(168,85,247,.7); }
}
@media (prefers-reduced-motion: reduce){ .zframe-crimson, .zframe-neon, .zframe-diamond, .zframe-rainbow{ animation:none; } }

/* ============================================================
   الدفعة التانية: إطارات متحركة (بتستخدم متغير لون بيتحرك)
   --zc بيتسجّل كـ <color> عشان المتصفح يعمل انتقال ناعم بين الألوان.
   لو المتصفح قديم ومش بيدعم @property بيتحرك بخطوات بدل ما يبوظ.
   ============================================================ */
@property --zc{ syntax:'<color>'; inherits:false; initial-value:#D4AF37; }
:is(.zframe-aurora,.zframe-inferno,.zframe-galaxy,.zframe-phoenix,.zframe-glacier,.zframe-thunder,.zframe-plasma,.zframe-overlord,.zframe-sunset,.zframe-candy){
  --zc:#D4AF37;
}
/* --- إطارات الأدمن المتحركة --- */
.zframe-aurora  { box-shadow:0 0 0 2px var(--zc), 0 0 0 4px color-mix(in srgb, var(--zc) 35%, transparent), 0 0 16px var(--zc); animation:zc-aurora 6s linear infinite; }
@keyframes zc-aurora{ 0%,100%{--zc:#2DD4BF;} 25%{--zc:#34D399;} 50%{--zc:#A78BFA;} 75%{--zc:#F472B6;} }
.zframe-inferno { box-shadow:0 0 0 2px var(--zc), 0 0 0 4px color-mix(in srgb, var(--zc) 40%, transparent), 0 0 24px var(--zc); animation:zc-inferno 1.1s ease-in-out infinite alternate; }
@keyframes zc-inferno{ from{--zc:#F59E0B;} to{--zc:#EF4444;} }
.zframe-galaxy  { box-shadow:0 0 0 2px var(--zc), 0 0 0 4px color-mix(in srgb, var(--zc) 40%, transparent), 0 0 0 7px color-mix(in srgb, var(--zc) 15%, transparent), 0 0 20px var(--zc); animation:zc-galaxy 7s linear infinite; }
@keyframes zc-galaxy{ 0%,100%{--zc:#6366F1;} 25%{--zc:#A855F7;} 50%{--zc:#EC4899;} 75%{--zc:#3B82F6;} }
.zframe-phoenix { box-shadow:0 0 0 2px var(--zc), 0 0 0 4px color-mix(in srgb, var(--zc) 40%, transparent), 0 0 22px var(--zc); animation:zc-phoenix 3s ease-in-out infinite; }
@keyframes zc-phoenix{ 0%,100%{--zc:#FDE047;} 50%{--zc:#F97316;} 75%{--zc:#DC2626;} }
.zframe-glacier { box-shadow:0 0 0 2px var(--zc), 0 0 0 4px rgba(103,232,249,.35), 0 0 18px var(--zc); animation:zc-glacier 3s ease-in-out infinite alternate; }
@keyframes zc-glacier{ from{--zc:#FFFFFF;} to{--zc:#67E8F9;} }
.zframe-thunder { box-shadow:0 0 0 2px var(--zc), 0 0 0 4px color-mix(in srgb, var(--zc) 35%, transparent), 0 0 16px var(--zc); animation:zc-thunder 2.2s steps(1,end) infinite; }
@keyframes zc-thunder{ 0%,80%,100%{--zc:#CA8A04;} 84%{--zc:#FFFFFF;} 88%{--zc:#FACC15;} 92%{--zc:#FFFFFF;} }
.zframe-plasma  { box-shadow:0 0 0 2px var(--zc), 0 0 0 4px color-mix(in srgb, var(--zc) 40%, transparent), 0 0 20px var(--zc); animation:zc-plasma 1.6s ease-in-out infinite alternate; }
@keyframes zc-plasma{ from{--zc:#22C55E;} to{--zc:#D946EF;} }
.zframe-overlord{ box-shadow:0 0 0 2px #FFF1B8, 0 0 0 4px var(--zc), 0 0 0 7px color-mix(in srgb, var(--zc) 40%, transparent), 0 0 28px var(--zc); animation:zc-overlord 2.4s ease-in-out infinite alternate; }
@keyframes zc-overlord{ from{--zc:#D4AF37;} to{--zc:#FF2E63;} }
/* --- إطارات متحركة للبيع --- */
.zframe-sunset  { box-shadow:0 0 0 2px var(--zc), 0 0 0 4px color-mix(in srgb, var(--zc) 35%, transparent), 0 0 14px var(--zc); animation:zc-sunset 3s ease-in-out infinite alternate; }
@keyframes zc-sunset{ from{--zc:#F97316;} to{--zc:#EC4899;} }
.zframe-candy   { box-shadow:0 0 0 2px var(--zc), 0 0 0 4px color-mix(in srgb, var(--zc) 35%, transparent), 0 0 14px var(--zc); animation:zc-candy 2.5s ease-in-out infinite alternate; }
@keyframes zc-candy{ from{--zc:#F9A8D4;} to{--zc:#7DD3FC;} }
/* --- إطارات ثابتة جديدة --- */
.zframe-ocean   { box-shadow:0 0 0 2px #0EA5E9, 0 0 0 4px #1E3A8A, 0 0 12px rgba(14,165,233,.55); }
.zframe-forest  { box-shadow:0 0 0 2px #22C55E, 0 0 0 4px #14532D, 0 0 12px rgba(34,197,94,.5); }
.zframe-copper  { box-shadow:0 0 0 2px #C2743F, 0 0 0 4px #7C3F1A, 0 0 10px rgba(194,116,63,.55); }
.zframe-amethyst{ box-shadow:0 0 0 2px #A855F7, 0 0 0 4px rgba(168,85,247,.3), 0 0 16px rgba(168,85,247,.75); }
.zframe-midnight{ box-shadow:0 0 0 2px #818CF8, 0 0 0 4px #1E1B4B, 0 0 16px rgba(129,140,248,.6); }
.zframe-platinum{ box-shadow:0 0 0 2px #F3F4F6, 0 0 0 4px #94A3B8, 0 0 14px rgba(243,244,246,.55); }
@media (prefers-reduced-motion: reduce){
  :is(.zframe-aurora,.zframe-inferno,.zframe-galaxy,.zframe-phoenix,.zframe-glacier,.zframe-thunder,.zframe-plasma,.zframe-overlord,.zframe-sunset,.zframe-candy){ animation:none; }
}

/* ============================================================
   أسماء متحركة (value حروف صغيرة بدل hex، بيتحمّل كلاس zname-<value>)
   ============================================================ */
.zname{ display:inline-block; max-width:100%; background-size:200% auto; -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; filter:drop-shadow(0 1px 1px rgba(0,0,0,.3)); animation:zname-flow 4s linear infinite; }
@keyframes zname-flow{ to{ background-position:200% center; } }
/* جوه الشات: بلاش الاسم يتمدد بعرض الفقاعة كلها (الأدمن كان flex) */
.msg-row .msg-name.zname, .msg-row.admin-msg .msg-name.zname{ display:inline-flex; width:fit-content; max-width:100%; }
.zname.zname-goldshine{ background-image:linear-gradient(90deg,#B8860B,#FFF1B8,#D4AF37,#FFF1B8,#B8860B); }
.zname.zname-rainbow  { background-image:linear-gradient(90deg,#EF4444,#F59E0B,#FACC15,#22C55E,#3B82F6,#A855F7,#EF4444); animation-duration:5s; }
.zname.zname-lava     { background-image:linear-gradient(90deg,#DC2626,#F97316,#FACC15,#F97316,#DC2626); animation-duration:3s; }
.zname.zname-frost    { background-image:linear-gradient(90deg,#22D3EE,#E0F2FE,#818CF8,#E0F2FE,#22D3EE); }
.zname.zname-galaxy   { background-image:linear-gradient(90deg,#6366F1,#A855F7,#EC4899,#3B82F6,#6366F1); animation-duration:6s; }
.zname.zname-sunrise  { background-image:linear-gradient(90deg,#F59E0B,#FB7185,#F472B6,#F59E0B); }
.zname.zname-oceanwave{ background-image:linear-gradient(90deg,#06B6D4,#3B82F6,#8B5CF6,#06B6D4); }
.zname.zname-neonglow { background:none; -webkit-text-fill-color:#22D3EE; color:#22D3EE; filter:none; animation:zname-neon 1.5s ease-in-out infinite alternate; }
@keyframes zname-neon{ from{ text-shadow:0 0 3px rgba(34,211,238,.5); } to{ text-shadow:0 0 6px #22D3EE, 0 0 14px rgba(34,211,238,.9); } }
@media (prefers-reduced-motion: reduce){ .zname{ animation:none; } }