/* The Help button and panel (helpdesk/static/help.js). Everything is prefixed szh- so nothing here touches a page's
   own styles. Dark by default; html[data-theme="light"] (set by every page's theme switch) turns it light. */
.szh-root{--szh-bg:#12161f;--szh-bg2:#181d28;--szh-bg3:#1f2533;--szh-line:#262d3b;--szh-line2:#313a4c;--szh-text:#e8eaf0;--szh-text2:#b9bfcc;
  --szh-muted:#8a93a6;--szh-blue:#4c8ef7;--szh-gold:#f5b942;--szh-ok:#26a69a;--szh-bad:#f0616d;--szh-sh:rgba(0,0,0,.45)}
html[data-theme="light"] .szh-root{--szh-bg:#ffffff;--szh-bg2:#f5f7fb;--szh-bg3:#eceff5;--szh-line:#e3e7ee;--szh-line2:#d3d8e2;--szh-text:#141922;
  --szh-text2:#3b4354;--szh-muted:#677085;--szh-blue:#2962ff;--szh-gold:#c98a0e;--szh-ok:#138a7e;--szh-bad:#d53a4a;--szh-sh:rgba(20,30,50,.18)}

/* the button: placed next to the page's light/dark switch, or floating at the bottom right */
.szh-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.szh-btn{position:relative}
.szh-dot{position:absolute;top:4px;right:4px;width:8px;height:8px;border-radius:50%;background:#f0616d;box-shadow:0 0 0 2px rgba(0,0,0,.25)}
.szh-fab{position:fixed;right:18px;bottom:18px;z-index:2147482050;display:inline-flex;align-items:center;gap:7px;height:42px;padding:0 16px 0 13px;
  border-radius:21px;border:1px solid rgba(255,255,255,.12);background:#1b2130;color:#e8eaf0;font:600 14px/1 Inter,-apple-system,"Segoe UI",Roboto,sans-serif;
  box-shadow:0 8px 24px rgba(0,0,0,.3);cursor:pointer}
html[data-theme="light"] .szh-fab{background:#ffffff;color:#141922;border-color:#d3d8e2;box-shadow:0 8px 24px rgba(20,30,50,.16)}
.szh-fab:hover{transform:translateY(-1px)}
.szh-fab.szh-hide{display:none}

/* the panel: at the side, the page stays in view and usable next to it */
.szh-panel{position:fixed;top:0;right:0;bottom:0;z-index:2147482100;width:400px;max-width:100%;display:flex;flex-direction:column;
  background:var(--szh-bg);color:var(--szh-text);border-left:1px solid var(--szh-line);box-shadow:-12px 0 40px var(--szh-sh);
  font:14px/1.5 Inter,-apple-system,"Segoe UI",Roboto,sans-serif;transform:translateX(105%);transition:transform .22s ease;visibility:hidden}
.szh-panel.szh-open{transform:none;visibility:visible}
.szh-panel *{box-sizing:border-box}
.szh-panel a{color:var(--szh-blue);text-decoration:none}.szh-panel a:hover{text-decoration:underline}
.szh-head{display:flex;align-items:center;gap:10px;padding:14px 14px 12px 18px;border-bottom:1px solid var(--szh-line)}
.szh-head h2{margin:0;font-size:16px;font-weight:700;line-height:1.2}.szh-head p{margin:2px 0 0;font-size:12.5px;color:var(--szh-muted)}
.szh-x{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;border:0;background:none;
  color:var(--szh-text2);cursor:pointer}.szh-x:hover{background:var(--szh-bg3);color:var(--szh-text)}
.szh-x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.szh-tabs{display:flex;gap:4px;padding:8px 12px;border-bottom:1px solid var(--szh-line)}
.szh-tab{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:34px;border-radius:9px;border:0;background:none;
  color:var(--szh-text2);font:600 13px/1 Inter,-apple-system,"Segoe UI",Roboto,sans-serif;cursor:pointer}
.szh-tab:hover{background:var(--szh-bg2);color:var(--szh-text)}.szh-tab.szh-on{background:var(--szh-bg3);color:var(--szh-text)}
.szh-tab b{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#f0616d;color:#fff;font-size:11px;line-height:18px}
.szh-view{flex:1;min-height:0;display:none;flex-direction:column}.szh-view.szh-on{display:flex}
.szh-scroll{flex:1;min-height:0;overflow:auto;padding:16px 18px}

/* Ask */
.szh-msgs{display:flex;flex-direction:column;gap:10px}
.szh-m{max-width:88%;padding:9px 13px;border-radius:14px;white-space:pre-wrap;word-break:break-word}
.szh-m.szh-ai{align-self:flex-start;background:var(--szh-bg2);border:1px solid var(--szh-line);border-bottom-left-radius:4px}
.szh-m.szh-me{align-self:flex-end;background:var(--szh-blue);color:#fff;border-bottom-right-radius:4px}
.szh-m.szh-err{align-self:flex-start;background:rgba(240,97,109,.1);border:1px solid rgba(240,97,109,.35)}
.szh-typing{display:inline-flex;gap:4px;padding:4px 2px}.szh-typing i{width:6px;height:6px;border-radius:50%;background:var(--szh-muted);animation:szh-b 1s infinite}
.szh-typing i:nth-child(2){animation-delay:.15s}.szh-typing i:nth-child(3){animation-delay:.3s}
@keyframes szh-b{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
.szh-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.szh-chip{padding:6px 11px;border-radius:999px;border:1px solid var(--szh-line2);background:none;color:var(--szh-text2);font:13px/1.3 Inter,-apple-system,"Segoe UI",Roboto,sans-serif;cursor:pointer;text-align:left}
.szh-chip:hover{border-color:var(--szh-blue);color:var(--szh-text)}
.szh-card{align-self:stretch;padding:12px 14px;border-radius:12px;border:1px solid var(--szh-line2);background:var(--szh-bg2)}
.szh-card small{display:block;color:var(--szh-muted);font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.szh-card b{display:block;margin:4px 0 2px}.szh-card p{margin:0 0 10px;color:var(--szh-text2);font-size:13px;white-space:pre-wrap;max-height:7.5em;overflow:hidden}
.szh-compose{display:flex;gap:8px;align-items:flex-end;padding:12px 14px;border-top:1px solid var(--szh-line)}
.szh-compose textarea{flex:1;min-height:42px;max-height:140px;padding:10px 12px;border-radius:12px;border:1px solid var(--szh-line2);background:var(--szh-bg2);
  color:var(--szh-text);font:14px/1.4 Inter,-apple-system,"Segoe UI",Roboto,sans-serif;resize:none;outline:none}
.szh-compose textarea:focus,.szh-f input:focus,.szh-f select:focus,.szh-f textarea:focus{border-color:var(--szh-blue)}
.szh-send{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px;border:0;background:var(--szh-blue);color:#fff;cursor:pointer}
.szh-send:disabled{opacity:.5;cursor:default}.szh-send svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.szh-under{padding:0 16px 12px;font-size:12px;color:var(--szh-muted)}
.szh-under button{padding:0;border:0;background:none;color:var(--szh-blue);font:inherit;cursor:pointer}

/* forms */
.szh-f{display:flex;flex-direction:column;gap:12px}
.szh-f label{display:flex;flex-direction:column;gap:5px;font-size:12.5px;font-weight:600;color:var(--szh-text2)}
.szh-f input,.szh-f select,.szh-f textarea{width:100%;padding:9px 11px;border-radius:10px;border:1px solid var(--szh-line2);background:var(--szh-bg2);
  color:var(--szh-text);font:14px/1.4 Inter,-apple-system,"Segoe UI",Roboto,sans-serif;font-weight:400;outline:none}
.szh-f textarea{min-height:130px;resize:vertical}
.szh-f .szh-check{flex-direction:row;align-items:center;gap:8px;font-weight:500}.szh-f .szh-check input{width:auto}
.szh-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.szh-btn2{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:38px;padding:0 16px;border-radius:10px;border:1px solid var(--szh-line2);
  background:var(--szh-bg2);color:var(--szh-text);font:600 13.5px/1 Inter,-apple-system,"Segoe UI",Roboto,sans-serif;cursor:pointer;text-decoration:none!important}
.szh-btn2.szh-primary{background:var(--szh-blue);border-color:var(--szh-blue);color:#fff}.szh-btn2:disabled{opacity:.6;cursor:default}
.szh-note{margin:0;font-size:12.5px;color:var(--szh-muted)}
.szh-msg{margin:0;padding:9px 12px;border-radius:10px;font-size:13px}
.szh-msg.szh-bad{background:rgba(240,97,109,.12);color:var(--szh-bad)}.szh-msg.szh-good{background:rgba(38,166,154,.12);color:var(--szh-ok)}
.szh-done{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:8px 0}
.szh-done h3{margin:0;font-size:17px}.szh-done p{margin:0;color:var(--szh-text2)}

/* My tickets */
.szh-t{border:1px solid var(--szh-line);border-radius:12px;margin-bottom:10px;overflow:hidden}
.szh-t-h{display:flex;flex-direction:column;gap:3px;width:100%;padding:11px 13px;border:0;background:var(--szh-bg2);color:var(--szh-text);text-align:left;cursor:pointer;font:inherit}
.szh-t-h span{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--szh-muted)}
.szh-st{padding:1px 8px;border-radius:6px;font-size:11.5px;font-weight:700;background:var(--szh-bg3);color:var(--szh-text2)}
.szh-st.open{color:var(--szh-gold)}.szh-st.answered{color:var(--szh-blue)}.szh-st.closed{color:var(--szh-ok)}
.szh-new{color:#f0616d;font-weight:700}
.szh-t-b{display:none;padding:12px 13px;border-top:1px solid var(--szh-line)}.szh-t.szh-on .szh-t-b{display:block}
.szh-tm{margin-bottom:10px}.szh-tm small{display:block;color:var(--szh-muted);font-size:12px}
.szh-tm p{margin:2px 0 0;white-space:pre-wrap;word-break:break-word}.szh-tm.team p{padding:8px 11px;border-radius:10px;background:rgba(76,142,247,.1)}
.szh-empty{color:var(--szh-muted);padding:10px 0}
.szh-foot{padding:10px 16px;border-top:1px solid var(--szh-line);font-size:11.5px;color:var(--szh-muted)}

@media (max-width:640px){.szh-panel{left:0;width:auto;border-left:0}.szh-fab{right:12px;bottom:12px;height:40px}}
@media (prefers-reduced-motion:reduce){.szh-panel{transition:none}}
@media print{.szh-fab,.szh-panel{display:none!important}}
