.review-demo,
.review-demo * { box-sizing: border-box; }

.review-demo {
  position: fixed;
  z-index: 140;
  left: max(1rem, env(safe-area-inset-left));
  bottom: max(1rem, env(safe-area-inset-bottom));
  display: grid;
  justify-items: start;
  gap: .75rem;
  pointer-events: none;
  color: #fff;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.review-demo > * { pointer-events: auto; }
.review-demo button, .review-demo textarea { font: inherit; }

.review-bubble {
  min-height: 3.25rem;
  padding: 0 1.1rem;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  background: #111;
  color: #fff;
  box-shadow: 0 14px 34px rgba(0,0,0,.28);
  font-weight: 780;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.review-bubble-dot {
  width: .62rem;
  height: .62rem;
  border-radius: 50%;
  background: #ffd400;
  box-shadow: 0 0 0 .3rem rgba(255,212,0,.14);
}

.review-panel {
  width: min(24rem, calc(100vw - 2rem));
  max-height: min(40rem, calc(100vh - 6rem));
  overflow: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: clamp(1rem, 2.5vw, 1.2rem);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 1.4rem;
  visibility: hidden;
  background: rgba(16,16,16,.94);
  color: #fff;
  box-shadow: 0 24px 70px rgba(0,0,0,.42);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  transform-origin: 12% 100%;
}

.review-panel header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.review-panel header > div { min-width: 0; padding-top: .1rem; }

.review-eyebrow {
  color: #ffd400;
  font-size: .7rem;
  font-weight: 850;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.review-panel h2 {
  margin: .3rem 0 0;
  color: #fff;
  font-family: inherit;
  font-size: 1.55rem;
  line-height: 1.05;
  letter-spacing: -.035em;
}

.review-icon-button {
  flex: 0 0 2.75rem;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.09);
  color: #fff;
  line-height: 0;
  cursor: pointer;
}

.review-icon-button svg { display: block; width: 1.1rem; height: 1.1rem; overflow: visible; }
.review-icon-button path { fill: none; stroke: currentColor; stroke-width: 2.35; stroke-linecap: round; vector-effect: non-scaling-stroke; }

.review-meta {
  margin: 1rem 0;
  padding: .85rem;
  border-radius: 1rem;
  display: grid;
  gap: .65rem;
  background: rgba(255,255,255,.065);
}

.review-meta div { display: grid; grid-template-columns: 5rem minmax(0,1fr); gap: .7rem; }
.review-meta dt { color: #aaa; font-size: .73rem; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; }
.review-meta dd { min-width: 0; margin: 0; overflow-wrap: anywhere; font-size: .84rem; }
.review-actions, .review-feedback-buttons { display: grid; gap: .6rem; }

.review-action {
  min-height: 3.125rem;
  padding: .7rem 1rem;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: .9rem;
  background: #252525;
  color: #fff;
  font-weight: 760;
  line-height: 1.2;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.review-action--approve { border-color: #ffd400; background: #ffd400; color: #080808; }
.review-action--quiet { background: transparent; color: #ccc; }
.review-action--decline { border-color: rgba(255,154,145,.35); }
.review-action:disabled { opacity: .58; cursor: wait; }
.review-feedback-form { margin: 0; }
.review-feedback-form label { display: block; margin-bottom: .5rem; font-weight: 760; line-height: 1.3; }
.review-feedback-form label span { color: #aaa; font-weight: 650; }

.review-feedback-form textarea {
  display: block;
  width: 100%;
  min-height: 7rem;
  max-height: 16rem;
  resize: vertical;
  padding: .8rem;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: .85rem;
  background: #090909;
  color: #fff;
  line-height: 1.45;
}

.review-field-help { margin: .4rem 0 0; color: #aaa; font-size: .72rem; line-height: 1.4; }
.review-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.review-feedback-buttons { grid-template-columns: minmax(0,1fr) minmax(0,1fr); margin-top: .75rem; }

.review-widget-status {
  margin: .85rem 0 0;
  color: #eee;
  line-height: 1.45;
  font-size: .86rem;
  overflow-wrap: anywhere;
}

.review-widget-status:empty { display: none; }
.review-widget-status:not(:empty) { padding: .75rem .8rem; border: 1px solid rgba(255,255,255,.1); border-radius: .85rem; background: rgba(255,255,255,.055); }
.review-widget-status.is-success { border-color: rgba(200,245,155,.18); background: rgba(88,132,50,.14); color: #d5f8b3; }
.review-widget-status.is-error { border-color: rgba(255,154,145,.2); background: rgba(155,47,38,.13); color: #ffaaa2; }
.review-widget-status a { color: inherit; text-decoration: underline; text-underline-offset: .16em; }
.review-mode-note { margin: .8rem 0 0; padding-top: .75rem; border-top: 1px solid rgba(255,255,255,.08); color: #aaa; font-size: .7rem; line-height: 1.4; }

.review-demo button:focus-visible,
.review-demo textarea:focus-visible,
.review-demo a:focus-visible { outline: 3px solid #ffd400; outline-offset: 3px; }

@media (max-width: 899px) {
  .review-demo { left: max(.7rem, env(safe-area-inset-left)); bottom: max(5.8rem, calc(env(safe-area-inset-bottom) + 5.1rem)); }
  .review-panel { max-height: calc(100vh - 10rem); }
}

@media (max-width: 560px) {
  .review-panel { width: calc(100vw - 1.4rem); max-height: calc(100vh - 10rem); }
}

@media (max-width: 360px) {
  .review-meta div { grid-template-columns: 4.5rem minmax(0,1fr); gap: .55rem; }
  .review-feedback-buttons { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .review-demo .pressable { transition: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .review-panel { background: #111; backdrop-filter: none; -webkit-backdrop-filter: none; }
}

@media (prefers-contrast: more) {
  .review-panel, .review-bubble, .review-action { border-color: #fff; }
}