.up-support-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.up-support-layout [hidden] { display: none !important; }
.up-support-layout > .up-card { padding: 22px; }

.up-support-compose > header,
.up-support-thread > header,
.up-support-history > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.up-support-compose h2,
.up-support-thread h2,
.up-support-history h2 { margin: 2px 0 0; }

.up-support-start {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.up-support-start > div:first-child {
  max-width: 620px;
  display: grid;
  gap: 7px;
}

.up-support-start h2 { margin: 0; }
.up-support-start p {
  margin: 0;
  color: var(--up-muted);
  font-size: .72rem;
  line-height: 1.65;
}

.up-support-start-actions {
  display: grid;
  justify-items: end;
  gap: 8px;
  flex: none;
}

.up-support-start a,
.up-support-actions a {
  color: var(--up-muted);
  font-size: .65rem;
}

.up-support-list { display: grid; gap: 9px; }
.up-support-request-row {
  position: relative;
  width: 100%;
  display: grid;
  gap: 6px;
  padding: 13px;
  text-align: left;
  color: var(--up-text);
  background: var(--up-raised);
  border: 1px solid var(--up-line);
  border-radius: 11px;
  cursor: pointer;
  transition: border-color 160ms cubic-bezier(.23, 1, .32, 1), transform 120ms cubic-bezier(.23, 1, .32, 1);
}

.up-support-request-row:active { transform: scale(.985); }

.up-support-request-row:hover,
.up-support-request-row:focus-visible {
  border-color: var(--up-gold);
  outline: none;
}

.up-support-request-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.up-support-request-row strong { font-family: Cinzel, serif; font-size: .76rem; }
.up-support-request-row > span:not(.up-support-request-heading) { font-size: .7rem; font-weight: 750; }
.up-support-request-row small { color: var(--up-muted); font-size: .59rem; }
.up-support-request-row > i {
  position: absolute;
  right: 10px;
  bottom: 10px;
  min-width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #b6423c;
  color: white;
  font-style: normal;
  font-size: .58rem;
  font-weight: 900;
}

.up-support-status {
  font-style: normal;
  font-size: .54rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--up-muted);
}

.up-support-status.is-waiting_player { color: #d6a238; }
.up-support-status.is-resolved { color: #61ae7d; }
.up-support-safety-flag {
  width: max-content;
  padding: 4px 7px;
  border: 1px solid rgba(205, 70, 70, .55);
  border-radius: 999px;
  color: #e06b65;
  background: rgba(150, 35, 35, .12);
  font-size: .52rem;
  text-transform: uppercase;
}

.up-support-form { display: grid; gap: 14px; }
.up-support-form > section { display: grid; gap: 12px; }
.up-support-step {
  padding: 15px;
  border: 1px solid var(--up-line);
  border-radius: 11px;
  background: var(--up-raised);
}

.up-support-step > .eyebrow { margin: 0; }
.up-support-final { background: transparent; }
.up-support-form [data-support-context] {
  padding: 15px;
  border-left: 3px solid var(--up-gold);
  border-radius: 0 10px 10px 0;
  background: rgba(199, 157, 65, .06);
}

.up-support-form [data-support-payment-next] { display: grid; gap: 12px; }
.up-support-form label,
.up-support-reply-form label {
  display: grid;
  gap: 7px;
  color: var(--up-muted);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.up-support-form label small,
.up-support-reply-form label small {
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

.up-support-form input,
.up-support-form select,
.up-support-form textarea,
.up-support-reply-form input,
.up-support-reply-form textarea {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--up-line);
  border-radius: 9px;
  color: var(--up-text);
  background: var(--up-surface);
  font: 600 .72rem Manrope, sans-serif;
}

.up-support-form textarea,
.up-support-reply-form textarea {
  resize: vertical;
  line-height: 1.6;
  text-transform: none;
}

.up-support-fields { display: grid; gap: 12px; }
.up-support-fields.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.up-support-fields.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.up-support-check {
  display: flex !important;
  grid-template-columns: auto 1fr !important;
  align-items: center;
  width: max-content;
}

.up-support-check input { width: 18px; height: 18px; min-height: 0; }
.up-support-safety-note {
  margin: 0;
  padding: 11px 13px;
  border-left: 3px solid #bb4d48;
  background: rgba(150, 35, 35, .09);
  color: var(--up-muted);
  font-size: .68rem;
  line-height: 1.55;
}

.up-support-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.up-support-thread > header { align-items: center; }
.up-support-thread-heading { flex: 1; min-width: 0; }
.up-support-thread-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex: none;
}

.up-support-context {
  margin-bottom: 12px;
  padding: 11px 12px;
  border: 1px solid var(--up-line);
  border-radius: 10px;
  background: var(--up-raised);
}

.up-support-context dl { display: flex; flex-wrap: wrap; gap: 12px 22px; margin: 0; }
.up-support-context dl > div { display: grid; gap: 3px; }
.up-support-context dt { color: var(--up-muted); font-size: .53rem; font-weight: 850; text-transform: uppercase; }
.up-support-context dd { margin: 0; font-size: .69rem; font-weight: 750; }
.up-support-messages { display: grid; gap: 11px; margin: 12px 0 16px; }
.up-support-message {
  width: fit-content;
  min-width: min(240px, 100%);
  max-width: min(82%, 760px);
  display: grid;
  gap: 8px;
  padding: 12px 13px;
  border: 1px solid var(--up-line);
  border-radius: 13px;
  background: var(--up-raised);
}

.up-support-message.is-player {
  justify-self: end;
  background: rgba(199, 157, 65, .08);
  border-color: rgba(199, 157, 65, .28);
}

.up-support-message header { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.up-support-message header strong { font-size: .65rem; }
.up-support-message time { color: var(--up-muted); font-size: .55rem; white-space: nowrap; }
.up-support-message p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .72rem; line-height: 1.65; }
.up-support-gallery {
  width: fit-content;
  max-width: 100%;
  display: grid;
  gap: 8px;
}
.up-support-gallery.has-1 { grid-template-columns: minmax(140px, 220px); }
.up-support-gallery.has-2 { grid-template-columns: repeat(2, minmax(140px, 220px)); }
.up-support-gallery.has-3 { grid-template-columns: repeat(3, minmax(140px, 220px)); }
.up-support-gallery a {
  display: block;
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--up-line);
}

.up-support-gallery img { display: block; width: 100%; height: 100%; object-fit: cover; }
.up-support-reply-form {
  display: grid;
  gap: 11px;
  padding-top: 14px;
  border-top: 1px solid var(--up-line);
}

.up-support-reply-form textarea { min-height: 92px; }
.up-support-form input[type="file"],
.up-support-reply-form input[type="file"] {
  min-height: 42px;
  padding: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.up-support-form input[type="file"]::file-selector-button,
.up-support-reply-form input[type="file"]::file-selector-button {
  min-height: 30px;
  margin-right: 10px;
  padding: 6px 10px;
  border: 1px solid var(--up-line);
  border-radius: 7px;
  color: var(--up-text);
  background: var(--up-raised);
  font: 800 .62rem Manrope, sans-serif;
  cursor: pointer;
}

@media (max-width: 760px) {
  .up-support-fields.three { grid-template-columns: 1fr; }
  .up-support-message { max-width: 92%; }
  .up-support-gallery.has-1 { grid-template-columns: minmax(120px, 220px); }
  .up-support-gallery.has-2,
  .up-support-gallery.has-3 { grid-template-columns: repeat(2, minmax(120px, 1fr)); }
}

@media (max-width: 580px) {
  .up-support-layout > .up-card { padding: 18px 14px; }
  .up-support-compose > header,
  .up-support-thread > header { flex-wrap: wrap; align-items: flex-start; }
  .up-support-thread-tools { width: 100%; justify-content: space-between; }
  .up-support-start { align-items: flex-start; flex-direction: column; }
  .up-support-start-actions { width: 100%; justify-items: stretch; }
  .up-support-start-actions .button { width: 100%; }
  .up-support-fields.two,
  .up-support-fields.three { grid-template-columns: 1fr; }
  .up-support-message { width: 100%; min-width: 0; max-width: 100%; }
  .up-support-message header { flex-wrap: wrap; }
  .up-support-gallery { width: 100%; }
  .up-support-gallery.has-1 { grid-template-columns: minmax(0, 1fr); }
  .up-support-gallery.has-2,
  .up-support-gallery.has-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .up-support-actions > .button { width: 100%; }
}

@media (max-width: 380px) {
  .up-support-gallery.has-1,
  .up-support-gallery.has-2,
  .up-support-gallery.has-3 { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .up-support-request-row { transition: border-color 160ms ease; }
  .up-support-request-row:active { transform: none; }
}