/* BugIt Guide. Prototype widget, injected by prototype-chatbot/server.mjs only.
   Paints from the site's generated brand tokens (public/brand/tokens.css) and falls back to the
   same values, so it reads as part of bugit.dev: the mission console, not a speech bubble. */

.bgd-root{
  --bgd-bg:var(--bg,#05040b);
  --bgd-panel:rgba(11,8,21,.9);
  --bgd-raise:rgba(255,255,255,.045);
  --bgd-raise-2:rgba(255,255,255,.075);
  --bgd-line:var(--line,rgba(255,255,255,.12));
  --bgd-line-soft:rgba(255,255,255,.07);
  --bgd-ink:#fff8ff;
  --bgd-ink-2:#d8c7e7;
  --bgd-ink-3:#9d8bb2;
  --bgd-pink:var(--pink,#ff4fc9);
  --bgd-purple:var(--purple,#8b45ff);
  --bgd-hot:var(--hot,#ff5b72);
  --bgd-green:var(--green,#32f28c);
  --bgd-cyan:var(--cyan,#18e1ff);
  --bgd-sans:var(--font-sans,Inter,ui-sans-serif,system-ui,"Segoe UI",Roboto,"Noto Sans JP","Noto Sans KR","Noto Sans SC",Arial,sans-serif);
  --bgd-mono:var(--font-mono,ui-monospace,"Geist Mono",SFMono-Regular,Menlo,monospace);
  --bgd-edge:22px;
  --bgd-top:76px; /* the site's sticky header: the panel never covers it */
  font-family:var(--bgd-sans);
  color:var(--bgd-ink);
  -webkit-font-smoothing:antialiased;
}
.bgd-root *,.bgd-root *::before,.bgd-root *::after{box-sizing:border-box}
:where(.bgd-root) button{font:inherit;color:inherit}
.bgd-root p{color:inherit;margin:0}
.bgd-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@property --bgd-angle{syntax:"<angle>";initial-value:0deg;inherits:false}

/* ---------------------------------------------------------------- launcher */
.bgd-launch{
  position:fixed;z-index:90;inset-inline-end:var(--bgd-edge);bottom:var(--bgd-edge);
  display:flex;align-items:center;gap:10px;height:58px;padding-block:0;padding-inline:7px 16px;
  border:1.5px solid transparent;border-radius:999px;cursor:pointer;
  background:
    linear-gradient(rgba(12,8,22,.94),rgba(12,8,22,.94)) padding-box,
    conic-gradient(from var(--bgd-angle),var(--bgd-purple),var(--bgd-pink),var(--bgd-cyan),var(--bgd-purple)) border-box;
  box-shadow:0 18px 50px rgba(255,79,201,.22),0 10px 30px rgba(0,0,0,.5);
  animation:bgd-orbit 6s linear infinite;
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,opacity .2s;
}
.bgd-launch:hover{transform:translateY(-2px);box-shadow:0 22px 60px rgba(255,79,201,.32),0 10px 30px rgba(0,0,0,.5)}
.bgd-launch:focus-visible{outline:2px solid var(--bgd-pink);outline-offset:3px}
.bgd-launch[aria-expanded="true"]{opacity:0;pointer-events:none;transform:scale(.9)}
/* No plate behind the mark, and the mark larger than the box that holds it. The owner
   asked for both, matching the hero Ask bar. The margin is NOT decoration: this is a grid
   container with place-items:center, and a grid item larger than its track resolves
   centring to the START edge, so a 54px mark in a 44px box anchors top-left and clips.
   The -5px pulls the box out to meet it. Removing the margin re-breaks the alignment. */
.bgd-launch-avatar{width:44px;height:44px;display:grid;place-items:center}
.bgd-launch-avatar svg{width:54px;height:54px;margin:-5px}
.bgd-launch-label{font-weight:850;font-size:15px;letter-spacing:.01em;white-space:nowrap}
.bgd-kbd{font:600 11px/1 var(--bgd-mono);color:var(--bgd-ink-2);border:1px solid var(--bgd-line);border-bottom-width:2px;border-radius:6px;padding:4px 6px;background:rgba(255,255,255,.05)}
@keyframes bgd-orbit{to{--bgd-angle:360deg}}

/* ---------------------------------------------------------------- panel */
.bgd-panel{
  position:fixed;z-index:91;inset-inline-end:var(--bgd-edge);bottom:var(--bgd-edge);
  width:min(452px,calc(100vw - 32px));height:max(min(740px,calc(100dvh - var(--bgd-top) - 2*var(--bgd-edge))),min(420px,calc(100dvh - 2*var(--bgd-edge))));
  display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden;
  /* Belt and braces beside the body lock: a touch landing on the header or the composer is
     not inside .bgd-scroll, so that element's overscroll policy never governs it. */
  overscroll-behavior:none;
  border-radius:26px;border:1px solid var(--bgd-line);
  background:
    radial-gradient(120% 60% at 85% -10%,rgba(139,69,255,.30),transparent 60%),
    radial-gradient(90% 50% at 0% 0%,rgba(255,79,201,.14),transparent 55%),
    var(--bgd-panel);
  -webkit-backdrop-filter:blur(26px) saturate(150%);backdrop-filter:blur(26px) saturate(150%);
  box-shadow:0 40px 140px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.08);
  transform-origin:100% 100%;
  animation:bgd-rise .34s cubic-bezier(.2,.9,.2,1);
}
[dir="rtl"] .bgd-panel{transform-origin:0 100%}
.bgd-panel.bgd-wide{width:min(820px,calc(100vw - 32px));height:max(calc(100dvh - var(--bgd-top) - 2*var(--bgd-edge)),min(420px,calc(100dvh - 2*var(--bgd-edge))))}
@keyframes bgd-rise{from{opacity:0;transform:translateY(14px) scale(.965)}to{opacity:1;transform:none}}

/* header */
.bgd-head{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:14px 14px 13px 16px}
.bgd-head::after{content:"";position:absolute;inset-inline:0;bottom:0;height:1px;background:var(--bgd-line-soft)}
.bgd-busy .bgd-head::after{background:linear-gradient(90deg,transparent,var(--bgd-purple),var(--bgd-pink),var(--bgd-cyan),transparent);background-size:50% 100%;background-repeat:no-repeat;animation:bgd-scan 1.3s ease-in-out infinite}
@keyframes bgd-scan{from{background-position:-50% 0}to{background-position:150% 0}}
/* Same treatment in the panel header, same reason for the margin. The 5px of overflow
   sits inside .bgd-head's own 14px/16px padding, so nothing reaches the panel edge and
   .bgd-panel{overflow:hidden} has nothing to clip. */
.bgd-avatar{width:42px;height:42px;display:grid;place-items:center}
.bgd-avatar svg{width:52px;height:52px;margin:-5px}
.bgd-title{font-size:16px;font-weight:850;letter-spacing:-.01em;line-height:1.15}
.bgd-status{display:flex;align-items:center;gap:7px;margin-top:3px;font:500 11.5px/1.2 var(--bgd-mono);color:var(--bgd-ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bgd-status span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bgd-dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--bgd-green);box-shadow:0 0 10px var(--bgd-green)}
.bgd-busy .bgd-dot{background:var(--bgd-pink);box-shadow:0 0 10px var(--bgd-pink);animation:bgd-pulse 1s ease-in-out infinite}
@keyframes bgd-pulse{50%{opacity:.35}}
.bgd-actions{display:flex;gap:4px}
.bgd-icon{width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:10px;background:transparent;color:var(--bgd-ink-2);cursor:pointer;transition:background .15s,color .15s}
.bgd-icon:hover{background:var(--bgd-raise-2);color:var(--bgd-ink)}
.bgd-icon:focus-visible,.bgd-root a:focus-visible,.bgd-chip:focus-visible,.bgd-card:focus-visible,.bgd-follow:focus-visible{outline:2px solid var(--bgd-pink);outline-offset:2px}
.bgd-icon svg{width:18px;height:18px}

/* body */
/* THE PAGE BEHIND DOES NOT MOVE WHILE THE GUIDE IS OPEN.
   Set by guide.js, and only at the width where the panel covers the screen -- on desktop
   the Guide is a 452px floating card and freezing the whole page there would be a
   behaviour change nobody asked for. `position:fixed` rather than `overflow:hidden`
   because iOS Safari ignores overflow:hidden on body for touch scrolling; the negative
   `top` guide.js writes alongside this class is what stops the page jumping to 0. */
body.bgd-locked{position:fixed;left:0;right:0;width:100%;overflow:hidden}

.bgd-scroll{overflow-y:auto;overscroll-behavior:contain;padding:20px 18px 12px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.14) transparent}
.bgd-thread{display:flex;flex-direction:column;gap:22px;max-width:680px;margin-inline:auto}

/* empty state */
.bgd-hello{display:flex;flex-direction:column;gap:16px;padding-top:6px}
.bgd-hello-eyebrow{display:inline-flex;align-self:flex-start;align-items:center;gap:8px;font:700 10.5px/1 var(--bgd-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--bgd-ink-2);border:1px solid rgba(194,99,255,.42);background:rgba(127,63,203,.22);border-radius:999px;padding:7px 11px}
.bgd-hello-eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--bgd-green);box-shadow:0 0 10px var(--bgd-green)}
.bgd-hello h2{margin:0;font-size:28px;line-height:1.12;letter-spacing:-.025em;font-weight:850;text-wrap:balance}
.bgd-hello h2 span{background:linear-gradient(90deg,#ff54c9,#8d4cff);-webkit-background-clip:text;background-clip:text;color:transparent}
.bgd-hello>p{color:var(--bgd-ink-2);font-size:14.5px;line-height:1.55;max-width:60ch}
.bgd-wide .bgd-hello>p{max-width:64ch}
.bgd-cards{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:4px}
.bgd-wide .bgd-cards{grid-template-columns:repeat(4,1fr)}
.bgd-card{display:flex;flex-direction:column;gap:9px;text-align:start;padding:13px 13px 14px;border:1px solid var(--bgd-line-soft);border-radius:16px;background:var(--bgd-raise);cursor:pointer;transition:border-color .2s,background .2s,transform .2s}
.bgd-card:hover{border-color:rgba(255,79,201,.45);background:rgba(255,79,201,.07);transform:translateY(-2px)}
.bgd-card b{display:flex;align-items:center;gap:6px;font:700 10px/1 var(--bgd-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--bgd-pink)}
.bgd-card b svg{width:13px;height:13px}
.bgd-card span{font-size:13.5px;line-height:1.38;color:var(--bgd-ink)}
.bgd-langs{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.bgd-langs span{font:500 11px/1 var(--bgd-mono);color:var(--bgd-ink-3);border:1px solid var(--bgd-line-soft);border-radius:999px;padding:5px 8px}

/* visitor turn */
.bgd-me{align-self:flex-end;max-width:86%;padding:10px 14px;border-radius:18px 18px 6px 18px;background:linear-gradient(135deg,rgba(139,69,255,.34),rgba(255,79,201,.2));border:1px solid rgba(194,99,255,.38);font-size:14.5px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
[dir="rtl"] .bgd-me{border-radius:18px 18px 18px 6px}

/* guide turn */
.bgd-bot{display:flex;flex-direction:column;gap:12px;min-width:0}
.bgd-trail{border:1px solid var(--bgd-line-soft);border-radius:14px;background:rgba(0,0,0,.22);font:500 12px/1.4 var(--bgd-mono);color:var(--bgd-ink-3);overflow:hidden}
.bgd-trail summary{list-style:none;display:flex;align-items:center;gap:8px;padding:9px 12px;cursor:pointer;user-select:none}
.bgd-trail summary::-webkit-details-marker{display:none}
.bgd-trail summary .bgd-caret-i{margin-inline-start:auto;transition:transform .2s}
.bgd-trail[open] summary .bgd-caret-i{transform:rotate(180deg)}
.bgd-steps{list-style:none;margin:0;padding:0 12px 10px;display:flex;flex-direction:column;gap:8px}
.bgd-step{display:grid;grid-template-columns:16px minmax(0,1fr);gap:8px;align-items:start}
.bgd-step>*{min-width:0}
.bgd-step q{overflow-wrap:anywhere;color:var(--bgd-ink-2);quotes:"\201C" "\201D"}
.bgd-found{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.bgd-found span{font:500 11px/1.25 var(--bgd-sans);color:var(--bgd-ink-2);background:var(--bgd-raise);border:1px solid var(--bgd-line-soft);border-radius:7px;padding:4px 7px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bgd-state{width:14px;height:14px;margin-top:1px;border-radius:50%;display:grid;place-items:center}
.bgd-state.run{border:2px solid rgba(255,79,201,.25);border-top-color:var(--bgd-pink);animation:bgd-spin .7s linear infinite}
.bgd-state.ok{background:var(--bgd-green);color:#06130c}
.bgd-state.ok svg{width:9px;height:9px}
.bgd-state.none{background:var(--bgd-ink-3);color:#120c1c}
.bgd-state.hand{background:var(--bgd-pink);color:#fff}
.bgd-state svg{width:9px;height:9px}
@keyframes bgd-spin{to{transform:rotate(360deg)}}

.bgd-answer{font-size:14.8px;line-height:1.62;color:var(--bgd-ink);overflow-wrap:anywhere}
.bgd-answer>*:not(:first-child){margin-top:10px}
.bgd-answer p{color:var(--bgd-ink)}
.bgd-answer strong{font-weight:750;color:#fff}
.bgd-answer ul,.bgd-answer ol{margin-block:8px 0;padding-inline-start:20px;display:flex;flex-direction:column;gap:5px}
.bgd-answer li::marker{color:var(--bgd-pink);font-weight:700}
.bgd-answer a{color:var(--bgd-pink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.bgd-answer code{font:500 .86em/1.4 var(--bgd-mono);background:rgba(255,255,255,.08);border:1px solid var(--bgd-line);border-radius:6px;padding:1px 5px}
.bgd-answer pre{margin:0;white-space:pre-wrap;background:#010605;border:1px solid rgba(47,242,140,.35);border-radius:12px;padding:12px 14px;color:#7cffb8;font:12.5px/1.55 var(--bgd-mono);overflow-x:auto}
.bgd-answer pre code{background:none;border:0;padding:0;color:inherit;font:inherit}
.bgd-cursor{display:inline-block;width:.55em;height:1.05em;margin-inline-start:2px;vertical-align:-.15em;border-radius:2px;background:linear-gradient(180deg,var(--bgd-pink),var(--bgd-purple));animation:bgd-blink 1s steps(2,start) infinite}
@keyframes bgd-blink{to{visibility:hidden}}
.bgd-thinking{display:inline-flex;gap:5px;align-items:center;height:22px}
.bgd-thinking i{width:6px;height:6px;border-radius:50%;background:var(--bgd-pink);animation:bgd-bob 1.1s ease-in-out infinite}
.bgd-thinking i:nth-child(2){animation-delay:.15s;background:var(--bgd-purple)}
.bgd-thinking i:nth-child(3){animation-delay:.3s;background:var(--bgd-cyan)}
@keyframes bgd-bob{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-4px);opacity:1}}

.bgd-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.bgd-label{font:700 10px/1 var(--bgd-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--bgd-ink-3);margin-inline-end:4px}
.bgd-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--bgd-ink-2);border:1px solid var(--bgd-line);border-radius:999px;padding:5px 10px;background:var(--bgd-raise);text-decoration:none;transition:border-color .15s,color .15s}
.bgd-chip:hover{border-color:rgba(255,79,201,.5);color:#fff}
.bgd-chip svg{width:12px;height:12px}
.bgd-tools{display:flex;gap:2px;margin-inline-start:auto}
.bgd-tools .bgd-icon{width:30px;height:30px;color:var(--bgd-ink-3)}
.bgd-tools .bgd-icon svg{width:15px;height:15px}
.bgd-tools .bgd-icon[aria-pressed="true"]{color:var(--bgd-pink)}

.bgd-follows{display:flex;flex-direction:column;gap:6px}
.bgd-follow{display:flex;align-items:center;gap:10px;text-align:start;width:100%;padding:9px 12px;border:1px solid var(--bgd-line-soft);border-radius:12px;background:transparent;cursor:pointer;font-size:13.5px;color:var(--bgd-ink-2);transition:border-color .15s,background .15s,color .15s}
.bgd-follow:hover{border-color:rgba(255,79,201,.4);background:rgba(255,79,201,.06);color:#fff}
.bgd-follow svg{flex:none;width:14px;height:14px;color:var(--bgd-pink)}
[dir="rtl"] .bgd-follow svg,[dir="rtl"] .bgd-send svg{transform:scaleX(-1)}

.bgd-error{display:flex;gap:10px;align-items:flex-start;border:1px solid rgba(255,91,114,.4);background:rgba(255,91,114,.08);border-radius:12px;padding:10px 12px;font-size:13.5px;color:#ffd0d7}
.bgd-error button{margin-inline-start:auto;border:1px solid rgba(255,255,255,.2);background:transparent;border-radius:8px;padding:4px 10px;cursor:pointer;font-size:12.5px;white-space:nowrap}

/* ---------------------------------------------------------------- handoff */
.bgd-hand{
  position:relative;border-radius:20px;border:1.5px solid transparent;padding:16px;
  background:
    linear-gradient(rgba(16,10,30,.97),rgba(16,10,30,.97)) padding-box,
    linear-gradient(120deg,rgba(139,69,255,.9),rgba(255,79,201,.9),rgba(24,225,255,.6)) border-box;
  box-shadow:0 20px 60px rgba(255,79,201,.14);
  animation:bgd-rise .35s cubic-bezier(.2,.9,.2,1);
}
.bgd-hand-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.bgd-hand-icon{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,var(--bgd-purple),var(--bgd-pink));color:#fff}
.bgd-hand-icon svg{width:17px;height:17px}
.bgd-hand h3{margin:0;font-size:15px;font-weight:800;letter-spacing:-.005em}
.bgd-badge{margin-inline-start:auto;font:700 9.5px/1 var(--bgd-mono);letter-spacing:.14em;text-transform:uppercase;color:#fff;border-radius:999px;padding:5px 9px;background:linear-gradient(100deg,#6a2fd6,#b0177c)}
.bgd-hand>p{color:var(--bgd-ink-2);font-size:13px;line-height:1.5;margin:8px 0 12px}
.bgd-form{display:flex;flex-direction:column;gap:10px}
.bgd-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.bgd-field{display:flex;flex-direction:column;gap:5px;min-width:0}
.bgd-field label{font:600 10.5px/1 var(--bgd-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--bgd-ink-3)}
.bgd-field input,.bgd-field textarea{width:100%;font:16px/1.45 var(--bgd-sans);color:var(--bgd-ink);background:rgba(255,255,255,.05);border:1px solid var(--bgd-line);border-radius:11px;padding:9px 11px;outline:none;transition:border-color .15s,box-shadow .15s}
.bgd-field textarea{resize:vertical;min-height:84px;max-height:220px}
.bgd-field input:focus,.bgd-field textarea:focus{border-color:var(--bgd-pink);box-shadow:0 0 0 3px rgba(255,79,201,.18)}
.bgd-field input[aria-invalid="true"]{border-color:var(--bgd-hot)}
.bgd-check{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--bgd-ink-2);cursor:pointer}
.bgd-check input{width:16px;height:16px;accent-color:var(--bgd-pink);margin:0}
.bgd-hp{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;opacity:0}
.bgd-form-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.bgd-form-msg{font-size:12.5px;color:#ffb8c3}
.bgd-primary{margin-inline-start:auto;text-decoration:none;display:inline-flex;align-items:center;gap:8px;border:0;border-radius:12px;padding:10px 16px;font-weight:850;font-size:14px;color:#fff;cursor:pointer;background:linear-gradient(100deg,var(--bgd-purple),var(--bgd-pink),var(--bgd-hot));box-shadow:0 12px 30px rgba(255,79,201,.22);transition:filter .15s,transform .15s}
.bgd-primary:hover{filter:brightness(1.08);transform:translateY(-1px)}
.bgd-primary:disabled{filter:grayscale(.6) brightness(.8);cursor:progress;transform:none}
.bgd-primary svg{width:15px;height:15px}
.bgd-primary:focus-visible,.bgd-send:focus-visible,.bgd-human:focus-visible,.bgd-error button:focus-visible,.bgd-trail summary:focus-visible,.bgd-check input:focus-visible{outline:2px solid var(--bgd-pink);outline-offset:2px}
.bgd-done{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center}
.bgd-done-mark{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--bgd-green);color:#06130c;box-shadow:0 0 30px rgba(50,242,140,.35);animation:bgd-pop .45s cubic-bezier(.2,1.4,.3,1)}
.bgd-done-mark svg{width:20px;height:20px}
.bgd-done h3{margin:0 0 3px;font-size:15px}
.bgd-done p{font-size:13px;color:var(--bgd-ink-2);line-height:1.5}
.bgd-done code{font:600 12.5px var(--bgd-mono);color:#fff;background:rgba(255,255,255,.08);border-radius:6px;padding:1px 6px}
@keyframes bgd-pop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}

/* ---------------------------------------------------------------- composer */
.bgd-foot{padding:10px 14px 12px;border-top:1px solid var(--bgd-line-soft);background:linear-gradient(180deg,transparent,rgba(0,0,0,.25))}
.bgd-compose{display:grid;grid-template-columns:1fr auto;align-items:end;gap:8px;border:1px solid var(--bgd-line);border-radius:18px;background:rgba(255,255,255,.045);padding:6px 6px 6px 14px;transition:border-color .2s,box-shadow .2s;max-width:680px;margin-inline:auto}
[dir="rtl"] .bgd-compose{padding:6px 14px 6px 6px}
.bgd-compose:focus-within{border-color:rgba(255,79,201,.6);box-shadow:0 0 0 4px rgba(255,79,201,.12)}
/* 16px, NOT 15: a field under 16px makes iOS zoom the page in when it takes focus, and it does
   not zoom back out. Measured on every phone width by check-mobile-chrome, on all four routes. */
.bgd-compose textarea{width:100%;resize:none;border:0;outline:none;background:transparent;color:var(--bgd-ink);font:16px/1.45 var(--bgd-sans);padding:8px 0;max-height:min(150px,22dvh);min-height:24px}
.bgd-compose textarea::placeholder{color:var(--bgd-ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bgd-send{width:40px;height:40px;border:0;border-radius:13px;display:grid;place-items:center;cursor:pointer;color:#fff;background:linear-gradient(135deg,var(--bgd-purple),var(--bgd-pink));box-shadow:0 8px 22px rgba(255,79,201,.3);transition:transform .15s,filter .15s,opacity .15s}
.bgd-send:hover{transform:translateY(-1px);filter:brightness(1.1)}
.bgd-send:disabled{opacity:.35;cursor:default;transform:none;box-shadow:none}
.bgd-send svg{width:18px;height:18px}
.bgd-send.bgd-stop{background:rgba(255,255,255,.12);box-shadow:none}
.bgd-foot-row{display:flex;align-items:center;gap:10px;justify-content:space-between;margin:8px auto 0;max-width:680px;font-size:11.5px;color:var(--bgd-ink-3)}
.bgd-foot-row span{min-width:0}
.bgd-human{flex:none;display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;color:var(--bgd-ink-2);cursor:pointer;font-size:12px;font-weight:650;padding:2px 0}
.bgd-human:hover{color:var(--bgd-pink)}
.bgd-human svg{width:13px;height:13px}

.bgd-warn{display:flex;gap:8px;align-items:flex-start;max-width:680px;margin:0 auto 8px;font-size:12.5px;line-height:1.45;color:#ffc2cb;border:1px solid rgba(255,91,114,.35);background:rgba(255,91,114,.08);border-radius:10px;padding:7px 10px}
.bgd-stopped{font:500 12px/1.3 var(--bgd-mono);color:var(--bgd-ink-3)}
.bgd-answer em{font-style:italic;color:#fff}
.bgd-answer ol{list-style:decimal}
.bgd-found span{direction:ltr}
body:has(.mobile-menu.open) .bgd-launch{display:none}
/* The cookie banner is a legal control: the launcher never sits on top of it. */
body:has(#consentBanner:not([hidden])) .bgd-launch{display:none}

/* ---------------------------------------------------------------- blip */
.bgd-blip .b-float{transform-box:view-box;transform-origin:50px 62px;animation:bgd-bF 3.4s ease-in-out infinite}
.bgd-blip .b-eye{transform-box:view-box;transform-origin:50px 50px;animation:bgd-bB 4.8s ease-in-out infinite}
.bgd-blip .b-look{transform-box:view-box;transform-origin:50px 50px;animation:bgd-bL 6.4s ease-in-out infinite}
.bgd-busy .bgd-blip .b-look{animation:bgd-read 1.2s ease-in-out infinite}
@keyframes bgd-bF{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes bgd-bB{0%,88%,100%{transform:scaleY(1)}93%{transform:scaleY(.12)}}
@keyframes bgd-bL{0%,26%{transform:translate(0,0)}40%,58%{transform:translate(3px,.4px)}72%,90%{transform:translate(-2.4px,0)}100%{transform:translate(0,0)}}
@keyframes bgd-read{0%,100%{transform:translate(-3px,1px)}50%{transform:translate(3px,1px)}}
/* The speech bubble and its typing dots. Same figures as the generated
   public/brand/blip-guide.svg, which scripts/check-guide-blip.mjs enforces --
   the mark is defined once, in the brand source, and this is a copy that is not
   allowed to drift. The dots quicken while an answer is being composed, so the
   mark carries the same "working" signal the eye already does. */
.bgd-blip .b-tool{transform-box:view-box;transform-origin:66px 64px;animation:bgd-bT 3.1s ease-in-out infinite}
.bgd-blip .b-dot{transform-box:view-box;animation:bgd-bD 1.5s ease-in-out infinite}
.bgd-blip .b-dot.d2{animation-delay:.18s}
.bgd-blip .b-dot.d3{animation-delay:.36s}
.bgd-busy .bgd-blip .b-dot{animation-duration:.72s}
@keyframes bgd-bT{0%,100%{transform:rotate(-6deg) translateY(0)}50%{transform:rotate(7deg) translateY(-1.4px)}}
@keyframes bgd-bD{0%,62%,100%{opacity:.35;transform:translateY(0)}28%{opacity:1;transform:translateY(-1.7px)}}

/* ---------------------------------------------------------------- small screens */
@media (max-width:560px){
  .bgd-root{--bgd-edge:14px}
  .bgd-launch{padding-inline:6px;width:58px;justify-content:center}
  .bgd-launch-label,.bgd-launch .bgd-kbd{display:none}
  .bgd-panel,.bgd-panel.bgd-wide{inset:auto 0 0 0;width:100%;height:calc(100dvh - 10px);border-radius:22px 22px 0 0;border-bottom:0}
  /* The footer's clearance against browser chrome is MEASURED by guide.js, not computed here.
     This rule used to add `(100lvh - 100dvh)`, the height of whatever chrome is showing. That
     assumes the panel's bottom edge sits BEHIND that chrome, which is true in Safari and false
     in Chrome on iOS, where fixed elements already stop above the toolbar. On Chrome the
     reservation was pure surplus and showed as a band of dead space under the composer that
     vanished when the toolbar hid itself. CSS cannot tell the two cases apart; a measurement
     can. The value below is the floor, and guide.js adds whatever is actually hidden. */
  .bgd-foot{padding-bottom:calc(12px + env(safe-area-inset-bottom))}
  .bgd-expand{display:none}
  .bgd-cards{grid-template-columns:1fr}
  .bgd-row{grid-template-columns:1fr}
  .bgd-hint{display:none}
}
@media (prefers-reduced-motion:reduce){
  .bgd-root *,.bgd-root *::before,.bgd-root *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .bgd-launch{animation:none}
}
@media (forced-colors:active){
  .bgd-launch,.bgd-panel,.bgd-hand,.bgd-compose{border:1px solid CanvasText}
  .bgd-send,.bgd-primary{border:1px solid ButtonText}
}

/* The robot check. Empty and hidden unless Cloudflare asks this visitor to confirm with a click. */