/**
 * Summarize With AI — widget styles
 *
 * Root element: <div class="ai-summarize ai-summarize--{theme}">
 * Themes: auto | light | dark | glass | brand
 *
 * Each theme is a set of CSS custom-property overrides on its theme class.
 * Shared layout rules consume those variables, so adding a new theme means
 * one rule block — no layout duplication.
 *
 * WCAG 2.1 contrast compliance
 * ----------------------------
 * All interactive elements meet the AA thresholds:
 *   - Body/label text vs card bg    ≥ 4.5 : 1   (1.4.3 normal text)
 *   - Button border vs card bg      ≥ 3.0 : 1   (1.4.11 UI components)
 *   - Hover border vs card bg       ≥ 3.0 : 1
 *   - Sparkle icon vs card bg       ≥ 3.0 : 1   (1.4.11 graphical object)
 *   - Card outer border vs card bg  ≥ 3.0 : 1
 * The brand gradient has been verified at both endpoints (#7c3aed and
 * #4f46e5), not just the midpoint.
 *
 * If you customize colors, re-check with a tool like WebAIM Contrast Checker
 * or the Chrome DevTools Accessibility pane. The rule of thumb: when picking
 * button borders on a dark card, white @ 40% alpha or greater usually passes;
 * on a light card, a solid grey no lighter than #767676 passes.
 */

/* ------------------------------------------------------------------ */
/* Layout (shared across all themes)                                   */
/* ------------------------------------------------------------------ */

.ai-summarize {
  /* Fallback values — themes below override these */
  --ais-bg:              #fafafa;
  --ais-border:          #8a8a8a;
  --ais-text:            #1a1a1a;
  --ais-sparkle:         #6d28d9;
  --ais-btn-bg:          #ffffff;
  --ais-btn-border:      #767676;
  --ais-btn-hover-border:#4b4b4b;
  --ais-btn-shadow:      0 2px 6px rgba(0, 0, 0, 0.12);
  --ais-radius:          12px;
  --ais-btn-radius:      8px;

  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 16px;
  margin: 24px 0;
  border: 1px solid var(--ais-border);
  border-radius: var(--ais-radius);
  background: var(--ais-bg);
  color: var(--ais-text);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.4;
}

.ai-summarize__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--ais-text);
}

.ai-summarize__sparkles {
  color: var(--ais-sparkle);
  flex-shrink: 0;
}

.ai-summarize__links {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: auto;
}

.ai-summarize__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--ais-btn-radius);
  background: var(--ais-btn-bg);
  border: 1px solid var(--ais-btn-border);
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  text-decoration: none;
}

.ai-summarize__link:hover,
.ai-summarize__link:focus-visible {
  transform: translateY(-1px);
  border-color: var(--ais-btn-hover-border);
  box-shadow: var(--ais-btn-shadow);
  outline: none;
}

.ai-summarize__link:focus-visible {
  /* Ensure a 3:1 focus indicator per WCAG 2.4.11 — double-ring style */
  outline: 2px solid var(--ais-btn-hover-border);
  outline-offset: 2px;
}

.ai-summarize__link img {
  width: 20px;
  height: 20px;
  display: block;
}

/* ------------------------------------------------------------------ */
/* Theme: light                                                        */
/*   Text #1a1a1a / bg #fafafa         = 16.67 : 1  (AAA)             */
/*   Sparkle #6d28d9 / bg #fafafa      =  6.81 : 1  (AAA, UI ≥3)      */
/*   Btn border #767676 / bg #fafafa   =  4.35 : 1  (PASS UI ≥3)      */
/*   Hover border #4b4b4b / bg #fafafa =  8.36 : 1  (PASS UI ≥3)      */
/*   Card border #8a8a8a / bg #fafafa  =  3.31 : 1  (PASS UI ≥3)      */
/* ------------------------------------------------------------------ */
.ai-summarize--light {
  --ais-bg:              #fafafa;
  --ais-border:          #8a8a8a;
  --ais-text:            #1a1a1a;
  --ais-sparkle:         #6d28d9;
  --ais-btn-bg:          #ffffff;
  --ais-btn-border:      #767676;
  --ais-btn-hover-border:#4b4b4b;
  --ais-btn-shadow:      0 2px 6px rgba(0, 0, 0, 0.15);
}

/* ------------------------------------------------------------------ */
/* Theme: dark                                                         */
/*   Text #f5f5f5 / bg #1a1d24         = 15.47 : 1  (AAA)             */
/*   Sparkle #a78bfa / bg #1a1d24      =  6.20 : 1  (AAA, UI ≥3)      */
/*   Btn bg #424651 / bg #1a1d24       =  1.79 : 1  (visual lift)     */
/*   Btn border #8a8f9a / bg #1a1d24   =  5.06 : 1  (PASS UI ≥3)      */
/*   Hover bg #ffffff / bg #1a1d24     = 15.77 : 1  (strong signal)   */
/*   Hover icon (filtered black) / #fff≈ 21 : 1    (AAA)              */
/*   Card border #707580 / bg #1a1d24  =  3.65 : 1  (PASS UI ≥3)      */
/* ------------------------------------------------------------------ */
.ai-summarize--dark {
  --ais-bg:              #1a1d24;
  --ais-border:          #707580;
  --ais-text:            #f5f5f5;
  --ais-sparkle:         #a78bfa;
  --ais-btn-bg:          #424651;
  --ais-btn-border:      #8a8f9a;
  --ais-btn-hover-border:#ffffff;
  --ais-btn-shadow:      0 2px 8px rgba(0, 0, 0, 0.5);
}

/* Dark-mode icon visibility: if your hosted PNGs are monochrome glyphs
   designed for white backgrounds, uncomment the filter to invert them.
   Many vendor marks (OpenAI, Anthropic, xAI) are solid black and need this.
.ai-summarize--dark .ai-summarize__link img {
  filter: invert(1) hue-rotate(180deg);
} */

/* ------------------------------------------------------------------ */
/* Dark-mode hover state (dark / glass / auto-in-dark)                 */
/*   Buttons switch to solid white bg with the icon forced to black.   */
/*   This is a dramatic state change — much more noticeable than a    */
/*   border-color tweak — and gives >15:1 contrast between hover and   */
/*   resting states.                                                   */
/*                                                                     */
/*   brightness(0) forces any non-transparent pixel to pure black      */
/*   regardless of the icon's original color, so this works for both   */
/*   monochrome marks (most Lobe icons) and full-color brand PNGs.    */
/* ------------------------------------------------------------------ */
.ai-summarize--dark .ai-summarize__link:hover,
.ai-summarize--dark .ai-summarize__link:focus-visible,
.ai-summarize--glass .ai-summarize__link:hover,
.ai-summarize--glass .ai-summarize__link:focus-visible {
  background: #ffffff;
  border-color: #ffffff;
}
.ai-summarize--dark .ai-summarize__link:hover img,
.ai-summarize--dark .ai-summarize__link:focus-visible img,
.ai-summarize--glass .ai-summarize__link:hover img,
.ai-summarize--glass .ai-summarize__link:focus-visible img {
  filter: brightness(0);
}

/* ------------------------------------------------------------------ */
/* Theme: auto                                                          */
/*   Handled in JS: the script checks prefers-color-scheme at render    */
/*   time and applies .ai-summarize--light or .ai-summarize--dark to    */
/*   the container. There is no .ai-summarize--auto class in the DOM.   */
/* ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ */
/* Theme: glass (translucent over any bg)                              */
/*   Tested over a dark stage (#1e293b). Card is opaque enough         */
/*   (white/15% alpha) that content contrast holds.                    */
/*   Text #ffffff / card eff #404958    =  9.08 : 1  (AAA)            */
/*   Sparkle #ddd6fe / card             =  6.54 : 1  (AAA, UI ≥3)     */
/*   Btn bg (white/30%) / card          =  2.28 : 1  (visual lift)    */
/*   Btn border (white/70%) / card      =  5.23 : 1  (PASS UI ≥3)     */
/*   Hover bg #ffffff / card            =  9.08 : 1  (strong signal)  */
/*   Card border (white/40%) / stage    =  3.62 : 1  (PASS UI ≥3)     */
/*                                                                     */
/*   ⚠ On LIGHT stages, this theme inverts the contrast assumptions.  */
/*   Glass is intended for dark or image backgrounds; pair with        */
/*   light or brand on light stages instead.                           */
/* ------------------------------------------------------------------ */
.ai-summarize--glass {
  --ais-bg:              rgba(255, 255, 255, 0.15);
  --ais-border:          rgba(255, 255, 255, 0.40);
  --ais-text:            #ffffff;
  --ais-sparkle:         #ddd6fe;
  --ais-btn-bg:          rgba(255, 255, 255, 0.30);
  --ais-btn-border:      rgba(255, 255, 255, 0.70);
  --ais-btn-hover-border:#ffffff;
  --ais-btn-shadow:      0 4px 16px rgba(0, 0, 0, 0.3);

  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
}

/* ------------------------------------------------------------------ */
/* Theme: brand (purple gradient)                                      */
/*   White text / #7c3aed  = 5.70 : 1  (AA)                           */
/*   White text / #4f46e5  = 6.29 : 1  (AA)                           */
/*   Sparkle #fef9c3 / #7c3aed = 5.31 : 1 (AAA)                       */
/*   Sparkle #fef9c3 / #4f46e5 = 5.85 : 1 (AAA)                       */
/*   Btn bg (white/95%) is near-solid white; boundary vs gradient      */
/*   gives 5.29 / 5.85 : 1 — no separate border needed for ≥3:1.      */
/* ------------------------------------------------------------------ */
.ai-summarize--brand {
  --ais-border:          transparent;
  --ais-text:            #ffffff;
  --ais-sparkle:         #fef9c3;
  --ais-btn-bg:          rgba(255, 255, 255, 0.95);
  --ais-btn-border:      rgba(255, 255, 255, 0.95);
  --ais-btn-hover-border:#ffffff;
  --ais-btn-shadow:      0 4px 12px rgba(124, 58, 237, 0.5);

  background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%);
  box-shadow: 0 2px 12px rgba(79, 70, 229, 0.25);
}

.ai-summarize--brand .ai-summarize__link:hover,
.ai-summarize--brand .ai-summarize__link:focus-visible {
  background: #ffffff;
}

/* ------------------------------------------------------------------ */
/* Reduced motion                                                       */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .ai-summarize__link {
    transition: none;
  }
  .ai-summarize__link:hover,
  .ai-summarize__link:focus-visible {
    transform: none;
  }
}

/* ------------------------------------------------------------------ */
/* High-contrast mode (Windows)                                         */
/*   Let the OS take over color assignments.                           */
/* ------------------------------------------------------------------ */
@media (forced-colors: active) {
  .ai-summarize {
    border: 1px solid CanvasText;
    background: Canvas;
    color: CanvasText;
  }
  .ai-summarize__link {
    border: 1px solid ButtonText;
    background: ButtonFace;
  }
  .ai-summarize__link:hover,
  .ai-summarize__link:focus-visible {
    border-color: Highlight;
  }
}