/* v164 · پیام‌ها (Inbox) — رنگ‌های کاوش: صورتی #FF3D7F، بنفش #8B5CF6، آبی #3B82F6 */
#s-chat.ib164on{ padding-left:0 !important; padding-right:0 !important }
#s-chat.ib164on > *:not(#ib164host){ display:none !important }

.ib164{ --ink:#1F1433; --sub:#8A82A0; --pk:#FF3D7F; --vi:#8B5CF6; --bl:#3B82F6; --line:#EEE8F8;
  color:var(--ink); max-width:640px; margin:0 auto; padding:4px 14px calc(96px + env(safe-area-inset-bottom)) }
.ib164 button{ font-family:inherit; color:inherit }
.ib164 svg, .sh164 svg{ display:block }

/* ═══ نوار بالا ═══ */
.tp164{ display:flex; align-items:center; gap:10px; margin:4px 0 12px }
.sg164{ flex:1; display:flex; padding:4px; border-radius:18px; background:#F2EFF7; box-shadow:inset 0 0 0 1px var(--line) }
.sg164 button{ position:relative; flex:1; height:40px; border:0; border-radius:14px; background:none; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:7px;
  font-size:14px; font-weight:900; color:var(--sub) !important; transition:.25s }
.sg164 button svg{ width:17px; height:17px }
.sg164 button.on{ color:#fff !important; background:linear-gradient(100deg,#8B5CF6,#3B82F6); box-shadow:0 6px 16px rgba(99,102,241,.35) }
.ub164{ min-width:20px; height:20px; padding:0 5px; border-radius:10px; display:grid; place-items:center; font-size:10.5px; font-weight:900; color:#8B5CF6; background:#fff }
.nw164{ position:relative; flex:none; width:48px; height:48px; border:0; border-radius:16px; cursor:pointer; display:grid; place-items:center; color:#fff !important;
  background:linear-gradient(135deg,#FF3D7F,#8B5CF6); box-shadow:0 8px 20px rgba(139,92,246,.35) }
.nw164 svg{ width:21px; height:21px }
.nw164::after{ content:""; position:absolute; inset:-3px; border-radius:19px; border:2px solid rgba(255,61,127,.35); animation:rg164 2.4s ease-out infinite }
@keyframes rg164{ 0%{ transform:scale(.9); opacity:1 } 100%{ transform:scale(1.22); opacity:0 } }

/* جستجو */
.sr164{ display:flex; align-items:center; gap:8px; height:46px; padding:0 14px; border-radius:16px; background:#fff; cursor:text;
  box-shadow:0 6px 18px rgba(76,29,149,.08), inset 0 0 0 1.5px var(--line); transition:box-shadow .2s }
.sr164:focus-within{ box-shadow:0 8px 22px rgba(139,92,246,.18), inset 0 0 0 2px #C4B5FD }
.sr164 > svg{ flex:none; width:19px; height:19px; color:#A39BB8 }
.sr164 input{ flex:1; min-width:0; border:0; outline:0; background:none; font-family:inherit; font-size:14px; font-weight:700; color:var(--ink) }
.sr164 input::-webkit-search-cancel-button{ display:none }
.sx164{ display:none; width:26px; height:26px; border:0; border-radius:50%; place-items:center; background:#F2EFF7; cursor:pointer; color:var(--sub) !important }
.sx164 svg{ width:13px; height:13px }
.sr164.has .sx164{ display:grid }

/* ═══ نبض صندوق ═══ */
.pc164{ position:relative; overflow:hidden; isolation:isolate; display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:12px; padding:8px; border-radius:22px;
  background:linear-gradient(120deg,#FF3D7F 0%,#A855F7 45%,#6366F1 75%,#3B82F6 100%); box-shadow:0 14px 30px -12px rgba(139,92,246,.55) }
.pc164 > i{ position:absolute; z-index:-1; border-radius:50%; filter:blur(20px); opacity:.55 }
.pc164 .o1{ width:120px; height:120px; background:#FDE68A; top:-60px; inset-inline-end:10%; animation:or164 8s ease-in-out infinite alternate }
.pc164 .o2{ width:110px; height:110px; background:#22D3EE; bottom:-60px; inset-inline-start:5%; animation:or164 10s ease-in-out infinite alternate-reverse }
@keyframes or164{ to{ transform:translate(40px,14px) scale(1.25) } }
.pp164{ display:flex; align-items:center; gap:8px; padding:8px 9px; border:0; border-radius:16px; cursor:pointer; color:#fff !important; text-align:start;
  background:rgba(255,255,255,.16); box-shadow:inset 0 0 0 1px rgba(255,255,255,.25); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); transition:transform .15s }
.pp164:active{ transform:scale(.95) }
.pp164 i{ flex:none; width:30px; height:30px; border-radius:10px; display:grid; place-items:center; background:#fff }
.pp164 i svg{ width:16px; height:16px }
.pp164.un i{ color:#8B5CF6 } .pp164.on i{ color:#10B981 } .pp164.ms i{ color:#F43F5E }
.pp164 b{ font-size:17px; font-weight:900; line-height:1 }
.pp164 small{ display:block; width:100%; font-size:9.5px; font-weight:700; opacity:.92; line-height:1.25 }
.pp164{ flex-wrap:wrap; row-gap:3px }

/* ═══ فعال‌ها ═══ */
.ar164{ display:flex; gap:12px; overflow-x:auto; scrollbar-width:none; margin:14px -14px 0; padding:4px 14px 2px }
.ar164::-webkit-scrollbar{ display:none }
.ai164b{ position:relative; flex:none; width:68px; border:0; background:none; padding:0; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:6px }
.ai164b > b{ max-width:100%; font-size:11.5px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.ad164{ position:absolute; top:44px; inset-inline-end:2px; z-index:3; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; color:#fff;
  background:linear-gradient(135deg,#FF3D7F,#8B5CF6); border:2.5px solid #FAF8FD }
.ad164 svg{ width:11px; height:11px }
.ae164{ align-self:center; margin:0; font-size:12px; font-weight:700; color:var(--sub); white-space:nowrap }

/* آواتار */
.av164{ position:relative; flex:none; width:52px; height:52px; border-radius:50%; display:grid; place-items:center }
.ai164{ position:relative; width:100%; height:100%; border-radius:50%; overflow:hidden; display:grid; place-items:center; background:linear-gradient(135deg,var(--g1),var(--g2)) }
.ai164 img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1 }
.ai164 em{ font-style:normal; font-weight:900; font-size:19px; color:#fff }
.av164.lg{ width:62px; height:62px } .av164.lg .ai164 em{ font-size:22px }
.av164.st{ padding:3.5px; background:conic-gradient(from var(--sr,0deg),#FF3D7F,#F59E0B,#8B5CF6,#3B82F6,#FF3D7F); animation:sr164 3s linear infinite }
.av164.st .ai164{ box-shadow:0 0 0 2.5px #FAF8FD }
@property --sr{ syntax:"<angle>"; inherits:false; initial-value:0deg }
@keyframes sr164{ to{ --sr:360deg } }
.on164{ position:absolute; z-index:2; bottom:1px; inset-inline-end:1px; width:14px; height:14px; border-radius:50%; background:#22C55E; border:2.5px solid #fff }
.av164.lg .on164{ bottom:3px; inset-inline-end:3px }
.tk164{ display:inline-grid; flex:none; width:16px; height:16px } .tk164 svg{ width:100%; height:100% }

/* ═══ تب‌ها ═══ */
.tb164{ position:sticky; top:0; z-index:5; display:flex; gap:7px; overflow-x:auto; scrollbar-width:none; margin:12px -14px 8px; padding:8px 14px;
  background:linear-gradient(180deg,rgba(250,248,253,.97) 70%,rgba(250,248,253,0)); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px) }
.tb164::-webkit-scrollbar{ display:none }
.tb164 button{ flex:none; display:flex; align-items:center; gap:6px; height:38px; padding:0 15px; border:0; border-radius:99px; cursor:pointer;
  font-size:13px; font-weight:900; color:var(--sub) !important; background:#fff; box-shadow:inset 0 0 0 1.5px var(--line); transition:.2s }
.tb164 button i{ min-width:19px; height:19px; padding:0 5px; border-radius:10px; display:grid; place-items:center; font-style:normal; font-size:10.5px; font-weight:900; background:#F2EFF7; color:var(--vi) }
.tb164 button i.hot{ background:linear-gradient(135deg,#FF3D7F,#F97316); color:#fff }
.tb164 button.on{ color:#fff !important; background:linear-gradient(100deg,#8B5CF6,#3B82F6); box-shadow:0 6px 16px rgba(99,102,241,.3) }
.tb164 button.on i{ background:rgba(255,255,255,.25); color:#fff }

/* ═══ فهرست ═══ */
.ttl164{ display:flex; align-items:center; gap:6px; margin:8px 4px 8px; font-size:12.5px; font-weight:900; color:var(--sub) }
.ttl164 svg{ width:15px; height:15px; color:var(--vi) }
.ls164{ display:flex; flex-direction:column; gap:2px; padding:4px; border-radius:22px; background:#fff; box-shadow:0 8px 22px -12px rgba(76,29,149,.25), inset 0 0 0 1px var(--line); margin-bottom:10px }
.ls164.pn{ background:linear-gradient(120deg,#FFF6FA,#F7F3FF 60%,#F1F6FF) }
.rw164{ position:relative; display:flex; align-items:center; gap:12px; padding:10px 8px; border-radius:18px; cursor:pointer; transition:background .15s, transform .15s;
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none }
.rw164:active, .rw164.pr{ background:#F6F2FB } .rw164.pr{ transform:scale(.98) }
.rw164 + .rw164::before{ content:""; position:absolute; top:-1px; inset-inline-start:72px; inset-inline-end:10px; height:1px; background:#F2EEF8 }
.rt164{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px }
.rt164 .r1{ display:flex; align-items:center; gap:4px; min-width:0 }
.rt164 .r1 b{ min-width:0; font-size:14.5px; font-weight:900; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.rt164 .r1 b.red{ color:#F43F5E }
.rt164 .r1 small{ flex:none; margin-inline-start:auto; font-size:11px; font-weight:700; color:var(--sub) }
.rw164.un .r1 small{ color:var(--vi); font-weight:900 }
.fg164{ flex:none; width:15px; height:15px; color:#A39BB8 } .fg164 svg{ width:100%; height:100% }
.fg164.pn{ color:var(--vi); transform:rotate(35deg) }
.rt164 .r2{ display:flex; align-items:center; gap:8px; min-width:0 }
.lm164{ flex:1; min-width:0; display:flex; align-items:center; gap:4px; font-size:12.5px; font-weight:600; color:var(--sub); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.rw164.un .lm164{ color:var(--ink); font-weight:800 }
.mn164{ flex:none; width:16px; height:16px; color:#3B82F6 } .mn164 svg{ width:100%; height:100% }
/*  v465 · تیک واقعی: ✓ رسید و ✓✓ دریافت‌شده خاکستری؛ فقط خوانده‌شده آبی  */
.mn164.sg, .mn164.gr{ color:#A9A1BE }
.mn164.bl{ color:#3B82F6 }
.kd164{ flex:none; width:20px; height:20px; border-radius:7px; display:grid; place-items:center }
.kd164 svg{ width:12px; height:12px }
.kd164.im{ color:#0EA5E9; background:#E0F2FE } .kd164.vo{ color:#8B5CF6; background:#EDE9FE } .kd164.ca{ color:#10B981; background:#D1FAE5 }
.kd164.ms{ color:#F43F5E; background:#FFE4E6 } .kd164.lv{ color:#F97316; background:#FFEDD5 } .kd164.nw{ color:#F59E0B; background:#FEF3C7 }
.r2 .bd{ flex:none; min-width:21px; height:21px; padding:0 6px; border-radius:11px; display:grid; place-items:center; font-style:normal; font-size:11px; font-weight:900; color:#fff;
  background:linear-gradient(135deg,#FF3D7F,#8B5CF6); box-shadow:0 4px 10px -2px rgba(255,61,127,.5); animation:bp164 2s ease-in-out infinite }
.r2 .bd.g{ background:#CBC5D8; box-shadow:none; animation:none }
@keyframes bp164{ 50%{ transform:scale(1.1) } }
.rw164.mu{ opacity:.85 }
.cb164{ flex:none; width:40px; height:40px; border:0; border-radius:14px; cursor:pointer; display:grid; place-items:center; color:#10B981 !important; background:#ECFDF5 }
.cb164.v{ color:#8B5CF6 !important; background:#F3EEFF }
.cb164 svg{ width:18px; height:18px }
.ms164{ flex:none; height:36px; padding:0 13px; border:0; border-radius:12px; cursor:pointer; display:flex; align-items:center; gap:5px; font-size:12.5px; font-weight:900; color:#fff !important;
  background:linear-gradient(100deg,#8B5CF6,#3B82F6) }
.ms164 svg{ width:15px; height:15px }
.go164{ flex:none; width:36px; height:36px; border-radius:12px; display:grid; place-items:center; color:var(--vi); background:#F3EEFF } .go164 svg{ width:17px; height:17px }

.rq164{ display:flex; gap:9px; align-items:flex-start; padding:11px 13px; margin-bottom:10px; border-radius:16px; font-size:12px; font-weight:700; line-height:1.6; color:#6D28D9; background:#F3EEFF }
.rq164 svg{ flex:none; width:18px; height:18px; margin-top:1px }
.rqa164{ display:flex; gap:6px; margin-top:6px }
.rqa164 button{ height:32px; padding:0 16px; border:0; border-radius:11px; cursor:pointer; font-size:12px; font-weight:900; color:#fff !important; background:linear-gradient(100deg,#8B5CF6,#3B82F6) }
.rqa164 button.d{ color:var(--sub) !important; background:#F2EFF7 }
.ra164{ display:flex; align-items:center; gap:6px; margin:0 auto 10px; height:34px; padding:0 14px; border:0; border-radius:12px; cursor:pointer; font-size:12px; font-weight:900; color:var(--vi) !important; background:#F3EEFF }
.ra164 svg{ width:16px; height:16px }
.cf164{ display:flex; gap:6px; margin:0 0 10px }
.cf164 button{ height:32px; padding:0 14px; border:0; border-radius:12px; cursor:pointer; font-size:12px; font-weight:800; color:var(--sub) !important; background:#F2EFF7 }
.cf164 button.on{ color:var(--vi) !important; background:#EDE7FE; box-shadow:inset 0 0 0 1.5px #C4B5FD }
.nf164{ text-align:center; padding:26px 0; font-size:13px; font-weight:700; color:var(--sub) }

/* حالت خالی */
.em164{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; padding:26px 18px 16px }
.ei164{ position:relative; width:104px; height:104px; margin-bottom:10px; display:grid; place-items:center }
.ei164 > svg{ position:relative; z-index:2; width:40px; height:40px; color:#fff; padding:18px; box-sizing:content-box; border-radius:26px;
  background:linear-gradient(135deg,#8B5CF6,#3B82F6); box-shadow:0 12px 26px -6px rgba(99,102,241,.55); animation:fl164 3s ease-in-out infinite }
.ei164 > i{ position:absolute; inset:0; border-radius:34px; border:2px solid rgba(139,92,246,.3); animation:pr164 2.4s ease-out infinite }
.ei164 > i:nth-child(3){ animation-delay:1.2s }
@keyframes fl164{ 50%{ transform:translateY(-5px) rotate(-4deg) } }
@keyframes pr164{ from{ transform:scale(.6); opacity:1 } to{ transform:scale(1.3); opacity:0 } }
.em164 b{ font-size:16px; font-weight:900 }
.em164 small{ max-width:290px; font-size:12.5px; font-weight:600; line-height:1.6; color:var(--sub) }
.eb164{ display:flex; gap:8px; margin-top:10px }
.eb164 button{ height:42px; padding:0 18px; border:0; border-radius:14px; cursor:pointer; font-size:13px; font-weight:900; color:#fff !important; background:linear-gradient(100deg,#FF3D7F,#8B5CF6) }
.eb164 button + button{ color:var(--vi) !important; background:#F2EFF7 }

/* اسکلت */
.sk164{ display:flex; align-items:center; gap:12px; padding:10px 8px }
.sk164 i, .sk164 b, .sk164 u{ display:block; background:linear-gradient(100deg,#F2EFF7 30%,#FBF9FE 50%,#F2EFF7 70%); background-size:300% 100%; animation:sk164 1.3s linear infinite }
.sk164 i{ flex:none; width:52px; height:52px; border-radius:50% }
.sk164 span{ flex:1; display:flex; flex-direction:column; gap:8px }
.sk164 b{ width:45%; height:12px; border-radius:6px } .sk164 u{ width:75%; height:10px; border-radius:6px }
@keyframes sk164{ from{ background-position:100% 0 } to{ background-position:-100% 0 } }

/* ═══ برگه‌ها ═══ */
.sh164{ position:fixed; inset:0; z-index:9000; display:flex; align-items:flex-end; justify-content:center; background:rgba(20,10,40,.45); animation:fd164 .2s both; color:#1F1433; font-family:inherit }
.sh164.out{ animation:fd164 .2s reverse both }
.sh164.out .shc164{ animation:up164 .2s reverse both }
@keyframes fd164{ from{ opacity:0 } }
@keyframes up164{ from{ transform:translateY(100%) } }
.sh164 button{ font-family:inherit; color:inherit }
.shc164{ width:100%; max-width:520px; max-height:86vh; overflow:auto; padding:8px 16px calc(18px + env(safe-area-inset-bottom)); border-radius:28px 28px 0 0; background:#FAF8FD;
  box-shadow:0 -10px 40px rgba(76,29,149,.25); animation:up164 .28s cubic-bezier(.2,.9,.3,1) both }
.shc164 .hd{ display:block; width:42px; height:5px; margin:0 auto 12px; border-radius:3px; background:#DDD6EC }
.shh164{ display:flex; align-items:center; gap:12px; margin-bottom:14px }
.shh164 b{ display:flex; align-items:center; gap:4px; font-size:17px; font-weight:900 }
.shh164 small{ font-size:12px; font-weight:700; color:#8A82A0 }
.shq164{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:10px }
.shq164 button{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:12px 4px; border:0; border-radius:18px; cursor:pointer; background:#fff; box-shadow:inset 0 0 0 1px #EEE8F8; font-size:12px; font-weight:800 }
.shq164 i{ width:40px; height:40px; border-radius:14px; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,#10B981,#06B6D4) }
.shq164 .v i{ background:linear-gradient(135deg,#8B5CF6,#3B82F6) } .shq164 .p i{ background:linear-gradient(135deg,#FF3D7F,#F97316) }
.shq164 i svg{ width:19px; height:19px }
.shl164{ display:flex; flex-direction:column; padding:4px; border-radius:20px; background:#fff; box-shadow:inset 0 0 0 1px #EEE8F8 }
.shl164 button{ display:flex; align-items:center; gap:12px; height:50px; padding:0 12px; border:0; border-radius:15px; background:none; cursor:pointer; font-size:14px; font-weight:800; text-align:start }
.shl164 button:active{ background:#F6F2FB }
.shl164 i{ width:34px; height:34px; border-radius:11px; display:grid; place-items:center; color:#8B5CF6; background:#F3EEFF }
.shl164 i svg{ width:17px; height:17px }
.shc164.cp{ height:80vh }
.cph164{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px }
.cph164 b{ font-size:18px; font-weight:900 }
.cph164 button{ width:36px; height:36px; border:0; border-radius:12px; cursor:pointer; display:grid; place-items:center; background:#F2EFF7; color:#8A82A0 !important }
.cph164 button svg{ width:15px; height:15px }
.cpl164{ margin-top:10px }
.sh164 .ls164, .sh164 .rw164, .sh164 .ttl164{ --ink:#1F1433; --sub:#8A82A0; --vi:#8B5CF6; --line:#EEE8F8 }
.sh164 .av164.st .ai164{ box-shadow:0 0 0 2.5px #FAF8FD }

@media (prefers-reduced-motion:reduce){
  .nw164::after, .pc164 > i, .av164.st, .r2 .bd, .ei164 > svg, .ei164 > i{ animation:none !important }
}