/**
 * AI Discussion Plugin - Comment Styles
 *
 * AI/Human comment visual differentiation, persona accent colors,
 * typing indicator, new-comment highlight, responsive & dark mode.
 *
 * @package AI_Discussion
 */

/* ==========================================================================
   CSS Custom Properties - Theme Override Points
   ========================================================================== */

:root {
	/* Background */
	--aid-bg-ai: #f8f9fa;
	--aid-bg-human: #ffffff;

	/* Persona Accent Colors */
	--aid-color-saramgyeol: #e8756a; /* warm pink / coral */
	--aid-color-baljaguk: #5a8dee;   /* calm blue */
	--aid-color-mulumphyo: #9b6dff;  /* bright purple */

	/* Typography */
	--aid-text-primary: #333333;
	--aid-text-secondary: #666666;

	/* Borders & Shapes */
	--aid-border-color: #e0e0e0;
	--aid-radius: 8px;

	/* Badge backgrounds (lighter versions of accent) */
	--aid-badge-bg-saramgyeol: #fce8e6;
	--aid-badge-bg-baljaguk: #e3edfc;
	--aid-badge-bg-mulumphyo: #ede3ff;

	/* Spacing */
	--aid-comment-gap: 16px;
	--aid-comment-padding: 20px;

	/* Typing indicator */
	--aid-typing-dot-color: #999999;

	/* New-comment highlight */
	--aid-highlight-color: rgba(90, 141, 238, 0.08);
}

/* ==========================================================================
   Comments Container
   ========================================================================== */

.aid-comments-container {
	position: relative;
	max-width: 100%;
}

/* ==========================================================================
   Comment Base
   ========================================================================== */

.aid-comment {
	position: relative;
	margin-bottom: var(--aid-comment-gap);
	padding: var(--aid-comment-padding);
	border: 1px solid var(--aid-border-color);
	border-radius: var(--aid-radius);
	background: var(--aid-bg-human);
	color: var(--aid-text-primary);
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* AI comment modifier */
.aid-comment--ai {
	background: var(--aid-bg-ai);
}

/* Human comment modifier */
.aid-comment--human {
	background: var(--aid-bg-human);
}

/* Reply (nested) indent */
.aid-comment--reply {
	margin-left: 32px;
}

/* ==========================================================================
   Persona Accent Borders
   ========================================================================== */

.aid-comment--saramgyeol {
	border-left: 3px solid var(--aid-color-saramgyeol);
}

.aid-comment--baljaguk {
	border-left: 3px solid var(--aid-color-baljaguk);
}

.aid-comment--mulumphyo {
	border-left: 3px solid var(--aid-color-mulumphyo);
}

/* ==========================================================================
   Comment Header
   ========================================================================== */

.aid-comment__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
	flex-wrap: wrap;
	gap: 8px;
}

.aid-comment__author {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	font-size: 15px;
	color: var(--aid-text-primary);
}

.aid-comment__icon {
	font-size: 18px;
	line-height: 1;
	flex-shrink: 0;
}

.aid-comment__name {
	white-space: nowrap;
}

/* AI badge */
.aid-comment__badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 10px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

/* Persona-specific badge colors */
.aid-comment--saramgyeol .aid-comment__badge {
	background: var(--aid-badge-bg-saramgyeol);
	color: var(--aid-color-saramgyeol);
}

.aid-comment--baljaguk .aid-comment__badge {
	background: var(--aid-badge-bg-baljaguk);
	color: var(--aid-color-baljaguk);
}

.aid-comment--mulumphyo .aid-comment__badge {
	background: var(--aid-badge-bg-mulumphyo);
	color: var(--aid-color-mulumphyo);
}

/* Fallback badge style for unknown AI personas */
.aid-comment--ai .aid-comment__badge {
	background: #eee;
	color: #888;
}

/* Time display */
.aid-comment__time {
	font-size: 13px;
	color: var(--aid-text-secondary);
	white-space: nowrap;
	flex-shrink: 0;
}

/* ==========================================================================
   Comment Content
   ========================================================================== */

.aid-comment__content {
	font-size: 15px;
	line-height: 1.6;
	color: var(--aid-text-primary);
	word-break: break-word;
	overflow-wrap: break-word;
}

.aid-comment__content p {
	margin: 0 0 8px;
	line-height: 1.6;
}

.aid-comment__content p:last-child {
	margin-bottom: 0;
}

/* Header / content divider */
.aid-comment__divider {
	border: none;
	border-top: 1px solid var(--aid-border-color);
	margin: 0 0 12px;
}

/* ==========================================================================
   Comment Actions (like, reply)
   ========================================================================== */

.aid-comment__actions {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 12px;
	padding-top: 8px;
	border-top: 1px solid var(--aid-border-color);
}

.aid-comment__action-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 8px;
	border: none;
	border-radius: 4px;
	background: transparent;
	color: var(--aid-text-secondary);
	font-size: 13px;
	cursor: pointer;
	transition: color 0.2s ease, background-color 0.2s ease;
}

.aid-comment__action-btn:hover {
	color: var(--aid-text-primary);
	background: rgba(0, 0, 0, 0.04);
}

/* ==========================================================================
   Typing Indicator
   ========================================================================== */

.aid-typing-indicator {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px var(--aid-comment-padding);
	margin-bottom: var(--aid-comment-gap);
	border-radius: var(--aid-radius);
	background: var(--aid-bg-ai);
	border: 1px dashed var(--aid-border-color);
	color: var(--aid-text-secondary);
	font-size: 14px;
}

.aid-typing-indicator__icon {
	font-size: 18px;
	flex-shrink: 0;
}

.aid-typing-indicator__text {
	flex: 1;
}

.aid-typing-indicator__dots {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	margin-left: 4px;
}

.aid-typing-indicator__dot {
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--aid-typing-dot-color);
	animation: aid-typing 1.4s infinite ease-in-out both;
}

.aid-typing-indicator__dot:nth-child(1) {
	animation-delay: 0s;
}

.aid-typing-indicator__dot:nth-child(2) {
	animation-delay: 0.2s;
}

.aid-typing-indicator__dot:nth-child(3) {
	animation-delay: 0.4s;
}

@keyframes aid-typing {
	0%,
	80%,
	100% {
		opacity: 0.3;
		transform: scale(0.8);
	}
	40% {
		opacity: 1;
		transform: scale(1);
	}
}

/* Persona-specific typing indicator borders */
.aid-typing-indicator--saramgyeol {
	border-left: 3px solid var(--aid-color-saramgyeol);
}

.aid-typing-indicator--baljaguk {
	border-left: 3px solid var(--aid-color-baljaguk);
}

.aid-typing-indicator--mulumphyo {
	border-left: 3px solid var(--aid-color-mulumphyo);
}

/* Hidden state */
.aid-typing-indicator[hidden] {
	display: none;
}

/* ==========================================================================
   New Comment Highlight Animation
   ========================================================================== */

.aid-comment--new {
	animation: aid-fadeIn 0.5s ease-out;
	background-color: var(--aid-highlight-color);
}

@keyframes aid-fadeIn {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ==========================================================================
   New Comments Notification Badge
   ========================================================================== */

.aid-new-badge {
	position: sticky;
	bottom: 16px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 100;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 20px;
	border: none;
	border-radius: 20px;
	background: var(--aid-color-baljaguk);
	color: #ffffff;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	transition: background-color 0.2s ease, transform 0.2s ease;
	animation: aid-badgePop 0.3s ease-out;
}

.aid-new-badge:hover {
	background: #4a7dd8;
	transform: translateX(-50%) scale(1.04);
}

.aid-new-badge[hidden] {
	display: none;
}

@keyframes aid-badgePop {
	from {
		opacity: 0;
		transform: translateX(-50%) translateY(8px) scale(0.9);
	}
	to {
		opacity: 1;
		transform: translateX(-50%) translateY(0) scale(1);
	}
}

/* ==========================================================================
   Responsive - Mobile
   ========================================================================== */

@media (max-width: 768px) {
	:root {
		--aid-comment-padding: 14px;
		--aid-comment-gap: 12px;
	}

	.aid-comment__header {
		gap: 4px;
	}

	.aid-comment__author {
		font-size: 14px;
	}

	.aid-comment__content {
		font-size: 14px;
	}

	.aid-comment__time {
		font-size: 12px;
	}

	.aid-comment__badge {
		font-size: 10px;
		padding: 1px 6px;
	}

	.aid-comment--reply {
		margin-left: 16px;
	}

	.aid-comment__actions {
		gap: 12px;
	}

	.aid-comment__action-btn {
		font-size: 12px;
	}

	.aid-typing-indicator {
		font-size: 13px;
		padding: 10px var(--aid-comment-padding);
	}
}

/* ==========================================================================
   Dark Mode
   ========================================================================== */

@media (prefers-color-scheme: dark) {
	:root {
		--aid-bg-ai: #1e2028;
		--aid-bg-human: #16171c;
		--aid-text-primary: #e0e0e0;
		--aid-text-secondary: #999999;
		--aid-border-color: #2e3038;

		--aid-badge-bg-saramgyeol: rgba(232, 117, 106, 0.15);
		--aid-badge-bg-baljaguk: rgba(90, 141, 238, 0.15);
		--aid-badge-bg-mulumphyo: rgba(155, 109, 255, 0.15);

		--aid-typing-dot-color: #777777;
		--aid-highlight-color: rgba(90, 141, 238, 0.1);
	}

	.aid-comment {
		box-shadow: none;
	}

	.aid-comment__action-btn:hover {
		background: rgba(255, 255, 255, 0.06);
	}

	.aid-new-badge {
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
	}
}