v3: invite panel reworked — "+ Invite someone" toggles a panel sized to the action row, easing in like the inline editors: link field fused with a full-width Copy, single-use/7-day hint, no longer clipped or faded on mobile

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

src/App.css

@@ -2337,19 +2337,24 @@ body.has-player .chat-fab {
   color: var(--color-accent);
 }
 
+/* Grid sized by the button row; the invite panel below only fills that
+   width (width: 0 + min-width: 100% keeps it out of the sizing). */
 .profile-own-actions {
+  display: grid;
+  width: fit-content;
+  max-width: 100%;
+  gap: 0.5rem;
+  margin-top: 0.5rem;
+}
+.profile-own-actions-row {
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
-  margin-top: 0.5rem;
   align-items: center;
 }
 .profile-own-actions .btn-border {
   margin-top: 0;
 }
-.invite-generate {
-  display: contents;
-}
 
 .invite-btn {
   padding: 0.3rem 0.9rem;
@@ -2358,51 +2363,80 @@ body.has-player .chat-fab {
   background: transparent;
   color: var(--color-accent);
   font-size: var(--text-sm);
+  font-family: inherit;
   cursor: pointer;
   transition: background var(--dur-base), color var(--dur-base);
 }
-.invite-btn:hover {
+.invite-btn:hover:not(:disabled),
+.invite-btn[aria-expanded="true"] {
   background: var(--color-accent);
   color: var(--color-on-accent);
 }
+.invite-btn:disabled {
+  cursor: progress;
+}
 
-.invite-result {
+/* Raised above the info column's narrow-viewport overflow fade
+   (.profile-info::after) so the Copy button isn't washed out. */
+.invite-panel {
+  position: relative;
+  z-index: 1;
+  width: 0;
+  min-width: 100%;
+  box-sizing: border-box;
+}
+.invite-panel:not(.invite-panel--error) {
   display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  max-width: 480px;
-}
-.invite-url {
-  font-size: var(--text-xs);
-  font-family: var(--font-mono, monospace);
-  color: var(--color-text-muted);
-  flex: 1;
-  min-width: 0;
-  overflow-x: auto;
-  white-space: nowrap;
+  flex-direction: column;
+  padding: 0.5rem;
   background: var(--color-surface);
-  border: 1px solid var(--color-border-subtle);
   border-radius: var(--radius-md);
-  padding: 0.35rem 0.6rem;
 }
-/* Always-visible copy target. Sits first so it's the obvious tap. */
-.invite-copy-btn {
-  order: -1;
-  flex-shrink: 0;
-  padding: 0.2rem 0.65rem;
-  border: 1px solid var(--color-border-subtle);
-  border-radius: var(--radius-sm);
-  background: transparent;
-  color: var(--color-text);
+.invite-panel-hint {
+  margin-top: 0.4rem;
   font-size: var(--text-xs);
-  cursor: pointer;
-  white-space: nowrap;
-  transition: background var(--dur-fast);
+  color: var(--color-text-muted);
+  text-align: center;
 }
-.invite-copy-btn:hover {
+
+/* Link field and Copy button fused into one control. */
+.invite-url {
+  min-width: 0;
+  padding: 0.35rem 0.6rem;
+  border: 1.5px solid var(--color-border);
+  border-bottom: none;
+  border-radius: var(--radius-md) var(--radius-md) 0 0;
+  background: var(--color-surface-sunken);
+  color: var(--color-text);
+  font-family: inherit;
+  font-size: var(--text-sm);
+  text-overflow: ellipsis;
+}
+.invite-url:focus {
+  outline: none;
+  border-color: var(--color-accent);
+}
+.invite-copy-btn {
+  padding: 0.35rem 0.9rem;
+  border: 1.5px solid var(--color-accent);
+  border-radius: 0 0 var(--radius-md) var(--radius-md);
   background: var(--color-accent);
   color: var(--color-on-accent);
-  border-color: var(--color-accent);
+  font-family: inherit;
+  font-size: var(--text-sm);
+  font-weight: 600;
+  cursor: pointer;
+  transition: background var(--dur-fast), border-color var(--dur-fast);
+}
+.invite-copy-btn:hover {
+  background: var(--color-accent-hover);
+  border-color: var(--color-accent-hover);
+}
+.invite-copy-btn--done,
+.invite-copy-btn--done:hover {
+  background: var(--color-success-bg);
+  border-color: var(--color-success);
+  color: var(--color-success);
 }
 
 /* ── Profile sub-pages (dumps / upvoted / playlists) ── */