/* The "copied" confirmation that flashes for a couple of seconds after a
   click-to-copy — a public key on the Me card, an Accounts row, a QR code on
   the certification or receive page. Its own file because those live in two
   stylesheets that share nothing else (identity-card.css, qr-code.css), and
   one confirmation must not come in two colors.

   Absolutely positioned: whatever it flashes over says `position: relative`
   and places it. Reached via @import, so sibling URLs resolve against
   /styles/. */
.copy-confirmation {
    position: absolute;
    bottom: calc(100% + 6px);
    inset-inline-start: 0;
    padding: 3px 8px;
    font-family: system-ui, sans-serif;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    color: #ffffff;
    background: #22a06b;
    border-radius: 6px;
    /* Float clearly over whatever is above it rather than colliding with it. */
    z-index: 1;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.25);
}

.copy-confirmation[hidden] {
    display: none;
}

/* The floating one: placed at the pointer that asked for it, in viewport
   coordinates, because what it confirms — a QR code — is wide enough that a
   confirmation anchored to any one corner of it is a confirmation the reader
   was not looking at. It lives on document.body rather than in the component,
   so no shadow root's box can clip it and no ancestor transform can turn its
   `fixed` into something else; index.html loads this file for it. The agora
   answers a click on its own QR code exactly this way. */
.copy-confirmation--floating {
    position: fixed;
    bottom: auto;
    z-index: 20;
    /* Placed by its bottom centre, so the point it is given is the pointer
       itself: the box sits above the cursor and centred on it, out from under
       the hand rather than behind it. */
    transform: translate(-50%, -100%);
    /* It is a statement, not a target: a click meant for what is underneath
       must not land on it. */
    pointer-events: none;
}