/* ═══ BUG REPORT WIDGET ═══
   A small persistent floating button on every tool, plus a pulse
   highlight state that turns on automatically when the page detects
   a real error (e.g. "AI service temporarily unavailable") — so
   students who don't think to look for a report button still notice
   it right when something actually went wrong. */
.bugreport-btn {
  position: fixed; bottom: 18px; right: 18px; z-index: 8000;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--white); border: 1.5px solid var(--beige-dk, #D8D0C4);
  box-shadow: 0 2px 10px rgba(28,43,94,.18);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.bugreport-btn:hover { transform: scale(1.08); box-shadow: 0 4px 14px rgba(28,43,94,.25); }
.bugreport-btn.alert {
  border-color: #E65100;
  animation: bugreportPulse 1.6s ease-in-out infinite;
}
@keyframes bugreportPulse {
  0%, 100% { box-shadow: 0 2px 10px rgba(230,81,0,.25); }
  50% { box-shadow: 0 2px 22px rgba(230,81,0,.6); }
}
.bugreport-badge {
  position: absolute; top: -3px; right: -3px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #E65100; border: 2px solid var(--white);
  display: none;
}
.bugreport-btn.alert .bugreport-badge { display: block; }

.bugreport-overlay {
  position: fixed; inset: 0; background: rgba(17,27,62,.7);
  display: none; align-items: center; justify-content: center;
  z-index: 8001; padding: 1.25rem;
}
.bugreport-overlay.open { display: flex; }
.bugreport-box {
  background: var(--white); border-radius: 18px; padding: 1.5rem;
  width: 100%; max-width: 420px; max-height: 85vh; overflow-y: auto;
}
.bugreport-title { font-family: var(--serif); font-size: 1.2rem; font-weight: 700; color: var(--navy); margin-bottom: .3rem; }
.bugreport-sub { font-size: .82rem; color: var(--muted); margin-bottom: 1rem; line-height: 1.5; }
.bugreport-context {
  background: rgba(28,43,94,.05); border-radius: 10px; padding: .65rem .8rem;
  font-size: .72rem; color: var(--muted); margin-bottom: 1rem; line-height: 1.6;
  word-break: break-word;
}
.bugreport-context strong { color: var(--navy); }
.bugreport-textarea {
  width: 100%; min-height: 90px; border: 1.5px solid var(--beige-dk, #D8D0C4);
  border-radius: 10px; padding: .65rem .8rem; font-family: var(--sans);
  font-size: .85rem; resize: vertical; margin-bottom: 1rem; box-sizing: border-box;
}
.bugreport-textarea:focus { outline: none; border-color: var(--navy); }
.bugreport-actions { display: flex; gap: .6rem; }
.bugreport-btn-submit {
  flex: 1; padding: .7rem; background: var(--navy); color: var(--white);
  border: none; border-radius: 30px; font-size: .85rem; font-weight: 700;
  cursor: pointer; font-family: var(--sans);
}
.bugreport-btn-submit:disabled { opacity: .6; cursor: default; }
.bugreport-btn-cancel {
  padding: .7rem 1rem; background: none; color: var(--muted);
  border: 1.5px solid var(--beige-dk, #D8D0C4); border-radius: 30px;
  font-size: .85rem; cursor: pointer; font-family: var(--sans);
}
.bugreport-success { font-size: .85rem; color: #2E7D32; text-align: center; padding: 1rem 0; display: none; }
.bugreport-success.show { display: block; }