/**
 * SEOPress AI Assistant - Styles for Classic Editor & Settings
 *
 * @package SEOPress PRO
 * @since 9.6.0
 */

/* Overlay */
.seopress-ai-assistant-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 99999;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

.seopress-ai-assistant-overlay.is-visible {
	opacity: 1;
	visibility: visible;
}

/* Panel - Wider width */
.seopress-ai-assistant-panel {
	position: fixed;
	top: 32px; /* Below admin bar */
	right: -480px;
	width: 480px;
	max-width: 100vw;
	height: calc(100vh - 32px);
	background: #fff;
	z-index: 100000;
	display: flex;
	flex-direction: column;
	transition: right 0.3s ease;
}

/* Fullscreen mode: no admin bar */
.is-fullscreen-mode .seopress-ai-assistant-panel {
	top: 0;
	height: 100vh;
}

/* Mobile admin bar is 46px */
@media screen and (max-width: 782px) {
	.seopress-ai-assistant-panel {
		top: 46px;
		height: calc(100vh - 46px);
	}

	.is-fullscreen-mode .seopress-ai-assistant-panel {
		top: 0;
		height: 100vh;
	}
}

.seopress-ai-assistant-panel.is-open {
	right: 0;
}

/* Panel Header */
.seopress-ai-assistant-panel__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 16px;
	border-bottom: 1px solid #dcdcde;
	background: #f6f7f7;
	flex-shrink: 0;
}

.seopress-ai-assistant-panel__header h3 {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	color: #1d2327;
}

.seopress-ai-assistant-panel__actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

.seopress-ai-assistant-panel__clear {
	font-size: 12px !important;
	padding: 4px 10px !important;
}

.seopress-ai-assistant-panel__close {
	background: none;
	border: none;
	cursor: pointer;
	padding: 4px;
	color: #50575e;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 2px;
}

.seopress-ai-assistant-panel__close:hover {
	background: #dcdcde;
	color: #1d2327;
}

.seopress-ai-assistant-panel__close .dashicons {
	font-size: 20px;
	width: 20px;
	height: 20px;
}

/* Context Toggle */
.seopress-ai-assistant-panel__context {
	padding: 10px 16px;
	border-bottom: 1px solid #dcdcde;
	background: #f9f9f9;
	font-size: 12px;
}

.seopress-ai-assistant-panel__context label {
	display: flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
}

.seopress-ai-assistant-panel__context input[type="checkbox"] {
	margin: 0;
}

/* Messages Container */
.seopress-ai-assistant-panel__messages {
	flex: 1;
	overflow-y: auto;
	padding: 16px;
	background: #fff;
}

/* Welcome Message */
.seopress-ai-assistant-panel__welcome {
	text-align: center;
	padding: 40px 20px;
	color: #757575;
}

.seopress-ai-assistant-panel__welcome p {
	margin: 0 0 12px 0;
	font-size: 14px;
}

/* Quick Actions */
.seopress-ai-assistant-quick-actions {
	margin: 16px 0;
	padding: 12px;
	background: rgba(var(--wp-admin-theme-color--rgb, 34, 113, 177), 0.05);
	border: 1px solid var(--wp-admin-theme-color, #2271b1);
	border-radius: 8px;
	text-align: left;
}

.seopress-ai-assistant-quick-actions__title {
	font-size: 12px;
	font-weight: 600;
	margin-bottom: 10px !important;
	color: #1d2327;
}

.seopress-ai-assistant-quick-actions__buttons {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.seopress-ai-assistant-quick-action {
	justify-content: center;
	font-size: 12px !important;
	padding: 8px 12px !important;
	border: 1px solid var(--wp-admin-theme-color, #2271b1) !important;
	color: var(--wp-admin-theme-color, #2271b1) !important;
	background: #fff !important;
}

.seopress-ai-assistant-quick-action:hover {
	background: rgba(var(--wp-admin-theme-color--rgb, 34, 113, 177), 0.1) !important;
	border: 1px solid var(--wp-admin-theme-color, #2271b1) !important;
}

/* Message - Shared Styles */
.seopress-ai-assistant-message {
	display: flex;
	gap: 12px;
	margin-bottom: 16px;
	animation: seopressAiFadeIn 0.2s ease-in;
}

/* User message - Avatar on RIGHT */
.seopress-ai-assistant-message--user {
	flex-direction: row-reverse;
}

.seopress-ai-assistant-message--user .seopress-ai-assistant-message__avatar {
	background: var(--wp-admin-theme-color, #2271b1);
}

.seopress-ai-assistant-message--user .seopress-ai-assistant-message__content {
	background: rgba(var(--wp-admin-theme-color--rgb, 34, 113, 177), 0.08);
	border-color: rgba(var(--wp-admin-theme-color--rgb, 34, 113, 177), 0.2);
}

/* Assistant message - Avatar on LEFT */
.seopress-ai-assistant-message--assistant .seopress-ai-assistant-message__avatar {
	background: var(--wp-admin-theme-color, #2271b1);
}

.seopress-ai-assistant-message--assistant .seopress-ai-assistant-message__content {
	background: #f6f7f7;
}

.seopress-ai-assistant-message--error .seopress-ai-assistant-message__content {
	background: #fcf0f1;
	border-color: #d63638;
}

.seopress-ai-assistant-message__avatar {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.seopress-ai-assistant-message__avatar .dashicons {
	color: #fff;
	font-size: 14px;
	width: 14px;
	height: 14px;
}

.seopress-ai-assistant-message__content {
	flex: 1;
	padding: 10px 14px;
	border-radius: 8px;
	border: 1px solid #dcdcde;
	max-width: calc(100% - 36px);
}

.seopress-ai-assistant-message__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 4px;
}

.seopress-ai-assistant-message__role {
	font-size: 11px;
	font-weight: 600;
	color: #757575;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* Copy Button */
.seopress-ai-assistant-copy-btn {
	background: none;
	border: none;
	cursor: pointer;
	padding: 2px;
	color: #757575;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 2px;
	min-width: 24px;
	height: 24px;
}

.seopress-ai-assistant-copy-btn:hover {
	color: var(--wp-admin-theme-color, #2271b1);
	background: rgba(var(--wp-admin-theme-color--rgb, 34, 113, 177), 0.05);
}

.seopress-ai-assistant-copy-btn .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
}

.seopress-ai-assistant-message__text {
	font-size: 13px;
	line-height: 1.6;
	word-wrap: break-word;
}

/* Markdown Rendering Styles */
.seopress-ai-assistant-message__text h2 {
	font-size: 15px;
	font-weight: 600;
	margin: 16px 0 8px 0;
	color: #1d2327;
	border-bottom: 1px solid #dcdcde;
	padding-bottom: 4px;
}

.seopress-ai-assistant-message__text h2:first-child {
	margin-top: 0;
}

.seopress-ai-assistant-message__text h3 {
	font-size: 14px;
	font-weight: 600;
	margin: 14px 0 6px 0;
	color: var(--wp-admin-theme-color, #2271b1);
}

.seopress-ai-assistant-message__text h3:first-child {
	margin-top: 0;
}

.seopress-ai-assistant-message__text h4 {
	font-size: 13px;
	font-weight: 600;
	margin: 12px 0 4px 0;
	color: #1d2327;
}

.seopress-ai-assistant-message__text p {
	margin: 0 0 10px 0;
}

.seopress-ai-assistant-message__text p:last-child {
	margin-bottom: 0;
}

.seopress-ai-assistant-message__text ul,
.seopress-ai-assistant-message__text ol {
	margin: 8px 0;
	padding-left: 20px;
}

.seopress-ai-assistant-message__text li {
	margin-bottom: 4px;
	line-height: 1.5;
}

.seopress-ai-assistant-message__text code {
	background: rgba(0, 0, 0, 0.06);
	padding: 2px 6px;
	border-radius: 3px;
	font-size: 12px;
	font-family: Consolas, Monaco, monospace;
}

.seopress-ai-assistant-message__text pre {
	background: #f0f0f0;
	padding: 12px;
	border-radius: 4px;
	overflow-x: auto;
	margin: 10px 0;
}

.seopress-ai-assistant-message__text pre code {
	background: none;
	padding: 0;
}

.seopress-ai-assistant-message__text strong {
	font-weight: 600;
}

.seopress-ai-assistant-message__text em {
	font-style: italic;
}

.seopress-ai-assistant-message__text a {
	color: var(--wp-admin-theme-color, #2271b1);
	text-decoration: none;
}

.seopress-ai-assistant-message__text a:hover {
	text-decoration: underline;
}

.seopress-ai-assistant-message__text blockquote {
	border-left: 3px solid var(--wp-admin-theme-color, #2271b1);
	margin: 10px 0;
	padding: 8px 12px;
	background: rgba(var(--wp-admin-theme-color--rgb, 34, 113, 177), 0.05);
	color: #555;
}

/* Loading */
.seopress-ai-assistant-loading {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	color: #757575;
	font-size: 13px;
}

.seopress-ai-assistant-loading .spinner {
	float: none;
	margin: 0;
}

/* Input Form */
.seopress-ai-assistant-panel__input {
	display: flex;
	gap: 8px;
	padding: 12px 16px;
	border-top: 1px solid #dcdcde;
	background: #f6f7f7;
	flex-shrink: 0;
}

.seopress-ai-assistant-panel__input textarea {
	flex: 1;
	resize: none;
	border: 1px solid #dcdcde;
	border-radius: 4px;
	padding: 8px 12px;
	font-size: 13px;
	line-height: 1.4;
	min-height: 36px;
	max-height: 120px;
	font-family: inherit;
}

.seopress-ai-assistant-panel__input textarea:focus {
	border-color: var(--wp-admin-theme-color, #2271b1);
	box-shadow: 0 0 0 1px var(--wp-admin-theme-color, #2271b1);
	outline: none;
}

.seopress-ai-assistant-panel__input textarea:disabled {
	background: #f0f0f0;
	cursor: not-allowed;
}

.seopress-ai-assistant-panel__input button[type="submit"] {
	flex-shrink: 0;
	height: 36px;
	background: var(--wp-admin-theme-color, #2271b1) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 4px;
	padding: 0 16px;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
}

.seopress-ai-assistant-panel__input button[type="submit"]:hover {
	background: #3d1ab8 !important;
}

.seopress-ai-assistant-panel__input button[type="submit"]:disabled {
	background: #dcdcde !important;
	color: #a7aaad !important;
	cursor: not-allowed;
}

/* Header Button - Settings Pages (inside .seopress-activity-panel-tabs) */
.seopress-activity-panel-tabs .seopress-ai-assistant-header-btn {
	padding: 0;
}

.seopress-activity-panel-tabs .seopress-ai-assistant-header-btn svg {
	width: 24px;
	height: 24px;
}

/* Admin Bar Item - Classic Editor */
#wp-admin-bar-seopress-ai-assistant > a {
	cursor: pointer !important;
}

#wp-admin-bar-seopress-ai-assistant .ab-icon.dashicons {
	font-family: dashicons;
	font-size: 20px;
	line-height: 1;
}

#wp-admin-bar-seopress-ai-assistant .ab-icon.dashicons:before {
	content: "\f125";
	top: 2px;
	position: relative;
}

/* Body class when panel is open */
body.seopress-ai-assistant-panel-open {
	overflow: hidden;
}

/* Animation */
@keyframes seopressAiFadeIn {
	from {
		opacity: 0;
		transform: translateY(4px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Responsive */
@media screen and (max-width: 782px) {
	.seopress-ai-assistant-panel {
		top: 46px; /* Mobile admin bar height */
		height: calc(100vh - 46px);
		width: 100%;
		right: -100%;
	}
}

@media screen and (max-width: 600px) {
	.seopress-ai-assistant-panel {
		top: 0;
		height: 100vh;
	}
}
