feat: add labels

public/styles.css

@@ -221,6 +221,26 @@ p {
 	z-index: 1;
 }
 
+/* Labels */
+.member-labels {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.35rem;
+	margin-top: 0.5rem;
+}
+
+.label-chip {
+	display: inline-flex;
+	align-items: center;
+	font-size: 0.75rem;
+	padding: 0.15rem 0.45rem;
+	border-radius: 9999px;
+	background: rgba(255, 255, 255, 0.08);
+	border: 1px solid rgba(255, 255, 255, 0.15);
+	color: rgba(255, 255, 255, 0.9);
+	white-space: nowrap;
+}
+
 .member-card::before {
     content: '';
     position: absolute;
@@ -2042,4 +2062,49 @@ p {
 /* Preserve focus ring on active tab */
 .tab-button.active:focus-visible {
 	box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.35);
+} 
+
+/* Responsive Capability Selector */
+@media (max-width: 768px) {
+	.capability-selector {
+		flex-wrap: wrap;
+		align-items: stretch;
+	}
+	#capability-select {
+		flex: 1 1 100%;
+		width: 100%;
+		max-width: 100%;
+		min-width: 0;
+	}
+}
+
+@media (max-width: 480px) {
+	#capability-select {
+		padding-right: 1.75rem;
+		background-position: right 0.5rem center;
+		background-size: 10px 10px;
+	}
+} 
+
+/* Capability header mobile wrapping */
+@media (max-width: 768px) {
+	.capability-header {
+		flex-wrap: wrap;
+	}
+	.cap-uri {
+		flex: 1 1 100%;
+		min-width: 0;
+	}
+	.cap-call-btn {
+		flex: 1 1 100%;
+		width: 100%;
+		justify-content: center;
+		margin-top: 0.5rem;
+	}
+}
+
+@media (max-width: 480px) {
+	.cap-call-btn {
+		padding: 0.35rem 0.75rem;
+	}
 }