/* The compact avatar opens the existing contact panel. */
.support {
  position:fixed;
  right:max(24px, env(safe-area-inset-right));
  bottom:calc(var(--filing-offset) + 20px);
  z-index:45;
  font-size:14px;
  line-height:1.6;
}
.support svg {fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.support-toggle {position:relative;display:block;width:48px;height:48px;padding:0;border-radius:50%;background:transparent;--contact-ease:cubic-bezier(.16,1,.3,1);--avatar-body:#34383f;--avatar-eyes:#f7f8fa}
.support-avatar {position:absolute;inset:0;display:grid;place-items:center;border-radius:50%;background:var(--avatar-body);box-shadow:0 3px 10px rgb(24 28 36 / .16);transition:transform 180ms var(--contact-ease)}
.support-face {display:flex;align-items:center;gap:7px;transform:translate(var(--gaze-x, 0px), calc(-1px + var(--gaze-y, 0px)));transition:transform 220ms cubic-bezier(.2,.7,.3,1)}
.support-eye {display:block;width:6px;height:10px;border-radius:4px;background:var(--avatar-eyes);transform-origin:center}
.support-toggle-label {position:absolute;right:calc(100% + 10px);top:50%;display:grid;place-items:center;min-width:64px;height:30px;padding:0 10px;border-radius:8px;background:var(--ink);color:var(--on-ink);font-size:12px;font-weight:500;white-space:nowrap;opacity:0;visibility:hidden;transform:translate(4px,-50%);pointer-events:none;transition:opacity 120ms ease,transform 150ms var(--contact-ease),visibility 120ms}
.support-toggle-label>span {grid-area:1 / 1}
.support-label-open,.support-label-receipt {visibility:hidden}
.support-toggle[aria-expanded="true"] .support-label-rest {visibility:hidden}
.support-toggle:focus-visible .support-toggle-label {opacity:1;visibility:visible;transform:translate(0,-50%)}
.support-toggle[aria-expanded="true"]:focus-visible .support-label-open {visibility:visible}
@media(hover:hover) and (pointer:fine) {
  .support-toggle:hover .support-toggle-label {opacity:1;visibility:visible;transform:translate(0,-50%)}
  .support-toggle[aria-expanded="true"]:hover .support-label-open {visibility:visible}
  .support-toggle[aria-expanded="false"]:hover .support-avatar {transform:rotate(-6deg)}
  .support-toggle[aria-expanded="false"]:hover .support-eye {animation:support-blink 320ms ease-in-out 1}
}
.support-toggle:active .support-avatar {transform:scale(.94)}
.support-receipt .support-toggle .support-eye {height:6px;background:transparent;border-top:2px solid var(--avatar-eyes);border-radius:50% 50% 0 0;animation:none}
.support-receipt .support-toggle .support-toggle-label {opacity:1;visibility:visible;transform:translate(0,-50%)}
.support-receipt .support-toggle .support-label-rest,.support-receipt .support-toggle .support-label-open {visibility:hidden}
.support-receipt .support-toggle .support-label-receipt {visibility:visible}
.support-keyboard .support-avatar,.support-keyboard .support-toggle-label {transition:none}
.support-keyboard .support-eye {animation:none!important}
.support-keyboard .support-panel {animation:none}
.support button:focus-visible,.support a:focus-visible,.support input:focus-visible,.support textarea:focus-visible {outline:2px solid var(--accent);outline-offset:3px}
.support-panel {position:absolute;right:0;bottom:60px;width:360px;max-height:calc(100dvh - var(--filing-offset) - 100px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--muted) var(--paper);padding:24px;border-radius:16px;background:var(--paper);box-shadow:0 8px 40px rgb(0 0 0 / .18);transform-origin:calc(100% - 24px) calc(100% + 24px);animation:support-reveal 180ms cubic-bezier(.16,1,.3,1)}
.support-header {display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.support-header h2 {margin:0;font-size:21px;line-height:1.4;letter-spacing:-.4px;font-weight:600}
.support-header p {margin:6px 0 0;color:var(--muted);font-size:13px}
.support-close {display:grid;place-items:center;flex:none;width:36px;height:36px;margin:-6px -8px 0 0;border-radius:50%}
.support-close:hover {background:var(--surface)}
.support-tabs {display:flex;gap:24px;margin:20px 0;border-bottom:1px solid var(--line)}
.support-tabs button {min-height:42px;padding:0 0 10px;color:var(--muted);border-bottom:2px solid transparent}
.support-tabs [aria-selected="true"] {color:var(--ink);border-bottom-color:var(--ink);font-weight:550}
.support-form {display:flex;flex-direction:column}
.support-form label {margin:0 0 7px;font-weight:500;font-size:13px}
.support-form input,.support-form textarea {width:100%;min-width:0;margin:0;padding:11px 12px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink);font:inherit;line-height:1.6;caret-color:var(--accent);scroll-margin-block:20px}
.support-form textarea {min-height:112px;max-height:200px;resize:vertical}
.support-form input::placeholder,.support-form textarea::placeholder {color:var(--muted);opacity:1}
.support-count {align-self:flex-end;margin:4px 0 14px;font-size:12px;font-variant-numeric:tabular-nums;color:var(--muted)}
.support-privacy {margin:12px 0 16px;font-size:12px;color:var(--muted);line-height:1.6}
.support-submit {display:flex;align-items:center;justify-content:center;gap:9px;min-height:44px;border-radius:8px;background:var(--ink);color:var(--on-ink);font-weight:500}
.support-submit svg {width:17px;height:17px}
.support-submit:disabled {cursor:default}
.support-status {margin:12px 0 0;font-size:13px;line-height:1.65;color:var(--muted);overflow-wrap:anywhere}
.support-status:empty {display:none}
.support-status[data-error="true"] {color:#b42318}
.support-text-button {display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:6px 0;color:var(--ink);text-decoration:underline;text-underline-offset:4px;font-size:13px}
.support-wechat {text-align:center}
.support-qr {display:block;width:192px;height:192px;margin:4px auto 16px;object-fit:contain;background:#fff}
.support-wechat>p {margin:12px 0;color:var(--muted);font-size:13px}
.support-wechat .support-wechat-id {color:var(--ink);font-size:15px;overflow-wrap:anywhere;user-select:all}
.support-copy {display:flex;align-items:center;justify-content:center;width:100%;min-height:44px;margin-top:16px;border:1px solid var(--line);border-radius:8px;font-weight:500}
.support-copy:hover {background:var(--surface)}
.support-success {padding:12px 0 4px;text-align:center}
.support-success>svg {width:40px;height:40px;margin:4px auto 16px}
.support-success h3 {margin:0;font-size:19px;font-weight:600}
.support-success p {color:var(--muted);font-size:14px}
.support-trap {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.site-footer {gap:8px}
.site-footer button {min-height:31px;padding:0 8px;color:inherit;font-size:11px}
.site-footer button:hover {text-decoration:underline;text-underline-offset:3px;color:var(--ink)}
.site-footer button:focus-visible {outline-offset:-3px}
.back-to-top {bottom:calc(var(--filing-offset) + 80px)}
.dialog-open .support {visibility:hidden;pointer-events:none}
@keyframes support-reveal {from {opacity:0;transform:translateY(8px) scale(.98)}to {opacity:1;transform:translateY(0) scale(1)}}
@keyframes support-blink {0%,35%,100% {transform:scaleY(1)}55% {transform:scaleY(.15)}}
@media(prefers-color-scheme:dark) {
  :where(:root:not([data-site-theme])) .support-toggle {--avatar-body:#e4e7ed;--avatar-eyes:#30343b}
  :where(:root:not([data-site-theme])) .support-status[data-error="true"] {color:#ffb4ab}
}
:where(:root[data-site-theme="dark"]) .support-toggle {--avatar-body:#e4e7ed;--avatar-eyes:#30343b}
@media(max-width:600px) {
  .support {right:max(16px, env(safe-area-inset-right));bottom:calc(var(--filing-offset) + 16px)}
  .support-toggle {width:44px;height:44px}
  .support-panel {width:min(360px, calc(100vw - 32px));bottom:56px;padding:20px;max-height:calc(100dvh - var(--filing-offset) - 88px)}
  .support-form input,.support-form textarea {font-size:16px}
  .back-to-top {bottom:calc(var(--filing-offset) + 72px)}
}
@media(prefers-reduced-motion:reduce) {
  .support-panel,.support-eye {animation:none!important}
  .support-avatar,.support-face,.support-toggle-label {transition:none!important}
  .support-toggle .support-avatar {transform:none!important}
}