/* IT Help Desk motion section (parts/helpdesk.php). */
.hdx{position:relative;overflow:hidden}
.hdx:before{content:"";position:absolute;inset:-30% auto auto -10%;width:70%;height:120%;background:radial-gradient(closest-side,rgba(8,102,255,.22),transparent);animation:drift 15s ease-in-out infinite alternate;pointer-events:none}
.hdx-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:22px;position:relative}
@media (max-width:980px){.hdx-grid{grid-template-columns:1fr}}
.hdx-board{display:flex;flex-direction:column;gap:16px;padding:24px!important}
.hdx-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;min-height:360px}
@media (max-width:620px){.hdx-cols{grid-template-columns:1fr;min-height:0}}
.hdx-col{background:#0A1F3D;border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:10px}
.hdx-col h4{margin:0;display:flex;justify-content:space-between;align-items:center;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:#9FB3D3}
.hdx-col h4 b{min-width:24px;height:24px;border-radius:12px;background:#16365F;color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;transition:background .3s,transform .3s}
.hdx-col h4 b.bump{transform:scale(1.25);background:#0866FF}
.hdx-col[data-col=done] h4 b{background:#0B6B45}
.hdx-lane{display:flex;flex-direction:column;gap:8px}
.hdx-t{background:#123A6E;border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:6px;animation:tin .45s cubic-bezier(.2,.8,.2,1)}
@keyframes tin{from{opacity:0;transform:translateY(-10px) scale(.96)}}
.hdx-t.out{animation:tout .35s ease-in forwards}
@keyframes tout{to{opacity:0;transform:translateX(20px) scale(.96)}}
.hdx-t strong{font-size:13.5px;color:#fff}
.hdx-t small{font-size:12px;color:#9FB3D3}
.hdx-t .meta{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#7E93B5}
.hdx-t .who{display:flex;align-items:center;gap:6px}
.hdx-t .who i{width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,#0866FF,#2EE0D6)}
.hdx-t .pbar{height:4px;border-radius:4px;background:#16365F;overflow:hidden}
.hdx-t .pbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#0866FF,#2EE0D6);transition:width 2.6s linear}
.hdx-t.work .pbar i{width:100%}
.hdx-t.done{background:rgba(64,192,87,.14);border-color:rgba(64,192,87,.35)}
.hdx-t.done strong:after{content:" ✓";color:#69DB7C}
.hdx-chat{display:flex;flex-direction:column;padding:0!important;overflow:hidden}
.hdx-chat-head{display:flex;align-items:center;gap:12px;padding:14px 16px;background:rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.08)}
.hdx-chat-head img{width:40px;height:40px;border-radius:50%;object-fit:cover;background:#fff}
.hdx-chat-head small{display:flex;align-items:center;gap:6px;color:#9FB3D3;font-size:12px}
.hdx-chat-head small i{width:8px;height:8px;border-radius:50%;background:#2EE0D6;box-shadow:0 0 0 3px rgba(46,224,214,.25)}
.hdx-msgs{flex:1;padding:16px;display:flex;flex-direction:column;gap:10px;min-height:340px;justify-content:flex-end}
.hdx-m{max-width:85%;padding:10px 13px;border-radius:14px;font-size:14px;line-height:1.5;animation:tin .35s ease-out}
.hdx-m.t{align-self:flex-start;background:#123A6E;border-bottom-left-radius:4px}
.hdx-m.c{align-self:flex-end;background:#0866FF;color:#fff;border-bottom-right-radius:4px}
.hdx-typing{align-self:flex-start;display:flex;gap:4px;padding:12px 14px;border-radius:14px;background:#123A6E}
.hdx-typing i{width:7px;height:7px;border-radius:50%;background:#9DB0CC;animation:hdot 1.2s infinite}
.hdx-typing i:nth-child(2){animation-delay:.15s}.hdx-typing i:nth-child(3){animation-delay:.3s}
@keyframes hdot{30%{transform:translateY(-5px);background:#2EE0D6}}
.hdx-tools .svc-ico{background:linear-gradient(145deg,#EEF4FF,#E3FAF8)}
.hdx-channels{margin-top:32px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:16px}
.js .hdx-channels>.reveal{transition-delay:calc(var(--i,0) * 100ms)}
.hdx-ch{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:22px;border-radius:18px;background:linear-gradient(160deg,#071A35,#0C3A7A);color:#fff;transition:transform .3s,box-shadow .3s}
.hdx-ch:hover{transform:translateY(-5px);box-shadow:0 20px 40px rgba(7,26,53,.25)}
.hdx-ch span{width:52px;height:52px;border-radius:50%;background:rgba(46,224,214,.15);display:flex;align-items:center;justify-content:center;animation:ping 2.4s infinite;animation-delay:calc(var(--i) * .6s)}
.hdx-ch svg{width:26px;height:26px;color:#2EE0D6}
.hdx-ch small{color:#B9C8E2;overflow-wrap:anywhere}
@media (prefers-reduced-motion:reduce){.hdx:before,.hdx-ch span,.hdx-typing i{animation:none}}