/* © 2026 VanlifeFabrika, ALT — SPDX-License-Identifier: AGPL-3.0-or-later */
/* 1.32: кружки (circle.js) — пузырь без фона и окно записи. Цвета — переменные ALT (--accent, --danger, --surface*). */

/* ---- пузырь ---- */
.bubble.circb { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; max-width: none; }
.bubble.circb .name, .bubble.circb .fwd { padding: 0 6px 4px; }
.bubble.circb .meta { justify-content: center; margin: 4px auto 0; width: max-content; padding: 1px 8px; border-radius: 999px; background: var(--surface2); color: var(--muted); }
.row.mine .bubble.circb .meta { color: var(--muted); }
.row.mine .bubble.circb .meta .via { color: var(--muted); }
.bubble.circb .stttxt, .bubble.circb .sttbusy, .bubble.circb .sttbtn { max-width: calc(var(--d, 200px) + 40px); margin: 6px auto 0; }
.bubble.circb .stttxt { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r12, 12px); padding: 6px 10px; color: var(--text); }
.bubble.circb .reacts { justify-content: center; }
.bubble.circb .quote { background: var(--surface); border-radius: var(--r12, 12px); margin-bottom: 6px; }

.circ { position: relative; width: calc(var(--d, 200px) + 12px); height: calc(var(--d, 200px) + 12px); margin: 4px; cursor: pointer; border-radius: 50%; outline: none; }
.circ:focus-visible { box-shadow: 0 0 0 3px var(--accent-soft); }
.circ-ring { position: absolute; inset: 0; pointer-events: none; }
.circ-ring.paused svg { opacity: .6; }
.circ-in { position: absolute; left: 6px; top: 6px; width: var(--d, 200px); height: var(--d, 200px); border-radius: 50%; overflow: hidden; background: var(--surface2);
  -webkit-mask-image: -webkit-radial-gradient(white, black); }
.circ-in img, .circ-in video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.circ-th { filter: saturate(1.05); }
.circ-poster { opacity: 0; transition: opacity .3s ease; }
.circ-poster.on { opacity: 1; }
.circ-v { opacity: 0; transition: opacity .3s ease; }
.circ-v.on { opacity: 1; }
.circ-chip { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px;
  border-radius: 999px; background: rgba(0, 0, 0, .5); color: #fff; font-size: 12px; line-height: 16px; font-weight: 600; pointer-events: none; white-space: nowrap; }
.circ-chip .ic { width: 13px; height: 13px; }
@media (max-width: 480px) { .circ { --d: 160px; } }

/* ---- кнопка ◯ в поле ввода ---- */
#circbtn .ic { width: 22px; height: 22px; }
#circbtn.rec { color: var(--danger); }

/* ---- окно записи ---- */
.circrec { position: fixed; inset: 0; z-index: 9000; background: rgba(5, 8, 14, .92); display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; padding: 16px; color: #fff; touch-action: none; }
.circrec-stage { position: relative; width: min(332px, calc(100vw - 36px)); height: min(332px, calc(100vw - 36px)); }
.circrec-ring { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.circrec-echo { position: absolute; inset: -8px; border-radius: 50%; border: 2px solid var(--danger); opacity: 0; transition: opacity 50ms linear; pointer-events: none; }
.circrec-view { position: absolute; inset: 12px; border-radius: 50%; overflow: hidden; background: #15181E; cursor: pointer; -webkit-mask-image: -webkit-radial-gradient(white, black); }
.circrec-view canvas.circrec-cv { transform: scaleX(-1); }       /* как в зеркале; само видео — не зеркальное */
.circrec-cv { width: 100%; height: 100%; object-fit: cover; display: block; }
.circrec-time { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.circrec-hint { font-size: 13px; color: rgba(255, 255, 255, .78); text-align: center; min-height: 18px; }
.circrec-hint.warn { color: #FF6B6B; }
.circrec-bar { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.circrec-btn { min-height: 48px; padding: 0 20px; border-radius: 999px; border: 0; background: rgba(255, 255, 255, .16); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.circrec-btn.primary { background: var(--accent-fill); color: var(--on-accent); }
.circrec-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.circrec-mute { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .12); cursor: pointer; font-weight: 600; color: #fff; }
.circrec-mute input { width: 18px; height: 18px; accent-color: var(--accent-fill); }

@media (prefers-reduced-motion: reduce) { .circ-poster, .circ-v, .circrec-echo { transition: none; } }