/* static/shared/hb-answer-recorder.css — hb-answer-recorder.js uchun uslub.

   2026-08-26 (kechqurun) REDIZAYN — buyurtmachi: "video olish jarayoni
   full ekranda bo'lishi kerak". `hb-face-capture.css` BILAN BIR XIL
   "to'liq ekran qora qatlam" naqshi (--hb-* token konvensiyasi,
   sahifaga xos --accent/--danger'ga BOG'LIQ EMAS). `.hbar-*` prefiks —
   umumiy komponent, sahifaga xos emas. */
.hbar-full{position:fixed;inset:0;z-index:300;background:#000;overflow:hidden;
  display:flex;flex-direction:column}
.hbar-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.hbar-video-mirror{transform:scaleX(-1)}

.hbar-back{position:absolute;top:calc(env(safe-area-inset-top,0px) + 14px);left:14px;z-index:3;
  width:40px;height:40px;border-radius:999px;border:none;background:rgba(20,20,20,.55);
  color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.15s}
.hbar-back:hover{background:rgba(20,20,20,.8)}

.hbar-timer{position:absolute;top:calc(env(safe-area-inset-top,0px) + 20px);left:0;right:0;z-index:2;
  text-align:center;color:#fff;font-variant-numeric:tabular-nums;font-weight:800;font-size:16px;
  text-shadow:0 1px 4px rgba(0,0,0,.6)}
.hbar-timer::before{content:'';display:inline-block;width:9px;height:9px;border-radius:50%;
  background:var(--hb-danger,#f04);margin-right:7px;vertical-align:middle;animation:hbarBlink 1s ease-in-out infinite}
@keyframes hbarBlink{0%,100%{opacity:1}50%{opacity:.25}}

.hbar-audio-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 40%,#1c1c1c,#000 70%)}
.hbar-audio-indicator{width:150px;height:150px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:60px;background:rgba(255,255,255,.06);
  border:2px solid rgba(255,255,255,.18);transition:border-color .2s,box-shadow .2s}
.hbar-audio-indicator.hbar-audio-live{border-color:var(--hb-danger,#f04);
  box-shadow:0 0 0 14px color-mix(in srgb,var(--hb-danger,#f04) 14%,transparent);
  animation:hbarPulse 1.2s ease-in-out infinite}
@keyframes hbarPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
.hbar-audio-playback{width:min(84vw,340px)}

.hbar-bottom{position:relative;z-index:2;margin-top:auto;width:100%;
  padding:18px 20px calc(env(safe-area-inset-bottom,0px) + 22px);
  display:flex;flex-direction:column;align-items:center;gap:12px;
  background:linear-gradient(to top,rgba(0,0,0,.75),rgba(0,0,0,0) 100%)}
.hbar-err{color:#ffb4b4;font-size:13px;text-align:center;font-weight:600}
.hbar-actions{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;max-width:360px}
.hbar-hint{color:rgba(255,255,255,.75);font-size:12.5px;font-weight:600}

/* Standart kamera-uslub aylana yozib olish tugmasi (svetofor/qizil nuqta
   o'rniga — iOS/Android kamera ilovalari BILAN BIR XIL til, xodim uchun
   TANISH interaktsiya). */
.hbar-recbtn{width:72px;height:72px;border-radius:50%;border:4px solid #fff;background:transparent;
  display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:transform .12s}
.hbar-recbtn:active{transform:scale(.94)}
.hbar-recbtn-dot{width:56px;height:56px;border-radius:50%;background:var(--hb-danger,#f04)}
.hbar-recbtn-active .hbar-recbtn-dot{display:none}
.hbar-recbtn-square{width:26px;height:26px;border-radius:6px;background:var(--hb-danger,#f04)}

.hbar-row2{display:flex;gap:10px;width:100%}
.hbar-row2 .hbar-cta{flex:1}
.hbar-uploading{color:#fff;font-size:14px;font-weight:700;display:flex;align-items:center;
  justify-content:center;gap:8px;padding:10px 0}

.hbar-filerow{display:flex;align-items:center;gap:10px}
.hbar-or{font-size:11.5px;color:rgba(255,255,255,.55);text-transform:uppercase;letter-spacing:.04em}
.hbar-filebtn{cursor:pointer;color:#fff;font-size:13px;font-weight:700;text-decoration:underline;
  text-underline-offset:3px}