.feedback-widget {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 150;
  color: #17352a;
  font-family: inherit;
}

.feedback-launcher,
.feedback-drawer button {
  font: inherit;
}

.feedback-launcher {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 0 15px;
  border: 1px solid #17352a;
  border-radius: 6px;
  background: #17352a;
  color: #fff;
  box-shadow: 0 10px 26px rgba(17, 49, 37, 0.22);
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
}

.feedback-launcher-icon {
  display: none;
  width: 20px;
  height: 20px;
}

.feedback-launcher:hover,
.feedback-launcher[aria-expanded="true"] {
  background: var(--brand-accent, #d77b24);
}

.feedback-count {
  display: inline-grid;
  min-width: 20px;
  height: 20px;
  place-items: center;
  padding: 0 5px;
  border-radius: 10px;
  background: #e8c56f;
  color: #17352a;
  font-size: 10px;
}

.feedback-drawer {
  position: absolute;
  right: 0;
  bottom: 52px;
  display: flex;
  width: min(390px, calc(100vw - 24px));
  max-height: min(680px, calc(100vh - 92px));
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #c8d3cb;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 20px 60px rgba(17, 49, 37, 0.25);
}

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

.feedback-drawer-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 17px 14px;
  border-bottom: 1px solid #dce4de;
  background: #f7faf7;
}

.feedback-drawer-header > div {
  display: grid;
  gap: 4px;
}

.feedback-drawer-header strong {
  font-size: 15px;
}

.feedback-drawer-header small,
.feedback-drawer p,
.feedback-drawer label,
.feedback-drawer input,
.feedback-drawer textarea {
  font-size: 12px;
}

.feedback-drawer-header small,
.feedback-drawer p,
.feedback-status,
.feedback-comment-meta,
.feedback-empty {
  color: #607067;
}

.feedback-close,
.feedback-refresh {
  min-width: 32px;
  height: 32px;
  padding: 0 9px;
  border: 1px solid #c8d3cb;
  border-radius: 5px;
  background: #fff;
  color: #17352a;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
}

.feedback-close {
  font-size: 20px;
  line-height: 1;
}

.feedback-close:hover,
.feedback-refresh:hover {
  border-color: var(--brand-accent, #d77b24);
  background: #eaf2eb;
}

.feedback-drawer button:focus-visible,
.feedback-launcher:focus-visible {
  outline: 3px solid rgba(215, 123, 36, 0.35);
  outline-offset: 2px;
}

.feedback-drawer button:disabled,
.feedback-drawer input:disabled,
.feedback-drawer textarea:disabled {
  cursor: wait;
  opacity: 0.65;
}

.feedback-drawer-body {
  display: flex;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
}

.feedback-intro,
.feedback-surface,
.feedback-toolbar,
.feedback-status,
.feedback-form,
.feedback-filters,
.feedback-list {
  margin-right: 17px;
  margin-left: 17px;
}

.feedback-intro {
  margin-top: 14px;
  margin-bottom: 8px;
  line-height: 1.45;
}

.feedback-surface {
  display: inline-flex;
  align-self: flex-start;
  margin-bottom: 12px;
  padding: 5px 8px;
  border-radius: 4px;
  background: #eaf2eb;
  color: var(--brand-accent-strong, #a95312);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.feedback-toolbar {
  display: flex;
  gap: 8px;
}

.feedback-select,
.feedback-submit,
.feedback-cancel {
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--brand-accent, #d77b24);
  border-radius: 5px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
}

.feedback-select,
.feedback-submit {
  background: var(--brand-accent, #d77b24);
  color: #fff;
}

.feedback-select {
  flex: 1;
}

.feedback-select:hover,
.feedback-submit:hover {
  background: #17352a;
}

.feedback-select[aria-pressed="true"] {
  border-color: #b36b33;
  background: #b36b33;
}

.feedback-status {
  min-height: 31px;
  margin-top: 8px;
  margin-bottom: 3px;
  line-height: 1.45;
}

.feedback-status[data-state="success"] {
  color: #23613e;
}

.feedback-status[data-state="error"] {
  color: #9b2f2f;
}

.feedback-status[data-state="loading"] {
  color: #7a501d;
}

.feedback-form {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #c8d3cb;
  border-radius: 6px;
  background: #f7faf7;
}

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

.feedback-selected {
  display: grid;
  gap: 3px;
  padding-bottom: 9px;
  border-bottom: 1px solid #dce4de;
}

.feedback-selected span {
  color: #607067;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.feedback-selected strong {
  font-size: 12px;
  overflow-wrap: anywhere;
}

.feedback-form label {
  display: grid;
  gap: 5px;
  color: #395347;
  font-weight: 800;
}

.feedback-optional,
.feedback-name-help {
  color: #607067;
  font-size: 10px;
  font-weight: 500;
}

.feedback-name-help {
  display: block;
  line-height: 1.4;
}

.feedback-form input,
.feedback-form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 9px;
  border: 1px solid #c8d3cb;
  border-radius: 4px;
  background: #fff;
  color: #17352a;
  font-family: inherit;
  font-weight: 500;
}

.feedback-form textarea {
  min-height: 78px;
  resize: vertical;
}

.feedback-form input:focus,
.feedback-form textarea:focus {
  outline: 2px solid rgba(215, 123, 36, 0.28);
  border-color: var(--brand-accent, #d77b24);
}

.feedback-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.feedback-cancel {
  border-color: #c8d3cb;
  background: #fff;
  color: #395347;
}

.feedback-cancel:hover {
  background: #eaf2eb;
}

.feedback-filters {
  display: flex;
  gap: 15px;
  margin-top: 13px;
  border-bottom: 1px solid #dce4de;
}

.feedback-filter {
  min-height: 32px;
  padding: 0 0 8px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #607067;
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
}

.feedback-filter.is-active {
  border-bottom-color: var(--brand-accent, #d77b24);
  color: #17352a;
}

.feedback-list {
  min-height: 80px;
  overflow: auto;
  padding-bottom: 14px;
}

.feedback-empty {
  margin: 16px 0;
  line-height: 1.5;
}

.feedback-comment {
  display: grid;
  gap: 7px;
  padding: 14px 0;
  border-bottom: 1px solid #dce4de;
}

.feedback-comment-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.feedback-comment-top strong {
  min-width: 0;
  color: #17352a;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.feedback-comment-meta {
  margin-left: auto;
  font-size: 10px;
  text-align: right;
}

.feedback-comment p {
  margin: 0;
  color: #395347;
  line-height: 1.5;
  white-space: pre-wrap;
}

.feedback-locate {
  justify-self: start;
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid #c8d3cb;
  border-radius: 4px;
  background: #fff;
  color: var(--brand-accent-strong, #a95312);
  cursor: pointer;
  font-size: 10px;
  font-weight: 800;
}

.feedback-locate:hover {
  background: #eaf2eb;
}

.feedback-selecting,
.feedback-selecting * {
  cursor: crosshair !important;
}

.feedback-hover-target {
  outline: 3px solid #b36b33 !important;
  outline-offset: 3px !important;
}

.feedback-picked-target {
  outline: 3px solid var(--brand-accent, #d77b24) !important;
  outline-offset: 3px !important;
}

@media (max-width: 760px) {
  .feedback-widget {
    right: max(10px, env(safe-area-inset-right));
    bottom: max(10px, env(safe-area-inset-bottom));
  }

  .feedback-launcher {
    justify-content: center;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    border-radius: 50%;
  }

  .feedback-launcher-icon {
    display: block;
  }

  .feedback-launcher-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .feedback-count {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border: 2px solid #fff;
    font-size: 9px;
  }

  .feedback-drawer {
    position: fixed;
    right: max(10px, env(safe-area-inset-right));
    bottom: max(66px, calc(env(safe-area-inset-bottom) + 66px));
    left: max(10px, env(safe-area-inset-left));
    width: auto;
    max-height: calc(100vh - 86px);
    max-height: calc(100dvh - 86px);
  }

  .feedback-drawer-body {
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .feedback-list {
    flex: 0 0 auto;
    overflow: visible;
  }

  body[data-demo-surface="mobile"] .feedback-widget {
    top: max(13px, env(safe-area-inset-top));
    right: max(10px, env(safe-area-inset-right));
    bottom: auto;
  }

  body[data-demo-surface="mobile"] .feedback-drawer {
    top: max(72px, calc(env(safe-area-inset-top) + 72px));
    bottom: auto;
    max-height: calc(100vh - 82px);
    max-height: calc(100dvh - 82px);
  }
}

@media (min-width: 601px) and (max-width: 760px) {
  body[data-demo-surface="mobile"] .feedback-widget {
    right: max(26px, calc(env(safe-area-inset-right) + 26px));
  }
}