auto-claude: 2.2 - Add CSS styles for the concept panel: distinct vis

src/main.css

@@ -369,6 +369,126 @@ kbd {
 	font-weight: 500;
 }
 
+/* ================= CONCEPT SECTION ================= */
+.concept-section {
+	margin-top: var(--spacing-lg);
+	padding: var(--spacing-md);
+	background: var(--primary-bg-light);
+	border: 1px solid var(--primary-bg-medium);
+	border-left: 3px solid var(--primary-color);
+	border-radius: var(--border-radius-md);
+	transition: background 0.2s ease;
+}
+
+.concept-section:hover {
+	background: var(--primary-bg-medium);
+}
+
+.concept-section[open] {
+	background: var(--primary-bg-medium);
+}
+
+.concept-summary {
+	cursor: pointer;
+	font-weight: 600;
+	font-size: 0.9rem;
+	color: var(--primary-dark);
+	list-style: none;
+	user-select: none;
+	padding: var(--spacing-xs) 0;
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-xs);
+}
+
+.concept-summary::-webkit-details-marker {
+	display: none;
+}
+
+.concept-summary::before {
+	content: "▶";
+	display: inline-block;
+	font-size: 0.7rem;
+	transition: transform 0.2s ease;
+	color: var(--primary-color);
+}
+
+.concept-section[open] .concept-summary::before {
+	transform: rotate(90deg);
+}
+
+.concept-summary:hover {
+	color: var(--primary-color);
+}
+
+.concept-content {
+	margin-top: var(--spacing-md);
+	padding-top: var(--spacing-sm);
+	border-top: 1px solid var(--border-color);
+	animation: concept-expand 0.3s ease;
+}
+
+@keyframes concept-expand {
+	from {
+		opacity: 0;
+		transform: translateY(-8px);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+
+.concept-explanation {
+	font-size: 0.9rem;
+	line-height: 1.6;
+	color: var(--text-color);
+	margin-bottom: var(--spacing-md);
+}
+
+.concept-explanation:empty {
+	display: none;
+	margin-bottom: 0;
+}
+
+.concept-diagram {
+	background: var(--panel-bg);
+	padding: var(--spacing-md);
+	border-radius: var(--border-radius-sm);
+	border: 1px solid var(--border-color);
+	font-family: var(--font-code);
+	font-size: 0.85rem;
+	line-height: 1.4;
+	color: var(--text-color);
+	overflow-x: auto;
+	white-space: pre;
+	margin-bottom: var(--spacing-md);
+}
+
+.concept-diagram:empty {
+	display: none;
+	margin-bottom: 0;
+}
+
+.concept-container-vs-item {
+	background: var(--success-bg-light);
+	padding: var(--spacing-sm) var(--spacing-md);
+	border-radius: var(--border-radius-sm);
+	border-left: 3px solid var(--success-color);
+	font-size: 0.85rem;
+	line-height: 1.6;
+	color: var(--text-color);
+}
+
+.concept-container-vs-item:empty {
+	display: none;
+}
+
+.concept-container-vs-item strong {
+	color: var(--success-color-dark);
+	font-weight: 600;
+}
+
 /* ================= EDITOR SECTION ================= */
 .editor-section {
 	flex: 1;
@@ -1467,3 +1587,18 @@ input:checked + .toggle-slider::before {
 [dir="rtl"] .preview-controls {
 	flex-direction: row-reverse;
 }
+
+/* RTL: Concept section */
+[dir="rtl"] .concept-section {
+	border-left: 1px solid var(--primary-bg-medium);
+	border-right: 3px solid var(--primary-color);
+}
+
+[dir="rtl"] .concept-summary {
+	flex-direction: row-reverse;
+}
+
+[dir="rtl"] .concept-container-vs-item {
+	border-left: 1px solid var(--success-bg-light);
+	border-right: 3px solid var(--success-color);
+}