/* ============================================================
   Messaging
   ============================================================ */

/* Chat header */
#page-chat .header {
	display: flex;
	align-items: center;
	padding: var(--space-4);
	flex-shrink: 0;
	position: fixed;
	width: 100%;
	max-width: 78rem;
	left: 50%;
	transform: translateX(-50%);
}

#page-chat .header .btn-back,
#page-chat .header .menu-button {
	width: 40px;
	height: 40px;
	border: none;
	background: transparent;
	border-radius: var(--radius-full);
	cursor: pointer;
	color: var(--foreground);
	transition: background 0.2s;
}

#page-chat .header-user {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	flex: 1;
	min-width: 0;
	cursor: pointer;
}

#page-chat .header-info {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

#page-chat .header-name {
	display: flex;
	align-items: center;
	gap: var(--space-2);

	font-size: var(--text-xl);
}

#page-chat .header-status {
	font-size: var(--text-xs);
	color: var(--muted);
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

#page-chat .header-status.online {
	color: var(--success);
}

#page-chat .header-status.verified {
	color: var(--member-verified-bg);
}

#page-chat .header-status.verified svg {
	color: var(--member-verified-bg);
}

#page-chat .header-status.not-verified {
	color: var(--muted);
}

#page-chat .header-status.not-verified svg {
	color: var(--muted);
}

/* System message sender header */
#page-chat .header-system {
	cursor: default;
}

#page-chat .header-status.system-sender {
	color: var(--muted);
	font-size: var(--text-xs);
	font-style: italic;
}

#page-chat .header nav.actions {
	flex-shrink: 0;
	margin-left: auto;
}
#page-chat .header-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

#page-chat .header-badge.badge-verified {
	color: var(--member-verified-bg);
}

#page-chat .header-badge.badge-not-verified {
	color: var(--member-not-verified-bg);
}


/* System message no-reply notice */
#page-chat .system-notice {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: var(--space-4);
}

.system-no-reply-notice {
	color: var(--muted);
	padding: var(--space-3) var(--space-5);
	border-radius: var(--radius-md);
	font-size: var(--text-sm);
	text-align: center;
	font-style: italic;
}

/* Blocked user notice in chat */
#page-chat .blocked-notice {
	padding: 0;
}

#page-chat .blocked-notice .blocked-banner {
	border-radius: 0;
	width: 100%;
}


/* Match badge (heart icon next to name when mutual like) */
.match-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--error);
	margin-left: var(--space-1);
	animation: match-pulse 0.5s ease-in-out;
}

@keyframes match-pulse {
	0% { transform: scale(1); }
	50% { transform: scale(1.3); }
	100% { transform: scale(1); }
}

.unlocked-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--success);
	margin-left: var(--space-1);
}

.blocked-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--error);
	margin-left: var(--space-1);
}

/* Unlock Messages Dropdown */
.unlocks {
	position: relative;
	margin-left: var(--space-2);
}

.btn-unlock {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-3);
	background: var(--primary);
	color: var(--button-text);
	border: none;
	border-radius: var(--radius-sm);
	font-size: var(--text-sm);
	font-weight: 500;
	cursor: pointer;
	transition: background 0.15s;
}

.unlocks ul {
	position: absolute;
	top: calc(100% + 4px);
	right: 0;
	min-width: 280px;
	background: var(--card-bg);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
	z-index: 100;
	list-style: none;
	margin: 0;
	padding: 0;
}

.unlocks li {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 0 var(--space-2);
	padding: var(--space-4);
	border-bottom: 1px solid var(--border);
	color: var(--popup-text);
	text-align: left;
	cursor: pointer;
	transition: background 0.15s;
}

.unlocks li:last-of-type {
	border-bottom: none;
}

.unlocks li.unlocked,
.unlocks li.active {
	background: var(--accent);
	cursor: default;
	color: var(--success);
}

.unlocks li.loading {
	opacity: 0.7;
	pointer-events: none;
}

.unlocks li h3 {
	font-weight: 500;
	font-size: var(--text-sm);
	margin: 0;
}

.unlocks li p {
	grid-column: 1 / -1;
	font-size: var(--text-xs);
	line-height: var(--line-height-tight);
	margin: 0;
}


/* Messages container */
#page-chat .messages {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	padding: var(--space-4);
	padding-top: 80px; /* Space for fixed chat header */
	padding-bottom: 30vh; /* Space for fixed input + bottom nav */
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

/* Loading states */
#page-chat .loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex: 1;
	gap: var(--gap-base);
	color: var(--muted);
}

.loading-more {
	display: flex;
	justify-content: center;
	padding: var(--space-4);
}

.load-more-link {
	background: none;
	border: none;
	color: var(--primary);
	cursor: pointer;
	font-size: var(--text-sm);
	padding: var(--space-2);
}

/* Empty chat state */
#page-chat .empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: var(--space-12) var(--space-4);
	flex: 1;
}

#page-chat .empty .avatar {
 margin-bottom: var(--margin-base);
 width:150px;
 height:150px;
}

#page-chat .empty h3 {
	margin: 0 0 0.5rem;
}

#page-chat .empty p {
	margin: 0;
	color: var(--muted);
	font-size: var(--text-sm);
}


/* Conversation Flag Overlay */
.conversation-flag-overlay {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: var(--space-8);
	padding-top: 80px; /* Space for fixed header */
	padding-bottom: calc(70px + 90px + env(safe-area-inset-bottom, 0));
	text-align: center;
	background: var(--bg-primary);
}

.flag-overlay-content {
	max-width: 320px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-4);
}

.flag-overlay-icon {
	color: var(--muted);
	opacity: 0.7;
}

.flag-overlay-icon svg {
	width: 48px;
	height: 48px;
}

.flag-overlay-title {
	margin: 0;
	font-size: var(--text-lg);
	font-weight: 600;
	color: var(--text-primary);
}

.flag-overlay-message {
	margin: 0;
	font-size: var(--text-sm);
	color: var(--muted);
	line-height: 1.5;
}

.flag-overlay-actions {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	width: 100%;
	margin-top: var(--space-2);
}

.flag-overlay-actions .btn {
	width: 100%;
}

.flag-overlay-actions .btn-secondary {
	background: transparent;
	border: 1px solid var(--border);
	color: var(--text-secondary);
}

/* Hidden state for messages container when overlay is shown */
#page-chat .messages.hidden {
	display: none;
}

/* Date separator */
.date-separator {
	display: flex;
	justify-content: center;
	padding: var(--space-4) 0;
}

.date-separator span {
	font-size: var(--text-xs);
	color: var(--muted);
	padding: var(--space-1) var(--space-3);
}

/* Message bubbles */
.message {
	display: flex;
}

.message.own {
	justify-content: flex-end;
}

.message.other {
	justify-content: flex-start;
}

.message > div {
	max-width: 75%;
	padding: var(--space-2) var(--space-4);
	margin:0;
	border-radius: var(--message-bubble-radius);
	border: var(--message-bubble-border-width) var(--message-bubble-border-style) transparent;
	position: relative;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
}

.message.own > div {
	background: var(--message-bubble-own-bg);
	color: var(--message-bubble-own-text);
	border-color: var(--message-bubble-own-border-color);
	border-bottom-right-radius: 0;
}

.message.other > div {
	background: var(--message-bubble-other-bg);
	color: var(--message-bubble-other-text);
	border-color: var(--message-bubble-other-border-color);
	border-top-left-radius: 0;
}

.message p {
	margin: 0;
	font-size: var(--text-base);
	line-height: var(--line-height-tight);
	word-wrap: break-word;
	overflow-wrap: anywhere;
	word-break: break-word;
	white-space: pre-wrap;
}

.message p .btn.btn-primary { margin:var(--margin-base) 0; display:block; width:fit-content; }

.message time {
	display: flex;
	align-items: center;
	gap: var(--space-1);
	font-size: var(--text-xs);
	margin-top: var(--space-1);
	opacity: 0.7;
	color:var(--muted);
}

.message.own time {
	justify-content: flex-end;
}

.read-indicator {
	display: inline-flex;
	align-items: center;
	margin-left: var(--space-1);
}

.read-indicator svg {
	color: var(--muted);
	opacity: 0.5;
}

/* Blue tick when message is read */
.read-indicator.read svg {
	color: var(--info);
	opacity: 1;
}

/* Message reaction badge */
.message-reaction-badge {
	position: absolute;
	left:0;
	right:90%;
	margin-left: 0;
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	z-index: 1;
}

.message.other .message-reaction-badge {
	left: 8px;
	right: unset;
	margin-left: 80%;
}

/* Reaction picker */
.reaction-picker {
	position: absolute;
	display: flex;
	bottom: -2rem;
	right: -2rem;
	gap: 2px;
	background: var(--card-bg);
	border: 1px solid var(--border);
	border-radius: var(--radius-2xl);
	padding: 4px 6px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	z-index: 10;
}

@media (min-width: 768px) {
   .reaction-picker {
		left: 50%;
		right:unset;
   }
}


.reaction-option {
	font-size: var(--text-xl);
	background: transparent;
	border: none;
	border-radius: var(--radius-full);
	cursor: pointer;
}

.reaction-option.selected {
	background: var(--foreground);
}

/* Report button in reaction picker */
.reaction-option.report-option {
	font-size: var(--text-sm);
	color: var(--muted);
	display: flex;
	align-items: center;
	padding: 4px 6px;
	margin-left: 2px;
	border-left: 1px solid var(--border);
}

.reaction-option.report-option:hover {
	color: var(--danger);
}

/* .message > div padding/margin merged into main definition above */
.ice-breakers-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--space-2\.5);
}

.ice-breakers-header span {
	font-size: var(--text-sm);
	color: var(--muted);
}

.ice-breakers-header .refresh-btn {
	width: 28px;
	height: 28px;
	border: none;
	background: transparent;
	color: var(--muted);
	border-radius: var(--radius-full);
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
}

.ice-breakers-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

/* Chat input - fixed above bottom nav on mobile */
#page-chat .input-container {
	position: fixed;
	bottom: calc(90px + env(safe-area-inset-bottom, 0)); /* Above bottom nav */
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	max-width: 80rem;
	padding: var(--space-4) 0;
	z-index: 90;
	background: var(--card-bg);
	bottom:70px;
}


#page-chat .error {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-2) var(--space-3);
	margin-bottom: var(--space-2);
	background: var(--error-bg-subtle-flat);
	color: var(--error);
	font-size: var(--text-sm);
	border-radius: var(--radius-md);
}

#page-chat .error button {
	background: none;
	border: none;
	color: var(--error);
	cursor: pointer;
	font-size: var(--text-xs);
	text-decoration: underline;
}

#page-chat .typing-indicator {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: 0 0 var(--space-4) var(--space-4);
	font-size: var(--text-sm);
	color: var(--muted);
	position:absolute;
	bottom: 80px;
}

#page-chat .typing-dots {
	display: inline-flex;
	gap: 3px;
}

#page-chat .typing-dots span {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--muted);
	animation: typing-bounce 1.4s infinite ease-in-out both;
}

#page-chat .typing-dots span:nth-child(1) { animation-delay: 0s; }
#page-chat .typing-dots span:nth-child(2) { animation-delay: 0.2s; }
#page-chat .typing-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typing-bounce {
	0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
	40% { transform: scale(1); opacity: 1; }
}

#page-chat .input {
	display: flex;
	align-items: flex-end;
	gap: var(--space-2);
	width: auto;
	padding: 0 var(--space-4);
}

#page-chat .input textarea {
	flex: 1;
	min-height: 40px;
	max-height: 120px;
	padding: var(--space-2\.5) var(--space-3\.5);
	font-size: var(--text-base);
	font-family: inherit;
	color: var(--foreground);
	background-color: var(--input-bg);
	border: 1px solid var(--border);
	border-radius: var(--radius-2xl);
	resize: none;
	overflow: auto;
	outline: none;
	transition: border-color 0.2s;
}

#page-chat .input textarea:focus {
	border-color: var(--primary);
}

#page-chat .input textarea::placeholder {
	color: var(--muted);
}

#page-chat .input .send-button {
	width: 40px;
	height: 40px;
	border: none;
	background: var(--primary);
	color: var(--button-text);
	border-radius: var(--radius-full);
	cursor: pointer;
	transition: background 0.2s, opacity 0.2s;
	flex-shrink: 0;
}

#page-chat .input .send-button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

#page-chat .input .send-button svg {
	width: 20px;
	height: 20px;
}

#page-chat .empty svg {
	opacity: 0.5;
}

#page-chat .empty .btn {
	margin-top: 1rem;
}


/* Mutual Like Benefit Banner */
.mutual-like-banner {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-3);
	margin-bottom: var(--space-2);
	font-size: var(--text-sm);
	border-radius: var(--radius-md);
}

.mutual-like-banner svg {
	flex-shrink: 0;
}

/* Full benefit - green (unlimited free messaging) */
.mutual-like-banner.full {
	background: var(--success-bg-subtle-flat);
	color: var(--success);
}

.mutual-like-banner.full svg {
	color: var(--success);
}

/* Limited benefit - pink (ice-breaker only) */
.mutual-like-banner.limited {
	background: rgba(236, 72, 153, 0.1);
	color: var(--success);
}

.mutual-like-banner.limited svg {
	color: var(--success);
}

/* ============================================================
   3c. Quick Message Modal (#quick-message)
   Overrides for the quick message popup dialog
   ============================================================ */

#quick-message header {
	position: relative;
	padding: var(--space-4);
	display: flex;
	align-items: center;
	justify-content: space-between;
}

#quick-message header figure {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin: 0;
}

#quick-message header figure img {
	width: 40px;
	height: 40px;
	border-radius: var(--radius-full);
	object-fit: cover;
}

#quick-message header figcaption {
	display: flex;
	flex-direction: column;
	padding: 0;
}

#quick-message header figcaption span {
	font-size: var(--text-xs);
	color: var(--muted);
}

#quick-message section {
	padding: var(--space-4);
}

#quick-message footer {
	padding: var(--space-3) var(--space-4);
	background: var(--accent);
	justify-content: space-between;
}

/* ============================================================
   Messages
   ============================================================ */
/* ============================================================
   5. Conversation List Rules (.threads)
   Semantic conversation/messaging list
   ============================================================ */

.threads {
	display: flex;
	flex-direction: column;
}

.threads > a,
.threads > div {
	display: flex;
	align-items: center;
	gap: var(--gap-base);
	padding: var(--space-4);
	border-bottom: 1px solid var(--border);
	cursor: pointer;
	transition: background 0.2s;
	text-decoration: none;
	color: inherit;
}

.threads > .unread,
.threads > a[data-unread="true"] {
	background: rgba(var(--primary-rgb), 0.05);
}

.threads figure {
	position: relative;
	flex-shrink: 0;
	margin: 0;
}

.threads figure img {
	width: 48px;
	height: 48px;
	border-radius: var(--radius-full);
	object-fit: cover;
}

.threads .online-indicator {
	position: absolute;
	bottom: 2px;
	right: 2px;
	width: 14px;
	height: 14px;
	background: #10b981;
	border: 2px solid var(--card-bg);
	border-radius: var(--radius-full);
}

.threads .content {
	flex: 1;
	min-width: 0;
}

.threads .content > div:first-child {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--space-1);
}

.threads .name {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-weight: 600;
	font-size: var(--text-base);
}

.threads time {
	font-size: var(--text-xs);
	color: var(--muted);
}

.threads .preview {
	font-size: var(--text-sm);
	color: var(--muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.threads > .unread .preview,
.threads > a[data-unread="true"] .preview {
	color: var(--foreground);
	font-weight: 500;
}

.threads .badge {
	flex-shrink: 0;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	font-size: 12px;
	font-weight: 600;
	line-height: 22px;
	text-align: center;
	color: #fff;
	background: var(--secondary);
	border-radius: var(--radius-lg);
}

/* Conversation list enhancements */
.thread.blocked {
	opacity: 0.6;
}

.thread.unread {
	background: rgba(var(--primary-rgb), 0.05);
}

.thread.system-thread {
	background: rgba(var(--info-rgb, 59, 130, 246), 0.05);
}
.thread.system-thread FIGURE img {
	border: var(--avatar-border-width) var(--avatar-border-style) var(--info);
}

.blocked-text {
	font-style: italic;
	color: var(--muted);
}

.no-messages {
	font-style: italic;
	color: var(--muted);
}

.you-prefix {
	color: var(--muted);
}


.ice-breakers {
	display: flex;
	gap: var(--space-2);
	flex-wrap: wrap;
}

.ice-breaker-btn {
	padding: var(--space-2) var(--space-3\.5);
	font-size: var(--text-sm);
	font-weight: 500;
	color: var(--foreground);
	background: var(--accent);
	border: 1px solid var(--border);
	border-radius: var(--radius-2xl);
	cursor: pointer;
	transition: background 0.2s, border-color 0.2s, color 0.2s;
}



/* ==============================================
	 MESSAGE ATTACHMENTS
	 - Attachment button
	 - Attachment picker modal
	 - Audio recorder
	 - Audio player
	 - Image attachment & lightbox
	 ============================================== */

/* Attachment Button (in message input) */
.attachment-button {
	width: 40px;
	height: 40px;
	background: transparent;
	border: none;
	border-radius: var(--radius-full);
	color: var(--muted);
	cursor: pointer;
	transition: all 0.2s ease;
	flex-shrink: 0;
}

.attachment-button:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.attachment-button svg {
	width: 20px;
	height: 20px;
}

/* Attachment Picker Panel (inline, above chat input) */
.attachment-picker-panel {
	position: absolute;
/*	bottom: 100%; */
	bottom:70px;
	left: 10px;
	right: 60px;
	padding:0;
	background: var(--card-bg);
	border-top: 1px solid var(--border);
	border-radius: var(--radius-md) var(--radius-md) var(--radius-md) 0;
	max-height: 60vh;
	overflow-y: auto;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
	z-index: 100;
	animation: slideUp 0.2s ease-out;
}

.attachment-picker-header {
	display: flex;
	justify-content: flex-start;
	gap: var(--gap-base);
	align-items: center;
	padding: var(--space-3) var(--space-4);
	background: var(--card-bg);
	position: sticky;
	top: 0;
	z-index: 1;
	border-bottom: 1px solid var(--border);
}

/* Attachment Picker Verify Prompt (for non-verified users) */
.attachment-verify-prompt {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: var(--space-8) var(--space-6);
	text-align: center;
}

.verify-prompt-icon {
	width: 64px;
	height: 64px;
	background: var(--primary);
	border-radius: var(--radius-full);
	margin-bottom: var(--space-4);
}

.verify-prompt-icon svg {
	color: white;
}

.verify-prompt-text {
	font-size: var(--text-base);
	color: var(--foreground);
	line-height: var(--line-height-normal);
	margin: 0 0 1.25rem 0;
	max-width: 280px;
}

.verify-prompt-btn {
	min-width: 160px;
}

/* Attachment Picker Loading */
.attachment-picker-loading {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: var(--space-8);
}

/* Attachment Gallery Grid */
.attachment-gallery-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: var(--space-2);
	padding: var(--space-2);
	max-height: 200px;
	overflow-y: auto;
}
@media (min-width: 1024px) {
	.attachment-gallery-grid {
		grid-template-columns: repeat(12, 1fr);
	}
}

.attachment-gallery-item {
	position: relative;
	aspect-ratio: 1;
	background: var(--card-bg);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	overflow: hidden;
	cursor: pointer;
	transition: all 0.2s ease;
}

/* Action buttons (Camera, Upload, Record) as grid items */
.attachment-gallery-item.action-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-1);
	background: linear-gradient(135deg, #e8e8e8, #ffffff);
	border: 1px solid #ddd;
	color: #222;
	font-size: var(--text-xs);
	font-weight: 500;
	width: 100%;
	height: 100%;
	overflow: visible;
	padding: var(--space-1);
}

.attachment-gallery-item.action-btn svg {
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	color: #222;
}

.attachment-gallery-item.action-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.attachment-gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Audio attachment preview in gallery */
.audio-attachment-preview {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	background: linear-gradient(135deg, var(--primary), var(--secondary, var(--primary)));
	color: white;
}

.audio-attachment-preview svg {
	width: 24px;
	height: 24px;
	margin-bottom: var(--space-1);
}

.audio-duration {
	font-size: var(--text-xs);
	font-weight: 500;
}

/* Delete button on gallery items — visible on mobile, hover on desktop */
.attachment-delete-btn {
	position: absolute;
	top: var(--space-1);
	right: var(--space-1);
	width: 20px;
	height: 20px;
	background: rgba(0,0,0,.6);
	border: none;
	border-radius: var(--radius-full);
	color: white;
	cursor: pointer;
	opacity: 0.7;
	transition: opacity 0.2s ease;
}

@media (hover: hover) {
	.attachment-delete-btn {
		opacity: 0;
	}
	.attachment-gallery-item:hover .attachment-delete-btn {
		opacity: 1;
	}
}

/* Play button on audio gallery items */
.attachment-play-btn {
	position: absolute;
	bottom: var(--space-1);
	left: var(--space-1);
	width: 28px;
	height: 28px;
	background: var(--overlay-medium);
	border: none;
	border-radius: var(--radius-full);
	color: white;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.2s ease, background 0.2s ease;
}

.attachment-play-btn.playing {
	opacity: 1;
	background: var(--primary);
}

/* Attachment Picker Uploading Overlay */
.attachment-picker-uploading {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: rgba(var(--background-rgb, 0, 0, 0), 0.8);
	border-radius: 1rem 1rem 0 0;
	z-index: 10;
}

.attachment-picker-uploading p {
	margin-top: var(--space-3);
	color: var(--foreground);
	font-size: var(--text-sm);
}

/* Camera View */
.attachment-camera-view {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: var(--space-2);
}

.attachment-camera-preview {
	width: 100%;
	max-width: 400px;
	aspect-ratio: 4/3;
	background: var(--surface);
	border-radius: var(--radius-lg);
	overflow: hidden;
	position: relative;
}

.attachment-camera-preview video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.attachment-camera-preview video.mirrored {
	transform: scaleX(-1);
}

.attachment-camera-controls {
	gap: var(--space-8);
	margin-top: var(--space-4);
	padding: var(--space-2);
}

.camera-capture-btn {
	width: 72px;
	height: 72px;
	background: transparent;
	border: 4px solid var(--foreground);
	border-radius: var(--radius-full);
	cursor: pointer;
	transition: all 0.2s ease;
	padding: 4px;
}

.camera-capture-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.camera-capture-btn .capture-btn-inner {
	width: 100%;
	height: 100%;
	background: var(--foreground);
	border-radius: var(--radius-full);
	transition: all 0.15s ease;
}

.camera-capture-btn:active:not(:disabled) .capture-btn-inner {
	transform: scale(0.9);
}

.camera-control-btn {
	width: var(--icon-3xl);
	height: var(--icon-3xl);
	background: var(--card-bg);
	border: 1px solid var(--border);
	border-radius: var(--radius-full);
	color: var(--foreground);
	cursor: pointer;
	transition: all 0.2s ease;
}

.camera-control-btn.secondary {
	background: transparent;
	border-color: transparent;
	color: var(--muted);
}

.attachment-camera-error {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: var(--space-8) var(--space-4);
	text-align: center;
	min-height: 200px;
}

.attachment-camera-error p {
	color: var(--muted);
	margin-bottom: var(--space-4);
	font-size: var(--text-sm);
	line-height: var(--line-height-tight);
}

/* Audio Recorder Container */
.attachment-picker-recorder {
	padding: var(--space-3);
}

.audio-recorder {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: var(--space-6);
	background: var(--card-bg);
	border-radius: var(--radius-lg);
}

/* Audio Recorder Hint */
.audio-recorder-hint {
	margin: 0 0 1rem;
	font-size: var(--text-sm);
	color: var(--muted);
	text-align: center;
}

/* Audio Recorder States */
.audio-recorder-idle,
.audio-recorder-active,
.audio-recorder-preview {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

/* Audio Record Button */
.audio-record-btn {
	width: 80px;
	height: 80px;
	background: var(--primary);
	border: none;
	border-radius: var(--radius-full);
	color: white;
	cursor: pointer;
	transition: all 0.2s ease;
	margin-bottom: var(--space-4);
}

.audio-record-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
}

.audio-record-btn svg {
	width: 32px;
	height: 32px;
}

/* Audio Recorder Timer */
.audio-recorder-timer {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin-bottom: var(--space-3);
	font-size: var(--text-xl);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.recording-dot {
	width: 10px;
	height: 10px;
	background: var(--error);
	border-radius: var(--radius-full);
	animation: pulse 1s ease-in-out infinite;
}

.time-current {
	color: var(--foreground);
}

.time-separator {
	color: var(--muted);
}

.time-max,
.time-total {
	color: var(--muted);
}

/* Audio Recorder Progress */
.audio-recorder-progress {
	width: 100%;
	height: 6px;
	background: var(--border);
	border-radius: var(--radius-2xs);
	overflow: hidden;
	margin-bottom: var(--space-4);
}

.audio-recorder-progress-bar {
	height: 100%;
	background: var(--primary);
	border-radius: var(--radius-2xs);
	transition: width 0.1s linear;
}

/* Audio Stop Button */
.audio-stop-btn {
	width: 64px;
	height: 64px;
	background: var(--error);
	border: none;
	border-radius: var(--radius-full);
	color: white;
	cursor: pointer;
	transition: all 0.2s ease;
}

.audio-stop-btn svg {
	width: 32px;
	height: 32px;
}

/* Audio Preview Controls */
.audio-preview-controls {
	display: flex;
	align-items: center;
	gap: var(--gap-base);
}

.audio-play-btn {
	width: var(--icon-3xl);
	height: var(--icon-3xl);
	background: var(--primary);
	border: none;
	border-radius: var(--radius-full);
	color: white;
	cursor: pointer;
	transition: all 0.2s ease;
}

.audio-play-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.audio-delete-btn {
	width: 40px;
	height: 40px;
	background: var(--card-bg);
	border: 1px solid var(--border);
	border-radius: var(--radius-full);
	color: var(--muted);
	cursor: pointer;
	transition: all 0.2s ease;
}

/* == EMOJI PICKER == */

/* Emoji button (in message input) */
.emoji-button {
	width: 40px;
	height: 40px;
	background: transparent;
	border: none;
	border-radius: var(--radius-full);
	color: var(--muted);
	cursor: pointer;
	transition: all 0.2s ease;
	flex-shrink: 0;
}

.emoji-button:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* Emoji Picker Panel (inline, above chat input) */
#emoji-picker-panel {
	left: 60px;
	max-height: 50vh;
}

.emoji-picker-grid {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	padding: var(--space-4) 0;
	justify-content: center;
}

.emoji-picker-item {
	width: 52px;
	height: 52px;
	background: none;
	border: none;
	border-radius: var(--radius-md);
	cursor: pointer;
	transition: background 0.15s ease;
}

.emoji-picker-item:active {
	transform: scale(0.95);
}

/* Emoji message bubble - transparent background, large emoji */
.message > div.emoji-message {
	background: transparent !important;
	border: none !important;
	padding: var(--space-1);
	box-shadow: none;
}

.message > div.emoji-message .animated-emoji {
	width: 72px;
	height: 72px;
}

.message > div.emoji-message time {
	display: block;
	margin-top: var(--space-1);
	text-align: center;
}

/* Emoji combined with text - smaller, above text */
.message-emoji {
	display: flex;
	justify-content: center;
	margin-bottom: var(--space-2);
}

.message-emoji .animated-emoji {
	width: var(--icon-3xl);
	height: var(--icon-3xl);
}

/* Selected emoji preview (above input) */
#page-chat .emoji-preview {
	gap: var(--space-2);
	padding: var(--space-3);
	background: var(--card-bg);
	border-radius: var(--radius-lg);
	margin: 0 1rem 0.5rem;
	position: relative;
}

#page-chat .emoji-preview .attachment-remove {
	position: absolute;
	top: var(--space-1);
	right: var(--space-1);
}

/* == FLAGGED MESSAGE CONTENT == */

.flagged-message-wrapper {
	position: relative;
}

/* Warning badge for low severity and sender's own flagged messages */
.flagged-message-indicator {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	font-size: var(--text-xs);
	color: var(--warning);
	margin-top: var(--space-1);
	padding: 2px var(--space-2);
	background: rgba(var(--warning-rgb), 0.1);
	border-radius: var(--radius-sm);
}

.flagged-message-indicator.low {
	color: var(--muted);
	background: rgba(var(--muted-rgb), 0.1);
}

.flagged-message-indicator svg {
	flex-shrink: 0;
}

/* Blocked message (high severity) */
.flagged-message-blocked {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-4);
	color: var(--muted);
	font-size: var(--text-sm);
	font-style: italic;
}

.flagged-message-blocked svg {
	opacity: 0.5;
}

/* Blurred message (medium severity) */
.flagged-message-blur-overlay {
	position: relative;
}

.flagged-message-blur-content {
	filter: blur(8px);
	pointer-events: none;
	user-select: none;
}

.flagged-message-reveal {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-1);
	cursor: pointer;
	background: rgba(var(--background-rgb), 0.5);
	border-radius: var(--radius-md);
}

.flagged-message-reveal .flagged-label {
	font-size: var(--text-sm);
	font-weight: var(--font-semibold);
	color: var(--warning);
}

.flagged-message-reveal .reveal-text {
	font-size: var(--text-xs);
	color: var(--muted);
}

.flagged-message-reveal svg {
	color: var(--warning);
}

/* Message bubble severity classes */
.message > div.flagged-high {
	opacity: 0.6;
	background: var(--muted-bg) !important;
}

.message > div.flagged-medium {
	border-color: var(--warning) !important;
}

/* == AUDIO PLAYER (in chat messages) == */
.audio-player {
	display: flex;
	flex-direction: column;
	padding: var(--space-3);
	background: var(--card-bg);
	border-radius: var(--radius-lg);
	min-width: 240px;
	max-width: 320px;
}

.audio-player.own {
	background: var(--primary);
	color: var(--button-text);
}

.audio-player.own .audio-play-btn {
	background: rgba(255, 255, 255, 0.2);
}

.audio-player.own .audio-progress-track {
	background: rgba(255, 255, 255, 0.3);
}

.audio-player.own .audio-progress-fill {
	background: white;
}

.audio-player.own .audio-progress-thumb {
	background: white;
}

.audio-player.own .time-separator,
.audio-player.own .time-total {
	color: rgba(255, 255, 255, 0.7);
}

.audio-player-content {
	display: flex;
	align-items: center;
	gap: var(--gap-base);
}

.audio-player .audio-play-btn {
	width: 36px;
	height: 36px;
	flex-shrink: 0;
}

.audio-player .audio-play-btn svg {
	width: 16px;
	height: 16px;
}

/* Audio Player Progress */
.audio-player-progress-wrapper {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.audio-player-progress {
	position: relative;
	height: 8px;
	cursor: pointer;
}

.audio-progress-track {
	position: absolute;
	inset: 0;
	top: 50%;
	transform: translateY(-50%);
	height: 4px;
	background: var(--border);
	border-radius: var(--radius-2xs);
}

.audio-progress-fill {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	height: 4px;
	background: var(--primary);
	border-radius: var(--radius-2xs);
	transition: width 0.1s linear;
}

.audio-player.own .audio-progress-fill {
	background: white;
}

.audio-progress-locked {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	height: 4px;
	background: var(--muted);
	opacity: 0.4;
	border-radius: var(--radius-2xs);
}

.audio-progress-thumb {
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 12px;
	height: 12px;
	background: var(--primary);
	border-radius: var(--radius-full);
	box-shadow: var(--shadow-sm);
}

.audio-player.own .audio-progress-thumb {
	background: white;
}

/* Audio Player Time */
.audio-player-time {
	display: flex;
	align-items: center;
	gap: var(--space-1);
	font-size: var(--text-xs);
	font-variant-numeric: tabular-nums;
}

/* Audio Unlock Prompt */
.audio-unlock-prompt {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin-top: var(--space-3);
	padding-top: var(--space-3);
	border-top: 1px solid var(--border);
	font-size: var(--text-sm);
	color: var(--muted);
}

.audio-player.own .audio-unlock-prompt {
	border-top-color: rgba(255, 255, 255, 0.2);
	color: rgba(255, 255, 255, 0.8);
}

.audio-unlock-prompt svg {
	flex-shrink: 0;
}

.audio-unlock-prompt span {
	flex: 1;
}

.audio-unlock-btn {
	display: flex;
	align-items: center;
	gap: var(--space-1);
	padding: var(--space-2) var(--space-3);
	background: var(--vip-gold);
	border: none;
	border-radius: 0.375rem;
	color: white;
	font-size: var(--text-sm);
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease;
}

.audio-unlock-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Audio Player Error */
.audio-player-error {
	margin-top: var(--space-2);
	padding: var(--space-2);
	background: var(--error);
	color: white;
	border-radius: 0.375rem;
	font-size: var(--text-xs);
	text-align: center;
}

/* == IMAGE ATTACHMENT (in chat messages) == */

.image-attachment {
	position: relative;
	max-width: 240px;
	border-radius: var(--radius-lg);
	overflow: hidden;
	cursor: pointer;
}

.image-attachment img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 320px;
	object-fit: cover;
	transition: opacity 0.3s ease;
}

.image-attachment img.loading {
	opacity: 0;
}

.image-attachment-loading {
	position: absolute;
	inset: 0;
	background: var(--card-bg);
}

.image-attachment-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.3);
	opacity: 0;
	transition: opacity 0.2s ease;
}

.image-attachment-overlay svg {
	color: white;
}

/* == IMAGE LIGHTBOX == */

.image-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: rgba(0, 0, 0, 0.95);
	animation: fadeIn 0.2s ease;
}

.lightbox-image {
	max-width: 90vw;
	max-height: 90vh;
	object-fit: contain;
	border-radius: var(--radius-md);
}

/* == CHAT INPUT WITH ATTACHMENT SUPPORT == */

/* Note: #page-chat .input-container base styles are above
	 This section adds attachment-specific styles */

#page-chat .input-wrapper {
	flex: 1;
	display: flex;
	align-items: flex-end;
	gap: var(--space-2);
	padding: var(--space-2);
	background-color: var(--background-color);
	border: 1px solid var(--border);
	border-radius: 1.25rem;
}

#page-chat .input-wrapper:focus-within {
	border-color: var(--primary);
}

#page-chat .input-wrapper textarea {
	flex: 1;
	border: none;
	background: transparent;
	resize: none;
	font-size: var(--text-base);
	line-height: var(--line-height-tight);
	color: var(--foreground);
	max-height: 120px;
	padding: var(--space-1) var(--space-2);
}

#page-chat .input-wrapper textarea:focus {
	outline: none;
}

#page-chat .input-wrapper textarea::placeholder {
	color: var(--muted);
}

@media (min-width: 768px) {
	#page-chat .messages {
		padding: var(--space-6) var(--space-8);
		padding-bottom: 30vh;
		padding-top: 80px; /* Space for fixed chat header */
	}

	.message > div {
		max-width: 60%;
	}

	.ice-breakers {
		padding: 0 0 0.75rem 0;
	}

	#page-chat .input-container {
		padding: var(--space-4) 0;
		bottom: 0;
	}
}


/* Attachment Preview in Input */
#page-chat .attachment-preview {
	position: relative;
	margin: var(--space-2);
	padding: var(--space-2);
	background-color: var(--background-color);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
}

#page-chat .attachment-preview img {
	width: 80px;
	height: 80px;
	object-fit: cover;
	border-radius: 0.375rem;
}

#page-chat .attachment-preview .audio-preview {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-3);
	background: var(--primary);
	border-radius: 0.375rem;
	color: white;
}

#page-chat .attachment-preview .audio-preview svg {
	width: 20px;
	height: 20px;
}

#page-chat .attachment-preview .audio-preview span {
	font-size: var(--text-sm);
	font-weight: 500;
}

#page-chat .attachment-remove {
	position: absolute;
	top: -0.5rem;
	right: -0.5rem;
	width: 24px;
	height: 24px;
	background: var(--error);
	border: 2px solid var(--card-bg);
	border-radius: var(--radius-full);
	color: white;
	cursor: pointer;
}

#page-chat .attachment-remove svg {
	width: 12px;
	height: 12px;
}


/* == ANIMATED EMOJI == */

.animated-emoji {
	display: inline-block;
	vertical-align: middle;
	flex-shrink: 0;
}

/* Static mode - shows native system emoji, no animation */
.animated-emoji-static {
	cursor: pointer;
}

/* Native emoji text in static mode */
span.animated-emoji-static {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	opacity: 0.8;
	transition: opacity 0.15s ease, transform 0.15s ease;
}

/* When active (hovering), shows animated WebP image */
img.animated-emoji-static.animated-emoji-active {
	opacity: 1;
}

/* Inline with text */
.animated-emoji.inline {
	vertical-align: text-bottom;
	margin: 0 0.125em;
}

/* Emoji in buttons */
.btn .animated-emoji {
	margin-right: var(--space-1\.5);
}

/* Emoji picker grid */
.emoji-picker {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: var(--space-2);
	padding: var(--space-3);
	max-height: 300px;
	overflow-y: auto;
}

/* emoji-picker-item styles defined in Animated Emojis section */

/* Thread Status Banner - shows why messages are free */
.thread-status-banner {
	gap: var(--space-2);
	padding: var(--space-2) var(--space-4);
	font-size: var(--text-sm);
	font-weight: 500;
	text-align: center;
	background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(16, 185, 129, 0.1) 100%);
	border-bottom: 1px solid rgba(34, 197, 94, 0.2);
	color: var(--success);
}

.thread-status-banner.status-vip {
	background: linear-gradient(135deg, rgba(249, 115, 22, 0.1) 0%, rgba(234, 88, 12, 0.1) 100%);
	border-color: rgba(249, 115, 22, 0.2);
	color: var(--vip-gold);
}

.thread-status-banner.status-vip-24h {
	background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(79, 70, 229, 0.1) 100%);
	border-color: rgba(99, 102, 241, 0.2);
	color: rgb(99, 102, 241);
}

.thread-status-banner.status-unlocked {
	background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(16, 185, 129, 0.1) 100%);
	border-color: rgba(34, 197, 94, 0.2);
	color: var(--success);
}

.thread-status-banner.status-mutual-like {
	background: linear-gradient(135deg, rgba(236, 72, 153, 0.1) 0%, rgba(244, 114, 182, 0.1) 100%);
	border-color: rgba(236, 72, 153, 0.2);
	color: var(--primary);
}

.thread-status-banner svg,
.thread-status-banner .emoji-animated {
	flex-shrink: 0;
}