styles.css

:root {
  --bg-color: #ffffff;
  --editor-bg: #f6f8fa;
  --preview-bg: #ffffff;
  /* Preview background for light mode */
  --text-color: #24292e;
  --preview-text-color: #24292e;
  /* Text color for preview in light mode */
  --border-color: #e1e4e8;
  --header-bg: #f6f8fa;
  --button-bg: #f6f8fa;
  --button-hover: #e1e4e8;
  --button-active: #d1d5da;
  --dropzone-bg: rgba(255, 255, 255, 0.8);
  --scrollbar-thumb: #c1c1c1;
  --scrollbar-track: #f1f1f1;
  --accent-color: #0366d6;
  --table-bg: #ffffff;
  /* Table background for light mode */
  --code-bg: #f6f8fa;
  /* Code block background for light mode */
  --ai-panel-width: 420px;
}

[data-theme="dark"] {
  --bg-color: #0d1117;
  --editor-bg: #161b22;
  --preview-bg: #0d1117;
  /* Preview background for dark mode */
  --text-color: #c9d1d9;
  --preview-text-color: #c9d1d9;
  /* Text color for preview in dark mode */
  --border-color: #30363d;
  --header-bg: #161b22;
  --button-bg: #21262d;
  --button-hover: #30363d;
  --button-active: #3b434b;
  --dropzone-bg: rgba(13, 17, 23, 0.8);
  --scrollbar-thumb: #484f58;
  --scrollbar-track: #21262d;
  --accent-color: #58a6ff;
  --table-bg: #161b22;
  /* Table background for dark mode */
  --code-bg: #161b22;
  /* Code block background for dark mode */
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s ease, color 0.3s ease;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
}

.app-header {
  background-color: var(--header-bg);
  border-bottom: 1px solid var(--border-color);
  padding: 1rem;
  transition: background-color 0.3s ease;
  position: sticky;
  top: 0;
  z-index: 100;
}

.app-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  width: 100%;
}

.content-container {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* Push ENTIRE app-container left when AI panel is open (desktop only) */
body.ai-panel-active .app-container {
  width: calc(100% - var(--ai-panel-width));
}

.editor-pane,
.preview-pane {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  position: relative;
  transition: background-color 0.3s ease;
}

.editor-pane {
  background-color: var(--editor-bg);
  border-right: none;
  padding-right: 0px;
  box-shadow: 1px 0 0 var(--border-color);
}

.preview-pane {
  background-color: var(--preview-bg);
  /* Using the new variable for preview background */
}

/* Custom scrollbar */
.editor-pane::-webkit-scrollbar,
.preview-pane::-webkit-scrollbar,
#markdown-editor::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.editor-pane::-webkit-scrollbar-track,
.preview-pane::-webkit-scrollbar-track,
#markdown-editor::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

.editor-pane::-webkit-scrollbar-thumb,
.preview-pane::-webkit-scrollbar-thumb,
#markdown-editor::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 4px;
}

.editor-pane::-webkit-scrollbar-thumb:hover,
.preview-pane::-webkit-scrollbar-thumb:hover,
#markdown-editor::-webkit-scrollbar-thumb:hover {
  background: var(--button-active);
}

#markdown-editor {
  width: 100%;
  height: 100%;
  border: none;
  background-color: var(--editor-bg);
  color: var(--text-color);
  resize: none;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 14px;
  line-height: 1.5;
  padding: 10px;
  transition: background-color 0.3s ease, color 0.3s ease;
  overflow-y: auto;
}

#markdown-editor:focus {
  outline: none;
}

.preview-pane {
  padding: 20px;
}

.markdown-body {
  padding: 20px;
  width: 100%;
  background-color: var(--preview-bg);
  /* Ensuring the markdown content matches preview background */
  color: var(--preview-text-color);
  /* Using specific text color for preview content */
}

/* Style tables in light mode */
.markdown-body table {
  background-color: var(--table-bg);
  border-color: var(--border-color);
}

.markdown-body table tr {
  background-color: var(--table-bg);
  border-top: 1px solid var(--border-color);
}

.markdown-body table tr:nth-child(2n) {
  background-color: var(--bg-color);
}

/* Style code blocks in light mode */
.markdown-body pre {
  background-color: var(--code-bg);
  border-radius: 6px;
}

.markdown-body code {
  background-color: var(--code-bg);
  border-radius: 3px;
  padding: 0.2em 0.4em;
}

.toolbar {
  display: flex;
  gap: 1px;
  flex-wrap: nowrap;
  align-items: center;
}

.tool-button {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-color);
  border-radius: 8px;
  padding: 6px 7px;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s ease;
  flex-shrink: 0;
  white-space: nowrap;
  position: relative;
}

.tool-button:hover {
  background-color: var(--button-hover);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.tool-button:active {
  background-color: var(--button-active);
  transform: translateY(0);
  box-shadow: none;
}

.tool-button i {
  font-size: 16px;
}

.file-input {
  display: none;
}

.dropzone {
  border: 1.5px dashed var(--border-color);
  border-radius: 8px;
  padding: 10px 20px;
  text-align: center;
  margin-bottom: 0;
  cursor: pointer;
  transition: all 0.25s ease;
  background-color: var(--dropzone-bg);
  position: relative;
}

.dropzone.active {
  border-color: var(--accent-color);
  background-color: rgba(88, 166, 255, 0.05);
}

.dropzone p {
  transition: transform 0.2s ease;
  font-size: 0.9rem;
}

.dropzone:hover {
  border-color: var(--accent-color);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.dropzone:hover p {
  transform: scale(1.01);
}

/* Dropdown improvements */
.dropdown-menu {
  background-color: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: 4px;
}

.dropdown-item {
  color: var(--text-color);
  border-radius: 6px;
  padding: 6px 12px;
  transition: background-color 0.15s ease;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--button-hover);
  color: var(--text-color);
}

/* Responsive design for mobile */
@media (max-width: 1080px) {
  .content-container {
    flex-direction: column;
  }

  .editor-pane,
  .preview-pane {
    flex: none;
    height: 50%;
    border-right: none;
  }

  .editor-pane {
    border-bottom: 1px solid var(--border-color);
  }

  .toolbar {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
  }
}

/* Loading indicators */
.loading {
  opacity: 0.6;
  pointer-events: none;
}

/* Focus outline for accessibility */
button:focus,
a:focus {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
}

/* Animation for copied message */
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Tooltip styles */
.tooltip {
  position: absolute;
  background: var(--button-bg);
  border: 1px solid var(--border-color);
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 12px;
  z-index: 1000;
  animation: fadeIn 0.15s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Styles for GitHub markdown preview light mode */
.markdown-body {
  color-scheme: light;
  --color-prettylights-syntax-comment: #6a737d;
  --color-prettylights-syntax-constant: #005cc5;
  --color-prettylights-syntax-entity: #6f42c1;
  --color-prettylights-syntax-storage-modifier-import: #24292e;
  --color-prettylights-syntax-entity-tag: #22863a;
  --color-prettylights-syntax-keyword: #d73a49;
  --color-prettylights-syntax-string: #032f62;
  --color-prettylights-syntax-variable: #e36209;
  --color-prettylights-syntax-brackethighlighter-unmatched: #b31d28;
  --color-prettylights-syntax-invalid-illegal-text: #fafbfc;
  --color-prettylights-syntax-invalid-illegal-bg: #b31d28;
  --color-prettylights-syntax-carriage-return-text: #fafbfc;
  --color-prettylights-syntax-carriage-return-bg: #d73a49;
  --color-prettylights-syntax-string-regexp: #22863a;
  --color-prettylights-syntax-markup-list: #735c0f;
  --color-prettylights-syntax-markup-heading: #005cc5;
  --color-prettylights-syntax-markup-italic: #24292e;
  --color-prettylights-syntax-markup-bold: #24292e;
  --color-prettylights-syntax-markup-deleted-text: #b31d28;
  --color-prettylights-syntax-markup-deleted-bg: #ffeef0;
  --color-prettylights-syntax-markup-inserted-text: #22863a;
  --color-prettylights-syntax-markup-inserted-bg: #f0fff4;
  --color-prettylights-syntax-markup-changed-text: #e36209;
  --color-prettylights-syntax-markup-changed-bg: #ffebda;
  --color-prettylights-syntax-markup-ignored-text: #f6f8fa;
  --color-prettylights-syntax-markup-ignored-bg: #005cc5;
  --color-prettylights-syntax-meta-diff-range: #6f42c1;
  --color-prettylights-syntax-brackethighlighter-angle: #586069;
  --color-prettylights-syntax-sublimelinter-gutter-mark: #e1e4e8;
  --color-prettylights-syntax-constant-other-reference-link: #032f62;
  --color-fg-default: #24292e;
  --color-fg-muted: #586069;
  --color-fg-subtle: #6a737d;
  --color-canvas-default: #ffffff;
  --color-canvas-subtle: #f6f8fa;
  --color-border-default: #e1e4e8;
  --color-border-muted: #eaecef;
  --color-neutral-muted: rgba(175, 184, 193, 0.2);
  --color-accent-fg: #0366d6;
  --color-accent-emphasis: #0366d6;
  --color-attention-subtle: #fff5b1;
  --color-danger-fg: #d73a49;
}

/* Styles for GitHub markdown preview dark mode */
[data-theme="dark"] .markdown-body {
  color-scheme: dark;
  --color-prettylights-syntax-comment: #8b949e;
  --color-prettylights-syntax-constant: #79c0ff;
  --color-prettylights-syntax-entity: #d2a8ff;
  --color-prettylights-syntax-storage-modifier-import: #c9d1d9;
  --color-prettylights-syntax-entity-tag: #7ee787;
  --color-prettylights-syntax-keyword: #ff7b72;
  --color-prettylights-syntax-string: #a5d6ff;
  --color-prettylights-syntax-variable: #ffa657;
  --color-prettylights-syntax-brackethighlighter-unmatched: #f85149;
  --color-prettylights-syntax-invalid-illegal-text: #f0f6fc;
  --color-prettylights-syntax-invalid-illegal-bg: #8e1519;
  --color-prettylights-syntax-carriage-return-text: #f0f6fc;
  --color-prettylights-syntax-carriage-return-bg: #b62324;
  --color-prettylights-syntax-string-regexp: #7ee787;
  --color-prettylights-syntax-markup-list: #f2cc60;
  --color-prettylights-syntax-markup-heading: #1f6feb;
  --color-prettylights-syntax-markup-italic: #c9d1d9;
  --color-prettylights-syntax-markup-bold: #c9d1d9;
  --color-prettylights-syntax-markup-deleted-text: #ffdcd7;
  --color-prettylights-syntax-markup-deleted-bg: #67060c;
  --color-prettylights-syntax-markup-inserted-text: #aff5b4;
  --color-prettylights-syntax-markup-inserted-bg: #033a16;
  --color-prettylights-syntax-markup-changed-text: #ffdfb6;
  --color-prettylights-syntax-markup-changed-bg: #5a1e02;
  --color-prettylights-syntax-markup-ignored-text: #c9d1d9;
  --color-prettylights-syntax-markup-ignored-bg: #1158c7;
  --color-prettylights-syntax-meta-diff-range: #d2a8ff;
  --color-prettylights-syntax-brackethighlighter-angle: #8b949e;
  --color-prettylights-syntax-sublimelinter-gutter-mark: #484f58;
  --color-prettylights-syntax-constant-other-reference-link: #a5d6ff;
  --color-fg-default: #c9d1d9;
  --color-fg-muted: #8b949e;
  --color-fg-subtle: #484f58;
  --color-canvas-default: #0d1117;
  --color-canvas-subtle: #161b22;
  --color-border-default: #30363d;
  --color-border-muted: #21262d;
  --color-neutral-muted: rgba(110, 118, 129, 0.4);
  --color-accent-fg: #58a6ff;
  --color-accent-emphasis: #1f6feb;
  --color-attention-subtle: rgba(187, 128, 9, 0.15);
  --color-danger-fg: #f85149;
}

/* Override specific styles for dark mode tables and code */
[data-theme="dark"] .markdown-body table tr {
  background-color: var(--table-bg);
}

[data-theme="dark"] .markdown-body table tr:nth-child(2n) {
  background-color: #1c2128;
  /* Slightly lighter than base dark background */
}

[data-theme="dark"] .markdown-body pre {
  background-color: var(--code-bg);
}

[data-theme="dark"] .markdown-body code {
  background-color: var(--code-bg);
}

[data-theme="dark"] .hljs {
  color: #e8eaed;
}

/* ========================================
   EXECUTABLE CODE BLOCKS (just-bash)
   ======================================== */

.executable-code-container {
  position: relative;
  margin-bottom: 16px;
}

.executable-code-container pre {
  margin-bottom: 0;
}

/* Toolbar: top-right, visible on hover */
.code-block-toolbar {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 5;
}

.executable-code-container:hover .code-block-toolbar {
  opacity: 1;
}

/* Toolbar buttons */
.code-toolbar-btn {
  background-color: var(--button-bg);
  border: 1px solid var(--border-color);
  color: var(--text-color);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.code-toolbar-btn:hover {
  background-color: var(--button-hover);
}

.code-toolbar-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Run button — green accent */
.code-run-btn {
  background-color: #238636;
  border-color: rgba(35, 134, 54, 0.6);
  color: #fff;
}

.code-run-btn:hover {
  background-color: #2ea043;
}

[data-theme="dark"] .code-run-btn {
  background-color: #238636;
  border-color: rgba(35, 134, 54, 0.5);
}

[data-theme="dark"] .code-run-btn:hover {
  background-color: #2ea043;
}

/* Output area */
.code-output {
  display: none;
  background-color: #1b1f23;
  color: #c9d1d9;
  border: 1px solid var(--border-color);
  border-top: none;
  border-radius: 0 0 6px 6px;
  padding: 12px 16px;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 300px;
  overflow-y: auto;
}

.code-output-stdout {
  color: #adbac7;
}

.code-output-stderr {
  color: #f47067;
}

.code-output-error {
  color: #f47067;
  font-style: italic;
}

.code-output-muted {
  color: #636e7b;
  font-style: italic;
}

.code-output-exit {
  display: block;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #30363d;
  color: #f47067;
  font-size: 12px;
}

.code-output-loading {
  color: #58a6ff;
}

.code-output-loading i {
  display: inline-block;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* Light theme adjustments for output */
:root .code-output {
  background-color: #1b1f23;
}

[data-theme="dark"] .code-output {
  background-color: #0d1117;
  border-color: #21262d;
}

/* When output has rounded bottom, remove pre rounding */
.executable-code-container .code-output[style*="display: block"]~pre,
.executable-code-container:has(.code-output[style*="display: block"]) pre {
  border-radius: 6px 6px 0 0;
}

/* ========================================
   EXECUTABLE MATH BLOCKS (math.js)
   ======================================== */

.executable-math-container {
  position: relative;
  margin-bottom: 16px;
}

.executable-math-container pre {
  margin-bottom: 0;
}

.executable-math-container:hover .code-block-toolbar {
  opacity: 1;
}

/* Evaluate button — purple/blue accent */
.math-eval-btn {
  background-color: #6f42c1;
  border-color: rgba(111, 66, 193, 0.6);
  color: #fff;
}

.math-eval-btn:hover {
  background-color: #8250df;
}

[data-theme="dark"] .math-eval-btn {
  background-color: #6f42c1;
  border-color: rgba(111, 66, 193, 0.5);
}

[data-theme="dark"] .math-eval-btn:hover {
  background-color: #8250df;
}

/* Math output styling */
.math-output {
  background-color: #1b1f23;
  color: #c9d1d9;
}

.math-result-label {
  color: #8b949e;
  font-size: 12px;
  margin-right: 8px;
}

.math-result-value {
  color: #7ee787;
  font-weight: 600;
  font-size: 15px;
}

.math-result-line {
  padding: 3px 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.math-result-expr {
  color: #8b949e;
  font-size: 13px;
}

.math-result-arrow {
  color: #6f42c1;
  font-weight: bold;
}

/* When math output has rounded bottom, remove pre rounding */
.executable-math-container .code-output[style*="display: block"]~pre,
.executable-math-container:has(.code-output[style*="display: block"]) pre {
  border-radius: 6px 6px 0 0;
}

/* Math expression code style */
.math-expr {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  color: #d2a8ff;
}

[data-theme="dark"] .math-expr {
  color: #d2a8ff;
}

/* ========================================
   LATEX DISPLAY MATH EVALUATION (Nerdamer)
   ======================================== */

.latex-eval-container {
  position: relative;
  margin: 16px 0;
  padding: 4px 0;
  border-radius: 8px;
  transition: background-color 0.2s ease;
}

.latex-eval-container:hover {
  background-color: rgba(111, 66, 193, 0.04);
}

[data-theme="dark"] .latex-eval-container:hover {
  background-color: rgba(111, 66, 193, 0.08);
}

.latex-eval-toolbar {
  position: absolute;
  top: 4px;
  right: 4px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 5;
}

.latex-eval-container:hover .latex-eval-toolbar {
  opacity: 1;
}

/* LaTeX eval output */
.latex-eval-output {
  display: none;
  background-color: #f6f8fa;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 10px 16px;
  margin-top: 8px;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 14px;
  line-height: 1.6;
}

[data-theme="dark"] .latex-eval-output {
  background-color: #161b22;
  border-color: #30363d;
}

.latex-eval-output[style*="display: block"] {
  display: block;
}

.latex-result-numeric {
  color: #1a7f37;
  font-size: 18px;
  font-weight: 700;
}

[data-theme="dark"] .latex-result-numeric {
  color: #7ee787;
}

.latex-result-symbolic {
  color: #6f42c1;
  font-size: 15px;
}

[data-theme="dark"] .latex-result-symbolic {
  color: #d2a8ff;
}

.latex-result-rendered {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border-color);
}

.latex-reserved-note {
  margin-top: 8px;
  padding: 6px 10px;
  font-size: 12px;
  color: #656d76;
  background-color: rgba(111, 66, 193, 0.06);
  border-radius: 4px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  line-height: 1.5;
}

.latex-reserved-note i {
  margin-right: 4px;
  color: #6f42c1;
}

[data-theme="dark"] .latex-reserved-note {
  color: #8b949e;
  background-color: rgba(111, 66, 193, 0.12);
}

[data-theme="dark"] .latex-reserved-note i {
  color: #d2a8ff;
}

/* ========================================
   EXECUTABLE HTML BLOCKS (iframe sandbox)
   ======================================== */

.executable-html-container {
  position: relative;
  margin-bottom: 16px;
}

.executable-html-container pre {
  margin-bottom: 0;
}

.executable-html-container:hover .code-block-toolbar {
  opacity: 1;
}

/* Preview button — teal accent */
.html-preview-btn {
  background-color: #0d9488;
  border-color: rgba(13, 148, 136, 0.6);
  color: #fff;
}

.html-preview-btn:hover {
  background-color: #14b8a6;
}

[data-theme="dark"] .html-preview-btn {
  background-color: #0d9488;
  border-color: rgba(13, 148, 136, 0.5);
}

[data-theme="dark"] .html-preview-btn:hover {
  background-color: #14b8a6;
}

/* Load File button — indigo accent */
.html-load-file-btn {
  background-color: #4f46e5;
  border-color: rgba(79, 70, 229, 0.6);
  color: #fff;
}

.html-load-file-btn:hover {
  background-color: #6366f1;
}

[data-theme="dark"] .html-load-file-btn {
  background-color: #4f46e5;
  border-color: rgba(79, 70, 229, 0.5);
}

[data-theme="dark"] .html-load-file-btn:hover {
  background-color: #6366f1;
}

/* Expand / Collapse button — neutral ghost */
.html-expand-btn {
  background-color: transparent;
  border-color: var(--border-color);
  color: var(--text-color);
  padding: 4px 7px;
}

.html-expand-btn:hover {
  background-color: var(--button-hover);
  border-color: var(--accent-color, #58a6ff);
}

[data-theme="dark"] .html-expand-btn {
  color: #c9d1d9;
  border-color: #30363d;
}

[data-theme="dark"] .html-expand-btn:hover {
  background-color: #30363d;
  border-color: #58a6ff;
}

/* HTML preview output area */
.html-preview-output {
  display: none;
  border: 1px solid var(--border-color);
  border-top: none;
  border-radius: 0 0 6px 6px;
  overflow: hidden;
  background-color: #fff;
}

[data-theme="dark"] .html-preview-output {
  background-color: #1b1f23;
  border-color: #21262d;
}

.html-preview-frame {
  width: 100%;
  min-height: 200px;
  height: 600px;
  border: none;
  display: block;
  background-color: #fff;
  transition: height 0.3s ease;
}

/* Expanded state — fills the preview pane */
.html-preview-frame.html-frame-expanded {
  height: 90vh !important;
  min-height: 90vh;
}

/* When preview is open, remove bottom rounding from pre */
.executable-html-container .html-preview-output[style*="display: block"]~pre,
.executable-html-container:has(.html-preview-output[style*="display: block"]) pre {
  border-radius: 6px 6px 0 0;
}

/* ========================================
   EXECUTABLE PYTHON BLOCKS (Pyodide WASM)
   ======================================== */

.executable-python-container {
  position: relative;
  margin-bottom: 16px;
}

.executable-python-container pre {
  margin-bottom: 0;
}

.executable-python-container:hover .code-block-toolbar {
  opacity: 1;
}

/* Run button — gold/amber accent (Python brand) */
.python-run-btn {
  background-color: #b58900;
  border-color: rgba(181, 137, 0, 0.6);
  color: #fff;
}

.python-run-btn:hover {
  background-color: #d4a017;
}

[data-theme="dark"] .python-run-btn {
  background-color: #b58900;
  border-color: rgba(181, 137, 0, 0.5);
}

[data-theme="dark"] .python-run-btn:hover {
  background-color: #d4a017;
}

/* Python output */
.python-output {
  background-color: #1b1f23;
  color: #c9d1d9;
}

[data-theme="dark"] .python-output {
  background-color: #0d1117;
  border-color: #21262d;
}

/* Matplotlib plots */
.python-plot {
  padding: 8px 0;
  text-align: center;
}

.python-plot img {
  max-width: 100%;
  border-radius: 4px;
  background-color: #fff;
}

/* When python output is visible, adjust pre rounding */
.executable-python-container .code-output[style*="display: block"]~pre,
.executable-python-container:has(.code-output[style*="display: block"]) pre {
  border-radius: 6px 6px 0 0;
}

/* ========================================
   EXECUTABLE JAVASCRIPT BLOCKS (iframe sandbox)
   ======================================== */

.executable-js-container {
  position: relative;
  margin-bottom: 16px;
}

.executable-js-container pre {
  margin-bottom: 0;
}

.executable-js-container:hover .code-block-toolbar {
  opacity: 1;
}

/* Run button — orange accent (JS brand) */
.js-run-btn {
  background-color: #d97706;
  border-color: rgba(217, 119, 6, 0.6);
  color: #fff;
}

.js-run-btn:hover {
  background-color: #f59e0b;
}

[data-theme="dark"] .js-run-btn {
  background-color: #d97706;
  border-color: rgba(217, 119, 6, 0.5);
}

[data-theme="dark"] .js-run-btn:hover {
  background-color: #f59e0b;
}

/* JS output */
.js-output {
  background-color: #1b1f23;
  color: #c9d1d9;
}

[data-theme="dark"] .js-output {
  background-color: #0d1117;
  border-color: #21262d;
}

/* console.warn output */
.code-output-warn {
  color: #d29922;
}

.executable-js-container .code-output[style*="display: block"]~pre,
.executable-js-container:has(.code-output[style*="display: block"]) pre {
  border-radius: 6px 6px 0 0;
}

/* ========================================
   EXECUTABLE SQL BLOCKS (sql.js SQLite WASM)
   ======================================== */

.executable-sql-container {
  position: relative;
  margin-bottom: 16px;
}

.executable-sql-container pre {
  margin-bottom: 0;
}

.executable-sql-container:hover .code-block-toolbar {
  opacity: 1;
}

/* Run button — blue accent (data/SQL brand) */
.sql-run-btn {
  background-color: #2563eb;
  border-color: rgba(37, 99, 235, 0.6);
  color: #fff;
}

.sql-run-btn:hover {
  background-color: #3b82f6;
}

[data-theme="dark"] .sql-run-btn {
  background-color: #2563eb;
  border-color: rgba(37, 99, 235, 0.5);
}

[data-theme="dark"] .sql-run-btn:hover {
  background-color: #3b82f6;
}

/* SQL output */
.sql-output {
  background-color: #f6f8fa;
  color: #1f2328;
  padding: 0;
}

[data-theme="dark"] .sql-output {
  background-color: #0d1117;
  color: #c9d1d9;
  border-color: #21262d;
}

/* SQL result table */
.sql-result-table-wrap {
  overflow-x: auto;
  padding: 4px 0;
}

.sql-result-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-family: 'SFMono-Regular', 'Menlo', monospace;
}

.sql-result-table th {
  background-color: #e6edf3;
  color: #1f2328;
  font-weight: 600;
  padding: 6px 12px;
  text-align: left;
  border-bottom: 2px solid #d1d9e0;
  white-space: nowrap;
}

.sql-result-table td {
  padding: 5px 12px;
  border-bottom: 1px solid #e6edf3;
}

.sql-result-table tbody tr:hover {
  background-color: rgba(37, 99, 235, 0.04);
}

[data-theme="dark"] .sql-result-table th {
  background-color: #161b22;
  color: #c9d1d9;
  border-bottom-color: #30363d;
}

[data-theme="dark"] .sql-result-table td {
  border-bottom-color: #21262d;
}

[data-theme="dark"] .sql-result-table tbody tr:hover {
  background-color: rgba(56, 139, 253, 0.06);
}

.sql-row-count {
  font-size: 11px;
  color: #656d76;
  padding: 4px 12px 6px;
  text-align: right;
}

[data-theme="dark"] .sql-row-count {
  color: #8b949e;
}

.executable-sql-container .code-output[style*="display: block"]~pre,
.executable-sql-container:has(.code-output[style*="display: block"]) pre {
  border-radius: 6px 6px 0 0;
}

.stats-container {
  font-size: 0.9rem;
  color: var(--text-color);
}

.stat-item {
  align-items: center;
}

.stat-item i {
  font-size: 1rem;
  opacity: 0.8;
}

.dropzone {
  border: 2px dashed var(--border-color);
  border-radius: 6px;
  padding: 20px;
  text-align: center;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  background-color: var(--dropzone-bg);
  position: relative;
}

.dropzone.active {
  border-color: var(--accent-color);
  background-color: rgba(88, 166, 255, 0.05);
}

.dropzone p {
  transition: transform 0.2s ease;
}

.dropzone:hover {
  border: var(--accent-color) 2px dashed;
}

.dropzone:hover p {
  transform: scale(1.02);
}

.close-btn {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-color);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  opacity: 0.5;
  transition: all 0.2s ease;
  z-index: 10;
}

.close-btn:hover {
  opacity: 1;
  background-color: var(--button-hover);
  color: var(--color-danger-fg, #d73a49);
}

.editor-pane {
  overflow: hidden;
}

/* Mobile Menu Styles */
.mobile-menu {
  display: none;
  position: relative;
  z-index: 1001;
}

@media (max-width: 1199px) {
  .mobile-menu {
    display: block;
  }
}

/* slide‑in panel */
.mobile-menu-panel {
  position: fixed;
  top: 0;
  right: -300px;
  width: 280px;
  height: 100vh;
  background-color: var(--bg-color);
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.2);
  transition: right 0.3s ease;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  z-index: 1002;
}

.mobile-menu-panel.active {
  right: 0;
}

/* translucent overlay behind panel */
.mobile-menu-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 1000;
}

.mobile-menu-overlay.active {
  display: block;
  opacity: 1;
  visibility: visible;
}

/* header inside mobile menu */
.mobile-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.mobile-menu-header h5 {
  margin: 0;
  font-size: 1.25rem;
  color: var(--text-color);
}

/* stats section in mobile menu */
.mobile-stats-container {
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 0.75rem;
  margin-bottom: 1rem;
}

.mobile-stats-container .stat-item {
  font-size: 0.9rem;
  color: var(--text-color);
  display: flex;
  align-items: center;
}

.mobile-stats-container .stat-item i {
  margin-right: 0.5em;
  opacity: 0.8;
}

/* menu buttons list */
.mobile-menu-items {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex-grow: 1;
}

/* each menu item */
.mobile-menu-item {
  background-color: var(--button-bg);
  border: 1px solid var(--border-color);
  color: var(--text-color);
  border-radius: 6px;
  padding: 0.6rem 1rem;
  font-size: 1rem;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: background-color 0.2s ease;
  cursor: pointer;
}

.mobile-menu-item:hover {
  background-color: var(--button-hover);
}

.mobile-menu-item:active {
  background-color: var(--button-active);
}

/* close button override */
#close-mobile-menu.tool-button {
  padding: 0.25rem 0.5rem;
  font-size: 1rem;
}

/* ensure dropzone doesn’t cover menu */
.mobile-menu-panel .dropzone {
  margin-bottom: 0;
}

/* hide desktop-only stats and toolbar when hamburger takes over */
@media (max-width: 1199px) {

  .stats-container.d-none.d-xl-flex,
  .toolbar.d-none.d-xl-flex {
    display: none !important;
  }
}

.github-link {
  color: var(--text-color);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, color 0.2s ease;
  margin-right: 2rem;
}

.github-link:hover {
  color: var(--accent-color);
  transform: scale(1.1);
}

.github-link i {
  font-size: 1.5rem;
}

/* ========================================
   DOCUMENT TITLE CHIP (inline rename)
   ======================================== */

.doc-title-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-color);
  background-color: transparent;
  border: 1px solid transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  max-width: 220px;
  white-space: nowrap;
  margin-right: 4px;
}

.doc-title-chip:hover {
  background-color: var(--button-hover, rgba(0,0,0,0.06));
  border-color: var(--border-color);
}

.doc-title-icon {
  font-size: 14px;
  opacity: 0.6;
  flex-shrink: 0;
}

.doc-title-name {
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

.doc-title-edit-icon {
  font-size: 11px;
  opacity: 0;
  transition: opacity 0.2s ease;
  flex-shrink: 0;
  color: var(--accent-color);
}

.doc-title-chip:hover .doc-title-edit-icon {
  opacity: 0.7;
}

/* Inline rename input */
.doc-title-rename-input {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-color);
  background-color: var(--bg-color);
  border: 1.5px solid var(--accent-color);
  border-radius: 4px;
  padding: 3px 8px;
  outline: none;
  width: 180px;
  max-width: 220px;
}

/* Hide doc-title-chip on very narrow widths */
@media (max-width: 1199px) {
  .doc-title-chip {
    display: none;
  }
  /* But always show inside QAB */
  .qab-doc-title.doc-title-chip {
    display: inline-flex;
    padding: 2px 6px;
    gap: 4px;
    font-size: 12px;
    max-width: 140px;
    margin-right: 2px;
  }
  .qab-doc-title .doc-title-icon {
    font-size: 12px;
  }
  .qab-doc-title .doc-title-edit-icon {
    font-size: 9px;
  }
}

/* Further compact on phone-sized screens */
@media (max-width: 480px) {
  .qab-doc-title.doc-title-chip {
    max-width: 100px;
    font-size: 11px;
    padding: 2px 5px;
    gap: 3px;
  }
  .qab-doc-title .doc-title-icon {
    display: none;
  }
}

/* ========================================
   VIEW MODE CONTROLS - Story 1.1
   ======================================== */

/* Header layout for three sections */
.header-container {
  position: relative;
}

.header-left {
  flex: 0 1 auto;
  justify-content: flex-start;
  min-width: 0;
}

.header-right {
  flex: 1 1 auto;
  justify-content: flex-end;
}

/* ---- Responsive toolbar scaling ---- */

/* Stage 1: Slightly tighter at <=1400px */
@media (max-width: 1400px) {
  .stats-container {
    display: none !important;
  }

  .tool-button {
    padding: 4px 5px;
    font-size: 13px;
  }

  .tool-button i {
    font-size: 14px;
  }

  .toolbar-separator {
    margin: 0 2px;
  }
}


/* View Mode Button Group */
.view-mode-group {
  display: flex;
  gap: 0;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.view-mode-btn {
  background-color: var(--button-bg);
  border: 1px solid var(--border-color);
  color: var(--text-color);
  padding: 6px 12px;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s ease;
}

.view-mode-btn:first-child {
  border-radius: 6px 0 0 6px;
}

.view-mode-btn:last-child {
  border-radius: 0 6px 6px 0;
}

.view-mode-btn:not(:last-child) {
  border-right: none;
}

.view-mode-btn:hover {
  background-color: var(--button-hover);
}

.view-mode-btn.active {
  background-color: var(--button-bg);
  border-color: var(--accent-color);
  color: var(--accent-color);
  border-width: 2px;
  padding: 5px 11px;
  /* Adjust for thicker border */
}

.view-mode-btn.active:not(:last-child) {
  border-right: 2px solid var(--accent-color);
}

.view-mode-btn i {
  font-size: 16px;
}

/* Pane View States */
.content-container.view-editor-only .preview-pane {
  display: none;
}

.content-container.view-editor-only .editor-pane {
  flex: 1;
  border-right: none;
}

.content-container.view-preview-only .editor-pane {
  display: none;
}

.content-container.view-preview-only .preview-pane {
  flex: 1;
}

.content-container.view-split .editor-pane,
.content-container.view-split .preview-pane {
  flex: 1;
}

/* Responsive adjustments for view mode buttons */
@media (max-width: 1079px) {
  .view-mode-group {
    position: static;
    transform: none;
  }
}

@media (max-width: 767px) {
  .view-mode-group {
    display: none;
  }
}

/* ========================================
   RESIZE DIVIDER - Story 1.3
   ======================================== */

.resize-divider {
  width: 8px;
  background-color: transparent;
  cursor: col-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 10;
  transition: background-color 0.2s ease;
}

.resize-divider:hover {
  background-color: var(--button-hover);
}

.resize-divider.dragging {
  background-color: var(--accent-color);
}

.resize-divider-handle {
  width: 2px;
  height: 40px;
  background-color: var(--border-color);
  border-radius: 2px;
  transition: background-color 0.2s ease, width 0.2s ease;
}

.resize-divider:hover .resize-divider-handle,
.resize-divider.dragging .resize-divider-handle {
  background-color: var(--accent-color);
  width: 3px;
}

/* Hide divider in single-pane modes */
.content-container.view-editor-only .resize-divider,
.content-container.view-preview-only .resize-divider {
  display: none;
}

/* Hide divider on tablet and mobile (no drag resize) */
@media (max-width: 1079px) {
  .resize-divider {
    display: none;
  }
}

/* Prevent text selection during drag */
.resizing {
  user-select: none;
  cursor: col-resize !important;
}

.resizing * {
  cursor: col-resize !important;
}

/* ========================================
   MOBILE VIEW MODE CONTROLS - Story 1.4
   ======================================== */

.mobile-view-mode-group {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 0.75rem;
}

.mobile-view-mode-btn {
  flex: 1;
  background-color: var(--button-bg);
  border: 1px solid var(--border-color);
  color: var(--text-color);
  padding: 8px 12px;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: all 0.2s ease;
}

.mobile-view-mode-btn:first-child {
  border-radius: 6px 0 0 6px;
}

.mobile-view-mode-btn:last-child {
  border-radius: 0 6px 6px 0;
}

.mobile-view-mode-btn:not(:last-child) {
  border-right: none;
}

.mobile-view-mode-btn:hover,
.mobile-view-mode-btn:active {
  background-color: var(--button-hover);
}

.mobile-view-mode-btn.active {
  background-color: var(--button-bg);
  border-color: var(--accent-color);
  color: var(--accent-color);
  border-width: 2px;
  padding: 7px 11px;
}

.mobile-view-mode-btn.active:not(:last-child) {
  border-right: 2px solid var(--accent-color);
}

.mobile-view-mode-btn i {
  font-size: 18px;
}

.mobile-view-mode-btn span {
  font-size: 12px;
}

/* ========================================
   RESPONSIVE VIEW MODE FIXES - Story 1.5
   ======================================== */

/* On tablet/mobile, ensure single-pane modes take full height */
@media (max-width: 1079px) {

  .content-container.view-editor-only .editor-pane,
  .content-container.view-preview-only .preview-pane {
    height: 100%;
  }

  .content-container.view-split .editor-pane,
  .content-container.view-split .preview-pane {
    height: 50%;
  }
}

/* ========================================
   PDF EXPORT TABLE FIX - Rowspan/Colspan
   ======================================== */

/* Fix for html2canvas not properly rendering rowspan/colspan cells.
   Apply backgrounds to cells instead of rows to prevent row backgrounds
   from painting over rowspan cells during canvas capture. */
.pdf-export table tr {
  background-color: transparent !important;
}

.pdf-export table th,
.pdf-export table td {
  background-color: var(--table-bg, #ffffff);
  position: relative;
}

.pdf-export table tr:nth-child(2n) th,
.pdf-export table tr:nth-child(2n) td {
  background-color: var(--bg-color, #f6f8fa);
}

/* Ensure rowspan cells render correctly */
.pdf-export table th[rowspan],
.pdf-export table td[rowspan] {
  vertical-align: middle;
  background-color: var(--table-bg, #ffffff) !important;
}

/* Ensure colspan cells render correctly */
.pdf-export table th[colspan],
.pdf-export table td[colspan] {
  text-align: center;
}

/* Dark mode PDF export table fix */
[data-theme="dark"] .pdf-export table th,
[data-theme="dark"] .pdf-export table td {
  background-color: var(--table-bg, #161b22);
}

[data-theme="dark"] .pdf-export table tr:nth-child(2n) th,
[data-theme="dark"] .pdf-export table tr:nth-child(2n) td {
  background-color: #1c2128;
}

[data-theme="dark"] .pdf-export table th[rowspan],
[data-theme="dark"] .pdf-export table td[rowspan] {
  background-color: var(--table-bg, #161b22) !important;
}

/* ========================================
   MERMAID DIAGRAM TOOLBAR
   ======================================== */

.mermaid-container {
  position: relative;
}

.mermaid-toolbar {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 10;
}

.mermaid-container:hover .mermaid-toolbar {
  opacity: 1;
}

.mermaid-toolbar-btn {
  background-color: var(--button-bg);
  border: 1px solid var(--border-color);
  color: var(--text-color);
  border-radius: 4px;
  padding: 4px 7px;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 3px;
  transition: background-color 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}

.mermaid-toolbar-btn:hover {
  background-color: var(--button-hover);
  color: var(--accent-color);
}

.mermaid-toolbar-btn:active {
  background-color: var(--button-active);
}

.mermaid-toolbar-btn i {
  font-size: 14px;
}

/* ========================================
   MERMAID ZOOM MODAL
   ======================================== */

#mermaid-zoom-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
  background-color: rgba(0, 0, 0, 0.75);
  align-items: center;
  justify-content: center;
}

#mermaid-zoom-modal.active {
  display: flex;
}

.mermaid-modal-content {
  background-color: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 16px;
  width: 85vw;
  height: 85vh;
  max-width: 85vw;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (max-width: 576px) {
  .mermaid-modal-content {
    width: 95vw;
    height: 90vh;
    max-width: 95vw;
    max-height: 90vh;
    padding: 10px;
  }
}

.mermaid-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mermaid-modal-header span {
  font-weight: 600;
  font-size: 15px;
  color: var(--text-color);
}

.mermaid-modal-close {
  background: none;
  border: none;
  color: var(--text-color);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  transition: background-color 0.2s ease;
}

.mermaid-modal-close:hover {
  background-color: var(--button-hover);
}

.mermaid-modal-diagram {
  overflow: auto;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  cursor: grab;
}

.mermaid-modal-diagram.dragging {
  cursor: grabbing;
}

.mermaid-modal-diagram svg {
  transform-origin: center;
  transition: transform 0.1s ease;
  max-width: none;
}

.mermaid-modal-controls {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.mermaid-modal-controls .mermaid-toolbar-btn {
  opacity: 1;
}

/* ========================================
   SHARE MODALS
   ======================================== */

.share-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
  background-color: rgba(0, 0, 0, 0.6);
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}

.share-modal.active {
  display: flex;
}

.share-modal-content {
  background-color: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  width: 420px;
  max-width: 90vw;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: modalSlideIn 0.2s ease;
}

@keyframes modalSlideIn {
  from {
    transform: translateY(-20px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.share-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
}

.share-modal-header h5 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-color);
  display: flex;
  align-items: center;
}

.share-modal-close {
  background: none;
  border: none;
  color: var(--text-color);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  transition: background-color 0.2s ease;
}

.share-modal-close:hover {
  background-color: var(--button-hover);
}

.share-modal-body {
  padding: 20px;
}

.share-modal-desc {
  margin: 0 0 16px 0;
  font-size: 13px;
  color: var(--text-color);
  opacity: 0.8;
}

.share-form-group {
  margin-bottom: 14px;
}

.share-form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 4px;
}

.share-form-group input {
  width: 100%;
  padding: 8px 12px;
  font-size: 14px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background-color: var(--editor-bg);
  color: var(--text-color);
  transition: border-color 0.2s ease;
}

.share-form-group input:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.15);
}

.share-form-group small {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-color);
  opacity: 0.6;
}

.share-form-group small a {
  color: var(--accent-color);
  text-decoration: none;
}

.share-form-group small a:hover {
  text-decoration: underline;
}

.share-form-group small code {
  padding: 1px 4px;
  border-radius: 3px;
  background-color: var(--code-bg);
  font-size: 11px;
}

.share-modal-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--border-color);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.share-btn-primary {
  background-color: var(--accent-color);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 8px 16px;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: background-color 0.2s ease;
}

.share-btn-primary:hover {
  background-color: #4b94e8;
}

.share-btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.share-btn-secondary {
  background-color: var(--button-bg);
  color: var(--text-color);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 8px 16px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.share-btn-secondary:hover {
  background-color: var(--button-hover);
}

/* Share Link Container */
.share-link-container {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.share-link-container input {
  flex: 1;
  padding: 10px 12px;
  font-size: 13px;
  font-family: monospace;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background-color: var(--editor-bg);
  color: var(--text-color);
}

.share-link-container input:focus {
  outline: none;
  border-color: var(--accent-color);
}

.share-link-note {
  font-size: 12px;
  color: var(--text-color);
  opacity: 0.6;
  display: block;
}

/* ========================================
   SHARE MODE TOGGLE & SECURE SHARE
   ======================================== */

.share-mode-toggle {
  display: flex;
  gap: 0;
  margin-bottom: 16px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border-color);
}

.share-mode-btn {
  flex: 1;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  border: none;
  background-color: var(--button-bg);
  color: var(--text-color);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.share-mode-btn:not(:last-child) {
  border-right: 1px solid var(--border-color);
}

.share-mode-btn:hover {
  background-color: var(--button-hover);
}

.share-mode-btn.active {
  background-color: var(--accent-color);
  color: #fff;
}

.share-mode-btn.active[data-mode="secure"] {
  background: linear-gradient(135deg, #238636, #2ea043);
}

.share-passphrase-wrapper {
  position: relative;
  display: flex;
}

.share-passphrase-wrapper input {
  flex: 1;
  padding-right: 40px;
}

.share-pass-toggle {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-color);
  opacity: 0.5;
  cursor: pointer;
  padding: 4px 8px;
  font-size: 16px;
  transition: opacity 0.2s;
}

.share-pass-toggle:hover {
  opacity: 1;
}

.share-error {
  color: #f85149;
  font-size: 13px;
  padding: 8px 12px;
  background: rgba(248, 81, 73, 0.1);
  border-radius: 6px;
  margin-top: 8px;
}

.share-btn-download {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  padding: 10px 16px;
  margin-top: 12px;
  font-size: 14px;
  font-weight: 500;
  border: 1px dashed var(--accent-color);
  border-radius: 6px;
  background-color: rgba(88, 166, 255, 0.06);
  color: var(--accent-color);
  cursor: pointer;
  transition: all 0.2s ease;
}

.share-btn-download:hover {
  background-color: rgba(88, 166, 255, 0.12);
  border-style: solid;
}

.share-credentials-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.share-credentials-actions .share-btn-download {
  margin-top: 0;
  flex: 1;
}

.share-btn-copy-all {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: 1;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid var(--accent-color);
  border-radius: 6px;
  background-color: var(--accent-color);
  color: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
}

.share-btn-copy-all:hover {
  background-color: #4b94e8;
  border-color: #4b94e8;
}

#share-download-section {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
}

#share-download-section .share-link-note {
  margin-top: 8px;
}

/* ========================================
   PASSPHRASE PROMPT MODAL
   ======================================== */

.passphrase-prompt-content {
  text-align: center;
  padding: 32px 24px 24px;
}

.passphrase-prompt-icon {
  font-size: 48px;
  color: #238636;
  margin-bottom: 12px;
}

[data-theme="dark"] .passphrase-prompt-icon {
  color: #3fb950;
}

.passphrase-prompt-title {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-color);
}

.passphrase-prompt-desc {
  font-size: 14px;
  color: var(--text-color);
  opacity: 0.7;
  margin: 0 0 20px;
}

.passphrase-prompt-content .share-form-group {
  max-width: 320px;
  margin: 0 auto 12px;
}

.passphrase-prompt-actions {
  margin-top: 16px;
}

.passphrase-unlock-btn {
  padding: 10px 32px;
  font-size: 15px;
}


/* ========================================
   SHARED VIEW BANNER
   ======================================== */

.shared-view-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1500;
  background: linear-gradient(135deg, #1a7f37 0%, #238636 100%);
  color: #fff;
  padding: 8px 16px;
  font-size: 14px;
  transform: translateY(0);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.35s ease;
}

.shared-view-banner.banner-hidden {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

[data-theme="dark"] .shared-view-banner {
  background: linear-gradient(135deg, #238636 0%, #2ea043 100%);
}

.shared-banner-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 1200px;
  margin: 0 auto;
}

.shared-banner-btn {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: background-color 0.2s ease;
  margin-left: 8px;
}

.shared-banner-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Push app content down when shared banner is visible */
.shared-view-active .app-header {
  margin-top: 40px;
}
.shared-view-active.banner-collapsed .app-header {
  margin-top: 0;
  transition: margin-top 0.35s ease;
}

/* --- Shared View Pill (collapsed indicator) --- */
.shared-view-pill {
  position: fixed;
  bottom: 10px;
  right: 16px;
  z-index: 1500;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #1a7f37, #238636);
  border-radius: 20px;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(26, 127, 55, 0.35);
  opacity: 0;
  transform: translateY(10px) scale(0.95);
  transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.2s ease;
  pointer-events: none;
  user-select: none;
}

.shared-view-pill.pill-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.shared-view-pill:hover {
  box-shadow: 0 4px 20px rgba(26, 127, 55, 0.5);
  transform: translateY(0) scale(1.04);
}

.shared-view-pill:active {
  transform: translateY(0) scale(0.97);
}

.shared-view-pill i {
  font-size: 11px;
}

[data-theme="dark"] .shared-view-pill {
  background: linear-gradient(135deg, #238636, #2ea043);
  box-shadow: 0 2px 12px rgba(46, 160, 67, 0.35);
}

[data-theme="dark"] .shared-view-pill:hover {
  box-shadow: 0 4px 20px rgba(46, 160, 67, 0.5);
}

/* ========================================
   AUTOSAVE INDICATOR
   ======================================== */

.autosave-indicator {
  font-size: 0.8rem;
  color: var(--text-color);
  opacity: 0.7;
  display: flex;
  align-items: center;
  gap: 4px;
}

.autosave-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #2ea043;
  display: inline-block;
  animation: autosavePulse 2s ease-in-out;
}

@keyframes autosavePulse {
  0% {
    opacity: 1;
    transform: scale(1.3);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* ========================================
   FORMATTING TOOLBAR
   ======================================== */

.formatting-toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px 12px;
  background-color: var(--header-bg);
  border-bottom: 1px solid var(--border-color);
  flex-wrap: wrap;
  transition: background-color 0.3s ease, margin-right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.fmt-btn {
  background: none;
  border: 1px solid transparent;
  color: var(--text-color);
  border-radius: 4px;
  padding: 4px 7px;
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  min-width: 30px;
  height: 30px;
}

.fmt-btn:hover {
  background-color: var(--button-hover);
  border-color: var(--border-color);
}

.fmt-btn:active {
  background-color: var(--button-active);
}

.fmt-separator {
  width: 1px;
  height: 20px;
  background-color: var(--border-color);
  margin: 0 4px;
}

@media (max-width: 767px) {
  .formatting-toolbar {
    padding: 3px 8px;
    gap: 1px;
  }

  .fmt-btn {
    padding: 3px 5px;
    font-size: 13px;
    min-width: 26px;
    height: 26px;
  }
}

/* ========================================
   FIND & REPLACE BAR
   ======================================== */

.find-replace-bar {
  background-color: var(--header-bg);
  border-bottom: 1px solid var(--border-color);
  padding: 6px 12px;
  animation: slideDown 0.15s ease;
  transition: margin-right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.find-replace-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.find-input-group,
.replace-input-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.find-replace-bar input {
  padding: 4px 8px;
  font-size: 13px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background-color: var(--editor-bg);
  color: var(--text-color);
  width: 160px;
  outline: none;
  transition: border-color 0.2s ease;
}

.find-replace-bar input:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.15);
}

.find-btn {
  background-color: var(--button-bg);
  border: 1px solid var(--border-color);
  color: var(--text-color);
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.find-btn:hover {
  background-color: var(--button-hover);
}

.find-btn.active {
  background-color: var(--accent-color);
  color: #fff;
  border-color: var(--accent-color);
}

.find-match-count {
  font-size: 12px;
  color: var(--text-color);
  opacity: 0.7;
  white-space: nowrap;
  min-width: 60px;
}

.find-close-btn {
  margin-left: auto;
}

@media (max-width: 767px) {
  .find-replace-bar input {
    width: 100px;
  }
}

/* ========================================
   FIND HIGHLIGHT BACKDROP
   ======================================== */
.editor-find-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  flex: 1;
  min-height: 0;
}

.find-highlight-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: break-word;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 14px;
  line-height: 1.5;
  padding: 10px;
  color: transparent;
  z-index: 0;
  display: none;
  box-sizing: border-box;
  /* Hide scrollbar so it matches textarea's text area minus scrollbar */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.find-highlight-backdrop::-webkit-scrollbar {
  display: none;
}

#markdown-editor.find-active {
  background-color: transparent !important;
  position: relative;
  z-index: 1;
  caret-color: var(--text-color);
}

.find-hl {
  background-color: rgba(255, 165, 0, 0.35);
  border-radius: 2px;
  color: transparent;
  box-shadow: 0 0 0 1px rgba(255, 165, 0, 0.5);
}

.find-hl-current {
  background-color: rgba(255, 165, 0, 0.7);
  border-radius: 2px;
  color: transparent;
  box-shadow: 0 0 0 2px rgba(255, 140, 0, 0.8);
}

[data-theme="dark"] .find-hl {
  background-color: rgba(255, 165, 0, 0.25);
  box-shadow: 0 0 0 1px rgba(255, 165, 0, 0.4);
}

[data-theme="dark"] .find-hl-current {
  background-color: rgba(255, 165, 0, 0.55);
  box-shadow: 0 0 0 2px rgba(255, 140, 0, 0.7);
}

/* ========================================
   TABLE OF CONTENTS PANEL
   ======================================== */

.toc-panel {
  width: 240px;
  min-width: 200px;
  max-width: 300px;
  background-color: var(--bg-color);
  border-right: 1px solid var(--border-color);
  overflow-y: auto;
  flex-shrink: 0;
  animation: slideInLeft 0.2s ease;
  transition: background-color 0.3s ease;
}

@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.toc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-color);
  font-weight: 600;
  font-size: 13px;
  color: var(--text-color);
  position: sticky;
  top: 0;
  background-color: var(--bg-color);
  z-index: 1;
}

.toc-close-btn {
  background: none;
  border: none;
  color: var(--text-color);
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  font-size: 12px;
  transition: background-color 0.2s ease;
}

.toc-close-btn:hover {
  background-color: var(--button-hover);
}

.toc-nav {
  padding: 8px 0;
}

.toc-item {
  display: block;
  padding: 4px 12px;
  font-size: 13px;
  color: var(--text-color);
  text-decoration: none;
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: all 0.15s ease;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.toc-item:hover {
  background-color: var(--button-hover);
  color: var(--accent-color);
}

.toc-item.active {
  border-left-color: var(--accent-color);
  color: var(--accent-color);
  background-color: rgba(88, 166, 255, 0.08);
}

.toc-item[data-level="1"] {
  padding-left: 12px;
  font-weight: 600;
}

.toc-item[data-level="2"] {
  padding-left: 24px;
}

.toc-item[data-level="3"] {
  padding-left: 36px;
}

.toc-item[data-level="4"] {
  padding-left: 48px;
  font-size: 12px;
}

.toc-item[data-level="5"] {
  padding-left: 60px;
  font-size: 12px;
}

.toc-item[data-level="6"] {
  padding-left: 72px;
  font-size: 12px;
}

@media (max-width: 1079px) {
  .toc-panel {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 1500;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
  }
}

/* ========================================
   ZEN MODE
   ======================================== */

body.zen-mode .app-header,
body.zen-mode .formatting-toolbar,
body.zen-mode .find-replace-bar,
body.zen-mode .dropzone,
body.zen-mode .toc-panel,
body.zen-mode .preview-pane,
body.zen-mode .resize-divider,
body.zen-mode .ai-panel,
body.zen-mode .ai-panel-overlay {
  display: none !important;
}

body.zen-mode .app-container {
  height: 100vh;
}

body.zen-mode .content-container {
  display: flex;
  justify-content: center;
}

body.zen-mode .editor-pane {
  max-width: 750px;
  width: 100%;
  border: none !important;
  flex: none;
  height: 100%;
  padding: 40px 20px;
}

body.zen-mode #markdown-editor {
  font-size: 16px;
  line-height: 1.8;
}

/* Zen mode for preview view — show preview centered instead of editor */
body.zen-mode-preview .preview-pane {
  display: block !important;
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
  border: none !important;
  flex: none;
  height: 100%;
  padding: 40px 20px;
}

body.zen-mode-preview .editor-pane {
  display: none !important;
}

.zen-exit-hint {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 13px;
  z-index: 9999;
  animation: zenHintFade 4s ease forwards;
  pointer-events: none;
}

.zen-exit-hint kbd {
  background-color: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 3px;
  padding: 2px 6px;
  font-size: 12px;
}

@keyframes zenHintFade {
  0% {
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  70% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

/* ========================================
   SLIDE / PRESENTATION MODE (Slidev-Inspired)
   ======================================== */

/* --- PPT View Mode (inline, not fullscreen) --- */
.content-container.view-ppt .editor-pane,
.content-container.view-ppt .preview-pane,
.content-container.view-ppt .resize-divider {
  display: none;
}

.content-container.view-ppt #slide-container {
  display: flex !important;
  position: relative;
  inset: unset;
  z-index: auto;
  flex: 1;
  height: 100%;
}

/* --- Fullscreen mode (legacy present button or F key) --- */
#slide-container.slide-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 3000;
}

#slide-container {
  background-color: var(--bg-color);
  display: flex;
  flex-direction: column;
  transition: background-color 0.3s ease;
}

/* --- Slide Header --- */
.slide-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 20px;
  border-bottom: 1px solid var(--border-color);
  background-color: var(--header-bg);
  flex-shrink: 0;
}

.slide-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.slide-counter {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-color);
  opacity: 0.8;
  font-variant-numeric: tabular-nums;
}

.slide-tool-btn {
  background: none;
  border: 1px solid transparent;
  color: var(--text-color);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
}

.slide-tool-btn:hover {
  background-color: var(--button-hover);
  border-color: var(--border-color);
}

.slide-tool-btn.active {
  background-color: var(--accent-color);
  color: #fff;
  border-color: var(--accent-color);
}

.slide-exit-btn {
  background-color: var(--button-bg);
  border: 1px solid var(--border-color);
  color: var(--text-color);
  border-radius: 6px;
  padding: 5px 14px;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: all 0.2s ease;
  margin-left: 4px;
}

.slide-exit-btn:hover {
  background-color: var(--color-danger-fg, #d73a49);
  color: #fff;
  border-color: transparent;
}

/* --- Slide Content Area --- */
.slide-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 32px 48px;
  position: relative;
}

.slide-transition-wrapper {
  width: 100%;
  max-width: 960px;
  max-height: 100%;
  overflow-y: auto;
  animation-duration: 0.4s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  animation-fill-mode: both;
}

.slide-content .markdown-body {
  font-size: 1.25em;
  line-height: 1.7;
}

.slide-content .markdown-body h1 {
  font-size: 2.4em;
  margin-bottom: 0.6em;
}

.slide-content .markdown-body h2 {
  font-size: 1.8em;
  margin-bottom: 0.5em;
}

/* --- Slide Transitions --- */
@keyframes slideFadeIn {
  from {
    opacity: 0;
    transform: scale(0.97);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slideFromRight {
  from {
    opacity: 0;
    transform: translateX(60px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideFromLeft {
  from {
    opacity: 0;
    transform: translateX(-60px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.slide-transition-fade {
  animation-name: slideFadeIn;
}

.slide-transition-from-right {
  animation-name: slideFromRight;
}

.slide-transition-from-left {
  animation-name: slideFromLeft;
}

/* --- Slide Layouts --- */
.slide-layout-cover .markdown-body {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 60vh;
}

.slide-layout-cover .markdown-body h1 {
  font-size: 3.2em;
  background: linear-gradient(135deg, var(--accent-color), #a855f7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.slide-layout-center .markdown-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 50vh;
}

.slide-layout-two-cols .markdown-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}

.slide-layout-two-cols .markdown-body>h1,
.slide-layout-two-cols .markdown-body>h2,
.slide-layout-two-cols .markdown-body>h3 {
  grid-column: 1 / -1;
}

.slide-layout-image-right {
  flex-direction: row;
}

.slide-layout-image-right .markdown-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
}

/* --- Navigation Bar & Progress --- */
.slide-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 20px;
  border-top: 1px solid var(--border-color);
  background-color: var(--header-bg);
  flex-shrink: 0;
}

.slide-nav-btn {
  background: none;
  border: 1px solid var(--border-color);
  color: var(--text-color);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.slide-nav-btn:hover {
  background-color: var(--button-hover);
}

.slide-nav-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.slide-progress-container {
  flex: 1;
  height: 4px;
  background-color: var(--border-color);
  border-radius: 4px;
  overflow: hidden;
}

.slide-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-color), #a855f7);
  border-radius: 4px;
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  width: 0%;
}

/* --- Speaker Notes Panel --- */
.slide-notes-panel {
  border-top: 1px solid var(--border-color);
  background-color: var(--header-bg);
  max-height: 200px;
  overflow-y: auto;
  flex-shrink: 0;
  animation: slideUp 0.2s ease;
}

@keyframes slideUp {
  from {
    max-height: 0;
    opacity: 0;
  }

  to {
    max-height: 200px;
    opacity: 1;
  }
}

.slide-notes-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border-color);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-color);
  opacity: 0.7;
}

.slide-notes-body {
  padding: 12px 16px;
  font-size: 13px;
  color: var(--text-color);
  line-height: 1.6;
}

.slide-notes-empty {
  opacity: 0.4;
  font-style: italic;
}

/* --- Slide Overview Grid --- */
.slide-overview {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.85);
  z-index: 100;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(8px);
  animation: slideFadeIn 0.25s ease;
}

.slide-overview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  color: #fff;
}

.slide-overview-header h4 {
  margin: 0;
  font-size: 16px;
}

.slide-overview-header .slide-tool-btn {
  color: #fff;
}

.slide-overview-grid {
  flex: 1;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  padding: 0 24px 24px;
}

.slide-overview-card {
  background-color: var(--bg-color);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
}

.slide-overview-card:hover {
  border-color: var(--accent-color);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.slide-overview-card.active {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.3);
}

.slide-overview-card-body {
  padding: 12px;
  font-size: 10px;
  line-height: 1.4;
  flex: 1;
  overflow: hidden;
  max-height: 140px;
  pointer-events: none;
}

.slide-overview-card-body .markdown-body {
  font-size: 0.65em;
  transform-origin: top left;
}

.slide-overview-card-footer {
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-color);
  opacity: 0.6;
  border-top: 1px solid var(--border-color);
  text-align: center;
}

/* --- Shortcuts Help Overlay --- */
.slide-shortcuts {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.75);
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
  animation: slideFadeIn 0.2s ease;
}

.slide-shortcuts-content {
  background-color: var(--bg-color);
  border-radius: 12px;
  padding: 28px 36px;
  max-width: 420px;
  width: 100%;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.slide-shortcuts-content h4 {
  margin: 0 0 20px;
  font-size: 16px;
  color: var(--text-color);
}

.slide-shortcut-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.slide-shortcut-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-color);
}

.slide-shortcut-item kbd {
  background-color: var(--button-bg);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 12px;
  font-family: inherit;
  min-width: 28px;
  text-align: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.slide-shortcut-item span {
  opacity: 0.8;
  margin-left: auto;
}

.slide-shortcuts-close-btn {
  margin-top: 20px;
  width: 100%;
  padding: 8px;
  background-color: var(--accent-color);
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  transition: opacity 0.15s ease;
}

.slide-shortcuts-close-btn:hover {
  opacity: 0.85;
}

/* --- Slide background support --- */
.slide-content[data-bg] {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ========================================
   GITHUB-STYLE CALLOUTS / ADMONITIONS
   ======================================== */

.markdown-callout {
  padding: 12px 16px;
  margin-bottom: 16px;
  border-radius: 6px;
  border-left: 4px solid;
}

.markdown-callout .callout-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 6px;
}

.markdown-callout .callout-title i {
  font-size: 16px;
}

.markdown-callout.callout-note {
  background-color: rgba(9, 105, 218, 0.08);
  border-left-color: #0969da;
}

.markdown-callout.callout-note .callout-title {
  color: #0969da;
}

.markdown-callout.callout-tip {
  background-color: rgba(26, 127, 55, 0.08);
  border-left-color: #1a7f37;
}

.markdown-callout.callout-tip .callout-title {
  color: #1a7f37;
}

.markdown-callout.callout-important {
  background-color: rgba(130, 80, 223, 0.08);
  border-left-color: #8250df;
}

.markdown-callout.callout-important .callout-title {
  color: #8250df;
}

.markdown-callout.callout-warning {
  background-color: rgba(154, 103, 0, 0.08);
  border-left-color: #9a6700;
}

.markdown-callout.callout-warning .callout-title {
  color: #9a6700;
}

.markdown-callout.callout-caution {
  background-color: rgba(207, 34, 46, 0.08);
  border-left-color: #cf222e;
}

.markdown-callout.callout-caution .callout-title {
  color: #cf222e;
}

/* Dark mode callout adjustments */
[data-theme="dark"] .markdown-callout.callout-note {
  background-color: rgba(56, 139, 253, 0.1);
  border-left-color: #388bfd;
}

[data-theme="dark"] .markdown-callout.callout-note .callout-title {
  color: #388bfd;
}

[data-theme="dark"] .markdown-callout.callout-tip {
  background-color: rgba(63, 185, 80, 0.1);
  border-left-color: #3fb950;
}

[data-theme="dark"] .markdown-callout.callout-tip .callout-title {
  color: #3fb950;
}

[data-theme="dark"] .markdown-callout.callout-important {
  background-color: rgba(163, 113, 247, 0.1);
  border-left-color: #a371f7;
}

[data-theme="dark"] .markdown-callout.callout-important .callout-title {
  color: #a371f7;
}

[data-theme="dark"] .markdown-callout.callout-warning {
  background-color: rgba(210, 153, 34, 0.1);
  border-left-color: #d29922;
}

[data-theme="dark"] .markdown-callout.callout-warning .callout-title {
  color: #d29922;
}

[data-theme="dark"] .markdown-callout.callout-caution {
  background-color: rgba(248, 81, 73, 0.1);
  border-left-color: #f85149;
}

[data-theme="dark"] .markdown-callout.callout-caution .callout-title {
  color: #f85149;
}

/* ========================================
   HEADING ANCHOR LINKS
   ======================================== */

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
  position: relative;
}

.heading-anchor {
  position: absolute;
  left: -1.5em;
  color: var(--accent-color);
  text-decoration: none;
  opacity: 0;
  font-size: 0.8em;
  transition: opacity 0.15s ease;
  padding-right: 4px;
}

.markdown-body h1:hover .heading-anchor,
.markdown-body h2:hover .heading-anchor,
.markdown-body h3:hover .heading-anchor,
.markdown-body h4:hover .heading-anchor,
.markdown-body h5:hover .heading-anchor,
.markdown-body h6:hover .heading-anchor {
  opacity: 1;
}

.heading-anchor:hover {
  text-decoration: underline;
}

/* ========================================
   FOOTNOTES
   ======================================== */

.footnotes-section {
  border-top: 1px solid var(--border-color);
  margin-top: 32px;
  padding-top: 16px;
  font-size: 0.9em;
}

.footnotes-section .footnote-title {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 12px;
  color: var(--text-color);
  opacity: 0.8;
}

.footnote-ref {
  font-size: 0.75em;
  vertical-align: super;
  line-height: 0;
  color: var(--accent-color);
  text-decoration: none;
  font-weight: 600;
}

.footnote-ref:hover {
  text-decoration: underline;
}

.footnote-item {
  margin-bottom: 8px;
  display: flex;
  gap: 8px;
}

.footnote-number {
  font-weight: 600;
  color: var(--accent-color);
  min-width: 20px;
  font-size: 0.85em;
}

.footnote-backref {
  color: var(--accent-color);
  text-decoration: none;
  font-size: 0.85em;
  margin-left: 4px;
}

.footnote-backref:hover {
  text-decoration: underline;
}

/* ========================================
   CUSTOM PREVIEW THEMES
   ======================================== */

/* GitLab Theme */
[data-preview-theme="gitlab"] .markdown-body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans', Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
  --color-canvas-default: #fafafa;
  --color-fg-default: #303030;
  --color-border-default: #dbdbdb;
  --color-accent-fg: #1068bf;
}

[data-theme="dark"][data-preview-theme="gitlab"] .markdown-body {
  --color-canvas-default: #1a1a2e;
  --color-fg-default: #e0e0e0;
  --color-border-default: #3a3a5e;
  --color-accent-fg: #63b3ed;
}

/* Notion Theme */
[data-preview-theme="notion"] .markdown-body {
  font-family: 'Georgia', 'Times New Roman', serif;
  --color-canvas-default: #ffffff;
  --color-fg-default: #37352f;
  --color-border-default: #e3e2e0;
  --color-accent-fg: #2eaadc;
  letter-spacing: -0.003em;
}

[data-preview-theme="notion"] .markdown-body h1,
[data-preview-theme="notion"] .markdown-body h2,
[data-preview-theme="notion"] .markdown-body h3 {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 700;
}

[data-theme="dark"][data-preview-theme="notion"] .markdown-body {
  --color-canvas-default: #191919;
  --color-fg-default: #e0e0e0;
  --color-border-default: #373737;
  --color-accent-fg: #529cca;
}

/* Dracula Theme */
[data-preview-theme="dracula"] .markdown-body {
  --color-canvas-default: #282a36;
  --color-fg-default: #f8f8f2;
  --color-border-default: #44475a;
  --color-accent-fg: #bd93f9;
  --color-prettylights-syntax-comment: #6272a4;
  --color-prettylights-syntax-keyword: #ff79c6;
  --color-prettylights-syntax-string: #f1fa8c;
  --color-prettylights-syntax-entity-tag: #50fa7b;
  --color-prettylights-syntax-constant: #8be9fd;
  background-color: #282a36 !important;
  color: #f8f8f2 !important;
}

[data-preview-theme="dracula"] .markdown-body pre,
[data-preview-theme="dracula"] .markdown-body code {
  background-color: #1e1f29 !important;
}

/* Solarized Theme */
[data-preview-theme="solarized"] .markdown-body {
  --color-canvas-default: #fdf6e3;
  --color-fg-default: #657b83;
  --color-border-default: #eee8d5;
  --color-accent-fg: #268bd2;
  background-color: #fdf6e3 !important;
  color: #657b83 !important;
}

[data-theme="dark"][data-preview-theme="solarized"] .markdown-body {
  --color-canvas-default: #002b36;
  --color-fg-default: #839496;
  --color-border-default: #073642;
  --color-accent-fg: #268bd2;
  background-color: #002b36 !important;
  color: #839496 !important;
}

[data-preview-theme="solarized"] .markdown-body pre,
[data-preview-theme="solarized"] .markdown-body code {
  background-color: #eee8d5 !important;
}

[data-theme="dark"][data-preview-theme="solarized"] .markdown-body pre,
[data-theme="dark"][data-preview-theme="solarized"] .markdown-body code {
  background-color: #073642 !important;
}

/* Active theme indicator in dropdown */
.theme-option.active-theme {
  font-weight: 700;
  color: var(--accent-color);
}

.theme-option.active-theme::before {
  content: '✓ ';
}

/* ========================================
   FOCUS MODE
   ======================================== */

body.focus-mode #markdown-editor {
  color: rgba(var(--text-color-rgb, 200, 200, 200), 0.35);
}


.tool-button.focus-active {
  background-color: var(--accent-color) !important;
  color: #fff !important;
  border-color: var(--accent-color) !important;
}

.tool-button.wrap-active {
  background-color: var(--accent-color) !important;
  color: #fff !important;
  border-color: var(--accent-color) !important;
}

/* ========================================
   WORD WRAP TOGGLE
   ======================================== */

#markdown-editor.no-wrap {
  white-space: pre;
  overflow-x: auto;
  word-wrap: normal;
  overflow-wrap: normal;
}

/* ========================================
   PLANTUML SUPPORT
   ======================================== */

.plantuml-container {
  text-align: center;
  margin: 16px 0;
  overflow-x: auto;
  position: relative;
}

.plantuml-container img {
  max-width: 100%;
  height: auto;
}

.plantuml-container.plantuml-loading::after {
  content: 'Rendering PlantUML...';
  display: block;
  padding: 20px;
  opacity: 0.5;
  font-size: 13px;
}

.plantuml-container.plantuml-error {
  border: 1px solid var(--color-danger-fg, #d73a49);
  border-radius: 6px;
  padding: 12px;
  color: var(--color-danger-fg, #d73a49);
  font-size: 13px;
}

/* ========================================
   AI ASSISTANT — Panel & Chat
   ======================================== */

/* Toolbar separator */
.toolbar-separator {
  width: 1px;
  height: 24px;
  background-color: var(--border-color);
  margin: 0 2px;
  align-self: center;
}

/* Sparkle button — monochrome */
.ai-sparkle-btn {
  position: relative;
  background: #1a1a2e !important;
  border: none !important;
  border-radius: 20px !important;
  padding: 5px 12px !important;
  display: flex;
  align-items: center;
  gap: 5px;
  color: #fff !important;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

[data-theme="dark"] .ai-sparkle-btn {
  background: #fff !important;
  color: #1a1a2e !important;
  box-shadow: 0 2px 6px rgba(255, 255, 255, 0.1);
}

.ai-sparkle-btn i {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  font-size: 14px;
}

.ai-sparkle-btn:hover {
  transform: translateY(-1px);
  opacity: 0.85;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

[data-theme="dark"] .ai-sparkle-btn:hover {
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.15) !important;
}

.ai-sparkle-btn.ai-active {
  background: var(--accent-color) !important;
  color: #fff !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.2);
}

/* --- AI Floating Panel --- */
.ai-panel {
  position: fixed;
  right: 0;
  top: 0;
  width: var(--ai-panel-width);
  height: 100vh;
  background: var(--bg-color);
  border-left: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  z-index: 1050;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: auto;
  /* Panel itself is interactive even though overlay passes through */
}

/* --- AI Panel Resize Divider --- */
.ai-resize-divider {
  position: absolute;
  left: -3px;
  top: 0;
  width: 6px;
  height: 100%;
  cursor: col-resize;
  z-index: 1051;
  background: transparent;
  transition: background 0.15s ease;
}

.ai-resize-divider:hover,
.ai-resize-divider.dragging {
  background: var(--accent-color);
}

.ai-resize-divider::after {
  content: '';
  position: absolute;
  left: 1px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 32px;
  border-radius: 2px;
  background: var(--border-color);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.ai-resize-divider:hover::after,
.ai-resize-divider.dragging::after {
  opacity: 1;
}

.ai-panel.ai-panel-open {
  transform: translateX(0);
}

.ai-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-color);
  background: var(--header-bg);
  flex-shrink: 0;
}

.ai-panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 15px;
  color: var(--text-color);
}

.ai-panel-title i {
  font-size: 18px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.ai-badge {
  font-size: 10px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.12), rgba(118, 75, 162, 0.12));
  color: #667eea;
  letter-spacing: 0.3px;
}

[data-theme="dark"] .ai-badge {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.2), rgba(118, 75, 162, 0.2));
  color: #a5b4fc;
}

.ai-panel-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Input options row (below textarea) */
.ai-input-options {
  display: flex;
  align-items: center;
  padding: 6px 4px 2px;
  gap: 8px;
}

/* Thinking mode toggle — slider style */
.ai-thinking-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  color: var(--text-color);
  opacity: 0.7;
  transition: all 0.25s;
  user-select: none;
  border: 1px solid var(--border-color);
  background: transparent;
}

.ai-thinking-toggle:hover {
  opacity: 1;
  border-color: #a78bfa;
}

.ai-thinking-toggle input[type="checkbox"] {
  display: none;
}

/* Toggle slider track */
.ai-thinking-slider {
  position: relative;
  width: 32px;
  height: 18px;
  background: var(--border-color);
  border-radius: 9px;
  transition: background 0.25s;
  flex-shrink: 0;
}

.ai-thinking-slider::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
  top: 2px;
  left: 2px;
  transition: transform 0.25s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Active state when checked */
.ai-thinking-toggle input:checked~.ai-thinking-slider {
  background: #a78bfa;
}

.ai-thinking-toggle input:checked~.ai-thinking-slider::after {
  transform: translateX(14px);
}

.ai-thinking-toggle input:checked~.ai-thinking-label {
  color: #a78bfa;
  font-weight: 600;
}

.ai-thinking-toggle:has(input:checked) {
  opacity: 1;
  border-color: #a78bfa;
  background: rgba(167, 139, 250, 0.1);
}

.ai-thinking-label {
  font-size: 12px;
  white-space: nowrap;
}

.ai-panel-btn {
  background: none;
  border: none;
  color: var(--text-color);
  padding: 6px;
  border-radius: 6px;
  cursor: pointer;
  opacity: 0.6;
  transition: all 0.2s;
  font-size: 14px;
}

.ai-panel-btn:hover {
  opacity: 1;
  background: var(--button-hover);
}

/* --- Quick Action Chips --- */
.ai-quick-actions {
  padding: 12px 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}

.ai-action-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 16px;
  border: 1px solid var(--border-color);
  background: var(--button-bg);
  color: var(--text-color);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.ai-action-chip:hover {
  border-color: #667eea;
  background: rgba(102, 126, 234, 0.08);
  color: #667eea;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15);
}

[data-theme="dark"] .ai-action-chip:hover {
  color: #a5b4fc;
  border-color: #a5b4fc;
  background: rgba(102, 126, 234, 0.15);
}

.ai-action-chip i {
  font-size: 13px;
}

/* --- Chat Area --- */
.ai-chat-area {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ai-chat-area::-webkit-scrollbar {
  width: 6px;
}

.ai-chat-area::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 3px;
}

/* Welcome message */
.ai-welcome-message {
  text-align: center;
  padding: 36px 20px;
  color: var(--text-color);
  opacity: 0.8;
}

.ai-welcome-icon {
  font-size: 42px;
  margin-bottom: 12px;
}

.ai-welcome-icon i {
  background: linear-gradient(135deg, #667eea, #764ba2, #f093fb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.ai-welcome-message h5 {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 600;
}

.ai-welcome-message p {
  font-size: 13px;
  margin: 0 0 20px;
  opacity: 0.7;
}

.ai-welcome-tips {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
  max-width: 280px;
  margin: 0 auto;
}

.ai-tip {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  opacity: 0.7;
}

.ai-tip i {
  font-size: 14px;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}

.ai-tip kbd {
  display: inline-block;
  padding: 1px 5px;
  border: 1px solid var(--border-color);
  border-radius: 3px;
  background: var(--button-bg);
  font-size: 11px;
  font-family: inherit;
}

/* Chat messages */
.ai-message {
  display: flex;
  flex-direction: column;
  gap: 4px;
  animation: aiMsgFadeIn 0.25s ease;
}

@keyframes aiMsgFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ai-message-user {
  align-items: flex-end;
}

.ai-message-ai {
  align-items: flex-start;
}

.ai-msg-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0 4px;
  opacity: 0.5;
}

.ai-msg-bubble {
  max-width: 92%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.55;
  word-break: break-word;
}

.ai-message-user .ai-msg-bubble {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.ai-message-ai .ai-msg-bubble {
  background: var(--button-bg);
  color: var(--text-color);
  border: 1px solid var(--border-color);
  border-bottom-left-radius: 4px;
}

.ai-msg-bubble pre {
  background: rgba(0, 0, 0, 0.06);
  padding: 8px 10px;
  border-radius: 6px;
  overflow-x: auto;
  margin: 6px 0;
  font-size: 12px;
}

[data-theme="dark"] .ai-msg-bubble pre {
  background: rgba(255, 255, 255, 0.06);
}

.ai-msg-bubble code {
  font-size: 12px;
  padding: 1px 4px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] .ai-msg-bubble code {
  background: rgba(255, 255, 255, 0.08);
}

/* Message action buttons */
.ai-msg-actions {
  display: flex;
  gap: 4px;
  margin-top: 4px;
  padding: 0 4px;
}

.ai-msg-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background: var(--button-bg);
  color: var(--text-color);
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s;
  opacity: 0.75;
}

.ai-msg-action-btn:hover {
  opacity: 1;
  border-color: #667eea;
  color: #667eea;
}

/* Typing indicator */
.ai-typing-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  background: var(--button-bg);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  border-bottom-left-radius: 4px;
  width: fit-content;
}

.ai-typing-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-color);
  opacity: 0.4;
  animation: aiTypingBounce 1.2s infinite ease-in-out;
}

.ai-typing-dot:nth-child(2) {
  animation-delay: 0.15s;
}

.ai-typing-dot:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes aiTypingBounce {

  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.4;
  }

  30% {
    transform: translateY(-4px);
    opacity: 0.9;
  }
}

/* --- Input Area --- */
.ai-input-area {
  padding: 12px 16px;
  border-top: 1px solid var(--border-color);
  background: var(--header-bg);
  flex-shrink: 0;
}

/* --- Model Selector --- */
.ai-model-selector {
  position: relative;
  margin-bottom: 8px;
}

.ai-model-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 12px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: var(--button-bg);
  color: var(--text-color);
  font-size: 12.5px;
  cursor: pointer;
  transition: all 0.2s;
}

.ai-model-btn:hover {
  border-color: #667eea;
  background: rgba(102, 126, 234, 0.05);
}

.ai-model-btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
  font-size: 11px;
  flex-shrink: 0;
}

.ai-model-chevron {
  margin-left: auto;
  font-size: 11px;
  opacity: 0.5;
  transition: transform 0.2s;
}

.ai-model-selector.open .ai-model-chevron {
  transform: rotate(180deg);
}

.ai-model-dropdown {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  margin-bottom: 4px;
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.15);
  padding: 3px;
  z-index: 10;
  animation: aiModelDropIn 0.15s ease;
  max-height: 50vh;
  overflow-y: auto;
}

.ai-model-selector.open .ai-model-dropdown {
  display: block;
}

@keyframes aiModelDropIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ai-model-option {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 3px 8px;
  border: none;
  background: none;
  color: var(--text-color);
  cursor: pointer;
  border-radius: 5px;
  transition: all 0.15s;
  text-align: left;
}

.ai-model-option:hover {
  background: rgba(102, 126, 234, 0.08);
}

.ai-model-option.active {
  background: rgba(102, 126, 234, 0.12);
  border: 1px solid rgba(102, 126, 234, 0.3);
}

[data-theme="dark"] .ai-model-option.active {
  background: rgba(102, 126, 234, 0.18);
  border-color: rgba(165, 180, 252, 0.3);
}

.ai-model-option>i {
  font-size: 13px;
  color: #667eea;
  width: 16px;
  text-align: center;
  flex-shrink: 0;
}

[data-theme="dark"] .ai-model-option>i {
  color: #a5b4fc;
}

.ai-model-option strong {
  display: block;
  font-size: 11px;
  margin-bottom: 0;
  line-height: 1.3;
}

.ai-model-option small {
  display: block;
  font-size: 9.5px;
  opacity: 0.6;
  line-height: 1.2;
}

/* --- API Key Modal --- */
.ai-apikey-input-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ai-apikey-input-group label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-color);
}

.ai-apikey-input {
  width: 100%;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: var(--editor-bg);
  color: var(--text-color);
  font-size: 14px;
  font-family: 'SF Mono', 'Fira Code', monospace;
  letter-spacing: 0.5px;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.ai-apikey-input:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.12);
}

.ai-apikey-input::placeholder {
  color: var(--text-color);
  opacity: 0.35;
  font-family: inherit;
}

.ai-apikey-hint {
  font-size: 12px;
  color: var(--text-color);
  opacity: 0.6;
}

.ai-apikey-hint a {
  color: #667eea;
  text-decoration: none;
}

.ai-apikey-hint a:hover {
  text-decoration: underline;
}

[data-theme="dark"] .ai-apikey-hint a {
  color: #a5b4fc;
}

.ai-apikey-error {
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(248, 113, 113, 0.1);
  border: 1px solid rgba(248, 113, 113, 0.3);
  color: #ef4444;
  font-size: 12.5px;
}

[data-theme="dark"] .ai-apikey-error {
  color: #fca5a5;
}

.ai-input-wrapper {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  background: var(--editor-bg);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 6px 6px 6px 14px;
  transition: border-color 0.2s;
}

.ai-input-wrapper:focus-within {
  border-color: #667eea;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.12);
}

#ai-input {
  flex: 1;
  border: none;
  background: none;
  color: var(--text-color);
  font-size: 13.5px;
  line-height: 1.4;
  resize: none;
  max-height: 120px;
  padding: 6px 0;
  font-family: inherit;
}

#ai-input:focus {
  outline: none;
}

#ai-input::placeholder {
  color: var(--text-color);
  opacity: 0.4;
}

.ai-send-button {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}

.ai-send-button:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 12px rgba(102, 126, 234, 0.35);
}

.ai-send-button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.ai-send-button i {
  font-size: 14px;
}

/* --- AI Panel Overlay (mobile backdrop) --- */
.ai-panel-overlay {
  display: none;
  position: fixed;
  inset: 0;
  /* No background — keep editor fully visible and interactive */
  background: transparent;
  z-index: 1040;
  pointer-events: none;
  /* Let all clicks pass through to the editor */
  opacity: 0;
  transition: opacity 0.3s;
}

.ai-panel-overlay.active {
  display: block;
  opacity: 1;
}

/* --- Consent / Download Modal --- */
.ai-consent-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  animation: aiModalBgIn 0.25s ease;
}

@keyframes aiModalBgIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.ai-consent-content {
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  width: 440px;
  max-width: 92vw;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  animation: aiModalSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

@keyframes aiModalSlideIn {
  from {
    transform: translateY(16px) scale(0.97);
    opacity: 0;
  }

  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

.ai-consent-header {
  text-align: center;
  padding: 28px 24px 16px;
}

.ai-consent-icon {
  font-size: 44px;
  margin-bottom: 10px;
}

.ai-consent-icon i {
  background: linear-gradient(135deg, #667eea, #764ba2, #f093fb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.ai-consent-header h4 {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 700;
  color: var(--text-color);
}

.ai-consent-header p {
  margin: 0;
  font-size: 13.5px;
  color: var(--text-color);
  opacity: 0.65;
}

.ai-consent-body {
  padding: 0 24px 20px;
}

.ai-consent-info {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ai-consent-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--button-bg);
  border: 1px solid var(--border-color);
}

.ai-consent-row>i {
  font-size: 20px;
  margin-top: 2px;
  color: #667eea;
  flex-shrink: 0;
}

[data-theme="dark"] .ai-consent-row>i {
  color: #a5b4fc;
}

.ai-consent-row strong {
  display: block;
  font-size: 13.5px;
  margin-bottom: 2px;
  color: var(--text-color);
}

.ai-consent-row small {
  font-size: 12px;
  color: var(--text-color);
  opacity: 0.6;
}

/* Download progress */
.ai-download-progress {
  margin-top: 18px;
  padding: 14px;
  border-radius: 10px;
  background: var(--button-bg);
  border: 1px solid var(--border-color);
  min-height: 80px;
}

.ai-progress-status {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-color);
  margin-bottom: 10px;
  height: 20px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ai-progress-bar-container {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: var(--border-color);
  overflow: hidden;
}

.ai-progress-bar {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #667eea, #764ba2);
  transition: width 0.25s ease;
}

.ai-progress-detail {
  font-size: 11px;
  color: var(--text-color);
  opacity: 0.5;
  margin-top: 6px;
  height: 16px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ai-consent-footer {
  display: flex;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid var(--border-color);
  background: var(--header-bg);
}

.ai-consent-btn {
  flex: 1;
  padding: 10px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
}

.ai-consent-btn-secondary {
  background: var(--button-bg);
  color: var(--text-color);
  border: 1px solid var(--border-color);
}

.ai-consent-btn-secondary:hover {
  background: var(--button-hover);
}

.ai-consent-btn-primary {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
}

.ai-consent-btn-primary:hover {
  box-shadow: 0 4px 16px rgba(102, 126, 234, 0.4);
  transform: translateY(-1px);
}

.ai-consent-btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Progress source location */
.ai-progress-source {
  font-size: 11.5px;
  color: var(--text-color);
  opacity: 0.65;
  margin-bottom: 8px;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(102, 126, 234, 0.06);
  border: 1px solid rgba(102, 126, 234, 0.12);
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ai-progress-source i {
  flex-shrink: 0;
  color: #667eea;
}

[data-theme="dark"] .ai-progress-source i {
  color: #a5b4fc;
}

.ai-progress-source code {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 11px;
  color: var(--text-color);
  opacity: 0.85;
}

/* Danger button (model deletion) */
.ai-consent-btn-danger {
  background: transparent;
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
  flex: 0 0 auto;
  padding: 10px 14px;
}

.ai-consent-btn-danger:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: #ef4444;
  color: #dc2626;
}

.ai-consent-btn-danger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

[data-theme="dark"] .ai-consent-btn-danger {
  color: #f87171;
  border-color: rgba(248, 113, 113, 0.3);
}

[data-theme="dark"] .ai-consent-btn-danger:hover {
  background: rgba(248, 113, 113, 0.15);
  border-color: #f87171;
  color: #fca5a5;
}

/* --- Editor Context Menu --- */
.ai-context-menu {
  position: fixed;
  z-index: 1060;
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: row;
  animation: aiCtxIn 0.15s ease;
}

.ai-ctx-col {
  display: flex;
  flex-direction: column;
}

.ai-ctx-col-writing {
  border-left: 1px solid var(--border-color);
  margin-left: 2px;
  padding-left: 2px;
}

@keyframes aiCtxIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.ai-ctx-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: none;
  background: none;
  color: var(--text-color);
  font-size: 12.5px;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.15s;
  white-space: nowrap;
}

.ai-ctx-btn:hover {
  background: rgba(102, 126, 234, 0.1);
  color: #667eea;
}

[data-theme="dark"] .ai-ctx-btn:hover {
  background: rgba(102, 126, 234, 0.15);
  color: #a5b4fc;
}

.ai-ctx-btn i {
  font-size: 14px;
  width: 16px;
  text-align: center;
}

/* --- Responsive --- */
@media (max-width: 767px) {
  .ai-panel {
    width: 100%;
  }

  /* On mobile, AI panel is full-width overlay, don't push content */
  body.ai-panel-active .app-container {
    width: 100%;
  }

  .ai-resize-divider {
    display: none;
  }
}

/* --- AI Status Indicator (in-panel) --- */
.ai-status-bar {
  padding: 8px 16px;
  font-size: 12px;
  color: var(--text-color);
  opacity: 0.6;
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid var(--border-color);
  background: var(--header-bg);
  flex-wrap: wrap;
}

.ai-status-bar.downloading {
  opacity: 1;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 10px 16px;
}

.ai-status-bar .ai-inline-progress {
  width: 100%;
  height: 6px;
  background: var(--border-color);
  border-radius: 3px;
  overflow: hidden;
}

.ai-status-bar .ai-inline-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #667eea, #764ba2);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.ai-status-bar .ai-status-text {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
}

.ai-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fbbf24;
}

.ai-status-dot.ready {
  background: #34d399;
}

.ai-status-dot.error {
  background: #f87171;
}

/* Loading spinner for AI status */
.ai-status-spinner {
  width: 12px;
  height: 12px;
  border: 2px solid var(--border-color);
  border-top-color: #667eea;
  border-radius: 50%;
  animation: aiSpin 0.8s linear infinite;
}

@keyframes aiSpin {
  to {
    transform: rotate(360deg);
  }
}

/* ========================================
   FILE CONVERSION OVERLAY
   ======================================== */
.conversion-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s ease;
}

.conversion-modal {
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 2.5rem 3rem;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  min-width: 280px;
}

.conversion-modal h5 {
  margin: 1rem 0 0.25rem;
  color: var(--text-color);
  font-size: 1.1rem;
}

.conversion-detail {
  color: var(--text-color);
  opacity: 0.65;
  font-size: 0.85rem;
  margin: 0;
}

.conversion-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border-color);
  border-top-color: var(--accent-color);
  border-radius: 50%;
  animation: conversionSpin 0.8s linear infinite;
  margin: 0 auto;
}

@keyframes conversionSpin {
  to {
    transform: rotate(360deg);
  }
}

/* Conversion success toast */
.conversion-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #238636;
  color: #fff;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 0.9rem;
  z-index: 10001;
  opacity: 0;
  animation: toastIn 0.3s ease forwards, toastOut 0.3s ease 2.5s forwards;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

@keyframes toastIn {
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes toastOut {
  to {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }
}

/* ========================================
   LLM MEMORY CONVERTER MODAL
   ======================================== */

.memory-modal {
  position: fixed;
  inset: 0;
  z-index: 3500;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: memoryFadeIn 0.2s ease;
}

[data-theme="dark"] .memory-modal {
  background: rgba(0, 0, 0, 0.6);
}

@keyframes memoryFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.memory-modal-content {
  width: 90vw;
  max-width: 740px;
  max-height: 88vh;
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.18), 0 0 0 1px var(--border-color);
  animation: memorySlideUp 0.25s ease;
  color: var(--text-color);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

[data-theme="dark"] .memory-modal-content {
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5), 0 0 40px rgba(99, 102, 241, 0.08);
}

@keyframes memorySlideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.memory-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px 14px;
  border-bottom: 1px solid var(--border-color);
  background: var(--header-bg);
}

.memory-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.memory-logo {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, #6366f1, #a855f7);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #fff;
  box-shadow: 0 4px 20px rgba(99, 102, 241, 0.25);
}

.memory-modal-header h4 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-color);
  letter-spacing: -0.02em;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
}

.memory-subtitle {
  margin: 0;
  font-size: 11px;
  color: var(--text-color);
  opacity: 0.5;
  font-family: 'JetBrains Mono', monospace;
}

.memory-header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.memory-stats {
  display: flex;
  gap: 14px;
  font-size: 10px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-color);
  opacity: 0.5;
}

.memory-stats span::before {
  content: '◆ ';
}

.memory-size-compact {
  color: #16a34a;
}

.memory-size-medium {
  color: #ca8a04;
}

.memory-size-large {
  color: #dc2626;
}

[data-theme="dark"] .memory-size-compact {
  color: #4ade80;
}

[data-theme="dark"] .memory-size-medium {
  color: #facc15;
}

[data-theme="dark"] .memory-size-large {
  color: #f87171;
}

.memory-close-btn {
  background: var(--button-bg);
  border: 1px solid var(--border-color);
  color: var(--text-color);
  border-radius: 6px;
  padding: 6px 8px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

.memory-close-btn:hover {
  background: var(--button-hover);
}

/* --- Tabs --- */
.memory-tabs {
  display: flex;
  gap: 2px;
  padding: 12px 24px 0;
  border-bottom: 1px solid var(--border-color);
  background: var(--header-bg);
}

.memory-tab {
  padding: 9px 18px;
  background: transparent;
  color: var(--text-color);
  opacity: 0.5;
  border: 1px solid transparent;
  border-bottom: 1px solid var(--border-color);
  border-radius: 8px 8px 0 0;
  cursor: pointer;
  font-size: 12px;
  font-family: 'JetBrains Mono', monospace;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: -1px;
}

.memory-tab.active {
  background: var(--bg-color);
  color: var(--text-color);
  opacity: 1;
  border-color: var(--border-color);
  border-bottom-color: var(--bg-color);
  font-weight: 600;
}

.memory-tab:hover:not(.active) {
  opacity: 0.75;
}

/* --- Body --- */
.memory-body {
  padding: 20px 24px;
  overflow-y: auto;
  flex: 1;
}

.memory-tab-content {
  display: none;
}

.memory-tab-content.active {
  display: block;
}

/* --- Config tab --- */
.memory-section {
  margin-bottom: 22px;
}

.memory-label {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-color);
  opacity: 0.5;
  font-family: 'JetBrains Mono', monospace;
  margin-bottom: 10px;
}

.memory-template-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.memory-template-btn {
  padding: 12px 14px;
  background: var(--editor-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s;
  color: var(--text-color);
}

.memory-template-btn strong {
  display: block;
  font-size: 12px;
  font-family: 'JetBrains Mono', monospace;
  margin-bottom: 3px;
}

.memory-template-btn small {
  display: block;
  color: var(--text-color);
  opacity: 0.5;
  font-size: 10px;
}

.memory-template-btn.active {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 1px var(--accent-color);
}

.memory-template-btn.active strong {
  color: var(--accent-color);
}

.memory-template-btn:hover:not(.active) {
  background: var(--button-hover);
}

.memory-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 8px;
}

.memory-field label {
  display: block;
  font-size: 10px;
  color: var(--text-color);
  opacity: 0.5;
  margin-bottom: 3px;
  font-family: 'JetBrains Mono', monospace;
}

.memory-field input,
.memory-field textarea {
  width: 100%;
  padding: 8px 10px;
  background: var(--editor-bg);
  color: var(--text-color);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 12px;
  font-family: 'JetBrains Mono', monospace;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s;
}

.memory-field input:focus,
.memory-field textarea:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.15);
}

.memory-field-full {
  margin-top: 8px;
}

/* --- Output tab --- */
.memory-output-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.memory-output-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-color);
  opacity: 0.5;
  font-family: 'JetBrains Mono', monospace;
}

.memory-copy-btn {
  padding: 7px 14px;
  background: var(--button-bg);
  color: var(--text-color);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  cursor: pointer;
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 5px;
}

.memory-copy-btn:hover {
  background: var(--button-hover);
}

.memory-copy-btn.copied {
  background: #dcfce7;
  color: #16a34a;
  border-color: #86efac;
}

[data-theme="dark"] .memory-copy-btn.copied {
  background: #1a3a1a;
  color: #4ade80;
  border-color: #2d5a2d;
}

.memory-output-pre {
  background: var(--editor-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 14px;
  font-size: 11px;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  line-height: 1.65;
  color: var(--text-color);
  overflow: auto;
  max-height: 380px;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}

/* --- Share tab --- */
.memory-share-card {
  background: var(--editor-bg);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.memory-share-icon {
  font-size: 18px;
  color: var(--accent-color);
  width: 28px;
  text-align: center;
  flex-shrink: 0;
}

.memory-share-card strong {
  display: block;
  font-size: 13px;
  color: var(--text-color);
  font-family: 'JetBrains Mono', monospace;
}

.memory-share-card small {
  display: block;
  font-size: 10px;
  color: var(--text-color);
  opacity: 0.5;
  margin-top: 2px;
}

.memory-share-actions {
  margin-left: auto;
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.memory-action-btn {
  padding: 8px 16px;
  background: var(--accent-color);
  color: #fff;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  transition: all 0.2s;
}

.memory-action-btn:hover {
  opacity: 0.85;
}

.memory-action-btn.copied {
  background: #16a34a !important;
  color: #fff !important;
}

[data-theme="dark"] .memory-action-btn.copied {
  background: #1a3a1a !important;
  color: #4ade80 !important;
}

.memory-api-example {
  background: var(--editor-bg);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 14px;
  font-size: 10px;
  font-family: 'JetBrains Mono', monospace;
  line-height: 1.55;
  color: var(--text-color);
  opacity: 0.75;
  overflow: auto;
  white-space: pre-wrap;
  margin-top: 0;
  margin-bottom: 10px;
}

#memory-share-result {
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  margin-bottom: 10px;
}

#memory-share-result.error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #dc2626;
}

[data-theme="dark"] #memory-share-result.error {
  background: #2a1515;
  border: 1px solid #4a2020;
  color: #f87171;
}

#memory-share-result.success {
  background: var(--editor-bg);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  gap: 8px;
}

#memory-share-result input {
  flex: 1;
  padding: 6px 10px;
  background: var(--bg-color);
  color: var(--text-color);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 10px;
  font-family: 'JetBrains Mono', monospace;
  outline: none;
}

@media (max-width: 600px) {
  .memory-modal-content {
    width: 96vw;
    max-height: 94vh;
    border-radius: 10px;
  }

  .memory-modal-header {
    padding: 14px 16px 10px;
  }

  .memory-body {
    padding: 14px 16px;
  }

  .memory-stats {
    display: none;
  }

  .memory-template-grid {
    grid-template-columns: 1fr;
  }

  .memory-meta-grid {
    grid-template-columns: 1fr;
  }

  .memory-share-card {
    flex-wrap: wrap;
  }

  .memory-share-actions {
    margin-left: 0;
    margin-top: 8px;
    width: 100%;
  }
}

/* ========================================
   TEMPLATE PICKER MODAL
   ======================================== */

.template-modal {
  position: fixed;
  inset: 0;
  z-index: 3600;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s ease;
}

.template-modal-content {
  width: 92vw;
  max-width: 860px;
  max-height: 88vh;
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35), 0 0 40px rgba(99, 102, 241, 0.06);
  animation: modalSlideUp 0.25s ease;
}

[data-theme="dark"] .template-modal-content {
  background: linear-gradient(170deg, #0d0d1a 0%, #12122a 40%, #0f0f20 100%);
  border-color: #2d2d4a;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5), 0 0 40px rgba(99, 102, 241, 0.08);
}

.template-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border-color);
}

[data-theme="dark"] .template-modal-header {
  border-bottom-color: #1e1e3a;
  background: rgba(15, 15, 30, 0.8);
}

.template-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.template-logo {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #fff;
  box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);
  flex-shrink: 0;
}

.template-modal-header h4 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-color);
  letter-spacing: -0.02em;
}

.template-subtitle {
  margin: 2px 0 0;
  font-size: 12px;
  color: #888;
  opacity: 0.7;
}

[data-theme="dark"] .template-subtitle {
  color: #6b6b8d;
}

.template-close-btn {
  background: none;
  border: 1px solid var(--border-color);
  color: var(--text-color);
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
  opacity: 0.6;
}

.template-close-btn:hover {
  opacity: 1;
  background: var(--button-hover);
}

[data-theme="dark"] .template-close-btn {
  border-color: #2d2d4a;
  color: #8888bb;
}

[data-theme="dark"] .template-close-btn:hover {
  background: #2d2d4a;
  color: #fff;
}

/* Search Bar */
.template-search-bar {
  position: relative;
  padding: 14px 24px 0;
}

.template-search-icon {
  position: absolute;
  left: 38px;
  top: 50%;
  transform: translateY(-18%);
  color: #999;
  font-size: 14px;
  pointer-events: none;
}

[data-theme="dark"] .template-search-icon {
  color: #5a5a7d;
}

.template-search-bar input {
  width: 100%;
  padding: 10px 14px 10px 36px;
  font-size: 14px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--editor-bg);
  color: var(--text-color);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.template-search-bar input:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.12);
}

[data-theme="dark"] .template-search-bar input {
  background: #0f0f20;
  border-color: #2d2d4a;
  color: #d0d0e8;
}

[data-theme="dark"] .template-search-bar input:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

/* Category Tabs */
.template-categories {
  display: flex;
  padding: 16px 24px 12px;
}

.template-cat-pills {
  display: inline-flex;
  gap: 2px;
  background: #e8e8f0;
  border: 1.5px solid #c0c0cc;
  border-radius: 10px;
  padding: 3px;
}

[data-theme="dark"] .template-cat-pills {
  background: #1a1a32;
  border-color: #3d3d5c;
}

.template-cat-btn {
  padding: 7px 16px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: #555;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}

.template-cat-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #333;
}

.template-cat-btn.active {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
  opacity: 1;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

[data-theme="dark"] .template-cat-btn {
  color: #8888bb;
}

[data-theme="dark"] .template-cat-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #c0c0e0;
}

/* Template Grid */
.template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  padding: 4px 24px 24px;
  overflow-y: auto;
  flex: 1;
}

.template-card {
  padding: 16px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--editor-bg);
  cursor: pointer;
  transition: all 0.25s ease;
  position: relative;
}

.template-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #667eea, #764ba2);
  opacity: 0;
  transition: opacity 0.25s;
}

.template-card:hover {
  border-color: #667eea;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(102, 126, 234, 0.12);
}

.template-card:hover::before {
  opacity: 1;
}

[data-theme="dark"] .template-card {
  background: rgba(15, 15, 32, 0.6);
  border-color: #2d2d4a;
}

[data-theme="dark"] .template-card:hover {
  border-color: #6366f1;
  background: rgba(26, 26, 62, 0.5);
  box-shadow: 0 8px 30px rgba(99, 102, 241, 0.15);
}

.template-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  margin-bottom: 10px;
  color: #fff;
}

.template-card-icon.doc {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
}

.template-card-icon.project {
  background: linear-gradient(135deg, #10b981, #059669);
}

.template-card-icon.technical {
  background: linear-gradient(135deg, #f59e0b, #d97706);
}

.template-card-icon.creative {
  background: linear-gradient(135deg, #ec4899, #db2777);
}

.template-card-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 4px;
}

.template-card-desc {
  font-size: 12px;
  color: var(--text-color);
  opacity: 0.55;
  margin-bottom: 8px;
  line-height: 1.4;
}

.template-card-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 500;
  text-transform: capitalize;
}

.template-card-tag.documentation {
  background: rgba(59, 130, 246, 0.12);
  color: #3b82f6;
}

.template-card-tag.project {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
}

.template-card-tag.technical {
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
}

.template-card-tag.creative {
  background: rgba(236, 72, 153, 0.12);
  color: #ec4899;
}

[data-theme="dark"] .template-card-tag.documentation {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
}

[data-theme="dark"] .template-card-tag.project {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
}

[data-theme="dark"] .template-card-tag.technical {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
}

[data-theme="dark"] .template-card-tag.creative {
  background: rgba(236, 72, 153, 0.15);
  color: #f472b6;
}

.template-card-preview {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', monospace;
  font-size: 10px;
  line-height: 1.45;
  color: var(--text-color);
  opacity: 0.5;
  max-height: 56px;
  overflow: hidden;
  white-space: pre;
  text-overflow: ellipsis;
}

[data-theme="dark"] .template-card-preview {
  background: #0a0a16;
  border-color: #1e1e36;
}

/* Empty State */
.template-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  color: var(--text-color);
  opacity: 0.4;
}

.template-empty i {
  font-size: 36px;
  margin-bottom: 12px;
}

.template-empty p {
  font-size: 14px;
  margin: 0;
}

/* Responsive */
@media (max-width: 600px) {
  .template-modal-content {
    width: 96vw;
    max-height: 94vh;
    border-radius: 10px;
  }

  .template-modal-header {
    padding: 14px 16px 10px;
  }

  .template-search-bar {
    padding: 10px 16px 0;
  }

  .template-search-icon {
    left: 30px;
  }

  .template-categories {
    padding: 10px 16px 0;
  }

  .template-grid {
    grid-template-columns: 1fr;
    padding: 12px 16px 16px;
  }

  .template-subtitle {
    display: none;
  }
}

/* ========================================
   SPEECH-TO-TEXT DICTATION
   ======================================== */

/* --- Status Bar --- */
.speech-status-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  background: linear-gradient(135deg, #1a1a2e, #16213e);
  color: #e0e0e0;
  font-size: 13px;
  border-bottom: 1px solid #2d2d4a;
  z-index: 50;
  min-height: 36px;
  position: relative;
}

[data-theme="dark"] .speech-status-bar {
  background: linear-gradient(135deg, #0d0d1a, #111128);
  border-bottom-color: #1e1e3a;
}

/* --- Pulse Dot --- */
.speech-pulse {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
  animation: speechPulse 1.5s ease infinite;
  flex-shrink: 0;
}

@keyframes speechPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
  }

  70% {
    box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
  }
}

/* --- Language Label --- */
.speech-lang {
  background: rgba(255, 255, 255, 0.12);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #a5b4fc;
  flex-shrink: 0;
}

/* --- Interim Text --- */
.speech-interim {
  flex: 1;
  font-style: italic;
  color: #94a3b8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  min-width: 0;
}

/* --- Control Buttons --- */
.speech-control-btn {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #94a3b8;
  border-radius: 6px;
  padding: 4px 8px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.speech-control-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #e0e0e0;
  border-color: rgba(255, 255, 255, 0.3);
}

/* --- Mic Button Active State --- */
.tool-button.speech-active {
  color: #ef4444 !important;
  position: relative;
}

.tool-button.speech-active::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ef4444;
  animation: speechPulse 1.5s ease infinite;
}

.mobile-menu-item.speech-active {
  color: #ef4444 !important;
  border-color: rgba(239, 68, 68, 0.3);
  background: rgba(239, 68, 68, 0.05);
}

/* --- Language Dropdown --- */
.speech-lang-dropdown {
  position: absolute;
  bottom: calc(100% + 4px);
  right: 60px;
  background: var(--bg-color, #fff);
  border: 1px solid var(--border-color, #ddd);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  z-index: 100;
  max-height: 280px;
  overflow-y: auto;
  min-width: 200px;
  padding: 4px;
  animation: fadeIn 0.15s ease;
}

[data-theme="dark"] .speech-lang-dropdown {
  background: #1a1a2e;
  border-color: #2d2d4a;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.speech-lang-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  background: none;
  border: none;
  border-radius: 6px;
  color: var(--text-color, #333);
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}

.speech-lang-option:hover {
  background: var(--button-hover, #f0f0f0);
}

[data-theme="dark"] .speech-lang-option:hover {
  background: #2d2d4a;
}

.speech-lang-option.active {
  background: rgba(99, 102, 241, 0.1);
  color: #6366f1;
  font-weight: 600;
}

[data-theme="dark"] .speech-lang-option.active {
  background: rgba(99, 102, 241, 0.15);
  color: #a5b4fc;
}

.speech-lang-short {
  background: rgba(99, 102, 241, 0.12);
  color: #6366f1;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  min-width: 28px;
  text-align: center;
  flex-shrink: 0;
}

[data-theme="dark"] .speech-lang-short {
  background: rgba(99, 102, 241, 0.2);
  color: #a5b4fc;
}

/* --- Toast Notifications --- */
.speech-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  z-index: 9999;
  opacity: 0;
  transition: all 0.3s ease;
  pointer-events: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.speech-toast-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.speech-toast-error {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

.speech-toast-info {
  background: #eff6ff;
  color: #2563eb;
  border: 1px solid #bfdbfe;
}

[data-theme="dark"] .speech-toast-error {
  background: #2a1515;
  color: #f87171;
  border-color: #4a2020;
}

[data-theme="dark"] .speech-toast-info {
  background: #152040;
  color: #60a5fa;
  border-color: #1e3a5f;
}

/* --- Voice Commands Cheat Sheet Popup --- */
.speech-cheat-popup {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 340px;
  max-height: 70vh;
  background: var(--bg-color, #fff);
  border: 1px solid var(--border-color, #ddd);
  border-radius: 14px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.04);
  z-index: 3500;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateY(16px) scale(0.97);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.speech-cheat-popup.speech-cheat-show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

[data-theme="dark"] .speech-cheat-popup {
  background: #1a1a2e;
  border-color: #2d2d4a;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
}

.speech-cheat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color, #eee);
  font-weight: 700;
  font-size: 14px;
  color: var(--text-color, #333);
}

.speech-cheat-header i {
  color: #ef4444;
  margin-right: 6px;
}

[data-theme="dark"] .speech-cheat-header {
  border-bottom-color: #2d2d4a;
}

.speech-cheat-close {
  background: none;
  border: none;
  color: var(--text-color, #999);
  opacity: 0.5;
  cursor: pointer;
  font-size: 14px;
  padding: 4px;
  border-radius: 6px;
  transition: all 0.15s;
}

.speech-cheat-close:hover {
  opacity: 1;
  background: var(--button-hover, #f0f0f0);
}

[data-theme="dark"] .speech-cheat-close:hover {
  background: #2d2d4a;
}

.speech-cheat-body {
  padding: 10px 16px;
  overflow-y: auto;
  flex: 1;
}

.speech-cheat-group {
  margin-bottom: 12px;
}

.speech-cheat-group:last-child {
  margin-bottom: 4px;
}

.speech-cheat-cat {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6366f1;
  font-weight: 700;
  margin-bottom: 4px;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(99, 102, 241, 0.15);
}

[data-theme="dark"] .speech-cheat-cat {
  color: #a5b4fc;
  border-bottom-color: rgba(165, 180, 252, 0.15);
}

.speech-cheat-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  font-size: 12px;
  line-height: 1.4;
}

.speech-cheat-say {
  color: #16a34a;
  font-family: 'SFMono-Regular', 'Consolas', monospace;
  font-size: 11px;
  flex-shrink: 0;
}

[data-theme="dark"] .speech-cheat-say {
  color: #4ade80;
}

.speech-cheat-arrow {
  color: var(--text-color, #aaa);
  opacity: 0.35;
  font-size: 10px;
  flex-shrink: 0;
}

.speech-cheat-insert {
  color: var(--text-color, #555);
  font-family: 'SFMono-Regular', 'Consolas', monospace;
  font-size: 11px;
  opacity: 0.7;
}

.speech-cheat-footer {
  padding: 8px 16px;
  border-top: 1px solid var(--border-color, #eee);
  font-size: 10px;
  color: var(--text-color, #999);
  opacity: 0.5;
  text-align: center;
}

.speech-cheat-footer kbd {
  padding: 1px 5px;
  border-radius: 3px;
  border: 1px solid var(--border-color, #ccc);
  background: var(--editor-bg, #f6f6f6);
  font-size: 10px;
  font-family: inherit;
}

[data-theme="dark"] .speech-cheat-footer {
  border-top-color: #2d2d4a;
}

@media (max-width: 600px) {
  .speech-cheat-popup {
    right: 8px;
    left: 8px;
    bottom: 8px;
    width: auto;
    max-height: 60vh;
  }
}

/* ========================================
   READ-ONLY MODE — disable editing UI
   Applied when viewing a shared document.
   Only scrolling and read-safe actions remain.
   ======================================== */
body.editor-readonly .fmt-btn,
body.editor-readonly #new-document-btn,
body.editor-readonly #template-btn,
body.editor-readonly #share-button,
body.editor-readonly #mobile-share-button,
body.editor-readonly #speech-to-text-btn,
body.editor-readonly #qab-new,
body.editor-readonly #qab-template,
body.editor-readonly #qab-share,
body.editor-readonly #qab-voice,
body.editor-readonly .ai-action-chip,
body.editor-readonly .ai-ctx-btn,
body.editor-readonly #replace-one,
body.editor-readonly #replace-all,
body.editor-readonly #qab-replace-one,
body.editor-readonly #qab-replace-all,
body.editor-readonly .dropzone-wrapper,
body.editor-readonly #markdown-preview button {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
  user-select: none !important;
}

/* ========================================
   HELP MODE — Interactive Feature Guide
   ======================================== */

/* --- Help Pill Button (header + QAB) --- */
.help-mode-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border: 1.5px solid var(--border-color, #d0d7de);
  border-radius: 20px;
  background: var(--editor-bg, #fff);
  color: var(--text-color, #555);
  font-size: 0.65rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.help-mode-pill i {
  font-size: 0.7rem;
}

.help-mode-pill:hover {
  border-color: #667eea;
  color: #667eea;
  background: rgba(102, 126, 234, 0.06);
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.08);
}

.help-mode-pill.help-toggle-on {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 12px rgba(102, 126, 234, 0.35);
}

[data-theme="dark"] .help-mode-pill {
  border-color: #2d2d4a;
  background: rgba(15, 15, 32, 0.6);
  color: #8888bb;
}

[data-theme="dark"] .help-mode-pill:hover {
  border-color: #6366f1;
  color: #a5b4fc;
  background: rgba(99, 102, 241, 0.1);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

[data-theme="dark"] .help-mode-pill.help-toggle-on {
  background: linear-gradient(135deg, #6366f1, #7c3aed);
  border-color: transparent;
  color: #fff;
}

/* --- Active State: Pulsing Highlights on Buttons --- */
body.help-mode-active .tool-button,
body.help-mode-active .fmt-btn,
body.help-mode-active .qab-btn,
body.help-mode-active .view-mode-btn,
body.help-mode-active .mobile-menu-item,
body.help-mode-active .mobile-view-mode-btn,
body.help-mode-active .qab-view-btn,
body.help-mode-active .dropdown-toggle {
  position: relative;
  cursor: help !important;
}

body.help-mode-active .tool-button::after,
body.help-mode-active .fmt-btn::after,
body.help-mode-active .qab-btn::after,
body.help-mode-active .view-mode-btn::after,
body.help-mode-active .mobile-menu-item::after,
body.help-mode-active .mobile-view-mode-btn::after,
body.help-mode-active .qab-view-btn::after,
body.help-mode-active .dropdown-toggle::after {
  content: '';
  position: absolute;
  inset: -3px;
  border: 2px dashed rgba(102, 126, 234, 0.45);
  border-radius: inherit;
  pointer-events: none;
  animation: helpPulse 2s ease-in-out infinite;
}

body.help-mode-active #help-mode-btn::after {
  display: none;
}

@keyframes helpPulse {
  0%, 100% { border-color: rgba(102, 126, 234, 0.25); }
  50% { border-color: rgba(102, 126, 234, 0.6); }
}

[data-theme="dark"] body.help-mode-active .tool-button::after,
[data-theme="dark"] body.help-mode-active .fmt-btn::after,
[data-theme="dark"] body.help-mode-active .qab-btn::after,
[data-theme="dark"] body.help-mode-active .view-mode-btn::after {
  border-color: rgba(99, 102, 241, 0.4);
}

/* --- Help Popover Card --- */
.help-popover {
  position: fixed;
  z-index: 9500;
  width: 320px;
  background: var(--bg-color, #fff);
  border: 1px solid var(--border-color, #d0d7de);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  transition: opacity 0.2s ease, transform 0.2s ease;
  overflow: hidden;
}

.help-popover.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

[data-theme="dark"] .help-popover {
  background: #1a1a2e;
  border-color: #2d2d4a;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(99, 102, 241, 0.1);
}

/* Popover header */
.help-popover-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px 8px;
  border-bottom: 1px solid var(--border-color, #eee);
}

.help-popover-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-color, #1f2328);
  letter-spacing: -0.02em;
}

.help-popover-close {
  background: none;
  border: none;
  color: var(--text-color, #999);
  opacity: 0.4;
  cursor: pointer;
  font-size: 12px;
  padding: 4px;
  border-radius: 6px;
  transition: all 0.15s;
}

.help-popover-close:hover {
  opacity: 1;
  background: var(--button-hover, #f0f0f0);
}

[data-theme="dark"] .help-popover-header {
  border-bottom-color: #2d2d4a;
}

/* Popover body */
.help-popover-body {
  padding: 10px 16px 12px;
}

.help-popover-desc {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-color, #555);
  margin: 0 0 8px;
  opacity: 0.85;
}

/* Keyboard shortcut */
.help-popover-shortcut {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
}

.help-popover-shortcut kbd {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 5px;
  border: 1px solid var(--border-color, #ccc);
  background: var(--editor-bg, #f6f6f6);
  font-family: 'SFMono-Regular', 'Consolas', monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-color, #555);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] .help-popover-shortcut kbd {
  background: #0f0f20;
  border-color: #2d2d4a;
  color: #a5b4fc;
}

/* Watch Demo button */
.help-popover-watch-demo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 4px;
}

.help-popover-watch-demo:hover {
  box-shadow: 0 4px 16px rgba(102, 126, 234, 0.35);
  transform: translateY(-1px);
}

/* Popover footer */
.help-popover-footer {
  display: flex;
  gap: 8px;
  padding: 8px 16px 12px;
  border-top: 1px solid var(--border-color, #eee);
}

[data-theme="dark"] .help-popover-footer {
  border-top-color: #2d2d4a;
}

.help-popover-try {
  flex: 1;
  padding: 7px 12px;
  border: none;
  border-radius: 8px;
  background: var(--editor-bg, #f0f3f6);
  color: var(--text-color, #333);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.help-popover-try:hover {
  background: #667eea;
  color: #fff;
}

[data-theme="dark"] .help-popover-try {
  background: #0f0f20;
  color: #c0c0e0;
}

[data-theme="dark"] .help-popover-try:hover {
  background: #6366f1;
  color: #fff;
}

.help-popover-dismiss {
  padding: 7px 12px;
  border: 1px solid var(--border-color, #ddd);
  border-radius: 8px;
  background: none;
  color: var(--text-color, #777);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.help-popover-dismiss:hover {
  background: var(--button-hover, #f5f5f5);
}

[data-theme="dark"] .help-popover-dismiss {
  border-color: #2d2d4a;
  color: #8888bb;
}

[data-theme="dark"] .help-popover-dismiss:hover {
  background: #2d2d4a;
}

/* --- Demo Panel (slide-in from right) --- */
.help-demo-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 50vw;
  height: 100vh;
  z-index: 9600;
  background: var(--bg-color, #fff);
  border-left: 1px solid var(--border-color, #d0d7de);
  box-shadow: -8px 0 40px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

.help-demo-panel.visible {
  transform: translateX(0);
}

.help-demo-panel.fullscreen {
  width: 100vw;
  border-left: none;
}

[data-theme="dark"] .help-demo-panel {
  background: #0d0d1a;
  border-left-color: #2d2d4a;
  box-shadow: -8px 0 48px rgba(0, 0, 0, 0.5);
}

/* Demo panel header */
.help-demo-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border-color, #eee);
  flex-shrink: 0;
}

.help-demo-panel-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-color, #1f2328);
  letter-spacing: -0.02em;
}

[data-theme="dark"] .help-demo-panel-header {
  border-bottom-color: #2d2d4a;
}

.help-demo-panel-controls {
  display: flex;
  gap: 6px;
}

.help-demo-panel-expand,
.help-demo-panel-close {
  background: none;
  border: 1px solid var(--border-color, #ddd);
  color: var(--text-color, #666);
  border-radius: 8px;
  padding: 5px 8px;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.2s;
}

.help-demo-panel-expand:hover,
.help-demo-panel-close:hover {
  background: var(--button-hover, #f0f0f0);
  color: var(--text-color, #333);
}

[data-theme="dark"] .help-demo-panel-expand,
[data-theme="dark"] .help-demo-panel-close {
  border-color: #2d2d4a;
  color: #8888bb;
}

[data-theme="dark"] .help-demo-panel-expand:hover,
[data-theme="dark"] .help-demo-panel-close:hover {
  background: #2d2d4a;
  color: #fff;
}

/* Demo panel body */
.help-demo-panel-body {
  flex: 1;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--editor-bg, #f6f8fa);
}

.help-demo-panel-body img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 10px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
  object-fit: contain;
}

[data-theme="dark"] .help-demo-panel-body {
  background: #0a0a16;
}

[data-theme="dark"] .help-demo-panel-body img {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .help-demo-panel {
    width: 100vw;
    border-left: none;
  }

  .help-popover {
    width: calc(100vw - 24px);
    max-width: 340px;
  }

  .help-mode-pill span {
    display: none;
  }

  .help-mode-pill {
    padding: 4px 7px;
  }
}