/* /helpdesk — page-specific styles. Loaded after product-page.css + product-shared.css. */

/* Hero: one queue, three channel chips, one featured ticket */
.hdi{display:flex;flex-direction:column;gap:10px;padding:18px 20px 20px;background:var(--surface)}
.hdi-qh{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:2px 2px 8px}
.hdi-fs{display:flex;gap:8px}
.hdi-ch{display:inline-flex;align-items:center;padding:6px 13px;border-radius:999px;border:1px solid var(--border-a);background:var(--canvas);font:500 12px/1.2 var(--font-body);color:var(--ink-mutedb);opacity:0;transform:translateY(6px);transition:opacity .3s cubic-bezier(.25,.46,.45,.94) var(--hd,0s),transform .3s cubic-bezier(.25,.46,.45,.94) var(--hd,0s)}
.hdi.is-in .hdi-ch{opacity:1;transform:none}
.hdi-t{padding:14px 16px;border-radius:14px;border:1px solid var(--border-a);background:var(--surface)}
.hdi-t--feat{border-color:var(--green-500b);box-shadow:0 8px 24px -8px rgba(36,81,59,.14)}
.hdi-t--ghost{opacity:.6}
.hdi-t-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.hdi-t b{font:500 14px/1.3 var(--font-body);color:var(--ink-a)}
.hdi-t p{margin:6px 0 0;font:400 14px/1.5 var(--font-body);color:var(--ink-mutedb);text-wrap:pretty}
.hdi-sla{flex:none;font:400 10.5px/1.5 'JetBrains Mono',ui-monospace,monospace;color:var(--ink-mutedb);font-style:normal}
.hdi-tag{display:inline-flex;align-items:center;gap:7px;margin-top:10px;padding:4px 12px;border-radius:999px;background:var(--mint-100);font:500 12px/1.5 var(--font-body);color:var(--green-700b);opacity:0;transform:translateY(4px);transition:opacity .3s cubic-bezier(.25,.46,.45,.94) 1s,transform .3s cubic-bezier(.25,.46,.45,.94) 1s}
.hdi.is-in .hdi-tag{opacity:1;transform:none}
.hdi-dot{width:7px;height:7px;border-radius:999px;background:var(--green-500b);animation:hdiPulse 2s ease-in-out infinite}
@keyframes hdiPulse{0%,100%{opacity:1}50%{opacity:.35}}
.hdi-deal{display:flex;align-items:baseline;gap:5px;margin:12px 0 0!important;padding-top:11px;border-top:1px solid var(--border-a);font:400 14px/1.4 var(--font-body);color:var(--ink-a)!important;opacity:0;transform:translateY(4px);transition:opacity .35s cubic-bezier(.25,.46,.45,.94) 1.55s,transform .35s cubic-bezier(.25,.46,.45,.94) 1.55s}
.hdi-deal b{font-weight:600;font-variant-numeric:tabular-nums}
.hdi.is-in .hdi-deal{opacity:1;transform:none}

/* Section 3: full inbox */
.hdx-clip{min-width:0}
.hdx{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);background:var(--surface)}
.hdx-l{padding:14px;display:flex;flex-direction:column;gap:6px}
.hdx-r{display:flex;align-items:center;gap:12px;padding:14px;border-radius:12px;border:1px solid transparent}
.hdx-r--sel{background:var(--mint-50)}
.hdx-b{flex:none;display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;background:var(--mint-100);color:var(--green-700b);font:500 10.5px/1.5 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.04em}
.hdx-r b{display:block;font:500 14px/1.3 var(--font-body);color:var(--ink-a)}
.hdx-r p{margin:3px 0 0;font:400 13.5px/1.45 var(--font-body);color:var(--ink-mutedb);text-wrap:pretty}
.hdx-r i{margin-left:auto;flex:none;font:400 11px/1.5 'JetBrains Mono',ui-monospace,monospace;color:var(--ink-mutedb);font-style:normal}
.hdx-det{display:flex;flex-direction:column;gap:12px;padding:20px;border-left:1px solid var(--border-a);background:var(--canvas);opacity:0;transform:translateX(24px);transition:opacity .3s cubic-bezier(.25,.46,.45,.94) .35s,transform .3s cubic-bezier(.25,.46,.45,.94) .35s}
.hdx.is-in .hdx-det{opacity:1;transform:none}
.hdx-dh{display:flex;align-items:center;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--border-a)}
.hdx-dh b{font:500 14.5px/1.3 var(--font-body);color:var(--ink-a)}
.hdx-dh span{font:400 12px/1.4 var(--font-body);color:var(--ink-mutedb)}
.hdx-dh .off-chip{margin-left:auto}
.hdx-msg{align-self:flex-start;max-width:88%;padding:11px 14px;border-radius:14px 14px 14px 5px;background:var(--surface);border:1px solid var(--border-a);font:400 13.5px/1.5 var(--font-body);color:var(--ink-a)}
.hdx-msg--out{align-self:flex-end;border-radius:14px 14px 5px 14px;background:var(--mint-50);border-color:var(--mint-200)}
.hdx-cust{margin-top:auto;padding:14px 16px;border-radius:12px;background:var(--surface);border:1px solid var(--border-a)}
.hdx-cust small{display:block;font:500 10px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--green-700b)}
.hdx-cust b{display:block;margin-top:7px;font:500 14.5px/1.3 var(--font-body);color:var(--ink-a)}
.hdx-cust span{display:block;margin-top:3px;font:400 13px/1.5 var(--font-body);color:var(--ink-mutedb);font-variant-numeric:tabular-nums}

/* Section 4: Eden panel + chip row */
.hd-edenwrap{display:flex;flex-direction:column;align-items:center;gap:16px}
.hd-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.hd-chip{padding:7px 14px;border-radius:999px;background:var(--surface);border:1px solid var(--mint-200);box-shadow:0 1px 2px rgba(36,81,59,.06);font:500 12px/1.4 var(--font-body);color:var(--green-700b);white-space:nowrap;opacity:0;transform:translateY(6px);transition:opacity .35s cubic-bezier(.25,.46,.45,.94) var(--hc,0s),transform .35s cubic-bezier(.25,.46,.45,.94) var(--hc,0s)}
.hd-edenwrap.is-in .hd-chip{opacity:1;transform:none}

/* Section 5: SLA panel + rule */
.sla{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;max-width:860px;margin:0 auto}
.sla-p{padding:24px 26px;border:1px solid var(--border-a);border-radius:20px;background:var(--surface);box-shadow:var(--shadow-md-g)}
.sla-trend{width:100%;height:44px;margin-top:16px}
.sla-trend polyline{fill:none;stroke:var(--green-500b);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:300;stroke-dashoffset:300;transition:stroke-dashoffset .8s cubic-bezier(.22,.61,.36,1) .3s}
.sla.is-in .sla-trend polyline{stroke-dashoffset:0}
.sla-rule{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:20px}
.sla-step{display:inline-flex;align-items:center;padding:9px 15px;border-radius:999px;background:var(--mint-50);font:500 12px/1.4 'JetBrains Mono',ui-monospace,monospace;color:var(--green-700b);opacity:0;transform:translateY(6px);transition:opacity .3s cubic-bezier(.25,.46,.45,.94) var(--sd,0s),transform .3s cubic-bezier(.25,.46,.45,.94) var(--sd,0s)}
.sla-arrow{width:20px;height:2px;background:var(--green-500b);transform:scaleX(0);transform-origin:left;transition:transform .25s cubic-bezier(.22,.61,.36,1) var(--sd,0s)}
.sla.is-in .sla-step{opacity:1;transform:none}
.sla.is-in .sla-arrow{transform:scaleX(1)}

/* Section 7: the loop */
.loop{position:relative;max-width:880px;margin:0 auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:76px 150px;padding:28px 32px}
.loop-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.loop-path{fill:none;stroke:var(--green-500b);stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-linecap:round;opacity:.5}
.loop-path.is-draw{transition:stroke-dashoffset 1.4s cubic-bezier(.22,.61,.36,1) .2s;stroke-dashoffset:0!important}
.loop-n{position:relative;z-index:1;padding:20px 22px;border-radius:16px;background:var(--surface);border:1px solid var(--border-a);box-shadow:var(--shadow-md-g);opacity:0;transform:translateY(10px);transition:opacity .35s cubic-bezier(.25,.46,.45,.94) var(--ld,0s),transform .35s cubic-bezier(.25,.46,.45,.94) var(--ld,0s)}
.loop.is-in .loop-n{opacity:1;transform:none}
.loop-n small{display:block;font:500 10.5px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--green-700b)}
.loop-n b{display:block;margin-top:10px;font:500 15px/1.4 var(--font-body);color:var(--ink-a)}
.loop-n p{margin:5px 0 0;font:400 13.5px/1.5 var(--font-body);color:var(--ink-mutedb);text-wrap:pretty}
.loop-n--2{grid-column:2;grid-row:2}
.loop-n--3{grid-column:1;grid-row:2}
.loop-back{position:absolute;left:50%;top:-4px;transform:translate(-50%,-50%);padding:4px 12px;border-radius:999px;background:var(--mint-100);font:500 11px/1.5 'JetBrains Mono',ui-monospace,monospace;color:var(--green-700b);opacity:0;transition:opacity .35s cubic-bezier(.25,.46,.45,.94) 1.5s}
.loop.is-in .loop-back{opacity:1}

/* Responsive */
@media(max-width:1080px){.sla{grid-template-columns:1fr}}
@media(max-width:860px){
 .hdx-clip{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -24px;padding:0 24px 8px}
 .hdx-clip .bwr{min-width:660px}
 .loop{grid-template-columns:1fr;gap:20px;padding:16px 0 0}
 .loop-svg{display:none}
 .loop-n--2,.loop-n--3{grid-column:auto;grid-row:auto}
 .loop-n--3{order:1}
 .loop-back{position:static;transform:none;justify-self:start;order:2;opacity:1}
}
@media(prefers-reduced-motion:reduce){
 .hdi-ch,.hdi-tag,.hdi-deal,.hdx-det,.hd-chip,.sla-step,.loop-n,.loop-back{opacity:1;transform:none;transition:none}
 .sla-arrow{transform:none;transition:none}
 .hdi-dot{animation:none}
 .sla-trend polyline{stroke-dashoffset:0;transition:none}
 .loop-path{stroke-dasharray:none!important;stroke-dashoffset:0!important;transition:none}
}