/*
 * Private messages and friends (4.3.13, REQ-451, REQ-494 to REQ-497). Loaded on /messages/ and /messages/friends/ only.
 * Phone first: one column, tap targets of 44px, the conversation alone on the screen once it is open.
 */

.bnb-messages-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bnb-space-2);
	margin-block: 0 var(--bnb-space-4);
}

.bnb-messages-tabs a {
	align-items: center;
	border: 1px solid var(--bnb-line);
	border-radius: 999px;
	color: var(--bnb-ink);
	display: inline-flex;
	gap: var(--bnb-space-2);
	min-block-size: 44px;
	padding-inline: var(--bnb-space-4);
	text-decoration: none;
}

.bnb-messages-tabs a[aria-current="page"] {
	background: var(--bnb-surface-2);
	border-color: var(--bnb-gold);
	font-weight: 700;
}

.bnb-messages-count,
.bnb-circle-mark,
.bnb-unread-mark {
	background: var(--bnb-gold-pale);
	border-radius: 999px;
	color: var(--bnb-gold-ink);
	font-size: 0.85rem;
	font-weight: 700;
	padding: 0.1rem 0.6rem;
}

.bnb-thread-list li.is-unread strong {
	font-weight: 800;
}

.bnb-thread-list .bnb-circle-mark,
.bnb-thread-list .bnb-unread-mark {
	display: inline-block;
	margin-block-start: 0.25rem;
}

.bnb-back-to-threads {
	display: none;
}

.bnb-conversation-peer {
	color: var(--bnb-muted);
	margin-block: 0.25rem 0;
}

.bnb-conversation .bnb-circle-mark {
	display: inline-block;
	margin-block: 0.25rem 0;
}

.bnb-message-gate {
	display: grid;
	gap: var(--bnb-space-3);
	justify-items: start;
}

.bnb-message-gate form {
	margin: 0;
}

.bnb-messages-page .bnb-form-help {
	color: var(--bnb-muted);
	font-size: 0.9rem;
	margin-block: 0.25rem 0.75rem;
}

/* The friends page: one column on a phone, two from a tablet up. */
.bnb-friends-grid {
	display: grid;
	gap: var(--bnb-space-4);
}

.bnb-friends-panel {
	background: var(--bnb-surface);
	border: 1px solid var(--bnb-line);
	border-radius: var(--bnb-r);
	min-inline-size: 0;
	padding: 1rem;
}

.bnb-friends-panel h2 {
	margin-block-start: 0;
}

.bnb-people-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bnb-people-list li {
	align-items: center;
	border-block-end: 1px solid var(--bnb-line);
	display: flex;
	flex-wrap: wrap;
	gap: var(--bnb-space-2) var(--bnb-space-3);
	justify-content: space-between;
	padding-block: 0.75rem;
}

.bnb-people-list li:last-child {
	border-block-end: 0;
}

.bnb-person-name {
	align-items: center;
	color: var(--bnb-ink);
	display: inline-flex;
	font-weight: 700;
	gap: var(--bnb-space-2);
	min-block-size: 44px;
	min-inline-size: 0;
	overflow-wrap: anywhere;
	text-decoration: none;
}

.bnb-person-note {
	color: var(--bnb-muted);
	flex-basis: 100%;
	order: 2;
}

.bnb-person-actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--bnb-space-2);
	order: 3;
}

.bnb-person-actions form,
.bnb-friend-group form {
	margin: 0;
}

.bnb-messages-page .bnb-link-button {
	background: none;
	border: 0;
	color: var(--bnb-muted);
	cursor: pointer;
	font: inherit;
	font-size: 0.9rem;
	min-block-size: 44px;
	padding: 0 0.25rem;
	text-decoration: underline;
}

.bnb-audience-form fieldset {
	border: 0;
	display: grid;
	gap: var(--bnb-space-2);
	margin: 0 0 var(--bnb-space-3);
	padding: 0;
}

.bnb-friends-page .bnb-audience-form .bnb-choice-card {
	align-items: center;
	border: 1px solid var(--bnb-line);
	border-radius: var(--bnb-r-sm);
	cursor: pointer;
	display: flex;
	gap: var(--bnb-space-3);
	min-block-size: 48px;
	padding-inline: var(--bnb-space-3);
}

.bnb-audience-form .bnb-choice-card:has(input:checked) {
	background: var(--bnb-surface-2);
	border-color: var(--bnb-gold);
	font-weight: 700;
}

.bnb-choice-card input,
.bnb-choice-sub input,
.bnb-except input,
.bnb-friend-group input[type="checkbox"] {
	block-size: 1.25rem;
	inline-size: 1.25rem;
}

.bnb-choice-sub,
.bnb-except,
.bnb-friend-group form {
	display: grid;
	gap: var(--bnb-space-1);
}

.bnb-choice-sub {
	padding-inline-start: 2.25rem;
}

.bnb-friends-page .bnb-friends-panel .bnb-choice-sub label,
.bnb-friends-page .bnb-friends-panel .bnb-except label,
.bnb-friends-page .bnb-friends-panel .bnb-friend-group label {
	align-items: center;
	display: flex;
	gap: var(--bnb-space-2);
	min-block-size: 44px;
}

.bnb-except {
	margin-block-end: var(--bnb-space-3);
}

.bnb-except summary {
	cursor: pointer;
	font-weight: 700;
	min-block-size: 44px;
	padding-block: 0.6rem;
}

.bnb-inline-form {
	align-items: end;
	display: flex;
	flex-wrap: wrap;
	gap: var(--bnb-space-2);
	margin-block-end: var(--bnb-space-4);
}

.bnb-inline-form label {
	flex-basis: 100%;
}

.bnb-inline-form input {
	flex: 1 1 12rem;
	min-block-size: 44px;
	min-inline-size: 0;
}

.bnb-friend-group {
	border-block-start: 1px solid var(--bnb-line);
	padding-block: var(--bnb-space-3);
}

.bnb-friend-group h3 {
	margin-block: 0 var(--bnb-space-2);
}

@media (min-width: 48rem) {
	.bnb-friends-grid {
		align-items: start;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.bnb-friends-panel {
		padding: 1.4rem;
	}

	.bnb-person-note {
		flex-basis: auto;
		order: 0;
	}
}

/* On a phone an open conversation takes the screen; the list is one tap away. */
@media (max-width: 42.5rem) {
	.bnb-messages-layout.has-active > aside {
		display: none;
	}

	.bnb-back-to-threads {
		display: inline-flex;
		min-block-size: 44px;
		align-items: center;
	}

	.bnb-message-compose .bnb-button,
	.bnb-message-gate .bnb-button {
		inline-size: 100%;
	}
}

.bnb-requests-tray li {
 background: var(--bnb-surface); border: 1px solid var(--bnb-line); border-radius: var(--bnb-r); padding: 1rem; margin-block: 0.75rem;
}
.bnb-request-actions { display: flex; flex-wrap: wrap; gap: var(--bnb-space-2); align-items: center; margin-block: 0.75rem; }
.bnb-request-actions form { margin: 0; }