/* Floating feedback widget (legacy :3000 port, simplified).

   A fixed bottom-right launcher (dark pill, mirroring the legacy
   FeedbackToolbar's bg-foreground chip) toggles a card panel carrying
   the legacy page-feedback form — Bug / Suggestion chips, a comment
   textarea, and a submit. The element-selector, screenshot upload, and
   GitHub/LLM backend are intentionally not ported.

   Tokens only; nothing hardcoded except the legacy shadow recipe. */

@layer components {
  .feedback-widget {
    position: fixed;
    inset-block-end: var(--space-6);
    inset-inline-end: var(--space-6);
    z-index: 60;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-3);
  }

  /* On mobile the bottom tab bar owns the bottom edge — lift the
     launcher above it so the two never overlap. */
  @media (max-width: 1023px) {
    .feedback-widget {
      inset-block-end: calc(var(--tab-bar-height) + env(safe-area-inset-bottom) + var(--space-4));
    }
  }

  /* ----- Launcher ----- */
  .feedback-widget__launcher {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 52px;
    block-size: 52px;
    border-radius: var(--radius-lg);
    border: none;
    background: var(--md-on-surface);
    color: var(--md-surface);
    box-shadow: var(--shadow-lg);
    cursor: pointer;
    transition:
      transform var(--motion-spring-fast-effects-duration) var(--motion-spring-fast-effects),
      background-color var(--motion-spring-fast-effects-duration) var(--motion-spring-fast-effects);
  }
  .feedback-widget__launcher:hover { transform: translateY(-1px); }
  .feedback-widget__launcher:active { transform: scale(0.96); }
  .feedback-widget__launcher:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring), var(--shadow-lg);
  }
  .feedback-widget__launcher .icon { inline-size: 24px; block-size: 24px; }

  /* When the panel is open, swap the launcher to a primary accent so
     it reads as the active surface. */
  .feedback-widget[data-open="true"] .feedback-widget__launcher {
    background: var(--md-primary);
    color: var(--md-on-primary);
  }

  /* ----- Panel ----- */
  .feedback-widget__panel {
    inline-size: min(340px, calc(100vw - 2 * var(--space-6)));
    background: var(--md-surface-container-low);
    border: 1px solid var(--md-border-muted);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
  }

  .feedback-widget__panel-inner {
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .feedback-widget__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
  }

  .feedback-widget__title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--md-on-surface);
  }

  .feedback-widget__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 32px;
    block-size: 32px;
    border: none;
    background: transparent;
    color: var(--md-on-surface-variant);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition:
      color var(--motion-spring-fast-effects-duration) var(--motion-spring-fast-effects),
      background-color var(--motion-spring-fast-effects-duration) var(--motion-spring-fast-effects);
  }
  .feedback-widget__close:hover {
    color: var(--md-on-surface);
    background: var(--md-surface-container);
  }
  .feedback-widget__close:focus-visible { outline: none; box-shadow: var(--focus-ring); }
  .feedback-widget__close .icon { inline-size: 18px; block-size: 18px; }

  /* ----- Form ----- */
  .feedback-widget__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .feedback-widget__form-error {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--md-error, #b3261e);
  }

  /* Type chips: native radios, visually a pill pair. The label is the
     pill; the input is visually hidden but keyboard-reachable. */
  .feedback-widget__types {
    display: flex;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    border: none;
  }

  .feedback-widget__chip {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
  }
  /* The radio input is visually hidden via the shared .sr-only utility
     (globals.css) applied on the markup — keeps it keyboard-reachable
     while the label span carries the pill styling. */
  .feedback-widget__chip span {
    display: inline-flex;
    align-items: center;
    padding-block: var(--space-2);
    padding-inline: var(--space-4);
    border-radius: var(--radius-full, 999px);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--md-on-surface-variant);
    background: var(--md-surface-container);
    transition:
      color var(--motion-spring-fast-effects-duration) var(--motion-spring-fast-effects),
      background-color var(--motion-spring-fast-effects-duration) var(--motion-spring-fast-effects);
  }
  .feedback-widget__chip:hover span { color: var(--md-on-surface); }
  .feedback-widget__chip input:checked + span {
    color: var(--md-on-primary);
    background: var(--md-primary);
  }
  .feedback-widget__chip input:focus-visible + span {
    outline: none;
    box-shadow: var(--focus-ring);
  }

  .feedback-widget__textarea {
    inline-size: 100%;
    resize: vertical;
    min-block-size: 92px;
    padding: var(--space-3);
    border: 1px solid var(--md-border);
    border-radius: var(--radius-md);
    background: var(--md-surface);
    color: var(--md-on-surface);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    line-height: 1.5;
    transition: border-color var(--motion-spring-fast-effects-duration) var(--motion-spring-fast-effects);
  }
  .feedback-widget__textarea::placeholder { color: var(--md-on-surface-variant); }
  .feedback-widget__textarea:focus-visible {
    outline: none;
    border-color: var(--md-primary);
    box-shadow: var(--focus-ring);
  }

  .feedback-widget__actions {
    display: flex;
    justify-content: flex-end;
  }

  .feedback-widget__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-block: var(--space-3);
    padding-inline: var(--space-5);
    border: none;
    border-radius: var(--radius-md);
    background: var(--md-primary);
    color: var(--md-on-primary);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--motion-spring-fast-effects-duration) var(--motion-spring-fast-effects);
  }
  /* Hover / active feedback comes from the .state-layer ::after overlay
     (globals.css) applied on the markup — same pattern as signin / add
     submit buttons. No --md-primary-hover (reserved for save-heart). */
  .feedback-widget__submit:focus-visible { outline: none; box-shadow: var(--focus-ring); }
  .feedback-widget__submit:disabled { opacity: 0.6; cursor: progress; }

  /* ----- Thanks state ----- */
  .feedback-widget__thanks {
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    align-items: flex-start;
  }
  .feedback-widget__thanks-title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--md-on-surface);
  }
  .feedback-widget__thanks-body {
    margin: 0 0 var(--space-2);
    font-size: var(--text-sm);
    color: var(--md-on-surface-variant);
  }

  @media (prefers-reduced-motion: reduce) {
    .feedback-widget__launcher,
    .feedback-widget__chip span,
    .feedback-widget__submit { transition: none; }
  }
}