/* GIFs, link previews, pins, voice notes, typing indicator, group chats. Uses the site's theme variables. */

/* pinned post */
.pinl{display:flex;gap:6px;align-items:center;font-size:13px;font-weight:600;margin-bottom:2px}
.acts button[data-x=pin].on{color:var(--bl)}

/* link preview card */
.lp{min-height:2px}
.lpc{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-top:8px;color:inherit;text-decoration:none;transition:background .15s}
.lpc:hover{background:var(--card)}
.lpc img{display:block;width:100%;max-height:230px;object-fit:cover;background:var(--card)}
.lpt{display:flex;flex-direction:column;gap:2px;min-width:0;padding:10px 12px;line-height:1.35}
.lpt b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:15px}
.lpt .d{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13.5px;color:var(--mu)}

/* GIF picker */
.gifp{margin-top:8px;border:1px solid var(--line);border-radius:14px;padding:8px;background:var(--card)}
.gifp .gifq{width:100%;margin:0;box-sizing:border-box}
.gifg{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;max-height:260px;overflow-y:auto;margin-top:8px}
.gifi{padding:0;border:0;background:var(--bg);border-radius:8px;overflow:hidden;cursor:pointer;aspect-ratio:1;transition:transform .12s}
.gifi:hover{transform:scale(1.03)}.gifi img{display:block;width:100%;height:100%;object-fit:cover}
.gifx{text-align:right;margin-top:6px}
.gifsel{position:relative;display:inline-block;max-width:100%;margin-top:8px}
.gifsel img{display:block;max-width:100%;max-height:220px;border-radius:12px}
.gifsel .ib{position:absolute;top:6px;right:6px;width:28px;height:28px;display:grid;place-items:center;padding:0;border-radius:50%;background:#000b;color:#fff}

/* voice notes */
.vn{display:flex;align-items:center;gap:10px;min-width:200px}
.vnb{flex:none;display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:50%;cursor:pointer;font-size:13px;background:var(--tx);color:var(--bg)}
.bub.me .vnb{background:var(--acx);color:var(--ac)}
.vnw{flex:1;display:flex;align-items:center;gap:2px;height:30px;cursor:pointer;min-width:0}
.vnw i{flex:1;min-width:2px;border-radius:2px;background:currentColor;opacity:.35;transition:opacity .1s}.vnw i.on{opacity:1}
.vnt{flex:none;min-width:32px;text-align:right;font-size:12px;font-variant-numeric:tabular-nums;opacity:.85}
.bub.vnx{padding:8px 12px}
.dmf.rec .dmp{display:none}
.recb{flex:1;display:flex;align-items:center;gap:10px;min-width:0;padding:4px 6px;background:var(--card);border:1px solid var(--line);border-radius:99px}
.recb .ib{font-size:17px;padding:8px 10px}
.recd{flex:none;width:10px;height:10px;border-radius:50%;background:var(--red);animation:recp 1s ease-in-out infinite}
.rect{font-variant-numeric:tabular-nums;min-width:34px}.recm{flex:1;min-width:0}
@keyframes recp{50%{opacity:.25}}

/* typing indicator */
.typ{display:flex;align-items:center;gap:8px;min-height:22px;padding:2px 18px 6px;font-size:13px;color:var(--mu)}
.dots{display:inline-flex;gap:3px}
.dots i{width:5px;height:5px;border-radius:50%;background:var(--mu);animation:tdot 1.2s ease-in-out infinite}
.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}
@keyframes tdot{0%,60%,100%{transform:none;opacity:.4}30%{transform:translateY(-3px);opacity:1}}
[data-motion=off] .dots i,[data-motion=off] .recd{animation:none}
@media(prefers-reduced-motion:reduce){.dots i,.recd{animation:none}}

/* group chats */
.gh{padding:10px 18px 4px;font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;display:flex;gap:6px;align-items:center}
.gic{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;background:var(--card);border:1px solid var(--line);font-size:17px}
.gic.sm{width:38px;height:38px;font-size:15px}
.gtitle{display:flex;gap:10px;align-items:center;min-width:0;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.gtitle b{font-size:17px}
.gnm{margin:0 4px;font-size:12px;color:var(--mu)}
.gpl{max-height:230px;overflow-y:auto;margin:6px 0}
.gpr{display:flex;gap:10px;align-items:center;padding:6px 4px;border-radius:10px;cursor:pointer}.gpr:hover{background:var(--card)}.gpr[hidden]{display:none}
.gml{max-height:240px;overflow-y:auto}
.gmr{display:flex;gap:10px;align-items:center;padding:6px 0}

/* group photo */
.gic{overflow:hidden}.gic img{display:block;width:100%;height:100%;object-fit:cover}
.gic.lg{width:72px;height:72px;font-size:26px}
.gedit{display:flex;gap:14px;align-items:center;margin-bottom:6px}.gea{display:flex;gap:8px;flex-wrap:wrap}