#xyz-support-root .support-launcher {
  min-width: 176px;
  padding: 11px 18px;
  border: 1px solid rgba(255, 211, 106, .7);
  background: linear-gradient(110deg, #620b0d, #d72e1d 52%, #8e130d);
  box-shadow: 0 16px 42px rgba(0, 0, 0, .5), 0 0 22px rgba(220, 39, 21, .32), inset 0 1px rgba(255, 255, 255, .18);
  color: #fff8e7;
  font-weight: 900;
  letter-spacing: .035em;
}

#xyz-support-root .support-launcher:hover,
#xyz-support-root .support-launcher:focus-visible {
  transform: translateY(-3px);
  border-color: #ffe09a;
  box-shadow: 0 20px 48px rgba(0, 0, 0, .56), 0 0 34px rgba(255, 54, 24, .48);
  outline: 0;
}

.support-launcher-copy {
  display: flex;
  align-items: center;
  text-align: center;
}

.support-launcher-copy b {
  background: linear-gradient(180deg, #fffdf5 5%, #ffe8ad 52%, #e7ad3c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font: 900 13px/1 var(--font-display, "Segoe UI", Arial, sans-serif);
  letter-spacing: .11em;
  text-shadow: 0 3px 12px rgba(0, 0, 0, .42);
}

#xyz-support-root .support-pulse {
  width: 11px;
  height: 11px;
  flex: 0 0 11px;
  background: #55e887;
  box-shadow: 0 0 0 5px rgba(85, 232, 135, .14), 0 0 15px rgba(69, 255, 130, .72);
  animation: juwa2-chat-pulse 1.5s ease-in-out infinite alternate;
}

#xyz-support-root .support-panel {
  width: min(410px, calc(100vw - 24px));
  border: 1px solid rgba(255, 196, 71, .48);
  border-radius: 27px;
  background:
    radial-gradient(circle at 100% 0, rgba(196, 28, 20, .23), transparent 34%),
    linear-gradient(160deg, #170605, #070303 68%);
  box-shadow: 0 34px 100px rgba(0, 0, 0, .72), 0 0 35px rgba(181, 22, 16, .2), inset 0 0 0 2px rgba(0, 0, 0, .4);
}

#xyz-support-root .support-panel.open {
  transform: none;
}

#xyz-support-root .support-head {
  padding: 18px 17px;
  align-items: center;
  border-bottom: 1px solid rgba(255, 191, 69, .22);
  background:
    radial-gradient(circle at 17% 0, rgba(255, 177, 50, .18), transparent 35%),
    linear-gradient(115deg, #7d1011, #250706 62%, #0b0403);
}

#xyz-support-root .support-agent {
  width: 48px;
  height: 48px;
  border: 2px solid #e8aa37;
  border-radius: 15px;
  background: radial-gradient(circle at 35% 24%, #ef4730, #8d1110 55%, #250503);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .38), 0 0 16px rgba(255, 76, 29, .28), inset 0 1px rgba(255, 255, 255, .2);
  color: #ffd978;
  font: 950 15px/1 var(--font-display, "Segoe UI", Arial, sans-serif);
  letter-spacing: -.04em;
}

#xyz-support-root .support-head > div:nth-child(2) > b {
  color: #fff7e5;
  font-size: 13px;
  letter-spacing: .025em;
}

#xyz-support-root .support-head span {
  margin-top: 4px;
  color: #d2b8ad;
}

#xyz-support-root .support-head span i {
  background: #ffc44f;
  box-shadow: 0 0 9px rgba(255, 174, 45, .72);
}

#xyz-support-root .support-close {
  width: 35px;
  height: 35px;
  border: 1px solid rgba(255, 212, 111, .24);
  border-radius: 50%;
  color: #ffd477;
  line-height: 1;
}

#xyz-support-root .support-close:hover { background: rgba(183, 29, 20, .45); }

#xyz-support-root .support-security {
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  background: #090303;
  color: #9e8980;
}

#xyz-support-root .support-messages {
  background:
    radial-gradient(circle at 10% 25%, rgba(184, 25, 17, .1), transparent 30%),
    linear-gradient(180deg, rgba(33, 8, 7, .48), rgba(8, 3, 3, .7));
}

#xyz-support-root .support-date {
  color: #9b7c70;
  letter-spacing: .13em;
}

#xyz-support-root .support-msg span {
  border: 1px solid rgba(255, 190, 72, .14);
  background: linear-gradient(145deg, #2c1110, #1b0a09);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .22);
  color: #f4e9e2;
  line-height: 1.48;
}

#xyz-support-root .support-msg.player span {
  border-color: rgba(255, 207, 101, .38);
  background: linear-gradient(125deg, #8f1313, #d4321e);
  color: #fff9e9;
}

#xyz-support-root .support-msg time { color: #92796f; }
#xyz-support-root .support-msg.failed span { border-color: #ff5b45; }

#xyz-support-root .support-quick {
  padding: 10px 14px;
  border-top: 1px solid rgba(255, 194, 73, .08);
  background: rgba(15, 5, 4, .88);
}

#xyz-support-root .support-quick button {
  border-color: rgba(255, 195, 72, .35);
  background: rgba(120, 16, 14, .16);
  color: #e4c9bb;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}

#xyz-support-root .support-quick button:hover {
  transform: translateY(-2px);
  border-color: #e5a738;
  background: rgba(168, 28, 19, .42);
  color: #fff0d1;
}

#xyz-support-root .support-form {
  border-top-color: rgba(255, 197, 78, .18);
  background: #100504;
}

#xyz-support-root .support-form textarea {
  color: #fff5e8;
  caret-color: #ffc555;
}

#xyz-support-root .support-form textarea::placeholder { color: #806e67; }

#xyz-support-root .support-form button {
  border: 1px solid rgba(255, 221, 135, .65);
  background: linear-gradient(145deg, #f04427, #9e1110);
  box-shadow: 0 7px 18px rgba(126, 8, 8, .45), 0 0 13px rgba(255, 68, 27, .24);
  color: #fff8e5;
}

#xyz-support-root .support-panel > footer {
  border-top: 1px solid rgba(255, 255, 255, .04);
  background: #070202;
  color: #725e57;
}

#xyz-support-root .support-panel > footer button { color: #d9a33f; }

@keyframes juwa2-chat-pulse {
  to { filter: brightness(1.18); box-shadow: 0 0 0 7px rgba(85, 232, 135, .08), 0 0 21px rgba(69, 255, 130, .9); }
}

@media (max-width: 620px) {
  #xyz-support-root .support-launcher { min-width: auto; }
  #xyz-support-root .support-panel { border-radius: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  #xyz-support-root .support-pulse { animation: none; }
}

.header-actions .btn-support {
  border: 1px solid rgba(255, 194, 73, .46);
  background: linear-gradient(120deg, rgba(111, 15, 14, .42), rgba(24, 7, 5, .72));
  box-shadow: 0 0 18px rgba(213, 43, 24, .13);
  color: #f3d28d;
}

.header-actions .btn-support:hover,
.header-actions .btn-support:focus-visible {
  border-color: #efbb52;
  background: linear-gradient(120deg, rgba(156, 23, 18, .65), rgba(47, 9, 6, .84));
  box-shadow: 0 0 25px rgba(235, 53, 27, .25);
  color: #fff2cd;
  outline: 0;
}

.contact-dialog {
  width: min(720px, calc(100vw - 30px));
}

.contact-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.contact-choice {
  min-width: 0;
  padding: 20px;
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 15px;
  align-items: center;
  border: 1px solid rgba(255, 198, 79, .25);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(115, 17, 14, .58), rgba(12, 5, 4, .92));
  box-shadow: 0 15px 34px rgba(0, 0, 0, .35), inset 0 1px rgba(255, 255, 255, .06);
  color: #fff;
  text-align: left;
  cursor: pointer;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

button.contact-choice {
  width: 100%;
  font: inherit;
}

.contact-choice:hover,
.contact-choice:focus-visible {
  transform: translateY(-6px);
  border-color: rgba(255, 213, 116, .8);
  box-shadow: 0 22px 42px rgba(0, 0, 0, .48), 0 0 24px rgba(220, 44, 23, .24);
  outline: 0;
}

.contact-icon {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  grid-row: 1;
  border: 1px solid rgba(255, 224, 146, .55);
  border-radius: 18px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, .36), inset 0 1px rgba(255, 255, 255, .25);
  font-style: normal;
  font-weight: 900;
}

.telegram-icon {
  background: linear-gradient(145deg, #35b8ef, #1676bc);
  color: #fff;
  font-size: 29px;
  transform: rotate(-8deg);
}

.email-icon {
  background: linear-gradient(145deg, #ed4a2d, #8f1010);
  color: #ffd574;
  font: 900 29px Georgia, serif;
}

.contact-choice > span:nth-child(2) {
  display: flex;
  flex-direction: column;
}

.contact-choice small {
  color: #dfa947;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .15em;
}

.contact-choice strong {
  margin-top: 5px;
  color: #fff8e8;
  font: 800 20px/1.1 var(--font-display, "Segoe UI", Arial, sans-serif);
}

.contact-choice em {
  margin-top: 6px;
  color: #bda79d;
  font-size: 10px;
  font-style: normal;
}

.contact-choice > b {
  grid-column: 1 / -1;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 204, 94, .13);
  color: #f2c45e;
  font-size: 10px;
  letter-spacing: .04em;
}

.email-provider-panel {
  margin-top: 18px;
  padding: 17px;
  border: 1px solid rgba(255, 198, 79, .22);
  border-radius: 18px;
  background: rgba(7, 3, 2, .68);
  animation: provider-in .22s ease-out;
}

.email-provider-panel[hidden] { display: none; }

.email-provider-panel > p {
  margin: 0 0 12px;
  color: #d4b896;
  text-align: center;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.email-provider-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.email-provider-grid a {
  padding: 12px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 7px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 13px;
  background: rgba(255, 255, 255, .035);
  color: #eaded7;
  font-size: 9px;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.email-provider-grid a:hover,
.email-provider-grid a:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(255, 202, 87, .6);
  background: rgba(150, 24, 17, .28);
  outline: 0;
}

.provider-mark {
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #fff;
  font-weight: 900;
}

.gmail-mark { background: linear-gradient(145deg, #e64536, #b51f19); }
.outlook-mark { background: linear-gradient(145deg, #2998e9, #075da8); }
.yahoo-mark { background: linear-gradient(145deg, #7d3bc1, #4a1787); }
.default-mark { background: linear-gradient(145deg, #d9a432, #8d5308); }

.support-email-address {
  display: block;
  margin-top: 13px;
  color: #9e8378;
  text-align: center;
  font-size: 9px;
  letter-spacing: .06em;
}

@keyframes provider-in {
  from { opacity: 0; transform: translateY(-7px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 620px) {
  .header-actions .btn-support {
    width: 39px;
    min-width: 39px;
    padding: 0;
    font-size: 0;
  }
  .header-actions .btn-support::after {
    content: "?";
    font-size: 15px;
    font-weight: 900;
  }
  .contact-choice-grid { grid-template-columns: 1fr; }
  .email-provider-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

#xyz-support-root .support-channel-bar {
  padding: 10px 13px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  border-bottom: 1px solid rgba(255, 194, 73, .1);
  background: rgba(12, 4, 3, .92);
}

#xyz-support-root .support-channel-bar > a,
#xyz-support-root .support-channel-bar > button {
  min-width: 0;
  padding: 10px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid rgba(255, 199, 83, .28);
  border-radius: 11px;
  background: linear-gradient(145deg, rgba(115, 17, 14, .44), rgba(25, 7, 5, .76));
  color: #ead5c8;
  font: 800 9px/1 var(--font-body, "Segoe UI", Arial, sans-serif);
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

#xyz-support-root .support-channel-bar > a:hover,
#xyz-support-root .support-channel-bar > button:hover,
#xyz-support-root .support-channel-bar > a:focus-visible,
#xyz-support-root .support-channel-bar > button:focus-visible {
  transform: translateY(-2px);
  border-color: #e8af42;
  background: rgba(155, 27, 19, .55);
  color: #fff5de;
  outline: 0;
}

#xyz-support-root .support-channel-bar span {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: linear-gradient(145deg, #e74728, #8d1110);
  color: #ffd878;
  font-size: 13px;
  font-weight: 900;
}

#xyz-support-root .support-channel-bar a span {
  background: linear-gradient(145deg, #36baf0, #1474b8);
  color: #fff;
}

#xyz-support-root .support-channel-providers {
  padding: 12px 13px 13px;
  border-bottom: 1px solid rgba(255, 194, 73, .12);
  background: #0b0303;
  animation: provider-in .2s ease-out;
}

#xyz-support-root .support-channel-providers[hidden] { display: none; }

#xyz-support-root .support-channel-providers > p {
  margin: 0 0 9px;
  color: #ba9d8c;
  text-align: center;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
}

#xyz-support-root .support-channel-providers .email-provider-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

#xyz-support-root .support-channel-providers .email-provider-grid a {
  padding: 8px 4px;
  gap: 5px;
  font-size: 8px;
}

#xyz-support-root .support-channel-providers .provider-mark {
  width: 29px;
  height: 29px;
  border-radius: 8px;
  font-size: 10px;
}

#xyz-support-root .support-channel-providers > span {
  display: block;
  margin-top: 8px;
  color: #826c63;
  text-align: center;
  font-size: 8px;
}

#xyz-support-root .support-channel-providers:not([hidden]) + .support-messages {
  min-height: 130px;
}
