```// ==UserScript==
// @name         codecurber with viewport-fit scalable full preview
// @version      1.24
// @description  Fold long code blocks; on expand, detach textarea with auto scale down to fit viewport preserving formatting
// @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 MAX_LINES = 10;
  const MIN_LINES = 6;
  const LINE_HEIGHT_PX = 19.2;

  // Inject styles
  const style = document.createElement('style');
  style.textContent = `
    .textarea-container {
      position: relative;
      margin: 1em 0 2.5em;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      z-index: 1;
    }
    .code-textarea {
      width: 100% !important;
      background: #1e1e1e !important;
      color: #39ff14 !important;
      border-radius: 6px !important;
      border: 1px solid #39ff14 !important;
      padding: 10px !important;
      resize: vertical !important;
      white-space: pre !important;
      overflow-y: auto !important;
      user-select: text !important;
      box-sizing: border-box !important;
      max-height: calc(${MAX_LINES} * ${LINE_HEIGHT_PX}px) !important;
      height: calc(${MAX_LINES} * ${LINE_HEIGHT_PX}px) !important;
      transition: box-shadow 0.3s ease;
      position: relative;
      z-index: 1;
      font-family: 'Press Start 2P', monospace !important;
      caret-color: #6eff44 !important;
    }

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

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

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

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

  function transformCodeBlock(codeEl) {
    if (codeEl.dataset.transformed === 'true') return;

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

    codeEl.dataset.transformed = 'true';

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

    // Try to hide .code_wrap parent if present (for clean replacement)
    const codeWrap = codeEl.closest('.code_wrap');
    if (codeWrap) {
      codeWrap.style.display = 'none';
      codeWrap.parentNode.insertBefore(container, codeWrap);
    } else {
      const parent = codeEl.parentNode;
      if (!parent) return;
      parent.insertBefore(container, codeEl);
    }

    container.appendChild(codeEl);

    const ta = document.createElement('textarea');
    ta.readOnly = true;
    ta.className = 'code-textarea';
    ta.value = text;
    ta.style.maxHeight = `${MAX_LINES * LINE_HEIGHT_PX}px`;
    ta.style.height = ta.style.maxHeight;

    container.appendChild(ta);

    const btn = document.createElement('button');
    btn.type = 'button';
    btn.className = 'fold-toggle-button';
    btn.textContent = 'Show full code';

    btn.addEventListener('click', () => openOverlay(ta, container));

    container.appendChild(btn);
  }

  function openOverlay(originalTA, originalContainer) {
    // Detach textarea from folded container
    const fullTA = originalTA.cloneNode(true);
    fullTA.readOnly = true;
    fullTA.className = '';
    fullTA.removeAttribute('style');
    fullTA.style.whiteSpace = 'pre';
    fullTA.style.fontFamily = "'Press Start 2P', monospace";
    fullTA.style.backgroundColor = '#001100';
    fullTA.style.color = '#39ff14';
    fullTA.style.caretColor = '#6eff44';
    fullTA.style.resize = 'none';
    fullTA.style.outline = 'none';
    fullTA.style.border = 'none';
    fullTA.style.boxShadow = '0 0 20px #39ff1499 inset';
    fullTA.style.userSelect = 'text';
    fullTA.style.width = 'auto';
    fullTA.style.height = 'auto';
    fullTA.style.overflow = 'auto';

    // Wrap in container for control + scaling
    const overlayContainer = document.createElement('div');
    overlayContainer.className = 'folded-overlay-container';

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

    overlayContainer.appendChild(fullTA);
    overlayContainer.appendChild(closeBtn);
    document.body.appendChild(overlayContainer);

    fullTA.focus();
    fullTA.scrollTop = 0;

    // Calculate natural size of textarea content (scroll size)
    // Temporarily append offscreen copy to measure natural size
    function getContentSize(taElem) {
      const div = document.createElement('div');
      const style = getComputedStyle(taElem);
      div.style.position = 'absolute';
      div.style.visibility = 'hidden';
      div.style.whiteSpace = 'pre';
      div.style.fontFamily = style.fontFamily;
      div.style.fontSize = style.fontSize;
      div.style.lineHeight = style.lineHeight;
      div.style.padding = style.padding;
      div.style.border = style.border;
      div.style.boxSizing = style.boxSizing;
      div.style.width = taElem.clientWidth + 'px';
      div.textContent = taElem.value;
      document.body.appendChild(div);
      const size = { width: div.offsetWidth, height: div.offsetHeight };
      document.body.removeChild(div);
      return size;
    }

    // Auto-scale overlay container to fit in viewport
    function scaleOverlay() {
      const viewportWidth = window.innerWidth * 0.97;
      const viewportHeight = window.innerHeight * 0.97;

      // Set width temporarily to 90vw for measuring height
      overlayContainer.style.width = viewportWidth + 'px';
      overlayContainer.style.height = 'auto';

      // Get content scroll size inside the textarea
      fullTA.style.width = 'auto';
      fullTA.style.height = 'auto';
      fullTA.rows = 1; // reset rows to auto

      // The textarea scroll size
      const scrollWidth = fullTA.scrollWidth;
      const scrollHeight = fullTA.scrollHeight;

      // Calculate scale factor to fit viewport (account for borders & padding ~40px)
      const paddingBorder = 50; // allowance for container padding, borders and button
      const maxWidth = viewportWidth - paddingBorder;
      const maxHeight = viewportHeight - paddingBorder;

      const scaleX = maxWidth / scrollWidth;
      const scaleY = maxHeight / scrollHeight;
      const scale = Math.min(1, scaleX, scaleY);

      // Apply scale transform and adjust origin
      overlayContainer.style.transform = `translate(-50%, -50%) scale(${scale})`;

      // Set fixed size for container to content size (scaled up), to keep scrollbars minimal
      overlayContainer.style.width = scrollWidth + 'px';
      overlayContainer.style.height = scrollHeight + 'px';

      fullTA.style.width = scrollWidth + 'px';
      fullTA.style.height = scrollHeight + 'px';
    }

    scaleOverlay();

    // Recalculate on window resize
    const resizeHandler = () => {
      scaleOverlay();
    };
    window.addEventListener('resize', resizeHandler);

    function cleanup() {
      window.removeEventListener('resize', resizeHandler);
      overlayContainer.remove();
      document.removeEventListener('keydown', keyHandler);
      originalTA.focus();
    }

    closeBtn.addEventListener('click', cleanup);

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

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

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

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

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