.app-feedback { position: fixed; bottom: 24px; right: 24px; z-index: 1100; color: var(--weave-color-ink); font: var(--weave-text-sm)/1.5 var(--weave-font-ui); }
.app-feedback button { cursor: pointer; padding: 8px 16px; min-height: 44px; min-width: 44px; border: 1px solid var(--weave-color-rule-strong); border-radius: var(--weave-radius-md); background: var(--weave-color-canvas); color: var(--weave-color-ink); font: inherit; }
.app-feedback button:focus-visible, .app-feedback textarea:focus-visible { outline: 3px solid var(--weave-color-success); outline-offset: 3px; }
.app-feedback .app-feedback-mic { position: relative; display: flex; gap: 8px; align-items: center; justify-content: center; padding: 0; width: 48px; height: 48px; border-radius: 50%; background: var(--weave-color-success); color: var(--weave-color-on-action); box-shadow: 0 4px 16px var(--weave-color-scrim); }
.app-feedback .app-feedback-mic.is-recording { background: var(--weave-color-danger); outline: 3px solid var(--weave-color-danger-surface); width: auto; min-width: 76px; height: 44px; padding: 0 8px; border-radius: var(--weave-radius-lg); animation: app-feedback-pulse 2s ease-in-out infinite; }
.app-feedback section { position: absolute; bottom: 64px; right: 0; box-sizing: border-box; width: 336px; max-width: calc(100vw - 32px); padding: 24px; border: 1px solid var(--weave-color-rule-strong); border-radius: var(--weave-radius-lg); background: var(--weave-color-paper); box-shadow: 0 8px 32px var(--weave-color-scrim); max-height: calc(100dvh - 170px); overflow: auto; }
.app-feedback header { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.app-feedback h2 { margin: 0; font-size: var(--weave-text-md); }
.app-feedback p { margin: 12px 0; }
.app-feedback label { display: block; }
.app-feedback .app-feedback-share { font-size: var(--weave-text-2xs); }
.app-feedback textarea { box-sizing: border-box; display: block; width: 100%; padding: 8px; margin: 8px 0 16px; font: inherit; color: inherit; border: 1px solid var(--weave-color-rule-strong); border-radius: var(--weave-radius-md); background: var(--weave-color-paper); }
.app-feedback-recording { color: var(--weave-color-danger); font-weight: 600; }
.app-feedback-status:empty { display: none; }
@media (max-width: 680px) {
  .app-feedback { right: 16px; bottom: calc(var(--mobile-nav-height, 4.5rem) + 16px + env(safe-area-inset-bottom)); }
  .app-feedback section { max-height: calc(100dvh - 230px); }
}
@media print { .app-feedback { display: none; } }
.app-feedback-icon { display: flex; }
.app-feedback-elapsed { font-variant-numeric: tabular-nums; font-weight: 600; }
.app-feedback-square { font-size: var(--weave-text-xl); line-height: 1; }
.app-feedback-badge { position: absolute; top: -4px; right: -4px; background: var(--weave-color-danger); border: 2px solid var(--weave-color-paper); border-radius: 50%; width: 20px; height: 20px; font-size: var(--weave-text-2xs); }
.app-feedback-toast { position: absolute; bottom: 0; right: 64px; width: max-content; padding: 12px; border-radius: var(--weave-radius-md); background: var(--weave-color-success); color: var(--weave-color-on-action); }
.app-feedback [data-stage="ready"] button, .app-feedback [data-stage="share-failed"] button { width: 100%; margin-top: 8px; }
.app-feedback .app-feedback-primary { background: var(--weave-color-success); color: var(--weave-color-on-action); }
.app-feedback .app-feedback-stop { display: block; width: 100%; background: var(--weave-color-danger); color: var(--weave-color-on-action); font-size: var(--weave-text-md); }
.app-feedback .app-feedback-link { border-color: transparent; text-decoration: underline; background: transparent; }
.app-feedback button:disabled { cursor: wait; opacity: .65; }
.app-feedback [data-stage="review"] button { margin: 4px 0; }
.app-feedback audio { width: 100%; display: block; margin: 16px 0; }
.app-feedback audio:focus-visible { outline: 3px solid var(--weave-color-success); outline-offset: 3px; }
.app-feedback meter { display: block; width: 100%; height: 24px; accent-color: var(--weave-color-success); }
.app-feedback-silence { color: var(--weave-color-danger); }
@keyframes app-feedback-pulse { 50% { box-shadow: 0 0 0 6px var(--weave-color-danger-surface); } }
@media (prefers-reduced-motion: reduce) { .app-feedback .app-feedback-mic.is-recording { animation: none; } }

.app-feedback .app-feedback-reopen { position: absolute; right: 0; bottom: 52px; padding: 0; border-radius: 50%; font-weight: 600; }

.app-feedback [hidden] { display: none; }