.bug-report-widget {
  position: fixed;
  right: 0;
  bottom: 16px;
  z-index: 9999;
  font-family: inherit;
}

@media (max-width: 768px) {
  .bug-report-widget {
    bottom: 4rem;
  }
}

.bug-report-tab {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  background: var(--system-red);
  color: var(--accent-on);
  border: none;
  border-radius: 6px 0 0 6px;
  margin-bottom: 4rem;
  padding: var(--space-2) var(--space-3);
  font-size: 20px;
  cursor: pointer;
  transition: right 0.25s ease-out;
}

.bug-report--open .bug-report-tab {
  right: 320px;
}

.bug-report-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.bug-report-tab:hover,
.bug-report-tab:focus,
.bug-report-tab:active {
  background: color-mix(in srgb, var(--system-red) 85%, #000);
  color: var(--accent-on);
  outline: none;
}

.bug-report-panel {
  position: absolute;
  right: 0;
  bottom: 0;
  background: var(--background);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: 0 4px 12px color-mix(in srgb, rgb(0, 0, 0) 15%, transparent);
  padding: var(--space-3);
  width: 320px;

  /* Slide in from the right — off-screen when closed */
  transform: translateX(100%);
  opacity: 0;
  visibility: hidden;
  transition:
    transform 0.25s ease-out,
    opacity 0.25s ease-out,
    visibility 0.25s;
}

.bug-report--open .bug-report-panel {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
}

.bug-report-panel textarea {
  width: 100%;
  min-height: 100px;
}
.bug-report-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.bug-report-send {
  background: var(--accent);
  color: var(--accent-on);
  border: none;
  padding: 6px 10px;
  border-radius: var(--radius-button);
}
.bug-report-cancel {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 6px 10px;
  border-radius: var(--radius-button);
  cursor: pointer;
  color: var(--text);
}

.bug-report-thanks {
  padding: var(--space-3);
  color: var(--text);
}