/* 🎬 видео и 🎵 аудио из чата — в ленте (chatmedia.js). Токены — rec.css / talk.css, тёмная и светлая темы. */
.cm-i { width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* ---- видео: превью с первым кадром, ▶ посередине, длительность, имя и «⬇» сверху ---- */
.cm-vid { position:relative; display:block; max-width:100%; overflow:hidden; border-radius:12px; background:#0b0b0d; color:#fff;
  isolation:isolate; cursor:pointer; contain:layout paint; }
.cm-vid.on, .cm-vid.fail { cursor:default; }
.cm-v { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:contain; background:transparent; }
/* пока кадра нет — мягкий градиент, а не чёрная дыра */
.cm-vid::before { content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(120% 90% at 30% 20%, rgba(192,75,232,.22), transparent 60%), radial-gradient(100% 80% at 80% 100%, rgba(62,166,255,.16), transparent 60%), #141418; }
.cm-shade { position:absolute; inset:0; pointer-events:none; background:linear-gradient(rgba(0,0,0,.55), transparent 34%, transparent 70%, rgba(0,0,0,.35)); transition:opacity .15s; }
.cm-play { position:absolute; left:50%; top:50%; z-index:2; display:grid; place-items:center; width:58px; height:58px; margin:-29px 0 0 -29px; padding:0; border:0;
  border-radius:50%; background:rgba(12,12,16,.62); color:#fff; cursor:pointer; box-shadow:0 8px 24px -8px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); transition:transform .12s, background-color .12s; }
.cm-play .cm-i { width:26px; height:26px; margin-left:3px; fill:currentColor; stroke:none; }
.cm-vid:hover .cm-play, .cm-play:focus-visible { transform:scale(1.07); background:rgba(12,12,16,.78); }
.cm-dur { position:absolute; right:8px; bottom:8px; z-index:2; padding:1px 7px; border-radius:6px; background:rgba(0,0,0,.66); color:#fff;
  font:500 12px/19px var(--body, sans-serif); font-variant-numeric:tabular-nums; pointer-events:none; }
.cm-vtop { position:absolute; left:0; right:0; top:0; z-index:3; display:flex; align-items:flex-start; gap:6px; padding:8px 8px 0 12px; transition:opacity .15s; }
.cm-vt { flex:1; min-width:0; display:flex; flex-direction:column; padding-top:2px; line-height:1.3; text-shadow:0 1px 2px rgba(0,0,0,.6); }
.cm-vt b { font-size:13px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cm-vt small { font-size:11.5px; color:rgba(255,255,255,.72); font-variant-numeric:tabular-nums; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cm-vb { display:grid; place-items:center; flex:none; width:32px; height:32px; padding:0; border:0; border-radius:50%; background:rgba(0,0,0,.5); color:#fff;
  text-decoration:none; cursor:pointer; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); transition:background-color .12s; }
.cm-vb:hover { background:rgba(0,0,0,.75); }
.cm-vb .cm-i { width:16px; height:16px; stroke-width:2.2; }
.cm-vid :focus-visible { outline:2px solid #fff; outline-offset:2px; border-radius:50%; box-shadow:0 0 0 4px rgba(0,0,0,.45); }
/* запущено: ▶ и длительность прячутся (дальше — родные кнопки браузера); верхняя полоса — только при наведении/паузе */
.cm-vid.on .cm-play, .cm-vid.on .cm-dur { display:none; }
.cm-vid.on .cm-shade { background:linear-gradient(rgba(0,0,0,.55), transparent 30%); }
.cm-vid.on.playing .cm-vtop, .cm-vid.on.playing .cm-shade { opacity:0; }
@media (hover:hover) {
  .cm-vid.on.playing:hover .cm-vtop, .cm-vid.on.playing:hover .cm-shade, .cm-vid.on.playing:focus-within .cm-vtop { opacity:1; }
}
/* после запуска щелчки мимо кнопок — родным кнопкам видео (пауза по щелчку) */
.cm-vid.on .cm-vtop { pointer-events:none; }
.cm-vid.on .cm-vb { pointer-events:auto; }
.cm-vid.on.playing .cm-vb { visibility:hidden; transition:visibility 0s .15s; }
.cm-vid.on.playing:hover .cm-vb, .cm-vid.on.playing:focus-within .cm-vb { visibility:visible; transition:none; }
/* браузер не умеет — заглушка вместо чёрного прямоугольника */
/* заглушка не обрезается: высота по пропорциям (распорка ::after), а в узкой колонке рамка вырастает по тексту */
.cm-vid.fail { aspect-ratio:auto !important; display:flex; overflow:visible; contain:none; background:var(--side, var(--card)); color:var(--text); border:1px dashed var(--line); }
.cm-vid.fail::before { display:none; }
.cm-vid.fail::after { content:""; flex:none; width:0; padding-bottom:var(--cm-r, 56.25%); }
.cm-vfail { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:12px 16px; text-align:center; }
.cm-vfail > * { flex:none; }
.cm-vfail-i { width:30px; height:30px; margin-bottom:4px; color:var(--text2); stroke-width:1.7; }
.cm-vfail b { font-size:13.5px; font-weight:500; max-width:100%; line-height:1.3; overflow-wrap:anywhere; }
.cm-vfail small { max-width:100%; font-size:12px; line-height:1.35; color:var(--text2); overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.cm-vfail-dl { display:inline-flex; align-items:center; gap:6px; margin-top:8px; min-height:34px; padding:0 14px 0 11px; border-radius:17px; border:1px solid var(--line);
  background:var(--card); color:var(--text); font-size:13px; font-weight:500; text-decoration:none; white-space:nowrap; transition:border-color .12s, background-color .12s; }
.cm-vfail-dl:hover { border-color:color-mix(in srgb, var(--violet) 55%, var(--line)); background:color-mix(in srgb, var(--violet) 8%, var(--card)); }
.cm-vfail-dl .cm-i { width:16px; height:16px; stroke-width:2.2; }
.cm-vid.fail :focus-visible { outline-color:var(--blue); box-shadow:none; border-radius:17px; }
.cm-v:fullscreen { object-fit:contain; background:#000; }

/* ---- аудио: компактная карточка (по высоте — как карточка файла) ---- */
.cm-aud { display:flex; align-items:center; gap:12px; width:min(440px, 100%); padding:10px 10px 10px 12px; border-radius:12px;
  background:var(--side, var(--card)); border:1px solid var(--line); }
.cm-ap { position:relative; display:grid; place-items:center; flex:none; width:42px; height:42px; padding:0; border:0; border-radius:50%;
  background:var(--grad, linear-gradient(135deg, #FF5A7A, #C04BE8 55%, #7B61FF)); color:#fff; cursor:pointer;
  box-shadow:0 8px 20px -10px rgba(192,75,232,.9); transition:filter .12s, transform .12s; }
.cm-ap:hover { filter:brightness(1.08); }
.cm-ap:active { transform:scale(.95); }
.cm-ap .cm-i { width:19px; height:19px; fill:currentColor; stroke:none; }
.cm-ap .cm-i:first-child { margin-left:2px; }
.cm-ap .cm-i + .cm-i, .cm-aud.playing .cm-ap .cm-i:first-child { display:none; }
.cm-aud.playing .cm-ap .cm-i + .cm-i { display:block; }
/* имя и размер сверху, ниже — полоса и время */
.cm-at { flex:1; min-width:0; display:grid; grid-template-columns:minmax(0, 1fr) auto; grid-template-areas:"n n" "b t"; align-items:center; column-gap:10px; row-gap:1px; }
.cm-an { grid-area:n; display:flex; align-items:baseline; gap:8px; min-width:0; }
.cm-an b, .cm-anl { min-width:0; color:var(--text); text-decoration:none; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
a.cm-anl:hover { text-decoration:underline; text-underline-offset:2px; }
.cm-an small { flex:none; max-width:55%; font-size:12px; color:var(--text2); font-variant-numeric:tabular-nums; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cm-bar { grid-area:b; position:relative; min-width:0; height:20px; display:flex; align-items:center; cursor:pointer; touch-action:pan-y; border-radius:6px; }
.cm-track { position:relative; display:block; width:100%; height:4px; border-radius:2px; overflow:hidden; background:var(--soft, color-mix(in srgb, var(--text) 8%, transparent));
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--text) 6%, transparent); }
.cm-fill { position:absolute; left:0; top:0; bottom:0; width:0; border-radius:2px; background:var(--violet); }
.cm-knob { position:absolute; top:50%; left:0; width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%; background:var(--violet);
  box-shadow:0 1px 4px rgba(0,0,0,.3); transform:scale(0); transition:transform .12s; pointer-events:none; }
.cm-bar:hover .cm-knob, .cm-bar.drag .cm-knob, .cm-bar:focus-visible .cm-knob, .cm-aud.playing .cm-knob { transform:scale(1); }
.cm-bar:hover .cm-track, .cm-bar.drag .cm-track { height:6px; border-radius:3px; }
.cm-bar.off { cursor:default; }
.cm-bar.off .cm-knob { transform:scale(0); }
.cm-bar:focus-visible { outline-offset:3px; }
.cm-time { grid-area:t; font-size:12px; color:var(--text2); font-variant-numeric:tabular-nums; white-space:nowrap; }
.cm-adl { display:grid; place-items:center; flex:none; width:36px; height:36px; border-radius:50%; border:1px solid var(--line); background:var(--card); color:var(--text);
  text-decoration:none; transition:border-color .12s, background-color .12s; }
.cm-adl:hover { border-color:color-mix(in srgb, var(--violet) 55%, var(--line)); background:color-mix(in srgb, var(--violet) 8%, var(--card)); }
.cm-adl .cm-i { width:16px; height:16px; stroke-width:2.2; }
.cm-aud.fail .cm-ap { background:var(--soft, var(--chip)); color:var(--text2); box-shadow:none; cursor:default; filter:none; transform:none; }
.cm-aud.fail .cm-bar { display:none; }
.cm-aud.fail .cm-time { grid-row:2; grid-column:1 / -1; min-width:0; white-space:normal; line-height:1.3; }

/* телефон: превью — во всю колонку (высота — по пропорциям), аудио — плотнее */
@media (max-width: 760px) {
  .cm-play { width:52px; height:52px; margin:-26px 0 0 -26px; }
  .cm-play .cm-i { width:24px; height:24px; }
  .cm-aud { gap:10px; padding:8px 8px 8px 10px; }
  .cm-ap { width:40px; height:40px; }
}
@media (max-width: 400px) {
  .cm-vt small { display:none; }
  .cm-vfail { padding:12px; }
  .cm-vfail-i { width:24px; height:24px; margin-bottom:2px; }
  .cm-an small { display:none; }
  .cm-at { column-gap:8px; }
  .cm-time { font-size:11.5px; }
  /* узко: скачать — по имени файла (как у карточки файла), кнопка «⬇» уступает место полосе */
  .cm-aud:has(.cm-anl) .cm-adl { display:none; }
  .cm-bar { height:18px; }
}
@media (prefers-reduced-motion: reduce) {
  .cm-play, .cm-ap, .cm-knob, .cm-shade, .cm-vtop { transition:none; }
}