/*
 * Logged-in app chrome, in line with the signup card.
 * Brand colours are set later by the config <style> block, so this file
 * only changes shape, type, and spacing.
 */

html,
body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	letter-spacing: -0.011em;
}

h1,
h2,
h3,
h4,
.page-title,
.panel-title,
.panel-subtitle {
	font-weight: 700;
	letter-spacing: -0.03em;
}

.page-title {
	box-sizing: border-box;
	width: 100%;
	margin: 12px auto 0;
	padding: 4px 15px 0;
	font-size: 22px;
	line-height: 1.25;
}

@media (min-width: 768px) {
	.page-title { width: 750px; }
}

@media (min-width: 992px) {
	.page-title { width: 970px; }
}

@media (min-width: 1200px) {
	.page-title { width: 1170px; }
}

.main-container {
	margin-top: 16px;
}

.panel,
.thumbnail,
.well,
.modal-content,
.dropdown-menu {
	background: #fff;
	border: 1px solid #e6e6e6;
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.panel-default,
.panel-default > .panel-heading {
	border-color: #e6e6e6;
	background: #fff;
}

.panel-heading {
	border-bottom: 1px solid #eee;
	border-radius: 10px 10px 0 0;
	padding: 14px 16px;
}

.panel-body {
	padding: 18px 16px;
}

.panel-title,
.panel-subtitle {
	font-size: 18px;
}

.panel-footer {
	background: #fff;
	border-top: 1px solid #eee;
	border-radius: 0 0 10px 10px;
}

.well {
	background: #f6f6f6;
	box-shadow: none;
}

.btn {
	border-radius: 6px;
	font-weight: 600;
	box-shadow: none;
}

.btn-lg {
	border-radius: 6px;
	padding: 12px 16px;
}

.btn-sm,
.btn-xs {
	border-radius: 6px;
}

.form-control,
.input-group-addon,
select.form-control {
	border-radius: 6px;
	border-color: #ddd;
	box-shadow: none;
}

.form-control {
	height: 42px;
}

textarea.form-control {
	height: auto;
}

.form-control:focus {
	border-color: #bbb;
	box-shadow: none;
}

label,
.control-label {
	font-weight: 600;
}

.navbar-default {
	border: 0;
	border-bottom: 1px solid #eee;
	box-shadow: none;
	min-height: 56px;
}

.alert-container {
	border-bottom: 1px solid #eee;
	background: #fff;
}

.alert-general {
	background: #fff;
	border: 0;
	border-radius: 0;
	color: #1a1a1a;
}

.settings-profile {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 4px 0 8px;
	padding: 14px 16px;
	background: #fff;
	border: 1px solid #e6e6e6;
	border-radius: 16px;
	color: #111;
	text-decoration: none;
}

.settings-profile::after {
	content: "›";
	margin-left: auto;
	color: #98a2b3;
	font-size: 22px;
	line-height: 1;
}

.settings-profile-img {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	object-fit: cover;
	flex: none;
	background: #f3f4f6;
}

.settings-profile-copy {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.settings-profile-name {
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.03em;
}

.settings-profile-sub {
	color: #667085;
	font-size: 14px;
	font-weight: 500;
}

.settings-group {
	margin: 18px 0;
}

.settings-group-label {
	margin: 0 4px 8px;
	font-size: 13px;
	font-weight: 600;
	color: #667085;
}

.settings-card {
	background: #fff;
	border: 1px solid #e6e6e6;
	border-radius: 16px;
	overflow: hidden;
}

.settings-row {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 52px;
	padding: 10px 16px;
	border-bottom: 1px solid #f0f1f3;
	color: #111;
	text-decoration: none;
}

.settings-row:last-child {
	border-bottom: 0;
}

.settings-row::after {
	content: "›";
	margin-left: auto;
	color: #98a2b3;
	font-size: 22px;
	line-height: 1;
}

.settings-row-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	background: #f3f4f6;
	color: #111;
	flex: none;
}

.settings-row-label {
	font-size: 16px;
	font-weight: 600;
}

.settings-row-copy {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.settings-row-hint {
	color: #667085;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.settings-row-danger,
.settings-row-danger .settings-row-label {
	color: #b42318;
}

.panel-settings p {
	border-bottom: 1px solid #f2f2f2;
	font-size: 16px;
	padding: 14px 18px;
}

.panel-settings p:last-child {
	border-bottom: 0;
}

.navbar-default .navbar-nav > li > a {
	font-weight: 600;
}

@media (max-width: 767px) {
	.navbar-nav li:before,
	.navbar-nav li:after {
		display: none;
	}

	.navbar-default .navbar-nav > li > a {
		font-size: 17px;
		padding-top: 14px;
		padding-bottom: 14px;
	}

	.ios-tab-bar {
		height: 56px;
		border-top: 1px solid #eee;
		background: rgba(255, 255, 255, 0.94);
		-webkit-backdrop-filter: blur(12px);
		backdrop-filter: blur(12px);
	}

	.main-container {
		padding-left: 10px;
		padding-right: 10px;
	}
}

.list-group-item {
	border-color: #eee;
}

.list-group-item:first-child {
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}

.list-group-item:last-child {
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}

.alert {
	border: 0;
	border-radius: 10px;
}

.modal-content {
	border: 0;
	overflow: hidden;
}

.modal-header,
.modal-footer {
	border-color: #eee;
}

.dropdown-menu {
	padding: 6px;
	overflow: hidden;
}

.dropdown-menu > li > a {
	border-radius: 6px;
	padding: 8px 12px;
}

.badge {
	border-radius: 999px;
	font-weight: 600;
	padding: 3px 7px;
}

.profile-card .profile-picture,
.img-rounded,
.thumbnail img {
	border-radius: 14px;
}

.pagination > li:first-child > a,
.pagination > li:first-child > span {
	border-radius: 6px 0 0 6px;
}

.pagination > li:last-child > a,
.pagination > li:last-child > span {
	border-radius: 0 6px 6px 0;
}

.checkbox-group-container {
	border: 1px solid #e6e6e6;
	border-radius: 10px;
}

.nav-tabs {
	border-bottom: 1px solid #eee;
}

.nav-tabs > li > a {
	border-radius: 8px 8px 0 0;
}

.table {
	margin-bottom: 0;
}

.table > thead > tr > th {
	border-bottom-width: 1px;
	font-weight: 600;
	color: #667085;
}

.profile-card,
.inbox-message-wrap {
	overflow: hidden;
}

.inbox-message-wrap.panel-primary {
	border-color: #e6e6e6;
}

.inbox-message-wrap .panel-body {
	padding: 12px 14px;
}

.inbox-message-image img,
.profile-picture-shape {
	border-radius: 14px;
}

.inbox-message-name {
	font-weight: 700;
	letter-spacing: -0.02em;
}

.inbox-message-timestamp {
	font-weight: 500;
	color: #667085;
}

.profile-controls .btn {
	border-color: #e6e6e6;
}

body {
	background: #f3f4f6;
}

.home-page .dating-card,
.home-page .dating-card .panel-body {
	background: transparent;
	border: 0;
	box-shadow: none;
}

.home-page .dating-card .panel-body {
	padding: 0 0 8px;
}

.home-page .dating-card-photo {
	position: relative;
	border-radius: 18px;
	overflow: hidden;
	background: #111;
}

.home-page .dating-card-photo img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: 0;
	display: block;
}

.home-page .dating-card {
	position: relative;
}

.home-page .dating-card-shade {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	padding: 56px 14px 72px;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0));
	color: #fff;
	text-align: left;
	pointer-events: none;
}

.home-page .dating-card-name {
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.1;
}

.home-page .dating-card-meta {
	margin-top: 2px;
	font-size: 14px;
	font-weight: 500;
}

.home-page .dating-card-age:not(:empty) + .dating-card-distance:not(:empty)::before {
	content: " · ";
}

.home-page .dating-card-dismiss {
	position: absolute;
	top: 2px;
	right: 2px;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	font-size: 17px;
	opacity: 0;
	transition: opacity 0.15s ease;
}

/* The visible circle is smaller than the 44px tap area. */
.home-page .dating-card-dismiss::before {
	content: "";
	position: absolute;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.45);
	transition: background 0.15s ease;
}

/* Site hide icons carry an inline colour meant for a white button. */
.home-page .dating-card-dismiss > * {
	position: relative;
	color: #fff !important;
}

.home-page .dating-card:hover .dating-card-dismiss,
.home-page .dating-card-dismiss:focus-visible {
	opacity: 1;
}

.home-page .dating-card-dismiss:hover::before,
.home-page .dating-card-dismiss:focus::before {
	background: rgba(0, 0, 0, 0.7);
}

/* No hover on touch screens, so keep it faintly visible there. */
@media (hover: none) {
	.home-page .dating-card-dismiss {
		opacity: 0.8;
	}
}

.home-page .dating-card-actions {
	display: flex;
	justify-content: center;
	gap: 14px;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 16px;
	z-index: 2;
	margin: 0;
}

.home-page .dating-card-action .btn {
	width: 52px;
	height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border-radius: 50%;
	line-height: 1;
	background: #fff;
	border: 0;
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16);
}

.people-list-page #profiles {
	background: #fff;
	border: 1px solid #e6e6e6;
	border-radius: 16px;
	overflow: hidden;
}

.person-row,
.person-row-main {
	display: flex;
	align-items: center;
	gap: 14px;
	color: #111;
	text-decoration: none;
}

.person-row {
	padding: 12px 16px;
	border-bottom: 1px solid #f0f1f3;
}

.person-row-main {
	flex: 1;
	min-width: 0;
}

.person-row-photo img {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

.person-row-copy {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.person-row-name {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.person-row-sub {
	color: #667085;
	font-size: 13px;
	font-weight: 500;
}

.person-row-message {
	flex: none;
	border: 1px solid #e6e6e6;
	border-radius: 999px;
	padding: 8px 14px;
	background: #fff;
	color: #111;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.inbox-page .all-messages-unseen,
.inbox-page .all-messages-seen {
	float: none;
	width: 100%;
	margin: 0 0 12px;
	padding: 0;
	background: #fff;
	border: 1px solid #e6e6e6;
	border-radius: 16px;
	overflow: hidden;
}

.inbox-page .person-row-copy {
	flex: 1;
	min-width: 0;
}

.inbox-page .person-row-topline {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.inbox-page .person-row-who {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.inbox-page .person-row-turn {
	display: none;
}

.inbox-page .person-row-turn.is-received {
	display: inline-block;
	flex: none;
	padding: 2px 8px;
	border-radius: 999px;
	background: #111;
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.01em;
}

.inbox-page .person-row-turn.is-received::before {
	content: "Your turn";
}

.inbox-page .person-row-preview {
	display: block;
	margin-top: 2px;
	color: #667085;
	font-size: 14px;
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.inbox-page .person-row-preview:empty {
	display: none;
}

.inbox-page .person-row-preview.is-sent::before {
	content: "You: ";
	font-weight: 600;
}

.inbox-page .all-messages-unseen .person-row-preview.is-received {
	color: #111;
	font-weight: 600;
}

.inbox-page .inbox-message-link {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 16px;
	border-bottom: 1px solid #f0f1f3;
	color: #111;
	text-decoration: none;
}

.inbox-page .inbox-message-link:last-child {
	border-bottom: 0;
}

.inbox-page .inbox-message-link::before,
.inbox-page .inbox-message-link::after {
	display: none;
}

.inbox-page a,
.chat-page a,
.chat-page button {
	-webkit-tap-highlight-color: transparent;
}

.inbox-page a:focus:not(:focus-visible),
.chat-page a:focus:not(:focus-visible),
.chat-page button:focus:not(:focus-visible),
.chat-page .btn:focus:not(:focus-visible) {
	outline: none;
}

.inbox-page .all-messages .inbox-message-link:active {
	background: #f7f7f8;
}

.inbox-page .all-messages .inbox-message-link:focus-visible {
	outline: 2px solid #111;
	outline-offset: -2px;
}

.inbox-page .inbox-message-image,
.inbox-page .person-row-photo {
	float: none;
	width: 52px;
	height: 52px;
	margin: 0;
	flex: none;
}

.inbox-page .inbox-message-image img,
.inbox-page .person-row-photo img {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

.inbox-page .inbox-message-meta,
.inbox-page .person-row-copy {
	float: none;
	width: auto;
	min-width: 0;
}

.inbox-page .all-messages-unseen .person-row-name::before,
.inbox-page .all-messages-unseen .inbox-message-name::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: 8px;
	border-radius: 50%;
	background: #111;
	vertical-align: middle;
}

.inbox-page .person-row-photo {
	position: relative;
}

.inbox-page .person-row-photo.is-online::after,
.inbox-page .inbox-match-photo.is-online::after {
	content: "";
	position: absolute;
	right: 1px;
	bottom: 1px;
	width: 14px;
	height: 14px;
	border: 2.5px solid #fff;
	border-radius: 50%;
	background: #12b76a;
}

/* New matches strip */

.inbox-page .inbox-section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 4px 2px 10px;
}

.inbox-page .inbox-section-title {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: #111;
}

.inbox-page .inbox-messages-title {
	margin: 18px 2px 10px;
}

.inbox-page .inbox-section-count {
	margin-left: 4px;
	color: #667085;
	font-weight: 600;
}

.inbox-page .inbox-section-link {
	color: #667085;
	font-size: 13px;
	font-weight: 600;
}

.inbox-page .inbox-matches-rail {
	display: flex;
	gap: 14px;
	margin: 0 -15px;
	padding: 2px 15px 6px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.inbox-page .inbox-matches-rail::-webkit-scrollbar {
	display: none;
}

.inbox-page .inbox-matches .inbox-match {
	display: flex;
	flex: none;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	width: 76px;
	padding: 0;
	border: 0;
	color: #111;
	text-decoration: none;
	scroll-snap-align: start;
}

.inbox-page .inbox-match-photo {
	position: relative;
	display: block;
	width: 72px;
	height: 72px;
	padding: 3px;
	border: 2px solid transparent;
	border-radius: 50%;
}

.inbox-page .inbox-match.is-unseen .inbox-match-photo {
	border-color: var(--brand-primary, #111);
}

.inbox-page .inbox-match-photo img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
}

.inbox-page .inbox-match-name {
	max-width: 100%;
	overflow: hidden;
	font-size: 13px;
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.inbox-page .inbox-match.is-unseen .inbox-match-name {
	font-weight: 700;
}

.inbox-page .inbox-match:focus-visible {
	outline: none;
}

.inbox-page .inbox-match:focus-visible .inbox-match-photo {
	box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.25);
}

.profile-page .profile-name {
	text-align: left;
	font-size: 28px;
}

.profile-page #profile-picture img {
	border-radius: 18px;
}

.empty-state {
	max-width: 440px;
	margin: 28px auto;
	padding: 36px 28px 32px;
	text-align: center;
	background: #fff;
	border: 1px solid #e6e6e6;
	border-radius: 20px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
}

.empty-state-mark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin: 0 auto 14px;
	border-radius: 50%;
	background: #f3f4f6;
	color: #111;
}

.empty-state-mark svg {
	display: block;
}

.empty-state-title {
	margin: 0 0 8px;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.03em;
}

.empty-state-body {
	margin: 0 auto;
	max-width: 34em;
	color: #667085;
	font-size: 15px;
	line-height: 1.5;
}

.empty-state-action {
	margin-top: 18px;
	border-radius: 999px;
	padding: 10px 18px;
	font-weight: 600;
}

.empty-state-compact {
	max-width: none;
	margin: 4px auto 16px;
	padding: 0;
	text-align: center;
	background: transparent;
	border: 0;
	box-shadow: none;
}

.empty-state-compact .empty-state-mark,
.empty-state-compact .empty-state-title,
.empty-state-compact .empty-state-action {
	display: none;
}

.inbox-page .all-messages {
	margin-left: 0;
	margin-right: 0;
}

.inbox-page .all-messages-unseen:not(:has(.inbox-message-link)),
.inbox-page .all-messages-seen:not(:has(.inbox-message-link)) {
	background: transparent;
	border: 0;
	box-shadow: none;
	margin: 0;
}

.profile-page .profile-sheet,
.profile-edit-page {
	max-width: 520px;
	margin-left: auto;
	margin-right: auto;
}

.profile-page .profile-hero {
	position: relative;
	border-radius: 18px;
	overflow: hidden;
	background: #111;
}

.profile-page .profile-picture,
.profile-page .flex-wrap,
.profile-page .flexslider,
.profile-page .flex-viewport,
.profile-page .slides,
.profile-page .slides li {
	margin: 0;
	border: 0;
	background: transparent;
}

.profile-page .slides img,
.profile-edit-page .profile-edit-photo img {
	width: 100%;
	aspect-ratio: 3 / 4;
	max-height: 520px;
	object-fit: cover;
	object-position: center 18%;
	display: block;
	height: auto !important;
}

.profile-page .profile-hero-shade {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	padding: 72px 16px 84px;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0));
	color: #fff;
	pointer-events: none;
}

.profile-page .profile-hero-name {
	margin: 0;
	color: #fff;
	font-size: 28px;
	font-weight: 700;
	letter-spacing: -0.03em;
	text-align: left;
	min-height: 0;
}

.profile-page .profile-hero-meta {
	margin: 4px 0 0;
	font-size: 14px;
	font-weight: 500;
}

.profile-page .profile-hero-meta span + span::before {
	content: " · ";
}

.profile-page .profile-controls {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 16px;
	z-index: 3;
	display: flex;
	justify-content: center;
	gap: 14px;
	margin: 0;
}

.profile-page .hide-user-button .glyphicon {
	color: #111 !important;
	font-size: 18px;
}

.profile-page .heart-link .glyphicon {
	font-size: 18px;
}
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16);
	line-height: 1;
}

.profile-page .custom-navigation {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 10px;
	pointer-events: none;
}

.profile-page .custom-navigation a {
	pointer-events: auto;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: transparent;
	font-size: 0;
	text-align: center;
	line-height: 36px;
	text-decoration: none;
}

.profile-page .flex-prev::before,
.profile-page .flex-next::before {
	color: #111;
	font-size: 22px;
	line-height: 36px;
}

.profile-page .flex-prev::before { content: "‹"; }
.profile-page .flex-next::before { content: "›"; }

.profile-page .profile-edit-chip {
	display: block;
	margin: 12px auto 0;
	width: fit-content;
	padding: 8px 14px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid #e6e6e6;
	color: #111;
	font-weight: 600;
	text-decoration: none;
}

.profile-page .profile-status,
.profile-page .profile-details {
	margin-top: 16px;
	padding: 16px 18px;
	background: #fff;
	border: 1px solid #e6e6e6;
	border-radius: 16px;
}

.profile-page .profile-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	margin-bottom: 8px;
	color: #667085;
	font-weight: 600;
}

.profile-page .profile-view-section-title {
	margin: 16px 0 4px;
	font-size: 13px;
	font-weight: 600;
	color: #667085;
}

.profile-page .profile-last-online {
	margin-top: 12px;
	color: #667085;
	font-size: 13px;
}

.profile-page .sendMessageButtonWrap .btn {
	border-radius: 999px;
	font-weight: 600;
}

.profile-page #block-and-report,
.profile-page #block-button,
.profile-page #block-user {
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 0;
	font-weight: 600;
}

.profile-page #block-and-report { color: #667085; }
.profile-page #block-button,
.profile-page #block-user { color: #b42318; }

.profile-page #block-and-report-buttons-wrap {
	display: flex;
	gap: 16px;
	margin-top: 8px;
}

.profile-page #block-and-report-buttons-wrap [class*="col-"] {
	width: auto;
	float: none;
	padding: 0;
}

.profile-edit-page .profile-edit-hero {
	position: relative;
	border-radius: 18px;
	overflow: hidden;
	background: #111;
}

.profile-edit-page .profile-edit-photo img {
	aspect-ratio: 4 / 5;
	max-height: 460px;
	object-fit: cover;
	object-position: center top;
}

.profile-edit-page .profile-edit-identity {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 56px 16px 16px;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0));
	color: #fff;
}

.profile-edit-page .edit-profile-title,
.profile-edit-page .profile-edit-links a,
.profile-edit-page .profile-edit-name {
	color: #fff;
}

.profile-edit-page .profile-edit-photo {
	border-radius: 18px;
	overflow: hidden;
	background: #111;
}

.profile-edit-page .edit-profile-title {
	margin: 0;
	font-size: 28px;
	font-weight: 700;
	letter-spacing: -0.03em;
}

.profile-edit-page .profile-edit-name {
	margin-left: 8px;
	font-size: 14px;
	font-weight: 600;
	color: #fff;
}

.profile-edit-page .profile-edit-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	margin-top: 6px;
}

.profile-edit-page .profile-edit-links a {
	font-weight: 600;
	color: #fff;
}

.profile-edit-page .profile-edit-thumbs {
	display: flex;
	gap: 8px;
	margin-top: 12px;
}

.profile-edit-page .profile-edit-thumb {
	width: 72px;
	height: 72px;
	border-radius: 12px;
	overflow: hidden;
}

.profile-edit-page .profile-edit-thumb img {
	width: 72px;
	height: 72px !important;
	object-fit: cover;
}

.profile-edit-page .profile-edit-card {
	margin-top: 16px;
	padding: 16px 18px 8px;
	background: #fff;
	border: 1px solid #e6e6e6;
	border-radius: 16px;
}

.profile-edit-page .profile-title,
.profile-edit-page .panel-subtitle {
	margin: 16px 0 6px;
	font-size: 13px;
	font-weight: 600;
	color: #667085;
}

.profile-edit-page #submitFormButton {
	border-radius: 999px;
	font-weight: 600;
}

.profile-edit-page #geocodeChange {
	font-weight: 600;
	cursor: pointer;
}

.photos-page {
	position: relative;
}

.photos-page #mockImageUpload {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}

.photos-page .container {
	max-width: 720px;
}

.photos-title {
	margin: 8px 0 6px;
	font-size: 28px;
	font-weight: 700;
	letter-spacing: -0.03em;
}

.photos-lead {
	max-width: 36em;
	margin: 0 0 16px;
	color: #667085;
}

.photos-main {
	position: relative;
	border-radius: 18px;
	overflow: hidden;
	background: #111;
	max-width: 420px;
}

.photos-main img,
.photos-page #imagePreview img {
	width: 100%;
	aspect-ratio: 3 / 4;
	max-height: 520px;
	object-fit: cover;
	display: block;
}

.photos-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 4px 10px;
	border-radius: 999px;
	background: #fff;
	color: #111;
	font-size: 13px;
	font-weight: 600;
}

.photos-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-top: 16px;
}

.photos-add,
.photos-tile {
	border-radius: 16px;
	overflow: hidden;
	background: #fff;
	border: 1px solid #e6e6e6;
}

.photos-add {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 180px;
	aspect-ratio: 1;
	padding: 12px;
	border-style: dashed;
	color: #111;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.photos-add-mark {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #111;
	color: #fff;
	font-size: 28px;
	line-height: 42px;
	font-weight: 500;
}

.photos-tile img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	display: block;
}

.photos-tile-actions {
	display: flex;
	gap: 8px;
	padding: 8px;
}

.photos-tile-actions a {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 6px 8px;
	border-radius: 999px;
	background: #f3f4f6;
	color: #111;
	font-size: 13px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.photos-tile-actions a[id^="delete-picture"] {
	flex: 0 0 auto;
	color: #b42318;
	background: #fef3f2;
}

.photos-uploading {
	margin-top: 12px;
	font-weight: 600;
}

.profile-edit-page .profile-edit-photo {
	position: relative;
}

.profile-photo-change {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	padding: 8px 12px;
	border-radius: 999px;
	background: #fff;
	color: #111;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}

.profile-photo-strip {
	display: flex;
	gap: 8px;
	margin-top: 12px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 4px;
}

.profile-photo-add,
.profile-photo-mini {
	flex: 0 0 96px;
	width: 96px;
	height: 96px;
	scroll-snap-align: start;
	border-radius: 14px;
	overflow: hidden;
}

.profile-photo-add {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	padding: 8px;
	border: 1px dashed #c8cdd5;
	background: #fff;
	color: #111;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
}

.profile-photo-add-mark {
	font-size: 22px;
	line-height: 1;
}

.profile-photo-mini img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

@media (min-width: 768px) {
	.photos-grid {
		grid-template-columns: 1fr 1fr 1fr;
	}

	.photos-main {
		max-width: none;
	}

	.photos-main img {
		max-height: 420px;
		aspect-ratio: 16 / 10;
	}
}

@media (max-width: 767px) {
	.photos-main img {
		aspect-ratio: 4 / 3;
		max-height: 320px;
	}

	.photos-add {
		grid-column: 1 / -1;
		flex-direction: row;
		aspect-ratio: auto;
		min-height: 64px;
		gap: 10px;
	}
}

.home-page .filterMatches.alert {
	padding: 0;
	margin: 8px 0 12px;
	background: transparent;
}

.home-page .home-filter-bar {
	display: flex;
	align-items: center;
	gap: 12px;
	float: none;
	padding: 2px 0 4px;
}

.home-page .home-filter-bar::before,
.home-page .home-filter-bar::after {
	display: none;
}

.home-page .home-filter-summary {
	flex: 1;
	float: none;
	width: auto;
	margin: 0;
	color: #3a3a3a;
	font-size: 14px;
	line-height: 1.4;
}

.home-page #change-filter-button,
.home-page #change-filter-button:hover,
.home-page #change-filter-button:focus,
.home-page #filter-submit-button,
.home-page #filter-submit-button:hover,
.home-page #filter-submit-button:focus {
	float: none;
	width: auto;
	margin: 0;
	color: #fff !important;
	background-color: #111 !important;
	border-color: #111 !important;
	border-radius: 999px;
	font-weight: 600;
	white-space: nowrap;
	box-shadow: none;
}

.home-page #change-filter-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 0 16px;
}

.home-page #filter-options {
	margin-top: 4px;
	padding: 18px 18px 14px;
	background: #fff;
	border: 1px solid #e6e6e6;
	border-radius: 16px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.home-page .home-filter-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px 28px;
	margin: 0;
}

.home-page .home-filter-grid::before,
.home-page .home-filter-grid::after {
	display: none;
}

.home-page .home-filter-grid > [class*="col-"] {
	float: none;
	width: auto;
	max-width: none;
	padding: 0;
	margin: 0;
	min-width: 0;
}

.home-page .filter-section-fields:not(:has(*)) {
	display: none;
}

.home-page .home-filter-grid-sorted .col-xs-12 {
	float: none;
	width: 100%;
	padding: 0;
	margin: 0 0 16px;
}

.home-page .filter-title {
	margin: 0 0 12px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0;
	color: #667085;
}

.home-page .filter-tip {
	margin: 0 0 12px;
	font-size: 14px;
	color: #667085;
}

.home-page .home-filter-label {
	margin: 0 0 8px;
	color: #667085;
	font-size: 13px;
	font-weight: 600;
}

.home-page .home-filter-value {
	margin: 0 0 4px;
	color: #111;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
}

.home-page .home-filter-value strong {
	font-weight: 700;
}

.home-page .home-filter-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.home-page .home-filter-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	min-height: 44px;
	padding: 8px 14px;
	border: 1px solid #e4e4e4;
	border-radius: 999px;
	background: #fff;
}

.home-page .home-filter-pill:has(input:checked) {
	background: #111;
	border-color: #111;
	color: #fff;
}

.home-page .home-filter-pill input {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: #111;
	flex: none;
}

.home-page .home-filter-pill:has(input:checked) input {
	accent-color: #fff;
}

.home-page .home-filter-pill label {
	margin: 0;
	font-weight: 600;
	cursor: pointer;
}

.home-page .home-filter-slider {
	padding: 16px 18px 6px;
}

.home-page .home-filter .noUi-target {
	height: 4px;
	border: 0;
	border-radius: 999px;
	background: #e6e6e6;
	box-shadow: none;
}

.home-page .home-filter .noUi-connects {
	border-radius: 999px;
}

.home-page .home-filter .noUi-connect {
	background: #111;
}

.home-page .home-filter .noUi-horizontal .noUi-handle {
	width: 28px;
	height: 28px;
	top: -12px;
	right: -14px;
	border: 2px solid #111;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
	cursor: grab;
}

.home-page .home-filter .noUi-handle:before,
.home-page .home-filter .noUi-handle:after {
	display: none;
}

.home-page .home-filter-toggle {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 48px;
	margin: 0;
	border-bottom: 1px solid #f0f0f0;
}

.home-page .home-filter-toggle input {
	order: 1;
	width: 22px;
	height: 22px;
	margin: 0;
	accent-color: #111;
	flex: none;
}

.home-page .home-filter-toggle label {
	order: 0;
	flex: 1;
	margin: 0;
	font-weight: 600;
	cursor: pointer;
}

.home-page .home-filter-toggle input:disabled + label,
.home-page .filter-likes-me-disabled-text {
	color: #98a2b3;
	font-weight: 600;
	text-decoration: none;
}

.home-page .filter-likes-me-disabled-link {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	font-weight: 600;
}

.home-page .home-filter-keyword {
	margin: 14px 0 0;
}

.home-page .home-filter-keyword .form-control {
	width: 100%;
}

.home-page .home-filter-actions {
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-start;
	gap: 8px;
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid #eee;
	text-align: left;
}

.home-page .home-filter-actions .btn {
	float: none;
	width: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	margin: 0;
	padding: 0 18px;
}

.home-page .home-filter-cancel,
.home-page .home-filter-cancel:hover,
.home-page .home-filter-cancel:focus {
	background: transparent !important;
	border-color: transparent !important;
	color: #111 !important;
	box-shadow: none;
}

.home-page #filter-options .btn-block {
	border-radius: 999px;
}

@media (min-width: 768px) {
	.home-page .home-filter-grid {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
		align-items: start;
	}

	.home-page .filter-section-who,
	.home-page .filter-section-age,
	.home-page .filter-section-distance {
		grid-column: 1;
	}

	.home-page .filter-section-more {
		grid-column: 2;
		grid-row: 1 / span 4;
	}

	.home-page .filter-section-fields {
		grid-column: 1 / -1;
	}

	.home-page .home-filter-grid-sorted {
		grid-template-columns: 1fr 1fr;
	}

	.home-page .home-filter-grid-sorted > .filter-section {
		grid-column: auto;
		grid-row: auto;
	}
}

@media (max-width: 767px) {
	.home-page .home-filter-bar {
		align-items: flex-start;
	}

	.home-page #change-filter-button {
		margin-left: auto;
	}

	.home-page .home-filter-pill {
		flex: 1 1 0;
		justify-content: center;
	}

	.home-page .home-filter-actions {
		flex-direction: column;
	}

	.home-page .home-filter-actions .btn {
		width: 100%;
	}
}

.subscribe-page .subscribe-sheet {
	max-width: 520px;
	margin: 0 auto;
	float: none;
}

.subscribe-page .text-warning,
.subscribe-page .text-success {
	display: block;
	margin: 0 0 12px;
	padding: 12px 14px;
	border-radius: 12px;
	background: #f6f6f6;
	color: #111;
}

.subscribe-reason,
.subscribe-modal-reason {
	margin: 0 0 14px;
	color: #111;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.3;
}

.subscribe-empty {
	margin: 0 0 8px;
	padding: 14px 16px;
	border-radius: 12px;
	background: #f6f6f6;
	color: #3a3a3a;
}

.subscribe-blurb {
	margin-top: 8px;
	color: #3a3a3a;
	font-size: 15px;
	line-height: 1.45;
}

.plan-cards {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 12px;
}

.plan-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	float: none;
	width: auto;
	min-height: 64px;
	margin: 0;
	padding: 12px 16px;
	border: 1px solid #e4e4e4 !important;
	border-radius: 14px !important;
	background: #fff !important;
	color: #111 !important;
	text-align: left;
	white-space: normal;
}

.plan-card-length {
	font-size: 16px;
	font-weight: 600;
}

.plan-card-price {
	font-size: 16px;
	font-weight: 700;
}

.plan-card.selected-price,
.plan-card.btn-success,
.plan-card.selected-price:hover,
.plan-card.btn-success:hover {
	background: #111 !important;
	border-color: #111 !important;
	color: #fff !important;
}

.subscribe-checkout {
	margin: 8px 0;
}

.subscribe-page #buttonSubscribe,
.subscribe-modal #buttonSubscribe,
.subscribe-page #buttonSubscribe:hover,
.subscribe-modal #buttonSubscribe:hover,
.subscribe-page #buttonSubscribe:focus,
.subscribe-modal #buttonSubscribe:focus {
	width: 100%;
	min-height: 48px;
	border-radius: 999px;
	color: #fff !important;
	background: #111 !important;
	border-color: #111 !important;
	font-weight: 600;
	box-shadow: none;
}

.subscribe-secure {
	margin: 8px 0 0;
	color: #667085;
	font-size: 13px;
	text-align: center;
}

.subscribe-benefits {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
}

.subscribe-benefits li {
	padding: 12px 0;
	border-top: 1px solid #f0f0f0;
}

.subscribe-benefits strong {
	display: block;
	margin-bottom: 2px;
}

.subscribe-benefits span {
	display: block;
	color: #667085;
	font-size: 14px;
	line-height: 1.4;
}

.subscribe-page .table {
	margin-top: 16px;
}

.subscribe-page #cancelSubscription,
.subscribe-page #cancelSubscription:hover,
.subscribe-page #cancelSubscription:focus {
	background: transparent;
	border: 0;
	box-shadow: none;
	color: #b42318;
	padding: 8px 0;
}

.subscribe-modal {
	position: fixed;
	z-index: 4000;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	background: rgba(0, 0, 0, 0.45);
}

.subscribe-modal.hidden {
	display: none !important;
}

.subscribe-modal-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-height: 92vh;
	overflow: auto;
	padding: 8px 16px 28px;
	background: #fff;
	border-radius: 20px 20px 0 0;
}

.subscribe-modal-close {
	align-self: flex-end;
	min-height: 44px;
	margin: 0 -8px 0 0;
	padding: 0 8px;
	border: 0;
	background: transparent;
	color: #111;
	font-weight: 600;
}

.subscribe-modal-loading {
	clear: both;
	color: #667085;
}

body.subscribe-modal-open {
	overflow: hidden;
}

.hidden-likesLimit-text .alert {
	background: #fff;
	border: 1px solid #e6e6e6;
	border-radius: 16px;
	color: #111;
}

@media (min-width: 768px) {
	.subscribe-modal {
		align-items: center;
		padding: 24px;
	}

	.subscribe-modal-card {
		max-width: 480px;
		border-radius: 20px;
		padding: 12px 20px 24px;
	}
}


/*
 * Conversation screen. Everything is scoped to .chat-page so the old
 * message rules in main.css and other pages stay untouched.
 */

.chat-page {
	display: flex;
	flex-direction: column;
	max-width: 760px;
	min-height: calc(100vh - var(--chat-chrome, 0px));
	min-height: calc(100dvh - var(--chat-chrome, 0px));
	margin-top: 0;
	padding-bottom: var(--chat-bottom, 0px);
}

.chat-page::before,
.chat-page::after {
	display: none;
}

.chat-page .chat-thread {
	display: flex;
	flex: 1 0 auto;
	flex-direction: column;
	justify-content: flex-end;
}

/* Header */

.chat-page .chat-header-wrap {
	position: sticky;
	top: var(--chat-top, 0px);
	z-index: 20;
	margin: 0 -15px;
	background: rgba(255, 255, 255, 0.94);
	border-bottom: 1px solid #eee;
	-webkit-backdrop-filter: saturate(180%) blur(12px);
	backdrop-filter: saturate(180%) blur(12px);
}

.chat-page .chat-header {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 10px 8px;
}

.chat-page .chat-back,
.chat-page .chat-menu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #111;
}

.chat-page .chat-back:hover,
.chat-page .chat-back:focus,
.chat-page .chat-menu-toggle:hover,
.chat-page .chat-menu-toggle:focus,
.chat-page .chat-menu-toggle[aria-expanded="true"] {
	background: #f3f4f6;
	color: #111;
	outline: none;
}

.chat-page .chat-who {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1;
	min-width: 0;
	color: #111;
	text-decoration: none;
}

.chat-page .chat-avatar,
.chat-page .chat-intro-photo {
	position: relative;
	display: block;
	flex: none;
}

.chat-page .chat-avatar img {
	display: block;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
}

.chat-page .chat-avatar.is-online::after,
.chat-page .chat-intro-photo.is-online::after {
	content: "";
	position: absolute;
	right: 1px;
	bottom: 1px;
	width: 12px;
	height: 12px;
	border: 2px solid #fff;
	border-radius: 50%;
	background: #12b76a;
}

.chat-page .chat-who-copy {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.chat-page .chat-name {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.25;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.chat-page .chat-status {
	color: #667085;
	font-size: 13px;
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.chat-page .chat-status.is-online {
	color: #067647;
}

.chat-page .chat-menu-wrap {
	position: relative;
	flex: none;
}

.chat-page .chat-menu {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	z-index: 30;
	min-width: 210px;
	padding: 6px;
	background: #fff;
	border: 1px solid #e6e6e6;
	border-radius: 14px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

.chat-page .chat-menu[hidden] {
	display: none;
}

.chat-page .chat-menu-item {
	display: block;
	padding: 10px 12px;
	border-radius: 10px;
	color: #111;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
}

.chat-page .chat-menu-item:hover,
.chat-page .chat-menu-item:focus {
	background: #f3f4f6;
	color: #111;
	text-decoration: none;
	outline: none;
}

.chat-page .chat-menu-item.is-danger,
.chat-page .chat-menu-item.is-danger:hover {
	color: #b42318;
}

/* Thread */

.chat-page .chat-thread {
	padding: 8px 0 4px;
}

.chat-page #allMessages {
	min-height: 0;
	margin: 0;
	padding: 0 4px;
}

.chat-page .chat-older,
.chat-page .chat-system {
	margin: 12px 0 4px;
	text-align: center;
}

.chat-page .chat-older-link {
	display: inline-block;
	padding: 7px 14px;
	border: 1px solid #e6e6e6;
	border-radius: 999px;
	background: #fff;
	color: #111;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}

.chat-page .chat-system {
	color: #667085;
	font-size: 13px;
	font-weight: 500;
}

.chat-page .chat-match svg {
	margin-right: 4px;
	vertical-align: -2px;
	color: #e31b54;
}

.chat-page .chat-divider {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 18px 0 10px;
	color: #667085;
	font-size: 12px;
	font-weight: 600;
}

.chat-page .chat-divider::before,
.chat-page .chat-divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: #eee;
}

.chat-page .chat-divider--new {
	color: #b42318;
}

.chat-page .chat-divider--new::before,
.chat-page .chat-divider--new::after {
	background: #fecdca;
}

/* Bubbles */

.chat-page .chat-msg,
.chat-page .chat-msg.individual-message--from-me,
.chat-page .chat-msg.individual-message--to-me {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	float: none;
	width: auto;
	margin: 2px 0 0;
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
}

.chat-page .chat-msg.is-group-start {
	margin-top: 10px;
}

.chat-page .chat-msg.individual-message--from-me {
	justify-content: flex-end;
}

.chat-page .chat-msg .chat-msg-avatar {
	flex: none;
	float: none;
	width: 28px;
	height: 28px;
	margin-bottom: 20px;
	visibility: hidden;
}

.chat-page .chat-msg.is-group-end .chat-msg-avatar {
	visibility: visible;
}

.chat-page .chat-msg .chat-msg-avatar img,
.chat-page .chat-msg .chat-msg-avatar img.img-square {
	display: block;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	object-fit: cover;
}

.chat-page .chat-msg-stack {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	max-width: min(78%, 520px);
	min-width: 0;
}

.chat-page .individual-message--from-me .chat-msg-stack {
	align-items: flex-end;
}

.chat-page .chat-msg .chat-bubble {
	float: none;
	width: auto;
	max-width: 100%;
	padding: 9px 14px;
	border: 1px solid #ececec;
	border-radius: 20px;
	background: #fff;
	color: #111;
	font-size: 15px;
	line-height: 1.4;
	overflow-wrap: anywhere;
}

.chat-page .individual-message--to-me:not(.is-group-start) .chat-bubble {
	border-top-left-radius: 6px;
}

.chat-page .individual-message--to-me:not(.is-group-end) .chat-bubble {
	border-bottom-left-radius: 6px;
}

.chat-page .chat-msg.individual-message--from-me .chat-bubble {
	border-color: transparent;
	background: var(--brand-primary, #111);
	color: var(--brand-primary-text, #fff);
}

.chat-page .individual-message--from-me:not(.is-group-start) .chat-bubble {
	border-top-right-radius: 6px;
}

.chat-page .individual-message--from-me:not(.is-group-end) .chat-bubble {
	border-bottom-right-radius: 6px;
}

.chat-page .chat-msg .individual-message-body {
	margin: 0;
	padding: 0;
	background: none;
	word-wrap: break-word;
}

.chat-page .chat-msg .individual-message-body a {
	color: inherit;
	text-decoration: underline;
}

.chat-page .chat-msg.is-pending .chat-bubble {
	opacity: 0.6;
}

.chat-page .chat-msg.is-failed .chat-bubble {
	opacity: 0.6;
	box-shadow: 0 0 0 2px #fda29b;
}

.chat-page .chat-bubble-locked {
	background: #f9fafb;
}

.chat-page .chat-locked-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
}

.chat-page .chat-msg .chat-locked-link {
	text-decoration: none;
}

.chat-page .chat-msg-meta {
	display: none;
	gap: 6px;
	margin: 3px 6px 0;
	color: #98a2b3;
	font-size: 11px;
	font-weight: 500;
}

.chat-page .chat-msg.is-group-end .chat-msg-meta,
.chat-page .chat-msg.has-receipt .chat-msg-meta,
.chat-page .chat-msg.is-pending .chat-msg-meta,
.chat-page .chat-msg.is-failed .chat-msg-meta {
	display: flex;
}

.chat-page .chat-receipt::before,
.chat-page .chat-row-status::before {
	content: "·";
	margin-right: 6px;
}

.chat-page .chat-receipt.is-seen {
	color: #475467;
	font-weight: 600;
}

.chat-page .is-failed .chat-row-status {
	color: #b42318;
}

.chat-page .chat-retry {
	padding: 0;
	border: 0;
	background: none;
	color: #b42318;
	font-weight: 700;
	text-decoration: underline;
}

.chat-page .chat-error,
.chat-page .chat-warning,
.chat-page .chat-notice {
	margin: 12px 0;
	border-radius: 12px;
	font-size: 14px;
}

/* First message */

.chat-page .chat-intro {
	margin: 24px auto 12px;
	padding: 28px 20px 22px;
	max-width: 440px;
	text-align: center;
	background: #fff;
	border: 1px solid #e6e6e6;
	border-radius: 20px;
}

.chat-page .chat-intro.hidden {
	display: none;
}

.chat-page .chat-intro-photo {
	width: 96px;
	margin: 0 auto 14px;
}

.chat-page .chat-intro-photo img {
	display: block;
	width: 96px;
	height: 96px;
	border-radius: 50%;
	object-fit: cover;
}

.chat-page .chat-intro-photo.is-online::after {
	right: 6px;
	bottom: 6px;
	width: 16px;
	height: 16px;
	border-width: 3px;
}

.chat-page .chat-intro-title {
	margin: 0 0 6px;
	font-size: 20px;
}

.chat-page .chat-intro-body {
	margin: 0 auto 16px;
	max-width: 32em;
	color: #667085;
	font-size: 14px;
	line-height: 1.5;
}

.chat-page .chat-icebreakers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

.chat-page .chat-icebreaker {
	padding: 8px 14px;
	border: 1px solid #e6e6e6;
	border-radius: 999px;
	background: #fff;
	color: #111;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	text-align: left;
}

.chat-page .chat-icebreaker:hover,
.chat-page .chat-icebreaker:focus {
	border-color: #111;
	outline: none;
}

/* Composer */

.chat-page .chat-composer-wrap {
	position: sticky;
	bottom: var(--chat-composer-bottom, 0px);
	z-index: 15;
	margin: 8px -15px 0;
	padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
	background: rgba(255, 255, 255, 0.96);
	border: 0;
	border-top: 1px solid #eee;
	border-radius: 0;
	box-shadow: none;
}

.chat-page .chat-composer {
	display: flex;
	align-items: flex-end;
	gap: 8px;
}

.chat-page .chat-composer .chat-input {
	flex: 1;
	min-height: 44px;
	max-height: 140px;
	height: 44px;
	padding: 10px 16px;
	border: 1px solid #e6e6e6;
	border-radius: 22px;
	background: #f9fafb;
	font-size: 16px;
	line-height: 1.35;
	resize: none;
	overflow-y: hidden;
	box-shadow: none;
}

.chat-page .chat-composer .chat-input.is-tall {
	overflow-y: auto;
}

.chat-page .chat-composer .chat-input:focus {
	border-color: #c4c8cf;
	background: #fff;
}

.chat-page .chat-composer .chat-send {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--brand-primary, #111);
	color: var(--brand-primary-text, #fff);
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.chat-page .chat-composer .chat-send.is-empty,
.chat-page .chat-composer .chat-send[disabled],
.chat-page .chat-composer .chat-send.disabled {
	opacity: 0.35;
}

.chat-page .chat-composer .chat-send:not(.is-empty):active {
	transform: scale(0.94);
}

.chat-page .chat-cant-send {
	margin: 0 0 10px;
	border-radius: 12px;
	font-size: 14px;
}

.chat-page .chat-jump {
	position: absolute;
	left: 50%;
	bottom: calc(100% + 10px);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	border: 0;
	border-radius: 999px;
	background: #111;
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
	transform: translateX(-50%);
}

.chat-page .chat-jump.hidden {
	display: none;
}

/* Delete, block, and report sheet */

.chat-page .chat-sheet {
	position: fixed;
	inset: 0;
	z-index: 1050;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.chat-page .chat-sheet[hidden],
.chat-page .chat-sheet-section[hidden] {
	display: none;
}

.chat-page .chat-sheet-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(16, 24, 40, 0.45);
}

.chat-page .chat-sheet-card {
	position: relative;
	width: 100%;
	max-width: 480px;
	max-height: 88vh;
	overflow-y: auto;
	padding: 22px 20px calc(18px + env(safe-area-inset-bottom, 0px));
	background: #fff;
	border-radius: 20px 20px 0 0;
	box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.16);
}

.chat-page .chat-sheet-card:focus {
	outline: none;
}

.chat-page .chat-sheet .form-control {
	font-size: 16px;
}

.chat-page .chat-sheet-title {
	margin: 0 0 8px;
	font-size: 19px;
}

.chat-page .chat-sheet-body {
	margin: 0 0 16px;
	color: #475467;
	font-size: 15px;
	line-height: 1.5;
}

.chat-page .chat-sheet-actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 8px;
}

.chat-page .chat-sheet-actions .btn {
	margin: 0;
	padding: 11px 16px;
	border-radius: 999px;
}

.chat-page .chat-report-reasons .radio {
	margin: 0;
	padding: 10px 0;
	border-bottom: 1px solid #f0f1f3;
}

.chat-page .chat-report-reasons .radio label {
	display: block;
	font-weight: 500;
}

.chat-page .chat-report-reasons #other-report {
	margin-top: 8px;
}

body.chat-sheet-open {
	overflow: hidden;
}

@media (min-width: 768px) {
	.chat-page .chat-header-wrap,
	.chat-page .chat-composer-wrap {
		margin-left: 0;
		margin-right: 0;
	}

	.chat-page .chat-header-wrap {
		border: 1px solid #eee;
		border-top: 0;
		border-radius: 0 0 16px 16px;
	}

	.chat-page .chat-composer-wrap {
		border: 1px solid #eee;
		border-bottom: 0;
		border-radius: 16px 16px 0 0;
	}

	.chat-page .chat-sheet {
		align-items: center;
	}

	.chat-page .chat-sheet-card {
		border-radius: 20px;
	}
}