/* "Share RoCode" card under a finished build (lib/referral-share-card.js, 2026-10-13).
   The feedback card's family: a quiet panel in the message column, purple only as the dot,
   the focus ring and the one filled button. */
body#chat-page .chat-messages > .referral-share-card {
    display: flex;
    justify-content: flex-start;
    transition: opacity .18s ease, transform .18s ease;
    animation: referralShareIn .22s cubic-bezier(.22, .61, .36, 1) backwards;
}
body#chat-page .chat-messages > .referral-share-card.is-leaving { opacity: 0; transform: translateY(4px); }
@keyframes referralShareIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    body#chat-page .chat-messages > .referral-share-card { animation: none; transition: none; }
}

body#chat-page .referral-share-card__panel {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    width: 100%;
    max-width: 600px;
    padding: 14px 10px 14px 16px;
    border: 1px solid var(--v2-line-2, rgba(207, 195, 224, 0.17));
    border-radius: 12px;
    background: var(--v2-card, #15101f);
    box-sizing: border-box;
}
body#chat-page .referral-share-card__dot {
    flex: none;
    width: 6px;
    height: 6px;
    margin-top: 7px;
    border-radius: 50%;
    background: var(--v2-accent, #a78bfa);
}
body#chat-page .referral-share-card__copy { flex: 1 1 auto; min-width: 0; }
body#chat-page .referral-share-card__title { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.45; color: var(--v2-text, #f3eefc); }
body#chat-page .referral-share-card__status { margin: 2px 0 0; font-size: 13px; line-height: 1.5; color: var(--v2-text-2, #c5b9d8); }
body#chat-page .referral-share-card__status:empty { display: none; }
body#chat-page .referral-share-card__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; }
body#chat-page .referral-share-card__primary,
body#chat-page .referral-share-card__close {
    /* No site-wide button face (style.css): these two draw their own. */
    --rc-btn-face-bg: none !important;
    --rc-btn-face-shadow: none !important;
}
body#chat-page .referral-share-card__primary {
    height: 32px;
    padding: 0 14px;
    border: 0;
    border-radius: 8px;
    background: #7c3aed !important;
    box-shadow: none !important;
    text-shadow: none;
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease;
}
body#chat-page .referral-share-card__primary:hover { background: #8448f1 !important; }
body#chat-page .referral-share-card__primary:disabled { opacity: .6; cursor: default; }
body#chat-page .referral-share-card__link { font-size: 13px; font-weight: 500; color: var(--v2-text-2, #c5b9d8); text-decoration: none; }
body#chat-page .referral-share-card__link:hover { color: var(--v2-text, #f3eefc); text-decoration: underline; text-underline-offset: 3px; }
body#chat-page .referral-share-card__close {
    flex: none;
    width: 28px;
    height: 28px;
    margin: -6px 0 0;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--v2-text-3, #8f84a6);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
body#chat-page .referral-share-card__close:hover { background: rgba(255, 255, 255, 0.05) !important; color: var(--v2-text, #f3eefc); }
body#chat-page .referral-share-card button:focus-visible,
body#chat-page .referral-share-card a:focus-visible { outline: 2px solid var(--v2-accent, #a78bfa); outline-offset: 2px; }