feat: add docx and html2pdf.js for document export functionality

src/style.css

@@ -37,8 +37,16 @@
   --toggle-moon: #475569;
   --ghost-text: #7d8796;
   --ghost-code-bg: rgba(15, 23, 42, 0.06);
-  --mermaid-max-width: 800px;
   --mermaid-max-height: 420px;
+  --mermaid-mobile-max-height: 320px;
+  --mermaid-action-bg: linear-gradient(180deg, #ffffff 0%, #f4f7fc 100%);
+  --mermaid-action-hover-bg: linear-gradient(180deg, #ffffff 0%, #e9f2ff 100%);
+  --mermaid-action-fg: #1f2937;
+  --mermaid-action-border: #cfd8e6;
+  --mermaid-action-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
+  --mermaid-action-shadow-hover: 0 4px 10px rgba(37, 99, 235, 0.16);
+  --mermaid-action-disabled-bg: rgba(148, 163, 184, 0.18);
+  --mermaid-action-disabled-fg: #9aa4b2;
 
   --crepe-color-background: #ffffff;
   --crepe-color-on-background: #000000;
@@ -87,6 +95,14 @@
   --toggle-moon: #e2e8f0;
   --ghost-text: #95a0b4;
   --ghost-code-bg: rgba(226, 232, 240, 0.12);
+  --mermaid-action-bg: linear-gradient(180deg, #30394b 0%, #242c3a 100%);
+  --mermaid-action-hover-bg: linear-gradient(180deg, #3a4760 0%, #2a3445 100%);
+  --mermaid-action-fg: #e5e7eb;
+  --mermaid-action-border: #3e4a61;
+  --mermaid-action-shadow: 0 1px 2px rgba(2, 6, 23, 0.45);
+  --mermaid-action-shadow-hover: 0 5px 12px rgba(2, 6, 23, 0.55);
+  --mermaid-action-disabled-bg: rgba(82, 93, 110, 0.3);
+  --mermaid-action-disabled-fg: #9aa4b2;
 
   --crepe-color-background: #1a1a1a;
   --crepe-color-on-background: #e6e6e6;
@@ -195,31 +211,87 @@ body {
 /* ── Mermaid diagram blocks ─────────────────────────────────────────── */
 .mermaid-block {
   display: block;
-  margin: 1em 0;
-  padding: 16px;
+  width: fit-content;
+  max-width: 100%;
+  margin: 1em auto;
+  padding: 12px;
   background: var(--crepe-color-surface, #f7f7f7);
   border: 1px solid var(--panel-border, #d7deea);
-  border-radius: 8px;
-  cursor: pointer;
-  transition: border-color 160ms ease, box-shadow 160ms ease;
-  user-select: none;
+  border-radius: 10px;
+  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
 }
 
 .mermaid-block:hover {
   border-color: var(--focus-ring, #3b82f6);
 }
 
-.mermaid-block.mermaid-selected {
-  border-color: var(--focus-ring, #3b82f6);
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus-ring, #3b82f6) 25%, transparent);
+.mermaid-controls {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-bottom: 10px;
+  flex-wrap: wrap;
+}
+
+.mermaid-action-btn {
+  appearance: none;
+  border: 1px solid var(--mermaid-action-border);
+  border-radius: 999px;
+  padding: 6px 12px;
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+  line-height: 1.2;
+  background: var(--mermaid-action-bg);
+  color: var(--mermaid-action-fg);
+  cursor: pointer;
+  box-shadow: var(--mermaid-action-shadow);
+  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease, background 160ms ease;
+}
+
+.mermaid-action-btn:hover:not([disabled]) {
+  border-color: var(--focus-ring);
+  background: var(--mermaid-action-hover-bg);
+  box-shadow: var(--mermaid-action-shadow-hover);
+  transform: translateY(-1px);
+}
+
+.mermaid-action-btn:active:not([disabled]) {
+  transform: translateY(0);
+}
+
+.mermaid-action-btn[disabled] {
+  background: var(--mermaid-action-disabled-bg);
+  color: var(--mermaid-action-disabled-fg);
+  cursor: not-allowed;
 }
 
 .mermaid-inner {
   display: block;
-  max-width: min(100%, var(--mermaid-max-width));
+  max-width: 100%;
   max-height: var(--mermaid-max-height);
-  margin: 0 auto;
   overflow: auto;
+  border-radius: 8px;
+  padding: 8px;
+  background: color-mix(in srgb, var(--crepe-color-background, #fff) 88%, transparent);
+}
+
+.mermaid-inner::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.mermaid-inner::-webkit-scrollbar-thumb {
+  background-color: var(--scrollbar-thumb);
+  border-radius: 4px;
+}
+
+.mermaid-image {
+  display: block;
+  width: auto;
+  height: auto;
+  max-width: none;
+  margin: 0 auto;
 }
 
 .mermaid-inner svg {
@@ -252,3 +324,25 @@ body {
   white-space: pre-wrap;
   word-break: break-word;
 }
+
+:root[data-theme='dark'] .milkdown .katex {
+  color: var(--crepe-color-on-background);
+}
+
+:root[data-theme='dark'] .milkdown .cm-editor,
+:root[data-theme='dark'] .milkdown .cm-scroller {
+  background-color: color-mix(in srgb, var(--crepe-color-surface-low) 86%, transparent);
+  color: var(--crepe-color-on-surface);
+}
+
+:root[data-theme='dark'] .milkdown .cm-gutters {
+  background-color: color-mix(in srgb, var(--crepe-color-surface-low) 86%, transparent);
+  color: var(--crepe-color-on-surface-variant);
+  border-right-color: var(--panel-border);
+}
+
+@media (max-width: 768px) {
+  .mermaid-inner {
+    max-height: var(--mermaid-mobile-max-height);
+  }
+}