#ability-toolbar {
  position: fixed;
  z-index: 999999;
  background: #222;
  color: #fff;
  border-radius: 6px 6px 0 0;
  box-shadow: 0 3px 12px rgba(0,0,0,.15);
  font-family: inherit;
  font-size: 14px;
  /* Prevent background scrolling when toolbar is active */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: transform;
  /* Isolate stacking context */
  isolation: isolate;
}
#ability-toolbar.pos-bottom_right { right: 24px; bottom: 24px; }
#ability-toolbar.pos-bottom_left { left: 24px; bottom: 24px; }
#ability-toolbar.pos-top_right { right: 24px; top: 24px; }
#ability-toolbar.pos-top_left { left: 24px; top: 24px; }
#ability-toolbar .ability-toggle {
  font-size: 26px;
  background: #2d6cdf;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  margin: 6px;
  cursor: pointer;
  transition: background .2s, transform .2s;
}
#ability-toolbar .ability-toggle:hover,
#ability-toolbar .ability-toggle:focus {
  background: #194e9b;
  outline: 2px solid #fff;
  outline-offset: 2px;
  transform: scale(1.05);
}
#ability-toolbar .ability-panel {
  background: #fff;
  color: #222;
  border-radius: 0 0 6px 6px;
  padding: 14px 14px 8px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 200px;
  border: 1px solid #ccc;
  max-height: 70vh;
  overflow-y: auto;
  overflow-x: hidden;
  /* Prevent background interaction */
  touch-action: pan-y;
  /* Create new stacking context */
  position: relative;
  z-index: 1;
  /* Smooth scrolling */
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  /* Visible scrollbar for all browsers */
  scrollbar-width: thin;
  scrollbar-color: #2d6cdf #f0f0f0;
}

/* Webkit scrollbar styling for desktop - always visible */
#ability-toolbar .ability-panel::-webkit-scrollbar {
  width: 12px;
  -webkit-appearance: none;
}

#ability-toolbar .ability-panel::-webkit-scrollbar-track {
  background: #f0f0f0;
  border-radius: 6px;
  margin: 4px 0;
  border: 1px solid #e0e0e0;
}

#ability-toolbar .ability-panel::-webkit-scrollbar-thumb {
  background: #2d6cdf;
  border-radius: 6px;
  border: 2px solid #f0f0f0;
  min-height: 30px;
}

#ability-toolbar .ability-panel::-webkit-scrollbar-thumb:hover {
  background: #194e9b;
  border-color: #e0e0e0;
}

#ability-toolbar .ability-panel::-webkit-scrollbar-thumb:active {
  background: #0f3d7a;
}
#ability-toolbar .ability-panel[hidden] { display: none; }
#ability-toolbar button {
  font-size: 15px;
  padding: 7px 12px;
  border-radius: 4px;
  border: none;
  background: #eee;
  color: #222;
  cursor: pointer;
  margin-bottom: 4px;
  transition: background .2s;
}
#ability-toolbar button:hover,
#ability-toolbar button:focus {
  background: #ddd;
  outline: 2px solid #2d6cdf;
  outline-offset: 2px;
}
#ability-toolbar button[aria-pressed="true"] {
  background: #d2e3ff;
  border: 1px solid #2d6cdf;
}
body.ability-contrast-mode,
body.ability-contrast-mode #ability-toolbar .ability-panel {
  background: #000;
  color: #fff;
}
body.ability-contrast-mode a { color: #fff; text-decoration: underline; }

/* Screen reader only utility */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Parity classes with advanced widget */
/* High contrast (alias of ability-contrast-mode) */
body.high-contrast,
body.high-contrast #ability-toolbar .ability-panel {
  background: #000;
  color: #fff;
}
body.high-contrast a { color: #fff; text-decoration: underline; }

/* Increased line spacing */
body.increased-spacing,
body.increased-spacing p,
body.increased-spacing li,
body.increased-spacing a,
body.increased-spacing h1,
body.increased-spacing h2,
body.increased-spacing h3,
body.increased-spacing h4,
body.increased-spacing h5,
body.increased-spacing h6 {
  line-height: 1.75 !important;
  letter-spacing: 0.02em !important;
}

/* Enhanced focus indicators */
body.enhanced-focus :focus {
  outline: 3px solid #2d6cdf !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

/* Screen reader optimized mode (light-touch) */
body.screen-reader-mode a {
  text-decoration: underline;
}

/* Dyslexia-friendly font with WCAG 1.4.12 (Text Spacing) compliant spacing */
body.dyslexia-friendly {
  font-family: "Comic Sans MS", "OpenDyslexic", "Arial", "Helvetica", sans-serif !important;
  letter-spacing: 0.12em !important; /* WCAG 1.4.12 minimum: 0.12 times font size */
  word-spacing: 0.16em !important;   /* WCAG 1.4.12 minimum: 0.16 times font size */
  line-height: 1.5 !important;       /* WCAG 1.4.12 minimum: 1.5 times font size */
}

/* Enhanced spacing for text elements within dyslexia mode */
body.dyslexia-friendly p,
body.dyslexia-friendly li,
body.dyslexia-friendly blockquote,
body.dyslexia-friendly dd,
body.dyslexia-friendly td,
body.dyslexia-friendly th {
  letter-spacing: 0.12em !important;
  word-spacing: 0.16em !important;
  line-height: 1.5 !important;
}

body.dyslexia-friendly p {
  margin-bottom: 2em !important; /* WCAG 1.4.12: paragraph spacing at least 2 times font size */
}

/* Reduce motion */
body.reduce-motion * {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

/* Prevent body scroll when toolbar panel is open on mobile */
body.ability-toolbar-open {
  overflow: hidden !important;
  position: fixed !important;
  width: 100% !important;
  height: 100% !important;
}

/* Mobile and Tablet Responsive Styles - WCAG 2.1 AA Compliant */
/* Tablet styles (768px and below) */
@media (max-width: 768px) {
  #ability-toolbar {
    right: 12px !important;
    left: auto !important;
    bottom: 12px !important;
    top: auto !important;
    max-width: calc(100vw - 24px);
    /* Ensure toolbar stays on top */
    z-index: 999999 !important;
  }

  #ability-toolbar.pos-bottom_left {
    left: 12px !important;
    right: auto !important;
  }

  #ability-toolbar.pos-top_right {
    top: 12px !important;
    bottom: auto !important;
  }

  #ability-toolbar.pos-top_left {
    top: 12px !important;
    left: 12px !important;
    bottom: auto !important;
    right: auto !important;
  }

  #ability-toolbar .ability-toggle {
    width: 52px;
    height: 52px;
    font-size: 28px;
    margin: 8px;
    /* WCAG 2.1 AA: Minimum touch target size 44x44px */
    min-width: 44px;
    min-height: 44px;
  }

  #ability-toolbar .ability-panel {
    min-width: 240px;
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 80px);
    padding: 16px;
    gap: 10px;
    /* Enhanced scrollbar visibility */
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #2d6cdf #f0f0f0;
    /* Prevent background interaction */
    touch-action: pan-y;
    /* Ensure panel is isolated */
    position: relative;
    z-index: 1;
  }

  /* Webkit scrollbar styling for better visibility */
  #ability-toolbar .ability-panel::-webkit-scrollbar {
    width: 8px;
  }

  #ability-toolbar .ability-panel::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 4px;
  }

  #ability-toolbar .ability-panel::-webkit-scrollbar-thumb {
    background: #2d6cdf;
    border-radius: 4px;
  }

  #ability-toolbar .ability-panel::-webkit-scrollbar-thumb:hover {
    background: #194e9b;
  }

  #ability-toolbar button {
    font-size: 16px;
    padding: 12px 16px;
    /* WCAG 2.1 AA: Minimum touch target size 44x44px */
    min-height: 44px;
    margin-bottom: 8px;
    text-align: left;
    width: 100%;
    /* Better touch feedback */
    -webkit-tap-highlight-color: rgba(45, 108, 223, 0.2);
  }
}

/* Mobile phone styles (600px and below) */
@media (max-width: 600px) {
  #ability-toolbar {
    right: 8px !important;
    left: auto !important;
    bottom: 8px !important;
    top: auto !important;
    max-width: calc(100vw - 16px);
    border-radius: 8px 8px 0 0;
    /* Ensure toolbar stays on top and prevents background scroll */
    z-index: 999999 !important;
    /* Prevent touch events from reaching background */
    touch-action: none;
  }
  
  /* When panel is open, prevent body scroll */
  body.ability-toolbar-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
    touch-action: none;
  }
  
  /* Allow scrolling within panel only */
  #ability-toolbar .ability-panel {
    touch-action: pan-y;
  }

  #ability-toolbar.pos-bottom_left {
    left: 8px !important;
    right: auto !important;
  }

  #ability-toolbar.pos-top_right {
    top: 8px !important;
    bottom: auto !important;
  }

  #ability-toolbar.pos-top_left {
    top: 8px !important;
    left: 8px !important;
    bottom: auto !important;
    right: auto !important;
  }

  #ability-toolbar .ability-toggle {
    width: 56px;
    height: 56px;
    font-size: 30px;
    margin: 10px;
    /* WCAG 2.1 AA: Minimum touch target size 44x44px - using 56px for better usability */
    min-width: 56px;
    min-height: 56px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  }

  #ability-toolbar .ability-panel {
    min-width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 80px);
    padding: 20px 16px;
    gap: 12px;
    border-radius: 0 0 8px 8px;
    /* Enhanced scrolling with visible scrollbar */
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: auto;
    scrollbar-color: #2d6cdf #f0f0f0;
    /* Ensure panel fits on screen */
    box-sizing: border-box;
    /* Prevent background interaction */
    touch-action: pan-y;
    position: relative;
    z-index: 1;
  }

  /* Enhanced scrollbar for mobile */
  #ability-toolbar .ability-panel::-webkit-scrollbar {
    width: 10px;
  }

  #ability-toolbar .ability-panel::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 5px;
    margin: 8px 0;
  }

  #ability-toolbar .ability-panel::-webkit-scrollbar-thumb {
    background: #2d6cdf;
    border-radius: 5px;
    border: 2px solid #f0f0f0;
  }

  #ability-toolbar .ability-panel::-webkit-scrollbar-thumb:hover {
    background: #194e9b;
  }

  #ability-toolbar button {
    font-size: 17px;
    padding: 14px 18px;
    /* WCAG 2.1 AA: Minimum touch target size 44x44px - using 48px for better usability */
    min-height: 48px;
    margin-bottom: 10px;
    text-align: left;
    width: 100%;
    border-radius: 6px;
    /* Enhanced touch feedback */
    -webkit-tap-highlight-color: rgba(45, 108, 223, 0.3);
    touch-action: manipulation;
  }

  #ability-toolbar button:active {
    transform: scale(0.98);
    background: #d0d0d0;
  }

  /* Ensure all buttons are visible and accessible */
  #ability-toolbar .ability-panel button:last-child {
    margin-bottom: 0;
  }
}

/* Extra small mobile devices (400px and below) */
@media (max-width: 400px) {
  #ability-toolbar {
    right: 4px !important;
    left: auto !important;
    bottom: 4px !important;
    top: auto !important;
    max-width: calc(100vw - 8px);
    z-index: 999999 !important;
    touch-action: none;
  }

  #ability-toolbar.pos-bottom_left {
    left: 4px !important;
    right: auto !important;
  }

  #ability-toolbar.pos-top_right {
    top: 4px !important;
    bottom: auto !important;
  }

  #ability-toolbar.pos-top_left {
    top: 4px !important;
    left: 4px !important;
    bottom: auto !important;
    right: auto !important;
  }

  #ability-toolbar .ability-toggle {
    width: 52px;
    height: 52px;
    font-size: 28px;
    margin: 8px;
  }

  #ability-toolbar .ability-panel {
    min-width: calc(100vw - 8px);
    max-width: calc(100vw - 8px);
    max-height: calc(100vh - 80px);
    padding: 16px 12px;
    box-sizing: border-box;
    touch-action: pan-y;
    position: relative;
    z-index: 1;
  }

  #ability-toolbar button {
    font-size: 16px;
    padding: 12px 14px;
    min-height: 44px;
  }
}

/* Landscape mobile orientation */
@media (max-width: 900px) and (orientation: landscape) {
  #ability-toolbar .ability-panel {
    max-height: calc(100vh - 60px);
  }
  
  /* Ensure toolbar doesn't interfere with landscape view */
  #ability-toolbar {
    z-index: 999999 !important;
  }
}

/* High DPI / Retina display adjustments */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  #ability-toolbar .ability-toggle {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  }

  #ability-toolbar button {
    border: 1px solid rgba(0, 0, 0, 0.1);
  }
}

/* Accessibility: Ensure focus is always visible on mobile */
@media (max-width: 600px) {
  #ability-toolbar .ability-toggle:focus,
  #ability-toolbar button:focus {
    outline: 3px solid #2d6cdf !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 3px rgba(45, 108, 223, 0.3) !important;
  }

  /* Prevent text selection on buttons for better touch experience */
  #ability-toolbar button {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
}

/* Ensure toolbar doesn't overlap with mobile browser UI */
@media (max-width: 600px) {
  @supports (padding: max(0px)) {
    #ability-toolbar.pos-bottom_right,
    #ability-toolbar.pos-bottom_left {
      bottom: max(8px, env(safe-area-inset-bottom));
    }

    #ability-toolbar.pos-top_right,
    #ability-toolbar.pos-top_left {
      top: max(8px, env(safe-area-inset-top));
    }
  }
}

/* Additional mobile optimizations for better fit */
@media (max-width: 600px) {
  /* Ensure panel content is compact and fits on screen */
  #ability-toolbar .ability-panel {
    /* Use flexbox with better spacing */
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* Ensure padding doesn't cause overflow */
    padding: 16px 12px;
    box-sizing: border-box;
  }
  
  /* Compact button layout */
  #ability-toolbar button {
    /* Ensure buttons don't overflow */
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  /* Ensure toggle button is always accessible */
  #ability-toolbar .ability-toggle {
    /* Prevent accidental background scroll */
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(45, 108, 223, 0.3);
  }
}

/* Prevent any background scrolling when toolbar is open */
body.ability-toolbar-open {
  /* Store scroll position */
  --scroll-top: 0;
}

body.ability-toolbar-open::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999998;
  /* Distraction-free dimming overlay */
  background: rgba(0, 0, 0, 0.35);
  /* Capture pointer events so background is not interactive */
  pointer-events: auto;
}

/* Ensure toolbar is always on top */
@media (max-width: 600px) {
  #ability-toolbar,
  #ability-toolbar * {
    /* Create new stacking context */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
  }
}

/* Centered modal-style layout when toolbar panel is open */
#ability-toolbar.ability-toolbar-modal-open {
  inset: 0 !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  /* Use full viewport as a flex container to center the panel */
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  pointer-events: none; /* children re-enable pointer events */
}

#ability-toolbar.ability-toolbar-modal-open .ability-panel {
  pointer-events: auto;
  /* Ensure the panel is always fully visible with no internal scroll */
  width: min(480px, 100vw - 32px);
  max-height: min(520px, 100vh - 64px);
  overflow: hidden;
  border-radius: 12px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#ability-toolbar.ability-toolbar-modal-open .ability-toggle {
  /* Keep toggle usable as a close control while panel is open */
  position: absolute;
  top: 16px;
  right: 16px;
  margin: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* On small screens, make the panel nearly full-screen but still fully visible */
@media (max-width: 768px) {
  #ability-toolbar.ability-toolbar-modal-open .ability-panel {
    width: calc(100vw - 24px);
    max-height: calc(100vh - 32px);
    font-size: 0.95rem;
    gap: 6px;
  }

  #ability-toolbar.ability-toolbar-modal-open .ability-panel button {
    /* Allow buttons to shrink so everything fits without scrolling */
    flex: 1 1 auto;
    min-height: 40px;
  }
}

@media (max-width: 600px) {
  #ability-toolbar.ability-toolbar-modal-open .ability-panel {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 24px);
    padding: 12px;
    font-size: 0.9rem;
    gap: 6px;
  }

  #ability-toolbar.ability-toolbar-modal-open .ability-panel button {
    font-size: 0.9rem;
    padding: 10px 12px;
    flex: 1 1 auto;
  }
}

@media (max-width: 400px) {
  #ability-toolbar.ability-toolbar-modal-open .ability-panel {
    width: calc(100vw - 8px);
    max-height: calc(100vh - 16px);
    padding: 10px;
    font-size: 0.85rem;
  }

  #ability-toolbar.ability-toolbar-modal-open .ability-panel button {
    font-size: 0.85rem;
    padding: 8px 10px;
  }
}