:root {
  --dh-help-drawer-width: min(28rem, calc(100vw - var(--dh-space-4)));
}

.dh-help-drawer {
  background: var(--dh-color-surface);
  border-inline-start: 1px solid var(--dh-color-border);
  bottom: 0;
  box-shadow: var(--dh-shadow-lg);
  box-sizing: border-box;
  color: var(--dh-color-text);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  height: 100dvh;
  inset-inline-end: 0;
  max-width: 100%;
  overflow: hidden;
  position: fixed;
  top: 0;
  transform: translateX(102%);
  transition: transform .22s ease;
  width: var(--dh-help-drawer-width);
  z-index: 10020;
}

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

.dh-help-drawer.is-opening,
.dh-help-drawer.is-open {
  transform: translateX(0);
}

.dh-help-drawer__header {
  align-items: flex-start;
  border-bottom: 1px solid var(--dh-color-border);
  display: flex;
  gap: var(--dh-space-3);
  justify-content: space-between;
  padding: var(--dh-space-5);
}

.dh-help-drawer__heading {
  min-width: 0;
}

.dh-help-drawer__eyebrow,
.dh-help-drawer__ai-label {
  align-items: center;
  color: var(--dh-color-brand);
  display: inline-flex;
  font-size: .75rem;
  font-weight: 700;
  gap: var(--dh-space-1);
  letter-spacing: .04em;
  line-height: 1.3;
  text-transform: uppercase;
}

.dh-help-drawer__title {
  color: var(--dh-color-text);
  font-size: 1.35rem;
  line-height: 1.25;
  margin: var(--dh-space-1) 0 0;
}

.dh-help-drawer__description {
  color: var(--dh-color-text-muted);
  font-size: .88rem;
  line-height: 1.45;
  margin: var(--dh-space-2) 0 0;
}

.dh-help-drawer__close,
.dh-field-help-trigger {
  align-items: center;
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--dh-radius-round);
  color: var(--dh-color-text-muted);
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  justify-content: center;
  margin: 0;
  padding: 0;
}

.dh-help-drawer__close {
  height: 2.25rem;
  width: 2.25rem;
}

.dh-help-drawer__close:hover,
.dh-field-help-trigger:hover {
  background: var(--dh-color-brand-soft);
  color: var(--dh-color-brand);
}

.dh-help-drawer__close:focus-visible,
.dh-field-help-trigger:focus-visible {
  box-shadow: var(--dh-focus-ring);
  outline: 0;
}

.dh-help-drawer__body {
  min-height: 0;
  overflow-y: auto;
  padding: var(--dh-space-5);
}

.dh-help-drawer__body h3 {
  color: var(--dh-color-text);
  font-size: 1.05rem;
  line-height: 1.35;
  margin: 0;
}

.dh-help-drawer__body h4 {
  color: var(--dh-color-text);
  font-size: .92rem;
  line-height: 1.35;
  margin: 0;
}

.dh-help-drawer__body p,
.dh-help-drawer__body li {
  font-size: .92rem;
  line-height: 1.55;
  margin-block: 0;
}

.dh-help-drawer__body ul,
.dh-help-drawer__answer ul,
.dh-help-drawer__answer ol {
  margin-block: 0;
  padding-inline-start: var(--dh-space-5);
}

.dh-help-drawer__topic,
.dh-help-drawer__intro,
.dh-help-drawer__section,
.dh-help-drawer__answer-content {
  display: grid;
  gap: var(--dh-space-2);
}

.dh-help-drawer__topic {
  gap: var(--dh-space-4);
}

.dh-help-drawer__intro {
  gap: var(--dh-space-1);
}

.dh-help-drawer__section {
  border-top: 1px solid var(--dh-color-border);
  padding-top: var(--dh-space-3);
}

.dh-help-drawer__source {
  align-items: flex-start;
  background: var(--dh-color-surface-muted);
  border-radius: var(--dh-radius-md);
  display: grid;
  gap: var(--dh-space-2);
  padding: var(--dh-space-3);
}

.dh-help-drawer__question {
  background: var(--dh-color-surface-muted);
  border-top: 1px solid var(--dh-color-border);
  box-sizing: border-box;
  max-height: 48dvh;
  overflow-y: auto;
  padding: var(--dh-space-4) var(--dh-space-5) var(--dh-space-5);
}

.dh-help-drawer__question[hidden] {
  display: none;
}

.dh-help-drawer__question-heading {
  align-items: center;
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: var(--dh-radius-md);
  color: inherit;
  cursor: pointer;
  display: flex;
  gap: var(--dh-space-2);
  justify-content: space-between;
  margin: 0;
  min-height: 2.75rem;
  padding: var(--dh-space-2);
  text-align: start;
  width: 100%;
}

.dh-help-drawer__question-heading:hover {
  background: var(--dh-color-brand-soft);
}

.dh-help-drawer__question-heading:focus-visible {
  box-shadow: var(--dh-focus-ring);
  outline: 0;
}

.dh-help-drawer__question > [data-dh-help-question-description] {
  color: var(--dh-color-text-muted);
  font-size: .8rem;
  line-height: 1.4;
  margin: var(--dh-space-2) var(--dh-space-2) 0;
}

.dh-help-drawer__question-toggle-icon {
  align-items: center;
  color: var(--dh-color-text-muted);
  display: inline-flex;
  flex: 0 0 auto;
  height: 2.25rem;
  justify-content: center;
  width: 2.25rem;
}

.dh-help-drawer__question-heading:hover .dh-help-drawer__question-toggle-icon {
  color: var(--dh-color-brand);
}

.dh-help-drawer__question-toggle-icon .material-icons-round,
.dh-help-drawer__question-toggle-icon .dh-icon {
  font-size: 1.15rem;
  transition: transform var(--dh-transition-fast);
}

.dh-help-drawer__question.is-question-open .dh-help-drawer__question-toggle-icon .material-icons-round,
.dh-help-drawer__question.is-question-open .dh-help-drawer__question-toggle-icon .dh-icon {
  transform: rotate(180deg);
}

.dh-help-drawer__ai-label .material-icons-round,
.dh-help-drawer__ai-label .dh-icon {
  font-size: 1rem;
}

.dh-help-drawer__ai-label {
  color: var(--dh-color-text);
  font-size: .88rem;
  letter-spacing: normal;
  text-transform: none;
}

.dh-help-drawer__question-form {
  display: grid;
  gap: var(--dh-space-2);
  margin-top: var(--dh-space-3);
}

.dh-help-drawer__question-form[hidden] {
  display: none;
}

.dh-help-drawer__question-form textarea {
  background: var(--dh-color-input-bg);
  color: var(--dh-color-text);
  line-height: 1.4;
  max-height: 10rem;
  min-height: 4.5rem;
  overflow-y: auto;
  resize: none;
}

.dh-help-drawer__question-actions {
  display: flex;
  justify-content: flex-end;
}

.dh-help-drawer__support {
  background: var(--dh-color-surface);
  border-top: 1px solid var(--dh-color-border);
  display: grid;
  padding: var(--dh-space-3) var(--dh-space-5);
}

.dh-help-drawer__support[hidden] {
  display: none;
}

.dh-help-drawer__support-toggle {
  justify-self: stretch;
}

.dh-help-drawer__support-toggle[hidden] {
  display: none;
}

.dh-help-drawer__support-panel,
.dh-help-drawer__support-form,
.dh-help-drawer__support-heading {
  display: grid;
  gap: var(--dh-space-3);
}

.dh-help-drawer__support-panel,
.dh-help-drawer__support-form {
  align-content: start;
  grid-auto-rows: max-content;
}

.dh-help-drawer__support-panel[hidden] {
  display: none;
}

.dh-help-drawer__support-panel {
  min-height: 0;
  overflow-y: auto;
}

.dh-help-drawer__support-heading {
  gap: var(--dh-space-1);
}

.dh-help-drawer__support-heading h3,
.dh-help-drawer__support-heading p {
  margin: 0;
}

.dh-help-drawer__support-heading h3 {
  font-size: 1.05rem;
}

.dh-help-drawer__support-heading p,
.dh-help-drawer__support-consent {
  color: var(--dh-color-text-muted);
  font-size: .82rem;
  line-height: 1.45;
}

.dh-help-drawer__support-form textarea {
  background: var(--dh-color-input-bg);
  color: var(--dh-color-text);
  min-height: 5rem;
  resize: vertical;
}

.dh-help-drawer__support-field {
  min-width: 0;
}

.dh-help-drawer__support-consent {
  align-items: flex-start;
  cursor: pointer;
  display: flex;
  gap: var(--dh-space-2);
  margin: 0;
}

.dh-help-drawer__support-consent[hidden] {
  display: none;
}

.dh-help-drawer__support-consent input {
  flex: 0 0 auto;
  margin-top: .2em;
}

.dh-help-drawer__support-status:empty {
  display: none;
}

.dh-help-drawer__support-actions {
  display: flex;
  gap: var(--dh-space-2);
  justify-content: flex-end;
}

.dh-help-drawer.is-support-open {
  grid-template-rows: auto minmax(0, 1fr);
}

.dh-help-drawer.is-support-open .dh-help-drawer__body,
.dh-help-drawer.is-support-open .dh-help-drawer__question {
  display: none;
}

.dh-help-drawer.is-support-open .dh-help-drawer__support {
  grid-template-rows: minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
  padding-block: var(--dh-space-4);
}

.dh-help-drawer__answer:not(:empty) {
  display: grid;
  gap: var(--dh-space-3);
  margin-top: var(--dh-space-2);
}

.dh-help-drawer__message {
  background: var(--dh-color-surface);
  border: 1px solid var(--dh-color-border);
  border-radius: var(--dh-radius-md);
  display: grid;
  gap: var(--dh-space-2);
  min-width: 0;
  padding: var(--dh-space-3);
}

.dh-help-drawer__message--user {
  background: var(--dh-color-brand-soft);
  margin-inline-start: var(--dh-space-5);
}

.dh-help-drawer__message--assistant {
  margin-inline-end: var(--dh-space-3);
}

.dh-help-drawer__message-role {
  color: var(--dh-color-text-muted);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.3;
  text-transform: uppercase;
}

.dh-help-drawer__answer p,
.dh-help-drawer__answer li {
  font-size: .88rem;
  line-height: 1.5;
  margin-block: 0;
}

.dh-help-drawer.is-question-expanded {
  grid-template-rows: auto minmax(0, 1fr);
}

.dh-help-drawer.is-question-expanded .dh-help-drawer__body {
  display: none;
}

.dh-help-drawer.is-question-expanded .dh-help-drawer__question {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  max-height: none;
  min-height: 0;
  overflow: hidden;
}

.dh-help-drawer.is-question-expanded .dh-help-drawer__question-form {
  align-content: start;
  grid-auto-rows: max-content;
  min-height: 0;
  overflow-y: auto;
}

.dh-help-drawer.has-question-result:not(.is-question-expanded) .dh-help-drawer__question {
  height: min(
    calc(var(--dh-help-question-compact-height) + var(--dh-space-6)),
    48dvh
  );
}

.dh-form-field--with-help {
  position: relative;
}

.dh-form-field--with-help > .joeform_labelbox,
.dh-form-field--with-help > .form_select_box,
.dh-form-field--with-help > .form_checkbox_box {
  padding-inline-end: 2.25rem;
}

.dh-field-help-trigger {
  height: 1.85rem;
  inset-inline-end: .45rem;
  position: absolute;
  top: 1.4rem;
  width: 1.85rem;
  z-index: 2;
}

.dh-form-field--with-help > .form_select_box + .dh-field-help-trigger {
  top: 1.8rem;
}

.dh-form--compact .dh-form-field--with-help > .form_select_box + .dh-field-help-trigger {
  top: 1.5rem;
}

.dh-field-help-trigger::after {
  content: "";
  height: 44px;
  inset-inline-start: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
}

.dh-field-help-trigger .material-icons-round {
  font-size: 1.15rem;
}

.dh-form-field--choice-help {
  align-items: center;
  display: inline-flex;
  gap: var(--dh-space-2);
  justify-self: start;
  width: fit-content;
}

.dh-form-field--choice-help > .form_checkbox_box {
  margin: 0;
  max-width: 100%;
  min-width: 0;
  padding-inline-end: 0;
}

.dh-form-field--choice-help > .dh-field-help-trigger {
  position: static;
}

.dh-form-field--help-active {
  border-radius: var(--dh-radius-md);
  box-shadow: var(--dh-focus-ring);
}

@media (min-width: 84rem) {
  .dh-workspace-shell {
    transition: margin-inline-end .22s ease;
  }

  html.dh-help-drawer-open .dh-workspace-shell {
    margin-inline-end: var(--dh-help-drawer-width);
  }
}

@media (max-width: 44rem) {
  :root {
    --dh-help-drawer-width: calc(100vw - var(--dh-space-3));
  }

  .dh-help-drawer__header,
  .dh-help-drawer__body {
    padding: var(--dh-space-4);
  }

  .dh-help-drawer__question {
    padding: var(--dh-space-3) var(--dh-space-4) var(--dh-space-4);
  }

  .dh-help-drawer__support {
    padding-inline: var(--dh-space-4);
  }

  .dh-help-drawer__message--user {
    margin-inline-start: var(--dh-space-3);
  }

  .dh-help-drawer__message--assistant {
    margin-inline-end: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dh-help-drawer {
    transition: none;
  }
}