.support-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
  scroll-margin-block-start: calc(var(--header-block-size) + var(--space-2xl));
}

.support-heading h2 {
  font-size: var(--font-size-xl);
  line-height: var(--font-line-height-xl);
}

.support-grid {
  display: grid;
  gap: var(--space-2xl);
}

.support-panel {
  display: grid;
  align-content: start;
  gap: var(--space-md);
  padding: var(--space-2xl);
}

.support-panel-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-line-height-lg);
}

.support-form,
.support-reply,
.support-list,
.support-messages,
.support-message {
  display: grid;
  min-width: 0;
  gap: var(--space-sm);
}

.support-grid,
.support-panel {
  min-width: 0;
}

.support-ticket,
.support-message,
.support-panel-title,
.support-attachment,
.support-transfer {
  overflow-wrap: anywhere;
}

.support-transfer {
  display: grid;
  gap: var(--space-xs);
  padding-inline-start: var(--space-2xl);
}

.support-file-input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.support-label,
.support-file-label {
  font-weight: var(--font-weight-semibold);
}

.support-ticket {
  display: grid;
  gap: var(--space-xs);
  padding: var(--space-md);
  border: var(--line-width-default) solid rgb(var(--color-gray-500));
  border-radius: var(--radius-lg);
  background: rgb(var(--color-gray-100));
  text-align: left;
}

.support-ticket:hover {
  border-color: rgb(var(--color-gray-900));
}

.support-message {
  padding: var(--space-md);
  border-radius: var(--radius-lg);
  background: rgb(var(--color-gray-100));
}

.support-message[data-admin="true"] {
  border-inline-start: var(--line-width-emphasis) solid rgb(var(--color-gray-900));
}

.support-message p {
  white-space: pre-wrap;
}

.support-attachment {
  color: rgb(var(--color-gray-900));
  font-size: var(--font-size-sm);
  line-height: var(--font-line-height-sm);
  text-decoration: underline;
}

.support-close-choice {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-weight: var(--font-weight-semibold);
}

.support-detail {
  margin-block-start: var(--space-2xl);
}

@media (min-width: 64rem) {
  .support-grid {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  }
}