/* ================================================================
   SYNAPSE ACCESSIBILITY SUITE v2.0
   External CSS — loaded by ALL templates
   ================================================================ */

/* ---- BUTTON GLOW (ON/OFF FEEDBACK) ---- */
.synapse-on {
  background: linear-gradient(135deg, #ffd700, #ffb700) !important;
  color: #1a1a2e !important;
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.6), inset 0 0 4px rgba(255, 215, 0, 0.3) !important;
  border: 2px solid #ffc107 !important;
  transform: scale(1.1) !important;
  transition: all 0.25s ease !important;
}
.synapse-on img {
  filter: brightness(0) saturate(100%) !important;
}

/* ---- BUTTON TOOLTIPS ---- */
[data-tooltip] {
  position: relative;
}
[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  background: #1a1a2e;
  color: #fff;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  white-space: nowrap;
  z-index: 99999;
  pointer-events: none;
  opacity: 0;
  animation: synTooltipIn 0.2s ease forwards;
}
@keyframes synTooltipIn {
  to { opacity: 1; }
}

/* ---- READING MASK ---- */
#synapse-reading-mask {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 90000;
  pointer-events: none;
}
#synapse-reading-mask.active {
  display: block;
}
#synapse-mask-top,
#synapse-mask-bottom {
  position: fixed;
  left: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.65);
  transition: top 0.05s linear, height 0.05s linear;
  pointer-events: none;
}
#synapse-mask-top { top: 0; }
#synapse-mask-bottom { bottom: 0; }
/* Reading mask window border */
#synapse-mask-window {
  position: fixed;
  left: 0;
  width: 100%;
  border-top: 2px solid #ffd700;
  border-bottom: 2px solid #ffd700;
  pointer-events: none;
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.15);
}

/* ---- LINE SPACING ---- */
body.synapse-line-spacing-1 * {
  line-height: 1.8 !important;
}
body.synapse-line-spacing-2 * {
  line-height: 2.2 !important;
}
body.synapse-line-spacing-2 p,
body.synapse-line-spacing-2 li,
body.synapse-line-spacing-2 span,
body.synapse-line-spacing-2 div {
  margin-bottom: 0.4em !important;
}

/* ---- COLOR OVERLAY / TINT ---- */
#synapse-color-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 89000;
  pointer-events: none;
  transition: background-color 0.3s ease;
}
#synapse-color-overlay.warm {
  display: block;
  background-color: rgba(255, 200, 100, 0.12);
}
#synapse-color-overlay.cool {
  display: block;
  background-color: rgba(100, 180, 255, 0.10);
}
#synapse-color-overlay.rose {
  display: block;
  background-color: rgba(255, 150, 180, 0.08);
}

/* ---- CURSOR HIGHLIGHT ---- */
#synapse-cursor-highlight {
  display: none;
  position: fixed;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid rgba(102, 126, 234, 0.6);
  background: rgba(102, 126, 234, 0.08);
  pointer-events: none;
  z-index: 89500;
  transform: translate(-50%, -50%);
  transition: left 0.03s, top 0.03s;
}
#synapse-cursor-highlight.active {
  display: block;
}

/* ---- DICTIONARY TOOLTIP ---- */
#synapse-dict-tooltip {
  display: none;
  position: fixed;
  z-index: 99998;
  background: #1a1a2e;
  color: #e2e8f0;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.5;
  max-width: 320px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  border: 1px solid rgba(102, 126, 234, 0.4);
  pointer-events: auto;
}
#synapse-dict-tooltip.visible {
  display: block;
  animation: synDictIn 0.2s ease;
}
#synapse-dict-tooltip .dict-term {
  color: #ffd700;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 6px;
  display: block;
}
#synapse-dict-tooltip .dict-close {
  position: absolute;
  top: 6px;
  right: 10px;
  cursor: pointer;
  color: #888;
  font-size: 16px;
  line-height: 1;
}
#synapse-dict-tooltip .dict-close:hover {
  color: #fff;
}
@keyframes synDictIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---- CALM MODE ---- */
body.synapse-calm-mode {
  --calm-bg: #f5f0eb;
}
body.synapse-calm-mode * {
  animation-duration: 0s !important;
  transition-duration: 0.1s !important;
}
body.synapse-calm-mode img:not([src*="logo"]):not([src*="icon"]) {
  opacity: 0.7;
}
body.synapse-calm-mode .badge,
body.synapse-calm-mode .tag {
  filter: saturate(0.4);
}

/* ---- NEW BUTTON STYLING (nav-btn-small for new features) ---- */
.nav-btn-small.syn-new-feature {
  position: relative;
}
.nav-btn-small.syn-new-feature::before {
  content: '';
  position: absolute;
  top: -2px;
  right: -2px;
  width: 7px;
  height: 7px;
  background: #ffd700;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s;
}

/* ---- PROGRESS TRACKER BAR ---- */
#synapse-progress-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: rgba(102, 126, 234, 0.15);
  z-index: 90000;
}
#synapse-progress-bar.active {
  display: block;
}
#synapse-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #667eea, #764ba2);
  border-radius: 0 2px 2px 0;
  transition: width 0.3s ease;
  width: 0%;
}

/* ---- BOOKMARK READING POINTER ---- */
#synapse-bookmark {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #667eea, #ffd700, #764ba2);
  z-index: 88000;
  pointer-events: none;
  box-shadow: 0 0 8px rgba(102, 126, 234, 0.5);
}
#synapse-bookmark.active {
  display: block;
}
#synapse-bookmark::before {
  content: '📌';
  position: absolute;
  left: 8px;
  top: -12px;
  font-size: 16px;
  pointer-events: none;
}
body.synapse-bookmark-mode {
  cursor: crosshair !important;
}
body.synapse-bookmark-mode *:not(nav):not(nav *) {
  cursor: crosshair !important;
}

/* ============================================
   UNIVERSAL MOBILE v5 — Reference: Tools page
   Applied to ALL pages via synapse_a11y.css
   ============================================ */

/* --- ACCESS MENU: consistent everywhere --- */
#accessBtns, #accessMenuInline, .access-menu-inline {
  flex-wrap: wrap !important;
}

/* --- TABLET & MOBILE (<=768px) --- */
@media (max-width: 768px) {
  /* NAVBAR — all pages */
  nav, nav[style] {
    height: auto !important;
    min-height: 50px !important;
    padding: 6px 10px !important;
    flex-direction: column !important;
    gap: 6px !important;
  }

  /* LOGO */
  nav img[src*="butterfly"], nav img[alt="Synapse"],
  .nav-brand img, .logo-section img {
    width: 32px !important;
    height: 32px !important;
    margin: 2px !important;
  }

  /* BRAND TEXT */
  nav span[style*="22px"], nav span[style*="18px"],
  .nav-brand-text .title, .logo-text span:first-child {
    font-size: 15px !important;
  }
  nav span[style*="12px"],
  .nav-brand-text .subtitle, .logo-text span:last-child {
    display: none !important;
  }

  /* NAV BUTTONS — same as tools: 34px */
  nav button, nav button[style],
  .nav-buttons button, .nav-buttons button[style],
  .nav-links button, .nav-links a.nav-btn,
  button.nav-btn:not(.nav-btn-small):not(.tab-btn):not(.editor-btn),
  a.nav-btn:not(.nav-btn-small),
  .nav-icon-btn, .nav-btn.nav-icon-btn {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    font-size: 16px !important;
    padding: 0 !important;
  }

  /* BUTTERFLY/ACCESSIBILITY TRIGGER */
  #butterflyAccessBtn, #butterflyAccessBtn[style],
  nav button[title="Accessibility"], nav button[title="Accessibility"][style] {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
  }
  #butterflyAccessBtn img, nav button[title="Accessibility"] img,
  nav img[alt="Accessibility"] {
    width: 34px !important;
    height: 34px !important;
  }

  /* TEXT LINK BUTTONS (Back to Task) — emoji only */
  nav a.nav-btn:not(.nav-icon-btn):not(.nav-btn-small) {
    font-size: 0 !important;
    width: 34px !important;
    height: 34px !important;
    padding: 4px !important;
    overflow: hidden !important;
  }

  /* ACCESS MENU ICONS — 30px like tools */
  #accessBtns button, #accessBtns button[style],
  #accessMenuInline button, #accessMenuInline button[style],
  .access-menu-inline button, .nav-btn-small, .nav-btn-small[style] {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    font-size: 14px !important;
    padding: 0 !important;
    border-radius: 50% !important;
  }

  /* ACCESS MENU LAYOUT */
  #accessBtns, #accessMenuInline, .access-menu-inline {
    flex-wrap: wrap !important;
    max-width: 90vw !important;
    gap: 4px !important;
    justify-content: center !important;
  }

  /* NAV GROUPS */
  nav > div, .nav-buttons, .nav-links {
    gap: 4px !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
  }

  /* COURSE PAGE SPECIFIC — match tools sizes */
  .navbar {
    padding: 6px 10px !important;
    gap: 4px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
}

/* --- SMALL PHONE (<=480px) --- */
@media (max-width: 480px) {
  nav, nav[style], .navbar {
    padding: 4px 6px !important;
    gap: 4px !important;
  }

  nav img[src*="butterfly"], nav img[alt="Synapse"],
  .nav-brand img, .logo-section img {
    width: 26px !important;
    height: 26px !important;
  }

  nav span[style*="22px"], nav span[style*="18px"],
  .nav-brand-text .title, .logo-text span:first-child {
    font-size: 13px !important;
  }

  nav button, nav button[style],
  .nav-buttons button, .nav-links button,
  button.nav-btn:not(.nav-btn-small):not(.tab-btn):not(.editor-btn),
  .nav-icon-btn, .nav-btn.nav-icon-btn {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    font-size: 14px !important;
  }

  #butterflyAccessBtn, nav button[title="Accessibility"] {
    width: 28px !important;
    height: 28px !important;
  }
  #butterflyAccessBtn img, nav button[title="Accessibility"] img {
    width: 28px !important;
    height: 28px !important;
  }

  #accessBtns button, #accessMenuInline button,
  .nav-btn-small, .nav-btn-small[style] {
    width: 26px !important;
    height: 26px !important;
    font-size: 12px !important;
  }

  #accessBtns, #accessMenuInline, .access-menu-inline {
    gap: 3px !important;
    max-width: 95vw !important;
  }
}

/* --- ACCESS MENU: flow naturally on mobile --- */
@media (max-width: 768px) {
  .access-menu-inline.open,
  .access-menu-inline[style*="max-width"],
  #accessBtns[style*="flex"],
  #accessMenuInline[style*="flex"] {
    position: static !important;
    transform: none !important;
    max-width: 100% !important;
    width: 100% !important;
    overflow: visible !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    background: rgba(255,255,255,0.1) !important;
    border-radius: 10px !important;
    padding: 6px !important;
    gap: 5px !important;
    margin-top: 4px !important;
  }
  .access-menu-inline .nav-btn-small,
  #accessBtns button, #accessMenuInline button {
    background: rgba(255,255,255,0.2) !important;
    border: none !important;
    color: white !important;
  }
}

/* Butterfly thinking animation */
@keyframes butterflyFloat {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  25% { transform: translateY(-3px) rotate(-5deg); }
  50% { transform: translateY(-5px) rotate(0deg); }
  75% { transform: translateY(-3px) rotate(5deg); }
}
@keyframes typingDots {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1); }
}
.chat-avatar.ai.thinking,
.chat-avatar.thinking {
  animation: butterflyFloat 1.5s ease-in-out infinite;
}
.typing-indicator {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 4px;
}
.typing-indicator .dot {
  width: 8px;
  height: 8px;
  background: #667eea;
  border-radius: 50%;
  animation: typingDots 1.4s ease-in-out infinite;
}
.typing-indicator .dot:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator .dot:nth-child(3) { animation-delay: 0.4s; }

/* High contrast: banner / mission card */
body.high-contrast .research-task-card,
body.high-contrast .task-info {
  background: #000000 !important;
  color: #ffffff !important;
  border: 2px solid #ffff00 !important;
}
body.high-contrast .research-task-card h2 {
  color: #ffff00 !important;
}
body.high-contrast .research-task-card p,
body.high-contrast .research-task-card li,
body.high-contrast .research-task-card span,
body.high-contrast .research-task-card strong {
  color: #ffffff !important;
}
body.high-contrast .research-task-card a {
  color: #00ccff !important;
}
/* High contrast: chat bubbles */
body.high-contrast .chat-bubble {
  background: #000000 !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
}
body.high-contrast .chat-message.ai .chat-bubble,
body.high-contrast .chat-message.ai-msg .chat-bubble {
  background: #1a1a2e !important;
  color: #ffffff !important;
  border: 2px solid #ffff00 !important;
}
body.high-contrast .chat-message.user .chat-bubble,
body.high-contrast .chat-message.user-msg .chat-bubble {
  background: #0a2a0a !important;
  color: #ffffff !important;
  border: 2px solid #00ff00 !important;
}
body.high-contrast .chat-bubble code {
  color: #ff6600 !important;
  background: #1a1a1a !important;
}
body.high-contrast .chat-bubble pre {
  background: #0a0a0a !important;
  border: 1px solid #666 !important;
}
body.high-contrast .chat-bubble pre code {
  color: #00ff00 !important;
}
body.high-contrast .chat-bubble strong,
body.high-contrast .chat-bubble h2,
body.high-contrast .chat-bubble h3 {
  color: #ffff00 !important;
}
body.high-contrast .chat-input {
  background: #000000 !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
}
body.high-contrast .chat-panel,
body.high-contrast .chat-messages,
body.high-contrast #chatMessages {
  background: #000000 !important;
}

/* High contrast: force black bg on ALL elements with gradients */
body.high-contrast .research-task-card,
body.high-contrast .research-task-card *,
body.high-contrast .task-info,
body.high-contrast .task-info * {
  background: #000000 !important;
  background-image: none !important;
  background-color: #000000 !important;
  color: #ffffff !important;
}
body.high-contrast .research-task-card h2,
body.high-contrast .research-task-card strong {
  color: #ffff00 !important;
}
body.high-contrast .research-task-card li {
  color: #ffffff !important;
}
/* Sidebar in high contrast */
body.high-contrast .sidebar h3,
body.high-contrast .sidebar h4,
body.high-contrast .course-list h3 {
  color: #ffff00 !important;
}
body.high-contrast .sidebar p,
body.high-contrast .sidebar span {
  color: #ffffff !important;
}
/* Kill ALL gradients in high contrast */
body.high-contrast [style*="gradient"],
body.high-contrast [style*="background"] {
  background: #000000 !important;
  background-image: none !important;
}
/* Lesson panel / content area */
body.high-contrast .lesson-panel,
body.high-contrast .lesson-content,
body.high-contrast .lesson-panel * {
  background: #000000 !important;
  background-image: none !important;
  color: #ffffff !important;
}


/* High contrast: sidebar title + subtitle */
body.high-contrast .sidebar h3,
body.high-contrast .sidebar h4,
body.high-contrast .sidebar h2,
body.high-contrast .course-list h3,
body.high-contrast .course-list h2 {
  color: #60a5fa !important;
}
body.high-contrast .sidebar p,
body.high-contrast .sidebar .subtitle,
body.high-contrast .sidebar span:not(.badge),
body.high-contrast .course-list p {
  color: #e2e8f0 !important;
}


/* Butterfly always has subtle pulse */
.chat-avatar.ai {
  animation: butterflyPulse 2s ease-in-out infinite;
}
@keyframes butterflyPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08) rotate(3deg); }
}
/* When thinking: more visible float */
.chat-avatar.ai.thinking {
  animation: butterflyFloat 1.2s ease-in-out infinite !important;
}