.vouch { position:fixed; right:var(--s5); bottom:var(--s5); z-index:var(--z-pop); width:360px;
  background:linear-gradient(180deg, rgba(var(--discord-rgb),.10), transparent 40%), var(--bg2);
  border:var(--bd) solid var(--line2); box-shadow:var(--shadow);
  transform:translateX(calc(100% + 48px)); opacity:0; pointer-events:none;
  transition:transform .5s var(--ease-out), opacity .3s; }
.vouch.in { transform:none; opacity:1; pointer-events:auto; }
.vouch.out { transform:translateX(calc(100% + 48px)) rotate(5deg); opacity:0;
  transition:transform .45s cubic-bezier(.5,0,.75,0), opacity .4s .05s; }

.v-head { display:flex; align-items:center; gap:var(--s2); padding:var(--s2) var(--s2) var(--s2) var(--s3);
  border-bottom:1px solid var(--line); }
.v-mark { width:14px; height:14px; flex:none; color:var(--discord); }
.v-chan { font:600 var(--fs-micro)/1 var(--mono); letter-spacing:.1em; text-transform:uppercase;
  color:var(--discord-ink); }

.v-server { margin-left:auto; display:inline-flex; align-items:center; gap:10px; padding:4px 6px;
  border:1px solid transparent; text-decoration:none; transition:border-color var(--t-fast), background var(--t-fast); }
.v-server:hover { border-color:rgba(var(--discord-rgb),.45); background:rgba(var(--discord-rgb),.10);
  text-decoration:none; }
.v-count { display:inline-flex; align-items:center; gap:4px;
  font:600 12px/1 var(--mono); font-variant-numeric:tabular-nums; }
.v-count svg { width:13px; height:13px; flex:none; }
.v-count.on { color:var(--acc); }
.v-count.on svg { filter:drop-shadow(0 0 4px rgba(var(--acc-rgb),.6)); }
.v-count.all { color:var(--muted); }
.v-x { margin-left:auto; width:26px; height:26px; flex:none; display:grid; place-items:center;
  background:none; border:1px solid transparent; color:var(--muted); cursor:pointer;
  font:500 16px/1 var(--mono); }
.v-server:not([hidden]) + .v-x { margin-left:0; }
.v-x:hover { color:var(--text); border-color:var(--line2); }

.v-body { padding:var(--s3) var(--s3) 0; }
.v-who { display:flex; align-items:center; gap:10px; min-width:0; }
.v-av { width:32px; height:32px; flex:none; background:var(--bg3);
  border:var(--bd) solid var(--bg1); outline:1px solid var(--line2); }
.v-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font:600 14px/1.1 var(--ui); color:var(--text); }
.v-at { margin-left:auto; white-space:nowrap; font:500 var(--fs-micro)/1 var(--mono); color:var(--faint); }
.v-text { margin:var(--s3) 0 0; overflow:hidden; overflow-wrap:anywhere;
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical;
  font:16px/1.5 var(--ui); color:var(--text); }

.v-foot { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2); padding:var(--s3); }
.v-reacts { display:flex; flex-wrap:wrap; gap:6px; min-width:0; }
.v-react { display:inline-flex; align-items:center; gap:5px; padding:4px 7px 4px 6px;
  border:1px solid rgba(var(--discord-rgb),.35); background:rgba(var(--discord-rgb),.12);
  font:600 12px/1 var(--mono); font-variant-numeric:tabular-nums; color:var(--discord-ink); }
.v-react .e { font-size:14px; line-height:1; }
.v-react img { width:16px; height:16px; }
.v-proof { margin-left:auto; display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  padding:6px 8px; background:var(--bg1); border:1px solid var(--line2); color:var(--muted);
  font:600 var(--fs-micro)/1 var(--mono); letter-spacing:.1em; text-transform:uppercase;
  transition:color var(--t-fast), border-color var(--t-fast); }
.v-proof svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:square; }
.v-proof:hover { color:var(--text); border-color:rgba(var(--acc-rgb),.5); }
.v-done { display:inline-flex; align-items:center; gap:6px; color:var(--acc); }


.v-life { display:block; height:2px; background:var(--acc); transform-origin:left; transform:scaleX(0); }
.vouch.in .v-life { animation:v-life var(--v-show, 7s) linear forwards; }
.vouch.held .v-life { animation-play-state:paused; }
@keyframes v-life { from { transform:scaleX(1); } to { transform:scaleX(0); } }

@media (max-width:600px) {
  .vouch { left:var(--s4); right:var(--s4); bottom:calc(var(--s4) + env(safe-area-inset-bottom, 0px));
    width:auto; }
  .v-text { -webkit-line-clamp:3; font-size:15px; }
}