/* WEDEV Support, client side. Uses the theme's design tokens, with fallbacks so it also works alone. */
.wds{--s-bg:var(--bg,#fff);--s-bg2:var(--bg2,#f4f7ff);--s-fg:var(--fg,#14213d);--s-mute:var(--mute,#525c72);--s-line:var(--line,#e1e7f5);--s-soft:var(--soft,#eaf0ff);--s-acc:var(--acc,#1e5eff);--s-ink:var(--acc-ink,#1a4fd9);--s-navy:var(--navy,#0b1640);--s-lime:var(--lime,#c9ff3f);--s-ok:var(--ok,#0e8a5a);--s-err:var(--err,#c62828);--s-r:var(--r,24px);--s-display:var(--display,inherit);--s-mono:var(--mono,ui-monospace,Menlo,monospace);color:var(--s-fg)}
.wds *{box-sizing:border-box}
.wds-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:22px;align-items:start}
.wds-side{display:grid;gap:22px;min-width:0}
.wds-card{background:var(--s-bg);border:1px solid var(--s-line);border-radius:var(--s-r);padding:clamp(20px,3vw,34px);box-shadow:0 24px 60px -40px rgba(15,19,48,.35);min-width:0}
.wds-card h2{font-family:var(--s-display);font-size:clamp(1.3rem,2.2vw,1.7rem);line-height:1.15;letter-spacing:-.02em;margin:0 0 6px;grid-column:1/-1}
.wds-sub{color:var(--s-mute);margin:0 0 6px;line-height:1.5}
.wds .form{align-content:start}
.wds .form textarea{min-height:140px;resize:vertical}
.wds .req{color:var(--s-err);margin-left:2px}
.wds-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.wds .btn{justify-content:center}
.wds .btn.is-busy{opacity:.7;pointer-events:none}

/* What is it about: big tappable choices */
.wds-cats{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.wds-cats legend{font-size:.82rem;font-weight:600;padding:0;margin-bottom:8px;float:left;width:100%}
.wds-cats label{position:relative;cursor:pointer}
.wds-cats input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;min-height:0;padding:0}
.wds-cats label span{display:inline-flex;align-items:center;min-height:44px;padding:9px 15px;border-radius:999px;border:1.5px solid var(--s-line);background:var(--s-bg);font-size:.92rem;font-weight:600;line-height:1.25;transition:border-color .15s,background-color .15s,color .15s}
.wds-cats label:hover span{border-color:var(--s-acc)}
.wds-cats input:focus-visible+span{outline:3px solid var(--s-acc);outline-offset:2px}
.wds-cats input:checked+span{background:var(--s-acc);border-color:var(--s-acc);color:#fff}

/* File drop zone: the real input covers it, so click and drop both work without scripts */
.wds-drop{position:relative;display:grid;justify-items:center;gap:4px;padding:22px 16px;border:2px dashed #b9c6ea;border-radius:18px;background:var(--s-bg2);text-align:center;transition:border-color .15s,background-color .15s}
.wds-drop input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;min-height:0;padding:0;border:0}
.wds-drop:hover,.wds-drop.is-over,.wds-drop:focus-within{border-color:var(--s-acc);background:var(--s-soft)}
.wds-drop-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--s-bg);color:var(--s-ink);margin-bottom:4px}
.wds-drop-t strong{color:var(--s-ink)}
.wds-drop-h{color:var(--s-mute);font-size:.84rem;line-height:1.4}
.wds-picked{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px;justify-content:center;position:relative;pointer-events:none}
.wds-picked li{padding:5px 11px;border-radius:999px;background:var(--s-bg);border:1px solid var(--s-line);font-size:.8rem;font-weight:600;max-width:100%;overflow-wrap:anywhere}

.wds-note{margin:0 0 6px;padding:12px 16px;border-radius:14px;font-weight:600;line-height:1.45}
.wds-note.is-ok{background:#e3f4ec;color:#0a5c3b}
.wds-note.is-err{background:#fdecea;color:#9f1c1c}

.wds-how ol{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:12px}
.wds-how li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;line-height:1.45}
.wds-how b{display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:var(--s-soft);color:var(--s-ink);font-family:var(--s-mono);font-size:.8rem;font-weight:500}
.wds-urgent{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--s-line);color:var(--s-mute)}
.wds-urgent a{color:var(--s-fg);font-weight:700;white-space:nowrap}
.wds-empty{margin-bottom:22px}

/* Ticket view */
.wds-ticket{display:grid;gap:20px}
.wds-thead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(20px,4vw,48px);align-items:center;padding:clamp(22px,3.4vw,40px);border-radius:var(--s-r);color:#fff;background:radial-gradient(60% 120% at 100% 0%,rgba(30,94,255,.7),transparent 62%),radial-gradient(40% 80% at 0% 100%,rgba(201,255,63,.16),transparent 62%),var(--s-navy);overflow:hidden}
.wds-thead h2{font-family:var(--s-display);font-size:clamp(1.5rem,3vw,2.3rem);line-height:1.1;letter-spacing:-.02em;margin:6px 0 10px;color:#fff;overflow-wrap:anywhere}
.wds-ref{font-family:var(--s-mono);font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--s-lime);margin:0}
.wds-headline{margin:0;color:#dfe6ff;font-size:1.05rem;line-height:1.45}
/* Progress: three steps joined by a line that fills up to where the ticket is */
.wds-track{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;counter-reset:none}
.wds-track li{position:relative;display:grid;gap:10px;align-content:start;padding-top:0}
.wds-track li::before{content:"";position:absolute;top:18px;left:38px;right:-10px;height:3px;border-radius:3px;background:rgba(255,255,255,.18)}
.wds-track li:last-child::before{display:none}
.wds-track li.is-done::before{background:var(--s-lime)}
.wds-track b{position:relative;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.12);border:2px solid rgba(255,255,255,.28);color:#fff;font-family:var(--s-mono);font-size:.86rem;font-weight:500}
.wds-track li.is-done b{background:var(--s-lime);border-color:var(--s-lime);color:#0b1640}
.wds-track li.is-now b{background:#fff;border-color:#fff;color:#0b1640;box-shadow:0 0 0 6px rgba(255,255,255,.16);animation:wds-pulse 2.4s ease-out infinite}
.wds-track li.is-now:last-child b{background:var(--s-lime);border-color:var(--s-lime);animation:none}
.wds-track span{display:grid;gap:2px;padding-right:6px}
.wds-track strong{font-size:.95rem;line-height:1.25;color:rgba(255,255,255,.62)}
.wds-track li.is-done strong,.wds-track li.is-now strong{color:#fff}
.wds-track small{color:#c8d2f0;font-size:.8rem;line-height:1.35}
@keyframes wds-pulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.45)}70%,100%{box-shadow:0 0 0 12px rgba(255,255,255,0)}}

.wds-tgrid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:22px;align-items:start}
.wds-tmain{display:grid;gap:18px;min-width:0}
.wds-tside{display:grid;gap:14px;position:sticky;top:110px;min-width:0}
.wds-tside .wds-card{padding:20px;box-shadow:none}
.wds-tside h2{font-size:.78rem;font-family:inherit;letter-spacing:.08em;text-transform:uppercase;color:var(--s-mute);margin:0 0 12px}
.wds-facts dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 14px;margin:0 0 16px;align-items:center}
.wds-facts dt{color:var(--s-mute);font-size:.88rem}
.wds-facts dd{margin:0;font-weight:700;text-align:right}
.wds-copy{width:100%;padding:11px 14px;border-radius:12px;border:1.5px solid var(--s-line);background:var(--s-bg2);color:var(--s-fg);font-weight:700;font-size:.88rem;cursor:pointer;transition:border-color .15s,background-color .15s,color .15s}
.wds-copy:hover{border-color:var(--s-acc);color:var(--s-ink)}
.wds-copy.is-done{background:#e3f4ec;border-color:#0e8a5a;color:#0a5c3b}
.wds-status{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;font-size:.8rem;font-weight:700;background:#ffe9d6;color:#9a4a00}
.wds-status span{width:7px;height:7px;border-radius:50%;background:currentColor}
.wds-status.is-answered{background:#e3f4ec;color:#0a5c3b}
.wds-status.is-closed{background:#eceef3;color:#4a5165}
.wds-close button{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:11px 14px;border-radius:12px;border:1.5px solid #0e8a5a;background:var(--s-bg);color:#0a5c3b;font-weight:700;font-size:.92rem;cursor:pointer;transition:background-color .15s,color .15s}
.wds-close button:hover{background:#0e8a5a;color:#fff}
.wds-tside .wds-urgent{margin:0;border-top:1px solid var(--s-line);line-height:1.5}

/* Conversation */
.wds-thread{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.wds-msg{display:grid;gap:8px;max-width:86%;animation:wds-in .5s cubic-bezier(.2,.8,.2,1) both}
.wds-msg:nth-child(2){animation-delay:.08s}.wds-msg:nth-child(3){animation-delay:.16s}.wds-msg:nth-child(4){animation-delay:.24s}.wds-msg:nth-child(n+5){animation-delay:.3s}
@keyframes wds-in{from{opacity:0;transform:translateY(10px)}}
.wds-msg.is-customer{justify-self:end}
.wds-who{display:flex;align-items:center;gap:10px;font-size:.88rem;font-weight:700}
.wds-msg.is-customer .wds-who{flex-direction:row-reverse}
.wds-who b{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:var(--s-acc);color:#fff;font-size:.9rem}
.wds-who i{font-style:normal;font-weight:500;color:var(--s-mute);font-size:.8rem}
.wds-who em{font-style:normal;font-family:var(--s-mono);font-size:.64rem;font-weight:500;letter-spacing:.06em;padding:2px 7px;border-radius:999px;background:var(--s-lime);color:#0b1640;margin-left:4px}
.wds-who mark{padding:3px 9px;border-radius:999px;background:var(--s-acc);color:#fff;font-size:.7rem;font-weight:700}
.wds-who time{margin-left:auto;font-weight:500;color:var(--s-mute);font-size:.78rem;white-space:nowrap}
.wds-msg.is-customer .wds-who time{margin-left:0;margin-right:auto}
.wds-msg.is-staff .wds-who b{background:var(--s-navy);color:var(--s-lime);font-family:var(--s-mono);font-size:.68rem}
.wds-body{padding:16px 20px;border-radius:6px 22px 22px 22px;background:var(--s-bg);border:1px solid var(--s-line);line-height:1.65;font-size:1.02rem;overflow-wrap:anywhere;box-shadow:0 14px 30px -26px rgba(15,19,48,.5)}
.wds-body p{margin:0 0 .7em}
.wds-body p:last-child{margin-bottom:0}
.wds-msg.is-customer .wds-body{border-radius:22px 6px 22px 22px;background:var(--s-acc);border-color:var(--s-acc);color:#fff}
.wds-msg.is-new .wds-body{border:2px solid var(--s-acc);box-shadow:0 20px 40px -24px rgba(30,94,255,.6)}
.wds-msg.is-wait{opacity:.8}
.wds-msg.is-wait .wds-body{display:flex;align-items:center;gap:12px;color:var(--s-mute);border-style:dashed;box-shadow:none;font-size:.95rem}
.wds-dots{display:inline-flex;gap:4px}
.wds-dots i{width:7px;height:7px;border-radius:50%;background:var(--s-acc);animation:wds-dot 1.2s ease-in-out infinite}
.wds-dots i:nth-child(2){animation-delay:.15s}.wds-dots i:nth-child(3){animation-delay:.3s}
@keyframes wds-dot{0%,60%,100%{opacity:.25;transform:none}30%{opacity:1;transform:translateY(-3px)}}
.wds-files{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.wds-files a{display:inline-flex;align-items:center;gap:8px;padding:9px 13px;border-radius:12px;border:1px solid var(--s-line);background:var(--s-bg2);color:var(--s-fg);font-size:.86rem;font-weight:600;max-width:100%;transition:border-color .15s,transform .15s}
.wds-files a span{overflow-wrap:anywhere}
.wds-files small{color:var(--s-mute);font-weight:500;white-space:nowrap}
.wds-files a:hover{border-color:var(--s-acc);color:var(--s-ink);transform:translateY(-2px)}
.wds-msg.is-customer .wds-files a{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3);color:#fff}
.wds-msg.is-customer .wds-files small{color:#e3ebff}
.wds-reply textarea{min-height:110px!important}

@media (max-width:980px){.wds-thead{grid-template-columns:minmax(0,1fr)}.wds-tgrid{grid-template-columns:minmax(0,1fr)}.wds-tside{position:static}}
@media (max-width:560px){.wds-track{grid-template-columns:minmax(0,1fr);gap:0}.wds-track li{grid-template-columns:38px minmax(0,1fr);gap:14px;padding-bottom:18px;align-items:start}.wds-track li:last-child{padding-bottom:0}.wds-track li::before{top:38px;bottom:0;left:17.5px;right:auto;width:3px;height:auto}.wds-track span{padding-top:8px}.wds-msg{max-width:94%}.wds-body{font-size:1rem;padding:14px 16px}}
@media (prefers-reduced-motion:reduce){.wds-msg,.wds-track b,.wds-dots i{animation:none!important}}
@media (max-width:900px){.wds-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.wds-card{padding:18px 16px;border-radius:20px}.wds-msg{max-width:100%}.wds-who time{font-size:.72rem}.wds-cats span{font-size:.88rem;padding:9px 13px}}

/* Support home: the main card leads, with a coloured top edge */
#wds-new{position:relative;overflow:hidden}
#wds-new::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:linear-gradient(90deg,var(--s-acc),#6d3cf0 55%,var(--s-lime))}
.wds-how li{padding:10px 12px;border-radius:14px;background:var(--s-bg2)}
.wds-how b{background:var(--s-acc);color:#fff}
/* Hero illustration: a tiny conversation */
.wds-demo{display:grid;gap:10px;padding:20px;border-radius:24px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.24);backdrop-filter:blur(8px)}
.wds-demo p{margin:0;padding:11px 15px;border-radius:16px;font-size:.92rem;line-height:1.4;font-weight:600;max-width:86%;animation:wds-in .6s cubic-bezier(.2,.8,.2,1) both}
.wds-demo .a{justify-self:end;background:#fff;color:#14213d;border-bottom-right-radius:5px}
.wds-demo .b{background:#0b1640;color:#fff;border-bottom-left-radius:5px;animation-delay:.5s}
.wds-demo .c{justify-self:end;display:flex;gap:8px;align-items:center;background:#fff;color:#14213d;border-bottom-right-radius:5px;animation-delay:1s}
.wds-demo .d{background:#c9ff3f;color:#0b1640;border-bottom-left-radius:5px;animation-delay:1.5s}
.wds-demo small{font-family:ui-monospace,Menlo,monospace;font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:#dfe6ff}

.wds-note.is-dup{background:#fff6dc;color:#6b4e00;border:1px solid #f0dc8a}
.wds-sep{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:14px;border:1.5px solid #f0dc8a;background:#fffbea;font-weight:700;cursor:pointer;line-height:1.4}
.wds-sep input{width:20px;height:20px;min-height:0;flex:none;margin:1px 0 0;padding:0}