/* Help window: floating button bottom-right and a compact chat / contact panel. Colours come from the theme tokens. */
.help{position:fixed;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));z-index:60;display:grid;justify-items:end;gap:12px}
.help-fab{display:inline-flex;align-items:center;gap:8px;padding:11px 16px 11px 13px;border:1px solid color-mix(in srgb,var(--b1) 55%,var(--line));border-radius:99px;
  background:color-mix(in srgb,var(--b1) 22%,var(--panel));color:var(--ink);font:600 14px var(--body);cursor:pointer;
  box-shadow:0 10px 30px -12px color-mix(in srgb,var(--b1) 70%,transparent),0 2px 8px rgba(0,0,0,.25)}
.help-fab svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.help-fab:hover{background:color-mix(in srgb,var(--b1) 32%,var(--panel))}
.help-fab:focus-visible,.help-panel :focus-visible{outline:2px solid var(--b1);outline-offset:2px}
.help.open .help-fab{opacity:.85}
.help-panel{order:-1;width:min(380px,calc(100vw - 36px));height:min(560px,calc(100vh - 110px));display:flex;flex-direction:column;
  border:1px solid color-mix(in srgb,var(--b1) 30%,var(--line));border-radius:16px;background:var(--panel);overflow:hidden;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.55)}
.help-panel[hidden]{display:none}
.help-head{display:flex;align-items:flex-start;gap:10px;padding:14px 16px 10px;background:color-mix(in srgb,var(--b1) 10%,var(--panel))}
.help-head div{flex:1}
.help-head h2{margin:0;font:700 17px/1.2 var(--display)}
.help-head p{margin:3px 0 0;font-size:13px;color:var(--muted)}
.help-x{border:0;background:none;color:var(--muted);font-size:24px;line-height:1;cursor:pointer;padding:0 4px;border-radius:6px}
.help-x:hover{color:var(--ink)}
.help-tabs{display:flex;gap:4px;padding:0 12px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--b1) 10%,var(--panel))}
.help-tabs button{border:0;background:none;color:var(--muted);font:600 13.5px var(--body);padding:9px 10px;border-bottom:2px solid transparent;cursor:pointer}
.help-tabs button.on{color:var(--ink);border-bottom-color:var(--b1)}
.help-body{flex:1;min-height:0;display:flex;flex-direction:column}
.help-log{flex:1;overflow:auto;padding:14px;display:flex;flex-direction:column;gap:10px}
.help-msg{max-width:88%;padding:9px 12px;border-radius:14px;font-size:14px;line-height:1.5;overflow-wrap:anywhere}
.help-msg p{margin:0}.help-msg p+p,.help-msg p+ul,.help-msg ul+p,.help-msg pre+p,.help-msg p+pre{margin-top:8px}
.help-msg ul{margin:6px 0 0;padding-left:18px}
.help-msg code{font:12.5px Menlo,Monaco,Consolas,"Courier New",monospace;font-variant-ligatures:none;background:color-mix(in srgb,var(--line) 70%,transparent);padding:1px 4px;border-radius:4px}
.help-msg pre{margin:8px 0 0;padding:10px;border-radius:8px;background:var(--code-bg);overflow:auto}
.help-msg pre code{background:none;padding:0;white-space:pre}
.help-msg.bot{align-self:flex-start;background:color-mix(in srgb,var(--line) 45%,transparent);border-bottom-left-radius:4px}
.help-msg.me{align-self:flex-end;background:color-mix(in srgb,var(--b1) 26%,var(--panel));border-bottom-right-radius:4px}
.help-msg.typing{display:flex;gap:4px;padding:12px 14px}
.help-msg.typing span{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:help-dot 1s infinite ease-in-out}
.help-msg.typing span:nth-child(2){animation-delay:.15s}.help-msg.typing span:nth-child(3){animation-delay:.3s}
@keyframes help-dot{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
.help-chips{display:flex;flex-wrap:wrap;gap:6px}
.help-chips button{border:1px solid color-mix(in srgb,var(--b1) 40%,var(--line));background:none;color:var(--ink);border-radius:99px;padding:6px 11px;font:500 13px var(--body);cursor:pointer;text-align:left}
.help-chips button:hover{background:color-mix(in srgb,var(--b1) 14%,transparent)}
.help-input{display:flex;gap:8px;align-items:flex-end;padding:10px 12px;border-top:1px solid var(--line)}
.help-input textarea{flex:1;resize:none;min-height:40px;max-height:140px;padding:9px 11px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);font:14px/1.4 var(--body)}
.help-clear{align-self:center;margin:0 0 8px;border:0;background:none;color:var(--muted);font-size:12.5px;cursor:pointer;text-decoration:underline}
.help-guest{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line)}
.help-guest .btn{flex:1}
.help-contact{display:grid;gap:12px;padding:14px;overflow:auto}
.help-contact label{display:grid;gap:5px;font:600 13px var(--body)}
.help-contact small{font-weight:400;color:var(--muted)}
.help-contact input,.help-contact select,.help-contact textarea{padding:9px 11px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);font:400 14px/1.4 var(--body)}
.help-contact textarea{resize:vertical;min-height:110px}
.help-err{margin:0;color:var(--bad);font-size:13px;min-height:0}
.help-err:empty{display:none}
.help-note{margin:0;font-size:12px;color:var(--muted)}
.help-sent{padding:20px 16px;display:grid;gap:14px;justify-items:start}
.help-sent p{margin:0;line-height:1.55}
@media (max-width:520px){
  .help-fab span{display:none}.help-fab{padding:13px}
  .help-panel{width:calc(100vw - 24px);height:calc(100vh - 96px)}
  .help{right:12px;bottom:12px}
}
@media (prefers-reduced-motion:reduce){.help-msg.typing span{animation:none}}