/* #255 help bot. The header button itself is styled in style.css (it shows before this file is loaded on first open). Design hooks: every colour, corner and size the bot uses is a --bot-* token below. A new design
   changes these tokens (and help_bot.PERSONA / templates/help_bot.html) – never help-bot.js or help_bot.py.
   In the app they follow theme.css (light and dark); on public help pages they follow public.css. */
.hb{--bot-bg:var(--surface);--bot-soft:var(--surface-2);--bot-text:var(--text);--bot-muted:var(--text-muted);--bot-border:var(--border);--bot-accent:var(--accent);--bot-accent-hover:var(--accent-hover);--bot-on-accent:var(--accent-ink);--bot-character-2:var(--viz-3);--bot-spark:var(--viz-4);--bot-link:var(--accent-text);--bot-me-bg:var(--accent-soft);--bot-me-text:var(--text);--bot-shadow:var(--shadow-color);--bot-focus:var(--focus);--bot-radius:var(--radius-lg);--bot-bubble-radius:var(--radius-md);--bot-width:400px;--bot-avatar-size:34px;--bot-font-size:var(--fs-lg)}
.kc-public .hb{--bot-bg:var(--pub-surface);--bot-soft:var(--pub-surface-soft);--bot-text:var(--pub-text);--bot-muted:var(--pub-text-muted);--bot-border:var(--pub-border);--bot-accent:var(--pub-accent);--bot-accent-hover:var(--pub-accent-hover);--bot-on-accent:var(--pub-ink);--bot-character-2:var(--pub-accent-hover);--bot-spark:var(--pub-accent-strong);--bot-link:var(--pub-link);--bot-me-bg:var(--pub-accent-soft);--bot-me-text:var(--pub-text);--bot-shadow:var(--pub-shadow);--bot-focus:var(--pub-focus)}
.hb{font-size:var(--bot-font-size);line-height:1.45}
.hb-avatar{flex:none;display:grid;place-items:center;width:var(--bot-avatar-size);height:var(--bot-avatar-size);position:relative;color:var(--bot-on-accent);font-weight:800}.hb-avatar img{width:100%;height:100%;border-radius:44% 44% 48% 48%;object-fit:cover}.hb-milo-body{position:absolute;inset:0;border-radius:44% 44% 48% 48%;background:linear-gradient(145deg,var(--bot-accent),var(--bot-character-2));box-shadow:inset -4px -4px 0 color-mix(in srgb,var(--bot-text) 12%,transparent)}.hb-milo-eye{position:absolute;top:13px;width:3px;height:5px;border-radius:50%;background:var(--bot-on-accent)}.hb-milo-eye-left{left:10px}.hb-milo-eye-right{right:10px}.hb-milo-mouth{position:absolute;top:22px;left:13px;width:8px;height:3px;border-bottom:1px solid var(--bot-on-accent);border-radius:50%}.hb-milo-spark{position:absolute;right:-3px;top:-5px;color:var(--bot-spark);font-size:var(--fs-xs);font-style:normal;line-height:1}
.hb a{color:var(--bot-link)}
.hb a:focus-visible,.hb button:focus-visible,.hb input:focus-visible{outline:2px solid var(--bot-focus);outline-offset:2px}
.hb-float .hb-avatar,.hb-app .hb-avatar{display:grid;place-items:center;width:var(--bot-avatar-size);height:var(--bot-avatar-size);color:var(--bot-on-accent);font-weight:800}
.hb-float .hb-launch,.hb-app .hb-launch{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--bot-text);font-weight:700}
.hb-head .hb-avatar{justify-content:center;width:var(--bot-avatar-size);height:var(--bot-avatar-size);color:var(--bot-on-accent);flex:none}
.hb-float .hb-launch{position:fixed;right:16px;bottom:16px;z-index:40;padding:6px 18px 6px 6px;border-radius:var(--radius-pill);background:var(--bot-bg);border:1px solid var(--bot-border);box-shadow:0 10px 28px var(--bot-shadow)}
.hb-app .hb-dock{position:fixed;right:18px;bottom:18px;z-index:40;display:flex;align-items:center;gap:5px;padding:5px;border:1px solid var(--bot-border);border-radius:var(--radius-pill);background:var(--bot-bg);box-shadow:0 10px 30px var(--bot-shadow)}.hb-app .hb-launch{padding:2px 8px 2px 2px}.hb-app .hb-minimize{display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-left:1px solid var(--bot-border);border-radius:0 var(--radius-pill) var(--radius-pill) 0;background:transparent;color:var(--bot-muted);font:inherit;font-size:var(--fs-xl);cursor:pointer}.hb-app .hb-minimize:hover{color:var(--bot-text);background:var(--bot-soft)}.hb-app .hb-restore{position:fixed;right:0;bottom:24px;z-index:40;width:30px;height:44px;padding:0 3px 0 0;border:1px solid var(--bot-border);border-right:0;border-radius:var(--radius-pill) 0 0 var(--radius-pill);background:var(--bot-bg);color:var(--bot-accent);box-shadow:0 8px 24px var(--bot-shadow);cursor:pointer}.hb-app.is-minimized .hb-dock{display:none}.hb-app .hb-restore[hidden]{display:none}
.hb .hb-launch:hover{border-color:var(--bot-accent)}
.hb.is-open .hb-launch{border-color:var(--bot-accent)}
.hb-panel{position:fixed;z-index:60;right:16px;top:76px;width:min(var(--bot-width),calc(100vw - 32px));max-height:calc(100vh - 96px);display:flex;flex-direction:column;background:var(--bot-bg);color:var(--bot-text);border:1px solid var(--bot-border);border-radius:var(--bot-radius);box-shadow:0 18px 48px var(--bot-shadow);overflow:hidden}
.hb-float .hb-panel,.hb-app .hb-panel{top:auto;bottom:82px;max-height:min(640px,calc(100vh - 106px))}
.hb-panel[hidden]{display:none}
/* #258: motion. The panel glides and fades in from its button; messages slide up; the answer card follows the text. */
.hb{--bot-ease:cubic-bezier(.2,.8,.2,1);--bot-speed:.22s}
.hb-panel{opacity:0;transform:translateY(-8px) scale(.97);transform-origin:top right;transition:opacity var(--bot-speed) ease,transform var(--bot-speed) var(--bot-ease)}
.hb-float .hb-panel,.hb-app .hb-panel{transform:translateY(18px) scale(.96);transform-origin:bottom right;transition-duration:.34s}
.hb-panel.is-visible{opacity:1;transform:none}
.hb .hb-launch{transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}
.hb .hb-launch:active{transform:scale(.95)}
.hb-milo-body{transform-origin:bottom center;animation:hb-milo-breathe 3.2s var(--bot-ease) infinite}.hb-milo-eye{animation:hb-milo-blink 5s infinite}.hb-milo-spark{animation:hb-milo-spark 2.4s ease-in-out infinite}.hb.is-waking .hb-dock .hb-avatar,.hb.is-waking .hb-head .hb-avatar{transform-origin:50% 78%;animation:hb-milo-wake .9s var(--bot-ease) both}.hb.is-thinking .hb-head .hb-avatar{transform-origin:50% 78%;animation:hb-milo-busy 1.35s ease-in-out infinite}.hb.is-thinking .hb-milo-body{animation:hb-milo-listen .7s var(--bot-ease) infinite alternate}.hb.is-thinking .hb-milo-spark{animation-duration:.8s}
.hb-msg{animation:hb-in .32s var(--bot-ease) both}
.hb-me{animation-name:hb-in-me}
.hb-card{animation:hb-in .34s var(--bot-ease) .1s both}
.hb-steps li{animation:hb-in .3s var(--bot-ease) both}
.hb-steps li:nth-child(1){animation-delay:.16s}.hb-steps li:nth-child(2){animation-delay:.22s}.hb-steps li:nth-child(3){animation-delay:.28s}.hb-steps li:nth-child(4){animation-delay:.34s}.hb-steps li:nth-child(5){animation-delay:.4s}.hb-steps li:nth-child(6){animation-delay:.46s}
.hb-actions,.hb-related,.hb-topics{animation:hb-fade .3s ease .3s both}
.hb-suggest .hb-chip{animation:hb-in .3s var(--bot-ease) both}
.hb-suggest .hb-chip:nth-child(2){animation-delay:.05s}.hb-suggest .hb-chip:nth-child(3){animation-delay:.1s}.hb-suggest .hb-chip:nth-child(4){animation-delay:.15s}
.hb .hb-chip,.hb .hb-send,.hb .hb-go,.hb .hb-close{transition:transform .12s ease,background .15s ease,border-color .15s ease}
.hb .hb-chip:active,.hb .hb-send:active,.hb .hb-go:active,.hb .hb-close:active{transform:scale(.96)}
.hb-typing-row{display:flex;align-items:flex-end;gap:9px;justify-self:start;max-width:92%;animation:hb-in .28s var(--bot-ease) both}
.hb-typing-row .hb-typing-milo{--bot-avatar-size:34px;margin-bottom:3px}
.hb-typing-row .hb-typing-milo{transform-origin:50% 78%;animation:hb-milo-busy .95s ease-in-out infinite}.hb-typing-row .hb-milo-body{animation:hb-milo-answer .55s var(--bot-ease) infinite alternate}
.hb-typing-row .hb-milo-mouth{transform-origin:center;animation:hb-milo-talk .36s ease-in-out infinite alternate}
.hb-typing-row .hb-milo-spark{animation-duration:.7s}
.hb-typing{display:inline-flex;gap:8px;align-items:center;padding:11px 14px}
.hb-typing-label{font-size:var(--fs-sm);font-weight:700;color:var(--bot-muted)}
.hb-typing-dots{display:inline-flex;gap:4px;align-items:center}
.hb-dot{width:7px;height:7px;border-radius:50%;background:var(--bot-muted);animation:hb-dot 1s ease-in-out infinite}
.hb-dot:nth-child(2){animation-delay:.15s}.hb-dot:nth-child(3){animation-delay:.3s}
@keyframes hb-in{from{opacity:0;transform:translateY(8px)}}
@keyframes hb-in-me{from{opacity:0;transform:translate(10px,6px) scale(.98)}}
@keyframes hb-fade{from{opacity:0}}
@keyframes hb-dot{0%,80%,100%{transform:translateY(0);opacity:.45}40%{transform:translateY(-4px);opacity:1}}
@keyframes hb-milo-breathe{50%{transform:translateY(-2px) scaleY(1.03)}}
@keyframes hb-milo-blink{0%,45%,49%,100%{transform:scaleY(1)}47%{transform:scaleY(.08)}}
@keyframes hb-milo-spark{50%{transform:translateY(-2px) rotate(20deg);opacity:.55}}
@keyframes hb-milo-wake{0%{transform:rotate(0)}28%{transform:rotate(-7deg) translateY(-1px)}58%{transform:rotate(5deg) translateY(-2px)}82%{transform:rotate(-2deg)}100%{transform:rotate(0)}}
@keyframes hb-milo-busy{0%,100%{transform:rotate(-3deg) translateY(0)}50%{transform:rotate(4deg) translateY(-2px)}}
@keyframes hb-milo-listen{to{transform:translateY(-3px) rotate(2deg) scaleY(1.04)}}
@keyframes hb-milo-answer{to{transform:translateY(-3px) rotate(-2deg) scaleY(1.04)}}
@keyframes hb-milo-talk{from{transform:scaleX(.65) scaleY(.45)}to{transform:scaleX(1) scaleY(1.55)}}
@media(prefers-reduced-motion:reduce){.hb *,.hb-panel{animation:none!important;transition:none!important}.hb-panel{transform:none}}
.hb-head{display:flex;align-items:center;gap:12px;padding:14px 14px 14px 16px;border-bottom:1px solid var(--bot-border)}
.hb-head .hb-avatar{--bot-avatar-size:44px}.hb-head .hb-milo-eye{top:18px;width:4px;height:6px}.hb-head .hb-milo-eye-left{left:13px}.hb-head .hb-milo-eye-right{right:13px}.hb-head .hb-milo-mouth{top:29px;left:17px;width:10px;height:4px}.hb-head .hb-milo-spark{right:-4px;top:-6px;font-size:var(--fs-sm)}
.hb-who{display:grid;flex:1;min-width:0}
.hb-who strong{font-size:var(--fs-xl)}
.hb-who small{font-size:var(--fs-sm);color:var(--bot-muted);margin:0}
.hb .hb-close{flex:none;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:var(--bot-soft);color:var(--bot-text);font-size:var(--fs-2xl);font-weight:700;cursor:pointer}
.hb .hb-close:hover{background:var(--bot-me-bg)}
.hb-log{flex:1;overflow-y:auto;padding:16px;display:grid;align-content:start;gap:12px;background:var(--bot-soft)}
.hb-msg{max-width:92%;padding:10px 14px;border-radius:var(--bot-bubble-radius);background:var(--bot-bg);border:1px solid var(--bot-border)}
.hb-msg p{margin:0}
.hb-me{justify-self:end;background:var(--bot-me-bg);color:var(--bot-me-text);border-color:transparent;overflow-wrap:anywhere}
.hb-suggest,.hb-topics{display:flex;flex-wrap:wrap;gap:8px}
.hb-topics{margin-top:10px}
.hb .hb-chip{display:inline-block;padding:7px 12px;border:1px solid var(--bot-border);border-radius:var(--radius-pill);background:var(--bot-bg);color:var(--bot-text);font:inherit;font-size:var(--fs-md);font-weight:600;text-decoration:none;cursor:pointer;text-align:left}
.hb .hb-chip:hover{border-color:var(--bot-accent)}
.hb-card{margin-top:10px;padding:12px;border:1px solid var(--bot-border);border-radius:var(--radius);background:var(--bot-soft)}
.hb-card-cat{display:block;font-size:var(--fs-xs);font-weight:750;letter-spacing:.1em;text-transform:uppercase;color:var(--bot-muted)}
.hb .hb-card-title{display:block;margin:2px 0 6px;font-size:var(--fs-xl);font-weight:800;color:var(--bot-text);text-decoration:none}
.hb .hb-card-title:hover{color:var(--bot-link)}
.hb-steps{margin:0 0 10px;padding-left:20px;display:grid;gap:5px;font-size:var(--fs-md)}
.hb-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.hb .hb-go{padding:8px 14px;border-radius:var(--radius);background:var(--bot-accent);color:var(--bot-on-accent);font-weight:750;font-size:var(--fs-md);text-decoration:none}
.hb .hb-go:hover{background:var(--bot-accent-hover)}
.hb .hb-more{font-size:var(--fs-md);font-weight:600}
.hb-related{margin-top:8px!important;font-size:var(--fs-md);color:var(--bot-muted)}
.hb-rate{display:flex;align-items:center;gap:6px;margin-top:10px;font-size:var(--fs-md);color:var(--bot-muted);animation:hb-fade .3s ease .35s both}
.hb .hb-vote{width:34px;height:34px;padding:0;border:1px solid var(--bot-border);border-radius:50%;background:var(--bot-bg);font-size:var(--fs-xl);cursor:pointer;transition:transform .12s ease,border-color .15s ease}
.hb .hb-vote:hover{border-color:var(--bot-accent)}
.hb .hb-vote:active{transform:scale(.92)}
.hb-rated{animation:hb-fade .3s ease both}
.hb-form{display:flex;gap:8px;padding:12px;border-top:1px solid var(--bot-border);background:var(--bot-bg)}
.hb .hb-form input{flex:1;min-width:0;margin:0;padding:11px 14px;border:1px solid var(--bot-border);border-radius:var(--radius-pill);background:var(--bot-soft);color:var(--bot-text);font:inherit}
.hb .hb-send{flex:none;padding:10px 16px;border:0;border-radius:var(--radius-pill);background:var(--bot-accent);color:var(--bot-on-accent);font:inherit;font-weight:800;cursor:pointer}
.hb .hb-send:disabled{opacity:.5}
.hb-foot{margin:0;padding:0 14px 12px;background:var(--bot-bg);font-size:var(--fs-sm);color:var(--bot-muted)}
.hb-handoff{display:grid;gap:9px;margin-top:10px;padding:12px;border:1px solid color-mix(in srgb,var(--bot-accent) 45%,var(--bot-border));border-radius:var(--radius-md);background:var(--bot-soft)}
.hb-handoff p,.hb-support-status{margin:0}.hb-support-form{display:grid;gap:9px}.hb-support-form[hidden]{display:none}
.hb-support-field{display:grid;gap:4px;font-size:var(--fs-sm);font-weight:700}.hb-support-field input,.hb-support-field textarea{width:100%;box-sizing:border-box;margin:0;padding:9px 10px;border:1px solid var(--bot-border);border-radius:var(--radius-sm);background:var(--bot-bg);color:var(--bot-text);font:inherit;font-weight:400}.hb-support-field textarea{min-height:84px;resize:vertical}
.hb-support-consent{display:flex;gap:8px;align-items:flex-start;font-size:var(--fs-xs);color:var(--bot-muted)}.hb-support-consent input{margin-top:2px}.hb-support-status{font-size:var(--fs-sm);color:var(--bot-muted)}.hb-support-success{color:var(--bot-accent);font-weight:750}
.hb-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(max-width:600px){.hb-panel,.hb-float .hb-panel,.hb-app .hb-panel{inset:auto 12px 72px;top:auto;width:auto;max-height:calc(100dvh - 96px);height:min(680px,calc(100dvh - 96px));border-radius:var(--bot-radius);border:1px solid var(--bot-border);transform:translateY(20px) scale(.98);transform-origin:bottom center}.hb-panel.is-visible,.hb-float .hb-panel.is-visible,.hb-app .hb-panel.is-visible{transform:none}.hb-float .hb-launch{right:12px;bottom:12px}.hb-app .hb-dock{right:12px;bottom:12px}.hb-app .hb-launch-label{display:none}.hb-app .hb-launch{padding:2px}.hb-app .hb-minimize{width:30px}.hb-app .hb-restore{bottom:16px}}
/* #258: no zoom into the field on phones (iOS zooms below 16px). */
@media(pointer:coarse),(max-width:760px){.hb .hb-form input{font-size:var(--fs-2xl)}}