/* Chat Assist for WooCommerce Admin Styles */
.chafwc-admin-wrap {
	max-width: 960px;
}

.chafwc-admin-wrap h1 {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* Status Banner */
.chafwc-status-banner {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	margin: 20px 0;
	border-radius: 8px;
	font-size: 14px;
}

.chafwc-status-free {
	background: #FEF3C7;
	border: 1px solid #F59E0B;
	color: #92400E;
}

.chafwc-status-connected {
	background: #D1FAE5;
	border: 1px solid #10B981;
	color: #065F46;
}

.chafwc-status-banner .dashicons {
	font-size: 20px;
	width: 20px;
	height: 20px;
}

.chafwc-status-banner .button {
	margin-left: auto;
}

/* Nav Tabs */
.chafwc-nav-tabs {
	margin-top: 20px;
	border-bottom: 1px solid #c3c4c7;
}

.chafwc-nav-tabs .nav-tab {
	margin-left: 0;
	margin-right: 4px;
	border-radius: 8px 8px 0 0;
}

.chafwc-nav-tabs .nav-tab-active,
.chafwc-nav-tabs .nav-tab-active:hover,
.chafwc-nav-tabs .nav-tab-active:focus {
	background: #84cc16;
	color: #1a2e05;
	border-color: #84cc16;
	border-bottom-color: #f0f0f1;
	font-weight: 600;
}

/* Voice Highlight Banner */
.chafwc-voice-highlight {
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 28px 32px;
	background: linear-gradient(135deg, #1e3a5f 0%, #2d5a8e 100%);
	border-radius: 12px;
	color: #fff;
	margin-bottom: 30px;
}

.chafwc-voice-highlight-icon {
	flex-shrink: 0;
	width: 64px;
	height: 64px;
	background: rgba(255, 255, 255, 0.15);
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.chafwc-voice-highlight-icon .dashicons {
	font-size: 32px;
	width: 32px;
	height: 32px;
	color: #84cc16;
}

.chafwc-voice-highlight-content h3 {
	margin: 0 0 8px;
	color: var(--chafwc-muted);
	font-size: 20px;
}

.chafwc-voice-highlight-content p {
	margin: 0 0 14px;
	opacity: 0.9;
	font-size: 14px;
	line-height: 1.6;
	color: var(--chafwc-muted);
}

.chafwc-voice-highlight-content .button {
	background: #84cc16;
	border-color: #84cc16;
	color: #fff;
	border-radius: 6px;
}

.chafwc-voice-highlight-content .button:hover {
	background: #65a30d;
	border-color: #65a30d;
	color: #fff;
}

/* Settings Form */
.chafwc-settings-form {
	background: #fff;
	padding: 20px;
	margin-top: 20px;
	border: 1px solid #c3c4c7;
	border-radius: 8px;
}

.chafwc-settings-form .form-table th {
	width: 200px;
	padding-left: 0;
}

.chafwc-settings-form .form-table td {
	padding-left: 0;
}

/* Admin Flag Dropdown */
.chafwc-greeting-languages {
	margin-bottom: 8px;
}

.chafwc-admin-flag-dropdown {
	position: relative;
	display: inline-block;
}

.chafwc-admin-flag-trigger {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	background: #fff;
	border: 1px solid #8c8f94;
	border-radius: 8px;
	cursor: pointer;
	font-size: 14px;
	line-height: 1;
	transition: border-color 0.2s;
}

.chafwc-admin-flag-trigger:hover {
	border-color: #84cc16;
}

.chafwc-admin-flag-trigger:focus {
	outline: none;
	border-color: #84cc16;
	box-shadow: 0 0 0 1px #84cc16;
}

.chafwc-admin-flag-img {
	display: block;
	width: 24px;
	height: 16px;
	object-fit: cover;
	border-radius: 2px;
	box-shadow: 0 0 0 1px rgba(0,0,0,0.1);
}

.chafwc-admin-flag-label {
	color: #1d2327;
}

.chafwc-admin-flag-arrow {
	color: #50575e;
	transition: transform 0.2s;
}

.chafwc-admin-flag-open .chafwc-admin-flag-arrow {
	transform: rotate(180deg);
}

.chafwc-admin-flag-list {
	position: absolute;
	top: 100%;
	left: 0;
	margin: 4px 0 0 0;
	padding: 4px;
	list-style: none;
	background: #fff;
	border: 1px solid #8c8f94;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.15);
	z-index: 100;
	min-width: 160px;
}

.chafwc-admin-flag-option {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border-radius: 3px;
	cursor: pointer;
	font-size: 14px;
	transition: background 0.15s;
}

.chafwc-admin-flag-option:hover {
	background: #f0f0f1;
}

.chafwc-admin-flag-option.chafwc-admin-flag-selected {
	background: #dcdcde;
}

.chafwc-admin-flag-option img {
	display: block;
	width: 24px;
	height: 16px;
	object-fit: cover;
	border-radius: 2px;
	box-shadow: 0 0 0 1px rgba(0,0,0,0.1);
}

.chafwc-admin-flag-option span {
	color: #1d2327;
}

/* Backend Info Box */
.chafwc-backend-info {
	background: #f0f6fc;
	border: 1px solid #c3c4c7;
	border-left: 4px solid #84cc16;
	padding: 16px 20px;
	margin-bottom: 20px;
	border-radius: 8px;
}

.chafwc-backend-info h3 {
	margin-top: 0;
	margin-bottom: 8px;
}

.chafwc-backend-info p {
	margin: 0 0 12px;
}

.chafwc-backend-info .button {
	margin-top: 4px;
}

/* Connection Test */
#chafwc-connection-status {
	display: inline-block;
	margin-left: 10px;
	padding: 4px 12px;
	border-radius: 8px;
	font-size: 13px;
}

#chafwc-connection-status.chafwc-success {
	background: #D1FAE5;
	color: #065F46;
}

#chafwc-connection-status.chafwc-error {
	background: #FEE2E2;
	color: #991B1B;
}

#chafwc-connection-status.chafwc-loading {
	background: #E0E7FF;
	color: #3730A3;
}

/* Plan Info */
.chafwc-plan-info {
	background: #f9fafb;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	padding: 16px 20px;
}

.chafwc-plan-info h4 {
	margin: 0 0 12px;
	color: #374151;
}

.chafwc-plan-details {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}

.chafwc-plan-item {
	display: flex;
	flex-direction: column;
}

.chafwc-plan-item-label {
	font-size: 12px;
	color: #6b7280;
	text-transform: uppercase;
}

.chafwc-plan-item-value {
	font-size: 16px;
	font-weight: 600;
	color: #111827;
}

/* Preview Widget */
.chafwc-preview-container {
	display: flex;
	justify-content: center;
	padding: 40px 20px;
	background: #f3f4f6;
	border-radius: 8px;
}

.chafwc-preview-widget {
	width: 320px;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
	overflow: hidden;
}

.chafwc-preview-header {
	padding: 16px 20px;
	background: var(--chafwc-primary, #84cc16);
	color: var(--chafwc-primary-contrast, #fff);
	font-weight: 600;
}

.chafwc-preview-body {
	padding: 16px;
	min-height: 100px;
}

.chafwc-preview-message {
	padding: 12px 16px;
	background: #f3f4f6;
	border-radius: 12px;
	font-size: 14px;
	color: #374151;
}

.chafwc-preview-input {
	padding: 12px 16px;
	border-top: 1px solid #e5e7eb;
}

.chafwc-preview-input input {
	width: 100%;
	padding: 10px 16px;
	border: 1px solid #e5e7eb;
	border-radius: 24px;
	font-size: 14px;
}

/* Preview Widget - Light Theme */
.chafwc-preview-container[data-preview-theme="light"] {
	background: linear-gradient(145deg, #f8fafc 0%, #eef2f7 52%, #e2e8f0 100%);
}

.chafwc-preview-container[data-preview-theme="light"] .chafwc-preview-widget {
	position: relative;
	background: linear-gradient(140deg, rgba(255, 255, 255, 0.62) 0%, rgba(248, 250, 252, 0.44) 52%, rgba(226, 232, 240, 0.38) 100%);
	-webkit-backdrop-filter: blur(18px) saturate(165%);
	backdrop-filter: blur(18px) saturate(165%);
	border: 1px solid rgba(255, 255, 255, 0.58);
	box-shadow: 0 12px 30px rgba(15, 23, 42, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.78), inset 0 -1px 0 rgba(148, 163, 184, 0.22);
}

.chafwc-preview-container[data-preview-theme="light"] .chafwc-preview-widget::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	background: linear-gradient(115deg, rgba(255, 255, 255, 0.5) 8%, rgba(255, 255, 255, 0.06) 36%, rgba(255, 255, 255, 0.34) 92%);
	opacity: 0.45;
}

.chafwc-preview-container[data-preview-theme="light"] .chafwc-preview-body {
	background: transparent;
}

.chafwc-preview-container[data-preview-theme="light"] .chafwc-preview-message {
	background: rgba(241, 245, 249, 0.66);
	border: 1px solid rgba(148, 163, 184, 0.3);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
	color: #1e293b;
}

.chafwc-preview-container[data-preview-theme="light"] .chafwc-preview-input {
	border-top: 1px solid rgba(148, 163, 184, 0.28);
	background: linear-gradient(180deg, rgba(248, 250, 252, 0.72) 0%, rgba(241, 245, 249, 0.56) 100%);
	-webkit-backdrop-filter: blur(10px) saturate(140%);
	backdrop-filter: blur(10px) saturate(140%);
}

.chafwc-preview-container[data-preview-theme="light"] .chafwc-preview-input input {
	background: rgba(255, 255, 255, 0.64);
	border-color: rgba(148, 163, 184, 0.38);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
	color: #1e293b;
}

/* Preview Widget - Dark Theme */
.chafwc-preview-container[data-preview-theme="dark"] {
	background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
}

.chafwc-preview-container[data-preview-theme="dark"] .chafwc-preview-widget {
	background: rgba(17, 25, 40, 0.25);
	-webkit-backdrop-filter: blur(16px) saturate(180%);
	backdrop-filter: blur(16px) saturate(180%);
	border: 1px solid rgba(255, 255, 255, 0.15);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.chafwc-preview-container[data-preview-theme="dark"] .chafwc-preview-header {
	background: var(--chafwc-primary, #84cc16);
	color: #fff;
}

.chafwc-preview-container[data-preview-theme="dark"] .chafwc-preview-body {
	background: transparent;
}

.chafwc-preview-container[data-preview-theme="dark"] .chafwc-preview-message {
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.12);
	color: #e2e8f0;
}

.chafwc-preview-container[data-preview-theme="dark"] .chafwc-preview-input {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	background: rgba(255, 255, 255, 0.05);
}

.chafwc-preview-container[data-preview-theme="dark"] .chafwc-preview-input input {
	background: rgba(255, 255, 255, 0.07);
	border-color: rgba(255, 255, 255, 0.12);
	color: #e2e8f0;
}

/* Description Text */
.chafwc-description {
	font-size: 14px;
	color: #6b7280;
	margin-bottom: 20px;
}

/* Multi-select */
.chafwc-multi-select {
	min-width: 300px;
}

/* Color Picker */
.chafwc-color-picker {
	max-width: 100px;
}

/* Billing Page */
#chafwc-billing-content .chafwc-usage-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-bottom: 30px;
}

.chafwc-stat-card {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	padding: 24px 20px;
	text-align: center;
}

.chafwc-stat-value {
	font-size: 28px;
	font-weight: 700;
	color: #1a2e05;
	line-height: 1.2;
	word-wrap: break-word;
}

.chafwc-stat-label {
	font-size: 13px;
	color: #6b7280;
	margin-top: 8px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.chafwc-stat-sub {
	font-size: 12px;
	color: #9ca3af;
	margin-top: 6px;
}

/* Getting Started Tab */
.chafwc-getting-started {
	max-width: 900px;
	padding: 20px 0;
}

.chafwc-welcome-header {
	text-align: center;
	padding: 30px 20px;
	background: linear-gradient(135deg, #84cc16 0%, #a3e635 100%);
	border-radius: 12px;
	color: #1a2e05;
	margin-bottom: 30px;
}

.chafwc-welcome-header h2 {
	margin: 0 0 10px;
	font-size: 28px;
	color: #1a2e05;
}

.chafwc-welcome-header p {
	margin: 0;
	color: #2d4a0a;
	font-size: 16px;
}

.chafwc-setup-steps {
	margin-bottom: 40px;
}

.chafwc-setup-steps h3 {
	margin-bottom: 20px;
}

.chafwc-step {
	display: flex;
	gap: 20px;
	padding: 20px;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	margin-bottom: 15px;
	transition: border-color 0.2s;
}

.chafwc-step:hover {
	border-color: #84cc16;
}

.chafwc-step-complete {
	border-color: #10B981;
	background: #F0FDF4;
}

.chafwc-step-number {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: #84cc16;
	color: #fff;
	border-radius: 50%;
	font-weight: 600;
	font-size: 18px;
	flex-shrink: 0;
}

.chafwc-step-complete .chafwc-step-number {
	background: #10B981;
}

.chafwc-step-content h4 {
	margin: 0 0 8px;
	font-size: 16px;
}

.chafwc-step-content p {
	margin: 0 0 12px;
	color: #6b7280;
}

/* Docs Section */
.chafwc-docs-section {
	margin-bottom: 30px;
}

.chafwc-docs-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

.chafwc-docs-card {
	padding: 20px;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
}

.chafwc-docs-card .dashicons {
	font-size: 24px;
	width: 24px;
	height: 24px;
	color: #84cc16;
	margin-bottom: 10px;
}

.chafwc-docs-card h4 {
	margin: 0 0 8px;
	font-size: 15px;
}

.chafwc-docs-card p {
	margin: 0;
	color: #6b7280;
	font-size: 13px;
	line-height: 1.5;
}

.chafwc-tips-list {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	padding: 20px 24px;
}

.chafwc-tips-list p {
	margin: 0 0 8px;
	font-size: 13px;
	line-height: 1.6;
}

.chafwc-tips-list p:last-child {
	margin-bottom: 0;
}

.chafwc-features-grid {
	margin-bottom: 40px;
}

.chafwc-features-table {
	background: #fff;
	border-radius: 8px;
	overflow: hidden;
	border-collapse: separate;
	border-spacing: 0;
}

.chafwc-features-table th,
.chafwc-features-table td {
	padding: 12px 16px;
	text-align: center;
}

.chafwc-features-table th:first-child,
.chafwc-features-table td:first-child {
	text-align: left;
}

.chafwc-features-table thead th {
	background: #f9fafb;
	font-weight: 600;
}

.chafwc-yes {
	color: #10B981;
}

.chafwc-no {
	color: #EF4444;
}

.chafwc-help-section h3 {
	margin-bottom: 20px;
}

.chafwc-help-cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

.chafwc-help-card {
	display: block;
	padding: 24px;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	text-align: center;
	text-decoration: none;
	color: inherit;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.chafwc-help-card:hover {
	border-color: #84cc16;
	box-shadow: 0 4px 12px rgba(132, 204, 22, 0.15);
	text-decoration: none;
	color: inherit;
}

.chafwc-help-card .dashicons {
	font-size: 32px;
	width: 32px;
	height: 32px;
	color: #84cc16;
	margin-bottom: 12px;
}

.chafwc-help-card h4 {
	margin: 0 0 8px;
}

.chafwc-help-card p {
	margin: 0;
	color: #6b7280;
}

/* AI Features Tab */
.chafwc-ai-features h3 {
	margin-top: 30px;
	margin-bottom: 15px;
	padding-bottom: 10px;
	border-bottom: 1px solid #e5e7eb;
}

.chafwc-ai-features h3:first-child {
	margin-top: 0;
}

/* Feature Locked */
.chafwc-feature-locked {
	background: #f9fafb;
	border: 1px dashed #d1d5db;
	border-radius: 8px;
	padding: 30px;
	text-align: center;
	color: #6b7280;
}

.chafwc-feature-locked .dashicons {
	font-size: 32px;
	width: 32px;
	height: 32px;
	color: #9ca3af;
	margin-bottom: 12px;
}

.chafwc-feature-locked p {
	margin: 0 0 16px;
}

/* Language Badges */
.chafwc-language-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 8px;
}

.chafwc-badge {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 16px;
	font-size: 13px;
	font-weight: 500;
}

.chafwc-badge-enabled {
	background: #D1FAE5;
	color: #065F46;
}

.chafwc-badge-disabled {
	background: #F3F4F6;
	color: #9CA3AF;
}

.chafwc-badge-pro {
	background: #84cc16;
	color: #fff;
}

/* Knowledge Base Section */
.chafwc-kb-section {
	margin-top: 10px;
}

.chafwc-kb-upload-area {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 20px;
	background: #f9fafb;
	border: 2px dashed #d1d5db;
	border-radius: 8px;
	margin-bottom: 20px;
}

.chafwc-kb-upload-area:hover {
	border-color: #84cc16;
}

.chafwc-kb-limits {
	color: #6b7280;
	font-size: 13px;
}

.chafwc-kb-files-list {
	margin-top: 16px;
}

.chafwc-kb-table {
	margin-top: 0;
}

.chafwc-kb-stats {
	margin-top: 12px;
	color: #6b7280;
	font-size: 13px;
}

.chafwc-no-files {
	color: #6b7280;
	font-style: italic;
	padding: 20px;
	text-align: center;
	background: #f9fafb;
	border-radius: 8px;
}

/* Status badges */
.chafwc-status {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 500;
	text-transform: capitalize;
}

.chafwc-status-success {
	background: #D1FAE5;
	color: #065F46;
}

.chafwc-status-error {
	background: #FEE2E2;
	color: #991B1B;
}

.chafwc-status-pending {
	background: #FEF3C7;
	color: #92400E;
}

/* Usage Bar */
.chafwc-usage-bar-container {
	max-width: 400px;
}

.chafwc-usage-bar {
	height: 12px;
	background: #E5E7EB;
	border-radius: 6px;
	overflow: hidden;
	margin-bottom: 8px;
}

.chafwc-usage-bar-fill {
	height: 100%;
	background: linear-gradient(90deg, #84cc16 0%, #65a30d 100%);
	border-radius: 6px;
	transition: width 0.3s ease;
}

.chafwc-usage-text {
	font-size: 14px;
	color: #374151;
}

/* AI Settings Status */
#chafwc-ai-settings-status {
	display: inline-block;
	margin-left: 12px;
	padding: 4px 12px;
	border-radius: 8px;
	font-size: 13px;
}

#chafwc-ai-settings-status.chafwc-success {
	background: #D1FAE5;
	color: #065F46;
}

#chafwc-ai-settings-status.chafwc-error {
	background: #FEE2E2;
	color: #991B1B;
}

#chafwc-ai-settings-status.chafwc-loading {
	background: #E0E7FF;
	color: #3730A3;
}

/* Loading state */
.chafwc-loading {
	color: #6b7280;
	font-style: italic;
}

/* Subscription Management */
.chafwc-subscription-management {
	margin-top: 30px;
	padding-top: 20px;
	border-top: 1px solid #e5e7eb;
}

.chafwc-subscription-management h3 {
	margin-top: 0;
	margin-bottom: 10px;
}

.chafwc-subscription-management .description {
	margin-bottom: 15px;
}

.chafwc-subscription-management .button {
	display: inline-flex;
	align-items: center;
}

/* Responsive */
@media (max-width: 782px) {
	.chafwc-settings-form .form-table th,
	.chafwc-settings-form .form-table td {
		display: block;
		width: 100%;
		padding: 10px 0;
	}

	.chafwc-plan-details {
		grid-template-columns: 1fr;
	}

	#chafwc-billing-content .chafwc-usage-stats {
		grid-template-columns: 1fr;
	}

	.chafwc-docs-grid {
		grid-template-columns: 1fr;
	}

	.chafwc-help-cards {
		grid-template-columns: 1fr;
	}

	.chafwc-voice-highlight {
		flex-direction: column;
		text-align: center;
		padding: 24px 20px;
	}

	.chafwc-conversations-filters {
		flex-wrap: wrap;
	}

	.chafwc-conv-table th:nth-child(4),
	.chafwc-conv-table td:nth-child(4) {
		display: none;
	}
}

/* Conversations Page */
.chafwc-conversations-filters {
	display: flex;
	gap: 10px;
	align-items: center;
	margin: 20px 0;
}

.chafwc-conversations-filters select,
.chafwc-conversations-filters input[type="text"],
.chafwc-conversations-filters input[type="date"] {
	height: 36px;
	border-radius: 8px;
}

.chafwc-conversations-filters input[type="text"] {
	min-width: 200px;
}

.chafwc-conversations-filters input[type="date"] {
	width: 140px;
}

.chafwc-filter-sep {
	color: #9ca3af;
	font-size: 14px;
	line-height: 36px;
}

.chafwc-conv-table {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	overflow: hidden;
	border-collapse: separate;
	border-spacing: 0;
	width: 100%;
	table-layout: auto;
}

.chafwc-conv-table th,
.chafwc-conv-table td {
	padding: 10px 12px;
	text-align: left;
	font-size: 13px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.chafwc-conv-table td:nth-child(3) {
	white-space: normal;
	max-width: 200px;
}

.chafwc-conv-table th {
	background: #f9fafb;
	font-weight: 600;
	border-bottom: 1px solid #e5e7eb;
}

.chafwc-conv-table td {
	border-bottom: 1px solid #f3f4f6;
}

.chafwc-conv-table tbody tr {
	cursor: pointer;
	transition: background 0.15s;
}

.chafwc-conv-table tbody tr:hover {
	background: #f9fafb;
}

.chafwc-conv-type {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 10px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
}

.chafwc-conv-type-text {
	background: #e0e7ff;
	color: #3730a3;
}

.chafwc-conv-type-voice {
	background: #dcfce7;
	color: #166534;
}

.chafwc-conv-date {
	white-space: nowrap;
}

.chafwc-conv-preview {
	color: #6b7280;
	max-width: 260px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.chafwc-conv-reason {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 10px;
	font-size: 11px;
	font-weight: 500;
	background: #f3f4f6;
	color: #6b7280;
}

.chafwc-reason-handoff {
	background: #fef3c7;
	color: #92400e;
}

.chafwc-reason-error,
.chafwc-reason-rate-limited {
	background: #fee2e2;
	color: #991b1b;
}

.chafwc-reason-limit-reached,
.chafwc-reason-idle-timeout {
	background: #e0e7ff;
	color: #3730a3;
}

.chafwc-conv-total {
	color: #6b7280;
	font-size: 13px;
	margin-right: 8px;
}

.chafwc-conv-pagination {
	display: flex;
	gap: 8px;
	align-items: center;
	justify-content: center;
	margin: 20px 0;
}

.chafwc-conv-pagination .button.active {
	background: #84cc16;
	color: #1a2e05;
	border-color: #84cc16;
}

.chafwc-conv-empty {
	text-align: center;
	padding: 40px 20px;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	color: #6b7280;
}

/* Conversation Detail */
.chafwc-conv-detail-header {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 20px 0 16px;
}

.chafwc-conv-info-card {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	padding: 16px 20px;
	margin-bottom: 16px;
}

.chafwc-conv-info-row {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}

.chafwc-conv-info-item {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.chafwc-conv-info-wide {
	flex-basis: 100%;
}

.chafwc-conv-info-label {
	font-size: 11px;
	color: #9ca3af;
	text-transform: uppercase;
	font-weight: 600;
}

.chafwc-conv-info-value {
	font-size: 14px;
	color: #1f2937;
}

#chafwc-conv-detail-messages {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	padding: 20px;
	max-height: 600px;
	overflow-y: auto;
}

.chafwc-msg {
	margin-bottom: 16px;
	max-width: 80%;
}

.chafwc-msg-user {
	margin-left: auto;
	text-align: right;
}

.chafwc-msg-bubble {
	display: inline-block;
	padding: 10px 14px;
	border-radius: 12px;
	font-size: 14px;
	line-height: 1.5;
	text-align: left;
	word-wrap: break-word;
}

.chafwc-msg-user .chafwc-msg-bubble {
	background: #84cc16;
	color: #1a2e05;
	border-bottom-right-radius: 4px;
}

.chafwc-msg-assistant .chafwc-msg-bubble {
	background: #f3f4f6;
	color: #1f2937;
	border-bottom-left-radius: 4px;
}

.chafwc-msg-role {
	font-size: 11px;
	color: #9ca3af;
	margin-bottom: 4px;
	text-transform: uppercase;
	font-weight: 600;
}

/* Analytics Page */
#chafwc-analytics-content {
	max-width: 900px;
}

.chafwc-analytics-filters {
	margin: 20px 0;
}

.chafwc-analytics-filters select {
	height: 36px;
	border-radius: 8px;
}

.chafwc-analytics-cards {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 12px;
	margin-bottom: 20px;
}

.chafwc-analytics-card {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	padding: 16px 12px;
	text-align: center;
}

.chafwc-analytics-card-value {
	font-size: 24px;
	font-weight: 700;
	color: #1f2937;
	line-height: 1.2;
}

.chafwc-analytics-card-label {
	font-size: 12px;
	color: #6b7280;
	margin-top: 4px;
}

.chafwc-analytics-section {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	padding: 20px;
}

.chafwc-analytics-section h3 {
	margin: 0 0 16px;
	font-size: 15px;
	font-weight: 600;
}

.chafwc-analytics-chart-card {
	margin-bottom: 20px;
}

.chafwc-analytics-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.chafwc-chart-bars {
	display: flex;
	align-items: flex-end;
	gap: 2px;
	height: 140px;
	padding-top: 8px;
}

.chafwc-chart-bar-group {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 0;
}

.chafwc-chart-bar {
	width: 100%;
	max-width: 24px;
	background: #84cc16;
	border-radius: 3px 3px 0 0;
	min-height: 2px;
	transition: height 0.3s;
}

.chafwc-chart-bar-label {
	font-size: 10px;
	color: #9ca3af;
	margin-top: 6px;
	min-height: 14px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

.chafwc-top-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.chafwc-top-list li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 0;
	border-bottom: 1px solid #f3f4f6;
	font-size: 13px;
}

.chafwc-top-list li:last-child {
	border-bottom: none;
}

.chafwc-top-list-label {
	color: #374151;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.chafwc-top-list-count {
	font-weight: 600;
	color: #84cc16;
	flex-shrink: 0;
	margin-left: 12px;
}

.chafwc-analytics-empty {
	text-align: center;
	padding: 40px 20px;
	color: #6b7280;
}

@media (max-width: 782px) {
	.chafwc-analytics-grid {
		grid-template-columns: 1fr;
	}
	.chafwc-analytics-cards {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.chafwc-analytics-cards {
		grid-template-columns: 1fr 1fr;
	}
}

/* Quick Replies Editor */
#chafwc-quick-replies-editor {
	max-width: 500px;
}

#chafwc-quick-replies-list {
	margin-bottom: 8px;
}

.chafwc-quick-reply-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 4px;
	margin-bottom: 4px;
	transition: border-color 0.15s, box-shadow 0.15s;
	cursor: default;
}

.chafwc-quick-reply-item.chafwc-dragging {
	opacity: 0.4;
}

.chafwc-quick-reply-item.chafwc-drag-over {
	border-color: #84cc16;
	box-shadow: 0 0 0 1px #84cc16;
}

.chafwc-quick-reply-drag {
	cursor: grab;
	color: #999;
	font-size: 14px;
	user-select: none;
	line-height: 1;
}

.chafwc-quick-reply-text {
	flex: 1;
	font-size: 13px;
	color: #1d2327;
}

.chafwc-quick-reply-remove {
	background: none;
	border: none;
	color: #cc1818;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	padding: 0 4px;
	opacity: 0.6;
	transition: opacity 0.15s;
}

.chafwc-quick-reply-remove:hover {
	opacity: 1;
}

.chafwc-quick-replies-add {
	display: flex;
	gap: 6px;
	margin-bottom: 6px;
}

.chafwc-quick-replies-add input {
	flex: 1;
}

#chafwc-quick-replies-reset {
	font-size: 12px;
	color: #8c8f94;
	text-decoration: underline;
}

/* ============================================================
   Qonvor Admin Theme — Light Mode (Scoped Overrides)
   Palette from qonvor.com light mode:
     background: hsl(210 20% 98%)   foreground: hsl(222 47% 11%)
     card: hsl(0 0% 100%)           border: hsl(214 20% 90%)
     muted: hsl(210 20% 96%)        muted-fg: hsl(215 16% 47%)
     accent: #a3e635 / #84cc16
   ============================================================ */

.chafwc-admin-wrap {
	--chafwc-bg: hsl(210 20% 98%);
	--chafwc-card: hsl(0 0% 100%);
	--chafwc-card-alt: hsl(210 20% 96%);
	--chafwc-border: hsl(214 20% 90%);
	--chafwc-text: hsl(222 47% 11%);
	--chafwc-muted: hsl(215 16% 47%);
	--chafwc-accent: #a3e635;
	--chafwc-accent-strong: #84cc16;
	--chafwc-accent-contrast: #1a2e05;
	--chafwc-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.04);
	--chafwc-shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.08);
	background: var(--chafwc-bg);
	border: 1px solid var(--chafwc-border);
	border-radius: 16px;
	padding: 24px 28px 36px;
	margin-left: auto;
	margin-right: auto;
}

/* --- Typography --- */

.chafwc-admin-wrap,
.chafwc-admin-wrap h1,
.chafwc-admin-wrap h2,
.chafwc-admin-wrap h3,
.chafwc-admin-wrap h4 {
	color: var(--chafwc-text);
}

.chafwc-admin-wrap h1 {
	font-size: 26px;
	font-weight: 600;
	letter-spacing: -0.02em;
	margin-bottom: 10px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--chafwc-border);
}

.chafwc-admin-wrap .description,
.chafwc-admin-wrap .chafwc-description,
.chafwc-admin-wrap .chafwc-plan-item-label,
.chafwc-admin-wrap .chafwc-stat-label,
.chafwc-admin-wrap .chafwc-stat-sub,
.chafwc-admin-wrap .chafwc-usage-text,
.chafwc-admin-wrap .chafwc-conv-preview,
.chafwc-admin-wrap .chafwc-conv-total,
.chafwc-admin-wrap .chafwc-conv-reason,
.chafwc-admin-wrap .chafwc-top-list-label,
.chafwc-admin-wrap .chafwc-analytics-card-label,
.chafwc-admin-wrap .chafwc-chart-bar-label {
	color: var(--chafwc-muted);
}

.chafwc-admin-wrap .form-table th {
	color: var(--chafwc-muted);
}

.chafwc-admin-wrap .form-table td {
	color: var(--chafwc-text);
}

/* --- Links --- */

.chafwc-admin-wrap a {
	color: var(--chafwc-accent-strong);
}

.chafwc-admin-wrap a:hover {
	color: #65a30d;
}

/* --- Cards & Surfaces --- */

.chafwc-admin-wrap .chafwc-settings-form,
.chafwc-admin-wrap .chafwc-backend-info,
.chafwc-admin-wrap .chafwc-plan-info,
.chafwc-admin-wrap .chafwc-docs-card,
.chafwc-admin-wrap .chafwc-tips-list,
.chafwc-admin-wrap .chafwc-help-card,
.chafwc-admin-wrap .chafwc-conv-table,
.chafwc-admin-wrap .chafwc-conv-info-card,
.chafwc-admin-wrap #chafwc-conv-detail-messages,
.chafwc-admin-wrap .chafwc-analytics-section,
.chafwc-admin-wrap .chafwc-analytics-card,
.chafwc-admin-wrap .chafwc-stat-card,
.chafwc-admin-wrap .chafwc-feature-locked,
.chafwc-admin-wrap .chafwc-kb-upload-area,
.chafwc-admin-wrap .chafwc-no-files,
.chafwc-admin-wrap .chafwc-conv-empty,
.chafwc-admin-wrap .chafwc-preview-container {
	background: var(--chafwc-card);
	border-color: var(--chafwc-border);
	box-shadow: var(--chafwc-shadow);
	color: var(--chafwc-text);
}

.chafwc-admin-wrap .chafwc-docs-card,
.chafwc-admin-wrap .chafwc-help-card,
.chafwc-admin-wrap .chafwc-step,
.chafwc-admin-wrap .chafwc-voice-highlight,
.chafwc-admin-wrap .chafwc-tips-list,
.chafwc-admin-wrap .chafwc-conv-info-card,
.chafwc-admin-wrap .chafwc-analytics-section,
.chafwc-admin-wrap .chafwc-analytics-card,
.chafwc-admin-wrap .chafwc-stat-card {
	background: var(--chafwc-card);
	border: 1px solid var(--chafwc-border);
	box-shadow: var(--chafwc-shadow);
}

/* --- Welcome Header --- */

.chafwc-admin-wrap .chafwc-welcome-header {
	background: linear-gradient(135deg, #84cc16 0%, #a3e635 100%);
	border: 1px solid #84cc16;
	box-shadow: 0 2px 12px rgba(132, 204, 22, 0.2);
}

/* --- Step Cards --- */

.chafwc-admin-wrap .chafwc-step,
.chafwc-admin-wrap .chafwc-docs-card,
.chafwc-admin-wrap .chafwc-help-card,
.chafwc-admin-wrap .chafwc-tips-list,
.chafwc-admin-wrap .chafwc-voice-highlight {
	background: var(--chafwc-card);
	border-color: var(--chafwc-border);
}

.chafwc-admin-wrap .chafwc-step-content p,
.chafwc-admin-wrap .chafwc-docs-card p,
.chafwc-admin-wrap .chafwc-help-card p,
.chafwc-admin-wrap .chafwc-tips-list p {
	color: var(--chafwc-muted);
}

.chafwc-admin-wrap .chafwc-step-number {
	background: var(--chafwc-accent);
	color: var(--chafwc-accent-contrast);
	box-shadow: 0 2px 8px rgba(132, 204, 22, 0.35);
}

/* --- Voice Highlight --- */

.chafwc-admin-wrap .chafwc-voice-highlight {
	align-items: flex-start;
	padding: 20px;
}

.chafwc-admin-wrap .chafwc-voice-highlight-icon {
	align-self: flex-start;
	margin-top: 2px;
}

.chafwc-admin-wrap .chafwc-voice-highlight-content .button,
.chafwc-admin-wrap .chafwc-voice-highlight-content .button-primary {
	margin-top: 4px;
	margin-right: 12px;
}

/* --- Tabs --- */

.chafwc-admin-wrap .chafwc-nav-tabs {
	border-bottom-color: var(--chafwc-border);
}

.chafwc-admin-wrap .chafwc-nav-tabs .nav-tab {
	background: var(--chafwc-card);
	color: var(--chafwc-text);
	border: 1px solid var(--chafwc-border);
	border-bottom-color: transparent;
}

.chafwc-admin-wrap .chafwc-nav-tabs .nav-tab:hover {
	background: var(--chafwc-card-alt);
}

.chafwc-admin-wrap .chafwc-nav-tabs .nav-tab-active,
.chafwc-admin-wrap .chafwc-nav-tabs .nav-tab-active:hover,
.chafwc-admin-wrap .chafwc-nav-tabs .nav-tab-active:focus {
	background: #84cc16;
	color: #1a2e05;
	border-color: #84cc16;
	border-bottom-color: var(--chafwc-bg);
	font-weight: 600;
}

/* --- Inputs --- */

.chafwc-admin-wrap input[type="text"],
.chafwc-admin-wrap input[type="email"],
.chafwc-admin-wrap input[type="url"],
.chafwc-admin-wrap input[type="password"],
.chafwc-admin-wrap input[type="number"],
.chafwc-admin-wrap textarea,
.chafwc-admin-wrap select {
	background: var(--chafwc-card);
	border: 1px solid var(--chafwc-border);
	color: var(--chafwc-text);
}

.chafwc-admin-wrap input[type="text"]::placeholder,
.chafwc-admin-wrap input[type="email"]::placeholder,
.chafwc-admin-wrap input[type="url"]::placeholder,
.chafwc-admin-wrap input[type="password"]::placeholder,
.chafwc-admin-wrap textarea::placeholder {
	color: hsl(215 16% 65%);
}

/* --- Buttons: Primary (lime green pill) --- */

.chafwc-admin-wrap .button.button-primary,
.chafwc-admin-wrap .button-primary {
	background: linear-gradient(180deg, #a3e635, #84cc16);
	border-color: #84cc16;
	color: var(--chafwc-accent-contrast);
	box-shadow: 0 2px 8px rgba(132, 204, 22, 0.3);
	border-radius: 999px;
	font-weight: 600;
	text-shadow: none;
}

.chafwc-admin-wrap .button.button-primary:hover,
.chafwc-admin-wrap .button-primary:hover,
.chafwc-admin-wrap .button.button-primary:focus,
.chafwc-admin-wrap .button-primary:focus {
	background: linear-gradient(180deg, #bef264, #a3e635) !important;
	border-color: #84cc16 !important;
	color: var(--chafwc-accent-contrast) !important;
	box-shadow: 0 4px 16px rgba(132, 204, 22, 0.4) !important;
	transform: translateY(-1px);
}

/* --- Buttons: Secondary (pill outline) --- */

.chafwc-admin-wrap .button {
	border: 1px solid var(--chafwc-border);
	color: var(--chafwc-text);
	border-radius: 999px;
	background: var(--chafwc-card);
	box-shadow: var(--chafwc-shadow);
	transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.chafwc-admin-wrap .button:hover,
.chafwc-admin-wrap .button:focus,
.chafwc-admin-wrap .button-secondary:hover,
.chafwc-admin-wrap .button-secondary:focus {
	background: var(--chafwc-card) !important;
	border-color: var(--chafwc-accent-strong) !important;
	color: var(--chafwc-text) !important;
	box-shadow: 0 2px 12px rgba(132, 204, 22, 0.25) !important;
	transform: translateY(-1px);
}

/* --- Status Banners --- */

.chafwc-admin-wrap .chafwc-status-free {
	background: #fef3c7;
	border-color: #f59e0b;
	color: #92400e;
}

.chafwc-admin-wrap .chafwc-status-connected {
	background: #ecfccb;
	border-color: #84cc16;
	color: #365314;
}

/* --- Connection / AI Status --- */

.chafwc-admin-wrap #chafwc-connection-status.chafwc-success,
.chafwc-admin-wrap #chafwc-ai-settings-status.chafwc-success {
	background: #ecfccb;
	color: #365314;
}

.chafwc-admin-wrap #chafwc-connection-status.chafwc-error,
.chafwc-admin-wrap #chafwc-ai-settings-status.chafwc-error {
	background: #fef2f2;
	color: #991b1b;
}

.chafwc-admin-wrap #chafwc-connection-status.chafwc-loading,
.chafwc-admin-wrap #chafwc-ai-settings-status.chafwc-loading {
	background: #eef2ff;
	color: #3730a3;
}

/* --- Tables --- */

.chafwc-admin-wrap .chafwc-features-table {
	background: var(--chafwc-card);
}

.chafwc-admin-wrap .chafwc-yes {
	color: var(--chafwc-accent-strong);
}

.chafwc-admin-wrap .chafwc-features-table thead th,
.chafwc-admin-wrap .chafwc-conv-table th {
	background: var(--chafwc-card-alt);
	border-bottom-color: var(--chafwc-border);
}

.chafwc-admin-wrap .chafwc-conv-table td,
.chafwc-admin-wrap .chafwc-features-table td,
.chafwc-admin-wrap .chafwc-features-table th {
	color: var(--chafwc-text);
	border-bottom-color: var(--chafwc-border);
}

.chafwc-admin-wrap .chafwc-top-list li,
.chafwc-admin-wrap .chafwc-features-table td,
.chafwc-admin-wrap .chafwc-features-table th {
	border-bottom-color: var(--chafwc-border);
}

.chafwc-admin-wrap .chafwc-features-table tbody tr:hover,
.chafwc-admin-wrap .chafwc-conv-table tbody tr:hover {
	background: var(--chafwc-card-alt);
}

/* --- Usage Bar --- */

.chafwc-admin-wrap .chafwc-usage-bar {
	background: hsl(210 20% 93%);
}

.chafwc-admin-wrap .chafwc-usage-bar-fill {
	background: linear-gradient(90deg, var(--chafwc-accent) 0%, var(--chafwc-accent-strong) 100%);
}

/* --- Tips Pre Block (override inline style) --- */

.chafwc-admin-wrap .chafwc-tips-list pre {
	background: var(--chafwc-card-alt) !important;
	border: 1px solid var(--chafwc-border) !important;
	color: var(--chafwc-text) !important;
	white-space: pre-wrap;
	word-break: break-word;
	overflow: auto;
	padding: 14px 18px !important;
	border-radius: 10px !important;
	font-size: 13px;
}

/* --- Language Badges --- */

.chafwc-admin-wrap .chafwc-badge-enabled {
	background: #ecfccb;
	color: #365314;
	border: 1px solid rgba(132, 204, 22, 0.5);
	box-shadow: 0 0 8px rgba(132, 204, 22, 0.25);
}

.chafwc-admin-wrap .chafwc-badge-disabled {
	background: var(--chafwc-card-alt);
	color: var(--chafwc-muted);
	border: 1px solid var(--chafwc-border);
}

/* --- Quick Replies --- */

.chafwc-admin-wrap .chafwc-quick-reply-item {
	background: var(--chafwc-card);
	border-color: var(--chafwc-border);
	color: var(--chafwc-text);
}

.chafwc-admin-wrap .chafwc-quick-reply-text {
	color: var(--chafwc-text);
}

.chafwc-admin-wrap .chafwc-quick-reply-drag {
	color: var(--chafwc-muted);
}

.chafwc-admin-wrap .chafwc-quick-reply-remove {
	color: #ef4444;
}

.chafwc-admin-wrap .chafwc-quick-reply-item.chafwc-drag-over {
	border-color: var(--chafwc-accent-strong);
	box-shadow: 0 0 8px rgba(132, 204, 22, 0.2);
}

.chafwc-admin-wrap #chafwc-quick-replies-reset {
	color: var(--chafwc-muted);
}

/* --- Flag Picker --- */

.chafwc-admin-wrap .chafwc-admin-flag-trigger,
.chafwc-admin-wrap .chafwc-admin-flag-list {
	background: var(--chafwc-card);
	border-color: var(--chafwc-border);
}

.chafwc-admin-wrap .chafwc-admin-flag-label,
.chafwc-admin-wrap .chafwc-admin-flag-option span {
	color: var(--chafwc-text);
}

.chafwc-admin-wrap .chafwc-admin-flag-option:hover {
	background: var(--chafwc-card-alt);
}

/* --- Notices (scoped, no dark hacks needed) --- */

.chafwc-admin-wrap .notice {
	border-radius: 8px;
}

.chafwc-admin-wrap .notice-success {
	border-left-color: var(--chafwc-accent-strong);
}

.chafwc-admin-wrap .notice a {
	color: var(--chafwc-accent-strong);
}