/* v169 · Hartly System — حساب رسمی */
/* ردیف در صندوق پیام */
.ls164.sy169w{ background:linear-gradient(120deg,#FFF1F7,#F4EEFF 55%,#EDF3FF); box-shadow:0 10px 26px -14px rgba(139,92,246,.5), inset 0 0 0 1.5px #E9DDFF; margin-bottom:12px }
.sy169r .sy169av{ position:relative; flex:none; width:52px; height:52px; border-radius:17px; box-shadow:0 8px 18px -6px rgba(139,92,246,.55) }
.sy169r .sy169av svg{ width:100%; height:100% }
.sy169r .sy169av::after{ content:""; position:absolute; inset:-3px; border-radius:20px; border:2px solid rgba(255,61,127,.35); animation:sy169p 2.6s ease-out infinite }
@keyframes sy169p{ from{ transform:scale(.92); opacity:1 } to{ transform:scale(1.18); opacity:0 } }
.sy169tk{ display:inline-grid; flex:none; width:16px; height:16px } .sy169tk svg{ width:100%; height:100% }
.sy169of{ flex:none; padding:1px 7px; border-radius:6px; font-size:9.5px; font-weight:900; letter-spacing:.3px; color:#fff; background:linear-gradient(90deg,#FF3D7F,#8B5CF6) }

/* صفحهٔ گفتگوی رسمی */
#sy169{ position:fixed; inset:0; z-index:8500; display:flex; justify-content:center; background:rgba(20,10,40,0); transition:background .25s; font-family:inherit; color:#1F1433 }
#sy169.on{ background:rgba(20,10,40,.35) }
#sy169 button{ font-family:inherit; color:inherit }
#sy169 svg{ display:block }
.sy169c{ position:relative; width:100%; max-width:520px; height:100%; display:flex; flex-direction:column; overflow:hidden; transform:translateX(100%); transition:transform .3s cubic-bezier(.2,.9,.3,1);
  background:radial-gradient(60% 40% at 100% 0%, rgba(255,61,127,.12), transparent 70%), radial-gradient(55% 45% at 0% 40%, rgba(139,92,246,.13), transparent 70%), radial-gradient(60% 40% at 100% 100%, rgba(59,130,246,.12), transparent 70%), #FAF8FD }
[dir=rtl] .sy169c{ transform:translateX(-100%) }
#sy169.on .sy169c{ transform:none }
.sy169h{ flex:none; display:flex; align-items:center; gap:10px; margin:10px 10px 0; padding:8px 10px; border-radius:22px; background:rgba(255,255,255,.85); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:0 10px 26px -14px rgba(76,29,149,.35), inset 0 0 0 1px #EEE8F8; padding-top:max(8px, env(safe-area-inset-top)) }
.sy169b{ flex:none; width:38px; height:38px; border:0; border-radius:13px; background:none; cursor:pointer; display:grid; place-items:center; color:#5B5270 !important }
.sy169b svg{ width:22px; height:22px } [dir=rtl] .sy169b svg{ transform:scaleX(-1) }
.sy169hav{ position:relative; flex:none; width:44px; height:44px; border-radius:15px }
.sy169hav svg{ width:100%; height:100% }
.sy169hav i{ position:absolute; bottom:-2px; inset-inline-end:-2px; width:13px; height:13px; border-radius:50%; background:#22C55E; border:2.5px solid #fff }
.sy169ht{ display:flex; flex-direction:column; min-width:0 }
.sy169ht b{ display:flex; align-items:center; gap:4px; font-size:16px; font-weight:900 }
.sy169ht small{ font-size:11.5px; font-weight:700; color:#8A82A0 }
.sy169f{ flex:none; display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; padding:10px 12px 4px }
.sy169f::-webkit-scrollbar{ display:none }
.sy169f button{ flex:none; height:34px; padding:0 14px; border:0; border-radius:99px; cursor:pointer; font-size:12.5px; font-weight:900; color:#8A82A0 !important; background:#fff; box-shadow:inset 0 0 0 1.5px #EEE8F8 }
.sy169f button i{ font-style:normal; opacity:.7 }
.sy169f button.on{ color:#fff !important; background:linear-gradient(100deg,#FF3D7F,#8B5CF6); box-shadow:0 6px 14px -4px rgba(139,92,246,.45) }
.sy169l{ flex:1; min-height:0; overflow-y:auto; padding:6px 12px 14px; display:flex; flex-direction:column; gap:10px; scrollbar-width:none }
.sy169l::-webkit-scrollbar{ display:none }
.sy169ld{ margin:auto; display:flex; gap:6px } .sy169ld i{ width:10px; height:10px; border-radius:50%; background:linear-gradient(135deg,#FF3D7F,#8B5CF6); animation:sy169ld 1s infinite }
.sy169ld i:nth-child(2){ animation-delay:.15s } .sy169ld i:nth-child(3){ animation-delay:.3s }
@keyframes sy169ld{ 50%{ transform:scale(.5); opacity:.4 } }
.sy169d{ display:flex; justify-content:center; margin-top:6px }
.sy169d span{ padding:4px 12px; border-radius:99px; font-size:11px; font-weight:800; color:#8A82A0; background:rgba(255,255,255,.85); box-shadow:0 2px 8px rgba(76,29,149,.08) }
.sy169m{ display:flex; align-items:flex-start; gap:10px; max-width:94%; animation:sy169in .35s cubic-bezier(.2,.9,.3,1.1) both }
@keyframes sy169in{ from{ transform:translateY(10px); opacity:0 } }
.sy169ic{ position:relative; flex:none; width:44px; height:44px; border-radius:15px; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,var(--c1),var(--c2)); box-shadow:0 8px 16px -6px color-mix(in srgb,var(--c1) 60%,transparent) }
.sy169ic > svg{ width:22px; height:22px } .sy169ic > img:not(.sy169fp){ width:34px; height:34px; object-fit:contain }
.sy169fp{ position:absolute; bottom:-5px; inset-inline-end:-5px; width:22px; height:22px; border-radius:50%; object-fit:cover; border:2px solid #fff }
.sy169bx{ position:relative; min-width:0; flex:1; padding:11px 13px 8px; border-radius:6px 20px 20px 20px; background:#fff; box-shadow:0 6px 18px -10px rgba(76,29,149,.35), inset 0 0 0 1px #F0EAF9; overflow:hidden }
[dir=rtl] .sy169bx{ border-radius:20px 6px 20px 20px }
.sy169bx::before{ content:""; position:absolute; top:0; inset-inline-start:0; bottom:0; width:3px; background:linear-gradient(180deg,var(--c1),var(--c2)) }
.sy169bx > b{ display:block; font-size:14px; font-weight:900; margin-bottom:2px }
.sy169bx > p{ margin:0; font-size:13px; font-weight:600; line-height:1.65; color:#4B4460; white-space:pre-wrap; word-break:break-word }
.sy169bx > small{ display:block; margin-top:4px; text-align:end; font-size:10.5px; font-weight:700; color:#A39BB8 }
.sy169v{ display:inline-flex; align-items:center; gap:5px; margin-top:8px; padding:4px 11px 4px 6px; border-radius:99px; font-size:13px; font-weight:900; color:#1F1433;
  background:linear-gradient(90deg,color-mix(in srgb,var(--c1) 14%,#fff),color-mix(in srgb,var(--c2) 14%,#fff)) }
.sy169v i{ width:18px; height:18px; display:grid; place-items:center } .sy169v i svg{ width:16px; height:16px } .sy169v i.coin{ color:#F59E0B }
.sy169a{ display:flex; gap:6px; margin-top:9px }
.sy169a button{ display:inline-flex; align-items:center; gap:4px; height:32px; padding:0 12px; border:0; border-radius:11px; cursor:pointer; font-size:12px; font-weight:900; color:#fff !important;
  background:linear-gradient(100deg,var(--c1),var(--c2)) }
.sy169a button svg{ width:14px; height:14px } [dir=rtl] .sy169a button svg{ transform:scaleX(-1) }
.sy169m.bc .sy169bx{ background:linear-gradient(135deg,#FFFFFF,#F7F2FF) }
.sy169e{ margin:auto; display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center }
.sy169e svg{ width:64px; height:64px; margin-bottom:6px; filter:drop-shadow(0 10px 20px rgba(139,92,246,.35)) }
.sy169e b{ font-size:16px; font-weight:900 } .sy169e small{ font-size:12.5px; font-weight:600; color:#8A82A0 }
.sy169ft{ flex:none; display:flex; align-items:center; gap:8px; margin:0 12px calc(12px + env(safe-area-inset-bottom)); padding:10px 14px; border-radius:18px; font-size:11.5px; font-weight:700; line-height:1.6; color:#6D28D9; background:#F3EEFF }
.sy169ft svg{ flex:none; width:18px; height:18px; color:#10B981 }
@media (prefers-reduced-motion:reduce){ .sy169r .sy169av::after, .sy169m, .sy169c{ animation:none !important; transition:none !important } }