/* ── Mobile member profile sheet ─────────────────────────────────────
   Stacks on top of the ChannelDetailsDrawer member list on mobile.
   Layout mirrors the Fluxer reference: big banner, avatar overlapping
   the banner, name + handle, optional Edit Profile button, then a
   vertical stack of rounded cards for Member Since / Roles / Note. */

/* Override the default BottomSheet surface colour. The shared
   `--background-secondary` feels too light sitting on top of the
   members drawer (also secondary) — the profile sheet needs to read
   as a distinct layer, so it uses the darker `--background-primary`
   instead. Passed via the BottomSheet `className` prop. */
.sheet {
	background-color: var(--background-primary);
}

.root {
	display: flex;
	flex-direction: column;
	min-height: 100%;
	padding-bottom: 32px;
}

.banner {
	position: relative;
	flex-shrink: 0;
	height: 160px;
	width: 100%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* In-banner drag handle — replaces the default BottomSheet handle
   row so the drag affordance sits inside the colored banner area
   instead of on its own strip above it. White/translucent so it
   remains visible on any banner colour or image. */
.bannerHandle {
	position: absolute;
	top: 8px;
	left: 50%;
	transform: translateX(-50%);
	width: 40px;
	height: 4px;
	border-radius: 2px;
	background-color: rgba(255, 255, 255, 0.6);
	pointer-events: none;
}

/* Row under the banner that holds the avatar on the left and the
   "more" action button on the right. Negative top margin lifts the
   avatar to overlap the banner by half its height. */

.headerRow {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	padding: 0 1rem;
	margin-top: -44px;
}

.avatarWrap {
	padding: 4px;
	border-radius: 50%;
	background-color: var(--background-primary);
	box-sizing: content-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* The sheet surface is `--background-primary`, so the Avatar's
	   status dot needs a matching cut-out ring to blend. */
	--avatar-status-border: var(--background-primary);
}

.moreButton {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: none;
	background-color: var(--background-secondary-alt);
	color: var(--text-primary);
	cursor: pointer;
	transition: background-color 0.15s;
	-webkit-tap-highlight-color: transparent;
	margin-bottom: 4px;
}

.moreButton:active {
	background-color: var(--background-modifier-hover);
}

/* ── Name block + edit button ───────────────────────────────────────*/

.nameBlock {
	display: flex;
	align-items: baseline;
	gap: 6px;
	padding: 12px 1rem 0;
	flex-wrap: wrap;
}

.displayName {
	font-size: 22px;
	font-weight: 800;
	line-height: 1.1;
	color: var(--text-primary);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 100%;
}

.handle {
	font-size: 16px;
	font-weight: 600;
	color: var(--text-primary-muted, #a0a3a8);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.editProfileButton {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 14px 1rem 0;
	padding: 12px 16px;
	background-color: var(--brand-primary);
	color: #fff;
	border: none;
	border-radius: 0.75rem;
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: filter 0.15s;
	-webkit-tap-highlight-color: transparent;
}

.editProfileButton:active {
	filter: brightness(0.92);
}

/* ── Card stack ─────────────────────────────────────────────────────*/

.cardStack {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px 1rem 0;
}

.card {
	background-color: var(--background-secondary-alt);
	border-radius: 0.75rem;
	padding: 14px 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.cardTitleRow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.cardTitle {
	font-size: 15px;
	font-weight: 700;
	color: var(--text-primary);
}

.cardAction {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: none;
	background-color: var(--background-modifier-hover, rgba(255, 255, 255, 0.06));
	color: var(--text-primary-muted);
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s;
	-webkit-tap-highlight-color: transparent;
}

.cardAction:active {
	background-color: var(--background-modifier-accent, rgba(255, 255, 255, 0.1));
	color: var(--text-primary);
}

.cardSubtitle {
	font-size: 13px;
	font-weight: 500;
	color: var(--text-primary-muted);
	font-style: italic;
}

/* ── Member Since row ───────────────────────────────────────────────*/

.memberSinceRow {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	font-weight: 500;
	color: var(--text-primary);
}

.memberSinceIcon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background-color: var(--brand-primary-light);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	flex-shrink: 0;
	overflow: hidden;
}

.memberSinceIcon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.memberSinceSeparator {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background-color: var(--text-primary-muted);
	opacity: 0.5;
	flex-shrink: 0;
}

/* ── Roles ──────────────────────────────────────────────────────────*/

.rolesList {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.rolePill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	background-color: var(--background-secondary);
	border: 1px solid var(--background-modifier-accent, rgba(255, 255, 255, 0.08));
	border-radius: 999px;
	font-size: 12px;
	font-weight: 500;
}

.roleDot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
}

.roleName {
	color: var(--text-primary);
	max-width: 180px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.noRoles {
	font-size: 13px;
	font-style: italic;
	color: var(--text-primary-muted);
}
