@bytechain.cn/colamd 1.5.0 → 1.5.1-beta.2

package/dist/renderer/assets/{index-dyHEFYvY.css → index-CeFpoCKV.css}

@@ -1186,24 +1186,30 @@ body.theme-newsprint .mermaid-preview svg .c4 span {
 body.theme-newsprint .mermaid-preview svg .person-man text,
 body.theme-newsprint .mermaid-preview svg .person-man span {
   font-family: 'PT Serif', Georgia, serif !important;
-}body.theme-custom .mermaid-preview svg text {
+}/* === 字体 & 文字颜色基础定义 === */
+body.theme-custom .mermaid-preview svg text {
   fill: var(--mermaid-text-color, var(--text-color)) !important;
   font-family: var(--mermaid-font-family, inherit) !important;
   font-size: var(--mermaid-font-size, 12px) !important;
 }
 
-body.theme-custom .mermaid-preview svg .nodeLabel span,
-body.theme-custom .mermaid-preview svg .edgeLabel span {
-  font-family: var(--mermaid-font-family, inherit) !important;
-  font-size: var(--mermaid-font-size, 14px) !important;
-}
-
+/* === ForeignObject 文字 === */
 body.theme-custom .mermaid-preview svg foreignObject span {
   color: var(--mermaid-text-color, var(--text-color)) !important;
   font-family: var(--mermaid-font-family, inherit) !important;
   font-size: var(--mermaid-font-size, 14px) !important;
 }
 
+/* === Person-Man 强制白色 === */
+body.theme-custom .mermaid-preview svg .person-man text {
+  fill: #ffffff !important;
+}
+
+body.theme-custom .mermaid-preview svg .person-man span {
+  color: #ffffff !important;
+}
+
+/* === 文字偏移样式（custom 主题特有） === */
 body.theme-custom .mermaid-preview svg .label text,
 body.theme-custom .mermaid-preview svg .nodeLabel text,
 body.theme-custom .mermaid-preview svg .state-title,
@@ -1225,399 +1231,7 @@ body.theme-custom .mermaid-preview svg .edgeLabel {
   display: inline-block !important;
   position: relative !important;
   top: -3px !important;
-}
-
-body.theme-custom .mermaid-preview svg .node rect,
-body.theme-custom .mermaid-preview svg .node circle,
-body.theme-custom .mermaid-preview svg .node ellipse,
-body.theme-custom .mermaid-preview svg .node polygon,
-body.theme-custom .mermaid-preview svg .node path {
-  stroke: var(--mermaid-node-border, var(--border-color));
-}
-
-body.theme-custom .mermaid-preview svg .edgePath .path {
-  stroke: var(--mermaid-line-color, var(--border-color));
-}
-
-body.theme-custom .mermaid-preview svg .cluster rect,
-body.theme-custom .mermaid-preview svg .cluster path {
-  stroke: var(--mermaid-cluster-border, var(--border-color));
-}
-
-body.theme-custom .mermaid-preview svg defs marker path {
-  fill: var(--mermaid-arrowhead-color, var(--mermaid-line-color, var(--border-color)));
-  stroke: var(--mermaid-arrowhead-color, var(--mermaid-line-color, var(--border-color)));
-}
-
-body.theme-custom .mermaid-preview svg rect[stroke="#444444"] {
-  stroke: var(--mermaid-node-border, var(--border-color)) !important;
-}
-
-body.theme-custom .mermaid-preview svg path[stroke="#444444"] {
-  stroke: var(--mermaid-node-border, var(--border-color)) !important;
-}
-
-body.theme-custom .mermaid-preview svg rect[stroke="#000000"] {
-  stroke: var(--mermaid-node-border, var(--border-color)) !important;
-}
-
-body.theme-custom .mermaid-preview svg path[stroke="#000000"] {
-  stroke: var(--mermaid-node-border, var(--border-color)) !important;
-}
-
-body.theme-custom .mermaid-preview svg line[stroke="#444444"] {
-  stroke: var(--mermaid-node-border, var(--border-color)) !important;
-}
-
-body.theme-custom .mermaid-preview svg line[stroke="#000000"] {
-  stroke: var(--mermaid-node-border, var(--border-color)) !important;
-}
-
-body.theme-custom .mermaid-preview svg .edgeLabel text {
-  fill: var(--mermaid-text-color, var(--text-color)) !important;
-}
-
-body.theme-custom .mermaid-preview svg .edgeLabel rect {
-  fill: var(--mermaid-edge-label-background, var(--code-block-bg)) !important;
-}
-
-body.theme-custom .mermaid-preview svg .edgeLabel span {
-  color: var(--mermaid-text-color, var(--text-color)) !important;
-}
-
-body.theme-custom .mermaid-preview svg .label text {
-  fill: var(--mermaid-text-color, var(--text-color)) !important;
-}
-
-body.theme-custom .mermaid-preview svg .nodeLabel text {
-  fill: var(--mermaid-text-color, var(--text-color)) !important;
-}
-
-body.theme-custom .mermaid-preview svg .nodeLabel span {
-  color: var(--mermaid-text-color, var(--text-color)) !important;
-}
-
-body.theme-custom .mermaid-preview svg .person rect,
-body.theme-custom .mermaid-preview svg .person path {
-  stroke: var(--mermaid-person-border, var(--text-color));
-}
-
-body.theme-custom .mermaid-preview svg .person-man text {
-  fill: #ffffff !important;
-}
-
-body.theme-custom .mermaid-preview svg .person-man span {
-  color: #ffffff !important;
-}
-
-body.theme-custom .mermaid-preview svg .actor rect,
-body.theme-custom .mermaid-preview svg .actor path {
-  stroke: var(--mermaid-node-border, var(--border-color));
-}
-
-body.theme-custom .mermaid-preview svg text.actor {
-  fill: var(--mermaid-text-color, var(--text-color)) !important;
-}
-
-body.theme-custom .mermaid-preview svg .messageLine0,
-body.theme-custom .mermaid-preview svg .messageLine1 {
-  stroke: var(--mermaid-line-color, var(--border-color)) !important;
-}
-
-body.theme-custom .mermaid-preview svg .messageText {
-  fill: var(--mermaid-text-color, var(--text-color)) !important;
-}
-
-body.theme-custom .mermaid-preview svg .loopText,
-body.theme-custom .mermaid-preview svg .altText,
-body.theme-custom .mermaid-preview svg .optText {
-  fill: var(--mermaid-text-color, var(--text-muted)) !important;
-}
-
-body.theme-custom .mermaid-preview svg .loopLine,
-body.theme-custom .mermaid-preview svg .altLine,
-body.theme-custom .mermaid-preview svg .optLine {
-  stroke: var(--mermaid-line-color, var(--border-color)) !important;
-}
-
-body.theme-custom .mermaid-preview svg .labelBox {
-  stroke: var(--mermaid-node-border, var(--border-color));
-}
-
-body.theme-custom .mermaid-preview svg .labelText {
-  fill: var(--mermaid-text-color, var(--text-color)) !important;
-}
-
-body.theme-custom .mermaid-preview svg .loopText tspan,
-body.theme-custom .mermaid-preview svg .altText tspan,
-body.theme-custom .mermaid-preview svg .optText tspan {
-  fill: var(--mermaid-text-color, var(--text-muted)) !important;
-}
-
-body.theme-custom .mermaid-preview svg .classBox rect,
-body.theme-custom .mermaid-preview svg .classBox path {
-  stroke: var(--mermaid-node-border, var(--border-color));
-}
-
-body.theme-custom .mermaid-preview svg .classTitle text {
-  fill: var(--mermaid-text-color, var(--text-color)) !important;
-}
-
-body.theme-custom .mermaid-preview svg .classTitle span {
-  color: var(--mermaid-text-color, var(--text-color)) !important;
-}
-
-body.theme-custom .mermaid-preview svg .classText text {
-  fill: var(--mermaid-text-color, var(--text-muted)) !important;
-}
-
-body.theme-custom .mermaid-preview svg .classText span {
-  color: var(--mermaid-text-color, var(--text-muted)) !important;
-}
-
-body.theme-custom .mermaid-preview svg .divider {
-  stroke: var(--mermaid-node-border, var(--border-color));
-}
-
-body.theme-custom .mermaid-preview svg .relation {
-  stroke: var(--mermaid-line-color, var(--border-color));
-}
-
-body.theme-custom .mermaid-preview svg .statediagram-state rect,
-body.theme-custom .mermaid-preview svg .statediagram-state circle {
-  stroke: var(--mermaid-node-border, var(--border-color));
-}
-
-body.theme-custom .mermaid-preview svg .statediagram-state .nodeLabel text,
-body.theme-custom .mermaid-preview svg .statediagram-state .nodeLabel span {
-  fill: var(--mermaid-text-color, var(--text-color)) !important;
-  color: var(--mermaid-text-color, var(--text-color)) !important;
-}
-
-body.theme-custom .mermaid-preview svg .statediagram-cluster rect {
-  stroke: var(--mermaid-cluster-border, var(--border-color));
-}
-
-body.theme-custom .mermaid-preview svg .transition {
-  stroke: var(--mermaid-line-color, var(--border-color));
-}
-
-body.theme-custom .mermaid-preview svg .edgeLabel .label text {
-  fill: var(--mermaid-text-color, var(--text-color)) !important;
-}
-
-body.theme-custom .mermaid-preview svg .statediagram-cluster .outer-title text {
-  fill: var(--mermaid-text-color, var(--text-color)) !important;
-}
-
-body.theme-custom .mermaid-preview svg .pieTitleText {
-  fill: var(--mermaid-text-color, var(--text-color)) !important;
-}
-
-body.theme-custom .mermaid-preview svg .pieCircle {
-  stroke: var(--mermaid-node-border, var(--border-color));
-}
-
-body.theme-custom .mermaid-preview svg .slice {
-  stroke: var(--mermaid-node-border, var(--border-color));
-}
-
-body.theme-custom .mermaid-preview svg .legend text {
-  fill: var(--mermaid-text-color, var(--text-color)) !important;
-}
-
-body.theme-custom .mermaid-preview svg .task {
-  stroke: var(--mermaid-node-border, var(--border-color));
-}
-
-body.theme-custom .mermaid-preview svg .taskText,
-body.theme-custom .mermaid-preview svg .taskTextOutsideRight,
-body.theme-custom .mermaid-preview svg .taskTextOutsideLeft {
-  fill: var(--mermaid-text-color, var(--text-color)) !important;
-}
-
-body.theme-custom .mermaid-preview svg .section rect {
-  stroke: var(--mermaid-node-border, var(--border-color));
-}
-
-body.theme-custom .mermaid-preview svg .sectionText,
-body.theme-custom .mermaid-preview svg .sectionTitle {
-  fill: var(--mermaid-text-color, var(--text-color)) !important;
-}
-
-body.theme-custom .mermaid-preview svg .today {
-  stroke: var(--mermaid-line-color, var(--border-color)) !important;
-}
-
-body.theme-custom .mermaid-preview svg .grid .tick line {
-  stroke: var(--mermaid-line-color, var(--border-color));
-}
-
-body.theme-custom .mermaid-preview svg .grid .domain {
-  stroke: var(--mermaid-line-color, var(--border-color));
-}
-
-body.theme-custom .mermaid-preview svg .tick text {
-  fill: var(--mermaid-text-color, var(--text-muted));
-}
-
-body.theme-custom .mermaid-preview svg .mindmap-node rect,
-body.theme-custom .mermaid-preview svg .mindmap-node circle,
-body.theme-custom .mermaid-preview svg .mindmap-node ellipse,
-body.theme-custom .mermaid-preview svg .mindmap-node polygon,
-body.theme-custom .mermaid-preview svg .mindmap-node path {
-  stroke: var(--mermaid-node-border, var(--border-color));
-}
-
-body.theme-custom .mermaid-preview svg .mindmap-node text {
-  fill: var(--mermaid-text-color, var(--text-color)) !important;
-}
-
-body.theme-custom .mermaid-preview svg .mindmap-node .nodeLabel text,
-body.theme-custom .mermaid-preview svg .mindmap-node .nodeLabel span {
-  fill: var(--mermaid-text-color, var(--text-color)) !important;
-  color: var(--mermaid-text-color, var(--text-color)) !important;
-}
-
-body.theme-custom .mermaid-preview svg .mindmap-edge {
-  stroke: var(--mermaid-line-color, var(--border-color));
-}
-
-body.theme-custom .mermaid-preview svg .quadrant rect {
-  stroke: var(--mermaid-node-border, var(--border-color));
-}
-
-body.theme-custom .mermaid-preview svg .quadrant text {
-  fill: var(--mermaid-text-color, var(--text-color)) !important;
-}
-
-body.theme-custom .mermaid-preview svg .quadrant .titleText {
-  fill: var(--mermaid-text-color, var(--text-color)) !important;
-}
-
-body.theme-custom .mermaid-preview svg .quadrant .axis text {
-  fill: var(--mermaid-text-color, var(--text-muted)) !important;
-}
-
-body.theme-custom .mermaid-preview svg .quadrant .axis line,
-body.theme-custom .mermaid-preview svg .quadrant .axis path {
-  stroke: var(--mermaid-line-color, var(--border-color));
-}
-
-body.theme-custom .mermaid-preview svg .quadrant .point {
-  fill: var(--mermaid-primary-color, var(--link-color));
-  stroke: var(--mermaid-node-border, var(--border-color));
-}
-
-body.theme-custom .mermaid-preview svg .xychart .axis text {
-  fill: var(--mermaid-text-color, var(--text-muted)) !important;
-}
-
-body.theme-custom .mermaid-preview svg .xychart .axis line,
-body.theme-custom .mermaid-preview svg .xychart .axis path {
-  stroke: var(--mermaid-line-color, var(--border-color));
-}
-
-body.theme-custom .mermaid-preview svg .xychart .plot rect {
-  stroke: var(--mermaid-node-border, var(--border-color));
-}
-
-body.theme-custom .mermaid-preview svg .xychart .plot line {
-  stroke: var(--mermaid-line-color, var(--border-color));
-}
-
-body.theme-custom .mermaid-preview svg .xychart .titleText {
-  fill: var(--mermaid-text-color, var(--text-color)) !important;
-}
-
-body.theme-custom .mermaid-preview svg .sankey .link {
-  stroke: var(--mermaid-line-color, var(--border-color));
-}
-
-body.theme-custom .mermaid-preview svg .sankey text {
-  fill: var(--mermaid-text-color, var(--text-color)) !important;
-}
-
-body.theme-custom .mermaid-preview svg .block rect,
-body.theme-custom .mermaid-preview svg .block path {
-  stroke: var(--mermaid-node-border, var(--border-color));
-}
-
-body.theme-custom .mermaid-preview svg .block text {
-  fill: var(--mermaid-text-color, var(--text-color)) !important;
-}
-
-body.theme-custom .mermaid-preview svg .block .nodeLabel text,
-body.theme-custom .mermaid-preview svg .block .nodeLabel span {
-  fill: var(--mermaid-text-color, var(--text-color)) !important;
-  color: var(--mermaid-text-color, var(--text-color)) !important;
-}
-
-body.theme-custom .mermaid-preview svg .er .entityBox rect,
-body.theme-custom .mermaid-preview svg .er .entityBox path {
-  stroke: var(--mermaid-node-border, var(--border-color));
-}
-
-body.theme-custom .mermaid-preview svg .er text {
-  fill: var(--mermaid-text-color, var(--text-color)) !important;
-}
-
-body.theme-custom .mermaid-preview svg .er .relationshipLabel {
-  fill: var(--mermaid-text-color, var(--text-color)) !important;
-}
-
-body.theme-custom .mermaid-preview svg .er .relationshipLine {
-  stroke: var(--mermaid-line-color, var(--border-color));
-}
-
-body.theme-custom .mermaid-preview svg .git .commit rect,
-body.theme-custom .mermaid-preview svg .git .commit circle {
-  stroke: var(--mermaid-node-border, var(--border-color));
-}
-
-body.theme-custom .mermaid-preview svg .git text {
-  fill: var(--mermaid-text-color, var(--text-color)) !important;
-}
-
-body.theme-custom .mermaid-preview svg .git .branchLabel text {
-  fill: var(--mermaid-text-color, var(--text-color)) !important;
-}
-
-body.theme-custom .mermaid-preview svg .journey .task rect {
-  stroke: var(--mermaid-node-border, var(--border-color));
-}
-
-body.theme-custom .mermaid-preview svg .journey text {
-  fill: var(--mermaid-text-color, var(--text-color)) !important;
-}
-
-body.theme-custom .mermaid-preview svg .timeline rect {
-  stroke: var(--mermaid-node-border, var(--border-color));
-}
-
-body.theme-custom .mermaid-preview svg .timeline text {
-  fill: var(--mermaid-text-color, var(--text-color)) !important;
-}
-
-body.theme-custom .mermaid-preview svg .c4 .person rect,
-body.theme-custom .mermaid-preview svg .c4 .person path,
-body.theme-custom .mermaid-preview svg .c4 .system rect,
-body.theme-custom .mermaid-preview svg .c4 .system path,
-body.theme-custom .mermaid-preview svg .c4 .container rect,
-body.theme-custom .mermaid-preview svg .c4 .container path,
-body.theme-custom .mermaid-preview svg .c4 .boundary rect,
-body.theme-custom .mermaid-preview svg .c4 .boundary path {
-  stroke: var(--mermaid-node-border, var(--border-color));
-}
-
-body.theme-custom .mermaid-preview svg .c4 text {
-  fill: var(--mermaid-text-color, var(--text-color)) !important;
-}
-
-body.theme-custom .mermaid-preview svg .c4 span {
-  color: var(--mermaid-text-color, var(--text-color)) !important;
-}
-.ProseMirror {
+}.ProseMirror {
   position: relative;
 }
 
@@ -2182,3 +1796,432 @@ textarea.math-block-raw:focus {
   background: var(--accent-soft, rgba(241, 117, 45, 0.12));
   color: #F1752D;
 }
+@media (max-width: 768px) {
+  :root {
+    --mobile-header-height: 48px;
+  }
+
+  html, body {
+    height: 100%;
+    overflow: hidden;
+    -webkit-text-size-adjust: 100%;
+    -webkit-tap-highlight-color: transparent;
+    touch-action: manipulation;
+  }
+
+  #titlebar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: var(--mobile-header-height);
+    z-index: 1000;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 12px;
+    background: var(--bg-color, #fff);
+    border-bottom: 1px solid var(--border-color, #e0e0e0);
+  }
+
+  #menu-btn {
+    -webkit-app-region: no-drag;
+    display: flex;
+    width: 36px;
+    height: 36px;
+    border: none;
+    background: transparent;
+    color: var(--text-color);
+    border-radius: 8px;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    padding: 8px;
+    transition: background 0.15s;
+  }
+  #menu-btn:active {
+    background: var(--accent-soft, rgba(241,117,45,0.12));
+  }
+
+  #agent-dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: #ccc;
+  }
+  #agent-dot.active { background: #f97316; animation: pulse-mobile 1s infinite; }
+  #agent-dot.cooldown { background: #22c55e; animation: pulse-mobile 0.3s ease 2; }
+
+  @keyframes pulse-mobile {
+    0%, 100% { opacity: 1; transform: scale(1); }
+    50% { opacity: 0.6; transform: scale(1.2); }
+  }
+
+  #slides-btn {
+    display: none;
+  }
+
+  #mobile-menu {
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 2000;
+    pointer-events: none;
+  }
+
+  #mobile-menu.open {
+    pointer-events: auto;
+  }
+
+  #menu-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.4);
+    opacity: 0;
+    transition: opacity 0.25s ease;
+  }
+
+  #mobile-menu.open #menu-overlay {
+    opacity: 1;
+  }
+
+  #menu-panel {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: min(300px, 80vw);
+    background: var(--bg-color, #fff);
+    transform: translateX(-100%);
+    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+    display: flex;
+    flex-direction: column;
+    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  #mobile-menu.open #menu-panel {
+    transform: translateX(0);
+  }
+
+  #menu-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px 20px;
+    border-bottom: 1px solid var(--border-color, #e0e0e0);
+    flex-shrink: 0;
+  }
+
+  #menu-title {
+    font-size: 17px;
+    font-weight: 700;
+    color: var(--text-color);
+  }
+
+  #menu-close-btn {
+    width: 32px;
+    height: 32px;
+    border: none;
+    background: transparent;
+    color: var(--text-muted);
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    padding: 6px;
+    transition: background 0.15s;
+  }
+  #menu-close-btn:active {
+    background: var(--accent-soft, rgba(241,117,45,0.12));
+  }
+
+  #menu-body {
+    padding: 8px 0;
+    flex: 1;
+    overflow-y: auto;
+  }
+
+  .menu-section {
+    padding: 4px 0;
+    border-bottom: 1px solid var(--border-color, rgba(0,0,0,0.06));
+  }
+  .menu-section:last-child {
+    border-bottom: none;
+  }
+
+  .menu-section-title {
+    padding: 8px 20px 4px;
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--text-muted);
+  }
+
+  .menu-item {
+    display: block;
+    width: 100%;
+    padding: 12px 20px;
+    border: none;
+    background: transparent;
+    color: var(--text-color);
+    font-size: 15px;
+    text-align: left;
+    cursor: pointer;
+    -webkit-user-select: none;
+    user-select: none;
+    transition: background 0.12s;
+  }
+  .menu-item:active {
+    background: var(--accent-soft, rgba(241,117,45,0.08));
+  }
+
+  .menu-theme-item,
+  .menu-plugin-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 20px;
+    font-size: 15px;
+    color: var(--text-color);
+    cursor: pointer;
+    -webkit-user-select: none;
+    user-select: none;
+    transition: background 0.12s;
+  }
+  .menu-theme-item:active,
+  .menu-plugin-item:active {
+    background: var(--accent-soft, rgba(241,117,45,0.08));
+  }
+
+  .menu-theme-item.active {
+    color: #F1752D;
+    font-weight: 600;
+  }
+
+  .menu-plugin-toggle {
+    width: 44px;
+    height: 26px;
+    border-radius: 13px;
+    background: var(--border-color, #d0d7de);
+    position: relative;
+    transition: background 0.2s;
+    flex-shrink: 0;
+  }
+  .menu-plugin-toggle::after {
+    content: '';
+    position: absolute;
+    top: 3px;
+    left: 3px;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background: #fff;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
+    transition: transform 0.2s;
+  }
+  .menu-plugin-toggle.on {
+    background: #F1752D;
+  }
+  .menu-plugin-toggle.on::after {
+    transform: translateX(18px);
+  }
+
+  #editor {
+    position: fixed;
+    top: var(--mobile-header-height);
+    left: 0;
+    right: 0;
+    bottom: 0;
+    overflow-y: auto;
+    overflow-x: hidden;
+    -webkit-overflow-scrolling: touch;
+    padding: 16px !important;
+    padding-bottom: 80px !important;
+  }
+
+  .ProseMirror {
+    min-height: calc(100vh - var(--mobile-header-height) - 32px) !important;
+    font-size: 16px !important;
+    line-height: 1.7 !important;
+    padding: 4px 0 !important;
+    -webkit-user-select: text;
+    user-select: text;
+    touch-action: manipulation;
+    /* Explicitly set read-write for rich text IME (CJK composition).
+       Some Android WebView versions default to plaintext-only which
+       downgrades contenteditable and breaks IME composition. */
+    -webkit-user-modify: read-write;
+  }
+
+  /* REMOVED: .ProseMirror-focused { -webkit-user-modify: read-write-plaintext-only } */
+
+  .ProseMirror h1 { font-size: 1.5em !important; margin-top: 0.8em !important; }
+  .ProseMirror h2 { font-size: 1.25em !important; margin-top: 0.7em !important; }
+  .ProseMirror h3 { font-size: 1.1em !important; }
+  .ProseMirror p { margin: 0.4em 0 !important; }
+  .ProseMirror pre {
+    font-size: 13px !important;
+    padding: 12px !important;
+    overflow-x: auto !important;
+    -webkit-overflow-scrolling: touch;
+  }
+  .ProseMirror code { font-size: 14px !important; word-break: break-word; }
+  .ProseMirror table {
+    display: block;
+    overflow-x: auto;
+    white-space: nowrap;
+  }
+  .ProseMirror th,
+  .ProseMirror td {
+    padding: 6px 8px !important;
+    font-size: 14px !important;
+  }
+
+  .math-block {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    padding: 12px !important;
+  }
+
+  .mermaid-block {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    padding: 12px !important;
+  }
+
+  .mermaid-preview svg {
+    max-width: 100% !important;
+    height: auto !important;
+  }
+
+  #source-editor {
+    position: fixed;
+    top: var(--mobile-header-height);
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100% !important;
+    height: auto !important;
+    border: none !important;
+    resize: none !important;
+    font-size: 15px !important;
+    line-height: 1.6 !important;
+    padding: 16px !important;
+    font-family: 'SF Mono', 'Fira Code', Menlo, monospace !important;
+  }
+
+  .math-inline-raw {
+    font-size: 14px !important;
+    max-width: 90vw !important;
+  }
+
+  .math-block-raw {
+    font-size: 14px !important;
+    max-width: 90vw !important;
+  }
+
+  textarea.mermaid-source {
+    font-size: 13px !important;
+    max-width: 90vw !important;
+  }
+
+  #cola-context-menu {
+    position: fixed !important;
+    z-index: 9999;
+    background: #fff;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
+    padding: 6px 0;
+    min-width: 160px;
+    max-width: 80vw;
+  }
+
+  .cola-menu-item {
+    padding: 12px 16px;
+    cursor: pointer;
+    font-size: 15px;
+    color: #333;
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
+  .cola-menu-item:active {
+    background: #f0f0f0;
+  }
+
+  .hidden { display: none !important; }
+  .visible { display: block !important; }
+}
+
+@media (min-width: 769px) {
+  #menu-btn {
+    display: none;
+  }
+
+  #mobile-menu {
+    display: none;
+  }
+}
+
+@media (max-width: 480px) {
+  .ProseMirror { font-size: 15px !important; }
+  .ProseMirror pre { font-size: 12px !important; padding: 10px !important; }
+  #editor { padding: 12px !important; }
+  #source-editor { padding: 12px !important; font-size: 14px !important; }
+}
+
+.safe-area-inset {
+  padding-top: env(safe-area-inset-top);
+  padding-bottom: env(safe-area-inset-bottom);
+  padding-left: env(safe-area-inset-left);
+  padding-right: env(safe-area-inset-right);
+}
+
+@media print {
+  #titlebar,
+  #menu-btn,
+  #agent-dot,
+  #slides-btn,
+  #mobile-menu,
+  #cola-context-menu,
+  .mermaid-error,
+  .mermaid-loading,
+  .mermaid-source,
+  textarea.mermaid-source,
+  .math-block-raw,
+  .math-inline-raw,
+  .hidden {
+    display: none !important;
+  }
+
+  #editor {
+    position: static !important;
+    overflow: visible !important;
+    padding: 0 !important;
+  }
+
+  .ProseMirror {
+    min-height: auto !important;
+    font-size: 14px !important;
+  }
+
+  .mermaid-preview svg {
+    max-height: none !important;
+  }
+
+  @page {
+    margin: 15mm;
+    size: A4;
+  }
+}