```// ==UserScript==
// @name         codecurber mini-preview frames with auto-fit fullscreen expand
// @version      1.25
// @description  Replace all code blocks with compact mini-preview frames + unfold button. On unfold, auto fit fullscreen preview respecting viewport.
// @match        *://yuntian-deng-chatgpt.hf.space/*
// @match        *://yuntian-deng-o1mini.hf.space/*
// @match        *://yuntian-deng-chatgpt4.hf.space/*
// @match        *://yuntian-deng-o1.hf.space/*
// @grant        none
// ==/UserScript==

(function() {
  'use strict';

  const MIN_LINES = 1;    // Show mini preview if code has at least this many lines
  const MAX_PREVIEW_LINES = 5; // Lines visible in mini-preview frame
  const LINE_HEIGHT_PX = 19.2;

  // Add styles for mini-preview frames and overlays
  const style = document.createElement('style');
  style.textContent = `
    .mini-preview-container {
      position: relative;
      width: 100%;
      max-width: 600px;
      margin: 1em 0 1.5em;
      font-family: 'Press Start 2P', monospace;
      color: #39ff14;
      user-select: text;
    }

    .mini-preview-textarea {
      width: 100% !important;
      height: calc(${MAX_PREVIEW_LINES} * ${LINE_HEIGHT_PX}px);
      background: #0a1b0a !important;
      border: 1px solid #39ff14 !important;
      border-radius: 6px;
      padding: 10px !important;
      resize: none !important;
      overflow: hidden !important;
      white-space: pre !important;
      box-sizing: border-box !important;
      font-size: 0.85rem !important;
      cursor: text;
      outline: none;
      box-shadow:
        inset 0 0 10px #39ff14bb;
      caret-color: #6eff44 !important;
    }

    .mini-preview-btn {
      margin-top: 6px;
      padding: 6px 18px;
      background: #f00;
      border: 3px solid #39ff14;
      color: #39ff14;
      border-radius: 4px;
      font-family: 'Press Start 2P', monospace;
      cursor: pointer;
      text-shadow:
        1px 1px 0 #000,
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000;
      box-shadow:
        inset 0 0 2px #39ff14,
        0 0 12px #39ff1444;
      transition: background-color 0.15s ease, color 0.15s ease;
      user-select: none;
      align-self: flex-start;
    }
    .mini-preview-btn:hover {
      background: #39ff14;
      color: #0f0;
      box-shadow:
        inset 0 0 6px #fff,
        0 0 16px #39ff14;
    }

    .fullscreen-overlay {
      position: fixed !important;
      top: 50% !important;
      left: 50% !important;
      background: linear-gradient(135deg, #000000cc, #003300cc);
      box-shadow:
        0 0 30px #39ff14aa inset,
        0 0 50px #0f0f0f;
      border: 5px solid #39ff14;
      border-radius: 8px;
      padding: 1em;
      box-sizing: border-box;
      color: #39ff14;
      font-family: 'Press Start 2P', monospace;
      user-select: text;
      overflow: hidden;
      z-index: 1000000;
      display: flex;
      flex-direction: column;
      max-width: 97vw;
      max-height: 97vh;
      transform-origin: top left;
      transform: translate(-50%, -50%) scale(1);
    }

    .fullscreen-overlay textarea {
      width: 100% !important;
      height: 100% !important;
      background: #001100 !important;
      border: none !important;
      box-shadow:
        0 0 20px #39ff1499 inset !important;
      color: #39ff14 !important;
      caret-color: #6eff44 !important;
      resize: none !important;
      outline: none !important;
      overflow: auto !important;
      white-space: pre !important;
      font-family: 'Press Start 2P', monospace !important;
      box-sizing: border-box !important;
      user-select: text !important;
    }

    .fullscreen-close-btn {
      position: absolute !important;
      top: 10px !important;
      right: 10px !important;
      width: 40px !important;
      height: 40px !important;
      border-radius: 50% !important;
      border: 3px solid #39ff14 !important;
      background: #002200 !important;
      color: #39ff14 !important;
      font-size: 28px !important;
      line-height: 40px !important;
      text-align: center;
      cursor: pointer;
      z-index: 1000001;
      box-shadow:
        0 0 10px #39ff14cc,
        inset 0 0 6px #6eff44cc;
      user-select: none;
      transition: color 0.3s ease, background 0.3s ease;
    }
    .fullscreen-close-btn:hover {
      background: #39ff14 !important;
      color: #f00 !important;
      box-shadow:
        0 0 20px #39ff44ff,
        inset 0 0 12px #39ff66ff;
    }
  `;
  document.head.appendChild(style);

  // Replace code block with mini-preview container
  function replaceCodeBlock(codeEl) {
    if (codeEl.dataset.replaced === 'true') return;

    const text = codeEl.textContent || '';
    const lines = text.split('\n').length;
    if (lines < MIN_LINES) return;

    codeEl.dataset.replaced = 'true';

    const container = document.createElement('div');
    container.className = 'mini-preview-container';

    // Mini textarea preview cropped to MAX_PREVIEW_LINES
    const previewLines = text.split('\n').slice(0, MAX_PREVIEW_LINES).join('\n');
    const ta = document.createElement('textarea');
    ta.readOnly = true;
    ta.className = 'mini-preview-textarea';
    ta.value = previewLines.length < text.length ? previewLines + '\n…' : previewLines;
    container.appendChild(ta);

    // Button to expand full code
    const btn = document.createElement('button');
    btn.type = 'button';
    btn.className = 'mini-preview-btn';
    btn.textContent = 'Expand full code';
    container.appendChild(btn);

    // Hide original code block and insert new container
    const parent = codeEl.parentNode;
    if (!parent) return;
    parent.insertBefore(container, codeEl);
    codeEl.style.display = 'none';

    btn.addEventListener('click', () => openFullscreenOverlay(text));
  }

  function openFullscreenOverlay(fullText) {
    const overlay = document.createElement('div');
    overlay.className = 'fullscreen-overlay';

    const ta = document.createElement('textarea');
    ta.readOnly = true;
    ta.value = fullText;

    // Close button
    const closeBtn = document.createElement('button');
    closeBtn.className = 'fullscreen-close-btn';
    closeBtn.title = 'Close full code view';
    closeBtn.textContent = '×';

    overlay.appendChild(ta);
    overlay.appendChild(closeBtn);
    document.body.appendChild(overlay);

    // Autofocus and scroll top
    ta.focus();
    ta.scrollTop = 0;

    // Auto-scale overlay to fit viewport
    function scaleOverlay() {
      const viewportW = window.innerWidth * 0.97;
      const viewportH = window.innerHeight * 0.97;
      const paddingBorder = 50;

      // Temporarily set textarea to auto size
      ta.style.width = 'auto';
      ta.style.height = 'auto';

      // Measure scroll size for content
      const contentW = ta.scrollWidth;
      const contentH = ta.scrollHeight;

      // Compute scale factor
      const maxW = viewportW - paddingBorder;
      const maxH = viewportH - paddingBorder;
      const scaleX = maxW / contentW;
      const scaleY = maxH / contentH;
      const scale = Math.min(1, scaleX, scaleY);

      // Apply fixed container size and scale transform
      overlay.style.width = contentW + 'px';
      overlay.style.height = contentH + 'px';

      overlay.style.transform = `translate(-50%, -50%) scale(${scale})`;

      ta.style.width = contentW + 'px';
      ta.style.height = contentH + 'px';
    }

    scaleOverlay();

    // Update scale on window resize
    const onResize = () => scaleOverlay();
    window.addEventListener('resize', onResize);

    function cleanup() {
      window.removeEventListener('resize', onResize);
      overlay.remove();
      document.removeEventListener('keydown', onKey);
    }

    closeBtn.addEventListener('click', cleanup);

    function onKey(e) {
      if (e.key === 'Escape') cleanup();
    }
    document.addEventListener('keydown', onKey);
  }

  function replaceAllCodeBlocks() {
    const chat = document.querySelector('.bubble-wrap.svelte-gjtrl6');
    if (!chat) return;
    chat.querySelectorAll('code').forEach(replaceCodeBlock);
  }

  function observeChat() {
    const chat = document.querySelector('.bubble-wrap.svelte-gjtrl6');
    if (!chat) return;

    const observer = new MutationObserver(() => {
      replaceAllCodeBlocks();
    });
    observer.observe(chat, { childList: true, subtree: true });
  }

  const initInt = setInterval(() => {
    if (document.querySelector('.bubble-wrap.svelte-gjtrl6')) {
      clearInterval(initInt);
      replaceAllCodeBlocks();
      observeChat();
    }
  }, 300);
})();
```