/* Edge-to-edge activity rail with three complete cards on small screens. */
.xj-chat{width:100%;padding:20px clamp(8px,1.5vw,24px) 14px;overflow:hidden}
.xj-chat__heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.xj-chat__title{display:flex;align-items:center;gap:9px;min-width:0}
.xj-chat__title h2{font-size:15px;font-weight:800;white-space:nowrap;color:#29394d}
.xj-chat__pulse{width:8px;height:8px;border-radius:50%;background:#4c8aab;box-shadow:0 0 0 5px #4c8aab16;flex:none}
.xj-chat__demo{font-size:12px;line-height:1.5;padding:3px 9px;border-radius:6px;background:#f2f5f9a8;color:#63748a;border:1px solid #b6c2d080}
.xj-chat__viewport{height:102px;overflow:hidden;position:relative;--chat-fade-width:36px;mask-image:linear-gradient(to right,#000 calc(100% - var(--chat-fade-width)),transparent);-webkit-mask-image:linear-gradient(to right,#000 calc(100% - var(--chat-fade-width)),transparent)}
[dir=rtl] .xj-chat__viewport{mask-image:linear-gradient(to left,#000 calc(100% - var(--chat-fade-width)),transparent);-webkit-mask-image:linear-gradient(to left,#000 calc(100% - var(--chat-fade-width)),transparent)}
.xj-chat__track{height:100%;position:relative;--chat-step:168px}
.xj-chat__card{position:absolute;inset-inline-start:calc(var(--slot)*var(--chat-step));top:8px;width:156px;height:78px;display:flex;align-items:center;gap:10px;padding:8px;border:1px solid #8ea5bf80;border-radius:11px;background:linear-gradient(130deg,#36485d,#223145);box-shadow:inset 0 1px #ffffff1e,0 5px 0 #72859c30,0 4px 6px #31496212;opacity:var(--opacity,1);transform:translateY(calc(var(--depth)*2px)) scale(calc(1 - var(--depth)*.018));transform-origin:center;transition:inset-inline-start .65s cubic-bezier(.22,.8,.3,1),transform .65s,opacity .65s;z-index:calc(10 - var(--slot));will-change:transform,opacity}
.xj-chat__card[data-slot="0"]{border-color:#c8d9ef;box-shadow:inset 0 1px #ffffff40,0 5px 0 #8094ad4d,0 4px 8px #3149621a}
.xj-chat__avatar{width:47px;height:58px;flex:0 0 47px;background:radial-gradient(ellipse,#8ba6c948,transparent 72%);display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:7px}
.xj-chat__avatar img{width:100%;height:100%;object-fit:contain}
.xj-chat__details{min-width:0;flex:1;display:flex;flex-direction:column;gap:5px}
.xj-chat__points{color:#d1e7ff;display:flex;align-items:baseline;gap:4px;white-space:nowrap;font-size:17px;font-weight:800;line-height:1.2;font-variant-numeric:tabular-nums}
.xj-chat__points small{font-size:11px;font-weight:500;color:#9eb4cc}
.xj-chat__user{display:flex;align-items:center;gap:5px;min-width:0;font:600 12px/1.5 Vazirmatn,Arial,sans-serif;color:#e8eef6}
.xj-chat__user bdi{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xj-chat__social{width:14px;height:14px;object-fit:contain;filter:brightness(0) invert(1);opacity:.85;flex:none}
.xj-chat__card.is-entering{opacity:0;transform:translateY(14px) scale(.88)}
.xj-chat__card.is-leaving{opacity:0;transform:translateY(12px) scale(.8)}
.xj-chat__note{font-size:12px;color:#607086;line-height:1.6}
@media(max-width:700px){
 .xj-chat{padding:14px 8px 12px}
 .xj-chat__heading,.xj-chat__note{padding-inline:4px}
 .xj-chat__viewport,[dir=rtl] .xj-chat__viewport{height:130px;mask-image:none;-webkit-mask-image:none}
 .xj-chat__track{--chat-card-width:calc((100% - 16px)/3);--chat-step:calc(var(--chat-card-width) + 8px)}
 .xj-chat__card{width:var(--chat-card-width);height:110px;flex-direction:column;gap:3px;padding:6px 5px;border-radius:9px}
 .xj-chat__title{gap:7px}
 .xj-chat__title h2{font-size:14px}
 .xj-chat__avatar{width:38px;height:40px;flex:0 0 40px}
 .xj-chat__details{width:100%;flex:0 0 auto;align-items:center;gap:5px}
 .xj-chat__points{font-size:15px;gap:3px}
 .xj-chat__points small{font-size:10px}
 .xj-chat__user{max-width:100%;font-size:12px;gap:3px}
 .xj-chat__social{width:12px;height:12px}
}
@media(prefers-reduced-motion:reduce){.xj-chat__card{transition:none;will-change:auto}}