.is-dialog-open { overflow: hidden; }

.creator-support-dialog {
  width: min(540px, calc(100vw - 32px));
  max-height: min(760px, calc(100dvh - 32px));
  padding: 0;
  border: 0;
  border-radius: 14px;
  color: var(--ink, #171315);
  background: #fff;
  box-shadow: 0 2px 6px rgba(23, 19, 21, .14), 0 18px 44px rgba(23, 19, 21, .18);
  opacity: 0;
  translate: 0 8px;
  transition-property: opacity, translate, display, overlay;
  transition-duration: 160ms;
  transition-timing-function: cubic-bezier(.2, 0, 0, 1);
  transition-behavior: allow-discrete;
}

.creator-support-dialog[open] { opacity: 1; translate: 0 0; }

.creator-support-dialog::backdrop {
  background: rgba(23, 19, 21, .46);
  opacity: 0;
  backdrop-filter: blur(5px);
  transition-property: opacity, display, overlay;
  transition-duration: 160ms;
  transition-behavior: allow-discrete;
}

.creator-support-dialog[open]::backdrop { opacity: 1; }

@starting-style {
  .creator-support-dialog[open] { opacity: 0; translate: 0 8px; }
  .creator-support-dialog[open]::backdrop { opacity: 0; }
}

.creator-support-form {
  width: 100%;
  padding: 22px;
  display: grid;
  gap: 15px;
  background: #fff;
}

.creator-support-form header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.creator-support-form header div { min-width: 0; }
.creator-support-form header strong { display: block; font-size: 19px; line-height: 1.2; text-wrap: balance; }
.creator-support-form header p { margin: 5px 0 0; color: #655D60; font-size: 12px; line-height: 1.45; text-wrap: pretty; }

.creator-support-close {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #655D60;
  background: #F4F1F2;
  cursor: pointer;
  font: 400 25px/1 inherit;
  transition-property: color, background-color, scale;
  transition-duration: 160ms;
  transition-timing-function: cubic-bezier(.2, 0, 0, 1);
}

.creator-support-close:hover { color: #171315; background: #EDE8EA; }
.creator-support-close:active { scale: .96; }

.creator-support-form label {
  display: grid;
  gap: 6px;
  color: #171315;
  font-size: 11px;
  font-weight: 750;
}

.creator-support-form input,
.creator-support-form textarea {
  width: 100%;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid rgba(23, 19, 21, .18);
  border-radius: 8px;
  color: #171315;
  background: #fff;
  outline: none;
  font: 500 13px/1.45 inherit;
  transition-property: border-color, box-shadow;
  transition-duration: 160ms;
  transition-timing-function: cubic-bezier(.2, 0, 0, 1);
}

.creator-support-form input { min-height: 44px; }
.creator-support-form textarea { min-height: 112px; resize: vertical; }
.creator-support-form input::placeholder,
.creator-support-form textarea::placeholder { color: #756E71; opacity: 1; }
.creator-support-form input:focus,
.creator-support-form textarea:focus { border-color: #FA256C; box-shadow: 0 0 0 3px rgba(250, 37, 108, .12); }
.creator-support-form input[readonly] { color: #5D5558; background: #F4F1F2; cursor: default; }

.creator-support-status { margin: 0; color: #655D60; font-size: 11px; line-height: 1.45; text-wrap: pretty; }
.creator-support-status:empty { display: none; }
.creator-support-status.is-success { color: #236A5A; }
.creator-support-status.is-error { color: #A22544; }

.creator-support-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.creator-support-submit,
.creator-support-mailto {
  min-height: 46px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 850;
  text-decoration: none;
  transition-property: background-color, color, scale;
  transition-duration: 160ms;
  transition-timing-function: cubic-bezier(.2, 0, 0, 1);
}

.creator-support-submit { border: 0; color: #fff; background: #171315; }
.creator-support-submit:disabled { cursor: wait; opacity: .62; }
.creator-support-mailto { border: 1px solid rgba(23, 19, 21, .18); color: #171315; background: #fff; }
.creator-support-submit:hover { background: #312A2D; }
.creator-support-mailto:hover { background: #F7F3F4; }
.creator-support-submit:active,
.creator-support-mailto:active { scale: .96; }

.creator-support-note { margin: -5px 0 0; color: #756E71; font-size: 10px; line-height: 1.45; text-align: center; }

button[data-support-toggle] { font: inherit; }

@media (max-width: 560px) {
  .creator-support-dialog {
    width: 100%;
    max-width: none;
    max-height: calc(100dvh - 12px);
    margin: auto 0 0;
    border-radius: 14px 14px 0 0;
  }

  .creator-support-form { padding: 20px 18px calc(20px + env(safe-area-inset-bottom)); }
  .creator-support-form input,
  .creator-support-form textarea { font-size: 16px; }
  .creator-support-actions { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .creator-support-dialog,
  .creator-support-dialog::backdrop,
  .creator-support-close,
  .creator-support-submit,
  .creator-support-mailto { transition: none; }
}