/* Store branding, isolated from the support application's behavior styles. */
:root {
  --support-header-height: 77px;
  --support-dark: #071827;
  --support-dark-2: #142330;
  --support-red: #ed1c24;
  --support-red-dark: #c9151c;
  --support-yellow: #fff000;
  --support-radius: 8px;
  --support-text: var(--support-ink);
  --support-header-line: rgba(205, 220, 232, .12);
  --support-canvas: #f1f5f8;
  --support-selected: #fffde5;
  --support-selected-ink: #665500;
}

html[data-support-theme="dark"] {
  --support-ink: #f5f8fb;
  --support-muted: #aebdcc;
  --support-line: rgba(205, 220, 232, .16);
  --support-soft: #0b1b29;
  --support-canvas: #071827;
  --support-panel: #111d27;
  --support-dark: #071827;
  --support-dark-2: #142330;
  --support-yellow-soft: #282910;
  --support-selected: #1d2a2a;
  --support-selected-ink: #fff000;
}

body.wm-support {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  background: var(--support-canvas);
  color: var(--support-ink);
}

.wm-support :is(h1, h2, h3) { color: var(--support-ink); font-weight: 800; }
.wm-support :is(button, a, input, textarea, select):focus-visible { outline: 2px solid var(--support-yellow); outline-offset: 3px; }
html[data-support-theme="light"] .wm-support :is(button, a, input, textarea, select):focus-visible { outline-color: var(--support-red); }
.wm-support ::selection { background: var(--support-yellow); color: #071827; }
.wm-support :is(input, textarea)::placeholder { color: var(--support-muted); opacity: 1; }
.wm-support :is(textarea, select, .support-message-list, .support-livechat-message-list, .support-modal-body) { scrollbar-color: #435c70 transparent; scrollbar-width: thin; }

.wm-support .support-topbar {
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 24px;
  padding: 0 max(24px, calc((100% - 1280px) / 2));
  border-bottom: 1px solid var(--support-header-line);
  background: #071827;
}

.wm-support .support-brand { gap: 14px; font-size: 16px; font-weight: 800; }
.wm-support .support-brand img { width: 74px; height: 34px; flex: 0 0 74px; }
.wm-support .support-brand--topbar { min-width: 0; color: #d5dee7; }
.support-brand-copy { display: grid; gap: 0; line-height: 1.25; }
.support-brand-copy strong { font-size: 16px; font-weight: 800; }
.support-brand-copy small { color: #aebdcc; font-size: 11px; font-weight: 600; }
.wm-support .support-main-nav { align-self: center; min-width: 0; align-items: center; gap: 4px; }
.wm-support .support-nav-button {
  flex: 0 1 auto;
  min-width: 0;
  min-height: 42px;
  gap: 7px;
  padding: 9px 11px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #d5dee7;
  font-size: 14px;
  font-weight: 750;
  white-space: nowrap;
}
.wm-support .support-nav-button svg { width: 17px; height: 17px; flex: 0 0 17px; }
.wm-support .support-nav-button::after { display: none; }
.wm-support .support-nav-button:is(:hover, .is-active) { border-color: rgba(205, 220, 232, .2); background: rgba(255, 255, 255, .06); color: #fff; }
.wm-support .support-nav-button:hover { color: var(--support-yellow); }
.wm-support .support-topbar-actions { min-width: 0; gap: 8px; }
.wm-support .support-topbar :is(.support-icon-button, .support-account-button) {
  border-color: rgba(205, 220, 232, .16);
  border-radius: 8px;
  background: rgba(255, 255, 255, .06);
  color: #f5f8fb;
}
.wm-support .support-topbar :is(.support-icon-button, .support-account-button):hover { border-color: rgba(205, 220, 232, .36); background: #142330; }
.wm-support .support-account-menu { border-color: var(--support-header-line); border-radius: 8px; background: #111d27; box-shadow: 0 12px 32px rgba(0, 0, 0, .24); }
.wm-support .support-account-menu button:hover { background: #142330; color: var(--support-yellow); }
.wm-support .support-view:not(.support-view--ticket) { width: min(1280px, calc(100% - 48px)); padding-top: 36px; }
.wm-support .support-page-heading h1 { font-size: 30px; font-weight: 800; }
.wm-support .support-ticket-grid { gap: 18px; }
.wm-support :is(.support-ticket-card, .support-create-card, .support-livechat-card) { border-radius: 8px; box-shadow: none; transform: none; }
.wm-support :is(.support-ticket-card, .support-create-card, .support-livechat-card):hover { border-color: var(--support-yellow); transform: none; }
.wm-support .support-create-icon { background: var(--support-yellow); color: #071827; border-radius: 8px; }
.wm-support .support-ticket-card h2 { font-size: 18px; font-weight: 800; }

.wm-support .support-button { min-height: 46px; border-radius: 8px; font-weight: 800; }
html[data-support-theme] .wm-support .support-button--primary {
  background: linear-gradient(135deg, #ed1c24, #ff4d00);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 24px rgba(237, 28, 36, .16);
}
html[data-support-theme] .wm-support .support-button--primary:hover { background: linear-gradient(135deg, #cf1820, #e74300); color: #fff; }
html[data-support-theme] .wm-support .support-button--discord { border-color: transparent; background: #5865f2; color: #fff; }
html[data-support-theme] .wm-support .support-button--discord:hover { background: #4752c4; }
html[data-support-theme] .wm-support :is(.support-button--secondary, .support-button--plain) { border-color: var(--support-line); background: var(--support-panel); color: var(--support-ink); box-shadow: none; }
html[data-support-theme] .wm-support :is(.support-button--secondary, .support-button--plain):hover { border-color: var(--support-muted); background: var(--support-soft); }
.wm-support .support-button--danger { box-shadow: none; }
html[data-support-theme="dark"] .wm-support .support-button--danger-outline { border-color: rgba(237, 28, 36, .35); color: #ff9399; }
html[data-support-theme="dark"] .wm-support .support-button--danger-outline:hover { border-color: var(--support-red); background: var(--support-red); color: #fff; }
.wm-support .support-spinner { border-color: var(--support-line); border-top-color: var(--support-yellow); }
.wm-support .support-eyebrow { color: var(--support-selected-ink); }
.wm-support .support-wizard-progress span.is-active { background: var(--support-yellow); }
html[data-support-theme="light"] .wm-support .support-wizard-progress span.is-active { background: var(--support-red); }

.wm-support .support-auth-panel { width: min(100%, 460px); min-height: 0; padding: 32px; border: 1px solid var(--support-line); border-radius: 8px; background: var(--support-panel); box-shadow: 0 18px 48px rgba(0, 0, 0, .14); }
.wm-support .support-auth-layout { padding: 76px 16px 32px; }
.wm-support .support-brand--auth { margin-bottom: 36px; }
.wm-support .support-auth-heading h1 { font-size: 30px; line-height: 1.2; }
.wm-support .support-preference-panel { width: min(100%, 560px); }

html[data-support-theme] .wm-support :is(.support-search-field, .support-compact-select, .support-field input, .support-field textarea, .support-field select, .support-filter-field select, .support-language-trigger, .support-language-menu) {
  border-color: var(--support-line);
  border-radius: 8px;
  background: var(--support-soft);
  color: var(--support-ink);
}
html[data-support-theme] .wm-support :is(.support-filter-button, .support-management-tabs button, .support-category-option, .support-purchase-source-option, .support-product-option) { border-radius: 8px; }
html[data-support-theme] .wm-support :is(.support-filter-button.is-active, .support-category-option.is-selected, .support-purchase-source-option.is-selected, .support-product-option.is-selected, .support-language-option.is-selected) {
  border-color: var(--support-yellow);
  background: var(--support-selected);
  color: var(--support-ink);
}
html[data-support-theme="light"] .wm-support :is(.support-filter-button.is-active, .support-category-option.is-selected, .support-purchase-source-option.is-selected, .support-product-option.is-selected) { border-color: #a18b00; }
.wm-support :is(.support-settings-nav, .support-management-tabs) { gap: 6px; }
html[data-support-theme] .wm-support :is(.support-settings-nav button, .support-management-tabs button) { border: 1px solid transparent; border-radius: 8px; background: transparent; }
html[data-support-theme] .wm-support :is(.support-settings-nav button, .support-management-tabs button) { color: var(--support-muted); }
html[data-support-theme] .wm-support :is(.support-settings-nav button, .support-management-tabs button):hover { color: var(--support-ink); }
html[data-support-theme] .wm-support :is(.support-settings-nav button.is-active, .support-management-tabs button.is-active) { border-color: var(--support-line); background: var(--support-panel); color: var(--support-ink); }
html[data-support-theme] .wm-support :is(.support-settings-section, .support-management-section) { border: 0; border-top: 1px solid var(--support-line); border-radius: 0; background: transparent; }
html[data-support-theme="dark"] .wm-support :is(.support-cfx-purchase-link, .support-purchase-source-hint, .support-purchase-history-state, .support-language-search) { background: var(--support-soft); }

html[data-support-theme] .wm-support .support-modal { border: 1px solid var(--support-line); border-radius: 8px; background: var(--support-panel); box-shadow: 0 24px 80px rgba(0, 0, 0, .42); }
.wm-support .support-modal-backdrop { background: rgba(2, 9, 15, .78); }
html[data-support-theme] .wm-support .support-modal-footer { background: var(--support-soft); }
.wm-support .support-modal-header h2 { font-size: 19px; }

html[data-support-theme="dark"] .wm-support :is(.support-message-bubble, .support-livechat-message) { border-color: var(--support-line); background: #142330; color: #f5f8fb; }
html[data-support-theme="dark"] .wm-support .support-message--customer .support-message-bubble { border-color: rgba(237, 28, 36, .3); background: #2b1d29; }
html[data-support-theme="dark"] .wm-support :is(.support-message--staff .support-message-bubble, .support-livechat-message--staff) { border-color: rgba(255, 240, 0, .3); background: #1d2a2a; color: #f5f8fb; }
html[data-support-theme="dark"] .wm-support :is(.support-message--staff .support-message-author, .support-livechat-message--staff strong) { color: #fff000; }
html[data-support-theme="dark"] .wm-support :is(.support-livechat-message-meta, .support-livechat-message--staff .support-livechat-message-meta, .support-message-time) { background: transparent; color: #aebdcc; }
html[data-support-theme="dark"] .wm-support :is(.support-livechat-message--staff details, .support-message-original, .support-livechat-message--system) { color: #aebdcc; }
html[data-support-theme="dark"] .wm-support :is(.support-message--system .support-message-bubble, .support-livechat-message--system) { border-color: var(--support-line); background: var(--support-soft); }
html[data-support-theme] .wm-support .support-message--action .support-message-bubble { border: 0; background: transparent; }
.wm-support .support-livechat-message-list { background: var(--support-canvas); }
.wm-support .support-chat-header { border-bottom-color: var(--support-line); }
.wm-support .support-chat-column { grid-template-columns: minmax(0, 1fr); }
.wm-support .support-chat-header { min-width: 0; }
html[data-support-theme="dark"] .wm-support .support-chat-header { background: var(--support-panel); }
.wm-support :is(.support-livechat-detail-layout, .support-livechat-sidebar, .support-ticket-sidebar) { border-color: var(--support-line); }
.wm-support .support-livechat-detail-layout { border-top: 1px solid var(--support-line); border-radius: 8px; overflow: hidden; }
.wm-support .support-livechat-reply textarea { border-radius: 8px; background: var(--support-soft); }

@media (min-width: 981px) and (max-width: 1320px) {
  :root { --support-header-height: 129px; }
  .wm-support .support-topbar { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 76px 52px; gap: 0 16px; }
  .wm-support .support-brand--topbar { grid-column: 1; grid-row: 1; }
  .wm-support .support-topbar-actions { grid-column: 2; grid-row: 1; }
  .wm-support .support-main-nav { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; padding-bottom: 8px; }
}

@media (max-width: 980px) {
  :root { --support-header-height: 65px; --support-bottom-nav-height: calc(64px + env(safe-area-inset-bottom, 0px)); }
  .wm-support .support-topbar { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding-inline: 24px; }
  .wm-support .support-main-nav {
    position: fixed;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    height: var(--support-bottom-nav-height);
    justify-content: flex-start;
    gap: 4px;
    padding: 4px 8px calc(4px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--support-header-line);
    background: #071827;
  }
  .wm-support .support-nav-button { flex: 1 0 90px; min-width: 90px; min-height: 54px; flex-direction: column; gap: 3px; padding: 5px 7px; font-size: 11px; line-height: 1.15; white-space: normal; }
  .wm-support .support-nav-label { max-height: 26px; }
  .wm-support .support-app-shell { padding-bottom: var(--support-bottom-nav-height); }
  .wm-support .support-ticket-workspace { height: calc(100vh - var(--support-header-height) - var(--support-bottom-nav-height)); height: calc(100dvh - var(--support-header-height) - var(--support-bottom-nav-height)); }
  .wm-support .support-ticket-sidebar { bottom: var(--support-bottom-nav-height); }
  .wm-support .support-ticket-sidebar.is-open + .support-sidebar-backdrop { bottom: var(--support-bottom-nav-height); }
  .wm-support .support-toast-region { bottom: calc(var(--support-bottom-nav-height) + 12px); }
}

@media (max-width: 680px) {
  .wm-support .support-topbar { gap: 8px; padding-inline: 12px; }
  .wm-support .support-brand--topbar { gap: 10px; }
  .wm-support .support-brand--topbar img { width: 56px; height: 28px; flex-basis: 56px; }
  .wm-support .support-brand--topbar .support-brand-copy { display: grid; }
  .wm-support .support-brand--topbar .support-brand-copy strong { display: none; }
  .wm-support .support-brand--topbar .support-brand-copy small { color: #f5f8fb; font-size: 15px; font-weight: 800; }
  .wm-support .support-topbar-actions { gap: 6px; }
  .wm-support .support-view:not(.support-view--ticket) { width: calc(100% - 32px); padding-top: 26px; }
  .wm-support .support-page-heading { flex-wrap: wrap; gap: 14px; }
  .wm-support .support-page-heading h1 { font-size: 25px; }
  .wm-support .support-ticket-grid { gap: 12px; }
  .wm-support .support-auth-layout { min-height: 100dvh; align-items: center; padding: 72px 16px 32px; }
  .wm-support .support-auth-panel { padding: 24px 22px; }
  .wm-support .support-brand--auth { gap: 10px; font-size: 14px; }
  .wm-support .support-brand--auth img { width: 64px; flex-basis: 64px; }
  .wm-support .support-auth-heading h1 { font-size: 28px; }
  .wm-support .support-modal-backdrop { padding: 12px; }
  .wm-support .support-modal { max-height: calc(100dvh - 24px); }
  .wm-support .support-modal--language { height: min(720px, calc(100dvh - 24px)); max-height: calc(100dvh - 24px); }
  .wm-support .support-livechat-message { max-width: 90%; }
}

@media (prefers-reduced-motion: reduce) {
  .wm-support *, .wm-support *::before, .wm-support *::after { scroll-behavior: auto; animation-duration: .01ms; transition-duration: .01ms; }
}