/* Rotbe AI Ads - Frontend Styles
   RTL first, Mobile first, no external font dependency.
   Colors/fonts are exposed as CSS variables so themes can override them. */

.rotbe-ai-ads {
	--rotbe-primary: #2563eb;
	--rotbe-primary-contrast: #ffffff;
	--rotbe-bg: #f8fafc;
	--rotbe-surface: #ffffff;
	--rotbe-border: #e2e8f0;
	--rotbe-text: #0f172a;
	--rotbe-muted: #64748b;
	--rotbe-radius: 14px;
	--rotbe-font: inherit;

	direction: rtl;
	font-family: var(--rotbe-font);
	color: var(--rotbe-text);
	max-width: 720px;
	margin: 0 auto;
	box-sizing: border-box;
}

.rotbe-ai-ads * {
	box-sizing: border-box;
}

.rotbe-ai-ads__header {
	text-align: center;
	margin-bottom: 16px;
}

.rotbe-ai-ads__title {
	font-size: 1.4rem;
	margin: 0 0 8px;
}

.rotbe-ai-ads__description {
	color: var(--rotbe-muted);
	margin: 0;
	line-height: 1.8;
}

.rotbe-ai-ads__chat {
	background: var(--rotbe-bg);
	border: 1px solid var(--rotbe-border);
	border-radius: var(--rotbe-radius);
	padding: 16px;
	min-height: 260px;
	max-height: 60vh;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.rotbe-msg {
	max-width: 85%;
	padding: 10px 14px;
	border-radius: 14px;
	line-height: 1.8;
	white-space: pre-wrap;
	word-break: break-word;
}

.rotbe-msg--user {
	align-self: flex-start;
	background: var(--rotbe-primary);
	color: var(--rotbe-primary-contrast);
	border-bottom-left-radius: 4px;
}

.rotbe-msg--assistant {
	align-self: flex-end;
	background: var(--rotbe-surface);
	border: 1px solid var(--rotbe-border);
	border-bottom-right-radius: 4px;
}

.rotbe-msg--system {
	align-self: center;
	background: transparent;
	color: var(--rotbe-muted);
	font-size: 0.85rem;
}

.rotbe-ai-ads__composer {
	display: flex;
	gap: 8px;
	margin-top: 12px;
}

.rotbe-ai-ads__input {
	flex: 1;
	resize: none;
	min-height: 46px;
	max-height: 140px;
	padding: 12px 14px;
	border: 1px solid var(--rotbe-border);
	border-radius: var(--rotbe-radius);
	font-family: inherit;
	font-size: 1rem;
	background: var(--rotbe-surface);
	color: var(--rotbe-text);
}

.rotbe-ai-ads__send-btn {
	background: var(--rotbe-primary);
	color: var(--rotbe-primary-contrast);
	border: none;
	border-radius: var(--rotbe-radius);
	padding: 0 20px;
	font-size: 1rem;
	cursor: pointer;
}

.rotbe-ai-ads__send-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.rotbe-ai-ads__campaign {
	margin-top: 16px;
	background: var(--rotbe-surface);
	border: 1px solid var(--rotbe-border);
	border-radius: var(--rotbe-radius);
	padding: 18px;
}

.rotbe-campaign__section {
	margin-bottom: 14px;
}

.rotbe-campaign__section h4 {
	margin: 0 0 8px;
	font-size: 0.95rem;
	color: var(--rotbe-muted);
}

.rotbe-campaign__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.rotbe-campaign__chip {
	background: var(--rotbe-bg);
	border: 1px solid var(--rotbe-border);
	border-radius: 999px;
	padding: 4px 12px;
	font-size: 0.85rem;
}

.rotbe-campaign__actions {
	display: flex;
	gap: 10px;
	margin-top: 16px;
	flex-wrap: wrap;
}

.rotbe-campaign__btn {
	flex: 1;
	min-width: 140px;
	padding: 10px 16px;
	border-radius: var(--rotbe-radius);
	border: 1px solid var(--rotbe-border);
	background: var(--rotbe-surface);
	cursor: pointer;
	font-size: 0.95rem;
}

.rotbe-campaign__btn--primary {
	background: var(--rotbe-primary);
	color: var(--rotbe-primary-contrast);
	border-color: var(--rotbe-primary);
}

@media (max-width: 480px) {
	.rotbe-ai-ads__chat {
		min-height: 320px;
	}

	.rotbe-msg {
		max-width: 92%;
	}
}