/* ============================================================================
   assets/css/au-support.css — Customer Service button + report sheet
   (2026-09-11). One floating tab on the left edge of every signed-in page; a
   glass sheet with page / type / concern; an animated check on success.
   Every class is prefixed ausp- and touches nothing else. Light + dark via
   the shared --au-* tokens; motion honours prefers-reduced-motion.
   ========================================================================== */
.ausp-root{ --ausp-ease:cubic-bezier(.22,.9,.24,1); --ausp-spring:cubic-bezier(.34,1.4,.44,1); --ausp-accent:var(--au-olive,#748040); --ausp-accent-2:var(--au-olive-deep,#54632a);
  --ausp-bg:var(--au-paper-2,#fbfaf5); --ausp-bg-2:var(--au-paper,#f4f3ec); --ausp-ink:var(--au-ink,#1c1e16); --ausp-ink-2:var(--au-ink-2,#444a38); --ausp-muted:var(--au-muted,#8a8f7d); --ausp-line:var(--au-line,#e3e1d4); --ausp-line-2:var(--au-line-2,#d5d3c4);
  font:14px/1.5 var(--au-font,'Archivo',system-ui,sans-serif); color:var(--ausp-ink); }
html[data-theme="dark"] .ausp-root, body.dark .ausp-root, html.dark .ausp-root{ --ausp-bg:#15160f; --ausp-bg-2:#0d0d07; --ausp-ink:#f3f5f0; --ausp-ink-2:#cdd6c6; --ausp-muted:#8f957f; --ausp-line:#262a1c; --ausp-line-2:#343827; }

/* ---- the tab on the left edge ------------------------------------------ */
.ausp-tab{
  position:fixed; left:0; bottom:calc(120px + env(safe-area-inset-bottom,0px)); z-index:2147482000;
  display:flex; align-items:center; gap:8px; padding:10px 14px 10px 12px; border:1px solid var(--ausp-line-2); border-left:0;
  border-radius:0 999px 999px 0; background:var(--ausp-bg); color:var(--ausp-ink); font:800 12.5px/1 var(--au-font,system-ui); cursor:pointer;
  box-shadow:0 10px 26px -12px rgba(0,0,0,.45); transform:translateX(calc(-100% + 46px));
  transition:transform .32s var(--ausp-spring), box-shadow .24s, background-color .2s;
}
.ausp-tab .ausp-ic{ width:22px; height:22px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(135deg,var(--ausp-accent),var(--ausp-accent-2)); color:#fff; flex:0 0 auto; order:2; }
.ausp-tab .ausp-ic svg{ width:13px; height:13px; }
.ausp-tab span{ white-space:nowrap; order:1; opacity:0; transition:opacity .2s; }
.ausp-tab:hover, .ausp-tab:focus-visible{ transform:translateX(0); box-shadow:0 16px 34px -14px rgba(0,0,0,.55); }
.ausp-tab:hover span, .ausp-tab:focus-visible span{ opacity:1; }
.ausp-tab::after{ content:""; position:absolute; right:10px; top:50%; width:22px; height:22px; margin-top:-11px; border-radius:50%; border:2px solid var(--ausp-accent); opacity:0; pointer-events:none; }
@media (prefers-reduced-motion:no-preference){ .ausp-tab::after{ animation:auspPing 3.6s ease-out infinite; } }
@keyframes auspPing{ 0%{ transform:scale(.8); opacity:.7; } 60%,100%{ transform:scale(2.1); opacity:0; } }
@media (max-width:640px){ .ausp-tab{ bottom:calc(190px + env(safe-area-inset-bottom,0px)); } }

/* ---- sheet -------------------------------------------------------------- */
.ausp-mask{ position:fixed; inset:0; z-index:2147482500; display:flex; align-items:center; justify-content:center; padding:18px;
  background:rgba(12,14,8,.45); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); opacity:0; transition:opacity .28s var(--ausp-ease); }
.ausp-mask.on{ opacity:1; }
.ausp-card{ position:relative; width:min(560px,100%); max-height:min(92vh,760px); overflow:auto; border-radius:22px; background:var(--ausp-bg); color:var(--ausp-ink);
  border:1px solid var(--ausp-line); box-shadow:0 40px 90px -30px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.06) inset;
  transform:translateY(24px) scale(.96); opacity:0; transition:transform .42s var(--ausp-spring), opacity .3s var(--ausp-ease); }
.ausp-mask.on .ausp-card{ transform:none; opacity:1; }
.ausp-card::before{ content:""; position:absolute; left:0; right:0; top:0; height:4px; background:linear-gradient(90deg,var(--ausp-accent),#c9d38a,var(--ausp-accent)); background-size:200% 100%; }
@media (prefers-reduced-motion:no-preference){ .ausp-card::before{ animation:auspBand 4s linear infinite; } }
@keyframes auspBand{ to{ background-position:200% 0; } }
.ausp-head{ display:flex; align-items:center; gap:14px; padding:22px 24px 8px; }
.ausp-badge{ width:46px; height:46px; border-radius:14px; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,var(--ausp-accent),var(--ausp-accent-2)); box-shadow:0 12px 26px -10px rgba(116,128,64,.7); flex:0 0 auto; }
.ausp-badge svg{ width:22px; height:22px; }
.ausp-head h2{ margin:0; font-size:19px; font-weight:800; letter-spacing:-.02em; }
.ausp-head p{ margin:3px 0 0; font-size:12.5px; color:var(--ausp-muted); }
.ausp-x{ margin-left:auto; width:36px; height:36px; border-radius:50%; border:1px solid var(--ausp-line); background:var(--ausp-bg-2); color:var(--ausp-ink-2); font-size:18px; cursor:pointer; display:grid; place-items:center; transition:transform .18s var(--ausp-spring), background-color .18s; }
.ausp-x:hover{ transform:rotate(90deg); }
.ausp-body{ padding:8px 24px 22px; display:grid; gap:14px; }
.ausp-f{ display:grid; gap:6px; }
.ausp-f label{ font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ausp-muted); }
.ausp-f label b{ color:var(--au-bad,#d6453f); }
.ausp-in{ width:100%; box-sizing:border-box; font:600 14px/1.45 var(--au-font,system-ui); color:var(--ausp-ink); background:var(--ausp-bg-2); border:1px solid var(--ausp-line-2); border-radius:12px; padding:11px 13px; transition:border-color .18s, box-shadow .18s, transform .18s var(--ausp-spring); }
.ausp-in:focus{ outline:none; border-color:var(--ausp-accent); box-shadow:0 0 0 4px rgba(116,128,64,.18); transform:translateY(-1px); }
textarea.ausp-in{ min-height:130px; resize:vertical; }
.ausp-kinds{ display:flex; gap:8px; flex-wrap:wrap; }
.ausp-kind{ border:1px solid var(--ausp-line-2); background:var(--ausp-bg-2); color:var(--ausp-ink-2); border-radius:999px; padding:8px 14px; font:800 12.5px/1 var(--au-font,system-ui); cursor:pointer; display:inline-flex; align-items:center; gap:7px; transition:background-color .18s, color .18s, border-color .18s, transform .18s var(--ausp-spring); }
.ausp-kind:hover{ transform:translateY(-1px); }
.ausp-kind.on{ background:linear-gradient(135deg,var(--ausp-accent),var(--ausp-accent-2)); color:#fff; border-color:transparent; box-shadow:0 8px 18px -8px rgba(116,128,64,.8); }
.ausp-meta{ font-size:11.5px; color:var(--ausp-muted); display:flex; gap:10px; flex-wrap:wrap; }
.ausp-meta span{ padding:4px 9px; border-radius:999px; background:var(--ausp-bg-2); border:1px solid var(--ausp-line); }
.ausp-count{ text-align:right; font-size:11px; color:var(--ausp-muted); margin-top:-4px; }
.ausp-acts{ display:flex; gap:10px; align-items:center; margin-top:4px; }
.ausp-note{ font-size:12px; color:var(--ausp-muted); flex:1; }
.ausp-send{ position:relative; overflow:hidden; border:0; border-radius:999px; padding:13px 22px; min-width:150px; font:800 14px/1 var(--au-font,system-ui); color:#fff; cursor:pointer;
  background:linear-gradient(135deg,var(--ausp-accent),var(--ausp-accent-2)); box-shadow:0 14px 30px -12px rgba(116,128,64,.8); transition:transform .18s var(--ausp-spring), box-shadow .2s, opacity .2s; }
.ausp-send:hover{ transform:translateY(-2px); box-shadow:0 18px 34px -12px rgba(116,128,64,.9); }
.ausp-send:active{ transform:scale(.97); }
.ausp-send:disabled{ opacity:.6; cursor:wait; transform:none; }
.ausp-send .ausp-ripple{ position:absolute; border-radius:50%; background:rgba(255,255,255,.35); transform:scale(0); pointer-events:none; animation:auspRipple .6s var(--ausp-ease) forwards; }
@keyframes auspRipple{ to{ transform:scale(4); opacity:0; } }
.ausp-err{ font-size:12.5px; color:var(--au-bad,#d6453f); font-weight:700; min-height:0; }
.ausp-err:empty{ display:none; }
.ausp-shake{ animation:auspShake .4s var(--ausp-ease); }
@keyframes auspShake{ 0%,100%{ transform:translateX(0); } 25%{ transform:translateX(-6px); } 75%{ transform:translateX(6px); } }
@media (prefers-reduced-motion:no-preference){
  .ausp-mask.on .ausp-f{ animation:auspUp .45s var(--ausp-ease) both; }
  .ausp-mask.on .ausp-f:nth-child(2){ animation-delay:.06s } .ausp-mask.on .ausp-f:nth-child(3){ animation-delay:.12s } .ausp-mask.on .ausp-f:nth-child(4){ animation-delay:.18s } .ausp-mask.on .ausp-acts{ animation:auspUp .45s .24s var(--ausp-ease) both; }
}
@keyframes auspUp{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

/* ---- lucide icons + attachments --------------------------------------- */
.ausp-root .ausp-lu{ width:16px; height:16px; flex:0 0 auto; vertical-align:-3px; }
.ausp-tab .ausp-ic .ausp-lu{ width:13px; height:13px; }
.ausp-badge .ausp-lu{ width:22px; height:22px; }
.ausp-x .ausp-lu{ width:16px; height:16px; }
.ausp-kind .ausp-lu{ width:14px; height:14px; }
.ausp-send .ausp-lu{ width:15px; height:15px; margin-right:6px; vertical-align:-2px; }
.ausp-opt{ font-weight:600; letter-spacing:0; text-transform:none; color:var(--ausp-muted); margin-left:6px; }
.ausp-drop{ display:flex; align-items:center; gap:12px; padding:13px 14px; border:1.5px dashed var(--ausp-line-2); border-radius:12px; background:var(--ausp-bg-2); color:var(--ausp-ink-2); cursor:pointer; transition:border-color .18s, background-color .18s, transform .18s var(--ausp-spring); }
.ausp-drop .ausp-lu{ width:22px; height:22px; color:var(--ausp-accent); }
.ausp-drop b{ display:block; font-size:12.5px; font-weight:700; color:var(--ausp-ink); }
.ausp-drop span{ display:block; font-size:11px; color:var(--ausp-muted); margin-top:2px; }
.ausp-drop:hover, .ausp-drop:focus-visible, .ausp-drop.is-over{ border-color:var(--ausp-accent); background:rgba(116,128,64,.08); transform:translateY(-1px); outline:none; }
.ausp-files{ display:grid; gap:8px; }
.ausp-files:empty{ display:none; }
.ausp-file{ display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--ausp-line); border-radius:12px; background:var(--ausp-bg-2); animation:auspUp .3s var(--ausp-ease) both; }
.ausp-file img, .ausp-file i{ width:44px; height:44px; border-radius:8px; object-fit:cover; flex:0 0 auto; display:grid; place-items:center; background:rgba(116,128,64,.12); color:var(--ausp-accent); }
.ausp-file i .ausp-lu{ width:20px; height:20px; }
.ausp-file b{ display:block; font-size:12.5px; font-weight:700; color:var(--ausp-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:300px; }
.ausp-file span{ font-size:11px; color:var(--ausp-muted); }
.ausp-file > div{ flex:1; min-width:0; }
.ausp-rm{ width:30px; height:30px; border-radius:50%; border:1px solid var(--ausp-line); background:var(--ausp-bg); color:var(--ausp-ink-2); display:grid; place-items:center; cursor:pointer; transition:transform .18s var(--ausp-spring), color .18s, border-color .18s; }
.ausp-rm:hover{ transform:rotate(90deg); color:var(--au-bad,#d6453f); border-color:var(--au-bad,#d6453f); }
.ausp-rm .ausp-lu{ width:14px; height:14px; }

/* ---- success ----------------------------------------------------------- */
.ausp-done{ padding:34px 24px 30px; text-align:center; display:grid; justify-items:center; gap:10px; }
.ausp-check{ width:104px; height:104px; border-radius:50%; display:grid; place-items:center; background:radial-gradient(closest-side,rgba(116,128,64,.18),transparent 75%); position:relative; }
.ausp-check svg{ width:92px; height:92px; overflow:visible; }
.ausp-check .c{ fill:none; stroke:var(--ausp-accent); stroke-width:3; stroke-linecap:round; stroke-dasharray:290; stroke-dashoffset:290; }
.ausp-check .m{ fill:none; stroke:var(--ausp-accent); stroke-width:5; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:60; stroke-dashoffset:60; }
.ausp-check .f{ fill:var(--ausp-accent); opacity:0; transform-origin:center; }
.ausp-check.go .c{ animation:auspDraw .7s var(--ausp-ease) forwards; }
.ausp-check.go .f{ animation:auspFill .45s .55s var(--ausp-spring) forwards; }
.ausp-check.go .m{ stroke:#fff; animation:auspDraw .5s .75s var(--ausp-ease) forwards; }
.ausp-check.go{ animation:auspPop .6s .5s var(--ausp-spring); }
@keyframes auspDraw{ to{ stroke-dashoffset:0; } }
@keyframes auspFill{ from{ opacity:0; transform:scale(.6); } to{ opacity:1; transform:scale(1); } }
@keyframes auspPop{ 0%{ transform:scale(1); } 50%{ transform:scale(1.08); } 100%{ transform:scale(1); } }
.ausp-done h3{ margin:6px 0 0; font-size:21px; font-weight:800; letter-spacing:-.02em; }
.ausp-done p{ margin:0; color:var(--ausp-ink-2); max-width:36ch; }
.ausp-done .ausp-sorry{ margin-top:6px; padding:10px 14px; border-radius:12px; background:rgba(116,128,64,.1); border:1px solid rgba(116,128,64,.3); font-weight:700; color:var(--ausp-ink); }
.ausp-done .ausp-send{ margin-top:12px; }
.ausp-confetti{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.ausp-confetti i{ position:absolute; left:50%; top:42%; width:8px; height:8px; border-radius:2px; opacity:0; animation:auspBurst 1.1s var(--ausp-ease) forwards; }
@keyframes auspBurst{ 0%{ opacity:1; transform:translate(0,0) rotate(0); } 100%{ opacity:0; transform:translate(var(--dx),var(--dy)) rotate(540deg); } }
@media (prefers-reduced-motion:reduce){ .ausp-root *, .ausp-root *::before, .ausp-root *::after{ animation:none !important; transition:none !important; } .ausp-check .c, .ausp-check .m{ stroke-dashoffset:0; } .ausp-check .f{ opacity:1; } .ausp-tab{ transform:translateX(0); } .ausp-tab span{ opacity:1; } }
@media print{ .ausp-root{ display:none !important; } }