/* ============================================================
   Labbu — chat widget for Australian Fight Academy
   Self-contained. Everything is prefixed .lb- so it can't collide
   with the rest of the site's CSS.
   ============================================================ */

.lb-root{
  --lb-ink:#141210;
  --lb-brand:#CC3D17;
  --lb-cream:#F5E7D5;
  --lb-paper:#FBFAF7;
  --lb-line:#DED8CE;
  --lb-muted:#6B635A;
  position:fixed; right:20px; bottom:20px; z-index:9998;
  font-family:'Work Sans',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.lb-root *{box-sizing:border-box}

/* ---------------- launcher ---------------- */
.lb-launch{
  width:64px; height:64px; border-radius:50%; padding:0;
  border:2px solid var(--lb-ink); background:var(--lb-ink);
  cursor:grab; overflow:hidden; display:block;
  box-shadow:0 4px 14px rgba(0,0,0,.34);
  transition:transform .18s ease;
  touch-action:none;   /* the launcher is a drag handle, not a scroll surface */
}
.lb-root.lb-dragging .lb-launch{cursor:grabbing}
.lb-root.lb-dragging{user-select:none}
.lb-launch:hover{transform:scale(1.06)}
.lb-launch:focus-visible{outline:3px solid var(--lb-brand); outline-offset:3px}
.lb-launch img{width:100%; height:100%; object-fit:cover; display:block}
.lb-launch.lb-pulse{animation:lb-pulse 1.6s cubic-bezier(.3,1.5,.5,1)}
@keyframes lb-pulse{
  0%,100%{transform:scale(1)} 20%{transform:scale(1.13)}
  45%{transform:scale(.98)} 70%{transform:scale(1.05)}
}

.lb-dot{
  position:absolute; top:-2px; right:-2px; width:15px; height:15px;
  border-radius:50%; background:var(--lb-brand); border:2px solid #fff;
}

/* ---------------- greeting bubble ---------------- */
.lb-greet{
  position:absolute; right:76px; bottom:8px; width:210px;
  background:var(--lb-cream); border:2px solid var(--lb-ink);
  padding:11px 13px; font-size:.82rem; line-height:1.45; color:var(--lb-ink);
  box-shadow:3px 3px 0 var(--lb-ink);
  opacity:0; transform:translateY(6px); pointer-events:none;
  transition:opacity .3s ease, transform .3s ease;
}
.lb-greet.lb-show{opacity:1; transform:translateY(0); pointer-events:auto}
.lb-greet button{
  position:absolute; top:-14px; right:-14px; width:36px; height:36px;
  border-radius:50%; border:2px solid var(--lb-ink); background:#fff;
  cursor:pointer; font-size:17px; line-height:1; padding:0; color:var(--lb-ink);
  display:grid; place-items:center;
}
.lb-greet button:focus-visible{outline:3px solid var(--lb-brand); outline-offset:2px}

/* ---------------- panel ---------------- */
.lb-panel{
  /* fixed + JS-computed left/top so the panel always tracks wherever
     Labbu has been dragged to, and never opens off-screen */
  position:fixed; width:370px;
  max-height:min(620px, calc(100vh - 24px));
  background:#fff; border:3px solid var(--lb-ink);
  box-shadow:0 14px 42px rgba(0,0,0,.30);
  display:none; flex-direction:column; overflow:hidden;
}
.lb-panel.lb-open{display:flex}

.lb-head{
  background:var(--lb-ink); color:var(--lb-cream);
  padding:11px 13px; display:flex; align-items:center; gap:10px; flex:0 0 auto;
}
.lb-av{width:42px; height:42px; border-radius:50%; overflow:hidden; background:#000; flex:0 0 auto}
.lb-av img{width:100%; height:100%; object-fit:cover; display:block}
.lb-name{flex:1; min-width:0}
.lb-name b{
  font-family:'Anton',Impact,sans-serif; font-weight:400; font-size:1.02rem;
  text-transform:uppercase; letter-spacing:.03em; display:block; line-height:1;
}
.lb-name span{
  font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:.6rem;
  letter-spacing:.09em; text-transform:uppercase; color:#8FBF7A;
}
.lb-x{
  background:none; border:none; color:var(--lb-cream); cursor:pointer;
  font-size:24px; line-height:1; padding:4px 6px; min-width:36px; min-height:36px;
}
.lb-x:focus-visible{outline:2px solid var(--lb-brand); outline-offset:2px}

.lb-log{
  flex:1 1 auto; min-height:0; overflow-y:auto; padding:14px;
  display:flex; flex-direction:column; gap:10px; background:var(--lb-paper);
  overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
}

/* Branded hero — shown only before the conversation starts, so the shirt and
   glove logos land at a size where they're actually readable. It collapses
   away on the first message to give the chat its full height back. */
.lb-hero{
  margin:-14px -14px 4px; background:var(--lb-ink);
  border-bottom:2px solid var(--lb-ink);
  overflow:hidden; flex:0 0 auto;
  max-height:270px; transition:max-height .35s ease, opacity .25s ease;
}
.lb-hero img{display:block; width:100%; height:auto}
.lb-hero.lb-gone{max-height:0; opacity:0; margin-bottom:0; border-bottom-width:0}

/* On short screens the hero would eat the conversation — trim it. */
@media (max-height:700px){ .lb-hero{max-height:170px} }
.lb-msg{
  font-size:.87rem; line-height:1.5; padding:10px 12px; max-width:86%;
  overflow-wrap:anywhere; white-space:pre-wrap;
}
.lb-bot{background:var(--lb-cream); border:2px solid var(--lb-ink); align-self:flex-start}
.lb-me{background:var(--lb-ink); color:var(--lb-cream); align-self:flex-end}
.lb-sys{
  align-self:center; text-align:center; font-size:.74rem; color:var(--lb-muted);
  background:none; border:none; max-width:100%; padding:4px 0;
}

.lb-typing{display:flex; gap:4px; align-items:center; padding:12px}
.lb-typing i{
  width:7px; height:7px; border-radius:50%; background:var(--lb-muted);
  display:block; animation:lb-blip 1.1s infinite;
}
.lb-typing i:nth-child(2){animation-delay:.16s}
.lb-typing i:nth-child(3){animation-delay:.32s}
@keyframes lb-blip{0%,60%,100%{opacity:.28} 30%{opacity:1}}

.lb-chips{display:flex; flex-wrap:wrap; gap:6px; padding:0 14px 12px; background:var(--lb-paper)}
.lb-chip{
  font-family:inherit; font-size:.78rem; font-weight:600; cursor:pointer;
  border:2px solid var(--lb-ink); background:#fff; color:var(--lb-ink);
  padding:9px 11px; min-height:38px;
}
.lb-chip:hover{background:var(--lb-brand); color:#fff}
.lb-chip:focus-visible{outline:3px solid var(--lb-brand); outline-offset:2px}

.lb-form{
  display:flex; gap:8px; align-items:flex-end; padding:11px; border-top:2px solid var(--lb-ink);
  background:#fff; flex:0 0 auto;
}
.lb-input{
  flex:1; font-family:inherit; font-size:16px; /* 16px stops iOS zooming on focus */
  padding:11px 12px; border:2px solid var(--lb-ink); background:#fff;
  color:var(--lb-ink); min-width:0; border-radius:0;
  resize:none; overflow-y:auto; line-height:1.4;
  min-height:44px; max-height:120px;
}
.lb-input:focus{outline:3px solid var(--lb-brand); outline-offset:-1px}
.lb-input:disabled{background:#EFEDE8; color:var(--lb-muted)}
.lb-send{
  font-family:inherit; font-weight:700; font-size:.85rem; cursor:pointer;
  border:2px solid var(--lb-ink); background:var(--lb-brand); color:#fff;
  padding:0 15px; min-height:44px;
}
.lb-send:hover{background:var(--lb-ink)}
.lb-send:disabled{background:#B9B2A7; border-color:#B9B2A7; cursor:default}
.lb-send:focus-visible{outline:3px solid var(--lb-ink); outline-offset:2px}

/* ---------------- mobile: full-height sheet ---------------- */
@media (max-width:520px){
  .lb-root{right:14px; bottom:14px}
  .lb-panel{
    position:fixed; left:0; right:0; top:0; bottom:auto;
    width:100%; max-height:none; border-width:0; border-top:3px solid var(--lb-ink);
    height:100vh;    /* fallback for browsers without dvh / visualViewport */
    height:100dvh;   /* dynamic viewport height where supported; JS narrows this
                        to the area above the keyboard when one is open */
  }
  .lb-panel.lb-open{display:flex}
  /* Full-screen sheet puts Send exactly where the launcher sits, and the
     launcher paints on top — so it must get out of the way while open.
     The panel has its own close button in the header. */
  .lb-root.lb-active .lb-launch,
  .lb-root.lb-active .lb-dismiss,
  .lb-root.lb-active .lb-greet{display:none}
  .lb-log{padding-bottom:18px}
  .lb-greet{width:172px; right:72px}
  .lb-launch{width:58px; height:58px}
}

@media (prefers-reduced-motion:reduce){
  .lb-launch,.lb-greet,.lb-typing i{transition:none !important; animation:none !important}
}


/* Steps back while the trial form is on screen so he doesn't sit on top of a
   field, but stays tappable — the contact page is where people convert. */
.lb-root.lb-yield .lb-launch{
  opacity:.34; transform:scale(.82);
  transition:opacity .25s ease, transform .25s ease;
}
.lb-root.lb-yield .lb-launch:hover,
.lb-root.lb-yield .lb-launch:focus-visible{opacity:1; transform:scale(1)}
.lb-root.lb-yield .lb-greet{opacity:0; pointer-events:none}


/* ============================================================
   Dismiss (X) + drag-to-remove bin
   ============================================================ */

/* Small X on the launcher's shoulder. Revealed on hover on desktop, always
   visible on touch. Sits above the launcher so it takes the click, and it's
   a sibling (not a child) so grabbing the launcher body still starts a drag. */
.lb-dismiss{
  position:absolute; top:-6px; right:-6px; z-index:2;
  width:28px; height:28px; border-radius:50%; padding:0;
  border:2px solid var(--lb-ink); background:#fff; color:var(--lb-ink);
  font-size:16px; line-height:1; cursor:pointer;
  display:grid; place-items:center;
  box-shadow:0 2px 6px rgba(0,0,0,.28);
  opacity:0; transform:scale(.6); pointer-events:none;
  transition:opacity .16s ease, transform .16s ease,
             background .15s ease, color .15s ease, border-color .15s ease;
}
.lb-dismiss:hover{background:var(--lb-brand); color:#fff; border-color:var(--lb-brand)}
@media (hover:hover){
  .lb-root:hover .lb-dismiss{opacity:1; transform:scale(1); pointer-events:auto}
}
/* Touch devices don't get an X at all — it's removed from the DOM in labbu.js
   (see the isTouch branch), which is more reliable than any hover media query
   and can't be resurrected by a sticky :hover after a tap. Desktop keeps the
   hover-revealed X below. */
.lb-dismiss:focus-visible{
  outline:3px solid var(--lb-brand); outline-offset:2px;
  opacity:1; transform:scale(1); pointer-events:auto;
}
/* keep it out of the way mid-drag */
.lb-root.lb-dragging .lb-dismiss{opacity:0 !important; pointer-events:none !important}

/* When the chat is open, the panel has its own close button in the header —
   hide the launcher's dismiss X so there aren't two X's competing on desktop. */
.lb-root.lb-active .lb-dismiss{display:none}

/* Hidden entirely once dismissed. In-memory only — a reload brings him back. */
.lb-root.lb-dismissed{display:none !important}

/* The remove target: fades up from the bottom edge only while dragging. */
/* Colours are hardcoded (not var()) because the bin lives on <body>, outside
   .lb-root, so the widget's CSS variables aren't in scope here. Dark body shows
   on the cream page; the light ring keeps it visible over dark image sections. */
.lb-bin{
  position:fixed; left:50%; bottom:26px; z-index:9997;
  display:flex; align-items:center; gap:9px;
  padding:13px 22px; border-radius:999px;
  background:#141210; color:#F5E7D5;
  border:2px solid #F5E7D5;
  box-shadow:0 12px 34px rgba(0,0,0,.45);
  font-family:'Work Sans',system-ui,-apple-system,sans-serif;
  font-size:.85rem; font-weight:700; letter-spacing:.02em; white-space:nowrap;
  opacity:0; pointer-events:none;               /* geometry-tested, never clickable */
  transform:translate(-50%, 24px);
  transition:opacity .2s ease, transform .2s ease,
             background .15s ease, border-color .15s ease, color .15s ease;
}
.lb-bin svg{width:18px; height:18px; display:block; flex:0 0 auto}
.lb-bin.lb-bin-show{opacity:1; transform:translate(-50%, 0)}
.lb-bin.lb-bin-hot{
  background:#CC3D17; border-color:#fff; color:#fff;   /* release-to-remove */
  transform:translate(-50%, -4px) scale(1.08);
  box-shadow:0 14px 40px rgba(204,61,23,.55);
}
@media (max-width:520px){
  .lb-bin{bottom:20px; padding:12px 18px}
}
@media (prefers-reduced-motion:reduce){
  .lb-dismiss{transition:opacity .16s ease}
  .lb-bin{transition:opacity .2s ease}
}