/* Minimal utilities required by the accessibility widget
         (replaces global Bootstrap, which clashed with the app's design) */
      .d-none { display: none !important; }
      .d-block { display: block !important; }
      .d-flex { display: flex !important; }
      .flex-row { flex-direction: row !important; }
      .justify-content-between { justify-content: space-between !important; }
      .me-1 { margin-inline-end: 0.25rem !important; }
      .mt-1 { margin-top: 0.25rem !important; }
      @media (min-width: 992px) {
        #accessibilityMenu .d-lg-block { display: block !important; }
      }
      #accessibilityMenu .btn-reset {
        display: inline-block;
        width: 100%;
        text-align: center;
        background: #1A2744;
        color: #fff;
        border-radius: 8px;
        padding: 8px 12px;
        cursor: pointer;
        text-decoration: none;
      }
      #accessibilityMenu .btn-reset:hover { background: #2a3a6a; }

      html, body { background-color: #F0EDE8; }
      .dark, .dark body { background-color: hsl(222, 20%, 11%); }

      /* Trigger button — base (no side set; JS applies left/right) */
      #lnkAccessibility {
        position: fixed;
        bottom: 90px;
        z-index: 9999;
        background: #1A2744;
        color: #fff;
        border: none;
        padding: 10px 11px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 8px rgba(0,0,0,0.25);
        transition: background 0.2s;
        text-decoration: none;
      }
      #lnkAccessibility:hover { background: #2a3a6a; }
      /* AR → left edge */
      #lnkAccessibility.a11y-left {
        left: 0; right: auto;
        border-radius: 0 8px 8px 0;
      }
      /* EN → right edge */
      #lnkAccessibility.a11y-right {
        right: 0; left: auto;
        border-radius: 8px 0 0 8px;
      }

      /* Panel — base */
      #accessibilityMenu {
        display: none;
        position: fixed !important;
        bottom: 140px !important;
        top: auto !important;
        z-index: 10000 !important;
        width: 340px !important;
        max-height: 80vh !important;
        overflow-y: auto !important;
        box-shadow: 0 4px 20px rgba(0,0,0,0.2) !important;
        font-family: 'Tajawal', sans-serif;
      }
      /* AR → left edge */
      #accessibilityMenu.a11y-left {
        left: 0 !important; right: auto !important;
        border-radius: 0 12px 12px 0 !important;
      }
      /* EN → right edge */
      #accessibilityMenu.a11y-right {
        right: 0 !important; left: auto !important;
        border-radius: 12px 0 0 12px !important;
      }

      /* Icon sizing inside action items */
      #userway .action__inner img {
        width: 36px;
        height: 36px;
        display: block;
        margin: 0 auto 4px;
      }

/* Embed widget pages (/embed/:entity) run under a strict CSP
   (style-src 'self', script-src 'self') that blocks the legacy
   accessibility widget's inline styles + jQuery. Hide it entirely
   there — the chat's own AccessibilityPanel covers embed users. */
html.embed-mode #lnkAccessibility,
html.embed-mode #accessibilityMenu,
html.embed-mode #userway,
html.embed-mode .uw-exception-class,
html.embed-mode .uw-s10-reading-guide {
  display: none !important;
}