/* ============================================================
   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}
}

/* Fallback for in-app browsers (confirmed on Instagram's) that never tell the
   page a keyboard opened at all — no resize, no visualViewport change,
   nothing to measure. labbu.js detects that dead end (checkKeyboardGuess)
   and adds this class instead of trying to size against a real
   measurement: it just caps the sheet at roughly the top half of the
   screen, which keeps the input clear of a typical phone keyboard even with
   zero real signal to size against. Only engages when the precise
   measurement path finds nothing to react to, so browsers that report the
   keyboard correctly are untouched. !important because JS may have already
   set an explicit inline height from before focus. */
@media (max-width:520px){
  .lb-root.lb-kb-guess .lb-panel{
    height:56vh !important;
    transform: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}
}