/* ─── Chat Module ─────────────────────────────────────────────────────────── */

/* Container */
.rt-chat {
	border: 1px solid var(--border-color);
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--bg-card);
	display: flex;
	flex-direction: column;
	margin-top: var(--sp-6);
}

/* Header */
.rt-chat__header {
	padding: 14px var(--sp-5);
	border-bottom: 1px solid var(--border-color);
	background: var(--bg-subtle);
}

.rt-chat__header h3 {
	margin: 0;
	font-size: var(--text-base);
	font-weight: var(--weight-semibold);
	color: var(--text-primary);
	letter-spacing: 0.01em;
}

/* Message list */
.rt-chat__messages {
	flex: 1;
	max-height: 500px;
	overflow-y: auto;
	padding: var(--sp-4) var(--sp-5);
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	scroll-behavior: smooth;
}

/* Empty state */
.rt-chat__empty {
	text-align: center;
	color: var(--text-muted);
	font-size: var(--text-base);
	padding: var(--sp-8) 0;
}

/* Individual message row */
.rt-chat__msg {
	display: flex;
	flex-direction: column;
	max-width: 75%;
}

.rt-chat__msg--mine {
	align-self: flex-end;
	align-items: flex-end;
}

.rt-chat__msg--theirs {
	align-self: flex-start;
	align-items: flex-start;
}

/* Bubble */
.rt-chat__bubble {
	padding: 6px var(--sp-3);
	border-radius: 16px;
	font-size: var(--text-base);
	line-height: 1.5;
	word-break: break-word;
	max-width: 100%;
	overflow: hidden;
}

.rt-chat__msg--mine .rt-chat__bubble {
	background: var(--color-blue);
	color: var(--text-inverted);
	border-bottom-right-radius: 4px;
}

.rt-chat__msg--theirs .rt-chat__bubble {
	background: var(--bg-hover);
	color: var(--text-primary);
	border-bottom-left-radius: 4px;
}

/* Message text */
.rt-chat__text {
	white-space: pre-wrap;
}

/* Meta (author + timestamp) */
.rt-chat__meta {
	display: flex;
	gap: 6px;
	margin-top: var(--sp-1);
	font-size: var(--text-2xs);
	color: var(--text-muted);
}

/* Attachments inside bubble */
.rt-chat__attachment {
	margin-top: var(--sp-2);
}

.rt-chat__attachment:first-child {
	margin-top: 0;
}

/* Image attachment — adds 6px top/bottom so effective space is 12px all around */
.rt-chat__attachment--image {
	margin: 6px 0;
}

.rt-chat__attachment--image:first-child {
	margin-top: 6px;
}

.rt-chat__attachment--image:last-child {
	margin-bottom: 6px;
}

.rt-chat__attachment--image .rt-chat__img-thumb {
	display: block;
	max-width: 100%;
	max-height: 280px;
	border-radius: var(--radius-md);
	object-fit: cover;
	cursor: zoom-in;
}

.rt-chat__msg--mine .rt-chat__attachment--image .rt-chat__img-thumb {
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

/* Video attachment */
.rt-chat__attachment--video .rt-chat__video {
	max-width: 280px;
	border-radius: var(--radius-md);
	display: block;
}

/* File / PDF attachment */
.rt-chat__attachment--file .rt-chat__file-link,
.rt-chat__attachment--file a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	text-decoration: none;
	padding: var(--sp-1) 0;
}

.rt-chat__msg--mine .rt-chat__file-link,
.rt-chat__msg--mine .rt-chat__attachment--file a {
	color: rgba(255, 255, 255, 0.9);
}

.rt-chat__msg--mine .rt-chat__file-link:hover,
.rt-chat__msg--mine .rt-chat__attachment--file a:hover {
	color: var(--text-inverted);
	text-decoration: underline;
}

.rt-chat__msg--theirs .rt-chat__file-link,
.rt-chat__msg--theirs .rt-chat__attachment--file a {
	color: var(--color-blue);
}

.rt-chat__msg--theirs .rt-chat__file-link:hover,
.rt-chat__msg--theirs .rt-chat__attachment--file a:hover {
	text-decoration: underline;
}

/* Upload progress bar */
.rt-chat__progress {
	height: 3px;
	background: var(--bg-hover);
	overflow: hidden;
}

.rt-chat__progress-bar {
	height: 100%;
	width: 0;
	background: var(--color-blue);
	transition: width 0.1s linear;
}

/* Compose area */
.rt-chat__compose {
	border-top: 1px solid var(--border-color);
	background: var(--bg-card);
}

/* Attachment preview */
.rt-chat__attachments-preview {
	padding: var(--sp-2) var(--sp-4) 0;
	display: none;
}

.rt-chat__attachments-preview.has-file {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
}

.rt-chat__attach-preview-thumb {
	width: var(--sp-12);
	height: var(--sp-12);
	object-fit: cover;
	border-radius: var(--radius-sm);
	border: 1px solid var(--border-color);
}

.rt-chat__attach-preview-name {
	font-size: var(--text-sm);
	color: var(--text-primary);
	flex: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.rt-chat__attach-preview-remove {
	background: none;
	border: none;
	padding: var(--sp-1);
	cursor: pointer;
	color: var(--text-muted);
	display: flex;
	align-items: center;
	border-radius: 4px;
	flex-shrink: 0;
}

.rt-chat__attach-preview-remove:hover {
	color: var(--color-red);
	background: var(--color-red-light);
}

/* Input row */
.rt-chat__input-row {
	display: flex;
	align-items: flex-end;
	gap: var(--sp-2);
	padding: 10px 14px;
}

/* Attach button */
.rt-chat__attach-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: var(--radius-md);
	cursor: pointer;
	color: var(--text-muted);
	flex-shrink: 0;
	transition: color var(--transition-fast), background var(--transition-fast);
}

.rt-chat__attach-btn:hover {
	color: var(--color-blue);
	background: var(--color-blue-light);
}

/* Textarea */
.rt-chat__textarea {
	flex: 1;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-lg);
	padding: var(--sp-2) var(--sp-3);
	font-size: var(--text-base);
	line-height: 1.5;
	color: var(--text-primary);
	background: var(--bg-card);
	resize: none;
	overflow-y: hidden;
	max-height: 120px;
	min-height: 38px;
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
	font-family: inherit;
}

.rt-chat__textarea:focus {
	outline: none;
	border-color: var(--color-blue);
	box-shadow: var(--shadow-focus);
}

.rt-chat__textarea::placeholder {
	color: var(--text-muted);
}

/* Send button */
.rt-chat__send-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--radius-lg);
	background: var(--color-primary);
	color: var(--text-inverted);
	border: none;
	cursor: pointer;
	flex-shrink: 0;
	transition: background var(--transition-fast), transform 0.1s;
	margin: 0;
}


.rt-chat__send-btn:active {
	transform: scale(0.95);
}

.rt-chat__send-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ── Floating variant (frontend quote page) ──────────────────────────────── */

.rt-chat--floating {
	position: fixed;
	bottom: 0;
	right: 28px;
	z-index: 9990;
	width: 360px;
	display: flex;
	flex-direction: column;
	/* Reset the inline-box styles */
	border: none;
	border-radius: 0;
	background: transparent;
	margin-top: 0;
	overflow: visible;
}

/* Always-visible header bar at the very bottom */
.rt-chat__floating-header {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--sp-2) var(--sp-4);
	background: var(--color-primary);
	color: var(--text-inverted);
	border: none;
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	cursor: pointer;
	text-align: left;
	box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.18);
	flex-shrink: 0;
	margin: 0;
}

.rt-chat__floating-header:hover {
	background: var(--color-primary-hover);
}

.rt-chat__floating-title {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: var(--text-base);
	font-weight: var(--weight-semibold);
	letter-spacing: 0.01em;
}

/* Unread badge — yellow square with rounded corners */
.rt-chat__unread-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--sp-5);
	height: var(--sp-5);
	padding: 0 5px;
	border-radius: 5px;
	background: #f59e0b;
	color: var(--text-inverted);
	font-size: var(--text-2xs);
	font-weight: var(--weight-bold);
	line-height: 1;
	letter-spacing: 0;
}

.rt-chat__chevron {
	flex-shrink: 0;
	transition: transform var(--transition-base);
}

.rt-chat--floating.is-open .rt-chat__chevron {
	transform: rotate(180deg);
}

/* Body — hidden by default, expands above the header when open */
.rt-chat__floating-body {
	display: none;
	flex-direction: column;
	background: var(--bg-subtle);
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	overflow: hidden;
	box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.rt-chat--floating.is-open .rt-chat__floating-body {
	display: flex;
}

.rt-chat__floating-body .rt-chat__messages {
	max-height: 360px;
	background: var(--bg-subtle);
}

.rt-chat__floating-body .rt-chat__compose {
	background: var(--bg-card);
	border-top: 1px solid var(--border-color);
}

@media (max-width: 480px) {
	.rt-chat--floating {
		right: 0;
		width: 100%;
	}
}

/* ── Admin meta box variant — more compact ───────────────────────────────── */
.rt-chat--admin {
	margin-top: 0;
	border-radius: var(--radius-sm);
}

.rt-chat--admin .rt-chat__messages {
	max-height: 380px;
}