/* The help chat (design seoga-support-agent-v1.0, owner 12 Oct 2026): the Help button and the panel, on every app page
   and on the public website. Self-contained (its own font, colours and sizes from the app type scale), so it looks the
   same wherever it opens. Reading text uses the reading-screen size (help is a reading screen). */
.hp-open{box-sizing:border-box;display:inline-flex;align-items:center;gap:7px;height:var(--h-btn);padding:0 14px;border:1px solid #E2E8F0;border-radius:999px;background:#FFFFFF;color:#3730A3;font-family:"Plus Jakarta Sans","Seoga Fallback","Segoe UI",system-ui,sans-serif;font-size:var(--fs-btn);font-weight:var(--fw-btn);line-height:1;cursor:pointer;white-space:nowrap}
.hp-open:hover{background:#EEF2FF;border-color:#C7D2FE}
.hp-open[aria-expanded="true"]{background:#EEF2FF;border-color:#A5B4FC}
.hp-open:focus-visible,.hp button:focus-visible,.hp a:focus-visible,.hp textarea:focus-visible,.hp input:focus-visible{outline:3px solid #4F46E5;outline-offset:2px}
.hp-open .hp-ico{width:18px;height:18px}
.hp-open--fab{position:fixed;right:20px;bottom:20px;z-index:70;height:48px;padding:0 20px;border:0;background:#4F46E5;color:#FFFFFF;box-shadow:0 2px 4px rgba(15,23,42,.08),0 16px 32px -12px rgba(49,46,129,.45)}
.hp-open--fab:hover{background:#4338CA;color:#FFFFFF}
.hp-open--fab[aria-expanded="true"]{display:none}
.hp-ico{width:16px;height:16px;flex:none}

.hp{box-sizing:border-box;position:fixed;top:0;right:0;bottom:0;z-index:90;display:flex;flex-direction:column;width:400px;max-width:100%;background:#FFFFFF;border-left:1px solid #E2E8F0;box-shadow:0 2px 4px rgba(15,23,42,.06),0 28px 60px -20px rgba(49,46,129,.35);font-family:"Plus Jakarta Sans","Seoga Fallback","Segoe UI",system-ui,sans-serif;font-size:var(--fs-body);line-height:var(--lh-body);color:#334155;text-align:left}
.hp[hidden]{display:none}
.hp *,.hp *::before,.hp *::after{box-sizing:border-box}
.hp p,.hp h2,.hp ol{margin:0}
.hp button,.hp input,.hp textarea{margin:0;font-family:inherit;letter-spacing:normal;text-transform:none}
.hp .sg-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hp-head{display:flex;align-items:center;gap:12px;padding:14px 14px 14px 18px;border-bottom:1px solid #E2E8F0}
.hp-av{display:inline-flex;align-items:center;justify-content:center;flex:none;width:36px;height:36px;border-radius:12px;background:#4F46E5;color:#FFFFFF;font-size:var(--fs-section);font-weight:800;line-height:1}
.hp-who{flex:1;min-width:0}
.hp-title{font-size:var(--fs-section);font-weight:var(--fw-section);line-height:1.3;color:#0F172A}
.hp-sub{margin-top:2px;font-size:var(--fs-small);font-weight:var(--fw-small);line-height:1.4;color:#475569}
.hp-x{display:inline-flex;align-items:center;justify-content:center;flex:none;width:36px;height:36px;padding:0;font-size:var(--fs-btn);line-height:1;border:1px solid #E2E8F0;border-radius:10px;background:#FFFFFF;color:#334155;cursor:pointer}
.hp-x:hover{background:#F8FAFC;color:#0F172A}
.hp-x .hp-ico{width:18px;height:18px}

.hp-state{display:flex;align-items:flex-start;gap:8px;margin:12px 16px 0;padding:10px 12px;border:1px solid #FDE68A;border-radius:12px;background:#FFFBEB;color:#92400E;font-size:var(--fs-small);font-weight:var(--fw-small);line-height:1.5}
.hp-state[hidden]{display:none}
.hp-state .hp-ico{margin-top:1px}

.hp-log{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:16px;list-style:none}
.hp-m{max-width:88%;padding:10px 14px;border-radius:16px;font-size:var(--fs-read);line-height:var(--lh-read);overflow-wrap:anywhere}
.hp-m p+p{margin-top:8px}
.hp-m--agent{align-self:flex-start;border-bottom-left-radius:6px;background:#F1F5F9;color:#0F172A}
.hp-m--user{align-self:flex-end;border-bottom-right-radius:6px;background:#4F46E5;color:#FFFFFF}
.hp-m--note{align-self:stretch;max-width:none;border:1px solid #99F6E4;background:#F0FDFA;color:#115E59;font-size:var(--fs-body);line-height:var(--lh-body);font-weight:600}
.hp-m--wait{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;background:#F8FAFC;border:1px dashed #CBD5E1;color:#475569;font-size:var(--fs-body);line-height:var(--lh-body)}
.hp-dots{display:inline-flex;gap:4px}
.hp-dots i{width:6px;height:6px;border-radius:50%;background:#6366F1;animation:hp-dot 1.2s infinite ease-in-out}
.hp-dots i:nth-child(2){animation-delay:.15s}
.hp-dots i:nth-child(3){animation-delay:.3s}
@keyframes hp-dot{0%,80%,100%{opacity:.25}40%{opacity:1}}
.hp-links{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.hp-link{display:inline-flex;align-items:center;gap:6px;height:var(--h-btn-sm);padding:0 12px;border:1px solid #C7D2FE;border-radius:999px;background:#FFFFFF;color:#3730A3;font-size:var(--fs-btn-sm);font-weight:700;line-height:1;text-decoration:none}
.hp-link:hover{background:#EEF2FF;color:#312E81}
.hp-tries{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.hp-tries[hidden]{display:none}
.hp-tries__t{font-size:var(--fs-label);font-weight:var(--fw-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:#475569}
.hp-try{display:inline-flex;align-items:center;min-height:var(--h-btn-sm);padding:6px 12px;border:1px solid #E2E8F0;border-radius:999px;background:#FFFFFF;color:#0F172A;font-family:inherit;font-size:var(--fs-btn-sm);font-weight:600;line-height:1.3;text-align:left;cursor:pointer}
.hp-try:hover{border-color:#A5B4FC;background:#EEF2FF}

.hp-mail{display:flex;flex-direction:column;gap:8px;margin:0 16px 12px;padding:12px;border:1px solid #C7D2FE;border-radius:14px;background:#EEF2FF}
.hp-mail[hidden]{display:none}
.hp-mail__t{display:flex;align-items:flex-start;gap:8px;font-size:var(--fs-body);font-weight:600;color:#312E81}
.hp-mail__t .hp-ico{margin-top:2px}
.hp-mail__l{font-size:var(--fs-small);font-weight:var(--fw-small);color:#334155}
.hp-mail__in{height:var(--h-input);line-height:var(--lh-body);padding:0 12px;border:1px solid #CBD5E1;border-radius:10px;background:#FFFFFF;color:#0F172A;font-family:inherit;font-size:var(--fs-input)}
.hp-mail__err,.hp-err{font-size:var(--fs-small);font-weight:var(--fw-small);color:#B91C1C}
.hp-mail__err[hidden],.hp-err[hidden]{display:none}
.hp-err{margin:0 16px 8px}
.hp-mail__acts{display:flex;gap:8px}
.hp-btn{display:inline-flex;align-items:center;justify-content:center;height:var(--h-btn);padding:0 14px;border:1px solid #CBD5E1;border-radius:10px;background:#FFFFFF;color:#0F172A;font-family:inherit;font-size:var(--fs-btn);font-weight:var(--fw-btn);line-height:1;cursor:pointer}
.hp-btn--main{border-color:#4F46E5;background:#4F46E5;color:#FFFFFF}
.hp-btn--main:hover{background:#4338CA}
.hp-btn[disabled],.hp-go[disabled],.hp-to[disabled]{opacity:.6;cursor:progress}

.hp-form{display:flex;align-items:flex-end;gap:8px;margin:0 16px;padding:8px 8px 8px 12px;border:1px solid #CBD5E1;border-radius:14px;background:#FFFFFF}
.hp-form:focus-within{border-color:#6366F1;box-shadow:0 0 0 3px rgba(99,102,241,.18)}
.hp-q{flex:1;min-width:0;min-height:40px;max-height:140px;padding:6px 0;border:0;background:transparent;color:#0F172A;font-family:inherit;font-size:var(--fs-input);line-height:var(--lh-body);resize:none}
.hp-q:focus{outline:none}
.hp-q::placeholder{color:#64748B}
.hp-go{display:inline-flex;align-items:center;justify-content:center;flex:none;width:var(--h-btn);height:var(--h-btn);padding:0;font-size:var(--fs-btn);line-height:1;border:0;border-radius:10px;background:#4F46E5;color:#FFFFFF;cursor:pointer}
.hp-go:hover{background:#4338CA}
.hp-go .hp-ico{width:18px;height:18px}
.hp-foot{display:flex;flex-direction:column;gap:6px;padding:10px 16px 14px}
.hp-to{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;height:var(--h-btn-sm);padding:0 10px;border:1px solid #E2E8F0;border-radius:999px;background:#FFFFFF;color:#3730A3;font-family:inherit;font-size:var(--fs-btn-sm);font-weight:700;line-height:1;cursor:pointer}
.hp-to:hover{background:#EEF2FF;border-color:#C7D2FE}
.hp-note{font-size:var(--fs-small);font-weight:500;line-height:1.45;color:#475569}

@media (max-width:560px){
  .hp{width:100%;border-left:0}
  .hp-open--top{width:var(--h-btn);padding:0;justify-content:center}
  .hp-open--top span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .hp-open--fab{right:16px;bottom:16px}
}
@media (prefers-reduced-motion:reduce){.hp-dots i{animation:none;opacity:.7}}
.hp-to.hp-to--on{background:#4F46E5;border-color:#4F46E5;color:#FFFFFF}