/**
 * Keyword Density Checker - User Intent Analysis Panel Styles
 *
 * Styles for the user intent analysis panel including
 * intent badge, confidence display, signals list, and match bar.
 *
 * @package AgenticWP
 */

/* ============================================
   Intent Panel Container
   ============================================ */

#intent-panel {
	display: flex;
	flex-direction: column;
	gap: var(--tool-space-md);
}

#intent-panel .panel-title {
	font-size: var(--tool-font-lg);
	font-weight: 600;
	color: var(--tool-text);
	margin: 0 0 var(--tool-space-sm) 0;
}

/* ============================================
   Intent Display (Badge + Confidence)
   ============================================ */

.intent-display {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--tool-space-sm);
}

/* Intent Badge */
.intent-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.375rem 0.75rem;
	font-size: var(--tool-font-sm);
	font-weight: 600;
	border-radius: var(--tool-radius-pill);
	background: var(--tool-bg-subtle);
	border: 1px solid var(--tool-border);
	color: var(--tool-text);
	transition: background var(--tool-transition-fast),
	            border-color var(--tool-transition-fast),
	            color var(--tool-transition-fast);
}

/* Intent type variations */
.intent-badge.intent-informational {
	background: var(--tool-info-bg);
	border-color: var(--tool-info);
	color: #1e40af;
}

.intent-badge.intent-navigational {
	background: #f3e8ff;
	border-color: #a855f7;
	color: #7e22ce;
}

.intent-badge.intent-transactional {
	background: var(--tool-success-bg);
	border-color: var(--tool-success);
	color: #166534;
}

.intent-badge.intent-commercial {
	background: var(--kd-accent-bg);
	border-color: var(--kd-accent);
	color: var(--kd-accent-dark);
}

/* Confidence Text */
.intent-confidence {
	font-size: var(--tool-font-sm);
	color: var(--tool-text-muted);
	font-variant-numeric: tabular-nums;
}

/* ============================================
   Intent Signals Section
   ============================================ */

.intent-signals {
	margin-top: var(--tool-space-xs);
}

.signals-title {
	font-size: var(--tool-font-sm);
	font-weight: 600;
	color: var(--tool-text);
	margin: 0 0 var(--tool-space-xs) 0;
}

.signals-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--tool-space-xs);
}

.signal-item {
	display: inline-flex;
	align-items: center;
	padding: 0.25rem 0.5rem;
	font-size: 0.6875rem;
	font-family: var(--tool-font-mono);
	border-radius: var(--tool-radius-sm);
	background: var(--tool-bg-subtle);
	border: 1px solid var(--tool-border);
	color: var(--tool-text-muted);
	white-space: nowrap;
}

/* ============================================
   Content-Intent Match Bar
   ============================================ */

.intent-match {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--tool-space-sm);
	margin-top: var(--tool-space-xs);
}

.match-label {
	font-size: var(--tool-font-sm);
	color: var(--tool-text-muted);
	flex-shrink: 0;
}

.match-bar {
	flex: 1;
	min-width: 100px;
	height: 8px;
	background: var(--tool-bg-subtle);
	border-radius: var(--tool-radius-pill);
	border: 1px solid var(--tool-border);
	overflow: hidden;
}

.match-fill {
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, var(--kd-accent) 0%, var(--kd-accent-light) 100%);
	border-radius: var(--tool-radius-pill);
	transition: width 0.6s ease-out;
}

/* Color-code the match bar based on percentage */
.match-fill[style*="width: 0%"],
.match-fill[style*="width: 1%"],
.match-fill[style*="width: 2%"] {
	background: var(--tool-error);
}

.intent-match[data-match-level="low"] .match-fill {
	background: var(--tool-error);
}

.intent-match[data-match-level="medium"] .match-fill {
	background: var(--tool-warning);
}

.intent-match[data-match-level="high"] .match-fill {
	background: var(--tool-success);
}

.match-value {
	font-size: var(--tool-font-sm);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--tool-text);
	min-width: 36px;
	text-align: right;
}

/* ============================================
   Intent Recommendation
   ============================================ */

#intent-recommendation {
	font-size: var(--tool-font-sm);
	line-height: var(--tool-line-height);
	color: var(--tool-text-muted);
	margin: 0;
	padding: var(--tool-space-sm);
	background: var(--tool-bg-subtle);
	border-radius: var(--tool-radius-sm);
	border-left: 3px solid var(--tool-info);
}

#intent-recommendation:empty {
	display: none;
}

/* ============================================
   Intent Education Note
   ============================================ */

.intent-note {
	font-size: 0.6875rem;
	color: var(--tool-text-muted);
	margin: var(--tool-space-sm) 0 0;
	padding-top: var(--tool-space-sm);
	border-top: 1px solid var(--tool-border);
}

/* ============================================
   Reduced Motion
   ============================================ */

@media (prefers-reduced-motion: reduce) {
	.intent-badge,
	.match-fill {
		transition: none;
	}
}

/* ============================================
   Responsive
   ============================================ */

@media (max-width: 680px) {
	.intent-display {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.375rem;
	}

	.intent-badge {
		font-size: 0.8125rem;
		padding: 0.25rem 0.625rem;
	}

	.intent-confidence {
		font-size: 0.75rem;
	}

	.signals-list {
		gap: 0.25rem;
	}

	.signal-item {
		font-size: 0.625rem;
		padding: 0.125rem 0.375rem;
	}

	.intent-match {
		flex-direction: column;
		align-items: stretch;
		gap: 0.375rem;
	}

	.match-bar {
		min-width: 0;
		width: 100%;
	}

	.match-value {
		text-align: left;
	}

	#intent-recommendation {
		font-size: 0.8125rem;
	}
}