/**
 * Answer Engine Optimizer AI Meta Box Styles
 *
 * @package AEO_Ranking
 * @since 1.0.0
 */

.aeo-ranking-meta-box {
	margin: 0 -12px;
	padding: 12px;
}

.aeo-summary-editor-wrapper {
	margin-bottom: 15px;
}

.aeo-summary-editor-wrapper .wp-editor-container {
	border: 1px solid #ddd;
}

.aeo-summary-meta {
	background: #f9f9f9;
	border: 1px solid #e5e5e5;
	border-radius: 3px;
	padding: 12px 15px;
	margin-top: 10px;
}

.aeo-summary-help {
	margin: 0 0 12px 0;
	line-height: 1.6;
	color: #646970;
}

.aeo-summary-help strong {
	color: #1d2327;
}

.aeo-summary-stats {
	display: flex;
	align-items: center;
	gap: 20px;
	font-size: 13px;
	color: #50575e;
}

.aeo-summary-stats .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
	vertical-align: middle;
	margin-right: 4px;
}

.aeo-char-counter {
	display: flex;
	align-items: center;
	gap: 4px;
}

.aeo-char-count {
	color: #2271b1;
	font-weight: 600;
	min-width: 30px;
	text-align: right;
}

.aeo-char-count.optimal {
	color: #00a32a;
}

.aeo-char-count.warning {
	color: #dba617;
}

.aeo-char-count.over {
	color: #d63638;
}

.aeo-recommendation {
	display: flex;
	align-items: center;
	gap: 4px;
	color: #646970;
	font-style: italic;
}

/* Meta box positioning - similar to Yoast */
#aeo_ranking_summary.postbox {
	margin-top: 20px;
}

#aeo_ranking_summary .inside {
	margin: 0;
	padding: 0;
}

/* Responsive adjustments */
@media screen and (max-width: 782px) {
	.aeo-summary-stats {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
}