[data-review-ui] {
  font-family: var(--font, system-ui, sans-serif);
}

.review-toggle,
.review-copy,
.review-clear,
.review-save,
.review-cancel {
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-weight: 500;
}

.review-toggle {
  position: fixed;
  z-index: 10001;
  right: 1.25rem;
  bottom: 1.25rem;
  min-height: 48px;
  padding: 0.7rem 1rem;
  background: var(--forest, #0f231e);
  color: var(--white, #fff);
  box-shadow: 0 8px 24px rgb(15 35 30 / 22%);
}

.review-toggle[aria-pressed="true"] {
  background: var(--blue, #67b2e6);
  color: var(--forest, #0f231e);
}

.review-panel {
  position: fixed;
  z-index: 10000;
  right: 1.25rem;
  bottom: 5rem;
  box-sizing: border-box;
  width: min(18rem, calc(100vw - 2.5rem));
  padding: 0.75rem;
  background: var(--white, #fff);
  border: 1px solid rgb(15 35 30 / 18%);
  border-radius: 12px;
  box-shadow: 0 12px 36px rgb(15 35 30 / 18%);
  color: var(--forest, #0f231e);
}

.review-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: -0.15rem -0.15rem 0.55rem;
  cursor: grab;
  touch-action: none;
}

.review-panel-header:active { cursor: grabbing; }
.review-panel-handle { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.review-panel-close {
  display: grid;
  width: 1.75rem;
  height: 1.75rem;
  place-items: center;
  border: 0;
  border-radius: 999px;
  padding: 0;
  background: transparent;
  color: var(--forest, #0f231e);
  font: 1.4rem/1 sans-serif;
  cursor: pointer;
}
.review-panel-close:hover { background: var(--paper, #ebe8e3); }
.review-panel-close:focus-visible { outline: 2px solid var(--blue, #67b2e6); outline-offset: 2px; }

.review-panel p {
  margin: 0 0 0.6rem;
  font-size: 0.875rem;
  line-height: 1.35;
}

.review-actions {
  display: flex;
  gap: 0.5rem;
}

.review-copy,
.review-clear,
.review-save,
.review-cancel {
  min-height: 36px;
  padding: 0.4rem 0.7rem;
}

.review-copy,
.review-save {
  background: var(--forest, #0f231e);
  color: var(--white, #fff);
}

.review-clear,
.review-cancel {
  background: var(--paper, #ebe8e3);
  color: var(--forest, #0f231e);
}

.review-highlight {
  position: fixed;
  z-index: 9998;
  pointer-events: none;
  border: 2px solid var(--review-highlight, var(--blue, #67b2e6));
  background: color-mix(in srgb, var(--review-highlight, var(--blue, #67b2e6)) 16%, transparent);
}

.review-pin {
  position: fixed;
  z-index: 9999;
  display: grid;
  width: 27px;
  height: 27px;
  padding: 0;
  place-items: center;
  border: 2px solid var(--white, #fff);
  border-radius: 50%;
  background: var(--forest, #0f231e);
  color: var(--white, #fff);
  font: 500 0.8rem/1 var(--font, system-ui, sans-serif);
  box-shadow: 0 2px 8px rgb(15 35 30 / 30%);
}

.review-dialog {
  width: min(31rem, calc(100vw - 2rem));
  padding: 0;
  border: 0;
  border-radius: 14px;
  color: var(--forest, #0f231e);
  background: var(--white, #fff);
  box-shadow: 0 16px 50px rgb(15 35 30 / 30%);
}

.review-dialog::backdrop { background: rgb(15 35 30 / 48%); }

.review-dialog form { padding: 1.25rem; }
.review-dialog h2 { margin: 0 0 0.35rem; font-size: 1.25rem; }
.review-target { margin: 0 0 1rem; font-size: 0.9rem; line-height: 1.35; }
.review-dialog label { display: block; margin-bottom: 0.4rem; font-weight: 500; }
.review-dialog textarea {
  width: 100%;
  min-height: 8rem;
  padding: 0.7rem;
  border: 1px solid rgb(15 35 30 / 35%);
  border-radius: 8px;
  background: var(--paper, #ebe8e3);
  resize: vertical;
}
.review-dialog menu { display: flex; justify-content: flex-end; gap: 0.5rem; margin: 1rem 0 0; padding: 0; }

@media (max-width: 560px) {
  .review-toggle { right: 0.75rem; bottom: 0.75rem; }
  .review-panel { right: 0.75rem; bottom: 4.5rem; width: min(18rem, calc(100vw - 1.5rem)); }
}