(function() {
  let debugDiv = document.createElement('div');
  debugDiv.id = 'debug-log';
  debugDiv.setAttribute(
      'style',
      `
      background:#222 !important;
      color:#0f0 !important;
      padding:8px !important;
      font-family:monospace !important;
      font-size:14px !important;
      position:fixed !important;
      left:0 !important; right:0 !important;
      bottom:0 !important;
      max-height:35vh !important;
      width:100vw !important;
      overflow-y:auto !important;
      z-index:9999 !important;
      pointer-events:auto !important;
      box-shadow:0 0 8px #000 !important;
      touch-action: auto !important;
      -webkit-overflow-scrolling: touch !important;
      white-space: pre-wrap !important;
      word-break: break-word !important;
    `
  );
  document.body.appendChild(debugDiv);

  function printLog(type, args) {
    let msg = Array.from(args).map(a => {
      try { return typeof a === 'object' ? JSON.stringify(a, null, 2) : String(a); }
      catch { return String(a); }
    }).join(' ');
    let line = document.createElement('div');
    line.textContent = `[${type}] ${msg}`;
    debugDiv.appendChild(line);
    debugDiv.scrollTop = debugDiv.scrollHeight;
  }

  ['trace', 'log', 'info', 'warn', 'error'].forEach(type => {
    let orig = console[type];
    console[type] = function(...args) {
      printLog(type, args);
      orig.apply(console, args);
    }
  });
})();