/* ============================================================
   deathlyill — share button + report icon
   Pin the share affordance into the top-right of the glass card,
   matching the screenshot's circular icon.
   ============================================================ */

.sharediv {
    position: absolute !important;
    top: 14px;
    right: 14px;
    z-index: 4;
    margin: 0 !important;
    padding: 0 !important;
}

.sharediv > div { margin: 0 !important; padding: 0 !important; }

.sharebutton,
.share-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: var(--pill-size, 38px);
    height: var(--pill-size, 38px);
    padding: 0 !important;
    margin: 0 !important;

    background: var(--pill-bg, rgba(20, 24, 32, 0.55)) !important;
    border: 1px solid var(--pill-border, rgba(255, 255, 255, 0.10)) !important;
    border-radius: 50%;

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    cursor: pointer;
    transition: background 0.15s ease, transform 0.12s ease;
    box-shadow: none !important;
}

.sharebutton:hover,
.share-button:hover {
    background: rgba(40, 48, 60, 0.75) !important;
    transform: translateY(-1px);
}

/* Override the inline style="color:black" on the share icon. */
.sharebutton-img,
.share-icon {
    color: #ffffff !important;
    font-size: 14px !important;
    line-height: 1 !important;
}

/* The "Share" label is hidden — only the icon is shown, like
   the reference. Restore it by removing this rule. */
.sharebutton-mb { display: none !important; }

/* Report pill — leave functional but visually neutral. */
.report-pill-container { bottom: 30px !important; left: 20px !important; }
.report-expanding-pill { background-color: rgba(20, 24, 32, 0.85) !important; }