diff --git a/src/app.css b/src/app.css
index 9228db7c6b..7545ccb1af 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1023,3 +1023,102 @@ html.high-contrast:not(.dark) .shimmer {
 	color: var(--color-gray-800);
 	-webkit-text-fill-color: var(--color-gray-800);
 }
+
+/* Shared by file previews and the attachment modal. */
+.office-preview {
+	font-size: 0.875rem;
+	line-height: 1.6;
+	color: var(--color-gray-800);
+	background: #fff;
+	border-radius: 0.25rem;
+}
+.dark .office-preview {
+	color: var(--color-gray-200);
+	background: var(--color-gray-900);
+}
+.office-preview table {
+	border-collapse: collapse;
+	font-size: 0.75rem;
+	font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
+	line-height: 1.3;
+}
+.office-preview table td,
+.office-preview table th {
+	border: 1px solid var(--color-gray-200);
+	padding: 0.25rem 0.625rem;
+	text-align: left;
+	white-space: nowrap;
+	user-select: text;
+	cursor: cell;
+	max-width: 18.75rem;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+.dark .office-preview table td,
+.dark .office-preview table th {
+	border-color: var(--color-gray-800);
+}
+/* Column letter headers */
+.office-preview table th.excel-col-hdr {
+	position: sticky;
+	top: 0;
+	z-index: 2;
+	background: var(--color-gray-100);
+	color: var(--color-gray-600);
+	font-weight: 500;
+	font-size: 0.65rem;
+	text-align: center;
+	padding: 0.1875rem 0.625rem;
+	border-bottom: 2px solid var(--color-gray-300);
+}
+.dark .office-preview table th.excel-col-hdr {
+	background: var(--color-gray-850);
+	color: var(--color-gray-400);
+	border-bottom-color: var(--color-gray-700);
+}
+/* Row number cells */
+.office-preview .excel-row-num {
+	position: sticky;
+	left: 0;
+	z-index: 1;
+	background: var(--color-gray-100);
+	color: var(--color-gray-600);
+	font-size: 0.6rem;
+	text-align: right !important;
+	padding: 0.25rem 0.5rem 0.25rem 0.25rem !important;
+	user-select: none;
+	width: 1px;
+	white-space: nowrap;
+	border-right: 2px solid var(--color-gray-300) !important;
+}
+.dark .office-preview .excel-row-num {
+	background: var(--color-gray-850);
+	color: var(--color-gray-400);
+	border-right-color: var(--color-gray-700) !important;
+}
+/* Corner cell (intersection of row nums and col headers) */
+.office-preview thead .excel-row-num {
+	z-index: 3;
+}
+/* Number cells right-aligned */
+.office-preview .excel-num {
+	text-align: right;
+	font-variant-numeric: tabular-nums;
+}
+/* Row hover and selection */
+.office-preview table tbody tr:nth-child(even) td:not(.excel-row-num) {
+	background: rgba(0, 0, 0, 0.015);
+}
+.dark .office-preview table tbody tr:nth-child(even) td:not(.excel-row-num) {
+	background: rgba(255, 255, 255, 0.02);
+}
+.office-preview table tbody tr:hover td:not(.excel-row-num) {
+	background: rgba(59, 130, 246, 0.06);
+}
+.dark .office-preview table tbody tr:hover td:not(.excel-row-num) {
+	background: rgba(59, 130, 246, 0.1);
+}
+.office-preview table td:focus {
+	outline: 2px solid rgba(59, 130, 246, 0.5);
+	outline-offset: -2px;
+}
diff --git a/src/lib/components/chat/FileNav/FilePreview.svelte b/src/lib/components/chat/FileNav/FilePreview.svelte
index 4dd9bb98ee..b8d2602320 100644
--- a/src/lib/components/chat/FileNav/FilePreview.svelte
+++ b/src/lib/components/chat/FileNav/FilePreview.svelte
@@ -585,104 +585,6 @@
 	:global(.dark) .csv-row-num {
 		color: #6b7280;
 	}
-	/* ── Office preview styles ──────────────────────────────────────── */
-	:global(.office-preview) {
-		font-size: 0.875rem;
-		line-height: 1.6;
-		color: #1f2937;
-		background: #fff;
-		border-radius: 0.25rem;
-	}
-	:global(.dark .office-preview) {
-		color: #e5e7eb;
-		background: #1a1a2e;
-	}
-	:global(.office-preview table) {
-		border-collapse: collapse;
-		font-size: 0.75rem;
-		font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
-		line-height: 1.3;
-	}
-	:global(.office-preview table td),
-	:global(.office-preview table th) {
-		border: 1px solid rgba(200, 200, 200, 0.5);
-		padding: 0.25rem 0.625rem;
-		text-align: left;
-		white-space: nowrap;
-		user-select: text;
-		cursor: cell;
-		max-width: 18.75rem;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-	:global(.dark .office-preview table td),
-	:global(.dark .office-preview table th) {
-		border-color: rgba(80, 80, 80, 0.5);
-	}
-	/* Column letter headers */
-	:global(.office-preview table th.excel-col-hdr) {
-		position: sticky;
-		top: 0;
-		z-index: 2;
-		background: #f0f0f0;
-		color: #666;
-		font-weight: 500;
-		font-size: 0.65rem;
-		text-align: center;
-		padding: 0.1875rem 0.625rem;
-		border-bottom: 2px solid rgba(180, 180, 180, 0.6);
-	}
-	:global(.dark .office-preview table th.excel-col-hdr) {
-		background: #2a2a3e;
-		color: #888;
-		border-bottom-color: rgba(100, 100, 100, 0.6);
-	}
-	/* Row number cells */
-	:global(.office-preview .excel-row-num) {
-		position: sticky;
-		left: 0;
-		z-index: 1;
-		background: #f0f0f0;
-		color: #999;
-		font-size: 0.6rem;
-		text-align: right !important;
-		padding: 0.25rem 0.5rem 0.25rem 0.25rem !important;
-		user-select: none;
-		width: 1px;
-		white-space: nowrap;
-		border-right: 2px solid rgba(180, 180, 180, 0.6) !important;
-	}
-	:global(.dark .office-preview .excel-row-num) {
-		background: #2a2a3e;
-		color: #666;
-		border-right-color: rgba(100, 100, 100, 0.6) !important;
-	}
-	/* Corner cell (intersection of row nums and col headers) */
-	:global(.office-preview thead .excel-row-num) {
-		z-index: 3;
-	}
-	/* Number cells right-aligned */
-	:global(.office-preview .excel-num) {
-		text-align: right;
-		font-variant-numeric: tabular-nums;
-	}
-	/* Row hover and selection */
-	:global(.office-preview table tbody tr:nth-child(even) td:not(.excel-row-num)) {
-		background: rgba(0, 0, 0, 0.015);
-	}
-	:global(.dark .office-preview table tbody tr:nth-child(even) td:not(.excel-row-num)) {
-		background: rgba(255, 255, 255, 0.02);
-	}
-	:global(.office-preview table tbody tr:hover td:not(.excel-row-num)) {
-		background: rgba(59, 130, 246, 0.06);
-	}
-	:global(.dark .office-preview table tbody tr:hover td:not(.excel-row-num)) {
-		background: rgba(59, 130, 246, 0.1);
-	}
-	:global(.office-preview table td:focus) {
-		outline: 2px solid rgba(59, 130, 246, 0.5);
-		outline-offset: -2px;
-	}
 	/* DOCX / generic office styles */
 	:global(.office-preview img) {
 		max-width: 100%;
diff --git a/src/lib/components/common/FileItemModal.svelte b/src/lib/components/common/FileItemModal.svelte
index 1a11cc61ca..57cc5c8e0c 100644
--- a/src/lib/components/common/FileItemModal.svelte
+++ b/src/lib/components/common/FileItemModal.svelte
@@ -600,52 +600,3 @@
 		</div>
 	</div>
 </Modal>
-
-<style>
-	:global(.excel-table-container table) {
-		width: 100%;
-		border-collapse: collapse;
-		font-size: 0.875rem;
-		line-height: 1.25rem;
-	}
-
-	:global(.excel-table-container table td),
-	:global(.excel-table-container table th) {
-		border-width: 1px;
-		border-style: solid;
-		border-color: var(--color-gray-300, #cdcdcd);
-		padding: 0.5rem 0.75rem;
-		text-align: left;
-	}
-
-	:global(.dark .excel-table-container table td),
-	:global(.dark .excel-table-container table th) {
-		border-color: var(--color-gray-600, #676767);
-	}
-
-	:global(.excel-table-container table th) {
-		background-color: var(--color-gray-100, #ececec);
-		font-weight: 600;
-	}
-
-	:global(.dark .excel-table-container table th) {
-		background-color: var(--color-gray-800, #333);
-		color: var(--color-gray-100, #ececec);
-	}
-
-	:global(.excel-table-container table tr:nth-child(even)) {
-		background-color: var(--color-gray-50, #f9f9f9);
-	}
-
-	:global(.dark .excel-table-container table tr:nth-child(even)) {
-		background-color: rgba(38, 38, 38, 0.5);
-	}
-
-	:global(.excel-table-container table tr:hover) {
-		background-color: var(--color-gray-100, #ececec);
-	}
-
-	:global(.dark .excel-table-container table tr:hover) {
-		background-color: rgba(51, 51, 51, 0.5);
-	}
-</style>