@layer base {
  .reportButton {
    opacity: 0.6;
    transition: opacity var(--animation-duration-fast) ease;
  }

  .reportButton:hover {
    opacity: 1;
  }

  .flagIcon {
    width: 1rem;
    height: 1rem;
    color: var(--warning);
  }

  .dialogContent {
    max-width: 500px;
    max-height: 80vh;
    overflow-y: auto;
  }

  .dialogTitle {
    color: var(--warning);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
  }

  .form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6);
  }

  .formGroup {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
  }

  .label {
    font-weight: 500;
    color: var(--popup-foreground);
    font-size: 0.875rem;
  }

  .radioGroup {
    gap: var(--spacing-3);
  }

  .radioItem {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
  }

  .radioLabel {
    font-size: 0.875rem;
    color: var(--popup-foreground);
    cursor: pointer;
    line-height: 1.4;
  }

  .textarea {
    min-height: 100px;
    resize: vertical;
  }

  .charCount {
    font-size: 0.75rem;
    color: var(--muted-foreground);
    text-align: right;
  }

  .formActions {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-3);
    margin-top: var(--spacing-4);
  }

  .submitButton {
    min-width: 140px;
  }

  .successMessage {
    text-align: center;
    padding: var(--spacing-6);
  }

  .successIcon {
    font-size: 3rem;
    margin-bottom: var(--spacing-4);
  }

  .successTitle {
    font-family: var(--font-family-heading);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--success);
    margin-bottom: var(--spacing-2);
  }

  .successText {
    color: var(--muted-foreground);
    line-height: 1.5;
  }

  .errorMessage {
    padding: var(--spacing-3);
    background-color: color-mix(in srgb, var(--error) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--error) 30%, transparent);
    border-radius: var(--radius);
    color: var(--error);
    font-size: 0.875rem;
    line-height: 1.4;
  }

  /* Responsive design */
  @media (max-width: 480px) {
    .dialogContent {
      max-width: 95vw;
      padding: var(--spacing-4);
    }

    .formActions {
      flex-direction: column;
    }

    .submitButton {
      min-width: auto;
    }
  }

  /* High contrast mode support */
  @media (prefers-contrast: high) {
    .reportButton {
      opacity: 1;
    }

    .flagIcon {
      color: var(--foreground);
    }
  }

  /* Reduced motion support */
  @media (prefers-reduced-motion: reduce) {
    .reportButton {
      transition: none;
    }
  }
}