accessibility.js

(function() {
  if (document.getElementById('accesswidget-container')) return; // Prevent multiple initializations

  // 1. Configuration
  const scriptTag = document.currentScript || document.querySelector('script[src*="accessibility.js"]');
  const config = {
    position: (scriptTag && scriptTag.getAttribute('data-position')) || 'bottom-right',
    color: (scriptTag && scriptTag.getAttribute('data-color')) || '#4f46e5',
    lang: (scriptTag && scriptTag.getAttribute('data-lang')) || 'en'
  };

  // 2. State Management
  const STORAGE_KEY = 'accesswidget:prefs';
  let state = {
    fontSize: 100, // percentage
    spacing: 0, // 0 to 4
    readableFont: false,
    dyslexiaFont: false,
    alignText: 'default', // default, left, center, justify
    contrast: 'default', // default, high, dark
    colors: false, // monochrome
    blueFilter: false,
    colorBlindness: 'none',
    highlightLinks: false,
    highlightFocus: false,
    bigCursor: false,
    readingGuide: false,
    readingMask: false,
    stopAnimations: false,
    hideImages: false,
    pageStructure: false
  };

  try {
    const stored = localStorage.getItem(STORAGE_KEY);
    if (stored) {
      state = { ...state, ...JSON.parse(stored) };
    }
  } catch (e) {
    console.warn('AccessWidget: Could not read from localStorage', e);
  }

  function saveState() {
    try {
      localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
    } catch (e) {
      console.warn('AccessWidget: Could not save to localStorage', e);
    }
  }

  // 3. Global Styles & SVG Filters
  const globalStyles = `
    :root {
      /* Dynamic filters are applied directly via JS now */
    }

    html.aw-font-readable, html.aw-font-readable * {
      font-family: Arial, Helvetica, sans-serif !important;
    }

    html.aw-font-dyslexia, html.aw-font-dyslexia * {
      font-family: "Comic Sans MS", "Atkinson Hyperlegible", sans-serif !important;
    }

    html.aw-align-left, html.aw-align-left * { text-align: left !important; }
    html.aw-align-center, html.aw-align-center * { text-align: center !important; }
    html.aw-align-justify, html.aw-align-justify * { text-align: justify !important; }

    html.aw-highlight-links a {
      outline: 2px solid #ff9800 !important;
      outline-offset: 2px !important;
      background-color: rgba(255, 152, 0, 0.2) !important;
      text-decoration: underline !important;
    }

    html.aw-highlight-focus *:focus {
      outline: 3px solid #ff9800 !important;
      outline-offset: 3px !important;
    }

    html.aw-big-cursor, html.aw-big-cursor * {
      cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="black" stroke="white" stroke-width="2"><path d="M4 2v20l6-6h10z"/></svg>'), auto !important;
    }

    html.aw-stop-animations *, html.aw-stop-animations *::before, html.aw-stop-animations *::after {
      animation: none !important;
      transition: none !important;
      scroll-behavior: auto !important;
    }

    html.aw-hide-images img, html.aw-hide-images picture, html.aw-hide-images video, html.aw-hide-images svg {
      visibility: hidden !important;
    }
  `;

  const styleEl = document.createElement('style');
  styleEl.id = 'accesswidget-global-styles';
  styleEl.textContent = globalStyles;
  document.head.appendChild(styleEl);

  const svgFilters = `
    <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
      <defs>
        <filter id="aw-protanopia"><feColorMatrix type="matrix" values="0.567, 0.433, 0, 0, 0  0.558, 0.442, 0, 0, 0  0, 0.242, 0.758, 0, 0  0, 0, 0, 1, 0"/></filter>
        <filter id="aw-deuteranopia"><feColorMatrix type="matrix" values="0.625, 0.375, 0, 0, 0  0.7, 0.3, 0, 0, 0  0, 0.3, 0.7, 0, 0  0, 0, 0, 1, 0"/></filter>
        <filter id="aw-tritanopia"><feColorMatrix type="matrix" values="0.95, 0.05, 0, 0, 0  0, 0.433, 0.567, 0, 0  0, 0.475, 0.525, 0, 0  0, 0, 0, 1, 0"/></filter>
        <filter id="aw-achromatopsia"><feColorMatrix type="matrix" values="0.299, 0.587, 0.114, 0, 0  0.299, 0.587, 0.114, 0, 0  0.299, 0.587, 0.114, 0, 0  0, 0, 0, 1, 0"/></filter>
      </defs>
    </svg>
  `;
  document.body.insertAdjacentHTML('beforeend', svgFilters);

  // 4. Widget UI Container
  const container = document.createElement('div');
  container.id = 'accesswidget-container';
  container.style.position = 'fixed';
  container.style.zIndex = '2147483647';
  
  // Set position variables for shadow DOM use
  if (config.position.includes('bottom')) {
    container.style.bottom = '20px';
  } else {
    container.style.top = '20px';
  }
  if (config.position.includes('right')) {
    container.style.right = '20px';
  } else {
    container.style.left = '20px';
  }

  document.body.appendChild(container);
  const shadow = container.attachShadow({ mode: 'open' });

  // CSS for Shadow DOM
  const shadowStyles = `
    * { box-sizing: border-box; font-family: system-ui, -apple-system, sans-serif; }
    :host {
      --primary: #4f46e5;
      --bg: #ffffff;
      --text: #1a1a1a;
      --text-muted: #666666;
      --border: #e5e5e5;
      --card-bg: #f9f9f9;
      --hover: #f0f0f0;
      
      display: flex;
      flex-direction: column-reverse;
      align-items: flex-end;
      gap: 16px;
    }

    @media (prefers-color-scheme: dark) {
      :host {
        --bg: #1e1e1e;
        --text: #f0f0f0;
        --text-muted: #a0a0a0;
        --border: #333333;
        --card-bg: #2a2a2a;
        --hover: #3a3a3a;
      }
    }

    .aw-trigger {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background-color: var(--primary);
      color: white;
      border: none;
      cursor: pointer;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.2s;
    }
    .aw-trigger:hover { transform: scale(1.05); }
    .aw-trigger:focus-visible { outline: 3px solid var(--text); outline-offset: 2px; }
    .aw-trigger svg { width: 32px; height: 32px; fill: currentColor; }

    .aw-panel {
      display: none;
      width: 340px;
      max-height: 80vh;
      background: var(--bg);
      color: var(--text);
      border-radius: 12px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.2);
      flex-direction: column;
      overflow: hidden;
      border: 1px solid var(--border);
    }
    .aw-panel.aw-open {
      display: flex;
    }

    .aw-header {
      padding: 16px;
      border-bottom: 1px solid var(--border);
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: var(--bg);
      z-index: 2;
    }
    .aw-header h2 { margin: 0; font-size: 18px; font-weight: 600; }
    .aw-header-actions { display: flex; gap: 8px; }
    .aw-icon-btn {
      background: none; border: none; color: var(--text-muted);
      cursor: pointer; padding: 4px; border-radius: 4px;
    }
    .aw-icon-btn:hover { background: var(--hover); color: var(--text); }
    .aw-icon-btn svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 2; fill: none; }

    .aw-body {
      overflow-y: auto;
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    .aw-section-title {
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--text-muted);
      margin: 0 0 12px 0;
      font-weight: 600;
    }

    .aw-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }

    .aw-card {
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 12px;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 8px;
      transition: all 0.2s;
      user-select: none;
    }
    .aw-card:hover { border-color: var(--primary); }
    .aw-card.aw-active {
      background: var(--primary);
      color: white;
      border-color: var(--primary);
    }
    .aw-card.aw-active .aw-card-icon { color: white; }
    
    .aw-card-icon {
      color: var(--primary);
    }
    .aw-card-icon svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 2; fill: none; }
    
    .aw-card-label { font-size: 13px; font-weight: 500; }

    .aw-stepper {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 8px;
    }
    .aw-stepper-label { font-size: 14px; font-weight: 500; }
    .aw-stepper-controls { display: flex; align-items: center; gap: 8px; }
    .aw-stepper-btn {
      width: 28px; height: 28px; border-radius: 4px;
      border: 1px solid var(--border); background: var(--bg);
      color: var(--text); cursor: pointer; display: flex;
      align-items: center; justify-content: center;
    }
    .aw-stepper-btn:hover { background: var(--hover); }
    
    /* Reading tools overlays */
    .aw-reading-mask, .aw-reading-guide {
      position: fixed;
      left: 0;
      width: 100vw;
      pointer-events: none;
      z-index: 2147483646;
      display: none;
    }
    .aw-reading-mask {
      top: 0; height: 100vh;
      background: rgba(0,0,0,0.5);
    }
    .aw-reading-guide {
      height: 8px;
      background: #ff9800;
      box-shadow: 0 0 10px rgba(255,152,0,0.5);
    }
  `;

  // Icons
  const icons = {
    trigger: '<svg viewBox="0 0 512 512"><path d="M256 48c114.953 0 208 93.029 208 208 0 114.953-93.029 208-208 208-114.953 0-208-93.029-208-208 0-114.953 93.029-208 208-208m0-40C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm0 56C149.961 64 64 149.961 64 256s85.961 192 192 192 192-85.961 192-192S362.039 64 256 64zm0 44c19.882 0 36 16.118 36 36s-16.118 36-36 36-36-16.118-36-36 16.118-36 36-36zm117.741 98.023c-28.712 6.779-55.511 12.748-82.14 15.807.851 101.023 12.306 123.052 25.037 155.621 3.617 9.26-.957 19.698-10.217 23.315-9.261 3.617-19.699-.957-23.316-10.217-8.705-22.308-17.086-40.636-22.261-78.549h-9.686c-5.167 37.851-13.534 56.208-22.262 78.549-3.615 9.255-14.05 13.836-23.315 10.217-9.26-3.617-13.834-14.056-10.217-23.315 12.713-32.541 24.185-54.541 25.037-155.621-26.629-3.058-53.428-9.027-82.141-15.807-8.6-2.031-13.926-10.648-11.895-19.249s10.647-13.926 19.249-11.895c96.686 22.829 124.283 22.783 220.775 0 8.599-2.03 17.218 3.294 19.249 11.895 2.029 8.601-3.297 17.219-11.897 19.249z"/></svg>',
    reset: '<svg viewBox="0 0 24 24"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/></svg>',
    close: '<svg viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>',
    visibility: '<svg viewBox="0 0 24 24"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>',
    motion: '<svg viewBox="0 0 24 24"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>',
    focus: '<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="4"/></svg>',
    dyslexia: '<svg viewBox="0 0 24 24"><path d="M4 7V4h16v3M9 20h6M12 4v16"/></svg>',
    font: '<svg viewBox="0 0 24 24"><polyline points="4 7 4 4 20 4 20 7"/><line x1="9" y1="20" x2="15" y2="20"/><line x1="12" y1="4" x2="12" y2="20"/></svg>',
    align: '<svg viewBox="0 0 24 24"><line x1="21" y1="6" x2="3" y2="6"/><line x1="15" y1="12" x2="3" y2="12"/><line x1="17" y1="18" x2="3" y2="18"/></svg>',
    contrast: '<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M12 2a10 10 0 0 0 0 20z"/></svg>',
    color: '<svg viewBox="0 0 24 24"><path d="M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z"/></svg>',
    colorBlind: '<svg viewBox="0 0 24 24"><path d="M2 12A10 10 0 0 0 15 21.54A10 10 0 0 1 15 2.46A10 10 0 0 0 2 12Z"/></svg>',
    links: '<svg viewBox="0 0 24 24"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>',
    cursor: '<svg viewBox="0 0 24 24"><path d="M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z"/></svg>',
    readAloud: '<svg viewBox="0 0 24 24"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"/></svg>',
    sun: '<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>',
    moon: '<svg viewBox="0 0 24 24"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>',
    filter: '<svg viewBox="0 0 24 24"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></svg>'
  };

  const html = `
    <style>${shadowStyles}</style>
    <button class="aw-trigger" aria-label="Open Accessibility Menu" aria-expanded="false">
      ${icons.trigger}
    </button>
    
    <div class="aw-panel" role="dialog" aria-modal="true" aria-labelledby="aw-title" tabindex="-1" aria-hidden="true">
      <div class="aw-header">
        <h2 id="aw-title">Accessibility Settings</h2>
        <div class="aw-header-actions">
          <button class="aw-icon-btn aw-reset" aria-label="Reset all settings">${icons.reset}</button>
          <button class="aw-icon-btn aw-close" aria-label="Close panel">${icons.close}</button>
        </div>
      </div>
      
      <div class="aw-body">
        <div>
          <h3 class="aw-section-title">Profiles</h3>
          <div class="aw-grid">
            <div class="aw-card aw-profile" data-profile="visibility" role="switch" aria-checked="false" tabindex="0">
              <div class="aw-card-icon">${icons.visibility}</div>
              <div class="aw-card-label">Better Visibility</div>
            </div>
            <div class="aw-card aw-profile" data-profile="motion" role="switch" aria-checked="false" tabindex="0">
              <div class="aw-card-icon">${icons.motion}</div>
              <div class="aw-card-label">Less Motion</div>
            </div>
            <div class="aw-card aw-profile" data-profile="focus" role="switch" aria-checked="false" tabindex="0">
              <div class="aw-card-icon">${icons.focus}</div>
              <div class="aw-card-label">Focus Mode</div>
            </div>
            <div class="aw-card aw-profile" data-profile="dyslexia" role="switch" aria-checked="false" tabindex="0">
              <div class="aw-card-icon">${icons.dyslexia}</div>
              <div class="aw-card-label">Dyslexia Friendly</div>
            </div>
          </div>
        </div>

        <div>
          <h3 class="aw-section-title">Display</h3>
          <div class="aw-stepper" style="margin-bottom: 8px;">
            <div class="aw-stepper-label">Text Size</div>
            <div class="aw-stepper-controls">
              <button class="aw-stepper-btn aw-text-minus" aria-label="Decrease text size">-</button>
              <span class="aw-text-val">100%</span>
              <button class="aw-stepper-btn aw-text-plus" aria-label="Increase text size">+</button>
            </div>
          </div>
          <div class="aw-stepper" style="margin-bottom: 12px;">
            <div class="aw-stepper-label">Text Spacing</div>
            <div class="aw-stepper-controls">
              <button class="aw-stepper-btn aw-spacing-minus" aria-label="Decrease spacing">-</button>
              <span class="aw-spacing-val">Default</span>
              <button class="aw-stepper-btn aw-spacing-plus" aria-label="Increase spacing">+</button>
            </div>
          </div>
          <div class="aw-grid">
            <div class="aw-card aw-toggle" data-feature="readableFont" role="switch" aria-checked="false" tabindex="0">
              <div class="aw-card-icon">${icons.font}</div>
              <div class="aw-card-label">Readable Font</div>
            </div>
            <div class="aw-card aw-toggle" data-feature="dyslexiaFont" role="switch" aria-checked="false" tabindex="0">
              <div class="aw-card-icon">${icons.dyslexia}</div>
              <div class="aw-card-label">Dyslexia Font</div>
            </div>
            <div class="aw-card aw-toggle" data-feature="alignText" data-cycle="default,left,center,justify" role="button" tabindex="0">
              <div class="aw-card-icon">${icons.align}</div>
              <div class="aw-card-label">Align: Default</div>
            </div>
          </div>
        </div>

        <div>
          <h3 class="aw-section-title">Appearance</h3>
          <div class="aw-grid">
            <div class="aw-card aw-toggle" data-feature="lightMode" data-group="appearance" role="switch" aria-checked="false" tabindex="0">
              <div class="aw-card-icon">${icons.sun}</div>
              <div class="aw-card-label">Light Mode</div>
            </div>
            <div class="aw-card aw-toggle" data-feature="darkMode" data-group="appearance" role="switch" aria-checked="false" tabindex="0">
              <div class="aw-card-icon">${icons.moon}</div>
              <div class="aw-card-label">Dark Mode</div>
            </div>
            <div class="aw-card aw-toggle" data-feature="highContrast" data-group="appearance" role="switch" aria-checked="false" tabindex="0">
              <div class="aw-card-icon">${icons.contrast}</div>
              <div class="aw-card-label">High Contrast</div>
            </div>
            <div class="aw-card aw-toggle" data-feature="invertColors" data-group="appearance" role="switch" aria-checked="false" tabindex="0">
              <div class="aw-card-icon">${icons.visibility}</div>
              <div class="aw-card-label">Invert Colors</div>
            </div>
          </div>
        </div>

        <div>
          <h3 class="aw-section-title">Color & Filters</h3>
          <div class="aw-grid">
            <div class="aw-card aw-toggle" data-feature="blueFilter" role="switch" aria-checked="false" tabindex="0">
              <div class="aw-card-icon">${icons.filter}</div>
              <div class="aw-card-label">Blue Filter</div>
            </div>
            <div class="aw-card aw-toggle" data-feature="colors" role="switch" aria-checked="false" tabindex="0">
              <div class="aw-card-icon">${icons.color}</div>
              <div class="aw-card-label">Monochrome</div>
            </div>
            <div class="aw-card aw-toggle" data-feature="colorBlindness" data-cycle="none,protanopia,deuteranopia,tritanopia,achromatopsia" role="button" tabindex="0">
              <div class="aw-card-icon">${icons.colorBlind}</div>
              <div class="aw-card-label">Colorblind</div>
            </div>
            <div class="aw-card aw-toggle" data-feature="highlightLinks" role="switch" aria-checked="false" tabindex="0">
              <div class="aw-card-icon">${icons.links}</div>
              <div class="aw-card-label">Highlight Links</div>
            </div>
            <div class="aw-card aw-toggle" data-feature="highlightFocus" role="switch" aria-checked="false" tabindex="0">
              <div class="aw-card-icon">${icons.focus}</div>
              <div class="aw-card-label">Highlight Focus</div>
            </div>
          </div>
        </div>

        <div>
          <h3 class="aw-section-title">Tools</h3>
          <div class="aw-grid">
            <div class="aw-card aw-toggle" data-feature="bigCursor" role="switch" aria-checked="false" tabindex="0">
              <div class="aw-card-icon">${icons.cursor}</div>
              <div class="aw-card-label">Big Cursor</div>
            </div>
            <div class="aw-card aw-toggle" data-feature="readingMask" role="switch" aria-checked="false" tabindex="0">
              <div class="aw-card-icon">${icons.focus}</div>
              <div class="aw-card-label">Reading Mask</div>
            </div>
            <div class="aw-card aw-toggle" data-feature="readingGuide" role="switch" aria-checked="false" tabindex="0">
              <div class="aw-card-icon">${icons.align}</div>
              <div class="aw-card-label">Reading Guide</div>
            </div>
            <div class="aw-card aw-toggle" data-feature="readAloud" role="switch" aria-checked="false" tabindex="0">
              <div class="aw-card-icon">${icons.readAloud}</div>
              <div class="aw-card-label">Read Aloud</div>
            </div>
            <div class="aw-card aw-toggle" data-feature="hideImages" role="switch" aria-checked="false" tabindex="0">
              <div class="aw-card-icon">${icons.visibility}</div>
              <div class="aw-card-label">Hide Images</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="aw-reading-mask"></div>
    <div class="aw-reading-guide"></div>
  `;
  shadow.innerHTML = html;

  // Set dynamic CSS properties via JS to prevent XSS
  shadow.host.style.setProperty('--primary', config.color);
  shadow.host.style.flexDirection = config.position.includes('bottom') ? 'column-reverse' : 'column';
  shadow.host.style.alignItems = config.position.includes('right') ? 'flex-end' : 'flex-start';

  // 5. Logic & Events
  const trigger = shadow.querySelector('.aw-trigger');
  const panel = shadow.querySelector('.aw-panel');
  const resetBtn = shadow.querySelector('.aw-reset');
  const closeBtn = shadow.querySelector('.aw-close');
  const htmlEl = document.documentElement;
  const readingMask = shadow.querySelector('.aw-reading-mask');
  const readingGuide = shadow.querySelector('.aw-reading-guide');

  let synth = window.speechSynthesis;
  let isSpeaking = false;

  trigger.addEventListener('click', () => {
    const isOpen = panel.classList.toggle('aw-open');
    trigger.setAttribute('aria-expanded', isOpen);
    panel.setAttribute('aria-hidden', !isOpen);
    if (isOpen) {
      panel.focus();
    }
  });

  closeBtn.addEventListener('click', () => {
    panel.classList.remove('aw-open');
    trigger.setAttribute('aria-expanded', 'false');
    panel.setAttribute('aria-hidden', 'true');
    trigger.focus();
  });

  panel.addEventListener('keydown', (e) => {
    if (e.key === 'Escape') {
      closeBtn.click();
    }
  });

  resetBtn.addEventListener('click', () => {
    state = {
      fontSize: 100, spacing: 0, readableFont: false, dyslexiaFont: false,
      alignText: 'default', lightMode: false, darkMode: false, highContrast: false, invertColors: false,
      colors: false, blueFilter: false, colorBlindness: 'none', highlightLinks: false, highlightFocus: false,
      bigCursor: false, readingGuide: false, readingMask: false, stopAnimations: false,
      hideImages: false, pageStructure: false
    };
    shadow.querySelectorAll('.aw-profile').forEach(p => p.classList.remove('aw-active'));
    applyState();
    saveState();
  });

  // Profiles
  const profiles = {
    visibility: { highContrast: true, fontSize: 120, highlightLinks: true, readableFont: true },
    motion: { stopAnimations: true },
    focus: { readingMask: true, highlightFocus: true, hideImages: true },
    dyslexia: { dyslexiaFont: true, spacing: 2, alignText: 'left' }
  };

  shadow.querySelectorAll('.aw-profile').forEach(btn => {
    btn.addEventListener('click', () => {
      const p = btn.getAttribute('data-profile');
      const isActive = btn.classList.contains('aw-active');
      
      shadow.querySelectorAll('.aw-profile').forEach(b => {
        b.classList.remove('aw-active');
        b.setAttribute('aria-checked', 'false');
      });

      if (!isActive) {
        btn.classList.add('aw-active');
        btn.setAttribute('aria-checked', 'true');
        Object.assign(state, profiles[p]);
      } else {
        // Reset only the profile specific properties to default if turned off
        for(let key in profiles[p]) {
            if(typeof state[key] === 'boolean') state[key] = false;
            else if(typeof state[key] === 'number') state[key] = key === 'fontSize' ? 100 : 0;
            else if(typeof state[key] === 'string') state[key] = key === 'colorBlindness' ? 'none' : 'default';
        }
      }
      applyState();
      saveState();
    });
    btn.addEventListener('keydown', e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); btn.click(); }});
  });

  // Toggles and Cycles
  shadow.querySelectorAll('.aw-toggle').forEach(btn => {
    btn.addEventListener('click', () => {
      const feature = btn.getAttribute('data-feature');
      const cycle = btn.getAttribute('data-cycle');
      const group = btn.getAttribute('data-group');
      
      if (cycle) {
        const options = cycle.split(',');
        const currentIndex = options.indexOf(state[feature]);
        const nextIndex = (currentIndex + 1) % options.length;
        state[feature] = options[nextIndex];
      } else {
        const willBeActive = !state[feature];
        
        // If this toggle belongs to a group (like appearance), turning it on should turn off others in the group
        if (willBeActive && group) {
          shadow.querySelectorAll(`.aw-toggle[data-group="${group}"]`).forEach(gBtn => {
            const gFeature = gBtn.getAttribute('data-feature');
            if (gFeature !== feature) {
              state[gFeature] = false;
            }
          });
        }
        
        state[feature] = willBeActive;
      }
      applyState();
      saveState();
    });
    btn.addEventListener('keydown', e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); btn.click(); }});
  });

  // Steppers
  shadow.querySelector('.aw-text-minus').addEventListener('click', () => { state.fontSize = Math.max(80, state.fontSize - 10); applyState(); saveState(); });
  shadow.querySelector('.aw-text-plus').addEventListener('click', () => { state.fontSize = Math.min(200, state.fontSize + 10); applyState(); saveState(); });
  shadow.querySelector('.aw-spacing-minus').addEventListener('click', () => { state.spacing = Math.max(0, state.spacing - 1); applyState(); saveState(); });
  shadow.querySelector('.aw-spacing-plus').addEventListener('click', () => { state.spacing = Math.min(4, state.spacing + 1); applyState(); saveState(); });

  // Mouse move for reading tools
  let isTicking = false;
  document.addEventListener('mousemove', (e) => {
    if (!state.readingGuide && !state.readingMask) return;
    
    if (!isTicking) {
      window.requestAnimationFrame(() => {
        if (state.readingGuide) {
          readingGuide.style.top = (e.clientY - 4) + 'px';
        }
        if (state.readingMask) {
          const size = 100;
          readingMask.style.background = `rgba(0,0,0,0.5)`;
          readingMask.style.maskImage = `linear-gradient(to bottom, black ${e.clientY - size}px, transparent ${e.clientY - size}px, transparent ${e.clientY + size}px, black ${e.clientY + size}px)`;
          readingMask.style.webkitMaskImage = `linear-gradient(to bottom, black ${e.clientY - size}px, transparent ${e.clientY - size}px, transparent ${e.clientY + size}px, black ${e.clientY + size}px)`;
        }
        isTicking = false;
      });
      isTicking = true;
    }
  });

  // Read aloud click listener
  document.addEventListener('click', (e) => {
    if (state.readAloud && synth) {
      // Don't intercept clicks inside the widget
      if (e.target.closest('#accesswidget-container')) return;
      
      synth.cancel();
      const text = e.target.innerText || e.target.textContent;
      if (text) {
        const utterance = new SpeechSynthesisUtterance(text);
        utterance.lang = config.lang;
        synth.speak(utterance);
      }
    }
  }, true);

  // Apply State function
  function applyState() {
    // UI Updates
    shadow.querySelector('.aw-text-val').textContent = state.fontSize + '%';
    shadow.querySelector('.aw-spacing-val').textContent = state.spacing === 0 ? 'Default' : '+' + state.spacing;
    
    shadow.querySelectorAll('.aw-toggle').forEach(btn => {
      const feature = btn.getAttribute('data-feature');
      const cycle = btn.getAttribute('data-cycle');
      
      if (cycle) {
        btn.classList.toggle('aw-active', state[feature] !== 'default' && state[feature] !== 'none');
        const label = btn.querySelector('.aw-card-label');
        if (feature === 'alignText') label.textContent = 'Align: ' + state[feature];
        if (feature === 'contrast') label.textContent = state[feature] === 'default' ? 'Contrast' : state[feature] + ' contrast';
        if (feature === 'colorBlindness') label.textContent = state[feature] === 'none' ? 'Colorblind' : state[feature];
      } else {
        btn.classList.toggle('aw-active', state[feature]);
        btn.setAttribute('aria-checked', state[feature]);
      }
    });

    // DOM Updates
    // Text Size
    htmlEl.style.fontSize = state.fontSize === 100 ? '' : state.fontSize + '%';
    
    // Spacing
    htmlEl.style.letterSpacing = state.spacing === 0 ? '' : (state.spacing * 0.05) + 'em';
    htmlEl.style.wordSpacing = state.spacing === 0 ? '' : (state.spacing * 0.1) + 'em';

    // Classes
    htmlEl.classList.toggle('aw-font-readable', state.readableFont);
    htmlEl.classList.toggle('aw-font-dyslexia', state.dyslexiaFont);
    htmlEl.classList.toggle('aw-align-left', state.alignText === 'left');
    htmlEl.classList.toggle('aw-align-center', state.alignText === 'center');
    htmlEl.classList.toggle('aw-align-justify', state.alignText === 'justify');
    htmlEl.classList.toggle('aw-highlight-links', state.highlightLinks);
    htmlEl.classList.toggle('aw-highlight-focus', state.highlightFocus);
    htmlEl.classList.toggle('aw-big-cursor', state.bigCursor);
    htmlEl.classList.toggle('aw-stop-animations', state.stopAnimations || state.profiles?.motion);
    htmlEl.classList.toggle('aw-hide-images', state.hideImages);
    
    // Filters & Appearance
    let filters = [];
    
    if (state.highContrast) { filters.push('contrast(150%)'); htmlEl.style.background = ''; htmlEl.style.color = ''; }
    else if (state.darkMode) { filters.push('invert(100%) hue-rotate(180deg)'); htmlEl.style.background = '#fff'; htmlEl.style.color = '#000'; }
    else if (state.invertColors) { filters.push('invert(100%)'); htmlEl.style.background = ''; htmlEl.style.color = ''; }
    else if (state.lightMode) { htmlEl.style.background = '#ffffff'; htmlEl.style.color = '#000000'; }
    else { htmlEl.style.background = ''; htmlEl.style.color = ''; }

    if (state.colors) { filters.push('grayscale(100%)'); }
    if (state.blueFilter) { filters.push('sepia(50%) hue-rotate(-30deg)'); }
    if (state.colorBlindness !== 'none') { filters.push(`url(#aw-${state.colorBlindness})`); }

    if (filters.length > 0) {
      htmlEl.style.setProperty('filter', filters.join(' '), 'important');
    } else {
      htmlEl.style.removeProperty('filter');
    }

    // Reading Tools
    readingGuide.style.display = state.readingGuide ? 'block' : 'none';
    readingMask.style.display = state.readingMask ? 'block' : 'none';
    
    // Read aloud state check
    if (!state.readAloud && synth) synth.cancel();
  }

  // Initial apply
  applyState();

})();