.feedback-dialog {
 max-width: 40rem;
}

.feedback-include {
 display: flex;
 align-items: center;
 gap: 8px;
 font-size: 14px;
}

.feedback-report {
 display: flex;
 flex-direction: column;
 gap: 8px;
 padding: 16px 0;
 border-top: 1px solid var(--border);
}

.feedback-report-head {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 8px;
}

.feedback-report-body {
 margin: 0;
 white-space: pre-wrap;
}

.feedback-snapshot {
 max-height: 200px;
 overflow: auto;
 font-size: 12px;
 white-space: pre-wrap;
 word-break: break-word;
}

/* One pill, pinned to the right edge on every
 * viewport. Two hit targets share the fill; a
 * vertical bar splits Feedback from the dismiss
 * icon. Surface tokens follow the color scheme
 * and are not the brand accent. */
.feedback-fab {
 position: fixed;
 z-index: 40;
 right: max(
  16px,
  env(safe-area-inset-right)
 );
 bottom: max(
  16px,
  env(safe-area-inset-bottom)
 );
 display: inline-flex;
 align-items: stretch;
 height: 40px;
 border: 1px solid var(--border);
 border-radius: 999px;
 background: var(--card);
 color: var(--card-foreground);
 box-shadow:
  0 1px 2px
   color-mix(
    in srgb,
    var(--foreground) 12%,
    transparent
   ),
  0 8px 24px
   color-mix(
    in srgb,
    var(--foreground) 18%,
    transparent
   );
}

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

.feedback-fab-open,
.feedback-fab-dismiss {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 margin: 0;
 border: 0;
 background: transparent;
 color: inherit;
 font: inherit;
 font-size: var(--text-base);
 font-weight: 600;
 line-height: 1;
 cursor: pointer;
}

.feedback-fab-open {
 gap: 8px;
 padding: 0 12px 0 14px;
 border-radius: 999px 0 0 999px;
}

.feedback-fab-dismiss {
 width: auto;
 padding: 0 12px 0 8px;
 border-radius: 0 999px 999px 0;
}

.feedback-fab-divider {
 width: 1px;
 align-self: stretch;
 flex-shrink: 0;
 background: color-mix(
  in srgb,
  var(--foreground) 28%,
  transparent
 );
}

.feedback-fab-open:hover,
.feedback-fab-dismiss:hover {
 background: color-mix(
  in srgb,
  var(--foreground) 8%,
  transparent
 );
}

.feedback-fab-open:focus-visible,
.feedback-fab-dismiss:focus-visible {
 outline: none;
 box-shadow: inset 0 0 0 2px var(--ring);
}

.feedback-fab-open svg {
 width: 18px;
 height: 18px;
 flex-shrink: 0;
}

.feedback-fab-dismiss svg {
 width: 16px;
 height: 16px;
}

body:has(.mock-banner) .feedback-fab {
 bottom: calc(
  48px +
   max(
    16px,
    env(safe-area-inset-bottom)
   )
 );
}

@media (max-width: 720px) {
 .feedback-fab {
  height: 44px;
 }
}

.feedback-status {
 max-width: 16rem;
}