@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Manrope:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --font-sans: 'Manrope', sans-serif;
  --font-display: 'DM Serif Display', serif;
  --font-mono: 'IBM Plex Mono', monospace;
  --background-color: #F8F6F1;
  --background-pattern: #EDE9E0;
  --text-color: #1B1B1B;
  --text-muted: #6B6560;
  --brand-primary: #C2410C;
  --brand-accent: #0D9488;
  --pane-background: #ffffff;
  --pane-heading-background: rgba(248, 246, 241, 0.9);
  --pane-heading-color: #1B1B1B;
  --button-background: #F0ECE4;
  --button-color: #1B1B1B;
  --border-color: rgba(0, 0, 0, 0.08);
  --toolbar-background: rgba(248, 246, 241, 0.7);
  --code-background: #F0ECE4;
  --table-border-color: rgba(27, 27, 27, 0.3);
  --table-header-background: #F5F2EC;
  --shadow-soft: 0 4px 16px rgba(0, 0, 0, 0.05);
  --toggle-hover: rgba(194, 65, 12, 0.1);
  --base-font-size: 16px;
  --copy-hint-outline: #93c5fd;
  --copy-hint-bg: #dbeafe;
  --copy-hint-chip-bg: #e0f2fe;
  --copy-hint-text: #1e3a8a;
  --laser-color: #22c55e;
  --laser-color-rgb: 34, 197, 94;
}

[data-theme="dark"] {
  --background-color: #111110;
  --background-pattern: #1A1A18;
  --text-color: #EDEBE8;
  --text-muted: #9C9890;
  --brand-primary: #FB923C;
  --brand-accent: #5EEAD4;
  --pane-background: #1A1A19;
  --pane-heading-background: rgba(17, 17, 16, 0.9);
  --pane-heading-color: #EDEBE8;
  --button-background: #2A2A28;
  --button-color: #EDEBE8;
  --border-color: rgba(255, 255, 255, 0.08);
  --toolbar-background: rgba(17, 17, 16, 0.6);
  --code-background: #242422;
  --table-border-color: rgba(255, 255, 255, 0.15);
  --table-header-background: #222220;
  --code-text-color: #f8f8f2;
  --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.35);
  --toggle-hover: rgba(251, 146, 60, 0.15);
  --copy-hint-outline: #7dd3fc;
  --copy-hint-bg: #dbeafe;
  --copy-hint-chip-bg: #e0f2fe;
  --copy-hint-text: #1e3a8a;
  --laser-color: #22c55e;
  --laser-color-rgb: 34, 197, 94;
}

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100svh;
  height: 100dvh;
  min-height: 100vh;
  margin: 0;
  font-family: var(--font-sans);
  line-height: 1.5;
  background-color: var(--background-color);
  background-image: radial-gradient(var(--background-pattern) 1px, transparent 1px);
  background-size: 28px 28px;
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s;
}

html,
body {
  overflow-x: hidden;
}

body.history-modal-open {
  overflow: hidden;
  overscroll-behavior: none;
}

a {
  color: var(--brand-primary);
  text-decoration: none;
}

a:hover {
  color: var(--brand-primary);
  text-decoration: underline;
}

a:visited {
  color: var(--brand-primary);
}

/* ---------------------------------------------------------------------- */
/* Main container for both the input and output panes                     */
/* ---------------------------------------------------------------------- */
#editorContainer {
  display: flex;
  flex: 1;
  background-color: var(--pane-background);
  height: 100%;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  box-shadow: var(--shadow-soft);
}

/* ---------------------------------------------------------------------- */
/* Left Pane = Markdown Input; Right Pane = Rendered Output               */
/* Each is 50% width on larger screens                                   */
/* ---------------------------------------------------------------------- */
#inputPane,
#outputPane {
  flex: 1 1 50%;
  padding: 0;
  box-sizing: border-box;
  background-color: var(--pane-background);
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 240px;
  border: none;
  position: relative;
  --present-zoom: 1;
}

#inputPane {
  border-right: 1px solid var(--border-color);
}


/* Native fullscreen (standard) */
#outputPane:fullscreen {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  border: none;
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}

#outputPane:fullscreen .pane-heading-container,
#outputPane:fullscreen .buttonContainer.floating-toolbar {
  display: none;
}

#outputPane:fullscreen #renderedOutput {
  padding: 24px;
}

/* Native fullscreen (webkit prefix for older Safari / iPadOS) */
#outputPane:-webkit-full-screen {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  border: none;
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}

#outputPane:-webkit-full-screen .pane-heading-container,
#outputPane:-webkit-full-screen .buttonContainer.floating-toolbar {
  display: none;
}

#outputPane:-webkit-full-screen #renderedOutput {
  padding: 24px;
}

/* Pseudo-fullscreen fallback (iPadOS without Fullscreen API) */
#outputPane.pseudo-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100svh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  border: none;
  z-index: 9999;
  background: var(--background-color);
  overflow-y: auto;
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}

#outputPane.pseudo-fullscreen .pane-heading-container,
#outputPane.pseudo-fullscreen .buttonContainer.floating-toolbar {
  display: none;
}

#outputPane.pseudo-fullscreen #renderedOutput {
  padding: 24px;
}

#outputPane:fullscreen #renderedOutput,
#outputPane:-webkit-full-screen #renderedOutput,
#outputPane.pseudo-fullscreen #renderedOutput {
  transform: scale(var(--present-zoom));
  transform-origin: top left;
  width: calc(100% / var(--present-zoom));
}

/* ---------------------------------------------------------------------- */
/* Fullscreen present controls (floating buttons)                          */
/* ---------------------------------------------------------------------- */
.present-controls {
  display: none;
}

#outputPane:fullscreen .present-controls {
  display: flex;
  gap: 8px;
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 40;
  opacity: 0;
  transition: opacity 0.25s ease;
}

#outputPane:fullscreen:hover .present-controls,
#outputPane:fullscreen .present-controls:focus-within {
  opacity: 1;
}

/* webkit prefix present controls */
#outputPane:-webkit-full-screen .present-controls {
  display: flex;
  gap: 8px;
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 40;
  opacity: 0;
  transition: opacity 0.25s ease;
}

#outputPane:-webkit-full-screen:hover .present-controls,
#outputPane:-webkit-full-screen .present-controls:focus-within {
  opacity: 1;
}

@media (hover: none) {
  #outputPane:fullscreen .present-controls,
  #outputPane:-webkit-full-screen .present-controls {
    opacity: 1;
  }
}

/* Pseudo-fullscreen present controls (always visible on touch devices) */
#outputPane.pseudo-fullscreen .present-controls {
  display: flex;
  gap: 8px;
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 10000;
  opacity: 1;
}

.present-btn {
  padding: 6px 14px;
  font-size: 0.85rem;
  cursor: pointer;
  background: var(--toolbar-background);
  color: var(--text-color);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  transition: background-color 0.3s, color 0.3s, opacity 0.25s ease;
}

.present-btn.laser-active {
  box-shadow: 0 0 8px 2px rgba(34, 197, 94, 0.6);
  border-color: #22c55e;
}

.present-controls .present-zoom-selector {
  padding: 6px 12px;
  font-size: 0.75rem;
}

.present-controls .present-zoom-selector label,
.present-controls .present-zoom-selector select {
  font-size: 0.75rem;
}

/* ---------------------------------------------------------------------- */
/* Laser pointer dot                                                       */
/* ---------------------------------------------------------------------- */
.laser-cursor-hidden,
.laser-cursor-hidden *,
body.laser-cursor-hidden,
body.laser-cursor-hidden *,
#outputPane.laser-cursor-hidden,
#outputPane.laser-cursor-hidden * {
  cursor: none !important;
}

.laser-pointer {
  display: none;
  position: fixed;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--laser-color);
  box-shadow:
    0 0 3px 1px rgba(var(--laser-color-rgb), 0.75),
    0 0 7px 2.8px rgba(var(--laser-color-rgb), 0.45),
    0 0 12px 4px rgba(var(--laser-color-rgb), 0.2);
  pointer-events: none;
  z-index: 100000;
  transform: translate(-50%, -50%);
}

.laser-canvas {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 99999;
}

/* ---------------------------------------------------------------------- */
/* Header container for each pane                                         */
/* ---------------------------------------------------------------------- */
.pane-heading-container {
  display: grid;
  grid-template-columns: 50px 1fr 50px;
  height: 44px;
  align-items: center;
  background-color: var(--pane-heading-background);
  color: var(--pane-heading-color);
  margin: 0;
  padding: 0 12px;
  border-bottom: 1px solid var(--border-color);
  backdrop-filter: blur(10px);
}

textarea:focus {
  outline: none;
}

.logo-container img {
  max-height: 30px;
  margin: 0 auto 0 0;
  display: block;
}

.heading-placeholder,
.theme-toggle-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pane-heading {
  text-align: center;
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
  font-family: var(--font-display);
  letter-spacing: 0.2px;
  color: var(--pane-heading-color);
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ---------------------------------------------------------------------- */
/* Theme toggle button                                                    */
/* ---------------------------------------------------------------------- */
.theme-toggle-button {
  background: none;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
  min-height: 38px;
  min-width: 38px;
  padding: 0.35rem;
  color: var(--pane-heading-color);
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.theme-toggle-button:hover {
  background-color: var(--toggle-hover);
  transform: rotate(15deg);
}

/* ---------------------------------------------------------------------- */
/* Button container under pane headers                                    */
/* ---------------------------------------------------------------------- */
.buttonContainer {
  margin: 8px 0;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  position: relative;
  flex-wrap: wrap;
}

.buttonContainer.floating-toolbar {
  position: sticky;
  top: 12px;
  z-index: 20;
  margin: 8px 12px;
  padding: 8px 12px;
  background: var(--toolbar-background);
  border-radius: 999px;
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-soft);
}



/* Insert menu (combines Math + Table + Image) */
.insert-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.insert-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  border-radius: 10px;
  background: var(--pane-background);
  box-shadow: var(--shadow-soft);
  z-index: 30;
  min-width: 120px;
}

.insert-panel[hidden] {
  display: none;
}

.insert-math-group {
  position: relative;
}

.insert-panel-item {
  display: block;
  width: 100%;
  padding: 7px 14px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--text-color);
  font-size: 0.85rem;
  text-align: center;
  cursor: default;
}

.insert-has-submenu {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: background 0.15s;
}

.insert-chevron {
  position: absolute;
  right: 10px;
  font-size: 1rem;
  line-height: 1;
  color: var(--text-muted);
}

.insert-submenu {
  position: absolute;
  left: calc(100% - 2px);
  top: -6px;
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  border-radius: 10px;
  background: var(--pane-background);
  box-shadow: var(--shadow-soft);
  min-width: 120px;
  z-index: 31;
}

.insert-action-btn {
  display: block;
  width: 100%;
  padding: 7px 14px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--text-color);
  font-size: 0.85rem;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s;
}

.insert-action-btn:hover {
  background: var(--button-background);
}

/* Desktop: show math submenu on hover */
@media (hover: hover) {
  .insert-has-submenu:hover {
    background: var(--button-background);
  }

  .insert-math-group:hover .insert-submenu {
    display: flex;
  }
}

/* Touch devices: flat inline layout, no hover submenu */
@media (hover: none) {
  .insert-chevron {
    display: none;
  }

  .insert-has-submenu {
    justify-content: center;
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--text-muted);
    padding: 4px 14px 2px;
  }

  .insert-submenu {
    position: static;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0;
    box-shadow: none;
    border-radius: 0;
    background: transparent;
    min-width: 0;
  }

  .insert-math-group {
    border-bottom: none;
    padding-bottom: 4px;
    margin-bottom: 2px;
  }
}

/* Font-size toggle menu (mirrors insert-menu) */
.font-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.font-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  border-radius: 10px;
  background: var(--pane-background);
  box-shadow: var(--shadow-soft);
  z-index: 30;
  min-width: 120px;
}

.font-panel[hidden] {
  display: none;
}

.font-option-btn {
  display: block;
  width: 100%;
  padding: 5.5px 12.5px;
  border: 1.5px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--text-color);
  font-size: 0.85rem;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s, border-color 0.2s, color 0.2s;
}

.font-option-btn:hover {
  background: var(--button-background);
}

.font-option-btn.active {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
  background: rgba(194, 65, 12, 0.08);
}

[data-theme="dark"] .font-option-btn.active {
  border-color: rgba(251, 146, 60, 0.7);
  background: rgba(251, 146, 60, 0.15);
}

@media (max-width: 600px) {
  .insert-menu,
  .font-menu {
    width: auto;
    justify-content: stretch;
    flex: 1 1 calc((100% - 6px) / 2);
    min-width: 0;
  }

  #insertMenu {
    order: 20;
  }

  #fontMenu {
    order: 22;
  }

  #insertButton,
  #fontButton {
    width: 100%;
    min-width: 0;
    padding: 0.38rem 0.45rem;
    font-size: 0.72rem;
  }

  .insert-panel,
  .font-panel {
    left: 50%;
    right: auto;
  }
}
.buttonContainer.output-controls {
  width: 100%;
  justify-content: space-between;
  flex-wrap: nowrap;
  padding: 0 12px;
}

.buttonContainer.floating-toolbar.output-controls {
  width: calc(100% - 24px);
  padding: 8px 12px;
}

.buttonContainer.output-controls .output-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin: 0 auto;
}

.buttonContainer.output-controls .output-toggles {
  display: inline-flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
}

[data-theme="dark"] .buttonContainer button {
  background-color: var(--button-background);
  color: var(--button-color);
  border: none;
}

.scroll-sync-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8rem;
  color: var(--text-color);
  cursor: pointer;
  user-select: none;
  position: relative;
}

.scroll-sync-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.scroll-sync-toggle .toggle-slider {
  position: relative;
  width: 38px;
  height: 20px;
  border-radius: 999px;
  background: #C4BFB6;
  transition: background-color 0.2s ease;
  display: inline-flex;
  align-items: center;
  padding: 2px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .scroll-sync-toggle .toggle-slider {
  background: #4A4A46;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.scroll-sync-toggle .toggle-slider::after {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.scroll-sync-toggle input:checked + .toggle-slider {
  background: var(--brand-accent);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}

.scroll-sync-toggle input:checked + .toggle-slider::after {
  transform: translateX(18px);
}

.scroll-sync-toggle .toggle-label {
  font-weight: 600;
}

.font-size-selector {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background-color: var(--button-background);
  border: 1px solid var(--border-color);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  font-size: 0.8rem;
  color: var(--text-color);
}

.font-size-selector label {
  font-weight: 600;
  color: var(--text-color);
}

.font-size-selector select {
  border: none;
  background: transparent;
  font-size: 0.8rem;
  color: var(--text-color);
  font-weight: 400;
  cursor: pointer;
  outline: none;
}

[data-theme="dark"] .font-size-selector {
  background-color: var(--button-background);
  border-color: transparent;
}

/* ---------------------------------------------------------------------- */
/* Markdown input textarea                                                */
/* ---------------------------------------------------------------------- */
textarea {
  flex: 1;
  width: 100%;
  padding: 18px;
  border: none;
  resize: none;
  font-size: var(--base-font-size);
  line-height: 1.5;
  box-sizing: border-box;
  overflow-y: auto;
  background-color: var(--pane-background);
  color: var(--text-color);
}

/* ---------------------------------------------------------------------- */
/* Rendered output area                                                   */
/* ---------------------------------------------------------------------- */
#renderedOutput {
  flex: 1;
  padding: 18px;
  font-size: var(--base-font-size);
  line-height: 1.5;
  box-sizing: border-box;
  overflow-y: auto;
  background-color: var(--pane-background);
  color: var(--text-color);
  position: relative;
  z-index: 0;
}

#renderedOutput img {
  max-width: 100%;
  height: auto;
}

#renderedOutput ul:has(> .task-list-item) {
  padding-left: 0;
  list-style: none;
}

#renderedOutput .task-list-item {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0.5em;
}

#renderedOutput .task-list-item > * {
  margin-top: 0;
  margin-bottom: 0;
}

#renderedOutput .task-list-item input[type="checkbox"] {
  /* (line-height 1.5em − checkbox 1.1em) / 2 ≈ 0.2em centres with first text line */
  margin-top: 0.2em;
  flex-shrink: 0;
  width: 1.1em;
  height: 1.1em;
  accent-color: var(--brand-primary);
  cursor: default;
}

/* ---------------------------------------------------------------------- */
/* Code blocks and syntax highlighting                                    */
/* ---------------------------------------------------------------------- */
code {
  background-color: var(--code-background);
  padding: 0.1em 0.2em;
  border-radius: 3px;
  font-size: 0.95em;
  line-height: 1;
  font-family: var(--font-mono);
  vertical-align: baseline;
  color: inherit;
}

pre {
  background-color: var(--code-background);
  padding: 0;
  border-radius: 5px;
  overflow-x: auto;
  overflow-y: visible;
  font-size: 0.95em;
  line-height: 1.5;
  margin: 2px 0;
}

pre code {
  background: none;
  padding: 0;
  border-radius: 0;
  font-family: inherit;
  line-height: 1.5;
  font-size: inherit;
  color: inherit;
}

.hljs {
  line-height: 1.5;
  font-size: 0.95em;
  background-color: inherit;
  color: inherit;
}

[data-theme="dark"] .hljs {
  color: var(--code-text-color);
}

[data-theme="dark"] .hljs-comment,
[data-theme="dark"] .hljs-quote {
  color: #8d9a70 !important;
}

[data-theme="dark"] .hljs-keyword,
[data-theme="dark"] .hljs-selector-tag,
[data-theme="dark"] .hljs-subst {
  color: #66d9ef !important;
}

[data-theme="dark"] .hljs-string,
[data-theme="dark"] .hljs-doctag {
  color: #e6db74 !important;
}

[data-theme="dark"] .hljs-number,
[data-theme="dark"] .hljs-regexp,
[data-theme="dark"] .hljs-tag .hljs-attr {
  color: #ae81ff !important;
}

[data-theme="dark"] .hljs-title,
[data-theme="dark"] .hljs-section {
  color: #a6e22e !important;
}

[data-theme="dark"] .hljs-type,
[data-theme="dark"] .hljs-built_in {
  color: #fd971f !important;
}

[data-theme="dark"] .hljs-symbol,
[data-theme="dark"] .hljs-bullet {
  color: #f92672 !important;
}

[data-theme="dark"] .hljs-link {
  color: #e6db74 !important;
}

/* ---------------------------------------------------------------------- */
/* Table styling                                                          */
/* ---------------------------------------------------------------------- */
table {
  max-width: 100%;
  margin: 20px auto;
  border-collapse: collapse;
  border: 1px solid var(--table-border-color);
}

th,
td {
  border: 1px solid var(--table-border-color);
  padding: 8px 10px;
  text-align: left;
}

th[align="left"],
td[align="left"] {
  text-align: left;
}

th[align="center"],
td[align="center"] {
  text-align: center;
}

th[align="right"],
td[align="right"] {
  text-align: right;
}

/* ---------------------------------------------------------------------- */
/* Printing styles                                                        */
/* ---------------------------------------------------------------------- */
@page {
  size: A4;
  margin: 20mm 15mm;
}

@media print {
  :root {
    --background-color: #ffffff !important;
    --text-color: #000000 !important;
    --pane-background: #ffffff !important;
    --pane-heading-background: #333333 !important;
    --pane-heading-color: #ffffff !important;
    --button-background: #f0f0f0 !important;
    --button-color: #000000 !important;
    --border-color: #ccc !important;
    --code-background: #f0f0f0 !important;
    --table-border-color: black !important;
    --table-header-background: #f4f4f4 !important;
  }

  body,
  [data-theme="dark"] {
    --background-color: #ffffff !important;
    --text-color: #000000 !important;
    --pane-background: #ffffff !important;
    --pane-heading-background: #333333 !important;
    --pane-heading-color: #ffffff !important;
    --button-background: #f0f0f0 !important;
    --button-color: #000000 !important;
    --border-color: #ccc !important;
    --code-background: #f0f0f0 !important;
    --table-border-color: black !important;
    --table-header-background: #f4f4f4 !important;
    background-color: #ffffff !important;
    color: #000000 !important;
    color-scheme: light !important;
  }

  body {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    margin: 0 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    background-image: none !important;
  }

  #editorContainer {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
    border: none !important;
    box-shadow: none !important;
  }

  #inputPane,
  #inputPane.mobile-hidden {
    display: none !important;
  }

  #outputPane,
  #outputPane.mobile-hidden {
    display: block !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
  }

  .mobile-tab-bar {
    display: none !important;
  }

  #renderedOutput {
    max-width: 180mm !important;
    margin: 0 auto !important;
    padding: 0 !important;
    font-size: var(--print-font-size, 11pt) !important;
    height: auto !important;
    overflow: visible !important;
  }

  .pane-heading-container {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .no-print {
    display: none !important;
  }

  svg,
  pre {
    page-break-inside: avoid !important;
    line-height: 1.5 !important;
  }

  footer {
    display: none !important;
  }

  .page-break {
    display: block;
    page-break-after: always;
    height: 0;
  }

  svg {
    color: #000000 !important;
    stroke: #000000 !important;
  }

  pre {
    background-color: #f0f0f0 !important;
    font-size: 0.95em !important;
    margin: 2px 0 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .hljs {
    color: #000000 !important;
    line-height: 1.5 !important;
    font-size: 0.95em !important;
    background-color: inherit !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .hljs-comment,
  .hljs-quote {
    color: #008000 !important;
  }

  th,
  td {
    text-align: left !important;
  }

  th[align="center"],
  td[align="center"] {
    text-align: center !important;
  }

  th[align="right"],
  td[align="right"] {
    text-align: right !important;
  }
}

/* ---------------------------------------------------------------------- */
/* Buttons and footer                                                     */
/* ---------------------------------------------------------------------- */
footer {
  text-align: center;
  padding: 6px;
  background: var(--pane-heading-background);
  color: var(--text-muted);
  margin: 0;
  width: 100%;
  border-top: 1px solid var(--border-color);
  font-size: 0.75rem;
}

[data-theme="dark"] footer {
  background: var(--pane-heading-background);
  color: var(--text-muted);
}

button {
  margin: 2px;
  padding: 6px 10px;
  font-size: 0.8rem;
  cursor: pointer;
  background-color: var(--button-background);
  color: var(--button-color);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  transition: background-color 0.3s, color 0.3s;
}

button:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}

/* ==========================================================================
 RESPONSIVE RULES
 ========================================================================== */

/* ---------------------------------------------------------------------- */
/* Mobile tab bar                                                          */
/* ---------------------------------------------------------------------- */
.mobile-tab-bar {
  display: none;
}

.mobile-tab-bar-logo img {
  height: 28px;
  display: block;
}

.mobile-tab-bar-tabs {
  display: flex;
  background: var(--button-background);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}

.mobile-tab {
  padding: 6px 20px;
  font-size: 0.85rem;
  font-weight: 600;
  font-family: var(--font-display);
  border: none;
  background: transparent;
  color: var(--text-muted);
  border-radius: 999px;
  cursor: pointer;
  margin: 0;
  box-shadow: none;
  transition: background-color 0.2s, color 0.2s;
}

.mobile-tab.active {
  background: var(--brand-primary);
  color: #fff;
  box-shadow: 0 2px 6px rgba(194, 65, 12, 0.3);
}

[data-theme="dark"] .mobile-tab.active {
  box-shadow: 0 2px 6px rgba(251, 146, 60, 0.3);
}

/* 1) For narrow screens, show tab bar and switch panes */
@media (max-width: 900px) {
  .mobile-tab-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px;
    background-color: var(--pane-heading-background);
    border-bottom: 1px solid var(--border-color);
    backdrop-filter: blur(10px);
  }

  /* Hide individual pane headings — tab bar replaces them */
  .pane-heading-container {
    display: none !important;
  }

  #editorContainer {
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
  }

  #inputPane,
  #outputPane {
    width: 100%;
    border-right: none;
    flex: 1 1 0;
    min-height: 0;
    min-width: 0;
  }

  /* Hide inactive pane on mobile */
  #inputPane.mobile-hidden,
  #outputPane.mobile-hidden {
    display: none !important;
  }

  .buttonContainer.floating-toolbar {
    margin: 6px 8px;
    padding: 6px 8px;
    gap: 6px;
  }
}

/* 2) Wrap and resize the buttons when space is too narrow */
@media (max-width: 600px) {
  .buttonContainer {
    flex-wrap: wrap;
    justify-content: center;
  }

  .buttonContainer.floating-toolbar {
    border-radius: 16px;
  }

  .buttonContainer.output-controls {
    flex-wrap: wrap;
  }

  .buttonContainer.output-controls .output-actions {
    margin: 0;
  }

  .buttonContainer button {
    flex: 1 0 auto;
    margin: 2px;
    min-width: 80px;
    font-size: 0.75rem;
  }

  .scroll-sync-toggle {
    gap: 6px;
    font-size: 0.7rem;
  }

  .scroll-sync-toggle .toggle-slider {
    width: 32px;
    height: 18px;
  }

  .scroll-sync-toggle .toggle-slider::after {
    width: 14px;
    height: 14px;
  }

  .scroll-sync-toggle input:checked + .toggle-slider::after {
    transform: translateX(14px);
  }
}

@media (pointer: coarse) {
  button,
  input,
  select {
    min-height: 44px;
    touch-action: manipulation;
  }

  textarea {
    touch-action: manipulation;
  }

  .buttonContainer button {
    padding: 0.5rem 0.7rem;
  }

  .mobile-tab {
    min-height: 44px;
  }
}

@media (pointer: coarse) and (max-width: 600px) {
  .buttonContainer button {
    min-height: 38px;
    padding: 0.4rem 0.6rem;
  }
}

.offline-font {
  --font-sans: 'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* Click-to-copy for equations */
mjx-container {
  cursor: pointer;
  position: relative;
  transition: box-shadow 0.15s ease;
  border-radius: 8px;
}

mjx-container:hover {
  box-shadow: 0 0 0 2px var(--copy-hint-outline);
}

mjx-container::after {
  content: "Click to copy image";
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--copy-hint-chip-bg);
  color: var(--copy-hint-text);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-family: var(--font-sans);
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 100;
}

/* Table tooltip */
#renderedOutput table::before {
  content: "Click to copy table";
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--copy-hint-chip-bg);
  color: var(--copy-hint-text);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-family: var(--font-sans);
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 100;
}

#renderedOutput table.math-copy-table::before {
  content: none;
}

#renderedOutput table {
  position: relative;
}

#renderedOutput table:hover::before {
  opacity: 1;
}

#renderedOutput table.math-copy-table:hover::before {
  opacity: 0;
}

mjx-container:hover::after {
  opacity: 1;
}

/* Copy feedback animation */
mjx-container.copied {
  box-shadow: 0 0 0 2px #22c55e !important;
}

mjx-container.copied::after {
  content: "Copied!" !important;
  background: #22c55e !important;
  opacity: 1 !important;
}

mjx-container.copy-failed {
  box-shadow: 0 0 0 2px #ef4444 !important;
}

mjx-container.copy-failed::after {
  content: "Copy failed" !important;
  background: #ef4444 !important;
  opacity: 1 !important;
}

/* Table click-to-copy */
#renderedOutput table {
  cursor: pointer;
  transition: box-shadow 0.15s ease;
  border-radius: 8px;
}

#renderedOutput table:hover {
  box-shadow: 0 0 0 2px var(--copy-hint-outline);
}

#renderedOutput table.copied {
  box-shadow: 0 0 0 2px #22c55e !important;
}

#renderedOutput table.copied::before {
  content: "Copied!" !important;
  background: #22c55e !important;
  opacity: 1 !important;
}

#renderedOutput table.table-copy-actions-open {
  box-shadow: 0 0 0 2px var(--copy-hint-outline);
}

.touch-copy-target-active {
  box-shadow: 0 0 0 2px var(--copy-hint-outline) !important;
}

/* Code block styling */
#renderedOutput pre {
  margin-top: 20px;
  border-radius: 8px;
}

#renderedOutput pre code {
  display: block;
  overflow-x: auto;
  padding: 12px;
}

#renderedOutput table.copy-failed {
  box-shadow: 0 0 0 2px #ef4444 !important;
}

#renderedOutput table.copy-failed::before {
  content: "Copy failed" !important;
  background: #ef4444 !important;
  opacity: 1 !important;
}

/* ---------------------------------------------------------------------- */
/* Disable click-to-copy visual cues in present mode                      */
/* ---------------------------------------------------------------------- */

/* Native fullscreen */
#outputPane:fullscreen mjx-container,
#outputPane:fullscreen #renderedOutput table {
  cursor: default;
}

#outputPane:fullscreen mjx-container:hover,
#outputPane:fullscreen #renderedOutput table:hover {
  box-shadow: none;
}

#outputPane:fullscreen mjx-container:hover::after,
#outputPane:fullscreen #renderedOutput table:hover::before {
  opacity: 0;
}

/* Webkit fullscreen */
#outputPane:-webkit-full-screen mjx-container,
#outputPane:-webkit-full-screen #renderedOutput table {
  cursor: default;
}

#outputPane:-webkit-full-screen mjx-container:hover,
#outputPane:-webkit-full-screen #renderedOutput table:hover {
  box-shadow: none;
}

#outputPane:-webkit-full-screen mjx-container:hover::after,
#outputPane:-webkit-full-screen #renderedOutput table:hover::before {
  opacity: 0;
}

/* Pseudo-fullscreen fallback */
#outputPane.pseudo-fullscreen mjx-container,
#outputPane.pseudo-fullscreen #renderedOutput table {
  cursor: default;
}

#outputPane.pseudo-fullscreen mjx-container:hover,
#outputPane.pseudo-fullscreen #renderedOutput table:hover {
  box-shadow: none;
}

#outputPane.pseudo-fullscreen mjx-container:hover::after,
#outputPane.pseudo-fullscreen #renderedOutput table:hover::before {
  opacity: 0;
}

/* Math table quick-copy actions */
.table-copy-actions {
  position: absolute;
  z-index: 1100;
  min-width: max-content;
  max-width: min(92vw, 280px);
  padding: 6px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: var(--pane-background);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 0.12s ease, transform 0.12s ease;
}

.table-copy-actions[hidden] {
  display: none;
}

.table-copy-actions.visible {
  opacity: 1;
  transform: translateY(0);
}

.table-copy-actions-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.table-copy-action-btn {
  min-height: 0;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--copy-hint-outline);
  font-size: 11px;
  line-height: 1.2;
  font-weight: 400;
  font-family: var(--font-sans);
  white-space: nowrap;
  cursor: pointer;
}

.table-copy-action-btn-table {
  border-color: var(--copy-hint-outline);
  background: var(--copy-hint-chip-bg);
  color: var(--copy-hint-text);
}

.table-copy-action-btn-image {
  border-color: var(--copy-hint-outline);
  background: var(--copy-hint-chip-bg);
  color: var(--copy-hint-text);
}

.table-copy-action-btn:hover {
  filter: brightness(0.98);
}

.table-copy-action-btn:focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: 2px;
}

.table-copy-actions-warning {
  margin: 0 2px 0 2px;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--text-muted);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: opacity 0.12s ease, max-height 0.12s ease, margin-top 0.12s ease;
}

.table-copy-actions-warning.visible {
  margin-top: 7px;
  max-height: 3em;
  opacity: 1;
}

@media (pointer: coarse) {
  .table-copy-action-btn {
    padding: 4px 10px;
    font-size: 11px;
  }

  .touch-copy-actions .table-copy-action-btn {
    min-height: 40px;
    padding: 8px 12px;
    font-size: 0.8rem;
  }
}

@media (hover: none), (pointer: coarse) {
  mjx-container:hover::after,
  #renderedOutput table:hover::before {
    opacity: 0;
  }
}

/* ---------------------------------------------------------------------- */
/* Export filename modal                                                  */
/* ---------------------------------------------------------------------- */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  overscroll-behavior: contain;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.modal-overlay.visible {
  opacity: 1;
  visibility: visible;
}

.modal-content {
  background: var(--pane-background);
  border-radius: 12px;
  padding: 24px;
  min-width: 320px;
  max-width: 90%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  transform: scale(0.9);
  transition: transform 0.2s ease;
}

.modal-overlay.visible .modal-content {
  transform: scale(1);
}

.modal-title {
  margin: 0 0 16px 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-color);
}

.modal-input {
  width: 100%;
  padding: 10px 12px;
  font-size: 0.95rem;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--button-background);
  color: var(--text-color);
  margin-bottom: 16px;
  box-sizing: border-box;
}

.modal-field-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.modal-input:focus {
  outline: 2px solid var(--brand-accent);
  outline-offset: 1px;
}

.image-modal {
  width: min(92vw, 430px);
}

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

.image-modal-header .modal-title {
  margin-bottom: 0;
}

.image-modal-help {
  position: relative;
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--text-muted) 40%, transparent);
  background: transparent;
  color: color-mix(in srgb, var(--text-muted) 60%, transparent);
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
  transition: border-color 0.15s, color 0.15s;
  opacity: 0.7;
}

.image-modal-help:hover,
.image-modal-help:focus-visible {
  opacity: 1;
  border-color: var(--text-muted);
  color: var(--text-muted);
}

.image-modal-tooltip {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: -8px;
  width: 240px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--pane-background);
  color: var(--text-color);
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.45;
  text-align: left;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border-color);
  z-index: 10;
  pointer-events: none;
}

.image-modal-help:hover .image-modal-tooltip,
.image-modal-help:focus-visible .image-modal-tooltip,
.image-modal-help:active .image-modal-tooltip {
  display: block;
}

.image-align-group {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}

.image-align-option {
  position: relative;
  display: block;
}

.image-align-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.image-align-option span {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--button-background);
  color: var(--text-color);
  text-align: center;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.image-align-option:hover span {
  border-color: var(--brand-accent);
}

.image-align-option input:focus-visible + span {
  outline: 2px solid var(--brand-accent);
  outline-offset: 1px;
}

.image-align-option input:checked + span {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
  background: rgba(194, 65, 12, 0.08);
}

[data-theme="dark"] .image-align-option input:checked + span {
  border-color: rgba(251, 146, 60, 0.7);
  background: rgba(251, 146, 60, 0.15);
}

.modal-slider-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.modal-slider-header .modal-field-label {
  margin-bottom: 0;
}

.modal-slider-value {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-color);
}

.modal-slider {
  width: 100%;
  margin: 0 0 14px 0;
  accent-color: var(--brand-primary);
  cursor: pointer;
}

.modal-error {
  margin: 0 0 14px 0;
  min-height: 1.1em;
  font-size: 0.82rem;
  line-height: 1.4;
  color: #dc2626;
}

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

.modal-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.modal-buttons button {
  padding: 8px 16px;
  font-size: 0.85rem;
  border-radius: 8px;
}

.modal-buttons .btn-primary {
  background: var(--brand-primary);
  color: #fff;
  border: none;
}

.modal-buttons .btn-secondary {
  background: var(--button-background);
  color: var(--text-color);
}

.modal-message {
  margin: 0 0 16px 0;
  font-size: 0.95rem;
  color: var(--text-color);
  line-height: 1.5;
}

.modal-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  font-size: 0.85rem;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
}

.modal-checkbox {
  width: 16px;
  height: 16px;
  accent-color: var(--brand-primary);
  cursor: pointer;
  flex-shrink: 0;
}

@media (max-width: 480px) {
  .image-align-group {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------- */
/* Dirty-state indicator (dot next to Save button)                        */
/* ---------------------------------------------------------------------- */
.save-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.dirty-indicator {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f97316;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.dirty-indicator.visible {
  opacity: 1;
}

/* ---------------------------------------------------------------------- */
/* History / Snapshot modal                                                */
/* ---------------------------------------------------------------------- */
.history-modal {
  max-width: 520px;
  width: 90%;
}

.history-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.history-title-row .modal-title {
  margin: 0;
}

.history-clear-btn {
  font-size: 0.75rem !important;
  padding: 4px 10px !important;
}

.history-list {
  max-height: 400px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 3px;
  margin-bottom: 16px;
}

.history-modal.history-modal-single .history-list {
  padding-bottom: 30px;
}

.history-touch-hint {
  margin: 0 0 10px 0;
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.history-empty {
  color: var(--text-muted);
  font-size: 0.9rem;
  text-align: center;
  padding: 24px 0;
  margin: 0;
}

.history-item {
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--button-background);
  border: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  cursor: pointer;
}

.history-item::before {
  content: "Click to restore";
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--copy-hint-chip-bg);
  color: var(--copy-hint-text);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-family: var(--font-sans);
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 100;
}

.history-item::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 2px var(--copy-hint-outline);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.history-item:hover::before,
.history-item:focus-visible::before {
  opacity: 1;
}

.history-item:first-child::before {
  bottom: auto;
  top: calc(100% + 8px);
}

.history-item:hover::after,
.history-item:focus-visible::after {
  opacity: 1;
}

.history-item-selected::after {
  opacity: 1;
}

.history-item-selected {
  border-color: var(--copy-hint-outline);
}

.history-modal-touch .history-item::before {
  content: "Tap to select";
}

.history-restore-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.history-restore-btn:disabled:hover {
  filter: none;
}

.history-item-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.history-item-time {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-color);
}

.history-item-size {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.history-item-preview {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 8.4em;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-right: 6px;
  scrollbar-gutter: stable;
  font-family: var(--font-mono);
}

.history-modal.history-modal-multi .history-item-preview {
  max-height: 5.6em;
}

/* ---------------------------------------------------------------------- */
/* Restore undo toast                                                     */
/* ---------------------------------------------------------------------- */
.history-undo-toast {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translate(-50%, 10px);
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(92vw, 520px);
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: var(--pane-background);
  color: var(--text-color);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 1200;
}

.history-undo-toast.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.history-undo-toast-message {
  font-size: 0.82rem;
  line-height: 1.35;
}

.history-undo-toast-btn {
  min-height: 32px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--copy-hint-outline);
  background: var(--copy-hint-chip-bg);
  color: var(--copy-hint-text);
  font-size: 0.78rem;
  font-family: var(--font-sans);
  cursor: pointer;
  white-space: nowrap;
}

@media (pointer: coarse) {
  .history-undo-toast {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
    padding: 10px 12px;
    gap: 12px;
  }

  .history-undo-toast-btn {
    min-height: 40px;
    padding: 9px 14px;
  }
}

/* Keep these at the end so narrow-screen rules cannot re-hide the preview while printing. */
@media print {
  #inputPane.mobile-hidden {
    display: none !important;
  }

  #outputPane,
  #outputPane.mobile-hidden {
    display: block !important;
  }
}