.discord-copy-bar { display: inline-flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.65rem 1.25rem; height: 50px !important; border-radius: 50px !important; cursor: pointer; margin-top: 1.5rem; max-width: 90vw; width: auto; } .copy-discord-label, .discord-copy-actions { position: relative; z-index: 2; } .copy-discord-label { font-size: 0.85rem; color: var(--color-fg-dim); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .discord-copy-icon { display: flex; align-items: center; } .discord-copy-icon .check-icon { display: none; } .discord-copy-icon.copied .copy-icon { display: none; } .discord-copy-icon.copied .check-icon { display: block; } .discord-copy-actions { display: flex; align-items: center; gap: 0.375rem; } .discord-copy-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; color: var(--color-fg); transition: background var(--duration-fast) ease, color var(--duration-fast) ease; } .discord-copy-icon svg { transition: opacity 0.15s ease, transform 0.15s ease; } .discord-copy-icon .check-icon { position: absolute; opacity: 0; transform: scale(0.5); } .discord-copy-icon.copied .copy-icon { opacity: 0; transform: scale(0.5); } .discord-copy-icon.copied .check-icon { opacity: 1; transform: scale(1); } @media (max-width: 480px) { .copy-discord-label { max-width: 250px; } .discord-copy-bar { font-size: 0.75rem; padding: 0.4rem 0.4rem 0.4rem 0.875rem; } .discord-copy-icon { width: 28px; height: 28px; } } .platform-pill { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; background: rgba(255, 255, 255, 0.05); border-radius: var(--radius-pill); font-size: 0.8125rem; color: var(--color-fg-dim); } .platform-pill svg { flex-shrink: 0; } .platform-divider { color: var(--color-fg-dim); opacity: 0.5; } .mac-icon { display: block; }