(function() {
  if (document.getElementById('ankle-bar')) return;

  // ---- Theme System ----
  var PRESETS = {
    dark:     { bg:'#0a0f1e', card:'#111a30', border:'#1a2540', borderHover:'#2a3a60', text:'#c8d0e0', textDim:'#5a6580', textBright:'#e8ecf4', accent:'#1E4DFF' },
    midnight: { bg:'#000000', card:'#0a0a0a', border:'#1a1a1a', borderHover:'#333333', text:'#999999', textDim:'#555555', textBright:'#ffffff', accent:'#ffffff' },
    light:    { bg:'#f5f3f0', card:'#ffffff', border:'#e0ddd8', borderHover:'#c8c4be', text:'#2a2520', textDim:'#8a8580', textBright:'#0a0500', accent:'#1E4DFF' },
    cream:    { bg:'#faf8f4', card:'#f0ece4', border:'#ddd8cc', borderHover:'#c8c0b0', text:'#3a3530', textDim:'#9a9488', textBright:'#1a1510', accent:'#CC0000' },
  };

    var LOGO_LIGHT = 'data:image/png;base64,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';
  var LOGO_DARK = 'data:image/png;base64,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';

  var T = {};
  try { T = JSON.parse(localStorage.getItem('ankle-theme-colors') || '{}'); } catch(e) {}
  if (!T.bg) T = PRESETS.dark;

  function isLight(hex) {
    var r = parseInt(hex.slice(1,3),16), g = parseInt(hex.slice(3,5),16), b = parseInt(hex.slice(5,7),16);
    return (r*0.299 + g*0.587 + b*0.114) > 128;
  }

  function applyTheme(t) {
    T = t;
    localStorage.setItem('ankle-theme-colors', JSON.stringify(t));
    var bar = document.getElementById('ankle-bar');
    var footer = document.getElementById('ankle-footer');
    if (bar) { bar.style.background = t.bg; bar.style.borderBottomColor = t.border; }
    if (footer) { footer.style.background = t.bg; footer.style.borderTopColor = t.border; }
    document.querySelectorAll('.ankle-tab').forEach(function(a) {
      if (!a.classList.contains('ankle-tab-active')) a.style.color = t.textDim;
    });
    document.querySelectorAll('.ankle-sep').forEach(function(s) { s.style.background = t.border; });
    document.querySelectorAll('.ankle-ctrl').forEach(function(b) { b.style.color = t.textDim; b.style.borderColor = t.border; });
    var logoImg = document.getElementById('ankle-logo-img');
    var logoText = document.getElementById('ankle-logo-text');
    if (logoImg) logoImg.src = isLight(t.bg) ? LOGO_DARK : LOGO_LIGHT;
    if (logoText) logoText.style.color = t.textBright;
    // Sync pickers
    ['bg','card','border','borderHover','text','textDim','textBright','accent'].forEach(function(k) {
      var el = document.getElementById('ankle-c-'+k);
      if (el) el.value = t[k] || '#000000';
    });
    // Window chrome
    try { window.webkit.messageHandlers.themeChange.postMessage(t.bg); } catch(e) {}
    // Wallpaper
    renderWallpaper();
  }

  // ---- Wallpaper ----
  var wpData = localStorage.getItem('ankle-wp-image') || '';
  var wpGrid = parseInt(localStorage.getItem('ankle-wp-grid') || '4');
  var wpOpacity = parseInt(localStorage.getItem('ankle-wp-opacity') || '8');

  function renderWallpaper() {
    var el = document.getElementById('ankle-wallpaper');
    if (!el) return;
    if (!wpData) { el.innerHTML = ''; el.style.opacity = '0'; return; }
    el.style.gridTemplateColumns = 'repeat('+wpGrid+', 1fr)';
    el.style.gridTemplateRows = 'repeat('+wpGrid+', 1fr)';
    el.style.opacity = (wpOpacity / 100).toString();
    var n = wpGrid * wpGrid;
    el.innerHTML = '';
    for (var i = 0; i < n; i++) {
      var c = document.createElement('div');
      c.style.cssText = 'background-size:cover;background-position:center;background-image:url('+wpData+')';
      el.appendChild(c);
    }
  }

  // ---- Build UI ----
  var S = document.createElement('style');
  S.textContent = '#ankle-wallpaper{position:fixed;top:0;left:0;right:0;height:30px;z-index:999998;pointer-events:none;display:grid;opacity:0.08;transition:opacity 0.3s;overflow:hidden}' +
    '#ankle-bar,#ankle-footer{z-index:999999;position:fixed;left:0;right:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}' +
    '#ankle-bar{top:0;height:30px;display:flex;align-items:center;padding:0 10px;border-bottom:1px solid;-webkit-app-region:drag}' +
    '#ankle-footer{bottom:0;height:22px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;border-top:1px solid;font-size:8px}' +
    '.ankle-tab{text-decoration:none;padding:5px 8px;white-space:nowrap;letter-spacing:1.5px;font-size:10px;border-bottom:2px solid transparent;transition:color 0.15s;flex-shrink:0;-webkit-app-region:no-drag}' +
    '.ankle-tab:hover{opacity:1!important}' +
    '.ankle-ctrl{background:none;border:1px solid;border-radius:3px;font-size:10px;width:22px;height:20px;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;padding:0;-webkit-app-region:no-drag}' +
    '.ankle-ctrl:hover{opacity:1!important}' +
    '#ankle-theme-panel{position:fixed;top:32px;right:10px;z-index:1000000;border:1px solid;border-radius:6px;padding:12px 14px;display:none;flex-direction:column;gap:8px;width:230px;max-height:75vh;overflow-y:auto;box-shadow:0 8px 40px rgba(0,0,0,0.4);font-size:10px}' +
    '#ankle-theme-panel.open{display:flex}' +
    '#ankle-theme-panel h4{font-size:8px;letter-spacing:2px;text-transform:uppercase;margin:0;font-weight:normal}' +
    '.ankle-presets{display:flex;gap:3px}' +
    '.ankle-preset{flex:1;padding:3px;border:1px solid;border-radius:3px;cursor:pointer;font-size:8px;text-align:center;letter-spacing:1px;text-transform:uppercase;font-family:inherit;background:transparent}' +
    '.ankle-color-row{display:flex;align-items:center;gap:6px}' +
    '.ankle-color-row label{font-size:8px;letter-spacing:1px;text-transform:uppercase;flex:1}' +
    '.ankle-color-row input[type=color]{width:26px;height:18px;border:1px solid;border-radius:2px;cursor:pointer;background:transparent;padding:0}' +
    '.ankle-color-row input[type=range]{flex:1;cursor:pointer}';
  document.head.appendChild(S);

  // Wallpaper layer
  var wp = document.createElement('div');
  wp.id = 'ankle-wallpaper';
  document.body.appendChild(wp);

  // ---- Top Bar ----
  var bar = document.createElement('div');
  bar.id = 'ankle-bar';
  bar.style.background = T.bg;
  bar.style.borderBottomColor = T.border;

  // Logo
  var logo = document.createElement('span');
  logo.id = 'ankle-logo';
  logo.style.cssText = 'font-weight:600;letter-spacing:5px;font-size:11px;margin-right:10px;cursor:default;';
  logo.style.color = T.textBright;
  var savedHeader = localStorage.getItem('ankle-header-text');
  logo.textContent = savedHeader || 'ANKLE';
  bar.appendChild(logo);

  // Tabs
  var tabs = [
    ['HOME','https://aleqth.com/'],
    ['/DADA','https://aleqth.com/dada'],
    ['SURF','https://aleqth.com/surf'],
    ['RADIO','https://aleqth.com/radio'],
    ['MARKET','https://aleqth.com/market'],
    ['GLITCH','https://aleqth.com/glitch'],
    ['MOTION','https://aleqth.com/motion'],
    ['NFT','https://aleqth.com/nft'],
    ['HAHA','https://aleqth.com/haha'],
    ['|',''],
    ['LAYERS','http://127.0.0.1:18484/vibe-codes/ankle_layer_tool_v10_6_baked_adjusted_v5.html'],
    ['FRAMES','http://127.0.0.1:18484/vibe-codes/frame_isolator_tool_v8.html'],
    ['COLORS','http://127.0.0.1:18484/vibe-codes/ankle_color_sampler_generator_gradient_tool_v3.html'],
    ['|',''],
    ['DASH','https://aleqth.com/dashboard'],
    ['FEED','https://aleqth.com/feed'],
  ];

  var tc = document.createElement('div');
  tc.style.cssText = 'display:flex;flex:1;overflow-x:auto;gap:0;-webkit-app-region:no-drag;scrollbar-width:none';

  tabs.forEach(function(t) {
    if (t[0] === '|') {
      var sep = document.createElement('span');
      sep.className = 'ankle-sep';
      sep.style.cssText = 'width:1px;height:14px;margin:0 4px;flex-shrink:0;background:'+T.border;
      tc.appendChild(sep);
      return;
    }
    var a = document.createElement('a');
    a.textContent = t[0];
    a.href = t[1];
    a.className = 'ankle-tab';
    a.style.color = T.textDim;
    var cur = location.href.replace(/\/$/,'');
    var tgt = t[1].replace(/\/$/,'');
    if (cur === tgt || (tgt !== 'https://aleqth.com' && cur.startsWith(tgt))) {
      a.style.color = T.textBright;
      a.style.borderBottomColor = T.accent;
      a.classList.add('ankle-tab-active');
    }
    a.onmouseenter = function() { this.style.color = T.textBright; };
    a.onmouseleave = function() { if (!this.classList.contains('ankle-tab-active')) this.style.color = T.textDim; };
    tc.appendChild(a);
  });
  bar.appendChild(tc);

  // Controls
  var ctr = document.createElement('div');
  ctr.style.cssText = 'display:flex;gap:4px;align-items:center;margin-left:6px;-webkit-app-region:no-drag';

  function mkBtn(label, fn) {
    var b = document.createElement('button');
    b.textContent = label;
    b.onclick = fn;
    b.className = 'ankle-ctrl';
    b.style.color = T.textDim;
    b.style.borderColor = T.border;
    b.onmouseenter = function() { this.style.color = T.textBright; this.style.borderColor = T.textDim; };
    b.onmouseleave = function() { this.style.color = T.textDim; this.style.borderColor = T.border; };
    return b;
  }

  ctr.appendChild(mkBtn('\u25C0', function() { history.back(); }));
  ctr.appendChild(mkBtn('\u25B6', function() { history.forward(); }));
  ctr.appendChild(mkBtn('\u21BB', function() { location.reload(); }));
  ctr.appendChild(mkBtn('\u2699', function() { document.getElementById('ankle-theme-panel').classList.toggle('open'); }));

  var clock = document.createElement('span');
  clock.style.cssText = 'font-size:9px;letter-spacing:1px;margin-left:4px;color:'+T.textDim;
  function updateClock() {
    var d = new Date();
    clock.textContent = String(d.getHours()).padStart(2,'0') + ':' + String(d.getMinutes()).padStart(2,'0');
  }
  updateClock();
  setInterval(updateClock, 30000);
  ctr.appendChild(clock);
  bar.appendChild(ctr);

  // ---- Theme Panel ----
  var tp = document.createElement('div');
  tp.id = 'ankle-theme-panel';
  tp.style.background = T.card;
  tp.style.borderColor = T.border;
  tp.style.color = T.text;

  // Header edit
  tp.innerHTML = '<h4>Header</h4>' +
    '<div class="ankle-color-row"><label style="color:'+T.textDim+'">Display</label>' +
    '<select id="ankle-header-mode" style="background:'+T.bg+';color:'+T.text+';border:1px solid '+T.border+';border-radius:3px;font-size:9px;font-family:inherit;padding:2px 4px;cursor:pointer">' +
    '<option value="logo"'+(headerMode==='logo'?' selected':'')+'>Logo</option>' +
    '<option value="text"'+(headerMode==='text'?' selected':'')+'>Custom text</option>' +
    '<option value="emoji"'+(headerMode==='emoji'?' selected':'')+'>Emoji + text</option>' +
    '</select></div>' +
    '<input type="text" id="ankle-header-input" placeholder="ANKLE" value="'+savedHeader+'" ' +
    'style="width:100%;background:'+T.bg+';color:'+T.text+';border:1px solid '+T.border+';border-radius:3px;font-size:10px;font-family:inherit;padding:3px 6px">' +
    '<h4>Presets</h4>' +
    '<div class="ankle-presets">' +
    '<button class="ankle-preset" onclick="window._anklePreset(\'dark\')" style="border-color:'+T.border+';color:'+T.textDim+'">Dark</button>' +
    '<button class="ankle-preset" onclick="window._anklePreset(\'midnight\')" style="border-color:'+T.border+';color:'+T.textDim+'">Mid</button>' +
    '<button class="ankle-preset" onclick="window._anklePreset(\'light\')" style="border-color:'+T.border+';color:'+T.textDim+'">Light</button>' +
    '<button class="ankle-preset" onclick="window._anklePreset(\'cream\')" style="border-color:'+T.border+';color:'+T.textDim+'">Cream</button>' +
    '</div>' +
    '<h4>Colors</h4>' +
    '<div class="ankle-color-row"><label style="color:'+T.textDim+'">Background</label><input type="color" id="ankle-c-bg" value="'+T.bg+'" oninput="window._ankleCustom()"></div>' +
    '<div class="ankle-color-row"><label style="color:'+T.textDim+'">Card</label><input type="color" id="ankle-c-card" value="'+T.card+'" oninput="window._ankleCustom()"></div>' +
    '<div class="ankle-color-row"><label style="color:'+T.textDim+'">Border</label><input type="color" id="ankle-c-border" value="'+T.border+'" oninput="window._ankleCustom()"></div>' +
    '<div class="ankle-color-row"><label style="color:'+T.textDim+'">Text</label><input type="color" id="ankle-c-text" value="'+T.text+'" oninput="window._ankleCustom()"></div>' +
    '<div class="ankle-color-row"><label style="color:'+T.textDim+'">Text Dim</label><input type="color" id="ankle-c-textDim" value="'+T.textDim+'" oninput="window._ankleCustom()"></div>' +
    '<div class="ankle-color-row"><label style="color:'+T.textDim+'">Text Bright</label><input type="color" id="ankle-c-textBright" value="'+T.textBright+'" oninput="window._ankleCustom()"></div>' +
    '<div class="ankle-color-row"><label style="color:'+T.textDim+'">Accent</label><input type="color" id="ankle-c-accent" value="'+T.accent+'" oninput="window._ankleCustom()"></div>' +
    '<h4>Wallpaper</h4>' +
    '<div class="ankle-color-row"><label style="color:'+T.textDim+'">Image</label>' +
    '<input type="file" id="ankle-wp-file" accept="image/*" style="display:none">' +
    '<button class="ankle-preset" onclick="document.getElementById(\'ankle-wp-file\').click()" style="border-color:'+T.border+';color:'+T.textDim+';flex:none;padding:2px 6px">Choose</button>' +
    '<button class="ankle-preset" onclick="window._ankleClearWp()" style="border-color:'+T.border+';color:'+T.textDim+';flex:none;padding:2px 6px">Clear</button>' +
    '</div>' +
    '<div class="ankle-color-row"><label style="color:'+T.textDim+'">Grid</label><input type="range" id="ankle-wp-grid" min="1" max="20" value="'+wpGrid+'" oninput="window._ankleWpGrid()" style="flex:1"><span id="ankle-wp-grid-val" style="color:'+T.textDim+';width:16px;text-align:right">'+wpGrid+'</span></div>' +
    '<div class="ankle-color-row"><label style="color:'+T.textDim+'">Opacity</label><input type="range" id="ankle-wp-opacity" min="0" max="100" value="'+wpOpacity+'" oninput="window._ankleWpOpacity()" style="flex:1"><span id="ankle-wp-opacity-val" style="color:'+T.textDim+';width:24px;text-align:right">'+wpOpacity+'%</span></div>';

  // ---- Footer ----
  var footer = document.createElement('div');
  footer.id = 'ankle-footer';
  footer.style.background = T.bg;
  footer.style.borderTopColor = T.border;
  footer.style.color = T.textDim;

  var dots = '<span style="display:flex;gap:3px;align-items:center">' +
    '<span style="width:3px;height:3px;border-radius:50%;background:#1E4DFF"></span>' +
    '<span style="width:3px;height:3px;border-radius:50%;background:#FF8C42"></span>' +
    '<span style="width:3px;height:3px;border-radius:50%;background:#00C98D"></span>' +
    '<span style="width:3px;height:3px;border-radius:50%;background:#6B35D4"></span>' +
    '<span style="width:3px;height:3px;border-radius:50%;background:#FFD700"></span>' +
    '<span style="width:3px;height:3px;border-radius:50%;background:#CC0000"></span></span>';

  footer.innerHTML = dots +
    '<span style="display:flex;gap:8px;align-items:center">' +
    '<span style="display:flex;align-items:center;gap:3px"><span id="ankle-dot-ec2" style="width:4px;height:4px;border-radius:50%;background:'+T.textDim+'"></span>EC2</span>' +
    '<span style="display:flex;align-items:center;gap:3px"><span id="ankle-dot-oll" style="width:4px;height:4px;border-radius:50%;background:'+T.textDim+'"></span>OLL</span>' +
    '</span>' +
    '<span>v2.4</span>';

  // Insert everything
  document.body.style.paddingTop = '30px';
  document.body.style.paddingBottom = '22px';
  document.body.insertBefore(bar, document.body.firstChild);
  document.body.appendChild(tp);
  document.body.appendChild(footer);

  // Close theme panel on outside click
  document.addEventListener('click', function(e) {
    if (!e.target.closest('#ankle-theme-panel') && !e.target.closest('.ankle-ctrl')) {
      document.getElementById('ankle-theme-panel').classList.remove('open');
    }
  });

  // ---- Global Functions ----
  window._anklePreset = function(name) {
    applyTheme(PRESETS[name]);
    tp.style.background = PRESETS[name].card;
    tp.style.borderColor = PRESETS[name].border;
    tp.style.color = PRESETS[name].text;
  };

  window._ankleCustom = function() {
    applyTheme({
      bg: document.getElementById('ankle-c-bg').value,
      card: document.getElementById('ankle-c-card').value,
      border: document.getElementById('ankle-c-border').value,
      borderHover: T.borderHover,
      text: document.getElementById('ankle-c-text').value,
      textDim: document.getElementById('ankle-c-textDim').value,
      textBright: document.getElementById('ankle-c-textBright').value,
      accent: document.getElementById('ankle-c-accent').value,
    });
    tp.style.background = document.getElementById('ankle-c-card').value;
    tp.style.borderColor = document.getElementById('ankle-c-border').value;
    tp.style.color = document.getElementById('ankle-c-text').value;
  };

  // Header mode switch
  document.getElementById('ankle-header-mode').addEventListener('change', function() {
    var mode = this.value;
    localStorage.setItem('ankle-header-mode', mode);
    var li = document.getElementById('ankle-logo-img');
    var lt = document.getElementById('ankle-logo-text');
    var input = document.getElementById('ankle-header-input');
    if (mode === 'logo') {
      li.style.display = ''; lt.style.display = 'none'; input.style.display = 'none';
    } else {
      li.style.display = 'none'; lt.style.display = ''; input.style.display = '';
      if (mode === 'emoji' && !input.value.match(/\p{Emoji}/u)) {
        input.value = String.fromCodePoint(0x1F9B6) + String.fromCodePoint(0x1FAB6) + ' ANKLE';
        lt.textContent = input.value;
        localStorage.setItem('ankle-header-text', input.value);
      }
    }
  });

  // Header text edit
  document.getElementById('ankle-header-input').addEventListener('input', function() {
    document.getElementById('ankle-logo-text').textContent = this.value || 'ANKLE';
    localStorage.setItem('ankle-header-text', this.value);
  });

  // Wallpaper upload
  document.getElementById('ankle-wp-file').addEventListener('change', function() {
    var file = this.files[0];
    if (!file) return;
    var reader = new FileReader();
    reader.onload = function() {
      var img = new Image();
      img.onload = function() {
        var max = 200, w = img.width, h = img.height;
        if (w > h) { h = Math.round(h * max / w); w = max; }
        else { w = Math.round(w * max / h); h = max; }
        var c = document.createElement('canvas');
        c.width = w; c.height = h;
        c.getContext('2d').drawImage(img, 0, 0, w, h);
        wpData = c.toDataURL('image/jpeg', 0.7);
        try { localStorage.setItem('ankle-wp-image', wpData); } catch(e) {}
        renderWallpaper();
      };
      img.src = reader.result;
    };
    reader.readAsDataURL(file);
  });

  window._ankleClearWp = function() {
    wpData = '';
    localStorage.removeItem('ankle-wp-image');
    var el = document.getElementById('ankle-wallpaper');
    if (el) { el.innerHTML = ''; el.style.opacity = '0'; }
  };

  window._ankleWpGrid = function() {
    wpGrid = parseInt(document.getElementById('ankle-wp-grid').value);
    document.getElementById('ankle-wp-grid-val').textContent = wpGrid;
    localStorage.setItem('ankle-wp-grid', wpGrid);
    renderWallpaper();
  };

  window._ankleWpOpacity = function() {
    wpOpacity = parseInt(document.getElementById('ankle-wp-opacity').value);
    document.getElementById('ankle-wp-opacity-val').textContent = wpOpacity + '%';
    localStorage.setItem('ankle-wp-opacity', wpOpacity);
    var el = document.getElementById('ankle-wallpaper');
    if (el) el.style.opacity = (wpOpacity / 100).toString();
  };

  // Status checks
  function checkDot(url, id) {
    fetch(url, { mode:'no-cors', signal:AbortSignal.timeout(4000) })
      .then(function() { document.getElementById(id).style.background = '#00C98D'; })
      .catch(function() { document.getElementById(id).style.background = '#CC0000'; });
  }
  checkDot('https://aleqth.com/api/status', 'ankle-dot-ec2');
  checkDot('http://localhost:11434/api/tags', 'ankle-dot-oll');

  // Init wallpaper
  renderWallpaper();

  // Sync window background
  try { window.webkit.messageHandlers.themeChange.postMessage(T.bg); } catch(e) {}
})();
