/* ══════════════════════════════════════════════════
   QAG Survey — main stylesheet
   Includes: variables, layout, components, animations
══════════════════════════════════════════════════ */

/* ── VARIABLES ── */
:root {
    --bg:         #07070d;
    --surface:    #0f0f1a;
    --surface2:   #16162a;
    --surface3:   #1e1e30;
    --border:     rgba(255,255,255,0.06);
    --border-md:  rgba(255,255,255,0.11);
    --border-hi:  rgba(255,255,255,0.18);
    --accent:     #7c6ff7;
    --accent-lo:  rgba(124,111,247,0.12);
    --accent2:    #e879a0;
    --accent3:    #38d9c0;
    --text:       #eeeef8;
    --text-muted: #6b6b8f;
    --text-dim:   #38384f;
    --r:          20px;
    --r-sm:       12px;
}

/* ── RESET ── */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html,body {
    min-height:100vh;
    background:var(--bg);
    color:var(--text);
    font-family:'Onest',sans-serif;
    overflow-x:hidden;
}

/* ══════════════════════════════════════════════════
   BACKGROUND
══════════════════════════════════════════════════ */
.bg-a { position:fixed; inset:0; z-index:0; pointer-events:none; }
.bg-a::before {
    content:''; position:absolute;
    width:700px; height:700px; top:-220px; left:-160px;
    background:radial-gradient(circle,rgba(124,111,247,.13) 0%,transparent 65%);
    animation:da 20s ease-in-out infinite alternate;
}
.bg-a::after {
    content:''; position:absolute;
    width:600px; height:600px; bottom:-180px; right:-100px;
    background:radial-gradient(circle,rgba(232,121,160,.09) 0%,transparent 65%);
    animation:db 26s ease-in-out infinite alternate;
}
@keyframes da { from{transform:translate(0,0)} to{transform:translate(55px,35px)} }
@keyframes db { from{transform:translate(0,0)} to{transform:translate(-45px,-28px)} }

.bg-g {
    position:fixed; inset:0; z-index:0; pointer-events:none;
    background-image:
        linear-gradient(rgba(255,255,255,.017) 1px, transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.017) 1px, transparent 1px);
    background-size:58px 58px;
}

/* ══════════════════════════════════════════════════
   LAYOUT
══════════════════════════════════════════════════ */
.stage {
    position:relative; z-index:1;
    min-height:100vh;
    display:flex; align-items:center; justify-content:center;
    padding:24px;
}

/* ══════════════════════════════════════════════════
   SCREEN TRANSITIONS
══════════════════════════════════════════════════ */
.screen {
    position:absolute; width:100%;
    display:flex; justify-content:center; padding:24px;
    opacity:0; pointer-events:none;
    transition:
        opacity .42s cubic-bezier(.4,0,.2,1),
        transform .42s cubic-bezier(.4,0,.2,1);
    transform:translateY(18px) scale(.985);
    will-change:opacity,transform;
}
.screen.active {
    opacity:1; pointer-events:auto;
    transform:translateY(0) scale(1);
    position:relative;
}
.screen.exit {
    opacity:0; pointer-events:none;
    transform:translateY(-14px) scale(.99);
}

/* ══════════════════════════════════════════════════
   CARD
══════════════════════════════════════════════════ */
.card {
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--r);
    padding:40px; width:100%;
    position:relative; overflow:hidden;
    animation:card-breathe 7s ease-in-out infinite;
}
.card.sm  { max-width:460px; }
.card.md  { max-width:580px; }
.card.lg  { max-width:750px; }
.card::before {
    content:''; position:absolute;
    top:0; left:10%; right:10%; height:1px;
    background:linear-gradient(90deg,transparent,rgba(124,111,247,.65),rgba(56,217,192,.45),transparent);
}
@keyframes card-breathe {
    0%,100% { box-shadow:0 0 0 0 rgba(124,111,247,0), 0 8px 40px rgba(0,0,0,.45); }
    50%      { box-shadow:0 0 0 1px rgba(124,111,247,.12), 0 8px 48px rgba(0,0,0,.5); }
}

/* ══════════════════════════════════════════════════
   BADGE
══════════════════════════════════════════════════ */
.badge {
    display:inline-flex; align-items:center; gap:7px;
    padding:5px 13px 5px 8px;
    background:rgba(124,111,247,.08);
    border:1px solid rgba(124,111,247,.2);
    border-radius:100px;
    font-size:11px; font-weight:700; letter-spacing:.07em;
    text-transform:uppercase; color:var(--accent); margin-bottom:26px;
}
.bdot {
    width:5px; height:5px; border-radius:50%;
    background:var(--accent); box-shadow:0 0 7px var(--accent);
    animation:bdot 2.4s ease-in-out infinite;
}
@keyframes bdot {
    0%,100% { opacity:1; transform:scale(1); }
    50%      { opacity:.35; transform:scale(.55); }
}

/* ══════════════════════════════════════════════════
   TYPOGRAPHY
══════════════════════════════════════════════════ */
.h1 { font-size:clamp(26px,5vw,40px); font-weight:800; line-height:1.12; letter-spacing:-.03em; }
.h2 { font-size:clamp(20px,4vw,30px); font-weight:700; line-height:1.18; letter-spacing:-.025em; }
.h3 { font-size:17px; font-weight:600; line-height:1.4; }
.muted { color:var(--text-muted); font-size:14px; line-height:1.65; }

.grad {
    background:linear-gradient(135deg,#a78fff 0%,#e879a0 50%,#38d9c0 100%);
    background-size:200% 200%;
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
    animation:gsh 6s ease infinite;
}
@keyframes gsh {
    0%   { background-position:0%   50%; }
    50%  { background-position:100% 50%; }
    100% { background-position:0%   50%; }
}

/* ══════════════════════════════════════════════════
   LABEL
══════════════════════════════════════════════════ */
.lbl {
    display:block; font-size:11px; font-weight:700;
    letter-spacing:.07em; text-transform:uppercase;
    color:var(--text-muted); margin-bottom:8px;
}

/* ══════════════════════════════════════════════════
   INPUT
══════════════════════════════════════════════════ */
.iw { position:relative; margin-bottom:14px; }
.inp {
    width:100%; background:var(--surface2);
    border:1px solid var(--border); border-radius:var(--r-sm);
    padding:13px 16px; font-size:14px;
    font-family:'Onest',sans-serif; color:var(--text); outline:none;
    transition:border-color .2s,box-shadow .2s,background .2s;
    -webkit-appearance:none;
}
.inp::placeholder { color:var(--text-dim); }
.inp:focus {
    border-color:rgba(124,111,247,.45);
    background:var(--surface3);
    animation:inp-ring 2.2s ease-in-out infinite;
}
@keyframes inp-ring {
    0%,100% { box-shadow:0 0 0 3px rgba(124,111,247,.08); }
    50%      { box-shadow:0 0 0 4px rgba(124,111,247,.15); }
}
.inp.ta { resize:none; min-height:116px; line-height:1.65; padding-top:14px; }
.hi .inp  { padding-left:42px; }
.iico {
    position:absolute; left:14px; top:65%;
    transform:translateY(-50%); color:var(--text-dim); pointer-events:none;
}

/* ══════════════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════════════ */
.btn {
    display:inline-flex; align-items:center; justify-content:center; gap:7px;
    padding:12px 22px; border-radius:var(--r-sm);
    font-size:14px; font-weight:600; font-family:'Onest',sans-serif;
    cursor:pointer; border:none;
    transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
    white-space:nowrap; position:relative; overflow:hidden; letter-spacing:.01em;
}
.btn::after {
    content:''; position:absolute; inset:0;
    background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.08) 50%,transparent 70%);
    transform:translateX(-120%); transition:transform .5s ease;
}
.btn:hover::after  { transform:translateX(120%); }
.btn:active        { transform:scale(.97) !important; }
.btn:disabled      { opacity:.5; cursor:not-allowed; pointer-events:none; }

/* Primary */
.bp {
    background:linear-gradient(135deg,#6253e1,#8775f5); color:#fff;
    box-shadow:0 2px 12px rgba(98,83,225,.38),inset 0 1px 0 rgba(255,255,255,.14);
}
.bp:hover { transform:translateY(-1px); box-shadow:0 5px 22px rgba(98,83,225,.55),inset 0 1px 0 rgba(255,255,255,.18); }

/* Ghost */
.bg2 {
    background:var(--surface2); border:1px solid var(--border-md); color:var(--text-muted);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.bg2:hover { border-color:var(--border-hi); color:var(--text); background:var(--surface3); }

/* Teal */
.bt {
    background:var(--surface2); border:1px solid rgba(56,217,192,.2); color:var(--accent3);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.bt:hover { background:rgba(56,217,192,.08); border-color:rgba(56,217,192,.4); }

/* Rec idle */
.brec {
    background:var(--surface2); border:1px solid rgba(232,121,160,.22); color:var(--accent2);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.brec:hover { background:rgba(232,121,160,.08); border-color:rgba(232,121,160,.4); }
/* Rec active */
.brec.on {
    background:linear-gradient(135deg,#b8305a,#e879a0);
    border-color:transparent; color:#fff;
    animation:rec-ring 1.2s ease-out infinite;
}
@keyframes rec-ring {
    0%   { box-shadow:0 2px 16px rgba(232,121,160,.5), 0 0 0 0   rgba(232,121,160,.35); }
    70%  { box-shadow:0 2px 16px rgba(232,121,160,.5), 0 0 0 10px rgba(232,121,160,0); }
    100% { box-shadow:0 2px 16px rgba(232,121,160,.5), 0 0 0 0   rgba(232,121,160,0); }
}

.bfull { width:100%; }

/* ══════════════════════════════════════════════════
   PROGRESS
══════════════════════════════════════════════════ */
.ph  { display:flex; justify-content:space-between; align-items:center; margin-bottom:9px; }
.plbl { font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); }
.ppct { font-size:11px; font-weight:700; color:var(--accent); }
.pt  { width:100%; height:2px; background:var(--surface3); border-radius:100px; overflow:visible; margin-bottom:28px; position:relative; }
.pf  {
    height:100%; border-radius:100px;
    background:linear-gradient(90deg,var(--accent),var(--accent3));
    transition:width .75s cubic-bezier(.4,0,.2,1); position:relative;
}
.pf::after {
    content:''; position:absolute; right:0; top:50%; transform:translate(50%,-50%);
    width:7px; height:7px; border-radius:50%; background:var(--accent3);
    box-shadow:0 0 10px var(--accent3); animation:dpulse 2s ease-in-out infinite;
}
@keyframes dpulse {
    0%,100% { box-shadow:0 0  6px rgba(56,217,192,.7); }
    50%      { box-shadow:0 0 16px rgba(56,217,192,1);  }
}

/* ══════════════════════════════════════════════════
   QUESTION
══════════════════════════════════════════════════ */
.qtopic {
    display:inline-block; padding:3px 10px;
    background:rgba(56,217,192,.07); border:1px solid rgba(56,217,192,.18);
    border-radius:100px; font-size:10px; font-weight:700;
    letter-spacing:.07em; text-transform:uppercase; color:var(--accent3); margin-bottom:14px;
}
.qtext {
    font-size:clamp(15px,2.8vw,19px); font-weight:500; line-height:1.6;
    color:var(--text); margin-bottom:24px; transition:opacity .45s ease;
}

/* ══════════════════════════════════════════════════
   AUDIO ZONE
══════════════════════════════════════════════════ */
.audio-zone {
    background:var(--surface2); border:1px solid var(--border);
    border-radius:var(--r-sm); padding:16px; margin-top:14px;
}

/* Mic visualizer */
.mic-vis {
    display:flex; align-items:center; justify-content:center;
    gap:3px; height:36px; margin-bottom:12px;
}
.mic-bar {
    width:3px; border-radius:100px;
    background:linear-gradient(180deg,var(--accent),var(--accent3));
    height:4px; transition:height .07s ease; transform-origin:bottom;
}

/* Audio action row */
.audio-btns { display:flex; gap:8px; flex-wrap:wrap; }

/* Status tag */
.vstatus {
    display:inline-flex; align-items:center; gap:5px;
    font-size:12px; color:var(--text-muted); margin-top:8px; min-height:18px;
}
.rdot {
    width:5px; height:5px; border-radius:50%; background:#e879a0;
    animation:bdot .9s ease-in-out infinite;
}

/* Audio player */
.aplayer {
    margin-top:12px;
    background:var(--surface3); border:1px solid var(--border-md);
    border-radius:var(--r-sm); padding:12px 14px;
    display:flex; align-items:center; gap:11px;
    position:relative; overflow:hidden;
}
.aplayer::before {
    content:''; position:absolute; inset:0;
    background:linear-gradient(90deg,rgba(124,111,247,.04),transparent); pointer-events:none;
}
.aplay {
    width:32px; height:32px; border-radius:50%; flex-shrink:0; cursor:pointer;
    background:linear-gradient(135deg,#6253e1,#8775f5); border:none;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 2px 10px rgba(98,83,225,.45); transition:all .15s;
}
.aplay:hover { transform:scale(1.1); box-shadow:0 3px 18px rgba(98,83,225,.65); }
.aplay svg   { width:12px; height:12px; fill:white; }
.wf  { flex:1; height:26px; display:flex; align-items:center; gap:2px; cursor:pointer; }
.wb  { flex:1; border-radius:100px; background:var(--border-md); transition:background .12s,transform .12s; min-width:2px; }
.wb.p { background:var(--accent); }
.wb.c { background:var(--accent3); box-shadow:0 0 5px var(--accent3); }
.wb:hover { background:rgba(124,111,247,.45) !important; transform:scaleY(1.25); }
.atime { font-size:11px; font-weight:600; color:var(--text-muted); flex-shrink:0; font-variant-numeric:tabular-nums; min-width:34px; text-align:right; }
.aname { font-size:11px; color:var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:120px; }

/* ══════════════════════════════════════════════════
   NAVIGATION
══════════════════════════════════════════════════ */
.nav { display:flex; justify-content:space-between; align-items:center; margin-top:24px; gap:10px; }

/* ══════════════════════════════════════════════════
   GENERATING SCREEN
══════════════════════════════════════════════════ */
.gvis { display:flex; align-items:center; justify-content:center; margin:32px 0; }
.orb  { position:relative; width:72px; height:72px; }
.orb::before,.orb::after {
    content:''; position:absolute; border-radius:50%; border:1.5px solid transparent;
}
.orb::before {
    inset:0; border-top-color:var(--accent); border-right-color:rgba(124,111,247,.2);
    animation:sp 1.1s linear infinite;
}
.orb::after {
    inset:9px; border-bottom-color:var(--accent3); border-left-color:rgba(56,217,192,.2);
    animation:sp .75s linear infinite reverse;
}
@keyframes sp { to { transform:rotate(360deg); } }
.orbc {
    position:absolute; inset:22px; border-radius:50%;
    background:linear-gradient(135deg,var(--accent),var(--accent3));
    animation:osc 2.4s ease-in-out infinite;
}
@keyframes osc {
    0%,100% { box-shadow:0 0 14px rgba(124,111,247,.4); }
    50%      { box-shadow:0 0 30px rgba(124,111,247,.8), 0 0 14px rgba(56,217,192,.35); }
}

/* ══════════════════════════════════════════════════
   ANONYMITY CHOICE CARDS
══════════════════════════════════════════════════ */
.cgrid { display:grid; grid-template-columns:1fr 1fr; gap:11px; margin-top:22px; }
.ccard {
    background:var(--surface2); border:1px solid var(--border);
    border-radius:var(--r); padding:22px 18px;
    cursor:pointer; text-align:center; transition:all .2s ease;
    position:relative; overflow:hidden;
}
.ccard::after  { content:''; position:absolute; inset:0; border-radius:var(--r); opacity:0; transition:opacity .2s; }
.ccard:hover   { transform:translateY(-2px); }
.ccard:hover::after { opacity:1; }
.ca::after     { background:rgba(56,217,192,.05); }
.ca:hover      { border-color:rgba(56,217,192,.35); }
.cp::after     { background:rgba(124,111,247,.05); }
.cp:hover      { border-color:rgba(124,111,247,.35); }
.ciw  { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; margin:0 auto 10px; }
.cit  { background:rgba(56,217,192,.09);  border:1px solid rgba(56,217,192,.2); }
.cip  { background:rgba(124,111,247,.09); border:1px solid rgba(124,111,247,.2); }
.ctit { font-size:13px; font-weight:700; margin-bottom:4px; }
.cdesc { font-size:11px; color:var(--text-muted); line-height:1.5; }

/* Personal form */
.pform { display:none; margin-top:22px; padding-top:22px; border-top:1px solid var(--border); }
.pform.show { display:block; animation:fup .3s ease; }
@keyframes fup {
    from { opacity:0; transform:translateY(-10px); }
    to   { opacity:1; transform:translateY(0); }
}

/* ══════════════════════════════════════════════════
   FINAL SCREEN
══════════════════════════════════════════════════ */
.ficon {
    width:64px; height:64px; border-radius:50%;
    background:linear-gradient(135deg,rgba(124,111,247,.14),rgba(56,217,192,.14));
    border:1px solid rgba(124,111,247,.25);
    display:flex; align-items:center; justify-content:center;
    margin:0 auto 22px;
    animation:fpop .55s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes fpop {
    0%  { transform:scale(.4); opacity:0; }
    70% { transform:scale(1.1); }
    100%{ transform:scale(1); opacity:1; }
}

/* ══════════════════════════════════════════════════
   TOAST NOTIFICATIONS
══════════════════════════════════════════════════ */
.toast {
    position:fixed; bottom:28px; left:50%;
    transform:translateX(-50%) translateY(16px);
    background:var(--surface2); border:1px solid var(--border-md);
    border-radius:var(--r-sm); padding:12px 20px;
    font-size:13px; font-weight:500; color:var(--text);
    box-shadow:0 8px 32px rgba(0,0,0,.55);
    opacity:0; pointer-events:none; z-index:9999;
    transition:opacity .3s ease, transform .3s cubic-bezier(.34,1.56,.64,1);
    max-width:340px; text-align:center;
    display:flex; align-items:center; gap:10px;
}
.toast.up { opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto; }
.toast.e  { border-left:3px solid #e879a0;border-right:3px solid #e879a0; color:#f0a8c0; }
.toast.s  { border-left:3px solid var(--accent3); border-right:3px solid var(--accent3); color:#7ee8d8; }
.toast.w  { border-left:3px solid #f5c542; border-right:3px solid #f5c542;color:#f5d97a; }
.toast.i  { border-left:3px solid var(--accent); border-right:3px solid var(--accent); color:#b0a8ff; }

/* ══════════════════════════════════════════════════
   CONFIRM DIALOG
══════════════════════════════════════════════════ */
.confirm-overlay {
    position:fixed; inset:0; z-index:9000;
    display:flex; align-items:center; justify-content:center;
    background:rgba(7,7,13,.72); backdrop-filter:blur(6px);
    opacity:0; pointer-events:none;
    transition:opacity .3s ease;
    padding:24px;
}
.confirm-overlay.active { opacity:1; pointer-events:auto; }

.confirm-box {
    background:var(--surface); border:1px solid var(--border-md);
    border-radius:var(--r); padding:32px 28px;
    max-width:400px; width:100%;
    transform:translateY(20px) scale(.97);
    transition:transform .35s cubic-bezier(.34,1.56,.64,1);
    position:relative; overflow:hidden;
}
.confirm-box::before {
    content:''; position:absolute; top:0; left:10%; right:10%; height:1px;
    background:linear-gradient(90deg,transparent,rgba(124,111,247,.65),rgba(56,217,192,.45),transparent);
}
.confirm-overlay.active .confirm-box { transform:translateY(0) scale(1); }

.confirm-icon {
    width:48px; height:48px; border-radius:50%;
    background:rgba(245,197,74,.08); border:1px solid rgba(245,197,74,.22);
    display:flex; align-items:center; justify-content:center;
    margin:0 auto 18px; font-size:22px;
}
.confirm-msg {
    font-size:15px; font-weight:500; line-height:1.65;
    color:var(--text); text-align:center; margin-bottom:24px;
}
.confirm-btns { display:flex; gap:10px; }
.confirm-btns .btn { flex:1; }

/* ══════════════════════════════════════════════════
   UTILS
══════════════════════════════════════════════════ */
.hidden { display:none !important; }
.tc     { text-align:center; }
.mt6  { margin-top:6px;  } .mt10 { margin-top:10px;  } .mt16 { margin-top:16px;  } .mt24 { margin-top:24px;  }
.mb6  { margin-bottom:6px; } .mb10 { margin-bottom:10px; } .mb16 { margin-bottom:16px; } .mb24 { margin-bottom:24px; }

/* ══════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════ */
@media (max-width:500px) {
    .card        { padding:26px 18px; }
    .cgrid       { grid-template-columns:1fr; }
    .audio-btns  { flex-direction:column; }
    .confirm-btns { flex-direction:column; }
    .toast       { max-width:calc(100vw - 40px); }
}

.chip {
    padding:5px 12px;
    border-radius:100px;
    font-size:11px; font-weight:500;
    background:var(--surface2);
    border:1px solid var(--border);
    color:var(--text-muted);
    white-space:nowrap;
}
#textInputWrap {
    display: grid;
    grid-template-rows: 1fr;
    opacity: 1;
    overflow: hidden;
    transition: grid-template-rows 0.35s ease, opacity 0.35s ease;
}

#textInputWrap.hidden {
    display: grid !important;  /* отменяем display:none от .hidden */
    grid-template-rows: 0fr;
    opacity: 0;
}

#textInputWrap > .iw {
    min-height: 0;
    overflow: hidden;
}

/* ══════════════════════════════════════════════════
FEEDBACK OVERLAY
══════════════════════════════════════════════════ */
.fb-overlay {
  position: fixed; inset: 0; z-index: 8500;
  display: flex; align-items: center; justify-content: center;
  background: rgba(7,7,13,.88); backdrop-filter: blur(12px);
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease;
  padding: 24px;
}
.fb-overlay.active { opacity: 1; pointer-events: auto; }

.fb-box {
  background: var(--surface);
  border: 1px solid var(--border-md);
  border-radius: var(--r);
  padding: 44px 36px 36px;
  max-width: 420px; width: 100%;
  text-align: center; position: relative; overflow: hidden;
  transform: translateY(28px) scale(.96);
  transition: transform .4s cubic-bezier(.34,1.56,.64,1);
}
.fb-overlay.active .fb-box { transform: translateY(0) scale(1); }

.fb-accent {
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  transition: background .3s ease;
}

.fb-emoji {
  font-size: 52px; line-height: 1;
  margin-bottom: 16px;
  animation: fb-pop .5s cubic-bezier(.34,1.56,.64,1) both .1s;
}
.fb-title { margin-bottom: 8px; }
.fb-msg   { margin-bottom: 12px; }
.fb-meta  {
  display: inline-block;
  padding: 4px 14px; border-radius: 100px;
  background: var(--surface2); border: 1px solid var(--border);
  font-size: 12px; color: var(--text-muted); font-weight: 600;
  letter-spacing: .04em; margin-bottom: 28px;
}
.fb-btns {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}
/* кружки
*/
.greeting-video-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin: 0 auto 24px;
}

.gv-circle {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--accent);
    box-shadow: 0 0 0 6px rgba(167,143,255,.15), 0 8px 32px rgba(0,0,0,.35);
    background: #111;
    flex-shrink: 0;
}

.greeting-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gv-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,.06);
    border-radius: 20px;
    padding: 6px 14px;
}

.gv-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text);
    display: flex;
    align-items: center;
    padding: 2px;
    opacity: .8;
    transition: opacity .15s;
}
.gv-btn:hover { opacity: 1; }

.gv-volume {
    -webkit-appearance: none;
    appearance: none;
    width: 90px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255,255,255,.2);
    outline: none;
    cursor: pointer;
}
.gv-volume::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
}

.gv-circle {
    position: relative;
    cursor: pointer;
}

.gv-overlay {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(0,0,0,.45);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .2s;
}

.gv-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}