/* thesafebay-extras.css — голосовые сообщения + круглые видео-кружки (как в Telegram) */

/* кнопки записи в композере */
.tsb-rec-btn{
  background:none;border:none;cursor:pointer;padding:0 2px;margin:0;
  color:var(--text,#b9c0c7);font-size:1.3em;line-height:1;opacity:.85;
  display:inline-flex;align-items:center;
}
.tsb-rec-btn:hover{opacity:1;color:var(--link,#4fb0e0)}
.tsb-rec-btn svg{width:1.15em;height:1.15em;fill:currentColor}

/* оверлей записи */
.tsb-rec-overlay{
  position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.72);backdrop-filter:blur(3px);
}
.tsb-rec-card{
  background:var(--bg,#161b22);color:var(--text,#dfe3e8);border-radius:16px;
  padding:20px;min-width:300px;max-width:92vw;box-shadow:0 10px 40px rgba(0,0,0,.6);
  display:flex;flex-direction:column;align-items:center;gap:14px;font-family:inherit;
}
.tsb-rec-title{font-size:1.05em;font-weight:600;opacity:.9}
.tsb-rec-timer{font-variant-numeric:tabular-nums;font-size:1.8em;font-weight:700;letter-spacing:1px}
.tsb-rec-dot{display:inline-block;width:11px;height:11px;border-radius:50%;background:#ff3b30;margin-right:8px;animation:tsb-pulse 1s infinite}
@keyframes tsb-pulse{0%,100%{opacity:1}50%{opacity:.25}}
.tsb-round-preview{width:240px;height:240px;border-radius:50%;object-fit:cover;background:#000;transform:scaleX(-1)}
.tsb-audio-viz{width:240px;height:54px}
.tsb-rec-actions{display:flex;gap:10px;margin-top:4px}
.tsb-btn{border:none;border-radius:999px;padding:9px 18px;font-size:.95em;font-weight:600;cursor:pointer}
.tsb-btn-stop{background:#ff3b30;color:#fff}
.tsb-btn-cancel{background:rgba(255,255,255,.14);color:var(--text,#dfe3e8)}
.tsb-btn-switch{background:rgba(255,255,255,.14);color:var(--text,#dfe3e8)}
.tsb-rec-hint{font-size:.8em;opacity:.6;text-align:center}

/* круглые видео-кружки в ленте */
video.tsb-round{
  border-radius:50% !important;object-fit:cover !important;
  width:260px !important;height:260px !important;max-width:72vw;max-height:72vw;
  background:#000;cursor:pointer;display:block;margin:4px 0;
}
.tsb-round-wrap{position:relative;display:inline-block}
.tsb-round-wrap .tsb-muted-badge{
  position:absolute;right:12px;bottom:12px;background:rgba(0,0,0,.55);color:#fff;
  border-radius:50%;width:30px;height:30px;display:flex;align-items:center;justify-content:center;font-size:15px;pointer-events:none
}