From 7bde8829474747c86295df1a1e05cf92dcf17bb1 Mon Sep 17 00:00:00 2001
From: Research Assistant <research@example.com>
Date: Mon, 4 May 2026 14:58:19 +0800
Subject: [PATCH] feat(28-01): add mode-aware CSS for content area and header
 context

- Section 13: .paperforge-content-area with switching opacity transition
- Section 13: .paperforge-content-placeholder with dashed border styling
- Section 14: .paperforge-mode-context with flex layout
- Section 14: .paperforge-mode-badge with 3 color states (global/paper/collection)
- Section 14: .paperforge-mode-name with text-overflow ellipsis truncation
- Section 14: .paperforge-mode-warning using var(--text-warning)
---
 paperforge/plugin/styles.css | 80 ++++++++++++++++++++++++++++++++++++
 1 file changed, 80 insertions(+)

diff --git a/paperforge/plugin/styles.css b/paperforge/plugin/styles.css
index f2f59b23..191531b8 100644
--- a/paperforge/plugin/styles.css
+++ b/paperforge/plugin/styles.css
@@ -1046,3 +1046,83 @@
 .paperforge-bar-chart .bar-fill.stage-fulltext-ready { background: var(--color-green); }
 .paperforge-bar-chart .bar-fill.stage-deep-read { background: var(--color-yellow); }
 .paperforge-bar-chart .bar-fill.stage-ai-ready { background: var(--color-red); }
+
+/* ==========================================================================
+   SECTION 13 — Mode-Aware Content Area
+   ========================================================================== */
+.paperforge-content-area {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    transition: opacity 0.2s ease;
+}
+
+.paperforge-content-area.switching {
+    opacity: 0.4;
+    pointer-events: none;
+}
+
+.paperforge-content-placeholder {
+    text-align: center;
+    padding: 32px 12px;
+    color: var(--text-muted);
+    font-size: var(--font-ui-small);
+    border: 1px dashed var(--background-modifier-border);
+    border-radius: var(--radius-m);
+    background: var(--background-secondary);
+    font-style: italic;
+}
+
+/* ==========================================================================
+   SECTION 14 — Mode-Aware Header Context
+   ========================================================================== */
+.paperforge-mode-context {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-width: 0;
+    flex: 1;
+}
+
+.paperforge-mode-badge {
+    font-size: 10px;
+    font-weight: var(--font-semibold);
+    padding: 2px 8px;
+    border-radius: 10px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    line-height: 1.4;
+    flex-shrink: 0;
+}
+
+.paperforge-mode-badge.global {
+    background: var(--interactive-accent);
+    color: var(--text-on-accent);
+}
+
+.paperforge-mode-badge.paper {
+    background: var(--color-cyan);
+    color: var(--text-on-accent);
+}
+
+.paperforge-mode-badge.collection {
+    background: var(--color-purple);
+    color: var(--text-on-accent);
+}
+
+.paperforge-mode-name {
+    font-size: var(--font-ui-small);
+    font-weight: var(--font-semibold);
+    color: var(--text-normal);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    min-width: 0;
+    line-height: 1.3;
+}
+
+.paperforge-mode-warning {
+    font-size: var(--font-ui-smaller);
+    color: var(--text-warning);
+    margin-left: auto;
+}