html.cf-support-open,
html.cf-support-open body { overflow: hidden !important; overscroll-behavior: none; }

.mail-section--support.disabled { opacity: 1; cursor: pointer; }
.mail-section--support:not(.active) { filter: none; }

.cf-support-overlay {
  position: fixed;
  z-index: 10080;
  inset: 0;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding:
    max(10px, env(safe-area-inset-top, 0px))
    max(10px, env(safe-area-inset-right, 0px))
    max(10px, env(safe-area-inset-bottom, 0px))
    max(10px, env(safe-area-inset-left, 0px));
  color: #f8f0db;
  background: radial-gradient(circle at 50% 12%, rgba(244, 205, 106, .15), transparent 34%), rgba(4, 9, 6, .89);
  -webkit-backdrop-filter: blur(8px) saturate(.8);
  backdrop-filter: blur(8px) saturate(.8);
  animation: cf-support-fade .18s ease-out both;
}

.cf-support-panel {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  width: min(100%, 500px);
  height: min(820px, calc(100dvh - max(20px, env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px))));
  overflow: hidden;
  border: 2px solid #e0b44e;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(29, 55, 40, .965), rgba(8, 22, 15, .99)),
    url('/assets/profile_bg-B6XpkAXh.png') center 32% / cover;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .72), 0 0 0 4px rgba(80, 43, 14, .92), 0 0 0 6px rgba(238, 192, 83, .3);
  animation: cf-support-rise .22s cubic-bezier(.2, .85, .25, 1.08) both;
}

.cf-support-header {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  align-items: center;
  flex: 0 0 66px;
  min-height: 66px;
  padding: 0 8px;
  border-bottom: 2px solid rgba(237, 194, 91, .62);
  background: linear-gradient(180deg, rgba(113, 72, 28, .98), rgba(51, 28, 12, .98));
  box-shadow: 0 5px 13px rgba(0, 0, 0, .32), inset 0 1px rgba(255, 240, 174, .32);
}
.cf-support-header strong { overflow: hidden; color: #ffeaa3; text-align: center; text-overflow: ellipsis; white-space: nowrap; font-size: clamp(18px, 5vw, 22px); font-weight: 1000; text-shadow: 0 2px #351b08; }
.cf-support-header button { display: grid; place-items: center; width: 40px; height: 40px; margin: auto; padding: 0; border: 1px solid rgba(255, 224, 139, .55); border-radius: 13px; color: #fff0b0; background: linear-gradient(#6d491f, #2d190a); font-size: 23px; font-weight: 900; box-shadow: inset 0 1px rgba(255,255,255,.16), 0 3px 7px rgba(0,0,0,.32); }
.cf-support-header button:active { transform: translateY(2px) scale(.94); }
.cf-support-header .cf-support-back[hidden] { visibility: hidden; display: block; }

.cf-support-body { flex: 1 1 0; min-height: 0; padding: 14px 14px calc(14px + max(8px, env(safe-area-inset-bottom, 0px))); overflow: hidden auto; scrollbar-width: none; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.cf-support-body::-webkit-scrollbar, .cf-support-thread::-webkit-scrollbar { display: none; }
.cf-support-state { display: grid; place-items: center; min-height: 180px; padding: 28px 14px; color: #efdcae; text-align: center; font-size: 13px; font-weight: 800; line-height: 1.5; }
.cf-support-error { min-height: 0; margin-bottom: 10px; padding: 9px 11px; border: 1px solid rgba(255, 133, 105, .44); border-radius: 12px; color: #ffd9cb; background: rgba(104, 27, 16, .46); font-size: 11px; font-weight: 850; }

.cf-support-intro { display: grid; grid-template-columns: 50px 1fr; gap: 11px; align-items: center; margin-bottom: 12px; padding: 12px 13px; border: 1px solid rgba(238, 200, 106, .35); border-radius: 17px; background: linear-gradient(135deg, rgba(67, 96, 70, .77), rgba(20, 43, 30, .86)); box-shadow: inset 0 1px rgba(255,255,255,.08), 0 4px 10px rgba(0,0,0,.2); }
.cf-support-intro-icon { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgba(246, 216, 137, .44); border-radius: 15px; background: rgba(26, 13, 6, .36); font-size: 25px; }
.cf-support-intro strong, .cf-support-intro span { display: block; }
.cf-support-intro strong { color: #fff4cf; font-size: 15px; }
.cf-support-intro span { margin-top: 3px; color: #eadbb7; font-size: 10px; line-height: 1.35; }
.cf-support-create-button { display: grid; grid-template-columns: 40px 1fr 18px; gap: 10px; align-items: center; width: 100%; min-height: 61px; margin-bottom: 12px; padding: 8px 12px; border: 1px solid #e4be62; border-radius: 16px; color: #3b260b; text-align: left; background: linear-gradient(#ffe8a0, #d7aa4e); box-shadow: inset 0 2px rgba(255,255,255,.45), 0 5px 11px rgba(0,0,0,.26); font-weight: 1000; }
.cf-support-create-button i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: #fff2b6; background: linear-gradient(#7d5221, #3d230d); font-size: 24px; font-style: normal; }
.cf-support-create-button small { display: block; margin-top: 3px; opacity: .72; font-size: 10px; }
.cf-support-create-button b:last-child { justify-self: end; font-size: 24px; }

.cf-support-ticket-list { display: grid; gap: 9px; }
.cf-support-ticket-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 10px; width: 100%; min-height: 78px; padding: 11px 12px 10px 16px; overflow: hidden; border: 1px solid rgba(221, 185, 99, .34); border-radius: 15px; color: #f8efdc; text-align: left; background: linear-gradient(135deg, rgba(45, 79, 57, .87), rgba(14, 35, 23, .94)); box-shadow: inset 0 1px rgba(255,255,255,.06), 0 4px 9px rgba(0,0,0,.22); }
.cf-support-ticket-card::before { content: ""; position: absolute; inset: 10px auto 10px 5px; width: 3px; border-radius: 99px; background: #d6ad51; }
.cf-support-ticket-card.waiting_staff::before { background: #ef9252; }
.cf-support-ticket-card.closed::before { background: #849187; }
.cf-support-ticket-card strong { overflow: hidden; color: #fff2c7; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.cf-support-ticket-card time { color: #dbc89d; font-size: 9px; white-space: nowrap; }
.cf-support-ticket-card p { grid-column: 1 / -1; margin: 0; overflow: hidden; color: #d4dbc9; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.cf-support-ticket-meta { display: flex; grid-column: 1 / -1; align-items: center; gap: 6px; color: #dbc997; font-size: 9px; }
.cf-support-ticket-unread { margin-left: auto; min-width: 19px; height: 19px; padding: 0 6px; border-radius: 99px; color: #fff; background: #c94e33; text-align: center; font-size: 9px; line-height: 19px; }

.cf-support-form { display: grid; gap: 11px; }
.cf-support-form label { display: grid; gap: 5px; color: #f4dfa8; font-size: 11px; font-weight: 900; }
.cf-support-form input, .cf-support-form select, .cf-support-form textarea { box-sizing: border-box; width: 100%; min-width: 0; padding: 10px 11px; border: 1px solid rgba(236, 199, 104, .5); border-radius: 12px; color: #fff5da; background: rgba(3, 15, 10, .73); outline: none; font: inherit; }
.cf-support-form input:focus, .cf-support-form select:focus, .cf-support-form textarea:focus { border-color: #ffe49a; box-shadow: 0 0 0 3px rgba(255, 215, 112, .11); }
.cf-support-form select option { color: #23180a; background: #f4e5bd; }
.cf-support-form textarea { min-height: 170px; resize: vertical; line-height: 1.45; }
.cf-support-submit { min-height: 45px; border: 1px solid #f0d077; border-radius: 13px; color: #fff5c8; background: linear-gradient(#37804c, #16482a); font-weight: 1000; box-shadow: 0 4px 9px rgba(0,0,0,.3); }
.cf-support-submit:disabled { opacity: .6; }
.cf-support-form-hint { margin: -3px 1px 0; color: #cbbd9d; font-size: 9px; line-height: 1.4; }

.cf-support-detail { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.cf-support-detail-summary { flex: none; margin-bottom: 10px; padding: 10px 12px; border: 1px solid rgba(232, 194, 102, .34); border-radius: 14px; background: rgba(40, 68, 49, .72); }
.cf-support-detail-summary strong { display: block; color: #fff1c4; font-size: 14px; }
.cf-support-detail-summary div { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; color: #dfceaa; font-size: 9px; }
.cf-support-status { padding: 3px 7px; border-radius: 99px; color: #3d280b; background: #e4c274; font-weight: 900; }
.cf-support-status.waiting_staff { color: #fff1dd; background: #9d4f2d; }
.cf-support-status.closed { color: #e7e9e4; background: #5e6961; }
.cf-support-thread { flex: 1 1 0; min-height: 180px; padding: 3px 2px 5px; overflow: hidden auto; scrollbar-width: none; }
.cf-support-message { display: grid; gap: 3px; width: min(86%, 380px); margin: 0 0 11px; }
.cf-support-message.mine { margin-left: auto; }
.cf-support-message header { display: flex; gap: 7px; color: #c8b994; font-size: 8px; }
.cf-support-message.mine header { justify-content: flex-end; }
.cf-support-message p { margin: 0; padding: 10px 11px; border: 1px solid rgba(232, 198, 115, .29); border-radius: 5px 14px 14px; color: #f7edda; background: rgba(35, 68, 47, .86); font-size: 11px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.cf-support-message.mine p { border-radius: 14px 5px 14px 14px; color: #38240d; background: linear-gradient(#f5dfa8, #d7b66e); }
.cf-support-reply { display: grid; flex: none; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; padding-top: 9px; border-top: 1px solid rgba(232, 194, 102, .28); }
.cf-support-reply textarea { min-height: 48px; max-height: 110px; resize: vertical; padding: 9px 10px; border: 1px solid rgba(236, 199, 104, .48); border-radius: 12px; color: #fff5da; background: rgba(3, 15, 10, .75); outline: none; line-height: 1.35; }
.cf-support-reply button { min-width: 82px; padding: 8px 11px; border: 1px solid #f0d077; border-radius: 12px; color: #fff4c8; background: linear-gradient(#37804c, #16482a); font-weight: 1000; }
.cf-support-closed { flex: none; padding: 11px; border: 1px solid rgba(210, 198, 169, .25); border-radius: 12px; color: #d1c6aa; text-align: center; background: rgba(60, 65, 59, .55); font-size: 10px; font-weight: 850; }

@keyframes cf-support-fade { from { opacity: 0; } }
@keyframes cf-support-rise { from { opacity: 0; transform: translateY(12px) scale(.97); } }
@media (max-width: 390px) {
  .cf-support-overlay { padding-left: 5px; padding-right: 5px; }
  .cf-support-panel { border-radius: 19px; }
  .cf-support-body { padding-left: 10px; padding-right: 10px; }
  .cf-support-message { width: 92%; }
  .cf-support-reply { grid-template-columns: 1fr; }
  .cf-support-reply button { min-height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .cf-support-overlay, .cf-support-panel { animation: none; }
}