.patient-feedback-prompt {
  font-family: inherit;
}

.patient-feedback-prompt__launcher {
  right: 0;
  /* Mobile: compact icon-only chip at the top right, 100px down. */
  top: 100px;
  bottom: auto;
  z-index: 9998;
  /* Mobile reaches feedback via the nav entry below Help instead. */
  display: none;
}

.patient-feedback-prompt__tab {
  background: #fff;
  color: var(--primary-brand-color, #5c70ff);
  /* Same edge-tab treatment at every width: mobile keeps the desktop's slim
     vertical form factor (just bottom-anchored instead of centered) because
     the wide text pill read as obtrusive on phones. */
  writing-mode: vertical-rl;
  transform: translateX(0) rotate(180deg);
  transition: box-shadow 160ms ease, transform 160ms ease;
}

.patient-feedback-prompt__tab:hover {
  /* No translateX here: even a 3px shift lifts the tab off the screen edge
     and reads as fully detached. The shadow bump is the only hover cue. */
  transform: rotate(180deg);
}

.patient-feedback-prompt__tab svg {
  transform: rotate(180deg);
}

.patient-feedback-prompt__dismiss {
  transform: translateY(-50%);
}

.patient-feedback-prompt__dismiss:hover {
  transform: translateY(-50%) scale(1.06);
}

.patient-feedback-prompt__backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  opacity: 0;
  transition: opacity 180ms ease-out;
}

.patient-feedback-prompt__backdrop[hidden] {
  display: none !important;
}

.patient-feedback-prompt__backdrop.is-open {
  opacity: 1;
}

.patient-feedback-prompt__dialog {
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  transition: opacity 180ms ease-out, transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.patient-feedback-prompt__backdrop.is-open .patient-feedback-prompt__dialog {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.patient-feedback-prompt__close {
  transition: background-color 160ms ease, transform 160ms ease;
}

.patient-feedback-prompt__close:hover {
  transform: rotate(6deg);
}

.patient-feedback-prompt__status {
  color: #b42318;
}

.patient-feedback-prompt__status.is-success {
  color: #15803d;
}

body.patient-feedback-prompt-open {
  overflow: hidden;
}

@media (min-width: 640px) {
  .patient-feedback-prompt__launcher {
    display: block;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .patient-feedback-prompt__tab,
  .patient-feedback-prompt__dismiss,
  .patient-feedback-prompt__backdrop,
  .patient-feedback-prompt__dialog,
  .patient-feedback-prompt__close {
    transition: none;
  }
}