/* diskard — стили новых фич: аватары, звонки, демонстрация экрана, саунд-пад */

/* Аватар как картинка */
.avatar { overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.vm-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* Настройки: строка аватара */
.avatar-row { display: flex; align-items: center; gap: 12px; }
.avatar-lg { width: 72px; height: 72px; border-radius: 50%; font-size: 28px; display: flex; align-items: center; justify-content: center; color: #fff; flex: 0 0 auto; }

/* Голосовая панель: кнопки действий */
.voice-actions { display: flex; gap: 4px; }
.vb-btn { background: transparent; border: none; color: #b5bac1; font-size: 16px; cursor: pointer; padding: 4px 6px; border-radius: 6px; line-height: 1; }
.vb-btn:hover { background: rgba(255,255,255,.08); color: #fff; }
.vb-btn.active { color: #23a55a; background: rgba(35,165,90,.15); }

/* Топбар-кнопка звонка уже как .icon-btn */
.icon-btn.calling { color: #23a55a; }

/* Сцена демонстрации экрана */
.stage { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px; background: #000; max-height: 46%; overflow: auto; align-content: flex-start; }
.stage.hidden { display: none; }
.tile { position: relative; width: 240px; height: 135px; background: #18191c; border-radius: 8px; overflow: hidden; cursor: pointer; border: 2px solid transparent; }
.tile:hover { border-color: #5865f2; }
.tile.big { width: 100%; height: auto; max-height: 100%; }
.tile video { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }
.tile-label { position: absolute; left: 6px; bottom: 6px; background: rgba(0,0,0,.6); color: #fff; font-size: 12px; padding: 2px 6px; border-radius: 4px; }
.tile-fs { position: absolute; top: 6px; right: 6px; background: rgba(0,0,0,.55); color: #fff; border: none; border-radius: 4px; font-size: 14px; line-height: 1; padding: 3px 6px; cursor: pointer; opacity: 0; transition: opacity .12s; }
.tile:hover .tile-fs { opacity: 1; }
.tile-fs:hover { background: #5865f2; }
/* На весь экран приложения — через CSS (без нативного requestFullscreen, который зеленит) */
.tile.fs { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 5000; border: none; border-radius: 0; background: #000; cursor: zoom-out; }
.tile.fs video { width: 100%; height: 100%; object-fit: contain; }
.tile.fs .tile-label { left: 12px; bottom: 12px; font-size: 13px; }
.tile.fs .tile-fs { font-size: 18px; padding: 6px 10px; opacity: 1; }
/* анти-зелёный: держим видео на собственном слое композитинга */
.tile video { transform: translateZ(0); backface-visibility: hidden; }

/* Оверлей звонка */
.call-overlay { position: fixed; inset: 0; z-index: 4000; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.7); }
.call-overlay.hidden { display: none; }
.call-card { background: #2b2d31; border-radius: 14px; padding: 32px 40px; text-align: center; min-width: 280px; box-shadow: 0 12px 48px rgba(0,0,0,.5); animation: callpop .18s ease; }
@keyframes callpop { from { transform: scale(.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.call-avatar { width: 96px; height: 96px; border-radius: 50%; margin: 0 auto 14px; display: flex; align-items: center; justify-content: center; font-size: 40px; color: #fff; overflow: hidden; animation: callpulse 1.6s ease-in-out infinite; }
.call-avatar img { width: 100%; height: 100%; object-fit: cover; }
@keyframes callpulse { 0%,100% { box-shadow: 0 0 0 0 rgba(88,101,242,.5); } 50% { box-shadow: 0 0 0 14px rgba(88,101,242,0); } }
.call-name { font-size: 20px; font-weight: 700; color: #fff; margin-bottom: 4px; }
.call-sub { font-size: 14px; color: #b5bac1; margin-bottom: 20px; }
.call-actions { display: flex; gap: 12px; justify-content: center; }
.call-actions .btn { padding: 10px 18px; font-size: 14px; }
.btn-ok { background: #23a55a !important; color: #fff !important; }
.btn-ok:hover { background: #1e8e4d !important; }

/* Саунд-пад */
.popover.soundboard { padding: 10px; width: 260px; }
.sb-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-bottom: 8px; }
.sb-cell { background: #383a40; border: none; color: #fff; padding: 10px 6px; border-radius: 8px; cursor: pointer; font-size: 13px; text-align: center; transition: background .12s; }
.sb-cell:hover { background: #5865f2; }
.sb-cell:active { transform: scale(.96); }
.sb-add { width: 100%; }