/* 🎵 TikTok в чате (ttembed.js): карточка постоянного размера 320×180 (скелетон — тот же размер), плеер 9:16 в «доке» поверх места */
.tt-list { display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.tt-card { position:relative; flex:none; width:320px; max-width:100%; height:180px; overflow:hidden; border-radius:12px; cursor:pointer;
  background:#121216; color:#fff; border:1px solid rgba(255,255,255,.08); isolation:isolate; contain:layout paint; }
.tt-card:focus-visible { outline:2px solid var(--accent, #7aa2ff); outline-offset:2px; }
.tt-bg { position:absolute; inset:0; z-index:-2; background:linear-gradient(135deg, #25f4ee22, #121216 45%, #fe2c5522); }
.tt-blur { position:absolute; inset:-12px; z-index:-1; width:calc(100% + 24px); height:calc(100% + 24px); object-fit:cover; filter:blur(14px) brightness(.55); }
.tt-img { position:absolute; top:0; left:50%; height:100%; aspect-ratio:9 / 16; transform:translateX(-50%); object-fit:cover; }
.tt-card::after { content:""; position:absolute; inset:auto 0 0 0; height:72%; background:linear-gradient(transparent, rgba(0,0,0,.82)); pointer-events:none; }
.tt-meta { position:absolute; left:12px; right:12px; bottom:10px; z-index:1; display:flex; flex-direction:column; gap:3px; min-width:0; text-shadow:0 1px 2px rgba(0,0,0,.6); }
.tt-author { display:flex; align-items:center; gap:6px; min-width:0; font-weight:700; font-size:13px; }
.tt-author > span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tt-title { font-size:12.5px; line-height:1.3; color:rgba(255,255,255,.88); overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-break:break-word; }
.tt-logo { flex:none; width:16px; height:16px; border-radius:4px; background:#000; box-shadow:-1px -1px 0 #25f4ee, 1px 1px 0 #fe2c55; position:relative; }
.tt-logo::before { content:"♪"; position:absolute; inset:0; display:grid; place-items:center; font-size:11px; line-height:1; color:#fff; }
.tt-play { position:absolute; left:50%; top:42%; z-index:1; width:52px; height:52px; border-radius:50%; transform:translate(-50%, -50%);
  background:rgba(0,0,0,.55); box-shadow:0 0 0 2px rgba(255,255,255,.85) inset; transition:transform .15s, background .15s; }
.tt-play::before { content:""; position:absolute; left:21px; top:16px; border-style:solid; border-width:10px 0 10px 16px; border-color:transparent transparent transparent #fff; }
.tt-card:hover .tt-play { transform:translate(-50%, -50%) scale(1.08); background:#fe2c55cc; }
/* скелетон: тот же размер, мягкое мерцание */
.tt-sk { position:absolute; inset:0; z-index:-1; background:linear-gradient(100deg, #1b1b21 30%, #26262e 50%, #1b1b21 70%); background-size:300% 100%; animation:tt-sk 1.3s linear infinite; }
@keyframes tt-sk { from { background-position:100% 0; } to { background-position:0 0; } }
@media (prefers-reduced-motion: reduce) { .tt-sk { animation:none; } }
.tt-card.load .tt-play { opacity:.35; }
.tt-card.err { cursor:pointer; }
.tt-card.err .tt-title { color:rgba(255,255,255,.7); }
/* открытый плеер: место 9:16 (под ним — кнопки); сам iframe — в .tt-dock поверх места */
.tt-card.open { width:300px; height:auto; cursor:default; contain:layout; overflow:visible; background:transparent; border:0; }
.tt-card.open::after { display:none; }
.tt-slot { position:relative; width:100%; aspect-ratio:9 / 16; border-radius:12px; overflow:hidden; background:#000; }
.tt-slot .tt-sk { z-index:0; }
.tt-bar { display:flex; gap:8px; margin-top:6px; }
.tt-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; flex:1 1 0; min-width:0; min-height:34px; padding:0 10px; border-radius:9px;
  border:1px solid var(--line, rgba(255,255,255,.14)); background:var(--card, #1b1b21); color:var(--text, inherit); font:inherit; font-size:13px; text-decoration:none; cursor:pointer; white-space:nowrap; }
.tt-btn:hover { border-color:var(--accent, #7aa2ff); }
.tt-dock { position:fixed; z-index:30; left:0; top:0; width:0; height:0; border-radius:12px; overflow:hidden; background:#000; }
.tt-dock.off { visibility:hidden; pointer-events:none; }
.tt-dock iframe { display:block; width:100%; height:100%; border:0; }
/* телефон (~440 px): карточка остаётся 320 px (max-width:100% — на совсем узких), плеер — не шире экрана */
@media (max-width: 480px) { .tt-card.open { width:min(300px, 100%); } }